﻿@charset "utf-8";
#wrap{position:relative; height:100%;}
#container{overflow:hidden; max-width:709px; margin:0 auto;}
#container > #content{height:100%;}
#container > #content > section{position:relative;}
#container > #content > section > .inbox{height:100%;}

#content section {position:relative; width:100%;margin-bottom:-3px}
#content section img {max-width:100%;}

/* section 2 */
.sec2_txt .sec2_box{position:absolute; width:100%; left:50%; opacity:0; -webkit-transform:translateY(50%); -ms-transform:translateY(50%); -o-transform:translateY(50%); transform:translateY(50%); -webkit-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out;}
.sec2_txt .sec2_img{width:100%; height:100%}
.sec2_txt .sec2_box:nth-child(1) .sec2_img {width:70%; margin-left:-32%;padding-bottom:3%}
.sec2_txt .sec2_box:nth-child(2) .sec2_img {width:3%; margin-left:-1%;padding-bottom:3%}
.sec2_txt .sec2_box:nth-child(3) .sec2_img {width:35%; margin-left:-17% }
.sec2_txt .sec2_box:nth-child(4) .sec2_img {width:35%; margin-left:-17% }

.sec2_txt .sec2_box.active{opacity:1; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}
.sec2_txt .sec2_box.active:nth-child(1) {-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;}
.sec2_txt .sec2_box.active:nth-child(2) {-webkit-transition-delay:1s; -o-transition-delay:1s; transition-delay:1s;} 
.sec2_txt .sec2_box.active:nth-child(3) {-webkit-transition-delay:1.5s; -o-transition-delay:1.5s; transition-delay:1.5s;} 
.sec2_txt .sec2_box.active:nth-child(4) {-webkit-transition-delay:2s; -o-transition-delay:2s; transition-delay:2s;} 

.sec2_mo1{top:4%;}
.sec2_mo2{top:8%;}
.sec2_mo3{top:13%;}
.sec2_mo4{top:16%;}

.sec2_bg2 .sec2_box{position:absolute; width:40%; left:50%; opacity:0; -webkit-transform:translateY(50%); -ms-transform:translateY(50%); -o-transform:translateY(50%); transform:translateY(50%); -webkit-transition:all .6s ease-out; -o-transition:all .6s ease-out; transition:all .6s ease-out;}
/*.sec2_bg2 .sec2_box:first-child{width:85%; text-align:center}
.sec2_bg2 .sec2_box:first-child .sec2_img:nth-child(1) {width:100%; margin-left:-48%;padding-bottom:2%}
.sec2_bg2 .sec2_box:first-child .sec2_img:nth-child(2) {width:5%; margin-left:-4%;padding-bottom:2%}
.sec2_bg2 .sec2_box:first-child .sec2_img:nth-child(3) {width:35%; margin-left:-18% }
.sec2_bg2 .sec2_box:first-child .sec2_img:nth-child(4) {width:35%; margin-left:-18% }*/

.sec2_bg2 .sec2_box:last-child{width:70%}
.sec2_box .sec2_img{width:100%; height:100%;/* -webkit-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5); -webkit-transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);*/}

.sec2_mo5{top:41.5%; margin-left:-42%;}
.sec2_mo6{top:54.3%; margin-left:5%;}
.sec2_mo7{bottom:0; margin-left:-35% }
/*.sec2_mo1{top:5%; }*/

.sec2_bg2 .sec2_box.active{opacity:1; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}
/*.sec2_bg2 .sec2_box.active .sec2_img{-webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}*/

/* section 3 */
.sec3_bg2 .sec3_box{position:absolute; width:100%; left:50%; opacity:0; -webkit-transform:translateY(50%); -ms-transform:translateY(50%); -o-transform:translateY(50%); transform:translateY(50%); -webkit-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .4s ease-out;}
.sec3_box .sec3_img{width:100%; height:100%;/* -webkit-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5); -webkit-transition:all .3s .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);*/}

