@import url("common.css");

/* visual */
#visual {width:100%; height:100%}
#visual .slick-slider {position: relative; display: block;}
#visual .slick-list {position: relative; display: block; overflow: hidden;}
#visual .slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
#visual .slick-initialized .slick-slide{display: block;}
#visual .slick-vertical .slick-slide{display: block; height: auto; border: 1px solid transparent;}

#visual .slick-prev, #visual .slick-next{ font-size: 0; line-height: 0; position: absolute; top: 53%; display: block; cursor: pointer; color: transparent; border: none; outline: none; background: transparent;}

#visual .cover01{background:url('/img/v01.jpg');}
#visual .cover02{background:url('/img/v02.jpg'); }
#visual .cover03{background:url('/img/v03.jpg'); }

.visual_wrap {position:relative; overflow: hidden; height:100%; width:100%; margin:0 auto;}
	/*.visual_wrap .inner_video {position:absolute; top:0; left:0; bottom:0; right:0;}*/
	.visual_wrap .inner_video .bg_video {position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}
	video[poster]{ /* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */ height:100%; width:100%;}
	.visual_wrap:after {content:''; width:100%; height:100%; background:rgba(0,0,0,0.2); position: absolute;}

#visual .sub_imgbox{height:100%;}
#visual .section{width:100%;height:100%;position:relative;overflow:hidden;background-position:center;background-size:cover; border:0;}
#visual .sub_imgbox .slick-list ,
#visual .sub_imgbox .slick-track {height:100%;}

#visual .slick-dots{position: absolute; bottom:3%;display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center;}
#visual .slick-dots li{position: relative; display: inline-block; width: 17px; height: 3px;margin: 0 4px; padding: 0; cursor: pointer;}
#visual .slick-dots li button{width:17px; height:3px; border:0; font-size:0; background-color:rgba(255,255,255,.4); cursor:pointer; }
#visual .slick-dots li.slick-active button{background-color:#fff}

#visual .txt_ef{opacity: 0;-webkit-transition-property: all;transition-property: all;-webkit-transition-duration: 0.4s;transition-duration: 0.4s;-webkit-transition-timing-function: linear;
transition-timing-function: linear;-webkit-transition-delay: 0s;transition-delay: 0s;transform: translate3d(0px, 30px, 0);-webkit-transform: translate3d(0px, 30px, 0);}
#visual .slick-slide.action .txt_ef{opacity: 1;transform: translate3d(0px, 0px, 0);-webkit-transform: translate3d(0px, 0px, 0);  }

#visual .text_area{width:100%;text-align:center;color:#fff;position:absolute;top:50%;-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1}
#visual .text_area .v_txt1{text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7); -webkit-text-size-adjust: 100%; font-size:80px; font-weight:900; line-height:100% }
#visual .text_area .v_txt2{text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7); -webkit-text-size-adjust: 100%; padding-top:38px ;font-size:28px; font-weight:700; line-height:38px;}
#visual .text_area .v_txt3{text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.7); -webkit-text-size-adjust: 100%;font-size:21px; font-weight:300; line-height:34px; letter-spacing: -0.8pt; padding-top:10px;white-space:nowrap;}
#visual .text_area .main_btn{ margin:90px auto 0 auto; }


/* Arrows */
#visual .sub_imgbox .slick-prev, #visual .sub_imgbox .slick-next{position: absolute; display: block; top:50%; width: 60px;height: 60px; padding: 0;  -webkit-transform: translate(0, -46%);    -ms-transform: translate(0, -46%);
	transform: translate(0, -46%);cursor: pointer;  color: transparent; border: none; outline: none; background: transparent; z-index:999; font-size:0}
#visual .sub_imgbox .slick-prev{left:40px; background:url('/img/v_arrow_l.png') no-repeat left center;}
#visual .sub_imgbox .slick-next{right:40px; background:url('/img/v_arrow_r.png') no-repeat right center;}
#visual .sub_imgbox .slick-slider{position: relative;display: block;box-sizing: border-box;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
		touch-action: pan-y;-webkit-tap-highlight-color: transparent;	}
#visual .sub_imgbox .slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
#visual .sub_imgbox .slick-initialized .slick-slide{display: block;}



