@charset "utf-8";

#banner{width: 100%; height: 400px; margin-top: 88px; background: #1c1c1c url('../img/b_service.jpg') no-repeat center/cover;}
#banner .tit{color: #fff; font-size: 5.6rem; text-align: center; position: relative; top: 40%; font-weight: 300;}

@media (max-width:1279px){
  #banner{height: 200px; margin-top: 68px;}
  #banner .tit{font-size: 2.2rem; top: 40%; font-weight: normal; line-height: 1.3;}
}


#mod{background: #f3f3f3;}
#mod .wrapper{max-width: 1200px; display: flex; justify-content: space-between; margin: auto;}
#mod .wrapper::after{display: none;}
#mod .wrapper>a{width: 25%; padding: 25px 0 30px 0; display: block; text-align: center;}
#mod .wrapper>a.active{background: #d90000;}
#mod .wrapper>a i{display: block; margin: auto; font-size: 5.2rem; height: 5.2rem; line-height: 5.2rem; color: #ec0000;}
#mod .wrapper>a.active i{color: #fff;}
#mod .wrapper>a i.icon-wentifenpei{font-size: 4.8rem;}
#mod .wrapper>a i.icon-xiazai{font-size: 4.4rem;}
#mod .wrapper>a .tit{display: block; margin-top: 8px; color: #ec0000; font-size: 1.6rem; font-weight: 300;}
#mod .wrapper>a.active .tit{color: #fff;}

@media (max-width:1279px){
  #mod .wrapper>a{padding: 15px 0 20px 0;}
  #mod .wrapper>a i{font-size: 3.2rem; height: 3.2rem; line-height: 3.2rem;}
  #mod .wrapper>a i.icon-wentifenpei{font-size: 3rem;}
  #mod .wrapper>a i.icon-xiazai{font-size: 2.6rem;}
  #mod .wrapper>a .tit{margin-top: 6px; font-size: 1.4rem;}
}


#service{border-bottom: 1px solid #e6e6e6; padding-bottom: 30px;}
#service .wrapper{max-width: 1200px; margin: 46px auto;}
#service .desc{font-size: 1.6rem; color: #2b2b2b; font-weight: 300;}
#service .desc div, #service .desc p{font-size: 1.6rem; margin-bottom: 20px; line-height: 1.6;}

@media (max-width:1279px){
  #service .wrapper{margin: 36px auto; padding: 0 20px;}
  #service .desc{font-size: 1.4rem;}
  #service .desc div, #case .desc p{font-size: 1.4rem;}
}


#faq{border-bottom: 1px solid #e6e6e6; padding-bottom: 30px;}
#faq .wrapper{max-width: 1200px; margin: 46px auto;}
#faq .wrapper .list a{display: block; border-bottom: 1px solid #eee; padding: 25px 0; font-size: 1.6rem; color: #2b2b2b; transition: all .3s;}
#faq .wrapper .list a::before{content: '\e65b'; display: inline-block; font-size: 2rem; font-family: iconfont; margin-right: 8px; vertical-align: middle; position: relative; top: -1px;}
#faq .wrapper .list a:hover{color: #ec0000;}

#faq .view h1{font-size: 3.6rem; color: #2b2b2b; font-weight: normal; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 25px; line-height: 1.3;}
#faq .view .detail{margin-top: 30px; margin-bottom: 50px; font-size: 1.5rem; line-height: 1.7;}
#faq .view .detail p, #faq .view .detail div{font-size: 1.5rem; line-height: 1.7; margin-bottom: 20px;}

#faq .prev-next{margin-top: 70px; border-top: 1px solid #eee; display: flex; justify-content: space-between;}
#faq .prev-next::after{display: none;}
#faq .prev-next>div{display: block; margin-top: 20px;}
#faq .prev-next>div a{font-size: 1.5rem;}
#faq .prev-next>div a:hover{color: red;}
#faq .prev-next .prev a::before{content: '\e613'; font-family: iconfont; font-size: 1.87rem; margin-right: 8px;}
#faq .prev-next .next{text-align: right;}
#faq .prev-next .next a::after{content: '\e613'; font-family: iconfont; font-size: 1.87rem; transform: scaleX(-1); margin-left: 8px; display: inline-block;}

