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

@charset "UTF-8";
@font-face {
  font-family: "my-icon-font";
  src:url("fonts/my-icon-font.eot");
  src:url("fonts/my-icon-font.eot?#iefix") format("embedded-opentype"),
    url("fonts/my-icon-font.woff") format("woff"),
    url("fonts/my-icon-font.ttf") format("truetype"),
    url("fonts/my-icon-font.svg#my-icon-font") format("svg");
  font-weight: normal;
  font-style: normal;

}


*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	list-style: none;
}
a{ text-decoration: none; color: #000}
body {
  overflow: auto;
  -webkit-backface-visibility: hidden;
  font-family:'Noto Sans KR','Apple SD Gothic Neo','malgun gothic','맑은 고딕','돋움','dotum', sans-serif;
}

header{position: fixed; z-index: 999;display: block; width: 100%;}
header .menu_set{width: 100%;box-sizing: border-box; position: relative; height: 100%}

header ul.main-menu{float: right; }
header ul.main-menu li{ display: block; float: left; text-align: center;width:110px; cursor: pointer;}
header ul.main-menu li.n1{}

header ul.main-menu li.n2{}
header ul.main-menu li > ul{
	opacity: 0;
	transition: 0.5s;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e2e2e2;
	box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .1);
	display: block; 
	text-align: center;
	width: 100%; 
	padding:0;
	margin-top: 0px;
	border-radius: 16px;
}
header ul.main-menu li > ul li{clear: left;width:100%; line-height: 35px}
header ul.main-menu li > ul li a{color: #8f8f8f; font-size: 15px;transition: 0.5s;}
header ul.main-menu li > ul li a:hover{color: #000;}


header ul.main-menu li:hover > ul,
header ul.main-menu li:active > ul{opacity: 1;margin-top: 15px;padding: 10px 0;}



header ul.main-menu li.n3{}
header ul.main-menu li.n4{}

header ul.main-menu li a{ display: block; font-size: 16px; font-weight: 400}

header ul.store{display:block; overflow: hidden; float: left; background:url(../images/bar.png) no-repeat 135px center; position: absolute; top: 40px; left: 60px}
header ul.store li{ display: block; float: left}
header ul.store li.google{text-indent: 30px; background: url(../images/ad.png) no-repeat left}
header ul.store li.app{text-indent: 26px; margin-left: 40px; background: url(../images/ios.png) no-repeat left}
header ul.store li a{ display: block; font-size: 14px}











.dl{display:none}

@media only screen and (max-width:960px){
	header{padding:0;}
	header .menu_set{width: 100%; position: relative; }	
	.store{display:none !important}
	.dl{display:block; position: fixed; width: 100%; height: 50px;; bottom: 0; border-top: 1px solid #f2f2f2; z-index: 999; background: url(../images/m_bar.png) no-repeat center; background-size:1px 12px; background-color: #fff}
	.dl li{float: left; width:50%;}
	.dl li img{ margin-right: 0}
	.dl li a{width:100%; text-align: center; display: block; line-height: 50px; font-size: 12px}
	header ul.main-menu{ float: none; text-align: center; display: block; overflow: hidden; margin-left: 20px;}
	header ul.main-menu li a{ font-size: 11px; font-weight: 400; line-height: 50px}
	header ul.main-menu li.n2{margin:0 20px}
	header ul.main-menu li.n3{margin:0 20px 0 0}
	header ul.main-menu li.n4{display:none}
	header ul.main-menu li.mm{display:block}
}

#title {
	backface-visibility:hidden;
	position:absolute;
	top:50%;
	left:50%;	
	margin: -160px 0 0 -150px;
	z-index: 1;
	display: block;
	overflow: hidden
}
#title h1 {
	display: block;
	padding: 0;
	margin: 0;
	width:300px;
	height:300px;
	overflow: hidden;
	text-indent: -300px;
	background: url(../images/intro_logo.png) no-repeat;
	background-size: cover
}
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.container .video-background{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.content {color: #000;width:1200px;margin: 0 auto;position: relative;}

@media only screen and (max-width:1280px){
.content {width:960px;}
}
@media only screen and (max-height:800px){
	.content {width:860px;}
}

#section1 {position: relative; overflow: hidden; background: url("../images/1_bg.jpg") no-repeat center; background-size: cover;}
#section1 a.scroll{
	display:block;
	position: absolute;
	bottom: 50px;
	z-index: 1;
	width:64px;
	height: 64px;
	left: 50%;
	margin-left: -32px;
	background: url(../images/apppresentation-icon-goto.png);
	text-indent: -99px;
	overflow: hidden
}

@media only screen and (max-width:960px){
	
	#section1 #container{}
	#title {
		top:50%;
		left:50%;	
		margin: -120px 0 0 -75px;
		z-index: 1;
		
	}	
	#title h1 {
	width:150px;
	height:150px;
	overflow: hidden;
	background: url(../images/intro_logo.png) no-repeat;
	background-size: cover
	}
	#section1 a.scroll{
	display:block;
	position: absolute;
	bottom: 80px;
	z-index: 1;
	width:54px;
	height: 28px;
	left: 50%;
	margin-left: -26px;
	background: url(../images/m_scroll.png);
		background-size: 100%;
	text-indent: -99px;
	overflow: hidden
	}
}

