@charset "utf-8";

#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;outline-color:#f37736;}

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

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

#wrapper {position:relative;}

/* header */
#header {position:relative; z-index:100; width:100%; background:#fff; box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05);}
/* #sub #header {border-bottom:1px solid #ddd;} */

.header-top {position:relative; width:100%; height:46px; background:#121212; z-index:3;}
.header-top .contain {display:flex; justify-content:flex-end; align-items:center; height:100%; max-width:1780px;}
.header-top .util-top {display:flex; align-items:center; gap:var(--space-10); color:#fff; font-size:var(--font-size-14); line-height:1;}
.header-top .util-top a {color:#fff;}
.header-top .util-top .divider {width:1px; height:12px; background:#ccc;}

.header {position:relative; width:100%; height:var(--header-height); background:#fff; z-index:2;}
.header .contain {display:flex; justify-content:space-between; align-items:center; height:100%; max-width:1780px;}

.header-left {display:flex; height:var(--header-height); align-items:center;}
.header-center {display:flex; align-items:center; justify-content:center; flex:1;}
.header-right {display:flex; height:var(--header-height); align-items:center;}

.sitelogo {line-height:0; margin-right:var(--space-30);}
.sitelogo a {display:block;}
.sitelogo img {height:clamp(22px, calc(36 / var(--inner) * 100vw ), 36px);}

.top-search {position:relative; width:450px;}
.top-search .inner {display:block; position:relative;}
.top-search .input {display:block; width:100%; height:50px; padding:0 50px 0 20px; border:0; border-radius:40px; color:#878787; font-size:var(--font-size-16); background-color:#EFF3F8;}
.top-search .submit {position:absolute; top:50%; right:20px; width:20px; height:20px; margin-top:-10px; border:0; background:none; color:#505050;}
.top-search .close {display:none; background:none; border:0; padding:4px; margin:0 -4px 0 6px; line-height:0; color:#505050;}

.top-links {position:relative; display:flex; gap:var(--space-20); align-items:center;}
.top-links .link-item {position:relative; display:block; width:30px; height:30px;}
.top-links .link-item svg {display:block; width:100%; height:100%;}
.top-links .show-mobile {display:none;}
.top-links .num {position:absolute; bottom:-4px; right:-4px; min-width:16px; height:16px; background:var(--color-primary); border-radius:100%; line-height:16px; text-align:center; color:#fff; font-size:10px; font-weight:700; padding:0 4px;}

.gnb-wrap {position:relative; width:100%; height:80px; background:#fff; z-index:1;}
.gnb-wrap .contain {height:100%; max-width:100%;}

.gnb {position:relative; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;}
.gnb > ul {position:relative; display:flex; justify-content:center; align-items:center; gap:var(--space-60); height:100%;}
.gnb > ul > li {height:100%;}
.gnb > ul > li > a {display:flex; align-items:center; justify-content:center; height:100%; font-size:var(--font-size-17); font-weight:600; line-height:1; color:#121212; position:relative;}
.gnb > ul > li > a:hover {color:var(--color-primary);}
.gnb > ul > li:hover > a:after {content:''; position:absolute; bottom:11px; left:50%; transform:translateX(-50%); width:8px; height:8px; border-radius:100%; background:var(--color-primary);}

/* 전체 카테고리 */
.gnb-ctg {position:relative; margin-right:1rem;}

.gnb-ctg-open {display:flex; align-items:center; gap:8px; height:var(--gnb-height); background:none; border:0; font-size:16px; font-weight:700; line-height:1.2em;}

.gnb-category {display:none; position:absolute; left:0; z-index:10; overflow:hidden; background:#fff; border:1px solid var(--color-primary); box-shadow:0px 6px 16px 0px rgba(0, 0, 0, 0.2);}
.gnb-category.on {display:block;}

.gnb-ctg-cont {position:relative;}
.gnb-ctg-cont.gnb-ctg-level1-active {width:calc(150px + 180px);}
.gnb-ctg-cont.gnb-ctg-level2-active {width:calc(150px + 180px + 180px);}
.gnb-ctg-cont.gnb-ctg-level3-active {width:calc(150px + 180px + 180px + 180px);}

.gnb-ctg-list {width:150px; min-height:450px; overflow:overlay; -ms-scroll-chaining:none; overscroll-behavior:contain; background:#e5e5e5;}
.gnb-ctg-list::-webkit-scrollbar {display:none; width:4px; height:4px; background-color:transparent;}
.gnb-ctg-list::-webkit-scrollbar-thumb {background:rgba(0,0,0,.2); border-radius:5px;}

.gnb-ctg-a11y {display:none; width:18px; height:18px; background:url('/images/common/gnb-ctg-arrow.svg') 50% 50%/auto 88% no-repeat; border:0; opacity:.7;}

.gnb-ctg-topmn {display:flex; justify-content:space-between; align-items:center; padding:8px 6px 8px 12px;}
.gnb-ctg-topmn.on {background:#2c2c2c;}
.gnb-ctg-topmn.on .gnb-ctg-toplink {color:#fff; font-weight:700;}
.gnb-ctg-topmn.on > .gnb-ctg-a11y {background-image:url('/images/common/gnb-ctg-arrow-white.svg');}

.gnb-ctg-topmn.on .gnb-ctg-level1 {display:block; left:150px;}

.gnb-ctg-toplink,
.gnb-ctg-sublink {flex:1; margin-right:10px; color:#2c2c2c; font-size:14px; line-height:18px;}

.gnb-ctg-subarea {display:none; position:absolute; top:0; left:180px; width:180px; height:100%; box-shadow:inset 1px 0 0 #f0f0f0;}

.gnb-ctg-submenu {height:100%; overflow:overlay; -ms-scroll-chaining:none; overscroll-behavior:contain;}
.gnb-ctg-submenu::-webkit-scrollbar {width:4px; height:4px; background-color:transparent;}
.gnb-ctg-submenu::-webkit-scrollbar-thumb {background:rgba(0,0,0,.2); border-radius:5px;}

.gnb-ctg-submn {display:flex; justify-content:space-between; align-items:center; padding:8px 6px 8px 12px;}
.gnb-ctg-submn.on {background:#e5e5e5;}
.gnb-ctg-submn.on > .gnb-ctg-sublink {font-weight:700;}
.gnb-ctg-submn.on > .gnb-ctg-a11y {display:block !important;}

.gnb-ctg-level1 .on .gnb-ctg-level2 {display:block;}
.gnb-ctg-level2 .on .gnb-ctg-level3 {display:block;}


/* for mobile */
.btn-m-menu {display:none; position:relative; width:32px; height:32px; padding:4px; margin-left:-4px;}
.btn-m-menu span {width:100%; height:2px; border-radius:2px; background:#2c2c2c;}

.mobile-navigation {position:fixed; top:0; left:0; z-index:121; width:270px; height:100%; overflow:auto; background:#fff; transition:.2s ease-in-out; -ms-transform:translateX(-100%); transform:translateX(-100%); pointer-events:none; font-size:14px; line-height:1.5em;}

.mn-head {padding:32px 16px 16px 16px; background:var(--color-primary); color:#fff;}
.mn-head-link {display:flex; gap:5px; margin-top:12px;}
.mn-head-link .link-item {flex:1; display:block; width:100%; padding:6px; border:1px solid rgba(255,255,255,.6); text-align:center; font-size:13px;}

.mn-hr {display:block; margin:20px 16px; border:0; border-bottom:1px solid #ddd;}

.mn-link {margin:16px;}
.mn-link ul {display:grid; gap:4px 0;}
.mn-link a {display:block; padding:4px 10px; color:#767676; font-size:15px; font-weight:500; line-height:1.5em;}

.mn-nav {margin:16px;}
.mn-nav li.has-sub > a:after {content:''; width:18px; height:18px; background:url('/images/common/gnb-ctg-arrow.svg') 50% 50%/contain no-repeat; -webkit-transform:rotate(90deg); transform:rotate(90deg);}
.mn-nav li.has-sub.active > a:after {-webkit-transform:rotate(-90deg); transform:rotate(-90deg);}
.mn-nav > ul > li > a {position:relative; display:flex; align-items:center; justify-content:space-between; padding:8px 10px; color:#2c2c2c; font-size:15px; font-weight:600; line-height:1.5em;}
.mn-nav > ul > li ul {display:none; padding:0 0 16px 8px; opacity:.85;}
.mn-nav > ul > li ul li a {position:relative; display:flex; align-items:center; justify-content:space-between; padding:6px 10px; color:#2c2c2c; font-size:14px; line-height:1.5em;}
.mn-nav > ul > li ul li a:after {opacity:.6;}

.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.4; z-index:120;} 

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

/* main */
.main-visual {position:relative; width:100%; overflow:hidden; margin-bottom:var(--space-150);}
.main-visual .swiper {max-width:100%; margin:0 auto; overflow:visible;}
.main-visual .swiper-slide {width:100%; height:100%; overflow:hidden;}
.main-visual .swiper-slide img {width:100%; display:block;}
.main-visual .caption {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width:1460px; width:100%; padding:0 30px;}
.main-visual .caption h3 {color:#FFF; margin-bottom:var(--space-24); font-size:clamp(30px, calc(64 / var(--inner) * 100vw ), 64px); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.main-visual .caption p {color:#FFF; font-size:clamp(15px, calc(24 / var(--inner) * 100vw ), 24px); line-height:1.3em; letter-spacing:-.03em;}
.main-visual .caption .doc-btn {margin-top:var(--space-70);}

.main-visual .controls {position:absolute; bottom:var(--space-80); left:0; right:0; z-index:10;}
.main-visual .controls .contain {display:flex; align-items:center; gap:var(--space-20); justify-content:center;}
.main-visual .controls .ctrl {display:flex; align-items:center; justify-content:center; width:auto; height:auto; background:none; border:0; color:#fff; transition:.2s;}
.main-visual .controls .ctrl svg {display:block; width:20px; height:20px;}
.main-visual .controls .ctrl:hover {opacity:.7;}
.main-visual .controls .progress-group {display:flex; align-items:center; gap:10px;}
.main-visual .controls .progress-group .pager {font-weight:600; color:#fff; line-height:1;}
.main-visual .controls .progressbar {position:relative; width:200px; height:2px; background:rgba(255,255,255,.3);}
.main-visual .controls .progressbar span {position:absolute; top:0; left:0; height:100%; background:#fff; transition:.4s;}
.main-visual .controls .ctrl.auto {width:auto; height:auto;}
.main-visual .controls .ctrl.auto .pause {display:none;}
.main-visual .controls .ctrl.auto.autoplay .play {display:none;}
.main-visual .controls .ctrl.auto.autoplay .pause {display:block;}

.main-sec {margin-bottom:var(--space-150);}

.doc-btn a {height:56px; min-width:200px; padding:0 var(--space-40); align-items:center; justify-content:space-between; border:1px solid #ddd; color:#121212; font-weight:500; display:inline-flex; background-color:#fff;}
.doc-btn a i {background:url('/images/main/mv-arrow.svg') 50% 50% / cover no-repeat; width:8px; height:14px; display:inline-block;}

.main-heading {position:relative; margin-bottom:50px; color:#121212;}
.main-heading h2 {font-size:clamp(18px, calc(36 / var(--inner) * 100vw ), 36px); line-height:1.33em; letter-spacing:-.03em;}
.main-heading.size48 h2 {font-size:clamp(22px, calc(48 / var(--inner) * 100vw ), 48px);}
.main-heading.btn-flex {display:flex; align-items:center; gap:var(--space-20);}
.main-heading.btn-flex h2 {flex:1;}

.main-md-banner {margin-bottom:20px;}
.main-md-banner .slider {position:relative; max-width:1400px; margin:0 auto;}
.main-md-banner .slider:hover .slide-btn {opacity:1;}
.main-md-banner .swiper {opacity:1;}
.main-md-banner .slide-btn {display:flex; align-items:center; justify-content:center; position:absolute; top:50%; z-index:10; margin-top:-19px; width:38px; height:38px; background:rgba(0,0,0,.5); border:0; transition:.2s; opacity:0; color:#fff;}
.main-md-banner .slide-btn svg {display:block; width:70%; height:auto;}
.main-md-banner .slide-btn.prev {left:0;}
.main-md-banner .slide-btn.next {right:0;}

/* sub page */ 
#contArea {max-width:var(--container); padding-left:var(--space-container); padding-right:var(--space-container); margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title {padding:100px 0 80px; text-align:center; color:#121212;}
.sub-title h1 {font-size:40px; line-height:1.3;}

.lnb {margin-bottom:var(--space-50); text-align:center;}
.lnb ul {display:inline-flex; width:auto; max-width:100%; margin:0 auto;}
.lnb ul li {display:flex; align-items:center; width:auto;}
.lnb ul li:not(:first-child)::before {content:''; width:1px; height:14px; background:#ddd; margin:0 15px;}
.lnb ul li a {display:block; padding:5px; font-size:18px; font-weight:500; line-height:1.3em; color:#888;}
.lnb ul li.active a {color:var(--color-primary); font-weight:700;}

.real-cont {min-height:400px; padding-bottom:100px;}

/* footer */
#footer {border-top:1px solid #ddd; padding:var(--space-70) 0 var(--space-100);}
#footer .contain {max-width:var(--container);}
#footer address {font-style:normal; line-height:1.4;}
#footer address span {display:inline-block;}
#footer a:hover {text-decoration:underline;}

.foot-logo {margin-bottom:var(--space-40);}
.foot-logo img {height:clamp(22px, calc(36 / var(--inner) * 100vw ), 36px);}

.foot-grid {display:flex; gap:var(--space-60);}
.foot-grid .tit {margin-bottom:12px; font-size:var(--font-size-16); color:#121212; font-weight:700;}

.foot-grid .foot-cs .wrap {display:block;}
.foot-grid .foot-cs .tel {margin-bottom:var(--space-35);}
.foot-grid .foot-cs .tel a {color:var(--color-primary); font-size:var(--font-size-36); font-weight:700; line-height:1;}
.foot-grid .foot-cs .tel a:hover {text-decoration:none !important;}
.foot-grid .foot-cs .hour {display:flex; margin-bottom:6px; line-height:1.5;}
.foot-grid .foot-cs .hour .label {width:112px;}
.foot-grid .foot-cs .hour .time {flex:1;}

.foot-grid .foot-info {flex:1;}
.foot-grid .foot-info .addr {margin-bottom:10px; color:#121212; font-weight:500;}
.foot-grid .foot-info span {margin:0 25px 10px 0;}
.foot-grid .foot-info .biz-link {display:inline-block; margin-left:var(--space-10); padding:2px var(--space-10); background:#EEE; font-size:10px;}

.foot-grid .foot-nav ul {display:grid; gap:10px; text-align:right; line-height:1.5;}
.foot-grid .foot-nav ul li:hover a {font-weight:600; color:var(--color-black);}

#footer .copyright {font-size:var(--font-size-14); line-height:1.3; margin-top:25px; color:#878787;}
#footer .copyright a {padding-left:30px;}

/* 플로팅 버튼 */
.float-btn {position:fixed; right:var(--space-30); top:50%; transform:translateY(-50%); z-index:100; display:grid; gap:var(--space-10);}
.float-btn a {width:clamp(44px, calc(56 / var(--inner) * 100vw ), 56px); height:clamp(44px, calc(56 / var(--inner) * 100vw ), 56px); background-color:#fff; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.float-btn .img {display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.float-btn .chat-btn {background-color:#3DAF37;}
.float-btn .kakao-btn {background-color:#FFE600;}
.float-btn .chat-btn img,
.float-btn .kakao-btn img {height:clamp(25px, calc(32 / var(--inner) * 100vw ), 32px);}
.float-btn .scroll-top-btn,
.float-btn .scroll-bottom-btn {background-color:var(--color-white);}