@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: 255, 255, 255;
--bs-body-color: #393939;
--bs-body-color-rgb: 57, 57, 57;
--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: #b5b5b5;
--bs-gray-dark: #3f3f3f;
--bs-gray-100: #f9f9f9;
--bs-gray-200: #e6e6e6;
--bs-gray-300: #c4c4c4;
--bs-gray-400: #b5b5b5;
--bs-gray-500: #a1a1a1;
--bs-gray-600: #8e8e8e;
--bs-gray-700: #7a7a7a;
--bs-gray-800: #666666;
--bs-gray-900: #535353;

--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: #3270ae;
--mainC-rgb: 50, 112, 174;
--hoverC1: #5f90c0;
--hoverC2: #94b6d7;

--footerC1: #8eadbe;
--fC1-rgb: 142, 173, 190;
--footerC2: #1d3a58;
--fC2-rgb: 29, 58, 88;
--lineC: #ddd;
--focusC: #cb4e4e;
--wordW: rgba(255, 255, 255, 0.82);
--wordB: rgba(var(--bs-body-color-rgb), 0.82);

--searchC: rgba(var(--fC2-rgb), 0.52);
--bg1: #f7fafe;
--bg11: #c2ddf8;
--bg12: #8cbff3;
--bg13: #57a2ed;
--bg2: #2a7fb5;
--bg21: #80acd2;
--bg22: #e7eef4;
--bg3: #1f93b4;
--bg31: #4aa7c2;
--bg4: #8998a8;

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

--h1Title1: 1.85rem;
}

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

--h1Title1: calc(1.85rem * 0.9);
}
}

@media (max-width: 1199px) {
:root {
--h1Title1: calc(1.85rem * 0.85);
}
}

@media (max-width: 991px) {
:root {
--h1Title1: calc(1.85rem * 0.8);
}
}

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

--h1Title1: calc(1.85rem * 0.75);
}
}

