/* !!!所有頁面共用!!! 開始 */
html, body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* overflow-x: hidden; */
  line-height: 1.5;
}
.container-fluid{
  margin: 0 auto;
}
.ol, ul {
  padding-left: 0;
}
a:hover {
  text-decoration: none;
}

.ls-15 {
  letter-spacing: 1.5px;
}

.btn-black {
  border: 1px solid #333333;
  background: #333333;
  color: #fff;
}

.btn-black:hover {
  background: #fff;
  color: #333333;
  border: 1px solid #333333;
}

.w-85 {
  margin: 0 auto;
  width: 85%;
}

@media only screen and (max-width: 767.98px) {
  .w-85 {
    width: 100%;
  }
}

/* footer置底 Start */
.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.sticky-footer-bottom {
  margin-top: auto; 
}
/* footer置底 End */


/* 編輯器樣式 Start */
.editorWrap thead,.editorWrap tbody,.editorWrap tfoot,.editorWrap tr,.editorWrap td,.editorWrap th {
  border-width: 1px;
}
.editorWrap a {
  color: #000;
}
.editorWrap a:hover {
  opacity: 0.6;
  text-decoration: underline;
}
.editorWrap ul {
  padding-inline-start: 20px;
  list-style: disc;
}
.editorWrap ol {
  list-style: decimal;
}
.editorWrap img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
a.fr-strong {
  font-weight: bold;
}
a.fr-green {
  color: #318000;
}
/* 編輯器樣式 End */

/* 文字廣告橫幅 開始 */
#ad_zone_top.top_ad {
  height: 50px;
  background-color: #000;
  width: 100%;
  position: fixed;
  margin: 0;
  top: 0;
  left: 0;
  z-index: 1301;
}

#ad_zone_top.top_ad .ad_zone_top {
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10001;
  overflow: hidden;
}

#ad_zone_top.top_ad .ad_zone_top .ad_zone_close_top {
  position: absolute;
  width: 80px;
  height: 50px;
  top: -10px;
  right: 0px;
  z-index: 10002;
  color: #fff;
  cursor: pointer;
}


#marquee_vertical.marquee_vertical {
  height: 50px;
  overflow: hidden;
  background-color: #000;
}

#marquee_vertical ul, ul li {
  margin: 0;
  padding: 0;
}
#marquee_vertical ul, ul li {
  margin: 0;
  padding: 0;
}
/* 文字廣告橫幅 結束 */

/* 輪播圖 開始 */
.banner img {
  width: 100%;
}
/* 輪播圖 結束 */


/* 網頁版選單-開始 */

/* navbar置頂黏貼 */
.sticky-element {
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
  z-index: 1;
}
/* /navbar置頂黏貼 */

/* .dropdown-content .row ul li {
  margin-bottom: 15px;
}
.dropdown-content .row ul li a {
  text-decoration: none;
  color: #2A2F24;
}
.dropdown-content .row ul li a {
  text-decoration: none;
  color: #2A2F24;
}
.dropdown-content .row a {
  text-decoration: none;
  color: #2A2F24;
}
.nav_icon {
  display: flex;
  justify-content: flex-start;
  margin: 20px;
  float: right;
}
.nav_icon a {
  display: inline-flex;
  margin-right: 30px;
}
.nav_icon a img {
  width: 2rem;
}
.web_navbar {
  position: relative;
  display: inline-block;
  height: 65px;
}
.dropdown-content {
  display: none;
  position: absolute;
  text-align: start;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  z-index: 1;
}

.menu-open {
  margin: 30px;
}
@media screen and (max-width: 991px) {
  .nav_icon {
    display: none;
  }

  .web_navbar{
    display: none;
  }
} */
/* 網頁版選單-結束 */


/* 手機版選單-開始 */

/* mob-accordion-navbar 開始 */
/* .accordion .link {
	cursor: pointer;
	display: block;
	padding: 5px 5px 20px;
	color: #4D4D4D;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid #CCC;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accordion li:last-child .link {
	border-bottom: 0;
}

.accordion li i {
	position: absolute;
	top: 16px;
	left: 12px;
	font-size: 18px;
	color: #595959;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.accordion li.open .link {
	color: #CEB391;
}
.accordion li.open i {
	color: #CEB391;
}

.accordion li.default .submenu {display: block;} */
/**
 * Submenu
 -----------------------------*/
 /* .submenu {
  display: none;
  background: #F7F7F6;
  font-size: 14px;
}

.submenu li {
  border-bottom: 1px solid #C5C5C4;
}

.submenu a {
  display: block;
  text-decoration: none;
  color: #999999;
  padding: 12px;
  text-align: start;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.submenu a:hover {
  background: #D9D8D4;
  color: #484745;
} */
/* mob-accordion-navbar 結束 */
/* 
.mob-nav_icon {
  width: 20px;
  margin-right: 10px;
}

.offcanvas.offcanvas-top {
  height: 100%;
  }
  .mob-menu-open {
    margin: 5px;
  }
  @media only screen and (min-width: 1024px) {
  .mob_navbar {
    display: none;
  }
} */

/* 手機版選單-結束 */


