@charset "utf-8";
/* CSS Document  border-bottom: solid 6px #5ac2e7; */

.page { padding: 25px 0px 40px 0px;}
.innerbox {width:1040px;margin: 0px auto;}

.color { color: #4c585d;}
.color p { margin-bottom: 5px; line-height: 18px;}

.color .banner { width: 100%; height: 432px; background-image: url("../images/colorservice/chanagecolor/banner.jpg"); background-position: center center; background-repeat: no-repeat;}
.color .colorline {width:1140px;margin: 0px auto;border-bottom: solid 6px #18529B;}
.color .banner .innerbox { position: relative; height: 432px;}
.color .banner ul { position: absolute; top: 360px; left: -55px;}
.color .banner ul li a { background-image: url("../images/colorservice/chanagecolor/banner_qrcode_btn.png"); width: 50px; height: 56px; display: block; text-indent: -9999px;}
.color .banner .pop {position:absolute;z-index:99999;background-color:#fff; -webkit-box-shadow: 0 0 2px #b6b3ac;-moz-box-shadow: 0 0 2px #b6b3ac;box-shadow: 0 0 2px #b6b3ac;border:1px solid #e6e6e6;
    width: 90px; height: 90px;bottom: 50px;left: 35px;
}

.color .main { padding: 40px 0px 50px 0px;}
.color .main .title { background-image: url("../images/colorservice/chanagecolor/titlebg.png"); background-position: center center; background-repeat: no-repeat; font-size: 32px; color: #535353; text-align: center; overflow: hidden; width: 100%; margin-bottom: 30px;}
.color .main .lists { width: 100%;}
.color .main .lists li { width:338px; float: left;box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.4); margin: 0px 21px;}
.color .main .lists li .img { width: 338px; height: 200px; overflow: hidden;}
.color .main .lists li .img img { width: 338px; height: 200px;}
.color .main .lists li .text { padding: 15px;}
.color .main .lists li .text .tit {color: #013083; font-size: 18px; font-weight: bold;}
.color .main .lists li .text .info { color: #7f8c8c; height: 100px; padding: 7px 0px; overflow: hidden;}
.color .main .lists li .text .more {width:338px;height:30px;z-index:101; position:relative;}
.color .main .lists li .mask1{width:338px;height:401px;position:absolute;opacity:.2;filter:alpha(opacity=20);background-color:#000;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s;-ms-transition:all .6s;transition:all .6s; z-index:100;}
.color .main .lists li a.color_1{display:block}
.color .main .lists li a.color_1:hover .mask1{opacity:0}

.color .main .lists li a.color_2{ margin-right:20px;}


.work { padding: 0px 0px 30px 0px;}
.work .banner { width: 100%; height: 255px;}
.work .main { width: 100%; padding-top: 30px;}
.work .main .left { float: left; width: 220px; border: solid 1px #dcdcdc;box-shadow: 1px 2px 2px rgba(50, 50, 50, 0.1); border-radius: 3px;  }
.work .main .left h2 {color: #000000; height: 52px; line-height: 52px; padding-left: 10px; font-size: 16px; margin: 0px;}

.work .main .left #boxscroll {padding: 0px;height: 294px;width: 220px;overflow: auto;}
.work .main .left #boxscroll .nicescroll-rails { right: 5px !important;}

.work .main .left .sidemenu {}
.work .main .left .sidemenu li { height: 48px; border-top: solid 1px #eaeaea; position: relative; padding-left: 18px; }
.work .main .left .sidemenu li .title { padding-top: 5px;}
.work .main .left .sidemenu li .title a { color: #4b4b4b; font-size: 14px;}
.work .main .left .sidemenu li .time { font-size: 11px; color: #8da5b6;}
.work .main .left .sidemenu li i { width: 3px; height: 20px; background-color: #eceef1; display: block; position: absolute;  top: 16px; left: 5px;}
.work .main .left .sidemenu li.current i { background-color: #5ac2e7;}
.work .main .left .sidemenu li:hover i { background-color: #5ac2e7;}

.work .main .right { float: right; width: 850px;border: solid 1px #dcdcdc; box-shadow: 1px 2px 2px rgba(50, 50, 50, 0.1); border-radius: 3px; padding: 20px;}
.work .main .right h2 { font-size: 18px; color: #063b88;}
.work .main .right .infotitle{float:left;width:100%;height:45px;line-height:45px;font-size: 18px; color: #063b88;font-weight:bold;}
.work .main .right .infocon{float:left;width:100%;min-height:450px;font-size:13px;line-height:26px;}
.work .main .right .infocon img{max-width:840px;}


.opi {padding: 0px 0px 30px 0px; }
.opi .main {background-image: url("../images/colorservice/chanagecolor/opi_leftmenubg.gif"); background-repeat: repeat-y; background-position: left center; width: 100%; overflow: hidden;}
.opi .left { width: 220px;float: left; background-color: #5f7789;}

.opi .left .title { height: 45px; line-height: 45px; border-bottom: solid 3px #324857;}
.opi .left .title h2 { margin: 0px; padding-left: 20px; font-size: 18px; color: #5ac2e7;}

.opi .left .sidemenu {}
.opi .left .sidemenu ul { padding: 10px; overflow: hidden;}
.opi .left .sidemenu ul li { border-bottom: solid 1px #395464;}
.opi .left .sidemenu ul li a { color: #8f9399; display: block; overflow: hidden; padding: 16px 10px; line-height: 51px; font-size: 14px;}
.opi .left .sidemenu ul li a:hover { color: #ffffff;}
.opi .left .sidemenu ul li .tit { float: left;}
.opi .left .sidemenu ul li .img { float: right; line-height: 0px; border: solid 1px #8dd6ff; border-radius: 3px;}
.opi .left .sidemenu ul li.on a { color: #ffffff;}

.opi .right { width: 920px; float: right; background-color: #f6fcff;box-shadow: 1px 2px 2px rgba(50, 50, 50, 0.1);}
.opi .right .banner {}
.opi .right .content { padding: 30px;}



.exp {
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 30px;
	padding-left: 0px;
}
.exp .title {}
.exp .title {width: 98%;height: 33px;line-height: 26px;text-indent: 10px;background-image: url(../images/colorservice/chanagecolor/detail_title.png);font-size: 16px;font-weight: bold;color: #fff;margin-bottom: 30px;background-repeat: no-repeat;}
.exp .lists {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
.exp .lists ul { overflow: hidden; width: 1040px;}
.exp .lists ul li { float: left; overflow: hidden; position: relative; padding-bottom: 24px; margin-right: 20px; margin-bottom: 50px;}
.exp .lists ul li a {}
.exp .lists ul li img { width: 325px; height: 271px; position: relative; z-index: 10; border-radius: 7px;}
.exp .lists ul li .tit { width: 197px; height: 53px; text-align: center; line-height: 53px; color: #ffffff; background-image:url("../images/colorservice/chanagecolor/exp_list_tit.png"); background-repeat: no-repeat; background-position: center 0px; position: absolute; bottom: 0px; left: 50%; margin-left: -98px; z-index: 12; font-size: 14px; font-weight: bold;}
.exp .lists ul li .poptit { width: 197px; height: 47px; padding-top:6px;text-align: center; line-height: 20px; color: #ffffff; background-image:url("../images/colorservice/chanagecolor/exp_list_tit.png"); background-repeat: no-repeat; background-position: center 0px; position: absolute; bottom: 0px; left: 50%; margin-left: -98px; z-index: 12; font-size: 14px; font-weight: bold;}
.exp .lists ul li .lib { position: absolute; width: 325px; height: 271px; left: 0px; top: 0px;background-image:url("../images/colorservice/chanagecolor/exp_list_lib.png"); z-index: 11; color: #ffffff; display: none; font-size: 13px;border-radius: 7px; padding: 20px;}
.exp .lists ul li a .tit:hover { background-position: center -53px; }


/*换色体验*/
.expDetail .left{float:left;width:830px;background-color:#f5f7f8;box-shadow:1px 2px 2px rgba(50,50,50,.1);overflow:hidden}
.expDetail .left .top{height:60px;line-height:60px;background-color:#343f4b;padding-top:0;padding-right:0;padding-bottom:0;padding-left:20px}
.expDetail .left .top h2{float:left;color:#FFF;font-size:16px;margin:0;width:710px;text-align:center}
.expDetail .left .top .back{float:left;display:block;line-height:30px;height:30px;color:#FFF;font-size:14px;padding-left:30px;background-image:url(../images/colorservice/chanagecolor/ico_backto.png);background-repeat:no-repeat;background-position:left center;margin-top:15px}
.expDetail .left .top .back:hover{opacity:.8}
.expDetail .left .images{ float:left;width:830px; position:relative;}
.expDetail .left .images .colordiv_1{float:left;position:absolute;width:830px;z-index:1;overflow:hidden;}
.expDetail .left .images .colordiv_2{float:left;position:absolute;width:830px;z-index:2;overflow:hidden;}
.expDetail .left .images .colordiv_3{float:left;position:absolute;width:830px;z-index:3;overflow:hidden;}
.expDetail .left .images .colordiv_4{float:left;position:absolute;width:830px;z-index:4;overflow:hidden;}
.expDetail .left .images .waiting{
	float:left;
	position: absolute;
	width: 830px;
	z-index: 5;
	padding-top:30%;
	text-align:center;
	overflow: hidden;
	color:#FFF;
	font-size:14px;
	line-height:24px;
	background-color: #000;
	filter:alpha(opacity=70);  
	-moz-opacity:0.8;  
	-khtml-opacity: 0.8;  
	opacity: 0.8;
	display:none;
}

.expDetail{padding:0 0 30px 0}
.expDetail .right{float:left;width:60px}
.expDetail .right .top{float:left;height:60px;height:60px}
.expDetail .right .sidemenu{float:left;width:100%;height:647px;background-color:#212B37;}
.expDetail .right .sidemenu ul{float:left;width:100%}
.expDetail .right .sidemenu li{
	float: left;
	width: 100%;
	height: 155px;
	background-color: #18529B;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #3A85E0
}
.expDetail .right .sidemenu li a{color:#fff;display:block;height:155px;font-size:16px;text-align:center}
.expDetail .right .sidemenu li a span{float:left;width:30px;line-height:22px;padding-left:22px;padding-top:55px}
.expDetail .right .sidemenu li a:hover{background-color:#4D555F}
.expDetail .right .sidemenu li.on a{background-color:#4D555F}

/*色块滚动*/
.expDetail .sklists {float:left;width:140px;height:707px;overflow:hidden;}

/*滚动一*/
.picScroll-top-1{float:left;width:140px;height:707px;overflow:hidden;background-color:#EFEFEF;}
.picScroll-top-1 .hd{ overflow:hidden;height:24px;line-height:24px;}
.picScroll-top-1 .hd .prev,.picScroll-top .hd .next{float:left;display:block;width:140px;height:24px;line-height:24px;overflow:hidden;cursor:pointer;}
.picScroll-top-1 .hd .next{ background-position:0 -140px;  }
.picScroll-top-1 .hd .prevStop{ background-position:-60px -100px;  }
.picScroll-top-1 .hd .nextStop{ background-position:-60px -140px;  }

.picScroll-top-1 .bd{float:left;width:100%;height:634px;background-color:#EFEFEF;margin-top:20px;}
.picScroll-top-1 .bd ul{float:left;width:100%;overflow:hidden;}
.picScroll-top-1 .bd ul li{float:left;width:100%;text-align:center;margin-bottom:50px;}
.picScroll-top-1 .bd ul li .pic{float:left;width:60px;height:60px;border-radius:60px;margin-left:40px;padding-top:20px;}
.picScroll-top-1 .bd ul li .title{float:left;width:140px;height:24px;line-height:24px;font-size:12px;text-align:center;overflow:hidden;}
.picScroll-top-1 .bd ul li .title_en{float:left;width:140px;height:20px;line-height:20px;font-size:12px;}
.picScroll-top-1 .bd ul li .colorlinks{float:left;width:90%;height:46px;margin-top:12px;margin-left:8%;}
.picScroll-top-1 .bd ul li .colorlinks .btnlinkico{float:left;width:50%;text-align:center;}
.picScroll-top-1 .bd ul li .colorlinks .btnlinkico a{font-size:12px;}

/*滚动二*/
.picScroll-top-2{float:left;width:140px;height:707px;overflow:hidden;background-color:#EFEFEF;}
.picScroll-top-2 .hd{ overflow:hidden;height:24px;line-height:24px;}
.picScroll-top-2 .hd .prev,.picScroll-top .hd .next{float:left;display:block;width:140px;height:24px;line-height:24px;overflow:hidden;cursor:pointer;}
.picScroll-top-2 .hd .next{ background-position:0 -140px;  }
.picScroll-top-2 .hd .prevStop{ background-position:-60px -100px;  }
.picScroll-top-2 .hd .nextStop{ background-position:-60px -140px;  }

.picScroll-top-2 .bd{float:left;width:100%;height:634px;background-color:#EFEFEF;margin-top:20px;}
.picScroll-top-2 .bd ul{float:left;width:100%;overflow:hidden;}
.picScroll-top-2 .bd ul li{float:left;width:100%;text-align:center;margin-bottom:50px;}
.picScroll-top-2 .bd ul li .pic{float:left;width:60px;height:60px;border-radius:60px;margin-left:40px;padding-top:20px;}
.picScroll-top-2 .bd ul li .title{float:left;width:140px;height:24px;line-height:24px;font-size:12px;text-align:center;overflow:hidden;}
.picScroll-top-2 .bd ul li .title_en{float:left;width:140px;height:20px;line-height:20px;font-size:12px;}
.picScroll-top-2 .bd ul li .colorlinks{float:left;width:90%;height:46px;margin-top:12px;margin-left:8%;}
.picScroll-top-2 .bd ul li .colorlinks .btnlinkico{float:left;width:50%;text-align:center;}
.picScroll-top-2 .bd ul li .colorlinks .btnlinkico a{font-size:12px;}

/*滚动三*/
.picScroll-top-3{float:left;width:140px;height:707px;overflow:hidden;background-color:#EFEFEF;}
.picScroll-top-3 .hd{ overflow:hidden;height:24px;line-height:24px;}
.picScroll-top-3 .hd .prev,.picScroll-top .hd .next{float:left;display:block;width:140px;height:24px;line-height:24px;overflow:hidden;cursor:pointer;}
.picScroll-top-3 .hd .next{ background-position:0 -140px;  }
.picScroll-top-3 .hd .prevStop{ background-position:-60px -100px;  }
.picScroll-top-3 .hd .nextStop{ background-position:-60px -140px;  }

.picScroll-top-3 .bd{float:left;width:100%;height:634px;background-color:#EFEFEF;margin-top:20px;}
.picScroll-top-3 .bd ul{float:left;width:100%;overflow:hidden;}
.picScroll-top-3 .bd ul li{float:left;width:100%;text-align:center;margin-bottom:50px;}
.picScroll-top-3 .bd ul li .pic{float:left;width:60px;height:60px;border-radius:60px;margin-left:40px;padding-top:20px;}
.picScroll-top-3 .bd ul li .title{float:left;width:140px;height:24px;line-height:24px;font-size:12px;text-align:center;overflow:hidden;}
.picScroll-top-3 .bd ul li .title_en{float:left;width:140px;height:20px;line-height:20px;font-size:12px;}
.picScroll-top-3 .bd ul li .colorlinks{float:left;width:90%;height:46px;margin-top:12px;margin-left:8%;}
.picScroll-top-3 .bd ul li .colorlinks .btnlinkico{float:left;width:50%;text-align:center;}
.picScroll-top-3 .bd ul li .colorlinks .btnlinkico a{font-size:12px;}

/*滚动四*/
.picScroll-top-4{float:left;width:140px;height:707px;overflow:hidden;background-color:#EFEFEF;}
.picScroll-top-4 .hd{ overflow:hidden;height:24px;line-height:24px;}
.picScroll-top-4 .hd .prev,.picScroll-top .hd .next{float:left;display:block;width:140px;height:24px;line-height:24px;overflow:hidden;cursor:pointer;}
.picScroll-top-4 .hd .next{ background-position:0 -140px;  }
.picScroll-top-4 .hd .prevStop{ background-position:-60px -100px;  }
.picScroll-top-4 .hd .nextStop{ background-position:-60px -140px;  }

.picScroll-top-4 .bd{float:left;width:100%;height:634px;background-color:#EFEFEF;margin-top:20px;}
.picScroll-top-4 .bd ul{float:left;width:100%;overflow:hidden;}
.picScroll-top-4 .bd ul li{float:left;width:100%;text-align:center;margin-bottom:50px;}
.picScroll-top-4 .bd ul li .pic{float:left;width:60px;height:60px;border-radius:60px;margin-left:40px;padding-top:20px;}
.picScroll-top-4 .bd ul li .title{float:left;width:140px;height:24px;line-height:24px;font-size:12px;text-align:center;overflow:hidden;}
.picScroll-top-4 .bd ul li .title_en{float:left;width:140px;height:20px;line-height:20px;font-size:12px;}
.picScroll-top-4 .bd ul li .colorlinks{float:left;width:90%;height:46px;margin-top:12px;margin-left:8%;}
.picScroll-top-4 .bd ul li .colorlinks .btnlinkico{float:left;width:50%;text-align:center;}
.picScroll-top-4 .bd ul li .colorlinks .btnlinkico a{font-size:12px;}

/*色彩建议*/
.titletype{
	float:left;
	width:72px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-size:16px;
	background-color:#858585;
}
.colorsuggest{
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #666;
	border-left-color: #666;
}
.colorsuggest td{
	font-size: 14px;
	color: #000;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #666;
	border-bottom-color: #666;
	padding-left:10px;
}
.colorsuggest .tdbg{
	background-color:#DFDFDF;
}
.colorsuggest .colorarea{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}

.popzsqico{
	position:absolute;
	left:-35px;
	top:45%;
	z-index:101;
	cursor:pointer;
}
.popzsqpic{
	width:100%;
	height:100%;
	top:0;
	left:0;
	text-align:center;
	position:absolute;
	z-index:100;
	background-color:#FFF;
	display:none;
}

.popzsqclose{
	width:33px;
	height:33px;
	right:45px;
	position:absolute;
	z-index:102;
	display:none;
	cursor:pointer;
}