@charset 'utf-8';

/* ���� */
:root{
    --baseFont: 'Montserrat', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;

	--mainColor: #00469D;
	--mainRGB: 0, 70, 157;
	--grayBg: #F8F8F8;

	--vh: 100%;
	--resizeVH: 100vh;

	--aosP: 100px;
	--aosM: -100px;
	--aosT: 700ms;

	--utilH: 100px;
	--navH: 65px;
	--innerGap: 50px;
	--searchP: 20px;
	--incIcon: 24px;
}

*{ box-sizing: border-box; word-break: keep-all; line-height: 1.3; }
body.lock{ overflow: hidden; }
body{ font-family: var(--baseFont); font-size: 16px; }
body *{ font-family: inherit; font-size: inherit; }

/* inner */
.w1600{ max-width: calc(1600px + (var(--innerGap) * 2)); width: 100%; margin: 0 auto; padding: 0 var(--innerGap); }
.w1500{ max-width: calc(1500px + (var(--innerGap) * 2)); width: 100%; margin: 0 auto; padding: 0 var(--innerGap); }

/* slick */
.slick-slider{ overflow: hidden; }
.slick-track{ margin: 0; }
.slick-slide{ outline: none; }

/* aos */
[data-aos]{ transition-duration: var(--aosT); }

@media (hover: hover) and (pointer: fine) {
	:root{
		--resizeVH: var(--vh);
	}
}

@media screen and (max-width: 1600px){
	:root{
		--utilH: 90px;
		--navH: 60px;
		--innerGap: 40px;
	}

	html{ font-size: 50%; }
}

@media screen and (max-width: 1280px){
	:root{
		--aosP: 50px;
		--aosM: -50px;

		--utilH: 80px;
		--navH: 55px;
		--innerGap: 30px;
	}

	html{ font-size: 40%; }
}

@media screen and (max-width: 900px){
	:root{
		--utilH: 70px;
		--navH: 55px;
		--innerGap: 20px;
	}
	html{ font-size: 35%; }
}