/* 回到頂部-開始 */
.back-top {
z-index: 9999;
position: fixed;
bottom: 15px;
right: 40px;
cursor: pointer;
/* opacity: 0.5; */
filter: Alpha(opacity=50);
width: 45px;
height: 45px;
/* background: #a7a7a7 center no-repeat
  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iQ2FwYV8xIgogICB4PSIwcHgiCiAgIHk9IjBweCIKICAgd2lkdGg9IjUxMnB4IgogICBoZWlnaHQ9IjUxMnB4IgogICB2aWV3Qm94PSIwIDAgNDUxLjg0NiA0NTEuODQ3IgogICBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NTEuODQ2IDQ1MS44NDc7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjUgcjEwMDQwIgogICBzb2RpcG9kaTpkb2NuYW1lPSJhcnJvdy1wb2ludC10by1yaWdodC5zdmciPjxtZXRhZGF0YQogICBpZD0ibWV0YWRhdGE0MSI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICBpZD0iZGVmczM5IiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTYwMCIKICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iODM3IgogICBpZD0ibmFtZWR2aWV3MzciCiAgIHNob3dncmlkPSJmYWxzZSIKICAgaW5rc2NhcGU6em9vbT0iMC40NjA5Mzc1IgogICBpbmtzY2FwZTpjeD0iMjU2IgogICBpbmtzY2FwZTpjeT0iMjU2IgogICBpbmtzY2FwZTp3aW5kb3cteD0iLTgiCiAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0iQ2FwYV8xIiAvPgo8ZwogICBpZD0iZzMiCiAgIHN0eWxlPSJmaWxsOiNmZmZmZmYiCiAgIHRyYW5zZm9ybT0ibWF0cml4KDAsLTEsLTEsMCw0NTEuODQ2NSw0NTEuODQ2NSkiPgoJPHBhdGgKICAgZD0iTSAzNDUuNDQxLDI0OC4yOTIgMTUxLjE1NCw0NDIuNTczIGMgLTEyLjM1OSwxMi4zNjUgLTMyLjM5NywxMi4zNjUgLTQ0Ljc1LDAgLTEyLjM1NCwtMTIuMzU0IC0xMi4zNTQsLTMyLjM5MSAwLC00NC43NDQgTCAyNzguMzE4LDIyNS45MiAxMDYuNDA5LDU0LjAxNyBjIC0xMi4zNTQsLTEyLjM1OSAtMTIuMzU0LC0zMi4zOTQgMCwtNDQuNzQ4IDEyLjM1NCwtMTIuMzU5IDMyLjM5MSwtMTIuMzU5IDQ0Ljc1LDAgbCAxOTQuMjg3LDE5NC4yODQgYyA2LjE3Nyw2LjE4IDkuMjYyLDE0LjI3MSA5LjI2MiwyMi4zNjYgMCw4LjA5OSAtMy4wOTEsMTYuMTk2IC05LjI2NywyMi4zNzMgeiIKICAgaWQ9InBhdGg1IgogICBzdHlsZT0iZmlsbDojZmZmZmZmIgogICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgo8L2c+CjxnCiAgIGlkPSJnNyI+CjwvZz4KPGcKICAgaWQ9Imc5Ij4KPC9nPgo8ZwogICBpZD0iZzExIj4KPC9nPgo8ZwogICBpZD0iZzEzIj4KPC9nPgo8ZwogICBpZD0iZzE1Ij4KPC9nPgo8ZwogICBpZD0iZzE3Ij4KPC9nPgo8ZwogICBpZD0iZzE5Ij4KPC9nPgo8ZwogICBpZD0iZzIxIj4KPC9nPgo8ZwogICBpZD0iZzIzIj4KPC9nPgo8ZwogICBpZD0iZzI1Ij4KPC9nPgo8ZwogICBpZD0iZzI3Ij4KPC9nPgo8ZwogICBpZD0iZzI5Ij4KPC9nPgo8ZwogICBpZD0iZzMxIj4KPC9nPgo8ZwogICBpZD0iZzMzIj4KPC9nPgo8ZwogICBpZD0iZzM1Ij4KPC9nPgo8L3N2Zz4=);
background-size: 24px 24px; */
border-radius: 12px;
border: 1px rgba(255, 255, 255, 0.6) solid;
/* box-shadow: 0px 0px 3px #ffffff; */
transform: translateY(0%);
transition: all 0.2s linear;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
}

.back-top:hover {
opacity: 0.8;
filter: Alpha(opacity=80);
box-shadow: 0px 0px 6px #ffffff;
}

.back-top.hide {
opacity: 0;
filter: Alpha(opacity=0);
transform: translateY(150%);
}

@media (max-width: 575.98px) { 
  .back-top {
    right: 1.5rem;
  }
}
/* 回到頂部-結束 */

/* 桌面聯絡按鈕-開始 */
.contact_icon {
  position: fixed;
  bottom: 2em;
  left: 2.5em;
  width: 50px;
  z-index: 99999;
}

.contact_icon.contact-right {
  bottom: 65px;
  left: auto;
  right: 40px;
}

@media (max-width: 575.98px) { 
  .contact_icon.contact-right {
    right: 1.5rem;
  }
}

/* 預設情況下，元件隱藏 */
/* .contact_icon {
  display: none;
} */

/* 425px 及以上的情況下，顯示元件 */
/* @media (min-width: 425px) {
  .contact_icon {
    display: block;
  }
} */

/* 新聯絡按鈕連結 */
.open-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 70px;
  right: 40px;
  width: 45px;
  height: 45px;
  border-radius: 12px;
  font-size: 25px;
  z-index: 99999;
  cursor: pointer;
}

.open-chat:hover {
  opacity: 0.8;
}

.chat-content {
  display: none;
  position: fixed;
  bottom: 120px;
  right: 40px;
  z-index: 99999;
  border-radius: 12px;
  background: #F1F3F4;
}

.chat-content p {
  margin-bottom: 0;
}

.chat-top {
  margin-bottom: 1rem;
  padding: 20px;
  border-radius: 12px 12px 0 0; 
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 600;
}

.chat-middle {
  padding: 0 20px;
}

.chat-middle a {
  margin-bottom: 1rem;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: #fff;
  color: #212529;
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 15px;
  font-weight: 600;
}

.chat-middle a:hover {
  background: #fbf8f8;
}

.chat-middle a img {
  width: 40px;
}

.chat-bottom {
  padding: 0 20px 20px 20px;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 600;
}

.contact-left .open-chat {
  bottom: 15px;
  left: 40px;
  right: auto;
}

.contact-left .chat-content {
  bottom: 70px;
  left: 40px;
  right: auto;
}

@media (max-width: 575.98px) { 
  .open-chat , .chat-content {
    right: 1.5rem;
  }

  .contact-left .open-chat {
    left: 1.5rem;
  }
  
  .contact-left .chat-content {
    left: 1.5rem;
  }
}

/* 桌面聯絡按鈕-結束 */

/* 頁尾樣式-開始 */

/* 網頁版footer start*/
.footer-shadow {
  box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1);
}
.footer-a{
  text-decoration: none;
  font-size: 13px;
  color: #525252;
  font-family: "KeepCalm";
}
.copyright-font{
  text-align: center;
  font-size: 14px;
  margin-top: 5px;
  color: #525252;
  text-decoration: none;
  margin-bottom: 5px;
}
.copyright-font p {
  line-height: 1;
}
.copyright-font span {
  font-size: 14px;
}
/* footer end*/

/* 手機版時將網頁版footer隱藏 start */
.mob-footer {
  display: none;
}
@media only screen and (min-width: 767.98px) {
  .mob-footer {
    display: block;
  }
}
/* 手機版時將網頁版隱藏 end */

/* 網頁版時將手機版footer隱藏 start */
.mob-footer-hidding {
  display: none;
}

@media only screen and (max-width: 767.98px) {
  .mob-footer-hidding {
    display: block;
  }
}
/* 網頁版時將手機版footer隱藏 end */

/* 手機版footer樣式 start */
.acc {
  box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 0;
  margin-bottom: 0px;
}

.acc li {
  list-style-type: none;
  padding: 0;
}
.mob-footer-font{
  font-size: 13px;
  color:#2A2F24;
  margin: 5px;
  text-decoration: none;
}
.acc_ctrl {
  background: #FFFFFF;
  border: none;
  border-bottom: solid 1px #F2F2F2;
  cursor: pointer;
  display: block;
  outline: none;
  position: relative;
  text-align: center;
  width: 100%;
  padding-top: 8px;
}

