:root {
	--logo-count: 3;
}

@media screen and (min-width: 1234px) {

H21 {							font-size: 30px; font-weight: 700; text-align: center; margin-bottom: 30px; }
#UserMenu A:hover {				color: #FFF; }

#PromoSlider {					position: relative; width: var(--w100); height: 500px; left: 50%; transform: translateX(-50%); margin-top: -110px; background: #d0d0e0; will-change: transform; }
#PromoSlider UL {				position: absolute; width: 100%; height: 500px; left: 50%; top: 0; transform: translateX(-50%); list-style: none;
								display: flex; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-behavior: smooth; }
#PromoSlider LI {				position: relative; display: block; min-width: 100%; height: 100%; background-size: cover !important; scroll-snap-align: start; }

#PromoSlider DIV.Wrap {			position: relative; width: 100%; height: 100%; max-width: 1600px; margin: 0 auto; }
#PromoSlider A {				color: var(--color-key2); }
#PromoSlider A::before { 		content: ''; position: absolute; width: 100%; height: 4px; border-radius: 4px; background-color: var(--color-key2); bottom: 0; left: 0; transform-origin: right; transform: scaleX(0); transition: transform .3s ease-in-out; }
#PromoSlider A:hover::before {	transform-origin: left; transform: scaleX(1); }

#PromoNavArr {					z-index: 7; position: absolute; width: 100%; height: 500px; left: 50%; top: 0; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
#PromoNavArr U {				position: absolute; width: 50px; height: 50px; top: calc(50% - 25px); pointer-events: all; cursor: pointer; transition: 200ms; }
#PromoNavArr U:after {			position: absolute; width: 20px; height: 20px; top: 13px; left: 13px; border: solid var(--color-key2); border-width: 4px 4px 0 0; content: ""; }
#PromoNavArr U.L {				left: -50px; transform: scaleX(1) rotate(225deg); }
#PromoNavArr U.R {				right: -50px; transform: scaleX(1) rotate(45deg); }
#PromoNavArr U.Disabled {		filter: grayscale(1); opacity: .5; }
#PromoNavArr U.L:hover {		left: 10px; }
#PromoNavArr U.R:hover {		right: 10px; }
#PromoSlider:hover U.L {		left: 10px; }
#PromoSlider:hover U.R {		right: 10px; }

#Brands {						position: relative; width: 100%; height: 120px; margin: -60px -60px 0 -60px; padding: 0 60px; background1: #FFF; outline1: 1px solid red; }
#Brands > DIV {					position: relative; width: 100%; height: 120px; z-index: 9; background: #FFF; overflow-x: hidden; outline1: 1px solid green; }
#Brands UL {					position: absolute; width: 100%; height: 100%; left: 0; display: flex; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; outline1: 1px solid red; }
#Brands UL LI {					min-width: calc(100% / var(--logo-count)); height: 100%; display: flex; justify-content: center; align-items: center; scroll-snap-align: start; outline1: 1px solid blue; }
#Brands A {						position: relative; width: 100%; height: 120px; text-align: center; border-left: 1px solid #E5E5E5; display: flex; justify-content: center; align-items: center; }
#Brands A IMG {					transition: 200ms; transform: scale(.3); }
#Brands A:hover IMG {			transform: scale(.36); }
#Brands U {						position: absolute; z-index: 3; width: 40px; height: 40px; top: calc(50% + 11px); cursor: pointer; transition: 200ms; outline1: 1px solid red; background1: #FFF; }
#Brands U:after {				position: absolute; width: 12px; height: 12px; top: 12px; left: 12px; border: solid var(--color-key2); border-width: 3px 3px 0 0; content: ""; }
#Brands U.L {					left: 70px; transform: scaleX(1) rotate(225deg); }
#Brands U.R {					right: 70px; transform: scaleX(1) rotate(45deg); }
#Brands U.Disabled {			filter: grayscale(1); opacity: .5; }
#Brands:hover U.L {				left: 12px; }
#Brands:hover U.R {				right: 12px; }

.News {							margin-bottom: 60px; }

#Hot {							font-size: 34px; text-align: center; }

#User A {						color: #FFF; }

.About {						margin-top: 60px; }
.About H1 {						text-align: center; }
.About IMG {					float: right; width: 576px; transform: translateX(10%); }

.Keywords {						margin: 30px 0 0 0 !important; }
.Keywords A { 					display: inline; padding-right: 10px; line-height: 1.8; font-size: 17px; }
.Keywords A:after {				content: "|"; color: #999; width: 28px; display: inline; text-align: center; padding-left: 10px; }
.Keywords A:last-child:after {	content: "" }

}

@media screen and (max-width: 1233px) {

MAIN {							padding-top: 0; }

#PromoSlider1 {					position: relative; width: var(--w100); height: 360px; left: 50%; transform: translateX(-50%); background: #d0d0e0; will-change: transform; }
#PromoSlider {					position: relative; width: calc(100% + 40px); height: 360px; margin: 0 -20px; background: #d0d0e0; will-change: transform; }
#PromoSlider UL {				position: absolute; width: 100%; height: 360px; left: 50%; top: 0; transform: translateX(-50%); list-style: none;
								display: flex; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-behavior: smooth; }
#PromoSlider LI {				position: relative; display: block; min-width: 100%; height: 100%; background-size: cover !important; scroll-snap-align: start; }
#PromoSlider A {				color: var(--color-key2); }

#Brands {						position: relative; width: calc(100% + 40px); height: 90px; margin: 0 -20px; }
#Brands > DIV {					position: relative; width: 100%; height: 90px; z-index: 9; background: #FFF; overflow-x: hidden; }
#Brands UL {					position: absolute; width: 100%; height: 100%; left: 0; display: flex; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; }
#Brands UL LI {					min-width: calc(100% / 3); height: 100%; display: flex; justify-content: center; align-items: center; scroll-snap-align: start; }
#Brands A {						position: relative; width: 100%; height: 120px; text-align: center; border-left: 1px solid #E5E5E5; display: flex; justify-content: center; align-items: center; }
#Brands A IMG {					transition: 200ms; transform: scale(.21); }

.News {							margin-bottom: 30px; }

#Hot {							margin-bottom: 20px; font-size: 26px; text-align: center; }

.About {						margin-top: 30px; }
.About H1 {						text-align: center; }

}


@media screen and (min-width: 1234px) {

:root { --logo-count: 5; }

}

@media screen and (min-width: 1440px) {

:root { --logo-count: 6; }

}