@charset "utf-8";


#industries .section{background: #fff no-repeat; background-position: center center; background-size: cover; position: relative; z-index: 1; perspective: 800px;overflow: hidden;}
#industries .section .mask{position: absolute;z-index: 1; left: 0; top: 0; width: 100%;height: 100%; background: rgba(0,0,0,.7); content: '';}
#industries .section .light{ position: absolute;z-index: 20; left: -30%; top: 44%; width: 16%; height: 2px; border-radius: 8px;  background: #00a2f5; opacity: 0; transition: all .3s}
#industries .section .light.active{left: -5%; opacity: .8; }
#industries .section .layout{position: relative; z-index: 50;  display: flex;}
#industries .section .layout>.ico{width: 220px;  transform: rotateY(120deg); opacity: 0; left: 10%; position: relative; transition: all .65s;}
#industries .section .layout>.ico.active{left: 0; opacity: 1; transform: rotateY(0);}
#industries .section .layout>.ico>img{padding: 0; height: 120px; width: auto;}
#industries .section .layout>.box{color: #fff; width: 50%;}
#industries .section .layout>.box>.title{font-size: 4rem; font-weight: bold; margin-bottom: 20px; position: relative; top: 50px; opacity: 0; transition: all .55s .15s;}
#industries .section .layout>.box>.title.active{top: 0; opacity: 1;}
#industries .section .layout>.box>.text{line-height: 2; font-size: 1.7rem;font-weight: 200;  font-weight: 300; position: relative; top: 50px; opacity: 0; transition: all .55s .25s;}
#industries .section .layout>.box>.text.active{top: 0; opacity: 1;}
#industries .section .layout>.box>.more{ position: relative; text-align: left; padding-top: 30px; top: 100px; opacity: 0; transition: all .55s;}
#industries .section .layout>.box>.more.active{top: 0; opacity: 1;}
#industries .section .layout>.box>.more>a{display: inline-block;  font-size: 1.4rem;  border: 1px solid #00a2f5;color: #00a2f5; padding: 10px 20px; transition: all .35s;}
#industries .section .layout>.box>.more>a>i{display: inline-block;vertical-align: middle;text-align: center; margin-left: 6px;}
#industries .section .layout>.box>.more>a>span{ display: inline-block; font-size: 1.2rem;font-weight: 200;  text-transform: uppercase; transition: all .35s;}
#industries .section .layout>.box>.more>a:hover{background:#00a2f5; color: #fff; border-color: #00a2f5;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {background: rgba(255,255,255,.3)!important;}
#fp-nav .active span{background: rgba(255,255,255,.8) !important}

#industries .view{margin: 0 auto; max-width: 1200px; padding: 100px 0;}

#industries .view .details{  background: #fff; padding: 50px 0; text-align: left; box-sizing: border-box;}
#industries .view .details>.title{ text-align: center; font-size: 4.6rem; font-weight: bold; line-height: 6rem; color: #000;}
#industries .view .details>.summary{text-align: left; border-bottom: 1px solid #eee;padding: 20px 0;}
#industries .view .details>.summary>div{float: right;font-size: 1.6rem;font-weight: 200;  color: #999;}
#industries .view .details>.summary>.social{ line-height: 38px;}
#industries .view .details>.summary>.social a{ width: 20px; height: 20px; line-height: 20px; font-size: 12px; transition: all .35s;}
#industries .view .details>.summary>.social a:hover{  transform: translateY(-3px);}
#industries .view .details>.summary>.social .social-icon-facebook {color: #fff;background: #44619D;}
#industries .view .details>.summary>.social .social-share .social-icon-twitter { color: #fff;background: #55acee;}
#industries .view .details>.summary>.social .social-share .social-icon-google { color: #fff;background: #db4437;}
#industries .view .details>.summary>.social .social-share .social-icon-linkedin { color: #fff; background: #0077B5;}
#industries .view .details>.content{ padding: 50px 0 100px 0; font-size: 1.6rem;font-weight: 200;  line-height: 2.8rem; color: #666;}
#industries .view .details>.content>p{margin-bottom: 15px;}
#industries .view .details>.content .table-container{position: relative;}
#industries .view .details>.content .table-container>.table-wrapper{ position: relative; overflow:hidden; overflow-x:auto;}
#industries .view .details>.content .table-container:after{ display: none; position: absolute;z-index: 10; left: 0; bottom: -30px; font-size: 1.1rem; color: #ccc; content: '拖动表格进行浏览';}
#industries .view .details>.content table{  box-sizing: border-box; width: 100%!important; min-width: 1200px; border: 1px solid #ddd;}
#industries .view .details>.content table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 1.6rem;padding:15px;}
#industries .view .details>.content img{max-width: 100%;height: auto;}

