@charset "utf-8";
:root {
/* ▼ Bootstrap  v5.3.8 (擷取出有用到的) */
--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-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.65;
--bs-body-text-align: left;

--bs-body-bg: #fff;
--bs-body-bg-rgb: 249, 249, 249;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0, 0, 0;

--bs-info-rgb:13,202,240;
--bs-black: #000;
--bs-white: #fff;
--bs-gray: #adb5bd;
--bs-gray-dark: #383f46;
--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-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-radius: 0.3125rem;
--bs-box-shadow: 0 0.25rem 0.35rem rgba(0, 0, 0, 0.075);
/* ▲ Bootstrap  v5.3.8 - end */

--table-padding: 0.75rem;
--padding2: 2.15rem 2.2rem 2rem;
--padding3: 3rem 3.25rem;
--border1: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
--b-radius: 50%;
--b-radius1: 0.5rem;

--header: #fff;
--header-rgb: 255, 255, 255;

--height2: 27px;
--height8: 85px;

--headerH: 100px;

--mainC: #356283;
--mainC-rgb: 53, 98, 131;
--hoverC1: #4d8bb7;
--hoverC2: #83aecd;
--footerC1: #474a4c;
--footerC2: rgba(255, 255, 255, 0.08);
--lineC: #ddd;
--focusC: #dc3545;
--wordW: rgba(255, 255, 255, 0.82);
--wordB: rgba(var(--bs-body-color-rgb), 0.82);

--transparentW2: rgba(255, 255, 255, 0.24);
--transparentW3: rgba(255, 255, 255, 0.36);
--transparentW7: rgba(255, 255, 255, 0.71);
}

@media (max-width: 1409px) {
:root {
--padding2: calc(2.15rem * 0.7) calc(2.2rem * 0.7) calc(2rem * 0.7);
--padding3: calc(3rem * 0.7) calc(3.25rem * 0.7);
--b-radius1: 0.3125rem;
}
}

@media (max-width: 767px) {
:root {
--padding2: calc(2.15rem * 0.5) calc(2.2rem * 0.5) calc(2rem * 0.5);
--padding3: calc(3rem * 0.5) calc(3.25rem * 0.5);
--b-radius1: 0.25rem;
}
}

/* ▼ #privacy */
#privacy {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--wordB);
    color: #fff;
    padding: var(--padding3);
    text-align: center;
    z-index: 9999;
    opacity: 1;
    transition: 0.25s;
}

/* 隱藏時 */
#privacy.hide {
opacity: 0;
pointer-events: none;
}

#privacy .btnBox {
margin-top: 15px;
display: flex;
justify-content: center;
gap: 10px;
}

#privacy .btn {
padding: 5px 15px;
border: 1px solid #fff;
background: transparent;
color: #fff;
border-radius: 4px;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}

#privacy .btn:hover {
background: #fff;
color: #000;
}

/* ▼ bootstrap5 原始設定增加與修改*/

/* dropdown  */
.dropdown-item {
color: var(--wordB);
border-radius: 0;
}
.dropdown-menu {border: none;}
.dropdown-menu li {border-bottom: 1px solid #fff;}
.dropdown-menu li:last-child {border-bottom: none;}
/* dropdown - end */

/* 滿版 */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
padding-right: 15px;
padding-left: 15px;
}
@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;
}
}
@media (min-width: 1841px) {
.container-fluid.max-c-f {
max-width: initial;
padding-right: calc((100% - 1760px) / 2);
padding-left: calc((100% - 1760px) / 2);
}
}
/* 滿版 - end */

a {
color: var(--wordB);
text-decoration: none;
transition: 0.25s;
}
a.a1 {color: var(--mainC);}
a:hover {color: var(--mainC);}
a.a1:hover {text-decoration: underline;}

p, figure {margin: 0;}

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

dl, ol, ul {
margin: 0;
padding: 0;
}

.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;    
}


.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: "-";}



.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: 1401px) {
.form-label {font-size: 1rem;}
}

/* ▼ form */
ul.share-buttons {
list-style: none;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
}
ul.share-buttons li {
display: inline-flex;
opacity: 0.82;
transition: opacity 0.25s;
}
ul.share-buttons li:hover {opacity: 1;}

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;}

.title {
font-family: sans-serif;
color: var(--color101);
text-align: center;
}
.title p {
font-size: 0.925rem;
opacity: 0.75;
padding: 0.75rem 0.75rem 3.75em;
margin: 0;
position: relative;
}
.title p::after {
content: "";
position: absolute;
bottom: 2.5rem;
left: calc(50% - 15px);
width: 30px;
height: 1px;
background-color: var(--color101);
}

