.mobile_mbtn_close{
display:none;
}
#magictext_menu_top {
background: white;
max-width: 1600px;
position: fixed;
top: 20px;
left: 50%;
z-index: 101;
width: calc(100% - 40px);
transform: translateX(-50%);
padding: 15px 5vw;
}
.site-header .site-branding {
display: flex;
justify-content: space-between;
flex-direction: unset;
width: 100%;
}
.site-header.active .site-branding {
justify-content: flex-start;
}
.site-branding>div {
display: flex;
gap: 20px;
justify-content: space-between;
width: 100%;
}
.site-branding>div>div>div:first-child {
display: flex;
gap: 40px;
align-items: center;
}
.site-branding a {
display: flex;
align-items: center;
}
.site-branding img {
width: 100%;
max-width: 165px;
transform: translatey(2px);
}
.site-branding p {
font-size: 21px;
font-weight: 400;
}
.site-header .site-branding p {
margin-bottom: 0px;
}
.site-navigation a {
color: #404040;
font-size: 16px;
font-weight: 400;
}
#menu-magictext-menu>li:last-child {
padding-left: 15px;
}
#menu-magictext-menu>li:last-child a {
background: #3C644D;
color: white;
padding: 10px 25px;
border-radius: 44px;
}
.site-navigation ul.menu {
gap: 25px;
}
.mobile_menu_btn { }
#magictext_menu_top button {
border: unset;
display: flex;
align-items: center;
}
#magictext_menu_top button svg {
width: 25px;
height: 25px;
fill: white;
}
.mobile_menu_btn {
position: relative;
}
.mobile_menu_btn button {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.mobile_menu_btn button:hover, .mobile_menu_btn button:focus {
background: transparent;
border: unset;
outline: unset;
}
#site-navigation, .mobile_mbtn_open {
transition: all 1s;
}
@media only screen and (max-width: 1300px) { #magictext_menu_top {
max-width: unset;
top: 0px;
left: 0%;
width: 100%;
transform: translateX(0%);
padding:15px 50px;
}
.site-header.active {
background: #393939 !important;
}
.site-header.active .site-branding p {
color: white !important;
}
.site-header button svg {
fill: black !important;
}
.site-header.active button svg {
fill: white !important;
}
#magictext_menu_top.active {
height: 100dvh;
}
body .site-navigation {
display: none;
}
.site-branding>div {
gap: 80px;
}
.site-branding>div>div:first-child {
display: flex;
gap: 20px;
justify-content: space-between;
width: 100%;
}
.site-branding>div {
flex-direction: column;
}
.site-header .site-navigation {
justify-content: center;
width: 100%;
}
.menu-magictext-menu-container {
flex-direction: column;
}
.site-navigation ul.menu {
flex-direction: column;
}
.site-branding>div>div>div:first-child {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.menu-magictext-menu-container {
width: 100%;
}
.menu-magictext-menu-container ul {
width: 100%;
}
.menu-magictext-menu-container li {
text-align: center;
width: 100%;
}
#menu-magictext-menu>li:last-child {
padding-left: 0px;
}
#menu-magictext-menu>li a {
background: transparent !important;
width: 100%;
color: white;
font-size: 40px;
font-weight: 400;
}
}
@media only screen and (max-width: 1300px) {
#magictext_menu_top{
padding: 15px 30px;
}
#magictext_menu_top button{
padding: 0px;
}
}
@media only screen and (max-width: 767px) {
#menu-magictext-menu>li a {
font-size: 7vw;
}
}
:root {
--max-view: 1400px;
--p-size: 18px;
--tab-size: 21px;
--sub-size: 28px;
--ani_start: -1813px;
--ani_end: -4403px;
--ani_speed: 30s;
--num_speed: 0;
}
.lisen_device{
display: block;
}
.elementor-element {
overflow: hidden;
}
h1, h2, h3, h4, h5, h6, span, a, button, p {
font-family: "Noto Sans TC", Sans-serif;
}
.contact a{
color: black;
font-weight: 400;
line-height: 1em;
}
.footersec a{
color: #5F5F5F;
font-weight: 400;
line-height: 1em;
}
.blog_section{
width: 100%;
}
.d_item {
display: block;
}
.m_item {
display: none;
}
.about_slick img {
height: 100% !important;
}
.philosophysec>div:last-child {
background: white;
}
.mobie_pd_slick {
position: relative;
}
.mobie_pd_slick .slick-slide {
height: 80vh;
}
.pd_slick_mbtn {
position: absolute;
bottom: 50%;
transform: translateY(50%);
padding: 0px;
width: 25px;
border: unset;
}
.pd_slick_mbtn:hover, .pd_slick_mbtn:focus {
background: transparent;
border: unset;
outline: unset;
}
.pd_slick_mbtn_r {
right: 20px;
}
.pd_slick_mbtn_l {
left: 20px;
}
.mobie_pd_slick_sec {
display: none;
}
.mobie_pd_slick .slick-slide>div {
position: absolute;
bottom: 0;
padding: 20px;
width: 100vw;
z-index: 1;
}
.mobie_pd_slick img {
object-fit: cover;
width: 100%;
height: 100% !important;
object-position: center;
}
.mobie_pd_slick h5 {
color: white;
font-size: 18px;
font-weight: 600;
margin: 0;
margin-bottom: 10px;
}
.mobie_pd_slick p {
color: white;
font-size: 16px;
font-weight: 400;
margin: 0;
}
.elementor-editor-active [data-aos] {
opacity: 1 !important;
}
body {
background: #F0EFE6;
overflow-x: hidden;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
#site-footer {
display: none;
}
.sub_title {
font-size: var(--tab-size);
font-weight: 500;
margin-bottom: 40px;
}
.sub_title svg {
width: var(--tab-size);
transform: translateY(3px);
margin-right: 10px;
}
#site-header {
position: fixed;
top: 0;
left: 0;
}
.bannersec {
display: grid;
width: 100%;
height: 95vh;
grid-template-columns: 25% 75%;
position: relative;
}
.bannersec h1 {
position: absolute;
bottom: 10%;
font-size: 7vw;
line-height: 1em;
margin: 0;
}
.bannersec_1 {
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.bannersec_1>h1 {
position: absolute;
right: 0;
}
.bannersec_slider {
height: 75vh;
width: 100%;
position: relative;
}
.bannersec_slider_btn {
display: flex;
gap: 10px;
margin-top: 0px;
}
.bannersec_slider_btn a {
cursor: pointer;
background: white;
width: 100%;
display: block;
padding: 10px 15px;
}
.bannersec_slider_btn svg {
width: 100%;
max-width: 10px;
opacity: 0.2;
}
.bannersec_2>div {
height: 73%;
width: 100%;
position: relative;
}
.bannersec_2 {
position: relative;
}
.bannersec_2>h1 {
position: absolute;
left: 0;
}
.bannersec_2>div>div:last-child {
position: absolute;
left: 0;
bottom: 0;
padding: 2vw;
}
.bannersec_2>div>div:last-child>h2 {
font-size: 58px;
font-weight: 700;
line-height: 1.2em;
margin: 0;
color: white;
}
.banner_slick {
height: 100%;
}
.banner_slick>div {
height: 100%;
width: 100%;
}
.banner_slick .slick-track {
height: 100%;
}
.banner_slick img {
object-fit: cover;
width: 100%;
height: 100% !important;
object-position: center;
}
#myVideo {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.marquee_sec {
width: 100%;
overflow: hidden;
padding: 10px 0px;
}
.marquee_sec>div {
font-family: "Noto Sans TC", Sans-serif;
font-size: 40px;
font-weight: 700;
color: black;
}
.marquee-content {
display: inline-block;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
.marquee-content2 {
display: inline-block;
white-space: nowrap;
animation: marquee2 10s linear infinite;
}
.marquee-content3 {
display: inline-block;
white-space: nowrap;
animation: marquee2 10s linear infinite;
}
.marquee_sec {
width: 100%;
overflow: hidden;
padding: 10px 0px;
}
.marquee_sec>div {
font-family: "Noto Sans TC", Sans-serif;
font-size: 40px;
font-weight: 700;
color: black;
}
.marquee-content {
display: inline-block;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
.marquee-content2 {
display: inline-block;
white-space: nowrap;
animation: marquee2 10s linear infinite;
}
.marquee-content3 {
display: inline-block;
white-space: nowrap;
animation: marquee2 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee3 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.marquee_sec {
display: none;
}
.marquee--fit-content {
max-width: fit-content;
}
.aboutussec {
display: flex;
width: 100%; margin: 0 auto;
margin-top: 160px;
}
.aboutussec p {
font-size: var(--p-size);
line-height: 1.9em;
font-weight: 400;
margin-bottom: 30px;
}
.aboutussec h5 {
font-size: var(--p-size);
line-height: 1.9em;
font-weight: 700;
margin: 0;
margin-bottom: 30px;
}
.aboutussec a {
font-size: var(--p-size);
color: black !important;
display: flex;
justify-content: flex-end;
line-height: 1.9em;
font-weight: 600;
}
.aboutussec h4 {
font-size: var(--sub-size);
font-weight: 600;
}
.aboutussec>div {
width: 50%;
}
.aboutussec>div:nth-child(1) {
display: flex;
justify-content: center;
padding: 10px;
}
.aboutussec>div:nth-child(2) {
position: relative;
overflow: hidden;
}
.aboutussec>div:nth-child(1)>div {
width: 100%;
max-width: 630px;
padding-top: 25px;
}
.aboutussec-pdf-grid{
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: flex-end;
}
.about_slick {
height: 70vh;
}
.about_slick>div {
height: 100%;
width: 100%;
}
.about_slick .slick-track {
height: 100%;
}
.about_slick img {
object-fit: cover;
width: 100%;
height: 100%;
object-position: center;
}
.about_slick_btn {
display: flex;
position: absolute;
bottom: 30px;
left: 35px;
z-index: 1;
gap: 10px;
}
.about_slick_btn a {
background: rgba(255, 255, 255, 0.4);
display: block;
padding: 8px 14px;
border-radius: 2px;
cursor: pointer;
}
.about_slick_btn svg {
width: 100%;
max-width: 12px;
fill: white;
transform: translateY(3px);
}
.philosophysec {
display: flex;
width: 100%;
margin: 0 auto;
}
.philosophysec>div:nth-child(1) {
width: 35%;
height: 75vh;
}
.philosophysec>div:nth-child(1) img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.philosophysec>div:nth-child(2) {
width: 65%;
display: flex;
align-items: center;
padding: 10px;
}
.philosophysec>div:nth-child(2)>div {
width: 100%;
max-width: 900px;
margin: 0 auto;
transform: translateY(-20%);
}
.philosophysec h4 {
font-weight: 600;
font-size: var(--sub-size);
color: #5F5F5F;
margin-bottom: 25px;
}
.philosophysec p {
font-size: 40px;
font-weight: 400;
margin-bottom: 0px;
}
.advantagessec {
background: #173E2E;
background-image: url(//magictex.onionyeh.com/wp-content/uploads/2024/04/advantagessec_bg.png), linear-gradient(#173E2E, #173E2E);
background-repeat: no-repeat;
background-position: 0% 100%;
height: 120vh;
}
.advantagessec>div {
display: flex;
height: 100%;
width: 100%;
align-items: center;
}
.advantagessec>div>div {
display: flex;
width: 100%;
}
.advantagessec>div>div>div {
width: 50%;
}
.advantagessecl {
display: flex;
justify-content: center;
}
.advantagessecl>div {
width: 100%;
max-width: 620px;
}
.advantagessecl h3 {
color: white;
margin-top: 0px;
}
.advantagessecl svg {
fill: white;
}
.advantagessecl h4 {
font-size: var(--sub-size);
color: white;
font-weight: 600;
}
.advantagessecl p {
font-size: var(--p-size);
font-weight: 400;
color: white;
line-height: 2em;
}
.advantagessecr {
display: grid;
grid-template-columns: 1fr;
}
.advantagessecr>div:first-child {
border-top: 1px solid white;
}
.advantagessecr>div {
border-bottom: 1px solid white;
width: 100%;
display: grid;
grid-template-columns: 300px 1fr;
align-items: center;
grid-gap: 60px;
padding-top: 15px;
padding-bottom: 15px;
}
.advantagessecr p {
margin-bottom: 0px;
color: white;
}
.advantagessecr>div>span {
font-size: 150px;
font-weight: 600;
line-height: 1em;
padding: 5px 25px 25px 25px;
color: white;
}
.advantage_num_sec {
display: flex;
align-items: flex-end;
padding: 15px 25px 15px 25px;
gap: 10px;
}
.advantage_num_sec>h6 {
font-size: 150px;
font-weight: 600;
line-height: 1em;
color: white;
padding: 0 !important;
margin: 0 !important;
}
.advantage_num_sec span {
font-size: 150px;
font-weight: 600;
line-height: 1em;
color: white;
transform: translateY(-5%);
}
.advantagessecr>div>span>b {
font-size: 40px;
line-height: 1em;
}
.advantagessecr>div>div>p:first-child {
font-size: 40px;
font-weight: 500;
}
.advantagessecr>div>div>p:last-child {
font-size: 16px;
font-weight: 400;
margin-top: 10px;
}
.advantage_num_sec1>span {
font-size: 35px !important;
transform: translateY(-20px);
}
.certificationsec {
width: 100%;
padding-top: 80px;
padding-bottom: 60px;
background: white;
margin-bottom: 60px;
}
.certificationsec>div>div:first-child {
max-width: 1600px;
margin: 0 auto;
width: 100%;
padding: 0 10px;
padding-bottom: 60px;
}
.certificationsec h3 {
font-size: var(--sub-size);
font-weight: 600;
}
.certificationsec p {
font-size: var(--p-size);
font-weight: 400;
}
.certificationsec>div>div:last-child {
position: relative;
}
.cer_slick_sec {
position: relative;
}
.cer_slick {
width: calc(100% - 110px);
margin: 0 auto;
}
.cer_slick .slick-track {
display: flex;
align-items: center;
}
.cer_slick .slick-slide {
display: flex;
justify-content: center;
}
.cer_slick img {
width: calc(100% - 90px);
}
.cer_slick_btn {
border: unset;
padding: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 22.5px;
}
.cer_slick_btn_prev {
left: 0px;
}
.cer_slick_btn_next {
right: 0px;
}
.cer_slick_btn:hover {
background: unset;
}
.cer_slick_btn:focus {
background: unset;
outline: unset;
border: unset;
}
.cer_slick_btn img {
width: 100%;
transform: translateY(3px);
}
.cer_slick_btn_prev img {
transform: translateY(3px) rotate(180deg);
}
.cer_slick_sec:hover .cer_slick.active .slick-track {
animation-play-state: paused;
}
.cer_slick.smooth .slick-track {
transition: transform 0.5s ease
}
.cer_slick.active .slick-track {
animation: slidein var(--ani_speed) infinite;
animation-timing-function: linear;
}
@keyframes slidein {
from {
transform: translateX(var(--ani_start));
}
to {
transform: translateX(var(--ani_end));
}
}
.certificat_owl .item {
height: 100%;
}
.certificat_owl .item>div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin-bottom: 100px;
}
*/ @keyframes example {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(-1321px, 0px, 0px);
}
}
[data-aos="example-anim3"] {
transform: rotate(360deg);
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
transform: rotate(0);
opacity: 1;
}
}
.cer_slide_sec>div {
white-space: nowrap;
height: 100px;
}
.spec_img {
width: calc(80% - 90px) !important;
}
.professionalsec {
width: 100%;
margin: 0 auto;
padding-top: 0px;
}
.professionalsec>div {
width: 75%;
background-image: url(//magictex.onionyeh.com/wp-content/uploads/2024/04/newimg7.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.professionalsec>div>div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 55vh;
}
.professionalsec h3 {
color: white;
}
.professionalsec h3 svg {
fill: white;
}
.professionalsec p {
font-size: 40px;
font-weight: 400;
color: white;
}
.professionalsec_pd {
display: block;
}
.professionalsec_pm {
display: none;
}
.sticky_div {  z-index: 50;
}
.is-pinned {
background: red;
}
.sticky_blank {
height: 200vh;
transition: all 1s;
display: none;
}
.owl_product_section {
position: relative;
}
.owl_product .owl-item .item {
width: calc(20vw - 5px);
height: 75vh;
transition: all 0.5s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.owl_product .owl-stage {
display: flex;
align-items: stretch;
}
.owl_product .owl-item {
height: 100%;
}
.owl_product .item {
height: 100%;
position: relative;
}
.owl_product .item>div {
position: absolute;
bottom: 3vw;
left: calc(3vw + 40px);
width: 100%;
max-width: 540px;
opacity: 0;
}
.owl_product .item img {
object-fit: cover;
width: 100%;
height: 100%;
object-position: center;
}
.owl_product_section .item h5 {
font-size: 28px;
font-weight: 600;
color: white;
}
.owl_product_section .item p {
font-size: 18px;
font-weight: 400;
color: white;
}
.product_btn:hover {
background: transparent;
outline: unset;
}
.product_btn:focus {
background: transparent;
outline: unset;
}
.product_btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: unset;
padding: 0;
z-index: 2;
display: flex;
}
.product_btn svg {
fill: white;
width: 30px;
}
.customPrevBtn {
left: 90px;
}
.customNextBtn {
right: 90px;
}
.product_text {
animation: customFadeIn 0.5s ease-in-out forwards;
}
.product_btn img {
width: 80%;
}
@keyframes customFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.owl_product_section_m {
height: 65vh;
position: relative;
}
.owl_product_m .item {
height: 65vh;
position: relative;
}
.owl_product_m .item img {
object-fit: cover;
width: 100%;
height: 100%;
object-position: center;
}
.owl_product_m .item>div {
position: absolute;
bottom: 0px;
left: 0px;
width: 100vw;
max-width: 540px;
opacity: 1;
padding: 20px 30px;
}
.owl_product_m .item h5 {
font-size: 18px;
font-weight: 600;
color: white;
margin-bottom: 5px;
}
.owl_product_m .item p {
font-size: 15px;
font-weight: 400;
color: white;
line-height: 1.8em;
}
.product_btn_m {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: unset;
padding: 0;
z-index: 2;
display: flex;
}
.product_btn_m img {
width: 100%;
max-width: 18px;
}
.customPrevBtn_m {
left: 30px;
}
.customNextBtn_m {
right: 30px;
}
.product_btn_m:hover {
background: transparent;
outline: unset;
}
.product_btn_m:focus {
background: transparent;
outline: unset;
}
.owl_product_section {
display: block;
}
.owl_product_section_m {
display: none;
}
.refit {
display: flex;
width: 100%; margin: 0 auto;
align-items: stretch;
}
.refit p {
font-size: var(--p-size);
line-height: 2.2em;
font-weight: 400;
line-height: 1.8em;
}
.refit h4 {
font-size: var(--sub-size);
font-weight: 600;
line-height: 1.4em;
}
.refit>div {
width: 50%;
}
.refit>div:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
margin-top: 8%;
padding-bottom: 140px;
}
.refit>div:nth-child(2) {
background: white;
height: auto;
}
.refit>div:nth-child(1)>div {
width: 100%;
max-width: 620px;
}
.refit>div:nth-child(2) img { }
.refit_p_mar {
margin-bottom: 80px;
}
.refit_h4_d {
display: block;
}
.refit_h4_m {
display: none;
}
.environmental {
display: flex;
width: 100%;
margin: 0 auto;
}
.environmental>div:nth-child(1) {
width: 50%;
padding-top: 40px;
}
.environmental>div:nth-child(1) img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.environmental>div:nth-child(2) {
width: 50%;
display: flex;
height: auto;
background: white;
}
.environmental>div:nth-child(2)>div {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.environmental p {
font-size: 40px;
font-weight: 400;
margin-bottom: 0px;
transform: translateY(-10%);
}
.news {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding-bottom: 140px;
padding-top: 230px;
}
.news>div {
display: flex;
width: 100%;
gap:30px;
}
.news>div>div>img{
object-fit: cover;
width: 100%;
height: 100% !important;
opacity: 0.7;
transition: all 1s;
position: absolute;
}
.news>div>div:hover>img{
opacity: 1;
}
.news>div>div {
width: 100%;
aspect-ratio: 4.1 / 5.4;
position: relative;
background: black;
}
.news>div>div>div{
position: absolute;
bottom:0;
left: 0;
padding: 40px;
}
.news .sub_title {
margin-top: 0px;
}
.news p {
font-size: 21px;
font-weight: 500;
margin-bottom: 0px;
color: white;
}
.news a {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
right: 0;
background: white;
line-height: 1em;
width: 40px;
height: 40px;
}
.news a img {
width: 8px;
height: 16px;
}
.contact {
display: grid;
grid-template-columns: 65% 35%;
width: 100%;
margin: 0 auto;
position: relative;
align-items: flex-end;
}
.contact>div:nth-child(1) {
height: 100vh;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(//magictex.onionyeh.com/wp-content/uploads/2024/04/newimg8.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
.contact>div:nth-child(1)>div {
width: 100%;
max-width: 840px;
transform: translateY(-10%);
}
.contact>div:nth-child(1) h3 {
color: white;
}
.contact>div:nth-child(1) h3 svg {
fill: white;
}
.contact>div:nth-child(2)>div {
border-top: 1px solid #AFAFAF;
display: flex;
flex-direction: column;
gap: 4px;
padding: 15px 20px 20px 15px;
padding-left: 80px;
}
.contact>div:nth-child(2)>div:last-child {
border-bottom: 1px solid #AFAFAF;
}
.contact>div:nth-child(1) h6 {
font-size: 40px;
line-height: 1.5em;
color: white;
font-weight: 400;
}
.contact>div:nth-child(2) h5 {
font-size: 21px;
font-weight: 500;
margin-bottom: 0px;
line-height: 1em;
}
.contact>div:nth-child(2) h6 {
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
line-height: 1em;
}
.contact>div:nth-child(2) p {
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
line-height: 1em;
text-decoration: none;
text-underline: none;
}
.contact_h6_d {
display: block;
}
.contact_h6_m {
display: none;
}
.footersec {
display: flex;
justify-content: center;
padding: 40px;
}
.footersec>div>img {
width: 170px;
margin-bottom: 25px;
}
.footersec>div {
width: 100%;
max-width: 1600px;
}
.footersec>div h6 {
font-size: 18px;
font-weight: 500;
margin-bottom: 15px;
line-height: 1em;
}
.footersec>div>div {
display: flex;
justify-content: space-between;
}
.footersec>div>div>div {
display: flex;
gap: 30px;
}
.footersec>div>div>div p {
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
line-height: 1em;
color: #5F5F5F;
}
.product_canvas {
display: flex;
gap: 3px;
}
.pc_item {
position: relative;
}
.pc_item {
width: 15%; position: relative;
overflow: hidden;
transition: all 1s ease;
height: 75vh;
cursor: pointer;
}
.pc_item.active {
width: 60%;
}
.pc_item>div {
height: 100%;
}
.pc_item>div>div {
opacity: 0;
position: absolute;
bottom: 0;
padding: 40px;
}
.pc_item.active>div>div {
animation: show_pc_text 1s 1s forwards;
}
.pc_item h1 {
font-family: 'Noto Sans TC', 'Sans-Serif';
font-size: 28px;
margin: 0;
font-weight: 600;
color: white;
margin-bottom: 20px;
}
.pc_item p {
font-family: 'Noto Sans TC', 'Sans-Serif';
font-size: 18px;
margin: 0;
font-weight: 400;
color: white;
}
.pc_item img {
object-fit: cover;
width: 100%;
height: 100% !important;
}
.pc_item:nth-child(1) img {
object-position: 50%;
}
.pc_item:nth-child(2) img {
object-position: 67%;
}
.pc_item:nth-child(3) img {
object-position: 32%;
}
.pc_item:nth-child(4) img {
object-position: 40%;
}
.pc_item:nth-child(5) img {
object-position: 75%;
}
.pc_item:nth-child(6) img {
object-position: 71%;
}
@keyframes show_pc_text {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.pc_item>div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.2));
}
.mobie_pd_slick .slick-slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.1));
}
.v-secion{
background: white;
padding: 130px 0;
}
.v-secion>div{
display: flex;
align-items: center;
max-width: 1600px;
margin: 0 auto;
}
.v-secion-video{
background: black;
aspect-ratio: 16:9;
width: 50%;
display: block;
}
.v-secion-video video{
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
.v-secion-text{
width: 50%;
}
.v-secion-text p{
font-size: var(--p-size);
font-weight: 400;
line-height: 1.8em;
width: 70%;
margin: 0 auto;
}
@media only screen and (max-width: 1800px) {
.certificationsec>div>div:first-child {
padding: 0px 5vw;
padding-bottom: 60px;
}
.v-secion{
padding: 130px 30px;
}
.v-secion>div{
gap:40px;
}
.v-secion-text p{
width: 100%;
}
}
@media only screen and (max-width: 1700px) {
.certificationsec>div>div:first-child {
padding: 0px 6vw;
padding-bottom: 60px;
}
.environmental p{
padding: 30px;
}
.contact>div:nth-child(1)>div{
padding: 0 50px;
}
}
@media only screen and (max-width: 1600px) {
.news{
padding: 230px 50px 140px 50px;
}
.environmental p{
transform: translateY(-30%);
}
.cer_slick img{
width: calc(100% - 45px);
}
.spec_img {
width: calc(80% - 45px) !important;
}
}
@media only screen and (max-width: 1500px) {
.philosophysec>div:nth-child(2){
padding: 10px 50px;
}
.advantagessecl>div{
max-width: unset;
padding: 10px 50px;
}
.professionalsec>div{
width: 85%;
}
.advantagessecr>div{
grid-gap:20px;
}
}
@media only screen and (max-width: 1400px) {
.aboutussec>div:nth-child(1) {
padding: 10px 50px;
}
.refit>div:nth-child(1)>div{
padding: 0 50px;
}
.refit>div:nth-child(1){
padding-bottom: 60px;
}
.news{
padding: 140px 50px 140px 50px;
}
.aboutussec p, .aboutussec h5, .aboutussec a{
font-size: 15px;
}
.aboutussec>div:nth-child(1)>div{
padding-top:0px;
}
.v-secion{
padding: 95px 30px;
}
}
@media only screen and (max-width: 1300px) {
.lisen_device{
display: none;
}
.contact>div:nth-child(2)>div{
padding-left: 40px;
}
.mobie_pd_slick .slick-slide>div{
padding: 50px;
}
.mobie_pd_slick .slick-slide{
height:60vh;
}
.certificationsec>div>div:first-child {
padding: 0px 50px;
padding-bottom: 60px;
}
.professionalsec>div>div{
align-items: flex-start;
padding: 0px 50px;
}
}
@media only screen and (max-width: 1200px) {
.refit{
flex-direction: column-reverse;
}
.environmental{
flex-direction: column;
}
.environmental>div:nth-child(1){
height: 60vh;
}
.environmental>div:nth-child(1),.environmental>div:nth-child(2){
width: 100%;
}
.environmental p{
padding: 80px 50px;
transform: translateY(0%);
}
.environmental>div:nth-child(2)>div{
max-width: unset;
}
.refit>div{
width: 100%;
}
.refit>div:nth-child(1)>div{
max-width: unset;
}
}
@media only screen and (max-width: 1024px) {
.contact>div:nth-child(1){
justify-content: flex-start;
}
.contact>div:nth-child(1)>div{
padding: 0 15px;
max-width: unset;
}
.philosophysec>div:nth-child(2){
align-items: flex-start;
}
.aboutussec>div:nth-child(1){
justify-content: flex-start;
}
.aboutussec>div:nth-child(1)>div{
max-width: unset;
}
.philosophysec>div:nth-child(2){
padding: 10px 50px;
}
.d_item {
display: none;
}
.m_item {
display: block;
}
.mobie_pd_slick_sec {
display: block;
}
.bannersec {
display: flex;
flex-direction: column-reverse;
height: unset;
}
.bannersec_1 .bannersec_slider {
width: 90%;
margin-right: auto;
}
.bannersec .bannersec_slider_btn {
margin-left: auto;
margin-right: 10%;
}
.bannersec_2 {
width: 100%;
height: 80svh;
}
.bannersec_2>div {
height: 100%;
}
.bannersec_2>div>div:last-child {
display: flex;
justify-content: center;
width: 100%;
bottom: 10px;
}
.bannersec_2>div>div:last-child>h2 {
font-size: 7vw;
padding: 10px 20px;
line-height: 1.4em;
}
.bannersec_1>h1 {
display: none;
}
.bannersec_2>h1 {
display: none;
}
.bannersec_1 .bannersec_slider {
height: 50vh;
}
.site-branding img {
max-width: 130px;
}
.site-branding p {
font-size: 15px;
}
.bannersec_2>div>div:last-child {
justify-content: flex-start;
}
.marquee {
--gap: 60px;
position: relative;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
width: 100%;
}
.marquee__content {
flex-shrink: 0;
display: flex;
justify-content: space-around;
gap: var(--gap);
min-width: fit-content;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
.enable-animation .marquee__content {
animation: scroll 35s linear infinite;
}
.marquee_sec {
display: flex;
}
.aboutussec {
flex-direction: column;
margin-top: 20px;
}
.aboutussec>div:nth-child(1) {
padding: 0 50px;
padding-bottom: 40px;
}
.aboutussec>div {
width: 100%;
}
.aboutussec p {
font-size: 15px;
}
.about_slick {
height: 50vh;
}
.about_slick_btn {
left: 30px;
}
.philosophysec {
flex-direction: column-reverse;
padding: 0px 0px;
}
.philosophysec>div:nth-child(1) {
width: 100%;
}
.philosophysec>div:nth-child(2) {
width: 100%;
}
.philosophysec>div:nth-child(2)>div {
transform: translateY(0%);
}
.philosophysec h4 {
font-size: 21px;
}
.philosophysec p {
font-size: 30px;
}
.philosophysec>div:nth-child(2)>div {
padding: 40px 0px;
margin: 0;
}
.philosophysec>div:nth-child(1) {
height: 50vh;
}
.advantagessec {
height: auto;
background-position: right 0%;
position: relative;
background-image: url(//magictex.onionyeh.com/wp-content/uploads/2024/04/advantagessec_bg_m.png), linear-gradient(#173E2E, #173E2E);
padding: 70px 0px;
}
.advantagessec>div>div {
flex-direction: column;
}
.advantagessec>div>div>div {
width: 100%;
}
.advantagessecl>div {
padding: 200px 50px 30px 50px;
}
.advantagessecl p {
font-size: 15px;
}
.advantage_num_sec>h6, .advantage_num_sec span {
font-size: 80px;
}
.advantage_num_sec1>span {
font-size: 25px !important;
transform: translateY(-10px);
}
.advantagessecr>div {
grid-template-columns: 220px 1fr;
grid-gap: 15px;
}
.advantage_num_sec {
padding: 0px 30px 5px 50px;
}
.advantagessecr>div>div>p:first-child {
font-size: 20px;
}
.advantagessecr>div>div>p:last-child {
font-size: 14px;
}
.certificationsec {
padding: 50px 0px 50px 0px;
}
.certificationsec p {
font-size: 15px;
}
.cer_slick_btn {
display: none;
}
.cer_slick {
width: 100%;
}
.cer_slick img {
width: calc(100% - 30px);
}
.spec_img {
width: calc(80% - 30px) !important;
}
.certificationsec>div>div:first-child {
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}
.professionalsec>div {
width: 100%;
}
.professionalsec {
padding-top: 0px;
}
.professionalsec p {
font-size: 30px;
margin-bottom: 0px;
}
.professionalsec>div>div {
height: 65vh;
}
.professionalsec_pd {
display: none;
}
.professionalsec_pm {
display: block;
}
.owl_product_section {
display: none;
}
.owl_product_section_m {
display: block;
}
.environmental {
flex-direction: column;
}
.environmental>div:nth-child(1), .environmental>div:nth-child(2) {
width: 100%;
}
.environmental p {
font-size: 30px;
padding: 70px 50px;
}
.news {
grid-template-columns: 1fr;
padding-top: 120px;
padding-left: 30px;
padding-right: 30px;
grid-gap:25px;
}
.news>div{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap:30px;
}
.news>div>div{
bottom: unset;
top:0;
}
.news>div>div{
aspect-ratio: 3 / 2.6;
}
.news .sub_title{
margin-bottom:20px !important;
}
.contact {
grid-template-columns: 1fr;
margin-bottom: 60px;
}
.contact>div:nth-child(1) h6 {
font-size: 30px;
}
.contact_h6_d {
display: none;
}
.contact_h6_m {
display: block;
}
.contact>div:nth-child(1) {
height: 70vh;
align-items: flex-end;
padding: 30px;
}
.contact>div:nth-child(2)>div {
padding: 15px 50px 20px 50px;
}
.contact>div:nth-child(2) h5 {
font-size: 16px;
font-weight: 700;
}
.contact_h5_m {
line-height: 1.4em !important;
}
.footersec {
flex-direction: column;
padding: 0px 50px 30px 50px;
}
.footersec>div>div {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footersec>div>img {
margin-bottom: 15px;
}
.footersec>div h6 {
margin: 0;
margin-bottom: 10px;
font-weight: 700;
}
.footersec>div>div>div:first-child {
flex-direction: column;
gap: 10px;
margin-bottom: 30px;
}
.footersec>div>div>div:last-child {
justify-content: space-between;
}
.footersec>div>div>div:last-child p {
font-size: 13px;
}
.product_canvas {
display: none;
}
.v-secion>div{
display: flex;
flex-direction: column;
}
.v-secion-video{
width: 100%;
}
.v-secion-text{
width: 100%;
}
.v-secion-text p{
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.bannersec_2>div>div:last-child>h2 {
font-size: 32px;
}
.bannersec_2>div>div:last-child {
justify-content: center;
}
.aboutussec>div:nth-child(1){
padding: 0 30px;
}
.philosophysec>div:nth-child(2){
padding: 10px 30px;
}
.advantagessecl>div{
padding: 200px 30px 30px 30px;
}
.advantage_num_sec{
padding: 0px 30px 5px 30px;
}
.advantagessecr>div{
grid-template-columns: 190px 1fr;
}
.certificationsec>div>div:first-child{
padding-left: 30px;
padding-right: 30px;
}
.professionalsec>div>div{
padding: 0 30px;
}
.mobie_pd_slick .slick-slide>div{
padding: 30px;
}
.refit>div:nth-child(1)>div{
padding: 0 30px;
}
.environmental p{
padding: 70px 30px;
}
.contact>div:nth-child(1)>div{
padding: 0px;
}
.contact>div:nth-child(2)>div{
padding: 15px 30px 20px 30px;
}
.footersec{
padding: 0 30px 30px 30px;
}
.aboutussec>div:nth-child(1) {
padding: 0 30px;
padding-bottom: 30px;
}
}
@media only screen and (max-width: 600px) {
.refit>div:nth-child(1)>div{
padding:0;
}
.refit {
flex-direction: column-reverse;
}
.refit>div {
width: 100%;
}
.refit>div:nth-child(2) {
background: transparent;
height: 33vh;
}
.refit>div:nth-child(1) {
margin-top: unset;
padding-bottom: unset;
padding: 30px;
}
.refit_p_mar {
margin-bottom: 40px;
}
.refit p {
font-size: 15px;
}
.refit_h4_d {
display: none;
}
.refit_h4_m {
display: block;
}
.refit>div:nth-child(2) img {
object-fit: cover;
width: 100%;
height: 100%;
object-position: center;
}
.news>div {
grid-template-columns: 1fr;
}
.news p{
font-size: 16px;
}
.news>div>div>div{
padding: 20px;
bottom:unset;
top:0;
}
}
@media only screen and (max-width: 400px) {
.aboutussec-pdf-grid{
gap: 20px;
}
.aboutussec a{
line-height: 1em;
}
}