@charset "UTF-8";
@import url("font.css");
@font-face {
font-family: 'Arita dotum';
font-style: normal;
font-weight: 400;
src: url(../../font/Arita-dotum-Medium.woff) format('woff');
}
@font-face {
font-family: 'Arita dotum';
font-style: normal;
font-weight: 700;
src: url(../../font/Arita-dotum-Bold.woff) format('woff');
}
/* reset */
* {outline:0}
*,
*:before,
*:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html,body,div,span,iframe,object,embed,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,a,abbr,address,b,bdo,blockquote,cite,code,del,dfn,p,pre,em,i,ins,kbd,q,s,samp,strong,sub,sup,u,var,img,map,area,form,fieldset,legend,input,textarea,select,button,label,keygen,table,caption,thead,tbody,tfoot,tr,th,td,article,aside,audio,bdi,canvas,datalist,details,dialog,figcaption,figure,footer,header,main,mark,menu,menuitem,meter,nav,output,progress,section,rp,rt,ruby,summary,time,video,wbr{margin:0;padding:0;}
html, body{width:100%; height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body{color:#333; font-family: 'Arita dotum'; font-size:14px; line-height:14px; }
input,button,select,textarea{-webkit-appearance: none;-webkit-border-radius: 0px; font-family: 'Arita dotum';}
input:focus,
button:focus,
select:focus { outline: none; }
select:required:invalid {color: #888;}
option[value=""][disabled] {display: none;}
option {color: #333;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance: none;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
-webkit-text-fill-color: #000 !important;
}
a{text-decoration:none; color:#333;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display:block;}
input, select, label, img, button{vertical-align:middle;}
table{border-collapse:collapse; border-spacing:0;}
img, fieldset{border:0; width:100%; min-width:0;}
ul{list-style:none;}
a *,button{cursor:pointer;}
a,button,button:focus,button:active,
label,label:focus,label:active,
select,select:focus,select:active { -webkit-tap-highlight-color: rgba(255,255,255,0); }
button{background:transparent; border:0; border-radius: 0;}
caption {width:0; height:0; font-size:0; line-height:0; text-indent:-9999px}
em {font-style: normal;}
@media print {
body {-webkit-print-color-adjust: exact;}
}
/* blind */
.sr_only {overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; font-size:0; line-height:0; text-indent:-9999px}
.blind {position:absolute; top:0; left:0; text-indent:-9999px; width:0; height:0; font-size:0; line-height:0}
.none {display:none !important}
/* hidden-element */
.hidden-element { display: none !important; }
.overflow-hidden { overflow: hidden !important; }
.modal-open-body { position: fixed !important; }
.visibility-hidden { visibility: hidden !important; opacity: 0 !important; }
/* text color line-height */
del{color:#999;}
.color_black{color:#000;}
.color_dark_gray{color:#333;}
.color_gray{color:#666;}
.color_light_gray{color:#999;}
.color_primary{color:#782fff !important;}
.color_warning{color:#f00;}
.color_blue{color:#1c5cff;}
.color_orange, .color_em, .color_strong { color: #ff6708 !important; }
/* text etc */
.ellipsis{overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
.ellipsis.row2{display: -webkit-box; max-height:2.5em; white-space:normal; word-break: break-all; -webkit-line-clamp:2; -webkit-box-orient: vertical; line-height:1.3;}
.link span{text-decoration: underline;}
.text_notice{position:relative; font-size: 13px; padding-left: 20px;}
.text_notice:before{content:''; position:absolute; top:3px; left:0; width: 14px; height: 14px; margin-right: 5px; background: url(../../images/common/ico.png) no-repeat -75px -95px; background-size: 200px; vertical-align: middle}
.text-bold { font-weight: bold !important; }
.text-notice {position:relative; padding-bottom: 20px; font-size: 12px; line-height: 16px; color: #666; }
/* align text */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
/* background */
.bg_gray{background: #eee !important;}
.bg_white{background: #fff !important;}
/* */
.none_num {color:#484848 !important}
.flag{display:inline-block; height: 20px; padding: 0 5px; font-size: 11px; line-height: 18px;vertical-align: middle; font-weight: bold;}
.flag.purple {border: 1px solid #782fff; color:#782fff; margin-left: 12px}
.flag.blue {border:1px solid #2f5bff; color:#2f5bff;}
.no_after::after {display:none}
.align_middle {vertical-align: middle !important}
.mg0 {margin: 0 !important}
.mgt8 {margin-top: 8px !important}
.mgt10 {margin-top: 10px !important}
.mgt20 {margin-top: 20px !important}
.mgt25 {margin-top: 25px !important}
.mgt30 {margin-top: 30px !important}
.mgt35 {margin-top: 35px !important}
.mgb10 {margin-bottom: 10px !important}
.mgb20 {margin-bottom: 20px !important}
.mgb100 {margin-bottom: 100px !important}
.pd0 {padding: 0 !important}
.pdt5 {padding-top: 5px !important}
.pdt10 {padding-top: 10px !important}
.pdt15 {padding-top: 15px !important}
.pdt20 {padding-top: 20px !important}
.pdt25 {padding-top: 25px !important}
.pdt30{padding-top:30px !important}
.pdt38{padding-top:38px !important}
.pdt40{padding-top:40px !important}
.pdt50{padding-top:50px !important}
.pdb50 {padding-bottom: 50px !important}
.pdb60 {padding-bottom: 60px !important}
.pdlr20 {padding-left:20px !important; padding-right:20px !important}
.font_xs {font-size: 11px;}
.font_sm {font-size: 13px;}
/* icon */
[class*="ico_"]{display:inline-block; vertical-align: middle; background:url(../../images/common/ico.png) no-repeat; background-size:200px;}
/* icon close */
[class*="ico_close"]{width:17px; height:17px; background-position:-18px 0;}
.ico_close_w{background-position:-35px 0;}
[class*="ico_close_m"]{width :11px; height:11px;}
.ico_close_m_p{background-position:-70px 0;}
[class*="ico_close_s"]{width:10px; height:10px; background-position:-50px 0;}
.ico_close_s_w{background-position:-60px -2px;}
[class*="ico_close_l"]{width:17px; height:17px;}
.ico_close_l_w{background-position:0 0;}
/* icon arrow */
[class*="ico_arr"]{width:7px; height:12px; background-position:0 -40px;}
.ico_arr2{width:8px; height:12px; background-position:-10px -40px;}
.ico_arr_p{background-position:-20px -40px;}
.ico_arr_s{width:4px; height:8px; background-position:-85px 0}
.ico_arr_w{width:10px; height:16px; background-position:-120px -15px}
.ico_up{width:12px; height:8px; background-position:0 -30px;}
.ico_down{width:12px; height:8px; background-position:0 -20px;}
/* icon check */
[class*="ico_check"]{width:13px; height:10px; background-position:-90px 0;}
.ico_check.on,
.ico_check_w{background-position:-105px 0;}
.ico_check_l_w{width:21px; height:14px; background-position:-135px -15px;}
/* icon search */
[class*="ico_search"]{width:22px; height:20px; background-position:0 -80px;}
.ico_search_p{background-position:-25px -80px;}
[class*="ico_search_l"]{width:24px; height:24px; background-position:-50px -80px;}
/* toggle icon : heart thumb star filter view */
.ico_heart{width:24px; height:21px; background-position:100% -40px;}
.ico_heart.on,
input:checked + label.ico_heart{background-position:100% -65px;}
.ico_heart_s{width:22px; height:19px; background-position:100% 0;}
.ico_heart_s.on,
input:checked + label.ico_heart_s{background-position:100% -20px;}
.ico_heart_w{width:24px; height:21px; background-position:-75px -45px;}
.ico_heart_w.on,
input:checked + label.ico_heart_w{background-position:-75px -70px;}
.ico_thumb{width:20px; height:20px; background-position:100% -140px;}
.ico_thumb.on,
input:checked + label.ico_thumb{background-position:100% -165px;}
.ico_thumb_s{width:16px; height:16px; background-position:-160px -165px;}
.ico_star{width:15px; height:15px; background-position: -160px -40px}
.ico_star.on,
input:checked + label.ico_star{background-position: -160px -55px}
[class^="ico_star_s"]{width:11px; height:11px; background-position: -160px -70px}
.ico_star_s.on,
input:checked + label.ico_star_s{background-position: -160px -85px}
.ico_star_s_w{background-position: -160px -100px}
.ico_star_s_w.on,
input:checked + label.ico_star_s_w{background-position: -160px -115px}
.ico_star_l{width:18px; height:18px; background-position: -160px 0}
.ico_star_l.on,
input:checked + label.ico_star_l{background-position: -160px -20px}
.ico_star_xl{width:23px; height:22px; background-position: 100% -185px}
.ico_star_xl.on,
input:checked + label.ico_star_xl{background-position: 100% -210px}
.ico_filter{width:14px; height:14px; background-position:-45px -60px;}
.ico_filter.on{background-position:-60px -60px;}
.ico_view{width:20px; height:16px; background-position:0 -60px}
.ico_view.col2{width:16px; background-position:-25px -60px}
/* 아이콘 + - */
[class*="ico_oper"]{position:relative; width:15px; height:15px; background:none;}
[class*="ico_oper"]:after,
[class*="ico_oper"]:before{content:''; position:absolute; background:#484848;}
[class*="ico_oper"]:before{top:50%; left:0; width:100%; height:1px; margin-top: -1px;}
[class*="ico_oper"].plus:after{top:0; left:50%; width:1px; height:100%;}
.ico_oper_w:after,
.ico_oper_w:before{background:#fff;}
/* icon etc */
.ico_share{width:23px; height:23px; background-position:100% -115px;}
.ico_sort{width:13px; height:13px; background-position:-40px -40px}
.ico_cart{width:25px; height:26px; background-position: 0 -110px;}
.ico_menu{width:19px; height:14px; background-position:-100px -110px;}
.ico_menu_w{width:24px; height:18px; background-position:-75px -110px;}
.ico_chat{width:24px; height:23px; background-position:-50px -109px;}
.ico_review{width:16px; height:14px; background-position:-50px -135px;}
.ico_set{width:20px; height:20px; background-position:0 -140px;}
.ico_back{width:20px; height:18px; background-position:-75px -20px;}
.ico_back_w{width:22px; height:17px; background-position:-25px -110px;}
.ico_navi{width:11px; height:19px; background-position:-15px -20px;}
.ico_navi.next{background-position:-30px -20px;}
.ico_navi_s{width:10px; height:17px; background-position:-45px -20px;}
.ico_navi_s.next{background-position:-60px -20px;}
.ico_navi_p{width: 11px; height: 20px; background-position: -165px -130px;}
.ico_navi_p.prev{transform:rotate(180deg);}
.ico_tip{width:24px; height:21px; background-position:-25px -140px;}
.ico_cs{width:22px; height:20px; background-position:-100px -130px;}
.ico_notice{width:14px; height:14px; background-position: -75px -95px;}
.ico_list{width:11px; height: 12px; background-position: -125px -125px;}
.ico_cart_in{width: 26px; height: 21px; background-position: -110px -155px;}
.ico_point{width: 23px; height: 23px; background-position: -60px -200px;}
.ico_delivery{width: 23px; height: 23px; background-position:-110px -200px;}
.ico_pay{width: 23px; height: 23px; background-position: -85px -200px;}
.ico_gift{width: 21px; height: 22px; background-position: -136px -175px;}
.ico_award{width: 22px; height: 17px; background-position: -110px -180px;}
.ico_trash{width: 19px; height: 18px; background-position: -155px -205px;}
.ico_p{width: 12px; height: 12px; background-position: 0 -225px;}
.ico_p_s{width: 11px; height: 11px; background-position: -15px -225px;}
.ico_p_b_s{width: 11px; height: 11px; background-position: -30px -225px;}
.ico_clock{width: 21px; height: 23px; background-position: -45px -225px;}
.ico_qmark{width: 15px; height: 15px; background-position: -165px -150px;}
.ico_edit{width: 17px; height: 17px; background-position: -135px -225px;}
.ico_trash_s{width: 17px; height: 16px; background-position: -155px -225px;}
.ico_seller{width: 30px; height: 23px; margin-left:-3px; margin-right:11px !important; background-position: -0 -250px;}
/* icon large */
[class*="ico_lg"]{width:105px; height:105px; background:url(../../images/common/ico_large.png) no-repeat; background-size:100%;}
.ico_lg_cart{}
.ico_lg_good{background-position:0 -105px;}
button * + [class^="ico_"]{margin-top:-4px;}
/* badge */
.badge{display: inline-block; height: 18px; padding: 0 5px; vertical-align: top; font-size: 12px !important; font-weight: normal; background-color:#000; color:#fff; letter-spacing: 0; line-height:18px; font-style:normal}
.badge.special{background-color:#782fff;}
.badge.deal{background-color:#ccc; color:#fff;}
.badge.price{background-color:#2fdfff; color:#fff;}
.badge.prd_special {background:#2fdfff; color:#fff}
.badge.employees {background-color:#12aecb; color:#fff;}
.badge.prd_special_new {background-color:#0cc6ff; color:#fff;}
.badge.md_choice {background-color:#febf17; color:#fff;}
.badge.delivery {background-color:#57caef; color:#fff;}
/* 위에것 삭제대기 */
.badge.detail {background-color:#eee; color:#333}
.badge.black {background-color:#333; color:#fff}
.badge.darkgray {background-color:#666; color:#fff}
.badge.sky {background-color:#12c2ff; color:#fff}
.badge-detail {
display: table; width:40px; height:40px; background-color: #333; text-align: center;
color: #fff; font-size:12px !important; font-weight: bold; line-height: 1; vertical-align: top;
}
.main-banner .badge-detail {width:34px; height:34px; font-size:11px !important}
.badge-detail + .badge-detail { margin-top: 2px; }
.badge-detail > .badge-text{ display: table-cell; vertical-align: middle; }
.badge-thumbnail {
display: table; width:34px; height:34px; text-align: center;
color: #fff; font-size:12px !important; font-weight: bold; line-height: 1; vertical-align: top;
}
.badge-thumbnail > .badge-text{ display: table-cell; vertical-align: middle; }
.badge-thumbnail.black { background-color: #333; }
.badge-thumbnail.green { background-color: #71c559; }
.badge-thumbnail.orange { background-color: #f26615; }
.badge-thumbnail.sky { background-color: #2fbff1; }
.badge-thumbnail.purple { background-color: #8e38ef; font-size:11px !important; }
.badge-thumbnail.ocher { background-color: #d58e2d; }
.badge-thumbnail.red { background-color: #df3a3a; }
.badge-thumbnail.blue { background-color: #3868dc; }
.badge-thumbnail.trans { background-color: transparent; }
/* .review-range */
.review-range { position: relative; }
.review-range .item-list { padding: 0; }
.review-range .item { position: relative; height: 55px; }
.review-range .item-title {
display: inline-block; width: 75px; height: 25px; vertical-align: middle; line-height: 25px; text-align: center;
background-color: #fff; border: 1px solid #999; color: #333; font-size: 12px; border-radius: 12.5px;
overflow: hidden; white-space: nowrap;
}
.review-range .range-wrap { position: absolute; left: 100px; top: 0; right: 0; height: 5px; background-color: #ddd; }
.review-range .range-wrap .range { position: absolute; top: 0; width: 10%; height: 5px; background-color: #12c2ff; }
.review-range .range-wrap .range-text-left,
.review-range .range-wrap .range-text-right { position: absolute; top: 100%; padding-top: 7px; font-size: 12px; color: #333; line-height: 1.2; white-space: nowrap; overflow: hidden; width: 50%; }
.review-range .range-wrap .range-text-left { left: 0; text-align: left; }
.review-range .range-wrap .range-text-right { right: 0; text-align: right; }
.review-range .range-wrap.step-00 .range { width: 0%; }
.review-range .range-wrap.step-01 .range { left: 0%; }
.review-range .range-wrap.step-02 .range { left: 10%; }
.review-range .range-wrap.step-03 .range { left: 20%; }
.review-range .range-wrap.step-04 .range { left: 30%; }
.review-range .range-wrap.step-05 .range { left: 40%; }
.review-range .range-wrap.step-06 .range { left: 50%; margin-left: -5%; }
.review-range .range-wrap.step-07 .range { left: 50%; }
.review-range .range-wrap.step-08 .range { left: 60%; }
.review-range .range-wrap.step-09 .range { left: 70%; }
.review-range .range-wrap.step-10 .range { left: 80%; }
.review-range .range-wrap.step-11 .range { left: 90%; }
/* ranking-star-step */
.ranking-star-step { display: inline-block; vertical-align: middle; }
.ranking-star-step .step-wrap {
display: inline-block; height: 25px; width: 121px; vertical-align: middle; text-align: left;
background-position: 0 0;
background-size: 121px 25px;
background-repeat: no-repeat;
background-image: url(../../images/common/bg-icon-ranking-star-off.png);
}
.ranking-star-step .step {
display: inline-block; height: 25px; vertical-align: middle;
background-position: 0 0;
background-size: 121px 25px;
background-repeat: no-repeat;
background-image: url(../../images/common/bg-icon-ranking-star-on.png);
}
.ranking-star-step.step-00 .step {width: 0%;}
.ranking-star-step.step-01 .step {width: 10.5%;}
.ranking-star-step.step-02 .step {width: 21.5%;}
.ranking-star-step.step-03 .step {width: 30.5%;}
.ranking-star-step.step-04 .step {width: 41%;}
.ranking-star-step.step-05 .step {width: 50%;}
.ranking-star-step.step-06 .step {width: 60.5%;}
.ranking-star-step.step-07 .step {width: 70.5%;}
.ranking-star-step.step-08 .step {width: 80.5%;}
.ranking-star-step.step-09 .step {width: 90%;}
.ranking-star-step.step-10 .step {width: 100%;}
/* ranking-star */
.ranking-star { display: inline-block; font-size: 0; vertical-align: middle; }
.ranking-star .ficon { font-size: 12px; color: #ddd; }
.ranking-star .ficon:first-child { margin-left: -1px; }
.ranking-star.star1 .ficon:nth-child(1),
.ranking-star.star2 .ficon:nth-child(1),
.ranking-star.star2 .ficon:nth-child(2),
.ranking-star.star3 .ficon:nth-child(1),
.ranking-star.star3 .ficon:nth-child(2),
.ranking-star.star3 .ficon:nth-child(3),
.ranking-star.star4 .ficon:nth-child(1),
.ranking-star.star4 .ficon:nth-child(2),
.ranking-star.star4 .ficon:nth-child(3),
.ranking-star.star4 .ficon:nth-child(4),
.ranking-star.star5 .ficon:nth-child(1),
.ranking-star.star5 .ficon:nth-child(2),
.ranking-star.star5 .ficon:nth-child(3),
.ranking-star.star5 .ficon:nth-child(4),
.ranking-star.star5 .ficon:nth-child(5) { color: #333; }
/* 랭킹 */
.ranking-star.sky.font-25 { display: block; text-align: center; }
.ranking-star.sky .ficon { color: #ddd; }
.ranking-star.sky.font-25 .ficon { font-size: 25px; }
.ranking-star.sky.font-15 .ficon { font-size: 15px; }
.ranking-star.sky .ficon:first-child { margin-left: 0; }
.ranking-star.sky.star1 .ficon:nth-child(1),
.ranking-star.sky.star2 .ficon:nth-child(1),
.ranking-star.sky.star2 .ficon:nth-child(2),
.ranking-star.sky.star3 .ficon:nth-child(1),
.ranking-star.sky.star3 .ficon:nth-child(2),
.ranking-star.sky.star3 .ficon:nth-child(3),
.ranking-star.sky.star4 .ficon:nth-child(1),
.ranking-star.sky.star4 .ficon:nth-child(2),
.ranking-star.sky.star4 .ficon:nth-child(3),
.ranking-star.sky.star4 .ficon:nth-child(4),
.ranking-star.sky.star5 .ficon:nth-child(1),
.ranking-star.sky.star5 .ficon:nth-child(2),
.ranking-star.sky.star5 .ficon:nth-child(3),
.ranking-star.sky.star5 .ficon:nth-child(4),
.ranking-star.sky.star5 .ficon:nth-child(5) { color: #12c2ff; }
.ranking-star.sky.font-25 .number { display:inline-block; margin-left:5px; font-weight:bold; font-size: 21px; color: #12c2ff; vertical-align: -2px; }
.ranking-star.sky.font-15 .number { display:inline-block; margin-left:5px; font-weight:bold; font-size: 14px; color: #12c2ff; vertical-align: -1px; }
/* 테이블 */
.data_table{width:100%; table-layout: fixed; border-top:1px solid #ddd;}
.data_table th{padding:15px 10px; border-bottom:1px solid #ddd; font-weight:bold; color: #333; white-space: nowrap;}
.data_table tbody th,
.data_table td{padding:15px 10px; line-height:1.5em; border-bottom:1px solid #ddd; color:#666;font-weight: 300;}
.data_table tr>* +*{border-left:1px solid #ddd;}
.data_table tr.selected>*{background:#f2f2f2;}
.data_table .border_left{border-left:1px solid #ddd;}
.data_table .check_wrap>label{font-size: inherit;}
.data_table.th_gray{border-top:0;}
.data_table.th_gray th{padding:13px 10px; color: #000; background: #ddd;}
.data_table.th_gray tbody th,
.data_table.th_gray td{padding:12px 10px; border-left: 0; color:#333; font-weight: normal;}
.data_table.tbody_border { border-top: 3px solid #333; border-collapse: separate; }
.data_table.tbody_border th,
.data_table.tbody_border td { padding-top: 18px; padding-bottom: 18px; font-size: 12px; border-left: none; color: #666; }
.data_table.tbody_border th { font-weight: bold; }
.textarea>textarea{width:100%; height:100%; padding:15px; font-size:14px; border:1px solid #ddd; }
.textarea>textarea:focus{border-color:#333; outline: 0;}
textarea:focus {outline:0}
/* placeholder */
::-webkit-input-placeholder {color: #999;}
::-moz-placeholder {color: #999;}
:-ms-input-placeholder {color: #999;}
:-moz-placeholder {color: #999;}
/* animation */
.on .rotate{-webkit-animation-name:rotateRecomm;animation-name:rotateRecomm;}
/* 속도 */
.animated100ms{-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.animated250ms{-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.animated500ms{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}
/* 트렌지션 */
.trans300ms{-webkit-transition-duration:.3s;transition-duration:.3s;}
/* 버튼 클릭시 효과 (크기별 분류) */
@-webkit-keyframes push85{
50%{-webkit-transform:scale(.85);transform:scale(.85);}
}
@keyframes push85{
50%{-webkit-transform:scale(.85);transform:scale(.85);}
}
@-webkit-keyframes push85-off{
50%{-webkit-transform:scale(.85);transform:scale(.85);}
}
@keyframes push85-off{
50%{-webkit-transform:scale(.85);transform:scale(.85);}
}
@-webkit-keyframes kf-push95{
50%{-webkit-transform:scale(.95);transform:scale(.95);}
}
@keyframes kf-push95{
50%{-webkit-transform:scale(.95);transform:scale(.95);}
}
@-webkit-keyframes kf-push95-off{
50%{-webkit-transform:scale(.95);transform:scale(.95);}
}
@keyframes kf-push95-off{
50%{-webkit-transform:scale(.95);transform:scale(.95);}
}
/* 추천하기 */
@-webkit-keyframes rotateRecomm{
50%{-webkit-transform:scale(1.5) rotate(-10deg);transform:scale(1.5) rotate(-10deg);}
}
@keyframes rotateRecomm{
50%{-webkit-transform:scale(1.5) rotate(-10deg);transform:scale(1.5) rotate(-10deg);}
}
/* 상품상세 - 장바구니 담기 완료 */
@-webkit-keyframes zoomIn{
from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3);}
50%{opacity:1;}
}
@keyframes zoomIn{
from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3);}
50%{opacity:1;}
}
@-webkit-keyframes zoomOut{
from{opacity:1;}
50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3);}
to{opacity:0;}
}
@keyframes zoomOut{
from{opacity:1;}
50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3);}
to{opacity:0;}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;}
.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;}
/* 상품상세 - 장바구니 담기 완료 */
@-webkit-keyframes cartIn{
from{opacity:0;-webkit-transform:translateY(-15px);transform:translateY(-15px);}
to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes cartIn{
from{opacity:0;-webkit-transform:translateY(-15px);transform:translateY(-15px);}
to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
}
@-webkit-keyframes cartOut{
from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
to{opacity:0;-webkit-transform:translateY(-15px);transform:translateY(-15px);}
}
@keyframes cartOut{
from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
to{opacity:0;-webkit-transform:translateY(-15px);transform:translateY(-15px);}
}
.cartIn{-webkit-animation-name:cartIn;animation-name:cartIn;}
.cartOut{-webkit-animation-name:cartOut;animation-name:cartOut;}
/* 20180713 */
/* radio */
/* Default */
.rdo_wrap {overflow:hidden;}
.rdo_wrap span {float:left; margin-right:45px}
.rdo_wrap span:last-child {margin-right:0}
.rdo_h30 input[type="radio"] {margin:0; width:30px; height:30px; border:none; background-color:transparent; background:url('../../images/common/bg_rdo_type01.png') no-repeat 0 0; background-size:30px auto}
.rdo_h30 input:checked[type="radio"]{width:30px; height:30px; background:url('../../images/common/bg_rdo_type01.png') no-repeat 0 -31px; background-size:30px auto;}
.rdo_h30 input:checked[type="radio"] + label {color:#782fff}
.rdo_h30 input[type="radio"] + label .rdo_sub_txt {display:block; margin-top:8px; font-style:normal}
.rdo_h30 input:checked[type="radio"] + label .rdo_sub_txt {color:#222}
.rdo_h30 input:disabled[type="radio"]{width:30px; height:30px; background:url('../../images/common/bg_rdo_type01.png') no-repeat 0 -62px; background-size:30px auto;}
.rdo_h30 input:disabled[type="radio"] + label {color:#999}
.rdo_h30 label {display:inline-block; margin-left:10px; color:#333; font-size:15px}
/* Type 2 */
.rdo_h30.font_l label {margin-left:12px; font-size:22px}
.rdo_wrap.type_vertical span {float:none; display:block; height:77px; padding:26px 0 29px 0; margin-right:0}
/* Type 3 */
.rdeo_h30.label_line2 {float:left; margin:42px 0 0 0;}
.rdeo_h30.label_line2 span:first-child {margin-top:0}
/* checkbox */
.chk_wrap {overflow:hidden}
.chk_wrap span {float:left; margin-right:55px}
.chk_wrap.vertical span {display:block; float: inherit; margin-right: 0;}
.chk_h28:last-child {margin-right:0}
.chk_h28 input[type="checkbox"] {margin:0; width:28px; height:28px; border:none; background-color:transparent; background:url('../../images/common/bg_chk01.png') no-repeat 0 0; background-size:79px auto}
.chk_h28 input:checked[type="checkbox"]{width:28px; height:28px; background:url('../../images/common/bg_chk01.png') no-repeat 0 -29px; background-size:79px auto;}
.chk_h28 input:disabled[type="checkbox"]{width:28px; height:28px; background:url(../../images/common/bg_chk01.png) no-repeat 0 -87px; background-size:79px auto;}
.chk_h28 input:disabled[type="checkbox"] + label {color:#999}
.chk_h28 label {margin-left:13px; color:#333; font-size:19px}
.chk_h28.f_mid label {font-size:16px}
.chk_h28.label_col01 input:checked[type="checkbox"] {width:28px; height:28px; background:url('../../images/common/bg_chk01.png') no-repeat 0 -58px; background-size:79px auto;}
/* small chk */
.chk_h23:last-child {margin-right:0}
.chk_h23 input[type="checkbox"] {margin:0; width:23px; height:23px; border:none; background-color:transparent; background:url('../../images/common/bg_chk01.png') no-repeat -30px 0; background-size:79px auto}
.chk_h23 input:checked[type="checkbox"]{width:23px; height:23px; background:url('../../images/common/bg_chk01.png') no-repeat -30px -24px; background-size:79px auto;}
.chk_h23 input:disabled[type="checkbox"]{width:23px; height:23px; background:url(../../images/common/bg_chk01.png) no-repeat -30px -48px; background-size:79px auto;}
.chk_h23 input:disabled[type="checkbox"] + label {color:#999}
.chk_h23 label {margin-left:10px; color:#333; font-size:14px}
/* mid chk */
.chk_h25:last-child {margin-right:0}
.chk_h25 input[type="checkbox"] {margin:0; width:25px; height:25px; border:none; background-color:transparent; background:url('../../images/common/bg_chk_h25.png') no-repeat 0 0; background-size:100%;}
.chk_h25 input:checked[type="checkbox"]{width:25px; height:25px; background:url('../../images/common/bg_chk_h25_checked.png') no-repeat 0 0; background-size:100%;}
.chk_h25 input:disabled[type="checkbox"]{width:25px; height:25px; background:url(../../images/common/bg_chk_h25_disabled.png) no-repeat 0 0; background-size:100%;}
.chk_h25 input:disabled[type="checkbox"] + label {color:#999}
.chk_h25 label {margin-left:10px; color:#222; font-size:14px}
/* Round chk */
.chk_wrap span.chk_round_h24 {margin-right:25px}
.chk_round_h24:last-child {margin-right:0}
.chk_round_h24 input[type="checkbox"] {margin:0; width:24px; height:24px; border:none; background-color:transparent; background:url('../../images/common/bg_chk01.png') no-repeat -55px 0; background-size:79px auto}
.chk_round_h24 input:checked[type="checkbox"]{width:24px; height:24px; background:url('../../images/common/bg_chk01.png') no-repeat -55px -24px; background-size:79px auto;}
.chk_round_h24 input:disabled[type="checkbox"]{width:24px; height:24px; background:url('../../images/common/bg_chk01.png') no-repeat -55px -48px; background-size:79px auto;}
.chk_round_h24 input:disabled[type="checkbox"]+ label {color:#999}
.chk_round_h24 label {margin-left:8px; color:#333; font-size:15px}
/* input text */
.input_h48_gray input {width:100%; height:47px; padding:16px 15px 13px 10px; border:1px solid #ddd; color:#333; font-size:14px}
.input_h48_gray.err input {border:1px solid #f00}
.input_h48_gray input:focus {border:1px solid #000; outline:0}
.input_h48_gray input:disabled[type="text"] {background:#ddd}
.input_h48_gray input:disabled[type="text"]::-webkit-input-placeholder {color: #fff;}
.input_h48_purple input {width:100%; height:48px; padding:24px 15px; border:0; border-bottom: 1px solid #782fff; color:#010101; font-size: 16px}
/* checkbox new */
.ui-checkbox { position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; font-size: 14px; line-height: 1.2; }
.ui-checkbox.full { display:block; width:100%; }
.ui-checkbox.full + .ui-checkbox.full { margin-top: 25px; }
.ui-checkbox.inline + .ui-checkbox.inline { margin-left: 10px; }
.ui-checkbox .input-check { position: absolute; left:0; z-index: 1; width: 25px; height: 25px; opacity: 0; }
.ui-checkbox .check-icon { display: inline-block; padding-left: 35px; vertical-align: middle; line-height: 1; }
.ui-checkbox .check-icon .ficon {
position: absolute; left:0; width: 25px; height: 25px; padding: 3.5px 3px 0; text-align: center;
background-color: #fff; color: #fff; font-size: 15px !important; border: 1px solid #bbb; line-height: 15px;
-webkit-transition: background-color 0.15s;transition: background-color 0.15s;
}
.ui-checkbox .check-icon .text { display: inline-block; vertical-align: -6px; font-size: 14px; line-height: 25px; font-weight: normal; }
.ui-checkbox .input-check:checked + .check-icon .ficon { background-color: #333; border: 1px solid #333; }
.ui-checkbox .input-check:disabled + .check-icon .ficon { background-color: #f3f3f3; border: 1px solid #f3f3f3; color: #f3f3f3; }
.ui-checkbox .input-check:checked:disabled + .check-icon .ficon { color: #ddd; }
.ui-checkbox .input-check:disabled + .check-icon .text { color: #bbb; }
.ui-checkbox.active .check-icon .ficon { background-color: #333; border: 1px solid #333; }
/* circle */
.ui-checkbox.circle .check-icon .ficon { border-radius: 50%; }
/* radio new */
.ui-radio { position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; font-size: 14px; line-height: 1.2; }
.ui-radio.full { display:block; width:100%; }
.ui-radio.full + .ui-radio.full { margin-top: 25px; }
.ui-radio.inline + .ui-radio.inline { margin-left: 10px; }
.ui-radio .input-radio { position: absolute; top:0; left:0; z-index: 1; width: 25px; height: 25px; opacity: 0; }
.ui-radio .radio-icon { display: inline-block; padding-left: 35px; margin:0; vertical-align: middle; line-height: 1; }
.ui-radio .radio-icon:before { content:''; position: absolute; left:0; top:0; width: 25px; height: 25px; background-color: #fff; border: 1px solid #bbb; border-radius: 50%; }
.ui-radio .radio-icon .ficon {
position: absolute; left:5px; top:5px; z-index: 2; width: 15px; height: 15px; margin:0; background-color: #fff;
border-radius: 50%; transition: background-color 0.3s;
}
.ui-radio .radio-icon .text { display: inline-block; margin:0; vertical-align: -6px; font-size: 14px; line-height: 25px; font-weight: normal; }
.ui-radio .input-radio:checked + .radio-icon:before { background-color: #ddd; border: none;}
.ui-radio .input-radio:checked + .radio-icon .ficon { background-color: #12c2ff; }
.ui-radio .input-radio:checked + .radio-icon .text { color: #333; } /* 20200110 color: #12c2ff; */
.ui-radio .input-radio:disabled + .radio-icon:before { background-color: #f3f3f3; border: none; }
.ui-radio .input-radio:disabled + .radio-icon .ficon { background-color: #f3f3f3; }
.ui-radio .input-radio:checked:disabled + .radio-icon .ficon { background-color: #f3f3f3; }
.ui-radio .input-radio:disabled + .radio-icon .text { color: #ddd; }
.ui-radio.active .radio-icon .ficon { background-color: #12c2ff; }
/* select */
.select_h48_gray {display:block; position:relative; height:48px; background:#fff;}
/* .select_h48_gray:after{content:''; position:absolute; top:50%; right:13px; width:10px; height:7px; margin-top:-3px; background:url(../../images/common/ico.png) no-repeat -55px -50px; background-size:200px;}
.select_h48_gray.disabeld:after{opacity:.3;} */
.select_h48_gray .ficon { position: absolute; top: 10px; right: 15px; z-index: 1; font-size: 15px; color: #333; line-height: 30px; }
.select_h48_gray.disabeld .ficon {opacity:.3;}
.select_h48_gray select{position:relative; z-index:1; width:100%; height:100%; padding:0 30px 0 15px; -webkit-appearance: none; background:transparent; font-size:14px; color:#333; line-height: 50px; border:1px solid #ddd}
.select_h48_gray select:focus{border-color:#000; outline: 0;}
.select_h48_gray label{position:absolute; top:0; left:0; display:table; width:100%; height:100%; padding:0 30px 0 15px;}
.select_h48_gray label>*{display:table-cell; vertical-align: middle; line-height: 1.3; word-break: keep-all;}
.select_h48_gray>label + select{opacity:0;}
/* input_group */
.input_group {width:100%; display:table}
.input_group .input_wrap {display:table-cell}
.input_group .sel_space01 {display:table-cell; width:10px; text-align:center}
/* button */
.btn_h46_bk {display:block; height:46px;width: 100%; background:#000; color:#fffefe; font-size:16px; text-align:center; font-weight:bold; line-height: 46px}
.btn_h50_wh {display:block; width:100%; height:50px; background:#fff; border:1px solid #eaeaea; color:#333; font-size:15px; text-align:center; font-weight: bold; line-height: 50px}
.btn_h50_gy {display:block; width:100%; padding:17px 0; height:50px; background:#b1b1b1; color:#fff; font-size:15px; text-align:center; font-weight: bold;}
/* .btn_h50_pp {display:block; width:100%; padding:17px 0; height:50px; background:#782fff; border:1px solid #782fff; color:#fff; font-size:15px; line-height:15px; text-align:center;font-weight: bold;} */
.btn_h50_pp {display:block; width:100%; height:60px; background:#333; color:#fff; font-size:16px; font-weight: bold;}
.btn_h50_pu {display: block; width: 100%; height: 50px; background: #fff; border: 1px solid #782fff; color: #782fff; font-size: 14px; line-height: 10px; text-align: center; line-height: 48px}
.btn_h50_bk {display:block; width:100%; height:50px; background:#000; color:#fff; font-size:15px; text-align:center; font-weight:bold; line-height: 50px}
.btn_h50_bl {display:block; width:100%; height:60px; background:#12c2ff; color:#fff; font-size:16px; font-weight: bold;}
.btn_h50_wh.round,
.btn_h50_pp.round,
.btn_h50_pu.round,
.btn_h55_wh.round,
.btn_h46_bk.round,
.btn_h50_bk.round {border-radius: 3px}
.btn_h50_pp:hover {color:#fff}
.btn_h50_pp.no_round {border-radius:0}
.btn_h32_gradient {display:inline-block; height:32px; padding:9px 10px 9px 10px; border:1px solid #ccc; border-radius:3px; color:#000; background: linear-gradient(to bottom, #f7f7f7 0%,#e7e7e7 100%);}
.btn_h32_gradient.disabled {background:#ccc; color:#fff}
/* .btn_h50_pp:disabled {background: #eee !important; color: #fff !important; border:1px solid #eee} */
.btn_h50_pp:disabled {background: #bbb}
.btn_h50_pp.disabled {background: #bbb}
.btn_h55_wh {display:block; width:100%; height:53px; line-height: 53px; background:#fff; border:1px solid #eaeaea; color:#333; font-size:15px; text-align:center; font-weight: bold;}
.btn_h55_wh.disabled {color: #999;}
.btn_h55_wh.disabled .ico_navi.arrow {opacity: 0.4;}
.btn_h45_pp {display:block; width:100%; padding:17px 0; height:45px; background:#782fff; color:#fff; font-size:16px; line-height:10px; text-align:center;}
.btn_h45_disabled {display:block; width:100%; padding:17px 0; height:45px; background:#ececec; color:#bcbcbc; font-size:15px; line-height:10px; text-align:center;}
/* 2019-06-24 버튼추가 */
.btn-core {display:inline-block; position: relative; background-color: transparent; border: 1px solid transparent; outline: none; text-align: center; }
.btn-core.btn-default { height: 47px; padding: 0 15px; line-height: 47px; font-size: 14px; font-weight: normal; }
.btn-core.btn-xsmall { height: 32px; padding: 0 16px; line-height: 30px; font-size: 14px; font-weight: normal; }
.btn-core.btn-md-small { height: 40px; padding: 0 13.5px; line-height: 38px; font-size: 14px; font-weight: normal; }
.btn-core.btn-small { height: 43px; padding: 0 15px; line-height: 43px; font-size: 14px; font-weight: bold; }
.btn-core.btn-large { height: 60px; padding: 0 20px; line-height: 60px; font-size: 16px; font-weight: bold; }
.btn-core.btn-sky-line { background-color: #fff; border-color: #12c2ff; color: #12c2ff; }
.btn-core.btn-black-line { background-color: #fff; border-color: #333; color: #333;}
.btn-core.btn-white { background-color: #fff; border-color: transparent; color: #333;}
.btn-core.btn-white-line { background-color: transparent; border-color: #fff; color: #fff;}
.btn-core.btn-gray-line { background-color: #fff; border-color: #bbb; color: #999;}
.btn-core.btn-graylight-line { background-color: #fff; border-color: #ddd; color: #333;}
.btn-core.btn-sky { background-color: #12c2ff; border-color: #12c2ff; color: #fff; }
.btn-core.btn-black { background-color: #333; border-color: #333; color: #fff;}
.btn-core.btn-gray { background-color: #bbb; border-color: #bbb; color: #fff;}
.btn-core.btn-full { display:block; padding:0; width: 100%; }
.btn-core.btn-inline + .btn-inline { margin-left: 12px; }
.btn-core.btn-underline { text-decoration: underline; font-weight: normal; }
.btn-core:disabled,
.btn-core.disabled { background-color: #bbb !important; border-color: #bbb !important; }
.btn-core.btn-sky-line.disabled { color: #fff !important; }
/* .btn-core.btn-sky:disabled,
.btn-core.btn-sky.disabled { background-color: #333 !important; border-color: #333 !important; } */
/* equal btn */
.equal-btn-group { display: -ms-flexbox; display: -webkit-box; display: flex; }
.equal-btn-group .btn-core { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; }
.equal-btn-group.space-group .btn-core + .btn-core { margin-left: 5px; }
.equal-btn-group .btn-core.set-size { -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto; }
.equal-btn-group .btn-core.large-cell { -ms-flex: 2; -webkit-box-flex:2; flex: 2; }
.equal-btn-group .loading-word { display: none; }
.equal-btn-group .btn-text-loading .btn-word { display: none; }
.equal-btn-group .btn-text-loading .loading-word { display: inline; }
.equal-btn-group .btn-text-loading .loading-word img { position: absolute; top: 50%; width: 23.5px; height: auto; margin: -1.75px 0 0 10px; vertical-align: middle; }
/* 박스형 작은 버튼 그룹 */
.box-btn-group { font-size:0; }
.box-btn-group .btn-core { width: auto; height: 35px; padding:0 10px 0 5px; line-height: 37px; font-size: 14px; text-align: center; white-space: nowrap; }
.box-btn-group .btn-core + .btn-core { margin-left: -1px; }
.box-btn-group .btn-core .ficon { font-size: 25px; line-height: 25px; vertical-align: 1px; }
.box-btn-group .btn-core.btn-gray-line.on { color: #12c2ff; border-color: #12c2ff; z-index: 1; }
/* 하단 fixed 도움이 돼요 */
.bottom-btn-group { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; }
.bottom-btn-group { padding-bottom: constant(safe-area-inset-bottom); padding-bottom:env(safe-area-inset-bottom); background-color: #333; }
.bottom-btn-group .btn-core.active { color: #12c2ff; }
.bottom-btn-group .btn-core .ficon { margin: -4px 5px; width:20px; height:20px; font-size: 30px; line-height:26px; font-weight: normal; vertical-align: -2px; }
/* 가로 간격맞춤 */
.margin-side { margin: 0 20px; }
.margin-top20-side { margin: 20px 20px 0; }
/* 토글 블럭형 더보기 버튼 */
.open-close-btn-group .ficon { position: absolute; top: 12px; margin: 0 3.5px; width: 15px; height: 15px; font-size: 15px; line-height: 15px; color: #333; transition:.1s }
.open-close-btn-group.open .ficon { top: 15.5px; -wekit-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transform-origin: center center; transform-origin: center center; }
.open-close-btn-group .close-word,
.open-close-btn-group .open-word { display: inline-block; vertical-align: 1px; margin-left: -9px; }
.open-close-btn-group .close-word { display:none; }
.open-close-btn-group.open .open-word { display:none; }
.open-close-btn-group.open .close-word { display:inline-block; }
/* 참여하기 버튼 */
.block-btn-group { padding: 30px 20px 60px; }
/* 2019-06-24 인풋추가 */
.input-form {
display: inline-block;
height: 47px;
line-height: 47px;
padding: 1px 10px 0;
border: 1px solid #ddd;
background-color: #fff;
color: #333;
font-size: 14px;
font-weight: normal;
}
.input-form.full { display:block; width:100%; }
.input-form.full + .input-form.full { margin-top: 10px; }
.input-form.half { width:50%; }
.input-form.third { width: 33.33333333%; }
.input-form.quarter { width: 25%; }
.input-form:focus { border-color: #333; }
textarea.input-form { resize: none; padding: 10px; line-height: 24px; }
.input-form::-webkit-input-placeholder { color: #999;}
.input-form:-ms-input-placeholder { color: #999; }
.input-form::placeholder { color: #999; }
.input-form:read-only { background-color: #f3f3f3; }
select.input-form:read-only { background-color: #fff; }
.input-form:disabled { background-color: #f3f3f3; }
select.input-form.none-selected { color: #999 !important; }
/* input group */
.input-group { position: relative; font-size: 0; }
.input-group + .input-group { margin-top: 15px; }
.input-group.small-gap + .input-group.small-gap { margin-top: 10px; }
.input-group.small-gap .btn-del-word { position: absolute; top:50%; right: 17.5px; margin-top: -8.5px; z-index: 2; font-size: 15px; line-height: 15px; color: #333; }
.input-group .input-form { width: 100%; }
.input-group textarea.input-form { resize: none; min-height: 200px; }
.input-group > .col3 { width: calc(33.33333333% - 8px) }
.input-group .spacer-wave,
.input-group .spacer-dash {
display: inline-block; width: 12px; height: 47px; padding: 2px 0; line-height: 47px; vertical-align: middle; font-size: 14px; text-align: center; color: #ccc;
}
.input-group > .btn-core { padding: 0; }
.input-group .label-text { display: block; padding-bottom: 7px; font-size: 14px; font-weight: normal; }
.input-group .ficon-expand-more-15 {
position: absolute; top: 50%; right: 10px; margin-top: -7.5px; font-size: 15px; line-height: 15px; color: #333;
}
.input-group.required .label-text:after {
content: ''; display: inline-block; width: 4px; height: 4px; margin-left: 6px; vertical-align: 3px; border-radius: 2px; background-color: #12c2ff;
}
/* 상품 유닛 */
/* 1단 */
.product_list_new li {margin-top:9px}
.product_new > a {display:table; position:relative; width:100%; background:#fff; z-index:10;}
.product_new > a .product_visual_new {display:table-cell; position:relative; width:150px; height:150px}
.product_new > a .product_visual_new .out_of_stock {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); text-align:center; z-index:15}
.product_new > a .product_visual_new .out_of_stock .img_badge {display:inline-block; position:relative; top:50%; padding:2px 6px 3px 6px; color:#fff; background:#000; font-size:12px; transform: translateY(-50%)}
.product_new > a .product_info_new {display:table-cell; padding:6px 10px 6px 8px; height:150px; vertical-align:middle}
.product_new > a .product_info_new .prd_brand {overflow:hidden; display:-webkit-box; padding-right:20px; color:#333; height:14px; line-height:14px; font-size:14px; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-all; white-space:normal;}
.product_new > a .product_info_new .prd_name {width: 100%;overflow:hidden; text-overflow: ellipsis; display:-webkit-box;display: block; max-height:40px; margin-top:4px; color:#333; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; white-space:normal; font-size:14px; line-height:20px}
.product_new > a .product_info_new .prd_option {overflow:hidden; display:-webkit-box; max-height:40px; margin-top:4px; color:#333; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; white-space:normal; font-size:14px; line-height:17px}
.product_new > a .product_info_new .price_wrap {display:block; margin-top:6px}
.product_new > a .product_info_new .price_wrap .discount {color:#ff0000; font-size:14px}
.product_new > a .product_info_new .price_wrap .price {color:#333; font-size:14px}
.product_new > a .product_info_new .price_wrap .price em {font-size:13px; font-weight:normal}
.product_new > a .product_info_new .price_wrap del {color:#999; font-size:11px}
.product_new > a .product_info_new .product_rating {display:block; margin-top:6px}
.product_new > a .product_info_new .product_rating .rating .ico_star_s {display:inline-block; margin-top:1px; vertical-align:baseline}
.product_new > a .product_info_new .prd_review {display:inline-block; position:relative; margin-left:8px; padding-left:8px; color:#4e4e4e;font-size:12px; line-height:12px}
.product_new > a .product_info_new .prd_review:before {display:block; content:' '; position:absolute; top:50%; left:0; margin-top:-5px; height:10px; border-left:1px solid #b7b7b7;}
.product_new > a .product_info_new .tags {display:block; margin-top:9px}
.product_new > a .btn_toggle {position:absolute; top:10px; right:10px; z-index:20}
/* 2단 gallery형 */
.product_list_new.gallery {overflow:hidden; width:100%}
.product_list_new.gallery li {float:left; width:50%;}
.product_list_new.gallery .product_new > a .product_info_new .prd_name{display:-webkit-box;width:100%;white-space:normal}
.gallery .product_new > a {display:block; width:auto}
.gallery li:nth-child(odd) .product_new > a {margin:0 4.5px 0 9px}
.gallery li:nth-child(even) .product_new > a {margin:0 9px 0 4.5px}
.gallery .product_new > a .product_visual_new {display:block; width:100%; height:100%}
.gallery .product_new > a .product_info_new {display:block; position:relative; height:146px; padding:10px 13px 29px 13px}
.gallery .product_new > a .product_info_new .prd_brand {padding-right:0}
.gallery .product_new > a .product_info_new .product_rating {position:absolute; left:13px; bottom:17px; margin-top:0}
.gallery .product_new > a .product_info_new .tags {position:absolute; left:13px; bottom:40px; margin-top:0}
.gallery .prd_color {display:none}
/* 상품 컬러 칩 */
.prd_color {overflow:hidden; display:block; margin-top:7px; font-size:12px; color:#666;}
.prd_color.txt {color:#4e4e4e; font-size:12px}
.prd_color > span {float:left; margin-left:3px; width:10px; height: 10px; vertical-align: top;}
.prd_color > span:first-child {margin-left:0}
.prd_color img {display:inline-block; float:left; margin-left:3px; width:10px; height:10px}
.prd_color img:first-child {margin-left:0}
.prd_color .more {position:static; background-color: #e0e0e0; background:url('../../images/common/bg_color_more.gif') no-repeat; -webkit-background-size: 10px;background-size: 10px;}
.prd_color .plus {width:5px; height: 5px; margin: 2px 0 0 2px; opacity:.3; vertical-align: top;}
.prd_color .plus:before {height:1px;}
.prd_color .plus:after {width:1px;}
.prd_color .txt {color:#4e4e4e; font-size:12px}
/* 원뷰 */
.product_one_view {position:relative;}
.product_one_view > a {display:block; width:100%; background:#fff}
.product_one_view > a .product_visual_new {display:block; position:relative; width:190px; height:190px; margin:0 auto}
.product_one_view > a .product_visual_new .out_of_stock {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); text-align:center; z-index:15}
.product_one_view > a .product_visual_new .out_of_stock .img_badge {display:inline-block; position:relative; top:50%; padding:2px 6px 3px 6px; color:#fff; background:#000; font-size:12px; transform: translateY(-50%)}
.product_one_view > a .product_info_new {display:block; position:relative; padding:15px 16px; height:121px}
.product_one_view > a .product_info_new .prd_name {display:block; overflow:hidden; width:100%; padding-right:40px; color:#333; font-size:15px; line-height:15px; text-overflow:ellipsis; white-space:nowrap}
.product_one_view > a .product_info_new .price_wrap {display:block; margin-top:12px}
.product_one_view > a .product_info_new .price_wrap .discount {margin-right:4px; color:#ff0101; font-size:16px}
.product_one_view > a .product_info_new .price_wrap .price {color:#333; font-size:16px}
.product_one_view > a .product_info_new .price_wrap .price em {font-size:15px; font-weight:normal}
.product_one_view > a .product_info_new .price_wrap del {margin-left:4px; color:#999; font-size:13px}
.product_one_view > a .product_info_new .product_rating {display:block; margin-top:10px}
.product_one_view > a .product_info_new .product_rating .prd_review {display:inline-block; position:relative; margin-left:5px; padding-left:7px; color:#4e4e4e;font-size:13px; line-height:12px}
.product_one_view > a .product_info_new .product_rating .prd_review:before {display:block; content:' '; position:absolute; top:50%; left:0; margin-top:-5px; height:10px; border-left:1px solid #b7b7b7;}
.product_one_view > a .product_info_new .product_rating .rating .ico_star_s {display:inline-block; margin-top:1px; vertical-align:baseline}
.product_one_view > a .product_info_new .tags {display:block; margin-top:11px}
.product_one_view > a .btn_toggle {position:absolute; top:15px; right:15px; z-index:20}
.product_one_view .direct_brand {display:inline-block; position:absolute; right:15px; bottom:11px; padding-right:14px; width:auto; background:url('../../images/common/ico_prd_arrow01.png') no-repeat 100% 50%; background-size:8px 15px; color:#4e4e4e; font-size:13px; z-index:20}
/* 원뷰 - 와이드 이미지 */
.product_one_view.wide_img > a .product_visual_new {position:relative; width:100%; height:50.66vw}
.product_one_view.wide_img > a .product_visual_new .lazy_load_wrap {padding-top:0; height:50.66vw}
.product_one_view > a .product_visual_new .out_of_stock {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.5); text-align:center; z-index:15}
.product_one_view > a .product_visual_new .out_of_stock .img_badge {display:inline-block; position:relative; top:50%; padding:2px 6px 3px 6px; color:#fff; background:#000; font-size:12px; transform: translateY(-50%)}
/* 원뷰 - 와이드 영상 */
.product_one_view.wide_video a:first-child {position:relative}
.product_one_view.wide_video .product_visual_new {width:100%; height:56.26vw}
.product_one_view.wide_video .product_visual_new .lazy_load_wrap {height:56.26vw; padding-top:0}
.product_one_view.wide_video .btn_prd_video {position:absolute; right:10px; bottom:10px; width:34px; height:34px; z-index:20}
/* 좌우 스와이프 : 150px */
.swipe_wrap {width:100%; background:#fff; overflow:hidden;}
.product_list_new.swipe {overflow-x:auto; overflow-y:hidden; background:#fff; white-space:nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
.product_list_new.swipe::-webkit-scrollbar {display: none; width: 0 !important; height: 0 !important; background-color: transparent}
.product_list_new.swipe li {display:inline-block; width:150px; height:100%; margin:0 0 0 10px}
.product_list_new.swipe li:last-child {margin-right:10px}
.swipe .product_new > a {position:relative; display:inline-block;}/* 2018-08-23 수정*/
.swipe .product_new > a .product_visual_new {display:block}
.swipe .product_new > a .product_info_new {display:inline-block; position:relative; height:179px; padding:16px 0 23px 0}
.swipe .product_new > a .product_info_new .prd_brand {width:150px}
.swipe .product_new > a .product_info_new .price_wrap {margin-top:8px}
.swipe .product_new > a .product_info_new .product_rating {position:absolute; left:0; bottom:23px; margin-top:0}
.swipe .product_new > a .tags {position:absolute; left:0px; top:106px; z-index:25}
.swipe .product_new > a .product_info_new .prd_review {margin-left:5px; padding-left:5px; letter-spacing:-0.03em}
/* 좌우 스와이프 wide : 327px */
.product_list_new.wide_swipe {overflow-x:auto; background:#fff; white-space:nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
.product_list_new.wide_swipe::-webkit-scrollbar {display: none; width: 0 !important; height: 0 !important; background-color: transparent}
.product_list_new.wide_swipe li {display:inline-block; margin-top:0; border-right:10px solid #f2f2f2}
.product_list_new.wide_swipe li:last-child {border-right:0}
.wide_swipe .product_one_view > a {position:relative; width:327px}
.wide_swipe .product_one_view > a .product_info_new {height:140px}
.wide_swipe .product_one_view > a .tags {position:absolute; top:173px; left:16px; z-index:25}
.wide_swipe .product_one_view > a .product_info_new {position:relative; padding:15px 16px}
.wide_swipe .product_one_view > a .product_info_new .product_rating .prd_review {color:#000}
.review_info_txt01 {overflow:hidden; display:-webkit-box; position:absolute; left:16px; bottom:15px; max-height:30px; padding-right:16px; color:#888; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-all; white-space:normal; font-size:12px; line-height:15px}
.rank_num {position:absolute; top:20px; left:15px; color:#000; font-size:20px}
/* 뷰티테스터 상품 유닛 */
.beauty_tester_prd.product_one_view > a .product_info_new {height:auto}
.beauty_tester_prd.product_one_view > a .product_info_new .tags {margin-top:18px}
.exp_prd_info01 {margin:23px 0 7px 0; padding:19px 19px 14px 19px; background:#f6f6f6}
.exp_prd_info01 .exp_tit strong {color:#333; font-size:14px}
.exp_prd_info01 .exp_tit span {padding-left:8px; color:#999; font-size:14px}
.exp_prd_info01 .exp_opt_list {margin-top:12px}
.exp_prd_info01 .exp_opt_list li {overflow:hidden; display:block; max-width:100%; margin-top:7px; color:#484848; font-size:14px; text-overflow:ellipsis; white-space:nowrap}
.exp_prd_info01 .exp_opt_list li:first-child {margin-top:0}
/* 랭킹 상품 리스트 *//*삭제예정*/
.rank_list .rank_num {top:30px; left:24px}
.rank_list .rank_down {position:absolute; top:55px; left:20px; padding-right:9px; background:url('../../images/common/ico_rank_down.png') no-repeat 100% 1px; background-size:7px 8px; color:#0047d5; font-size:11px; line-height:11px}
.rank_list .rank_up {position:absolute; top:55px; left:16px; padding-right:9px; background:url('../../images/common/ico_rank_up.png') no-repeat 100% 1px; background-size:7px 8px; color:#ff0000; font-size:11px; line-height:11px}
.rank_list .rank_unchange {position:absolute; top:55px; left:23px; display:block; width:13px; height:1px; background:#ccc; text-indent:-9999px}
.rank_list .rank_new {position:absolute; top:55px; left:17px; color:#ff0007; font-size:11px}
/* 스페셜 기프트 - 썸네일 이미지 */
.thumb > a {position:relative}
.thumb > a .tags {position:absolute; top:172px; left:4.1%; z-index:20}
.thumb > a .product_info_new {height:auto; padding-top:25px}
.thumb > a .product_info_new .product_rating .prd_review {color:#000}
.thumb > a .product_info_new .prd_name {padding-right:25px}
.one_thumb_wrap {display:block; position:relative; margin-top:9px}
.ico_thumb01 {display:block; position:absolute; left:0; top:0; width:60px; height:80px; background:#fff url('../../images/common/ico_thumb_more01.png') no-repeat 15px 50%; background-size:30px; z-index:10}
.one_thumb_list01 {display:block; overflow-x:auto; overflow-y:hidden; height:80px; padding-left:60px; white-space:nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
.one_thumb_list01::-webkit-scrollbar {display: none; width: 0 !important; height: 0 !important; background-color: transparent}
.one_thumb_list01 .img_thumb01 {display:inline-block; width:80px; height:80px; margin-right:15px;}
.thumb.product_one_view > a .btn_toggle {position:absolute; top:24px}
/* 평점 */
[class*="mark_star_"]{display:inline-block; vertical-align:baseline; background:url('../../images/common/ico_star.png') no-repeat 0 0;}
.mark_star_sm {width:66px; height:11px; background-size:70px 90px;}
.mark_star_sm.star0 {background-position:0 0px;}
.mark_star_sm.star1 {background-position:0 -15px;}
.mark_star_sm.star2 {background-position:0 -30px;}
.mark_star_sm.star3 {background-position:0 -45px;}
.mark_star_sm.star4 {background-position:0 -60px;}
.mark_star_sm.star5 {background-position:0 -75px;}
.mark_star_md {width:95px;height:18px; background-size:95px 122px;}
.mark_star_md.star0{background-position:0 0}
.mark_star_md.star1 {background-position:0 -20px}
.mark_star_md.star2 {background-position:0 -40px}
.mark_star_md.star3 {background-position:0 -60px}
.mark_star_md.star4 {background-position:0 -81px}
.mark_star_md.star5 {background-position:0 -101px}
.mark_star_lg {width:115px; height:22px; vertical-align:middle; background-size:122px 152px;}
.mark_star_lg.star0{background-position:0 0;}
.mark_star_lg.star1 {background-position:0 -25px;}
.mark_star_lg.star2 {background-position:0 -50px;}
.mark_star_lg.star3 {background-position:0 -75px;}
.mark_star_lg.star4 {background-position:0 -100px;}
.mark_star_lg.star5 {background-position:0 -125px;}
.mark_star_xl {width:178px; height:30px; vertical-align:middle; background-size:187px 240px; }
.mark_star_xl.star0{background-position:0 0;opacity: .5}
.mark_star_xl.star1 {background-position:0 -40px;}
.mark_star_xl.star2 {background-position:0 -80px;}
.mark_star_xl.star3 {background-position:0 -120px;}
.mark_star_xl.star4 {background-position:0 -160px;}
.mark_star_xl.star5 {background-position:0 -200px;}
/* layout.css 으로 옮겨야 함 */
.header_common .gnb_menu.fixed {position:fixed; top:0; left:0; right:0; z-index: 30;}
/* 신고하기 */
.report_wrap {background:#fff; padding:20px 0; }
.tit_area {padding:30px 20px}
.tit_area p {overflow:hidden; margin-top:10px; color:#333; font-size:14px; font-weight:bold; text-overflow:ellipsis; white-space:nowrap}
.tit_area p:first-child {margin-top:0}
.radio_area01 {display:block; padding: 0 20px 30px;}
/* .radio_area01 span {display:block; margin-top:15px}
.radio_area01 span:first-child {margin-top:0} */
.text_input_wrap {padding:30px 0 0; margin: 0 20px; border-top:1px solid #ddd; }
.text_input_wrap .txt_in {color:#333; font-size:14px; font-weight:bold; }
.text_input_wrap .textarea {margin-top:24px; height:130px; }
.text_input_wrap .textarea textarea { padding: 17px 10px; resize: none; }
.btn_area_report {overflow:hidden; margin-top:15px; padding:0 7.5px}
.btn_area_report li {float:left; width:50%; padding:0 2.5px}
/* 모달팝업 NEW */
.system_alert {position:fixed; top:0; left:0; right:0; bottom:0; z-index:100;}
.system_alert .layer_dimmed {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); z-index:100}
.system_alert .layer_wrap {position:absolute; top:50%; left:12%; right:12%; z-index:105; background: #fff }
.system_alert .layer {width:100%; min-height:100%; background:#fff;}
.system_alert .layer_title {padding:24px 22px 0; font-size:16px; font-weight:bold; color:#000;}
.system_alert .layer_cont {padding:24px 22px 19px;}
.system_alert .layer_btns {text-align:right; padding:24px;}
.system_alert .layer_btns button {margin-left:45px; color:#12C2FF; font-size:16px}
.system_alert .layer_btns button:first-child {margin-left:0}
/*btn*/
.system_alert .btn_default_modal_confirm,.layer_popup.system_alert .btn_default_modal_cancel,.layer_popup.system_alert .layer_btns .close {color:#333; font-size:16px; font-weight: normal;}
.system_alert .text {color:#000; font-size:15px; line-height:18px}
/* 시스템 alert NEW ios / android */
.system_alert.round {position:fixed; top:0; left:0; right:0; bottom:0; z-index:100}
.system_alert.round .layer_dimmed {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.5); z-index:100}
.system_alert.round .layer_wrap { /* as-is 에서 top 을 계산값으로 찍어주는 상황의 회피를 위해 top에 important 삽입 left:48px; right:48px; */
position:absolute; top:50% !important; z-index:105; left:50%; width: 280px; margin-left: -140px;
-webkit-transform: translateZ(1); transform: translateZ(1);
-webkit-transform: translateY(-50%);transform: translateY(-50%);
}
.system_alert.round.wid_full .layer_wrap {left: 12%; right: 12%; width: auto; margin: 0;}
/* -webkit-transform: translateZ(1); transform: translateZ(1); */
/* backface-visibility: hidden; */
/* -webkit-transform: translateY(calc( -50% - 0.5px ));transform: translateY(calc( -50% - 0.5px ));*/
.system_alert.round .layer {width:100%; min-height:100%; background:#fff;} /* border-radius:15px */
.system_alert.round .layer_title {padding:35px 20px 2px; color:#333; font-size:20px; line-height:20px; text-align:center; font-weight:bold}
.system_alert.round .layer_title + .layer_cont { margin-top: -22px; }
.system_alert.round .layer_cont {padding:35px 0 36px; }
.system_alert.round .layer_cont .txt01,
.system_alert.round .layer_cont .txt02 { padding:0 20px;}
.system_alert.round .layer_cont .txt01 { padding:0 20px; line-height:18px; text-align:center}
.system_alert.round .layer_cont .txt02 { line-height:20px; text-align:center}
.system_alert.round .layer_cont .txt01 + .txt01,
.system_alert.round .layer_cont .txt01 + .txt02,
.system_alert.round .layer_cont .txt02 + .txt01,
.system_alert.round .layer_cont .txt02 + .txt02 { margin-top: 13px; }
.system_alert.round .layer_cont [class*=txt0].first {padding-top: 20px;}
.system_alert.round .layer_cont .txt-top {padding:0 0 20px; font-size:14px; font-weight: normal; line-height:20px; text-align:center}
.system_alert.round .layer_cont .txt-single { padding-top:17px; font-size:14px; font-weight: normal; line-height:14px; text-align:center }
.system_alert.round .layer_cont .content-inside {padding:0 20px; margin-bottom: -23px; }
.system_alert.round .layer_cont .content-inside .btn-full + [class*="btn-"] { margin-top: 10px; }
.system_alert.round .layer_cont .image-full { position: relative; margin: -36px 0; }
.system_alert.round .layer_cont .image-full .desc {
position: absolute; bottom: 23px; left: 0; right:0; color: #fff; font-weight:bold; font-size: 20px; line-height: 25px; text-align: center;
text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
.system_alert.round .layer_cont .image-full .contenteditor-image a,
.system_alert.round .layer_cont .image-full .contenteditor-image img { display: block; }
.system_alert.round .layer_cont .p_btn_area {margin:7px 0}
.system_alert.round .layer_cont .p_btn_area li a {display:block; width:100%; padding:13px 0; background:url("../../images/common/btn_pop_new01.png") no-repeat 90% 50%; background-size:10px 18px; color:#333; font-size:16px; text-align:center}
.system_alert.round .layer_btns {display:flex; display:-webkit-flex; padding:0; margin-top: -0.5px; border-top:1px solid #ddd; text-align:center}
.system_alert.round .layer_btns button {display:inline-block; width:100%; height:50px; float:left; margin-left:0; padding:16px 0; text-align:center; font-size:14px; font-weight:normal; color:#333; }
.system_alert.round .layer_btns button:nth-child(2) {border-left: 1px solid #ddd;}
.system_alert.round .layer-btn.close { position: absolute; top:10px; right: 10px; z-index: 10; width:35px; height:35px; padding: 2.5px; font-size: 30px; line-height: 30px; color:#333; }
.system_alert.round .layer_cont .btn-close {position:absolute; right:10px; top:10px; width:35px; height:35px;}
.system_alert.round .layer_cont .btn-close .ficon {font-size:25px; color:#333;}
.system_alert.round .coupongift-card-small { margin-top: 20px;}
.system_alert.round .image-area,
.system_alert.round .radio-area { margin-top: 20px; text-align: center; }
.system_alert.round .image-area img { display: block; margin: 0 auto; width: auto; }
.system_alert.round .radio-area .ui-radio.inline + .ui-radio.inline { margin-left: 33px; }
.system_alert.round .layer_wrap.layer_mainPop {width: 308px; margin-left: -154px;}
.layer_popup.fullpage .layer_cont .txt02 {padding:15px;line-height:21px;}
.layer_popup.fullpage .layer_cont .txt02 + .layer_btns {position:fixed;left:0;bottom:0;width:100%;}
.layer_popup.fullpage .layer_cont .txt02 + .layer_btns:after {content:'';display:block;clear:both;}
.layer_popup.fullpage .layer_cont .txt02 + .layer_btns .btn_default_modal_cancel {display:block; float:left; width:50%; padding:17px 0; height:50px; background:#b1b1b1; color:#fff; font-size:15px; text-align:center; font-weight: bold;}
.layer_popup.fullpage .layer_cont .txt02 + .layer_btns .btn_default_modal_confirm {display:block; width:50%; height:50px; margin-left:0 !important; background:#000; color:#fff; font-size:15px; text-align:center; font-weight:bold; line-height: 50px}
/* 쿠폰/혜택 vip 당첨 팝업 */
.vip_pop01 {position:fixed; top:0; left:0; right:0; bottom:0; z-index:100}
.vip_pop01 .layer_dimmed {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); z-index:100}
.vip_pop01 .layer_wrap {position:absolute; top:50%; left:15%; right:15%; z-index:105}
.vip_pop01 .layer {width:100%; min-height:100%; background:#fff}
.vip_pop01 .layer_title {padding:10px 10px 0 10px; color:#000; font-size:17px; line-height:20px; text-align:center; font-weight:bold}
.vip_pop01 .layer_cont {padding:0}
.vip_pop01 .layer_cont .text {overflow:hidden; margin-top:7px; color:#000; font-size:12px; text-align:center}
.vip_pop01 .layer_cont .text.bar {position:relative; padding-top:7px}
.vip_pop01 .layer_cont .text.bar:before {display:block; content:' '; position:absolute; top:0; left:50%; margin-left:-7.5px; width:15px; height:1px; background:#000}
.vip_pop01 .layer_cont .text span {display:inline-block; max-width:75%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle}
.vip_pop01 .layer_cont .text em {display:inline-block; vertical-align:middle}
.vip_pop01 .layer_cont .coup_area {margin:16px auto 0 auto; text-align:center}
.vip_pop01 .layer_cont .coup_area.all_img {width:92px; height:54px}
.vip_pop01 .layer_cont .coup_area.point_price01 {margin-top:9px}
.vip_pop01 .layer_cont .coup_area.point_price01 p {height:54px; color:#782fff; font-size:27px; line-height:54px}
.vip_pop01 .layer_cont .coup_area.point_price01 p span {font-size:15px}
.vip_pop01 .layer_cont .vip_text {margin-top:9px; padding:0 5px; color:#808080; font-size:11px; text-align:center}
.vip_pop01 .layer_cont .p_btn_area {margin:7px 0}
.vip_pop01 .layer_cont .p_btn_area li a {display:block; width:100%; padding:13px 0; background:url("../../images/common/btn_pop_new01.png") no-repeat 90% 50%; background-size:10px 18px; color:#782fff; font-size:15px; text-align:center}
.vip_pop01 .layer_btns {margin-top:9px; background:#000}
.vip_pop01 .layer_btns button {display:block; padding:9px 0; width:100%; color:#fff; text-align:center; font-size:12px; line-height:12px}
.vip_pop01 .coupon{width:92px; height:54px; padding: 8px 2px 0 8px; margin:0 auto 0;}
.vip_pop01 .coupon:before {width:6px}
.vip_pop01 .coupon>dt {overflow:hidden; font-size: 11px; text-overflow:ellipsis; white-space:nowrap}
.vip_pop01 .coupon .cont {margin-top:6px}
.vip_pop01 .coupon .cont strong{font-size: 22px; font-weight:normal }
.vip_pop01 .coupon .cont .unit {margin-top:0; font-size:12px}
/* 좋아요 액션 */
.img_like_big {position:fixed; top:50%; left:50%; width:92px; height:92px; margin:-46px 0 0 -46px; z-index:80; animation-timing-function:cubic-bezier(0.68,-0.55,0.265,1.55);-webkit-animation-timing-function:cubic-bezier(0.68,-0.55,0.265,1.55);z-index:100;}
/* 장바구니 담기 액션 */
.toast_cart_msg {position:fixed; top:53px; right:12px; z-index:100; background:#fff; border-radius:30px; box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);}
.ap_header.scroll .toast_cart_msg {top:53px !important}
.toast_cart_msg a {position:relative; display:block; height:35px; padding:10px 14px; color:#000; font-size:15px}
.toast_cart_msg a:after {display:block; content:' '; position:absolute; top:-6px; right:20px; width:14px; height:6px; background:url("../../images/common/ico_toast_msg.png") no-repeat 0 0; background-size:14px 6px}
/* 뷰티테스터 > 주소 검색 */
.neww_adrs {position:fixed;left: 0; right: 0; bottom:0; top:0;z-index: 100; background:#f2f2f2}/* dd*/
.neww_adrs .layer_wrap {width:100%; height:100%; overflow:hidden;}
.neww_adrs .layer_wrap .layer {height:100%;}
.neww_adrs .section {margin-top: 0; border-top: 9px solid #f2f2f2}
.neww_adrs .layer_title {width:100%; height:50px; line-height: 48px;text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff;font-size: 17px;font-weight: bold; color: #000; position:fixed; top:0; left:0; z-index:100;}
.neww_adrs .layer_cont {width:100%; height: 100%; padding:50px 0 150px 0; background:#fff; overflow-y: scroll; -webkit-overflow-scrolling:touch;}
.neww_adrs .layer_btns {width: 100%; margin: 0; padding: 0; text-align: center; position: fixed; bottom: 0; left: 0; display: block; overflow: hidden; z-index: 100;}
.neww_adrs .btn_review_delete {position: fixed;top: 0;left: 0;height: 50px;line-height: 50px;padding: 0 10px;font-size: 17px;color: #646464;font-weight: bold;z-index: 100;}
.neww_adrs .layer_close {position: fixed; top: 0; right: 0; z-index: 100; width: 50px; height: 50px; padding: 0;}
.neww_adrs.btn_y .layer_cont {padding-bottom: 50px;}
.neww_adrs.bg_w .layer_cont{min-height: 100%; background-color:#fff}
/* 픽슬리 이용약관 */
.ap_contents.ap_contents--trems{box-sizing:border-box;background-color:#fff;padding:0 16px 48px 16px;line-height:1.67;}
.terms-section{border-top:4px solid #333;margin-top:46px}
.terms-section:first-child{margin-top:0;border:0;}
.terms-section__title{padding:40px 0 36px;color:#333;font-size:32px;text-align:center;font-weight:700;}
.terms-section__title--v2{padding-top:48px}
.terms-section__title--v3{font-size:26px}
.terms-head__suptext{display:block;width:157px;margin:0 auto;}
.terms-section__desc{color:#333;font-size:12px;font-weight:500;}
.terms-section__desc--v2{font-size:13px;}
.terms-section__desc + .terms-section__desc{margin-top:16px;}
.terms-subsection{margin-top:22px;border-top:1px solid #eee;padding-top:22px;}
.terms-subsection + .terms-subsection{margin-top:24px;border:0;padding-top:0;}
.terms-subsection__title{color: #333;font-size:12px;text-align:left;font-weight:700;}
.terms-section__list{margin:14px 0 0 16px;}
.terms-section__list li{margin-top:8px;list-style:none;font-size:12px;color:#666;font-weight:500;}
.terms-section__list li:first-child{margin-top:0;}
.terms-section__list--v2{margin:0;line-height:initial}
.terms-section__list--v2 li:first-child{margin-top:8px;}
/* 배너 */
.common-banner a,
.common-banner .anchor { display: block; }
/* bi */
.arita-logo {
display:inline-block;
width: 120px;
height: 26px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 120 26'%3E%3Cdefs%3E%3Cpath id='a' d='M0 26h119.338V0H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23000' d='M11.269 6.406L18.192 26l2.372-.957-6.85-19.387-.072-.208z'/%3E%3Cpath fill='%23000' d='M8.972 0L.07 24.818 0 25.01l2.374.916 3.744-10.392h5.21v-2.507H7L11.388.833z'/%3E%3Cg%3E%3Cpath fill='%23000' d='M29.374.438h-.384v2.507h.384c3.23 0 5.319 1.884 5.319 4.798 0 2.915-2.101 4.798-5.354 4.798h-.315v2.507h.315c4.818 0 7.93-2.867 7.93-7.305S34.172.438 29.375.438'/%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Cpath fill='%23000' d='M24.155 25.516h2.577V.438h-2.577zM46.34.438h-2.604l-4.693 24.69-.038.203 2.499.501 4.02-21.126 6.506 14.08.093.2 2.252-1.168L46.395.561zM61.189.438h-2.57l-4.366 10.633-.081.195 2.338.96 3.022-7.36 4.517 20.797.044.203 2.499-.5L61.225.604zM79.72.833L77.304 0l-8.903 24.817-.07.194 2.375.916 3.744-10.392h5.21v-2.507h-4.328z' mask='url(%23b)'/%3E%3Cpath fill='%23000' d='M81.975 5.448l-2.373.958L86.524 26l2.373-.957-6.85-19.387zM97.913 25.516h5.915v-2.507h-5.915zM92.488 25.516h2.577V.438h-2.577zM107.997 25.516h2.577V.438h-2.577zM113.422 25.516h5.916v-2.507h-5.916z' mask='url(%23b)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}
.arita-logo.large {
width: 138px;
height: 30px;
}
.movie-play-icon {
display: inline-block; width: 100px; height: 100px; vertical-align: middle; background-size: 100%;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMikiPgogICAgICAgIDxjaXJjbGUgY3g9IjQ4IiBjeT0iNDgiIHI9IjQ4IiBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik02NiA1MEwzOCA2N1YzM3oiLz4KICAgIDwvZz4KPC9zdmc+Cg==")
}
.list-dot-wrap .list-dot > .item { position: relative; padding: 0 0 0 7.5px; font-size: 12px; font-weight: normal; line-height: 1.5; color: #333; white-space:normal; }
.list-dot-wrap .list-dot > .item:before {
content: ''; position: absolute; left: 0; top: 8px; width: 2px; height: 2px; border-radius: 1px; background-color: rgba( 187,0187, 187, 0.75);
}
.list-dot-wrap .list-dot > .item + .item { margin-top: 4px; }
/* 섹션 블럭라인 적용 */
.section-block-line { position: relative; border-top:1px solid #ddd; }
.section-block-line:before { content:''; position: absolute; left:0; top:0; right:0; z-index: 1; height: 10px; background-color: #f3f3f3; }
/* 블럭형 리스트 탭 */
.event-tab-wrapper .ui_tab .equally.common-list-tab { margin-top: 10px; border-bottom: 1px solid #eee; }
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list { border-top: 1px solid #eee; margin-bottom: -1px; }
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list:after { content:''; display:block; clear: both; }
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item {
float: left; display: block; width: 50%; background-color: #fff;
border-bottom: 1px solid #eee; border-right: 1px solid #eee;
}
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item:nth-child(even) { border-right: none; }
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item > .anchor,
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item > .button {
overflow: hidden; display: block; width:100%; height: 54px; padding: 0 15px; font-size: 14px; line-height: 54px; color: #222; text-align:center;
white-space: nowrap; text-overflow: ellipsis; border: none;
}
.event-tab-wrapper .ui_tab .equally.common-list-tab:after,
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item > .anchor:after,
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item > .button:after { display: none; }
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item.active .anchor,
.event-tab-wrapper .ui_tab .equally.common-list-tab > .tab-list > .item.active .button { font-weight: bold; }
/* 하단 라인형 탭 */
.line-tab-wrapper { padding-top: 10px; }
.line-tab-wrapper .line-tab { height: 70px; display: -ms-flexbox; display: -webkit-box; display: flex; }
.line-tab-wrapper .tab-btn { position: relative; -ms-flex: 1; -webkit-box-flex: 1; flex: 1; height: 70px; padding-top: 39px; border-bottom: 1px solid #ddd; text-align: center; color: #333; font-size:14px; }
.line-tab-wrapper .tab-btn.active { font-weight: bold; }
.line-tab-wrapper .tab-btn.active:after { content:''; position: absolute; left: 0; right: 0; bottom: -1px; border-bottom: 3px solid #333; font-weight: bold; }
.line-tab-wrapper .line-tab-panel { padding: 30px 20px 0; }
.line-tab-wrapper .line-tab-panel.active-tab { padding-top: 100px; }
.line-tab-wrapper .line-tab.fixed { position: fixed; top: 60px; left: 0; right:0; z-index: 40; height: 50px; background-color: #fff; }
.line-tab-wrapper .line-tab.fixed .tab-btn { height: 50px; padding-top: 18px; }
.line-tab-wrapper .line-tab.fixed2 { position: fixed; top: 0; left: 0; right:0; z-index: 40; height: 50px; background-color: #fff; }
.line-tab-wrapper .line-tab.fixed2 .tab-btn { height: 50px; padding-top: 18px; }
/* 2줄 리스트 말줄임 */
.desc-double-line {
overflow: hidden;
display: -webkit-box;
white-space: normal;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 모달팝업 noti */
/* 추가사은품안내, APmall배송포장재안내 */
/* .system_alert.round.noti .layer_wrap {left:5%;right:5%} */
.system_alert.round.noti .layer {padding:20px}
.system_alert.round.noti .layer_title {padding: 0 0 15px 0; font-size: 14px; text-align: left; border-bottom: 1px solid #333}
.system_alert.round.noti .layer_cont {padding:15px 0}
.system_alert.round.noti .layer_title + .layer_cont { margin-top: 0; }
.system_alert.round.noti .layer_cont img {margin:15px 0}
.system_alert.round.noti .layer_cont .text {font-size:12px; color:#333; line-height:16px}
.system_alert.round.noti_wide .layer_wrap {width:335px; margin-left:-167.5px;}
.system_alert.round.noti_wide .layer {padding:20px;}
.system_alert.round.noti_wide .layer_title {padding: 0 0 15px 0; font-size: 14px; line-height:1; text-align: left; border-bottom: 1px solid #333}
.system_alert.round.noti_wide .layer_cont {padding:35px 0 0;}
.system_alert.round.noti_wide .layer_cont li {font-size:12px; line-height:1.5;}
.system_alert.round.noti_wide .layer_cont li:before {content:""; display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:100%; background:#333; vertical-align:0;}
.system_alert.round.noti_wide .layer-btn.close {top:13px; right:17px; width:25px; height:25px; font-size:20px; line-height:20px;}
/* 상품종류 */
.product-type-selector { overflow: hidden; height: 85px; }
.product-type-selector .row-item {
position: relative; overflow-x: auto; overflow-y: hidden; height: 93px; padding: 9px 0 17px 0; background-color: #f3f3f3;
font-size: 0; white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.product-type-selector::-webkit-scrollbar {display: none; width: 0 !important; height: 0 !important; background-color: transparent}
.product-type-selector .item { position: relative; display: inline-block; width: 50px; text-align: center; }
.product-type-selector .item:before {
content:''; position: absolute; top:0; left:0; width: 50px; height: 50px; padding-top: 2px; background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.product-type-selector .item .ficon,
.product-type-selector .item .all,
.product-type-selector .item img { position: relative; z-index: 1; display: inline-block; width: 50px; height: 50px; vertical-align: top; }
.product-type-selector .item img { opacity: 0.35; } /*opacity: 0.32;*/
.product-type-selector .item .ficon,
.product-type-selector .item .all {vertical-align: top; font-size: 50px; line-height: 44px; color: #bbb; }
.product-type-selector .item .all { padding-top: 18.5px; font-size: 14px; line-height: 13px; font-weight: bold; }
.product-type-selector .item .name-text { display:block; padding: 4px 0 0; font-size: 12px; line-height: 1.2; color: #999; }
.product-type-selector .item.active:before { background-color: #fff; }
.product-type-selector .item.active img { opacity: 1; }
.product-type-selector .item.active .all,
.product-type-selector .item.active .ficon { color: #333; }
.product-type-selector .item.active .name-text { font-weight: bold; color: #333; }
.product-type-selector .item + .item { margin-left: 30px; }
.product-type-selector .item:first-child { margin-left: 25px; }
.product-type-selector .item:last-child { margin-right: 25px; }
/* table-common-data-wrap */
.table-common-data-wrap { margin-top: 30px; border: solid #ddd; border-width: 1px 0; }
.table-common-data-wrap .table-common-data { width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: separate; }
.table-common-data-wrap .table-common-data th,
.table-common-data-wrap .table-common-data td { padding: 10px 0 7px; vertical-align: middle; text-align: center; font-weight: normal; font-size: 12px; line-height: 1.3; }
.table-common-data-wrap .table-common-data .top-thead th { height: 62px; color: #333; text-transform: uppercase; border-bottom: 1px solid #ddd; line-height: 1.5; }
.table-common-data-wrap .table-common-data tr > * + * { border-left: 1px solid #ddd; }
.table-common-data-wrap .table-common-data .common-data + .common-data th,
.table-common-data-wrap .table-common-data .common-data + .common-data td,
.table-common-data-wrap .table-common-data tr + tr > * { border-top: 1px solid #ddd; }
.table-common-data-wrap .table-common-data .common-data th { background-color: #f3f3f3; }
.table-common-data-wrap .table-common-data .common-data th,
.table-common-data-wrap .table-common-data .common-data td { height: 35px; color: #666; }
.table-common-data-wrap .table-common-data .common-data .single { height: 32px; }