@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');/* regular-400, medium-500, semibold-600, bold-700 */ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{--primary:#5267ad;--e-font:"Poppins", sans-serif;--k-font:'Pretendard';--hd-fixed-h:75px;--radius:20px}
*{-webkit-text-size-adjust:none}
body{background:#fff;font-size:0.81em;font-family:'pretendard';color:#111;word-break:keep-all}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:'pretendard'}
figure{margin:0}
#sh_wrapper{position:relative;width:100%;z-index:0}
#sh_wrapper *{word-break:keep-all}

/* HEADER */
#sh_hd{position:fixed;z-index:99;top:0;width:100%;background-color:rgba(48, 48, 48, 0.04)}
#sh_hd::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;backdrop-filter:blur(5px)}
#sh_hd.fixed{background-color:rgba(255,255,255,0.1)}
#sh_hd.sub{position:absolute}
#sh_hd.sub::before{display:none}

/* MAIN 공통 */
.btn--primary{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;line-height:1.5;border-radius:100px;background-color:#fff;color:var(--primary);transition:background-color 0.2s, color 0.2s !important;cursor:pointer}
.btn--primary:hover{background-color:var(--primary);color:#fff}
.btn--primary.orange{background-color:var(--primary);color:#fff}
.btn--primary.orange:hover{background-color:#fff;color:var(--primary)}
#sh_container #sh_sub_wrap{position:relative}
#sh_container .group-title{text-align:center}
#sh_container .group-title h2{font-size:56px;font-weight:800}
#sh_container em{color:var(--primary);font-style:normal}

#sh_content{overflow:hidden;position:relative;z-index:10;width:100%;max-width:1200px;min-height:550px;padding:70px 0;margin:0 auto;background:#fff}

/* FOOTER */
#sh_ft{position:relative;padding:60px 0; border-top:1px solid #111}
#sh_ft .inner{max-width:1140px;margin:0 auto}
#sh_ft h2.logo{padding-bottom:30px;font-family:var(--e-font);font-size:24px;font-weight:700;color:#111}
#sh_ft address{padding-bottom:5px;font-size:16px;font-weight:500;font-style:normal;line-height:1.75;color:#888}
#sh_ft .bottom{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:12px}
#sh_ft .bottom small{font-size:16px;color:#888}
#sh_ft .bottom small .lordicon-license{font-size:12px;color:rgba(0,0,0,0.2);margin-left:5px}
#sh_ft .bottom .sns-list{display:flex;gap:8px}
#sh_ft .bottom .sns-list a.link-sns{display:flex;align-items:center;justify-content:center;width:56px;aspect-ratio:1;background-color:#111;border-radius:100px}
#sh_ft .bottom .sns-list a.link-sns i{font-size:23px;color:#fff}
#sh_ft .link{display:flex;gap:12px}
#sh_ft .link a{font-size:15px}

/* 탑버튼 */
#toTop{opacity:0;visibility:hidden;cursor:pointer;position:fixed;right:20px;bottom:20px;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:75px;aspect-ratio:1;border-radius:20px;border:1px solid #e1e1e1;margin-right:-50px;border:1px solid #ddd;background:#fff;box-shadow:0 0 16px rgba(0,0,0,0.1);transition:all .2s}
#toTop .ic-top{width:21px;height:17px;background-image:url('/img/to-top.png');background-repeat:no-repeat;background-size:cover;transition:background-image 0.2s}
#toTop:hover .ic-top{background-image:url('/img/to-top-hover.png')}
#toTop span{font-size:13px;font-weight:700;color:#111}
#toTop.on{opacity:1;visibility:visible;margin-right:0}

#toKakao{
  cursor:pointer;
  position:fixed;
  right:20px;
  bottom:110px; /* toTop 위로 */
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:75px;
  aspect-ratio:1;
  border-radius:20px;
  border:1px solid #ddd;
  background:#ffe812;
  box-shadow:0 0 16px rgba(0,0,0,0.1);
}

#fix_tel .ic-kakao{
  width: 26px;
  height: 26px;
  background: url('/img/icon_kakao.svg') no-repeat center / contain;
}

#toKakao .ic-kakao{
  width:24px;
  height:24px;
  background:url('/img/icon_kakao.svg') no-repeat center/contain;
}

#toKakao span{
  font-size:13px;
  font-weight:700;
  color:#3c1e1e;
}

#toKakao{
  opacity:0;
  visibility:hidden;
  margin-right:-50px;
  transition:all .2s;
}

#toKakao.on{
  opacity:1;
  visibility:visible;
  margin-right:0;
}

/* 반응형 사이트맵 공통 */
#sh_site_map{position:relative;width:100%;font-family:'notokr-regular'}
#sh_site_map:after{display:block;content:"";visibility:hidden;clear:both}
#sh_site_map > div{width:31%;float:left;margin:0 1%}
#sh_site_map > div:nth-of-type(3n){margin-right:0}
#sh_site_map .sh_site_map_title{padding:10px 15px;border-bottom:2px solid #333;font-size:17px;font-weight:700;text-align:center;color:#222;font-family:var(--k-font)}
#sh_site_map ul{padding:0 15px 15px}
#sh_site_map .sh_site_map_box{min-height:205px;padding:17px 20px;border:1px solid #e1e1e1;border-top:none;font-size:14px;color:#333;line-height:40px}
#sh_site_map .sh_site_map_box li{border-bottom:1px dotted #ccc}
#sh_site_map .sh_site_map_box li:last-child{border:none}

/* 반응형 하단 버튼 공통 */
#fix_tel{opacity:0;display:none;position:fixed;right:15px;bottom:165px;z-index:999999;width:65px;height:65px;margin-right:-10px;border-radius:50%;font-size:30px;text-align:center;line-height:65px;color:#fff;background-color:#ffe812;box-shadow:5px 5px 5px rgba(0,0,0,.2);-webkit-transition:all .2s;transition:all .2s}
#fix_tel.active{opacity:1;margin-right:0}
#sh_ft_btns{display:none;padding:15px}
#sh_ft_btns .btns{overflow:hidden}
#sh_ft_btns .row2 a{width:50%}
#sh_ft_btns a{float:left;display:block;width:100%;height:55px;font-size:16px;font-weight:700;line-height:55px;color:#fff;text-align:center;background-color:var(--primary);font-family:var(--k-font)}
#sh_ft_btns a.tel{font-size:18px;font-weight:700;letter-spacing:0;font-family:'Poppins'}
#sh_ft_btns a i{padding-right:5px;font-size:18px}
#sh_ft_btns a.kakao{font-weight:normal;color:#402325;background-color:#ffe500}