@media (max-width:1279px){
  #faq .wrapper{margin: 26px auto; padding: 0 20px;}
  #faq .wrapper .list a{padding: 15px 0; font-size: 1.5rem;}
  #faq .wrapper .list a::before{font-size: 1.8rem; margin-right: 6px;}

  #faq .view h1{font-size: 2.6rem;}

  #faq .prev-next{margin-top: 50px; flex-wrap: wrap; padding-top: 10px;}
  #faq .prev-next>div{width: 100%; padding: 0; margin-top: 15px;}
  #faq .prev-next .next{text-align: left;}
  #faq .prev-next .next a::before{content: '\e613'; font-family: iconfont; font-size: 1.87rem; transform: scaleX(-1); margin-right: 8px; display: inline-block;}
  #faq .prev-next .next a::after{display: none;}
}


#download{border-bottom: 1px solid #e6e6e6; padding-bottom: 30px;}
#download .wrapper{max-width: 1200px; margin: 50px auto;}
#download .wrapper .list{display: flex; flex-wrap: wrap; justify-content: space-between;}
#download .wrapper .list::after{display: none;}
#download .wrapper .list a{display: block; border: 1px solid #e6e6e6; padding: 15px 0; transition: all .3s; width: 48%; height: 80px; position: relative; margin-bottom: 4%;}
#download .wrapper .list a::before{content: '\e61d'; display: block; font-size: 6rem; font-family: iconfont; position: absolute; left: 20px; top: 24px; width: 60px; height: 60px;}
#download .wrapper .list a:hover{color: #ec0000;}
#download .wrapper .list a .con{padding: 10px 0 0 110px;}
#download .wrapper .list a .con .tit{font-size: 1.7rem; color: #2b2b2b;}
#download .wrapper .list a .con .size{font-size: 1.4rem; color: #bbb; margin-top: 10px;}

@media (max-width:1279px){
  #download .wrapper{margin: 35px auto;}
  #download .wrapper .list{padding: 0 20px;}
  #download .wrapper .list a{width: 100%; margin-bottom: 15px; box-sizing: border-box;}
  #download .wrapper .list a::before{font-size: 5rem; font-family: iconfont; left: 15px; top: 14px; width: 50px; height: 50px;}
  #download .wrapper .list a .con{padding: 3px 0 0 88px;}
  #download .wrapper .list a .con .tit{font-size: 1.6rem;}
  #download .wrapper .list a .con .size{font-size: 1.3rem;}
}


#apply{background: url('../img/bg_custom.jpg') no-repeat center bottom/cover; padding: 100px 0; z-index: 1; position: relative;}
#apply .wrapper{max-width: 1200px; margin: auto;}
#apply .tit{font-size: 5.6rem; font-weight: 300; color: #ec0000;}
#apply .desc{font-size: 1.8rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; color: #2b2b2b; margin-top: 30px; line-height: 1.8;}

#apply form{margin-top: 60px;}
#apply form .row{margin-bottom: 20px;}
#apply form input, #apply form textarea{border: 1px solid #ccc; font-size: 1.5rem; padding: 12px; background: #fff; box-sizing: border-box; transition: all .2s;}
#apply form textarea{width: 100%;}
#apply form input::placeholder, #apply form textarea::placeholder{color: rgba(0,0,0,.4);}
#apply form input:focus, #apply form textarea:focus{border: 1px solid #ec0000; box-shadow: 5px 5px 10px rgba(0,0,0,.07);}
#company{width: 500px;}
#tel{width: 300px;}
#types{width: 100%;}

#apply form .submit-container{margin-top: 50px;}
#apply form .submit{background: #d90000; color: #fff; font-size: 1.6rem; padding: 16px 50px; transition: all .2s;}
#apply form .submit:hover{background: #ec0000;}

#captcha-img{vertical-align: middle; margin-left: 20px; position: relative; top: -2px;}

@media (max-width:1279px){
  #apply{padding: 50px 20px;}
  #apply .tit{font-size: 3rem;}
  #apply .desc{font-size: 1.5rem;}

  #apply form{margin-top: 30px;}
  #apply form .row{margin-bottom: 16px;}
  #apply form .row input, #custom form .row textarea{width: 100% !important;}

  #apply form .submit-container{margin-top: 50px;}
  #apply form .submit{font-size: 1.5rem; padding: 15px 40px;}
  #apply form .submit:hover{background: #ec0000;}

  #captcha-img{margin-left: 0; display: block; margin-top: 20px;}
}