/*------------------------------------------
List
---------------------------------------------*/
.item_product {position: relative;margin-bottom: 15rem; }
.item_product .stitle_area {position: relative; display:flex; justify-content: flex-end;  align-items: center; margin-bottom: 3rem;}
.item_product .stitle_area .breadcrumb {position: relative;}
.item_product .stitle_area .breadcrumb ul {display:flex;}
.item_product .stitle_area .breadcrumb ul li {display:flex;align-items: center;font-size: .8em;}
.item_product .stitle_area .breadcrumb ul li i {margin:0 1rem;opacity:.5;}
.item_product .stitle_area .breadcrumb ul li.home i {opacity:1; margin:0; 	}

.item_product .product_area {position: relative; display:flex; flex-wrap: wrap;}
.item_product .product_area li {width: 25%;}
.item_product .product_area li.nodata_box {width: 100%;display:flex; flex-direction: column;  justify-content: center;  align-items: center;}
.item_product .product_area li.nodata_box i {font-size:3em;}
.item_product .product_area li.nodata_box p {font-size: 1.2em;}

.product_box {margin:1rem;margin-bottom: 5rem; display: flex; flex-direction: column;  align-items: center;}
.product_box .thumbnail {position: relative; width: 100%;max-width:34rem; height: 45rem; max-height:45rem;background: var(--gray2);display:flex;    align-items: center;	}
.product_box .thumbnail .tag_box {position: absolute; top:1.5rem; left:1.5rem; display:flex;}
.product_box .thumbnail .tag_box em{font-size: .7em;margin:0 0.1rem; padding:.3rem .5rem; display: inline-block; color:var(--white); background-color: var(--black);}
.product_box .thumbnail .thumb_img {overflow:hidden;  mix-blend-mode: multiply; }
.product_box .thumbnail .thumb_img img{width: 100%;}
.product_box .title { margin-top: 2rem; text-align: center;}
.product_box .title span {font-size: .8em;display: block; margin-bottom: 1rem;}
.product_box .title p {font-size: 1.125em;}


@media screen and (max-width: 1400px) {
	.product_box .thumbnail {height:auto; padding:3rem 0; }
}
@media screen and (max-width: 1024px) {
	.item_product .product_area li {width: 33.33%;}
}
@media screen and (max-width: 768px) { 
	
	.item_product .stitle_area .breadcrumb ul li {font-size: 1em;}
	.item_product .product_area li {width: 50%; padding:2rem 0;}

	.product_box {margin-bottom: 0;}

	.product_box .thumbnail {padding:2rem 0; }
}
@media screen and (max-width: 568px) { 
	.product_box .thumbnail {padding:0}
}



/*------------------------------------------
View
---------------------------------------------*/
.item_proview {position: relative; display:flex;}
.item_proview .goto_back {position: absolute; top:5%; left:5%	;z-index:5;}
.item_proview .goto_back a {font-size: 1.25em;}
.item_proview .goto_back i {}
.item_proview .goto_back span {}

.item_proview .thumb_wrap {position:sticky; top:0; width: 50%; background-color:var(--gray2); height: 100vh;overflow:hidden;}
.item_proview .thumb_wrap .thumb_area {width: 100%; height: 100%; position: relative;}
.item_proview .thumb_wrap .thumb_area .swiper-pagination {margin-bottom: 2rem;}
.item_proview .thumb_wrap .thumb_area .proview_img {width: 100%;  height: 100%; mix-blend-mode: multiply; }
.item_proview .thumb_wrap .thumb_area .proview_img ul {}
.item_proview .thumb_wrap .thumb_area .proview_img ul li {position: relative;  }
.item_proview .thumb_wrap .thumb_area .proview_img ul li img {position: absolute; left:50%; top:50%;transform:translate(-50%, -50%); }
.item_proview .thumb_wrap .thumb_area .proview_thum {position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%); padding:1rem;}
.item_proview .thumb_wrap .thumb_area .proview_thum ul {}
.item_proview .thumb_wrap .thumb_area .proview_thum ul li { width: 7.5rem; height:7.5rem;cursor: pointer; overflow:hidden; opacity:.5; text-align: center; background-color:var(--white); position: relative; margin: 0 .5rem;}
.item_proview .thumb_wrap .thumb_area .proview_thum ul li.swiper-slide-thumb-active {opacity: 1; border: 3px solid var(--white); box-sizing: border-box; box-shadow: 0px 3px 4px 0px rgb(0 0 0 / 25%);}
.item_proview .thumb_wrap .thumb_area .proview_thum ul li img {width: auto; height: 100%;position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


.item_proview .spec_wrap {position: relative; width: 50%;	min-height: 100vh;}
.item_proview .spec_wrap .spec_area {width: auto; margin: 7rem;	}
.item_proview .spec_wrap .spec_area section {margin-bottom: 5rem;}
.item_proview .spec_wrap .spec_area .spec_top {position: relative;}
.item_proview .spec_wrap .spec_area .spec_top .title {margin-bottom: 3rem;}
.item_proview .spec_wrap .spec_area .spec_top .title span { font-size: .9em;display: block;margin-bottom: 1rem;}
.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 2em; }
.item_proview .spec_wrap .spec_area .spec_top .descrip {}