/* 반응형 [s] */
@media (max-width:1500px){
.btn--primary{font-size:17px}
#sh_container .group-title h2{font-size:48px !important}
#sh_container .group-title p.desc{font-size:20px !important}
#sh_ft{padding:64px 0 34px}
#sh_ft h2.logo{padding-bottom:16px}
#sh_ft address{padding-bottom:24px;font-size:15px}
#sh_ft .bottom small{font-size:15px}
#sh_ft .link a{font-size:14px}
}
@media (max-width:1200px){
#sh_ft{padding:64px 20px 34px}
#toTop{right:15px;bottom:15px}
}
@media (max-width:1024px){
:root{--radius:15px}
.btn--primary{font-size:16px}
#sh_container .group-title h2{font-size:40px !important}
#sh_container .group-title p.desc{font-size:18px !important}
#sh_ft{padding:34px 20px}
#sh_ft .inner{display:flex;flex-direction:column;align-items:center;text-align:center}
#sh_ft h2.logo{padding-bottom:8px;font-size:22px}
#sh_ft address{padding-bottom:15px;font-size:14px}
#sh_ft .bottom{flex-direction:column-reverse;align-items:center;gap:15px;padding-bottom:10px}
#sh_ft .bottom .sns-list{gap:12px}
#sh_ft .bottom .sns-list a.link-sns{width:50px}
#sh_ft .bottom .sns-list a.link-sns i{font-size:20px}
}
@media (max-width:768px){
:root{--radius:10px}
/* 반응형 스타일 필수 [s] */
#sh_login, #sh_agree, #sh_register,#sh_mb_confirm, #sh_result{padding:15px;margin:15px auto;border:none}
#sh_login input[type=submit], #sh_agree .btn_wrap input[type=submit], #sh_register .btn_wrap input[type=submit],#sh_find_info input[type=submit], #sh_mb_confirm input[type=submit]{-webkit-appearance:none;appearance:none}
#sh_login .bnr .txt p a{color:#0054a6}
#sh_pw_confirm{width:100%;padding:30px 20px;border:none}
#sh_agree .inner{padding:15px}
#sh_agree .cont{padding:10px}
#sh_site_map{padding:30px 20px}
#sh_site_map > div{width:100%;margin:0}
#sh_site_map .sh_site_map_box{min-height:auto}
/* 반응형 스타일 필수 [e] */
#sh_container .group-title h2{font-size:32px !important}
#sh_container .group-title p.desc{font-size:16px !important}
.btn--primary{font-size:15px}
#sh_ft address{padding-bottom:13px;font-size:13px}
#sh_ft .bottom{gap:13px}

}
@media (max-width:480px){
#sh_hd{background-color:transparent}
#sh_hd.sub::before{display:none}
#sh_hd.sub{position:relative}
#fix_tel{display:block}
#sh_ft_btns{display:block}
#sh_container .group-title h2{font-size:28px !important}
#sh_container .group-title p.desc{font-size:15px !important}
.btn--primary{font-size:15px}
#sh_ft{padding-top:15px}
#toTop{right:15px;bottom:15px;width:65px;border-radius:100px}
#toTop span{font-size:12px}
#toTop .ic-top{width:17px;height:14px}
#toKakao{ display:none}
}
/* 반응형 [e] */







.sub_wrap {margin:100px auto 0; max-width:1140px; width:98%}
.top_tab{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin: 0 0 18px;
  padding: 10px 0;
  flex-wrap: wrap; 
}
.top_tab .tab_item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration:none;
  color:#222;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  transition: .15s ease;
}
.top_tab .tab_item:hover{
  border-color:#cc2559;
  color:#cc2559;
}
.top_tab .tab_item.active{
  background:#cc2559;
  border-color:#cc2559;
  color:#fff;
}
@media (max-width: 480px){
  .top_tab{ gap:8px; }
  .top_tab .tab_item{ flex:1; padding:0 10px; font-size:14px; }
}




.pkg-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.pkg-wrap{
  max-width:1140px;
  margin:0 auto 100px;
  /*display:grid;*/
  grid-template-columns: 1fr 360px;
  gap: clamp(16px, 2.6vw, 28px);
  align-items:start;
}

/* table container */
.pkg-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:auto; /* 모바일 가로 스크롤 */
  background:#fff;
}

/* table */
.pkg-table{
  width:100%;
  min-width: 760px; /* 모바일에서 가로 스크롤 */
  border-collapse: collapse;
  table-layout: fixed;
}

.pkg-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 10px;
  font-size: 15px;
  font-weight: 900;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.18);
}
.pkg-table thead th:last-child{ border-right:0; }

/* 서브 헤더 (회색) */
.pkg-table thead tr.subhead th{
  background:#e5e7eb;
  color:#111827;
  border-right: 1px solid #d1d5db;
  font-weight: 900;
}
.pkg-table thead tr.subhead th:last-child{ border-right:0; }

/* body */
.pkg-table tbody th,
.pkg-table tbody td{
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding: 14px 10px;
  font-size: 14.5px;
  line-height: 1.55;
  text-align:center;
  vertical-align: middle;
  background:#fff;
}
.pkg-table tbody td:last-child,
.pkg-table tbody th:last-child{ border-right:0; }

.pkg-table tbody th{
  background:#fafafa;
  font-weight: 900;
}

/* 회색 구분 행 */
.row-gray th,
.row-gray td{
  background:#e5e7eb !important;
  font-weight: 900;
}
.row-gray2{
  background:#fafafa !important;
}

/* notes */
.pkg-notes{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#374151;
  font-size: 14px;
  line-height: 1.65;
}
.pkg-notes li{ margin: 6px 0; }

/* right images */
.pkg-device{
  margin:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:end;
}
.pkg-device img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border:1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  background:#fff;
}
.pkg-cap{
  margin: 10px 0 0;
  text-align:center;
  color:#111827;
  font-weight: 900;
}

.pkg-right {display:none}
/* responsive */
@media (max-width: 980px){
  .pkg-wrap{ grid-template-columns: 1fr 320px; }
}
@media (max-width: 820px){
  .pkg-wrap{ grid-template-columns: 1fr; }
  .pkg-right{ order: 2; }
}
@media (max-width: 520px){
  .pkg-device{ gap: 8px; }
  .pkg-notes{ font-size: 13.5px; }
}



.price-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.price-wrap{
  max-width:1140px;
  margin:0 auto 100px;
  /*display:grid;*/
  grid-template-columns: 1fr 360px;
  gap: clamp(16px, 2.6vw, 28px);
  align-items:start;
}

/* header */
.price-title{
  margin:0 0 6px;
  font-size: clamp(20px, 2.2vw, 18px);
  font-weight: 900;
  letter-spacing:-.02em;
}
.price-desc{
  margin:0 0 14px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
}

/* table container (모바일 스크롤 대비) */
.price-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:auto;
  background:#fff;
}

/* table */
.price-table{
  width: 100%;
  min-width: 760px; /* 모바일에서 가로 스크롤 */
  border-collapse: collapse;
  table-layout: fixed;
}
.price-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 10px;
  font-size: 14.5px;
  font-weight: 900;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.18);
}
.price-table thead th:last-child{ border-right:0; }