h4.main_title{font-size:52px; font-weight:800; line-height:58px; color:#fff; margin-bottom:15px; }
h4.main_title span{color:#21a451;  font-weight:800; line-height:58px; line-height: inherit;}
h4.main_title2{ font-size:80px; color:#fff; text-align:center; line-height:80px;}

p.main_txt{font-size:17px; font-weight:400; letter-spacing: -0.3pt; color:rgba(255,255,255,0.8); line-height:26px;  }


.main_btn{position: relative; border-radius:50px; padding:21px 30px; font-size:17px; color:#fff; line-height:100%; border:3px solid #fff;  box-sizing:border-box; width:250px; 
display:block; text-align:left;transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.main_btn:after{position: absolute; right: 30px; top: 21px; background:url('/img/bar.png') center no-repeat; width:10px; height:16px; content:''; display:block; transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.main_btn:hover{background:#21a451; border-color:#21a451; padding-left:35px}
.main_btn:hover:after{right:35px;}


.main_btn.over:hover{background:#fff; color:#21a451; border-color:#fff; }
.main_btn.over:hover:after{background:url('/img/bar2.png') center no-repeat;}




/* 유안소개 */
#uan_warp{position: relative;  background:url('/img/main_bg01.jpg') 50% top no-repeat; background-size:cover; padding:95px 3%;}
#uan_warp .main_btn{ margin-top:36px;}
#uan_warp .in{max-width:1600px; margin:0 auto; padding-left:50%;}

/* 사업분야 */
#business_wrap{position: relative; background:#f5f5f5; padding:120px 0}
#business_wrap:after { content: ""; display: block;clear: both;}
#business_wrap .main_title{color:#333}
#business_wrap p.main_txt{color:rgba(102,102,102,0.7)}
#business_wrap .main_btn{margin-top:40px; border-color:#21a451; color:#21a451}
#business_wrap .main_btn:after{background:url('/img/bar2.png') center no-repeat;}
#business_wrap .in{position: relative; overflow: hidden; margin:0 auto; }
#business_wrap .in:after { content: ""; display: block;clear: both;}
#business_wrap .tbox {position: relative; max-width:1600px; margin:0 auto}
#business_wrap .tbox .tin{position: absolute; top:100px;}

#business_wrap .bus_box{width:960px; position: relative;  left:48rem; overflow: hidden;}
#business_wrap .slider {width:100%;}
#business_wrap .slick-slide {overflow: hidden;position:relative;}
#business_wrap .slick-slider .slick-slide{border-radius: 10px;}
#business_wrap .slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;left:0px;}

#business_wrap .slick-slider{position: relative;display: block;box-sizing: border-box; padding-bottom:40px;
	-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
		touch-action: pan-y;-webkit-tap-highlight-color: transparent;	}
#business_wrap .slick-list{position: relative;display: block;overflow: hidden;}
#business_wrap .slick-slide{display: none;float: left;height:auto;min-height: 1px;}
#business_wrap .slick-initialized .slick-slide{display: block;}

#business_wrap .slick-dots{position: absolute; bottom:0;  display: block;  padding: 0; margin: 0; list-style: none ;text-align: center; }
#business_wrap .slick-dots li{position: relative; text-align: center; border:none;display: inline-block; width:8px; height: 8px;margin: 0 7px;padding: 0;
cursor: pointer;}
#business_wrap .slick-dots li button{width:8px; padding:0; height:8px; border:0; font-size:0; display:block; background-color:#ddd; cursor:pointer; 
border-radius:8px;}
#business_wrap .slick-dots li.slick-active button{background-color:#21a451; width:12px; height:12px;}
#business_wrap .slick-dots li.slick-active{width:12px; height:12px;}

#business_wrap .roll .cbox{position: absolute; bottom:30px; left:30px;}
#business_wrap .roll .cbox .icon{margin-bottom:20px;}
#business_wrap .roll .cbox .tit{font-size:20px; color:#fff; line-height:100%; margin-bottom:10px; }
#business_wrap .roll .cbox .stit{position:relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:14px; color:rgba(255,255,255,0.7); line-height:18px; letter-spacing:-0.3pt;}
#business_wrap .roll .pic img{width:100%}



/* the slides */
#business_wrap .slick-slide {
    margin: 0 15px;
}
/* the parent */
#business_wrap .slick-list {
    margin: 0 -15px;
}









/* 유안문화1 */
#possible_warp{position: relative; overflow: hidden; }
#possible_warp:after{ content: ""; display: block;clear: both;}
#possible_warp .pic2{display:none;}
#possible_warp .pic:after{position: absolute; left:40%; top:0; width:60%;  height:100%; content: "";  display:block; background:url('/img/main_bg02.jpg') left center no-repeat; background-size:cover;}
#possible_warp .tbox:before{width:100px; background:red; content: ""; height:100%; width: 100px; background: #fff;content: "";height: 100%; display: block; position: absolute;  left: 50%; z-index: 2; top: 0; margin-left: -200px;}
#possible_warp .tbox{position: relative; max-width: 1600px;margin: 0 auto; display: table;width: 100%; height: 490px;}
#possible_warp .tbox:after{ position: absolute; top:0%; left:50%; transform: translate(-50%, -0%);  content: ""; width: 0;  height: 0; border-bottom:490px solid #fff; border-right:200px solid transparent; z-index:2; }
#possible_warp .tbox .tin{position: relative; display: table-cell;vertical-align: middle;  height: 490px; z-index: 9;}
#possible_warp h4.main_title{color:#333; margin-bottom:20px;}
#possible_warp p.main_txt{color:rgba(102,102,102,0.8)}
#possible_warp p.main_txt .none2{display:none;}
#possible_warp .main_btn{border-color:#21a451; margin-top:40px; color:#21a451}
#possible_warp .main_btn:after{background:url('/img/bar2.png') center no-repeat;}


/* 유안문화2 */
#possible_warp2{position: relative; overflow: hidden;}
#possible_warp2:after{content: ""; display: block;clear: both;}
#possible_warp2 .pic2{display:none;}
#possible_warp2 .pic:after{position: absolute; left:0; top:0; width:60%; height:100%; content: "";  display:block; background:url('/img/main_bg03.jpg') center no-repeat; background-size:cover;}
#possible_warp2 .tbox:after{width:100px; background:red; content: ""; height:100%; width: 100px; background: #fff;content: "";height: 100%; display: block; position: absolute;  right: 50%;z-index: 2; top: 0; margin-right: -200px;}
#possible_warp2 .tbox{position: relative; max-width: 1600px;margin: 0 auto; display: table;width: 100%; height: 490px;}
#possible_warp2 .tbox:before{ position: absolute; top:0%; left:50%; transform: translate(-50%, -0%);  content: ""; width: 0;  height: 0; border-bottom:490px solid #fff; border-left:200px solid transparent; z-index:9; }
#possible_warp2 .tbox .tin{position: relative; display: table-cell;vertical-align: middle;  height: 490px; z-index: 9;}
#possible_warp2 h4.main_title{color:#333; margin-bottom:20px; text-align:right;}
#possible_warp2 p.main_txt{color:rgba(102,102,102,0.8); text-align:right;}
#possible_warp2 p.main_txt .none{display:none;}
#possible_warp2 .main_btn{border-color:#21a451; margin-top:40px; color:#21a451; float:right;}
#possible_warp2 .main_btn:after{background:url('/img/bar2.png') center no-repeat;}

/*  */
#when_wrap{position: relative; background:url('/img/main_bg04.jpg') center top no-repeat; background-size:cover;}
#when_wrap .in{max-width:1600px; margin:0 auto; padding:120px 0}
#when_wrap h4.main_title2{margin-bottom:40px;}
#when_wrap h4.main_title2 .none{display:none;}
#when_wrap p.main_txt{text-align:center; color:#fff; word-break: keep-all;}
#when_wrap .main_btn{margin:40px auto 0 auto; }




/*
.center {
  position: relative;
  margin: 60px auto 0;
  overflow: hidden;
}

.skewdBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  padding: 50px 80px;
  transform: skewX(30deg) translateX(-85px);
  overflow: hidden;
}

.skewdBox .container {
  transform: skewX(-30deg);
  padding: 0 0 0 85px;
}

.skewdBox:before {
  content: '';
  width:120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url('/img/main_bg02.jpg') no-repeat center;
  background-size: cover;
  transform: skewX(-30deg) translateX(-85px);
  z-index: -1;
}

.skewdBox div{}
.section2 {
  width: 100%;
  height: 100%;
  padding: 50px 80px 50px 62%;
  background-color: #fff;
}*/




/*******************************************************************************
	@media 981px~1200px
*******************************************************************************/
@media all and (max-width:1600px){

#wrap{position: relative; width: 100%; min-width: 100%;}


/* 비주얼 */
#visual .text_area{padding:0 3%; width:94%}

/* 사업분야 */
#business_wrap{padding-left:3%}
#business_wrap .in{}
#business_wrap .tbox .tin{top:20px;}
#business_wrap .bus_box{left:40rem}

/* 서비스 */
#when_wrap .in{width:94%; margin:0 auto}

/* 유안문화1 */
#possible_warp .tbox{width:94%}

/* 유안문화2 */
#possible_warp2 .tbox{width:94%}
#possible_warp2 p.main_txt .none{display:block;}
}




/*******************************************************************************
	@media 981px~1200px
*******************************************************************************/
@media all and (max-width:1400px){


/* 서비스 */
#when_wrap .in{width:94%; margin:0 auto}



}


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


h4.main_title{font-size:46px; line-height:52px}
h4.main_title2{font-size:70px; line-height: 70px;}


/* 서비스 */
#when_wrap h4.main_title2 .none{display:block;}


/* 유안문화 */
#possible_warp .tbox{width:42%; padding-right:3%;  padding-left:3%; display: inline-block;}
#possible_warp .tbox .tin{}
#possible_warp .pic:after{width:50%; left:50%; background: url('/img/main_bg02.jpg') 35% center no-repeat; background-size: cover;}
#possible_warp .tbox:before{display:none;}
#possible_warp .tbox:after{display:none;}
#possible_warp p.main_txt br{ display:none;}
#possible_warp p.main_txt{word-break: keep-all;}

/* 유안문화2 */
#possible_warp2 .tbox{width:42%; padding-right:3%;  padding-left:3%; display: inline-block; float:right;}
#possible_warp2 .tbox .tin{}
#possible_warp2 .pic:after{width:50%; left:0; background: url('/img/main_bg03.jpg') 35% center no-repeat; background-size: cover;}
#possible_warp2 .tbox:before{display:none;}
#possible_warp2 .tbox:after{display:none;}
#possible_warp2 p.main_txt{word-break: keep-all;}
#possible_warp2 h4.main_title br{display:none;}
#possible_warp2 p.main_txt .none{display:none;}

}


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

/* 비주얼 */
#visual .text_area .v_txt1{font-size:70px;}
#visual .text_area .v_txt2{font-size:26px;}
#visual .text_area .v_txt3{font-size:18px; line-height:30px;}


/* 유안소개 */
#uan_warp{background: url('/img/main_bg01.jpg') 40% top no-repeat; background-size: cover; }

/* 서비스 */
#when_wrap .in{padding:95px 0}
#when_wrap h4.main_title2{margin-bottom:30px;}

/* 사업분야 */
#business_wrap{padding:92px 0}
#business_wrap .main_title{text-align:center;}
#business_wrap p.main_txt{text-align:center;}
#business_wrap .main_btn{margin:30px auto 30px auto}
#business_wrap .tbox .tin{ position: relative; top: auto}
#business_wrap .bus_box{width:100%; left:0rem; }
#business_wrap .slick-dots{width:100%}
#business_wrap .in{width:96%; }

}


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


