@charset "utf-8";
@import url('goods.css?ver=20240702001');

.header > .navigation > h1 {text-align:left;}
.header > .navigation > a.icon.icon-search {display:block;}
.header > .navigation > a.icon.icon-back,
.header > .navigation > a.icon.icon-home {display:none;}

.main .container {padding-bottom:0;}

/* 비쥬얼 */
.main > .visual > .image {position:relative; height:45vh;}
.main > .visual > .image > div {height:100%;}
.main > .visual > .image > div > ul > li {position:relative; width:100%; height:100%; overflow:hidden;}
.main > .visual > .image > div > ul > li > a {display:block; height:100%;}
.main > .visual > .image > div > ul > li > img,
.main > .visual > .image > div > ul > li > a > img {position:absolute; left:50%; top:0; transform:translateX(-50%); height:100%;}
.main > .visual > .image > div > .swiper-notification {left:auto; right:16px; top:unset; bottom:16px; padding:0 11px; line-height:25px; opacity:1; text-align:right; color:#fff; font-size:11px; font-weight:500; letter-spacing:2px; background-color:#333; background-color:rgba(0, 0, 0, 0.7); border-radius:3px; z-index:10; box-shadow:0 3px 5px #999;}
.main > .visual > .image > span {position:absolute; left:0; top:50%; transform:translateY(-50%); z-index:11;}
.main > .visual > .image > span > a {display:block; width:145px; padding-left:16px; margin-top:16px; line-height:46px; color:#fff; background-color:#43dddd; border-radius:0 23px 23px 0; box-sizing:border-box;}
.main > .visual > .image > span > a:first-child {margin-top:0;}
.main > .visual > .image > span > a.on {background-color:#6b60ee;}
.main > .visual > .today {padding:16px; border-top:8px solid #f2f3fb;}
.main > .visual > .today > strong {display:block; font-size:20px; font-weight:600; line-height:20px;}
.main > .visual > .today > strong > em {color:#6b60eb;}
.main > .visual > .today > div {display:flex; justify-content:space-between; height:68vw; padding-top:16px; margin-top:16px; border-top:1px solid #eee;}
.main > .visual > .today > div > .swiper-container {width:50vw; height:100%; margin:0;}
.main > .visual > .today > div > .swiper-container > ul > li {background:url(../images/addon/image-today.png) no-repeat center center; background-size:contain;}
.main > .visual > .today > div > .swiper-container > ul > li > a {display:block; height:100%;}
.main > .visual > .today > div > .swiper-container > ul > li > img,
.main > .visual > .today > div > .swiper-container > ul > li > a > img {width:100%; height:100%;}
.main > .visual > .today > div > .swiper-container > ul > li > strong {position:absolute; left:4px; bottom:34px; display:block; width:134px; height:36px; padding-left:4px; line-height:30px; color:#6b60eb; background:url(../images/addon/bg-main-today.png) no-repeat;}
.main > .visual > .today > div > .swiper-container > .swiper-pagination > a {margin:0; margin-right:4px; font-size:0; line-height:0;}
.main > .visual > .today > div > .swiper-container > .swiper-pagination > a:last-child {margin-right:0;}
.main > .visual > .today > div > .swiper-container > .swiper-pagination > a.swiper-pagination-bullet {background-color:#ddd;}
.main > .visual > .today > div > .swiper-container > .swiper-pagination > a.swiper-pagination-bullet-active {background-color:#6b60eb;}
.main > .visual > .today > div > .link {width:calc(100% - 50vw - 16px);}
.main > .visual > .today > div > .link > a {display:block; padding-left:16px; margin-top:16px; font-size:16px; font-weight:500; line-height:calc((68vw - 16px) / 2); background-color:#f2f3fb; background-repeat:no-repeat; background-position:calc(100% - 16px) center; background-size:22px auto; border-radius:20px;}
.main > .visual > .today > div > .link > a:first-child {margin-top:0;}
.main > .visual > .today > div > .link > a.rsv {background-image:url(../images/addon/icon-main-calendar.png);}
.main > .visual > .today > div > .link > a.qna {background-image:url(../images/addon/icon-main-qna.png);}
.main > .visual > .today > a {display:block; padding-left:64px; margin-top:16px; font-size:18px; font-weight:500; line-height:60px; background:#f2f3fb url(../images/addon/icon-main-why.png) no-repeat 20px center; border-radius:10px;}
/* [S] 2024.01.31 */
.main > .visual > .today > strong,
.main > .visual > .today > div > .swiper-container > ul > li > strong {display:none;}
/* [E] 2024.01.31 */

/* 섹션 */
.main > .section {padding:16px; margin-top:16px; border-top:8px solid #f2f3fb;}
.main > .section > ul > li.off {display:none;}
.main > .section > strong {position:relative; display:block; font-size:20px; line-height:26px;}
.main > .section > strong > a {position:absolute; top:0; right:0; font-size:12px; font-weight:400; line-height:26px;}
.main > .section > button {display:block; width:173px; height:49px; padding-left:18px; margin:0 auto; margin-top:30px; font-size:15px; font-weight:500; border:1px solid #ddd; background:url(../images/addon/icon-reload.png) no-repeat 35px center;}
.main > .section > button > em {display:inline-block; min-width:10px; margin-left:4px;}

.main > .cate > ul {display:flex; flex-wrap:wrap; padding-top:16px; margin-top:16px; border-top:1px solid #eee;}
.main > .cate > ul > li {width:calc((100% - 32px) / 3); margin-right:16px; margin-top:16px; text-align:center;}
.main > .cate > ul > li:nth-child(3n) {margin-right:0;}
.main > .cate > ul > li:nth-child(1),
.main > .cate > ul > li:nth-child(2),
.main > .cate > ul > li:nth-child(3) {margin-top:0;}
.main > .cate > ul > li > a {display:block; font-size:16px; font-weight:500;}
.main > .cate > ul > li > a > img {display:block; width:100%; margin-bottom:20px;}

.main > .expt > ul {display:flex; flex-wrap:wrap; padding-top:16px; margin-top:16px; border-top:1px solid #eee;}
.main > .expt > ul > li {position:relative; width:100%; height:120px; margin-top:16px; background-color:#f2f3fb; border-radius:10px;}
.main > .expt > ul > li:first-child {margin-top:0;}
.main > .expt > ul > li > a {position:relative; display:block; width:100%; height:100%; padding:16px; padding-left:120px; font-size:16px; font-weight:500; line-height:20px; box-sizing:border-box; overflow:hidden;}
.main > .expt > ul > li > a > small {position:absolute; left:16px; top:16px; display:block; width:88px; height:88px; background-color:#fff; border-radius:100%; overflow:hidden;}
.main > .expt > ul > li > a > small > img {position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; width:100%;}
.main > .expt > ul > li > a > strong {display:flex; justify-content:space-between; align-items:center;}
.main > .expt > ul > li > a > strong > em {font-size:14px; font-weight:400; line-height:16px; color:#999;}
.main > .expt > ul > li > a > span {display:block; margin-top:6px;}
.main > .expt > ul > li > a > span > span {display:inline-block; padding:4px 6px; margin-top:2px; margin-right:2px; font-size:12px; font-weight:400; line-height:12px; letter-spacing:-0.5px; color:#999; border:1px solid #ddd; background-color:#fff; border-radius:3px;}
.main > .expt > ul > li > a > span > span:last-child {margin-right:0;}
.main > .expt > ul > li > small {width:88px; position:absolute; left:16px; bottom:16px;/* display:flex;*/display:none; justify-content:space-between; align-items:center; font-size:12px; line-height:14px;}
.main > .expt > ul > li > small > a {padding-left:16px; background:url(../images/icon-heart.png) no-repeat left 2px; background-size:12px auto; z-index:100;}
.main > .expt > ul > li > small > a.on {background-image:url(../images/icon-heart-on.png);}

.main > .prdt > .list.swiper-container > ul {height:auto !important; flex-wrap:unset !important; padding-top:16px; margin-top:16px; border-top:1px solid #eee;}
.main > .prdt > .list.swiper-container > ul > li {width:300px !important; margin-top:0 !important; margin-left:0 !important; margin-right:16px !important;}
.main > .prdt > .list.swiper-container > ul > li:last-child {margin-right:0 !important;}
.main > .prdt > .list.swiper-container > ul > li > a > .img {height:calc(300px * var(--prdt_img_rate)) !important;}

.main > .cnst > ul {padding-top:16px; margin-top:16px; border-top:1px solid #eee;}
.main > .cnst > ul > li {width:100%; padding-top:16px; margin-top:16px; border-top:1px solid #f2f3fe;}
.main > .cnst > ul > li:first-child {padding-top:0; margin-top:0; border-top-style:none;}
.main > .cnst > ul > li > a {display:block; width:100%; height:100%;}
.main > .cnst > ul > li > a > span {display:inline-block; padding:0 12px; font-size:12px; line-height:28px; color:#6b60eb; background-color:#eee; border-radius:5px;}
.main > .cnst > ul > li > a > strong {display:block; margin-top:8px; font-size:16px; font-weight:500; line-height:25px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.main > .cnst > ul > li > a > em {display:block; height:69px; margin-top:5px; font-size:14px; line-height:23px; color:#999; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}

.main > .rvws {padding:16px 0; width:100%;}
.main > .rvws > strong {padding:0 16px;}
.main > .rvws > strong > a {right:16px;}
.main > .rvws > div > ul {display:flex; align-items:center; margin-top:16px;}
.main > .rvws > div > ul > li {width:70vw; height:196px; background-color:#f2f3fb; opacity:0.5;}
.main > .rvws > div > ul > li.swiper-slide-active {opacity:1;}
.main > .rvws > div > ul > li > a {display:block; width:100%; height:100%; padding:16px; box-sizing:border-box;}
.main > .rvws > div > ul > li > a > span {display:block; text-align:right; color:#999;}
.main > .rvws > div > ul > li > a > strong {display:flex; margin-top:8px; text-align:center;}
.main > .rvws > div > ul > li > a > strong > strong {width:calc(100% - 35px * 2); font-size:16px; line-height:40px; vertical-align:middle; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.main > .rvws > div > ul > li > a > strong > em {width:19px; height:40px; font-size:0; line-height:0; vertical-align:middle;}
.main > .rvws > div > ul > li > a > strong > em:first-child {margin-right:16px; background:url(../images/addon/icon-quotation-01.png) no-repeat left top;}
.main > .rvws > div > ul > li > a > strong > em:last-child {margin-left:16px; background:url(../images/addon/icon-quotation-02.png) no-repeat right bottom;}
.main > .rvws > div > ul > li > a > em {display:block; height:46px; margin-top:16px; font-size:14px; line-height:23px; color:#999; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.main > .rvws > div > ul > li > a > small {display:flex; align-items:flex-end; justify-content:end; height:25px; margin-top:5px; font-size:14px; color:#999;}
.main > .rvws > div > ul > li > a > small > em {width:25px; height:25px; margin-left:16px; font-size:0; line-height:0; background:url(../images/addon/icon-pencil.png) no-repeat center center; background-size:25px auto;}
.main > .rvws > div > .swiper-button-prev,
.main > .rvws > div > .swiper-button-next {width:17px; height:27px; margin-top:0; background-size:auto; transform:translateY(-50%);}
.main > .rvws > div > .swiper-button-prev {left:16px; background-image:url(../images/addon/icon-main-prev.png);}
.main > .rvws > div > .swiper-button-next {right:16px; background-image:url(../images/addon/icon-main-next.png);}

.main > .nhow > ul {padding-top:16px; margin-top:16px; border-top:1px solid #eee;}
.main > .nhow > ul > li {padding-top:16px; margin-top:16px; border-top:1px solid #f2f3fe;}
.main > .nhow > ul > li:first-child {padding-top:0; margin-top:0; border-top-style:none;}
.main > .nhow > ul > li > a {display:block; width:100%; height:100%;}
.main > .nhow > ul > li > a > em {position:relative; display:block; width:100%; height:calc(100vw - 32px); overflow:hidden; background-color:#fefefe;}
.main > .nhow > ul > li > a > em > img {position:absolute; left:0; top:50%; transform:translateY(-50%); display:block; width:100%;}
.main > .nhow > ul > li > a > strong {display:block; margin-top:8px; font-weight:500; line-height:23px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

.main > .join {padding:32px 24px; margin-top:16px; background-color:#f2f3fb;}
.main > .join > strong {display:block; font-size:20px; font-weight:400; line-height:30px; text-align:center;}
.main > .join > div {display:flex; margin-top:32px;}
.main > .join > div > button {width:calc((100% - 16px) / 2); height:50px; margin-left:16px; font-size:16px; font-weight:500; color:#fff; background-color:#6b60eb;}
.main > .join > div > button:first-child {margin-left:0;}

/* 팝업 */
.main > .popup {display:none; position:fixed; left:0; top:0; width:100%; min-width:320px; height:100%; text-align:center; color:#333; font-weight:bold; background-color:#333; background-color:rgba(0, 0, 0, 0.5); z-index:999; box-sizing:border-box;}
.main > .popup.on {display:block;}
.main > .popup > .swiper-container {position:absolute; left:0; bottom:0; width:100%; background-color:#fff; background-color:rgba(255, 255, 255, 0.95); border-radius:8px 8px 0 0;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide {position:relative; padding:0; text-align:left; font-weight:normal; box-sizing:border-box;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .image {width:100%; min-height:30vh; max-height:calc(100vh - 57px - 42px - 47px); border-style:none; overflow-y:auto; box-sizing:border-box; border-radius:8px 8px 0 0;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .image > a > img {display:block; max-width:100%; margin:0 auto;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .today {padding:16px 20px; line-height:15px; text-align:right; background-color:#fff;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .today > a {display:inline-block; font-size:13px; line-height:15px; color:#111;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .close {display:inline-block; position:absolute; left:20px; bottom:16px; font-size:13px; line-height:15px; color:#111;}
.main > .popup > .swiper-container > .swiper-notification {display:inline-block; left:auto; right:16px; top:16px; padding:0 11px; line-height:25px; opacity:1; text-align:right; color:#fff; font-size:11px; font-weight:500; letter-spacing:2px; background-color:#333; background-color:rgba(255, 255, 255, 0.2); border-radius:12.5px; z-index:1000;}

/** PC */
@media all and (min-width:760px) {
	.main .container {padding-bottom:64px;}
	
	.main > .visual {display:flex; width:1320px; margin:0 auto; margin-top:40px;}
	.main > .visual > .image {width:854px; height:400px;}
	.main > .visual > .image > div > .swiper-notification {display:block; right:25px; bottom:25px;}
	.main > .visual > .image > span > a {width:165px; padding-left:20px; margin-top:20px; line-height:54px; border-radius:0 27px 27px 0;}
	.main > .visual > .today {position:relative; width:436px; padding:0; margin-left:30px; border-top-style:none;}
	.main > .visual > .today > strong {position:absolute; left:4px; top:189px; color:#ddd; z-index:10;}
	.main > .visual > .today > div {height:283px; padding-top:0; margin-top:0; border-top-style:none;}
	.main > .visual > .today > div > .swiper-container {width:208px;}
	.main > .visual > .today > div > .swiper-container > ul > li > strong {top:216px; bottom:unset;}
	.main > .visual > .today > div > .link {width:208px;}
	.main > .visual > .today > div > .link > a {padding-left:25px; margin-top:19px; font-size:20px; line-height:132px; background-position:calc(100% - 25px) center; background-size:39px auto;}
	.main > .visual > .today > a {padding-left:88px; margin-top:21px; font-size:20px; line-height:96px; background-position:35px center; border-radius:20px;}
	
	.main > .section {width:1320px; padding:0; margin:0 auto; margin-top:100px; border-top-style:none;}
	.main > .section > strong {font-size:30px; font-weight:400; line-height:34px;}
	.main > .section > strong > a {display:block; width:34px; height:34px; font-size:0; line-height:0; border:1px solid #ddd; background:url(../images/addon/icon-main-more.png) no-repeat center center; box-sizing:border-box; border-radius:3px;}
	
	.main > .cate > ul {flex-wrap:unset; align-items:flex-start; justify-content:space-between; padding-top:0; margin-top:40px; border-top-style:none;}
	.main > .cate > ul > li {width:110px; margin-right:0 !important; margin-top:0 !important;}
	.main > .cate > ul > li > a {font-size:17px;}
	
	.main > .expt > ul {padding-top:0; margin-top:40px; border-top-style:none;}
	.main > .expt > ul > li {width:420px; height:128px; margin-right:30px; margin-top:30px;}
	.main > .expt > ul > li:nth-child(1),
	.main > .expt > ul > li:nth-child(2),
	.main > .expt > ul > li:nth-child(3) {margin-top:0;}
	.main > .expt > ul > li:nth-child(3n) {margin-right:0;}
	.main > .expt > ul > li > a {padding:20px; padding-left:124px;}
	.main > .expt > ul > li > a > img {left:20px; top:20px;}
	
	.main > .prdt > .list.swiper-container > ul {padding-top:0; margin-top:40px; border-top-style:none;}
	.main > .prdt > .list.swiper-container > ul > li {width:350px !important;}
	.main > .prdt > .list.swiper-container > ul > li > a > .img {height:calc(350px * var(--prdt_img_rate)) !important;}
	
	.main > .cnst > ul {display:flex; flex-wrap:wrap; padding-top:0; margin-top:10px; border-top-style:none;}
	.main > .cnst > ul > li {width:645px; height:196px; padding-top:0; margin-top:30px !important; margin-left:30px; border-top-style:none;}
	.main > .cnst > ul > li:nth-child(odd) {margin-left:0;}
	.main > .cnst > ul > li > a {padding:30px; border:1px solid #ddd; border-radius:15px; box-sizing:border-box;}
	.main > .cnst > ul > li > a > span {font-size:14px; line-height:30px;}
	.main > .cnst > ul > li > a > strong {font-size:17px;}
	.main > .cnst > ul > li > a > em {font-size:15px;}
	
	.main > .rvws {width:100%;}
	.main > .rvws > strong {width:1320px; padding:0; margin:0 auto;}
	.main > .rvws > strong > a {right:0;}
	.main > .rvws > div > ul {margin-top:40px;}
	.main > .rvws > div > ul > li {width:400px; height:292px; padding-top:0; margin-top:0; border-top-style:none;}
	.main > .rvws > div > ul > li.swiper-slide-prev,
	.main > .rvws > div > ul > li.swiper-slide-next {opacity:1;}
	.main > .rvws > div > ul > li > a {padding:20px 30px;}
	.main > .rvws > div > ul > li > a > strong {margin-top:20px;}
	.main > .rvws > div > ul > li > a > strong > strong {width:calc(100% - 39px * 2); font-size:17px; line-height:80px;}
	.main > .rvws > div > ul > li > a > strong > em {height:80px;}
	.main > .rvws > div > ul > li > a > strong > em:first-child {margin-right:20px;}
	.main > .rvws > div > ul > li > a > strong > em:last-child {margin-left:20px;}
	.main > .rvws > div > ul > li > a > em {height:69px; margin-top:20px; font-size:15px; -webkit-line-clamp:3;}
	.main > .rvws > div > ul > li > a > small {height:39px;}
	.main > .rvws > div > ul > li > a > small > em {width:39px; height:39px; margin-left:20px; background-size:auto;}
	.main > .rvws > div > .swiper-button-prev,
	.main > .rvws > div > .swiper-button-next {width:17px; height:27px; margin-top:0; background-size:auto; transform:translateY(-50%);}
	.main > .rvws > div > .swiper-button-prev {left:calc((100% - 1320px) / 2 - 39px); background-image:url(../images/addon/icon-main-prev.png);}
	.main > .rvws > div > .swiper-button-next {right:calc((100% - 1320px) / 2 - 39px); background-image:url(../images/addon/icon-main-next.png);}
	
	.main > .nhow > ul {display:flex; flex-wrap:wrap; padding-top:0; margin-top:10px; border-top-style:none;}
	.main > .nhow > ul > li {width:307.5px; padding-top:0; margin-right:30px; margin-top:30px; border-top-style:none;}
	.main > .nhow > ul > li:nth-child(4n) {margin-right:0;}
	.main > .nhow > ul > li:first-child {margin-top:30px;}
	.main > .nhow > ul > li > a {display:block; width:100%; height:100%;}
	.main > .nhow > ul > li > a > em {height:307.5px;}
	.main > .nhow > ul > li > a > strong {margin-top:15px; font-size:15px;}
	
	.main > .join {width:1320px; height:354px; padding:0; margin:0 auto; margin-top:100px;}
	.main > .join > strong {padding:50px 0; font-size:33px; line-height:50px;}
	.main > .join > div {display:block; text-align:center;}
	.main > .join > div > button {width:206px; height:60px; margin-left:20px; font-size:20px;}
	.main > .join > div > button:first-child {margin-left:0;}
	
	.main > .popup > .swiper-container {left:calc((100% - 500px) / 2); top:50%; bottom:auto; transform:translateY(-50%); width:500px; border-radius:5px;}
}