/*****************************************
 *  layout
 */
    @media (min-width: 1080px) {
        .container {
            max-width: 1080px;
        }
    }

    .dot-list {padding: 0;list-style: none; text-align: left;margin: 0;}
    .dot-list li {position: relative;padding-left: 10px;}
    .dot-list li::before {content: '';position: absolute;top: 0.6rem;left: 0;display: block;width: 2px;height: 2px;background: #666;border-radius: 50%;}

    .input-btn-wrap {text-align: center;}
    .hana-btn {
        display: inline-block;
        padding: .5rem 3rem;
        margin-bottom: 1rem;
        background: #ff0000;
        border: none;
        color: #fff !important;
        font-weight: 700;
        cursor: pointer;
        transition: all .5s;
    }
    .hana-btn:disabled {
        background: rgba(255, 0, 0, 0.5);
        color: rgba(255, 255, 255, 0.5) !important;
        cursor: not-allowed;
        transition: all .5s;
    }
    .hanaschool-btn-wrap {
        padding-top: 1rem;
    }
    .hanaschool-btn {
        display: inline-block;
        padding: .5rem 3rem;
        margin-bottom: 1rem;
        background: #ffb400;
        color: #000 !important;
        font-weight: 700;
        cursor: pointer;
        transition: all .5s;
    }
    .hanaschool-btn:hover {
        background: #ff5000;
    }
    [class^="mo-"] {
        display: block;
    }
    [class^="pc-"] {
        display: none;
    }
    @media (min-width: 768px) {
        [class^="mo-"] {
            display: none;
        }
        [class^="pc-"] {
            display: block;
        }
    }

/*****************************************
 *  header
 */
    #header .top {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        padding-top: 1rem;
        padding-bottom: 1rem;
        transition: all .5s;
        box-shadow: 0 0 10px #00000030;
    }

    #header a.logo {
        display: block;
        width: 180px;
        height: 52px;
        background-image: url('/files/hanaedu-logo.svg');
        background-repeat: no-repeat;
        background-position: center;
        color: transparent;
    }

    .hanaschool #header a.logo {
        display: block;
        height: 43px;
        background-image: url('https://s3.ap-northeast-2.amazonaws.com/img.hana-edu.co.kr/hanaschool/logo_black.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        color: transparent;
    }

    #app.nav-open a.logo {
        background-image: url('/files/hanaedu-logo-white.svg');
    }

    .access-pc {
        display: none;
    }

    .access {
        display: none;
        font-family: var(--font-gothic);
        font-size: small;
    }

    .access a {
        color: #fff;
        line-height: 1;
    }

    .access a:not(:first-child) {
        margin-left: .5rem;
        padding-left: .5rem;
        border-left: solid 1px var(--gray-500);
    }

    #header .namespaces {
        font-family: var(--font-serif);
        display: flex;
    }

    #header .namespaces a.namespace {
        padding-top: 10px;
    }

    #header .namespaces a.active,
    #header .namespaces small {
        display: none;
    }

    #header .namespaces a span {
        font-size: 0.8rem;
        font-weight: 700;
        line-height: 1;
        display: block;
        color: var(--gray-600);
    }

    #app > main {
    }

    @media (min-width: 768px) {
        #app {
            display: grid;
            grid-template-rows: auto auto 1fr auto;
        }

        #header {
            background-color: #191919;
        }
        .hanaschool #header{
            background-color: #fff;
        }
        #header .top {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            padding-top: 1.5rem;
            padding-bottom: 0;
            box-shadow: none;
        }

        #header a.logo {
            background-image: url('/files/hanaedu-logo-white.svg');
        }

        #header .namespaces {
            margin-top: 1rem;
        }

        #header .namespaces a.active,
        #header .namespaces small {
            display: block;
        }

        #header .namespaces a {
            display: block;
            width: 13rem;
            padding: .5rem 1rem;
            background-color: var(--gray-300);
            font-family: var(--font-gothic);
            border-radius: .25rem .25rem 0 0;
        }

        #header .namespaces a:first-child {
            margin-right: .5rem;
        }

        #header .namespaces a span {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--gray-500);
        }

        #header .namespaces a br {
            display: none;
        }

        #header .namespaces a small {
            font-size: 0.6em;
            color: var(--gray-500);
        }

        #header .namespaces a.active {
            background-color: #fff;
        }
        .hanaschool #header .namespaces a.active {
            background-color: #191919;
        }

        #header .namespaces a.active span {
            color: #000;
        }
        .hanaschool #header .namespaces a.active span {
            color: #fff;
        }
        #header .namespaces a.active small {
            color: var(--gray-600);
        }
        .hanaschool #header .namespaces a.active small {
            color: var(--gray-200);
        }

        #header .namespaces a:hover span,
        #header .namespaces a:hover small {
            color: #000;
            transition: color .5s;
        }

        .access-pc {
            display: block;
            font-family: var(--font-gothic);
            font-size: medium;
            margin-top: 1rem;
            text-align: right;
        }

        .access-pc a {
            color: #fff;
            line-height: 1;
        }

        .access-pc a:not(:first-child) {
            margin-left: .5rem;
            padding-left: .5rem;
            border-left: solid 1px var(--gray-500);
        }
    }