/* 비주얼 */
#visual .text_area .v_txt1{font-size:60px;}
#visual .text_area .v_txt2{padding-top:30px; font-size:24px;}
#visual .text_area .v_txt3{font-size:17px; letter-spacing:-0.5pt; line-height:28px;}
#visual .text_area .main_btn{margin-top:60px}


#visual .cover02{background-position:20% center;}


.main_btn{font-size:16px;}


h4.main_title{font-size:42px;}
h4.main_title2{font-size:60px; line-height:60px;}
p.main_txt{font-size:16px;}



/* 유안소개 */
#uan_warp{padding:5rem 3%}
#uan_warp .in{padding-left:0}
#uan_warp h4.main_title{text-align:center;}
#uan_warp p.main_txt{text-align:center; word-break: keep-all;} 
#uan_warp .main_btn{margin:36px auto 0 auto}


/* 서비스 */
#when_wrap .in{padding:4rem 0}
#when_wrap h4.main_title2{margin-bottom:20px;}

/* 사업분야 */
#business_wrap{padding:4rem 0}
#business_wrap .roll .cbox .tit{font-size:18px;}
/* the slides */
#business_wrap .slick-slide {
    margin: 0 10px;
}
/* the parent */
#business_wrap .slick-list {
    margin: 0 -10px;}


