@charset "utf-8";

/* 250320 nh농협카드 여행가득 서비스 */
:root {  
  --black: #363636;
  --text-gray: #494949;
  --primary: #0095ff;
  --secondary: #00009b;
  --tertiary: #dbfaff;
  --lemon: #fff88d;
}
body { letter-spacing: -0.03em; }
ul, li, li > * { user-select: text; }

.text-lemon { color: var(--lemon) !important; }
.text-primary { color: var(--primary) !important; }
.bg-primary { background: var(--primary) !important; }
.bg-lemon { background: var(--lemon) !important; }

/* btn-lg */
.nhct-btn-lg { display: block; width: 100%; margin-top: 7%; padding: 6% 0; text-align: center; }
.nhct-btn-lg--plus { background: var(--primary); }
.nhct-btn-lg--basic { background: var(--secondary); }
.nhct-btn-lg img { width: auto; height: clamp(13px, calc(13px + (32 - 13) * ((100vw - 320px) / (770 - 320))), 32px); margin: auto; }

.nhct-intro__desc { left: 0; bottom: 4%; width: 100%; padding: 0 12%; }
.nhct-intro__desc > span { margin-left: 20%; }
.nhct-intro__date { padding-left: 5%; }
.nhct-intro__bullet { left: -1%; top: 24%; height: clamp(5px, calc(5px + (20 - 5) * ((100vw - 320px) / (770 - 320))), 20px) }
.nhct-common-before { padding: 12% 14%; }
.nhct-plus { background: var(--secondary); }
.e-fs-17 { font-size: clamp(17px, calc(17px + (40 - 17) * ((100vw - 375px) / (770 - 375))), 40px) !important; }
.nhct-title { height: clamp(21px, calc(21px + (52 - 21) * ((100vw - 320px) / (770 - 320))), 52px); margin-bottom: 6%; }

