@charset "UTF-8";
@import "https://shop.kt.com/common/pc/kt_css/KT_0.font.css";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/** 1. Set default font family to sans-serif. 2. Prevent iOS and IE text size adjust after device orientation change, without disabling user zoom. */
html {
  /* font-family: sans-serif; */
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/** Remove default margin. */
body {
  margin: 0;
}

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article,aside,details,figcaption,figure,footer,header,
hgroup,main,menu,nav,section,summary {  display: block;}

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio,canvas,progress,video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) {
  display: none;
  height: 0;
}

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */
[hidden],
template {
  display: none;
}

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a {
  background-color: transparent;
}

/** Improve readability of focused elements when they are also in an active/hover state. */
a:active,
a:hover {
  /* outline: 0; */
}

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] {
  border-bottom: 1px dotted;
}

/** Address style set to `700er` in Firefox 4+, Safari, and Chrome. */
b, strong {
  font-weight: 700;
}

/** Address styling not present in Safari and Chrome. */
dfn {
  font-style: italic;
}

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1, h2 {
  font-size: 2em;
  margin: .67em 0;
}

/** Address styling not present in IE 8/9. */
mark {
  color: #000;
  background: #ff0;
}

/** Address inconsistent and variable font size in all browsers. */
small {
  font-size: 80%;
}

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img {
  border: 0;
}

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) {
  overflow: hidden;
}
*{
 text-size-adjust: none;
}
/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure {
  margin: 1em 40px;
}

/** Address differences between Firefox and other browsers. */
hr {
  box-sizing: content-box;
  height: 0;
}

/** Contain overflow in all browsers. */
pre {
  overflow: auto;
}

/** Address odd `em`-unit font size rendering in all browsers. */
code,kbd,pre,samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button,input,optgroup,select,textarea {
  margin: 0;
  /* 3 */
  color: inherit;
  /* 1 */
}

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button {
  overflow: visible;
}

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select {
  text-transform: none;
}

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type='button'], input[type='reset'], input[type='submit'] {
  cursor: pointer;
  /* 3 */
  -webkit-appearance: button;
  /* 2 */
}

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] {
  cursor: default;
}

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input {
  line-height: normal;
}

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */
input[type='search'] {
  box-sizing: content-box;
  /* 2 */
  -webkit-appearance: textfield;
  /* 1 */
}

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/** Define consistent border, margin, and padding. */
fieldset {
  margin: 0 2px;
  padding: .35em .625em .75em;
  border: 1px solid #c0c0c0;
}

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend {
  padding: 0;  /* 2 */
  border: 0;  /* 1 */
}

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea {
  overflow: auto;
}

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup {
  font-weight: 700;
}

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,th {
  padding: 0;
}

*{
  font-style: normal;
  /*outline: none; */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: -0.5px;
}

body,
html {
  width: 100%;
  height: 100%;
  letter-spacing: -0.5px;
  min-width:320px;
}

body {
  font-size: 13px;
  font-weight: 400;
  color: #000;
  letter-spacing: -0.5px;
  line-height: 1.4;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;

}
#content, .bodyCont{max-width: 768px;margin: 0 auto;}
#contents, #body {padding: 10px 30px 70px;max-width:768px;min-width:320px;margin:0 auto;}


body.hidden, body.hidden-2 {
  overflow: hidden
}

a {
  text-decoration: none;
  color: #666;
}

address,
em {
  font-style: normal;
}

hr {
  display: none;
}

form,dd {
  margin: 0;
}

/* table */
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

td, th {
  word-break: break-all;
  background-clip: padding-box;
}

td.posr, th.posr {
  position: relative;
}

caption {
  overflow: hidden; position: absolute;  width: 1px;  height: 1px;  margin: -1px;  border: 0; clip: rect(1px,1px,1px,1px);
clip-path: inset(50%);
}

fieldset {
  border: none;
}

/*  form */
input[type=checkbox], input[type=radio] {
  padding: 0;
}