.acc_ctrl:before {
  background: #44596B;
  content: '';
  height: 2px;
  margin-right: 37px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 14px;
}

.acc_ctrl:after {
  background: #44596B;
  content: '';
  height: 2px;
  margin-right: 37px;
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
}

.acc_ctrl.active:before {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.acc_ctrl.active h2, .acc_ctrl:focus h2 {
  position: relative;
}

.acc_panel {
  background: #EEEEEE;
  display: none;
  overflow: hidden;
}
.mob-footer-bgc{
  background-color: #333333;
}
.copyright-font2{
  text-align: center;
  font-size: 13px;
  margin-top: 5px;
  color: #FFFFFF;
  margin-bottom: 0px;
}
/* 手機版footer樣式 end */

/* 頁尾位置 */
.footer-position {
  background-color: #ffff;
  color: #fff;
  position: static;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 5;
}

/* 頁尾樣式-結束 */


/* 搜尋bar-開始 */
/* .searchBar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 10px;
}

.searchQueryInput {
  height: 2rem;
  background: rgb(245, 245, 245,0);
  color: #444444;
  outline: none;
  border: 1px solid #88888880 ;
  border-radius: 1.625rem;
  padding: 0 3.5rem 0 1.5rem;
  font-size: 14px;
}

.searchQuerySubmit {
  width: auto;
  margin-right: 60px;
  height: 2.8rem;
  margin-left: -2.5rem;
  background: none;
  border: none;
  outline: none;
}

.searchQuerySubmit:hover {
  cursor: pointer;
} */

/* 搜尋bar-結束 */

/* !!!所有頁面共用!!! 結束----------- */

/* 首頁-開始 */

/* 蓋版廣告 */

.overlay-ad {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  }

  /* 廣告內容樣式 */
  .overlay-ad-content {
    position: relative;
    text-align: center;
    color: #fff;
  }

  /* 關閉按鈕樣式 */
  .overlay-ad-close-btn {
    position: absolute;
    top: -2px;
    right: 270px;
    width: 50px;
    height: 50px;
    border: 1px solid #FFF;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #fff;
  }

  .overlay-ad-close-btn .close-text {
    font-size: 13px;
    color: #FFF;
  }

  .overlay-ad-close-btn #countdown {
    font-size: 15px;
    color: #FFF;
    display: block;
  }

  .overlay-ad-img {
    max-width: 40%;
    height: auto;
    padding-top: 50px;
  }

  @media (max-width: 820px) {
    .overlay-ad-img {
      max-width: 50%;
    }
    .overlay-ad-close-btn {
    top: 2px;
    right: 160px;
  
  }
  }
  @media (max-width: 767px) {
    .overlay-ad-img {
      max-width: 50%;
    }
    .overlay-ad-close-btn {
    top: 1px;
    right: 150px;
  }
  }
  @media (max-width: 575px) {

    .overlay-ad-close-btn {
      width: 40px;
      height: 40px;
    }
    .overlay-ad-close-btn .close-text {
      font-size: 12px;
    }
  
    .overlay-ad-close-btn #countdown {
      font-size: 14px;
    }
    .overlay-ad-img {
      max-width: 60%;
    }
    .overlay-ad-close-btn {
    top: 6px;
    right: 75px;
  }
  }
  @media (max-width: 425px) {

    .overlay-ad-close-btn {
      width: 35px;
      height: 35px;
    }
    .overlay-ad-close-btn .close-text {
      font-size: 11px;
    }
  
    .overlay-ad-close-btn #countdown {
      font-size: 13px;
    }
    .overlay-ad-img {
      max-width: 60%;
    }
    .overlay-ad-close-btn {
    top: 14px;
    right: 50px;
  }
  .overlay-ad-close-btn .close-text {
    font-size: 8px;
    color: #FFF;
  }
  }
  @media (max-width: 320px) {
    .overlay-ad-close-btn {
    top: 13px;
    right: 30px;
  }
  }
/* 蓋版廣告- 結束 */

/* 網頁版 */
.when-mob-hide {
  display: block;
}
@media (max-width: 768px) {
  .when-mob-hide {
    display: none;
  }
}

/* 手機版 */
.when-web-hide {
  display: none;
}

@media (max-width: 768px) {
  .when-web-hide {
    display: block;
  }
}
/* 底部隱私權提示 -開始 */
.privacyCard {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 0 6px 3px rgba(0, 0, 0, .4);
  opacity: .9;
}
/* 底部隱私權提示 -結束 */

/* 首頁-結束 */


/* 登入、註冊頁面-開始 */
.select-type{
  width: 10rem;
  padding: 6px 8px;
  font-size: 12px;
  border-bottom: #C9C7CC solid 1px ;
  color: #504F51;
}
.select-type2{
  padding: 6px 8px;
  font-size: 12px;
  border: 0;
  border-bottom: #C9C7CC solid 1px ;
  color: #504F51;
  margin-right: 8px;
  outline: none;
}
.select-type2 select {
  border: 0;
}
.input-type{
  border: 0;
  border-bottom: #C9C7CC solid 1px;
  width: 20rem;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
}
@media screen and (max-width: 768px) {
  /* 在手機版畫面時的設定 */
.input-type{
  border-bottom: #C9C7CC solid 1px;
  width: 20rem;
  padding: 11px;
  font-size: 12px;
  }
}

.input-type4{
  border: 0;
  border-bottom: #C9C7CC solid 1px;
  width: 26rem;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
  }

.ck_banner4 {
  padding: 20px 0 0px;
  margin-top: 50px;
}

.ck_banner4 .ck_banners {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
}

.ck_banner4 .ck_banners > li {
  width: calc(50% - 10px);
  margin-right: 20px;
  margin-bottom: 20px;
}

.ck_banner4 .ck_banners > li:last-child {
  margin-right: 0;
}

.ck_banner4 .ck_banners > li a {
  position: relative;
}

@media (max-width: 768px) {
  .ck_banner4 .ck_banners > li {
    width: 100%; 
    margin-right: 0;
  }
}

@media screen and (min-width: 376px) and (max-width: 1199px) {
  .input-type4 {
    width: 16.7rem;
  }
}
@media screen and (min-width: 1200px) {
  .input-type4 {
    width: 21.6rem;
  }
}

@media screen and (max-width: 375px) {
  .input-type4 {
    width: 11.7rem;
  }
}


