.top-banner { position: relative; } .top-banner .swiper { padding: 0 /* 0px */; } .top-banner a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 32.29167%; } .top-banner a::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; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 48.19%, rgba(0, 0, 0, 0.748) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48.19%, rgba(0, 0, 0, 0.748) 100%); } @media screen and (max-width: 1200px) { .top-banner a::after { max-height: 30%; } } .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; } .banner-breadcrumb, .banner-breadcrumb-2 { position: relative; } .banner-breadcrumb .global-breadcrumb, .banner-breadcrumb-2 .global-breadcrumb { z-index: 9999 !important; } .banner-breadcrumb .global-breadcrumb h2, .banner-breadcrumb-2 .global-breadcrumb h2 { display: none; } @media (min-width: 1024.1px) { .banner-breadcrumb .global-breadcrumb h2, .banner-breadcrumb-2 .global-breadcrumb h2 { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; margin-bottom: calc(8/1920*100rem); display: block; font-size: clamp(34px,calc(40/1920*100rem),40px); font-weight: 700; text-transform: uppercase; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .banner-breadcrumb .global-breadcrumb .breadcrumb, .banner-breadcrumb-2 .global-breadcrumb .breadcrumb { 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; } .banner-breadcrumb .global-breadcrumb .container, .banner-breadcrumb-2 .global-breadcrumb .container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .banner-breadcrumb .global-breadcrumb ol li a, .banner-breadcrumb .global-breadcrumb ol li span, .banner-breadcrumb-2 .global-breadcrumb ol li a, .banner-breadcrumb-2 .global-breadcrumb ol li span { white-space: nowrap; } .productpage .breadcrumb li:nth-child(2), .product-detail-page .breadcrumb li:nth-child(2) { display: none; } .banner-breadcrumb { overflow: hidden; } .banner-breadcrumb .top-banner { position: relative; z-index: 10; } .banner-breadcrumb .top-banner a::after { display: none; } .banner-breadcrumb .top-banner::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 20; display: block; height: 100%; width: 100%; background-image: -webkit-linear-gradient(top, rgba(10, 94, 155, 0) 0%, rgba(#0F66A6, 0.5) 44.5%, rgba(#0F66A6, 0.97) 100%); background-image: linear-gradient(180deg, rgba(10, 94, 155, 0) 0%, rgba(#0F66A6, 0.5) 44.5%, rgba(#0F66A6, 0.97) 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-height: 12.60417rem; } @media (min-width: 1024.1px) { .banner-breadcrumb .global-breadcrumb { bottom: 0 /* 0px */; z-index: 40; 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; padding-top: calc(4/1920*100rem); padding-bottom: calc(4/1920*100rem); padding-top: calc(24/1920*100rem); padding-bottom: calc(44/1920*100rem); position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .banner-breadcrumb-2 { --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); padding-top: calc(40/1920*100rem); padding-bottom: calc(40/1920*100rem); } .banner-breadcrumb-2 h2 { margin-bottom: 0 /* 0px */; text-align: center; } .banner-breadcrumb-2 .top-banner { display: none; } .banner-breadcrumb-2 .global-breadcrumb { padding-bottom: calc(12/1920*100rem); padding-top: 0 /* 0px */; position: static !important; left: unset !important; -webkit-transform: none !important; transform: none !important; } .banner-breadcrumb-2 .social-network { gap: 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; } .banner-breadcrumb-2 .social-network a { --tw-bg-opacity: 1; background-color: rgb(227 240 243 / var(--tw-bg-opacity, 1)); } .banner-breadcrumb-2 .social-network a em, .banner-breadcrumb-2 .social-network a i { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } @media (min-width: 1024.1px) { .about-page .banner-breadcrumb .global-breadcrumb h2 { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .about-page .banner-breadcrumb .global-breadcrumb ol li:after { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .about-page .banner-breadcrumb .global-breadcrumb ol li a, .about-page .banner-breadcrumb .global-breadcrumb ol li span { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } } .about-page .banner-breadcrumb .top-banner a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 49.11458%; } .about-page .banner-breadcrumb .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; } .about-page .banner-breadcrumb .top-banner a:after { display: none; } .about-page .banner-breadcrumb .top-banner::after { background-image: -webkit-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%); } .news-detail-page .banner-breadcrumb, .recruitment-detail-page .banner-breadcrumb, .application-detail-page .banner-breadcrumb, .product-detail-page .banner-breadcrumb { display: none; } @media (min-width: 1024.1px) { .news-detail-page .banner-breadcrumb, .recruitment-detail-page .banner-breadcrumb, .application-detail-page .banner-breadcrumb, .product-detail-page .banner-breadcrumb { display: block; --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); } } .news-detail-page .banner-breadcrumb .top-banner, .recruitment-detail-page .banner-breadcrumb .top-banner, .application-detail-page .banner-breadcrumb .top-banner, .product-detail-page .banner-breadcrumb .top-banner { display: none; } .news-detail-page .banner-breadcrumb .global-breadcrumb, .recruitment-detail-page .banner-breadcrumb .global-breadcrumb, .application-detail-page .banner-breadcrumb .global-breadcrumb, .product-detail-page .banner-breadcrumb .global-breadcrumb { padding-top: calc(40/1920*100rem); padding-bottom: calc(40/1920*100rem); position: static !important; left: unset !important; -webkit-transform: none !important; transform: none !important; } .global-breadcrumb { 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; padding-top: calc(20/1920*100rem); } @media (max-width: 1024px) { .global-breadcrumb { padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); } } .global-breadcrumb .container { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -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:after { content: '|'; pointer-events: none; z-index: 10; display: block; font-weight: 400; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -1.5625rem; font-size: 16px; height: 16px; width: 12px; } @media (min-width: 1024.1px) { .global-breadcrumb ol li:after { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); 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; } .global-breadcrumb ol li:last-child * { font-weight: 700; } .global-breadcrumb ol li:last-child:after { display: none; } .global-breadcrumb ol li:last-child a { font-weight: 700; } .global-breadcrumb ol li a, .global-breadcrumb ol li span { font-size: clamp(16px,calc(18/1920*100rem),18px); 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; } @media (min-width: 1024.1px) { .global-breadcrumb ol li a, .global-breadcrumb ol li span { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } } footer .social-network .ModuleContent { gap: 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; } footer .logo { padding: 2px; } footer .logo img { -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } footer .logo:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } footer .logo:hover img { -webkit-filter: none; filter: none; } .social-network a { height: 40px; width: 40px; min-width: 40px; overflow: hidden; border-radius: 0; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / 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 em, .social-network a i { font-size: clamp(14px,calc(16/1920*100rem),16px); line-height: 1; --tw-text-opacity: 1; color: rgb(5 170 184 / 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; } .social-network a img { max-width: 20px; } .social-network a:hover { --tw-bg-opacity: 1; background-color: rgb(5 170 184 / var(--tw-bg-opacity, 1)); } .social-network a:hover em, .social-network a:hover i { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .social-network.news { gap: calc(8/1920*100rem); padding-top: 0 /* 0px */; } @media screen and (max-width: 1024px) { .social-network.news { padding-top: 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; } } .social-network.news a { --tw-bg-opacity: 1; background-color: rgb(227 237 242 / var(--tw-bg-opacity, 1)); } @media (min-width: 1024.1px) { .social-network.news a:not(:last-child) { margin-bottom: calc(8/1920*100rem); } } .social-network.news a em, .social-network.news a i { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .social-network.news a:hover { --tw-bg-opacity: 1; background-color: rgb(5 170 184 / var(--tw-bg-opacity, 1)); } .social-network.news a:hover em, .social-network.news a:hover i { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .copyright { font-size: clamp(12px,calc(14/1920*100rem),14px); font-weight: 500; } .footer-menu li { 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; } .footer-menu li::before { content: '\f054'; pointer-events: none; z-index: 10; margin-right: calc(12/1920*100rem); display: block; height: 100%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-family: 'Font Awesome 6 Pro'; font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 300; -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 } .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(24/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, .modulepager ul li:hover a, .modulepager ul li:hover span, .post-nav ul li.active a, .post-nav ul li.active span, .post-nav ul li:hover a, .post-nav ul li:hover span { --tw-bg-opacity: 1; background-color: rgb(10 94 155 / 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 { width: 48px; height: 48px; text-decoration: none; --tw-bg-opacity: 1; background-color: rgb(227 237 242 / var(--tw-bg-opacity, 1)); font-size: 1.125rem; line-height: 1; --tw-text-opacity: 1; color: rgb(10 94 155 / 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 } @media screen and (max-width: 1024px) { .modulepager ul li span, .modulepager ul li a, .post-nav ul li span, .post-nav ul li a { 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 } header { z-index: 99999 !important; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); } body.overlay-bg { overflow: hidden; } @media (min-width: 1200.1px) { body.minimize header { height: 80px; } body.minimize .header-top { height: 60px; } } body.normal-header main, body.minimize main, body.news-detail-page main, body.recruitment-detail-page main, body.application-detail-page main, body.product-detail-page main { padding-top: 100px !important; } body.normal-header header, body.minimize header, body.news-detail-page header, body.recruitment-detail-page header, body.application-detail-page header, body.product-detail-page header { background: white; } body.normal-header .nav-brand img, body.minimize .nav-brand img, body.news-detail-page .nav-brand img, body.recruitment-detail-page .nav-brand img, body.application-detail-page .nav-brand img, body.product-detail-page .nav-brand img { -webkit-filter: none !important; filter: none !important; } body.normal-header .search-toggle::before, body.minimize .search-toggle::before, body.news-detail-page .search-toggle::before, body.recruitment-detail-page .search-toggle::before, body.application-detail-page .search-toggle::before, body.product-detail-page .search-toggle::before { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } body.normal-header .drop-list em, body.normal-header .drop-list span, body.minimize .drop-list em, body.minimize .drop-list span, body.news-detail-page .drop-list em, body.news-detail-page .drop-list span, body.recruitment-detail-page .drop-list em, body.recruitment-detail-page .drop-list span, body.application-detail-page .drop-list em, body.application-detail-page .drop-list span, body.product-detail-page .drop-list em, body.product-detail-page .drop-list span { line-height: 1; --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } @media (min-width: 1200.1px) { body.normal-header .nav-primary-menu .nav-link.active > a, body.normal-header .nav-primary-menu .nav-link:hover > a, body.minimize .nav-primary-menu .nav-link.active > a, body.minimize .nav-primary-menu .nav-link:hover > a, body.news-detail-page .nav-primary-menu .nav-link.active > a, body.news-detail-page .nav-primary-menu .nav-link:hover > a, body.recruitment-detail-page .nav-primary-menu .nav-link.active > a, body.recruitment-detail-page .nav-primary-menu .nav-link:hover > a, body.application-detail-page .nav-primary-menu .nav-link.active > a, body.application-detail-page .nav-primary-menu .nav-link:hover > a, body.product-detail-page .nav-primary-menu .nav-link.active > a, body.product-detail-page .nav-primary-menu .nav-link:hover > a { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } } body.normal-header .nav-primary-menu .nav-link.active > .title::before, body.normal-header .nav-primary-menu .nav-link:hover > .title::before, body.minimize .nav-primary-menu .nav-link.active > .title::before, body.minimize .nav-primary-menu .nav-link:hover > .title::before, body.news-detail-page .nav-primary-menu .nav-link.active > .title::before, body.news-detail-page .nav-primary-menu .nav-link:hover > .title::before, body.recruitment-detail-page .nav-primary-menu .nav-link.active > .title::before, body.recruitment-detail-page .nav-primary-menu .nav-link:hover > .title::before, body.application-detail-page .nav-primary-menu .nav-link.active > .title::before, body.application-detail-page .nav-primary-menu .nav-link:hover > .title::before, body.product-detail-page .nav-primary-menu .nav-link.active > .title::before, body.product-detail-page .nav-primary-menu .nav-link:hover > .title::before { width: 100%; --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); } @media (min-width: 1200.1px) { body.normal-header .nav-primary-menu .nav-link.active > .title a, body.normal-header .nav-primary-menu .nav-link.active > .title .icon::before, body.normal-header .nav-primary-menu .nav-link:hover > .title a, body.normal-header .nav-primary-menu .nav-link:hover > .title .icon::before, body.minimize .nav-primary-menu .nav-link.active > .title a, body.minimize .nav-primary-menu .nav-link.active > .title .icon::before, body.minimize .nav-primary-menu .nav-link:hover > .title a, body.minimize .nav-primary-menu .nav-link:hover > .title .icon::before, body.news-detail-page .nav-primary-menu .nav-link.active > .title a, body.news-detail-page .nav-primary-menu .nav-link.active > .title .icon::before, body.news-detail-page .nav-primary-menu .nav-link:hover > .title a, body.news-detail-page .nav-primary-menu .nav-link:hover > .title .icon::before, body.recruitment-detail-page .nav-primary-menu .nav-link.active > .title a, body.recruitment-detail-page .nav-primary-menu .nav-link.active > .title .icon::before, body.recruitment-detail-page .nav-primary-menu .nav-link:hover > .title a, body.recruitment-detail-page .nav-primary-menu .nav-link:hover > .title .icon::before, body.application-detail-page .nav-primary-menu .nav-link.active > .title a, body.application-detail-page .nav-primary-menu .nav-link.active > .title .icon::before, body.application-detail-page .nav-primary-menu .nav-link:hover > .title a, body.application-detail-page .nav-primary-menu .nav-link:hover > .title .icon::before, body.product-detail-page .nav-primary-menu .nav-link.active > .title a, body.product-detail-page .nav-primary-menu .nav-link.active > .title .icon::before, body.product-detail-page .nav-primary-menu .nav-link:hover > .title a, body.product-detail-page .nav-primary-menu .nav-link:hover > .title .icon::before { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } } body.normal-header .nav-primary-menu .nav-link .title, body.minimize .nav-primary-menu .nav-link .title, body.news-detail-page .nav-primary-menu .nav-link .title, body.recruitment-detail-page .nav-primary-menu .nav-link .title, body.application-detail-page .nav-primary-menu .nav-link .title, body.product-detail-page .nav-primary-menu .nav-link .title { padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); } @media (min-width: 1200.1px) { body.normal-header .nav-primary-menu .nav-link a, body.minimize .nav-primary-menu .nav-link a, body.news-detail-page .nav-primary-menu .nav-link a, body.recruitment-detail-page .nav-primary-menu .nav-link a, body.application-detail-page .nav-primary-menu .nav-link a, body.product-detail-page .nav-primary-menu .nav-link a { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } body.normal-header .nav-primary-menu .icon:before, body.minimize .nav-primary-menu .icon:before, body.news-detail-page .nav-primary-menu .icon:before, body.recruitment-detail-page .nav-primary-menu .icon:before, body.application-detail-page .nav-primary-menu .icon:before, body.product-detail-page .nav-primary-menu .icon:before { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } } .nav-brand { z-index: 20; } .nav-brand a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 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; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out } @media screen and (min-width: 1200px) { .nav-brand a { height: 52px; } } .nav-brand a img, .nav-brand a svg { width: 100%; height: 100%; object-fit: contain; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .site-menu-toggle { margin-top: calc(4/1920*100rem); height: 48px; width: 48px; min-width: 48px; --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-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; } @media (min-width: 1200.1px) { .site-menu-toggle { display: none; } } @media (max-width: 1200px) { .site-menu-toggle { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; } } .site-menu-toggle .hamburger { margin-top: calc(4/1920*100rem); } .mobile-nav-wrap { position: fixed; top: 0 /* 0px */; left: 0 /* 0px */; height: 100%; height: 100vh; width: 100%; --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); padding-left: calc(24/1920*100rem); padding-right: calc(24/1920*100rem); padding-top: calc(32/1920*100rem); padding-bottom: calc(32/1920*100rem); z-index: 9999; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } @media (min-width: 768.1px) { .mobile-nav-wrap { width: 320px; } } @media screen and (min-width: 1200px) { .mobile-nav-wrap { display: none; } } .mobile-nav-wrap.is-open { -webkit-transform: none; transform: none; } .mobile-nav-wrap .close-menu { 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; } .mobile-nav-wrap .close-menu em, .mobile-nav-wrap .close-menu span { line-height: 1; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .mobile-nav-wrap .close-menu em { font-size: clamp(26px,calc(32/1920*100rem),32px); } .mobile-nav-wrap .close-menu span { margin-left: calc(12/1920*100rem); font-size: clamp(18px,calc(20/1920*100rem),20px); } .mobile-nav-wrap .mobile-top-nav { margin-bottom: calc(20/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; } .application-detail .block-wrap { border-left-width: 1px; --tw-border-opacity: 1; border-left-color: rgb(227 237 242 / var(--tw-border-opacity, 1)); } .application-detail .table-wrapper { margin-bottom: calc(20/1920*100rem); } .application-detail .ingredients-wrap .headline { margin-bottom: calc(20/1920*100rem); } .application-detail .ingredients-wrap table tr td { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(220 220 220 / var(--tw-border-opacity, 1)); padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; --tw-text-opacity: 1; color: rgb(70 70 70 / var(--tw-text-opacity, 1)); } .application-detail .ingredients-wrap table tr td * { font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; --tw-text-opacity: 1; color: rgb(70 70 70 / var(--tw-text-opacity, 1)); } .application-detail .ingredients-wrap table tr td span { --tw-text-opacity: 1; color: rgb(5 170 184 / var(--tw-text-opacity, 1)); } .application-detail .ingredients-wrap table tr td span * { --tw-text-opacity: 1; color: rgb(5 170 184 / var(--tw-text-opacity, 1)); } .application-detail .ingredients-wrap table tr td:first-child { min-width: 6.25rem; } .application-detail .scrollbar-wrap { max-height: 450px; } .application-item .desc { --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .application-item .desc * { --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .primary-banner { position: relative; } .primary-banner .banner-container { position: relative; } @media screen and (max-width: 576px) { .primary-banner .banner-container { position: relative; display: block; height: 0; overflow: hidden; padding-top: 177.77778%; } .primary-banner .banner-container .swiper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } } .primary-banner .wrap { position: relative; } .primary-banner .img { position: relative; border-radius: calc(16/1920*100rem); } .primary-banner .img::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, #00000088 30%, #ffffff44 100%); background: linear-gradient(90degdeg, #00000088 30%, #ffffff44 100%); } @media (min-width: 1200.1px) { .primary-banner .img { border-radius: calc(24/1920*100rem); } } @media screen and (min-width: 576.1px) { .primary-banner .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 32.29167%; } .primary-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 screen and (max-width: 576px) { .primary-banner .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 177.77778%; } .primary-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 screen and (min-width: 576px) and (max-width: 960px) { .primary-banner .block-title { font-size: clamp(24px,calc(28/1920*100rem),28px); } } .home-zone { padding-top: calc(12/1920*100rem); } .home-zone .btn { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .home-zone .two-swiper .swiper { margin-left: -12px; margin-right: -12px; } .home-zone .two-swiper .swiper-slide { padding: 0 6px; } @media screen and (max-width: 1200px) { .home-zone .two-swiper .swiper-slide { padding: 0 6px; } } @media screen and (max-width: 1024px) { .home-zone .two-swiper .swiper-slide { width: 100%; } } .home-zone .two-swiper .txt { pointer-events: none; z-index: 50; } @media (min-width: 768.1px) { .home-zone .two-swiper .zone-desc { max-width: 50%; } } .home-zone .two-swiper .btn { pointer-events: auto; } .home-zone .two-swiper .img:hover::after { opacity: 0.2; } .home-zone .two-swiper .img::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(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); } @media screen and (max-width: 576px) { .home-zone .two-swiper .img a { padding-top: 100%; } } @media (min-width: 1024.1px) { .home-zone .three-swiper { padding-left: calc(32/1920*100rem); padding-right: calc(32/1920*100rem); } } .home-zone .three-swiper .section-title { -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-zone .three-swiper .swiper { margin-left: -16px; margin-right: -16px; } .home-zone .three-swiper .swiper-slide { padding: 0 8px; } @media screen and (max-width: 1200px) { .home-zone .three-swiper .swiper-slide { padding: 0 8px; } } @media screen and (max-width: 1024px) { .home-zone .three-swiper .swiper-slide { width: 50%; } } @media screen and (max-width: 576px) { .home-zone .three-swiper .swiper-slide { width: 100%; } } .home-zone .three-swiper .swiper-slide:hover .zone-desc { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .home-zone .three-swiper .swiper-slide:hover .zone-desc * { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .home-zone .three-swiper .swiper-slide:hover .zone-desc table td { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .home-zone .three-swiper .swiper-slide:hover .zone-desc table td * { --tw-text-opacity: 1; color: rgb(41 41 41 / var(--tw-text-opacity, 1)); } .home-zone .three-swiper .swiper-slide:hover .txt { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .home-zone .three-swiper .swiper-slide:hover .txt .section-title { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .home-zone .three-swiper .txt { min-height: 15.625rem; pointer-events: none; -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-zone .three-swiper .zone-desc { font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; } .home-zone .three-swiper .zone-desc * { font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; } .home-zone .three-swiper .zone-desc p { -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-zone .three-swiper .zone-desc table tr:first-child td { width: 100%; } .home-zone .three-swiper .zone-desc table td { font-size: clamp(14px,calc(16/1920*100rem),16px); -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-zone .box { 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; } .home-zone .box .img { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100% } @media (max-width: 1200px) { .home-zone .box .txt { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; height: 100% } } @media (min-width: 1200.1px) { .home-zone .box .txt { max-width: 67%; } } .home-zone .zone-desc { max-height: 300px; padding-right: 10px; overflow-y: auto; } @media screen and (max-width: 1400px) { .home-zone .zone-desc { max-height: 120px; } } @media screen and (max-width: 1200px) { .home-zone .zone-desc { max-height: 90px; } } .home-zone .zone-desc::-webkit-scrollbar { background: #E3EDF2; width: 2px !important; border-radius: 2px; } .home-zone .zone-desc::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px #E3EDF2; background-color: #E3EDF2; border-radius: 2px; } .home-zone .zone-desc::-webkit-scrollbar-thumb { background-color: #0A5E9B; border-radius: 30px !important; } @media screen and (max-width: 1024px) { .home-zone .zone-desc::-webkit-scrollbar-thumb { height: auto; } } @-moz-document url-prefix() { .home-zone .zone-desc { scrollbar-width: thin; scrollbar-color: #0A5E9B #E3EDF2; } } .news-detail-page .top-banner { display: none; } .news-detail-page .banner-breadcrumb-2 h2 { display: none; } .news-detail-page .banner-breadcrumb-2 .global-breadcrumb h2 { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .news-detail-page .banner-breadcrumb-2 .global-breadcrumb ol li:after { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .news-detail-page .banner-breadcrumb-2 .global-breadcrumb ol li a, .news-detail-page .banner-breadcrumb-2 .global-breadcrumb ol li span { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .news-detail .news-type { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .news-detail #ez-toc-container ul li::before { display: none; } .news-detail .time-wrap::after { content: ''; pointer-events: none; left: 0 /* 0px */; z-index: 10; display: block; height: 1px; 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%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; background: #2D54C5; } .news-detail .briefcontent { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 700; } .news-detail .briefcontent * { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 700; } .ez-toc-list li::before { display: none !important; } @media screen and (max-width: 576px) { .news-other .swiper-nav { padding-top: calc(16/1920*100rem); } } @media (min-width: 1200.1px) { .news-other .three-swiper .swiper { margin-left: -20px; margin-right: -20px; } .news-other .three-swiper .swiper-slide { padding-left: 20px; padding-right: 20px; } } .product-main { margin-bottom: calc(20/1920*100rem); } .product-main .swiper::before, .product-main .swiper::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; top: 0 /* 0px */; z-index: 20; display: block; width: 100%; --tw-bg-opacity: 1; background-color: rgb(10 94 155 / 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; -webkit-clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%); height: 60%; max-width: calc( 100% - 24px); } .product-main .swiper::after { max-width: calc( 100% - 20px); z-index: 10; --tw-bg-opacity: 1; background-color: rgb(5 170 184 / var(--tw-bg-opacity, 1)); -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); } .product-main .swiper .swiper-wrapper { position: relative; z-index: 40; } .product-main .img { 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-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 1200.1px) { .product-main .img { height: 27.08333rem; } } .product-main .img a { width: 100%; } @media screen and (max-width: 1024px) { .product-main .img a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 100%; } .product-main .img a img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: contain; -webkit-transition: .3s ease-in-out all; transition: .3s ease-in-out all; } } @media (min-width: 1024.1px) { .product-main .img a { padding: calc(16/1920*100rem); padding-top: calc(60/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: 27.08333rem; width: auto; } .product-main .img a img { width: auto; height: 100%; object-fit: contain; } } .product-thumb { position: relative; } .product-thumb .img-wrap.video::after { content: '\f04b'; pointer-events: none; z-index: 20; --tw-bg-opacity: 1; background-color: rgb(227 240 243 / var(--tw-bg-opacity, 1)); font-family: 'Font Awesome 6 Pro'; font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 900; --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; 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: 1.66667rem; min-width: 1.66667rem; height: 1.66667rem; } .product-thumb .img-wrap.video::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; background: -webkit-radial-gradient(50% 50%, 125% 125%, #6BCFF6 0%, rgba(107, 207, 246, 0) 100%); background: radial-gradient(125% 125% at 50% 50%, #6BCFF6 0%, rgba(107, 207, 246, 0) 100%); width: 2.70833rem; min-width: 2.70833rem; height: 2.70833rem; } .product-thumb .img-wrap a { height: 5.41667rem; width: 100%; border-width: 1px; padding: calc(8/1920*100rem); background: #f7f7f6; } .product-thumb .img-wrap a img { width: 100%; height: 100%; object-fit: contain; } .product-thumb .swiper-slide.swiper-slide-thumb-active a { --tw-border-opacity: 1; border-color: rgb(5 170 184 / var(--tw-border-opacity, 1)); } .product-thumb .prev, .product-thumb .next { border-color: transparent !important; background: none !important; width: 1.66667rem !important; } .product-thumb .prev:before, .product-thumb .next:before { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .product-thumb .prev:hover:before, .product-thumb .next:hover:before { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } @media (min-width: 1200.1px) { .product-thumb .prev { left: -2.60417rem; } .product-thumb .next { right: -2.60417rem; } } .product-detail .social-network { 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; } .product-detail .social-network a { --tw-bg-opacity: 1; background-color: rgb(227 240 243 / var(--tw-bg-opacity, 1)); } .product-detail .social-network a em, .product-detail .social-network a i { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .product-detail .social-network a:hover { --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); } .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)); } .product-detail .table-wrapper table tr:first-child td { padding-top: 0 /* 0px */; } .product-detail .table-wrapper table td { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(220 220 220 / var(--tw-border-opacity, 1)); padding-top: calc(16/1920*100rem); padding-bottom: calc(16/1920*100rem); vertical-align: top; } .product-detail .table-wrapper table td strong { font-weight: 700; } .product-detail .table-wrapper table td strong * { font-weight: 700; } .product-detail .table-wrapper table td ul, .product-detail .table-wrapper table td ol { list-style-type: none; padding-left: 10px; } .product-detail .table-wrapper table td ul li, .product-detail .table-wrapper table td ol li { position: relative; margin-bottom: calc(4/1920*100rem); } .product-detail .table-wrapper table td ul li::before, .product-detail .table-wrapper table td ol li::before { content: ''; pointer-events: none; position: absolute; top: 0 /* 0px */; left: -14px; z-index: 10; margin-top: calc(8/1920*100rem); margin-right: calc(12/1920*100rem); display: 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 } .product-detail .table-wrapper table td ul ol, .product-detail .table-wrapper table td ol ol { padding-left: calc(12/1920*100rem); padding-top: calc(4/1920*100rem); } .product-detail .table-wrapper table td ul ol li::before, .product-detail .table-wrapper table td ol ol li::before { content: ''; margin-right: calc(12/1920*100rem); height: 1px; width: 6px; min-width: 6px; border-radius: 9999px } .product-detail .table-wrapper table td:first-child { padding-right: calc(20/1920*100rem); font-weight: 700; min-width: 9.89583rem; } .product-detail .table-wrapper table td:first-child * { font-weight: 700; } .product-detail-2 .swiper { margin: calc(calc(12/1920*100rem) * -1); margin-left: calc(calc(20/1920*100rem) * -1); margin-right: calc(calc(20/1920*100rem) * -1); padding: calc(12/1920*100rem); padding-left: calc(8/1920*100rem); padding-right: calc(8/1920*100rem); } .product-detail-2 .swiper-slide { padding-left: calc(8/1920*100rem); padding-right: calc(8/1920*100rem); } .news-list { overflow: hidden; } @media (min-width: 576.1px) { .news-list .news-item-side .txt { padding-top: 0 /* 0px */; } } .news-list .desc { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(14px,calc(16/1920*100rem),16px); } .news-list .desc * { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: clamp(14px,calc(16/1920*100rem),16px); } .news-list time { font-size: clamp(14px,calc(16/1920*100rem),16px); } .news-list .side-col { place-content: baseline; } .news-item-side { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / 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; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .news-item-side:first-child { border-top-color: transparent; padding-top: 0 /* 0px */; } @media (max-width: 576px) { .news-item-side { margin-bottom: calc(20/1920*100rem); } } @media (min-width: 576.1px) { .news-item-side { border-top-width: 1px; --tw-border-opacity: 1; border-top-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; } } .news-item-side .headline { margin-top: calc(12/1920*100rem); margin-bottom: calc(12/1920*100rem); } @media (min-width: 576.1px) { .news-item-side .headline a { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } } @media screen and (min-width: 1024px) and (max-width: 1600px) { .news-item-side .desc { display: none; } } @media (min-width: 576.1px) { .news-item-side .img { margin-right: calc(16/1920*100rem); -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } } .news-item-side .img a { overflow: hidden; 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; } .news-item-side .img a img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 576.1px) { .news-item-side .img a { width: 10.41667rem; min-width: 10.41667rem; max-width: 10.41667rem; height: 7.29167rem; } } .news-item-side .txt { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; padding-top: calc(20/1920*100rem) } @media (min-width: 1024.1px) { .news-item-side .txt { padding-right: calc(16/1920*100rem); } .news-big .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: 25rem; width: 100%; } .news-big .img a img { width: 100%; height: 100%; object-fit: cover; } } .news-item .desc { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .type { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 400; line-height: 1; --tw-text-opacity: 1; color: rgb(15 102 166 / var(--tw-text-opacity, 1)); } .news-type { 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-type .type { margin-right: calc(16/1920*100rem); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-right-width: 1px; --tw-border-opacity: 1; border-right-color: rgb(220 220 220 / var(--tw-border-opacity, 1)); padding-right: calc(16/1920*100rem); line-height: 1; } .side-nav { box-shadow: 4px 4px 16px 8px #00000014; } .side-nav ul { padding: calc(20/1920*100rem); padding-top: 0 /* 0px */; } @media screen and (max-width: 1024px) { .side-nav ul { display: none; } .side-nav ul.is-open { display: block; } } .side-nav li:last-child a { border-bottom-color: transparent; } .side-nav li.active a { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .side-nav .title { --tw-bg-opacity: 1 !important; background-color: rgb(15 102 166 / var(--tw-bg-opacity, 1)) !important; } @media screen and (max-width: 1200px) { .side-nav .title { 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; } } .side-nav .title.is-open .icon { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .side-nav .title .icon { -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 .title .icon::after { content: '\f078'; pointer-events: none; z-index: 10; display: block; height: 100%; width: 100%; font-family: 'Font Awesome 6 Pro'; font-size: clamp(18px,calc(20/1920*100rem),20px); --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 } @media (min-width: 1200.1px) { .side-nav .title .icon { display: none; } } .filter-item { box-shadow: 4px 4px 16px 8px #00000014; } .filter-item .wrap { padding: calc(20/1920*100rem); padding-top: 0 /* 0px */; } .filter-item a:last-child { border-bottom-color: transparent; } .filter-item a.active { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .filter-item .title { --tw-bg-opacity: 1 !important; background-color: rgb(15 102 166 / var(--tw-bg-opacity, 1)) !important; } @media screen and (max-width: 1024px) { .mobile-filter { pointer-events: none; position: fixed; top: 60px; left: 0 /* 0px */; height: 100%; width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding: calc(32/1920*100rem); padding-top: calc(24/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; z-index: 90; } } .mobile-filter.is-open { pointer-events: auto; opacity: 1; } .mobile-filter .close-filter { display: none; } @media screen and (max-width: 1024px) { .mobile-filter .close-filter { bottom: 80px; height: 40px; overflow: hidden; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); font-weight: 500; 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%); width: 96%; } } .mobile-filter .close-filter span { font-size: clamp(16px,calc(18/1920*100rem),18px); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .filter-toggle { position: fixed; top: 50%; left: 5px; z-index: 40; height: 36px; width: 36px; overflow: hidden; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(20 72 102 / var(--tw-bg-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; } @media (min-width: 1024.1px) { .filter-toggle { display: none; } } .filter-toggle em { font-size: clamp(18px,calc(20/1920*100rem),20px); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media screen and (max-width: 1024px) { .filter-wrap { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; padding-top: calc(8/1920*100rem); } } @media (min-width: 1024.1px) { .filter-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; } } @media (max-width: 1200px) { .filter-sort { margin-top: calc(20/1920*100rem); } } .filter-sort .custom-select { 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-sort .custom-select select { height: 44px; --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); font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; } @media (min-width: 768.1px) { .filter-sort .custom-select select { min-width: 12.5rem; } } .product-item { position: relative; overflow: hidden; border-radius: calc(8/1920*100rem); padding: calc(20/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; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .product-item::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; z-index: 20; display: block; height: 0 /* 0px */; width: 0 /* 0px */; --tw-bg-opacity: 1; background-color: rgb(15 102 166 / 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; top: 4.16667rem; -webkit-clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%); max-width: calc( 100% - 24px); max-height: 9.375rem; } .product-item .img { position: relative; } .product-item .img a { position: relative; z-index: 40; 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: 11.97917rem; width: auto; } .product-item .img a img { width: auto; height: 100%; object-fit: contain; -webkit-transition: .4s all ease-in-out; transition: .4s all ease-in-out; } .product-item .desc { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 600; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .product-item .desc * { font-size: clamp(14px,calc(16/1920*100rem),16px); font-weight: 600; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); } .product-item:hover { --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); } .product-item:hover::after { width: 100%; height: 60%; } .product-item:hover .img img { -webkit-transform: translateY(-30px); transform: translateY(-30px); } @media screen and (max-width: 1024px) { .recruit-detail { padding-top: calc(24/1920*100rem); } } @media (min-width: 1024.1px) { .recruit-detail .social-network { left: -45px; } } .recruit-detail .block-wrap { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(239 239 239 / var(--tw-border-opacity, 1)); padding-top: calc(32/1920*100rem); padding-bottom: calc(32/1920*100rem); } .recruit-detail .block-wrap:not(:last-child) { margin-bottom: calc(40/1920*100rem); } .recruit-detail .table-wrap td { border-top-width: 1px; --tw-border-opacity: 1; border-top-color: rgb(220 220 220 / var(--tw-border-opacity, 1)); padding-top: calc(12/1920*100rem); padding-bottom: calc(12/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); color: #151515; } @media (min-width: 576.1px) { .recruit-detail .table-wrap td { padding-left: calc(20/1920*100rem); padding-right: calc(20/1920*100rem); } } .recruit-detail .table-wrap td * { font-size: clamp(16px,calc(18/1920*100rem),18px); color: #151515; } .recruit-detail .table-wrap td:nth-child(1) { white-space: nowrap; padding-left: 0 /* 0px */; font-weight: 700; --tw-text-opacity: 1; color: rgb(129 129 129 / var(--tw-text-opacity, 1)); width: 8.33333rem; } @media (min-width: 576.1px) { .recruit-detail .table-wrap tr:last-child td { border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-color: rgb(220 220 220 / var(--tw-border-opacity, 1)); } } .recruit-detail .table-wrap tr:last-child td:first-child { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .recruit-detail .table-wrap tr:last-child td:first-child * { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .recruit-detail .btn.btn-primary.btn-download { margin-top: calc(12/1920*100rem); --tw-border-opacity: 1; border-color: rgb(227 237 242 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(227 237 242 / var(--tw-bg-opacity, 1)); } .recruit-detail .btn.btn-primary.btn-download em, .recruit-detail .btn.btn-primary.btn-download span { position: relative; z-index: 20; margin: 0 /* 0px */; --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .recruit-detail .btn.btn-primary.btn-download span { margin-left: calc(8/1920*100rem); margin-right: 0 /* 0px */; } .recruit-detail .btn.btn-primary.btn-download:hover em, .recruit-detail .btn.btn-primary.btn-download:hover span { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .recruit-detail .contact-info address { font-size: clamp(14px,calc(16/1920*100rem),16px); font-style: normal; } .recruit-detail .contact-info address * { font-size: clamp(14px,calc(16/1920*100rem),16px); } .recruit-detail .contact-info address a:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .recruit-detail .contact-info address li { font-weight: 700; 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; } .recruit-detail .contact-info address li * { font-weight: 700; 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 .contact-info address li:not(:last-child) { margin-bottom: calc(12/1920*100rem); } .recruit-detail .contact-info address li p { margin-bottom: 0 /* 0px */; } .recruit-detail .contact-info address li strong { white-space: nowrap; } .recruit-detail .contact-info address li span { margin-left: calc(12/1920*100rem); display: inline-block; font-weight: 400; } .recruit-detail .btn-wrap .btn { width: 100%; } .recruit-detail .btn-wrap .btn.btn-secondary { margin-top: calc(12/1920*100rem); } .recruit-detail .btn-wrap .btn.btn-secondary em { margin-right: calc(8/1920*100rem); } @media (min-width: 1024.1px) { .recruit-detail .wrap-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @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: 1300px) { .recruit-detail .recruit-item time { font-size: clamp(14px,calc(16/1920*100rem),16px); } .recruit-detail .recruit-item time * { font-size: clamp(14px,calc(16/1920*100rem),16px); } } .recruit-item { padding: calc(16/1920*100rem); } @media (min-width: 1200.1px) { .recruit-item { padding: calc(24/1920*100rem); } } .recruit-item .headline { margin-bottom: calc(16/1920*100rem); } .recruit-item .headline a { overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .recruit-item .timeline { font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .recruit-item .timeline * { font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .recruit-item .timeline span { --tw-text-opacity: 1; color: rgb(21 21 21 / var(--tw-text-opacity, 1)); } .recruit-item .timeline span * { --tw-text-opacity: 1; color: rgb(21 21 21 / var(--tw-text-opacity, 1)); } .recruit-item .timeline em, .recruit-item .timeline i { margin-right: calc(8/1920*100rem); } .recruit-item .timeline span { margin-left: calc(8/1920*100rem); } .recruit-2 .row { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .recruit-2 .icon { 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.54167rem; width: auto; } .recruit-2 .icon img { width: auto; width: 100%; height: 100%; object-fit: contain; } .recruit-2 .row { margin: 0 -6px -12px -6px; } .recruit-2 .row .col { padding: 0 6px; margin-bottom: 12px; } .recruit-2 .item { -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-2 .item .icon { -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-2 .item .icon img { -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-2 .item .headline, .recruit-2 .item .desc { -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-2 .item:hover { --tw-border-opacity: 1; border-color: rgb(10 94 155 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); } .recruit-2 .item:hover .icon { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .recruit-2 .item:hover .headline, .recruit-2 .item:hover .desc { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .recruit-2 .item:hover .headline *, .recruit-2 .item:hover .desc * { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .recruit-list .modulepager { display: none; } .recruit-list table { overflow: hidden; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .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(10 94 155 / var(--tw-bg-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(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 * { 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; font-weight: 700; width: 80px; max-width: 80px; min-width: 80px; } .recruit-list table thead th:nth-child(2) { width: 44%; text-align: left } .recruit-list table thead th:nth-child(3), .recruit-list table thead th:nth-child(4), .recruit-list table thead th:nth-child(5) { width: 17%; } .recruit-list table tbody tr:nth-child(even) td { --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity, 1)); } .recruit-list table tbody tr td { border-width: 1px; 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); font-weight: 500; border: 1px solid #CEDBE6; } .recruit-list table tbody tr td * { font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; } .recruit-list table tbody tr td:nth-child(1) { text-align: center; font-weight: 700; width: 90px; max-width: 90px; } .recruit-list table tbody tr td:nth-child(2) { width: 50%; text-align: left } .recruit-list table tbody tr td:nth-child(3), .recruit-list table tbody tr td:nth-child(4), .recruit-list table tbody tr td:nth-child(5) { width: 15%; } .recruit-list table tbody tr td:hover a { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .recruit-list table tbody tr .btn { width: 100%; } .recruit-list table .btn-wrap { padding-top: calc(8/1920*100rem); padding-bottom: calc(8/1920*100rem); } .filter-table-wrap tbody tr { display: none; } .ajax-btn-wrap.disble-btn { display: none; } .toggle-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; border-bottom-width: 1px; --tw-border-opacity: 1; border-bottom-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)); } .toggle-item.is-toggle .title { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .toggle-item.is-toggle .title * { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .toggle-item.is-toggle .title span { -webkit-line-clamp: unset; } .toggle-item.is-toggle .title .icon::after { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); content: '\f068'; } .toggle-item.is-toggle .article { display: block; } .toggle-item .title { padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); font-size: clamp(18px,calc(20/1920*100rem),20px); 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: 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 .title span { font-size: clamp(18px,calc(20/1920*100rem),20px); font-weight: 500; 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 .title .icon { position: relative; overflow: hidden; border-radius: 9999px; 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; width: 1.04167rem; height: 1.04167rem; min-width: 1.04167rem; } .toggle-item .title .icon::after { content: '\2b'; pointer-events: none; z-index: 30; display: block; height: 100%; width: 100%; font-family: 'Font Awesome 6 Pro'; font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 300; -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 } .toggle-item .article { display: none; padding-bottom: calc(12/1920*100rem); } .zone-nav li.active a { --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .tech-item:hover .sub-title a { --tw-text-opacity: 1; color: rgb(5 170 184 / var(--tw-text-opacity, 1)); } @media (min-width: 1200.1px) { .flex-card-section .img-wrap 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: 29.16667rem; width: auto; } .flex-card-section .img-wrap a img { width: auto; height: 100%; object-fit: cover; } } @media screen and (max-width: 1024px) { .flex-card-section .img-wrap a { position: relative; display: block; height: 0; overflow: hidden; padding-top: 82.35294%; } .flex-card-section .img-wrap 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; } } .flex-card-section .item { position: relative; height: inherit; } .flex-card-section .txt { pointer-events: none; z-index: 30; height: 100%; width: 100%; 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-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; 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; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background: var(--color-code); } .flex-card-section .txt > .headline { white-space: nowrap; -webkit-transition: .5s all ease-in-out; transition: .5s all ease-in-out; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg); transform: translateX(-50%) translateY(-50%) rotate(-90deg); } .flex-card-section .text { position: absolute; bottom: 0 /* 0px */; left: 0 /* 0px */; z-index: 30; width: 100%; padding: calc(32/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; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; background: var(--color-code); } @media screen and (max-width: 1024px) { .flex-card-section .text { opacity: 1; } } .flex-card-section .text .headline { -webkit-transition: .5s all ease-in-out; transition: .5s all ease-in-out; } .flex-card-section .flex-options { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; overflow: hidden; height: 100%; width: 100% } @media screen and (max-width: 1024px) { .flex-card-section .flex-options { display: none; } } .flex-card-section .card-option { -webkit-transform: scale(1); transform: scale(1); background-size: cover; position: relative; width: 17.3%; overflow: hidden; cursor: pointer; -webkit-transition: .6s all ease-in-out; transition: .6s all ease-in-out; border: 2px solid white; } .flex-card-section .card-option::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; bottom: 0 /* 0px */; z-index: 10; display: block; height: 100%; width: 100%; 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; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 33.18%, rgba(0, 0, 0, 0.5) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 33.18%, rgba(0, 0, 0, 0.5) 100%); } .flex-card-section .card-option:not(.active) { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .flex-card-section .card-option.active { -webkit-box-flex: 10000; -webkit-flex-grow: 10000; -ms-flex-positive: 10000; flex-grow: 10000; -webkit-transform: scale(1); transform: scale(1); width: 50%; } .flex-card-section .card-option.active .text { opacity: 1; } .flex-card-section .card-option.active .txt { opacity: 0; } .flex-card-section .card-option.active .txt-wrap { height: 140px; width: 100% } .flex-card-section .card-option .card-label { height: 100%; width: 100%; -webkit-transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } @media (min-width: 1200.1px) { .flex-card-section .two-swiper { display: none; } } @media screen and (max-width: 1024px) { .flex-card-section .two-swiper { display: block; } } .about-1 { padding-top: calc(32/1920*100rem); } @media (min-width: 1200.1px) { .about-1 { padding-top: calc(24/1920*100rem); } } .about-1 .row { margin: 0 /* 0px */; padding: 0 /* 0px */; } .about-1 .row .col { margin: 0 /* 0px */; padding: 0 /* 0px */; } .about-1 .img { height: 100%; 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; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; } @media (max-width: 1024px) { .about-1 .img { margin-bottom: calc(20/1920*100rem); } } .about-1 .img a { width: 100%; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; position: relative; display: block; height: 0; overflow: hidden; padding-top: 56.25%; } .about-1 .img a img, .about-1 .img a picture, .about-1 .img a video, .about-1 .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; } .about-1 .zone-desc { text-align: justify; } @media (min-width: 1024.1px) { .about-1 .zone-desc { padding-left: calc(40/1920*100rem); padding-right: calc(40/1920*100rem); } } .about-1 .zone-desc * { text-align: justify; } .about-1 .zone-desc span, .about-1 .zone-desc strong { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .about-1 .zone-desc .img-second { float: right; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: auto; } .about-1 .zone-desc .img-second img { width: auto; height: 100%; object-fit: contain; } .about-1 .zone-desc img { float: right; } .about-2 .history-thumb::after { content: ''; pointer-events: none; position: absolute; left: 0 /* 0px */; top: 15px; z-index: 10; display: block; height: 2px; 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: #41aef0; } .about-2 .history-thumb .swiper-slide.swiper-slide-active .dot { --tw-border-opacity: 1; border-color: rgb(10 94 155 / var(--tw-border-opacity, 1)); } .about-2 .history-thumb .swiper-slide.swiper-slide-active .dot::after { --tw-bg-opacity: 1; background-color: rgb(10 94 155 / var(--tw-bg-opacity, 1)); } .about-2 .history-thumb .swiper-slide.swiper-slide-active .year { --tw-text-opacity: 1; color: rgb(10 94 155 / var(--tw-text-opacity, 1)); } .about-2 .dot { background-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; } .about-2 .dot::after { content: ''; pointer-events: none; z-index: 10; display: block; height: 16px; width: 16px; min-width: 16px; overflow: hidden; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(139 197 232 / 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 } .about-2 .history-main .swiper { overflow: visible; } .about-2 .history-main .swiper-slide { position: relative; } .about-2 .history-main .swiper-slide .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 } .about-2 .history-main .swiper-slide img { opacity: 0.5; } .about-2 .history-main .swiper-slide.swiper-slide-active .txt { opacity: 1; } .about-2 .history-main .swiper-slide.swiper-slide-active .img::after { opacity: 0; } .about-2 .history-main .swiper-slide.swiper-slide-active img { opacity: 1; } @media (min-width: 1200.1px) { .about-4 { min-height: 39.58333rem; } } .about-4::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(bottom, rgba(10, 94, 155, 0) 0%, rgba(3, 56, 94, 0.5) 32.5%, rgba(1, 49, 84, 0.8) 58.75%, #012F51 84.41%); background: linear-gradient(360deg, rgba(10, 94, 155, 0) 0%, rgba(3, 56, 94, 0.5) 32.5%, rgba(1, 49, 84, 0.8) 58.75%, #012F51 84.41%); } .about-4 .tab-nav-hover li:last-child::after { display: none; } .about-4 .tab-nav-hover li::after { content: ''; pointer-events: none; z-index: 10; display: block; height: 20px; width: 2px; border-radius: 9999px; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.5; -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; margin: 12px 0 12px 15px; } .about-4 .tab-nav-hover li a { 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-4 .tab-nav-hover li.active .title { --tw-text-opacity: 1; } .about-4 .tab-nav-hover li.active .dot::before { opacity: 0; } .about-4 .tab-nav-hover li.active .dot::after { opacity: 1; } .about-4 .zone-desc { font-weight: 400; } .about-4 .zone-desc * { font-size: clamp(24px,calc(28/1920*100rem),28px); font-weight: 400; } .about-4 .zone-desc ul li { font-weight: 400; } .about-4 .zone-desc ul li:before { left: -15px; height: 6px; width: 6px; min-width: 6px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .about-4 .dot::before, .about-4 .dot::after { content: ''; pointer-events: none; z-index: 10; display: block; -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 } .about-4 .dot::before { height: 16px; width: 16px; border-radius: 9999px; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-bg-opacity: 0.5; } .about-4 .dot::after { height: 100%; width: 100%; opacity: 0; background: url("../img/icon/dot.png"); background-repeat: no-repeat; background-size: contain; background-position: center; } @media (max-width: 1024px) { .about-5 { padding-bottom: 100px; } } @media (min-width: 1024.1px) { .about-5 { padding-bottom: calc(32/1920*100rem); } } .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; } @media screen and (max-width: 1024px) { .about-5 .swiper-nav { bottom: -40px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .about-5 .prev, .about-5 .next { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); top: unset !important; width: 2.5rem; height: 2.5rem; } .about-5 .prev::before, .about-5 .next::before { font-size: clamp(14px,calc(16/1920*100rem),16px); } .about-5 .prev:hover, .about-5 .next:hover { --tw-bg-opacity: 1; background-color: rgb(5 170 184 / var(--tw-bg-opacity, 1)); } .about-5 .prev:hover:before, .about-5 .next:hover:before { font-size: clamp(16px,calc(18/1920*100rem),18px); } .about-5 .prev { margin-right: calc(12/1920*100rem) !important; } .about-5 .prev:before { 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; content: '\f060'; } .about-5 .next:before { font-weight: 700; content: '\f061'; } .about-5 .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: 6.77083rem; width: auto; } .about-5 .img a img { width: auto; height: 100%; object-fit: contain; } @media (max-width: 1024px) { .about-6 { padding-bottom: 100px; } } .about-6 .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; } @media screen and (max-width: 1024px) { .about-6 .swiper-nav { bottom: -50px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .about-6 .prev, .about-6 .next { top: unset !important; background: #6CCFF6; width: 2.5rem; height: 2.5rem; } .about-6 .prev::before, .about-6 .next::before { font-size: clamp(14px,calc(16/1920*100rem),16px); } .about-6 .prev:hover, .about-6 .next:hover { background: #6CCFF6; } .about-6 .prev:hover:before, .about-6 .next:hover:before { font-size: clamp(16px,calc(18/1920*100rem),18px); } .about-6 .prev { margin-right: calc(12/1920*100rem) !important; } .about-6 .prev:before { font-weight: 700; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); content: '\f060'; } .about-6 .next:before { font-weight: 700; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); content: '\f061'; } .about-6 .img a { border-width: 10px; --tw-border-opacity: 1; border-color: rgb(220 220 220 / var(--tw-border-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; position: relative; display: block; height: 0; overflow: hidden; padding-top: 140.625%; } .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 screen and (max-width: 576px) { .about-6 .swiper-slide { width: 50%; } } .contact-us { padding-bottom: calc(60/1920*100rem); } .contact-us address { margin-bottom: calc(16/1920*100rem); 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; } .contact-us address p { margin-bottom: 0 /* 0px */; } .contact-us address li { margin-bottom: calc(8/1920*100rem); font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; 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; } .contact-us address li * { font-size: clamp(16px,calc(18/1920*100rem),18px); font-weight: 500; } .contact-us address li:last-child em, .contact-us address li:last-child i { font-size: clamp(18px,calc(20/1920*100rem),20px); } .contact-us address li:last-child a { color: #008BFF; } .contact-us address em, .contact-us address i { margin-right: calc(8/1920*100rem); display: inline-block; width: 24px; min-width: 24px; font-size: clamp(14px,calc(16/1920*100rem),16px); --tw-text-opacity: 1; color: rgb(15 102 166 / var(--tw-text-opacity, 1)); } .contact-us address .item { padding-top: calc(20/1920*100rem); padding-bottom: calc(20/1920*100rem); } .contact-us address .item:first-child { padding-top: 0 /* 0px */; } .contact-us address .item:not(:last-child) { border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(227 237 242 / var(--tw-border-opacity, 1)); } .contact-us address a { display: inline-block; } .contact-us address a:hover { -webkit-text-decoration-line: underline; text-decoration-line: underline; } .contact-us .title { font-weight: 700; } .contact-us .bg-wrap { background: #E3EDF2; } @media screen and (max-width: 1800px) { .contact-us .wrap-form .frm-btnwrap { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; padding-top: calc(16/1920*100rem); } } @media screen and (min-width: 1800px) { .contact-us .wrap-form .frm-btnwrap { position: absolute; bottom: 0 /* 0px */; right: 0 /* 0px */; } } .contact-map .map-wrap { height: 100%; } .contact-map .map-wrap a, .contact-map .map-wrap .ModuleContent { display: block; height: 462px; overflow: hidden; text-align: center; width: 100%; } @media screen and (max-width: 1024px) { .contact-map .map-wrap a, .contact-map .map-wrap .ModuleContent { height: 400px; } } @media screen and (max-width: 576px) { .contact-map .map-wrap a, .contact-map .map-wrap .ModuleContent { height: 300px; } } .contact-map .map-wrap a iframe, .contact-map .map-wrap .ModuleContent iframe { display: inline-block; height: 100%; width: 100%; } /*# sourceMappingURL=main.min.css.map */