@import url('sub.css'); 



/**** S:: 회사소개 ****/
.greeting_list{padding: 70px 0 0;}
.greeting_list dl{display: flex;}
.greeting_list dl + dl{margin-top: 100px;}
.greeting_list dl dt{width: 34%; box-sizing:border-box; padding:0 50px 0 0; display: flex; flex-direction: column; justify-content: center;}
.greeting_list dl dt .number{margin-bottom: 20px;}
.greeting_list dl dt .fs24{font-size:1.111rem; padding-top: 10px; font-weight: 700; color:var(--black); text-wrap: balance;}
.greeting_list dl dt .fs20{font-size:1rem; padding-top: 20px; color:var(--basic); text-wrap: balance;}
.greeting_list dl dd{width: 66%; position: relative; min-height:600px; background-repeat:no-repeat; background-size:cover; background-position:center;}
.greeting_list dl dd::after{content:''; display: block; width: 291px; aspect-ratio:1/1; background:url('/img/logo_w.png') no-repeat center/contain; position: absolute; left: 95px; top:50%; transform:translateY(-50%); z-index: 2;}

.mvvs_banner{position: relative; padding: 250px 0; text-align:center;}
.mvvs_banner::before{content:''; display: block; width: 100%; height:100%; position:absolute; left:0; top:0; background:url('/company/img/mvvs_bg.jpg') no-repeat center/cover; z-index:-1;}
.mvvs_banner .fs80{color:var(--white);}
.mvvs_banner h5.fs20{padding: 0 0 25px; font-weight: 600; display: inline-block;}
.mvvs_banner p.fs20{color:var(--white); padding: 25px 0 0; font-weight: 300; text-wrap: balance;}

.greeting_vision{}
.greeting_vision dl{display: flex; padding: 50px 0; border-bottom: 1px solid var(--border);}
.greeting_vision dl:first-child{padding-top: 0;}
.greeting_vision dl:last-child{border-bottom: 0; padding-bottom: 0;}
.greeting_vision dl dt{width: 200px; height: 50px; background: var(--red_gra); border-radius:50px; text-align:center;}
.greeting_vision dl dt .fs20{font-weight: 600; color:var(--white); line-height: 50px;}
.greeting_vision dl dd{width: calc(100% - 200px); box-sizing:border-box; padding:0 0 0 70px;}
.greeting_vision dl dd .fs20{padding-top: 10px; color:var(--black); line-height: 150%;}

.greeting_info{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:30px;}
.greeting_info dl{box-sizing:border-box; border:1px solid var(--border);}
.greeting_info dl dt{aspect-ratio:4/3; overflow: hidden; position: relative;}
.greeting_info dl dt img{display: block; width: 100%; height: 100%; object-fit:cover;}
.greeting_info dl dt .fs24{font-weight: 700; color:var(--white); width: 100%; position: absolute; left:0; bottom: 0; z-index: 2; box-sizing:border-box; text-align:center; padding:30px 20px;}
.greeting_info dl dd{padding:30px; box-sizing:border-box;}
.greeting_info dl dd div{margin-top: 25px;}
.greeting_info dl dd div:first-child{margin-top: 0;}
.greeting_info dl dd .num_tit{font-size:1.111rem; font-weight: 700; color:var(--main); line-height: 150%; padding-left:42px; box-sizing:border-box; position: relative; letter-spacing: var(--letter-spacing-default);}
.greeting_info dl dd .num_tit span{display: block; width:35px; height: 35px; line-height:35px; text-align:center; font-size:0.889rem; font-weight:600; font-family:var(--eng); color:var(--white); background:var(--main); border-radius:50%; position: absolute; left:0; top:-2px;}
.greeting_info dl dd .dot_list{margin-top: 10px;}
/**** E:: 회사소개 ****/



