@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

#main_gal{position:relative;}
#main_gal .banner_container{position:relative;width:100%;overflow:hidden; height: 750px}
#banner_content {position:relative;width:100%; }
#banner_content>div {top:0;left:0;width:100%;height:100%; overflow:hidden; height: 750px}
#banner_content div.area{display:block; width:100%; height:100%;}
/*#banner_content div.area img{position: absolute;top:160px;left:50%;margin-left:-480px;width:514px;height:auto;}*/

#banner_content div.img1 {background: url('/img/main/main1.jpg') center center no-repeat ; background-size: cover;}
#banner_content div.img2 {background: url('/img/main/main2.jpg') center center no-repeat ;  background-size: cover;}
#banner_content div.img3 {background: url('/img/main/main3.jpg') center center no-repeat ;  background-size: cover;}
#banner_content div.img4 {background: url('/img/main/main4.jpg') center center no-repeat ;  background-size: cover;}


#main_gal .banner_container .slogan {position:absolute;top:50%;margin-top: -150px;width: 800px;left: 50%; margin-left: -580px; overflow:hidden; text-align: left; font-weight: 400; color: #fff; }
#main_gal .banner_container .slogan p.p1{ font-size: 15px; color: #f9b233; letter-spacing: 6px;}
#main_gal .banner_container .slogan p.p2{margin-top: 10px; font-size:56px;  text-shadow: 2px 2px rgba(0,0,0,0.12);letter-spacing: 1px;text-indent: -2px; line-height: 1.2;     font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight:600;
  font-style: normal;}
#main_gal .banner_container .slogan p.p3{font-family: 'NanumSquareExtraBold'; font-size: 19px; color: #fff; line-height: 1.5; margin-top: 20px;text-shadow: 2px 2px rgba(0,0,0,0.12); background: rgba(30,79,117,0.45); display: inline-block; padding: 5px 14px 7px; border-radius: 3px;}
	
#banner_content .slick-slide img{margin:0 auto; width: 100%; border-radius: 0px;}
#banner_content ul.slick-dots{position: absolute;text-align: center;	width:100%;z-index: 11; bottom:20px;}
#banner_content ul.slick-dots li{display: inline-block;margin:0 3px;}
#banner_content ul.slick-dots li button{font-size: 0;display: block;height:11px;width:11px;background: #fff; border-radius: 8px; opacity: 0.6; }
#banner_content ul.slick-dots li.slick-active button{opacity: 1; }

#banner_content .slider-nav{padding:20px 50px 20px; }
#banner_content .slider-nav .slick-slide{margin:0 5px; opacity: 0.5; border-radius: 0px; overflow: hidden;}

#banner_content .slider-nav .slick-current{opacity: 1;}

#banner_content .slick-prev{width:44px; height: 44px; background: url(/img/main/slick_prev.png) no-repeat center center rgba(255,255,255,0.2);text-indent: 9999px; position: absolute; top:50%; margin-top: -22px; left:10px; z-index: 500; background-size: 20px; border-radius: 50px;overflow: hidden; }
#banner_content .slick-next{width:44px; height: 44px; background: url(/img/main/slick_next.png) no-repeat center center  rgba(255,255,255,0.2);text-indent: 9999px; position: absolute; top:50%; margin-top: -22px; right: 10px; z-index:500;  background-size: 20px; border-radius: 50px; overflow: hidden;}


@media screen and (max-width:1260px) {
#main_gal .banner_container .slogan {top:50%;margin-top: -150px;left: 30px; margin-left: -0px; }


#banner_content .slick-prev{display: none!important }
#banner_content .slick-next{display: none!important}

#main_gal .banner_container{position:relative;width:100%;overflow:hidden; height: 640px;}
#banner_content>div {top:0;left:0;width:100%;height:100%; overflow:hidden; height: 640px;}
}

@media screen and (max-width:980px) {
#main_gal .banner_container{position:relative;width:100%;overflow:hidden; height: 580px;}
#banner_content>div {top:0;left:0;width:100%;height:100%; overflow:hidden; height: 580px;}


#main_gal .banner_container .slogan {top:50%;margin-top: -110px;  width: 100%; padding: 0 25px; left: 0;}
#main_gal .banner_container .slogan p.p2{ font-size:45px;  }


}	

