@charset "UTF-8";

@import url('./reset.css');
@import url('./variables.css');
@import url('./font.css');
@import url('./fullpage.min.css');
@import url('./swiper-bundle.min.css');

html {
    font-size: 16px;
}

body {
    width: 100vw;
        background-color: var(--white);
    font-family: var(--font-family), -apple-system, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
    font-size: var(--font-size-18);
    font-weight: var(--font-w-regular);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--default);
    overflow: hidden;
}

/* ============== btn ==============  */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-w-medium);
}

/* ============== icon ==============  */
.i {
    display: block;
    margin-right: 8px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ============== tab ==============  */
.tab-list {
    display: flex;
    text-align: center;
}

.tab-list .tab-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.tab-content .tab-pane {
    display: none;
}
.tab-content .tab-pane.active {
    display: block;
}

/* ============== breadcrumb ==============  */

.breadcrumb {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
    font-size: var(--font-size-16);
    color: var(--txt-02);
    letter-spacing: -0.02em;
}

.breadcrumb li {
    position: relative;
    padding: 0 9px;
}

.breadcrumb li::before {
    content: '';
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    right: -1px;
    width: 2px;
    height: 2px;
    background-color: var(--default);
    border-radius: 100%;
}

.breadcrumb li:last-child {
    padding-right: 0;
}

.breadcrumb li:last-child::before {
    display: none;
}

.breadcrumb li.active {
    font-weight: var(--font-w-semibold);
    color: var(--primary);
}

.breadcrumb li a {
    display: flex;
    align-items: center;
}

.breadcrumb li .i {
    width: 24px;
    height: 24px;
    background-image: url('../images/i-home.png');
}

/* ============== header ==============  */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: transparent;
    color: var(--white);
    transition: all .5s ease;
    z-index: 1000;
}

#header::before {
    content: '';
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100vw;
    height: 1px;
    background-color: var(--border-02);
    opacity: 0;
    transition: all .5s ease;
}

#header .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 var(--sub-p);
    max-width: 1920px;
    width: 100%;
    height: var(--head-h);
}

#header h1 {
    position: relative;
    flex-shrink: 0;
    margin-right: var(--sub-p);
    width: 148px;
    height: 45px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/img-logo_w.png');
    transition: all .5s ease;
}

#header h1 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#header .header-inner > .nav {
    max-width: 1100px;
    min-width: 740px;
    width: 100%;
    height: var(--head-h);
    font-size: var(--font-size-20);
    font-weight: var(--font-w-semibold);
    text-align: center;
    transition: all .5s ease;
}

#header .header-inner > .nav > ul {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;

}

#header .header-inner > .nav > ul > li {
    position: relative;
    padding: 0 3.1%;
    min-width: 100px;
    width: fit-content;
    height: 100%;
    white-space: nowrap;
    transition: all .5s ease;
}

#header .header-inner > .nav > ul li:last-child {
    margin-right: 0;
}

#header.header-inner > .nav > ul:hover > li,
#header.header-inner > .nav > ul:focus > li,
#header.header-inner > .nav > ul:focus-visible > li {
    min-width: 20%;
    padding: 0 3.75%;
}

#header .header-inner > .nav > ul li > h2 a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--head-h);
    transition: all .5s ease;
}

#header .header-inner > .nav div {
    visibility: hidden;
    opacity: 0;
    font-size: 0;
    transition: opacity .5s ease,;
}

/* 배경이 블루 일 때 */
#header.bg-blue {
    background-color: var(--primary);
}

#header.bg-blue .header-inner > .header-full .header-btn .btn {
    background-color: var(--white);
    color: var(--primary);
}


/* 배경이 화이트 일 때 */
#header.bg-white {
    background-color: var(--white);
    color: var(--default);
}

#header.bg-white h1 {
    background-image: url('../images/img-logo.png');
}

#header.bg-white .header-inner > .nav > ul li.active > h2 {
    color: var(--primary);
}

#header.bg-white .header-inner > .header-full .header-btn .btn {
    color: var(--white);
}

#header.bg-white .header-inner > .header-full .header-btn .header-lang i {
    background-image: url('../images/i-lang_b.png');
}

