@charset "utf-8";

/* ********************************************************************************************* */
/* sale */
:root {
  --font-basic: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;  

  --text-body: #000;
  --text-gray: #666;
  --text-gray-light: #888;

  --gray-7: #333;
  --gray-bg: #f6f6f6;

  --btn-gray: #6F6F6F;

  --rs-red: #E22746;
  --rs-skyblue: #27ABE2;
  --form-box-border:#aeaeae;
  --list-border:#F1F1F1;
  --t-border:#1C2E45;
}

:lang(zh-cn) {
  --font-basic: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;  
}


/* ********************************************************************************************* */
/* common */
/* ********************************************************************************************* */
body { min-width:320px; width:100%; overflow-wrap:anywhere; font-family:var(--font-basic); letter-spacing:-0.02em; font-weight:400; font-size:1rem;  font-feature-settings:"tnum"; color:var(--text-body);}
small { display:block; }
i { display:inline-block; }
small > i { margin-right:.25rem; }
.skip-to-main { position:absolute; height:1px; margin-bottom:-1px; overflow:hidden; text-align:center; }
.skip-to-main:focus { position:absolute; top:0; left:0; width:100%; height:auto; margin-bottom:0; z-index:501; }

.rs-text { color:var(--text-body) }
.rs-red { color:var(--rs-red) }
.rs-grid-600 { max-width:600px; margin:auto; }



/* ********************************************************************************************* */
/* utill */
/* ********************************************************************************************* */
.text-block-inline { display:block; }
.text-inline-block { display:inline; }
.text-center { text-align:center; }

.hidden { display:none !important; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0,0,0,0); overflow:hidden; }


/* grid */
.d-grid { display:grid; grid-template-columns: repeat(12, 1fr); }
.g-col-1 { grid-column: span 1; }
.g-col-2 { grid-column: span 2; }
.g-col-3 { grid-column: span 3; }
.g-col-4 { grid-column: span 4; }
.g-col-5 { grid-column: span 5; }
.g-col-6 { grid-column: span 6; }
.g-col-7 { grid-column: span 7; }
.g-col-8 { grid-column: span 8; }
.g-col-9 { grid-column: span 9; }
.g-col-10 { grid-column: span 10 ;}
.g-col-11 { grid-column: span 11 ;}
.g-col-12 { grid-column: span 12 ;}

.g-center-8 { grid-column: 3 / span 8;}
.transition-cb { transition:all .3s cubic-bezier(.51,.92,.24,1.15); }

/* fixed */
.fixed-bottom { position:fixed; left:0; bottom:0; min-width:320px; width:100%; z-index:200; }

/* font weight */
.fw-500 { font-weight:500; }
.fw-700 { font-weight:700; }


@media all and (min-width: 767px) {
  .text-block-inline { display:inline; }
  .text-inline-block { display:block; }
  
  .d-grid { gap:1rem; }
}




