@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.headerRwdContainer { display: none; }
.rwdMenuContainer { display: flex; height: 50px; width: 100%; background: #E5E5E5; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); padding: 0 5px; position: fixed; top: 0; z-index: 150; }
.rwdMenuIcon { width: 50px; height: 100%; color: #333; text-align: center; cursor: pointer; line-height: 50px; position: absolute; right: 10px;}
.rwdMenuIcon .ion-navicon {font-size: 28px; padding: 1px 8px; background: #004986; color: #fff;}
.rwdMenuIcon .fa-times {font-size: 24px; padding: 1px 8px; color: #E89115; margin-top: 14px;}
.rwdMenuLogo { vertical-align: middle; text-align: center; margin: 15px 0 10px 8px; }
.rwdMenuLogo .step{ position: absolute; right: 8px; }
.rwdMenuLogo>a>img { width: 130px; }
.rwdMenuSearch{width: 50px;text-align: center; color: #ccc; cursor: pointer; line-height: 50px; font-size: 24px;}
.rwdMenuSearchContainer {
  height: 50px;
  background: rgba(180, 180, 180, 0.8);
  position: fixed;
  z-index: 39;
  top: 50;
  width: 100%;
  padding-top: 5px;
}

.rwdMenuSearchContainer input {
  font: normal 14px '微軟正黑體';
  letter-spacing: 1px;
  color: #555;
  line-height: 20px;
  border: none;
  border-bottom: solid 1px #ddd;
  padding: 5px;
  background: rgba(255, 255, 255, 0);
  border-radius: 0;
}

.rwdMenuSearchContainer input:focus {
  outline: none;
  background: none;
  border: none;
  border-bottom: solid 1px #ddd;
  box-shadow: none;
}

.rwdMenuSearchContainer .search {
  width: 50px;
  font: bold 25px "Century Gothic";
  letter-spacing: 1px;
  text-align: center;
  line-height: 40px;
}

.rwdMenuSearchContainer .search>a {
  color: #555;
  display: block;
  cursor: pointer;
}
.rwdMenuSearchContainer .search>a:hover{
  text-decoration: none;
}
.rwdHeaderNavContainer { position: fixed; top: 0; bottom: 0; right:0; padding-top: 50px; width: 100%; background: rgba(255, 255, 255, 0.5); z-index: 50; }
.rwdHeaderNav { position: absolute; top: 0; bottom: 0; right: 0; width: 250px; background: rgba(220, 220, 220, 0.9); z-index: 50; font: normal 15px 'Century Gothic', '微軟正黑體'; line-height: 50px; letter-spacing: 1px; padding: 70px 40px 0; overflow-x: hidden; overflow-y: scroll; }
.rwdHeaderNav>ul>li { border-bottom: 1px solid #999; }
.rwdHeaderNav>ul>li>a { color: #333; }
.rwdHeaderNav ul>li>a:hover { text-decoration: none; }
.rwdSideNavSecLayer { background: #777;}
.rwdSideNavSecLayer > ul { padding: 10px 0 10px 15px; margin: 5px 0; }
.rwdSideNavSecLayer > ul > li { line-height: 1.6; margin: 12px 0;}
.rwdSideNavSecLayer > ul > li > a { color: #ccc; padding: 0 0 0 0px;  }
.rwdSideNavThirdLayer { background: #999;}
.rwdSideNavThirdLayer ul { padding: 10px 0 10px 15px; }
.rwdSideNavThirdLayer ul li { line-height: 1.6; margin: 12px 0; }
.rwdSideNavThirdLayer>ul>li>a { color: #000; padding: 0 0 0 0px;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> include_phone_menu.php <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
.phoneMenu { width: 100%; height: 50px; background: #fff; position: fixed; bottom: 0; z-index: 30; display: none; border-top: 1px solid #ccc;}
.phoneMenuBox { text-align: center; padding: 5px 0; }
.phoneMenuBox a { color: rgb(107, 114, 128); }
.phoneMenuBox a:hover{
	text-decoration: none;
}
.phoneMenuBox i {
	font-size: 20px;
	line-height: 25px;
}
.phoneMenuTitle { font: normal 12px 'Century Gothic','微軟正黑體'; line-height: 16px; letter-spacing: 2px; }
.phoneMenuCartTitle { }

@supports(padding: env(safe-area-inset-bottom)) {
  .phoneMenu {
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); /* 增加內邊距以確保內容不會被安全區域遮擋 */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> RWD<<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1280px) {}
@media screen and (max-width:1200px) {
  /*20201223 聯絡我們圖片改為3D圖片*/
  .indexContactImg{
    width: 100%;
    /* padding-bottom: 50%; */
    position: relative;
  }
  .indexContactImg iframe{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  /**/
}
@media screen and (max-width:1100px) {
}
@media screen and (max-width:1000px) {

}
@media screen and (max-width:992px){
body{
	margin-bottom: 100px;
}
.rwd_header_mt { margin-top: 50px; }
.banner { padding-top: 0; }
.breadcrumb{padding-top: 30px;}
.indexArrivalImg{width: 90%;}
.indexArrivalTextContainer {
  width: calc(80% - 15px);
  background: rgba(0,0,0,0.6);
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 20%;
}
.indexProductContentHover{background: rgba(0,0,0,0.5);}
.indexProductContent{opacity: 1;}
.cartListTableContainer td{
  position: relative;
}
.cartListTableProductDeleteContainer{
  position: absolute;
  top: 10px;
  right: 10px;
}
.memberInfoContainer, .cartListContainer, .aboutContainer, .contactContainer, .FAQContainer, .memberOrderContainer, .productDetailContainer, .productBanner, .productDetailContainer, .cartCheckContainer, .cartInfoContainer { padding-top: 0; }
.notification { bottom: 60px;}
}
@media screen and (max-width:950px){}
@media screen and (max-width:900px) {}
@media screen and (max-width:830px) {
.memberPointContainer .tableHeaderRwdHide { display: none; }
.memberPointContainer .tableHeaderHide { display: table-header-group; }
.memberPointContainer .tableRwdHide { display: none }
.memberPointContainer tr td.tableRwdBox .tableRwdContent { display: block; line-height: 30px; }
.memberPointContainer tr td.tableRwdBox .tableRwdContent .tableRwdContentTitle { display: inline-block; width: 80px; }
.memberPointContainer .tableDeleteBtn { position: absolute; top: 0px; right: 10px; }
}
@media screen and (max-width:800px) {
.memberRechargeContainer .tableHeaderRwdHide { display: none; }
.memberRechargeContainer .tableHeaderHide { display: table-header-group; }
.memberRechargeContainer .tableRwdHide { display: none }
.memberRechargeContainer tr td.tableRwdBox .tableRwdContent { display: block; line-height: 30px; }
.memberRechargeContainer tr td.tableRwdBox .tableRwdContent .tableRwdContentTitle { display: inline-block; width: 80px; }
.memberRechargeContainer .tableDeleteBtn { position: absolute; top: 0px; right: 10px; }
}
@media screen and (max-width:768px) {
.headerContainer { display: none; }
.headerRwdContainer { display: block; }
.indexProductTitleContainer{
  height: 100px;
}
.indexProductTitle{
  font-size: 25px;
  line-height: 40px;

}
.pageBanner { margin-top: 60px; }
.indexChangeContainer .container { max-width: 96%; width: 96%; }
.footer .container { max-width: 96%; width: 96%; }
.footer { display: none; }
.phoneMenu { display: block; }
.cartListFreightInfoContainer{
  border: double 3px #aaa;
  padding: 15px;
}

}
@media screen and (max-width:750px) {

}
@media screen and (max-width:700px) {
.indexProductContent p{
  font-size: 20px;
}
}
@media screen and (max-width:650px) {}
@media screen and (max-width:600px) {}

@media screen and (max-width:576px) {
/* .indexContactImg{
  padding-bottom: 66%;
} */
.indexArrivalContainer{
  padding: 60px 0 110px;
}
.indexArrivalImg{width: calc(100% - 0px);}
.indexArrivalTextContainer {
  width: calc(80%);
  background: rgba(0,0,0,0.6);
  position: absolute;
  top: 50px;
  bottom: -50px;
  left: 10%;
}
.indexArrivalTextTitle{
  font-size: 25px;
  margin: 0 0 5px 0;
  line-height: 30px;
}
.indexArrivalTextContent{
  line-height: 20px;
  margin: 0 0 15px 0;
}
.pr-75{padding-right: 15px;}
.pl-75{padding-left: 15px;}
.indexProductContentContainer .col-sm-6 .indexProductContentHover{
  width: calc(100% - 30px);
}
.cartListTableProductNameBox{
  margin-top: 10px;
  margin-bottom: 5px;
  top: 0;
  transform: translateY(0);
}
.cartListTableProductNameBoxContainer {
  position: relative;
}
.cartNavContainer ul>li {
  width: 60px;
  margin: 0 4px 0 0;
  letter-spacing: 0;
  font-size: 12px;
}
.cartNavContainer ul>li::after {
  right: -6px;
  margin-top: 12px;
  border-style: solid;
  border-width: 3px 0 3px 5px;
  border-color: transparent transparent transparent #555;
}
.promotion-share-container {
  flex-direction: column;
}
.promotion-share-container .section:first-of-type{
  border-bottom: 1px solid #eee;
}
.promotion-share-container .divider{
  display: none;
}
.notification {padding: 15px 5px;}

}
@media screen and (max-width:500px) {
.indexProductContent p{
	margin-bottom: 5px;
}
.ifile.maxWidth-300px { overflow: hidden; width: 95%; }
.upfile.maxWidth-150px { max-width: 100px; }
}
@media screen and (max-width:480px) {}
@media screen and (max-width:450px) {}
@media screen and (max-width:400px) {
}
@media screen and (max-width:380px) {

}
@media screen and (max-width:360px) {
	.container{
		max-width: 98%;
	}
}
@media (min-width: 768px) {

}
@media (min-width: 1024px) {
  .banner-background {
    height: 66%;
    top: 29%;
  }

  .banner img {
    clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0% 100%);
  }
  .index-product-slider .swiper-button-prev,
  .index-product-slider .swiper-button-next {
    top: 40%;
  }
}
@media (min-width: 1200px) {
  .index-product-slider .swiper-button-prev,
  .index-product-slider .swiper-button-next {
    top: 45%;
  }
  .index-product-slider .swiper-button-prev {
    left: -5px;
  }
  .index-product-slider .swiper-button-next {
    right: -5px;
  }
}