#section2 { 
  background: #ffffff; position: relative; overflow: hidden}
#section2 .content{ -webkit-transform: translateY(-50%);transform: translateY(-50%);top: 50%;}
#section2 p{ display: block}
#section2 p.t1{ font-size: 20px; font-weight: 300}
#section2 p.t2{ font-size: 50px; font-weight: 200;line-height: 120%;}
#section2 p.t3{  font-size: 16px; font-weight: 300;line-height: 160%;color: #8c8c8c; width: 600px; margin-top: 30px;}
#section2 span.bar{ width:30px; height: 1px; background: #000; overflow: hidden; text-indent: -99px; display: block; margin: 40px 0}
#section2 span.a1{ display: block; position: absolute;top:50%;right:0;z-index: 3; margin-top: -300px;}
#section2 span.a1 img{ width:100%}

@media only screen and (max-width:1280px){
	#section2 p.t1{font-size: 20px; font-weight: 300}
	#section2 p.t2{font-size: 40px; font-weight: 200;line-height: 120%;}
	#section2 p.t3{font-size: 14px; font-weight: 300;line-height: 160%;color: #8c8c8c; width: 450px; margin-top: 30px}
	#section2 span.a1{ margin-right:0px; margin-top:-270px;}
}
@media only screen and (max-height:800px){
	#section2 p.t1{font-size: 20px; font-weight: 300}
	#section2 p.t2{font-size: 40px; font-weight: 200;line-height: 120%;}
	#section2 p.t3{font-size: 14px; font-weight: 300;line-height: 160%;color: #8c8c8c; width: 450px; margin-top: 30px}
	#section2 span.a1{ margin-top:-200px; width: 360px}
}

@media only screen and (max-width:960px){
	#section2 p.t1{ font-size: 13px; font-weight: 300}
	#section2 p.t2{font-size: 24px; font-weight: 200;line-height: 120%;}
	#section2 p.t3{display: none}
	#section2 span.bar{ width:15px; height: 1px; background: #000; overflow: hidden; text-indent: -99px; display: block; margin: 20px auto}
	#section2 {text-align: center}
	#section2 .content{width:100%; margin-top: -10px}
	#section2 span.a1{position: relative; margin: 60px auto 0;}
	#section2 span.a1 img{width:60%; margin:0 auto}
}



