@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background:#fff;
	-webkit-text-size-adjust: 100% !important;	/* iOS禁止微信改变字号 */
}

@media only screen and (max-height: 938px) { body{ font-size: 15px !important; } }
@media only screen and (max-height: 875px) { body{ font-size: 14px !important; } }
@media only screen and (max-height: 813px) { body{ font-size: 13px !important; } }
@media only screen and (max-height: 750px) { body{ font-size: 12px !important; } }
@media only screen and (max-height: 688px) { body{ font-size: 11px !important; } }
@media only screen and (max-height: 625px) { body{ font-size: 10px !important; } }

a{
	color:#c00;
}

a:hover{
	text-decoration: none;
	color: #c00 !important;
}

.fw{
	color: #fff;
}

.fw a{
	color: #fff;
}

.fw a:hover{
	color: #dfdfdf !important;
}

img{
	display:block;
	max-height: 100%;
	max-width: 100%;
}

h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
}

p,li{
	overflow:hidden;
}

table{
	font-size: 1em;
}

.photo{
	position: relative;
	overflow: hidden;
}

.photo img{
	width: 100%;
	height: 100%;
}

.photo p{
	position: absolute;
	left: 0px;
	bottom : 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abs{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 1;
}

.abs0{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}

.abs0 b,.abs b,.abs0 i,.abs i{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

#loading{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: url("loading/loading.jpg") no-repeat center center;
	background-size: cover;
	z-index: 9999;
}

#loading .num{
	position: absolute;
	width: 100%;
	top: 30%;
	left: 0%;
	text-align: center;
	color: #387c70;
	font-weight: bold;
	font-size: 4.6em;
	line-height: 1.2em;
}

#start{
	width: 11.4%;
	height: 20.2%;
	left: 43.5%;
	top: 42.7%;
	display: none;
}

#start i{
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-image: url("loading/start.png");
	cursor: pointer;
}

#page{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#main{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	overflow: hidden;
	background-color: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#bg-video{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0%;
	object-fit: cover;
	object-position: center center;
	background: none;
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#page1,
#page2,
#page3{
	width: 100%;
	height: 100%;
	left: -100%;
	top: -100%;
	opacity: 0;
}

@keyframes page-current{
	from{ }
	0.01%{ left: 0%; top: 0%; opacity: 0; }
	to{ left: 0%; top: 0%; opacity: 1; }
}
#page1.current,
#page2.current,
#page3.current{
	animation:'page-current' 0.5s ease-in-out 0s forwards;
	-ms-animation:page-current 0.5s ease-in-out 0s forwards;
	-moz-animation:page-current 0.5s ease-in-out 0s forwards;
	-o-animation:'page-current' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'page-current' 0.5s ease-in-out 0s forwards;
}

#enter{
	width: 5.0%;
	height: 8.8%;
	left: 47.5%;
	bottom: -50%;
	cursor: pointer;
	transition: opacity 0.2s;
}

#enter i{
	background-image: url("images/enter.png");
}

#enter.on{
	opacity: 1;
	bottom: 25.3%;
	z-index: 1111;
	transform: translateZ(100em);
}

#skip{
	width: 5.0%;
	height: 8.8%;
	right: 4.2%;
	top: -50%;
	cursor: pointer;
	transition: opacity 0.2s;
}

#skip i{
	background-image: url("images/skip.png");
}

#skip.on{
	top: 5.9%;
	opacity: 1;
	z-index: 1111;
	transform: translateZ(100em);
}

@keyframes btn-shake{
	from{ }
	50%{ transform: scale(1.08); }
	to{ }
}
#start i,
#enter i{
	animation:'btn-shake' 2.0s linear 0s infinite;
	-ms-animation:btn-shake 2.0s linear 0s infinite;
	-moz-animation:btn-shake 2.0s linear 0s infinite;
	-o-animation:'btn-shake' 2.0s linear 0s infinite;
	-webkit-animation:'btn-shake' 2.0s linear 0s infinite;
}

.intro-title{
	width: 7.0%;
	height: 71.8%;
	left: 11.9%;
	top: 14.6%;
	background-image: url("images/intro-title.png");
}

