@charset "utf-8";

/*
 * File : layout.css
 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) HEADER
 * 03) FOOTER
 * 04) CONTAINER
 * 05) PAGE
 * 06) 
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
 html { font-size: 6.25%; overflow-x:hidden;}
 html.safari.desktop { font-size: .06215040397762585vw; }
 
 body {position:relative; overflow-x: hidden;font-family: 'Noto-sans', sans-serif;font-size: 16rem;word-break: keep-all;color: #111;letter-spacing: -0.02em;}
 a {color: #000;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: 1280rem; margin: 0 auto; position: relative; }
 .page-home .wrap { max-width: 1440rem; }
 .wrap-middle { max-width: 860rem; margin: 0 auto; position: relative; }
 .wrap-narrow { max-width: 640rem; margin: 0 auto; position: relative; }


 /* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%;background:#fff;border-bottom: 1rem solid #E2E2E2;-webkit-transition: border .3s, background .4s;transition: border .3s, background .4s;z-index: 500;}

/* LOGO */
.header-logo {position: absolute;left: 0;top: 50%;width: 160rem;height: 30rem;transform: translateY(-50%);}
.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 {padding:20rem 0; height:100%;}
.header-menu__inner {height:100%;}
.global-menu-nav__wrap {display: none; }
.global-menu-util {position: relative; height:100%;}
.global-menu-util ul {display:flex;margin-left: auto;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
.global-menu-util li {position:relative;}
.global-menu-util li + li {margin-left:16rem; padding-left:16rem;}
.global-menu-util li + li:before {width:1rem; height:10rem; background:#C9C9C9; content:''; display:block; position:absolute; left:0; top:50%; margin-top:-3rem;}
.global-menu-util li a {color:#777; font-size:14rem;}


.global-search {position:relative;background:none;border:none;padding: 10rem;margin: 0rem 5rem 0 19rem;cursor:pointer;}
.global-search:before {font-family:'bluewave';content:'\e914';font-style:normal;font-size: 21rem;color:#000;}

.global-all-menu {display: block;position: relative;background:none;border:none;padding: 0;padding-left: 30rem; margin-right:30rem; font-size:18rem;color: #232527;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: 0;top: 50%;transition: background ease .3s, top ease .3s .3s, transform ease .3s;width: 18rem;margin: 0 auto;transform: translateY(-50%);}
.global-all-menu-btn:before {top: -6rem;}
.global-all-menu-btn:after {top: 6rem;}
.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);}

.all-menu-popup {opacity: 0; visibility: hidden; position:fixed;}
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;}


.other-menu {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:'bluewave';content:'\e93d';font-weight:normal;font-size: 10rem;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(/bluewave/assets/images/icon/icon-symbol.svg);background-size: 16rem auto;}
.other-menu li.link-survey span:before {background-image:url(/bluewave/assets/images/icon/icon-survey.svg);background-size: 100% auto;}
.other-menu li.link-petition span:before {background-image:url(/bluewave/assets/images/icon/icon-petition.svg);}


/* 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 {position:relative;background:none;border:none;padding: 10rem;margin: 0rem 5rem 0 19rem;cursor:pointer;}
.global-search:before {font-family:'bluewave';content:'\e914';font-style:normal;font-size: 21rem;color:#000;}

#search-popup {display: none; width: 100%;padding-left: 90rem;padding-right: 90rem;position: fixed;top: 150rem;left: 0;right: 0;background:#fff;box-shadow: 0 10rem 12rem rgba(0, 0, 0, .12);z-index: 9999;}
#search-popup .wrap {background: url(../images/layout/search-bg.png) no-repeat right bottom;}
.search-popup__inner {width: 100%;max-width: 600rem;height: 100%;margin:0 auto;padding: 40rem 0 40rem 0;position: relative;}
.global-search-form {width: 420rem;margin: 0 auto;position: relative;}
.global-search-form__input {width: 100%;height: 50rem;position: relative;background: #F5F5F5;border-radius: 30rem;}
.page-home  .global-search-form__input {background:#fff;}
.global-search-field {font-size: 16rem;line-height: 1;color: #222;}
.global-search-form input.global-search-field {display: block;width: 100%;height: 100%;padding: 0 50rem 0 28rem;position: relative;border: none;background: transparent;}
.global-search-field::-ms-clear {display: none;width: 0;height: 0;}
.global-search-submit {height: 100%;width: 70rem;padding: 0;position: absolute;right: 0;top: 0;background: none;border: none;cursor: pointer;}
.global-search-submit:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'bluewave';content: '\e914';font-size: 21rem;line-height: 52rem;font-weight: normal;text-align: center;color: #000;-webkit-transition: color 300ms;transition: color 300ms;-webkit-transition-delay: 0ms;transition-delay: 0ms;}
.search-popup__close {background:none;border:none;padding: 0;width: 50rem;height: 50rem;position: absolute;top: 10rem;right: -5rem;opacity: 1;cursor:pointer;-webkit-transition: top 300ms;transition: top 300ms;}
.search-popup__close:after {display: block;width: 100%;height: 100%;font-family: 'bluewave';content: '\e920';font-size: 21rem;font-weight: normal;text-align: center;line-height: 50rem;color: #000;}


/* **************************************** *
 * 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:'bluewave';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: 'bluewave';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: 'bluewave';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
 * **************************************** */
#container {padding-top:80rem; padding-bottom:160rem;}

