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

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

#wrapper {position:relative; overflow:hidden;}
#sub #wrapper {padding-top:calc(clamp(60px, calc(120/ var(--inner) * 100vw ),120px) + 20px);}

#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}

.contain {position:relative; width:100%; max-width:1260px; padding-left:var(--container-space); padding-right:var(--container-space); margin:0 auto;}
.contain:after {content:" "; display:block; clear:both;}

/* header */
#header  {position:fixed; z-index:90; left:0; top:0; width:100%; transition:0.8s all ease;}
#header .contain {max-width:1880px;}
.sitelogo {position:absolute; left:var(--container-space); top:50%; margin-top:-24px; z-index:10;}
.sitelogo a {display:block; width:202px; height:48px; background:url('/images/common/logo.png') no-repeat 50% 50%/contain; text-indent:-9999em; overflow:hidden; transition:0.8s all ease;}

#gnb {width:100%; max-width:1050px; margin:calc(calc(clamp(60px, calc(120/ var(--inner) * 100vw ),120px) - clamp(40px, calc(60/ var(--inner) * 100vw ),60px))/2) auto; background:#fff; border-radius:100vh; border:1px solid #eee; box-shadow:0 0 6px rgba(0,0,0,0.1);}
#gnb > ul {display:flex; justify-content:center;}
#gnb > ul > li {position:relative; flex:1;}
#gnb > ul > li > a {display:flex; position:relative; padding:0 clamp(20px, calc(30/var(--inner) * 100vw ),30px); align-items:center; justify-content:center; font-size:clamp(16px, calc(18/ var(--inner) * 100vw ),18px); font-weight:700; height:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px);  color:#242424;}
#gnb > ul > li > a:before {content:''; position:absolute; left:50%; bottom:-7px; margin-left:-7px; width:14px; height:14px; background:#fff; opacity:0; transform:translateY(-10px); transition:0.3s all ease; border-radius:100vh; border:4px solid var(--color-primary);}
#gnb > ul > li.active > a:before {opacity:1; transform:translateY(0);}

#gnb .submenu {height:0; position:absolute; left:0; width:100%; z-index:102; overflow:hidden; text-align:center; padding-top:12px;}
#gnb .submenu>ul {position:relative; padding:30px 0;}
#gnb .submenu>ul>li {margin-bottom:24px;}
#gnb .submenu>ul>li:last-child {margin-bottom:0;}
#gnb .submenu>ul>li>a {display:block; padding:0 0.5em; position:relative; line-height:1.2em; transition: all 0.2s ease-in;}
#gnb .submenu>ul>li>a:hover {color:var(--color-primary); font-weight:600;}

