@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot@#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.system{ width: 100%; margin: 0 auto; overflow: hidden; }
.system ul li{ width: 50%; float: left; }
.system ul li a{ height: 248px; padding: 38px 112px; margin: 28px; background-color: #fff; display: block; }
.system ul li a img{ width: 268px; height: 168px; float: left; display: block; margin-right: 95px; }
.system ul li a h1{ position: relative; padding-left: 20px; height: 44px; line-height: 44px; font-size: 12px; font-weight: bold; color: #010101; display: block; overflow: hidden; }
.system ul li a h1:after{ position: absolute; top: 0; left: 0; line-height: 44px; font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; content: "\e000"; color: #ee7700; }
.system ul li a span{ width: 154px; height: 36px; line-height: 33px; font-size: 16px; color: #494949; text-align: center; background: url(../images/video.png) no-repeat; float: left; display: block; }
.system ul li a p{ line-height: 32px; font-size: 16px; color: #363636; display: block; }
.system ul li a:hover{ background-color: #ee7700; }
.system ul li a:hover h1{ color: #fff; }
.system ul li a:hover h1:after{ color: #fff; }
.system ul li a:hover p{ color: #fff; }

@media (max-width: 1680px){
    .system{ width: 100%; }
    .system ul li a{ padding: 38px 80px; }
    .sales{ width: 1600px; }
    .nei{ margin: 80px auto 56px auto; }
}
@media (max-width: 1600px){
    .system ul li a{ padding: 38px; }
    .sales{ width: 1440px; }
    .nei{ margin: 60px auto 42px auto; }
    .sale{ width: 1280px; }
    
}
@media (max-width: 1440px){
    .system ul li a img{ margin-right: 40px; }
    .sales{ width: 1366px; }
    .nei{ margin: 50px auto 36px auto; }
    .sale{ width: 1200px; }
    .sale ul li p{ font-size: 14px;  }
    .sale span{ line-height: 32px; font-size: 16px; }
    
}
@media (max-width: 1366px){
    .system ul li a{ padding: 30px; margin: 20px; }
    .sales{ width: 1280px; }
    .nei{ margin: 40px auto 30px auto; }
    .sale{ width: 1024px; margin-left: auto; margin-right: auto; }


}
@media (max-width: 1280px){
    .system ul li a{ padding: 20px; }
    .system ul li a img{ margin-right: 20px; }
    .series{ padding: 100px; }
    .catenas{ padding: 0 100px; }
    .catena{ margin-top: 30px; }
    .about h1{ height: 48px; line-height: 48px; font-size: 24px; }
    .about h2{ width: 360px; }
    .about h3{ font-size: 16px; }
    .about p{ font-size: 16px; }
    .honor ul li a{ line-height: 56px; }
    .History{ padding: 20px 120px; }
    .letter{ padding: 40px 0; }
    .letter span{ margin: 0 30px; }
    .letter p{ line-height: 36px; font-size: 16px; }
    .letter .letters{ width: 346px; height: 180px; }
    .sales{ width: 1200px; }
    .nei{ margin: 40px auto 30px auto; }
}
@media (max-width: 1200px){
    .system ul li a{ height: 168px; padding: 15px; margin: 15px; }
    .system ul li a img{ width: 188px; height: 168px; }
    .system ul li a h1{ padding-left: 20px; height: 40px; line-height: 40px; font-size: 16px; }
    .system ul li a h1:after{ line-height: 40px; }
    .system ul li a span{ font-size: 14px; }
    .system ul li a p{ line-height: 28px; font-size: 14px; }
    .honor ul li a{ line-height: 48px; }
    .History{ padding: 20px 80px; }
    .letter img{ width: 300px; height: 356px;  }
    .sales{ width: 1024px; }
    .nei{ margin: 40px auto 30px auto; }
    .sale{ width: 880px; }
    .sale ul li { width: 50%; }
    .sale ul li p{ line-height: 24px; }
    .sale span{ line-height: 28px; font-size: 14px; }
}
@media (max-width: 1024px){
    .mid{ width: 980px; }
    .for h1{ font-size: 30px; }
    .system{ width: 990px; }
    .system ul li a{ padding: 20px; margin: 10px; }
    .pager{ padding: 30px 0 40px 0; }
    .series{ padding: 60px; }
    .catenas{ padding: 0 60px; }
    .History{ padding: 10px 50px; }
    .sales{ width: 950px; }
    .sale{ width: 800px; }
}


@media (max-width: 767px){
    .system{ width: 100%; }
    .system ul li{ width: 100%; float: none; }
    .system ul li a{ height: auto; padding: 20px; margin: 10px 15px; overflow: hidden; }
    .system ul li a img{ width: 100%; height: auto; float: none; margin: 0; }
    .system ul li a h1{ margin-top: 5px; }
    .system ul li a p{ line-height: 20px; font-size: 14px; }

}