.price-table tbody th,
.price-table tbody td{
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding: 12px 10px;
  font-size: 14px;
  line-height: 1.55;
  text-align:center;
  vertical-align: middle;
  background:#fff;
}
.price-table tbody td:last-child,
.price-table tbody th:last-child{ border-right:0; }

.price-table tbody th{
  background:#fafafa;
  font-weight: 900;
}

/* Local Unit 세로 텍스트 느낌 */
.vcat{
  width: 84px;
  background:#fff;
  font-weight: 900;
}
.vcat span{
  display:block;
  line-height: 1.1;
  letter-spacing:.02em;
}

/* number */
.num{
  font-weight: 950;
  color:#111827;
}

/* notes */
.price-notes{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#374151;
  font-size: 13.5px;
  line-height: 1.65;
}
.price-notes li{ margin: 6px 0; }

/* right images */
.price-device{
  margin:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:end;
}
.price-device img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border:1px solid var(--line);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  background:#fff;
}
.price-cap{
  margin: 10px 0 0;
  text-align:center;
  color:#111827;
  font-weight: 900;
}
.price-right {display:none}

/* responsive */
@media (max-width: 980px){
  .price-wrap{ grid-template-columns: 1fr 320px; }
}
@media (max-width: 820px){
  .price-wrap{ grid-template-columns: 1fr; }
  .price-right{ order: 2; }
}
@media (max-width: 520px){
  .price-device{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .price-desc{ font-size: 13.5px; }
}


.biz-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  padding: clamp(22px, 4vw, 54px) 16px;
  background:#fff;
  color:var(--ink);
}
.biz-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* heading */
.biz-head{ margin-bottom: 14px; }
.biz-kicker{
  margin:0 0 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing:-.02em;
}
.biz-sub{
  margin:0;
  font-size: 16px;
  color:#111827;
}

/* layout */
.biz-grid{
  /*display:grid;*/
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items:start;
}

/* table box */
.biz-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

/* table */
.biz-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.biz-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 12px;
  font-size: 15px;
  font-weight: 900;
}
.biz-table thead .col-a{ width: 160px; }

.biz-table tbody th,
.biz-table tbody td{
  border-top:1px solid var(--line);
  padding: 14px 12px;
  vertical-align: middle;
  font-size: 14.5px;
  line-height: 1.6;
}
.biz-table tbody th{
  background:#fafafa;
  font-weight: 900;
  color:#111827;
}

/* 가격 영역(세부사항 안에서 3열) */
.biz-price td{ padding: 12px; }
.biz-pricegrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.biz-priceitem{
  border:1px solid var(--line);
  border-radius: 12px;
  padding: 12px 10px;
  background:#fff;
  text-align:center;
}
.biz-priceitem .area{
  margin:0 0 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}
.biz-priceitem .won{
  margin:0;
  font-size: 16px;
  font-weight: 1000;
  letter-spacing:-.01em;
}

/* notes */
.biz-notes{
  margin: 0;
  padding: 14px 16px 16px 22px;
  border-top:1px solid var(--line);
  background:#fff;
  color:#111827;
}
.biz-notes li{
  margin: 6px 0;
  color:#374151;
  font-size: 13.5px;
  line-height: 1.6;
}

/* device */
.biz-devicecard{
  margin:0;
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  display:none
}
.biz-devicecard img{
  width:100%;
  height:auto;
  display:block;
}
.biz-devicecard figcaption{
  padding: 10px 12px;
  text-align:center;
  font-weight: 900;
  color:#111827;
  border-top:1px solid var(--line);
  background:#fafafa;
}

/* responsive */
@media (max-width: 980px){
  .biz-grid{ grid-template-columns: 1fr 300px; }
  .biz-table thead .col-a{ width: 140px; }
}
@media (max-width: 820px){
  .biz-grid{ grid-template-columns: 1fr; }
  .biz-device{ order: 2; }
  .biz-tablebox{ order: 1; }
}
@media (max-width: 520px){
  .biz-pricegrid{ grid-template-columns: 1fr; }
  .biz-table thead .col-a{ width: 120px; }
}


.brand-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  padding: clamp(24px, 4vw, 56px) 16px;
  background:#fff;
  color:var(--ink);
  margin:0 0 100px 0
}
.brand-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* header */
.brand-head{ margin-bottom: 14px; }
.brand-title{
  margin:0 0 6px;
  font-size: 18px;
  font-weight: 900;
}
.brand-desc{
  margin:0;
  font-size: 14.5px;
  line-height: 1.7;
  color:#111827;
}

/* layout */
.brand-grid{
  /*display:grid;*/
  grid-template-columns: 1fr 340px;
  gap: 18px;
  align-items:start;
}

/* table box */
.brand-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

/* table */
.brand-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.brand-table thead th{
  background: var(--brand);
  color:#fff;
  padding: 14px 10px;
  font-size: 14.5px;
  font-weight: 900;
}
.brand-table tbody th,
.brand-table tbody td{
  border-top:1px solid var(--line);
  padding: 14px 10px;
  font-size: 14px;
  line-height: 1.6;
  text-align:center;
}
.brand-table tbody th{
  background:#fafafa;
  font-weight: 900;
  color:#111827;
}

/* notes */
.brand-notes{
  margin:0;
  padding: 14px 16px 16px 22px;
  border-top:1px solid var(--line);
}
.brand-notes li{
  margin: 6px 0;
  font-size: 13.5px;
  color:#374151;
}

/* device */
.brand-devicecard{
  margin:0;
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  display:none;
}
.brand-devicecard img{
  width:100%;
  height:auto;
  display:block;
}
.brand-devicecard figcaption{
  padding: 10px 12px;
  text-align:center;
  font-weight: 900;
  background:#fafafa;
  border-top:1px solid var(--line);
}

/* responsive */
@media (max-width: 980px){
  .brand-grid{ grid-template-columns: 1fr 300px; }
}
@media (max-width: 820px){
  .brand-grid{ grid-template-columns: 1fr; }
}


.spec-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#cc2559;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}
.spec-wrap{
  max-width:1140px;
  margin:0 auto 100px;
  display:grid;
  grid-template-columns: 1fr 1fr; /* 기본은 2칸 */
  grid-template-areas:
    "full full"   /* 첫 줄: 한 줄 */
    "left right"; /* 두 번째 줄: 50% / 50% */
  gap: 20px;
}

.spec-wrap .full {
  grid-area: full;
}

.spec-wrap .left {
  grid-area: left;
}

.spec-wrap .right {
  grid-area: right;
}

@media (max-width: 767px){
  .spec-wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "full"
      "left"
      "right";
  }
  .spec-figure img{
  height:auto;
  display:block;
}
}