/*****************************************
 *  nav
 */
    #nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--gray-900);
        overflow-y: auto;
        transform: translateY(-100%);
        transition: transform 0.3s ease-out;
        opacity: 0;
        z-index: -1;
    }

    #app.nav-open nav {
        overflow-y: auto;
        transform: translateY(0);
        transition: transform 0.5s cubic-bezier( 0.2, 0.5, 0.3, 1 );
        opacity: 1;
        padding-top: 90px;

        min-height: 100vh;
        min-height: -webkit-fill-available;

        z-index: 30;
    }

    #app.nav-open #header .top {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 31;

        background-color: #000;

        transition: all .5s;
    }

    #app.nav-open .namespaces a.namespace {
        display: none;
    }

    #app.nav-open .access {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }

    #nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #nav a {
        color: #fff;
    }

    #nav a:hover {
        color: var(--gray-600);
    }

    #nav .container > ul > li > a,
    #nav .container > ul > li > i {
        display: none;
    }

    /* root */
    #nav .container > ul > li > ul > li {
        position: relative;
        border-bottom: solid 1px var(--gray-800);
        padding: 1rem 0;
    }

    #nav .container > ul > li > ul > li .cat {
        line-height: 1;
        margin-top: -15px;
        text-align: center;
    }

    #nav .container > ul > li > ul > li .cat span {
        background-color: var(--red-light);
        color: #fff;
        font-size: 0.7em;
        padding: 0 .75rem;
        border-radius: 1rem;
    }

    #nav .container > ul > li > ul > li.has-child {
        position: relative;
    }
    #nav .container > ul > li > ul > li.has-child::before {
        content: '';
        position: absolute;
        right: 1rem;
        top: 1rem;
        height: 12px;
        aspect-ratio: 280 / 200;
        background: #fff;
        clip-path: polygon(50% 70%, 100% 0, 100% 29%, 50% 100%, 0 30%, 0% 0%);
    }
    #nav .container > ul > li > ul > li.has-child.open::before {
        transform: rotate(180deg);
    }

    #nav .container > ul > li > ul > li.has-child i {
        float: right;
        color: var(--gray-500);
    }

    .hanaschool #nav .container > ul > li > ul > li.has-child i {
        color: var(--gray-100);
    }

    #nav .container > ul > li > ul > li.has-child i:hover {
        color: #fff;
        cursor: pointer;
    }


    #nav .container > ul > li > ul > li ul {
        height: 0;
        overflow: hidden;
    }
    #nav .container > ul > li > ul > li ul.sub-open {
        height: auto;
        margin: 1rem;
        padding: 0;
        transition: all .2s;
    }

    #nav .container > ul > li > ul > li ul.sub-open li {
        padding: 1rem 0;
        font-size: small;
        border-bottom: solid 1px var(--gray-800);
        transition: all .2s;
    }

    #nav .container > ul > li > ul > li ul.sub-open li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    @media (min-width: 768px) {
        #nav {
            background-color: #fff;
            border-bottom: solid 1px var(--gray-300);
            position: relative;
            transform: translateY(0);
            opacity: 1;
            z-index: 100;
            height: auto;
            overflow-y: unset;
        }
        .hanaschool #nav {
            background: #191919;
        }

        #nav a {
            color: #000;
            font-size: 1.1rem;
        }
        .hanaschool #nav a {
            color:#fff;
        }
        #nav .container > ul > li > ul {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        #nav .container > ul > li > ul ul {
            position: absolute;
        }

        #nav .container > ul > li > ul > li {
            border-bottom: none;
        }

        #nav .container > ul > li > ul > li:hover ul {
            height: auto;
            margin: 1rem;
            padding: 0;
            transition: all .2s;
        }

        #nav .container > ul > li > ul > li:hover ul li {
            padding: 1rem 0;
            font-size: small;
            border-bottom: solid 1px var(--gray-800);
            transition: all .2s;
        }

        #nav .container > ul > li > ul > li:hover ul li:last-child {
            border-bottom: none;
        }

        #nav .container > ul > li > ul > li:hover ul,
        #nav .container > ul > li > ul > li ul.sub-open {
            margin: 1rem 0;
            line-height: 1;
            background-color: #fff;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        }
        .hanaschool #nav .container > ul > li > ul > li:hover ul,
        .hanaschool #nav .container > ul > li > ul > li ul.sub-open {
            background-color: #191919;
        }

        #nav .container > ul > li > ul > li:hover ul li,
        #nav .container > ul > li > ul > li:hover ul li:last-child,
        #nav .container > ul > li > ul > li ul.sub-open li,
        #nav .container > ul > li > ul > li ul.sub-open li:last-child {
            padding: 1rem;
        }

        #nav .container > ul > li > ul > li:hover ul li,
        #nav .container > ul > li > ul > li ul.sub-open li {
            border-bottom: solid 1px var(--gray-300);
        }

        #nav .container > ul > li > ul > li:hover ul li a,
        #nav .container > ul > li > ul > li ul.sub-open li a {
            font-size: 0.8rem;
            line-height: 1;
            white-space: nowrap;
        }

        #nav .container > ul > li > ul > li.has-child i {
            color: var(--gray-600);
            margin-left: .5rem;
        }

        #nav .container > ul > li > ul > li.has-child i:hover {
            color: var(--red-dark);
        }
        #nav .container > ul > li > ul > li.has-child::before {
            display: none;
        }
    }

