@charset "utf-8";

/*
 * File : layout.css
 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) HEADER
 * 03) FOOTER
 * 04) CONTAINER
 * 05) PAGE
 * 06) 
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
 html { font-size: 6.25%; }
 html.safari.desktop { font-size: .06215040397762585vw; }
 
 body {position:relative; overflow-x: hidden;overflow-y: scroll;font-family: 'Pretendard', sans-serif;font-size: 16rem;word-break: keep-all;color: #232527;letter-spacing: -0.02em;}
 a {color: #232527;text-decoration: none;}
 [lang="en"] { font-family: 'Montserrat', sans-serif; letter-spacing:0;}

/*   *:focus { outline: 3px solid #000; outline-offset: 2px;} */

 /* WRAP */
 .wrap { max-width: 1440rem; margin: 0 auto; position: relative; }
 .wrap-middle { max-width: 860rem; margin: 0 auto; position: relative; }
 .wrap-narrow { max-width: 640rem; margin: 0 auto; position: relative; }

 /* QUICK MENU */
 .global-quick-menu {max-width:120rem;position:absolute;top: 882rem;left:40rem;z-index: 100;}
 .global-quick-menu__item {text-align:center;background:#fff;padding:15rem 13rem;border:1rem solid #F3F3F3;box-shadow: 0 3rem 6rem rgba(126,126,126,0.15);transition: background .2s;}
 .global-quick-menu__item:first-child {border-radius:20rem 0 0 0;}
 .global-quick-menu__item:last-child {border-radius:0 0 20rem 0;}
 .global-quick-menu__item + .global-quick-menu__item {margin-top:8rem;}
 .global-quick-menu__item p {font-size:15rem;transition: color .3s;}
 .global-quick-menu__icon {display:block;width:88rem; height:71rem; background-repeat:no-repeat; background-position:center;}
 .global-quick-menu__item--join .global-quick-menu__icon {background-image:url(../images/layout/quick-join.png);}
 .global-quick-menu__item--commu .global-quick-menu__icon {background-image:url(../images/layout/quick-commu.png);}
 .global-quick-menu__item--response .global-quick-menu__icon {background-image:url(../images/layout/quick-response.png);}
 .global-quick-menu__link {display:inline-block;margin-top:8rem;font-size:12rem;color:#fff;padding:5rem 14rem 5rem 16rem;background: transparent linear-gradient(104deg, #72BE59 0%, #009E9A 48%, #004EA1 100%) 0% 0% no-repeat padding-box;border-radius: 14rem;transition: all .2s;}
 .global-quick-menu__link span {position:relative;padding-right:15rem;}
 .global-quick-menu__link span:after {font-family:'academy';content:'\e913';font-style:normal;font-size: 16rem;color:#fff;position:absolute;right:0;top:50%;transform:translateY(-50%);transition: color .2s;}
 .global-quick-menu__item:hover {background: transparent linear-gradient(106deg, #72BE59 0%, #009E9A 53%, #004EA1 100%) 0% 0% no-repeat padding-box; transition: background .2s;}
 .global-quick-menu__item:hover p {color:#fff;}
 .global-quick-menu__item:hover a {background:#fff;color:#000;}
 .global-quick-menu__item:hover a span:after {color:#000;}

/*  body:not(.page-home) .global-quick-menu {top:243rem;} */
 .global-quick-menu.is-fixed {position:fixed;top: 190rem;}
 .global-quick-menu.is-clear {position:absolute; top:auto; bottom:451rem;}
 body.page-home .global-quick-menu.is-fixed {top: 209rem;}
 body.page-home .global-quick-menu.is-clear {position:absolute; top:auto; bottom: 451rem;}


 /* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%;position: fixed;top: 0;left: 0;background:#fff;border-bottom: 1rem solid #E6E6E6;-webkit-transition: border .3s, background .4s;transition: border .3s, background .4s;z-index: 500;}


/* LOGO */
.header-logo {flex-shrink: 0;width: 188rem;height: 26rem;}
.header-logo a {display: block;width: 100%;height: 100%;}
.header-logo a svg, .header-logo a img { display: block; width: 100%; height: 100%; }

/* MENU */
.header-menu__inner {display:flex;align-items: center;}
.global-menu-nav__wrap {margin-left: 49rem;}
.global-menu-util {margin-left:auto;display: flex;align-items: center;margin-right: -4rem;}
.member-menu {display:flex;align-items: center;margin-right: 25rem;}
.member-menu li {position:relative;}
.member-menu li + li:before {width:1rem;height:10rem;background:#BEBEBE;position: absolute;left:0;top:50%;transform:translateY(-50%);content:'';display:block;}
.member-menu li a {padding:0 20rem; font-size:16rem; color:#777;}
.global-bluewave {display:block;}
.global-bluewave img {display:block;}

.menu-container { display: block; width: 100%; position: relative; font-size: 0; line-height: 1; text-align: center; z-index: 1; }
#menu {display: flex; align-items: center;font-size: 0;}
#menu a { display: block; line-height: 1.66; }

/* 1DEPTH */
#menu {}
#menu > li { display: inline-block; vertical-align: middle; text-align:center; position: relative; }
#menu > li > a {color: #000;padding: 28rem 13rem;position: relative;font-size: 20rem;font-weight: 400;-webkit-transition: color .3s;transition: color .3s;}
#menu > li > a > span {display: block;position: relative;padding: 0 8rem;}
#menu > li > a > span:after {content: '';display: block;width: 100%;height: 3rem;position: absolute;bottom: -10rem;left: 0;background: #004EA1;opacity: 0;transition: opacity .3s;}
#menu > li.menu-children--open > a { color: #004EA1; }
html.desktop #header.header--menu-hover #menu > li.menu-children--open > a {color: #B49468; }
html.desktop #menu > li > a:hover { color: #004EA1; }
html.desktop #menu > li > a:hover > span:after {opacity:1}
#menu > li.current-menu > a {color: #004EA1;font-weight:600;}
#menu > li.current-menu > a > span:before,
#menu > li.current-menu > a > span:after {opacity:1;}

/* 2DEPTH */
#menu .sub-menu {opacity: 0;visibility: hidden;position: absolute;left: 50%;top: calc(100% - 2rem);text-align: center;background: #fff; box-shadow: 0rem 3rem 6rem rgb(0 0 0 / 5%);-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;overflow: hidden;-webkit-transition: opacity .3s cubic-bezier(0.22, 0.61, 0.36, 1);transition: opacity .3s cubic-bezier(0.22, 0.61, 0.36, 1);}
#menu .sub-menu:before {width:0;height:2rem;background: #B49468;content:'';display:block;position:absolute;top: 0;left: 50%;transform: translateX(-50%);transition:width .3s}
#menu > li.menu-children--open > .sub-menu { opacity: 1; visibility: visible; }
#menu > li.menu-children--open > .sub-menu:before {width:100%;}
#menu .sub-menu > li { display: block; }
#menu .sub-menu > li > a {display: block;padding: 8rem 15rem 8rem;font-size: 14rem;font-weight: 300;white-space: nowrap;color: #505050;}
#menu .sub-menu > li > a > span { display: inline-block; position: relative; }
#menu .sub-menu > li > a > span:after { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 1rem; background: #666; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.desktop #menu .sub-menu > li > a:hover {font-weight:400; color:#fff; background:#C1A06D;}
html.desktop #menu .sub-menu > li > a:hover > span:after { -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
#menu .sub-menu > li.current-menu > a { color: #fff; background:#C1A06D;}

/* GLOBAL ALL MENU */
.global-all-menu {display: block;position: relative;background:none;border:none;width: 32rem;height: 32rem;margin-top: -1rem;padding: 0;z-index: 550;cursor: pointer;-webkit-transition: top .3s, transform .3s;transition: top .3s, transform .3s;}
.global-all-menu-btn {background: #000;content: '';display: block;height: 2rem;position: absolute;left: 50%;top: 50%;transition: background ease .3s, top ease .3s .3s, transform ease .3s;width: 24rem;margin: 0 auto;transform: translate(-50%, -50%);}
.global-all-menu-btn:before {top: -7rem;}
.global-all-menu-btn:after {top: 7rem;}
.global-all-menu-btn:before, .global-all-menu-btn:after {background: #000;content: '';display: block;height: 2rem;position: absolute;transition: background ease .3s, top ease .3s .3s, transform ease .3s;width: 100%;}
.global-all-menu.active .global-all-menu-btn {background:transparent;}
.global-all-menu.active .global-all-menu-btn:before, .global-all-menu.active .global-all-menu-btn:after { top: 0; transition: top ease .3s, transform ease .3s .3s;}
.global-all-menu.active .global-all-menu-btn:before { transform: rotate(45deg);}
.global-all-menu.active .global-all-menu-btn:after { transform: rotate(-45deg);}

.menu-bg {width:100%;height:100%;}
.menu-bg__title {position: absolute;left:0;width: 22.3%;height:100%;background:#009E9A;overflow: hidden;}
.menu-bg__title:before {content:'';display:block;position:absolute;right: -15rem;bottom: 0;width: 289rem;height: 311rem;background:url(../images/layout/header-bg-object.svg) no-repeat center;opacity: 0.45;}
.menu-bg__title p {font-size:32rem;font-weight:600;line-height: 1.4;color:#fff;padding:55rem 60rem;}

.all-menu-popup {opacity:0; visibility:hidden; width: 100%;position: fixed;top: 149rem;left: 0;right: 0;background:#fff;border-top: 1rem solid #e6e6e6;box-shadow: 0 10rem 12rem rgba(0, 0, 0, .12);z-index: 9999;}
.all-menu__list-wrap {padding-left: 233rem;padding-bottom: 30rem;}
.all-menu__list {font-size:0;}
.all-menu__list > li {display: inline-block;vertical-align: top;width: calc(25% - 48rem);max-width: 240rem;margin: 20rem 24rem;text-align: left;}
.all-menu__list > li > a {display: block;padding: 15rem 0;font-size: 17rem;white-space: nowrap;color: #000;border-bottom: 1rem solid #b1b1b1;}
.all-menu__list > li > a > span { display: inline-block; position: relative; }
.all-menu__list > li > a > span:after { content: ''; display: block; width: 100%; height: 1rem; position: absolute; left: 0; bottom: 1rem; background: #666; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); -webkit-transition: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .4s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform .4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.all-menu__list .all-menu__sub-menu {margin-top:16rem; margin-left:5rem;}
.all-menu__list .all-menu__sub-menu > li {position:relative;}
.all-menu__list .all-menu__sub-menu > li + li {margin-top: 8rem;}
.all-menu__list .all-menu__sub-menu > li > a {display:block;font-size:15rem;}
.all-menu__list .all-menu__sub-menu > li > ul {margin-top: 5rem;margin-left:5rem;margin-bottom: 14rem;}
.all-menu__list .all-menu__sub-menu > li > ul > li {position:relative; padding-left:8rem;}
.all-menu__list .all-menu__sub-menu > li > ul > li:before {width:4rem; height:1rem; background:#767676; content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.all-menu__list .all-menu__sub-menu > li > ul > li + li {margin-top: 8rem;}
.all-menu__list .all-menu__sub-menu > li > ul > li > a {display:block;font-size:14rem; color:#767676;}
.mob-member {display:none;}
.other-menu {display:none;margin-top:35rem;margin-left: auto;}
.other-menu li + li {margin-top:10rem;}
.other-menu li a {display:block;width: 280rem;padding:15rem 20rem;font-size:16rem;border:1rem solid #004EA1;border-radius:8rem;}
.other-menu li span {display: block;position: relative;padding-left: 32rem;}
.other-menu li span:before {content:'';display:block;background-repeat:no-repeat;background-position: center;width: 25rem;height: 20rem;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.other-menu li span:after {font-family:'academy';content:'\e913';font-weight:normal;font-size: 20rem;display:block;background-repeat:no-repeat;background-position: center;position: absolute;right: 0;top: 50%;transform: translateY(-50%);} 
.other-menu li.link-home span:before {background-image:url(../images/icon/icon-symbol.svg);background-size: 16rem auto;}
html.desktop .all-menu__list > li:hover > a {color:#009E9A; font-weight:500; border-bottom-color:#009E9A;}
html.desktop .all-menu__list .all-menu__sub-menu > li > a:hover {font-weight:500; text-decoration:underline;}
html.desktop .all-menu__list .all-menu__sub-menu > li > ul > li > a:hover {font-weight:500; text-decoration:underline;}


body.all-menu-open .all-menu-popup {opacity:1; visibility:visible; }
body.all-menu-open .all-menu-popup .all-menu-bg {opacity:1; visibility:visible; }
body.all-menu-open .menu-overlay { opacity:1;-webkit-transition: opacity .3s;transition: opacity .3s; top: 0; left: 0; right: 0;  height: 100vh;}


/* MOBILE */
#small-menu-btn, #small-menu-container, .small-menu__top { display: none; }

/* menu hover */

/* TOP BANNER */
.top-banner {position: relative;width:100%;height: 60rem;background:#004EA1;font-size: 18rem;color: #fff;text-align: center;display: flex;align-items: center;justify-content: center;z-index:10;}
.top-banner a { display: flex; align-items: center; color: #fff; height: 100%; justify-content: center;}

.blinking{ -webkit-animation: blink 0.5s ease-in-out infinite alternate; -moz-animation: blink 0.5s ease-in-out infinite alternate; animation: blink 0.5s ease-in-out infinite alternate;}
@-webkit-keyframes blink{ 0% {opacity: 0;} 100% {opacity: 1;} }
@-moz-keyframes blink{ 0% {opacity: 0;} 100% {opacity: 1;} }
@keyframes blink{ 0% {opacity: 0;} 100% {opacity: 1;} }

/* GLOBAL SEARCH */
.global-search {display:none;position:relative;background:none;border:none;padding: 10rem;margin: 0rem 5rem 0 19rem;cursor:pointer;}
.global-search:before {font-family:'academy';content:'\e912';font-style:normal;font-size: 21rem;color:#000;}

#search-popup {display: none; }


/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {width: 100%;position: relative;}
.footer-top {padding: 18rem 0 20rem;border-top:1rem solid #e6e6e6;border-bottom:1rem solid #e6e6e6; background:#fff;}
.footer-top .wrap {display:flex;}
.footer-menu {display:flex;align-items: center;}
.footer-menu li a {position: relative;padding: 0 36rem;display: block;color: #000;}
.footer-menu li:first-child a {padding-left:0}
.footer-sns {margin-left:auto;display: flex;}
.footer-sns__mob {display:none;}
.footer-sns__item {position:relative;width: 34rem;height: 34rem;border-radius:50%;}
.footer-sns__item + .footer-sns__item {margin-left: 16rem;}
.footer-sns__item a {display:block;width: 100%;height: 100%; }
.footer-sns__item.sns-blog {background-color: #32A94A;}
.footer-sns__item.sns-facebook {background-color: #576CA7;} 
.footer-sns__item.sns-twitter {background-color: #6BAFF8;} 
.footer-sns__item.sns-instagram {background:transparent linear-gradient(135deg, #FAE100 0%, #FCB720 15%, #FF7950 30%, #FF1C74 50%, #6C1CD1 100%) 0% 0% no-repeat padding-box;}
.footer-sns__item.sns-kakao {background-color: #EED63D;}
.footer-sns__item.sns-youtube {background-color: #FF0000;}
.footer-sns__item.sns-blog {background-color: #32A94A;}
.footer-sns__item.sns-daily-minjoo{border:1rem solid #f5f5f5;}
.footer-sns__item a:before {font-family:'academy';font-style:normal;font-size: 18rem;color: #fff;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.footer-sns__item.sns-blog a:before {content:'\e915';}
.footer-sns__item.sns-facebook a:before {content:'\e919';}
.footer-sns__item.sns-twitter a:before {content:'\e91f';}
.footer-sns__item.sns-instagram a:before {content:'\e917';}
.footer-sns__item.sns-kakao a:before {content:'\e918'; color:#5D5050}
.footer-sns__item.sns-youtube a:before {content:'\e916';}
.footer-sns__item.sns-blog a:before {content:'\e915'; font-size:22rem;}
.footer-sns__item.sns-daily-minjoo a:before {content:'';background: url(../images/layout/daily-minjoo.png) no-repeat; background-size:100% 100%; width: 100%;height: 100%; border-radius: 50%;}

.footer-bottom {padding:65rem 0;background:#FBFBFB;}
.footer-bottom__inner {display:flex;}
.footer-info {display:flex;}
.footer-info__text {font-size:16rem;color:#7a7a7a;margin-left: 42rem;}
.footer-info__text ul:after {clear:both;content:'';display: block;}
.footer-info__text .info-list {font-size:0;}
.footer-info__text .info-list li {display:inline-block;margin-right: 14rem;padding-right: 14rem; font-size:16rem; position:relative;}
.footer-info__text .info-list li + li {margin-top: 4rem;}
.footer-info__text .info-list li:nth-child(1) {display:block;}
.footer-info__text .info-list li:nth-child(3) {width:50%;}
.footer-info__text .info-list li:nth-child(5) {width:50%}
.footer-info__text .info-list li:after {width:1rem;height:8rem;background: #707070;content:'';display:block;position:absolute;top:50%;right:0;transform:translateY(-50%);}
.footer-info__text .info-list li:nth-child(odd):after {display:none;}
.footer-copyright {margin-top: 20rem;}
.footer-logo {width:188rem;height:30rem;}
.footer-logo img {display:block; max-width:100%;}

.footer-content {margin-left:auto;}

/* FOOTER FAMILY */
.footer-family {display:flex;margin: 0 -9rem;}
.footer-family__select {flex: 1;position: relative;width: 220rem;margin: 0 9rem;}
.footer-select__title {-webkit-transition: 0.3s;transition: 0.3s;cursor: pointer;background: #fff;border:none;padding: 12rem 20rem 13rem;padding-right: 30rem;border: 1rem solid #E6E6E6;border-radius: 30rem;width: 100%;font-size: 14rem;color: #000;text-align: left;position:relative;display: block;}
.footer-select__title span {position: relative;width: auto;line-height: 30rem;display: block;position: absolute;right: 0;top: 50%;margin-top: -15rem;}
.footer-select__title-button:after {position:absolute;right: 15rem;font-family: 'academy';content: '\e91d';font-size: 16rem;color: #000;border: none;-webkit-transition: -webkit-transform 0.4s;transition: -webkit-transform 0.4s;transition: transform 0.4s;transition: transform 0.4s, -webkit-transform 0.4s;will-change: transform;}
.footer-family__select .scrollbar-inner {padding-right:0;}
.footer-select__box {position: absolute;bottom: 50rem;left: 0;font-size: 14rem;width: 100%;background: #fff;border: 1rem solid #ddd;border-radius: 20rem;opacity:0;visibility:hidden;z-index: 100;-webkit-transition:opacity .3s, visibility .3s;transition:opacity .3s, visibility .3s;}
.footer-select__box .nicescroll-rails.nicescroll-rails-vr {opacity: 0 !important;}
.footer-select__box ul li a {-webkit-transition: 0.3s;transition:0.3s;padding: 8rem 14rem;display: block;color: #666;font-size:15rem;line-height: 1;}
.footer-select__box ul li:first-child a { padding-top: 0;}
.footer-family__select.footer-select--open .footer-select__title-button:after{-webkit-transform: rotate(-180deg);-ms-transform: rotate(-180deg);transform: rotate(-180deg);}
.footer-family__select.footer-select--open .footer-select__box {opacity:1; visibility:visible;}
.footer-family .scroll-wrapper {height: 20vh;}
.footer-family .scroll-wrapper > .scroll-content {padding: 20rem 0 10rem;}

html.desktop .footer-select__box ul li a:hover { color:#222;}

.footer-cs-qr {display:flex;margin-top: 34rem;}
.footer-cs-qr > div {flex: 1;width: 50%;margin: 0 9rem;}
.footer-cs > p {font-size: 12rem;}
.footer-cs > b {font-size: 28rem;font-weight: 600;margin-top: 4rem;display: block;}
.footer-cs > span {display:block; margin-top:5rem; font-size: 12rem;}
.footer-cs > a {display:block; margin-top:5rem; font-size: 12rem;}
.footer-cs > a span {position:relative;padding-right: 17rem;}
.footer-cs > a span:after {font-family: 'academy';content: '\e91c';font-size: 16rem;font-weight: normal;position: absolute;top:50%;right: 0;transform: translateY(-50%);}
.footer-cs-qr > div.footer-qr {margin-left: 30rem; margin-right: 0;}
.footer-qr a {display:flex;align-items: center;}
.footer-qr img {max-width:52rem;}
.footer-qr p {margin-left:8rem;}
.footer-qr p > b { display:block; font-size:15rem;}
.footer-qr p > span {display:block;font-size:13rem;color: #505050;}



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container {  padding-top:150rem; overflow:hidden;}