.spec-title{
  display:flex;align-items:center;gap:10px;
  font-size:20px;line-height:1.2;font-weight:800;color:#111;
  margin:0 0 18px;
}
.spec-title:before{
  content:"";width:10px;height:10px;background:#111;border-radius:2px;flex:0 0 auto;
}

/* left */
.spec-figure{
  margin:0;
  border:0 solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
.spec-figure img{
  height:auto;
  display:block;
  margin:0 auto;
}

.spec-notes{
  margin: 12px 0 0;
  padding-left: 18px;
  color:#374151;
  font-size: 14px;
  line-height: 1.65;
}
.spec-notes li{ margin: 6px 0; text-align:center}

/* right table */
.spec-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

.spec-table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.spec-table th,
.spec-table td{
  border-top:1px solid var(--line);
  padding: 14px 12px;
  font-size: 14.5px;
  line-height: 1.6;
  vertical-align: top;
}
.spec-table tr:first-child th,
.spec-table tr:first-child td{
  border-top:0;
}

.spec-table th{
  width: 170px;
  background:#fafafa;
  font-weight: 900;
  color:#111827;
}

.spec-table td{
  color:#111827;
}

.spec-table small{
  display:block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12.5px;
}

/* responsive */
@media (max-width: 900px){
  .spec-wrap{ grid-template-columns: 1fr; }
  .spec-table th{ width: 150px; }
}
@media (max-width: 520px){
  .spec-notes{ font-size: 13.5px; }
  .spec-table th, .spec-table td{ font-size: 14px; }
  .spec-figure img{ width:100%}
}


.ex-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --head:#3f3f3f;

  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.ex-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* grid */
.ex-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0; /* 이미지처럼 칸 나눔 느낌 */
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

/* card */
.ex-card{
  border-right: 1px solid var(--line);
  background:#fff;
}
.ex-card:last-child{ border-right:0; }

/* header */
.ex-head{
  margin:0;
  padding: 14px 14px;
  text-align:center;
  font-size: 15.5px;
  font-weight: 900;
  color:#fff;
  background: #838383;
}

/* thumbs */
.ex-thumbgrid{
  padding: 18px 14px;
  display:grid;
  grid-template-columns: repeat(1fr, 1fr);
  gap: 14px;
  align-items:center;
  justify-items:center;
}
.ex-thumb{
  margin:0;
  width: 100%;
  border-radius: 10px;
  overflow:hidden;
  background:#f3f4f6;
  border: 1px solid var(--line);
}
.ex-thumb img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

/* note area */
.ex-note{
  border-top: 1px solid var(--line);
  background:#f3f4f6;
  padding: 18px 18px 20px;
  min-height: 100%; /* 이미지처럼 하단 높이 맞춤 */
}
.ex-note ul{
  margin:0;
  padding-left: 18px;
  color:#111827;
  font-size: 14px;
  line-height: 1.75;
}
.ex-note li{
  margin: 6px 0;
}

/* responsive */
@media (max-width: 980px){
  .ex-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .ex-card:nth-child(2){
    border-right: 0;
  }
  .ex-card:nth-child(3){
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px){
  .ex-grid{
    grid-template-columns: 1fr;
  }
  .ex-card{
    border-right:0;
    border-top: 1px solid var(--line);
  }
  .ex-card:first-child{
    border-top:0;
  }
  .ex-thumbgrid{
    grid-template-columns: repeat(1fr, 1fr);
    gap: 10px;
    padding: 14px 12px;
  }
  .ex-note{
    min-height: unset;
  }
  .ex-note ul{
    font-size: 13.5px;
  }
}

/* =========================
   심의규정 표 섹션 (1140px 기준)
   - 1140px 이상: 가로 스크롤바 없음(내용 전체 보이게)
   - 1140px 미만: 필요 시 가로 스크롤
========================= */

.rule-sec{
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --head:#3f3f3f; /* 헤더 진회색 */
  background:#fff;
  color:var(--ink);
  padding: clamp(26px, 4vw, 58px) 16px;
}

.rule-wrap{
  max-width:1140px;
  margin:0 auto;
}

/* ✅ 1140 이상에서는 스크롤이 안 보이게 */
.rule-tablebox{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow: hidden; /* 데스크탑: 스크롤바 방지 */
  background:#fff;
}

/* ✅ 기본은 컨테이너 폭에 맞춰서 1140에서 다 보이게 */
.rule-table{
  width:100%;
  min-width: 0;          /* 핵심: 데스크탑에서 스크롤 원인 제거 */
  border-collapse: collapse;
  table-layout: fixed;
}

/* header */
.rule-table thead th{
  background:#838383;
  color:#fff;
  padding: 12px 12px;
  font-size: 15px;
  font-weight: 900;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.18);
}
.rule-table thead th:last-child{ border-right:0; }

/* body */
.rule-table tbody th,
.rule-table tbody td{
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding: 16px 14px;
  font-size: 14px;
  line-height: 1.65;
  vertical-align: top;
  background:#fff;
}

/* 마지막 컬럼 라인 제거 */
.rule-table tbody td:last-child,
.rule-table tbody th:last-child{ border-right:0; }

/* 구분 컬럼 */
.rule-table tbody th{
  background:#fafafa;
  font-weight: 900;
  text-align:center;
}

/* ✅ 1140에서 가장 보기 좋은 컬럼 비율 */
.rule-table .col-a{ width: 160px; }
.rule-table .col-b{ width: 440px; }
.rule-table .col-c{ width: auto; }

/* 리스트 스타일 */
.rule-ul{
  margin:0;
  padding-left: 18px;
}
.rule-ul li{ margin: 6px 0; }

.rule-ol{
  margin:0;
  padding-left: 18px;
}
.rule-ol li{ margin: 6px 0; }

/* ✅ 한글 가독성/줄바꿈 최적화 */
.rule-table td{
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* =========================
   Responsive
   - 1140px 미만부터 스크롤 허용 + 최소폭 부여
========================= */
@media (max-width: 1140px){
  .rule-tablebox{
    overflow:auto;        /* 필요 시에만 가로 스크롤 */
  }
  .rule-table{
    min-width: 980px;     /* 표 최소폭(원하면 920~1100 조절) */
  }
}

/* 모바일 폰트/패딩 미세 조정 */
@media (max-width: 520px){
  .rule-table thead th{
    font-size: 14px;
    padding: 11px 10px;
  }
  .rule-table tbody th,
  .rule-table tbody td{
    font-size: 13.5px;
    padding: 14px 12px;
  }
  
  .ex-head{
  margin:0;
  padding: 11px 14px;
  text-align:center;
  font-size: 15.5px;
  font-weight: 900;
  color:#fff;
  background: #838383;
}


}

.h100 {height:100px}







/* =========================
   기본
========================= */
#inc01{padding:160px 0 130px; width:98%; margin:0 auto}
#inc01 .inner{max-width:1180px;margin:0 auto}

/* =========================
   타이틀
========================= */
#inc01 .group-title{
    padding-bottom:70px;
    text-align:center;
}
#inc01 .group-title h2{
    padding-bottom:28px;
    font-size:48px;
    font-weight:700;
    color:var(--primary);
    letter-spacing:-0.04em;
}
#inc01 .group-title p.desc{
    font-size:21px;
    font-weight:700;
    line-height:1.6;
    color:#222;
    white-space:pre-line;
}
#inc01 .group-title p.desc em{
    color:var(--primary);
    font-style:normal;
}

