@charset "utf-8";
/*
$pink: #f26060
*/

.main_top_area{width:95%;min-width:1200px;margin:0 auto;overflow:hidden;clear:both;}

/* 메인비주얼 */
#mvisual{position:relative;float:right;width:68%;height:590px;border-radius:50px;background:#070908 url(/theme/basic/img/mimg.jpg) no-repeat left 50%;}
#mvisual .area{padding:100px 0 0 70px;color:#fff;z-index:10;text-align:left;}
#mvisual .area .txt1{margin-bottom:8px;color:rgba(255,255,255,0.5);font-size:20px;font-family: 'Noto-Medium';letter-spacing:-0.5px;animation:txt1;animation-duration:4s;animation-iteration-count:infinite;animation-fill-mode: forwards;}
#mvisual .area .txt2{margin-bottom:45px;font-size:48px;color:#fff;font-family: 'Noto-Black';line-height:60px;letter-spacing:-0.5px;animation:txt2;animation-duration:4s;animation-iteration-count:infinite;animation-fill-mode: forwards;}
#mvisual .area .txt2 span{font-family: 'Noto-Light';animation:txt3;animation-duration:4s;animation-iteration-count:infinite;animation-fill-mode: forwards;}
#mvisual .area .txt3 img{width:205px;}

@keyframes txt1 {
	0% {transform: translateY(-40px);opacity:0;}
	20% {transform: translateY(0);opacity:1;}
	100% {transform: translateY(0);opacity:1;}
}
@keyframes txt2 {
	0% {transform: translateY(-60px);opacity:0;}
	20% {transform: translateY(0);opacity:1;}
	100% {transform: translateY(0);opacity:1;}
}
@keyframes txt3 {
	0% {transform: translateY(0);opacity:0;}
	20% {transform: translateY(0);opacity:1;}
	100% {transform: translateY(0);opacity:1;}
}

/* 주요생산제품 */
#production{float:left;width:calc(32% - 30px);height:590px;box-sizing:border-box;border-radius:50px;background:#abb7c4 url(/theme/basic/img/product_bg.gif) no-repeat -10% bottom;}
#production .area{display:block;padding:70px 60px 0 60px;color:#fff;}
#production .area a{color:#fff;}
#production .area .txt1{margin-bottom:15px;font-size:30px;font-family: 'Noto-Black';line-height:42px;}
#production .area .txt1 span{font-family: 'Noto-Regular';}
#production .area .txt2{margin-bottom:25px;font-family: 'Noto-Medium';letter-spacing:-0.5px;color:rgba(255,255,255,0.5);}
#production .area a:hover .more img{animation:product_more;animation-duration:0.5s;animation-iteration-count:1;animation-fill-mode: forwards;}
#production .area .more img{width:35px;}
@keyframes product_more {
	0% {transform: rotate(360deg);opacity:1;}
	100% {transform: rotate(0);opacity:1;}
}

/* 바로가기 메뉴 */
#mbaro{width:95%;margin:0 auto;padding:80px 0;}
#mbaro .area{width:100%;overflow:hidden;clear:both;}
#mbaro .area .box{float:left;width:25%;border-left:1px solid #dbdbdb;box-sizing:border-box;text-align:center;}
#mbaro .area .box:first-child{border-left:0;}
#mbaro .area .box a{display:block;}
#mbaro .area .box dl{padding:10px 0 20px 140px;display:inline-block;text-align:left;background-repeat:no-repeat;background-position:left 50%;background-size:110px;}
#mbaro .area .box dl dt{margin-bottom:10px;color:#000;font-size:28px;font-family: 'Noto-Bold';letter-spacing:-0.5px;}
#mbaro .area .box dl dd{font-size:18px;color:#666;font-family: 'Noto-Medium';letter-spacing:-0.5px;}
#mbaro .area .box a .more{display:inline-block;margin-top:20px;padding:8px;font-size:15px;color:#222;font-family: 'Noto-Bold';border-bottom:1px solid #000;}
#mbaro .area .box a:hover .more{color:#fff;background:#163962;transition: all 400ms;border-radius:5px;border-color:#163962;}
#mbaro .area .box dl.icon01{background-image:url(/theme/basic/img/baro_icon01.png);}
#mbaro .area .box dl.icon02{background-image:url(/theme/basic/img/baro_icon02.png);}
#mbaro .area .box dl.icon03{background-image:url(/theme/basic/img/baro_icon03.png);}
#mbaro .area .box dl.icon04{background-image:url(/theme/basic/img/baro_icon04.png);}
#mbaro .area .box dl.icon05{background-image:url(/theme/basic/img/baro_icon05.png);}


