@charset "UTF-8";

/* 폰트 참조 */
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(/html/assets/webfonts/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(/html/assets/webfonts/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(/html/assets/webfonts/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(/html/assets/webfonts/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(/html/assets/webfonts/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(/html/assets/webfonts/NotoSansKR-Black.otf) format('opentype');}

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) { body { -webkit-text-size-adjust:100% }}

/* 전체 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background-color: #fff; color: #000; font-size: 12px; }
body { --maxWidth: 420px; --lemonColor: #000; --colorF9: #f9f9f9; --colorE8: #e8e8e8; --color9E: #9e9e9e; --colorWY: #fff8d2; --colorStrong: #ff6f00; }

.right_wrapper { overflow: visible; height: 100%; min-height: 100%; }
@media only screen and (max-width: 799px) { .left_wrapper { display: none; background-color: red; }}
@media only screen and (min-width: 800px) { .right_wrapper { position: relative; width: 100%; max-width: 420px; min-height: 100vh; margin: 0 0 0 calc(50% - 1px); zoom: 1.25; }}
@media only screen and (min-width: 800px) { .desktop_img { position: fixed; background-size: 1152px; background-color: #fff; background-repeat: no-repeat; background-position: center; width: 100%; height: 97.8%; z-index: 0; }}
/* 공용 - 푸터 */
/* 푸터 - 기업정보 */
.right_wrapper #footer_info-wrap { background-color: #f9f9f9; padding-top: 15px; }
.right_wrapper #footer_info-wrap .f-bot { padding: 52px 30px 40px 30px; background-color: #ffffff; }
.right_wrapper #footer_info-wrap .f-bot .fb-01 { position: relative; }
.right_wrapper #footer_info-wrap .f-bot .fb-01 .pincette { position: absolute; top: -10px; display: inline-block; width: 25px; height: 1px; background-color: #000; }
.right_wrapper #footer_info-wrap .f-bot .fb-01 .fb-link { margin-bottom: 6px; }
.right_wrapper #footer_info-wrap .f-bot .fb-01 .fb-link > a { font-size: 11px; color: #2a2a2a; font-weight: 500; }
.right_wrapper #footer_info-wrap .f-bot .fb-01 .fb-sns { position: absolute; top: 0; right: 0; }
.right_wrapper #footer_info-wrap .f-bot .fb-01 .fb-sns > a { margin-left: 15px; }
.right_wrapper #footer_info-wrap .f-bot .fb-01 .fb-sns > a > img { }

.right_wrapper #footer_info-wrap .f-bot .fb-02 { margin-top: 24px; font-size: 11px; color: #6b6b6b; line-height: 18px; }
.right_wrapper #footer_info-wrap .f-bot .fb-02 .em { color: #2a2a2a; }

.right_wrapper #footer_info-wrap .f-bot .fb-03 { margin-top: 20px; }
.right_wrapper #footer_info-wrap .f-bot .fb-03 .logo { }
.right_wrapper #footer_info-wrap .f-bot .fb-03 .logo > img { height: 20px; }
.right_wrapper #footer_info-wrap .f-bot .fb-03 .p1 { margin-top: 4px; font-size: 11px; color: #2a2a2a; opacity: 0.5; }

.btn_round { border-radius: 24px !important; }
.btn_outline { /* box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04) !important; */ border: solid 1px rgba(0, 0, 0, 0.12); }
.btn-primary { text-align: center; background-color: #fff; border-radius: 2px; margin-bottom: 8px; /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04); */ }
.btn-primary > a { display: inline-block; width: 100%; padding: 5px 0; font-weight: 500; color: #212121; letter-spacing: -0.5px; }
.btn-primary > p.a { display: inline-block; width: 100%; padding: 5px 0; font-weight: 500; color: #212121; letter-spacing: -0.5px; cursor: pointer; }
.btn-secondary { text-align: center; background-color: #ffee5f; box-shadow: 0 2px 4px 0 rgba(255, 209, 0, 0.08); padding: 8px 0; font-size: 14px; }
.btn-secondary > a { display: inline-block; width: 100%; padding: 5px 0; font-weight: 500; color: #212121; letter-spacing: -0.5px; }
.btn-secondary > p.a { display: inline-block; width: 100%; padding: 5px 0; font-weight: 500; color: #212121; letter-spacing: -0.5px; cursor: pointer; }
.btn-gray { text-align: center; background-color: var(--colorE8); padding: 8px 0; font-size: 14px; }
.btn-gray > a { display: inline-block; width: 100%; padding: 5px 0; font-weight: 500; color: #212121; letter-spacing: -0.5px; }
.btn-error { text-align: center; background-color: #ff3500; /* box-shadow: 0 2px 4px 0 rgba(255, 209, 0, 0.08); */ border-radius: 2px; margin-bottom: 8px; }
.btn-error > a { display: inline-block; width: 100%; padding: 5px 0; font-weight: 500; color: white; letter-spacing: -0.5px; }
.btn-error > p.a { display: inline-block; width: 100%; padding: 5px 0; font-weight: 500; color: white; letter-spacing: -0.5px; cursor: pointer; }
.btn-wobc { display: inline-block; }
.btn-wobc > a { font-size: 12px; font-stretch: normal; font-style: normal; line-height: 1.54; letter-spacing: -0.5px; color: var(--color9E); }
.btn-wobc > p.a { font-size: 13px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.54; letter-spacing: -0.5px; color: #494949; cursor: pointer; }

.btn-back { text-align: center; background-color: #2e2750; /* box-shadow: 0 2px 4px 0 rgba(255, 209, 0, 0.08); */ border-radius: 2px; margin-bottom: 8px; }
.btn-back > a { display: inline-block; width: 100%; padding: 14px 0; font-weight: 500; color: white; letter-spacing: -0.5px; }
.btn-back > p.a { display: inline-block; width: 100%; padding: 14px 0; font-weight: 500; color: white; letter-spacing: -0.5px; cursor: pointer; font-size: 1.2em; }
.btn-advance { text-align: center; background-color: var(--lemonColor); box-shadow: 0 2px 4px 0 rgba(255, 209, 0, 0.08); border-radius: 2px; margin-bottom: 8px; }
.btn-advance > a { display: inline-block; width: 100%; padding: 14px 0; font-weight: 500; color: #212121; letter-spacing: -0.5px; }
.btn-advance > p.a { display: inline-block; width: 100%; padding: 14px 0; font-weight: 500; color: #212121; letter-spacing: -0.5px; cursor: pointer; }

/* favorite/like 버튼 효과 */
.btn-target_toggle > img.icon-favorite { display: block; }
.btn-target_toggle > img.icon-favorite_on { display: none; }
.btn-target_toggle.active > img.icon-favorite { display: none; }
.btn-target_toggle.active > img.icon-favorite_on { display: block; }

.btn-blank { text-align: center; padding: 8px 0; }
.btn-blank > a { display: inline-block; width: 100%; font-weight: 500; letter-spacing: -0.5px; font-size: 15px; }
.btn-login { text-align: center; background: white; border: solid 1px rgba(0, 0, 0, 0.12); padding: 8px 0;}
.btn-login > a { display: inline-block; width: 100%; font-weight: 500; color: #212121; letter-spacing: -0.5px; font-size: 15px;}
.btn-lemon { text-align: center; background: var(--lemonColor); padding: 8px 0; color: #fff; font-size: 14px; }
.btn-lemon > a { display: inline-block; width: 100%; font-weight: 500; color: #212121; letter-spacing: -0.5px; font-size: 15px;}
.btn-black { text-align: center; background: #000; color: #fff; padding: 8px 0;}

/* 인풋박스 스타일링 */
.input-primary { position: relative; }
.input-primary > input { display: inline-block; width: 100%; padding: 10px 0; text-align: left; font-size: 12px; padding: 10px 10px;  border-radius: 5px;  border: solid 1px var(--colorE8);  background-color: #ffffff; }
.input-primary > input::placeholder { padding: 10px 0; font-size: 12px; color: var(--color9E);}
.input-primary > input:focus { outline: none; border-bottom: 1px solid #ffd100; }

/* 인풋박스 에러 상태 */
.input-primary.error { border-bottom: 1px solid rgba(255, 145, 70, 1); }
.input-primary .state { display: none; position: absolute; bottom: -20px; left: 0; font-size: 11px; line-height: 1.82; color: #ff9146; }
.input-primary.error .state { display: block; }
.input-primary.error > input:focus { outline: none; border-bottom: 1px solid #ff9146; }

/* 인풋박스 공백 상태 */
.input-primary.empty { border-bottom: 1px solid rgba(255, 145, 70, 1); }
.input-primary .empty { display: none; position: absolute; bottom: -20px; left: 0; font-size: 11px; line-height: 1.82; color: #ff9146; }
.input-primary.empty .empty { display: block; }
.input-primary.empty > input:focus { outline: none; border-bottom: 1px solid #ff9146; }

/* 인풋파일 스타일링 */
.input-file { width: 100%; }
.input-file > input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: none; }
.input-file > label { position: relative; display: inline-block; width: 100%; padding: 2px 5px; color: #212121; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 14px 0 14px 30px; }
.input-file > label:before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; width: 20px; height: 20px; background: url("../img/icon/20-file.svg") center center no-repeat; background-size: cover; }
/* .input-file > input[type="file"]::placeholder { font-size: 14px; line-height: 1.43; letter-spacing: normal; color: #212121; opacity: 0.3; }
.input-file > input[type="file"]:focus { outline: none; border-bottom: 1px solid #ffd100; } */

/* 체크박스 스타일링 */
.check-primary { position: relative; display: inline-flex; width: 120px; }
.check-primary:after { display: block; clear: both; content: ''; }
.check-primary > input { }
.check-primary > input[type="checkbox"] { display: none; }
.check-primary > input[type="checkbox"] + label { display: inline-flex; align-items: center; width: 20px; height: 20px; background: url('/html/assets/img/icon/checkbox_unchecked.webp') center center no-repeat; background-size: cover; cursor: pointer; }
.check-primary > input[type="checkbox"]:checked + label { background: url('/html/assets/img/icon/checkbox_checked.webp') center center no-repeat; background-size: cover; }
.check-primary > label { }
.check-primary > input[type="checkbox"] + label > span { position: absolute; left: 28px; display: block; width: fit-content; font-size: 12px; font-weight: 500; line-height: 1.82; color: var(--color9E); }

.check-secondary { position: relative; display: inline-flex; width: 115px; }
.check-secondary:after { display: block; clear: both; content: ''; }
.check-secondary > input { }
.check-secondary > input[type="checkbox"] { display: none; }
.check-secondary > input[type="checkbox"] + label { display: inline-flex; align-items: center; width: 20px; height: 20px; background: url('../img/icon-20-20-check-off.svg') center center no-repeat; background-size: cover; cursor: pointer; }
.check-secondary > input[type="checkbox"]:checked + label { background: url('../img/icon-20-20-check.svg') center center no-repeat; background-size: cover; }
.check-secondary > label { }
.check-secondary > input[type="checkbox"] + label > span { position: absolute; left: 28px; display: block; width: fit-content; font-size: 13px; font-weight: 500; line-height: 1.54; letter-spacing: -0.5px; color: #494949; }

/* 셀렉트박스 스타일링 */
.select_sort > select { background-color: #fff; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../img/icon/20-orders.svg') no-repeat 95% 50%; padding-right: 24px; font-size: 12px; line-height: 1.67; letter-spacing: -0.5px; text-align: right; color: #212121; }
.select_sort > select::-ms-expand { display: none; }
.select_sort > select:focus { outline: none; }
.select_sort > select > option { font-size: 12px; line-height: 1.67; letter-spacing: -0.5px; text-align: right; color: #212121; text-align: center; background-color: #fff; }
/* .select_sort > select > option[selected="selected"] { background-color: #ffee5f; } */

.select_sort2 > select { width: 100%; padding: 14px 0; background-color: #fff; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../img/icon/20-picker.svg') no-repeat 95% 50%; font-style: normal; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1); color: #212121; }
.select_sort2 > select::-ms-expand { display: none; }
.select_sort2 > select:focus { outline: none; }
.select_sort2 > select > option { font-size: 14px; line-height: 1.43; letter-spacing: -0.5px; color: #212121; }

/* .select_sort3 { flex: 1; } */
.select_sort3 > select { width: 100%; padding: 10px; background-color: #fff; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('../img/icon/20-rolling-picker.svg') no-repeat 95% 50%; font-size: 13px; font-style: normal; border: solid 1px rgba(0, 0, 0, 0.12); border-radius: 8px; color: #494949; }
.select_sort3 > select::-ms-expand { display: none; }
.select_sort3 > select:focus { outline: none; }
.select_sort3 > select > option { font-size: 13x; line-height: 1.43; letter-spacing: -0.5px; color: #494949; }

/* 텍스트창 스타일링 */
textarea { background-color: rgba(255, 255, 255, 0); border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); resize: none; width: 100%; font-size: 14px; line-height: 1.43; letter-spacing: -0.5px; color: #212121; }
textarea::placeholder { opacity: 0.3; font-size: 14px; line-height: 1.43; color: #212121; }
textarea:focus { border-bottom: 1px solid #ffd100; }

/* 팝업 종류 */
#top_popup { position: fixed; top: 0; left: 0; display: none; width: 100%; z-index: 260; }
#top_popup.active { display: block; }
#mid_popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; width: calc( var(--maxWidth) - 100px ); z-index: 260; }
#mid_popup.img { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; width: calc( var(--maxWidth) - 20px ); z-index: 260; }
#mid_popup.active { display: block; }
#bottom_popup_alarm, #bottom_popup { position: fixed; bottom: 0; display: none; width: var(--maxWidth); z-index: 101; }
#bottom_popup_alarm.active, #bottom_popup.active { display: block; }
#bottom_popup01 { position: fixed; bottom: 0; left: 0; display: none; width: 100%; z-index: 1001; }
#bottom_popup01.active { display: block; }
#bottom_popup02 { position: fixed; bottom: 0; left: 0; display: none; width: 100%; z-index: 1001; }
#bottom_popup02.active { display: block; }

/* 제품상세 팝업 */
#item_popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; width: calc(100% - 20px); height: calc(100% - 20px); z-index: 260; overflow-y: scroll; background-color: #ffffff; }
#item_popup.active { display: block; }
#item_popup #ip-header { position: sticky; display: flex; justify-content: center; align-items: center; top: 10px; left: 10px; background-color: #c0baba; width: 35px; height: 35px; border-radius: 50%; z-index: 300; opacity: 0.7; cursor: pointer; }
#item_popup #ip-detail { }

/* 고객 리뷰 팝업 */
.popup-ct_review { position: fixed; bottom: 0; display: none; width: var(--maxWidth); z-index: 1001; background-color: #ffffff; padding: 10px; border-top-left-radius: 20px; border-top-right-radius: 20px; }
.popup-ct_review .container { }

.popup-ct_review .rv-content .rc-list .swiper-slide { width: unset; }
.popup-ct_review .ct_review { position: relative; padding-top: 30px; }
div.btn-close.fixed { position: absolute; top: 0; right: 0; background: url(/html/assets/img/icon/20-close.svg); width: 20px; height: 20px; }
div.btn-close { background: url(/html/assets/img/icon/20-close.svg); width: 20px; height: 20px; }

.popup-ct_review .ct_review .content { }
.popup-ct_review .ct_review .content .rv-info { display: flex; }
.popup-ct_review .ct_review .content .rv-info .ri-img img { width: 160px; max-height: 160px; object-fit: cover; }
.popup-ct_review .ct_review .content .rv-info .ri-desc { width: 100%; height: 160px; margin: 0 10px; display: flex; flex-direction: column; justify-content: space-between; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .rd-tit { font-size: 15px; font-weight: bold; border-bottom: 1px solid var(--colorE8); margin-bottom: 5px; padding-bottom: 5px; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .rd-tags { margin-top: 4px; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .rd-tags .tag { font-size: 13px; font-weight: 500; line-height: 1.85; letter-spacing: -0.3px; color: #503daf; margin-right: 2px; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .form-type img.prdFormType { width: auto; height: 22px; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .revwInfo { padding: 5px 10px 7px; object-fit: contain; border-radius: 5px; background-color: #f2f2f2; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .revwInfo .fas { color:var(--lemonColor); }
.popup-ct_review .ct_review .content .rv-info .ri-desc .revwInfo span.revwPoint { font-size: 12px; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .revwInfo span.revwCount { font-size: 12px; color: #0099ff; border-left: 1px solid #707070; padding-left: 9px; margin-left: 5px; }
.popup-ct_review .ct_review .content .rv-info .ri-desc .revwInfo span.revwTxt { font-size: 12px; color: var(--color9E); }

.popup-ct_review .ct_review .content .rv-content { height: 150px; }
.popup-ct_review .ct_review .content .rv-content .rc-hd { display: flex; justify-content: space-between; padding-right: 20px; }
.popup-ct_review .ct_review .content .rv-content .rc-hd .rh-tit { font-size: 13px; line-height: 1.85; letter-spacing: -0.3px; color: #494949; }
.popup-ct_review .ct_review .content .rv-content .rc-hd .rh-tit .rh-cnt { font-weight: bold; color: #503daf; margin-left: 3px; }
.popup-ct_review .ct_review .content .rv-content .rc-hd .rh-showlist { font-size: 11px; line-height: 2.18; letter-spacing: -0.3px; color: #494949; }
.popup-ct_review .ct_review .content .rv-content .rc-hd .rh-showlist i { }

.popup-ct_review .ct_review .content .rv-content .rc-list { white-space: nowrap; margin-top: 15px; }
.popup-ct_review .ct_review .content .rv-content .rc-list .rc-item { display: inline-block; width: 20em !important; height: 136px; padding: 10px 16px; border-radius: 3px; background-color: #f3f3f3; margin-right: 10px; }
@media screen and (min-width: 640px) { .popup-ct_review .ct_review .content .rv-content .rc-list .rc-item.popup-ct_review .ct_review .content .rv-content .rc-list .rc-item { width: 30em !important; } }
.popup-ct_review .ct_review .content .rv-content .rc-list .rc-item .rci-hd { display: flex; justify-content: space-between; }
.popup-ct_review .ct_review .content .rv-content .rc-list .rc-item .rci-hd .reviewer { font-size: 11px; font-weight: bold; line-height: 1.64; letter-spacing: -0.5px; color: #212121; }
.popup-ct_review .ct_review .content .rv-content .rc-list .rc-item .rci-hd .date { font-size: 11px; font-weight: 500; line-height: 1.64; text-align: right; color: #494949; }
.popup-ct_review .ct_review .content .rv-content .rc-list .rc-item .rci-content { font-size: 13px; line-height: 1.38; letter-spacing: -0.5px; color: #494949; margin-top: 4px; white-space: normal; overflow: hidden; height:100%; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-align:left; }

.popup-ct_review .ct_review .cont-btn { display: flex; justify-content: space-evenly; margin-top: 20px; font-size: 15px; }

.popup-ct_review .price .sal_pr .price { font-size: 16px; font-weight: bold; line-height: 1.33; color: #212121; }
.popup-ct_review .price .sal_pr .ori_pr { opacity: 0.5; font-size: 12px; line-height: 1.67; color: #212121; text-decoration: line-through; margin-left: 6px; }
.popup-ct_review .price .dis_rate { display: none; font-size: 16px; color: #ff9700; font-weight: bold; }
.popup-ct_review .price .dis_rate.active { display: unset; }

.popup_alarm { padding: 20px 0; text-align: center; background-color: #fff; /* position: relative; */}
.popup_alarm .content { font-size: 19px; line-height: 1.26; letter-spacing: -1px; color: #494949; margin-bottom: 24px; }
.popup_alarm .p1 { font-size: 30px; font-weight: 500; line-height: 1.19; letter-spacing: -0.5px; color: #212121; }
.popup_alarm .p2 { padding: 45px; font-size: 14px; line-height: 1.6; }
#mid_popup.img .popup_alarm .p2 { padding: unset; font-size: 14px; line-height: 1.6; }
.popup_alarm .p3 { font-size: 15px; font-weight: 500; line-height: 1.85; letter-spacing: -0.5px; color: #999999; }
.popup_alarm .btn-primary { width: 200px; margin: 0 auto; }
.popup_alarm .btn-secondary { width: 200px; margin: 0 auto; margin-bottom: 10px; }

div.alert { z-index: 150; display: block; }
div.container div.popup_alarm { padding: 20px 0; text-align: center; background-color: #fff; position: relative; }
div.popup_alarm div.alarm-btn { position: fixed; bottom: 0; display: flex; justify-content: center; flex-wrap: nowrap; width: 100%; }
div.popup_alarm div.alarm-btn .btn-popup_ok { padding: 14px 0; font-size: 15px; text-align: center; width: 100%; color:#fff; background: var(--lemonColor); cursor: pointer; }
div.popup_alarm div.alarm-btn .btn-popup_cancel { padding: 14px 0; font-size: 15px; text-align: center; width: 100%; cursor: pointer; background: var(--colorE8); }
/* 오버레이 */
#overlay { position: fixed; visibility: hidden; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; overflow: hidden; background-color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
#overlay.active { visibility: visible; opacity: 0.65; }
/* overlay Alarm */
#overlayAlarm { z-index:200 !important; position: fixed; visibility: hidden; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; overflow: hidden; background-color: #000; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
#overlayAlarm.active { visibility: visible; opacity: 0.65; }

label.error { color: #ff9146 !important; }
input.error { color: #ff9146 !important; border-bottom-color: #ff9146 !important; }
input, textarea { -webkit-appearance: none; }
.none { display:none; }
.noneOR { display:none !important; }
.cursor { cursor:pointer}
.bgLemon { background: var(--lemonColor); }
.bgE9 {background: #e9e9e9;}
.bgWhite { background: white; }
.bgGray { background: #f2f3f6; }
.bgRed { background: #ff5a5a !important; color:white !important; }
.bgGreen { background: #61e561 !important; color:white !important; }
.mobileCenter { padding: 0 calc((100vw - var(--w))/2); }
.noScroll { overflow:hidden !important; touch-action:none; }
.line15 { height:1.5em !important; overflow: hidden; }
.line2 { height:2em !important; overflow: hidden; }
.line25 { height:2.5em !important; overflow: hidden; }
.line3 { height:3em !important; overflow: hidden; }

.borderLemon {border: 1px solid var(--lemonColor) !important;}

.notReady {border: 1px dashed red !important;}

.grayscale { filter: grayscale(1); }

/* editor */
.line { text-decoration: none; border-bottom: 2px solid #00cca3; }
.strong { font-weight:500}
.red { color: red; }
.lightred { color: lightred; }
.blue { color: blue; }
.lightblue { color: lightblue; }
.pink { color: pink; }
.gray { color: gray; }
.lightgray { color: lightgray; }
.orange { color: var(--colorStrong); }
.Orange { color: var(--colorStrong) !important; }
.green { color: green; }

.bg404 { background: url(/html/assets/img/contents/bg.png); }

.font10 { font-size: 10px; }
.font12 { font-size: 12px; }
.font13 { font-size: 13px; }
.font14 { font-size: 14px; }
.font15 { font-size: 15px; }
.font18 { font-size: 18px; }
.font20 { font-size: 20px; }
.font24 { font-size: 24px; }

.bold { font-weight: bold; }

.w10 { width: 10%; }
.w20 { width: 20%; }
.w30 { width: 30%; }
.w40 { width: 40%; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }
.w90 { width: 90%; }
.w100 { width: 100%; }

.padding2 { padding: 2px; }
.padding3 { padding: 3px; }
.padding4 { padding: 4px; }
.padding5 { padding: 5px; }
.padding10 { padding: 10px; }

.text-l { text-align: left; }
.text-c { text-align: center; }
.text-r { text-align: right; }

i.circle { border: 2px solid var(--color9E); border-radius: 50%; color: var(--color9E); padding: 1px; vertical-align: bottom;}

.link_desktop_logo { display: block; position: fixed; z-index: 10; top: 50%; left: 50%; width: 137px; height: 162px; margin: -367px 0 0 -380px; font-size: 0; line-height: 0; text-indent: -9999px; }
.link_desktop_banner { display: block; position: fixed; z-index: 10; top: 50%; left: 50%; width: 297px; height: 377px; margin: -158px 0 0 -458px; font-size: 0; line-height: 0; text-indent: -9999px; }

.overflow { overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.overflow1 { overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.overflow3 { overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.flex-between { display: flex; justify-content: space-between; }

/* g-bar */
.good-bg { background-color: #078a21; }
.soso-bg { background-color: #3b4a91; }
.bad-bg { background-color: #db67cc; }

.balloon_left { width: 100%; position: relative; border: 1px solid #e3e3e3; border-radius: 5px; padding: 15px; margin-left: 15px; }

.balloon_left:before { content: ''; position: absolute; left: 0; top: 30px; width: 0; height: 0; border: 15px solid transparent; border-right-color: #e3e3e3; border-left: 0; border-bottom: 0; margin-top: -16px; margin-left: -15px; }
.balloon_left:after { content: ''; position: absolute; left: 0; top: 32px; width: 0; height: 0; border: 13px solid transparent; border-right-color: white; border-left: 0; border-bottom: 0; margin-top: -17px; margin-left: -13px; }

.abortMsg { display: none; }
.abortMsg.fixed { display: flex; position: fixed; top: 0; z-index: 2; align-items: center; align-content: center; height: 100vh; background: rgba(0, 0, 0, 0.75); }
.abortMsg  > div { display: flex; flex-flow: column; align-items: center; width: var(--maxWidth); }
.abortMsg  > div > span:nth-child(2) { font-size: 19px; color: #fff; margin: 11px 10px 15px; word-break: keep-all; text-align: center; }
.abortMsg  > div > span:nth-child(n+3) { font-size: 15px; color: white; padding: 0 30px}
.abortMsg  > div > div { display: flex; margin: 30px; }
.abortMsg  > div > div > div:nth-child(1) { padding: 12px; text-align: center; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16); background-color: #ffffff; }
.abortMsg  > div > div > div:nth-child(2) { padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); color: #fff; background-color: #000; margin-left: 10px; font-size: 15px; font-weight: bold; }

img.prdFormType { width: auto; height: 22px; }
img.prdFormType.TABLET {content: url(/html/assets/img/icon/main_icon_pill_6820@3x.webp);}
img.prdFormType.CAPSULE {content: url(/html/assets/img/icon/main_icon_pill_6820@3x.webp);}
img.prdFormType.POWDER {content: url(/html/assets/img/icon/main_icon_powder_6820@3x.webp);}
img.prdFormType.ETC {content: url(/html/assets/img/icon/main_icon_etc_6820@3x.webp);}
img.prdFormType.CANDY {content: url(/html/assets/img/icon/main_icon_jelly_6820@3x.webp);}
img.prdFormType.GELLY {content: url(/html/assets/img/icon/main_icon_jelly_6820@3x.webp);}
img.prdFormType.LIQUID {content: url(/html/assets/img/icon/main_icon_liquid_6820@3x.webp);} 
img.prdFormType.EFFERVESCENT {content: url(/html/assets/img/icon/main_icon_liquid_6820@3x.webp);} 
@media only screen and (max-width: 321px){	
	img.prdFormType.TABLET {content: url(/html/assets/img/icon/main_icon_pill_6820@2x.webp);}
	img.prdFormType.CAPSULE {content: url(/html/assets/img/icon/main_icon_pill_6820@2x.webp);}
	img.prdFormType.POWDER {content: url(/html/assets/img/icon/main_icon_powder_6820@2x.webp);}
	img.prdFormType.ETC {content: url(/html/assets/img/icon/main_icon_etc_6820@2x.webp);}
	img.prdFormType.CANDY {content: url(/html/assets/img/icon/main_icon_jelly_6820@2x.webp);}
	img.prdFormType.GELLY {content: url(/html/assets/img/icon/main_icon_jelly_6820@2x.webp);}
	img.prdFormType.LIQUID {content: url(/html/assets/img/icon/main_icon_liquid_6820@2x.webp);} 
	img.prdFormType.EFFERVESCENT {content: url(/html/assets/img/icon/main_icon_liquid_6820@2x.webp);} 
}

img.reviewerpick-satisfy-0 {content: url(/html/assets/img/icon/icon_bad@3x.webp); }
img.reviewerpick-satisfy-1 {content: url(/html/assets/img/icon/reveiwerpick_icon_soso@3x.webp); }
img.reviewerpick-satisfy-2 {content: url(/html/assets/img/icon/icon_best@3x.webp); }
@media only screen and (max-width: 321px){
	img.reviewerpick-satisfy-0 {content: url(/html/assets/img/icon/icon_bad@2x.webp); }
	img.reviewerpick-satisfy-1 {content: url(/html/assets/img/icon/reveiwerpick_icon_soso@2x.webp); }
	img.reviewerpick-satisfy-2 {content: url(/html/assets/img/icon/icon_best@2x.webp); }
}

img.satisfy-0 {content: url(/html/assets/img/icon/icon_bad@3x.webp); }
img.satisfy-1 {content: url(/html/assets/img/icon/main_icon_soso_6420@3x.webp); }
img.satisfy-2 {content: url(/html/assets/img/icon/icon_best@3x.webp); }
@media only screen and (max-width: 321px){
	img.satisfy-0 {content: url(/html/assets/img/icon/icon_bad@2x.webp); }
	img.satisfy-1 {content: url(/html/assets/img/icon/main_icon_soso_6420@2x.webp); }
	img.satisfy-2 {content: url(/html/assets/img/icon/icon_best@2x.webp); }
}
.more .fa, .more .fas, .more .far { -webkit-text-stroke: 1px white; }
div.header div.tit span.tip { margin-left: 5px; font-size: 12px; font-weight: 300; width: 100% auto; }

.bottomFixed { position: fixed; bottom: 0; width: var(--maxWidth); }
.fix-menu { position: fixed; top: 0; width: var(--maxWidth); z-index: 1; }
.fix-menu2 { position: fixed; top: 48px; width: var(--maxWidth); z-index: 1; }

.item .prdImg { position: relative; }
.item .prdImg .sold-out { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; background: url(/html/assets/img/bg/img_soldout.webp)  no-repeat center; background-size: cover; border-radius: 10px; }

.spacing-between { display: flex; justify-content: space-between; align-items: center; }
.spacing-center { display: flex; align-items: center; }
.center { text-align: center; }

/* .kakao-channel { bottom: calc( var(--bodyBottom) + 100px )!important; transition: 1s; } */
.right_wrapper .kakao-channel { position: fixed; bottom: calc( var(--bodyBottom) + 10px ); right: 20px; z-index: 1; transition: 1s; }
.right_wrapper .kakao-channel > img { width: 40px; height: 40px; }