@charset "utf-8";

#banner{width: 100%; height: 0; padding-bottom: 33.0729%; position: fixed; z-index: 1; left: 0; top: 0; background: #111;}
#banner>div{width: 100%; height: 100%; background: no-repeat center/cover; position: absolute; top: 0; z-index: 1;}

/*---1440---*/
@media (max-width:1679px){

}
/*---1366---*/
@media (max-width:1439px){

}
/*---1280---*/
@media (max-width:1365px){

}
/*---MP---*/
@media (max-width:1279px){
  #banner{padding-bottom: 0; height: 80%;}
}


#space{height:0; padding-bottom: 33.0729%;}
/*---MP---*/
@media (max-width:1279px){
  #space{height: 80%; padding-bottom: 0;}
}


#path{position: relative; z-index: 2; background: #fff; color: #3e3a39; font-size: 1.7rem; padding: 60px 0 70px 0;}
#path a{color: #3e3a39;}
#path a:hover{color: #666;}


#m1{position: relative; z-index: 2; background: #fff; padding-bottom: 60px;}
#m1>.wrap>.tit{font-size: 3.6rem; color: #3e3a39; font-weight: bold;}
#m1>.wrap>.tit-en{font-size: 3rem; color: #3e3a39; font-weight: 300; margin-top: 10px;}
#m1 .line{width: 93px; height: 2px; background: #1b1b1b; margin: 60px 0 0 0;}


#agent{padding-bottom: 150px; background: #fff; z-index: 2; position: relative;}
#agent .item{margin-bottom: 70px;}
#agent .item>.tit{font-size: 4.5rem; color: #3e3a39; padding-bottom: 20px; border-bottom: 2px solid #3e3431; position: relative; cursor: pointer;}
#agent .item>.tit i{font-style: normal; font-weight: 300; font-size: 3rem; color: #999;}
#agent .item>.tit span{display: block; width: 41px; height: 41px; position: absolute; right: 0; top: 0;}
#agent .item>.tit span::before{content: ''; display: block; width: 100%; height: 5px; background: #9fa0a0; position: absolute; top: 18px;}
#agent .item>.tit span::after{content: ''; display: block; width: 5px; height: 100%; background: #9fa0a0; position: absolute; top: 0; left: 18px; transition: all .2s;}
#agent .item>.tit span.close::after{height: 0; top: 50%;}
#agent .item>.con{display: none;}
#agent .item .head{display: flex; justify-content: space-between; border-bottom: 2px solid #3e3431;}
#agent .item .head .col{font-size: 2.1rem; font-weight: bold; color: #3e3a39; padding: 12px 12px 13px 12px;}
#agent .item .col{line-height: 1.2;}
#agent .item .col1{width: 12%;}
#agent .item .col2{width: 62%;}
#agent .item .col3{width: 13%;}
#agent .item .col4{width: 13%;}
#agent .item .list{display: flex; justify-content: space-between; border-bottom: 1px solid #c8c5c4;}
#agent .item .list:nth-last-of-type(1){border-bottom: 2px solid #3e3431;}
#agent .item .list .col{font-size: 1.9rem; padding: 12px 12px 13px 12px;}


#contact{padding: 0 0 125px 0; position: relative; z-index: 2; background: #fff;}
#contact .wrap{border-top: 2px solid #1b1b1b; padding-top: 65px; display: flex; justify-content: space-between; align-items: flex-end;}
#contact .wrap h1{color: #3e3a39; display: block; margin: 0; font-size: 3rem; font-weight: normal;}
#contact .wrap .l .con{font-size: 1.9rem; color: #3e3a39; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; margin-top: 15px;}
#contact .wrap .con p{margin-bottom: 6px;}
#contact .wrap .r{text-align: right; color: #3e3a39;}
#contact .wrap .r .tit{font-size: 2rem;}
#contact .wrap .r .con{font-weight: bold; margin-top: 10px; font-size: 3.6rem;}
#contact .wrap .con p>span{display: inline-block; margin-right: 20px;}
#contact .wrap a{color: #3e3a39;}
#contact .wrap a:hover{text-decoration: underline;}

