@import url('/css/fontawesome-all.css'); @import url('/css/font-awesome.min.css'); @import url('/css/fontawesome.min.css'); @import url('/css/all.min.css'); @import url('/css/SeoJump.css'); @import url('/css/contentBuilder.css'); @import url('root.css'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');.webBox *,.webBox:before,.webBox:after {
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out
}

.webBox header #menubtn[data-type="2"] a span:nth-child(1) {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    background: #ffffff
}

.webBox header #menubtn[data-type="2"] a span:nth-child(3) {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    background: #ffffff
}

@media (min-width: 1281px) {
    .webBox header #webmenu li .menu_body {
        transform:translate(0,30px);
        -webkit-transform: translate(0,30px)
    }

    .webBox header #webmenu li .menu_body .subOption li .sub2Option {
        transform: translate(-30px,0);
        -webkit-transform: translate(-30px,0)
    }

    .webBox header #webmenu li .menu_body .subOption li .sub2Option li .sub3Option {
        transform: translate(-30px,0);
        -webkit-transform: translate(-30px,0)
    }

    .webBox header #webmenu li .menu_body .subOption li .sub2Option li:hover .sub3Option {
        transform: translate(0,0);
        -webkit-transform: translate(0,0)
    }

    .webBox header #webmenu li .menu_body .subOption li:hover .sub2Option {
        transform: translate(0,0);
        -webkit-transform: translate(0,0)
    }

    .webBox header #webmenu li:hover .menu_body {
        transform: translate(0,0);
        -webkit-transform: translate(0,0)
    }

    .webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option {
        transform: translate(30px,0);
        -webkit-transform: translate(30px,0)
    }

    .webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option li .sub3Option {
        transform: translate(30px,0);
        -webkit-transform: translate(30px,0)
    }

    .webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option li:hover .sub3Option {
        transform: translate(0,0);
        -webkit-transform: translate(0,0)
    }

    .webBox header #webmenu li:last-child .menu_body .subOption li:hover .sub2Option {
        transform: translate(0,0);
        -webkit-transform: translate(0,0)
    }
}

.webBox header #search_box #openform {
    width: 45px;
    height: 45px;
    border-radius: 50%
}

.webBox header #search_box form {
    transform: translate(30px,0);
    -webkit-transform: translate(30px,0)
}

.webBox header #search_box[data-type="2"] form {
    transform: translate(0,0);
    -webkit-transform: translate(0,0)
}

.webBox .img_scale img {
    transform: scale(1);
    -webkit-transform: scale(1)
}

@media (min-width: 1281px) {
    .webBox .img_scale:hover img {
        transform:scale(1.1);
        -webkit-transform: scale(1.1)
    }
}

.webBox #SeoStarRating font {
    margin-right: 5px;
    display: inline-block;
    line-height: 110%;
    vertical-align: text-bottom;
    color: #ffc107
}

.webBox #SeoStarRating font * {
    color: #ffc107
}

.webBox #SeoStarRating font:first-child {
    font-weight: bold;
    font-size: 18px
}

.webBox #SeoStarRating font:last-child {
    color: #cb0244
}

.webBox #webSeo .seo {
    -webkit-animation: marquee 200s linear infinite;
    animation: marquee 200s linear infinite
}

.webBox #footer_btn a {
    width: 45px;
    height: 45px;
    border-radius: 50%
}

@media (max-width: 550px) {
    .webBox #footer_btn a {
        width:40px;
        height: 40px;
        border-radius: 50%
    }
}

* {
    margin: 0;
    padding: 0
}

*:focus {
    outline: none
}

body {
    margin: 0;
    overflow: hidden;
    overflow-y: scroll
}

body::selection {
    background: var(--gray);
    text-shadow: none;
    color: var(--white)
}

body::-webkit-scrollbar {
    width: 5px
}

body::-webkit-scrollbar-track {
    background: rgba(var(--gray-rgb),.4)
}

body::-webkit-scrollbar-thumb {
    background: var(--primary)
}

