@charset "utf-8";
@import url(bootstrap_V5.3.8.min.css);
@import url(fontawesome-free-6.7.1.min.css);
@import url(animate.min.css);
@import url(icheck-bootstrap.min.css);
@import url(owl.carousel.min.css);

:root {
--header: #fff;
--header-rgb: 255, 255, 255;
--headerH: 100px;
--headerH_s: 124px;
--mB-height: 85px;
--mainC: #0190b2;
--mainC-rgb: 1, 144, 178;
--hoverC1: #69c0d6;
--hoverC2: #91c2cf;
--footerC: #0164b2;
--lineC: #ddd;
--focusC: var(--bs-red);
--wordW: rgba(255, 255, 255, 0.82);
--wordB: rgba(var(--bs-body-color-rgb), 0.75);


--b-radius: 50%;
--transparentW2: rgba(255, 255, 255, 0.24);
--transparentW3: rgba(255, 255, 255, 0.36);
--transparentW7: rgba(255, 255, 255, 0.71);

--border1: var(--bs-border-width) solid var(--bs-border-color);
--boxShadow1: 0 3px 20px 0 var(--bs-border-color);
--padding3: 3rem 3.25rem;

--table-padding: 0.75rem;

/* ▼ bootstrap5 */
--bs-font-sans-serif: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-body-line-height: 1.65;
--bs-nav-link-font-size: 1rem;

--bs-gray: #adb5bd;
--bs-gray-100: #f9fafa;
--bs-gray-200: #e3e6e9;
--bs-gray-300: #c3c9ce;
--bs-gray-400: #adb5bd;
--bs-gray-500: #97a1ac;
--bs-gray-600: #828e9a;
--bs-gray-700: #6d7a87;
--bs-gray-800: #5b6772;
--bs-gray-900: #4a535c;
--bs-gray-dark: #383f46;

--bs-border-color: #dee2e6;
--bs-border-radius: 0.3125rem;
}

@media (max-width: 1409px) {
:root {
--padding3: calc(3rem * 0.7) calc(3.25rem * 0.7);
}
}

@media (max-width: 767px) {
:root {
--padding3: calc(3rem * 0.5) calc(3.25rem * 0.5);
}
}

/* ▼ bootstrap5 原始設定增加與修改*/
a {
color: var(--bs-body-color);
text-decoration: none;
transition: 0.25s;
}
a.a1 {color: var(--mainC);}
a:hover {color: var(--mainC);}
a.a1:hover {text-decoration: underline;}

p {margin-bottom: 0;}

hr {
border-top: var(--border1);
opacity: 1;
}

.btn {border: var(--border1);}
.btn-info {
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
--bs-btn-disabled-color: #fff;
}

.btn.btn_clearSettings {
border-radius: 0;
padding: 0;
border: none;
}

.navbar {
--bs-navbar-nav-link-padding-x: 1rem;    
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
padding-right: 15px;
padding-left: 15px;
}

.dropdown-toggle::after {border: none;}
.nav-link.dropdown-toggle::after {content: "+";transition: 0.35s;}
.nav-link.dropdown-toggle.show::after {content: "-";}
.dropdown-item.dropdown-toggle.collapsed::after {content: "+";}
.dropdown-item.dropdown-toggle::after {content: "-";}

.dropdown-menu {border: none;}

.form-label {font-size: 0.925rem;}
.form-control:focus {
border-color: var(--wordW);
box-shadow: 0 0 0 .25rem rgba(var(--mainC-rgb), 0.35);
}
.form-control::-moz-placeholder {
  color: rgba(var(--bs-body-color-rgb), 0.55);
}
.form-control::placeholder {
  color: rgba(var(--bs-body-color-rgb), 0.55);
}

.form-check {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: initial;
margin-bottom: 0;
gap: 0.5rem;
}

.form-check-input {background-color: var(--bs-border-color);}

@media (min-width: 768px) {
.container-fluid.max-c-f {
padding-right: 30px;
padding-left: 30px;
}
}

@media (min-width: 1401px) {
.container-fluid.max-c-f {
width: 100%;
max-width: 1840px;
padding-right: 40px;
padding-left: 40px;
margin: 0 auto;
}

.form-label {font-size: 1rem;}
}

@media (min-width: 1841px) {
.container-fluid.max-c-f {
max-width: initial;
padding-right: calc((100% - 1760px) / 2);
padding-left: calc((100% - 1760px) / 2);
}
}

/* ▼ form */

ul.share-buttons{
list-style: none;
padding: 0;
}
ul.share-buttons li{display: inline;}
ul.share-buttons .sr-only{
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

.highlight {
padding-bottom: 20px;
margin-bottom: 20px;
color: #028562;
border-bottom: 1px #a0e4dd solid;
}

.input-group .btn {border-color: var(--bs-border-color);}
.input-group .btn:hover {
color: var(--mainC);
background-color: transparent;
border-color: #a0e4dd;
}

.inputBtn, .inputP {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.inputBtn .form-control, .inputBtn .btn {
    width: auto;
    flex: 1 1 auto;
}
.inputP .form-control, .inputP p {
    width: auto;
    flex: 1 1 auto;
}

/* ▼ .owl-nav */
.owl-nav {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 150px);
height: 50px;
margin: 0;
position: absolute;
bottom: calc(50% - 25px);
left: 75px;
font-size: 0;
z-index: 12;
}
.owl1 .owl-nav {
width: calc(100% + 150px);
height: 50px;
bottom: calc(50% - 25px);
left: -75px;
}
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
width: 50px;
height: 100%;
border-radius: var(--b-radius);
border: none;
background-color: var(--wordW);
transition: 0.2s;
position: relative;
}
.owl-carousel .owl-nav button.owl-prev.disabled, .owl-carousel .owl-nav button.owl-next.disabled {
opacity: 0.45;
pointer-events: none;
}
.owl-carousel .owl-nav button.owl-prev::after, .owl-carousel .owl-nav button.owl-next::after {
content: '';
position: absolute;
top: calc(50% - 10px);
width: 20px;
height: 20px;
border-top: 1px solid var(--hoverC1);
border-right: 1px solid var(--hoverC1);
transition: 0.2s;
}
.owl-carousel .owl-nav button.owl-prev::after {
right: calc(50% - 13px);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.owl-carousel .owl-nav button.owl-next::after{
left: calc(50% - 13px);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover {
border-color: var(--hoverC2);
}
.owl-carousel .owl-nav button.owl-prev:hover::after, .owl-carousel .owl-nav button.owl-next:hover::after {border-color: var(--mainC);}

@media (max-width: 1840px) {
.owl-nav {
width: calc(100% - 80px);
left: 40px;
}    
.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
width: 35px;
height: 35px;
} 
.owl-carousel .owl-nav button.owl-prev::after, .owl-carousel .owl-nav button.owl-next::after {
top: calc(50% - 4.5px);
width: 9px;
height: 9px;
}
.owl-carousel .owl-nav button.owl-prev::after {right: calc(50% - 6.5px);}
.owl-carousel .owl-nav button.owl-next::after {left: calc(50% - 6.5px);}
}

@media (max-width: 1400px) {
.owl1 .owl-nav {
width: 150px;
height: 50px;
position: relative;
bottom: initial;
left: initial;
margin: 20px auto 0;
}

.owl1 .owl-nav::after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 1.5px);
width: 5px;
height: 1px;
background-color: var(--hoverC2);
opacity: 0.5;
pointer-events: none;
}
.owl-carousel.owl1 .owl-nav button.owl-prev::before, .owl-carousel.owl1 .owl-nav button.owl-next::before {
content: "";
position: absolute;
top: calc(50% - 0.5px);
width: 0;
height: 1px;
background-color: var(--mainC);
opacity: 1;
pointer-events: none;
transition: 0.2s;  
}
.owl-carousel.owl1 .owl-nav button.owl-prev::before {right: -12px;}
.owl-carousel.owl1 .owl-nav button.owl-next::before {left: -12px;}
.owl-carousel.owl1 .owl-nav button.owl-prev:hover::before, .owl-carousel.owl1 .owl-nav button.owl-next:hover::before {width: 20px;}
}