.form-font{
font-size: 14px;
color: #333333;
margin-bottom: 15px;
font-weight: 500;
line-height: 1;
}
/* 標題分隔 */
.title {
margin: 40px;
text-align: center;
}
.title span {
display: block;
color: #504F51;
position: relative;
}
.title span:before,
.title span:after {
content: "";
position: absolute;
top: 50%;
background: #aaa;
width: 10%;
height: 1px;
}
.title span:before {
left: 22%; 
}
.title span:after {
right: 22%;
}
.btn-container {
  display: flex;
  flex-direction: column;
  justify-content: center;  
}
.lg_fb {
  background: #4267b2;
  min-width: 100%;
  width: auto;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  padding: 10px 0;
  margin-bottom: 20px;
}
.lg_line {
  background: #00b901;
  min-width: 100%;
  width: auto;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  padding: 10px 0;
  margin-bottom: 20px;
}
.login-btn{
  min-width: 100%;
  width: auto;
}
.meb-login {
  max-width: 50%;
  margin: 0 auto;
}

/* .meb-register{
  display: none;
} */
/* 登入、註冊頁面-結束 */

/* 所有商品 開始 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.pages {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.page {
  padding: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  color: #2A2F24;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.page:hover {
  background-color: #E5E5E5;
  color: #fff;
}
.page2 {
  height: 25px;
  width: 25px;
  text-decoration: none;
  color: #2A2F24;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.active {
  background-color: #E5E5E5;
  color: #fff;
}

/* 網頁版 */
.web-page {
  display: block;
}
@media (max-width: 320px) {
  .web-page {
    display: none;
  }
}

/* 手機版 */
.mob-page {
  display: block;
}

@media (min-width: 375px) {
  .mob-page {
    display: none;
  }
}

.img-size{
  width: 100%;
  height: 100%;
  padding: 2px;
  aspect-ratio:3/4;
}

/* 手機版商品資訊 */

.pdlist_gridwrap {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
  /* padding: 2px; */
}
.col3 .grid-item {
  position: relative;
  padding: 5px;
}
.col3 .grid-item .productsList_linkimg {
  position: relative;
  display: block;
}
.col3 .grid-item .productsList_linkimg .grid_img {
  width: 100%;
}
.col3 .grid-item .productsList_linkimg .pl_img_desc {
  color: #000;
  font-size: 18px;
  margin-bottom: 15px;
}
.pd_info.is-touch {
  max-width: 100%;
  display: block;
}
.prod-info{
  width: 240px;
  text-decoration: none;
  margin-left: 5px;
}
.pd_title1 {
  width: 100%;
  display: block;
  text-align: left;
  /* margin-bottom: 5px;
  height: 15px; */
  font-size: 15px;
  letter-spacing: 3px;
  text-decoration: none;
  color: #333333;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "KeepCalm";
}

.pd_defaultprice {
  float: left;
  font-size: 15px;
  color: #aaaaaa;
  text-decoration: line-through;
  margin-right: 10px;
  font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
}
.pd_price {
  float: left;
  font-size: 15px;
  color: #333333;
  font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
}
.pd_soldout {
  float: left;
  font-size: 15px;
  color: #aaaaaa;
  margin-right: 10px;
  font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
}
.pd_instock2 {
  float: left;
  font-size: 15px;
  margin-left: 10px;
  color: #333333;
  font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
}
/* 小於 768px 的介面（例如手機） */
@media (max-width: 767px) {
  .pdlist_gridwrap.col3 {
    width: 100%; /* 讓每個項目佔滿一行 */
    margin-bottom: 20px; /* 加大項目之間的間距 */
  }
  .prod-info {
    width: 100%; /* 項目的寬度佔滿螢幕 */
  }
  .pd_title1 {
    font-size: 14px; /* 較小的字型大小 */
  }
}

/* 大於等於 768px 的介面（例如平板、桌面） */
@media (min-width: 768px) {
  .pdlist_gridwrap.col3 {
    width: calc(33.33% - 20px); /* 保留 3 個項目一行的佈局 */
    padding: 10px; /* 調整項目的內距 */
    margin-bottom: 0; /* 恢復項目之間的間距 */
  }
}

/* /手機版商品資訊 */

/* 所有商品 結束 */


/* 商品內頁-開始*/

/* 商品overlay效果 */

.overlay-outer {
  position: relative;
  max-width: 100%;
  margin-bottom: 20px; /* 调整这个值来设置底部间距 */
  overflow: hidden;
}

.overlay {
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
}


a:hover .overlay {
  opacity: 1;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out 0s;
}

.overlay-outer:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-title {
  color: #333333;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 25px;
  font-size: 20px;
  text-transform: uppercase;
}
.content-text {
  color: #333333;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 25px;
  font-size: 20px;
  text-transform: uppercase;
}
.content-size {
  color: #333333;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 17px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.original-price{
  margin-right: 10px;
  color: red;
  text-decoration: line-through;
}
.sizing{
  color: #333333;
  border: 1px #ffffff solid;
  font-size: bold;
  width: 36px;
  height: 36px;
  line-height: 36px;
}
.sizing-soldout{
  margin-right: 7px;
  color: #333333;
  background-color: #cccccc;
  border: 1px #ffffff solid;
  font-size: bold;
  padding: 8px;
}
.fadeIn_bottom {
  top: 70%;
}
/* /商品overlay效果 */

/* 數量增減input */
.skin-1 .num-in {
float: left;
width: 200px;
}

.skin-1 .num-in span {
display: block;
float: left;
width: 30px;
height: 32px;
line-height: 32px;
text-align: center;
position: relative;
cursor: pointer;
}

.skin-1 .num-in span.dis:before {
background-color: #ccc;
}

.skin-1 .num-in input {
float: left;
width: 85px;
height: 32px;
border: 1px solid #6E6F7A;
border-radius: 5px;
color: #000;
text-align: center;
padding: 0;
}

.skin-1 .num-in span.minus:before {
content: '';
position: absolute;
width: 15px;
height: 2px;
background-color: #00A94F;
top: 50%;
left: 0;
}

.skin-1 .num-in span.plus:before, .skin-1 .num-in span.plus:after {
content: '';
position: absolute;
right: 0px;
width: 15px;
height: 2px;
background-color: #00A94F;
top: 50%;
}

.skin-1 .num-in span.plus:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/* /數量增減input */

.prod-title {
  color: #000000;
  font-size: 20px;
  margin-bottom: 15px;
  font-family: "KeepCalm";
  line-height: normal;
  font-weight: normal;
}
.prod-font{
color: #bc8f8f;
font-size: 14px;
}
.prod-font2{
color: #47403F;
font-size: 14px;
}
.pdcnt_info_price {
  border-bottom: 1px solid #aaaaaa;
  padding: 12px 0;
  margin-bottom: 15px;
  position: relative;
  display: flex;
}
.pdcnt_info_price .pdcnt_info_price-origin {
  color: #aaaaaa;
  font-size: 20px;
  text-decoration: line-through;
  margin-right: 15px;
}
.pdcnt_info_price .pdcnt_info_price-sale {
  color: #000000;
  font-size: 20px;
  font-weight: bold;
}
.pc_num {
  color: #aaaaaa;
  font-size: 13px;
  font-family: "taile";
}

