.ham { border:1px solid #fff; color:#fff}


.header .logo img.color { display: none }
.header .logo img.w { display:block }
.header .nav .gnb > li > a {color:#fff}
.header .nav .gnb > li > a:hover {color:#fff}
.header .nav .gnb > li:hover > a {color:#fff}

.main_con {width:100%;  margin:0 auto; ;  font-size:16.5px;  font-weight:300; line-height:1.4}
.main_con hr {height:100px}
.main_con h3 {font-size:2em}

.section + .section {margin-top:0}

.vi {position:relative; width:100%; height:100vh}
.vi * {transition: all 0.3s ease; position:Relative; }
.vi video {position:absolute; left:50%; top:50%;  transform: translate(-50%, -50%);   width: 100%; height: 100%;   object-fit: cover;  }
.vi:after {content:''; position:absolute; left:0; top:0; background:rgba(0,0,0,.1); width:100%; height:100%}
.vi .in {position:Absolute;  z-index:99;  left:50%; top:44%; transform: translate(-50%, -50%);  color:#fff;  }
.vi .in .flex {gap:20px; margin-top:20px}
.vi .in h3 {font-size:57px; font-weight:700; margin-top:5px;   line-height:1.3; letter-spacing:-1px}
.vi .in .t1 {font-size:19px; line-height:1.6}

.main-time { font-size: 30px; font-weight:500; color: #fff; text-align: center; letter-spacing: 0.5px; margin-bottom:40px; }

.scroll-downs { position: absolute; z-index:99; right: 0; bottom:100px; left: 0; margin: auto; width :34px; height: 55px; }
.mousey { width: 3px; padding: 10px 15px; height: 35px; border: 2px solid #fff; border-radius: 25px; opacity: 0.75; box-sizing: content-box; }
.scroller { width: 3px; height: 10px; border-radius: 25%; background-color: #fff; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15,.41,.69,.94); animation-iteration-count: infinite; }

@keyframes scroll {
		0% { opacity: 0; }
		10% { transform: translateY(0); opacity: 1; }
		100% { transform: translateY(15px); opacity: 0;}
}



  


.inner { width:100%; max-width:1200px; margin:0 auto; padding:0 20px;  box-sizing: border-box}

.section_tit { text-align:center; margin-bottom:50px; }
.section_tit .en { display:inline-block; font-size:14px; font-weight:700; color:var(--sub); letter-spacing:1px; margin-bottom:10px; }
.section_tit h2 { margin:0 0 14px; font-size:40px; line-height:1.25; color:var(--main); font-weight:800; }
.section_tit p { margin:0; font-size:17px; color:var(--subtext); }



#intro {margin-top:80px}
.intro_grid { box-sizing:border-box; display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.intro_box { text-align:center; background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px 28px; box-shadow:0 8px 30px rgba(16,24,40,.04); }
.icon_circle { width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg, #e7f5ef 0%, #f4fbf8 100%); color:var(--sub); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; margin-bottom:18px; }
.intro_box h3 { margin:0 0 10px; font-size:22px; color:var(--main); }
.intro_box p { margin:0; color:#667085; font-size:16px; }


@media all and (max-width:800px) {

 .intro_box p { font-size:1em }

}
.arrow_wrap {position:Relative; margin-top:50px;  height:70px}

 
#effect {margin-top:50px}
.effect {padding:0}
.effect { background:#fff; }
.effect_area { background:#f5f9ff ; padding:100px 0; }
.effect .flex { display:flex; align-items:stretch; gap:50px; }

.effect_visual { position:relative; width:50%; min-height:650px; border-radius:24px; overflow:hidden; background:#cfcfcf; }

.effect_bg { position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0; transition:opacity .35s ease; }

.effect_bg.bg1 { opacity:1; }
.effect_bg span {font-size:4em; font-weight:500; position:absolute; left:25px; top:20px; color:#fff;  font-family: "Montserrat", sans-serif;}

/* 예시 이미지 경로 */
.effect_bg.bg1 { background-image:url('/common/img/main/effect01.jpg'); }
.effect_bg.bg2 { background-image:url('/common/img/main/effect02.jpg'); }
.effect_bg.bg3 { background-image:url('/common/img/main/effect03.jpg'); }
.effect_bg.bg4 { background-image:url('/common/img/main/effect04.jpg'); }
.effect_bg.bg5 { background-image:url('/common/img/main/effect05.jpg'); }
.effect_bg.bg6 { background-image:url('/common/img/main/effect06.jpg'); }

/* 오른쪽 텍스트 영역 */

.effect_grid { margin-top:20px; width:50%; display:flex; flex-direction:column; } .effect_grid * {transition:.2s ease;}
.effect_item { padding:18px 0; border-bottom:1px solid rgba(0,0,0,0.08); cursor:pointer; opacity:.7 }

.effect_item:last-child { border-bottom:0; }
.effect_item h3 { margin-bottom:5px; font-size:24px; color:var(--main);}
.effect_item p { margin:0; font-size:16px; color:#5f6b7a; line-height:1.7; }
.effect_item:hover   {opacity:1}
.effect_item:hover h3 { color:#000; font-weight:700 }
.effect_item:hover p { color:#333;}

/* 이미지 */
.effect_bg { position:absolute; inset:0; background-position:center; background-size:cover; opacity:0; transition:opacity .4s ease; }
.effect_bg.active { opacity:1; }

/* 텍스트 active */
.effect_item.active  { opacity:1; }
.effect_item.active h3 { color:#000; font-weight:700 }
.effect_item.active p { color:#333;}

@media all and (max-width:800px) {

 .effect_item p { font-size:1em; line-height:1.5}

}
 
.process { background:linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%); }
.process_row { display:flex; width:100%; justify-content:space-between; position:relative; }
.process_card { width:23%; background:#fff; border:1px solid var(--line); border-radius:22px; box-sizing:border-box; padding:45px 24px; text-align:center; position:relative; z-index:9; transition:.3s; }

.process_card h3 {font-size:1.3em; margin-bottom:10px}
.process_card p {color:#333}
.process_num { width:46px; height:46px; margin:0 auto 16px; border-radius:50%; background:#cfd8e3; color:#fff; font-size:20px; font-weight:400; display:flex; align-items:center; justify-content:center; transition:.3s; font-family: "Montserrat", sans-serif; }

/* 활성화 */
.process_card.active { border-color:var(--main); box-shadow:0 10px 30px rgba(34,48,85,0.15); transform:translateY(-8px); }
.process_card.active .process_num { background:var(--main); }

.process_card.active h3 { color:#000; }
.process_row:after { content:''; width:100%; height:2px; background:#e2e8f0; left:0; top:50%; position:absolute; }
.process_row:before { content:''; height:2px; background:var(--main); left:0; top:50%; position:absolute; width:0; transition:0.4s; z-index:1; }



#cases {margin-top:70px}
.cases_grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; }
.case_logo { background:#fff; border:1px solid #e4e7ec; border-radius:18px; height:82px; width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; padding:14px; color:#344054; font-weight:700; box-shadow:0 6px 18px rgba(16,24,40,.03); }
.case_logo img {max-width:80%; max-height:90%}

.cta_box { background:linear-gradient(135deg, var(--main) 0%, #314670 100%); padding:80px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta_box:before, .cta_box:after { content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }
.cta_box:before { width:220px; height:220px; top:-80px; right:-70px; }
.cta_box:after { width:160px; height:160px; bottom:-50px; left:-40px; }
.cta_box h2 { position:relative; z-index:2; margin:0 0 14px; font-size:40px; line-height:1.3; }
.cta_box p { position:relative; z-index:2; margin:0 0 28px; color:rgba(255,255,255,.82); font-size:17px; }
.cta_box .btn.primary { background:#fff; color:var(--main);   }
 
 
 
#contact {margin-top:90px}



 @media all and (max-width:800px) {
          

			.main_con { font-size: 15px }

			.main-time { font-size: 1.1em }
			.vi .in h3 {font-size:1.9em; }
			.vi .in .t1 {font-size:1em; }

			.section_tit h2 { font-size: 1.8em }

			.intro_grid { display: flex; flex-wrap: wrap; gap: 10px 0 }
			.intro_box { width: 100%; display: flex; text-align: left; align-items: center; gap: 15px }
			.intro_box h3 { font-size: 1.2em }

 
			.effect .flex {  flex-wrap:Wrap; gap: 0 }
			.effect_visual { height: 200px; width: 100%; min-height: auto }
			.effect_grid { width: 100% }
			.effect_item h3 { font-size: 1.2em }
			.effect_bg span { font-size: 2em }

			.process_row { display: flex; gap: 20px 0; flex-wrap: wrap }
			.process_row:before { display: none }
			.process_row:after { display: none }
			.process_card { width: 48%; padding: 30px 20px }
			.process_num { width: 40px; height: 40px }


			.cases_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

			.cta_box h2 { font-size: 1.7em }
			.cta_box p { font-size: 1em }
			.section_tit p { font-size: 1em }

		 
        }