/*  nav-icon */
    #nav-icon {
        display: block;
        position: relative;
        padding: 25px 0 0 .75rem;
        border-left: solid 1px var(--gray-800);
        margin-left: 1rem;
    }

    #nav-icon em, #nav-icon em::after, #nav-icon em::before {
        display: block;
        position: relative;
        height: 2px;
        width: 18px;
        background-color: #000;
        backface-visibility: hidden;
    }

    #nav-icon em::before, #nav-icon em::after {
        position: absolute;
        content: '';
        left: 0;
        transition: transform .2s
    }

    #nav-icon em::before {
        transform: translateY(-6px)
    }

    #nav-icon em::after {
        transform: translateY(6px)
    }

    #nav-icon:hover {
        cursor: pointer;
    }

    #app.nav-open #nav-icon em {
        background-color: transparent;
    }

    #app.nav-open #nav-icon em::before {
        background-color: #fff;
        transform: rotate(45deg)
    }

    #app.nav-open #nav-icon em::after {
        background-color: #fff;
        transform: rotate(-45deg)
    }

    @media (min-width: 768px) {
        #nav-icon,
        #app.nav-open #nav-icon {
            display: none;
        }
    }

/*****************************************
 *  sidebar
 */
    #sidebar {
        display: none;
    }

    @media (min-width: 768px) {
        #sidebar {
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 101;
            background-color: #fff;
            border-left: solid 1px #000;
            box-shadow: -1px 0 3px rgba(0, 0, 0, 0.3);
            width: 60px;
            transition: width .5s;
        }

        #toggleSidebar {
            position: absolute;
            top: 150px;
            left: -41px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background-color: var(--teal);
            color: #fff;
            cursor: pointer;
            transition: width .5s;
        }

        #toggleSidebar:hover {
            background-color: var(--red-dark);
            transition: all .5s;
        }

        #sidebar .open-menu {
            display: none;
        }

        #sidebar .close-menu {
            list-style: none;
            margin: 170px 0 0 0;
            padding: 0;
        }

        #sidebar .close-menu li {
            margin: 2rem 0;
            padding: 0;
            text-align: center;
            line-height: 1;
        }

        #sidebar .close-menu li span, #sidebar .close-menu li a {
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
        }

        #sidebar .close-menu li i {
            display: block;
            font-size: 30px;
        }

        #sidebar.sidebar-open {
            width: 200px;
            transition: width .5s;
        }

        #sidebar.sidebar-open .close-menu {
            display: none;
        }

        #sidebar.sidebar-open .open-menu {
            display: block;
        }

        .area-logo {
            padding: 30px 0 25px;
            border-bottom: 1px solid var(--gray-300);
            text-align: center;
            color: #666;
            line-height: 140%;
        }

        .area-logo img {
            width: 70%;
            margin-bottom: 1rem;
        }

        .quick-inquiry {
            padding: 2rem 1rem;
        }

        .quick-inquiry .tit {
            font-weight: 700;
            font-size: 1.2rem;
        }

        .quick-inquiry .form-group {
            margin: 1rem 0;
        }

        .quick-inquiry input[type=text],
        .quick-inquiry textarea {
            border-radius: 0;
            border: solid 1px var(--gray-300);
            background-color: var(--gray-100);
        }

        .quick-inquiry input[type=text]::placeholder,
        .quick-inquiry textarea::placeholder {
            font-size: small;
            color: var(--gray-400);
        }

        .quick-inquiry .agreement {
            color: var(--gray-400);
            font-size: 0.7rem;
            margin: 1rem 0;
        }

        .quick-inquiry .agreement a {
            color: var(--red-dark);
        }

        .quick-inquiry .btn {
            background-color: #e5006e;
            border-radius: 0;
            color: #fff;
            width: 100%;
        }

        .quick-list {
            list-style: none;
            margin: 0 1rem;
            padding: 0;
        }

        .quick-list li {
            margin: 1.5rem 0;
            padding: 0;
            line-height: 1;
        }

        .quick-list li span,.quick-list li a {
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
        }

        .quick-list li i {
            margin-right: .5rem;
        }


        .goto-top {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 1rem;
            text-align: center;
            line-height: 1;
            font-size: small;
        }

        .goto-top i {
            font-size: medium;
        }
    }

