@charset "UTF-8";
/* *******************************************************
공통
******************************************************** */

@import url("content.css");
@import url("board.css");
@import url("layer.css");
@import url("responsive.css");
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url("https://unpkg.com/aos@next/dist/aos.css");


/* 공통 UI 레이아웃 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,button,select,input
{margin: 0;padding: 0;border: 0; font-family:'Pretendard', sans-serif}


html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height: 100%;
    scroll-behavior: smooth;
}

body {
	font-size: 16px;
	line-height: 1.6;
	vertical-align: baseline;
	text-decoration:none;
	color: #1F1F1F;
	font-weight:400;
	word-break:keep-all;overflow-wrap:normal;
}

ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* a Link style */
a {text-decoration: none;color: #1F1F1F}
a:active, a:link, a:visited {outline: 0;text-decoration: none;}
a:hover {outline: 0;text-decoration: none;  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;transition: all 0.5s; cursor: pointer}

/* etc */
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
address, h1, h2, h3, h4, h5 {font-style:normal; color: #1F1F1F;}
img {vertical-align: middle;}
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus,:active,:focus,:visited,a,a:active,a:focus,a:visited{outline:0}
em {font-style:normal; font-weight: 400}
dt {font-style:normal; font-weight: 400}

[data-aos] { transition-duration: 1200ms !important; /* AOS 애니메이션 지속 시간 */}




/* ************* GNB ************ */

.gnb {position:fixed;top:0;left:0;width:100%;height:80px;z-index:1000; background-color: rgba(0, 0, 0, 0.5);}
.gnb-inner {display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 100px;}
.logo {width:130px;}

.logo img {display:block;max-width:100%;}
.m-view {display:none;}


.nav {position:relative;height:100%;}
.depth1 {display:flex; align-items:center; gap:100px; height:100%; margin:0; padding:0; list-style:none;}
.depth1 > li {position:relative;height:100%;}
.depth1 > li > a {display:flex;align-items:center; height:100%; font-size:1.20rem; font-weight:500; color:#fff;white-space:nowrap;  }
.depth1 > li > a:hover {color:#00FFD8; transition:.3s; }
.depth1 > li > a.active {color:#00FFD8;}
.depth2 {display:none;}
a.menu-shop {background: #fff; height: 30px!important; color: #000!important; margin-top: 24px; padding: 0 32px; border-radius: 20px; font-size: 1.14rem!important;}
a.menu-shop:hover  {background: #32E5EE; transition:.3s; }

/* 언어 */
.langview { position: relative; cursor: pointer; width:24px;}
.langview img { width: 20px; display: block; }
.lang-list { z-index: 10;  position: absolute; top: 100%; left: 50%; min-width: 54px; margin-top: 8px; background: #BFDEFF;  border-radius: 8px; transform: translate(-50%, 0); opacity: 0; visibility: hidden; transition: .3s ease; padding: 8px 0;}
.langview:hover .lang-list { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.lang-list li a { display: block; font-size: 1rem; text-align: center;  font-weight: 500;}
.lang-list li a.on { color: #0E52B1; }
.m-langview  {display: none;}


/* ***** PC******** */
.mega-menu {position:fixed; top:80px; left:0; width:100%; max-height:0; overflow:hidden;background:rgba(255,255,255,1);border-bottom:1px solid #363636; opacity:0; visibility:hidden; transition:max-height .4s ease,opacity .25s ease,visibility .25s ease;}
.nav:hover .mega-menu {max-height:400px; opacity:1;visibility:visible;}
.mega-inner {display:grid; grid-template-columns:repeat(6,1fr); width:810px; margin:0 auto; padding: 16px 0;}
.mega-column {  width: auto; box-sizing: border-box;}
.mega-column.m1 {padding-left: 0; width: 140px;}
.mega-column.m2 {padding-left: 0; width: 160px;}
.mega-column.m3 {padding-left: 70px; width: 200px;}
.mega-column.m4 {padding-left: 90px; width: 200px;}
/*.mega-column.m5 {padding-left: 30px; width: 120px; } */

.mega-column ul {margin:0; padding:0; list-style:none;}
.mega-column li {margin:0; padding:0;}
.mega-column a {display:block; font-size:0.88rem; line-height:34px; transition:.3s; }
.mega-column a:hover {color:#0B6E75;}

/* submenu test
.mega-column {border: 1px solid red;}
.mega-menu {opacity:1; visibility:visible; max-height:400px}*/


/* *********** DIM ************** */
.nav-dim {position:fixed;top:0;left:0;width:100%;height:100vh; background:rgba(0,0,0,.6); opacity:0;visibility:hidden;transition:.35s; z-index:998;}
.nav-dim.active {opacity:1;visibility:visible;}


/* ******* MOBILE MENU BUTTON ******** */
.menu-btn {display:none;position:relative;width:32px;height:24px;background:none;border:0;cursor:pointer;z-index:1001;padding:0;}
.menu-btn span {position:absolute;left:0;width:100%;height:2px;background:#000;transition:.3s;}
.menu-btn span:nth-child(1) {top:0;}
.menu-btn span:nth-child(2) {top:50%;transform:translateY(-50%);}
.menu-btn span:nth-child(3) {bottom:0;}

/* HAMBURGER → X */
.menu-btn.active span:nth-child(1) {top:50%;transform:translateY(-50%) rotate(45deg);}
.menu-btn.active span:nth-child(2) {opacity:0;}
.menu-btn.active span:nth-child(3) {bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}



@media (max-width: 1440px){
    .gnb-inner {padding:0 24px;}
    .depth1 {gap:80px;}
    .depth1 > li > a {font-size:1rem; }
    a.menu-shop {padding: 0 24px; font-size: 1rem!important;}

    .mega-column a {font-size:0.94rem; }
    .mega-inner {max-width:680px; margin:0 auto; padding: 16px 0;}
    .mega-column.m1 {padding-left:4px;}
    .mega-column.m2 {padding-left: 56px; width: 160px;}
    .mega-column.m3 {padding-left: 56px; width: 160px;}
    .mega-column.m4 {padding-left: 20px; width: 160px;}
    .mega-column.m5 {padding-left: 16px; width: 120px; }

}




/* ************** MOBILE **************** */

@media (max-width:1279px) {
.gnb {height:60px;}
.gnb-inner {padding:0 16px;}
.pc-view {display:none;}
.m-view {display:block;}
.menu-btn {display:block;}
.nav {position:fixed;top:0;right:-100%;width:80%;max-width:400px;height:100vh;background:#fff; z-index:1000;overflow-y:auto;transition:right .35s ease;}
.nav.active {right:0;}
.logo {width:80px;}

.depth1 {display:block;height:auto;margin:0;padding:24px;}
.depth1 > li {height:auto;border-bottom:1px solid #ddd;}
.depth1 > li > a {display:flex;align-items:center;justify-content:space-between;height:60px;font-size:1.12rem;color:#000;}
.depth1 > li > a:hover {color:#000;}
.depth1 > li > a.active {color:#0B6E75; font-weight: 700; }
.depth1 > li.has-sub > a::after {content:'';width:8px;height:8px;border-right:1px solid #111;border-bottom:1px solid #111;transform:rotate(45deg);transition:transform .6s cubic-bezier(.22,1,.36,1);}
.depth1 > li.active > a::after {transform:rotate(225deg);}

.depth2 { display:block; max-height:0; overflow:hidden; margin:0; padding:0; list-style:none; background:#f7f7f7; transition:max-height .45s cubic-bezier(.22,1,.36,1),padding .35s ease; height:auto; }
.depth1 > li.active > .depth2 { max-height: var(--sub-h, 300px); }
.depth2 li {border-top:1px solid #e8e8e8;}
.depth2 a {display:block;padding:0 20px; font-size:1rem; line-height:48px; }
.depth2 a:hover {color:#00A7E1;}

a.menu-shop {background:none; margin-top: 0;  border-radius: 0;padding-left:0!important; display:flex; align-items:center;justify-content:space-between;height:60px!important; font-size:1.12rem; color:#000; font-size: 1.12rem!important;}
a.menu-shop:hover  {background: none }
a.active.menu-shop{color:#0B6E75!important; font-weight: 700; }

.mega-menu {display:none;}
.langview {display: none;}
.menu-btn span {background:#fff;}
.menu-btn.active span {background:#000;}

.m-langview {  z-index:1001; padding-left: 24px; padding-top: 24px; box-sizing: border-box; display: inline-block;}
.m-langview li {display: inline-block; padding-right:6px;}
.m-langview li a {font-weight: 600; background: #e8e8e8; border-radius: 30px; height: 30px; display: block; text-align: center; padding: 0 24px; line-height: 30px;}
.m-langview li a.on {font-weight: 600; background: #0B6E75; color: #fff;}

}





footer {display: grid; grid-template-columns: 150px auto 300px; width: 100%;  padding: 60px 80px; position: relative; box-sizing: border-box; border-top:1px solid #D8D9DA; font-size: 0.88rem; margin-top: 200px;}
footer img {width: 116px;}
.footer-01 span {display: block; font-weight: 600; font-size: 1rem;}
.footer-01 li {display: inline-block; padding-right: 20px;}
.footer-02 {text-align: right;}
.footer-02 li  {display: inline-block; padding-left: 12px;}
.footer-02 li::after {content: '|'; padding-left: 12px; color: #ccc;}
.footer-02 li:last-child:after {content: none;}
.footer-02 a:hover {opacity: 0.6;}


@media (max-width: 1440px){
    footer {padding: 10px 24px; font-size: 0.82rem;}
}

@media (max-width:1279px){
    footer {display: block; grid-template-columns:1fr; padding: 20px  16px 40px 16px;font-size: 0.78rem; margin-top: 80px;}
    footer img {width: 90px; margin-bottom: 10px;}
    .footer-01 span {font-size: 0.78rem;}
    .footer-01 li {padding-right:8px; line-height: 1;}
    .footer-02 {text-align: left;}
    .footer-02 li  {padding-left: 8px; margin-top: 10px; font-weight: 500;}
    .footer-02 li:nth-child(1) {padding-left: 0;}
    .footer-02 a{font-size: 0.92rem;}
}



.ctt_admin {display: none!important;}
#ctt {margin: 0!important; padding: 0!important; }
#ctt_con {padding: 0!important; }
.page-none {display: none;}