@charset "utf-8"; /* 
 * content CSS Document
 *
 */
/* sub visual */
.area-subVisual {position: relative; display: flex; justify-content: center; align-items: center; height: 650rem; box-sizing: border-box; overflow: hidden; } 
.area-subVisual .scroll_ani { display: none; } 
.sub-visual__text {text-align: center; } 
/*.sub-visual__text { position:relative; top:57%; width:auto; margin:0 auto; transform: translateY(-50%); text-align:center; } */
.sub-visual__text>* {color: #fff; } 
.area-subVisual em {display: inline-block; margin-bottom: 20rem; font-weight: 600; font-size: 20rem; line-height: 1em; word-break: keep-all; } 
.area-subVisual h2 {font-weight: 700; font-size: 70rem; text-transform: capitalize; line-height: 1em; word-break: keep-all; } 
.area-subVisual[data-sublayout="customer"] {display: none; } 
.area-subVisual .sub-visual__bg {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; overflow: hidden; } 
.area-subVisual .sub-visual__bg i {position: absolute; opacity: 1 !important; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; box-sizing: border-box; background-size: cover; background-position: 50% 50%; } 
.area-subVisual[data-sublayout="company"] .sub-visual__bg i,
.area-subVisual[data-sublayout="cs"] .sub-visual__bg i {background-image: url(../img/content/img_brand_bg.jpg); background-position: 50% 100%; } 
.area-subVisual[data-sublayout="brand"] .sub-visual__bg i {background-image: url(../img/content/img_brand_bg.jpg); } 
.area-subVisual[data-sublayout="qna"] .sub-visual__bg i {background-image: url(../img/content/img_qna_bg.jpg); } 
.area-subVisual[data-sublayout="customer"] .sub-visual__bg i {background-image: url(../img/content/img_brand_bg.jpg); } 
.area-subVisual[data-sublayout="review"] .sub-visual__bg i {background-image: url(../img/content/img_review_bg.jpg); } 

/* page navigation */
.area_navigation {margin: 25rem 0 0; } 
.area_navigation ul {display: flex; justify-content: center; align-items: center; gap: 40rem; } 
.area_navigation ul li {position: relative; line-height: 1; font-size: 18rem; color: #fff; opacity: 0.8; font-family: var(--font-kr); } 
.area_navigation ul li br {display: none; } 
.area_navigation ul li:first-child {padding-left: 0; } 
.area_navigation ul li img {display: inline-block; position: relative; top: 4rem; width: 20rem; height: 15rem; vertical-align: top; opacity: 0.8; } 
.area_navigation ul li i {display: none; } 
.area_navigation ul li:after {content: ""; position: absolute; top: 5.5rem; right: -23rem; width: 6rem; height: 12rem; background: url(../img/content/ic-navi-arr.svg)no-repeat center; background-size: contain; opacity: 0.6; } 
.area_navigation ul li:last-child:after {display: none; } 
.area_subVisual.nobbs-tab .area_navigation {bottom: 50rem; } 
.area-subVisual.on {padding: 90rem 0 0; } 
.area-subVisual.on .area_navigation {position: absolute; opacity: 0; z-index: -1; } 

/* lnb */
.area_lnb { width: 100%; box-sizing: border-box; margin-top: 60rem; } 
.area_lnb nav { width: 100%; height: 100%; } 
.area_lnb nav .wrap { width: 100%; height: 100%; } 
.area_lnb nav ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12rem; width: 100%; height: 100%; } 
.area_lnb nav ul>li { width: 100%; height: 60rem; } 
.area_lnb nav ul>li:last-child { margin: 0; } 
.area_lnb nav ul>li>a { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1.4em; word-break: keep-all; font-family: var(--font-kr); border: 1px solid #e9e9e9; box-sizing: border-box; border-radius: 5rem; text-align: center; } 
.area_lnb nav ul>li>a>span { font-size: 18rem; font-weight: 500; color: #999; /*transition:all 0.3s ease; */ } 
.area_lnb nav ul>li>a>span i { display: none; } 
.area_lnb nav ul>li>a>span br { display: none; } 
.area_lnb nav ul>li.active>a { background: var(--color-point03); border-color: var(--color-point03); } 
.area_lnb nav ul>li.active>a>span { color: #fff; font-weight: 700; } 
.btn_m_lnb { display: none; position: relative; padding: 15rem 35rem 15rem 15rem; border-bottom: 1px solid #eee; border-left: none; border-right: none; box-sizing: border-box; font-size: 17rem; font-weight: 600; color: #333; transition: all 0.3s ease 0s; } 
.btn_m_lnb:after { content: ''; display: block; position: absolute; right: 20rem; top: 50%; width: 12rem; height: 8rem; margin-top: -4rem; background: url(../img/content/ic-arr-bk.svg) no-repeat 0 0; background-size: 100%; transition: all 0.3s ease 0s; } 
.btn_m_lnb.active { background: var(--color-point); border-color: var(--color-point); color: #fff; } 
.btn_m_lnb.active:after { background-image: url(../img/content/ic-arr-wt.svg); transform: rotate(180deg); } 

/* 테이블 */
#content .mob_info { display: none; } 
#content table.table { border-top: 2px solid #222; width: 100%; } 
#content table.table thead th { background: #f9f9f9; border-right: 1rem solid #eee; font-size: 16rem; font-weight: bold; color: #222; word-break: keep-all; } 
#content table.table thead tr:last-child th { border-bottom: 1rem solid #eee; } 
#content table.table thead tr th:last-child { border-right: 0; } 
#content table.table tbody td { border: 1px solid #eee; font-size: 16rem; color: #555; font-weight: 400; text-align: center; word-break: break-word; line-height: 1.5em; } 
#content table.table tbody td.left { text-align: left; } 
#content table.table tbody td strong { font-weight: 500; } 
#content table.table tbody td p { font-size: 15rem; color: #555; font-weight: 500; } 
#content table.table tbody td span { display: block; color: var(--color-point); font-weight: 600; line-height: 1.5em; } 
/*#content table.table tbody td span:nth-of-type(1) { padding:5rem 0 0; } */
#content table.table th { padding: 15rem; border-bottom: 1px solid #eee; color: #222; word-break: break-word; } 
#content table.table td { padding: 15rem 10rem; } 
#content table.table tbody tr td:first-child,
#content table.table tbody tr th:first-child { border-left-width: 0px; } 
#content table.table tbody tr td:last-child { border-right-width: 0px; } 
/*table.table tr:hover td, table.table tr:focus td { background-color:#f7faff; } */
#content { position: relative; min-height: 500rem; padding: 100rem 0 0; box-sizing: border-box; } 
#content.area_cs { padding: 100rem 0; } 
#content.area_service { padding: 75rem 0 0rem; } 
.sub-title { text-align: center; margin-bottom: 55rem; } 
.sub-title>h2 { font-size: 50rem; font-weight: 700; color: #222; line-height: 1em; word-break: keep-all; font-family: var(--font-kr); } 
.sub-title>h2 br { display: none; } 

/* 메인 탭과 서브 탭 내비게이션 바 */
.tab_nav { display: flex; align-items: center; position: relative; margin-bottom: 30rem; border-bottom: 2px solid #B4B4B4; box-sizing: border-box; } 
.tab_nav>li { position: relative; width: calc(100% / 2); width: -webkit-calc(100% / 2); text-align: center; cursor: pointer; } 
.tab_nav>li a { display: block; padding: 12rem; box-sizing: border-box; } 
.tab_nav>li:before { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 0; background: #aaa; } 
.tab_nav>li span { font-size: 16px; font-weight: 600; color: #c9c9cb; } 
.tab_nav>li.active span { color: var(--color-point); } 
.tab_nav>li.active:before { height: 2px; background: var(--color-point); } 
.tab_nav>li:last-child:after { display: none; } 
.sub_tab_nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rem; } 
.sub_tab_nav>li { display: block; } 
.sub_tab_nav>li>a { display: block; padding: 5rem; font-weight: bold; color: #979797; background: #fff; border: 1px solid #979797; box-sizing: border-box; border-radius: 6rem; text-align: center; font-size: 12rem; } 
.sub_tab_nav>li.active a { border-color: var(--color-point); color: var(--color-point); } 
.tab_nav li.active a,
.sub_tab_nav li.active a { z-index: 2; } 
.tab,
.sub_tab { display: none; } 
.tab.active,
.sub_tab.active { display: block; } 

@media (max-width:1024px) { 
 .area-subVisual { height: 450rem; } 
.area-subVisual h2,
.area-subVisual h3 { font-size: 55rem; } 
.sub-title { margin-bottom: 60rem; } 
.sub-title>h2 { font-size: 50rem; } 
#content { padding: 80rem 0 0; } 
#content.area_cs { padding: 80rem 0; } 
 } 

@media (max-width:860px) { 
 .sub-title > h2 { font-size: 45rem; } 
 } 
@media (max-width:768px) { 
 .area-subVisual { height: 300rem; } 
.area-subVisual h2,
.area-subVisual h3 { font-size: 38rem; } 
.sub-title>h2 { font-size: 40rem; } 
.area_lnb { margin-top: 50rem; } 
.area_lnb nav ul { gap: 12rem; grid-template-columns: 1fr 1fr; } 
.area_lnb nav ul>li { height: 54rem; } 
.area_lnb nav ul>li>a>span { font-size: 17rem; } 
#content { padding: 60rem 0 0; min-height:auto; } 
#content.area_cs { padding: 60rem 0; } 
.sub-title { margin-bottom: 40rem; } 
 } 
@media (max-width:620px) { 
 .area-subVisual h2,
.area-subVisual h3 { font-size: 30rem; } 
 } 
@media (max-width:480px) { 
 .area-subVisual { height: 180rem; } 
.area-subVisual em { font-size: 12rem; margin-bottom: 8rem; } 
.area-subVisual h2,
.area-subVisual h3 { margin: 0; font-size: 27rem; } 
.area_lnb { margin-top: 30rem; } 
.area_lnb nav ul { gap: 6rem; grid-template-columns: 1fr; } 
.area_lnb nav ul>li { height: 36rem; } 
.area_lnb nav ul>li>a>span { font-size: 13rem; } 
#content { padding: 30rem 0 0; } 
#content.area_cs { padding: 30rem 0; } 
#content table.table thead th { font-size: 12rem; padding: 10rem 6rem; } 
#content table.table th { font-size: 12rem; padding: 10rem 6rem; } 
#content table.table tbody td { font-size: 12rem; padding: 10rem 6rem; } 
 } 

.sub-title { display: block; text-align: center; margin-bottom: 70rem; } 
.sub-title>em { display: inline-block; margin-bottom: 15rem; font-size: 18rem; font-weight: 600; color: var(--color-point03); line-height: 1em; word-break: keep-all; } 
.sub-title>h3 { display: block; font-size: 50rem; font-weight: 800; line-height: 1.3em; word-break: keep-all; color: #222; } 
.sub-title>h3.sm { font-size: 43rem; } 
.sub-title>h3>i { color: var(--color-point); } 
.sub-title.wt>h3 { color: #fff; } 



#content { margin: 0; background-color: var(--bg-deep); background-image: var(--bg-ambient); background-attachment: fixed; color: #e5e5e5; position: relative; }
.vip-report { width: 100%; max-width: 1435rem; margin: 0 auto; padding: 80rem 0rem; box-sizing: border-box;}
.vip-report * { box-sizing: border-box; }
.mobile-only { display: none; }


.font-serif {letter-spacing: 0.02em; }
.text-gold { color: var(--color-point02); font-weight: 600; }
.text-warn { color: var(--risk-text); }


.vip-header {display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20rem; margin-bottom: 60rem; border-bottom: 1px solid rgba(255,255,255,0.1); position: relative;}

.vip-header::after {content: ''; position: absolute; bottom: -1px; left: 0; width: 100rem; height: 1px; background: var(--color-point02); box-shadow: 0 0 15rem var(--color-point02); }

.vip-header-left { display: flex; flex-direction: column; gap:20rem; }
.vip-confidential {font-size: 11rem; color: var(--color-point02); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;  border: 1px solid rgba(255,255,255,0.1); padding: 4rem 8rem; width: fit-content; border-radius: var(--radius-sm);}

.vip-title {font-size: 36rem; font-weight:600; color: #fff; line-height: 1.2; letter-spacing: -0.01em; margin: 0; font-family:var(--font-kr); word-break:keep-all;}
.vip-title span { display: block; font-size: 0.6em; color: var(--color-point02); margin-bottom:10rem; font-family:var(--font-en);}
.vip-header-right { text-align: right; font-size: 13rem; color: #888; }



.vip-part0 {
  background: linear-gradient(135deg, rgba(30,32,40,0.6) 0%, rgba(10,10,12,0.8) 100%);
  border: var(--glass-border);
  border-top: var(--glass-highlight); /* 상단 하이라이트로 입체감 */
  border-radius: var(--radius-md);
  padding: 30rem; margin-bottom: 50rem;
  backdrop-filter: blur(20rem);
  box-shadow: 0 20rem 40rem rgba(0,0,0,0.4);
}
.vip-part0-circle { display: none; }

.vip-part0-head { display: flex; align-items: center; gap: 15rem; margin-bottom: 25rem; }
.part-tag {
  background: var(--color-point02); color: #000; font-weight: 700; font-size: 11rem;
  padding: 4rem 10rem; border-radius: 2rem; letter-spacing: 0.5rem;
}
.vip-part0-title {font-size: 20rem; color: #fff; margin: 0; }
.vip-part0-title i{font-size:14rem; font-weight:300; opacity:0.5;}
/* 4열 요약 그리드 */
.summary-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20rem; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 25rem; }
.summary-grid.col03{grid-template-columns: repeat(3, 1fr);}
.summary-item {display: flex; flex-direction: column; gap: 8rem; padding: 15rem; border-radius: var(--radius-sm); transition: background 0.3s; }
.summary-item:hover { background: rgba(255,255,255,0.03); }
.vip-sum-list{margin: 5rem 0 0;}
.vip-sum-list > li{margin-bottom:7rem;}
.summary-item .text-green,
.summary-item .text-warn{display:inline-block; width:70rem; background: transparent;color:#fff;padding: 5rem 8rem;border-radius: 6rem;font-size:12rem;font-weight: 500;border: 1px solid rgba(255,255,255,0.2);margin-right: 5rem; text-align:center;}
.summary-item .text-green{border-color:#8cd8f5; color:#8cd8f5;}
.summary-item .text-warn{border-color:#fbb3b3; color:#fbb3b3;}

.vip-sum-title {color: var(--color-point02); font-size: 16rem; font-weight: 600; display: flex; align-items: center; gap: 8rem; letter-spacing: 0.5rem;}
.vip-sum-title i { opacity: 0.8; }
.vip-sum-desc{ font-size: 15rem; color: #ccc; line-height: 1.4; margin: 0; word-break:keep-all;}

.grid-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30rem; align-items: stretch; }
.flex-col-gap { display: contents; } /* 순서 배치 (1-2-3 / 4-5-6) */


.section-box {
  background: var(--glass-surface);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0; 
  height: 100%; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
}

.section-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.section-box:hover {
  transform: translateY(-4rem); border-color: rgba(255,255,255,0.2);
  box-shadow: 0 15rem 30rem rgba(0,0,0,0.5);
}


.section-header {padding: 20rem; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.01); display: flex; justify-content: flex-start; align-items: center; gap:8rem; }
.section-cont{padding:20rem;}
.section-title { font-family: var(--font-display); font-size: 16px; color: #fff; letter-spacing: 0.03em; }
.section-header .part-tag{background: var(--color-point02); color: #000; font-weight: 700; font-size: 11rem; padding: 4rem 8rem; border-radius: 2px;}
.section-subtitle {display: block; font-size: 13rem; color: var(--color-point02); text-align:center; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;}
.vip-block{padding:15rem; margin-bottom:7rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.05); box-sizing:border-box; border-radius:8rem;}
.vip-stack .vip-block{display:flex; flex-direction: column; align-items: center; gap:5rem;}
.vip-stack .vip-block .title{font-size:13rem;}
.content-item {font-family: var(--font-sans); font-size: 13px; color: #b0b0b0;}
.content-item:last-child { border-bottom: none; }
.content-label { color: #fff; font-weight: 600; margin-right: 4px; display: inline-block;}
.vip-block .custom-list{margin-top:5rem; font-size:12rem; color: #b0b0b0;}

.risk-box {
  background: var(--risk-bg); border-color: rgba(255, 80, 80, 0.2);
}
.risk-header { background: rgba(50,10,10,0.3); border-bottom-color: rgba(255, 80, 80, 0.15); }
.risk-header .section-title { color: #ffcccc; }

.action-box {
  margin-top: 10rem; padding: 8rem; background:#d9aa5e2b; border-left: 2px solid var(--color-point02); color: var(--color-point02-light); font-size: 12rem;}

.action-box-risk {
  background: rgba(255, 80, 80, 0.08); border-left-color: var(--risk-text); color: var(--risk-text);
}


/* KPI & Grid */
.vip-kpi {
  margin: 0 25rem 10rem; padding: 15rem; text-align: center; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); border-radius: var(--radius-sm);}
.vip-kpi-title {color: var(--color-point02); font-size: 12px; margin-bottom: 5px; }

.vip-qgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 25rem;
}
.vip-qcell {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
  padding: 15px 10px; text-align: center; border-radius: var(--radius-sm);
}
.vip-q {font-size: 16px; color: #fff; display: block; margin-bottom: 5px; }


/* Appendix & Watermark */
.vip-appendix { background: transparent; border: 1px dashed rgba(255,255,255,0.15); }
.vip-appendix:hover { border-color: rgba(255,255,255,0.3); transform: none; background: transparent; }

.vip-appendix-list { padding: 0 25px 25px; list-style: none; }
.vip-appendix-item {gap: 6rem; display: flex; align-items: center; font-size: 13px; color: #b0b0b0; margin-bottom: 6px; }
.vip-appendix-badge {background:var(--color-point02); color: #fff; font-size: 15rem; font-weight:600; padding:8rem 10rem; margin: 20px 0 10px 25px; display: inline-block;  border-radius:6rem 0 0 6rem; font-family: var(--font-display);}

.footer-watermark {display:none; text-align: center; margin-top: 80px; font-family: var(--font-display); font-size: 30px; letter-spacing: 0.3em; color:#fff; opacity: 0.35;}

.btn-back{display: flex;
	justify-content: center;
	align-items: center;
	margin: 80rem auto 0;
	width: 270rem;
	height: 65rem;
	border-radius: 10rem;
	border: 2px solid #d9aa5e;
	box-sizing: border-box;
	text-align: Center;
	font-size: 20rem;
	font-weight: bold;
	color: #d9aa5e;
	transition: all 0.3s ease;
}

.btn-back:hover{background:#d9aa5e; color:#fff;}

@media (max-width: 1600px) {
	
}

@media (max-width: 1024px) {
  .grid-layout { grid-template-columns: repeat(2, 1fr); }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .vip-report{padding:50rem 0;}
  .vip-header { flex-direction: column; align-items: flex-start; gap: 15px; }
  .vip-header-right { margin-top: 5rem; text-align:left;}
  .vip-title{font-size:30rem;}
  .summary-grid{gap:5rem;}
  
  .vip-part0 { padding: 20rem; margin-bottom:30rem; }
  .grid-layout { grid-template-columns: 1fr; }
  .summary-grid,
  .summary-grid.col03{ grid-template-columns: 1fr; }
  .flex-col-gap { display: contents; } 

  .btn-back {
		margin: 60rem auto 0;
		width: 280rem;
		height: 60rem;
		font-size: 22rem;
	}
}

@media (max-width: 540px) {
	.btn-back a {
		margin: 40rem auto 0;
		width: 200rem;
		height: 50rem;
		font-size: 16rem;
	}
}
@media (max-width: 480px) {
	.vip-report{padding:40rem 0;}
	.vip-header{margin-bottom:30rem;}
	.vip-header-left{gap:15rem;}
	.vip-confidential{font-size:8rem;}
	.vip-title span{font-size:0.6em;}
	.vip-title{font-size:20rem;}
	.vip-header-right{font-size:11rem; margin:0;}

	.vip-part0{padding:10rem; margin-bottom:15rem;}
	.vip-part0-head{margin-bottom:10rem; gap:7rem;}
	.part-tag,
	.section-header .part-tag{font-size:9rem; padding:4rem 6rem;}
	.vip-part0-title{font-size:15rem;}
	.vip-part0-title i{font-size:10rem;}
	.summary-grid{padding-top:5rem;}
	.summary-item{padding:10rem; gap:5rem;}
	.vip-sum-title{font-size:13rem; gap:5rem;}
	.vip-sum-desc{font-size:11rem;}

	.grid-layout{gap:15rem;}
	.section-header{padding:10rem;}
	.section-title{font-size:13rem;}
	.section-cont{padding:10rem;}
	.section-subtitle{font-size:11rem;}
	.vip-block{padding:10rem; border-radius:5rem; margin-bottom:5rem;}
	.action-box{font-size:9rem; padding:5rem;}
	.vip-stack .vip-block .title{font-size:12rem;}

	.vip-kpi{margin:0 10rem 10rem;}
	.vip-qgrid{margin:0 10rem;}
	.vip-qcell{font-size:12rem;}

	.vip-appendix-badge{font-size:13rem; padding:5rem;}
	.footer-watermark{margin-top:40rem; font-size:16rem;}

	.vip-sum-list > li{font-size:11rem;}
	.summary-item .text-green, .summary-item .text-warn{font-size:9rem; padding:3rem 0rem;  width:50rem; border-radius:2rem;}
	.vip-block .custom-list{font-size:11rem;}
	

	.btn-back {
		margin: 40rem auto 0;
		width: 130rem;
		height: 30rem;
		font-size: 12rem;
		border-radius: 5rem;
		border: 1px solid #d9aa5e;
	}
}