@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_about.jpg') no-repeat center/cover; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;}
#banner .red{background: rgba(236,1,1,.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: 70%; padding-left: 150px; font-size: 5.6rem; font-weight: 300;}
#banner .box .tit-sub{width: 70%; padding-left: 150px; font-size: 5.6rem; font-weight: 300; margin-top: 20px;}
#banner .box .con{width: 60%; 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;}

@media (max-width:1440px){
  #banner .box .tit{padding-left: 120px;}
  #banner .box .tit-sub{padding-left: 120px;}
  #banner .box .con{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;}
}
@media (max-width:1279px){
  #banner{height: auto; position: relative; background: #fff;}
  #banner .bg{position: relative; height: 300px; z-index: 1;}
  #banner .red{display: none;}
  #banner .box{position: relative; color: #2b2b2b; display: block; top: 40px; background: #fff; line-height: 1.3;}
  #banner .box .tit{width: 100%; font-size: 3.6rem; padding-left: 20px; padding-right: 20px; box-sizing: border-box; line-height: 1.3;}
  #banner .box .tit-sub{width: 100%; font-size: 3rem; margin-top: 12px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; line-height: 1.3; color: #ec0000;}
  #banner .box .con{padding-left: 20px; padding-right: 20px; margin-top: 40px; padding-bottom: 40px; 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;}
}

.blank{height: 100%;}


#culture{height: 100%; position: relative; z-index: 2; background: #fff;}
#culture .left{width: 50%; height: 100%; float: left; display: flex; flex-direction: column; justify-content: center; background: url('../img/about_culture_left.png') no-repeat center bottom/100%;}
#culture .right{width: 50%; height: 100%; float: right; background: #eee url('../img/about_culture.jpg') no-repeat center/cover;}

#culture .left .tit{color: #ec0000; font-size: 5.6rem; font-weight: 300; padding-left: 150px;}
#culture .left .tit-sub{font-size: 2.8rem; padding-left: 150px; margin-top: 60px; color: #ec0000; line-height: 1.3;}
#culture .left .con{font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; margin-top: 40px; padding-bottom: 150px;}
#culture .left .con p{font-size: 1.8rem; padding-left: 150px; margin-bottom: 25px; padding-right: 150px; line-height: 2;}

@media (max-width:1440px){
  #culture .left .tit{padding-left: 120px;}
  #culture .left .tit-sub{padding-left: 120px; padding-right: 100px;}
  #culture .left .con p{padding-left: 120px; padding-right: 120px;}
}
@media (max-width:1366px){
  #culture .left .tit{padding-left: 100px; font-size: 5rem;}
  #culture .left .tit-sub{padding-left: 100px; padding-right: 100px; font-size: 2.6rem;}
  #culture .left .con p{padding-left: 100px; padding-right: 100px; font-size: 1.6rem;}
}
@media (max-width:1279px){
  .blank{height: 0;}
  #culture{height: auto; margin-top: 30px;}
  #culture .left{width: 100%; height: auto; float: none; display: block; margin-top: 40px;}
  #culture .right{width: 100%; height: 280px; float: none;}

  #culture .left .tit{padding-left: 20px; padding-right: 20px; font-size: 3.6rem;}
  #culture .left .tit-sub{padding-left: 20px; padding-right: 20px; font-size: 2rem; margin-top: 20px;}
  #culture .left .con{padding-bottom: 120px;}
  #culture .left .con p{padding-left: 20px; padding-right: 20px; font-size: 1.5rem;}
}


#history{padding: 80px 0 200px 0; position: relative; z-index: 2; background: #1c1c1c url('../img/history.jpg') no-repeat center/cover;}
#history .tit{padding: 100px 0 0 150px; color: #fff; font-size: 5.6rem; font-weight: 300;}
#history .desc{padding: 30px 0 0 150px; color: #fff; font-size: 2.6rem; font-weight: 300;}

#history .list{margin: 70px 150px 30px 150px;}
#history .list .swiper-slide{background: #d90000; color: #fff; padding: 30px; height: 180px; box-sizing: border-box; transition: all .2s;}
#history .list .swiper-slide:hover{background: #ec0000;}
#history .list .swiper-slide dt{font-size: 5.2rem; font-weight: bold;}
#history .list .swiper-slide dd{font-size: 1.6rem; font-weight: 300; line-height: 1.5; margin-top: 16px; padding-left: 1px;}
#history .list .ctrl{margin-top: 50px;}
#history .list .ctrl a{display: inline-block; opacity: .7; transition: all .3s;}
#history .list .ctrl a:hover{opacity: 1;}
#history .list .ctrl a i{font-size: 5rem; color: #fff;}
#history .list .ctrl a.r{transform:rotate(180deg); margin-left: 20px;}

