@charset "utf-8";

html {
    font-family: 'Spoqa Han Sans', 'Apple SD Gothic Neo', '나눔고딕', NanumGothic, Sans-serif;
    letter-spacing: -.03em;
    word-spacing: -.04em;
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
    line-height: 1.7em;
}


header#siteheader nav>ul>li.login {
    display: none;
    visibility: hidden;
}

@media screen and (min-width: 1168px) {
    html {
        font-size: 22px;
    }
}

@media screen and (max-width: 1167px) {
    #sitewrap {
        width: unset;
        min-width: unset;
    }

    header#siteheader,
    #contentswrapper,
    footer#sitefooter {
        padding: 0 .5rem;
        width: 100%;
    }


    footer#sitefooter {
        padding-top: 1rem;
        padding-bottom: 5rem;
    }

    footer#sitefooter h1#footlogotype {
        float: none;
        margin: 0 auto;
        width: unset;
        background-size: 11.5em auto;
        background-position: center top;
    }

    footer#sitefooter h1#footlogotype a {
        line-height: 2em;
    }

    footer#sitefooter h1#footlogotype .location {
        text-align: center;
        font-size: .65rem;
        padding-bottom: 2em;
    }

    footer#sitefooter ol.footmenu {
        margin: 0 auto;
        float: none;
        width: unset;
        clear: both;
        text-align: center;
        position: relative;
    }

    footer#sitefooter ol.footmenu:after {
        content: "";
        display: block;
        visibility: visible;
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 4em;
        height: 1px;
        background: #fff;
    }

    footer#sitefooter ol.footmenu li {
        display: inline-block;
    }

    footer#sitefooter ol.footmenu li a {
        display: block;
        font-size: .7rem;
        line-height: 1.8em;
        padding: 0 0.4em;
        border-radius: unset;
    }

    footer#sitefooter .copy {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
        font-weight: 300;
    }

    header#siteheader h1#toplogo a.logo {
        width: 25vw;
    }

    header#siteheader nav {
        width: 73vw;
    }



    header#siteheader nav>ul {
        font-size: 2vw;
    }

    header#siteheader nav>ul>li>a {
        padding: 1em;
    }

    #container_title {
        font-size: 1.4rem;
        line-height: 1.8em;
    }

    #container_title .contitle:before {
        left: 0.6em;
    }

    #container_title .chtitle {
        font-size: 1.5rem;
        width: unset;
        right: 0;
        line-height: unset;
        transform: translate(-2em, -50%);
    }

    #container_title .chtitle:after {
        width: 4em;
        height: 4em;
    }

    #container {
        font-size: .85rem;
        width: calc(100% - 10.3em);
    }

    aside#rightbar {
        font-size: .85rem;
        width: 10em;
    }

    aside#rightbar ol.sidemenu li a {
        font-size: .85rem;
        line-height: 2.7em;
    }
}

@media screen and (min-width: 791px) {
    header .toggle {
        display: none !important
    }
}

@media screen and (max-width: 790px) {
    header#siteheader {
        height: unset;
        padding-bottom: 1rem;
    }

    header#siteheader h1#logo {
        position: relative;
        top: unset;
        left: unset;
        padding-top: 1em;
        width: 50%;
        height: unset;
        margin: auto;
        background: none;
    }

    header#siteheader h1#logo a.logo {
        background: url(../images/logo_top.png)center center no-repeat;
        background-size: 100% auto;
        line-height: unset;
        margin: 0 auto;
        width: 100%;
        height: 0;
        padding-top: 20%;
    }

header#siteheader nav>ul>li.login {
    visibility: visible;
    display: block; 
}


