*{transition:color 300ms,background-color 300ms;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}body,input,button,select,textarea{ font:12px/1.5 Arial Verdana,Microsoft yahei,sans-serif;color:#000;} 
body { color:#bbb; background:#000}
textarea{resize: none;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:none;vertical-align:middle;}
address,caption,cite,code,dfn,em,strong,th,var,em,i{font-weight:normal;font-style:normal;}
ol,ul{list-style:none;}list{vertical-align:middle;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}
a{text-decoration:none; color:#fff;}
a:hover{text-decoration:none!important;color:#f0f0f0;}
input {vertical-align:middle;}
button{overflow:visible;}
.hide{display:none;}.show{display:block;}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block;} *html .clearfix{height:1%}.clearfix{display:block;}.zoom{zoom:1}
.left{float:left;display:inline;}
.right{float:right;display:inline;}
.pointer{ cursor: pointer;}
.clr{clear:both; height: 0px; line-height:0; font-size:0} .text-center { text-align:center;}
.wrapper { width:1200px; overflow:hidden; margin:0 auto;} 
.banner{ background:url(images/banner_bg.jpg) top center no-repeat; height:475px;}
.banner_c { margin:0 auto; width:396px;} .banner_c_idx{ float:right;}
.text { width:580px; margin:120px 0 0 100px; background:url(images/text_head_b.png) left top no-repeat; padding:88px 0 0 46px;}
.text p { font-size:16px; color:#ccc; line-height:30px;} .text p strong { font-size:16px; font-weight:700}
.index_imgs { padding:0 0 30px}
.index_imgs li { float:left; margin:0 10px; position:relative;}
.index_imgs li:hover img { opacity:.6; transition:1000ms;}
.index_imgs li span { position:absolute; width:200px; height:50px; line-height:50px; border:1px solid #fff; display:inline-block; left:90px; top:120px; text-align:center; font-size:20px; color:#fff;display:none;}
.index_imgs li:hover span { display:block;}
.index_imgs li .opacity_phone { display:none}
.tab { margin:30px auto 50px; text-align:center}
.tab li { width:158px; height:32px; line-height:32px; border:1px solid #fff; color:#fff; font-size:16px; text-align:center; margin:0 20px; display:inline-block}
.tab li a { color:#fff; display:block}
.tab li.cur { border:1px solid #be9847; color:#be9847;} .tab li.cur { color:#be9847}
.list { overflow:hidden}
.list li { display:inline-block; margin:25px 23px 10px; width:350px; height:335px; overflow:hidden}
.list li .img350 { position:relative; margin-bottom:10px;}
.list li .img350 img { width:350px; height:255px; vertical-align:middle;}
.list li .img350 em { position:absolute; bottom:10px; right:10px; color:#fff; width:40px; height:24px; line-height:24px; font-size:14px; border-radius:20px; opacity:.7; background:#000; text-align:center}
.list li h3 { font-size:16px; font-weight:700; margin-bottom:5px;}
.list li p { color:#666; height:40px; line-height:20px;}
.view { overflow:hidden}
.view h4 { text-align:center; font-size:16px; color:#6b6b6b; margin:0 auto; border-bottom:4px solid #6b6b6b; width:164px;}
.view h2 { font-size:30px; font-weight:700; text-align:center; padding:20px 0; color:#fff;}
.view h3 { font-size:18px; font-weight:400; text-align:center; padding:0 0 30px; color:#fff;}
.pc-banner{width: 100%;float: left;}

.pro_introduction { width:740px; margin:40px auto; overflow:hidden; text-align:left; padding-top:40px;}
.pro_introduction h3 { text-align:left; border-left:8px solid #ffd800; font-size:24px; color:#fff; padding-left:15px; height:22px; line-height:22px; padding-bottom:0; margin-bottom:30px;}
.pro_introduction p { font-size:14px; line-height:26px; padding-bottom:20px; text-align:justify;}

@media screen and (max-width: 668px){.pc-banner{background-size: auto 100%;}}
.swiper-container{width: 100%;margin: 35px 0;}
@media screen and (max-width: 668px){.swiper-container{margin: 10px 0 5px;}}
.swiper-slide{-webkit-transition: transform 1.0s;-moz-transition: transform 1.0s;-ms-transition: transform 1.0s;-o-transition: transform 1.0s;-webkit-transform: scale(1);transform: scale(1);}
@media screen and (max-width: 668px){.swiper-slide{-webkit-transform: scale(1);transform: scale(1);}}
.swiper-slide-prev img,.swiper-slide-next img{filter: grayscale(100%);filter: gray; opacity:.5}
.swiper-slide-active,.swiper-slide-duplicate-active{-webkit-transform: scale(1);transform: scale(1);}
@media screen and (max-width: 668px){.swiper-slide-active,.swiper-slide-duplicate-active{-webkit-transform: scale(0.97);transform: scale(0.97);}}
.none-effect{-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;}
.swiper-slide a{display: block;}
@media screen and (min-width: 668px){.swiper-slide a:after{position: absolute;top: 0;left: 0;display: block;box-sizing: border-box;content: "";width: 100%;height: 100%;background: url(images/top_slick_cover_bg01.png) 0 0 repeat;}}
.swiper-slide-active a:after{background: none;}
@media screen and (max-width: 668px){.swiper-slide a{padding: 5px;}}
.swiper-slide img{width: 100%;display: block;}
.swiper-pagination{position: relative;margin-bottom: 30px;}
.swiper-pagination-bullet{background: #999;margin-left: 4px;margin-right: 4px;width: 12px;height: 12px;opacity: 1;}
.swiper-pagination-bullet-active{width: 12px;height: 12px;background: #fff;}
@media screen and (max-width: 668px){.swiper-pagination{position: relative;}
.swiper-pagination-bullet{background: #ddd;margin-left: 2px;margin-right: 2px;width: 10px;height: 10px;}
.swiper-pagination-bullet-active{width: 10px;height: 10px;background: #fff;}}
.button{width: 1000px;margin: 0 auto;bottom: 43px;position: relative;display:none}
@media screen and (max-width: 668px){.button{width: 70%;bottom: 22px;}}
.button div:hover{background-color: #2f4798;}
.swiper-button-prev{width: 40px;height: 40px;border-radius: 50%;background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") #00a0e9 center 50%/50% 50% no-repeat;}
.swiper-button-next{width: 40px;height: 40px;border-radius: 50%;background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") #00a0e9 center 50%/50% 50% no-repeat;}
@media screen and (max-width: 668px){.button div{width: 28px;height: 28px;}}
#hexagon{width: 100px;height: 55px;background: #fc5e5e;position: relative;margin: 10px auto;}
#hexagon:before{content: "";width: 0;height: 0;position: absolute;top: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid #fc5e5e;}
#hexagon:after{content: "";width: 0;height: 0;position: absolute;bottom: -25px;left: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid #fc5e5e;}

.footer { padding:30px 0; overflow:hidden; border-top:1px solid #313131; width:1200px; margin:30px auto 0}
.footer .contact { float:left; width:350px;}
.footer .contact img { float:left; margin-right:30px;}
.footer .contact p { font-size:14px;}
.copy_right { float:right;}

@media screen and (max-width: 668px) {
    .wrapper {width:100%;}
    .banner { width:100%; height:auto;}
    .banner_c_idx { float:none;} .banner_c_idx img,.banner_c img { width:90%; margin:0 auto; display:block;}
    .text { margin:0 auto; background:none; padding:20px 40px 10px; width:auto; text-align:justify}
    .text p { font-size:14px; line-height:24px;} 
    .text p strong { font-size:14px; font-weight:700}
    .index_imgs li { padding:10px;} .index_imgs li a { display:block;}
    .index_imgs li img { width:100%; opacity:1}
    .index_imgs li:hover span { display:none;}
    .opacity_phone { position:absolute; padding:20px; background:#000; opacity:.7; text-align:center; display:block!important; left:26%; top:30%; width:140px; height:50px;}
    .opacity_phone h3 { font-size:18px; color:#fff;} .opacity_phone h4 { font-size:16px;}
    .tab { overflow:hidden; margin:30px auto;}
    .tab li { width:100px; margin:0 2px;}
    .list li { margin:10px 20px; width:auto; height:auto} .list li p { height:auto;}
    .list li .img350 img { width:100%; height:auto;}
    .view h2 { padding:10px 0 5px; font-size:24px;} 
    .footer { width:auto; text-align:center}
    .footer .contact { float:none; width:auto;}
    .footer .contact img { float:none; margin:0 0 10px}
    .footer .contact p { font-size:14px; color:#fff; padding:2px 0}
    .copy_right { float:none; padding:30px 0 10px; font-size:14px;}
    .pro_introduction { padding:0 20px; width:auto;}
    .swiper-container { height:auto;}
}