/* ==========================================================================
   Global
   ========================================================================== */
    
    html {
        font-size: 62.5%;
    }

    body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 5px;
        background-color: #F5F5F5;
    }



body::-webkit-scrollbar {
        width: 8px;
        background-color: #F5F5F5;
    }



body::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #bdb9b9;
    }

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
    border-radius: 3px;
    background-color: #F5F5F5;
}



div::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}



div::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
    background-color: #bdb9b9;
}
    
    a { color: #333; }
    
    a:hover { color: #0065b4; }

 a:focus { outline:none; -moz-outline:none; }    

    body { color: #333; font: 14px/1.7 microsoft yahei, Arial, Helvetica, sans-serif; }   


    @media only screen and (max-width: 768px) {
        body{font-size: 12px;}

    } 
    .wrapper {
        max-width: 1130px;
        /*min-width: 980px; */
        _width: 1400px;
        padding: 0 30px;
        margin-left: auto;
        margin-right: auto;
    } 

 @media only screen and (max-width:1200px) {
.wrapper {max-width: 1100px;}
}

@media only screen and (max-width:920px) {
.wrapper {max-width: 880px;padding:0 10px;}
}
   
    .wrapper:after,
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    /* arrow */    
    .arrow {
        position: absolute;
        top: 50%;
        margin-top: -4px;
    }    
    .arrow * {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border: 0 dashed transparent;
        overflow: hidden;
    }
    /* arrow-right */
    
    .arr-r * {
        border-left-style: solid;
        border-width: 4px 0 4px 4px;
    }    
    .arr-r em {
        left: 1px;
    }    
    .arr-r span {
        border-left-color: #3675bb;
    }    
    .tri {
        position: absolute;
        width: 0;
        height: 0;
        border: 0 dashed transparent;
        overflow: hidden;
    }


    /* ==========================================================================
   Header
   ========================================================================== */
.homenav{width:290px; height: 60px; background: #00479d; position: fixed; z-index: 101; margin: 0; top:0; left: 0; -webkit-transition: all 0.3s;
        transition: all 0.3s;
        box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.2);}
.homenav .logo{width: 230px; height: 60px;background: #fff; float: left;text-align: center; line-height: 60px;}
.homenav .logo img{max-width: 80%;}
.homenav .navbtn{width:60px; height: 60px; float: right;    cursor: pointer;}
.homenav .navbtn .warp{height:100%; width:100%; background: url(../images/nav-tit1.png) center no-repeat; 
    background-size: 100% 100%; -webkit-transition: all 0.3s; transition: all 0.3s; }
.homenav .navbtn.cur .warp{background: url(../images/nav-tit2.png) center no-repeat; background-size: 100% 100%; }
.language { position: absolute; top:30px; right: 3%; z-index: 150;color: #fff;}
.language a{color: #fff;}
.language02 { position: fixed; top:30px; right: 3%; z-index: 150;color: #fff;}
.language02 a{color: #fff;}

.ind-header{width: 100%; height:100%; position: fixed; top: 0; left: 0; z-index:100; display: none; 
    background:url(../images/ind-header.png) center repeat-x; }
.ind-header .warp{max-width: 1300px; margin: 0 auto; height:100%; }
.ind-header .warp li{width: calc(15% - 40px);  float: left; height:90%; padding: 15% 20px 0 20px; 
    background: url(../images/nav-borbg.png) left top no-repeat; position: relative; }

.ind-header .warp li a{display: block; color: #fff; }
.ind-header .warp li .tit{font-size: 20px; line-height: 35px; margin-bottom: 40px; position: relative; cursor: pointer; }
.ind-header .warp li .mtop{margin-top: 50px;}
.ind-header .warp li .tit:before{content: ""; display: block; position: absolute; width: 8px; height: 8px; 
background-color: #fff; border-radius: 100%; position: absolute; left:-44px; top: 50%; margin-top: -4px; }
.ind-header .warp li .point{cursor: pointer; }
.ind-header .warp li .lt{font-size: 12px; line-height:18px; color: #fff; cursor: pointer; margin-bottom:20px;
     border-bottom: 1px solid transparent; transition:all 0.4s; -webkit-transition:all 0.4s; }
.ind-header .warp li .lt.on,.ind-header .warp li .lt:hover{border-bottom: 1px solid #fff;}
.ind-header .warp li:nth-child(2),.ind-header .warp li:nth-child(3){width: calc(27.5% - 40px);}

@media only screen and (max-width:1280px) {
.ind-header .warp{max-width: 1140px; margin: 0 30px;}
.ind-header .warp li .lt{font-size: 14px; line-height:30px;}
}

@media only screen and (max-width:1000px) {
.ind-header .warp{margin: 0 20px;}
.ind-header .warp li .lt{font-size: 12px; line-height:24px;}
.ind-header .warp li{padding: 10% 20px 0 20px; }
.ind-header .warp li .tit{font-size:16px; line-height: 30px; margin-bottom: 20px;font-weight: bold;}
.ind-header .warp li .tit:before{left:-24px; }
}

@media only screen and (max-width:768px) {
    .ind-header .warp li .tit{font-size:14px; }
    .ind-header .warp li{width:auto;height:80%; padding: 20% 20px 0 20px;}
    .ind-header .warp li:nth-child(2),.ind-header .warp li:nth-child(3){width:auto;}
}

@media only screen and (max-width:600px) {
.homenav{width:200px; height: 50px;position: absolute;}
.homenav .logo{width: 150px; height: 50px; line-height: 50px;}
.homenav .logo img{max-width: 70%;}
.homenav .navbtn{width:50px; height: 50px;}
.ind-header .warp li{width: calc(100% - 40px);height:auto!important; padding:10px 20px; float: none;background:none;border-top: 1px solid #4260c1;}
.ind-header .warp li .tit{margin-bottom: 0;}
.ind-header{background: #23409a;position: absolute;padding-top: 80px;height: auto;padding-bottom: 20px;}
.ind-header .warp li .lt{margin-bottom: 0;}
}

/* ==========================================================================
   Content
   ========================================================================== */

.hidden {display: none;}

.hometit01{font-size:24px;line-height: 30px; text-align: center;color: #1776e3;}

@media only screen and (max-width:1440px) {
.hometit01{font-size: 18px;}
}

@media only screen and (max-width:1200px) {
.hometit01{font-size: 16px;font-weight: bold;}
}



/* ==========================================================================
   banner
   ========================================================================== */



.index-banner{position: relative;}
.index-banner .cont{}
.index-banner .videobox{background: url(../images/indexbanner.jpg) no-repeat left; height: 100vh; background-size: cover;position: relative;}
.index-banner .fullscreenvideo{object-fit: cover; width: 100%; height: 100%; position: absolute; z-index:0; left: 0; top: 0;}
.banner-txt{width: 100%;height:110px;margin-top: -50px; position: absolute; left: 0; top: 50%;z-index: 1; text-align: center;}
.szgdbox{}
.szgdbox .numbox{display: inline-block;padding:0 100px;}
.szgdbox .numbox>p{font-size: 18px;height: 40px; line-height: 40px;color: #fff;}
.szgdbox .numbox h3{margin-bottom: 20px;text-align: center;color:#fff; height: 50px; line-height: 50px;}
.szgdbox .numbox h3 span.timer{font-size: 48px;}
.szgdbox .numbox h3 span.unit{font-weight:500;margin:0 5px;font-size: 14px;}



@media only screen and (max-width:1200px) {
.szgdbox .numbox{padding:0 60px;}
.szgdbox .numbox h3 span.timer{font-size: 42px;}
}

@media only screen and (max-width:920px) {
.szgdbox .numbox{padding:0 30px;}
.szgdbox .numbox h3 span.timer{font-size: 30px;}
.szgdbox .numbox>p{font-size: 16px;}
.szgdbox .numbox h3 {    margin-bottom: 0;}
.banner-txt{margin-top: 0;}
}

@media only screen and (max-width:768px) {
.szgdbox .numbox{padding:0 10px;}
.szgdbox .numbox h3 span.timer{font-size: 24px;}
.szgdbox .numbox>p{font-size: 14px;}
}

@media only screen and (max-width:450px) {
.szgdbox .numbox{padding:0 10px;}
.szgdbox .numbox h3 span.timer{font-size:18px;}
.szgdbox .numbox h3 {height: 30px; line-height: 30px;}
}

@media only screen and (max-width:400px) {
.szgdbox .numbox{padding:0 20px;float: left;width: calc(50% - 40px);margin-bottom:30px;}
}



/* ==========================================================================
   indexpart01
   ========================================================================== */
.indexpart01{padding:100px 0;}

.indexpart01 .txtarea{margin-top: 50px;font-size:16px;}
.indexpart01 .txtarea .txt01{width: calc(50% - 20px); float: left;color: #1776e3;line-height:30px;}
.indexpart01 .txtarea .txt02{width: calc(50% - 20px); float: right;color: #909090;line-height: 36px;}

@media only screen and (max-width:1200px) {
.indexpart01{padding:60px 0;}

}

@media only screen and (max-width:920px) {
.indexpart01 .txtarea{margin-top: 20px;font-size: 14px;}
.indexpart01{padding:40px 0;}

}

@media only screen and (max-width:768px) {
.indexpart01 .txtarea .txt01,.indexpart01 .txtarea .txt02{line-height: 24px;}
}

@media only screen and (max-width:420px) {
.indexpart01 .txtarea .txt01,.indexpart01 .txtarea .txt02{width: 100%;float: none;}
.indexpart01 .txtarea .txt02{margin-top: 10px;}
}


/* ==========================================================================
   indexpart02
   ========================================================================== */
.indexpart02{padding:0 0 100px 0;}
.map-world{margin-top:50px;text-align: center;}

@media only screen and (max-width:1200px) {
.map-world img{max-width: 80%;}
.indexpart02{padding:0 0 60px 0;}
}

@media only screen and (max-width:920px) {
.map-world{margin-top:20px;}
.indexpart02{padding:0 0 40px 0;}
}

@media only screen and (max-width:420px) {
   .map-world img{max-width: 90%;} 
   .indexpart02{padding:0 0 20px 0;}
}

/* ==========================================================================
   indexpart03
   ========================================================================== */
.indexpart03{padding:0 0 100px 0;}
.indexpart03 .wrapper{max-width: 1660px;}
#owl-solution{margin-top: 50px;}
.solutionlist{margin-left: -20px;margin-top: 50px;}
.solutionlist li{width: calc(33.33% - 20px); margin-left: 20px;float: left;}
.solutionbox{padding-bottom: 110px; position: relative;}
.solutionbox .pic {position: relative; height: auto;overflow: hidden;}
.solutionbox .bgimg{width: 100%;}
.solutionbox .uppic{width: 100%;height: 100%; transition: transform 1s;position: absolute;left: 0;top:0;}
.solutionbox:hover .uppic{ transform: scale(1.05);}
.solutionbox .cover{position: absolute; width: 100%;height:110px;bottom:0; left: 0;background:#1776e3; color: #fff;
-webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
.solutionbox:hover .cover{height: 120px;}
.solutionbox .inco{width: 30px; height: 30px; position: absolute; right: 20px; bottom: 20px;}
.solutionbox .inco img{width: 30px;height: 30px;transform: rotate(0deg);transition-duration:800ms;}
.solutionbox:hover .inco img{transform: rotate(180deg);}
.solutionbox h3.title{font-size:18px;padding:30px;font-weight: normal;}

@media only screen and (max-width:1200px) {
.indexpart03{padding:0 0 60px 0;}
.solutionbox h3.title{font-size: 16px;}
}

@media only screen and (max-width:920px) {
.solutionlist{margin-left: -10px;margin-top: 20px;}
.solutionlist li{width: calc(33.33% - 10px); margin-left:10px;}
.solutionbox .cover{height:90px;}
.solutionbox:hover .cover{height: 100px;}
.solutionbox{padding-bottom: 90px;}
.solutionbox h3.title{font-size:14px;padding:20px;}
.indexpart03{padding:0 0 40px 0;}
}

@media only screen and (max-width:768px) {
   .solutionbox h3.title{font-size:14px;} 
}

@media only screen and (max-width:420px) {
.solutionlist{margin-left:0;}
.solutionlist li{width:100%; margin-left:0;margin-bottom: 10px;}
.solutionbox .cover{height:60px;}
.solutionbox:hover .cover{height: 60px;}
.solutionbox{padding-bottom: 60px;}
.solutionbox .inco{width:24px; height:24px;bottom: 18px;}
.solutionbox .inco img{width: 24px;height: 24px;}
.indexpart03{padding:0 0 20px 0;}
}

/* ==========================================================================
   indexpart04
   ========================================================================== */
.indexpart04{padding:0 0 100px 0;}
.indexpart04 .wrapper{max-width: 1660px;}
.sustainablelist{margin-left: -15px;margin-top: 50px;}
.sustainablelist li{width: calc(33.33% - 15px); margin-left: 15px; margin-bottom: 15px; float: left;}
.sustainablebox{position: relative;}
.sustainablebox .pic {position: relative; height: auto;overflow: hidden;}
.sustainablebox .bgimg{width: 100%;}
.sustainablebox .uppic{width: 100%;height: 100%; transition: transform 1s;position: absolute;left: 0;top:0;}
.sustainablebox:hover .uppic{ transform: scale(1.05);}
.sustainablebox .cover{position: absolute; width: 100%;height:100%;bottom:0; left: 0;color: #fff;
background: rgba(000, 000, 000, .5);
-webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
.sustainablebox:hover .cover{background: rgba(000, 000, 000, .6);}
.sustainablebox .cover h3.title{font-size: 24px;font-weight: normal;margin-bottom: 30px;}
.sustainablebox .cover .warp{padding:100px 60px 60px 60px;}
.sustainablebox .cover .more{padding:0 40px; height:35px; font-weight: bold;line-height: 35px; display: inline-block;
 background: #fff;color: #1776e3;}
.sustainablebox .cover .more i{margin-left:30px;}
.sustainablebox:hover .cover .more{filter: alpha(opacity=80);opacity: 0.8;}

@media only screen and (max-width:1200px) {
.indexpart04{padding:0 0 60px 0;}
.sustainablebox .cover .warp{padding:60px 40px 40px 40px;}
.sustainablebox .cover h3.title {font-size: 18px;margin-bottom: 20px;}
.sustainablebox .cover .more i{margin-left:20px;}
.sustainablebox .cover .more{padding:0 30px;}
}

@media only screen and (max-width:920px) {
.sustainablelist{margin-left: -10px;margin-top: 20px;}
.sustainablelist li{width: calc(33.33% - 10px); margin-left: 10px; margin-bottom: 10px;}
.sustainablebox .cover h3.title {font-size: 16px;}
.indexpart04{padding:0 0 40px 0;}
}

@media only screen and (max-width:768px) {
  .sustainablebox .cover .warp{padding:40px 30px 30px 30px;}  
}

@media only screen and (max-width:420px) {
.sustainablelist{margin-left: -10px;margin-top: 20px;}
.sustainablelist li{width: calc(50% - 10px); margin-left: 10px; margin-bottom: 10px;}
.sustainablebox .cover h3.title {font-size: 14px;font-weight: bold;margin-bottom: 10px;}
.indexpart04{padding:0 0 20px 0;}
.sustainablebox .cover .warp{padding:30px;}  
.sustainablebox .cover .more i{margin-left:10px;}
.sustainablebox .cover .more{padding:0 20px;height: 30px; line-height: 30px;}
}

/* ==========================================================================
   indexpart05
   ========================================================================== */
.indexpart05{padding:0 0 100px 0;}

.newslist{margin-left: -15px;margin-top: 50px;}
.newslist li{width: calc(33.33% - 15px); margin-left: 15px; margin-bottom: 15px; float: left;}
.newsbox{background: #f6f6f6;cursor: pointer;border-bottom: 3px solid #f6f6f6;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}
.newsbox:hover{transform: translate3d(0, -2px, 0);border-color: #1776e3;}
.newsbox .pic {position: relative; height: auto;overflow: hidden;}
.newsbox .bgimg{width: 100%;}
.newsbox .uppic{width: 100%;height: 100%; transition: transform 1s;position: absolute;left: 0;top:0;}
.newsbox:hover .uppic{ transform: scale(1.05);}
.newsbox .txtarea{padding:20px;}
.newsbox .txtarea>h2{font-size:18px;font-weight: normal; width: 100%;height: 60px;
 line-height: 30px; overflow:hidden;}
.newsbox:hover .txtarea>h2 a{color: #024099;}
.newsbox .txtarea .desc{font-size: 14px; color: #7e7d7d; line-height: 24px;height: 48px;
 overflow: hidden;margin:10px 0;}
.newsbox .txtarea .date{font-size: 14px;color: #989898;}
.newsbox .txtarea .more a{color: #1776e3;}
.newsbox .txtarea .more{text-align: right;}

.morebtn{margin-top: 50px;text-align: center;}
.morebtn a{padding:0 30px; height:35px; font-weight: bold;line-height: 35px; display: inline-block;
 background: #1776e3;color: #fff;}
.morebtn i{margin-left:20px;}

@media only screen and (max-width:1200px) {
.newsbox .txtarea>h2{font-size:16px;height:48px; line-height: 24px; }
.indexpart05{padding:0 0 60px 0;}
}

@media only screen and (max-width:920px) {
.newslist{margin-left: -10px;margin-top: 20px;}
.newslist li{width: calc(33.33% - 10px); margin-left: 10px;}
.newsbox .txtarea>h2{font-size:14px;}
.morebtn{margin-top:20px;}
}

@media only screen and (max-width:768px) {
.newslist{margin-left:0;margin-top: 20px;}
.newslist li{width:100%; margin-left:0; margin-bottom: 10px; float: none;} 
.indexpart05{padding:0 0 30px 0;}
}






/* ==========================================================================
   Footer
   ========================================================================== */
footer {font-size: 14px;color: #333333;position: relative;}
footer .wrapper{border-top: 1px solid #d4d4d6;padding:40px 20px; max-width: 1660px;}
footer a{color: #cfcfd2;}
footer a:hover { text-decoration: underline;color: #fff; }
.footer-nav {max-width: 1420px;margin:0 auto;}

.fn-col { display: inline-block; *display:inline;zoom: 1; vertical-align: top; *padding-right: 100px;margin:0 20px;max-width:200px; }
.footer-nav:after { content: ""; width: 100%; display: inline-block; font-size: 0; line-height: 0; }
.fn-col h3 {margin-bottom: 10px; font-size: 16px;line-height: 24px;color: #cfcfd2;font-weight: bold;}
.fn-col h3 a{color: #333333;}
.fn-col h3 a:hover {text-decoration: underline;color: #1776e3; }
.fn-col li {line-height:30px; font-size: 12px;color: #e4e4e4;}
.fn-col li a{color: #9b9ba3;}
.fn-col li a:hover {text-decoration: underline;color: #1776e3;}
.fn-contact{width:260px; overflow:hidden;color: #666666;line-height:2em;}


.fn-ewm{width: 140px; }
.fn-ewm .share{margin-bottom: 20px;}
.fn-ewm .share a{font-size: 14px;color: #fff;width: 20px; height: 20px; text-align: center; line-height: 20px; display: inline-block;
border:1px solid #3a3a3a;background: #3a3a3a; margin-right:3px;
-webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%;
}
.fn-ewm .share a:hover{transform: translate3d(0, -2px, 0);}

.fn-ewm .ewmbox{font-size: 14px; color: #8e8e8e;text-align: center;}
.fn-ewm .ewmbox img{width: 96px;margin-bottom: 10px;}

.foothd{padding:15px 0 0 0;text-transform:Uppercase;color: #666666; font-size: 16px; text-align: center;
 position: relative;}
.foothd a{color: #666666;}
.foothd a:hover{text-decoration: underline;color: #1776e3;}

footer .footlogo{margin-bottom: 10px;}




@media only screen and (max-width: 1200px) {
.foothd span{margin:0 10px;}
.fn-col h3{font-size: 14px;}
}

@media only screen and (max-width: 920px) {
.fn-col li{font-size: 12px;}
.fn-col h3{font-size: 14px;}
.fn-contact,.fn-ewm{display: none;}
.foothd{font-size: 14px;}
}


@media only screen and (max-width: 768px) {
footer {padding:0;}
.footer-nav{display: none;}
.foothd .right,.foothd .left{float: none;}
footer .wrapper{padding:20px;}
.foothd {padding:0;font-size: 12px;}
}

.toggle-btn { display: none;}

@media only screen and (max-width: 920px) {
    .toggle-btn {
        display: block;
        position: absolute;
        right: 20px;
        top: 10px;
        transition: all 0.5s;
    }    
    .inner-cont > p img {
        width: 100%;
        height: auto;
        padding-bottom: 20px;
    }    
.gn-item:hover .toggle-btn {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}