@import url('sub.css'); 



/*** S:: 비전 ***/
.vision_list {display:flex; flex-wrap:wrap; gap:30px;}
.vision_list dl {flex:1; position:relative;}
.vision_list dl .rotate_txt {display:block; position:absolute; top:40px; right:40px;  z-index:10;}
.vision_list dl .rotate_txt small {display:block; font-size: 20px; font-weight: 700; line-height: 160%; letter-spacing: 0.4px; text-transform: uppercase; color:rgba(255,255,255,0.7);  display: block; white-space: nowrap; transform-origin: top left; transform: translate(100%,0%) rotate(90deg);}
.vision_list dl dt {position:relative; overflow:hidden;}
.vision_list dl dt::after {content:''; width:100%; height:100%; background:var(--main); opacity: 0; position:absolute; top:0; left:0; transition:all 0.5s;}
.vision_list dl dt img {width:100%; transition:all 0.5s;}
.vision_list dl dd {position:absolute; top:0; left:0; width:100%; height:100%; padding:60px 50px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;}
.vision_list dl dd i {width:100%; opacity:0;  transition:all 0.5s;}
.vision_list dl dd .fs40 {width:100%; color:var(--white); margin:15px 0;}
.vision_list dl dd .fs18 {width:100%; color:rgba(255,255,255,0.7); margin:0 0 -80px; opacity:0; transition:all 0.5s;}


.vision_list dl:hover dt img {transform:scale(1.3); transition:all 0.5s;}
.vision_list dl:hover dt::after  {opacity:0.9; transition:all 0.5s;}
.vision_list dl:hover dd i {opacity:1; transition:all 0.5s;}
.vision_list dl:hover dd .fs18 {margin:0; opacity:1; transition:all 0.5s;}

.global_cont {background:url("/company/img/global_bg.jpg")no-repeat center / cover;}
.global_map {position:relative; max-width:1318px; margin:0 auto;}
.global_map .map_in img {max-width:100%;}
.global_map .spot_list {position:absolute; top:0; left:0; width:100%; height:100%;}
.global_map .spot_list li {position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:0 10px; font-size: 0.888rem; font-weight: 600; line-height: 162.5%; letter-spacing: var(--letter-spacing-button); color: var(--main);}
.global_map .spot_list li i {position:relative; display:block; width:10px;  aspect-ratio: 1 / 1; background:var(--main); border-radius:100%;}
.global_map .spot_list li i::after {content: ""; position: absolute; top: 50%; left: 50%; width: 100%; aspect-ratio: 1 / 1;  background: var(--main); border-radius: 50%; transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; animation: spotDiffuse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;}

.global_map .spot_list li.spot1 {top: 31%; left: 16%;}
.global_map .spot_list li.spot2 {top: 31%; left: 32%;}
.global_map .spot_list li.spot3 {top: 51%; left: 39%;}
.global_map .spot_list li.spot4 {left: 77%; top: 40%;}
/*** E:: 비전 ***/


@keyframes spotDiffuse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.5;

  }
  40% {
    opacity: 0.35;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}



/*** S:: 연혁 ***/
.history_cont{max-width:1320px; margin:0 auto;}
.history_cont article{display: flex; flex-wrap:wrap; justify-content:space-between; gap:0 100px; padding:0 0 150px;}
.history_cont article:last-child{padding: 0;}
.history_cont article > div{box-sizing:border-box;}
.history_cont article .img_area{width:510px; flex-shrink: 0;}
.history_cont article .img_area .in{position: sticky; top:140px; transition:all 0.4s ease;}
.history_cont article .img_area h3{position:relative; z-index:10; font-size:80px; color: var(--main); font-family: var(--eng); font-size: 80px; font-weight: 900; line-height: 100%; margin:0 0 -40px; padding:0 40px; box-sizing:border-box;}
.history_cont article .img_area .img{width:100%; text-align:right;}
.history_cont article .img_area .img img{width: 100%; height: auto; overflow: hidden;}
.history_cont article .txt_area{padding-top: 120px; flex:1;}
.history_cont article .txt_area .list{padding: 0 0 40px; text-align:left;}
.history_cont article .txt_area .list:last-child{padding: 0;}
.history_cont article .txt_area .list h4 {color: var(--black); font-family: var(--eng); font-size: 1.9444rem; font-weight: 900; line-height: 128.571%;}
.history_cont article .txt_area .list ul {padding:10px 0 0;}
.history_cont article .txt_area .list ul li{padding:0 0 4px 35px; box-sizing:border-box; position:relative;}
.history_cont article .txt_area .list ul li b{font-family: var(--eng); font-weight:700; color:var(--black); position: absolute; left:0; top:0;}


