/* CSS Document */
@charset "utf-8";
*{margin:0; padding:0; font-family: Arial, 微软雅黑, Microsoft YaHei; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: none; }
p { text-align: justify; margin-bottom: 0; }
ul, ol { list-style-type: none; margin-bottom: 0; }
img { border: 0; max-width: 100%; object-fit: cover;}
.clear { clear: both; }
html { overflow-x: hidden; font-size: 62.5%;}
body { overflow: hidden; height:100%; position: relative; font-size: 1em; }
/* html.on { overflow: hidden; height: 100%; } */
.h60 { height: 60px; clear: both; }
.h120 { height: 120px; clear: both; background: #eee; }
/* input, buttom, textarea { -webkit-appearance: none; outline: none; } */
/* input[type=radio], input[type=checkbox] { border: none !important; } */
select { outline: none }
.fl { float: left; }
.fr { float: right; }
*:focus{ border:none; outline:none;box-shadow: none;}

::-webkit-scrollbar-track{background-color:#f7f7f7}
::-webkit-scrollbar{width:3px; height: 3px;}
::-webkit-scrollbar-thumb{background-color:#c1c1c1}

@font-face {
    font-family: HanSans_CN;
    src: url(../fonts/ses.ttf);
}

.header{ height: 70px; line-height: 70px; z-index: 9; width: 100%; background: #1c1922; display: flex; align-items: center; flex-wrap: wrap; padding: 0 150px;}
.header .logo{  width: 190px; margin-right: 50px;}
.header .pc-nav{ flex: 1;}
.header .pc-nav ul{ display: flex; align-items: center; flex-wrap: wrap;}
.header .pc-nav li{ margin-right: 45px;}
.header .pc-nav li a{ display: block; font-size: 1.8em; line-height: 40px; text-align: center; letter-spacing: 5px; color: #fff;}
.header .pc-nav li.on a{ font-weight: bold;}

.header .nav-btn { height: 60px; line-height: 60px; position:relative; z-index:999; float:right; padding:0;}
.header .nav-btn .nav-icon { width: 26px; height: 24px; overflow: hidden; position: relative; top: 50%; float: right; transform:translateY(-50%); z-index: 9; }
.header .nav-btn .nav-icon span { display: inline-block; width: 26px; height: 2px; background: #c5242a; border-radius: 6px; position: absolute; left: 0; transition: all 0.3s linear 0s;}
.header .nav-btn .nav-icon span:nth-child(1) { top: 0; }
.header .nav-btn .nav-icon span:nth-child(2) { width: 16px; top: 10px; }
.header .nav-btn .nav-icon span:nth-child(3) { top: 20px }
.header .nav-active .nav-icon span:nth-child(2) { width: 26px; }
.header .nav-active .nav-icon span { background: #fff; }

.nav { position: fixed; width: 100%; height: 100%; top: 0; right: -100%; background: #fff; transition: all 0.2s linear 0s; z-index:99;}
.nav.on { right: 0; }
.nav .nav-top { background: #c5242a; font-size: 1.6em; color: #fff; padding: 0 20px; text-align:left; height: 60px; line-height: 60px;}
.nav ul{ overflow-x:hidden; height: 91%;}
.nav li{ width: 100%; line-height: 50px; border-bottom: 1px solid #ccc; position: relative;}
.nav li>a { display: inline-block; width: 80%; padding-left: 30px; height: 100%; font-size: 1.4em; color: #333; }
.nav li i{ position: absolute; font-size: 1.8em; color: #333; right: 20px; top: 18px; transition: all .3s;}
.nav li.on > i, .nav li dd.on > i{ transform: rotate(90deg);}
.nav li.on > a{ color: #c5242a;}
.nav li dl { margin-bottom: 0; display: none; background: #f2f2f2; }
.nav li dd { border-bottom: 1px dashed #ccc; position: relative;}
.nav li dd i{ top: 14px;}
.nav li dd:last-child { border-bottom: none; }
.nav li dd a { display: inline-block; width: 80%; line-height: 45px; text-indent: 4em; font-size: 1.4em; color: #333; }
.nav li dd.on > a{ color: #c5242a;}
/* .nav li dd .nav-box{ display: none; }
.nav li dd .nav-box a{ border-top: 1px dashed #ccc; text-indent: 6em; }
.nav li dd .nav-box a:hover{ color: #c5242a;} */
.nav-bg{ position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.35); left: 0; top: 0; display:none;}
.nav-bg.on{ display:block;}

.banner{ position: relative; height: 470px; width: 100%; overflow: hidden; z-index: 0;}
.banner .swiper-container, .banner .swiper-wrapper, .banner .swiper-slide{ width: 100%; height: 100%;}
.banner .swiper-slide a{ display: block; position: relative; width: 100%; height: 100%; overflow: hidden;}
.banner .swiper-slide img{ position: absolute; width: 100%; height: 100%;}
.banner .swiper-button-prev{ left: 15%;}
.banner .swiper-button-next{ right: 15%;}
.banner .swiper-button-next, .banner .swiper-button-prev{ width: 40px; height: 80px; border-radius: 4px; margin-top: -40px; transition: all .3s;}
.banner .swiper-button-next::after, .banner .swiper-button-prev::after{ display: none;}
.banner .swiper-button-next i, .banner .swiper-button-prev i{ color: #fff; font-size: 5.2em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.banner .swiper-pagination{ bottom: 20px;}
.banner .swiper-pagination-bullet{ width:14px; height:14px;  opacity:1; border-radius:10px; background:#fff; margin:0 10px !important;}
.banner .swiper-pagination-bullet-active{ background:#bd1d25;  width:60px;}

.index-title{ line-height: 1; font-weight: bold; display: flex; justify-content: center; flex-direction: column; text-align: center;}
.index-title .cn{ font-size: 5em; color: #434343; position: relative;}
.index-title .cn span{ color: #be1920;}
.index-title .en{ display: inline-block; color: #c9c9c9; font-size: 3.5em; margin-top: 15px;}

.i-about{ padding: 50px 0 30px;}
.i-about .index-title{ align-items: flex-end; flex-direction: row; justify-content: flex-start;}
.i-about .index-title .en{ padding-left: 20px; margin-top: 0;}
.i-about .text{ font-size: 1.4em; line-height: 28px; color: #000; margin-top: 15px; text-indent: 2em;}
.i-about .btns{ text-align: right; margin-top: 10px;}
.i-about .btns a{ display: inline-block; width: 90px; height: 30px; line-height: 30px;     background: #be1920; font-size: 1.2em; color: #fff; text-align: center;}
.i-about .btns a:hover{ color: #fd8200;}

.i-work{ padding: 40px 0 25px; background: url(../images/iworks-bg.jpg);}
.i-work .text{ font-size: 2.2em; color: #b5b5b5; line-height: 1; text-align: center; margin-top: 20px;}
.i-work .text span{ font-size: 3.4rem; font-family: "方正大黑简体";}
.i-work .hd{ margin-top: 40px;}
.i-work .hd ul{ display: flex; flex-wrap: wrap; justify-content: center;}
.i-work .hd li{ width: 135px; height: 45px; float: left; margin-right: 15px; border-radius: 30px; display: block; font-size: 1.6em; text-align: center; line-height: 45px; color: #333;}
.i-work .hd li:last-child{ margin-right: 0;}
.i-work .hd li.on, .i-work .hd li:hover{ background: #bc1e23; color: #fff;}
.i-work .bd{ margin-top: 30px;}
.i-work .bd .list{ overflow: hidden;}
.i-work .bd .list ul{ display: flex; flex-wrap: wrap;}
.i-work .bd .list li{ width: calc((100% - 10px) / 3); margin-right: 5px; height: 224px; margin-top: 15px; position: relative;}
.i-work .bd .list li:nth-child(3n){ margin-right: 0;}
.i-work .bd .list li .img{ width: 100%; height: 100%; position: relative; z-index: 0; overflow: hidden;}
.i-work .bd .list li .img img{ position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s;}
.i-work .bd .list li:hover .img img{ transform: translate(-50%,-50%) scale(1.1);}
.i-work .bd .list li .t{ position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; background: rgba(0,0,0,.5); font-size: 1.4em; color: #fff; text-align: center;}

.i-work .bd .list-ys{ display: flex; flex-wrap: wrap; padding-top: 7px;}
.i-work .bd .list-ys .top{ flex: 1; margin-right: 5px; margin-top: 8px; position: relative;}
.i-work .bd .list-ys .top .img{ width: 100%; height: 100%; position: relative; z-index: 0; overflow: hidden;}
.i-work .bd .list-ys .top .img img{ position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s;}
.i-work .bd .list-ys .top:hover .img img{ transform: translate(-50%,-50%) scale(1.1);}
.i-work .bd .list-ys .top .t{ position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; background: rgba(0,0,0,.5); font-size: 1.4em; color: #fff; text-align: center;}
.i-work .bd .list-ys ul{ width: 55.55%; display: flex; flex-wrap: wrap;}
.i-work .bd .list-ys li{ width: calc((100% - 5px) / 2); margin-right: 5px; height: 224px; margin-top: 8px; position: relative;}
.i-work .bd .list-ys li:nth-child(2n){ margin-right: 0;}
.i-work .bd .list-ys li .img{ width: 100%; height: 100%; position: relative; z-index: 0; overflow: hidden;}
.i-work .bd .list-ys li .img img{ position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s;}
.i-work .bd .list-ys li:hover .img img{ transform: translate(-50%,-50%) scale(1.1);}
.i-work .bd .list-ys li .t{ position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 40px; line-height: 40px; background: rgba(0,0,0,.5); font-size: 1.4em; color: #fff; text-align: center; margin: 0;}

.i-brand{ background: url(../images/ibrand-bg.jpg) no-repeat center; background-size: cover; padding: 40px 0 110px;}
.i-brand .index-title .en{ color: #434343;}
.i-brand .text{ font-size: 2.8em; color: #434343; line-height: 1; text-align: center; margin-top: 20px;}
.i-brand .text span{ font-size: 4.5rem; font-family: "方正大黑简体";}
.i-brand .frame{ overflow: hidden; margin-top: 10px}
.i-brand .frame .mySwiper{ padding: 0 100px;}
.i-brand .frame .list{ overflow: hidden; height: 400px;}
.i-brand .frame .list .swiper-slide{ height: calc(100% / 4); display: flex; align-items: center; justify-content: center;}
.i-brand .frame .swiper-button-next, .i-brand .frame .swiper-button-prev{ width: 100px; opacity: 1;}
.i-brand .frame .swiper-button-next::after, .i-brand .frame .swiper-button-prev::after{ display: none;}
.i-brand .frame .swiper-button-next{ right: 0; background: url(../images/right.png) no-repeat center;}
.i-brand .frame .swiper-button-prev{ left: 0; background: url(../images/left.png) no-repeat center;}
.i-brand .video-box{ margin-top: 50px; padding: 0 150px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.i-brand .video-box .video{ width: 460px; height: 260px;}
.i-brand .video-box .frame{ width: 400px; margin-top: 20px; padding: 20px 0;}
.i-brand .video-box .frame .cn{ font-size: 2.6em; font-weight: bold; color: #434343; line-height: 1;}
.i-brand .video-box .frame .cn span{ color: #be1920;}
.i-brand .video-box .frame .en{ font-size: 2.6em; font-weight: bold; color: #434343; line-height: 1; margin-top: 20px;}

.i-behind{ padding: 45px 0 40px;}
.i-behind .text{ font-size: 2.2em; color: #b5b5b5; line-height: 1; text-align: center; margin-top: 20px;}
.i-behind .text span{ font-size: 3.4rem; font-family: "方正大黑简体";}
.i-behind .box{ margin-top: 40px;}
.i-behind .box .mySwiper{ padding: 0 50px;}
.i-behind .box .list{ overflow: hidden;}
.i-behind .box .swiper-slide{ width: 16.6667%; padding: 0 7.5px; overflow: hidden;}
.i-behind .box .swiper-slide a{ display: block; position: relative;}
.i-behind .box .swiper-slide .img{ width: 100%; height: 240px; position: relative; overflow: hidden; z-index: 0;}
.i-behind .box .swiper-slide .img img{ position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s linear 0s;}
.i-behind .box .swiper-slide:hover .img img{ transform: translate(-50%,-50%) scale(1.1);}
.i-behind .box .swiper-slide .t{ position: absolute; width: 100%; height: 30px; line-height: 30px; font-size: 1.4em; color: #fff; text-align: center; background: rgba(0,0,0,.5); left: 0; bottom: -30px; transition: all .3s linear 0s;}
.i-behind .box .swiper-slide:hover .t{ bottom: 0;}
.i-behind .box .swiper-button-next, .i-behind .box .swiper-button-prev{ width: 50px; height: 140px; margin-top: -70px; opacity: 1;}
.i-behind .box .swiper-button-next::after, .i-behind .box .swiper-button-prev::after{ display: none;}
.i-behind .box .swiper-button-next{ right: 0; background: url(../images/sprites1.png) no-repeat center;}
.i-behind .box .swiper-button-prev{ left: 0; background: url(../images/sprites2.png) no-repeat center;}


.i-news{ overflow: hidden;}
.i-news .index-title{ background: url(../images/news-title-bg.jpg) no-repeat center; padding: 30px 0 20px;}
.i-news .index-title .cn, .i-news .index-title .en{ color: #fff;}
.i-news .index-title .cn span{ color: #fff45c;}
.i-news .hd{ margin: 30px 0;}
.i-news .hd ul{ display: flex; flex-wrap: wrap; justify-content: center;}
.i-news .hd li{ height: 40px; line-height: 40px; padding: 0 20px; border-left: 1px solid #e7e7e7; font-size: 1.8em; color: #333;}
.i-news .hd li a{ display: inline-block; color: inherit;}
.i-news .hd li:hover{ color: #be1920;}
.i-news .hd li:first-child{ border-left: none;}
.i-news .bd{ display: flex; flex-wrap: wrap;}
.i-news .bd .box{ width: calc((100% - 40px) / 3); margin-left: 20px;}
.i-news .bd .box:first-child{ margin-left: 0;}
.i-news .bd .box .news-hot{ overflow: hidden;}
.i-news .bd .box .news-hot .img{ width: 100%; height: 180px; position: relative; overflow: hidden;}
.i-news .bd .box .news-hot .img img{ position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s;}
.i-news .bd .box .news-hot:hover .img img{ transform: translate(-50%,-50%) scale(1.1);}
.i-news .bd .box .news-hot .text{ border-bottom: 1px solid #333;}
.i-news .bd .box .news-hot .text .t{ font-size: 1.4em; margin: 15px 0 10px; line-height: 25px; font-weight: bold; color: #333; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; }
.i-news .bd .box .news-hot .text .date{ font-size: 1.2em; color: #fd8200; padding-bottom: 25px;}
.i-news .bd .box .news-hot .text .t:hover{ color: #fd8200;}
.i-news .bd .box .list{ overflow: hidden; margin-top: 10px;}
.i-news .bd .box .list li{ height: 25px; line-height: 25px; font-size: 1.4em; color: #333; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.i-news .bd .box .list li a{ color: inherit;}
.i-news .bd .box .list li span{ display: inline-block; margin-right: 15px;}
.i-news .bd .box .list li:hover{ color: #fd8200;}
.i-news .btns{ text-align: center; margin-top: 30px;}
.i-news .btns a{ display: inline-block; width: 100px; height: 30px; line-height: 30px; border: 1px solid #333; text-align: center;}
.i-news .btns a:hover{ border-color: #fd8200; color: #fd8200;}

.i-contact{ margin-top: 70px; padding-bottom: 10px; overflow: hidden;}
.i-contact .index-title .cn::before, .i-contact .index-title .cn::after{ content: ""; position: absolute; background: #d7787b; top: 64%; transform: translateY(-50%); height: 1px; width: 40.5%;}
.i-contact .index-title .cn::before{ left: 0;}
.i-contact .index-title .cn::after{ right: 0;}
.i-contact .box{ display: flex; flex-wrap: wrap; margin-top: 5px;}
.i-contact .box .message{ width: 32.09%;}
.i-contact .box .message li{ display: flex; flex-wrap: wrap; align-items: center; min-height: 30px; margin-top: 10px;}
.i-contact .box .message li .t{ font-size: 1.2em; color: #434343; width: 80px;}
.i-contact .box .message li .p{ flex: 1; font-size: 1.2em; color: #333; overflow: hidden; display: flex; flex-wrap: wrap;}
.i-contact .box .message li .p > input{ width: 100%; height: 30px; border: none; padding: 0 15px; border: 1px solid #999;}
.i-contact .box .message li .p label{ margin-bottom: 0; font-weight: normal; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.2em; margin: 2px 20px 2px 0;}
.i-contact .box .message li .p label .name{ margin-top: 5px; text-align: center;}
.i-contact .box .message li .p input[type="checkbox"]{ margin-top: 0; margin-left: 15px;}
.i-contact .box .message li:last-child{ margin-top: 30px;}
.i-contact .box .message li:last-child input[type="submit"]{ width: 90px; height: 30px; line-height: 30px; text-align: center; background: #be1920; font-size: 1.6em; color: #fff; border: none; margin-right: 10px;}
.i-contact .box .message li:last-child p{ font-size: 12px; color: #a0a0a0; line-height: 30px;}
.i-contact .box .gzh{ width: 25.84%; padding: 30px 30px 0; margin: 0 22px; background: #f0f0f0;}
.i-contact .box .gzh .t{ font-size: 1.8em; color: #333; line-height: 40px; margin: 20px 0 10px;}
.i-contact .box .gzh .t p{ text-align: center;}
.i-contact .box .contact{ width: 38.34%; border: 1px solid #333; padding: 20px;}
.i-contact .box .contact .title{ font-weight: bold; color: #333;}
.i-contact .box .contact .title .cn{ font-size: 1.8em; line-height: 36px;}
.i-contact .box .contact .title .en{ font-size: 1.4em; line-height: 30px; margin-top: 10px;}
.i-contact .box .contact .text{ font-size: 1.4em; line-height: 26px; color: #333; margin-top: 20px;}
.i-contact .box .contact .qq{ margin-top: 15px;}

.foot-copy{ background: #000; padding: 12px 0; line-height: 30px;}
.foot-copy p{ text-align: center; font-size: 1.2em; color: #a0a0a0; letter-spacing: 1px;}
.foot-copy a{ color: inherit; display: inline-block;}
.foot-copy a:hover{ color: #fd8200;}


.page-banner{ height: 400px;}

.page-top{ height: 40px; line-height: 40px; border-bottom: 1px dotted #d3d3d3;}
.page-top .mbx{ font-size: 1.2em; color: #333; float: left;}
.page-top .mbx a{ display: inline-block; color: inherit; margin: 0 5px;}
.page-top .mbx a:first-child{ margin-left: 0;}
.page-top .mbx a:hover{ color: #fd8200;}
.page-top .back{ float: right;}
.page-top .back a{ display: inline-block; color: #9e9e9e; position: relative; padding-left: 20px; font-size: 1.4em;}
.page-top .back a i{ position: absolute; font-size: 1.4em; left: 0; top: 50%; transform: translateY(-50%);}
.page-top .back a:hover{ color: #fd8200;}

.page-nav{ padding: 20px 0; border-bottom: 1px solid #dcdcdc;}
.page-nav ul{ display: flex; flex-wrap: wrap;}
.page-nav li{ margin-right: 5px;}
.page-nav li a{ display: inline-block; width: 200px; height: 50px; line-height: 50px; text-align: center; background: #eee; color: #333; font-size: 1.6em;}
.page-nav li.on a, .page-nav li:hover a{ background: #bc1e23; color: #fff;}

.page-title{ padding: 20px 0; border-bottom: 1px solid #dcdcdc; overflow: hidden;}
.page-title .en, .page-title .cn{ font-size: 1.6em; color: #959595; text-align: center; line-height: 34px; margin: 0; font-weight: bold; text-transform: uppercase; }
.page-title .cn{ margin-top: 10px;}
.page-title .t{ font-size: 1.6em; color: #959595; text-align: center; margin: 0; line-height: 50px;}


.page-box{ overflow: hidden; padding-bottom: 20px; width: 100%;}

.about-box{ padding: 20px 0; font-size: 1.4em; color: #333; line-height: 28px;}
.about-box p+p{ margin-top: 15px;}
.about-box img{ max-width:100%; height:auto !important; }

.case-nav{ display: flex; flex-wrap: wrap; justify-content: center; margin-top: 40px;}
.case-nav ul{ display: flex; flex-wrap: wrap;}
.case-nav li{ margin-right: 15px;}
.case-nav li a{ display: inline-block; width: 135px; height: 45px; line-height: 45px; border-radius: 30px; background: #eee; color: #333; font-size: 1.6em; text-align: center;}
.case-nav li.on a, .case-nav li:hover a{ background: #be1920; color: #fff;}

.case-hot{ margin-top: 30px;}
.case-hot a{ display: flex; flex-wrap: wrap;}
.case-hot .text{ flex: 1;}
.case-hot .text .t{ font-size: 2.2em; color: #333; line-height: 50px; margin: 20px 0 10px; font-weight: bold;}
.case-hot .text .p{ font-size: 1.2em; color: #959595; line-height: 30px; font-weight: bold; padding: 10px 0;}
.case-hot .img{ width: calc((100% - 60px) / 3); height: 300px; position: relative; overflow: hidden;}
.case-hot .img img{ position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s;}
.case-hot .img:hover img{ transform: translate(-50%,-50%) scale(1.1);}

.case-list{ margin-top: 45px;}
.case-list ul{ display: flex; flex-wrap: wrap;}
.case-list li{ width: calc((100% - 60px) / 3); margin-right: 30px; margin-bottom: 30px;}
.case-list li:nth-child(3n){ margin-right: 0;}
.case-list li .img{ width: 100%; height: 230px; overflow: hidden; position: relative;}
.case-list li .img img{ position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: all .3s;}
.case-list li:hover .img img{ transform: translate(-50%,-50%) scale(1.1);}
.case-list li .title{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background: rgba(0,0,0,.4); height: 30px; margin-top: 15px; padding: 0 8px;}
.case-list li .title .t{ margin: 0; font-size: 1.6em; color: #fff; flex: 1; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.case-list li .title .date{ font-size: 1.2em; color: #fff; line-height: 1; width: 130px; text-align: right;}


.case-con{ overflow: hidden; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #999;}
.case-con .title{ font-size: 2.2em; line-height: 50px; color: #000; margin: 0 0 15px; font-weight: bold;}
.case-con .bq{ color: #959595; font-size: 1.2em; line-height: 24px; }
.case-con .text{ margin-top: 20px; font-size: 1.4em; color: #333; line-height: 24px;}
.case-con .text p+p{ margin-top: 15px; }
.case-con .text img{ max-width: 100%; height: auto !important; }

.brand-list{ margin-top: 60px;}
.brand-list ul{ display: flex; flex-wrap: wrap;}
.brand-list li{ width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom: 60px; text-align: center;}
.brand-list li:nth-child(4n){ margin-right: 0;}

.yy-box{ width: 385px; margin: 30px auto 50px;}
.yy-box li{ display: flex; flex-wrap: wrap; align-items: center; min-height: 30px; margin-top: 10px;}
.yy-box li .t{ font-size: 1.2em; color: #434343; width: 80px;}
.yy-box li .p{ flex: 1; font-size: 1.2em; color: #333; overflow: hidden; display: flex; flex-wrap: wrap;}
.yy-box li .p > input { width: 100%; height: 30px; border: none; padding: 0 15px; border: 1px solid #999;}
.yy-box li .p label{ margin-bottom: 0; font-weight: normal; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.2em; margin: 2px 20px 2px 0;}
.yy-box li .p label .name{ margin-top: 5px; text-align: center;}
.yy-box li .p input[type="checkbox"]{ margin-top: 0; margin-left: 15px;}
.yy-box li:last-child{ margin-top: 30px;}
.yy-box li:last-child input[type="submit"]{ width: 90px; height: 30px; line-height: 30px; text-align: center; background: #be1920; font-size: 1.6em; color: #fff; border: none; margin-right: 10px;}
.yy-box li:last-child p{ font-size: 12px; color: #a0a0a0; line-height: 30px;}


.news-list{ margin-top: 40px;}
.news-list ul{ display: flex; flex-wrap: wrap; margin: 0 -30px;}
.news-list li{ width: 33.3333%; padding: 10px 30px; margin-bottom: 30px;}
.news-list li:nth-child(-n+4){ width: 50%;}
.news-list li .title{ font-size: 1.6em; color: #000; font-weight: bold; line-height: 26px; margin: 0; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.news-list li .date{ font-size: 1.2em; color: #535353; line-height: 24px; margin-top: 10px;}
.news-list li .p{ font-size: 1.2em; color: #535353; line-height: 24px; overflow:hidden; text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}


.contact-box{ font-size: 1.2em; color: #333; margin-top: 20px; line-height: 20px;}

.map{ max-width: 1000px; height: 550px; margin-top: 60px; border: 1px solid #ccc;}
.map img{ max-width: none;}













.footer{ background: url(../images/foot-bg.jpg) repeat-x; background-size: contain;}
.footer .container{ position: relative;}
.footer .container .foot-gotop{ position: absolute; top: 0; right: 0;}
.foot-link{ padding: 30px 0 15px;}
.foot-link span{ font-size: 2.5em; font-family: "Cambria"; color: #a0a0a0;}
.foot-link a{ color: #a0a0a0; font-size: 1.4em; margin-left: 15px;}
.foot-box{ display: flex; flex-wrap: wrap; margin: 15px 0 5px;}
.foot-box .foot-wx{ width: 120px;}
.foot-box .foot-wx .t{ font-size: 1.2em; color: #a0a0a0; line-height: 25px; margin-top: 5px; text-align: center;}
.foot-box .foot-contact{ padding: 0 40px; width: 41.67%;}
.foot-box .foot-contact li{ display: flex; flex-wrap: wrap; align-items: center; font-size: 1.2em; color: #a0a0a0; line-height: 24px; margin-bottom: 12px; position: relative; padding-left: 35px;}
.foot-box .foot-contact li img{ position: absolute; width: 25px; height: 25px; left: 0; top: 50%; transform: translateY(-50%);}
.foot-box .foot-nav{ flex: 1;}
.foot-box .foot-nav ul{ display: flex; flex-wrap: wrap;}
.foot-box .foot-nav li{ width: 33.33%; line-height: 45px; color: #a0a0a0; border: 1px solid #9e9e9e; margin-right: -1px; margin-top: -1px;}
.foot-box .foot-nav li a{ display: inline-block; color: inherit; text-align: center; width: 100%; font-size: 1.4em;}
.foot-box .foot-nav li:hover a{ color: #fd8200;}


.pager-list{ text-align:center; margin-top: 10px; margin-bottom: 60px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.pager-list .text{ font-size:14px; color:#333; margin-right: 15px;}
.pager-list ul{ list-style-type:none; margin:0; padding:0; display:inline-block;}
.pager-list li{ float:left; padding:0 5px;}
.pager-list li>*{ display:inline-block; font-size:14px; color:#333 !important; height:36px; line-height:36px !important; padding:0 16px!important;  background:#f4f4f4 !important; border-radius:0 !important; border: none !important;}
.pager-list li a:hover{ background: #c5242a !important; color:#fff !important; border:1px solid #c5242a;}
.pager-list li.active>*{ color:#fff !important; background:#c5242a !important; border:1px solid #ddd;}
.pager-list li.disabled>*{ cursor:auto; background:#f4f4f4; color:#333;}
.pager-list li.active>span:hover, .pager-list li.active>a:hover{ background:#c5242a !important; border:1px solid #c5242a; color: #fff !important;}
.pager-list li i{ font-size: 1.2em; position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%;}


.pager{ width: 100%; line-height: 32px; margin: 30px 0 0;}
.pager .next, .pager .prev{ width: 100%; text-align: left; font-size: 1.4em; color: #333; display: flex;}
.pager a, .pager span{ color: inherit; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.pager .next>a, .pager .next>span{ float: inherit;}
.pager a:hover{ color: #c5242a; text-decoration: underline;}








@media (min-width: 1366px){
.container{ width: 1200px; padding: 0;}

}
@media (max-width:1365px) and (min-width: 1200px){
.header{ padding: 0 60px;}
.banner .swiper-button-next{ right: 10%;}
.banner .swiper-button-prev{ left: 10%;}

.i-brand .video-box{ padding: 0 100px;}

.i-contact .box .contact{ width: 37.34%;}

}
@media (max-width:1199px) and (min-width:992px){
.header{ padding: 0 60px;}
.header .logo{ width: 170px; margin-right: 30px;}
.header .pc-nav li{ margin-right: 30px;}
.header .pc-nav li a{ font-size: 1.6em;}

.banner{ height: 320px;}
.banner .swiper-button-next{ right: 10%;}
.banner .swiper-button-prev{ left: 10%;}

.index-title .cn{ font-size: 4em;}
.index-title .en{ font-size: 2.8em;}

.i-work .text{ font-size: 1.8em;}
.i-work .text span{ font-size: 2.8rem;}
.i-work .hd li{ width: 120px;}

.i-brand .text{ font-size: 2.4em;}
.i-brand .text span{ font-size: 3.2rem;}
.i-brand .video-box{ padding: 0 10px;}

.i-behind .text{ font-size: 1.8em;}
.i-behind .text span{ font-size: 2.8rem;}
.i-behind .box .swiper-slide{ width: 25%;}

.i-contact .box{ margin-top: 15px;}
.i-contact .box .gzh .t{ font-size: 1.6em;}
.i-contact .box .contact{ width: 37.34%;}

.page-banner{ height: 360px;}






}
@media (max-width:991px) and (min-width: 768px){
.header{ padding: 0 30px; position: fixed; background: #1c1922; width: 100%; z-index: 999; }
.header .logo{ flex: 1; margin-right: 0;}
.header .logo img{ height: 70px;}
.header .pc-nav{ display: none;}
.nav .nav-top{ height: 70px; line-height: 70px;}

.banner{ height: 230px; margin-top: 70px;}
.banner .swiper-button-next{ right: 5%;}
.banner .swiper-button-prev{ left: 5%;}
.banner .swiper-button-next i, .banner .swiper-button-prev i{ font-size: 4.2em;}

.index-title .cn{ font-size: 3em;}
.index-title .en{ font-size: 2em;}

.i-work .text{ font-size: 1.6em;}
.i-work .text span{ font-size: 2.8rem;}
.i-work .hd li{ width: 100px; font-size: 1.4em; height: 40px; line-height: 40px;}

.i-brand .text{ font-size: 2em;}
.i-brand .text span{ font-size: 2.6rem;}
.i-brand .frame .mySwiper{ padding: 0 70px;}
.i-brand .frame .swiper-button-next, .i-brand .frame .swiper-button-prev{ width: 70px;}
.i-brand .video-box{ padding: 0 10px;}

.i-behind .text{ font-size: 1.8em;}
.i-behind .text span{ font-size: 2.8rem;}
.i-behind .box .swiper-slide{ width: 33.3333%;}

.i-contact .box{ margin-top: 15px;}
.i-contact .box .message{ width: 60%; padding-right: 30px;}
.i-contact .box .gzh{ width: 40%; margin: 0;}
.i-contact .box .gzh .t{ font-size: 1.6em;}
.i-contact .box .contact{ width: 100%; margin-top: 30px;}

.page-banner{ height: 270px; margin-top: 70px;}
.page-nav li a{ width: 160px; height: 45px; line-height: 45px; font-size: 1.4em;}

.case-nav li{ margin-right: 10px;}
.case-nav li a{ font-size: 1.4em; width: 110px; height: 40px; line-height: 40px;}

.case-hot .img{ width: calc((100% - 30px) / 2);}
.case-list li{ width: calc((100% - 30px) / 2);}
.case-list li:nth-child(3n){ margin-right: 30px;}
.case-list li:nth-child(2n){ margin-right: 0;}


.brand-list li{ width: calc((100% - 40px) / 3);}
.brand-list li:nth-child(4n){ margin-right: 20px;}
.brand-list li:nth-child(3n){ margin-right: 0;}

.news-list li{ width: 50%;}
.news-list li:nth-child(-n+4){ width: 100%;}





.foot-box .foot-contact{ flex: 1;}
.foot-box .foot-nav{ display: none;}

}
@media (max-width: 767px){
.header{ padding: 0 15px; height: 60px; line-height: 60px; position: fixed; background: #1c1922; width: 100%; z-index: 999; }
.header .logo{ flex: 1; margin-right: 0;}
.header .logo img{ height: 60px;}
.header .pc-nav{ display: none;}

.banner{ height: 140px; margin-top: 60px;}
.banner .swiper-button-next{ right: 3%;}
.banner .swiper-button-prev{ left: 3%;}
.banner .swiper-button-next i, .banner .swiper-button-prev i{ font-size: 3.2em;}
.banner .swiper-pagination-bullet{ width: 8px; height: 8px; margin: 0 6px !important;}
.banner .swiper-pagination-bullet-active{ width: 30px;}

.index-title .cn{ font-size: 1.8em;}
.index-title .en{ font-size: 1.4em; margin-top: 10px;}

.i-about{ padding: 30px 0 25px;}
.i-about .index-title .en{ padding-left: 10px;}

.i-work{ padding: 30px 0 25px;}
.i-work .text{ font-size: 1.4em; line-height: 24px; margin-top: 15px;}
.i-work .text span{ font-size: 2.2rem;}
.i-work .hd{ margin-top: 20px;}
.i-work .hd li{ width: 33.33%; margin-right: 0; font-size: 1.4em; height: 40px; line-height: 40px;}
.i-work .bd{ margin-top: 10px;}
.i-work .bd .list-ys .top{ flex: none; width: 100%; height: 224px; margin-right: 0;}
.i-work .bd .list-ys ul{ width: 100%;}
.i-work .bd .list li{ width: calc((100% - 5px) / 2);}
.i-work .bd .list li:nth-child(3n){ margin-right: 5px;}
.i-work .bd .list li:nth-child(2n){ margin-right: 0;}

.i-brand{ padding: 30px 0;}
.i-brand .text{ font-size: 1.4em; line-height: 24px; margin-top: 15px; padding: 0 20px;}
.i-brand .text span{ font-size: 2.2rem;}
.i-brand .frame .mySwiper{ padding: 0;}
.i-brand .frame .list{ height: 310px;}
.i-brand .frame .swiper-button-next, .i-brand .frame .swiper-button-prev{display: none;}
.i-brand .video-box{ padding: 0 10px;}
.i-brand .video-box .video{ width: 100%; height: 230px;}
.i-brand .video-box .frame .cn, .i-brand .video-box .frame .en{ font-size: 1.8em;}
.i-brand .video-box .frame .en{ margin-top: 10px;}

.i-behind{ padding: 30px 0;}
.i-behind .text{ font-size: 1.4em; line-height: 24px; margin-top: 15px; padding: 0 20px;}
.i-behind .text span{ font-size: 2.2rem;}
.i-behind .box{ margin-top: 20px;}
.i-behind .box .mySwiper{ padding: 0 30px;}
.i-behind .box .swiper-slide{ width: 50%;}
.i-behind .box .swiper-slide .img{ height: 210px;}
.i-behind .box .swiper-button-next, .i-behind .box .swiper-button-prev{ width: 30px; background-size: 16px;}

.i-news .index-title{ padding: 25px 0 20px;}
.i-news .hd{ margin: 20px 0;}
.i-news .hd li{ font-size: 1.5em; height: 35px; line-height: 35px;}
.i-news .bd .box{ width: 100%; margin-left: 0; margin-top: 25px;}
.i-news .bd .box:first-child{ margin-top: 0;}
.i-news .btns{ margin-top: 25px;}

.i-contact{ margin-top: 30px;}
.i-contact .index-title .cn::before, .i-contact .index-title .cn::after{ width: 37.5%;}
.i-contact .box{ margin-top: 15px;}
.i-contact .box .message{ width: 100%; padding-right: 0;}
.i-contact .box .gzh{ width: 100%; margin: 0; margin-top: 30px; padding: 20px 20%;}
.i-contact .box .gzh .img{ padding: 0 25%;}
.i-contact .box .gzh .t{ font-size: 1.4em; line-height: 26px;}
.i-contact .box .contact{ width: 100%; margin-top: 30px;}
.i-contact .box .contact .title .en{ margin-top: 0;}

.foot-copy{ line-height: 22px; padding: 12px 15px;}


.page-banner{ height: 150px; margin-top: 60px;}
.page-nav li{ width: calc((100% - 10px) / 3);}
.page-nav li:nth-child(3n){ margin-right: 0;}
.page-nav li a{ width: 100%; height: 45px; line-height: 45px; font-size: 1.4em;}
.page-top .back a{ font-size: 1.2em; padding-left: 16px;}

.page-title{ padding: 15px 0;}
.page-title .en, .page-title .cn{ font-size: 1.4em; font-weight: normal; line-height: 24px;}
.page-title .cn{ margin-top: 5px;}
.page-title .t{ font-size: 1.4em; line-height: 30px;}

.case-nav{ margin-top: 20px;}
.case-nav li{ margin-right: 10px; width: calc((100% - 20px) / 3); margin-top: 10px;}
.case-nav li:nth-child(3n){ margin-right: 0;}
.case-nav li a{ font-size: 1.4em; width: 100%; height: 40px; line-height: 40px;}

.case-hot .img{ width: calc((100% - 30px) / 2);}
.case-hot .text .t{ font-size: 1.8em; line-height: 30px; margin-top: 10px;}
.case-list{ margin-top: 30px;}
.case-list li{ width: 100%; margin-right: 0; margin-bottom: 25px;}
.case-list li .title .t{ font-size: 1.4em;}

.case-con .title{ font-size: 1.8em; line-height: 30px;}
.case-con .bq{ margin-top: 10px;}

.brand-list{ margin-top: 40px;}
.brand-list li{ width: calc((100% - 20px) / 2); margin-bottom: 40px;}
.brand-list li:nth-child(2n){ margin-right: 0;}

.yy-box{ width: 100%; margin: 30px 0;}

.news-list{ margin-top: 20px;}
.news-list li{ width: 100%; margin-bottom: 0;}
.news-list li:nth-child(-n+4){ width: 100%;}
.news-list li .title{ font-size: 1.5em;}

.map{ height: 350px; margin-top: 30px;}









.foot-link{ padding-top: 40px;}
.foot-box .foot-contact{ flex: 1; padding: 0 0 0 20px;}
.foot-box .foot-nav{ display: none;}

.pager-list{ margin-bottom: 20px;}
.pager-list .text{ margin-bottom: 12px; margin-right: 0; font-size: 12px; text-align: center; width: 100%;}
.pager-list li>*{ height: 30px; line-height: 30px !important; padding: 0 12px!important; font-size: 12px;}

}