.owl-carousel.owl-c1 .owl-nav {
    width: 150px;
    height: 35px;
    margin: 2rem 0 0;
    position: relative;
    bottom: initial;
    left: initial;
}
.owl-carousel.owl-c1 .owl-nav::before {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% - 5px);
    width: 10px;
    height: 1px;
    background-color: var(--hoverC2);
}
.owl-carousel.owl-c1 .owl-nav button.owl-prev, .owl-carousel.owl-c1 .owl-nav button.owl-next {
    width: 35px;
    height: 35px;
    border: 1px solid var(--bs-gray-200);
}

.owl-carousel.owl-c1 .owl-nav button.owl-prev::before, .owl-carousel.owl-c1 .owl-nav button.owl-next::before {
content: "";
position: absolute;
top: 16px;
width: 0;
height: 1px;
background-color: var(--hoverC2);
transition: 0.2s;
}
.owl-carousel.owl-c1 .owl-nav button.owl-prev::before {
    right: -31px;
}
.owl-carousel.owl-c1 .owl-nav button.owl-next::before {
    left:-31px;
}
.owl-carousel.owl-c1 .owl-nav button.owl-prev:hover::before, .owl-carousel.owl-c1 .owl-nav button.owl-next:hover::before {
    width: 39px;
}

.owl-carousel.owl-c1 .owl-nav button.owl-prev::after, .owl-carousel.owl-c1 .owl-nav button.owl-next::after {
    top: calc(50% - 4.5px);
    width: 9px;
    height: 9px;
}
.owl-carousel.owl-c1 .owl-nav button.owl-prev::after {right: calc(50% - 6.5px);}
.owl-carousel.owl-c1 .owl-nav button.owl-next::after {left: calc(50% - 6.5px);}
@media (max-width: 1199px) {
.owl-carousel.owl-c1 .owl-nav {
    margin: 1.5rem auto 0;
}
}

/* ▼ .owl-dots */
.owl-dots {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
position: absolute;
bottom: 1.65rem;
left: 30px;
width: calc(100% - 60px);
height: auto;
}
.owl-dots .owl-dot span {
background-color: var(--hoverC1);
display: flex;
width: 5px;
height: 5px;
box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--hoverC2);
border-radius: var(--b-radius);
margin: 7.5px;
border: none;
transition: 0.5s;
opacity: 0.75;
}
.owl-dots .owl-dot.active span {
width: 23px;
height: 5px;
border-radius: var(--bs-border-radius);
background-color: var(--mainC);
border: none;
opacity: 1;
}

@media (min-width: 768px) {
.owl1 .owl-dots {
padding-top: 0;
position: absolute;
top: -51px;
right: -3.5px;
}
}

/* ▼ Youtube */
.videobox {
position: relative;
height: 0; 
overflow: hidden; 
max-width: 100%; 
padding-bottom: 56.25%;
}
.videobox iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ▼ Website fixed settings */
.hidden {display: none !important;}
.padding1 {padding-top: 5rem;padding-bottom: 4.75rem;}

.title {
    font-family: sans-serif;
    color: var(--wordB);
}
.title h3 {}
.title p {
    font-size: 0.875rem;
    opacity: 0.65;
    padding: 0 0 3.75rem 0;
    margin: 0;
    position: relative;
}
.title p::after {
    content: "";
    position: absolute;
    bottom: 2.5rem;
    left: 0;
    width: 50px;
    height: 1px;
    background-color: var(--wordB);
}

.title.tCenter {
    width: 100%;
    text-align: center;
}
.title.tCenter p {}
.title.tCenter p::after {width: 30px;left: calc(50% - 15px);}
@media (max-width: 1199px) {
.title {
text-align: center;
}
.title p::after {width: 30px;left: calc(50% - 15px);}
}


.IMG {
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: 0.25s;
    position: relative;
}
/* .IMG::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--bs-gray-300);
    content: "\f302";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 0.35s;
} */
img.nopic {
    display: flex;
    width: 100px;
    opacity: 0.52;
    pointer-events: none;
}
.IMG span {
    display: flex;
    width: 100%;
    min-height: 80px;
    transition: transform 0.35s;
    position: relative;
    z-index: 3;
}
.item:hover .IMG::after, .item:hover .IMG span {
    transform: scale(1.1);
}
.item img {transition: transform 0.35s;}
.item:hover img {transform: scale(1.1);}

.TXT h4 {
    font-size: 1.25rem;
    line-height: 1.65;
    font-weight: 600;
    margin: 0;
    color: var(--wordB);
    transition: 0.35s;
}
.item:hover .TXT h4 {color: var(--mainC);}

@media (max-width: 1199px) {
.TXT h4 {
    font-size: 1rem;
}
}

.moreInfo > a {
display: flex;
width: 200px;
height: 35px;
border: 1px solid rgb(255 255 255 / 47%);
border-radius: 26px;
position: relative;
}
.moreInfo > a::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
pointer-events: none;
background-color: var(--wordB);
border-radius: 35px;
transition: 0.25s;
opacity: 0.78;
}
.moreInfo:hover > a::after {
background-color: var(--mainC);
}
.moreInfo > a > span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
    font-size: 0.8rem;
letter-spacing: 1px;
line-height: 1;
color: var(--wordW);
transition: 0.25s;
}
.moreInfo:hover > a > span {
color: #fff;
letter-spacing: 1.85px;
}
.moreInfo > a > span::after {
content: "MORE INFO";
position: absolute;
top: 4px;
left: 0;
width: 100%;
height: calc(100% - 4px);
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}

.s_more {
    display: inline-block;
    color: var(--bs-gray-500);
    margin-top: 0;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: 1.5px;
    position: relative;
    padding-left: 40px;
    transition: 0.2s;
}
.s_more:hover, .item:hover .s_more {
color: var(--mainC);
padding-left: 60px;
}
.s_more::before {
content: "";
position: absolute;
bottom: 5px;
left: 0;
background-color: var(--bs-gray-500);
width: 25px;
height: 1px;
transition: 0.2s;
}
.s_more:hover::before, .item:hover .s_more::before {
width: 45px;
background-color: var(--mainC);
}
.s_more::after {
content: "";
position: absolute;
bottom: 7px;
left: 19px;
width: 5px;
height: 1px;
background-color: var(--bs-gray-500);
transform: rotate3d(1, 1, 1, 45deg);
transition: 0.2s;
}
.s_more:hover::after, .item:hover .s_more::after {
left: 39px;
background-color: var(--mainC);
}

.s_more2 {
display: flex;
color: var(--bs-gray-500);
margin-top: 0;
font-family: sans-serif;
font-size: 0.75rem;
line-height: 1;
letter-spacing: 0.5px;
border: 1px solid var(--lineC);
border-radius: 12px;
padding: 4.5px 35px 4px;
transition: 0.25s;
}
.s_more2:hover, .item:hover .s_more2 {
color: #fff;
background: var(--mainC);
border-color: var(--mainC);
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--b-radius);
    border: 1px solid var(--transparentW2);
    position: relative;
    z-index: 1;
    transition: 0.25s;
}
.icon::after {
    content: "";
    position: absolute;
    top: calc(50% - 11px);
    left: calc(50% - 11px);
    width: 22px;
    height: 22px;
    border-radius: var(--b-radius);
    background-color: var(--transparentW7);
    z-index: -1;
    pointer-events: none;
    transition: 0.25s;
}
p:hover > .icon::after, a:hover > .icon::after, button:hover > .icon::after {background-color: #fff;}
.icon > i {
font-size: 0.75rem;
color: var(--footerC);
opacity: 0.82;
transition: 0.25s;
}
p:hover > .icon > i, a:hover > .icon > i, button:hover > .icon > i {color: var(--mainC);opacity: 1;}

.inputImg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.inputImg > .form-control {}
.inputImg > .Img {}
.inputImg > .Img > img {}
/* -- */

body {
	overflow-x: hidden;
}
body > section {
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
#header {
    width: 100%;
    background-color: rgba(var(--header-rgb), 0.92);
    position: relative;
}
#header.fixed-top {
position: fixed;
  animation: slideInDown;
  animation-duration: 2s;
}
#header .container-fluid {
	position: relative;
    z-index: 3;
}
#header .container-fluid > .wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: var(--mB-height);
}