/*****************************************
 *  breadcrumb
 */
    #breadcrumb {border-bottom: 1px solid #cbd4d9;border-top: 1px solid #cbd4d9;margin-top: -1px;}
    .breadcrumb {
        justify-content: flex-end;
        padding: 1rem 0;
        margin: 0;
    }
    .breadcrumb a {
        font-size: 12px;
    }
    .breadcrumb .active a {
        color: var(--red-dark);
    }
    @media (min-width: 768px) {
        .breadcrumb a {
            font-size: 16px;
        }
    }

/*****************************************
 *  footerbar - mobile
 */
    #footerbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--gray-200);
        z-index: 12;
        padding: .5rem;
    }
    #footerbar .top-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: .5rem;
        bottom: calc(100% + .5rem);
        width: 50px;
        height: 50px;
        aspect-ratio: 1 /1;
        border-width: 2px;
    }
    #footerbar .top-btn i {
        margin: 0;
        font-size: 30px;
    }
    #footerbar .top-btn span {
        font-size: 0;
        display: inline-block;
        height: 0;
        width: 0;
        padding: 0;
        margin: 0;
        border: none;
    }
    #footerbar ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    #footerbar li {
        margin: 0;
        padding: 0;
        flex: 1;
    }
    #footerbar span ,
    #footerbar a {
        display: block;
        font-size: medium;
        font-weight: 500;
        text-align: center;
        padding: .25rem;
        margin: 1px;
        background-color: #fff;
        border: solid 1px var(--gray-300);
    }

    #footerbar a i {
        margin-right: .25rem;
    }

    #footerbar li:first-child a {
        color: var(--red-dark);
    }

    @media (min-width: 768px) {
        #footerbar {
            display: none;
        }
    }

