@charset "utf-8";


@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);




body{width:100%; height:auto; word-break:keep-all;  	
font-family: 'Jeju Gothic', serif;}
a{display: block; color:#090909;}
figure, figcaption{margin: 0; padding: 0;}


#header{width:100%; height:50px;}
#header .nav_wrap{width:70%; height:100%;margin:0 auto;}
#header .nav_wrap h1{float:left; margin-top:5px; margin-right:50px;}
#mnav ul{overflow:hidden;float:left;}
#mnav ul li{float:left;}
#mnav ul li a{ margin-left:30px; margin-top:20px;}
#header .nav_wrap .login a{float:right; background:#363636; padding:5px 20px; font-size:12px; border-radius:20px; margin-top:15px; color:#fff;}


#toggle{display:none;}


#slides{width:100%; height:750px; background:#f88a53;transition:0.5s; animation-name:chbg;animation-duration:16s; animation-iteration-count:infinite;}

#slides .slides_contents {width:65%; margin:0 auto;position:relative;}
#slides .slides_contents>ul li{display:none; width:60%; position:absolute; top:250px; }

#slides .slides_contents>ul li h2{font-weight:bold; font-size:50px;  color:#090909; margin-bottom:10px;}
#slides .slides_contents>ul li h3{font-size:30px; color:#fff; margin-bottom:30px; }
#slides .slides_contents>ul li p{color:#fff; line-height:1.4em;}
#slides .slides_contents>ul li p span{font-size:12px;}
#slides .slides_contents>ul .sc_text01 h2{color:#fff; text-align:center;}
#slides .slides_contents>ul .sc_text01 h3{font-size:50px; text-align:center; color:#090909; font-weight:bold;}
#slides .slides_contents>ul .sc_text01 p{text-align:center; color:#090909;}
#slides .slides_contents>ul .sc_text01 a{border:2px solid #fff; width:100px; color:#fff;  font-size:12px; margin:0 auto; height:30px; line-height:30px; text-align:center; margin-top:30px;}




@keyframes chbg{
	0% {}
	25% { background:#f88a53;}
	27%{background:#52c3cc;}
	50%{background:#52c3cc;}
	52%{background:#cd66d3;}
	76%{background:#cd66d3;}
	78%{background:#ffd05a;}
	100%{background:#ffd05a;}


}





#slides .slides_contents .phone_bg{position:absolute; top:90px; right:50px; width:283px; height:559px; border-radius:18px; box-shadow:0 0 20px 2px;}
#slides .slides_contents .phone_bg .pimgs{position:absolute; top:0px; right:0px; width:100%; height:100%;z-index:100;}
#slides .slides_contents .phone_bg>div{position:absolute; top:51px; left:16px; z-index:200; width:250px; height:455px; overflow:hidden;}
#slides .slides_contents .phone_bg ul { position:absolute;top:0;left:0; width:1000px; height:455px; }
#slides .slides_contents .phone_bg ul li {float:left; width:250px; height:455px; }
#slides .slides_contents .phone_bg ul li img{width:100%;height:100%;}






#intro{width:100%; height:550px;}
#intro .intro_h2{float:left; margin-left:10%; width:30%; margin-top:200px; margin-right:5%;}
#intro .intro_h2 h2{font-size:40px;margin-bottom:20px;}
#intro .intro_h2 p{line-height:1.6em;}

#intro .intro_service{float:left; margin-right:10%; width:40%; margin-top:120px;}
#intro .intro_service ul li{padding-left:320px; height:50px; margin-bottom:80px; line-height:1.4em;}
#intro .intro_service ul li:nth-child(1){background:url(../imgs/intro_img1.png) no-repeat 15px 0px; }
#intro .intro_service ul li:nth-child(2){background:url(../imgs/intro_img2.png) no-repeat;}
#intro .intro_service ul li:nth-child(3){background:url(../imgs/intro_img3.png) no-repeat;}





#process {width:100%; height:2100px; background:#f6f6f6; padding:100px 0;}
#process .pcs_wrap{ height:100%;background:url(../imgs/process.png) no-repeat center 300px; margin:0 auto;}

#process h2{font-size:50px; text-align:center;padding-top:50px; margin-bottom:20px;}
#process .pcs_wrap>p{font-size:20px; text-align:center; margin-bottom:80px;}

#process .pcs_wrap>div{ width:900px;margin:0 auto; height:350px;  position:relative;}
#process .pcs_wrap>div h3{font-weight:bold; font-size:20px;color:#fff;}

#process .step1 h3{ position: absolute; top: 100px; left: 80px;}
#process .step1 p{font-size:18px; position:absolute; top:50px; left:400px;}
#process .step1 ul{position:absolute; top: 120px; left:400px;}
#process .step1 ul li{font-size:30px;height:50px; line-height:50px;  padding-left:50px;}
#process .step1 ul li:nth-child(1){background:url(../imgs/process_tel.png) no-repeat 7px center; background-size:35px;}
#process .step1 ul li:nth-child(2){background:url(../imgs/process_computer.png) no-repeat 5px center; background-size:40px;}
#process .step1 ul li:nth-child(3){background:url(../imgs/process_phone.png) no-repeat 15px center; background-size:20px;}



#process .step2 h3{ position: absolute; top: 120px; right: 80px;}
#process .step2 p{font-size:24px; line-height:1.6em;  position:absolute; top:150px; left:200px; color:#363636;}


#process .step3 h3{position: absolute; top: 140px; left: 80px;}
#process .step3 p{font-size:24px; line-height:1.6em;position:absolute; top:150px; left:300px; color:#363636;}


#process .step4 h3{position: absolute; top: 170px; right: 80px;}
#process .step4 p{font-size:24px; line-height:1.6em;position:absolute; top:200px; left:150px; color:#363636;}


#process .step5 h3{position: absolute; top: 180px; left: 80px;}
#process .step5 p{font-size:24px; line-height:1.6em;position:absolute; top:180px; left:300px; color:#363636;}

#free{width:100%; height:600px; background:#090909;}
#free h2{color:#fff; font-size:40px; text-align:center; padding-top:80px; margin-bottom:80px;}


#free .free_wrap{width:70%; margin:0 auto;}
#free .free_wrap>div{float:left;width:50%; height:250px;}
#free .free_wrap>div h3{color:#fff; font-size:20px; text-align:center; height:100px; background:url(../imgs/after.png) no-repeat center 50px;}

#free .free_wrap .fw01{background:url(../imgs/free01.png) no-repeat center 100px; }
#free .free_wrap .fw02{background:url(../imgs/free02.png) no-repeat center 100px; }


#footer{width:100%; height:200px; }
#footer .f_wrap{width:60%; height:50px;margin:0 auto;line-height:50px;}

#fnav{float:left;}
#fnav ul li{float:left;}
#fnav ul li a{font-size:12px; color:#363636; margin-right:20px;}

#footer .f_wrap .sns{float:right; margin-top:10px;}
#footer .f_wrap .sns ul li{float:left;margin-left:15px; }
#footer .f_wrap .sns ul li a{text-indent:-9999px; }
#footer .f_wrap .sns ul li:nth-child(1) a{background:url(../imgs/blog.png) no-repeat center center ; background-size:18px; width:18px; height:25px;}
#footer .f_wrap .sns ul li:nth-child(2) a{background:url(../imgs/facebook.png) no-repeat center center; background-size:14px; width:14px;height:25px;}
#footer .f_wrap .sns ul li:nth-child(3) a{background:url(../imgs/insta.png) no-repeat center center; width:25px;height:25px; }
#footer .f_wrap .sns ul li:nth-child(4) a{background:url(../imgs/kakao.png) no-repeat center center; background-size:28px; width:28px;height:25px;}


#footer h2{font-size:18px; text-align:center;  margin-top:30px; margin-bottom:10px; color:#828282;}
#footer p{text-align:center; font-size:14px; line-height:1.4em; color:#828282;}




/*알림창*/


#alert{position:absolute; display:none;}

/*1680*/
@media screen and (max-width:1680px) {
	
}



/*1440*/
@media screen and (max-width:1440px) {
	#header .nav_wrap{width:80%; }
	#slides .slides_contents {width:80%;}
	
	#intro .intro_h2{margin-left:5%; width:40%; margin-right:3%;}
	#intro .intro_service{margin-right:5%; width:47%; }
	
	
	#free .free_wrap{width:90%; }
	
	#footer .f_wrap{width:70%; }
	
	
	
}


/*1360*/
@media screen and (max-width:1360px) {
	#slides .slides_contents {width:90%;}
	
	
	#intro{height:500px;}
	#intro .intro_h2 h2{font-size:35px;}
	#intro .intro_h2 p{font-size:14px;}
	
	
	#intro .intro_service ul li{padding-left:280px; margin-bottom:50px; line-height:1.4em; font-size:14px;}
	#intro .intro_service ul li:nth-child(1){background-position:20px 0px;  background-size:250px;}
	#intro .intro_service ul li:nth-child(2){background-size:270px; }
	#intro .intro_service ul li:nth-child(3){background-size:270px;}
	
}


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


/*1024*/
@media screen and (max-width:1024px) {
	#header .nav_wrap{width:90%; }
	#header .nav_wrap h1{float:left; margin-top:5px; margin-right:10px;}
	#mnav ul li a{ margin-left:20px; font-size:14px;}
	
	
	#slides .slides_contents ul li h2{font-size:40px;}
	#slides .slides_contents ul li h3{font-size:24px;}
	#slides .slides_contents ul .sc_text01 h3{font-size:40px;}
	
	
	#intro{height:450px;}
	#intro .intro_h2{margin-top:150px;}
	#intro .intro_service ul li{padding-left:220px; margin-bottom:40px; font-size:12px;}
	#intro .intro_service ul li:nth-child(1){ background-size:190px;}
	#intro .intro_service ul li:nth-child(2){background-size:210px; }
	#intro .intro_service ul li:nth-child(3){background-size:210px;}
	
	#process h2{font-size:40px;}
	#process .pcs_wrap>p{font-size:18px;}
	
	
	
	
	
	#free h2{font-size:35px;}
	#free .free_wrap{width:95%; }
	#free .free_wrap>div h3{font-size:16px;}
	
	#footer h2{font-size:16px;}
	#footer p{font-size:12px;}
	
	
}


/*768*/
@media screen and (max-width:768px) {
	#header{position:fixed; top:0; right:-200px; width:200px; height:100%; background:rgba(255,255,255,0.9); z-index:1000; transition:0.5s;}
	#header .nav_wrap h1{border-bottom:1px solid #ededed; float:none; margin:10px 0; text-align:center;}
	#header .nav_wrap h1 a{display:inline-block; padding:10px 0; }
	#mnav ul{float:none; margin-bottom:50px;}
	#mnav ul li{float:none; height:50px; line-height:50px;}
	#mnav ul li a{margin:0; display:inline; padding-left:20px;}
	#header .nav_wrap .login a{float:none; display:inline; margin-left:50px;}
	
	#toggle{display:block; position:fixed; top:30px; right:30px; width:30px; height:30px; transition:0.5s;}
	#toggle a img{position:absolute; top:0; left:0; width:100%; z-index:1000;}
	
	#toggle .close{display:none;}
	
	
	#slides{height:850px;}
	#slides .slides_contents .phone_bg{top:50px; right:50%; transform:translateX(50%); width:250px; height:494px;}
	#slides .slides_contents .phone_bg>div{width:222px; height:401px; top:45px; left:14px;}
	#slides .slides_contents .phone_bg u{width:888px; height:401px;}
	#slides .slides_contents .phone_bg ul li{width:222px; height:401px;}

	#slides .slides_contents{width:100%; margin:0;}
	#slides .slides_contents>ul li{top:600px; left:50%; transform:translateX(-50%); }
	#slides .slides_contents>ul li h2{font-size:30px;}
	#slides .slides_contents>ul li h3{font-size:25px;}
	#slides .slides_contents>ul li p{font-size:14px;}
	

	#slides .slides_contents>ul .sc_text01 h3{font-size:30px;}
	
	
	#intro{height:550px;}
	#intro .intro_h2{float:none; margin:0; width:100%;}
	#intro .intro_h2 h2{font-size:30px; text-align:center; padding-top:80px;}
	#intro .intro_h2 p{text-align:center;}
	
	#intro .intro_service{float:none; width:100%; margin-top:80px;}
	#intro .intro_service ul{ width:500px; margin:0 auto;}
	
	
	#process{height:1200px; padding:50px 0;}
	#process .pcs_wrap>p{margin-bottom:50px;}
	#process .pcs_wrap{ background-size:500px; background-position:center 220px;}
	#process .pcs_wrap>div{width:500px; height:200px;}
	#process .pcs_wrap>div h3{font-size:18px;}
	
	#process .step1 h3{top:50px; left:30px;}
	#process .step1 p{font-size:16px; top:20px; left:150px;}
	#process .step1 ul{top:50px; left:150px; margin-top:20px;}
	#process .step1 ul li{font-size:20px; height:30px; line-height:30px; padding-left:40px;}
	#process .step1 ul li:nth-child(1){background-size:20px; background-position:10px center;}
	#process .step1 ul li:nth-child(2){background-size:25px; background-position:7px center;}
	#process .step1 ul li:nth-child(3){background-size:15px; background-position:12px center;}
	
	#process .step2 h3{top:55px; right:25px;}
	#process .step2 p{font-size:16px; top:70px; left:40px;}
	
	#process .step3 h3{top:60px; left:30px;}
	#process .step3 p{font-size:16px; top:75px; left:150px;}
	
	
	#process .step4 h3{top:70px; right:30px;}
	#process .step4 p{font-size:16px; top:90px; left:50px;}
	
	
	#process .step5 h3{top:80px; left:30px;}
	#process .step5 p{font-size:16px; top:80px; left:150px;}
	
	
	
	#free{height:750px;}
	#free h2{font-size:30px; padding-top:80px;}
	
	#free .free_wrap{width:90%;}
	#free .free_wrap>div{float:none; width:100%; height:270px;}
	#free .free_wrap>div h3{background-size:150px;}
	#free .free_wrap .fw01{background-size:250px;}
	#free .free_wrap .fw02{background-size:250px;}
	
	#footer .f_wrap{width:90%;}
	
	
	
	
	
	
	
}


/*500*/
@media screen and (max-width:500px) {
	#slides{height:800px;}
	
	#slides .slides_contents .phone_bg{width:180px; height:355px;}
	#slides .slides_contents .phone_bg .pimgs{width:180px; height:355x;}
	#slides .slides_contents .phone_bg>div{top:32px; left:10px; width:160px; height:289px;}
	#slides .slides_contents .phone_bg ul{width:640px; height:289px;}
	#slides .slides_contents .phone_bg ul li{width:160px; height:289px;}
	
	
	#slides .slides_contents>ul li{width:90%; left:0; transform:none; margin-left:5%;}
	#slides .slides_contents>ul li{top:420px;}
	#slides .slides_contents>ul li p{font-size:12px;}
	#slides .slides_contents>ul li p span{font-size:10px;}
	#slides .slides_contents>ul li h2{font-size:20px;}
	#slides .slides_contents>ul li h3{font-size:18px; margin-bottom:20px;}
	#slides .slides_contents>ul .sc_text01 h3{font-size:20px;}
	#slides .slides_contents>ul .sc_text01 a{height:25px; line-height:25px; width:80px;  margin-top:20px;}
	
	
	
	#intro{height:650px;}
	#intro .intro_h2{width:95%; margin-left:2.5%;}
	#intro .intro_h2 h2{font-size:25px; }
	#intro .intro_h2 p{font-size:14px;}
	#intro .intro_service{width:100%; margin-top:50px;}
	#intro .intro_service ul {width:310px; margin:0 auto;}
	#intro .intro_service ul li{ padding-left:0; padding-top:40px; height:50px;line-height:1.2em; margin-bottom:20px; text-align:center;}
	#intro .intro_service ul li:nth-child(1){background-position:center 0;}
	#intro .intro_service ul li:nth-child(2){background-position:center 0;}
	#intro .intro_service ul li:nth-child(3){background-position:center 0;}
	
	
	
	
	
	
	#process{height:850px; padding:40px 0; }
	#process h2{font-size:25px;}
	#process .pcs_wrap{background-size:310px;}
	#process .pcs_wrap>p{font-size:16px; width:80%; margin:0 auto; margin-bottom:50px;}
	
	#process .pcs_wrap>div{ width:310px; height:130px;}
	#process .pcs_wrap>div h3{font-size:12px;}
	#process .step1 h3{top:45px; left:18px;}
	
	#process .step1 p {font-size:12px; top:10px; left:80px;}
	#process .step1 ul{top:25px; left:80px;}
	#process .step1 ul li{font-size:16px; height:25px; line-height:25px; padding-left:30px;}
	
	#process .step1 ul li:nth-child(1){background-size:15px; background-position:8px center;}
	#process .step1 ul li:nth-child(2){background-size:18px; background-position:6px center;}
	#process .step1 ul li:nth-child(3){background-size:12px; background-position:9px center;}
	
	#process .step2 h3{top:45px; right:15px;}
	#process .step2 p{font-size:12px; top:50px; left:20px;}
	
	#process .step3 h3{top:45px; left:20px;}
	#process .step3 p{font-size:12px; top:40px; left:80px;}
	
	
	#process .step4 h3{top:50px; right:15px;}
	#process .step4 p{font-size:12px; top:40px; left:20px;}
	
	#process .step5 h3{top:45px; left:18px;}
	#process .step5 p{font-size:12px; top:30px; left:80px;}
	
	
	#free{height:550px;}
	#free h2{font-size:20px; margin-bottom:50px; }
	
	#free .free_wrap>div h3{font-size:12px; height:80px;background-position: center 30px; background-size:120px;}
	#free .free_wrap>div{ width:100%; height:200px;}
	#free .free_wrap .fw01{background-size:200px; background-position:center 50px;}
	#free .free_wrap .fw02{background-size:200px; background-position:center 50px;}
	
	
	#footer{height:300px;}
	#fnav{width:100%; overflow:hidden;}
	#footer .f_wrap .sns{width:100%; margin-top:0; overflow:hidden; margin-bottom:50px;}
	#footer .f_wrap .sns ul li{margin:0; margin-right:15px;}
	
	#footer h2{font-size:16px;}
	#footer p{font-size:12px;}
	
	
	
	
	
	
	
	
	
	
	
}


/*320*/
@media screen and (max-width:320px) {
	
	#slides .slides_contents>ul li{width:95%; margin-left:2.5%; font-size:14px;}
	#slides .slides_contents>ul li h3{margin-bottom:10px; font-size:14px;}
	#slides .slides_contents>ul li p{font-size:10px;}
	#slides .slides_contents>ul li p span{font-size:8px;}
	#slides .slides_contents>ul li h2{font-size:16px;}

	
	#intro{height:550px;}
	#intro .intro_h2 h2{font-size:18px; padding-top:50px;}
	#intro .intro_h2 p{font-size:10px;}
	
	#process h2{font-size:18px;}
	#process .pcs_wrap>p{font-size:12px; width:90%; margin-bottom:65px;}
	
	
	#free h2{font-size:18px; padding-top:50px; }
	
	#free{height:500px;}
	
	#footer{height:250px;}
	#footer h2{font-size:14px;}
	#footer p{font-size:10px;}
	#fnav ul li a{margin-right:10px;}
	
	
	
}