@media screen and (max-width:768px) {
/*팝업창 이미지 사이즈 재설정 - 필수*/
.drag_pop{max-width:310px !important;}
#main_gal .banner_container{position:relative;width:100%;overflow:hidden; height: auto;}
#banner_content>div {top:0;left:0;width:100%;height:100%; overflow:hidden; height: auto;}

#main_gal .banner_container .slogan {margin-top: -80px; padding: 0 20px; }
#main_gal .banner_container .slogan p.p1{ font-size: 14px; letter-spacing: 1px;}
#main_gal .banner_container .slogan p.p2{margin-top: 10px; font-size:34px; }
#main_gal .banner_container .slogan p.p3{ font-size: 15px; padding: 4px 7px 5px;  }

#banner_content ul.slick-dots{position: absolute;text-align: center;	width:100%;z-index: 11; bottom:7px;}
#banner_content ul.slick-dots li{display: inline-block;margin:0 3px;}
#banner_content ul.slick-dots li button{font-size: 0;display: block;height:9px;width:9px;background: #fff; border-radius: 8px; opacity: 0.6; }
#banner_content ul.slick-dots li.slick-active button{opacity: 1; }


}

@media screen and (max-width:480px) {


#main_gal .banner_container .slogan { margin-top: -70px;padding: 0 20px;  }
#main_gal .banner_container .slogan p.p1{ font-size: 12px; letter-spacing: 1px;}
#main_gal .banner_container .slogan p.p2{margin-top: 10px; font-size:25px; }
#main_gal .banner_container .slogan p.p3{ font-size: 13px; padding: 3px 5px 4px; }
}






.section{padding: 125px 0;}
#s1{padding-top: 130px}
#s1>div{color: #222; padding-left: 660px; min-height:450px;  padding-top: 30px; position: relative;}
#s1>div .p1{font-size: 14px; font-weight: 800; letter-spacing: 3px; color: #5a8ba2; opacity: 0.5;}
#s1>div .p2{font-size:40px; line-height: 48px;  margin: 20px 0 25px; word-break: keep-all;   font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-style: normal; letter-spacing: 0;}
#s1>div .p2 span{font-weight: 600; color: #1991ab;}
#s1>div .p3{font-size: 17px; line-height: 28px;  font-weight: 400; word-break: keep-all; color: #555;}
#s1>div a{letter-spacing:-1px; display: inline-block; padding:9px 40px; border:1px solid #999; margin-top: 50px; color:#222; font-weight: 500;  border-radius: 3px;}
#s1>div a:hover{background: #222; color: #fff; border:1px solid #222; }

.video_wrap{position: absolute; top:30px; left:0; background:url(/img/main/bg.png)no-repeat bottom right; padding: 0 40px 40px 0; overflow: hidden;}
.video_area{ overflow: hidden; width: 550px; position: relative;}
.video_area video{position: absolute; top:0; left:0; margin-top: -9.39%}

@media screen and (max-width:1100px) {
#s1>div{padding-left: 500px; min-height: 428px;  padding-top: 5px; background-size: 440px;}


.video_wrap{position: absolute; top:10px; left:0; background:url(/img/main/bg.png)no-repeat bottom right; padding: 0 30px 30px 0; overflow: hidden; background-size: 130px;}
.video_area{ overflow: hidden; width: 450px; position: relative;}
.video_area video{position: absolute; top:0; left:0; margin-top: -9.39%}
}

@media screen and (max-width:980px) {
.section{padding: 100px 0;}	
#s1>div .p2{font-size:28px; line-height: 35px;  margin: 15px 0 25px;}
#s1>div .p3{font-size: 15px; line-height: 25px;  }
	}

@media screen and (max-width:768px) {
.section{padding: 70px 0;}
#s1{padding-top: 40px; padding-bottom: 50px;}
#s1>div{background: none; padding-left: 0; padding-top: 0; min-height: auto;}	
#s1>div .p1{font-size: 12px; }
#s1>div .p2{font-size:26px; line-height: 34px;  margin: 10px 0 20px;}
#s1>div .p3{font-size: 14px; line-height: 21px; }
#s1>div a{margin-top: 30px;}

.video_wrap{position: relative; top:auto; left:auto; background:url(/img/main/bg.png)no-repeat bottom right; padding: 0 30px 30px 0; overflow: hidden; background-size: 130px; margin-bottom: 20px;}
.video_area{ overflow: hidden; width: 100%; position: relative;}
.video_area video{position: absolute; top:0; left:0; margin-top: -9.4%}
}

