@charset "utf-8";

.section{background: #0e55a4 no-repeat center/cover; position: relative; z-index: 1; perspective: 800px;}
.section .wrapper{position: relative; top: -100px; display: flex;}
.section .wrapper .ico{width: 200px; transform: rotateY(120deg); opacity: 0; left: 10%; position: relative; transition: all .65s;}
.section .wrapper .ico.active{left: 0; opacity: 1; transform: rotateY(0);}
.section .wrapper .ico>i{color: #fff; font-size: 16rem;}
.section .wrapper .box{color: #fff; width: 58%;}
.section .wrapper .box .tit{font-size: 4rem; font-weight: bold; margin-bottom: 20px; position: relative; top: 50px; opacity: 0; transition: all .55s .15s;}
.section .wrapper .box .tit.active{top: 0; opacity: 1;}
.section .wrapper .box p{line-height: 2; font-size: 1.7rem; font-weight: 300; position: relative; top: 50px; opacity: 0; transition: all .55s .25s;}
.section .wrapper .box p.active{top: 0; opacity: 1;}
#foot{height: 200px; background: #121212; position: relative; z-index: 2;}

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

@media (max-width:1440px){
  .section .wrapper .ico>i{color: #fff; font-size: 15.6rem;}
  .section .wrapper .box .tit{font-size: 3.6rem;}
  .section .wrapper .box p{line-height: 1.9; font-size: 1.6rem;}
}
@media (max-width:1366px){
  .section .wrapper .ico{width:180px;}
  .section .wrapper .ico>i{color: #fff; font-size: 14rem;}
  .section .wrapper .box .tit{font-size: 3.2rem;}
  .section .wrapper .box p{line-height: 1.8; font-size: 1.5rem;}
}
@media (max-width:1280px){
  .section .wrapper{top: -60px; display: block;}
  .section .wrapper .ico{width: 100%; left: 0%; text-align: center;}
  .section .wrapper .ico>i{font-size: 10rem;}
  .section .wrapper .box{width: 80%; margin: auto; margin-top: 30px;}
  .section .wrapper .box .tit{font-size: 2.6rem;}
  .section .wrapper .box p{line-height: 1.7; font-size: 1.4rem;}
  #foot{height: 250px;}
}