.elementor-44 .elementor-element.elementor-element-e03c40b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-44 .elementor-element.elementor-element-e03c40b:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-e03c40b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor7 );}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-44 .elementor-element.elementor-element-aaf749d{width:var( --container-widget-width, 15% );max-width:15%;--container-widget-width:15%;--container-widget-flex-grow:0;}.elementor-44 .elementor-element.elementor-element-aaf749d.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-a010de3{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-44 .elementor-element.elementor-element-a010de3.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-mega-menu{--n-menu-divider-color:var( --e-global-color-text );}.elementor-44 .elementor-element.elementor-element-b7f9632{--display:flex;}.elementor-44 .elementor-element.elementor-element-b140044{--display:flex;}.elementor-44 .elementor-element.elementor-element-5908d3f{--display:flex;}.elementor-44 .elementor-element.elementor-element-970f451{--display:flex;}.elementor-44 .elementor-element.elementor-element-196b31a{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:initial;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:initial;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:80px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:0px;--n-menu-title-font-size:20px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:90px;}.elementor-44 .elementor-element.elementor-element-196b31a.elementor-element{--align-self:flex-end;}.elementor-44 .elementor-element.elementor-element-196b31a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-44 .elementor-element.elementor-element-196b31a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-44 .elementor-element.elementor-element-196b31a > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-44 .elementor-element.elementor-element-88e2d38{--display:flex;--min-height:400px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-44 .elementor-element.elementor-element-6231bc6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-44 .elementor-element.elementor-element-6231bc6.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-b6268f7{width:var( --container-widget-width, 192.453% );max-width:192.453%;--container-widget-width:192.453%;--container-widget-flex-grow:0;}.elementor-44 .elementor-element.elementor-element-b6268f7.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-cec9356{--display:flex;--min-height:0px;}.elementor-44 .elementor-element.elementor-element-cec9356.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-b06ccd6{width:var( --container-widget-width, 103.125% );max-width:103.125%;--container-widget-width:103.125%;--container-widget-flex-grow:0;}.elementor-44 .elementor-element.elementor-element-b06ccd6.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-c1e4e54{--display:flex;--min-height:300px;--justify-content:flex-start;}.elementor-44 .elementor-element.elementor-element-c1e4e54.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-50cd7a1{width:var( --container-widget-width, 109.848% );max-width:109.848%;--container-widget-width:109.848%;--container-widget-flex-grow:0;}.elementor-44 .elementor-element.elementor-element-50cd7a1.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-d7c9a88{--display:flex;--min-height:400px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-44 .elementor-element.elementor-element-d7c9a88.e-con{--align-self:center;}.elementor-44 .elementor-element.elementor-element-a254428{--display:flex;}.elementor-44 .elementor-element.elementor-element-a254428.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-0812a07{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-44 .elementor-element.elementor-element-0812a07.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-0c09e9c{width:var( --container-widget-width, 114.08% );max-width:114.08%;--container-widget-width:114.08%;--container-widget-flex-grow:0;}.elementor-44 .elementor-element.elementor-element-0c09e9c.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-18c3ae4{--display:flex;--min-height:0px;--margin-top:-5px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-44 .elementor-element.elementor-element-18c3ae4.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-bf919d0{width:var( --container-widget-width, 115.026% );max-width:115.026%;--container-widget-width:115.026%;--container-widget-flex-grow:0;}.elementor-44 .elementor-element.elementor-element-bf919d0.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-44 .elementor-element.elementor-element-9c09b19{--display:flex;}.elementor-44 .elementor-element.elementor-element-a1a1419{--display:flex;}.elementor-44 .elementor-element.elementor-element-cb63243{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:center;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:center;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:19px;width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;border-style:solid;border-width:1px 0px 0px 0px;border-color:var( --e-global-color-astglobalcolor4 );--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-space-between:20px;--n-menu-title-font-size:25px;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-44 .elementor-element.elementor-element-cb63243 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-44 .elementor-element.elementor-element-cb63243 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-44 .elementor-element.elementor-element-cb63243 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:"Roboto", Sans-serif;font-weight:500;}.elementor-44 .elementor-element.elementor-element-cb63243 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title{border-radius:2px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-44 .elementor-element.elementor-element-196b31a{--n-menu-toggle-icon-distance-from-dropdown:32px;}}@media(max-width:767px){.elementor-44 .elementor-element.elementor-element-aaf749d{width:var( --container-widget-width, 191px );max-width:191px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:191px;--container-widget-flex-grow:0;text-align:start;}.elementor-44 .elementor-element.elementor-element-aaf749d.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-44 .elementor-element.elementor-element-aaf749d img{width:50%;max-width:100%;}.elementor-44 .elementor-element.elementor-element-196b31a{margin:00px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--n-menu-toggle-icon-distance-from-dropdown:22px;}.elementor-44 .elementor-element.elementor-element-196b31a.elementor-element{--align-self:center;}.elementor-44 .elementor-element.elementor-element-c1e4e54{--min-height:0px;}.elementor-44 .elementor-element.elementor-element-18c3ae4{--min-height:0px;}.elementor-44 .elementor-element.elementor-element-cb63243{--n-menu-title-distance-from-content:0px;--n-menu-title-space-between:0px;}}@media(min-width:768px){.elementor-44 .elementor-element.elementor-element-a010de3{--width:75%;}.elementor-44 .elementor-element.elementor-element-6231bc6{--width:30%;}.elementor-44 .elementor-element.elementor-element-cec9356{--width:30%;}.elementor-44 .elementor-element.elementor-element-c1e4e54{--width:33.687%;}.elementor-44 .elementor-element.elementor-element-a254428{--width:30%;}.elementor-44 .elementor-element.elementor-element-0812a07{--width:35%;}.elementor-44 .elementor-element.elementor-element-18c3ae4{--width:136.865%;}}/* Start custom CSS for html, class: .elementor-element-b6268f7 *//* ======================================== SERVICE MENU ======================================== */ .mold-service { width: 320px; } /* ======================================== TITLE ======================================== */ .service-menu-title { font-size: 28px; font-weight: 700; color: #222; margin: 0; white-space: nowrap; } /* ======================================== HEADER ======================================== */ .mold-service-header { display: flex; align-items: center; justify-content: space-between; } /* ======================================== CHECKBOX ======================================== */ .mold-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .mold-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 5px 10px; } /* ======================================== MENU CONTENT ======================================== */ .service-menu-content { list-style: none; padding: 0; margin: 25px 0 0; } /* ======================================== MENU ITEM ======================================== */ .service-menu-content li { border-bottom: 1px solid #ddd; } /* ======================================== MENU LINK ======================================== */ .service-menu-content a { display: block; padding: 15px 20px; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== HOVER ======================================== */ .service-menu-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 30px; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* Container */ .mold-service { width: 100%; } /* Title */ .service-menu-title { font-size: 20px; } /* Toggle Button */ .mold-toggle { display: block; } /* Default: Hide Menu */ .service-menu-content { display: none; margin-top: 15px; } /* Open: Change + to − */ .mold-checkbox:checked ~ .mold-service-header .mold-toggle { font-size: 0; } .mold-checkbox:checked ~ .mold-service-header .mold-toggle::after { content: "−"; font-size: 26px; } /* Open: Show Menu */ .mold-checkbox:checked ~ .service-menu-content { display: block; } /* Mobile Links */ .service-menu-content a { padding: 13px 15px; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-50cd7a1 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0c09e9c *//* ======================================== MACHINING PROCESS ======================================== */ .machining-process-menu { width: 320px; } /* ======================================== TWO COLUMN MENU ======================================== */ .machining-process-menu .machining-process-content { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 0; width: 100%; } /* ======================================== MENU ITEM ======================================== */ .machining-process-menu .machining-process-content li { min-width: 0; } /* ======================================== MENU LINK ======================================== */ .machining-process-menu .machining-process-content a { display: block; padding: 15px 0; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== BOTTOM LINE ======================================== */ .machining-process-menu .machining-process-content li { border-bottom: 1px solid #ddd; } /* ======================================== HOVER ======================================== */ .machining-process-menu .machining-process-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 10px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bf919d0 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0812a07 */.mold-service h2 { font-size: 20px; font-weight: 700; color: #222; white-space: nowrap; margin-bottom: 15px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b6268f7 *//* ======================================== SERVICE MENU ======================================== */ .mold-service { width: 320px; } /* ======================================== TITLE ======================================== */ .service-menu-title { font-size: 28px; font-weight: 700; color: #222; margin: 0; white-space: nowrap; } /* ======================================== HEADER ======================================== */ .mold-service-header { display: flex; align-items: center; justify-content: space-between; } /* ======================================== CHECKBOX ======================================== */ .mold-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .mold-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 5px 10px; } /* ======================================== MENU CONTENT ======================================== */ .service-menu-content { list-style: none; padding: 0; margin: 25px 0 0; } /* ======================================== MENU ITEM ======================================== */ .service-menu-content li { border-bottom: 1px solid #ddd; } /* ======================================== MENU LINK ======================================== */ .service-menu-content a { display: block; padding: 15px 20px; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== HOVER ======================================== */ .service-menu-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 30px; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* Container */ .mold-service { width: 100%; } /* Title */ .service-menu-title { font-size: 20px; } /* Toggle Button */ .mold-toggle { display: block; } /* Default: Hide Menu */ .service-menu-content { display: none; margin-top: 15px; } /* Open: Change + to − */ .mold-checkbox:checked ~ .mold-service-header .mold-toggle { font-size: 0; } .mold-checkbox:checked ~ .mold-service-header .mold-toggle::after { content: "−"; font-size: 26px; } /* Open: Show Menu */ .mold-checkbox:checked ~ .service-menu-content { display: block; } /* Mobile Links */ .service-menu-content a { padding: 13px 15px; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-50cd7a1 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0c09e9c *//* ======================================== MACHINING PROCESS ======================================== */ .machining-process-menu { width: 320px; } /* ======================================== TWO COLUMN MENU ======================================== */ .machining-process-menu .machining-process-content { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 0; width: 100%; } /* ======================================== MENU ITEM ======================================== */ .machining-process-menu .machining-process-content li { min-width: 0; } /* ======================================== MENU LINK ======================================== */ .machining-process-menu .machining-process-content a { display: block; padding: 15px 0; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== BOTTOM LINE ======================================== */ .machining-process-menu .machining-process-content li { border-bottom: 1px solid #ddd; } /* ======================================== HOVER ======================================== */ .machining-process-menu .machining-process-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 10px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bf919d0 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0812a07 */.mold-service h2 { font-size: 20px; font-weight: 700; color: #222; white-space: nowrap; margin-bottom: 15px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b6268f7 *//* ======================================== SERVICE MENU ======================================== */ .mold-service { width: 320px; } /* ======================================== TITLE ======================================== */ .service-menu-title { font-size: 28px; font-weight: 700; color: #222; margin: 0; white-space: nowrap; } /* ======================================== HEADER ======================================== */ .mold-service-header { display: flex; align-items: center; justify-content: space-between; } /* ======================================== CHECKBOX ======================================== */ .mold-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .mold-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 5px 10px; } /* ======================================== MENU CONTENT ======================================== */ .service-menu-content { list-style: none; padding: 0; margin: 25px 0 0; } /* ======================================== MENU ITEM ======================================== */ .service-menu-content li { border-bottom: 1px solid #ddd; } /* ======================================== MENU LINK ======================================== */ .service-menu-content a { display: block; padding: 15px 20px; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== HOVER ======================================== */ .service-menu-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 30px; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* Container */ .mold-service { width: 100%; } /* Title */ .service-menu-title { font-size: 20px; } /* Toggle Button */ .mold-toggle { display: block; } /* Default: Hide Menu */ .service-menu-content { display: none; margin-top: 15px; } /* Open: Change + to − */ .mold-checkbox:checked ~ .mold-service-header .mold-toggle { font-size: 0; } .mold-checkbox:checked ~ .mold-service-header .mold-toggle::after { content: "−"; font-size: 26px; } /* Open: Show Menu */ .mold-checkbox:checked ~ .service-menu-content { display: block; } /* Mobile Links */ .service-menu-content a { padding: 13px 15px; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-50cd7a1 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0c09e9c *//* ======================================== MACHINING PROCESS ======================================== */ .machining-process-menu { width: 320px; } /* ======================================== TWO COLUMN MENU ======================================== */ .machining-process-menu .machining-process-content { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 0; width: 100%; } /* ======================================== MENU ITEM ======================================== */ .machining-process-menu .machining-process-content li { min-width: 0; } /* ======================================== MENU LINK ======================================== */ .machining-process-menu .machining-process-content a { display: block; padding: 15px 0; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== BOTTOM LINE ======================================== */ .machining-process-menu .machining-process-content li { border-bottom: 1px solid #ddd; } /* ======================================== HOVER ======================================== */ .machining-process-menu .machining-process-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 10px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bf919d0 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0812a07 */.mold-service h2 { font-size: 20px; font-weight: 700; color: #222; white-space: nowrap; margin-bottom: 15px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b6268f7 *//* ======================================== SERVICE MENU ======================================== */ .mold-service { width: 320px; } /* ======================================== TITLE ======================================== */ .service-menu-title { font-size: 28px; font-weight: 700; color: #222; margin: 0; white-space: nowrap; } /* ======================================== HEADER ======================================== */ .mold-service-header { display: flex; align-items: center; justify-content: space-between; } /* ======================================== CHECKBOX ======================================== */ .mold-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .mold-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 5px 10px; } /* ======================================== MENU CONTENT ======================================== */ .service-menu-content { list-style: none; padding: 0; margin: 25px 0 0; } /* ======================================== MENU ITEM ======================================== */ .service-menu-content li { border-bottom: 1px solid #ddd; } /* ======================================== MENU LINK ======================================== */ .service-menu-content a { display: block; padding: 15px 20px; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== HOVER ======================================== */ .service-menu-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 30px; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* Container */ .mold-service { width: 100%; } /* Title */ .service-menu-title { font-size: 20px; } /* Toggle Button */ .mold-toggle { display: block; } /* Default: Hide Menu */ .service-menu-content { display: none; margin-top: 15px; } /* Open: Change + to − */ .mold-checkbox:checked ~ .mold-service-header .mold-toggle { font-size: 0; } .mold-checkbox:checked ~ .mold-service-header .mold-toggle::after { content: "−"; font-size: 26px; } /* Open: Show Menu */ .mold-checkbox:checked ~ .service-menu-content { display: block; } /* Mobile Links */ .service-menu-content a { padding: 13px 15px; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-50cd7a1 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0c09e9c *//* ======================================== MACHINING PROCESS ======================================== */ .machining-process-menu { width: 320px; } /* ======================================== TWO COLUMN MENU ======================================== */ .machining-process-menu .machining-process-content { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 0; width: 100%; } /* ======================================== MENU ITEM ======================================== */ .machining-process-menu .machining-process-content li { min-width: 0; } /* ======================================== MENU LINK ======================================== */ .machining-process-menu .machining-process-content a { display: block; padding: 15px 0; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== BOTTOM LINE ======================================== */ .machining-process-menu .machining-process-content li { border-bottom: 1px solid #ddd; } /* ======================================== HOVER ======================================== */ .machining-process-menu .machining-process-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 10px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bf919d0 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0812a07 */.mold-service h2 { font-size: 20px; font-weight: 700; color: #222; white-space: nowrap; margin-bottom: 15px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-b6268f7 *//* ======================================== SERVICE MENU ======================================== */ .mold-service { width: 320px; } /* ======================================== TITLE ======================================== */ .service-menu-title { font-size: 28px; font-weight: 700; color: #222; margin: 0; white-space: nowrap; } /* ======================================== HEADER ======================================== */ .mold-service-header { display: flex; align-items: center; justify-content: space-between; } /* ======================================== CHECKBOX ======================================== */ .mold-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .mold-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 5px 10px; } /* ======================================== MENU CONTENT ======================================== */ .service-menu-content { list-style: none; padding: 0; margin: 25px 0 0; } /* ======================================== MENU ITEM ======================================== */ .service-menu-content li { border-bottom: 1px solid #ddd; } /* ======================================== MENU LINK ======================================== */ .service-menu-content a { display: block; padding: 15px 20px; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== HOVER ======================================== */ .service-menu-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 30px; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* Container */ .mold-service { width: 100%; } /* Title */ .service-menu-title { font-size: 20px; } /* Toggle Button */ .mold-toggle { display: block; } /* Default: Hide Menu */ .service-menu-content { display: none; margin-top: 15px; } /* Open: Change + to − */ .mold-checkbox:checked ~ .mold-service-header .mold-toggle { font-size: 0; } .mold-checkbox:checked ~ .mold-service-header .mold-toggle::after { content: "−"; font-size: 26px; } /* Open: Show Menu */ .mold-checkbox:checked ~ .service-menu-content { display: block; } /* Mobile Links */ .service-menu-content a { padding: 13px 15px; font-size: 14px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-50cd7a1 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-0c09e9c *//* ======================================== MACHINING PROCESS ======================================== */ .machining-process-menu { width: 320px; } /* ======================================== TWO COLUMN MENU ======================================== */ .machining-process-menu .machining-process-content { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 0; width: 100%; } /* ======================================== MENU ITEM ======================================== */ .machining-process-menu .machining-process-content li { min-width: 0; } /* ======================================== MENU LINK ======================================== */ .machining-process-menu .machining-process-content a { display: block; padding: 15px 0; color: #333; text-decoration: none; font-size: 16px; white-space: nowrap; transition: 0.3s; } /* ======================================== BOTTOM LINE ======================================== */ .machining-process-menu .machining-process-content li { border-bottom: 1px solid #ddd; } /* ======================================== HOVER ======================================== */ .machining-process-menu .machining-process-content a:hover { background-color: #f2f2f2; color: #0066cc; padding-left: 10px; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-bf919d0 *//* ======================================== CARD GRID ======================================== */ .card-grid { width: 100%; height: 300px; box-sizing: border-box; } /* ======================================== TITLE ======================================== */ .card-grid-header { height: 38px; display: flex; align-items: flex-start; justify-content: space-between; box-sizing: border-box; } .card-grid-title { margin: 0; padding: 0; font-size: 20px; font-weight: 700; line-height: 1.2; color: #222; white-space: nowrap; } /* ======================================== CHECKBOX ======================================== */ .card-grid-checkbox { display: none; } /* ======================================== MOBILE TOGGLE ======================================== */ .card-grid-toggle { display: none; font-size: 26px; font-weight: 300; line-height: 1; color: #222; cursor: pointer; padding: 0 5px; } /* ======================================== CARD ITEMS ======================================== */ .card-grid-items { width: 100%; height: 252px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; margin-top: 10px; box-sizing: border-box; } /* ======================================== CARD ======================================== */ .card-grid-item { display: flex; flex-direction: column; min-width: 0; min-height: 0; text-decoration: none; color: #222; background: #fff; border: 1px solid #ddd; overflow: hidden; transition: 0.3s ease; } /* ======================================== IMAGE ======================================== */ .card-grid-image { width: 100%; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: 0.3s ease; } /* ======================================== CARD TITLE ======================================== */ .card-grid-label { flex-shrink: 0; padding: 8px 10px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; white-space: nowrap; text-align: center; } /* ======================================== HOVER ======================================== */ .card-grid-item:hover { border-color: #0066cc; } .card-grid-item:hover .card-grid-image img { transform: scale(1.05); } .card-grid-item:hover .card-grid-label { color: #0066cc; } /* ======================================== OTHERS CARD ======================================== */ .others-card { display: flex; flex-direction: column; } .others-image { display: flex; align-items: center; justify-content: center; } .others-icon { display: flex; gap: 6px; align-items: center; justify-content: center; } .others-icon span { width: 14px; height: 14px; border: 1px solid #888; display: block; box-sizing: border-box; transition: 0.3s ease; } /* ======================================== OTHERS HOVER ======================================== */ .others-card:hover .others-icon span { border-color: #0066cc; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { /* ------------------------------------ CONTAINER ------------------------------------ */ .card-grid { width: 100%; height: auto; } /* ------------------------------------ TITLE ------------------------------------ */ .card-grid-header { height: 30px; align-items: flex-start; } .card-grid-title { font-size: 20px; line-height: 1.2; } /* ------------------------------------ SHOW TOGGLE ------------------------------------ */ .card-grid-toggle { display: block; } /* ------------------------------------ HIDE CARDS ------------------------------------ */ .card-grid-items { display: none; width: 100%; height: auto; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: 10px; margin-top: 15px; } /* ------------------------------------ OPEN ------------------------------------ */ .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle { font-size: 0; } .card-grid-checkbox:checked ~ .card-grid-header .card-grid-toggle::after { content: "−"; font-size: 26px; } .card-grid-checkbox:checked ~ .card-grid-items { display: grid; } /* ------------------------------------ MOBILE IMAGE ------------------------------------ */ .card-grid-image { height: 90px; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-grid-image img { width: 100%; height: 100%; object-fit: contain; } /* ------------------------------------ MOBILE TEXT ------------------------------------ */ .card-grid-label { height: 32px; padding: 7px 5px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; text-align: center; box-sizing: border-box; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-0812a07 */.mold-service h2 { font-size: 20px; font-weight: 700; color: #222; white-space: nowrap; margin-bottom: 15px; }/* End custom CSS */