/*****************************************
 *  footer
 */
    #footer {
        background-color: #191919;
    }

    #footer ul.about {
        list-style: none;
        margin: 0;
        padding: 1.5rem 0 2.5rem 0;
        display: flex;
        font-size: small;
        line-height: 1;
    }

    #footer ul.about li:not(:first-child) {
        margin-left: .5rem;
        padding-left: .5rem;
        border-left: solid 1px var(--gray-600);
    }

    #footer a {
        color: #fff;
    }

    #footer a.pink {
        color: var(--red-light);
        border-bottom: dotted 1px var(--orange);
    }

    #footer a:hover {
        color: var(--red-dark);
    }

    #footer .logo {
        margin-bottom: 1rem;
    }

    #footer .logo img {
        width: 160px;
    }

    #footer .info p,
    #footer .info address {
        font-size: small;
        font-weight: 400;
        line-height: 1;
        color: #fff;
        margin-bottom: .25rem;
    }

    #footer .info a {
        color: var(--gray-300);
    }

    #footer .copyright {
        font-size: small;
        line-height: 1;
        padding: 1rem 0 6rem 0;
        color: var(--gray-500);
    }

    #footer ul.social {
        list-style: none;
        margin: 1rem 0 0 0;
        padding: 0 0 1rem 0;
        display: flex;
    }

    .hanaschool #footer ul.social {
        padding-bottom: 5rem;
    }

    #footer ul.social i {
        font-size: 1.5rem;
    }

    #footer ul.social li:not(:first-child) {
        margin-left: 1rem;
    }

    #footer a[title='youtube'] {
        color: #ED2024;
    }
    #footer a[title='instagram'] {
        color: #b9258f;
    }

    #footer a[title='facebook'] {
        color: #3a589c;
    }

    #footer a[title='blog'] {
        color: #00c03a;
    }

    @media (min-width: 768px) {
        #footer .grid {
            display: grid;
            grid-template-columns: auto 1fr auto;
        }

        #footer ul.about {
            padding-top: 2.5rem;
        }

        #footer .info {
            padding-left: 6rem;
        }

        #footer ul.social {
            margin: 0;
            padding-bottom: 2.5rem;
        }

        .hanaschool #footer ul.social {
            padding-bottom: 0;
        }

        .hanaschool #footer .grid {
            padding-bottom: 2.5rem;
        }

        #footer .copyright {
            text-align: center;
            padding: 4rem 0;
        }
    }

/*  tag */
    .tag:before {
        content: '#';
        color: var(--orange);
    }
/*****************************************
 *  회원가입, 로그인 등등 맴버
 */
 .member-home ul {list-style: none; padding: 0;}
 .member-home h1 {text-align: center; padding-top: 2rem ;}
 .area-mypage-wrap ,
 .area-mypage {padding: 5rem 0;}
 .area-mypage h1 {margin-bottom: 2rem; text-align: center;}
 .area-mypage h2 {margin-bottom: 1rem;}