input[type=number]:-ms-clear,
input[type=password]:-ms-clear,
input[type=text]:-ms-clear {
  display: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

button {
  font-weight: normal;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: sans-serif;
}

textarea {
  resize: none;
}

a, button, img, input, select, textarea {
  vertical-align: middle;
}

a, button {
  display: inline-block;
  text-align: center;
}

/* a:active,
a:focus,
a:hover,
button:active,
button:focus,
button:hover,
input:focus, textarea:focus, select:focus,dt:focus{
  text-decoration: none;
  border-color: #2491eb;
  outline: 1px solid #2491eb;
} */

dl,ol,ul{margin:0;padding:0}
ul > li:last-child, ol > li:last-child{margin-bottom:0 !important}
dl,li{margin:0;padding:0;list-style:none}
p{margin:0}
b,strong{font-weight:400}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:0}
.tal{text-align:left!important}
.tar{text-align:right!important}
.tac{text-align:center!important}
.fll{float:left!important}
.fln{float:none!important}
.flr{float:right!important}
.vat{vertical-align:top}
.vam{vertical-align:middle}
.vabl{vertical-align:baseline}
.p0{padding:0!important}
.p5{padding:5px!important}
.p10{padding:10px!important}
.p15{padding:15px!important}
.p20{padding:20px!important}
.p25{padding:25px!important}
.p30{padding:30px!important}
.p35{padding:35px!important}
.p40{padding:40px!important}
.p45{padding:45px!important}
.p50{padding:50px!important}
.p55{padding:55px!important}
.p60{padding:60px!important}
.pt0{padding-top:0!important}
.pt5{padding-top:5px!important}
.pt6{padding-top:6px!important}
.pt10{padding-top:10px!important}
.pt12{padding-top:12px!important}
.pt15{padding-top:15px!important}
.pt18{padding-top:18px!important}
.pt20{padding-top:20px!important}
.pt25{padding-top:25px!important}
.pt30{padding-top:30px!important}
.pt35{padding-top:35px!important}
.pt40{padding-top:40px!important}
.pt45{padding-top:45px!important}
.pt50{padding-top:50px!important}
.pt55{padding-top:55px!important}
.pt60{padding-top:60px!important}
.pr0{padding-right:0!important}
.pr5{padding-right:5px!important}
.pr10{padding-right:10px!important}
.pr15{padding-right:15px!important}
.pr20{padding-right:20px!important}
.pr25{padding-right:25px!important}
.pr30{padding-right:30px!important}
.pr35{padding-right:35px!important}
.pr40{padding-right:40px!important}
.pr45{padding-right:45px!important}
.pr50{padding-right:50px!important}
.pr55{padding-right:55px!important}
.pr60{padding-right:60px!important}
.pr100{padding-right:100px!important}
.pb0{padding-bottom:0!important}
.pbt0{padding-bottom:0!important;padding-top:0!important}
.pb5{padding-bottom:5px!important}
.pb10{padding-bottom:10px!important}
.pb12{padding-bottom:12px!important}
.pb15{padding-bottom:15px!important}
.pb18{padding-bottom:18px!important}
.pb20{padding-bottom:20px!important}
.pb25{padding-bottom:25px!important}
.pb30{padding-bottom:30px!important}
.pb35{padding-bottom:35px!important}
.pb40{padding-bottom:40px!important}
.pb45{padding-bottom:45px!important}
.pb50{padding-bottom:50px!important}
.pb55{padding-bottom:55px!important}
.pb60{padding-bottom:60px!important}
.pl0{padding-left:0!important}
.pl5{padding-left:5px!important}
.pl10{padding-left:10px!important}
.pl15{padding-left:15px!important}
.pl20{padding-left:20px!important}
.pl25{padding-left:25px!important}
.pl30{padding-left:30px!important}
.pl35{padding-left:35px!important}
.pl40{padding-left:40px!important}
.pl45{padding-left:45px!important}
.pl50{padding-left:50px!important}
.pl55{padding-left:55px!important}
.pl60{padding-left:60px!important}
.m0{margin:0!important}
.m5{margin:5px!important}
.m10{margin:10px!important}
.m15{margin:15px!important}
.m18{margin:18px!important}
.m20{margin:20px!important}
.m25{margin:25px!important}
.m30{margin:30px!important}
.m35{margin:35px!important}
.m40{margin:40px!important}
.m45{margin:45px!important}
.m50{margin:50px!important}
.m55{margin:55px!important}
.m60{margin:60px!important}
.mt0{margin-top:0!important}
.mt3{margin-top:3px!important}
.mt5{margin-top:5px!important}
.mt6{margin-top:6px!important}
.mt8{margin-top:8px!important}
.mt10{margin-top:10px!important}
.mt12{margin-top:12px!important}
.mt15{margin-top:15px!important}
.mt17{margin-top:17px!important}
.mt18{margin-top:18px!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}
.mt55{margin-top:55px!important}
.mt60{margin-top:60px!important}
.mr0{margin-right:0!important}
.mr5{margin-right:5px!important}
.mr10{margin-right:10px!important}
.mr15{margin-right:15px!important}
.mr20{margin-right:20px!important}
.mr25{margin-right:25px!important}
.mr30{margin-right:30px!important}
.mr35{margin-right:35px!important}
.mr40{margin-right:40px!important}
.mr45{margin-right:45px!important}
.mr50{margin-right:50px!important}
.mr55{margin-right:55px!important}
.mr60{margin-right:60px!important}
.mb0{margin-bottom:0!important}
.mb5{margin-bottom:5px!important}
.mb6{margin-bottom:6px!important}
.mb10{margin-bottom:10px!important}
.mb12{margin-bottom:12px!important}
.mb15{margin-bottom:15px!important}
.mb20{margin-bottom:20px!important}
.mb25{margin-bottom:25px!important}
.mb30{margin-bottom:30px!important}
.mb35{margin-bottom:35px!important}
.mb40{margin-bottom:40px!important}
.mb45{margin-bottom:45px!important}
.mb50{margin-bottom:50px!important}
.mb55{margin-bottom:55px!important}
.mb60{margin-bottom:60px!important}
.mb100{margin-bottom:100px!important}
.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}
.ml25{margin-left:25px!important}
.ml30{margin-left:30px!important}
.ml35{margin-left:35px!important}
.ml40{margin-left:40px!important}
.ml45{margin-left:45px!important}
.ml50{margin-left:50px!important}
.ml55{margin-left:55px!important}
.ml60{margin-left:60px!important}
.wa{width:auto!important}

a.btn, button.btn, input.btn, label.btn, span.btn {
  width: 100%;
  display: inline-block;
  text-align: center;
  background-color: #f4f4f4;
  color: #dcdddc;
  height: 47px;
  border-radius: 5px;
  line-height: 47px;
  font-size: 15px;
  font-weight: 700;
}

a.btn:disabled, button.btn:disabled, input.btn:disabled, label.btn:disabled, span.btn:disabled {
  background: #F4F4F4;
}

a.btn.fill, button.btn.fill, input.btn.fill, label.btn.fill, span.btn.fill {
  background-color: #00a2be;
  color: #fff;
}
a.btn.gray, button.btn.gray, input.btn.gray, label.btn.gray, span.btn.gray {
  background-color: #bcbcbc;
  color: #fff;
}
a.btn:disabled, button.btn:disabled, input.btn:disabled, label.btn:disabled, span.btn:disabled {
  background-color: #f4f4f4;
  color: #dcdddc;
}

a.btn.medium, button.btn.medium, input.btn.medium, label.btn.medium, span.btn.medium {
  height: 35px;
  line-height: 35px;
  font-size: 13px;
  border-radius: 3px;
  font-weight: normal;
}

a.btn.small, button.btn.small, input.btn.small, label.btn.small, span.btn.small {
  height: 30px;
  line-height: 28px;
  font-size: 12px;
  border-radius: 3px;
}

a.btn.xsmall, button.btn.xsmall, input.btn.xsmall, label.btn.xsmall, span.btn.xsmall {
  height: 27px;
  line-height: 25px;
  font-size: 12px;
  border-radius: 3px;
}
button.btn > span{font-weight:inherit;color:inherit;}

/* Clearable text inputs */
.clearable {
  background: url("../../images/directShop/btn-input-del.svg") no-repeat right -23px center;
  background-size: 23px 23px;
  padding-right: 32px !important;
  /* Use the same right padding (18) in jQ! */
  transition: background 0.2s;
  /* (jQ) Show icon */
  /* (jQ) hover cursor style */
  /* Remove IE default X */
}

