@charset "utf-8";

/* basic
=============================================*/
header {
    position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}
#snav {
	width: 170px;
	padding: 40px 0 0 10px;
	line-height: 2.2;
    position: fixed;
	top: 120px;
	right: 0;
	z-index: 101;
	background: rgba(255, 255, 255, 0.9);
}
#snav li {
	width: 164px;
	height: 20px;
	margin-bottom: 40px;
}
#snav li a {
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	background: url(../about/img/snav.png) no-repeat;
}

#snav a.li_aboutme { background-position: 0 0;}
#snav a.li_behaves { background-position: 0 -20px;}
#snav a.li_design {	background-position: 0 -40px;}
#snav a.li_vision {	background-position: 0 -60px;}
#snav a.li_contact { background-position: 0 -80px;}

#snav .current a.li_aboutme  { background-position: -164px 0;}
#snav .current a.li_behaves { background-position: -164px -20px;}
#snav .current a.li_design { background-position: -164px -40px;}
#snav .current a.li_vision { background-position: -164px -60px;}
#snav .current a.li_contact { background-position: -164px -80px;}

/* for scroll value
=============================================*/

.indicator {
     margin: 0;
     position: fixed;
     right: 10px;
     top: 10px;
     background: rgba(255, 255, 255, 0.8);
}

/* baseType
=============================================*/

h1 {
	margin-bottom: 51px;
}
h2 {
	margin-bottom: 32px;
}

#aboutme {	background: url(../about/img/bg_aboutme.jpg) 50% 0 repeat-x fixed;}
#behaves {	background: url(../about/img/bg_behaves.jpg) 50% 0 no-repeat fixed #fff;}
#design  {	background: url(../about/img/bg_design.jpg) 50% 0 repeat-x fixed;}
#vision  {	background: url(../about/img/bg_vision.jpg) 50% 0 no-repeat fixed #ebf0f7;}
#contact {	background: url(../about/img/bg_contact.jpg) 50% 0 no-repeat fixed #e2eff7;}

section {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.basetype {
	width: 960px;
	height: 950px;
	margin: 0 auto;
	padding-top: 138px;
}
.basetype p {
	font-size:13px;
	line-height: 1.7;
	color: #414a4e;
}

a {
	color: #0099da
}
a:hover {
	color: #04acf4;
}

/* inc Type
=============================================*/

/*
#inc1 { background: url(../img/bg_inc1.gif) repeat-x fixed;}
#inc2 {	background: url(../img/bg_inc2.gif) repeat-x fixed;}
#inc3 {	background: url(../img/bg_inc3.gif) repeat-x fixed;}
#inc4 {	background: url(../img/bg_inc4.gif) repeat-x fixed;}
*/

#inc1, #inc2, #inc3, #inc4 {
	display: none;
}
.inctype {
	width: 960px;
	height: 600px;
	margin: 0 auto;
	position: relative;
	background: url(about/img/obj_triangle.png) no-repeat 100% 50%;
}
.ipad1 {
	width: 548px;
	height: 680px;
	background: url(about/img/obj_ipad.png) 0 0 no-repeat;
}
.ipad2 {
	width: 548px;
	height: 680px;
	background: url(about/img/obj_ipad.png) 0 0 no-repeat;
}
.ipad3 {
	width: 548px;
	height: 680px;
	background: url(about/img/obj_ipad.png) 0 0 no-repeat;
}
.ipad4 {
	width: 548px;
	height: 680px;
	background: url(about/img/obj_ipad.png) 0 0 no-repeat;
}
.bg_triangle {
	width: 100%;
	height: 600px;
	margin: auto;
}
.txt_inc1 {
	position: absolute;
	 top: 400px;
	 right: 10%;
}
.txt_inc2 {
	position: absolute;
	 top: 400px;
	 right: 10%;
}
.txt_inc3 {
	position: absolute;
	 top: 400px;
	 right: 10%;
}
.txt_inc4 {
	position: absolute;
	 top: 400px;
	 right: 10%;
}

/* aboutme
=============================================*/
#aboutme {
	z-index: -2;
}
/*
#designer {
	width: 195px;
	height: 425px;
	position: fixed;
	top: 270px;
	right: 20%;
	z-index: -1;
}
*/
.film {
	width: 647px;
	height: 427px;
	position: absolute;
	top: 310px;
	right: -50px;
}
.monitor2 {
	width: 358px;
	height: 318px;
	position: fixed;
	top: 380px;
	right: 310px;
}

/* behaves
=============================================*/

.hand {
	width: 642px;
	height: 346px;
	position: absolute;
	bottom: 300px;
	right: 0;
	background: url(../about/img/obj_hand.png) no-repeat;
}
.bright {
	width: 300px;
	height: 300px;
	position: absolute;
	bottom: 420px;
	right: 330px;
	background: url(../about/img/bright.png) no-repeat;
}

/* design
=============================================*/

.monitor {
	width: 600px;
	height: 400px;
	position: absolute;
	top: 320px;
	right: 10%;
	background: url(../about/img/obj_dz_pc.png) no-repeat right;
}
.dz_iphone {
	position: absolute;
	top: 130px;
	right: 400px;
}
.dz_tablet {
	position: absolute;
	top: 250px;
	right: 340px;
}

/* vision
=============================================*/

.hand2 {
	position: absolute;
	top: 460px;
	right: -200px;
}

/* contact
=============================================*/
#contact {
	height: 750px;
	overflow: hidden;
}

.bird {
	position: absolute;
	right: 10%;
	top: 350px;
}