header,footer,div,nav,article,h2,h3,h4,h5,h6,hr,p,form,label,input,textarea,ul,li,img,svg,span,font,strong,b,a,i {
    text-align: left;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 170%;
    border-width: 0;
    font-family: var(--font-family),sans-serif;
    font-size: 22px;
    color: var(--info)
}

ul,ol {
    list-style: none
}

fieldset {
    border: 0
}

input,button,select,textarea {
    padding: 5px 15px;
    width: calc(100% - 32px);
    border: 1px rgba(var(--black-rgb),.15) solid;
    border-radius: 0;
    background: none;
    box-shadow: none;
    outline: none;
    font-size: 16px;
    color: var(--gray);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

select {
    padding: 10px 15px;
    width: 100%
}

input#Checknum {
    margin-right: 15px;
    width: 70px;
    max-width: calc(100% - 97px)
}

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
    font-weight: 400;
    color: rgba(var(--black-rgb),.6)
}

input::-moz-placeholder,textarea::-moz-placeholder {
    font-weight: 400;
    color: rgba(var(--black-rgb),.6)
}

input:-ms-input-placeholder,textarea:-ms-input-placeholder {
    font-weight: 400;
    color: rgba(var(--black-rgb),.6)
}

input:-moz-placeholder,textarea:-moz-placeholder {
    font-weight: 400;
    color: rgba(var(--black-rgb),.6)
}

#cookie-consent {
    position: fixed;
    width: 80%;
    background-color: #f0f0f0;
    padding: 2vw 10%;
    text-align: center;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap
}

#cookie-consent p {
    text-align: left;
    width: 55%;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 15px;
    margin-right: 5%
}

#cookie-consent button {
    background-color: #1e514a;
    color: #fff;
    padding: 20px 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    width: auto
}

#cookie-consent button:hover {
    background-color: #1b3f60
}

img {
    max-width: 100%
}

.img_cover {
    width: 100%;
    object-fit: cover
}

.img_contain {
    width: 100%;
    object-fit: contain
}

a,a:link,a:visited,a:hover {
    text-decoration: none;
    white-space: pre-wrap
}

.txt_clamp {
    overflow: hidden;
    height: 27px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.d_inblock.txt_clamp {
    display: -webkit-inline-box
}

.atag_item {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.nowrap_box {
    font-size: 0
}

.txt_num {
    font-family: 'Quicksand',sans-serif
}

.btn,.btn_outline {
    padding: 2px 10px
}

.more_btn {
    padding: 10px 35px;
    text-transform: capitalize
}

.more_btn:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--white);
    top: 0;
    left: 0;
    opacity: .3;
    z-index: 9;
    content: "";
    -webkit-transition: -webkit-transform .6s;
    transition: -webkit-transform .6s;
    transition: transform .6s;
    transition: transform .6s,-webkit-transform .6s;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,100%,0)
}

.btnBox {
    -webkit-animation: JJUpAnimation 1s 3.1s ease-in-out forwards;
    animation: JJUpAnimation 1s 3.1s ease-in-out forwards
}

.btnBox .btn {
    display: flex;
    z-index: 2;
    position: relative;
    text-align: center;
    width: 217px;
    padding: 18px 12px 18px 0px;
    border-radius: 39.5px;
    font-weight: 400;
    font-size: max(1.2*(1vw + 1vh) / 2,15px);
    line-height: 1;
    letter-spacing: 0;
    background-color: #1e514a;
    color: #fff;
    overflow: hidden;
    border: 1px solid #1a433d;
    justify-content: flex-start
}

.btnBox .btn.out02 {
    margin-left: 20px;
    background-color: #ffffff
}

.btnBox .btn.out02:hover b {
    color: #ffffff
}

.btnBox .btn.out02 span:before,.btnBox .btn.out02 span:after {
    background: #1e514a
}

.btnBox .btn.out02 b {
    color: #1e514a
}