/* ▼ #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 */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height: 1.42857143;}
a {
color: var(--wordB);
text-decoration: none;
cursor: pointer;
transition: 0.25s;
}
a:focus, a:hover {color: var(--mainC);}
a.a1 {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-primary {
--bs-btn-bg: var(--hoverC1);
--bs-btn-hover-bg: var(--hoverC1);
--bs-btn-hover-border-color: var(--hoverC1);
--bs-btn-active-bg: var(--hoverC1);
--bs-btn-active-border-color: var(--hoverC1);
--bs-btn-disabled-bg: var(--mainC);
--bs-btn-disabled-border-color: var(--hoverC1);
}
.btn-secondary {
--bs-btn-bg: var(--bs-gray-500);
--bs-btn-hover-bg: var(--bs-gray-500);
--bs-btn-hover-border-color: var(--bs-gray-500);
--bs-btn-active-bg: var(--bs-gray-500);
--bs-btn-active-border-color: var(--bs-gray-500);
--bs-btn-disabled-bg: var(--bs-gray-500);
--bs-btn-disabled-border-color: var(--bs-gray-500);
}
.btn-primary:hover, .btn-secondary:hover {
color: #fff;
background-color: var(--mainC);
}
.btn-outline-primary {
--bs-btn-color: var(--wordB);
--bs-btn-border-color: var(--mainC);
--bs-btn-hover-bg: var(--mainC);
--bs-btn-hover-border-color: var(--mainC);
--bs-btn-focus-shadow-rgb: var(--mainC-rgb);
--bs-btn-active-bg: var(--mainC);
--bs-btn-active-border-color: var(--mainC);
--bs-btn-disabled-color: var(--mainC);
--bs-btn-disabled-border-color: var(--mainC);
}
.btn-outline-secondary {
--bs-btn-color: var(--wordB);
--bs-btn-border-color: var(--mainC);
--bs-btn-hover-bg: var(--mainC);
--bs-btn-hover-border-color: var(--mainC);
--bs-btn-active-bg: var(--mainC);
--bs-btn-active-border-color: var(--mainC);
--bs-btn-disabled-color: var(--mainC);
--bs-btn-disabled-border-color: var(--mainC);
}
.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-carousel .owl-stage-outer {width: 100%;}
.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: 50%;
border: 2px solid #fff;
background-color: rgba(var(--fC2-rgb), 0.75);
box-shadow: 0 0 0 1px var(--hoverC2);
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: 2px solid var(--hoverC2);
border-right: 2px solid var(--hoverC2);
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 {
background-color: rgba(var(--fC2-rgb), 1);
}

@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 {
width: 100%;
padding: 0 0 30px;
position: relative;
z-index: 3;
pointer-events: none;
text-align: center;
animation-name: fadeInDown;
animation-duration: 2s;
animation-delay: 0.1s;
}
.title h3 {
display: block;
font-family: sans-serif;
padding-bottom: 45px;
position: relative;
color: var(--footerC2);
}
.title h3 {font-size: 1.35rem;}
.title h3::before {
content: '';
position: absolute;
left: calc(50% - 9px);
bottom: 15px;
width: 18px;
height: 1px;
background-color: var(--footerC2);
border: 2px solid #fff;
border-top: none;
border-bottom: none;
z-index: 1;
}
.title h3::after {
content: '';
position: absolute;
left: calc(50% - 25px);
bottom: 15px;
width: 50px;
height: 1px;
background-color: var(--searchC);
}
.title p {
display: block;
font-size: 0.925rem;
line-height: 1.65;
opacity: 0.88;
max-width: 767px;
margin: 0 auto;
color: var(--footerC2);
}

@media (min-width: 1200px) { 
.title {padding: 0 0 45px;}
.title h3 {font-size: 1.55rem;}
}

@media (min-width: 1410px) {
.title {padding: 0 0 60px;}    
.title h3 {font-size: 1.75rem;}
}

.wow {will-change: transform, opacity;}
.wow span {display: inline-block;}

.page-form-block form {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
}
.page-form-block form .mb-3 {width: 100%;}
@media (min-width: 1200px) {
.page-form-block form .mb-3.w50 {width: calc(50% - 0.5rem);}
}

figure.image {display: flex;}    
figure.image img {
display: flex;
width: 100%;
max-width: 100%;
height: auto;
}

.IMG {
border-radius: var(--bs-border-radius);
overflow: hidden;
transition: 0.25s;
position: relative;
}
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 {
display: flex;
width: 100%;
transition: 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 {
position: relative;
width: 280px;
margin-top: 20px;
}
.moreInfo::before, .moreInfo::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
height: calc(100% - 6px);
background-color: var(--navW);
border-radius: 3px;
pointer-events: none;
transition: 0.35s;
}
.moreInfo::before {
width: calc(100% - 6px);
opacity: 0.52;
}
.moreInfo::after {
width: 0;    
opacity: 0;
}
.moreInfo:hover::after {
width: calc(100% - 6px);
opacity: 1;
}
.moreInfo a {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
border: 1px solid var(--bs-gray-500);
padding: 13px 12px 12px 95px;
color: var(--bs-gray-500);
border-radius: 4px;
font-family: sans-serif;
font-size: 0.875rem;
letter-spacing: 2.15px;
line-height: 1.25;
position: relative;
z-index: 3;
transition: 0.35s;
}
.moreInfo:hover a {
letter-spacing: 2px;
border-color: var(--mainC);
color: var(--mainC);
}
.moreInfo a::before {
content: '';
width: 50px;
height: 1px;
background: var(--bs-gray-500);
position: absolute;
top: calc(50% - 1px);
left: 0;
opacity: 0.82;
transition: all 0.4s ease;
}
.moreInfo a::after {
content: '';
width: 7px;
height: 7px;
border-top: 1px solid var(--bs-gray-500);
border-right: 1px solid var(--bs-gray-500);
position: absolute;
top: calc(50% - 4px);
left: 76px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all 0.4s ease;
}
.moreInfo:hover a::before {
width: 80px;
background: var(--mainC);
}
.moreInfo:hover a::after {
left: 90px;
border-color: var(--mainC);
opacity: 0;
}

@media (max-width: 480px) {
.moreInfo {width: 100%;}    
}

.s_more {
display: inline-block;
color: var(--bs-gray-400);
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-400);
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-400);
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;
align-items: center;
justify-content: center;
color: var(--hoverC1);
margin-top: 0;
font-family: sans-serif;
font-size: 0.875rem;
line-height: 1.35;
letter-spacing: 0.75px;
text-align: center;
background-color: rgba(255, 255, 255, 0.76);
border: 1px solid var(--hoverC2);
border-radius: 4px;
padding: 6.5px 18px 6px;
transition: 0.25s;
}
.s_more2:hover, .item:hover .s_more2 {
color: #fff;
background: var(--mainC);
}

.inputImg {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}

/* .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;
overflow: hidden;
}
#header {
width: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
#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: 0 0 0 2px rgba(255, 255, 255, 0.48), 0 5px 8px rgba(0, 0, 0, 0.08);
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: center;
    justify-content: flex-end;
    height: var(--height8);
    position: initial;
}

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

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

.navbar-toggler-icon {
background-color: var(--CC-MM-a, transparent);
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 0 1.5rem;
    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-end;
} 
#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;
    padding: 0.5rem 0 0.5rem 1rem;
}
#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;}

/* -- .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 > .icon {border-color: transparent;}
.fixedMenu a > .icon::after {display: none;}
.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 > 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: 767px) {
#header #afterLogIn, .fixedMenu .logIn > a > .txt {display: none;}
.fixedMenu {
margin: 0.75rem 0 0;
width: 100%;
height: auto;
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 > 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-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;
}

@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 */
.noBanner {display: none;}
#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 .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 > 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);}

