@charset "utf-8";

html{
width: 100%;
height: 100%;
overflow: hidden;
}

body{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}

#container #water {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-filter: url(#turbulence);
    filter: url(#turbulence);
    overflow: hidden;
}

#container, #water {
background-image: url(../../../images/bg.png);
background-repeat: no-repeat;
background-position: center 0%;
background-size: cover;
animation:bg 2.8s forwards ease-in-out,bg_2 1.5s 3.5s forwards ease-in-out;
opacity: 100%;
}

@keyframes bg
{
0%{background-image: url(../../../images/bg.png); opacity: 100%;}
100%{background-image: url(../../../images/bg2.png); opacity: 100%;}
}

@keyframes bg_2
{
0%{background-image: url(../../../images/bg2.png); opacity: 100%;}
100%{background-image: url(../../../images/bg.png); opacity: 0%;}
}

#container {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 59%;
    
}

.obj {
    position: absolute;
    right: 11.5%;
    top: 12%;
    width: 570px;
    height: 600px;
    background-image: url(../../../images/obj.png);
    background-repeat: no-repeat;
    background-size: 100%;
	animation:obj 1s forwards ease-in-out,obj_02 1s 3.8s forwards ease-in-out;
}

@keyframes obj
{
from {top:12%;opacity: 0%; }
to {top:9%;opacity: 100%;}
}

@keyframes obj_02
{
from {top:9%;right: 11.5%;opacity: 100%; }
to {top:5.5%;right: 5%;opacity: 0%;}
}

.obj01 {
    position: absolute;
    left: 18%;
    top: 57%;
    width: 300px;
    height: 90px;
    background-image: url(../images/obj01.png);
    background-repeat: no-repeat;
    background-size: 100%;
	opacity: 0%;
	animation:obj01 1s 1.7s forwards ease-in-out,obj01_1 1s 2.7s alternate infinite ease-in-out,obj01_2 1s 4s forwards ease-in-out;

}

@keyframes obj01{
from {left: 18%;opacity: 0%; }
to {left: 20%;opacity: 100%;}
}

@keyframes obj01_1{
from {top: 57%;}
to {top: 57.8%;}
}

@keyframes obj01_2{
from {top: 57.8%;opacity: 100%;}
to {top: 8%;opacity: 0%;}
}

.obj02 {
    position: absolute;
    left: 34%;
    top: 37%;
    width: 200px;
    height: 85px;
    background-image: url(../../../images/obj02.png);
    background-repeat: no-repeat;
    background-size: 100%;
	opacity: 0%;
	animation:obj02 1s 1.5s forwards ease-in-out,obj02_1 1s 2.5s alternate infinite ease-in-out,obj02_2 1.1s 4s forwards ease-in-out;
}

@keyframes obj02{
from {left: 34%;opacity: 0%; }
to {left: 32%;opacity: 100%;}
}

@keyframes obj02_1{
from {top: 37%;}
to {top: 36.5%;}
}

@keyframes obj02_2{
from {top: 36.5%;opacity: 100%}
to {top: 13%;opacity: 0%}
}

.obj03 {
    position: absolute;
    left: 41%;
    top: 48%;
    width: 230px;
    height: 85px;
    background-image: url(../../../images/obj03.png);
    background-repeat: no-repeat;
    background-size: 100%;
	opacity: 0%;
	animation:obj03 1s 1.3s forwards ease-in-out,obj03_1 1s 2s alternate infinite ease-in-out,obj03_2 1.15s 3.9s forwards ease-in-out;
}

@keyframes obj03{
from {left: 41%;opacity: 0%; }
to {left: 42%;opacity: 100%;}
}

@keyframes obj03_1{
from {top: 48%;}
to {top: 48.5%;}
}

@keyframes obj03_2{
from {top: 48.5%;opacity: 100%;}
to {top: 20%;opacity:0%;}
}

.obj04 {
    position: absolute;
    left: 48%;
    top: 62%;
    width: 310px;
    height: 85px;
    background-image: url(../../../images/obj04.png);
    background-repeat: no-repeat;
    background-size: 100%;
	opacity: 0%;
	animation:obj04 1s 1.8s forwards ease-in-out,obj04_1 1s 2.8s alternate infinite ease-in-out,obj04_2 1s 4s forwards ease-in-out;
}

@keyframes obj04{
from {left: 48%;opacity: 0%; }
to {left: 49%;opacity: 100%;}
}