/* =========================
   레이아웃 (높이 맞춤 핵심)
========================= */
#inc01 .monster-wrap{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:48px;
    align-items:stretch;
}

/* =========================
   카드 영역
========================= */
#inc01 .monster-card-area{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    height:100%;
}

#inc01 .monster-card{
    position:relative;
    height:100%;
    padding:34px 30px;
    border-radius:var(--radius);
    background:#fbfbfb;
    border:1px solid #e2e7f3;
    box-shadow:none;
    color:#222;
    overflow:hidden;
    transition:all .3s;
}

#inc01 .monster-card:nth-child(2),
#inc01 .monster-card:nth-child(3){
    background:#fafcfe;
}

#inc01 .monster-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(82,103,173,0.16);
}

#inc01 .monster-card::after{
    content:'';
    position:absolute;
    right:-35px;
    bottom:-35px;
    width:130px;
    height:130px;
    border-radius:50%;
    background:rgba(82,103,173,0.08);
}

#inc01 .monster-card span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    margin-bottom:24px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:700;
}

#inc01 .monster-card h3{
    margin-bottom:16px;
    font-size:24px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-0.04em;
    color:#1f2a44;
}

#inc01 .monster-card p{
    font-size:17px;
    font-weight:600;
    line-height:1.55;
    color:#4a5568;
    word-break:keep-all;
}

/* =========================
   우측 비주얼
========================= */
#inc01 .monster-visual{
    position:relative;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    padding:45px 35px 0;
    border-radius:36px;
    background:linear-gradient(180deg,#f7f8fa,#ffffff);
    box-shadow:0 18px 45px rgba(82,103,173,0.12);
}

/* 말풍선 */
#inc01 .monster-bubble{
    position:absolute;
    top:20px;
    left:20px;
    right:20px;
    padding:20px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 14px 30px rgba(82,103,173,0.12);
}

#inc01 .monster-bubble strong{
    display:block;
    margin-bottom:12px;
    font-size:23px;
    font-weight:700;
    line-height:1.35;
    color:var(--primary);
    letter-spacing:-0.04em;
}

#inc01 .monster-bubble p{
    font-size:16px;
    font-weight:700;
    line-height:1.5;
    color:#333;
    word-break:keep-all;
}

#inc01 .monster-visual img{
    max-width:80%;
    position:relative;
    z-index:1;
	bottom:25px
}

#inc01 .main-video-box{
    max-width:100%;
    margin:0 auto;
    padding:28px;
    border-radius:30px;
    background:#f7f9ff;
    border:1px solid #e2e7f3;
}

#inc01 video{
    width:100%;
    aspect-ratio:16/9;
    border-radius:20px;
}

#inc01 h2 {font-size:36px; text-align:center; margin:70px 0 20px 0}
/* =========================
   반응형 (모바일 기준 767)
========================= */
@media (max-width:1200px){
    #inc01{padding:110px 20px}
    #inc01 .group-title h2{font-size:42px !important}
    #inc01 .monster-wrap{gap:30px}
    #inc01 .monster-card{padding:30px 26px}
    #inc01 .monster-card h3{font-size:21px}
    #inc01 .monster-card p{font-size:16px}
}

@media (max-width:767px){
	body {overflow-x:hidden !important }
    #inc01{padding:70px 15px}
    #inc01 .group-title{padding-bottom:40px}
    #inc01 .group-title h2{font-size:34px !important}
    #inc01 .group-title p.desc{font-size:16px}

    #inc01 .monster-wrap{
        grid-template-columns:1fr;
		
    }

    #inc01 .monster-card-area{
        grid-template-columns:1fr;
        gap:16px;
    }

    #inc01 .monster-card{
        padding:26px 22px;
        border-radius:22px;
    }

    #inc01 .monster-card span{
        width:40px;
        height:40px;
        margin-bottom:18px;
    }

    #inc01 .monster-card h3{font-size:20px}
    #inc01 .monster-card p{font-size:15px}

    #inc01 .monster-visual{
        padding:240px 20px 0;
        border-radius:26px;
    }

    #inc01 .monster-bubble{
        top:15px;
        left:15px;
        right:15px;
        padding:15px;
    }

    #inc01 .monster-bubble strong{font-size:20px}
    #inc01 .monster-bubble p{font-size:15px}

    #inc01 .monster-visual img{
        max-width:260px;
    }
	#inc01 h2 {font-size:28px;}
}

@media (max-width:480px){
	#inc01 .monster-visual{
			padding:320px 20px 0;
			border-radius:26px;
		}
	#inc01 h2 {font-size:22px;}	
}



#inc02{
    position:relative;
    padding:150px 0 0;
    background:linear-gradient(180deg,#f7f9ff 0%,#ffffff 55%,#edf6ff 100%);
    overflow:hidden;
}
#inc02 .inner{max-width:1180px;margin:0 auto}
#inc02 .group-title{padding-bottom:60px;text-align:center}
#inc02 .group-title h2{
    padding-bottom:16px;
    font-size:48px;
    font-weight:700;
    color:#222;
    letter-spacing:-0.04em;
}
#inc02 .group-title h2 em{color:#5267ad;font-style:normal}
#inc02 .group-title p.desc{
    font-size:20px;
    font-weight:700;
    line-height:1.6;
    color:#333;
}

#inc02 .curriculum-wrap{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:24px;
    position:relative;
    z-index:2;
}
#inc02 .curriculum-card{
    padding:30px 24px 24px;
    border-radius:28px;
    background:#fff;
    border:1px solid #e2e7f3;
    box-shadow:0 18px 35px rgba(82,103,173,0.12);
    transition:all .3s;
	
	display:flex;
    flex-direction:column;
}
#inc02 .curriculum-card:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 45px rgba(82,103,173,0.18);
}
#inc02 .curriculum-head{margin-bottom:18px;text-align:center}
#inc02 .curriculum-head span{
    display:block;
    margin-bottom:10px;
    font-size:26px;
    font-weight:700;
}
#inc02 .mini .curriculum-head span{color:#d94b86}
#inc02 .mega .curriculum-head span{color:#2fa6a4}
#inc02 .master .curriculum-head span{color:#6a4bb5}

