@charset "utf-8";

/*font*/
@font-face {
    font-family: 'NotoSans-Black';
    font-style: normal;
    font-weight: 800;
    src: url(../../font/NotoSans-Black.eot);
    src: url(../../font/NotoSans-Black.eot?#iefix) format('embedded-opentype'), url(../../font/NotoSans-Black.woff2) format('woff2'), url(./fonts/NotoSans-Black.woff) format('woff'), url(./fonts/NotoSans-Black.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans-Bold';
    font-style: normal;
    font-weight: 700;
    src: url(../../font/NotoSans-Bold.eot);
    src: url(../../font/NotoSans-Bold.eot?#iefix) format('embedded-opentype'), url(../../font/NotoSans-Bold.woff2) format('woff2'), url(./fonts/NotoSans-Bold.woff) format('woff'), url(./fonts/NotoSans-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans-Medium';
    font-style: normal;
    font-weight: 500;
    src: url(../../font/NotoSans-Medium.eot);
    src: url(../../font/NotoSans-Medium.eot?#iefix) format('embedded-opentype'), url(../../font/NotoSans-Medium.woff2) format('woff2'), url(./fonts/NotoSans-Medium.woff) format('woff'), url(./fonts/NotoSans-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans-Regular';
    font-style: normal;
    font-weight: 300;
    src: url(../../font/NotoSans-Regular.eot);
    src: url(../../font/NotoSans-Regular.eot?#iefix) format('embedded-opentype'), url(../../font/NotoSans-Regular.woff2) format('woff2'), url(./fonts/NotoSans-Regular.woff) format('woff'), url(./fonts/NotoSans-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans-Light';
    font-style: normal;
    font-weight: 400;
    src: url(../../font/NotoSans-Light.eot);
    src: url(../../font/NotoSans-Light.eot?#iefix) format('embedded-opentype'), url(../../font/NotoSans-Light.woff2) format('woff2'), url(./fonts/NotoSans-Light.woff) format('woff'), url(./fonts/NotoSans-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans-DemiLight';
    font-style: normal;
    font-weight: 200;
    src: url(../../font/NotoSans-DemiLight.eot);
    src: url(../../font/NotoSans-DemiLight.eot?#iefix) format('embedded-opentype'), url(../../font/NotoSans-DemiLight.woff2) format('woff2'), url(./fonts/NotoSans-DemiLight.woff) format('woff'), url(./fonts/NotoSans-DemiLight.ttf) format('truetype');
}

@font-face {
    font-family: 'NotoSans-Thin';
    font-style: normal;
    font-weight: 100;
    src: url(../../font/NotoSans-Thin.eot);
    src: url(../../font/NotoSans-Thin.eot?#iefix) format('embedded-opentype'), url(../../font/NotoSans-Thin.woff2) format('woff2'), url(./fonts/NotoSans-Thin.woff) format('woff'), url(./fonts/NotoSans-Thin.ttf) format('truetype');
}


body{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-family: 'NotoSans-DemiLight', sans-serif; 
	font-size:20px;
}

* {margin:0; padding:0; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); word-break: keep-all; word-wrap: break-word;}
/* {-webkit-text-size-adjust:none;} */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;}

body {line-height:1.3em;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}

nav ul {list-style:none;}

blockquote, q {quotes:none;}

blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none;}

a {margin:0; padding:0; vertical-align:baseline; background:transparent;}


ins {background-color:#ff9; color:#000; text-decoration:none;}
mark{background-color:#fff6c3; font-style: normal; font-weight:500;  /*text-shadow: -3px 0px 3px #fff6c3,  3px 0px 3px #fff6c3,  6px 0px 6px #fff6c3, -6px 0px 6px #fff6c3;*/ font-weight: 500; color:#494949;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}

table {border-collapse:collapse; border-spacing:0;}

/* change border colour to suit your needs */
input, select { box-shadow: none !important; -webkit-box-shadow: none !important; vertical-align:middle; border:none; outline: none; font-family: 'NotoSans-DemiLight', sans-serif; -webkit-appearance:none;}
input:focus, select :focus { outline: none;}
img{border-style:none;}
ol,ul,li{list-style:none; }
button {border:0 none; padding:0; margin:0; background:transparent; *overflow:visible; cursor:pointer; -webkit-appearance:none;}
button::-moz-focus-inner {border:0; margin:0;}
textarea {font-size: 13px; font-family: 'NotoSans-DemiLight', sans-serif; border-radius: 0; -webkit-appearance: none; padding: 15px; box-sizing: border-box; border: 1px solid #d9d9d9; resize: none; background-color: #fff; outline: none;}

.clearfix:after {visibility: hidden;  display: block;  font-size: 0;  content: " ";  clear: both;  height: 0;}

html, body, .wrap{height:100%;}

/*custom*/
img {
    max-width:100%; 
    height:auto;
}

.fl {float:left;}
.fr {float:right;}

.sr-only { visibility: hidden; }

a, a:focus, a:active {
    outline:none !important;
    outline-style: none;
    border-style:none;
    text-decoration: none;
    ie-dummy: expression(this.hideFocus=true); /*ie9*/
}

a:-webkit-any-link {
    color: #000;
    cursor: pointer;
    text-decoration: none;
}

select::-ms-expand {
    display: none !important;
}

*:focus {
    outline: none;
}

.clear {
    clear:both;
}

/*크기*/
.full { width: 100%; }
.half { width: 50%; }

/*text-align*/
.text-cener{text-align:center !important;}
.text-left {text-align:left !important;}
.text-right {text-align:right !important;}

/*vertical-align*/
.vMiddle {
    display: flex; 
    justify-content: center; 
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* flex-ui */
.flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
}
.flex * {display: inherit;}
.inlineFlex {
	display:inline-flex;
}
/* 정렬 */
.justify {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
            align-items: center;
}
.justify > * {
    display: inherit !important;
    -webkit-box-align: center;
            align-items: center;
}
.justify.input_line {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.justify.input_line input[type=text],
.justify.input_line input[type=tel],
.justify.input_line input[type=password] {
    position: static;
    padding: 0;
    margin-right: 10px;
}
.justify.input_line input + input {
    margin-right: 0;
}
.flex-dir-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
            flex-direction: column;
}
.justify-start {
    -webkit-box-pack: start;
            justify-content: flex-start;
}
.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}
.justify-around {
    -webkit-justify-content: space-around;
            justify-content: space-around;
}
.flex-wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-shrink {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
            flex-grow: 1;
    -webkit-flex-shrink: 1;
            flex-shrink: 1;
    -webkit-flex-basis: auto;
            flex-basis: auto;
}
.align-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
            align-items: flex-start;
}
.align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
            text-align: center;
}
.align-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
            align-items: stretch;
}

/*font*/
.fontR {font-weight: 300;font-family: "NotoSans-Black", sans-serif;}
.fontB {font-weight: 700;font-family: "NotoSans-Bold", sans-serif;}
.fontEB {font-weight: 800;font-family: "NotoSans-ExtraBold", sans-serif;}

.fontSubDefault, .fontSizeSD {font-size:0.9rem;}
.fontDefault, .fontSizeD {font-size: 1rem;}

/*margin*/

.m30 { margin: 30px; }
.mtb30 { margin:30px 0; }
.mlr30 { margin:0 30px; }
.mt30 {margin-top:30px;}
.mb30 {margin-bottom:30px;}

.padb50 { padding-bottom:50px !important; }
.padb80 { padding-bottom:80px !important; }

/* input */
input:focus,textarea:focus,select:focus {outline-style:none;}
.login_form {clear:both;margin-top:20px;}
.info_form {clear:both;margin-top:10px;}
.input_hn {border: none;line-height: 16px;position: relative;width: 100%;height: 16px;padding: 7px 0 6px; text-align: center;background:transparent;}
.input_hn::-webkit-input-placeholder{color:#c7c7c7;text-align: left;}
.input_hn::-moz-placeholder{color:#c7c7c7;text-align: left;}
.input_hn[type=password]::-webkit-input-placeholder, .input_pw[type=password]::-webkit-input-placeholder {font-size: 16px;letter-spacing: normal;}
.input_hn[type=password]::-moz-placeholder, .input_pw[type=password]::-webkit-input-placeholder {font-size: 16px;letter-spacing: normal;}
.input_hn[type=password], .input_pw[type=password] {font-size: 0.9rem;line-height: 120%;}
.input_line select {min-height: 6}
.input_hn.rounded {border: 1px solid #ccc; border-radius: 4px;  padding: 14px 10px; box-sizing: border-box; min-height: 44px;}
.input_pw {width:100%;border:none;background-color:transparent;text-align: center;height:100%;}
.input_pw.sp::-webkit-input-placeholder {font-size: 13px;color:#d4d4d4;letter-spacing: 18px}
.input_pw.sp::-moz-placeholder {font-size: 13px;color:#d4d4d4;letter-spacing: 18px}
.input_line {display: block;overflow: hidden;padding:17px 0;border-bottom: 1px solid #d9d9d9;position: relative;min-height: 63px;box-sizing: border-box;}
.input_line .input_hn {padding:24px 0 23px;position:absolute;top:0;left:0;z-index: 0;}
.input_line.has-button input[type=password],
.input_line.has-button input[type=text],
.input_line.has-button input[type=tel],
span.txt {width: 60%; margin-right: 1%;}
.input_line label.lab {position:absolute;top:23px;left:0;z-index: 1;color:#c7c7c7;}
.input_no_line {display: block; overflow: hidden; padding: 17px 0;}
.input_line_group {border-top: 1px solid #ccc;}
.input_box {display: inline-block;border: 1px solid #e1e1e1;background-color: #f6f6f6;height:50px;width:100%;border-radius: 6px;box-sizing: border-box;position: relative;text-align: center}

.input_form {width: 75%;margin: 0 auto;position: relative;top: 30px; padding:0px 0 50px 0;}

.input_noline_group {width: 100%; margin: 0 auto;border: none;}
.input_noline {float: left; display: block; overflow: hidden;padding:17px 0;position: relative;min-height: 63px;box-sizing: border-box;}
.input_noline .form-group label { padding-left: 5px; }
.input_noline.full {display:inline-block;width:100%; overflow: hidden;padding:17px 0;position: relative;min-height: 63px;box-sizing: border-box;}

.input_noline.full.terms_agree {float:none;display:inline-block;width:100%; overflow: hidden;padding:17px 0;position: relative;min-height: 63px;box-sizing: border-box;}
.input_noline.half.terms_agree {float:none;display:inline-block;width:100%; overflow: hidden;padding:0px 0;position: relative;min-height: 20px;box-sizing: border-box;}
.input_noline.half.last.terms_agree {float:none;display:inline-block;width:100%; overflow: hidden;padding:0px 0;position: relative;min-height: 50px;box-sizing: border-box;}

.input_noline .ib {display:inline-block;}
.input_noline.simple_reg { width:65%; margin: 0 auto; text-align:right; }
.input_noline.simple_reg label { line-height: 30px }
.input_noline.simple_reg span.tit_text { width: auto; padding-right: 10px; line-height:18px; text-align:center;}
.input_noline.simple_reg span.num_guide {font-size: 0.8em; color: #fff;}
.input_noline.simple_reg input[type=password] {padding: 5px 0 0 0; text-align:center; width: 100px; max-width: 120px; background: transparent;border-bottom: 1px solid #ffffff; -webkit-text-security: disc;}

.input_noline.full.no-bot-padding {display:inline-block;width:100%; overflow: hidden;padding:17px 0 0 0;position: relative;min-height: 20px;box-sizing: border-box;}
.input_noline.full.no-top-padding {display:inline-block;width:100%; overflow: hidden;padding:0px 0 17px 0;position: relative;min-height: 20px;box-sizing: border-box;}
.input_noline.full.no-top-padding.underline { text-decoration: underline; text-decoration-color:#333399;  }

.input_noline.simple_log { width:100%; min-height:40px; margin: 0 auto; text-align:center; padding: 0 !important; }
.input_noline.simple_log label { line-height: 30px }
.input_noline.simple_log span.tit_text { width: auto; padding-right: 10px; line-height:18px; text-align:center;}
.input_noline.simple_log span.num_guide {font-size: 0.8em; color: #fff;}
.input_noline.simple_log input[type=password] {padding: 5px 0 0 0; text-align:center; width: 100px; max-width: 120px; background: transparent;border-bottom: 1px solid #ffffff; -webkit-text-security: disc;}



.input_botline {display: block;overflow: hidden;padding: 13px 0;border-bottom: 1px solid #ccccff;position: relative;box-sizing: border-box;}
.input_botline label {display: inline-block;width: 46%;text-align: left; padding-left: 5px;}
.input_botline.full label {display: inline-block;width: 100%;text-align: left;}

.input_botline label.no-padding { padding-left: 0; }
.input_botline label.no-padding span.tok_text { display:inline-block;float:left; width: 40%; font-size:1rem;}
.input_botline label.no-padding input[type="text"] { width: calc(100% - 40%); text-align:left;}
.input_botline label.no-padding input[type="password"] { width: calc(100% - 40%); text-align:center;}

.input_botline label.no-padding.key-label span.tok_text { display:inline-block;float:left; width: 100%; font-size:1rem;}
.input_botline label.no-padding.key-label input[type="password"] { width: calc(100% - 0%); text-align: center; background:transparent;}

.input_botline.bg_white { border-bottom: 1px solid #cccccc; }
.input_botline.bg_white label.no-padding { padding-left: 0; }
.input_botline.bg_white label.no-padding span.tok_text { display:inline-block;float:left; width: 40%; font-size:1rem;}
.input_botline.bg_white label.no-padding input[type="text"] { width: calc(100% - 40%); text-align:left;}
.input_botline.bg_white label.no-padding input[type="password"] { width: calc(100% - 40%); text-align:center;}


.input_ck {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    border-radius: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    /* background: url(../img/back_check.png) no-repeat; */
    background: #fff;
    background-position: 0 -26px;
    background-size: 100%;
    -webkit-appearance: background-size:100%;
    -moz-appearance: background-size:100%;
    vertical-align: middle;
}

.input_text[type=text]::-webkit-input-placeholder, .input_pw[type=password]::-webkit-input-placeholder {font-size: 10px;letter-spacing: normal;color:#ffffff;}
.input_text[type=text::-moz-placeholder, .input_pw[type=password]::-webkit-input-placeholder {font-size: 10px;letter-spacing: normal;}
.input_text[type=text], .input_pw[type=password] {font-size: 0.9rem;line-height: 120%;}

input.input100[type=text]::-webkit-input-placeholder{color:#ACB7BE !important;text-align: left;font-size:16px}
input.input100[type=text]::-moz-placeholder{color:#ACB7BE !important;text-align: left;font-size:16px}
input.input100[type=text]::-ms-input-placeholder{color:#ACB7BE !important;text-align: left;font-size:16px}

/* button */
button[class^=btn_s].nowrap {white-space: nowrap;}

/* form */
.common-form {margin-top: 25px; line-height: 1.5;}
.common-form,
.common-form ul ,
.common-form li ,
.common-form .text-input-inline,
.common-form .select-inline {width: 100%; box-sizing: border-box;}
.form-group {padding: 10px 0; display: block;}
.form-group.ml30 label + label {margin-left: 30px;}
.form-group .btn-radio + .btn-radio {margin-left: 5px;}

.text-input-inline:after {content: ''; clear: both; display: block;}
.text-input-inline input + input {margin-left: 2%;}
.text-input-inline input {display: block; width: 49%; height: 44px; float: left; box-sizing: border-box;}

label .small {font-size: 14px; color: #9a9a9a; margin-right: 9px;}

.btn-radio {position: relative;}
.btn-radio > input[type=radio] {-webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; opacity: 0;}
.btn-radio > span {font-size: 12px; color: #fff; display: inline-block; padding: 8px 11px; border: none; text-align: center; border-radius: 6px; background-color: #c1c1c1;}

/* round input text */
.rounded-input {display: block; border: 1px solid #e1e1e1; background-color: #f6f6f6; border-radius: 4px; padding: 10px 14px; width: 100%; box-sizing: border-box; margin-top: 18px;}
.rounded-input input {font-size: 14px; background-color: transparent; color: #6b6b6b;}

/* radio-group */
.radio-group {margin-top: 18px;}
.radio-group .form-parts {display: inherit; background-color: #fff; position: relative; font-size: 12px;}
.radio-group .form-parts + .form-parts label {border-left: 0;}
.radio-group[data-radio-group-col="3"] .form-parts {width: 33.3%;}
.radio-group .form-parts:first-child label {border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.radio-group .form-parts:last-child label {border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.radio-group .form-parts input[type=radio] {position: absolute; top: 0; left: 0; -webkit-appearance: none; opacity: 0;}
.radio-group .form-parts label {padding: 8px 0 10px; display: block; width: 100%; text-align: center; border: 1px solid #ccc; box-sizing: border-box;}
.radio-group .form-parts input[type=radio]:checked + label span {color: #fff;}

/* select */
.select { -webkit-appearance: none; appearance: none; border: 0; line-height: 16px; position: relative; width: 100%; min-height: 29px; box-sizing: content-box; background: url(../../images/icon_arrow_down_gray.png) right 10px top 50% no-repeat; background-size: 10px 6px;}
.select.rounded {border-radius: 4px; border: 1px solid #ccc; padding: 14px 10px; box-sizing: border-box;}
.select-inline:after {content: ''; display: block; clear: both;}
.select-inline .select + .select {margin-left: 2%;}
.select-inline .select {width: 49%; float: left;}

p {
    margin-block-start: 0;
    margin-block-end: 0;
}