#header #afterLogIn {
    display: flex;
    justify-content: flex-end;
    padding-top: 15px;
}
#afterLogIn.open {
    z-index: 9;
}
#afterLogIn > div {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}
#afterLogIn > div a {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
#menberMENU {position: relative;}
#menberMENU > .dropdown-menu {left: initial;right: 0;}
#afterLogIn .logOut > a {
width: 51px;
justify-content: center;
background-color: var(--hoverC1);
color: var(--wordW);
border-radius: 13px;
margin-left: 0.75rem;
}
#afterLogIn .logOut:hover > a {background-color: var(--mainC);color: #fff;}

#afterLogIn_s {
display: none;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-size: 0.8rem;
}
#afterLogIn_s .accountName {width: 100%;}
#afterLogIn_s .accountName > a {
display: flex;
flex-direction: column;
align-items: center;
}
#afterLogIn_s .logOut {margin: 10px 7.5px 0;}
#afterLogIn_s .logOut > a {
    display: flex;
    justify-content: center;
    background-color: var(--hoverC1);
    color: var(--wordW);
    border-radius: 13px;
    padding: 3px 28px 2px;
}
#afterLogIn_s .logOut:hover > a {background-color: var(--mainC);color: #fff;}

#logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 250px;
    height: auto;
    font-size: 0;
    margin: 0;
}

#menuBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 550px);
    height: var(--mB-height);
}
#menuBox ul {
    list-style: none;
    width: 100%;
}

#menuBox .nav-item {flex-direction: column;}
#menuBox .navbar-nav > .nav-item.dropdown > .d-lgShoW {display: none;}
#menuBox .navbar-nav > .nav-item.dropdown > .d-lgNone {display: flex;}

#menuBox .navbar-nav > .nav-item > .nav-link, #menuBox .nav-item {
    height: var(--mB-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: initial;
}
#menuBox .navbar-nav > .nav-item > .nav-link {
    flex-direction: column;
}
#menuBox .nav-link > span {}
#menuBox .nav-link > small {
    display: block;
    font-family: sans-serif;
    letter-spacing: 0.25px;
    opacity: 0.75;
    padding-top: 0.25rem;
}


#menuBox .dropdown-menu .nav-item {
    height: auto;
}
#menuBox .navbar-nav .nav-item .dropdown-menu {
    position: relative;
    margin-top: 0;
    padding: 0;
 /*    animation: fadeInDown;
    animation-duration: 0.5s; */
    background-color: transparent;
    border: none;
}
/* .dropdown-menu.show {
   animation: fadeInDown;
    animation-duration: 0.5s;
} */

#menuBox .dropdown-item:focus, .dropdown-item:hover {
    color: var(--mainC);
    background-color: transparent;
}

#menuBox .navbar {
    position: initial;
    padding: 0;
}
#menuBox .dropdown-menu .nav-item {
    height: auto;
    display: flex;
    flex-direction: row;
}
#menuBox .dropdown-menu .nav-item > .dropdown-item:nth-child(1) {width: calc(100% - 50px);}
#menuBox .dropdown-menu .nav-item > .dropdown-item:nth-child(2) {
    width: 50px;
    text-align: right;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 992px) {
#menuBox .navbar-nav > .nav-item.dropdown > .d-lgShoW {display: flex;}
#menuBox .navbar-nav > .nav-item.dropdown > .d-lgNone {display: none;}   
#menuBox .navbar-nav .dropdown-menu{
        position: initial;
    }

/*       .dropdown-submenu.show {
    display: none;
  } */
#menuBox .navbar-nav .nav-item  .dropdown-menu.nested-dropdown-menu {
    padding: 40px 100px 30px;
}

#menuBox #dropdown-menu-1 + .dropdown-menu {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: none;
    background-color: rgba(var(--header-rgb), 0.49);
    box-shadow: 0 0 170px 0 rgba(var(--header-rgb), 0.72) inset, 0 0 0 2px rgba(var(--header-rgb), 0.18) inset;
    overflow: auto;
    position: absolute;
    top: var(--headerH);
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: 0.35s;
}
#menuBox #dropdown-menu-1 + .dropdown-menu.open {
    pointer-events: auto;
    opacity: 1;
}
#menuBox #dropdown-submenu-2, #menuBox #dropdown-submenu-3 + .dropdown-menu {
/*     display: block; */
    width: 100%;
}
/* .dropdown-menu > li:hover > .dropdown-submenu {
display: block;
} */
.nested-dropdown-menu > li {
    width: 180px;
}
.nested-dropdown-menu > li > a {font-weight: 600;}
.nested-dropdown-menu > li > a {
    padding-left: 0;
}
}

@media (min-width: 1200px) {
#header {
    box-shadow: var(--bs-box-shadow-sm);
    background-color: transparent;
}
#header::before {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 1px;
    background-color: #fff;
    opacity: 0.62;
    pointer-events: none;
}
#header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 2px);
    background-color: rgba(var(--header-rgb), 0.49);
    box-shadow: 0 0 140px 0 rgba(var(--header-rgb), 0.92) inset, 0 0 0 2px rgba(var(--header-rgb), 0.18) inset;
    backdrop-filter: blur(5px);
    pointer-events: none;
}
}

@media (max-width: 1840px) {
#logo {
    width: 200px;
    position: relative;
    bottom: 7px;
}
#menuBox {width: calc(100% - 450px);}
.nav-link {font-size: 0.975rem;}
}

@media (max-width: 1199px) {
#header .container-fluid > .wrap {
    justify-content: end;
}

#logo {
    position: absolute;
    left: 30px;
    bottom: 11px;
}
#menuBox {
    width: auto;
    height: calc(var(--mB-height) / 2);
    margin-left: 1.5rem;
}

#menuBox .navbar-collapse {
    position: absolute;
    top: var(--headerH);
    left: 0px;
    width: 100%;
    background-color: rgba(var(--header-rgb), 0.92);
    padding-bottom: 45px;
} 
#menuBox .navbar-toggler {
    padding: 0;
    border: none;
}
#menuBox .navbar-collapse > .navbar-nav {padding: 27.5px 0 0;}
#menuBox .navbar-nav > .nav-item > .nav-link, .nav-item {
    height: auto;
    justify-content: flex-start;
    width: 100%;

}
#menuBox .navbar-nav > .nav-item > .nav-link {
    padding: 7.5px 15px;
    justify-content: space-between;
}
#menuBox .navbar-nav .nav-item .dropdown-menu {
    width: 100%;
    padding: 7.5px 0 7.5px 15px;
}
#menuBox .dropdown-menu .nav-item > .dropdown-item:nth-child(2) {
    padding-right: 15px;
}
}

@media (max-width: 767px) {
#header .container-fluid > .wrap {
    flex-direction: column;
    height: var(--headerH_s);
}
#logo {left: 15px;}
#menuBox .navbar-collapse {
    top: calc(var(--headerH_s) - 1px);
} 
}

/* -- .fixedMenu */
.fixedMenu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 300px;
    height: var(--mB-height);
}
.fixedMenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 86px;
    height: 100%;
    position: relative;
}
.fixedMenu a:hover {}
.fixedMenu a > .icon {border-color: transparent;}
.fixedMenu a > .icon::after {display: none;}
.fixedMenu a > .icon > i {
    font-size: 0.975rem;
    padding: 2px 0 0 0;
}
.fixedMenu a > span {font-size: 0.8rem;}
.fixedMenu a.link-icon-tight {
	justify-content: flex-start;
	gap: 0.25rem;
	width: auto;
}

.fixedMenu > div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.25rem;
}
.fixedMenu > div:first-child {margin-left: 0;}
.fixedMenu .logIn {height: calc(var(--mB-height) / 2);}

#searchBox, #languageBox, #shoppingCart {
    height: 100%;
    position: relative;
}
#searchBox > a, #languageBox > a, #shoppingCart > a {width: auto;}

#shoppingCart {}
#shoppingCart > a > .icon {}
#shoppingCart > a > .num {
    font-family: sans-serif;
    line-height: 28.5px;
    text-align: center;
    display: inline-block;
    width: 28px;
    height: 28px;
    color: #fff;
    background-color: var(--focusC);
    border-radius: 50%;
    position: relative;
    z-index: 3;
}

