@charset "utf-8";
body, html { height:100%; }
.notoF { font-family:'Noto Sans KR',sans-serif; }

/* 기본프레임 */
#wrap { height:100%;background-color:#ECECEC;transition:0.8s; -webkit-transition: 0.8s; -moz-transition: 0.8s; }
#visual, #sector1, #sector2, #sector3, #sector4, #footer { position:relative; }
#visual, #sector1, #sector2, #sector3, #sector4 { min-height:100%; }
#visual { overflow:hidden;z-index:0; }
#sector1 { background-color:#2196f3;z-index:99; }
#sector2 { background:url(../images/visual_none_media2.jpg) 50% 50% no-repeat;background-size:cover;z-index:0;background-color:#ECECEC;overflow:hidden; }
#sector3 { background-color:#e3b230;z-index:99}
#sector4 { background-color:#5e6063;z-index:0;padding-bottom:90px;padding-top:90px; }
#footer { min-height:250px;background-color:#393b3f;z-index:99; }

/* 영역구분 */
.guide { position:absolute;display:block;left:0;width:100%;z-index:99; }
#sector1 .bg1 { background:url(../images/sector1_top.png) 50% 0 no-repeat;background-size:100% 200px;height:200px;top:-200px; }
#sector1 .bg2 { background:url(../images/sector1_bottom.png) 50% 0 no-repeat;background-size:100% 82px;height:82px;bottom:-82px; }
#sector3 .bg1 { background:url(../images/sector2_top.png) 50% 0 no-repeat;background-size:100% 143px;height:143px;top:-143px; }
#sector3 .bg2 { background:url(../images/sector2_bottom.png) 50% 0 no-repeat;background-size:100% 157px;height:157px;bottom:-157px; }
#footer .bg2 { background:url(../images/tail_top.png) 50% 0 no-repeat;background-size:100% 90px;height:90px;top:-90px; }

#visual h1{width:70px;top:30px; left:50%; margin-left:-35px}
#visual h1 img, .nav img, #visual .scroll img{width:100%}
.nav{width:60px; display:block; top:100px; left:50%; margin-left:-30px}
#visual h1, .nav, #visual .typo, #visual .scroll{position:absolute; z-index:9}
#visual .typo{top:50%; left:0; margin-top:-5%; width:100%; background:url(../images/bg_typo.png) 50% 108px no-repeat}
#visual .typo h2, #visual .typo p{color:#FFFFFF;font-family: 'Exo 2', sans-serif; text-align:center}
#visual .typo h2{font-size:85px; height:95px}
#visual .typo p{font-size:25px; height:35px}
#visual .typo p:last-child{font-size:30px}
#visual .scroll{width:100px; bottom:100px; left:50%; margin-left:-50px}

#videobcg{position:fixed; top:0; left:0; min-width:100%; min-height:100%; width:auto; height:auto; z-index:-1000; overflow:hidden; background-color:#121212}
#videobcg2{position:absolute; top:-8%; left:0; min-width:110%; min-height:110%; z-index:-1000; overflow:hidden; background-color:#ececec}

.fw_b{font-weight:900}
.fw_m{font-weight:400}
.fw_t{font-weight:200}

.nav1, .nav2, .nav3{width:100%}
.nav1,.nav2, .nav3{width:60px; display:block; top:0; left:50%; margin-left:-30px}
.nav1, .nav2, .nav3{position:absolute; z-index:999}
.nav1 img, .nav2 img, .nav3 img{width:100%}

.sector_title{text-align:center; font-family: 'Exo 2', sans-serif; font-weight:500; font-size:20px; padding-bottom:15px;}
#sector1 h1{padding-top:80px; color:#FFFFFF; margin-bottom:50px; background:url(../images/title_guide1.gif) 50% 100% no-repeat}
#int_sector1, #int_sector2{padding:0 20% 0 20%;}
#int_sector1 h2{text-align:center; color:#FFFFFF; font-size:37px; font-family: 'Exo 2', sans-serif; font-weight:300; margin-bottom:80px; line-height:38px}
#int_sector1 h2 strong{font-weight:600;}

#int_sector1 span{display:block; width:100%; margin-bottom:70px; text-align:center}
#int_sector1 span img{width:100%}
#int_sector1 span .mobile{display:none}
#int_sector1 p{color:#FFFFFF; font-size:17px; line-height:25px; text-align:center; padding-bottom:70px; font-weight:200}

