/* ================================================================
===================================================================

/*--------------------------------------------------
    Fonts
---------------------------------------------------*/

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

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

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

/*Noto Sans KR*/
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url('../fonts/noto-sans-kr-v27-latin-100.woff2') format('woff2'),
        url('../fonts/noto-sans-kr-v27-latin-100.woff') format('woff'),
        url('../fonts/NotoSansKR-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-sans-kr-v27-latin-regular.woff2') format('woff2'),
        url('../fonts/noto-sans-kr-v27-latin-regular.woff') format('woff'),
        url('../fonts/NotoSansKR-Regular.otf') format('opentype');
}

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

.text-font1{font-family: 'Pretendard', sans-serif; font-weight: 100;}
.text-font2{font-family: 'Pretendard', sans-serif; font-weight: 500;}
.text-font3{font-family: 'Pretendard', sans-serif; font-weight: 700;}
.text-font4{font-family: 'Noto Sans KR', sans-serif; font-weight: 100;}
.text-font5{font-family: 'Noto Sans KR', sans-serif; font-weight: 400;}
.text-font6{font-family: 'Noto Sans KR', sans-serif; font-weight: 700;}

/*--------------------------------------------------
    Settings
---------------------------------------------------*/
html{ font-size: 1rem; background: #FCFCFF;}
blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, nav, ol, p, pre, select, td, textarea, th, ul {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border: 0; font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; font-size: 100%; vertical-align: middle;}

input[type="text"],input[type="email"],input[type="number"],button,input[type="submit"],input[type="reset"],button,input[type="tel"],button,input[type="password"],input[type="url"],input[type="search"],input[type="file"],button,textarea {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border:none; border-radius: 0; background:none; font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; font-size: 100%;-webkit-appearance: none ; appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-box-sizing: border-box;}

h1, h2, h3, h4, h5, h6 {font-size: inherit; line-height: inherit}
body { position: relative;  font-size: 16px; line-height: 1.7; color: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: transparent; word-wrap: break-word; word-break: keep-all; text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; font-weight: 400; overflow-x: hidden;}
blockquote, q {quotes: none}
button, input {-webkit-border-radius: 0;border-radius: 0;border: 0}
button {background-color: transparent}
fieldset, img {border: 0}
img {vertical-align: top}
ol, ul {list-style: none}
address, em {font-style: normal}
a, a:active, a:hover{color: inherit; text-decoration: none}
address, caption, cite, code, dfn, em, var {font-style:normal;}
iframe {overflow: hidden; margin: 0; border: 0; padding: 0; vertical-align: top}
mark {background-color: transparent}
i {font-style: normal}

:root {
    /*--------------------------------------------------
        Colors
    ---------------------------------------------------*/
    --color-navy-1: #0F0C29;
    --color-navy-2: #1A1A4D;
    --color-navy-3: #575569;
    --color-navy-4: #CFCED4;
    --color-navy-5: #F3F3FB;
    --color-orange-1: #F12711;
    --color-orange-2: #F53C05;

    /* Dark Colors */
    --color-dark-1: #000000;

    /* Light Colors */
    --color-light-1: #FFFFFF;

    /* Alert Colors */
    --color-alert-1: red;

    /*--------------------------------------------------
	heading
    ---------------------------------------------------*/

    /* xxl heading */
    --xxl-font-size: 128px;

    /* xxl heading */
    --xl-font-size: 94px;

    /* xxl heading */
    --lg-font-size: 72px;

    /* h1 heading */
    --h1-font-size: 64px;
    /* --h1-line-height: 1.4em; */

    /* h2 heading */
    --h2-font-size: 48px;
    --h2-line-height: 1.4em;

    /* h3 heading */
    --h3-font-size: 32px;
    /* --h3-line-height: 1.6em; */

    /* h4 heading */
    --h4-font-size: 24px;

    /*--------------------------------------------------
	Paragraph
    ---------------------------------------------------*/
    --p-font-xxl: 56px;
    --p-font-xl: 40px;
    --p-font-lg: 32px;
    --p-font-md: 24px;
    --p-font-sm: 20px;
    --p-font-xs: 18px;
    --p-font-xxs: 16px;

    /*--------------------------------------------------
	Padding
    ---------------------------------------------------*/
    --pd-xxxl: 128px;
    --pd-xxl: 112px;
    --pd-xl: 96px;
    --pd-lg: 80px;
    --pd-md: 64px;
    --pd-sm: 48px;
    --pd-xs: 32px;
    --pd-xxs: 24px;
    --pd-xxxs: 16px;

    /*--------------------------------------------------
	Margin
    ---------------------------------------------------*/
    --mg-xxxl: 128px;
    --mg-xxl: 112px;
    --mg-xl: 96px;
    --mg-lg: 80px;
    --mg-md: 64px;
    --mg-sm: 48px;
    --mg-xs: 32px;
    --mg-xxs: 24px;
    --mg-xxxs: 16px;
}

/*--------------------------------------------------
	01. Layout
---------------------------------------------------*/
html {
    color: var(--color-navy-2);
}
.main_section {
    height: calc(100vh - 90px);
}

.container{
    max-width: 1320px;
    margin: 0 auto;
}
.section_container {
    padding: 80px 0;
}

/*--------------------------------------------------
	Layout Responsive
---------------------------------------------------*/
@media screen and (max-width: 1439px){
    .container{
        max-width: 952px;
    }
}
@media screen and (max-width: 1023px){
    .section_inner{
        margin: 0 auto;
        padding: 80px 0;
    }
    .container{
        max-width: 630px;
        padding: 0;
    }
}
@media screen and (max-width: 767px){
    .section_inner{
        margin: 0 auto;
        padding: 80px 24px;
    }
    .container {
        max-width: 364px;
    }
}

/*--------------------------------------------------
	02. Button
---------------------------------------------------*/
.button-solid-1 {
    background: var(--color-orange-1);
    color: var(--color-light-1);
    font-size: var(--p-font-sm);
    font-weight: 700;
}

.button-disable-1 {
    background: var(--color-navy-4);
    color: var(--color-navy-3);
    font-size: var(--p-font-sm);
    font-weight: 700;
}

/*--------------------------------------------------
	03. view_more_btn
---------------------------------------------------*/
.view_more_btn {
    color: var(--color-light-1);
    border-radius: 12px;
    margin: var(--mg-xs) 0;
    padding: var(--pd-xxs) var(--pd-sm);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    /* box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
        7px 7px 20px 0px rgba(0, 0, 0, .1),
        4px 4px 5px 0px rgba(0, 0, 0, .1); */
    outline: none;
    background: var(--color-navy-1);
    border: none;
    z-index: 1;
}
.view_more_btn:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: var(--color-orange-1);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.view_more_btn:hover {
    color: #fff;
}
.view_more_btn:hover:after {
    left: 0;
    width: 100%;
}
.view_more_btn:active {
    top: 2px;
}
/*--------------------------------------------------
---------------------------------------------------*/


/*--------------------------------------------------
	04. Button
---------------------------------------------------*/
.dash {
    color: var(--color-navy-3);
}

/*--------------------------------------------------
	05. Text
---------------------------------------------------*/
.contents_title_xxl {
    font-size: var(--xxl-font-size);
}
.contents_title_xl {
    font-size: var(--xl-font-size);
}
.contents_title_h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
}
.contents_title_h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
}
.contents_title_h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
}
.contents_title_h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
}
.contents_para_xl {
    font-size: var(--p-font-xl);
    margin: 60px 0;
}
.contents_para_lg {
    font-size: var(--p-font-lg);
    margin: 56px 0;
}
.contents_para_md {
    font-size: var(--p-font-md);
    margin: 52px 0;
}
.contents_para_sm {
    font-size: var(--p-font-sm);
    margin: 48px 0;
}
.contents_para_xs {
    font-size: var(--p-font-xs);
    margin: 44px 0;
}

/*--------------------------------------------------
	Text Responsive
---------------------------------------------------*/
@media screen and (max-width: 1023px){
    .contents_title_xxl {
        font-size: var(--lg-font-size);
    }
    .contents_title_h1 {
        font-size: var(--h2-font-size);
        line-height: var(--h2-line-height);
    }
    .contents_title_h2 {
        font-size: var(--h3-font-size);
        line-height: var(--h3-line-height);
    }
    .contents_title_h3 {
        font-size: var(--h4-font-size);
        line-height: var(--h4-line-height);
    }
    .contents_para_lg {
        font-size: var(--p-font-md);
    }
    .contents_para_md {
        font-size: var(--p-font-sm);
    }
    .contents_para_sm {
        font-size: var(--p-font-xs);
        margin: 30px 0;
    }
    .contents_para_xs {
        margin: 24px 0;
    }
}
@media screen and (max-width: 767px){

}