@charset "utf-8";
/* CSS Document */
@media (max-width: 1800px) {
}

@media (max-width: 1199px) {
    /* 데스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용) */
    html {
        font-size: 14px;
    }

    .br {
        display: none;
    }
}

@media (max-width: 900px) {
    /* 태블릿 디바이스 (가로 해상도가 900px 보다 작은 화면에 적용) */
    html {
        font-size: 12px;
    }

    .f-65 {
        font-size: 9.5vw;
    }

    .f-75 {
        font-size: 10vw;
    }

    .f-80 {
        font-size: 8.5vw;
    }

    .scroll-body-effect {
        background-size: auto 150vh;
    }

    .header-wrap {
        width: 100vw;
    }

    .container,
    .container2,
    .container3,
    .detail-container,
    .header-wrap,
    #footer {
        padding-left: 25px;
        padding-right: 25px;
    }

    .event-container {
        padding-left: 0;
        padding-right: 0;
    }

    .aside-nav-container,
    .event-card-wrap {
        display: none;
    }

    .mobile-button + label {
        display: block;
    }

    /* header */
    .header-nav-wrap {
        z-index: 10;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 80px;
        transform: translateX(100%);
        width: 100%;
        height: calc(100vh - 80px);
        transition: transform .5s;
    }

    .header-nav-wrap:after {
        content: '';
        z-index: -1;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: block;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .global-nav {
        display: flex;
        flex-direction: column;
        background-color: #fff;
    }

    .global-nav a {
        border-radius: 0;
    }

    .global-nav > li:first-of-type .global-nav-item:hover,
    .global-nav > li:nth-of-type(2) .global-nav-item:hover,
    .global-nav > li:last-of-type .global-nav-item:hover {
        background-color: transparent;
        cursor: auto;
    }

    .global-nav > li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 1em;
        padding-bottom: 1em;
        border-bottom: 1px solid #f0f0f0;
    }

    .global-nav > li:nth-of-type(3),
    .global-nav > li:nth-of-type(4) {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .global-nav > li:nth-of-type(3),
    .global-nav > li:nth-of-type(4),
    .global-nav > li:last-of-type {
        border-bottom: none;
    }

    .local-nav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .local-nav li {
        width: 33.3%;
    }

    /* footer */
    #footer {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .footer-wrap-top {
        order: 2;
        margin-bottom: 2rem;
        padding-top: 4rem;
        border-top: 1px solid #f0f0f0;
    }
    .footer-wrap-top img {
        transform: translateY(0);
    }
    .footer-wrap-center {
        order: 1;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

    .footer-wrap-bottom {
        order: 3;
    }

    .footer-nav {
        flex-direction: column;
    }

    .footer-nav > li {
        width: 100%;
        margin-bottom: 5rem;
    }

    .footer-nav > li > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        width: 100%;
    }

    .footer-nav > li > ul li {
        width: 33.3%;
    }

    .footer-nav-item {
        margin-right: 0;
        border-radius: 0;
    }


    .scroll-section {
        padding-left: 25px;
        padding-right: 25px;
    }

    .web-text {
        display: none;
    }

    #scroll-section-0 .fixed-el.left,
    #scroll-section-0 .fixed-el.right {
        display: none !important;
    }

    #scroll-section-0 .sticky-el.a img,
    #scroll-section-1 .sticky-el.a img,
    #scroll-section-2 .sticky-el.a img,
    #scroll-section-3 .sticky-el.a img,
    #scroll-section-4 .sticky-el.a img {
        width: 100%;
    }

    .effect-el {
        display: none;
        opacity: 0;
    }

    .effect-el.button {
        display: block;
    }

    .effect-el.mobile {
        display: block;
        opacity: 1;
    }

    #scroll-section-4 .effect-el.mobile {
        display: block;
        opacity: 0;
    }

    .sticky-el.b .description h2 {
        color: rgba(255, 255, 255, 1);
    }

    .sticky-el.b {
        right: -25px;
    }

    .sticky-el.b .description {
        margin-right: -25px;
        padding: 2rem;
        color: rgba(255, 255, 255, .8);
        border-radius: 5px;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.5);
    }

    #scroll-section-0 .sticky-el.b .description {
        background-color: #1C1919;
    }

    #scroll-section-1 .sticky-el.b .description {
        background-color: #292F33;
    }

    #scroll-section-2 .sticky-el.b .description {
        background-color: #212B29;
    }

    #scroll-section-3 .sticky-el.b .description {
        background-color: #2B2924;
    }

    #scroll-section-4 .sticky-el.b .description {
        background-color: #3D3E48;
    }

    .main-content-box {
        width: 100%;
        padding-left: 2.5%;
        padding-right: 2.5%;
    }

    .main-content-wrap {
        margin-left: 0;
        margin-right: 0;
    }

    .main-content-wrap .img-box {
        position: absolute;
        left: 0;
        right: auto !important;
        top: 100% !important;
        width: 100%;
    }

    .main-btn {
        width: 100%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .dots {
        margin-bottom: 20px;
    }

    .dots span {
        display: block;
        width: 15px;
        height: 15px;
    }

    .normal-content-box {
        margin-left: 0;
        margin-right: 0;
    }

    .normal-content-box.a {
        flex-direction: column;
    }
    .normal-content-box.a .txt-box {
        margin-bottom: 40px;
    }
    .normal-content-box.a .img-box {
        width: 100%;
    }

    .normal-content-box.b .img-wrap {
        flex-direction: column;
    }

    .normal-content-box.b .img-box {
        width: 100%;
    }

    /* detail page */
    .detail-box-wrap {
        margin-bottom: 150px;
    }

    .detail-box {
        padding-top: 0;
        padding-bottom: 0;
    }

    .detail-box > ul,
    .detail-box h2 {
        width: 100%;
    }

    .detail-box > ul > li {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 150px;
    }

    .detail-box > ul > li:last-of-type {
        margin-bottom: 0;
    }

    .detail-box .desc-box {
        width: 100%;
        margin-bottom: 30px;
        border-bottom: none;
    }

    .detail-box .img-box {
        position: static;
        transform: none;
        width: 100%;
    }

    .column-box,
    .detail-section,
    .detail-card-box.type3,
    .detail-card-box.type3 .detail-card-body,
    .detail-card-box.type3 .detail-card-header,
    .detail-icon-box {
        flex-direction: column;
    }

    .detail-card-box.type5 {
        flex-direction: column-reverse;
        padding-bottom: 10%;
    }

    .detail-card-box.type6 {
        flex-direction: column;
        padding-bottom: 10%;
    }

    .detail-card-box {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 6rem;
    }

    .detail-card-box:last-of-type {
        margin-bottom: 0;
    }

    .detail-card-box.type2 {
        margin-bottom: 3rem;
    }

    .detail-card-box.type3 .icon-cloud {
        width: 6em;
        height: 6em;
        margin-right: 0;
        margin-bottom: 2.5rem;
    }

    .detail-card-box.type3 .detail-card-header {
        align-items: center;
        text-align: center;
        margin-bottom: 3rem;
    }

    .detail-card-box.type3 .detail-card-body {
        align-items:center;
        text-align: center;
    }

    .detail-card-box.type3 .detail-card-body ul {
        margin-right: 0;
    }

    .detail-card-box.type4 {
        width: 100%;
        margin-bottom: 0;
    }

    .detail-card-box.type5 .detail-card-txt-box,
    .detail-card-box.type5 .detail-card-img-box,
    .detail-card-box.type6 .detail-card-txt-box,
    .detail-card-box.type6 .detail-card-img-box {
        width: 100%;
        margin-top: 0;
    }

    .detail-card-box.type5 .detail-card-name-box,
    .detail-card-box.type6 .detail-card-name-box {
        position: static;
    }

    .detail-card-box.type5 .detail-card-img-box,
    .detail-card-box.type6 .detail-card-img-box {
        margin-bottom: 2rem;
    }

    .detail-card-box.type7 {
        background-size: contain;
    }

    .detail-card-box.type7 .detail-card-txt-box {
        padding-top: 90%;
    }

    .detail-card-box.type8 {
        padding: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .detail-card-box.type10 {
        width: 100%;
        padding: 10%;
        margin-bottom: 4rem;
        text-align: center;
    }

    .detail-card-box.type10:last-of-type {
        margin-bottom: 0;
    }

    .thumbnail-box.main {
        flex-direction: column;
    }

    .thumbnail-box.main .thumbnail-img-box {
        width: 100%;
        height: 280px;
    }

    .thumbnail-box.main .txt-box {
        width: 100%;
    }

    .thumbnail-list li {
        flex-direction: column;
    }

    .thumbnail-list .thumbnail-box {
        width: 100%;
    }

    .update-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* 비즈니스 문의 에서만 사용 */
    .detail-business-img-box {
        width: 100%;
        margin-top: 20%;
    }

    .detail-icon-item {
        width: 100%;
        padding: 5%;
        margin-right: 0;
        border-radius: 10px;
        background-color: #f6f8fc;
    }

    .detail-card-name-box {
        font-size: 1.5rem;
        margin-top: 2rem;
    }

    .detail-img-list-box {
        width: 100%;
        margin-right: 0;
    }

    .detail-circular-linked-list {
        justify-content: center;
    }

    .icon-line {
        width: 100%;
        padding-left: 45%;
        padding-right: 45%;
    }

    .icon-line:before,
    .icon-line:after {
        width: 45%;
    }

    .detail-tab {
        padding-left: 0;
        padding-right: 0;
    }

    .input-search-box {
        margin-left: 0;
        margin-right: 0;
    }

    #faq-head-box {
        align-items: flex-start;
    }

    #faq-head-box p {
        margin-bottom: 1.5rem;
    }

    #faq-tab .detail-tab-item {
        flex: 1 1 auto;
        text-align: center;
    }

    #faq-tab .detail-tab-item:nth-last-child(-n + 4) {
        display: none;
    }

    .event-input-wrap {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 3rem;
        padding: 5%;
        margin-top: 10%;
        margin-left: 5%;
        margin-right: 5%;
        border-radius: 20px;
    }

    .img-web {
        display: none;
    }

    .img-mobile {
        display: block;
    }

    .figure-box img {
        width: 100% !important;
    }
} 

@media (max-width: 767px) {
    /* 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용) */
    html {
        font-size: 12px !important;
    }

    .detail-circular-linked-list li {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .detail-circular-linked-list li:before {
        display: none;
    }
} 

@media (max-width: 400px) {
    html {
        font-size: 10px !important;
    }

    .main-sub-content-box,
    .main-description {
        display: none;
    }

    .main-btn {
        margin-top: 15px;
        margin-bottom: 15px;
    }
}