@charset "utf-8";
/* CSS Document */

#history{margin:0 auto; width:100%;padding:120px 0;padding-bottom:0;}
#history>.title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 30px; color: #333; text-align:center;font-weight: 600;}
#history>.title:after{position:absolute;z-index:3;left:50%;bottom:-10px; margin-left:-25px; width:50px;height:2px; background:#026ab5;content:'';}
#history>.container{position:relative; margin:100px auto;}
#history>.container .prev{position:absolute;z-index:998;left:20px;bottom:20px; width:46px;height:46px; background:#f7f7f7 url("../img/icon_arrow_noline_left_blue.png") no-repeat; background-position:50% 50%; background-size:21px auto; border:2px solid #ddd; border-radius:100%; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); transition:all .35s;}
#history>.container .prev:hover{transform:scale(1.1);-webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0);-o-filter: grayscale(0);filter: grayscale(0);}
#history>.container .next{position:absolute;z-index:998;right:20px;bottom:20px; width:46px;height:46px; background:#f7f7f7 url("../img/icon_arrow_noline_right_blue.png") no-repeat; background-position:50% 50%; background-size:21px auto; border:2px solid #ddd; border-radius:100%; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%); transition:all .35s;}
#history>.container .next:hover{transform:scale(1.1);-webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0);-o-filter: grayscale(0);filter: grayscale(0);}
#history>.container>.time-line{position:absolute;z-index:1; top:50%; margin-top:-1px; width:100%; height:280px; background:url("../img/history_time_axis.png") repeat-x;}
#history>.container>.time-axis{ position:relative; z-index:99; width:90%; max-width:1360px;margin:0 auto;}
#history>.container>.time-axis .swiper-container{height:100%;}
#history>.container>.time-axis .swiper-wrapper{height:700px;}
#history>.container>.time-axis .swiper-slide{ height:350px; box-sizing:border-box; transition:all .45s ease;}
#history>.container>.time-axis .swiper-slide:nth-child(2n){transform:translateY(350px);}
#history>.container>.time-axis .swiper-slide .years{ position:relative; height:100%;}
#history>.container>.time-axis .swiper-slide .years>.tit{ position:absolute;z-index:4;left:0;bottom:-80px; font-size:40px; font-weight:600; font-family:Arial; color:#026ab5;}
#history>.container>.time-axis .swiper-slide .years>.spot{ position:absolute;z-index:3;left:32px;bottom:-8px;width:24px;height:24px; background:rgba(2,106,181,.8); border-radius:100%; transition:all .35s;}
#history>.container>.time-axis .swiper-slide .years>.spot:after{position:absolute;z-index:3;left:50%;top:50%; margin-top:-4px; margin-left:-4px; width:8px;height:8px; background:#026ab5; border-radius:100%;opacity:0; content:''; transition:all .35s;}
#history>.container>.time-axis .swiper-slide .years>.line{ position:absolute;z-index:1;left:44px;bottom:12px; width:1px; height:100%;background:#026ab5;}
#history>.container>.time-axis .swiper-slide .text{position:absolute;z-index:3; right:0; padding:30px 0; width:80%; text-align:left;}
#history>.container>.time-axis .swiper-slide .text>.img{padding:20px 0;}
#history>.container>.time-axis .swiper-slide .text>.img>img{height:100px; width:auto;}
#history>.container>.time-axis .swiper-slide .text>.txt{font-size:14px; line-height:26px;}
#history>.container>.time-axis .swiper-slide:nth-child(2n) .years>.tit{bottom:auto;top:-80px;}
#history>.container>.time-axis .swiper-slide:nth-child(2n) .years>.spot{bottom:auto;top:-8px;}
#history>.container>.time-axis .swiper-slide:nth-child(2n) .years>.line{bottom:auto;top:12px;}
#history>.container>.time-axis .swiper-slide:hover .spot{ width:30px; height:30px; left:30px; bottom:-10px; background:#fff; box-shadow:0 0 7px rgba(0,0,0,.3);}
#history>.container>.time-axis .swiper-slide:nth-child(2n):hover .years>.spot{ bottom:auto;top:-16px;}
#history>.container>.time-axis .swiper-slide:hover .spot:after{opacity:1;}
#history>.container>.time-axis .swiper-slide:hover{transform:translateY(-10px);}
#history>.container>.time-axis .swiper-slide:nth-child(2n):hover{transform:translateY(360px);}



@media only screen and (max-width: 640px){
  #history{padding:60px 0;}
  #history>.title{font-size: 20px;}
  #history>.container{margin:0 auto;}
  #history>.container .prev{left:auto; bottom:auto; right:60px;top:10px; width:30px;height:30px;}
  #history>.container .next{left:auto; bottom:auto; right:20px;top:10px; width:30px;height:30px;}
}