.sec3_bg2 .sec3_box.active{opacity:1; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}
/*.sec3_bg2 .sec3_box.active .sec3_img{opacity:1; -webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}*/
.sec3_bg2 .sec3_box.active:nth-child(1) {-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;}
.sec3_bg2 .sec3_box.active:nth-child(2) {-webkit-transition-delay:1s; -o-transition-delay:1s; transition-delay:1s;} 
.sec3_bg2 .sec3_box.active:nth-child(3) {-webkit-transition-delay:1.5s; -o-transition-delay:1.5s; transition-delay:1.5s;} 
.sec3_bg2 .sec3_box.active:nth-child(4) {-webkit-transition-delay:2s; -o-transition-delay:2s; transition-delay:2s;} 

.sec3_mo1{top:39%; margin-left:-25%;}
.sec3_mo1 .sec3_img{width:13%}
.sec3_mo2{top:39%; margin-left:16%;}
.sec3_mo2 .sec3_img{width:12%}
.sec3_mo6{top:51.5%; margin-left:-32%;}
.sec3_mo6 .sec3_img{width:25%}
.sec3_mo7{top:51%; margin-left:12%;}
.sec3_mo7 .sec3_img{width:20%}

.sec3_bg3 .sec3_box2{position:absolute; width:100%; left:50%;}
.sec3_box2 .sec3_img{width:100%; height:100%;}
.sec3_mo3{top:58%; margin-left:-33%;}
.sec3_mo3 .sec3_img{width:31%}
.sec3_mo4{top:58%; margin-left:3%}
.sec3_mo4 .sec3_img{width:35%}
.sec3_mo5{top:58%; margin-left:28%}
.sec3_mo5 .sec3_img{width:10%}

/*.sec3_mo3 .sec3_img img{-webkit-animation: hmove 2s 1s infinite;-moz-animation:hmove 2s 1s infinite;-o-animation:hmove 2s 1s infinite;animation:hmove 2s 1s infinite;}
@-webkit-keyframes hmove {0%{transform: translateX(0);}50%{transform: translateX(-5%);}100%{transform: translateX(0);}}
@-moz-keyframes hmove {0%{transform: translateX(0);}50%{transform: translateX(-5%);}100%{transform: translateX(0);}}
@keyframes hmove {0%{transform: translateX(0);}50%{transform: translateX(-5%);}100%{transform: translateX(0);}}*/

/*
.sec3_mo4 .sec3_img img{-webkit-animation: hmove2 2s 1s infinite;-moz-animation:hmove2 2s 1s infinite;-o-animation:hmove2 2s 1s infinite;animation:hmove2 2s 1s infinite;}

@-webkit-keyframes hmove2 {
	  0%  {-webkit-transform: rotate(0deg);}
	 50%  {-webkit-transform: rotate(-24deg);}
	100% {-webkit-transform: rotate(0deg);}
}
@-moz-keyframes hmove2 {
	  0%  {-moz-transform: rotate(0deg);}
	   0%  {-moz-transform: rotate(-24deg);}
	100% {-moz-transform: rotate(0deg);}
}
@keyframes hmove2 {
	  0%  {transform:: rotate(0deg);}
	 50%  {transform: rotate(-24deg);}
	100% {transform:: rotate(0deg);}
}*/
	
/* section 4 */
.sec4_bg2 .sec4_box{position:absolute; width:100%; left:50%; opacity:0; -webkit-transform:translateY(50%); -ms-transform:translateY(50%); -o-transform:translateY(50%); transform:translateY(50%); -webkit-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out;}
.sec4_box .sec4_img{width:100%; height:100%;/*-webkit-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5); -webkit-transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);*/}

.sec4_bg2 .sec4_box.active{opacity:1; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}
/*.sec4_bg2 .sec4_box.active .sec4_img{-webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}*/