.history_cont article:nth-child(even){flex-direction: row-reverse;}
.history_cont article:nth-child(even) .img_area h3{left: auto; right: 0; text-align:right;}
.history_cont article:nth-child(even) .img_area .img{text-align:left; margin-left: auto;}
.history_cont article:nth-child(even) .txt_area .list{text-align:right;}
.history_cont article:nth-child(even) .txt_area .list ul li{padding: 0 35px 4px 0;}
.history_cont article:nth-child(even) .txt_area .list ul li b{left: auto; right: 0;}
/*** E:: 연혁 ***/



.loca_info {display:flex; flex-wrap:wrap; align-items:center; justify-content:Center; gap:5px 30px;  margin:0 auto 60px; width:90%;}
.loca_info li {display:flex; align-items:flex-start; color:var(--basic); gap:0 10px;}
.loca_info li b {font-weight: 600; color: var(--black); display:flex; align-items:center; gap:0 8px;}
.loca_info li b::before {font-size:22px; display:block; line-height:1; font-family:var(--icon); font-weight:400;}
.loca_info li b.address::before {content:'\e0c8';}
.loca_info li b.tel::before {content:'\e0b0';}
.loca_info li b.fax::before {content:'\e8ad';}

.loca_map_wrap {position:relative; width:100%;}
.loca_map_wrap .root_daum_roughmap .map_border {display:none;}
.loca_map_wrap .wrap_controllers {display:none;}
.loca_map_wrap .root_daum_roughmap_landing {width:100%;}
.loca_map_wrap .root_daum_roughmap .wrap_map {width:100%; height:700px;}
.loca_map_wrap .root_daum_roughmap .cont {display:none;}


.loca_map_wrap .btn_wrap {position:absolute; bottom:0; right:calc((100% - 1590px)/2); display:flex; flex-wrap:wrap; gap:0 4px; z-index:999;}
.loca_map_wrap .btn_wrap a {width:80px; aspect-ratio: 1 / 1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; box-sizing:border-box;}
.loca_map_wrap .btn_wrap a.naver {background:#10D265;}
.loca_map_wrap .btn_wrap a.kakao {background:#FAE100;}
.loca_map_wrap .btn_wrap a.google {background:var(--white); border:1px solid var(--border);}



/*******************************************************************************
    @media 1700px
*******************************************************************************/
@media all and (max-width:1700px){

.loca_map_wrap .btn_wrap {right:5%;}

}

/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){

.vision_list {gap:15px;}
.vision_list dl .rotate_txt {top:3vw; right:3vw;}
.vision_list dl .rotate_txt small {font-size:1.5vw;}
.vision_list dl dd {padding:3vw 3vw;}
.vision_list dl dd i img {width:5.5vw;}
.vision_list dl dd .fs40 {font-size:3vw; margin:1vw 0;}
.vision_list dl dd .fs18 {font-size:1.25vw; margin:0 0 -4.8vw;}

}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){





/*** S:: 연혁 ***/
.history_cont{}
.history_cont article {gap:0 8%;}
.history_cont article .img_area {width:40%;}
.history_cont article .img_area h3{font-size:60px; margin:0 0 -28px;}
.history_cont article .txt_area {padding-top: 100px;}
/*** E:: 연혁 ***/




}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/*** S:: 연혁 ***/
.history_cont{}
.history_cont article {padding: 0 0 100px;}
.history_cont article .img_area .img{}
.history_cont article .img_area h3 {font-size:8vw; margin:0 0 -4vw; padding:0 6%;}
.history_cont article .txt_area{padding-top: 50px;}
.history_cont article .txt_area .list{padding: 0 0 30px;}
.history_cont article .txt_area .list h4{font-size:1.667rem;}
.history_cont article .txt_area .list ul li{font-size:1rem; padding:0 0 8px 35px;}