@media (min-width: 1200px) {
.title p {font-size: 1rem;}
.title p::after {width: 50px;left: calc(50% - 25px);}
}

.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 {
width: 100%;
transition: transform 0.35s;
}
.item:hover img {transform: scale(1.1);}

.TXT h4 {
    font-size: 1.25rem;
    line-height: 1.65;
    font-weight: 600;
    text-align: center;
    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);
}



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

/* .icon */
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--b-radius);
position: relative;
z-index: 1;
transition: 0.25s;
}
.icon::after {
content: "";
position: absolute;
top: calc(50% - 12px);
left: calc(50% - 12px);
width: 24px;
height: 24px;
border-radius: var(--b-radius);
background-color: var(--CC-MM-a, #fff);
opacity: 0.25;
z-index: -1;
pointer-events: none;
transition: 0.25s;
}
p:hover > .icon::after, a:hover > .icon::after, .open a > .icon::after, button:hover > .icon::after {opacity: 0.5;}
.icon > i {
font-size: 0.975rem;
opacity: 0.82;
transition: 0.25s;
position: relative;
top: 1px;
}
p:hover > .icon > i, a:hover > .icon > i, .open a > .icon > i, button:hover > .icon > i {opacity: 1;}
.icon + span {padding: 0 5px;}
/* .icon - end */
/* -- */

body {
padding-top: var(--header-height);
background-color: var(--CC-body, var(--bs-body-bg));
color: var(--CC-body-color, var(--bs-body-color));
overflow-x: hidden;
position: relative;
}
body > section {
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#header {
width: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
/* backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); */
}
#header a, #menuBox2 .offcanvas .offcanvas-menu-chevron {color: var(--CC-MM-a, var(--wordB));}
#menuBox2 .offcanvas .offcanvas-menu-chevron {opacity: 0.85;}
#header a:hover, #menuBox2 .offcanvas button[data-bs-toggle="collapse"][aria-expanded="true"] .offcanvas-menu-chevron {color: var(--CC-MM-a-hover, var(--mainC));}

#header .mega-menu a, #header .navbar-nav a {color: var(--CC-mb-a, var(--wordB));}
#header .mega-menu a:hover, #header .navbar-nav a:hover  {color: var(--CC-mb-a-hover, var(--mainC));}

#header::before, #header::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
#header::after {
background-color: var(--CC-header, var(--header));
opacity: 0.88;
}
#header::before {
opacity: 0;
box-shadow: var(--bs-box-shadow);
transition: opacity 0.5s;
}
#header.headerScroll::before {opacity: 1;}
#header .container-fluid {
position: relative;
z-index: 3;
}
#header #afterLogIn {
display: flex;
justify-content: flex-end;
padding-top: 15px;
}
#afterLogIn.open {z-index: 99;}
#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.875rem;
}
#afterLogIn > div > #menberMENU > a {
min-width: 160px;
height: var(--height2);
justify-content: flex-end;
}
#menberMENU {position: relative;}
#header .dropdown-menu a  {color: var(--wordB);}
#header .dropdown-menu a:hover  {color: var(--mainC);}
#menberMENU > .dropdown-menu {
top: calc(100% - 1px);
left: initial;
right: 0;
background-color: var(--bs-gray-100);
padding: 0.5rem;
box-shadow: var(--bs-box-shadow);
}
#afterLogIn .logOut > a {
width: auto;
height: var(--height2);
justify-content: center;
background-color: var(--hoverC1);
color: var(--wordW);
border-radius: var(--bs-border-radius);
margin-left: 1rem;
padding: 0 0.95rem;
}
#afterLogIn .logOut:hover > a {
background-color: var(--mainC);
color: #fff;
}

#header .container-fluid > .wrap {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: var(--height8);
    position: initial;
}

@media (max-width: 767px) {
#header .container-fluid > .wrap {
flex-direction: column;
height: auto;
}
}

/* #logo */
#logo {
display: flex;
align-items: flex-end;
justify-content: center;
width: 250px;
height: 85px;
font-size: 0;
margin: 0;
}
@media (max-width: 1840px) {
#logo {
width: calc(250px * 0.8);
height: calc(85px * 0.8);
position: relative;
bottom: calc(50% - ((85px * 0.8) / 2));
}
}
@media (max-width: 1199px) {
#logo {
position: absolute;
left: 30px;
}
}
@media (max-width: 767px) {
#logo {
left: 15px;
bottom: 0;
}
}
@media (max-width: 480px) {
#logo {
width: calc(250px * 0.7);
height: calc(85px * 0.7);
}
}
/* #logo - end */

