@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; -webkit-overflow-scrolling: touch;} 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;pointer-events: none;} button:focus {outline: transparent;} 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;text-align: right;} .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; border-radius: 100%; } .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; border-radius: 100%; } /* 이미지 체크박스 */ .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: 7.2rem;height:7.2rem;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: 7.2rem;height:7.2rem; border: 1px solid #dddddd;box-sizing: border-box;position: relative; overflow: hidden; } .pics.mov::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(221,221,221,1) url('/images/mo/ico_play.png') no-repeat 50% 50%; z-index:0;} .picsThumbs { width: auto;height: auto;max-height: 7.1rem;max-width:7.1rem;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; z-index: 1; } .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: 4.5rem; } .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: #ffffff; 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:100%; height:100%; 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: #fff;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 !important;} .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 !important;} .inner.bg_beige {background-color: #ffeee7 !important;} .inner.bg_dark {background-color: #222222 !important;margin-bottom: -3rem;} .inner.bg_dark .titWrap>* {color: #ffffff !important;} .inner.bg_dark .titWrap a H2{color: #ffffff !important;} /* header, htop, btn_gnb, header.main, hmenu, bng, bnb */ header { position: fixed;left: 0;top: 0; width: 100%;z-index: 80; /*position: sticky;*/width: 100%;transition: top 0.3s;/* background-color: #fff; */ transform: translate3d(0,0,0); } /* 210526_ main.container 여백 때문에 sticky 속성 주석. */ 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 .htop.trans{position:absolute; background:transparent !important;} 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:auto;max-width: calc(100% - 14.5rem);height: 5.5rem;line-height: 5.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 {margin: 0px 0;width: 10.666rem;height: auto;line-height: 1.6rem;vertical-align: middle;} header .htop h1 a p{color: #fff;line-height: 5.5rem;font-size: 2.0rem;height: 5.5rem;display: inline;vertical-align: middle;display: -webkit-box;word-break: break-all;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;} 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: -3.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 .subs .dp_list_btn_gnbs {position: absolute;top: 0px;right: -2.0rem;width: 3.5rem;height: 4.5rem;z-index: 10;} header .subs .dp_list_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 .dp_list_btn_gnbs span {display: block;width: 24px;height: 24px;margin: 0 auto;position: relative;} header .subs .dp_list_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 .dp_list_btn_gnbs.on span i {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);} 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: 5.0rem;} .app .gnb {position: -webkit-sticky; position: sticky; top: 0px; padding-right: 3.0rem; background-color: #000; z-index: 9; /*transition: top 0.3s;*/ width: 100%;} .app .gnb {background-color:#222222; position:relative; z-index:79;} /* layout_m 재확인 */ .app .gnb.expand{padding-right: 3.0rem;} .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::before{background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #222222 100%);} /* layout_m 재확인 */ .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: 0; overflow: hidden;} main.container.mb {margin-top: -5.5rem;} main.container .inner:last-child{padding-bottom: 6.0rem; margin-bottom: 0;} /* 페이지별 헤더 세팅 */ main.app-only section.sett, main.app-only section.notice, section.content {margin-top: 5.5rem;} section.main, section.ev_list, section.dp_exhibition, section.dp_lookbook, section.dp_outlets, section.dp_submain, section.dp_hotdeal, section.br_main, section.dp_best, section.br_lookbook {margin-top: 11rem;} section.main.scr, section.ev_list.scr, section.dp_exhibition.scr, section.dp_lookbook.scr, section.dp_outlets.scr, section.dp_submain.scr, section.dp_hotdeal.scr, section.br_main.scr, section.dp_best.scr, section.br_lookbook.scr {margin-top: 5.5rem;} /* .tabbar */ .tabbar{-webkit-transform: translate(0, 80px);-ms-transform: translate(0, 80px);-moz-transform: translate(0, 80px); transform: translate(0, 80px);transition-duration: 0.25s; position: fixed;width: 100%;bottom: 0;background-color: #f8f8f8;z-index: 20; 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:#ffffff;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: 100%;height: 100%;vertical-align: top;padding:2.5rem 0;} .fullBody .fullCate::after{content: '';display: block;width: 100%;height: 1.2rem;background-color: #f5f5f5;} .fullBody .inner .flow li{width:49.0%;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;color: #666666;} .fullBody .inner:last-child .btn_group{position: fixed;bottom: 0;left: auto; right: auto;} .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 {position:relative;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::after {content: '';display: inline-block;width: 2.0rem;height: 2.0rem;background: url(/images/mo/ico_full.png) no-repeat;background-size: 0.8rem 1.4rem;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);position: absolute;right: 1.2rem;background-position: left center;} .fullBody .fullCate > li > a:active span {color: #fd4802; border-bottom: 1px solid #fd4802;} .fullBody .fullCate > li.hasCate > a::after {right: 1.8rem;background: url('/images/mo/ico_full.png') no-repeat;background-position: center;background-size: 0.8rem 1.4rem;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);} .fullBody .fullCate > li.hasCate > a.on {font-size: 1.4rem; color: #fd4802;} .fullBody .fullCate > li.hasCate > a.on span {border-bottom: 1px solid #fd4802;} .fullBody .fullCate > li.hasCate > a.on::after {background: url('/images/mo/ico_full_on.png') no-repeat;background-size: 1.4rem 0.8rem; background-position: center;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);} .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: 9%; right: 2.0rem; opacity: 0; background-color: rgba(0, 0, 0, 0.4); width: 4.1rem; height: 4.0rem; font-size: 0; z-index: 50; background:url(/images/mo/mo_btn_top.png) no-repeat;} footer .btn_top span{display: block;width: 2.4rem;height: 2.4rem;margin: 0 auto;position: relative;opacity: 1;color: #222222;font-size: 1.1rem;font-weight: 600;line-height: 3.4rem;letter-spacing: -0.025em;} 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 {margin-top: 5.5rem;} .pnb + section {margin-top: 0;} .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.3rem; letter-spacing:0; text-align:center;} .tbl.type5 table td {border-bottom:1px solid #ddd; font-weight:300;font-size:1.2rem;} .tbl.type5 table th {border-bottom:1px solid #000; font-weight:500;font-size:1.3rem;} /* 테이블 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 */ .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_cont {display:none; padding: 0; position: relative; color:#000; font-weight:200; font-size:14px; line-height:1.625;} .foldGroup .fold_head {position: relative; width:100%; border-bottom: 0;} .foldGroup .fold_head a {display:block; width:inherit; height:100%; padding:1.4rem 2rem; box-sizing:border-box;} .foldGroup.case2 .fold_answer{padding-top:1.8rem;} .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%;} .fold_head a::after , .fold_head a div::after, .fold_head .fold_tit::after {content: ''; display: block; clear: both;} .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_tit span.prod{font-size:12px; font-weight:200; color: #888; /*white-space:nowrap; text-overflow:ellipsis; overflow:hidden;*/} .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;} .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_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; margin-left: -45%; 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:0; border-top:1px solid #dddddd; /* 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: 0; border-top: 1px solid #dddddd; /* 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;} .pop_cont .nodata {padding:8.0rem 0 10.0rem; text-align:center;} .pop_cont .nodata .txt_box {color:#666; font-size:1.6rem; font-weight:300; line-height:2.6rem;} .pop_cont .nodata .txt_box::before {content:''; display:block; width:3.6rem; height:4.6rem; margin:0 auto 2.4rem; background:url('/images/mo/ico_content_none.png') no-repeat;} .pop_cont .nodata .txt_box span {color:#fd4802; font-weight:500;} .pop_cont .nodata .btn_box {margin-top:4.0rem;} .pop_cont .nodata .btn_box .btn span {color:#222; font-size:1.4rem; font-weight:300;} .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:0.5rem !important;} .ml10{margin-left:1.0rem !important;} .ml15 {margin-left:1.5rem !important;} .ml20 {margin-left:2.0rem !important;} .ml30 {margin-left:3.0rem !important;} .mr0{margin-right:0 !important;} .mr20 {margin-right:2.0rem !important;} .mt5 {margin-top:0.5.0rem !important;} .mt10 {margin-top:1.0rem !important;} .mt15 {margin-top:1.5.0rem !important;} .mt20 {margin-top:2.0rem !important;} .mt30 {margin-top:3.0rem !important;} .mt35 {margin-top:3.5rem !important;} .mt40 {margin-top:4.0rem !important;} .mt45 {margin-top:4.5rem !important;} .mt50 {margin-top:5.0rem !important;} .mt60 {margin-top:6.0rem !important;} .mt100 {margin-top:10.0rem !important;} .mb0 {margin-bottom:0 !important} .mb5 {margin-bottom:0.5rem !important} .mb10 {margin-bottom:1.0rem !important;} .mb15 {margin-bottom:1.5rem !important;} .mb20 {margin-bottom:2.0rem !important;} .mb30 {margin-bottom:3.0rem !important;} .mb40 {margin-bottom:4.0rem !important;} .mb50 {margin-bottom:5.0rem !important;} .mb60 {margin-bottom:6.0rem !important;} .mb100 {margin-bottom:10.0rem !important;} .mr5 {margin-right:0.5rem !important;} .mr10 {margin-right:1.0rem !important;} .mr15 {margin-right:1.5rem !important;} .ml10 {margin-left:1.0rem !important;} .ml35 {margin-left:3.5rem !important;} .mtm3 {margin-top:-0.3rem !important;} .mtm10 {margin-top:-1.0rem !important;} .mtm20 {margin-top:-2.0rem !important;} .mbm10 {margin-bottom:-1.0rem !important;} .mbm30{margin-bottom:-3.0rem !important;} .pt0 {padding-top:0 !important;} .pt10 {padding-top:1.0rem !important;} .pt20 {padding-top:2.0rem !important;} .pt30 {padding-top:2.0rem !important;} .pt40 {padding-top:4.0rem !important;} .pt100 {padding-top:10.0rem !important;} .pl0 {padding-left:0 !important;} .pl10 {padding-left:1.0rem !important;} .pr20 {padding-right:2.0rem !important;} .pb10 {padding-bottom:1.0rem !important;} .pb20 {padding-bottom:2.0rem !important;} .pb30 {padding-bottom:3.0rem !important;} .pb40 {padding-bottom:4.0rem !important;} .pb50 {padding-bottom:5.0rem !important;} .pb100 {padding-bottom:10.0rem !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;border-radius: 0 0 0.2rem 0; } .shape:after{ content: "";top: 0;right: -0.94rem;position: absolute; border-left: 1.0rem solid #222222;border-bottom: 1.0rem 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: 1.0rem;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: 4.0rem; } .shape.dealdetail span{ line-height: 1;text-align: center;width: 100%;display: inline-block;text-indent: 0;margin-left: 0.5rem; } /* 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{min-height: 58vh;} .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;} }