@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;}
#sub #header {border-bottom:1px solid #ddd;}

.header {position:relative; width:100%; height:var(--header-height); border-bottom:1px solid #ddd; z-index:2;}
.header .contain {display:flex; justify-content:space-between; align-items:center; height:100%;}

.header-left {display:flex; height:var(--header-height); align-items:center;}
.header-right {display:flex; height:var(--header-height); flex-direction:column; align-items:flex-end; justify-content:space-around;}

.sitelogo {line-height:0; margin-right:30px;}
.sitelogo a {display:block;}
.sitelogo img {height:48px;}

.top-search {position:relative; width:320px;}
.top-search .inner {display:block; position:relative;}
.top-search .input {display:block; width:100%; height:40px; padding:0 40px 0 16px; border:1px solid #ccc; border-radius:6px; color:#2c2c2c; font-weight:500;}
.top-search .submit {position:absolute; top:50%; right:16px; width:24px; height:24px; margin-top:-12px; 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;}

.util {color:#767676; font-size:12px; line-height:1.5em;}
.util ul {display:flex; justify-content:flex-end; align-items:center; gap:18px;}

.top-links {position:relative; display:flex; gap:18px;}
.top-links .link-item {position:relative; display:block;}
.top-links .link-item svg {display:block; width:26px; height:auto;}
.top-links .show-mobile {display:none;}
.top-links .num {position:absolute; top:-8px; right:-8px; min-width:16px; background:var(--color-primary); border-radius:10px; line-height:16px; text-align:center; color:#fff; font-size:10px;}
.top-links .account-item {position:relative;}

.gnb-wrap {position:relative; width:100%; height:var(--gnb-height); transition:.4s;}
.gnb-wrap .contain {height:100%;}
.gnb-inner {position:relative; height:100%; display:flex; align-items:center; justify-content:space-between;}

.gnb {display:relative;}
.gnb > ul {position:relative; display:flex; justify-content:center; gap:0 2rem;}
.gnb > ul > li > a {display:flex; align-items:center; justify-content:center; height:var(--gnb-height); font-size:16px; font-weight:700; line-height:1.2em;}
.gnb > ul > li > a:hover,
.gnb > ul > li.active > a {color:var(--color-primary);}

.brief-message {position:absolute; top:0; right:0; white-space:nowrap; font-size:15px; font-weight:500; line-height:var(--gnb-height); text-align:right;}
.brief-message .swiper-slide {height:var(--gnb-height) !important;}

/* 전체 카테고리 */
.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-50);}
.main-visual .swiper {max-width:1200px; margin:0 auto; overflow:visible;}
.main-visual .swiper-slide {width:100%; height:100%; overflow:hidden;}
.main-visual .swiper-slide:after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); transition:.3s ease;}
.main-visual .swiper-slide a {display:block;}
.main-visual .swiper-slide img {display:block;}
.main-visual .swiper-slide-active {}
.main-visual .swiper-slide-active:after {opacity:0; pointer-events:none;}
.main-visual .controls {margin-top:10px;}
.main-visual .controls .contain {display:flex; align-items:center; gap:2px;}
.main-visual .progressbar {flex:1; position:relative; height:2px; margin-right:10px; background:#ddd;}
.main-visual .progressbar span {position:absolute; top:0; left:0; height:100%; background:#2c2c2c; transition:.4s;}
.main-visual .ctrl {display:flex; align-items:center; justify-content:center; width:28px; height:28px; background:#fff; border:1px solid #ccc; color:#ccc; transition:.2s;}
.main-visual .ctrl svg {display:block; width:24px; height:auto;}
.main-visual .ctrl:hover {border-color:#505050; color:#505050;}
.main-visual .ctrl.auto {color:#505050;}
.main-visual .ctrl.auto .pause {display:none;}
.main-visual .ctrl.auto.autoplay .play {display:none;}
.main-visual .ctrl.auto.autoplay .pause {display:block;}
.main-visual .pager {display:flex; justify-content:center; align-items:center; gap:2px; width:4em; color:#767676; font-size:14px; line-height:1.3em; letter-spacing:0; text-align:center;}
.main-visual .pager .current {color:#2c2c2c; font-weight:500;}

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

.main-heading {position:relative; margin-bottom:20px;}
.main-heading h2 {font-size:26px; line-height:1.33em; letter-spacing:-.03em;}

.main-md-banner .slider {position:relative; max-width:1200px; margin:0 auto;}
.main-md-banner .slider:hover .slide-btn {opacity:1;}
.main-md-banner .swiper {border-radius:8px; 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:30px 0; text-align:center;}
.sub-title h1 {font-size:30px; 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 {padding:40px 0; background:#f8f8f8; color:#505050; font-size:15px; line-height:1.6em;}
#footer address {font-style:normal;}
#footer address span {display:inline-block;}
#footer a:hover {text-decoration:underline;}

.foot-nav {margin-bottom:60px;}
.foot-nav ul {display:flex; flex-wrap:wrap; gap:10px 30px;}

.foot-cs {margin-bottom:30px;}
.foot-cs h3 {margin-bottom:10px; color:#2c2c2c; font-size:18px; font-weight:600; line-height:1.3em;}
.foot-cs .wrap {display:flex; align-items:center; gap:16px;}
.foot-cs .tel {color:#2c2c2c; font-size:30px; font-weight:700; line-height:1em;}
.foot-cs .tel a:hover {text-decoration:none !important;}
.foot-cs .hour {color:#767676; font-size:12px; line-height:1.5em; letter-spacing:-.03em;}

.foot-info {color:#767676;}
.foot-info address span {margin:0 25px 2px 0;}
.foot-info .copyright {margin-top:1em;}

.f-comp .comp {margin-bottom:12px; color:#2c2c2c; font-size:14px; font-weight:700;}
.f-comp address span {margin:6px 22px 0 0;}
.f-comp .biz-link {margin-left:4px; color:#2c2c2c; font-weight:700;}

.f-etc {text-align:right; color:#505050;}
.f-etc .escrow {height:70px;}
.f-etc .link {margin-top:24px;}
.f-etc .link a {margin-left:16px;}
.f-etc .copyright {margin-top:8px;}



.scroll-top {display:flex; justify-content:center; align-items:center; position:fixed; right:30px; bottom:30px; z-index:80; width:48px; height:48px; background:#fff; border-radius:100%; border:1px solid #ddd; opacity:0; color:#222; font-size:18px; font-weight:500; transition:none; pointer-events:none;}
.scroll-top.active {opacity:1; pointer-events:auto;}