#faq_box{} #faq_box .ad{width: 100%;height: 400px;background: url(//ueeshop.ly200-cdn.com/static/custom/UPAU/UPAU014/themes-v2/default/images/faq_ad.jpg) no-repeat center center / cover;} #faq_box .ad .content{position: relative;max-width: 1540px;height: 100%;margin: 0 auto;} #faq_box .ad .page_title{padding-top: 60px;font-size: 60px;color: #ffffff;font-family: 'Lato-Bold';text-align: center;} #faq_box .ad .location{margin-top: 15px;text-align: center;font-size: 14px;font-family: 'Lato-Regular';color: #ffffff;} #faq_box .ad .location a{font-size: 14px;font-family: 'Lato-Regular';color: #ffffff;} #faq_box .ad .location a:hover{text-decoration: none;} #faq_box .ad .faq_cate{position: absolute;bottom: 0;left: 0;width: 100%;height: 170px;margin: 0 auto;background: #ffffff;text-align: center;} #faq_box .ad .faq_cate .item_box{margin-top: 68px;} #faq_box .ad .faq_cate .item{display: inline-block;vertical-align: middle;margin: 9px;width: 142px;text-align: center;border: 1px solid #51284f;border-radius: 20px;} #faq_box .ad .faq_cate .item a{display: block;font-size: 14px;color: #51284f;padding: 9px 0;} #faq_box .ad .faq_cate .item:hover,#faq_box .ad .faq_cate .item.on{background: #51284f;} #faq_box .ad .faq_cate .item:hover a,#faq_box .ad .faq_cate .item.on a{text-decoration: none;color: #ffffff;} #faq_box .ad .faq_cate .item.search_item{position: relative;width: 34px;height: 34px;background: url(//ueeshop.ly200-cdn.com/static/custom/UPAU/UPAU014/themes-v2/default/images/faq_search_icon.png) no-repeat center center / 18px 19px;cursor: pointer;} #faq_box .ad .faq_cate .search_item .search_box{position: absolute;top: 50%;right: -1px;width: 250px;height: 42px;background: #fff;border: 1px solid #51284f;pointer-events: none;opacity: 0;transform: translateY(-50%);transition: all .3s;border-radius: 4px;} #faq_box .ad .faq_cate .search_item .search_box form{width: 100%;height: 100%;} #faq_box .ad .faq_cate .search_item .search_box form input[type='text']{padding-left: 10px;width: 80%;height: 100%;background: none;border: 0;box-sizing: border-box;} #faq_box .ad .faq_cate .search_item .search_box form input[type='submit']{cursor: pointer;width: 15%;height: 100%;background: url(//ueeshop.ly200-cdn.com/static/custom/UPAU/UPAU014/themes-v2/default/images/faq_search_icon.png) no-repeat center center / 18px 19px;border: 0;} #faq_box .faq_content{margin: 0 auto;} #faq_box .faq_content .faq_wide{max-width: 1540px;margin: 0 auto;} #faq_box .faq_content .faq_list{margin: 0 59px 120px;} #faq_box .faq_content .faq_list .list{line-height: 22px;margin-bottom: 10px;} #faq_box .faq_content .faq_list .list .question{position: relative;padding: 12px 17px;font-size: 16px;color: #444444;background: #f7f4f2;cursor: pointer;} #faq_box .faq_content .faq_list .list .question b{position: absolute;top: 21px;right: 23px;transition: all .4s ease-out;-moz-transition: all .4s ease-out;-ms-transition: all .4s ease-out;-o-transition: all .4s ease-out;-webkit-transition: all .4s ease-out;} #faq_box .faq_content .faq_list .list.on .question b{top: 19px;transform: rotate(-90deg);} #faq_box .faq_content .faq_list .list .answer{height: 0;font-size: 14px;color: #444444;overflow: hidden;transition: all .4s ease-out;-moz-transition: all .4s ease-out;-ms-transition: all .4s ease-out;-o-transition: all .4s ease-out;-webkit-transition: all .4s ease-out;} #faq_box .faq_content .faq_list .list.on .answer{height: auto;padding: 12px 17px;} #faq_box .faq_content .faq_map{} #faq_box .faq_content .faq_map .map{float: left;width: calc( 100% - 630px );} #faq_box .faq_content .faq_map .detail{float: left;width: 440px;padding: 0 95px;font-family: 'Lato-Regular';} #faq_box .faq_content .faq_map .detail .name{font-size: 42px;font-family: 'Lato-Bold';margin-top: 50px;} #faq_box .faq_content .faq_map .detail .email{margin: 30px 0;font-size: 20px;} #faq_box .faq_content .faq_map .detail .brief{margin-bottom: 70px;} #faq_box .faq_content .faq_map .detail .brief p{font-size: 20px;line-height: 36px;} #faq_box .faq_content .faq_map .detail .need{font-size: 24px;margin-bottom: 5px;} #faq_box .faq_content .faq_map .detail .phone{font-size: 40px;font-family: 'Lato-Bold';} #faq_box .faq_form{position: relative;min-height: 780px;margin-top: 20px;text-align: center;background: url(//ueeshop.ly200-cdn.com/static/custom/UPAU/UPAU014/themes-v2/default/images/service_bg.jpg) no-repeat center center / cover;margin-top: 0;} #faq_box .faq_form .content{width: 100%;height: 100%;background: rgba(0,0,0,0.3);padding-top: 50px;} #faq_box .faq_form .title{font-size: 42px;color: #ffffff;font-family: 'Lato-Bold';padding-top: 45px;} #faq_box .faq_form .brief{font-size: 16px;color: #ffffff;font-family: 'Lato-Regular';margin-top: 10px;} #faq_box .faq_form form{display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: space-between;width: 920px;margin: 45px auto 0;} #faq_box .faq_form .rows{width: 100%;margin-bottom: 20px;} #faq_box .faq_form .rows.r50{width: 450px;} #faq_box .faq_form .rows .input{width: calc( 100% - 20px );height: 40px;line-height: 40px;padding: 0 9px;background: rgba(0,0,0,0.2);border-color: #a6a3b0;color: #ffffff;} #faq_box .faq_form .rows .textarea{width: calc( 100% - 20px );height: 190px;padding: 9px;background: rgba(0,0,0,0.2);border-color: #a6a3b0;color: #ffffff;} #faq_box .faq_form .rows .submit{width: 202px;height: 48px;line-height: 48px;border-radius: 25px;background: #ffffff;font-size: 18px;margin-top: 40px;cursor: pointer;} #faq_box .faq_form form.load .submit{background: #dfdfdf;color: #fff;border-color: #dfdfdf;cursor: no-drop;} #faq_box .faq_form input::-webkit-input-placeholder{font-size:14px;color:#ffffff;} #faq_box .faq_form input:-moz-placeholder{font-size:14px;color:#ffffff;} #faq_box .faq_form input:-ms-input-placeholder{font-size:14px;color:#ffffff;} #faq_box .faq_form textarea::-webkit-input-placeholder{font-size:14px;color:#ffffff;} #faq_box .faq_form textarea:-moz-placeholder{font-size:14px;color:#ffffff;} #faq_box .faq_form textarea:-ms-input-placeholder{font-size:14px;color:#ffffff;} #faq_box .faq_form input.null::-webkit-input-placeholder{color:#000000;} #faq_box .faq_form input.null:-moz-placeholder{color:#000000;} #faq_box .faq_form input.null:-ms-input-placeholder{color:#000000;} #faq_box .faq_form textarea.null::-webkit-input-placeholder{color:#000000;} #faq_box .faq_form textarea.null:-moz-placeholder{color:#000000;} #faq_box .faq_form textarea.null:-ms-input-placeholder{color:#000000;} #faq_box .faq_content .page_title{padding-top: 60px;font-size: 60px;color: #ffffff;font-family: 'Lato-Bold';text-align: center;} #faq_box .faq_content .location{margin-top: 15px;text-align: center;font-size: 14px;font-family: 'Lato-Regular';color: #ffffff!important;text-align: left;} #faq_box .faq_content .location a{font-size: 14px;font-family: 'Lato-Regular';color: #ffffff!important;} #faq_box .faq_content .location a:hover{text-decoration: none;} @media(max-width: 1580px){ #faq_box .ad .faq_cate{height: auto;} #faq_box .ad .faq_cate .item_box{margin: 35px auto;} #faq_box .faq_content .faq_list{margin: 25px 4% 60px;} #faq_box .faq_content .faq_list .list .question{padding: 12px 45px 12px 17px;} #faq_box .faq_content .faq_map .detail{padding: 0 40px;} } @media(max-width: 1280px){ #faq_box .faq_content .faq_map .map{float: none;width: 100%;text-align: center;} #faq_box .faq_content .faq_map .detail{float: none; width: 92%;padding: 0;margin: 0 auto;} } @media(max-width: 1000px){ #faq_box .faq_form form{width: 92%;} #faq_box .faq_form .rows.r50{width: 48%;} #faq_box .faq_content .faq_map .detail .name{font-size: 25px;} #faq_box .faq_content .faq_map .detail .phone{font-size: 22px;} } @media(max-width: 768px){ #faq_box .ad .faq_cate{background: none;} #faq_box .ad .faq_cate .item{background: #ffffff;} #faq_box .ad .faq_cate .item.search_item{background-color: #ffffff;} #faq_box .faq_form{height: auto;margin-top: 0;} #faq_box .faq_form .brief{margin: 20px 4% 0;} #faq_box .faq_form .title{font-size: 25px;padding-top: 35px;} #faq_box .faq_form form{margin-top: 20px;} #faq_box .faq_form .rows.r50{width: 100%;} #faq_box .faq_form .rows .submit{margin: 20px auto;} }