@charset "euc-kr";
/* CSS Document */
@import 'https://fonts.googleapis.com/css?family=Roboto';
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

html,body{height:100%}
body, div, ul, li, table, tr, td, th {
	margin: 0px;
	font-family:'Roboto',"¸¼Àº °íµñ",sans-serif;
	font-size: 14px; color:#222222;
	letter-spacing:0;
}
ul, li {
	list-style: none; margin:0px; padding:0px
}
img {
	border: none
}
a {
	color: #000;
	text-decoration: none
}
input, textarea, select {

   -webkit-appearance: none;
   -webkit-border-radius: 0;
}
input[type=text],input[type=tel],input[type=email],input[type=number], select, textarea {
	border:1px solid #c7c7c7}

h1 { font-size: 34px; line-height: 34px; font-family: 'Noto Sans KR', sans-serif;}

.title{ font-size:16px; line-height:22px; margin:0 auto;}
.title2{font-size:16px; line-height:22px; margin:0 auto; text-align:left;}
.white{color:#fff}
.red{color:#d71f35}
.blue{color:#47566d}
.font20{font-size:20px; line-height:24px}
.font26{font-size:26px; line-height:34px}
.shadow{text-shadow: 1px 0px 4px #1C1C1C;}

#wrap{margin:0px auto; width: 100%; max-width:1280px}/*¸ð¹ÙÀÏ ¾Æ´Ò°æ¿ì¿£ ű׻èÁ¦*/

#top_nav{width:100%; height:41px; padding:12px 0; position:fixed; top:0; left:0; z-index:9999;}
.menu_s{ display: none; height:41px; padding:12px 0; position:fixed; top:0; right: 0; z-index:9999; }
.menu_s .btnMenu { position: absolute; right: 0; top: 0; display: block; width: 60px; height: 60px; }
.menu_s .btnMenu span { position: absolute; left: 10px; display: block; width: 30px; height: 5px; background: #666; transition: all 0.2s ease-out; }
.menu_s .btnMenu span:nth-child(1) { top: 20px; background: #36bdef; }
.menu_s .btnMenu span:nth-child(2) { top: 30px; background: #008ec4; }
.menu_s .btnMenu span:nth-child(3) { top: 40px; background: #ea5e00; }
.menu_s .btnMenu.on span:nth-child(1) { top: 30px; background: #fff; transform: rotate(45deg); }
.menu_s .btnMenu.on span:nth-child(2) { left: 100px; background: #fff; }
.menu_s .btnMenu.on span:nth-child(3) { top: 30px; background: #fff; transform: rotate(-45deg); }
#gnb { top: 66px; position: fixed; z-index: 99; left: 100%; width: 100%; height: 60px; color: #fff; transition: all 0.2s ease-out; }
#gnb > ul > li > a { display: block; height: 60px; line-height: 60px; border-bottom: 1px solid #fff; padding-left: 20px; color: #fff; font-size: 18px; }


.f-nav{background: rgba(65, 65, 65, 0.5)}

/*º»¹®*/
.contents {max-width:1280px; margin:0 auto;}
.main{ overflow:hidden; height:100%;}
.main .text{ padding-top:13%; width: auto; }

#sub1{ height:100%;}
#sub1 .text_con{ position:relative; top:50%;
	-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
#sub1 li{margin-bottom:78px; font-size:16px; line-height:20px;font-family: 'Noto Sans KR', sans-serif; font-weight:lighter; color:#333; padding-left: 8px; }
#sub1 span { padding-left: 8px; margin-left: -8px; background: #fff; }
#sub1 strong{font-weight:bold;}

#sub2{ clear:both; padding:10% 0 15% 0;}
#sub2_contents > div{width:290px; height:300px; float:left; color:#fff; margin-top:40px; padding:50px 15px; font-size:14px; line-height:18px}
.index1{background: rgba(0, 0, 0, 0.3); } 
.index2{background: rgba(0, 0, 0, 0.4);} 
.index3{background: rgba(0, 0, 0, 0.5);} 
.index4{background: rgba(0, 0, 0, 0.7);} 
#sub2_contents strong{font-size:28px}
.circle_number{border:3px solid #FFF; color:#fff; border-radius: 50px; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; height:50px; width:50px; line-height:50px; font-weight:bold; font-size:36px; margin:0 auto 30px auto; text-align:center}

#sub3{ padding:10% 0 15% 0}
#sub3 img{margin-top:40px; width: 100%; max-width: 1280px; }

#sub4{ padding:10% 0 15% 0}
.slider {
	max-width: 1280px;
	height:557px;
	margin: 50px auto 0 auto;
	padding-top:93px;
	background:url(../image/sub4_bg.png) no-repeat; background-position:top center
}

.slick-slide img {
	width: 224px; margin:0 15px}


#sub5{ padding:10% 0 15% 0}
.banner{margin-top:40px}
#sub5 ul,li{font-size:0}
#sub5 li{width:320px; display:inline-block; list-style:none; margin:0; padding:0;}
#sub5 li img { width: 100%; height: 100%; }

#sub6{clear:both;}
.rolling{float:left; width:50%; }
.rolling_right{float:right; width:50%; padding-top: 20%; padding-left: 20px; box-sizing: border-box;}
.swiper-container { padding-top: 50%; margin-left: 20px; }
.swiper-slide { overflow: hidden; margin: 0 auto; padding-bottom: 20px;}
.swiper-pagination { text-align: center; }

#sub7{clear:both; height:100%; overflow:hidden; position:relative }
#sub7 .talk_left{float:left; width: 40%; max-width:490px; height:100%; padding-left: 20px; box-sizing: border-box;}
#sub7 .talk_left > div{height:33%}

#staticImg{
		display: block;
		overflow:hidden;
		z-index:3;
		top: 700%;
		width: 60%; min-width: 350px; 
		right:0;
		float:right;
		height:100%;
		bottom:0;

		-webkit-transition: all 1s ease-out;
		-moz-transition: all 1s ease-out;
		-o-transition: all 1s ease-out;
		transition: all 1s ease-out;

		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}
#staticImg.moveDown{
	-webkit-transform: translate3d(0, 100%, 0);
      -ms-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);	}


	#staticImg.moveUp{
	
	-webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);}
	

.talk_right{ width: 95%; min-width: 350px; background:url(../image/sub7_iphone_top.png) no-repeat; background-size: cover; background-position:top center;  padding-top:35%; position:relative ; margin-top:80px; margin-left: 4%;}
.talk_text{margin:0px 13% 0 7%;}
.talk_bottom{ width: 93.2%; text-align:left; border-bottom: 1px solid #d9d9d9;}
.talk_text img, .talk_bottom img{ width: 100%; }


#sub7 .talk_btn{width:240px; height:55px; line-height:55px; color:#fff; font-size:20px; font-weight:bold; background-color:#47566d; padding:0 20px; margin-top:30px;border-radius: 34px; -moz-border-radius: 34px; -webkit-border-radius: 34px; z-index:3}

/*contact us*/
#contact{ height:100%; width:100%; max-width:1280px; margin:0 auto -90px auto; text-align:center; }

.paddingBox { height: 15%; }
.db_sub{max-width:1000px; margin:50px auto 100px auto}
.db_sub ul,li{text-align:left; font-size:14px}
.db_sub li{ float: left; list-style:none; font-size:16px; width: 50%; padding-top: 2%; }
.db_sub li:last-child{ width: 100%; }

.name{ padding-left: 20px; height:45px; line-height:45px;color:#000; font-size:16px; font-weight:bold; text-align:left}
.db_sub .right { float: right; width: 70%; }
.db_sub select { height: 43px; width: 28%; }
.db_sub input { height: 38px; width: 100%; }
.db_sub li:nth-child(6) input { width: 85%; }
.db_sub textarea { height: 60px; width: 84.5%; float: right; }

.db_sub .db_btn{background-color:#494949; width:50%; height:65px; margin:30px auto; color:#fff; font-size:22px; font-family: 'Noto Sans KR', sans-serif;border-radius: 11px; 
-moz-border-radius: 11px; 
-webkit-border-radius: 11px; border:none; cursor:pointer;}

/*ÇÏ´Ü*/
#footer{text-align:center; padding:15px 0; background-color:#4a4a4a; color:#fff; font-size:12px; line-height:16px; left:0; height:60px; width:100%; bottom:0; position:relative}

/*20170821*/

.logo_all {
	width: 100%;
	max-width:1021px;
	margin:0 auto;
	overflow:hidden;
	padding: 0 10px;
}

.logo {
	float:left;
}

.top_button {
	float:right;
	padding: 0 30px;
}

.top_button ul {
	float: left;
}

.top_button ul li {
	float:left;
}

.top_button ul li a{
	color:#fff;
	padding:10px;
	display:block;
	margin-right:5px;
}

/*¹ÝÀÀÇü*/
@media screen and (max-width:1300px) {
	#sub2_contents { margin-top: 40px; }
	#sub2_contents strong { font-size:20px; }
	#sub2_contents > div{width:48%; margin-top: 0;  padding:4% 1%; }
}

@media screen and (max-width:1000px) {
	.main .text{ width: 100%;  padding-top: 15%;}
	#sub3 img {content:url("../image/sub3_s.png");}
}

@media screen and (max-width:977px) {
	#sub5 li { width: 220px; }
}

@media screen and (max-width:784px) {
	#sub7 .talk_left { position: absolute; left: 20px; top:30%; width: 100% }
	#sub7 .talk_btn { position: absolute; right: -40%; top: 50%; }
}

@media screen and (max-width:743px) {
	.top_button { display: none; }
	.menu_s { display: block; }
	#sub1 li{/*margin-bottom:78px; */ font-size: 14px;}
	.rolling{ width:100%;}
	.swiper-container { padding-top: 25%; }
	.swiper-slide { font-size: 30px; }
	.rolling_right{ width:100%; text-align: right; padding-right: 20px; padding-top: 10%; background-color: #fff; padding-bottom: 50%; }
	.title, .title2 { font-size:14px; line-height:18px; }
}

@media screen and (max-width:700px) {
	h1{font-size:22px; line-height: 24px; }

	.main .text{ padding-top: 40%; }
	#sub2{ clear:both; padding-top: 67px;}
	#sub2_contents { margin-top: 20px; }
	#sub2_contents > div{ height: 250px; }
	#sub2 .circle_number { margin-bottom: 10px; }
	#sub3{ padding-top: 25%;}
	#sub3 img { padding-top: 7%;}
	#sub4{ padding-top:  67px;}
	#sub4 .slider { margin-top: 0; }
	#sub5{ padding-top:  67px;}
	#sub7 .talk_left { text-align: center; width: 100%; left: 0; right: 0; padding-left: 0; }
	#sub7 .talk_btn { position: relative; left: 0; top: 0; right: 0; bottom: 0; margin: auto; height: 40px; font-size: 16px; line-height: 40px; margin-top: 10px; padding: 0 16px; }
	#sub7 { padding: 5%; }

	.paddingBox { height: 10%; }
	#contact .db_sub li{ width: 80%; }
	#contact .db_sub li:last-child{ width: 80%; }
	#contact .db_sub textarea { width: 68.5%;}
	#contact .db_sub { margin: 20px auto; }
	#contact .db_sub .db_btn { height: 48px; }
}

@media screen and (max-width:500px) {
	#sub1 li { margin-bottom: 0; line-height: 14px; font-weight: 400; }
	#sub1 span { background: none;}
	#sub2_contents strong { font-size: 14px; }
	#sub2_contents > div{ font-size: 10px; line-height: 12px; height: 200px;}
}

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

	h1{font-size:16px; line-height: 18px; }
	.title, .title2 { font-size: 11px; line-height: 14px; }
	strong { font-size: 18px; line-height: 19px; }
	.font20 { font-size: 18px; line-height: 19px; }

	.paddingBox { height: 65px; }
	#sub5 { padding-top:  67px; }
	#sub5 .banner { margin-top: 18px; }
	#sub5 li { width: 160px; }
	#sub6 .swiper-slide  { font-size : 17px; line-height: 25px; }
	#sub6 .swiper-slide strong { font-size: 25px; }
	#sub7 #staticImg { min-width: 270px; }
	#sub7 .talk_right { min-width: 270px; margin-top: 30px; }
	#sub7 h1 { margin: 7px auto;}
	#sub7 p { margin: 0; }

	#contact .name{ padding-left: 10px; height: 28px; line-height:28px; font-size:14px; }
	#contact .db_sub .right { float: right; }
	#contact .db_sub select { height: 28px; }
	#contact .db_sub input { height: 24px; }
	#contact .db_sub li:nth-child(6) input { width: 80%; }
	#contact .db_sub .db_btn { margin: 4px auto; height: 28px; font-size: 14px; }

	#footer { font-size: 10px; line-height: 12px; }
}