.btnBox .btn.out02 #arrowJJ {
    background: #1e514a;
    fill: #ffffff
}

.btnBox .btn b {
    color: #fff;
    margin-left: 40px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
}

.btnBox .btn:hover b {
    color: #1e514a
}

.btnBox .btn span {
    display: block;
    width: 7px;
    height: 7px;
    z-index: -1;
    position: absolute;
    top: 50%;
    right: 37px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.btnBox .btn span:before,.btnBox .btn span:after {
    content: "";
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in
}

.btnBox .btn.out span:before {
    -webkit-animation: beforeToSm 0.7s 0.2s forwards;
    animation: beforeToSm 0.7s 0.2s forwards
}

.btnBox .btn span:before {
    width: 29px;
    height: 29px;
    opacity: 0.2
}

.btnBox .btn.out span:after {
    -webkit-animation: afterToSm 0.7s forwards;
    animation: afterToSm 0.7s forwards
}

.btnBox .btn span:after {
    width: 7px;
    height: 7px
}

.btnBox .btn:hover span:before {
    -webkit-animation: full 0.8s forwards;
    animation: full 0.8s forwards
}

.btnBox .btn:hover span:after {
    -webkit-animation: full 0.8s 0.2s forwards;
    animation: full 0.8s 0.2s forwards
}

.btnBox #arrowJJ {
    width: 15px;
    position: absolute;
    aspect-ratio: 1/1;
    right: 19px;
    margin-top: -5px;
    background: #ffffff;
    padding: 13px;
    border-radius: 50%;
    fill: #1e514a;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box
}

@keyframes float {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes full {
    100% {
        width: 550px;
        height: 500px
    }
}

@keyframes beforeToSm {
    0% {
        width: 550px;
        height: 500px
    }

    100% {
        width: 29px;
        height: 29px
    }
}

@keyframes afterToSm {
    0% {
        width: 550px;
        height: 500px
    }

    100% {
        width: 7px;
        height: 7px
    }
}

.badge {
    padding: 2px 10px;
    box-shadow: none
}

.badge_lighten {
    padding: 0 4px;
    min-width: 22px;
    border-radius: 3px;
    font-weight: 400;
    text-align: center;
    font-size: 12px;
    vertical-align: text-bottom
}

a.photo,.bgBox {
    overflow: hidden;
    background: no-repeat 50% / cover;
    display: block
}

[class^="fancybox-"],[class^="fancybox-"] *,.slick-track,.fa,.fas,.fa:before,.fas:before,.fa:after,.fas:after,.trans_none_box {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none
}

[class^="fancybox-"],[class^="fancybox-"] * {
    font-family: inherit;
    color: currentColor
}

.webBox {
    overflow: hidden;
    position: relative;
    width: 100%
}

.webBox .pageh1 {
    position: absolute;
    top: 0;
    z-index: 1
}

.webBox .wrapper {
    position: relative;
    background: var(--white);
    z-index: 2
}

.webBox .slick-slider {
    margin-bottom: 0
}

.workframe {
    margin: 0 auto;
    width: 90%
}

header {
    z-index: 999
}

header .item {
    padding: 0 2%
}

header .menu {
    display: flex;
    align-items: center
}

header .top_btn {
    width: 96%;
    top: 0;
    left: 0;
    position: relative;
    background: unset;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

header a.mmJmap,header a.mmJmap * {
    color: #2e2e2e;
    margin-right: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

header a.mmJmap sapn {
}

header a.gomapJ {
    padding: 5px 22px;
    background: #d8ae40;
    color: #ffffff;
    border-radius: 55px;
    margin: 0 11px
}

header .top_btn svg {
    margin: 0 4px;
    width: 15px;
    height: 15px;
    fill: #d8ae40;
    border: #d8ae40 1px solid;
    padding: 8px;
    border-radius: 55px
}

header #cis {
    z-index: 5;
    display: flex
}

header #cis img {
    width: min(300px,100%)
}

header.scroll #cis img {
    width: min(285px,100%)
}