@media (max-width:1440px){
  #history .tit{padding: 100px 0 0 120px;}
  #history .desc{padding: 30px 0 0 120px;}
  #history .list{margin: 70px 120px 30px 120px;}
  #history .list .swiper-slide dt{font-size: 4.8rem;}
  #history .list .swiper-slide dd{font-size: 1.5rem;}
}
@media (max-width:1366px){
  #history .tit{padding: 70px 0 0 100px; font-size: 5rem;}
  #history .desc{padding: 30px 0 0 100px; font-size: 2.2rem;}
  #history .list{margin: 70px 100px 30px 100px;}
  #history .list .swiper-slide dt{font-size: 4.6rem;}
  #history .list .swiper-slide dd{font-size: 1.5rem;}
}
@media (max-width:1279px){
  #history{padding: 60px 0 60px 0;}
  #history .tit{padding: 20px 0 0 20px; font-size: 3.6rem;}
  #history .desc{padding: 30px 0 0 20px; font-size: 1.8rem;}

  #history .list{margin: 70px 20px 30px 20px;}
}


#show{padding: 70px 0 200px 0; background: url('../img/show.jpg') no-repeat center/cover; position: relative; z-index: 2;}
#show .tit{padding: 120px 0 0 150px; color: #ec0000; font-size: 5.6rem; font-weight: 300;}
#show .desc{padding: 30px 0 0 150px; color: #2c2c2c; font-size: 2.6rem; font-weight: 300;}

#show .list{margin: 70px 150px 30px 150px;}
#show .list .swiper-slide{background: #fff;}
#show .list .swiper-slide a{display: block; transition: all .35s;}
#show .list .swiper-slide a:hover{box-shadow: 5px 5px 20px rgba(0,0,0, .1);}
#show .list .swiper-slide a .img{overflow: hidden; width: 100%; padding-bottom: 75%; height: 0; position: relative;}
#show .list .swiper-slide a .img>img{width: 100%; transition: all .5s;}
#show .list .swiper-slide a:hover .img>img{transform: scale(1.1);}
#show .list .swiper-slide a .img::after{content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: all .45s;}
#show .list .swiper-slide a:hover .img::after{background: rgba(0,0,0, .3);}
#show .list .swiper-slide a .name{color: #2c2c2c; height: 60px; line-height: 58px; padding: 0 15px; font-size: 1.6rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; transition: all .3s;}
#show .list .swiper-slide a:hover .name{color: #ec0000;}
#show .list .ctrl{margin-top: 50px;}
#show .list .ctrl a{display: inline-block;}
#show .list .ctrl a i{font-size: 5rem; color: #aaa; transition: all .25s;}
#show .list .ctrl a:hover i{color: #ec0000;}
#show .list .ctrl a.r{transform:rotate(180deg); margin-left: 20px;}

@media (max-width:1440px){
  #show .tit{padding: 120px 0 0 120px;}
  #show .desc{padding: 30px 0 0 120px;}
  #show .list{margin: 70px 120px 30px 120px;}
}
@media (max-width:1366px){
  #show .tit{padding: 80px 0 0 100px; font-size: 5rem;}
  #show .desc{padding: 30px 0 0 100px; font-size: 2.2rem;}
  #show .list{margin: 70px 100px 30px 100px;}
}
@media (max-width:1279px){
  #show{padding: 20px 0 60px 0;}
  #show .tit{padding: 60px 0 0 20px; font-size: 3.6rem;}
  #show .desc{padding: 30px 0 0 20px; font-size: 1.8rem;}

  #show .list{margin: 70px 20px 30px 20px;}
}

#video{padding: 0 0 120px 0; background: url('../img/video.jpg') no-repeat center/cover; position: relative; z-index: 2;}
#video .tit{padding: 120px 0 0 150px; color: #fff; font-size: 5.6rem; font-weight: 300;}
#video .desc{padding: 30px 0 0 150px; color: rgba(255,255,255,.8); font-size: 2.6rem; font-weight: 300;}
#video .video-container{background: #000; width: 1000px; height: 600px; margin: 80px auto;}

@media (max-width:1440px){
  #video .tit{padding: 120px 0 0 120px;}
  #video .desc{padding: 30px 0 0 120px;}
}
@media (max-width:1366px){
  #video .tit{padding: 100px 0 0 100px; font-size: 5rem;}
  #video .desc{padding: 30px 0 0 100px; font-size: 2.2rem;}
}
@media (max-width:1279px){
  #video{padding: 0 0 100px 0;}
  #video .tit{padding: 50px 0 0 20px; font-size: 3.6rem;}
  #video .desc{padding: 30px 20px 0 20px; font-size: 1.8rem; line-height: 1.3;}
  #video .video-container{background: #000; width: 360px; height: 260px; margin: 60px auto 0 auto;}
}