.sec4_bg2 .sec4_mo6.active {-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;}
.sec4_bg2 .sec4_mo7.active {-webkit-transition-delay:1s; -o-transition-delay:1s; transition-delay:1s;} 
.sec4_bg2 .sec4_mo8.active {-webkit-transition-delay:1.5s; -o-transition-delay:1.5s; transition-delay:1.5s;} 
.sec4_bg2 .sec4_mo9.active {-webkit-transition-delay:2s; -o-transition-delay:2s; transition-delay:2s;} 

.sec4_mo1{top:28%; margin-left:-19%;}
.sec4_mo1 .sec4_img{width:42.2%}
.sec4_bg2 .sec4_mo1.active {-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;} 
.sec4_mo2{top:31.1%; margin-left:-11.5%;}
.sec4_mo2 .sec4_img{width:35%}
/*.sec4_bg2 .sec4_mo2.active {-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;} */
.sec4_mo3{top:10%; margin-left:-13%;}
.sec4_mo3 .sec4_img{width:38%}
.sec4_mo4{top:45%; margin-left:-20%}
.sec4_mo4 .sec4_img{width:53%}
.sec4_mo5{top:68%; margin-left:-9%}
.sec4_mo5 .sec4_img{width:38%}
.sec4_mo6{top:82%; margin-left:-41%}
.sec4_mo6 .sec4_img{width:20%}
.sec4_mo7{top:82%; margin-left:-20%}
.sec4_mo7 .sec4_img{width:20%}
.sec4_mo8{top:81.9%; margin-left:1%}
.sec4_mo8 .sec4_img{width:21%}
.sec4_mo9{top:82.2%; margin-left:22%}
.sec4_mo9 .sec4_img{width:18%}

.sec4_bg2 .sec4_box2{position:absolute; width:100%; left:49.7%;}
.sec4_box2 .sec4_img2{width:100%; height:100%;}
.sec4_pt1{top:6%; margin-left:0%;}
.sec4_pt1 .sec4_img2{width:6%}
.sec4_pt2{top:13%; margin-left:34%;}
.sec4_pt2 .sec4_img2{width:6%}
.sec4_pt3{top:33.3%; margin-left:-39%;}
.sec4_pt3 .sec4_img2{width:6%}
.sec4_pt4{top:69.9%; margin-left:34%;}
.sec4_pt4 .sec4_img2{width:6%}
.sec4_pt5{top:79.7%; margin-left:-20%;}
.sec4_pt5 .sec4_img2{width:6%}

/* section 5 */
.sec5_bg2{}
.sec5_bg2 .sec5_bg2_img{position:absolute; width:100%; top:0;left:0; opacity:0; -webkit-transition:all 4s; -o-transition:all 4s; transition:all 4s;}
.sec5_bg2 .sec5_bg2_img.active{opacity:1;}

.sec5_bg3 .sec5_box{position:absolute; width:100%; left:50%; opacity:0; -webkit-transform:translateY(30%); -ms-transform:translateY(30%); -o-transform:translateY(30%); transform:translateY(30%); -webkit-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .4s ease-out;}
.sec5_box .sec5_img{width:100%; height:100%; /*-webkit-transform:scale(0.25); -ms-transform:scale(0.25); -o-transform:scale(0.25); transform:scale(0.25); -webkit-transition:all .3s .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);*/}

.sec5_bg3 .sec5_mo3.active {-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;}
.sec5_bg3 .sec5_mo4.active {-webkit-transition-delay:1s; -o-transition-delay:1s; transition-delay:1s;} 
.sec5_bg3 .sec5_mo5.active {-webkit-transition-delay:1.5s; -o-transition-delay:1.5s; transition-delay:1.5s;} 

/*.sec5_bg3 .sec5_box{position:absolute; width:100%; left:50%;}
.sec5_box .sec5_img{width:100%; height:100%;}*/
.sec5_mo3{top:40%; margin-left:-18%;}
.sec5_mo3 .sec5_img{width:40%}
.sec5_mo4{top:45%; margin-left:-18%}
.sec5_mo4 .sec5_img{width:40%}
.sec5_mo5{top:54%; margin-left:-18%}
.sec5_mo5 .sec5_img{width:40%}