/**** S:: 연혁 ****/
.history_list{}
.history_list article{display: flex; padding: 130px 0 70px;}
.history_list article > div{box-sizing:border-box;}
.history_list article .img_area{width: 510px;}
.history_list article .img_area .in{position: sticky; top:200px; transition:all .4s;}
.history_list article .img_area .fs80{font-weight:800; color:var(--main); line-height: 120%; font-family:var(--eng); letter-spacing: 0; position: absolute; left: 40px; top:-50px; z-index: 2;}
.history_list article .img_area .img{aspect-ratio:1/0.9; overflow: hidden;}
.history_list article .img_area .img img{display: block; width: 100%; height: 100%; object-fit:cover;}
.history_list article .txt_area{width: calc(100% - 510px); padding: 40px 0 0 100px;}
.history_list article .txt_area .list{}
.history_list article .txt_area .list + .list {margin-top: 40px;}
.history_list article .txt_area .list .fs35{font-weight:800; color:var(--black); line-height: 120%; font-family:var(--eng); letter-spacing: 0;}
.history_list article .txt_area .list .dot_list{margin-top: 10px;}

.history_list article:nth-child(even){flex-direction: row-reverse;}
.history_list article:nth-child(even) .img_area .fs80{right: 40px; left: auto;}
.history_list article:nth-child(even) .txt_area{padding: 40px 100px 0 0; text-align:right;}
.history_list article:nth-child(even) .txt_area .list .dot_list{}
.history_list article:nth-child(even) .txt_area .list .dot_list li{text-align:right; padding-left: auto; padding-right: 12px;}
.history_list article:nth-child(even) .txt_area .list .dot_list li::before{right: 0; left: auto;}


.history_style{padding-top: 100px; position:relative; overflow: hidden;}
.history_style::before{content:''; display: block; width: 100%; height: 1px; background:var(--border); position: absolute; left:0; top:104px;}
	.history_roll{}
	.history_roll .roll{cursor:default; text-align:center; padding-top: 60px;}
	.history_roll .roll .dot{display: block; width: 9px; height: 9px; border-radius:50%; background:var(--main); position: absolute; left:50%; margin-left: -4px; top:0;}
	.history_roll .roll .dot::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; background:var(--main); border-radius:50%; position: absolute; left:0; top:0; z-index: 9; animation: dots 1.5s ease-in-out infinite;}
	.history_roll .roll .fs50{font-weight: 800; color:var(--main); line-height: 120%; font-family:var(--eng); letter-spacing: 0; padding-bottom: 10px;}
	.history_roll .roll .fs20{color:var(--black); line-height: 150%;}
	.history_roll .roll .fs20 + .fs20{margin-top: 5px;}


@keyframes dots {
    0%{
      opacity: 0.5;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(6);
    }
}

/**** E:: 연혁 ****/


