@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: 100px 0;}

#history .title{ position: relative; text-align: center; margin: 0 auto;}
#history .title>h3{ position: relative;z-index: 20; font-size: 3.6rem; padding:30px 0 20px 0; font-weight: bold;}
#history .describe{ width: 60%;margin: 0 auto; text-align: center;font-size: 1.4rem;font-weight: 200;  color: #666; line-height: 2.4rem;}
#history .layout{margin: 0 auto; padding: 50px 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: 6px;height: 100%; border-radius: 6px; background:#ccc; 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; text-align: center; width: 60px;height: 60px; line-height: 50px;overflow: hidden; border: 5px solid #fff;  transform: translateX(-50%); border-radius: 100%;background: #ccc; }
#history .layout>.lists>ul>li .drop>i{ font-size: 2.4rem; color: #333; vertical-align: middle;}
#history .layout>.lists>ul>li .years{ position: absolute; z-index: 3; left: 54%; top: 42px; font-family: 'Oswald', sans-serif; font-size: 2rem; color: #666;}
#history .layout>.lists>ul>li .box{ position: relative;z-index: 10; width: 44%; float: left;text-align: left; box-sizing: border-box; padding: 50px; background: #f1f9ff; border-radius:10px; transition: all .35s;}
#history .layout>.lists>ul>li .box>.years{display: none;}
#history .layout>.lists>ul>li .box:after{position: absolute;z-index: 12; right: -15px; top: 50px; width: 0; height: 0;border-top: 10px solid transparent; border-bottom: 10px solid transparent;border-left: 15px solid #f1f9ff; content: '';}
#history .layout>.lists>ul>li .box>.tit{font-size: 2.4rem; font-weight: bold; color: #333;}
#history .layout>.lists>ul>li .box>.intro{padding-top:20px; margin: 0 auto;font-size: 1.4rem;font-weight: 200;  line-height: 2rem; color: #666;}
#history .layout>.lists>ul>li:nth-child(even) .years{left: auto; right: 54%;}
#history .layout>.lists>ul>li:nth-child(even) .box{ float: right;}
#history .layout>.lists>ul>li:nth-child(even) .box:after{ left: -15px; right: auto; border-right: 15px solid #f1f9ff; border-left: 0;}
#history .layout>.lists>ul>li:hover .drop{background: #00a2f5;}
#history .layout>.lists>ul>li:hover .drop>i{color: #fff;}
#history .layout>.lists>ul>li:hover .years{color: #00a2f5;}



#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>.intro{font-size: 1.4rem; }

}

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

    #history .title>h3{ font-size: 3.2rem;}
    #history .describe{ width: 80%;}

    #history .layout>.lists>ul>li .box>.tit { font-size: 2.2rem; line-height: 2.4rem;}
    #history .layout>.lists>ul>li .box{ padding: 30px; }
    #history .layout>.lists>ul>li .box>.intro { font-size: 1.3rem;}


}


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

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

    #history .layout>.lists>ul:after{ left: 0;width: 2px;transform: translateX(0);}
    #history .layout>.lists>ul>li .drop{ left:-25px; top: 10px; width: 50px;height: 50px; line-height: 40px; transform: translateX(0); }
    #history .layout>.lists>ul>li .drop>i{font-size: 2rem;}
    #history .layout>.lists>ul>li .years { display: none; left: 30px; top: 20px; }
    #history .layout>.lists>ul>li .box>.years{display: block; position: relative; left: 0!important;top: 0!important;  right: auto!important; padding-bottom: 5px; font-size: 1.8rem; color: #00a2d4;}
    #history .layout>.lists>ul>li .box>.tit { font-size: 2rem; line-height: 2rem;}
    #history .layout>.lists>ul>li .box{ width: 90%; float: right;text-align: left; padding: 30px;}
    #history .layout>.lists>ul>li .box:after{ left: -15px; right: auto; top: 25px; border-right: 15px solid #f1f9ff; border-left: 0;}
    #history .layout>.lists>ul>li:nth-child(even) .box{ float: right;}
    #history .layout>.lists>ul>li:nth-child(even) .years{left: 30px; right: auto; top: 20px;}
}

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

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


    #history .describe{ width: 100%;font-size: 1.2rem; line-height: 2rem;}
    #history .layout>.lists>ul>li .box{ width: 86%;}


}


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

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

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

}