.icolor-banner {position:relative;margin:0px !important;background:url('../image/banner-color-tool-2020.jpg') no-repeat left 40%; height:335px;background-size:100%;}
.icolor-banner h2{position:absolute;top:8%;left:31%;padding:20px 40px;}
.xhover{pointer-events:none;}
@media screen and (max-width: 768px) {.icolor-banner{height:200px;}}
#color_content{width:75%; float:left; vertical-align: top;}
#type_title{text-align: center;vertical-align: bottom;height: 66px;position: relative;}
#type_title div{cursor:pointer;display:inline-block;height:50px;width:20.333%;font-size:18px;line-height:50px;border-radius:10px 10px 0 0;color:#fff;font-weight:bold;position:relative;vertical-align: bottom;position: absolute;
    margin-top:16px;}
.button_NE{background-color:#c2ab7e;left: 0;z-index: 5}
.button_US{background-color:#9ba785;left: 20%;z-index: 4}
.button_LE{background-color:#7e99ae;left: 40%;z-index: 3}
.button_MT{background-color:#a68a81;left: 60%;z-index: 2}
.button_NC{background-color:#8e8ca8;left: 79.6%;z-index: 1;}
.button_NE.active, .button_US.active, .button_LE.active, .button_MT.active, .button_NC.active{height:66px!important;font-size:24px !important;margin-top: 0!important;line-height: 66px!important;z-index: 6!important;}
#dec_text{width:100%;border-top:4px solid #c2ab7e; }

/*#type_all{width: 100%;height: 517px;position: relative;background-color:#DBC399}*/
#type_all{width:100%;height: 517px;position: relative;background-color:#c8b6a8;}
.type{position:absolute;left: 0;height: 100%!important;display: none;z-index: 2;}
.type.active{display:block;}
.type.type_4 .room{opacity:0.9;background-color:#57524B;color:#fff;display:table;height:25%;width:25px; font-size:16px; text-align:center;padding:0 10px;cursor: pointer;border-bottom: 1px solid #fff;}
.type.type_3 .room{opacity:0.9;background-color:#57524B;color:#fff;display:table;height:33.3333%;width:25px;text-align: center;padding:0 10px;cursor: pointer;border-bottom: 1px solid #fff;}
.type.type_4 .room.active{background-color:#F1F0EE;color:#333;position: relative;}
.room.active:after{content: "";border: 10px solid transparent;border-left-color: #F1F0EE; position: absolute;bottom: calc(50% - 10px);left: 100%;}
.type.type_3 .room.active{background-color:#F1F0EE;color:#333;position: relative}
.type.type_3 .room.active:after{display: block;}
.type.type_4 .room.active:after{display: block;}
.type .room span{vertical-align: middle;display: table-cell;}
.img_ne_Cr,.img_ne_Tr,.img_ne_Br,.img_ne_Sr{position: absolute;top:0;left: 0;z-index: 0;}
#img_cont .active{z-index: 1;}
.color_tools_pic{position:absolute;top:0;left:0;visibility:hidden;}
#button_color_select{height: 100%;}
/*#button_color_select div{opacity: 0.9;background-color: #57524B;color: #fff;display: table;height: 50%;width: 100%;text-align: center;padding: 0 10px;cursor: pointer;border-bottom: 0px;}*/
#button_color_select div{opacity: 0.9;background-color: #57524B;color: #fff;display: table;height: 50%;width: 17px;text-align: center;padding: 0 10px;cursor: pointer;border-bottom: 0px;}
#button_color_select div.button_color_select1.active:after{content: "";border: 10px solid transparent;border-left-color: lightgrey;position: absolute;left: 37px;top: 25%;}
#button_color_select div.button_color_select2.active:after{content: "";border: 10px solid transparent;border-left-color: lightgrey;position: absolute;left: 37px;top: 75%;}
#button_color_select div span{vertical-align: middle;display: table-cell;}
#button_color_select div.active{background-color: #F1F1F1;color: #333;}
#color40_list,#color_2020_list{width:100%;box-sizing:border-box;margin:0 auto;background-color:#F1F1F1;height: 484px;overflow: auto;}
#color40_list{padding:1px 0%;padding-bottom:0px;}
#color_2020_list{padding:5px 2.5% 0 2.5%;padding-bottom:0px;height: 484px;overflow: auto;}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background-color: #eaeaea;
    border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
    background-color: #ccc;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}
::-webkit-scrollbar-thumb:active{
    background-color:#666;
}

ul, li{list-style:none;padding:0;margin: 0;}
/* li{display: inline-block;text-align:center;} */
/*#color_40_list li{width:18%;margin:0.5% 1%;margin-bottom: 1px;}*/
.color_40_list div {line-height:85%;}
.l-3{display: inline-block;width: 59%;vertical-align: top;}
.r-2{display: inline-block;width: 39%;vertical-align: top;}
.l-3 .color_40_list li{width:31%;margin:0.5%;margin-bottom: 1px;display: inline-block;text-align: center;}
.r-2 .color_40_list li{width:48%;margin:0.5% 1%;margin-bottom: 1px;}
.color_40_list li{position: relative;}
/*.color_40_list li .NC:after,.color_40_list li .NR:after,.color_40_list li .NB:after,.color_40_list li .NS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*.color_40_list li .AC:after,.color_40_list li .AR:after,.color_40_list li .AB:after,.color_40_list li .AS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*.color_40_list li .LC:after,.color_40_list li .LR:after,.color_40_list li .LB:after,.color_40_list li .LS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*.color_40_list li .MC:after,.color_40_list li .MR:after,.color_40_list li .MB:after,.color_40_list li .MS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*.color_40_list li .CR:after,.color_40_list li .CB:after,.color_40_list li .CS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;}*/
/*#color_2020_list li .NC:after,#color_2020_list li .NR:after,#color_2020_list li .NB:after,#color_2020_list li .NS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*#color_2020_list li .AC:after,#color_2020_list li .AR:after,#color_2020_list li .AB:after,#color_2020_list li .AS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*#color_2020_list li .LC:after,#color_2020_list li .LR:after,#color_2020_list li .LB:after,#color_2020_list li .LS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*#color_2020_list li .MC:after,#color_2020_list li .MR:after,#color_2020_list li .MB:after,#color_2020_list li .MS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
/*#color_2020_list li .CR:after,#color_2020_list li .CB:after,#color_2020_list li .CS:after{position: absolute;left: 0;top: 0;content: "";background: url('/wp-content/uploads/2020/10/pic1-undo.png') no-repeat;width: 100%;height: 100%;opacity: 0;}*/
.color_40_list li .NC:after,.color_40_list li .NR:after,.color_40_list li .NB:after,.color_40_list li .NS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
.color_40_list li .AC:after,.color_40_list li .AR:after,.color_40_list li .AB:after,.color_40_list li .AS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
.color_40_list li .LC:after,.color_40_list li .LR:after,.color_40_list li .LB:after,.color_40_list li .LS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
.color_40_list li .MC:after,.color_40_list li .MR:after,.color_40_list li .MB:after,.color_40_list li .MS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
.color_40_list li .CR:after,.color_40_list li .CB:after,.color_40_list li .CS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
#color_2020_list li .NC:after,#color_2020_list li .NR:after,#color_2020_list li .NB:after,#color_2020_list li .NS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
#color_2020_list li .AC:after,#color_2020_list li .AR:after,#color_2020_list li .AB:after,#color_2020_list li .AS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
#color_2020_list li .LC:after,#color_2020_list li .LR:after,#color_2020_list li .LB:after,#color_2020_list li .LS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
#color_2020_list li .MC:after,#color_2020_list li .MR:after,#color_2020_list li .MB:after,#color_2020_list li .MS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
#color_2020_list li .CR:after,#color_2020_list li .CB:after,#color_2020_list li .CS:after{position: absolute;left: 0;top: 0;content: "";width: 100%;height: 100%;opacity: 0;background-color:#ccc;border-radius: 0 10px 0 10px;}
/*.noclk{pointer-events: none;transform: scale(1)!important;background-color: #ccc!important;}*/
.noclk{pointer-events: none;transform: scale(1)!important;opacity: 0.3;position:relative;}
.noclk:hover{cursor:text !important}
/*.noclk:after{opacity: 0!important;}*/
.color-title{font-size: 14px;background-color: #c9b495;width: 100%;color:#fff;height: 26px;line-height: 26px;margin-bottom:6px;}

#color_2020_list .type_content{width:100%;padding:0;display:inline-block;}
.type_content ul{width:91%;margin:0 auto;}
.type_content p{color:#A6AD9D;font-size:16px;text-align:center;margin: 10px auto;}
.type_content.m-t .color_type_list li{width:100%}
.type_content.m-m{margin-bottom: 20px;}
.type_content.m-m .color_type_list li,.type_content.m-b .color_type_list li{width:23%;margin: 0.5% 1%; display:inline-block; text-align:center;}
.color_type_list li span{width:43px;height:38px;margin-bottom:5px;}
.type_content.m-t .color_type_list li span{width:94%;height:38px;margin-bottom:5px;}
.color_type_list li:nth-child(odd) span{margin-right:4px;}
.color_40icon{height: 38px; width: 41px;margin-bottom: 1px;}
.l-3 ul.color_40_list {padding-left:6px !important;}
.r-2 ul.color_40_list{padding-right:6px !important;}
.color_40icon, .color_icon_type{display:inline-block; border-radius:0 10px 0 10px; box-shadow:0px 2px 2px #cac3c1; line-height:15px; font-size:10px; text-align:center; overflow:hidden;
position:relative; cursor:pointer;}
.color_40icon font, .color_icon_type font{width: 100%;visibility: hidden !important;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(0.8);color: #ffffff !important;font-size:13px;}
#color_desc{background-color:#BBCFC7;color:#333;font-weight:bold;text-align:center;height:34px;line-height:34px;}
.color_select_cont{position: absolute;top:0;right: 0;z-index: 20;height: 100%;width: 37px;}
.color_select_cont_colors{display: inline-block;width:25%;position: relative;margin-left: -3px;}
.big_box{text-align: center;width:75%; float:right;}
.color_type_list {line-height: 0}
.type_content:nth-child(2){border-right: none;}
.swiper-fyq{text-align: center;margin-top: 20px;}
.swiper-fyq .swiper-button-prevs{background:url(../image/swiper-left.png) no-repeat;display: inline-block;width: 36px;height: 36px;border-radius: 50%;vertical-align: middle;cursor: pointer;}
.swiper-fyq .swiper-button-nexts{background:url(../image/swiper-right.png) no-repeat;display: inline-block;width: 36px;height: 36px;border-radius: 50%;vertical-align: middle;cursor: pointer;}
.scal{text-align: center;}
.swiper-fyq .swiper-pagination{position: unset;display: inline-block;margin: 0 5px;vertical-align: middle;}
.swiper-fyq .swiper-pagination-bullet{width: 10px;height: 10px;margin: 0 5px;}
.swiper-fyq .swiper-pagination-bullet-active{background: #3d5174 !important;}
.scal >div{padding: 5px 0;}
.tindex{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 25px;}
.load_big_box{text-align: center;padding: 2em 0px;z-index: 2000000;position: relative;top: 0;left: 0;transform: translate(0%);}

.color_40icon:hover, .color_icon_type:hover{transform:scale(1.1) !important;}
.color_40icon:hover font, .color_icon_type:hover font{visibility:visible !important;}
.icolor-products img,.icolor-colors img {max-width: 100% !important;}
.icolor-products,.icolor-colors {max-width:1126px !important;margin:0 auto;text-align:center}
.icolor-products .col-sm-2 {width:20%}
.icolor-products h2,.icolor-colors h2 {border-left:solid 6px #bbcfc7;padding-left:10px;font-size:16px;font-weight: bold;line-height: 25px;margin-top:20px;margin-bottom:20px;text-align:left;}
.icolor-colors h3 {text-align:left;}
.icolor-colors h3 a {text-align:left;color:#333;text-decoration:none;font-size:26px;line-height:42px;}
.icolor-products div,.icolor-colors div {font-size:12px;text-align: center}
.icolor-products div {min-height: 220px}
.icolor-products div div{padding-top:6px;padding-bottom:5px;margin-bottom:10px}
.icolor-products div div:hover {-webkit-box-shadow:1px 2px 2px 1px #d2d2d2;-moz-box-shadow:1px 2px 2px 1px #d2d2d2;box-shadow:1px 2px 2px 1px #d2d2d2;}
.icolor-products img {padding-bottom:10px;}
.icolor-colors-content {display:block;height:150px;background:url(../image/bg-icolor-colors-pc.jpg) no-repeat left top;min-height: 150px;}

@media screen and (max-width: 900px) {
.big_box{text-align: center;width: 100%;}
.icolor-banner h2 {top:10%;left:24%;padding:10px 20px;}
.icolor-banner h2 img {max-width:80%}
.color_select_cont_colors{width: 100%;padding-top: 60px;}
#color40_list{height: 260px;}
/*#color40_list{padding: 10px;overflow: auto;width: 100%;box-sizing: border-box;}*/
.l-3{display: inline-block;width: 100%;box-sizing: border-box;height: 135px;}
.r-2{display: inline-block;width: 100%;box-sizing: border-box;}
.l-3 .color_40_list li{width:31%;margin:0.5%;margin-bottom: 1px;}
.r-2 .color_40_list li{width:48%;margin:0.5% 1%;margin-bottom: 1px;}
.l-3,.r-2{position: relative;}
.l-3 .color-title{font-size: 14px;width: 26px;height: 121px;line-height: 24px;vertical-align: middle;padding: 14px 0;position: absolute;left: 0;top: 5px;}
.r-2 .color-title{    font-size: 14px;width: 26px;height: 84px;line-height: 16px;vertical-align: middle;padding: 2px 0;position: absolute;left: 0; top: 5px;}
.l-3 ul,.r-2 ul{position: absolute;left: 40px;top:6px;}
.color_40_list{width: 450px;text-align: left;}
#color_content{width: 100%;min-height:215px}
#dec_text{text-indent: 0;text-align: center;font-size: 12px;}
.l-3 .color_40_list li{width: 41px;margin:0 3px 3px 0;}
.r-2 .color_40_list li{width: 41px;margin:0 3px 3px 0;}
.color_40icon{width: 40px;height: 35px;}
.color_type_list li{width: 25px;}


.color_type_list li span{width: 43px;height: 38px;margin:3px;}
.color_tools_pic img{width: 100%}
#type_all{height: 216px;}
.type.type_3 .room, .type.type_4 .room{width: 25px;font-size: 12px;padding: 0  5px;}
.type.type_4 .room:nth-child(1):after, .type.type_4 .room:nth-child(2):after,.type.type_4 .room:nth-child(3):after, .type.type_4 .room:nth-child(4):after, .type.type_3 .room:nth-child(1):after, .type.type_3 .room:nth-child(2):after, .type.type_3 .room:nth-child(3):after{left: 54px;}

.type_content.m-t{display: inline-block;width: 50px!important;margin: 0;position: absolute;left: 0;}
.type_content.m-m{display: inline-block;width: 210px!important;margin: 0;position: absolute;left: 50px;}
.type_content.m-b{display: inline-block;width: 270px!important;margin: 0;position: absolute;left: 280px;}
.type_content.m-t .color_type_list li,.type_content.m-m .color_type_list li,.type_content.m-b .color_type_list li{width:48px;}
.type_content.m-t .color_type_list li span{height: 177px;}

#button_color_select{margin: 15px 0;height: auto;}
.color_select_cont{top: 95%;left: 0;right: 0;height: auto;width: 100%;}
.type_content ul{width: auto;margin: 0 auto;display: inline-block;text-align: left;}
.button_NE.active:after, .button_US.active:after, .button_LE.active:after, .button_MT.active:after, .button_NC.active:after{margin-bottom: 14px;}
#type_title{text-align: center;margin: 45px 0 0 0;vertical-align: bottom;height: 36px;position: relative;}
#type_title{margin: 0;margin-bottom: 0px;font-size: 10px;}
#type_title div{display: inline-block;height: 30px;width: 20%;line-height: 30px;border-radius: 10px 10px 0 0;color:#fff;font-weight: bold;position: relative;vertical-align: bottom;position: absolute;
    margin-top: 6px;}
.button_NE.active, .button_US.active, .button_LE.active, .button_MT.active, .button_NC.active{height: 36px!important;font-size: 14px;margin-top: 0!important;line-height: 36px!important;z-index: 6!important;}
.button_NC.active{line-height: 18px!important;}
.button_NE{background-color:#c2ab7e;left: 0;z-index: 5}
.button_US{background-color:#9ba785;left: 20%;z-index: 4}
.button_LE{background-color:#7e99ae;left: 40%;z-index: 3}
.button_MT{background-color:#a68a81;left: 60%;z-index: 2}
.button_NC{background-color:#8e8ca8;left: 80%;z-index: 1;}

#button_color_select div.button_color_select1.active:after, #button_color_select div.button_color_select2.active:after{display: none;}
.button_color_select2{display: none !important;}
.button_color_select1, .button_color_select3{color:#333;width: 43%;height: 52px;background:url(../image/button_border.png) no-repeat center;line-height: 44px;display: inline-block !important;}
.button_color_select1.active, .button_color_select3.active{background:url(../image/button_select.png) no-repeat center;}
#button_color_select div.active{background-color: unset !important;}
#button_color_select div{height: 52px;width: 41%;color: #333;background-color: unset !important;}
#color_2020_list{height: 220px;width: 100%;overflow: auto;position: relative;}
.type.type_4 .room.active, .type.type_3 .room.active{width: 25px;}
.type_content{border-right: none;}
.type_content p{margin: 0;display: inline-block;vertical-align: top;line-height: 34px;}
#button_color_select div span{display: inline;}
.type_content p{font-size:14px;}
.col-xs-6 img {max-width: 100%;}
.icolor-products .col-xs-3 {width:50%}
.icolor-products div {min-height: 195px}
.icolor-products div div{padding-top:2px;padding-bottom:2px;margin-bottom:0;}
.icolor-colors-content {background:url(../image/bg-icolor-colors-mobile.jpg) no-repeat left top;}
.room.active:after{display:none !important;}
#color_desc{font-weight:bold;text-align:center;height:30px;line-height:30px;font-size:13px;}
}