.carousel-img-data .active { animation: fadeoutL 3s; -moz-animation: fadeoutL 3s; /* Firefox */ -webkit-animation: fadeoutL 3s; /* Safari and Chrome */ -o-animation: fadeoutL 3s; /* Opera */ } @-webkit-keyframes fadeoutL { 0% { opacity: 0; -webkit-transform: translateX(20%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeoutL { 0% { opacity: 0; -webkit-transform: translateX(20%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-ms-keyframes fadeoutL { 0% { opacity: 0; -webkit-transform: translateX(20%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeoutL { 0% { opacity: 0; -webkit-transform: translateX(20%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } #view .plate > div .learn-more-button { color: #fdc100; position: relative; font-size: clamp(16px, 0.35em, 30px); margin-top: 15px; display: flex; align-items: center; justify-content: center; } #view .plate > div .learn-more-button:after { content: ''; display: inline-block; position: relative; border: solid #343434; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); border: solid #fdc100; border-width: 0 2px 2px 0; } @media (min-width: 769px) { #view .carousel { height: 4.22rem; position: relative; } .w-mall-banner .kv-silder .slick-dots { height: 3vw !important; } #view .carousel-img-data { height: 100%; overflow: hidden; } #view .carousel-img-data > ul > li { position: absolute; opacity: 0; z-index: 10; } #view .carousel-img-data > ul > li.active { opacity: 1; z-index: 11; -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s; } #view .carousel-img-data img { height: 4.22rem; } #view .carousel-img-data img.mobile_banner { display: none; } #view .carousel .carousel-click { width: 0.5rem; height: 0.5rem; background: whitesmoke; border-radius: 50%; position: absolute; z-index: 20; top: 50%; transform: translateY(-50%); } #view .carousel .carousel-click > img { display: block; width: 0.15rem; margin: 0.12rem 0.18rem; } #view .carousel .carousel-click:hover { box-shadow: #888 0px 0px 10px; cursor: pointer; } #view .carousel .carousel-prev { left: 0.56rem; } #view .carousel .carousel-next { right: 0.56rem; } #view .carousel .dot { display: flex; position: absolute; bottom: 0.18rem; left: 50%; transform: translateX(-50%); z-index: 20; } #view .carousel .dot > li { width: 0.11rem; height: 0.11rem; border-radius: 50%; background: #737373; margin: 0 0.08rem; cursor: pointer; } #view .carousel .dot > li.active { width: 0.11rem; height: 0.11rem; background: #fdc100; } #view .carousel .imgTopClick { position: absolute; width: 4rem; opacity: 0; left: 3.8rem; top: 1.35rem; font-size: 0.25rem; } #view .carousel .active > a .imgTopClick { opacity: 1; -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; transition: all 2s; } #view .carousel .imgTopClick div h2 { color: #fdc100; font-weight: unset; font-size: 0.4rem; margin: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #view .carousel .imgTopClick div p { margin-top: 0.1rem; margin-bottom: 0.2rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #view .carousel .imgTopClick span { display: inline-block; padding: 0.1rem 0.2rem; font-size: 0.16rem; text-align: center; background: #fdc100; font-weight: bold; cursor: pointer; } /*plate*/ #view .plate { background: #ffffff; max-width: 1440px; margin: 0 auto; padding: 0 16px; display: flex; align-items: stretch; justify-content: space-between; font-size: 0.6em; } #view .plate > div { width: 33%; /* padding-bottom: 0.3rem; */ background: #f4f4f4; margin: 20px 8px; border-radius: 20px; overflow: hidden; } #view .plate > div a { display: flex; flex-direction: column-reverse; justify-content: center; height: 100%; align-items: stretch; } #view .plate > div > div { height: 3rem; } #view .plate > div a > div { margin-bottom: 0; flex: 1; height: 100%; display: flex; justify-content: flex-end; flex-direction: column; } #view .plate > div a > div.plate-content { padding: 20px 20px 40px 20px; justify-content: flex-start; height: 100%; text-align: center; letter-spacing: 0.05em; line-height: 1.6; } #view .plate > div img { width: 100%; } #view .plate > div h5 { font-size: clamp(24px, 0.5em, 55px); margin: 0 auto 5px; color: #fdc100; overflow: hidden; text-overflow: ellipsis; font-weight: bold !important; white-space: nowrap; width: 100%; } #view .plate > div h6 { font-size: clamp(18px, 0.35em, 30px); overflow: hidden; text-overflow: ellipsis; line-height: normal; } /*hightlights*/ #view .hightlights { width: 90%; margin: auto; } #view .hightlights > h3 { font-size: 0.5rem; color: #fdc100; text-align: center; margin: 0.55rem auto; } #view .hightlights .hightlights-ct { border: 0.01rem solid #fdc100; height: calc(5.55rem - 0.02rem); } #view .hightlights .hightlights-ct .hightlights-ct-img > ul > li { display: none; /*position: absolute;*/ opacity: 0; } #view .hightlights .hightlights-ct .hightlights-ct-img li.active { opacity: 1; display: flex !important; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #view .hightlights .hightlights-ct { display: flex; justify-content: space-between; position: relative; } #view .hightlights .hightlights-ct .hightlights-ct-img { width: calc(16.81rem - 1.71rem); margin-left: calc(0.48rem * 2 + 0.25rem); margin-right: calc(0.48rem * 2 + 0.25rem); display: flex; align-items: center; } .hightlights-ct-img > ul { position: relative; left: 5%; } .hightlights--text > ul { min-height: 30px; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--img { width: 4.61rem; /*height: 4.65rem;*/ margin-top: 0.52rem; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--img img { width: 4.61rem; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--text > h4 { font-weight: 500; font-size: 0.35rem; margin-top: 0.7rem; margin-bottom: 2%; /*text-overflow: ellipsis;*/ /*overflow: hidden;*/ /*white-space: nowrap;*/ } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--text > h1 { font-size: 0.55rem; color: #fdc100; margin-bottom: 0.2rem; min-height: 0.78rem; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--text .into { font-size: 0.21rem; /*display: inline-block;*/ width: 2.32rem; height: 0.56rem; line-height: 0.56rem; text-align: center; background: #fdc100; position: absolute; bottom: 8%; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--text .into a { font-weight: bold; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--text li { font-size: 0.23rem; color: #343434; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--text ol { margin: 0.3rem 0 0.2rem 0; } #view .hightlights .hightlights-ct .hightlights-ct-img .hightlights--text ol > li { list-style-type: disc; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; list-style-position: inside; margin: 10px 0; } #view .hightlights .hightlights-ct .prev, #view .hightlights .hightlights-ct .next { z-index: 9999; width: calc(0.48rem * 2 + 0.75rem); position: absolute; top: 0; } #view .hightlights .hightlights-ct .prev { left: 0; } #view .hightlights .hightlights-ct .next { right: 0; } #view .hightlights .hightlights-ct .click > span { display: block; width: 0.75rem; height: 0.75rem; background: #fff; margin: calc(5.55rem / 2 - 0.375rem) auto; border-radius: 50%; border: 1px solid #ddd; cursor: pointer; } #view .hightlights .hightlights-ct .click > span > img { width: 0.25rem; display: block; margin: 0.15rem 0.28rem; } #view .hightlights .hightlights-ct .click > span:hover { box-shadow: #888 0px 0px 10px; } /*icon-menu*/ #view .icon-menu { height: 3.5rem; display: flex; margin: 1rem auto auto auto; border-top: 1px solid #ddd; align-items: center; justify-content: center; position: relative; margin-bottom: 20px; } #view .icon-menu > ul { width: calc(19.2rem - 5.1rem); display: flex; justify-content: space-between; font-size: 0.23rem; } #view .icon-menu > ul li { width: 24%; text-align: center; } #view .icon-menu > ul > li img { width: 1.6rem; display: block; margin: auto; } #view .icon-menu > ul > li p { margin-top: 0.2rem; } } @media (min-width: 1280px) { .hightlights--text > ul { min-height: 40px; } } @media (max-width: 767px) { #view .carousel .carousel-click { width: 0.5rem; height: 0.5rem; background: whitesmoke; border-radius: 50%; position: absolute; z-index: 20; top: 43%; transform: translateY(-50%); } #view .carousel .carousel-prev { left: 5%; } #view .carousel .carousel-next { right: 5%; } #view .carousel .carousel-click > img { display: block; width: 0.15rem; margin: 0.12rem 0.18rem; } } /* slick kv */ .kv-silder .slick-dots { display: none !important; position: absolute; bottom: 0; width: 100%; text-align: center; height: auto; } @media (min-width: 768px) { .kv-silder .slick-dots { display: block !important; } } .kv-silder .slick-dots li { position: relative; display: inline-block; vertical-align: middle; background: #737373; width: 5px; height: 5px; overflow: hidden; margin: 0 10px; border-radius: 50px; border: 1px solid #666; } .kv-silder .slick-dots li.slick-active { background-color: #fdc100; border: 1px solid #fdc100; width: 7px; height: 7px; } .kv-silder .slick-dots button { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .kv-item { position: relative; display: block !important; overflow: hidden; } @media only screen and (max-width: 768px) { .style-for-margin { margin-top: 0; } } .kv-item figure { margin: 0; } @media (max-width: 767px) { .kv-item figure { position: relative; margin: 0; padding-top: 56%; } .kv-item figure > img { position: absolute; top: 0; left: 50%; max-width: none; width: auto; height: 100%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); } } .kv-item img { max-width: 100%; } .kv-item .desktop-banner { display: none; } @media (min-width: 768px) { .kv-item .desktop-banner { display: block; max-width: none; width: 100%; position: relative; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); } .kv-item .mobile-banner { display: none; } } .kv-silder-container { position: relative; } .kv-silder-container .slick-arrow { position: absolute; top: 35vw; background-color: #fff; z-index: 1; width: 35px; padding-top: 35px; border-radius: 100px; border: 1px solid #ddd; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); } .kv-silder-container .slick-arrow > span { background: unset; } .hightlights .slick-btn { outline: none; } .hightlights-price .price { background-color: unset; } @media (min-width: 768px) { .kv-silder-container .slick-arrow { top: 50%; } .kv-silder-container .slick-arrow:hover { box-shadow: #888 0px 0px 20px; } } .kv-silder-container .slick-arrow img { position: absolute; top: 50%; left: 50%; width: 33%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .slick-arrow { text-align: center; cursor: pointer; } .btn-ks-prev { left: 10px; } @media (min-width: 768px) { .btn-ks-prev { left: 50px; } } .btn-ks-next { right: 10px; } @media (min-width: 768px) { .btn-ks-next { right: 50px; } } .kv-item .imgTopClick { padding: 15px 20px; width: auto; height: auto; } @media (min-width: 768px) { .kv-item .imgTopClick { position: absolute; top: 50%; left: 25%; padding: 0; font-size: 12px; width: 500px; opacity: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transition: opacity 1s, left 1s; -webkit-transition: opacity 1s, left 1s; transition-delay: 1s; } .slick-active .imgTopClick { opacity: 1; left: 18%; } .slick-active .imgTopClick.center { opacity: 1; left: 25%; } .slick-active .imgTopClick.right { opacity: 1; left: 41%; } } @media (min-width: 1068px) { .kv-item .imgTopClick { width: 400px; } .slick-active .imgTopClick { opacity: 1; left: 17%; } .slick-active .imgTopClick.center { opacity: 1; left: 34%; } .slick-active .imgTopClick.right { opacity: 1; left: 47%; } } @media (min-width: 1400px) { .kv-item .imgTopClick { width: 600px; } .slick-active .imgTopClick { opacity: 1; left: 17%; } .slick-active .imgTopClick.center { opacity: 1; left: 34%; } .slick-active .imgTopClick.right { opacity: 1; left: 57%; } } .kv-item h2 { font-size: 6vw; color: #fdc100; font-weight: normal; text-overflow: ellipsis; overflow: hidden; } @media (min-width: 768px) { .kv-item h2 { font-size: 35px; text-shadow: 2px 2px 2px #865f02; } } @media (min-width: 1080px) { .kv-item h2 { font-size: 0.62rem; } } .kv-item p { font-size: 4vw; margin-right: 8%; margin-top: 2%; margin-bottom: 2%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: auto; text-overflow: ellipsis; } @media (min-width: 768px) { .kv-item p { font-size: 20px; max-height: 58px; height: auto; margin-bottom: 20px; text-shadow: 2px 2px 2px #ffffff; } } @media (min-width: 1080px) { .kv-item p { font-size: 0.32rem; max-height: 1.2rem; margin: 0.6em 0 0.5rem; } } .kv-item span { font-size: 3.5vw; white-space: nowrap; padding: 2% 4%; background: #fdc100; text-align: center; line-height: 1; } @media (min-width: 768px) { .kv-item span { font-size: 14px; height: 58px; padding: 6px 20px; } } @media (min-width: 1080px) { .kv-item span { font-size: 0.26rem; padding: 6px 20px; } } /* Homepage Banner */ .homebanners-container { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; } .homebanners-container .homebanner { width: 100%; margin: 0 0 2% 0; /* padding-top: 40%; */ position: relative; } .homebanners-container .homebanner.fullwidth { margin-bottom: 15px; } .homebanners-container .homebanner.mini { width: calc(50% - 16px); max-width: 702px; margin: 40px 8px; padding-top: 28%; overflow: hidden; border-radius: 20px; font-size: 0.6em; } .homebanners-container .homebanner.mini:nth-child(even) { margin-right: 8px; } .homebanners-container .homebanner.mini:nth-child(odd) { margin-left: 8px; } .homebanners-container .homebanner.mini .homebanner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .homebanners-container .homebanner.mini .homebanner-image img { min-height: auto; height: 100%; } .homebanners-container .homebanner.mini .homebanner-content h3 { max-width: 80%; } .homebanner-image { position: relative; } .homebanner-image img { height: auto; width: 100%; } .homebanner-content { box-sizing: border-box; position: absolute; width: 100%; height: 100%; top: 0; left: 0; line-height: 1.4; text-align: center; letter-spacing: 0.05em; } [lang='en-US'] .homebanner-content { letter-spacing: normal; } .homebanner-content > * { box-sizing: border-box; width: 100%; max-width: 1440px; padding: 0 20px; margin: 0 auto 5px; } .homebanner-content *.white, .homebanner-content *.white a { color: #ffffff; } .homebanner-content *.black, .homebanner-content *.black a { color: #343434; } .homebanner-content *.yellow, .homebanner-content *.yellow a { color: #fdc100; } .homebanner-content h2 { font-size: clamp(24px, 0.6em, 55px); font-weight: bold !important; } .homebanner-content h3 { font-size: clamp(16px, 0.3em, 30px); } .homebanner-content .homebanner-desc { font-size: clamp(16px, 0.28em, 28px); } .homebanner-content .homebanner-link { font-size: clamp(16px, 0.23em, 24px); position: relative; display: flex; align-items: center; justify-content: center; margin: 0 0 10px 0; } .homebanner-content .homebanner-link:after { content: ''; display: inline-block; position: relative; border: solid #343434; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); border: solid #fdc100; border-width: 0 2px 2px 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .homebanner-content *.yellow:after { border-color: #fdc100; } .homebanner-content *.white:after { border-color: #ffffff; } .homebanner-content *.black:after { border-color: #343434; } .homebanner-content .homebanner-link a { position: relative; display: flex; align-items: center; justify-content: center; } .homebanner-content .homebanner-link a:after { content: ''; display: inline-block; position: relative; border: solid #343434; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; margin-bottom: 2.5px; margin-left: 5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .homebanner-content *.yellow a:after { border: solid #fdc100; border-width: 0 2px 2px 0; } .homebanner-content *.black a:after { border: solid #343434; border-width: 0 2px 2px 0; } .homebanner-content *.white a:after { border: solid #ffffff; border-width: 0 2px 2px 0; } @media screen and (max-width: 1470px) { .homebanners-container .homebanner.mini { width: calc(50% - 32px); } .homebanners-container .homebanner.mini:nth-child(even) { margin-right: 8px; } .homebanners-container .homebanner.mini:nth-child(odd) { margin-left: 8px; } } @media only screen and (max-width: 1024px) { .homebanner-image img { min-height: auto; height: auto; } } @media only screen and (max-width: 768px) { .homebanner-image { background-size: cover; height: auto; position: relative; background-position: top center; } .homebanner-image img { position: relative; width: 100%; top: 0; left: 0; } .homebanners-container .homebanner { padding-top: 0; height: auto; display: flex; flex-direction: column-reverse; margin-bottom: 20px; } .homebanner-content { position: relative; padding-bottom: 1em; padding-top: 1em; } .homebanner-content *.white, .homebanner-content *.white a { color: #343434; } .homebanner.mini .homebanner-content *.white, .homebanner.mini .homebanner-content *.white a { color: #ffffff; } .homebanner-content *.white:after { border-color: #343434; } .homebanner-content .homebanner-link { font-size: clamp(16px, 0.23em, 24px); } .homebanners-container .homebanner.mini { width: 100%; flex-direction: column; border-radius: 0; padding-top: 75%; margin: 20px 0; } .homebanners-container .homebanner.mini:nth-child(even) { margin-right: 0; } .homebanners-container .homebanner.mini:nth-child(odd) { margin-left: 0; } .homebanner.mini .homebanner-image { position: absolute; background-position: bottom center; padding-top: 0; background-size: cover; height: 100%; } .homebanners-container .homebanner.mini .homebanner-content { position: absolute; padding-top: 10px; } .homebanners-container .homebanner.mini .homebanner-content h3 { width: 100%; max-width: 100%; } .homebanner-content h3 { font-size: clamp(16px, 0.35em, 30px); letter-spacing: 0.05em; margin: 5px auto; } .homebanner-content .homebanner-desc { font-size: clamp(16px, 0.28em, 28px); margin: 5px auto; } .homebanner-content .homebanner-link { margin: 10px auto; } .plate { background: #ffffff; padding: 0; width: 100%; } .plate div.plate-container { width: 100%; box-sizing: border-box; margin: 0 0 20px 0; display: flex; background: #ffffff; } .plate div.plate-container a { display: flex; flex-direction: column-reverse; justify-content: center; height: 100%; width: 100%; align-items: stretch; } #view .plate > div h5 { font-size: clamp(24px, 0.5em, 55px); margin: 0 auto 10px; color: #fdc100; font-weight: bold !important; width: 100%; padding: 0; line-height: normal; } #view .plate > div h6 { font-size: clamp(16px, 0.35em, 30px); overflow: hidden; text-overflow: ellipsis; /* line-height: normal; */ padding: 0; } #view .plate > div a > div { margin-bottom: 0; flex: 1; height: 100%; display: flex; justify-content: flex-end; flex-direction: column; } #view .plate > div a > div.plate-content { box-sizing: border-box; padding: 20px; justify-content: flex-start; height: 100%; width: 100%; text-align: center; letter-spacing: 0.05em; line-height: 1.6; background: #fafafa; } #view .plate > div .learn-more-button { margin: 15px auto 0; } }