@charset "utf-8";
/* reset-------------------------------------------------------------------------------------------------------------------------------------*/
html, body{width:100%; height:100%; -webkit-text-size-adjust:none;}
html, body, div, p, span, a,
h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd,
table, caption, thead, tbody, tfoot, tr, th, td,
form, blockquote{margin:0; padding:0;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}

h1,h2,h3,h4,h5,h6{font-size:1em; font-weight:normal;}
fieldset,img{max-width:100%; margin:0; padding:0; border:0; vertical-align:top;}
ul{list-style:none;}
a{color:inherit; text-decoration:none;}
table{border-collapse:collapse; border-spacing:0;}
hr{display:none;}

/*기존 basic.css 의 필요한 부분 가져옴 */
.fontPointColor {color:#32b1b8 !important;}

/* input reset-------------------------------------------------------------------------------------------------------------------------------------*/
input{margin:0; padding:0px; border:1px solid #dbdbdb; border-radius:5px; -webkit-border-radius:5px; font-size:1em; vertical-align:middle; -webkit-appearance:none;}
input[type='text']{padding:0 8px}
input[type='checkbox']{-webkit-appearance:checkbox}
input[type='radio']{-webkit-appearance:radio}
select{margin:0; padding:0; border-radius:5px; -webkit-border-radius:5px; font-size:1em; vertical-align:middle; cursor:pointer; }
textarea{display:block; margin:0; padding:0; border:1px solid #dbdbdb; border-radius:5px; -webkit-border-radius:5px; font-size:1em; vertical-align:middle; -webkit-appearance:none;}

input:focus{border-color:#121212}
input::placeholder{color:#b6b9ba; font-weight:300; opacity:1}
input::-webkit-input-placeholder{color:#b6b9ba; font-size:14px; font-weight:300}
input:-ms-input-placeholder{color:#b6b9ba; font-size:14px; font-weight:300}
input:-moz-input-placeholder{color:#b6b9ba; font-size:14px; font-weight:300}

textarea:focus{border:1px solid #121212; outline:0;}
textarea::placeholder{color:#b6b9ba; font-size:14px; font-weight:300; opacity:1}
textarea::-webkit-input-placeholder{color:#b6b9ba; font-size:14px; font-weight:300}
textarea:-ms-input-placeholder{color:#b6b9ba; font-size:14px; font-weight:300}
textarea:-moz-input-placeholder{color:#b6b9ba; font-size:14px; font-weight:300}


.clear{*zoom:1;}
.clear:after{display:block; clear:both; content:" ";}
.blind{position:absolute; left:-99999px;}

/* font -------------------------------------------------------------------------------------------------------------------------------------*/
@font-face {
     font-family: 'S-CoreDream';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
     font-weight: 200;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
}


body{position:relative; background:#fff; font-size:15px; font-family:'S-CoreDream','Malgun Gothic',Dotum,sans-serif; color:#363a3b; }
table, pre, input, select, textarea, button{font-size:inherit; font-family:inherit;}
*{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
:root{
    --sky:#01a1dd;
    --darkblue:#0b406b;
    --lightsky:#ebf2f5;
    --darkgray:#363a3b;
    --gray:#7e8486;
    --lightgray:#c9cccd;
    --gray_line:#e8e8e8;
    --chat_my_bg:#dafdff;
    --chat_you_bg:#feffe0;
}


/* float */
.fl{float:left}
.fr{float:right}
/* align */
.tal{text-align:left !important}
.tac{text-align:center}
.tar{text-align:right !important}
.taj{text-align:justify}
/* color */
.white{color:#fff}
.red{color:#ff383d !important;}
.navy{color:#0b406b}
.skyblue {color:#01a1dd}
.gray{color:#7e8486}
.light_gray{color:#c9cccd}
.sky{color:var(--sky) !important;}
.green{color:#19ab70}
/* text_style */
.fb{font-weight:700}
.fn{font-weight:normal}
.tlt{text-decoration:line-through}
.fi{font-style:italic}
.tu{text-decoration:underline}

.block{display:block}

.mt5{margin-top:5px}
.mt10{margin-top:10px !important;}
.mt20{margin-top:20px !important;}
.mt30{margin-top:30px}

.ml0{margin-left:0 !important}

.fs10{font-size:10px;}
.fs12{font-size:12px;}
.fs13{font-size:13px;}
.fs18{font-size:18px;}


.point{font-weight:500; color:#ff383d}
.point_sky{font-weight:500; color:var(--sky)}

.link{text-decoration:underline; transition:all 0.3s}
.link:hover{color:var(--sky)}

/* btn */
.btn_wrap{margin:40px 0; text-align:center}
.btn_wrap .btn{margin:0 5px;}

.btn{display:inline-block; padding:0 33px; background:#0b406b; border:1px solid #0b406b; border-radius:10px 0; line-height:35px; color:#fff; text-align:center; white-space:nowrap; transition:all 0.3s; cursor:pointer}
.btn:hover{border-color:#0a2d4a; background:#0a2d4a}

.btn_border{background:transparent; color:#0b406b}
.btn_border:hover{background:#0b406b; color:#fff}

.btn_gray{background:#7e8486; border:1px solid #7e8486; color:#fff }
.btn_gray:hover{border-color:#636869; background:#636869; color:#fff}

.btn_white{background:#fff; border:1px solid #dedede; color:var(--gray) }
.btn_white:hover{border-color:var(--lightgray); background:var(--lightgray); color:#fff}

.btn_sky{background:var(--sky); border:1px solid var(--sky); color:#fff }
.btn_sky:hover{border-color:#0089bd; background:#0089bd; color:#fff}

.btn_oran{background:#fc7c14; border:1px solid #fc7c14; color:#fff }
.btn_oran:hover{border-color:#f36d00; background:#f36d00; color:#fff}

.btn_min{padding:0 15px; border-radius:5px 0; font-size:13px; line-height:24px; }
/*tab */
.tab_line{display:flex; justify-content:space-between; width:100%; height:50px; margin-bottom:30px; border-bottom:1px solid #0b406b;}
.tab_line li{display:inline-block; }
.tab_line li a{display:block; padding:10px 30px; background:#fff; border:1px solid #e8e8e8; border-bottom:1px solid #0b406b; font-size:16px; line-height:28px; color:#7e8486; text-align:center; text-decoration:none; transition:all 0.3s  }
.tab_line li a:hover, .tab_line li a:active{background-color:#f1f1f1;}
.tab_line li a.on{background-color:#fff; border:1px solid #0b406b; border-bottom:1px solid #fff; color:#0b406b; font-weight:300; }
.tab_line li.on a{background-color:#fff; border:1px solid #0b406b; border-bottom:1px solid #fff; color:#0b406b; font-weight:300; }


/* ul bullet */
.bullet_ol{margin-left:18px; line-height:1.4em}
.bullet_ol li{padding:2px 0}
.bullet_dot li{position:relative; margin:5px 0; padding-left:12px; line-height:1.5em}
.bullet_dot li::before{display:block; position:absolute; top:9px; left:3px; width:3px; height:3px; background:var(--darkblue); border-radius:50%; content:""}
.bullet_dot_gray li{position:relative; margin:3px 0; padding-left:10px; line-height:1.5em}
.bullet_dot_gray li::before{display:block; position:absolute; top:11px; left:3px; width:2px; height:2px; background:var(--gray); border-radius:50%; content:""}
.bullet_line li{position:relative; margin:3px 0; padding-left:15px; line-height:1.4em}
.bullet_line li::before{display:block; position:absolute; top:10px; left:3px; width:4px; height:1px; background:#bdbdbd; content:""}
.bullet_none li{padding:2px 0 2px 5px; line-height:1.4em}
.bullet_none li::before{display:none}


.tab_content_wrap{margin-top:70px; }

/* modal popup */

/* common */
.pop_wrap{display:none; position:fixed; top:0; right:0; bottom:0; left:0; width:100%; min-width:270px; height:100%; padding:30px; z-index:900000}
.pop_wrap .bg{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
.pop_wrap .pop_layer_wrap{position:absolute; top:50%; left:50%; max-width:1200px; width:50%; height:auto; max-height:90vh; background:#fff; border-radius:8px; overflow-y:auto; transform:translate(-50%, -50%);}
.pop_layer_wrap2{max-width:600px !important;}
.pop_wrap .btn_close_icon{position:absolute; top:30px; right:30px; width:20px; height:20px; }
.pop_wrap .btn_close_icon i{font-size:24px}

.pop_wrap .pop_layer_wrap{padding:30px}
.pop_wrap .pop_tit_wrap{padding:0 0 15px; border-bottom:1px solid #eaeaea}
.pop_wrap .pop_tit_wrap h3{margin-left:5px; font-size:20px; line-height:1.1em; font-weight:700;}
.pop_wrap .pop_content_wrap{max-height:50vh; padding:30px 0 0; overflow-y:auto}
.pop_wrap .pop_content_wrap h4{position:relative; margin:0 0 15px 0; padding-left:5px;  font-size:18px; line-height:1.2; font-weight:500; color:#0b406b }
.pop_wrap .pop_content_wrap h4::before{display:block; position:absolute; top:-3px; left:0; width:8px; height:8px; background:#0b406b; border-radius:50%; opacity:0.5; content:""}

.pop_wrap .pop_btn_wrap{padding:0;}

.pop_wrap.layer_popup_msg .pop_layer_wrap{max-width:700px}
.pop_wrap.layer_popup_msg .pop_layer_wrap .pop_tit_wrap h3 span{font-size:16px; font-weight:400; color:#767676}
.pop_wrap.layer_popup_msg .pop_content_wrap{width:640px; height:630px; max-height:100vh}
.pop_wrap.layer_my_memo .pop_content_wrap{height:630px; max-height:100vh}
.pop_wrap.layer_my_memo .pop_layer_wrap .pop_tit_wrap h3 span{font-size:14px; font-weight:400; color:#767676}

.pop_wrap.layer_popup_quick .pop_layer_wrap{width:700px}
.pop_wrap.layer_popup_quick .pop_content_wrap{width:640px; height:670px; max-height:100vh}

.pop_wrap .pop_layer_wrap.customer_guide_popup{max-width:800px;}