.intro-text{
	width: 58.3%;
	height: 71.8%;
	left: 21.1%;
	top: 14.6%;
	background-image: url("images/intro-text.png");
}

.next-btn{
	width: 5.4%;
	height: 9.6%;
	left: 80.0%;
	top: 45.2%;
	cursor: pointer;
}

.next-btn i{
	background-image: url("images/next-btn.png");
}

@keyframes next-shake{
	from{ }
	50%{ transform: scale(1.08); }
	to{ }
}
.next-btn i{
	animation:'next-shake' 2.0s linear 0s infinite;
	-ms-animation:next-shake 2.0s linear 0s infinite;
	-moz-animation:next-shake 2.0s linear 0s infinite;
	-o-animation:'next-shake' 2.0s linear 0s infinite;
	-webkit-animation:'next-shake' 2.0s linear 0s infinite;
}

.back-btn{
	width: 5.4%;
	height: 9.6%;
	left: 4.2%;
	top: 5.9%;
	cursor: pointer;
}

.back-btn i{
	background-image: url("images/back-btn.png");
	transition: transform 0.2s;
}

.back-btn:hover i{
	transform: scale(1.05);
}

@keyframes intro-title{
	from{ transform: translateX(-100%); }
	to{ opacity: 1; z-index: 2222; transform: translateZ(200em); }
}

.current .intro-title{
	animation:'intro-title' 0.5s ease-in-out 0s forwards;
	-ms-animation:intro-title 0.5s ease-in-out 0s forwards;
	-moz-animation:intro-title 0.5s ease-in-out 0s forwards;
	-o-animation:'intro-title' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'intro-title' 0.5s ease-in-out 0s forwards;
	z-index: 2222; transform: translateZ(200em);
}

@keyframes intro-text{
	from{ transform: translateX(30%); }
	to{ opacity: 1; z-index: 2222; transform: translateZ(200em); }
}

.current .intro-text{
	animation:'intro-text' 0.5s ease-in-out 0s forwards;
	-ms-animation:intro-text 0.5s ease-in-out 0s forwards;
	-moz-animation:intro-text 0.5s ease-in-out 0s forwards;
	-o-animation:'intro-text' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'intro-text' 0.5s ease-in-out 0s forwards;
	z-index: 2222; transform: translateZ(200em);
}

@keyframes p2-btn{
	from{  }
	to{ opacity: 1; z-index: 2222; transform: translateZ(200em); }
}

.current .next-btn,
#page2.current .back-btn{
	animation:'p2-btn' 0.5s ease-in-out 0.4s forwards;
	-ms-animation:p2-btn 0.5s ease-in-out 0.4s forwards;
	-moz-animation:p2-btn 0.5s ease-in-out 0.4s forwards;
	-o-animation:'p2-btn' 0.5s ease-in-out 0.4s forwards;
	-webkit-animation:'p2-btn' 0.5s ease-in-out 0.4s forwards;
	z-index: 2222; transform: translateZ(200em);
}

.main-topic{
	width: 10.0%;
	height: 26.9%;
	left: 41.8%;
	top: 39.8%;
	background-image: url("images/main-topic.png");
}

.main-house{
	width: 20.6%;
	height: 14.5%;
	left: 38.2%;
	top: 72.4%;
	background-image: url("images/main-house.png");
}

.main-line{
	background-size: 100% 100%;
}

.main-line.line1{
	width: 28.0%;
	height: 47.7%;
	left: 17.1%;
	top: 13.5%;
	background-image: url("images/main-line1.png");
}

.main-line.line2{
	width: 34.8%;
	height: 40.2%;
	left: 44.8%;
	top: 16.2%;
	background-image: url("images/main-line2.png");
}

.main-line.line3{
	width: 7.4%;
	height: 15.9%;
	left: 30.4%;
	top: 65.3%;
	background-image: url("images/main-line3.png");
}

.main-line.line4{
	width: 14.5%;
	height: 17.9%;
	left: 57.6%;
	top: 63.1%;
	background-image: url("images/main-line4.png");
}

.main-people{
	width: 20%;
	height: 14.2%;
}