#languageBox.open {z-index: 9;}
#languageBox .dropdown-menu {
    border: none;
    top: calc(var(--mB-height) - 8px);
    left: initial;
    right: 0;
}
#languageBox .dropdown-menu a {
    width: 100%;
    display: block;
    text-align: center;
}
#languageBox a > i {
    font-size: 0.65rem;
    padding: 0 0 2px 3px;
}

@media (max-width: 1199px) {

}

@media (max-width: 767px) {
#header #afterLogIn, .fixedMenu .logIn > a > .txt {display: none;}
.fixedMenu {
    margin: 0.75rem 0 0;
    width: 100%;
    height: calc(var(--mB-height) / 2);
    align-items: end;
}
.fixedMenu a {width: auto;}
#languageBox .dropdown-menu {
    top: calc(var(--mB-height) / 2);
}
#shoppingCart {
    height: auto;
    margin: 0;
    position: absolute;
    bottom: 21px;
    right: 74px;
}
#shoppingCart::after {
    content: "";
    position: absolute;
    top: 7px;
    right: -0.785rem;
    width: 1px;
    height: 15px;
    background-color: var(--bs-gray-500);
}
#afterLogIn_s {
    display: flex;
    padding: 1rem 0 1.5rem;
}
}

/* .modal - member */
.modal.m-M .modal-content {
    background-color: var(--wordW);
}
.modal.m-M .btn-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background-image: none;
    background-color: var(--wordW);
    width: 30px;
    height: 30px;
    border-radius: var(--b-radius);
    font-size: 0;
    transition: 0.25s;
}
.modal.m-M .btn-close::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f057";
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--bs-gray-900);
    transition: 0.25s;
}
.modal.m-M .btn-close:hover {
    background-color: #fff;
}
.modal.m-M .btn-close:hover::before {
    color: var(--mainC);
}

.modal.m-M .modal-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    padding-top: 0;
}
.modal.m-M .modal-footer > .btn {}
.modal.m-M .modal-footer > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--wordW);
    padding-top: 0.5rem;
    position: relative;
}
.modal.m-M .modal-footer > div::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% - 0.5px);
    width: 1px;
    height: 10px;
    background-color: var(--bs-body-color);
    opacity: 0.35;
}
.modal.m-M .modal-footer > div > a {
    display: flex;
    margin: 0 1rem;
    font-weight: 600;
}

/* .modal - search */
.modal.m-S {}
.modal.m-S .modal-dialog {
    max-width: 100%;
}
.modal.m-S .modal-dialog .modal-content {
    width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: var(--bs-modal-padding);
    border-color: var(--bs-gray-200);
}
.modal.m-S .form-control {
    width: calc(100% - 120px);
    height: 50px;
    border: none;
}
.modal.m-S .modal-content > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 105px;
    position: relative;
}
.modal.m-S .modal-content > div::after {
    content: "";
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 0.5px);
    width: 1px;
    height: 10px;
    background-color: var(--bs-gray-200);
}
.modal.m-S .btn {
    width: 50px;
    height: 50px;
    border: none;
}
.modal.m-S .btn.btn-primary {
}
.modal.m-S .btn.btn-close {
}

@media (max-width: 1199px) {
.modal.m-S .modal-dialog .modal-content {
    width: 75%;
}    
}

@media (max-width: 767px) {
.modal.m-S .modal-dialog .modal-content {
    width: calc(100% - 30px);
}
}

@media (max-width: 480px) {

.modal.m-S .form-control {
    width: 100%;
        background-color: transparent;
    margin-bottom: 0.5rem;
}
.modal.m-S .modal-content > div {
    width: 100%;
    border-top: 1px solid var(--bs-gray-200);
    padding-top: 0.25rem;
}
.modal.m-S .btn {
    width: 48%;
    height: auto;
}
}
/* -- banner */
#banner {
display: flex;
width: 100%;
}
#banner .owl-nav {
    bottom: calc((100% - 125px) / 2);
    opacity: 0;
    transition: opacity 0.25s;
}
#banner:hover .owl-nav {opacity: 1;}
#banner .imgTxt {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
#banner .imgTxt img {display: flex;width: 100%;}
#banner .imgTxt .img-w768 {display: flex;width: 100%;}
#banner .imgTxt .img-w767 {display: none;width: 100%;}

#banner .imgTxt > .txt {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 18% 6.5%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: sans-serif;
    background-color: rgb(0 0 0 / 8%);
}
#banner .imgTxt > .txt > h4 {
    font-size: 3.5rem;
    font-weight: bolder;
    letter-spacing: 1px;
    /* -webkit-text-stroke: 2px #fff; */
    color: #fff;
    text-shadow: 0 55px 29px rgb(33 37 41 / 31%);
    padding: 0 0 0 5px;
    position: relative;
}
#banner .imgTxt > .txt > p {
    font-size: 1rem;
    line-height: 1.65;
    color: #fff;
    max-width: 720px;
    padding-bottom: 1rem;
}
#banner .imgTxt > .txt > .moreInfo {
}

@media (max-width: 1400px) {
#banner .imgTxt > .txt {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-family: sans-serif;
    padding: 1.85rem 30px 3.65rem;
    background-color: #000;
}
/* 
#banner .owl-dots {
    position: relative;
    bottom: initial;
    left: initial;
    width: 100%;
    padding: 0.5rem 1rem 1rem;
}
#banner .owl-dots {background-color: #000;} 
*/
}

@media (max-width: 991px) {
#banner .imgTxt > .txt > h4 {
    font-size: 1.85rem;
    text-align: center;
}
#banner .imgTxt > .txt > p {
    font-size: 0.875rem;
    max-width: initial;
    padding-bottom: 0.5rem;
    text-align: center;
}  
#banner .moreInfo > a {
    margin: 0 auto;
}
}

@media (max-width: 767px) {
#banner .imgTxt .img-w768 {display: none;}
#banner .imgTxt .img-w767 {display: flex;}
}

/* -- .breadcrumbBox */
.breadcrumbBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 2.5rem 0 0;
}
.breadcrumbBox .breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-gray-600);
    --bs-breadcrumb-item-active-color: var(--bs-gray-700);
    margin-bottom: 0;
    font-size: 0.75rem;
}
.breadcrumbBox .breadcrumb .breadcrumb-item {}
.breadcrumbBox .breadcrumb .breadcrumb-item > a {
    color: var(--bs-gray-600);
}
.breadcrumbBox .breadcrumb .breadcrumb-item:hover > a {
    color: var(--mainC);
}
.breadcrumbBox .breadcrumb-item+.breadcrumb-item::before {
    color: var(--bs-gray-500);
}
.breadcrumbBox .breadcrumb .breadcrumb-item > a > span {}



/* -- footer */
#footer {
    background: url('../images/footer/bg.jpg') 50% 50% / cover no-repeat;
    position: relative;
}
#footer::after, #footer .f_menu.f_menu1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    backdrop-filter: blur(5px);
}
#footer::after {
    background-color: var(--footerC);
    opacity: 0.88;
}
#footer .f_menu.f_menu1::after {
    background-color: var(--hoverC2);
    opacity: 0.38;
}
#footer > div {
    display: flex;
    align-items: flex-end;
    align-content: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}
#footer, #footer a {color: var(--wordW);}
#footer a:hover {color: #fff;}
#footer ul {list-style: none;}
#footer .f_menu {}
#footer .f_menu.f_menu1 {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 5rem;
    padding: 2.5rem 0 4.75rem;
    border-bottom: 13px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 3;
}

#footer .f_menu.f_menu1 > div {
    display: flex;
    align-items: flex-start;
    align-content: stretch;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}
#footer .f_menu.f_menu1 .menu {
    display: flex;
    align-items: flex-start;
    justify-content: center;
margin: 0 -2.5rem;
}
#footer .f_menu.f_menu1 .menu > li {
    margin: 3.5rem 2.5rem 0;
}

#footer .f_menu.f_menu2 {}


#footer .f_menu .menu {
    margin-bottom: 0;
    padding-left: 5rem;
}
#footer .f_menu .menu:first-child {padding-left: 0;}



#footer .f_menu .menu li {}
#footer .f_menu .menu li a {

}

