@charset "utf-8";
/* CSS Document */
.banner .pic {height: 100%; min-height:400px; position: relative;}
.banner .pic .img {position: absolute; width: 40%; -webkit-transition: all 1s;-moz-transition: all 1s;transition: all 1s; overflow:hidden; background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.banner .pic .name {position: absolute; z-index: 5; bottom: 10%; right: 0; border-radius: 100px; background-color: #fb4e57; color: #fff; font-size: 14px; line-height: 1.2em; padding: 20px;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; opacity: 0; }
@media (min-width: 768px) {
	.banner .pic {width:50%;}
	.banner .pic .name {font-size: 16px; box-shadow: 0 3px 10px rgba(0,0,0,.3)}
	.banner .info {width:45%;padding:60px 0;}
	.banner .pic .img1 {top:10%; left: 0; width:56%; height:82%;animation: rectangle infinite 10s ease-in-out;}
	.banner .pic .img2 {top: 0; left: 60%; height: 40%;animation: rectangles infinite 10s ease-in-out;}
	.banner .pic .img3 {top:45%; left: 60%; height: 20%;animation: rectangless infinite 10s ease-in-out;}
	.banner .pic .img4 {top:70%; left: 60%; height: 20%; opacity: 0; animation: rectanglesss infinite 10s ease-in-out;}
	.banner .pic .name1 {opacity: 1; animation: animationname infinite 10s ease-in-out;}
	.banner .pic .name2 {animation: animationnames infinite 10s ease-in-out;}
	.banner .pic .name3 {animation: animationnamess infinite 10s ease-in-out;}
	.banner .pic .name4 {animation: animationnamesss infinite 10s ease-in-out;}
}
@media (min-width: 993px) {
	.banner .pic {width:58%;min-height:560px;}
	.banner .info {width:38%;}
	.banner .pic .name {font-size: 18px;padding: 20px 40px;}
}
@media (min-width: 1200px) {
	.banner .info {width:35%;}
}
@media (max-width:767px) {
	.banner .pic {min-height:360px;}
}

@keyframes animationname {
0% {opacity: 1; bottom:10%; z-index: 5;}
20% {opacity: 1; bottom:10%; z-index: 5;}
25% {opacity:0; bottom:0; z-index: 4;}
95% {opacity:0; bottom:0; z-index: 4;}
100% {opacity: 1; bottom: 10%;z-index: 5;}
}
@keyframes animationnames {
0% {opacity:0; bottom:0; z-index: 4;}
20% {opacity:0; bottom:0; z-index: 4;}
25% {opacity: 1; bottom: 10%; z-index: 5;}
45% {opacity: 1; bottom: 10%; z-index: 5;}
50% {opacity:0; bottom:0; z-index: 4;}
100% {opacity:0; bottom:0; z-index: 4;}
}
@keyframes animationnamess {
0% {opacity:0; bottom:0; z-index: 4;}
45% {opacity:0; bottom:0; z-index: 4;}
50% {opacity: 1; bottom: 10%; z-index: 5;}
70% {opacity: 1; bottom: 10%; z-index: 5;}
75% {opacity: 0; bottom: 10%; z-index: 5;}
100% {opacity: 0; bottom: 10%; z-index: 5;}
}
@keyframes animationnamesss {
0% {opacity:0; bottom:0; z-index: 4;}
70% {opacity:0; bottom:0; z-index: 4;}
75% {opacity: 1; bottom: 10%; z-index: 5;}
95% {opacity: 1; bottom: 10%; z-index: 5;}
100% {opacity:0; bottom:0; z-index: 4;}
}

@keyframes rectangle {
0% {top:10%; left: 0; width:56%; height:82%;}
20% {opacity:1;top:10%; left: 0; width:56%; height:82%;}
25% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}

45% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}
50% {opacity:1;top:45%; left: 60%; width: 40%; height: 20%;}

70% {top:45%; left: 60%; width: 40%; height: 20%;}
75% {top: 0; left: 60%; width: 40%; height: 40%;}

95% {top: 0; left: 60%; width: 40%; height: 40%;}
100% {top:10%; left: 0; width:56%; height:82%;}
}
@keyframes rectangles {
0% {top: 0; left: 60%; width: 40%; height: 40%;}
20% {top: 0; left: 60%; width: 40%; height: 40%;}
25% {top:10%; left: 0; width:56%; height:82%;}

45% {opacity:1;top:10%; left: 0; width:56%; height:82%;}
50% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}

70% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}
75% {opacity:1;top:45%; left: 60%; width: 40%; height: 20%;}

95% {top:45%; left: 60%; width: 40%; height: 20%;}
100% {top: 0; left: 60%; width: 40%; height: 40%;}
}
@keyframes rectangless {
0% {top:45%; left: 60%; width: 40%; height: 20%;}
20% {top:45%; left: 60%; width: 40%; height: 20%;}
25% {top: 0; left: 60%; width: 40%; height: 40%;}

45% {top: 0; left: 60%; width: 40%; height: 40%;}
50% {top:10%; left: 0; width:56%; height:82%;}

70% {opacity:1;top:10%; left: 0; width:56%; height:82%;}
75% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}

95% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}
100% {opacity:1; top:45%; left: 60%; width: 40%; height: 20%;}
}
@keyframes rectanglesss {
0% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}
20% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}
25% {opacity:1;top:45%; left: 60%; width: 40%; height: 20%;}

45% {top:45%; left: 60%; width: 40%; height: 20%;}
50% {top: 0; left: 60%; width: 40%; height: 40%;}

70% {top: 0; left: 60%; width: 40%; height: 40%;}
75% {top:10%; left: 0; width:56%; height:82%;}

95% {opacity:1;top:10%; left: 0; width:56%; height:82%;}
100% {opacity:0;top:70%; left: 60%; width: 40%; height: 20%;}
}

.page_infoBox .item {background-color: #fb4e57; color: #fff; margin:20px 0;}
.page_infoBox .item a {color: #fff;}
.page_infoBox .item .title {font-size:24px;}
.page_infoBox .item .pic img {width: 100%;}
.page_infoBox .item .info {padding:20px; -ms-flex-item-align: center;align-self: center;}
@media (min-width: 768px) { 
	.page_infoBox .item {display:-webkit-box; display:-ms-flexbox; display: flex;}
	.page_infoBox .item .pic_r {order:2;}
	.page_infoBox .item .info_l {order:1;}
	.page_infoBox .item .pic {width: 50%;}
	.page_infoBox .item .info {width: 50%; padding:0;}
	.page_infoBox .item .info .txt {padding-left: 10%;}
	.page_infoBox .item .info_l .txt {margin-left: auto; padding-left:5%; padding-right: 10%;}
}
@media (min-width: 992px) {
	.page_infoBox .item {font-size: 18px;margin: 40px 0;}
	.page_infoBox .item .title {font-size: 36px;margin-bottom:20px;}
	.page_infoBox .item .info .txt {width: 50%;min-width:485px;}
	.page_infoBox .item .info_l .txt {padding-left:0;}
	.page_infoBox .item .info p {margin-bottom: 20px;}
	.page_infoBox .item .info .btn-arrow {font-size: 20px;}
}
@media (min-width: 1200px) {
	.page_infoBox .item .info .txt {min-width:585px;}
}
@media (min-width: 1360px) {
	.page_infoBox .item .info .txt {min-width: 665px;}
}


.track_box .icon {min-width: 50px;}
@media (max-width: 479px) {
	.track_box .icon {min-width:36px;}
}