@import url("common.css");



#fp-nav{right:2% !important}
#fp-nav ul li, .fp-slidesNav ul li{width:35px; height:35px; padding:0 !important}
#fp-nav ul li:last-child{display:none;}
#fp-nav ul li:nth-child(5){margin-bottom:0}
#fp-nav ul li a, .fp-slidesNav ul li a{transition:.3s; width:35px; height:35px; display:block;  border-radius:100%; background:rgba(255,255,255,0.1); width:5px; height:5px; transform:translate(-50%, -50%) !important; left:50% !important; }
#fp-nav ul li .fp-tooltip{text-indent:-99999px;}
#fp-nav ul li a.active{background:rgba(255,255,255,0.1); width:35px; height:35px}
#fp-nav ul li a.active span{background:#fff !important; width:5px !important; height:5px !important; display:block;}
#fp-nav ul li a span{background:#fff; width:5px; height:5px; border-radius:100%; position:absolute; transform:translate(-50%, -50%); top:50% !important;left:50% !important;}

.fp-viewing-3rdPage #fp-nav ul li a span{background:#f7f7f7 !important;}
.fp-viewing-3rdPage #fp-nav ul li a.active{background:rgba(51,51,51,0.1)}
.fp-viewing-3rdPage .main-scroll .text{color:#f7f7f7}
.fp-viewing-3rdPage .main-scroll .effect .icon{background:#f7f7f7}
.fp-viewing-3rdPage .main-scroll .effect{border-color:#f7f7f7}
.fp-viewing-5thPage #fp-nav ul li a span{background:#f7f7f7 !important;}
.fp-viewing-5thPage #fp-nav ul li a.active{background:rgba(51,51,51,0.1)}
.fp-viewing-5thPage .main-scroll .text{color:#f7f7f7}
.fp-viewing-5thPage .main-scroll .effect .icon{background:#f7f7f7}
.fp-viewing-5thPage .main-scroll .effect{border-color:#f7f7f7}

.fp-viewing-firstPage .topBtn2{display:none !important}
.fp-viewing-secondPage .topBtn2{display:none !important}
.fp-viewing-3rdPage .topBtn2{display:none !important}
.fp-viewing-4thPage .topBtn2{display:none !important}
.fp-viewing-5thPage .topBtn2{display:none !important}

.main-scroll{display:flex; align-items:center; position:fixed;bottom:80px;right:1%; transform:rotate(90deg);  transition:0.5s; z-index:20}
.main-scroll .text{display:block;font-size:10px;color:#fff; letter-spacing:0.02em; font-weight:700; transition:0.5s;}
.main-scroll .effect{display:block;position:relative;width:25px;height:13px;margin-left:10px;border:2px solid #fff; box-sizing:border-box; border-radius:10px; transition:0.5s;}
.main-scroll .effect .icon{display:inline-block;position:absolute;top:50%;left:4px;margin-top:-2px;width:3px;height:4px;border-radius:50%;background-color:#fff;
animation:wheelAnimate 1s infinite linear;}

@keyframes wheelAnimate{
  0%{transform:translateX(0);}
  100%{transform:translateX(9px);}
}
.main-scroll2{position:absolute; text-align:center; bottom:30px; transform:translateX(-50%); left:50%; z-index:100; transition:0.5s;}
.main-scroll2 a{position:relative; animation:down_ani 1.5s ease-in-out infinite; color:#fff; transition:all 0.3s;}
.main-scroll2 a:after{position:absolute; bottom:-150px; left:-125px; content:""; animation:rotate_image 6s linear infinite; background:url("../img/main.png")no-repeat; background-size:250px 250px; width:250px; height:250px;}
.main-scroll2 p{font-size:13px; line-height:1; letter-spacing:0.02em; font-weight:700; transition:0.5s;}

.material-symbols-outlined{
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 48
}

@keyframes rotate_image{
    0% {
        transform:rotate(70deg);
		transition:all .3s;
		opacity:.2;
    }
    50% {
        transform:rotate(0deg);
		transition:all .3s;
		opacity:1;
    }
    100% {
        transform:rotate(90deg);
		transition:all .3s;
		opacity:.2;
    }
}


/* VISUAL */
#visual{position:relative; width:100%; height:100vh !important; top:0; left:0; overflow:hidden; z-index:1; background:#000; opacity:0;}

#visual .visual_in{position:relative;  width:100%; height:100%}
#visual .slick-list{position:relative; display:block; overflow:hidden; height:100%;}
#visual .slick-initialized .slick-slide{display:block; height:100%;}
#visual .slick-vertical .slick-slide{display:block; height:100%;}
#visual .slick-slider{position:relative; display:block; outline:none; height:100%;}
#visual .slick-list{position:relative; display:block; overflow:hidden; height:100%;}
#visual .slick-track{position:relative; display:block; overflow:hidden; height:100%;}
#visual .slick-slide{position:relative; display:none; float:left; height:100%; overflow:hidden;}
	#visual .sub_imgbox{position:relative; width:100%; height:100%; overflow:hidden;}
	#visual .sub_imgbox .roll{position:relative; width:100%;  height:100%;overflow:hidden;}
	#visual .sub_imgbox .img{position:relative; display:block; height:100%; background-repeat:no-repeat; background-color:#000;
	background-size:cover; background-position:50% 0;  border:0;
	-webkit-transition-property:all;
	transition-property:all;
	-webkit-transition-duration:1s;
	transition-duration:1s;
	-webkit-transition-timing-function:linear;
	transition-timing-function:linear;
	-webkit-transition-delay:0s;
	transition-delay:0s;
	transform:scale(1.1);
	-ms-transform:scale(1.1);
	-webkit-transform:scale(1.1); }
	#visual .sub_imgbox .action .img{transform:scale(1); -ms-transform:scale(1); -webkit-transform:scale(1); }
		#visual .sub_imgbox .visual_01 .img{ background-image:url("../img/visual01.jpg");}
		#visual .sub_imgbox .visual_02 .img{ background-image:url("../img/visual02.jpg");}
		#visual .sub_imgbox .visual_02 .img video{width:100%; height:100%; position:absolute; top:0; left:0;}
		#visual .sub_imgbox .visual_03 .img{ background-image:url("../img/visual03.jpg");}
		#visual .sub_imgbox .visual_03 .txtCont h2{letter-spacing:0pt; font-weight:500;}

	#visual .sub_imgbox .copy{font-size:0.824rem; bottom:20px; right:3%; position:absolute; color:rgba(255,255,255,0.5)}

#visual .slick-dots{position:absolute; text-align:center; bottom:40px; left:50%; transform:translate(-50%, 0); z-index:ddd9;  }
	#visual .slick-dots li:nth-child(1){margin-left:0}
	#visual .slick-dots li{display:inline-block;  margin-left:20px; font-size:0; width:auto; height:auto}
	#visual .slick-dots li button{width:6px; height:6px; border-radius:50%; border:0; font-size:0; background:#fff; cursor:pointer; padding:0; margin:0; box-sizing:border-box}
	#visual .slick-dots li.slick-active button{width:12px; height:12px; border:3px solid #fff; box-sizing:border-box; background:transparent;}

#visual .txtCont{position:absolute; left:50%; top:50%; -moz-transform:translateY(-50%, -50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); transform:translateY(-50%);
margin-left:-675px; max-width:1350px; z-index:50;}
#visual .txtCont .visual_txin{opacity:0; transform:translateY(50px); transition:opacity 1s, transform 1.4s;  -webkit-transition-delay:0.3s; transition-delay:0.3s;}
#visual .txtCont h2{-webkit-text-size-adjust:100%; font-size:4.1176rem; letter-spacing:-3pt; text-align:left; color:#fff; font-weight:700; line-height:4.9rem; position:relative;
margin-bottom:15px;}
#visual .txtCont p{word-break:keep-all; -webkit-text-size-adjust:100%;  text-align:left; color:#fff; font-size:1.2941rem; font-weight:400; line-height:2rem; margin-bottom:80px; }
#visual .txtCont .main_link{transition:all 0.3s linear; position:relative; width:200px; height:60px; background:#fff; color:#111; padding:0 30px; display:block; line-height:60px; box-sizing:border-box;text-align:left; border-radius:35px; font-weight:500; }
#visual .txtCont .main_link span{transition:all 0.3s linear; width:7px; height:11px; display:block; background:url('../img/arrow.svg') center no-repeat; position:absolute; right:30px; transform:translateY(-50%); top:50%; }
#visual .txtCont .main_link:hover{background:#f4bc1e; color:#fff;}
#visual .txtCont .main_link:hover span{background:url('../img/arrow_w.svg') center no-repeat;}
#visual .sub_imgbox .action .txtCont .visual_txin{transform:translateY(0px); opacity:1}

/* Arrows */
#visual .slick-arrow{position:absolute; left:50%; margin-left:-675px; transform:translateY(-50%); z-index:ddd9 !important; bottom:37px; font-size:0; width:9px; height:15px; background-color:transparent; background-repeat:no-repeat; outline:none;
border:0; cursor:pointer; z-index:100; background:url('../img/var_l.svg') center no-repeat; opacity:1; transition:all 0.3s ease-out;} 
	#visual .slick-prev{}
	#visual .slick-next{ background-image:url('../img/var_r.svg'); margin-left:-560px }
	#visual .slick-arrow:hover{opacity:0.5; transition:all 0.3s ease-out;}

#visual .slick-page{display:none; position:absolute; bottom:45px; left:50%;  max-width:1350px; margin-left:-632px; line-height:1; z-index:0; text-align:center; box-sizing:border-box;  text-align:center;}
#visual .slick-page li{display:inline-block; font-size:0.88235rem; font-weight:400; color:#fff;  vertical-align:bottom; line-height:100%;}
#visual .slick-page li.cur{position:relative; color:#fff; font-weight:700}
#visual .slick-page li.and{font-size:0; width:2px; height:12px; background:#fff; margin:0 10px;transform:rotate(30deg); position:relative; top:-1px;}
#visual .slick-page li.tot{}


#pageMenu{ position:fixed; right:3%; top:50%; transform:translate(0, -50%); z-index:dddddd; transition:all 0.3s linear;}
	#pageMenu.show{display:block;}
	#pageMenu a{text-align:right; font-family:'Poppins', sans-serif; line-height:1; letter-spacing:0.3pt; color:rgba(255,255,255,0.6); font-weight:400; position:relative; display:block; margin-bottom:12px; padding-right:25px; margin-bottom:28px; transition:all 0.3s linear;}
	#pageMenu a:before{display:block; content:""; width:8px; height:8px; border-radius:8px; background:rgba(255,255,255,0.6); position:absolute; top:50%; right:5px; transform:translate(0, -50%); transition:all 0.3s linear;}
	#pageMenu a:after{display:block; opacity:0; content:""; width:16px; height:16px; border-radius:16px; background:transparent; border:1px solid #fff; position:absolute; top:50%; right:0; transform:translate(0, -50%); transition:all 0.3s linear;}
	#pageMenu a.active{color:#fff !important; font-weight:400}
	#pageMenu a:last-child{margin:0}
	#pageMenu a.active:before{background:#fff}
	#pageMenu a.active:after{opacity:1;}

	#pageMenu.black{}
	#pageMenu.black a{color:#939394; width:5px; height:5px}
	#pageMenu.black a:before{background:#939394}
	#pageMenu.black a:after{border-color:#ed6e2b}
	#pageMenu.black a.active{color:#ed6e2b !important;}
	#pageMenu.black a.active:before{background:#ed6e2b}
	#pageMenu.black a.active:after{border-color:#ed6e2b}
/* VISUAL */









/**** 공통 CSS ****/
.smteng{font-size:0.94118rem; color:#fff; font-weight:700; line-height:1.4rem; margin-bottom:5px; }
.main_title{color:#fff; font-size:3.2353rem; font-weight:700; letter-spacing:0pt; line-height:4rem; margin-bottom:25px; font-family:'Viga', sans-serif;}
.main_txt{color:#fff; letter-spacing:-0.3pt; word-break:keep-all; line-height:1.6rem; font-size:17px;}


/**** 공통 CSS ****/


/*풀페이지*/
.section{position:relative; width:100%; height:100%;  word-break:keep-all; box-sizing:border-box; overflow:hidden;}
	.section .fp-tableCell{position:relative; vertical-align:middle; z-index:11}
/*풀페이지*/

.section .fadeActive{opacity:0; transform:translateY(40px);}
	.section .fadeActive2{opacity:0; transform:translateY(40px);}
	.section .fadeActive3{opacity:0; transform:translateY(40px);}
	.section .fadeActive4{opacity:0; transform:translateY(40px);}
	.section .fadeActive5{opacity:0; transform:translateY(40px);}
	
	.section.in-view .fadeActive{opacity:1;transform:translateY(0);transition:all 1.0s ;}
	.section.in-view .fadeActive2{opacity:1;transform:translateY(0);transition:all 1.0s 0.2s;}
	.section.in-view .fadeActive3{opacity:1;transform:translateY(0);transition:all 1.0s 0.4s;}
	.section.in-view .fadeActive4{opacity:1;transform:translateY(0);transition:all 1.0s 0.6s;}
	.section.in-view .fadeActive5{opacity:1;transform:translateY(0);transition:all 1.0s 0.8s;}

@keyframes text{
0%{transform:translateY(30px); opacity:0;}
100%{transform:translateY(0px); opacity:1;}
}


/* 시소 어바웃 */
#siso{position:relative; background:url('../img/siso_bg.png') bottom right no-repeat, #f4bc1e;}
#siso .in{position:relative;  display:flex; height:100%; align-items:center;}
#siso .ct_box{ position:relative; width:50%; padding:0 4rem}
#siso .bg{position:relative; width:50%;height:100%;background:url('../img/siso_bg2.jpg') right center no-repeat; background-size:cover;}
#siso .link_box{position:relative; display:flex; margin-top:45px;}
#siso .link_box a{ position:relative; color:#fff; text-align:center; margin-right:30px;}
#siso .link_box a:last-child{margin-right:0}
#siso .link_box .icon{margin-bottom:20px; border:1px solid rgba(255,255,255,0.3); box-sizing:border-box; width:100px; height:100px; border-radius:100%; transition:all 0.3s linear;}
#siso .link_box .one .icon{background:url('../img/main_icon01.png') center no-repeat}
#siso .link_box .two .icon{background:url('../img/main_icon02.png') center no-repeat}
#siso .link_box .three .icon{background:url('../img/main_icon03.png') center no-repeat}
#siso .link_box .four .icon{background:url('../img/main_icon04.png') center no-repeat}
#siso .link_box .icon:hover{}
#siso .link_box .one:hover .icon{background:url('../img/main_icon01_over.png') center no-repeat, #fff;} 
#siso .link_box .two:hover .icon{background:url('../img/main_icon02_over.png') center no-repeat, #fff;} 
#siso .link_box .three:hover .icon{background:url('../img/main_icon03_over.png') center no-repeat, #fff;} 
#siso .link_box .four:hover .icon{background:url('../img/main_icon04_over.png') center no-repeat, #fff;} 
#siso .link_box p{line-height:1.4rem; letter-spacing:-0.3pt;}

#siso .main_link{transition:all 0.3s linear; position:relative; width:200px; height:60px; border:1px solid #111; box-sizing:border-box; background:#111; color:#fff; padding:0 30px; display:block; line-height:60px; box-sizing:border-box;text-align:left; border-radius:35px; font-weight:500; }
#siso .main_link span{transition:all 0.3s linear; width:7px; height:11px; display:block; background:url('../img/arrow_w.svg') center no-repeat; position:absolute; right:30px; transform:translateY(-50%); top:50%; }
#siso .main_link:hover{background:#f4bc1e; color:#111;}
#siso .main_link:hover span{background:url('../img/arrow.svg') center no-repeat;}

/* 시소 어바웃 */


#about{display:flex; flex-wrap:wrap;}
#about .textArea{width:50%; padding:60px 5% 0 0; box-sizing:border-box;}
#about .textArea .main_title{color:#d82a1d;}
		#about .textArea .decoDots{margin:40px 0;}
		#about .textArea .decoDots li{width:2px; height:2px; background:#b7b7b7; margin:0 0 9px; opacity:0; transition:all 1s linear;}
		#about .textArea .decoDots li:last-child{margin:0;}
#about .textArea .title{position:relative; top:-50px; opacity:0; transition:all 1s; margin:0 0 50px;}
#about .textArea h4{font-size:1.7rem; font-weight:200; letter-spacing:-0.7pt; line-height:1.4; color:#fff; position:relative; top:-30px; opacity:0; transition:all 1s;}
#about .textArea h4 b{line-height:inherit; letter-spacing:inherit; font-weight:600;}
#about .textArea p.stxt{margin:25px 0 50px; position:relative; top:-30px; opacity:0; transition:all 1s; color:#fff; font-size:17px; letter-spacing:-0.7pt;}
#about .textArea .btn_ani{ position:relative; top:-30px; opacity:0; transition:all 1s;}
#about .imgArea{position:relative; width:50%; text-align:right; padding-top:70px; margin:10% 0;}
#about .imgArea::after{content:''; width:456px; height:220px; background:url('../img/about_bg01.png')no-repeat center; opacity:.1; position:absolute; left:200px; top:30px; z-index:-1; transform:translateX(-38%); opacity:0; transition:all 1s;}
		#about .imgArea .decoBox{position:relative; max-width:80%; display:inline-block; opacity:0; transition:all 1s;}
		#about .imgArea .decoBox::after{content:''; position:absolute; z-index:10; left:-90px; width:0; height:30%; background:#d82a1d; mix-blend-mode:multiply; transition:all 1s;}
		#about .imgArea .decoBox img{max-width:100%;}
		#about .imgArea .decoBox video{max-width:100%;}
#about .textArea.action .title{top:0; opacity:1; transition:all .3s;}
#about .textArea.action .decoDots li{opacity:1; transition:all .3s linear;}
#about .textArea.action h4{top:0; opacity:1; transition:all .6s; transition-delay:.3s;}
#about .textArea.action p{top:0; opacity:1; transition:all .6s; transition-delay:.6s;}
#about .textArea.action .btn_ani{top:0; opacity:1; transition:all .6s; transition-delay:.4s;}
#about .imgArea.action::after{left:230px; top:-100px; opacity:.1; transition:all .6s;}
#about .imgArea.action .decoBox{opacity:1; transition:all .6s;}
#about .imgArea.action .decoBox::after{height:30%; width:100%; bottom:-16%; transition:all .6s;}

#about .youtube{position:absolute; top:40px; right:0;}
#about .youtube a{display:flex; align-items:center; width:60px; overflow:hidden; height:60px; text-align:left; background:#fff; box-sizing:border-box; border:2px solid #e21a20; line-height:60px; transition:.3s; border-radius:70px; box-shadow:rgb(0 0 0 / 14%) 3px 6px 12px;}
#about .youtube a:hover{width:200px; background:#e21a20;}
#about .youtube img{position:absolute; left:6px; top:6px;}
#about .youtube span{margin-left:62px; color:#111; font-size:1rem; letter-spacing:-0.5pt; font-weight:600; opacity:0; transition:.5s;}
#about .youtube a:hover span{opacity:1; transition:.3s; color:#fff;}

#about .imgArea.action .youtube a{animation:youtube 4s 0.5s both infinite;}
#about .imgArea.action .youtube span{animation:white 2s 0.5s both;}

@keyframes youtube{
0%{width:60px; background:#fff;}
50%{width:200px; background:#e21a20;}
100%{width:60px; background:#fff;}
}
@keyframes white{
0%{opacity:0px; color:#111;}
100%{opacity:1; color:#fff;}
}



/* 사업소개 */
#news .main-scroll2 a{color:#f7f7f7}
#news{position:relative; background:#111;}
#news:after{position:absolute; right:0; top:0; width:50%; height:100%; background:rgba(242,242,242,.1); display:block; content:''; }
#news .in{position:relative; display:flex; left:50%; margin-left:-675px; align-items:center;}
#news .smteng{color:#218a49}
#news .main_txt{color:#ddd}
#news .main_tbox{width:20%;}
#news .news_wp{position:relative;  width:2040px;}

#news .swiper-slide a{display:block; position:relative;}
#news .swiper-slide .pic{position:relative; overflow:hidden; margin-top:20px;}
#news .swiper-slide .pic img{background-size:cover !important;transition:all 0.3s linear; width:100%; height:auto; -webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out; -ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
#news .swiper-slide:hover .pic img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1); -o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
#news .rol1 .pic img{background:url('../img/news_roll1.jpg') center no-repeat;}
#news .rol2 .pic img{background:url('../img/news_roll2.jpg') center no-repeat;}
#news .rol3 .pic img{background:url('../img/news_roll3.jpg') center no-repeat;}
#news .rol4 .pic img{background:url('../img/news_roll4.jpg') center no-repeat;}
#news .rol5 .pic img{background:url('../img/news_roll5.jpg') center no-repeat;}
#news .rol6 .pic img{background:url('../img/news_roll6.jpg') center no-repeat;}
#news .rol7 .pic img{background:url('../img/news_roll7.jpg') center no-repeat;}

#news .swiper_but{position:relative; display:flex; align-items:center; margin-top:70px}
#news .swiper-pagination{position:relative; display:inline; margin:0 15px; bottom:auto; width:auto; font-size:; color:#f7f7f7}
#news .swiper-pagination-current{font-weight:700}
#news .swiper-pagination span{margin:0 5px}
#news .swiper-button-next, #news .swiper-button-prev{position:relative; top:auto; right:auto; width:9px; height:15px; margin:0; left:auto }
#news .swiper-button-next:after, #news .swiper-rtl .swiper-button-prev:after{content:''; width:9px; height:15px; background:url('../img/rollarrow_l.svg') center no-repeat;} 
#news .swiper-button-prev:after, #news .swiper-rtl .swiper-button-next:after{content:''; width:9px; height:15px; background:url('../img/rollarrow_r.svg') center no-repeat;}
#news .swiper-slide .tit{font-size:1.6471rem; color:#fff; font-weight:700; letter-spacing:-1pt; line-height:2rem; margin-right:10px; padding-bottom:10px;}
#news .swiper-slide .main_txt{color:#ddd; position:relative; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:120%; margin-bottom:10px; letter-spacing:0;}
#news .swiper-slide .tbox{position:relative; width:100%; box-sizing:border-box; padding:50px 50px 0 50px;}
#news .swiper-slide .link p{font-size:15px; color:#f7f7f7; word-break:break-all;}
#news .swiper-slide .link p > b{display:block;}
#news .swiper-slide .link i{font-size:15px; font-weight:500; color:#d82a1d; display:flex; align-items:center; min-width:140px;}
#news .swiper-slide .link i img{width:15px;}
#news .slick-slide{position:relative; margin:0 30px 0 0;}
#news .slick-list{margin:0 -30px 0 0;}
#news .slick-arrow{font-size:0; width:9px; height:15px; background-color:transparent; background-repeat:no-repeat; outline:none; border:0; cursor:pointer; z-index:100; background:url('../img/rollarrow_r.svg') center no-repeat; opacity:1; transition:all 0.3s ease-out;} 
	#news .prev{}
	#news .next{ background-image:url('../img/rollarrow_l.svg');}
	#news .slick-arrow:hover{opacity:0.5; transition:all 0.3s ease-out;}

#news .slider-paging-number{box-sizing:border-box;}
	#news .slider-paging-number li{display:none; font-size:0.88235rem; color:#f7f7f7;}
	#news .slider-paging-number li.slick-active{display:block; }
	#news .slider-paging-number li button{border:none; background:none; font-weight:700; color:#f7f7f7; position:relative; width:auto;  margin:0; padding:0 30px 0 0}
	#news .slider-paging-number li button:before{display:inline-block; content:""; width:2px;height:10px; background:#f7f7f7; margin:0 10px; opacity:0.3; transform:rotate(30deg); position:absolute; top:4px; z-index:2; right:4px;}

/*project*/
#project{position:relative; width:100%;}
#project .smteng{color:#218a49;}
#project .main_tbox{position:absolute; top:200px; z-index:99; text-align:center; width:100%; padding:0 3%; box-sizing:border-box;}
#project .slider{position:relative; display:block; width:100%; height:100vh}
#project .slider li{width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; transition:all 0.5s;}
#project .slider li.active{opacity:1; transition:all 0.5s;}
#project .slider li > div{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover;}
#project .slider li > div:after{position:absolute; content:""; width:100vw; height:100vh; top:0; left:0; box-shadow:inset 100vw 100vh 100rem rgba(0,0,0,.6);}


.strength_tabs{position:absolute; top:0; left:0; height:100%; z-index:50; width:100%;}
.strength_tabs .container-fluid{display:flex; flex-wrap:wrap; height:100%;  }
.strength_tabs .container-fluid li{border-right:1px solid rgba(255,255,255,.2); width:33.33%; box-sizing:border-box; transition:all 0.5s; text-align:center;}
.strength_tabs .container-fluid li:nth-child(1){animation:text 1s 0.8s both;}
.strength_tabs .container-fluid li:nth-child(2){animation:text 1s 1.0s both;}
.strength_tabs .container-fluid li:last-child{border:0; animation:text 1s 1.2s both;}
.strength_tabs .container-fluid li.active{transition:all 0.5s !important;}
.strength_tabs .container-fluid li a{display:flex; justify-content:center; align-items:center; height:100%; box-sizing:border-box; padding:200px 50px 0;}
.strength_tabs .container-fluid li dl{width:100%;}
.strength_tabs .container-fluid li dl dt{width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.1); margin:0 auto; transition:all .5s; display:flex; align-items:center; justify-content:center;}
.strength_tabs .container-fluid li:nth-child(1).active dl dt{background:#f4bc1e;}
.strength_tabs .container-fluid li:nth-child(2).active dl dt{background:#218a49;}
.strength_tabs .container-fluid li:nth-child(3).active dl dt{background:#d82a1d;}
.strength_tabs .container-fluid li dl dt img{max-width:100%;}
.strength_tabs .container-fluid li dl dd{padding:25px 0 0;}
.strength_tabs .container-fluid li dl dd h4{font-size:1.647rem; font-weight:700; color:#fff; letter-spacing:-0.5pt; line-height:120%;}
.strength_tabs .container-fluid li dl dd .main_txt{color:rgba(255,255,255,.7); padding:20px 0 40px;}
.strength_tabs .container-fluid li dl dd .btn{display:inline-block; font-size:17px; letter-spacing:0.3pt; color:#fff; font-family:'Outfit', sans-serif;}
.strength_tabs .container-fluid li dl dd .btn:after{content:''; display:inline-block; vertical-align:middle; width:7px; height:11px; background:url('../img/arrow_w.svg') no-repeat center/100% auto; margin:-1px 0 0 14px;}
.strength_tabs .container-fluid li:first-child dl dd .btn:after{margin:-2px 0 0 14px;}
.strength_tabs .container-fluid li:last-child dl dd .btn:after{margin:0px 0 0 14px;}


/* 인재채용 */
#recruit .main-scroll2 a{color:#f7f7f7}

#recruit{position:relative; background:url('../img/recruit_bg.jpg') center no-repeat; background-size:cover;}
#recruit .main_tbox{text-align:center;}
#recruit .smteng{color:#218a49; }
#recruit .main_title{color:#f7f7f7}
#recruit .main_txt{color:#777}
#recruit .main_tbox{margin-bottom:70px;}
/*#recruit .recruit_list{ animation:text 1s 0.8s both;}*/
#recruit .roll{position:relative; padding:38px 43px; background:#fff; border:1px solid #ddd; box-sizing:border-box; transition:all 0.3s linear;  }
#recruit .roll:hover{border-color:#a40102}
#recruit .slick-slide{position:relative; margin:0 30px 0 0; }
#recruit .slick-list{margin:0 -30px 0 0;}
#recruit .roll .cat{background:#a40102; color:#fff; font-size:0.82353rem; width:60px; height:29px; line-height:29px; font-weight:500; margin-bottom:10px; text-align:center; display:block}
#recruit .roll .rec_tit{color:#f7f7f7; font-weight:700; font-size:1.4118rem; letter-spacing:-1pt; height:2.8em; line-height:1.4em;
overflow:hidden; text-overflow:ellipsis;  display:-webkit-box;  -webkit-line-clamp:2; -webkit-box-orient:vertical;  word-wrap:break-word; }
#recruit .roll .date{border-top:1px solid #ddd; display:flex; justify-content:space-between; align-items:center; margin-top:60px; padding-top:20px}
#recruit .roll .date p{line-height:100%}
#recruit .roll .date p:last-child{font-size:0.88235rem}

#recruit .slick-arrow{position:absolute;  z-index:ddd9 !important; bottom:6px; font-size:0; width:9px; height:15px; background-color:transparent; background-repeat:no-repeat; outline:none;
border:0; cursor:pointer; z-index:100; background:url('../img/rollarrow_r.svg') center no-repeat; opacity:1; transition:all 0.3s ease-out;} 
	#recruit .slick-prev{left:50%; margin-left:-60px}
	#recruit .slick-next{right:50%; margin-right:-60px; background-image:url('../img/rollarrow_l.svg');}
	#recruit .slick-arrow:hover{opacity:0.5; transition:all 0.3s ease-out;}


#recruit .slider-paging-number{width:100%; text-align:center; box-sizing:border-box; margin-top:30px;}
	#recruit .slider-paging-number li{display:none; font-size:0.88235rem; color:#f7f7f7;}
	#recruit .slider-paging-number li.slick-active{display:block;}
	#recruit .slider-paging-number li button{border:none; background:none; font-weight:700; color:#f7f7f7; position:relative; width:auto;  margin:0; padding:0 30px 0 0}
	#recruit .slider-paging-number li button:before{display:inline-block; content:""; width:1.5px;
    height:10px;
    background:#f7f7f7;
    margin:0 10px;
    opacity:0.3;
    transform:rotate(30deg);
    position:absolute;
    top:4px;
    z-index:2;
    right:4px;}


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


#visual .txtCont{ left:3%; margin-left:0}
#visual .slick-arrow{left:3%; margin-left:0}
#visual .slick-page{margin-left:30px; left:3%}
#visual .slick-next{left:3%; margin-left:90px}


#siso .ct_box{padding:0 3rem}

#about .youtube{top:-30px;}
#about .textArea{padding-top:0;}
#about .imgArea{padding-top:0; margin:12.5% 0 10%;}

#news .in{left:3%; margin-left:0}
#news .main_tbox{width:30%; margin-right:5%}
#news .news_wp{ width:calc(100% - 35%);}
#news .swiper-slide .tbox{padding:30px 30px 0 30px;}


#recruit{}



.strength_tabs .container-fluid li dl dd .main_txt br{display:none;}
}



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


#visual .txtCont h2{font-size:3.5294rem}
#about .textArea h4{font-size:1.6rem;}

}



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

#siso .in{flex-direction:column;}
#siso .bg{width:100%; height:}
#siso .ct_box{box-sizing:border-box; width:100%;  height:calc(100% - 40%); padding:3rem 3% 6rem 3%; text-align:center; display:flex; flex-direction:column; justify-content:center;}
#siso .main_txt{text-align:center;}
#siso .main_txt br{ text-align:center;}
#siso .link_box{justify-content:center;}

#about{padding:5rem 3% 5rem 3%;}
#about .textArea {width:100%; padding-right:0;}
#about .textArea .title {margin:0 0 30px;}
		#about .textArea .decoDots {margin:25px 0;}
		#about .textArea .decoDots li {margin:0 0 5px;}

#about .textArea p.stxt{margin:20px 0 40px;}

#about .imgArea {position:relative; width:100%; text-align:right; padding-bottom:11.3%; margin-top:60px; margin-bottom:0;}
#about .imgArea::after{left:0; top:0; z-index:-1; transform:translateX(0); max-width:30%; background-size:100% !important; background-position:top center !important;}
		#about .imgArea .decoBox {max-width:100%;}
		#about .imgArea .decoBox::after {width:90px;  left:-45px; top:40%;}
		#about .textArea.action h4 > br{display:none;}
		#about .textArea.action p.stxt > br{display:none;}
		#about .imgArea.action .decoBox::after{height:20%; left:0; bottom:-50px; top:unset; width:70%;}
		#about .imgArea.action::after{top:90%; left:unset; right:0; max-width:70%;}

#news .in{flex-wrap:wrap; margin:10% 3%; left:0}
#news .main_tbox{width:100%; margin-right:0; text-align:center;}
#news .main_tbox .main_txt br{display:none}
#news .news_wp{width:100%}
#news .swiper_but{margin:40px 0 20px 0}
#news .swiper_but{justify-content:center;}


#recruit .main_tbox{margin-bottom:40px}

}




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

#visual .txtCont{transform:translateY(-50%);}
#visual .txtCont h2{font-size:2.9412rem; line-height:4rem; margin-bottom:10px;}
#visual .txtCont p{margin-bottom:60px; font-size:1.1176rem;}
#visual .txtCont .main_link{width:180px; height:50px; line-height:50px; padding:0 25px;}
#visual .txtCont .main_link span{right:25px;}

.main-scroll{display:none}
.main_title{font-size:2.6471rem; line-height:3.4rem; margin-bottom:15px;}

#siso .main_txt br{display:none}
#siso .bg{height:340px; background-position:center 61%;}
#siso .ct_box{padding:5rem 3% 8rem 3%}
#siso .main_link{width:180px; height:50px; line-height:50px; padding:0 25px;}
#siso .main_link span{right:25px;}


#about{padding:5rem 3% 5rem 3%;}
#about .textArea {width:100%; padding-right:0;}
#about .textArea .title {margin:0 0 30px;}
		#about .textArea .decoDots {margin:25px 0;}
		#about .textArea .decoDots li {margin:0 0 5px;}

#about .textArea p.stxt{margin:20px 0 40px;}

#about .imgArea {position:relative; width:100%; text-align:right; padding-bottom:11.3%; margin-top:60px;}
#about .imgArea::after{left:0; top:0; z-index:-1; transform:translateX(0); max-width:30%; background-size:100% !important; background-position:top center !important;}
		#about .imgArea .decoBox {max-width:100%;}
		#about .imgArea .decoBox::after {width:90px;  left:-45px; top:40%;}
		#about .textArea.action h4 > br{display:none;}
		#about .imgArea.action .decoBox::after{height:100%; left:0; width:30%;}
		#about .imgArea.action::after{top:92%; left:unset; right:0; max-width:50%;}

/*project*/
#project .slider{}
#project .main_tbox{top:5rem}
#project .in{height:700px}
.strength_tabs{}
.strength_tabs .container-fluid{}
.strength_tabs .container-fluid li a{padding:250px 30px 0; align-items:normal}
.strength_tabs .container-fluid li dl dt{width:120px; height:120px;}
.strength_tabs .container-fluid li dl dd{padding:20px 0 0;}
.strength_tabs .container-fluid li dl dd h4{font-size:1.4rem;}
.strength_tabs .container-fluid li dl dd .main_txt{padding:15px 0 30px;}

/* 사업소개 */
#news .in{padding:3rem 3% 0 3%;}
#news .swiper-slide .tit{font-size:1.2941rem; line-height:1.6rem;}

#recruit .fp-tableCell{padding:5rem 0}
#recruit .slick-slide{padding:25px}
#recruit .roll .rec_tit{font-size:1.1176rem; letter-spacing:-0.8pt;}
#recruit .roll .date{margin-top:30px}
#recruit .slick-slide{margin:0 20px 0 0;}
#recruit .slick-list{margin:0 -20px 0 0;}

div.topBtn2{right:15px; bottom:15px}
div.topBtn2 li a{width:50px; height:50px; font-size:13px; padding:10px 0;}
div.topBtn2 #scroll{width:50px; height:50px}
div.topBtn2 #scroll div{font-size:12px}


@keyframes youtube{
0%{width:60px; background:#fff;}
50%{width:200px; background:#e21a20;}
100%{width:60px; background:#fff;}
}
@keyframes white{
0%{opacity:0px; color:#111;}
100%{opacity:1; color:#fff;}
}



}


/*******************************************************************************
	@media 890~980px
*******************************************************************************/
@media screen and (min-width:680px) and (max-width: 980px) {

.strength_tabs .container-fluid li dl dd{display:flex; flex-direction:column; justify-content:space-between; min-height:225px;}

}

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

#pageMenu{display:none}


/* 공통 */
.m_etit{}
.m_tit{font-size:2rem; margin:12px 0 15px;}
#about .textArea p.stxt, #news .main_txt, #project .main_txt{font-size:1.125rem;}
#news .slider-paging-number li, #recruit .slider-paging-number li{font-size:1rem;}
/* 공통 */

#pageMenu{display:none !important;}
#pageMenu a{margin-bottom:15px}

/*.section .fadeActive{opacity:1; transform:translateY(0);}
	.section .fadeActive2{opacity:1; transform:translateY(0);}
	.section .fadeActive3{opacity:1; transform:translateY(0);}
	.section .fadeActive4{opacity:1; transform:translateY(0);}
	.section .fadeActive5{opacity:1; transform:translateY(0);}*/



/* iOS only */ 
@supports (-webkit-touch-callout:none){ 
	#visual{height:-webkit-fill-available !important;} 
}

#visual .txtCont{padding-right:20px;}
#visual .txtCont h2{font-size:2.3529rem; line-height:3rem; letter-spacing:-2pt;}
#visual .txtCont .main_link{width:160px; height:45px; line-height:45px;}
#visual .txtCont p{font-size:1rem; margin-bottom:40px;}
#visual .slick-arrow{bottom:20px;}
#visual .slick-page{bottom:29px;}


.main_title{font-size:2.1176rem; letter-spacing:0pt; line-height:3rem; margin-bottom:10px}
#about .textArea .main_title{margin-bottom:30px; text-align:center;}
#about .textArea.action .btn_ani{text-align:center;}

#siso{display:flex; flex-wrap:wrap;}
#siso .bg{height:300px;}
#siso .ct_box{padding:4rem 3% 8rem 3%;}
#siso .link_box .icon{width:80px; height:80px; margin-bottom:15px;}
#siso .link_box .icon{background-size:40px !important;}
#siso .link_box{margin-top:35px;}
#siso .main_link{width:160px; height:45px; line-height:45px;}

#about .textArea {padding:0 0 0;}
		#about .textArea .decoDots {margin:20px 0;}

#about .textArea .title {margin:0 0 15px;}
#about .textArea h4 {font-size:1.4rem;}
#about .textArea p.stxt {margin:10px 0 25px;}

#about .imgArea {position:relative; width:100%; text-align:right; padding-bottom:11.3%; margin-top:60px;}
#about .imgArea::after{left:0; top:0; z-index:-1; transform:translateX(0); max-width:30%; background-size:100% !important; background-position:top center !important;}
		#about .imgArea .decoBox {max-width:100%;}
		#about .imgArea .decoBox::after {width:90px;  left:-45px; top:40%;}
		#about .imgArea.action .decoBox::after{height:100%; left:0; width:30%;}
		#about .imgArea.action::after{top:90%; left:unset; right:0; max-width:60%;}

/*#news .in{margin:4rem 3%}*/
#news .swiper-slide .tbox{padding:20px 20px 0 20px;}
#news .swiper-slide .tit{margin-bottom:0; padding-bottom:5px;}

/*project*/
#project .in{height:auto}
#project .main_tbox{top:auto;position:relative; padding-top:60px; margin-bottom:20px;}
#project .slider{height:100%; position:absolute; top:0;}

.strength_tabs{position:relative;}
.strength_tabs .container-fluid{height:auto}
.strength_tabs .container-fluid li{width:100%; border-right:0; border-bottom:1px solid rgba(255,255,255,.2);}
.strength_tabs .container-fluid li a{padding:25px 3%;}
.strength_tabs .container-fluid li:first-child a{}
.strength_tabs .container-fluid li:last-child a{padding-bottom:60px;}
.strength_tabs .container-fluid li dl{width:100%; display:flex; align-items:center;}
.strength_tabs .container-fluid li dl dt{width:80px; height:80px;}
.strength_tabs .container-fluid li dl dd{padding:0 0 0 15px; text-align:left; width:calc(100% - 80px);}
.strength_tabs .container-fluid li dl dd h4{font-size:1.2941rem;}
.strength_tabs .container-fluid li dl dd .main_txt{padding:8px 0 15px; box-sizing:border-box}
.strength_tabs .container-fluid li dl dd .main_txt br{display:none}
.strength_tabs .container-fluid li dl dd .btn{font-size:15px;}
.strength_tabs .container-fluid li dl dd .btn:after{width:5px; height:8px; margin:-2px 0 0 10px;}

/*#recruit .width1350{padding:4rem 0}*/
#recruit .slick-arrow{bottom:3px}
#recruit .slick-prev{margin-left:-50px;}
#recruit .slick-next{margin-right:-50px}


@keyframes youtube{
0%{width:60px; background:#fff;}
50%{width:190px; background:#e21a20;}
100%{width:60px; background:#fff;}
}
@keyframes white{
0%{opacity:0px; color:#111;}
100%{opacity:1; color:#fff;}
}


}

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


#visual .txtCont .main_link{width:140px}
#visual .txtCont p, #news .swiper-slide .link p, .strength_tabs .container-fluid li dl dd .main_txt{font-size:1.125rem;}
#siso .main_link{width:140px}

#siso{background-size:200px}
#siso .bg{height:160px}
#siso .link_box{    flex-wrap:wrap;}
#siso .link_box a{width:calc((100% - 20px)/2); margin-right:20px;  margin-bottom:20px}
#siso .link_box a:nth-child(2n){margin-right:0}
#siso .link_box a:nth-child(3), #siso .link_box a:nth-child(4){margin-bottom:0}
#siso .link_box .icon{width:70px; height:70px; margin:0 auto 10px auto}

#about{padding:60px 3%;}
#about .youtube a{width:50px; height:50px;}
#about .youtube img{top:5px; width:40px; border-radius:50%; box-sizing:border-box; box-shadow:-2px 0 15px rgba(255,255,255,.5);}
#about .youtube span{margin-left:52px;}

#recruit .roll .cat{height:23px; line-height:23px; width:50px}
#recruit .roll .date{padding-top:10px}

@keyframes youtube{
0%{width:51.5px; background:#fff;}
50%{width:160px; background:#e21a20;}
100%{width:51.5px; background:#fff;}
}
#news .in{padding:0 3% 0 3%; margin:60px 3% 20px;}
#news .swiper-slide .link i{margin-top:10px;}

}



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


}