@keyframes obj04_1{
from {top: 62%;}
to {top: 60.5%;}
}

@keyframes obj04_2{
from {top: 60.5%;opacity: 100%;}
to {top: 15%;opacity: 0%;}
}

.obj05 {
    position: absolute;
    right: 24%;
    top: 30%;
    width: 471px;
    height: 120px;
    background-image: url(../../../images/obj05.png);
    background-repeat: no-repeat;
    background-size: 100%;
	opacity: 0%;
	animation:obj05 1.5s 0.8s forwards ease-in-out,obj05_1 1s 2s alternate infinite ease-in-out,obj05_2 1.15s 4s forwards ease-in-out;
}

@keyframes obj05{
from {right: 20%;opacity: 0%; }
to {right: 24%;opacity: 100%;}
}

@keyframes obj05_1{
from {top: 30%;}
to {top: 30.5%;}
}

@keyframes obj05_2{
from {top: 30.5%;opacity: 100%;}
to {top: 13%;opacity: 0%;}
}

.obj06 {
    position: absolute;
    right: 19%;
    top: 45%;
    width: 295px;
    height: 90px;
    background-image: url(../../../images/obj06.png);
    background-repeat: no-repeat;
    background-size: 100%;
	opacity: 0%;
	animation:obj06 1.5s 1.4s forwards ease-in-out,obj06_1 1s 2.4s alternate infinite ease-in-out,obj06_2 1.3s 3.9s forwards ease-in-out;
}

@keyframes obj06{
from {right: 16%;opacity: 0%; }
to {right: 19%;opacity: 100%;}
}

@keyframes obj06_1{
from {top: 45%;}
to {top: 45.8%;}
}

@keyframes obj06_2{
from {top: 45.8%;opacity: 100%;}
to {top: 19%;opacity: 0%;}
}


.YNlogo {
    position: absolute;
    width: 5%;
    top: 3%;
    left: 2%;
    z-index: 1;
	opacity: 0%;
	animation:YNlogo 1.3s 2s forwards ease-in-out;
}

@keyframes YNlogo{
from {left: 0%;opacity: 0%; }
to {left: 2%;opacity: 100%;}
}

.YNlogo img, .digLogo_ind img {
    width: 100%;
}

.digLogo_ind {
    position: absolute;
    width: 27%;
    top: 16%;
    left: 5%;
    z-index: 1;
	height: 19%;
}

.diglo_zh {
    background-image: url(../../../images/tti_zh.png);
    background-repeat: no-repeat;
    width: 61%;
    height: 45%;
    margin: 0 0 0px 0;
    background-size: 100%;
	opacity: 0%;
	animation:diglo_zh 1s 3.2s forwards ease-in-out;
	top: 0%;
	position: absolute;
}

@keyframes diglo_zh{
from {top: -5%;opacity: 0%; }
to {top: 0%;opacity: 100%;}
}

