/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 공통
********************************************************/
.tit_wrap {display: flex; justify-content: space-between; align-items: center; gap: clamp(1rem, 0.7rem + 1.5vw, 2.5rem); margin-bottom: clamp(1.25rem, 1.175rem + 0.38vw, 1.625rem);}
.tit_wrap .mid_tit {margin-bottom: 0;}
.tit_wrap .view_more {display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-15); color: #000;}
.tit_wrap .view_more i {display: block; width: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); height: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); background: #000 url('/images/newOpen_hp/main/more_plus.svg') no-repeat center/46% auto; border-radius: 50%; transition: .3s;}
.tit_wrap .view_more:hover i {transform: rotate(90deg);}
.mid_tit {margin-bottom: clamp(1.25rem, 1.175rem + 0.38vw, 1.625rem); font-size: clamp(1.375rem, 1.288rem + 0.44vw, 1.813rem); font-weight: 500;}
.mid_tit strong {font-weight: 600;}


/********************************************************
■ 메인 비주얼
********************************************************/
#visual {width: 100%; max-width: 78.75rem; margin: 0 auto; overflow: hidden; position: relative;}
#visual .visual_pc .swiper-slide {width: 100%; aspect-ratio: 1260/380; border-radius: .625rem; overflow: hidden;}
#visual .visual_mb {display: none;}
#visual .visual_mb .swiper-slide {width: 100%; aspect-ratio: 768/410; border-radius: .625rem; overflow: hidden;}

@media (max-width: 1260px){
	#visual {width: calc(100% - (var(--side-padding) * 2)); margin: 0 var(--side-padding);}
}
@media (max-width: 767px){
	#visual .visual_pc {display: none;}
	#visual .visual_mb {display: block;}
}
@media (max-width: 420px){
}

/********************************************************
■ 카테고리
********************************************************/
.mid1 {padding: clamp(1.875rem, 1.5rem + 1.88vw, 3.75rem) 0;}
.mid1 ul {display: flex; justify-content: center; gap: 2rem clamp(0.625rem, 3.13vw, 3.75rem); width: 100%; margin: 0 auto; padding: 0 clamp(0.625rem, 3.13vw, 3.75rem);}
.mid1 ul > li {width: 87px; font-size: var(--font-size-15); text-align: center;}
.mid1 ul > li .icon_box {max-width: 70px; width: 100%; aspect-ratio: 1; margin: 0 auto .7rem; background: no-repeat center/cover; border-radius: .625rem; transition: .3s;}
.mid1 ul > li .icon_box.icon1 {background-image: url('/images/newOpen_hp/main/mid1_new_icon1.png');}
.mid1 ul > li .icon_box.icon2 {background-image: url('/images/newOpen_hp/main/mid1_new_icon2.png');}
.mid1 ul > li .icon_box.icon3 {background-image: url('/images/newOpen_hp/main/mid1_new_icon3.png');}
.mid1 ul > li .icon_box.icon4 {background-image: url('/images/newOpen_hp/main/mid1_new_icon4.png');}
.mid1 ul > li .icon_box.icon5 {background-image: url('/images/newOpen_hp/main/mid1_new_icon5.png');}
.mid1 ul > li .icon_box.icon6 {background-image: url('/images/newOpen_hp/main/mid1_new_icon6.png');}
.mid1 ul > li .icon_box.icon7 {background-image: url('/images/newOpen_hp/main/mid1_new_icon7.png');}
.mid1 ul > li .icon_box.icon8 {background-image: url('/images/newOpen_hp/main/mid1_new_icon8.png');}
.mid1 ul > li span {white-space: nowrap;}
.mid1 ul > li:hover .icon_box {box-shadow: 2px 4px .5rem rgba(210, 220, 239, .5);}

@media (max-width: 1024px){
	.mid1 ul {gap: 2rem clamp(0.625rem, 0.341rem + 1.42vw, 1.25rem);}
}
@media (max-width: 767px){
	.mid1 ul {flex-wrap: wrap;}
	.mid1 ul > li {flex: none; width: calc(25% - (clamp(0.625rem, 3.13vw, 3.75rem) * 3 / 4));}
}