/**** S:: 찾아오시는 길 ****/
.location_map{box-sizing:border-box; }
.location_map .wrap_map{height:600px !important;}
.location_map .map_border{display:none !important;}
.location_map .wrap_controllers{display:none !important;}
.location_map iframe{width: 100%; height:600px !important;}
.location_map .cont{display:none !important;}
.location_info{box-sizing:border-box; position: relative; padding:50px 160px 0 0;}
.location_info ul{font-size:0;}
.location_info ul li{display: inline-block; vertical-align:top; padding:0 30px 8px 74px; position: relative; box-sizing:border-box;}
.location_info ul li:first-child{padding-right: 0;}
.location_info ul li.address{padding-left: 130px;}
.location_info ul li b{font-weight: 700; color:var(--black); letter-spacing: var(--letter-spacing-default); position: absolute; left:0; top:0;}
.location_info ul li b::before{display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; font-size:20px; font-weight: 400; font-family:var(--icon);}
.location_info ul li.address b::before{content:'\e0c8';}
.location_info ul li.tel b::before{content:'\e0b0';}
.location_info ul li.fax b::before{content:'\e8ad';}
.location_btn{display: flex; gap:4px; position: absolute; right: 0; top:50px;}
.location_btn a{display: block; width: 80px; height: 80px; transition:all .3s linear; box-sizing:border-box; font-size:0;}
.location_btn a.naverBtn{background:#10D265 url('/company/img/naver.png') no-repeat center/contain;}
.location_btn a.naverBtn:hover{background-color:#00E966;}
.location_btn a.kakaoBtn{background:#FAE100 url('/company/img/kakao.png') no-repeat center/contain;}
.location_btn a.kakaoBtn:hover{background-color:#FAF200;}
.location_btn a.googleBtn{background:var(--white) url('/company/img/google.png') no-repeat center/contain; border:1px solid var(--border);}
.location_btn a.googleBtn:hover{background-color:var(--grayBg);}
/**** E:: 찾아오시는 길 ****/


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

/**** S:: 회사소개 ****/
.greeting_list dl dt .fs24 br{display: none;}
/**** E:: 회사소개 ****/


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

/**** S:: 회사소개 ****/
.greeting_info{display: block;}
.greeting_info dl{display: flex;}
.greeting_info dl + dl{margin-top: 30px;}
.greeting_info dl dt{width: 30%;}
.greeting_info dl dd{width: 70%; display: flex; padding: 0;}
.greeting_info dl dd div{box-sizing:border-box; padding: 30px; width: 50%; border-left: 1px solid var(--border); display: flex; flex-direction: column;  margin-top: 0;}
/**** E:: 회사소개 ****/


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

/**** S:: 회사소개 ****/
.greeting_list dl dt{width: 40%; padding:0 30px 0 0;}
.greeting_list dl dd{width: 60%; min-height:500px;}
.greeting_list dl dd::after{width: 200px; left: 60px;}


/**** E:: 회사소개 ****/


/**** S:: 연혁 ****/
.history_list{}
.history_list article{padding: 100px 0 50px;}
.history_list article .img_area{width: 40%;}
.history_list article .txt_area{width: 60%; padding: 30px 0 0 60px;}
.history_list article .txt_area .list{}
.history_list article .txt_area .list + .list {margin-top: 30px;}

.history_list article:nth-child(even) .txt_area{padding: 30px 60px 0 0;}


/**** E:: 연혁 ****/

}

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

/**** S:: 회사소개 ****/
.greeting_list{padding: 50px 0 0;}
.greeting_list dl{flex-wrap:wrap;}
.greeting_list dl + dl{margin-top: 70px;}
.greeting_list dl dt{width: 100%; padding:0 0 30px; text-align:center;}
.greeting_list dl dt .number{margin: 0 auto 15px;}
.greeting_list dl dt .fs24{padding-top: 6px;}
.greeting_list dl dt .fs20{padding-top: 15px;}
.greeting_list dl dd{width: 100%; min-height:400px;}
.greeting_list dl dd::after{width: 150px;}

.mvvs_banner{padding: 180px 0;}
.mvvs_banner h5.fs20{padding: 0 0 20px;}
.mvvs_banner p.fs20{padding: 20px 0 0;}

.greeting_vision{}
.greeting_vision dl{padding: 30px 0;}
.greeting_vision dl dt{width: 150px;}
.greeting_vision dl dd{width: calc(100% - 150px); padding:0 0 0 30px;}
.greeting_vision dl dd .fs20{padding-top: 5px;}


.greeting_info{}
.greeting_info dl{}
.greeting_info dl dt{width: 40%;}
.greeting_info dl dt .fs24{padding:15px;}
.greeting_info dl dd{flex-wrap:wrap;}
.greeting_info dl dd div{padding:20px; width: 100%; justify-content: flex-start; border-left: 0; border-top: 1px solid var(--border);}
.greeting_info dl dd div:first-child{border-top: 0;}
.greeting_info dl dd .num_tit{padding-left:36px;}
.greeting_info dl dd .num_tit span{width:30px; height: 30px; line-height:30px; font-size:0.778rem; top:-2px;}
.greeting_info dl dd .dot_list{margin-top: 10px;}
/**** E:: 회사소개 ****/

/**** S:: 찾아오시는 길 ****/
.location_map .wrap_map{height:400px !important;}
.location_map iframe{height:400px !important;}
.location_info{padding:30px 0 0;}
.location_btn{top:-80px; right: 10px; z-index: 9;}
.location_btn a{width: 60px; height: 60px;}
/**** E:: 찾아오시는 길 ****/




/**** S:: 연혁 ****/



.history_list{}
.history_list article{padding: 70px 0 30px;}
.history_list article .img_area .fs80{left: 20px; top:-35px;}
.history_list article .txt_area{padding: 10px 0 0 40px;}
.history_list article .txt_area .list{}
.history_list article .txt_area .list + .list {margin-top: 20px;}
.history_list article .txt_area .list .dot_list{margin-top: 6px;}

.history_list article:nth-child(even){}
.history_list article:nth-child(even) .img_area .fs80{right: 20px;}
.history_list article:nth-child(even) .txt_area{padding: 10px 40px 0 0;}




.history_style{padding-top: 70px;}
.history_style::before{top:74px;}
	.history_roll{}
	.history_roll .roll{padding-top: 40px;}
	.history_roll .roll .fs50{padding-bottom: 8px;}
	.history_roll .roll .fs20 + .fs20{margin-top: 3px;}


/**** E:: 연혁 ****/


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

/**** S:: 회사소개 ****/
.greeting_list{padding: 25px 0 0;}
.greeting_list dl + dl{margin-top: 40px;}
.greeting_list dl dt{padding:0 0 20px;}
.greeting_list dl dt .number{margin: 0 auto 10px;}
.greeting_list dl dt .fs20{padding-top: 10px;}
.greeting_list dl dd{min-height:300px;}
.greeting_list dl dd::after{width: 100px; left: 30px;}


.mvvs_banner{padding: 120px 0;}
.mvvs_banner h5.fs20{padding: 0 0 15px;}
.mvvs_banner p.fs20{padding: 15px 0 0;}

.greeting_vision{}
.greeting_vision dl{padding: 20px 0; flex-wrap:wrap; text-align:center;}
.greeting_vision dl dt{width: 120px; height: 35px; margin: 0 auto;}
.greeting_vision dl dt .fs20{line-height: 35px; font-size:1rem;}
.greeting_vision dl dd{width: 100%; padding:10px 0 0;}
.greeting_vision dl dd .fs20{padding-top: 2px;}


.greeting_info{}
.greeting_info dl{flex-wrap:wrap;}
.greeting_info dl + dl{margin-top:10px;}
.greeting_info dl dt{width: 100%;}
.greeting_info dl dt .fs24{padding:10px;}
.greeting_info dl dd{width: 100%;}
.greeting_info dl dd .num_tit{padding-left:30px;}
.greeting_info dl dd .num_tit span{width:24px; height: 24px; line-height:24px; font-size:10px; top:0;}
/**** E:: 회사소개 ****/

/**** S:: 찾아오시는 길 ****/
.location_map .wrap_map{height:300px !important;}
.location_map iframe{height:300px !important;}
.location_info{padding:20px 0 0;}
.location_info ul li{padding:0 20px 6px 55px;}
.location_info ul li.address{padding-left: 0;}
.location_info ul li.address b{position: relative; left: auto; top:auto; display: block; margin-bottom: 5px;	}
.location_info ul li b::before{margin: -2px 5px 0 0; font-size:16px;}
.location_btn{top:-70px;}
.location_btn a{width: 50px; height: 50px;}
/**** E:: 찾아오시는 길 ****/


/**** S:: 연혁 ****/

.history_list{}
.history_list article{padding: 0 0 50px; flex-wrap:wrap;}
.history_list article .img_area{width: 100%;}
.history_list article .img_area .in{top:auto; max-width:100%;}
.history_list article .img_area .img{width: 70%; margin-left: auto;}
.history_list article .img_area .fs80{left: 0; top:auto; bottom: 0;}
.history_list article .txt_area{width: 100%; padding: 20px 0 0;}
.history_list article .txt_area .list{}
.history_list article .txt_area .list + .list {margin-top: 20px;}
.history_list article .txt_area .list .dot_list{margin-top: 4px;}

.history_list article:nth-child(even){}
.history_list article:nth-child(even) .img_area .fs80{right: auto; left: 0; }
.history_list article:nth-child(even) .txt_area{padding: 20px 0 0; text-align:left;}
.history_list article:nth-child(even) .txt_area .list .dot_list{}
.history_list article:nth-child(even) .txt_area .list .dot_list li{text-align:left; padding-left: 12px; padding-right: auto;}
.history_list article:nth-child(even) .txt_area .list .dot_list li::before{right: auto; left: 0;}




.history_style{padding-top: 50px;}
.history_style::before{top:53px;}
	.history_roll{}
	.history_roll .roll{padding-top: 30px;}
	.history_roll .roll .dot{width: 7px; height: 7px; margin-left: -3px;}
	.history_roll .roll .fs50{padding-bottom: 6px;}


/**** E:: 연혁 ****/


}