@charset "utf-8";
section { width:1400px; position:relative; z-index:50;}
section img { max-width:100%;}
section>ul { position:relative; z-index:10;}

.index_swiper { width:100%; margin-top:-90px; left:50%; transform:translateX(-50%);}
.index_swiper .bg { float:left; width:100%; font:0/0 arial; position:relative; z-index:1;}
.index_swiper .bg img { width:100%; opacity:0;}
.index_swiper .swiper { position:absolute; top:0; left:0;}
.index_swiper .swiper:before { width:100%; height:70px; content:""; background:#fff; position:absolute; bottom:-36px; left:0; z-index:30; transform:skew(0,-2deg);}
.index_swiper .swiper-slide p { color:#fff; text-transform:uppercase; position:absolute; left:0;}
.index_swiper .swiper-slide .img { width:100%; height:100%; top:0;}
.index_swiper .swiper-slide .img img { transition:all 0.8s;}
.index_swiper .swiper-slide .img:hover img { transform:scale(1.05);}
.index_swiper .swiper-pagination { width:auto !important; height:8px !important; padding:5px 7px; background:rgba(0,0,0,0.4); border-radius:10px; left:50% !important; bottom:10px !important; transform:translateX(-50%);}
.index_swiper .swiper-pagination-bullet { width:8px; height:100%; margin:0 4px !important; background:#fff; border-radius:100%;}
.index_swiper .swiper-pagination-bullet-active { background:#df2000;}
.index_swiper .swiper-button { display:none;}

.index_title { width:100%; height:100px; margin-bottom:30px; position:relative; z-index:15;}
.index_title:before { width:420px; height:1px; content:""; background:#c4c4c6; position:absolute; bottom:0; right:0;}
.index_title h5,.index_title h6 { position:absolute; right:0;}
.index_title h5 { line-height:26px; font-size:30px; color:#000; top:0;}
.index_title h6 { font:30px/26px arial; color:#dcdcdc; text-shadow:1px 1px 1px #999595; bottom:30px;}

.index_product { padding-bottom:80px; margin-top:40px;}

.index_product .canvas { width:200%; height:100%; opacity:0.5; position:absolute; top:0; left:-50%; z-index:1;}
.index_product .canvas canvas { width:100%; height:100%;}

.index_product .className { width:100%; height:20px; margin:10px 0 50px; text-align:center; position:relative;}
.index_product .className li { float:none; height:100%; margin:0 40px; display:inline-block;}
.index_product .className li a { float:left; height:100% line-height:20px; font-size:16px; color:#000;}
.index_product .className li:hover a { color:#da251d;}

.index_product .content-main { width:1400px; height:530px; font:0/0 arial; position:relative;}
.index_product .content-btn { position:absolute; top:0; z-index:20 !important;}
.index_product .content-btn i { width:50px; height:50px; background:#fff; border-radius:100%; cursor:pointer; position:absolute; top:50%; margin-top:-25px;}
.index_product .content-btn i:before { width:13px; height:24px; content:""; background:url(../images/base.png) no-repeat -50px -60px; position:absolute; top:50%; left:50%; margin:-12px 0 0 -7px;}
.index_product .content-btn i:hover { background:#da251d;}
.index_product .content-btn i:hover:before { background-position:-70px -60px;}
.index_product .prev-btn { left:0;}
.index_product .prev-btn i { right:45px;}
.index_product .next-btn { right:0;}
.index_product .next-btn i { left:45px;}
.index_product .next-btn i:before { margin-left:-6px; transform:rotate(180deg);}
.index_product .list { width:960px; height:530px; position:absolute; top:0; left:0; z-index:10;}
.index_product .list li { overflow:hidden; position:absolute; left:0; top:0;}
.index_product .list li:first-child { opacity:1 !important;}
.index_product .list li img { transition:all 0.8s;}
.index_product .list li:hover img { transform:scale(1.05);}

.index_ads { width:100%; left:50%; transform:translateX(-50%);}
.index_ads .bg { float:left; width:100%; font:0/0 arial; position:relative; z-index:1;}
.index_ads .bg img { width:100%; opacity:0;}
.index_ads .swiper { position:absolute; top:0; left:0;}
.index_ads .swiper:before,.index_ads .swiper:after { width:100%; height:70px; content:""; background:#fff; position:absolute; left:0; z-index:30; transform:skew(0,-2deg);}
.index_ads .swiper:before { top:-36px;}
.index_ads .swiper:after { bottom:-36px;}
.index_ads .swiper-slide p { color:#fff; text-transform:uppercase; position:absolute; left:0; z-index:10;}
.index_ads .swiper-slide .img { width:100%; height:100%; top:0;}
.index_ads .swiper-slide .img img { transition:all 0.8s;}
.index_ads .swiper-slide .imgs:hover img { transform:scale(1.05);}
.index_ads .swiper-slide .mask { width:100%; height:100%; background:rgba(218,37,30,0.8); top:0; left:-100%; z-index:20; transition:all 0.3s;}
.index_ads .swiper-slide .text { width:1400px; height:160px; top:50%; left:50%; transform:translate(-50%,-50%); z-index:30;}
.index_ads .swiper-slide .text i { position:absolute; left:0; transition:all 0.5s; opacity:0; visibility:hidden;}
.index_ads .swiper-slide .text .txt1 { line-height:46px; font-size:50px; color:#fff; top:0; transform:translateY(-20px);}
.index_ads .swiper-slide .text .txt2 { line-height:24px; font-size:28px; color:rgba(255,255,255,0.6); bottom:40px; transform:translateY(20px);}
.index_ads .swiper-slide .text .line { width:0; height:1px; background:#f5e4dc; bottom:0;}
.index_ads .swiper-pagination { width:auto !important; height:8px !important; padding:5px 7px; background:rgba(0,0,0,0.4); border-radius:10px; left:50% !important; bottom:10px !important; transform:translateX(-50%);}
.index_ads .swiper-pagination-bullet { width:8px; height:100%; margin:0 4px !important; background:#fff; border-radius:100%;}
.index_ads .swiper-pagination-bullet-active { background:#df2000;}
.index_ads .swiper-button { display:none;}

.index_ads .swiper-slide-active .mask { left:-50%; transition-delay:1.2s;}
.index_ads .swiper-slide-active .mask.close { left:0%; transition-delay:4.8s;}
.index_ads .swiper-slide-active .text i { opacity:1; visibility:visible;}
.index_ads .swiper-slide-active .text .txt1 { transform:translateY(0); transition-delay:2.3s;}
.index_ads .swiper-slide-active .text .txt2 { transform:translateY(0); transition-delay:2.6s;}
.index_ads .swiper-slide-active .text .line { width:600px; transition-delay:1.6s;}

.index_news { padding:40px 0 70px; margin-bottom:-130px;}

.index_news .canvas { width:200%; height:100%; opacity:0.5; position:absolute; top:0; left:-50%; z-index:1;}
.index_news .canvas canvas { width:100%; height:100%;}

.index_news .swiper { width:700px; height:520px; position:relative;}
.index_news .swiper-slide a { float:left; width:100%; height:100%;}
.index_news .swiper-slide p { color:#fff; overflow:hidden; position:absolute; left:0; z-index:20;}
.index_news .swiper-slide .img { width:100%; height:100%; top:0; z-index:10;}
.index_news .swiper-slide .img img { min-height:100%;}
.index_news .swiper-slide .img:after { width:100%; height:50px; content:""; background:rgba(0,0,0,0.6); position:absolute; bottom:0; left:0; z-index:20;}
.index_news .swiper-slide .name { width:calc(100% - 90px); height:50px; padding:0 70px 0 20px; line-height:50px; font-size:16px; bottom:0;}
.index_news .swiper-slide:hover .img:after { background:rgba(0,0,0,0.8);}
.index_news .swiper-slide:hover .name { color:#fff;}
.index_news .swiper-pagination { width:auto !important; top:auto !important; bottom:20px !important; left:auto !important; right:10px; z-index:30;}
.index_news .swiper-pagination-bullet { width:10px; height:10px; margin:0 0 0 5px !important; background:rgba(255,255,255,0.8); border-radius:100%; font:0/0 arial;}
.index_news .swiper-pagination-bullet-active { background:#da251d;}
.index_news .swiper-slide:hover .img img { transform:scale(1.05);}

.index_news .txtlist { width:calc(100% - 700px - 40px); height:520px; overflow:hidden; position:relative; z-index:10;}
.index_news .txtlist li { width:100%; margin-top:40px; position:relative;}
.index_news .txtlist li:first-child { margin-top:30px;}
.index_news .txtlist li a { float:left; width:100%; display:block;}
.index_news .txtlist li p { float:left; width:100%; line-height:24px; font-size:14px; color:#898989; overflow:hidden; position:relative;}
.index_news .txtlist li .name { height:18px; line-height:18px; font-size:18px; color:#3e3a39;}
.index_news .txtlist li .date { height:24px; margin:8px 0 2px;}
.index_news .txtlist li .info { height:0; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; transition:all 0.35s;}
.index_news .txtlist li:hover .name { color:#da251d;}
.index_news .txtlist li.active .info { height:48px;}

.index_news .more { width:100%; height:50px; margin:40px 0 60px; line-height:50px; font-size:14px; position:relative;}
.index_news .more li { width:200px; height:100%; overflow:visible; position:absolute; top:0; left:50%; transform:translateX(-50%);}
.index_news .more li:before { width:100%; height:100%; content:""; background:#000; transform:skew(0,-2deg); position:absolute; top:0; left:0;}
.index_news .more li:hover:before { background:#da251d;}
.index_news .more li a { width:100%; height:100%; text-align:center; color:#fff; position:absolute; top:0; left:0; z-index:10;}

@media (max-width:1500px){
section { width:1200px;}
.index_product .className li { margin:0 30px;}
.index_ads .swiper-slide .text { width:1200px; height:120px;}
.index_ads .swiper-slide .text .txt1 { line-height:36px; font-size:40px;}
.index_ads .swiper-slide .text .txt2 { line-height:20px; font-size:18px; bottom:30px;}
.index_ads .swiper-slide-active .text .line { width:540px;}
.index_news .swiper { width:600px; height:445px;}
.index_news .txtlist { width:calc(100% - 600px - 40px); height:445px;}
.index_news .txtlist li { margin-top:30px;}
.index_news .txtlist li:first-child { margin-top:10px;}
}