#footer .f_menu .menu > li {}
#footer .f_menu .menu > li > a {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
}

#footer .f_menu.f_menu2 .menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
#footer .f_menu.f_menu2 .menu > li {
    padding-left: 2.5rem;
    position: relative;
}
#footer .f_menu.f_menu2 .menu > li::before {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    left: 19px;
    width: 1px;
    height: 16px;
    background-color: var(--transparentW3);
    transform: rotate(30deg);
    pointer-events: none;
}
#footer .f_menu.f_menu2 .menu > li:first-child {padding-left: 0;}
#footer .f_menu.f_menu2 .menu > li:first-child::before {display: none;}

#footer .f_menu .submenu {
    padding-top: 2.14rem;
    padding-left: 0;
}
#footer .f_menu .submenu > li {
    padding: 0 0 1.07rem 1.125rem;
    color: rgb(255 255 255 / 68%);
    position: relative;
}
#footer .f_menu .submenu > li:last-child {padding-bottom: 0;}
#footer .f_menu .submenu > li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 0.35rem;
    height: 1px;
    background-color: var(--wordW);
    pointer-events: none;
    transition: 0.25s;
}
#footer .f_menu .submenu > li:hover::before {width: 0.75rem;background-color: #fff;}
#footer .f_menu .submenu > li > a {

}

#footer .f-company {width: 50%;}
#footer .f-company h2 {
    font-size: 1.285rem;
}
#footer .f-company .taxID {}
.companyDate {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.companyDate > p {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row;
    width: calc((100% - 1rem) / 2);
    margin: 1rem 0 0;
    padding-right: 1rem;
}
.companyDate > p:last-child {margin-bottom: 0;}
.companyDate > p > a {
    display: flex;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-align: justify;
    padding: 0.15rem 0 0 0.5rem;
    width: calc(100% - 28px);
}
#footer .f-webInfo {
    width: 50%;
}
#footer .f-webInfo .f_menu.f_menu2 {}
#footer .f-webInfo .copyrightBox {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-top: 1.5rem;
    padding-top: 1.85rem;
    border-top: 1px solid var(--transparentW2);
}

.socialMedia {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
}
.socialMedia > a {
    display: flex;
    width: 25px;
    height: 25px;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
    transition: background 0.25s;
}
.socialMedia > a:first-child {margin-left: 0;}
.socialMedia .sM1 {background-image: url('../images/socialMedia/FB.svg');}
.socialMedia .sM2 {background-image: url('../images/socialMedia/Instagram.svg');}
.socialMedia .sM3 {background-image: url('../images/socialMedia/LINE.svg');}
.socialMedia .sM4 {background-image: url('../images/socialMedia/YT.svg');}
.socialMedia .sM5 {background-image: url('../images/socialMedia/Twitter.svg');}
.socialMedia .sM6 {background-image: url('../images/socialMedia/WeChat.svg');}
.socialMedia .sM7 {background-image: url('../images/socialMedia/WhatsApp.svg');}
.socialMedia .sM8 {background-image: url('../images/socialMedia/VK.svg');}
.socialMedia .sM9 {background-image: url('../images/socialMedia/Rutube.svg');}

.socialMedia .sM1:hover {background-image: url('../images/socialMedia/FBo.svg');}
.socialMedia .sM2:hover {background-image: url('../images/socialMedia/Instagramo.svg');}
.socialMedia .sM3:hover {background-image: url('../images/socialMedia/LINEo.svg');}
.socialMedia .sM4:hover {background-image: url('../images/socialMedia/YTo.svg');}
.socialMedia .sM5:hover {background-image: url('../images/socialMedia/Twittero.svg');}
.socialMedia .sM6:hover {background-image: url('../images/socialMedia/WeChato.svg');}
.socialMedia .sM7:hover {background-image: url('../images/socialMedia/WhatsAppo.svg');}
.socialMedia .sM8:hover {background-image: url('../images/socialMedia/VKo.svg');}
.socialMedia .sM9:hover {background-image: url('../images/socialMedia/Rutubeo.svg');}

#footer .copyright {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
     margin: 0.75rem 0 0;
}
#footer .copyright > p {
    margin: 0.25rem 0 0;
}
.copyright .web_author {
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    margin: 0;
}
.web-home .copyright span.web_author {display: none;}
.web-insidePage .copyright h1.web_author {display: none;}

#footer .copyright > p > a {
    display: inline-block;
    padding-left: 1.25rem;
}

@media (min-width: 1200px) {
    #footer .f_menu.f_menu1 + div {
    padding-top: 0;
}
}

@media (max-width: 1199px) {
#footer .f_menu.f_menu1, #footer .f_menu.f_menu2 {
    display: none;
}
#footer .f-company {
    width: 100%;
    text-align: center;
}
#footer .f-company h3 {
    font-size: 1.45rem;
}
.companyDate {
    justify-content: center;
    position: relative;
}
.companyDate > p {
    width: auto;
    justify-content: center;
    padding: 0 1rem;
}
#footer .f-webInfo {
    width: 100%;
}
#footer .f-webInfo .copyrightBox {
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    padding-top: 1.25rem;
}
.socialMedia {
    padding-top: 1.25rem;
}
#footer .copyright {
    justify-content: center;
}
#footer .copyright > p {
    width: 100%;
    margin: 0;
}
#footer .copyright > p > a {
    display: block;
    line-height: 1;
    padding-left: 0;
    text-align: center;
    margin: 0.75rem 0 0;
}
}

@media (max-width: 540px) {
#footer .f-company h3 {
    font-size: 1.25rem;
}
.companyDate {
    flex-direction: column;
}
.companyDate > p {
    padding: 0;
}
}

/* ▼ */
/* --.navbar 共用設定 */
.navbar-toggler:focus {box-shadow: none;}
.navbar .nav-link {
    margin: 0;
    position: relative;
}
.navbar .nav-link .txt {
    font-size: 1rem;
    font-weight: 500;
}
.navbar .nav-link .dropdownBtn {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    transition: 0.5s;
}

.navbar .nav-link:hover, .navbar .nav-link.open {
    color: var(--mainC);
}
.navbar .nav-link .dropdownBtn::before, .navbar .nav-link .dropdownBtn::after {
    content: "";
    position: absolute;
    background-color: var(--bs-gray-400);
    transition: 0.5s;
}
.navbar .nav-link .dropdownBtn::before {
    top: calc(50% - 3.5px);
    right: 15px;
    width: 1px;
    height: 7px;
}
.navbar .nav-link .dropdownBtn::after {
    top: calc(50% - 0.5px);
    right: 12px;
    width: 7px;
    height: 1px;
}
.navbar .nav-link.open .dropdownBtn::before, .navbar .nav-link.open .dropdownBtn::after {background-color: var(--mainC);}
.navbar .nav-link.open .dropdownBtn::before {opacity: 0;}

/* ======== */
/* #sideBarBox */
#sideBarBox {}
#sideBarBox h3 {
    font-size: 1.25rem;
    text-align: center;
}
#sideBarBox .navbar-toggler {
    width: 100%;
    border-radius: 0;
    padding: 0.5rem 2rem 0.5rem 1rem;
    background-color: var(--mainC);
    border-color: var(--mainC);
    color: #fff;
    transition: 0.35s;
    position: relative;
}
#sideBarBox .navbar-toggler:focus {
    box-shadow: none;
}
#sideBarBox .navbar-toggler.collapsed {
    border-color: var(--hoverC2);
    background-color: transparent;
    color: var(--hoverC1);
}

#sideBarBox .navbar-toggler > h3 {
    margin: 0;
    font-size: 1rem;
    text-align: left;
}
#sideBarBox .navbar-toggler > .icon {
    position: absolute;
    top: calc(50% - 10px);
    right: 5px;
    width: 20px;
    height: 20px;
}
#sideBarBox .navbar-toggler > .icon.icon::after {
    top: calc(50% - 9px);
    left: calc(50% - 9px);
    width: 18px;
    height: 18px;
}
#sideBarBox .navbar-toggler > .icon > i {
    font-size: 0.5rem;
}
#sideBarBox .navbar-toggler.collapsed > .icon {
    transform: rotate(180deg);
}
#sideBarBox .navbar {
    padding: 0;
}
#sideBar .navbar-nav {
    flex-direction: column;
    width: 100%;
}
#sideBar .nav-item {
    
    margin: 0.25rem 0 0;
}
#sideBar .nav-link.mainM {
    border: var(--border1);
    padding-right: 1rem;
    padding-left: 1rem;
}
#sideBar .nav-link + .dropdown-menu {
    border-radius: 0;
    padding: 0;
    width: 100%;
}
#sideBar .nav-link + .dropdown-menu.ddM2 {
    border-bottom: var(--border1);
