@charset "utf-8";

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


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

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



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

    html { font-size: 0.06756756756756757vw; }

    /* LAYOUT */

}



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

    html { font-size: 0.09775171065493645vw; }

    /* LAYOUT */
    .wrap, .wrap-middle, .wrap-narrow { margin: 0 30rem;  max-width: inherit; }


    /* HEADER */
    .top-banner {display:none;}
    #header {position:fixed;height:80rem; padding-top:0;}
    .page-home #header:before {}
    .header-logo { width: 150rem; height: 28rem;}
    .global-menu-nav__wrap { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-top: 0; display:flex; align-items:center;}
    .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-search-form {display:none;}
    .global-menu-util ul {display:none;}

    .global-search {display:none;}

    .menu-bg {display:none;}
    .mob-member {display:block;padding: 30rem 30rem 40rem;border-bottom: 8rem solid #E2E2E2;}
    .mob-member__login {text-align:center;}
    .mob-member__login p {font-size: 18rem;color: #232527;}
    .mob-member__login ul {display:flex;justify-content: center;gap: 30rem;margin-top:30rem;}
    .mob-member__login li { flex: 1; margin-left: 0; margin-top: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:50rem; margin-bottom:40rem}
    .mob-menu__bottom a {padding:5rem; font-size: 15rem; color: #7A7A7A; text-decoration: underline; margin-left: auto;}
    
    .all-menu-popup {opacity: 0; visibility: hidden; position:fixed;top:80rem; left:0; right:0; width: 100%; height:calc(100vh - 80rem);border-top: none; background:#fff;overflow-y: scroll;}
    .all-menu-popup .wrap {margin:0;}
    .all-menu-popup__head {position:static; display:none;}
    .all-menu__list-wrap {padding-left:0;padding-bottom: 0;}
    .all-menu__list {display:block;width: 100%;background:#fff;}
    .all-menu__list > li {display: block;position: relative;border-left:none;padding: 0;width: 100%;max-width: 100%;margin: 0;border-bottom:1rem solid #e6e6e6;}
    .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 {display:block; position: relative;padding:20rem 35rem;font-size: 20rem;border-bottom: none;}
    .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:#444;position: absolute;right: 30rem;top: 50%;margin-top: -15rem;}
    .all-menu__list .all-menu__sub-menu {display: none; background:#fafafa; 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 {display:block; font-size:18rem; padding:10rem 0;}
    .all-menu__list .all-menu__sub-menu > li > ul {margin-top:14rem; margin-bottom:14rem; margin-left: 5rem;}
    .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 + li {margin-top:14rem;}
    .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 > a {display:block; font-size:16rem; color:#767676;}
    .all-menu__list .toggle-menu .all-menu__sub-menu > li.has-sub-menu > a {position:relative;}
    .all-menu__list .toggle-menu .all-menu__sub-menu > li.has-sub-menu > a:after {width: 20rem;height: 20rem;line-height: 21rem;text-align: center;font-family:'bluewave';content:'\e91e';font-size: 15rem;font-weight:normal;color:#000;position: absolute;right: 0;top: 50%;margin-top: -10rem; -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s;}
    .all-menu__list .toggle-menu .all-menu__sub-menu > li.has-sub-menu.menu-children--open > a:after {-webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg);}
    .other-menu {margin:30rem 30rem 0;}
    .other-menu li a {width:100%;}
    body.all-menu-open .header-logo, body.all-menu-open .global-menu-nav__wrap, body.all-menu-open .global-bluewave, body.all-menu-open .global-search {opacity:1; visibility:visible;}



    /* FOOTER */
    .footer-top .wrap { justify-content: center;}
    .footer-bottom {padding:50rem 0;}
    .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;}


    /* CONTAINER */
    .main-container {padding-top:80rem;}
    #container {padding-bottom:140rem;}

}



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

    html { font-size: 0.13020833333333335vw; }

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

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

    #search-popup {top: 70rem;}
    #search-popup .wrap { background-size: 300rem auto;}
    .global-search:before {font-size:19rem;}

    .all-menu-popup {top: 70rem; height:calc(100vh - 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;}

    /* 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:70rem;}
    #container { padding-top: 60rem; padding-bottom:120rem;}


}



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

    html { font-size: 0.26666666666666665vw; }

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

    /* HEADER */
    #header {height:60rem;}
    .header-logo { width: 120rem; height: 22rem; }

    .global-search {margin-right:0;}
    .global-search:before {font-size:18rem;}
    #search-popup {top:61rem;}
    #search-popup .wrap {background:none;}
    .search-popup__inner {padding-top:45rem; padding-bottom:20rem;}
    .global-search-form__input { height: 54rem; border-width: 3rem;}
    .global-search-submit {width:50rem;}
    .global-search-submit:after {font-size:18rem; line-height:47rem;}
    .search-popup__close {top:5rem; width: 40rem; height: 40rem;}
    .search-popup__close:after { font-size: 18rem; 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-all-menu-btn {width:20rem; }
    .all-menu-popup {top: 60rem; height:calc(100vh - 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;}


    /* FOOTER */
    .footer-top {padding-top:16rem; padding-bottom:13rem;}
    .footer-menu {display:block; text-align: center;font-size:0;max-width: 85%;}
    .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, .footer-menu li:nth-child(4):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:60rem;}
    #container {padding-bottom:80rem; padding-top:30rem;}


}