@import "variables.less";

.webBox {
	* , :before, :after { .transition(all, .3s, ease-in-out); }

	header {
		#menubtn[data-type="2"] a span {
			&:nth-child(1) { .rotate(45deg); }
			&:nth-child(3) { .rotate(-45deg); }
		}
	}
	
	.img_scale {
		img { .scale(1); }
		@media (min-width: 1281px) {
			&:hover img { .scale(1.1); }
		}
	}
	#banner {
		.item {
			.img_box {
				>* { .scale(1); }
				video { .translate(-50%, -50%); }
			}
			&.slick-current .img_box >* { .animation(scale_banner 15s linear infinite); }
		}
		@-webkit-keyframes scale_banner { to { .scale(1.2); } }
		@keyframes scale_banner { to { .scale(1.2); } }
	}
	
	.more_btn span:before { .transform-origin(100%, 50%); .rotate(45deg); }
	
	#SeoStarRating font {
		margin-right: 5px; display: inline-block; line-height: 110%; vertical-align: text-bottom; color: @yellow;
		& * { color: @yellow; }
		&:first-child { font-weight: bold; font-size: 18px; }
		&:last-child { color: @complement; }
	}
	
	#webSeo .seo {
		.animation(marquee 200s linear infinite);
		@-webkit-keyframes marquee { 0% { .translate(0, 0); } 100% { .translate(-100%, 0); } }
		@keyframes marquee { 0% { .translate(0, 0); } 100% { .translate(-100%, 0); } }
	}
	
	#gotop {
		span:before { .rotate(45deg); }
		&[data-type="2"] {
			span , span:before { background: contrast(@secondary); }
			font { color: contrast(@secondary); }
		}
	}
	
	#footer_btn {
		svg { fill: @secondary; }
		&[data-type="2"] svg { fill: contrast(@secondary); }
	}
}