#inc02 .curriculum-head strong{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:130px;
    height:42px;
    padding:0 22px;
    border-radius:999px;
    font-size:18px;
    font-weight:700;
}
#inc02 .mini .curriculum-head strong{color:#d94b86;background:#fde7f0}
#inc02 .mega .curriculum-head strong{color:#2fa6a4;background:#dff6f4}
#inc02 .master .curriculum-head strong{color:#6a4bb5;background:#eee6ff}

#inc02 .card-character{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}
#inc02 .card-character img{
    max-height:88px;
    max-width:110px;
}
#inc02 .curriculum-card ul{
    display:grid;
    gap:10px;
	flex-grow:1;
}
#inc02 .mega ul,
#inc02 .master ul{
    grid-template-columns:1fr 1fr;
}
#inc02 .curriculum-card li{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    color:#34405a;
    text-align:center;
    word-break:keep-all;
}
#inc02 .mini li{background:#fff1f5}
#inc02 .mini li:nth-child(even){background:#fdf0f0}
#inc02 .mega li{background:#eef8ff}
#inc02 .mega li:nth-child(even){background:#edfafa}
#inc02 .master li{background:#f3f0fb}
#inc02 .master li:nth-child(even){background:#eef0fb}

#inc02 .curriculum-more{
    width:100%;
    height:48px;
    margin-top:18px;
    border:0;
    border-radius:999px;
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
	margin-top:20px;
}
#inc02 .mini-btn{background:#d94b86}
#inc02 .mega-btn{background:#2fa6a4}
#inc02 .master-btn{background:#6a4bb5}

#inc02 .curriculum-wave{
    position:relative;
    margin-top:80px;
    padding:0 0 70px;
    overflow:hidden;
}
#inc02 .wave-inner{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
}
#inc02 .wave-inner img{max-width:180px}
#inc02 .wave-inner p{
    font-size:22px;
    font-weight:700;
    line-height:1.6;
    color:#333;
}
#inc02 .wave-inner p em{color:#5267ad;font-style:normal}

/* 모달 */
.curriculum-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(15,23,42,.65);
    padding:40px 20px;
    overflow-y:auto;
}
.curriculum-modal.is-open{display:block}
.curriculum-modal-box{
    position:relative;
    max-width:980px;
    margin:0 auto;
    padding:44px;
    border-radius:32px;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.curriculum-modal-close{
    position:absolute;
    right:24px;
    top:22px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#f1f3f8;
    font-size:24px;
    font-weight:700;
    cursor:pointer;
}
.curriculum-modal-title{
    margin-bottom:28px;
    text-align:center;
}
.curriculum-modal-title span{
    display:block;
    margin-bottom:8px;
    font-size:16px;
    font-weight:700;
}
.curriculum-modal-title h3{
    font-size:32px;
    font-weight:700;
    color:#222;
    letter-spacing:-0.04em;
}
.curriculum-modal.mini-modal .curriculum-modal-title span{color:#d94b86}
.curriculum-modal.mega-modal .curriculum-modal-title span{color:#2fa6a4}
.curriculum-modal.master-modal .curriculum-modal-title span{color:#6a4bb5}

.modal-desc{
    max-width:760px;
    margin:0 auto 34px;
    text-align:center;
}
.modal-desc p{
    margin-bottom:18px;
    font-size:16px;
    font-weight:400;
    line-height:1.65;
    color:#333;
    word-break:keep-all;
	text-align:left;
}
.modal-desc strong{color:#5267ad}

.modal-img-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* MINI는 이미지 6개라 3칸 유지 */
#miniModal .modal-img-grid{
    grid-template-columns:repeat(3,1fr);
}

/* MEGA, MASTER는 이미지 2개라 가로 꽉차게 2칸 */
#megaModal .modal-img-grid,
#masterModal .modal-img-grid{
    grid-template-columns:repeat(2,1fr);
}


.modal-img-item{
    padding:14px;
    border-radius:18px;
    background:#f7f8fa;
    text-align:center;
}
.modal-img-item img{
    width:100%;
    border-radius:12px;
}
.modal-img-item p{
    margin-top:10px;
    font-size:15px;
    font-weight:700;
    color:#333;
}

@media (max-width:1200px){
    #inc02{padding:110px 20px 0}
    #inc02 .group-title h2{font-size:42px !important}
}
@media (max-width:900px){
    #inc02 .curriculum-wrap{grid-template-columns:1fr}
}
@media (max-width:767px){
    #inc02{padding:70px 15px 0}
    #inc02 .group-title{padding-bottom:40px}
    #inc02 .group-title h2{font-size:34px !important}
    #inc02 .group-title p.desc{font-size:16px}
    #inc02 .curriculum-card{border-radius:22px}
    #inc02 .mega ul,
    #inc02 .master ul{grid-template-columns:1fr}

    #inc02 .curriculum-wave{
        margin-left:-15px;
        margin-right:-15px;
        padding:60px 20px 50px;
    }
    #inc02 .wave-inner{
        flex-direction:column;
        text-align:center;
        gap:20px;
    }
    #inc02 .wave-inner img{max-width:150px}
    #inc02 .wave-inner p{font-size:18px}

    .curriculum-modal-box{
        padding:34px 20px;
        border-radius:24px;
    }
    .curriculum-modal-title h3{font-size:28px}
    .modal-desc p{font-size:16px}
    .modal-img-grid{grid-template-columns:1fr}
}



#inc03{
    padding:150px 0;
    background:#fff;
}

#inc03 .inner{
    max-width:1180px;
    margin:0 auto;
}

/* =========================
   타이틀
========================= */
#inc03 .group-title{
    padding-bottom:55px;
    text-align:left;
}

#inc03 .group-title h2{
    margin-bottom:22px;
    font-size:46px;
    font-weight:700;
    line-height:1.15;
    color:#222;
    letter-spacing:-0.05em;
	text-align:center;
}

#inc03 .group-title h2 em{
    color:#5267ad;
    font-style:normal;
}

#inc03 .group-title p{
    max-width:740px;
    font-size:21px;
    font-weight:600;
    line-height:1.55;
    color:#333;
    word-break:keep-all;
	text-align:center;
	margin:0 auto;
}

/* =========================
   탭
========================= */
#inc03 .episode-tabs{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:24px;
}

#inc03 .episode-tabs button{
    height:46px;
    padding:0 24px;
    border:0;
    border-radius:999px;
    background:#eef2ff;
    color:#5267ad;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s;
}

#inc03 .episode-tabs button.active{
    background:#5267ad;
    color:#fff;
}

/* =========================
   박스
========================= */
#inc03 .episode-wrap{
    padding:28px;
    border-radius:32px;
    background:#f7f8fa;
    border:1px solid #e2e7f3;
    box-shadow:0 18px 35px rgba(82,103,173,0.12);
}

/* =========================
   그리드
========================= */
#inc03 .episode-grid{
    display:none;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

#inc03 .episode-grid.active{
    display:grid;
}

