/* swiper */
.swiper-container { margin:0 auto; height:100%}
.swiper-slide { display:flex; font-size:18px; text-align:center; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align center; -ms-flex-align:center; -webkit-align-items:center; align-items:center}



/* wrap */
.wrap { margin:0 auto; width:90%; overflow:hidden}


/* header */
.header { position:fixed; left:0; top:0; width:100%; height:90px; background:transparent; /*background:rgba(0, 0, 0, .3);*/ z-index:99}
.header, .header .logo, .header .menu { transition:all .3s linear; -webkit-transition:all .3s linear}
.header .wrap { height:100%; overflow:inherit}
.header .logo { float:left; width:140px; height:100%; background:url(../images/logo.png) no-repeat center; background-size:100% auto}
.header .logo a { display:block; width:100%; height:100%}

.header .menu { float:right; width:auto}
.header .menu>ul { width:100%}
.header .menu>ul>li { position:relative; display:inline-block; margin:0 25px; text-align:center}
.header .menu>ul>li>a { display:inline-block; color:inherit; text-decoration:none!important; padding:0 1px; font-size:18px; text-transform:uppercase; color:#cfd1d2; line-height:45px}
.header .menu>ul>li:before { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#fff; -webkit-transform:scale(0); transform:scale(0); -webkit-transition:-webkit-transform .2s; transition:transform .2s}
.header .menu>ul>li>a:hover, .header .menu>ul>li.on>a { color:#fff}
.header .menu>ul>li:hover:before, .header .menu>ul>li.on:before { color:#fff; -webkit-transform:scale(1); transform:scale(1)}

.header .menu li ul { position:absolute; left:50%; top:30px; /*width:180px; margin-left:-90px;*/ text-align:center; max-height:0; -webkit-transition:max-height .2s linear; -moz-transition:max-height .2s linear; transition:max-height .2s linear; overflow:hidden}
.header .menu li ul.submenu1 { width:140px; margin-left:-70px}
.header .menu li ul.submenu2 { width:260px; margin-left:-130px}
.header .menu li ul li { background-color:#262f36}
.header .menu li ul li a { display:block; padding:10px; font-size:14px; color:#fff; line-height:1.5}
.header .menu li ul li:hover { background-color:#0078d4}
.header .menu li ul li:first-child { position:relative; margin-top:28px; border-radius:3px 3px 0 0}
.header .menu li ul li:first-child:before { content:''; position:absolute; left:50%; top:-13px; width:1px; height:1px; margin-left:-6px; border:6px solid transparent; border-bottom-color:#262f36}
.header .menu li ul li:last-child { border-bottom-left-radius:3px; border-bottom-right-radius:3px}
.header .menu li:hover ul { max-height:200px}

.header.headerFix { height:80px; background:rgba(0, 0, 0, .8)}



/* banner */
.banner { position:relative; width:100%; height:550px; background:no-repeat center; background-size:auto 100%; overflow:hidden}
.banner .hd { position:absolute; left:0; bottom:0; width:100%; text-align:center; _background:#fff; _filter:alpha(opacity=60); z-index:9}
.banner .hd ul { text-align:center}
.banner .hd li { display:inline-block; padding:15px 5px; vertical-align:middle; cursor:pointer}
.banner .hd li a { display:block; width:8px; height:8px; vertical-align:middle; border-radius:5px; background:#fff; filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4; line-height:9999px; transition:all 0.2s ease-in-out}
.banner .hd li.on a { width:20px; filter:alpha(opacity=70); -moz-opacity:7.0; opacity:7.0; background:#fff}
.banner .bd { margin:0 auto; height:100%; overflow:hidden}
.banner .bd ul { width:100% !important}
.banner .bd li { width:100% !important; height:550px; text-align:center; background:no-repeat center top; background-size:100% 100%; animation:banenrbg .8s ease both; -moz-animation:banenrbg .8s ease both; -webkit-animation:banenrbg .8s ease both; -o-animation:banenrbg .8s ease both}
.bannerHome,
.bannerHome .bd li { height:650px; background-size:auto 100%} /*针对首页*/

.banner .prev, .banner .next { position:absolute; top:50%; margin-top:-20px; cursor:pointer; filter:alpha(opacity=40); opacity:0.4; overflow:hidden; display:none; z-index:10}
.banner .prev { left:5%}
.banner .next { right:5%}
.banner .prev:hover, .banner .next:hover { filter:alpha(opacity=50) !important; opacity:.5 !important}

.banner .filter { position:absolute; left:0; right:0; bottom:0; top:0; background:rgba(0,0,0,0.7); background:url(../images/banner_bg.png) 0 100% repeat-x}


@keyframes banenrbg { 0%{ transform:scale(1.2)}100%{ transform: scale(1)}}
@-moz-keyframes banenrbg { 0%{ transform:scale(1.2)}100%{ transform: scale(1)}}
@-webkit-keyframes banenrbg { 0%{ transform:scale(1.2)}100%{ transform: scale(1)}}
@-o-keyframes banenrbg { 0%{ transform:scale(1.2)}100%{ transform: scale(1)}}


.banner_bg {
	position:absolute; left:0; top:0; width:100%; height:100%; background:no-repeat center; background-size:cover; z-index:-1;
	animation:banner_bg 1s ease both;
	-moz-animation:banner_bg 1s ease both; /* Firefox */
	-webkit-animation:banner_bg 1s ease both; /* Safari and Chrome */
	-o-animation:banner_bg 1s ease both; /* Opera */
}
@keyframes banner_bg {0%{ transform:scale(1.3);}100%{ transform: scale(1);}}
@-moz-keyframes banner_bg {0%{ transform:scale(1.3);}100%{ transform: scale(1);}}
@-webkit-keyframes banner_bg {0%{ transform:scale(1.3);}100%{ transform: scale(1);}}
@-o-keyframes banner_bg {0%{ transform:scale(1.3);}100%{ transform: scale(1);}}



/* banner_scroll */
.banner_scroll { position:absolute; left:50%; bottom:30px; width:40px; height:20px; margin-left:-20px; *display:none; background:url(../images/icon_down.png) no-repeat center; -webkit-animation:fade 3s infinite linear; animation:fade 3s infinite linear; cursor:pointer; z-index:98}
.banner_scroll a { display:block; width:100%; height:100%}
@-webkit-keyframes fade {
	0% { opacity:1}
	50% { opacity:0.3}
	100% { opacity:1}
}
@keyframes fade {
	0% { opacity:1}
	50% { opacity:0.3}
	100% { opacity:1}
}



/* container */
/*.container { position:relative; margin:0 auto}*/

.container .section { margin:0 auto; width:90%; padding:30px 0}

.section .title { position:relative; margin-bottom:40px; padding-bottom:20px; font-family:'Roboto', sans-serif; font-size:30px; font-weight:400; text-transform:uppercase; color:#4f5560}
.section .title:after { content:''; position:absolute; left:0; bottom:0; width:35px; height:5px; background:#4f5560}

.section .content { margin:0 auto; float:inherit; padding-bottom:30px}
.section .content a:hover { color:#618199}



/* about */
.about_intro p { padding-bottom:10px; font-size:16px; color:#333; line-height:2}
.about_culture { padding:70px 0; text-align:center; overflow:hidden}
.about_culture h3 { padding:30px 0; font-size:24px; color:#333; text-transform:uppercase}
.about_culture p { font-size:18px; color:#666}
.about_culture .fa { font-size:60px; color:#333}
.about_culture .item { padding:0 20px; transition:all .6s; -moz-transition:all .6s; -ms-transition:all .6s; -webkit-transition:all .6s}
.about_culture .item:hover { -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-15px); -ms-transform:translate(0,-10px); -o-transform:translate(0,-10px)}
.about_factory .swiper-container { margin:0 auto; height:450px}
.about_factory .swiper-slide { background-position:center; background-size:cover}
.about_factory .swiper-pagination-bullet { opacity:0.8}
.about_factory .swiper-pagination-bullet-active { background:#618199 !important}



/* contact */
.contact_info p { padding-bottom:10px; font-size:16px; color:#333; line-height:2}
.contact_info a { font-size:16px; color:#666}
.contact_cover { margin-top:20px}
.contact_cover img { width:100%}



/* product */
.product { margin-left:0; margin-right:0}
.product .hd { padding-left:0}
.product .hd li { position:relative; float:left; width:100%; line-height:55px}
.product .hd li:last-child { border-right:none}
.product .hd li a { display:block; width:90%; padding-left:6%; font-size:18px; color:#000; border-radius:2px; cursor:pointer}
.product .hd li.on a { color:#fff; background-image:linear-gradient(to right, rgba(79,85,96,1), rgba(79,85,96,0.6))}
.product .hd li.on:after { position:absolute; content:""; left:90%; top:50%; margin-top:-10px; display:inline-block; width:0; height:0; overflow:hidden; vertical-align:middle; border-left:10px solid rgba(79,85,96,0.6); border-top:10px dashed transparent; border-bottom:10px dashed transparent}
.product .hd li .fa { visibility:hidden; padding-right:10px; font-size:22px}
.product .hd li.on .fa { visibility:visible}

.product .bd { float:right; padding:0 0 60px 0; min-height:600px}
.product .bd .item ul { width:100%; display:table; border-collapse:collapse; text-align:center}
.product .bd .item ul li { display:inline-block; float:left; width:25%; margin:0 0 -1px -1px; border:1px solid #e2e2e2; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}
.product .bd .item ul li img { margin-bottom:10px; width:70%; -webkit-transition:all .2s linear; -moz-transition:all .2s linear; -o-transition:all .2s linear; -ms-transition:all .2s linear; transition:all .2s linear}
.product .bd .item ul li:hover { box-shadow:0 0 30px #ddd}
.product .bd .item ul li:hover img { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1)}
.product .bd .pic { padding:20px 0}
.product .bd .til { position:relative; padding:5px 0 10px 0; height:50px; font-size:16px; color:#333; line-height:1.5}
.product .bd .item ul li:hover .til { font-weight:bold; color:#4f5560}
/*.product .bd .item ul li:hover .til:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#618199}*/
.product .bd .item ul li:hover .til:after { content:''; position:absolute; left:50%; bottom:0; width:60px; height:4px; margin-left:-30px; background:#4f5560}

.detail { padding:50px 0 !important; overflow:hidden}
.detail_cover { -webkit-transition:all .2s linear; -moz-transition:all .2s linear; -o-transition:all .2s linear; -ms-transition:all .2s linear; transition:all .2s linear}
.detail_cover:hover { -webkit-transform:scale(1.05); -moz-transform: scale(1.05); -o-transform:scale(1.55); -ms-transform:scale(1.05); transform:scale(1.05)}
.detail_cover img { width:80%}
.detail_desc {}


/* news */
.news ul { margin:0 -12px; overflow:hidden}
.news li { position:relative; float:left; width:25%}
.news li a { display:block}
.news li a:hover .item { box-shadow:0 0 10px 0 rgba(0,0,0,0.2); transform:translate3d(0,-3px,0); cursor:pointer}
.news .item { margin:20px 18px; padding-bottom:20px; color:#999; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border-radius:10px; box-shadow:0 0 15px 0 rgba(0,0,0,.3); background:#fff; transition:all .2s linear; overflow:hidden}
.news .news_cover img { width:100%}
.news .news_info { padding:0 20px; color:#666; text-align:left; line-height:1.8}
.news .news_title { height:30px; line-height:30px; padding:0 20px; margin:10px 0; font-size:18px; font-weight:bold; color:#333; word-break:break-all; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden}
.animate { display:inline-block; white-space:nowrap; animation:10s wordsLoop linear infinite normal}
@keyframes wordsLoop {
	0% { transform:translateX(200px); -webkit-transform:translateX(200px)}
	100% { transform:translateX(-100%); -webkit-transform:translateX(-100%)}
}
 
@-webkit-keyframes wordsLoop {
	0% { transform:translateX(200px); -webkit-transform:translateX(200px)}
	100% { transform:translateX(-100%); -webkit-transform:translateX(-100%)}
}



/* footer */
.footer { padding:15px 0; background:rgba(0, 0, 0, .9); o overflow:hidden}
.footer dt { position:relative; padding-bottom:10px; margin-bottom:15px; font-size:22px; color:#fff; text-transform:capitalize}
.footer dt:after { content:''; position:absolute; left:0; bottom:0; width:30px; height:3px; background:#4f5560}
.footer dd { padding-bottom:3px; font-size:14px; color:#cfd1d2}
.footer dd a { font-size:14px; color:#cfd1d2}
.footer dd a:hover { color:#618199}
.footer dd .fa { margin-right:10px; color:#cfd1d2}

.copyright { padding:10px 0; margin-top:10px; border-top:2px solid #222; font-size:14px; color:#cfd1d2}