@charset "utf-8";

#banner{width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #1c1c1c; z-index: 1;}
#banner .bg{background: url('../img/b_custom.jpg') no-repeat center/cover; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;}
#banner .black{background: rgba(0,0,0,.8); position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2;}
#banner .box{position: absolute; z-index: 3; color: #fff; left: 0; right: 0; top: 88px; bottom: 0; display: flex; flex-direction: column; justify-content: center;}
#banner .box .tit{width: 50%; padding-left: 150px; font-size: 5.6rem; font-weight: 300;}
#banner .box .tit-sub{width: 50%; padding-left: 150px; font-size: 5.6rem; font-weight: 300; margin-top: 20px; color: #ec0000;}
#banner .box .con{width: 55%; padding-left: 150px; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; margin-top: 50px; padding-bottom: 50px;}
#banner .box .con p{margin-bottom: 25px; font-size: 1.6rem; line-height: 2;}
#banner .box .con p span{font-size: 2.6rem; font-family: 楷体; display: inline-block; padding: 0 3px;}
#banner .box .icos{padding-left: 150px; display: flex;}
#banner .box .icos .item{margin-right: 60px; text-align: center;}
#banner .box .icos .item .ico{background: #fff; border-radius: 50%; width: 86px; height: 86px; display: flex; flex-direction: column; justify-content: center; margin: auto;}
#banner .box .icos .item .ico>i{font-size: 5rem; color: #2b2b2b;}
#banner .box .icos .item .ico>i.icon-peijianchukutongji{font-size: 4.6rem;}
#banner .box .icos .item .ico>i.icon-web-icon-{font-size: 5.8rem;}
#banner .box .icos .item .title{font-size: 1.7rem; margin-top: 16px; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
#banner .space{height: 80px;}

@media (max-width:1440px){
  #banner .box .tit{padding-left: 120px;}
  #banner .box .tit-sub{padding-left: 120px;}
  #banner .box .con{padding-left: 120px;}
  #banner .box .icos{padding-left: 120px;}
}
@media (max-width:1366px){
  #banner .box .tit{font-size: 5rem; padding-left: 100px;}
  #banner .box .tit-sub{font-size: 5rem; margin-top: 12px; padding-left: 100px;}
  #banner .box .con{padding-left: 100px; margin-top: 40px; padding-bottom: 40px; width: 60%;}
  #banner .box .con p{margin-bottom: 22px; font-size: 1.5rem;}
  #banner .box .con p span{font-size: 2.2rem;}
  #banner .box .icos{padding-left: 100px;}
}
@media (max-width:1279px){
  #banner{height: auto; position: relative; background: #fff;}
  #banner .bg{position: relative; height: 300px; z-index: 1;}
  #banner .black{display: none;}
  #banner .box{position: relative; color: #2b2b2b; display: block; top: 40px; background: #fff;}
  #banner .box .tit{width: 100%; font-size: 3.2rem; padding-left: 20px; padding-right: 20px; line-height: 1.3; box-sizing: border-box;}
  #banner .box .tit-sub{width: 100%; font-size: 2.6rem; margin-top: 12px; padding-left: 20px; padding-right: 20px; line-height: 1.3; box-sizing: border-box;}
  #banner .box .con{padding-left: 20px; padding-right: 20px; margin-top: 40px; padding-bottom: 20px; width: 100%; box-sizing: border-box;}
  #banner .box .con p{margin-bottom: 22px; font-size: 1.5rem;}
  #banner .box .con p span{font-size: 1.5rem;}

  #banner .box .icos{padding-left: 20px; padding-right: 20px; justify-content: space-between;}
  #banner .box .icos::after{display: none;}
  #banner .box .icos .item{margin-right: 0;}
  #banner .box .icos .item .ico{background: #2b2b2b; width: 76px; height: 76px; color: #fff;}
  #banner .box .icos .item .ico>i{font-size: 4rem; color: #fff;}
  #banner .box .icos .item .ico>i.icon-peijianchukutongji{font-size: 3.8rem;}
  #banner .box .icos .item .ico>i.icon-web-icon-{font-size: 4.6rem;}
  #banner .box .icos .item .title{font-size: 1.5rem; margin-top: 13px;}
  #banner .space{height: 0;}
}

.blank{height: 100%;}

@media (max-width:1279px){
  .blank{height: 66px;}
}


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

#custom form{margin-top: 60px;}
#custom form .row{margin-bottom: 20px;}
#custom form input, #custom form textarea{border: 1px solid #ccc; font-size: 1.5rem; padding: 12px; background: #fff; box-sizing: border-box; transition: all .2s;}
#custom form textarea{width: 100%;}
#custom form input::placeholder, #custom form textarea::placeholder{color: rgba(0,0,0,.4);}
#custom form input:focus, #custom 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%;}

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

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

@media (max-width:1440px){
  #custom{padding: 100px 120px;}
}
@media (max-width:1366px){
  #custom{padding: 80px 100px;}
  #custom .tit{font-size: 5rem;}
  #custom .desc{font-size: 1.6rem;}
}
@media (max-width:1279px){
  #custom{padding: 50px 20px;}
  #custom .tit{font-size: 3rem;}
  #custom .desc{font-size: 1.5rem;}

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

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

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