padding: 1rem 0;
}
#sideBar .nav-link.open + .dropdown-menu {}
#sideBar .nav-link + .dropdown-menu .nav-item {
    border: none;
    
    margin: 0;
}


#sideBar .dropdown-menu.ddM2 .nav-link {
    padding: 0.5rem 0.5rem 0.5rem 1.95rem;
}
#sideBar .dropdown-menu.ddM3 {}

#sideBar .dropdown-menu.ddM3 .nav-link {
padding: 0.5rem 0.5rem 0.5rem 2.95rem;
}

@media (min-width: 992px) {
#sideBar .navbar-nav .dropdown-menu {position: static;}
}

@media (max-width: 991px) {
#sideBarBox > h3 {display: none;}
}

/* ======== */
/* -- #menuBox1 */
#menuBox1 {display: none;}
#menuBox1 .navbar {list-style: none;}
#menuBox1 .dropdown-menu.open {
    display: block;
    background-color: transparent;
}

@media (min-width: 1200px) {
#menuBox1 {
    width: calc(100% - (250px + 300px + 56px));
    height: var(--mB-height);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}    
#menuBox1 .navbar {
height: 100%;
padding: 0;
    position: initial;
}
#menuBox1 .navbar > .nav-item {height: 100%;position: initial;}
#menuBox1 .nav-item {}

#menuBox1 .nav-link {}
#menuBox1 .nav-link .txt {}
#menuBox1 .nav-link.mainM {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2rem 0 0;
    height: 100%;
}
#menuBox1 .nav-link.mainM .txt {}
#menuBox1 .nav-link.mainM .txt_s {opacity: 0.82;}
#menuBox1 .navbar .nav-link .dropdownBtn.ddBtn1::before, 
#menuBox1 .navbar .nav-link .dropdownBtn.ddBtn1::after,
#menuBox1 .navbar .nav-link .dropdownBtn.ddBtn3::before, 
#menuBox1 .navbar .nav-link .dropdownBtn.ddBtn3::after {display: none;}

#menuBox1 .navbar .nav-link .dropdownBtn {z-index: 6;}
#menuBox1 .navbar .nav-link.mainM .dropdownBtn.ddBtn1 + .dropdownBtn.ddBtn1 {z-index: 3;}

#menuBox1 .dropdown-menu.ddM2 {
    width: 100%;
    height: auto;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    z-index: -9;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: 0;
    padding: 30px 30px;
    pointer-events: none;
    opacity: 0;
    transition: 0.5s;
}
.fixed-top #menuBox1 .dropdown-menu.ddM2 {}
#menuBox1 .dropdown-menu.ddM2 {
color: var(--wordB);
}
#menuBox1 .dropdown-menu.ddM2.open {
    top: calc(100% - 1px);
    pointer-events: auto;
    opacity: 1;
    z-index: 3;
}
#menuBox1 .dropdown-menu.ddM3 {position: relative;}

#menuBox1 .dropdownBtn.ddBtn1 {}
#menuBox1 .dropdownBtn.ddBtn2 {}
#menuBox1 .dropdownBtn.ddBtn3 {}

#menuBox1 .dropdown-menu.ddM2 > .nav-item {
    padding: 0 1rem;
    position: relative;
    z-index: 3;
    width: calc(100% / 8);
}
#menuBox1 .dropdown-menu.ddM3 > .nav-item {
    padding: 0 0 0 1.95rem;
}

#menuBox1 .dropdown-menu.ddM4 {position: relative;}
#menuBox1 .dropdown-menu.ddM4 > .nav-item {
    padding: 0 0 0 1.95rem;
}
}

@media (min-width: 1200px) {
#menuBox1 .dropdown-menu.ddM2::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 1px);
    background-color: #fff;
    pointer-events: none;
}
.fixed-top #menuBox1 .dropdown-menu.ddM2::after {
    background-color: rgba(var(--header-rgb), 0.49);
    box-shadow: 0 0 140px 0 rgba(var(--header-rgb), 0.92) inset, 0 0 0 2px rgba(var(--header-rgb), 0.18) inset;
    backdrop-filter: blur(5px);
}
}

@media (min-width: 1401px) {
#menuBox1 .dropdown-menu.ddM2 {
    padding: 40px 40px;
}
}

@media (max-width: 1840px) {
#menuBox1 {
    width: calc(100% - (200px + 300px + 56px));
} 
#menuBox1 .nav-link.mainM {
    padding: 0 1rem 0 0;
}
}

/* ======== */
/* -- #menuBox2 */
#menuBox2 {
    height: var(--mB-height);
}
#menuBox2 .navbar {
    padding: 0;
    width: 56px;
    height: 100%;
    display: flex;
    justify-content: end;
}
#menuBox2 .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding: 0;
    border: none;    
}
#menuBox2 .offcanvas.offcanvas-end {border-left: none;}

@media (min-width: 1200px) {
}

@media (max-width: 480px) {
    #menuBox2 .offcanvas.offcanvas-end {width: 100%;}
}

/* ======== */
/* -- .mainContent */
.mainContent {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 2.5rem 0 5.5rem;
}
.mainContent > #sideBarBox {width: 22rem;}
.mainContent > #contentBox {
padding-left: 2.25rem;
flex: 1;
}

@media (min-width: 992px) {
#sideBarWrapper.leftHiddle {display: none;}  
.mainContent > #sideBarWrapper.leftHiddle + #contentBox {width: 100%;padding-left: 0;}
}

@media (max-width: 991px) {
.mainContent {flex-direction: column;}    
.mainContent > #sideBarBox {width: 100%;padding: 0 0 2.25rem;}
.mainContent > #contentBox {width: 100%;padding-left: 0;}

#sideBarWrapper.centerHiddle {display: none;} 
}

/* ======== */
/* --.web-insidePage h1 */
.h1-menu {
    width: 100%;
    border-bottom: 1px dashed var(--bs-gray-500);
    padding-bottom: 1rem;
    margin-bottom: 3.5rem;
}
.h1-menu > span {
    display: inline-block;
    font-size: 1.25rem;
    color: var(--bs-gray-600);
    position: relative;
}
.h1-menu > span::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--bs-gray-500);
    border-radius: 0 5px 0 0;
}

.h1-title {
    font-size: 1.85rem;
    line-height: 1.65;
    padding-bottom: 1rem;
}

/* ======== */
/* --#sideMenu(右側滾動選單) */
#sideMenu {
display: flex;
align-items: flex-end;
flex-direction: column;
position: fixed;
right: 10px;
top: 45%;
z-index: 99;
pointer-events:auto;
transform: translateX(0);
transition: 0.5s;
}
#sideMenu.hide {pointer-events: none;transform: translateX(120%);}
#sideMenu .item {
display: flex;
align-items: center;
justify-content: flex-start;
width: 50px;
height: 50px;
color: #fff;
overflow: hidden;
margin-top: 1px;
}
#sideMenu .item:hover {width:auto;}
#sideMenu .icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.25s;
}
#sideMenu .icon::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#sideMenu .item:hover .icon > i {color: #fff;}
#sideMenu .item:hover .icon::after {background-color: var(--mainC);}
#sideMenu .txt {
display: none;
justify-content: center;
align-items: center;
width: 0;
height: 50px;
padding-left: 10px;
position: relative;
right: -100px;
transition: 0.25s;
}
#sideMenu .item:hover .txt  {
width:auto;
right: initial;
}
/* ======== */
/* --#goTop */
#goTop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
width: 50px;
height: 50px;
color: var(--hoverC1);
background-color: var(--wordW);
border-radius: 50%;
padding: 1px 0 0 1px;
cursor: pointer;
position: fixed;
right: 10px;
bottom: 10px;
z-index: 99;
transition: 0.25s;
}
#goTop.hide {display: none;}
/* ======== */
/* --.fileDownload */
.fileDownload {}
.fileDownload .item {}
.fileDownload .item > a {}
.fileDownload .item > a > i {}
.fileDownload .item > a > span {padding: 0 0 0 0.5rem;}
/* ======== */
/* --.btnBox */
.btnBox {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
/* ======== */
/* --#galleryModal */
#galleryModal .modal-content {
background-color: transparent;
border: none;
border-radius: 0;
}
#galleryModal img {
background-color: var(--bs-gray-100);
border-radius: var(--bs-border-radius);
}
#galleryModal .btn-close {
margin: 0 0 0.5rem auto;
}
#galleryModal .carousel-caption {
position: relative;
right: initial;
bottom: initial;
left: initial;
}

