@charset "utf-8";
/* CSS Document */
html, body {background: #f3f3f3!important;}

#history{ position: relative;z-index: 5; background: #f3f3f3; margin: 0 auto; padding: 50px 0;}

#history{ overflow:hidden; margin:0 auto;padding:80px 0; background: url("../img/history_bg.jpg") no-repeat; background-size: cover; }
#history>.title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 45px; color: #333; text-align:left;font-weight: 400;}
#history>.container{ position:relative; margin:0 auto;padding:70px 0 20px 0;}
#history>.container .prev{ position:absolute;z-index:3;left:-30px;bottom:10px; width:40px; height:40px; line-height: 40px; text-align: center;overflow: hidden; background: rgba(38,87,161,1); border-radius: 100%; transition:all .35s;}
#history>.container .next{ position:absolute;z-index:3;right:-30px;bottom:10px; width:40px; height:40px;  line-height: 40px; text-align: center;overflow: hidden; background: rgba(38,87,161,1); border-radius: 100%; transition:all .35s;}
#history>.container .prev>i, #history>.container .next>i{color: #fff;font-size: 20px;}
#history>.container .prev:hover,#history>.container .next:hover{ background: rgba(146,191,46,1); }
#history>.container .box{ position:relative; width:100%; box-sizing: border-box; margin: 0 auto; padding:50px;}
#history>.container .box .swiper-container{width:100%; height:100%;}
#history>.container .box .swiper-wrapper:hover{z-index:11; position:relative;}
#history>.container .box .swiper-slide{ text-align: left;}
#history>.container .box .swiper-slide>.img{width: 42%;text-align: center;}
#history>.container .box .swiper-slide>.img>img{max-width: 100%;height: auto; vertical-align: middle;}
#history>.container .box .swiper-slide>.con{text-align:left; box-sizing: border-box;padding: 0 50px; width: 50%;}
#history>.container .box .swiper-slide>.con>.tit{font-size: 10rem; font-weight: bold; color: rgba(38,87,161,1);}
#history>.container .box .swiper-slide>.con>.txt{padding: 30px 0; font-size: 16px; line-height: 28px; color: #666;}
#history>.container .box .swiper-slide>.con>.txt>p{ position: relative; padding-left: 12px; font-size: 16px; line-height: 28px; color: #666;}
#history>.container .box .swiper-slide>.con>.txt>p:after{position: absolute;z-index: 2;left: 0;top:10px; width: 6px;height: 6px; border-radius: 100%; background: rgba(38,87,161,1); content: '';}

#history>.container .years{ position:relative; width:100%; margin:10px auto;}
#history>.container .years:after{position:absolute;z-index:1;left:0;bottom:30px; width:100%;height:1px;background:#ddd;content:'';}
#history>.container .years .swiper-container{position:relative;z-index:99; width:80%; height:100px; margin:0 auto; text-align:center;}
#history>.container .years .swiper-slide{font-size:18px; cursor: pointer; padding-top:30px; box-sizing:border-box; font-weight:600; color:#333; text-align:center; transition:all .35s;}
#history>.container .years .swiper-slide:after{ position:absolute;z-index:3;left:50%; bottom:28px; margin-left:-3px; width:6px;height:6px; background:#666; border-radius:100%; content:''; transition:all .35s;}
#history>.container .years .active-nav{position:relative; padding-top:0; bottom:0; z-index:11; color:rgba(38,87,161,1);font-size:30px;}
#history>.container .years .active-nav:after{background:rgba(38,87,161,1);}
#history>.container .years .active-nav:before{margin-left:-20px; width:40px;height:40px;opacity:1;}


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




}


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




}


@media only screen and (max-width: 1080px){
    #history>.title{ font-size: 36px;}
    #history>.container .box{ height: auto;}
    #history>.container .box .swiper-container { height: auto; }
    #history>.container .box .swiper-wrapper{height: auto;}
    #history>.container .box .swiper-slide>.img{ float: none; width: 100%; text-align: left;}
    #history>.container .box .swiper-slide>.con{ float: none;padding: 20px; width:100%;}


}

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

    #history>.container .wrap{width:100%;}
    #history>.container .box{padding: 50px 30px;}

}


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


    #history>.container {padding:20px 0; }

    #history>.container .years{display: none;}
    #history>.container .prev{left:-10px;}
    #history>.container .next{ right:-10px;}

    #history>.container .box{ padding: 30px; border-left: 2px solid #ccc;}
    #history>.container .box .swiper-wrapper{display:block;}
    #history>.container .box .swiper-slide{ border-bottom: 1px solid #ddd; padding-bottom: 50px;}
    #history>.container .box .swiper-slide:last-of-type{ border-bottom: 0;}
    #history>.container .box .swiper-slide>.con>.tit{ position: relative; font-size: 4rem;}
    #history>.container .box .swiper-slide>.con>.txt{font-size: 14px; line-height: 24px;}
    #history>.container .box .swiper-slide>.con>.txt>p{ font-size: 14px; line-height: 24px;}

}


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


    #history>.container .box{padding: 20px;}
    #history>.container .box .swiper-slide>.con>.tit{font-size: 2rem;}



}