.hc-offcanvas-nav li.login {background: #ffffff38;}
.hc-offcanvas-nav li.login .nav-item-link {
    text-align: center;
    font-weight: 300;
}


    ul#headerlink {
        display: none;
        visibility: hidden;
    }

    #wrapper {
        background: none;
        margin: unset;
        border-radius: unset;
        padding: 0;
        margin: 0;
    }

    #container {
        float: none;
        width: unset;
        box-shadow: unset;
        margin: 0;
        padding: .5rem;
        min-height: unset;
        padding-bottom: 2em;
        border-radius: 0.5rem;
    }

    .index #container {
        padding: 0;
    }

    .current ul {
        display: block !important;
    }

    #container_title {}

    #container_title:after {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 200vw;
        height: 2.8em;
        border-radius: 0;
        background: #00000073;
    }

    #container_title .chtitle {
        position: relative;
        top: unset;
        right: unset;
        transform: unset;
        text-align: left;
        font-size: inherit;
        font-weight: inherit;
        display: inline-block;
        padding-right: 1em;
    }

    #container_title .contitle {
        display: inline-block;
        padding: unset;
        font-weight: 600;
    }

    #container_title .chtitle:after,
    #container_title .contitle:before {
        visibility: hidden;
        display: none;
    }

    #container_title .chtitle:after {
        content: '';
        position: absolute;
        width: 1px;
        height: 1.4em;
        background: #fff;
        display: block;
        visibility: visible;
        box-shadow: none;
        border-radius: 0;
        border: none;
        left: unset;
        right: 0;
        transform: translate(-0.45em, -50%);
    }

    #container_title .admlnk {
        position: relative;
        width: unset;
        height: unset;
        float: right;
        top: unset;
        transform: unset;
        display: inline-block;
        right: unset;
        font-size: 1rem;
        font-weight: 300;
        color: #fff;
        padding: 0 .5em;
        border-radius: unset;
        margin-left: 1em;
        line-height: unset;
    }

    aside#rightbar {
        float: none;
        width: unset;
        display: none;
    }

    header#siteheader nav {
        display: none;
    }

    header .toggle {
        right: 20px;
    }

    .hc-nav-trigger span,
    .hc-nav-trigger span::before,
    .hc-nav-trigger span::after {
        background: #fff;
    }

    .hc-offcanvas-nav .nav-container,
    .hc-offcanvas-nav .nav-wrapper,
    .hc-offcanvas-nav ul,
    .hc-offcanvas-nav .nav-container .hc-offcanvas-nav .nav-wrapper,
    .hc-offcanvas-nav ul {
        background: #383838;
    }

    .hc-offcanvas-nav .nav-content>.nav-close:first-child a,
    .hc-offcanvas-nav .nav-title+.nav-close a.has-label,
    .hc-offcanvas-nav li.nav-close a,
    .hc-offcanvas-nav .nav-back a {
        background: none;
        border: none;
        background: #0000001f;
    }

    .hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link {
        border: none;
    }

    .hc-offcanvas-nav .nav-item-link,
    .hc-offcanvas-nav li.nav-close a,
    .hc-offcanvas-nav .nav-back a {
        border: none;
    }

    .hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link+a {
        border: none;
    }

    .hc-offcanvas-nav a.nav-next {
        border: none;
        background: #0000001f;
    }

    .hc-offcanvas-nav .nav-content>.nav-close {
        display: none;
    }

    .hc-offcanvas-nav .nav-content>h2,
    .hc-offcanvas-nav .nav-content>h3,
    .hc-offcanvas-nav .nav-content>h4,
    .hc-offcanvas-nav .nav-content>h5,
    .hc-offcanvas-nav .nav-content>h6 {
        color: inherit;
    }

    .hc-offcanvas-nav .nav-item-link,
    .hc-offcanvas-nav li.nav-close a,
    .hc-offcanvas-nav .nav-back a {
        font-size: 0.825rem;
        font-weight: 600;
        font-family: 'Spoqa Han Sans', SANS-SERIF;

    }

    .hc-offcanvas-nav::after,
    .hc-offcanvas-nav .nav-wrapper::after {
        z-index: -1;
    }

    #sitewrap.index:before {
        height: 26rem;
    }

    #main_message {
        width: 100%;
        height: 19rem;
    }

    #main_message .wrap {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
    }

    #main_message .wrap h1 {
        font-size: 7vw;
        text-shadow: 0 0 8px black;
        line-height: 2em;
    }

    #main_message .wrap h1:before {
        width: 2.8em;
        height: 2px;
    }

    #main_message .wrap p {
        font-size: 1rem;
        font-weight: 600;
    }


    .sectionwrap section {
        width: unset;
        margin: 1rem 0;
    }

    .sectionwrap section.facebook {
        position: relative;
        top: unset;
        right: unset;
        width: unset;
        height: unset;
        border: none;
    }

    .sectionwrap section.facebook .fb-page {
        display: none;
        visibility: hidden;
    }

}

