@charset "utf-8";

/* CSS Document */



@import url('https://fonts.font.im/css?family=Oswald:200,300,400,500,600,700');





#history{margin: 0 auto; padding: 75px 0;}



#history .title{ position: relative; text-align: center; margin: 0 auto;}

#history .title>h3{ position: relative;z-index: 20; font-size: 4rem; padding:30px 0 20px 0; font-weight: bold; color: #333;}

#history .title>h3:after{position: absolute;z-index: 1; left: 50%; bottom: 0;width:50px;height: 4px; background: #005d8a; transform: translateX(-50%); content: '';}

#history .title>h4{position: absolute;z-index: 1; left: 50%; top: 0; width: 100%; font-size: 6rem; color: #f3f3f3; transform: translateX(-50%); text-transform: uppercase;}

#history .layout{margin: 0 auto; padding: 100px 0; }

#history .layout>.lists{margin: 0 auto; }

#history .layout>.lists>ul{ position: relative; display: block; margin:  0 auto; padding: 30px 0;}

#history .layout>.lists>ul:after{position: absolute;z-index: 1; left: 50%;top: 0;width: 3px;height: 100%; background:#ddd; content: ''; transform: translateX(-50%);}

#history .layout>.lists>ul>li{ position: relative;z-index: 20; display: block; box-sizing: border-box; margin: 50px auto 100px auto;}

#history .layout>.lists>ul>li:before, #history .layout>.lists>ul>li:after { content: ""; display: table; }

#history .layout>.lists>ul>li:after { clear: both; }

#history .layout>.lists>ul>li { zoom: 1; }

#history .layout>.lists>ul>li .drop{ position: absolute;z-index: 10; left:50%; top: 30px; width: 24px;height: 24px; border: 5px solid #fff; transform: translateX(-50%); border-radius: 100%;background: #666; }

#history .layout>.lists>ul>li .box{ position: relative;z-index: 10; width: 40%; float: left;text-align: right; box-sizing: border-box; border: 1px solid #ddd; padding: 5px 50px; background: #fff; border-radius: 3px; transition: all .35s;}

#history .layout>.lists>ul>li .box:after{position: absolute;z-index: 10; top: 30px; right: -23px; transform: rotateY(180deg); width: 23px; height: 33px; background: url("../img/history_arrow.png") no-repeat; content: '';}

#history .layout>.lists>ul>li .box>.years{ position: relative; z-index: 3; font-family: 'Oswald', sans-serif; font-size: 4.6rem; font-weight: 600; color: #005d8a;}

#history .layout>.lists>ul>li .box>.years:after{display: none; position: absolute;z-index: 1;right: 0;bottom: 0;width: 40px;height: 2px; background: #005d8a; content: '';}

#history .layout>.lists>ul>li .box>.slogan{padding-bottom: 10px;}

#history .layout>.lists>ul>li .box>.slogan>span{display: inline-block; background: #005d8a; border-radius: 3px;padding: 6px 10px;font-size: 1.6rem; font-weight: bold; color: #fff;}

#history .layout>.lists>ul>li .box>.img{padding-top: 0;}

#history .layout>.lists>ul>li .box>.img>img{width: 50%;height: auto; border-radius: 3px;}

#history .layout>.lists>ul>li .box>.intro{padding-top: 0px; margin: 0 auto;}

#history .layout>.lists>ul>li .box>.intro>.row{ position: relative;z-index: 50; margin-bottom: 10px;font-size: 1.6rem; line-height: 2.4rem; color: #666;}

#history .layout>.lists>ul>li:nth-child(even) .box{ float: right;text-align: left;}

#history .layout>.lists>ul>li:nth-child(even) .box>.years:after{ left: 0;right: auto;}

#history .layout>.lists>ul>li:nth-child(even) .box:after{ left: -23px; right: auto; transform: rotateX(0deg); }

#history .layout>.lists>ul>li:hover .drop{background: #005d8a;}



#history .layout>.lists>ul>li .box:hover{border-color: #005d8a}

#history .layout>.lists>ul>li .box:hover:after{  background-position: 0 -33px; }



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



    #history .layout>.lists>ul>li .box>.years{ font-size: 2.8rem;}

    #history .layout>.lists>ul>li .box>.img>img{width: 70%;}

    #history .layout>.lists>ul>li .box>.intro>.row{font-size: 1.4rem; }



}



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



    #history .title>h3{ font-size: 3.2rem;}

    #history .title>h4{font-size: 4.5rem;}



    #history .layout>.lists>ul>li .box{ padding: 30px; }

    #history .layout>.lists>ul>li .box>.img{padding: 15px 0;}

    #history .layout>.lists>ul>li .box>.img>img{width: 100%;}



}





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



    #history .title>h3{ font-size: 2.8rem;}

    #history .title>h4{font-size: 4rem;}



    #history .layout>.lists>ul:after{ left: 0;width: 2px;transform: translateX(0);}

    #history .layout>.lists>ul>li .drop{ left:-8px; width: 20px;height: 20px; transform: translateX(0); }

    #history .layout>.lists>ul>li .box{ width: 86%; float: right;text-align: left; padding: 20px;}

    #history .layout>.lists>ul>li .box:after{transform: rotateY(0deg); left: -23px; right: auto; top: 23px;}

    #history .layout>.lists>ul>li:nth-child(even) .box{ float: right;}



    #history .layout>.lists>ul>li .box>.years{ font-size: 3.4rem;}

    #history .layout>.lists>ul>li .box>.years:after{ left: 0; right: auto; width: 30px;}

    #history .layout>.lists>ul>li .box>.slogan>span{font-size: 1.4rem;}







}



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



    #history .layout{ padding: 50px 0; }



}





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



    #history{padding: 60px 0;}

    #history .title>h3{ font-size: 2.4rem; padding: 15px 0;}

    #history .title>h4{font-size: 2.4rem;}



}