@charset "utf-8";
@import url(media_sub.css);

@media (max-width:1700px){
	
	/*** 공통 ***/
	.ct1{width:1500px;}
	.ct2,
	.wrap,
	.wrap2{width:1200px;}


	/*** main ***/

}

@media (max-width:1600px){
	
	/*** 공통 ***/
	.header .ct1,
	.footer .ct1{width:100%;padding:0 3%;box-sizing:border-box;}


	/*** header ***/
	.header{height:135px;}
	.hd_logo{width:11%}
	.hd_logo a,
	.darkmode .hd_logo > a{height: 135px;line-height: 135px;background-size:100%;}
	.gnb > li{padding: 50px 2% 20px;}
	.gnb > li > a {font-size: 19px;/* line-height: 135px; */}
	.hd_ico_area li a{height: 135px;}
	.btn_sitemap{line-height: 135px;}
	.sub_gnb{top: 80px;left: 10px;}
	.sub_gnb > li > a {font-size: 15px;}

	.main_wrap{padding-top: 135px;}
	.main_vs{height: 50vw;}

	/* .main_slogan */
	.main_slogan{width: 30vw;height: 19vw; margin-left: -15vw;margin-top: -9vw;padding: 2.5vw;}
	.main_slogan h2{font-size:4.3vw}
	.main_slogan p {font-size: 1.1vw;line-height: 1.6;}
	.btn_darkmode,
	.darkmode .btn_darkmode{width: 2.5vw;height: 2.5vw;background-size: 90%;;}

	.scroll:before{top: -9vw;height: 9vw}

	/* main contents */
	.mb_sec2_tit{width:380px;height:100px;font-size: 39px;line-height: 100px;}
	.mn_sec2_list li{padding-top:230px;}
	.mn_sec2_list li:nth-child(1),
	.mn_sec2_list li:nth-child(2),
	.mn_sec2_list li:nth-child(3),
	.darkmode .mn_sec2_list li:nth-child(1),
	.darkmode .mn_sec2_list li:nth-child(2),
	.darkmode .mn_sec2_list li:nth-child(3){background-size:200px;}
	.mn_sec2_list li span{font-size:18px;}
	.btn_move{width:240px;height: 65px;margin: 65px auto 0;font-size: 22px;line-height: 65px;}

	/* main section3 */
	.effect_wrap_in .mn_sec3_box{padding-top: 195px;}
	.effect_wrap_in .mn_sec3_box:nth-child(1):before,
	.effect_wrap_in .mn_sec3_box:nth-child(2):before,
	.effect_wrap_in .mn_sec3_box:nth-child(3):before,
	.effect_wrap_in .mn_sec3_box:nth-child(4):before{background-size: 85%;}
	.effect_wrap_in .mn_sec3_box h3{font-size: 25px;line-height: 1.4;}
	.effect_wrap_in .mn_sec3_box .box_info {margin-top: 16px;padding-top: 18px;}
	.effect_wrap_in .mn_sec3_box .box_info .box_tit {font-size: 20px;line-height: 1.6;}
	.effect_wrap_in .mn_sec3_box .box_info .box_txt {font-size: 15px;}
	.effect_wrap_in .mn_sec3_box .mn_sec_more{width: 140px;height: 45px;margin: 30px auto;line-height: 43px;font-size: 17px;}


	.main_sec4 {font-size: 13px;}

}


@media (max-width:1400px){

	/*** 공통 ***/
/* 	.ct1{width:1500px;} */
	.ct2,
	.wrap,
	.wrap2{width:1100px;}

	/*header*/
	.gnb{width: 69%;margin-left: 1.5%;}
	.gnb > li > a {font-size: 18px;}

	
	/* .main_slogan */
	.main_slogan{width: 30vw;height: 20vw; margin-top: -10vw;;}
	.main_slogan h2 {font-size: 4.8vw;line-height: 1.2;}
	.main_slogan p {font-size: 1.3vw;word-break:keep-all}
	.btn_darkmode,
	.darkmode .btn_darkmode{width: 2.5vw;height: 2.5vw;background-size: 90%;;}
	.scroll:before{top: -15vw;height: 15vw}

	
	.main_sec4 {font-size: 12px;}
}

