@charset 'utf-8';

/* ���� */
:root{
	--vh: 100%;
    --baseFont: 'NanumSquare', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Poppins: 'Poppins', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Montserrat: 'Montserrat', 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	--Pretendard: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'verdana', sans-serif;
	/* --mainColor: #048674; */
	--mainColor: #006557;
	--red: #EF1313;
}

/* 공통 */
.w1920{ max-width: 1920px; width: 100%; margin: 0 auto; }
.w1720{ max-width: 1720px; width: 100%; margin: 0 auto; }
.w1600{ max-width: 1600px; width: 100%; margin: 0 auto; }
.w1555{ max-width: 1555px; width: 100%; margin: 0 auto; }
.w1500{ max-width: 1500px; width: 100%; margin: 0 auto; }

@media screen and (max-width: 1900px){
	.w1920{ padding-left: 20px; }
}

@media screen and (max-width: 1760px){
	.w1720{ padding: 0 20px; }
}

@media screen and (max-width: 1640px){
	.w1600{ padding: 0 20px; }  
}

@media screen and (max-width: 1540px){
	.w1500{ padding: 0 20px; }  
}

/* privacy */
#privacy{ padding-top: 200px; padding-bottom: 0; }
#privacy a:hover{ color: var(--mainColor); text-decoration: underline; }
#privacy .policy-list li a{ font-size: 1.7rem; font-weight: 600; color: #111; line-height: 1.7; }
#privacy .policy-list li a:hover{ color: var(--mainColor); text-decoration: underline; }

#privacy section{ padding: 70px 0; }
#privacy section:first-of-type{ padding-top: 0; }
#privacy section:last-of-type{ padding-bottom: 130px; }

#privacy h4{ font-size: 2rem; font-weight: 700; color: #111; margin-bottom: 15px; }
#privacy dl *{ font-size: 1.7rem; font-weight: 400; color: #333; line-height: 1.75; }
#privacy dl dt{ font-weight: 700; }
#privacy dl dd:not(:last-of-type){ margin-bottom: 20px; }
#privacy h6{ font-weight: 700; margin-bottom: 5px; }
#privacy dl dd ul li{ padding-left: 10px; text-indent: -10px; }
#privacy table{ border-top: 2px solid #111; }
#privacy table th, #privacy table td{ padding: 5px 15px; border: 1px solid #C1C1C1; }
#privacy table th{ font-weight: 700; }
 
#privacy .flex-box{ display: flex; justify-content: space-between; }
#privacy .flex-box .half{ width: calc((100% - 50px) / 2); }


.privacy > p { font-size: 1.7rem; margin: 30px 0; }

@media screen and (max-width: 1540px){
	#privacy br{ display: none; }
}

@media screen and (max-width: 1200px){
	#privacy{ padding-top: 130px; }
	#privacy section:last-of-type{ padding-bottom: 100px; }
}

@media screen and (max-width: 1000px){
	#privacy .flex-box{ flex-direction: column; }
	#privacy .flex-box .half{ width: 100%; }
	#privacy .flex-box .half:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 850px){
	#privacy section{ padding: 50px 0; }
}

/* .privacy{ color:#666; width: 100%; overflow: hidden; box-sizing:border-box; font-size:15px; line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { font-size: 1.7rem; margin: 30px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:1.7rem; color: var(--mainColor); font-weight:700; padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px; text-align:justify; font-size:1.7rem; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }

 */


.highlighted { border:none; background:none; outline:none !important; }

