.top-banner { position: relative; overflow: hidden; } .top-banner a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 31.25%; } .top-banner a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } .global-breadcrumb { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); padding-top: calc(16/1920*100rem); padding-bottom: calc(16/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1024.1px) { .global-breadcrumb { padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .global-breadcrumb .container { position: relative; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1024.1px) { .global-breadcrumb .container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .global-breadcrumb ol { list-style-type: none; padding: 0 /* 0px */; } .global-breadcrumb ol li { position: relative; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .global-breadcrumb ol li:not(:last-child) { margin-right: calc(32/1920*100rem); } @media screen and (max-width: 768px) { .global-breadcrumb ol li { margin-top: calc(8/1920*100rem); } } .global-breadcrumb ol li .active { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .global-breadcrumb ol li .active * { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .global-breadcrumb ol li:hover { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .global-breadcrumb ol li:hover * { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .global-breadcrumb ol li:after { content: '|'; pointer-events: none; z-index: 10; display: block; font-weight: 400; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -1.04167rem; font-size: 16px; height: 16px; width: 12px; } @media (min-width: 1024.1px) { .global-breadcrumb ol li:after { right: -1.45833rem; } } @media screen and (max-width: 1024px) { .global-breadcrumb ol li:after { font-size: 14px; } } .global-breadcrumb ol li:first-child { padding-left: 0 /* 0px */; } .global-breadcrumb ol li:last-child { font-weight: 700; --tw-text-opacity: 1; color: rgb(0 55 103 / var(--tw-text-opacity, 1)); } .global-breadcrumb ol li:last-child * { font-weight: 700; --tw-text-opacity: 1; color: rgb(0 55 103 / var(--tw-text-opacity, 1)); } .global-breadcrumb ol li:last-child:after { display: none; } .global-breadcrumb ol li:last-child a { font-weight: 700; --tw-text-opacity: 1; color: rgb(0 55 103 / var(--tw-text-opacity, 1)); } .global-breadcrumb ol li a, .global-breadcrumb ol li span { font-size: clamp(14px,calc(16/1920*100rem),16px); line-height: 1.25; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } footer { overflow: hidden; } @media (max-width: 1024px) { footer { padding-bottom: calc(32/1920*100rem); } } footer address { padding-left: calc(12/1920*100rem); font-style: normal; } @media (min-width: 1024.1px) { footer address .ModuleContent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(32/1920*100rem); } } footer address li { position: relative; display: block; font-size: clamp(14px,calc(16/1920*100rem),16px); } footer address li * { font-size: clamp(14px,calc(16/1920*100rem),16px); } footer address li a { position: relative; display: block; padding-left: 20px; } footer address li a:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } @media (max-width: 1024px) { footer address li a { margin-bottom: calc(12/1920*100rem); } } footer address li a::before { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; top: 6px; z-index: 10; display: inline-block; height: 6px; width: 6px; min-width: 6px; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(61 61 61 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } footer .social-network .ModuleContent { gap: calc(4/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1024px) { footer .footer-row .column { grid-column: span 1 / span 1; } footer .footer-row .column:last-child { grid-column: span 2 / span 2; } @media screen and (min-width: 768px) and (max-width: 1200px) { .apply-frm .wrap-form footer.form-group .footer-row .column:last-child { grid-column: span 2 / span 2; } } } footer .logo-wrap .img .ModuleContent { position: relative; display: block; height: 0; overflow: hidden; padding-top: 100%; } footer .logo-wrap .img .ModuleContent img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } footer .logo { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 60px; width: auto; min-width: 65px; } footer .logo img { width: auto; height: 100%; object-fit: contain; } footer .txt { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } @media (min-width: 1200.1px) { footer .txt { padding-right: calc(16/1920*100rem); } } footer .caption { margin-left: calc(12/1920*100rem); border-left-width: 1px; --tw-border-opacity: 1; border-color: rgb(250 215 55 / var(--tw-border-opacity, 1)); padding-left: calc(12/1920*100rem); font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 400; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } footer .caption * { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 400; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media screen and (min-width: 1400px) and (max-width: 1600px) { footer .caption { font-size: clamp(16px,calc(18/1920*100rem),18px); } footer .caption * { font-size: clamp(16px,calc(18/1920*100rem),18px); } } @media screen and (min-width: 1024px) and (max-width: 1400px) { footer .caption { font-size: clamp(13px,calc(15/1920*100rem),15px); } footer .caption * { font-size: clamp(13px,calc(15/1920*100rem),15px); } } footer .caption strong { font-weight: 700; } footer .caption strong * { font-weight: 700; } footer .caption p { margin-bottom: 0 /* 0px */; } .footer-menu li { margin-bottom: calc(12/1920*100rem); } .footer-menu li:hover a, .footer-menu li.active a { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .footer-menu li:hover a::after, .footer-menu li.active a::after { opacity: 1; } .footer-menu a { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-bottom: 2px; font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .footer-menu a::after { content: ''; pointer-events: none; bottom: 0 /* 0px */; z-index: 10; display: block; height: 1px; width: 100%; --tw-bg-opacity: 1; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); opacity: 0; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .subscribe .subscribefrm { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .subscribe input { height: 40px; width: 100%; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); box-shadow: 4px 4px 40px 0px #00000014; } @media screen and (max-width: 576px) { .subscribe input { padding-right: 90px; } } .subscribe input::-webkit-input-placeholder { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; } .subscribe input::-moz-placeholder { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; } .subscribe input:-ms-input-placeholder { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; } .subscribe input::-ms-input-placeholder { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; } .subscribe input::placeholder { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; } .subscribe button { position: relative; z-index: 20; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); padding-left: calc(24/1920*100rem); padding-right: calc(24/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 2.5rem; min-height: 40px; } @media (min-width: 576.1px) { .subscribe button { margin-top: calc(16/1920*100rem); } } @media screen and (max-width: 576px) { .subscribe button { position: absolute; top: 0 /* 0px */; right: 0 /* 0px */; height: 40px; } } .subscribe button:hover { --tw-bg-opacity: 1; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); } .subscribe button:hover::after { -webkit-animation: l-t-r 0.4s forwards; animation: l-t-r 0.4s forwards; } .subscribe button::after { content: '\f178'; pointer-events: none; position: relative; z-index: 20; margin-left: calc(12/1920*100rem); height: 100%; width: 100%; font-family: 'Font Awesome 6 Pro'; font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; -webkit-animation: r-t-l 0.4s forwards; animation: r-t-l 0.4s forwards; } .subscribe .fa-exclamation-triangle { font-weight: 700; --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); font-family: "Inter Tight", sans-serif !important; font-size: 16px; } @media screen and (max-width: 576px) { .subscribe .fa-exclamation-triangle { font-size: 10px; font-weight: 700 } } .subscribe .fa-exclamation-triangle:before { font-family: 'Font Awesome 6 Pro' !important; } .social-network a { height: 40px; width: 40px; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(24 104 179 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .social-network a:hover { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); } .social-network a em, .social-network a i { font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .primary-banner { position: relative; } .primary-banner .swiper { margin: 0 !important; padding: 0 !important; } .primary-banner .swiper .swiper-wrapper { margin: 0 !important; padding: 0 !important; } .primary-banner .swiper-slide { pointer-events: none; z-index: 0; height: auto; margin: 0 !important; padding: 0 !important; } .primary-banner .swiper-slide.swiper-slide-active { pointer-events: auto; z-index: 30; } .primary-banner .swiper-slide.swiper-slide-active .txt { opacity: 0; -webkit-animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0.7s both; animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) 0.7s both; } .primary-banner .block-title span { font-size: clamp(34px,calc(40/1920*100rem),40px); font-weight: 600; } .primary-banner .block-title span * { font-weight: 600; } @media (min-width: 1200.1px) { .primary-banner .block-title span { font-size: clamp(48px,calc(64/1920*100rem),64px); } } .primary-banner .block-title strong { font-size: clamp(34px,calc(40/1920*100rem),40px); font-weight: 600; } .primary-banner .block-title strong * { font-weight: 600; text-shadow: 0px 6px 6px 0px #00000040; } @media (min-width: 1200.1px) { .primary-banner .block-title strong { font-size: clamp(48px,calc(64/1920*100rem),64px); } } .primary-banner .img { position: relative; } .primary-banner .img a { position: relative; } .primary-banner .img a::before { content: ''; pointer-events: none; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); max-height: 22.91667rem; } @media (max-width: 1200px) { .primary-banner .img a::before { max-height: 45%; } .primary-banner .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 90%; } .primary-banner .img a img, .primary-banner .img a picture, .primary-banner .img a video, .primary-banner .img a iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (max-width: 576px) { .primary-banner .img a { padding-top: 180%; } } @media (min-width: 1200.1px) { .primary-banner .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: calc( 100vh - 108px); width: 100%; } .primary-banner .img a img, .primary-banner .img a video, .primary-banner .img a iframe { width: 100%; height: 100%; object-fit: cover; } } .primary-banner .video { position: relative; } .primary-banner .video::after { content: ''; pointer-events: none; z-index: 999; display: block; width: 100%; overflow: hidden; border-radius: 9999px; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.6; font-family: 'Font Awesome 6 Pro'; font-size: clamp(48px,calc(64/1920*100rem),64px); font-weight: 300; opacity: 0; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; width: 4.16667rem; height: 4.16667rem; min-width: 4.16667rem; background-size: 20px 25px !important; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml;charset=utf-8,"); } .primary-banner .video.pause::after { opacity: 1; } .primary-banner .video a { pointer-events: none !important; } .primary-banner .yt-video-item { height: 100%; width: 100%; } @media (max-width: 1200px) { .primary-banner .yt-video-item { position: relative; display: block; height: 0; overflow: hidden; padding-top: 90%; } .primary-banner .yt-video-item img, .primary-banner .yt-video-item picture, .primary-banner .yt-video-item video, .primary-banner .yt-video-item iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (max-width: 768px) { .primary-banner .yt-video-item { padding-top: 180%; } } @media (min-width: 1200.1px) { .primary-banner .yt-video-item { position: relative; display: block; height: 0; overflow: hidden; padding-top: 39.375%; } .primary-banner .yt-video-item img, .primary-banner .yt-video-item picture, .primary-banner .yt-video-item video, .primary-banner .yt-video-item iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } .primary-banner .yt-video-item iframe { pointer-events: none; } .primary-banner .txt-wrap { pointer-events: none; z-index: 60; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; height: -webkit-fill-available; padding-bottom: 8.85417rem; } @media (max-width: 1200px) { .primary-banner .txt-wrap { padding-bottom: 6.25rem; } } .primary-banner .txt { text-align: center; } @media (min-width: 1200.1px) { .primary-banner .txt { margin-left: auto; margin-right: auto; max-width: 53.125rem; } } .primary-banner .pagination-wrap { bottom: 0 /* 0px */; z-index: 20; padding-bottom: calc(32/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .primary-banner .swiper-pagination { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; overflow: hidden; border-radius: 9999px; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.4; padding: calc(16/1920*100rem); padding-bottom: calc(12/1920*100rem); } .primary-banner .swiper-pagination .swiper-pagination-bullet { position: relative; overflow: hidden; border-radius: 9999px; opacity: 1; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; height: 40px !important; width: 40px !important; min-width: 40px !important; background-size: cover !important; background-repeat: no-repeat !important; } @media (min-width: 1200.1px) { .primary-banner .swiper-pagination .swiper-pagination-bullet { height: 4.16667rem !important; width: 4.16667rem !important; min-width: 4.16667rem !important; } } .primary-banner .swiper-pagination .swiper-pagination-bullet.video::before, .primary-banner .swiper-pagination .swiper-pagination-bullet.video::after { content: ''; pointer-events: none; z-index: 10; display: block; height: 100%; width: 100%; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.4; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .primary-banner .swiper-pagination .swiper-pagination-bullet.video::after { content: ''; font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 300; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); opacity: 0.4; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-size: 13px 18px !important; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml;charset=utf-8,"); } @media (min-width: 1200.1px) { .primary-banner .swiper-pagination .swiper-pagination-bullet.video::after { font-size: clamp(20px,calc(24/1920*100rem),24px); background-size: 20px 25px !important; } } .primary-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { box-shadow: 0px 0px 0px 2px #08a64e inset; } .primary-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before { border-radius: 9999px; width: calc(100% - 4px); height: calc(100% - 4px); } .primary-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { background-color: transparent; opacity: 1; } .primary-banner .container { bottom: 0 /* 0px */; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .checkout-cart-toggle { position: static; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; cursor: pointer; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 1200px) { .checkout-cart-toggle { margin-right: calc(32/1920*100rem); } } @media (max-width: 576px) { .checkout-cart-toggle { margin-right: calc(16/1920*100rem); } } @media (min-width: 1200.1px) { .checkout-cart-toggle { position: relative; } } .checkout-cart-toggle .ModuleContent { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .checkout-cart-toggle .cart-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .checkout-cart-toggle .cart-icon { position: relative; height: 40px; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(239 239 239 / var(--tw-bg-opacity, 1)); padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .checkout-cart-toggle .cart-icon * { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; --tw-text-opacity: 1; color: rgb(0 55 103 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .checkout-cart-toggle .cart-icon span { margin-left: calc(8/1920*100rem); margin-right: calc(4/1920*100rem); } @media screen and (max-width: 1600px) { .checkout-cart-toggle .cart-icon span { display: none; } } .checkout-cart-toggle .cart-icon .quantity { font-weight: 500; --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } @media screen and (max-width: 1600px) { .checkout-cart-toggle .cart-icon .quantity { margin-left: calc(8/1920*100rem); } } .checkout-cart-toggle .cart-icon:hover { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); } .checkout-cart-toggle .cart-icon:hover span, .checkout-cart-toggle .cart-icon:hover em, .checkout-cart-toggle .cart-icon:hover .quantity { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .shopping-cart-wrapper { pointer-events: none; right: 0 /* 0px */; top: 100%; z-index: 50; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); padding-left: calc(20/1920*100rem); padding-right: calc(20/1920*100rem); opacity: 0; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05); width: 370px; } @media screen and (max-width: 576px) { .shopping-cart-wrapper { width: 320px; } } .shopping-cart-wrapper:hover { cursor: pointer; } .shopping-cart-wrapper.open { pointer-events: auto; z-index: 50; opacity: 1; } .shopping-cart-wrapper .remove-item { position: absolute; right: 0 /* 0px */; top: 0 /* 0px */; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .shopping-cart-wrapper .remove-item * { text-align: center; } .shopping-cart-wrapper .remove-item .text { margin-bottom: calc(16/1920*100rem); font-weight: 500; font-size: clamp(14px, 0.83333rem, 16px); } .shopping-cart-wrapper .remove-item .btn-primary em { height: 14px !important; line-height: 14px !important; margin-right: calc(8/1920*100rem); display: inline-block } .shopping-cart-wrapper .remove-item .btn-primary:hover em, .shopping-cart-wrapper .remove-item .btn-primary:hover span { -webkit-transform: none !important; transform: none !important; } .shopping-cart-wrapper .close-cart { position: absolute; top: 0; right: 0; z-index: 50; padding: 0 6px 6px 6px; } .shopping-cart-wrapper .close-cart em { color: #e52322; height: 20px; font-size: 20px; line-height: 20px; } .shopping-cart-wrapper .head { border-bottom: 3px solid #ebebeb; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: calc(12/1920*100rem) } .shopping-cart-wrapper .cart-quantity { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .shopping-cart-wrapper .cart-quantity span { font-size: clamp(12px,calc(14/1920*100rem),14px); } .shopping-cart-wrapper .cart-quantity .amount { padding-left: calc(4/1920*100rem); padding-right: calc(4/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 700; line-height: 1; --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); } .shopping-cart-wrapper .body { width: 100%; padding-bottom: calc(32/1920*100rem); padding-top: calc(16/1920*100rem); } @media screen and (max-width: 1024px) { .shopping-cart-wrapper .body .scroll-wrap { height: 330px; } } .shopping-cart-wrapper .wrap-center { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8/1920*100rem); } .shopping-cart-wrapper .wrap-center .btn-primary { height: 40px; width: 100% } .shopping-cart-wrapper .wrap-center .btn-primary span { font-size: clamp(13px,calc(15/1920*100rem),15px); } .shopping-cart-wrapper .cart-item { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); border-bottom: 1px solid #ebebeb; height: 90px; } .shopping-cart-wrapper .cart-item:first-child { padding-top: 0 /* 0px */; } .shopping-cart-wrapper .cart-item * { margin-bottom: 0 /* 0px */; } .shopping-cart-wrapper .cart-item .image a { display: block; width: 85px; } .shopping-cart-wrapper .cart-item .image a img { width: 100%; height: 100%; object-fit: scale-down; } .shopping-cart-wrapper .cart-item .caption { padding-left: calc(8/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .shopping-cart-wrapper .cart-item .caption .bottom { margin-top: 0 /* 0px */; } .shopping-cart-wrapper .cart-item .caption .title { padding-right: calc(32/1920*100rem); } .shopping-cart-wrapper .cart-item .caption .title a { margin-bottom: 0 /* 0px */; font-weight: 500; line-height: 1.25; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; font-size: clamp(12px, 0.72917rem, 14px); overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .shopping-cart-wrapper .cart-item .caption .price { margin-top: calc(4/1920*100rem); margin-bottom: calc(4/1920*100rem); font-weight: 700; font-size: clamp(13px, 0.78125rem, 15px); } .shopping-cart-wrapper .cart-item .caption .quantity-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; white-space: nowrap; font-weight: 300; font-size: clamp(12px,calc(14/1920*100rem),14px); } .shopping-cart-wrapper .cart-item .caption .quantity-wrapper .amount { padding-left: calc(4/1920*100rem); font-weight: 300; font-size: clamp(12px,calc(14/1920*100rem),14px); } .shopping-cart-wrapper .sum-price p { margin-bottom: 0 /* 0px */; font-weight: 500; font-size: clamp(12px, 0.78125rem, 15px); } .shopping-cart-wrapper .sum-price p span { font-weight: 600; font-size: clamp(12px, 0.78125rem, 15px); } .shopping-cart-wrapper .item-quantity .input-group { height: 30px; } .shopping-cart-wrapper .item-quantity .input-group-btn { height: 30px; } .shopping-cart-wrapper .item-quantity .input-group-btn input { height: 30px; } .cart-success-popup { pointer-events: none; position: fixed; top: 80px; right: 0 /* 0px */; border-radius: calc(16/1920*100rem); --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); padding-left: calc(24/1920*100rem); padding-right: calc(24/1920*100rem); padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); opacity: 0; --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; z-index: 9999; } .cart-success-popup.is-active { opacity: 1; } @media screen and (max-width: 1200px) { .cart-success-popup { top: 80px; } } .cart-success-popup em, .cart-success-popup p, .cart-success-popup span { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .cart-success-popup em { font-size: 16px; height: 16px; line-height: 16px; margin-right: calc(8/1920*100rem); display: inline-block } @media screen and (max-width: 1024px) { .cart-success-popup em { font-size: 14px; height: 14px; line-height: 14px; } } .cart-success-popup p { margin-bottom: 0 /* 0px */; font-weight: 600; font-size: clamp(14px,calc(16/1920*100rem),16px); } .cart-success-popup p * { font-weight: 600; font-size: clamp(14px,calc(16/1920*100rem),16px); } .cart-success-popup p .number { display: inline-block; padding-left: calc(4/1920*100rem); padding-right: calc(4/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); } .cart-success-popup p .number * { font-size: clamp(14px,calc(16/1920*100rem),16px); } .empty-cart-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: calc(16/1920*100rem); padding-bottom: calc(16/1920*100rem); } .empty-cart-wrapper .text { margin-bottom: calc(16/1920*100rem); text-align: center; font-weight: 400; font-size: clamp(14px, 0.83333rem, 16px); } .empty-cart-wrapper .btn-center .btn em { height: 14px !important; line-height: 14px !important; } .empty-cart-wrapper .btn-center .btn span { color: #fff !important; } .empty-cart-wrapper .btn-center .btn:hover em { -webkit-transform: none !important; transform: none !important; } .item-quantity { overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } @media screen and (max-width: 1280px) { .item-quantity { width: auto; } } .item-quantity.active { z-index: 111; opacity: 1; pointer-events: auto; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; } .item-quantity span { margin-right: calc(20/1920*100rem); white-space: nowrap; font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; } .item-quantity .input-group { width: 120px; min-width: 120px; overflow: hidden; border-radius: 9999px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .item-quantity .input-group-btn { cursor: pointer; --tw-bg-opacity: 1; background-color: rgb(236 244 233 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; height: 40px; width: 40px; min-width: 40px; position: relative; } .item-quantity .input-group-btn:hover { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); } .item-quantity .input-group-btn:hover em { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .item-quantity .input-group-btn .qty-plus, .item-quantity .input-group-btn .qty-minus { height: 100%; width: 100%; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .item-quantity .input-group-btn em { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 300; line-height: 1; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .item-quantity input { border: 0; text-align: center; background: #ffffff; width: 40px; height: 39px; font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500 } @media screen and (max-width: 1024px) { .item-quantity input { height: 32px; width: 40px; } } .item-quantity:hover a { color: #f5f5f5 !important; } .navigation-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 576px) { .navigation-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .navigation-wrapper .btn-left { width: 100%; padding-bottom: calc(32/1920*100rem); } } .navigation-wrapper .temp-total-price { margin-bottom: 15px; } .navigation-wrapper .temp-total-price .price-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .navigation-wrapper .temp-total-price .price-wrapper .text { font-size: 20px; display: inline-block; padding-right: 30px; } @media screen and (max-width: 576px) { .navigation-wrapper .temp-total-price .price-wrapper .text { font-size: 1rem; } } .navigation-wrapper .temp-total-price .price-wrapper .price-text { font-size: 30px; line-height: 30px; height: 30px; font-weight: 700; width: 250px; text-align: right; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } @media screen and (max-width: 576px) { .navigation-wrapper .temp-total-price .price-wrapper .price-text { font-size: 1.5rem; width: 180px; } } .navigation-wrapper .vat-text { margin-bottom: 15px; text-align: right; font-size: 0.72917rem; line-height: 14px; height: 14px; color: #666666; font-style: italic; } .navigation-wrapper .wrap-right { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .navigation-wrapper .btn-secondary em { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .cart-display { padding: 60px 0; } .cart-display .temp-total-price { padding: 10px 0; border-bottom: 1px solid #e1e1e1; } .cart-display .temp-total-price table { width: 100%; } .cart-display .temp-total-price table tr td { font-size: clamp(14px,calc(16/1920*100rem),16px); padding: 10px 0; text-align: right; } .cart-display .temp-total-price table tr td:first-child { text-align: left; font-weight: 700; } .cart-display .note-message { padding-bottom: calc(16/1920*100rem); text-align: right; font-weight: 500; --tw-text-opacity: 1; color: rgb(51 51 51 / var(--tw-text-opacity, 1)); font-size: clamp(14px, 0.83333rem, 16px); } .cart-display .note-message:before { content: '*'; margin-right: calc(8/1920*100rem); --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); display: inline-block; pointer-events: none; z-index: 9; height: 14px; width: 14px; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .cart-display .empty-cart-text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: calc(64/1920*100rem); padding-bottom: calc(64/1920*100rem); } .cart-display .empty-cart-text .cart-button-checkout { margin-top: calc(24/1920*100rem); } @media (min-width: 1024.1px) { .cart-display .empty-cart-text .cart-button-checkout { margin-top: calc(32/1920*100rem); } } .cart-display .empty-cart-text .checkout-title { border: none !important; } .cart-display .empty-cart-text .checkout-title .fas { display: none !important; } .cart-display .cart-table-wrapper table { width: 100%; } .cart-display .cart-table-wrapper table thead th { padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); text-align: left; text-transform: capitalize; } .cart-display .cart-table-wrapper table thead th:last-child { padding-right: 0 /* 0px */ !important; text-align: right !important; } @media screen and (max-width: 1024px) { .cart-display .cart-table-wrapper table tr { border-bottom: 1px solid #e1e1e1; } } .cart-display .cart-table-wrapper table tr td { border-bottom: 1px solid #e1e1e1; padding: 20px 0; } @media screen and (max-width: 1024px) { .cart-display .cart-table-wrapper table tr td { display: block; border-bottom: 0; padding: 10px 0; } .cart-display .cart-table-wrapper table tr td:last-child { padding-bottom: 20px; } } .cart-display .cart-table-wrapper table tr td:first-child { width: 60%; } @media screen and (min-width: 1024px) and (max-width: 1280px) { .cart-display .cart-table-wrapper table tr td:first-child { width: 50%; } } @media screen and (min-width: 1024px) and (max-width: 1024px) { .cart-display .cart-table-wrapper table tr td:first-child { width: 40%; } } @media screen and (max-width: 1024px) { .cart-display .cart-table-wrapper table tr td:first-child { width: 100%; padding-top: 20px; } } @media screen and (min-width: 1024px) { .cart-display .cart-table-wrapper table tr td:nth-child(2), .cart-display .cart-table-wrapper table tr td:nth-child(3) { vertical-align: top; } } @media screen and (max-width: 1024px) { .cart-display .quantity-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .cart-display .quantity-wrap .item-quantity { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 200px; } .cart-display .discount-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } } .cart-display .discount-wrap .old-price { --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); font-size: 0.72917rem; line-height: 14px; text-decoration: line-through; padding: 0 15px; } @media screen and (max-width: 1024px) { .cart-display .discount-wrap .old-price { padding-left: 0; } } .cart-display .discount-wrap .discount { border-left: 1px solid #a7a7a7; font-size: 0.72917rem; line-height: 14px; color: #ed1c24; padding: 0 15px; } @media screen and (max-width: 1024px) { .cart-display .total-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 767px) { .cart-display .total-wrapper { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .cart-display .total-wrapper * { text-align: right; font-size: 0.83333rem; font-weight: 400; } .cart-display .total-wrapper .current, .cart-display .total-wrapper .quantity { margin-bottom: 5px; } .cart-display .total-wrapper .temp-total { font-weight: 700; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } .cart-display .product-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .cart-display .product-item::after { display: none; } @media screen and (max-width: 1024px) { .cart-display .product-item { position: relative; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media (min-width: 1024.1px) { .cart-display .product-item .caption { height: 90px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } } @media screen and (max-width: 767px) { .cart-display .product-item .caption { margin-bottom: 0 /* 0px */; } } .cart-display .product-item .image { margin-right: 20px; } @media screen and (max-width: 767px) { .cart-display .product-item .image { margin: 0 /* 0px */; } } .cart-display .product-item .image a { display: block; height: 90px; max-width: 100px; min-width: 100px; width: auto; } .cart-display .product-item .image a img { width: 100%; height: 100%; object-fit: contain; } .cart-display .product-item .title { display: block; margin-bottom: 5px; } @media screen and (max-width: 1024px) { .cart-display .product-item .title { margin-top: calc(16/1920*100rem); } } .cart-display .product-item .title a { font-size: 0.83333rem; color: #111111; } .cart-display .product-item .remove-item { cursor: pointer !important; --tw-text-opacity: 1 !important; color: rgb(255 0 9 / var(--tw-text-opacity, 1)) !important; display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: start !important; -webkit-justify-content: flex-start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; -webkit-box-align: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; } @media (min-width: 1024.1px) { .cart-display .product-item .remove-item { margin-top: auto; } } @media screen and (max-width: 1024px) { .cart-display .product-item .remove-item { position: absolute; top: 0; right: 0; } } .cart-display .product-item .remove-item em, .cart-display .product-item .remove-item span { --tw-text-opacity: 1 !important; color: rgb(255 0 9 / var(--tw-text-opacity, 1)) !important; } .cart-display .product-item .remove-item em { font-size: 16px; height: 16px; line-height: 16px; display: block; margin-right: 5px; } .cart-display .temp-price { margin-bottom: calc(16/1920*100rem); } .cart-display .temp-price .price-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .cart-display .temp-price .price-wrapper .text { font-size: clamp(15px, 1.04167rem, 20px); display: inline-block; padding-right: 30px; } @media screen and (max-width: 576px) { .cart-display .temp-price .price-wrapper .text { font-size: clamp(14px, 0.83333rem, 16px); } } .cart-display .temp-price .price-wrapper .price-text { font-size: 20px; line-height: 20px; height: 20px; font-weight: 500; width: 250px; text-align: right } @media screen and (max-width: 1024px) { .cart-display .temp-price .price-wrapper .price-text { font-size: clamp(15px, 0.9375rem, 18px); } } @media screen and (max-width: 576px) { .cart-display .temp-price .price-wrapper .price-text { width: 180px; } } .checkout-section .btn-secondary em { margin-right: calc(12/1920*100rem); } .checkout-wrapper { border-radius: 10px; box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.15); margin-bottom: 30px; } .checkout-wrapper.checkout-summary-cart .total-price-wrap { margin-top: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .checkout-wrapper.checkout-summary-cart .total-price-wrap .text { font-size: 0.72917rem; padding: 10px 0; text-align: right; font-weight: 700; } .checkout-wrapper.checkout-summary-cart .total-price-wrap .number { font-size: 1.25rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } .checkout-wrapper.checkout-summary-cart .temp-total-wrap .table-wrap { padding: 10px 0; border-bottom: 1px solid #e1e1e1; } .checkout-wrapper.checkout-summary-cart .temp-total-wrap .table-wrap table { width: 100%; } .checkout-wrapper.checkout-summary-cart .temp-total-wrap .table-wrap table tr td { font-size: clamp(14px,calc(16/1920*100rem),16px); padding: 10px 0; text-align: right; } .checkout-wrapper.checkout-summary-cart .temp-total-wrap .table-wrap table tr td:first-child { text-align: left; font-weight: 700; } .checkout-wrapper.checkout-summary-cart .item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #e1e1e1; padding: 14px 0; } .checkout-wrapper.checkout-summary-cart .item .name { font-size: 0.72917rem; color: #111111; padding-left: 15px; } @media screen and (max-width: 1600px) { .checkout-wrapper.checkout-summary-cart .item .name { padding-left: 5px; } } .checkout-wrapper.checkout-summary-cart .item .name a { font-size: 0.72917rem; color: #111111; } .checkout-wrapper.checkout-summary-cart .item .content .price, .checkout-wrapper.checkout-summary-cart .item .content .quantity { font-size: 0.72917rem; color: #333333; margin-bottom: 5px; white-space: nowrap } .checkout-wrapper.checkout-summary-cart .item .content .total { font-size: 0.72917rem; font-weight: 700; white-space: nowrap; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } .checkout-wrapper.checkout-summary-cart .item .image-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .checkout-wrapper.checkout-summary-cart .item .image-wrap .name a { max-width: 140px; min-width: 140px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media screen and (max-width: 1600px) { .checkout-wrapper.checkout-summary-cart .item .image-wrap .name a { min-width: 80px; } } .checkout-wrapper.checkout-summary-cart .item .image-wrap a { display: block; height: 70px; max-width: 80px; min-width: 80px; width: auto; } .checkout-wrapper.checkout-summary-cart .item .image-wrap a img { width: 100%; height: 100%; object-fit: contain; } @media screen and (max-width: 1024px) { .checkout-wrapper.checkout-dicount { margin-top: calc(40/1920*100rem); } } .checkout-wrapper.checkout-dicount .notice-text { font-size: 0.72917rem; color: #999999; margin-top: 20px; } @media screen and (max-width: 1024px) { .checkout-wrapper.checkout-dicount .notice-text { margin-top: 10px; } } .checkout-wrapper.checkout-dicount .setting-control { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .checkout-wrapper.checkout-dicount .setting-control .coupon-apply-error { position: absolute; left: 0 /* 0px */; font-size: 0.75rem; font-weight: 300; font-style: italic; --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); bottom: -15px; } .checkout-wrapper.checkout-dicount .setting-control input { height: 42px; color: #333333; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 20px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; width: 100%; font-size: clamp(14px,calc(16/1920*100rem),16px) } @media screen and (max-width: 1024px) { .checkout-wrapper.checkout-dicount .setting-control input { width: 100%; } } .checkout-wrapper.checkout-dicount .setting-control button { width: 120px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-top-right-radius: 8px; border-bottom-right-radius: 8px; font-size: 0.83333rem; font-weight: 700; color: white; --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); padding-left: calc(8/1920*100rem); padding-right: calc(8/1920*100rem) } @media screen and (max-width: 1024px) { .checkout-wrapper.checkout-dicount .setting-control button { width: 80px; min-width: 80px; } } .checkout-wrapper.checkout-shipping .shipping-option .services { margin-top: 15px; } .checkout-wrapper.checkout-shipping .shipping-option .services select { padding: 0 20px; height: 42px; border-radius: 5px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1)); width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: left; color: #999999; } .checkout-wrapper.checkout-shipping .form-shipping { padding: 0 0 0 30px; } .checkout-wrapper.checkout-shipping .shipping-option { position: relative; } .checkout-wrapper.checkout-shipping .shipping-option .shipping-method { position: relative; } .checkout-wrapper.checkout-shipping .form-group { position: relative; margin-bottom: 20px; } .checkout-wrapper.checkout-shipping .form-group input[type='radio'] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; z-index: 20; margin-left: -30px; } .checkout-wrapper.checkout-shipping .form-group input[type='radio']:checked ~ label::before { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); content: '\f192'; } .checkout-wrapper.checkout-shipping .form-group label { position: relative; z-index: 10; font-size: 0.83333rem; color: #999999; border-radius: 5px; border: 1px solid #e1e1e1; padding: 16px 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #fafafa; min-height: 42px; pointer-events: none; } .checkout-wrapper.checkout-shipping .form-group label:before { content: '\f111'; font-family: 'Font Awesome 6 Pro'; display: block; position: absolute; pointer-events: none; left: -30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; height: 18px; width: 18px; color: #999999; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .checkout-wrapper.checkout-address .content-wrapper { padding-bottom: 20px !important; } .checkout-wrapper.checkout-address .checkout-form .form-group { margin-bottom: 20px; position: relative; } .checkout-wrapper.checkout-address .checkout-form .form-group label.error { position: absolute; left: 0; font-size: 0.625rem; --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); bottom: -15px; } @media screen and (min-width: 1024px) { .checkout-wrapper.checkout-address .checkout-form .form-group label.error { bottom: -20px; left: 170px; } } .checkout-wrapper.checkout-address .checkout-form .form-group label.error::before { display: none; } @media screen and (min-width: 1024px) { .checkout-wrapper.checkout-address .checkout-form .form-group { margin-bottom: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .checkout-wrapper.checkout-address .checkout-form .form-group .fa-exclamation-triangle { position: absolute; left: 0; font-size: 0.625rem; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); bottom: -15px; } @media screen and (min-width: 1024px) { .checkout-wrapper.checkout-address .checkout-form .form-group .fa-exclamation-triangle { bottom: -20px; left: 170px; } } .checkout-wrapper.checkout-address .checkout-form .form-group .fa-exclamation-triangle::before { display: none; } .checkout-wrapper.checkout-address .checkout-form .form-group .select-chevron { overflow: hidden; position: relative; width: 100%; } @media screen and (max-width: 1024px) { .checkout-wrapper.checkout-address .checkout-form .form-group .select-chevron { width: 100%; } } .checkout-wrapper.checkout-address .checkout-form .form-group .select-chevron:before { content: '\f078'; font-family: 'Font Awesome 6 Pro'; display: block; position: absolute; right: 15px; top: 50%; color: #999999; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; pointer-events: none; font-size: 20px; } .checkout-wrapper.checkout-address .checkout-form .form-group .select-chevron select { box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; width: 100%; } @media screen and (max-width: 1024px) { .checkout-wrapper.checkout-address .checkout-form .form-group .select-chevron select { width: 100%; } } .checkout-wrapper.checkout-address .checkout-form .form-group .select-chevron select::-ms-expand { display: none; } .checkout-wrapper.checkout-address .checkout-form .form-group label { width: 170px; min-width: 170px; font-size: 0.83333rem; display: inline-block; } @media screen and (max-width: 1024px) { .checkout-wrapper.checkout-address .checkout-form .form-group label { margin-bottom: 10px; } } .checkout-wrapper.checkout-address .checkout-form .form-group label.require::after { content: '*'; display: inline-block; font-size: 0.83333rem; --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)) } .checkout-wrapper.checkout-address .checkout-form .form-group input[type='text'], .checkout-wrapper.checkout-address .checkout-form .form-group select, .checkout-wrapper.checkout-address .checkout-form .form-group textarea { padding: 0 20px; height: 42px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); padding-top: calc(4/1920*100rem); padding-bottom: calc(4/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); border-radius: 5px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: left; } .checkout-wrapper.checkout-address .checkout-form .form-group input::-webkit-input-placeholder, .checkout-wrapper.checkout-address .checkout-form .form-group textarea::-webkit-input-placeholder { font-size: clamp(12px,calc(14/1920*100rem),14px); color: #999999; } .checkout-wrapper.checkout-address .checkout-form .form-group input::-moz-placeholder, .checkout-wrapper.checkout-address .checkout-form .form-group textarea::-moz-placeholder { font-size: clamp(12px,calc(14/1920*100rem),14px); color: #999999; } .checkout-wrapper.checkout-address .checkout-form .form-group input:-ms-input-placeholder, .checkout-wrapper.checkout-address .checkout-form .form-group textarea:-ms-input-placeholder { font-size: clamp(12px,calc(14/1920*100rem),14px); color: #999999; } .checkout-wrapper.checkout-address .checkout-form .form-group input::-ms-input-placeholder, .checkout-wrapper.checkout-address .checkout-form .form-group textarea::-ms-input-placeholder { font-size: clamp(12px,calc(14/1920*100rem),14px); color: #999999; } .checkout-wrapper.checkout-address .checkout-form .form-group input::placeholder, .checkout-wrapper.checkout-address .checkout-form .form-group textarea::placeholder { font-size: clamp(12px,calc(14/1920*100rem),14px); color: #999999; } .checkout-wrapper.checkout-address .checkout-form .form-group textarea { padding-top: 15px; height: 3.64583rem; min-height: 60px !important; } .checkout-wrapper .add-address { padding-top: 30px; } @media screen and (max-width: 1024px) { .checkout-wrapper .add-address { padding-top: 10px; } } .checkout-wrapper .add-address span { font-weight: 500; font-size: 0.83333rem; } .checkout-wrapper .add-address a { font-size: 0.83333rem; font-weight: 500; text-decoration: underline; display: inline-block; margin-left: 4px; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } .checkout-wrapper .checkout-title { font-size: 1.25rem; padding: 0 30px; border-bottom-width: 1px; border-bottom-color: rgb(153 153 153 / var(--tw-border-opacity, 1)); --tw-border-opacity: 0.5; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 60px; font-weight: 700; } @media screen and (max-width: 1600px) { .checkout-wrapper .checkout-title { padding: 0 20px; } } .checkout-wrapper .checkout-title .number-quantity { font-weight: 700; display: inline-block; margin: 0 4px; } .checkout-wrapper .content-wrapper { padding: 20px 30px 30px 30px; } @media screen and (max-width: 1600px) { .checkout-wrapper .content-wrapper { padding: 20px; } } .checkout-wrapper .note-text { display: block; margin-top: 10px; font-size: 0.72917rem; color: #999999; } @media screen and (min-width: 1024px) { .checkout-wrapper .note-text { position: absolute; left: 0; bottom: -40px; left: 170px; } } .checkout-information { padding: 3.125rem 0 5.20833rem; } @media screen and (max-width: 1024px) { .checkout-information .col-lg-8, .checkout-information .col-lg-4 { width: 100%; } } .checkout-payment .form-payment { padding: 0 0 0 30px; } .checkout-payment .qradio { margin-bottom: 20px; } .checkout-payment .img { padding-top: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 70px; width: auto; } @media (min-width: 576.1px) { .checkout-payment .img { padding-top: 0 /* 0px */; padding-right: calc(20/1920*100rem); } } .checkout-payment .img img { width: auto; height: 100%; object-fit: contain; } .checkout-payment .text-wrap { text-align: left; } @media screen and (max-width: 576px) { .checkout-payment .text-wrap { padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); text-align: center; } } .checkout-payment .form-group { position: relative; margin-bottom: 20px; } .checkout-payment .form-group input[type='radio'] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; z-index: 20; margin-left: -30px; } .checkout-payment .form-group input[type='radio']:checked ~ label::before { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); content: '\f192'; } .checkout-payment .form-group label { position: relative; z-index: 10; font-size: 0.83333rem; color: #999999; border: 1px solid #e1e1e1; padding: 14px 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background: #fafafa; min-height: 90px; pointer-events: none; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; border-radius: 5px; } @media screen and (min-width: 576.1px) { .checkout-payment .form-group label { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 576px) { .checkout-payment .form-group label { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 20px 0 0; } } .checkout-payment .form-group label:before { content: '\f111'; font-family: 'Font Awesome 6 Pro'; display: block; position: absolute; pointer-events: none; left: -30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; height: 18px; width: 18px; color: #999999; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .checkout-payment .form-group .image-wrapper { padding: 0; } @media screen and (max-width: 576px) { .checkout-payment .form-group .image-wrapper { border-right: 0; } } .checkout-payment .form-group .image-wrapper a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; border-right: 1px solid #ebebeb; height: 90px; max-width: 100px; min-width: 100px; width: auto; } @media screen and (max-width: 576px) { .checkout-payment .form-group .image-wrapper a { border-right: 0; } } .checkout-payment .form-group .image-wrapper a img { max-width: 100%; height: auto; } @media screen and (max-width: 576px) { .checkout-payment .form-group .image-wrapper a { display: block; height: 80px; max-width: 80px; min-width: 80px; width: auto; padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem) } .checkout-payment .form-group .image-wrapper a img { width: 100%; height: 100%; object-fit: contain; } } .checkout-payment .form-group .content { padding: 20px 0 20px 30px; height: 100%; } @media screen and (max-width: 576px) { .checkout-payment .form-group .content { width: 100%; padding-left: 20px; text-align: center; } } .checkout-payment .form-group .content .title { font-size: 0.83333rem; } .checkout-payment .form-group .content strong { font-weight: 700; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .checkout-payment .form-group .content .text { font-size: 0.83333rem; font-weight: 700; color: #111111; text-transform: uppercase; margin-bottom: 10px; } .checkout-payment .form-group .text-wrap strong { margin-bottom: calc(8/1920*100rem); font-weight: 700; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .checkout-payment .form-group table { width: 100%; } .checkout-payment .form-group table tr td { color: #666666; font-size: 0.83333rem; } @media screen and (max-width: 576px) { .checkout-payment .form-group table tr td { text-align: right; } } .checkout-payment .form-group table tr td:first-child { padding-right: calc(16/1920*100rem); } @media screen and (max-width: 576px) { .checkout-payment .form-group table tr td:first-child { text-align: left; } } .checkout-complete { padding: 3.125rem 0; } .checkout-complete .checkout-wrapper { border-radius: 10px; margin-left: auto; margin-right: auto } @media (min-width: 1200.1px) { .checkout-complete .checkout-wrapper { max-width: 50rem; } } .checkout-complete .checkout-title { border-top-right-radius: 10px; border-top-left-radius: 10px; } .checkout-complete .checkout-title span { font-size: clamp(18px,calc(20/1920*100rem),20px); text-transform: uppercase; } .checkout-complete .checkout-title em { margin-left: calc(12/1920*100rem); display: inline-block; font-size: clamp(18px,calc(20/1920*100rem),20px); } @media (min-width: 1024.1px) { .checkout-complete .checkout-title em { margin-left: calc(16/1920*100rem); } } .checkout-complete .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 12.5rem; width: auto; } .checkout-complete .img a img { width: auto; height: 100%; object-fit: contain; } .checkout-complete .information { margin-bottom: calc(8/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; line-height: 1.5; } .checkout-complete .information * { font: inherit; } .checkout-complete .information p { margin-bottom: calc(8/1920*100rem); font-weight: 500; font-size: clamp(14px,calc(16/1920*100rem),16px); } .checkout-complete .information p strong { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 700 !important; } .checkout-complete .information .order-id { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .checkout-complete .information a { display: inline-block; padding-left: calc(4/1920*100rem); font-weight: 700; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .checkout-complete .information a:hover { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); -webkit-text-decoration-line: underline; text-decoration-line: underline; } .checkout-login-section { padding: 60px 0; } .checkout-login-section .cart-login { margin-bottom: calc(20/1920*100rem); display: block; overflow: hidden; border-radius: calc(16/1920*100rem); --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); padding: 20px; } @media (min-width: 576.1px) { .checkout-login-section .cart-login { min-width: 460px; } } .checkout-login-section #ctl00_mainContent_ctl00_LoginCtrl_lnkPasswordRecovery { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 700; --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); } .checkout-login-section #ctl00_mainContent_ctl00_LoginCtrl_lnkPasswordRecovery:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .checkout-login-section #ctl00_mainContent_ctl00_LoginCtrl_lnkRegisterExtraLink { margin-left: auto; font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 700; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .checkout-login-section #ctl00_mainContent_ctl00_LoginCtrl_lnkRegisterExtraLink:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .checkout-login-section .container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .checkout-login-section .wrapper { width: 500px; border-radius: 10px; } .checkout-login-section .content-wrapper { padding: 20px 30px 40px 20px; background: white; } .checkout-login-section .module-title { margin-top: calc(16/1920*100rem); margin-bottom: calc(16/1920*100rem); text-align: center; font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; } .checkout-login-section .login-heading { margin-bottom: calc(20/1920*100rem); text-align: center; font-size: clamp(26px,calc(32/1920*100rem),32px); font-weight: 700; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .checkout-login-section .select-group ul { padding-left: 30px; } .checkout-login-section .select-group li { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .checkout-login-section .select-group li input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; opacity: 0; } .checkout-login-section .select-group li input:checked ~ label { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .checkout-login-section .select-group li input:checked ~ label::before { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); content: '\f192'; } .checkout-login-section .select-group li label { position: relative; pointer-events: none; font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500 } .checkout-login-section .select-group li label:before { content: '\f111'; font-family: 'Font Awesome 6 Pro'; display: block; position: absolute; pointer-events: none; left: -30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; font-size: 20px; height: 20px; width: 20px; color: #999999; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .checkout-login-section .select-group li:not(:last-child) { margin-bottom: 12px; } .checkout-login-section .login-form .form-group { margin-bottom: 25px; width: 100%; } .checkout-login-section .login-form label { margin-bottom: calc(8/1920*100rem); display: block; font-size: clamp(12px,calc(14/1920*100rem),14px); font-weight: 500; --tw-text-opacity: 1; color: rgb(152 152 152 / var(--tw-text-opacity, 1)); } .checkout-login-section .login-form input[type='text'], .checkout-login-section .login-form input[type='password'] { width: 100%; height: 50px; border-radius: 5px; padding: 0 20px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) } .checkout-login-section .login-form input[type='text']::-webkit-input-placeholder, .checkout-login-section .login-form input[type='password']::-webkit-input-placeholder { color: #999999; font-size: 0.83333rem; } .checkout-login-section .login-form input[type='text']::-moz-placeholder, .checkout-login-section .login-form input[type='password']::-moz-placeholder { color: #999999; font-size: 0.83333rem; } .checkout-login-section .login-form input[type='text']:-ms-input-placeholder, .checkout-login-section .login-form input[type='password']:-ms-input-placeholder { color: #999999; font-size: 0.83333rem; } .checkout-login-section .login-form input[type='text']::-ms-input-placeholder, .checkout-login-section .login-form input[type='password']::-ms-input-placeholder { color: #999999; font-size: 0.83333rem; } .checkout-login-section .login-form input[type='text']::placeholder, .checkout-login-section .login-form input[type='password']::placeholder { color: #999999; font-size: 0.83333rem; } .checkout-login-section .account-recovery { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .checkout-login-section .account-recovery a { display: block; font-size: 0.72917rem; } .checkout-login-section .account-recovery a:first-child { color: #00addf; } .checkout-login-section .account-recovery a:last-child { color: #ed1c24; padding-left: 30px; } .checkout-login-section .login-form input[type='submit'] { cursor: pointer; border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); height: 50px; width: 100%; border-radius: 23px; color: white; font-size: 0.83333rem; font-weight: 700; border: 1px solid transparent; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .checkout-login-section .login-form input[type='submit']:hover { background: white; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } .checkout-login-section .form-group input[type='submit'] { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); height: 50px; width: 100%; border-radius: 23px; color: white; font-size: 0.83333rem; font-weight: 700; border: 1px solid transparent; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .checkout-login-section .form-group input[type='submit']:hover { background: white; border-width: 1px; --tw-border-opacity: 1; border-inline-end-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } .checkout-login-section .social-login { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 20px; } .checkout-login-section .social-login .text { font-size: 0.72917rem; font-weight: 700; text-transform: uppercase; } .checkout-login-section .social-login .wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: 20px; } .checkout-login-section .social-login .wrap a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e1e1e1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .checkout-login-section .social-login .wrap a:first-child { margin-right: 10px; } .checkout-login-section .social-login .wrap a:first-child:hover { background: #1e4488; } .checkout-login-section .social-login .wrap a:first-child:hover em { color: white; } .checkout-login-section .social-login .wrap a:first-child em { color: #1e4488; } .checkout-login-section .social-login .wrap a:nth-child(2) em { color: #da1212; } .checkout-login-section .social-login .wrap a:nth-child(2):hover { background: #da1212; } .checkout-login-section .social-login .wrap a:nth-child(2):hover em { color: white; } .checkout-login-section .social-login .wrap a em { font-size: 18px; line-height: 18px; height: 18px; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .checkout-account-recover-register { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .login-box-msg { text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } header { z-index: 9999; } @media (min-width: 1200.1px) { header { height: 108px; } } @media screen and (max-width: 1200px) { header { height: 60px; } } body.homepage #popup_6 .btn { outline: none !important; bottom: 50px !important; z-index: 60 !important; width: 242px !important; position: absolute !important; left: 50% !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important } @media screen and (max-width: 576px) { body.homepage #popup_6 .btn { bottom: 25px; } } body.homepage #popup_6 a { outline: none !important; } body.overlay-bg { overflow: hidden; } @media (min-width: 1200.1px) { body.minimize header { height: 80px; } body.minimize .header-top { height: 0 /* 0px */; opacity: 0; } body.minimize .header-bottom { height: 80px; } body.minimize .header-right { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } @media (min-width: 1200.1px) { body.minimize .nav-primary-menu .nav-link { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } body.minimize .nav-brand { height: 100px; } @media (min-width: 1200.1px) { body.minimize .mega-menu { top: 80px; } } .drop-mega:hover .mega-menu { pointer-events: auto; opacity: 1; } .drop-mega:hover .prev, .drop-mega:hover .next { pointer-events: auto; } } .mega-menu { pointer-events: none; position: fixed; top: 108px; left: 0 /* 0px */; z-index: 50; padding-top: calc(40/1920*100rem); padding-bottom: calc(40/1920*100rem); opacity: 0; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; box-shadow: 4px 8px 40px 0px #0000001F; } @media screen and (max-width: 1200px) { .mega-menu { display: none !important; } } .mega-menu .container { margin-left: auto; margin-right: auto; padding: 0 /* 0px */; } .mega-menu .prev, .mega-menu .next { border-style: none; top: 24px !important; -webkit-transform: none !important; transform: none !important; height: 4.16667rem; width: 2.08333rem; pointer-events: none; } .mega-menu .prev:hover, .mega-menu .next:hover { background-color: transparent; } .mega-menu .prev:before, .mega-menu .next:before { width: 100%; content: ''; background-repeat: no-repeat !important; background-size: 100% !important; background-position: 100% !important; } .mega-menu .prev:before { background: url("../img/icon/left.svg"); } .mega-menu .next:before { background: url("../img/icon/right.svg"); } .mega-menu .sub-title { --tw-text-opacity: 1; color: rgb(0 55 103 / var(--tw-text-opacity, 1)); } .mega-menu .sub-title:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .header-top { -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } @media screen and (max-width: 1200px) { .header-top .container { position: relative; } } @media (max-width: 1200px) { .header-btn-document { display: none; } } @media (min-width: 1200.1px) { .header-btn-document { margin-right: calc(8/1920*100rem); } } .header-btn-document .btn { padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); } @media screen and (max-width: 1200px) { .header-btn-document .btn span, .header-btn-document .btn em { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } } @media (min-width: 1200.1px) { .header-bottom .container { padding-left: 120px; } } @media (max-width: 1200px) { .header-bottom { display: none; } .logo-container { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } } @media (min-width: 1200.1px) { .logo-container { top: 0 /* 0px */; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .nav-brand { -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } @media (min-width: 1200.1px) { .nav-brand { height: 120px; position: absolute; top: 0 /* 0px */; left: 15px; overflow: hidden; border-bottom-right-radius: calc(48/1920*100rem); border-bottom-left-radius: calc(48/1920*100rem); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding: calc(20/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; box-shadow: 4px 4px 40px 0px #00000014; } } @media (max-width: 1200px) { .nav-brand { height: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .nav-brand a { height: 50px; width: auto; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } @media (min-width: 1200.1px) { .nav-brand a { height: 80px; } } @media screen and (min-width: 1200px) and (max-width: 1280px) { .nav-brand a { height: 80px; } } .nav-brand a img, .nav-brand a svg { width: 100%; height: 100%; object-fit: contain; } .modulepager, .post-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: calc(40/1920*100rem); padding-bottom: 0 /* 0px */; } @media screen and (max-width: 1024px) { .modulepager, .post-nav { padding-bottom: 30px; } } .modulepager ul, .post-nav ul { padding: 0; margin: 0; position: relative; } .modulepager ul li, .post-nav ul li { display: inline-block; padding: 0 10px; } .modulepager ul li.active a, .modulepager ul li.active span, .post-nav ul li.active a, .post-nav ul li.active span { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .modulepager ul li:hover a, .modulepager ul li:hover span, .post-nav ul li:hover a, .post-nav ul li:hover span { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .modulepager ul li span, .modulepager ul li a, .post-nav ul li span, .post-nav ul li a { overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(236 244 233 / var(--tw-bg-opacity, 1)); font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; width: 44px; height: 44px; text-decoration: none; } @media screen and (max-width: 1024px) { .modulepager ul li span, .modulepager ul li a, .post-nav ul li span, .post-nav ul li a { font-size: clamp(16px,calc(18/1920*100rem),18px); height: 40px; width: 40px; } } .modulepager ul .next a, .post-nav ul .next a { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap } @media (min-width: 1024.1px) { .gallery-row .col:nth-child(1), .gallery-row .col:nth-child(2) { width: 50%; } .gallery-row .col:nth-child(1) .gallery-item .img a, .gallery-row .col:nth-child(2) .gallery-item .img a { height: 19.94792rem; } } @media (max-width: 1024px) { .gallery-item .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 80%; } .gallery-item .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (min-width: 1024.1px) { .gallery-item .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 18.33333rem; width: 100%; } .gallery-item .img a img { width: 100%; height: 100%; object-fit: cover; } } .gallery-item .txt { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .gallery-item em { margin-right: calc(8/1920*100rem); font-size: clamp(20px,calc(24/1920*100rem),24px); font-weight: 300; --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } @media (min-width: 576.1px) { .gallery-item em { margin-right: calc(16/1920*100rem); font-size: clamp(26px,calc(32/1920*100rem),32px); } } @media (max-width: 576px) { .gallery-item .sub-title a { font-size: clamp(16px,calc(18/1920*100rem),18px); line-height: 1.25; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .news-detail #ez-toc-container ul li::before { display: none; } .news-detail .other-news-wrapper { position: -webkit-sticky; position: sticky; } .news-detail .time-wrap::after { content: ''; pointer-events: none; left: 0 /* 0px */; z-index: 10; display: block; height: 1px; width: 100%; --tw-bg-opacity: 1; background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } @media screen and (max-width: 1024px) { .news-detail .social-network .wrap { gap: calc(16/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .news-detail .social-network a { height: 48px; width: 48px; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } @media (min-width: 1024.1px) { .news-detail .social-network a:not(:last-child) { margin-bottom: calc(8/1920*100rem); } } .news-detail .social-network a em, .news-detail .social-network a i { font-size: clamp(20px,calc(24/1920*100rem),24px); --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .news-detail .social-network a img { height: 24px; } .news-detail .social-network a:hover { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); } .news-detail .social-network a:hover em, .news-detail .social-network a:hover i { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .news-detail .zone-date::after { display: none; } .news-detail-page .top-banner { display: none; } @media screen and (max-width: 576px) { .other-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12/1920*100rem); } .other-news .zone-date { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .other-news .zone-date .zone { margin-bottom: 3px; } .other-news .zone-date .zone::after { display: none; } } .other-news .side-news:not(:last-child) { margin-bottom: calc(32/1920*100rem); } @media screen and (max-width: 576px) { .other-news .side-news .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 100%; } .other-news .side-news .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } .news-list { overflow: hidden; } @media screen and (max-width: 1024px) { .news-list .zone-nav { margin-bottom: calc(32/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; overflow-x: auto; } .news-list .zone-nav ul { white-space: nowrap; padding-bottom: calc(4/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .news-list .zone-nav ul li:first-child { padding-left: 0 /* 0px */; } } .news-list .zone-nav ul { list-style-type: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } @media screen and (max-width: 1024px) { .news-list .zone-nav ul { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } } .news-list .zone-nav li.active a, .news-list .zone-nav li:hover a { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (min-width: 576.1px) { .news-list .news-item-side .txt { padding-top: 0 /* 0px */; } } .news-list .side-news:not(:last-child) { margin-bottom: calc(32/1920*100rem); } @media (max-width: 576px) { .news-list .side-news { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 576px) { .news-list .side-news .zone-date { padding-top: calc(8/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .news-list .side-news .zone-date .zone { margin-bottom: calc(8/1920*100rem); } .news-list .side-news .zone-date .zone::after { display: none; } } @media (max-width: 576px) { .news-list .side-news .sub-title a { font-size: clamp(14px,calc(16/1920*100rem),16px); } .news-list .side-news .img a { width: 8.33333rem; min-width: 8.33333rem; max-width: 8.33333rem; height: 8.33333rem; } .news-list .side-news .txt { padding-left: calc(20/1920*100rem); padding-top: 0 /* 0px */; } } .news-big .news-item .img a { padding-top: 56%; } .video-item { cursor: pointer; } .side-news { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; } @media (max-width: 576px) { .side-news { margin-bottom: calc(20/1920*100rem); } } @media (min-width: 576.1px) { .side-news { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .side-news:last-child { border-bottom-color: transparent; } .side-news .sub-title { padding-top: 0 /* 0px */; } .side-news .sub-title a { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .side-news .zone-date { padding-top: calc(8/1920*100rem); } .side-news .img { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .side-news .img a { overflow: hidden; border-radius: calc(20/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .side-news .img a img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 576.1px) { .side-news .img a { width: 8.33333rem; min-width: 8.33333rem; max-width: 8.33333rem; height: 8.33333rem; } } .side-news .txt { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 100%; padding-top: calc(16/1920*100rem) } @media (max-width: 576px) { .side-news .txt { padding-bottom: 0 /* 0px */; } } @media (min-width: 576.1px) { .side-news .txt { padding-left: calc(20/1920*100rem); padding-top: 0 /* 0px */; } } .zone-date { margin-bottom: calc(8/1920*100rem); border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(220 220 220 / var(--tw-border-opacity, 1)); font-size: clamp(14px,calc(16/1920*100rem),16px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .zone-date * { position: relative; font-size: clamp(14px,calc(16/1920*100rem),16px); } .zone-date .zone { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .zone-date .zone::after { content: ''; pointer-events: none; z-index: 10; margin-left: calc(8/1920*100rem); margin-right: calc(8/1920*100rem); display: block; height: 10px; width: 1px; --tw-bg-opacity: 1; background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .product-detail-page .top-banner { display: none; } .product-detail .product-main { margin-left: calc(20/1920*100rem); } .product-detail .product-main .img.video::after { content: ''; pointer-events: none; z-index: 10; display: block; height: 32px; width: 32px; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: url("../img/icon/play-icon-2.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media (max-width: 1024px) { .product-detail .product-main .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 100%; } .product-detail .product-main .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (min-width: 1024.1px) { .product-detail .product-main .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 34.73958rem; width: auto; } .product-detail .product-main .img a img { width: auto; height: 100%; object-fit: contain; } } .product-detail .product-thumb { width: 100%; } @media (max-width: 1024px) { .product-detail .product-thumb { margin-top: calc(20/1920*100rem); } } @media (min-width: 1024.1px) { .product-detail .product-thumb { height: 100%; padding-top: 3.64583rem; } .product-detail .product-thumb .swiper { height: 27.86458rem; } } .product-detail .product-thumb .img { position: relative; } .product-detail .product-thumb .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 5.83333rem; width: auto; } @media (min-width: 1024.1px) { .product-detail .product-thumb .img a { height: 5.83333rem; } } .product-detail .product-thumb .img a img { width: 100%; height: 100%; object-fit: contain; } .product-detail .product-thumb .img.video::after { content: ''; pointer-events: none; z-index: 10; display: block; height: 32px; width: 24px; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: url("../img/icon/play-icon-2.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } .product-detail .product-thumb .swiper-slide.swiper-slide-thumb-active .img { --tw-border-opacity: 1; border-color: rgb(250 215 55 / var(--tw-border-opacity, 1)); } .product-detail .row { margin: 0 /* 0px */; padding: 0 /* 0px */; } .product-detail .row .col { padding: 0 /* 0px */; } @media screen and (max-width: 1024px) { .product-detail .row .col { width: 100%; } } @media (max-width: 1024px) { .product-detail .row .col:first-child { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } } @media (min-width: 1024.1px) { .product-detail .row .col:first-child { width: 112px; min-width: 112px; } } @media (max-width: 1024px) { .product-detail .row .col:nth-child(2) { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } } @media (min-width: 1024.1px) { .product-detail .row .col:nth-child(2) { width: calc( 100% - 112px); min-width: calc( 100% - 112px); } } .product-detail .prev, .product-detail .next { z-index: 40; } @media screen and (max-width: 1024px) { .product-detail .prev, .product-detail .next { position: static; margin-top: calc(32/1920*100rem); height: 32px; width: 32px; } } @media (min-width: 1024.1px) { .product-detail .prev, .product-detail .next { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .product-detail .prev::before, .product-detail .next::before { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } @media (min-width: 1024.1px) { .product-detail .prev { top: 0 /* 0px */; } .product-detail .prev:before { -webkit-transform: rotate(-270deg); transform: rotate(-270deg); } .product-detail .next { bottom: 0 /* 0px */; top: unset !important; } .product-detail .next:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .product-detail .swiper-nav { padding: 0 /* 0px */; } .product-detail .btn-file-group { gap: calc(8/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .product-detail .item-quantity { margin-bottom: calc(28/1920*100rem); } @media (min-width: 1200.1px) { .product-detail .item-quantity { margin-bottom: calc(40/1920*100rem); } } .product-detail .btn-group { margin-bottom: calc(12/1920*100rem); border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); padding-bottom: calc(24/1920*100rem); } @media (min-width: 1200.1px) { .product-detail .btn-group { padding-bottom: calc(40/1920*100rem); } } .product-detail .btn-group .btn.btn-primary span { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; } .product-detail .btn-group .btn.btn-primary .icon::before { content: '\f044'; margin-left: calc(16/1920*100rem); font-weight: 300 } .product-detail .btn { width: -webkit-max-content; width: -moz-max-content; width: max-content; padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); } .product-detail .btn span { white-space: nowrap; } .product-detail .btn.btn-tertiary { padding-right: calc(4/1920*100rem); padding-left: 0 /* 0px */; } .product-detail .btn.btn-tertiary span, .product-detail .btn.btn-tertiary .icon:before { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; line-height: 1; --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .product-detail .btn.btn-tertiary .icon:before { margin-left: calc(24/1920*100rem); font-family: 'Font Awesome 6 Pro'; font-weight: 300; content: '\f019'; } .product-detail .btn.btn-tertiary:hover span { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .product-detail .social-network a { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .product-detail .social-network a em, .product-detail .social-network a i { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .product-detail .social-network a:hover { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); -webkit-transform: translateY(-3px); transform: translateY(-3px); } .product-detail .social-network a:hover em, .product-detail .social-network a:hover i { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .btn-group-cart ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; } @media (max-width: 576px) { .btn-group-cart ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12/1920*100rem); } } @media screen and (min-width: 1800px) { .btn-group-cart ul { -webkit-flex-wrap: nowrap !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } } .btn-group-cart li { position: relative; } @media (max-width: 576px) { .btn-group-cart li { grid-column: span 2 / span 2; width: 100%; } @media screen and (min-width: 768px) and (max-width: 1200px) { .apply-frm .wrap-form .form-group.btn-group-cart li { grid-column: span 2 / span 2; } } .btn-group-cart li .btn { width: 100%; } .btn-group-cart li:nth-child(2) { grid-column: span 1 / span 1; } .btn-group-cart li:nth-child(3) { grid-column: span 1 / span 1; } } @media (min-width: 576.1px) { .btn-group-cart li:not(:last-child)::after { content: ''; pointer-events: none; right: -12px; z-index: 10; display: block; height: 16px; width: 1px; --tw-bg-opacity: 1; background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } } .btn-group-cart .btn-checkout, .btn-group-cart .btn-price { padding-left: calc(28/1920*100rem); padding-right: calc(28/1920*100rem); } .fb-comment-wrap { width: 100%; } .fb-comment-wrap * { width: 100%; } .product-detail-banner .product-banner-2 { display: block; } .product-banner .container-fluid { padding: 0 /* 0px */; } @media (min-width: 1024.1px) { .product-banner .img::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 40; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: -webkit-linear-gradient(left, #00702a 0%, rgba(0, 112, 42, 0.35) 20%, rgba(0, 112, 42, 0) 30%); background: linear-gradient(90deg, #00702a 0%, rgba(0, 112, 42, 0.35) 20%, rgba(0, 112, 42, 0) 30%); } } @media (max-width: 1024px) { .product-banner .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 76.75906%; } .product-banner .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (min-width: 1024.1px) { .product-banner .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 37.5rem; width: 100%; } .product-banner .img a img { width: 100%; height: 100%; object-fit: cover; } } @media (max-width: 1024px) { .product-banner .txt { padding-top: calc(40/1920*100rem); padding-bottom: calc(40/1920*100rem); padding-left: calc(20/1920*100rem); padding-right: calc(20/1920*100rem); } } @media (min-width: 1024.1px) { .product-banner .txt { max-width: 36.97917rem; margin-left: auto; padding-right: calc(96/1920*100rem) } } .product-banner .row { margin: 0 /* 0px */; padding: 0 /* 0px */; } .product-banner .row .col { margin: 0 /* 0px */; padding: 0 /* 0px */; } @media (max-width: 1024px) { .product-banner .row .col { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .product-banner .row .col:first-child { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } } .product-detail-2 .tab-nav-2 { width: 100%; --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); } .product-detail-2 .tab-nav-2 ul { gap: calc(40/1920*100rem); padding-bottom: 0 /* 0px */; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media (max-width: 1200px) { .product-detail-2 .tab-nav-2 ul { gap: calc(16/1920*100rem); } } @media screen and (max-width: 1360px) { .product-detail-2 .tab-nav-2 { overflow-x: auto; } .product-detail-2 .tab-nav-2 ul { white-space: nowrap; padding-bottom: calc(4/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .product-detail-2 .tab-nav-2 ul li:first-child { padding-left: 0 /* 0px */; } } .product-detail-2 .tab-nav-2 li { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-style: none; } .product-detail-2 .tab-nav-2 li.active a, .product-detail-2 .tab-nav-2 li:hover a { border-collapse: collapse; --tw-border-opacity: 1; border-color: rgb(250 215 55 / var(--tw-border-opacity, 1)); font-weight: 600; --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .product-detail-2 .tab-nav-2 a { margin: 0 /* 0px */; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-bottom-width: 1px; border-color: transparent; padding: calc(20/1920*100rem); font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 400; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .product-detail-2 .fullcontent ul { margin-bottom: calc(12/1920*100rem); } .product-detail-2 .fullcontent ul li { margin-bottom: 0 /* 0px */; line-height: 1.25; } .product-detail-2 .fullcontent h4 { border-left-width: calc(2/1920*100rem); --tw-border-opacity: 1; border-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); padding-left: calc(16/1920*100rem); font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; line-height: 1; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } @media (min-width: 1200.1px) { .product-detail-2 .fullcontent h4 { padding-left: calc(20/1920*100rem); } } .product-detail-2.layout-2 .tab-nav { border-top-width: calc(2/1920*100rem); border-bottom-width: calc(2/1920*100rem); --tw-border-opacity: 1; border-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); } .product-detail-2 .btn-tertiary { padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); } .product-detail-2 .btn-tertiary span { display: none; font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); font-weight: 400 !important; } .product-detail-2 .btn-tertiary .txt-1 { display: block; } .product-detail-2 .btn-tertiary:hover span { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .product-detail-2 .btn-tertiary .icon:after { content: '\f078'; pointer-events: none; z-index: 10; margin-left: calc(12/1920*100rem); display: block; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-family: 'Font Awesome 6 Pro'; font-size: clamp(18px,calc(20/1920*100rem),20px); --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; font-weight: 400 !important; } .read-more-wrap.is-expand .btn.btn-tertiary .txt-1 { display: none; } .read-more-wrap.is-expand .btn.btn-tertiary .txt-2 { display: block; } .read-more-wrap.is-expand .btn.btn-tertiary .icon { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .read-more-wrap.is-expand .article { height: auto !important; } .read-more-wrap .article { overflow: hidden; } .read-more-wrap .btn-read-more { margin-top: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .read-more-wrap .btn-read-more span { font-size: clamp(12px,calc(14/1920*100rem),14px); font-weight: 700; } .read-more-wrap .btn-read-more.hide { display: none; } .expand-table-wrap tbody tr { display: none; } .expand-table-wrap.is-expanded .btn-tertiary .txt-1 { display: none; } .expand-table-wrap.is-expanded .btn-tertiary .txt-2 { display: block; } .expand-table-wrap.is-expanded .btn-tertiary .icon { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .product-banner-2 { display: none; } .product-banner-2 .item::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 33.93%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 33.93%, rgba(0, 0, 0, 0.2) 100%); } .product-banner-2 .block-wrap { border-radius: 0 3.33333rem 0 3.33333rem; } @media (min-width: 1200.1px) { .product-banner-2 .block-wrap { border-radius: 0 5.20833rem 0 5.20833rem; } } .product-other .product-item { overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); } @media screen and (max-width: 460px) { .product-other .four-swiper .swiper-slide { width: 50%; } } @media screen and (min-width: 1024px) and (max-width: 1600px) { .product-other .product-item .price { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .product-other .product-item .price .old { margin-top: calc(4/1920*100rem); padding-left: 0 /* 0px */; } } @media screen and (max-width: 768px) { .product-other .product-item .price { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .product-other .product-item .price .old { margin-top: calc(4/1920*100rem); padding-left: 0 /* 0px */; } } @media screen and (max-width: 1600px) { .product-other .product-item .btn-wrap { gap: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .product-other .product-item .btn-wrap::after { display: none; } } .table-specs { overflow-x: auto; border: 1px solid #ddd; border-radius: 8px; box-shadow: 4px 4px 40px 0px #00000014; background-color: #fff; padding: 15px; } .table-specs table { width: 100%; border-collapse: collapse; white-space: nowrap; } .table-specs th, .table-specs td { padding: 12px 15px; text-align: center; border: 1px solid #e0e0e0; } .table-specs thead th { background-color: #f8f8f8; color: #333; font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 400 } .table-specs thead tr:first-child th { padding: 15px 15px; text-align: left; font-size: clamp(16px,calc(18/1920*100rem),18px); text-transform: uppercase; color: #fff; font-weight: bold; vertical-align: middle; } .table-specs thead tr:first-child td:first-child { text-align: left; } .table-specs .model-header { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); color: white; font-weight: bold; } .table-specs tbody tr:nth-child(odd) { background-color: #f9f9f9; } .table-specs tbody tr:hover { background-color: #f1f1f1; } .table-specs tbody tr td { font-size: clamp(14px,calc(16/1920*100rem),16px); } .table-specs tbody tr td:first-child { text-align: left; } .table-specs .category-header { --tw-bg-opacity: 1 !important; background-color: rgb(250 215 55 / var(--tw-bg-opacity, 1)) !important; font-weight: bold; text-align: left; font-size: 15px; } .table-specs .category-header td { padding-left: 20px; text-align: left } .side-nav-mobile.is-active .title-nav em { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } @media screen and (max-width: 1024px) { .side-nav { display: none; } } .side-nav .nav-link { overflow: hidden; border-radius: calc(12/1920*100rem); --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); } .side-nav .nav-link:not(:last-child) { margin-bottom: calc(24/1920*100rem); border-bottom-width: 1px; border-color: transparent; } .side-nav .nav-link:hover .title, .side-nav .nav-link.active .title { --tw-border-opacity: 1; border-bottom-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); } .side-nav .nav-link:hover .title > a, .side-nav .nav-link.active .title > a { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .side-nav .nav-link:hover .icon:before, .side-nav .nav-link.active .icon:before { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .side-nav .nav-link.active .nav-menu { display: block; } .side-nav .nav-link .title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; border-bottom-width: 1px; border-color: transparent; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .side-nav .nav-link .title > a { padding-top: calc(16/1920*100rem); padding-bottom: calc(16/1920*100rem); font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .side-nav .icon { position: relative; font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 300; line-height: 1; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; height: 30px; width: 52px; } .side-nav .icon::before { content: '\f078'; pointer-events: none; z-index: 10; height: 100%; width: 100%; font-family: 'Font Awesome 6 Pro'; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .side-nav .nav-menu { display: none; width: 100%; padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); } .side-nav .nav-menu li:not(:last-child) { border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); } .side-nav .nav-menu li:not(:last-child) a { margin-bottom: 0 /* 0px */; } .side-nav .nav-menu li.active a, .side-nav .nav-menu li:hover a { font-weight: 500; --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .side-nav .nav-menu a { width: 100%; padding-top: calc(16/1920*100rem); padding-bottom: calc(16/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 400; line-height: 1.3; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .home-about { overflow: hidden; } .home-about .dash { background: url("../img/bg/home-line.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; } .product-sort-view .headline { display: none; } .product-sort-view .custom-select select { height: 40px; width: 100%; border-radius: calc(8/1920*100rem); --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); padding-top: calc(4/1920*100rem); padding-bottom: calc(4/1920*100rem); padding-left: calc(16/1920*100rem); padding-right: calc(48/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); } @media (min-width: 1024.1px) { .product-sort-view .custom-select select { height: 46px; width: 220px; } } .product-sort-view .custom-select select option { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 400; } @media screen and (max-width: 1024px) { .product-list .block-title { margin-top: calc(28/1920*100rem); } } .product-list .product-item { overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); } @media screen and (min-width: 1024px) and (max-width: 1600px) { .product-list .product-item .price { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .product-list .product-item .price .old { margin-top: calc(4/1920*100rem); padding-left: 0 /* 0px */; } } @media screen and (max-width: 768px) { .product-list .product-item .price { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .product-list .product-item .price .old { margin-top: calc(4/1920*100rem); padding-left: 0 /* 0px */; } } @media screen and (max-width: 1600px) { .product-list .product-item .btn-wrap { gap: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .product-list .product-item .btn-wrap::after { display: none; } } .filter-toggle { display: none; } @media screen and (max-width: 1024px) { .sort-wrap { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .sortable-item { width: 290px; } .sortable-item .custom-select select { width: 100%; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(239 239 239 / var(--tw-bg-opacity, 1)); padding-left: calc(20/1920*100rem); padding-right: calc(20/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; } .sortable-item .custom-select select * { font: inherfit; } .sortable-item .custom-select select option { font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; } .sortable-item .custom-select select option * { font: inherfit; } .sortable-item .custom-select::after { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 300; } .suggest-product-item { padding: calc(8/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .suggest-product-item:hover .title { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .suggest-product-item .title { text-align: left; font-size: clamp(13px,calc(15/1920*100rem),15px); font-weight: 700; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .suggest-product-item .price { text-align: left; font-size: clamp(12px,calc(13/1920*100rem),13px); --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); } .suggest-product-item .price * { font-size: clamp(12px,calc(13/1920*100rem),13px); } .suggest-product-item .img { margin-right: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 90px !important; width: 60px !important; min-width: 60px !important; } .suggest-product-item .img img { width: auto; height: 100%; object-fit: contain; } .product-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .product-item .txt { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; height: 100% } .product-item .img { width: 100%; overflow: visible; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .product-item .img img { object-fit: contain; } .product-item .headline { margin-bottom: calc(4/1920*100rem); } .product-item .headline a { display: -webkit-box; font-size: clamp(17px, 1.04167rem, 20px); height: 2.91667rem; min-height: 47.6px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product-item .discount { margin-bottom: calc(16/1920*100rem); } .product-item .btn-wrap::after { content: ''; pointer-events: none; z-index: 10; display: block; height: 16px; width: 1px; --tw-bg-opacity: 1; background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .product-item .btn-wrap .btn { width: 100%; } .product-figure { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); } .product-figure .txt { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; height: 100% } .product-figure .img { width: 100%; overflow: visible; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .product-figure .headline { margin-bottom: calc(4/1920*100rem); } .product-figure .headline a { display: -webkit-box; font-size: clamp(15px, 0.9375rem, 18px); height: 2.625rem; min-height: 42px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .product-figure .btn-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: calc(4/1920*100rem); } .product-figure .btn { width: 100%; padding-left: calc(12/1920*100rem); padding-right: calc(12/1920*100rem); } .product-figure .btn span { font-size: clamp(12px,calc(14/1920*100rem),14px); } .product-figure .btn .icon::before { font-size: clamp(12px,calc(14/1920*100rem),14px); } .sliding-text-swiper .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .sliding-text-swiper .swiper-slide { pointer-events: none; height: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .sliding-text-swiper span { font-size: clamp(56px,calc(72/1920*100rem),72px); font-weight: 700; opacity: 0.1; } @media (min-width: 1200.1px) { .sliding-text-swiper span { font-size: 6.25rem; } } @media (min-width: 1400.1px) { .sliding-text-swiper span { font-size: 8.33333rem; line-height: 1 } } .sliding-text-swiper .txt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .sliding-text-swiper .txt::before { content: ''; pointer-events: none; z-index: 10; margin-left: calc(40/1920*100rem); margin-right: calc(40/1920*100rem); display: block; height: 40px; width: 40px; min-width: 40px; overflow: hidden; border-radius: 9999px; background-color: rgb(41 41 41 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.1; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } @media (max-width: 1400px) { .sliding-text-swiper .txt::before { margin-left: calc(28/1920*100rem); margin-right: calc(28/1920*100rem); height: 25px; width: 25px; min-width: 25px; } } @media (max-width: 1200px) { .sliding-text-swiper .txt::before { margin-left: calc(20/1920*100rem); margin-right: calc(20/1920*100rem); height: 18px; width: 18px; min-width: 18px; } } .home-banner-3 { overflow: hidden; } .home-banner-3 .swiper-pagination { margin-left: auto; margin-right: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-top: calc(24/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .home-banner-3 .swiper-pagination .swiper-pagination-bullet { position: relative; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1)); opacity: 1; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; height: 8px !important; width: 8px !important; min-width: 8px !important; } .home-banner-3 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); } .home-banner-3 .img { position: relative; } .home-banner-3 .img::after { content: ''; pointer-events: none; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: url("../img/banner/banner-logo.png"); background-repeat: no-repeat; background-size: contain; background-position: bottom center; width: 18.4375rem; height: 14.58333rem; } @media screen and (max-width: 768px) { .home-banner-3 .img::after { width: 10.41667rem; height: 7.29167rem; } } @media screen and (max-width: 420px) { .home-banner-3 .img::after { width: 10.41667rem; height: 4.6875rem; } } .home-banner-2 { overflow: hidden; } .home-banner-2 .row { margin: 0 /* 0px */; padding: 0 /* 0px */; } .home-banner-2 .row .col { position: relative; margin: 0 /* 0px */; padding: 0 /* 0px */; } .home-banner-2 .row .col::before, .home-banner-2 .row .col::after { content: ''; pointer-events: none; position: absolute; bottom: 0 /* 0px */; left: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; max-width: 7.8125rem; max-height: 7.8125rem; } @media (min-width: 1024.1px) { .home-banner-2 .row .col::before, .home-banner-2 .row .col::after { left: 20px; } } @media screen and (max-width: 1024px) { .home-banner-2 .row .col::before, .home-banner-2 .row .col::after { max-width: 3.90625rem; max-height: 3.90625rem; } } @media screen and (max-width: 576px) { .home-banner-2 .row .col::before, .home-banner-2 .row .col::after { max-width: 2.60417rem; max-height: 2.60417rem; } } @media screen and (max-width: 1024px) { .home-banner-2 .row .col:nth-child(1) { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } } .home-banner-2 .row .col:nth-child(1)::before { --tw-bg-opacity: 1; background-color: rgb(250 215 55 / var(--tw-bg-opacity, 1)); right: 0; left: unset !important; bottom: 7.8125rem; } @media (min-width: 1024.1px) { .home-banner-2 .row .col:nth-child(1)::before { right: -20px; } } @media screen and (max-width: 1024px) { .home-banner-2 .row .col:nth-child(1)::before { bottom: 3.90625rem; } } @media screen and (max-width: 576px) { .home-banner-2 .row .col:nth-child(1)::before { bottom: 2.60417rem; } } .home-banner-2 .row .col:nth-child(1)::after { --tw-bg-opacity: 1; background-color: rgb(80 190 190 / var(--tw-bg-opacity, 1)); left: unset !important; right: 6.77083rem; border-top-left-radius: 8.33333rem; } @media screen and (max-width: 1024px) { .home-banner-2 .row .col:nth-child(1)::after { right: 3.90625rem; } } @media screen and (max-width: 576px) { .home-banner-2 .row .col:nth-child(1)::after { right: 2.60417rem; } } @media (min-width: 1024.1px) { .home-banner-2 .row .col:nth-child(2) { padding-left: 20px; } } @media screen and (max-width: 1024px) { .home-banner-2 .row .col:nth-child(2) { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } } .home-banner-2 .row .col:nth-child(2)::before { --tw-bg-opacity: 1; background-color: rgb(24 104 179 / var(--tw-bg-opacity, 1)); bottom: 15.625rem; border-bottom-right-radius: 8.33333rem; } @media screen and (max-width: 1024px) { .home-banner-2 .row .col:nth-child(2)::before { bottom: 7.8125rem; } } @media screen and (max-width: 576px) { .home-banner-2 .row .col:nth-child(2)::before { bottom: 5.20833rem; } } .home-banner-2 .row .col:nth-child(2)::after { --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); border-bottom-right-radius: 8.33333rem; } @media (min-width: 1024.1px) { .home-banner-2 .txt { max-width: 38.02083rem; margin-left: auto; padding-right: 7.8125rem; } } @media screen and (min-width: 1200px) and (max-width: 1360px) { .home-banner-2 .txt { padding-right: 8.85417rem; } } @media (max-width: 768px) { .home-banner-2 .txt { padding-right: 70px; } } @media (max-width: 1024px) { .home-banner-2 .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 68.37607%; } .home-banner-2 .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (min-width: 1024.1px) { .home-banner-2 .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 33.33333rem; width: 100%; } .home-banner-2 .img a img { width: 100%; height: 100%; object-fit: cover; } } .home-banner-2 .single-swiper { position: relative; z-index: 50; } .home-banner-2 .single-swiper .swiper { margin: 0 /* 0px */; padding: 0 /* 0px */; } .home-banner-2 .single-swiper .swiper-slide { margin: 0 /* 0px */; padding: 0 /* 0px */; } .home-news { overflow: hidden; } .home-news .tab-nav ul { gap: calc(16/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .home-news .tab-nav a { border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(239 239 239 / var(--tw-bg-opacity, 1)); padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .home-news .tab-nav li.active a, .home-news .tab-nav li:hover a { --tw-bg-opacity: 1; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media screen and (max-width: 1024px) { .home-news .tab-nav { overflow-x: auto; } .home-news .tab-nav ul { white-space: nowrap; padding-bottom: calc(4/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .home-news .tab-nav ul li:first-child { padding-left: 0 /* 0px */; } } @media screen and (max-width: 576px) { .home-news .zone-date { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .home-news .zone-date .zone { margin-bottom: 3px; } .home-news .zone-date .zone::after { display: none; } .home-news .side-news .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 100%; } .home-news .side-news .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } .home-best-seller { overflow: hidden; } @media screen and (max-width: 1800px) { .home-best-seller .five-swiper .swiper-slide { width: 25%; } } @media screen and (max-width: 1600px) { .home-best-seller .five-swiper .swiper-slide { width: 33.333333%; } } @media screen and (max-width: 768px) { .home-best-seller .five-swiper .swiper-slide { width: 50%; } } @media screen and (max-width: 576px) { .home-best-seller .five-swiper .swiper-slide { width: 100%; } } .home-best-seller .swiper { margin: calc(calc(12/1920*100rem) * -1); margin-left: -8px; margin-right: -8px; padding: 0 /* 0px */; padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); } .home-best-seller .swiper .swiper-slide { padding: 0 8px; } .home-best-seller .container { border-bottom: 1px solid #dbdbdb; } @media (max-width: 1024px) { .home-best-seller .block-wrap { padding-left: 15px; padding-right: 15px; } } .home-partner { overflow: hidden; } .home-partner .txt { padding: 3.125rem; border-radius: 60px 0 60px 0; } @media (min-width: 1200.1px) { .home-partner .txt { min-height: 20.83333rem; max-width: 33.33333rem; } } @media (min-width: 1400.1px) { .home-partner .txt { padding: 5.20833rem 4.6875rem; } } @media (min-width: 1200.1px) { .home-partner .txt { border-radius: 120px 0 120px 0; } } .home-partner .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 5.20833rem; width: auto; } .home-partner .img a img { width: auto; height: 100%; object-fit: contain; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; -webkit-filter: grayscale(1); filter: grayscale(1); } .home-partner .img a:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); } .home-product { overflow: hidden; } .home-product .tab-nav ul { gap: calc(16/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .home-product .tab-nav a { overflow: auto; border-radius: 9999px; border-width: 1px; border-color: transparent; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); padding-left: calc(16/1920*100rem); padding-right: calc(16/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; box-shadow: 4px 4px 20 0px #00000014; } .home-product .tab-nav li.active a { --tw-bg-opacity: 1; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .home-product .tab-nav li:hover a { --tw-border-opacity: 1; border-bottom-color: rgb(0 112 42 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } @media screen and (max-width: 1024px) { .home-product .tab-nav { overflow-x: auto; } .home-product .tab-nav ul { white-space: nowrap; padding-bottom: calc(4/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .home-product .tab-nav ul li:first-child { padding-left: 0 /* 0px */; } } .home-product .four-swiper .swiper { overflow: visible; } @media screen and (max-width: 1800px) { .home-product .four-swiper .swiper-slide { width: 33.333333%; } } @media screen and (max-width: 1024px) { .home-product .four-swiper .swiper-slide { width: 50%; } } @media screen and (max-width: 576px) { .home-product .four-swiper .swiper-slide { width: 100%; } } .home-review { overflow: hidden; } .home-review .img::before { content: ''; pointer-events: none; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; width: 3.33333rem; height: 3.33333rem; background: url("../img/icon/play-icon.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } .home-review .img::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.2; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .home-review .review-item { box-shadow: 4px 4px 20px 0px #00000014; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)) } .home-review .review-item .img { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100% } .home-review .review-item .txt { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; height: 100% } .home-review .review-item .zone-desc { display: -webkit-box; font-size: clamp(15px, 0.9375rem, 18px); height: 4.875rem; min-height: 78px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .home-service { overflow: hidden; } .home-service .txt::before, .home-service .txt::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.4) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.4) 100%); } .home-service .txt::after { opacity: 0; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.6) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.6) 100%); } .home-service .swiper { margin: calc(calc(12/1920*100rem) * -1); margin-left: -2px; margin-right: -2px; padding: 0 /* 0px */; padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); } .home-service .swiper .swiper-slide { padding: 0 2px; } .home-service .item:hover { box-shadow: 1px 10px 5px 0px rgba(0, 0, 0, 0.15); -webkit-transform: translateY(-20px); transform: translateY(-20px); } .home-service .item:hover .txt::after { opacity: 1; } .home-service .item:hover .txt::before { opacity: 0; } .home-popup-modal, #popup_6 { max-width: 38.28125rem; padding: 0 !important; overflow: hidden; border-radius: calc(24/1920*100rem) } .home-popup-modal .carousel__button, #popup_6 .carousel__button { border-style: none; } .home-popup-modal .carousel__button.is-close, #popup_6 .carousel__button.is-close { top: 0 !important; width: 50px; height: 50px; right: 0 !important; } .home-popup-modal .carousel__button.is-close svg, #popup_6 .carousel__button.is-close svg { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .recruitment-detail-page .top-banner { display: none; } .other-recruit-wrap { position: -webkit-sticky; position: sticky; } .recruit-detail { padding-top: calc(48/1920*100rem); } @media (min-width: 1200.1px) { .recruit-detail .block-content { gap: calc(48/1920*100rem); } } .recruit-detail time { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .recruit-detail .table-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .recruit-detail .table-wrap td { padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); } @media (min-width: 576.1px) { .recruit-detail .table-wrap td { padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); } } @media (min-width: 768.1px) { .recruit-detail .table-wrap td { width: 50%; } } @media screen and (max-width: 1024px) { .recruit-detail .table-wrap table { white-space: normal; } } @media screen and (max-width: 768px) { .recruit-detail .table-wrap table tr { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .recruit-detail .table-wrap table tr td { display: block; width: 50%; } } .recruit-detail .table-wrap table tr:nth-last-child(2) td:last-child .desc { --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); } .recruit-detail .ico { margin-right: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 22px; width: auto; } .recruit-detail .ico img { width: auto; height: 100%; object-fit: contain; } .recruit-detail .ico em, .recruit-detail .ico i { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 400; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .recruit-detail address { margin-bottom: 0 /* 0px */; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; font-style: normal; } .recruit-detail address p { margin-bottom: 0 /* 0px */; } .recruit-detail address li { margin-bottom: calc(12/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .recruit-detail address li * { font: inherit; } .recruit-detail address em, .recruit-detail address i { display: inline-block; width: 20px; font-family: 'Font Awesome 6 Pro'; font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 300; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .recruit-detail address .icon { margin-right: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .recruit-detail address .icon img { max-width: 24px; } .recruit-detail address a { display: inline-block; } .recruit-detail address a:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .recruit-detail .txt { border-top-right-radius: 2.08333rem; border-bottom-left-radius: 2.08333rem; } @media (min-width: 1200.1px) { .recruit-detail .txt { border-top-right-radius: 4.16667rem; border-bottom-left-radius: 4.16667rem; } } .recruit-detail .btn-group .btn { width: 100%; } .recruit-detail .btn-group .btn span { line-height: 1.25; } .recruit-detail .btn-group .btn:nth-child(2) { margin-top: 12px !important; } .recruit-detail .btn-group .btn.btn-primary { margin-bottom: calc(12/1920*100rem); border-width: 1px; --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); } @media screen and (max-width: 1400px) { .recruit-detail .btn-group .btn.btn-secondary span { font-size: clamp(14px,calc(16/1920*100rem),16px); } } @media screen and (max-width: 350px) { .recruit-detail .btn-group .btn.btn-secondary span { font-size: clamp(12px,calc(14/1920*100rem),14px); } } @media (min-width: 1024.1px) { .recruit-detail .wrap-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .recruit-detail .wrap-form .frm-btnwrap { -webkit-box-pack: start !important; -webkit-justify-content: flex-start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } @media screen and (max-width: 768px) { .recruit-detail .wrap-form .form-group { grid-column: span 4 / span 4; } } .recruit-detail .wrap-form .form-group input, .recruit-detail .wrap-form .form-group textarea, .recruit-detail .wrap-form .form-group select { border-color: transparent; } .recruit-detail .wrap-form .form-group.disabled input, .recruit-detail .wrap-form .form-group.disabled textarea, .recruit-detail .wrap-form .form-group.disabled select { pointer-events: none; --tw-bg-opacity: 1; background-color: rgb(220 220 220 / var(--tw-bg-opacity, 1)); } @media screen and (max-width: 1024px) { .recruit-detail .txt { border-color: transparent; } } .recruit-detail-2 .block-wrap { padding-bottom: calc(28/1920*100rem); } .recruit-detail-2 .block-wrap:last-child { margin-bottom: 0 /* 0px */; } .recruit-detail-2 .block-wrap .sub-title { margin-bottom: calc(20/1920*100rem); } .recruit-detail-2 .block-wrap ul, .recruit-detail-2 .block-wrap ol { padding-left: calc(8/1920*100rem); } .recruit-detail-2 .fullcontent h2, .recruit-detail-2 .fullcontent h3, .recruit-detail-2 .fullcontent h4, .recruit-detail-2 .fullcontent h5, .recruit-detail-2 .fullcontent h6 { margin-bottom: calc(8/1920*100rem); } .recruit-item { padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); } @media (min-width: 1200.1px) { .recruit-item { padding-top: calc(24/1920*100rem); padding-bottom: calc(24/1920*100rem); } } .recruit-item:last-child { border-bottom-color: transparent; padding-bottom: 0 /* 0px */; } .recruit-item .headline a { font-weight: 600; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .recruit-item .timeline { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(255 0 9 / var(--tw-text-opacity, 1)); } .recruit-item .timeline * { font: inherit; } .form-apply iframe { width: 100%; height: 410px; } @media screen and (min-width: 1200px) and (max-width: 1800px) { .form-apply iframe { height: 400px; } } @media (min-width: 1200.1px) { .form-apply iframe { width: 100%; } } .form-apply .container-fluid { padding: 0 !important; } #ctl00_phMain_jobApply_upContact { margin-bottom: 0 !important; } .recruit-container { padding: 0 !important; } .apply-frm { margin: 0 !important; overflow: hidden; background: #fff !important; width: 100%; height: 100%; } .apply-frm .alert-success { display: block; width: 100%; text-align: center; font-size: clamp(26px,calc(32/1920*100rem),32px); --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .apply-frm .alert-success * { font-size: clamp(26px,calc(32/1920*100rem),32px); } @media screen and (max-width: 576px) { .apply-frm { overflow: hidden; width: 100%; } } .apply-frm .btn-wrap { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 600px) { .apply-frm .btn-wrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } .apply-frm .btn-wrap .form-group { width: 100%; } .apply-frm .btn-wrap .frm-btn { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 600px) { .apply-frm .btn-wrap .frm-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .apply-frm .btn-submit { height: 48px; border-radius: 9999px; --tw-border-opacity: 1; border-color: rgb(20 72 102 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(20 72 102 / var(--tw-bg-opacity, 1)); padding-left: calc(32/1920*100rem); padding-right: calc(32/1920*100rem); font-weight: 700; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; min-width: 240px; } .apply-frm .recruitment-container { min-width: 1110px !important; } .apply-frm .frm-captcha { margin-top: calc(24/1920*100rem); margin-bottom: calc(24/1920*100rem); } @media (min-width: 1024.1px) { .apply-frm .frm-captcha { position: absolute; right: 0 /* 0px */; padding-right: calc(32/1920*100rem); bottom: 0; width: auto !important; margin-top: 0 !important; } } .apply-frm h4 { display: none; } @media screen and (max-width: 1024px) { .apply-frm .frm-captcha { margin-top: 20px !important; } } @media screen and (max-width: 576px) { .apply-frm .frm-captcha .frm-captcha-input { margin-top: calc(20/1920*100rem); } } .apply-frm .frm-captcha .frm-captcha-input input { height: 44px; overflow: hidden; border-radius: 9999px; border-width: 1px; --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); width: 14.58333rem; max-width: 14.58333rem !important; } .apply-frm .frm-captcha .frm-captcha-input input::-webkit-input-placeholder { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .apply-frm .frm-captcha .frm-captcha-input input::-moz-placeholder { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .apply-frm .frm-captcha .frm-captcha-input input:-ms-input-placeholder { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .apply-frm .frm-captcha .frm-captcha-input input::-ms-input-placeholder { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .apply-frm .frm-captcha .frm-captcha-input input::placeholder { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .apply-frm input[type="file"] { left: 0; } .apply-frm > div { width: 100%; } .apply-frm .RadUpload_Simple { width: 100%; height: 100%; } .apply-frm .RadUpload_Simple input { width: 100%; height: 100%; } .apply-frm .RadUpload { width: 100%; height: 100%; pointer-events: auto; } .apply-frm .RadUpload .ruButton { font-size: 1rem; text-transform: uppercase; opacity: 0; font-family: 'Nunito Sans', sans-serif; } .apply-frm .RadUpload .ruInputs { width: 100%; position: relative; } .apply-frm .RadUpload .ruRemove { position: absolute; bottom: -77px; right: 0; opacity: 1; font-size: 12px; color: #ff0000; width: auto !important; display: block; height: 20px !important; background-position: 0px -62px; } .apply-frm .RadUpload .ruBrowse { display: none; } .apply-frm #ctl00_phMain_jobApply_pnlNewComment { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .apply-frm #ctl00_phMain_jobApply_pnlNewComment > .form-group { width: 100%; margin-top: -10px; position: relative; } .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-left, .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-right { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-left > .form-group, .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-right > .form-group { margin-bottom: 30px; } @media (min-width: 576px) { .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-left, .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-right { margin: 0 -10px; } .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-left > .form-group, .apply-frm #ctl00_phMain_jobApply_pnlNewComment .col-right > .form-group { padding: 0 10px; } } .apply-frm .fa-exclamation-triangle { position: absolute; font-weight: 400; bottom: -22px; left: 20px; color: #f30000; font-size: 12px; } .apply-frm .label { display: none; font-size: 14px; font-weight: 400; color: #999999; margin-bottom: 4px; } .apply-frm .label .required { color: red; } .apply-frm textarea { height: 90px; } @media (min-width: 1200.1px) { .apply-frm textarea { height: 130px; } } .apply-frm .RadAsyncUpload .ruDropZone { display: none; } .apply-frm .RadAsyncUpload .ruFileWrap { position: static; display: block; height: auto !important; max-height: 50px; } .apply-frm .RadAsyncUpload .ruFileWrap .ruUploadProgress { position: absolute; bottom: -70px; left: 10px; } .apply-frm .RadAsyncUpload .ruFileInput, .apply-frm .RadAsyncUpload .rugreyse { text-transform: uppercase; font-size: 15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border: 1px solid #333; background: #333; height: 50px; width: 250px; } .apply-frm .RadAsyncUpload .ruFileInput:hover, .apply-frm .RadAsyncUpload .rugreyse:hover { background: white !important; color: #333 !important; } .apply-frm .RadAsyncUpload .ruFileInput { border: 1px solid #333; pointer-events: auto; top: 0 !important; left: 0; padding: 0 !important; bottom: 10px; position: absolute; opacity: 0; height: 40px; width: 100% !important; cursor: pointer; } .apply-frm .RadAsyncUpload .ruFileInput:hover { background: white !important; color: #333 !important; } @media screen and (max-width: 1024px) { .apply-frm .form-group-btn { margin-top: calc(24/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media (min-width: 1024.1px) { .apply-frm .form-group-btn { position: absolute; right: 20px; bottom: 0 /* 0px */; } } .apply-frm .frm-btnwrap { margin-top: calc(32/1920*100rem); width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 576px) { .apply-frm .frm-btnwrap { position: static !important; } } .apply-frm .attachfile1 { position: relative; display: block; } .apply-frm .attachfile1 .left { pointer-events: none; position: absolute; top: 0 /* 0px */; left: 0 /* 0px */; bottom: 0 /* 0px */; right: 0 /* 0px */; height: 100%; width: 100%; cursor: pointer; z-index: 99; } .apply-frm .attachfile1 label { pointer-events: none; position: relative; width: 100%; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(236 244 233 / var(--tw-bg-opacity, 1)); padding-left: 24px; padding-right: 24px; font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 0; height: 48px; font-weight: 400 !important; } @media screen and (max-width: 1024px) { .apply-frm .attachfile1 label { word-break: break-normal; } } .apply-frm .attachfile1 label * { --tw-text-opacity: 1 !important; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) !important; font: inherit; } .apply-frm .attachfile1 label input[type='file'] { height: 100%; width: 100%; cursor: pointer; } .apply-frm .attachfile1 label input[type='file']::-webkit-file-upload-button { cursor: pointer; } .apply-frm .attachfile1 label input[type='file']::file-selector-button { cursor: pointer; } .apply-frm .attachfile1 label input[type='file']::-webkit-file-upload-button { cursor: pointer; } .apply-frm .attachfile1 label ::-webkit-file-upload-button { cursor: pointer; } .apply-frm .attachfile2 { display: none; } .apply-frm .form-group { position: relative; } .apply-frm .form-group.disable-input input { pointer-events: none; background: #F1F1F1; border: none; } .apply-frm .wrap-form { width: 100%; } @media screen and (max-width: 1024px) { .apply-frm .wrap-form .form-group { grid-column: span 1 / span 1; } } @media screen and (max-width: 768px) { .apply-frm .wrap-form .form-group { grid-column: span 2 / span 2; } } @media screen and (min-width: 768px) and (max-width: 1200px) { .apply-frm .wrap-form .form-group.col-span-2 { grid-column: span 2 / span 2 !important; } } .apply-frm .wrap-form .form-group input, .apply-frm .wrap-form .form-group textarea, .apply-frm .wrap-form .form-group select { padding-left: 24px; padding-right: 24px; } .apply-frm .wrap-form .form-group textarea { height: 100px; padding-left: 24px; padding-right: 24px; padding-top: calc(16/1920*100rem) } @media (min-width: 1200.1px) { .apply-frm .wrap-form .form-group textarea { height: 160px !important; } } .apply-frm .wrap-form .frm-btnwrap { margin-top: calc(16/1920*100rem) !important; } .recruit-page .modulepager { display: none; } .recruit-1 img { object-fit: contain; } .recruit-1 .row { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .recruit-2 .desc { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .recruit-list .filter-table-wrap tbody tr { display: none; } .recruit-list .ajax-btn-wrap.disble-btn { display: none; } .recruit-list .ajax-btn-wrap .btn-secondary:hover .icon { -webkit-transform: none; transform: none; } .recruit-list .ajax-btn-wrap .btn-secondary .icon:before { font-size: clamp(14px,calc(16/1920*100rem),16px); content: '\f063'; } .recruit-list .modulepager { display: none; } .recruit-list .btn span { white-space: nowrap; } .recruit-list table { overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); border-spacing: 0 !important; border-collapse: separate !important; } .recruit-list table thead th { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); padding-left: calc(20/1920*100rem); padding-right: calc(20/1920*100rem); padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); text-align: center; font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 700; text-transform: uppercase; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .recruit-list table thead th * { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; text-transform: uppercase; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .recruit-list table thead th:nth-child(1) { text-align: center; width: 90px; max-width: 90px; } .recruit-list table thead th:nth-child(2) { width: 25%; text-align: left } .recruit-list table thead th:nth-child(3) { width: 9%; white-space: nowrap } .recruit-list table thead th:nth-child(4), .recruit-list table thead th:nth-child(5) { width: 21%; } .recruit-list table thead th:nth-child(6) { width: 18%; } .recruit-list table tbody tr:last-child td:nth-child(1) { overflow: hidden; border-bottom-left-radius: calc(20/1920*100rem); } .recruit-list table tbody tr:last-child td:last-child { overflow: hidden; border-bottom-right-radius: calc(20/1920*100rem); } .recruit-list table tbody tr td { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); padding-left: calc(20/1920*100rem); padding-right: calc(20/1920*100rem); padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); text-align: center; font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .recruit-list table tbody tr td * { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .recruit-list table tbody tr td:nth-child(1) { text-align: center; width: 90px; max-width: 90px; } .recruit-list table tbody tr td:nth-child(2) { width: 25%; text-align: left } .recruit-list table tbody tr td:nth-child(3) { width: 8%; white-space: nowrap } .recruit-list table tbody tr td:nth-child(4), .recruit-list table tbody tr td:nth-child(5) { width: 21%; } .recruit-list table tbody tr td:nth-child(5) { color: #FF0009; } .recruit-list table tbody tr td:nth-child(6) { width: 18%; } .recruit-list table tbody tr td:hover a { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .recruit-list .table-wrap { overflow: hidden; border-radius: calc(20/1920*100rem); } @media screen and (max-width: 1024px) { .recruit-list .table-wrap { overflow-x: auto; } .recruit-list .table-wrap ul { white-space: nowrap; padding-bottom: calc(4/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .recruit-list .table-wrap ul li:first-child { padding-left: 0 /* 0px */; } } .recruit-list .ajax-btn-wrap .btn.btn-secondary .icon { -webkit-transform: none !important; transform: none !important; -webkit-animation: none !important; animation: none !important; opacity: 1 !important; } .recruit-list .ajax-btn-wrap .btn.btn-secondary .icon::before { --tw-text-opacity: 1 !important; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) !important; content: '\f078'; } .recruit-list .ajax-btn-wrap .btn.btn-secondary::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 0 /* 0px */; --tw-bg-opacity: 1; background-color: rgb(8 166 78 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .recruit-list .ajax-btn-wrap .btn.btn-secondary:hover::after { width: 100%; } .recruit-list .ajax-btn-wrap .btn.btn-secondary:hover span { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .recruit-list .ajax-btn-wrap .btn.btn-secondary:hover .icon::before { --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important; } .support-block .zone-nav { overflow-x: auto; } .support-block .zone-nav ul { white-space: nowrap; padding-bottom: calc(4/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .support-block .zone-nav ul li:first-child { padding-left: 0 /* 0px */; } .support-block .zone-nav ul { gap: calc(16/1920*100rem); } .support-block .zone-nav li.active a, .support-block .zone-nav li:hover a { --tw-bg-opacity: 1; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .support-block .toggle-item { overflow: hidden; border-radius: calc(16/1920*100rem); --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); padding: calc(20/1920*100rem); } @media (min-width: 1200.1px) { .support-block .toggle-item { padding: calc(32/1920*100rem); } } .support-block .toggle-item:not(:last-child) { margin-bottom: calc(24/1920*100rem); } .support-block .toggle-item span { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .support-block .toggle-item .number { margin-right: calc(12/1920*100rem); border-right-width: 1px; --tw-border-opacity: 1; border-right-color: rgb(220 220 220 / var(--tw-border-opacity, 1)); padding-right: calc(12/1920*100rem); line-height: 1; --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .support-block .toggle-item .title { border-color: transparent; padding: 0 /* 0px */; font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .support-block .toggle-item .title * { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 700; --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .support-block .toggle-item .title .ico em { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 300; --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } @media (min-width: 1024.1px) { .support-block .toggle-item .title .ico em { font-size: clamp(20px,calc(24/1920*100rem),24px); } } .support-block .toggle-item.is-toggle { --tw-bg-opacity: 1; background-color: rgb(236 244 233 / var(--tw-bg-opacity, 1)); } .support-block .toggle-item.is-toggle .title { --tw-border-opacity: 1; border-color: rgb(0 112 42 / var(--tw-border-opacity, 1)); padding-bottom: calc(16/1920*100rem); } .support-block .toggle-item.is-toggle .title * { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .support-block .toggle-item.is-toggle .title span { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); -webkit-line-clamp: unset; } .support-block .toggle-item.is-toggle .ico em { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .support-block .toggle-item.is-toggle .article { display: block; } .zone-side-nav { border-radius: 0 2.08333rem 0 2.08333rem; } @media (min-width: 1200.1px) { .zone-side-nav { border-radius: 0 3.33333rem 0 3.33333rem; padding-top: calc(40/1920*100rem); padding-bottom: calc(40/1920*100rem) } } .zone-side-nav .headline { position: relative; margin-bottom: calc(8/1920*100rem); padding-bottom: calc(12/1920*100rem); --tw-text-opacity: 1; color: rgb(0 55 103 / var(--tw-text-opacity, 1)); } .zone-side-nav .headline::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 2px; width: 24px; --tw-bg-opacity: 1; background-color: rgb(0 55 103 / var(--tw-bg-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } .zone-side-nav a { padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 500; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .zone-side-nav li:last-child a { padding-bottom: 0 /* 0px */; } .zone-side-nav li.active a { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); text-shadow: 1px 0 0 #00702A; } .zone-side-nav li:hover a { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .document-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .document-item .headline { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100% } @media (min-width: 576.1px) { .document-item .headline a { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } .document-item .txt { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end } .document-item time { margin-top: calc(4/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 400; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .document-item .btn.btn-tertiary { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .document-item .btn.btn-tertiary span { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); } .document-item .btn.btn-tertiary .icon { margin-right: calc(8/1920*100rem); } @media (max-width: 576px) { .document-item .btn.btn-tertiary .icon { padding-left: calc(4/1920*100rem); } } .document-item .btn.btn-tertiary .icon::before { content: "\f019"; font-family: 'Font Awesome 6 Pro'; font-weight: 300; --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)) } .document-item .btn.btn-tertiary:hover span, .document-item .btn.btn-tertiary:hover .icon:before { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } @media (min-width: 1024.1px) { .about-1 .txt { padding-left: calc(80/1920*100rem); } } .about-1 .zone-desc { height: 100%; max-height: 21.875rem; } .about-1 .zone-desc p { margin-bottom: calc(20/1920*100rem); } .about-1 .img { border-bottom-left-radius: 4.16667rem; } .about-1 .icon { margin-top: calc(48/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 12.1875rem; } .about-1 .icon img { width: auto; height: 100%; object-fit: contain; } @media (min-width: 1024.1px) { .about-2 .item:before, .about-2 .item:after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .about-2 .item:before { max-height: 14.0625rem; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); } .about-2 .item:after { height: 0 /* 0px */; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.8; opacity: 0; } } .about-2 .item:hover:before { opacity: 0; } .about-2 .item:hover:after { height: 100%; opacity: 1; } .about-2 .item:hover .txt { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .about-2 .item:hover .txt-grid { grid-template-rows: 1fr; } @media (min-width: 1024.1px) { .about-2 .txt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .about-2 .txt-grid { display: grid; grid-template-rows: 0fr; -webkit-transition: .4s grid-template-rows ease; transition: .4s grid-template-rows ease; } .about-2 .txt-grid > div { overflow: hidden; } } @media (max-width: 1024px) { .about-2 .desc { max-height: 10.41667rem; } } @media (min-width: 1024.1px) { .about-2 .desc { max-height: 15.625rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) } .about-2 .desc * { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .about-2 .desc ul li::before { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .about-2 .desc ul ul li::before { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .about-2 .desc ol { counter-reset: item; } .about-2 .desc ol li:before { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } } .about-3 .txt-wrap { box-shadow: 4px 4px 40px 0px #00000014; margin-left: auto; border-top-left-radius: calc(32/1920*100rem); border-bottom-right-radius: calc(32/1920*100rem) } @media (min-width: 1200.1px) { .about-3 .txt-wrap { border-radius: 3.33333rem 0 3.33333rem 0; } } @media (min-width: 1400.1px) { .about-3 .txt-wrap { max-width: 31.25rem; } } .about-3 .scrollbar-wrap { max-height: 18.75rem; } .about-3 .logo { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 2.86458rem; width: auto; } .about-3 .logo img { width: auto; height: 100%; object-fit: contain; } @media (min-width: 1200.1px) { .about-3 .block-title { font-size: clamp(40px,calc(48/1920*100rem),48px); } } .about-4 .toggle-wrap { list-style-type: none; } @media screen and (max-width: 1024px) { .about-4 .row .col:nth-child(1) { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .about-4 .row .col:nth-child(2) { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } } .toggle-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .toggle-item.is-toggle .title { --tw-border-opacity: 1; border-color: rgb(8 166 78 / var(--tw-border-opacity, 1)); padding-bottom: calc(12/1920*100rem); } .toggle-item.is-toggle .title span { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); -webkit-line-clamp: unset; } .toggle-item.is-toggle .icon em, .toggle-item.is-toggle .icon i { --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } .toggle-item.is-toggle .icon img { -webkit-filter: none; filter: none; } .toggle-item.is-toggle .ico em { --tw-text-opacity: 1; color: rgb(8 166 78 / var(--tw-text-opacity, 1)); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .toggle-item.is-toggle .article { display: block; } .toggle-item .title { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); padding-top: calc(28/1920*100rem); padding-bottom: calc(28/1920*100rem); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .toggle-item .txt { margin: 0 /* 0px */; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-size: clamp(20px,calc(24/1920*100rem),24px); font-weight: 700; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .toggle-item .txt * { font: inherit; } .toggle-item .icon { margin-right: calc(16/1920*100rem); height: 32px; width: 32px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media (min-width: 1200.1px) { .toggle-item .icon { margin-right: calc(20/1920*100rem); } } .toggle-item .icon em, .toggle-item .icon i { font-size: clamp(26px,calc(32/1920*100rem),32px); font-weight: 500; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .toggle-item .icon img { width: auto; height: 100%; object-fit: contain; -webkit-filter: grayscale(0.8); filter: grayscale(0.8); } .toggle-item .ico { margin-left: calc(20/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .toggle-item .ico em { font-size: clamp(26px,calc(32/1920*100rem),32px); font-weight: 300; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .toggle-item .article { display: none; padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); padding-bottom: 0 /* 0px */; } .toggle-item .article p { margin-bottom: calc(8/1920*100rem); } @media (min-width: 1200.1px) { .about-5 .container-fluid { padding: 0 /* 0px */; } } @media (max-width: 1200px) { .about-5 .container-fluid { padding-bottom: 70px; } } @media (min-width: 1200.1px) { .about-5 .block-wrap { margin-left: auto; padding-right: 0 /* 0px */; max-width: 25rem; } } @media (min-width: 1400.1px) { .about-5 .block-wrap { padding-right: calc(40/1920*100rem); max-width: 22.91667rem; } } @media (min-width: 1200.1px) { .about-5 .col:nth-child(1) { width: 37.5%; } .about-5 .col:nth-child(2) { width: 62.5%; } } @media (max-width: 1200px) { .about-5 .swiper-nav { bottom: 0 /* 0px */; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (min-width: 1200.1px) { .about-5 .swiper-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .about-5 .swiper-nav.normal .prev { margin-right: calc(24/1920*100rem); } } .about-6::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: url("../img/bg/about-bg-6.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top center; } @media (min-width: 1024.1px) { .about-6 .scrollbar-wrap { max-height: 10.9375rem; } } @media (max-width: 1024px) { .about-6 .item { display: grid; gap: calc(20/1920*100rem); } } @media (min-width: 1024.1px) { .about-6 .item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } } .about-6 .img { width: 100%; } @media (min-width: 1024.1px) { .about-6 .img { width: 29.16667rem; min-width: 29.16667rem; } } @media (max-width: 1024px) { .about-6 .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 66.60714%; } .about-6 .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (min-width: 1024.1px) { .about-6 .img a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 19.42708rem; width: auto; } .about-6 .img a img { width: auto; height: 100%; object-fit: cover; } } .about-7 .img a { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(246 246 246 / var(--tw-border-opacity, 1)); padding: calc(12/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 6.25rem; width: auto; } .about-7 .img a img { width: auto; height: 100%; object-fit: contain; } .about-7 .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } @media (min-width: 1200.1px) { .about-7 .container-fluid { padding: 0 /* 0px */; } } .contact-map .map-wrap { height: 100%; } .contact-map .map-wrap .Module { height: 100%; } .contact-map .map-wrap .ModuleContent, .contact-map .map-wrap a { display: block; height: 31.25rem; overflow: hidden; border-radius: calc(20/1920*100rem); text-align: center; width: 100%; } @media screen and (max-width: 1024px) { .contact-map .map-wrap .ModuleContent, .contact-map .map-wrap a { height: 400px; } } @media screen and (max-width: 576px) { .contact-map .map-wrap .ModuleContent, .contact-map .map-wrap a { height: 300px; } } .contact-map .map-wrap .ModuleContent iframe, .contact-map .map-wrap a iframe { display: inline-block; height: 100%; width: 100%; } .contact-us .frm-msg { grid-column: span 2 / span 2; } @media screen and (min-width: 768px) and (max-width: 1200px) { .apply-frm .wrap-form .form-group.contact-us .frm-msg { grid-column: span 2 / span 2; } } .contact-us .bg-wrap { -webkit-clip-path: polygon(75% 0, 100% 15%, 100% 100%, 0 100%, 0 0); clip-path: polygon(75% 0, 100% 15%, 100% 100%, 0 100%, 0 0); } @media screen and (max-width: 1024px) { .contact-us .bg-wrap { -webkit-clip-path: polygon(85% 0, 100% 15%, 100% 100%, 0 100%, 0 0); clip-path: polygon(85% 0, 100% 15%, 100% 100%, 0 100%, 0 0); } } .contact-us .wrap-form .form-group textarea { height: 8.33333rem; } .contact-us .wrap-form .form-group select { --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .contact-us .wrap-form .form-group select option { --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .contact-us .wrap-form .custom-select::after { font-size: clamp(18px,calc(20/1920*100rem),20px); --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .contact-us .wrap-form .frm-btnwrap { margin-top: calc(20/1920*100rem); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media screen and (min-width: 1200px) { .contact-us .wrap-form .frm-btnwrap { position: absolute; bottom: 0 /* 0px */; right: 0 /* 0px */; z-index: 20; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .contact-us .wrap-form .frm-btnwrap { position: absolute; bottom: 0 /* 0px */; right: 0 /* 0px */; z-index: 20; } } @media screen and (max-width: 576px) { .contact-us .wrap-form .frm-btnwrap { margin-top: calc(32/1920*100rem); } } .contact-us .wrap-form .frm-btnwrap .frm-btn input[type='submit'] { width: 110px; } .contact-us address p { margin-bottom: 0 /* 0px */; } .contact-us address a:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .contact-us address li { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .contact-us address li * { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .contact-us address li strong { margin-bottom: calc(4/1920*100rem); display: block; font-weight: 600; --tw-text-opacity: 0.5; } .contact-us address li strong * { font-weight: 600; --tw-text-opacity: 0.5; } .contact-us .social-wrap .ModuleContent { gap: calc(8/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .contact-us .social-wrap a { overflow: hidden; border-radius: 9999px; border-width: 1px; border-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); --tw-border-opacity: 0.3; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; width: 34px; height: 34px; } .contact-us .social-wrap a em, .contact-us .social-wrap a i { font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .contact-us .social-wrap a img { max-height: 16px; } .contact-us .social-wrap a:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); } .profile-container { padding-bottom: 7.8125rem !important; } .account-order-view .profile-container { padding-bottom: 2.08333rem !important; } .user-sidelink ul li + li.active a { color: #08A64E !important; } .order-info .order-name, .order-info .order-date { font-size: clamp(14px,calc(16/1920*100rem),16px); } .order-info .order-name strong, .order-info .order-date strong { font-size: clamp(16px,calc(18/1920*100rem),18px); } .dealer-1 .container::after { content: ''; pointer-events: none; z-index: 10; display: block; height: 100%; width: 100%; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; height: 27.08333rem; background: url("../img/bg/dealer-bg.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media screen and (max-width: 1024px) { .dealer-1 .row { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @media (min-width: 1024.1px) { .dealer-1 .counter { line-height: .8; font-size: 5rem; } } .dealer-network .list_system { max-height: 710px; overflow: hidden; } @media (min-width: 1200.1px) { .dealer-network .list_system { padding-right: 15px; } } .dealer-network .list_system::-webkit-scrollbar { background: #fff; width: 8px !important; border-radius: 8px; } .dealer-network .list_system::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 8px #fff; background-color: #fff; border-radius: 8px; } .dealer-network .list_system::-webkit-scrollbar-thumb { background-color: #B0B5BE; border-radius: 30px !important; } @media screen and (max-width: 1024px) { .dealer-network .list_system::-webkit-scrollbar-thumb { height: auto; } } @-moz-document url-prefix() { .dealer-network .list_system { scrollbar-width: thin; scrollbar-color: #B0B5BE #fff; } } .dealer-network .item::after { content: ''; pointer-events: none; left: 0 /* 0px */; z-index: 10; display: block; height: 98px; width: 2px; overflow: hidden; border-radius: calc(16/1920*100rem); --tw-bg-opacity: 1; background-color: rgb(0 112 42 / var(--tw-bg-opacity, 1)); opacity: 0; -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; -webkit-clip-path: ellipse(16% 50% at 50% 50%); clip-path: ellipse(16% 50% at 50% 50%); } .dealer-network .item.is-active { --tw-border-opacity: 1; border-color: rgb(0 112 42 / var(--tw-border-opacity, 1)); } .dealer-network .item.is-active::after { opacity: 1; } .dealer-network .district-hidden { display: none !important; } @media screen and (max-width: 576px) { .dealer-network .block-wrap { padding-right: calc(8/1920*100rem); } } .dealer-network .block-wrap .row { margin: 0 /* 0px */; margin-left: calc(calc(8/1920*100rem) * -1); margin-right: calc(calc(8/1920*100rem) * -1); padding: 0 /* 0px */; } .dealer-network .block-wrap .row .col { margin: 0 /* 0px */; padding: 0 /* 0px */; padding-left: calc(8/1920*100rem); padding-right: calc(8/1920*100rem); } .dealer-network .scrollbar-wrap { padding-right: calc(12/1920*100rem); max-height: 23.4375rem; } @media (max-width: 576px) { .dealer-network .scrollbar-wrap { padding-right: calc(8/1920*100rem); } } @media (min-width: 1024.1px) { .dealer-network .scrollbar-wrap { max-height: 30.625rem; } } .dealer-network .clinic_list.active .item { --tw-border-opacity: 1; border-color: rgb(0 112 42 / var(--tw-border-opacity, 1)); } .dealer-network .clinic_list.active .item::after { opacity: 1; } .dealer-network .dealer-item { box-shadow: 4px 4px 20px 0px #00000014; border-width: 1px; border-color: transparent; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .dealer-network .dealer-item:hover { --tw-border-opacity: 1; border-color: rgb(0 55 103 / var(--tw-border-opacity, 1)); } .dealer-network .icon { margin-right: calc(12/1920*100rem); overflow: hidden; border-radius: 0.25rem; border-width: 1px; padding: calc(8/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 3.75rem; width: 3.75rem; min-width: 3.75rem; } .dealer-network .icon img { width: auto; height: 100%; object-fit: contain; } .dealer-network address { font-style: normal; } .dealer-network address p { margin-bottom: 0 /* 0px */; } .dealer-network address li { font-size: clamp(14px,calc(16/1920*100rem),16px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .dealer-network address li:not(:last-child) { margin-bottom: calc(12/1920*100rem); } .dealer-network address li * { font-size: clamp(14px,calc(16/1920*100rem),16px); } .dealer-network address em, .dealer-network address i { margin-right: calc(12/1920*100rem); margin-top: 2px; display: inline-block; width: 20px; min-width: 20px; font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 300; --tw-text-opacity: 1; color: rgb(0 112 42 / var(--tw-text-opacity, 1)); } @media (min-width: 1024.1px) { .dealer-network .block-wrap { height: 33.125rem; } } @media screen and (max-width: 1024px) { .dealer-network .map-wrap { margin-top: calc(20/1920*100rem); } } .dealer-network .map-wrap a { display: block; height: 33.125rem; overflow: hidden; text-align: center; width: 100%; } @media screen and (max-width: 1024px) { .dealer-network .map-wrap a { height: 400px; } } @media screen and (max-width: 576px) { .dealer-network .map-wrap a { height: 300px; } } .dealer-network .map-wrap a iframe { display: inline-block; height: 100%; width: 100%; } .dealer-network .scrollbar-wrap { height: 100%; max-height: 30.625rem; } .dealer-network .scrollbar-wrap::-webkit-scrollbar { background: #fff; } .dealer-network .scrollbar-wrap::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px #fff; background-color: #fff; } @-moz-document url-prefix() { .dealer-network .scrollbar-wrap { scrollbar-color: #08A64E #fff; } } .dealer-network .frm-btnwrap .frm-btn input[type='submit'] { width: 160px; } @media (min-width: 1024.1px) { .filter-wrap { gap: calc(16/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 1024px) { .filter-wrap { gap: calc(20/1920*100rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .filter-item { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .filter-item select, .filter-item input[type='text'] { height: 46px; width: 100%; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(239 239 239 / var(--tw-bg-opacity, 1)); padding-left: calc(20/1920*100rem); padding-right: calc(20/1920*100rem); font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .filter-item select *, .filter-item input[type='text'] * { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .filter-item .custom-select::after { content: '\f078'; font-family: 'Font Awesome 6 Pro'; pointer-events: none; right: 20px; z-index: 10; font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 300; line-height: 1; --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; transition-duration: 150ms; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; height: 16px; width: 20px; } /*# sourceMappingURL=main.min.css.map */