#section3 {position: relative; background:#f6f6f6; overflow: hidden}
#section3 .content{-webkit-transform: translateY(-50%);transform: translateY(-50%);top: 50%;  height: 640px; text-align: center}
#section3 p{ display: block;}
#section3 p.t1{ font-size: 50px; font-weight: 200;}
#section3 p.t2{ font-size: 18px; font-weight: 300;line-height: 180%; width:560px; margin: 40px auto 0}
#section3 span.a1{ display: block;margin-top: 80px}
#section3 span.a1 img{ width:351px}
@media only screen and (max-width:1280px){
	#section3 .content{}
	#section3 p.t2{font-size: 18px; font-weight: 300}
	#section3 p.t1{font-size: 40px; font-weight: 200;line-height: 120%;}
}
@media only screen and (max-height:800px){
	#section3 .content{height:500px}
	#section3 p.t2{font-size: 16px; font-weight: 300;width:500px; margin: 30px auto 0}
	#section3 p.t1{font-size: 40px; font-weight: 200;line-height: 120%;}
	#section3 span.a1{margin-top: 40pxpx}
	#section3 span.a1 img{ width:290px}
}
@media only screen and (max-width:960px){
	#section3 .content{width:100%; height: 70%}
	#section3 p.t2{ font-size: 13px; font-weight: 300; width:80%; margin: 20px auto 40px}
	#section3 p.t1{font-size: 20px; font-weight: 200;line-height: 120%;}
	#section3 span.a1{margin-top: 30px}
	#section3 span.a1 img{ width:200px}
}





#section4 {position: relative; background:#fff; overflow: hidden}
#section4 .content{-webkit-transform: translateY(-50%);transform: translateY(-50%);top: 50%;  height: 640px; text-align: center}
#section4 p{ display: block;}
#section4 p.t1{ font-size: 20px; font-weight: 300; margin-bottom:20px;}
#section4 p.t2{ font-size: 50px; font-weight: 200;line-height: 120%;}
#section4 p.t3{ font-size: 20px; font-weight: 300; margin-bottom:10px;}
#section4 p.t4{ font-size: 20px; font-weight: 300;line-height: 120%;}
#section4 span.a1{ display: block; margin-top: 60px}
#section4 span.a2{ display: block; margin-top: 50px}
#section4 span.a1 img{ width:149px}
#section4 span.a2 img{ width:480px}


@media only screen and (max-width:1280px){
	#section4 .content{height:620px;}
	#section4 p.t1{font-size: 20px; font-weight: 300}
	#section4 p.t2{font-size: 40px; font-weight: 200;line-height: 120%;}
	#section4 p.t3{ font-size: 20px; font-weight: 300; margin-bottom:10px;}
	#section4 p.t4{ font-size: 20px; font-weight: 300;line-height: 120%;}
	#section4 span.a1{margin-top: 40px}
	#section4 span.a2{margin-top: 40px}
}
@media only screen and (max-height:800px){
	#section4 .content{height:570px}
	#section4 p.t1{font-size: 20px; font-weight: 300}
	#section4 p.t2{font-size: 40px; font-weight: 200;line-height: 120%;}
	#section4 span.a1{ display: block; margin-top: 50px}
	#section4 span.a2{ display: block; margin-top: 30px}
	#section4 span.a1 img{ width:100px}
	#section4 span.a2 img{ width:430px}	
}
@media only screen and (max-width:960px){
	#section4 .content{width:100%; height: 65%}
	#section4 p.t1{ font-size: 13px; font-weight: 300;margin-bottom:10px;}
	#section4 p.t2{font-size: 20px; font-weight: 200;line-height: 120%;}
	#section4 p.t3{ font-size: 13px; font-weight: 300;margin-bottom:10px; margin-top: 10px}
	#section4 p.t4{font-size: 13px; font-weight: 300;line-height: 120%;}
	#section4 span.a1{margin-top: 30px}
	#section4 span.a2{margin-top: 20px}
	#section4 span.a1 img{ width:90px}
	#section4 span.a2 img{ width:300px}
}




#section5 {position: relative; background:#f3f3f3; overflow: hidden}
#section5 .content{-webkit-transform: translateY(-50%);transform: translateY(-50%);top: 50%;  height: 390px; text-align: center}
#section5 p{ display: block;}
#section5 p.t1{ font-size: 40px; font-weight: 200; width:700px; margin: 0 auto}
#section5 p.t2{ font-size: 18px; font-weight: 300;line-height: 180%;width:520px; margin: 0 auto}
#section5 span.a1{ display: block;margin: 50px auto 45px; text-indent: -99999px; overflow: hidden; background: url("../images/point.png") no-repeat center; width: 37px; height: 24px}
#section5 span.a2{ display: block;margin: 50px auto 0; text-indent: -99999px; overflow: hidden; background: url("../images/text.png") no-repeat center; width: 80px; height: 26px}



