@charset "utf-8";

#part{background: #5f8cec; width: 100%; height: 80px; position: fixed; left: 0; bottom: 0; z-index: 999; display: flex; justify-content: space-between; transition: all .3s;}
#part.leave{bottom: -80px;}
#part a{display: flex; color: #fff; flex-direction: column; justify-content: center; align-items: center; width: 20%; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; border-right: 1px solid rgba(255,255,255, .1); position: relative; perspective: 150px;}
#part a::before{content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: -80px; background: #1f53be; transition: all .3s;}
#part a:hover::before, #part a.active::before{bottom: 0;}
#part a .tit{display: block; font-size: 1.9rem; font-weight: bold; position: relative; z-index: 1; transition: all .3s;}
#part a .desc{display: block; font-size: 1.6rem; margin-top: 5px; position: relative; z-index: 1; transition: all .3s;}
#part a:hover .tit, #part a.active .tit{margin-right: 10%;}
#part a:hover .desc, #part a.active .desc{margin-right: 10%;}
#part a i{position: absolute; right: 5%; top: 15px; font-size: 4.7rem; opacity: 0; transition: all .35s; transform: rotateY(90deg);}
#part a:hover i, #part a.active i{right: 10%; opacity: 1; transform: rotateY(0);}


#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background: #fff;
  box-shadow: 3px 3px 12px rgba(0,0,0,.3);
}


