@charset "utf-8";

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



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

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



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

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

    /* HEADER */
    .all-menu__list-wrap {padding-left:23%;}
    
}



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

    html { font-size: 0.06756756756756757vw; }

    /* LAYOUT */
    .global-menu-nav__wrap {margin-left: 40rem;}

}



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

    html { font-size: 0.09775171065493645vw; }

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

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

    /* HEADER */
    .top-banner {display:none;}
    #header {position:fixed;height:80rem; padding-top:0;}
    .header-menu {height:100%}
    .header-menu__inner {height:100%;}
    .header-logo { width: 150rem; height: 28rem;}

    body.all-menu-open { overflow: hidden;}
    .global-menu-nav__wrap {display:none;}
    .global-menu-util {display:flex;}
    .global-menu-util .member-menu {display:none;}
    .global-search {display:block;}

    #search-popup {display: none; width: 100%;padding: 40rem 30rem 50rem;position: fixed;top: 80rem;left: 0;right: 0;background:#fff;box-shadow: 0 10rem 12rem rgba(0, 0, 0, .12);z-index: 9999;}
    .search-popup__close {background:none;border:none;padding: 0;width: 50rem;height: 50rem;position: absolute;top: 12rem;right: 17rem;opacity: 1;cursor:pointer;-webkit-transition: top 300ms;transition: top 300ms;}
    .search-popup__close:after {display: block;width: 100%;height: 100%;font-family: 'academy';content: '\e920';font-size: 21rem;font-weight: normal;text-align: center;line-height: 50rem;color: #000;}
    #search-popup .search-input {border: 1rem solid #c4c4c4; margin-top:0;}
    .search-popup__title {font-size:28rem; font-weight:600;}
    .search-popup__desc {font-size:18rem; margin-top:12rem;}
    .search-popup__select {margin-top:30rem; display:flex; gap:10rem}
    .search-popup__select .selectric-wrapper { flex-grow: 1;}
    .search-popup .selectric-items {box-shadow: 0 3rem 6rem rgba(0,0,0,0.05);}
    .search-popup__input {display:flex; gap:10rem; margin-top: 10rem;}
    .search-popup .search-input {display:block; margin-top:14rem;}
    .search-popup .search-submit {display:block;margin: 0;width: 20%;}

    .menu-bg {display:none;}
    .mob-member {display:block;padding: 30rem 30rem 40rem;border-bottom: 8rem solid #e5e5e5;}
    .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:#009E9A;border:1rem solid #009E9A;border-radius: 50rem;}
    .mob-member__login li.btn-login a {background:#009E9A; color:#fff;}
    .all-menu-popup {position:fixed;top:80rem;height:calc(100% - 80rem);border-top: none; 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: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 #ddd;}
    .all-menu__list > li > a:after {width: 30rem;height: 30rem;line-height: 30rem;text-align: center;font-family:'academy';content:'\e91c';font-style:normal;font-size: 26rem;font-weight: bold;color:#000;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:#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 {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 {display:block;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;}

    .all-menu-popup .member-menu {margin-top:30rem; margin-right:0; justify-content: center;}


    /* 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;}

}



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

    html { font-size: 0.13020833333333335vw; }

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

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

    #search-popup {top:70rem;}

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

    /* 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;}

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

}



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

    html { font-size: 0.26666666666666665vw; }

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

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

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

    #search-popup {top:60rem;}

    .global-all-menu-btn {width:20rem; }
    .all-menu-popup {top: 60rem; height:calc(100vh - 60rem)}
    .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:11rem;}
    .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:14rem;}
    .all-menu__list .all-menu__sub-menu > li > ul > li > a {font-size:13rem;}
    .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;}

    .member-menu li a {padding:0 10rem;}

    /* 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, .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;}

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


}