#header.bg-white .header-inner > .header-full .header-btn .header-menu i {
    background-color: var(--default);
}

/* nav hover 및 focus 시 */

#header.nav-open {
    height: 600px !important;
    background-color: rgba(17, 17, 17, 0.6) !important;
    backdrop-filter: blur(20px);
    color: var(--white) !important;
}

#header.nav-open::before {
    opacity: 1;
}

#header.nav-open h1 {
    background-image: url('../images/img-logo_w.png') !important;
}

#header.nav-open .header-inner > .nav > ul > li {
    min-width: 20%;
    padding: 0 3.75%;
}

#header.nav-open .header-inner > .nav > ul li.active > h2 {
    color: inherit;
}

#header.nav-open .header-inner > .nav > ul > li > h2 a {
    height: var(--head-h);
}

#header.nav-open .header-inner > .nav > ul > li div {
    width: 100%;
    height: calc(100% - var(--head-h));
    padding: 50px 0;
    font-size: inherit;
    font-weight: var(--font-w-regular);
    letter-spacing: -0.02em;
    visibility:visible;
    opacity: 1;
}

#header.nav-open .header-inner > .nav > ul > li div li {
    margin-bottom: 36px;
}

#header.nav-open .header-inner > .nav > ul > li div li a {
    display: block;
    width: 100%;
    opacity: 0.7;
}

#header.nav-open .header-inner > .nav > ul > li:hover::before,
#header.nav-open .header-inner > .nav > ul > li:focus::before,
#header.nav-open .header-inner > .nav > ul > li:focus-visible::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    background-color: var(--primary);
    z-index: -1;
}

#header.nav-open .header-inner > .nav > ul > li:hover::after,
#header.nav-open .header-inner > .nav > ul > li:focus::after,
#header.nav-open .header-inner > .nav > ul > li:focus-visible::after {
    content: '';
    display: block;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--white);
}

#header.nav-open .header-inner > .nav > ul > li div li a:hover,
#header.nav-open .header-inner > .nav > ul > li div li a:focus,
#header.nav-open .header-inner > .nav > ul > li div li a:focus-visible {
    opacity:1;
}

#header.nav-open .header-inner > .header-full .header-btn .header-lang i {
    background-image: url('../images/i-lang.png') !important;
}

#header.nav-open .header-inner > .header-full .header-btn .header-menu i {
    background-color: var(--white) !important;
}

/* 왼쪽 헤더 메뉴 */

#header .header-inner > .header-full .header-btn {
    display: flex;
    justify-content: end;
    align-items: center;
}

#header .header-inner > .header-full .header-btn > button {
    margin-left: 40px;
}

#header .header-inner > .header-full .header-btn .btn {
    width: 140px;
    height: 40px;
    background-color: var(--primary);
    border-radius: 50em;
    letter-spacing: -0.02em;
    color: inherit;
}

#header .header-inner > .header-full .header-btn .header-lang {
    display: flex;
    font-size: var(--font-size-20);
    color: inherit;
}

#header .header-inner > .header-full .header-btn .header-lang i {
    width: 24px;
    height: 24px;
    background-image: url('../images/i-lang.png');
}

#header .header-inner > .header-full .header-btn .header-menu {
    position: relative;
    width: 60px;
    height: 20px;
    transition: all .5s ease;
}

#header .header-inner > .header-full .header-btn .header-menu i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    transition: opacity .5s ease;
    background-color: var(--white);
}

#header .header-inner > .header-full .header-btn .header-menu i:last-child {
    top: 16px;
}

#header .header-inner > .header-full .header-btn .header-menu:hover,
#header .header-inner > .header-full .header-btn .header-menu:focus,
#header .header-inner > .header-full .header-btn .header-menu:focus-visible {
    width: 43px;
}

#header .header-inner > .header-full .header-btn .header-menu.header-close-btn {
    width: 43px;
    height: 43px;
}

#header .header-inner > .header-full .header-btn .header-menu.header-close-btn i {
    top: 50%;
    transform: rotate(45deg);
}

#header .header-inner > .header-full .header-btn .header-menu.header-close-btn i:last-child {
    transform: rotate(-45deg);
}