/*---1440---*/
@media (max-width:1679px){

}
/*---1366---*/
@media (max-width:1439px){
  #path{font-size: 1.6rem;}

  #m1>.wrap>.tit{font-size: 3.4rem;}
  #m1>.wrap>.tit-en{font-size: 2.8rem;}

  #agent{padding-bottom: 140px;}
  #agent .item{margin-bottom: 60px;}
  #agent .item>.tit{font-size: 4rem;}
  #agent .item>.tit i{font-size: 2.8rem;}
  #agent .item>.tit span{width: 37px; height: 37px; top: 3px;}
  #agent .item>.tit span::before{top: 16px;}
  #agent .item>.tit span::after{left: 16px;}
  #agent .item .head .col{font-size: 1.9rem;}
  #agent .item .list .col{font-size: 1.8rem;}

  #contact{padding: 0 0 115px 0;}
  #contact .wrap{padding-top: 60px;}
  #contact .wrap h1{font-size: 2.8rem;}
  #contact .wrap .l .con{font-size: 1.8rem; margin-top: 14px;}
  #contact .wrap .con p{margin-bottom: 6px;}
  #contact .wrap .r .tit{font-size: 1.9rem;}
  #contact .wrap .r .con{font-size: 3.4rem;}
}
/*---1280---*/
@media (max-width:1365px){
  #path{font-size: 1.5rem;}

  #m1>.wrap>.tit{font-size: 3.2rem;}
  #m1>.wrap>.tit-en{font-size: 2.6rem;}
  #m1 .line{margin: 50px 0 0 0;}

  #agent{padding-bottom: 130px;}
  #agent .item{margin-bottom: 50px;}
  #agent .item>.tit{font-size: 3.6rem;}
  #agent .item>.tit i{font-size: 2.4rem;}
  #agent .item>.tit span{width: 33px; height: 33px; top: 5px;}
  #agent .item>.tit span::before{top: 14px;}
  #agent .item>.tit span::after{left: 14px;}
  #agent .item .head .col{font-size: 1.8rem;}
  #agent .item .list .col{font-size: 1.7rem;}

  #contact{padding: 0 0 100px 0;}
  #contact .wrap{padding-top: 50px;}
  #contact .wrap h1{font-size: 2.6rem;}
  #contact .wrap .l .con{font-size: 1.7rem; margin-top: 14px;}
  #contact .wrap .con p{margin-bottom: 6px;}
  #contact .wrap .r .tit{font-size: 1.8rem;}
  #contact .wrap .r .con{font-size: 3.2rem;}
}
/*---MP---*/
@media (max-width:1279px){
  #path{font-size: 1.5rem; padding: 50px 15px;}

  #m1{padding: 0 15px 20px 15px;}
  #m1>.wrap>.tit{font-size: 3rem;}
  #m1>.wrap>.tit-en{font-size: 1.8rem;}
  #m1 .line{width: 80px; margin: 50px 0;}

  #agent{padding: 0 15px 100px 15px;}
  #agent .item{margin-bottom: 50px;}
  #agent .item>.tit{font-size: 2.4rem; padding-bottom: 12px;}
  #agent .item>.tit i{font-size: 1.8rem;}
  #agent .item>.tit span{width: 25px; height: 25px; top: 0;}
  #agent .item>.tit span::before{height: 3px; top: 10px;}
  #agent .item>.tit span::after{width: 3px; left: 11px;}
  #agent .item>.tit span.close::after{height: 0; top: 50%;}
  #agent .item>.con{display: none;}
  #agent .item .head .col{font-size: 1.6rem; padding: 12px 0 13px 0;}
  #agent .item .col1{width: 11%;}
  #agent .item .col2{width: 44%; padding-right: 5px; box-sizing: border-box;}
  #agent .item .col3{width: 15%;}
  #agent .item .col4{width: 30%;}
  #agent .item .list .col{font-size: 1.4rem; padding: 12px 0 13px 0;}

  #contact .wrap{padding: 50px 15px 0 15px; display: block;}
  #contact .wrap h1{font-size: 2.6rem;}
  #contact .wrap .l .con{font-size: 1.6rem; margin-top: 15px;}
  #contact .wrap .con p{margin-bottom: 0;}
  #contact .wrap .r{text-align: left; margin-top: 30px;}
  #contact .wrap .r .tit{font-size: 2rem;}
  #contact .wrap .r .con{margin-top: 7px; font-size: 3.2rem;}
  #contact .wrap p>span{display: block; margin-bottom: 8px;}
}