@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {max-width:1460px; margin:0 auto; padding-right:var(--space-container); padding-left:var(--space-container);}

/* header */
#header {position:fixed; top:0; left:0; display:flex; align-items:center; justify-content:space-between; width:100%; height:var(--header-height); padding-left:var(--space-container); padding-right:var(--space-container); border-bottom:1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.24); backdrop-filter:blur(11.699999809265137px); transition:.4s; z-index:100;}

.sitelogo img {display:block; height:38px;}

.gnb {position:relative; text-align:center; overflow:hidden;}
.gnb > ul {display:flex; gap:50px;}
.gnb > ul > li > a {display:flex; align-items:center; justify-content:center;  width:100%; height:var(--header-height); font-family:'Paperlogy',sans-serif; font-size:18px; font-weight:700; line-height:1.5em; color:#222;}
.gnb-bar {position:absolute; bottom:0; height:6px; background:var(--color-primary); z-index:10;}

.pull-right {display:flex; align-items:center; gap:16px;}

.top-btn-contact {display:inline-block; background:var(--color-primary);  padding:10px 50px; border-radius:10px; color:#fff; font-size:20px; font-weight:600; line-height:1.5em; letter-spacing:0;}
.top-btn-contact img {width:24px;}

/* for mobile */
.btn-m-menu {display:none; width:24px; height:24px;}
.btn-m-menu div {display:flex; flex-direction:column; justify-content:center; gap:6px; width:100%; height:100%;}
.btn-m-menu span {display:block; width:100%; height:2px; background:#222;}

.mobile-navigation {display:none;position:fixed; top:0; right:0; width:280px; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:102;}
.mobile-navigation .nav-menu {position:relative; width:100%; min-height:100%; display:flex; flex-direction:column; justify-content:center;}
.mobile-navigation .nav-menu>ul>li>a {text-align:center; padding:13px 20px; display:block; font-family:'Paperlogy',sans-serif; color:#2c2c2c; font-size:18px; font-weight:700; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--color-primary);}
.mobile-navigation .gnb-bar {display:none;}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}
.mobile-navigation .close {position:absolute; top:15px; right:15px; width:26px; height:26px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:3px; background:#242424; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* floating */
.floating {position:fixed; bottom:20px; right:30px; z-index:70; width:60px; display:flex; flex-direction:column; gap:10px;}
.floating .link-item {border-radius:100%; box-shadow:0 0 8px rgba(0, 0, 0, 0.08);}

.scroll-top {aspect-ratio: 1/1; background:#fff; margin-bottom:-100%; opacity:0; pointer-events:none;}
.scroll-top .text {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:100%; height:100%; font-size:14px; font-weight:700; line-height:1em; color:#484848;}
.scroll-top .text:after {content:""; display:block; width:18px; aspect-ratio:18/10; background:url('/images/common/top.svg') no-repeat 50% 50%/contain;}

.scroll-top.active { margin-bottom:0; opacity:1; pointer-events:auto;}

/* footer */
#footer {padding:50px var(--space-container); background:#FAFAFA; color:#222; line-height:1.4em;}
#footer .contain {position:relative;display:flex; justify-content:space-between; max-width:100%; padding:var(--space-60) 0;}
#footer address {font-style:normal;}

.footer {position:relative;}

.foot-logo {margin-bottom:32px;}
.foot-logo img {height:24px;}

.foot-sns {position:absolute; top:0; right:0; display:flex; gap:var(--space-20);}
.foot-sns a {width:32px;}

.foot-info {display:flex; flex-wrap:wrap;}
.foot-info .col {gap:0 30px; width:40%; max-width:620px;}
.foot-info .dl-wrap {display:table;}
.foot-info dl {display:table-row;}
.foot-info dl dt {display:table-cell; padding:6px 65px 6px 0; font-weight:600;}
.foot-info dl dd {display:table-cell; padding:6px 0; color:#484848;}

.foot-copyright {margin-top:30px; color:#777; font-size:14px; line-height:1.4em;}