.nhct-content { padding: 10% 6.4%; background: var(--nhct--bg); }
.nhct-content--plus { background-color: var(--secondary); }
.nhct-content--basic { background: var(--primary); }
.nhct-section { min-height: 200px; padding: 2%; padding-bottom: 2.5%; border-radius: 1.25rem; background: #fff; }
.nhct-section + .nhct-section { margin-top: 6%; }
.nhct-benefit { position: relative; padding: 8% 8% 0; }
.nhct-benefit__title > img { width: auto; height: clamp(16px, calc(16px + (38 - 16) * ((100vw - 320px) / (770 - 320))), 38px); }

/* 가격 */
.nhct-price { margin-bottom:7.5%; padding-top:clamp(10px, calc(10px + (24 - 10) * ((100vw - 320px) / (770 - 320))), 24px); }
.nhct-price del { font-size:clamp(12px, calc(12px + (29 - 12) * ((100vw - 320px) / (770 - 320))), 29px); }
.nhct-price__sale { margin-top:1%; font-size:clamp(22px, calc(22px + (53 - 22) * ((100vw - 320px) / (770 - 320))), 53px); letter-spacing:-0.03em; }
.nhct-price__won { font-size:clamp(15px, calc(15px + (34 - 15) * ((100vw - 320px) / (770 - 320))), 34px); }

/* desc, link */
.nhct-benefit__desc { margin-bottom: 7%; margin-right: -4%; }
.nhct-benefit__desc > * { line-height: 1.25; letter-spacing: -0.06em; word-break: keep-all; font-size: clamp(13px, 3.4vw, 24px); color: var(--text-gray); }
.nhct-benefit__desc > * + *, .color { margin-top: 1.5%; color: var(--secondary); }
.nhct-content--plus .nhct-benefit__desc > * + *, .nhct-content--plus .color { color: var(--primary); }

.nhct-benefit__link { display:inline-block; padding-bottom:.5px; border-bottom:3px solid var(--nhct--bg); }

/* 구매하기 btn */
.nhct-btn { position: absolute; right: -4%; top: clamp(52px, calc(52px + (125 - 52) * ((100vw - 375px) / (770 - 375))), 125px); width: clamp(156px, calc(156px + (378 - 156) * ((100vw - 320px) / (770 - 320))), 378px); height: clamp(40px, 12.5vw, 94px); background: var(--primary); }
.nhct-content--basic .nhct-btn { background: var(--secondary) }
.nhct-btn > img { width: auto; height: clamp(14px, 4.15vw, 33px); }

/* 꼭 읽어주세요 */
.nhct-caution { padding: 12% 6% 10%; color: #211d1e; }
.nhct-caution__content { letter-spacing: -0.06em;; }
.nhct-list__item { position: relative; margin-right: -2%; padding-left: 5.2%; line-height: 1.3; word-break: keep-all; font-size: clamp(16px, calc(16px + (37 - 16) * ((100vw - 375px) / (770 - 375))), 37px); color: var(--nhct-black); }
.nhct-list__item:before { content: ''; position: absolute; top: clamp(6px, calc(6px + (12 - 6) * ((100vw - 320px) / (770 - 320))), 12px); left: 1%; width: clamp(6px, 1.5vw, 12px); height: clamp(6px, 1.5vw, 12px); transform: rotate(45deg); border-radius: .25rem; background: #00009b; }
.nhct-list__item + .nhct-list__item { margin-top: 2%; }
.nhct-list__item > p { padding-left: 2%; }
.word-break { word-break: break-all; }

/* tab */
.r-tab { display: flex; }
.r-tab__indicator { display: grid; align-content: center; width: 23%; }
.r-tab-links { height: clamp(32px,8.3vw ,64px); margin-bottom: 8%; padding-left: 10%; border-top-left-radius: 32px; border-bottom-left-radius: 32px; background: #C7C9C8; text-align: left; font-size: clamp(14px, 3.6vw, 28px); font-weight: 700; color: #fff; transition: all .3s; }
.r-tab__main { width: 77%; }
.r-tab__content { display: none; border-radius: 1.25rem; box-shadow: 6px 4px 10px rgb(0,0,0,.05); }

.r-tab-links.active-link { background:var(--tertiary); font-size:clamp(17px, 4.4vw, 34px); color:#002c81; } 
.r-tab__content.active-tab { display:block; }


/* *********************************************************************************************** */
/* 250825 추가 */
.nhct-prize { padding: 12% 4%; background: #fff77b; }
.nhct-prize__inner { padding: 7% 0; background: #FFF; text-align: center; }
.nhct-prize__title { height: clamp(42px, calc(42px + (99 - 42) * ((100vw - 320px) / (770 - 320))), 99px); }
.nhct-prize__desc { height: clamp(91px, calc(91px + (213 - 91) * ((100vw - 320px) / (770 - 320))), 213px); margin-top: 4%; }
.nhct-prize__date { margin-top: 8%; font-weight: 500; }
.nhct-prize__benefit { position: relative; }
.nhct-prize__benefit::before { content:''; position: absolute; left: 0; bottom: 10%; width: 100%; height: 65%; background: #FFA100; z-index: 1; }
.nhct-prize__img { position: relative; margin-top: 5%; height: clamp(151px, calc(151px + (353 - 151) * ((100vw - 320px) / (770 - 320))), 353px); z-index: 2; }
.nhct-prize__btn { position: relative; margin: 12% 6% 0; padding: 6%; background: var(--secondary); z-index: 3; }
.nhct-prize__btn img { height: clamp(15px, calc(15px + (34 - 15) * ((100vw - 320px) / (770 - 320))), 34px); }
.nhct-prize__list { margin-top: 8%; padding: 0 5%; text-align: left; }
.nhct-prize__item { position: relative; margin-bottom: 3%; padding-left: 4%; word-break: keep-all; line-height: 1.3;}
.nhct-prize__item::before { content:''; position: absolute; top:22%; left:0; width: clamp(2px, 1vw, 8px); height: clamp(2px, 1vw, 8px); background:var(--secondary);}


/* *********************************************************************************************** */
/* 반응형 */
@media (max-width: 360px) {
  .nhct-btn { height:clamp(40px, 12vw, 92px); }
}

@media (max-width: 480px) {
  .nhct-section { border-radius:.75rem; }
  .nhct-benefit__link { border-bottom-width:1.5px; }

  .nhct-list__item:before { border-radius: 2px; }
  .nhct-intro__bullet { top: 30%; left: 1% }
}