.login-form {width: 90%;max-width: 640px;margin: 6% auto;padding: 2rem 1.5rem;box-sizing: border-box;border: 1px solid #cbd4d9;font-size: 1rem;}
.login-title-grid {display: grid;grid-template-columns: repeat(2,1fr);}
.login-title-grid div,
.login-form h1 {padding-bottom: 8px;margin-bottom: 16px;border-bottom: 2px solid #000;font-size: 20px;font-weight: 500;}
.login-title-grid div {border-color: #999;}
.login-title-grid div a {color: #999; font-size: 20px;font-weight: 500;}
.login-input-wrap {margin-bottom: 1rem;}
.check-input-wrap p > strong,
.login-input-wrap label {display: block;font-size: 16px;margin-bottom: 8px;font-weight: 400; text-align: left;}
.login-input-wrap select,
.login-input-wrap textarea,
.login-input-wrap input {display: block;font-size: 14px;width: 100%;height: 2.2rem;border: 1px solid #cbd4d9;text-indent: 10px;line-height: 2.2rem;vertical-align: text-bottom;margin-bottom: 4px;}
.login-input-wrap input:last-of-type {margin-bottom: 0;}
.login-input-wrap input:focus {outline:1px solid #ff0000;}
.check-input-wrap {margin-bottom: 16px;}
.check-input-wrap p {margin-bottom: 0;}
.login-form span,
.check-input-wrap label {font-size: 14px;}
.login-form button {border: none;width: 100%;}
.login-link-box {text-align: center;padding-top: 8px;}
.login-link-box > div {display: flex;justify-content: center;margin-bottom: 8px;}
.login-link-box > p {font-size: 12px;}
.login-link-box a {display: inline-block;margin: 0;padding: 0 4px;font-size: 14px;font-weight: 500;}
.login-link-box a + a {border-left: 1px solid #000;}
.privacy-box > div {margin-bottom:16px;}
.privacy-box > div:last-of-type {margin-bottom: 0;}
.privacy-btn {float: right;border-bottom: 1px solid #999;cursor: pointer;font-size: 14px;color: #999;}
.policy-privacy.area-terms {display: none;width: 100%;max-height: 100px;margin-top: 10px;padding: 10px;box-sizing: border-box;border: 1px solid #cbd4d9;background: #fff;font-size: 0.8rem;color: #999;overflow-y: scroll;}
.policy-privacy.area-terms.active {display: block;}
.radio-input-wrap-grid {margin-bottom: 8px;}
.kakao-zipcode-app {position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:520px;margin:0 auto;z-index:9;border:1px solid #333;}
.profile-input-wrap {text-align: center;position: relative;margin-bottom: 3rem; display: flex;justify-content: center; align-items: center; width: 100%;}
.profile-input-wrap > div {width: 100%;}
.profile-input-wrap .profile {display: flex;align-items: center;aspect-ratio: 1 / 1;width: 80%;margin: 0 auto 1rem !important; max-width: 200px;}
.profile-input-wrap .profile .profile-icon {width: 100%;height: 100%;border-radius: 50%; border: 1px solid #e9e9e9; margin-right: 0;}
.profile-input-wrap .profile .profile-icon i {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.profile-input-wrap .profile .profile-icon i::before {font-size: 80px;}
.profile-input-wrap input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}
.upload-files {display: inline-block;height: 40px;padding: 0 10px;vertical-align: middle;border: 1px solid #dddddd;width: 60%; color: #999999; box-sizing: border-box;}
.profile-input-wrap label {display: inline-block;padding: 10px 20px;color: #fff;vertical-align: middle;background-color: #999999;cursor: pointer;height: 40px;margin-left: 10px;line-height: 1; }
.map-input-wrap .tit {text-align: left;}
.map-input-wrap input {padding: .5rem;width: 100%; font-size: 14px;}
.map-input-wrap .hana-btn {white-space: nowrap;border: 1px solid #ff0000;margin-bottom: 0;}
.map-input-wrap .zipcode {display: flex;justify-content: space-between;  margin-bottom: 0;}
.map-input-wrap .zipcode .hana-btn {margin-left: 4px;}
.drop-box .ssw-search-list {display: none;}
.drop-box.active .ssw-search-list {display: block;}
.map-input-wrap .school-course {
    margin-bottom: 0.5rem;
}
.schools-list-btn {
    cursor: pointer;
    width: auto !important;
}
.search_school_list {
    margin: 0.5rem 0;
    padding: 1rem;
    height: 400px;
    overflow-y: auto;
    border: 1px solid #999;
}
.ssw-school .btn-label {font-size: 1.2rem; display: inline-block; margin-bottom: 0.5rem;}
.search_school_list li {border-bottom: 1px solid #eee; cursor: pointer;}
.drop-area {margin-bottom: .5rem;}
.service-check-wrap {
    display: flex;
    justify-content: space-between;
}
.service-check-wrap .chk-custom {position: relative; width: 45%;}
.service-check-wrap .chk-custom input {display: none;}
.service-check-wrap .chk-custom input + label {
    display: inline-block;
    height: 2.8rem;
    margin: 0;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    border: 1px solid #999999;
    line-height: 2.8rem;
    text-align: center;
    cursor: pointer;
}
.service-check-wrap .chk-custom input:checked + label {
    border-color: #191919;
    background: #191919;
    color: #fff;
}
.service-check-wrap .chk-custom .info-detail {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    background: #edeef2;
    padding: 1.25rem;
    font-size: 0.875rem;
    z-index: 1;
}
.service-check-wrap .chk-custom:hover .info-detail {
    display: block;
}
.form-content .terms-agree-all {
    border-bottom: 1px solid #999;
    padding-bottom: 8px;
}
.form-content .privacy-btn {
    float: none;
}
.apply-complete {
    text-align: center;
    margin-bottom: 2rem;
}
.apply-list table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    margin-bottom: 2rem;
}
.area-mypage-wrap  h1 {text-align: center; margin-bottom: 2rem;}
.apply-list table th,
.apply-list table td {
    border: 1px solid #999;
    padding: 8px;
}
.apply-list table td:nth-child(2) {
    width: 80%;
}
@media (min-width: 768px) {
    .login-form {padding: 40px 90px;margin: 3% auto;}
    .check-input-wrap-grid {display: grid;grid-template-columns: repeat(3,1fr);}
    .member-grid {display: grid; grid-template-columns: repeat(2,1fr);grid-gap: 2rem; margin-bottom: 1rem;}
    .applyForm .member-grid {grid-gap: 1rem;}
    .applyForm .member-grid .login-input-wrap {margin-bottom: 0;}
    .profile-input-wrap {margin-bottom: 0;}
}


/*****************************************
 *  input popup
 */
.input-popup-wrap {position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: #00000060;z-index: 200;display: none;}
.input-popup-wrap.open {display: block;}
.input-popup {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #fff;max-width: 800px;width: 96%;}
.input-popup::before {content: '';position: absolute;left: 50%;bottom: 0;transform: translate(-50%, 2px);height: 36px;width: 100%;background: linear-gradient(to bottom, #ffffff00, #ffffff);}
.input-popup h2 {position: relative;padding: 16px;background: #000;font-size: 20px;color: #fff;margin-bottom: 0;}
.input-popup h2 span {display: inline-block;position: absolute;right: 16px;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;cursor: pointer;}
.input-popup h2 span::before,
.input-popup h2 span::after {content: '';position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) rotate(45deg);width: 20px;height: 1px;background: #fff;}
.input-popup h2 span::after {transform: translate(-50%,-50%) rotate(-45deg);}
.input-popup-con {padding: 32px 16px;box-sizing: border-box;max-height: 65vh;overflow: scroll;}
.input-popup-con .privacy-btn {float: none;}
.login-input-wrap textarea {height: 120px;}
.login-input-wrap .hana-btn {width: 100%;border: none;}
@media (min-width: 768px) {
    .input-popup .check-input-wrap-grid {grid-template-columns: repeat(2,1fr);}
}

/*****************************************
 *  유튜브 삽입
 */
.youtube-wrap {max-width: 800px;margin: 0 auto;}
.youtube {position: relative; height: 0; padding-bottom: 56.25%; text-align: left;}
.youtube > iframe {position: absolute; width:100%; height:100%; border: none;}

/*****************************************
 *  페이지네이션
 */
.text-muted {display: none;}
.justify-content-sm-between {justify-content: center !important;}

/*****************************************
 *  스쿨 오른쪽상단 배너
 */
.hanaschool-banner-mo img {
width: 100%;
}
.hanaschool-banner-pc {display: none;}
@media (min-width: 768px) {
    .hanaschool-banner-mo {
        display: none;
    }
    .hanaschool-banner-pc {
        display: block;
    }
}



/*
    개인정보 수집 이용 동의 팝업
*/
#sidebar #ppopup-privacy { visibility: hidden; touch-action: none; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: rgba(0, 0, 0, 0.3); display: none;}
#sidebar #ppopup-privacy.open{display: block;}
#sidebar #ppopup-privacy.open { visibility: visible; touch-action: auto; pointer-events: visible; }
#sidebar #ppopup-privacy.open .popup-container { transform: translate(-50%, -50%); }
#sidebar #ppopup-privacy .small-popup { width: 28%; }
#sidebar #ppopup-privacy .popup-container { border-radius: 12px; background-color: #fff; width: 50rem; height: 29.25rem; padding: 1.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 100vh); overflow: hidden; z-index: 5; max-width: 82%; transition: all 0.5s ease; }
#sidebar #ppopup-privacy .popup-container .scroll { overflow-y: auto; padding-bottom: 1.5rem; height: 100%; }
#sidebar #ppopup-privacy .popup-container .scroll::-webkit-scrollbar{display: block; width: 6px; border-radius: 3px;}
#sidebar #ppopup-privacy .popup-container .scroll::-webkit-scrollbar-thumb{background: #DEDFE5; border-radius: 3px;}
#sidebar #ppopup-privacy .popup-container .scroll::-webkit-scrollbar-track{background: transparent;}
#sidebar #ppopup-privacy .popup-container .popup-title { border: none; min-height: initial; }
#sidebar #ppopup-privacy .popup-container .popup-title .heading-text { padding: 0; font-weight: bold; position: static; transform: none; font-size: 1.375rem;}
#sidebar #ppopup-privacy .popup-container .popup-content { width: 100%; padding: 0; height: calc(100% - 7.4rem); overflow: hidden; background-color: #F8F8F8; border-radius: 12px; font-size: 1rem; padding: 1rem; color: #999999;}
#sidebar #ppopup-privacy .popup-container .popup-content img { max-width: initial; object-fit: contain; margin: 0 auto; }
#sidebar #ppopup-privacy .popup-container .popup-close-btn { border: 1px solid #C8C5CA; border-radius: 8px; background-color: #fff; width: 9.25rem; height: 2.875rem; line-height: 2.875rem; margin: 1.5rem auto 0; display: block; }
#sidebar #ppopup-privacy .popup-close-x { padding: 1.5rem; position: absolute; top: 0; right: 0; }
#sidebar #ppopup-privacy .popup-close-x .close { background-image: url("https://s3.ap-northeast-2.amazonaws.com/img.hana-edu.co.kr/common/kakaotalk_id_close.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 1.5rem; height: 1.5rem; background-color: transparent; outline: 0; border: none; text-indent: -9999999999999%; padding: 0; }