.sub_con {padding-top:100px; padding-bottom:200px; position:relative; overflow:hidden; font-size:18px; background-color:#f2f2f2;   }
.sub_con:before {content:''; width:40vw;  height:80vw; background:url('/common/img/sub_con_bg1.png') no-repeat; background-size:100%;  position:absolute; right:0; top:200px}
.sub_con.company:after {content:''; width:100%; height:33vw; background:url('/common/img/sub_con_bg2.png') no-repeat; background-size:100%;  position:absolute; left:0; bottom:500px}
.sub_con .bg_type3 {   position:relative; display:inline-block; width:100%}
.sub_con .bg_type3:after {content:''; width:100%; height:38vw; background:url('/common/img/service2_bg.png') no-repeat; background-size:100%;  position:absolute; left:0; bottom:-200px; }
.sub_con.notice:before {display:none}
.sub_con.contact:before {top:-100px}

.service2  {padding-bottom:0  }
.concept2  {padding-bottom:0  }


.sub_con.notice {background-color:#fff}
.sub_con img {max-width:100%}
.w_bg {background-color:#fff; padding-bottom:200px }

.sub_con .in {position:relative; z-index:999; }


.sub_guide_wrap {padding:90px 0; margin-bottom:50px; border-bottom:1px solid #333; font-family: "Outfit", "Pretendard",  serif;}
.sub_guide_wrap.type2 {border-bottom:none; margin-bottom:0}
.sub_guide_wrap h2 p {color: #2F2F2F; font-size: 90px;  font-weight:700; } 
 
 
#black .sub_con {background-color:#000}
#black .sub_con .sub_guide_wrap h2 p {color:#fff}
 
.sub_con hr.sub_hr {height:200px;   }
.sub_con hr.con_hr {height:260px;    }

.basic_t {color:#2F2F2F; line-height:1.5}
.basic_t2 {font-size:22px; color:#414141; line-height:1.5}

.sub_con h3.tit {line-height:1.2; font-family: "Outfit", "Pretendard", serif; color:#2F2F2F; font-size: 60px;   margin-bottom:35px; }
.sub_con h3.tit2 {line-height:1.2; font-family: "Outfit", "Pretendard", serif; color:#2F2F2F; font-size: 50px;}

.sub_con h3.tit p { font-family: "Outfit", "Pretendard", serif;  }
.sub_con h3.tit2 p { font-family: "Outfit", "Pretendard", serif; }


h4.h4_1 {font-size:40px; font-weight:700; color:#2F2F2F}
h4.h4_1 + p  {margin-top:40px}
h4.h4_1.type2 {font-size:50px; }
 
 
 @media all and (max-width:900px) {
 
		.sub_con {  font-size:16px; padding-top:60px  }
		.sub_con:before {  width:60vw; height:110vw;  }
		.sub_con.company:after {bottom:600px; height:63vw;   background:url('/common/img/sub_con_bg2.png') no-repeat left; background-size:200%;  }
		.sub_con hr.con_hr {height:150px;   }

		.sub_guide_wrap { padding:50px 0 }
		.sub_guide_wrap h2 p { font-size:40px;  }

		h4.h4_1 {font-size:25px }
		h4.h4_1.type2 {font-size:30px; }
		
		.sub_con hr.sub_hr {height:150px;  }

		.sub_con h3.tit {  font-size: 35px;  line-height:1.2 }
		.sub_con h3.tit2 {  font-size:25px;}
		.basic_t2 {font-size:18px;}


}




.company h4 {font-size:50px; font-weight:700}

.swiper-btn   h3.tit {margin-bottom:0}
.swiper-btn {margin-bottom:100px;    }


.info_dl {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 0; min-height:600px}
.info_dl .h3_div {width:49%;  margin-top:-20px; }
.info_dl h3 { color: #2F2F2F;  line-height:1.2;   font-weight: 700;}
.info_dl dl {width:24%; display:flex; flex-direction:column; background-color:#ddd; border-radius:10px; box-sizing:border-box; padding:30px; position:relative; overflow:hidden }
.info_dl dl dt {font-size:30px; font-weight:700; position:relative; z-index:9; color:#fff}
.info_dl dl dd {margin-top:auto; font-size:24px;  position:relative; z-index:9;  color:#fff}
.info_dl dl dd p {display:flex; }
.info_dl dl dd p + p {margin-top:10px}
.info_dl dl dd p b {width:100px; flex-shrink:0; }
.info_dl dl:after {content:''; background:url('/common/img/company_box_bg1.png') no-repeat; background-size:cover !important;  width:100%; height:100%; position:absolute; left:0; top:0;  filter: brightness(0.2) blur(3px); }
.info_dl dl:nth-child(3):after { background:url('/common/img/company_box_bg2.png') no-repeat; }
.info_dl dl:nth-child(4):after { background:url('/common/img/company_box_bg3.png') no-repeat; }
.info_dl dl:nth-child(5):after { background:url('/common/img/company_box_bg4.png') no-repeat; }
.info_dl dl:nth-child(6):after { background:url('/common/img/company_box_bg5.png') no-repeat; }
.info_dl dl:nth-child(7):after { background:url('/common/img/company_box_bg6.png') no-repeat; }

 @media all and (max-width:900px) {
			.company h4 {font-size:30px}
			.info_dl .h3_div {width:100%;  margin-top:0}
			.info_dl dl {width:49%; padding:30px 10px  }
			.info_dl dl dt {height:100px; font-size:20px}
			.info_dl dl dd {margin-top:0; font-size:13px}
			.info_dl dl dd p {flex-wrap:wrap}
			.info_dl dl dd p b {width:100%;  }

			
			
 

}

.img_r_flex_box  {display:flex; position:relative; z-index:9;   align-items:flex-start; gap:50px}
.img_r_flex_box .t {width:50%;  }
.img_r_flex_box img  {max-width:50% }


 @media all and (max-width:900px) {
 
	.img_r_flex_box  {flex-wrap:wrap}
	.img_r_flex_box .t {width:100%; }
	.img_r_flex_box img  {max-width:100% }

}
 
.contact .map { width:100%; }
.contact .map iframe {border-radius:10px}
.contact .map .flex  {margin-top:30px; gap:50px}
.contact .map .flex > div {width:50%; color:#fff}
.contact .map .flex > div b {color:var(--main_c); font-size:2em; margin-top:10px; width:100%; display:block; text-decoration:underline}

.contact .map dl {display:flex; flex-wrap:wrap;  gap:10px 0;}
.contact .map dl dt {width:150px; flex-shrink:0; color:#fff; font-weight:600}
.contact .map dl dd {width:calc(100% - 150px); flex-shrink:0; color: #fff; }


@media all and (max-width:900px) {
 		.contact .map dl { }
		.contact .map dl dt {width:100%;  }
		.contact .map dl dd {width:100%; }
		.contact .map .flex > div b {font-size:1.5em}
		.contact .map iframe {height:200px}

 
}
 

  
.concept  .img_r_flex_box hr  {height:150px}


.concept2 h5 {font-size:30px; color:#0E0E0E}
.concept2 ul.flex.line_list {border-top:1px solid #333; margin-top:20px}
.concept2 ul.flex.line_list li {margin:100px 20px 0 20px; box-sizing:border-box; position:relative; width:33.3333%; text-align:center; font-size:18px; }
.concept2 ul.flex.line_list li:after {content:''; width:1px; height:70%; position:absolute; top:15%; right:0; background-color:#CECECE}
.concept2 ul.flex.line_list li:last-child:after {display:none}
.concept2 ul.flex.line_list li p.t {margin-top:45px; color:#2F2F2F; line-height:1.4}
 
.concept2 ul.flex.line_list + h5 {margin-top:150px}
  
   @media all and (max-width:900px) {
		.concept2 h5 {font-size:20px}

		.concept2 ul.flex.line_list {padding-top:50px}
		.concept2 ul.flex.line_list li {width:100%; margin:25px 20px; font-size:16px  }
		.concept2 ul.flex.line_list li:after {display:none}
		.concept2 ul.flex.line_list li p.t {margin-top:20px;  }
		.concept2 ul.flex.line_list li img {width:70px}
		.concept2 ul.flex.line_list + h5 {margin-top:60px}
		.concept2 .tab2 + hr {height:50px}
}
 



.percent_bar {width:100%; height:20px; background-color:#E1E1E1;  border-radius:50px; margin-bottom:10px; overflow:hidden}
.percent_bar span {background-color:red; width:100%; height:100%; border-radius:50px; display:inline-block}
.percent li:nth-child(1) .percent_bar span {background-color:#88CDF6; width:78%}
.percent li:nth-child(2) .percent_bar span {background-color:#52A6D8; width:80%}
.percent li:nth-child(3) .percent_bar span {background-color:#015C91; width:60%}
 
.percent_wrap img {max-width:50%}
.percent {width:40%; margin-left:auto; flex-shrink:0 }
.percent li {width:100%; margin-bottom:100px}
.percent li:last-child { margin-bottom:0}
.percent li div.flex {width:100%; align-items:center}
.percent li div.flex b {width:50%; flex-shrink:0; font-size:90px;  line-height:1; font-family:'Outfit'; color:#2B2B2B}
.percent li div.flex h5 {font-size:40px; margin-bottom:10px; color:#2B2B2B}


  @media all and (max-width:900px) {
 
		.percent_wrap img {max-width:80%; margin:0 auto}
		.percent_bar  {margin-bottom:20px;  }
		.percent {width:100%; margin-top:50px  }
		.percent li { margin-bottom:50px}

		.percent li div.flex {flex-wrap:nowrap; align-items:flex-start}
		.percent li div.flex b {  font-size:55px; }
		.percent li div.flex h5 {font-size:22px; }

}



.over_box {width:50%; max-width:822px; height:620px;  box-sizing:border-box; border-radius:20px;   overflow:hidden;   position:relative; cursor:pointer; background-size:cover !important; margin-left:auto; flex-shrink:0}
.over_box:after {width:100%; height:100%; background:rgba(0,0,0,.5); display:inline-block; position:absolute; left:0; top:0; content:''}
.over_box div.flex {width:100%;  background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(5.849999904632568px);   padding:40px 5% 0 5%; box-sizing:border-box; position:absolute; left:0; height:220px; bottom:-220px; z-index:999 }
.over_box div.flex> div {width:50%; color:#fff }
.over_box div.flex> div h5 {font-size:26px; margin-bottom:20px; color:#fff }
.over_box div.flex> div p + p {margin-top:10px}
.over_box:hover div.flex { animation-name: over_box_ani; animation-duration:.5s; animation-fill-mode: forwards; }
.over_box img {position:absolute; z-index:99; bottom:50px; left:50%; margin-left:-28px}
.over_box:hover img {opacity:0}


@keyframes over_box_ani {
	0% { bottom:-220px; } 
 	100% { bottom:0; } 
}

 
  @media all and (max-width:900px) {
		.over_box {width:100%;  height:85vw  }
		.over_box div.flex {height:100%; bottom:-100%; padding-bottom:50px;  align-content:flex-end; flex-direction:column;}

		.over_box div.flex> div {width:100%;  margin-top:auto}
		.over_box div.flex> div h5 {font-size:20px; margin-bottom:10px }
		.over_box div.flex> div + div {margin-top:30px}
		@keyframes over_box_ani {
				0% { bottom:-100%; } 
				100% { bottom:0; } 
		}
.over_box img {width:30px; margin-left:-15px}


}




.service ul.basic2 > li + li {margin-top:40px}
.service ul.basic2 > li h5 {font-size:28px; color:#2B2B2B; margin-bottom:30px}
.service ul.basic2 > li:before {  margin-top:15px}

 
.service .img_r_flex_box  {align-items:flex-start}
.service .img_r_flex_box img {margin-left:auto; border-radius:20px}

.sub_con.service3 {padding-top:300px;  background:url('/common/img/service3_bg_all.png') no-repeat top;  }
.sub_con.service3:before {display:none}
.service3 .guide2 {width:100%; text-align:center; color:#fff; font-size:137px; padding-bottom:0; margin-bottom:-50px}
.service3 .bg1 { display:none}
.service3 .bottom_text {  margin-top:110px; width:100%; height:700px; text-align:center; display:flex; align-items:center; justify-content:Center;  color: #D2E2FF; font-size: 62px; font-weight: 800;   }


.service3_box_wrap {width:70%; gap:20px; margin-left:15%}

.service3_box {width:50%;
padding:100px 40px; 
box-sizing:border-box; 
border-radius: 20px;
background: rgba(73, 162, 255, 0.06);
color:#fff; text-align:Center; 

box-shadow: 3px 7px 12px 7px rgba(0, 0, 0, 0.25), 2px 4px 10px 0px rgba(214, 234, 255, 0.36) inset;
backdrop-filter: blur(7.5px);}

.service3_box + .service3_box { box-shadow: -3px 7px 12.3px 7px rgba(0, 0, 0, 0.25), -2px 4px 10px 0px rgba(214, 234, 255, 0.36) inset; backdrop-filter: blur(7.5px); }


.service3_box h3 {font-size:50px; color:#fff}
.service3_box h3:after {content:''; width:100%; height:1px; background-color:#fff; display:inline-block; margin:50px 0; }
.service3_box b {font-size:35px; color:#A9C7FF;  }
.service3_box p {color:#BABABA; margin-top:20px; line-height:1.5}

 @media all and (max-width:1600px) {
		.service3 .guide2 {font-size:7vw;  margin-bottom:-25px}
  		.service3_box_wrap {width:90%; margin-left:5%}


}
 @media all and (max-width:900px) {
		.service ul.basic2 > li h5 {font-size:21px; margin-bottom:20px}
        .service3 .guide2 {font-size:12vw;   margin-bottom:-15px}

		.service3_box_wrap {width:100%; gap:20px; margin-left:0; position:relative}
		.service3_box {width:100%; padding:50px 20px}
		.service3_box h3 {font-size:30px; }
		.service3_box h3:after { margin:30px 0; }
		.service3_box b {font-size:20px;   }

		.sub_con.service3 {background:none; padding-top:100px }
		 
		.service3 .bg1 { position:absolute; left:50%;  top:50%;  transform: translate(-50%, -50%); width:150%;  max-width:none; z-index:-9; display:block}
		.service3 .bottom_text {font-size:30px;  background:url('/common/img/service3_bg_3.png') no-repeat center; background-size:auto 100%; height:93vw  }


}