/*------------------
또또사랑 100
g0G6YKp0/benefit_event.jsp
-----------------*/
.nobreak {
  white-space: nowrap;
}
.eventLayoutBox .rg{
	font-weight:500;
}
.freed_mg{
    margin-top: 140px;
    margin-bottom: 140px;
}
.eventCon_01{
    background-color: #FFFEF9;
}
.eventCon_02{
    background-color: #FF7700;
}

.eventCon_02{
    background-color: var(--pri700, #FF7A00);
    display: block;
    padding-top: 60px;
    padding-bottom: 60px;
}

.mbus .eventCon_02{
 background: linear-gradient(90deg, #530E8F 0%, #442DC0 100%);
}


.point_cardWrap{
    gap:20px;
    flex-wrap: wrap;
}
.point_cardIcon{
    margin: 0 auto;
}
.point_cardBox {
  border-radius: 12px;
  background-color: #fff;
  padding: 40px 20px;
  flex: 1 1 22%; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  gap:20px;
}

.concern_Wrap {
  display: flex;
  align-items: center;
  gap: 80px;          
}

.concern_box,
.concern_tit {
  flex: 1;            
}

.concern_box {
  min-height: 200px;  
}

/*txt*/
span.pointLight{
    color:#FFFFB2;
}

.whTxt{
    color:#fff;
}
.eventConTit{
    font-size: 32px;
    text-align: center;
}
.point_cardTit{
    font-size: 22px;
    word-break: keep-all;
}
.point_cardSub{
    font-size: 16px;
    word-break: keep-all;
}
.concern_tit{
    font-size: 32px;
    text-align: center;
}
/* ==== 기본 레이아웃 ==== */
.concern_talk {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: 12px;
    padding-right: 12px;
}

.talk_row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.talk_row.right {
  justify-content: flex-end; /* 말풍선-아바타 순서 반전용 */
}

/* ==== 아바타 ==== */
.talk_avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 72px;
}

/* ==== 말풍선 ==== */
.talk_bubble {
  --c: #f2f2f2;  
  background: #fff;
  border: 2px solid var(--c);
  border-radius: 999px;     /* 캡슐 */
  padding: 16px 28px;
  font-size: 18px;
  line-height: 1.55;
  color: #333;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  word-break: keep-all;
}

/* 강조 컬러(키워드) */
.talk_bubble .hl {
  color: #ff7a00;
  font-weight: 700;
}
.hl{
  color: #ff7a00;
}
.p100_table .hl{
	font-weight:600;
}
/* ==== 테마 색상 ==== */
.talk_bubble_01 {
    border-radius: 999px 999px 999px 0;
}
.talk_bubble_02 {
    border-radius: 999px 999px 0 999px;
}
.talk_bubble_03 {
   border-radius: 999px 999px 999px 0;
}

/* ====== 레이아웃 ====== */

.p100_head { text-align: center; word-break: keep-all;}
.p100_tit  { font-size: 32px; word-break: keep-all; line-height: 1.3;}
.p100_desc { font-size: 18px; word-break: keep-all;}
.referTxt{font-size: 14px !important; word-break: keep-all;}
.referTxtLinkBox{
	display: block;
    text-align: center;
}
.referTxtLinkBox .referTxt{
	display:inline-block !important;
	margin: 0 !important;
}
.p100_cardWrap{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;     /* 카드 높이 동일 */
}

/* 카드 공통 */
.p100_cardBox{
  --c:#cbd5e1;
  --bg: rgba(0,0,0,0);
  background:#fff;
  border:2px solid var(--c);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(17,24,39,.06);
  padding: 28px 24px;
  display:flex;
  flex-direction:column;    /* 푸터를 바닥에 고정 */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  align-items: center;
}
.p100_cardBox:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(17,24,39,.10);
}