.item_proview .spec_wrap .spec_area .spec_info {position: relative; }
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit{position: relative; cursor: pointer;padding:1.5rem 0; border-bottom: 2px solid var(--black);}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit > span {font-size:  1.125em;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-wrap { position: absolute; top:50%; right: 10px; transform: translate(0, -50%); }
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-wrap i {}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-top {  display: none;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit .arrow-bottom {  display: block;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit.on .arrow-bottom {  display: none;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_tit.on .arrow-top {  display: block; }
.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont {  overflow: hidden; width: 100%; position: relative; 	}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont ul li {border-bottom:1px solid var(--gray3); padding:2rem 0; font-size: .9em;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont em { display: inline-block; margin-bottom: .5rem;font-weight: bold;}
.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont p {}

.item_proview .spec_wrap .spec_area .spec_link {position: relative; width: 100%; display:flex;     justify-content: flex-end;}
.item_proview .spec_wrap .spec_area .spec_link a {position: relative; width: 22rem; height: 6.5rem;background-color: var(--black); color:var(--white); display:flex; align-items: center; justify-content: center;}

.item_proview .spec_wrap .spec_area .spec_detail {position: relative; line-height: 150%;}
.item_proview .spec_wrap .spec_area .spec_detail img {width: 100%; height: auto;}

@media screen and (max-width: 1400px) {
	.item_proview .spec_wrap .spec_area .spec_top .title h2 {font-size: 1.5em;}
}
@media screen and (max-width: 1200px) {
	.item_proview .thumb_wrap .thumb_area .proview_img ul li img {width: 80%;}
}
@media screen and (max-width: 1024px) {
	
}
@media screen and (max-width: 768px) { 
	.item_proview {flex-direction: column;}
	.item_proview .thumb_wrap {position: relative; width: 100%; height: 50vh;}
	.item_proview .thumb_wrap .thumb_area .proview_img ul li img {width: auto; height: 100%;}
	.item_proview .spec_wrap {width: 100%; min-height: auto;}
	.item_proview .spec_wrap .spec_area {margin:7rem 5%;}
	.item_proview .spec_wrap .spec_area .spec_info .specinfo_cont ul li {font-size: 1em;}
	.item_proview .thumb_wrap .thumb_area .proview_thum {display: none;}
}
@media screen and (max-width: 568px) { 
	.item_proview .thumb_wrap .thumb_area .proview_img ul li img {width: auto; height: 70%;}
}


/*------------------------------------------
etc
---------------------------------------------*/
.paging {margin:5rem 0 10rem;}
.paging ul {display: flex; align-items: center; justify-content: center;}
.paging ul li { font-size: 2em; 	}
.paging ul li a {display: flex; opacity:.4; width: 5rem; height: 5rem;    align-items: center;  justify-content: center;}
.paging ul li.active a {opacity:1;}
.paging ul li a:hover {opacity:1;}
.paging ul li i { font-size: .5em;}

.paging  ul li.page-item {width: 35px; height: 40px; margin:0 1rem;}
.paging  ul li.disabled {margin:0 .2rem;}
.paging  ul li.disabled  a.page-link {}
.paging  ul li.active {}
.paging  ul li.active a.page-link {color: var(--board-point); font-weight:700;}
.paging  ul li a.page-link  {position: relative;width: 100%; height: 100%;display: inline-block; text-align: center; line-height: 40px; font-weight: 300; color:var(--board-color3);}
.paging  ul li a.page-link > i {left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);}
.paging  ul li a.page-link > i.icon-arr-page {width:14px; height:14px; background-repeat:no-repeat; background-position: 50% 50%;}
.paging  ul li a.page-link > i.icon-arr-page.prev {background-image: url(../images/ico_arr_prev.png);}
.paging  ul li a.page-link > i.icon-arr-page.next {background-image: url(../images/ico_arr_next.png);}
.paging  ul li a.page-link > i.icon-arr-page.first {background-image: url(../images/ico_arr_first.png);}
.paging  ul li a.page-link > i.icon-arr-page.last {background-image: url(../images/ico_arr_last.png);}


@media screen and (max-width: 768px) { 
	.paging ul li {font-size: 1.5em;}
	.paging ul li a.page-link {line-height: 100%;}
	.paging ul li.page-item {width: 3rem; height: 3rem;}
}