/* -- 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 > p > a.privacy {
padding-left: 1.5rem;
position: relative;
}
.copyright > p > a.privacy::before {
content: "";
position: absolute;
top: 24%;
left: calc(0.75rem - 1px);
width: 1px;
height: 63%;
background-color: var(--CC-footer-a, #fff);
pointer-events: none;
opacity: 0.52;
}
.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%;}
.copyright > p > a {padding: 0 0.75rem 0 0;}
.copyright > p > a.privacy {padding: 0 0 0 0.75rem;}
.copyright > p > a.privacy::before {left: -0.5px;}
.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;}
}

@media (max-width: 425px) {
.copyright > p > a.privacy {width: 100%;padding: 0;}
.copyright > p > a.privacy::before {display: none;}
}

/* ======== */
/* --.navbar 共用設定 */
.navbar-toggler:focus {box-shadow: none;}
.navbar .nav-link {
margin: 0;
padding: 0;
position: relative;
}
.navbar .nav-link > a {
padding: 0.5rem 0;
}
.navbar .nav-link .txt {
font-size: 1rem;
font-weight: 500;
}
.navbar .nav-link:hover {color: var(--mainC);}
.navbar .nav-link + .dropdown-menu {}
.navbar .dropdownBtn::before, .navbar .dropdownBtn::after {
content: "";
position: absolute;
background-color: var(--bs-gray-400);
transition: 0.5s;
}
.navbar .dropdownBtn::before {
top: calc(50% - 0.21875rem);
right: calc(19px + 3.5px);
width: 1px;
height: 0.4375rem;
}
.navbar .dropdownBtn::after {
top: calc(50% - 0.5px);
right: 19px;
width: 0.4375rem;
height: 1px;
}
.navbar .dropdownBtn.ddBtn3::before, .navbar .dropdownBtn.ddBtn3::after {display: none;}
.navbar .nav-link:hover .dropdownBtn::before, 
.navbar .nav-link:hover .dropdownBtn::after,
.navbar .nav-item:hover .nav-link .dropdownBtn::before, 
.navbar .nav-item:hover .nav-link .dropdownBtn::after,  
.nav-link.open .dropdownBtn::after, 
.navbar .dropdownBtn.open::after  {background-color: var(--mainC);}
.navbar .dropdownBtn.open::before {opacity: 0;}

.nav-link{
display:flex;
align-items:center;
justify-content:space-between;
}
.menuLink{
flex:1;
display:block;
}
/* ======== */
/* --.navbar 共用設定 */
.navbar-toggler:focus {box-shadow: none;}
.navbar .nav-link {
margin: 0;
padding: 0 0 0 var(--bs-navbar-nav-link-padding-x);
position: relative;
}
.navbar .nav-link > a {padding: 0.5rem 0;}
.navbar .nav-link .txt {
font-size: 1rem;
font-weight: 500;
}
.navbar .nav-link:hover {color: var(--mainC);}
.nav-item .dropdownBtn {display: none;}
.nav-item:has(> .dropdown-menu) > .nav-link > .dropdownBtn {display: inline-flex;}
.navbar .dropdownBtn::before, .navbar .dropdownBtn::after {
content: "";
position: absolute;
background-color: var(--bs-gray-400);
transition: 0.5s;
}
.navbar .dropdownBtn::before {
top: calc(50% - 0.21875rem);
right: calc(50% - 0.5px);
width: 1px;
height: 0.4375rem;
}
.navbar .dropdownBtn::after {
top: calc(50% - 0.5px);
right: calc(50% - 0.21875rem);
width: 0.4375rem;
height: 1px;
}
.navbar .dropdownBtn.ddBtn3::before, .navbar .dropdownBtn.ddBtn3::after {display: none;}
.navbar .nav-link:hover .dropdownBtn::before, 
.navbar .nav-link:hover .dropdownBtn::after,
.navbar .nav-item:hover .nav-link .dropdownBtn::before, 
.navbar .nav-item:hover .nav-link .dropdownBtn::after,  
.nav-item[data-open="true"] .dropdownBtn::after {
background-color: var(--mainC);
transform: rotate(180deg);}
.nav-item[data-open="true"] .dropdownBtn::before {
opacity: 0;
transform: rotate(90deg);
}

.nav-link{
display:flex;
align-items:center;
justify-content:space-between;
}
.menuLink{
flex:1;
display:block;
}

