@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Archivo:wght@300;400;500;700&display=swap');

/* Global */
:root {
  --color-red: #F0142F;
  --color-yellow: #FFBB00;
  --color-green: #0DC98C;
  --color-blue: #0099FF;
  --color-grey: #D5D5D5;
  --color-darkgrey: #656565;
  --color-lightgrey: #F5F5F5;
  --color-lighttxt: #A4A4A4;
  --color-purple: #9A00FF;

  --font-title: 28px;
  --font-large: 20px;
  --font-medium: 17px;
  --font-regular: 14px;
  --font-small: 13px;
  --font-default: 13px;
  --font-micro: 11px;
}

* {box-sizing: border-box;}

html,
body {
  width: 100%;
  min-width: 320px;
  max-width: 800px;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0;
  /*font-family: 'Archivo', 'Noto Sans KR', sans-serif; Archivo는 시안에서 안쓰인 폰트인데 언제부터 여기에 사용된지 모르겠어서 일단 폰트 교체합니다. */
  font-family: 'Pretendard-Regular', 'Noto Sans KR', sans-serif;
  font-size: var(--font-default);
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  margin: 0;
}

button,
select {
  text-transform: none;
  cursor: pointer;
  background:transparent;
  /* appearance: none; */
  /* -webkit-appearance: none; */
  /* white-space: nowrap; */
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  outline: none;
  border:0;
  margin: 0;
}
fieldset {
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
}
textarea {
  width: 100%;
  resize: none;
  padding: 1em;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
input::placeholder {color: var(--color-lighttxt)}
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
}
img {
  max-width: 100%;
  border-style: none;
  vertical-align: middle;
}
form {
  width: 100%;
  height: 100%;
}
ul {
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 1;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
label {white-space: nowrap;}
svg {vertical-align: middle;}
span,
p,
h1,
h2,
h3,
h4 {
  padding: 0;
  margin: 0;
}
#page {position: relative;}
#page,
.container {height: 100%;background-color: #fff;}
.container {padding: 80px 30px 120px;}
.container-home {padding:60px 0 160px;background-color: #fff;}


/******* 공통 적용 클래스 *******/
/* 포지션, 위치 */
.hide {
  position: absolute;
  left: 0;
  font-size: 0;
  color: transparent;
  width: 0;
  height: 0;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
}

.por{position: relative;}
.po-cent{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.dis-fj {
  display: flex;
  justify-content: space-between;
}

.clear::after,
.ul-style2::after,
.ul-style3::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}
.rsv-time {
  position: relative;
  padding-left: 20px;
  font-weight: bold;
  color: var(--color-red);
}
.rsv-time::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/ic_time.svg) no-repeat center/contain;
}


/* 여백 */
.m-cent {margin: 0 auto;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 34px;}
.mb40 {margin-bottom: 40px;}
.mb60 {margin-bottom: 60px;}
.mr5 {margin-right: 5px;}
.mr10 {margin-right: 10px;}
.mr15 {margin-right: 15px;}
.mr20 {margin-right: 20px;}
.pl5 {padding-left: 5px;}
.pl20 {padding-left: 20px;}
.p30 {padding: 30px;}
.p30-0 {padding: 30px 30px 0;}
.p15-30 {padding: 15px 30px; }
.p15-30-0 {padding:15px 30px 0;}
.p0-30 {padding:0 30px;}

/* 버튼 */
.button{
  width: 100%;
  height: 50px;
  font-size: var(--font-medium);
  font-weight: bold;
  border-radius: 10px;
  color:inherit;
}
.button a {
  display: block;
  width: 100%;
  color:inherit;
}
.btn-half{
  width: calc(50% - 10px);
  height: 50px;
  font-size: var(--font-medium);
  font-weight: bold;
  border-radius: 10px;
}
.btn_all-agree{
  display: block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  border-radius: 10px;
  border:1px solid var(--color-grey);
  text-align: center;
  font-size: var(--font-regular);
  color:var(--color-lighttxt);
  cursor: pointer;
}
.btn_all-agree.on{
  border:1px solid var(--color-yellow);
  color:#000;
}
.btn_all-agree.on .agree-chk{opacity:1}
.btn-submit,
.btn-disabled.on{
  background-color: var(--color-yellow);
  color: #000;
}
.btn-pay,
.btn-buy,
.btn-buy2,
.btn-buynow,
.btn-tel {
  background-color: var(--color-blue);
  color:#fff;
}
.btn-pay,
.btn-buy,
.btn-buy2,
.btn-tel {border-radius: 0;}


.btn-disabled{
  background-color: var(--color-grey);
  color: #fff;
}
.btn-send,
.btn-code {
  padding:4px 10px;
  border: 1px solid var(--color-blue);
  border-radius: 5px;
  color: var(--color-blue);
}
.btn-sub{
  height: 50px;
  width: 100%;
  min-width: 50px;
  max-width: 160px;
  padding: 10px;
  border: 1px solid var(--color-grey);
  border-radius: 10px;
  font-weight: bold;
  font-size: var(--font-regular);
  color: #000
}
.btn-orderlist {
  width: 70px;
  height: 33px;
  border-radius: 5px;
  border:1px solid var(--color-grey);
  font-weight: bold;
  background: #fff;
  color: var(--color-lighttxt);
}

.btn-refund:disabled,
.btn-review:disabled {
  background-color: var(--color-lightgrey);
  border: 1px solid var(--color-grey);
  color:var(--color-lighttxt)
}
.btn-cart {
  width: 54px;
  height: 50px;
  background: url(../img/ic_cart-w.svg) no-repeat center/26px #474747;
  border-radius: 10px;
}
.btn-viewcart,
.btn-cancel,
.bottom-change .btn-close {border:1px solid var(--color-yellow);}
.btn-keepshop,
.btn-selectCoupon {background-color: var(--color-yellow);color:#000;}
.btn-cancel,.btn-viewcart {color:#000;}
.btn-sm{
	display:inline-flex;
  height: 24px;
  line-height:normal;
  align-items:center;
  /*line-height:24px;*/
  padding: 0 10px;
  font-weight: bold;
  border: 1px solid var(--color-grey);
  border-radius: 5px;
  background: #fff;
  color: var(--color-lighttxt);
  white-space:nowrap;
}
.btn-cancelbuy:disabled {
  background-color: var(--color-lightgrey);
}
.btn-review {
	display:inline-flex;
  height:22px;
  line-height:normal;
  padding: 0 4px;
  margin-top:20px;
  border-radius: 5px;
  align-items:center;
  justify-content:center;
  white-space: nowrap;}
  .btn-complete,
.btn-refund,
.btn-review,
.btn-apply,
.btn-ask,
.btn-applyprice,
.btn-price.on {
  background-color: #fff;
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
}
.btn-plus img,
.btn-minus img {
  width: 28px;
  height: 28px;
}
.btn-clear {
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.btn-search {
  width: 20px;
  height: 20px;
  background: url(../img/ic_search.svg) no-repeat center/contain;
}
.btn-reset {
  width: 35px;
  height: 35px;
  background: url(../img/ic_reset.svg) no-repeat center/16px #fff;
  border: 1px solid var(--color-grey);
  border-radius: 5px;
}
.btn-add {
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
}
.addline_1 li:first-of-type {width: calc(80% - 5px);}
.addline_1 li:last-of-type {width: calc(20% - 5px);}

/* 인풋, 체크&셀렉트박스, 라디오 등*/
.input{
  width:100%;
  height: 50px;
  line-height:50px;
  padding: 0 1em;
  font-size: var(--font-regular);
  border:1px solid var(--color-grey);
  border-radius: 10px;
}
.input:read-only{background-color:#fafafa;}
.input:disabled {background-color:#fafafa;}
.input::placeholder {line-height:normal;}
.select-arrow,
.load_more {background: url(../img/ic_arrow-down.svg) no-repeat 96% center/17px #fff;appearance:none;-webkit-appearance:none;color:#000;}
.load_more span {z-index:2;}
.load_more.on {background: url(../img/ic_arrow-up.svg) no-repeat 60% center/12px;position:relative;}
.load_more.on::after {content:"";position:absolute;bottom:0;left:0; display:block;width:100%;height:130%;background-image:linear-gradient(to top, #fff, rgba(255,255,255,.7), transparent);}
.select-arrow {padding-right:10%;}
.select-order{
  float: right;
  background: url(../img/ic_arrow-down-b.svg) no-repeat 90% center/14px #fff;
  font-weight: bold;
  appearance:none;
  -webkit-appearance:none;
  color:#000;
  padding-right:30px;
}
.load_more{
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  padding:20px 10px 20px 0;
  background-position: 60% 52%;
  background-size: var(--font-default);
  font-size: var(--font-regular);
  text-align: center;
}
.btn_more {
	width: 100%;
	  height: 50px;
	  border-radius: 10px;
	border:1px solid var(--color-grey);
	color: #555;
	font-weight:bold;
}
.btn_more a {display:block;width:100%;}
.btn_totop {
	position:fixed;
	right:20px;
	bottom:75px;
	width:40px;
	height:40px;
	border-radius:50%;
	box-shadow: 0 0 3px rgba(0,0,0,.2);
	background:url(../img/icon_arrow-top.png) no-repeat center/18px #fff;
	opacity:0;
	transition:all .4s;
}
.btn_totop.on{
	bottom:85px;
	opacity:1;
}
.radio,
.chk-default{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: url(../img/radio.svg) no-repeat center/contain #fff;
  vertical-align: middle;
}
.radio:checked{background: url(../img/radio-checked.svg) no-repeat center/contain;}
.chk-default:checked{
  background: url(../img/chk-w.svg) var(--color-blue) no-repeat center/14px;
}

/* 기타 */
.empty {
  padding: 100px 0;
  font-size: var(--font-regular);
  font-weight: bold;
  text-align: center;
  color: var(--color-lighttxt);
}
.overlay{
  position: fixed;
  display: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.6);
  z-index: 1000;
}
.overlay.on {display: block;}
.logo img{
	max-width: 170px;
	max-height:38px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 800px;
  background-color: #fff;
  z-index: 999;
}
.fixed-bottom .ul-style3 li,
.bottom-change li {width: calc(50% - 10px);}
.bottom-main{
  height: 70px;
  padding: 15px 0;
  box-shadow: 0 -3px 3px rgba(0,0,0,.1);
  font-size: 11px;
  color: var(--color-darkgrey);
}
.bottom-main li{
  width: calc(100% / 5);
  text-align: center;
}
.bottom-main li a{
  position: relative;
  display: block;
  /* height: 46px; */
  white-space: nowrap;
}
.bottom-main a img,
.bottom-main a span{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.bottom-main a img{
  display: block;
  height: 22px;
  top: 0;
}
.bottom-main a span {bottom: 0;}
.main_btn.on a{color: var(--color-blue);}
.bottom-buy {
  padding: 15px 30px;
  font-size: 11px;
  border-top: 1px solid var(--color-grey);
  color: var(--color-darkgrey);
}
.bottom-buy li:nth-of-type(1),
.bottom-buy li:nth-of-type(2) {
  float: left;
  width: 54px;
}
.bottom-buy li:nth-of-type(3),
.bottom-buy li:nth-of-type(4) {
  float: right;
  width: calc(100% - 64px);
}
.buy_opt {
  display: none;
  position: fixed;
  width: 101%;
  max-width: 800px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 80px;
  max-height: 80%;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  z-index: 999;
  overflow-y: auto;
}
.buy_opt.on {
  display: block;
  z-index: 1000;
}
.h2-block {margin-bottom: 20px;}
.h2-block h2 {
  display: inline-block;
  margin-right: 10px;
}
.h2-block strong {color: var(--color-blue);}

.bottom-cart {
  display: none;
  border-radius: 10px 10px 0 0;
  text-align: center;
}
.bottom-coupon ul,
.cart_bar,
.register-bottom,
.bottom-withdrawl,
.bottom-confirm { padding: 15px;}

.bottom-buy,
.bottom-coupon {box-shadow: 0 0 3px rgba(0, 0, 0, .3);}
.cart_bar{
  height: 80px;
  border-top: 1px solid var(--color-grey);
}
.bottom-cart li {
  width: calc(50% - 10px);
}
/* 간격 15px인 ul-style1 */
.ul-style1 li{margin-bottom: 15px;}
.ul-style1 li:last-of-type{margin-bottom: 0;}

/* 나열형 float:left ul-style2 */
.ul-style2 li{float: left;}

/* 양쪽 끝으로 정렬 ul */
.ul-style3 li {float: left;}
.ul-style3 li:nth-of-type(2n){float: right;}

.tag{
  display:inline-block;
  height:22px;
  line-height:21px;
  padding: 0 3px;
  border-radius: 5px;
  white-space: nowrap;
  user-select:none;
  -webkit-user-select:none;
}
@media not all and (min-resolution:.001dpcm)
    { @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    }
}
.warning{
  position: relative;
  padding-left: 25px;
  font-size: 11px;
  color: var(--color-red);
}
.warning::before{
  content:"";
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: var(--font-title);
  background: url(../img/ic_warning.svg) no-repeat left center/contain;
}
.view-more{
  position: relative;
  padding-right: 20px;
  font-weight: bold;
  color:var(--color-lighttxt);
}
.view-more::after {
  position: absolute;
  content:"";
  display: inline-block;
  right: 0;
  top:50%;
  transform: translateY(-50%);
  width: 18px;
  height: 14px;
  background: url(../img/ic_arrow-right.svg) no-repeat right center/contain;
}
.bar {
  display: inline-block;
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
  background-color: var(--color-grey);
}
.divide {
  display: inline-block;
  width: 100%;
  height: 5px;
  background-color: var(--color-lightgrey);
}
.bar_text {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--color-lighttxt);
  margin: 0 10px;
  vertical-align: middle;
}
.enter {display: block; }
.chk-red{
  width: 16px;
  height: 11px;
}
.notice_mark {
  position: relative;
  font-weight: bold;
  color: var(--color-blue);
}
.open-div {cursor: pointer;}
.open-div img{max-width: 17px;}
.toggle-wrap {display: none;}
.img-arrow {
  display: inline-block;
  margin-left: 10px;
  width: 14px;
  height: 14px;
  background: url(../img/ic_arrow-down.svg) no-repeat center 80%/12px;
  opacity: .6;
}
.img-arrow.on {
  background: url(../img/ic_arrow-up.svg) no-repeat center 60%/11px;
  opacity: 1;
}

/* 페이지네이션 */
.list-pagination {justify-content: center;display:flex;width: 100%;text-align: center;align-items:center;}
.pagination-first,
.pagination-last {background-image:url(/comm/images/ic_pagination_double.svg);}
.pagination-last,
.pagination-next {transform: rotate(180deg);}
.pagination-prev,
.pagination-next {background-image:url(/comm/images/ic_pagination.svg);}
.btn-table_view, .btn-table_social, .btn-modal_close, .btn-pagination{
    width: 28px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    /* float: left; */
    color:#000;
}


/* 배경 색상 추가 */
.bgwhite {background-color: #fff;}