@media screen and (max-width:480px) {
.section{padding: 50px 0;}
#s1{ padding-bottom: 45px;}
#s1>div .p1{font-size: 10px; }
#s1>div .p2{font-size:22px; line-height: 28px;  margin: 3px 0 12px;}
#s1>div a{margin-top: 20px; padding:5px 30px; font-size: 13px;}


.video_wrap{position: relative; top:auto; left:auto; background:url(/img/main/bg.png)no-repeat bottom right; padding: 0 20px 20px 0; overflow: hidden; background-size: 130px; margin-bottom:15px;}
.video_area{ overflow: hidden; width: 100%; position: relative;}
.video_area video{position: absolute; top:0; left:0; margin-top: -9.4%}
}	


#s2{background:url(/img/main/s2_bg.jpg) no-repeat center center;background-size: cover; text-align: center; background-size: cover;}
.section .tit1{font-size: 16px; opacity: 0.44; color:#5a8ba2; font-weight: 600; word-break: keep-all; letter-spacing:7px}
.section .tit2{font-size: 48px;line-height: 46px; font-weight:700; color: #333; letter-spacing: 0; margin-top: 12px;   font-family: "M PLUS Rounded 1c", sans-serif;
 }


#s2 ul.b1{margin-top: 65px;display:flex;flex-wrap: wrap; justify-content: space-between;}
#s2 ul.b1 li{width: 31%; margin-bottom: 45px;  box-shadow: 6px 6px 9px 2px rgba(0, 0, 0, 0.08); border-radius: 20px; overflow: hidden;}
#s2 ul.b1 li a{display: inline-block; width: 100%; height: 100%; color: #222; padding:20px;  background: #fff; }
#s2 ul.b1 li a:hover{background:#0077f1; color: #fff;}
#s2 ul.b1 li a img{border-radius: 15px;}
#s2 ul.b1 li a .p1{font-size:21px; font-weight: 600;  padding-top: 13px; letter-spacing: -1px; }
@media screen and (max-width:1100px) {

}

@media screen and (max-width:980px) {
.section .tit1{font-size: 14px; letter-spacing:7px}
.section .tit2{font-size: 38px;line-height: 42px;margin-top: 7px;}

#s2 ul.b1{margin-top: 45px;}
#s2 ul.b1 li{width: 32%; margin-bottom: 40px;  }
#s2 ul.b1 li a{ padding:10px;  }
#s2 ul.b1 li a img{border-radius: 15px;}
#s2 ul.b1 li a .p1{font-size:18px; padding-top: 10px; }
}
@media screen and (max-width:530px) {
#s2 ul.b1{margin-top: 45px;}
#s2 ul.b1 li{width: 49%; margin-bottom:30px; }
#s2 ul.b1 li a{ padding:10px;   }
#s2 ul.b1 li a img{border-radius: 15px;}
#s2 ul.b1 li a .p1{font-size:16px; padding-top: 7px; }

}
@media screen and (max-width:480px) {
.section .tit1{font-size: 12px; letter-spacing:3px}
.section .tit2{font-size:28px;line-height: 34px;margin-top: 5px;}

#s2 ul.b1{margin-top: 28px;}
#s2 ul.b1 li{width: 100%; margin-bottom:20px; }
#s2 ul.b1 li a{ padding:7px;   }
#s2 ul.b1 li a .p1{font-size:16px; padding-top: 7px; }
}	




#s3{padding: 50px 0; word-break: keep-all;}
#s3 ul li{float: left; width: 25%; border-right: 1px dotted #e1e1e1;padding: 10px 20px 10px 40px; }
#s3 ul li.last{border-right: none;}
#s3 ul li a{ width: 100%; height: 100%; }
#s3 ul li a div{position: relative; padding-left: 57px;}
#s3 ul li a div img{position: absolute; left: 0; top:5px;}
#s3 ul li a div p{color: #333; font-weight: 600; font-size: 22px; letter-spacing: -1px; line-height: 1.1; margin-bottom: 5px;  font-family: "M PLUS Rounded 1c", sans-serif;
  }
#s3 ul li a div span{font-size: 13px; color: #777; display: inline-block;line-height: 1.3; text-indent: 2px; }
#s3 ul li a:hover div p{color: #0077f1}

@media screen and (max-width:980px) {
#s3 ul li{padding: 10px 20px 10px 20px; }

	}