/* ======== */
/* #sideBarBox */
#sideBarBox h3 {
font-size: 1.25rem;
text-align: center;
}
#sideBarBox .dropdownBtn {
width: 2.25rem;
height: 100%;
padding: 0;
margin: 0;
border: none;
background-color: transparent;
position: relative;
}
#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 > h3 {
margin: 0;
font-size: 1rem;
text-align: left;
font-weight: 400;
line-height: 1.65;
}
#sideBarBox .arrow1 {
position: absolute;
top: calc(50% - 0.0725rem);
right: 0.695rem;
width: 0.5rem;
height: 0.5rem;
border-width: 2px;
border-style: solid;
border-color: #fff #fff transparent transparent;
transform: rotate(-45deg);
opacity: 0.68;
transition: 0.35s;
}
#sideBarBox .navbar-toggler[aria-expanded="true"] .arrow1{
top: calc(50% - 0.265rem);
transform: rotate(135deg);
opacity: 0.88;
}
#sideBar .dropdown-menu{
display:grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s ease;
min-height: 0;
overflow: hidden;
max-height: 0;
}
#sideBar .nav-item[data-open="true"] > .dropdown-menu{
grid-template-rows: 1fr;
max-height: 100%;
}
#sideBar .dropdown-menu > *{
overflow:hidden;
min-height: 0;
max-height: 100%;
}
#sideBar .nav-item[data-open="false"] .dropdown-menu {padding: 0;}
#sideBar .nav-item[data-open="true"] .ddM2 {border-bottom: var(--border1);}
#sideBar .dropdown-menu.ddM3 .nav-link {padding-left: 2.5rem;}
#sideBar .navbar-nav {
flex-direction: column;
width: 100%;
gap: 0.25rem;
}
#sideBar .nav-link {padding-right: 0;}
#sideBar .nav-link.mainM {border: var(--border1);}
#sideBar .nav-item:hover .nav-link.mainM, #sideBar .nav-link.mainM.open {color: var(--mainC);}

@media (min-width: 992px) {
#sideBarBox .navbar-expand-lg .navbar-nav .dropdown-menu {position: relative;}
}

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

/* ======== */
/* -- .mainContent */
.mainContent____gggg {padding-bottom: 3.5rem;}
.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;
    overflow: hidden;
}
#contentBox .page-editor {word-break: break-word;}
#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: -22px;
left: 0;
width: 100%;
height: 5px;
background-color: var(--bs-gray-500);
border-radius: 0 5px 0 0;
}

.h1-title {
font-size: var(--h1Title1);
line-height: 1.65;
padding-bottom: 1rem;
}

/* ======== */
/* --#goTop */
#goTop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
text-align: center;
line-height: 1;
width: 40px;
height: 40px;
color: #fff;
background-color: rgba(var(--fC2-rgb), 0.88);
border-radius: 4px 0 0 4px;
cursor: pointer;
position: fixed;
right: 0;
bottom: 12px;
z-index: 99;
opacity: 0.75;
transition: 0.25s;
}
#goTop:hover {background-color: var(--mainC);}
#goTop > i {display: none;}
@media (max-width: 1280px) {
#gotop {bottom:5px;}
}
#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;
}
/* ======== */
/* -- 商品 */
.product-soldout {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
text-align: center;
padding: 0.5rem;
background-color: rgba(var(--mainC-rgb), 0.52);
color: var(--wordW); 
}
.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 .no {
font-size: 0.925rem;
opacity: 0.75;
margin: 0;
padding: 0.5rem 0;
}

.productInfo .spec-btn {
margin: 0 5px 5px 0;
min-width: 60px;
}
.productInfo .spec-btn.active {
background-color: #0d6efd;
color: #fff;
border-color: #0d6efd;
}
.productInfo .spec-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.productInfo .proQuantity .minusPlus {
display: flex;
align-items: center;
}
.productInfo .proQuantity .qty-input {
width: 60px;
text-align: center;
margin: 0 5px;
}
.productInfo .price .price-display {
font-size: 1.5em;
font-weight: bold;
}
.productInfo .price .lineThrough p {
text-decoration: line-through;
color: #999;
}
.productInfo .price .discount p:last-child {
color: #dc3545;
}
.productInfo .product-subtitle {
font-size: 0.95em;
}

.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;
object-fit: cover;
}
.product .carousel-inner {
overflow: hidden;
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 .discount > p > span {font-size: 1.15rem;}
.price .original > p > span {font-size: 1.15rem;}

.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 .form-control {
border-radius: 0;
text-align: center;
}
.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-content {flex-direction: column;}
.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 .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 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.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 .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 > div.customerData > div {flex: 1 1 auto;}
.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);}

@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 > .companyDate .icon {border-color: var(--bs-gray-200);}
.companyInfo > .companyDate .icon::after {background-color: var(--bs-gray-200);}
.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%;}
}