/* ********************************************************************************************* */
/* component */
/* ********************************************************************************************* */
/* button */
.rs-btn { display:flex; align-items:center; justify-content:center; width:100%; border:none; outline:none; font-family:var(--font-basic); font-size:1rem; font-weight:600; transition:all .3s ease; cursor:pointer;}
.rs-btn--primary { background:var(--rs-red); color:#fff;  }
.rs-btn--secondary { background:var(--rs-skyblue); color:#fff; }
.rs-btn--gray { background:var(--btn-gray); color:#fff; font-weight:400; }

.rs-btn--round { height:1.875rem;  padding:0 .65rem; border:1px solid var(--gray-7); border-radius:2rem !important; font-size:.875rem; }

/* button size */
.rs-btn--lg { height:4rem; font-size:1.125rem; }

/* disable */
.disabled, :disabled { opacity:.5; pointer-events:none; }


@media all and (min-width: 440px) {
  .rs-btn--round { height:2rem; padding:0 .75rem;  }
}

@media all and (min-width: 767px) {
  .rs-btn { border-radius:.25rem; }
  .rs-btn--round { height:2.125rem; padding:1rem; font-size:1rem; }
  .rs-btn--primary { font-weight:600; }
  .rs-btn--lg { font-size:1.25rem; }
}

@media (hover: hover) {
  .rs-btn--primary:hover { background:#BA0D2A; }
  .rs-btn--secondary:hover { background:#27ABE2; }
  .rs-btn--round:hover { background:var(--gray-7); color:#fff; }
}


/* ********************************************************************************************* *
/* form */
input::placeholder, textarea::placeholder, select::placeholder { color:var(--form-box-border) !important; }
input:focus::placeholder, textarea:focus::placeholder { color: transparent !important; }

.rs-form + .rs-form { margin-top:1.5rem; }
.rs-form__label { display:block; margin-bottom:.25rem; line-height:1.33; font-size:clamp(14px, calc(14px + (16 - 14) * ((100vw - 420px) / (640 - 420))), 16px); color:var(--text-gray); }
.rs-form__essential { margin-left:.125rem; vertical-align:inherit; font-size:.3125rem; color:var(--rs-red); }
input.rs-form__control { display:flex; align-items:center; height:3rem; padding:.75rem; background:var(--gray-bg); font-size:clamp(14px, calc(16px + (18 - 16) * ((100vw - 420px) / (640 - 420))), 12px) }

/* form textarea */
.rs-form__textarea { min-height:10rem; padding:.75rem; background:var(--gray-bg); font-size:clamp(16px, calc(16px + (18 - 16) * ((100vw - 420px) / (640 - 420))), 18px); resize:none; }

/* form info & alert */
.rs-form__info, 
.rs-form__alert { display:flex; margin-top:.25rem; line-height:1.25; color:var(--rs-red); }
.rs-form__info { color:var(--text-gray-light) }
.rs-form__alert { color:var(--rs-red) }
.rs-form__info i, 
.rs-form__alert i { padding-top:1px; }

/* form check basic */
.rs-check { display:flex; }
input.rs-check__control { width:1.5rem; height:1.5rem; border-radius:50%; -webkit-appearance:none; appearance:none; background-position:center; background-repeat:no-repeat; background-size:contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z' fill='rgba(174,174,174,1)'%3E%3C/path%3E%3C/svg%3E"); transition:all .3s;}
input.rs-check__control:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z' fill='rgba(0,0,0,1)'%3E%3C/path%3E%3C/svg%3E"); }
.rs-check__label { padding-left:.25rem; line-height:1.5; font-weight:500; }

/* form check btn style */
.rs-form-check { display:inline-flex; margin-top:.25rem; }
.rs-form-check + .rs-form-check { margin-left:.5rem; }
.rs-btn-check { position:absolute; clip:rect(0,0,0,0); pointer-events:none; }
.rs-btn-label { display:inline-flex; padding:.375rem .75rem; border-radius:.25rem; border:1px solid var(--text-body); font-size:.8125rem; transition:all .3s ease; }
.rs-btn-check:checked + .rs-btn-label { background:var(--text-body); color:#fff; }


@media all and (min-width: 640px) {
  input.rs-check__control { width:1.75rem; height:1.75rem; }
  .rs-check__label { font-size:1.125rem; }
} 


/* ********************************************************************************************* *
/* mobile touch */
.touch {position:relative; overflow:hidden;}
.touch:active::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-blend-mode: multiply; background-color:rgba(0,0,0,.2); z-index:10; pointer-events: none;}




/* ********************************************************************************************* */
/* sub */
/* ********************************************************************************************* */
.rs-btn-area { max-width:480px; margin:auto; padding-top:1.5rem; text-align:center; }
.rs-caution { display:inline-block; margin-bottom:1rem; line-height:1.33; font-size:1rem; color:var(--text-gray-light) } 

@media all and (min-width: 767px) {
  .rs-btn-area { padding-top:.5rem; }
  .rs-caution { font-size:1.125rem; }
}


/* ********************************************************************************************* */
/* 결제 정보 확인 */
/* form box */
.rs-form-box {padding-top:1.5rem;}
.rs-form-box__title { margin-bottom:.625rem; line-height:1.3; font-weight:600; font-size:clamp(1.25rem, 5vw, 1.75rem); font-size:clamp(20px, calc(20px + (28 - 20) * ((100vw - 420px) / (768 - 420))), 28px)}
.rs-form-box__desc { color:var(--text-gray-light); font-size:clamp(16px, calc(16px + (18 - 16) * ((100vw - 420px) / (640 - 420))), 18px) }
.rs-form-box ul { margin-top:2rem; }

/* tab */
.r-tabs { display:inline-flex; }
.r-tab-links { display:inline-flex; align-items:center; min-height:1.75rem; margin-right:.5rem; margin-bottom:.3125rem; padding:0.125rem .75rem; border-radius:.25rem; border:1px solid var(--text-body); background:#fff; text-align:center; font-size:.8125rem; }
.r-tab-links.active { background:var(--text-body); color:#fff; }
.r-tab-content { margin-top:.125rem; }


@media all and (min-width: 641px) {
  .rs-form-box { padding:2.5rem 2rem 3.75rem; border:1px solid var(--form-box-border); background:var(--gray-bg); }
  .rs-form-box .rs-form__control,
  .rs-form-box .rs-form__textarea { background:#fff; } 
  .rs-form-box__btn { position:static; margin-top:2.5rem; }

  .r-tab-links { height:2rem; font-size:.875rem; }
}

@media all and (min-width: 767px) {
  .rs-form-box { padding:2.5rem 0 3.75rem; }
}


/* ********************************************************************************************* */
/* 결제 구매 내역 */
.pi-section { position:relative; padding-bottom:2.5rem; }
.pi-section::before { content:''; position:absolute; bottom:0; left:-1.25rem; right:-1.25rem; height:.5rem; background:#eee; }
.pi-section__title { padding:1.25rem 0 .625rem; font-size:1.25rem; font-weight:600; } 
.pi-amount, .pi-state { width:16% }

/* table 분기 : 800px */
.rs-table { 
  --thead-width:30%;
  display:none; border-bottom:1px solid var(--t-border);
}
.rs-table th, .rs-table td { line-height:1.33; font-size:1rem; }

/* 반응형 테이블 */
.rs-table--responsive { display:flex; }
.rs-table--responsive thead { width:var(--thead-width) }
.rs-table--responsive tbody { width:calc(100% - var(--thead-width)); }
.rs-table--responsive tr, .rs-table--responsive th, .rs-table--responsive td { display:block; width:100%;  }
.rs-table--responsive th, .rs-table--responsive td { min-height:2.5rem; padding:.625rem 0; border-bottom:1px solid var(--list-border); line-height:1.33; }
.rs-table--responsive th { color:var(--text-gray-light); font-size:.8125rem; }
.rs-table--responsive td { font-size:.9375rem; }

/* ul(basic) 분기 : 800px */
.basic-list { border-top:1px solid var(--list-border); line-height:1.33; }
.basic-list__item { display:grid; grid-template-columns: repeat(12, 1fr); align-items:center; border-bottom:1px solid var(--list-border); }
.basic-list__title, 
.basic-list__desc { padding:.625rem 0; } 
.basic-list__title { grid-column:span 4; padding-right:.5rem; color:var(--text-gray-light); font-size:.8125rem; }
.basic-list__desc { grid-column:span 8; font-size:.9375rem; }

/* ul(pc에서 table) */
.basic-list--table + .basic-list--table { border-top-width:0; }
.basic-list--table .basic-list__desc { text-align:right; }

@media all and (min-width: 400px) {
  .basic-list__title { font-size:1rem; }
  .basic-list__desc { font-size:1rem; text-align:right; }
}

@media all and (min-width: 640px) {
  .pi-section::before { left:-1.75rem; right:-1.75rem; }
}

@media all and (min-width: 800px) {
  .pc-fw-700 { font-weight: 700; }
  .pi-section { padding-bottom:2rem; }
  .pi-section:before { display:none; }
  .pi-section__title { padding-top:0; font-size:1.5rem; }

  .rs-table { display:table; }
  .rs-table th, .basic-list--table .basic-list__title { padding:.25rem .5rem; border-top:1px solid var(--t-border); background:var(--gray-bg); color:var(--text-body) }
  .rs-table td, .basic-list--table .basic-list__desc { padding:1.25rem .5rem; }
  .rs-table th, .rs-table td { text-align:center; }

  .basic-list.mobile-only { display:none; }
  .basic-list--table { display:flex; border-width:0; }
  .basic-list--table + .basic-list--table { margin-top:.5rem; border-bottom:1px solid var(--t-border); }
  .basic-list--table .basic-list__item { width:20%; border-width:0;}
  .basic-list--table .basic-list__item.mobile-only { display:none; }
  .basic-list--table .basic-list__item, 
  .basic-list--table .basic-list__title,
  .basic-list--table .basic-list__desc { display:block; text-align:center; font-size:1rem; }
  .basic-list--strong .basic-list__desc { /*font-weight:600;*/ }
}

@media all and (min-width: 1024px) {
  .rs-table th, .rs-table td,
  .basic-list--table .basic-list__title,
  .basic-list--table .basic-list__desc { font-size:1.25rem; }
  .rs-table td, 
  .basic-list--table .basic-list__desc { padding:1.5rem .5rem; }
}


/* ********************************************************************************************* */
/* 고객센터 문의하기 */
.agree-terms { margin-top:1.75rem; line-height:1.5; }
.agree-terms__title { margin-bottom:.5rem; font-weight:600; font-size:1rem; }
.agree-terms__desc { font-size:.875rem; color:var(--text-gray-light) }
.agree-terms__desc:last-of-type { margin-bottom:.75rem; }

@media all and (min-width: 640px) {
  .agree-terms__title { font-size:1.25rem; }
  .agree-terms__desc { font-size:1rem; }
  .agree-terms { padding:1rem 1.25rem; border-top:1px solid var(--text-body); border-bottom:1px solid var(--text-body); }
}