.sub_top {width:100%; height:560px; overflow:hidden;   position:relative}
.sub_vi {width:100%; display:inline-block;  height:100%;  position:absolute; left:0; top:0   }
.sub_vi div.in {position:absolute; z-index:999;   top:50%;  left:50%; color:#fff; width:100%;  z-index:99;  transform: translate(-50%, -50%);  text-align:center  }
.sub_vi div.in h3 {font-size:3.3em;   }
.sub_vi div.in p {margin-top:30px; font-weight:300; font-size:17px;   } 

 .sub_vi_img {
 
  position: absolute;
  left:0; top:0;
  width: 100%;
  height:100%;
  background: url('/common/img/sub_vi.png') no-repeat center center;
  background-size: cover;
  animation: zoomOut 2s ease-out forwards;
  overflow:hidden; 
}

.sub_vi_img.bg2 {background: url('/common/img/sub_vi2.png') no-repeat center center;
  background-size: cover;}
.sub_vi_img.bg3 {background: url('/common/img/sub_vi3.png') no-repeat center center;
  background-size: cover;}
.sub_vi_img.bg4 {background: url('/common/img/sub_vi4.png') no-repeat center center;
  background-size: cover;}
.sub_vi_img.bg5 {background: url('/common/img/sub_vi5.png') no-repeat center center;
  background-size: cover;}


@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.sub_vi .rgba_bg {width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,.45);}
 