/* 유안문화1 */
#possible_warp .tbox{padding: 4rem 3%; height:auto}
#possible_warp .tbox .tin{height:auto}


/* 유안문화2 */
#possible_warp2 .tbox{padding: 4rem 3%; height:auto}
#possible_warp2 .tbox .tin{height:auto}


}

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

/* 비주얼 */
#visual .text_area .v_txt1{font-size:50px;}
#visual .text_area .v_txt2{font-size:22px; padding-top:25px}

.main_btn{width:230px; font-size:15px; padding:18px 25px}
.main_btn:after{right:25px; top: 17px;}

h4.main_title{font-size:36px; line-height:46px;}
h4.main_title span{line-height:46px;}
h4.main_title2{font-size:50px; line-height:50px;}
p.main_txt{font-size:15px; line-height:22px;}


/* 유안소개 */
#uan_warp h4.main_title{margin-bottom:10px;}


/* 사업분야 */
#business_wrap .roll .cbox .stit{font-size:13px;}
#business_wrap .slick-slide {
    margin: 0 6px;
}
/* the parent */
#business_wrap .slick-list {
    margin: 0 -6px;
}




/* 유안문화1 */
#possible_warp .tbox{width:94%; padding: 2rem 3% 4rem 3%}
#possible_warp h4.main_title{text-align:center;}
#possible_warp p.main_txt{text-align:center;}
#possible_warp .main_btn{margin:30px auto 0 auto}
#possible_warp .pic{width:100%}
#possible_warp .pic:after{display:none;}
#possible_warp .pic2{display:block}
#possible_warp .pic2 img{width:100%}