/* 설비현황 */
#facilities{width:100%;padding:80px 0;text-align:center;background:url(/theme/basic/img/facilities_bg.jpg) no-repeat center 50%;}
#facilities .area{position:relative;width:95%;margin:0 auto;color:#fff;text-align:left;}
#facilities .area .title_area{position:absolute;top:25px;left:0;width:450px;}
#facilities .area .title_area .text{margin-bottom:50px;color:#fff;}
#facilities .area .title_area .text .txt1{margin-bottom:8px;color:rgba(255,255,255,0.5);font-size:20px;font-family: 'Noto-Medium';letter-spacing:-0.5px;}
#facilities .area .title_area .text .txt2{font-size:44px;font-family: 'Noto-Bold';letter-spacing:-0.5px;line-height:56px;font-family: 'Noto-Light';}
#facilities .area .title_area .text .txt2 span{font-family: 'Noto-Light';}
#facilities .area .title_area .text .txt2 strong{font-family: 'Noto-Bold';}
#facilities .area .title_area .tit_tab{width:100%;text-align:left;margin-bottom:80px;}
#facilities .area .title_area .tit_tab li{display:inline-block;margin:0 2px;}
#facilities .area .title_area .tit_tab li button{font-family: 'Noto-Bold';border-radius:50px;width:210px;height:60px;line-height:55px;cursor:pointer;font-size:17px;color:#fff;border:2px solid #fff;background:none;transition: all 400ms;}
#facilities .area .title_area .tit_tab li button:hover,
#facilities .area .title_area .tit_tab li button.on{background:#fff;color:#000;box-shadow:6px 6px 10px rgba(0,0,0,0.5);}


#facilities .cont_area{position:relative;margin-left:500px;}
#facilities .fac_cont{position:relative;}

#facilities .swiper-fac{position:relative;width:100%;height:auto;z-index:10;}
#facilities .swiper-fac .swiper-wrapper{width:100%;}
#facilities .swiper-fac .swiper-slide{float:left;color:#fff;text-align:center;transition: all 400ms;}
#facilities .swiper-fac .swiper-slide .pic{width:100%;margin-bottom:30px;border-radius:50px;overflow:hidden;}
#facilities .swiper-fac .swiper-slide .pic img{width:100%;height:auto;border-radius:50px;}
#facilities .swiper-fac .swiper-slide .pic:hover{box-shadow:10px 10px 10px rgba(0,0,0,0.5);}
#facilities .swiper-fac .swiper-slide .pic:hover img{animation:pic_big;animation-duration:1s;animation-iteration-count:1;animation-fill-mode: forwards;}
#facilities .swiper-fac .swiper-slide .btxt{margin-bottom:10px;font-family: 'Noto-Bold';font-size:28px;}
#facilities .swiper-fac .swiper-slide .btxt span{font-family: 'Noto-Regular';}
#facilities .swiper-fac .swiper-slide .stxt{font-size:18px;font-family: 'Noto-Medium';}
@keyframes pic_big {
	0% {transform: scale(1);}
	100% {transform: scale(1.1);}
}

#facilities .control{position:absolute;top:280px;left:-500px;width:500px;text-align:left;z-index:15;}/*bottom:30px*/
#facilities .control .fac-prev,
#facilities .control .fac-next{display:inline-block;margin:0;top:0;width:auto;height:auto;opacity:0.6;padding:5px 20px 5px 20px;}
#facilities .control .fac-prev{display:inline-block !important;left:auto !important;position:relative !important;border-right:1px solid rgba(255,255,255,0.5) !important;padding-left:0;}
#facilities .control .fac-next{display:inline-block !important;right:auto !important;position:relative !important;}
#facilities .control .fac-prev:hover,
#facilities .control .fac-next:hover{opacity:1;}