#section5.bg {
	background-image: url("../images/glasses.png"), url("../images/header_penpot.png"), url("../images/header_flowerpot.png"), url("../images/note.png");
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position:300px 750px, -200px -50px, right -150px, right 550px
}
@media only screen and (max-width:1600px){
	#section5.bg {background:#f6f6f6}
}

@media only screen and (max-width:1280px){
	#section5 .content{height:350px;}
	#section5 p.t1{font-size: 40px; }
	#section5 p.t2{font-size: 18px; width:520px; }
	#section5.bg {background:#f6f6f6}
}
@media only screen and (max-height:800px){
	#section5 .content{height:350px}
	#section5 p.t1{font-size: 40px; font-weight: 200;line-height: 120%;}
	#section5 p.t2{font-size: 17px; font-weight: 300;width:500px; }
	#section5.bg {background:#f6f6f6}
}
@media only screen and (max-width:960px){
	#section5 .content{width:100%; height: 35%}
	#section5 p.t1{font-size: 18px; font-weight: 200;width:85%; line-height: 160%}
	#section5 p.t2{ font-size: 13px; font-weight: 300;width:70%}
	#section5.bg {background:#f6f6f6}
	#section5 span.a1{margin: 30px auto 30px;}
	#section5 span.a1{ background-size: 60%; margin: 20px auto}
}






#section6 {position: relative; background:#fff; overflow: hidden}
#section6 .content{-webkit-transform: translateY(-50%);transform: translateY(-50%);top: 35%; text-align: center;}
#section6 p{ display: block;}
#section6 p.t1{ font-size: 26px; font-weight: 300; margin:30px 0 50px;}
#section6 p.t2{ font-size: 50px; font-weight: 200;line-height: 120%;}
#section6 a.sub{display: block; width: 260px; height: 70px; background: #000; color: #fff; margin: 0 auto; line-height: 68px; font-size:20px; font-weight: 400}
#section6 span{  width:37px; height: 24px;}

@media only screen and (max-width:960px){
	#section6 .content{width:100%}
	#section6 p.t1{ font-size: 14px; font-weight: 300;margin:10px 0 50px}
	#section6 a.sub{ width: 150px; height: 45px; line-height: 45px; font-size:15px; font-weight: 400}
	#section6 span img{  width:20px; }
	
}