#header .header-inner > .header-full .header-full-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(17, 17, 17, 0.9);
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.5s ease , opacity 0.5s ease;
}

#header .header-inner > .header-full .header-full-content .header-full-nav {
    display: flex;
    justify-content: center;
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
}

#header .header-inner > .header-full .header-full-content .header-full-nav > li {
    width: 20%;
    height: 100vh;
    padding: 0 20px;
    padding-top: calc(var(--head-h) * 2);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(52, 96, 226, 0) 100%);
    font-weight: var(--font-w-medium);
    transition: .5s ease all;
}

#header .header-inner > .header-full .header-full-content .header-full-nav > li:hover,
#header .header-inner > .header-full .header-full-content .header-full-nav > li:focus,
#header .header-inner > .header-full .header-full-content .header-full-nav > li:focus-visible {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(52, 96, 226, 0.85) 100%);
}

#header .header-inner > .header-full .header-full-content .header-full-nav > li > h2 {
    display: block;
    margin-bottom: 40px;
    font-size: var(--font-size-32);
    color: var(--white);
}

#header .header-inner > .header-full .header-full-content .header-full-nav > li div li {
    margin-bottom: 36px;
    font-size: var(--font-size-24);
    letter-spacing: -0.02em;
    color: var(--txt-01);
    transition: color .2s ease;
}


#header .header-inner > .header-full .header-full-content .header-full-nav > li div li:hover,
#header .header-inner > .header-full .header-full-content .header-full-nav > li div li:focus,
#header .header-inner > .header-full .header-full-content .header-full-nav > li div li:focus-visible {
    color: var(--white);
}

/* 모바일 메뉴 open */

#header.m-open .header-inner > .header-logo {
    background-image: url('../images/img-logo_w.png') !important;
    z-index: 1;
}

#header.m-open .header-inner > .nav {
    display: none;
}

#header.m-open .header-inner > .header-full .header-btn {
    position: relative;
    color: var(--white);
    z-index: 1;
}

#header.m-open .header-inner > .header-full .header-btn .header-lang i {
    background-image: url('../images/i-lang.png') !important;
}

#header.m-open .header-inner > .header-full .header-btn .header-menu.header-close-btn i {
    background-color: var(--white) !important;
}

#header.m-open .header-inner > .header-full .header-full-content{
    transform: translateY(0);
    opacity: 1;
}

/* 모바일 메뉴 open+배경이 블루 일 때 */
#header.m-open.bg-blue {
    background-color: transparent;
}

#header.m-open.bg-blue .header-inner > .header-full .header-btn .btn {
    background-color: var(--primary);
    color: inherit;
}

/* sub 메뉴 인터렉션 */
#header.fix-top {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

#header.fix-top .header-btn,
#header.fix-top.m-open .header-inner > .header-full .header-full-content{
    transform: translateY(var(--head-h));
    transition: transform 0.3s ease;
}


/* ============== footer ==============  */

.section.section-06 .fp-tableCell {
    padding-top: 0;
}

#footer {
    width: 100vw;
    background-color: var(--secondary);
    line-height: 100%;
    color: var(--white);
}

#footer .footer-inner {
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
    padding: 68px var(--sub-p) 40px;
}

#footer .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 60px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-01);
}

#footer .footer-logo {
    margin-bottom: 20px;
    width: 148.5px;
    height: 45px;
    background-image: url('../images/img-logo_w.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
}

#footer .footer-txt {
    display: flex;
}

#footer .footer-txt .footer-txt-link li {
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    font-weight: var(--font-w-semibold);
}

#footer .footer-txt .footer-txt-info {
    display: flex;
}

#footer .footer-txt .footer-txt-info li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 7.8125vw;
}

#footer .footer-txt .footer-txt-info .second {
    margin-top: 20px;
}

#footer .footer-txt .footer-txt-info h2 {
    color: var(--txt-01);
}

#footer .footer-txt .footer-txt-info p {
    margin-top: 8px;
    font-size: var(--font-size-16);
    font-weight: var(--font-w-regular);
}

#footer .footer-txt .footer-txt-info p a {
    display: flex;
    margin-bottom: 8px;
}

