@charset "utf-8";

/*===================
  chouj.com 2017.2
====================*/

body { font:16px/180% \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, Verdana, Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#333; overflow-x:hidden;}
.chouj_box{ width:1200px; margin:0 auto; position:relative;}
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix{ *zoom:1;}
.clear{ clear:both; display:block; height:0; overflow:hidden;}
.pc_none{ display:block!important;}
.sp_none{ display:none!important;}
.pc_innone{ display:inline!important;}
.sp_innone{ display:none!important;}
.fc01, .fc01 a{ color:#448f83;}


/*************** loader ***************/
#loader{ display:none; z-index:20000; position:fixed; top:46%; left:50%; margin:-75px 0 0 -100px; width:200px; height:150px;} 
#loader img{ width:200px; height:150px;} 
#fade{ display:none; z-index:19000; width:100%; height:100%; background-color:#fff; position:fixed; top:0px; left:0px;}


/*************** header ***************/
header { width:100%; height:150px; position:fixed; top:0; left:0; z-index:1000; background:#fff;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
header nav{ position:absolute; padding-right:215px; top:46px; right:0;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;}
header nav ul li{ font-size:16px; height:50px; line-height:28px; text-align:center; display:inline-block; *display:inline; *zoom:1; vertical-align:top; padding:2px 28px 10px; z-index:99;}
header nav ul li ul{display:none;}
header nav a{ color:#000;}	
header nav a:hover,header nav a.active{ color:#448f83;}
header nav ul li span{ font-size:12px; color:#999; display:block;}
header nav i{ width:1px; height:42px; margin-top:8px; background:#ddd; display:inline-block;}
header .logo{ position:absolute; top:20px; left:50%; margin-left:-600px; z-index:99;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
header .logo img{
	width: 240px;
}
header nav .en{ display:none;}
header nav .tc{ position:absolute; width:200px; height:42px; top:0; right:0; font-size:12px; line-height:28px; text-align:right;}
header nav .tc a{ margin-left:15px;}
header nav .tc span{ height:22px; font-size:18px; font-weight:bold; padding-left:20px; background:url(../img/icon_c.png) 0 4px no-repeat;}

header.small{ height:0px;}
header.small nav{ top:-60px;}
header.small .logo{ top:-100px;}


/*************** banner ***************/
#t_banner { width:100%; height:500px; margin-top:150px; position:relative;}
#t_banner ul#t_bannerSlide li{ position:relative; text-align:center; height:500px; background-size:auto 100%;}

#t_bannerNav{ position:absolute;z-index:100;right:50%;bottom:30px;width:60px;margin:0 -40px 0 0;text-align:center;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;justify-content:space-between;}
#t_bannerNav a{ background:#ccc;display:block;width:10px;height:10px;border-radius:5px;text-align:center;}
#t_bannerNav a.active,#t_bannerFooter #t_bannerNav a:hover{ background:#fff;}


.t_bn1{ background:#fff url(../img/main_01.jpg) center top no-repeat;position: relative;}
.t_bn2{ background:#fff url(../img/main_02.jpg) center top no-repeat;}
.t_bn3{ background:#fff url(../img/main_03.jpg) center top no-repeat;}
.carousel-slogan-top{
	width: 1200px;
	margin: 0 auto;
	position: relative;
	height: 100%;
}
.carousel-slogan{
	width: 250px;
	position: absolute;
	top: 100px;
	z-index: 9;
	left: 20px;
	text-align: center;
}
.carousel-slogan img{
	width: 100%;
	margin-bottom: 20px;
}
.carousel-slogan img.top{
	animation: fadeInDown 2s;
}
.carousel-slogan img.bottom{
	margin-left: 30%;
	animation: fadeInUp 2s;
}
.carousel-slogan img.left{
	animation: fadeInLeft 2s;
}
.carousel-slogan img.right{
	margin-left: 30%;
	animation: fadeInRight 2s;
}
@media(max-width: 768px){
	.carousel-slogan-top{
		width: 100%;
	}
	.carousel-slogan{
		width: 30%;
	}
}

/*************** article ***************/
article{ z-index:101;}
article h2{ text-align:center; font:30px/100% Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black";}
article h2 span{ font-size:16px; font-weight:200; letter-spacing:4px; font-family:\5FAE\8F6F\96C5\9ED1, \5B8B\4F53, Verdana, Arial, Helvetica, sans-serif;}
article h2 i{ width:30px; height:1px; background:#666; margin:25px auto 0; display:block;}

article#topArea { position:relative; z-index:0;}


/*************** about ***************/
#about{ position:relative; background:#f6f6f6 url(../img/a_bg.jpg) center bottom no-repeat; background-size:100% auto; background-attachment:fixed; overflow:hidden;}
#about .a_inner{ width:100%; padding:80px 0 50px; background:#f6f6f6; margin-bottom:320px; overflow:hidden;}
#about .a_inner p{ width:1200px; margin:0 auto; text-align:center; padding:30px 0;}
#about .a_inner p span{ font-size:14px;}
#about .a_inner .more{ width:106px; margin:20px auto 10px; text-align:center; border-top:solid 1px #aaa; border-bottom:solid 1px #aaa; line-height:50px;}
#about .a_inner .more a{ color:#448f83;}
#about .a_inner .more a:hover{ color:#000;}


/*************** product ***************/
#product{ padding:80px 0 40px; background:#fff; position:relative;}
@media(max-width: 768px){#product{display: none;}}
#product .p_inner{ width:1200px; margin:30px auto; font-size:0; overflow:hidden;}
#product .p_inner li{ /* width:21%; */width: 29%; padding:1%; margin:1%; text-align:center; display:inline-block; *display:inline; *zoom:1; vertical-align:top; position:relative;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;}
#product .p_inner li a{ color:#666;}
#product .p_inner li:hover{ -webkit-box-shadow:0px 0px 10px #ccc; -moz-box-shadow:0px 0px 10px #ccc; box-shadow:0px 0px 10px #ccc;}
#product .p_inner li img{ width:100%; height:100%;}
#product .p_inner li h2{ font-size:14px; line-height:140%; padding:15px 0 0; display:block;}
#product .p_inner li a:hover{ color:#000;}
#product .p_inner li .tj{ position:absolute; width:60px; height:60px; top:5px; right:5px;}
#product .p_inner li .tj img{ width:100%;}


/*************** partners ***************/
#partners{ padding:80px 0 70px; background:#fff; position:relative;}
#partners .p_inner{ width:1200px; margin:30px auto; font-size:0; text-align:center;}
#partners .p_inner li{ display:inline-block; margin:10px; *display:inline; *zoom:1; vertical-align:top;}


/*************** footer ***************/
footer{width:100%; height:100px; padding:30px 0 0 0; color:#666; background:#000; font-size:12px; line-height:200%; text-align:center; position:relative; z-index:101;}
footer span{ font-size:16px; color:#999;}
footer a{color: #666;}



/*************** o_page ***************/
#o_main{ width:1200px; margin:0 auto; padding:80px 0 50px; overflow:hidden;}
#o_main img{ max-width:100%;}
#o_main .tm{ width:100%; text-align:center; padding:30px 0;}
#o_main .t_en{ font-size:14px;}
#o_main .photo{ width:100%; margin:0 auto; text-align:center; padding:30px 0;}
#o_main dt{ font-size:18px; line-height:300%;}
#o_main dd{ font-size:16px; line-height:220%; padding:0 10px; display:inline-block;}
#o_main .c_icon{ padding:52px 0;}
#o_main .c_qq a,
#o_main .c_map a{ width:48px; height:48px; display:inline-block; text-indent:-9999px; background:url(../img/c_icon.png) 0 0 no-repeat; margin:0 10px;}
#o_main .c_qq a:hover{ background-position:0 -48px;}
#o_main .c_map a{ background-position:-48px 0px;}
#o_main .c_map a:hover{ background-position:-48px -48px;}


.bn_about{ height:400px; margin-top: 150px; background:#fff url(../img/lh_bg2.jpg) center top no-repeat; /* background-attachment:fixed; */}
.bn_product{ height:400px; margin-top: 150px; background:#fff url(../img/lh_bg3.jpg) center top no-repeat; /* background-attachment:fixed; */}
.bn_contact{ height:400px; margin-top: 150px; background:#fff url(../img/lh_bg1.jpg) center top no-repeat; /* background-attachment:fixed; */}


/*---Product---*/
.p-item{ width:1200px; margin:40px auto 20px; text-align:center; font-size:0;}
.p-item li{ display:inline-block; *display:inline; *zoom:1; vertical-align:top; margin:0 5px 10px; padding:6px 15px; border:solid 1px #ccc; font-size:14px; color:#333; background:-webkit-linear-gradient(left, #448f83, #448f83) no-repeat; background:linear-gradient(to right, #448f83, #448f83) no-repeat; background-size:100% 0%; -webkit-transition:all .2s; transition:all .2s; cursor:pointer;}
.p-item li a{color:#333;text-transform: capitalize;}
.p-item li:hover{ color:#fff; background-size:100% 100%; border:solid 1px #448f83;}
.p-item li:hover a{color:#fff;}
.p-item .active,.p-item .active a{ color:#fff; background-color:#448f83; border:solid 1px #448f83;}
.pc_list{ width:1200px; margin:0 auto; font-size:0;min-height: 500px;}
.pc_show{
	width:1200px; margin:0 auto;text-align: center;min-height: 500px;
}
.pc_show h4{
	text-align: center;
	font-weight: bold;
	margin-bottom: 30px;
}
.pc_show img{
	max-width: 100%;
}
@media(max-width: 768px){
	.pc_show{
		width: 100%;
	}
	.pc_show img{
		width: 100%;
	}
}
.filter-item{ display:inline-block; *display:inline; *zoom:1; vertical-align:top; width:21%; padding:2%; background:-webkit-linear-gradient(left, #f6f6f6, #f6f6f6) no-repeat; background:linear-gradient(to right, #f6f6f6, #f6f6f6) no-repeat; background-size:100% 0%; cursor:pointer;}
.filter-item h2{ font-size:16px; text-align:center; line-height:160%; padding-top:10px; color:#fff; display:block; position:relative; overflow:hidden;}
.filter-item h2 a{ color:#666; display:block;}
.filter-item h2 a:hover{ color:#000;}
.filter-item:hover{ background-size:100% 100%;}
.filter-item:hover img{ -webkit-box-shadow:0px 0px 10px #fff; -moz-box-shadow:0px 0px 10px #fff; box-shadow:0px 0px 10px #fff;}
.filter-item img{ width:100%;}
.filter-item .product-img{
	width: 100%;
	height: 300px;
	background: center no-repeat;
	background-size: contain;
}
@media(max-width: 768px){
	.filter-item .product-img{
		height: 170px;
	}
}
.p_content{ width:100%;}
.p_content h1{ font-size:18px; font-weight:200; background:url(../img/i_01.png) 0 7px no-repeat; padding:0 0 0 20px; line-height:160%; margin-bottom:20px;}
.p_content .p_main{ width:100%; font-size:14px;}
.p_content .p_main .ph_l{}
.p_content .p_main .ph_l li{ width:100%; margin:0; text-align:center;}
.p_content .p_main table{ margin:4% 0 3% 0;}
.p_content .p_main td{ padding:5px 0; vertical-align:top;}
.p_content .p_main .t1{ width:100px; font-weight:bold;}

.p_sm{ text-align:left;}
.p_sm .sm_t{ font-size:16px; font-weight:bold; color:#ff7e00; line-height:500%; border-top:solid 1px #ddd;}
.p_sm p{ padding:0 0 20px; text-align:left;}
.p_sm p b{ font-weight:bold;}



	
/*************** common ***************/

/* alpha */
.alpha {
	-webkit-transition:0.3s ease-in-out;
	   -moz-transition:0.3s ease-in-out;
	     -o-transition:0.3s ease-in-out;
	        transition:0.3s ease-in-out;
}
.alpha:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}

/* fadeIn */
.fadeIn {
}

.fadeInUp {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*************** Responsive ***************/
@media screen and (max-width:1280px) {
article h2{ font-size:26px;}
article h2 span{ letter-spacing:3px;}
article h2 i{ width:20px; margin:20px auto 0;}

#product{ padding:60px 0 50px;}
#product .p_inner{ width:96%; padding:0 2%; margin:30px auto;}

#about{ background:#80989a url(../img/a_bg.jpg) center bottom no-repeat; background-size:100% auto; background-attachment:scroll;}
#about .a_inner{ padding:70px 0 40px;}
#about .a_inner p{ width:96%; padding:30px 2%;}

#partners{ padding:70px 0 60px;}
#partners .p_inner{ width:96%; padding:0 2%; margin:30px auto;}

footer span{ font-size:14px;}

#o_main{ width:92%; padding:50px 4% 40px;}

.p-item{ width:92%; padding:0 4%;}
.pc_list{ width:100%;}
}

@media screen and (max-width:1200px) {
.chouj_box{ width:96%; margin:0 2%;}
header { height:100px;}
header .logo{ position:absolute; top:15px; left:2%; margin-left:0;}
header .logo img{ width:180px;}
header nav{ top:24px; padding-right:190px;}
header nav ul li{ font-size:14px; line-height:24px; padding:2px 20px 10px;}
header nav i{ height:35px;}
header nav .tc{ top:2px; line-height:23px;}
header nav .tc span{ font-size:16px; background:url(../img/icon_c.png) 0 2px no-repeat;}

#t_banner { margin-top:100px;}

.filter-item h2{ font-size:14px;}

.subNavBox{ display:none;}
#portamento_container{ display:none;}
.p_content{ width:100%; margin:0; float:none;}
.p_content{ margin:0;}
.p_content ul li{ width:23%;}
}

@media screen and (max-width:1000px) {
header{ height:80px;}
header nav .en{ display:inline-block;}
header .logo{ top:15px; left:50%; margin-left:-85px;}
header .logo img{ width:170px;}
.mean-container nav ul li span{ display:none;}
.mean-container nav .tc{ display:none;}

#t_banner { height:400px; margin-top:0px;}
#product .p_inner li .tj{ width:50px; height:50px;}
}

@media screen and (max-width:750px) {
/* home */
#t_banner { height:300px; margin-top:0px;}
#t_banner ul#t_bannerSlide li{ background-size:auto 300px;}
#t_bannerNav{ bottom:20px;}
#t_bannerNav a{ width:8px;height:8px;border-radius:4px;}
#product{ padding:60px 0 30px;}
#product .p_inner li{ width:46%; margin:1% 1% 4%;}

#about .a_inner{ margin-bottom:220px;}
#about .a_inner p{ width:94%; padding:30px 3%;}
#about .a_inner p span{ font-size:12px; line-height:14px;}

#partners .p_inner{ width:98%; padding:0 1%; margin:20px auto;}
#partners .p_inner li{ margin:5px 0px;}
#partners .p_inner li img{ width:72%;}

footer{height:86px; padding:0; color:#666; line-height:180%;}
footer span{ display:none;}

.bn_about{ height:200px; margin-top: 0;background:#f6f6f6 url(../img/lh_bg2_sp.jpg) center top no-repeat; /* background-attachment:fixed; */}
.bn_product{ height:200px; margin-top: 0;background:#000 url(../img/lh_bg3_sp.jpg) center top no-repeat; /* background-attachment:fixed; */}
.bn_contact{ height:200px; margin-top: 0;background:#000 url(../img/lh_bg1_sp.jpg) center top no-repeat; /* background-attachment:fixed; */}

.p_content ul li{ width:29.6%;}
.filter-item{ width:46%; margin-bottom:3%;}
}

@media screen and (max-width:480px) {
article h2{ font-size:22px;}
article h2 span{ font-size:12px; letter-spacing:2px;}
article h2 i{ width:20px; margin:10px auto 0;}

/* home */
header .logo{ top:15px; left:50%; margin-left:-77px;}
header .logo img{ width:150px;}
#product{ padding:40px 0 10px;}
#product .p_inner{ margin:20px auto;}

#about .a_inner{ padding:50px 0 30px; margin-bottom:140px;}
#about .a_inner p{ width:92%; padding:20px 4% 20px;}
#about .a_inner .more{ width:96px; margin:10px auto; line-height:40px;}
#about .a_inner .more a{ color:#448f83;}
#about .a_inner .more a:hover{ color:#000;}

#partners{ padding:50px 0 40px;}
#partners .p_inner{ width:92%; padding:0 4%;}

footer{height:86px; padding:0; color:#666; line-height:180%;}
footer span{ display:none;}

#o_main{ padding:40px 4% 20px;}
#o_main .c_icon{ padding:40px 0;}
#o_main dt{ font-size:16px; line-height:260%;}
#o_main dd{ font-size:14px; line-height:200%; padding:0 8px;}

.p-item li{ padding:3px 10px; font-size:12px;}

.p_content ul li{ width:46%;}
.p_content .p_main .t1{ padding-left:8px;}
.p_sm{ padding:0 8px;}
}

.news-content{
	width: 800px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	min-height: 500px;
}
@media(max-width:768px){
	.news-content{
		width: 100%;
	}
}
.news-list{
	overflow: hidden;
	margin-bottom: 20px;
	display: block;
}
.news-list-left{
	float: left;
	border: 1px solid #ddd;
	// padding: 10px;
	overflow: hidden;
}
.news-list-img{
	width: 100px;
	height: 90px;
	background: #fff no-repeat center;
	background-size: contain;
}
.news-list:hover .news-list-right h4{
	color: #448f83;
}
.news-list:hover .news-list-right p{
	color: #333;
}
.news-list-right{
	padding-left: 20px;
	overflow: hidden;
}
.news-list-right h4{
	font-weight: bold;
	font-size: 16px;
	color: #333;
	transition: color .5s;
}
.news-list-right p{
	font-size: 14px;
	color: #666;
	transition: color .5s;
}
.news-list-right i{
	font-size: 12px;
	color: #666;
}
.news-show-title{
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	color: #333;
}
.news-show-time{
	text-align: center;
	font-size: 12px;
}
.pagination{
	width: 100%;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;
}
.pagination li{
	display: inline-block;
}
.pagination li span,
.pagination li a{
	padding: 5px 10px;
	border: 1px solid #ccc;
	color: #333;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 20px;
	display: inline-block;
}
.pagination li span,.pagination li a:hover{
	background-color: #448f83;
	color: #fff;
	border-color: #448f83;
}
.contact-map{
	width: 600px;
	margin: 0 auto;
}
@media(max-width:768px){
	.contact-map{
		width: 100%;
	}
}