/* 서브 공통 */
#header .depth01 > li.on > a{ color: #B8926E; }
#sub{ padding-top: 140px; }
#sub section:not(:first-of-type){ padding-top: 110px; }
#sub .sub_visual h2{ font-size: 2.6rem; font-weight: 500; color: #222; text-align: center; padding-top: 30px; }

@media screen and (max-width: 1000px){
	#sub section:not(:first-of-type){ padding-top: 70px; }
	#sub .sub_visual h2{ padding-top: 0; }
}

/* sub lnb */
#sub .lnb .depth02{ width: 100%; display: flex; justify-content: center; align-items: center; }
#sub .lnb .depth02 li{ position: relative; }
#sub .lnb .depth02 li::after{ content: ""; width: 1px; height: 13px; background-color: #B8926E; position: absolute; top: 47%; left: 0; transform: translateY(-50%); }
#sub .lnb .depth02 li:first-of-type::after{ display: none; }
#sub .lnb .depth02 li a{ display: inline-block; font-size: 1.7rem; font-weight: normal; color: #666; padding: 20px; }
#sub .lnb .depth02 li.on a{ font-weight: 700; color: #846B45; }

/* sub title */
#sub .sub_title{ padding-top: 80px; }
#sub .sub_title h3{ font-size: 3.5rem; font-weight: 500; color: #222; text-align: center; }

@media screen and (max-width: 1250px){
	#sub .sub_title{ padding-top: 50px; }
	#sub .sub_title h3{ font-size: 3rem; }
}