.main-people.people1{ left: 21.4%; top: 9.4%; }
.main-people.people2{ left: 42.1%; top: 6.5%; }
.main-people.people3{ left: 11.3%; top: 27.6%; }
.main-people.people4{ left: 10.9%; top: 51.1%; }
.main-people.people5{ left: 59.4%; top: 26.8%; }
.main-people.people6{ left: 66.7%; top: 9.1%; }
.main-people.people7{ left: 79.2%; top: 28.6%; }
.main-people.people8{ left: 68.8%; top: 50.0%; }

.main-people .pic{
	width: 26.2%;
	height: 100%;
	left: 0px;
	top: 0px;
	cursor: pointer;
}

.main-people .pic i{ background-image: url("images/main-circle.png"); }

@keyframes main-people-shake1{
	from{ }
	50%{ transform: scale(1.08); }
	to{ }
}
.main-people .pic i{
	animation:'main-people-shake1' 2.0s linear 0s infinite;
	-ms-animation:main-people-shake1 2.0s linear 0s infinite;
	-moz-animation:main-people-shake1 2.0s linear 0s infinite;
	-o-animation:'main-people-shake1' 2.0s linear 0s infinite;
	-webkit-animation:'main-people-shake1' 2.0s linear 0s infinite;
}

.main-people.people1 .pic b{ background-image: url("images/main-pic1-photo.png"); }
.main-people.people2 .pic b{ background-image: url("images/main-pic2-photo.png"); }
.main-people.people3 .pic b{ background-image: url("images/main-pic3-photo.png"); }
.main-people.people4 .pic b{ background-image: url("images/main-pic4-photo.png"); }
.main-people.people5 .pic b{ background-image: url("images/main-pic5-photo.png"); }
.main-people.people6 .pic b{ background-image: url("images/main-pic6-photo.png"); }
.main-people.people7 .pic b{ background-image: url("images/main-pic7-photo.png"); }
.main-people.people8 .pic b{ background-image: url("images/main-pic8-photo.png"); }

@keyframes main-people-shake2{
	from{ }
	50%{ transform: translateY(-0.5em); }
	to{ }
}
.main-people .pic b{
	animation:'main-people-shake2' 2.0s linear 0s infinite;
	-ms-animation:main-people-shake2 2.0s linear 0s infinite;
	-moz-animation:main-people-shake2 2.0s linear 0s infinite;
	-o-animation:'main-people-shake2' 2.0s linear 0s infinite;
	-webkit-animation:'main-people-shake2' 2.0s linear 0s infinite;
}

.main-people .text{
	left: 28.9%;
	top: 21.2%;
	cursor: pointer;
	background-position: left center;
}

.main-people.people1 .text{ width: 53.4%; height: 92.8%; background-image: url("images/main-text1.png"); }
.main-people.people2 .text{ width: 50.1%; height: 72.2%; background-image: url("images/main-text2.png"); }
.main-people.people3 .text{ width: 59.4%; height: 59.8%; background-image: url("images/main-text3.png"); }
.main-people.people4 .text{ width: 49.2%; height: 73.9%; background-image: url("images/main-text4.png"); }
.main-people.people5 .text{ width: 55.6%; height: 78.1%; background-image: url("images/main-text5.png"); }
.main-people.people6 .text{ width: 66.3%; height: 78.8%; background-image: url("images/main-text6.png"); }
.main-people.people7 .text{ width: 52.8%; height: 73.2%; background-image: url("images/main-text7.png"); }
.main-people.people8 .text{ width: 71.1%; height: 74.2%; background-image: url("images/main-text8.png"); }

@keyframes main-topic{
	from{ transform: translateY(-50%); }
	to{ opacity: 1; z-index: 3333; transform: translateZ(300em); }
}

.current .main-topic{
	animation:'main-topic' 0.5s ease-in-out 0s forwards;
	-ms-animation:main-topic 0.5s ease-in-out 0s forwards;
	-moz-animation:main-topic 0.5s ease-in-out 0s forwards;
	-o-animation:'main-topic' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'main-topic' 0.5s ease-in-out 0s forwards;
	z-index: 3333; transform: translateZ(300em);
}

@keyframes main-house{
	from{ transform: translateY(100%); }
	to{ opacity: 1; z-index: 3333; transform: translateZ(300em); }
}