.clearable.x { background-position: right 16px center;  border-bottom:1px solid #000}

.clearable.onX { cursor: pointer;}

.clearable::-ms-clear { display: none; width: 0;  height: 0;}

.clearbleWrap{position:relative;display:block;}
.clearbleDel{position:absolute;right:0;top:1px;height:50px;width:35px;margin-right:10px;color:transparent;z-index:1;transition:right 0.3s}
.clearable:not(.x) + .clearbleDel{right:0;}
.clearable.x + .clearbleDel{right:0;}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], input[type=time] {
  display: inline-block;
  font-size: 14px;
  height: 53px;
  line-height: 52px;
  color: #000;
  border: none;
  padding: 0 0 0 10px;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid #808080;
  letter-spacing: -0.6px;
  /* 아이폰 사파리 보더 없애기 */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0;
}

input[type=date]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus,
input[type=time]:focus, input.active {
  border-color: #000;
}

input[type=date]:disabled,input[type=email]:disabled,
input[type=number]:disabled, input[type=password]:disabled,
input[type=search]:disabled, input[type=tel]:disabled,
input[type=text]:disabled, input[type=url]:disabled,
input[type=time]:disabled {
  background: #e2e2e2;
  border: 1px solid #e2e2e2;
  color: #888;
  opacity: 1;
}

input[type=date].error,
input[type=email].error,
input[type=number].error,
input[type=password].error,
input[type=search].error,
input[type=tel].error,
input[type=text].error,
input[type=url].error,
input[type=time].error {
  border-color: #f84e4e;
}

input[type=date]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=search]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
input[type=time]:-ms-input-placeholder {
  color: #808080;
}

input[type=date]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=search]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
input[type=time]::-webkit-input-placeholder {
  color: #808080;
}

input[type=date]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=search]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=text]::-moz-placeholder,
input[type=url]::-moz-placeholder,
input[type=time]::-moz-placeholder {
  color: #808080;
}

input[type=date]::placeholder,
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=text]::placeholder,
input[type=url]::placeholder,
input[type=time]::placeholder {
  opacity: 1;
  color: #808080;
}

input[type=date]::-webkit-clear-button,
input[type=email]::-webkit-clear-button,
input[type=number]::-webkit-clear-button,
input[type=password]::-webkit-clear-button,
input[type=search]::-webkit-clear-button,
input[type=tel]::-webkit-clear-button,
input[type=text]::-webkit-clear-button,
input[type=url]::-webkit-clear-button,
input[type=time]::-webkit-clear-button {
  display: none;
}

input[type=date]::-webkit-clear-button,
input[type=date]::-ms-clear,
input[type=email]::-webkit-clear-button,
input[type=email]::-ms-clear,
input[type=number]::-webkit-clear-button,
input[type=number]::-ms-clear,
input[type=password]::-webkit-clear-button,
input[type=password]::-ms-clear,
input[type=search]::-webkit-clear-button,
input[type=search]::-ms-clear,
input[type=tel]::-webkit-clear-button,
input[type=tel]::-ms-clear,
input[type=text]::-webkit-clear-button,
input[type=text]::-ms-clear,
input[type=url]::-webkit-clear-button,
input[type=url]::-ms-clear,
input[type=time]::-webkit-clear-button,
input[type=time]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

textarea {
  display: block;
  font-size: 14px;
  line-height: 1.46;
  color: #000;
  padding: 14px 15px;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: -0.52px;
  border: none;
  background: none;
  font-family: sans-serif;
  /* 아이폰 사파리 보더 없애기 */
  -webkit-appearance: none;
  appearance: none;
}

textarea:-ms-input-placeholder {
  color: #a8a8a8;
}

textarea::-webkit-input-placeholder {
  color: #a8a8a8;
}

textarea::-moz-placeholder {
  color: #a8a8a8;
}

textarea::placeholder {
  opacity: 1;
  color: #a8a8a8;
}

.textarea-count {
  border-radius: 5px;
  background-color: #f4f4f4;
}

.textarea-count textarea {
  height: 75px;
}

.textarea-count>div {
  text-align: right;
  padding: 0 15px 13px 0;
  color: #a8a8a8;
  line-height: 1.54;
  letter-spacing: -0.52px;
  font-size: 13px;
}

