style24.front/src/main/webapp/ux/mo/css/common_m.css

@charset "UTF-8";

/* fonts */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url("/ux/fonts/NotoSansKR-Thin.otf") format('opentype');
  }
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 200;
    src: url("/ux/fonts/NotoSansKR-Light.otf") format('opentype');
  }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 300;
     src: url("/ux/fonts/NotoSansKR-Regular.otf") format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 500;
     src: url("/ux/fonts/NotoSansKR-Medium.otf") format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 600;
     src:  url("/ux/fonts/NotoSansKR-Bold.otf") format('opentype');
   }
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url("/ux/fonts/NotoSansKR-Black.otf") format('opentype');
  } 
 
/* lato */
@font-face {
    font-family: 'LATO';
    src: 
    url("/ux/fonts/Lato-Light.eot") format('eot'), url("/ux/fonts/Lato-Light.woff") format('woff'), url("/ux/fonts/Lato-Light.ttf") format('ttf');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'LATO';
    src: 
    url("/ux/fonts/Lato-Regular.eot") format('eot'), url("/ux/fonts/Lato-Regular.woff") format('woff'), url("/ux/fonts/Lato-Regular.ttf") format('ttf');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'LATO';
    src: 
    url("/ux/fonts/Lato-Medium.eot") format('eot'), url("/ux/fonts/Lato-Medium.woff") format('woff'), url("/ux/fonts/Lato-Medium.ttf") format('ttf');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'LATO';
    src: 
    url("/ux/fonts/Lato-Semibold.eot") format('eot'), url("/ux/fonts/Lato-Semibold.woff") format('woff'), url("/ux/fonts/Lato-Semibold.ttf") format('ttf');
    font-weight: 600;
    font-style: normal;
}
#load {width: 100%;height: 100%;top: 0;left: 0;position: fixed;display: block;text-align: center;opacity: 0.8;background: #ffffff;background-image: url('/images/mo/movloading.gif');background-repeat: no-repeat;background-position: 50% 50%;background-size: 3.7rem 2.4rem;z-index: 99999;}
/* Basic setting */
html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
body {margin: 0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,address {display: block;}
address {font-style: normal;}
a {color: inherit;background-color: transparent;text-decoration: none;}
a:active,a:hover {outline: 0;}
h1,h2,h3,h4,h5 {margin: 0;font-weight: 400;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {color: #222222;padding: 0px;margin: 0px;line-height: 1;}
img {border: 0;max-width: 100%;vertical-align: top;}
hr {height: 0;-webkit-box-sizing: content-box;box-sizing: content-box;}
button,input,optgroup,select,textarea {margin: 0;font: inherit;color: inherit;}
button {overflow: visible;background: none;border: none;padding: 0;}
button,select {text-transform: none;}
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;}
button[disabled],html input[disabled] {cursor: default;}
button:focus {outline: #007bce dotted thin;}
button::-moz-focus-inner,input::-moz-focus-inner {padding: 0;border: 0;}
input {line-height: normal;}
input[type="checkbox"],input[type="radio"] {-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto;}
input[type="search"] {-webkit-box-sizing: content-box;box-sizing: content-box;-webkit-appearance: textfield;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
fieldset {padding: .35em .625em .75em;margin: 0 2px;border: 1px solid #c0c0c0;}
legend {padding: 0;border: 0;}
textarea {overflow: auto;}
optgroup {font-weight: bold;}
table {border-spacing: 0;border-collapse: collapse;}
td,th {padding: 0;}
ul,ol {padding: 0;margin: 0;list-style: none;}
dl,dt,dd {margin: 0;}
p {padding: 0;margin: 0;}
i,em {font-style: normal;}

.block {display:block;}
.inblock {display:inline-block;*display:inline;zoom:1;}
.clear {*zoom:1; clear:both;}
.clear:after {content:""; display:block; clear:both;}
.fr::after, .fl::after{content: '';display: block;clear: both;}
.fl {float:left !important;}
.fr {float:right !important;}
.t_c {text-align:center !important;}
.t_l {text-align:left !important;}
.t_r {text-align:right !important;}
.btn_center {text-align:center; margin-top:30px;}
.btn_right {text-align:right; margin-top:10px; margin-bottom:15px;}
.btn_border {border-top:1px solid #e1e1e1; padding-top:30px;text-align:center; margin-top:30px;}
.bkn {background:0 none !important;}

/* column*/
.ui_row{width:100%; margin-left: 0px !important; margin-right: 0px !important;margin-bottom: 15px;position: relative; /*display: -webkit-box;display: -ms-flexbox;display: flex;*/}
.ui_row [class^='ui_col_'] {min-height: 1px;margin-left:0.4rem; margin-right:0.4rem;}
.ui_row [class^='ui_col_']:first-child {margin-left: 0;}
.ui_row [class^='ui_col_']:last-child {margin-right: 0;}

.ui_col_1, .ui_col_2, .ui_col_3, 
.ui_col_4, .ui_col_5, .ui_col_6, 
.ui_col_7, .ui_col_8, .ui_col_9, 
.ui_col_10, .ui_col_11, .ui_col_12{
    position: relative;
    min-height: 1px;
}
.ui_col_1, .ui_col_2, .ui_col_3, 
.ui_col_4, .ui_col_5, .ui_col_6, 
.ui_col_7, .ui_col_8, .ui_col_9, 
.ui_col_10, .ui_col_11, .ui_col_12 {
    float: left;
}
.ui_col_1{width:8.33333333%}
.ui_col_2{width:16.66666667%}
.ui_col_3{width:25%}
.ui_col_4{width:33.33333333%}
.ui_col_5{width:41.66666667%}
.ui_col_6{width:50%}
.ui_col_7{width:58.33333333%}
.ui_col_8{width:66.66666667%}
.ui_col_9{width:75%}
.ui_col_10{width:83.33333333%}
.ui_col_11{width:91.66666667%}
.ui_col_12{width:100%}

/* font color */
i {font-family:'Noto Sans kr', 'LATO', sans-serif !important; letter-spacing:0}
.base i {position:relative; top:1px;}
i.big {font-size:18px; position:relative; top:2px;}
.bold {font-weight:500;} /* 중복확인 */
.normal {font-weight:300;} /* 중복확인 */
.light {font-weight:200;} /* 중복확인 */
.ptxt01 {color:#666666;}
.ptxt02 {color:#999999;}
.ptxt03 {color:#333333;}
.c_primary {color:#fd4802 !important;} /* 중복확인 */
.c_blue{color:#2b62c2 !important}
.c_pink {color:#bd484a !important;}
.c_white {color:#ffffff !important;}
.c_yellow {color:#f09614 !important;}
.c_orange{color: #ff634c !important;}
.c_green{color:#6a9913 !important;}
.c_mint{color:#05B9AA !important;}
.c_mint2{color:#37b4be !important;}
.c_red{color:#ff0000 !important;}
.c_red2{color:#f30e0e !important;}
.c_black{color:#000000 !important;}
.c_black2{color:#222222 !important;}
.c_gray{color:#888888 !important;}
.c_gray2{color:#666666 !important;}
.c_ygreen{color:#5fc332 !important;}
.f_size14{font-size:14px;}
.f_size13{font-size:13px;}
.f_size12{font-size:12px; }
.f_size10{font-size:10px;}
.f_normal {font-weight:normal}

/* text state */
.t_muted {color: #ccd0d9 !important;}
.t_req {color: #fd4802 !important;}
.t_help {color: #888888 !important;}
.t_info {color: #888888 !important;}
.t_err {color: #fd4802 !important;}
.t_err::before {content: '';display: inline-block; width:1.5rem; height:1.5rem; background:url('/images/mo/ico_err.png') no-repeat right top;margin: 0px 0.6rem 0 0px;position: relative;top: 0.3rem;left: 0;right: auto;bottom: auto; background-size: 100%;}
.t_success {color: #333333 !important;}

/* textarea */
textarea {background-color:transparent; border:1px solid #d7d7d7; width:99%; overflow-y:auto}
.textarea_full {width:832px; padding:10px}
.textarea_md {width:656px; width: 30%; height:108px; padding:10px; line-height:18px;}
.textarea_sm {width:360px; width: 18%; padding:10px;}
.txt_cnt {text-align: right;margin-top: 10px;}

/* form */
.form_wrap {}
.form_wrap::after,
.form_field:after,
.input_wrap::after {content: ''; display: block; clear: both;}

select, 
.form_full input[type="text"], 
.form_full input[type="select"], 
.form_full input[type="password"]{ width: 100%; }
.form_full .input_wrap, 
.form_full.input_wrap{display: block;}
.form_full {} 

.form_col_w {width: 100%;}
.form_col_c {width: 530px; margin: 0 auto;}
.form_field {width: 100%;margin-left: 0px !important;margin-right: 0px !important;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;}
.input_wrap{position: relative;display: table;border-collapse: separate;}
.input_wrap, 
.input_label {vertical-align: top;text-align: left;}
.input_label { line-height: 3.0; font-size: 16px; font-weight: 300;}
.input_label span[class*="t_"]{display: inline !important;text-indent: -10px;margin-left: -10px;}
.input_wrap .form_control, 
.input_group_addon, 
.input_group_btn {display: table-cell;float: left;}
.form_control{height: 45px;font-size: 12px;line-height: 43px;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;-webkit-appearance: none;border: 1px solid #D5D5D5;position: relative;}
.form_control.err {border: 1px solid #fd4802 !important; background: #fff6f2;}

.usable {display: none;}
.form_control.usable + .usable:before {content:'사용가능';  position:absolute; top:50%; bottom: auto; right: 20px; left: auto; transform: translateY(-50%); padding-left:15px; background: url('/images/mo/ico_usable1.png') no-repeat 0 40%; color:#222; font-size:12px; font-weight:200; line-height:1;}
.sr-only {position: absolute!important;width: 1px;height: 1px;padding: 0!important;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;}

/* form style (hyangah_0223_수정중 - input[type="text"] padding 수정) */
input,  textarea {font-size:12px; font-family:'Noto Sans KR', 'LATO', sans-serif; color:#666666; vertical-align:middle;}
select{font-size:12px; font-family:'Noto Sans KR', 'LATO', sans-serif; color:#666666; vertical-align:middle;}
input[type="text"], input[type="password"] {padding:0 15px; border:1px solid #dddddd;box-sizing: border-box;}
input[type="text"]:focus, input[type="password"]:focus,
input[type="text"].active, input[type="password"].active {border-color: #aaaaaa;} 
input[type="text"]:disabled, input[type="password"]:disabled, input[type="select"]:disabled,
input[type="text"]:read-only, input[type="password"]:read-only, input[type="select"]:read-only {background: #F9F9F9;border-color: #dddddd;}
table input[type="text"], table input[type="password"] {padding:6px 0 6px 9px;}
input[type="checkbox"], input[type="radio"] {width:13px; height:13px; margin-right:3px; position:relative; top:1px;}
input[type=search]::-webkit-search-cancel-button{display:none;}
input[type="reset"], input[type="button"], input[type="submit"], button {line-height:normal !important;}

.input_wrap > .btn, .input_wrap + .btn, .form_field.form_full .btn {border-color: #222222;margin-left: 10px;float: left;display: inline;}
.input_wrap > .btn:hover, .input_wrap > .btn:focus, .input_wrap > .btn:active, .input_wrap > .btn.active,
.input_wrap + .btn:hover, .input_wrap + .btn:focus, .input_wrap + .btn:active, .input_wrap + .btn.active,
.input_wrap > .open > .tgl_dropdown.btn , .input_wrap + .open > .tgl_dropdown.btn {border-color: rgb(34 34 34 / 0.6);}

/* 체크박스 */
.form_field input[type="checkbox"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
.form_field input[type="checkbox"] + label{ display:inline-block; position:relative; padding-left:2.6rem; cursor:pointer; font-size: 1.2rem; line-height: 2.0;font-weight: 300;letter-spacing: 0;} 
.form_field input[type="checkbox"] + label:before{ 
  content:''; position:absolute; left:0; top:50%; margin-top:-10px; width:20px; height:20px; text-align:center; background:#fff; /*border:1px solid #ccc;*/ border-radius: 100%; box-sizing:border-box; 
  background: url('/images/mo/ico_chk_rdi.png') no-repeat;
  background-position: 0px 0px;
} 
.form_field input[type="checkbox"]:Disabled + label, 
.form_field input[type="radio"]:Disabled + label{cursor: default;opacity: .45;} 
.form_field input[type="checkbox"]:checked + label:after{ 
  content: ''; position:absolute; top:50%; margin-top:-1rem; left:0; width:2.0rem; height:2.0rem; background-color: #fd4800; border-radius: 100%; box-sizing:border-box; 
  background: url('/images/mo/ico_chk_rdi.png') no-repeat;
  background-position: -2rem 0px;
}
.form_field input[type="checkbox"]:Disabled + label:after{ 
  content: ''; position:absolute; top:-1.0rem; left:0; width:2.0rem; height:2.0rem; background-color: #fd4800; border-radius: 100%; box-sizing:border-box; 
  background: url('/images/mo/ico_chk_rdi.png') no-repeat;
  background-position: -4rem 0px;
}

/* 라디오 */
.form_field input[type="radio"]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; } 
.form_field input[type="radio"] + label{ display:inline-block; position:relative; padding-left:2.5rem; cursor:pointer; font-size: 1.3rem;line-height: 1.5;font-weight: 300;letter-spacing: 0;} 
.form_field input[type="radio"] + label:before{ 
  content:''; position:absolute; left:0; top:50%; margin-top:-10px; width:20px; height:20px; text-align:center; background:#fff; /*border:1px solid #ccc;*/ border-radius: 100%; box-sizing:border-box; 
  background: url('/images/mo/ico_chk_rdi.png') no-repeat;
  background-position: -60px 0px;
} 

/* 보여질 부분의 스타일을 추가하면 된다. */ 
.form_field input[type="radio"]:checked + label:after{ 
  content: ''; position:absolute; top:50%; margin-top:-10px; left:0; width:20px; height:20px; background-color: #fd4800; 
  background: url('/images/mo/ico_chk_rdi.png') no-repeat;
  background-position: -80px 0px;
}

.form_field input[type="radio"]:Disabled + label:after{ 
  content: ''; position:absolute; top:50%; margin-top:-10px; left:0; width:20px; height:20px; background-color: #fd4800; 
  background: url('/images/mo/ico_chk_rdi.png') no-repeat;
  background-position: -100px 0px;
}
/* 이미지 체크박스 */
.chk_img+label span {border: 2px solid transparent; padding: 10px; box-sizing: border-box;}
.chk_img:checked+label span {border: 2px solid #fd481a; padding: 10px; box-sizing: border-box;}

/* input-File-Add */
.imgUpload {position: relative;}
.imgUpload::after {content: '';display: block;clear: both;}
input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 
  overflow: hidden; clip:rect(0,0,0,0); border: 0;
}
.fileAdd{
  width: 72px;height:72px;border: 0.1rem solid #dddddd;float: left;font-size: 0;
  background: url('/images/mo/ico_btn_file.png') no-repeat;background-position: 50% 50%;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;cursor: pointer; background-size:30px;
}
.fileAdds {
  padding: 14px 10px;font-size: 14px;color: #222222;border: 1px solid #dddddd;box-sizing: border-box;
  float: right; -webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: pointer;
}
.pics {
  display: inline !important;float: left;margin: 0 10px 0 0;width: 72px;height:72px;
  border: 1px solid #dddddd;box-sizing: border-box;position: relative; overflow: hidden;
}
.picsThumbs {
  width: auto;height: auto;max-height: 71px;max-width: 71px;margin: auto 0;
  position: absolute;top: 50%;bottom: auto;left: 50%;right: 0;
  transform: translate(-50%, -50%);cursor: pointer;
}
.removes {
  display: block;width:2rem;height:2rem;font-size: 0;text-align: center;cursor: pointer;background-color: #666666;
  position: absolute;top: 0;bottom: auto;left: auto;right: 0;
}
.removes::after {
  content: '';display: inline-block;width: 2rem;height: 2rem;
  background: url('/images/mo/ico_btn_cls1.png') no-repeat;background-position: 50% 50%;
  background-size:2rem;
}


/* toggle - Share */
.setShare {padding: 2rem 2rem 3.0em;position: relative;}
.setShare span {display: block;text-align: center;}
.setShare button {width: 4.5rem;height: 5.5rem;background: url(/images/mo/ico_share.png) no-repeat;background-position-x: 0%;background-position-y: 0%;background-size: 23.5rem 3.33rem;position: relative;}
.setShare button.kk {background-position: 0.75rem 0;}
.setShare button.fb {background-position: -6.0rem 0;}
.setShare button.tw {background-position: -12.5rem 0;}
.setShare button.url {width: 5.0rem;background-position: -18.8rem 0;}
.setShare button ~ button {margin-left: 2rem;}
.setShare button span {display: block;font-size: 1.2rem;position: absolute;top: auto;bottom: -0.5rem;left: 50%;right: 50%;transform: translateX(-50%);text-align: center;margin: 0 auto;width: 100%;}


/* select */
.select {cursor: pointer;display: inline-block;position: relative;font-size: 16px;color: #333333;width: 100%;height: 40px;}
.select+.select{margin-left: 10px;}
.select_hidden {display: none;visibility: hidden;padding-right: 10px;}
.select_dress {
  position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 12px 15px;
  background-color: #ffffff;border: 1px solid #dddddd;box-sizing: border-box;
  -moz-transition: all 0.05s ease-in;-o-transition: all 0.05s ease-in;
  -webkit-transition: all 0.05s ease-in;transition: all 0.05s ease-in;
}
.select_dress:after {
  content: "";width: 0;height: 0;box-sizing: border-box;position: absolute;top: 16px;right: 10px;
  border: 6px solid transparent; border-color: #888888 transparent transparent transparent;  
}
.select_options {
  display: none;position: absolute;top: 100%;right: 0;left: 0;z-index: 2;
  margin: 0;padding: 0;list-style: none;background-color: #ffffff;
  box-sizing: border-box;border: 1px solid #222222;border-top: 0px solid #222222;
}
.select_options li {
  margin: 0;padding: 12px 0;text-indent: 15px;
  -moz-transition: all 0.08s ease-in;-o-transition: all 0.08s ease-in;
  -webkit-transition: all 0.08s ease-in;transition: all 0.08s ease-in;
}
.select_options li:hover{background-color: #dddddd;}
.select_options li[rel="hide"] {display: none;}
.select_options li.disabled {text-decoration:line-through; background:#f5f5f5; color:#bbb}
.select_options li.disabled:hover,
.select_options li.disabled:active {cursor:default;}
.select_dress:active, .select_dress.active {background-color: #ffffff;border: 1px solid #222222;border-bottom: 1px solid #dddddd;}
.select_dress:active:after, .select_dress.active:after {top: 9px;border-color: transparent transparent #888888 transparent;}

/* select-pure */
/* pure-setting */.select.pure select {-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;appearance: none;outline: 0;box-shadow: none;border: 0 !important;background-image: none;}
/* Remove IE arrow */.select.pure select::-ms-expand {display: none;}
.select.pure {position: relative;display: flex;line-height: 3;overflow: hidden;width: 10rem;right: 0;top: 0;}
.select.pure select {flex: 1;padding: 0 .5em;cursor: pointer;position: relative;box-sizing: border-box;height: 4.5rem;line-height: 1;cursor: pointer;padding: 0.5rem;background-color: #ffffff;border: 0px solid #dddddd;font-size: 1.2rem;}
.select.pure::after {content: '';width: 0;height: 0;box-sizing: border-box;position: absolute;top: 2.0rem;right: 0rem;border: 0.4rem solid transparent;border-color: #222222 transparent transparent transparent;cursor: pointer;pointer-events: none;-webkit-transition: .25s all ease;-o-transition: .25s all ease;transition: .25s all ease;}
.select.pure:hover::after {color: #666666;}

/* select-custom */
.select_custom {
	cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 13px;
    color: #333333;
    width: 100%;
    height: 45px;
}
.select_custom .combo {
    display: inline-block;
    position: relative;
    width: 100%;
}
.select_custom .combo .select {
	position: relative;
    box-sizing: border-box;
    height: 45px;
    line-height: 1;
    cursor: pointer;
    padding: 15px 15px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
}
.select_custom .combo .select:after {
    /* content: '▼'; */
    /* position: absolute; */
    /* top: 50%; */
    /* right: 10px; */

	content: '';
    width: 0;
    height: 0;
    box-sizing: border-box;
    position: absolute;
    top: 19px;
    right: 15px;
    border: 6px solid transparent;
    border-color: #888888 transparent transparent transparent;
}
.select_custom.on .combo .select {
	border: 1px solid #999999;
}
.select_custom.on .combo .select:after {
    /* content: '▲'; */
	top: 9px;
    border-color: transparent transparent #888888 transparent;
}
.select_custom .combo .list {
    display: none;
    overflow-y: auto;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 10;
    border: 1px solid #999999;
    border-top: 0;
    box-sizing: border-box;
    width: 100%;
    max-height: 500px;
    background-color: #fff;
}
.select_custom .combo .list::-webkit-scrollbar {
    width: 10px;
    height: 0;
}
.select_custom .combo .list::-webkit-scrollbar-button:start:decrement,
.select_custom .combo .list::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 0;
}
.select_custom .combo .list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .05);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.select_custom .combo .list::-webkit-scrollbar-thumb {
    height: 50px;
    width: 50px;
    background: rgba(0, 0, 0, .2);
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.select_custom[disabled] {
  pointer-events: none;
} 
.select_custom[disabled] .select {
  pointer-events: none;
  color: #bbb;
  background-color: #f5f5f5 !important;
} 
.select_custom .combo .list>li[aria-disabled="true"] {
	text-decoration: line-through;
    background: #f5f5f5;
    color: #bbb;
	pointer-events: none;
}
.select_custom .combo .list>li[data-soldout="true"] {
	pointer-events: none;
}
.select_custom .combo .list>li[data-soldout="true"]::after {
	content: '품절';
    display: inline-block;
    font-size: 12px;
    color: #bbbbbb;
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
}
.select_custom .combo .list>li {
    box-sizing: border-box;
    padding: 0 15px;
    width: 100%;
    height: auto;
    line-height: 45px;
    cursor: pointer;
	position: relative;
}
.select_custom .combo .list>li:hover {
    background-color: #ccc;
}



/* select-custom-sup : table sub */
.select_custom.sup {width: auto;width: 12rem;display: inline-block;position: absolute;right: 0rem;}
.select_custom.sup .combo {display: inline-block;position: absolute;width: auto;right: 2.5rem;top: 0;}
.select_custom.sup .combo .select {position: relative;box-sizing: border-box;height: 4.5rem;line-height: 1;cursor: pointer;padding: 15px 15px;background-color: #ffffff;border: 0px solid #dddddd;font-size: 1.2rem;}
.select_custom.sup .combo .select:after {
/* content: '▼'; */
/* position: absolute; */
/* top: 50%; */
/* right: 10px; */
content: '';width: 0;height: 0;box-sizing: border-box;position: absolute;top: 2.0rem;right: 0rem;border: 0.4rem solid transparent;border-color: #222222 transparent transparent transparent;}
.select_custom.sup.on .combo .select {border: 1px solid #999999;}
.select_custom.sup.on .combo .select:after {
/* content: '▲'; */
top: 9px;border-color: transparent transparent #888888 transparent;}
.select_custom.sup .combo .list {display: none;overflow-y: auto;position: absolute;top: 4.5rem;left: 0;z-index: 10;border: 0px solid #999999;border-top: 0;box-sizing: border-box;width: 100%;max-height: 50.0rem;background-color: #fff;font-size: 1.2rem;}
.select_custom.sup .combo .list::-webkit-scrollbar {width: 1.0rem;height: 0;}
.select_custom.sup .combo .list::-webkit-scrollbar-button:start:decrement,
.select_custom.sup .combo .list::-webkit-scrollbar-button:end:increment {display: block;height: 0;}
.select_custom.sup .combo .list::-webkit-scrollbar-track {background: rgba(0, 0, 0, .05);-webkit-border-radius: 10px;border-radius: 10px;}
.select_custom.sup .combo .list::-webkit-scrollbar-thumb {height: 50px;width: 50px;background: rgba(0, 0, 0, .2);-webkit-border-radius: 5px;border-radius: 5px;}
.select_custom[disabled].sup {pointer-events: none;} 
.select_custom[disabled].sup .select {pointer-events: none;color: #bbb;background-color: #f5f5f5 !important;} 
.select_custom.sup .combo .list>li[aria-disabled="true"] {text-decoration: line-through;background: #f5f5f5;color: #bbb;pointer-events: none;}
.select_custom.sup .combo .list>li[data-soldout="true"] {pointer-events: none;}
.select_custom.sup .combo .list>li[data-soldout="true"]::after {content: '품절';display: inline-block;font-size: 12px;color: #bbbbbb;position: absolute;right: 15px;top: 0;bottom: 0;}
.select_custom.sup .combo .list>li {box-sizing: border-box;padding: 0 1.5rem;width: 100%;height: auto;line-height: 3.5rem;cursor: pointer;position: relative;}
.select_custom.sup .combo .list>li:hover {background-color: #ccc;}


/* TAG, Label */
.tag {display: inline-block;height: 1.7rem;padding: 0rem 0.4rem;border: 1px solid #ddd;color: #666;font-size: 1.1rem;font-weight: 300;text-align: center;line-height: 1.7rem;}
.tag.primary {background: #fd4802;border-color: #fd4802;color: #fff;}
.tag.deepgray {background: #aaa;border-color: #aaa;color: #fff !important;}
.my .point .amount_plus {color: #fd4802;}

/* ico */
.ico {position: relative;/*top: 1px;*/display: inline-block; font-style: normal;font-weight: 400;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.ico:before {display: inline-block; background-repeat:no-repeat; background-size:contain; background-position:0% 0%; vertical-align:middle;}
.btn_ico {display: inline-block;position: relative;}
.btn .ico {font-size: 14px;margin-right: 5px;}
[class^="ico_"]:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
[class^="ico_content_"]::before {content:''; display:block;} 

.ico_logo:before {content: ""; display:block; width:184px; height:28px; background-image: url('/images/mo/logo_STYLE24.png'); }
.ico_logo_ft:before {content: ""; display:block; width:150px; height:23px; background-image: url('/images/mo/logo_STYLE24_footer.png'); }
.ico_search:before {content: ""; display: inline-block; width:22px; height:26px; background-image: url('/images/mo/ico_sch.png'); }
.ico_bag:before {content: ""; display: inline-block; width:22px; height:26px; background-image: url('/images/mo/ico_bag.png');}
.ico_content_order::before {width:40px; height: 46px; background: url('/images/mo/ico_content_order.png') no-repeat 50% 50%;} 
.ico_content_find::before {width:36px; height: 46px; background: url('/images/mo/ico_content_find.png') no-repeat 50% 50%;} 
.ico_content_none::before {width:36px; height: 46px; background: url('/images/mo/ico_content_none.png') no-repeat 50% 50%;} 
.ico_content_security::before {width:38px; height: 43px; background: url('/images/mo/ico_content_security.png') no-repeat 50% 50%;} 
.ico_content_mail::before {width:48px; height: 40px; background: url('/images/mo/ico_content_mail.png') no-repeat 50% 50%;} 
.ico_content_dormant::before {width:36px; height: 46px; background: url('/images/mo/ico_content_dormant.png') no-repeat 50% 50%;}  
.ico_content_dormant2::before {width:36px; height: 46px; background: url('/images/mo/ico_content_dormant2.png') no-repeat 50% 50%;}
.ico_blank::before {content: ""; width:13px; height:13px; background-image: url('/images/mo/ico_blank.png');}
.ico_ft_arrow_r:before {content: ""; width:11px; height:11px; background-image: url('/images/mo/ico_ft_arrow.png');}
.ico_ft_arrow_b:before {content: ""; width:11px; height:11px; background-image: url('/images/mo/ico_ft_arrow.png'); transform: rotate(90deg);}
.ico_ft_arrow_t:before {content: ""; width:11px; height:11px; background-image: url('/images/mo/ico_ft_arrow.png'); transform: rotate(-90deg);}
.ico_kcl::before {content: ""; width:32px; height:50px; background-image: url('/images/mo/ico_kcl.png');}
.ico_picker::before {content: ""; width:40px; height:40px; background:url(/images/mo/ico_picker.png) no-repeat 50% 50%;}
.ico_trash::before {content: ""; width:13px; height:16px; background:url(/images/mo/ico_trash.png) no-repeat 50% 50%;}
.ico_like::before {content: ""; width: 19px;height:16px;background: url(/images/mo/ico_like.png) no-repeat 0% 50%; background-size:cover;}
.active .ico_like::before {background-position:100% 50%;}
.ico_saletag::before {content: ""; width:36px;height:16px;background: url(/images/mo/ico_saletag.png) no-repeat 50% 50%; background-size:cover;}
.ico_calender::before {content: ""; width:15px;height:16px;background: url(/images/mo/ico_calender.png) no-repeat 50% 50%; background-size:cover;}
.ico_snslogin::before {content: ""; background-image: url(/images/mo/ico_snslogin.png); background-size:auto 100%;}
.ico_snslogin.kakao::before {width:20px; height:22px; background-position:0 0;}
.ico_snslogin.naver::before {width:16px; height:22px; background-position:-20px 0;}
.ico_snslogin.yes24::before {width:34px; height:22px; background-position:-36px 0;}
.ico_check::before {content: ""; width:10px; height:8px; background-image: url(/images/mo/ico_check.png); background-size:100% auto; margin-bottom:2px;}
.ico_check.black::before {content: ""; background-position:0 0;}
.ico_check.red::before {content: ""; background-position:0px -8px;}
.ico_check.gray::before {content: ""; background-position:0px -16px;}
.ico_phone::before {content: ""; width:15px; height:20px; background:url(/images/mo/ico_join_bg.png) no-repeat 0 0; background-size:cover;}
.ico_ipin::before {content: ""; width:20px; height:20px; background:url(/images/mo/ico_join_bg.png) no-repeat -20px 0; background-size:cover;}

/* btn : btn_default, btn_more, btn_go, btn_waiting */
.btn{display: inline-block; height: 5.0rem; margin-bottom: 0; padding: 0.4rem 1.3rem; font-size: 1.4rem; font-weight: 400; line-height: 1 !important; color: #333333; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; background-image: none; background-color: #ffffff; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: #dddddd; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; -ms-touch-action: manipulation;touch-action: manipulation; -webkit-transition: all 200ms ease;-moz-transition: all 200ms ease;-ms-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease; cursor: pointer; }
.btn.mini{width: auto !important; display: inline-block !important; height: 3.0rem; font-size: 1.2rem; font-weight: 300; }
.btn_gost{position: relative; display: block; width: 100%; height: 50px; color: #333333; border-color: #dddddd; background-color: transparent; }
.btn_more{position: relative; display: block; width: 100%; height: 50px; color: #888; border: #999 solid 1px;}
.btn_more::after{content: ''; position: absolute; right: -4px; bottom: -1px; display: block; width: 0; height: 0; border-top: 6px solid none; border-bottom: 6px solid #b7b7b7; border-right: 6px solid transparent; border-left: 6px solid transparent; -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.btn_go{position: relative; display: block; width: 100%; height: 50px; color: #ffffff; border: #222222 solid 1px; background-color: #222222;}
.btn_waiting{position: relative; display: block; width: 100%; height: 50px; color: #cd0c0d; border: #05937b solid 1px;}
.btn_waiting::after{content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 10px; background: url("../images/icon_download2.png") no-repeat center; background-size: 12px auto;}
.btn_primary{color: #ffffff; background-color: #fd4802; border-color: #fd4802;}
.btn_primary_line{color: #fd4802; background-color: #fff; border-color: #fd4802;}
.btn_default{color: #333333;background-color: #ffffff;border-color: #dddddd;}
.btn_dark {color: #ffffff; background-color: #222222; border-color: #222222;}
.btn_underline {display:inline-block; border-bottom:1px solid #222; color:#222; font-size:1.4rem; line-height:1 !important;}

.btnIcon_more:after,
.btnIcon_brand:after,
.btnIcon_detail:after{content:''; display:inline-block; margin-left:8px; width:11px; height:11px; background-position:center center; background-repeat:no-repeat; background-size:contain; vertical-align:middle;}
.btnIcon_more:after{background-image:url('/images/mo/ico_btn_more.png');}
.btnIcon_brand:after{background-image:url('/images/mo/ico_btn_brand.png');}
.btnIcon_detail:after{background-image:url('/images/mo/ico_btn_detail.png');}

/* btn hover, focus */
.btn:hover, .btn:focus, .btn.focus {color: #333333;text-decoration: none;}
.btn:hover, .btn:focus, .btn:active, .btn.active, 
.open > .tgl_dropdown.btn {background-color: rgb(255 255 255 / 0.4);border-color: rgb(221 221 221 / 0.6);}
.btn:active, .btn.active {-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}

/* btn active */
.btn_default:hover, .btn_default:focus, 
.btn_default:active, .btn_default.active, 
.open > .tgl_dropdown.btn_default {background-color: #F5F5F5;border-color: #dddddd;color:#333333;}
.btn_dark:hover, .btn_dark:focus, 
.btn_dark:active, .btn_dark.active, 
.open > .tgl_dropdown.btn_dark {background-color: #2f2f2f;border-color: #2f2f2f;color:#ffffff;}
.btn_primary:hover, .btn_primary:focus, 
.btn_primary:active, .btn_primary.active, 
.open > .tgl_dropdown.btn_primary {background-color: #dc4308;border-color: #dc4308;color:#ffffff;}
.btn_success:hover, .btn_success:focus, 
.btn_success:active, .btn_success.active, 
.open > .tgl_dropdown.btn_success {background-color: #89ad4d;border-color: #89ad4d;color:#ffffff;}
.btn_info:hover, .btn_info:focus, 
.btn_info:active, .btn_info.active, 
.open > .tgl_dropdown.btn_info {background-color: #47c2e6;border-color: #3cbee4;color:#ffffff;}
.btn_warning:hover, .btn_warning:focus, 
.btn_warning:active, .btn_warning.active, 
.open > .tgl_dropdown.btn_warning {background-color: #fe970a;border-color: #fe970a;color:#ffffff;}
.btn_danger:hover, .btn_danger:focus, 
.btn_danger:active, .btn_danger.active, 
.open > .tgl_dropdown.btn_danger{background-color: #a43f3e;border-color: #a43f3e;color:#ffffff;}
.btn_primary_line:hover, .btn_primary_line:focus, 
.btn_primary_line:active, .btn_primary_line.active, 
.open > .tgl_dropdown.btn_primary_line {background-color: #fff;border-color: #fd4802;color:#fd4802;}

/* button flex */
.btn_group_flex {display:flex; flex-wrap: wrap; width:100%; align-items:stretch; flex-direction:row; margin-top: 3rem;}
.btn_group_flex > div {flex-basis:auto; flex-grow:1; margin:0px 0.4rem; flex:1;}
.btn_group_flex > div:first-child {margin-left:0}
.btn_group_flex > div:last-child {margin-right:0}
.btn_group_flex > div > .btn {display:block; width:100%; height:100%; border:1px solid #a7a7a7; font-size: 1.4rem; padding:1rem 1.3rem; font-weight: 500;}
.btn_group_flex > div > .btn.btn_dark {border-color:#222;}
/* .btn_group_flex > div > .btn.btn_primary {background-color:#fff; border-color:#fd4802; color: #fd4802;} */

.btn_block {width: 100%;}


/* Page setup */
html {font-family: 'LATO', 'Noto Sans kr', sans-serif;font-weight: 300;color: #222;font-size: 10px;line-height: 1.4;letter-spacing: -.025em;word-break: keep-all;}

body.gnb_on {height: 100vh;overflow: hidden;}
.app {height: 100vh;font-size: 1.4rem;}
.skipNav {overflow: hidden;position: absolute;left: -9999px;width: 0;height: 1px;margin: 0;padding: 0;}

.inner {padding: 0 2.0rem 1.3rem 2.0rem;position: relative;}
.inner.wide {padding: 0 0rem 1.3rem 0rem;position: relative;}
.inner::after {content: '';display: block;clear: both;}
.inner.bg_gray {background-color: #f5f5f5;}
.inner.bg_beige {background-color: #ffeee7;}
.inner.bg_dark {background-color: #222222;}
.inner.bg_dark .titWrap>* {color: #ffffff;}
.inner.bg_dark .titWrap a H2{color: #ffffff;}

/* header, htop, btn_gnb, header.main, hmenu, bng, bnb */
header {
  position: fixed;left: 0;top: 0;width: 100%;z-index: 80;
  position: sticky;left: 0;top: 0;width: 100%;transition: top 0.3s;/* background-color: #fff; */
}
header::after{content: '';display: block;clear: both;}
header .htop {position: relative;height: 55px;-webkit-box-sizing: border-box;box-sizing: border-box;/*border: rgba(0, 0, 0, 0.1) solid 1px;*/ border-bottom: 1px solid rgba(0, 0, 0, 0.0); background-color: #fff;}
header .htop:after {content: '';display: block; clear: both;}
header #htopSub{border-bottom: 0px solid #e5e5e5;box-sizing: border-box;}
header #htopSubs{border-bottom: 0px solid #000000;box-sizing: border-box;}
header #htopSub.my_main {background-color: #f5f5f5; border-bottom: 1px solid rgba(0, 0, 0, 0.0)!important;}
header .htop h1 {display: inline-block;position: relative;width: 10.666rem;height: 100%;line-height: 4.5rem;vertical-align: middle;margin: 0px 0 0 2.0rem;font-size: 1.8rem;color: #222;}
header .htop h1#htopTitle {display: inline-block;position: relative;max-width: 18rem;width: auto;height: 100%;line-height: 4.5rem;vertical-align: middle;padding: 0px 1.5rem 0px 0rem;font-size: 1.8rem;color: #222;}
header .htop h1 a {height: 100%;width: 100%;display: block;}
header .htop h1 img {position: absolute;top: 50%;left: 0;right: 0;transform: translate(0, -50%);margin: 0px 0;width: 10.666rem;height: auto;line-height: 1.6rem;vertical-align: middle;}
header .htop .btn_back {margin: 10px 0 0 15px;width: 35px;height: 35px;}
header .htop .btn_back span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
header .htop .btn_back span i {display: block;position: absolute;background: #222;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
header .htop .btn_back span i.gl1 {left: 0;top: 6px;width: 12px;height: 2px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
header .htop .btn_back span i.gl2 {left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 24px;height: 2px;}
header .htop .btn_back span i.gl3 {left: 0;bottom: 6px;width: 12px;height: 2px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
header .htop .btn_back:active span i {left: -20px;}


header .htop .button_wrap {height: 5.5rem; float: right; padding: 1.6rem 0 0; margin: 0 2.5rem 0 0; box-sizing: border-box;}
header .htop .button_wrap .home {display:none;}
header .htop .button_wrap .home {margin:0; }
header .htop .button_wrap .home img{width: 2.0rem;}
header .htop .button_wrap .search { margin:0 1.1666rem 0 1.1666rem; }
header .htop .button_wrap .search img{width: 2.0rem;}
header .htop .button_wrap .store{position: relative;}
header .htop .button_wrap .store img{width: 1.6rem;}
header .htop .button_wrap .store img:nth-child(1) { height: 2rem; }
header .htop .button_wrap .store span { width: 2.1rem; height: 1.4rem; position: absolute; top: -0.5rem; right: -1.0rem; background: #fd4802; border-radius: 0.8rem; font-size: 0.8rem; color: #fff; line-height: 1.6rem;}


header .subs {}


header .btn_gnb {position: absolute;top: 0px;right: -4.5rem;width: 3.5rem;height: 100%;z-index: 10;}
header .btn_gnb span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
header .btn_gnb span i {display: block;position: absolute;left: 0;width:100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
/* header .btn_gnb span i.gl1 {top: 6px;} */
/* header .btn_gnb span i.gl2 {bottom: 6px;} */
/* header .btn_gnb.on span i {width: 24px;top: 10px;background: #222;} */
/* header .btn_gnb.on span i.gl1 {transform: rotate(45deg);-webkit-transform: rotate(45deg);} */
/* header .btn_gnb.on span i.gl2 {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);} */

header .subs .btn_gnbs {position: absolute;top: 0px;right: -2.0rem;width: 3.5rem;height: 4.5rem;z-index: 10;}
header .subs .btn_gnbs span i {display: block;position: absolute;left: 0;width: 100%;height: 100%;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
/* header .subs .btn_gnbs span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;} */
/* header .subs .btn_gnbs span i {display: block;position: absolute;left: 0;width: 24px;height: 2px;background: #222;-webkit-transition: all 0.15s ease-out;transition: all 0.15s ease-out;} */
header .subs .btn_gnbs span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;}
header .subs .btn_gnbs span i {background: url(/images/mo/ico_btn_more.png) no-repeat;background-size: 1.3rem 0.733rem;background-position: 50% 50%;}
/* header .subs .btn_gnbs span i.gl1 {top: 6px;background: #222;} */
/* header .subs .btn_gnbs span i.gl2 {bottom: 6px;background: #222;} */
/* header .subs .btn_gnbs.on span i {width: 24px;top: 10px;background: #222;} */
header .subs .btn_gnbs.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
/* header .subs .btn_gnbs.on span i.gl1 {transform: rotate(45deg);-webkit-transform: rotate(45deg);} */
/* header .subs .btn_gnbs.on span i.gl2 {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);} */

header.hide {display: none;}
header.main .htop {border: rgba(255, 255, 255, 0.2) solid 0px;background-color: #222222;}
header.main .htop.bright {background-color: transparent;}
/* header.main .htop h1 {margin: 10px 0 0 20px;width: 95px;} */
header.main .btn_gnb span i {background: url(/images/mo/ico_btn_more_w.png) no-repeat;background-size: 1.3rem 0.733rem;background-position: 50% 50%;}
header.main .btn_gnb.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
/* header.main .btn_gnb span i {background: #fff;} */
/* header.main .btn_gnb.on span i {background: #222;} */

header .hmenu {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.0);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;}
header .hmenu .inner {padding: 0;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
header .hmenu.on {bottom: 0;}
header .hmenu.on .inner {top: 100%;}
header .hmenu .scrollWrap {height: calc(100vh - 50px);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;}
/* 
header .hmenu .tnb{padding-top: 15px; height: 50px; -webkit-box-sizing: border-box;box-sizing: border-box;}
header .hmenu .tnb ul::after{content: '';display: block; clear: both;}
header .hmenu .tnb ul > li{float: left; position: relative; padding: 0 12px;}
header .hmenu .tnb ul > li::before{content: ''; display: block; position: absolute;left: 0;top: 50%;width: 3px;height: 3px; background-color: #c1c1c1; border-radius: 0%;}
header .hmenu .tnb ul > li:first-child{padding-left: 0;}
header .hmenu .tnb ul > li:first-child::before{display: none;}
header .hmenu .tnb ul > li a{display: block; padding: 5px 0; color: #888; font-weight: 200; font-size: 1.5rem;}
header .hmenu .tnb ul > li a.on{color: #222; font-weight: 400; border-bottom: #9f7952 solid 2px;}
*/

header .hmenu .bng{background: #ffffff;}
header .hmenu .bng .d1 > li{position: relative;height: 7.2rem;border-bottom: 0.1rem solid #eeeeee;}
header .hmenu .bng .d1 > li > a{display: block;padding: 0 2.0rem;line-height: 7.2rem;font-size: 1.8rem;font-weight: 400; font-family: 'Lato'; color: #222;}
header .hmenu .bng .d1 > li > a::after{content: '';display: block; clear:both;}
header .hmenu .bng .d1 > li > a span{float: right;}
header .hmenu .bng .d1 > li > a span img{opacity: 0.3;max-width: 8.333rem;max-height: 4.533rem;width: auto;height: auto;vertical-align: middle;}
header .hmenu .bng .d1 > li.folder::before{content: ''; display: block; position: absolute; right: 5px; top: 15px; width: 1px; height: 12px; background-color: #222;}
header .hmenu .bng .d1 > li.folder::after{content: ''; display: block; position: absolute; right: 0; top: 20px; width: 12px; height: 1px; background-color: #222;}
header .hmenu .bng .d1 > li.folder.on::before{display: none;}
header .hmenu .bng .d1 > li.folder.on::after{background-color: #9f7952;}
header .hmenu .bng .d1 > li.folder.on > a{color: #9f7952;}
header .hmenu .bng .d1 > li.folder.on .d2{display: block;}
header .hmenu .bng .d2{display: none; border-top: #e5e5e5 solid 1px; border-bottom: #e5e5e5 solid 1px; padding: 20px 0; height: 0;}
header .hmenu .bng .d2 > li{position: relative; padding-left: 15px;}
header .hmenu .bng .d2 > li::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #666 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
header .hmenu .bng .d2 > li > a{display: block; padding: 8px 0; font-size: 1.7rem; color: #222;}
header .hmenu .bng .d2 > li.folder::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #666 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);}
header .hmenu .bng .d2 > li.folder.on::after{top: 16px; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);}
header .hmenu .bng .d2 > li.folder.on .d3{display: block;}
header .hmenu .bng .d3{display: none; padding: 0 0 0 10px; height: 0;}
header .hmenu .bng .d3 > li{position: relative; padding-left: 15px;}
header .hmenu .bng .d3 > li::before{content: ''; display: block; position: absolute; left: 2px; top: 15px; width: 4px; height: 4px; background-color: #999;}
header .hmenu .bng .d3 > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #222;}

header .hmenu .bnb{background-color: #f5f5f5; position: relative;}
header .hmenu .bnb ul > li{position: relative;}
header .hmenu .bnb ul > li::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #9f7952 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
header .hmenu .bnb ul > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #9f7952;}


header .hmenus {position: absolute;left: 0;bottom: 100%;background-color: rgba(0, 0, 0, 0.0);padding: 0 0 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;width: 100vw;height: 100vh;-webkit-transition: all 0 ease-out;transition: all 0 ease-out;}
header .hmenus .inner {padding: 0 25px;background-color: #fff;position: relative;top: 0;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
header .hmenus.on {bottom: 0;}
header .hmenus.on .inner {top: 100%;}
header .hmenus .scrollWrap {height: calc(100vh - 50px);-webkit-box-sizing: border-box;box-sizing: border-box;overflow-y: auto;}
/* 
header .hmenus .tnb{padding-top: 15px; height: 50px; -webkit-box-sizing: border-box;box-sizing: border-box;}
header .hmenus .tnb ul::after{content: '';display: block; clear: both;}
header .hmenus .tnb ul > li{float: left; position: relative; padding: 0 12px;}
header .hmenus .tnb ul > li::before{content: ''; display: block; position: absolute;left: 0;top: 50%;width: 3px;height: 3px; background-color: #c1c1c1; border-radius: 0%;}
header .hmenus .tnb ul > li:first-child{padding-left: 0;}
header .hmenus .tnb ul > li:first-child::before{display: none;}
header .hmenus .tnb ul > li a{display: block; padding: 5px 0; color: #888; font-weight: 200; font-size: 1.5rem;}
header .hmenus .tnb ul > li a.on{color: #222; font-weight: 400; border-bottom: #9f7952 solid 2px;}
*/

header .hmenus .bng{background: #ffffff;}
header .hmenus .bng .d1 > li{position: relative;}
header .hmenus .bng .d1 > li > a{display: block; padding: 8px 0; font-size: 2.8rem; font-family: 'Lato'; color: #222;}
header .hmenus .bng .d1 > li.folder::before{content: ''; display: block; position: absolute; right: 5px; top: 15px; width: 1px; height: 12px; background-color: #222;}
header .hmenus .bng .d1 > li.folder::after{content: ''; display: block; position: absolute; right: 0; top: 20px; width: 12px; height: 1px; background-color: #222;}
header .hmenus .bng .d1 > li.folder.on::before{display: none;}
header .hmenus .bng .d1 > li.folder.on::after{background-color: #9f7952;}
header .hmenus .bng .d1 > li.folder.on > a{color: #9f7952;}
header .hmenus .bng .d1 > li.folder.on .d2{display: block;}
header .hmenus .bng .d2{display: none; border-top: #e5e5e5 solid 1px; border-bottom: #e5e5e5 solid 1px; padding: 20px 0; height: 0;}
header .hmenus .bng .d2 > li{position: relative; padding-left: 15px;}
header .hmenus .bng .d2 > li::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #666 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
header .hmenus .bng .d2 > li > a{display: block; padding: 8px 0; font-size: 1.7rem; color: #222;}
header .hmenus .bng .d2 > li.folder::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #666 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);}
header .hmenus .bng .d2 > li.folder.on::after{top: 16px; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);}
header .hmenus .bng .d2 > li.folder.on .d3{display: block;}
header .hmenus .bng .d3{display: none; padding: 0 0 0 10px; height: 0;}
header .hmenus .bng .d3 > li{position: relative; padding-left: 15px;}
header .hmenus .bng .d3 > li::before{content: ''; display: block; position: absolute; left: 2px; top: 15px; width: 4px; height: 4px; background-color: #999;}
header .hmenus .bng .d3 > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #222;}

header .hmenus .bng{position: relative; width:100%; height:100%;background:rgba(0,0,0,.0); z-index:600;}
/* header .hmenus .bng .nav_box.active{visibility:visible;} */
header .hmenus .bng .lap{position:absolute; top:0; left:0; padding:0; width:100%; background:#fff;}
header .hmenus .bng .nav_list{min-height:15rem; max-height:40rem; overflow-y:auto;}
/* header .hmenus .bng .nav_box .nav_close{position:absolute; bottom:-3.8rem; left:50%; width:1.6rem; height:1.6rem; background-image: url(/images/mo/ico_pop_cls_w.png); background-repeat:no-repeat; background-position:center center; font-size:0; text-indent:-999999px; background-size: contain; -webkit-transform:translateX(-50%); transform:translateX(-50%);} */
header .hmenus .bng .nav_list {padding:0;}
header .hmenus .bng .nav ul {}
header .hmenus .bng .nav ul > li {}
header .hmenus .bng .nav ul > li .daps1{display:block; font-size:1.4rem; color:#666; font-weight:300; line-height:5rem; border-bottom:1px solid #ddd;}
header .hmenus .bng .nav ul > li .daps2 li > a{display:block; font-size:1.4rem; font-weight:300; color:#222; line-height:4rem;}
header .hmenus .bng .nav ul > li .daps2 li.on > a{color:#fd4802; font-weight:500; line-height:5rem;}

header .hmenus .bnb{background-color: #f5f5f5; margin: 30px -25px 0 -25px; padding: 30px 25px; position: relative;}
header .hmenus .bnb ul > li{position: relative;}
header .hmenus .bnb ul > li::after{content: ''; display: block; position: absolute; right: 2px; top: 20px; width: 10px; height: 10px; border: #9f7952 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
header .hmenus .bnb ul > li > a{display: block; padding: 8px 0; font-size: 1.5rem; color: #9f7952;}



/* gnb */
body.header-show .app .gnb{top: 50px;}
.app .gnb {position: -webkit-sticky; position: sticky; top: 0px; padding-right: 50px; background-color: #000; z-index: 9; transition: top 0.3s; width: 100%;}
.app .gnb.expand{padding-right: 30px;}
.app .gnb .gnb-inner{position: relative; width: 100%; padding: 9px 10px; overflow-x: scroll;}
.app .gnb .gnb-inner::-webkit-scrollbar {display: none;}
.app .gnb.expand .gnb-inner{width: 100%; overflow: unset; overflow-x: unset;}
.app .gnb .gnb-inner ul{display: inline-block; white-space: nowrap;}
.app .gnb.expand .gnb-inner ul{white-space: normal;}
.app .gnb .gnb-inner ul li{display: inline-block; height: auto; padding: 10px; line-height: 17px;}
.app .gnb .gnb-inner ul li a{color: #999; font-size: 16px;}
.app .gnb .gnb-inner ul li.on a{color: #fff;}
.app .gnb .btn-expand{position: absolute; right: 2px; top: 2px; width: 50px; height: 50px;}
.app .gnb .btn-expand::before{content: '';position: absolute;top: 0;left: 0px;width: 30px;height: 50px;background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 100%);}
.app .gnb .btn-expand::after{content: '';position: absolute;left: 50%;top: 25%;width: 1.8rem;height: 2.0rem;/* transform: translate(-50%, -50%); */background: url(/images/mo/ico_btn_expand.png) center top/1.8rem 2.0rem no-repeat;}
.app .gnb.expand .btn-expand::before{display:none}
.app .gnb.expand .btn-expand::after {background: url(/images/mo/ico_btn_narrow.png) center bottom/1.8rem 2.0rem no-repeat;}

main.container{margin-top: 0px; overflow: hidden;}
main.container .inner:last-child{padding-bottom: 6.0rem; margin-bottom: 0;}

/* .tabbar */
.tabbar{-webkit-transform: translate(0, 55px);-ms-transform: translate(0, 55px);-moz-transform: translate(0, 55px); transform: translate(0, 55px);transition-duration: 0.3s; position: fixed;width: 100%;bottom: 0;background-color: #f8f8f8;z-index: 10; padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
.tabbar.fixed{-webkit-transform: translate(0, 0);-ms-transform: translate(0, 0);-moz-transform: translate(0, 0);transform: translate(0, 0);}
.tabbar .tabbar-inner{display: -webkit-box;display: -moz-box;display: -webkit-flex;display: -ms-flexbox;display: flex; -webkit-box-pack: justify;-moz-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between; padding: 10px 20px;}
.tabbar .tabbar-inner [class*=btn-]{display: block;width: 2.50rem; height: 2.2666rem; font-size: 0;position: relative;background: url(/images/mo/ico_tabbar.png) no-repeat center;background-size: 18.0rem 2.16rem;}
.tabbar .tabbar-inner [class*=btn-].btn-menu{background-position: 0.1rem;}
.tabbar .tabbar-inner [class*=btn-].btn-my{background-position: -3.7rem;}
.tabbar .tabbar-inner [class*=btn-].btn-home{background-position: -7.5rem;}
.tabbar .tabbar-inner [class*=btn-].btn-wish{background-position: -11.5rem;}
.tabbar .tabbar-inner [class*=btn-].btn-history{background-position: -15.6rem;}


/* Full메뉴 */
#menuFull{width: 100%;height: 0;z-index: 999;visibility: hidden;background: rgba(255, 255, 255, 1);transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;}
#menuFull.on{ height: 100%; visibility: visible; top: 0;}
.menu_cls {position: absolute;top: 2.4rem;right: 2.0rem;display: block;width: 2.0rem;height: 2.0rem;text-indent: -9999px;background-size: contain;background-repeat: no-repeat;background-position: center center;z-index: 98;background-image: url(/images/mo/ico_pop_cls.png);}
.appSett {position: absolute;top: 2.4rem;right: 5.5rem;display: block;width: 2.0rem;height: 2.0rem;text-indent: -9999px;background-size: contain;background-repeat: no-repeat;background-position: center center;z-index: 98;background-image: url(/images/mo/ico_app_setting.png);}
.fullHead {height: 5.2rem;}
.fullHead .goHome {display: inline-block;width: auto;padding:2.4rem 2rem;}
.fullHead a {display: inline-block;}
.fullHead img {width: 10.666rem; height:1.6rem;}
.fullBody {background:#f5f5f5;min-height: calc(100% - 5.2rem);max-height: calc(100% - 5.2rem);overflow-y: scroll;}
.fullBody .inner {background:#ffffff;margin:0;padding:0;}
.fullBody .inner .flow{display: inline-block;width: 49.0%;height: 100%;vertical-align: top;padding:2.5rem 0;}
.fullBody .inner .flow li{width:100%;height:3.1333rem;line-height:3.1333rem;padding:0 0 0 2rem;border: 0;box-sizing: border-box;text-align: left;display: inline-block;}
.fullBody .inner .flow span{font-size: 1.333rem;}
.fullBody .btn_group {margin: 0;}
.fullBody .btn_group div {margin:0;position: relative;}
.fullBody .btn_group div button{border: 0;background: #f5f5f5;font-size: 1.2rem;}
.fullBody .btn_group div button span{width: 100%;}
.fullBody .btn_group div:first-child button::after{content: '';display: inline-block;width: 0.3rem;height: 2.0rem;background: #dddddd;position: absolute;top: 1.0rem;right: -0.2rem;}

/* Full메뉴_카테고리 */
.fullBody .fullCate {padding: 0 0 2rem;margin-bottom: 1.2rem;}
.fullBody .fullCate > li > ul {display: none; background: #f5f5f5;}
.fullBody .fullCate > li > a {display: block; padding:1.6rem 2.0rem; font-size: 1.4rem; font-weight: 400;font-family: 'Noto Sans kr', sans-serif;}
.fullBody .fullCate > li > a:hover span {color: #fd4802; border-bottom: 1px solid #fd4802;}
.fullBody .fullCate > li.hasCate > a {background: url('/images/mo/ico_full.png') no-repeat right 2.0rem center;background-size: 0.8rem 1.4rem;}
.fullBody .fullCate > li.hasCate > a.on {background: url('/images/mo/ico_full_on.png') no-repeat right 2.0rem center; background-size: 1.4rem 0.8rem; font-size: 1.4rem; color: #fd4802;}
.fullBody .fullCate > li.hasCate > a.on span {border-bottom: 1px solid #fd4802;}
.fullBody .fullCate > li.hasCate > ul {padding: 1.5rem 0;}
.fullBody .fullCate > li.hasCate > ul > li > a {display: block; font-size: 1.3rem; color: #888; padding:0.87rem 4.3rem;}
.fullBody .fullCate > li.hasCate > ul > li > a:hover span {color: #fd4802; border-bottom: 1px solid #fd4802;}
.fullBody .quick_cate_txt {border-top: 1px solid #ddd; padding:30px;}
.fullBody .quick_cate_txt a {display: inline-block; position: relative; font-size: 14px; color: #888; margin-right: 20px;}
.fullBody .quick_cate_txt a:after {content:''; position: absolute; top: 2px; right: -12px; width: 1px; height: 8px; background: #ddd;}
.fullBody .quick_cate_txt a:last-child:after {display: none;}



/* footer */
footer{background-color: #f1f1f1;}
footer .btn_top{position: fixed; bottom: 30px; right: 25px; opacity: 0; background-color: rgba(0, 0, 0, 0.4); width: 45px; height: 45px; border-radius: 50%; font-size: 0; z-index: 50;}
footer .btn_top span{display: block; width: 24px; height: 24px; margin: 0 auto; position: relative;}
footer .btn_top span i{display: block; position: absolute; background: #fff;}
footer .btn_top span i.gl1{left: 4px; top: 2px; width: 10px; height: 2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
footer .btn_top span i.gl2{left: 50%; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; height: 20px;}
footer .btn_top span i.gl3{right: 4px; top: 2px; width: 10px; height: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
footer .f1{background-color: #f1f1f1;padding: 0 0 4.5rem; position: relative;}
footer .f1 .inner{padding: 0 2.0rem 2.0rem;}
footer .f1 .link{padding-top: 20px;}
footer .f1 .link::after{content: ''; display: block; clear: both;}
footer .f1 .link > li{float: left; position: relative; padding: 0 1.2rem;}
footer .f1 .link > li::before{content: '';
  /* display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 3px; background-color: #999; */
  display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 2px; height: 14px; background-color: #e3e3e3;
}
footer .f1 .link > li:first-child{padding-left: 0;}
footer .f1 .link > li:first-child::before{display: none;}
footer .f1 .link > li.fn{clear: both; padding-left: 0;}
footer .f1 .link > li.fn::before{display: none;}
footer .f1 .link > li a{display: block; padding: 5px 0; color: #222; font-size: 1.3rem; font-weight: 200;}
footer .f1 .wider{}
footer .f1 .wider > li{padding: 0 1.5rem;}
footer .f1 .wider > li a{color: #666; font-weight: 300; font-size: 1.5rem;}
footer .f1 .info::after{content: ''; display: block; clear: both;}
footer .f1 .info > li{float: left; position: relative; padding: 5px 4px; color: #666; font-size: 1.5rem; font-weight: 200;}
footer .f1 .info > li:first-child::before{display: none;}
footer .f1 .info > li.fn{clear: both; padding-left: 0;}
footer .f1 .info > li.fn::before{display: none;}
footer .f1 .copy{font-weight: 100; font-size: 1.2rem; color: #888888; padding-top: 10px; letter-spacing: -0.025rem;}
footer .f1 .sns{font-size: 0; padding-top: 20px;}
footer .f1 .sns::after{content: ''; display: block; clear: both;}
footer .f1 .sns > li{float: left; margin-left: 10px;}
footer .f1 .sns > li:first-child{margin-left: 0;}
footer .f1 .sns > li > a{display: block; width: 2.5rem; height: 2.5rem; border-radius: 0%;}
footer .f1 .sns > li > a.insta{background: #fff url("/images/mo/ico_ft_insta.png") 50% 50% no-repeat; background-size: auto 2.5rem;}
footer .f1 .sns > li > a.facebook{background: #fff url("/images/mo/ico_ft_facebook.png") 50% 50% no-repeat; background-size: auto 2.5rem;}
footer .collapse{position: relative; border-bottom: 1px solid #dadada;}
footer .collapse .btnWrap .btn_infos{position: relative; width: 100%; height: 67px; background-color: #f1f1f1; font-size: 1.5rem; font-weight: 400; text-align: left; color: #222;}
footer .collapse .btnWrap .btn_infos::after{content: ''; display: inline-block; margin-left: 10px; margin-bottom: 0px; width: 1.4rem; height: 0.8rem; background: #f1f1f1 url(/images/mo/ico_fold_arrow1.png) 50% 0% no-repeat; background-size: 1.4rem; /* background-size: auto 3.9rem; */ -webkit-transform: rotate(180deg); transform: rotate(180deg);}
footer .collapse .btnWrap .btn_infos.on{/* background-color: #222; */ /* color: #fff; */}
footer .collapse .btnWrap .btn_infos.on::after{margin-bottom: 0; -webkit-transform: rotate(0); transform: rotate(0);}
footer .collapse .infos{width: 100%; height: 0; overflow: hidden;-webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
footer .collapse .infos::after{content: ''; display: block; clear: both;}
footer .collapse .infos > li{float: left; position: relative; padding: 5px 4px; color: #666; font-size: 1.2rem; font-weight: 200;}
footer .collapse .infos > li.fn{clear: both; padding-left: 0;}
footer .collapse .infos.on{padding: 0px 0px 20px 0; height: auto;}

/* sub page slide nav */
.lnb{padding: 1.46rem 2.0rem 1.0rem 2.0rem; border-bottom: #e5e5e5 solid 1px; box-sizing: border-box;}
.lnb .swiper-wrapper{transform: translate3d(0px, 0px, 0px);}
.lnb ul > li{width: auto; text-align: center;}
.lnb ul > li button,
.lnb ul > li a{padding: 1.46rem 0.5rem 1.3rem 0.5rem; position: relative;}
.lnb ul > li.on button,
.lnb ul > li.on a{color: #fd4802;}
.lnb ul > li.on button::after,
.lnb ul > li.on a::after{content: ''; display: block; width: 100%; height: 3px; background-color: #fd4802; color: #fd4802; position: absolute; bottom: 0; left: 50%; right: 50%; transform: translate(-50%);}

/* category nav : Collection */
.cnb{background-color: #f5f5f5; padding: 0 25px;}
.cnb.folder{position: relative; height: 50px; overflow: hidden; display: block;}
.cnb.folder.on .btn_cnb::before{content: ''; width: 0; height: 0; display: none;}
.cnb.folder.on .btn_cnb::after{top: 20px; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);}
.cnb.folder.on .tit{display: block;}
.cnb.folder.on ul{width: 100%; display: block; height: 100%;}
.cnb.folder.on{display: table; padding: 0 25px 10px; -webkit-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;}
.cnb .tit{display: none; padding-top: 15px; font-size: 1.7rem; font-weight: 600;}
.cnb .btn_cnb{position: absolute; top: 8px; right: 15px; width: 35px; height: 35px; z-index: 9;}
.cnb .btn_cnb::before{content: ''; width: 70px; height: 70px; position: absolute; right: -20px; top: -10px; background: white; background: -webkit-gradient(linear, left top, right top, color-stop(50%, white), color-stop(50%, white)); background: linear-gradient(to right, white 50%, white 50%); box-shadow: -35px 0 20px rgba(255, 255, 255, 0.9); -moz-box-shadow: -35px 0 20px rgba(255, 255, 255, 0.9); -webkit-box-shadow: -35px 0 20px rgba(255, 255, 255, 0.9);}
.cnb .btn_cnb::after{content: ''; display: block; position: absolute; left: 12px; top: 15px; width: 10px; height: 10px; border: #222 solid; border-width: 2px 2px 0 0; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg);}
.cnb ul{width: -webkit-max-content; width: -moz-max-content; width: max-content;}
.cnb ul::after{content: ''; display: block; clear: both;}
.cnb ul > li{float: left; margin: 10px 10px 0 0;}
.cnb ul > li button{background-color: #fff; padding: 5px 10px; color: #666; border-radius: 100px; font-size: 1.5rem;}
.cnb ul > li button.on{background-color: #3d3d3d; color: #fff;}

/* page nav */
.pnb ul{border-bottom: #e5e5e5 solid 1px;}
.pnb ul::after{content: ''; display: block; clear: both;}
.pnb ul > li{float: left; width: auto; padding: 0 1.6rem;}
.pnb ul > li:first-child{padding: 0 1.6rem 0 1.0rem;}
.pnb ul > li a{display: block; width: 100%; padding: 1.46rem 0 1.3rem 0; text-align: center; position: relative;}
.pnb ul > li a.on{color: #fd4802;}
.pnb ul > li a.on::after{content: ''; display: block; width: 100%; height: 3px; background-color: #fd4802; color: #fd4802; position: absolute; bottom: 0; left: 50%; right: 50%; transform: translate(-50%);}
.pnb ul > li a.prev{color: #666; font-size: 1.4rem;}
.pnb ul > li a.prev::before{content: ''; display: block; position: absolute; left: 20%; top: 50%; width: 6px; height: 6px; border: #666 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(-135deg); transform: translateY(-50%) rotate(-135deg);}
.pnb ul > li a.next{color: #666; font-size: 1.4rem;}
.pnb ul > li a.next::before{content: ''; display: block; position: absolute; right: 20%; top: 50%; width: 6px; height: 6px; border: #666 solid; border-width: 1px 1px 0 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);}
.pnb ul > li a.list{color: #9f7952; font-weight: 600; font-size: 1.5rem;}
.pnb ul > li a.list::before{content: ''; display: block; position: absolute; left: 20%; top: 50%; width: 12px; height: 6px; border: #9f7952 solid; border-width: 2px 0 2px 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

/* AD area (광고 문구 또는 배너)  */
.ADwrap {padding: 0.5rem 0 1.5rem 0rem;} 
.ADwrap .adcopy {font-weight: 400;margin-top: 1.5rem;display: inline-block;} /* my_review 참고 */

/* Mesage Custom */
.once {padding: 2.33rem 2.0rem;background: #ffffff;}
.alert {padding: 15px;border: 1px solid transparent; border-radius: 4px;margin-bottom: 10px;line-height: 21px; background-color: #dddddd;color: #666666;border-color: #dddddd;}
button.alertCls {-webkit-appearance: none;padding: 0;cursor: pointer;background: 0 0;border: 0;}
.alertCls {float: right;font-size: 21px;font-weight: 700;line-height: 1;color: #000;text-shadow: 0 1px 0 #fff;filter: alpha(opacity=20);opacity: .2;}
.alertCls:hover, .alertCls:focus {color: #000;text-decoration: none;cursor: pointer;filter: alpha(opacity=50);opacity: .5;}


/* module setup */
/* .imgWrap */
.imgWrap{position: relative;}
.imgWrap .btn_play{position: absolute; left: 0; bottom: 0; width: 32px; height: 32px; font-size: 0; background-color: rgba(0, 0, 0, 0.5);}
.imgWrap .btn_play::before{content: ''; display: block; position: absolute; left: 12px; top: 10px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid none; border-left: 8px solid #fff;}
.txt_counter{padding-top: 30px; font-size: 1.4rem;}
.txt_counter em{color: #9f7952;}
.noData{height: 50vh; font-size: 2.0rem; text-align: center;}
.noData::before{content: ''; display: block; background: url("../images/icon_nodata.png") no-repeat 50% 50%; background-size: 75px auto; height: 200px;}


/* titWrap, .tit */

.titWrap{padding: 2.0rem 0 0 0; text-align: center; font-size: 1.8rem;}
.tit{font-size: 1.4rem; font-weight: 400; color: #222222;}
.exp{font-size: 1.1rem; font-weight: 200; color: #666666;}
.list1 > li{font-size: 1.5rem; position: relative; padding-left: 8px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.list1 > li::after{content: ''; display: block; clear: both;}
.list1 > li::before{content: ''; display: block; position: absolute; left: 0; top: 0.5em; width: 3px; height: 3px; background-color: #666;}
.list_col2::after{content: ''; display: block; clear: both;}
.list_col2 > li{float: left; width: 50%;}
.list_col3::after{content: ''; display: block; clear: both;}
.list_col3 > li{float: left; width: 33.33%;}
.txt_ref{margin-top: 1.5rem;padding-left: 1.5rem;font-size: 1.1rem;color: #666;font-weight: 200;position: relative;}
.txt_ref::before{content: '※'; display: block; position: absolute; left: 0; top: 0;}
.txt_blt{padding-left: 8px; position: relative;}
.txt_blt::before{content: ''; display: block; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 3px; background-color: #666;}

/* Tab */
.tabWrap {}
.tabIndex {width: 100%; /*margin-bottom: 0.85em;*/ box-sizing: border-box;-webkit-box-sizing: border-box;display: inline-flex;justify-content: space-around;}
.tabIndex:after {content: "";clear: both;display: table;}
.tabIndex {background: #ffffff;border-bottom: #e5e5e5 solid 1px;}
.tabIndex li {float: left;flex: auto;text-align: center;}
.tabIndex li a {display: block;color:#222222; font-weight: 400; padding: 1.0rem 2.0vw;}
.tabIndex li.active a {border-bottom: 3px solid #fd4802; color: #fd4802;}
.tab_cont {width: 100%;height:100%; background: #f5f5f5;/*padding: 12px 0rem 0 0rem;*/text-align: left;box-sizing: border-box;}
.tab_cont .inner {margin-bottom: 2.3rem;}
.tab_cont {display: none;}
.tab_cont.active {display: block;}

/* table title */
.tbltitWrap{margin-top: 3.0rem;}
.tbltitWrap::after{content: ''; display: block; clear: both;}
.tbltitWrap h2{float: left; padding: 0 !important; font-size: 2.4rem;}
.tbltitWrap h3{float: left; font-size: 1.7rem;}
.tbltitWrap .exp{float: right; padding-top: 5px; font-size: 1.4rem; color: #888;}
.tbltitWrap h2 + .exp{padding-top: 14px !important;}

/* table */
.tblWrap{margin-top: 10px;}
.tblWrap + .tblWrap{margin-top: 30px;}
.tblWrap table{width: 100%; border-top: #222 solid 1px;}
.tblWrap table tr th, .tblWrap table tr td{border-left: #e5e5e5 solid 1px; border-bottom: #e5e5e5 solid 1px; padding: 1.4rem 0.5rem; text-align: center; color: #666; font-size: 1.5rem;}
.tblWrap table tr th:first-child, .tblWrap table tr td:first-child{border-left: none;}
.tblWrap table tr th.tL, .tblWrap table tr td.tL{text-align: left;}
.tblWrap table tr th.tR, .tblWrap table tr td.tR{text-align: left;}
.tblWrap table tr th strong, .tblWrap table tr td strong{font-weight: 400;color: #222;}
.tblWrap table tr th.lB, .tblWrap table tr td.lB{border-bottom: none;}
.tblWrap table tr.sum th, .tblWrap table tr.sum td{color: #222; font-weight: 400;}
.tblWrap table tr.sum2 th, .tblWrap table tr.sum2 td{color: #fd4802;}
.tblWrap table tr.lB th, .tblWrap table tr.lB td{border-bottom: none;}
.tblWrap table thead th, .tblWrap table thead td{font-weight: 400;color: #222;}


/* 테이블 type1 수평 행,열별 구분선 없음 */
.tbl.type1 {padding:1.5rem 0; border-top:1px solid #000; border-bottom:1px solid #ddd;} 
.tbl.type1 table {text-align:left; word-break:keep-all;}
.tbl.type1 table th,
.tbl.type1 table td {position:relative; /*padding:1.0rem 4.0rem;*/ font-weight:200; font-size:1.6rem; letter-spacing:-0.025em;}
.tbl.type1 table th {padding:1.0rem 0rem 1.0rem 4.0rem; font-weight:300;}
.tbl.type1 table td {padding:1.0rem 4.0rem 1.0rem 0rem;}
/* .tbl.type1 table tr td:first-child {padding-left:4.0rem;}
.tbl.type1 table tr td:last-child {padding-right:4.0rem;} */

/* 테이블 type2 - 수직형 행,열별 구분선 있음 */
.tbl.type2 {padding:0; border-top:1px solid #000;} 
.tbl.type2 table {word-break:keep-all;}
.tbl.type2 table th,
.tbl.type2 table td {position:relative; padding:2.0rem 0; border-bottom:1px solid #ddd; font-weight:200; font-size:1.6rem; letter-spacing:-0.025em; text-align:center;}
.tbl.type2 table th {font-weight:500;}

/* 테이블 type3 - 결제정보 (구 버전) */
.tbl.type3 {padding:0; border:1px solid #000;} 
.tbl.type3 table {word-break:keep-all;}
.tbl.type3 table th,
.tbl.type3 table td {position:relative; padding:25px 4.0rem; border-bottom:1px solid #ddd; border-left:1px solid #ddd; font-weight:200; font-size:1.6rem; letter-spacing:-0.025em; text-align:left; vertical-align:top;}
.tbl.type3 table th {font-weight:300;}
.tbl.type3 table tr:last-child td {border-bottom:none;}

/* 테이블 type4 - 수평 th 컬러구분 */
.tbl.type4 table {border-top:1px solid #000;}
.tbl.type4 table th,
.tbl.type4 table td {padding-top:25px; padding-bottom:25px; border-bottom:1px solid #ddd; font-size:1.6rem; letter-spacing:-0.5px; text-align:center;}
.tbl.type4 table th {background:#f5f5f5; color:#222; font-weight:500;}
.tbl.type4 table td {position:relative; font-weight:200;}

/* 테이블 type5 - 수직형 행,열별, th구분선 있음 */
.tbl.type5 {padding:0; border-top:1px solid #000;} 
.tbl.type5 table {word-break:keep-all;}
.tbl.type5 table th,
.tbl.type5 table td {position:relative; padding:2.0rem 0; font-size:1.6rem; letter-spacing:-0.025em; text-align:center;}
.tbl.type5 table td {border-bottom:1px solid #ddd; font-weight:200;}
.tbl.type5 table th {border-bottom:1px solid #000; font-weight:500;}

/* 테이블 type6 - 결제정보 (신 버전) */
.tbl.type6 {padding:35px 0; border-top:1px solid #000; border-bottom:1px solid #ddd;} 
.tbl.type6 table {text-align:left; word-break:keep-all;}
.tbl.type6 table th,
.tbl.type6 table td {position:relative; padding:0rem 4.0rem; font-weight:200; font-size:1.6rem; letter-spacing:-0.025em; border-left:1px dashed #ddd; vertical-align:top;}
.tbl.type6 table th {font-weight:500;}
.tbl.type6 table tr td:first-child {border-left:none}
.tbl.type6 table tr td dl::after,
.tbl.type6 table tr td dl > div::after {content: '';display: block;clear: both;}
.tbl.type6 table tr td > dl {margin-top:2.0rem}
.tbl.type6 table tr td > dl:first-child {margin-top:0rem}
.tbl.type6 table td dl dt {float:left; font-size:1.6rem; font-weight:300; color:#222}
.tbl.type6 table td dl dd {float:right; font-size:1.5rem; font-weight:200; color:#222}
.tbl.type6 table td dl dd em {font-size:1.6rem;}
.tbl.type6 table td dl dd .btn.btn_sm {height:34px; margin-top:-8px; margin-left:1.0rem; padding:1.0rem 1.4rem; font-size:1.4rem;}
.tbl.type6 table td dl dd .btn.btn_sm:first-child {margin-left:0;}
.tbl.type6 table td dl dd .btn.btn_sm span {vertical-align:top; font-weight:200; line-height:1;}
.tbl.type6 table td dl dd .btn.btn_sm.btn_default {color:#222; border:1px solid #a7a7a7;}
.tbl.type6 table td dl .price {font-size:2.2rem; font-weight:700;}
.tbl.type6 table td dl .price em {font-size:2.4rem;}
.tbl.type6 table td dl .price .oder_total_price {color:#222}
.tbl.type6 table td dl .price .pay_total_price {color:#fd4802}
.tbl.type6 table td dl .price .return_total_price {color:#fd4802}
.tbl.type6 table td dl .save_point {position:relative; padding-left:22px;}
.tbl.type6 table td dl .save_point::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1.6rem; height:1.6rem; background:url('/images/pc/ico_point.png') no-repeat 0 50%;}
.tbl.type6 table td dl > div {margin-top:2.0rem;}
.tbl.type6 table td dl > div:first-child {margin-top:0rem}
.tbl.type6 table td dl > div.include_item {}
.tbl.type6 table td dl > div.include_item dt {padding-left:1.5rem; background:url('/images/pc/ico_bracket2.png') no-repeat 0 50%;}

/* 테이블 내용 나열 폼 */
.tbl th,
.tbl td {vertical-align:top;}
.tbl td .single_line::after {content:''; clear:both; display:block;}
.tbl td .single_line ul li {float:left; position:relative; padding:0rem 1.5rem; margin:0}
.tbl td .single_line ul li::before {content:''; position:absolute; width:1px; height:1.4rem; left:0rem; top:50%; transform:translateY(-50%); background:#ddd;}
.tbl td .single_line ul li:first-child {padding-left:0}
.tbl td .single_line ul li:first-child::before {display:none;}
.tbl td .single_line ul li > span {margin-right:0}
.tbl td .block_line {position:relative;}
.tbl td .block_line ul li {margin-top:5px; height:1.625em; /*line-height:1;*/}
.tbl td .block_line ul li:first-child {margin-top:0}
.tbl td .block_line ul li > span {vertical-align:top;}
.tbl td .block_line ul li .tag {margin-left:6px; margin-top:2px; vertical-align:top;}
.tbl td .block_line ul li .btn.btn_sm {height:34px; margin-top:-6px; padding:1.0rem 1.4rem; font-size:1.4rem; font-weight:200;}



/* fold-list : list_cate */
.list_cate{margin: 0 -25px; padding: 50px 25px 0 25px; border-bottom: #e5e5e5 solid 1px;}
.list_cate > li{border-top: #e5e5e5 solid 1px; margin: 0 -25px; padding: 0 25px; position: relative;}
.list_cate > li::after{content: ''; display: block; position: absolute; right: 25px; top: 30px; width: 10px; height: 10px; border: #222 solid; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(135deg);}
.list_cate > li.on::after{top: 35px; border: #666 solid; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(-45deg);}
.list_cate > li dl > dt button {width: 100%; padding: 2.0rem 0; text-align: left; font-size: 1.6rem; font-weight: 400; line-height: 1.4;}
.list_cate > li dl > dd{margin: 0 -25px; padding: 0 25px; box-sizing: border-box; height: 0; overflow: hidden; background-color: #f5f5f5; border-top: transparent solid 1px;}
.list_cate > li.on dl > dd{height: auto; padding-bottom: 3.0rem; border-top: #666 solid 1px;}
.list_cate > li dl > dd .tit{padding-top: 3.0rem; font-size: 1.4rem; line-height: 1.5;}
.list_cate > li dl > dd ol li{margin-top: 1.5rem; font-size: 1.4rem; position: relative; padding-left: 8px;}
.list_cate .imgWrap {position: relative;}
.list_cate .imgWrap::after {content: ''; display: block; clear: both;}
.list_cate .imgWrap span{display: inline !important; float: left; margin: 0 10px 0 0; width: 7.0rem; height: 7.0rem;background: #ffffff; border: 1px solid #dddddd; box-sizing: border-box; position: relative;}
.list_cate .imgWrap img{width: auto; height: auto; max-height: 6.8rem; max-width: 6.8rem; margin: auto 0; position: absolute; top: 50%; bottom: auto; left: 50%; right: 0; transform: translate(-50%, -50%); cursor: pointer;}

/* folding Group */
.fold_head a::after ,
.fold_head a div::after,
.fold_head .fold_tit::after {content: ''; display: block; clear: both;}

.foldGroup {width: 100%; margin-bottom: 20px;}
.foldGroup > ul > li {position: relative; width: 100%; margin: 0px; border: 0px; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; box-sizing: border-box;}
.foldGroup > ul > li:first-child {border-top: 1px solid #fff;}
.foldGroup > ul > li+li {margin:0; border-top:0px solid; box-sizing:border-box;}
.foldGroup .fold_head,
.foldGroup .fold_foot,
.foldGroup .fold_cont {width:100%;}
.foldGroup .fold_head {position: relative; width:100%; border-bottom: 0;}
.fold_head {padding: 0px; border-bottom: 1px solid transparent;}
.fold_head::after {content: ''; position: absolute; display: inline-block; top:50%; left: auto; right:20px; transform: translateY(-50%);  width:13px; height:7px; background: url('/images/mo/ico_fold_arrow1.png'); background-repeat: no-repeat; background-position: 0 100%; background-size: cover;}
.fold_head.on::after {background-repeat: no-repeat; background-position:0 0%;}
.foldGroup .fold_head a {display:block; width:inherit; height:100%; padding:1.4rem 2rem; box-sizing:border-box;}
.fold_head .fold_tit {position:relative;}
.fold_head .fold_tit span { position: relative; height: auto; display:inline-block; font-size:1.3rem; font-weight:300; color: #222; text-decoration: none; letter-spacing:-0.025em;}
.fold_head .fold_state {display:inline-block!important; width:auto; box-sizing:border-box; text-align: center; font-size:12px; font-weight: 300; color:#888;}
.fold_head .fold_state .important {display:inline-block; position:relative; padding:2px 10px; background-color: #fd4802; color:#fff; font-size:14px; font-weight:300; padding:4px 10px 2px;}
.fold_head .fold_state.fix {color:#222;}
.fold_head .fold_state.done {color:#fff; background-color:#fd4801;}
.fold_head .fold_state.doing {color:#fff; background-color:#aaa;}
.fold_head .fold_category {width:100px; font-weight:200; text-align:center; color:#888;}
.fold_head .data,
.fold_head .id{font-size:12px; font-weight: 200; color:#888;}
.fold_head .id{position:relative; padding-right:1rem; margin-right:1rem;}
.fold_head .id:after{display:block; content:''; position:absolute; right:0; top:2px; width:1px; height:0.8rem; background-color:#dddddd;}
.foldGroup .fold_cont {display:none; padding: 0; position: relative; color:#000; font-weight:200; font-size:14px; line-height:1.625;}
.fold_cont > div:first-of-type {border-top:none;}
.fold_cont .img_group .thumb_pic {position:relative; display:inline-block; width:74px; height:74px; border:1px solid #ddd; margin-right:4px; box-sizing:border-box; overflow:hidden;} 
.fold_cont .img_group .thumb_pic img {position:absolute; top:50%; transform: translateY(-50%); width:100%; height: auto;}
.fold_cont .fold_detail,
.fold_cont .fold_answer {position:relative; padding:1.8rem 2rem;}
.fold_cont .fold_answer {border-top:1px solid #ddd }
.fold_cont .fold_detail .btn {margin-top:25px; padding:6px 13px; color:#222; border-color:#a1a1a1; font-size:12px; font-weight:200; background:none;}
.fold_cont .fold_detail .img_group {margin-top: 24px; overflow: hidden;}
.fold_cont .fold_answer > div {position:relative;}
.fold_head .fold_tit span.prod{font-size:12px; font-weight:200; color: #888; /*white-space:nowrap; text-overflow:ellipsis; overflow:hidden;*/}
.fold_detail,
.fold_answer{background:#f5f5f5;}
.fold_answer .data{font-size:12px; font-weight: 200; color:#888;}
.fold_answer div.answer_head{color:#222; font-weight:300;}
.fold_answer .answer_body{font-weight:200;}
.fold_answer .answer_foot{position:relative}
.fold_answer .btn_delete{position:absolute; right:0; bottom:0; font-size:12px; color:#777;}
.fold_answer .btn_delete > span{position:relative; display:inline-block;}
.fold_answer .btn_delete > span:after{display:block; content: ''; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background-color:#777777;}
.fold_head .fold_state{padding:3px 5px; margin-right:5px;}
.fold_head .prod{padding:3px 0;}
.fold_head .fold_state{background-color:#000; color:#fff;}
.fold_head .fold_tit > div{padding-right:3rem;}
.fold_head .fold_tit > div.lap1{margin-bottom:3px;/* display:flex;*/}
.fold_head .fold_tit > div.lap2{margin-bottom:3px;/* white-space:nowrap; text-overflow:ellipsis; overflow:hidden;*/}
.case1 .fold_head .prod{padding-bottom:0;}
.case1 .fold_head .prod{padding-left:0;}
.case2 .fold_head::after{margin-top:-10px;}

.case2 .fold_cont .fold_detail > div,
.case2 .fold_cont .fold_answer > div{position:relative; padding-left:17px;}
.case2 .fold_cont .fold_detail > div:before,
.case2 .fold_cont .fold_answer > div:before{content:''; position:absolute; left:0; top:0; font-size:1.4rem; font-weight:400;}
.case2 .fold_cont .fold_detail > div:before{content:'Q.'; color:#222222;}
.case2 .fold_cont .fold_answer > div:before{content:'A.'; color:#fd4802}

/* popover style Tooltip */
.tip_tit{background-color: transparent;border-radius: 100%;border: 1px solid #888888;color: #fd4802;cursor: default;display: inline-block;font-size: 1.2rem;font-weight: 600;line-height: 1.4rem;position: relative;text-align: center;width: 1.5rem;height: 1.5rem;}
.tip_wrap {position: relative;display: inline-block;}
.tip_contents {width: auto;opacity: 0;visibility: hidden;position: absolute;transform: scale(.6) translateX(-45%) translateY(90%);color:#888888;border: 1px solid #ffe4d9;background-color: #fff6f2;padding: 1.5rem;}
.tip_contents:before {position: absolute;z-index: -1;content: "";right: calc(50% - 10px);top: -8px;border-style: solid;border-width: 0 1.0rem 1.0rem 1.0rem;border-color: transparent transparent #fff6f2 transparent;transition-duration: 0.3s;transition-property: transform;}
.tip_contents:after, .tip_contents:before {transform: scale(1) translateY(0);}
.tip_contents:after, .tip_contents:before {bottom: 100%;left: 50%;border: solid transparent;content: "";height: 0;width: 0;position: absolute;pointer-events: none;}
.tip_contents:after {border-color: rgba(255, 246, 242, 0);border-bottom-color: #fff6f2;border-width: 10px;margin-left: -10px;}
.tip_contents:before {border-color: rgba(255, 228, 217, 0);border-bottom-color: #ffe4d9;border-width: 11px;margin-left: -11px;top: -22px;}
.tip_wrap:hover .tip_contents {z-index: 10;opacity: 1;visibility: visible;transform: translate(-45%, 1.0rem);transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);}
.tip_txt {text-align: center;min-width: 20.0rem;}

/* bottom popup */
.btPop_full {background: #ffffff;width: 100%;height: 100%;/* height: auto; */margin: 0;padding: 0;transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;text-align: left;z-index: 999;}
.btPop_full .btPop_head {padding: 20px;border-bottom: 1px solid #ddd;font-size:1.8rem;position: relative;}
.btPop_full .btPop_body {padding: 20px;font-size:1.4rem;}
.btPop {background: #ffffff;width: 100%;height: 100%;/* height: 100% */margin: 0;padding: 0;transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);top: 100%;position: fixed;left: 0;text-align: left;z-index: 999;}
.btPop .btPop_head {padding: 2.0rem;border-bottom: 1px solid #ddd;font-size:1.8rem;position: relative;}
.btPop .btPop_body {padding: 2.0rem;font-size:1.4rem;/*max-height: 24rem;*/overflow-x: hidden;overflow-y: auto;}
.container .btPop_full .btPop_full_close,
.container .btPop .btPop_close{transition: all 10ms ease;opacity: 0;}
.container.btPop_full_open .btPop_full {top: 0;/* top: auto; */top: 55px;}
.container.btPop_full_open .btPop_full .btPop_full_close,
.container.btPop_open .btPop .btPop_close{
  opacity: 1;position: absolute;z-index: 98;
  top:-3.8rem;left:50%;transform: translate(-50%);display:block;border: 0;
  width:2.7rem;height:2.7rem;text-indent:-9999px;background-size:contain;
  background-repeat:no-repeat;background-position:center center;
  background-image: url('/images/mo/ico_pop_cls.png');background-color: transparent;
}
.container.btPop_open .btPop {top: 0;/* top: auto; top: 55%;*/}
.container.btPop_full_open::after,
.container.btPop_open::after {
  content: '';width: 100%;height: 100%;display: inline-block;
  background: #333;opacity: 0.7;position: absolute;top: 0;left: 0;z-index: 82;
}




/* ALERT, CONFIRM Plugin custom  */
.dialog-mobile-bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	-ms-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/*alert confirm*/
.dialog-mobile {
	padding: 0;
	text-align:center;
	position: fixed;
	top: 50%;
	left: 0;
	z-index: 1001;
	width: 90%;
	background-color: rgba(255, 255, 255,1);
	border-radius: 0px;
	-ms-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
/* 
.dialog-mobile {
    box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);
    mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
    -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
    mask-size: 86.6072% 0%, 6.3% 13.3%, 93.7% 100%, 100% 86.5%;
    -webkit-mask-size: 86.6072% 0%, 6.3% 13.3%, 93.7% 100%, 100% 86.5%;
    mask-position: bottom left, bottom right, top left, top right;
    -webkit-mask-position: bottom left, bottom right, top left, top right;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
 */
 .dialog-mobile .dialog-title {
    padding: 0.8em 1em 0.5em;
    text-align: center;
    color: #333333;
	font-size: 1.8rem;
	font-weight: 400;
    border-radius: 0.5rem 0.5rem 0 0;
}
.dialog-mobile .dialog-content {
	position: relative;
	padding:5.0rem 2.0rem 4.0rem 2.0rem;
	line-height: 2em;
	text-align: left;
	color: #333333;
	font-size:1.4rem;
	text-align:center;
}
.dialog-mobile .dialog-content em {
	color:#df6400
}
.dialog-mobile .dialog-button,
.dialog-mobile .dialog-sure-button,
.dialog-mobile .dialog-cancel-button {
	display:inline-block;
	position: relative;
	margin:0;
	padding:0;
    width: 100%;
    height: 3.8rem;
	line-height: 3.8rem;
	text-align: center;
	font-size:1.4rem;
	font-weight: 200;
	cursor:pointer;
	border-radius:0rem;
}
.dialog-mobile .dialog-button{
	color: #fff;
	background:#000;
	border:1px solid #000;
	min-width:10.0rem;
}
.dialog-mobile .dialog-cancel-button {
	color: #000;
	background: #fff;
	border:1px solid #999;
	/* min-width:10.0rem; */
}
.dialog-mobile .dialog-sure-button{
	color: #fff;
	background:#000;
	border:1px solid #000;
	/* min-width:10.0rem; */
}
.dialog-mobile button[i='1']{
	color: #000 !important;
	background:#fff !important;
	border:1px solid #777;
	/* min-width:10.0rem; */
}
.dialog-mobile button[class$='-button']:nth-last-child(2){width: 50%;}
.dialog-mobile button[class$='-button'] +  button[class$='-button']{width: 50%;}


/* alert 투명도 */
.dialog-mobile.trans {
	padding: 0 1.2rem 2.5rem 1.2rem;
	margin-left: -45%;
	text-align:center;
	position: fixed;
	top: 50%;
	left: auto;
	right: auto;
	z-index: 1001;
	min-width:13.3rem;
	max-width: 90%;
	background-color: rgb(14 14 14 / 0.8);
	border-radius: 0px;
	-ms-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.dialog-mobile.trans .dialog-title {
    padding: 0em 1em 0.5em;
    text-align: center;
    color: #ffffff;
	font-size: 1.6rem;
	font-weight: 200;
    border-radius: 0.5rem 0.5rem 0 0;
}

.dialog-mobile.trans .dialog-content {
	position: relative;
	padding:2.5rem 0 0rem 0;
	line-height: 2em;
	text-align: left;
	color: #ffffff;
	font-size:1.4rem;
	text-align:center;
}
.dialog-mobile.trans .dialog-content em {
	color:#df6400
}
.dialog-mobile.trans .dialog-button,
.dialog-mobile.trans .dialog-sure-button,
.dialog-mobile.trans .dialog-cancel-button {
	display:inline-block;
	position: relative;
	margin:0 0.5rem;
	padding:0 3.0rem;
	min-width: 7.0rem;
	height: 3.8rem;
	line-height: 3.8rem;
	text-align: center;
	font-size:1.4rem;
	font-weight: 200;
	cursor:pointer;
	border-radius:0rem;
}
.dialog-mobile.trans .dialog-button{
    color: #fff;
    background: transparent;
    border: 1px solid #dddddd;
	min-width:10.0rem;
	width: auto;
}
.dialog-mobile.trans .dialog-cancel-button {
	color: #fff;
    background: transparent;
    border: 1px solid #dddddd;
	min-width:10.0rem;
	width: auto;
}
.dialog-mobile.trans .dialog-sure-button{
	color: #fff;
    background: transparent;
    border: 1px solid #dddddd;
	min-width:10.0rem;
	width: auto;
}
.dialog-mobile.trans button[i='1']{
	color: #000 !important;
	background:#fff !important;
	border:1px solid #777;
	min-width:10.0rem;
	width: auto;
}

/* 닫기 아이콘 */
.dialog-close-btn {
	display: none;
	position:absolute;
	top:0;
	right:0;
	padding:2.0rem;
	/* padding:25rem 16rem; */
	width: 1.5rem;
	height: 1.5rem;
	cursor:pointer;
	background:url('/images/mo/ico_pop_cls.png') no-repeat 50% 50%;
    background-size: 1.5rem;
}

/*bottom dialog*/
.dialog-mobile-bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10001;
	width: 100%;
	color: #333333;
	background-color: #EEEEEE;
}
.dialog-mobile-bottom .bottom-btn-item {
	text-align: center;
}
.bottom-btn-item .dialog-item-btn {
	background: #FFFFFF;
	padding: 0.5em 0;
	border-bottom: 1px solid #EEEEEE;
}
.bottom-btn-item .dialog-item-btn:last-child {
	border-bottom: none;
}
.dialog-mobile-bottom .dialog-cancel-btn {
	margin-top: 0.6em;
	text-align: center;
	background: #FFFFFF;
	padding: 0.5em 0;
}
/*toast*/
.dialog-mobile-toast {
	position: fixed;
	bottom: 5em;
}
.dialog-mobile-toast .toast-content {
	padding: 0.5em 1em;
	color: #FFFFFF;
	border-radius: 0.2rem;
	background-color: #333333;
}
/*loading*/
.mobile-loading-bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.mobile-loading {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10001;
	min-width: 2em;
	min-height: 2em;
	padding: 0.8em 1.6em;
	text-align: center;
	border-radius: 0.2rem;
	color: #FFFFF0;
	background-color: #0A0A0A;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
/*animation*/
.animation-zoom-in, .animation-zoom-out,
.animation-bottom-in, .animation-bottom-out,
.animation-bg-fadeIn {
	-webkit-animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-duration: 0.3s;
	animation-fill-mode: both;
}
.animation-fade-in, .animation-fade-out {
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-fill-mode: both;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: both;
}
.animation-zoom-in {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
}
.animation-zoom-out {
	-webkit-animation-name: zoomOut;
	animation-name: zoomOut;
}
.animation-fade-in {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
.animation-fade-out {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}
.animation-bottom-in {
	-webkit-animation-name: bottomIn;
	animation-name: bottomIn;
}
.animation-bottom-out {
	-webkit-animation-name: bottomOut;
	animation-name: bottomOut;
}
.animation-bg-fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes zoomIn {
	from{
		opacity: 0;
		-webkit-transform: scale(0, 0);
	}
	to{
		opacity: 1;
		-webkit-transform: scale(1, 1);
	}
}
@-webkit-keyframes zoomOut {
	from{
		opacity: 1;
		-webkit-transform: scale(1, 1);
	}
	90%{
		-webkit-transform: scale(0.3, 0.3);
	}
	to{
		opacity: 0;
		-webkit-transform: scale(0, 0);
	}
}
@keyframes zoomIn {
	from{
		opacity: 0;
		transform: scale(0, 0);
	}
	to{
		opacity: 1;
		transform: scale(1, 1);
	}
}
@keyframes zoomOut {
	from{
		opacity: 1;
		transform: scale(1, 1);
	}
	90%{
		transform: scale(0.3, 0.3);
	}
	to{
		opacity: 0;
		transform: scale(0, 0);
	}
}
@-webkit-keyframes fadeIn {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@-webkit-keyframes fadeOut {
	from{
		opacity: 1;
	}
	30%{
		opacity: 0.3;
	}
	to{
		opacity: 0;
	}
}
@keyframes fadeIn {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@keyframes fadeOut {
	from{
		opacity: 1;
	}
	30%{
		opacity: 0.3;
	}
	to{
		opacity: 0;
	}
}
@-webkit-keyframes bottomIn {
	from{
		bottom: -1000px;
	}
	to{
		bottom: 0;
	}
}
@-webkit-keyframes bottomOut {
	from{
		bottom: 0;
	}
	to{
		bottom: -1000px;
	}
}
@keyframes bottomIn {
	from{
		bottom: -1000px;
	}
	to{
		bottom: 0;
	}
}
@keyframes bottomOut {
	from{
		bottom: 0;
	}
	to{
		bottom: -1000px;
	}
}




/* .popWrap, .popup */
.popWrap{position: relative; height: 100%; padding: 30px 0; background-color: #fff;}
.popup{display: none; position: fixed; left: 0; top: 55px; width: 100%; height: auto; background-color: #ffffff; padding: 0; z-index: 80;}
.popup::before{content: ''; display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5);}
.popup .btn_popClose{position: absolute; top: -45px; right: 15px; width: 35px; height: 35px; background-color: black; z-index: 10;}
.popup .btn_popClose span{display: block; width: 24px; height: 24px; margin: 0 auto; position: relative;}
.popup .btn_popClose span i{display: block; position: absolute; left: 0; top: 10px; width: 24px; height: 2px; background: #fff; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
.popup .btn_popClose span i.gl1{-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.popup .btn_popClose span i.gl2{-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

/* modal */
/*  modal popup  */
.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:999;padding:0px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center;}
.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}
.blocker.behind{background-color:transparent;}
.modal{display:none; vertical-align:middle;position:relative;z-index:2;max-width:960px;box-sizing:border-box;width:90%;background:#fff;padding:0;text-align:left; -webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;}
.modal a.close-modal{position: absolute;top:2.4rem;right:2.1rem;display:block;width:1.7rem;height:1.7rem;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg=='); z-index: 98; background-image: url('/images/mo/ico_pop_cls.png');}

.modal .modal-header{margin-top: 0;margin-bottom: 0; padding: 2.4rem 1.88rem 2.0rem;}
.modal .modal-header > *{font-size: 1.7rem;font-weight: 400;}
.modal .modal-body{box-sizing: border-box; padding: 0rem 1.33rem;}
.modal .modal-body .pop_cont{overflow: auto;max-height: 450px; font-size: 16px; line-height: 1.62; font-weight: 200; color:#666;}
.modal .modal-body .fx_r {position: fixed;right: 0;top: auto;bottom: auto;left: auto;}
.modal .modal-footer{margin-top: 3.0rem;}
.modal .modal-footer .btn{width: 100%; border-width: 0;}

.modal.pop_full {width: 100%; max-width: 100%; height: 100%; padding: 0; overflow: auto; position: relative;}
.modal.pop_full .modal-header {width: 100%;height:5.2rem;box-sizing: border-box;border-bottom: 1px solid #dddddd;z-index:98;position: fixed;top: 0;left: 0;bottom: auto;right: auto;background: #fff;padding: 1.6rem 1.33rem 1.6rem 1.33rem;}
/* .modal.pop_full .modal-header .modal-title {padding: 40px 0 0 37px;} */
.modal.pop_full .modal-body{margin-top: 6.7rem;}
.modal.pop_full .modal-body .pop_cont{max-height: 100%;}
.modal.pop_full a.close-modal {position: fixed;top: 1.6rem;}

.modal.pop_fullCol { width: 100%; max-width: 100%;padding: 0; position: relative;}
.modal.pop_fullCol .modal-header{width: 100%;height: 5.2rem;box-sizing: border-box;border-bottom: 1px solid #dddddd;z-index:98;position: fixed;top: 0;left: 0;bottom: auto;right: auto;background: #fff;}
.modal.pop_fullCol .modal-header .modal-title {padding: 40px 0 0 37px;}
.modal.pop_fullCol a.close-modal {position: fixed;}

.modal.pop_fullCol .modal-body {margin-top: 6.7rem;}
.modal.pop_fullCol .modal-body .pop_cont{max-height: 100%;}
.modal.pop_fullCol .modal-body [class^="ui_col_"]{margin: 0;}

.modal::-webkit-scrollbar,.pop_cont::-webkit-scrollbar {width: 2px;}
.modal::-webkit-scrollbar-thumb,.pop_cont::-webkit-scrollbar-thumb {background-color: #888888;border-radius: 0px;background-clip: padding-box;border: 0px solid transparent;}
.modal::-webkit-scrollbar-track, .pop_cont::-webkit-scrollbar-track{background-color: #dddddd;border-radius: 0px;}

.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}
.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}
.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}

@-webkit-keyframes sk-stretchdelay{
  0%,40%,100%{
      -webkit-transform:scaleY(0.5)
  }
  20%{
      -webkit-transform:scaleY(1.0)
  }
}
@keyframes sk-stretchdelay{
  0%,40%,100%{
      transform:scaleY(0.5);-webkit-transform:scaleY(0.5)
  }
  20%{
      transform:scaleY(1.0);-webkit-transform:scaleY(1.0)
  }
}



/* 제거할 클래스 */
.btnL{width:100%; height:4.5rem; line-height:4.5rem; font-size:1.4rem;}
.btnM{width:100%; height:4rem; height:4rem; line-height:4rem; }
.btnS{width:100%; height:3rem; height:3rem; line-height:3rem; }

/* .inner, .inner.bg_gray 등을 응용 */
.blockLyout{background-color:#f5f5f5;}
.blockLyout > .block{padding:30px 0; margin-top:1.5rem; background-color:#Fff;}
.blockLyout > .block:first-child{margin-top:0;}

.txC1{color:#222222!important;}
.txC2{color:#666666!important;}
.txC3{color:#888888!important;}
.txC4{color:#ffffff!important;}
.bgC1{background-color:#222222!important;}
.bgC2{background-color:#444444!important;}
.bgC3{background-color:#dddddd!important;}
.bgC4{background-color:#fff6f2!important;}
.bgC5{background-color:#f5f5f5!important;}
.bgC6{background-color:#f1f1f1!important;} /* <----풋터색상*/


/* 사용금지 */
.mgc {margin:0 auto;}
.mt0 {margin-top:0 !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;}
.ml30 {margin-left:30px !important;}
.mr0{margin-right:0px !important;}
.mr20 {margin-right:20px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt100 {margin-top:100px !important;}
.mb0 {margin-bottom:0 !important}
.mb5 {margin-bottom:5px !important}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}
.mb60 {margin-bottom:60px !important;}
.mb100 {margin-bottom:100px !important;}
.mr5 {margin-right:5px !important;}
.mr10 {margin-right:10px !important;}
.mr15 {margin-right:15px !important;}
.ml10 {margin-left:10px !important;}
.ml35 {margin-left:35px !important;}
.mtm3 {margin-top:-3px !important;}
.mtm10 {margin-top:-10px !important;}
.mtm20 {margin-top:-20px !important;}
.mbm10 {margin-bottom:-10px !important;}
.mbm30{margin-bottom:-30px !important;}
.pt0 {padding-top:0 !important;}
.pt10 {padding-top:10px !important;}
.pt20 {padding-top:20px !important;}
.pt30 {padding-top:20px !important;}
.pt40 {padding-top:40px !important;}
.pt100 {padding-top:100px !important;}
.pl0 {padding-left:0 !important;}
.pl10 {padding-left:10px !important;}
.pr20 {padding-right:20px !important;}
.pb10 {padding-bottom:10px !important;}
.pb20 {padding-bottom:20px !important;}
.pb30 {padding-bottom:30px !important;}
.pb40 {padding-bottom:40px !important;}
.pb50 {padding-bottom:50px !important;}
.pb100 {padding-bottom:100px !important;}

.shape.ranker {background: #fd4802;}
.shape.ranker::after {
  border-left:10px solid #fd4802 !important;
  border-right:0px solid #fd4802 !important;
}
.shape{
  background: #222222;width: 3rem;max-width: 3rem;min-height: 4rem;display: block;position: absolute;top: 0;left: 0;z-index: 9;
}
.shape:after{
  content: "";top: 0;right: -10px;position: absolute;
  border-left: 10px solid #222222;border-bottom: 10px solid transparent;border-right: 0px solid #0183fd;
  height: 3rem;width: 0;padding: 0px 0px 0px 0px;
}
.shape span{
  color: #ffffff;text-align: center;text-indent: 10px;font-size: 1.1rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40px;z-index: 2;
  /* line-height: 1; */
  /* letter-spacing: -25em; */
  /* display: -webkit-box; */
  /* z-index: 99999; */
}
.shape.dealdetail{
  width: 100%;max-width: 40px;
}
.shape.dealdetail span{
  line-height: 1;text-align: center;width: 100%;display: inline-block;text-indent: 0;margin-left: 5px;
}




/* APP ONLY */
/* etc_goApp */
.adApp {width: 100%;height: 100%;z-index: 99999;overflow: hidden;position: fixed;left: 0;top: 0;background-color: rgba(0, 0, 0, 0.85);/* IE 5.5 - 7 */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgb(255, 231, 204) ff, endColorstr=rgb(255, 229, 204) ff);/* IE 8 */-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@filter_a, endColorstr=@filter_a)";}
.adApp .adWrap {display: table;width: 100%;height: 100%;}
.adApp .adWrap .cont {padding: 0px 2rem;display: table-cell;vertical-align: middle;}
.adApp .cont button {width: 100%;}
.adApp .viewWeb {margin-top: 10%;font-size: 1.4rem;font-weight: 100;line-height: 1.2;color: #ffffff;text-align: center;text-decoration: underline;}
.adApp .viewWeb a {color: #ffffff;}


/* etc_consentAlarm */
.etcApp {width: 100%;height: 100%;z-index: 99999;text-align: center;overflow: hidden;position: fixed;left: 0;top: 0;background-color: #ffffff;}
.etcApp .titWrap{margin-bottom: 2.0rem;}
.etcApp .titWrap h2{font-size: 2.0rem;color: #333333;}
.etcApp .alramWrap {display: table;width: 100%;height: 100%;padding-top: 4.0rem;}
.etcApp .alramWrap .inner {padding: 0rem;}
.etcApp .alramWrap .btn_group_flex {position: fixed;bottom: 0;}
.etcApp .alramWrap .btn_group_flex button{padding: 1.8rem 0;}
.etcApp .btn_group_flex > div > .btn.btn_primary {background-color: #fd4802;border-color: #fd4802;color: #ffffff;}
.etcApp .btn_group_flex > div > .btn.btn_primary{color: #ffffff;font-weight: 200;}
.etcApp .alramClose {margin-top: 0;font-size: 1.4rem;font-weight: 100;line-height: 1.4;color: #ffffff;text-align: center;text-decoration: underline;}
.etcApp .alramClose a {color: #888888;}
/* etc_accessApp */
.etcApp .accWrap {display: table;width: 100%;height: 100%;padding-top: 4.0rem;}
.etcApp .accWrap .inner {padding: 0rem;}
.etcApp .accWrap .btn_group_flex {position: fixed;bottom: 0;}
.etcApp .accWrap .btn_group_flex button{padding: 1.8rem 0;}
.etcApp .accClose {margin-top: 10%;font-size: 1.4rem;font-weight: 100;line-height: 1.4;color: #ffffff;text-align: center;text-decoration: underline;}
.etcApp .accClose a {color: #888888;}

/* etc_coachApp (Coach Marks) */
#coachHide {background: transparent;}
.etcApp .coach {position: relative;width: 100%;height: 100%;}
.etcApp .coach::after {content:'';display: block; width: 100%;height: 100%;background-color: black;opacity: 0.75;z-index: -1;}
.etcApp .coach span{position:absolute;width: 100%;height: 100%;background-repeat: no-repeat;z-index: 10;}
.etcApp .coach #coachmask01{top:1.4rem; bottom:auto; left:1.8rem; right:auto; background: url('/images/mo/coachmask01.png')no-repeat; background-size: 14.0666rem 12.0666rem; width: 14.0666rem; height: 12.0666rem;}
.etcApp .coach #coachmask02{top:5.2rem; bottom:auto; left:auto; right:0.15rem; background: url('/images/mo/coachmask02.png')no-repeat; background-size: 12.6666rem 13.3000rem; width: 12.6666rem; height: 13.3000rem;}
.etcApp .coach #coachmask03{top:auto; bottom:0.8rem; left:auto; right:1.8rem; background: url('/images/mo/coachmask03.png')no-repeat; background-size: 19.2666rem 10.5000rem; width: 19.2666rem; height: 10.5000rem;}
.etcApp .coach button{width: 100%; height: auto;}


/* etc_settingApp */
.app-only .sett {background: #f5f5f5;}
.app-only .sett .inner{background: #ffffff; margin-bottom: 2.0rem;}
.app-only .sett dl{width: 100%;}
.app-only .sett dl dd {border-bottom:1px solid #eeeeee;}
.app-only .sett dl dd:last-child {border-bottom:0}
.app-only .sett dl dd:first-child:nth-last-child(1) {border-bottom:1px solid #eeeeee;}
.app-only .sett dl dd .setItems {display: flex;align-items: center;padding: 1.0rem;}
.app-only .sett dl dd .setItems .set_opt {flex-grow: 1; padding: 0 0 0 0;}
.sett .form_field input[type="checkbox"] + label:before {content: 'OFF';background: none;color: #ffffff;left: auto;right: 0.4rem;font-size: 1.0rem;line-height: 2.0rem;}
.sett .form_field input[type="checkbox"]:checked + label:before {content: 'ON';background: none;color: #ffffff;left: 0.4rem;right: auto;font-size: 1.0rem;line-height: 2.0rem;}
.sett .switch {width: 4.8rem;position: relative;}
.sett .switch input[type="checkbox"] {visibility: hidden;}
.sett .switch label {width: 100%;height: 2.4rem;border-radius: 5.0rem;background-color: #dddddd;position: absolute;top: 0;left: 0;cursor: pointer;}
.sett .switch input[type="checkbox"]:checked + label {background-color: #fd4802;}
.sett .switch label::after {content: "";width: 2.0rem;height: 2.0rem;border-radius: 50%;background: white;position: absolute;top: 0.2rem;left: 0.2rem;transition: all 0.1s;}
.sett .switch input[type="checkbox"]:checked + label::after {background: #ffffff;position: absolute;top: 0.2rem;left: auto;right: 0.2rem;margin: 0;}
.sett .alink {display: inline-block;text-align: center;cursor: pointer;}
.sett .alink input[type="button"] {visibility: hidden;}
.sett .alink input[type="button"] + label::after {content: '업데이트';position: relative;top: 0;right: 0;color: #fd4802;font-size: 1.2rem;display: inline-block;background: url(/images/mo/ico_app_arr2.png)no-repeat;background-size: 0.7rem 1.3rem;width: auto;height: 1.4rem;line-height: 1.4rem;background-position: 5.5rem 0;padding-right: 2.0rem;}
.sett .alink input[type="button"]:disabled + label::after {content: '최신버전입니다';color: #888888;background: none;padding: 0;}
.sett .alink label {width: 0.2rem;height: 0.2rem;cursor: pointer;}
.sett .alink a {display: inline-block;width:5rem;height:1.2rem;}
.sett .alink a::after {content: '';display: inline-block;background: url(/images/mo/ico_app_arr.png)no-repeat;background-position: 4.2rem 0px;background-size: 0.7rem 1.3rem; width: 100%;height: 1.4rem;line-height: 1.4rem;}
.sett p {font-size: 1.2rem;color: #888888;width: calc(100% - 7rem);padding-left: 1rem;padding-bottom: 0.8rem;}
.sett p.pot {position: relative;padding-left: 1.8rem;margin: 0;font-size: 1.1rem;font-weight: 200;color: #888888;}
.sett p.pot::before {content: '';position: absolute;top: 0.7rem;left: 1rem;background: #888888;width: 0.3rem;height: 0.3rem;}


/* etc_noticeApp */
.app-only .notice {background: #f5f5f5;position: relative;}
.app-only .notice.nodata::after{content: '알림이 없습니다.';width: 100%;height: auto;display: inline-block;position: absolute;top:13.6rem;left: auto;text-align: center;color: #888888;font-size: 1.3rem;}
.app-only .notice .inner{background: #ffffff; margin-bottom: 0rem;padding-bottom:0;border-bottom:1px solid #eeeeee;}
.app-only .notice .inner:last-child{padding-bottom: 0rem;}
.app-only .notice dl {font-size: 1.3rem;padding: 2.3rem 0;}
.app-only .notice dt {color: #222222;}
.app-only .notice dd {font-size: 1.2rem;color: #666666;padding-bottom: 1.5333rem;}
.app-only .notice dt {line-height: 1.2;padding-bottom: 1.1rem;}
.app-only .notice dt.tit, .app-only .notice dd.cont_txt {word-wrap: break-word;word-break: keep-all;}
.app-only .notice dd.cont_data {font-size: 1.1rem; color: #888888;font-family: 'LATO';}
.app-only .notice dd.cont_img {width: 100%;height: auto;}
.app-only .notice dd:last-child {padding-bottom: 0;}



/* etc_closingApp */
.app-only .guidance{width: auto;}
.app-only .guidance{overflow: hidden;position: fixed;bottom: -4rem;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
.app-only .guidance:after{content: '';position: absolute;top: 0;bottom: 15px;left: 10px;width: 100%;height: 100%;z-index: -1;}
.app-only .guidance{
    box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);
	/* 마스크 미사용 
	mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
    -webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white), linear-gradient(white, white);
	mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
    -webkit-mask-size: 100% 0%, 2vh 2vh, calc(100% - 1.9vh) 100%, 100% calc(100% - 1.9vh);
    mask-position: bottom left, bottom right, top left, top right;
    -webkit-mask-position: bottom left, bottom right, top left, top right;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
	*/
}
.app-only .guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
.app-only .guidance p.tit{font-size: 1.4rem;margin-bottom: 1.53rem;}
.app-only .guidance p.date{opacity: 0.7;font-size:1.1rem;margin-bottom: 1.2rem;}
.app-only .guidance p.tit + p.date + p {font-size:1.1rem;}
.app-only .guidance p:first-child {padding-top: 2.0rem;}
.app-only .guidance p:last-child {padding-bottom: 2.0rem;}
.app-only .guidance p:first-child:nth-last-child(1) { padding-top: 0;padding-bottom: 0; }
.app-only .guidance.ontoast {animation: onpop 6s .2s forwards; -webkit-animation: onpop 6s .2s forwards;}
@keyframes onpop {
	0% {bottom:0rem; opacity:1; z-index:99999;}
	10% {bottom:10.0rem;}
	20% {bottom:8.0rem;}
	80% {bottom:8.0rem; opacity:1; z-index:99999;}
	100% {opacity:0; z-index:0;}
}
/* mobile type */
/* etc_toastPopup */
.guidance{width: auto;}
.guidance{overflow: hidden;position: fixed;bottom: -4rem;left: 50%;z-index: 9;width: 88.888%;height: auto;margin-left: -44.444%;padding: 1.2rem 0 1.0rem;background-color: rgba(0,0,0,0.8);text-align: center;opacity: 0;}
.guidance:after{content: '';position: absolute;top: 0;bottom: 15px;left: 10px;width: 100%;height: 100%;z-index: -1;}
.guidance{box-shadow: 0 0px 30px rgb(0 0 0 / 20%), 0 0px 30px rgb(0 0 0 / 20%);}
.guidance p{font-size:1.3rem;font-weight: 300;color: #fff;}
.guidance p.tit{font-size: 1.4rem;margin-bottom: 1.53rem;}
.guidance p.date{opacity: 0.7;font-size:1.1rem;margin-bottom: 1.2rem;}
.guidance p.tit + p.date + p {font-size:1.1rem;}
.guidance p:first-child {padding-top: 2.0rem;}
.guidance p:last-child {padding-bottom: 2.0rem;}
.guidance p:first-child:nth-last-child(1) { padding-top: 0;padding-bottom: 0; }
.guidance.ontoast {animation: onpop 6s .2s forwards; -webkit-animation: onpop 6s .2s forwards;}
@keyframes onpop {
	0% {bottom:0rem; opacity:1; z-index:99999;}
	10% {bottom:10.0rem;}
	20% {bottom:8.0rem;}
	80% {bottom:8.0rem; opacity:1; z-index:99999;}
	100% {opacity:0; z-index:0;}
}