.current .main-house{
	animation:'main-house' 0.5s ease-in-out 0s forwards;
	-ms-animation:main-house 0.5s ease-in-out 0s forwards;
	-moz-animation:main-house 0.5s ease-in-out 0s forwards;
	-o-animation:'main-house' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'main-house' 0.5s ease-in-out 0s forwards;
	z-index: 3333; transform: translateZ(300em);
}

@keyframes main-line{
	from{ }
	to{ opacity: 1; z-index: 3333; transform: translateZ(300em); }
}

.current .main-line{
	animation:'main-line' 0.5s ease-in-out 0.4s forwards;
	-ms-animation:main-line 0.5s ease-in-out 0.4s forwards;
	-moz-animation:main-line 0.5s ease-in-out 0.4s forwards;
	-o-animation:'main-line' 0.5s ease-in-out 0.4s forwards;
	-webkit-animation:'main-line' 0.5s ease-in-out 0.4s forwards;
	z-index: 3333; transform: translateZ(300em);
}

@keyframes main-people{
	from{ transform: translateY(5%); }
	to{ opacity: 1; z-index: 3366; transform: translateZ(366em); }
}

.current .people1,
.current .people8{
	animation:'main-people' 0.5s ease-in-out 0.8s forwards;
	-ms-animation:main-people 0.5s ease-in-out 0.8s forwards;
	-moz-animation:main-people 0.5s ease-in-out 0.8s forwards;
	-o-animation:'main-people' 0.5s ease-in-out 0.8s forwards;
	-webkit-animation:'main-people' 0.5s ease-in-out 0.8s forwards;
	z-index: 3366; transform: translateZ(366em);
}
.current .people2,
.current .people7{
	animation:'main-people' 0.5s ease-in-out 0.9s forwards;
	-ms-animation:main-people 0.5s ease-in-out 0.9s forwards;
	-moz-animation:main-people 0.5s ease-in-out 0.9s forwards;
	-o-animation:'main-people' 0.5s ease-in-out 0.9s forwards;
	-webkit-animation:'main-people' 0.5s ease-in-out 0.9s forwards;
	z-index: 3366; transform: translateZ(366em);
}
.current .people3,
.current .people6{
	animation:'main-people' 0.5s ease-in-out 1.0s forwards;
	-ms-animation:main-people 0.5s ease-in-out 1.0s forwards;
	-moz-animation:main-people 0.5s ease-in-out 1.0s forwards;
	-o-animation:'main-people' 0.5s ease-in-out 1.0s forwards;
	-webkit-animation:'main-people' 0.5s ease-in-out 1.0s forwards;
	z-index: 3366; transform: translateZ(366em);
}
.current .people4,
.current .people5{
	animation:'main-people' 0.5s ease-in-out 1.1s forwards;
	-ms-animation:main-people 0.5s ease-in-out 1.1s forwards;
	-moz-animation:main-people 0.5s ease-in-out 1.1s forwards;
	-o-animation:'main-people' 0.5s ease-in-out 1.1s forwards;
	-webkit-animation:'main-people' 0.5s ease-in-out 1.1s forwards;
	z-index: 3366; transform: translateZ(366em);
}

@keyframes p3-btn{
	from{  }
	to{ opacity: 1; z-index: 3333; transform: translateZ(300em); }
}

#page3.current .back-btn{
	animation:'p3-btn' 0.5s ease-in-out 1.1s forwards;
	-ms-animation:p3-btn 0.5s ease-in-out 1.1s forwards;
	-moz-animation:p3-btn 0.5s ease-in-out 1.1s forwards;
	-o-animation:'p3-btn' 0.5s ease-in-out 1.1s forwards;
	-webkit-animation:'p3-btn' 0.5s ease-in-out 1.1s forwards;
	z-index: 3333; transform: translateZ(300em);
}

