@charset "utf-8";
/* @import "font.css"; */

/* reset */
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-font-smoothing: antialiased }
html, body { height: 100%; }
#wrap { width: 455px; height: 100%; min-height: 820px; position: relative; margin: 0 auto; background: #fff; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q,
s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, textarea, select { margin: 0; padding: 0; border: 0; font: inherit }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; letter-spacing: -0.6px; }
body { background-color: #fff; font-size: 18px; line-height: 1.2; font-family: '맑은 고딕', 'Malgun gothic', '돋움', dotum, Arial, Sans-serif; letter-spacing: -0.6px; color: #000; -webkit-text-size-adjust: none }
body.type { background-color: #ecf0f1 }
ol, ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after { content: none }
table { border-collapse: collapse; border-spacing: 0; table-layout: fixed }
hr { display: none }
img, video, audio, object, embed, iframe { max-width: 100%; height:360px;}
img { height: auto; vertical-align: top }
em, i, address { font-style: normal }
a { text-decoration: none }
legend, caption { position: absolute; width: 1px; height: 1px; text-indent: -9999em; clip: rect(1px, 1px, 1px, 1px) }
h1, h2, h3, h4, h5, strong, b, th { font-weight: 700; }
pre { word-break: break-all; white-space: pre-line }
.blind { position: absolute; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); text-indent: -9999em }
.scroll { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch }
a:focus, button:focus, input[type="checkbox"]:focus+label, input[type="radio"]:focus+label { outline: 2px solid #a8d1ff; }

@media all and (max-height: 750px){
  #wrap.smallWrap { overflow-y: auto; -ms-overflow-y: auto; min-height: auto;} /* 220331 해상도깨짐*/
  #wrap.smallWrap #footer {position: relative;}
  #wrap.smallWrap .footerBanner {position: relative; bottom: 0;} 
}

/* default */
.fc_ple { color: #ff3a4a !important; }

/* bg */
.ico_com { display: inline-block; background: url('../img/bg_icon.png') no-repeat; background-size: 180px auto; vertical-align: middle; color: transparent; white-space: nowrap; text-indent: -9999em }

.ico_adr { width: 29px; height: 33px; background-position: 0 0 }
.ico_ios { width: 28px; height: 31px; background-position: -2.28125rem 0 }
.ico_x { width: 18px; height: 18px; background-position: -78px 0 }
.ico_x2 { width: 18px; height: 18px; background-position: -8.84375rem 0 }
.ico_refresh { width: 16px; height: 16px; background-position: -5.90625rem 0 }
.ico_down { width: 18px; height: 16px; background-position: -7.1875rem 0 }
.ico_ { width: ; height: ; background-position: }

/* btn */
.btn_r { display: inline-block; width: 100%; height: 46px; line-height: 18px; border-style: solid; border-width: 1px; border-radius: 2px; text-align: center; font-size: 15px; font-weight: 500; }
.btn_xr { display: inline-block; text-align: center; height: 70px; line-height: 70px; border-style: solid; border-width: 1px; font-size: 16px }
.btn_type { background-color: #ff3a4a; border-color: #ff3a4a; color: #fff }
.btn_type2 { background-color: transparent; border-color: #ff3a4a; color: #ff3a4a; }
.btn_type3 { background-color: #707070; border-color: #707070; color: #fff }
.btn_type3.on { background-color: #ff3a4a; border-color: #ff3a4a; }
.btn_type4 { background-color: transparent; border-color: #d3d3d3; color: #d3d3d3 }
/* .btn_type5 { background-color: #ccc; border-color: #ccc; color: #fff } */
.btn_type5 { background-color: #e9e9e9; border-color: #cbcbcb; color: #666 }
.btn_type5.on { background-color: #ff3a4a; border-color: #ff3a4a; }
.btn_type6 { background-color: #e9e9e9; border-color: #cbcbcb; color: #666 }
.btn_type6.on { background-color: #ff3a4a; border-color: #ff3a4a; color: #fff; }
.btn_area { margin-top: 18px }
.btn_area li { margin-top: 6px; overflow: visible !important; }
.btn_area button { width: 100% }
.btn_area2 {}
.btn_area2:after { content: ''; display: block; clear: both; }
.btn_area2 li { float: left; padding-left: 6px; }
.btn_area2 button { width: 100%; }
.btn_area2 li:first-child { padding-left: 0 }
.btn_area2.bt2 li { width: 50%; overflow: visible; }
.btn_area2.bt2 li:first-child { width: 50%%; }
.btn_area2.bt3 li:first-child { width: 100%; }

/* form */
input,
textarea,
button,
select { -webkit-appearance: none; border-radius: 0; font-size: 18px; font-family: "맑은 고딕", "Malgun gothic", "돋움", dotum, Arial, Sans-serif; letter-spacing: -1px; } 
button { cursor: pointer; border: none; background: none; -webkit-appearance: none; } 
input[type="checkbox"],
input[type="radio"] { margin: 0; border: 1px solid #999; } 
input[type="radio"] { -webkit-appearance: radio; } 
input[type="checkbox"] { width: 18px; height: 18px; border: 1px solid rgba(0, 0, 0, 0); -webkit-appearance: checkbox; } 
input:checked[type="checkbox"],
input:checked[type="radio"] { background-color: transparent; } 
input[type="number"],
input[type="tel"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"] { width: 100%; height: 72px; line-height: inherit; padding: 0.1rem 16px 0; border: 1px solid #dbdbdb; font-size: 19px; } 
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus { border-color: #000; } 
input::-webkit-input-placeholder { padding-top: 5px; font-weight: 400; font-size: 14px; color: #666666; } 
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; } 
button { cursor: pointer; border: none; background: none; -webkit-appearance: none; } 
select { overflow: hidden; white-space: nowrap; width: 100%; height: 54px; background: url("../img/select_arr.png") no-repeat 100% 50%; background-size: auto 6px; border: 1px solid #e0e0e0; padding: 0 21px 0 14px; text-align: left; font-size: 19px; color: #3e3e3e; } 

.input { position: relative; display: inline-block; height: 54px; padding: 9px 14px 0; border: 1px solid #e0e0e0; } 
.input input { border: 0; padding: 0; height: 32px; } 
.input label { font-weight: 400; font-size: 12px; color: #ccc; } 
.input.focus { border: 1px solid #818487; z-index: 1; } 
div.input { display: block; } 
.input_del { padding-right: 28px; } 
.input_del .btn_del { display: none; position: absolute; top: 10px; right: 0; padding: 9px; z-index: 1; } 
.input_del .btn_del .ico_x { vertical-align: top; } 
.input_mynum { position: relative; } 
.input_mynum input { position: relative; z-index: 1; letter-spacing: -0.6px; text-indent: 0.2rem; background-color: transparent; } 
.input_mynum .mark { position: absolute; top: 13px; left: 8px; background-color: #fff; text-align: center; } 
.input_mynum .mark i { display: inline-block; vertical-align: middle; width: 12px; height: 12px; margin-left: 4px; background-color: #ccc; border-radius: 50%; } 
.input_mynum .mark i:first-child { margin-left: 0; } 
.input_mynum .mark i.on { background-color: #fff !important; } 
.input_mynum.last { padding-right: 0; padding-left: 0; } 
.input_mynum.last input { text-align: center; text-indent: 0.4rem; } 
.input_mynum.last .mark { left: 10px; } 
.mynum_after { display: inline-block; vertical-align: middle; margin: -9px 0 0 0; } 
.mynum_after i { display: inline-block; vertical-align: middle; width: 12px; height: 12px; margin-left: 5px; background-color: #333; border-radius: 50%; } 

.checkbox { position: relative; display: inline-block; vertical-align: middle; } 
.checkbox input { width: 1px; height: 1px; border: 0; margin: -1px; padding: 0; overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); } 
.checkbox input + label { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 0.15rem 0 5px 29px; font-size: 13px; color: #666; } 
.checkbox input:checked + label { } 
.checkbox.check input + label:before { width: 1.25rem; height: 1.25rem; left: 0; top: 0; background-image: url("../img/checkbox_check.png"); } 
.checkbox.check input + label:active:before,
.checkbox.check input:checked + label:active:before,
.checkbox.check input:checked + label:before { background-image: url("../img/checkbox_check_on.png"); } 
.checkbox.check2 button { position: relative; font-size: 13px; color: #4a4a4a; vertical-align: top; padding-bottom: 3px; text-align: left; } 
.checkbox.check2 input + label { width: 12px; height: 12px; margin-right: 7px; margin-top: 3px; vertical-align: top; font-size: 0; line-height: 0; color: transparent; } 
.checkbox.check2 button:after { content: ""; display: block; width: 100%; height: 1px; background: #ccc; position: absolute; left: 0; bottom: 0; } 
.checkbox.check2 input + label { display: inline-block; padding-left: 0; background-image: url("../img/checkbox_check2.png"); background-size: cover; } 
.checkbox.check2 input + label.checked { background-image: url("../img/checkbox_check2_on.png"); background-size: cover; } 
.checkbox.check2 input:checked + label:active:before,
.checkbox.check2 input:checked + label:before { background-image: url("../img/checkbox_check2_on.png"); } 

.frm_type h3 { margin-bottom: 11px; font-size: 12px; } 
.frm_type > li { margin-top: 11px; } 
.frm_type > li:first-child { margin-top: 0; } 
.frm_type li.name li:first-child { width: 70%; } 
.frm_type li.name li:last-child { width: 30%; } 
.frm_type li.name li:last-child select { border-left: 0; } 
.frm_type li.mynum li:first-child { width: 132px; } 
.frm_type li.mynum li:first-child + li { width: 28px; margin: 11px 9px 0px 9px; text-align: center; } 
.frm_type li.mynum li:first-child + li i { display: inline-block; width: 11px; height: 1px; background-color: #000; } 
.frm_type li.mynum li:first-child + li + li .input { width: 37px; } 
.frm_type li.cnum li:first-child { width: 67%; } 
.frm_type li.cnum li:last-child { width: 33%; } 
.frm_type li.cnum .time { position: absolute; top: 18px; right: 13px; font-size: 13px; color: #ed1941; } 
.frm_type li.cnum .btn_del { right: 2.2rem; } 
.frm_type li.cnum .btn_resend { width: 100%; } 
.frm_type li.cnum ul + p { position: relative; margin-top: 7px; padding-left: 7px; font-weight: 400; font-size: 12px; color: #666; } 
.frm_type li.cnum ul + p:before { content: ""; display: block; width: 2px; height: 2px; background-color: #666; position: absolute; top: 0.4rem; left: 0; } 

/* title */
.title_type { margin-bottom: 11px; font-size: 16px; } 

/* list */
.list_caution { text-align: left; font-weight: 400; line-height: 1.5; font-size: 11px; color: #666; } 
.list_caution h3 { margin-bottom: 6px; font-size: 13px; } 
.list_caution li.n { position: relative; padding-left: 11px; } 
.list_caution li.n tt { position: absolute; left: 0; } 

/* animation fn*/
.twinkle { display: inline-block; } 

@keyframes loadColor { 
 from { background: #dfdfdf; } 
 to { background: #ff3a4a; } 
 }

@keyframes move { 
 0% { left: -200px; } 
 28% { left: -200px; } 
 100% { left: -29px; } 
 }

@keyframes show { 
 0% { opacity: 0; } 
 78% { opacity: 0; } 
 100% { opacity: 1; } 
 }

@keyframes click-finger { 
 from { transform: scale(1); top: 60px; } 
 to { transform: scale(0.9); top: 63px; } 
 }

@keyframes click-select { 
 from { transform: scale(0.8); opacity: 0; } 
 to { transform: scale(1); opacity: 1; } 
 }

.click-motion { position: relative; } 
.click-motion img:first-child { position: absolute; left: -29px; top: 50px; width: 100px; animation: move 1.8s ease forwards; } 
.click-motion .show img:first-child { position: absolute; left: 40px; top: 60px; width: 25px; z-index: 1; animation: click-finger 0.7s 2.3s ease alternate infinite, show 1.8s ease forwards; } 
.click-motion .show img:first-child + img { position: absolute; left: 37px; top: 53px; width: 25px; animation: click-select 0.7s 2.3s ease alternate infinite, show 2.3s ease forwards; } 
.twinkle > div.on { background-color: #ff3a4a; } 
.twinkle > div { display: inline-block; height: 9px; width: 9px; margin-left: 6px; background-color: #dfdfdf; border-radius: 50%; animation: loadColor 1.75s ease-in infinite; } 
.twinkle > div:first-child { animation-delay: 0s; margin-left: 0; } 
.twinkle > div:nth-child(2) { animation-delay: 0.1s; } 
.twinkle > div:nth-child(3) { animation-delay: 0.3s; } 
.twinkle > div:nth-child(4) { animation-delay: 0.5s; } 
.twinkle > div:nth-child(5) { animation-delay: 0.6s; } 
.twinkle > div:nth-child(6) { animation-delay: 0.9s; } 

/* popup */
.ly_pop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } 
.ly_pop:before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #000; opacity: 0.5; } 
.ly_pop .close { position: absolute; top: 0; right: 0; padding: 11px; } 
.ly_pop .close i { vertical-align: top; } 
.ly_pop .cont { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 990; text-align: center; } 
.ly_pop .cont:before { height: 100%; content: ""; display: inline-block; vertical-align: middle; } 
.ly_pop .elm { position: relative; display: inline-block; vertical-align: middle; width: 80%; background: #fff; text-align: center; font-weight: 400; font-size: 23px; line-height: 1.3; } 
input[type="tel"]::-ms-clear,
input[type="text"]::-ms-clear { display: none; } 

/* layout */
.ui_cover { padding-right: 17px; padding-left: 17px; } 
.ui_table { display: table; table-layout: fixed; width: 100%; } 
.ui_table > li { display: table-cell; vertical-align: middle; } 
.ui_cols:after { content: ""; display: block; clear: both; } 
.ui_cols > li { float: left; } 
.ui_align_mid { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; text-align: center; } 
.ui_align_mid:before { height: 100%; content: ""; display: inline-block; vertical-align: middle; } 
.ui_align_mid .ele { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto 0 -1px; } 

#header { /* Status bar height on iOS 11.0 */
 padding-top: constant(safe-area-inset-top); /* Status bar height on iOS 11+ */
 padding-top: env(safe-area-inset-top); background-color: #f8f8f8; text-align: center; } 

#header h1 { padding: 15px 0; display: inline-block; } 
#header h1 img { width: 100%; /* height: 100%; */}
#header > h1 > a { display: inline-block; } 
#header > .gnb_wrap { display: table; table-layout: fixed; width: 100%; height: 37px; } 
#header > .gnb_wrap > li { display: table-cell; height: 100%; padding: 15px 0; border-bottom: 2px solid #ff3a4a; background: #f8f8f8; font-size: 16px; font-weight: 700; color: #4b4b4b; text-align: center; box-sizing: border-box; .float: left; .width: 33%; } 
#header > .gnb_wrap.col-2 > li { .width: 49.7%; } 
#header > .gnb_wrap > li a { display: inline-block; width: 100%; color: #333; } 
#header > .gnb_wrap > .on { border-top: 2px solid #ff3a4a; border-bottom: 0; border-color: #ff3a4a; background: #fff; color: #ff3a4a; } 
#header > .gnb_wrap > .on a { color: #ff3a4a; } 
#header > .gnb_wrap > li:last-child { border-right: 0px; border-left: 2px solid #ff3a4a; } 

#footer { /background-color: #efefef; position: fixed; width: 100%; bottom: 0; left: 0; right: 0; margin: 0 auto; } 
#footer p { font-size: 11px; font-weight: 400; color: #666; } 
#footer img.logo { position: absolute; top: 4px; right: 18px; height: 19px; } 
#footer.nofix { position: relative; bottom: auto; overflow: hidden; } 

/* 하단배너 */
.footerBanner { position: fixed; bottom: 53px; left: 0; right: 0; width: 90%; margin-top: 30px; margin: 0 auto; text-align: center; } 
.footerBanner a { display: block; } 
.footerBanner img { width: 100%; height: 70px; } 

.ft_certify { float: left; } 
.ft_certify .ft_certify_logo { float: left; margin-right: 5px; } 
.ft_certify .ft_certify_txt { float: left; color: #666; } 
.ft_certify .ft_certify_txt button { position: relative; padding-right: 5px; margin-right: 5px; float: left; font-size: 11px; font-weight: 700; color: #757575; } 
.ft_certify .ft_certify_txt button:first-child { font-size: 10px; font-weight: 400; } 
.ft_certify .ft_certify_txt button:first-child:before { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 11px; margin-top: -5px; background: #757575; } 
.ft_certify .ft_certify_txt p { clear: both; } 
.ft_logo { float: right; } 

/* display */
.none { display: none !important; } 
.block { display: block !important; } 

/* 보안입력 */
.securLabel { position: absolute; left: -9999px; top: -9999px; text-indent: -9999px; overflow: hidden; } 