#industries .view .details>.back{text-align: center;}
#industries .view .details>.back>a{display: inline-block; margin-right: 10px; padding: 0 20px; height: 40px; line-height: 40px; text-align: center; color: #00a2f5; border: 1px solid #eee; transition: all .35s;}
#industries .view .details>.back>a>i{ display: inline-block; font-size: 2rem; color: #00a2f5; margin-right: 6px; vertical-align: middle;}
#industries .view .details>.back>a>span{display: inline-block;vertical-align: middle;}
#industries .view .details>.back>a:hover{border-color: #00a2f5;}



#foot{z-index: 1;}

@media (max-width:1680px){

    #industries .section .light{  width: 10%;}

}
@media (max-width:1440px){

    #industries .section .layout>.ico>i{color: #fff; font-size: 18rem;}
    #industries .section .layout>.box>.title{font-size: 3.6rem;}
    #industries .section .layout>.box>.text{line-height: 1.9; font-size: 1.6rem;}

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

    #industries .section .layout>.ico{width:180px;}
    #industries .section .layout>.ico>i{color: #fff; font-size: 16rem;}
    #industries .section .layout>.box>.title{font-size: 3.2rem;}
    #industries .section .layout>.box>.text{line-height: 1.8; font-size: 1.5rem;}

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

    #industries .section .light{ display: none;}

    #industries .section .wrap{ display: block;}
    #industries .section .layout>.ico{width: 100%; left: 0; text-align: center;}
    #industries .section .layout>.ico>i{font-size: 14rem;}
    #industries .section .layout>.box{width: 60%; margin: 0 auto; text-align: center;}
    #industries .section .layout>.box>.title{font-size: 2.6rem; padding-top: 10px; color: #00a2f5;}
    #industries .section .layout>.box>.text{line-height: 1.7; font-size: 1.4rem;}
    #industries .section .layout>.box>.more{text-align: center;}
    #industries .section .layout>.box>.more>a{ font-size: 1.2rem;padding:8px 16px; border-color: rgba(255,255,255,.6); color: rgba(255,255,255,.7)}


}

@media only screen and (max-width: 1080px){

    #news .layout>.lists>ul>li{ width: 48%; margin-right: 0;}
    #news .layout>.lists>ul>li:nth-child(even){float: right;}


    #industries .view .details>.title{ font-size:4rem;}


}



@media (max-width:860px){

    #industries .section .layout>.box>.url>a{padding: 8px 10px;}


}


@media (max-width:780px){

    #industries .view .details>.title{ font-size:3.6rem; line-height: 4rem;}
    #industries .view .details>.summary>div{font-size: 1.2rem; }
    #industries .view .details>.content{ font-size: 1.4rem; line-height: 2.4rem;}

}






@media (max-width:640px){

    #industries .section .layout>.ico>i{font-size: 10rem;}
    #industries .section .layout>.box{width: 80%;}
    #industries .section .layout>.box>.title{font-size: 2.2rem;}
    #industries .section .layout>.ico>img{height: 100px;}

    #industries .view {padding-top: 60px; }
    #industries .view .details { padding: 30px; }
    #industries .view .details>.title {font-size: 2.8rem;line-height: 3rem;}
    #industries .view .details>.content {  padding: 30px 0;  font-size: 1.4rem;   line-height: 2rem; }
    #industries .view .details>.summary{text-align: center;}
    #industries .view .details>.summary>div{float: none;}
    #industries .view .details>.summary>.social{display: inline-block; }

}