.accordion-single {
border-bottom: 1px solid #efefef;
margin-top: 10px;
}

.accordion-single-title {
border-top: 1px solid #efefef;
padding: 20px;
cursor: pointer;
position: relative;
font-size: 15px;
margin: 0;
}

.accordion-single-title::after {
content: "";
position: absolute;
right: 25px;
top: 50%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #999;
border-right: solid 2px #999;
transform: translateY(-50%) rotate(135deg);
}

.accordion-single-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
padding: 0 20px;
}

.accordion-single-content p {
/* text-align: start;
color: #bc8f8f; */
}

.accordion-single-item.is-open .accordion-single-content {
max-height: 300px;
overflow-y: auto;
}

.accordion-single-item.is-open .accordion-single-title::after {
transform: translateY(-50%) rotate(315deg);
}
/* 商品圖片-開始 */


/* 商品圖片-結束 */

/* 加入購物車按鈕-開始 */
.prod_btn1 {
  max-width: 200px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #333333;
  color: #ffffff;
  padding: 15px 0;
  background: #333333;
  display: inline-block;
  text-align: center;
  /* margin-left: 6px; */
}
.prod_btn {
  max-width: 200px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #dddddd;
  color: #000000;
  padding: 15px 0;
  background: #ffffff;
  display: inline-block;
  text-align: center;
}
.prod_btnwrap {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 1rem;
}
.prod_btn1,
.prod_btn {
  max-width: 150px;
  width: 100%;
  text-decoration: none;
  padding: 15px 0;
  display: inline-block;
  text-align: center;
}

.prod_btn1 {
  border: 1px solid #333333;
  color: #ffffff;
  background: #333333;
}

.prod_btn1:hover {
  background: #333333;
}

.prod_btn {
  border: 1px solid #dddddd;
  color: #000000;
  background: #ffffff;
}

