/*******************************************************
*/
/* setting.css
 *******************************************************/

/* font-family */
/*===================================================*/
body, html{font-family:'Pretendard','Paperlogy','Noto Sans KR','GmarketSans', "Helvetica Neue",Helvetica,Arial,sans-serif !important;}
input, button {font-family:'Pretendard','Paperlogy','Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
textarea, select,button {font-family:'Pretendard','Paperlogy','Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
/*===================================================*/

.material-icons,.material-icons-outlined,.material-icons-sharp,.material-icons-round,.material-icons-two-tone{font-size: inherit;}


/* form-control */
.control-label {display: inline-block;width: auto;margin-right: 0.25rem;font-size:14px;font-weight:500;color:#515151;white-space: nowrap;padding-right:8px;}
.form-control {display: block;width: 100%;height: calc(1.5em + 1rem + 2px);padding: 0.5rem 0.75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: 0.125rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.form-btn{transition: 0.2s all;padding: 8px 35px;height: auto;background: #222;color: #fff;box-shadow: none;border: none;font-size: 15px;text-shadow: none;}
.form-btn:hover{background:var(--primary);}
.btn:disabled, .btn[disabled], .btn.disabled, input[disabled]{opacity: 0.6;cursor: not-allowed;pointer-events: none;background-color: #e9ecef !important;border-color: #dee2e6 !important;color: #6c757d !important;box-shadow: none !important;}

/* table */
.table_wrap table{width:100%;min-width:750px;}
.table_wrap table td {text-align: center;padding:8px;}

@media screen and (max-width: 768px) {
    .table_wrap {overflow-x: auto;white-space: nowrap;}
}

/*******************************************************
*/
/* Layout
 *******************************************************/
:root {
    /*===================================================*/

    /* Container */
    .main-sec {padding:15.625rem 0;overflow: hidden;}
    .sub-sec {padding:140px 0;overflow: hidden;}


    --container-max-width:1230px;
    --container-wide-max-width:calc(100% - 8rem);
    --container-padding: 0 15px;
    --border-radius:1.25rem;

    --header-height:90px;
    --mobile-header-height:60px;

    --full-height: 100vh;
    --sub-top-height:21.875rem;

    /* Section Padding */
    --section-padding-desktop: 120px 0;
    --section-padding-laptop:  100px 0;
    --section-padding-tablet:  70px 0;
    --section-padding-mobile:  70px 0;

    --section-sub-padding-desktop:100px 0;
    --section-sub-padding-tablet:70px 0;
    --section-sub-padding-mobile:70px 0;
}
/*===================================================*/

/* header */
@media screen and (max-width: 1200px) {  :root {--header-height: var(--mobile-header-height);}  }

/* container, section-padding */
.sub-content{padding-top:var(--header-height) !important;background:radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);position: relative;}
body .container {max-width: var(--container-max-width);padding: var(--container-padding);width: 100%;margin: 0 auto;position: relative;overflow: hidden;}
body .container.wide {max-width: var(--container-wide-max-width);}
body .main_container {padding-top: 0;}

@media screen and (max-width:1024px) {body .container.wide{max-width:100%;}}


/* section-padding */
@media screen and (max-width:1600px) {  .main-sec{padding:9.375rem 0 !important;}} @media screen and (max-width:1400px) {  .main-sec{padding: var(--section-padding-desktop) !important;}  .sub-sec {padding: var(--section-sub-padding-desktop) !important;}  }  @media screen and (max-width:1200px) {  .main-sec{padding: var(--section-padding-laptop) !important;}  .sub-sec {padding: var(--section-sub-padding-tablet) !important;}  }  @media screen and (max-width:768px) {  .main-sec{padding: var(--section-padding-tablet) !important;}  }  @media screen and (max-width:480px) {  .main-sec{padding: var(--section-padding-mobile) !important;}  .sub-sec {padding: var(--section-sub-padding-mobile) !important;}  }


/* border radius */
.border-radius { border-radius: var(--border-radius); overflow: hidden; }

@media screen and (max-width: 1200px) {
    .border-radius { border-radius: calc(var(--border-radius) * 0.9); }
}

@media screen and (max-width: 1024px) {
    .border-radius { border-radius: calc(var(--border-radius) * 0.7); }
}

@media screen and (max-width: 768px) {
    .border-radius { border-radius: calc(var(--border-radius) * 0.5); }
}

@media screen and (max-width: 480px) {
    .border-radius { border-radius: calc(var(--border-radius) * 0.3); }
}


/* sub top */
#sub_top{min-height: var(--sub-top-height);}
@media screen and (max-width:1200px) {
    #sub_top{height:280px;min-height:auto !important;}
}
@media screen and (max-width:768px) {
    #sub_top{height:260px;}
}
@media screen and (max-width:480px) {
    #sub_top{height:240px;}
}

/*******************************************************
*/
/* Colors & button Components
 *******************************************************/

:root {
/*===================================================*/

    /* Key Color  */
    --primary:#0059FF; /* ex)color-primary */
    --secondary:#4a5568;
    --variant:#0039AD;

    --variant-light:#4a5568; /* hover-color */
    --variant-dark:#9ca3af;  /* hover-color */

    /* Black Scale */
    --black-100: #4d4d4d;
    --black-200: #404040;
    --black-300: #333333;
    --black-400: #282828;
    --black-500: #1d1d1d;
    --black-600: #000000;

    /* Greay Scale */
    --gray-100: #EBEBEB;
    --gray-200: #D9D9D9;
    --gray-300: #CCCCCC;
    --gray-400: #BDBDBD;
    --gray-500: #999999;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* 버튼 기본 스타일 */
    --button-height: 46px;
    --button-max-width:180px;
    --button-radius: 0;
    --button-padding: 0.7rem 1rem;
    --button-text-color: #fff;

    /* transition  */
    --color-transition: all 0.3s ease-in-out;
    --button-transition: all 0.4s ease-in-out;

    --transition-custom: all 0.3s ease-in-out;
    --transition-custom1: all 0.2s ease-in-out;
    --transition-custom2: all 0.8s ease-in-out;

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

    /* Status Colors */
    --color-info: #2768FF;
    --color-success: #27AE60;
    --color-warning: #FFB724;
    --color-error: #EB003B;
    /* Background Colors (10% 투명도) */
    --bg-info: rgba(39, 104, 255, 0.1);
    --bg-success: rgba(39, 174, 96, 0.1);
    --bg-warning: rgba(255, 183, 36, 0.1);
    --bg-error: rgba(235, 0, 59, 0.1);

}


/* Colors */
.color-primary{color: var(--primary) !important;transition: var(--color-transition);}
.color-secondary {color: var(--secondary);transition: var(--color-transition);}
.color-variant {color: var(--variant);transition: var(--color-transition);}

/* Black Scale */
.black{color:black !important;}
.black-100 { color: var(--black-100) !important;; }
.black-200 { color: var(--black-200) !important;; }
.black-300 { color: var(--black-300) !important;; }
.black-400 { color: var(--black-400) !important;; }
.white{color:white !important;}

/* Greay Scale */
.gray-100 { color: var(--gray-100) !important; }
.gray-200 { color: var(--gray-200) !important;}
.gray-300 { color: var(--gray-300) !important; }
.gray-400 { color: var(--gray-400) !important; }
.gray-500 { color: var(--gray-500) !important; }
.gray-600 { color: var(--gray-600) !important; }
.gray-700 { color: var(--gray-700) !important; }
.gray-800 { color: var(--gray-800) !important; }
.gray-900 { color: var(--gray-900) !important; }

/* Status Colors */
.info {color: var(--color-info);background-color: var(--bg-info);}
.success {color: var(--color-success);background-color: var(--bg-success);}
.warning {color: var(--color-warning);background-color: var(--bg-warning);}
.error {color: var(--color-error);background-color: var(--bg-error);}

/* 버튼 스타일 */
.button {border: none;display: flex;align-items: center;justify-content: center;border-radius: var(--button-radius);padding: var(--button-padding);height: var(--button-height);width: 100%;max-width: var(--button-max-width);transition: var(--button-transition);}
.button-primary {background-color: var(--primary) !important;color: var(--button-text-color);}
.button-secondary {background-color: var(--secondary) !important;color: var(--button-text-color);}
.button-variant {background-color: var(--variant) !important;color: var(--button-text-color);}
.button-variant-light {background-color: var(--variant-light) !important;color: var(--button-text-color);}
.button-variant-dark {background-color: var(--variant-dark) !important;color: var(--button-text-color);}


/* 호버 효과 */
.button-primary:hover {background-color: var(--variant) !important;}
.button-secondary:hover {background-color: var(--variant-dark) !important;}



/*******************************************************
*/
/* Text Components
 *******************************************************/

:root {
/*===================================================*/

    --line-height: 1.4;

    --line-height-p: 1.4;

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

    --display-lg-font-size: 5.625rem;    /* 90px */
    --display-md-font-size: 4.5rem;      /* 72px */
    --display-sm-font-size: 4rem;        /* 64px */

    --h1-font-size: 4rem;                /* 64px */
    --h2-font-size: 3.5rem;              /* 56px */
    --h3-font-size: 2.5rem;              /* 40px */
    --h4-font-size: 2rem;                /* 32px */
    --h5-font-size: 1.5rem;              /* 24px */
    --h6-font-size: 1.25rem;             /* 20px */
    --p-font-size: 1rem;                 /* 16px */

    --section-title-margin: 5rem;        /* 80px */
    --section-title-font-size: 4rem;     /* 64px */
}


/* Title */
.section-title { margin-bottom: var(--section-title-margin); }
.section-title h1 {font-size:var(--section-title-font-size); }
.section-title.white h1{color:#fff !important;}

/* font-size */

.display-lg{font-size:var(--display-lg-font-size);}
.display-md{font-size:var(--display-md-font-size);}
.display-sm{font-size:var(--display-sm-font-size);}

.heading h1, .heading h2, .heading h3, .heading h4, .heading h5, .heading h6{line-height: var(--line-height);}
.heading p{line-height: var(--line-height-p);}

.heading h1 {font-size:var(--h1-font-size);}
.heading h2 {font-size:var(--h2-font-size);}
.heading h3 {font-size:var(--h3-font-size);}
.heading h4 {font-size:var(--h4-font-size);}
.heading h5 {font-size:var(--h5-font-size);}
.heading h6 {font-size:var(--h6-font-size);}
.heading p  {font-size: var(--p-font-size);}


/* responsive */


@media screen and (max-width: 1920px) {
    :root {
        --display-lg-font-size: 5.25rem;    /* 84px */
        --display-md-font-size: 4.25rem;    /* 68px */
        --display-sm-font-size: 3.75rem;    /* 60px */

        --h1-font-size: 3.75rem;            /* 60px */
        --h2-font-size: 3.25rem;            /* 52px */
        --h3-font-size: 2.375rem;           /* 38px */
        --h4-font-size: 1.875rem;           /* 30px */
        --h5-font-size: 1.438rem;           /* 23px */
        --h6-font-size: 1.188rem;           /* 19px */
        --p-font-size: 1rem;                /* 16px */

        --section-title-margin: 4.8rem;
        --section-title-font-size: 3.75rem;
    }
}

@media screen and (max-width: 1600px) {
    :root {
        --display-lg-font-size: 4.875rem;    /* 78px */
        --display-md-font-size: 4rem;        /* 64px */
        --display-sm-font-size: 3.5rem;      /* 56px */

        --h1-font-size: 3.5rem;              /* 56px */
        --h2-font-size: 3rem;                /* 48px */
        --h3-font-size: 2.25rem;             /* 36px */
        --h4-font-size: 1.75rem;             /* 28px */
        --h5-font-size: 1.375rem;            /* 22px */
        --h6-font-size: 1.125rem;            /* 18px */
        --p-font-size: 0.975rem;             /* 15.6px */

        --section-title-margin: 4.5rem;
        --section-title-font-size: 3.5rem;
    }
}

@media screen and (max-width: 1400px) {
    :root {
        --display-lg-font-size: 4.5rem;      /* 72px */
        --display-md-font-size: 3.75rem;     /* 60px */
        --display-sm-font-size: 3.25rem;     /* 52px */

        --h1-font-size: 3.25rem;             /* 52px */
        --h2-font-size: 2.75rem;             /* 44px */
        --h3-font-size: 2.125rem;            /* 34px */
        --h4-font-size: 1.625rem;            /* 26px */
        --h5-font-size: 1.313rem;            /* 21px */
        --h6-font-size: 1.125rem;            /* 18px */
        --p-font-size: 0.95rem;              /* 15.2px */

        --section-title-margin: 4.3rem;
        --section-title-font-size: 3.25rem;
    }
}

@media screen and (max-width: 1200px) {
    :root {
        --display-lg-font-size: 4rem;        /* 64px */
        --display-md-font-size: 3.375rem;    /* 54px */
        --display-sm-font-size: 2.875rem;    /* 46px */

        --h1-margin-bottom: 3.5rem;
        --h2-margin-bottom: 2.25rem;
        --h3-margin-bottom: 1.875rem;
        --h4-margin-bottom: 1.375rem;
        --h5-margin-bottom: 1.25rem;
        --h6-margin-bottom: 1rem;
        --p-margin-bottom: 0.875rem;

        --section-title-margin: 4rem;
        --section-title-font-size: 2.875rem;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --display-lg-font-size: 3.5rem;      /* 56px */
        --display-md-font-size: 2.875rem;    /* 46px */
        --display-sm-font-size: 2.5rem;      /* 40px */

        --h1-font-size: 3rem;
        --h2-font-size: 2.75rem;
        --h3-font-size: 2rem;
        --h4-font-size: 1.5rem;
        --h5-font-size: 1.3rem;
        --h6-font-size: 1.15rem;

        --section-title-margin: 3.5rem;
        --section-title-font-size: 2.5rem;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --display-lg-font-size: 2.75rem;     /* 44px */
        --display-md-font-size: 2.25rem;     /* 36px */
        --display-sm-font-size: 2rem;        /* 32px */

        --h1-font-size: 2.5rem;
        --h2-font-size: 2.25rem;
        --h3-font-size: 1.75rem;
        --h4-font-size: 1.5rem;
        --h5-font-size: 1.25rem;
        --h6-font-size: 1.125rem;
        --p-font-size: 0.9rem;

        --section-title-margin: 2.5rem;
        --section-title-font-size: 2rem;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --display-lg-font-size: 2.25rem;     /* 36px */
        --display-md-font-size: 1.875rem;    /* 30px */
        --display-sm-font-size: 1.625rem;    /* 26px */

        --h1-font-size: 2rem;
        --h2-font-size: 1.75rem;
        --h3-font-size: 1.5rem;
        --h4-font-size: 1.25rem;
        --h5-font-size: 1.125rem;
        --h6-font-size: 1rem;
        --p-font-size: 0.813rem;             /* 13px */

        --section-title-margin: 1.75rem;
        --section-title-font-size: 1.625rem;
    }
}







/*******************************************************
*/
/* Margin
 *******************************************************/

/* Margin Top */
body .mt-0{margin-top:0.625rem !important;}    /* 10px */
body .mt-1{margin-top:1rem !important;}        /* 16px */
body .mt-2{margin-top:1.5rem !important;}      /* 24px */
body .mt-3{margin-top:2rem !important;}        /* 32px */
body .mt-4{margin-top:2.5rem !important;}      /* 40px */
body .mt-5{margin-top:3rem !important;}        /* 48px */
body .mt-6{margin-top:3.5rem !important;}      /* 56px */
body .mt-7{margin-top:4rem !important;}        /* 64px */
body .mt-8{margin-top:4.5rem !important;}      /* 72px */
body .mt-9{margin-top:5rem !important;}        /* 80px */
body .mt-10{margin-top:5.5rem !important;}     /* 88px */

/* Margin Bottom */
body .mb-0{margin-bottom:0.625rem !important;} /* 10px */
body .mb-1{margin-bottom:1rem !important;}     /* 16px */
body .mb-2{margin-bottom:1.5rem !important;}   /* 24px */
body .mb-3{margin-bottom:2rem !important;}     /* 32px */
body .mb-4{margin-bottom:2.5rem !important;}   /* 40px */
body .mb-5{margin-bottom:3rem !important;}     /* 48px */
body .mb-6{margin-bottom:3.5rem !important;}   /* 56px */
body .mb-7{margin-bottom:4rem !important;}     /* 64px */
body .mb-8{margin-bottom:4.5rem !important;}   /* 72px */
body .mb-9{margin-bottom:5rem !important;}     /* 80px */
body .mb-10{margin-bottom:5.5rem !important;}  /* 88px */

@media (max-width: 1600px) {
    body .mt-2{margin-top:1.3rem !important;}        /* 20.8px */
    body .mt-3{margin-top:1.7rem !important;}        /* 27.2px */
    body .mt-4{margin-top:2.2rem !important;}        /* 35.2px */
    body .mt-5{margin-top:2.7rem !important;}        /* 43.2px */
    body .mt-6{margin-top:3.2rem !important;}        /* 51.2px */
    body .mt-7{margin-top:3.7rem !important;}        /* 59.2px */
    body .mt-8{margin-top:4.2rem !important;}        /* 67.2px */
    body .mt-9{margin-top:4.7rem !important;}        /* 75.2px */
    body .mt-10{margin-top:5.2rem !important;}       /* 83.2px */

    body .mb-2{margin-bottom:1.3rem !important;}     /* 20.8px */
    body .mb-3{margin-bottom:1.7rem !important;}     /* 27.2px */
    body .mb-4{margin-bottom:2.2rem !important;}     /* 35.2px */
    body .mb-5{margin-bottom:2.7rem !important;}     /* 43.2px */
    body .mb-6{margin-bottom:3.2rem !important;}     /* 51.2px */
    body .mb-7{margin-bottom:3.7rem !important;}     /* 59.2px */
    body .mb-8{margin-bottom:4.2rem !important;}     /* 67.2px */
    body .mb-9{margin-bottom:4.7rem !important;}     /* 75.2px */
    body .mb-10{margin-bottom:5.2rem !important;}    /* 83.2px */
}

@media (max-width: 1200px) {
    body .mt-1{margin-top:1rem !important;}        /* 16px */
    body .mt-2{margin-top:1.2rem !important;}      /* 19px */
    body .mt-3{margin-top:1.5rem !important;}      /* 24px */
    body .mt-4{margin-top:2rem !important;}        /* 32px */
    body .mt-5{margin-top:2.5rem !important;}      /* 40px */
    body .mt-6{margin-top:3rem !important;}        /* 48px */
    body .mt-7{margin-top:3.5rem !important;}      /* 56px */
    body .mt-8{margin-top:4rem !important;}        /* 64px */
    body .mt-9{margin-top:4.5rem !important;}      /* 72px */
    body .mt-10{margin-top:5rem !important;}       /* 80px */

    body .mb-1{margin-bottom:1rem !important;}     /* 16px */
    body .mb-2{margin-bottom:1.2rem !important;}   /* 19px */
    body .mb-3{margin-bottom:1.5rem !important;}   /* 24px */
    body .mb-4{margin-bottom:2rem !important;}     /* 32px */
    body .mb-5{margin-bottom:2.5rem !important;}   /* 40px */
    body .mb-6{margin-bottom:3rem !important;}     /* 48px */
    body .mb-7{margin-bottom:3.5rem !important;}   /* 56px */
    body .mb-8{margin-bottom:4rem !important;}     /* 64px */
    body .mb-9{margin-bottom:4.5rem !important;}   /* 72px */
    body .mb-10{margin-bottom:5rem !important;}    /* 80px */
}

@media (max-width: 1024px) {
    body .mt-0{margin-top:0.5rem !important;}
    body .mt-1{margin-top:0.9rem !important;}
    body .mt-2{margin-top:1.1rem !important;}
    body .mt-3{margin-top:1.3rem !important;}
    body .mt-4{margin-top:1.7rem !important;}
    body .mt-5{margin-top:2rem !important;}
    body .mt-6{margin-top:2.5rem !important;}
    body .mt-7{margin-top:3rem !important;}
    body .mt-8{margin-top:3.5rem !important;}
    body .mt-9{margin-top:4rem !important;}
    body .mt-10{margin-top:4.5rem !important;}

    body .mb-0{margin-bottom:0.5rem !important;}
    body .mb-1{margin-bottom:0.9rem !important;}
    body .mb-2{margin-bottom:1.1rem !important;}
    body .mb-3{margin-bottom:1.3rem !important;}
    body .mb-4{margin-bottom:1.7rem !important;}
    body .mb-5{margin-bottom:2rem !important;}
    body .mb-6{margin-bottom:2.5rem !important;}
    body .mb-7{margin-bottom:3rem !important;}
    body .mb-8{margin-bottom:3.5rem !important;}
    body .mb-9{margin-bottom:4rem !important;}
    body .mb-10{margin-bottom:4.5rem !important;}
}
@media (max-width: 768px) {
    body .mt-0{margin-top:0.75rem !important;}
    body .mt-1{margin-top:0.875rem !important;}
    body .mt-2{margin-top:0.9rem !important;}
    body .mt-3{margin-top:1.1rem !important;}
    body .mt-4{margin-top:1.3rem !important;}
    body .mt-5{margin-top:1.5rem !important;}
    body .mt-6{margin-top:2rem !important;}
    body .mt-7{margin-top:2.5rem !important;}
    body .mt-8{margin-top:3rem !important;}
    body .mt-9{margin-top:3.5rem !important;}
    body .mt-10{margin-top:4rem !important;}

    body .mb-0{margin-bottom:0.75rem !important;}
    body .mb-1{margin-bottom:0.875rem !important;}
    body .mb-2{margin-bottom:0.9rem !important;}
    body .mb-3{margin-bottom:1.1rem !important;}
    body .mb-4{margin-bottom:1.3rem !important;}
    body .mb-5{margin-bottom:1.5rem !important;}
    body .mb-6{margin-bottom:2rem !important;}
    body .mb-7{margin-bottom:2.5rem !important;}
    body .mb-8{margin-bottom:3rem !important;}
    body .mb-9{margin-bottom:3.5rem !important;}
    body .mb-10{margin-bottom:4rem !important;}
}

@media (max-width: 480px) {
    body .mt-0{margin-top:0.625rem !important;}    /* 10px */
    body .mt-1{margin-top:0.688rem !important;}    /* 11px */
    body .mt-2{margin-top:0.75rem !important;}     /* 12px */
    body .mt-3{margin-top:0.875rem !important;}    /* 14px */
    body .mt-4{margin-top:1rem !important;}        /* 16px */
    body .mt-5{margin-top:1.125rem !important;}    /* 18px */
    body .mt-6{margin-top:1.25rem !important;}     /* 20px */
    body .mt-7{margin-top:1.5rem !important;}      /* 24px */
    body .mt-8{margin-top:1.75rem !important;}     /* 28px */
    body .mt-9{margin-top:2rem !important;}        /* 32px */
    body .mt-10{margin-top:2.5rem !important;}     /* 40px */

    body .mb-0{margin-bottom:0.625rem !important;}    /* 10px */
    body .mb-1{margin-bottom:0.688rem !important;}    /* 11px */
    body .mb-2{margin-bottom:0.75rem !important;}     /* 12px */
    body .mb-3{margin-bottom:0.875rem !important;}    /* 14px */
    body .mb-4{margin-bottom:1rem !important;}        /* 16px */
    body .mb-5{margin-bottom:1.125rem !important;}    /* 18px */
    body .mb-6{margin-bottom:1.25rem !important;}     /* 20px */
    body .mb-7{margin-bottom:1.5rem !important;}      /* 24px */
    body .mb-8{margin-bottom:1.75rem !important;}     /* 28px */
    body .mb-9{margin-bottom:2rem !important;}        /* 32px */
    body .mb-10{margin-bottom:2.5rem !important;}     /* 40px */
}