.person{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: -100%;
	opacity: 0;
	background: #fff;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

#person1{ background-image: url("images/person/p-bg1.jpg"); }
#person2{ background-image: url("images/person/p-bg2.jpg"); }
#person3{ background-image: url("images/person/p-bg3.jpg"); }
#person4{ background-image: url("images/person/p-bg4.jpg"); }
#person5{ background-image: url("images/person/p-bg5.jpg"); }
#person6{ background-image: url("images/person/p-bg6.jpg"); }
#person7{ background-image: url("images/person/p-bg7.jpg"); }
#person8{ background-image: url("images/person/p-bg8.jpg"); }

#person1 .back-btn i,
#person3 .back-btn i,
#person7 .back-btn i{
	background-image: url("images/back-btn2.png");
}

.person .ceo{
	background-position: center bottom;
	bottom: 0%;
}

#person1 .ceo{ width: 21.1%; height: 78.6%; right: 23.1%; background-image: url("images/person/people1.png"); }
#person2 .ceo{ width: 21.7%; height: 85.2%; right: 21.0%; background-image: url("images/person/people2.png"); }
#person3 .ceo{ width: 19.8%; height: 76.8%; right: 28.6%; background-image: url("images/person/people3.png"); }
#person4 .ceo{ width: 90.1%; height: 95.2%; right: 0%; background-image: url("images/person/people4.png"); background-position: right bottom; }
#person5 .ceo{ width: 23.9%; height: 84.4%; right: 22.4%; background-image: url("images/person/people5.png"); }
#person6 .ceo{ width: 27.1%; height: 81.5%; right: 20.0%; background-image: url("images/person/people6.png"); }
#person7 .ceo{ width: 29.6%; height: 82.1%; right: 18.2%; background-image: url("images/person/people7.png"); }
#person8 .ceo{ width: 23.2%; height: 87.1%; right: 18.2%; background-image: url("images/person/people8.png"); }

#person1 .topic{ width: 36.6%; height: 21.0%; left: 11.1%; top: 13.0%; background-image: url("images/person/topic1.png"); }
#person2 .topic{ width: 35.5%; height: 22.9%; left: 12.0%; top: 14.8%; background-image: url("images/person/topic2.png"); }
#person3 .topic{ width: 30.8%; height: 19.7%; left: 12.0%; top: 17.0%; background-image: url("images/person/topic3.png"); }
#person4 .topic{ width: 34.6%; height: 20.0%; left: 11.8%; top: 16.3%; background-image: url("images/person/topic4.png"); }
#person5 .topic{ width: 38.5%; height: 19.4%; left: 10.3%; top: 12.4%; background-image: url("images/person/topic5.png"); }
#person6 .topic{ width: 37.2%; height: 23.0%; left: 10.7%; top: 14.0%; background-image: url("images/person/topic6.png"); }
#person7 .topic{ width: 34.2%; height: 20.8%; left: 10.7%; top: 11.4%; background-image: url("images/person/topic7.png"); }
#person8 .topic{ width: 38.0%; height: 29.3%; left: 09.2%; top: 06.5%; background-image: url("images/person/topic8.png"); }

.person .btn1,
.person .btn2,
.person .btn3{
	width: 27.8%;
	height: 12.0%;
	left: 12.4%;
	cursor: pointer;
}

.person .btn1{ top: 50.9%; }
.person .btn2{ top: 65.2%; }
.person .btn3{ top: 79.5%; }

.person .btn1 i,
.person .btn2 i,
.person .btn3 i{
	transition: transform 0.2s;
}

.person .btn1:hover i,
.person .btn2:hover i,
.person .btn3:hover i{
	transform: translateX(3%);
}

#p1-btn1 i,
#p3-btn1 i,
#p5-btn1 i,
#p6-btn1 i,
#p7-btn1 i,
#p8-btn1 i{ background-image: url("images/person/btn-color1a.png"); }

#p1-btn2 i,
#p3-btn2 i,
#p5-btn2 i,
#p6-btn2 i,
#p7-btn2 i,
#p8-btn2 i{ background-image: url("images/person/btn-color1b.png"); }

#p1-btn3 i,
#p3-btn3 i,
#p5-btn3 i,
#p6-btn3 i,
#p7-btn3 i,
#p8-btn3 i{ background-image: url("images/person/btn-color1c.png"); }

#p2-btn1 i{ background-image: url("images/person/btn-color2a.png"); }

#p2-btn2 i{ background-image: url("images/person/btn-color2b.png"); }