.navbar-toggler-icon {
background-color: var(--wordW);
border-radius: var(--bs-border-radius);
}
.offcanvas-header .btn-close {
    background-color: var(--wordW);
    border-radius: var(--bs-border-radius);
    margin: 0 0 0 auto;
}
.offcanvas-body {
    padding: var(--bs-offcanvas-padding-y) 0;
}
.flex-column {
    background-color: transparent;
}

/* #menuBox1 */
#menuBox1 .nav-list {
display: flex;
list-style: none;
height: 100%;
}
#menuBox1 .nav-link {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0.75rem;
height: 100%;
font-weight: 600;
text-decoration: none;
}

/* #menuBox1 .mega-menu */
#menuBox1 .mega-menu {
position: absolute;
top: calc(100% - 2px);
left: 0;
width: 100%;
padding: 40px 0;
box-shadow: var(--bs-box-shadow);
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: .25s;
}
#menuBox1 .has-mega:hover .mega-menu {
z-index: 1030;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#menuBox1 .mega-menu::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--CC-header, var(--header));
opacity: 1;
pointer-events: none;
transition: .25s;
}
.headerScroll #menuBox1 .mega-menu::after {
height: calc(100% - 3px);
opacity: 0.88;
}

/* grid */

#menuBox1 .mega-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 60px;
}

#menuBox1 .mega-list{list-style:none;}

#menuBox1 .mega-list li {padding: 0.5rem 0 0 1.25rem;}

#menuBox1 .sub-menu {
    padding-left: 15px;
    margin-top: 6px;
    list-style: none;
}

/* feature */

#menuBox1 .feature-card img{
width:100%;
border-radius:6px;
}

#menuBox1 .feature-card h4{
margin:8px 0 4px;
}

/* backdrop */

#menuBox1 .nav-backdrop{

position:fixed;
left:0;
top:0;

width:100%;
height:100%;

background:rgba(0,0,0,.2);
backdrop-filter:blur(4px);

opacity:0;
pointer-events:none;
transition:.3s;

}

#menuBox1 .nav-backdrop.show{
opacity:1;
pointer-events:auto;
}

/* mobile */

#menuBox1 .nav-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
}

#menuBox1 .nav-toggle span{
width:25px;
height:3px;
background:#333;
}

@media(max-width:992px){

#menuBox1 .nav-toggle{
display:flex;
}

#menuBox1 .nav-list{
position:fixed;
left:-100%;
top:0;
width:280px;
height:100%;
background:#fff;
flex-direction:column;
padding-top:80px;
transition:.3s;
}

#menuBox1 .nav-list.open{
left:0;
}

#menuBox1 .mega-menu{
position:static;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
padding:20px;
}

#menuBox1 .mega-grid{
grid-template-columns:1fr;
}

#menuBox1 .sub-menu{
display:none;
}

#menuBox1 .has-sub.open .sub-menu{
display:block;
}

}

#menuBox1 .mega-grid > .mega-col > a {
    display: block;
    padding: 0 0 0.5rem 1.25rem;
    position: relative;
}
#menuBox1 .mega-grid > .mega-col > a::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    left: 0;
    width: 0.5rem;
    height: 1px;
    background-color: var(--CC-mb-a, var(--wordB));
    opacity: 0.62;
    pointer-events: none;
}



/* -- */

#menuBox1 {display: none;}
#menuBox1 .navbar {list-style: none;}
#menuBox1 .dropdown-menu.open {
display: block;
background-color: transparent;
}
@media (min-width: 1200px) {
#menuBox1 {
flex: 1;
width: auto;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}  
#menuBox1 .navbar {
    height: 100%;
    padding: 0;
    position: initial;
    justify-content: flex-start;
}
#menuBox1 .navbar > .nav-item {height: 100%;position: initial;}
#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_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% - 1px);
  left: 0;
  z-index: -9;
  color: var(--wordB);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: 0.3s ease;
}
#menuBox1 .dropdown-menu.ddM2.open {
  z-index: 999;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#menuBox1 .dropdown-menu.ddM2 > div > ul {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    border-radius: 0;
}
#menuBox1 .dropdown-menu.ddM2 > div > ul > .nav-item {
padding: 0 1rem;
position: relative;
z-index: 3;
width: calc(100% / 8);
}
#menuBox1 .dropdown-menu.ddM3 {position: relative;}
#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) {

}
@media (max-width: 1840px) {
#menuBox1 .nav-link.mainM {padding: 0 1rem 0 0;}
}
/* #menuBox1 - end */