#galleryModal .carousel-control-prev {left: -13%;}
#galleryModal .carousel-control-next {right: -13%;}

@media (min-width: 1200px) and (max-width: 1410px) {
#galleryModal .carousel-control-prev {left: 0;}
#galleryModal .carousel-control-next {right: 0;}
}

@media (max-width: 575px) {
#galleryModal .carousel-control-next, #galleryModal .carousel-control-prev {
top: initial;
bottom: -15%;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
width: 1.25rem;
height: 1.25rem;
}
#galleryModal .carousel-control-prev {
left: 35%;
}
#galleryModal .carousel-control-next {
right: 35%;
}
}
/* ======== */
/* --.accordion */
.faq-card {
border: var(--border1);
border-radius: var(--bs-border-radius);
margin-bottom: 0.5rem;
overflow: hidden;
}
.faq-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
padding: 1rem;
font-weight: 600;
color: var(--mainC);
text-align: left;
background: #fff;
border: 0;
}
.faq-btn.collapsed {color: var(--wordB);}
.faq-icon {transition: transform 0.25s ease;}
.faq-btn.collapsed .faq-icon::before {
content: "＋";
color: var(--bs-gray-400);
}
.faq-btn .faq-icon::before {
content: "－";
color: var(--mainC);
font-size: 0.75rem;
}
.faq-body {
padding: 1rem;
border-top: var(--border1);
background: #fafafa;
}
/* ======== */
/* -- 商品 */
.productInfo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}
.productInfo > .proIMG {
    width: 65%;
    max-width: 750px;
}
.productInfo > form {
    flex: 1;
}
.productInfo .name {}
.productInfo .no {
    font-size: 0.925rem;
    opacity: 0.75;
    margin: 0;
    padding: 0.5rem 0;
}

.discountTerms {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.discountTerms .item {
    border-radius: var(--bs-border-radius);
    border: var(--border1);
    padding: 0.25rem 0.75rem;
}

.spec {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.spec .item {
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  max-height: 0;
  opacity: 0;
}
.spec .item.active {
  display: block;
  max-height: 500px;
  opacity: 1;
}

.product img, .product video {
width: 100%;
height: auto;
/* height: 600px; */
object-fit: cover;
}
.product .carousel-inner {
overflow: hidden; /* 必須有，但不要設 pointer-events: none */
touch-action: pan-y; /* 允許水平滑動 */
}
.product .carousel-item {transition: transform 0.5s ease, opacity 0.5s ease;}
.thumb-wrapper {
  position: relative;
  margin-top: 12px;
}
.thumb-track {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
}
.thumb-track::-webkit-scrollbar { display: none; }
.thumb-item { flex: 0 0 auto; border: 2px solid transparent; cursor: pointer; }
.thumb-item.active { border-color: var(--mainC); }
.thumb-item img {
width: 120px;
height: 70px;
object-fit:cover;
display: block;
}
.thumb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
.thumb-arrow.prev { left: 0; }
.thumb-arrow.next { right: 0; }


.price {
font-family: sans-serif;
font-size: 0.875rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
flex-wrap: wrap;
padding-top: 0.5rem;
}
.price > div {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.75rem;
}
.price p {
line-height: 1;
font-weight: 600;}
.price p > span {}
.price .discount > p > span {font-size: 1.15rem;}
.price .original > p > span {font-size: 1.15rem;}
.price .bonus > p > span {}
.price .original {}
.price .discount {}

.productInfo .price {
        padding: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
}


.lineThrough::after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 0;
z-index: 3;
width: 100%;
height: 2px;
background-color: var(--focusC);
}
.purchasing {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0 0;
}
.purchasing .proSPEC {
display: flex;
flex-direction: column;
gap: 0.25rem;
width: 100%;
padding: 0 0 0.25rem;
}
.purchasing .proSPEC .form-select {
display: flex;
flex: 1;
}
.proQuantity {width: calc(90% - (136px + 0.25rem));}
.proQuantity .minusPlus {
display: flex;
align-items: center;
justify-content: flex-start;
}
.proQuantity .quantity {}
.proQuantity .quantity .form-control {
border-radius: 0;
text-align: center;
}
.proQuantity button {}
.proQuantity button.minus {
border-radius: var(--bs-btn-border-radius) 0 0 var(--bs-btn-border-radius);
border: var(--border1);
border-right: none;
}
.proQuantity button.plus {
border-radius: 0 var(--bs-btn-border-radius) var(--bs-btn-border-radius) 0;
border: var(--border1);
border-left: none;
}
.purchasing .btnBox {
    gap: 0.25rem;
    flex-wrap: wrap;
}
.purchasing .btnBox .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 38px;
}

@media (max-width: 1409px) {
.productInfo > .proIMG {
    width: 100%;
    max-width: initial;
}
.proQuantity {width: calc(100% - (136px + 0.5rem));}
.productInfo .proQuantity {width: 136px;}
}

/* ======== */
/* --#member */
#member {
    word-break: break-word;
/* padding: var(--padding3);
box-shadow: var(--boxShadow1);
border-radius: var(--bs-border-radius); */
}
#member.maxWidth {
max-width: 767px;
margin: 0 auto;
}
.checkBox {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
}

@media (max-width: 767px) {
.checkBox {
align-items: flex-start;
flex-direction: column;
gap: 0.25rem;
}
}

.addressBox {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.25rem;
}
.addressBox .form-select, .addressBox .form-control {
width: auto;
flex: 1;
}
.addressBox .form-control.address {width: 100%;flex: 1 1 100%;}

@media (max-width: 767px) {
.addressBox .form-control {width: 100%;flex: 1 1 100%;}
}

/* --.columnTable */
.columnTable {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}
.orderBox .order h5 {
    margin: 0;
    text-align: center;
}
.columnTable > div {
    border: var(--border1);
        display: flex;
    flex: 1 1 100%;
}
.columnTable .cT-title, .columnTable .cT-content {
    border-left: none;
    border-right: none;
}
.columnTable .cT-title {}
.columnTable .cT-content {
    flex-direction: column;
}
.columnTable .cT-title .item {}
.columnTable .cT-content .item {border-bottom: var(--border1);}
.columnTable .cT-content .item:last-child {border-bottom: none;}
.columnTable > div .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.columnTable .item > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex: 1 1 calc(53% / 4);
    padding: var(--table-padding);
}
.columnTable .item > div.proImage {flex: 0 0 16.5%;}
.columnTable .cT-content .item > div.proImage {
    padding: var(--table-padding) 0;
    align-items: flex-start;
}
.columnTable .IMG {border: var(--border1);}
.columnTable .item > div.proName {
    flex: 0 0 30.5%;
}
.columnTable .item > div.proSpec {}
.columnTable .item > div.quantity {}
.columnTable .item > div.amount {}
.columnTable .item > div.subtotal {}
.columnTable .cT-content .item > div > h5 {
    display: none;
    margin: 0 0.75rem 0 0;
}
.columnTable .cT-content .item > div > p, .columnTable .cT-content .item > div > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.columnTable .cT-content .item > div > div {flex-direction: column;}

