.sub_con {width:100%;  padding-bottom:100px;}
.sub_con .in { max-width:1200px; font-size:16.5px;  font-weight:300; line-height:1.4; color:#222  }
.sub_con .in img {max-width:100%}
.sub_con + footer .in {max-width:1200px }


.sub_vi {position:relative; overflow:hidden; width:100%; height:450px; margin-bottom:80px; }
.sub_vi .in {padding-top:170px; position:relative; z-index:999}
.sub_vi h3 {font-weight:700; letter-spacing:-.5px; font-size:2.3em}
.sub_vi h3 + p {margin-top:10px; font-size:1.05em}


.sub_vi .img {
  animation: zoomOut2 2s ease-out forwards;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  background:url('/common/img/sub_vi.jpg') no-repeat center; background-size:cover;
  }

  @keyframes zoomOut2 {
  0% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}


@media all and (max-width:800px) {
	.sub_con .in {  font-size:15px;   }
	.sub_con .in img {max-width:100%}
	 

	.sub_vi {height:400px; }
	.sub_vi .in  {padding-top:130px}
	.sub_vi h3 {font-size:1.9em}
	.sub_vi h3 + p {font-size:.95em}
 
}

aside {
    width: 100%;
    
    /* 핵심: 반투명 화이트 */
    background: rgba(255, 255, 255, 0.15);
    
    /* 핵심: 유리처럼 흐림 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 테두리 (은은하게) */
    border: 1px solid rgba(255, 255, 255, 0.6);

    /* 모서리 */
    border-radius: 12px;

    /* 그림자 (부드럽게) */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

    /* 기존 유지 */
    position: relative;
    z-index: 99;
    margin-top: 80px;
}

aside ul {width:100%; display:flex; justify-content:center;   flex-wrap:wrap; }
aside ul li { font-size:1.11em; white-space:nowrap; line-height:63px;  margin:0 18px; position:relative; box-sizing:border-box; text-align:Center; font-weight:400;}
aside ul li a {color:#111}
aside ul li a:hover {color:var(--main_c);  font-weight:600}
aside ul li:after {width:0; content:''; z-index:99; position:absolute; left:50%; bottom:-1px;  height:4px; display:inline-block; background-color:var(--main_c);  transition: all 0.3s ease-out;}
aside ul li:hover:after {width:100%; left:0; }
aside ul li.ov a {color:var(--main_c); font-weight:600} 
aside ul li.ov:after {width:100%; left:0  }

@media all and (max-width:1200px) {
  	.product_vi aside ul { justify-content:flex-start; }
  	.business_vi aside ul { justify-content:center;}
 
}
@media all and (max-width:800px) {
	 aside {margin-top:40px;  }
	 aside ul { padding:0 20px; box-sizing:border-box;  }
	 aside ul li { font-size:1.05em; line-height:57px; margin:0 7px}
 
}
.guide {font-size:2em; text-align:center; margin-bottom:30px; font-weight:700}



.product_list {border-top:1px solid #ddd; }
.product_list * {transition: all 0.3s ease-out;}
.product_list li {border-bottom:1px solid #ddd; position:relative}

.product_list li div:first-child {width:200px; flex-shrink:0;  border:1px solid #ddd; }
.product_list li div.txt {width:calc(100% - 200px);   }
.product_list li h4 {font-size:1.35em; margin-bottom:9px}
.product_list li p { margin-bottom:6px}
.product_list li a { width:100%; color:#111; display:inline-block; gap:20px;  padding:15px 0; display:flex; align-items:center}
.product_list li span {margin-top:10px}
.product_list li:hover span {background-color:var(--main_c); color:#fff; border:2px solid var(--main_c)}


.product_view {display:flex; gap:30px;}
.product_view .text_info {width:100%; }

.product_view .content * {all: revert;}
.product_view .content  {border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:30px 0 20px 0; margin:40px 0 30px 0}
.product_view iframe { all: revert-layer; }
.product_view ul, .product_view ol, .product_view li {  all: revert; }


.product_view h4 {  font-size:1.9em; font-weight:800}

@media all and (max-width:800px) {
		.product_view {flex-wrap:wrap}
		.product_list li div:first-child {width:100px;  }
		.product_list li div.txt {width:calc(100% - 100px);   }
		.product_list li a {padding:20px 0}
 
}

.detail_thumb_area { width:350px; flex-shrink:0 }

.detail_thumb_area .big_image { width: 100%; height:350px; border: 1px solid #ddd; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }

.detail_thumb_area .big_image img { max-width: 100%; max-height:100%;  object-fit: cover; display: block; }

.detail_thumb_area .thumb_list { margin-top: 15px; display: flex; gap: 10px; }
.detail_thumb_area .thumb_list li { width: 25%; display:flex;  align-items: center; justify-content: center;  cursor: pointer; overflow: hidden; box-sizing: border-box; transition: border-color 0.2s ease; border:1px solid #fff}
.detail_thumb_area .thumb_list li.active { border: 1px solid var(--main_c); }
.detail_thumb_area .thumb_list li img { width: 100%;  }


.about section + section {margin-top:40px;   }
.about h3 {color:#000; font-size:1.7em; margin-bottom:10px }
.about h4 {color:#000; font-size:1.3em; margin-bottom:15px; display:flex; align-items:center; gap:7px }
.about h5 {color:#111; font-size:1.15em; margin-bottom:5px }
.about span.no_label {font-weight:500; font-size:18px; background-color:var(--main_c); color:#fff; padding:3px 15px; border-radius:50px}

.about1 .img_box  {text-align:center; width:100%; max-width:400px; }
.about1 .img_box img {  border-radius:50%}

 @media all and (max-width:800px) {
 	.about1 .img_box img {width:80%; }
}


.business section + section {margin-top:40px}
.business .top_img {width:40%; flex-shrink:0; position:relative}
.card { background: #fff; padding:50px; }
.hero { width:100%;  padding:80px 50px; background: linear-gradient(135deg, #0d5d3f 0%, #13a166 100%); color: #fff; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: rgba(255,255,255,0.08); border-radius: 50%; }
.eyebrow { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.16); color: #fff; font-size: 17px; font-weight: 600; margin-bottom: 18px; }
.hero h3 {font-size:2em; font-weight:400}
.hero p { color: rgba(255,255,255,0.92); max-width: 900px; }

.card h3 {font-size:1.7em;  margin-bottom:10px;  }
.card h4 {font-size:1.7em; margin-bottom:10px; }
.card h5 { margin-bottom:5px;  font-size: 1.2em; font-weight:800} 
.card h6 {  font-size: 1.1em; font-weight:600} 

.photo_card {padding:40px; }
.photo_card.flex {gap:40px; align-items:Center}
.photo_card .flex {gap:40px; align-items:Center}
.photo_card .img {width:350px; height:350px; flex-shrink:0; border-radius:50%}
.photo_card .r_area {width:100%; box-sizing:border-box; }

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

.info-box { background: #fff; border: 1px solid #e7edf2; border-radius: 20px; padding: 28px; }
.info-box h3 { margin: 0 0 12px; line-height: 1.4; }
.info-box p { color: #555; font-size: 16px; }


.section-desc { margin-top:5px; }


.label { display: inline-block; font-size: 17px; font-weight: 700; color: #0d8b58; margin-bottom:5px; }
.label:before {width:20px; height:3px; background-color: var(--main_c); display:block; content:'';  margin-bottom:6px;  }
.c .label:before {margin:0 auto; margin-bottom:6px; }

 @media all and (max-width:800px) {
		.hero h3 {font-size:1.3em}
		.eyebrow  {font-size:1em}

		.business .top_img {width:100%; height:250px}
		.card {padding:0; background:none}
		.card h3 {font-size:1.5em;  margin-bottom:20px; }
		.card h4 {font-size:1.5em; margin-bottom:20px; }
		.card h5 {font-size:1.1em}
 		.card.hero {background: linear-gradient(135deg, #0d5d3f 0%, #13a166 100%); padding:50px 30px}
		.photo_card .img {width:80%; margin-left:10%; padding-bottom:80%; height:auto}
		
		.photo_card .r_area .label { text-align:center; width:100%}
		.photo_card .r_area .label:before {margin:0 auto; margin-bottom: 6px;}
		.photo_card .r_area h4 {text-align:center}
		

		.grid-4 {gap:0; displaY:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 0}
		.grid-3 {gap:0; displaY:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 0 }
		.grid-2 { gap:0; displaY:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 0}

}


.check-list { display:flex; flex-direction:column;  padding:20px; box-sizing:border-box;   width:100%; background: #f4fbf7; border: 1px solid #dcefe4;} 
.check-list li { position: relative; padding:0px 20px 17px 30px; margin-bottom:17px;   border-bottom: 1px solid #dcefe4;  font-size: 16px; color: #222;   } 
.check-list li:last-child {border-bottom:none; padding-bottom:0; margin-bottom:0 }
.check-list li::before { content: "✔"; position: absolute; left:0px; top:2px; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; color: #0a9b5c; }
.check-list li strong {font-size:1.15em; font-weight:700; margin-bottom:5px; display:block; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step_process {position:relative; }
.step_process:after {width:100%;  height:1px; content:''; position:absolute; left:0; top:50%; background-color:#999; }

.step { background: #fff; border: 1px solid #e5e9ef; z-index:9; border-radius: 18px; padding: 24px 20px; position: relative;  box-sizing:border-box} 
.step-num { display: inline-flex; align-items: center; justify-content: center; padding:0 17px;  height:33px; border-radius:50px; background: #333; color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 14px; } 
.step p {   color: #666; } 
.step.problem { border: 1px solid #ffd5d5; background: #fff7f7; } 
.step.problem .step-num { background: #de3e3e; }

@media all and (max-width:800px) {
.check-list li {font-size:1em}
		.process { display:flex; flex-wrap:wrap; gap:10px 0; justify-content:space-between }
		.step {width:48%}
		.step_process:after {display:none }


}
.highlight-box { margin-top: 24px; padding: 15px; background: linear-gradient(135deg, #fff7ed 0%, #fff1d9 100%); border: 1px solid #ffe2b1; border-left:3px solid orange;  color: #5d3c09; }

.solution-grid { display:flex;  gap: 20px;  } 
.solution-item { background: #fff; border: 1px solid #e7edf2; border-radius: 20px; padding: 28px; box-sizing:border-box } 
.solution-item h4 { margin: 0 0 10px; font-size: 22px; line-height: 1.4; } 
.solution-item p { color: #555; font-size: 16px;   } 
.solution-item.type2 p {font-size:16.5px;    color:#111}
.solution-item strong { color: #0d8b58; }
.solution-item .icon span {width:40px; height:40px; border-radius:10px; margin-bottom:10px; background-color:#def5e8; display:flex; align-items:center;   justify-content: center;}
.solution-item .icon i {font-size:19px; color:var(--main_c); }


.feature-box { background: #fff; border: 1px solid #e6edf1; border-radius: 20px; padding:40px; box-sizing:border-box;  position:relative; padding-left:90px; }
.feature-box:before {content:'01'; position:absolute; left:20px; top:50%; margin-top:-25px; background-color:#dcefe4; width:50px; height:50px; display:flex;  align-items: center; justify-content: center; border-radius:10px;   color:var(--main_c); font-weight:700}
.feature-box:nth-child(2):before {content:'02'; }
.feature-box:nth-child(3):before {content:'03'; }
.feature-box:nth-child(4):before {content:'04'; }
.feature-box h3 { margin: 0 0 14px; font-size: 24px; line-height: 1.4; letter-spacing: -0.02em; color: #111; }
.feature-box p { margin: 0; font-size: 16px;  word-break: keep-all; }

.feature-box.type2:before {display:none}
.type2 .feature-box:before {display:none}
.type2 .feature-box {padding:20px 30px; text-align:center}
.type2 .feature-box span { background-color:#dcefe4; color:var(--main_c); width:50px; height:50px; display:flex;  align-items: center; justify-content: center; border-radius:10px; margin-bottom:15px; font-size:23px}

.type3 .feature-box:before {display:none}
.type3 .feature-box {padding:20px 30px; gap:20px;  display:flex; gap:20px; }
.type3 .feature-box span { background-color:#dcefe4; color:var(--main_c); width:50px; height:50px; display:flex;  align-items: center; justify-content: center; border-radius:10px; margin-bottom:15px; font-size:23px; flex-shrink:0}

@media all and (max-width:800px) {
	.solution-grid {gap:10px; flex-wrap:wrap } 
	.solution-item { padding:10px} 
	.feature-box {width:100%; padding:25px 20px; padding-left:90px}
 
}



.calculator-box {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	background-color: #f9f9f9;
	max-width: 500px;
 	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.calculator-box h3 {
	color: #0056b3;
	border-bottom: 2px solid #0056b3;
	padding-bottom: 10px;
	margin-top: 0;
}
.input-group {
	margin-bottom: 15px;
}
.input-group label {
	display: block;
	font-weight: bold;
	margin-bottom: 5px;
	color: #333;
}
.input-group input {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}
.calc-btn {
	width: 100%;
	padding: 10px;
	background-color: #0056b3;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	font-weight: bold;
}
.calc-btn:hover {
	background-color: #004494;
}
.result-box {
	margin-top: 20px;
	padding: 15px;
	background-color: #e8f0fe;
	border-radius: 4px;
	display: none;
}
.result-item {
	margin-bottom: 10px;
	font-size: 15px;
}
.result-item strong {
	color: #d93025;
}

.business1 .last_section  { }
.business1 .last_section h4 {font-size:2em; font-weight:800}
.business1 .last_section .solution-item {padding:20px  18px}
.business1 .last_section .solution-item .icon span  {background-color:#de3e3e; }
.business1 .last_section .solution-item .icon span  i {  color:#fff}
.business1 .last_section .solution-item p.flex  {flex-wrap:wrap; gap:3px}

.business5 .solution-item {width:100%; }
.business5  .mark {position:absolute; right:0px; top:0px; width:130px; z-index:99}

@media all and (max-width:800px) {
	.business5  .mark {width:90px}

 
}



/* .business1 .last_section .label {color:orange }
.business1 .last_section  .label:before {  background-color:orange; } */