#inc03 .episode-item{
    overflow:hidden;
    position:relative;
    border-radius:12px;
    background:#fff;
    box-shadow:0 8px 18px rgba(82,103,173,0.1);
}

#inc03 .episode-item img{
    display:block;
    width:100%;
    aspect-ratio:16/11;
    /*object-fit:cover;*/
    transition:transform .35s;
}

#inc03 .episode-item:hover img{
    transform:scale(1.06);
}

/* =========================
   반응형
========================= */
@media (max-width:1200px){
    #inc03{
        padding:110px 20px;
    }

    #inc03 .group-title h2{
        font-size:42px !important;
    }

    #inc03 .group-title p{
        font-size:18px;
    }
}

@media (max-width:767px){
    #inc03{
        padding:70px 15px;
    }

    #inc03 .group-title{
        padding-bottom:35px;
        text-align:center;
    }

    #inc03 .group-title h2{
        font-size:32px !important;
    }

    #inc03 .group-title p{
        font-size:16px;
    }

    #inc03 .episode-wrap{
        padding:16px;
        border-radius:24px;
    }

    #inc03 .episode-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    #inc03 .episode-item{
        border-radius:14px;
    }

    #inc03 .episode-tabs{
        flex-wrap:wrap;
    }

    #inc03 .episode-tabs button{
        height:40px;
        padding:0 16px;
        font-size:14px;
    }
}


#inc04{
    padding:150px 0;
    background:#f7f9ff;
}

#inc04 .inner{
    max-width:1180px;
    margin:0 auto;
}

#inc04 .group-title{
    margin-bottom:60px;
    text-align:center;
}

#inc04 .group-title h2{
    font-size:48px;
    font-weight:700;
    line-height:1.15;
    color:#222;
    letter-spacing:-0.04em;
}

#inc04 .group-title h2 em{
    color:#5267ad;
    font-style:normal;
}

#inc04 .class-composition{
    display:grid;
    grid-template-columns:1fr .9fr;
    gap:60px;
    align-items:stretch;
}

#inc04 .composition-left,
#inc04 .composition-right{
    height:100%;
}

#inc04 .composition-list{
    display:grid;
    gap:18px;
    height:100%;
}

#inc04 .composition-list li{
    display:flex;
    align-items:center;
    gap:18px;
    padding:20px 24px;
    border-radius:22px;
    background:#fff;
    border:1px solid #e2e7f3;
    box-shadow:0 12px 28px rgba(82,103,173,0.08);
}

#inc04 .composition-list .icon{
    flex:0 0 54px;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
}

#inc04 .composition-list .icon img{
    max-width:42px;
    max-height:42px;
}

#inc04 .composition-list strong{
    font-size:23px;
    font-weight:700;
    line-height:1.35;
    color:#333;
    letter-spacing:-0.03em;
}

#inc04 .composition-list strong em{
    color:#5267ad;
    font-style:normal;
}

/* ✅ 핵심 수정 */
#inc04 .composition-visual{
    display:grid;
    grid-template-rows:repeat(3, 1fr);
    gap:24px;
    height:100%;
}

#inc04 .visual-card{
    height:100%;
    min-height:0;
    padding:30px;
    border-radius:32px;
    background:#fff;
    border:1px solid #e2e7f3;
    box-shadow:0 18px 35px rgba(82,103,173,0.12);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

#inc04 .visual-card.main{
    background:linear-gradient(180deg,#ffffff,#eef2ff);
}

#inc04 .visual-card h3{
    margin-bottom:20px;
    font-size:22px;
    font-weight:700;
    color:#5267ad;
}

#inc04 .visual-card img{
    max-width:100%;
    max-height:220px;
    object-fit:contain;
}

@media (max-width:1200px){
    #inc04{
        padding:110px 20px;
    }

    #inc04 .group-title h2{
        font-size:42px !important;
    }

    #inc04 .composition-list strong{
        font-size:20px;
    }
}

@media (max-width:767px){
    #inc04{
        padding:70px 15px;
    }

    #inc04 .group-title{
        margin-bottom:35px;
    }

    #inc04 .group-title h2{
        font-size:34px !important;
    }

    #inc04 .class-composition{
        grid-template-columns:1fr;
        gap:35px;
    }

    #inc04 .composition-list{
        height:auto;
    }

    #inc04 .composition-list li{
        padding:18px;
        border-radius:18px;
    }

    #inc04 .composition-list .icon{
        flex-basis:48px;
        width:48px;
        height:48px;
        border-radius:16px;
    }

    #inc04 .composition-list strong{
        font-size:17px;
    }

    /* 모바일은 자동높이 */
    #inc04 .composition-visual{
        grid-template-rows:auto auto auto;
    }

    #inc04 .visual-card{
        padding:22px;
        border-radius:24px;
        min-height:220px;
    }

    #inc04 .visual-card img{
        max-height:180px;
    }
}


#inc07{
    padding:120px 0;
    background:#f7f9ff;
}

#inc07 .inner{
    display:block;
    max-width:1140px;
    margin:0 auto;
}

#inc07 .group-title{
    text-align:center;
    margin-bottom:50px;
}

#inc07 .group-title h2{
    font-size:48px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
}

#inc07 .group-title h2 em{
    color:#5267ad;
}

#inc07 .group-title p{
    margin-top:14px;
    font-size:20px;
    font-weight:700;
    text-align:center;
}

#inc07 .main-video-box{
    max-width:100%;
    margin:0 auto 80px;
    padding:28px;
    border-radius:30px;
    background:#f7f9ff;
    border:1px solid #e2e7f3;
}

#inc07 video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    border-radius:20px;
    background:#000;
}

#inc07 .character-wrap{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:60px;
    align-items:start;
}

#inc07 .character-tabs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

#inc07 .character-tabs button:nth-child(7){
    grid-column:1 / 2;
}

#inc07 .character-tabs button{
    padding:18px 10px;
    border-radius:22px;
    border:1px solid #e2e7f3;
    background:#fff;
    cursor:pointer;
    transition:.25s;
    text-align:center;
}

#inc07 .character-tabs button:hover,
#inc07 .character-tabs button.active{
    transform:translateY(-5px);
    box-shadow:0 18px 30px rgba(0,0,0,0.1);
}

#inc07 .tab-img{
    height:80px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    margin-bottom:10px;
}

#inc07 .tab-img img{
    max-width:70px;
}

#inc07 .name-box{
    display:inline-block;
    padding:6px 14px;
    border-radius:20px;
    font-weight:800;
    color:#fff;
}

