@charset "utf-8";

@import url(./font/nanumsquare/nanumsquare.css);
@import url(./font/Nanum_Gothic/NanumGothic.css);

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(./font/Noto_Sans_KR/NotoSansKR-Thin.woff2) format('woff2'),
    url(./font/Noto_Sans_KR/NotoSansKR-Thin.woff) format('woff'),
    url(./font/Noto_Sans_KR/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(./font/Noto_Sans_KR/NotoSansKR-Light.woff2) format('woff2'),
    url(./font/Noto_Sans_KR/NotoSansKR-Light.woff) format('woff'),
    url(./font/Noto_Sans_KR/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(./font/Noto_Sans_KR/NotoSansKR-Regular.woff2) format('woff2'),
    url(./font/Noto_Sans_KR/NotoSansKR-Regular.woff) format('woff'),
    url(./font/Noto_Sans_KR/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(./font/Noto_Sans_KR/NotoSansKR-Medium.woff2) format('woff2'),
    url(./font/Noto_Sans_KR/NotoSansKR-Medium.woff) format('woff'),
    url(./font/Noto_Sans_KR/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(./font/Noto_Sans_KR/NotoSansKR-Bold.woff2) format('woff2'),
    url(./font/Noto_Sans_KR/NotoSansKR-Bold.woff) format('woff'),
    url(./font/Noto_Sans_KR/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(./font/Noto_Sans_KR/NotoSansKR-Black.woff2) format('woff2'),
    url(./font/Noto_Sans_KR/NotoSansKR-Black.woff) format('woff'),
    url(./font/Noto_Sans_KR/NotoSansKR-Black.otf) format('opentype');
}

body {
    background: #fff;
    background-size: cover;
}


.table {border-collapse:collapse;border:0;width:1700px;margin-top:200px;}
table .img {display:block;}
table .con {padding:5px 0 0 35px ; width:480px;}
table .login {padding-left:10px;}
table .form1 {padding-left:20px;width:392px;height:40px;font-size:15px;}
table .form2 {padding-left:20px;width:292px;height:40px;font-size:15px;}
table .span { font-family: 'Noto Sans KR';font-weight:700;font-size:17px;color:#fff;}
table .p {font-family: 'Nanum Gothic', sans-serif;font-size:13px;color:#fff;padding-left:50px;}
table .p .a{color:#fff;text-decoration: none;font-weight: 400;}

.button-wrap {
    width: 20.4vw;
    position: relative;
}

.button-wrap img {
    width: 100%;
}

.button-text {
    position: absolute;
    top: 50%;
    width: 20.4vw;
    transform: translate(-50%, -50%);
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 17px;
    color: #fff;
    text-align: center;
    font-weight: bold;
}

/* mms 반응형 */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

.col {
    flex: 1 0 0%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.text-center {
    text-align: center !important;
}

.d-flex {
    display: flex !important;
}

.flex-row {
    flex-direction: row !important;
}

.justify-content-center {
    justify-content: center !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

div .form1 {
    width: 20.4vw;
    height: 40px;
    font-size: 15px;
}

div .form2 {
    width: 70%;
    height: 40px;
    font-size: 15px;
}

div .span {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
}

div .span2 {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 1.02vw;
    color: #fff;
    width: 30%;
}

div .p {
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 13px;
    color: #fff;
}

div .p .a {
    color: #fff;
    font-weight: 400;
}