/* #menuBox2 */
#menuBox2 {height: 100%;}
#menuBox2 .navbar {
padding: 0;
width: 56px;
height: 56px;
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;
height: 100vh;
background: var(--CC-mb, var(--header));
}
#menuBox2 .navbar .nav-link {border: none;}
#menuBox2 .navbar .nav-link > i {opacity: 0;}
#menuBox2 .navbar .btn-link::before {
    content: "+";
    position: absolute;
    top: 8px;
    right: 14px;
    transition: 0.35s;
    opacity: 0.5;
}
#menuBox2 .navbar .btn-link[aria-expanded="true"]::before {content: "-";}

@media (min-width: 768px) {
#menuBox2 .navbar {height: 100%;}
}
@media (min-width: 1200px) {
#menuBox2 {display: none;}
}
@media (max-width: 480px) {
#menuBox2 .offcanvas.offcanvas-end {width: 100%;}
}
/* #menuBox2 - end */



#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;}



#menuBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 550px);
    height: var(--height8);
}
#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(--height8);
    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 (max-width: 1840px) {
#menuBox {width: calc(100% - 450px);}
.nav-link {font-size: 0.975rem;}
}

@media (max-width: 1199px) {
#menuBox {
    width: auto;
    height: calc(var(--height8) / 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%;
        padding: 0 var(--bs-offcanvas-padding-x);
    }
#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) {
#menuBox .navbar-collapse {
    top: calc(var(--headerH_s) - 1px);
} 
}

/* -- .fixedMenu */
.fixedMenu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: auto;
    max-width: 300px;
    height: 100%;
}
.fixedMenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    min-width: calc(25% - 1rem);
    height: 100%;
    position: relative;
}
.fixedMenu a:hover {}
.fixedMenu a > .icon {border-color: transparent;}
.fixedMenu a > .icon::after {display: none;}
.fixedMenu a > .icon > i {

}
.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: 1rem;
}
.fixedMenu .logIn {height: calc(var(--height8) / 2);}

#searchBox, #languageBox, #shoppingCart {
    height: 100%;
    position: relative;
}

#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(100% - 1rem);
    bottom: initial;
    left: initial;
    right: 0;
    background-color: var(--bs-gray-100);
    box-shadow: var(--bs-box-shadow);
}
#languageBox .dropdown-menu a {
    width: 100%;
    display: block;
    text-align: center;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: transparent;
    color: var(--mainC);
}
#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(--height8) / 2);
    align-items: end;
}
.fixedMenu a {width: auto;}
#languageBox .dropdown-menu {
    top: calc(var(--height8) / 2);
}
#shoppingCart {
    height: auto;
    margin: 0;
    position: absolute;
    bottom: 11px;
    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 .modal-content > form {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.modal.m-S .form-control {
    flex: 1;
    height: 50px;
    border: none;
}
.modal.m-S .modal-content > div,
.modal.m-S .modal-content > form > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 105px;
    position: relative;
}
.modal.m-S .modal-content > div::after,
.modal.m-S .modal-content > form > 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 .modal-content > form {
    flex-wrap: wrap;
}
.modal.m-S .form-control {
    width: 100%;
    flex: 1 1 100%;
    background-color: transparent;
    margin-bottom: 0.5rem;
}
.modal.m-S .modal-content > div,
.modal.m-S .modal-content > form > 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 .item:hover img {transform: none;}
#banner .imgTxt .img-w768 {display: flex;width: 100%;}
#banner .imgTxt .img-w767 {display: none;width: 100%;}

#banner .imgTxt > .txt {
position: absolute;
inset: 0;
z-index: 9;
}

