@charset "utf-8";

.testtest{
	display: flex;
}

.code_slider_content{
	width: 100%;
	margin: auto;
    margin-bottom: 100px;
	height: auto;
}

.code_slider{
	-moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    border: 5px solid #fff;
    background: #fff;
	height: auto;
}

.coordinate-box-l{
	margin: 0 auto;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
}


.code_slider img{
	width: auto;
    height: auto;
    max-height: 100%;
}

.coordinate-box-l img {
    margin: auto;
    border-radius: 5px;
	width: 60%;
}


.code_slider_devide{
	background-image: url(https://kisste.itembox.design/item/slide-background.png);
	justify-content: space-between;
	flex-wrap: wrap !important;
	padding: 10px;
	
	
}

.coordinate-box-r{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 5px;
}

.coordinate-item{
	width: 30%;
	display: block;
	background-color: #fff;
	text-align: center;
	border: #F7F8F4 solid 2px;
	box-shadow: #ccc 3px 3px 3px;
	padding: 10px 0;
    margin-right: 2%;
    line-height: 1.5rem;
    border-radius: 5px;
	margin-top: 5px;
}




.multiple{
	width: 100%;
}

.multiple_pic img{
	width: 100%;
}

.code_slider_content{
	width: 100%;
}

.coordinate-item img{
	margin: auto;
}





@media screen and (min-width:768px) { 
	.code_slider_devide{
		display: flex !important;
		
	}
	
	
	.coordinate-box-l img {
	height: 100% !important;
	width: auto !important;
}
	
	
	
	
	.coordinate-box-r{
	width: 60%;
	display: flex;
	flex-wrap: wrap;
}
}

.code_slider_content .slick-dots{
	position: static;
	display: flex;
	justify-content: center;
}


.code_slider_content .slick-dots li{
	width: 60px;
	height: 80px;
}

.code_slider_content .slick-dots img{
	width: auto;
	height: auto;
}




.coordinate-slider .coordinate-r .coordinate-item .product-name:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f0da";
    color: #b5b5b5;
    font-size: 1.3rem;
    position: absolute;
    right: 5%;
}


.coordinate-box-r img{
	width: auto;
    height: auto;
    width: 85%;
    max-height: 100%;
}


.color-square-devide{
	display: flex;
	justify-content:center
	
}

.color-square-devideB{
	display: flex;
	justify-content:center;
	margin-top: 3px;
	
}

.color-square{
	margin: 0 2px;
	width: 11px;
	height: 11px;
}

.color-squareA{
	background: #c61958;
}

.color-squareB{
	background: #ca831b;
}

.color-squareC{
	background: #2393ab;
}

.color-squareD{
	background: #f5dfb0;
}

.color-squareE{
	background: #ff8ecd;
}

.color-squareF{
	background: #eeeeee;
}

.color-squareG{
	background: #3a4b77;
}

.color-squareH{
	background: #1d1d1f;
}

.color-squareI{
	background: #74c356;
}

.color-squareJ{
	background: #b83e0d;
}

.color-squareK{
	background: #ba2d19;
}

.color-squareL{
	background: #dc9f8a;
}

.color-squareM{
	background: #a5251a;
}

.color-squareN{
	background: #6e322a;
}

.color-squareO{
	background: #ffeeb6;
}


.color-squareP{
	background: #944d1f;
}

.color-squareQ{
	background: #c39132;
}

.color-squareR{
	background: #8e6c2c;
}

.color-squareS{
	background: #a796a6;
}

.color-squareT{
	background: #321f32;
}

.color-squareU{
	background: #32546d;
}

.color-squareV{
	background: #a5a3b0;
}

.color-squareW{
	background: #413f42;
}

.color-squareX{
	background: #262425;
}

.slick-dots img{
		opacity: 0.5;
	}

.slick-dots .slick-active img{
	opacity: 1;
}


.color-square-box{
	margin-top: 5px;
}


.color-squareA1{
	background: #e6c4b8;
}

.color-squareB1{
	background: #d5c8d9;
}

.color-squareC1{
	background: #d7dabd;
}

.color-squareD1{
	background: #bccfd3;
}

.color-squareE1{
	background: #303143;
}

.color-squareF1{
	background: #ede4e5;
}

.color-squareG1{
	background: #9e9898;
}

.color-squareH1{
	background: #fae8da;
}

.color-squareI1{
	background: #ece6e6;
}

.color-squareJ1{
	background: #f1e8df;
}

.color-squareK1{
	background: #323e4c;
}

.color-squareL1{
	background: #938f90;
}

.color-squareM1{
	background: #dcbe80;
}

.color-squareN1{
	background: #d57e6b;
}

.color-squareA2{
	background: #dbd5b3;
}

.color-squareB2{
	background: #dfddd1;
}

.coordinate-item-transparent{
	opacity: 0;
}

@media screen and (max-width:767px) { 
	.coordinate-item-transparent{
	display: none;
}
}