@media screen and (max-width: 640px) {

    body,
    html,
    header#siteheader,
    #contentwrapper,
    footer#sitefooter {
        width: 100%;
        min-width: 320px;
        /*overflow-y: scroll;*/
        overflow-x: hidden;
    }

    header#siteheader:before,
    #head_wrapper:before {
        display: none;
    }

    header#siteheader {
        height: 80px;
    }

    header#siteheader.info_:before,
    header#siteheader.queer_:before,
    header#siteheader.faq_:before,
    header#siteheader.contents_:before,
    header#siteheader:before {
        /*        content: '';
        background: linear-gradient(#94949470, transparent);
        display: block;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 5rem;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
*/
    }

    #head_wrapper {
        height: 100%;
    }

    header#siteheader:after,
    #contentwrapper:before {
        display: none;
        visibility: hidden;
    }

    header#siteheader.index {
        height: 70vh;
        max-height: calc(714px * .7);
    }

    .index #head_wrapper:before {
        display: block;
        height: 80px;
    }

    .index #head_wrapper {
        height: 80px;
    }

    #container,
    .index #container {}

    ul.breadcrumb {
        margin: 0 -0.625rem;
        padding: 0;
        padding-right: 0.625rem;
        height: unset;
        background: #0003;
        color: #fff;
        white-space: nowrap;
    }

    ul.breadcrumb li:last-child a,
    ul.breadcrumb li a {
        color: #fff;
    }

    ul.breadcrumb li a:after {
        background: #fff;
    }

    .foot_header {
        padding: 2rem 0.5rem;
        text-align: center;
    }

    #bo_sch select,
    #bo_sch .sch_input,
    #bo_sch .sch_btn {
        /*margin: .5em 0 .5em .5em;*/
    }

    .btn_bo_user li.leftalign {
        display: none;
    }

    h1#foot_logo {
        float: none;
        clear: both;
        margin: 0 auto;
        padding-bottom: 2vh;
        margin-bottom: 2vh;
        width: fit-content;
        border-bottom: solid 1px #777;
    }

    h1#foot_logo a {
        margin: 0 auto;
        width: 22vh;
        height: 7vh;
    }

    .foot_header span {
        text-align: center;
        width: fit-content;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-block;
        margin: 0 2vw;
        display: inline-block;
    }

    .foot_header .location {
        padding-top: .5rem;
    }

    .foot_header span.fax {
        visibility: hidden;
        display: none;
    }

    .foot_header span.tel {}

    .foot_header span.tel a {
        line-height: 2.56rem;
        background: #65665c;
        color: #fff;
        display: block;
        font-size: 1.2rem;
        font-weight: 800;
        padding: 0 1.1rem;
        border-radius: 1.5rem;
        margin: 0.9rem 0;
    }

    .foot_header span.tel a:before {
        content: 'Tel.';
        padding-right: 0.4em;
    }

    .foot_header span:before {
        content: none;
    }

    .overtherain {
        float: none;
        margin: 0 auto;
    }

    .overtherain a {
        padding-top: 17%;
        background-position: center center;
        margin-top: 1em;
    }

    ol.footmenu {
        visibility: hidden;
        display: none;
    }

    #copyright {
        font-size: .75rem;
        height: unset;
        line-height: 1.7em;
        padding: 0.9em 0 3em;
    }

    #index_top>h1 {
        font-size: 5vw;
        color: #777777;
        padding: 1em 0 .5em 0;
    }

    #index_top>p {
        border-top: solid 1px #aaa;
        color: #777777;
        max-width: 60vw;
        word-break: keep-all;
        font-size: 4.3vw;
        line-height: 1.4em;
        margin: 0 auto;
        padding: 1em 0;
    }

    #index_top ul.together {}

    #index_top ul.together li {
        float: none;
        margin: 0 auto 2rem !important;
        width: unset;
        width: calc(100% - 5rem);
        height: unset;
        clear: both;
    }

    #index_top ul.together li .wrap,
    #index_top ul.together li .wrap i.fas,
    #index_top ul.together li .wrap h2,
    #index_top ul.together li .wrap p,
    #index_top ul.together li .wrap a.viewmore,
    #index_top ul.together li .wrap:hover,
    #index_top ul.together li .wrap:hover i.fas,
    #index_top ul.together li .wrap:hover h2,
    #index_top ul.together li .wrap:hover p,
    #index_top ul.together li .wrap:hover a.viewmore {
        position: relative;
        display: block;
        top: unset;
        left: unset;
        bottom: unset;
        right: unset;
        transform: unset;
        transition: none;
        width: unset;
        height: unset;
        padding: unset;
        margin: unset;
        background-color: transparent;
        color: unset;
        border-radius: 0;
        visibility: visible;
        opacity: 1;
    }

    #index_top ul.together li .wrap:hover,
    #index_top ul.together li .wrap {
        margin: 0 auto;
        height: fit-content;
        background: #eaeaea;
        width: 100%;
        padding: 3em 0;
        border-radius: 0.6em;
    }

    #index_top ul.together li .wrap:hover i.fas,
    #index_top ul.together li .wrap i.fas {
        color: #fff;
        text-shadow: 0 0 6px #000;
        margin-bottom: 1.7rem;
        font-size: 25vw;
    }

    #index_top ul.together li .wrap:hover h2,
    #index_top ul.together li .wrap h2 {
        font-size: 6vw;
        color: #fff;
        text-shadow: 0 0 5px #000;
    }

    #index_top ul.together li .wrap:hover p,
    #index_top ul.together li .wrap p {
        font: 800 4.3vw/1.4em sans-serif;
        padding: 1em 0;
        color: #444;
    }

    #index_top ul.together li .wrap:hover a.viewmore,
    #index_top ul.together li .wrap a.viewmore {
        width: fit-content;
        margin: 0 auto;
        font: 800 4vw/2.4em sans-serif;
        background: #000;
        color: #fff;
        padding: 0 2em;
        border-radius: 1.2em;
        border: solid 2px #fff;
        box-shadow: 0 0 5px #000;
    }

    #index_news>div {
        float: none;
        width: unset;
        margin: 0;
        padding: 2rem 0;
        margin-bottom: 1rem;
    }

    #newsletter {
        float: none;
        clear: both;
        margin-bottom: -2rem;
        padding-bottom: 1em;
    }

    #newsletter:before {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #newsletter h2 {
        line-height: 1.5em;
        padding: .5em 0;
        font-size: 5vw;
        text-align: center;
        display: block;
        width: 12em;
        margin: 0 auto;
        word-break: keep-all;
    }

    #newsletter a {
        position: relative;
        top: unset;
        right: unset;
        transform: unset;
        margin: 0 auto;
        font-size: 4vw;
        line-height: 2.5em;
        padding: 0 1em;
    }

    #top_btn {
        display: none;
        visibility: hidden;
        z-index: -999;
    }
}

@media screen and (max-width: 425px) {
    body:before {
        display: none;
        visibility: hidden;
    }

    header#siteheader h1#logo {
        width: calc(100% - 110px);
        padding-top: 0.6em;
        margin: 0;
    }

    #sitewrap.index:before {
        height: 60vh;
    }

    #container,
    .index #container {
        z-index: +100;
        display: block;
        overflow: hidden;
    }

    #main_message {
        height: calc(60vh - 7rem);
    }

    #main_message .wrap {
        width: 90%;
        text-align: center;
    }

    #main_message .wrap h1 {
        font-size: 11vw;
    }

    #main_message .wrap h1:before {
        left: 50%;
        transform: translateX(-50%);
    }

    #main_message .wrap p {
        font-size: 5vw;
    }

}