[data-color="mich"] .name-box{background:#7c8bc7;}
[data-color="varb"] .name-box{background:#993ae4;}
[data-color="trin"] .name-box{background:#ff6699;}
[data-color="ming"] .name-box{background:#53c2ce;}
[data-color="fod"] .name-box{background:#5fbefe;}
[data-color="moze"] .name-box{background:#c33c4c;}
[data-color="knaz"] .name-box{background:#669900;}

#inc07 .character-panel{
    display:none;
    padding:40px;
    border-radius:30px;
    background:#f0f0f0;
}

#inc07 .character-panel.active{
    display:block;
}

#inc07 .character-video{
    margin-bottom:25px;
}

#inc07 .character-info{
    text-align:center;
}

#inc07 .character-info h3{
    font-size:38px;
    font-weight:800;
}




#inc07 #mich h3{color:#7c8bc7;}
#inc07 #varb h3{color:#993ae4;}
#inc07 #trin h3{color:#ff6699;}
#inc07 #ming h3{color:#53c2ce;}
#inc07 #fod h3{color:#5fbefe;}
#inc07 #moze h3{color:#c33c4c;}
#inc07 #knaz h3{color:#669900;}

#inc07 .sub{
    margin:10px 0 20px;
    font-size:20px;
    font-weight:700;
}

#inc07 .character-info p{
    font-size:17px;
    line-height:1.7;
    white-space:pre-line;
}

@media(max-width:1200px){
    #inc07{
        padding:70px 20px;
    }

    #inc07 .group-title h2{
        font-size:42px !important;
    }

    #inc07 .group-title p{
        font-size:16px;
    }

    #inc07 .character-wrap{
        grid-template-columns:1fr;
        gap:35px;
    }

    #inc07 .character-panel{
        padding:25px 20px;
    }

    #inc07 .character-info h3{
        font-size:30px;
    }
}

@media(max-width:767px){
    #inc07 .character-tabs{
        grid-template-columns:repeat(2,1fr);
    }

    #inc07 .character-tabs button:nth-child(7){
        grid-column:auto;
    }
	
	#inc07 .group-title h2{
        font-size:36px !important;
    }
	
    #inc07 .main-video-box{
        padding:14px;
        border-radius:20px;
        margin-bottom:50px;
    }
}


#inc09{
    padding:140px 0;
    background:#fff;
}

#inc09 .inner{
    max-width:1600px;
    margin:0 auto;
}

#inc09 .group-title{
    margin-bottom:60px;
    text-align:left;
}

#inc09 .group-title h2{
    font-size:48px;
    font-weight:800;
    color:#222;
    letter-spacing:-0.04em;
	text-align:center;
}

#inc09 .group-title h2 em{
    color:#7b57b3;
    font-style:normal;
}

#inc09 .group-title p{
    margin-top:14px;
    font-size:28px;
    font-weight:700;
    color:#f15f95;
	text-align:center;
}

#inc09 .book-list{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:55px 0;
}

#inc09 .book-item{
    border:0;
    background:none;
    cursor:pointer;
    text-align:center;
}

#inc09 .book-cover{
    position:relative;
    display:inline-block;
    padding:12px;
    background:#fff;
    border:1px solid #ddd;
    box-shadow:0 14px 24px rgba(0,0,0,.18);
    transition:.25s;
}

#inc09 .book-cover img{
    display:block;
    width:170px;
    height:240px;
    object-fit:cover;
}

#inc09 .book-item:hover .book-cover{
    transform:translateY(-8px);
}

#inc09 .book-title{
    margin-top:16px;
    font-size:18px;
    font-weight:800;
    color:#111;
}

#inc09 .book-title em{
    color:#7b57b3;
    font-style:normal;
}

/* modal */
.book-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    padding:40px 20px;
    background:rgba(15,23,42,.68);
    overflow-y:auto;
}

.book-modal.is-open{
    display:block;
}

.book-modal-box{
    position:relative;
    max-width:1050px;
    margin:0 auto;
    padding:46px;
    border-radius:34px;
    background:#fff;
    box-shadow:0 30px 90px rgba(0,0,0,.3);
}

.book-modal-close{
    position:absolute;
    right:24px;
    top:24px;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:#f1f3f8;
    font-size:28px;
    font-weight:800;
    cursor:pointer;
}

.book-modal-title{
    margin-bottom:30px;
    text-align:center;
}

.book-modal-title h3{
    font-size:34px;
    font-weight:800;
    color:#5267ad;
}

.book-modal-title p{
    margin-top:8px;
    font-size:18px;
    font-weight:700;
    color:#555;
}

.book-viewer{
    display:grid;
    grid-template-columns:56px 1fr 56px;
    gap:22px;
    align-items:center;
}

.book-pages{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    perspective:1200px;
}

.book-page{
    min-height:420px;
    padding:18px;
    border-radius:24px;
    background:#f7f9ff;
    border:1px solid #e2e7f3;
    box-shadow:0 18px 35px rgba(82,103,173,.12);
    transform-origin:center;
    animation:bookFlip .35s ease;
}

@keyframes bookFlip{
    from{
        opacity:.25;
        transform:rotateY(-12deg) translateY(10px);
    }
    to{
        opacity:1;
        transform:rotateY(0) translateY(0);
    }
}

.book-page img{
    width:100%;
    height:100%;
    min-height:380px;
    object-fit:contain;
    border-radius:16px;
    background:#fff;
}

.book-nav{
    width:56px;
    height:56px;
    border:0;
    border-radius:50%;
    background:#5267ad;
    color:#fff;
    font-size:28px;
    font-weight:800;
    cursor:pointer;
}

.book-nav:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.book-count{
    margin-top:22px;
    text-align:center;
    font-size:16px;
    font-weight:800;
    color:#5267ad;
}

@media(max-width:1200px){
	#inc09 .book-list{
		display:grid;
		grid-template-columns:repeat(3,1fr);
		gap:55px 0;
	}
    #inc09{
        padding:100px 20px;
    }

    #inc09 .book-list{
        gap:45px;
    }
	
	#inc09 .group-title h2{
		font-size:42px !important}
}

@media(max-width:767px){
    #inc09{
        padding:70px 15px;
    }

    #inc09 .group-title{
        text-align:center;
    }

    #inc09 .group-title h2{
        font-size:34px !important;
    }

    #inc09 .group-title p{
        font-size:20px;
    }

    #inc09 .book-list{
        grid-template-columns:1fr 1fr;
        gap:35px 20px;
    }

    #inc09 .book-cover img{
        width:130px;
        height:185px;
    }

    .book-modal-box{
        padding:34px 18px;
        border-radius:24px;
    }

    .book-viewer{
        grid-template-columns:42px 1fr 42px;
        gap:10px;
    }

    .book-pages{
        grid-template-columns:1fr;
        gap:14px;
    }

    .book-page{
        min-height:260px;
        padding:12px;
    }

    .book-page img{
        min-height:240px;
    }

    .book-nav{
        width:42px;
        height:42px;
        font-size:22px;
    }
}


.lang-box {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 15px;
}

.lang-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    border-radius: 20px;
}

.lang-btn.active {
    background: #000;
    color: #fff;
    border-color: #000;
}