/* 공정관리시스템 */
#main_system{width:100%;padding:90px 0;background:#dde8f6;}
#main_system .area{width:95%;margin:0 auto;}
#main_system .area .title_area{width:100%;display:inline-block;}
#main_system .area .title_area .text{float:left;margin-bottom:60px;}
#main_system .area .title_area .text .txt1{margin-bottom:8px;color:rgba(0,0,0,0.5);font-size:20px;font-family: 'Noto-Medium';letter-spacing:-0.5px;}
#main_system .area .title_area .text .txt2{font-size:44px;font-family: 'Noto-Bold';letter-spacing:-1px;line-height:56px;}
#main_system .area .title_area .text .txt2 span{font-family: 'Noto-Light';}
#main_system .area .title_area .tit_tab{float:right;display:inline-block;}
#main_system .area .title_area .tit_tab li{display:inline-block;margin:0 2px;}
#main_system .area .title_area .tit_tab li button{font-family: 'Noto-Bold';border-radius:50px;width:210px;height:60px;line-height:55px;cursor:pointer;font-size:17px;color:#fff;border:0 none;background:#9aa5ba;transition: all 400ms;}
#main_system .area .title_area .tit_tab li button:hover,
#main_system .area .title_area .tit_tab li button.on{background:#fff;color:#000;box-shadow:6px 6px 10px rgba(0,0,0,0.5);}
#main_system .area .cont_area{width:100%;text-align:center;}
#main_system .more{display:none;}



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


	/* 바로가기 메뉴 */
	#mbaro .area .box dl{padding-left:100px;background-size:90px;}

	/* 설비현황 */
	#facilities .cont_area{position:relative;margin-left:450px;}
	#facilities .control{left:-450px;}

	/* 공정관리시스템 */
	#main_system .area .title_area .text{float:left;width:850px;}
	#main_system .area .title_area .text .txt2 span{display:inline-block;}




}



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


	
	.main_top_area{width:96%;}

	/* 주요생산제품 */
	#production .area{padding:70px 50px 0 50px;}

	/* 바로가기 메뉴 */
	#mbaro{width:100%;}
	#mbaro .area .box{padding-bottom:10px;}
	#mbaro .area .box:first-child{border-left:0;}
	#mbaro .area .box dl{padding:100px 0 0 0;display:inline-block;text-align:center;background-size:100px;background-position:top center;}



	/* 설비현황 */
	#facilities{padding:80px 0;}
	#facilities .area{width:96%;}
	#facilities .area .title_area{position:relative;top:0;width:100%;text-align:center;}
	#facilities .area .title_area .tit_tab{text-align:center;margin-bottom:45px;}

	#facilities .cont_area{margin-left:0;}

	#facilities .swiper-fac{position:relative;width:100%;height:auto;z-index:10;}
	#facilities .swiper-fac .swiper-wrapper{width:100%;}

	#facilities .control{position:absolute;bottom:auto;top:32%;left:0 !important;width:100%;height:1px;text-align:left;z-index:15;}
	#facilities .control .fac-prev,
	#facilities .control .fac-next{padding:0;width:60px;height:60px !important;line-height:70px !important;padding:0 !important;text-align:center;background:rgba(0,0,0,0.8);}
	#facilities .control .fac-prev{float:left;border:0 none !important;padding:0;}
	#facilities .control .fac-next{float:right;border:0 none !important;}
	#facilities .control .fac-prev img,
	#facilities .control .fac-next img{display:inline-block;height:auto;}



	/* 공정관리시스템 */
	#main_system{padding:80px 0;}
	#main_system .area{width:96%;}
	#main_system .area .title_area .text{float:none;width:100%;margin-bottom:50px;text-align:center;}
	#main_system .area .title_area .tit_tab{margin-bottom:45px;float:none;display:inline-block;width:100%;text-align:center;}
	#main_system .area .cont_area{width:100%;text-align:center;}
	#main_system .area .cont_area img{width:95%;}

}





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



	/* 메인비주얼 */
	#mvisual .area{padding-top:70px;}
	#mvisual .area .txt2{font-size:45px;line-height:55px;}

	/* 주요생산제품 */
	#production{background-position:15% bottom }
	#production .area{padding:60px 40px 0 40px;}





}




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


	.main_top_area{min-width:auto;width:96%;}

	/* 메인비주얼 */
	#mvisual{float:none;width:100%;height:450px;margin-bottom:25px;}
	#mvisual .area{padding:60px 0 0 70px;}
	#mvisual .area .txt1{font-size:18px;}
	#mvisual .area .txt2{font-size:38px;line-height:48px;}
	#mvisual .area .txt3 img{}

	/* 주요생산제품 */
	#production{float:none;width:100%;height:300px;background-position:140% 50%;}
	#production .area{display:block;padding:50px 60px 0 60px;color:#fff;text-align:left;}
	#production .area a{color:#fff;}
	#production .area .txt1{font-size:26px;line-height:38px;}
	#production .area .txt2{}
	@keyframes product_more {
		0% {transform: rotate(360deg);opacity:1;}
		100% {transform: rotate(360deg);opacity:1;}
	}


	/* 바로가기 메뉴 */
	#mbaro{width:96%;padding:30px 0 15px 0;text-align:center;}
	#mbaro .area .box{width:49%;border:1px solid #ccc;border-radius:50px;padding:35px 0;box-sizing:border-box;margin-bottom:20px;}
	#mbaro .area .box:first-child{border:1px solid #ccc;}
	#mbaro .area .box dl{padding:0 0 0 120px;display:inline-block;text-align:left;background-size:90px;background-position:left 10px;}
	#mbaro .area .box dl dt{font-size:26px;}
	#mbaro .area .box dl dd{font-size:16px;}
	#mbaro .area .box.fl{float:left;}
	#mbaro .area .box.fr{float:right;}



	/* 설비현황 */
	#facilities{padding:60px 0;}
	#facilities .area .title_area{}
	#facilities .area .title_area .text{margin-bottom:40px;color:#fff;}
	#facilities .area .title_area .text .txt1{font-size:18px;}
	#facilities .area .title_area .text .txt2{font-size:38px;line-height:48px;}
	#facilities .area .title_area .tit_tab{}
	#facilities .area .title_area .tit_tab li button{width:200px;font-size:16px;}

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



	/* 공정관리시스템 */
	#main_system{padding:60px 0;}
	#main_system .area .title_area .text{margin-bottom:40px;}
	#main_system .area .title_area .text .txt1{font-size:18px;}
	#main_system .area .title_area .text .txt2{font-size:38px;line-height:48px;}
	#main_system .area .title_area .tit_tab{}
	#main_system .area .title_area .tit_tab li button{width:200px;font-size:16px;}
	#main_system .area .cont_area img{width:98%;}
	#main_system .more{display:block;width:100%;text-align:center;margin-top:15px;}
	#main_system .more a{display:inline-block;padding-bottom:5px;border-bottom:2px solid #000;font-size:15px;font-family: 'Noto-Black';color:#000;}





}





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


	.main_top_area{}


	/* 메인비주얼 */
	#mvisual{height:360px;background-size:auto 100%}
	#mvisual .area{padding:50px 0 0 60px;}
	#mvisual .area .txt1{font-size:17px;}
	#mvisual .area .txt2{font-size:36px;line-height:46px;}
	#mvisual .area .txt3 img{width:160px;}

	/* 주요생산제품 */
	#production{height:200px;background-size:450px;background-position:right 50%;}
	#production .area{display:block;padding:40px 60px 0 60px;color:#fff;text-align:left;}
	#production .area .txt1{font-size:25px;line-height:35px;text-shadow:3px 3px 3px rgba(0,0,0,0.5);}
	#production .area .txt2{display:none;}


	/* 바로가기 메뉴 */
	#mbaro{text-align:center;}
	#mbaro .area .box{padding:30px 0;margin-bottom:15px;}
	#mbaro .area .box dl{padding:60px 0 0 0;display:inline-block;text-align:center;background-size:70px;background-position:center top;}
	#mbaro .area .box dl dt{font-size:23px;}
	#mbaro .area .box dl dd{font-size:15px;}


	/* 설비현황 */
	#facilities{}
	#facilities .area .title_area .text{margin-bottom:30px;}
	#facilities .area .title_area .text .txt1{font-size:16px;}
	#facilities .area .title_area .text .txt2{font-size:28px;line-height:38px;}
	#facilities .area .title_area .text .txt2 strong{font-weight:normal;display:inline-block;}
	#facilities .area .title_area .tit_tab{}
	#facilities .area .title_area .tit_tab li button{height:52px;line-height:48px;}

	#facilities .swiper-fac .swiper-slide .btxt{font-size:23px;}
	#facilities .swiper-fac .swiper-slide .stxt{font-size:16px;}

	#facilities .control{bottom:-70px;}


	/* 공정관리시스템 */
	#main_system{}
	#main_system .area .title_area .text{margin-bottom:30px;}
	#main_system .area .title_area .text .txt1{font-size:16px;}
	#main_system .area .title_area .text .txt2{font-size:28px;line-height:38px;}
	#main_system .area .title_area .tit_tab{}
	#main_system .area .title_area .tit_tab li button{height:52px;line-height:48px;}



}




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



	/* 메인비주얼 */
	#mvisual{margin-bottom:10px;}
	#mvisual .area{padding:50px 0 0 50px;}
	#mvisual .area .txt1{font-size:16px;}
	#mvisual .area .txt2{font-size:32px;line-height:42px;}


	/* 주요생산제품 */
	#production{background-size:400px;background-position:160% 50%;}
	#production .area{padding:40px 50px 0 50px;}
	#production .area .txt1{font-size:23px;line-height:30px;}
	#production .area .txt2{display:none;}


	/* 바로가기 메뉴 */
	#mbaro{text-align:center;padding:20px 0 10px 0;}
	#mbaro .area .box{padding:30px 0;margin-bottom:10px;}
	#mbaro .area .box dl{background-size:50px;padding-top:60px;}
	#mbaro .area .box dl dt{font-size:21px;}
	#mbaro .area .box dl dd{}
	#mbaro .area .box a .more{margin-top:10px;font-size:15px;display:none;}


	/* 설비현황 */
	#facilities{}
	#facilities .area .title_area .text{margin-bottom:25px;}
	#facilities .area .title_area .text .txt1{font-size:15px;}
	#facilities .area .title_area .text .txt2{font-size:25px;line-height:35px;}
	#facilities .area .title_area .tit_tab{margin-bottom:20px;}
	#facilities .area .title_area .tit_tab li button{font-size:15px;}

	#facilities .swiper-fac .swiper-slide .btxt{font-size:21px;}
	#facilities .swiper-fac .swiper-slide .stxt{}

	#facilities .control{bottom:-70px;}
	#facilities .control .fac-prev,
	#facilities .control .fac-next{line-height:60px !important;}
	#facilities .control .fac-prev img,
	#facilities .control .fac-next img{width:35px;}




	/* 공정관리시스템 */
	#main_system{}
	#main_system .area .title_area .text{margin-bottom:25px;}
	#main_system .area .title_area .text .txt1{font-size:15px;}
	#main_system .area .title_area .text .txt2{font-size:25px;line-height:35px;}
	#main_system .area .title_area .tit_tab{}
	#main_system .area .title_area .tit_tab li button{font-size:15px;}
	#main_system .more a{font-size:14px;}





}



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



	/* 메인비주얼 */
	#mvisual{margin-bottom:10px;background-position:-100px 50%;}
	#mvisual .area{padding:50px 0 0 35px;text-shadow:3px 3px 3px rgba(0,0,0,0.5);}
	#mvisual .area .txt1{font-size:14px;text-shadow:3px 3px 3px rgba(0,0,0,0.5);}
	#mvisual .area .txt2{font-size:28px;line-height:38px;}
	#mvisual .area .txt3 img{width:120px;}


	/* 주요생산제품 */
	#production{background-size:350px;}
	#production .area{padding:40px 40px 0 40px;}
	#production .area .txt1{}
	#production .area .txt2{display:none;}


	/* 바로가기 메뉴 */
	#mbaro{text-align:center;padding:10px 0 0 0;}
	#mbaro .area .box{margin-bottom:10px;}
	#mbaro .area .box dl{background-size:60px;padding-top:65px;}
	#mbaro .area .box dl dt{margin-bottom:5px;font-size:18px;}
	#mbaro .area .box dl dd{font-size:13px;}
	#mbaro .area .box a .more{font-size:13px;}
	/*
	#mbaro{text-align:center;padding:20px 0 10px 0;}
	#mbaro .area .box{float:none !important;width:100%;padding:25px 0;margin-bottom:10px;}
	#mbaro .area .box dl{background-size:80px;padding:0 0 0 100px;text-align:left;background-position:left 50%;}
	#mbaro .area .box dl dt{font-size:20px;}
	#mbaro .area .box dl dd{font-size:14px;}
	#mbaro .area .box dl dd .more a{font-size:14px;}
	*/


	/* 설비현황 */
	#facilities{padding:50px 0;}
	#facilities .area .title_area .text{margin-bottom:20px;}
	#facilities .area .title_area .text .txt1{font-size:15px;}
	#facilities .area .title_area .text .txt2{}
	#facilities .area .title_area .text .txt2 span{display:none;}
	#facilities .area .title_area .tit_tab{}
	#facilities .area .title_area .tit_tab li button{width:150px;}

	#facilities .swiper-fac .swiper-slide .btxt{}
	#facilities .swiper-fac .swiper-slide .stxt{font-size:14px;}

	#facilities .control .fac-prev img,
	#facilities .control .fac-next img{width:25px;}


	/* 공정관리시스템 */
	#main_system{padding:50px 0;}
	#main_system .area .title_area .text{margin-bottom:20px;}
	#main_system .area .title_area .text .txt1{font-size:15px;}
	#main_system .area .title_area .text .txt2{}
	#main_system .area .title_area .tit_tab{}
	#main_system .area .title_area .tit_tab li button{width:150px;}




}