.checkbox,
.radio {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.checkbox.small,
.radio.small {
  font-size: 0;
  height: auto;
  line-height: normal;
  min-width: auto;
  padding: 0;
}
.terms-list li input,
.checkbox input,
.radio input {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 25px;
  height: 25px;
  background: url(../../images/directShop/icon-checkbox.svg) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.checkbox input:checked,
.radio input:checked {
  background-image: url(../../images/directShop/icon-checkbox-check.svg);
}
.terms-list li label,
.checkbox label,
.radio label {
  display: inline-block;
  padding-left: 35px;
  font-size: 15px;
  line-height: 25px;
  vertical-align: top;
  letter-spacing: -0.6px;
}
.terms-list li input,
.checkbox.small input {
  width: 13px;
  height: 9px;
  left: 6px;
  background-image: url(../../images/directShop/icon-checkbox-small.svg);
  appearance: none;
  -webkit-appearance:none
}

.checkbox.small input:checked {
  background-image: url(../../images/directShop/icon-checkbox-small-check.svg);
}

.checkbox.small.st2 input {
  left:0;
  border:1px solid #aaa;
  box-sizing:border-box;
  width:25px;
  height:25px;
  background-position:50% 52%;
  background-size:11px auto;
  border-radius:100px;
  background-image: url(../../images/directShop/icon-checkbox2_off.svg);

}
.checkbox.small.st2 input:checked{
  border-color:#000;
  background-position:50% 50%;
  background-image: url(../../images/directShop/icon-checkbox2_on.svg);
}
.checkbox.small.st2 label{
  font-size:13px;
  color:#aaa;
  padding-left:32px;
  line-height:26px;
}
.checkbox.small.st2 input:checked + label{
  color:#000;
}

.radio input {
  background-image: url(../../images/directShop/radio_off.png);
}

.radio input:checked {
  background-image: url(../../images/directShop/radio_on.png);
}

select {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: 100%;
  height: 53px;
  font-size: 14px;
  color: #202020;
  line-height: 53px;
  background: url("/images/directShop/icon-select.svg") no-repeat right 50% #fff;
  background-size: 12px 6px;
  border: none;
  border-bottom: 1px solid #E4E4E4;
  /* 아이폰 사파리 보더 없애기 */
  -webkit-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  padding: 0;

}

select.placeholder {
  color: #dcdddc;
}
select::-ms-expand {display:none}
select option, select.selected{
  color: #000;
}

label + .tab-nav {margin-top:10px;}

.tab-nav, .tab-button, .tab-nav-direct {
  width: calc(100% + 8px);
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin: 0 -4px;
  margin-bottom: 20px;
}

.tab-nav li, .tab-button li, .tab-nav-direct li {
  position: relative;
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  background-color: #f4f4f4;
  border-radius: 5px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(100% / 3);
  margin: 0 4px;
}

.tab-nav li.active, .tab-button li.active, .tab-nav-direct li.active {
  z-index: 1;
  background-color: #291c1c;
  font-weight: 700;
}
.tab-nav li.active label, .tab-nav-direct li.active label, .tab-button li.active label,
.tab-nav li.active a, .tab-nav-direct li.active a, .tab-button li.active a{
  color: #fff;
  font-weight: 700;
}

.tab-nav li a, .tab-nav li label, .tab-nav-direct li a, .tab-nav-direct li label,
.tab-button li a, .tab-button li label {
  display: block;
  font-size: 13px;
  height: 36px;
  line-height: 36px;
  letter-spacing: -0.52px;
  color: #879198;
  position: relative;z-index:10;
  cursor: pointer;
}

.tab-nav li input, .tab-button li input, .tab-nav-direct li input {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
}

.tab-content {margin-top:25px;}
.tab-content>div {
  display: none;
}

.tab-content>div.active {
  display: block;
}

.tab-content .parents-name .tab-content,
.tab-content .user-name .tab-content,
.tab-content .fee-btn-wrap .tab-content {margin-top:0;}

.btn-input {
  position: relative;
  margin-bottom: 20px;
}

.btn-input input {
  margin-bottom: 0 !important;
}

.btn-input button {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  text-indent: -9999px;
}

.btn-input button:before, .arrow:after {
  display: block;
  content: '';
  width: 6px;
  height: 12px;
  background: url(../../images/directShop/icon-arrow-right.svg) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.btn-input.down button:before{
  right: 6px; transform: translateY(-50%) rotate(90deg);
}
.btn-input2 {
  position: relative;
  margin-bottom: 44px;
}

.btn-input2 input {
  padding-right:60px;
  margin-bottom: 0 !important;
}

.btn-input2 .btn {
  display: block;
  width: auto;
  height: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 5px;
  background-color: #808080;
  font-size: 13px;
  color: #fff;
  padding: 0 15px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  overflow: hidden;
}

.ui-select {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 59px;
  padding: 20px 0;
}

.ui-select:after {
  display: block;
  clear: both;
  content: '';
}

.ui-select.active {
  z-index: 2;
}

.ui-select.active>ul {
  visibility: visible;
}

.ui-select>button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 1.46;
  color: #333;
  float: right;
  position: relative;
  padding-right: 16px;
}

.ui-select>button:before {
  display: block;
  content: '';
  width: 11px;
  height: 5px;
  background: url(/images/directShop/icon-ui-select.svg) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.ui-select>ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
  top: 100%;
  width: auto;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.16);
  padding: 9px 17px;
}

.ui-select>ul>li {
  line-height: 2.31;
  font-size: 13px;
  color: #666;
}

.ui-select>ul>li.active {
  color: #00a2be;
}

.ui-select>ul.above {
  top: auto !important;
  bottom: 100%;
  border-bottom: 0;
}

.ui-select>ul.above>li {
  border-bottom: 0;
  border-top: 1px solid #ccc;
}



h1 button, h2.tit button {
  line-height: 100%; position: relative;
  padding-left: 22px; font-size: 16px;  font-weight: 500;
  letter-spacing: -0.64px;
}

h1 button:before,  h2.tit button:before {
  display: block;
  content: '';
  width: 11px;
  height: 17px;
  background: url(../../images/directShop/icon-arrow-left.svg) 0 0 no-repeat;
  background-size: 70%;
  position: absolute;
  top: 3px;
  left: 0;

}




/* #content.done {  margin: 0 -30px;  padding-bottom: 40px;}  */
/* #body { padding: 142px 0 107px;}  */

#top-tab .swiper-scrollbar {
  width: 100%;
  left: 0;
  opacity: .1;
}

#top-tab>.tab-nav {
  white-space: nowrap;
  font-size: 0;
  margin: 0;
  display: block;
  height: auto;
}

#top-tab>.tab-nav li {
  background: none;
  /* margin: 0 5px; */
  display: inline-block;
  height: auto;
  width: auto;
}

#top-tab>.tab-nav li:first-child {
  /* margin-left: 25px; */
  margin-left:0;
}

#top-tab>.tab-nav li:last-child {
  /* margin-right: 25px; */
  margin-right:0;
}

#top-tab>.tab-nav li.active button,
#top-tab>.tab-nav li.active a {
  color: #000;
  background-color: #ebebeb;
}

#top-tab>.tab-nav li button,
#top-tab>.tab-nav li a {
  height: 45px;
  line-height: 43px;
  font-size: 14px;
  font-weight: 500;
  color: #767676;
  padding: 0 24px;
  position: relative;
  border-radius: 4px;
  background-color: #f4f4f4;
  margin-right: 0;
  box-shadow: 0 -2px 0 0 #e8e8e8 inset;
  letter-spacing: -0.56px;
  border: solid 1px #e2e2e2;
  background-color: #ffffff;
}

#top-tab>.tab-nav li button:disabled,
#top-tab>.tab-nav li a:disabled {
  color: #748a9d;
}

#top-tab div [id^=tab-anchor] {
  display: block;
  padding: 40px 0;
}

#top-tab #tab-anchor1 {
  padding-top: 0px;
}

#top-tab #tab-anchor5 {
  padding-bottom: 0px;
}

#footer-btn {
  position: fixed;
  left: 30px;
  bottom: 23px;
  width: calc(100% - 60px);
}

.hidden {
  display: none !important;
}

.step-navi {
  font-size: 0;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding-top: 43px;
  margin-bottom: 44px;
}

.step-navi button {
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: 500;
  color: #879198;
  padding: 0 30px 0 16px;
  position: relative;
  border-radius: 4px;
  background-color: #f4f4f4;
  margin-right: 5px;
}