header #menubtn {
    height: 70px;
    top: 0;
    right: 0;
    z-index: 1000
}

header #menubtn a {
    margin: auto 0 auto auto;
    width: 30px;
    height: 25px
}

header #menubtn a span {
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--white);
    display: block;
    top: 0;
    right: 0
}

header #menubtn[data-type="1"] a span {
    transition: transform .4s cubic-bezier(.215,.61,.355,1),opacity .4s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1)
}

header #menubtn[data-type="1"] a span:nth-child(2) {
    top: calc(50% - .5px)
}

header #menubtn[data-type="1"] a span:nth-child(3) {
    top: calc(100% - 1px)
}

header #menubtn[data-type="2"] a span {
    transition: .4s cubic-bezier(.645,.045,.355,1)
}

header #menubtn[data-type="2"] a span:nth-child(1),header #menubtn[data-type="2"] a span:nth-child(3) {
    top: 50%
}

header #menubtn[data-type="2"] a span:nth-child(2) {
    opacity: 0
}

header #webmenu nav>ul>li>p a {
    padding: 10px 5px;
    font-size: max(1.3 * (1vw + 1vh) / 2,17px);
    color: #2e2e2e;
    text-transform: uppercase
}

header #webmenu nav ul li b {
    position: absolute;
    padding: 0 5px 0 15px;
    width: 23px;
    height: 41px;
    display: inline-block;
    text-align: center;
    line-height: 41px;
    top: calc((100% - 41px) / 2);
    right: 0
}

header #webmenu nav ul li b .fa {
    color: #d5d5d5
}

header #webmenu nav>ul>li .subOption li>div a {
    padding: 10px 10px;
    display: block;
    color: #ffffff
}

header #webmenu nav>ul>li .subOption li>div a:hover {
    background: rgb(27 62 57 / 75%)
}

header #webmenu {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

header.scroll {
    background: var(--white);
    box-shadow: 0 0 20px rgba(var(--black-rgb),.3)
}

header.scroll .item.menu {
    border-bottom: 0
}

#search_box {
    display: grid;
    justify-content: center;
    border-radius: 50px;
    margin-left: 30px;
    width: 18%;
    grid-template-columns: 50% 50%;
}

#search_box a {
    margin: 0;
    color: #fff;
    display: flex;
    background: var(--secondary);
    padding: 8px 4px;
    border-radius: 0 50px 50px 0;
    justify-content: center;
    font-size: max(1.3 * (1vw + 1vh) / 2,17px);
}

#search_box a:first-child {
    border-radius: 50px 0 0 50px;
    background: #eaeaea;
    color: var(--secondary);
}

#openform {
    background: var(--secondary);
    line-height: 45px
}

#search_box svg {
    width: 18px;
    height: 18px
}

#search_box form {
    width: 240px;
    box-shadow: 0 0 10px rgba(var(--black-rgb),.3);
    right: 0;
    bottom: -55px;
    opacity: 0
}

#search_box[data-type="2"] form {
    opacity: 1
}

#search_box form input {
    width: calc(100% - 65px);
    border: 0
}

#menubg {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0
}

#menubg[data-type="1"] {
    background: rgba(var(--black-rgb),0);
    z-index: -998
}

#menubg[data-type="2"] {
    background: rgba(var(--black-rgb),.5);
    z-index: 998
}

footer {
    padding-top: 0;
    z-index: 5;
    background-image: url(/images/40/double-bubble-outline.png);
    background-color: #ffffff
}

#flogo img {
    width: min(300px,100%)
}

footer * {
    font-weight: 300;
    font-size: max(1.2 * (1vw + 1vh) / 2,15px);
    color: rgb(66 66 66)
}

#compnybox h2 {
    font-size: max(1.6*(1vw + 1vh) / 2,20px);
    font-weight: 600;
    margin-bottom: 20px
}

#compnybox .mminfobox {
    display: flex;
    flex-wrap: wrap
}

