@charset "utf-8";

@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-style: normal;
    src: url("../fonts/Pretendard-Thin.woff2") format("woff2"),
    url("../fonts/Pretendard-Thin.woff") format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-style: normal;
    src: url("../fonts/Pretendard-ExtraLight.woff2") format("woff2"),
    url("../fonts/Pretendard-ExtraLight.woff") format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/Pretendard-Light.woff2") format("woff2"),
    url("../fonts/Pretendard-Light.woff") format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/Pretendard-Regular.woff2") format("woff2"),
    url("../fonts/Pretendard-Regular.woff") format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/Pretendard-Medium.woff2") format("woff2"),
    url("../fonts/Pretendard-Medium.woff") format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-style: normal;
    src: url("../fonts/Pretendard-SemiBold.woff2") format("woff2"),
    url("../fonts/Pretendard-SemiBold.woff") format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/Pretendard-Bold.woff2") format("woff2"),
    url("../fonts/Pretendard-Bold.woff") format("woff");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-style: normal;
    src: url("../fonts/Pretendard-Black.woff2") format("woff2"),
    url("../fonts/Pretendard-Black.woff") format("woff");
}

:root {
    --bg-color: #381056;
    --top-padding: 400px;
}
body {
    font-size: 16px;
    font-family: 'Pretendard', dotum, sans-serif;
    background-color: var(--bg-color);
    line-height: normal;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    transition: background-color 1.5s ease;
}

label, input, button, select, textarea, pre {
    font-family: 'Pretendard', dotum, sans-serif;
}
.inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
.flex_center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section {
    position: relative;
    padding-top: var(--top-padding);
}
.sub {
    position: relative;
    padding: 60px 0 200px;
}
.hide {
    display: none;
}
.video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.height {
    height: 100%;
}
.pc_hidden {
    display: none !important;
}
br.br_t {
    display: none;
}
br.br_m {
    display: none;
}

@media screen and (max-width: 1279px) {
    .inner {
        padding: 0 20px;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --top-padding: 200px;
    }
    br.br_p {
        display: none;
    }
    br.br_t {
        display: inline;
    }
    .pc_hidden {
        display: initial !important;
    }
    .tablet_hidden {
        display: none !important;
    }
}

@media screen and (max-width: 800px) {
    .content {
        overflow-x: hidden;
    }
    br.br_p {
        display: none;
    }
    br.br_t {
        display: none;
    }
    br.br_m {
        display: inline;
    }
    .inner {
        padding: 0 16px;
    }
    .mobile_hidden {
        display: none !important;
    }
    .tablet_hidden {
        display: initial !important;
    }
    .m_video {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        text-align: left;
    }
    .m_video iframe {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
}