@charset "UTF-8";

/*
360View
--------------------------------------------------------- */

.color_variation {
position: relative;
padding-bottom: 0;
}
.color_variation .image {
position: relative;
margin: 0;
width: 100%;
padding-bottom: 56.25%;
background: #e9e9e9 url(../images/loading.gif) no-repeat center center; 
}
.color_variation .image .inner {
display: none;
position: absolute;
width: 100%;
height: 100%;
lft: 0;
top: 0;
}
.color_variation .image .inner .item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*display: none;*/
line-height: 0;
}
.color_variation .image .inner .item img {
width: 960px;
height: 540px;
cursor: col-resize;
}
.color_variation .image .inner .turn {
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;
z-index: 1;
}
.color_variation .image .inner .turn img {
width: 60px;
height: 60px;
}
.color_variation .image .bar_wrap {
display: none;
width: 100%;
height: 6px;
overflow: hidden;
background: lightgray;
}
.color_variation .image .bar_wrap .bar {
height: 6px;
background: #555555;
}

.color_variation .box-select {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.color_variation .box-select .box-inner {
position: relative;
padding: 0 15px 8px 15px;
}
@media (max-width: 767px) {
.color_variation .image {
width: 100%;
padding-bottom: 56.25%;
}
.color_variation .image .inner .item img {
width: 100%;
height: auto;
}
.color_variation .box-select {
position: relative;
width: auto;
bottom: auto;
left: auto;
}
}
.color_variation .color_select p {
line-height: 1.5;
margin: 0 20px 15px;
font-size: 85.71429%;
}
.color_variation .color_select ul {
text-align: center;
}

@media (max-width: 767px) {
.color_variation .color_select ul {
text-align: left;
}
}
.color_variation .color_select ul li {
width: 48px;
height: 48px;
overflow: hidden;
display: inline-block;
position: relative;
margin: 0 6px 10px;
border-radius: 24px;
box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.color_variation .color_select ul li img {
width: 48px;
height: 48px;
border-radius: 24px;
}
.color_variation .color_select ul li.current {
box-shadow: none;
}
.color_variation .color_select ul li.current:after {
width: 44px;
height: 44px;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 22px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.3) inset;
}
.color_variation .grade_select {
margin: 20px 0 15px;
}
.color_variation .grade_select .box-left,
.color_variation .grade_select .box-right {
float:left;
}
.color_variation .grade_select .box-left {
margin-right: 20px;
}
.color_variation .grade_select h1 {
display: inline-block;
padding: 6px 10px 6px 0;
font-size: 14px;
line-height: 16px;
float: left;
-webkit-text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
-moz-text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
-ms-text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
}
.color_variation .grade_select select {
width: auto;
padding: 6px;
font-size: 16px;
float: left;
}
.color_variation .grade_select #notes-360 {
padding: 6px 0 6px 0;
font-size: 12px;
line-height: 16px;
-webkit-text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
-moz-text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
-ms-text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
text-shadow: 
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff,
	 1px  1px 2px #ffffff,
	 1px -1px 2px #ffffff,
	-1px  1px 2px #ffffff,
	-1px -1px 2px #ffffff;
}

@media (max-width: 767px) {
.color_variation .grade_select h1 {
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
text-shadow: none;
}
.color_variation .grade_select .box-right {
margin-top: 8px;
}
.color_variation .grade_select #notes-360 {
-webkit-text-shadow: none;
-moz-text-shadow: none;
-ms-text-shadow: none;
text-shadow: none;
}
}

.color_variation .color_detail {
position: relative;
margin: 0 20px 15px;
padding-bottom: 12px;
}
.color_variation .color_detail:after {
width: 18px;
height: 12px;
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -9px;
background: url(../images/clr_arr.png) no-repeat left top;
background-size: 18px 12px;
}
.color_variation .color_detail .inner {
width: 100%;
display: table;
background: #f0f0f0;
}
.color_variation .color_detail .inner .image {
width: 44px;
display: table-cell;
vertical-align: middle;
padding: 15px;
}
.color_variation .color_detail .inner .image img {
width: 44px;
height: 44px;
box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.6);
border-radius: 4px;
}
.color_variation .color_detail .inner .text {
display: table-cell;
line-height: 1.25;
vertical-align: middle;
padding: 15px 15px 15px 0;
font-size: 78.57143%;
}
.color_variation .color_chip_list ul {
text-align: center;
}
.color_variation .color_chip_list ul li {
width: 44px;
height: 44px;
overflow: hidden;
display: inline-block;
position: relative;
margin: 0 6px 10px;
border-radius: 4px;
box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.6);
}
.color_variation .color_chip_list ul li img {
width: 44px;
height: 44px;
border-radius: 4px;
}
.color_variation .color_chip_list ul li.current {
box-shadow: none;
}
.color_variation .color_chip_list ul li.current:after {
width: 44px;
height: 44px;
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.3) inset;
}