.sec5_bg3 .sec5_box.active{opacity:1; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}
/*.sec5_bg3 .sec5_box.active .sec5_img{-webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}*/

/* section 6 */
.sec6_bg2 .sec6_box{position:absolute; width:100%; left:20%;  /*opacity:0;-webkit-transform:translateY(1%); -ms-transform:translateY(1%); -o-transform:translateY(1%); transform:translateY(1%); -webkit-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out;*/}
.sec6_box .sec6_img{width:100%; height:100%; -webkit-transform:scale(0); -ms-transform:scale(0); -o-transform:scale(0); transform:scale(0); -webkit-transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .2s .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}

/*.sec6_bg2 .sec6_box.active{opacity:1; -webkit-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px);}*/
.sec6_bg2 .sec6_box.active .sec6_img{-webkit-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;}

.sec6_mo1{top:25%;}
.sec6_mo1 .sec6_img{width:60%}

/* section 7 */
.sec7_bg2 .sec7_box{position:absolute; width:100%; left:50%;}
.sec7_box .sec7_img{width:100%; height:100%; opacity:0}
.sec7_mo1{top:15%;margin-left:-31%}
.sec7_mo1 .sec7_img{width:65%}
.sec7_mo2{top:23%;margin-left:-13%}
.sec7_mo2 .sec7_img{width:25%}
.sec7_mo3{bottom:10%;margin-left:-32%}
.sec7_mo3 .sec7_img{width:70%}

.sec7_bg2 .sec7_box .sec7_img.active{opacity:1; -webkit-transition:all 1.5s ease-in; -o-transition:all 1s ease-in; transition:all 1s ease-in;}
.sec7_bg2 .sec7_box .sec7_img:nth-child(1).active{-webkit-transition-delay:0.5s; -o-transition-delay:0.5s; transition-delay:0.5s;}
.sec7_bg2 .sec7_box .sec7_img:nth-child(2).active{-webkit-transition-delay:2s; -o-transition-delay:2s; transition-delay:2s;}
.sec7_bg2 .sec7_box .sec7_img:nth-child(3).active{-webkit-transition-delay:1s; -o-transition-delay:1s; transition-delay:1s;}

/* section 9 */
.sec9_bg2 .sec9_box{position:absolute; width:100%; left:50%; bottom:5%}
.sec9_box .sec9_img{width:100%;cursor:pointer}
.sec9_mo1{top:18%; margin-left:-43.1%;}
.sec9_mo1 .sec9_img{width:17%;}
.sec9_mo2{top:71%; margin-left:27.5%;}
.sec9_mo2 .sec9_img{width:17%}
.sec9_mo3{top:29.6%; margin-left:-43.1%;}
.sec9_mo3 .sec9_img{width:17%}
.sec9_mo4{top:26.9%; margin-left:27.5%}
.sec9_mo4 .sec9_img{width:17%}
.sec9_mo5{top:71%; margin-left:-43.1%}
.sec9_mo5 .sec9_img{width:17%}

.sec9_bg3 .sec9_img{position:absolute; width:100%; left:0; bottom:5%}


@media screen and (max-width:350px) {}

@media screen and (min-width : 414px) {}

@media screen and (min-width : 768px) {}

@-webkit-keyframes mw {
	0% {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
	100% {opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);}
}
@-moz-keyframes mw {
	0% {opacity: 1; -moz-transform: translateY(0); transform: translateY(0);}
	100% {opacity: 0; -moz-transform: translateY(20px); transform: translateY(20px);}
}
@keyframes mw {
	0% {opacity: 1; transform: translateY(0);}
	100% {opacity: 0;transform: translateY(20px);}
}
/* mouse-scroll */
@-webkit-keyframes mw {
	0% { opacity: 0;} 50% { opacity: .5;} 100% { opacity: 1;}
}
@-moz-keyframes mw {
	0% { opacity: 0;} 50% { opacity: .5;} 100% { opacity: 1;}
}
@keyframes mw {
	0% { opacity: 0;} 50% { opacity: .5;} 100% { opacity: 1;}
}