@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap'); *, :after, :before { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } html { height: 100% } body { font-family: "Roboto","Noto Sans TC","Noto Sans JP","Noto Sans SC","Apple LiGothic Medium",arial,sans-serif; font-size: 16px; font-weight: 400; display: flex; flex-direction: column; height: 100% } /* 整頁或區塊為日文（ 或
）→ 用 Noto Sans JP */ :lang(ja-JP) { font-family: "Noto Sans JP","Roboto","Noto Sans TC","Noto Sans SC","Apple LiGothic Medium", Arial, sans-serif; } /* 繁體中文 → 用 Noto Sans TC */ :lang(zh-TW) { font-family: "Noto Sans TC","Roboto","Noto Sans JP","Noto Sans SC","Apple LiGothic Medium", Arial, sans-serif; } /* （可選）簡體中文 → 用 Noto Sans SC */ :lang(zh-CN) { font-family: "Noto Sans SC","Roboto","Noto Sans JP","Noto Sans TC", Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: 700 } h1 { font-size: 2.2rem } h2 { font-size: 2rem } h3 { font-size: 1.8rem } h4 { font-size: 1.6rem } h5 { font-size: 1.4rem } h6 { font-size: 1.2rem } a { color: #1f211f; text-decoration: none } a:link { color: #1f211f; text-decoration: none } a:visited { color: #1f211f; text-decoration: none } a:hover { color: #004d22; text-decoration: none } .remark_blue a:hover { color: #004d22 !important; text-decoration: underline } a:active { color: #1f211f; text-decoration: none } hr { margin: 5px 0; border-top: 1px solid #009844; opacity: 1; box-sizing: inherit } .container { max-width: 1200px } .tech_baby_all { display: none } option:disabled { color: silver !important } ::-webkit-scrollbar { width: 12px; background-color: #f5f5f5 } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 10px rgba(31,33,31,.2); border-radius: 0; background-color: #f0f2f1 } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 10px rgba(31,33,31,.16); background-color: #989e9a } ::-webkit-scrollbar-thumb:hover { background-color: #808582 } ::-webkit-scrollbar-thumb:active { background-color: #5f635f } input[type=text], input[type=number], input[type=password], input[type=email],textarea { background-color: #F7F9F8; border: 1px solid #B9BFBC; box-sizing: border-box; padding: 0 8px; border-radius: 2px; } input[type=password]:hover, input[type=email]:hover, input[type=text]:hover, input[type=number]:hover, textarea:hover { border-color: #009844; } input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus { outline: 5px solid rgb(0 77 34 /0.1); } input[type=email]:disabled, input[type=password]:disabled, input[type=text]:disabled, input[type=number]:disabled, textarea:disabled { border-color: #DADEDB; background-color: #DADEDB; border: 1px solid #B9BFBC; } input[type=checkbox] + label { display: inline-block; margin-top: 2px; margin-right: 20px; padding-left: 26px; line-height: 25px; background: url(/img/checkbox-check.png) no-repeat; background-position: top 2px left; vertical-align: middle; } input[type=checkbox]:checked + label{ background:url(/img/checkbox-checked.png) no-repeat; background-position:top 2px left; vertical-align:middle; } input[type=radio] + label { display: inline-block; margin-top: 8px; margin-right: 20px; padding-left: 26px; line-height: 25px; background: url(/img/radio-check.png) no-repeat; background-position: top 2px left; vertical-align: middle; } input[type=radio]:checked + label { background: url(/img/radio-checked.png) no-repeat; background-position: top 2px left; vertical-align: middle; } input[type=radio]:disabled + label { background: url(/img/radio-disabled.png) no-repeat; background-position: top 2px left; vertical-align: middle; } input[type=radio], input[type=checkbox] { display: none; } input::placeholder { font-size: 0.7rem; } .box_shadow{ box-shadow: 0 2px 10px rgb(0 77 34 / 10%); } .modal-header { margin-bottom: 1rem } .modal-fullscreen .modal-body { overflow-y: hidden } .border-n { border: 0 } .machine_condition { display: inline-block; width: auto } .br-none { border-right: none !important } .bg-tb-input { background-color: #f7f9f8 !important; border-left: none !important; border: 1px solid #b9bfbc; border-radius: 2px } .bg-tb-input-dark { background-color: #dadedb !important; border-left: none !important; border: 1px solid #b9bfbc; border-radius: 2px } .bg-tb-input-dark2 { background-color: #dadedb !important; border: 1px solid #b9bfbc; border-radius: 2px } .btn-green { color: #fff; width: auto; background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); margin: 10px 3px; padding: 10px 20px !important; cursor: pointer; border-radius: 2px; border-color: transparent } .btn-green:hover { color: #fff !important; background-image: none; background-color: #e60012 } .btn-green > img { margin-right: 8px } .download-search-bar { margin-top: -35px } .text-green { color: #009844 !important } .text-black { color: #212121 !important } .text-white { color: #fff } .text-success-s { color: #00cc5c } .text-bold { font-weight: 400 } .bg-none { background-color: transparent !important } .bg-white { background-color: #fff } .bg-gray { background-color: #f7f9f8 } .bg-green { background-color: #009844 !important } .bg-green1 { background-color: #24a600; margin-bottom: -1px; background: 0; border: 1px solid transparent } .table > tbody > tr > td, .table > tbody > tr > th { vertical-align: middle; border:1px solid black; } .sidemenuItem { padding: 4px 8px; } .sidemenuItem_active { background-color: #e6f2eb; color: #009844 !important; border-radius: 2px } #form1 { height: 100%; display: flex; flex-direction: column } .form-check-input { margin-top: .2em; border-color: #3f423f; margin-right: 5px } .form-check-input:checked { background-color: #009844; border-color: #009844 } .form-check-input:focus { box-shadow: 0 0 5px #d8f2df } .form-check-input:disabled { pointer-events: none; filter: none; opacity: .5; border-color: #989e9a } #gotop { width: 60px; height: 60px; position: fixed; right: 1%; bottom: 13%; background-color: #fff; border: 1px solid #dadedb; border-radius: 50%; color: green; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 999 } #Email { width: 60px; height: 60px; position: fixed; right: 1%; bottom: 20%; background-color: #6fba2c; border: 1px solid #B9BFBC; border-radius: 50%; color: #FFFFFF; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 999; } .icon-size { font-size: 30px; text-align: center } #contact { position: fixed; right:1%; bottom: 27%; justify-content: center; align-items: center; cursor: pointer; z-index: 999; } .contact_style { background-color: #E6F2EB; border: 1px solid #009844; color: #009844; border-radius: 50px; /* height: 35px; width: 165px; */ display:flex; justify-content: center; align-items: center; padding: 5px 30px; } .contact_hidden { display: none; } /** global card樣式 **/ .card_size { width:282px; height:247px; border:none !important; } .hr-style { margin: 20px 0px; border-top: 1.5px solid #B9BFBC; } .card_content{ color:#808582 } .card_shadow { box-shadow: 0 2px 10px rgba(0,77,34,.1); border-radius: 2px; } /** global card樣式 **/ .hs_table { width: auto; background-color: #fff } .hs_table > thead > tr { background-color: #fff !important; border: 0; border-bottom: 2px solid #b9bfbc; text-align: center; font-weight: 400 } .hs_table tbody { background-color: #fff } .hs_table tr:nth-child(2n) { background: #f7f9f8 } .hs_table td, .hs_table th { padding: 8px 12px; border: 1px solid #dadedb } .hs_table td { text-align: center } .table-responsive { overflow-x: auto; overflow-y: auto; height: 40vh; } .table-responsive > table thead th { background-color: #fff; position: sticky; top: 0; } .table-responsive > table thead tr { position: relative; z-index: 1; } .table-responsive > table > tbody > tr > td:nth-child(1), .table-responsive > table > tbody > tr > th:nth-child(1) { position: sticky; left: 0; } .separate { text-align: center; background: #fff } header { min-height: 103px; display: flex; flex-flow: row; justify-content: space-between; align-items: center; box-shadow: 0 0 10px 2px rgba(0,0,0,.1) } .navbar { flex-direction: row-reverse; margin-right: 1% } .navbar_brand { height: 33px; display: flex; flex-direction: row; justify-items: start; align-items: flex-end; margin-left: 40px; } .navbar_brand > img { min-width: 167px } .navbar_brand > div { margin-left: 20px; line-height: 15px; font-size: 1.5rem; white-space: nowrap } select:disabled { opacity: 1; background-color: #d7d9d8; color: #989e9a } .search_and_navbtn { display: flex; flex-direction: row-reverse } #RWDSerachBar { display: none } #languageSelector > form > .dropdown-menu[data-bs-popper] { top: 100%; left: -5px; margin-top: 1.5rem } #searchBox > .dropdown-menu[data-bs-popper] { top: 100%; left: -200px; margin-top: 1.5rem; padding: 10px } #search_box_rwd_form { display: none } .brand_title { display: inline-block; vertical-align: sub; font-size: 1.4rem; padding: 0 0 0 15px } .navbar-toggler { border: 0 } .navbar-toggler-icon:focus, .navbar-toggler:active, .navbar-toggler:focus { outline: 0; box-shadow: none; border: 0 } .toggler-icon { width: 30px; height: 3px; background-color: #009844; display: block; transition: all .2s } .middle-bar { margin: 5px auto } .navbar-toggler .top-bar { transform: rotate(45deg); transform-origin: 10% 10% } .navbar-toggler .middle-bar { opacity: 0 } .navbar-toggler .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90% } .navbar-toggler.collapsed .top-bar { transform: rotate(0) } .navbar-toggler.collapsed .middle-bar { opacity: 1 } .navbar-toggler.collapsed .bottom-bar { transform: rotate(0) } .navbar-toggler.collapsed .toggler-icon { background-color: #009844 } .form-control, .form-control:focus { background-color: #f7f9f8; border: 2px solid #f7f9f8; border-radius: 2px 0 0 2px; box-shadow: 0 0 0 transparent } .input-group { width: auto !important; background-color: #f7f9f8 } .tb-search { width: 100%; max-width: 170px } .btn-search { padding: 0 10px !important; color: #009844; background-color: #f7f9f8; border-radius: 0 2px 2px 0 !important } .btn-search:hover { color: #fff; background-color: #009844 } .btn { padding: 0 } .btn:focus { box-shadow: 0 0 0 #d8f2df } .LoginLB { font-weight: 400; color: #000 } .language-menu { border-radius: 2px; min-width: auto } .dropdown-item:hover { background-color: #e6f2eb; color: #009844 } .dropdown-item:focus { background-color: #009844; color: #fff !important } #navbarSupportedContent { justify-content: flex-end; max-width: 100%; background-color: #fff } .nav_item { display: flex; flex-flow: row; justify-items: center; align-items: center } .nav_item:before { content: "|"; color: #ccc; margin: 0 7px } .nav_item:last-child:after { content: "|"; color: #ccc; margin: 0 8px } .nav_item a:hover { text-decoration: none; color: #009844 } .nav-btn { height: 100%; display: flex; flex-direction: column; justify-items: center; align-items: center; margin: 0 10px; cursor: pointer } .nav-btn > img { width: 36px } .nav-btn > span { font-size: .8rem; font-weight: 300 } #header_username > .language-menu { margin-top: 1.5rem; right: 0 } .header_margin { margin-top: 103px } .wrapper { flex-grow: 1 } .sideDDR { background-image: url(/img/life_calculation/Datorker_Robot_Reducer/WUT-S-P_side.png); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed } footer { border-bottom: 4px solid #009844; padding: 40px 5% 10px 5%; background-color: #f0f2f1 } .footer-sitemap > div > div { margin-bottom: 5px; color: #5f635f; } .accordion-collapse > div > div > a { color: #5f635f !important; } .footer-icon { color: #808582; font-size: 1.5rem; border-radius: 50%; padding: 3px; margin-right: 5px; } .footer-copyright { font-size: .8rem; color: #989E9A; } .footer_copyright { text-align: right; } .footer-link-item { padding: 12px 20px; } .footer-social-media { margin-bottom: 40px; } .footer_mt { margin-top: 25px; } .bi-linkedin:hover { color: #0a66c2; } .bi-youtube:hover { color: red; } .bi-facebook:hover { color: #1877f2; } .bi-line:hover { color: #00cb42; } .main { padding: 20px 0 0 } .section { margin-bottom: 6% } .section_title { margin-top: 10px } .learnMore { color: #fff; font-size: 1rem; background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); border-color: transparent; padding: 10px 30px; border-radius: 2px; border: 0 } .learnMore:hover { background-image: none; background-color: #e60012; color: #fff !important } .learnMore > img { margin-right: 10px } .learnMore2 { color: #fff; font-size: 1rem; background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); border-color: transparent; padding: 10px 20px; border-radius: 2px; border: 0 } .learnMore2:hover { background-image: none; background-color: #e60012; color: #fff !important } .headbanner { height: 350px; margin-top: 103px; background-repeat: no-repeat; background-attachment: scroll; background-size: cover } .headbanner_container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; height: 350px } .title { font-size: 1.83rem; color: #fff } .sub-title { font-size: 1.33rem; color: #fff } .head-text { width: 510px; padding: 70px 0 0 20px } .head-text > .title { font-size: 2.3rem; margin-bottom: 24px; color: #fff; font-weight: 500 !important } .head-text > .sub-title { font-size: 1.2rem; font-weight: 400; color: #fff } .head-text-mobile { display: none } .head-image { width: 30%; position: absolute; top: 80px; right: 220px } .moveup { transition: .3s ease-in-out; box-shadow: 0 3px 6px rgba(0,77,34,.2); border: 0 } .moveup:hover { transform: translateY(-10px); color: #009844 } .marginTopMinus { margin-top: -25px !important } .techTool_container { padding: 10px 13px } .techTool_box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 22px 30px; box-shadow: 0 2px 10px rgba(0,77,34,.1); border-radius: 4px; background-color: #fff; margin-top: -6px; transition: .3s ease-in-out } .techTool_box:hover { color: #009844; transform: translateY(-5px) } .techTool_box_left { width: 70% } .techTool_box_left > h5 { margin-bottom: 20px } .techTool_box_right { width: 30% } .techTool_box_right > img { width: 100px } .greenarrow { font-size: 1rem; color: #009844 } .greenarrow:hover { color: #000 } .select_page_box { display: flex; min-height: 150px; justify-content: space-between; align-items: center; background-color: #fff; border-radius: 4px; box-shadow: 0 0 5px #ccc; margin-bottom: 15px; transition: .3s ease-in-out } .select_page_left { padding: 16px 5px 16px 30px } .select_page_left > h5 { font-size: 1.37rem !important } .select_page_right > img { width: 150px; border-radius: 4px } .select_page_box:hover { transform: translateY(-10px); color: #009844 } .service_page { display: flex; flex-direction: column; align-items: center } .service_page > img { width: 336px } .texh_service_flex { display: flex; flex-wrap: nowrap } .tech_contact_left { margin-top: 48px; margin-left: 23% } .tech_contact_left>p { font-size: 21px; } .tech_contact_right { margin-top: 94px; margin-right: 18% } .tech_service_link { top: 8px; cursor: pointer } .tech_service_link > a:hover { text-decoration: underline } .tech_service_image { padding: 0 24px 24px; overflow: hidden } .tech_leave_message { font-size: 24px } .proInfo { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #fff; padding: 10px } .product_title_small { font-size: 1.4rem; font-weight: 500 } .proInfo:hover { cursor: pointer } .proInfoContent, .proInfoImg { padding: 10px } .proInfoImg { width: 40% } .proInfoImg > img { width: 100% } .proInfoContent { width: 60% } .onlineDate { color: gray; font-size: .83rem } .infoLb { font-size: 1rem } .product_filter { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 10px #000; margin-bottom: 10px } .product_link { color: #1f211f; cursor: pointer } .product_link:hover { color: #009844 } .product_link .card-body img { width: 90%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out } .product_link:hover .card-body img { -webkit-transform: scale(1.2); transform: scale(1.2) } .product_link .card-footer { border-top: 0 } .drr_product_selection_bg { background-image: url(/img/WUT-S-P_bg.png); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed } .ballSpline_product_selection_bg { background-image: url(/img/selectBg-ballSpline.png); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed } .ballscrew_product_selection_bg { background-image: url(/img/selectBg-ballscrew.png); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed } .gw_product_selection_bg { background-image: url(/img/selectBg-gw.png); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed } .sr_product_selection_bg { background-image: url('/img/selectBg-Single-Axis Robot.png'); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed } #TBValidateCode_login, #mainCPH_TBValidateCode_member_profile, #mainCPH_TBValidateCode_sign_up { border-width: 1px; border-style: solid; width: 150px; height: 38px; cursor: pointer } #renew_valid_code, #renew_valid_code2 { font-size: .8rem } #member_area { position: fixed; width: 100%; height: 100%; z-index: 1021; top: 0; background-color: rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center } .login_form_left, .login_form_right { background-color: #fff; height: 525px; padding: 40px 32px } .login_form_left { width: 600px; background-image: url(../img/icon/WelcometoHIWIN-L.png); border-radius: 2px 0 0 2px } .login_form_right { max-width: 400px; border-radius: 0 4px 4px 0 } .signform { min-height: 550px; max-width: 1000px; left: 50%; display: flex; flex-direction: row; z-index: 900 } .tech_more_area { position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 50px; width: 100%; height: 100%; overflow: auto; background-color: #000; background-color: rgba(0,0,0,.4) } .tech_more_content { background-color: #fff; margin: auto; padding: 24px; border-radius: 4px; width: 500px } .signform_signup { margin: 0 auto; margin-top: 0; padding: 30px; max-width: 800px; background-color: #fff; border-radius: 2px; z-index: 900 } .signform_forgetpassword { margin: 0 auto; margin-top: 0; padding: 10px 30px 30px; max-width: 350px; background-color: #fff; border-radius: 4px; z-index: 900 } .login-title { text-align: left; font-size: 2em; margin-bottom: 24px !important } .signinput { height: 38px; font-size: 16px; width: 100%; margin-bottom: 10px; -webkit-appearance: none; background-color: #f7f9f8; border: 1px solid #b9bfbc; padding: 0 8px; box-sizing: border-box; border-radius: 2px } .loginSubmitBtn { display: inline-block; position: relative; border: 1px solid transparent; color: #fff; width: 46%; background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); padding: 10px 24px; font-size: 16px; cursor: pointer; border-radius: 2px; margin-right: 6% } .loginSubmitBtn:hover { color: #fff; background-image: none; background-color: #e60012 } .cancelBtn { color: #000; width: 46%; background-color: #fff; border: 1px solid #009844; padding: 10px 24px; font-size: 16px; cursor: pointer; border-radius: 2px } .drp-select { height: 39px; width: 99.9%; background-color: #f7f9f8; border: 1px solid #b9bfbc; border-radius: 2px } .form-select { background-color: #f7f9f8; border: 1px solid #b9bfbc; border-radius: 2px } .signupBtn { color: #fff; width: 150px; background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); padding: 10px 40px; font-size: 16px; cursor: pointer; border-radius: 2px; border-color: transparent } .signupBtn:hover { background-image: none; background-color: #e60012; color: #fff } .signupBtnCancel { color: #000; width: 150px; border: 1px solid #009844; padding: 10px 40px; font-size: 16px; cursor: pointer; border-radius: 2px; background-color: #fff; border-style: solid } .cookie_agreed { display: flex; align-items: center; justify-content: center; background-color: rgba(31,33,31,.6); color: #fff; padding: 16px; position: fixed; bottom: 0; width: 100%; z-index: 9999 } .cookie_agreed > span > a { text-decoration: underline; color: #fff } .cookie_agreed_LB { text-decoration: none !important; color: #fff !important; font-weight: 400 !important } .sb-example-1 .search { width: 100%; position: relative; display: flex } .sb-example-1 .searchTerm { width: 100%; border: solid #b3b3b3; border-right: 0; padding: 3px; border-radius: 3px 0 0 3px; outline: 0; color: #9dbfaf; margin-top: 7px; font-weight: 100; border-width: 1.5px } .sb-example-1 .searchTerm:focus { color: #000 } .sb-example-1 .searchButton { margin-top: 7px; height: 40px; border: solid #b3b3b3; background-color: #fff; text-align: center; color: #fff; border-radius: 0 3px 3px 0; cursor: pointer; font-size: 16px; border-width: 1.5px; border-left: 0 } .signupHeadimg { max-width: 382px; margin: 0 auto; margin-bottom: -50px } .signdataform { background-image: url(../img/dataPage/background-green.png); position: absolute; top: 9%; left: 0; right: 0; bottom: 0; overflow: auto } .title_dc { font-weight: 400 } .sub-banner { background-image: url(/img/dataPage/background-green.webp); margin-top: 103px; width: 100%; background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover } .module-search { position: relative; display: flex; width: 100% } .findTerm { width: 100%; border-radius: 1px 0 0 1px; outline: 0; color: #000; font-weight: lighter; font-size: 18px; border-width: 1.5px; border-style: solid; border-right: 0; box-shadow: 0 2px 10px #000; border-color: transparent; padding: 20px; background-color: #f9f9f9 } .findButton { background-color: #f9f9f9; text-align: center; color: #009984; border-radius: 0 1px 1px 0; cursor: pointer; font-size: 16px; border-width: 1.5px; box-shadow: 0 2px 10px #000; border-color: transparent; padding: 20px } .findButton > i { padding: 0 1online0; font-size: 1.5rem } .findButton:hover { color: #fff; background-color: #009844 } option { font-size: 1.2rem } option:hover { background-color: #e6f2eb; color: #009844 } select:focus { outline: 5px solid #CCC } .custom-select { width: 100%; height: 75px; box-shadow: 0 2px 10px #ccc; border-color: transparent; padding: 20px; font-size: 18px; /*line-height: 1;*/ border: 0; border-radius: 2px; background: url(/img/chevron-down-solid.svg) no-repeat right #fff; -webkit-appearance: none; background-position-x: 95%; white-space: pre-line; } .custom-select:focus { background: url(/img/chevron-up-solid.svg) no-repeat right #fff; -webkit-appearance: none; background-position-x: 95% } .custom-select:disabled, .custom-select[disabled] { background: url(/img/chevron-flat-solid.svg) no-repeat right #d7d9d8; -webkit-appearance: none; background-position-x: 95% } .custom-select-disabled { background: url(/img/chevron-flat-solid.svg) no-repeat right #d7d9d8; -webkit-appearance: none; background-position-x: 95% } .file_subtitle { color: #989e9a } .file_title { padding: 0 8px } .input_fontcolor { color: #5f635f } .nav-pills .nav-link { background-color: #dfdfdf; border: 0; border-radius: 2px; margin-right: 10px; color: #1f211f } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #009844; background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%) } .nav-link:hover { color: #009844 } .split-Btn { width: 130px; height: 40px } .downloadcenterSearch { color: #000; width: 20%; background-color: #fff; border-color: #b4b4b4; border-style: solid; padding: 8px 0; font-size: 1.3em; cursor: pointer; border-radius: 3px } .downlaod_title_padding { padding-left: 30px } .myBtn { font-size: 16px; padding: 10px 40px } .pdf-btn { background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); border-radius: 0 2px 2px 0; padding: 5.7px 10px; color: #fff; margin-left: -5px; border-left: 1px solid #fff } .btn_ghost_Rest { width: auto; color: #1f211f; background-color: #fff; cursor: pointer; border: 1px solid #009844; border-radius: 2px; padding: 10px 20px; margin: 10px 3px; font-size: 16px } .btn_ghost_Rest:hover { color: #e60012; border-color: #e60012 } .btn_solid_Rest { color: #fff; background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); border: 0; border-color: transparent; border-radius: 2px; padding: 10px 20px; margin: 10px 3px; font-size: 16px } .breadcrumb > li { display: inline-block; color: #808582 } .breadcrumb > li + li:before { content: ">" !important; padding: 0 5px; color: #808582 } .breadcrumb-item :active { color: #009844 } .FOCUS_NEWS { color: #e60012; font-size: 12px } .news-right { display: flex; padding: 10px } .news-pop { display: inline-block } .news_pop img { width: 100%; height: auto } .news_pop img:hover { box-shadow: 0 0 2px 1px #24a600 } .newsList { background-color: #fff } .newsList > div { border-bottom: 1px solid #ccc } .newsList > div:last-child { border-bottom: 0 } .newsList-title { font-size: 18px } .newsList-title ::after { content: ""; display: block; width: 0; height: 4px; position: absolute; left: 50%; bottom: 0; background-color: #094; -webkit-transition: all .3s ease; transition: all .3s ease; z-index: 1 } .news-right-cap { width: 70% } .news-right-img { width: 30%; display: flex; align-items: center } .news-right-img img { width: 100% } .news-right:hover { cursor: pointer } .newsDate { font-size: 12px } .news_newsContent_img { width: 500px } .tab-nextpage { margin-top: 64px; text-align: end } .btn-color { color: #fff; background-color: #009844; border-color: #009844 } .pager { padding: 5px 8px; position: relative; display: block } .page-item:not(:first-child) .pager { margin-left: -1px } .searchpage { display: flex } .searchpage > div { display: flex; align-items: center; filter: drop-shadow(0 1px #0091c2); margin-left: 15px } .searchpage > div:after { content: ""; background: #009844; width: 4px; height: 16px; position: absolute; top: 40px; right: 0; transform: rotate(135deg) } .searchpage > div > input { color: #fff; font-size: 18px; background: 0 0; width: 45px; height: 45px; padding: 10px; border: solid 3px #009844; outline: 0; border-radius: 35px; transition: width .5s } .searchpage > div > input::placeholder { color: #009844; opacity: 0; transition: opacity 150ms ease-out } .searchpage > div > input:focus::placeholder { opacity: 1 } .searchpage > div > input:focus, .searchpage > div > input:not(:placeholder-shown) { width: 250px } .dropdown-menu > li > a :hover { color: #24a600 } .form-select { font-size: 16px } .remark_blue { background-color: #f0f2f1; font-size: 14px; border-radius: 2px } .remark_blue2 { background-color: #fae1e1; font-size: 14px; border-radius: 2px } .privacy_area { border: 1px solid #f0f2f1; width: 100%; height: 200px; padding: 10px; overflow: auto; word-wrap: break-word; text-align: left; overflow-x: hidden } .mt-48 { margin-top: 48px } #logo { display: block } #logo_s { display: none } .content { font-size: 14px; margin-left: 8px; padding-top: 8px } .all_awarePro { padding: 10px 0 } .all_awarePro label { line-height: 34px; height: 34px; margin-bottom: 5px; margin-right: 10px; padding: 0 10px; border-radius: 16px; border-color: #707070 } .all_awarePro label:hover { background-color: #5f635f; border: #5f635f } .awareProLB { line-height: 34px; height: 34px; text-align: center; background-color: #eff1f3; border-radius: 2px; cursor: pointer } .ALIN_POINTER { cursor: pointer } .tech_contact_left2 { margin-top: 48px; margin-left: 15% } .file_title2 { padding: 0 } .ALIN_BOLD { font-weight: 700 } .p-30 { padding-left: 30px } label { padding-left: 10px; margin-right: 15px } .brGrid { width: 100%; background-color: #fff; margin: 5px 0 10px; border: solid 1px #525252; border-collapse: collapse; font-family: Arial; font-size: 16px } .mydatagrid { width: 100%; border: solid 1px #000; min-width: 100% } .GridView1header { background-color: #ebf1de; color: #000; border: solid 1px #fff; height: 25px; text-align: center; font-size: 18px } .GridView1header > th { padding-right: 15px; padding-left: 15px } .GridView1rows { background-color: #f2f2f2; font-size: 16px; color: #000; min-height: 25px; text-align: center; border: solid 1px #fff } .GridView1rows:hover { background-color: #ebf1de } .GridView1rows:nth-child(odd) { background-color: #d9d9d9 } .product_banner { margin-top: 103px; min-height: 350px; background-position: center center; background-repeat: no-repeat; background-size: cover } .product_title { display: block; font-size: 40px; font-weight: 700; color: #fff; text-shadow: 0px 0px 30px #000 } .product_name { display: none; font-size: 40px; font-weight: 700; margin-bottom: 24px } .product_list { margin-bottom: 16px } .bs_banner { background-image: url(/img/product/ballscrew/ballscrew_banner.webp) } .ball_spline_banner { background-image: url(/img/product/ball_spline/ball_spline_banner.jpg) } .gw_banner { background-image: url(/img/product/linear_guideway/linear_guideway_banner.jpg) } .sar_banner { background-image: url(/img/product/single_axis_robot/single_axis_robot_banner.jpg) } .br_banner { background-image: url(/img/product/bearing/bearing_banner.jpg) } .mar_banner { background-image: url(/img/product/multi_axis_robot/multi_axis_robot_banner.jpg) } .ee_banner { background-image: url(/img/product/End_Effector/End_Effector_banner.jpg) } .dswg_banner { background-image: url(/img/product/datorker_strain_wave_gear/datorker_strain_wave_gear_banner.jpg) } .tmrt_banner { background-image: url(/img/product/torque_motor_rotary_table/torque_motor_rotary_table_banner.jpg) } .uddrt_banner { background-image: url(/img/product/underwater_direct_drive_rotary_table/underwater_direct_drive_rotary_table_banner.jpg) } .efem_banner { background-image: url(/img/product/equipment_front_end_module/EFEM_banner.jpg) } .load_port_banner { background-image: url(/img/product/load_port/load_port_banner.jpg) } .wafer_robot_banner { background-image: url(/img/product/wafer_robot/wafer_robot_banner.jpg) } .wafer_aligner_banner { background-image: url(/img/product/wafer_aligner/wafer_aligner_banner.jpg) } .ac_servo_motor_banner { background-image: url(/img/product/ac_servo_motor/ac_servo_motor_banner.jpg) } .linear_motor_system_banner { background-image: url(/img/product/linear_motor_system/linear_motor_system_banner.jpg) } .controller_drive_banner { background-image: url(/img/product/controller_drive/controller_drive_banner.jpg) } .linear_motor_banner { background-image: url(/img/product/linear_motor/linear_motor_banner.jpg) } .direct_drive_motor_banner { background-image: url(/img/product/direct_drive_motor/direct_drive_motor_banner.jpg) } .torque_motor_banner { background-image: url(/img/product/torque_motor/torque_motor_banner.jpg) } .spindle_motor_banner { background-image: url(/img/product/spindle_motor/spindle_motor_banner.jpg) } .position_measurement_system_banner { background-image: url(/img/product/position_measurement_system/position_measurement_system_banner.jpg) } .servo_actuator_banner { background-image: url(/img/product/servo_actuator/servo_actuator_banner.jpg) } .linear_actuator_banner { background-image: url(/img/product/linear_actuator/linear_actuator_banner.jpg) } .machine_tool_banner { background-image: url(/img/Industry_category/machine_tool_industry/machine_tool_banner.jpg); } .automation_Industry_banner { background-image: url(/img/Industry_category/automation_Industry/automation_Industry_banner.jpg); } .semiconductor_banner { background-image: url(/img/Industry_category/semiconductor_industry/semiconductor_banner.jpg); } .vacuum_motors_banner{ background-image: url(/img/product/vacuum_motors/vacuum_motors_banner.jpg) } .djsi_banner { background-image: url(/img/tech_service/djsi/djsi_banner.jpg); min-height: 330px; position: relative; } .djsi_banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #6fba2c; opacity: 0.4; pointer-events: none; } .opacity { width: 100%; height: 494px; opacity: .5 } .new_tag { display: block; float: left; position: relative; top: 20px; left: -8px; color: #fff; background-color: #e60012; z-index: 99; font-size: .8rem; padding: 5px; width: 47px; text-align: center } .new_tag::before { content: ''; position: absolute; width: 8px; height: 9px; top: 29px; left: 0; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent #803838 transparent transparent; opacity: 1 } .text_gray { color: #b9bfbc } .product_introduce { margin: 0 auto; padding: 30px; margin-bottom: 20px; margin-top: -200px } .product_introduce p { color: #5f635f } .product_content { display: flex; flex-flow: row; margin-top: 10px; margin-bottom: 30px } .productList { max-width: 328px; border-radius: 4px } .productPics { max-width: 75%; border-radius: 4px } .card > img { display: block; float: left; position: relative; width: 100%; padding: 16px; margin: auto; } .name { width: 242px; height: 121px } .name span { font-size: 1rem; font-weight: 400; color: #094; text-align: center; display: block; margin-top: 20px } .square { width: 56px; height: 56px } .bg-container { background-color: #f0f2f1 } .product_detail { display: flex; flex-direction: row; flex-grow: 1 } .product_detail_container { background-color: #fff; margin-top: 20px; padding: 32px; margin-bottom: 64px; } .left_Content { width: 70% } .right_Content { width: 30% } .product_pic_thumb { height: 60px } .right_Content > div > a > div { margin: 0 5px; border: 1px solid #fff } .right_Content > div > a > div:hover { border: 1px solid #198754; transition-duration: .3s; border-radius: 4px } .right_Content > div > a > div > img { border-radius: 4px; max-width: 56px; padding: 1px } .border_radius_start { border-radius: 4px 0 0 4px } .border_radius_end { border-radius: 0 4px 4px 0 } .box_container { margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center } .box { width: 30.3333%; height: 125px; border: 1px solid #dadedb; border-radius: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 20px; margin-bottom: 8px; padding: 0 10px } .box_title { margin-top: 15px; text-align: center; max-height: 30px } .box_content { color: #009844; margin-top: 10px } .box_num { font-size: 40px; font-weight: 500; text-align: center } .box_unit { font-size: 20px; font-weight: 500 } .letter-spacing { max-width: 100px; display: inline-block; background-color: #5f635f; border-radius: 4px; color: #fff; font-size: .9rem; font-weight: 100 } .support_content { margin: 0 } .support_content > div { max-width: 230px; display: inline-block; padding: 0 } .support_content > div > div > a > img { border-left: 1px solid #b9bfbc; padding-left: 13px } .support_content_item { padding: 13px } .product_pic img { width: 100% } .Applications_btn > span { margin-right: 6px; margin-bottom: 6px; background-color: #5f635f !important; font-size: 14px; font-weight: 300; padding: 0 10px; color: #fff; border-radius: 4px; white-space: nowrap; line-height: 30px } .modal-header { margin-bottom: 1.2rem } .modal_content { display: flex; flex-direction: row } .modal_content_left > .row { border-right: 1px solid #dee2e6 } .modal_content_left { width: 280px; overflow: hidden } .modal_content_right { width: 85%; padding: 0 1.5rem } .modal_menu_left { height: 78vh; overflow: scroll; overflow-x: hidden } .carousel-control-next-icon, .carousel-control-prev-icon { background-image: none } .carousel-control-next-icon:after { content: '\f054'; font-family: "Font Awesome 5 Free"; font-size: 50px; font-weight: 900; color: #009844 } .carousel-control-prev-icon:after { content: '\f053'; font-family: "Font Awesome 5 Free"; font-size: 50px; font-weight: 900; color: #009844 } .carousel-control-prev-icon { position: absolute; left: 10px } .carousel-control-next-icon { position: absolute; right: 10px } .carousel_img { width: 40% } .carousel_video { height: 100%; width: 100% } .carousel_video > iframe { width: 80%; height: 60vh } .carousel_item_name { font-size: 1.6rem; font-weight: 500 } .view360 { position: relative; margin-top: -100px; left: -50px; text-align: right; z-index: 999 } #spritespin { cursor: grab } #spritespin:active { cursor: grabbing } .modal_menu_pic { width: 100px } .modal_menu_img { border: 1px solid #fff } .modal_menu_pic_b { max-width: 200px } .btn-modal-close { color: #808582; cursor: pointer } .btn-modal-close i { font-size: 2rem; margin-left: 10px } .modal_indicators { cursor: pointer } .modal_indicators_img { width: 100% } .accordion-button:not(.collapsed) { color: #1F211F; background-color: #e4e5e6; box-shadow: none; font-weight: 700 } .sitemap_item_title.collapsed { margin-bottom: 30px; } .sitemap_item_title::after { display: none; } .sitemap_item_title_lg { display: none !important } .sitemap_item_title_md { display: block !important } .acc-padding { padding: 0.9rem 0rem 1rem 0rem; } .acc-padding div { margin-bottom: 5px; } .accordion-button::after { background-image: url(/img/accordion-button.svg) !important } .accordion-button:not(.collapsed)::after { background-image: url(/img/accordion-button.svg) !important } .indent { margin-left: 0.3rem; text-align: left; font-size: 16px; letter-spacing: 0px; font-weight: normal; line-height: 1.75rem; margin-bottom: 10px; padding-left: 1em; } table th { border:1px solid black; } .icon-large-green { font-size: 100px; color: #009944; margin:0px 20px; } .title_dc_color, .p_dc_color { color: #FFFFFF; } .item { display: block; margin: 0; line-height: 1.8; } .card_spacing { margin-bottom: 1rem; } .text_dc { position: relative; /*z-index: 10001; */ } /*V2*/ .box-positione { position: relative; display: inline-block; /*display: flex; justify-content: center; align-items: center;*/ margin: 100px 0px; } .info-toprighte, .info-topLefte, .info-bottomlefte, .info-bottomrighte, .info-middleLefte { display: none; position: absolute; bottom: 410px; left: 680px; color: #5F635F; padding: 10px; border-radius: 5px; width: 500px; text-align: left; } /*V2*/ .box-position { position: relative; display: inline-block; height: 650px; text-align: center; margin-top: 150px; } .card_img { max-width: 100%; margin: auto; text-align: center; width: 100%; } .card_size2 { width: 200px; height: 220px; border: none !important; } #productCarousel .carousel-control-prev, #productCarousel .carousel-control-next { top: 50%; transform: translateY(-60%); z-index: 1; /* Lower than the content */ } .card_size2 { position: relative; z-index: 2; /* Higher than the controls */ } .content_img img { /*display: block;*/ /*margin: auto;*/ max-width: 100%; text-align: center; } #PCRWD { display: none; } .button-m{ margin:10px; } .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; max-width: 100%; background: #000; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .info-box2 { width: 500px; height: 100px; position: absolute; align-items: center; justify-content: center; text-align: left; line-height: 1.5; padding: 10px; box-sizing: border-box; display: none; } .box-positione.content_img { position: relative; /* 確保內部的絕對定位有效 */ } .corner-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; /* 設定較高的 z-index */ } .corner-image { pointer-events: all; /* 確保可以接收點擊事件 */ position: absolute; z-index: 10; /* 確保圖片在背景圖之上 */ } @keyframes gameboat { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .info-box2 { position: absolute; z-index: 10; } /* 產業類首頁 */ .industry_button { margin-top: 105px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .industry_banner { min-height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; } /*.button-group { display: flex; justify-content: space-between; flex-wrap: wrap; }*/ .button-group { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(10px, 2vw, 50px); /* 自適應間距 */ } .btn_next { display: block; padding: 10px 20px; color:#5f635f; text-align: center; text-decoration: none; border-radius: 5px; transition: background-color 0.3s; } .bi-gear { display: block; color: #5f635f; text-align: center; text-decoration: none; border-radius: 5px; transition: background-color 0.3s; margin-top: 20px; } .button-item:hover { background-color: rgba(0, 152, 68, 0.1); } .button-item.active { background-color: rgba(0, 152, 68, 0.1); } .button-item { display: flex; flex-direction: column; align-items: center; position: relative; /* Needed for absolute positioning of underline */ text-align: center; width:120px; } .button-item::after { content: ""; position: absolute; bottom: -1px; /* Adjust based on your layout */ left: 0; width: 100%; height: 3px; /* Thickness of the underline */ background-color: #009944; /* Color of the underline */ opacity: 0; transition: opacity 0.3s, transform 0.3s; /* Smooth transition for the underline */ } .button-item:hover::after { opacity: 1; /* Show underline on hover */ transform: scaleX(1); /* Ensure the underline expands to full width */ } .industry_card{ padding:10px 0px; } .card_hover:hover { background-image: -webkit-linear-gradient(top,#24a600 1%,#24a600 22%,#24a600 30%,#009844 100%); color: white; } .industry_title { display: block; font-size: 40px; font-weight: 700; color: #fff; text-shadow: 0px 0px 30px #000 } .subTitleText { font-size: 1.2rem; font-weight: 400; color: #fff; } .subnav_buttom .nav-link{ margin-bottom:10px; } .card_product img{ max-width: 100%; } .circle-bg { width: 120px; /* 根據實際需要調整 */ height: 120px; background-color: #ffffff; /* 你想要的背景顏色 */ border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; } .circle-bg img { width: 80%; /* 圖片大小視情況調整 */ height: auto; } .circle-bg-s { width: 70% !important; } .card_body_title{ height:90px; padding:1rem 0.7rem; } #PCRWD { padding:50px 0px; } .card-title { /*text-align: center;*/ font-size: 16px; margin-bottom: 0px; } .aos-animate::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.9); border-radius: 50%; z-index: -2; pointer-events: none; animation: simpleGlow 2s infinite ease-out; } @keyframes simpleGlow { 0% { transform: scale(0.8); opacity: 0.8; box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.9); } 100% { transform: scale(1.5); opacity: 0; box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0); } } /* 測試 */ .main-image, .mobile-main-image { width: 100%; height: auto; } /* 桌機版預設顯示，手機版隱藏 */ .desktop-version { display: block; } .mobile-version { display: none; } /* 桌機版角落圖片定位 */ /*.corner-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }*/ .corner-layer .circle-bg { position: absolute; } .info-box2 { display: none; } .circle-bg.active { box-shadow: 0 0 0 2px rgb(44, 177, 104), 0 0 8px rgba(44, 177, 104, 0.7); transition: box-shadow 0.3s ease; z-index: 10; } .circle-bg.active::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgb(44, 177, 104), 0 0 8px rgba(44, 177, 104, 0.7); pointer-events: none; z-index: 2; } .image-container { position: relative; display: inline-block; } .image-container img { display: block; } .button-item img { width: 50px; height: auto; } th, tr, td { padding: 8px 12px; border: 1px solid black; text-align: center; } tbody > tr > td { text-align: left; } tbody > tr > td > a { color: #009944 !important; text-decoration: underline !important; } .p_indent{ margin-left: 80px; } .s_indent{ margin-left: 110px; } .c_indent{ margin-left: 120px; } .ul_indent{ margin-left: 50px; } .ul_indent li { margin-left: 40px; text-indent: -40px; } .privacy_policy_text h5 { margin-left: 70px; text-indent: -32px; } .p_indent a,.s_indent a,.c_indent a,.ul_indent a{ color:#009944; } #ProductCarouselIndicatorsRWD .carousel-item-title { font-size: 1.25rem; height: 50px; padding: 0px 10px; display: flex; flex-grow: 1; flex-flow: column; justify-content: center; align-items: center; text-align: center; } .nav-pills .nav-link { border: 0; border-radius: 2px; margin-bottom: 10px; } .instructions .col-md-4 { display: flex; flex-direction: column; min-height: 150px; } .instructions img { margin-top: auto; } .card-img { height:300px; } .troubleshooting_content { display: flex; flex-flow: row; margin-top: 10px; } .industry_color { color:#FFFFFF } .industry-section { background-position: center center; background-repeat: no-repeat; background-size: cover; transition: background-image 0.3s ease, background-color 0.3s ease; height: 370px; padding: 10px 0 100px 0; } .industry_cards { /*width: 282px;*/ height: 180px; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 3px 6px #004D2229; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .industry_cards:hover { background: #FFFFFFA8 0% 0% no-repeat padding-box; } .industry_cards img { display: block; max-width: 100%; height: auto; margin-bottom: 10px; } .industry_card_title { display: block; margin-top: 0; text-align: center; } .img-frame { /*width: 350px;*/ height: 280px; margin: 0 auto; } .img-fit { width: 100%; height: 100%; object-fit: contain; display: block; } @media(min-width:1200px) { .modal_content_padding { padding: 3rem !important } .border_adju { border-left: 1px solid #dadedb; border-top: 0 solid #dadedb } .btn_adju { margin-left: 11px } .m_p_adju { padding-left: 3% } .div_pad_adju24 { padding-right: 12px } .div_pad_adju32 { padding-right: 32px } .div_pad_adju20 { padding-right: 20px } .bannerpic { width: 35% !important } .infoLb { margin-top: 6px; margin-left: 0 !important } .onlineDate { margin-left: 0 !important } .bannerpic-mobile { display: none } .icon-new { margin-left: 0 !important } .signupImage_L { display: block !important } .signupImage_M { display: none !important } .search-mobile { display: none } .dcbutton { text-align: right } } @media(max-width:1200px) { .nav_item:before { margin: 0 7px; } .modal_menu_pic_b { max-width: 100px } .modal_content_left > .row { border-right: 0; border-top: 1px solid #b9bfbc } .modal_indicators_img { max-width: 100px } .carousel-item > div > iframe { width: 80% !important; height: 60vh !important } .carousel_video { height: 100%; width: 100% } .carousel_video > iframe { width: 80%; height: 40vh } #spritespin { width: 900px !important; height: 800px !important } .modal_content_padding { padding: 3rem !important } .modal_content { flex-direction: column-reverse !important } .modal_content_left { width: 100% !important; border: 0 } .modal_content_right { width: 100% !important; height: 450px; padding: 0 .5rem !important } .modal_menu_left { height: 120px !important; overflow-x: scroll; overflow-y: hidden; display: flex; flex-flow: row; flex-grow: 1 } .modal_menu_content { display: flex; flex-direction: row } .modal_menu_title { display: none } .modal_menu_name { display: none } .border_adju { border-left: 1px solid #dadedb; border-top: 0 solid #dadedb } .m_p_adju { padding-left: 3% } .btn_adju { margin-left: 11px } .opacity { width: 100%; height: 350px; opacity: .5 } #PC { margin-top: 50px; } .info-topLeft, .info-topright, .info-bottomleft, .info-bottomright { display: block; bottom: auto; left: 150px; right: auto; margin-top: 10px; width: 500px; } .info-topLefte, .info-bottomrighte, .info-bottomlefte { width: 350px; } .card_body_title { height: 100px; } } @media(max-width:1030px) { .modal_content_padding { padding: .8rem !important } .border_adju { border-left: 1px solid #dadedb; border-top: 0 solid #dadedb } .m_p_adju { padding-left: 3% } .btn_adju { margin-left: 11px } header { height: 86px } #navbarSupportedContent { position: fixed; width: 100%; left: 0; margin-top: 450px; box-shadow: 0 10px 10px rgba(0,0,0,.2); padding: 20px; z-index: 1022 } #languageSelector > form > .dropdown-menu[data-bs-popper] { left: 20px } #RWDSerachBar { display: flex; justify-content: space-between } #RWDSerachBar > .form-outline { width: 90% } #searchBox { display: none } #searchBox > .dropdown-menu[data-bs-popper] { display: none !important } #search_box_rwd_form { display: block } #search_box_rwd_form > .input-group > .form-outline { width: 96% } #dropdownMenuButton2 { flex-flow: row; justify-content: flex-start; align-items: center; padding-top: 10px } .nav_item { padding: 5px } .nav_item:before { content: ""; color: #fff; margin: 0 8px } .nav_item:last-child:after { content: ""; color: #fff; margin: 0 8px } .navbar-nav { border-top: 1px solid #b9bfbc; border-bottom: 1px solid #b9bfbc; margin-top: 10px } .search_and_navbtn { display: block } .tech_contact_left { margin-left: 10% } .tech_contact_right { margin-right: 10% } .tech_leave_message { font-size: 22px } .head-image { right: 170px } } @media(max-width:990px) { .border_adju { border-left: 0 solid #dadedb; border-top: 1px solid #dadedb } .btn_adju { margin-left: 11px } .m_p_adju { margin-top: 24px; padding-top: 24px } .productList { max-width: 314px } .productPics { max-width: 68% } } @media(max-width:768px) { .sitemap_item_title_lg { display: block !important } .sitemap_item_title_md { display: none !important } .footer_copyright { text-align: left; } .sitemap_item_title::after { display: block; } .footer_mt { margin-top: -10px; } .product_detail { flex-direction: column-reverse !important } .left_Content { width: 100% !important } .right_Content { margin-bottom: 40px !important; width: 100% !important } .border_adju { border-left: 0 solid #dadedb; border-top: 1px solid #dadedb } .m_p_adju { margin-top: 24px; padding-top: 24px } .btn_adju { margin-left: 11px } .head-image { right: 130px } .head-image > img { width: 98% } .nav_item:before { content: ""; color: #fff; margin: 0 8px } .nav_item:last-child:after { content: ""; color: #fff; margin: 0 8px } #search_box_rwd_form > .input-group > .form-outline { width: 95% } .search_and_navbtn { display: block } .head-text { width: 400px } .tool-title { font-size: 1.16rem } .bannerpic { display: block; width: 45%; float: right; object-fit: contain } .bannerpic-mobile { display: none } .toolImg { float: right } .burger { display: none } .icon-new { margin-left: 13px } .signupImage_L { display: none } .signupImage_M { display: block; margin: 0 auto } .signform { left: 0 } .search-mobile { display: none } .login_form_left { width: 400px } .login_form_right { max-width: 350px } .news-right-img { display: none } .footer-logo { width: 20% } .footer-content { width: 80% } .dcbutton { text-align: initial } .hs_table td, .hs_table th { padding: 8px 6px } .texh_service_flex { flex-wrap: wrap } .news_newsContent_img { width: 380px } .tech_contact_left { margin-left: 2% } .tech_contact_right { margin-right: 1% } .tech_leave_message { font-size: 20px } .displaynone { display: none } .border_adju { border-left: 0 solid #dadedb; border-top: 1px solid #dadedb } .m_p_adju { margin-top: 24px; padding-top: 24px } .btn_adju { margin-left: 11px; width: 93.5% } .box-position { /*display: flex;*/ flex-direction: column; align-items: center; } .box-position .content_img { position: static; margin-bottom: 20px; } .box-position .info-topLeft, .box-position .info-topright, .box-position .info-bottomleft, .box-position .info-bottomright { position: static; margin-bottom: 10px; width: 100%; } .carousel-item-row { flex-direction: column; } .carousel-item-col-first, .carousel-item-col-middle { width: 100%; margin-bottom: 10px; } .box-position { height:950px; margin-top:50px; } #PCRWD { display: block; } #PC { display: none; } .box-positione { margin: 50px 0px; height: 950px; } .info-topLefte, .info-toprighte, .info-middleLefte, .info-bottomrighte, .info-bottomlefte { position: relative; /* 不用 absolute */ bottom: auto; left: auto; color: #5F635F; padding: 20px 10px; border-radius: 5px; width: 100%; max-width: 360px; margin-bottom: 30px; height: auto; /* 讓高度隨內容自動調整 */ } .button-group { display: grid; grid-template-columns: repeat(3, 1fr); } .button-item { text-align: center; } .carousel-item-img > img{ height:240px; width:240px; } .card_bg { width: 280px; height: 310px; background-color: #FFFFFF; } /*測試*/ .desktop-version { display: none; } .mobile-version { display: block; } .mobile-main-image { width: 100%; height: auto; margin-bottom: 30px; } .mobile-product-info .item { text-align: center; margin-bottom: 25px; } .mobile-product-image { width: 180px; } .mobile-description { font-size: 14px; color: #5F635F; padding: 0 10px; text-align: left; } .circle-bg { margin: 0 auto; } /*.mobile_product { margin-bottom: 50px; }*/ .industry_cards { margin:0px 36px 10px 36px; } .industry-section { height: auto; padding-bottom: 40px; } } @media(max-width:576px) { .border_radius_start { border-radius: 4px 4px 0 0 } .border_radius_end { border-radius: 0 0 4px 4px; border-bottom: 0 } .support_content_item { width: 90%; margin: 0 auto; border-bottom: 1px solid #b9bfbc; padding: 13px 0 } .headbanner, .header_margin, .sub-banner { margin-top: 86px } .navbar_brand > .text-green { display: none } .product_title { display: none } .product_name { display: block } .product_banner { margin-top: 86px; min-height: 167px !important; background-size: 80vh !important } .product_detail_container { padding: 16px } .box { width: 100%; margin-right: 0 } .border_adju { border-left: 0 solid #dadedb; border-top: 1px solid #dadedb } .m_p_adju { margin-top: 32px; padding-top: 32px } .btn_adju { margin-left: 11px; width: 93.5% } .displaynone { display: none } header { min-height: 56px } .head-image > img { width: 80% } .headbanner_container { height: 300px } #dropdownMenuButton3 { flex-direction: row } #header_username > .language-menu { margin-top: .8rem } #logo { display: none } #logo_s { display: block } .search_and_navbtn { margin-top: 17px } #search_box_rwd_form > .input-group > .form-outline { width: 90% } .navbar_brand { height: auto; margin-left: 20% } .navbar_brand > img { min-width: auto } .headbanner { background-position: center center; height: 500px } .head-text { display: none } .head-text-mobile { display: block; padding: 20px; background-color: #dedede; z-index: 999 } .headerText > h1 { font-size: 17pt } .headerText > p { font-size: 10pt } .head-image { width: 60%; right: 50px } .learnMore-mobile > button { float: right; padding: 10px; margin-top: 2.5rem; background-color: transparent; border-color: #24a600; color: #24a600; border-radius: 2px; border-style: solid } .bannerpic-mobile { display: block; width: 55%; margin: 0 auto } .onlineDate { color: gray; font-size: 10pt } .productInfo > div > div { margin-top: 2% } .greenline { display: none; visibility: hidden; clear: both } .greenarrow { text-align: center } .techTool_box { width: 100%; flex-wrap: wrap-reverse } .techTool_box_left, .techTool_box_right { text-align: center; width: 100% } .techTool_box_right > img { width: 80px } #language { display: none } #languageSelector > .language-menu { width: 112%; margin-left: -20px; border: 0; box-shadow: 0 10px 10px rgba(0,0,0,.2) } #languageSelector > .language-menu > li { padding-left: 50px } .search-mobile { display: block } .sb-example-1 { display: none } .signform_A { width: 300px } .split-line { display: none; clear: both } .signform { position: relative; margin-left: 0 !important; left: 0 !important } .login_form_left { background-image: none !important; background-color: transparent !important; display: none } .login_form_right { width: 350px; border-radius: 4px 4px 4px 4px; height: auto } .finder-box { flex-direction: column; padding: 10px 10px 15px !important } .form-keyword > p { margin-top: 6% } .downloadcenterSearch { width: 30% !important } .tabstyle { font-size: 17px !important } .searchpage > div:after { top: 38px !important } .p_dc { font-size: 10px } .sub-banner-download-center { height: 240px } .findTerm { font-size: 14px } .file_title { font-size: 21px; padding: 0 3px } .footer-logo { width: 25%; margin-bottom: 10px } .footer-content { width: 75% } .card-body { padding: 1.2rem } .bs-stepper-circle { width: 2em; height: 2em; padding: .3em 0; margin: .2rem } .bs-stepper .line, .bs-stepper-line { flex: 1 0 30px } .hs_table td, .hs_table th { padding: 2px 4px } .service_page > img { width: 300px } .texh_service_flex { flex-wrap: wrap } .news_newsContent_img { width: 300px } .newsList-title { margin-top: 24px } .title_dc { font-size: 24px } .card-img-top { width: 100px } .Tech_Contact { flex-wrap: wrap } .tech_contact_left { margin-left: 5% } .tech_contact_left>p { font-size: 18px; } .tech_contact_right { margin-top: 10px; margin-left: 45% } .tech_contact_right > img { width: 95% } .cookie_agreed { flex-wrap: wrap } .tech_baby_all { display: block } .tech_baby_half { display: none } input[type=text] { padding: 0 2px } .productList { max-width: 100% !important; margin-top: 50px } .productPics { max-width: 100% !important } .product_content { flex-direction: column-reverse } .support_content > div { max-width: 100% } .support_content > div > div > a > img { border: 0; padding-left: 0 } .carousel_item_name { font-size: 1rem } .view360 > img { width: 53px } .troubleshooting_content { justify-content: flex-end } } @media(max-width:440px) { .modal-body { width: 100%; padding: 0 } .carousel_img { width: 100% } #spritespin { width: 450px !important; height: 300px !important } .btn-modal-close > span { display: none } .modal-title { font-size: 1.5rem !important } .carousel-item > div > h4 { font-size: 1rem !important } #Email { width: 55px; height: 55px; bottom:21%; } #gotop { width: 55px; height: 55px; } }