@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: 150px 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: #c7000c; 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: 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: #c7000c;}
#history .layout>.lists>ul>li .box>.years:after{display: none; position: absolute;z-index: 1;right: 0;bottom: 0;width: 40px;height: 2px; background: #c7000c; content: '';}
#history .layout>.lists>ul>li .box>.slogan{padding-bottom: 10px;}
#history .layout>.lists>ul>li .box>.slogan>span{display: inline-block; background: #c7000c; border-radius: 3px;padding: 6px 10px;font-size: 1.6rem; font-weight: bold; color: #fff;}
#history .layout>.lists>ul>li .box>.img{padding-top: 30px;}
#history .layout>.lists>ul>li .box>.img>img{width: 50%;height: auto; border-radius: 3px;}
#history .layout>.lists>ul>li .box>.intro{padding-top: 30px; 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: #c7000c;}

#history .layout>.lists>ul>li .box:hover{border-color: #c7000c}
#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;}

}