#compnybox .mminfobox p {
    display: flex;
    align-items: center
}

.fullbox {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background: #ffffff;
    margin-bottom: 0
}

.fullbox .workframe {
    display: flex;
    padding: 36px 0;
    border-bottom: rgb(208 208 208 / 53%) 1px solid
}

footer .macopy {
    background: var(--primary)
}

footer .macopy * {
    display: flex;
    justify-content: center;
    color: aliceblue;
    font-size: max(1*(1vw + 1vh) / 2,11px)
}

footer .fullbox #f_nav {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    display: flex;
    justify-content: flex-end
}

footer .tit {
    margin-bottom: 10px;
    font-family: 'Frank Ruhl Libre',serif;
    font-weight: 500;
    font-size: 23px
}

footer #f_info {
    margin: 20px 0 40px;
    padding-top: 30px;
    border-top: 1px rgba(var(--info-rgb),.3) solid
}

footer #f_contact p {
    margin-bottom: 10px
}

footer #f_contact p font {
    line-height: 140%
}

footer #f_nav a {
    margin: 5px 15px;
    font-weight: 500;
    font-size: max(1.2 * (1vw + 1vh) / 2,16px);
    color: #2e2e2e;
    text-transform: uppercase
}

footer #f_other {
    margin-top: 15px
}

footer #more_extra {
    padding: 5px;
    width: 190px;
    z-index: 2
}

footer #extra ul {
    width: 200px;
    bottom: 0;
    left: 0;
    z-index: 1
}

footer #extra ul li {
    padding: 5px 15px
}

footer #extra ul li font {
    display: block;
    line-height: 140%
}

footer #extra ul li font:first-child {
    color: var(--white)
}

footer #extra ul li img {
    position: absolute;
    max-width: 150px;
    top: 100%;
    left: 15px;
    z-index: 8;
    max-height: 150px;
    display: none
}

#webSeo {
    padding: 10px 0;
    white-space: nowrap;
    box-sizing: border-box
}

#webSeo .seo {
    padding-left: 100%;
    font-weight: 100;
    font-size: 13px;
    color: var(--info)
}

#footer_btn {
    right: 15px;
    bottom: 15px;
    z-index: 2000
}

#footer_btn a {
    margin-top: 10px;
    background: #12b508;
    line-height: 40px
}

#footer_btn a svg {
    width: 60%;
    height: 60%
}

#footer_btn a.phone {
    background: var(--complement)
}

#footer_btn a.gotop {
    background: rgba(var(--primary-rgb),.7);
    border: 1px var(--primary) solid
}

@-webkit-keyframes marquee {
    0% {
        -webkit-transform: translate(0,0)
    }

    100% {
        -webkit-transform: translate(-100%,0)
    }
}

@keyframes marquee {
    0% {
        transform: translate(0,0)
    }

    100% {
        transform: translate(-100%,0)
    }
}

@media screen and (min-width: 1441px) {
    .workframe {
        width:var(--width-xxl)
    }

    header .item {
        padding: 9px 0;
        width: min(1440px,90%);
        margin: 0 auto
    }

    header .top_btn {
        width: 100%;
        padding: 0
    }

    header #webmenu nav>ul>li {
        margin-left: 15px
    }
}

