@charset "utf-8";
.page { padding: 25px 0px 40px 0px;}
.innerbox {width:1040px;margin: 0px auto;padding-left:10px; padding-right:10px;}

.topTools { width: 100%; overflow: hidden; margin-bottom: 30px;}
.topTools .topmenu {float: left;}
.topTools .topmenu a {display: block; float: left; width: 130px; height: 40px;line-height: 40px; text-align: center; font-size: 14px; color: #fff; background: url('../images/colorservice/800seka/topmenu.png') no-repeat center center; margin-right: 45px;}
.topTools .topmenu a:hover {opacity: 0.8;}
.topTools .topmenu a.on {background: url('../images/colorservice/800seka/topmenu_hover.png') no-repeat center center;}
.topTools .topmenu a.faqBtn {width: 35px; height: 35px;background: url('../images/colorservice/800seka/topmenu_faq.png') no-repeat center center;background-size: 90% auto;}

.topTools .serachs { float: left; width: 230px; overflow: hidden;margin-left:175px;height: 38px; border:solid 1px #1e1e1e;}
.topTools .serachs input {
	width: 150px;
	height: 38px;
	border: 0;
	background-color: #fff;
	font-size: 14px;
	-webkit-appearance: none;
	border-radius: 0;
	float: left;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 8px;
	padding-left: 10px;
}
.topTools .serachs button { width: 60px; height: 38px; border: 0;background-color: #1e1e1e; color: #fff;font-size: 14px; float: right;}

.colorDisc {width: 1000px;overflow: hidden; margin: 0 auto; padding: 25px 0;}
.colorDisc .pick {width: 430px; height: 430px;float: left;}
.colorDisc .pick img {height: auto;width: 100%;}

.colorDisc .pick .colorpreview{position:absolute; top:180px; left:180px; z-index:1000; width:70px; height:70px;border-radius:70px;}

.colorDisc .result {width: 450px;float: right; text-align: center; padding-top: 20px;}
.colorDisc .result a {display: block;}
.colorDisc .result .card {width: 100%; height: 360px;}
.colorDisc .result .tit {font-size: 18px;color: #1f1f1f;font-weight: bold; line-height: 50px;}
.colorDisc .result .btnxjs {width: 100%; height:40px; text-align:center;}
.colorDisc .result .btnxjs a{ width:100px; height:35px; line-height:35px; color:#FFF; font-size:14px; display:block;background-color:#18529B;border-radius:3px; margin-left:185px;}
.colorDisc .result .btnxjs a:hover{opacity:0.9;}
.colorTips {text-align: center; padding: 20px 0;font-size: 14px;}

.ten .tips {padding: 20px 0;}

.ten .sekapager { width: 100%; text-align: center; padding: 20px 0;}
.ten .sekapager a {width: 22px; height: 22px; line-height: 22px; text-align: center; color: #fff; border-radius: 100%; font-size: 12px; display: inline-block; background-color: #868686; margin: 0 8px;}
.ten .sekapager a.on {background-color: #003399;}
.ten .sekapager a:hover {opacity: 0.8;}

.ten .navTop {margin-bottom: 20px;box-shadow: 1px 0px 5px rgba(0,0,0,0.18); height: 90px;}
.ten .navTop ul {display: flex; justify-content: space-between;}
.ten .navTop ul li { padding: 20px 30px;position: relative; z-index: 5;}
.ten .navTop ul li::after {width: 2px; height: 21px;background-color: #000000;content: "";position: absolute; right: -1px; top: 50%; margin-top: -10px;}
.ten .navTop ul li:last-child::after {display: none;}
.ten .navTop ul li a {font-size: 24px; line-height: 50px;}
.ten .navTop ul li.on a { color: #cc0000;}
.ten .navTop ul li .pop {position: absolute; left: 50%;top: 70px;box-shadow: 1px 0px 8px rgba(0,0,0,0.3);background-color: #fff; margin-left: -40px; }
.ten .navTop ul li .pop a {font-size: 14px; color: #000; line-height: 30px; display: block; width: 80px; text-align: center;}
.ten .navTop ul li .pop a:hover {opacity: 0.8;}
.ten .navTop ul li .pop a.on {color: #cc0000;}

.ten .colorList {display: flex;}

.ten .colorList>li{float:left;width:242px; margin-right:60px;}
.ten .colorList .shcatid{width:100%; height:30px; line-height:30px; font-size:16px; text-align:center;}

.ten .colorList.column1 {}
.ten .colorList.column2 {display: flex;}
.ten .colorList.column3 {display: flex; justify-content: space-between;}
.ten .colorList.column4 {display: flex; justify-content: space-between;}
.ten .colorList dl {width: 242px;}
.ten .colorList.column2 dl {width:449px;}
.ten .colorList dl dt {font-size: 18px; color: #000; margin-bottom: 5px; text-align: center;width: 240px;}
.ten .colorList dl dd {width: 240px;border: solid 1px #cacaca; margin-bottom: 30px; position: relative;}
.ten .colorList dl dd a {display: block;}
.ten .colorList dl .card {width: 100%; height: 75px; }
.ten .colorList dl .tit {display: flex; align-items: center; justify-content: space-between;font-size: 13px; line-height: 25px; padding: 0 20px 0 8px;}
.ten .colorList dl .tit .name {background: url('../images/colorservice/800seka/tit_lo.png') no-repeat left 5px; background-size: 5px auto; padding-left: 10px;width:120px;}

.ten .colorList .trait {display:flex;width:75px;justify-content: flex-start;cursor: pointer;}
.ten .colorList .trait span { line-height: 0;display: inline-block; padding: 3px; }
.ten .colorList .trait span img { width: 16px; height: auto;}
.ten .colorList .traitContent {border: solid 1px #cecece; padding: 15px 0; position: absolute; display: none;font-size: 12px;top: 115px;left: -1px; z-index: 4; box-shadow: 0 0 3px rgba(0,0,0,0.1); background-color: #fff; width: 240px;}
.ten .colorList .traitContent i.arrow {width: 16px; height: 12px;display: block; position: absolute; top: -12px; left: 55.5%; transform: translate(-50%,0); background: url('../images/colorservice/800seka/trait_arrow.png') no-repeat center center; background-size: 16px 12px;}
.ten .colorList .traitContent.show {display: block;}
.ten .colorList .traitContent .con {display: flex;justify-content: center;}
.ten .colorList .traitContent ul {width: auto;}
.ten .colorList .traitContent ul li {display: flex; align-items: center;}
.ten .colorList .traitContent ul li img { width: 16px; height: 16px; margin-right: 10px;}

.ten .tabPage .tabPageMenu { width: 100%; text-align: center; padding: 20px 0;}
.ten .tabPage .tabPageMenu a {width: 22px; height: 22px; line-height: 22px; text-align: center; color: #fff; border-radius: 100%; font-size: 12px; display: inline-block; background-color: #868686; margin: 0 8px;}
.ten .tabPage .tabPageMenu a.on {background-color: #003399;}
.ten .tabPage .tabPageMenu a:hover {opacity: 0.8;}

.popUp {position: fixed; top: 50%; left: 50%;transform: translate(-50%,-50%); background-color: rgba(255, 255, 255, 1.0); padding: 45px 25px; z-index: 9999;box-shadow: 1px 0px 5px rgba(0,0,0,0.65); }
.popUp .close {width: 21px; height: 28px; line-height:60px;display: block; position: absolute; top: 16px; right: 38px; text-indent: -9999px; background: url('../images/colorservice/800seka/icoclose.png') no-repeat center center;background-size: 90% auto;}
.popUp .content {width: 625px; height: 100%; overflow: hidden; margin-top:15px;}
.popUp .content .left {float: left;background-color: #fff; width: 600px; color: #1e1e1e; margin-left: 10px;}
.popUp .content .left .card {width: 100%; height: 300px;}
.popUp .content .left .card img {width: 100%; height: 100%;}
.popUp .content .left .con {
	padding: 31px 15px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #D2D2D2;
	border-bottom-color: #D2D2D2;
	border-left-color: #D2D2D2;
}
.popUp .content .left .con .tit {display: flex; align-items: center; justify-content: flex-start; margin-bottom: 20px;}
.popUp .content .left .con .tit h3 {font-size: 24px; line-height: 30px; font-weight: bold;background: url('../images/colorservice/800seka/tit_lo.png') no-repeat left 3px; background-size: 8px 24px; padding-left: 15px;}
.popUp .content .left .con .tit .trait {display:flex; margin-left:70px;}
.popUp .content .left .con .tit .trait span { line-height: 0;display: inline-block; padding: 3px 5px; }
.popUp .content .left .con .tit .trait span img { width: 24px; height: auto;}
.popUp .content .left .con p {font-size: 13px;line-height: 18px; margin-bottom: 0;}
/*.popUp .content ul { float: right; width: 252px;}
.popUp .content ul li {border: solid 1px #fff; position: relative; margin-bottom: 8px;}
.popUp .content ul li:last-child {margin-bottom: 0;}
.popUp .content ul li a { color: #fff;display: block; position: relative;}
.popUp .content ul li a:hover {opacity: 0.8;}
.popUp .content ul li .card {width: 250px; height: 67px;}
.popUp .content ul li .card img {width: 100%; height: 100%;}
.popUp .content ul li .tit {display: flex; align-items: center; justify-content: space-between;font-size: 17px; line-height: 36px; padding: 0 20px 0 8px;background-color: #fff; color: #1e1e1e;}
.popUp .content ul li .tit .name {background: url('../images/colorservice/800seka/tit_lo.png') no-repeat left 8px; background-size: 6px auto; padding-left: 10px;}
.popUp .content ul li .trait {display:flex; cursor: pointer;}
.popUp .content ul li .trait span { line-height: 0;display: inline-block; padding: 3px; }
.popUp .content ul li .trait span img { width: 18px; height: auto;}*/


.effect {width: 100%;}
.effect .tabMenu { margin-bottom: 30px;}
.effect .tabMenu a {font-size: 16px; font-weight: bold; color: #1e1e1e; margin-right: 30px; border-bottom: solid 2px #fff; display: inline-block; line-height: 20px; padding-bottom: 10px;  }
.effect .tabMenu a.on {color: #cc0000;border-bottom: solid 3px #cc0000;}
.effect .tabMenu a:hover {opacity: 0.8;}

.effect .content {width: 1040px; margin: 0 auto 20px auto;}
.effect .content .left {width: 300px; margin-right: 60px; float: left;}
.effect .content .left ul {width: 100%;}
.effect .content .left ul li {margin-bottom: 10px; text-align: center;}
.effect .content .left ul li a {display: block;}
.effect .content .left ul li a:hover {opacity: 0.8;}
.effect .content .left ul li.on a {color: #cc0000;}
.effect .content .left ul li .card {width: 300px; height: 150px;}
.effect .content .left ul li .card img {width: 100%; height: 100%;}
.effect .content .left ul li h3 {font-size: 14px; font-weight: normal; line-height: 60px;}

.effect .content .right { width: 650px; float: left;}
.effect .content .right .preview {width: 510px; margin: 0 auto 30px auto;}
.effect .content .right .preview .images {width: 510px; height: 250px; overflow: hidden; margin-bottom: 20px;}
.effect .content .right .preview .images img {width: 100%; height: auto;}
.effect .content .right .preview h2 {position:relative;font-size: 18px; color: #1e1e1e; text-align: center; line-height: 40px;font-weight: bold; margin-bottom: 5px;}
.effect .content .right .preview h2 .btnrevoke{ position:absolute; right:0px; top:0px;}
.effect .content .right .preview .con {font-size: 14px;}

.effect .content .right .navTop {margin-bottom: 20px;box-shadow: 1px 0px 5px rgba(0,0,0,0.18); height: 76px;}
.effect .content .right .navTop ul {display: flex; justify-content: space-between;}
.effect .content .right .navTop ul li { padding: 18px 16px;position: relative; z-index: 5;}
.effect .content .right .navTop ul li::after {width: 2px; height: 21px;background-color: #000000;content: "";position: absolute; right: -1px; top: 50%; margin-top: -10px;}
.effect .content .right .navTop ul li:last-child::after {display: none;}
.effect .content .right .navTop ul li a {font-size: 20px; line-height: 40px;}
.effect .content .right .navTop ul li.on a { color: #cc0000;}
.effect .content .right .navTop ul li .pop {position: absolute; left: 50%;top: 58px;box-shadow: 1px 0px 8px rgba(0,0,0,0.3);background-color: #fff; margin-left: -40px; }
.effect .content .right .navTop ul li .pop a {font-size: 14px; color: #000; line-height: 30px; display: block; width: 80px; text-align: center;}
.effect .content .right .navTop ul li .pop a:hover {opacity: 0.8;}
.effect .content .right .navTop ul li .pop a.on {color: #cc0000;}

.effect .content .right .colorList {display: flex;}
.effect .content .right .colorList.column1 {}
.effect .content .right .colorList.column2 {display: flex;}
.effect .content .right .colorList.column3 {display: flex; justify-content: space-between;}
.effect .content .right .colorList dl {width: 165px;}
.effect .content .right .colorList.column2 dl {width:292px;}
.effect .content .right .colorList dl dt {width: 165px;font-size: 18px; color: #000; margin-bottom: 5px; text-align: center;}
.effect .content .right .colorList dl dd {width: 165px;border: solid 1px #cacaca; margin-bottom: 18px; position: relative;}
.effect .content .right .colorList dl dd.on{ color:#cc0000;}
.effect .content .right .colorList dl dd a {display: block;}
.effect .content .right .colorList dl .card {width: 100%; height: 50px; }
.effect .content .right .colorList dl .tit {display: flex; align-items: center; justify-content: space-between;font-size: 12px; line-height: 25px; padding: 0 5px 0 5px;}
.effect .content .right .colorList dl .tit .name {background: url('../images/colorservice/800seka/tit_lo.png') no-repeat left 6px; background-size: 4px auto; padding-left: 8px; width:80px;}


.effect .content .right .colorList .trait {display:flex;width:65px;justify-content: flex-start;cursor: pointer;}
.effect .content .right .colorList .trait span { line-height: 0;display: inline-block; padding: 2px; }
.effect .content .right .colorList .trait span img { width: 15px; height: auto;}
.effect .content .right .colorList .traitContent {border: solid 1px #cecece; padding: 15px 0; position: absolute; display: none;font-size: 12px;top: 90px;left: -41px; z-index: 4; box-shadow: 0 0 3px rgba(0,0,0,0.1); background-color: #fff; width: 240px;}
.effect .content .right .colorList .traitContent i.arrow {width: 16px; height: 12px;display: block; position: absolute; top: -12px; left: 51.8%; transform: translate(-50%,0); background: url('../images/colorservice/800seka/trait_arrow.png') no-repeat center center; background-size: 16px 12px;}
.effect .content .right .colorList .traitContent.show {display: block;}
.effect .content .right .colorList .traitContent .con {display: flex;justify-content: center;}
.effect .content .right .colorList .traitContent ul {width: auto;}
.effect .content .right .colorList .traitContent ul li {display: flex; align-items: center;}
.effect .content .right .colorList .traitContent ul li img { width: 16px; height: 16px; margin-right: 10px;}

.effect .content .right .tabPage .tabPageMenu { width: 100%; text-align: center; padding: 20px 0;}
.effect .content .right .tabPage .tabPageMenu a {width: 22px; height: 22px; line-height: 22px; text-align: center; color: #fff; border-radius: 100%; font-size: 12px; display: inline-block; background-color: #868686; margin: 0 8px;}
.effect .content .right .tabPage .tabPageMenu a.on {background-color: #003399;}
.effect .content .right .tabPage .tabPageMenu a:hover {opacity: 0.8;}

/* 本例子css */
.multipleColumn{ overflow:hidden; position:relative; width:100%;}
.multipleColumn .hd{ overflow:hidden;width: 100%;}
.multipleColumn .hd ul{ overflow:hidden;display:flex; align-items: center; justify-content: center; }
.multipleColumn .hd ul li{ background-color: #868686; color: #fff; width: 20px; height: 20px; font-size: 12px;display: block; border-radius: 20px;text-align: center; line-height: 20px; margin: 0 5px; cursor: pointer;}
.multipleColumn .hd ul li.on{ background-color:#02339a;}


.colorFaq {overflow: hidden; padding: 15px 0;}
.colorFaq .left {width: 100%; float: left;}
.colorFaq .right {width: 100%; float: right;}
.colorFaq .box {margin-bottom: 20px;overflow: hidden;}
.colorFaq h3 { margin-bottom: 20px; line-height: 32px; font-size: 16px; font-weight: 700;}
.colorFaq h3 span {
	background-color: #e7e7e7;
	color: #1e1e1e;
	display: inline-block;
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
	background-image: url(../images/colorservice/800seka/skico_01.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	background-size: 21px 20px;
	padding-top: 0;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 40px;
}
.colorFaq .con { margin-bottom: 30px;font-size: 14px;}
.colorFaq .con dl dd {
	position: relative;
	padding-left: 28px;
	margin-bottom: 20px;
	background-image: url(../images/colorservice/800seka/skico_02.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 18px 18px;
}
/*.colorFaq .con dl dd:before {content: "";display: block;position: absolute;top: 2px;left: 0%;width: 18px;height: 18px;background-color: #1e1e1e;}*/
.colorFaq .con p {
	margin-bottom: 20px;
	line-height:28px;
}
.colorFaq .con .img {
	text-align: left;
	margin-bottom: 20px;
	padding-top: 30px;
	padding-right: 0;
	padding-bottom: 30px;
	padding-left: 160px;
}
.colorFaq .con .img img {width: 170px; height: auto;}

.colorFaq .tabs{
	width:685px;
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #2D2D2D;
	border-left-color: #2D2D2D;
}
.colorFaq .tabs td{
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-bottom-style: solid;
	border-right-style: solid;
	border-bottom-color: #2D2D2D;
	border-right-color: #2D2D2D;
	height:50px;
	line-height:50px;
	font-size:14px;
	color:#1E1E1E;
	text-align:center;
}
.colorFaq .tabs .tit1{
	background-color:#B93636;
	color:#FFF;
	font-size:14px;
	font-weight:700;
}
.colorFaq .tabs .tit2{
	background-color:#B1BBC9;
	color:#FFF;
	font-size:14px;
	font-weight:700;
}