@keyframes aboutTitle { 
  0%{transform: translateY(0px)} 
  50%{transform: translateY(-15px)} 
  100%{transform: translateY(0px)} 
}



@media screen and (max-width:767px) {
    .mainTop{height:auto !important;}
    .gridQ{display:none;}
    .aboutTop{width:90%; margin:0px auto 100px auto; padding-top:150px;}
    .aboutTop h3{ text-align:center; font-size:28px; line-height:32px; margin-bottom:30px;}
    .aboutTop h3 span{animation: aboutTitle 0.8s infinite; font-weight:bold; color:#ed1b24; font-size:40px;}
    .aboutTop p{ font-size:16px; line-height:24px;}
    
    
    .midBg{ height:400px; background:url(/images/aboutBg.jpg) center center no-repeat; background-size:cover; text-align:center; padding:112px 0; box-sizing:border-box; font-size:26px; line-height:35px; color:#fff; font-weight:bold; text-shadow:rgba(0, 0, 0, 0.3) 2px 2px 4px; margin-bottom:100px;}
    
    
    .historyBox > h3{text-align:center; font-size:40px; width:100%; font-weight:bold; color:#ed1b24; padding-bottom:40px;}
    .historyListBox ul {padding:0 30px;}
    .historyListBox ul li{ border-left:1px solid #ddd; padding:0 0 50px 20px;}
    .historyListBox ul li dl dt{font-size:28px; color:#ed1b24; font-weight:bold; margin-bottom:10px; position:relative;}
    .historyListBox ul li dl dt:before{display:block; position:absolute; content:''; width:7px; height:7px; border-radius:7px; background:#ed1b24; top:10px; left:-24px;}
    .historyListBox ul li dl dd{ font-size:14px; line-height:18px; padding-bottom:8px;}
    
}
/*mobile*/

@media screen and (min-width:768px) and (max-width:1240px) {
    
    .gridQ{display:none;}
    .aboutTop{width:84%; margin:0px auto; padding-top:200px;}
    .aboutTop h3{ text-align:center; font-size:55px; line-height:65px; margin-bottom:50px;}
    .aboutTop h3 span{animation: aboutTitle 0.8s infinite; font-weight:bold; color:#ed1b24; font-size:70px;}
    .aboutTop p{ font-size:16px; line-height:24px;}
    
    
    .midBg{ height:400px; background:url(/images/aboutBg.jpg) center center no-repeat; background-size:cover; text-align:center; padding:180px 0; box-sizing:border-box; font-size:40px; color:#fff; font-weight:bold; text-shadow:rgba(0, 0, 0, 0.3) 2px 2px 4px; margin-bottom:200px;}
    .midBg br{display:none;}
    

    .historyBox > h3{text-align:center; font-size:60px; width:100%; font-weight:bold; color:#ed1b24; padding-bottom:55px; }
    .historyListBox ul {padding-left:50px;}
    .historyListBox ul li{ border-left:1px solid #ddd; padding:0 0 50px 30px;}
    .historyListBox ul li dl dt{font-size:45px; color:#ed1b24; font-weight:bold; margin-bottom:10px; position:relative; }
    .historyListBox ul li dl dt:before{display:block; position:absolute; content:''; width:10px; height:10px; border-radius:7px; background:#ed1b24; top:15px; left:-35px;}
    .historyListBox ul li dl dd{ font-size:17px; line-height:21px; padding-bottom:10px;}
    

}
/*tablet*/

@media screen and (min-width:1241px) {       
    
    .aboutTop{width:70%; left:50%; top:26%;	 margin-left:-35%; transform-origin:(50%, 50%);}
    .aboutTop h3{ text-align:center; font-size:70px; line-height:80px; margin-bottom:60px;}
    .aboutTop h3 span{animation: aboutTitle 0.8s infinite; font-weight:bold; color:#ed1b24; font-size:110px;}
    .aboutTop p{ font-size:18px; line-height:24px; text-align: center;}
    
    .bigt {font-size: 18px; font-weight: bold; display: block; margin-bottom: 20px;}
    
    .midBg{ height:500px; background:url(/images/aboutBg.jpg) center center no-repeat; background-size:cover; background-attachment:fixed; text-align:center; padding:225px 0; box-sizing:border-box; font-size:50px; color:#fff; font-weight:bold; text-shadow:rgba(0, 0, 0, 0.3) 2px 2px 4px;}
    .midBg br{display:none;}
    
    .historyBox{width:100%; height:100%; box-sizing:border-box; padding-top:250px;}
    .historyBox > h3{text-align:center; font-size:70px; width:100%; font-weight:bold; color:#ed1b24; border-bottom:1px solid #ddd; padding-bottom:90px; margin-bottom:500px;}
    .historyListBox ul:after{content: ''; display: block; clear: both; visibility: hidden;}
    .historyListBox ul{width:1000%; top:380px;}
    .historyListBox ul li{float:left; margin-right:160px;}
    .historyListBox ul li dl{position:relative; padding-left:180px; min-height:400px;}
    .historyListBox ul li dl dt{position:absolute; left:0px; font-size:60px; color:#ed1b24; font-weight:bold;}
    .historyListBox ul li dl dt:before{display:block; position:absolute; content:''; width:10px; height:10px; border-radius:7px; background:#ed1b24; top:26px; left:-24px;}
    .historyListBox ul li dl dd{ font-size:20px; line-height:28px; padding-bottom:10px;}

    
}   
/*pc*/