@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Handlee);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { width:3700px; height: 15000px; font-family: Handlee; font-size:12px;}
.bg {position: fixed; width: 100%; height: 100%; background: url(../img/bg.jpg) no-repeat center top; background-size: cover; z-index: 0;}
h1 {position: fixed; z-index: 2; top: 20px; left: 20px;}
.copy {position: fixed; width: 100%; padding: 7px 0 7px 10px ; font-size: 14px; letter-spacing: 1px; background: black; bottom: 0; left: 0; color: #aaa; z-index: 0;}
.scrollNavi {position: fixed; width: 100px; z-index: 2; top: 330px; left: 70px;}
.scrollNavi li {float: left; margin: 0 10px 50px 0 ; width: 90px; text-align: center; opacity: 0.5; transform: scale(0.8); transition: all 0.5s;}
.scrollNavi li:hover {opacity: 1; transform: scale(1);}
.scrollNavi li.on {opacity: 1; transform: scale(1);}
.scrollNavi li img {position: relative; margin: 0 auto; width: 50px; display: block;}
.scrollNavi li span {font-size: 20px; color: #fff;}
.scrollLeft {position: fixed; width: 100px; z-index: 2; top: 330px; left: 170px;}
.scrollLeft li {float: left; margin: 0 10px 50px 0 ; width: 90px; text-align: center; opacity: 0.5; transform: scale(0.8); transition: all 0.5s;}
.scrollLeft li:hover {opacity: 1; transform: scale(1);}
.scrollLeft li.on {opacity: 1; transform: scale(1);}
.scrollLeft li img {position: relative; margin: 0 auto; width: 50px; display: block;}
.scrollLeft li span {font-size: 20px; color: #fff;}
.gnb {position: fixed; top: 50px; right: 50px; z-index: 2;}
.gnb li {float: left; background: black; opacity: 0.6; padding: 5px 20px; border-radius: 5px; margin-left: 10px; transition: all 0.5s;}
.gnb li a { color: #fff; font-size: 16px; transform: scale(1); transition: all 0.5s;}
.gnb li:hover {opacity: 1; transform: scale(1.3);}

section {position: absolute; width: 3350px; height: 750px; top: 50%; margin-top: -350px; margin-left: 200px; perspective: 2300px; z-index:1; }
section>article {width: 3350px; height: 750px; position: absolute; top: 0; left: 0; opacity: 0.3; z-index: 1; font-size: 100px; color: #fff;}
section>article.on {z-index: 2; opacity: 1;}
section>article:nth-child(1) {transform: translateZ(0);}
section>article:nth-child(2) {transform: translateZ(-5000px);}
section>article:nth-child(3) {transform: translateZ(-10000px);}

section>article>div { position: absolute; float: left; width: 1400px; height: 1000px;}
section>article>div:nth-child(2) {right: 0;}
section>article>div img {position: absolute;}
section>article>div h1 {position: absolute; display: block;}
section>article>div em{position: absolute; display: block; font-size: 17px; line-height: 22px;}
.dv1 img:nth-child(1) {left: 200px; top: 100px;}
.dv1 img:nth-child(2) {left: 300px; top: 100px;}
.dv1 img:nth-child(3) {left: 200px; top: 100px;}
.dv1 img:nth-child(4) {left: 400px; top: 100px;}
.dv1>h1 {left: 1000px; top: 450px;}
.dv1>em {text-align: right; right: 150px; top: 580px; width: 500px;}
.dv2 img:nth-child(1) {right: 0; top: 0;}
.dv2 img:nth-child(2) {left: 300px; top: 100px;}
.dv2 img:nth-child(3) {left: 200px; top: 100px;}
.dv2 img:nth-child(4) {left: 400px; top: 100px;}
.dv2>h1 {left: 200px; top: 400px;}
.dv2>em {text-align: left; left: 200px; top: 540px; width: 500px;}
.dv3 img:nth-child(1) {right: 50px; top: 20px;}
.dv3 img:nth-child(2) {left: 100px; top: 100px;}
.dv3 img:nth-child(3) {left: 200px; top: 100px;}
.dv3 img:nth-child(4) {left: 200px; top: 100px;}
.dv3>h1 {left: 150px; top: 400px;}
.dv3>em {text-align: left; left: 150px; top: 540px; width: 600px;}
.dv4 img:nth-child(1) {left: 150px; top: 140px;}
.dv4 img:nth-child(2) {left: 150px; top: 50px;}
.dv4 img:nth-child(3) {left: 100px; top:50px;}
.dv4>h1 {left: 1000px; top: 80px;}
.dv4>em {text-align: right; right: 430px; top: 150px; width: 570px;}
.dv5 img:nth-child(1) {left: 300px; top: 120px;}
.dv5 img:nth-child(2) {left: 200px; top: 0;}
.dv5 img:nth-child(3) {left: 150px; top: 0;}
.dv5>h1 {left: 490px; top: 30px;}
.dv5>em {text-align: center; left: 350px; top: 570px; width: 700px;}
.dv6 img:nth-child(1) {right: 0;}
.dv6 img:nth-child(2) {left: 400px; top: 50px;}
.dv6 img:nth-child(3) {left: 250px; top: 50px;}
.dv6>h1 {left: 140px; top: 200px;}
.dv6>em {text-align: justify; left: 140px; top: 360px; width: 500px;}