.int_tb_wrap{width:45%; margin:0 2.2% 0 2.2%; clear:both}
.tbl_overview{clear:both; width:100%; border-collapse:collapse; font-size:15px}
.tbl_overview tr th{color:#ffca3f; font-weight:600; border-bottom:1px solid #ffdf2d}
.tbl_overview tr td{color:#FFFFFF; font-weight:200; border-bottom:1px solid #64b6f7}
.tbl_overview tr th, .tbl_overview tr td{padding:15px;font-family:'Noto Sans KR',sans-serif; letter-spacing:0}

.int_contr{width:100%; height:0px; position:absolute; top:320px; left:0; z-index:99}
.int_contr span{display:block; overflow:hidden; border:1px solid #64b6f7; border-radius:5px; position:absolute; top:0;}
.int_contr span img{width:100%; padding-bottom:60px;}
.int_contr span:first-child{left:0; background:url(../images/intro_btn_arr_l.gif) 0 100% no-repeat}
.int_contr span:last-child{right:0; background:url(../images/intro_btn_arr_r.gif) 0 100% no-repeat}
br.mb{display:none}
.nav2{top:120px; z-index:99;}
.nav3{top:150px; z-index:99;}
#sector2 h1{padding-top:200px; color:#121212; margin-bottom:80px; background:url(../images/title_guide1.gif) 50% 100% no-repeat; z-index:99; position:relative}
#people{padding:0 10% 0 10%; margin-bottom:170px;}
#people ul{text-align:center}
#people ul li{display:inline-block; padding:0 10px 60px 10px}
#people ul li img{width:100%}

#sector3{min-height:890px;}
#sector3 h1{padding-top:80px; color:#121212; margin-bottom:50px; background:url(../images/title_guide2.gif) 50% 100% no-repeat; z-index:99; position:relative}

#service{width:680px; margin:0 auto; position:relative}
#service ul{position:absolute; width:100%;}
#service ul li{position:absolute; z-index:9; display:block; height:25px; line-height:25px; background:url(../images/icon_find.gif) no-repeat;}
#service ul li a{color:#503a00; font-size:25px; font-weight:600; font-family: 'Exo 2', sans-serif;}
.sevr1, .sevr2, .sevr3{background-position:100% 50% !important}
.sevr4, .sevr5, .sevr6{background-position:0 50% !important}
.sevr1{top:65px; left:520px; padding-right:40px;}
.sevr2{top:330px; left:670px; padding-right:40px;}
.sevr3{top:593px; left:520px; padding-right:40px;}
.sevr4{top:593px; left:10px; padding-left:40px;}
.sevr5{top:330px; left:-150px; padding-left:40px;}
.sevr6{top:65px; left:25px; padding-left:40px;}

.dia{margin:0 auto; text-align:center; width:100%; display:block;}
.dia img{width:100%}

#sector4 h1{padding-top:140px; color:#FFFFFF; margin-bottom:80px; background:url(../images/title_guide3.gif) 50% 100% no-repeat; z-index:99; position:relative}
#contact{width:65%; margin:0 auto}
#contact .map{display:inline-block; width:60%;}
#contact .map img{width:90%}
#contact div{width:37%;display:inline-block; vertical-align:top; color:#FFFFFF;font-family: 'Exo 2', sans-serif; font-weight:200; clear:both}
#contact div span.btn{display:block; margin-top:200px}
#contact div p{margin-top:40px}
#contact div p span{display:inline-block; letter-spacing:0; font-size:14px;}

#footer address { padding:50px 20% 50px 20%;display:block; }
#footer address span { font-size:15px;display:inline-block;font-weight:200;font-family:'Noto Sans KR',sans-serif;letter-spacing:0;color:#95989d;padding-right:20px;background:url(../images/footer_guide.gif) 98% 50% no-repeat; }
#footer address .companyName { color:#FFFFFF;font-weight:600; }
#footer address .work2, #footer address .fax { background:none; }
#footer address .copyright { display:block;padding-top:15px;font-size:12px;background:none; }
#footer p { width:200px;position:absolute;top:90px;left:50%;margin-left:300px;clear:both; }
#footer p img { width:100%; }

.overview_list{padding:60px 0 40px 0}
.overview_list h3{text-align:center; font-family: 'Exo 2', sans-serif; font-weight:500; font-size:20px; padding-bottom:15px; color:#FFFFFF; padding:70px 0 40px 0; background:url(../images/icon_solution.gif) 50% 0 no-repeat}
.overview_list ul{text-align:center}
.overview_list ul li{margin:0.5%; width:23%; display:inline-block;}
.overview_list ul li img{width:100%}

#int_sector3{padding:0 20% 0 20%; text-align:center}
#int_sector3 img{width:730px}
#int_sector3 .img_m{display:none}
#int_sector3 .img_m img{width:100%}

.service_pop_wrap{width:100%; height:100%; position:fixed; top:0; left:0; background:url(../images/pop_bg.png); z-index:999999}

.service_pop{width:900px; height:440px; position:absolute; top:50%; left:50%; margin-left:-450px; margin-top:-220px; background-color:#FFFFFF; border-radius:20px; overflow:hidden}
.service_pop div{padding:30px 60px 30px 60px; height:380px}
.service_pop div h2, .service_pop div p, .service_pop div a{font-family:'Noto Sans KR',sans-serif; padding-bottom:30px}
.service_pop div h2{font-size:30px; font-weight:700; color:#121212}
.service_pop div h2 strong{font-size:50px}
.service_pop div p{width:55%; font-size:15px; font-weight:200; color:#444444}
.service_pop div a{display:inline-block; padding:20px; background:url(../images/icon_service_btn.png) 90% 50% no-repeat; width:45%; border:3px solid #fac50d; border-radius:10px; color:#3e3000}
.service1{background:url(../images/service_bg1.gif) 100% 50% no-repeat}
.service2{background:url(../images/service_bg2.gif) 100% 50% no-repeat}
.service3{background:url(../images/service_bg3.gif) 100% 50% no-repeat}
.service4{background:url(../images/service_bg4.gif) 100% 50% no-repeat}
.service5{background:url(../images/service_bg5.gif) 100% 50% no-repeat}
.service6{background:url(../images/service_bg6.gif) 100% 50% no-repeat}

.service1 h2{padding-top:60px}
.service2 h2{padding-top:90px}
.service3 h2{padding-top:20px}
.service4 h2{padding-top:60px}
.service5 h2{padding-top:90px}
.service6 h2{padding-top:90px}

.service_ctl{width:900px; height:0px; position:absolute; top:50%; left:50%; margin-left:-450px; margin-top:-80px; z-index:99999999}
.service_ctl span{display:block; width:63px; position:absolute;  top:0;}
.service_ctl span img{width:100%}
.service_ctl .left{left:-33px;}
.service_ctl .right{right:-33px;}

.nav_wrap{width:100%; height:100%; position:fixed; background:url(../images/menu_bg.png); z-index:9999999999999999}
.nav_wrap div{width:200px; height:100%; position:relative; margin:0 auto}
.nav_wrap div h1{padding-top:30px; text-align:center;}
.nav_wrap div ul{width:100%; height:400px; position:absolute; top:50%; left:0; margin-top:-200px;}
.nav_wrap div ul li{display:inline-block; width:100%; height:79px; border-bottom:1px solid #363636; text-align:center; line-height:79px}
.nav_wrap div ul li a{color:#afafaf; font-family: 'Exo 2', sans-serif; font-weight:500; font-size:20px}
.nav_wrap div ul li a:hover{color:#FFFFFF;}
.nav_wrap div span{display:block; position:absolute; bottom:30px; left:0; width:100%; text-align:center}

@media (max-width:1280px){
	.int_tb_wrap{width:100%; margin:0; clear:both}
	.int_sector3 img{width:100%}
}

@media (max-width:1023px){
	#videobcg, #videobcg2{display:none}
	#visual{background:url(../images/visual_none_media.jpg) 50% 50% fixed; background-size:cover;}
	#int_sector1{padding:0 15% 0 15%;}

	#footer address{padding:90px 10% 20px 10%; text-align:center}
	#footer address span{font-size:13px;}
	#footer address .addr{padding:0; background:none}
	#footer address .companyName{color:#FFFFFF; display:block; font-weight:600; background:none; padding-bottom:20px}
	#footer address .work1{padding-top:10px}
	#footer address .work1, #footer address .work2, #footer address .fax{background:none; padding-right:0}
	#footer address .copyright{display:block; padding-top:15px; font-size:12px; background:none}
	#footer p{top:20px; margin-left:-100px;}
	#footer p img{width:100%}
	#int_sector3 .img_w img{width:100%}
}

@media (max-width:720px){
	#visual, #sector1, #sector2, #sector3, #sector4{min-height:640px}
	#visual .typo{margin-top:-15%; background:url(../images/bg_typo.png) 50% 50px no-repeat}
	#visual .typo h2{font-size:40px; height:40px}
	#visual .typo p{font-size:20px; height:25px}
	#visual .typo p:last-child{font-size:25px}
	#visual .scroll{bottom:70px;}
	/* 영역구분 */
	#sector1 .bg1{background-size:100% 80px; height:80px; top:-80px;}
	#sector1 .bg2{background-size:100% 40px; height:40px; bottom:-40px;}
	#sector3 .bg1{background-size:100% 70px; height:70px; top:-70px;}
	#sector3 .bg2{background-size:100% 80px; height:80px; bottom:-80px;}
	#footer .bg2{background-size:100% 45px; height:45px; top:-45px;}

	#int_sector1 span .web{display:none}
	#int_sector1 span .mobile{display:block}
	#int_sector1 h2{margin-bottom:40px; font-size:22px;line-height:25px}
	#int_sector1 p{font-size:15px; line-height:20px;}

	.int_contr{top:340px;}
	.int_contr span{width:70px}
	.int_contr span img{padding-bottom:35px}
	.int_contr span:first-child{background-size:70px 35px;}
	.int_contr span:last-child{background-size:70px 35px;}

	br.mb{display:block}
	br.web{display:none}
	#people{margin-bottom:100px;}

	#sector4 h1{margin-bottom:40px;}

	#contact{width:95%; margin:0 auto}
	#contact .map{width:100%;}
	#contact .map img{width:100%}
	#contact div{width:80%; padding-left:10%; padding-bottom:20px}
	#contact div span.btn{margin-top:30px; text-align:center}
	#contact div p{margin-top:20px}
	#contact div p span{display:inline-block; letter-spacing:0; font-size:14px;}

	#sector3{min-height:500px}
	#service{width:340px; padding-top:30px}
	#service ul li a{font-size:17px; font-weight:400}
	.sevr1, .sevr2, .sevr3, .sevr4, .sevr5, .sevr6{background-position:50% 100% !important}
	.sevr1{top:-20px; left:230px;}
	.sevr2{top:87px; left:270px;}
	.sevr3{top:190px; left:220px;}
	.sevr4{top:190px; left:40px;}
	.sevr5{top:87px; left:-20px;}
	.sevr6{top:-20px; left:40px;}

	.sevr1, .sevr2, .sevr3, .sevr4, .sevr5, .sevr6{padding-bottom:30px; padding-left:0; padding-right:0}

	.dia img{width:60%}

	.int_tb_wrap{width:100%; margin:0; clear:both}
	.tbl_overview{font-size:12px}
	.tbl_overview tr th, .tbl_overview tr td{padding:5px}
	.tbl_overview tr th{width:60px}

	#int_sector3 .img_w{display:none}
	#int_sector3 .img_m{display:block}

	.service_pop{width:320px; height:320px; margin-left:-160px; margin-top:-160px;}
	.service_pop div{padding:10px 30px 10px 30px; height:auto; background:none}
	.service_pop div h2, .service_pop div p, .service_pop div a{font-family:'Noto Sans KR',sans-serif; padding-bottom:20px}
	.service_pop div h2{font-size:15px; font-weight:700; color:#121212}
	.service_pop div h2 strong{font-size:30px}
	.service_pop div p{width:100%; font-size:13px;}
	.service_pop div a{display:none}

	.service1 h2{padding-top:70px}
	.service2 h2{padding-top:60px;}
	.service3 h2{padding-top:20px}
	.service4 h2{padding-top:50px}
	.service5 h2{padding-top:100px}
	.service6 h2{padding-top:90px}

	.service_ctl{width:320px; height:0px; position:absolute; top:50%; left:50%; margin-left:-160px; margin-top:-50px; z-index:99999999}
	.service_ctl span{display:block; width:30px; position:absolute;  top:0;}
	.service_ctl span img{width:100%}
	.service_ctl .left{left:-16px;}
	.service_ctl .right{right:-16px;}

	.nav_wrap div h1{padding-top:15px; width:80px; margin:0 auto}
	.nav_wrap div h1 img{width:100%}
	.nav_wrap div ul{height:250px;margin-top:-125px;}
	.nav_wrap div ul li{height:49px;line-height:49px}
	.nav_wrap div ul li a{font-size:15px}
	.nav_wrap div span{bottom:15px;}
}