.selectric-wrapper * { box-sizing:border-box; }
.selectric-wrapper { margin-top:20px; position:relative; cursor:pointer; z-index:10; max-width:500px; width:100%; }
.selectric-responsive { width:100%; }
.selectric { border:1px solid #111; background:none; position:relative; z-index:3; padding:0 30px; border-radius:10px; }
.selectric .label { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.7rem; line-height:58px; height:58px; color:#333; font-weight:600;  }
.selectric .button { display:block; position:absolute; right:30px; top:50%; transform:translateY(-50%); width:12px; height:12px; overflow:hidden; text-indent:-9999em; background:none; }
.selectric .button:before { transition:all 0.4s; content:""; position:absolute; top:0; left:0; width:12px; height:12px; background:url(/img/common/icon_select_arr.png) no-repeat center; }
.selectric-open { z-index:999; }
.selectric-open .button:before { transform:rotate(180deg); }
.selectric-open .selectric { border:none; padding:1px 31px; }
.selectric-open .selectric-items { display:block; }
.selectric-disabled { filter:alpha(opacity=50); opacity:0.5; cursor:default; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.selectric-hide-select { position:relative; overflow:hidden; width:0; height:0; }
.selectric-hide-select select { position:absolute; left:-100%; display:none; }
.selectric-input { position:absolute !important; top:0 !important; left:0 !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; margin:0 !important; padding:0 !important; width:1px !important; height:1px !important; outline:none !important; border:none !important; *font:0/0 a !important; background:none !important; }
.selectric-temp-show { position:absolute !important; visibility:hidden !important; display:block !important; }
@media screen and (max-width:1024px){
	.selectric { padding:0 25px; border-radius:5px; }
	.selectric .label { line-height:50px; height:50px; }
	.selectric-open .selectric { padding:1px 26px; }
	.selectric .button { right:25px; }
}
@media screen and (max-width:640px){
	.selectric { padding:0 20px; }
	.selectric .label { line-height:43px; height:43px; }
	.selectric-open .selectric { padding:1px 21px; }
	.selectric .button { right:20px; }
}

.selectric-items { display:none; position:absolute; top:0; left:0; width:100% !important; height:auto !important; padding:58px 30px 30px; background:#fff; border:1px solid var(--mainColor); box-shadow:none; border-radius:10px; z-index:1; }
.selectric-items .selectric-scroll { max-height:360px; overflow:auto }
.selectric-above .selectric-items { top:unset; bottom:0; padding:25px 30px 58px; }
.selectric-items ul { border-top:1px solid #eee; padding:19px 0 0; }
.selectric-above .selectric-items ul { border-top:none; border-bottom:1px solid #eee; padding:0 0 19px; }
.selectric-items li:not(:last-child) { margin-bottom:10px; }
.selectric-items li { transition:all 0.4s; font-size:1.7rem; line-height:1.3; color:#666; cursor:pointer; }
.selectric-items li:first-child { display:none }
.selectric-items li:hover { color:#333; }
.selectric-items li.selected { font-weight:600; }
.selectric-items .disabled { filter:alpha(opacity=50); opacity:0.5; cursor:default !important; background:none !important; color:#666 !important; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.selectric-items .selectric-group .selectric-group-label { font-weight:bold; padding-left:10px; cursor:default; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;  background:none;  color:#444; }
.selectric-items .selectric-group.disabled li { filter:alpha(opacity=100); opacity:1; }
.selectric-items .selectric-group li { padding-left:5px; }
@media screen and (max-width:1024px){
	.selectric-items { padding:50px 25px 25px; border-radius:5px; }
	.selectric-above .selectric-items { padding:25px 25px 50px; }
	.selectric-items ul { padding:15px 0 0; }
	.selectric-above .selectric-items ul { padding:0 0 15px; }
	.selectric-items li:not(:last-child) { margin-bottom:8px; }
}
@media screen and (max-width:640px){
	.selectric-items { padding:43px 20px 20px; }
	.selectric-above .selectric-items { padding:20px 20px 43px; }
	.selectric-items ul { padding:12px 0 0; }
	.selectric-above .selectric-items ul { padding:0 0 12px; }
	.selectric-items li:not(:last-child) { margin-bottom:5px; }
}

 body.lock{ overflow: hidden; }

/* header */
#header{ width: 100%; position: fixed; top: 0; left: 0; z-index: 999; transition: all 0.5s; } 
#header::before{ content: ""; width: 100%; height: 350px; background: #fff; position: absolute; top: 0; left: 0; transform: scaleY(0); transform-origin: top center; transition: all 0.5s; pointer-events: none; }
#header::after{ content: ""; width: 100%; height: 1px; background: #111; opacity: 0.15; position: absolute; bottom: 0; left: 0; z-index: 10; transform: scaleX(0); transform-origin: center center; transition: all 0.5s; }
#header .bg{ width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; z-index: -5; opacity: 0; pointer-events: none; transition: all 0.5s; }
#header .bg::before{ content: ""; width: 100%; height: 1px; background: #111; opacity: 0.15; position: absolute; bottom: 0; left: 0; z-index: 10; transform: scaleX(0); transform-origin: center center; transition: all 0.5s; }
#header .flex-box{ height: 100px; display: flex; justify-content: space-between; align-items: center; margin-left: -80px; }
#header .logo{ display: inline-block; position: relative; }
#header .logo img{ transform: all 0.5s; }
#header .logo::after{ content: url("/img/common/logo_color.svg"); position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s; }
#header .logo a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header nav{ width: calc(100% - 345px); position: relative; }
#header nav::before{ content: ""; width: calc((100vw - 1555px) / 2); height: 100%; position: absolute; top: 0; left: 100%; }
#header .depth01{ width: 100%; display: flex; justify-content: center; }
#header .depth01 > li{ width: 150px; position: relative; transition: all 0.5s; text-align: center; }
#header .depth01 > li::after{ content: ""; width: 100%; height: 2px; background: var(--mainColor); position: absolute; top: 99px; left: 0; transform: scaleX(0); transform-origin: center center; transition: all 0.5s; }
#header .depth01 > li > a{ display: inline-block; width: 100%; text-align: center; font-size: 2rem; font-weight: 600; color: #fff; padding: 39px 40px; transition: all 0.5s; position: relative; }

#header .depth02{ width: 100%; height: 251px; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); text-align: left; padding-top: 17.5px; opacity: 0; visibility: hidden; }
#header .depth02::before, #header .depth02::after{ content: ""; width: 1px; height: 100%; background: rgba(0, 0, 0, 0.15); position: absolute; bottom: 0; transform: scaleY(0); transform-origin: top; transition: all 0.5s; }
#header .depth02::before{ left: 0; }
#header .depth02::after{ right: 0; }
#header .depth01 > li:not(:first-of-type) > .depth02::before{ display: none; }
#header .depth02 > li{ overflow: hidden; }
#header .depth02 > li > a{ display: inline-block; width: 100%; font-size: 1.8rem; font-weight: 300; color: #333; padding: 7.5px 35px; transform: translateY(100%); transition: font-weight 0.5s, color 0.5s, transform 0.5s 0.2s; }
#header .depth02 > li > a span{ font-family: var(--Pretendard); font-weight: 200; transition: all 0.5s; }

#header .right-menu{ position: absolute; top: 0; right: 0; z-index: 100; }
#header .right-menu button{ width: 100px; height: 100px; border: none; background: var(--mainColor); padding: 0; }
#header .right-menu button span{ display: inline-block; width: 30px; height: 2px; background: #fff; position: relative; top: 0; transition: all 0.5s; will-change: transform; }
#header .right-menu button span::before, #header .right-menu button span::after{ content: ""; height: 2px; position: absolute; right: 0; background: #fff; transition: all 0.5s; will-change: transform; }
#header .right-menu button span::before{ width: 25px; top: -8px; }
#header .right-menu button span::after{ width: 20px; top: 8px; }

#header .right-menu ul{ text-align: center; background: #1B1B1B; padding: 25px 0; will-change: opacity; }
#header .right-menu ul li{ padding: 15px 0; position: relative; }
#header .right-menu ul li .icon{ display: inline-block; position: relative; top: 0; transition: all 0.5s; }
#header .right-menu ul li .icon img{ opacity: 1; transition: all 0.5s; }
#header .right-menu ul li .icon::after{ position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s; }
#header .right-menu ul li:nth-of-type(1) .icon::after{ content: url("/img/common/contact_hover3.svg"); }
#header .right-menu ul li:nth-of-type(2) .icon::after{ content: url("/img/common/shop_hover3.svg"); }
#header .right-menu ul li span{ display: inline-block; font-size: 1.6rem; font-weight: 500; color: #fff; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.5s; }
#header .right-menu ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#header .right-menu ul li:hover .icon{ top: -10px; }
#header .right-menu ul li:hover .icon img{ opacity: 0; }
#header .right-menu ul li:hover .icon::after{ opacity: 1; }
#header .right-menu ul li:hover span{ bottom: 0px; opacity: 1; color: var(--mainColor); }

/* right-menu (click) */
body.lock #header .right-menu button span{ top: -4px; transform: rotate(45deg); }
body.lock #header .right-menu button span::before{ width: 50%; right: 25%; transform: rotate(90deg); }
body.lock #header .right-menu button span::after{ width: 50%; right: 25%; transform: rotate(-90deg); }

/* header - color */
#header.color .logo img{ opacity: 0; }
#header.color .logo::after{ opacity: 1; }
#header.color .depth01 > li > a{ color: #111; }

/* header - half */
#header.half .depth01 > li > a{ color: #fff; }

/* header - back */
#header.back{ background: #fff; }

/* header - on */
body.lock #header{ background: none; }
body.lock #header .logo img{ opacity: 0; }
body.lock #header .logo::after{ opacity: 1; }
body.lock #header nav{ display: none; }

/* header - hover */
#header.hover::before{ transform: scaleY(1); }
#header.hover::after{ transform: scaleX(1); }
#header.hover .bg{ opacity: 1; }
#header.hover .logo::after{ opacity: 1; }
#header.hover .depth01 > li > a{ color: #111; }
#header.hover .depth02{ opacity: 1; visibility: visible; transition: all 0.5s; }
#header.hover .depth02 > li > a{ transform: translateY(0); }
#header.hover .depth02::before, #header.hover .depth02::after{ transform: scaleY(1); }

#header nav:hover .depth01 > li{ width: calc(100% / 5); }
#header .depth01 > li:hover::after{ transform: scaleX(1); }
#header .depth01 > li:hover > a{ color: var(--mainColor); }
#header .depth02 > li > a:hover{ font-weight: 600; color: #111; }
#header .depth02 > li > a:hover span{ font-weight: 500; }

/* header - click */
#header.click::before{ transform: scaleY(1); }
#header.click::after{ transform: scaleX(1); }
#header.click .bg{ opacity: 1; }
#header.click .logo::after{ opacity: 1; }
#header.click nav .depth01 > li{ width: calc(100% / 5); }
#header.click .depth01 > li > a{ color: #111; }
#header.click .depth02{ opacity: 1; visibility: visible; transition: all 0.5s; }
#header.click .depth02 > li > a{ transform: translateY(0); }
#header.click .depth02::before, #header.click .depth02::after{ transform: scaleY(1); }

@media screen and (max-width: 1775px){
	#header .flex-box{ margin-left: 0; }  
	#header .w1555{ max-width: 100%; padding-right: 100px; }
}

@media screen and (max-width: 1500px){
	#header .depth01 > li > a{ font-size: 2rem; padding: 40px 30px; }  
	#header .depth02 > li > a{ font-size: 1.7rem; padding: 7.5px 20px; }  

	#header .right-menu ul li span{ font-size: 1.5rem; }
}

@media screen and (max-width: 1300px){
	#header nav{ display: none; }
	#header .right-menu ul{ opacity: 0; visibility: hidden; transition: opacity 0.5s; }

	body.lock #header .right-menu ul{ opacity: 1; visibility: visible; transition-delay: 1s; }
}

@media screen and (max-width: 1200px){
	#header .flex-box{ height: 80px; padding: 15px 0; }
	#header .logo{ transform: scale(0.8); transform-origin: center left; }

	#header .right-menu button{ width: 80px; height: 80px; }   

	#header.color{ background: #fff; }  
}

@media screen and (max-width: 1000px){	
	body.lock #header{ background: #F3F3F3; transition: background 0.5s 1s; }
}

@media screen and (max-width: 700px){	
	#header .right-menu ul{ padding: 15px 0; }
}


/* footer */
#footer{ background: #1B1B1B; padding: 60px 0 35px; position: relative; }
#footer .line{ display: flex; justify-content: space-between; }
#footer .line01{ align-items: flex-start; padding-bottom: 60px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#footer .line01 .dl > div{ display: flex; flex-wrap: wrap; }
#footer .line01 dl{ display: flex; font-size: 1.7rem; color: #fff; position: relative; }
#footer .line01 dt, #footer .line01 dd{ line-height: 1.9444; }  
#footer .line01 dl dt{ font-weight: 500; margin-right: 7px; }
#footer .line01 dl dd{ font-weight: 300; opacity: 0.8; }
#footer .line01 dl.familysite dd{ opacity: 1; }
#footer .line01 dl dd a{ font-weight: 300; color: #fff; }
#footer .line01 dl dd a:visited{  color: #fff; }
#footer .line01 dl dd a:hover{ text-decoration: underline; }
#footer .line01 .dl > div dl:not(:last-of-type){ margin-right: 30px; }

#footer .line01 .link > ul{ display: flex; align-items: center; margin-right: -10px; }
#footer .line01 .link > ul li a{ display: inline-block; padding: 10px; }

#footer .line01 .family{ margin-top: 10px; position: relative; }
#footer .line01 .family *{ font-size: 1.6rem; font-weight: 400; }
#footer .line01 .family p{ color: #fff; padding: 10px 15px; padding-right: 85px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; position: relative; cursor: pointer; }
#footer .line01 .family p::after{ content: url("/img/common/family_site.png"); position: absolute; top: 46%; right: 15px; transform: translateY(-50%); transition: all 0.5s; }
#footer .line01 .family ul{ width: 100%; background: #fff; border-radius: 10px; padding: 8px 0; position: absolute; top: 100%; display: none; }
#footer .line01 .family ul li a{ width: 100%; display: inline-block; color: #333; padding: 5px 15px; }

#footer .line01 .family.on p::after{ top: 55%; transform: translateY(-50%) rotate(-180deg); }

#footer .line02{ padding-top: 30px; }
#footer .line02 .copyright{ font-size: 1.5rem; font-weight: 300; color: #fff; opacity: 0.8; }
#footer .line02 ul{ display: flex; margin-right: -12px; }
#footer .line02 ul li a{ display: inline-block; font-size: 1.5rem; font-weight: 300; color: #fff; padding: 0 12px; }
#footer .line02 ul li:last-of-type a{ opacity: 0.8; }

@media screen and (max-width: 1200px){
	#footer{ padding-bottom: 85px; }
	#footer .line01 dl{ font-size: 1.6rem; }
	
	#footer .line01 .family *{ font-size: 1.5rem; }
	#footer .line01 .family.on p::after{ top: 48%; }
}

@media screen and (max-width: 1100px){
	#footer{ padding: 30px 0; }

	#footer .line01{ flex-direction: column; padding-bottom: 20px; }
	#footer .line01 .link{ margin-top: 20px; }
	#footer .line01 .link > ul{ margin-right: 0; margin-left: -10px; }
	#footer .line01 .link{ width: 100%; display: flex; justify-content: space-between; align-items: center; }
	#footer .line01 .family{ margin-top: 0; }

	#footer .line02{ padding-top: 20px; }
}

@media screen and (max-width: 1000px){
	
}

@media screen and (max-width: 700px){
	#footer .line02{ flex-direction: column-reverse; }
	#footer .line02 ul{ margin-right: 0; margin-left: -12px; margin-bottom: 15px; }
	#footer .line01 .family{ margin-top: 10px; }
}

@media screen and (max-width: 500px){
	#footer .line01 .link{ flex-direction: column; align-items: flex-start; }
}


/* 전체 메뉴 */
#menu{ width: 100%; height: var(--vh); position: fixed; top: 0; left: 0; z-index: 900; display: none; }
#menu .menu-box{ display: flex; height: 100%; }
#menu .menu-box > div{ height: 100%; }
#menu .menu-box .scroll-box{ display: flex; width: calc(100% - 100px); } 
#menu .menu-box .scroll-box > div{ padding-top: 175px; }

#menu .menu-box .info-box{ width: 600px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; transform: scaleX(0); transform-origin: right center; transition: all 0.5s; transition-delay: 0.5s; overflow: hidden; }
#menu .menu-box .info-box > div{ padding: 0 100px; opacity: 0; transition: all 0.5s; transition-delay: 1s; }
#menu .menu-box .info-box > div.info{ padding-bottom: 60px; }
#menu .menu-box .info-box .text h3{ font-size: 5rem; font-weight: 700; color: #111; letter-spacing: -0.01em; line-height: 1.3333; }
#menu .menu-box .info-box ul{ display: flex; align-items: center; margin-bottom: 13px; margin-left: -9px; }
#menu .menu-box .info-box ul li a{ display: inline-block; padding: 9px; }
#menu .menu-box .info-box dl{ display: flex; flex-wrap: wrap; font-size: 1.7rem; font-weight: 500; color: #333; }
#menu .menu-box .info-box dl dt{ width: 38px; line-height: 1.875; }
#menu .menu-box .info-box dl dd{ width: calc(100% - 38px); font-weight: 300; opacity: 0.8; line-height: 1.875; }

#menu .menu-box .nav-box{ width: calc(100% - 600px); background: #F3F3F3; transform: scaleX(0); transform-origin: right center; transition: all 0.5s; transition-delay: 0.5s; overflow: hidden; padding-top: 175px; }
#menu .menu-box .nav-box > div{ padding: 0 65px; padding-top: 10px; }
#menu .menu-box .nav-box .mobile{ display: none; }
#menu .menu-box .nav-box .depth01 > li{ display: flex; overflow: hidden; }
#menu .menu-box .nav-box .depth01 > li:not(:last-of-type){ margin-bottom: 80px; }
#menu .menu-box .nav-box .depth01 > li > a{ display: inline-block; width: 190px; height: fit-content; font-size: 3.5rem; font-weight: 700; color: #111; opacity: 0; position: relative; transform: translateY(110%); transition: color 0.5s , transform 0.5s 1s, opacity 0.5s 1s; }
#menu .menu-box .nav-box .depth01 > li > a::after{ content: url("/img/common/menu_arrow2.png"); position: absolute; top: 31%; right: 15px; transform: translateY(-50%); opacity: 0; transition: all 0.5s; }
#menu .menu-box .nav-box .depth02{ width: calc(100% - 190px); display: flex; flex-wrap: wrap; margin-bottom: -10px; margin-top: 2px; }
#menu .menu-box .nav-box .depth02 > li{ margin-bottom: 10px; overflow: hidden; }
#menu .menu-box .nav-box .depth02 > li > a{ display: inline-block; font-size: 1.8rem; font-weight: 500; color: #555; padding: 5px 15px; position: relative; transform: translateY(120%); transition: color 0.5s , transform 0.5s 1s; overflow: hidden; }
#menu .menu-box .nav-box .depth02 > li > a::after{ content: ""; width: calc(100% - 30px); height: 2px; background: var(--mainColor); position: absolute; bottom: 0; left: calc(50% + 1px); transform: translateX(-50%) scaleX(0); opacity: 0; transition: all 0.5s; }
#menu .menu-box .nav-box .depth02 > li.ch a{ top: -3px; }
#menu .menu-box .nav-box .depth02 > li > a span{ font-family: var(--Pretendard); font-weight: 200; line-height: 1; transition: color 0.5s , transform 0.5s 1s; }

#menu .menu-box .nav-box .depth01 > li:hover > a{ color: var(--mainColor); }
#menu .menu-box .nav-box .depth01 > li:hover > a::after{ right: 0; opacity: 1; }
#menu .menu-box .nav-box .depth02 > li:hover a{ font-weight: 700; color: #111; }
#menu .menu-box .nav-box .depth02 > li:hover a::after{ transform: translateX(-50%) scale(1); }
#menu .menu-box .nav-box .depth02 > li:hover > a span{ font-weight: 600; }

#menu .menu-box .side-box{ width: 100px; background: #1B1B1B; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 30px; transform: scaleY(0); transform-origin: top center; transition: all 0.5s; transition-delay: 1s; }
#menu .menu-box .side-box .delay{ width: fit-content; transform: rotate(90deg); margin-bottom: 30px; margin-right: -5px; opacity: 0; transition: all 0.5s; }
#menu .menu-box .side-box a{ display: inline-block; font-size: 1.6rem; font-weight: 500; color: var(--mainColor);  padding: 20px; white-space: nowrap; position: relative; }
#menu .menu-box .side-box a:hover{ text-decoration: underline; } 

#menu.on .menu-box .info-box{ transform: scaleX(1); will-change: transform; }
#menu.on .menu-box .info-box > div{ opacity: 1; }  
#menu.on .menu-box .nav-box{ transform: scaleX(1); }
#menu.on .menu-box .depth01 > li > a{ transform: translateY(0); opacity: 1; }
#menu.on .menu-box .depth02 > li > a{ transform: translateY(0); }
#menu.on .menu-box .nav-box .depth02 > li > a::after{ opacity: 1; }
#menu.on .menu-box .side-box{ transform: scaleY(1); transition-delay: unset; }
#menu.on .menu-box .side-box .delay{ opacity: 1; transition-delay: 1s; }

@media screen and (max-width: 1600px){
	#menu .menu-box .scroll-box > div{ padding-top: 140px; }

	#menu .menu-box .nav-box .depth01 > li:not(:last-of-type){ margin-bottom: 60px; }

	#menu .menu-box .side-box{ padding-top: 140px; }
}

@media screen and (max-width: 1500px){
	#menu .menu-box .scroll-box > div{ padding-top: 120px; }
	#menu .menu-box .info-box{ width: 500px; } 
	#menu .menu-box .info-box > div{ padding: 0 50px; }
	#menu .menu-box .info-box .text h3{ font-size: 4.5rem; }

	#menu .menu-box .nav-box{ width: calc(100% - 500px); }
	#menu .menu-box .nav-box > div{ padding: 0 50px; }
	#menu .menu-box .nav-box .depth01 > li > a{ width: 150px; font-size: 2rem; }
	#menu .menu-box .nav-box .depth01 > li:not(:last-of-type){ margin-bottom: 50px; }
	#menu .menu-box .nav-box .depth02{ width: calc(100% - 150px); margin-top: 0; }

	#menu .menu-box .side-box{ padding-top: 120px; }
}

@media screen and (max-width: 1400px){
	#header nav { width: calc(100% - 300px); }
}

@media screen and (max-width: 1200px){
	#menu .menu-box .scroll-box{ width: calc(100% - 80px); }
	#menu .menu-box .scroll-box > div{ padding-top: 120px; }

	#menu .menu-box .info-box{ width: 40%; }
	#menu .menu-box .info-box > div{ padding: 0 20px; }
	#menu .menu-box .info-box .text h3{ font-size: 4.5rem; } 

	#menu .menu-box .nav-box{ width: 60%; }
	#menu .menu-box .nav-box > div{ padding: 0 35px; }
	#menu .menu-box .nav-box .depth01 > li:not(:last-of-type){ margin-bottom: 50px; }
	#menu .menu-box .nav-box .depth01 > li > a{ width: 130px; font-size: 2.5em; } 
	#menu .menu-box .nav-box .depth02{ width: calc(100% - 130px); }
	#menu .menu-box .nav-box .depth02 > li > a{ font-size: 1.6rem; }

	#menu .menu-box .side-box{ width: 80px; padding-top: 140px; }

	#menu.on{ background: #fff; transition: background 0.5s; transition-delay: 1s; }
}

@media screen and (max-width: 1000px){		
	#menu{ /* overflow-y: scroll; */ overflow: hidden; }
	#menu::-webkit-scrollbar{ display: none; }
	#menu .menu-box{ height: auto; }
	#menu .menu-box .scroll-box{ display: flex; flex-direction: column-reverse; }
	#menu .menu-box .scroll-box > div.info-box{ padding-top: 0; }  

	#menu .menu-box .info-box{ width: 100%; height: auto; padding-top: 0; }
	#menu .menu-box .info-box > div.info{ padding: 20px; padding-bottom: 20px; }
	#menu .menu-box .info-box .text h3{ display: none; }
	
	#menu .menu-box .nav-box{ width: 100%; padding-bottom: 70px; }
	#menu .menu-box .nav-box > div{ padding: 0 20px; }
	#menu .menu-box .nav-box .depth01{  min-height: calc(var(--vh) - 341px); display: flex; flex-direction: column; justify-content: center; }

	#menu .menu-box .side-box{ height: var(--vh); position: fixed; top: 0; right: 0; }
}

@media screen and (max-width: 600px){
	#menu .menu-box .nav-box .pc{ display: none; }
	#menu .menu-box .nav-box .mobile{ display: block; }

	#menu .menu-box .info-box{ display: none; }

	#menu .menu-box .nav-box .depth01{ justify-content: flex-start; min-height: calc(var(--vh) - 120px); }
	#menu .menu-box .nav-box .depth01 > li{ flex-direction: column; position: relative; }
	#menu .menu-box .nav-box .depth01 > li::after{ content: ""; width: 100%; height: 61px; position: absolute; left: 0; top: 0; z-index: 20; cursor: pointer; }
	#menu .menu-box .nav-box .depth01 > li:not(:last-of-type){ margin-bottom: 0; }
	#menu .menu-box .nav-box .depth01 > li > a{ width: 100%; font-size: 3rem; padding: 15px 20px; border-bottom: 1px solid #CCC; }
	#menu .menu-box .nav-box .depth01 > li:hover > a{ color: #111; }
	#menu .menu-box .nav-box .depth01 > li > a::after{ content: url("/img/common/mobile_depth.png"); opacity: 1; right: 20px; transition: all 0.5s; } 
	#menu .menu-box .nav-box .depth01 > li:hover > a::after{ opacity: 1; right: 20px !important; }

	#menu .menu-box .nav-box .depth01 > li.on > a::after{ top: 37%; transform: rotate(-180deg); }

	#menu .menu-box .nav-box .depth02{ width: 100%; display: flex; flex-direction: column; background: #fff; padding: 10px 0; margin-bottom: 0; display: none; border-bottom: 1px solid #CCC; }
	#menu .menu-box .nav-box .depth02 > li{ margin-bottom: 0; }
	#menu .menu-box .nav-box .depth02 > li > a{ width: 100%; font-size: 1.8rem; padding: 5px 20px; }
	#menu.on .menu-box .nav-box .depth02 > li > a::after{ display: none; }

	#menu .menu-box .nav-box .depth01 > li:last-of-type .depth02{ border-bottom: none; }
}


/* 탑버튼 */
#top{ width: 70px; height: 70px; position: absolute; top: -30px; right: 15px; z-index: 100; transform: translateY(-100%); background: none; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 50%; }
#top img{ position: relative; transform: translateY(0); }
#top:hover img{ animation: bounce 1s infinite; }

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-13px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (max-width: 1200px){
	#top{ width: 60px; height: 60px; top: -20px; }
}