.history_cont article:nth-child(even) .img_area{padding: 0 0 0 30px;}
.history_cont article:nth-child(even) .txt_area .list ul li{padding: 0 35px 8px 0;}
/*** E:: 연혁 ***/


.loca_map_wrap .root_daum_roughmap .wrap_map {width:100%; height:500px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



.vision_list {gap:15px;}
.vision_list dl {flex:none; width:100%;}
.vision_list dl .rotate_txt {top:20px; right:20px;}
.vision_list dl .rotate_txt small {font-size:0.888rem;}
.vision_list dl dt {aspect-ratio: 3 / 2;}
.vision_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.vision_list dl dd {padding:20px;}
.vision_list dl dd i {opacity:1;}
.vision_list dl dd i img {width:40px;}
.vision_list dl dd .fs40 {font-size:1.777rem; margin:10px 0;}
.vision_list dl dd .fs18 {font-size:1rem; margin:0 0 0; opacity:1;}
.vision_list dl dd .fs18 br {display:none;}

.global_map .spot_list li {gap:0 5px;}
.global_map .spot_list li i {width:4px; }

/*** S:: 연혁 ***/
.history_cont{}
.history_cont article{padding: 0 0 60px;}
.history_cont article > div{width: 100%;}
.history_cont article .img_area{padding: 0 0 20px; width:100%;}
.history_cont article .img_area .in{top:0;}
.history_cont article .img_area h3{position:absolute; font-size:40px; top:auto; bottom: 0; padding:0; margin:0;}
.history_cont article .img_area h3 br{display: none;}
.history_cont article .img_area .img{aspect-ratio:3/2; overflow: hidden; width: 70%; margin-left: auto;}
.history_cont article .img_area .img img{width: 100%; height: 100%; object-fit:cover;}
.history_cont article .txt_area{padding-top: 0; flex:none; width:100%;}
.history_cont article .txt_area .list{padding: 0 0 25px;}
.history_cont article .txt_area .list ul{padding:6px 0 0;}
.history_cont article .txt_area .list ul li{padding: 0 0 6px 30px;}


.history_cont article:nth-child(even){flex-direction: row;}
.history_cont article:nth-child(even) .img_area{padding: 0 0 20px;}
.history_cont article:nth-child(even) .img_area h3{left: 0; right: auto; text-align:left;}
.history_cont article:nth-child(even) .img_area .img{text-align:right; margin-left: auto;}
.history_cont article:nth-child(even) .img_area .img img{border-radius:0 var(--borderR120) 0 0;}
.history_cont article:nth-child(even) .txt_area .list{text-align:left;}
.history_cont article:nth-child(even) .txt_area .list ul li{padding: 0 0 6px 30px;}
.history_cont article:nth-child(even) .txt_area .list ul li b{left: 0; right: auto;}
/*** E:: 연혁 ***/


.loca_info {margin:0 auto 30px; }
.loca_info li {width:100%;}
.loca_info li b::before {font-size:18px;}
.loca_map_wrap .root_daum_roughmap .wrap_map {width:100%; height:300px;}
.loca_map_wrap .btn_wrap a {width:54px;}
.loca_map_wrap .btn_wrap a svg {max-width:16px; height:auto; max-height:20px;}
.loca_map_wrap .btn_wrap a.google svg {max-width:24px; max-height:24px;}

}
/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}