#p2-btn3 i{ background-image: url("images/person/btn-color2c.png"); }

#p4-btn1 i{ background-image: url("images/person/btn-color3a.png"); }

#p4-btn2 i{ background-image: url("images/person/btn-color3b.png"); }

#p4-btn3 i{ background-image: url("images/person/btn-color3c.png"); }

@keyframes person-show{
	from{ top: -100%; opacity: 0; }
	0.01%{ top: 0%; opacity: 0; transform: scale(1.05); }
	to{ top: 0%; opacity: 1; transform: scale(1); z-index: 4444; transform: translateZ(400em); }
}

.person.show{
	animation:'person-show' 0.5s linear 0s forwards;
	-ms-animation:person-show 0.5s linear 0s forwards;
	-moz-animation:person-show 0.5s linear 0s forwards;
	-o-animation:'person-show' 0.5s linear 0s forwards;
	-webkit-animation:'person-show' 0.5s linear 0s forwards;
	z-index: 4444; transform: translateZ(400em);
}

@keyframes person-topic{
	from{ transform: scale(1.2) translateX(-100%);}
	to{ opacity: 1; z-index: 4488; transform: translateZ(488em); }
}

.person.show .topic{
	animation:'person-topic' 1.0s ease-in-out 0.4s forwards;
	-ms-animation:person-topic 1.0s ease-in-out 0.4s forwards;
	-moz-animation:person-topic 1.0s ease-in-out 0.4s forwards;
	-o-animation:'person-topic' 1.0s ease-in-out 0.4s forwards;
	-webkit-animation:'person-topic' 1.0s ease-in-out 0.4s forwards;
	z-index: 4488; transform: translateZ(488em);
}

@keyframes person-ceo{
	from{ transform: translateX(100%);}
	to{ opacity: 1; z-index: 4488; transform: translateZ(488em); }
}

.person.show .ceo{
	animation:'person-ceo' 1.0s ease-in-out 0.4s forwards;
	-ms-animation:person-ceo 1.0s ease-in-out 0.4s forwards;
	-moz-animation:person-ceo 1.0s ease-in-out 0.4s forwards;
	-o-animation:'person-ceo' 1.0s ease-in-out 0.4s forwards;
	-webkit-animation:'person-ceo' 1.0s ease-in-out 0.4s forwards;
	z-index: 4488; transform: translateZ(488em);
}

@keyframes person-btn1{
	from{ transform: translateY(-30%);}
	to{ opacity: 1; z-index: 4488; transform: translateZ(488em); }
}

.person.show .btn1{
	animation:'person-btn1' 0.5s ease-in-out 1.3s forwards;
	-ms-animation:person-btn1 0.5s ease-in-out 1.3s forwards;
	-moz-animation:person-btn1 0.5s ease-in-out 1.3s forwards;
	-o-animation:'person-btn1' 0.5s ease-in-out 1.3s forwards;
	-webkit-animation:'person-btn1' 0.5s ease-in-out 1.3s forwards;
	z-index: 4488; transform: translateZ(488em);
}

@keyframes person-btn2{
	from{ transform: translateY(-30%);}
	to{ opacity: 1; z-index: 4488; transform: translateZ(488em); }
}

.person.show .btn2{
	animation:'person-btn2' 0.5s ease-in-out 1.7s forwards;
	-ms-animation:person-btn2 0.5s ease-in-out 1.7s forwards;
	-moz-animation:person-btn2 0.5s ease-in-out 1.7s forwards;
	-o-animation:'person-btn2' 0.5s ease-in-out 1.7s forwards;
	-webkit-animation:'person-btn2' 0.5s ease-in-out 1.7s forwards;
	z-index: 4488; transform: translateZ(488em);
}

@keyframes person-btn3{
	from{ transform: translateY(-30%);}
	to{ opacity: 1; z-index: 4488; transform: translateZ(488em); }
}

.person.show .btn3{
	animation:'person-btn3' 0.5s ease-in-out 2.1s forwards;
	-ms-animation:person-btn3 0.5s ease-in-out 2.1s forwards;
	-moz-animation:person-btn3 0.5s ease-in-out 2.1s forwards;
	-o-animation:'person-btn3' 0.5s ease-in-out 2.1s forwards;
	-webkit-animation:'person-btn3' 0.5s ease-in-out 2.1s forwards;
	z-index: 4488; transform: translateZ(488em);
}