/********************************************************
■ 개원 견적 상담 신청/조회
********************************************************/
.mid2 {padding: clamp(3.125rem, 2.75rem + 1.88vw, 5rem) 0 clamp(3.125rem, 3rem + 0.63vw, 3.75rem); background-color: #ECF2FD;}
.mid2 .inner {position: relative; z-index: 1;}
.mid2 .inner::before {content: ''; display: block; width: clamp(15rem, 11.912rem + 15.44vw, 30.438rem); aspect-ratio: 487/247; background: url('/images/newOpen_hp/main/mid2_people.png') no-repeat center/cover; position: absolute; top: -.625rem; right: var(--gap-20); z-index: -1;}
.mid2 .tit_wrap {justify-content: flex-start; margin-bottom: clamp(1.25rem, 0.875rem + 1.88vw, 3.125rem);}
.mid2 .tit_wrap .icon_box {width: clamp(3.75rem, 3.212rem + 2.69vw, 6.438rem); height: clamp(3.75rem, 3.212rem + 2.69vw, 6.438rem); background: url('/images/newOpen_hp/main/mid2_icon1.svg') no-repeat center/cover; border-radius: 50%;}
.mid2 .tit_wrap .txt_box span {font-size: var(--font-size-16); color: #5D6670;}
.mid2_list {display: flex; gap: .625rem; padding: .625rem; border-radius: .625rem; background-color: rgba(255, 255, 255, .6); position: relative;}
.mid2_list li {flex: 1;}
.mid2_list li a {display: block; width: 100%; height: 100%; padding: clamp(1rem, 0.925rem + 0.38vw, 1.375rem) clamp(1rem, 0.8rem + 1vw, 2rem) clamp(2.5rem, 2.25rem + 1.25vw, 3.75rem); background-color: #fff; border: 1px solid #D8E1F3; border-radius: .625rem; position: relative; transition: .3s;}
.mid2_list li a .radius_box {display: inline-block; padding: 0 var(--num-14); font-size: var(--font-size-15); font-weight: 500; color: #fff; line-height: clamp(2rem, 1.95rem + 0.25vw, 2.25rem); background-color: #0063C6; border-radius: 10rem; position: relative; z-index: 1; cursor: pointer; transition: .3s;}
.mid2_list li a .radius_box::before {content: ''; display: block; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 10rem; background: #0063C6; position: absolute; top: 2px; left: 2px; z-index: -1; transition: .3s;}
.mid2_list li a strong {display: block; margin: var(--gap-20) 0; font-size: var(--font-size-20); transition: .3s;}
.mid2_list li a p {font-size: var(--font-size-14); color: #9C9C9C; transition: .3s;}
.mid2_list li a::after {content: ''; display: block; width: clamp(1.875rem, 1.813rem + 0.31vw, 2.188rem); height: clamp(1.875rem, 1.813rem + 0.31vw, 2.188rem); background: #ECF2FD url('/images/newOpen_hp/main/mid2_arr_blue.svg') no-repeat center/22%; border-radius: 50%; position: absolute; bottom: clamp(0.75rem, 0.625rem + 0.63vw, 1.375rem); right: clamp(0.75rem, 0.188rem + 2.81vw, 3.563rem); transition: .3s;}
.mid2_list li:hover a {color: #fff; background-color: #0063C6; border-color: #0063C6; box-shadow: 3px 4px 10px #A6B6C5;}
.mid2_list li:hover a p {color: #fff;}
.mid2_list li:hover a .radius_box {color: #fff; background: linear-gradient(to right bottom, #FFCF25, #00E5FF, #FFCF25);}
.mid2_list li:hover a .radius_box {background-color: #3159DE;}
.mid2_list li:hover a::after {background-image: url('/images/newOpen_hp/main/mid2_arr_white.svg'); background-color: transparent; transform: translateX(clamp(0.625rem, 0.4rem + 1.13vw, 1.75rem));}
.mid2 .btn_wrap {display: flex; justify-content: flex-end; margin-top: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);}
.mid2 .go_to_history {display: inline-flex; align-items: center; gap: var(--gap-12); padding: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem) clamp(1.25rem, 1.075rem + 0.88vw, 2.125rem); font-size: var(--font-size-16); color: #0F4276; background-color: #fff; border-radius: 10rem; border: 2px solid #ECF2FD; border-bottom: none; box-shadow: 2px 4px .5rem rgba(210, 220, 239, .5); transition: .3s;}
.mid2 .go_to_history i {display: block; width: clamp(1rem, 0.975rem + 0.13vw, 1.125rem); height: clamp(1rem, 0.975rem + 0.13vw, 1.125rem); background: url('/images/newOpen_hp/main/mid2_icon2.svg') no-repeat center/cover;}
.mid2 .go_to_history:hover {background-color: #f7fafe;}

@media (max-width: 767px){
	.mid2 .inner::before {display: none;}
	.mid2 .tit_wrap {flex-direction: column; align-items: flex-start;}
	.mid2 .mid_tit {margin-bottom: .625rem;}
	.mid2_list {flex-direction: column;}
	.mid2 .btn_wrap {justify-content: center;}
}
@media (max-width: 410px){
.mid2 .tit_wrap .txt_box span br{display: none;}
}

/********************************************************
■ 전문가 선택 카테고리
********************************************************/
.mid3 {padding: 0 0 clamp(3.125rem, 2.875rem + 1.25vw, 4.375rem);}
.mid3 .cate_tab {display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);}
.mid3 .cate_tab li {display: flex; align-items: center; gap: 6px; padding: clamp(0.25rem, 0.225rem + 0.13vw, 0.375rem); padding-right: clamp(0.5rem, 0.475rem + 0.13vw, 0.625rem); font-size: var(--font-sisze-14); font-weight: 500; color: rgba(30, 33, 36, .7); background-color: #fff; border-radius: .5rem; border: 1px solid #DFDFDF; cursor: pointer; transition: .3s;}
.mid3 .cate_tab li i {display: block; width: clamp(1.5rem, 1.425rem + 0.38vw, 1.875rem); height: clamp(1.5rem, 1.425rem + 0.38vw, 1.875rem); background: url('/images/newOpen_hp/main/mid3_cate1.png') no-repeat center/cover; border-radius: 4px;}
.mid3 .cate_tab li:not(.on):hover {background-color: #ECF2FD;}
.mid3 .cate_tab li.on {background-color: #0063C6; color: #fff;}

.shortcut_list {display: flex; gap: var(--gap-16); margin-top: clamp(3.125rem, 3rem + 0.63vw, 3.75rem);}
.shortcut_list li {flex: 1; border-radius: .625rem; box-shadow: 2px 4px .5rem rgba(210, 220, 239, .5); transition: .3s;}
.shortcut_list li a {display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; height: clamp(6.25rem, 5.588rem + 3.31vw, 9.563rem); padding: .625rem clamp(1rem, 0.3rem + 3.5vw, 4.5rem); border-radius: .625rem; position: relative; transition: .3s;}
.shortcut_list li a strong {display: block; margin-bottom: var(--gap-10); font-size: var(--font-size-21); transition: .3s;}
.shortcut_list li a i {display: block; background: no-repeat center/cover; /*position: absolute; top: 50%; right: clamp(1.25rem, 0.6rem + 3.25vw, 4.5rem); transform: translateY(-50%);*/ transition: .3s;}
.shortcut_list li.catalog a {color: #fff; background-color: #25496E; box-shadow: 2px 4px .5rem rgba(0, 0, 0, .16);}
.shortcut_list li.catalog a strong {color: #fff;}
.shortcut_list li.catalog a i {width: clamp(3.5rem, 3.212rem + 1.44vw, 4.938rem); aspect-ratio: 79/91; background-image: url('/images/newOpen_hp/main/mid3_icon1.svg');}
.shortcut_list li.open_mng a {color: #25496E; background-color: #E0EFFF; border: 1px solid #dbedff;}
.shortcut_list li.open_mng a strong {color: #25496E;}
.shortcut_list li.open_mng a i {width: clamp(3.75rem, 2.925rem + 4.13vw, 7.875rem); aspect-ratio: 126/71; background-image: url('/images/newOpen_hp/main/mid3_icon2.svg');}
.shortcut_list li:hover {box-shadow: 2px 4px .5rem rgba(210, 220, 239, .9);}
.shortcut_list li.catalog:hover {box-shadow: 2px 4px .5rem rgba(0, 0, 0, .2);}

@media (max-width: 767px){
	.shortcut_list {flex-direction: column;}
	.mid3 .cate_tab {flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem;}
	.mid3 .cate_tab::-webkit-scrollbar {height: 6px;}
	.mid3 .cate_tab::-webkit-scrollbar-track {background-color: #eee; border-radius: 10rem;}
	.mid3 .cate_tab::-webkit-scrollbar-thumb {background-color: #C9D7F2; border-radius: 10rem;}
	.mid3 .cate_tab li {white-space: nowrap;}
}

/*----- 상품 리스트 -----*/
.cate_prd_list {display:flex; flex-wrap:wrap; gap:1.094rem clamp(1rem, 0.95rem + 0.25vw, 1.25rem); padding: 1.094rem 0 0;}
.cate_prd_list > li {width:calc((100% - clamp(1rem, 0.95rem + 0.25vw, 1.25rem) * 7)/8); font-size: 0.75rem; overflow: hidden; opacity: 0; visibility: hidden;}
.cate_prd_list .sub_title {display:none; width:100%; position:absolute; height:35px; line-height:35px; font-size:12px; color:#fff; bottom:-15px; left:0; background:rgba(0,0,0,0.6); padding:0px 10px; margin-bottom:15px;}
.cate_prd_list .sub_title b {display:block; width:100%;  overflow:hidden;white-space:nowrap;text-overflow:ellipsis; font-weight:400;}
.cate_prd_list.on li {visibility: visible; animation: fadeIn .5s forwards;}
@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* 썸네일 */
.prd_cont_wrap .prd_thumb {margin-bottom: 0.625rem; width: 100%; height: auto; aspect-ratio: 1; position:relative;}
.prd_cont_wrap .prd_thumb .img_zone {width:100%; height: 100%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.04) inset; border-radius: clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);}
.prd_cont_wrap .prd_thumb .img_zone span {display:block; width:100%; height:100%; border-radius:clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);}


/* 썸네일 호버 버튼 */
.prd_cont_wrap .btn{position: absolute; bottom:0.293125rem; right:0.293125rem;}
.prd_cont_wrap .btn [class*='btn_'] {display:block; width:1.375rem; height:auto; aspect-ratio:1; font-size: 0; border-radius:100%; position:relative; transition: 0.3s cubic-bezier(0.79, 0.14, 0.15, 0.86);}
.prd_cont_wrap .btn [class*='btn_']:after {content:''; display:block; width:1.375rem; height:auto; aspect-ratio:1; forced-color-adjust: none;  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.prd_cont_wrap .btn_basket {background:rgba(0, 0, 0, 0.34);}
.prd_cont_wrap .btn_basket:after {-webkit-mask-image: url('/images/newOpen_hp/main/icon_cart.svg'); mask-image: url('/images/newOpen_hp/main/icon_cart.svg'); background-color:#fff;}
.prd_cont_wrap .btn_basket:hover{background:var(--BTN-BG-Color-default);}



.cate_prd_list > li  div.prd_thumb div.img_zone .show_mark{z-index:10; position:absolute; top:5px; right:5px;}
.cate_prd_list > li  div.prd_thumb div.img_zone .mark img{width:50px; height:50px;}
.cate_prd_list > li  div.prd_thumb div.img_zone .mark00{z-index:10; position:absolute; top:5px; left:5px;}
.cate_prd_list > li  div.prd_thumb div.img_zone .mark01{z-index:10; position:absolute; top:5px; left:5px;}
.cate_prd_list > li  div.prd_thumb div.img_zone .mark02{z-index:10; position:absolute; top:5px; right:5px;}
.cate_prd_list > li  div.prd_thumb div.img_zone .mark03{z-index:10; position:absolute; bottom:35px; left:5px;}
.cate_prd_list > li  div.prd_thumb div.img_zone .mark04{z-index:10; position:absolute; bottom:45px; left:5px;}
.cate_prd_list > li  div.prd_thumb div.img_zone .soldout{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/soldout.png?v=1') no-repeat center center; background-size:cover; z-index:99;}
.cate_prd_list > li  div.prd_thumb div.img_zone .proStop{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/proStop.png?v=1') no-repeat center center; background-size:cover; z-index:99;}
.cate_prd_list > li  div.prd_thumb div.img_zone .proStop2{width:100%; height:100%; position:absolute; top:0; left:0; background:url('/images/content/proStop2.png?v=1') no-repeat center center; background-size:cover; z-index:99;}


/* 리스트 상품 정보 */
.prd_cont_wrap .prd_name {margin-bottom:0.4rem;margin-top: 0; height:2.8em; font-size:var(--font-size-14); font-weight:600; color:var(--Text-Color-Black); -webkit-box-orient: vertical; line-height: 1.4; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; word-break: keep-all; letter-spacing: -0.035rem; position:relative; overflow: hidden;}
.prd_cont_wrap .prd_ori_made{display:none; font-size:14px; line-height:16px; margin-bottom:5px;}
.prd_cont_wrap .prd_price {font-size: var(--font-size-15); font-family: 'pretendard gov'; font-weight:800;}
.prd_cont_wrap .prd_price .regular_tit{background:#23A5DD; color:#fff; padding:1px 3px; border-radius:5px; vertical-align:top;}
.prd_cont_wrap .tx_org {color:#b5b5b5;font-size:12px;text-decoration:line-through;vertical-align:middle;font-weight: 400;}
.prd_cont_wrap .tx_org > span {display:inline-block;font-size:14px;text-decoration:line-through;vertical-align:0;letter-spacing:-0.02em; margin-left:5px;}
.prd_cont_wrap .tx_cur {display:inline-block; font-weight: 400;}
.prd_cont_wrap .tx_cur > span {font-weight: 800;}
.prd_cont_wrap .tx_cur > span.regularPrice {color:#23A5DD;}
.prd_cont_wrap .tx_org + .tx_cur {margin:0 0 0 7px;vertical-align:bottom}
.prd_cont_wrap .tx_cur + .tx_org > span {font-size: inherit;}
.prd_cont_wrap .proReplace{font-size: var(--font-size-15); font-weight:bold;}
.prd_cont_wrap .proReplace{ padding:3px 5px; font-size: var(--font-size-15); color:#fff; font-weight:bold; background:#dc1508;}
.prd_cont_wrap .proSoldOut{font-size: var(--font-size-15); font-weight:bold;}
.prd_cont_wrap .proSoldOut{font-size:14px; background:#dc1508; color:#fff; font-weight:bold; padding:3px 5px;}
.prd_cont_wrap .tx_mini {margin-top: 0.25rem; color:var(--Brand-Color-main);}

.prd_cont_wrap .prd_ori{margin-bottom:0.390625rem;}
.prd_cont_wrap .prd_ori_number {display: flex; color:var(--Text-Color-Basic-1); letter-spacing: -0.03rem;}
.prd_cont_wrap .prd_ori_number span {display:block; padding-right:0.375rem; margin-right:0.375rem; position:relative;}
.prd_cont_wrap .prd_ori_number span:after {content:''; display:block; width:1px; height:100%; max-height:0.625rem; background:#B8BCC0; position:absolute; top:0.2em; right:0;}

@media (max-width:1030px){
	/*----- 상품 리스트 -----*/
	.cate_prd_list > li {width: calc((100% - clamp(1rem, 0.95rem + 0.25vw, 1.25rem) * 5) / 6);}
}
@media (max-width:768px){
	/*----- 상품 리스트 -----*/
	.cate_prd_list {gap: 1.5rem clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}
	.cate_prd_list > li {width: calc((100% - clamp(1rem, 0.95rem + 0.25vw, 1.25rem) * 3) / 4);}

	/* 썸네일 호버 버튼 */
	.prd_cont_wrap .btn {bottom: 0.5rem; right: 0.5rem;}
	.prd_cont_wrap .btn [class*='btn_'] {width:2.5rem;}
	.prd_cont_wrap .btn [class*='btn_']:after {width: 80%;}

	/* 리스트 상품 정보 */
	.prd_cont_wrap .prd_name {height: 1.4em; -webkit-line-clamp: 1; font-size: var(--font-size-15);}
	.prd_cont_wrap .prd_price {font-size: var(--font-size-16);}
}
@media (max-width:540px){
	/*----- 상품 리스트 -----*/
	.cate_prd_list > li {width: calc((100% - clamp(1rem, 0.95rem + 0.25vw, 1.25rem) * 1) / 2);}
}