/* paging */
.paging a{ display: inline-block; width: 36px; height: 36px; border-radius: 50%; font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 300; color: #aaa; text-align: center; line-height: 36px; border: none; }
.paging ul li:not(:last-child){ margin-right: 7px; }
.paging ul li.on a{ background-color: #B8926E; font-weight: 500; color: #fff; }

@media screen and (max-width: 1250px){
	.paging{ margin-top: 50px; }
}

@media screen and (max-width: 700px){
	.paging ul li:not(:last-child){ margin-right: 0; }
}

/* bg-img */
.bg-img{ max-width: 1440px; width: 100%; margin: 0 auto; border-radius: 10px; position: relative; }
.bg-img::before{ content: ""; width: 50%; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 10; transform-origin: left; animation: go-right 1s ease-in-out forwards; animation-delay: 0.5s; opacity: 1; }
.bg-img::after{ content: ""; width: 50%; height: 100%; background-color: #fff; position: absolute; top: 0; right: 0; z-index: 10;  transform-origin: right; animation: go-right 1s ease-in-out forwards; animation-delay: 0.5s; opacity: 1; }

@keyframes go-right{
	0%{ transform: scaleX(1); }
	100%{ transform: scaleX(0); opacity: 0; }
}

@media screen and (max-width: 1440px){
	#sub .sub_visual .bg{ border-radius: 0; }
}

@media screen and (max-width: 1480px){
	.bg-img{ border-radius: 0; }
}


/* 한올명주 - 소개 */
#greeting .bg-img{ height: 500px; background: url("/img/sub/visual_bg01.jpg") no-repeat bottom center / auto; }
#greeting{ padding-bottom: 90px; }
#greeting .sec01{ margin-top: 60px; }
#greeting .sec01 p{ text-align: center; font-size: 1.7rem; font-weight: normal; color: #222; line-height: 2; }

#greeting .sec02 ul{ display: flex; justify-content: center; }
#greeting .sec02 ul li{ display: flex; flex-direction: column; align-items: center; }
#greeting .sec02 ul li:not(:last-of-type){ margin-right: 130px; }
#greeting .sec02 figure{ position: relative; }
#greeting .sec02 figure::before{ content: ""; width: 33px; height:33px; background-color: #D3C2A8; box-shadow: 0 0 150px 150px #D3C2A8; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); opacity: 0.15; }
#greeting .sec02 .text{ margin-top: 50px; text-align: center; }
#greeting .sec02 .text span{ width: 100%; display: inline-block; font-size: 2.2rem; font-weight: 500; color: #222; }
#greeting .sec02 .text p{ font-size: 1.5rem; font-weight: normal; color: #333; line-height: 1.6666; margin-top: 20px; }

@media screen and (max-width: 1250px){
	#greeting .sec01{ margin-top: 30px; }
	#greeting .sec01 p{ font-size: 1.6rem; }

	#greeting .sec02 ul{ justify-content: space-between; }
	#greeting .sec02 ul li:not(:last-of-type){ margin-right: 0; }
	#greeting .sec02 .text{ margin-top: 30px; }
	#greeting .sec02 .text span{ font-size: 2rem; }
	#greeting .sec02 .text p{ margin-top: 10px; }
}

@media screen and (max-width: 1050px){
	#greeting .sec02 ul{ flex-direction: column; }
	#greeting .sec02 ul li{ width: 100%; flex-direction: row; justify-content: center; align-items: center; }
	#greeting .sec02 ul li:nth-of-type(2n){ flex-direction: row-reverse; }
	#greeting .sec02 ul li:not(:last-of-type){ margin-bottom: 70px; }
	#greeting .sec02 figure{ width: 183px; height: 183px; display: flex; justify-content: center; align-items: center; }
	#greeting .sec02 .text{ width: 50%; margin-top: 0; margin-left:100px; }
	#greeting .sec02 ul li:nth-of-type(2n) .text{ margin-left: 0; margin-right: 100px; }
	#greeting .sec02 .text p br{ display: none; }
}

@media screen and (max-width: 750px){
	#greeting .sec01 p br{ display: none; }

	#greeting .sec02 ul li{ flex-direction: column; }
	#greeting .sec02 ul li:not(:last-of-type){ margin-bottom: 40px; }
	#greeting .sec02 ul li:nth-of-type(2n){ flex-direction: column; }
	#greeting .sec02 figure{ height: 150px; }
	#greeting .sec02 .text{ width: 100%; margin-left: 0; }
	#greeting .sec02 ul li:nth-of-type(2n) .text{ margin-right: 0; }
	#greeting .sec02 .text p br{ display: inline; }
}

/* 한올명주 - 오시는 길 */
#location{ padding-bottom: 105px; }
#location .iframe-box{ width: 100%; height: 500px; border-radius: 10px; overflow: hidden; }
#location .iframe-box iframe{ width: 100%; height: 100%; }
#location .location-box{ display: flex; justify-content: center; padding-top: 70px; position: relative; }
#location .location-box > div{ position: relative; }
#location .location-box .left{ padding-right: 60px; border-right: 1px solid #B8926E; }
#location .location-box .right{ padding-left: 60px; }
#location .location-box .left::before{ content: ""; width: 3px; height: 3px; border-radius: 50%; border: 1px solid #B8926E; position: absolute; top: -4px; right: -3px; }
#location .location-box .left::after{ content: ""; width: 3px; height: 3px; border-radius: 50%; border: 1px solid #B8926E; position: absolute; bottom: -4px; right: -3px; }
#location .location-box > div h4{ font-size: 2.5rem; font-weight: 500; color: #222; padding-left: 16px; position: relative; margin-bottom: 30px; }
#location .location-box > div h4::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #B8926E; position: absolute; top: 39%; left: 0; transform: translateY(-50%); }
#location .location-box dl{ display: flex; margin-top: 10px; position: relative; line-height: 1.75; }
#location .location-box dt{ font-size: 1.5rem; font-weight: 500; color: #222; margin-right: 20px; }
#location .location-box dd{ font-size: 1.6rem; font-weight: 300; color: #222; }
#location .location-box .flex{ display: flex; }
#location .location-box .flex dl:first-of-type{ padding-right: 40px; }
#location .location-box .flex dl:first-of-type::after{ content: ""; width: 1px; height: 13px; background-color: #B8926E; position: absolute; top: 38%; right: 20px; transform: translateY(-50%); }

#location .location-box .right dt{ margin-right: 0; width: 70px; }
#location .location-box .right dd{ width: calc(100% - 70px); }

@media screen and (max-width: 1340px){
	#location .location-box > div{ width: 50%; }
	#location .location-box .right dd br:not(.none){ display: none; }
}

@media screen and (max-width: 950px){
	#location .location-box{ flex-direction: column; padding-top: 40px; }
	#location .location-box > div{ width: 100%; }
	#location .location-box .left{ padding-right: 0; padding-bottom: 30px; border-right: none; border-bottom: 1px solid #B8926E; }
	#location .location-box .left::before{ top: calc(100% - 2px); right: 100%; }
	#location .location-box .left::after{ bottom: -3px; right: -4px; }
	#location .location-box .right{ padding-left: 0; padding-top: 30px; }
	#location .location-box > div h4{ font-size: 2.1rem; margin-bottom: 15px; }
}

/* sub - product-list */
.product-list{ display: flex; flex-wrap: wrap; margin-bottom: -100px; }
.product-list li{ width: calc((100% - 90px) / 4); margin-right: 30px; margin-bottom: 100px; position: relative; }
.product-list li:nth-of-type(4n){ margin-right: 0; }
.product-list li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 131%; border-radius: 10px; }
.product-list li figure::after{ content: url("/img/common/watermark.png"); position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); }
.product-list li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s; }
.product-list li span{ display: inline-block; font-size: 1.3rem; font-weight: normal; color: #222; margin-top: 20px; }
.product-list li button{ position: absolute; width: 26px; height: 26px; top: 20px; right: 20px; z-index: 10; padding: 0; border: none; background: none; cursor: pointer; }
.product-list li button.heart::after{ content: ""; width: 26px; height: 26px; background: url("/img/sub/heart_on.png") no-repeat center center / auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.product-list li button.heart img{ display: none; }
.product-list li a{ position: absolute; top: 0; right: 0; left: 0; bottom: 0; }

/* sub - product-list( soldout ) */
.product-list li.soldout figure::before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; background: rgba(255, 255, 255, 0.55); }
.product-list li.soldout figure::after{ content: "SOLD OUT"; width: 100%; font-size: 2rem; font-weight: 700; color: #fff; position: absolute; top: 50%; left: 50%; z-index: 6; transform: translate(-50%, -50%); text-align: center; }

.product-list li:not(.soldout):hover figure img{ transform: translate(-50%, -50%) scale(1.05); }

@media screen and (max-width: 1200px){
	.product-list{ margin-bottom: -50px; }
	.product-list li{ width: calc((100% - 60px) / 3); margin-bottom: 50px; }
	.product-list li:nth-of-type(4n){ margin-right: 30px; }
	.product-list li:nth-of-type(3n){ margin-right: 0; }
	.product-list li span{ margin-top: 10px; }
}

@media screen and (max-width: 900px){
	.product-list{ margin-bottom: -30px; }
	.product-list li{ width: calc((100% - 30px) / 2); margin-bottom: 30px; }
	.product-list li:nth-of-type(3n){ margin-right: 30px; }
	.product-list li:nth-of-type(2n){ margin-right: 0; }
}

@media screen and (max-width: 600px){
	.product-list li{ width: calc((100% - 15px) / 2); margin-right: 15px; }
	.product-list li:nth-of-type(3n){ margin-right: 15px; }
	.product-list li:nth-of-type(2n){ margin-right: 0; }
	.product-list li.soldout figure::after{ font-size: 1.8rem; }
}

/* 화섬, 본견, 아동복, 리미티드, 기획전 공통 */
/* list */
#product-list{ padding-bottom: 95px; }
#product-list .bg-img{ height: 460px; display: flex; align-items: center; }
#product-list .bg-img .inner{ max-width: 1200px; width: 100%; margin: 0 auto; }
#product-list .bg-img .text h3{ font-size: 3.7rem; font-weight: 700; color: #846B45; }
#product-list .bg-img .text p{ font-size: 1.7rem; font-weight: 500; color: #555; line-height: 1.8823; }
#product-list .bg-img .text p:first-of-type{ margin-top: 30px; }

#product-list .tab-menu{ margin-top: 60px; }
#product-list .tab-menu ul{ display: flex; margin-left: -20px; }
#product-list .tab-menu li a{ display: inline-block; font-size: 1.7rem; font-weight: normal; color: #666; padding: 20px; position: relative; }
#product-list .tab-menu li a::after{ content: ""; width: 1px; height: 13px; background-color: #B8926E; position: absolute; top: 47%; right: 0; transform: translateY(-50%); }
#product-list .tab-menu li:last-of-type a::after{ display: none; }

#product-list .tab-menu li.on a{ font-weight: 700; color: #846B45; }

#product-list .product-list{ padding-bottom: 20px; }

/* 화섬 */
#product-list.chemical .bg-img{ background: url("/img/sub/chemical_bg.jpg") no-repeat center center; }

/* 본견 */
#product-list.silk .bg-img{ background: url("/img/sub/silk_bg.jpg") no-repeat center center; }

/* 아동복 */
#product-list.children .bg-img{ background: url("/img/sub/children_bg.jpg") no-repeat center right; }

/* 리미티드 */
#product-list.limited .tab-content{ margin-top: 60px; }

#product-list.limited .bg-img .text h3{ padding-top: 45px; position: relative; }
#product-list.limited .bg-img .text h3::before{ content: url("/img/sub/limited_icon.png"); position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

/* 기획전 */
#product-list.exhibition .bg-img{ margin-top: 20px; }
#product-list.exhibition .tab-content{ margin-top: 60px; }

#product-list .bg-img.none{ border: 1px solid rgba(184, 146, 110, 0.3); height: 300px; }
#product-list .bg-img.none::before, #product-list .bg-img.none::after{ display: none; }
#product-list .bg-img.none .text{ text-align: center; }
#product-list .bg-img.none .text p{ font-weight: normal; }


/* 찜하기 팝업 */
.heart-popup{ position: fixed; top: 50%; left: 50%; z-index: 30; transform: translate(-50%, -50%); width: 600px; background-color: #fff; border-radius: 10px; text-align: center; padding: 50px 0; display: none; }
.heart-popup p{ font-size: 2rem; font-weight: 500; color: #222; }
.heart-popup span{ display: inline-block; font-size: 1.7rem; font-weight: normal; color: 222; margin: 20px 0; }
.heart-popup ul{ display: flex; justify-content: center; }
.heart-popup ul li a, .heart-popup ul li button{ display: inline-block; width: 170px; height: 50px; border-radius: 100px; border: 1px solid #B8926E; font-family: 'GmarketSans'; font-size: 1.6rem; font-weight: normal; color: #222; background: none; text-align: center; line-height: 48px; transition: 0.5s; }
.heart-popup ul li a:hover, .heart-popup ul li button:hover{ background-color: #B8926E; font-weight: 500; color: #fff; }
.heart-popup ul li a{ margin-right: 30px; }

@media screen and (max-width: 1480px){
	#product-list .bg-img.none{ width: calc(100% - 40px); border-radius: 10px; }
}

@media screen and (max-width: 1250px){
	#product-list .bg-img .text h3{ font-size: 3rem; }
	#product-list .bg-img .text p{ font-size: 1.6rem; }
	.heart-popup{ font-size: 1.8rem; }
	.heart-popup span{ font-size: 1.5rem; }
	.heart-popup{ width: auto; padding: 50px 100px; }
	.heart-popup ul li a, .heart-popup ul li button{ width: 130px; height: 40px; line-height: 38px; font-size: 1.5rem; }
}

@media screen and (max-width: 1160px){
	#product-list .bg-img .inner{ padding: 0 20px; }
}

@media screen and (max-width: 900px){
	#product-list.chemical .bg-img{ background-position: center left; }
	#product-list.silk .bg-img{ background-position: center left; }
	#product-list.children .bg-img{ background-position: center left; }
}

@media screen and (max-width: 800px){
	#product-list .product-list{ padding-bottom: 0; }
}

@media screen and (max-width: 600px){
	.heart-popup{ width: 90%; padding: 50px 20px; }
}

@media screen and (max-width: 500px){
	#product-list .bg-img .text p br:not(.none){ display: none; }
}

/* 제품 상세 페이지 */
#product{ padding-bottom: 95px; }
#product .flex-box{ display: flex; padding-top: 60px; }
#product .flex-box > div{ width: 50%; }
#product .image ul li figure{ width: 100%; position: relative; overflow: hidden; }
#product .image ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#product .image{ display: flex; padding-right: 60px; }
#product .image .small-box{ width: 100px; margin-right: 20px; }
#product .image .small-box ul{ margin-bottom: -8.5px; }
#product .image .small-box ul li{ margin-bottom: 8.5px; cursor: pointer; }
#product .image .small-box ul li figure{ padding-bottom: 128px; border-radius: 8px; }
#product .image .small-box ul li figure::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.26); }
 
#product .image .scroll-box{ width: calc(100% - 120px); height: 960px; overflow-y: scroll; }
#product .image .scroll-box::-webkit-scrollbar{ display: none; }
#product .image .scroll-box ul li:not(:last-of-type){ padding-bottom: 25px; }
#product .image .scroll-box ul li figure{ padding-bottom: 129%; border-radius: 10px; } 
#product .image .scroll-box ul li figure::after{ content: url("/img/common/watermark.png"); position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); }

#product .info .product-info{ padding-top: 32px; }
#product .info .product-info h3{ font-size: 3rem; font-weight: 500; color: #222; margin-bottom: 10px; }
#product .info .product-info > span{ font-size: 1.2rem; font-weight: 300; color: #666; }
#product .info .product-info div{ font-size: 1.7rem; font-weight: 300; color: #555; line-height: 1.7647; word-break: break-all; margin-top: 40px; }
#product .info .product-info ul li button, #product .info .product-info ul li a{ display: flex; align-items: center; width: 205px; height: 50px; border-radius: 100px; border: 1px solid #B8926E; font-family: 'GmarketSans', sans-serif; font-size: 1.5rem; font-weight: 500; color: #222; background: none; line-height: 1; }
#product .info .product-info ul{ display: flex; padding: 50px 0; margin-top: 20px; }  
#product .info .product-info ul li:first-of-type{ margin-right: 10px; }
#product .info .product-info ul li button{ justify-content: center; transition: all 0.5s; }
#product .info .product-info ul li button span{ display: inline-block; width: 17px; height: 17px; position: relative; margin-left: 10px; }
#product .info .product-info ul li button span img{ transition: 0.5s; }
#product .info .product-info ul li button span::after{ content: ""; width: 16px; height: 15px; background: url("/img/sub/heart_white.png") no-repeat center center / auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; margin-right: 10px; }
#product .info .product-info ul li a{ padding: 0 30px; justify-content: space-between; }
#product .info .product-info ul li a i{ margin-bottom: 4px; transition: all 0.5s }
#product .info .product-info ul li a:hover i{ margin-right: 10px; }

#product .info .product-info ul li button.heart{ background-color: #B8926E; color: #fff; }
#product .info .product-info ul li button.heart span::after{ opacity: 1; }
#product .info .product-info ul li button.heart span img{ opacity: 0; }

#product .info .product-info ul li button:hover{ background-color: #B8926E; color: #fff; }
#product .info .product-info ul li button:hover span::after{ opacity: 1; }
#product .info .product-info ul li button:hover span img{ opacity: 0; }

#product .info .table-box p{ font-size: 2rem; font-weight: 500; color: #222; padding-left: 16px; position: relative; margin-bottom: 10px; }
#product .info .table-box p::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #B8926E; position: absolute; top: 38%; left: 0; transform: translateY(-50%); }

#product .info .table-box{ border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 50px 0; }
#product .info .table-box ul{ max-width: 650px; width: 100%; margin-bottom: -40px; }
#product .info .table-box ul li{ margin-bottom: 40px; }
#product .info .table-box table{ text-align: center; color: #222; }
#product .info .table-box table tr{ border-bottom: 1px solid #e0e0e0; }
#product .info .table-box table tbody tr:last-of-type{ border-bottom: none; }
#product .info .table-box table th{ font-size: 1.7rem; font-weight: 500; padding: 16px 10px; border-right: 1px solid #e0e0e0; }
#product .info .table-box table th:last-of-type{ border-right: none; }
#product .info .table-box table td{ font-size: 1.5rem; font-weight: normal; padding: 10px; border-right: 1px solid #e0e0e0; }
#product .info .table-box table td:last-of-type{ border-right: none; }
#product .info .table-box ul li > div{ display: flex; justify-content: space-between; }
#product .info .table-box ul li table.one{ width: 57%; margin-left: 35px; }

#product .info > ul.border{ margin-top: 20px; }
#product .info > ul.border li{ font-size: 1.4rem; font-weight: normal; color: #222; line-height: 1.9285; padding-left: 12px; position: relative; }
#product .info > ul.border li::before{ content: ""; width: 3.5px; height: 3.5px; border-radius: 50%; background-color: #222; position: absolute; top: 10px; left: 0; }

@media screen and (max-width: 1250px){
	#product .info .product-info h3{ font-size: 2.5rem; }
	#product .info .product-info div{ font-size: 1.6rem; }
	#product .info .product-info ul{ padding: 30px 0; }
	#product .info .product-info ul li button, #product .info .product-info ul li a{ width: 170px; height: 45px; }
	#product .info .table-box{ padding: 30px 0; }
	#product .info .table-box p{ font-size: 1.8rem; }  
	#product .info .table-box table th{ font-size: 1.6rem; padding: 10px 0; }
}

@media screen and (max-width: 1100px){
	#product .flex-box{ flex-direction: column; padding-top: 30px; }  
	#product .flex-box > div{ width: 100%; }
	#product .image{ justify-content: center; padding-right: 0; }
	#product .image .scroll-box{ max-width: 856px; width: 100%; }
}

@media screen and (max-width: 1030px){
	#product .image .scroll-box{ width: calc(100% - 120px); }
}

@media screen and (max-width: 700px){
	#product .image .scroll-box{ height: 700px; }
}

/* 원단  */
#fabric-list{ padding: 40px 0 90px; }
#fabric-list ul{ display: flex; flex-wrap: wrap; margin-bottom: -30px; }
#fabric-list ul li{ width: calc((100% - 30px) / 2); position: relative; margin-right: 30px; margin-bottom: 30px; }
#fabric-list ul li:nth-of-type(2n){ margin-right: 0; }
#fabric-list ul li figure{ width: 100%; overflow: hidden; position: relative; padding-bottom: 31%; border-radius: 10px; }
#fabric-list ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#fabric-list ul li .text{ width: 100%; position: absolute; bottom: 40px; z-index: 5; padding: 0 40px; text-align: right; }  
#fabric-list ul li .text h4{ font-size: 2.8rem; font-weight: 500; color: #222; margin-bottom: 10px; }
#fabric-list ul li .text p{ width: 100%; font-size: 1.7rem; font-weight: normal; color: #222; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#fabric-list ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1250px){
	#fabric-list ul li .text h4{ font-size: 2rem; }
	#fabric-list ul li .text p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1100px){
	#fabric-list ul li .text{ bottom: 25px; padding: 0 25px; }
	#fabric-list ul li .text h4{ margin-bottom: 5px; }
}

@media screen and (max-width: 900px){
	#fabric-list{ padding: 10px 0 90px; }
	#fabric-list ul{ margin-bottom: -15px; }
	#fabric-list ul li{ width: 100%; margin-right: 0; margin-bottom: 15px; }
}

/* 원단 상세페이지 */
#fabric{ padding-bottom: 95px; }
#fabric .sec01{ position: relative; padding-top: 60px; overflow: hidden; } 
#fabric .fabric-wrap{ width: 100%; }
#fabric .fabric{ max-width: 1080px; width: 100%; position: relative; margin-right: 110px; }
#fabric .fabric .flex-box{ display: flex; justify-content: flex-end; }
#fabric .fabric figure{ width: 460px; border-radius: 10px; position: absolute; right: calc(100% - 460px); overflow: hidden; padding-bottom: 460px; transition: all 0.4s; }
#fabric .fabric figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#fabric .fabric .text-box { width: calc(100% - 460px); height: 460px; padding-top: 30px; padding-left: 55px; color: #222; background-color: #fff; }
#fabric .fabric .text-box h4{ font-size: 3rem; font-weight: 500; margin-bottom: 30px; }
#fabric .fabric .text-box span{ font-size: 1.5rem; font-weight: normal; }
#fabric .fabric .text-box dl{ margin-top: 8px; }
#fabric .fabric .text-box dl dt{ font-size: 2rem; font-weight: 500; margin-bottom: 20px; }
#fabric .fabric .text-box dl dd{ font-size: 1.7rem; font-weight: normal; line-height: 1.7647; }
#fabric .fabric .text-box dl dd:not(:last-of-type){ margin-bottom: 30px; }
#fabric .fabric .text-box dl dd p{ width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#fabric .fabric .text-box dl dd:last-of-type{ width: 100%; height: 3.5294em; text-overflow: ellipsis; overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

#fabric .fabric.reverse figure{ right: 0; }

#fabric .btn{ max-width: 1080px; width: 100%; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; justify-content: flex-end; }
#fabric .btn .flex{ width: calc(100% - 515px); display: flex; justify-content: space-between; }
#fabric .btn a{ display: flex; justify-content: center; align-items: center; width: 118px; height: 50px; font-size: 1.4rem; font-weight: 500; color: #222; border: 1px solid #B8926E; border-radius: 100px; }
#fabric .btn .flex div{ display: flex; align-items: center; }
#fabric .btn button{ width: 50px; height: 50px; background: none; border: 1px solid #333; border-radius: 50%; }
#fabric .btn button i{ color: #222; }
#fabric section.sec01 .btn ul{ display: flex; padding: 0 20px; }
#fabric .btn ul li{ font-size: 1.7rem; font-weight: normal; color: #888; position: relative; }
#fabric .btn ul li.index{ font-weight: 500; color: #222; padding-right: 15px; }
#fabric .btn ul li.index::after{ content: "/"; font-size: 1.7rem; font-weight: normal; color: #888; position: absolute; top: 50%; right: 3px; transform: translateY(-50%); }

#fabric .sec02 h3{ font-size: 2.6rem; font-weight: 500; color: #222; text-align: center; margin-bottom: 60px; }
#fabric .sec02 .figure-wrap .slick-list{ margin-right: -110px; }
#fabric .sec02 .figure-wrap .figure{ margin-right: 110px; }
#fabric .sec02 figure{ border-radius: 10px; overflow: hidden; }

@media screen and (max-width: 1440px){
	#fabric .fabric{ margin-right: 50px; }  
	#fabric .sec02 .figure-wrap .slick-list{ margin-right: -50px; }
	#fabric .sec02 .figure-wrap .figure{ margin-right: 50px; }
}

@media screen and (max-width: 1250px){
	#fabric .sec01{ padding-top: 30px; }
	#fabric .fabric .text-box h4{ font-size: 2.5rem; margin-bottom: 15px; }
	#fabric .fabric .text-box dl dt{ font-size: 1.8rem; }
	#fabric .fabric .text-box dl dd{ font-size: 1.6rem; }
	#fabric .fabric .text-box dl dd:not(:last-of-type){ margin-bottom: 10px; }

	#fabric .btn a{ width: 100px; height: 45px; }
	#fabric .btn button{ width: 45px; height: 45px; }

	#fabric .sec02 h3{ margin-bottom: 30px; }
}

@media screen and (max-width: 1130px){
	#fabric .fabric-wrap .slick-list{ margin-right: -80px; }
	#fabric .fabric{ margin-right: 80px; }
	#fabric .btn{ width: 91%; }

	#fabric .sec02 .figure-wrap .slick-list{ margin-right: -80px; }
#fabric .sec02 .figure-wrap .figure{ margin-right: 80px; }
}

@media screen and (max-width: 1000px){
	#fabric .fabric .flex-box{ flex-direction: column; align-items: center; } 
	#fabric .fabric figure{ max-width: 460px; width: 100%; position: relative; right: 0; }
	#fabric .fabric .text-box{ width: 100%; padding-left: 0; padding-top: 60px; }
	#fabric .btn{ justify-content: center; }
	#fabric .btn .flex{ width: 100%; }

	#fabric .sec02{ padding-top: 40px !important; }
}

@media screen and (max-width: 600px){
	#fabric .fabric figure{ padding-bottom: 100%; }
}

/* 게시판 - board */
#board{ padding-bottom: 95px; }
#board .cont{ margin-top: 40px; }
#board .search_box{ display: flex; justify-content: space-between; align-items: center; background: #f7f7f7; padding: 15px; box-sizing:border-box; font-size:0; border-radius: 10px; }
#board .search_box input, #board .search_box #select { height: 45px; }
#board .search_box #select{ width: 250px; }
#board .search_box #select *{ font-size: 1.6rem; }
#board .search_box #select .select_label{ line-height: 45px; border: none; }
#board .search_box #select .select_label::after{ width: 45px; }
#board .search_box #select .select_down{ border: none; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.12); }
#board .search_box input{ width: calc(100% - 325px); vertical-align: middle; padding: 0 22px; border:none; background: #fff; border-radius:5px; font-size:16px; color: #222; }
#board .search_box button{background: #fff; border-radius:5px; border:none; width: 45px; height: 45px; font-size: 2rem; color: #B8926E; vertical-align: middle; cursor: pointer;}
#board .mod_box{display:flex;}
#board .mod_box .search_box{width: calc(100% - 160px); margin-right: 10px;}
#board .mod_box .inquiry_link{ width: 150px; border-radius:10px; background: #B8926E; }
#board .mod_box .inquiry_link a{display:inline-block; vertical-align: top; width: 100%; height: 100%; font-weight:600; font-size:18px; color: #fff; text-align: center; line-height: 80px;}
#board .mod_box .inquiry_link a i{margin-left: 5px; position: relative; top: 2px;}
#board .board_box{border-top: 1px solid #B8926E; margin-top: 60px;}
#board .board_box table{}
#board .board_box table th{position:relative; font-weight:500; font-size:17px; color: #222; text-align: center; padding: 15px 0; border-bottom: 1px solid #e0e0e0;}
#board .board_box table th::after{content:""; position:absolute; top: 18px; right: 0; width: 1px; height: 15px; background: #e0e0e0;}
#board .board_box table th:last-of-type::after{display:none;}
#board .board_box table td{font-size:16px; letter-spacing:-0.025em; color: #666; text-align: center; padding: 20px 0 18px; border-bottom: 1px solid #e0e0e0; position: relative;}
#board .board_box table td a{color: #666; display:inline-block; vertical-align: top; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;}
#board .board_box table td a img{position:relative; top: 4px; margin-right: 8px;}
#board .board_box table .tal.secret::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; }
#board .board_box table .tal.secret a::before{ content: "\e966"; font-family:'xeicon'; font-weight: normal; font-style: normal; position: relative; top: 2px; margin-right: 5px; }
#board .board_box table .bg{background: #fff8f8; font-weight:500; color: #666;}
#board .board_box table .cr{color: #b8926e;}

/* 비밀글 팝업 */
.pw_pop{display:none; position:fixed; top: 50%; left: 50%; z-index: 50; transform:translate(-50%,-50%); width: 100%; max-width: 415px; background: #fff; z-index: 10; border-radius:10px;box-shadow: 0px 10px 57px 0px rgba(0, 0, 0, 0.12); box-sizing:border-box; padding: 20px 20px 50px;}
.pw_pop.on{display:block; }
.pw_pop .close{text-align: right; margin-bottom:18px;width: 30px; height: 30px; margin-left: auto; cursor: pointer;}
.pw_pop .close i{color: #b8926e; font-size:25px;}
.pw_pop .tit{text-align: center; margin-bottom:26px;}
.pw_pop .tit h4{font-weight:500; font-size:18px; color: #333; letter-spacing:-0.03em; margin-bottom:10px;}
.pw_pop .tit p{font-weight:300; font-size:16px; letter-spacing:-0.03em; color: #333;}
.pw_pop form{font-size:0; text-align: center;}
.pw_pop form input{ width: 100%; max-width: 222px;height: 60px; border:1px solid #d8d8d8; border-right: none; border-radius:5px 0 0 5px; vertical-align: top; box-sizing:border-box; font-size:16px; color: #222; padding: 0 20px; }
.pw_pop form input::placeholder{font-size:16px; font-weight:300; color: #aaa;}
.pw_pop form button{ font-family: 'GmarketSans'; width: 60px; height: 60px; border:none; background: #B8926E; color: #fff; border-radius:0 5px 5px 0; vertical-align: top; box-sizing:border-box; font-size:16px; letter-spacing:-0.03em; line-height: 60px; cursor: pointer;}

@media screen and (max-width: 1250px){
	#board .board_box table th{ font-size: 1.5rem; }
	#board .board_box table td{ font-size: 1.5rem; }
}

@media screen and (max-width: 1000px){
	#board .mod_box{flex-wrap:wrap;	}
	#board .mod_box .inquiry_link{width: 100%; margin-top: 10px;}
	#board .mod_box .inquiry_link a{line-height: 50px;}
	#board .mod_box .search_box{width: 100%; margin-right: 0;}

	#board .board_box table colgroup col:nth-of-type(2), #board .board_box table colgroup col:nth-of-type(4){ width: 20%; }
}

@media screen and (max-width: 800px){
	#board .cont{ margin-top: 20px; }
	#board .search_box select{width: 170px;}
	#board .search_box #select, #board .search_box input{width: calc((100% - 80px) / 2);}
	#board .board_box{ margin-top: 30px; }
	#board .board_box table td{padding: 16px 0;	}
}

@media screen and (max-width: 650px){
	#board .mod_box .search_box{ flex-wrap: wrap; }
	#board .search_box #select{ width: 100%; margin-bottom: 15px; }
	#board .search_box input{ width: calc(100% - 60px); }
	#board .board_box table colgroup col:nth-of-type(1){ width: 12%; }
	#board .board_box table colgroup col:nth-of-type(2), #board .board_box table colgroup col:nth-of-type(4){ width: 22%; }
}

/* 게시판 - view */
#view{ padding: 60px 0 95px; }
#view .view-box{ border-top: 1px solid #B8926E; border-bottom: 1px solid #B8926E; padding-top: 40px; margin-bottom: 60px; }
#view .title-box{ text-align: center; padding-bottom: 10px; }
#view .title-box > span{ font-size: 1.6rem; font-weight: 500; color: #B8926E; }
#view .title-box h3{ font-size: 3.5rem; font-weight: 500; color: #222; margin: 10px 0 20px;  padding: 0 20px; }
#view .title-box ul{ display: flex; justify-content: space-between; }
#view .title-box ul li{ font-size: 1.4rem; font-weight: normal; color: #222; }
#view .content-box{ border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; padding: 40px 20px; font-size: 11pt; }
#view .answer-box{ display: flex; align-items: stretch; }
#view .answer-box .title{ display: flex; justify-content: center; align-items: center; width: 170px; min-height: 150px; background-color: #F9F9F9; font-size: 1.7rem; font-weight: normal; color: #222; }
#view .answer-box div:not(.title){ width: calc(100% - 170px); padding: 30px; font-size: 1.7rem; font-weight: normal; color: #222; background-color: #fff; }
#view a{ width: 205px; height: 50px; display: flex; justify-content: center; align-items: center; font-family: 'SunBatang-Light'; font-size: 1.6rem; border: 1px solid #B8926E; border-radius: 100px; margin: 0 auto; }

@media screen and (max-width: 1250px){
	#view{ padding-top: 30px; }
	#view .title-box h3{ font-size: 3rem; margin-bottom: 15px; }
	#view .view-box{ padding-top: 25px; margin-bottom: 30px; }
	#view .answer-box .title{ font-size: 1.5rem; }
	#view .answer-box div:not(.title){ font-size: 1.5rem; }
	#view a{ width: 160px; height: 45px; }
}

@media screen and (max-width: 800px){
	#view .title-box h3{ font-size: 2.5rem; }
	#view .title-box > span{ font-size: 1.5rem; }
	#view .answer-box .title{ width: 100px; min-height: 100px; }
	#view .answer-box div:not(.title){ width: calc(100% - 100px); }
}

/* 문의하기 */
#inquiry{ padding-bottom: 95px; }
#inquiry .input_box{margin-top: 40px;}
#inquiry .input_box .item{margin-bottom:40px;}
#inquiry .input_box .policy_box h4,
#inquiry .input_box .email h4,
#inquiry .input_box .item h4{font-weight: 500; font-size:18px; color: #222; margin-bottom:16px;}
#inquiry .input_box .policy_box h4 span,
#inquiry .input_box .item h4 span{color: #b8926e;}
#inquiry .input_box .item input{border: 1px solid rgba(224,224,224, 0.7); border-radius: 5px; padding: 3px 15px 0; box-sizing:border-box; width: 100%; height: 42px; font-family: 'GmarketSans'; font-size:16px; color: #222;}
#inquiry .input_box .item textarea::placeholder,
#inquiry .input_box .item input::placeholder{color: #ccc;}
#inquiry .input_box .item textarea{border:1px solid #e5e5e5; box-sizing:border-box; padding: 20px; width: 100%; height: 320px; resize:none; border-radius:5px}
#inquiry .input_box .item input, #inquiry .input_box .item textarea, #inquiry #select *{ font-size: 1.5rem; }
#inquiry #select{ height: 42px; }
#inquiry #select .select_label{ line-height: 42px; }
#inquiry #select .select_label:after{ line-height: 42px; }
#inquiry .input_box .item .file_box{font-size:0;}
#inquiry .input_box .item .captcha{display:flex; border-radius: 5px; overflow: hidden; }
#inquiry .input_box .item .captcha .box{position:relative; }
#inquiry .input_box .item .captcha .box input{width: 340px; height: 50px; border-radius:0 5px 5px 0; border-left: none; margin-left: -2px;}
#inquiry .input_box .item .captcha .box button{position:absolute; top: 1px; right: 1px; width: 48px; height: 48px; background: none; border:none; font-size:16px; color: #222; line-height: 48px; cursor: pointer;}
#inquiry .input_box .item #fileName{width: calc(100% - 190px); height: 42px; box-sizing:border-box; border:none; border-bottom: 1px solid #e5e5e5; font-size:16px; color: #000;}
#inquiry .input_box .item .file{position:relative; width: 160px; height: 42px; text-align: center; line-height:42px; font-size:16px; color: #333333; margin-left: 26px; background: #f0f0f0; cursor: pointer;}
#inquiry .input_box .item .file span{display:inline-block; width: 160px; height: 42px; background: #b8926e; color: #fff; line-height: 42px; border-radius:5px}
#inquiry .input_box .item .file input{display:none}
#inquiry .input_box .email{font-size:0;}
#inquiry .input_box .email .item{ display: flex; justify-content: space-between; }
#inquiry .input_box .email input, #inquiry .email #select{width: calc((100% - 70px) / 3);}
#inquiry .input_box .email span{display:inline-block; vertical-align: top;  font-size:15px; color: #888; text-align: center; line-height: 42px;}
#inquiry .input_box .email select{width: calc(33.33% - 30px); margin-left: 30px;}
#inquiry .input_box .option label{ font-size: 1.5rem; padding-left: 25px; position: relative; }
#inquiry .input_box .option label:first-of-type{ margin-right: 15px; }
#inquiry .input_box .option input + label::before{ content: ""; width: 15px; height: 15px; background: #fff; border: 1px solid #e1e1e1; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#inquiry .input_box .option input:checked + label::after{ content: ""; width: 9px; height: 9px; background: #b8926e; border-radius: 50%; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); }
#inquiry .input_box .i2{display:flex;}
#inquiry .input_box .i2 .item{width: calc(50% - 20px); margin-right: 40px;}
#inquiry .input_box .i2 .item:last-of-type{margin-right: 0;}
#inquiry .input_box .policy_box .privacy, #inquiry .input_box .policy_box #privacy{ padding: 0; }
#inquiry .input_box .policy_box .info{ padding: 30px; box-sizing:border-box; border-radius:5px; border:1px solid #e5e5e5; max-height: 240px; overflow-y: auto;}
#inquiry .input_box .policy_box .info .
#inquiry .input_box .policy_box .info .s_tit{padding-top: 0;}
#inquiry .input_box .policy_box .info .s_tit h3{font-size:20px; }
#inquiry .input_box .policy_box .info .s_tit::before, 
#inquiry .input_box .policy_box .info .s_tit::after{display:none; }
#inquiry .input_box .policy_box .info .cont{margin-top: 30px;}
#inquiry .input_box .policy_box .info .item{margin-bottom:20px;}
#inquiry .input_box .policy_box .chk{margin-top: 16px;}
#inquiry .input_box .policy_box .chk input{display:none; }
#inquiry .input_box .policy_box .chk label{display:flex; justify-content:flex-end; text-align: right; cursor: pointer;}
#inquiry .input_box .policy_box .chk label span{position:relative; top: 2px; display:inline-block; vertical-align: top; width: 16px; height: 16px; box-sizing:border-box; border:1px solid #ddd; line-height:1.3em; border-radius:2px; margin-right: 4px;}
#inquiry .input_box .policy_box .chk label span i{position: absolute; top: -1px; left: -1px; color: #fff; font-size:16px; font-weight:bold;}
#inquiry .input_box .policy_box .chk label p{width: auto; display:inline-block; vertical-align: middle; font-weight:300; font-size:15px; letter-spacing:-0.015em; color: #333; padding-left: 5px; box-sizing:border-box; ;line-height:1.4em;}
#inquiry .input_box .policy_box .chk input[id="chk"]:checked + label span{border-color:#b8926e}
#inquiry .input_box .policy_box .chk input[id="chk"]:checked + label span i{color: #b8926e;}
#inquiry .btn{text-align: center; margin-top: 80px;}
#inquiry .btn button{display:inline-block; vertical-align: top; width: 220px; height: 60px; line-height: 60px; border-radius:5px; background: #fff; border: 1px solid #b8926e; border-radius: 990px; font-family: 'GmarketSans'; font-size:16px; color: #000; transition:0.4s; padding: 0 26px; box-sizing:border-box; position:relative; text-align: left; }
#inquiry .btn button i{margin-right: 6px; position:absolute; right: 20px; top: 49%; transform:translateY(-50%); cursor: pointer; }
#inquiry .btn button:hover{background: #b8926e; color: #fff;}

@media screen and (max-width: 1250px){
	#inquiry .input_box .item{ margin-bottom: 30px; }
	#inquiry .input_box .i2 .item{ margin-bottom: 30px; }
	#inquiry .btn button{ width: 180px; height: 55px; line-height: 55px; }  
	#inquiry .btn button i{ top: 45%; }
}

@media screen and (max-width: 900px){
	#inquiry .input_box .policy_box h4, #inquiry .input_box .email h4, #inquiry .input_box .item h4{ margin-bottom: 5px; }
	#inquiry .input_box .i2{ flex-wrap: wrap; }
	#inquiry .input_box .i2 .item{ width: 100%; margin-right: 0; }
}

@media screen and (max-width: 700px){
	#inquiry .input_box .email .item{ flex-wrap: wrap; }
	#inquiry .input_box .email input{ width: calc((100% - 50px) / 2); }
	#inquiry .email #select{ width: 100%; margin-top: 10px; }
	#inquiry .input_box .item #fileName{ width: calc(100% - 150px); }
	#inquiry .input_box .item .file span{ width: 120px; }
	#inquiry .btn button{ width: 160px; height: 50px; line-height: 50px; }

	#inquiry .input_box .policy_box .info{ padding: 20px; padding-top: 10px; }
}


/* 로그인 */
#login{ padding: 100px 0 125px; overflow-x: hidden; }
#login h2{ font-size: 2.6rem; font-weight: 500; color: #222; text-align: center;}
#login::before{ content: ""; width: 286px; height: 286px; background-color: rgba(211, 194, 168, 0.6); box-shadow: 0 0 250px 250px rgba(211, 194, 168, 0.6); position: absolute; bottom: 0; right: -192px; z-index: -5; opacity: 0.3; }
#login .input-box{ display: flex; flex-direction: column; align-items: center; padding-top: 60px; }
#login .input-box input{ width: 365px; height: 50px; border: 1px solid #C3C3C3; border-radius: 100px; padding: 0 30px; font-size: 1.6rem; font-weight: normal; line-height: 1.3; background: none; outline: none; }
#login .input-box input:first-of-type{ margin-bottom: 10px; }
#login .input-box input::placeholder{ line-height: 1.3; color: #C3C3C3; }
#login .form-box{ text-align: center; }
#login .form-box ul{ display: flex; justify-content: center; margin-top: 10px; margin-bottom: 35px; }
#login .form-box ul li{ position: relative; }
#login .form-box ul li::after{ content: ""; width: 1px; height: 14px; background-color: rgba(195, 195, 195, 0.9); position: absolute; top: 45%; right: 0; transform: translateY(-50%); }
#login .form-box ul li:last-of-type::after{ display: none; }
#login .form-box ul li a{ display: inline-block; font-size: 1.4rem; font-weight: normal; color: rgba(195, 195, 195, 0.9); padding: 10px; }
#login .form-box input[type="submit"]{ width: 220px; height: 50px; border: none; background-color: #54565A; font-family: 'SunBatang-Light'; font-size: 1.6rem; color: #fff; border-radius: 100px; transition: all 0.5s; -webkit-appearance: none; }
#login .form-box input[type="submit"]:hover{ background-color: #E4D3B4; color: #222; cursor: pointer; }

@media screen and (max-width: 1250px){
	#login{ padding: 120px 0; }

}

@media screen and (max-width: 500px){
	#login::before{ display: none; }
}

/* table input */
table input[type="radio"] + label span{ display:inline-block; vertical-align:middle; width:12px; height:12px; margin-right:5px; background:url(/img/common/icon_radio.png) no-repeat 0 0 /cover; }
table input[type="radio"]:checked + label span{ background-image:url(/img/common/icon_radio_chk.png); }
table .score p{ display:inline-block; vertical-align:top; margin-right:6px; }
table .privacy textarea{ margin-bottom:10px; }
table .addr td > input{ display:block !important; }
table .addr td p > *{ display:inline-block; vertical-align:top; }
table .addr td p input{ width:375px; }
table .addr td p button,
table .point > div .point_input button{ width:141px; height:38px; font-family: 'GmarketSans'; background:#B8926E; font-size:14px; font-weight:300; color:#fff; letter-spacing:-0.03em; border-radius: 5px; border: none; }
table .email td > *{ display:inline-block; vertical-align:top; }
table .email td > span{ vertical-align:-10px; width:auto; padding:0 5px; }
table .email td .email_id{ width:205px; }
table .email td .email_dom{ width:140px; }
table .point > div{ width:520px; font-size:14px; color:#666; letter-spacing:-0.03em; font-weight:300; }
table .point > div .point_input > *{ display:inline-block; vertical-align:middle; }
table .point input[type="text"]{ width:180px !important; }
table .point button{ margin-left:6px; }
table .point .point_input span em{ font-weight:600; color:#bb916d; letter-spacing:0; }
table .point .point_care{ margin:10px 0; }
table .point .point_care strong{ font-weight:600; letter-spacing:0; }
table input[type="radio"] + label{ position: relative; }
table input[type="radio"] + label::before{ content: ""; display:inline-block; vertical-align:middle; width:12px; height:12px; margin-right:5px; background: #f8f8f8; border-radius: 50%; border: 1px solid #e1e1e1; position: relative; top: -1px; }
table input[type="radio"]:checked + label::after{ content: ""; display:inline-block; vertical-align:middle; width:8px; height:8px; background: #B8926E; border-radius: 50%; position: absolute; top: 44%; left: 3px; transform: translateY(-50%); }
table input[type="text"],table textarea, table input[type="password"]{ border:1px solid rgba(224,224,224,.7); box-sizing:border-box; font-size:15px; color:#999; font-weight:300; }
table input[type="text"],
table input[type="password"]{ width:520px; height:38px; padding:0 10px; }

.m_id { width:141px; height:38px; font-family: 'GmarketSans'; background:#B8926E; font-size:14px; font-weight:300; color:#fff; letter-spacing:-0.03em; border-radius: 5px; border: none; }

/* select custom */
#select{ position:relative; background: #fff; color: #000; border-radius: 5px; }
#select *{ cursor:pointer; box-sizing:border-box; font-size:14px; font-weight:300; letter-spacing:-0.03em; }
#select .select_down{ display:none; position:absolute; width:100%; left:0; z-index:3; }

#select.email_select{ height:38px; }
#select.email_select .select_label{ line-height:38px; padding:0 40px 0 15px; position:relative; border: 1px solid rgba(224,224,224,.7);border-radius: 5px; }
#select.email_select .select_label:after{ content:''; display:block; width:38px; height:100%; position:absolute; right:0; top:0; background:url("/img/sub/icon_email_arr_brown.png") no-repeat center; }
#select.email_select .select_down{ background:#fff; padding:10px 0; border:1px solid rgba(224,224,224,.7); border-radius: 5px; top: calc(100% + 4px); }
#select.email_select .select_down li{ padding:7px 15px; }

.form_btn{ margin-top:30px; text-align: center; }
.form_btn > *{ display:inline-block; vertical-align:top; width:165px; height:40px; box-sizing:border-box; font-weight:300; font-size:15px; color: #000; letter-spacing:-0.03em; border: none; background: none; border-radius: 990px; -webkit-appearance: none; cursor: pointer; border: 1px solid #B8926E; transition: all 0.5s; }
.form_btn .cancle{ margin-right: 15px; }
.form_btn > *:hover{ background: #B8926E; color: #fff; }

/* 회원가입정보, 회원수정 */
table.info{ border-top:1px solid #B8926E; margin-top:20px; }
table.info th,
table.info td{ height:50px; border-bottom:1px solid #e0e0e0; padding:5px 0; box-sizing:border-box; }
table.info th{ text-align:left; padding-left:10px; box-sizing:border-box; font-size:16px; color:#333; letter-spacing:-0.03em; font-weight:400; }
table.info th i{ color:#B8926E; font-style:normal; }
table.info td{ font-weight:300; font-size:15px; color:#333; letter-spacing:-0.03em; }
table.info td textarea{ height:126px; width:520px; margin-bottom:5px; }
table.info *::placeholder{ font-size:12px; color:rgba(102,102,102,.5); letter-spacing:-0.03em; }

/* 회원가입, 약관동의 */
#join{ padding-bottom: 95px; }
#join h2{ font-size: 2.6rem; font-weight: 500; color: #222; text-align: center; padding-top: 30px; }

input[type="radio"], input[type="checkbox"], input[type="file"] {
    vertical-align: middle;
    display: none !important;
}

.join_info{ padding-top: 30px; }

/* 약관동의 */
.join_term table.info th{ vertical-align:top; padding-top:20px; line-height:26px; }
.join_term table.info td{ padding-top: 25px; }
.join_term table.info td .pliocy_box{ width:100%; margin-bottom:0; height:150px; border: 1px solid #e0e0e0; overflow-y: scroll; }
.join_term table.info td .pliocy_box .privacy{ padding: 0 20px; } 
.join_term table.info td .pliocy_box .privacy > p + dl{ margin-bottom: 0; }
.join_term table.info td label{ display:block; margin:15px 0 20px; color:#666; font-size:14px; cursor: pointer; }
.join_term table.info td label em{ color:#000; margin-right: 5px; }
.join_term table.info th{ vertical-align:top; padding-top:20px; line-height:26px; }
.join_term table.info td label{ display:block; margin:15px 0 20px; color:#666; font-size:14px; }
.join_term table.info td label em{ color:#000; }
.join_term .privacy > dl:last-of-type{ padding-bottom: 0; }
.join_term .privacy > dl > dd:last-of-type{ padding-bottom: 0; }

/* 회원가입 */
#register table td{ padding: 10px 0; height: auto; }
#register table input{ width: 100%; border-radius: 5px; color: #333; } 
#register .number td{ display: flex; justify-content: space-between; align-items: center; }
#register .number input{ width: calc((100% - 70px) / 3); }
#register .email td{ display: flex; justify-content: space-between; align-items: center; }
#register .email input, #register #select.email_select{ width: calc((100% - 45px) / 3); }
#register .file td{ display: flex; justify-content: space-between; }
#register .file input{ width: calc(100% - 147px); }
#register .file label{ display: flex; justify-content: center; align-items: center; width: 141px; height: 38px; font-family: 'GmarketSans'; background: #B8926E; font-size: 14px; font-weight: 300; color: #fff; letter-spacing: -0.03em; border-radius: 5px; border: none; }
#register .addr p{ display: flex; justify-content: space-between; align-items: center; }
#register .addr p input{ width: calc(100% - 147px); }
#register .addr td > input{ margin-top: 10px; }

@media screen and (max-width: 1250px){
	.info_form > .title{ font-size: 2rem; }
}

@media screen and (max-width: 1000px){
	#join h2{ padding-top: 0; }
	.join_info{ padding-top: 0; }
}

@media screen and (max-width: 800px){
	table.info colgroup{ display: none; }
	table.info tr{ display: flex; flex-direction: column; }
	.join_info table.info th{ border-bottom: none; }
	.join_term table.info th{ padding-bottom: 10px; padding-top: 15px; }
	#register table th{ padding: 0 10px; padding-top: 10px; }
	table.info th, table.info td{ height: auto; }
	.join_term table.info td{ padding-top: 0; }
	.join_term table.info td label{ margin: 15px 0; }
	.form_btn > *{ width: 130px; }
	#register .text td{ padding: 10px; }
}

@media screen and (max-width: 600px){
	#register .email td{ flex-wrap: wrap; }
	#register .email input, #register #select.email_select{ width: calc((100% - 40px) / 2); }
	#register .email input:last-of-type{ width: 100%; margin-top: 15px; }
}

/* 찜한 리스트 */
#heart{ padding-bottom: 95px; }
#heart h2{ font-size: 2.6rem; font-weight: 500; color: #222; text-align: center;}
#heart .info-box{ text-align: center; padding: 60px 0; }
#heart .info-box .kakao{ display: flex; justify-content: center; align-items: center; padding-bottom: 16px; position: relative; }
#heart .info-box .kakao div{ margin-bottom: -5px; padding-left: 10px; text-align: left; }
#heart .info-box .kakao span{ font-size: 1.2rem; font-weight: normal; color: #222; }
#heart .info-box .kakao h3{ font-size: 2.2rem; font-weight: 500; color: #222; }
#heart .info-box .order{ display: inline-block; border-top: 1px solid #B8926E; padding: 0 20px; }
#heart .info-box .order p span{ display: inline-block; font-size: 1.7rem; font-weight: 500; color: #222; position: relative; padding: 16px; }
#heart .info-box .order p span::before, #heart .info-box .order p span::after{ content: ""; width: 6px; height: 6px; background-color: #B8926E; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); }
#heart .info-box .order p span::before{ left: 0; }
#heart .info-box .order p span::after{ right: 0; }
#heart .info-box .order > div{ display: flex; }
#heart .info-box .order ul{ color: #222; padding-left: 45px; position: relative; } 
#heart .info-box .order ul::before{ content: attr(data-title); font-size: 1.6rem; font-weight: 500; color: #222; position: absolute; top: 0; left: 0; }
#heart .info-box .order ul li{ font-size: 1.6rem; font-weight: normal; margin-bottom: 10px; text-align: left; }
#heart .info-box .order .line{ position: relative; padding-left: 30px; }
#heart .info-box .order .line::before{ content: ""; width: 1px; height: 50px; background-color: #B8926E; position: absolute; top: -1px; left: 15px; }

#heart .heart-list{ padding-bottom: 10px; }

@media screen and (max-width: 1250px){
	#heart .info-box{ padding: 30px 0; }
	#heart .info-box .order p span{ font-size: 1.6rem; padding-bottom: 10px; }
	#heart .info-box .order ul::before{ font-size: 1.5rem; }
	#heart .info-box .order ul li{ font-size: 1.5rem; }
	#heart .info-box .order .line::before{ top: -3px; }
	#heart .heart-list{ padding-bottom: 0; }
}

/* 2023-04-10 김승준 */
#product .info-box{ text-align: center; padding: 60px 0; }
#product .info-box .kakao{ display: flex; justify-content: center; align-items: center; padding-bottom: 16px; position: relative; }
#product .info-box .kakao div{ margin-bottom: -5px; padding-left: 10px; text-align: left; }
#product .info-box .kakao span{ font-size: 1.2rem; font-weight: normal; color: #222; }
#product .info-box .kakao h3{ font-size: 2.2rem; font-weight: 500; color: #222; }
#product .info-box .order{ display: inline-block; border-top: 1px solid #B8926E; padding: 0 20px; }
#product .info-box .order p span{ display: inline-block; font-size: 1.7rem; font-weight: 500; color: #222; position: relative; padding: 16px; }
#product .info-box .order p span::before, #product .info-box .order p span::after{ content: ""; width: 6px; height: 6px; background-color: #B8926E; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); }
#product .info-box .order p span::before{ left: 0; }
#product .info-box .order p span::after{ right: 0; }
#product .info-box .order > div{ display: flex; }
#product .info-box .order ul{ color: #222; padding-left: 45px; position: relative; } 
#product .info-box .order ul::before{ content: attr(data-title); font-size: 1.6rem; font-weight: 500; color: #222; position: absolute; top: 0; left: 0; }
#product .info-box .order ul li{ font-size: 1.6rem; font-weight: normal; margin-bottom: 10px; text-align: left; }
#product .info-box .order .line{ position: relative; padding-left: 30px; }
#product .info-box .order .line::before{ content: ""; width: 1px; height: 50px; background-color: #B8926E; position: absolute; top: -1px; left: 15px; }
/* 2023-04-10 김승준 */