@charset "utf-8";

.section{height: 100%; background: #2e2d3c no-repeat center/cover; position: relative; perspective: 600px;}
.section .fp-tableCell>.iconfont{font-size: 26rem; position: absolute; right: 3%; bottom: 20%; background: linear-gradient(#fb5483, #4488fa); -webkit-background-clip: text; color: transparent; opacity: 0; transition: all .85s; transform: rotateY(90deg);}
.section .fp-tableCell>.iconfont.active{right: 10%; opacity: 1; transform: rotateY(0);}
.section .wrap{color: #fff; position: relative;}
.section .wrap>.tit{font-size: 6rem; font-weight: bold; position: relative; top: 70px; opacity: 0; transition: all .55s;}
.section .wrap>.tit.active{top: 0; opacity: 1;}
.section .wrap>.desc{font-size: 2rem; font-weight: 300; margin-top: 40px; max-width: 60%; line-height: 2; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; position: relative; top: 70px; opacity: 0; transition: all .6s .22s;}
.section .wrap>.desc.active{top: 0; opacity: 1;}
.section .wrap>.more{margin-top: 50px; position: relative; top: 60px; opacity: 0; transition: all .55s .45s;}
.section .wrap>.more.active{top: 0; opacity: 1;}
.section .wrap>.more a{display: block; width: 130px; height: 45px; border: 2px solid #fff; border-radius: 10px; text-align: center; position: relative; overflow: hidden; transition: background .05s;}
.section .wrap>.more a:hover{background: #fff; transition: background .05s .3s;}
.section .wrap>.more a span{position: relative; z-index: 3; line-height: 44px; font-size: 1.6rem; color: #fff; font-weight: 300; display: inline-block; margin-right: 24px; transition: all .25s;}
.section .wrap>.more a:hover span{color: #2e2d3c;}
.section .wrap>.more a::after{content: ''; display: block; width: 19px; height: 19px; background: #fff; border-radius: 50%; position: absolute; z-index: 1; right: 13px; top: 13px; transition: all .35s;}
.section .wrap>.more a:hover::after{width: 200px; height: 200px; right: -50px; top: -90px;}
.section .wrap>.more a::before{content: '\e65b'; font-family: 'iconfont'; position: absolute; z-index: 2; color: #2e2d3c; right: 16px; top: 17px; transform: scale(.96);}

@media (max-width:1679px){ /*1440*/
  .section .fp-tableCell>.iconfont{font-size: 24rem;}
  .section .wrap>.tit{font-size: 5.4rem;}
  .section .wrap>.desc{font-size: 1.8rem;}
}
@media (max-width:1439px){ /*1366*/
  .section .fp-tableCell>.iconfont{font-size: 21rem;}
  .section .wrap>.tit{font-size: 5.2rem;}
  .section .wrap>.desc{font-size: 1.8rem;}
}
@media (max-width:1365px){ /*1280*/
  .section .fp-tableCell>.iconfont{font-size: 20rem;}
  .section .wrap>.tit{font-size: 4.8rem;}
  .section .wrap>.desc{font-size: 1.7rem;}
}
@media (max-width:1279px){ /*mp*/
  .section .wrap{padding: 0 15px;}
  .section .fp-tableCell>.iconfont{font-size: 10rem; right: 0; bottom: 4%;}
  .section .wrap>.tit{font-size: 2.2rem; line-height: 1.4; max-width: 80%;}
  .section .wrap>.desc{font-size: 1.4rem; max-width: 80%; margin-top: 30px;}
  .section .wrap>.more{margin-top: 40px;}
  .section .wrap>.more a{width: 110px; height: 41px;}
  .section .wrap>.more a span{position: relative; z-index: 3; line-height: 41px; font-size: 1.4rem;}
  .section .wrap>.more a::after{width: 19px; height: 19px; right: 11px; top: 11px;}
  .section .wrap>.more a::before{right: 14px; top: 15px;}
}