@media (max-width:1200px){

	/*** 공통 ***/
	.ct1{width:1500px;}
	.ct2,
	.wrap,
	.wrap2{width:100%;padding:0 5%;box-sizing:border-box;}


	/*header*/
	.gnb {width: 68%;}
	.gnb > li {padding: 50px 1.5% 20px;}
		.gnb > li > a {font-size: 17px;}
	.hd_ico_area li:nth-child(1) {margin-right: 20px;}
	.hd_ico_area li:nth-child(1) a{background-size: 10px;}
	.hd_ico_area li:nth-child(2) a{background-size: 18px;}
	.btn_sitemap{margin-left: 23px;}
	.btn_sitemap img{width:20px;}
	.sub_gnb > li > a {font-size: 13px;}

	/* main contents */
	.mb_sec2_tit{width:320px;height:85px;font-size: 36px;line-height: 85px;}
	.mn_sec2_list li{padding-top:200px;}
	.mn_sec2_list li:nth-child(1),
	.mn_sec2_list li:nth-child(2),
	.mn_sec2_list li:nth-child(3),
	.darkmode .mn_sec2_list li:nth-child(1),
	.darkmode .mn_sec2_list li:nth-child(2),
	.darkmode .mn_sec2_list li:nth-child(3){background-size:165px;}
	.mn_sec2_list li span{font-size:17px;}
	.btn_move{width:240px;height: 65px;margin: 65px auto 0;font-size: 22px;line-height: 65px;}

	
	/* main section3 */
	.effect_wrap_in{height:685px;}
	.effect_wrap_in .mn_sec3_box{padding-top: 160px;}
	.effect_wrap_in .mn_sec3_box:before{top:15px;}
	.effect_wrap_in .mn_sec3_box:nth-child(1):before,
	.effect_wrap_in .mn_sec3_box:nth-child(2):before,
	.effect_wrap_in .mn_sec3_box:nth-child(3):before,
	.effect_wrap_in .mn_sec3_box:nth-child(4):before{background-size: 70%;}
	
	.effect_wrap_in .mn_sec3_box:nth-child(1),
	.effect_wrap_in .mn_sec3_box:nth-child(2),
	.effect_wrap_in .mn_sec3_box:nth-child(3),
	.effect_wrap_in .mn_sec3_box:nth-child(4){background-size:100% 220px;}
	.effect_wrap_in .mn_sec3_box h3{font-size: 19px;line-height: 1.4;}
	.effect_wrap_in .mn_sec3_box .box_info {margin-top: 16px;padding-top: 18px;}
	.effect_wrap_in .mn_sec3_box .box_info .box_tit {font-size: 16px;line-height: 1.6;}
	.effect_wrap_in .mn_sec3_box .box_info .box_txt {font-size: 14px;}
	.effect_wrap_in .mn_sec3_box .mn_sec_more{width: 120px;height: 40px;margin: 30px auto;line-height: 38px;font-size: 16px;}



	.main_sec4 {font-size: 11px;}
	
}

