/* 2021.09.22 */

/* 防止图片缩放变模糊 */
img {
	image-rendering: -moz-crisp-edges;          /* Firefox                      */
	image-rendering: -o-crisp-edges;            /* Opera                        */
	image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
	image-rendering: crisp-edges;    
	-ms-interpolation-mode: bicubic;            /* IE (non-standard property)   */
}

/* 发展战略 动画效果 */

/* 初始化 */
.anox, .anox *, .anox *::before, .anox *::after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing: border-box; }
.anox { background: url("../images/anox-bg.jpg") no-repeat center / cover; overflow: hidden; }

/* 标语 */
.anox-slogan { font-size: .26rem; color: #111; text-align: center; line-height: 1.5; margin: 1rem auto 0; }

.screen_one { position: relative; width: 10.8rem; height: 7.74rem; margin: 0 auto; }
.screen_one > img, 
.screen_one .img4,
.screen_one .img4 img { width: 10.8rem; height: 7.74rem; position: absolute; top: 0; left: 0; opacity: 0; }
.screen_one > img:nth-of-type(1) { position: relative; z-index: 1; }
.screen_one > img:nth-of-type(2) { z-index: 2; }
.screen_one > img:nth-of-type(3) { z-index: 3; }
.screen_one .img4 { z-index: 1; }
.screen_one .img4 img { opacity: .3333; transition: opacity .75s; }
.screen_one.on > img:nth-of-type(1) { animation: anTranslate3d 1.5s ease-out both .5s; }
.screen_one.on > img:nth-of-type(2) { animation: anOpacity 1.5s ease-out both 2.5s; }
.screen_one.on > img:nth-of-type(3) { animation: anOpacity 1.5s ease-out both 3.25s; }
.screen_one.on .img4 { animation: anTranslate3d 1.5s ease-out both .5s; }
.screen_one.on:hover .img4 img { opacity: 1; }

.screen_two_box { position: relative; width: 9.9rem; height: 7rem; margin: 0 auto 1rem; }
.screen_two { position: relative; width: 9.9rem; height: 7rem; margin: 0 auto; }

.screen_two_default { width: 2.26rem; height: 2.26rem; position: absolute; left: 50%; opacity: 0; }
.screen_two_default-1 { top: .693rem; margin-left: -1.1295rem; }
.screen_two_default-2 { bottom: 1.587rem; margin-left: .513rem; }
.screen_two_default-3 { top: 3.177rem; margin-left: -2.763rem; }

.screen_two.on .screen_two_default-1 { animation: screen_two_default-1 3s ease-in-out both 0s; }
@keyframes screen_two_default-1 {
	0% { opacity: 0; margin-top: 0; transform: scale(.5); }
	35% { opacity: 1; margin-top: 0; transform: scale(1); }
	50% { opacity: 1; margin-top: 0; top: .693rem; left: 50%; margin-left: -1.1295rem; transform: scale(1); }
	85% { opacity: 1; top: 0; margin-left: 0; left: 0; transform: scale(.5); }
	100% { opacity: 1; top: 0; margin-left: 0; left: 0; transform: scale(.5); }
}
.screen_two.on .screen_two_default-2 { animation: screen_two_default-2 3s ease-in-out both 0s; }
@keyframes screen_two_default-2 {
	0% { opacity: 0; margin-bottom: 0; transform: scale(.5); }
	35% { opacity: 1; margin-bottom: 0; transform: scale(1); }
	50% { opacity: 1; margin-bottom: 0; bottom: 1.587rem; left: 50%; margin-left: .513rem; transform: scale(1); }
	85% { opacity: 1; bottom: 0; margin-left: 0; left: 0; transform: scale(.5); }
	100% { opacity: 1; bottom: 0; margin-left: 0; left: 0; transform: scale(.5); }
}
.screen_two.on .screen_two_default-3 { animation: screen_two_default-3 3s ease-in-out both 0s; }
@keyframes screen_two_default-3 {
	0% { opacity: 0; margin-top: 0; transform: scale(.5); }
	35% { opacity: 1; margin-top: 0; transform: scale(1); }
	50% { opacity: 1; left: 50%; margin-left: -2.763rem; top: 3.177rem; margin-top: 0; }
	85% { opacity: 1; left: 0; margin-left: 0; top: 50%; margin-top: -1.13rem; }
	100% { opacity: 1; left: 0; margin-left: 0; top: 50%; margin-top: -1.13rem; }
}

.screen_two_line { width: .65rem; height: 7rem; position: absolute; z-index: 1; top: 0; left: 2.27rem; }
.screen_two_line_width { width: 0; height: 7rem; position: absolute; z-index: 1; overflow: hidden; }
.screen_two_line_width-2 { z-index: 2; }
.screen_two_line_width-3 { z-index: 3; }
.screen_two_line_bg { width: .65rem; height: 7rem; position: absolute; z-index: 1; background: url("../images/xiantiao.png") no-repeat center / .65rem 7rem; }
.screen_two_line_bg-2 { background: url("../images/xiantiao2.png") no-repeat center / .65rem 7rem; }
.screen_two_line_bg-3 { background: url("../images/xiantiao3.png") no-repeat center / .65rem 7rem; }
.screen_two_line_box { position: absolute; z-index: 2; width: .325rem; height: .3rem; background: #666; right: 0; }
.screen_two_line-2 { top: 50%; }

.screen_two.on .screen_two_line_width-1 { animation: screen_two_line_width-1 1.5s ease-out both 3s; }
.screen_two.on .screen_two_line_width-2 { animation: screen_two_line_width-1 1.5s ease-out both 5s; }
.screen_two.on .screen_two_line_width-3 { animation: screen_two_line_width-1 1.5s ease-out both 7s; }
@keyframes screen_two_line_width-1 {
	0% { width: 0; }
	100% { width: .65rem; }
}

.screen_two_yuan { position: absolute; right: 5.45rem; z-index: 1; width: 1.63rem; height: 1.95rem; }
.screen_two_yuan .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.screen_two_yuan .img:nth-of-type(1) { z-index: 2; transform: scale(0); }
.screen_two_yuan .img:nth-of-type(2) { z-index: 1; }
.screen_two_yuan .img img { width: 100%; height: 100%; position: relative; z-index: 1; }
.screen_two_yuan .img:nth-of-type(1) img { width: 1.63rem; height: 1.63rem; transition: transform 1.5s; position: absolute; z-index: 2; top: 50%; left: 50%; margin-top: -.815rem; margin-left: -.815rem; }
.screen_two_yuan-1 { top: 0; }
.screen_two_yuan-2 { top: 50%; margin-top: -.975rem; }
.screen_two_yuan-3 { bottom: 0; }

.screen_two_yuan .img:nth-of-type(1) img:hover { transform: rotate(360deg); }
/*.screen_two_yuan .img:nth-of-type(1) img:hover { transform: rotateY(360deg); }*/

.screen_two.on .screen_two_yuan-1 .img:nth-of-type(1) { animation: screen_two_yuan 1s ease-out both 4s; }
.screen_two.on .screen_two_yuan-1 .img:nth-of-type(2) { animation: screen_two_yuan2 1s ease-out both 5s; }
.screen_two.on .screen_two_yuan-2 .img:nth-of-type(1) { animation: screen_two_yuan 1s ease-out both 6s; }
.screen_two.on .screen_two_yuan-2 .img:nth-of-type(2) { animation: screen_two_yuan2 1s ease-out both 7s; }
.screen_two.on .screen_two_yuan-3 .img:nth-of-type(1) { animation: screen_two_yuan 1s ease-out both 8s; }
.screen_two.on .screen_two_yuan-3 .img:nth-of-type(2) { animation: screen_two_yuan2 1s ease-out both 9s; }

@keyframes screen_two_yuan {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes screen_two_yuan2 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.screen_two_text { position: absolute; right: 0; z-index: 1; width: 5.38rem; height: 1.95rem; overflow: hidden; opacity: 0; transform: translate(100px,0); }
.screen_two_text img { width: 5.38rem; height: 1.95rem; position: absolute; top: 0; left: 0; }
.screen_two_text-1 { top: 0; }
.screen_two_text-2 { top: 50%; margin-top: -.975rem; }
.screen_two_text-3 { bottom: 0; }

.screen_two.on .screen_two_text-1 { animation: screen_two_text2 1.5s ease-out both 5.25s; }
.screen_two.on .screen_two_text-2 { animation: screen_two_text2 1.5s ease-out both 7.25s; }
.screen_two.on .screen_two_text-3 { animation: screen_two_text2 1.5s ease-out both 9.25s; }

@keyframes screen_two_text {
	0% { width: 0; right: 5.38rem; }
	100% { width: 5.38rem; right: 0; }
}
@keyframes screen_two_text2 {
	0% { transform: translate(100px,0); opacity: 0; }
	100% {transform: translate(0,0); opacity: 1; }
}

/* 渐显动画 */
@keyframes anOpacity {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes anTranslate3d {
	0% { opacity: 0; transform: translate3d(0,100px,0); }
	100% { opacity: 1; transform: none; }
}

.screen_btn1.show { opacity: 0; }
.screen_btn { width: 100%; text-align: center; padding: .5rem 0; animation: anTranslate3d 1.2s ease-out both .75s;  transition: opacity .5s; }
.screen_btn img { width: .4rem; height: .4rem; cursor: pointer; opacity: 0; animation: anTranslate3dLoop 5s ease-out both infinite 1s; }
.screen_btn img.on { transform: rotate(180deg); animation: anTranslate3dLoop2 5s ease-out both infinite 1s; }

/* 箭头 循环动画 */
@keyframes anTranslate3dLoop {
	0% { transform: translate3d(0,0,0); opacity: 0; }
	25% { transform: translate3d(0,50%,0); opacity: 1; }
	35% { transform: translate3d(0,50%,0); opacity: 0; }
	35.1% { transform: translate3d(0,0,0); opacity: 0; }
	50% { transform: translate3d(0,0,0); opacity: 0; }
	75% { transform: translate3d(0,50%,0); opacity: 1; }
	85% { transform: translate3d(0,50%,0); opacity: 0; }
	85.1% { transform: translate3d(0,0,0); opacity: 0; }
}
@keyframes anTranslate3dLoop2 {
	0% { transform: translate3d(0,0,0); opacity: 0; }
	25% { transform: translate3d(0,-50%,0); opacity: 1; }
	35% { transform: translate3d(0,-50%,0); opacity: 0; }
	35.1% { transform: translate3d(0,0,0); opacity: 0; }
	50% { transform: translate3d(0,0,0); opacity: 0; }
	75% { transform: translate3d(0,-50%,0); opacity: 1; }
	85% { transform: translate3d(0,-50%,0); opacity: 0; }
	85.1% { transform: translate3d(0,0,0); opacity: 0; }
}

/* 移动适配 */
@media (max-width: 750px) {
	.anox-slogan { padding: 0 .2rem; }
	
	.screen_one { width: 100%; height: auto; padding: 0 .2rem; }
	.screen_one > img, .screen_one .img4, .screen_one .img4 img { width: 100%; height: auto; padding: 0 .2rem; }
	
	.screen_two_box { width: 100%; height: 5rem; }
	.screen_two { position: absolute; transform: scale(.7); left: 50%; margin-left: -4.95rem; top: 50%; margin-top: -3.5rem; }
}

/* 1 
   2
   3
   4
   5 */