/* 카드 헤드(브랜드) */
.p100_cardHead{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.p100_brandMark{    width: auto;height: 30px;object-fit: contain;}
.p100_brandName{ font-size:14px; color:#6b7280; }

/* 카드 본문 */
.p100_cardBody{ display:flex; flex-direction:column; gap:10px; }
.p100_cardTit{ text-align: center; font-size: 22px;}
.p100_cardSub{ text-align: center; font-size: 16px; word-break: keep-all;}
.p100_cardSub strong{color:var(--gr900)}

/* 카드 푸터(버튼) */
.p100_cardFoot{ margin-top:auto; padding-top:16px; }
.p100_btnDetail{
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 16px;
  border:1px solid var(--gr150);
  border-radius:999px;
  background:#fff;
  font-size: 14px;
}

.theme-blue  { --c:#9cc8ff; }
.theme-orange{ --c:#FFCEB9; }
.theme-yellow  { --c:#FFDE98; }

.moBr{
    display: none;
}
.kv_tit_MO{
    display: none;
}

/* ===== 공통 변수 (기본톤) ===== */
.p100Section{
  --p100-accent: #FF7A00;         /* 버튼/강조 컬러 */
  --p100-accent-soft: #fff3e8;    /* 뱃지/라이트 톤 */
  --p100-border: #e5e7eb;
  --p100-text: #111827;
  --p100-muted: #6b7280;
}

/* 브랜드별 래퍼에서 색만 바꿈 */
.thinkbig_p100_wrap{
  --p100-accent:#ff7a00; --p100-accent-soft:#fff3e8;
}
.bookclub_p100_wrap{
  --p100-accent:#ff8a3d; --p100-accent-soft:#fff1e8;   /* 예시톤, 필요 시 교체 */
}
.smartall_p100_wrap{
  --p100-accent:#22c55e; --p100-accent-soft:#e8f8ef;   /* 예시톤(민트), 필요 시 교체 */
}

/* ===== 헤더 (기존 p100_* 유지) ===== */
.p100_badge{
  display:inline-block; margin-bottom:20px;
  padding:6px 12px; border-radius:4px;
  font-size:14px; color:var(--gr900); 
  font-weight: 700;
}

.p100_badge_01{
    background-color: #B2D6FF;
}

.p100_badge_02{
    background-color: #FFCEB9;
}
.p100_badge_03{
    background-color: #FFDE98;
}
.tag_logo_img{
    margin-left: auto;
    margin-right: auto;
    height: 30px;
    width: auto;
}

/* ===== 히어로 ===== */
.p100_hero{
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr); /* 왼쪽 고정 540, 오른쪽 나머지 */
  align-items: flex-start;
  gap: 60px;
}
.p100_hero.is-reverse{ grid-template-columns:1fr 1.35fr; }
.verti_hero{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.p100_media{
    width: fit-content;
}
.p100_img{
  width:100%; display:block; border-radius:16px; object-fit:cover; max-width: 540px;
}
.p100_media .subBanner_ImgIcon{
	width:80px;
	height:80px;
	left:10px;
	top:10px;
}
.brd_01 .subBanner_ImgIcon {
    background: #fff url(../images/assett/logo_thinkbig.svg) center / 64% no-repeat;
}
.brd_02 .subBanner_ImgIcon {
    background: #fff url(../images/assett/logo_bookclub.svg) center /70% no-repeat;
}
.brd_03 .subBanner_ImgIcon {
    background: #fff url(../images/assett/logo_smartall.svg) center /88% no-repeat;
}

/* 특징 리스트(공통) */
.p100_feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:30px; }
.p100_feat{ display:flex; gap:12px; align-items: center;}
.p100_feat-ico{ flex:0 0 80px; width:80px; height:80px; display:flex; align-items:center; justify-content:center; }

.p100_feat-tit{ font-size:18px; line-height:1.3; word-break: keep-all;}
.p100_feat-desc{ font-size:16px; line-height:1.6; margin-top:4px; word-break: keep-all;}
.mbus .p100_feat-tit{
  font-size: 22px;
}
.mbus .p100_feat-tit{
	padding-left: 12px;
}
.mbus .p100_feat-desc{
  position: relative;
  padding-left: 12px;
}
.mbus .p100_feat-desc::before{
  content: "•";
  position: absolute;
  left: 0;
  top:0;
}
.mbus .p100_feat{
  gap:40px;
  align-items: flex-start;
}
.mbus .p100_feat-tit{
  font-size: 22px;
  margin-bottom: 12px;
}
/* 로고 라인(공통) */
.p100_logoList{ display:block; overflow: hidden;}
.p100_logoList li{margin-bottom: 16px;}
.p100_logoList li:last-child{margin-bottom: 0;}
.p100_logoList:not(.smartall_logoList) img{width: 1959px;max-width: unset;}
.p100_logoList.smartall_logoList img{margin: 0 auto;}
.p100_logoList.bookclub_logoList{
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 가격 카드(공통) */
.p100_priceCard{
  max-width:900px; margin:24px auto 0; background:#fff; border:1px solid var(--p100-border);
  border-radius:16px; overflow:hidden;
}
.p100_priceCard.full{
  max-width: unset;
}
.p100_priceCard .price_head{
  background:#f8fafc; text-align:center;
  padding:12px; border-bottom:1px solid var(--p100-border);
}
.p100_priceCard .price_rows{padding: 0 40px;}
.p100_priceCard .row{
      display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    align-items: flex-end;
    margin-bottom: 20px;
    margin-top: 20px;
}
.p100_priceCard .label{ font-size:18px; word-break: keep-all;}
.p100_priceCard .minus-label{
    padding-left: 28px;
    position: relative;
}
.p100_priceCard .minus-label::before{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "-";
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background: var(--pri700, #FF7A00);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
}
.p100_priceCard .value{ font-size:18px; white-space:nowrap; }
.p100_priceCard .final_result{height: fit-content;}
.p100_priceCard .value.normal{color:var(--gr300); position: relative;
   height: fit-content;}
.p100_priceCard .value.normal::after{
    position: absolute;
    top:calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
    background-color: var(--pri700);
    content: "";
}
.label .referTxt{
    display: inline;
    margin-top: 0;
}
.value .referTxt{
    text-align: right;
}

.p100_priceCard .price_result{
  display:flex; justify-content:space-between; padding:20px 0; border-top:1px solid var(--p100-border);
  font-size:20px; color:var(--p100-text);
  align-items: center;
}
.p100_priceCard .price_result strong{ color:var(--p100-accent);font-weight: 700;}

/* CTA(공통) */
.p100_cta{ text-align:center; margin-top:40px;}

.p100_btnCTA{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px; padding:0 28px;
  border-radius:8px; background:var(--pri700); color:#fff; font-weight:600; text-decoration:none;
  width: 100%;
  max-width: 380px;
  font-size: 18px;
}

/*혜택영역*/
/* ===== Reward / Benefit ===== */

/* 한 행(왼쪽 제목 + 오른쪽 아이콘 그리드) */
.reward_group{
  display: grid;
  grid-template-columns: 220px 1fr; /* 왼쪽 제목 폭 고정 */
  align-items: start;
  gap: 28px 40px;
  padding: 24px 0;
}
.reward_group + .reward_group{
  border-top: 1px dashed var(--rw-line); /* 점선 구분 */
}

/* 왼쪽 제목 */
.reward_head .reward_title{
  font-size: 18px; line-height: 1.5;
}

/* 오른쪽 아이콘 그리드 */
.reward_grid{
  --cols: 5; /* 기본값 */
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(120px, 1fr));
  gap: 28px 24px;
  list-style: none; margin: 0; padding: 0;
}
.reward_grid.cols-3{ --cols: 3; }
.reward_grid.cols-4{ --cols: 4; }
.reward_grid.cols-5{ --cols: 5; }

/* 아이템 */
.reward_item{
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  font-size: 16px;
}
.reward_ico{
  width: 80px; height: 80px; object-fit: contain; display: block;
  margin-bottom: 8px;
}
.reward_name{
  font-size: 16px;
}


/* 표 래퍼 */
.table_wrap{ 
  margin: 18px 0 8px; 
}
.table_wrap_mo{
    display: none;
}
.table_wrap_mo .p100_table{
    min-width: unset;
}
.table_scroll{
  overflow-x:auto; 
  background:#fff;
  border-top: 1px solid var(--gr150);
  border-bottom: 1px solid var(--gr150);
}

/* 크롬, 사파리, 엣지 */
.table_scroll::-webkit-scrollbar {
  height: 6px;              /* 가로 스크롤 두께 */
}
.table_scroll::-webkit-scrollbar-track {
  background: #f1f1f1;       /* 트랙 색 */
}
.table_scroll::-webkit-scrollbar-thumb {
  background: #bbb;          /* 스크롤바 색 */
  border-radius: 3px;
}
.table_scroll::-webkit-scrollbar-thumb:hover {
  background: #999;          /* hover 시 색 */
}

/* 파이어폭스 */
.table_scroll {
  scrollbar-width: thin;     /* 얇게 */
  scrollbar-color: #bbb #f1f1f1; /* thumb / track */
}

/* 표 스타일 */
.p100_table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:820px;
  font-size:15px; color:#111827;
}
.p100_table thead th{
  background:#f8fafc;padding:14px 16px; border-bottom:1px solid #e5e7eb;
 
}
.p100_table tbody th,
.p100_table td{
  padding:14px 16px; border-bottom:1px solid #f1f5f9; white-space:nowrap;
   font-size: 16px;
}
.p100_table tbody tr:last-child th,
.p100_table tbody tr:last-child td{ border-bottom:0; }

.p100_table th.al-l, .p100_table td.al-l{ text-align:center; }
.p100_table th.al-r, .p100_table td.al-r{ text-align:center; }

/* 유의사항 */
.table_notes{
  margin-top:16px;
  color:var(--gr400);
  font-size:14px; line-height:1.5;
}
.table_notes li+li{ margin-top:4px; }

.table_notes li::before {
  content: ' \002E';
  margin-right: 4px;
}
/*최하단 유의사항*/
.eventCon_info{
    background-color: #FAFBFD;
}
.eventCon_info_last{
	background-color: #3F3F6E;
	padding-top: 20px;
	padding-bottom: 20px;
}
.eventCon_info_last .info_last_txt{
	color:#fff;
	text-align:center;
	font-size:18px;
}
.ev_info_tit, .ev_info_txt{
    color:#51575C;
    
}

.eventCon_info ul>li.cap1{
    font-size: 14px;
}

/* 스크린리더용 숨김 */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* 애니메이션: 왼쪽 → 오른쪽 */
.p100_logoList .leftToRight {
animation: scroll-ltr 30s linear infinite;
}

/* 애니메이션: 오른쪽 → 왼쪽 */
.p100_logoList .rightToLeft {
animation: scroll-rtl 30s linear infinite;
}

@keyframes scroll-ltr {
0%   { transform: translateX(-100%); }
100% { transform: translateX(0%); }
}

@keyframes scroll-rtl {
0%   { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}

.has_confetti-burst{
    position: relative;
}
.has_confetti-burst div.conImg{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
}

.canvas-wrap {
  width: 100%;              /* 부모 레이아웃 기준으로 크기 조절 */
  max-width: 900px;         /* 원하면 최대 너비 제한 */
  aspect-ratio: 900 / 411;  /* 비율 유지 */
  position: relative;
}
.mbus .canvas-wrap {
  width: 100%;              /* 부모 레이아웃 기준으로 크기 조절 */
  max-width: 720px;         /* 원하면 최대 너비 제한 */
  aspect-ratio: 720 / 486.11;  /* 비율 유지 */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}

#anim {
  position:absolute;
  inset:0;                  /* wrap 안에서 꽉 채움 */
  width:100% !important;
  height:100% !important;
  display:block;
}

.anim_pre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
 
 
  opacity: 1;
  transition: opacity .25s ease;
}
.anim_pre.hide {
  opacity: 0;
  pointer-events: none;
}
:root{
  --c1:#FF8A00; --c2:#FFC300; --c3:#87DFD5; --c4:#ffeeb6; --c5:#FFE17F;
}

/*배경장식*/

/*라인효과*/
.bg_line{
    position: absolute;
    width: 110%;
    height: 65%;
    left: -5%;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2000 / 430;
}
.lineSvg{
    position: absolute;
    inset: 0;
    width: 100% !important;
    bottom: 0;
    height: 100% !important;
    display: block;
}

/*흩날림효과*/

.confetti-stream{
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
  --scale:1;
  --startY:-15%;
  --endY:115%;
}

/* wrapper */
.confetti-stream i{
  position:absolute;
  top:var(--startY);
  left:var(--x,50%);
  transform:translate(-50%,-50%);
  animation: fall var(--dur,8s) linear var(--delay,0s) infinite,
             sway var(--swayDur,3s) ease-in-out var(--delay,0s) infinite alternate;
}

/* particle */
.confetti-stream i span{
  display:block;
  width:calc(10px * var(--scale));
  height:calc(18px * var(--scale));
  background:var(--color,var(--c1));
  border-radius:2px;
  opacity:0.6;
}

/* 색상 분배 */
.confetti-stream i:nth-child(5n+1) span{ --color:var(--c1); }
.confetti-stream i:nth-child(5n+2) span{ --color:var(--c2); }
.confetti-stream i:nth-child(5n+3) span{ --color:var(--c3); }
.confetti-stream i:nth-child(5n+4) span{ --color:var(--c4); }
.confetti-stream i:nth-child(5n+5) span{ --color:var(--c5); }

/* 모양 분산 */
.confetti-stream i:nth-child(3n)   span{ height:calc(14px * var(--scale)); }
.confetti-stream i:nth-child(4n)   span{ width:calc(8px * var(--scale)); height:calc(22px * var(--scale)); }
.confetti-stream i:nth-child(6n)   span{ border-radius:50%; }

/* 흔들림 분산 */
.confetti-stream i:nth-child(3n+1){ --swayDur:2.5s; }
.confetti-stream i:nth-child(3n+2){ --swayDur:3.5s; }
.confetti-stream i:nth-child(3n+3){ --swayDur:4.5s; }

/* === 40개 위치/시간/딜레이 분산 === */
.confetti-stream i:nth-child(1) { --x:5%;  --dur:7s;  --delay:-0.5s; }
.confetti-stream i:nth-child(2) { --x:10%; --dur:9s;  --delay:-2s; }
.confetti-stream i:nth-child(3) { --x:15%; --dur:8s;  --delay:-4s; }
.confetti-stream i:nth-child(4) { --x:20%; --dur:10s; --delay:-6s; }
.confetti-stream i:nth-child(5) { --x:25%; --dur:9s;  --delay:-8s; }
.confetti-stream i:nth-child(6) { --x:30%; --dur:8s;  --delay:-1.5s; }
.confetti-stream i:nth-child(7) { --x:35%; --dur:11s; --delay:-3.3s; }
.confetti-stream i:nth-child(8) { --x:40%; --dur:7.5s;--delay:-5.7s; }
.confetti-stream i:nth-child(9) { --x:45%; --dur:9.5s;--delay:-7.9s; }
.confetti-stream i:nth-child(10){ --x:50%; --dur:8.7s;--delay:-9s; }
.confetti-stream i:nth-child(11){ --x:55%; --dur:10s; --delay:-2.8s; }
.confetti-stream i:nth-child(12){ --x:60%; --dur:8.2s;--delay:-4.6s; }
.confetti-stream i:nth-child(13){ --x:65%; --dur:9.8s;--delay:-6.1s; }
.confetti-stream i:nth-child(14){ --x:70%; --dur:7.9s;--delay:-7.4s; }
.confetti-stream i:nth-child(15){ --x:75%; --dur:9.1s;--delay:-8.5s; }
.confetti-stream i:nth-child(16){ --x:80%; --dur:10.3s;--delay:-1.7s; }
.confetti-stream i:nth-child(17){ --x:85%; --dur:8.6s;--delay:-3.9s; }
.confetti-stream i:nth-child(18){ --x:90%; --dur:11s; --delay:-5.5s; }
.confetti-stream i:nth-child(19){ --x:95%; --dur:9.7s;--delay:-6.9s; }
.confetti-stream i:nth-child(20){ --x:12%; --dur:8.4s;--delay:-8.2s; }
.confetti-stream i:nth-child(21){ --x:18%; --dur:9.1s;--delay:-1.1s; }
.confetti-stream i:nth-child(22){ --x:23%; --dur:7.8s;--delay:-2.9s; }
.confetti-stream i:nth-child(23){ --x:28%; --dur:10.2s;--delay:-4.4s; }
.confetti-stream i:nth-child(24){ --x:33%; --dur:8.5s;--delay:-6.3s; }
.confetti-stream i:nth-child(25){ --x:38%; --dur:9.9s;--delay:-7.7s; }
.confetti-stream i:nth-child(26){ --x:42%; --dur:8.3s;--delay:-9.4s; }
.confetti-stream i:nth-child(27){ --x:47%; --dur:7.6s;--delay:-2.2s; }
.confetti-stream i:nth-child(28){ --x:53%; --dur:10.5s;--delay:-3.8s; }
.confetti-stream i:nth-child(29){ --x:58%; --dur:8.1s;--delay:-5.6s; }
.confetti-stream i:nth-child(30){ --x:63%; --dur:9.4s;--delay:-7.3s; }
.confetti-stream i:nth-child(31){ --x:68%; --dur:7.9s;--delay:-8.8s; }
.confetti-stream i:nth-child(32){ --x:73%; --dur:10.8s;--delay:-1.6s; }
.confetti-stream i:nth-child(33){ --x:77%; --dur:9.2s;--delay:-3.5s; }
.confetti-stream i:nth-child(34){ --x:82%; --dur:8.9s;--delay:-5.2s; }
.confetti-stream i:nth-child(35){ --x:87%; --dur:7.7s;--delay:-6.7s; }
.confetti-stream i:nth-child(36){ --x:91%; --dur:9.6s;--delay:-8.4s; }
.confetti-stream i:nth-child(37){ --x:96%; --dur:8.4s;--delay:-9.8s; }
.confetti-stream i:nth-child(38){ --x:14%; --dur:10.1s;--delay:-2.5s; }
.confetti-stream i:nth-child(39){ --x:27%; --dur:8.6s;--delay:-4.1s; }
.confetti-stream i:nth-child(40){ --x:59%; --dur:9.3s;--delay:-6.6s; }

/* === Keyframes === */
@keyframes fall{
  0%   { top:var(--startY); opacity:0; }
  5%   { opacity:1; }
  95%  { opacity:1; }
  100% { top:var(--endY); opacity:0; }
}
@keyframes sway{
  0%   { transform:translate(-50%,-50%) translateX(-20px) rotate(0deg); }
  100% { transform:translate(-50%,-50%) translateX(20px) rotate(160deg); }
}


/*네비게이션*/
/* 메뉴 */
:root{
  --gnb-h: 56px;               /* JS가 실제 높이로 갱신 */
  --gnb-bg:#fff;
  --gnb-fg:#222;
  --gnb-ac:#ff7a00;
  --gnb-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* 기본: 문서 흐름에 존재 */
.p100-nav:not(.fixed){
background-color: #ff7a00;
border-bottom:1px solid #ffb065;
}
.mbus .p100-nav:not(.fixed){
background-color: #4825B4;
border-bottom:1px solid #765ebd;
}
.p100-nav:not(.fixed) a{
color:#fff !important;

}
.p100-nav{
  position:relative;
  background:var(--gnb-bg);
  color:var(--gnb-fg);
  z-index:3;
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.p100-inner{
  height:var(--gnb-h);
  max-width:1160px;
  margin:0 auto;
  padding:0 20px;
  display:flex; align-items:center; justify-content:center;
}

.p100-menu{ display:flex; gap:36px; list-style:none; margin:0; padding:0; }
.p100-menu a{
  display:inline-block;
  padding: 8px 4px;
  font-weight:600;
  color:var(--gnb-fg);
  text-decoration:none;
  transition:color .15s ease;
  flex-shrink: 0;
}

.p100-menu a.on{ color:var(--gnb-ac); }

/* 고정 상태 */
.p100-nav.fixed{ position:fixed; top:86px; left:0; right:0; box-shadow:var(--gnb-shadow); z-index:2;}

/* 마지막 범위 지나면 자연스럽게 숨김 */
.p100-nav.is-hidden{ pointer-events:none; opacity:0; transform:translateY(-8px); }

/* 앵커 스크롤 보정 (5개 전부) */
#about100, #thinkbig100, #bookclub100, #smartall100, #reward100{
  scroll-margin-top: calc(var(--gnb-h) + 12px);
}


/*버튼*/
.gotoDBBox{
	position:static !important;
}
.eventFixed{
    width: 100%;
    padding: 0;
    left: 0;
    background: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid #f3f3f6;
}
.eventFixed.active{
	background:#e8ecf39e;
}
.eventFixed .eventFixedWrap{
    padding: 12px 20px;
    max-width: 1240px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}
.eventFixed .p100_btnCTA{
    max-width: 380px;
}
.eventFixed .p100_accent{
    max-width: 80px;
}
.eventFixed .pcCtaTxt.flxBox{
    gap: 30px;
    align-items: center;
}
.eventFixed .p100_desc{
    line-height: 1.3;
    font-size: 16px;
    text-align: left;
}
.freed_bn_st1{
  background: url(https://cache.wjthinkbig.com/WEB_RESOURCE/WJBOOKCLUB/images/OPENPAGE/202509/lovelove100/fluid_background.png) center center/cover no-repeat;
  background-attachment: fixed;
}
.freed_bn_st1{
  padding-top: 60px;
  padding-bottom: 60px;
}
/*추가 배너*/

/*원부분*/
.mbus_circle_wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mbus_circle{
  width: 180px;
  height: 180px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
   flex-shrink: 0;
}
.cirlc_txt{
  font-size: 22px;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
  padding-top: 4px;
}
.min-circle .cirlc_txt{
  background: linear-gradient(111deg, #FF8558 29.38%, #A32BFF 75.51%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.circ_fill_01{
  background:linear-gradient(111deg, #FF8558 29.38%, #A32BFF 75.51%);
}
.min-circle{
  background-color: #fff;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.circ_fill_02{
  background: linear-gradient(148deg, #8900AC 16.78%, #4F16B3 34.03%, #5368CE 96.52%);
}

/* ===== 하단 유도 화살표 ===== */
.down-arrows{
  --size: 24px;          /* 화살표(갈매기) 크기 */
  --thick: 4px;          /* 선 굵기 */
  --gap: 14px;           /* 두 화살표 간격 */
  --travel: 16px;        /* 이동 거리 */
  --color: #FF7A00;      /* 화살표 색상 */

  position: relative;
  width: calc(var(--size) + var(--thick));
  height: var(--size);
  margin: 10px auto 0;
  pointer-events: none;  /* 클릭 방해 X */
}

.down-arrows .arrow{
  position: absolute;
  left: 50%;
  width: var(--size);
  height: var(--size);
  transform: translateX(-50%) rotate(45deg);
  border-right: var(--thick) solid var(--color);
  border-bottom: var(--thick) solid var(--color);
  opacity: 0;
  animation: arrowDown 2s ease-in-out infinite;
}

/* 첫 번째/두 번째 화살표 위치와 딜레이 */
.down-arrows .a1{ top: 0;                  animation-delay: 0s;   }
.down-arrows .a2{ top: calc(var(--size)+var(--gap)); animation-delay: 1s; }

@keyframes arrowDown{
  0%   { transform: translate(-50%,  0) rotate(45deg); opacity: 0; }
  25%  { opacity: .9; }
  60%  { opacity: .9; }
  100% { transform: translate(-50%, var(--travel)) rotate(45deg); opacity: 0; }
}

/* 접근성: 모션 줄이기 선호 시 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce){
  .down-arrows .arrow{ animation: none; opacity: 1; }
}



/*미디어쿼리*/
@media (max-width:1280px){
  .point_cardBox{
    flex: 1 1 calc(50% - 20px);
  }
  .concern_Wrap{
   flex-direction: column; 
  }
}
@media (max-width:1080px){
  .p100_hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .p100_img{
    max-width: 100%;
  }
  .reward_group{
       grid-template-columns: 120px 1fr; 
  }
  .p100_cardWrap {
    grid-template-columns: 1fr;
}
  
}
@media only screen and (max-width: 1024px){
.p100-nav.fixed{
	top:80px;
	}
}
@media only screen and (max-width: 900px){
    .pcBr{
        display: none;
    }
    .moBr{
        display: block;
    }
    .kv_tit_PC{
        display: none;
    }
    .kv_tit_MO{
        display: block;
    }
    .point_cardBox{
        flex: 100%;
    }
    .confetti-stream{
        --scale:0.5;
    }
    .confetti-stream i:nth-child(2n){display: none;}
    .p100_logoList:not(.smartall_logoList) img {
        width: 1000px;
    }
    /*menu*/

    /*cta*/
    .pcCtaTxt{
        display: none;
    }
    .eventFixed .p100_btnCTA{
        max-width: 100%;
    }
    .eventFixed{
        border-radius: 0 !important;
    }

 /* ▼ 900px 이하: 가로 스크롤 + 한 줄 고정 */
  .p100-inner{
    height: 40px;
    padding: 0 12px;
    justify-content: flex-start;      
    overflow-x: auto;                 
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           
  }
  .p100-inner::-webkit-scrollbar{ display:none; }

  .p100-menu{
    gap: 0;
    flex-wrap: nowrap;     
    white-space: nowrap;   
  }
  .p100-menu li{ flex: 0 0 auto; }
  .p100-menu a{
    white-space: nowrap; 
    word-break: keep-all;
    font-size: 13px;
    padding: 10px 8px;
    line-height: 1;      
    display: inline-block;
    text-align: center;
  }

  /* 고정 상태(상단 붙을 때)도 가로 스크롤 유지 */
  .p100-nav.fixed{
    left: 0; right: 0;
  }
    .eventCon_info {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .eventCon_info_last {
	    padding-top: 12px;
	    padding-bottom: 12px;
	}
	.eventCon_info_last .info_last_txt{
		font-size:16px;
		}
}
@media only screen and (max-width: 720px){
	 /*nav*/
	 .p100-nav.fixed {
        top: 60px;
    }
    .p100_media .subBanner_ImgIcon {
    width: 40px;
    height: 40px;
    
	}
    .eventConTit {
        font-size: 20px;
        text-align: center;
        word-break: keep-all;
    }
    /* .eventConTit br{
        display: none;
    } */
    .point_cardTit{
        font-size: 16px;
        text-align: left;
    }
    .point_cardTit.txtMarginS{
        margin-bottom: 2px;
    }
    .point_cardSub {
        font-size: 14px;
        text-align: left;
    }
    .point_cardBox {
        flex-direction: row;
        padding: 20px;
    }
    .point_cardBox .referTxt{
        text-align: left;
    }
    .point_cardIcon{
        max-width: 60px;
        margin: 0;
    }
    .concern_talk{
      gap: 24px;
    }
    .eventCon_02{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .freed_mg {
        margin-top: 60px;
        margin-bottom: 60px;
    }
    .talk_avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }
    .talk_bubble{
        padding: 12px 16px;
        font-size: 15px;
        width: 100%;
        text-align: center;
    }
    .concern_Wrap{
        gap: 40px;
    }
    .concern_tit {
        font-size: 20px;
    }
    .p100_tit{
        font-size: 20px;
        margin-bottom: 8px;
    }
    .p100_desc {
        font-size: 16px;
        
    }
    .p100_head.boxMarginS{
        margin-bottom: 30px;
    }
    .p100_cardTit{
        font-size: 18px;
        margin-bottom: 0;
    }
    .p100_cardSub{
        font-size: 15px;
    }
    .p100_cardBox{
        padding: 16px;
    }
    .p100_brandMark{
        height: 20px;
    }
    .p100_btnDetail{
        font-size: 13px;
        padding: 8px 12px;
    }
    .p100_badge{
        padding: 2px 8px;
        font-size: 13px;
    }
    .referTxt {
        font-size: 11px !important;
        font-weight: 300 !important;
    }
    .p100_feat-tit{
        font-size: 16px;
    }
    .mbus .p100_feat-tit{
        font-size: 16px;
        margin-bottom: 4px;
    } 
    .p100_feat-desc{
        font-size: 14px;
    }
    .p100_feat-ico{
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
    }
    .p100_priceCard .price_head{
        font-size: 13px;
        line-height: 1.3;
        padding: 8px;
    }
    .p100_priceCard .price_rows {
        padding: 4px 12px;
    }
    .p100_priceCard .label{
        font-size: 13px;
        max-width: 140px;
    }
    .p100_priceCard .minus-label{
        padding-left: 22px;
    }
    .p100_priceCard .minus-label::before{
        width: 14px;
        height: 14px;
        font-size: 12px;
    }
    .p100_priceCard .value{
        font-size: 14px;
    }
    .p100_priceCard .price_result{
        padding: 8px 0;
        font-size: 16px;
    }
    .p100_priceCard .row{
        margin-top: 8px;
        margin-bottom: 8px;
        align-items: center;
    }
    .p100_btnCTA{
        font-size: 16px;
        min-height: 48px;
        line-height: 48px;
    }
    .reward_head .reward_title{
        font-size: 16px;
    }
    .reward_group {
        display: grid;
        grid-template-columns: 1fr;  /* 한 줄짜리 (세로 쌓임) */
        gap: 20px;                   /* 위아래 간격 */
        padding:0;
        align-items: start;
        margin-bottom: 20px;
    }
    .reward_head .reward_title br{
        display: none;
    }
    .reward_ico{
        width: 52px;
        height: 52px;
    }
    .reward_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(33% - 20px), 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .reward_grid.cols-5 {
    --cols: unset;  /* 변수 초기화 → 적용 안 됨 */
    }
    .reward_item{
       font-size: 14px;
    }
    .reward_item .referTxt{
       font-size: 10px !important;
    }
    .p100_table tbody th,
    .p100_table td{
        padding:12px;
        font-size: 13px;
        text-align: left;
    }
    .p100_table thead th{
        padding:12px;
        font-size: 13px;    
    }
    
    .table_wrap{
        display:none;
    }
    .table_wrap_mo{
        display: block;
    }
    .p100_table th:first-child,
    .p100_table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;        /* 위로 올려서 겹치지 않게 */
    background: #fff;  /* 스크롤할 때 글자 겹침 방지용 배경 */
    }
    .p100_table th:first-child{
    background:#f8fafc; 
    }
    .p100_feat{
        gap: 20px;
    }
    .mbus .p100_feat{
        gap: 20px;
    }
    .mbus_circle{
      width: 130px;
      height: 130px;
    }
    .mbus_circle:nth-child(2){
      width: 80px;
      height: 80px;
    }
    .cirlc_txt{
      font-size: 15px;
      padding-top: 5px;
    }
    .mbus .canvas-wrap{
      margin-left:10%;
      margin-right: 10%;
      width: 80%;
      margin-top: 3%;
    }
    .mbus .eventConTit br{
      display: block;
    }
    .bg_line {
        left: -21%;
        bottom: -1%;
        scale: 1.5;
        transform: rotate(-7deg);
    }
    .tag_logo_img {
      height: 24px;
    }
    /* ===== 하단 유도 화살표 ===== */
  .down-arrows{
    --size: 18px;          /* 화살표(갈매기) 크기 */
    --thick: 3px;          /* 선 굵기 */
    --gap: 12px;           /* 두 화살표 간격 */
    --travel: 14px;        /* 이동 거리 */

  }

}