.sub_con aside {width:100%;background: rgba(0, 0, 0, .2);   backdrop-filter: blur(5px); position:relative; z-index:99; margin-top:-65px}
.sub_con aside ul {width:100%; display:flex; justify-content:center;  }
.sub_con aside ul li { font-size:18.5px;  height:65px; display:flex; align-items:center; justify-content:center; margin:0 30px; position:relative; box-sizing:border-box; text-align:Center;  }
.sub_con aside ul li a {color:rgba(255,255,255,1); font-weight:300}
.sub_con aside ul li.ov {border-bottom:4px solid var(--main_c);}
.sub_con aside ul li.ov * {color:#ff6938; font-weight:600}

h4.tit {font-size:1.6em}
h3.tit {font-size:2em; margin-bottom:10px}
h3.tit + p {font-size:1.1em; color:#333}

@media all and (max-width:900px) {
   .sub_top  {height:400px}
   .sub_vi div.in h3 {font-size:2em;   }
	.sub_con aside {overflow-x:auto; width:100%;   }
	.sub_con aside ul {justify-content:flex-start; }
	.sub_con aside ul li { font-size:17px;  margin:0 15px; white-space:nowrap }
   
		h4.tit {font-size:1.3em}
		h3.tit {font-size:1.6em; }

}
 
.sub_con {margin-top:0; width:100%; overflow-x:hidden  }
.sub_con_in {width:100%; margin-top:130px; font-size:16px;  line-height:1.45; margin-left:auto;   box-sizing:border-box; margin-bottom:100px}
.sub_con_in img {max-width:100%}

.guide {width:100%; border-bottom:1px solid #ddd; padding-bottom:15px;  font-size:2em;  display:flex; align-items:flex-end }
.guide p {margin-left:auto; font-size:.97rem; color:#333; font-weight:400 }
.guide p span {color:var(--main_c)}
 

.line {width:50px; margin-bottom:5px;  height:5px; background-color:var(--main_c); display:inline-block}

 @media all and (max-width:900px) {
	 .sub_con_in { font-size:15px; }

}
.about1 .t1 {font-size:1.7em; font-weight:500}
.about1 .t2 {font-size:2.2em; font-weight:700}
.about1 .t2 b {color:var(--main_c); font-weight:800}

.about1 .flex {justify-content:center; gap:50px}
.about1 .sub_img {width:450px; height:550px;  position:relative; flex-shrink:0; }
.about1 .sub_img p  {width:calc(100% - 50px); float:right; height:calc(100% - 50px); display:inline-block; background:url('/common/img/sub_img_new.jpg') no-repeat center; background-size:cover !important;  position:absolute; z-index:99;   right:0;}
.about1 .sub_img p.p_2 { opacity:.2;  position:absolute; left:0; bottom:0; z-index:9; } 

.about1 .text {width:500px; font-size:1.05em; color:#222; line-height:1.6;  font-weight:300 }


.ceo_name {text-align:right; margin-top:40px;}
.ceo_name  b {font-family: 'iceJaram-Rg'; font-weight:500; color:#111;  font-size:35px}

 @media all and (max-width:900px) {
		.about1 .t1 {font-size:1.2em; }
		.about1 .t2 {font-size:1.7em; }
		.about1 .sub_img {width:90%; height:400px}


}


.history {gap:20px}
.history_img {
 
flex-shrink:0;  
    font-size: 4.5em;
    line-height: .8;
    font-weight: 600;
    color: #999;
     opacity: .2;
	 writing-mode:vertical-lr;
  }
 
.history_wrap {width:55%; padding:50px 0; margin-left:auto; display:flex; flex-wrap:wrap; position:Relative }
.history_wrap:after {content:''; position:absolute; left:calc(250px - 7px); top:5px;   width:1px; height:100%; z-index:-9;  background-color:var(--main_c); }
.history_wrap h4 {width:250px; color:var(--main_c); flex-shrink:0;   line-height:.9; font-size:30px;  margin-bottom:40px; position:Relative }
 
.history_wrap h4::before{ content:''; position:absolute;  left:calc(250px - 16px); top:1px; width:20px; border-radius:15px; height:20px; border:5px solid var(--main_c); background:#fff; box-sizing:border-box; z-index:99 }
.history_wrap h4::after{ content:''; position:absolute;  left:calc(250px - 16px); top:1px; width:20px; border-radius:50%; height:20px; background: var(--main_c); box-sizing:border-box; animation: dots 1.5s ease-in-out infinite; z-index: 9;}


@keyframes dots {
	0%{
	  opacity: .4;
	  transform: scale(1);
	}
	100%{
	  opacity: 0;
	  transform: scale(2.5);
	}
}


.history_wrap ul {width:calc(100% - 300px); padding-left:60px; box-sizing:border-box; margin-bottom:40px}
.history_wrap ul:last-child {margin-bottom:0} 
.history_wrap ul li {margin-bottom:5px; color:#333; font-size:1.06em}

 @media all and (max-width:900px) {
		.history {gap:0}
		.history_wrap:after {left:9px}
		.history_wrap h4 {width:100%; font-size:1.5em;  box-sizing:border-box; padding-left:30px; margin-bottom:15px}
		.history_wrap h4:after { left:0px}
		.history_wrap h4:before { left:0}
		.history_wrap ul {width:100%; padding-left:30px; }

		.history_img {font-size:4em; font-weight:700; line-height:.9; width:100%;  writing-mode:horizontal-tb; }

		.history_wrap {width:100%; margin-top:10px }



}

.top_text h4 {font-size:1.5em}
.top_text h4 + p {color:#333; font-size:1.05em; margin-top:10px}

.about3 p.one {
  width: 11vw;
  height:11vw;
  border-radius: 50%;
  font-size: 1.25em;
  color: #222;
  display: flex;
  text-align:center; 
  flex-direction:column;
  align-items: center;
  justify-content: center;
  margin: 0 -15px;
  position: relative;
  line-height:1.2;
 }

.about3 .one::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 8px; /* border 두께 */
  background: linear-gradient(180deg, #ffae50, #e72f11 );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity:.9
}
 .about3 .section1 p span {display:block; color:var(--main_c); font-size:1.1em; margin-bottom:6px; font-weight:700}

 @media all and (max-width:900px) {
	.about3 .flex {gap:10px}
	.about3 p.one {width:calc(33% - 10px); padding:30px 0; height:auto; margin:0; font-size:1.1em}
 
	.about3 .one::before {border-radius:10px; padding:5px}
}

.about4 .con_wrap {  text-align:center; color:#333;  font-size:1.1em}
.about4 p {width:220px; font-size:1.05em; background-color:var(--main_c2); padding:13px 0; color:#fff; text-align:center; display:inline-block; position:relative; }
.about4 p.ceo {background-color:var(--main_c); border-radius:30px}
.about4 p.ceo:after {content:'';  width:1px; z-index:-9; height:110px; position:absolute; left:50%; top:0; background-color:#999;}
 
.about4 ul {display:inline-flex; gap:20px; margin-top:100px; justify-content:center; position:relative} 
.about4 ul li {width:220px; text-align:center; position:relative} 
.about4 ul li p {margin-bottom:10px;  }
.about4 ul:after {content:''; width:76.7%; z-index:-9; height:1px; position:absolute; left:11.7%; top:-43px; background-color:#999;}
.about4 ul li:after {content:''; width:1px; z-index:-9; height:43px; position:absolute; left:50%; top:-43px; background-color:#999;}


 @media all and (max-width:900px) {
		.about4 p {width:100%; font-size:1em}
		.about4 p.ceo {max-width:200px}
		.about4 p.ceo:after { height:108px; }

		.about4 ul:after { width:52%;  left:24%;  }

		.about4 ul {flex-wrap:wrap; justify-content:space-between; gap:0px 0}
		.about4 ul li {width:48%; color:#555; background-color:#fff; padding-bottom:10px} 


}

.map {width:100%}
.map div {text-align:center; border-right:1px solid #ddd;}
.map div:last-child {border-right:none}
.map h5  {display:flex; font-size:1.15em; font-weight:600;  align-items:center; gap:10px;  justify-content:center; margin-bottom:10px}
.map h5 span {width:50px; height:50px; border-radius:50%; background-color:var(--main_c); color:#fff;  display:flex; justify-content:center; align-items:center}

 @media all and (max-width:900px) {
 
		.map div {text-align:left;  border-right:none; border-bottom:1px solid #ddd; padding:20px 0}
		.map div:last-child {border-bottom:none; padding-bottom:0}
		.map h5 {justify-content:flex-start}
		.map h5 span {width:40px; height:40px; }

}
 
.result1  {display:inline-block}

.date_list {position:relative;  width:100%;  }
.date_list div.top_date {position:relative; font-size:1.2em; font-weight:600 }
.date_list div.top_date b {position:relative; height:55px;  font-weight:800; display:inline-block; color:var(--main_c); font-size:1.5em;   margin-bottom:45px}
.date_list div.top_date:before {content:''; width:100%; height:1px;  background-color:red; position:Absolute; left:0;  top:65px}

.date_list .text_plus {margin-top:20px}
.date_list .text_plus strong {font-size:.95em; font-weight:700}
.date_list .text_plus p {display:flex; gap:10px; color:#333; font-weight:300; font-size:16px; margin-top:3px }
 
.date_list .text_plus p:before {content:'-'}

.date_list div b::before{ content:''; position:absolute; left:0; bottom:-20px; width:20px; border-radius:15px; height:20px; border:5px solid var(--main_c); background:#fff; box-sizing:border-box; z-index:99 }
.date_list div b::after{ content:''; position:absolute; left:0;  bottom:-20px; width:20px; border-radius:50%; height:20px; background: var(--main_c); box-sizing:border-box; animation: dots 1.5s ease-in-out infinite; z-index: 9;}


@keyframes dots {
	0%{
	  opacity: .4;
	  transform: scale(1);
	}
	100%{
	  opacity: 0;
	  transform: scale(2.5);
	}
}


 @media all and (max-width:900px) {
 
		.flex.col-4.date_list > div  {width:100%}
		.flex.col-4.date_list > div:nth-child(n+2) {margin-top:50px}
		.date_list .text_plus p {  margin-top:10px}
		.date_list .text_plus p + p {margin-top:2px}
        .date_list div.top_date b {font-size:1.5em; font-weight:700}

}

.info_flex {gap:0; width:100%}
.info_flex .img {width:50%; flex-shrink:0;  background-size:cover !important}
.info_flex .text {width:50%;   display:flex; flex-direction:column; justify-content:center;  height:400px; box-sizing:border-box; padding:20px 50px; color:#444; font-size:1.1em; font-weight:300}
.info_flex .text h4 {margin-bottom:20px; font-size:1.6em; font-weight:700; color:#000}
.info_flex .text h4 b {font-weight:800}
.info_flex:nth-child(2n) .img {order:2}
.info_flex:nth-child(2n) .text {order:1}
.info_flex a {width:100px; text-align:center;}
 
 @media all and (max-width:900px) {

	.info_flex {flex-wrap:wrap; }
	.info_flex .img {width:100%;  height:200px}
	.info_flex .text {font-size:1em; width:100%; padding:0; height:auto; margin:20px 0}
	.info_flex .text h4 {  font-size:1.3em; margin-bottom:10px }

	.info_flex:nth-child(2n) .img {order:1}
	.info_flex:nth-child(2n) .text {order:2}
    .info_flex + .info_flex {margin-top:30px}
}