@import "variables.less";

.webBox {
	* , :before, :after { .transition(all, .3s, ease-in-out); }
	
	header {
        &.scroll {
            .translate(0, -80px);
            &.show { .translate(0, 0); }
        }
		#menubtn[data-type="2"] a span {
			&:nth-child(1) { .rotate(45deg); }
			&:nth-child(3) { .rotate(-45deg); }
		}
		#hSearch {
			.translate(30px, 0);
			&[data-type="2"] { .translate(0, 0); }
		}
		@media (min-width: 1281px) {
			#webmenu li {
				.menu_body {
					.translate(0, 30px);
					.subOption li {
						.sub2Option {
							.translate(-30px, 0);
							li {
								.sub3Option { .translate(-30px, 0); }
								&:hover .sub3Option { .translate(0, 0); }
							}
						}
						&:hover .sub2Option { .translate(0, 0); }
					}
				}
				&:hover .menu_body { .translate(0, 0); }
				&:last-child {
					.menu_body .subOption li {
						.sub2Option {
							.translate(30px, 0);
							li {
								.sub3Option { .translate(30px, 0); }
								&:hover .sub3Option { .translate(0, 0); }
							}
						}
						&:hover .sub2Option { .translate(0, 0); }
					}
				}
			}
		}
	}
	
	.img_scale {
		img { .scale(1); }
		@media (min-width: 1281px) {
			&:hover img { .scale(1.1); }
		}
	}
	
	#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); }
	#webSeo2 .seo { .animation(marquee 50s linear infinite); }
	
	#gotop { .transform(rotate(90deg) translateX(0)); .animation(gotop .7s infinite alternate ease-in-out); }
	
	#footer_btn a.circ { .circular(45px); }
}



/* animation */
@-webkit-keyframes marquee { 0% { .translate(0, 0); } 100% { .translate(-100%, 0); } }
@keyframes marquee { 0% { .translate(0, 0); } 100% { .translate(-100%, 0); } }
@-webkit-keyframes gotop { 0% { .transform(rotate(90deg) translateX(0)); } 100% { .transform(rotate(90deg) translateX(-15px)); } }
@keyframes gotop { 0% { .transform(rotate(90deg) translateX(0)); } 100% { .transform(rotate(90deg) translateX(-15px)); } }