footer{text-align: center; position: absolute; bottom: 0; width: 100%; padding: 60px 0}
footer h2{ display: block; width: 165px; height: 39px; overflow: hidden; text-indent: -300px; margin: 0 auto; background: url(../images/handa_logo.png)}
footer p{color:#8e8e8e; font-size: 12px; letter-spacing: 1px; font-weight: 300; clear: both; margin-top: 20px}
footer .info{margin: 0 auto; display: block}
footer ul{overflow: hidden; padding: 30px 0 10px}
footer ul li{  display:inline-block; font-size: 12px}
footer ul li.ml{margin: 0 0 0 10px; padding: 0 0 0 15px; background:url(../images/bar2.png) no-repeat 0 center;}

@media only screen and (max-width:960px){
	footer{bottom: 70px; padding: 0}
	footer .info{margin-top: 15px;}
	footer h2{ display: block; width: 115px; height: 27px;background-size: 115px 27px}
	footer p{color:#8e8e8e; font-size: 10px;font-weight: 300; clear: both}
	footer ul{overflow: hidden; padding: 10px 0 0px; }
	footer ul li{font-size: 11px}
	footer ul li.ml{background-size:1px 10px;margin: 0 0 0 5px; padding: 0 0 0 10px; }
	
}

.bullet {
	position:fixed;
	right:30px; top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	z-index: 999
}
.bullet li {
  text-align: right;
}

.bullet li a {
  display: inline-block;
  padding: 0 5px;
  color: #ccc;
  text-decoration: none;
  line-height: 30px;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}
.bullet li a:after {
  content: '';
  display: inline-block;
  background:#000;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 10px;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}
.bullet li a.active {
  color: #fff;
}
.bullet li a.active:after {
  content: '';
  display: inline-block;
  background:#fff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #c7c7c7;
  margin: 0 9px 0 10px;
  -webkit-transition: .3s ease;
  transition: .3s ease;
}
@media only screen and (max-width:960px){
.bullet {right:10px;}
.bullet li{padding: 0; line-height: 15px}
.bullet li a {padding: 0; line-height: 5px}
.bullet li a:after {width:4px; height:4px;}
.bullet li a.active:after {width:6px; height:6px;border: 1px solid #c7c7c7; box-sizing: border-box}
}


/** Custom Select **/

.dropdown {position: relative;text-align: left;width: 90px; height:32px; float: right; margin:-3px 0 0 30px }
.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 30px;
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 50px;
  width: 100%;
	box-sizing: border-box;
}
.dropdown-text:after {
  position: absolute;
  display: block;
  content: '';
  width: 7px;
  height: 7px;
  top: 50%;
  right: 30px;
  margin-top: -1px;
  border-bottom: 2px solid #db1416;
  border-right: 2px solid #db1416;
  transform: rotate(45deg) translateY(-50%);
  transition: all .35s ease-out;
  transform-origin: 50% 0;
}

.dropdown-text{text-indent: 25px;font-size: 13px}
.dropdown-text {
  -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .0);
  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .0);
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .0);  
}
.dropdown-text:hover {
  -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .1);
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .1);  
}
.dropdown-text.open:after {
  margin-top: 2px;
  transform: rotate(-135deg) translateY(-50%);
}
.dropdown-text,
.dropdown-content a {
  	color: #000;
	transition: all .2s ease-in-out;
}
.dropdown-content {
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	list-style-type: none;
	position: absolute;
	top: 32px;
	padding: 10px 0;
	margin: 0;
	opacity: 0;
	visibility:hidden;
	line-height: 30px;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 16px;
	width: 90px;
	text-align: center
}
.dropdown-content.open {
  opacity: 1;
  visibility:visible;
  top: 42px;
  -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .1);
  -moz-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .1);
  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, .1);
}
.dropdown-content a {
	font-size: 13px;
  display: block;
	color: #8a8a8a
}
.dropdown-content a:hover {
  color: #000
}
@media only screen and (max-width:960px){
	.dropdown{width: 56px; height:24px;top:50%; float: left; margin:-12px 20px 0 20px}
	.dropdown-text {text-indent: 15px;line-height: 24px;font-size: 11px}
	.dropdown-text:after {width: 5px;height: 5px;top: 50%;right: 15px;border-bottom: 1px solid #db1416;border-right: 1px solid #db1416;}
	.dropdown-content {width: 56px; padding: 6px 0;top:0px;}
	.dropdown-content.open {top:30px; z-index: 0}
	.dropdown-content a {font-size: 11px;}
	.dropdown-text.open:after {margin-top: 1px;}
	

}




.nav {margin: 0;padding: 0; float: right}

.nav > li {display: inline-block;list-style: none;}
.nav > li {padding: 0 30px}

.nav .button-dropdown {position: relative;}

.nav li a {display: block;color: #333;text-decoration: none;}


.nav li a.dropdown-toggle:hover, .nav li a.dropdown-toggle.active {color: #000;}


.nav li a:hover span, .nav li a.dropdown-toggle.active span {color: #fff;}
.nav li .dropdown-menu {
	display: none;
	position: absolute;
	left: 50%;
	padding: 10px 0px;
	margin-left:-60%;
	margin-top: 10px;
	text-align:center;
	background: #fff;
	width: 120%;
	border-radius: 16px; 
	border: 1px solid #f1f1f1;
	transition: all .6s ease-in-out;
	box-shadow:0px 10px 50px 0px rgba(0, 0, 0, .1);
	line-height: 30px;
	font-size: 14px;
}
.nav li .dropdown-menu.active {margin-top: 10px;}
.nav li .dropdown-menu a {color: #8a8a8a;transition: all .6s ease-in-out;}
.nav li .dropdown-menu a:hover {color: #000;}

@media only screen and (max-width:960px){
	.nav {float:none;}
	.nav > li {padding: 0 10px; line-height: 50px}
	.nav > li:first-child {padding-left: 0}
	.nav li a {font-size: 11px}
	.nav li .dropdown-menu {margin-top: -5px;width: 160%;margin-left:-80%;}
}