.columnTable .cT-total {
    flex-direction: column;
    border-top: none;
    border-left: none;
    margin: 0.75rem 0 0;
}
.columnTable .cT-total > div {
    display: flex;
    align-items: stretch;
    justify-content: right;
}
.columnTable .cT-total > div > div {
    padding: var(--table-padding);
    border-top: var(--border1);
    border-left: var(--border1);
}
.columnTable .cT-total > div > div:nth-child(1) {
    width: calc(100% - 250px);
    display: flex;
    justify-content: flex-end;
}
.columnTable .cT-total > div > div:nth-child(2) {
    width: 250px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.columnTable .cT-total > div > div.totalAmount {color: var(--focusC);}

@media (max-width: 1409px) {
.columnTable .cT-title {
    display: none;
}
.columnTable .cT-content .item {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 15rem;
    flex: 1;
    position: relative;
    padding: var(--table-padding) 0;
}
.columnTable .cT-content .item > div {
    width: calc(100% - 265px);
    flex: 0;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--table-padding) 0;
}
.columnTable .cT-content .item > div.proImage {
    position: absolute;
    top: calc(var(--table-padding) * 2);
    left: 0;
    z-index: 3;
    width: 250px;
    padding: 0;
}
.columnTable .cT-content .item > div > h5 {display: inline-flex;}
.inquiry .columnTable .cT-content .item > div > h5 {min-width: 100px;}

.columnTable .cT-total > div > div:nth-child(1) {
    width: 122px;
    justify-content: center;
    text-align: center;
}
.columnTable .cT-total > div > div:nth-child(2) {
    width: calc(100% - 122px);
    justify-content: flex-start;
}
}

@media (max-width: 767px) {
.columnTable .cT-content .item > div {width: calc(100% - 165px);}
.columnTable .cT-content .item > div.proImage {width: 150px;}
}

@media (max-width: 540px) {
.columnTable .cT-total > div > div:nth-child(1) {width: 100px;}
.columnTable .cT-total > div > div:nth-child(2) {width: calc(100% - 100px);}
.columnTable .cT-content .item > div {
    width: calc(100% - 115px);
    flex-direction: column;
    align-items: flex-start;
}
.columnTable .cT-content .item > div.proImage {width: 100px;}
}

/* --.columnTable.cT1 */
.columnTable.cT1 .item > div {text-align: center;}
.columnTable.cT1 .item > div.orderDate {flex: 1 1 14%;}
.columnTable.cT1 .item > div.orderNumber {flex: 1 1 21%;}
.columnTable.cT1 .item > div.orderAmount {flex: 1 1 18%;}

@media (max-width: 1409px) {
.columnTable.cT1 .cT-content .item > div {
    width: 100%;
    flex-direction: row;
    align-items: center;
}
.columnTable.cT1 .cT-content .item > div > h5 {
border-right: var(--border1);
padding: 0 0.75rem 0 0;
}
.columnTable.cT1 .cT-content .item > div > div {flex-direction: row;}
}

/* --會員登入 .login */
#member .login {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 60px;
}
#member .login > form {width: 50%;}
#member .login > div {width: calc(50% - 60px);}
#member .login > div.TXT h4 {
font-size: 1.25rem;
padding: 0 0 0.5rem;
}

@media (max-width: 1199px) {
#member .login > form, #member .login > div {width: 100%;}  
#member .login > div {text-align: center;}
}

/* --訂單資訊 .orderInfo.orderBox */
.orderBox {}
.orderBox h5 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0.75rem 0 0;
    line-height: var(--bs-body-line-height);
    text-align: left;
    color: var(--wordB);
}
.orderBox > div {

}
.orderBox > div.order {}

.orderBox > div.customerData, .orderBox > div.shippingInfo, .orderBox > div.remarks, .orderBox > div.messageRecord {
    border: var(--border1);
    margin: var(--table-padding) 0 0;
    padding: var(--table-padding);
}

.orderBox > div.customerData {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px;
    border-left: none;
    border-right: none;
    padding: var(--table-padding) 0;
    position: relative;
}
.cart2.orderBox > div.customerData{flex-wrap: initial;}
.orderBox > div.customerData::after {
    content: "";
    position: absolute;
    top: var(--table-padding);
    left: calc(50% - 0.5px);
    width: var(--bs-border-width);
    height: calc(100% - (var(--table-padding) * 2));
    background-color: var(--bs-border-color);
}

.orderBox > div.shippingInfo {}
.orderBox > div.remarks {}
.orderBox > div.messageRecord {}
.orderBox > div.messageRecord .title {}

.orderBox .title {}
.orderBox .title.t1 {
    border-bottom: var(--border1);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 var(--table-padding);
    padding: 0 0 var(--table-padding);
}
.orderBox .title h4 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.orderBox .title h4 > span {padding-top: 0.25rem;}
.orderBox .title h5 {text-align: left;}

.orderBox .title p {}
.orderBox .content {}

.orderBox > div.customerData > div {
    flex: 1 1 auto;
}
.orderBox > div.customerData > div.cD_L {}
.orderBox > div.customerData > div.cD_R {}
.customerData .item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: calc(var(--table-padding) * 0.5) 0;
}
.customerData .item h5 {
    width: 100px;
}
.customerData .item p {
    width: calc(100% - 100px);
}

.messageRecord .content .item {}

@media (max-width: 1409px) {
.orderBox > div.customerData {
    gap: 0;
    padding: 0;
        border: none;
}
.cart2.orderBox > div.customerData {flex-direction: column;}
.cart2.orderBox > div.customerData > div {width: 100%}
.cart2.orderBox > div.customerData > div.cD_R {padding-top: 1rem;}

.orderBox > div.customerData > div {
    flex: 0 0 100%;
    border: var(--border1);
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom: none;
    padding: var(--table-padding) calc(var(--table-padding) *2 );
}
.cart2.orderBox > div.customerData > div {padding: var(--table-padding) 0;}
.orderBox > div.customerData > div.cD_R {border-bottom: var(--border1);}
.orderBox.inquiryInfo > div.customerData > div.cD_R {border: var(--border1);}
.orderBox > div.customerData::after {display: none;}
}

@media (max-width: 1199px) {
.orderBox .title {text-align: left;}
.orderBox .title h4 {font-size: 1.275rem;}
.orderBox .title p::after {left: 0;}    
}

@media (max-width: 480px) {
.customerData .item h5 {
    margin: 0;
}
}

/* --訂單查詢 .m-Orders.orderBox */

/* --詢價紀錄 .inquiryHistory.orderBox */
.inquiryHistory .columnTable.cT1 .cT-content .item > div > h5 {width: 95px;}

/* ======== */
/* --購物車 */
.cart1.orderBox {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cart1.orderBox > div {
    display: flex;
    flex: 1;
    border: var(--border1);
    padding: calc(var(--table-padding) * 2);
}
.cart1.orderBox > div > .order {width: 100%;}

.shoppingTerms .terms-content {max-height: 500px;}

@media (max-width: 1199px) {
.cart1.orderBox > div {
flex: 1 1 100%;
}
}

@media (max-width: 767px) {
.shoppingTerms .terms-content {max-height: 300px;}
}

/* ======== */
/* --#contactBox */
#contactBox {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap-reverse;
}
#contactBox .companyInfo {width: calc(50% - 3rem);}

.companyInfo {}
.companyInfo > p {}
.companyInfo > .companyDate {}

.companyInfo > .companyDate .icon {
border-color: var(--bs-gray-200);
}
.companyInfo > .companyDate .icon::after {
background-color: var(--bs-gray-200);
}
.companyInfo > .companyDate .icon > i {

}
.companyInfo > .googleMap {
display: flex;
margin-top: 2rem;
}
.companyInfo > .googleMap > iframe {
width: 100%;
min-height: 350px;
}

#contactBox .contactForm {
width: 50%;
padding: var(--padding3);
position: relative;
}
#contactBox .contactForm form {
position: relative;
z-index: 6;
}
#contactBox .contactForm::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--bs-border-radius);
background-color: #fff;
z-index: 3;
}
#contactBox .contactForm::after {
content: "";
position: absolute;
top: 30px;
left: 15px;
width: calc(100% - 30px);
height: calc(100% - 60px);
box-shadow: 0 9px 60px 0 var(--bs-border-color);
}

@media (max-width: 991px) {
#contactBox .contactForm {
width: 100%;
}
#contactBox .companyInfo {
width: 100%;
margin-top: 60px;
}
.companyInfo > .companyDate > p {
width: 100%;
}
}