@charset "utf-8";

/*
 * File       : rwd-layout.css
 *
 * SUMMARY:
 * 01) 1680px
 * 02) 1480px
 * 03) 1023px
 * 04) 860px
 * 05) 540px
 */

/* **************************************** *
 * 1780px
 * **************************************** */
@media (max-width: 1780px){

    /* HEADER */
    .all-menu__list-wrap { padding-left: 19%;}
    body.page-home .all-menu__list-wrap { padding-left: 19%;}
}



/* **************************************** *
 * 1680px
 * **************************************** */
@media (max-width: 1680px){

    /* LAYOUT */
    .wrap, .page-home .wrap {max-width: inherit;margin: 0 60rem;}

    /* HEADER */
    .all-menu__list-wrap {padding-left:23%;}
    body.page-home .all-menu__list-wrap { padding-left: 23%;}
   /* .page-home #menu > li > a {padding-left:18rem; padding-right:18rem;} */
    .page-home #menu > li > a {padding-left:18rem; padding-right:5rem;}

    
    

    
}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    html { font-size: 0.06756756756756757vw; }

    /* LAYOUT */
    .other-menu li a {width:240rem;}

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    html { font-size: 0.09775171065493645vw; }

    /* LAYOUT */
    .wrap, .wrap-middle, .wrap-narrow,
    .page-home .wrap { margin: 0 30rem;  max-width: inherit; }
    #container {padding-top:10rem;}

    /* HEADER */
    body.all-menu-open #header, body.search-open #header, body.popup-open #header { -webkit-transform: none !important; -ms-transform: none !important; transform: none !important;}

    .top-banner {display:none;}
    header:not(.home-header) .header-logo {display:none;}
    header:not(.home-header) .btn-goback {display:block;width: 30rem;height: 30rem;position: relative;}
    header:not(.home-header) .btn-goback button {border:none;background:none;display: block;width: 100%;height: 100%;padding: 0;}
    header:not(.home-header) .btn-goback:before {font-family:'bluewave';content:'\e908';font-style:normal;font-size: 20rem;color:#000;position:absolute;left: 50%;top:50%;transform: translate(-50%, -50%);}
    body.dark-mode header:not(.home-header) .btn-goback:before {color:#fff;}
    body.all-menu-open header:not(.home-header) .header-logo {display:block;}
    body.all-menu-open header:not(.home-header) .btn-goback {display:none;}

    #header {position:fixed;height:80rem; padding-top:0;}
    .header-menu {padding-top:0;}
    .header-logo {width: 150rem;height: 28rem;top:50%;transform: translateY(-50%);}
    .global-menu-nav__wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-top: 0;}
    .global-all-menu {margin: 0;width: 32rem;height: 32rem;}
    .global-all-menu span {position: absolute; clip: rect(1rem, 1rem, 1rem, 1rem); -webkit-clip-path: inset(0rem 0rem 99.9% 99.9%); clip-path: inset(0rem 0rem 99.9% 99.9%); overflow: hidden; height: 1rem; width: 1rem; padding: 0; border: 0;}
    .global-all-menu-btn {width:24rem; left:50%; top:50%; transform: translate(-50%, -50%);}
    .global-all-menu-btn:before {top:-7rem}
    .global-all-menu-btn:after {top:7rem}
    .global-menu-util {display:flex;align-items: center; margin-right:85rem;}
    .global-menu-util > ul { position: static; margin-right:20rem;}
    .global-menu-util > ul > li + li:before {display:none;}
    .global-menu-util > ul > li.global-message {margin-left:0;}
    .global-menu-util li, .global-menu-util > ul > li.global-zoom {display:none;}
    .global-menu-util li.global-alarm, .global-menu-util li.global-message {display:block;}
    .global-menu-util .global-search-form {display:none;}
    .global-menu-nav {display:none;}

    .global-search {display:block;}
    #search-popup {position: fixed; top:0;left: 0;right: 0;background:var(--body-bg);  width: 100%; height: 100%; z-index: 9999;}
    .search-popup__head {display: flex;align-items: center;height:80rem;border-bottom: 1rem solid var(--border-color); padding:0 30rem;}
    .search-popup__close {background:none;border:none;padding: 0;width: 50rem;height: 50rem;position: absolute;top: 15rem;left: 16rem;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: '\e92d';font-size: 22rem;font-weight: normal;text-align: center;line-height: 50rem;color:var(--basic-text-color);}
    .global-search-form {width:95%; margin-left:auto; margin-right:0;}
    .search-open .global-search-form__input {background:var(--btn-gray-bg);}
    .search-popup__body {padding: 0 30rem 30rem;}
    .popular-search {display:none;}

    .menu-bg {display:none;}
    .mob-member {display:block;padding: 30rem 30rem 40rem;border-bottom: 8rem solid var(--border-color);}
    .mob-member__login {text-align:center;}
    .mob-member__login p {font-size: 18rem;color: var(--black-text-color);}
    .mob-member__login ul {display:flex;justify-content: center;gap: 30rem;margin-top:30rem;}
    .mob-member__login li { flex: 1; margin-left: 0;}
    .mob-member__login li a {display:block;width: 100%;padding: 15rem;font-size: 18rem;color:#0084B5;border:1rem solid #0084B5;border-radius: 50rem;}
    .mob-member__login li.btn-login a {background:#0084B5; color:#fff;}

    .mob-member__info-head {display:flex;align-items: flex-end;}
    .mob-member__info-head .user {position:relative;font-size:20rem; padding-left:60rem;}
    .mob-member__info-head .user:before {font-family:'bluewave'; content:'\e92b'; font-size:20rem; font-weight:normal; color:#fff;  display:block; position:absolute; left:0; top:0; width:42rem; height:42rem; line-height: 42rem; text-align:center; background:#C8C8C8; border-radius:50%;}
    .mob-member__info-head .btn-logout {font-size:15rem;color:#7A7A7A;text-decoration:underline;margin-left: auto;}
    .mob-member__info-body {margin-top:30rem;}
    .mob-interest-board__item {display: flex;background:#F8F8F8;padding:15rem 20rem;border-radius:8rem;font-size: 18rem;}
    .mob-interest-board__item + .mob-interest-board__item {margin-top:8rem;}
    .mob-interest-board__item b {font-weight:500;}
    .mob-interest-board__item .icon-interest {margin-left:auto;}

    .mob-menu__bottom {display:block; text-align:center; margin-top:40rem; margin-bottom:40rem}
    .mob-menu__bottom a {padding:5rem; font-size: 15rem; color: #7A7A7A; text-decoration: underline; margin-left: auto;}
    
    .all-menu-popup {position:fixed;top:80rem;height:calc(100% - 80rem);border-top: none; overflow-y: scroll;}
    body.page-home.has-top-banner .all-menu-popup {top:80rem;}
    .all-menu-popup .wrap {margin:0;}
    .all-menu-popup__head {position:static; display:none;}
    .all-menu__list-wrap {padding-left:0;padding-bottom: 0;display:block;}
    .all-menu__list {display:block;width: 100%;background:var(--header-menu-bg);}
    .all-menu__list > li {display: block;position: relative;border-left:none;padding: 0;width: 100%;max-width: 100%;margin: 0;border-bottom:1rem solid var(--border-color);}
    .all-menu__list > li > a:after {width: 30rem;height: 30rem;line-height: 30rem;text-align: center;font-family:'bluewave';content:'\e91e';font-style:normal;font-size: 26rem;font-weight: bold;color:var(--black-text-color);position: absolute;right: 30rem;top: 50%;margin-top: -15rem;}
    .all-menu__list > li.has-sub-menu > a:after {content:'\e91e';font-size: 28rem;}
    .all-menu__list > li.menu-children--open > a:after {content:'\e91d';}
    .all-menu__list > li:nth-child(4), .all-menu__list > li:nth-child(5), .all-menu__list > li:nth-child(6) {display:block;}
    .all-menu__list > li > a {position: relative;padding:20rem 35rem;font-size: 20rem;border-bottom: none;}
    .all-menu__list .all-menu__sub-menu {display: none; background:var(--body-sub-bg); margin-top:0; margin-left:auto; padding:16rem 35rem;}
    .all-menu__list .all-menu__sub-menu > li + li {margin-top: 0;}
    .all-menu__list .all-menu__sub-menu > li > a {font-size:18rem; padding:10rem 0;}
    .all-menu__list .all-menu__sub-menu > li > ul {margin-top:14rem;}
    .all-menu__list .all-menu__sub-menu > li > ul > li + li {margin-top:14rem;}
    .all-menu__list .all-menu__sub-menu > li > ul > li > a {font-size:16rem;}
    .all-menu__list > li.other-menu-list { border-bottom:none;}
    .other-menu {margin:30rem 30rem 0;}
    .other-menu li a {width:100%;}
    
    body.all-menu-open { overflow: hidden;}
    body.all-menu-open .global-menu-util > ul,
    body.all-menu-open .global-search, body.all-menu-open .dark-mode-switch { opacity: 0; visibility: hidden;}
    .page-home .global-menu-util > ul > li button:after {color:var(--gray-text-color);}

    .page-home #header {background:transparent; border-bottom:none; transition:none;}
    .page-home.all-menu-open #header {background:var(--card-bg); border-bottom: 1rem solid var(--border-color);}
    .page-home:not(.minimize) .global-search:before {color:#fff;}
    .page-home:not(.minimize) .global-menu-util > ul > li button:after {color:#fff;}
    .page-home .global-menu-nav__wrap {margin-top:0;}
    body.page-home .all-menu__list-wrap {padding-left:0;}
    body.page-home .all-menu-popup {top:80rem;}


    .page-home.minimize #header {background:var(--card-bg); border-bottom: 1rem solid var(--border-color);}
    .page-home.minimize .header-logo .logo-white {display:none;}
    .page-home.minimize .header-logo .logo {display:block;}
    .page-home.minimize .global-all-menu:not(.active) .global-all-menu-btn,
    .page-home.minimize .global-all-menu-btn:before,
    .page-home.minimize .global-all-menu-btn:after {background:var(--basic-text-color);}

    .dark-mode-switch {right:auto;top:auto;position:relative;}

    .etc-link {display:none; margin-top:30rem; justify-content: center;}
    .etc-link a { color:var(--gray-text-color); border-color:var(--border-color);}
    .page-home .etc-link {display:none;}

    /* MOB MAIN MENU */
    .mob-global-menu {display:block; padding:80rem 4rem 0; background: var(--body-bg); border-bottom: 1rem solid var(--border-color);}
    .mob-global-menu .global-menu-nav {display:block;}
    .mob-global-menu .global-menu-nav .scroll-tab__list {overflow-x: scroll; overflow-y:hidden;text-wrap: nowrap;}
    .mob-global-menu #menu > li > a {white-space:nowrap;}
    .mob-global-menu #menu > li > a > span:after {bottom:-10rem;}
    .page-home .mob-global-menu {display:none;border-bottom:none;}


    /* FOOTER */
    .footer-top .wrap { justify-content: center;}
    .footer-bottom {padding:50rem 0 80rem;}
    .footer-bottom__inner {display:block;}
    .footer-info {display:block;}
    .footer-logo {margin:0 auto;}
    .footer-info__text {margin-left:0; margin-top:20rem; text-align:center;}
    .footer-info__text .info-list {max-width:500rem; margin:0 auto; text-align:center;}
    .footer-info__text .info-list li:nth-child(1) {margin-right:0; padding-right:0;}
    .footer-info__text .info-list li:nth-child(3) {width:auto;margin-right:0; padding-right:0;}
    .footer-info__text .info-list li:nth-child(5) {width:auto;margin-right:0; padding-right:0;}
    .footer-cs-qr {display:none;}
    .footer-family {max-width:500rem; margin:30rem auto 0;}
    .footer-sns {margin-top:30rem; justify-content: center;}

    .bottom-menu {display:block;}

    /* CONTAINER */
    .main-container {padding-top:0;}
    .page-home .main-container {padding-top:80rem;}

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    html { font-size: 0.13020833333333335vw; }

    /* LAYOUT */
    .wrap, .wrap-middle, .wrap-narrow,
    .page-home .wrap { margin: 0 25rem; }

    ::-webkit-input-placeholder { font-size: 13rem; }
    ::-moz-placeholder { font-size: 13rem; }
    :-ms-input-placeholder { font-size: 13rem; }

    /* HEADER */
    #header { height: 70rem;}
    .header-logo { width: 130rem; height: 24rem; }

    #search-popup {}
    .search-popup__head {height:70rem; padding:0 25rem;}
    .search-popup__close {left:11rem; top:10rem;}
    .search-open .global-search-form__input {height:46rem;}
    .global-search-form input.global-search-field { padding: 0 45rem 0 22rem;}
    .global-search-submit {width:60rem;}
    .global-search-submit:after { font-size: 18rem; line-height: 46rem;}
    .search-popup__body { padding: 0 25rem 25rem;}

    .all-menu-popup {top: 70rem; height:calc(100% - 70rem)}
    body.page-home.has-top-banner .all-menu-popup {top:70rem;}
    .all-menu-popup .wrap {margin:0;}
    .all-menu__list > li > a {font-size:18rem;}
    .all-menu__list .all-menu__sub-menu > li + li {margin-top:5rem;}
    .all-menu__list .all-menu__sub-menu > li > a {font-size:16rem;padding: 6rem 0;}
    .all-menu__list .all-menu__sub-menu > li > ul {margin-top:5rem;}
    .all-menu__list .all-menu__sub-menu > li > ul > li > a {font-size:14rem;}
    .other-menu { margin-left:25rem; margin-right:25rem;}

    .mob-member {padding-left:25rem; padding-right:25rem;}
    .mob-member__login p {font-size:16rem;}
    .mob-member__login li a {font-size:16rem;}
    .mob-member__info-head .user { font-size: 18rem;padding-left: 55rem;}
    .mob-member__info-head .btn-logout {font-size:14rem;}
    .mob-interest-board__item {font-size:16rem;}

    body.page-home .all-menu-popup {top:70rem;}

    /* MOB MAIN MENU */
    .mob-global-menu {padding-top:70rem;}


    /* FOOTER */
    .footer-menu li {font-size:14rem;}
    .footer-menu li a { padding: 0 20rem; }
    .footer-logo { width: 160rem; height: 28rem;}
    .footer-info__text .info-list li {font-size:14rem;}
    .footer-copyright {font-size:14rem;}

    .footer-select__title {font-size:13rem; padding: 10rem 25rem 11rem 15rem;}
    .footer-select__title-button:after {right:12rem;}
    .footer-select__box ul li a {font-size:13rem;}
    .footer-select__box ul li a { padding: 6rem 10rem}

    /* CONTAINER */
    .main-container {padding-top:0;}
    .page-home .main-container {padding-top:70rem;}

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    html { font-size: 0.26666666666666665vw; }

    /* LAYOUT */
    .wrap-middle, .wrap, .wrap-narrow,
    .page-home .wrap { margin: 0 15rem; }
    #container {padding-bottom:80rem;}

    /* HEADER */
    #header {height:60rem;}
    header:not(.home-header) .btn-goback:before {font-size:18rem;}
    .header-logo { width: 120rem; height: 22rem; }

    .global-search {margin-right:0;}
    .global-search:before {font-size:18rem;}
    .search-popup__head {height:60rem; padding:0 15rem;}
    .global-search-form {width:88%; }
    .search-open .global-search-form__input { height: 42rem;}
    .global-search-submit {width:50rem;}
    .global-search-submit:after {font-size:18rem; line-height:42rem;}
    .search-popup__close {width: 40rem; height: 40rem;}
    .search-popup__close:after { font-size: 17rem; line-height:40rem;}
    .global-search-form input.global-search-field {padding-left:20rem;}
    .popular-search {margin-top:15rem;}
    .popular-search li a {font-size:13rem;}

    .global-menu-util {margin-right:70rem;}
    .global-menu-util > ul {margin-right:12rem;}
    .global-menu-util > ul > li + li {margin-left:12rem;}
    .global-menu-util > ul > li.global-alarm i {width:14rem; height:14rem; font-size:7rem; top:-4rem; right:-5rem;}
    .global-menu-util > ul > li.global-alarm button:after {font-size:16rem;}
    .global-menu-util > ul > li.global-message button:after {font-size:16rem;}
    html.ios .global-menu-util > ul > li.global-alarm i {top:-2rem;}
    

    .global-all-menu-btn {width:20rem; }
    .all-menu-popup {top: 60rem; height:calc(100% - 60rem)}
    body.page-home.has-top-banner .all-menu-popup {top:60rem;}
    .all-menu-popup .wrap {margin:0;}
    .all-menu__list > li > a { position: relative; padding: 14rem 15rem 15rem; font-size:16rem;}
    .all-menu__list > li > a:after {right:15rem; font-size:20rem;}
    .all-menu__list > li.has-sub-menu > a:after {font-size:20rem;}
    .all-menu__list .all-menu__sub-menu {padding:10rem 15rem;}
    .all-menu__list .all-menu__sub-menu > li + li {margin-top:0;}
    .all-menu__list .all-menu__sub-menu > li > a {font-size:15rem;}
    .all-menu__list .all-menu__sub-menu > li > ul > li > a {font-size:14rem;}
    .other-menu { margin: 20rem 15rem 0;}
    .other-menu li a {font-size:14rem;padding: 14rem 16rem;}

    .mob-member {padding-bottom:30rem; padding-left:15rem; padding-right:15rem;}
    .mob-member__login p {font-size:14rem;}
    .mob-member__login ul {gap:11rem;}
    .mob-member__login li a {font-size:14rem; padding:13rem;}
    .mob-member__info-head .user { font-size: 16rem;padding-left: 50rem;}
    .mob-member__info-head .btn-logout {font-size:13rem;}
    .mob-interest-board__item {font-size:14rem;}
    .mob-menu__bottom a {font-size: 14rem;}

    body.page-home .all-menu-popup {top:60rem;}

    .dark-mode-switch {padding-left: 18rem;}
    .dark-mode-switch:before {font-size:13rem;}
    .btn-dark-mode-switch { width: 30rem; height: 18rem;}
    .btn-dark-mode-switch:after { width: 13rem; height: 13rem;}

    /* MOB MAIN MENU */
    .mob-global-menu {padding-top:60rem;}
    .mob-global-menu #menu > li > a {font-size:15rem; padding:10rem 5rem;}

    /* FOOTER */
    .footer-top {padding-top:16rem; padding-bottom:13rem;}
    .footer-menu {display:block; text-align: center;font-size:0;}
    .footer-menu li {position:relative;display:inline-block;font-size:12rem;}
    .footer-menu li:before {width:1rem; height:10rem; background:#bebebe; content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%);}
    .footer-menu li:nth-child(1):before { display:none;}
    .footer-menu li a { padding: 5rem 15rem; }
    .footer-logo { width: 140rem; height: 24rem;}
    .footer-info__text .info-list li {font-size:13rem;margin-right: 10rem; padding-right: 10rem;}
    .footer-info__text .info-list li:nth-child(3) {margin-right: 10rem; padding-right: 10rem;}
    .footer-info__text .info-list li:nth-child(2), .footer-info__text .info-list li:nth-child(4) {margin-right: 0; padding-right:0;}
    .footer-info__text .info-list li:nth-child(3):after {display:block;}
    .footer-info__text .info-list li:nth-child(2):after, .footer-info__text .info-list li:nth-child(4):after {display:none;}
    .footer-family__select {margin:0 5rem;}
    .footer-copyright {font-size:13rem;}

    .footer-select__title { padding: 8rem 22rem 9rem 12rem;}
    .footer-select__title-button:after {right:10rem;}

    /* CONTAINER */
    .main-container {padding-top:0;}
    .page-home .main-container {padding-top:60rem;}


}