.header-btns {display:flex; align-items:center; position:absolute; right:var(--container-space); top:50%; transform:translateY(-50%);}
.header-btns .chat-btn {display:flex; align-items:center; background:#f1f1f1; border-radius:100vh; padding:5px; padding-right:1.33em; font-weight:500; line-height:1;}
.header-btns .chat-btn img {margin-right:10px;}

#header .submenu-bg {display:none; position:absolute; top:calc(clamp(60px, calc(120/ var(--inner) * 100vw ),120px) - clamp(40px, calc(60/ var(--inner) * 100vw ),60px)/2 + 12px); left:50%; transform:translateX(-50%); width:100%; max-width:1050px; background:#fff; border-radius:1.5em; box-shadow:0 0 6px rgba(0,0,0,0.1);}

.language {position:relative; margin:0 20px 0 10px;}
.language .bt-lang {position:relative; display:block;}

.language .lst {display:none; position:absolute; left:0; top:55px; padding:20px; width:108px; background:#fff; border:1px solid #eee; border-radius:1em; box-shadow:0 0 6px rgba(0,0,0,0.1);}
.language .lst li {margin-bottom:15px;}
.language .lst li:last-child {margin-bottom:0;}
.language .lst li a {display:inline-block; width:100%; line-height:1; font-size:var(--font-size-15); font-weight:700; letter-spacing:-0.02em; color:#2c2c2c;}
.language .lst li a:hover {color:var(--color-primary);}

/* 전체메뉴 */
.btn-all-menu {display:block; position:relative; width:44px; height:44px; border-radius:100vh; background:#121212; text-align:center; text-indent:-9999em; z-index:92; transition: all 0.5s ease-in-out;}
.btn-all-menu span {position:absolute; left:50%; top:21px; height:2px; width:16px; background:#fff; margin-left:-8px;}
.btn-all-menu span:before,
.btn-all-menu span:after {content:" "; position:absolute; width:10px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;}
.btn-all-menu span:before {top:-5px; right:0; transition-property:top, transform;}
.btn-all-menu span:after {bottom:-5px; left:0; transition-property:bottom, transform;}

.all-navigation {position:fixed; z-index:101; display:flex; align-items:center; justify-content:center; top:0; left:0; width:100vw; background:rgba(255,255,255,0.94); transform:translateY(-100%); transition:0.2s all ease;}
.all-navigation .inner {display:flex; align-items:center; position:relative; width:100%; max-width:1880px; padding:0 var(--container-space); height:calc(var(--vh, 1vh) * 100);}
.all-navigation .close {position:absolute; width:24px; height:24px; top:48px; right:calc(var(--container-space) + 10px); background:url('/images/common/icon-close.png') no-repeat 50% 50%/contain; text-indent:-999em; overflow:hidden;}
.all-nav-menu {display:flex; width:100%; height:100%;}
.all-nav-menu>ul {position:relative; flex:1; padding-top:16vh;}
.all-nav-menu>ul:before {content:''; position:absolute; left:0; top:0; width:1px; height:100vh; background:#efefef;}
.all-nav-menu>ul:last-child:after {content:''; position:absolute; right:0; top:0; width:1px; height:100vh; background:#efefef;}
.all-nav-menu>ul>li {position:relative; margin-bottom:clamp(40px, calc(230/ var(--inner) * 100vw ),230px); padding-left:var(--size50);}
.all-nav-menu>ul>li:before {content:''; position:absolute; left:-1px; top:0; width:3px; height:30px; background:var(--color-primary); opacity:0; transition:0.3s all ease;}
.all-nav-menu>ul>li:hover>a {color:var(--color-primary);}
.all-nav-menu>ul>li:hover:before {opacity:1;}
.all-nav-menu>ul>li:last-child {margin-bottom:0;}
.all-nav-menu>ul>li>a {display:block; margin-bottom:var(--size50); position:relative; font-size:clamp(16px, calc(32/ var(--inner) * 100vw ),32px); font-weight: 700; color:#2c2c2c; line-height:1;}
.all-nav-menu>ul>li li {margin-bottom:var(--size20);}
.all-nav-menu>ul>li li:last-child {margin-bottom:0;}
.all-nav-menu>ul>li li a {display:block; font-size:var(--font-size-17); color:#676767; line-height:1.2;}
.all-nav-menu>ul>li li a:hover {color:var(--color-primary); font-weight:600;}

.all-menu-info {position:absolute; left:var(--size50); bottom:13vh;}
.all-menu-info .info-item-title {margin-bottom:var(--size40);}
.all-menu-info dl {margin-bottom:var(--size30);}
.all-menu-info dl:last-child {margin-bottom:0;}
.all-menu-info dl dt {margin-bottom:10px; font-weight:700; color:#a8a8a8; line-height:1.2;}
.all-menu-info dl dd {font-size:clamp(15px, calc(26/ var(--inner) * 100vw ),26px); font-weight:600; color:#2c2c2c; line-height:1.2;}

html.menu-all-opened {overflow:auto !important;}
html.menu-all-opened .all-nav-menu>ul>li {opacity:1; transform:translateX(0);}
html.menu-all-opened .all-navigation {transform:translateY(0);}


/* for mobile */
.btn-m-menu {display:none; position:absolute; top:50%; right:var(--container-space); margin-top:-22px; width:44px; height:44px; border-radius:100vh; background:#121212; text-align:center; text-indent:-9999em; z-index:92; transition: all 0.5s ease-in-out;}
.btn-m-menu span {position:absolute; left:50%; top:21px; height:2px; width:16px; background:#fff; margin-left:-8px;}
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; width:10px; height:2px; background:#fff; transition-duration:0.3s, 0.3s; transition-delay:0.3s, 0s;}
.btn-m-menu span:before {top:-5px; right:0; transition-property:top, transform;}
.btn-m-menu span:after {bottom:-5px; left:0; transition-property:bottom, transform;}


.mobile-navigation {position:fixed; top:0; right:0; padding:20px 0; width:300px; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#ffffff; z-index:101;}
.mobile-navigation .home {padding-bottom:20px; padding-left:15px;}
.mobile-navigation .home img {height:40px;}
.mobile-navigation .nav-menu>ul>li {border-bottom:1px solid #ddd;}
.mobile-navigation .nav-menu>ul>li>a {position:relative; padding:14px 15px; display:block; color:#242424; font-size:1.3em; font-weight:500; line-height:1.3em;}
.mobile-navigation .nav-menu>ul>li.active>a {color:var(--color-primary) ;}
.mobile-navigation .nav-menu>ul>li:has(.submenu)>a:after {content:""; position:absolute; top:50%; right:15px; transform:translateY(-75%) rotate(45deg); width:10px; height:10px; border-right:2px solid #2c2c2c; border-bottom:2px solid #2c2c2c;}
.mobile-navigation .nav-menu>ul>li.active>a:after{transform: translateY(-35%) rotate(-135deg); border-color: var(--color-primary) ;}
.mobile-navigation .nav-menu .submenu {display:none; position:static; transform: translateX(0); margin:-1px 0 0 0; width:100%;  padding:10px 0;background:var(--color-primary) ; padding-bottom:10px;}
.mobile-navigation .nav-menu .submenu>ul {display:block; width:100%;}
.mobile-navigation .nav-menu .submenu>ul>li {text-align:left; padding:0;}
.mobile-navigation .nav-menu .submenu>ul>li>a {display:block; position:relative; padding:5px 0 5px 25px; color:#fff; font-size:16px; font-weight:400; line-height:1.3em;}
.mobile-navigation .nav-menu .submenu>ul>li>a:after {content:"";position:absolute; top:14px; left:15px; width:4px; height:4px; border-radius:100%; background:#fff; transition:.2s ease-in-out;}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover {color:#fff}
.mobile-navigation .nav-menu .submenu>ul>li>a:hover:after {background:#fff}
.mobile-navigation .nav-menu .submenu .tit {display:none;}
.mobile-navigation .close {position:absolute; top:20px; right:18px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:12px; left:0; width:100%; height:2px; background:#242424;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.76; z-index:98;} 

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

/* main */ 
#fp-nav-custom {position:fixed;left:clamp(15px, calc(50/ var(--inner) * 100vw ),50px);top:50%;transform:translateY(-50%);z-index:100;}
#fp-nav-custom ul {background:#eaf6fb; border-radius:32px; width:26px; padding:var(--size30) 0; display:flex;flex-direction:column;align-items:center;gap:var(--size30); transition:0.8s all ease;}
#fp-nav-custom li {width:100%;display:flex;align-items:center;justify-content:center;}
#fp-nav-custom li a {display:flex; position:relative; align-items:center;width:auto;padding:0;background:none;border:none;text-decoration:none;color:transparent;}
#fp-nav-custom li .dot {display:inline-block; width:6px; height:6px; border-radius:50%;background:#fff; transition:background 0.2s;}
#fp-nav-custom li.active .dot {background:var(--color-primary);}
#fp-nav-custom li .label {position:absolute; display:none; left:28px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--color-primary); white-space:nowrap;}
#fp-nav-custom li.active .label {display:inline;}
#fp-nav-custom li:last-child {display:none;}

.special-style #fp-nav-custom ul {background:rgba(255,255,255,0.07);}
.special-style .sitelogo a {background-image:url('/images/common/logo2.png');}
.special-style .btn-all-menu {background:#fff;}
.special-style .btn-all-menu span {background:#222;}
.special-style .btn-all-menu span:before,
.special-style .btn-all-menu span:after {background:#222;}
.special-style .btn-m-menu  {background:#fff;}
.special-style .btn-m-menu span,
.special-style .btn-m-menu span:before,
.special-style .btn-m-menu span:after {background:#222;}


.main-sec {background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}
.main-sec.bg1 {background-image:url('/images/main/sec1-bg.jpg');}
.main-sec.bg2 {background-image:url('/images/main/sec2-bg.jpg');}
.main-sec.bg3 {background-image:url('/images/main/sec3-bg.jpg'); background-size:contain; background-color:#0a0218; background-position:bottom center;}
.main-sec.bg4 {background-image:url('/images/main/sec4-bg.jpg');}

.main-title-wrap .fp-tableCell {vertical-align:top;}
.main-title-wrap .wrap {padding-top:19vh;}

.main-title {text-align:center;}
.main-title .img {margin-bottom:var(--size30);}
.main-title p {margin-bottom:var(--size40); font-size:clamp(28px, calc(56/ var(--inner) * 100vw ),56px); font-weight:800; color:#2c2c2c; line-height:1.2;}
.main-title .btn a {display:inline-block; padding:1.2em 2.7em; background:var(--color-primary); border-radius:100vh; font-size:var(--font-size-18); font-weight:600; line-height:1; color:#fff;}

.main-sec .contain {max-width:1460px;}

.main-sec3 .img {margin-bottom:var(--size30);}
.main-sec3 .tit {margin-bottom:var(--size40); font-size:clamp(21px, calc(56/ var(--inner) * 100vw ),56px); font-weight:800; color:#fff; line-height:1.2;}
.main-sec3 .txt {margin-bottom:var(--size40); font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); color:#fff; line-height:1.7;}
.main-sec3 .txt:last-child {margin-bottom:0;}
.main-sec3 .btn {margin-bottom:var(--size70);}
.main-sec3 .btn a {display:inline-block; padding:1.2em 2.7em; border:1px solid rgba(255,255,255,0.24); border-radius:100vh; font-size:var(--font-size-18); font-weight:600; line-height:1; color:#fff;}
.main-sec3 .btn a:hover {background:var(--color-primary); border-color:var(--color-primary);}

.main-sec4 .tt {position:relative; padding-top:1.16em;font-size:clamp(21px, calc(56/ var(--inner) * 100vw ),56px); font-weight:800; color:#2c2c2c; line-height:1.2;}
.main-sec4 .tt:before {content:''; position:absolute; left:0; top:0; width:0.52em; height:0.52em; border:0.13em solid var(--color-primary); border-radius:100%;}
.service-slider .slick-list {overflow:visible; margin:0 calc(0px - var(--size20));}
.service-slider .slick-slide {margin:var(--size20);}
.service-slider .item {padding-top:var(--size40);}
.service-slider .inner {display:flex; align-items:center; gap:10px; padding:var(--size50); border-radius:1.5em; background:#fff;}
.service-slider .inner .tit {flex:1 1 auto; min-width:0; width:1%; text-align:right; font-size:var(--font-size-24); font-weight:700; line-height:1.2; color:#2c2c2c; transition:0.2s all ease;}
.service-slider .inner .img {width:100px; height:100px; background:#eaf6fb; border-radius:100%; transition:0.2s all ease;}

.service-arrows {display:flex; justify-content:flex-end; position:relative; margin-top:calc(0px - var(--btn-size)); margin-bottom:clamp(20px, calc(100/ var(--inner) * 100vw ),100px);}
.service-arrows .slick-arrow {display:block; width:var(--btn-size); height:var(--btn-size); border-radius:100vh; border:1px solid #eee; background-color:#fff; background-repeat:no-repeat; background-position:50% 50%; background-size:16.666% auto; text-indent:-999em; overflow:hidden; transition:0.2s all ease;}
.service-arrows .slick-arrow:hover { background-color:var(--color-primary);}
.service-arrows .slick-prev {margin-right:12px; background-image:url('/images/main/sld-prev.png');}
.service-arrows .slick-next {background-image:url('/images/main/sld-next.png');}
.service-arrows .slick-prev:hover {background-image:url('/images/main/sld-prev-white.png');}
.service-arrows .slick-next:hover {background-image:url('/images/main/sld-next-white.png');}

.service-slider .inner:hover {transform:translateY(calc(0px - var(--size40))); background:var(--color-primary);}
.service-slider .inner:hover .tit {color:#fff;}
.service-slider .inner:hover .img {background:#fff;}

/* sub */
.sub-visual .bg {position:relative;}
.sub-visual .img {margin:0 auto; text-align:center;}
.sub-visual .content {position:absolute; width:100%; left:50%; bottom:var(--size80); z-index:1; max-width:1660px; transform:translateX(-50%); padding:0 var(--container-space);}
.sub-visual .content h2 {font-size:clamp(24px, calc(48/ var(--inner) * 100vw ),48px); font-weight:800; line-height:1.2em;  color:#fff; opacity:0; transform:translateY(20px); transition:0.8s all 0.3s ease;}
.sub-visual.load .content h2 {opacity:1; transform:translateY(0);}
 
#lnb {position:relative; transition:0.8s all 0.5s ease;}
#lnb:before {content:''; position:absolute; left:50%; bottom:0; width:1820px; height:1px; background:#eee; z-index:1; transform:translateX(-50%);}

.lnb {max-width:1660px; margin:0 auto; padding:0 var(--container-space);}
.lnb ul {display:flex;}
.lnb ul li {position:relative; width:auto; margin-right:var(--size60);}
.lnb ul li:last-child {margin-right:0;}
.lnb ul li a {display:block; position:relative; padding:2.78em 0 2.22em; font-size:var(--font-size-18); line-height:1.2em;}
.lnb ul li.active a:before {content:''; position:absolute; left:0; bottom:0; width:100%; height:0.22em; background:var(--color-primary);}
.lnb ul li.active a {color:var(--color-primary);}

.sub-title {padding:clamp(40px, calc(100/ var(--inner) * 100vw ),120px) var(--container-space); margin:0 auto; max-width:1660px;}
.sub-title + .page-menu {padding-top:calc(0px - var(--size60)); padding-bottom:var(--size70);}
.sub-title h1 {position:relative; color:#242424; font-size:clamp(24px, calc(64/ var(--inner) * 100vw ),64px); line-height:1.2em; font-weight:700; }
.sub-title h1 .dot {display:inline-block; vertical-align:super; margin:0 0 0.1em var(--size20); width:0.25em; height:0.25em; background:var(--color-primary); border-radius:100%;}
.sub-title p {margin-top:var(--size40); font-size:clamp(14px, calc(20/ var(--inner) * 100vw ),20px); line-height:1.5; color:#242424;}

.sub-title.type2 {text-align:center; margin-bottom:var(--size80);}
.sub-title.type2 h1 {font-size:clamp(24px, calc(42/ var(--inner) * 100vw ),42px);}

.page-menu {width:100%; max-width:1660px; margin:0 auto; padding:0 var(--container-space);}
.page-menu ul {display:flex; gap:10px; flex-wrap:wrap;}
.page-menu ul li a {display:block; padding:1.1em 1.6em; background:#f6f6f6; border-radius:0.56em; font-size:var(--font-size-18); font-weight:700; line-height:1; color:#ccc;}
.page-menu ul li.active a,
.page-menu ul li a:hover {background:var(--color-primary); color:#fff;}


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

.real-cont {padding-bottom:clamp(40px, calc(200/ var(--inner) * 100vw ),200px);}
.real-cont.none {padding-bottom:0;}

/* familysite */
.familysite-box {margin-top:var(--size40);}
.familysite-box .familysite {position:relative;}
.familysite>a {display:block; max-width:200px; text-decoration:none; padding-left:20px; font-size:var(--font-size-16); font-weight:600; line-height:48px; color:#505050; overflow:hidden; white-space:nowrap; cursor:pointer; z-index:2; position:relative; background:#f4f4f4; border-radius:10px;}
.familysite>a:before {content:""; position:absolute; width:9px; height:9px; border-right:2px solid #505050; border-top:2px solid #505050; transform:rotate(-45deg); right:20px; top:50%; margin-top:-5px; transition:0.2s all ease;}
.familysite.active>a:before {transform:rotate(135deg); margin-top:-8px;}
.familysite ul {display:none; background:#2c2c2c; position:absolute; left:0; max-width:200px; padding:14px 20px; bottom:58px; width:100%; z-index:10; border-radius:10px; max-height:129px; overflow:auto !important; background:#2c2c2c;}
.familysite ul li a {display:block; text-decoration:none; padding:7px 0; font-size:var(--font-size-15); color:#a8a8a8; line-height:1.4;}
.familysite ul li a:hover {color:#fff;}


/* footer */
#footer {position:relative; padding:clamp(20px, calc(100/ var(--inner) * 100vw ),100px) 0; line-height:1.8em; border-top: 1px solid #ddd;}
#footer .contain {max-width:1660px;}

.f-menu {margin-bottom:clamp(20px, calc(75/ var(--inner) * 100vw ),75px);}
.f-menu ul {display:flex;}
.f-menu ul li {position:relative; margin-right:var(--size40); font-size:var(--font-size-15); line-height:1.2;}
.f-menu ul li:last-child {margin-right:0;}

#footer address {font-style:normal;}
#footer address strong {display:block; margin-bottom:1em; font-weight:700; font-size:1.13em; line-height:1; color:#2c2c2c;}
#footer address .c-gray {display:inline-block; margin-right:0.81em; color:#a8a8a8;}
#footer address .dot {display:inline-block; vertical-align:middle; width:0.25em; height:0.25em; background:#ccc; margin:0 1em; border-radius:100%;}

#footer .copyright {position:absolute; right:var(--container-space); bottom:0; font-size:0.94em; color:#a8a8a8;}
#footer .copyright a {display:inline-block;color:#f1f1f1; margin-right:0.8em;}
.scroll-top {position:absolute; right:var(--container-space); top:0;}