:root {
--height: 18.8rem;
--rewidth: calc((100vw - 120rem)/2);
--recont: calc(100vw - (100vw - 120rem)/2);
--logo:25.6rem;
--logo-h:13.6rem;
--clip: polygon(100% 0, 100% 1%, 50% 100%, 0 1%, 0 0);
--hex:polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
--hexs:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
@media (max-width: 1200px) {
:root {
--height: 10rem;
}
}
@media (max-width: 600px) {
:root {
--height: 6rem;
}
}
@media (max-width: 1230px) {
:root {
--rewidth: 1.5rem;
}
}
@media (max-width: 1240px) {
:root {
--recont: calc(100%);
}
}
@media (max-width: 1390px) {
:root {
--logo: 24rem;
--logo-h: 8rem;
}
}
@media (max-width: 1360px) {
:root {
--logo: 15rem;
--logo-h: 8rem;
}
}
.promotion {
max-width: 120rem;
margin: 0 auto;
}
.promotion-infor {
border-right: 1px solid rgb(235, 235, 235);
}
.promotion-advertisement {
display: grid;
grid-template-columns: 40% 60%;
grid-gap: 6.3rem;
margin-top: 6.4rem;
margin-bottom: 6.9rem;
}
.promotion-advertisement h3 {
font-size: 3.2rem;
font-weight: 700;
color: #242424;
}
.promotion-advertisement h2 {
font-size: 4.8rem;
font-weight: 700;
color: #C20E34;
}
.promotion-introduce {
line-height: 3.2rem;
}
.promotion-introduce p {
font-size: 2rem;
color: #242424;
font-weight: 700;
}
.promotion-nav {
margin-left: 4.4rem;
}
.promotion-nav li {
color: #000;
list-style: disc;
}
.promotion-nav li span {
font-weight: 700;
}
.promotion-product-type {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 2.4rem;
}
.promotion-product-type--image {
position: relative;
border-radius: 0.4rem;
overflow: hidden;
cursor: pointer;
}
.promotion-product-type--image:hover .promotion-product-type--infor {
transform: translateX(0%);
transition: all 0.6s;
}
.promotion-product-type--infor {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-repeat: no-repeat;
transform: translateX(-100%);
transition: all 0.6s;
}
.promotion-product-type--infor img {
border-top-left-radius: 0.4rem;
border-bottom-left-radius: 0.4rem;
}
.promotion-product-type--content {
position: absolute;
top: 42%;
transform: translateY(-50%);
left: 1.6rem;
display: flex;
align-items: center;
color: #fff;
}
.promotion-product-type--content .promotion-product-type--discount-to {
transform: rotate(-90deg);
position: relative;
text-align: left;
height: 4rem;
}
.promotion-product-type--administration {
z-index: 9;
margin-left: -2rem;
margin-top: 4rem;
}
.promotion-product-type--administration .percent {
font-size: 5rem;
margin-left: -2.8rem;
}
.promotion-product-type--administration .btn.btn-buy-now {
padding: 10px 24px 10px 24px;
color: white;
border-radius: 0.8rem;
background-color: #e36c0a;
margin-top: 1.4rem;
}
.promotion-product-type--discount {
font-size: 10.7rem;
font-weight: 700;
display: block;
height: 12.8rem;
}
.promotion-product-type--title {
font-weight: 400;
}
.promotion-product-type--title {
margin-top: 0.6rem;
}
.promotion-deal {
width: 100%;
margin-top: 12.3rem;
}
.promotion-deal .item-1 {
background: linear-gradient(91.09deg, #ff2323, #e36c0a);
}
.promotion-deal .item-2 {
background-color: rgb(23, 80, 133);
}
.promotion-deal .item-3 {
background-color: rgb(194, 14, 52);
}
.promotion-deal .item-4 {
background-color: rgb(227, 108, 10);
}
.promotion-deal--good {
border-radius: 8px;
box-shadow: 0px 4px 20px rgba(255, 255, 255, 0.6) inset;
width: 100%;
height: 100px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0rem 7rem;
}
.promotion-deal--title {
display: flex;
align-items: center;
}
.promotion-deal--title h2 {
font-size: 56px;
font-weight: 800;
font-style: italic;
color: #fff;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
margin-right: 1.5rem;
}
.promotion-deal--birthday {
font-size: 31.2px;
color: #fff;
font-weight: 600;
}
.promotion-deal--image {
margin-top: -7.4rem;
}
.promotion .home-deal-bottom.bg-none {
background: unset;
}
.promotion-deal--product__title {
color: #242424;
font-size: 32px;
font-weight: 700;
}
.promotion-deal--product .home-deal-slide {
padding: 4rem 0rem !important;
}
.promotion .swiper-wrapper.swiper-wrapper__promotion {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.promotion-deal--product__all {
display: flex;
justify-content: center;
margin-top: 5rem;
}
.promotion-deal--product__all button {
padding: 10px 24px 10px 24px;
color: white;
background-color: #C20E34;
border-radius: 0.8rem;
cursor: pointer;
}
@media (max-width: 1200px) {
.promotion-advertisement {
grid-gap: 1rem;
padding: 0 1.6rem;
}
.promotion-product-type {
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.6rem;
padding: 0 0.6rem;
}
}
@media (max-width: 1024px) {
.promotion-product-type {
grid-template-columns: repeat(1, 1fr);
grid-gap: 1.6rem;
padding: 0 0.6rem;
}
.promotion-product-type--image {
margin: 0 auto;
overflow: hidden;
cursor: pointer;
}
.promotion-deal {
padding: 0 1.6rem;
}
.promotion-deal--title h2 {
font-size: 3rem;
}
.promotion-deal--birthday {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.promotion-advertisement h3 {
font-size: 2.4rem;
}
.promotion-advertisement h2 {
font-size: 3.6rem;
}
.promotion-deal--title h2 {
font-size: 2.4rem;
}
.promotion-deal--good {
padding: 0 3rem;
}
.promotion-deal--birthday {
font-size: 1.8rem;
}
.promotion-deal--image img {
width: 12rem;
}
}
@media (max-width: 600px) {
.promotion-advertisement {
display: block;
}
.promotion-deal--title h2 {
font-size: 2rem;
}
.promotion-deal--good {
padding: 0 3rem;
}
.promotion-deal--birthday {
font-size: 1.8rem;
}
.promotion-nav {
margin-left: 2.4rem;
}
}
@media (max-width: 599px) {
.promotion-product-type--image {
max-width: 58.8rem;
}
.promotion-product-type--image img {
width: 100%;
height: 100%;
}
.promotion-product-type--infor img {
height: 100%;
}
.promotion-deal--image img {
width: 8rem;
}
.promotion-deal--title {
font-size: 1.4rem;
}
.promotion-deal--title img {
width: 100%;
}
.promotion-product-type--discount {
font-size: 4.7rem;
height: auto;
}
.promotion-product-type--discount .percent {
font-size: 3rem;
margin-left: -1rem;
}
.promotion-deal--title h2 {
font-size: 1.8rem;
margin-right: 0;
}
.promotion-deal--good {
padding: 0 1.6rem;
}
.promotion-product-type--content {
left: 0;
}
.promotion-deal--birthday {
margin-left: 2.2rem;
}
.promotion-product-type--title {
width: 20rem;
margin-top: 0rem;
}
}
@media (max-width: 400px) {
.promotion-deal {
padding: 0rem 0rem;
}
}