@media screen and (max-width:768px) {
#s3{padding: 30px 0; word-break: keep-all;}	
#s3 ul li{float: left; width: 50%; border-right: 1px dotted #e1e1e1;padding: 20px 20px 20px 20px; }
#s3 ul li:nth-child(1), #s3 ul li:nth-child(2) {border-bottom: 1px dotted #e1e1e1;}
#s3 ul li:nth-child(2){border-right: none;}

	}



@media screen and (max-width:580px) {
#s3 ul li{padding: 15px 15px; }	
#s3 ul li a div{position: relative; padding-left: 45px;}
#s3 ul li a div img{position: absolute; left: 0; top:5px; width: 40px;}
#s3 ul li a div p{ font-size: 20px; letter-spacing: -1px;}
#s3 ul li a div span{font-size: 12px; color: #777; display: inline-block;line-height: 1.5;}

	}

@media screen and (max-width:500px) {
#s3{padding: 20px 0; word-break: keep-all;}		
#s3 ul li{padding: 20px 18px; width: 100%; }	
#s3 ul li:nth-child(3) {border-bottom: 1px dotted #e1e1e1;}
#s3 ul li a div{position: relative; padding-left: 42px;}
#s3 ul li a div img{position: absolute; left: 0; top:-7px; width: 35px;}
#s3 ul li a div p{ font-size: 15px; letter-spacing: -1px;}
#s3 ul li a div span{display: none;}

	}


#s4{padding: 195px 0; text-align: center; background:url(/img/main/s4_bg.jpg) no-repeat center center; background-attachment: fixed; color: #fff; }
#s4 .p1{font-size: 15px; letter-spacing: 5px; opacity: 0.7; margin-bottom: 10px;}
#s4 .p2{font-size: 40px;   font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal; letter-spacing: 0; }


@media screen and (max-width:980px) {
#s4{padding: 160px 0; text-align: center; background:url(/img/main/s4_bg.jpg) no-repeat center center; background-attachment: fixed; color: #fff; }
#s4 .p1{font-size: 13px; letter-spacing: 5px; opacity: 0.7; margin-bottom: 10px;}
#s4 .p2{font-size: 34px;}

	}



@media screen and (max-width:768px) {
#s4{padding: 110px 0; text-align: center; background:url(/img/main/s4_bg.jpg) no-repeat center center; background-attachment: scroll; color: #fff; background-size: cover; }
#s4 .p1{font-size: 12px; letter-spacing: 2px;  margin-bottom: 10px;}
#s4 .p2{font-size: 24px;}

	}



@media screen and (max-width:480px) {
#s4{padding: 50px 0;}
#s4 .p1{font-size: 11px; letter-spacing: 2px;  margin-bottom: 10px;}
#s4 .p2{font-size: 20px; line-height: 1.5;}

	}



#s5{display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center;}
#s5 .tt{width: 27%;background:#00b3da; color: #fff; text-align: right; padding: 29px 30px 0 0;}
#s5 .tt p{font-size: 11px; font-weight: 600; letter-spacing: 5px; opacity: 0.4; line-height: 1;}
#s5 .tt span{font-size: 20px; font-weight: 600; letter-spacing: 0.5px;  font-family: "M PLUS Rounded 1c", sans-serif;}
#s5 .bn{width: 73%; background: #fff; text-align: center; padding: 18px 15px 18px 17px}
#s5 .slick-slide a{text-align: center; display: inline-block;}

#s5 .slick-slide{display: flex; align-items: center; justify-content: center;}
@media screen and (max-width:1300px) {
.bn .slick-slide img { height:51px; /* 로고 높이만 통일 */}


 }
@media screen and (max-width:1200px) {
.bn .slick-slide img { height:48px; /* 로고 높이만 통일 */}


 }

@media screen and (max-width:768px) {
#s5 .tt{width:104px;padding: 16px 15px 0 ; height: 64px; display: none;}
#s5 .tt p{letter-spacing: 0; font-weight: 500; font-size: 10px;}
#s5 .tt span{font-size: 16px;}
#s5 .bn{width: 100%;  padding: 0px 12px 0px 15px; height: 64px;}
#s5 .bn img{height: 40px;}

@media screen and (max-width:480px) {
#s5 .tt{width:82px;padding: 15px 10px 0 ; height: 55px;}
#s5 .tt p{letter-spacing: 0; font-weight: 500; font-size: 10px;}
#s5 .tt span{font-size: 14px;}
#s5 .bn{width: 100%;  padding: 0px 12px 0px 10px; height: 55px;}
#s5 .bn img{height: 37px;}
	}