.detail-page{
margin-top: 38px;
margin-bottom: 98px;
}
.backgallery{
position: relative;
font-size: 13px;
display: inline-block;
color: #73787E;
font-weight: 400;
font-family: var(--font3);
padding-left: 24px;
letter-spacing: 0.1px;
}
.backgallery::before,.backgallery::after{
content: "";
position: absolute;
border-right: 1px solid #73787E;
height: 46%;
z-index: -1;
left: 8px;
}
.backgallery::before{
top: 8%;
transform: translateY(-50%);
transform: skewX(-45deg);
}
.backgallery::after{
bottom: 2px;
top: auto;
transform: skewX(45deg);
}
.detail-content{
display: flex;
justify-content: space-between;
margin-top: 14px;
margin-bottom: 80px;
}
.detail-content .common-ttl{
text-align: left;
}
.detail-content .slider-blk{
width: 32.5%;
}
.detail-content .slider-blk .slider-for {
width: 100%;
overflow: hidden;
border-radius: 4px;
}
.detail-content  .slide-content{
position: relative;;
}
.detail-content  .slide-content img{
height: 464px;
object-fit: cover;
}
.detail-content .maximum-blk{
position: absolute;
top: 11px;
width: 37px;
height: 37px;
right: 13px;
}
.detail-content .maximum-blk img{
height: 37px;
object-fit: cover;
cursor: pointer;
}
.detail-content .thumb-slide{
margin-top: 5px;
}
.detail-content .thumb-slide{
width: 66px;
}
.detail-content .video-slide{
position: relative;
}
.detail-content .video-slide:before{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
content: "";
position: absolute;
}
.detail-content .video-slide::after{
position: absolute;
content:"";
width: 20px;
height: 20px;
background:url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_video.svg) no-repeat center/cover;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.detail-content .slider-nav{
width:220px;
}
.detail-content .thumb-slide{
margin-right: 10px;
}
.detail-content .thumb-slide img{
width: 66px;
height: 57px;
object-fit: cover;
}
.detail-txt-blk{
width: 66%;
}
.detail-txt-blk .detail-info{
display: flex;
justify-content: space-between;
}
.detail-txt-blk .id{
font-size: 18px;
font-weight: 600;
color: var(--secondary-color);
font-family: var(--font3);
padding: 19px 0 14px;
letter-spacing: -0.5px;
}
.detail-txt-blk .price-blk{
text-align: right;
}
.detail-txt-blk .instock-btn{
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
background-color: #23BB0B;
outline: none;
border: 1px solid #23BB0B;
padding: 8px 9px;
letter-spacing: 0.1px;
cursor: auto;
}
.detail-txt-blk .price{
font-size: 24px;
font-weight: 600;
font-family: var(--font3);
letter-spacing: -0.5px;
padding: 6px 0 11px;
}
.detail-txt-blk  .discount-btn{
color: var(--btn-color);
font-size: 16px;
font-family: var(--font1);
font-weight: 500;
padding: 9px 14px 9px 9px;
border:1px solid var(--btn-color);
background-color: #fff;
cursor: auto;
}
.detail-txt-blk .verify-blk{
display: flex;
justify-content: space-between;
margin: 6px 0;
}
.detail-txt-blk .verify-blk a{
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
color: #7B3B00;
text-decoration: underline;
display: block;
position: relative;
background-color: #FFF3D2;
padding: 8px 17px 12px 39px;
letter-spacing: 0.1px;
}
.detail-txt-blk .verify-blk a.verify::before{
position: absolute;
content: "";
left: 13px;
top: 12%;
width: 24px;
height: 24px;
}
.detail-txt-blk .verify-blk .certificate{
margin-right: 2px;
}
.detail-txt-blk .verify-blk .certificate::before{
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_sketch.svg) no-repeat center/cover;
}
.detail-txt-blk .verify-blk .describe::before{
background: url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_star.svg) no-repeat center/cover;
}
.diamond-details{
padding: 25px 0;
}
.diamond-details .diamond-detail-ttl{
font-size: 16px;
font-weight: 600;
font-family: var(--font3);
letter-spacing: -0.5px;
position: relative;
}
.diamond-details .diamond-accordetail-list .diamond-detail-ttl::before,.diamond-details .diamond-accordetail-list .diamond-detail-ttl::after{
content: "";
position: absolute;
background-color: var(--black);
}
.diamond-details .diamond-accordetail-list .diamond-detail-ttl::after{
top: 6px;
right: 6px;
width: 15px;
height: 3px;
}
.diamond-details .diamond-accordetail-list .diamond-detail-ttl::before{
top: 0;
right: 12px;
width: 3px;
height: 15px;
}
.diamond-details .diamond-accordetail-list .diamond-detail-ttl.active::before {
background-color: transparent;
}
.diamond-details .diamond-details-list{
display: flex;
padding: 9px 0 23px;
}
.diamond-details .diamond-details-list li{
display: flex;
flex-direction: column;
width: 113px;
text-align: center;
}
.diamond-details .diamond-details-list li .category-ttl{
font-size: 16px;
font-weight: 400;
font-family: var(--font3);
position: relative;
letter-spacing: -0.5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.diamond-details .diamond-details-list li span{
font-size: 18px;
font-weight: 600;
font-family: var(--font3);
padding: 8px 8px;
border: 1px solid #CACDD2;
}
.diamond-details .diamond-details-list li:nth-child(2n+0){
background-color:#EAEBED;
}
.diamond-details .diamond-details-list li span img{
width: 16px;
margin: 0;
margin-left: 10px;
}
.diamond-details .diamond-accordetail-list li{
padding: 20px 0;
border-top: 1px solid #CACDD2;
}
.diamond-details .diamond-accordetail-list li:last-child{
border-bottom: 1px solid #CACDD2;
}
.diamond-details .diamond-details-list li{
border-top: 1px solid transparent;
padding: 0;
}
.diamond-details .diamond-accordetail-list .diamond-details-list{
padding: 9px 0 0;
}
.diamond-details .diamond-accordetail-list .diamond-content{
display: none;
}
.diamond-details .diamond-accordetail-list{
margin-bottom: 40px;
}
.appoint-btn{
font-size: 16px;
color: var(--btn-color);
background-color: var(--white);
border:1px solid var(--btn-color);
}
.send-btn{
font-size: 16px;
}
.detail-page .recent-detail-list{
margin-left: 8.5%;
margin-right: auto;
}
.detail-page .recent-detail-list .diamond-list{
flex-wrap: nowrap;
display: -webkit-box;
overflow-x: scroll;
padding: 39px 0 14px;
}
.detail-page .recent-detail-list .diamond-list li{
width: 21.6%;
}.detail-page .recent-detail-list .diamond-list li:nth-child(4n+0){
margin-right: 18px;
}
.detail-page .sub-ttl{
text-align: center;
color: var(--black);
}
.detail-page .recent-detail-list .diamond-list::-webkit-scrollbar {
width: 2px;
height: 2px;
border-radius: 3px;
}
.detail-page .recent-detail-list .diamond-list::-webkit-scrollbar-track {
background: transparent;
}
.detail-page .recent-detail-list .diamond-list::-webkit-scrollbar-thumb {
background: #888;
} .detail-page .recent-detail-list .diamond-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
@media only screen and (min-width:768px) and (max-width:1280px) {
.detail-page{
margin-top: 2.969vw;
margin-bottom: 7.656vw;
}
.backgallery{
font-size: 1.016vw;
padding-left: 1.875vw;
letter-spacing: 0.008vw;
}
.backgallery::before,.backgallery::after{
left: 0.625vw;
}
.backgallery::after{
bottom: 0.156vw;
}
.detail-content{
margin-top: 1.094vw;
margin-bottom: 6.25vw;
}
.detail-content  .slide-content img{
height: 36.25vw;
}
.detail-content .maximum-blk{
top: 0.859vw;
width: 2.891vw;
height: 2.891vw;
right: 1.016vw;
}
.detail-content .maximum-blk img{
height: 2.891vw;
}
.detail-content .thumb-slide{
margin-top: 0.391vw;
}
.detail-content .thumb-slide{
width: 5.156vw;
}
.detail-content .video-slide::after{
width: 1.563vw;
height: 1.563vw;
}
.detail-content .slider-nav{
width:17.188vw;
}
.detail-content .thumb-slide{
margin-right: 0.781vw;
}
.detail-content .thumb-slide img{
width: 5.156vw;
height: 4.453vw;
}
.detail-txt-blk .id{
font-size: 1.406vw;
padding: 1.484vw 0 1.094vw;
letter-spacing: -0.039vw;
}
.detail-txt-blk .instock-btn{
font-size: 1.25vw;
padding: 0.625vw 0.703vw;
letter-spacing: 0.008vw;
}
.detail-txt-blk .price{
font-size: 1.875vw;
letter-spacing: -0.039vw;
padding: 0.469vw 0 0.859vw;
}
.detail-txt-blk  .discount-btn{
font-size: 1.25vw;
padding: 0.703vw 1.094vw 0.703vw 0.703vw;
}
.detail-txt-blk .verify-blk{
margin: 0.469vw 0;
}
.detail-txt-blk .verify-blk a{
font-size: 1.25vw;
padding: 0.625vw 1.328vw 0.938vw 3.047vw;
letter-spacing: 0.008vw;
}
.detail-txt-blk .verify-blk a.verify::before{
left: 1.016vw;
width: 1.875vw;
height: 1.875vw;
}
.detail-txt-blk .verify-blk .certificate{
margin-right: 0.156vw;
}
.diamond-details{
padding: 1.953vw 0;
}
.diamond-details .diamond-detail-ttl{
font-size: 1.25vw;
}
.diamond-details .diamond-details-list{
padding: 0.703vw 0 1.797vw;
}
.diamond-details .diamond-details-list li{
width: 8.828vw;
}
.diamond-details .diamond-details-list li .category-ttl{
font-size: 1.25vw;
}
.diamond-details .diamond-details-list li span{
font-size: 1.406vw;
padding: 0.625vw 0.625vw;
}
.diamond-details .diamond-details-list li span img{
width: 1.25vw;
}
.diamond-details .diamond-accordetail-list li{
padding: 1.563vw 0;
}
.diamond-details .diamond-accordetail-list .diamond-details-list{
padding: 0.703vw 0 0;
}
.diamond-details .diamond-accordetail-list{
margin-bottom: 3.125vw;
}
.appoint-btn{
font-size: 1.25vw;
}
.send-btn{
font-size: 1.25vw;
}
.detail-page .recent-detail-list{
margin-left: 8.5%;
}
.detail-page .recent-detail-list .diamond-list{
padding: 3.047vw 0 1.094vw;
}
.detail-page .sub-ttl{
text-align: center;
}
.detail-page .recent-detail-list .diamond-list::-webkit-scrollbar {
width: 0.156vw;
height: 0.156vw;
border-radius: 0.234vw;
}
}
@media all and (max-width:767.9px) {
.detail-page{
margin-top: 14.933vw;
margin-bottom: 11.2vw;
}
.backgallery{
font-size: 3.467vw;
padding-left: 6.4vw;
letter-spacing: 0.027vw;
}
.backgallery::before,.backgallery::after{
left: 2.133vw;
}
.detail-content{
flex-wrap: wrap;
margin-top: 5.6vw;
margin-bottom: 9.333vw;
}
.detail-content .slider-blk{
width: 100%;
}
.detail-content  .slide-content img{
height: 110.4vw;
}
.detail-content .maximum-blk{
top: 2.933vw;
width: 8vw;
height: 8vw;
right: 2.933vw;
}
.detail-content .maximum-blk img{
height: 8.533vw;
}
.detail-content .thumb-slide{
margin-top: 1.333vw;
}
.detail-content .thumb-slide{
width: 17.6vw;
}
.detail-content .video-slide{
position: relative;
}
.detail-content .video-slide:before{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
content: "";
position: absolute;
}
.detail-content .video-slide::after{
position: absolute;
content:"";
width: 5.333vw;
height: 5.333vw;
background:url(//sumonthazinpann.com/wp-content/themes/diamondempire/assets/img/ico_video.svg) no-repeat center/cover;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.detail-content .slider-nav{
width:58.667vw;
}
.detail-content .thumb-slide{
margin-right: 2.667vw;
}
.detail-content .thumb-slide img{
width: 18.667vw;
height: 12.533vw;
}
.detail-txt-blk{
width: 100%;
}
.detail-txt-blk .detail-info{
display: block;
padding-top: 11.2vw;
}
.detail-content .common-ttl {
font-size: 6.667vw;
letter-spacing: 0.64vw;
}
.detail-txt-blk .id{
font-size: 4.8vw;
padding: 5.067vw 0 4.8vw;
letter-spacing: -0.133vw;
}
.detail-txt-blk .price-blk{
text-align: left;
}
.detail-txt-blk .instock-btn{
font-size: 4.267vw;
padding: 2.133vw 2.4vw;
letter-spacing: 0.027vw;
}
.detail-txt-blk .price{
font-size: 5.333vw;
letter-spacing: -0.133vw;
padding: 5.333vw 0 4.533vw;
}
.detail-txt-blk  .discount-btn{
font-size: 4.267vw;
padding: 2.4vw 3.733vw 2.4vw 2.4vw;
}
.detail-txt-blk .verify-blk{
margin: 3.733vw 0;
justify-content: flex-start;
}
.detail-txt-blk .verify-blk a{
font-size: 4.267vw;
padding: 2.133vw 2.4vw 3.2vw 12.533vw;
letter-spacing: -0.08vw;
width: 44.267vw;
text-align: center;
}
.detail-txt-blk .verify-blk a.verify::before{
left: 4.8vw;
width: 6.4vw;
height: 6.4vw;
}
.detail-txt-blk .verify-blk .certificate{
margin-right: 4.267vw;
}
.detail-txt-blk .verify-blk a.describe::before{
left: 7.733vw;
}
.diamond-details{
padding: 6.667vw 0;
}
.diamond-details .diamond-detail-ttl{
font-size: 4.267vw;
font-weight: 600;
font-family: var(--font3);
letter-spacing: -0.133vw;
position: relative;
}
.diamond-details .diamond-accordetail-list .diamond-detail-ttl::before,.diamond-details .diamond-accordetail-list .diamond-detail-ttl::after{
content: "";
position: absolute;
background-color: var(--black);
}
.diamond-details .diamond-accordetail-list .diamond-detail-ttl::after{
top: 2.4vw;
right: -0.267vw;
width: 4vw;
height: 0.8vw;
}
.diamond-details .diamond-accordetail-list .diamond-detail-ttl::before{
top: 1.067vw;
right: 1.6vw;
width: 0.8vw;
height: 4vw;
}
.diamond-details .diamond-details-list{
flex-direction: column;
padding: 6.133vw 0 5.067vw;
}
.diamond-details .diamond-details-list li{
flex-direction: row;
width: 100%;
text-align: center;
}
.diamond-details .diamond-details-list li .category-ttl{
font-size: 4.267vw;
letter-spacing: -0.133vw;
letter-spacing: -0.133vw;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.diamond-details .diamond-details-list li span{
width: 50%;
font-size: 4.8vw;
padding: 2.133vw 2.133vw;
}
.diamond-details .diamond-details-list li span img{
width: 4.267vw;
margin: 0.533vw 2.4vw;
}
.diamond-details .diamond-accordetail-list li{
padding: 6.4vw 0;
}
.diamond-details .diamond-details-list li{
text-align: left;
border-top: unset;
}
.diamond-details .diamond-accordetail-list .diamond-details-list li{
padding: 0 0;
border-top: unset;
}
.diamond-details .diamond-accordetail-list .diamond-content{
display: none;
}
.diamond-details .diamond-accordetail-list{
margin-bottom: 10.667vw;
}
.appoint-btn{
font-size: 4.267vw;
width: 100%;
justify-content: center;
align-items: center;
display: flex;
border: 0.267vw solid var(--btn-color);
text-align: center;
padding: 2.2vw 6.4vw;
}
.appoint-btn img{
width: 6.4vw;
margin: 0 0.533vw;
}
.send-btn{
font-size: 4.267vw;
width: 100%;
text-align: center;
margin-top: 4.267vw;
}
.detail-page .recent-detail-list{
margin-left: 4.5%;
}
.detail-page .recent-detail-list .diamond-list{
flex-wrap: nowrap;
display: -webkit-box;
overflow-x: scroll;
padding: 7.2vw 0 3.733vw;
}
.detail-page .recent-detail-list .diamond-list li{
width: 71.6%;
}
.detail-page .sub-ttl{
font-size: 6.667vw;
}
.detail-page .diamond-list li a .selected-blk {
top: 3.4vw;
}
.detail-page .diamond-list li a .selected-blk .shape img{
width: 4.8vw;
height: 4.8vw;
}
.detail-page .diamond-list li a .selected-blk .shape {
padding: 2.067vw 0.8vw;
}
.detail-page .diamond-list li .diamond-price {
display: flex;
padding: 3.667vw 2.333vw 2vw;
}
.detail-page .diamond-list li .carat{
width: 62%;
font-size: 4.267vw;
}
.detail-page .diamond-list li .id {
font-size: 3.733vw;
letter-spacing: -0.053vw;
padding: 0.6vw 0;
}
.detail-page .diamond-list li .quality{
font-size: 3.733vw;
}
.detail-page .diamond-list li .quality-list{
padding:3.667vw 5.133vw 2.067vw 1.867vw;
}
.detail-page .diamond-list li .quality-list.color{
padding: 3.667vw 5.133vw 2.067vw 3.867vw;
}
.detail-page .diamond-list li .certificate{
font-size: 3.733vw;
}
.detail-page .diamond-list li .certificate-list {
padding: 3.4vw 0 2.6vw;
letter-spacing: -0.053vw;
}
}