@charset "big5";
/* CSS Document */
/* ================================================
- Basic
================================================ */
body { min-width: 1200px; color: #333; font: 13px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a { display: block;  text-decoration: none;}
:focus { outline: none;}
i { font-style: normal;}
.header, .footer { text-align: center; background: #fff;}
.display_pc {display: block}
.display_m {display: none}
.tag_wfe {display: none;}

/* ================================================
- 商品區塊
================================================ */
.tit {display: none; margin: auto;}
.group .tit {position: absolute; z-index: 2; bottom: 26px; left: 10px; width: 328px; display: block;}
.group .tit a {display: flex; width: 100%; height: 57px; background: url(../images/pc-more.png) no-repeat center top; transition-duration: 0.2s;}
.group .tit a:hover {transform: translateY(-5px);; filter: brightness(120%);}
.group .tit span {text-indent: -9999px;}

/** 商品區塊 **/
.group {position: relative; box-sizing: border-box; max-width: 1100px; width: 98%; margin: 0 auto;clear: both; right: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;}
.tab-content {width: 100%; box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;}

/** 商品 **/
.pro_temp {display: none;}
.ProductList {position: relative; width: 100%;flex-shrink: 0; padding: 25px 20px 20px; overflow: hidden;}
.ProductList::before {content: ' '; display: block; width: 100%;height: auto;
  position: absolute; top: 0; bottom: -30px; left: 0; right: 0; z-index: -2;}
.group_st .ProductList::before {background-color: #d7d7d6;}
.group_braun .ProductList::before {background-color: #d7d7d6;}
.group_oralb .ProductList::before {background-color: #d7d7d6;}

.ProductList .item {font-size: 16px; border-radius: 10px;}
.ProductList .item > a {position: relative; border-radius: 10px; }
.ProductList .ProductImg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;}
.ProductImg .tab {position: absolute; top: 0; left: 10px; z-index: 4;
  color: #ffffff; font-size: 18px; font-weight: bold; display: inline-block; background-color: #e04d34; padding: 10px 20px; border-radius: 0 0 10px 10px;
  box-shadow: rgb(0 0 0 / 35%) 2px 2px 3px;}
.ProductList .ProductDesc {background: linear-gradient(90deg, #e04d34 0%, #ffb02c 100%);}
.item {position: relative; z-index: 4; box-sizing: border-box; text-align: center; width: 17.2%; padding-left: 0.3em; padding-right: 0.3em; margin-bottom: 1em;}
.item > a {display: block; background: #fff;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.45);
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  overflow: hidden;}
.item > a:hover, .item > a:focus, .item > a:active {transform: translateY(-5px);}
.item .ProductImg {position: relative; box-sizing: border-box; width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; overflow: hidden;}
.item .ProductImg img {width: 100%; height: 100%; object-fit: cover;}
.item .ProductDesc {color: #fff; font-weight: bold; font-size: 14px; line-height: 36px; background: repeating-linear-gradient(90deg, rgb(255, 98, 6) -1%, rgb(255, 98, 6) 101%); width: 90%; height: 36px; padding: 0 5px; margin: 2px auto; border-radius: 50px; overflow: hidden;}
.item .ProductName {color: #000; font-size: 15px; line-height: 20px; text-align: center; height: 40px; padding: 4px 5px; overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}
.item .ProducPrice, .item .Event_Condition {padding: 0px 2px; height: 43px; color: #f00;}
.item .ProducLimited {padding-top: 10px;}
.item .Event_Condition {white-space: nowrap;}
.item .ProducPrice label {cursor: pointer;}
.item .ProducPrice i {display: inline-block; white-space: nowrap;}
.item .ProducPrice span, .item .Event_Condition i span {font-size: 33px; line-height: 37px;}
.item .Event_Condition i span {margin: 0 2px 0 2px;}
.item .ProducPrice i em {color: #747474; font-size: 1.0em; line-height: 1.5em; font-style: normal; height: 1em; margin-right: 5px;}
.item .ProducPrice i em span {font-size: 0.8em; font-weight: 500; line-height: 1em; text-decoration: line-through;}
.item .ProducPrice .price_txt {/*color: crimson; font-size: 15px; line-height: 26px;*/}
.item .ProducPrice .prePrice {box-sizing: border-box;display: inline-block;}

/**第一支商品******************/
.ProductList .item:nth-child(9n+2) {width: 31%; margin-top: 30px;}
.ProductList .item:nth-child(9n+7) {margin-left: 31%;}
.ProductList .item:nth-child(9n+2) a {padding-top: 20px; padding-bottom: 30px;}
.ProductList .item:nth-child(9n+7), .ProductList .item:nth-child(9n+8), .ProductList .item:nth-child(9n+9), .ProductList .item:nth-child(9n+10) {margin-top: -22%;}
.item:nth-child(9n+2) .ProductName {padding: 4px 10px; margin: auto; font-size: 20px; line-height: 25px; height: 46px;}
.item:nth-child(9n+2) .ProducPrice .prePrice span {font-size: 40px; line-height: 50px;}

/* ================================================
- 頁籤效果
================================================ */
.tab-wrapper {position: relative; width: 100%; text-align: center; 
  display: flex;
  flex-wrap: wrap;}
.tab-wrapper > input {position: absolute; margin: 0; padding: 0; opacity: 0;}
.tab-wrapper > input + label {position: relative; z-index: 6; font-size: 2.3em; line-height: 1.4; /*flex: 1;*/ text-align: center; border: none; cursor: pointer; height: 110px; width: 33.3%; color: #101d4a;
  display: flex;
  align-items: center;
  justify-content: center;}
.tab-wrapper > input + label:after {content: ''; position: absolute; left: .6em; right: .6em; bottom: 0; top: 1em; transition: all 0.1s ease; z-index: -1; border-radius: 20px 20px 0 0;}
.group_st .tab-wrapper > input + label:after{background-color: #bbbbbb;}
.group_braun.tab-wrapper > input + label:after{background-color: #bbbbbb;}
.group_oralb .tab-wrapper > input + label:after{background-color: #bbbbbb;}

.tab-wrapper > input + label:hover:after, .tab-wrapper > input:checked + label:after {top: 0;}

.group_st .tab-wrapper > input + label:hover:after, .group_st .tab-wrapper > input:checked + label:after {background-color: #d7d7d6;}
.group_braun .tab-wrapper > input + label:hover:after, .group_braun .tab-wrapper > input:checked + label:after {background-color: #d7d7d6;}
.group_oralb .tab-wrapper > input + label:hover:after, .group_oralb .tab-wrapper > input:checked + label:after {background-color: #d7d7d6;}

.tab-wrapper > input + label p {margin-top: 20px; font-weight: bold;}
.tab-content-wrap {position: relative; margin: 0px auto;text-align: left; color: white; font-size: 13px; line-height: 20px; min-height: 610px;}
.tab-content-wrap > .tab-content {opacity: 0; height: 0; pointer-events: none; box-sizing: border-box; width: 100%; visibility: hidden; transition: opacity 0.3s;}
#tab-1:checked ~ .tab-content-wrap #group_1, #tab-2:checked ~ .tab-content-wrap #group_2, #tab-3:checked ~ .tab-content-wrap #group_3, #tab-4:checked ~ .tab-content-wrap #group_4, #tab-5:checked ~ .tab-content-wrap #group_5, #tab-6:checked ~ .tab-content-wrap #group_6, #tab-7:checked ~ .tab-content-wrap #group_7 {
  position: relative; opacity: 1;display: flex; visibility: visible; pointer-events: auto;height: auto;}


/* ================================================
- 至適應
================================================ */
@media screen and (max-width: 1024px) {
  body {width: 100vw; min-width: inherit;}
  * {box-sizing: border-box;}
  .inline-block_m {display: inline-block !important;}
  .wrapper {padding-bottom: 70px;}
  .main {}
  .float-wrapper {}

  .main_wrapper, .prod_wrapper {}
  .main_wrapper .group:last-child, .prod_wrapper .group:last-child {padding-bottom: 0;}
  .prod_wrapper_bg {width: 100vw;}
  .main_container, .prod_container {}
  .ProductList {width: 100%; padding: 16px 5px 16px;}
  .group {right: 0;}
  .group .tit {width: 27vw; left: 1.5vw; bottom: 1.7vw;}
  .group .tit a {background-size: 27vw;}

  .item > a {padding-top: 0;}
  .item .ProductImg {margin: 10px auto;}
  .item .ProducPrice, .item .ProducLimited {padding: 7px 0 0 0;}
  .item .ProducLimited {padding: 7px 0;}
  .item .ProducPrice .prePrice span, .item .Event_Condition i span{ line-height: 25px; font-size: 25px; font-weight: bold; margin: 0 0 -8px;}
  .item .ProductName {font-size: 14px; line-height: 18px; height: 40px;}
  .item .ProductDesc {font-size: 14px; width: 95%; overflow: hidden;}
  .tab-wrapper > input + label {font-size: 2em; height: 90px; padding: 0 0.8em;}
  .tab-wrapper > input + label:after{top:0.5em; left: 0.2em; right: 0.2em;border-radius: 10px 10px 0 0;}
	
  .ProductList .item:nth-child(9n+7), .ProductList .item:nth-child(9n+8), .ProductList .item:nth-child(9n+9), .ProductList .item:nth-child(9n+10) {margin-top: -23%;}	
	
}

@media screen and (max-width: 768px) {
.group .tit {position: relative; width: 90vw; height: 11vw;}
.group .tit a {background: url(../images/pc-more.png) no-repeat right 1vw; background-size: 50vw;
    color: #000; font-size: 60px; line-height: 1.5em; height: 11vw;}
.group .tit span {text-indent: inherit;}
	
.item > a:hover, .item > a:focus, .item > a:active {transform: translateY(0);}
.ProductList .item, .item {box-sizing: border-box; width: 50% !important; min-width: initial; padding-left: 0.3em; padding-right: 0.3em; margin-top: 0.3em; margin-bottom: 0.3em;}
.tab-wrapper > input + label {font-size: 1.2em;}
/**/
.ProductList .item:nth-child(9n+2) {width: 98vw !important; margin-top: 0;}	
.ProductList .item:nth-child(9n+2) a {padding-top: 0; padding-bottom: 0;}
.ProductList .item:nth-child(9n+7) {margin-left: auto;}
.ProductList .item:nth-child(9n+7), .ProductList .item:nth-child(9n+8), .ProductList .item:nth-child(9n+9), .ProductList .item:nth-child(9n+10) {margin-top: 5px;}
.more a {background: url(../images/m-more.png) no-repeat center top; background-size: 80%; width: 100%; top: 104px; right: 0; left: 0; bottom: 0;}
	
.item:nth-child(9n+2) .ProductImg {width: 50%; margin: 0 auto; float: left;}
.item:nth-child(9n+2) .ProductDesc {width: 46%; margin-top: 10vw; margin-bottom: 2vw; float: right; margin-right: 1.5%;}
.item:nth-child(9n+2) .ProductName { width: 46%; padding: 0; height: 80px; line-height: 1.4em; -webkit-line-clamp: 3; text-align: left; float: right; margin-right: 1.5%;}
.item:nth-child(9n+2) .ProducPrice, .item:nth-child(9n+2) .ProducLimited {text-align: left; width: 46%; float: right;}	
	
}

@media screen and (max-width: 480px) {
.tab-wrapper > input + label {height: 80px;}
.group .tit a {font-size: 32px;}
	
.item:nth-child(9n+2) .ProductDesc {font-size: 13px; margin-top: 7vw;}
.item:nth-child(9n+2) .ProductName {font-size: 15px; line-height: 1.3em; height: 60px;}
.item:nth-child(9n+2) .ProducPrice .prePrice span {font-size: 30px; line-height: 1em;}

}

@media screen and (max-width: 375px) {
.group .tit a {font-size: 30px;}
.item .ProducPrice .prePrice span, .item .ProducLimited .prePrice span {font-size: 1.26em}
.item:nth-child(9n+2) .ProducPrice .prePrice span {font-size: 25px;}
	
/* 限量 */
.group-limited .item > a {min-height: 200px;}
}

@media screen and (max-width: 320px) {
.group .tit a {font-size: 25px;}
.item:nth-child(9n+2) .ProducPrice .prePrice span {font-size: 20px;}
.item:nth-child(9n+2) .ProductName {font-size: 13px; line-height: 1.3em; height: 50px;}
.item:nth-child(9n+2) .ProducPrice, .item:nth-child(9n+2) .ProducLimited {padding: 3px 0 0;}
.item:nth-child(9n+2) .ProductDesc {font-size: 13px; margin-top: 3vw;}
	
.tab-content, .group-list {padding-left: 0.2em; padding-right: 0.2em;}
.ProductList .item, .item {padding-left: 0.2em; padding-right: 0.2em;}
.item .ProducPrice i em span, .item .ProducLimited i em span {font-size: 11px; margin-right: 0;}
.item .ProducPrice .price_txt, .item .ProducLimited .price_txt {font-size: 13px;}
.item .ProducPrice .prePrice, .item .ProducLimited .prePrice {font-size: 12px;}
}