@media (max-width:1024px){
	
	/* header */
	.header{display: none!important;}
	.m_header{display: block!important;}

	.m_header{position: relative;display:block;}
	.m_header_box{position:fixed;top:0;left:0;width:100%;height:80px;background: #fff;border-bottom: 1px solid #ededed;z-index: 99;}
	.m_logo{z-index: 97;height: 80px;padding-left: 3vw;}
	.m_logo a{width:150px; height: 80px;}
	.m_logo a {height: 80px;display: block; ;width: 105px;font-size:0; background: url(../../images/layout/hd_logo.png) no-repeat left center; -webkit-background-size: 100%; background-size: 100%;  }
	.gnb_btn {position: absolute; top: 0px;  right: 0px;width: 80px;height: 80px;box-sizing:border-box;z-index:999;background:#008e6f;cursor: pointer;display:table;}
	.gnb_btn_inner{display:table-cell;vertical-align:middle;width:100%;height:100%;}
	.gnb_btn_inner>div {position: relative; width: 45%;margin:0 auto; height: 2px;  margin-bottom: 6px;  border-radius: 2px;  background-color: #fff; -webkit-transition: all .3s ease;-moz-transition: all .3s ease; -o-transition: all .3s ease;transition: all .3s ease;}
	.gnb_btn_inner>div:last-child{margin-bottom:0;}
	.gnb_btn_line1.gnb_on { -webkit-transform: rotate3d(0,0,1,45deg);  -moz-transform: rotate3d(0,0,1,45deg);  -o-transform: rotate3d(0,0,1,45deg);  transform: rotate3d(0,0,1,45deg);top: 8px;}
	.gnb_btn_line2.gnb_on { opacity: 0;}
	.gnb_btn_line3.gnb_on {  -webkit-transform: rotate3d(0,0,1,-45deg); -moz-transform: rotate3d(0,0,1,-45deg);  -o-transform: rotate3d(0,0,1,-45deg); transform: rotate3d(0,0,1,-45deg);top: -8px;}



	.m_nav_wrap{position: fixed;top:80px;right:-65%;width:65%;max-width:400px;height: calc(100% - 80px );background: #fff;z-index:99;/*transition:all 0.5s;*/overflow-y: scroll;}

	.m_hd_ico_area{padding: 15px!important;border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;}
	.m_hd_ico_area li{float: left;width:50%;text-align: center;}
	.m_hd_ico_area li:nth-child(1){border-right: 1px solid #ddd;box-sizing: border-box;}
	.m_hd_ico_area li a{height: 30px;font-size:13px;color:#4a5755;text-indent: -99999px;}
	.m_hd_ico_area li:nth-child(1) a{background: url(../../images/layout/hd_ico1.png) no-repeat center;}
	.m_hd_ico_area li:nth-child(2) a{background: url(../../images/layout/hd_ico2.png) no-repeat center;}


	.m_gnb{width:100%;height:auto;margin-top:10px}
	.m_gnb>li{width: 90%; border-bottom: 1px solid #e1e5ec; margin: 0 auto;}
	.m_gnb>li .m_g_dep1, .m_gnb>li .m_g_dep11{position: relative;display: block;width: 100%; padding: 0 5%;font-size: 13px;color: #404040; line-height: 45px; box-sizing: border-box;cursor:pointer;background: url(../images/layout/m_gnb_list_bg.png) no-repeat 90% 50%;}
	.m_gnb>li .m_g_dep1.on{ color: #303030; font-weight: 500;background: #f3f3f3  url(../images/layout/m_gnb_list_bg_on.png) no-repeat 90% 50%;}
	.m_gnb>li>a{font-size: 14px;color: #333; line-height: 50px; box-sizing: border-box;}
	.m_gnb>li>ul>li>a{/*position:relative;*/font-size:13px;line-height:37px;color: #999;}
	.m_gnb>li>ul{padding:0 5%;}
	.m_footer .ft_right ul li{margin-right:10px;font-size: 12px;cursor:pointer;}
	.m_footer .ft_right ul li.btn_privacy {color: #f18d00;}


	.m_bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9}
	.w_wrap{margin-top:-10px;}	



	/* main contents */
	.main_wrap {padding-top: 80px;}

	/* main slogan */
	.main_slogan {width: 40vw;height: 26vw;margin-top: -17vw;margin-left: -20vw;}
	.main_slogan h2 {font-size: 50px}
	.main_slogan p {font-size: 15px;}
	.scroll{width: 24px;height: 39px;margin-left: -12px;}
	.scroll img{width:100%;}
/* 	.scroll:after{}
	.main_sec2:before{display: none;} */


	/* main contents */
	.mb_sec2_tit{width: 280px;height: 75px;font-size: 33px;line-height: 75px;;}
	.mn_sec2_list li{padding-top:180px;}
	.mn_sec2_list li:nth-child(1),
	.mn_sec2_list li:nth-child(2),
	.mn_sec2_list li:nth-child(3),
	.darkmode .mn_sec2_list li:nth-child(1),
	.darkmode .mn_sec2_list li:nth-child(2),
	.darkmode .mn_sec2_list li:nth-child(3){background-size:145px;}
	.mn_sec2_list li span{font-size:15px;}
	.btn_move{width: 200px;height: 60px;margin: 55px auto 0;font-size: 20px;line-height: 58px;}

	/* main section3 */
	.effect_wrap_in .mn_sec3_box .box_info .box_txt{width:100%;height: 70px;padding:0 5%;box-sizing:border-box;word-break:keep-all;}
	.effect_wrap_in .mn_sec3_box .box_info .box_txt br{display: none;}

	/* footer */
	.footer{height:auto;padding: 5%;}
	.footer .ct1{padding:0}
	.ft_logo,
	.darkmode .ft_logo{float: none;width: 125px;background-size: 100%;}
	.ft_info_wrap {float: none;margin-left: 0;margin-top: 10px;}
	.ft_info_wrap .ft_info li{margin-right: 15px;font-size:14px}
	.ft_info_wrap .copy {margin-top: 0;font-size: 14px;line-height: 1.7;}
	.btn_top{bottom:50%;margin-bottom:-27.5px;right:0;width: 55px;height: 55px;font-size: 13px;line-height: 55px;}

	
	.main_sec4 {font-size: 10px;padding: 100px 0 150px;}
	.main_sec4 h3 {margin-bottom: 70px;}
	
}

@media (max-width:800px){

	/* main slogan */
	.main_slogan {width: 50%;height: 57%;margin-top: -20%;margin-left: -25%;}
	.main_slogan h2 {font-size: 40px;}
	.main_slogan p {font-size: 15px;}
	.m_hd_ico_area{}

	/* main contents */
	.mb_sec2_tit{width: 240px;height: 65px;font-size: 29px;line-height: 65px;}
	.mn_sec2_list li{padding-top:140px;}
	.mn_sec2_list li:nth-child(1),
	.mn_sec2_list li:nth-child(2),
	.mn_sec2_list li:nth-child(3),
	.darkmode .mn_sec2_list li:nth-child(1),
	.darkmode .mn_sec2_list li:nth-child(2),
	.darkmode .mn_sec2_list li:nth-child(3){background-size:110px;}
	.mn_sec2_list li span{font-size:13px;line-height: 1.6;}
	.btn_move{width: 170px;height: 55px;margin: 45px auto 0;font-size: 17px;line-height: 53px;}

	.main_sec2,
	.main_sec3.effect_wrap {padding-top: 65px;padding-bottom: 65px;}

		/* main section3 */
	.effect_wrap_in {height: auto;}
	.effect_wrap_in .mn_sec3_box{width:50%;height:660px;padding-top: 130px;}
	.effect_wrap_in .mn_sec3_box:before {top: 20px;height: 100px;}

	/* footer */
	.ft_logo,
	.darkmode .ft_logo{width: 110px;height: 40px;}
	.ft_info_wrap .ft_info li{width:50%;margin-right: 0;font-size: 13px;line-height: 1.7;}
	.ft_info_wrap .copy{font-size:13px}


	/* 갤러리팝업 */
	.hd_pops_footer {position: absolute;width: 100%;bottom: 0;}
}

@media (max-width:640px){

/* 팝업 */
.hd_pops {position:fixed;/* top:15%!important;left:50%!important; */width: 80%;max-width:500px;/* margin-left: -40%;; */background:#fff;border:1px solid #e9e9e9;border-top: 10px solid #000;}
.hd_pops_con {width: 100%!important;height: auto!important;}
.hd_pops_con img{width:100%;height: auto;;}
.hd_pops_con {/* width: 300px!important; height: 400px!important; */}
.hd_pops_footer button{font-size: 12px;}


	/* header */
	.m_header_box,
	.m_logo,
	.m_logo a{height:59px;} 
	.gnb_btn{width:60px;height:60px;}
	.m_nav_wrap{top: 60px;height: calc(100% - 60px );}


	
	.main_wrap {padding-top: 60px;}

	
	/* main visual */
	.main_vs {height: 70vw;}

	/* main slogan */
	.main_slogan {width: 60%; height: 220px;margin-top: -30%;margin-left: -30%; padding: 5% 1%;}
	.btn_darkmode,
	.darkmode .btn_darkmode{width: 30px;height: 30px;}


	/* main scroll */
	.scroll {bottom: 30px;width: 26px;height: 43px;margin-left: -13px;}



	/* main contents */
	.mb_sec2_tit{width: 200px;height: 60px;font-size: 26px;line-height: 60px;}
	.mn_sec2_list li{padding-top:100px;}
	.mn_sec2_list li:nth-child(1),
	.mn_sec2_list li:nth-child(2),
	.mn_sec2_list li:nth-child(3),
	.darkmode .mn_sec2_list li:nth-child(1),
	.darkmode .mn_sec2_list li:nth-child(2),
	.darkmode .mn_sec2_list li:nth-child(3){background-size:75px;}
	.mn_sec2_list li span{padding:0 5%;font-size:12px;line-height: 1.6;box-sizing: border-box;word-break:keep-all}
	.mn_sec2_list li span br{display: none;}
	.btn_move{width: 140px;height: 45px;margin: 35px auto 0;font-size: 15px;line-height: 43px;}


	
	
	.effect_wrap_in .mn_sec3_box{height:570px;}
	.effect_wrap_in .mn_sec3_box:nth-child(1):before, 
	.effect_wrap_in .mn_sec3_box:nth-child(2):before, 
	.effect_wrap_in .mn_sec3_box:nth-child(3):before, 
	.effect_wrap_in .mn_sec3_box:nth-child(4):before {background-size: 50%;}

	.effect_wrap_in .mn_sec3_box:nth-child(1),
	.effect_wrap_in .mn_sec3_box:nth-child(2), 
	.effect_wrap_in .mn_sec3_box:nth-child(3),
	.effect_wrap_in .mn_sec3_box:nth-child(4) {background-size: 100%;}

	.effect_wrap_in .mn_sec3_box .box_info {margin-top: 0;padding-top: 22px;}
	.effect_wrap_in .mn_sec3_box .box_info .box_tit:before{top: -10px;margin-left: -10px;width: 20px;height: 2px;}	
	.effect_wrap_in .mn_sec3_box .box_info .box_txt{height:60px;font-size:13px;}
	.effect_wrap_in .mn_sec3_box .mn_sec_more{width: 110px;height: 38px;margin: 10px auto 0;line-height: 36px;font-size: 14px;}


	/* footer */
	.ft_info_wrap .ft_info li{width:100%;}
	.btn_top{bottom:auto;margin-bottom:0;top:0;}
	


	.main_sec4 {font-size: 3.3vw;padding: 15vw 0 20vw;}
	.main_sec4 h3 {font-size: 2em;margin-bottom: 10vw;}
	.main_sec4 dl dt {width: 40%;margin-bottom: 5vw;}
	.main_sec4 dl dd ul li {margin-left: 1vw;width: calc(33.33% - 1vw);}

}

@media (max-width:460px){



	/* main slogan */
	.main_slogan {width: 80%;height: 65%;margin-top: -27%;margin-left: -40%;padding: 3% 5%;min-width: 260px;min-height: 150px;}
	.main_slogan h2 {font-size: 40px;}
	.main_slogan p {margin: 4px 0 8px;font-size:3.3vw;}
	.btn_darkmode,
	.darkmode .btn_darkmode{width: 20px;height: 20px;}

	/* main scroll */
	.scroll {bottom: 10px;width: 16px;height: 26px;margin-left: -8px;}



	.main_sec2{padding-top: 40px;padding-bottom: 40px;}
	.mn_sec2_list{margin-top:55px;}
	.main_sec2:before{height: 190px;}
	.mn_sec2_list li:before{height:24px;}
	
	.mb_sec2_tit {width: 170px;height: 50px;font-size: 24px;line-height: 50px;}
	.mn_sec2_list li { padding-top: 80px;}
	.mn_sec2_list li:nth-child(1),
	.mn_sec2_list li:nth-child(2), 
	.mn_sec2_list li:nth-child(3),
	.darkmode .mn_sec2_list li:nth-child(1),
	.darkmode .mn_sec2_list li:nth-child(2),
	.darkmode .mn_sec2_list li:nth-child(3){background-size: 65px;}
	.mn_sec2_list li span{font-size:12px}
	.btn_move {width: 140px;height: 40px;margin: 35px auto 0;font-size: 16px;line-height: 38px;}

	/* main section3 */	
	.main_sec3.effect_wrap {padding-top: 40px;padding-bottom: 40px;}
	.effect_wrap_in {height: auto;background-color: rgba(255,255,255,0);box-shadow: none;}

	.effect_wrap_in .mn_sec3_box{width:100%;height:620px;padding-top: 115px;margin-bottom:10px}
	.effect_wrap_in .mn_sec3_box .mn_sec_more{margin:290px auto 0}
	.effect_wrap_in .mn_sec3_box:last-child{margin-bottom:0px}
	.effect_wrap_in .mn_sec3_box:nth-child(1), 
	.effect_wrap_in .mn_sec3_box:nth-child(2),
	.effect_wrap_in .mn_sec3_box:nth-child(3),
	.effect_wrap_in .mn_sec3_box:nth-child(4){/* background: none; */     background-size: 100% 260px;   background-position: 50% 72%;background-color: #fff;box-shadow: 0 0 7px rgba(0,0,0,0.15);}

	.darkmode .effect_wrap_in .mn_sec3_box:nth-child(1), 
	.darkmode .effect_wrap_in .mn_sec3_box:nth-child(2),
	.darkmode .effect_wrap_in .mn_sec3_box:nth-child(3),
	.darkmode .effect_wrap_in .mn_sec3_box:nth-child(4){background-color:  rgba(0,0,0,0);;}

	.darkmode .mn_sec3_box{border: 1px solid rgba(255,255,255,0.25)}


	.effect_wrap_in .mn_sec3_box h3 {font-size: 20px;}
	.effect_wrap_in .mn_sec3_box .box_info .box_tit {font-size: 16px;}
	.effect_wrap_in .mn_sec3_box .mn_sec_more{font-size:14px;width: 100px;height: 36px;line-height: 34px;}

	/* footer */
	.ft_logo,
	.darkmode .ft_logo{width: 80px;height: 30px;background-size: 100%;}
	.ft_info_wrap .ft_info li{font-size: 13px}
	.ft_info_wrap .copy{font-size:12px;line-height: 1.7;}
	.btn_top{width: 50px;height: 50px;font-size: 13px;line-height: 50px;}
}