/* inc-search */
.inc-search div{ position: relative; }
.inc-search input{ width: 300px; height: 40px; border: 1px solid #E0E0E0; border-radius: 99px important; -webkit-border-radius: 99px !important; padding-inline: var(--searchP) calc(var(--incIcon) + (var(--searchP) * 2)); outline: unset !important; }
.inc-search input:focus,
.inc-search input:active{ outline: auto !important; outline-color: var(--mainColor) !important; }
.inc-search button{ background: none; border: none; padding: 0 var(--searchP); position: absolute; top: 0; right: 0; bottom: 0; outline: none; }
.inc-search button i{ width: var(--incIcon); height: 100%; display: inline-block; background: url("/img/common/icon_search.svg") no-repeat center center / contain; }


/* icon-wish */
.wishBtn{ 
	--url: url("/img/common/icon_wish.svg") no-repeat center center / contain;
	--url02: url("/img/common/icon_wish_line.svg") no-repeat center center / contain;
	--size: 34px;
}
.wishBtn{ display: inline-flex; background: none; border: none; padding: 0; position: relative; }
.wishBtn i{ width: var(--size); height: var(--size); display: inline-block; }
.wishBtn i.line{ background: #AAA; mask: var(--url02); -webkit-mask: var(--url02); transition: background 0.4s; }
.wishBtn i.bg{ background: var(--mainColor); mask: var(--url); -webkit-mask: var(--url); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; }

.wishBtn.push{ transform: scale(0.85); }
.wishBtn.active i.line{ opacity: 0; }
.wishBtn.active i.bg{ opacity: 1; }

@media screen and (hover: hover) and (pointer: fine){
	.wishBtn:hover i.line{ background: var(--mainColor) !important; }
}

@media screen and (max-width: 1280px){
	.wishBtn{ 
		--size: 30px;
	}
}

@media screen and (max-width: 900px){
	.wishBtn{ 
		--size: 28px;
	}
}


/* header */
header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 999; transform: translateY(0); transition: transform 0.4s; }
header .flex-box{ display: flex; justify-content: space-between; align-items: center; }

header h1 img{ width: auto; height: auto; }

header .nav{ background: var(--mainColor); text-align: center; }
header .nav .left{ display: flex; align-items: center; margin-left: -40px; }
header .nav .menu,
header .nav .depth01 > li > a{ height: var(--navH); display: inline-flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 500; color: #FFF; padding: 0 40px; position: relative; }
header .nav .menu::after,
header .nav .depth01 > li > a::after{ content: ""; width: calc(100% - 80px); height: 3px; background: #FFF; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); transition: transform 0.4s; }

header .nav .menu{ background: none; border: none; }
header .nav .menu i{ width: var(--incIcon); height: var(--incIcon); display: inline-block; background: #FFF; mask: url("/img/common/icon_menu.svg") no-repeat center center / contain; -webkit-mask: url("/img/common/icon_menu.svg") no-repeat center center / contain; margin-right: 4px; }  

header .depth01{ display: flex; }
header .depth01 > li{ position: relative; }
header .depth01 > li.hidden{ display: none; }
header .depth01 > li > div{ min-width: 170px; width: max-content; padding-top: 10px; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px); opacity: 0; transition: transform 0.4s, opacity 0.4s; pointer-events: none; }
header .depth02{ background: #FFF; box-shadow: 0 0 10px rgba(var(--mainRGB), 0.2); border-radius: 10px; overflow: hidden; }
header .depth02 a{ display: block; line-height: 1.3; }
header .depth02 > li > a,
header .depth02 > li > button{ background: transparent; border: none; font-size: 16px; font-weight: 500; color: #333 !important; white-space: nowrap; padding: 10px 30px; transition: background 0.4s, color 0.4s; }
header .depth02 > li > button{ width: 100%; }

header .util{ background: #FFF; position: relative; z-index: 100; }
header .util .flex-box{ height: var(--utilH); }
header .util .right,
header .util .button{ display: flex; align-items: center; }
header .util button{ background: none; border: none; }

header .util .inc-search{ margin-right: 50px; }

header .util .button{ text-align: center; margin: 0 -12px; }
header .util .button button{ display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: #111; padding: 12px; transition: color 0.4s; outline: none; }
header .util .button button i{ display: inline-block; width: var(--incIcon); height: var(--incIcon); background: #111; margin-right: 8px; transition: background 0.4s; }
header .util .button .cart i{ mask: url("/img/common/icon_cart.svg") no-repeat center center / contain; -webkit-mask: url("/img/common/icon_cart.svg") no-repeat center center / contain; }
header .util .button .member i{ mask: url("/img/common/icon_member.svg") no-repeat center center / contain; -webkit-mask: url("/img/common/icon_member.svg") no-repeat center center / contain; }

header .util .button .member{ position: relative; }
header .util .button .member > div > div{ min-width: 140px; position: absolute; top: 100%; left: 50%; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity 0.4s, transform 0.4s; }
header .util .button .member .depth02 li a,
header .util .button .member .depth02 li button{ display: block; font-size: 14px; padding: 8px 10px; }

header .util .button .member.on > div > div{ opacity: 1; transform: translate(-50%, 0); pointer-events: unset; }


header .familysite a{ display: inline-flex; width: 180px; background: #1469D3; border-radius: 5px; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 500; color: #FFF; padding: 15px 20px; }
header .familysite a i{ display: inline-block; width: 14px; height: 14px; background: #FFF; mask: url("/img/common/icon_familysite.svg") no-repeat center center / contain; -webkit-mask: url("/img/common/icon_familysite.svg") no-repeat center center / contain; }

/* body - up */
body.up header{ transform: translateY(calc(var(--utilH) * -1)); }

@media screen and (hover: hover) and (pointer: fine){
	header .nav .menu:hover::after,
	header .nav .depth01 > li:hover > a::after{ transform: translateX(-50%) scaleX(1); }
	header .nav .depth01 > li:hover > div{ transform: translate(-50%, 0); opacity: 1; pointer-events: unset; }
	header .depth02 > li:hover > a,
	header .depth02 > li:hover > button{ background: #EEF4FF; color: var(--mainColor) !important; }

	header .util .button button:hover{ color: var(--mainColor); }
	header .util .button button:hover i{ background: var(--mainColor); }
}

@media screen and (max-width: 1600px){
	header h1 img{ height: 50px; }

	header .util .inc-search{ margin-right: 30px; }

	header .nav .left{ margin-left: -30px; }
	header .nav .menu, 
	header .nav .depth01 > li > a{ padding: 0 30px; }
	header .nav .menu::after, 
	header .nav .depth01 > li > a::after{ width: calc(100% - 60px); }
}

@media screen and (max-width: 1280px){
	header h1 img{ height: 45px; }

	header .util .right{ padding-right: 20px; }

	header .nav .left{ margin-left: -20px; }
	header .nav .menu, 
	header .nav .depth01 > li > a{ font-size: 17px; padding: 0 20px; }
	header .nav .menu::after, 
	header .nav .depth01 > li > a::after{ width: calc(100% - 40px); }

	header .familysite a{ width: 150px; padding: 12px 15px; }
}

@media screen and (max-width: 900px){
	header h1 img{ height: 40px; }

	header .util .inc-search{ display: none; }

	header nav{ display: none; }
}


/* menu */
#menu{ width: 100%; height: 100%; padding-top: calc(var(--utilH) + var(--navH) + 10px); position: fixed; top: 0; left: 0; z-index: 900; transform: translateY(0); transition: transform 0.4s; pointer-events: none; }
#menu .inner{ max-width: 100%; width: 1420px; background: #FFF; border-radius: 40px; box-shadow: 0 0 20px rgba(var(--mainRGB), 0.2); position: relative; overflow: hidden; opacity: 0; transform: translate(-20px, -20px); transform-origin: top left; transition: opacity 0.4s, transform 0.4s; }
#menu .inner::before{ content: ""; max-width: calc(100% - 20px); width: 510px; height: 188px; background: url("/img/common/menu_bg.svg") no-repeat bottom right / contain; position: absolute; bottom: 0; right: 0; pointer-events: none; }
#menu .box{ padding: 0 100px 80px; position: relative; z-index: 10; }
#menu .mobile{ display: none; }

#menu .right{ display: flex; align-items: center; text-align: right; }

#menu .inc-search{ flex: 1 1 auto; min-width: 0; }
#menu .inc-search input{ width: 100%; height: 45px; }

#menu .close{ flex-shrink: 0; background: none; border: none; padding: 30px; padding-bottom: 25px; }
#menu .close i{ display: inline-block; width: 48px; height: 48px; background: url("/img/common/icon_close.svg") no-repeat center center / contain; }

#menu .depth01{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0 -10px -8px; }
#menu .depth01 a{ display: block; font-weight: 500; line-height: 1.3; padding-inline: 10px; }
#menu .depth01 > li > a{ font-size: 30px; color: #111; padding-bottom: 42px; }
#menu .depth02 > li > a{ font-size: 20px; color: #888; padding-block: 8px; transition: color 0.4s; }

#menu .bottom{ border-top: 1px solid #F1F1F1; padding-top: 40px; margin-top: 70px; }
#menu .bottom ul{ display: flex; margin: -16px; }
#menu .bottom ul li{ position: relative; }
#menu .bottom ul li::after{ content: ""; width: 1px; height: 20px; background: #F1F1F1; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#menu .bottom ul li:last-of-type::after{ display: none; }
#menu .bottom ul li a{ display: block; font-size: 18px; font-weight: 500; color: #888; line-height: 1.3; padding: 16px; }

/* body - up */
body.up #menu{ transform: translateY(calc(var(--utilH) * -1)); }

/* body - open */
body.open header .nav .menu::after{ transform: translateX(-50%) scaleX(1); }
body.open #menu .inner{ opacity: 1; transform: scale(1); pointer-events: auto; }

@media screen and (hover: hover) and (pointer: fine){
	#menu .depth02 > li:hover > a{ color: var(--mainColor); }	
}

@media screen and (max-width: 1600px){
	#menu .inner::before{ height: 150px; }
	#menu .box{ padding: 0 80px 60px; }
	#menu .close{ padding: 25px; }
	#menu .close i{ width: 40px; height: 40px; }
	
	#menu .depth01 > li > a{ font-size: 26px; padding-bottom: 32px; }
	#menu .depth02 > li > a{ font-size: 19px; }

	#menu .bottom{ padding-top: 30px; margin-top: 50px; }
	#menu .bottom ul li a{ font-size: 17px; }
}

@media screen and (max-width: 1280px){
	#menu .inner::before{ height: 130px; }
	#menu .box{ padding: 0 60px 40px; }
	#menu .close{ padding: 20px; }
	
	#menu .depth01 > li > a{ font-size: 24px; padding-bottom: 22px; }
	#menu .depth02 > li > a{ font-size: 18px; }

	#menu .bottom{ padding-top: 20px; margin-top: 40px; }
	#menu .bottom ul li::after{ height: 15px; }
	#menu .bottom ul li a{ font-size: 16px; }
}

@media screen and (max-width: 1024px){
	#menu .box{ padding: 0 40px 35px; }
	#menu .close i{ width: 35px; height: 35px; }

	#menu .depth01{ margin-bottom: -6px; }
	#menu .depth01 > li > a{ padding-bottom: 19px; }
	#menu .depth02 > li > a{ font-size: 17px; padding-block: 6px; }
}

@media screen and (max-width: 900px){
	#menu{ background: transparent; padding-top: 0; padding-right: 100px; z-index: 1000; transition: background 0.4s; }
	#menu > div{ height: 100%; padding: 0; }
	#menu .inner{ height: 100%; display: flex; flex-direction: column; flex-shrink: 0; border-radius: 0 30px 30px 0; transform: translateX(-100%); }
	#menu .right{ margin-bottom: 20px; position: relative; }
	#menu .right::after{ content: ""; width: calc(100% - 40px); height: 1px; background: #F1F1F1; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
	#menu .box{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-inline: 20px; }
	#menu .pc{ display: none; }
	#menu .mobile{ display: block; }

	#menu .inc-search{ padding-left: 20px; }

	#menu .close{ padding-block: 25px; }

	#menu nav{ flex: 1 1 auto; min-height: 0; overflow-x: clip; overflow-y: auto; -ms-overflow-style: none; overflow-x: clip; }
	#menu nav::-webkit-scrollbar{ display: none; }
	#menu .depth01{ display: block; margin: 0; }
	#menu .depth01 a{ padding-inline: 20px; }
	#menu .depth01 > li > a{ padding-block: 15px; transition: color 0.4s; }
	#menu .depth01 > li > div{ display: none; }
	#menu .depth02{ background: var(--grayBg); border-radius: 15px; padding: 10px 0; }
	#menu .depth02 > li > a{ font-size: 18px; padding-block: 10px; }

	#menu .depth01 > li.on > a{ color: var(--mainColor); }

	#menu .bottom{ flex-shrink: 0; margin-top: 20px; }

	/* body - up */
	body.up #menu{ transform: translateY(0); }

	/* body - open */
	body.open{ overflow: hidden; }
	body.open #menu{ background: rgba(0, 0, 0, 0.5); pointer-events: unset; }
}

@media screen and (max-width: 650px){
	#menu{ padding-right: 60px; }

	#menu .depth01 > li > a{ font-size: 22px; }
}


/* footer */
footer{ background: #111; letter-spacing: -0.02em; padding: 55px 0; }
footer .flex-box{ display: flex; justify-content: space-between; }
footer .shrink{ flex-shrink: 0; }

footer .line01{ margin-bottom: 40px; }
footer .line02{ border-bottom: 1px solid #222; padding-bottom: 35px; margin-bottom: 30px; }
footer .line02 .flex-box{ align-items: flex-end; }
footer .line02 .shrink{ padding-left: 60px; }
footer .line03 .flex-box{ align-items: center; }

footer h1 svg{ width: auto; height: auto; }
footer h1 svg path{ fill: #888; }

footer .policy{ text-align: right; margin: -4px 0; }
footer .policy li a{ display: block; font-size: 20px; font-weight: 600; color: #888; line-height: 1.3; padding: 4px 0; }

footer address{ margin: 0 -30px; margin-top: -17px; }
footer address div{ display: flex; flex-wrap: wrap; }
footer address dl{ display: flex; margin: 0 30px; margin-top: 17px; }
footer address dl > *{ font-size: 16px; }
footer address dl dt{ flex-shrink: 0; font-weight: 600; color: #555; letter-spacing: 0; padding-right: 15px; }
footer address dl dd{ font-weight: 300; color: #888; }

footer .familysite{ display: inline-block; border: 1px solid #888; border-radius: 99px; font-size: 14px; font-weight: 600; color: #888; padding: 9px 21px; }

footer .copyright{ font-size: 16px; font-weight: 500; color: #555; }

footer .sns{ display: flex; align-items: center; }
footer .sns li:not(:first-of-type){ margin-left: 8px; }
footer .sns li:last-of-type{ margin-left: 12px; }

@media screen and (max-width: 1600px){
	footer{ padding: 40px 0; }
	footer .line01{ margin-bottom: 30px; }
	footer .line02{ padding-bottom: 30px; margin-bottom: 25px; }

	

	footer .policy li a{ font-size: 19px; }

	footer address{ margin: 0 -20px; margin-top: -12px; }
	footer address dl{ margin: 0 20px; margin-top: 12px; }
}

@media screen and (max-width: 1280px){
	footer{ padding: 35px 0; }
	footer h1 svg{ height: 50px; }

	footer .policy li a{ font-size: 17px; }
}

@media screen and (max-width: 900px){
	footer{ position: relative; }
	footer .line01{ margin-bottom: 20px; }
	footer .line01 .flex-box{ flex-direction: column; }
	
	footer h1{ margin-bottom: 30px; }

	footer .policy{ display: flex; margin: -5px -10px; }
	footer .policy li a{ padding: 5px 10px; }

	footer address{ margin-inline: -15px; }
	footer address dl{ margin-inline: 15px; }
	footer address dl > *{ font-size: 15px; }

	footer .familysite{ position: absolute; top: 60px; right: var(--innerGap); transform: translateY(-50%); }

	footer .copyright{ font-size: 15px; }
}

@media screen and (max-width: 700px){
	footer .line03 .flex-box{ flex-direction: column-reverse; align-items: unset; }

	footer .copyright{ margin-top: 15px; }
}



/* 제품 게시판 (메인/서브 공통) */
.prod-board{ 
    --gapB: 90px; 
    --gapR: 20px; 
    --line: 4;
}
.prod-board{ display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: calc(var(--gapB) * -1); }
.prod-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); margin-right: var(--gapR); margin-bottom: var(--gapB); position: relative; }
.prod-board .item:nth-of-type(4n){ margin-right: 0; }
.prod-board .item .btn{ display: flex; text-align: right; padding: 20px; position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; }
.prod-board .item .btn .mark{ flex: 1 1 auto; display: flex; flex-wrap: wrap; min-width: 0; text-align: left; padding-right: 30px; }
.prod-board .item .btn .mark em{ display: inline-block; background: #13CE19; border-radius: 5px; font-size: 14px; font-weight: 500; color: #FFF; line-height: 1; padding: 7px 10px; margin-right: 5px; margin-bottom: 5px; }
.prod-board .item .btn .mark em.red{ background: #E91D1D; }
.prod-board .item .btn .wishBtn{ flex-shrink: 0; pointer-events: auto; }
.prod-board .item a{ display: block; }
.prod-board .item .img{ background: var(--grayBg); border-radius: 20px; position: relative; overflow: hidden; }
.prod-board .item .img figure{ display: block; border-radius: inherit; padding-bottom: 100%; position: relative; overflow: hidden; transform: scale(0.9); transition: transform 0.4s; will-change: transform; }
.prod-board .item .img figure::after{ content: ""; background: rgba(0, 0, 0, 0.2); border-radius: inherit; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.4s; }
.prod-board .item .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.prod-board .item .img i{ width: 58px; height: 58px; display: inline-flex; flex-direction: column; justify-content: center; background: var(--mainColor); border-radius: 50%; position: absolute; bottom: 15px; right: 15px; opacity: 0; transition: opacity 0.4s; }
.prod-board .item .img i::before{ content: ""; display: block; height: 24px; background: url("/img/main/icon_plus.svg") no-repeat center center / contain; }
.prod-board .item .text{ letter-spacing: -0.02em; padding-top: 20px; }
.prod-board .item .text em{ font-size: 18px; font-weight: 700; color: var(--mainColor); letter-spacing: -0.01em; }
.prod-board .item .text h6{ height: 3em; display: -webkit-box; font-size: 22px; font-weight: 500; color: #333; line-height: 1.5; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 12px 0 16px; } 
.prod-board .item .text p{ font-size: 23px; font-weight: 600; color: #111; line-height: 1.5; }

.prod-board .block{ width: 100%; font-size: 28px; font-weight: 600; color: #BBB; text-align: center; margin-bottom: var(--gapB); }

@media screen and (hover: hover) and (pointer: fine){
    .prod-board .item:hover .btn .wishBtn i.line{ background: #FFF; }
    .prod-board .item:hover .img figure{ transform: scale(1); }
    .prod-board .item:hover .img figure::after{ opacity: 1; }
    .prod-board .item:hover .img i{ opacity: 1; }
}

@media screen and (max-width: 1600px){
    .prod-board{ 
        --gapB: 70px; 
    }
    .prod-board .item .btn{ padding: 15px; }
    .prod-board .item .img i{ width: 50px; height: 50px; }
    .prod-board .item .img i::before{ height: 20px; }
    .prod-board .item .text em{ font-size: 17px; }
    .prod-board .item .text h6{ font-size: 20px; }
    .prod-board .item .text p{ font-size: 21px; }

	.prod-board .block{ font-size: 24px; }
}

@media screen and (max-width: 1280px){
    .prod-board{ 
        --gapB: 50px; 
    }
    .prod-board .item .btn{ padding: 12px; }
	.prod-board .item .btn .mark em{ padding: 5px 8px; }
    .prod-board .item .img i{ width: 45px; height: 45px; bottom: 12px; right: 12px; }
    .prod-board .item .text em{ font-size: 16px; }
    .prod-board .item .text h6{ font-size: 19px; margin: 8px 0 12px; }
    .prod-board .item .text p{ font-size: 20px; }

	.prod-board .block{ font-size: 22px; margin-top: 20px; }
}

@media screen and (max-width: 1200px){
    .prod-board{  
        --line: 3;
    }
    .prod-board .item:nth-of-type(4n){ margin-right: var(--gapR); }
    .prod-board .item:nth-of-type(3n){ margin-right: 0; }
}

@media screen and (max-width: 900px){
    .prod-board .item .img i{ width: 36px; height: 36px; }
    .prod-board .item .img i::before{ height: 18px; }
    .prod-board .item .text em{ font-size: 15px; }
    .prod-board .item .text h6{ font-size: 17px; margin-bottom: 8px; }
    .prod-board .item .text p{ font-size: 18px; }

	.prod-board .block{ font-size: 20px; }
}

@media screen and (max-width: 800px){
    .prod-board{  
        --line: 2;
    }
    .prod-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
    .prod-board .item:nth-of-type(2n){ margin-right: 0; }
}


/* 제품 상세 (메인/서브 공통) */
.detail-top{ opacity: 1; }
.detail-top .tit{ opacity: 0; transform: translateX(var(--aosM)); transition: opacity var(--aosT), transform var(--aosT); }
.detail-top .flex-box{ display: flex; opacity: 1; }
.detail-top .flex-box > *{ opacity: 0; transition: opacity var(--aosT), transform var(--aosT); }
.detail-top .left{ width: 48.125%; flex-shrink: 0; transform: translateX(var(--aosM)); }
.detail-top .right{ flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding-left: 150px; transform: translateY(var(--aosP)); }

.detail-top .swiper-slide a{ display: block; }
.detail-top .swiper-slide figure{ display: block; padding-bottom: 100%; position: relative; overflow: hidden; }
.detail-top .swiper-slide figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.detail-top .main{ background: var(--grayBg); border-radius: 20px; }
.detail-top .main .swiper-slide a{ padding: 85px; }

.detail-top .info{ flex: 1 0 auto; padding: 50px 0; }
.detail-top .info .title{ border-bottom: 1px solid #F1F1F1; padding-bottom: 25px; margin-bottom: 60px; }
.detail-top .info .title div{ display: flex; align-items: center; margin-bottom: 15px; }
.detail-top .info .title em{ flex: 1 1 auto; min-width: 0; display: block; font-size: 18px; font-weight: 700; color: var(--mainColor); letter-spacing: -0.01em; padding-right: 30px; }
.detail-top .info .title button{ flex-shrink: 0; }
.detail-top .info .title h2, 
.detail-top .info .title h6{ font-size: 4.4rem; font-weight: 600; color: #111; line-height: 1.5; letter-spacing: -0.02em; }
.detail-top .info .title h6{ height: 3em; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.detail-top .info .content dl{ display: flex; }
.detail-top .info .content dl:not(:last-of-type){ margin-bottom: 40px; }
.detail-top .info .content dl > *{ font-size: 20px; }
.detail-top .info .content dl dt{ width: 125px; flex-shrink: 0; font-weight: 500; color: #555; padding-right: 20px; position: relative; }
.detail-top .info .content dl dt::after{ content: ""; width: 1px; height: 14px; background: #E0E0E0; position: absolute; top: calc(1.3em / 2); right: 0; transform: translateY(-50%); }  
.detail-top .info .content dl dd{ flex: 1 1 auto; min-width: 0; font-weight: 300; color: #333; letter-spacing: -0.02em; padding-left: 40px; }

.detail-top .bottom{ display: flex; }
.detail-top .bottom button{ width: 30px; display: inline-flex; justify-content: center; align-items: center; background: none; border: none; flex-shrink: 0; padding: 10px; }
.detail-top .bottom button i{ display: inline-block; width: 7px; height: 12px; background: url("/img/main/icon_slick_arrow.svg") no-repeat center center / contain; }
.detail-top .bottom button.next i{ transform: scaleX(-1); }
.detail-top .bottom .slide{ width: calc(100% - 60px); padding: 0 11px; }
.detail-top .bottom .swiper{ padding: 0 1px; }
.detail-top .bottom .swiper-wrapper{ padding: 1px 0; }
.detail-top .bottom .swiper-slide{ background: var(--grayBg); border-radius: 10px; position: relative; cursor: pointer; }
.detail-top .bottom .swiper-slide::after{ content: ""; width: 100%; height: 100%; border: 1px solid var(--mainColor); border-radius: inherit; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; opacity: 0; }
.detail-top .bottom .swiper-slide.current:after{ opacity: 1; }
.detail-top .bottom .swiper-slide a{ pointer-events: none; padding: 20px; }
.detail-top .bottom .swiper-slide a > *{ pointer-events: unset; }


.detail-top.aos-animate .flex-box > *{ opacity: 1; transform: translate(0, 0) !important; }

@media screen and (max-width: 1600px){
    .detail-top .right{ padding-left: 100px; }

    .detail-top .main .swiper-slide a{ padding: 60px; }

    .detail-top .info{ padding: 40px 0; }
    .detail-top .info .title{ padding-bottom: 20px; margin-bottom: 40px; }
    .detail-top .info .title em{ font-size: 17px; }
    .detail-top .info .content dl:not(:last-of-type){ margin-bottom: 30px; }
    .detail-top .info .content dl > *{ font-size: 19px; }
    .detail-top .info .content dl dt{ width: 100px; }
    .detail-top .info .content dl dd{ padding-left: 30px; }

    .detail-top .bottom .swiper-slide a{ padding: 15px; }
}

@media screen and (max-width: 1280px){
    .detail-top .right{ padding-left: 70px; }

    .detail-top .main .swiper-slide a{ padding: 40px; }

    .detail-top .info{ padding: 10px 0 30px; }
    .detail-top .info .title{ padding-bottom: 15px; }
    .detail-top .info .title em{ font-size: 16px; }
    .detail-top .info .content dl:not(:last-of-type){ margin-bottom: 20px; }
    .detail-top .info .content dl > *{ font-size: 18px; }
    .detail-top .info .content dl dt{ width: 80px; }
    .detail-top .info .content dl dd{ padding-left: 25px; }

    .detail-top .bottom{ margin-left: -35px; }
    .detail-top .bottom .slide{ padding: 0 5px; }
    .detail-top .bottom .swiper-slide a{ padding: 10px; }
}

@media screen and (max-width: 1024px){
    .detail-top .tit{ transform: translateY(var(--aosP)); }
    .detail-top .flex-box{ flex-direction: column; }
    .detail-top .left{ width: 100%; transform: translateY(var(--aosP)); }
    .detail-top .right{ flex-direction: column-reverse; padding-top: 10px; padding-left: 0; }

    .detail-top .info{ padding: 30px 0 0; }
    .detail-top .info .title{ margin-bottom: 25px; }
    .detail-top .info .content dl > *{ font-size: 17px; }
}

@media screen and (max-width: 900px){
	.detail-top .info .title h2, 
	.detail-top .info .title h6{ font-size: 4rem; }

    .detail-top .main .swiper-slide a{ padding: 25px; }
    .detail-top .bottom .swiper-slide a{ padding: 5px; }
}


/* 팝업 (공통) */
.popup{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1000; display: none; }
.popup .blank{ width: 100%; height: 100%; }
.popup .inner{ max-width: 95%; letter-spacing: -0.02em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.popup .x{ background: none; border: none; padding: 15px; position: absolute; top: 15px; right: 15px; }
.popup .x i{ display: inline-block; width: 15px; height: 15px; background: url("/img/board/icon_popup_close.svg") no-repeat center center / contain; }


/* 팝업 - basic */
.popup .basic{ width: 700px; background: #FFF; border-radius: 10px; }
.popup .basic .text{ text-align: center; padding: 60px 30px; }
.popup .basic .text h6{ font-size: 38px; font-weight: 700; color: #111; }
.popup .basic .text p{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.5; margin-top: 60px; }
.popup .basic .button{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-bottom: -1px; }
.popup .basic .button > *{ min-height: 80px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); border: none; border-radius: 0; -webkit-border-radius: 0; font-size: 20px; font-weight: 500; color: #FFF; text-align: center; }
.popup .basic .button > *:first-child{ border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px; }
.popup .basic .button > *:last-child{ border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0; }
.popup .basic .button > *.black{ background: #111; }

@media screen and (max-width: 1700px){
    /* 팝업 (공통) */
    .popup .x{ top: 10px; right: 10px; }

    /* 팝업 - basic */
    .popup .basic .text{ padding-block: 50px; }
    .popup .basic .text h6{ font-size: 32px; }
    .popup .basic .text p{ font-size: 17px; margin-top: 40px; }
    .popup .basic .button > *{ min-height: 70px; font-size: 19px; }
}

@media screen and (max-width: 1280px){
    /* 팝업 (공통) */
    .popup .x{ top: 5px; right: 5px; }

    /* 팝업 - basic */
    .popup .basic .text{ padding: 40px 25px 35px; }
    .popup .basic .text h6{ font-size: 28px; }
    .popup .basic .text p{ font-size: 16px; margin-top: 20px; }
    .popup .basic .button > *{ min-height: 65px; font-size: 18px; }
}

@media screen and (max-width: 900px){
    /* 팝업 - basic */
    .popup .basic .text h6{ font-size: 23px; }
    .popup .basic .text p{ margin-top: 15px; }
    .popup .basic .button > *{ min-height: 60px; font-size: 17px; }
}

@media screen and (max-width: 550px){
    /* 팝업 - basic */
    .popup .basic br{ display: none; }
}