@charset "utf-8";
.faq .top-banner,.contactUs .top-banner{ padding:0; background: 50% 0 no-repeat fixed; background-size:cover; height:195px; display:flex; align-items:center; justify-content:center; } 
.faq .top-banner{ background-image:url('/connect/images/faq/faq-bg.jpg'); }

.faq .top-banner h1{ color:#fff; }
.faq .anchor-box{ display:flex; justify-content:center; margin-bottom:60px; background:#fff; transition:position .8s;}
.faq .anchor-box li{ font-size:1.6rem; width:10.5em; padding:0; margin:1em .5em; }
.faq .anchor-box li a{ display:block; width:100%; height:100%; padding:.6em; }
.faq .anchor-box.fixed{ position:fixed; top:0; left:0; width:100%; background:#929ba4; z-index:98; transition:top .3s cubic-bezier(.21,.9,.64,.98);}
.faq .anchor-box.fixed li{ color:#fff; border-color:#fff;}
.faq .anchor-box.fixed li.active{ background:#414d61; }
.faq .faq-box h2{ border-bottom:solid 1px #221e1f; font-size:2.4rem; padding:.3em 0;}
.faq .faqs{ text-align:left; margin:30px auto 100px;}
.faq .faqs > li{ margin-bottom:24px; }
.faq .faqs > li > h4{ position:relative; background:rgba(146,155,164,.15); padding:12px 40px 8px; cursor:pointer;}
.faq .faqs > li > h4:before{ content:'\f054'; font-weight:600; position:absolute; left:21px; top:12px; font-size:1em; color:#929ba4; }
.faq .faqs > li > h4.ui-state-active:before{ content:'\f078'; color:#e1603d; }
.faq .faqs .faq-block{ padding:15px 55px 50px; color:#747a7f; }
.faq .faqs > li:nth-last-of-type(1){ padding-bottom:0; }
.faq .faqs .faq-block p{ margin-bottom:.8em; }
.faq .faqs .faq-block strong{ color:#e1603d; }
.faq .faqs .faq-block > ol,.faq .faqs .faq-block > ul{ margin-left:1.4em; }
.faq .faqs .faq-block li > ol,.faq .faqs .faq-block li > ul{ margin:-.8em 0 1.4em 2em; }
.faq .faqs .faq-block ol{ list-style:decimal; }
.faq .faqs .faq-block ul{ list-style:disc; }
.faq .contact-link{ padding:60px 0 20px; }

.contactUs .top-banner{ background-image:url('/connect/images/contactUs/contact-bg.jpg'); }
.contactUs .top-banner h1{ color:#fff; }
.contactUs .contactInfo{ margin:25px 0; }
.contactUs .contactInfo li{ position:relative; padding-left:1.6em; display:inline-block; margin-bottom:.2em; margin-right:30px;}
.contactUs .contactInfo li:after{ color:#fa4238; position:absolute; top:0; left:0; margin-right:.2em;  }
.contactUs .contactInfo li.email:before{ content:'客服信箱：'; }
.contactUs .contactInfo li.tel:before{ content:'服務專線：'; }
.contactUs .contactInfo li.hours:before{ content:'服務時間：'; }
.contactUs .contactInfo li.line:before{ content:'線上客服：'; }
.contactUs .contactInfo li.email:after{ content:'\f0e0'; font-weight:900; }
.contactUs .contactInfo li.tel:after{ content:'\f095'; font-weight:900; }
.contactUs .contactInfo li.hours:after{ content:'\f017'; }
.contactUs .contactInfo li.line:after{ content:'\f3c0'; }
.contactUs .contactInfo li.bulkPurchase:after{ content:''; background:url(../connect/images/contactUs/icon-bulkPurchase.svg) center bottom no-repeat; background-size:100% auto; width:1em; height:1.2em;}
/*.contactUs .contactInfo li.line{ display:flex; flex-direction:column; flex-wrap:wrap; height:120px; width:320px;  } 
.contactUs .contactInfo li.line .text-block{ font-size:inherit; }
.contactUs .contactInfo li.line .text-block span{ display:block; }
.contactUs .contactInfo li.line .image-block img{ width:75px; }*/
.contactUs .form{ text-align:left; width:100%; margin:0 auto; display:flex; flex-wrap:wrap;}
.contactUs .form li{ position:relative; margin-bottom:8px; width:100%;}
.contactUs .form li label{ position:absolute; top:0; color:#b3bec9; font-size:1.6rem; width:2.8em; border-right:solid 1px; height:100%; display:flex; justify-content:center; align-items:center; transition:border .6s,color 1s;} 
.contactUs .form li label a{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; }
.contactUs .form li label i{ font-size:inherit; }
.contactUs .form input ,.contactUs .form textarea{ transition:all .6s cubic-bezier(.17,.67,.66,.99); border:solid 1px #b3bec9; border-radius:5px; padding:8px 10px; font-size:1.6rem; width:100%; box-shadow:0 0 0px 50px white inset; transition:all .6s ;}
.contactUs .form li input:focus ,.contactUs .form textarea:focus{ border-color:#414d61; }
.contactUs .form li input:focus + label{ color:#414d61; border-color:#414d61;}
.contactUs .form .style-select{ position:relative; border:solid 1px #b3bec9; border-radius:5px; }
.contactUs .form .style-select select{ background:transparent; box-sizing:border-box; padding:10px; font-size:1.5rem; outline:none; border:none; width:100%; letter-spacing:-.1rem; border-radius:5px; transition:all .6s cubic-bezier(.17,.67,.66,.99);}
.contactUs .form .style-select select:focus{ box-shadow:0 0 0 1px #414d61; }
.contactUs .form .style-select select option{padding:.4rem; }
.contactUs .form .style-select:after{ content:'\f0dd'; font-weight:900; position:absolute; right:10px; top:50%; font-size:1.6rem; pointer-events:none; transform:translateY(-70%); color:#555555; }
.contactUs .form li:nth-of-type(-n+4),.contactUs .form li.questionType{ width:calc(100% / 2 - 9px); margin-right:18px; }
.contactUs .form li:nth-of-type(2) ,.contactUs .form li:nth-of-type(4){ margin-right:0; }
.contactUs .form li:nth-of-type(-n+4) input,.contactUs .form li.verify input{ padding-left:5rem; }
.contactUs .form li.address{ display:flex; justify-content:space-between;}
.contactUs .form li.address .style-select ,.contactUs .form li.address input{ flex:0 1 auto; width:calc(100% / 3 - 4px); }
.contactUs .form textarea{ resize:vertical; min-height:6em;}
.contactUs .form li.verify{ display:flex; }
.contactUs .form li.verify input ,.contactUs .form li.verify picture{ width:calc(100% / 2 - 9px); }
.contactUs .form li.verify input{ flex:1 1 auto; margin-right:18px;}
.contactUs .form li.verify picture{ flex:0 1 auto; }
.contactUs .btn-box{ margin:20px 0 40px; }




/* desktops,iPad pro */
@media (max-width:1199.98px){
.faq .top-banner ,.contactUs .top-banner{ background-size:cover; background-attachment:initial;}
.faq .top-banner h1 ,.contactUs .top-banner h1{ font-size:2.8rem; }



}
/* tablets,iPad */
@media (max-width:991.98px){
.faq .top-banner h1 ,.contactUs .top-banner h1{ font-size:2rem; }






}
/* phone */
@media (max-width:767.98px){
.faq .top-banner h1 ,.contactUs .top-banner h1{ font-size:1.7rem; }
.faq .anchor-box li{ font-size:1.4rem; width:auto; padding:5px 8px; margin:1em .3em;} 
.faq .faqs > li > h4{ padding:12px 20px 8px 40px; }
.faq .faqs .faq-block{ padding:15px 20px 50px 40px; }

.contactUs .contactInfo li:before{ display:none; }
.contactUs .contactInfo li.line .mobile-hide{ display:none; }
.contactUs .form li:nth-of-type(-n+4){ width:100%; margin-right:0; }
.contactUs .form input{ padding:10px; }
.contactUs .form li.verify input{ width:70%; }
.contactUs .form li.verify picture{ width:30%; }



}
/* PC */
@media (min-width:1200px){

}