@media(min-width:1201px) { #nav_block .nav-menu { position: absolute; width: auto; min-width: 160px; z-index: 99; } #nav_block .menu-link { line-height: normal; padding-top: 4px; padding-bottom: 4px; word-break: keep-all; } } #nav_block .nav-menu { background-color: rgba(0, 0, 0, 0.50); padding: 0.5rem 0px; } #nav_block .nav-menu { background-color: #FFF; } @media(max-width:992px) { #nav_block .nav-menu { background-color: #FFF; } .nav-block .nav-menu { background-color: #FFF; } } #nav_block .menu-item { padding: 0 1rem; font-size: 0.9rem; } #nav_block .menu-item a { width: 100%; display: block; } #nav_block a:hover { color: #2eb5d3; } #nav_block .menu-caret { position: unset; display: inline-block; margin-left: -15px; } @media (max-width: 1470px) { #navigation { max-width: 92% !important; } } @media (max-width: 1200px) { #navigation { width: 99%; max-width: 99% !important; } .nav-item { padding: 0 5px !important; } }@charset 'UTF-8'; body { font-family: Microsoft JhengHei; line-height: 180%; } a { color: #727272; transition-duration: .4s } a:hover { color: #fff; text-decoration: none; transition-duration: .4s } .footer a:hover { color: #000; } .footer .glyphicon, .footer .fa { margin-right: 10px; } .ns-collapse-xl { background-color: transparent; } .gray_bg { background-color: #f8f8f8; } .max-width-100 { max-width: 100%; } .sub-banner { margin-top: 20px; } .home-carousel .items-block { height: 800px; background-position: center; background-size: cover; background-repeat: no-repeat; } .home-carousel .slick-prev { left: 20px; z-index: 1; } .home-carousel .slick-next { right: 20px; z-index: 1; } .sticky-top.active .nav-item { border: solid 1px #FFF; } .sticky-top.active .nav-item:hover { border: solid 1px #345c83; } .nav-item.dropdown { width: 188px; } @media (min-width: 1201px) { .container { max-width: 83% !important; } } @media (max-width: 1200px) { html { font-size: 85%; } .container { width: 1170px; } .nav-bar { top:62px; background-color: rgba(255, 255, 255, 0.9); } } @media (max-width: 992px) { html { font-size: 80%; } .container { width: 800px; } .nav-bar { box-shadow: -3px 2px 5px rgba(0, 0, 0, 0.3); } .nav-item { margin-bottom: 20px; } } @media (max-width: 768px) { html {} .container { width: 539px; } .slick-carousel.home-carousel .items-block { font-size: 2rem !important; letter-spacing: 10px !important; } .home-carousel .items-block span { letter-spacing: 5px !important; } } @media (max-width: 576px) { .container { width: 90%; } } @media (max-width: 464px) {} @media (max-width: 352px) {} .area-title {} .area-title .area-title__main { color: #345c83; margin-bottom: 20px; font-size: 2.5rem; } .footer { border-top: solid 1px #d8d8d8; padding: 30px 0; color: #727272; } .footer .brand-logo { width: 205px; } .copyright { font-size: 14px; line-height: 220%; } header { position: absolute; width: 100%; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8); } .nav-block, .nav-block a { color: #FFF; } .nav-block a:hover { color: aqua; } .home-carousel a { color: #FFF; } .home-carousel .items-block { text-align: center; font-size: 4rem; letter-spacing: 2rem; } .home-carousel .items-block span { font-size: 1.5rem; letter-spacing: 1rem; margin-top: 2rem; display: block; } .home-carousel .items-block .brand-logo { width: 450px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 1rem; max-width: 100%; } .home-carousel .items-block .container { padding-top: 17%; } @media (max-width: 576px) { .home-carousel .items-block .container { padding-top: 50%; } } .nav-block.sticky-top { transition-duration: .3s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); background-color: #FFF; color: #345c83; } .nav-block.sticky-top a { color: #345c83; text-shadow: 0 0px 0px rgba(0, 0, 0, 0.0); } @media (max-width: 992px) { .nav-block a { color: #345c83 !important; text-shadow: none; } } .nav-block .brand-logo { width: 200px; } .nav-block.sticky-top .brand-logo { display: inline-block; } .nav-block { background-color: transparent; padding: 10px 0; } .nav-block .header-R { color: #727272; } .nav-block .header-R .slogan { font-size: 18px; letter-spacing: 4px; font-weight: 600; } .nav-block .header-R .slogan small { font-size: 12px; letter-spacing: 3px; line-height: 15px; } @media (min-width: 1201px) { .nav-container { max-width: 83% !important; margin: auto; } } .navbar-nav { float: left; margin-top: 5px; } .navbar-nav .item-wrapper>.nav-link { max-width: unset; margin-left: 0; padding: 0 1.2rem 0 0.5rem; padding-bottom: 0; display: inline-block; } .navbar-nav li:last-child .nav-link { border-right: none; } @media (max-width: 1200px) { .navbar-nav { min-width: 240px; } .navbar-nav .nav-link { border-right: none; } } a.nav-link span:first-child { font-size: 1rem; display: block; } .navbar-toggler { background-color: #345c83; border: 0; height: 50px; width: 53px; padding: 6px 17px; box-sizing: border-box; cursor: pointer; outline: none; transition-duration: .5s; position: absolute; right: 0; } .toggle-bar, .toggle-bar::after, .toggle-bar::before { cursor: pointer; border-radius: .5px; height: 2px; width: 20px; background: #FFF; position: absolute; display: block; content: ''; transform: translateX(0); } .toggle-bar::before { top: -7px; transition-duration: .5s; } .toggle-bar::after { top: 7px; transition-duration: .5s; } .navbar-toggler.trigger .toggle-bar::before { transform: rotate(45deg); transform-origin: left center; transition-duration: .5s; } .navbar-toggler.trigger .toggle-bar::after { transform: rotate(-45deg); transform-origin: left center; transition-duration: .5s; } .navbar-toggler.trigger .toggle-bar { background-color: transparent; transition-duration: .5s; transform-origin: center center; transform: translateX(2px); } .dropdown-content { visibility: hidden; pointer-events: none; opacity: 0; transition: all 0.3s; transform: rotateX(-90deg); transform-origin: 50% 0; position: absolute; top: 25px; background-color: rgba(0, 0, 0, 0.50); z-index: 1; color: #FFF; border: solid 1px #345c83; border-top: 0; left: -1px; width: calc((100%) + 2px); } .dropdown-content a { color: black; padding-left: 2rem; text-decoration: none; display: block; text-align: left; font-size: 0.9rem; color: #FFF; line-height: 250%; padding-top: 0.25rem; } .nav-block.sticky-top .dropdown-content { background-color: #fff; } .nav-block.sticky-top .dropdown-content a { color: #345c83; } .nav-block.sticky-top .dropdown-content a:hover { color: #2eb5d3; } .dropdown-content a:last-child { border-bottom: none; } .dropdown-content a:hover { color: aqua; } .dropdown:hover .dropdown-content { pointer-events: visible; visibility: visible; opacity: 1; transform: rotateX(0); } @media (max-width: 1200px) { .dropdown .dropdown-content { position: relative; pointer-events: visible; visibility: visible; opacity: 1; transform: rotateX(0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); margin-top: -15px; } } a.nav-link span.has-child::after { display: inline-block; width: 0; height: 0; margin-left: 0.255em; vertical-align: 0.255em; content: ''; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } .four_column .container { background-image: url(/images/sprites/dot.png), url(/images/sprites/dot.png), url(/images/sprites/dot.png), url(/images/sprites/dot.png), url(/images/sprites/dot.png); background-repeat: repeat-y; background-position: 0%, 25%, 50%, 75%, 100%; margin: 0 auto; padding: 3rem 0; position: initial; } .four_column .container.position_relative { position: relative; } .four_column .full_back { height: 715px; padding-top: 100px; padding-bottom: 50px; box-sizing: content-box; } .block .full_back { width: 100%; position: absolute; top: 0; left: 0; } .four_column .full_back .parallax_wrap { height: 715px; overflow: hidden; } .four_column .full_back .on_full.one_column { height: 787px; top: -71px; background-size: cover; } .four_column .full_back .left { background: url(/images/content/index-01.jpg) no-repeat right; } .four_column .full_back .right { background: url(/images/content/index-02.jpg) no-repeat right; } @media screen and (min-width: 961px) { .block .full_back .on_full.one_column { width: calc(50vw - 399px); } } @media screen and (min-width: 961px) and (max-width: 1800px) { .block .full_back .on_full.one_column { width: calc(25vw + 126px); } } @media screen and (max-width: 960px) { .block .full_back .on_full.one_column { width: 291px; } } @media screen and (max-width: 736px) { .block .text { width: calc(100% - 2px); margin-left: 1px; } } .four_column .text { padding: 3.5% 5%; width: calc((100%) *0.5 - 2px); left: calc((100%) *0.25 + 1px); background-color: #fff; z-index: 1; text-align: center; } @media screen and (max-width: 768px) { .four_column .text { width: 100%; left: 0; } } .four_column .text h2 span { display: block; margin-top: 20px; font-size: 1rem; color: #a9abaf; font-weight: bold; letter-spacing: 1px; } .four_column .text a, .four_column .text button { color: #FFF; padding: 0.25rem 3rem; cursor: pointer; background-color: #007bff; } .four_column .text a:hover, .four_column .text button:hover { color: #FFF; background-color: #345c83; } .four_column .text.left_2 { width: 50%; width: calc(50% - 2px); width: -webkit-calc(50% - 2px); margin-left: 1px; left: 0; box-sizing: border-box; position: absolute; margin-top: 5%; } .four_column .right_3 { width: 75%; width: calc(75% - 2px); width: -webkit-calc(75% - 2px); float: right; margin-right: 1px; } @media screen and (max-width: 768px) { .four_column .text.left_2, .four_column .right_3 { width: 100%; position: unset; } } /*.block .container::after, .four_column ::after { content: '.'; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; }*/ .four_column .text .num { font-size: 23px; font-weight: 500; font-family: 'Arial Narrow'; font-style: italic; float: left; color: #000; padding: 0px 8px; } .four_column .text .num::after { content: ''; height: 1px; width: 30px; background: #000; position: absolute; left: 12px; top: 39px; display: block; transform: rotate(-45deg); transform-origin: left center; visibility: visible; } .four_column .text li { margin-bottom: 1rem; border-bottom: 1px #CCC dotted; min-height: 50px; } .four_column .text li p { display: inline-block; width: calc(100% - 50px); margin-left: 1rem; margin-top: 1rem; } .four_column .text.company { height: auto; background-color: transparent; font-size: 2.5rem; line-height: 3.5rem; } .four_column .text.company p { font-size: 1rem; line-height: 1.5rem; margin-top: 1rem; } .four_column .full { padding-top: 3rem; padding-bottom: 45px; margin-left: 1px; margin-right: 1px; width: 100%; left: 0; } .four_column .text.left_2.full_left { margin-left: -25%; } .four_column .right_3.full_right { width: 100%; } .news-list { text-align: left; margin-left: 0; margin-right: 0; } .news-list li { padding-left: 0; padding-right: 0; margin-bottom: 3rem !important; } .news-list h3 { font-size: 2rem; line-height: 150%; margin-bottom: 1rem; margin-top: 0.5rem; } .news-list .text_inner { box-sizing: border-box; padding-left: 5rem; padding-right: 5rem; } .news-list .text_inner .date, .news-one .date { font-size: 1rem; color: #a9abaf; margin-top: 1rem; } .news-list a.btn { margin-top: 1rem; } .news-one { padding-top: 5rem !important; } .news-one .date { margin-bottom: 1rem; } .products.has-bg .text { background: url(../images/sprites/bg2.jpg); } .products h4 { font-size: 2.5rem; } .products h4 span { display: block; margin-top: 20px; font-size: 1rem; color: #a9abaf; font-weight: bold; letter-spacing: 1px; } .products h3 { font-size: 1.75rem; margin-bottom: 2rem; } .products h3 small { color: #345c83; margin-left: 1rem; } .products h5 { font-size: 1.5rem; font-weight: bold; border-bottom: solid 1px #999; padding-bottom: 5px; margin-bottom: 12px; } .four_column .products .text span.text-danger { display: inline-flex; } .products .spec { overflow: auto !important; overflow-y: scroll !important; padding-left: 0 !important; } .products table td { background-color: #000; } .EDC .products table td, .EDC .products table { background-color: transparent; } thead tr:first-child th:first-child { z-index: 11; } thead tr th { position: sticky; top: 0; z-index: 10; background-color: rgba(52, 92, 131, 1); } td:first-child, th:first-child { position: sticky; left: 0; z-index: 1; background-color: rgba(52, 92, 131, 1); } tr td:first-child { z-index: 0; } .products table { text-align: center; margin-top: 2rem; background-color: #000; } .products table td, .products table th { vertical-align: middle; min-width: 100px; } .products table th, .products table .bg-color { background-color: rgba(52, 92, 131, 0.9); } .products .table-dark th, .products .table-dark td, .products .table-dark thead th { border-color: rgba(255, 255, 255, 1); } .products hr.separation { margin-bottom: 5rem; margin-top: 3rem } .photo-bg { background: url(/images/sprites/bg.jpg) #daecff; padding: 4rem; text-align: center; margin-bottom: 2rem; } spu { font-size: 0.5rem; margin-left: 4px; vertical-align: super; } form.contacts { border: solid 1px #d8d8d8; padding: 3% 7%; margin-bottom: 2rem; } .contacts .form-row { background-color: #e6e6e6; padding: 0.5rem; } .contacts .form-group { margin-bottom: 1px; } .contacts .form-control { padding: 0 0.75rem; } .contacts .col-form-label { text-align: right; } .patent-wrap img { margin-bottom: 10px; } .patent-wrap .row .col-xl-4:nth-child(1) img, .patent-wrap .row .col-xl-4:nth-child(2) img, .patent-wrap .row .col-xl-4:nth-child(3) img, .patent-wrap .row .col-xl-4:nth-child(4) img, .patent-wrap .row .col-xl-4:nth-child(5) img { border: solid 2px #DDD; } .EDC .EDC-icon { font-size: 1.2rem; width: 100%; margin-left: auto; margin-right: auto; } .EDC .EDC-icon .col-xl-2 { max-width: 200px; } .EDC .EDC-icon .flex-card-body { text-align: center; margin-bottom: 10px; } .EDC .application .flex-card-header { background-color: #000; color: #FFF; text-align: center; padding: 5px; border-radius: 0 0 12px 12px; margin-bottom: -12px; z-index: 10; } .EDC .one-outfit { border: solid 1px #999; border-radius: 12px 0 0 12px; } .EDC .one-outfit .left .flex-card-body { padding: 20px 30px; } .table-bordered> :not(caption)>* { border-width: 1px 0; } .stickytablescroll .sticky-wrap>table thead th { background-color: #000; } .stickytablescroll .sticky-wrap>table tbody th { background-color: #FFF; color: #212529; font-weight: bolder; font-size: 1.1rem; } .table tr.gray-bg { background-color: #EEE; } .EDC table tbody tr th { background-color: #FFF; z-index: 100; } @media (max-width: 576px) { .EDC .EDC-icon img { max-width: 100px; } }#gotop { display: none; position: fixed; right: 20px; bottom: 30px; width: 40px; height: 40px; line-height: 32px; text-align: center; font-size: 25px; background: rgba(0, 0, 0, .36); color: #FAFCFD; cursor: pointer; z-index: 80 } #gotop>span.fa { top: -5px; } #gotop>.txt { position: absolute; width: 100%; line-height: normal; font-size: 12px; bottom: 5px; text-align: center }.about-slick{ max-width:800px; } .about-slick .items-block { padding-bottom: 75% !important; background-size: cover; background-position: center; background-repeat: no-repeat; } .about-slick .slick-carousel.items-nav .items-block { margin: 0.25rem; } .slider-syn { border: 1px solid #CCC; padding: 1rem; } .slick-carousel .items-block { margin: 0 auto; text-align: center; font-size: 36px; display: block; vertical-align: middle; } .slick-carousel.items-nav .items-block { padding: 0 0.5rem 0 0; margin-top: 1rem; cursor: pointer; } .slick-slide.slick-current .items-block {} .slick-arrow::before, .slick-arrow::after { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 1em; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .slick-prev.slick-arrow::before { content: 'arrow_back_ios'; color: black; } .slick-next.slick-arrow::before { content: 'arrow_forward_ios'; color: black; } .slick-carousel .slick-arrow { color: transparent !important; width: 30px; height: 30px; padding: 0 !important; font-size: 24px; top: 50%; transform: translateY(-50%); margin-top: unset !important; z-index: 10; } .slick-carousel .slick-arrow, .about .text button:hover { background-color: transparent !important; margin-top: 0; } .about .slick-prev.slick-arrow { left: 20px; } .about .slick-next.slick-arrow { right: 20px } .home-carousel .slick-prev.slick-arrow::before, .home-carousel .slick-next.slick-arrow::before { font-size: 50px; color: white; } .home-carousel .slick-prev.slick-arrow { left: 20px; width: 50px; height: 50px; } .home-carousel .slick-next.slick-arrow { width: 50px; height: 50px; right: 20px; }.meal-list-row { margin-left: -8px; margin-right: -8px; } .meal-list-row>.column { padding: 8px; } a.meal-img { display: block; padding: 0px !important; } a.meal-img::before, a.meal-img::after { position: absolute; opacity: 0; transition-duration: .3s } a.meal-img::before { content: ''; display: block; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4) } a.meal-img::after { content: '\f00e'; font-family: FontAwesome; color: #FFF; font-size: 24px; left: 50%; margin-left: -12px; top: 50%; margin-top: -12px } a.meal-img:hover::before, a.meal-img:hover::after { opacity: 1; transition-duration: .3s }.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }.inquiry { font-size: 1rem; text-align: left; border: 1px solid #CCC; } .inquiry.container { max-width: 100% !important; } @media (max-width: 1200px) { .inquiry-content.container { max-width: 100% !important; } } @media (max-width: 576px) { .inquiry .container { max-width: 100% !important; } } .inquiry .inquiry-bg { background: url(/images/content/inquiry-01.jpg) 100% center; background-size: cover; } .inquiry .inquiry-content { background-color: transparent; } .inquiry-content form { margin: 10px; padding: 2% 0; } .inquiry .col-form-label { text-align: right; padding: 10px 15px; flex: 0 0 33.333333%; max-width: 33.333333%; } .inquiry .col-form-input { padding: 5px 14px; flex: 0 0 66.666667%; max-width: 66.666667%; align-self: center !important; } .inquiry .form-check-inline>* { vertical-align: middle; } @media (max-width: 464px) { .inquiry .col-form-label { color:#FFF; text-align: center; background-color: rgba(119, 119, 119, 1.00); flex: 0 0 calc(100% - 16px); margin: 8px 8px 0 8px; padding: 4px; border-radius: 4px; max-width: 100%; } .inquiry .col-form-input { padding: 4px 8px; margin-top: 4px; flex: 0 0 100%; max-width: 100%; } } .inquiry .form-check-label { line-height: 100%; margin-left: 5px; margin-top: -2px; } .inquiry .form-check-input { margin-left: 5px; } .inquiry .form-check { margin-bottom: 0; } .inquiry legend { font-size: 1rem; } .inquiry .form-row { background-color: #e6e6e6; } .inquiry .form-group { margin-bottom: 2px; } .inquiry .form-control { padding: 0 0.75rem; vertical-align: middle; } .inquiry textarea.form-control { margin: 10px 0; } .inquiry input.form-control, .inquiry select.form-control { height: auto !important; } .w-10 { width: 10% !important; } .contactform .invalid-feedback { font-size: 14px; color: #FF3F00; position: absolute; right: 20px; bottom: 0; pointer-events: none; } .contactform .form-group.has-error .invalid-feedback { display: block; } .contactform .form-group.has-error .form-control { border-color: #FF3F00; }.set-list-group { counter-reset: my-sub-counter; } .set-list-group .set-list-no::before { content: counter(my-sub-counter); counter-increment: my-sub-counter 1; font-size: 23px; font-weight: 500; font-family: 'Arial Narrow'; font-style: italic; float: left; color: #000; padding: 0px 8px; } .set-list-group .set-list-no::after { content: ''; height: 1px; width: 30px; background: #000; position: absolute; left: 12px; top: 39px; display: block; transform: rotate(-45deg); transform-origin: left center; visibility: visible; } .set-list-group .set-list-no { margin-bottom: 1rem; border-bottom: 1px #CCC dotted; min-height: 50px; } .set-list-group .set-list-no>p, .set-list-group .set-list-no>.list-content { display: inline-block; width: calc(100% - 50px); margin-left: 1rem; margin-top: 1rem; } .set-list-group .set-list-no>.list-content>p { padding: 0; } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .product-sect { background-color: rgb(248, 248, 248); } .product-sect .sticky-wrap .table th { background-color: rgba(52, 92, 131, 0.9); color: #FFF; } .product-sect .container { background: url(/images/sprites/bg2.jpg); margin: 0 auto; position: initial; } .collapse-item { margin-bottom: 0.25rem; } .collapse-list { counter-reset: h5; list-style: none; } .collapse-topic { padding: 10px 0; line-height: 20px; color: var(--pink-mid); cursor: pointer; } .collapse-topic:hover { color: var(--pink-light); } .collapse-head { border-radius: 0.25rem; background-color: rgba(0, 0, 0, 0.03); border: 1px solid var(--pink-light); } .collapse-head::after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 16px; top: 10px; font-size: 24px; line-height: 1; transition: .2s; transition-duration: .3s; transform: rotate(0deg); color: var(--pink-light); ; } .collapse-head.trigger::after { content: '\f107'; transition: .2s; transition-duration: .3s; transform: rotate(-180deg); } .collapse-topic { max-width: calc(100% - 35px); padding-left: 1rem; outline: none; margin: 0; text-align: left; } .collapse-content { border: 0; } .collapse-text { margin: 20px; border: 0; padding-left: 15px; color: #686868; line-height: 1.8; } .collapse-text::before { height: 100%; width: 1px; content: ''; left: -6px; border-left: 1px solid #DDD; position: absolute; }