@media screen and (min-width: 1281px) {
    .more_btn:hover:before {
        -webkit-transform:scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,-100%,0);
        transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,180deg) translate3d(0,-100%,0)
    }

    header .menu {
    }

    header #webmenu nav ul li b {
        display: none
    }

    header #webmenu nav ul li {
        position: relative
    }

    header #webmenu nav ul li .bo {
        position: relative;
        background: var(--white);
        z-index: 1
    }

    header #webmenu nav>ul>li>p a {
        padding: 6px 10px;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    header #webmenu nav>ul>li>p a:hover {
        color: #1e514a
    }

    header #webmenu nav>ul>li>p a:before {
        content: "";
        position: absolute;
        width: 0%;
        height: 2px;
        background: #1e514a;
        bottom: 0;
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out
    }

    header #webmenu nav>ul>li>p a:hover:before {
        width: 84%
    }

    header #webmenu li .menu_body,header #webmenu li .subOption ul {
        position: absolute;
        width: 210px;
        right: calc(50% - 107px);
        z-index: -1;
        opacity: 0
    }

    header #webmenu li .menu_body ul {
        background: #000000b5;
        box-shadow: 0 0 10px rgba(var(--black-rgb),.3)
    }

    header #webmenu li .subOption li {
        overflow: hidden
    }

    header #webmenu li .subOption li>div a {
        padding: 6px 15px;
        border-bottom: 1px rgba(var(--black-rgb),.1) solid;
        line-height: 150%;
        font-weight: 300
    }

    header #webmenu li .subOption li:last-child>div a {
        border-color: none
    }

    header #webmenu li .subOption li>div a:hover {
        color: #ffffff
    }

    header #webmenu li .subOption .sub2Option,header #webmenu li .subOption .sub3Option {
        top: 0;
        right: -170px
    }

    header #webmenu nav>ul>li:hover,header #webmenu li .subOption li:hover {
        overflow: visible
    }

    header #webmenu nav>ul>li:hover .menu_body,header #webmenu li .subOption li:hover>ul {
        z-index: 2;
        opacity: 1
    }

    header #webmenu li:last-child .subOption .sub2Option,header #webmenu li:last-child .subOption .sub3Option {
        right: auto;
        left: -170px
    }

    header.scroll .top_btn {
        top: -55px;
        opacity: 0;
        display: none
    }

    header.scroll #webmenu nav>ul>li>p a {
        padding: 15px 10px
    }

    footer #extra ul li:hover img {
        display: block
    }
}

@media screen and (min-width: 1025px) {
    .phoneWrap {
        display:none !important
    }

    footer #footerCompany .plus-information a:hover img {
        display: block
    }
}

@media screen and (max-width: 1024px) {
    .phoneWrap {
        display: none;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        z-index: 555;
        flex-direction: column
    }

    .phoneWrap ul {
        display: flex
    }

    .phoneWrap ul li {
        width: 50%;
        box-sizing: border-box;
        background-color: #43a71c
    }

    .phoneWrap ul li+li {
        border-left: 1px solid #fff;
        background: #d8ae40
    }

    .phoneWrap ul li a {
        display: inline-block;
        width: 100%;
        color: #fff;
        text-align: center;
        padding: 8px 0px 6px;
        font-size: 14px
    }

    .webBox #footer_btn a.mbnonne {
        display: none
    }
}

@media screen and (max-width: 1470px) {
    .btnBox .btn {
        width:210px;
        padding: 13px 12px 13px 0px
    }

    .workframe {
        width: min(1200px,90%)
    }

    header #cis img {
        width: min(260px,100%)
    }

    header.scroll #cis img {
        width: min(251px,100%)
    }

    header .item {
        width: min(1440px,95%);
        margin: 0 auto;
        padding: 9px 0
    }

    header .top_btn {
        padding: 0
    }

    .footercoude {
    }

    .footercoude img {
        width: 130px
    }

    .footmtrbox {
        grid-template-columns: 10% 66% 28%;
        gap: 0 1%
    }
}