.section{height: 100%; background: #2e2d3c no-repeat center/cover; position: relative;}


.p1 .wrap{display: flex; perspective: 600px;}
.p1 .wrap .ico{width: 18%; background: rgba(255,255,255, .8); position: relative; top: -40px; color: #fff; display: flex; flex-direction: column; justify-content: center; text-align: center; left: 100px; opacity: 0; transform: rotateY(90deg); transition: all .6s ease;}
.p1 .wrap .ico.active{left: 0; opacity: 1; transform: rotateY(0);}
.p1 .wrap .ico i{font-size: 18rem; background: linear-gradient(#fb5483, #4488fa); -webkit-background-clip: text; color: transparent;}
.p1 .wrapper{background: rgba(18,68,168, .8); width: 60%; padding: 40px; color: #fff; position: relative; top: -40px; left: 100px; opacity: 0; transition: all .6s .25s;}
.p1 .wrapper.active{left: 0; opacity: 1;}
.p1 .wrapper .tit{font-size: 4.6rem; font-weight: bold; position: relative; top: 60px; opacity: 0; transition: all .5s .5s;}
.p1 .wrapper .tit.active{top: 0; opacity: 1;}
.p1 .wrapper .desc{font-size: 1.7rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; font-weight: 300; line-height: 2; margin-top: 60px; position: relative; top: 60px; opacity: 0; transition: all .5s .7s;}
.p1 .wrapper .desc.active{top: 0; opacity: 1;}
.p1 .wrapper .desc::before{content: ''; display: block; width: 60px; height: 2px; background: #fff; position: absolute; top: -29px; left: 2px;}


.p2 .nav{border-bottom: 1px solid #ccc; display: flex; justify-content: center; position: relative; top: 60px; opacity: 0; transition: all .5s;}
.p2 .nav.active{top: 0; opacity: 1;}
.p2 .nav>a{display: block; font-size: 2.4rem; font-weight: 300; line-height: 70px; color: #2e2d3c; margin-right: 80px; position: relative; transition: all .3s;}
.p2 .nav>a::after{content: ''; display: block; width: 0; height: 0; background: #5f8cec; position: absolute; left: 50%; bottom: -1px; transition: all .3s;}
.p2 .nav>a:last-child{margin-right: 0;}
.p2 .nav>a.active{color: #5f8cec;}
.p2 .nav>a.active::after{width: 100%; height: 2px; left: 0;}
.p2 .box{height: 500px; margin-top: 45px; text-align: center; position: relative; top: 60px; opacity: 0; transition: all .65s .25s;}
.p2 .box.active{top: 0; opacity: 1;}
.p2 .box>div{height: 100%; display: none;}
.p2 .box>div.active{display: block;}
.p2 .box img{max-height: 100%;}


.p3 .wrap{text-align: center;}
.p3 .wrap>.tit{color: #fff; font-size: 5.6rem; font-weight: bold; opacity: 0; top: 40px; position: relative; transition: all .5s;}
.p3 .wrap>.tit.active{top: 0; opacity: 1;}
.p3 .wrap>.desc{color: #fff; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; font-size: 1.9rem; font-weight: 300; max-width: 65%; line-height: 1.7; margin: 40px auto auto auto; opacity: 0; top: 50px; position: relative; transition: all .6s .16s;}
.p3 .wrap>.desc.active{top: 0; opacity: 1;}
.p3 .list{margin-top: 106px; display: flex; justify-content: center; top: 60px; opacity: 0; transition: all .8s .3s; position: relative;}
.p3 .list.active{top: 0; opacity: 1;}
.p3 .list .item{width: 140px; height: 180px; margin-right: 50px; perspective: 250px; position: relative;}
.p3 .list .item .box{width: 100%; height: 100%; background: linear-gradient(#fff 20%, #ddd); border-radius: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0;}
.p3 .list .item:nth-child(even) .box{background: linear-gradient(#fff 20%, #ebe064);}
.p3 .list .item:last-child{margin-right: 0;}
.p3 .list .item:hover .box{transform: rotateY(-180deg);}
.p3 .list .ico i{font-size: 6rem; color: #333; display: block;}
.p3 .list .tit{font-weight: 300; font-size: 1.6rem; margin-top: 16px; color: #111; height: 40px; line-height: 1.3; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.p3 .list .item .box-back, .p3 .list .item:nth-child(even) .box-back{width: 100%; height: 100%; background: #fb5483; border-radius: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0; transform: rotateY(180deg); backface-visibility:hidden;}
.p3 .list .item .box-back .ico{margin-top: 16px;}
.p3 .list .item .box-back .ico i{color: #fff;}
.p3 .list .item .box-back .tit{color: #fff; margin-top: 0;}
.p3 .list .item:hover .box-back{transform: rotateY(0);}


.p4 .container{height: 100%; overflow: hidden; background: #fff;}
.p4 .container .top{height: 58%; background: no-repeat center/cover; position: relative;}
.p4 .container .top .wrap{position: absolute; left: 0;  right: 0; bottom: 0; margin: auto;}
.p4 .container .top .box{color: #fff; padding-bottom: 40px;}
.p4 .container .top .box .tit1{font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; font-size: 2.8rem; font-weight: 300; position: relative; left: 60px; opacity: 0; transition: all .55s;}
.p4 .container .top .box .tit1.active{left: 0; opacity: 1;}
.p4 .container .top .box .tit2{font-weight: bold; font-size: 5rem; margin-top: 8px; position: relative; left: 60px; opacity: 0; transition: all .55s .25s;}
.p4 .container .top .box .tit2.active{left: 0; opacity: 1;}

.p4 .container .list{height: 42%; background: #fff; position: relative; top: 60px; opacity: 0; transition: all .6s .25s;}
.p4 .container .list.active{top: 0; opacity: 1;}
.p4 .container .list .wrap{height: 100%; position: relative;}
.p4 .list .swiper-container{top: 5%;}
.p4 .list .swiper-slide a{display: block; text-align: center;}
.p4 .list .swiper-slide a .img{height: 0; padding-bottom: 100%;}
.p4 .list .swiper-slide a .img img{transition: all .3s ease;}
.p4 .list .swiper-slide a:hover .img img{transform: scale(.92); margin-top: -6%;}
.p4 .list .swiper-slide a .con{height: 28px; overflow: hidden; transition: all .35s ease; position: relative; box-sizing: border-box;}
.p4 .list .swiper-slide a:hover .con{height: 68px; background: #4488fa; margin-top: -40px; padding-top: 9px;}
.p4 .list .swiper-slide a .model{height: 26px; line-height: 26px; font-size: 1.6rem; color: #2e2d3c; font-weight: 300; transition: all .3s;}
.p4 .list .swiper-slide a:hover .model{color: #fff;}
.p4 .list .swiper-slide a .name{height: 20px; line-height: 20px; font-size: 1.5rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; transition: all .3s;}
.p4 .list .swiper-slide a:hover .name{color: #fff;}

.p4 .right{position: absolute; right: -50px; top: 50%; width: 50px; height: 50px; margin-top: -60px; text-align: right; cursor: pointer;}
.p4 .right i{font-size: 3.5rem;}
.p4 .left{position: absolute; left: -50px; top: 50%; width: 50px; height: 50px; margin-top: -55px; text-align: left; cursor: pointer;}
.p4 .left i{font-size: 3.5rem; display: block; transform: rotate(-180deg);}
.p4 .swiper-button-disabled i{opacity: .26; cursor: default;}

.p5{overflow: hidden;}
.p5 .wrap{position: relative;}
.p5 .swiper-container{height: 400px; opacity: 0; margin-top: 100px; transition: all .6s;}
.p5 .swiper-container.active{opacity: 1; margin-top: 0;}
.p5 .swiper-container .swiper-slide{height: 100%;}
.p5 .swiper-container .swiper-slide .img{height: 350px; background: #111 no-repeat center/cover; transition: all .35s;}
.p5 .swiper-container .swiper-slide:hover .img{transform: scale(1.1);}
.p5 .swiper-container .swiper-slide .tit{font-size: 1.9rem; color: #fff; font-weight: 300; text-align: center; margin-top: 24px; letter-spacing: .06rem; transition: all .3s; position: relative;}
.p5 .swiper-container .swiper-slide:hover .tit{margin-top: -20px; background: #4488fa; padding: 25px 0;}

.p5 .right{position: absolute; right: -50px; top: 40%; width: 50px; height: 50px; margin-top: -60px; text-align: right; cursor: pointer; transition: all .2s;}
.p5 .right:hover{opacity: .7;}
.p5 .right i{font-size: 4rem; color: #fff;}
.p5 .left{position: absolute; left: -50px; top: 40%; width: 50px; height: 50px; margin-top: -55px; text-align: left; cursor: pointer; transition: all .2s;}
.p5 .left:hover{opacity: .7;}
.p5 .left i{font-size: 4rem; color: #fff;}

.p5 .tit-container{margin-top: 100px; display: flex; justify-content: space-between; color: #fff; opacity: 0; margin-top: 160px; transition: all .6s .25s;}
.p5 .tit-container.active{opacity: 1; margin-top: 110px;}
.p5 .tit-container .tit{font-size: 4rem; font-weight: 300;}
.p5 .tit-container .desc{margin-top: 20px; font-size: 1.7rem; font-weight: 300; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
.p5 .tit-container .r{background: linear-gradient(#fb5483, #4488fa); -webkit-background-clip: text; color: transparent; font-size: 6.8rem; font-family: 'Montserrat'; font-weight: 700;}

@media (max-width:1679px){ /*1440*/
  .p1 .wrap .ico i{font-size: 16rem;}
  .p1 .wrapper .tit{font-size: 4rem;}
  .p1 .wrapper .desc{font-size: 1.6rem; }

  .p2 .nav>a{font-size: 2.2rem;}
  .p2 .box{height: 480px;}

  .p3 .wrap>.tit{font-size: 5rem;}
  .p3 .wrap>.desc{font-size: 1.8rem;}
  .p3 .list{margin-top: 100px;}
  .p3 .list .item{width: 140px; height: 180px; margin-right: 50px;}
  .p3 .list .ico i{font-size: 6rem;}
  .p3 .list .tit{font-size: 1.6rem;}

  .p4 .container .top .box .tit1{font-size: 2.6rem;}
  .p4 .container .top .box .tit2{font-size: 4.6rem;}

  .p5 .swiper-container{height: 380px;}
  .p5 .swiper-container .swiper-slide .img{height: 320px;}
  .p5 .swiper-container .swiper-slide .tit{font-size: 1.8rem;}
  .p5 .right{right: -40px;}
  .p5 .left{left: -40px;}
  .p5 .tit-container .tit{font-size: 3.8rem;}
  .p5 .tit-container .desc{font-size: 1.6rem;}
  .p5 .tit-container .r{font-size: 6.6rem;}
}
@media (max-width:1439px){ /*1366*/
  #part a .tit{font-size: 1.8rem;}
  #part a .desc{font-size: 1.5rem;}
  #part a i{font-size: 4.6rem;}

  .p1 .wrap .ico i{font-size: 14rem;}
  .p1 .wrapper .tit{font-size: 3.6rem;}
  .p1 .wrapper .desc{font-size: 1.5rem; }

  .p2 .nav>a{font-size: 2rem;}
  .p2 .box{height: 360px;}

  .p3 .wrap>.tit{font-size: 4.6rem;}
  .p3 .wrap>.desc{font-size: 1.7rem;}
  .p3 .list{margin-top: 90px;}
  .p3 .list .item{width: 140px; height: 180px; margin-right: 40px;}
  .p3 .list .ico i{font-size: 6rem;}
  .p3 .list .tit{font-size: 1.6rem;}

  .p4 .container .top{height: 52%;}
  .p4 .container .top .box .tit1{font-size: 2.4rem;}
  .p4 .container .top .box .tit2{font-size: 4.2rem;}

  .p5 .swiper-container{height: 300px;}
  .p5 .swiper-container .swiper-slide .img{height: 260px;}
  .p5 .swiper-container .swiper-slide .tit{font-size: 1.6rem;}
  .p5 .tit-container .tit{font-size: 3.6rem;}
  .p5 .tit-container .desc{font-size: 1.5rem;}
  .p5 .tit-container .r{font-size: 6rem;}
}
@media (max-width:1365px){ /*1280*/
  #part a .tit{font-size: 1.7rem;}
  #part a .desc{font-size: 1.3rem;}
  #part a i{font-size: 4.2rem; top: 19px; right: 0;}
  #part a:hover i, #part a.active i{right: 8%;}

  .p1 .wrap .ico i{font-size: 12rem;}
  .p1 .wrapper .tit{font-size: 3rem;}
  .p1 .wrapper .desc{font-size: 1.4rem; }

  .p3 .wrap>.tit{font-size: 4.2rem;}
  .p3 .wrap>.desc{font-size: 1.6rem;}
  .p3 .list{margin-top: 90px;}
  .p3 .list .item{width: 130px; height: 170px; margin-right: 30px;}
  .p3 .list .ico i{font-size: 5.6rem;}
  .p3 .list .tit{font-size: 1.5rem;}

  .p4 .container .top{height: 54%;}
  .p4 .container .top .box .tit1{font-size: 2.2rem;}
  .p4 .container .top .box .tit2{font-size: 4rem;}

  .p5 .tit-container .tit{font-size: 3.2rem;}
  .p5 .tit-container .desc{font-size: 1.4rem;}
  .p5 .tit-container .r{font-size: 5rem;}
}
@media (max-width:1279px){ /*mp*/
  #part{display: none;}
  .section, .fp-tableCell{overflow: hidden;}

  .p1 .wrap{display: block; padding: 0 15px;}
  .p1 .wrap .ico{width: 100%; background: rgba(255,255,255, .8); position: relative; top: unset; left: unset; padding-top: 16px; padding-bottom: 16px;}
  .p1 .wrap .ico i{font-size: 4.8rem; background: linear-gradient(#fb5483, #4488fa); -webkit-background-clip: text; color: transparent;}
  .p1 .wrapper{width: 100%; padding: 20px; top: unset; left: unset; top: unset; box-sizing: border-box;}
  .p1 .wrapper .tit{font-size: 2rem; line-height: 1.4; padding-top: 20px;}
  .p1 .wrapper .desc{font-size: 1.4rem; line-height: 1.8; margin-top: 50px; padding-bottom: 30px;}
  .p1 .wrapper .desc::before{width: 30px;}

  .p2 .wrap{padding: 0 15px;}

  .p2 .nav{border-bottom: 0px none; flex-wrap: wrap;}
  .p2 .nav>a{width: 33.33333%; font-size: 1.3rem; line-height: 1.3; margin-right: 0; border: 1px solid #ddd; box-sizing: border-box; text-align: center; padding: 8px; margin-left: -1px; display: flex; justify-content: center; align-items: center; margin-bottom: -1px; position: unset;}
  .p2 .nav>a.active{background: #2e7eef; color: #fff; border: 1px solid #2e7eef; position: relative; z-index: 1;}
  .p2 .nav>a::after{display: none;}
  .p2 .box{padding: 0 15px; height: 300px;}
  .p2 .box img{max-height: 300px;}

  .p3 .wrap>.tit{font-size: 2.6rem;}
  .p3 .wrap>.tit.active{top: 0; opacity: 1;}
  .p3 .wrap>.desc{font-size: 1.5rem; line-height: 1.7; max-width: 90%;}
  .p3 .list{margin-top: 46px; flex-wrap: wrap; padding: 0 15px;}
  .p3 .list .item{width: 25%; height: 0; padding-bottom: 32%; box-sizing: border-box; margin-right: 0;}
  .p3 .list .item .box{border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all .45s; position: absolute; left: 0; top: 0;}
  .p3 .list .item:hover .box{transform: unset;}
  .p3 .list .ico i{font-size: 4rem;}
  .p3 .list .tit{font-size: 1.3rem; margin-top: 10px; height: 26px;}
  .p3 .list .item .box-back, .p3 .list .item:nth-child(even) .box-back{display: none;}

  .p4 .container .top .box{padding-bottom: 20px;}
  .p4 .container .top .box .tit1{font-size: 2rem; left: 15px;}
  .p4 .container .top .box .tit1.active{left: 15px;}
  .p4 .container .top .box .tit2{font-size: 3rem; left: 15px;}
  .p4 .container .top .box .tit2.active{left: 15px;}

  .p4 .container .list{padding: 0 15px;}
  .p4 .list .swiper-slide a .img{height: 0; padding-bottom: 52%; position: relative;}
  .p4 .list .swiper-slide a .img img{max-width: 100%; max-height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto;}
  .p4 .list .swiper-slide a:hover .img img{transform: unset; margin-top: unset;}
  .p4 .list .swiper-slide a .con{height: 68px; background: none; margin-top: -10px; padding-top: 9px;}
  .p4 .list .swiper-slide a:hover .con{background: unset; margin-top: -10px;}
  .p4 .list .swiper-slide a:hover .model{color: unset;}
  .p4 .list .swiper-slide a:hover .name{color: unset;}
  .p4 .right{right: 0; z-index: 9;}
  .p4 .left{left: 0; z-index: 9;}

  .p5 .wrap{padding: 0 15px;}
  .p5 .swiper-container .swiper-slide .tit{font-size: 1.5rem;}

  .p5 .swiper-container{height: 300px; margin-top: 30px;}
  .p5 .swiper-container .swiper-slide .img{height: 250px;}
  .p5 .right{right: 15px; bottom: 80px; top: unset; z-index: 9;}
  .p5 .left{left: 15px; bottom: 80px; top: unset; z-index: 9;}

  .p5 .tit-container{margin-top: 50px; padding: 0 15px; display: block;}
  .p5 .tit-container.active{margin-top: 50px;}
  .p5 .tit-container .tit{display: none;}
  .p5 .tit-container .desc{display: none;}
  .p5 .tit-container .r{font-size: 4.2rem; text-align: center;}
}