#footer .footer-txt .footer-txt-info .btn {
    margin-top: 20px;
    padding: 0 16px;
    height: 40px;
    border: 1px solid var(--border-02);
    font-size: var(--font-size-16);
    color: var(--white);
}

#footer .footer-txt .footer-txt-info .btn i {
    width: 24px;
    height: 24px;
    background-image: url('../images/i-download.png');
}

/* ============== quick-menu ==============  */
#quick-menu {
    position: fixed;
    right: 60px;
    bottom: 58px;
    z-index: 1010;
    color: var(--white);
}

#quick-menu a {
    display: block;
    width: 80px;
    height: 80px;
    margin-bottom: 11px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
}

#quick-menu a.btn-top {
    background-size: 36px;
    background-image: url('../images/i-top.png');
    background-color: var(--white);
    border: 1px solid var(--border-03);
}

#quick-menu li:last-child a {
    background-size: 28px;
    background-image: url('../images/i-ask.png');
    background-color: var(--primary);
    border-bottom-right-radius: 0;
}

#quick-menu li:last-child p {
    font-weight: var(--font-w-medium);
    letter-spacing: -0.02em;
    text-align: center;
}

#quick-menu.bg-white li:last-child p {
    color: var(--default);
}


/* ==============  animation ==============  */

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}
.delay-0 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.delay-1 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.delay-2 { -webkit-animation-delay: 1s; animation-delay: 1s; }
.delay-50 { -webkit-animation-delay: 0.05s; animation-delay: 0.05s; }
.delay-100 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.delay-150 { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; }
.delay-200 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.delay-250 { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.delay-300 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.delay-350 { -webkit-animation-delay: 0.35s; animation-delay: 0.35s; }
.delay-400 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.delay-450 { -webkit-animation-delay: 0.45s; animation-delay: 0.45s; }
.delay-500 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.delay-550 { -webkit-animation-delay: 0.55s; animation-delay: 0.55s; }
.delay-600 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.delay-650 { -webkit-animation-delay: 0.65s; animation-delay: 0.65s; }
.delay-700 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.delay-750 { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.delay-800 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
.delay-850 { -webkit-animation-delay: 0.85s; animation-delay: 0.85s; }
.delay-900 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
.delay-950 { -webkit-animation-delay: 0.95s; animation-delay: 0.95s; }
.delay-1000 { -webkit-animation-delay: 1s; animation-delay: 1s; }


@-webkit-keyframes fadeUp { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeUp { 
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeUp{
    opacity: 0; 
    -webkit-transform: translateY(50px); 
    transform: translateY(50px); 
}
.fadeUp.active { 
    -webkit-animation-name: fadeUp; 
    animation-name: fadeUp; 
}

@-webkit-keyframes fadeRight { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(40px); 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeRight { 
    0% { 
        opacity: 0; 
        transform: translateX(40px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeRight{
    opacity: 0; 
    -webkit-transform: translateX(50px); 
    transform: translateX(50px); 
}
.fadeRight.active { 
    -webkit-animation-name: fadeRight; 
    animation-name: fadeRight; 
}

@-webkit-keyframes fadeLeft { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-40px); 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeLeft { 
    0% { 
        opacity: 0; 
        transform: translateX(-40px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 
.fadeLeft{
    opacity: 0; 
    -webkit-transform: translateX(-50px); 
    transform: translateX(-50px); 
}
.fadeLeft.active { 
    -webkit-animation-name: fadeLeft; 
    animation-name: fadeLeft; 
}


@-webkit-keyframes fadeExpan { 
    0% { 
        opacity: 0; 
        -webkit-transform: scale(0.7); 
    }
    100% { 
        opacity: 1; 
        -webkit-transform: scale(1);
    } 
} 

@keyframes fadeExpan { 
    0% { 
        opacity: 0; 
        transform: scale(0.7); 
    } 
    100% { 
        opacity: 1; 
        transform: scale(1); 
    } 
} 
.fadeExpan{
    opacity: 0; 
    -webkit-transform: scale(0.7); 
    transform: scale(0.7); 
}
.fadeExpan.active { 
    -webkit-animation-name: fadeExpan; 
    animation-name: fadeExpan; 
}