@charset "utf-8";

/*@import url("style.css");*/
@import url("main.css");
@import url("landing.css");
@import url("jquery-ui.min.css");

/* 파일명 : default.css */
:root {
    --primary: #132b91;
    --blue: #0196f2;
    --orange: #f36910;
    --red: #ed1a3b;
    --dark01: #272727;
    --dark02: #333;
    --dark03: #666;
    --gray01: #ebebeb;
    --gray02: #f3f4fb;
    --navy: #155ac1;
}

.primary_color{ color: var(--primary); !important; }
.orange_color{  color: var(--orange);  !important; }
.red_color{     color: var(--red);     !important; }
.dark01_color{  color: var(--dark01);  !important; }
.dark02_color{  color: var(--dark02);  !important; }
.dark03_color{  color: var(--dark03);  !important; }
.gray01_color{  color: var(--gray01);  !important; }
.white_color{   color: #fff;  !important; }
.blue_color{   color: var(--blue); !important; }



/* Noto Sans KR (korea) */
@font-face {
    font-family: 'NotoSansKR';      /* DemiLight */
    font-style: normal;
    font-weight: 300;
    src: local("NotoSansKR DemiLight"), local("NotoSansKR-DemiLight");
    src: url('fonts/NotoSansKR-DemiLight.eot'),
        url('fonts/NotoSansKR-DemiLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-DemiLight.woff') format('woff'),
        url('fonts/NotoSansKR-DemiLight.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKR';      /* Regular */
    font-style: normal;
    font-weight: 400;
    src: local("NotoSansKR Regular"), local("NotoSansKR-Regular");
    src: url('fonts/NotoSansKR-Regular.eot'),
        url('fonts/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Regular.woff') format('woff'),
        url('fonts/NotoSansKR-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSansKR';      /* Bold */
    font-style: normal;
    font-weight: 700;
    src: local("NotoSansKR Bold"), local("NotoSansKR-Bold");
    src: url('fonts/NotoSansKR-Bold.eot'),
        url('fonts/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/NotoSansKR-Bold.woff') format('woff'),
        url('fonts/NotoSansKR-Bold.otf') format('opentype');
}


@font-face {
    font-family: 'esamanru';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Light.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Light.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Light.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'esamanru';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Medium.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Medium.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Medium.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'esamanru';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Bold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Bold.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Bold.otf') format('opentype'),
    url('https://cdn.jsdelivr.net/gh/fonts-archive/esamanru/esamanru-Bold.ttf') format('truetype');
}


[class^="GongGothic"], [class*=" GongGothic"] {
    display: inline-block;
    font-family: 'GongGothic' !important;
    speak: none;
    font-style: normal;
    font-weight: 200;
    font-variant: normal;
    text-transform: none;
    vertical-align: middle;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.loading{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
}
.loading .loader{
    width: 64px;
    margin: auto;
}

/* reset */
*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { margin:0; padding:0; outline: 0; }
html, body { width:100%; height:100%; zoom:1; }
html { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body { font-family:'NotoSansKR','돋움',sans-serif; font-size: 16px; font-weight:400; white-space:normal; word-wrap:break-word; word-break:keep-all; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; }
img,fieldset {border:0;}
ul,ol,li {list-style:none;}
hr {display:none;}
.behind, legend, caption { position: absolute; top: -99999px; left: -99999px; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; }
table {width:100%;border-collapse:collapse;border:0; border-top: 1px solid var(--dark01); font-size: 17px;}
table, thead, tbody, tfoot, tr, th, td {position:static;}
th { background: #f3f4fb; border-bottom: 1px solid #b1b8be;  padding: 8px 6px;}
td { border-bottom: 1px solid #b1b8be; text-align: center; padding: 10px 6px;}
strong, b { font-weight: 700; }
textarea,input, button { font-family:'NotoSansKR','돋움',sans-serif; -webkit-appearance: none; }
textarea {resize:none;}
label {cursor:pointer;}
img, input, select, textarea, button { vertical-align: middle; }
pre {overflow-x:scroll;}
button {overflow:visible;cursor:pointer;background:none;border:0;}
button[disabled="disabled"] {cursor:default;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {margin:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;}
select::-ms-expand { display: none; }
img { display: block; max-width: 100%; height: auto; pointer-events: none;-webkit-touch-callout: none;-webkit-user-select: none;}
em, address { font-style: normal; font-weight: normal; }

/* a link setting */
a { color: #000; font-family: 'NotoSansKR', Arial, sans-serif; text-decoration: none; box-sizing: border-box; }
a:link, a:active, a:hover { text-decoration: none; }
input::-ms-clear { display: none; }

/* scroll design */
/* ::-webkit-scrollbar { width: 6px; height: 6px; border: 3px solid #0f3399; }
::-webkit-scrollbar-thumb { height: 50px; width: 50px; background: rgba(0,0,0,.3); -webkit-border-radius: 8px; border-radius: 8px; } */

/* input */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="time"],
input[type="url"],
input[type="search"],
input[type="file"],
input[type="date"],
input[type="tel"] { width: 100%; height: 40px; padding: 0 20px; border: 0; border-radius: 5px; color: #333; line-height: normal; font-size: 20px;  letter-spacing: -1px; }

input[disabled],
textarea[disabled] { background-color: #d9dcde; color: #6d7882; }
input::-webkit-input-placeholder { color: #1e1e1e !important; text-align: left; }
input::-ms-clear { display: none; }
input::placeholder { color:var(--dark03) !important; font-weight: 300; }

/* radio, checkbox */
label[class*="i_"] { display: inline-block; position: relative; padding-left: 24px; margin-bottom: 25px;}
label[class*="i_"] input { margin: 0; opacity: 0; }
label[class*="i_"] input,
label[class*="i_"] .icon { position: absolute; top: 3px; left: 0; width: 24px; height: 24px; }
label[class*="i_"] .text { display: inline-block; padding-left: 15px; height: 24px; color: #414042; line-height: 24px; font-size: 20px; font-weight: 700; }

/* checkbox */
input[type="checkbox"] { -webkit-appearance: none; }
/*[class*="i_check"] + [class="i_check"] { margin-left: 3.2rem; }*/
.i_check .icon { display: block; border: 1px solid #939393; border-radius: 4px; }
.i_check > input:checked + .icon { border: 0; background-image: url('../images/i_check.png'); background-color: var(--blue); background-repeat: no-repeat; background-position: -1px -1px; background-size: contain; }
.i_check > input:checked:disabled + .icon { background-color: #607eda; }
.i_check > input:disabled + .icon { background-color: #dfe2e6;}
.i_check .txt { margin-left: 10px; margin-top: -2px; }

/* radio */
[class*="i_radio"] + [class="i_radio"] { margin-left: 3.2rem; }
.i_radio .icon { display: block; border: .6rem solid #fff; border-radius: 50%; background-color: #c6c9cc; }
.i_radio .icon::after { content:''; display: inline-block; position: absolute; top: -.6rem; left: -.6rem; width: 2.8rem; height: 2.8rem; border: 1px solid #c6c9cc; border-radius: 50%; }
.i_radio > input:checked + .icon { border: .6rem solid #fff; background-color: #8352cc; -webkit-transition: background-color 250ms; transition: background-color 250ms; }
.i_radio > input:checked + .icon::after { border: 1px solid #8352cc; }
.i_radio > input:checked:disabled + .icon { background-color: #b4a3cc; }
.i_radio > input:checked:disabled + .icon::after { border: 1px solid #b4a3cc; }
.i_radio > input:disabled + .icon { background-color: #dfe2e6; }
.i_radio > input:disabled + .icon::after { border: 1px solid #dfe2e6; }

select {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid #b1b8be;
    border-radius: 6px;
    font-size: 19px;
    min-height: 48px;
    color: var(--dark01);

    -webkit-appearance:none;   /* 네이티브 외형 감추기 */
    -moz-appearance:none;
    appearance:none;
    margin:0;
    background: url('../images/icon_arrow_down.svg') no-repeat; /* 화살표 모양의 이미지 */
    background-size: 20px;
    background-position: calc(100% - 16px) center;

}
.i_sel { width: 27%; height: 37px; border: 2px solid #ececec; background-image: url('../images/icon_select_02.png'); background-repeat: no-repeat; background-position: right  10px center; }

/* etc default setting */
.hidden { visibility:hidden; }
.none {display:none !important;}
.ntxt > span {position:absolute;top:0;left:0;display:block;width:100%;height:100%;overflow:hidden;visibility:hidden;}
.hide { visibility:hidden; position:absolute; font-size:0; line-height:0; }
.white_no { white-space: nowrap; }
.ellips { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.overflow_h { overflow: hidden; }
.overflow_y_auto { overflow-y: auto; }
.tdu { text-decoration: underline; }
.vatt { vertical-align: text-top; }

/* hr */
.hr_line { display: block; width: 100%; height: 1px; margin: 30px 0; border: 0; background: #d0d0d0; }

/*display*/
.d_flex { display: flex !important; justify-content: space-between; align-items: center;}

/* font-size */
.fs_14 { font-size: 14px !important; }
.fs_15 { font-size: 15px !important; }
.fs_16 { font-size: 16px !important; }
.fs_17 { font-size: 17px !important; }
.fs_18 { font-size: 18px !important; }
.fs_20 { font-size: 20px !important; }
.fs_24 { font-size: 24px !important; }

/* font-weight */
.fw_300 { font-weight: 300 !important; }
.fw_400 { font-weight: 400 !important; }
.fw_500 { font-weight: 500 !important; }
.fw_600 { font-weight: 600 !important; }
.fw_700 { font-weight: 700 !important; }

/* position */
.position_r { position: relative !important; }
.position_a { position: absolute !important; }
.position_f { position: fixed !important; }

/* float */
.float_l { float: left !important; }
.float_r { float: right !important; }

/* align */
.text_l { text-align: left !important; }
.text_r { text-align: right !important; }
.text_c { text-align: center !important; }

/* margin */
.marA { margin: auto !important; }
.mar0 { margin: 0 !important; }
/* margin-top */
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt100 { margin-top: 100px !important; }
.mt200 { margin-top: 200px !important; }
/* margin-bottom */
.mb0 { margin-bottom: 0 !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb80 { margin-bottom: 80px !important; }
/* margin-left */
.ml0  { margin-left: 0 !important; }
.ml5  { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }
/* margin-right */
.mr0 { margin-right: 0 !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }

/* padding */
.pad0 { padding: 0 !important; }
/* padding-top */
.pt0 { padding-top: 0 !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt100 { padding-top: 100px !important; }
/* padding-bottom */
.pb0 { padding-bottom: 0 !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
/* padding-left */
.pl0 { padding-left: 0 !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 40px !important; }

/* padding-right */
.pr0 { padding-right: 0 !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 40px !important; }

/* width height */
.w50p { width: 50% !important; }
.w60p { width: 60% !important; }
.w100p { width: 100% !important; }
.w200 { width: 200px !important; }
.w250 { width: 250px !important; }
.w300 { width: 300px !important; }
.w400 { width: 400px !important; }
.w500 { width: 500px !important; }
.w600 { width: 600px !important; }
.w790 { width: 790px !important; }
.w1000{ width: 1000px !important; }

.h50p { height: 50% !important; }
.h60p { height: 60% !important; }
.h100p{ height: 100% !important; }
.h200 { height: 200px !important; }
.h250 { height: 250px !important; }
.h300 { height: 300px !important; }
.h400 { height: 400px !important; }
.h500 { height: 500px !important; }
.h600 { height: 600px !important; }
.h790 { height: 790px !important; }
.h1000{ height: 1000px !important; }

/* background-color */
.bg1 { background: #fff !important; }
.bg2 { background: #000 !important; }
.bg3 { background: #1450c3 !important; }
.bg4 { background: #919191 !important; }
.bg5 { background: #3cb7c0; }
.bg6 { background: #14328b; }
.bg7 { background: #e5e6e7; }
.bg8 { background: #edf932; }

.bg_gray{ background: #f2f2f4 !important; }

/*table*/
.tbBorder :is(th, td){border-right: 1px solid #b1b8be;}
.tbBorder :is(th, td):last-child{border-right: 0;}

/* button */
.btn_area { display: flex; flex-flow: row; justify-content: center; }
.btn_area.mo { display: none; }
.btn_area [class*="btn"] + [class*="btn"] { margin-left: 15px; }
[class*="btn_type"] { display: inline-block; text-align: center; }
/*.btn { border-radius: 40px; text-align: center; font-family: 'GongGothicMedium'; }*/
.btn_type01 { min-width: 150px; min-height: 64px; padding: 7px 36px; font-size: 19px; background: var(--primary); color: #fff; border-radius: 40px; font-weight: 700; display: flex; justify-content: center; align-items: center;}
.btn_type02 { min-height: 48px; padding: 0 16px; font-size: 19px; color: #fff; background: var(--dark02); border-radius: 10px; font-weight: 500; display: flex; justify-content: center; align-items: center; }
.btn_type03 {
    color: #333;
    padding: 2px 10px;
    font-size: 15px;
    border-radius: 4px;
    border: 1px solid #8a9494;
    min-height: 30px;
}
.btn_type03.type01 { border: 1px solid #9f9f9f; color: #919191; background: #fff; }
.btn_type03.type02 { background: #1450c3 url('../images/btn_type03.png') no-repeat; background-position: right 20px center; }

.btn_main{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    min-width: 310px;
    width: calc(33.3% - 17.5px);
    padding: 16px 12px 15px;
    flex-shrink: 0;
    border-radius: 41px;
    background: #0196F2;
    font-weight: 500;
    font-family: "esamanru";
    letter-spacing: -0.72px;
    font-size: 28px;
}
.btn_main.mo{
    min-width: 100px;
    font-size: 15px;
    width: calc(33.3% - 5px);
}
.badge{
    display: inline-flex;
    min-width: 86px;
    padding: 5px 7px;
    align-items: center;
    margin-right: 10px;
    color: #fff;
    justify-content: center;
    border-radius: 20px;
    background: var(--blue);
    font-size: 17px;
    font-weight: 700;
}

.white{
    background: #fff !important;
    color: #333 !important;
    color: #fff;
}
.blue{
    background: var(--blue) !important;
    color: #fff !important;
}
.orange{
    background: var(--orange) !important;
    color: #fff !important;
}
.primary{
    background: var(--primary) !important;
    color: #fff !important;
}
.navy{
    background: var(--navy) !important;
    color: #fff !important;
}
.disabled{
    background: #d9dcde !important;
    color: #fff !important;
}

.btn_with_icon{
    display: flex;
    width: 108px;
    padding: 15px 18px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--orange);
    border-radius: 20px;
    background: #fff;
    text-align: center;
    font-weight: 700;
}
.btn_with_icon img{
    width: 30px;
    height: 30px;
}

.arrow{
    display:inline-block;
    width: 16px;
    height: 16px;
    background-size:16px 16px;
    background-image: url('../images/icon_arrow.svg');
    background-repeat: no-repeat;
    margin-left: auto;
    vertical-align: middle;
    position: relative;
    margin-left: 10px;
}
.arrow02{
    display:inline-block;
    vertical-align: middle;
    background-color: var(--dark01);
    -webkit-mask-image: url('../images/icon_arrow.svg');
    mask-image: url('../images/icon_arrow.svg');
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    margin-left: 5px;
}

/* 신청화면 */
.page{
    position: relative;
    width: 100%;
    padding: 95px 0 130px;
    z-index: 1;
}
.page_container ul li{
    list-style-type: disc;
}
.img_bg_top{
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 23.43%;
    background-image: url("../images/bg_top.png");
    background-repeat: no-repeat;
    z-index: 2;
}
.page_container{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.page_title_area{
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
}
.page_title{
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
}
.page_subtitle{
    margin-top: 5px;
    font-size: 20px;
    font-weight: 500;
}
.page_inner{
    width: calc(100% - 32px);
    max-width: 1000px;
    min-height: 200px;
    padding: 45px 40px;
    border-radius: 30px;
    background: #fff;
    margin: auto;
    position: relative;
}
.inner_title{
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: 700;
    color: #272727;
}
.inner_hr{
    width: 100%;
    height: 1px;
    background: #e6e6e6;
    margin: 40px auto;
}
.inner_contents{
    width: 100%;
    font-size: 17px;
    color: #333;
}

.form_grid {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 8px 16px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.form_warning{
    display:none; font-size:14px; width: 100%; max-width: 600px;
    color: var(--orange);
    margin-left: 186px;
    margin-bottom: 10px;
}
.form_grid_wide{
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 8px 16px;
    width: 100%;
    margin: 0 auto;
}
.form_grid label,
.form_grid_wide label {
    text-align: left;
    font-weight: bold;
    align-content: center;
    font-size: 19px;
}

.form_grid_wide :is(input, select, textarea){
    width: 50%;
    margin-left: auto;
    padding: 8px 16px;
    border: 1px solid #b1b8be;
    border-radius: 6px;
    font-size: 19px;
    min-height: 48px;
}
.form_grid :is(input, select, textarea) {
    width: 100%;
    padding: 8px 16px;
    border: 1px solid #b1b8be;
    border-radius: 6px;
    font-size: 19px;
    min-height: 48px;
}
.form_row_btn {
    display: flex;
    gap: 10px;
    align-items: center;
}
.form_row_btn input {
    flex: 4;
}

.form_row_btn [class*="btn_form"]{
    flex: 1;
}

.form_row_double {
    display: flex;
    gap: 10px;
    align-items: center;
}
.form_row_double input {
    flex: 1;
}
.label_top {
    grid-column: span 2;
}
.label_top + * { grid-column: span 2; }
.input_num{ text-align: right; }


.result_list{
    margin: auto;
    width: 100%;
    max-width: 600px;
    text-align: center;
}
.result_nm{
    text-align: center;
    margin: 0 auto  40px;
    font-size: 22px;
    font-weight: bold;
    color: var(--orange);
    display: block;
    padding: 10px 20px;
    margin: 0 auto  37px;
    font-size: 19px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--orange);
    background: #FFD5BA;

}
.result_list dl{
    font-size: 17px;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--dark03);

}
.result_list dt {
    font-weight: 700;
}
.result_list dd {
    text-align: right;
    font-weight: 500;
}

.guide_box {
    width: 100%;
    padding: 20px;
    border-radius: 12px;
    background: #f3f4fb;
    color: var(--dark01);
    font-size: 15px;
    letter-spacing: -0.375px;
}
.guide_box.white{
    border: 1px solid #b1b8be;
    background: #fff;
}
.guide_box ul{ padding-left: 20px; }
.guide_box_main{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px 40px;
    gap: 10px;
    background: #ffe8d5;
    border-radius: 30px;
    margin-top: 50px;
}
.guide_box_main_title{
    color: var(--orange);
    font-size: 28px;
    font-weight: 600;
}
.guide_box_main_contents{
    color: var(--dark01);
    font-size: 24px;
    font-weight: 500;
}


.modal_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal_container {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    max-width: 630px;
    width: calc(100% - 60px);
    top: 60px;
    left: 50%;
    transform: translate(-50%, 0%);
    max-height: calc(100% - 120px);
}
.modal_inner {
    max-height: calc(100vh - 360px);
    overflow-y: auto;
}
.modal_inner_no_slogon {
    max-height: calc(100% - 260px);
    overflow-y: auto;
}
.modal_title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
}
.modal_title .slogon{
    width: 150px;
    margin: 0 auto 40px;
}
.app_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    gap: 10px 20px;
    justify-items: center;
}
.app_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #333;
    word-break: keep-all;
    cursor: pointer;
    width: 100%;
    max-width: 100px;
}
.app_item .appIcon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 27%;
    border: 1px solid var(--gray01);
    margin-bottom: 8px;
}
.app_item .appNm {
    font-size: 15px;
    height: 41px;
    margin-bottom: 10px;
    font-weight: 500;
    word-break: normal;
}
.app_item .appLink {
    border-radius: 0;
    margin-bottom: 10px;
    width: 100%;
}
.modal_close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    font-weight: bold;
}
.modal_close:hover {
    color: #000;
}

.temp{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 500;
    background: rgba(0,0,0,0.6);
    color: #fff;
    position: fixed;
    top: 0;
}


/************* Mobile Device *************/
@media all and (max-width:750px) {
    table{ font-size: 15px; }

    /* select */
    .i_sel { width: 100%; height: 8.2667vw; padding: 0 4vw 0 2.1333vw; font-size: 4vw; border: 0.2667vw solid #ececec; background-position: right 1.3333vw center; background-size: 1.4667vw auto; }

    .btn_area { display: flex; flex-flow: column; justify-content: center; }
    .btn_area [class*="btn"] + [class*="btn"] { margin: 0}

    /* btn */
    .btn_type01 { width: 100%; font-size: 17px; min-height: auto; padding: 12px 20px;}
    .btn_type04 { width: 100%; font-size: 15px; min-height: 60px; padding: 12px 40px; font-weight: 700; border-radius: 30px; background: var(--primary); color: #fff; display: flex; justify-content: center; align-items: center;}
    .btn_type04 .arrow { margin-left: auto }
    /* input */
    input[type="text"], 
    input[type="password"], 
    input[type="number"], 
    input[type="email"], 
    input[type="time"], 
    input[type="url"], 
    input[type="search"], 
    input[type="file"], 
    input[type="date"], 
    input[type="tel"] { height: 6.6667vw; padding: 0 2.6667vw; border-radius: 0.6667vw; font-size: 3.7333vw; }


    label[class*="i_"] input, label[class*="i_"] .icon {
        top: 0px;
    }
    .guide_box_main{
        text-align: center;
        padding: 20px;
        gap: 10px;
        background: #ffe8d5;
        border-radius: 16px;
        margin-top: 30px;
    }
    .guide_box_main_title{
        color: var(--orange);
        font-size: 16px;
        font-weight: 700;
    }
    .guide_box_main_contents{
        color: var(--dark01);
        font-size: 19px;
        font-weight: 500;
        text-align: left;
    }

    .result_nm{
        display: block;
        padding: 10px 20px;
        margin: 0 auto  37px;
        font-size: 19px;
        width: 100%;
        border-radius: 12px;
        border: 1px solid var(--orange);
        background: #FFD5BA;
        color: var(--orange);
    }
    .result_list dt{ font-weight: 500; }
    .result_list dl{ font-size: 15px; }
    .result_list dd{ font-size: 17px; text-align: right;}

    .img_bg_top{
        padding-top: 64.53%;
        background: url("../images/bg_top_mo.png") ;
    }

    .page{
        padding: 40px 0 50px;
        min-height: calc(100vh - 210px)
    }
    .page_title_area { padding: 0 16px}
    .page_title{ font-size: 22px; }
    .page_subtitle{
        margin-top: 5px;
        font-size: 15px;
    }

    .page_inner{
        min-height: 100px;
        padding: 25px 15px 40px;
        border-radius: 13px;
    }
    .inner_hr { margin: 30px 0; }
    .inner_title{ font-size: 17px; margin-bottom: 15px;}
    .complete_area{ text-align: center; }
    .form_grid {
        display: grid;
        grid-column: span 2;
        grid-template-columns: 1fr;
        gap: 12px 0px;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .form_warning{
        margin: 5px 0 0 0;
    }
    .form_grid label {
        font-size: 15px;
        grid-column: span 2;
    }
    .form_grid input, select, textarea {
        margin-bottom: 12px;
        border-radius: 8px;
        font-size: 17px;
    }

    .form_grid :is(input, select, textarea):last-child {
        margin-bottom: 0px;
    }

    .form_row_btn {
        align-items: baseline;
    }
    .form_row_btn input {
        flex: 4;
    }
    .form_row_btn [class*="btn_form"]{
        flex: 1;
        font-size: 16px;
    }
    .input_num{ text-align: right; }
    .guide_box { padding: 10px; }
    .modal_container { border-radius: 13px; padding: 28px;}
    .modal_title { font-size: 19px; }
    .modal_title .slogon{
        width: 127px;
        margin: 0 auto 20px;
    }
    .modal_inner {
        max-height: calc(100% - 350px);
    }
    .app_grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 3px;
    }
    .app_item {
        font-size: 14px;
        font-weight: 500;
    }
    .app_item .appIcon {
        width: 60px;
        height: auto;
        margin-bottom: 0px;
    }
}