@keyframes person-back{
	from{ transform: scale(1.05);}
	to{ opacity: 1; z-index: 4488; transform: translateZ(488em); }
}

.person.show .back-btn{
	animation:'person-back' 0.5s ease-in-out 2.1s forwards;
	-ms-animation:person-back 0.5s ease-in-out 2.1s forwards;
	-moz-animation:person-back 0.5s ease-in-out 2.1s forwards;
	-o-animation:'person-back' 0.5s ease-in-out 2.1s forwards;
	-webkit-animation:'person-back' 0.5s ease-in-out 2.1s forwards;
	z-index: 4488; transform: translateZ(488em);
}

@keyframes person-hide{
	from{ top: 0%; opacity: 1; transform: scale(1) translateZ(400em); z-index: 4444; }
	99.9%{ top: 0%; opacity: 0; transform: scale(1.05) translateZ(400em); z-index: 4444; }
	to{ top: -100%; opacity: 0; }
}

.person.hide{
	animation:'person-hide' 0.5s ease-in-out 0s forwards;
	-ms-animation:person-hide 0.5s ease-in-out 0s forwards;
	-moz-animation:person-hide 0.5s ease-in-out 0s forwards;
	-o-animation:'person-hide' 0.5s ease-in-out 0s forwards;
	-webkit-animation:'person-hide' 0.5s ease-in-out 0s forwards;
}

@keyframes person-abs-hide{
	from{ opacity: 1; z-index: 4488; transform: translateZ(488em); }
	to{ opacity: 0;  }
}

.person.hide .abs0{
	animation:'person-abs-hide' 0.5s linear 0s forwards;
	-ms-animation:person-abs-hide 0.5s linear 0s forwards;
	-moz-animation:person-abs-hide 0.5s linear 0s forwards;
	-o-animation:'person-abs-hide' 0.5s linear 0s forwards;
	-webkit-animation:'person-abs-hide' 0.5s linear 0s forwards;
}



.drop{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background: #fff;
	display: none;
}

.drop.on{
	display: block;
	z-index: 5555; 
	transform: translateZ(500em);
}

.drop .show{
	width: 100%;
	height: 100%;
	overflow: auto;
}

.drop .show p{
	text-align: center;
}

.drop .show p img{
	max-width: 100%;
	display: inline-block;
	vertical-align: top;
}

.drop video{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	object-fit: contain;
	object-position: center center;
	background: #000;
}

.drop .close{
	position: absolute;
	width: 5.4%;
	height: 9.6%;
	right: 2.8%;
	top: 5.9%;
    background: url(images/drop-close.png) no-repeat center center;
	background-size: contain;
	border-radius: 50%;
    cursor: pointer;
    z-index: 999;
	transition: transform 0.2s;
	z-index: 5555; 
	transform: translateZ(500em);
}

.drop .close:hover i{
	transform: scale(1.05);
}

.drop .arrow{
	position: absolute;
	right: 3%;
	top: 44.5%;
	width: 4.8%;
	height: 10.9%;
}

#drop2 .arrow,#eng-drop2 .arrow,
#drop6 .arrow,#eng-drop6 .arrow{
	right: auto;
	left: 3%;
}

.drop .arrow i{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: url("images/drop-arrow.png") no-repeat center center;
	background-size: contain;
}

@media (min-width: 1720px) {
	.drop .arrow i{	background-image: url("images/drop-arrow2.png"); }
}

@keyframes drop-arrow-shake{
	from{ }
	50%{ transform: translateY(-1em); }
	to{ }
}
.drop .arrow i{
	animation:'drop-arrow-shake' 1.5s linear 0s infinite;
	-ms-animation:drop-arrow-shake 1.5s linear 0s infinite;
	-moz-animation:drop-arrow-shake 1.5s linear 0s infinite;
	-o-animation:'drop-arrow-shake' 1.5s linear 0s infinite;
	-webkit-animation:'drop-arrow-shake' 1.5s linear 0s infinite;
}