.step-navi button:before {
  display: block;
  content: '';
  width: 8px;
  height: 5px;
  background: url(/images/directShop/icon-step-navi.svg) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

.step-navi button.active {
  color: #000;
}

.step-navi button.active:before {
  background-image: url(/images/directShop/icon-step-navi-active.svg);
}

.step-navi button:disabled {
  color: #dcdddc;
}

.step-navi button:disabled:before {
  background-image: url(/images/directShop/icon-step-navi-disabled.svg);
}

.alert {
  line-height: 100%;
  color: #fe2c55;
  font-size: 12px;
  letter-spacing: -0.48px;
  font-weight: 400;
  margin-top: 10px;
  line-height: 20px;
  position: relative;
  padding-left: 20px;
  word-break: keep-all;
}

.alert em {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #fe2c55;
  border-radius: 50%;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
  position: absolute;
  top: 2px;
  left: 0;
}

.alert.number {
  width: 250px;
}

@media (min-width: 768px) {
  .alert.number {
    width: 100%;
  }
}

p.step0 {
  padding: 79px 0 57px;font-size: 27px; line-height: 1.56; letter-spacing: -1.08px;
}
p.step0 .stxt, .setp-area .stxt, .boxRecommTxt .stxt{
  display:block;
  font-size:14px;
  text-indent:-8px;
  margin-left:8px;
  color:#666;
  margin-top:10px;
}
.boxRecommTxt{margin-top:30px;}
.step-top-msg .stxt {
  display:block;
  font-size:14px;
  color:#666;
  margin-top:10px;
}

.btn-wrap {
  font-size: 0;
}

.btn-wrap.step0 {
  margin-bottom: 30px;
}

.btn-wrap.step0.line1 {
  margin: 0 -5px 30px;
}

.btn-wrap.step0 a,
.btn-wrap.step0 button {
  display: block;
  overflow: hidden;
  padding: 0 15px;
  height:54px;line-height:54px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
}

.btn-wrap.step0.line1 a,
.btn-wrap.step0.line1 button {
  display: inline-block;
  overflow: hidden;
  padding: 0 15px;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  text-align: left;
  margin-bottom: 10px;
  width: calc(50% - 10px);
  margin: 0 5px;
  text-align: center;
}

.btn-wrap.step0 a span,
.btn-wrap.step0 a em,
.btn-wrap.step0 button span,
.btn-wrap.step0 button em {
  display: block;
  font-size: 15px;
}

.btn-wrap.step0 a span,
.btn-wrap.step0 button span {
  float: left;
}

.btn-wrap.step0 a em,
.btn-wrap.step0 button em {
  float: right;
  line-height: 47px;
  height: 47px;
}

.btn-wrap.step0 a em strong,
.btn-wrap.step0 button em strong {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0;
  font-weight: 700;

}

.select-plan {
  height: 19px;line-height: 19px;position: relative; padding-right: 12px;font-size:13px;font-weight:500;
  color:#000;
}

.select-plan:before {
  display: block;
  content: '';
  width: 5px;
  height: 10px;
  background: url(/images/directShop/icon-select-plan.svg) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  top: 6px;
  right: 0;
}

.name h2 {
  font-size: 13px;
  color: #666;
  letter-spacing: -0.52px;
  margin-bottom: 13px;
}

.name input {
  margin-bottom: 20px;
}

.parents-name, .foreign-name, .user-name{
  transition: all .5s ease-in-out;
}

.parents-name .alert {
  margin-bottom: 50px;
}
.parents-name .alert-2{margin-bottom: 10px;}
.parents-name .alert-2 + div{margin-bottom: 30px;}
.parents-name h2, .foreign-name h2, .user-name h2,
.order-opt h2{
  font-size: 13px;
  color: #666;
  letter-spacing: -0.52px;
  margin-bottom: 13px;
}

.foreign-name .alert{margin-bottom:30px}


.select-number-list li:last-child {
  margin-bottom: 0;
}

.select-number-list .radio {
  display: block;
  height: 25px;
  line-height: 25px;
}

.select-number-list .radio label {
  padding-left: 0;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  width: 100%;
  color: #dcdddc;
  font-size: 16px;
}

.select-number-list .radio label>span {
  color: #000;
}

.select-number-list .radio input {
  left: auto;
  right: 0;
}

.terms-list li {
  margin-bottom:15px;
  position: relative;
  padding-right: 30px;
}
.terms-list li:last-child{margin-bottom:15px !important}
.terms-list li>a,
.terms-list li>button {
  height: 25px;
  width: 25px;
  text-indent: -9999px;
  overflow: hidden;
  float: right;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
}

.terms-list li>a:before,
.terms-list li>button:before {
  display: block;
  content: '';
  width: 6px;
  height: 12px;
  background: url(/images/directShop/btn-term.svg) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.terms-list li label{color:#a2a2a2}
.terms-list li input[type=checkbox]:checked +label{color:#000}
.done-title {
  font-size: 27px;
  letter-spacing: -1.08px;
  line-height: 1.37;
  padding: 50px 55px 30px 55px;
}

.gray-box {
  background-color: #f0f4f5;
  padding: 50px 30px;
  margin-bottom: 50px;
}

.gray-box .date {
  text-align: right;
  font-size: 13px;
  color: #707070;
  line-height: 1.31;
  margin-bottom: 10px;
}

.gray-box.inquiry {
  margin: 0 -30px 50px -30px;
  padding: 50px 30px 25px;
}

.round-box {
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  margin-bottom: 20px;
}

.round-box>p {
  min-height: 46px;
  padding: 12px 15px 14px 25px;
  overflow: hidden;
  letter-spacing: -0.52px;
  border-bottom: 1px solid #f4f4f4;
}

.round-box>p:last-child {
  border: none;
}

.round-box>p span,
.round-box>p strong {
  display: block;
  line-height: 1.62;
}

.round-box>p span {
  float: left;
  color: #999;
  font-size: 13px;
}

.round-box>p strong {
  float: right;
  text-align: right;
  font-size: 13px;
}

.round-box.order-detail {
  margin-bottom: 50px;
}

.round-box.order-detail>p strong button {
  display: block;
}
.round-box.order-detail>p strong button:after{display:none}
.round-box.order-detail .detial-box {
  padding: 25px;
}

.round-box.order-detail .detial-box .plan-image {
  overflow: hidden;
  margin-bottom: 13px;
}

.round-box.order-detail .detial-box .plan-image img {
  display: block;
  width: 67px;
  height: 45px;
  float: left;
}

.round-box.order-detail .detial-box .plan-image span {
  float: left;
  display: block;
  font-size: 13px;
  line-height: 1.54;
  letter-spacing: -0.52px;
  color: #999;
  margin-bottom:5px;
}
.round-box.order-detail .detial-box .plan-sale{
  margin-bottom:18px;
}
.round-box.order-detail .detial-box .plan-sale .tit{
  display:block;
  margin-bottom:4px;
  color:#999;
}
.round-box.order-detail .detial-box .plan-sale .tit:before{
  content:'└ ';

}
.round-box.order-detail .detial-box .plan-sale .depth2 {
  border:1px solid #ddd;
  padding:8px 12px;
  margin-left:5px;
}
.round-box.order-detail .detial-box .plan-sale .depth2 > li {
  margin-top:5px;
  overflow:hidden;
}
.round-box.order-detail .detial-box .plan-sale .depth2 > li:first-child {
  margin-top:0;
}
.round-box.order-detail .detial-box .plan-sale .depth2 .sale-txt {
  float:left;
  color:#999;
}
.round-box.order-detail .detial-box .plan-sale .depth2 .sale-price {
  float:right;
}
.round-box.order-detail .detial-box .price {
  float:right;
  font-size: 13px;
  letter-spacing: -0.52px;
  color: #999999;
  text-align: right;
}

.round-box.order-detail .detial-box .price strong {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.76px;
  color: #000000;
  display:inline-block;
  line-height:1;
}

.round-box.order-detail .detial-box .cancel {
  overflow: hidden;
}

.round-box.order-detail .detial-box .cancel span {
  display: block;
  float: left;
  font-size: 13px;
  line-height: 29px;
  letter-spacing: -0.52px;
  color: #000000;
}

.round-box.order-detail .detial-box .cancel .btn {
  float: right;
  width: 75px;
  height: 29px;
  line-height: 29px;
  background-color: #bcbcbc;
  color: #fff;
  letter-spacing: -0.52px;
  font-size: 13px;
  font-weight: 700;
}
.round-box span .tooltip-pop{margin-left:2px;margin-top:-1px;width:19px;height:19px;background:url(/images/directShop/btn-fee-info.svg) 0 0 no-repeat;background-size:100%;color:transparent;font-size:1px;overflow:hidden;vertical-align:bottom;}
.period {
  padding-top: 80px;
}

.period .btn-wrap {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

.period .btn-wrap button {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  border: 1px solid #e4e4e4;
  margin-left: -1px;
  font-size: 13px;
  line-height: 1.54;
  letter-spacing: -0.52px;
  text-align: center;
  color: #bcbcbc;
  height: 46px;
  line-height: 44px;
  margin-bottom: 15px;
}

.period .btn-wrap button.active {
  border-color: #000;
  color: #000;
  font-weight: 700;
  z-index: 1;
}

.period .btn-wrap button:first-child {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.period .btn-wrap button:last-child {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.period .input-wrap {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  margin-bottom: 50px;
  justify-content: center;
  align-items: center;
}

.period .input-wrap span {
  font-size: 13px;
  letter-spacing: -0.52px;
  color: #bcbcbc;
  flex-basis: 21px;
  flex-shrink: 0;
  flex-grow: 0;
  text-align: center;
}

.period .input-wrap input {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  border-radius: 3px;
  border: 1px solid #e4e4e4;
  height: 46px;
  line-height: 44px;
  text-align: center;
  flex-basis: auto;
  flex-shrink: 0;
  flex-grow: 1;
  width: auto;
  text-align: center;
}

.fee-btn-wrap,  .smart-device-pay, .smart-device-dateuse{
  margin-top: 40px;
}

.fee-btn-wrap.hidden {
  position: static !important;
  width: auto;
  height: auto;
  left: auto;
  top: auto;
  z-index: auto;
  overflow: visible;
}

.fee-btn-wrap h2 {
  font-size: 13px;
  color: #666;
  letter-spacing: -0.52px;
  margin-bottom: 13px;
  line-height: 19px;
}

.fee-btn-wrap h2 .btn-fee-info, .smart-device-pay .btn-fee-info {
  margin-left: 2px;
  margin-top: -1px;
  width: 19px;
  height: 19px;
  background: url(/images/directShop/btn-fee-info.svg) 0 0 no-repeat;
  background-size: 100%;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: bottom;
}

/* .fee-btn-wrap .tab-nav {
  margin-bottom: 10px;
} */
.notice-list dt {
  color: #000;
  font-size: 15px;
  margin-top: 10px;
  line-height: 1.53;
  position: relative;
  padding-left: 20px;
  word-break: keep-all;
}

.notice-list dt em {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
  position: absolute;
  top: 2px;
  left: 0;
}

.notice-list dd {
  font-size: 13px;
  line-height: 1.77;
  letter-spacing: normal;
  color: #666;
  position: relative;
  padding-left: 10px;
  margin: 0;
  word-break: keep-all !important;
}

.notice-list dd:before {
  display: block;
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #666;
  position: absolute;
  top: 9px;
  left: 0;
}

.notice-list li {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.67;
  letter-spacing: -0.48px;
  text-align: left;
  color: #666;
  word-break: keep-all !important;
  margin-bottom: 10px;
  position: relative;
  padding-left: 10px;
}

.notice-list li:last-child {
  margin-bottom: 0;
}

.notice-list li:before {
  display: block;
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #666;
  position: absolute;
  top: 7px;
  left: 0;
}

.done-notice {
  padding: 0 55px;
  margin-bottom: 30px;
}
.done-notice .title{margin-bottom:10px}
.done-notice p {
  font-size: 13px;
  line-height: 1.46;
  color: #707070;
  margin-bottom: 15px;
  word-break: keep-all !important;
}

.done-notice p:last-child {
  margin-bottom: 0;
}

.done-notice p a {
  color: #000;
}

.done-btn-wrap {
  padding:0 55px 30px 55px
}
.done-btn-wrap.ac {
  text-align:center;
}

.done-btn-wrap .btn {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.6px;
  width: 106px;
  margin: 0 ;
  background-color: #bcbcbc;
}

.rating-wrap>p {
  line-height: 1.46;
  letter-spacing: -0.56px;
  text-align: center;
  color: #666666;
  font-size: 14px;
  margin-bottom: 20px;
}

.rating-wrap .star {
  font-size: 0;
  text-align: center;
  margin-bottom: 50px;
}

.rating-wrap .star button {
  display: inline-block;
  width: 44px;
  height: 39px;
  overflow: hidden;
  text-indent: -9999px;
  background: url(/images/directShop/star.png) 0 0 no-repeat;
  background-size: 100%;
  margin: 0 4px;
}

.rating-wrap .star button.on {
  background: url(/images/directShop/star-check.png) 0 0 no-repeat;
  background-size: 100%;
}

.add {
  padding-top: 20px;
  padding-bottom: 30px;
}

.add h2 {
  font-size: 13px;
  line-height: 1.46;
  letter-spacing: -0.52px;
  text-align: left;
  color: #000;
  margin-bottom: 10px;
}

.add h2 span {
  color: #666;
}

.text-red {
  color: #f01c45;
}

.input-number-wrap h2 {
  font-size: 13px;
  line-height: 19px;
  color: #666;
  letter-spacing: -0.52px;
}
.input-number-wrap .stxt {font-size: 16px;}
.input-number-wrap span.stxt + input {width:50%; margin-left:10px;}
.input-number-wrap input {
  font-size: 16px;
}

.input-number-wrap .ex h2,
.input-number-wrap .ex input {
  color: #00a2be;
  font-weight: 500;
}

.input-number-wrap .ex input {
  border-bottom-color: #00a2be;
  letter-spacing: 2px;
}

.select-input-wrap {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

.select-input-wrap select {
  flex-basis: 130px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-right: 20px;
  padding-left: 10px;
}

.select-input-wrap .clearbleWrap{width:100%;}

.checkbox.fee {
  margin-top: 15px;
}
.checkbox.fee.fx {
  display:flex
}
.checkbox.fee.fx .arrow{
  display:block;
  width:14px;
}
.checkbox.fee.fx label{
  flex:1;
}

.checkbox.fee label {
  font-size: 12px;
  color: #808080;
  line-height: 17px;
  letter-spacing: -0.48px;
  word-break: keep-all;
}

.ui-popup .content,   footer, #top-tab, #main-contents {  max-width: 768px;}
.BDC_CaptchaDiv {  text-align: center;}

.read-only{color:#bbb !important}

/* 엣지 패스워드 눈모양 삭제 */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; } 

/* 랜딩 배너 */
.landing_banner {margin-top:20px; padding:0; text-align:center;}
.landing_banner img {max-width:100%;}

@media (min-width: 768px) {
  .landing_banner {max-width:708px; margin:50px auto 0 auto;}
}
.order-frm-wrap{height:100%}
.btn-bottom{padding:40px 30px !important}
.btn-bottom:after{content:"";display:block;clear:both}
.btn-bottom.btn-2 .btn:nth-of-type(1){float:left;width: calc(50% - 10px);}
.btn-bottom.btn-2 .btn:nth-of-type(2){float:right;width: calc(50% - 10px);}
.btn-bottom.flex{display:flex;justify-content: space-between;}
.btn-bottom.flex .btn{margin:0 5px;}
.btn-bottom.flex .btn:first-child{margin-left:0;}
.btn-bottom.flex .btn:last-child{margin-right:0;}
.btn-bottom.btn-bottom2{padding:10px 0 !important;}
.wrapStep .btn-bottom {padding:40px 0 !important}
.wrapStep .btn-bottom.stickied{position: fixed;bottom: 0;max-width: 448px;width: 100%;background: #f8f8f8;margin:0 -20px;padding:20px !important;z-index: 20;}
.wrapStep .btn-bottom.stickied:before{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;box-shadow: 0px -6px 10px -3px #ddd;z-index: -1;}
div,p,dt,dd,li,h1,h2,h3,h4,h5,h6,span,strong,b,em,th,td,a,dd,dt,button,input,select,textarea{font-family:'Noto Sans KR';font-weight:400}
/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
#prodViewForm{height:100%}
#contents.new-contents{min-height: calc(100% - 107px);}
.list-charge{padding-bottom:100px;}
/*추천받기*/
#content-recommend{height: calc(100% - 70px);padding:0 30px}
/* #content-recommend .btn-bottom{padding-left:0 !important;padding-right:0 !important} */
.wrapStep{height:100%}
input::-ms-clear { display: none; }
#oneLoading{
  position:fixed; top:0;bottom:0; left:0; right:0;z-index:10000;
  background:rgba(0,0,0,0.8) url(/images/oneMinute/loading.gif) center center no-repeat;
  background-size:150px auto;
}
footer { padding:40px 30px; }
.arrow-2{position:relative;padding-right:11px;}
.arrow-2:after{content:"";position:absolute;top:43%;right:0;width:6px;height:6px;border-right:1px solid #000;border-bottom:1px solid #000;transform:rotate(-45deg) translateY(-50%);-webkit-transform:rotate(-45deg) translateY(-50%); }

.jum-list .item-check-tit{display:block;margin:25px 0 10px;font-size:14px;font-weight:700;color:#000;}
.jum-list .item-check-tit:first-child{margin-top:0;}
.jum-list li{position:relative;;padding-left:10px;margin-bottom:10px;color:#666;word-break: keep-all;}
.jum-list li:before{content:"";position: absolute;top:8px;left:0;width:4px;height:4px;background-color: #666;}
.jum-list li:last-child{margin-bottom:0}

.flex_colm{display:flex;gap:4px;}
.flex_colm  .front, .flex_colm  .maskings{position:relative;flex:1;}
.flex_colm .maskings .clearable{padding-right:30px !important;overflow:hidden;}
.flex_colm .maskings .clearable.x{background-position:right 36px center}
.flex_colm .maskings .clearbleWrap .clearbleDel{margin-right:30px;}
.flex_colm .btn_showhide{position:absolute;right:4px;top:50%;margin:0;transform:translateY(-50%);width:20px;height:24px;border-radius:0;background:#fff url(/NWL/assets/images/m/btn_masking_show.png) no-repeat 50% 50% / 100% auto;}
.flex_colm .btn_showhide.on{background-image:url(/NWL/assets/images/m/btn_masking_hide.png);}
/*.flex_colm .gu{position: relative;width: 8px;margin: 0 4px;text-align: left;}
.flex_colm .gu:before {content:"-";position: absolute;height:1px;background-color:#000;}*/

/* 인증번호 */
#btn-cert-call,.ad_inp01{margin:15px 0;}

a:focus, button:focus, input:focus, textarea:focus, select:focus, dt:focus{
  /* // Webkit */
  border-color: #2491eb;
  outline: 1px solid #2491eb;
}

.menuLoop, .popLoop, .hideblind{position:absolute;font-size:1px;color:transparent;opacity:0;}

p.info-txt-mark, .info-txt-mark li {position:relative; padding-left:10px; color:#666;}
p.info-txt-mark:after, .info-txt-mark li:after {content:"*";display:block;position:absolute; top:2px; left:0;}
.com-list-dot .info-txt-mark:first-child{margin-top:0 !important;}
.com-list-dot.circle .info-txt-mark{margin-top:8px;}
.com-list-dot.circle .info-txt-mark:after{content:'';top:8px;left:2px;width:4px;height:4px;border-radius:20px;background-color:#666;}
.com-list-dot.caution .info-txt-mark{padding-left:16px;}
.com-list-dot.caution .info-txt-mark:after{content:'※';top:0;left:0;}
.com-list-dot.minus .info-txt-mark:after{content:'-';top:0;left:0;}

.com_table{border-bottom:1px solid #999;border-top:1px solid #999;}
.com_table .tbl{border-collapse:collapse;}
.com_table .tbl .ac{text-align:center;}
.com_table .tbl caption{text-indent:0;position:absolute;width:1px;height:1px;font-size:1px;color:transparent;}
.com_table .tbl tr{border-top:1px solid #ddd;}
.com_table .tbl th, .com_table .tbl td{padding:8px;border-right:1px solid #ddd;}
.com_table .tbl th{color:#222;}
.com_table .tbl td{color:#666;}
.com_table .tbl thead tr{border-bottom:1px solid #999;;}
.com_table .tbl thead tr:first-child{border-top:none;}
.com_table .tbl thead ~ tbody tr:first-child{border-color:#bbb;}
.com_table .tbl tbody tr:first-child{border-top:none;}
.com_table .tbl th:last-child, .com_table .tbl td:last-child{border-right:none;}


.order-opt .other-certification{margin-top: 20px;font-size: 13px;letter-spacing: -.52px;line-height: 20px;color: #909090;}
.order-opt.gray{margin: 20px 0 10px;background: #F4F4F4;padding: 20px 25px;border-radius: 10px;}
.order-opt.gray .radio-check{margin: 0;}
.order-opt.gray .radio-check + .radio-check{margin-top:10px}

/* 부가서비스 */
.tab-content .extra-service-wrap .box {width:100%; display: block; font-size: 15px; line-height: 1.3; overflow: hidden;}
.tab-content .extra-service-wrap .box button {width:calc(50% - 10px); min-height: 64px; float:left; padding:9px; margin:0 5px 10px; color:#879198; background-color: #ededed; border-radius:5px; font-size: 14px;}
.tab-content .extra-service-wrap .box button.selected {background-color: #000;color:#fff;}
.tab-content .extra-service-wrap .box button.selected strong {font-weight: bold;}
.tab-content .extra-service-wrap .checkbox {width:100%;}
.tab-content .extra-service-wrap .checkbox button:before{right:10px;display: block;content: '';width: 6px;height: 12px;background: url(../../images/directShop/icon-arrow-right.svg) 0 0 no-repeat;background-size: 100%;position: absolute;top: 50%;transform: translateY(-50%);}
#extra-service-useguide .agree-document-tit2 {margin-top: 20px;}

/* 홈페이지 인증 정보 */
.homepage-id-section{margin-top:15px;line-height:20px;}
.homepage-id-section p {position: relative;margin-bottom:15px;  padding-left:16px;color:#909090;font-size:13px;}
.homepage-id-section p:before{position:absolute;top:0;left:0;content:"※"}
.homepage-id-section .arrow{margin-left:16px;}
.homepage-id-section .arrow-2 {color:#01A69F;}
.homepage-id-section .arrow-2:after{content:"";position:absolute;top:50%;right:0;width:6px;height:6px;border-right:1px solid #000;border-bottom:1px solid #000;transform:rotate(-45deg) translateY(-50%);-webkit-transform:rotate(-45deg) translateY(-50%);margin-top: -1px;border-color:#01A69F;background:transparent;}

/* 툴팁 */
.popup-type-2 .tooltip-default {margin-bottom:10px;}
.popup-type-2 [tooltip] {position:relative; display:inline-flex; align-items:center;line-height:20px;font-size:12px;letter-spacing:-1.5px;}
.popup-type-2 [tooltip]:after {content:"";width:20px;height:20px;margin-left:6px;background:url(/images/direct/m/icon_what.png) right 0/20px auto no-repeat;}

.popup-type-2 .alert-tooltip{display:none;}
.popup-type-2 #alert-tooltip-popup {position: absolute;z-index: 100;max-width: 350px;min-width:200px; padding: 20px 30px 20px 20px;text-align: left;box-sizing: border-box;font-size: 12px;color: #161616;border: 1px solid #000;border-radius: 8px;/* padding: 20px; */background-color: #fff; top:18%; left:70px;}
.popup-type-2 #alert-tooltip-popup:after{content:"";width: 17px;height: 10px;position: absolute; bottom: -10px;background:url(/images/direct/m/arrow_box.png) 0 0/100% auto no-repeat;}
.popup-type-2 #alert-tooltip-popup.left:after{ left: 41px;}
.popup-type-2 #alert-tooltip-popup.center:after{left:50%; transform: translateX(-60%);}
.popup-type-2 #alert-tooltip-popup.right:after{right:10px}
.popup-type-2 #alert-tooltip-popup h1{font-size:14px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #d2d2d2;margin-right: -10px;}
.popup-type-2 #alert-tooltip-popup p{font-size:inherit;color:inherit;letter-spacing:-1px;}
.popup-type-2 #alert-tooltip-popup p + a{display:inline-block;margin-top:16px;font-size:12px; padding-right:20px;color:#000;line-height:1; font-weight:bold; background:url(/images/direct/m/arrow_b_2.png) right center/16px auto no-repeat;}
.popup-type-2 #alert-tooltip-popup .close{position:absolute;top: 14px;right: 12px;width:16px;height:16px;background:url(/images/direct/m/tootip_close.png) 0 0/100% auto no-repeat;}
.popup-type-2 #wrapStep6-opt #alert-tooltip-popup{max-width: 280px;}