/* 유안문화2 */
#possible_warp2 .tbox{width:94%; padding: 2rem 3% 4rem 3%; float:none;}
#possible_warp2 h4.main_title{text-align:center;}
#possible_warp2 p.main_txt{text-align:center;}
#possible_warp2 .main_btn{margin:30px auto 0 auto; float:none;}
#possible_warp2 .pic{width:100%}
#possible_warp2 .pic:after{display:none;}
#possible_warp2 .pic2{display:block}
#possible_warp2 .pic2 img{width:100%}
#possible_warp2 .tbox .tin{display:block;}



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


/* 비주얼 */
#visual .text_area .v_txt1{font-size:40px;}
#visual .text_area .v_txt2{font-size:19px; line-height:24px;}
#visual .text_area .v_txt3{font-size:16px; line-height:24px;white-space:pre;}


h4.main_title{font-size:28px; line-height:36px;}
h4.main_title span{line-height:36px}
h4.main_title2{font-size:40px; line-height:40px;}
p.main_txt{font-size:14px; line-height:20px;}

/* 유안소개 */
#uan_warp{padding: 4rem 3%;}

/* 서비스 */
#when_wrap .main_btn{margin-top:30px}

/* 사업분야 */
#business_wrap .main_title{margin-bottom:10px;}
#business_wrap .roll .cbox .icon img{width:40px;}
#business_wrap .roll .cbox{bottom:5%; left:10%; width:80%}
#business_wrap .roll .cbox .tit{font-size:16px;}
#business_wrap .roll .cbox .icon{margin-bottom:15px;}


/* 유안문화1 */
#possible_warp h4.main_title{margin-bottom:10px}

/* 유안문화2 */
#possible_warp2 h4.main_title{margin-bottom:10px}

}

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


/* 비주얼 */
#visual .text_area .v_txt1{font-size:36px;}
#visual .text_area .v_txt2{font-size:17px;}
#visual .text_area .v_txt3{font-size:14px; letter-spacing:-0.3pt; line-height:22px;}
#visual .text_area .v_txt3 br{display:none;}
#visual .text_area .main_btn{margin-top:40px;}


.main_btn{font-size:13px; width:180px;}
.main_btn:after{background-size:8px; width:8px; height:13px;}

h4.main_title{font-size:22px; line-height:30px;}
h4.main_title span{line-height:30px;}
h4.main_title2{font-size:30px; line-height:30px;}


/* 사업분야 */
#business_wrap .roll .cbox .tit{font-size:14px; margin-bottom:5px;}
#business_wrap .roll .cbox .stit{font-size:12px;}
#business_wrap .main_btn{margin:20px auto}


}

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

/* 비주얼 */
#visual .text_area .v_txt1{font-size:30px;}
#visual .text_area .v_txt2{font-size:16px;}
#visual .text_area .v_txt3{font-size:15px;}


h4.main_title{font-size:19px; line-height:20px;}
h4.main_title span{line-height:20px;}
h4.main_title2{font-size:30px; line-height:30px;}
p.main_txt{font-size:13px; line-height:19px}


}

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


h4.main_title2{font-size:26px; line-height:26px;}


}

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


}