.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* flexslider necessary styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;position:relative} /* hide the slides before the js is loaded. avoids image jumping */
.banner .flexslider .slides > li a{display: block; overflow:hidden;}
.banner .flexslider ul li.flex-active-slide img{ transition:transform 6000ms linear 0s;
 -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1); 
    transform: scale(1.1);
}
.flexslider .slides > li.clone{position:relative}
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}
/* clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* no javascript fallback */
/* if you are not using another script, such as modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* flexslider default theme
*********************************/
.flexslider { position: relative;zoom:1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* direction nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { display: block; width:40px; height:19px; overflow: hidden; cursor: pointer;transition: all 0.35s ease-in-out;}
.flex-direction-nav a:hover{text-shadow: 1px 1px 0 #666;}
.flex-direction-nav .flex-prev {}
.flex-direction-nav .flex-next {}
.flexslider:hover .flex-prev {}
.flexslider:hover .flex-next {}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
/* pause/play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; background:#ddd}
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }
/* control nav */ 
.flex-control-nav {width: 100%; position: absolute; bottom: -2px; /*! left:0; */ text-align: center; z-index:9999; }
.flex-control-nav li {margin: 10px 6px 0; display: block; zoom: 1; *display: inline;vertical-align: bottom;}
.flex-control-paging li a {width: 8px; height: 8px; display: block;  cursor: pointer;  }
.flex-control-paging li a:hover {  }
.flex-control-paging li a.flex-active { }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

.banner .flex-direction-nav{ display: none; }
.banner .flex-control-paging{ position: absolute;top:40%;right:0;z-index: 1045;width: 40px;text-align: right;} 
.banner .flex-control-nav li{margin:20px 0; overflow: hidden;display:block;}
.banner .flex-control-nav li a{text-indent: 0;display: block;width:20px; height:1px;background:rgba(255,255,255,0.66); float: right; }
.banner .flex-control-nav li a.flex-active{width:40px;  }
.banner .flexslider{ position: relative;z-index: 0;}


.banner {position: relative;}
.bannerinner {height: 100vh;background:#eee; position: relative;}
.bannerswiper {height: 0;padding-bottom: 100%;}
.bannerswiper a { display: block;padding-bottom: 100%;}
.swiper-pagination-bullet {width: 12px;height: 12px;background: none;border: none;opacity: 1; margin: 15px 0;position: relative;}
.banner .gp-img-responsive{ height: 100vh; padding:0; }
.mouse {width:22px;height:32px;background: url(/uploads/image/images/mouse.png) center no-repeat;position: absolute;left: 50%;transform: translatex(-50%);
        bottom:80px;z-index: 6;animation: bb 2s linear 0s infinite;cursor: pointer;}

@keyframes bb {
        0% {
                transform: translate(-50%, 0);
                opacity: 0;
        }

        20% {
                transform: translate(-50%, 3px);
                opacity: 1;
        }

        80% {
                transform: translate(-50%, 10px);
                opacity: 1;
        }

        90% {
                transform: translate(-50%, 10px);
                opacity: 0;
        }

        100% {
                transform: translate(-50%, 10px);
                opacity: 0;
        }
}

.arrow{ position: fixed; right:1%; bottom: 100px;z-index: 9; width: 85px; overflow: hidden;}
.arrow a{ display: block; width: 85px; height: 85px; border-radius: 50%; margin: 10px 0; transition: all 0.2s ease;}
.arrow a:hover{ opacity: 0.8; }
.arrowup{ background: url(/uploads/image/images/arrowup.png) no-repeat center #fff; }
.arrowdn{ background: url(/uploads/image/images/arrowdn.png) no-repeat center #fff; }



.wrapmode1 {box-sizing: border-box;background: url(/uploads/image/images/modebg1.jpg) no-repeat;background-size: cover;}
.mode1{padding:110px 0 50px;}
.articletitle1{ margin-bottom: 80px; overflow: hidden; }
.articletitle1 .title{ float: left; overflow: hidden; }
.articletitle1 .title_en{ margin-bottom: 10px; color:#ee8840;  }
.articletitle1 .more{ display:inline-block; float: right; position: relative; padding-left: 40px; margin-top: 50px;}
.articletitle1 .more:before{ content: ""; display:block; width: 30px; height: 1px;background: #fff; position: absolute; left: 0; top: 10px; }
.articlelist1{ width: 60%;  height:80vh; background: rgba(0,71,157,0.2); overflow: hidden;}
.articlelistcon1{ margin:50px 50px; overflow: hidden; }
.articletext {text-align: right; overflow: hidden;} 
.articletext h2{ color: #afdbfd;}
.articletext h3{color: #ffffff;margin: 10px 0 80px;}
.articletext .gp-article { line-height: 38px; max-height: 114px;}


.wrapmode2 {height: 100vh;box-sizing: border-box;background: url(/uploads/image/images/modebg2.jpg) no-repeat;background-size: cover; }
.mode2{ padding:100px 0 30px;}
.mode2 .articletitle1{ margin-bottom:40px;}
.articletitle1 .more2{ color: #ee8840; }
.articletitle1 .more2:before{ background: #ee8840; }
.list2{ overflow: hidden; }
.list2-til{margin-top:55px;}
.list2-til li { width: 33.3%;}
.list2-til .listlink{ border: #ee8840 1px solid; width: 342px; height:66px; line-height: 66px; margin:0 auto; text-align: center; transition: all 0.2s ease;}
.list2-til .listlink:hover,.list2-til li.on .listlink{ border: #00479d 1px solid; background: #00479d; color: #fff; }
.list2-til .listlink a{ display: block;}
.list2-til .listlink:hover a,.list2-til li.on .listlink a{color: #fff;}

.list2-box{height: 500px;display:table; margin: 0 auto;}
.list2-box li{ vertical-align: middle;} 
.list2-b1 dd{ width: 33.3%;}
.list2-box dd a{display: block; overflow: hidden; margin:10px 13px;}
.gp-ul-inline > dd{display: inline-block;*display: inline;*zoom:1;font-size: 14px;vertical-align: top;}
.list2-b2 dd{ width:16.66%;}
.list2-b2 .gp-img-responsive{ padding-bottom: 140%;}
.list2-b3{ width:68%;margin: 0 auto;}
.list2-b3 dd{ width: 33.3%;}
.list2-box li{ display: none;}
.list2-box li.on{ display: table-cell;}

.list2-box .listtext{ margin:15px 0 0;text-align: center; }
.list2-box .listtitle{ height: auto; height: 24px;}

/* .list2 .slick-arrow{ display: none !important;} */
/* .list2 .slick-arrow{ width:50px; height:50px;text-indent: 999em; border: none; outline: none; cursor: pointer; border-radius: 50%; }
.list2 .slick-prev{ background: url(/uploads/image/images/prev.png) no-repeat center rgba(0,0,0,0.2); position: absolute; left:0;top: 25%;z-index: 9;}
.list2 .slick-next{ background: url(/uploads/image/images/next.png) no-repeat center rgba(0,0,0,0.2); position: absolute; right:0;top: 25%;z-index: 9;} */



.wrapmode3 {overflow: hidden;background:  no-repeat;background-size: cover;height: 100vh; position: relative;}
.mode3 .articletitle1{ width: 83.4vw; position: absolute;top: 110px; }
.list3{ height: 100vh; }
.list3 li{ width:25%; position: relative;} 
.list3 li:before{ content: ""; display: block;width:100%; height:0; background: rgba(0,71,157,0.35); position: absolute; top: 50%; left: 0; transition:all 0.3s ease;}
.list3 li:hover:before{ height: 100vh; top: 0;}
.list3 li.active:before{ content: ""; display: block;width:100%; height:100vh; background: rgba(0,71,157,0.35); position: absolute; top:0; left: 0; transition:all 0.3s ease;}
.list3 li a{ display: block; overflow: hidden; padding: 20px; margin-top:90%; height: 100vh; position: relative;z-index: 9;transition: all 0.3s ease;}
.list3 .listtitle{ line-height: 30px; max-height: 90px; margin-bottom: 15px; }
.list3 .listdate{ color: #ee8840;display:none;}
.list3 .gp-img-responsive{ margin: 20px 0;display:none; background:url(/uploads/image/images/f-logo.png) no-repeat center #fff; }
.list3 .listcon{ margin:25px 0 0; color: #666666; height: auto; max-height: 72px; }
.list3 li.active a{ margin-top:70%;}
.list3 li.active a *{ color: #fff; }
.list3 li.active a .listdate,.list3 li.active a .gp-img-responsive{ display: block; color: #ee8840; } 





@media screen and (max-width:1460px) {
      .articletitle1{ margin-bottom: 50px; }
      .list2 .listlink{ margin: 30px auto auto; height: 50px; line-height: 50px; width:80%; box-sizing: border-box; }
      .list2-box{ height: 400px;}
      .list2-til{ margin-top: 0;}
}


@media screen and (max-width:1200px) {
     .arrow{ display: none; }
     .bannerinner{ height: auto; }
     .banner .gp-img-responsive{ height: 0; padding-bottom:48.5%; } 
     .mouse{ bottom: 20px; }
     .articlelist1{ width: 100%; height: auto; }
     .articlelistcon1{ margin: 30px; }
     .articletext h3{ margin: 10px 0; }
     .mode1,.mode2{ padding: 30px 0; }
     .articletitle1{ margin-bottom: 20px; }
     .wrapmode2,.wrapmode3{ height: auto; }
     .list2 { margin: -10px; }
     .list2 li .slick-images{ margin: 10px; }
     .list2 .listtext{ margin: 20px 0; }
     .mode3 { padding: 30px 0; }
     .mode3 .articletitle1{ position: static;width: auto; }
     .list3{ height: auto; }
     .list3 li { width: 50%; }
     .list3 li:before{display: none;} 
     .list3 li a, .list3 li a:hover{ margin-top: 0; height: auto; }
     .list3 li a:hover .listdate,.list3 li a:hover .gp-img-responsive{ display: none; }
     .list3 li a:hover *{ color: #333; }
     .list3 .listtitle{ max-height: 60px; }
     .list3 .listcon{ margin-top: 15px; }
     .articletitle1 .more{ margin-top: 30px; }
     .list2-box{ height: auto;}
     .list2-b3{ width: 100%;}

}


@media screen and (max-width:766px) {
        .list2 li { width:100%;}
        .list2-b2 dd{ width: 33.3%;}
        .list2-box dd a{ margin: 8px;} 
    }
    


@media screen and (max-width:640px) {
    .articlelistcon1{ margin: 15px; }
    .list2 li,.list3 li{ width: 100%; }
    .list2 .listtext{ margin: 20px 0 0; }
    .list2 .listlink{ margin: 15px auto auto; }
    .list3 li a{ padding:10px 0; border-bottom: #9ab4c3 1px solid;}
    .list2-box dd{ width: 50%;}
     
}