@media (max-width: 425px) {
  .prod_btn1,
  .prod_btn {
    max-width: 150px;
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .prod_btn1,
  .prod_btn {
    max-width: 100px;
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .prod_btn1,
  .prod_btn {
    /* max-width: 100px; */
    font-size: 14px;
  }
  .prod_btnwrap {
    justify-content: space-between;
  }
}
@media (max-width: 1024px) {
  .prod_btn1,
  .prod_btn {
    /* max-width: 120px; */
    font-size: 14px;
  }
}

@media (max-width: 575.98px) { 
  .product-inner {
    padding-bottom: 60px;
  }

  .prod_btnwrap {
    padding: 5px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background-color: #fff;
  }
}
/* 加入購物車按鈕-結束 */

/* 加入收藏  start*/
.add2wish input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.add2wish {
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  transition: 100ms;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.checkmark {
  top: 0;
  left: 0;
  height: 1.6rem;
  width: 1.6rem;
  transition: 100ms;
  animation: dislike_effect 400ms ease;
}

.add2wish input:checked ~ .checkmark path {
  fill: #FF5353;
  stroke-width: 0;
}

.add2wish input:checked ~ .checkmark {
  animation: like_effect 400ms ease;
}

.add2wish:hover {
  transform: scale(1.1);
}

@keyframes like_effect {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes dislike_effect {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
/* 加入收藏  end*/
/* 商品內頁-結束 */




/* 購物車結帳頁面01-開始 */

/* 網頁版table-開始 */
.table-head{
  font-weight: bold;
  font-size: 15px;
  text-align: left;
  white-space: nowrap;

}
.select-type3{
  padding: 5px;
  font-size: 14px;
  border: 0;
  border-bottom: #C9C7CC solid 1px ;
  color: #5E5C5C;
  }
  .select-type3 select {
    border: 0;
    outline: none;
  }
  .cart-font{
    font-size: 14px;
    color: #4C4C4C;
    text-align: start;
    margin-bottom: 15px;
    font-weight: normal;
  }
  .cart-font2{
    font-size: 12px;
    color: #A5A5A5;
    text-align: start;
  }

/* @media (max-width: 991px) {
  .table-responsive{
   display: none;
  }
} */
/* cart01按鈕-開始 */
.cart01_btn1 {
  max-width: 200px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #333333;
  color: #ffffff;
  padding: 10px 0;
  background: #333333;
  display: inline-block;
  text-align: center;
  margin-left: 6px;
}
.cart01_btn {
  max-width: 200px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #dddddd;
  color: #000000;
  padding: 10px 0;
  background: #ffffff;
  display: inline-block;
  text-align: center;
}

.cart01_btnwrap {
  text-align: right;
  flex-direction: row;
  justify-content: space-between;
}

.cart01_btn1,
.cart01_btn {
  max-width: 150px;
  width: 100%;
  text-decoration: none;
  padding: 10px 0;
  display: inline-block;
  text-align: center;
}

.cart01_btn1 {
  border: 1px solid #333333;
  color: #ffffff;
  background: #333333;
}

.cart01_btn {
  border: 1px solid #dddddd;
  color: #000000;
  background: #ffffff;
}

@media (max-width: 425px) {
  .cart01_btn1,
  .cart01_btn {
    max-width: 150px;
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .cart01_btn1,
  .cart01_btn {
    max-width: 100px;
    font-size: 14px;
  }
}
@media (max-width: 1024px) {
  .cart01_btn1,
  .cart01_btn {
    max-width: 120px;
    font-size: 14px;
  }
}
/* cart01按鈕-結束 */

/* 網頁版table-結束 */

/* 手機版table-開始 */

/* 在網頁版時隱藏 mob-table 類別 */
@media (min-width: 1024px) {
  .mob-table {
    display: none;
  }
}
/* 手機版table-結束 */

/* 購物車結帳頁面01-結束 */




/* 購物車結帳頁面02-開始 */
.select-type3{
  padding: 10px;
  font-size: 12px;
  border-bottom: #C9C7CC solid 1px ;
  color: #504F51;
  width: 100%;
  }
.select-type4{
  padding: 6px 8px;
  font-size: 12px;
  border: 0;
  border-bottom: #C9C7CC solid 1px ;
  color: #504F51;
  width: 10rem;
  outline: none;
  }
  .select-type5{
    padding: 10px;
    font-size: 12px;
    border-bottom: #C9C7CC solid 1px ;
    color: #504F51;
    width: 50%;
    }
  .op_use {
    max-width: 70px;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    color: #ffffff;
    background: #333333;
    display: inline-block;
    margin-left: 10px;
    text-decoration: none;
  }
  .input-type2{
    border-bottom: #C9C7CC solid 1px;
    width: 13rem;
    padding: 10px;
    font-size: 12px;
    }
  .input-type3{
    border: 0;
    border-bottom: #C9C7CC solid 1px;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    }
    .textarea{
    border: 1px solid #ccc;
    padding: 5px; 
    width: 100%;
    max-height: 200px;
    font-size: 14px;
  }
  .op_totalwrap {
    float: right;
    width: 100%;
  }
  .op_table {
    padding: 10px 0;
  }
  .op_tr {
    display: -ms-flexbox;
    display: flex;
    padding: 5px;
  }
  .op_td {
    width: calc(100% / 2);
    text-align: right;
  }
  @media (max-width: 768px) {
    .cart-btn {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
  /* cart02按鈕-開始 */
.cart02_btn1 {
  max-width: 200px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #333333;
  color: #ffffff;
  padding: 10px 0;
  background: #333333;
  display: inline-block;
  text-align: center;
  margin-left: 6px;
}
.cart02_btn {
  max-width: 200px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #dddddd;
  color: #000000;
  padding: 15px 0;
  background: #ffffff;
  display: inline-block;
  text-align: center;
}
.cart02_btnwrap {
  text-align: center;
  flex-direction: row;
  justify-content: space-between;
}

.cart02_btn1,
.cart02_btn {
  max-width: 150px;
  width: 100%;
  text-decoration: none;
  padding: 10px 0;
  display: inline-block;
  text-align: center;
}

.cart02_btn1 {
  border: 1px solid #333333;
  color: #ffffff;
  background: #333333;
}

.cart02_btn1:hover {
  background: #333333;
}

.cart02_btn {
  border: 1px solid #dddddd;
  color: #000000;
  background: #ffffff;
}

@media (max-width: 425px) {
  .cart02_btn1,
  .cart02_btn {
    max-width: 150px;
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .cart02_btn1,
  .cart02_btn {
    max-width: 100px;
    font-size: 14px;
  }
}
@media (max-width: 1024px) {
  .cart02_btn1,
  .cart02_btn {
    max-width: 120px;
    font-size: 14px;
  }
}
/* cart02按鈕-結束 */

/* cart02 modal start */
.modal-btn {
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  justify-content: center;
  padding: 10px;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}

.modal-btn:hover,
.modal-btn:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: rgba(0, 0, 0, 0.65);
}

.modal-btn:hover {
  transform: translateY(-1px);
}

.modal-btn:active {
  background-color: #F0F0F1;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0);
}

.modal-btn-selected {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  justify-content: center;
  padding: calc(.5rem - 1px) calc(.3rem - 1px);
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}
/* cart02 modal end */

/* 購物車結帳頁面02-結束 */




/* 會員中心共用功能欄位-開始 */

@media (max-width: 991px) {
  .table-responsive {
    display: none;
  }
}

/* 網頁版側欄-開始 */
.flip {
  padding: 10px;
  text-align: center;
  border-radius: 15px 15px 0 0;
  background: #f5f5f5;
  cursor: pointer;
  color: #4C4C4C;
  font-weight: bold;
}

.panel {
  margin: 0;
  padding: 10px;
  text-align: center;
  border-radius: 0 0 15px 15px;
  background: #fff;
  border: solid 1px #c3c3c3;
  display: flex;
  font-family: 'Arial';
}

.panel-link {
  display: block;
  padding: 15px;
  font-weight: 400;
  color: #444444;
  background: none;
  text-decoration: none;
  width: 170px;
}

.panel-link.active {
  color: #961923;
  font-weight: bold;
}

/* 螢幕寬度最大為768px時隱藏網頁版 */
@media (max-width: 991px) {
  .mob-panel-hide {
    display: none;
  }
}

/* 螢幕寬度最大為820px時的樣式 */
@media (max-width: 820px) {
  .panel{
    padding: 0;
  }
  .panel-link {
    width: 100px;
    font-size: 14px;
  }
}
/* 螢幕寬度最大為1399.98px時的樣式 */
@media (max-width: 1399.98px) and (min-width: 1200px) {
  .panel .flex-column {
    display: block;
  }
  .panel-link {
    display: block;
    padding: 15px;
    width: 150px;
    font-size: 15px;
  }
}

/* 螢幕寬度介於1024px到1199.98px時的樣式 */
@media (max-width: 1199.98px) and (min-width: 1024px) {
  .panel .flex-column {
    display: block;
  }
  .panel-link {
    display: block;
    padding: 15px;
    width: 120px;
    font-size: 15px;
  }
}


/* 網頁版側欄-結束 */

/* 手機版側欄-開始 */
.meb-accordion {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.meb-accordion + .meb-accordion {
  margin-top: 1rem;
}

.meb-accordion input[type="radio"],
.meb-accordion input[type="checkbox"] {
  display: none;
}

.meb-accordion input:checked + .meb-accordion-subElements > .meb-accordion-subElement {
  height: 2.5rem;
  transform: scale(1);
}

.meb-accordion-item label {
  display: block;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 15px 15px 0px 0px;
  color: #4C4C4C;
  font-weight: bold;
  cursor: pointer;
}

.meb-accordion-item label:hover {
  background-color: #f5f5f5;
}

.meb-accordion-subElement {
  height: 0;
  transform-origin: 0 0;
  transform: scale(0);
  font-size: 0.9em;
  line-height: 2;
  background-color: #fff;
  border-bottom: rgba(167, 179, 189, 0.1) 1px solid;
  transition: height 0.3s, transform 0.3s;
  overflow: hidden;
}

.meb-accordion-subElement:hover {
  background-color: #D6D4D2;
  color: #111;
}

.meb-accordion-subElement a {
  display: block;
  margin-top: 10px;
  color: #444444;
  text-decoration: none;
}
.meb-menu {
  display: none;
}

@media (max-width: 991px) {
  .meb-menu {
    display: block;
  }
}
/* 手機版側欄-結束 */

/* 會員中心共用功能欄位-結束*/

/* 會員中心畫面-開始 */
.member_btn {
  max-width: 200px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #dddddd;
  color: #000000;
  padding: 15px 0;
  background: #ffffff;
  display: inline-block;
  text-align: center;
}
.new-order-title{
  background-color: #f5f5f5;
  color: #4C4C4C;
  border-radius: 3px;
  margin-top: 0;
}

/* 會員中心畫面-結束 */


/* 會員資料-開始 */
.meb-content{
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 15px 0 10px;
}
.meb-font{
  margin-bottom: 10px;
  width: 100%;
  font-size: 15px;
  display: block;
  color: #000;
  font-weight: normal;
}
.meb-input{
  width: 100%;
  font-size: 13px;
  border: 0;
  border-bottom: 1px solid #dddddd;
  padding: 5px;
  border-radius: 0;
}
.meb-input-s{
  width: 10rem;
  font-size: 13px;
  border: 0;
  border-bottom: 1px solid #dddddd;
  padding: 5px 5px 8px 5px;
  border-radius: 0;
}
.meb-select{
  padding: 10px;
  font-size: 12px;
  border: 0;
  border-bottom: #C9C7CC solid 1px ;
  color: #504F51;
  width: 15rem;
  }
  .meb-select2{
    padding: 10px;
    font-size: 12px;
    border: 0;
    border-bottom: #C9C7CC solid 1px ;
    color: #504F51;
    width: 5rem;
    outline: none;
    }
  .meb-select2 select {
    border: 0;
  }

  @media (max-width: 1024px) {
    .meb-select2 {
      padding: 10px;
      font-size: 12px;
      border-bottom: #C9C7CC solid 1px;
      color: #504F51;
      width: 11rem;
  }
  }
  
/* 網頁版表單內容-結束 */

/* 會員資料-結束 */

/* 常用收件地址-開始*/
.meb-input2{
  width: 33.8rem;
  font-size: 13px;
  border: 0;
  border-bottom: 1px solid #dddddd;
  padding: 11px;
  border-radius: 0;
  outline: none;
}
@media (max-width: 1199.08px) {
  .meb-input2 {
    width: 26.3rem;
  }
}
@media (max-width: 767.98px) {
  .meb-input2 {
    width: 23rem;
  }
  .meb-select2 {
    width: 8rem;
}
}
@media (max-width: 425px) {
  .meb-input2 {
    width: 18rem;
  }
  .meb-select2 {
    width: 6rem;
  }
}
@media (max-width: 375px) {
  .meb-input2 {
    width: 16rem;
  }
  .meb-select2 {
    width: 5rem;
  }
}
@media (max-width: 320px) {
  .meb-input2 {
    width: 11rem;
  }
  .meb-select2 {
    width: 4.5rem;
  }
}

.address-btn {
  max-width: 90px;
  width: 100%;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #333333;
  color: #ffffff !important;
  padding: 7px 0;
  background: #333333;
  display: inline-block;
  text-align: center;
}


/* 常用收件地址-結束*/

/* 收藏清單-開始 */
.wish_btn {
  max-width: 90px;
  width: 100%;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #333333;
  color: #ffffff;
  padding: 7px 0;
  background: #333333;
  display: inline-block;
  text-align: center;
}
.wish_btn2 {
  max-width: 80px;
  width: 100%;
  text-decoration: none;
  border: 1px solid #dddddd;
  color: #333333;
  padding: 7px 0;
  background: #ffffff;
  display: inline-block;
  text-align: center;
}
.wish-input {
  border-bottom: #C9C7CC solid 1px;
  width: 8rem;
  padding: 11px;
  font-size: 12px;
  font-weight: 400;
}
/* 收藏清單-結束 */

/* 購物金-開始 */

    /* 網頁版 */
    .web-tab {
      overflow: hidden;
      text-align: start;
    }

    .web-tab button {
      background-color: transparent; /* 背景色透明 */
      border: none;
      outline: none;
      cursor: pointer;
      padding: 5px 20px;
      transition: 0.3s;
      font-size: 17px;
      margin: 10px 0;
      color: #727272;
    }

    .web-tab button.active {
      border-bottom: 1px solid #961923; 
      color: #961923;
      font-weight: bold;
    }

    .web-tabcontent {
      display: none;
      padding: 6px 12px;
      border-top: none;
      text-align: center;
    }

    .web-tabcontent.active {
      display: block;
      background-color: transparent;
    }

    /* 手機版 */
    .mob-tab {
      overflow: hidden;
      width: 100%;
    }

    .mob-tab button {
      background-color: transparent; /* 背景色透明 */
      max-width: inherit;
      width: calc(100% / 2);
      border: none;
      outline: none;
      cursor: pointer;
      padding: 5px 20px;
      transition: 0.3s;
      font-size: 17px;
      margin: 10px 0;
      color: #727272;
      float: left;
    }

    .mob-tab button.active {
      border-bottom: 1px solid #961923; 
      color: #961923;
      font-weight: bold;
    }

    .mob-tabcontent {
      display: none;
      padding: 6px 12px;
      border-top: none;
      text-align: center;
    }

    .mob-tabcontent.active {
      display: block;
      background-color: transparent;
    }
/* 購物金-結束 */

/* 訂購成功畫面 start */
.odr-font{
  font-size: 34px;
  color: #3d4246;
  font-family: "KeepCalm";
}
.odr-font2{
  color: #3d4246;
  font-family: "KeepCalm";
}
.odr-content{
  border: 1px solid #a3a3a3;
  border-radius: 5px;
}

.odr-content2{
  background-color: #F9F9F9;
  border-radius: 8px;
}
/* 訂購成功畫面 end */


/* 優惠券-開始 */
@media (max-width: 375px) {
  .wish_btn2 {
    max-width: 40px;
    font-size: 14px;
}
}
@media (max-width: 375px) {
  .wish_btn2 {
    max-width: 40px;
    font-size: 14px;
}
}
/* 優惠券-結束 */

/* 訂單明細 start */
.of_totalwrap {
  max-width: 290px;
  float: right;
  width: 100%;
}
.op_table {
  padding: 10px 0;
}
.op_tr {
  display: flex;
  padding: 5px;
}
.op_td {
  width: calc(100% / 2);
  text-align: right;
}
.op_table1 {
  border-top: 1px solid #dddddd;
}
/* 訂單明細  end*/

/* 隱私政策、服務條款 start */
.privacy_content {
  /* line-height: 2; */
  color: #444443;
  font-size: 14px;
  /* padding: 0 15px; */
  /* margin-top: 20px; */
  /* margin-bottom: 20px; */
}
/* 隱私政策、服務條款 end */


/* 拖拉跑版調整 start */
.basicInfo li {
  line-height: normal;
}
.bread li {
  line-height: normal;
  font-weight: normal;
  font-size: 15px;
}
/* 拖拉跑版調整 end */


/* 最新商品 Start */
.products {
  display: block;
  position: relative;
  text-decoration: none;
}
.products:hover {
  text-decoration: none;
}
.img-rectangle, .img-square {
  overflow: hidden;
}
.products .img-rectangle img,
.products .img-square img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  transform: scale(1,1);
  transition: transform 0.5s;
}
/* 長方形圖片 */
.products .img-rectangle {
  padding-bottom: 150%;
  position: relative;
}
.products:hover .img-rectangle img {
  transform: scale(1.3,1.3);
}
/* 正方形圖片 */
.products .img-square {
  padding-bottom: 100%;
  position: relative;
}
.products:hover .img-square img {
  transform: scale(1.3,1.3);
}
.products-desc {
  margin: 8px 3px;
  letter-spacing: 2px;
  /* font-size: 15px; */
  font-weight: bold;
  font-family: "KeepCalm";
  /* color: #333333; */
}
.products-desc p {
  margin-bottom: 10px;
}
.products-desc .title {
  margin: 0;
  text-align: left;
  letter-spacing: 2px;
  font-weight: bold;
  font-family: "KeepCalm";
  /* color: #333333; */
}
.products-desc .title, .products-desc .size, .products-desc .price {
  margin-top: 0;
  margin-bottom: 10px;
  /* font-size: 14px; */
  line-height: 1;
}
.products-desc .price del {
  margin-right: 5px;
  color: #BDBBB8;
}
.products-desc-fadeIn {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255,255,255,0.7);
  transition: all 0.5s;
  opacity: 0;
}
.products-desc-fadeIn .title {
  margin-bottom: 18px;
  text-align: center;
  font-size: 18px;
}
.products-desc-fadeIn .size {
  margin-bottom: 18px;
  text-align: center;
}
.products-desc-fadeIn .size span {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  font-size: 17px;
  border: 1px solid #fff;
}
.products-desc-fadeIn .price {
  font-size: 20px;
}
.products:hover .products-desc-fadeIn {
 opacity: 1;
}
@media (max-width: 991.98px) {
  .products-desc-fadeIn {
    margin: 8px 3px;
    display: block;
    position: static;
    opacity: 1;
    background-color: #fff;
  }
  .products-desc-fadeIn .title {
    margin-bottom: 7px;
    text-align: start;
    font-size: 15px;
  }
  .products-desc-fadeIn .size {
    margin-bottom: 7px;
    text-align: start;
  }
  .products-desc-fadeIn .size span {
    display: inline-block;
    margin: 0 3px 0 0;
    padding: 0;
    font-size: 15px;
    border: none;
  }
  .products-desc-fadeIn .price {
    font-size: 15px;
  }
}
/* 最新商品 End */


/* 會員頁 Start */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-title-collapse {
  display: block;
  padding: 8px;
  border-radius: 15px 15px 0 0;
  background: #f5f5f5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #4C4C4C;
  font-weight: bold;
}

.menu-content {
  margin-bottom: 0;
  padding: 10px;
  border-radius: 0 0 15px 15px;
  border: 1px solid #c3c3c3;
}

.menu-content a {
  display: block;
  padding: 15px;
  font-weight: 400;
  color: #444444;
  text-decoration: none;
  text-align: center;
}

.menu-content li:hover a,
.menu-content li.active a {
  font-weight: bold;
  color: #961923;
}

@media (max-width: 991.98px) {
  .menu-content a {
    padding: 10px;
  }
}

.customer-title {
  margin-bottom: 0;
  padding: 8px;
  background-color: #f5f5f5;
  color: #4C4C4C;
  border-radius: 3px;
}

.customer-table {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.customer-table .table thead tr th {
  font-weight: bold;
  font-size: 15px;
}

.customer-table .table tbody tr td,
.customer-table .table tbody tr a {
  font-size: 14px;
  color: #4C4C4C;
  font-weight: normal;
}

.customer-table .table tbody tr a:hover {
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .customer-table,
  .customer-table .table {
    overflow: hidden;
  }

  .customer-table .table {
    min-width: 100%;
  }

  .customer-table .table th {
    display: none;
  }

  .customer-table .table tbody tr {
    margin-bottom: 15px;
    display: block;
    border: 1px solid #dee2e6;
  }

  .customer-table .table td {
    padding: 8px !important;
    display: block;
    border: none;
    text-align: left !important;
  }

  .customer-table .table td::before {
    content: attr(data-th) " : ";
    width: 80px;
    display: inline-block;
  }

}

.member-info {
  height: 100%;
  border: 1px solid #c3c3c3;
  text-align: center;
  color: #4C4C4C;
}

.member-info .title {
  margin: 0;
  padding: 8px;
  background-color: #f5f5f5;
}

.member-info .subtitle {
  margin: 8px 0;
  display: block;
  font-size: 14px;
  color: #4C4C4C;
}

.member-info .price {
  margin: 8px 0;
  font-weight: 500;
  font-size: 1.3rem;
}

.custom-btn {
  display: inline-block;
  padding: 15px 60px;;
  border: 1px solid #dddddd;
  color: #000000;
  text-decoration: none;
}

.custom-btn:hover {
  background-color: #f5f5f5;
  color: #961923;
}
/* 會員頁 End */


/* 訂單內頁 Start */
.order-table {
  overflow-x: auto;
  scrollbar-width: thin;
}

.order-table .table thead tr th {
  white-space: nowrap;
  font-weight: bold;
  font-size: 15px;
}

.order-table .table tbody tr td {
  padding: 15px 8px;
  vertical-align: middle;
  font-size: 14px;
  color: #4C4C4C;
  font-weight: normal;
}

.order-table img {
  width: 100px;
  height: auto;
  object-fit: contain;
}

.order-table p {
  margin-bottom: 10px;
}

.order-table .preOrder {
  display: inline-block;
  padding: 4px;
  border: 1px solid #dee2e6;
  color: #dc3545;
}

.order-table .prodNO {
  margin-bottom: 0;
  font-size: 12px;
  color: #A5A5A5;
}

@media (max-width: 991.98px) {
  .order-table .table th {
    display: none;
  }

  .order-table .table tbody tr {
    padding: 16px 0;
    display: grid;
    grid-template-columns: 50% 50%;
    border-bottom: 1px solid #C7C8C9;
  }

  .order-table img {
    width: 150px;
  }

  .order-table .table td:first-child {
    grid-row: 1 / 7;
    border: none;
    place-self: center;
  }

  .order-table .table td:not(:first-child) {
    padding-top: 0;
    padding-bottom: 10px;
    grid-column: 2 / 3;
    border: none;
    text-align: start !important;
  }

  .order-table .table td[data-th]::before {
    content: attr(data-th) " : ";
    padding-right: 8px;
    display: inline-block;
  }

}

.order-total {
  margin-left: auto;
}

.order-total td {
  padding: 10px 0;
  text-align: end;
  color: #4C4C4C;
}

.order-total td:first-child {
  padding: 10px 30px;
  font-size: 14px;
}

.pay-info {
  padding: 15px;
  border: 1px solid #c3c3c3;
  border-radius: 15px;
}

.pay-info .customer-title {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #000;
  border-radius: 0;
  font-size: 18px;
}

.pay-info-table {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}

.pay-info-table td {
  padding: 10px;
  font-size: 14px;
}

.pay-info-table td:first-child {
  width: 120px;
}

.order-directions {
  padding-left: 1rem;
  list-style: decimal;
}

.order-directions li {
  line-height: 2.3;
}

@media (max-width: 991.98px) {
  .order-directions {
    padding-left: 1.5rem;
  }
}

/* 訂單內頁 End */


/* 會員登入頁 End */
.account-outline {
  padding: 15px 25px;
  border: 1px solid #c3c3c3;
}

.icon-pos {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 1.5rem;
}
/* 會員登入頁 End */

/*# sourceMappingURL=style.css.map */