.diglo_en {
    background-image: url(../../../images/tti_en.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 50%;
    background-size: 100%;
	bottom: 0%;
	opacity: 0%;
	position: absolute;
	animation:diglo_en 1s 3.2s forwards ease-in-out,diglo_en2 0.2s 4.65s forwards ease-out;
	transition: a11 0.3s;
}

@keyframes diglo_en{
from {bottom: -5%;opacity: 0%;background-image: url(../images/tti_en.png);}
to {bottom: 0%;opacity: 100%;background-image: url(../images/tti_en.png);}
}

@keyframes diglo_en2{
from {background-image: url(../../../images/tti_en.png);transition: a11 0.3s; }
to {background-image: url(../../../images/tti_en2.png);transition: a11 0.3s;}
}

.ind_bx01{
position: absolute;
left: 0%;
bottom: 0%;
background-image: url(../../../images/ex01.png);
background-repeat: no-repeat;
background-size: cover;
width: 55%;
height: 100%;
opacity: 0%;
animation:ind_bx01 1.1s 4s forwards ease-in-out;
}

@keyframes ind_bx01{
from {bottom: -95%;opacity: 100%; }
to {bottom: 0%;opacity: 100%;}
}

.ind_bx02 {
    position: absolute;
    left: 55%;
    top: 0%;
    background-image: url(../../../images/ex02.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 22.5%;
    height: 60%;
	border-bottom: 1px solid #fff;
    border-left: 5px solid #fff;
    opacity: 0%;
    animation: ind_bx02 1.2s 4.8s forwards ease-in-out; 
}

@keyframes ind_bx02{
from {top: 10%;opacity: 0%; }
to {top: 0%;opacity: 100%;}
}

.ind_bx03 {
    position: absolute;
    left: 55%;
    bottom: 0%;
    background-image: url(../../../images/ex03.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 22.5%;
    height: 40%;
	border-top: 5px solid #fff;
    border-left: 5px solid #fff;
    opacity: 0%;
    animation: ind_bx03 1.2s 4.8s forwards ease-in-out;   
}

@keyframes ind_bx03{
from {bottom: 10%;opacity: 0%; }
to {bottom: 0%;opacity: 100%;}
}

.ind_bx04 {
    position: absolute;
    right: 0%;
    top: 0%;
    background-image: url(../../../images/ex04.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 22%;
    height: 40%;
    
	border-bottom: 1px solid #fff;
    opacity: 0%;
    animation: ind_bx04 1s 5s forwards ease-in-out;   
}

@keyframes ind_bx04{
from {top: -5%;opacity: 0%;}
to {top: 0%;opacity: 100%;}
}

.ind_bx05{
    position: absolute;
    right: 0%;
    bottom: 0%;
    background-image: url(../../../images/ex05.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 22%;
    height: 60%;
    
	border-top: 5px solid #fff;
    opacity: 0%;
    animation: ind_bx05 1s 5s forwards ease-in-out;   
}

@keyframes ind_bx05{
from {bottom: -5%;opacity: 0%;}
to {bottom: 0%;opacity: 100%;}
}


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

.obj,.obj01,.obj02,.obj03,.obj04,.obj05,.obj06{
zoom:87%;
} 

}

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

.obj,.obj01,.obj02,.obj03,.obj04,.obj05,.obj06{
zoom:82%;
} 

}


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

.obj, .obj01, .obj02, .obj03, .obj04, .obj05, .obj06 {
    zoom: 50%;
	margin-top: 20%;
}

.obj03 {
	margin-top: 25%;
}

.ind_bx01 {
    left: 0%;
    bottom: inherit;
    width: 100%;
    height: 435px;
    top: 0px;
	background-image: url(../../../images/ex01_rwd.png);
}

@keyframes ind_bx01{
from {top: -95%;opacity: 100%; }
to {top: 0%;opacity: 100%;}
}

.ind_bx02 {
    position: absolute;
    left: 0%;
    top: 440px;
    width: 50%;
    height: 230px;
	border-bottom: 1px solid #fff;
    border-left: none;
	border-right: 5px solid #fff;
	background-image: url(../../../images/ex02_rwd.png);
}

@keyframes ind_bx02{
from {top: 460px;opacity: 0%; }
to {top: 440px;opacity: 100%;}
}

.ind_bx03 {
    left: 51%;
    bottom: inherit;
    top: 440px;
    width: 49%;
    height: 230px;
    border-top: none;
    border-left: none;
	background-image: url(../../../images/ex03_rwd.png);
}

@keyframes ind_bx03{
from {top: 460px;opacity: 0%; }
to {top: 440px;opacity: 100%;}
}

.ind_bx04 {
    right: inherit;
	left: 0%;
    top: 675px;
    width: 50%;
    height: 235px;
	border-bottom: none;
	background-image: url(../../../images/ex04_rwd.png);	
}

@keyframes ind_bx04{
from {top: 685px;opacity: 0%;}
to {top: 675px;opacity: 100%;}
}

.ind_bx05{
    right: 0%;
    bottom: inherit;
	top: 675px;
    width: 49%;
    height: 235px;
	border-top: none;
    opacity: 0%;
	background-image: url(../../../images/ex05_rwd.png);
}

@keyframes ind_bx05{
from {top: 685px;opacity: 0%;}
to {top: 675px;opacity: 100%;}
}


.digLogo_ind {
    width: 75%;
    top: 13%;
    left: 5%;
    z-index: 1;
    height: 15%;
}

.YNlogo {
    width: 18%;
    top: 3%;
    left: 5%;
}

@keyframes YNlogo{
from {left: 0%;opacity: 0%; }
to {left: 5%;opacity: 100%;}
}

#container, #water {
    background-image: url(../images/bg.png);
    background-position: 43% 0%;
    background-size: cover;
}

}