@media screen and (max-width: 1280px) {
    #search_box {
        position:absolute;
        right: 100px;
        top: 0;
        z-index: 10
    }

    header .top_btn {
        display: none
    }

    header #menubtn a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        top: 15px;
        height: 17px
    }

    header #menubtn a span {
        width: 92%;
        background: #1e514a
    }

    header #menubtn a:before {
        content: "";
        position: absolute;
        width: 161%;
        aspect-ratio: 1/1;
        border-radius: 50%
    }

    header {
        background: #ffffff;
        padding: 10px 0
    }

    header .menu {
        display: flex
    }

    header #cis img {
        width: min(200px,100%)
    }

    header #menubtn {
        position: absolute;
        right: 10px
    }

    header #webmenu nav>ul>li>p a {
        padding: 24px 5px
    }

    header #webmenu {
        padding: 15px 0;
        width: 350px;
        height: 100vh;
        background: #393939;
        box-shadow: 0 10px 10px rgba(var(--black-rgb),.5);
        right: calc(-1 * var(--width-xs));
        z-index: 999;
        position: fixed;
        top: 0
    }

    header #webmenu .top_btn a {
        margin: 0 5px
    }

    header #webmenu nav {
        overflow-y: scroll;
        margin-top: 15px;
        padding: 0 10px;
        height: calc(100% - 65px);
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box
    }

    header #webmenu nav::-webkit-scrollbar {
        width: 0
    }

    header #webmenu nav>ul {
        padding-bottom: 200px;
        width: 100%;
        margin-top: 60px
    }

    header #webmenu nav>ul>li>p a {
        color: var(--white);
        border-bottom: rgb(255 255 255 / 14%) 1px solid
    }

    header #webmenu li .menu_body,header #webmenu li .menu_body .subOption li ul {
        position: relative;
        display: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none
    }

    header #webmenu li .menu_body ul {
        margin-left: 20px
    }

    header #webmenu li .menu_body .subOption .bo {
        position: relative
    }

    header #webmenu li .menu_body .subOption a {
        padding: 7px 45px 7px 10px;
        color: #ffffff
    }

    header #webmenu li .menu_body .sub2Option a {
        font-weight: 300;
        color: rgba(var(--white-rgb),.5)
    }

    header #webmenu li .menu_body .sub3Option a {
        color: rgba(var(--triadic1-rgb),.8)
    }

    .footmtrbox {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    #compnybox {
        margin: 44px 0
    }

    footer .fullbox #f_nav {
        display: flex;
        justify-content: flex-start
    }

    #flogo a {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

@media screen and (max-width: 980px) {
    header #cis {
        width:90%
    }

    #search_box {
        width: 15%
    }

    #cookie-consent {
        width: 90%;
        padding: 15px 5%
    }

    #cookie-consent p {
        margin: 0;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
        font-size: 13px
    }

    #cookie-consent button {
        font-size: 14px
    }
}

@media screen and (max-width: 760px) {
    #search_box {
        width:18%;
        right: 70px;
        top: -5px
    }

    #search_box a {
        font-size: 14px
    }

    footer #extra {
        margin-top: 10px
    }

    .webBox .wrapper_lines .center_box>div {
        border-width: 0 0 0 1px
    }

    header.scroll #cis img,header #cis img {
        width: min(200px,100%)
    }

    header #menubtn a {
        width: 20px;
        height: 18px
    }
}

@media screen and (max-width: 550px) {
    header {
        padding:20px 0
    }

    header #menubtn a {
        top: 7px
    }

    header .item {
        padding: 0 5%;
        display: flex;
        align-items: flex-start
    }

    header #menubtn a:before {
        width: 210%
    }

    header .top_btn {
        width: 90%;
        display: none
    }

    header #webmenu {
        width: 320px
    }

    #search_box form {
        right: 2%;
        bottom: -35px
    }

    .fullbox .workframe {
        display: flex;
        flex-direction: column
    }

    footer .workframe {
        width: 90%
    }

    footer #f_contact p font:first-child {
        margin-right: 10px
    }

    #footer_btn {
        width: 100%;
        right: 0;
        bottom: 57px
    }

    #footer_btn a {
        margin: 0 10px;
        line-height: 35px
    }

    #footer_btn a.gotop {
        right: 0;
        bottom: 0
    }

    .btnBox {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .btnBox .btn {
        width: 200px
    }

    .btnBox #arrowJJ {
        right: 18px
    }

    footer .fullbox #f_nav {
        display: flex;
        justify-content: flex-start;
        margin-top: 30px
    }

    footer #f_nav a {
        margin: 5px 9px
    }

    #flogo img {
        width: min(200px,100%)
    }
}