@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 {
position: relative;
background-color: var(--CC-footerC1, var(--footerC1));
}
footer ul {list-style: none;}
#footer > div {
display: flex;
align-items: flex-end;
align-content: stretch;
justify-content: space-between;
flex-wrap: wrap;
padding-top: 5rem;
padding-bottom: 4.75rem;
position: relative;
z-index: 3;
}
#footer, #footer a {color: var(--CC-footer-a, var(--wordW));}
#footer a:hover {color: var(--CC-footer-a-hover, #fff);}
#footer .f_menu a {color: var(--CC-footerMENU-a, var(--wordW));}
#footer .f_menu a:hover {color: var(--CC-footerMENU-a-hover, #fff);}
.f_menu.f_menu1 {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 5rem;
padding-bottom: 4.75rem;
background-color: var(--CC-footerC2, var(--footerC2));
}
.f_menu.f_menu1 .menu {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 60px;
}
.f_menu .menu > li > a {
display: inline-block;
font-weight: 600;
}
.f_menu.f_menu1 .menu > li > a {
display: block;
font-size: 1.125rem;
padding-bottom: 0.75rem;
position: relative;
}
.f_menu.f_menu1 .menu > li > a::before, .f_menu.f_menu1 .menu > li > a::after {
content: "";
position: absolute;
left: 0;
background: var(--CC-footerMENU-a, var(--wordW));
pointer-events: none;    
}
.f_menu.f_menu1 .menu > li > a::before {
bottom: 0;
width: 100%;
height: 1px;
}
.f_menu.f_menu1 .menu > li > a::after {
bottom: -1px;
width: 25%;
height: 3px;
}
.f_menu .submenu {padding: 0.75rem 0 0 0.05rem;}
.f_menu .submenu > li {
padding: 0.5rem 0 0 1.25rem;
position: relative;
}
.f_menu .submenu > li::before {
content: "";
position: absolute;
top: 1.37rem;
left: 0;
width: 0.5rem;
height: 1px;
background-color: var(--CC-footerMENU-a, #fff);
opacity: 0.62;
pointer-events: none;
}

.f_menu.f_menu2 {
width: 80%;
margin: 0 0 0 auto;
}
.f_menu.f_menu2 .menu {
display: flex;
align-items: flex-start;
justify-content: flex-end;
flex-wrap: wrap;
gap: 30px;
padding-bottom: 2rem;
}
.f_menu.f_menu2 .menu li {position: relative;}
.f_menu.f_menu2 .menu li::before {
content: "／";
position: absolute;
top: 2px;
left: -22.5px;
font-family: sans-serif;
font-weight: 900;
color: var(--CC-footerMENU-a, #fff);
opacity: 0.52;
pointer-events: none;    
}
.f_menu.f_menu2 .menu li:first-child::before {display: none;}

.footer-type3 {width: 100%;}
.footer-type3 .f-webInfo {width: 100%;}
.footer-type3 .f-webInfo .copyrightBox {
align-items: center;
text-align: center;
margin-top: 0;
}

.f-company {width: calc(45% - 0.625rem);}
.f-company h2 {
font-size: 1.285rem;
margin-bottom: 1.5rem;
}
.companyDate {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
gap: 0.625rem;
}
.companyDate > p {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 0.75rem;
width: calc((100% - 0.625rem) / 2);
}
.companyDate > p > span, .companyDate > p > a {
display: inline-flex;
word-break: break-all;
overflow-wrap: anywhere;
}
.companyDate > p > .contact-name {
flex: 0 0 auto;
padding-right: 0.75rem;
position: relative;
}
.companyDate > p > .contact-name::before {
content: "";
position: absolute;
top: 19%;
right: 0;
width: 1px;
height: 64%;
background-color: var(--CC-footer-a, #fff);
opacity: 0.52;
pointer-events: none;
}
.f-webInfo {width: 55%;}
.f-webInfo .copyrightBox {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
margin-top: 1.5rem;
padding-top: 1.85rem;
position: relative;
}
.f-webInfo .copyrightBox::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--CC-footer-a, #fff);
opacity: 0.52;
pointer-events: none;
}
.socialMedia {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
}
.socialMedia > a {
display: flex;
width: 25px;
height: 25px;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
transition: 0.25s;
background-color: var(--CC-footer-a, var(--wordW));
}
.socialMedia .sM1 {
-webkit-mask: url('../images/socialMedia/FB.svg') no-repeat center;
mask: url('../images/socialMedia/FB.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM2 {
-webkit-mask: url('../images/socialMedia/Instagram.svg') no-repeat center;
mask: url('../images/socialMedia/Instagram.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM3 {
-webkit-mask: url('../images/socialMedia/LINE.svg') no-repeat center;
mask: url('../images/socialMedia/LINE.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM4 {
-webkit-mask: url('../images/socialMedia/YT.svg') no-repeat center;
mask: url('../images/socialMedia/YT.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM5 {
-webkit-mask: url('../images/socialMedia/Twitter.svg') no-repeat center;
mask: url('../images/socialMedia/Twitter.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM6 {
-webkit-mask: url('../images/socialMedia/WeChat.svg') no-repeat center;
mask: url('../images/socialMedia/WeChat.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM7 {
-webkit-mask: url('../images/socialMedia/WhatsApp.svg') no-repeat center;
mask: url('../images/socialMedia/WhatsApp.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM8 {
-webkit-mask: url('../images/socialMedia/VK.svg') no-repeat center;
mask: url('../images/socialMedia/VK.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM9 {
-webkit-mask: url('../images/socialMedia/Rutube.svg') no-repeat center;
mask: url('../images/socialMedia/Rutube.svg') no-repeat center;
-webkit-mask-size: contain;
mask-size: contain;
}
.socialMedia .sM1:hover, .socialMedia .sM2:hover, .socialMedia .sM3:hover, .socialMedia .sM4:hover, .socialMedia .sM5:hover, .socialMedia .sM6:hover, .socialMedia .sM7:hover, .socialMedia .sM8:hover, .socialMedia .sM9:hover {
background-color: transparent;
-webkit-mask: none;
mask: none;
-webkit-mask-size: initial;
mask-size: initial;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.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-reverse;
margin: 0.75rem 0 0;
}
.copyright > p {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.copyright > p > a {padding-left: 0.75rem;}
.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;
display: inline-block;
}

@media (max-width: 1680px) {
.f_menu.f_menu1 .menu {
grid-template-columns: repeat(6, 1fr);
gap: 45px;
}
}

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

@media (max-width: 540px) {
.f-company {text-align: left;}    
.companyDate {flex-direction: column;}
.companyDate > p {padding: 0;}

.f-webInfo .copyrightBox, .footer-type3 .f-webInfo .copyrightBox {
align-items: flex-start;
text-align: left;
}
#footer .copyright {justify-content: flex-start;}
.copyright > p {justify-content: flex-start;}
.socialMedia {justify-content: flex-start;}
}

/* ▼ */
/* --.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 {
    display: block;
}
#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;}
}





/* ======== */
/* -- .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;
}
#contentBox > .dateCategory {
width: calc(100% - 5.5rem);
border-top: 1px solid;
padding-top: 0.5rem;
margin-top: 0.5rem;
color: var(--bs-gray-500);    
}
#contentBox > .socialMedia2 {
position: relative;
top: -3rem;
right: 0;
z-index: 3;
width: 100%;
display: flex;
justify-content: flex-end;
}

.news-attachments {
display: flex;
align-items: flex-start;
justify-content: flex-start;
border: var(--border1);
padding: 1.85rem;
color: var(--bs-gray-600);

}
.news-attachments h4 {
width: 85px;
text-align: center;
margin: 0;
padding: 0.25rem calc((1.85rem) / 2) 0.25rem 0;
font-size: initial;
line-height: 1;
}
.attachment-list {
width: calc(100% - 85px);
list-style: none;
border-left: var(--border1);
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
}
.attachment-item {padding-left: calc((1.85rem) / 2);}

@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.3s;
}
#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 .icon {
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
transition: 0.25s;
}
#sideMenu .item:hover .icon {background-color: var(--mainC);}
 */
/* ======== */
/* --#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 {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
padding: 0.75rem 0 0;
}
.fileDownload > small {
font-size: 0.875rem;
opacity: 0.82;
}
/* ======== */
/* --.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: #fff;
text-align: left;
background: var(--hoverC1);
border: 0;
transition: 0.25s;
}
.faq-btn.collapsed {
color: var(--wordB);
background-color: #fff;
}
.faq-icon {transition: transform 0.25s ease;}
.faq-btn.collapsed .faq-icon::before {
content: "＋";
color: var(--wordB);
opacity: 0.75;
}
.faq-btn .faq-icon::before {
content: "－";
color: #fff;
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 .bg-info {
    background-color: #fff !important;
    border: var(--border1);
    color: var(--wordB);
    line-height: 1;
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 0.625rem;    
}
.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);
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;}
.product-price {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap; 
}
.price-sale {color: #dc3545;}
.price-original {
position: relative;
}
.price-original::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    z-index: 3;
    width: 100%;
    height: 2px;
    background-color: var(--focusC);
}

.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%;
}
}