/*------------------------------------------
List
---------------------------------------------*/
.item_product {position: relative;margin-bottom: 15rem; margin-top:6rem;}
.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%; overflow:hidden; max-width:34rem; height: 40rem; max-height:45rem;background: #f8f8f8; border-radius:2rem; 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:#ffffff; background-color: #000000;}
.product_box .thumbnail .thumb_img {overflow:hidden;  mix-blend-mode: multiply; }
.product_box .thumbnail .thumb_img img{width: 100%;display: block;}
.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-weight: bold;}


@media screen and (max-width: 1400px) {
	.product_box .thumbnail {height:auto; }
}
@media screen and (max-width: 1024px) {
	.item_product .product_area li {width: 33.33%;}
}
@media screen and (max-width: 768px) { 
	.item_product { margin-top:2rem;}
	.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;}


}
@media screen and (max-width: 568px) { 
	.product_box .title {margin-top: 1rem;}
	.product_box .title p {font-size: .85em; }
}



/*------------------------------------------
View
---------------------------------------------*/
.item_proview {position: relative; display:flex; margin-top: 7rem;}
.item_proview .goto_back {position: absolute; top:0; right:0	;}
.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%;  min-height: 60vh;max-height:70vh;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:#ffffff; position: relative; margin: 0 .5rem;}
.item_proview .thumb_wrap .thumb_area .proview_thum ul li.swiper-slide-thumb-active {opacity: 1; border: 3px solid #ffffff; 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: auto;}
.item_proview .spec_wrap .spec_area {width: auto; margin: 7rem;	    margin-right: 0;}
.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_top ul {display:flex; margin-left:.5%;}
.item_proview .spec_wrap .spec_area .spec_top ul li {width:49%; margin:.5%;}
.item_proview .spec_wrap .spec_area .spec_top .con_btn {display:block; width:100%; padding:.8em 1.5em; text-align: center;box-sizing:border-box; background:var(--main-color1); color:var(--white); 
border-radius:.4rem; font-weight: 500;  }
.item_proview .spec_wrap .spec_area .spec_top .con_btn.buy {background:var(--main-color1); color:var(--white); border:1px solid var(--main-color1);}
.item_proview .spec_wrap .spec_area .spec_top .con_btn.list {background:var(--white); color:#222; border:1px solid #222;}

.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 #000000; color:#222; font-weight: 600;	}
.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 #dddddd; 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; color:#222;}
.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: #000000; color:#ffffff; 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: auto; height: auto; max-width: 100%;}

@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; margin-top:0;}
	.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 0%;}
	.item_proview .spec_wrap .spec_area section {margin-bottom:2rem;}
	.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(--main-color1); 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;}
}