@charset "UTF-8";
.member_referrer_QQ {
  width: 100%;
  font-size: 14px;
}
.member_referrer_QQ * {
  box-sizing: border-box;
}
.member_referrer_QQ .popup {
  display: none;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.member_referrer_QQ .popup .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.member_referrer_QQ .popup .popup_container {
  position: absolute;
  width: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.member_referrer_QQ .popup .popup_container .wrap {
  background-color: #fff;
  overflow: hidden;
  border-radius: 1em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.member_referrer_QQ .popup .popup_container .wrap .title {
  font-size: 1.5em;
  width: 100%;
  line-height: 3;
  background-color: rgba(138, 161, 175, 0.5803921569);
  color: #fff;
  padding: 0 2em;
}
.member_referrer_QQ .popup .popup_container .wrap .title i {
  font-size: 2em;
  margin-right: 3%;
  vertical-align: sub;
}
.member_referrer_QQ .popup .popup_container .close {
  position: absolute;
  width: 2em;
  height: 2em;
  line-height: 2em;
  background-color: #fff;
  border-radius: 99em;
  color: #666;
  right: -0.5em;
  top: -0.5em;
  z-index: 9;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
.member_referrer_QQ .popup .popup_container .close::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 5%;
  background-color: #666;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
}
.member_referrer_QQ .popup .popup_container .close::before {
  content: "";
  position: absolute;
  width: 60%;
  height: 5%;
  background-color: #666;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.member_referrer_QQ .container {
  padding: 2%;
}
.member_referrer_QQ .container.dashboard {
  width: 100%;
  background-color: rgba(138, 161, 175, 0.5803921569);
  padding: 3%;
  padding-bottom: 10%;
}
.member_referrer_QQ .container.dashboard .channel .btn {
  cursor: pointer;
  background-color: #eee;
  color: #666;
  line-height: 1;
  padding: 0.5em 1em;
  border-radius: 99em;
  font-size: 0.9em;
  box-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.2);
}
.member_referrer_QQ .container.dashboard .channel .btn:nth-child(2) {
  margin-left: 1em;
}
.member_referrer_QQ .container.dashboard .channel .M2 {
  float: left;
  display: flex;
  align-items: center;
}
.member_referrer_QQ .container.dashboard .channel .M2 .intro {
  position: relative;
  padding: 1em;
}
.member_referrer_QQ .container.dashboard .channel .M2 .intro div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.member_referrer_QQ .container.dashboard .channel .M2 .intro_popup .popup_container .wrap .title i {
  font-size: 1.5em;
}
.member_referrer_QQ .container.dashboard .channel .M2 .intro_popup .popup_container .wrap .content {
  padding: 5%;
  max-height: 60vh;
  overflow-y: auto;
}
.member_referrer_QQ .container.dashboard .channel .M2 .is_m2 {
  color: #fff;
}
.member_referrer_QQ .container.dashboard .channel .M2 .is_m2 i {
  color: #ffde95;
}
.member_referrer_QQ .container.dashboard .channel .rules {
  position: relative;
  float: right;
}
.member_referrer_QQ .container.dashboard .channel .rules dd {
  display: none;
  position: absolute;
  z-index: 99;
  right: 0;
  top: 120%;
  background-color: #fff;
  border-radius: 0.5em;
  padding: 5%;
  width: 200px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
.member_referrer_QQ .container.dashboard .channel .rules dd ul li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 1em;
}
.member_referrer_QQ .container.dashboard .channel .rules dd ul li:nth-child(n+2) {
  margin-top: 4%;
}
.member_referrer_QQ .container.dashboard .channel .rules dd ul li .reward_level {
  text-align: center;
  width: 30%;
}
.member_referrer_QQ .container.dashboard .channel .rules dd ul li .reward_proportion {
  text-align: center;
  width: 40%;
}
.member_referrer_QQ .container.dashboard .channel .rules dd ul li .reward_type {
  text-align: center;
  width: 25%;
}
.member_referrer_QQ .container.dashboard .statistic {
  position: relative;
  height: 88%;
  margin-top: 3%;
  padding: 5% 2%;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.member_referrer_QQ .container.dashboard .statistic .box_border {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  border: 1px solid #fff;
  border-radius: 1em;
  clip-path: polygon(0 -5%, 42% -5%, 42% 3%, 58% 3%, 58% -5%, 100% -5%, 100% 100%, 0 100%);
}
.member_referrer_QQ .container.dashboard .statistic > .title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -0.5em);
}
.member_referrer_QQ .container.dashboard .statistic .flex_box {
  width: 60%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box:nth-child(4) {
  width: 35%;
  margin-left: 5%;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .reward {
  padding: 2em 1em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .reward .caption {
  line-height: 1;
  font-size: 1.2em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .reward .caption i {
  font-size: 1.3em;
  vertical-align: text-bottom;
  margin-right: 0.2em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .reward .amount {
  margin-top: 0.2em;
  font-size: 3.3em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .reward .amount .unit {
  font-size: 0.6em;
  margin-left: 0.2em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission {
  width: 100%;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .status {
  cursor: pointer;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 5%;
  width: 3.5em;
  height: 3.5em;
  font-size: 2.5em;
  border-radius: 99em;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .status i {
  position: absolute;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .status.done {
  border: 0.22em solid #7ddf7d;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .status.done i {
  color: #7ddf7d;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .status.undone {
  border: 0.22em solid #ff6969;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .status.undone i {
  color: #ff6969;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .hint {
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  font-size: 0.7em;
  line-height: 1.5;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail {
  z-index: 999;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content {
  padding: 5% 10% 3%;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 7% 0;
  text-shadow: none;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .state {
  width: 15%;
  font-size: 2em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .state i {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  background-color: #aaa;
  border-radius: 99em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .state.undone i {
  background-color: rgb(238, 127, 127);
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .state.done i {
  background-color: rgb(125, 223, 125);
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .info {
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #666;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .info .caption {
  width: 50%;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .info .require {
  width: 50%;
  text-align: right;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .info .ratio {
  position: relative;
  width: 100%;
  background-color: #eee;
  border-radius: 99em;
  margin-top: 3%;
  height: 0.5em;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .detail_content li .info .ratio .bar {
  height: 100%;
  width: 0;
  border-radius: 99em;
  background-color: #aaa;
  transition: width 1s ease-in-out;
}
.member_referrer_QQ .container.dashboard .statistic .flex_box .mission .detail .popup_container .wrap .mission_rule {
  text-shadow: none;
  text-align: center;
  color: #3db7a0;
  font-size: 1em;
  line-height: 1;
  margin-bottom: 10%;
}
.member_referrer_QQ .container.dashboard .friend_referrer_title {
  text-align: left;
  font-size: 2em;
  color: #fff;
  padding-left: 1.5em;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.member_referrer_QQ .container.detail {
  padding: 5%;
  width: 100%;
  background-color: #eee;
  transition: width 0.3s ease-in-out;
}
.member_referrer_QQ .container.detail .content_block {
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
  padding: 2% 5%;
  background-color: #fff;
  border-radius: 1em;
  text-align: left;
}
.member_referrer_QQ .container.detail .content_block:nth-child(n+2) {
  margin-top: 5%;
}
.member_referrer_QQ .container.detail .content_block.friend_info {
  margin-top: -12%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div {
  width: 50%;
  font-size: 1em;
  padding-left: 5%;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div > div + div {
  margin-top: 3%;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div.invite_friend {
  position: relative;
  padding-left: 0;
  padding-right: 5%;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div.invite_friend:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  background-color: #ccc;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div.invite_friend .mode {
  padding: 5% 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div.invite_friend .mode > div {
  cursor: pointer;
  position: relative;
  width: 28%;
  padding-top: 28%;
  font-size: 2em;
  text-align: center;
  border-radius: 99em;
  background-color: #666;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div.invite_friend .mode > div > i {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.member_referrer_QQ .container.detail .content_block.friend_info > div.invite_friend .QR_popup .qrcode {
  width: 100%;
}
.member_referrer_QQ .container.detail .content_block.friend_info > div.invite_friend .QR_popup .qrcode img {
  width: 100%;
}
.member_referrer_QQ .container.detail .content_block.data_info {
  min-height: 500px;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  padding: 2% 0;
  border-radius: 0.5em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_nav .caption_actBG {
  content: "";
  position: absolute;
  width: 31%;
  height: 90%;
  top: 50%;
  left: 16.6666666667%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 0.5em;
  transition: left 0.3s ease-in-out;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_nav .caption {
  cursor: pointer;
  position: relative;
  text-align: center;
  width: 33%;
  padding: 1% 0;
  color: #666;
  transition: color, letter-spacing 0.5s ease-out;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_nav .caption:nth-child(n+3) {
  border-left: 1px solid #ddd;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_nav .caption.active {
  z-index: 2;
  font-weight: 900;
  letter-spacing: 1px;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_nav .caption .icon {
  margin-bottom: 2%;
  font-size: 1.6em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap {
  overflow: hidden;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block.active {
  display: block;
  opacity: 1;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_switch {
  margin: 5% 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_switch .prev, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_switch .next {
  cursor: pointer;
  font-size: 2em;
  color: #aaa;
  transition: color 0.3s ease-in-out;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_switch .prev.no, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_switch .next.no {
  color: #eee;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_switch .caption {
  margin: 0 5%;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list {
  height: 400px;
  overflow-y: scroll;
  padding: 2%;
  /* the new scrollbar will have a flat appearance with the set background color */
  /* this will style the thumb, ignoring the track */
  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list::-webkit-scrollbar {
  width: 5px;
  margin-right: -20px;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list::-webkit-scrollbar-track {
  background-color: #eee;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list::-webkit-scrollbar-thumb {
  background-color: #aaa;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list::-webkit-scrollbar-button {
  display: none;
  background-color: rgba(0, 0, 0, 0.1);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list::-webkit-scrollbar-corner {
  background-color: black;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li {
  position: relative;
  font-size: 1.2em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl {
  transition: margin 0.3s ease-out;
  border-bottom: 1px solid #eee;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dt, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dd {
  position: relative;
  padding: 3%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dt > div, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dd > div {
  color: #666;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dt > div + div, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dd > div + div {
  margin-left: 5%;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dt .arrow, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dd .arrow {
  position: absolute;
  right: 3%;
  top: 50%;
  transition: transform 0.3s;
  transform: translateY(-50%) rotate(-90deg);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl dd {
  padding: 0 2em;
  background-image: linear-gradient(to bottom, #f9f9f9 0%, #fff 50%);
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease-out;
  font-size: 0.8em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl.open {
  margin-top: 3%;
  border: 1px solid #eee;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl.open dd .arrow, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl.open dt .arrow {
  transform: translateY(-50%) rotate(0deg);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li > dl.open dd {
  padding: 2em;
  height: 8em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.friend_list dl dt .photo {
  font-size: 2em;
  color: #666;
  width: 10%;
  border-radius: 99em;
  overflow: hidden;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.friend_list dl dt .photo img {
  display: block;
  width: 100%;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.friend_list dl dt .card_no {
  width: 30%;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.friend_list dl dt .name {
  width: 25%;
  overflow-x: hidden;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block {
  width: 50%;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block:nth-child(2) {
  text-align: center;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .order_no {
  font-size: 1em;
  line-height: 2;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .order_date, .member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status {
  font-size: 0.8em;
  color: #666;
  line-height: 1.5;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status {
  color: #fff;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status > span {
  display: inline-block;
  border-radius: 0.3em;
  padding: 0 3%;
  margin-top: 3%;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status > span.done {
  background-color: #3db7a0;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status > span.miss {
  background-color: rgb(230, 102, 102);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status > span.processing {
  background-color: rgb(92, 92, 92);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status > span.mission {
  background-color: rgb(43, 185, 221);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_status > span.cancel {
  background-color: rgb(153, 153, 153);
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_amount {
  font-size: 1em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_amount.cash {
  color: #efa500;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dt .order_list_block .reward_amount.profit {
  color: #3db7a0;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dd {
  align-items: stretch;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dd .order_list_block {
  width: 50%;
  flex-grow: 1;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dd .order_list_block .reward_detail {
  line-height: 1em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list > li.order_list dl dd .order_list_block .reward_detail + .reward_detail {
  margin-top: 0.5em;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block .data_list .loading_page {
  color: #999;
  font-size: 2em;
  height: 100%;
  text-align: center;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block.my_friend .page .data_list {
  display: none;
}
.member_referrer_QQ .container.detail .content_block.data_info .data_wrap .data_block.my_friend .page .data_list.show {
  display: block;
}

/*
.variable_product_detail,
.popup_standard_select_wrap {
    box-sizing: border-box;
    width: 1180px;
    min-width: 1180px;
    margin: 2% auto;
    text-align: left;
    font-size: 10px;
    font-weight: 300;
    font-family: 'Noto Sans TC', sans-serif, '微軟正黑體';

    @media screen and (min-width:1441px) {
        font-size: 12px;
    }

    * {
        box-sizing: border-box;
    }

    img {
        width: 100%;
        display: block;
    }

    ul,li,dl,dt,dd {
        list-style: none;
        margin: 0;
    }

    a:link, a:visited, a:active {
        font-family: inherit;
        font-weight: unset !important;
    }

    .product_detail_block {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background-color: #fff;
        padding: 2em;

        //預設雙欄
        .block_sort {
            width: 50%;
            flex-grow: 1;
            transition: padding 0.3s ease-out;

            &.block_sort_left {
                width: 40%;
            }

            &~.block_sort {
                margin-left: 10%;
            }

            .block {

                //通用格式
                .title {
                    font-size: 1.3em;
                    line-height: 2;
                }
                &~.block {
                    margin-top: 1em;

                    &.event_list {
                        margin-top: 2em;
                    }
                }
                dl.slide_block {
                    border-radius: 5px;
                    background-color: #fff;
                    border: 1px solid #f3f3f3;
                    box-shadow: 0 0 7px -1px rgba(0,0,0,0.05);
                    overflow: hidden;

                    dt {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #aaa;
                        background-color: #fdfdfd;
                        border-bottom: 1px solid #eee;
                        padding: 0 1.5em;

                        .caption {
                            font-size: 0.9em;
                            line-height: 3;
                        }

                        .sign {
                            display: none;
                            font-size: 1.2em;
                        }
                    }

                    dd {
                        padding: 1.5em;
                        background-color: #fafafa;

                        ul.list {
                            .item {

                                >input {
                                    display: none;

                                    &:checked ~ label {
                                        background-color: #fff;
                                        box-shadow: 0 0 15px #eee;
                                        border: 1px solid #ececec;

                                        .name {
                                            color: #333;
                                        }

                                        .choose_box {
                                            .radio {
                                                &:after {
                                                    background-color: rgb(255, 112, 112);
                                                }
                                            } 
                                            .check_box {
                                                background-color: rgb(255, 112, 112);
                                                &:after {
                                                    border-bottom: 3px solid #fff;
                                                    border-left: 3px solid #fff;
                                                    transform: translate(-45%,-85%) rotate(-45deg);
                                                    width: 60%;
                                                    height: 30%;
                                                }
                                            } 
                                        }
                                    }
                                }

                                label {
                                    cursor: pointer;
                                    display: flex;
                                    justify-content: start;
                                    align-items: stretch;
                                    padding: 0.5em;
                                    border-radius: 0.5em;
                                    border: 1px solid #f9f9f9;
                                    background-color: #fefefe;
                                    box-shadow: 0 0 15px #f5f5f5;
                                    transition: transform 0.1s;

                                    &:hover {
                                        //border: 1px solid rgb(69, 227, 255);
                                        background-color: #fff;
                                        transform: scale(1.01);
                                    }

                                    >div {
                                        &~div {
                                            margin-left: 3%;
                                        }
                                    }

                                    .pic {
                                        width: 15%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;

                                        .pic_wrap {
                                            position: relative;
                                            width: 100%;
                                            padding-top: 100%;
                                            overflow: hidden;

                                            img {
                                                position: absolute;
                                                height: 100%;
                                                width: 100%;
                                                object-fit: cover;
                                                top: 0;
                                            }
                                        }
                                    }

                                    .choose_box {
                                        //width: 5%;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;

                                        .radio {
                                            position: relative;
                                            width: 1.5em;
                                            height: 1.5em;
                                            border: 1px solid #ccc;
                                            border-radius: 99em;
                                            background-color: #fff;

                                            &:after {
                                                position: absolute;
                                                content: "";
                                                display: block;
                                                top: 50%;
                                                left: 50%;
                                                transform: translate(-50%,-50%);
                                                width: 50%;
                                                height: 50%;
                                                border-radius: 99em;
                                            }
                                        }

                                        .check_box {
                                            position: relative;
                                            width: 1.5em;
                                            height: 1.5em;
                                            border: 1px solid #ccc;
                                            border-radius: 0.2em;
                                            background-color: #fff;

                                            &:after {
                                                position: absolute;
                                                content: "";
                                                display: block;
                                                top: 50%;
                                                left: 50%;
                                                transform: translate(-50%,-50%);
                                                width: 60%;
                                                height: 60%;
                                                //border-radius: 0.2em;
                                            }
                                        }
                                    }

                                    .info {
                                        width: 75%;
                                        flex-grow: 1;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        align-items: flex-start;

                                        .name {
                                            color: #666;
                                            font-size: 1.0em;
                                            line-height: 1.5em;
                                            // height: 1.5em;
                                            // overflow: hidden;
                                        }
                                    }
                                }

                                &~.item {
                                    margin-top: 2%;
                                }
                            }
                        }
                    }

                    &.intro_block {
                        dd {
                            line-height: 1.5;
                            padding: 1em 1.5em;
                            color: #666;
                        }
                    }
                }

                .notice {
                    width: 100%;
                    margin-top: 0.5em;
                    border-radius: 5px;
                    padding: 0em 1.0em;
                    //background-color: #eee;
                    color: #333;
                    font-weight: 300;
                    display: none;

                    &.gift_notice {
                        font-size: 1.2em;
                        padding-left: 0.5em;
                        color: #333;
                        margin-top: 1em;
                    }

                    >div~div {
                        margin-top: 0.5em;
                    }

                    i{
                        margin-right: 0.5em;
                    }
                }

                //獨立樣式
                &.promotion_word {
                    font-size: 1.3em;
                    font-weight: 400;
                    color: #f78080;
                }

                &.name {
                    font-weight: 300;

                    .name_ct { 
                        font-size: 1.7em;
                        line-height: 1.2;
                    }
                    .name_en {
                        margin-top: 0.3em;
                        font-size: 1.5em;
                        line-height: 1.2;
                    }
                }

                &.rating {
                    color: #ffc505;
                    //margin-bottom: 1em;

                    .rating_star {
                        font-size: 1.5em;
                        //margin-right: 0.2em;
                        i {
                            margin-right: 0.4em;
                        }
                    }
                    .rating_avg {
                        font-size: 1.2em;
                    }
                }

                &.product_pic {

                    .product_pic_slide_show {

                        .slick-arrow {
                            z-index: 1;
                            border-radius: 100%;
                            background-color: #fff;
                            padding: 2px 2px 1px 1px;
                            width: auto;
                            height: auto;

                            &::before {
                                color: #666;
                            }

                            &.slick-next {
                                right: -15px;
                            }

                            &.slick-prev {
                                left: -15px;
                            }
                        }

                        .slide_show_wrap {
                            position: relative;

                            .pic_show {
                                font-size: 0;

                                .pic_item {
                                    position: relative;
                                    padding-top: 100%;

                                    img {
                                        position: absolute;
                                        top: 0;
                                        object-fit: cover;
                                        height: 100%;
                                        width: 100%;
                                    }

                                    &:nth-child(n+2){
                                        display: none;
                                    }

                                    video {
                                        position: absolute;
                                        top: 50%;
                                        transform: translateY(-50%);
                                        width: 100%;
                                        height: 100%;
                                        background-color: #000;
                                        overflow: hidden;
                                    }

                                    .product_video_play {
                                        cursor: pointer;
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%,-50%);
                                        width: 100%;
                                        height: 100%;
                                        background-color: rgba($color: #000000, $alpha: 0.3);
                                        transition: all 0.3s ease-out;

                                        i {
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%,-50%);
                                            font-size: 45px;
                                            color: #eee;
                                        }

                                        &:hover {
                                            background-color: rgba($color: #000000, $alpha: 0.7);
                                            i {
                                                transition: all 0.3s ease-in;
                                                color: #fff;
                                                transform: translate(-50%,-50%) scale(1.1);
                                            }
                                        }

                                        &.play {
                                            opacity: 0;
                                        }
                                    }
                                }
                            }

                            .watermark_pic {
                                position: absolute;
                                width: 15%;
                                bottom: 1em;
                                right: 1em;

                                img{
                                    width: 100%;
                                }
                            }
                        }

                        .pic_nav {
                            margin-top: 5%;
                            display: flex;
                            justify-content: start;
                            align-items: stretch;
                            //font-size: 0;

                            .pic_nav_item {
                                cursor: pointer;
                                display: flex !important;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                //width: 20%;
                                position: relative;

                                img {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    border: 1px solid #aaa;
                                    object-fit: cover;
                                    height: 100%;
                                    width: 100%;
                                }

                                .video_nav {
                                    position: absolute;
                                    top: 0;
                                    display:flex;
                                    justify-content: center;
                                    align-items: center;
                                    width: 100%;
                                    height: 100%;
                                    background-color: #333;

                                    i {
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%,-50%);
                                        font-size: 1.5em;
                                        color: #fff;
                                    }
                                }
                            }

                            .slick-list {
                                width: 100%;

                                .slick-track {
                                    //padding: 5px;
                                    margin: 0;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;

                                    .slick-slide {
                                        margin: 0 3px;
                                        opacity: 0.3;
                                        transition: all 0.3s ease-out;
                                        padding: 2px;
                                        width: 100%;
                                        height: auto;


                                        >div{
                                            width: 100%;
                                            height: 100%;
                                            .pic_nav_item {
                                                padding-top: 100%;
                                            }
                                        }

                                        &:hover {
                                            background-color: #94d1fa;
                                        }

                                        &.slick-active {
                                            opacity: 1;
                                        }

                                        &.slick-current {
                                            background-color: #99dace;
                                            transform: scale(1.05);

                                            img {
                                                border: 1px solid #99dace;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                &.product_keyword {
                    .product_tags {
                        display: flex;
                        flex-wrap: wrap;
                        font-size: 1em;
                        float: none;

                        .this_item {
                            float: left;
                            line-height: 1.5;
                            margin: 0 10px 8px 0;
                            padding: 0.5em 1em;
                            background: #dedede;
                            border-radius: 15px;
                            color: #333;
                            border: 0px solid #ddd;
                        }
                    }
                }

                &.product_no {
                    display: flex;
                    justify-content: start;
                    align-items: center;

                    .P_NO, .S_NO {
                        color: #aaa;
                        font-size: 0.8em;
                        line-height: 2;
                    }

                    .S_NO {
                        margin-left: 1em;
                    }
                }

                &.standard_list_info {
                    //background-color: #f9f9f9;

                    .multi_level {
                        .color {
                            display: flex;
                            justify-content: start;
                            align-items: center;
                            padding: 0 0.5em;

                            li {
                                cursor: pointer;
                                width: 3.5em;
                                height: 3.5em;
                                border-radius: 99em;
                                border: 1px solid #ddd;
                                transition: transform 0.2s ease-out;

                                &~li {
                                    margin-left: 0.8em;
                                }

                                &:hover {
                                    transform: scale(1.1);
                                    border: 2px solid #ddd;
                                }

                                &.active {
                                    transform: scale(1.1);
                                    border: 2px solid rgb(142, 230, 233);
                                }
                            }
                        }

                        select {
                            pointer-events: none;
                            opacity: 0.5;
                            border: 0px solid #ddd;
                            color: #666;
                            width: 100%;
                            font-size: 1.2em;
                            height: 3em;
                            padding: 0 0.5em;
                            margin-top: 1em;
                            background-color: #fff;
                            box-shadow: 0 0 15px #eee;
                            border-radius: 5px;
                            transition: box-shadow 0.1s;

                            &:hover {
                                box-shadow: 0 0 15px #ddd;
                            }

                            &.focus {
                                cursor: pointer;
                                opacity: 1;
                                pointer-events: initial;
                            }
                        }

                    }

                    .single_level {
                        ul.list {
                            .item {
                                position: relative;

                                .pic {
                                    width: 4em;
                                }
                                .info {
                                    .name {
                                        font-size: 1.5em;

                                        .combine_product_icon {
                                            display: inline-block;
                                            padding: 0 5px;
                                            border-radius: 3px;
                                            background-color: #ff6969;
                                            color: #fff;
                                            font-size: 12px;
                                            position: absolute;
                                            right: 0;
                                            top: 0;
                                            transform: translate(30%,-20%) rotate(10deg) scale(0.9);
                                        }
                                        .combine_product_discount {

                                        }
                                    }

                                }
                            }
                        }
                    }

                    .combine_self_pick { //list
                        display: flex;
                        flex-direction: column;
                        justify-content: start;
                        align-items: stretch;

                        .rejust_combine_self_list { //item
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .product_name {
                                display: flex;
                                justify-content: start;
                                align-items: center;
                                color: #666;

                                span {
                                    display: block;
                                }

                                .list_count {
                                    width: 1.5em;
                                }

                                .list_name {
                                    width: 90%;
                                    flex-grow: 1;

                                    .list_caption {
                                        font-size: 1.0em;
                                    }

                                    .stardard_content {
                                        border: 0;
                                        padding-bottom: 0;
                                        margin-top: 0.3em;
                                        color: inherit;
                                        font-size: 0.8em;
                                        color: #666;
                                        font-weight: 400;
                                    }
                                }
                            }

                            .choose_button {
                                span {
                                    display: block;
                                    width: max-content;
                                    font-size: 1em;
                                    padding: 0 1.5em;
                                    line-height: 3;
                                    border-radius: 0.3em;
                                    border: 0;
                                    transition: transform 0.1s ease-out;

                                    &:hover {
                                        transform: scale(1.05);
                                    }
                                }
                            }

                            &:after {
                                content: none;
                            }

                            & ~ .rejust_combine_self_list {
                                margin-top: 2%;
                            }
                        }
                    }

                    .buy_notice {
                        //background-color: #ffbfbf;
                        color: #333;
                    }
                }

                .event_item {
                    display: flex;
                    justify-content: start;
                    align-items: stretch;
                    background-color: #f5f1b9;
                    color: #333;
                    width: 70%;

                    &.QuotaCashGift {
                        background-color: #95e0d3;
                    }

                    &.ProductSecond {
                        background-color: #acdeff;
                    }

                    & ~ .event_item {
                        margin-top: 1em;
                    }

                    .icon {
                        width: 15%;
                        padding: 0.5em;
                        text-align: center;
                        font-size: 2em;
                    }
                    .content {
                        width: 85%;
                        padding: 0.5em;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-evenly;

                        .event_title {
                            font-size: 1.2em;
                            font-weight: 400;
                            line-height: 1.3;
                            letter-spacing: 0.05em;
                        }

                        .detail {
                            font-size: 0.9em;
                            line-height: 1.3;

                            a {
                                text-decoration: underline;
                                text-underline-offset: 3px;
                            }

                            &~.detail {
                                margin-top: 0.2em;
                            }
                        }
                    }
                }

                &.right_link {

                    .pps_link_wrap {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: start;
                        align-items: top;

                        >span {
                            background-color: #222;
                            color: #fff;
                            padding: 0.2em 1em;
                            border-radius: 3px;
                            font-size: 1em;
                            margin: 0 0.5em 0.5em 0;
                            line-height: 1.5;
                        }

                        >.img {
                            width: 20%;
                            img {
                                width: 90%;
                            }
                        }

                        .pps_component {
                            cursor: pointer;
                        }
                    }
                }

                &.price {
                    padding: 0;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;

                    .price_wrap {

                        span {
                            position: relative;
                            margin-right: 0.3em;

                            &.activity {
                                font-size: 1.5em;
                            }

                            &.sale_price_unit {
                                font-size: 1.0em;
                                margin-right: 0;
                                color: #666;
                            }

                            &.sale_price {
                                font-weight: 500;
                                font-size: 2.5em;
                            }

                            &.slash_price {
                                font-size: 1.5em;

                                &:after {
                                    content: "";
                                    position: absolute;
                                    width: 120%;
                                    top: 50%;
                                    left: -10%;
                                    height: 1px;
                                    background-color: #333;
                                }
                            }
                        }
                    }

                    .set_collect {
                        cursor: pointer;
                        padding: 0 1em;
                        font-size: 1.5em;

                        &:hover {
                            i {
                                transform: scale(1.2);
                            }
                        }
                    }
                }

                &.plus_product {
                    //background-color: #f9f9f9;

                    .slide_block {

                        dd {
                            max-height: 26em;
                            overflow-y: auto;

                            &::-webkit-scrollbar {
                                width: 5px;
                                background-color: #eee;
                            }
                            &::-webkit-scrollbar-thumb {
                                background-color: #ccc;
                                border-radius: 99em;
                                width: 15px;
                            }

                            .list {
                                .item {
                                    position: relative;

                                    label {

                                        .pic {
                                            width: 10%;
                                        }

                                        .info {
                                            width: 75%;

                                            .name {
                                                font-weight: 400;
                                            }

                                            .price {
                                                color: #65b2df;
                                            }

                                            .plus_product_standard {
                                                margin-top: 0.5em;
                                                width: 100%;

                                                select {
                                                    cursor: pointer;
                                                    padding: 0 0.5em;
                                                    color: #aaa;
                                                    min-width: 60%;
                                                    max-width: 100%;
                                                    height: 2.5em;
                                                    border: 1px solid #aaa;
                                                }
                                            }
                                        }

                                        .add_btn {
                                            display: flex;
                                            align-items: center;
                                            padding: 0.5em;
                                            // position: absolute;
                                            // right: 0.5em;
                                            // top: 50%;
                                            // transform: translateY(-50%);
                                            cursor: pointer;
                                            font-size: 2em;
                                            color: #666;

                                            &:hover {
                                                color: #333;

                                                i {
                                                    transform: scale(1.1);
                                                }
                                            }
                                        }
                                    }


                                }
                            }
                        }
                    }


                }

                &.quantity {
                    margin: 2em 0;
                    //background-color: #f9f9f9;

                    .contain_wrap {
                        display: flex;
                        justify-content: start;
                        align-items: center;

                        .btn {
                            cursor: pointer;
                            transition: all 0.2s ease-in-out;
                            i {
                                margin-right: 0.5em;
                            }
                            &:hover {
                                transform: scale(1.03);
                            }
                        }

                        .quantity_input_wrap {
                            width: 40%;
                            background-color: #fff;
                            border: 1px solid #ccc;
                            display: flex;
                            justify-content: space-between;
                            align-items: stretch;

                            &.hide {
                                display: none;
                            }

                            .remove, .add {
                                position: relative;
                                cursor: pointer;
                                font-size: 16px;
                                width: 3.5em;
                                padding-top: 3.5em;
                                color: #333;

                                i {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%);
                                }

                                &:hover {
                                    background-color: #333;
                                    color: #fff;
                                }
                            }

                            .num {
                                border-right: 1px solid #ccc;
                                border-left: 1px solid #ccc;
                                width: 52%;
                                flex-shrink: 5;
                                display: flex;
                                justify-content: start;
                                align-items: center;
                                padding: 0 0.5em;

                                .caption {
                                    color: #aaa;
                                    width: 50%;
                                    max-width: 36px;
                                }

                                .input {
                                    flex-grow: 1;
                                    width: 50%;

                                    input {
                                        text-align: center;
                                        border: 0;
                                        font-size: 1.5em;
                                        line-height: 1;
                                        width: 100%;

                                        &::placeholder {
                                            font-size: 0.8em;
                                            color: #aaa;
                                        }

                                        &::-webkit-inner-spin-button {
                                            appearance: none;
                                        }
                                    }
                                }
                            }
                        }

                        .dp_preview_btn {
                            text-align: center;
                            width: 45%;
                            line-height: 3.5;
                            font-size: 16px;
                            background-color: #666;
                            color: #fff;
                            border-radius: 0.2em;

                        }

                        .add_to_cart {
                            text-align: center;
                            line-height: 3.5;
                            font-size: 16px;
                            width: 55%;
                            margin-left: 5%;
                            border-radius: 0.2em;
                            background-color: #000;
                            color: #fff;


                            &.order {
                                color: #333 !important;
                                background-color: #fff !important;
                                border: 1px solid #aaa;
                            }
                        }

                        .dp_preview_popup {
                            font-size: 14px;
                            z-index: 999;
                            position: fixed;
                            top: 0;
                            left: 0;
                            pointer-events: none;

                            .mask {
                                background-color: rgba($color: #000000, $alpha: 0.7);
                                width: 100vw;
                                height: 100vh;
                                pointer-events: none;
                                z-index: 999;
                                opacity: 0;
                                transition: opacity 0.3s ease-out;
                            }
                            .dp_container {
                                font-size: 1em;
                                position: absolute;
                                display: none;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%,-50%);
                                width: 80%;
                                background-color: #fff;
                                padding: 2em;
                                border-radius: 0.8em;
                                pointer-events: all;

                                .title {
                                    font-weight: 500;
                                }

                                .dp_nav {
                                    display: flex;
                                    justify-content: start;
                                    align-items: center;
                                    gap: 1em;
                                    margin: 1em 0;

                                    .nav_item {
                                        cursor: pointer;
                                        padding: 0.5em 1em;
                                        border: 1px solid #ddd;
                                        border-radius: 0.5em;
                                        transition: transform 0.1s ease-out;

                                        &.active {
                                            background-color: #333;
                                            color: #fff;
                                        }

                                        &:hover {
                                            transform: scale(1.1);
                                        }
                                    }
                                }

                                .dp_content_wrap {
                                    width: 100%;

                                    .content_item {
                                        display: none;
                                        height: 65vh;

                                        iframe {
                                            width: 100%;
                                            height: 100%;
                                        }

                                        .empty {
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            height: 100%;
                                        }

                                        &.active {
                                            display: block;
                                        }
                                    }
                                }
                            }

                            &.open {
                                .mask {
                                    pointer-events: auto;
                                    backdrop-filter: blur(5px);
                                    opacity: 1;
                                }
                                .dp_container {
                                    display: block;
                                }
                            }
                        }

                    }
                }

                &.add_cart {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    text-align: center;
                    line-height: 3.5;
                    font-size: 1.3em;

                    .add_to_cart, .add_to_fav {
                        border-radius: 0.2em;
                        color: #fff;
                        cursor: pointer;
                        transition: transform 0.2s ease-out;

                        i {
                            margin-right: 0.5em;
                        }

                        &:hover {
                            transform: scale(1.03);
                        }
                    }

                    .add_to_cart {
                        width: 57%;
                        background-color: #000;

                        &.order {
                            color: #333 !important;
                            background-color: #fff !important;
                            border: 1px solid #aaa;
                        }
                    }

                    .add_to_fav {
                        width: 40%;
                        background-color: rgb(255, 163, 163);
                    }
                }

                &.combine_selfpick_now_standard {
                    .caption {
                        margin: 1em 0;
                        font-size: 1.5em;
                    }
                }

                &.size_suggest {
                    font-size: 1em;
                    margin: 0;

                    >.size_suggest {
                        font-size: 14px;
                        background-color: #Fff;
                        border: 1px solid #f1f1f1;
                        border-radius: 0.5em;
                        overflow: hidden;
                        margin: 0;

                        .size_suggest_caption {
                            cursor: pointer;
                            position: relative;
                            display: block;
                            width: 100%;
                            font-size: 1.2em;
                            font-weight: 400;
                            padding: 0.5em 1em;
                            border-bottom: 1px solid #eee;

                            .icon {
                                display: inline-block;
                                i {
                                    font-size: 1em;
                                }
                            }

                            &:after {
                                content: "";
                                position: absolute;
                                right: 1.3em;
                                top: 50%;
                                width: 0.5em;
                                height: 0.5em;
                                border-top: 1px solid #666;
                                border-right: 1px solid #666;
                                transition: transform 0.3s ease-out;
                                transform: translateY(-50%) rotate(45deg);
                            }

                            &.open:after {
                                transform: translateY(-50%) rotate(135deg);
                            }
                        }

                        .size_suggest_container {
                            display: none;
                            max-width: none;
                            width: 100%;
                            font-size: 0.8;
                            padding: 1.5em;

                            .title {
                                font-size: 0.5em;
                                margin-bottom: 0.5em;
                            }
                            .input_list {
                                margin: 0;
                            }
                            .suggest {
                                margin: 1.5em 0 0.5em;
                            }
                        }
                    }
                }

                & ~ .size_suggest {
                    margin-top: 1em;
                }
            }

            &.popup_standard_select {
                position: fixed;
                z-index: 1000;
                margin: 0;
                width: 100%;
                top: 0;
                left: 0;
                //display: none;
                pointer-events: none;
                overflow: hidden;
                height: 0;

                .mask {
                    width: 100%;
                    height: 100%;
                    background-color: rgba($color: #000000, $alpha: 0.7);
                    opacity: 0;
                    backdrop-filter: blur(5px);
                    transition: opacity 0.3s ease-out;
                }

                .popup_standard_container {
                    position: absolute;
                    min-width: 500px;
                    max-width: 1000px;
                    max-height: 90vh;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    background-color: #fff;

                    .popup_inner_wrap {
                        width: 100%;
                        overflow: hidden;
                        display: flex;
                        justify-content: start;
                        align-items: stretch;
                        gap: 2em;
                        padding: 2em;

                        .popup_inner {
                            position: relative;
                            //padding-bottom: 6em;
                            width: 100%;
                            flex-shrink: 0;
                            transition: all 0.2s ease-out;

                            &.page_main {
                                margin-left: 0;

                                &.to_combine_choose {
                                    margin-left: calc( -100% - 2em );
                                }
                            }

                            .popup_inner_main {
                                display: flex;
                                justify-content: center;
                                align-items: stretch;
                                gap: 2em;
                                height: 60vh;

                                .flex_col {
                                    width: 50%;
                                    min-width: 400px;
                                    //overflow-y: auto;
                                    height: 100%;

                                    &:nth-child(1){
                                        flex-grow: 1;
                                        display: flex;
                                        flex-direction: column;
                                    }

                                    .info_block {
                                        display: flex;
                                        justify-content: flex-start;
                                        align-items: start;
                                        gap: 1em;

                                        .product_pic {
                                            width: 20%;

                                            .pic_item {
                                                position: relative;
                                                width: 100%;
                                                padding-top: 100%;

                                                img {
                                                    position: absolute;
                                                    top: 0;
                                                    width: 100%;
                                                    height: 100%;
                                                    object-fit: cover;
                                                }
                                            }
                                        }

                                        .dtl_blank {
                                            .block {
                                                &.price {
                                                    width: 100%;
                                                }
                                            }
                                        }
                                    }

                                    .standard_block {
                                        margin-top: 1em;

                                    }

                                    .single_level {
                                        // max-height: 30vh;
                                        // overflow-y: auto;
                                        // overflow-x: clip;
                                        // padding-right: 0.5em;

                                        &::-webkit-scrollbar {
                                            width: 5px;
                                            background-color: #eee;
                                        }
                                        &::-webkit-scrollbar-thumb {
                                            background-color: #ccc;
                                            border-radius: 99em;
                                            width: 15px;
                                        }


                                        .combine_product_icon {
                                            right: 1em !important;
                                        }
                                    }

                                    .plus_product_block,
                                    .standard_block {
                                        flex-grow: 1;
                                        height: 100%;   
                                        overflow: auto;                                     

                                        .block {
                                            height: 100%;
                                            display: flex;
                                            flex-direction: column;
                                            align-items: center;

                                            .popup_slide_wrap {
                                                width: 100%;
                                                flex-grow: 1;
                                                overflow: auto;
                                                display: flex;
                                                flex-direction: column;
                                            }

                                            dl.slide_block {
                                                width: 100%;
                                                //height: 100%;
                                                flex-grow: 1;
                                                flex-shrink: 0;
                                                display: flex;
                                                flex-direction: column;

                                                &:nth-child(1){
                                                    flex-grow: 1;
                                                }

                                                dd {
                                                    max-height: unset;
                                                    flex-grow: 1;
                                                    overflow-y: auto;


                                                }
                                            }


                                        }
                                    }

                                    .standard_block {
                                        max-height: calc( 60vh - 82px - 1em );
                                    }

                                }

                                .dp_container {
                                    font-size: 1em;
                                    // position: absolute;
                                    // display: none;
                                    // top: 50%;
                                    // left: 50%;
                                    // transform: translate(-50%,-50%);
                                    width: 100%;
                                    background-color: #fff;
                                    border-radius: 0.8em;
                                    //pointer-events: all;
                                    display: flex;
                                    flex-direction: column;

                                    .title {
                                        font-size: 2em;
                                        font-weight: 500;
                                    }

                                    .dp_nav {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: start;
                                        align-items: center;
                                        gap: 1em;
                                        margin: 1em 0;

                                        .nav_item {
                                            cursor: pointer;
                                            padding: 0.5em 1em;
                                            border: 1px solid #ddd;
                                            border-radius: 0.5em;
                                            transition: transform 0.1s ease-out;

                                            &.active {
                                                background-color: #333;
                                                color: #fff;
                                            }

                                            &:hover {
                                                transform: scale(1.1);
                                            }
                                        }
                                    }

                                    .dp_content_wrap {
                                        width: 100%;
                                        flex-grow: 1;

                                        .content_item {
                                            display: none;
                                            //height: calc( 60vh - 7.5em );
                                            height: 100%;

                                            iframe {
                                                width: 100%;
                                                height: 100%;
                                            }

                                            .empty {
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                height: 100%;
                                            }

                                            &.active {
                                                display: block;
                                            }
                                        }
                                    }
                                }
                            }

                            .popup_inner_bottom {
                                // position: absolute;
                                // bottom: 0;
                                // left: 0;
                                margin-top: 2em;
                                width: 100%;
                                max-width: 550px;
                                background-color: #fff;

                                .quantity {
                                    margin: 0;
                                }

                                .back_btn {
                                    cursor: pointer;
                                    background-color: #000;
                                    color: #fff;
                                    text-align: center;
                                    font-size: 16px;
                                    line-height: 3.5;
                                    width: 50%;
                                    border-radius: 0.2em;
                                    //margin: 1em 0;
                                    transition: transform 0.2s ease-out;

                                    i {
                                        margin-right: 1em;
                                    }

                                    &:hover {
                                        transform: scale(1.02);
                                    }
                                }
                            }
                        }
                    }



                    .close {
                        cursor: pointer;
                        position: absolute;
                        line-height: 1;
                        font-size: 3em;
                        right: -0.5em;
                        top: -0.5em;

                        i {
                            border-radius: 99em;
                            background-color: #fff;
                        }
                    }
                }

                &.open {
                    pointer-events: all;
                    height: 100vh;

                    .mask {
                        opacity: 1;
                    }
                }
            }
        }

        &.triple_column {
            width: 80%;
            min-width: 1180px;

            .block_sort {
                width: 30%;

                &.block_sort_left {
                    max-width: 350px;
                }
                &.block_sort_right {
                    min-width: 420px;
                }

                &~.block_sort {
                    margin-left: 3%;
                }

                .block {
                    &.quantity {
                        .contain_wrap {
                            .quantity_input_wrap {
                                width: 50%;
                            }
                        }
                    }
                    &.event_list {

                        .event_item {
                            width: 80%;

                            @media screen and (min-width:1441px) {
                                width: 100%;
                                max-width: 420px;
                            }
                        }
                    }
                }
            }
        }


    }

    //自選規格彈跳視窗
    &.combine_selfpick_popup {
        width: 100%;
        min-width: auto;
        margin: 0;

        .product_detail_block {
            padding: 0;
            height: 100%;

            .block_sort {

                &.middle {
                    width: 40%;

                    .pic_nav {
                        width: 100%;

                        .pic_nav_item {
                            aspect-ratio: 1/1;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                    }

                    .info {
                        display: none;
                    }
                }
                &.right {
                    height: 100%;
                    width: 55%;
                    min-width: 330px;   
                    overflow: hidden;
                    margin-left: 5%;
                    display: flex;
                    flex-direction: column;

                    .standard_list_info {
                        flex-grow: 1;
                    }
                }

                dl.slide_block {
                    display: flex;
                    flex-direction: column;
                    height: 100%;

                    dd {
                        flex-grow: 1;

                        .single_level,
                        .multi_level {

                            .list {
                                padding: 0.5em 0;
                                max-height: 30vh;
                                overflow-y: auto;
                                overflow-x: clip;
                            }
                        }
                    }
                }
            }
        }


    }
}

.popup_standard_select_wrap {
    margin: 0;
    .product_detail_block {
        padding: 0;
    }
}

.flash_cart_newPD {
    .one_page_inside {
        border-radius: 1em;
        box-shadow: 3px 3px 1vw rgba($color: #000000, $alpha: 0.05);
        background-color: #fff;

        .variable_product_detail {
            width: 100%;
            max-width: 1180px;
            min-width: unset;

            .product_detail_block {

                .block_sort {
                    .block {
                        .slide_block {
                            border: 1px solid #eee;
                        }

                        &.promotion_word {
                            font-size: 1em;
                        }

                        &.name {
                            .name_ct {
                                font-size: 1.7em;
                            }
                            .name_en {
                                font-size: 1.3em;
                            }
                        }

                        &.rating {
                            line-height: 1;

                            .rating_star {
                                font-size: 1.3em;
                            }
                            .rating_avg {
                                font-size: 1.1em;
                            }
                        }

                        &.price {
                            line-height: 1;
                        }

                        &.right_link {
                            font-size: 12px;
                        }

                        &.standard_list_info {

                        }
                    }
                }
            }
        }
    }
}
*/
.new_shopping_car {
  background-color: #f9f9f9;
  font-family: "Noto Sans TC", sans-serif, "微軟正黑體";
  font-size: 13px;
  font-weight: 300;
  color: #666;
  text-align: left;
  padding-bottom: 5em;
}
@media screen and (min-width: 1441px) {
  .new_shopping_car {
    font-size: 14px;
  }
}
.new_shopping_car * {
  box-sizing: border-box;
}
.new_shopping_car ul.list, .new_shopping_car ol.list, .new_shopping_car dl.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.new_shopping_car ul.list > li, .new_shopping_car ul.list dt, .new_shopping_car ul.list dd, .new_shopping_car ol.list > li, .new_shopping_car ol.list dt, .new_shopping_car ol.list dd, .new_shopping_car dl.list > li, .new_shopping_car dl.list dt, .new_shopping_car dl.list dd {
  list-style: none;
  margin: 0;
  padding: 0;
}
.new_shopping_car input, .new_shopping_car select {
  font-family: inherit;
  font-weight: 300;
}
.new_shopping_car a:link, .new_shopping_car a:visited, .new_shopping_car a:active {
  font-family: inherit;
  font-weight: unset !important;
}
.new_shopping_car img {
  display: block;
  width: 100%;
}
.new_shopping_car .flex_row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.new_shopping_car nav#shoppingcar_navigation {
  z-index: 9;
  position: sticky;
  top: 0;
  background-color: #fafafa;
  font-size: 1em;
  transition: all 0.2s ease-out;
}
.new_shopping_car nav#shoppingcar_navigation ul {
  padding: 1em 5em;
  width: 1180px;
  margin: 0 auto;
  justify-content: space-between;
}
.new_shopping_car nav#shoppingcar_navigation ul .item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.new_shopping_car nav#shoppingcar_navigation ul .item .circle {
  position: relative;
  width: 100%;
}
.new_shopping_car nav#shoppingcar_navigation ul .item .circle .icon {
  z-index: 2;
  position: relative;
  text-align: center;
  margin: 0 auto;
  width: 4em;
  height: 4em;
  border-radius: 99em;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #ddd;
  transition: all 0.1s ease-out;
}
.new_shopping_car nav#shoppingcar_navigation ul .item .circle .icon i {
  font-size: 1.5em;
  line-height: 2.6666666667em;
}
.new_shopping_car nav#shoppingcar_navigation ul .item .caption {
  width: max-content;
  margin-top: 0.5em;
  font-size: 0.8em;
  color: #ccc;
  transition: all 0.1s ease-out;
}
.new_shopping_car nav#shoppingcar_navigation ul .item:nth-child(n+2) .circle:before, .new_shopping_car nav#shoppingcar_navigation ul .item:nth-child(n+2) .circle:after {
  z-index: 0;
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  top: 50%;
  left: -50%;
  background-color: #eee;
  transform-origin: left;
}
.new_shopping_car nav#shoppingcar_navigation ul .item:nth-child(n+2) .circle:after {
  width: 0;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.hide {
  display: none;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.hide:first-child + .item .circle::after, .new_shopping_car nav#shoppingcar_navigation ul .item.hide:first-child + .item .circle::before {
  display: none;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open .circle .icon {
  position: relative;
  z-index: 99;
  background-color: #fff;
  color: #666;
  transition: all 0.3s ease-out;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open .circle:before {
  height: 1px;
  background-color: rgba(133, 133, 133, 0.5);
  transition: all 0.5s ease-out;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open .circle:after {
  height: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease-out;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open .caption {
  color: #666;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open.active .circle .icon {
  z-index: 99;
  transform: scale(1.05);
  background-color: #333;
  color: #fff;
  border: 2px solid #666;
  transition-delay: 0.3s;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open.active .circle:before {
  z-index: 0;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open.active .circle:after {
  width: 100%;
}
.new_shopping_car nav#shoppingcar_navigation ul .item.open.active .caption {
  font-weight: 500;
  transform: translateY(10%) scale(1.1);
}
.new_shopping_car nav#shoppingcar_navigation.top.scroll {
  border-bottom: 1px solid #eee;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
.new_shopping_car nav#shoppingcar_navigation.left {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(calc(-590px - 5vw), -50%);
  background-color: transparent;
  transition: unset;
}
@media screen and (max-width: 1280px) {
  .new_shopping_car nav#shoppingcar_navigation.left {
    left: 1em;
    transform: translate(0, -50%);
  }
}
.new_shopping_car nav#shoppingcar_navigation.left ul {
  width: auto;
  padding: 0;
  display: block;
}
.new_shopping_car nav#shoppingcar_navigation.left ul .item {
  flex-direction: row;
  align-items: center;
}
.new_shopping_car nav#shoppingcar_navigation.left ul .item .caption {
  margin-top: 0;
  margin-left: 1em;
}
.new_shopping_car nav#shoppingcar_navigation.left ul .item:nth-child(n+2) {
  margin-top: 5vh;
}
.new_shopping_car nav#shoppingcar_navigation.left ul .item:nth-child(n+2) .circle:before, .new_shopping_car nav#shoppingcar_navigation.left ul .item:nth-child(n+2) .circle:after {
  width: calc(5vh + 4em);
  top: calc((5vh + 4em) * -1);
  left: 50%;
  transform: rotate(90deg) translate(0, 0%);
}
.new_shopping_car nav#shoppingcar_navigation.left ul .item:nth-child(n+2) .circle:after {
  width: 0;
}
.new_shopping_car nav#shoppingcar_navigation.left ul .item.open.active .circle:after {
  width: calc(5vh + 4em);
}
.new_shopping_car nav.left ~ section, .new_shopping_car nav.left ~ div > section {
  padding-left: 150px;
}
.new_shopping_car section {
  width: 1180px;
  margin: 0 auto;
  font-size: 1em;
}
.new_shopping_car section > .title {
  padding-left: 4em;
}
.new_shopping_car section > .title h2 {
  font-weight: 300;
  width: max-content;
  color: #666;
  font-size: 1.5em;
  line-height: 3;
}
.new_shopping_car section > .block {
  width: 100%;
  padding: 2em 4em;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 10px -5px rgba(0, 0, 0, 0.1);
}
.new_shopping_car section > .block .btn_input_radio label {
  display: block;
  cursor: pointer;
  position: relative;
  transition: all 0.1s ease-out;
  padding: 0.5em;
  padding-left: 2.5em;
  border-radius: 0.5em;
  line-height: 1.2;
  font-weight: 300;
  color: #666;
  border: 1px solid transparent;
}
.new_shopping_car section > .block .btn_input_radio label:before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  left: 1.5em;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 99em;
  border: 1px solid #bbb;
}
.new_shopping_car section > .block .btn_input_radio label:after {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  left: 1.5em;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  background-color: #f39797;
  border-radius: 99em;
  transition: transform 0.2s;
}
.new_shopping_car section > .block .btn_input_radio label:hover {
  color: #333;
  border: 1px solid #eee;
}
.new_shopping_car section > .block .btn_input_radio input {
  display: none;
}
.new_shopping_car section > .block .btn_input_radio input:checked ~ label {
  transition: all 0.5s ease-out;
}
.new_shopping_car section > .block .btn_input_radio input:checked ~ label:after {
  transform: translate(-50%, -50%) scale(1);
}
.new_shopping_car section > .block .btn_input_radio.type_btn label {
  padding: 0.7em 1em;
  padding-left: 2.5em;
  background-color: #fff;
  border: 1px solid #ddd;
}
.new_shopping_car section > .block .btn_input_radio.type_btn label:hover {
  background-color: #fafafa;
  color: #333;
  transform: scale(1.02);
}
.new_shopping_car section > .block .btn_input_radio.type_btn input:checked ~ label {
  background-color: #333;
  color: #fff;
}
.new_shopping_car section > .block .btn_input_radio.type_btn input:checked ~ label:after {
  width: 0.5em;
  height: 0.5em;
}
.new_shopping_car section > .block .btn_input_radio.type_btn ~ .type_btn {
  margin-left: 1em;
}
.new_shopping_car section > .block .btn_input_checkbox {
  width: max-content;
}
.new_shopping_car section > .block .btn_input_checkbox label {
  display: block;
  cursor: pointer;
  position: relative;
  border-radius: 0.5em;
  transition: transform 0.1s ease-out;
  line-height: 1.2;
  font-weight: 300;
  padding: 0.7em 1em;
  padding-left: 2.5em;
  background-color: #fff;
  color: #666;
}
.new_shopping_car section > .block .btn_input_checkbox label:before {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 3px;
}
.new_shopping_car section > .block .btn_input_checkbox label:after {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translate(15%, -80%) rotate(-50deg);
}
.new_shopping_car section > .block .btn_input_checkbox input {
  display: none;
}
.new_shopping_car section > .block .btn_input_checkbox input:checked ~ label:before {
  width: 1em;
  height: 1em;
  background-color: #f39797;
  border: 1px solid #f39797;
}
.new_shopping_car section > .block .btn_input_checkbox input:checked ~ label:after {
  width: 0.7em;
  height: 0.5em;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.new_shopping_car section > .block .btn_input_checkbox ~ .btn_input_checkbox {
  margin-left: 1em;
}
.new_shopping_car section > .block .btn_input_checkbox.type_btn label {
  background-color: #fff;
  border: 1px solid #ddd;
}
.new_shopping_car section > .block .btn_input_checkbox.type_btn label:hover {
  background-color: #fafafa;
  color: #333;
  transform: scale(1.02);
}
.new_shopping_car section > .block .btn_input_checkbox.type_btn input:checked ~ label {
  background-color: #333;
  color: #fff;
}
.new_shopping_car section > .block .btn_input_checkbox.type_btn input:checked ~ label:before {
  transition: 0.3s ease-in-out;
}
.new_shopping_car section > .block .btn_input_checkbox.type_btn input:checked ~ label:after {
  width: 0.9em;
  height: 0.6em;
  border-width: 3px;
  transition: 0.5s ease-out;
}
.new_shopping_car section > .block .btn_input_select select {
  cursor: pointer;
  outline: 0;
  display: block;
  border: 1px solid #ddd;
  border-radius: 0.3em;
  color: #666;
  padding: 0.5em 0.5em;
  font-size: 1em;
}
.new_shopping_car section > .block .btn_input_select select:focus {
  border: 1px solid #aaa;
}
.new_shopping_car section > .block .btn_input_select ~ .btn_input_select, .new_shopping_car section > .block .btn_input_select ~ .btn_input_text {
  margin-left: 1em;
}
.new_shopping_car section > .block .btn_input_text {
  position: relative;
}
.new_shopping_car section > .block .btn_input_text .input_text_notice {
  position: absolute;
  width: max-content;
  color: #999;
  font-size: 0.8em;
  right: -1em;
  top: 50%;
  transform: translate(100%, -50%);
}
.new_shopping_car section > .block .btn_input_text input {
  position: relative;
  outline: 0;
  border: 0;
  width: 100%;
  font-size: 1em;
  padding: 0.6em 0.5em;
  border-bottom: 1px solid #ddd;
}
.new_shopping_car section > .block .btn_input_text input::placeholder {
  font-size: 0.9em;
  color: #aaa;
}
.new_shopping_car section > .block .btn_input_text input:focus ~ .under_line {
  width: 100%;
}
.new_shopping_car section > .block .btn_input_text input:focus ~ .input_text_notice {
  display: block;
}
.new_shopping_car section > .block .btn_input_text input[name=order_mobile], .new_shopping_car section > .block .btn_input_text input[name=receiver_mobile], .new_shopping_car section > .block .btn_input_text input[name=receiver_name], .new_shopping_car section > .block .btn_input_text input[name=receiver_id] {
  width: 10em;
}
.new_shopping_car section > .block .btn_input_text .under_line {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #666;
  bottom: 0;
  left: 0;
  transition: width 0.3s ease-out;
}
.new_shopping_car section > .block .btn_input_text + .btn_input_radio {
  margin-left: 1em;
}
.new_shopping_car section > .block .btn_input_area textarea {
  outline: 0;
  padding: 0.5em;
  border-radius: 0.5em;
  border: 1px solid #ddd;
}
.new_shopping_car section > .block .btn_input_area textarea:focus {
  border: 1px solid #aaa;
}
.new_shopping_car section > .block ~ .block {
  margin-top: 1em;
}
.new_shopping_car section > .block .list .item {
  padding: 0.7em 0.5em;
  line-height: 2;
}
.new_shopping_car section > .block .list .item:hover {
  background-color: #fafafa;
}
.new_shopping_car section > .block .list .item .caption {
  width: 44%;
}
.new_shopping_car section > .block .list .item .caption .unusable {
  text-decoration: line-through;
}
.new_shopping_car section > .block .list .item .caption .info {
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin-left: 0.5em;
}
.new_shopping_car section > .block .list .item .caption .info .detail {
  position: absolute;
  width: max-content;
  max-width: 300px;
  line-height: 1.2;
  background-color: #eee;
  border: 1px solid #ddd;
  padding: 1em;
  left: 1.5em;
  bottom: 1.5em;
  display: none;
}
.new_shopping_car section > .block .list .item .caption .info:hover .detail {
  display: block;
}
.new_shopping_car section > .block .list .item .caption .coupon_btn {
  cursor: pointer;
  width: max-content;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.5em;
  line-height: 1.5em;
  padding: 0.7em 1em;
}
.new_shopping_car section > .block .list .item .caption .coupon_btn .icon {
  width: 2em;
}
.new_shopping_car section > .block .list .item .caption .coupon_btn .coupon_caption {
  min-width: 7em;
  height: 1.5em;
}
.new_shopping_car section > .block .list .item .caption > .detail {
  padding-left: 1.2em;
  font-size: 0.8em;
  line-height: 2;
}
.new_shopping_car section > .block .list .item .content {
  width: 42%;
  text-align: right;
}
.new_shopping_car section > .block .list .item .content .unusable {
  color: #f39797;
}
.new_shopping_car section > .block .list .item .note {
  width: 14%;
}
.new_shopping_car section ~ section {
  margin-top: 2em;
}
.new_shopping_car #member_login .member_login_social {
  width: 100%;
}
.new_shopping_car #member_login .member_login_social .member_login_main {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  min-height: auto;
}
.new_shopping_car #member_login .member_login_social .member_login_main > .block:nth-child(1) {
  width: 65%;
}
.new_shopping_car #member_login .member_login_social .member_login_main > .block:nth-child(2) {
  width: 30%;
}
.new_shopping_car #member_login .member_login_social .member_login_main > .block .title i {
  margin-right: 0.5em;
}
.new_shopping_car #checkout_list {
  margin-top: 2em;
  font-size: 1em;
}
.new_shopping_car #checkout_list .block .list_caption .caption {
  color: #666;
  line-height: 2;
  width: 14%;
  text-align: right;
}
.new_shopping_car #checkout_list .block .list_caption .caption:first-child {
  width: 44%;
  text-align: center;
}
.new_shopping_car #checkout_list .block .cart_product_list {
  margin-top: 1em;
  padding: 0.5em 0;
  border-top: 1px solid #eee;
  border-bottom: 2px solid #999;
}
.new_shopping_car #checkout_list .block .cart_product_list .item {
  padding: 1em 0.5em;
}
.new_shopping_car #checkout_list .block .cart_product_list .item:hover {
  background-color: #f9f9f9;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap {
  width: 93%;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap > div {
  text-align: right;
  width: 15.05%;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .info {
  width: 39.785%;
  text-align: left;
  padding-left: 1em;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .info .name {
  line-height: 1.2;
  font-weight: 400;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .info .standard {
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.5;
  color: #999;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .info .standard .multi_select {
  cursor: pointer;
  width: max-content;
  padding: 0.3em;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #fff;
  margin: 0.3em 0;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .info .standard .multi_select i {
  font-size: 0.8em;
  margin-left: 0.3em;
  color: #333;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .info .activity_name {
  color: #f78080;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .sale {
  position: relative;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .sale .slash {
  position: absolute;
  top: -1.5em;
  right: 0;
  text-decoration: line-through;
  color: #aaa;
  font-size: 0.8em;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .amount select {
  margin-left: auto;
  min-width: 5em;
  text-align: center;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .amount .amount_num {
  margin-left: auto;
  width: 5em;
  text-align: center;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .remove {
  text-align: center;
  font-size: 0.8em;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .remove .btn_remove {
  cursor: pointer;
  font-size: 1em;
  display: inline-block;
  text-align: center;
  width: 2em;
  height: 2em;
  line-height: 1.8em;
  border: 1px solid #ddd;
  border-radius: 99em;
  background-color: #fff;
  color: #999;
  transition: all 0.1s ease-out;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .remove .btn_remove:hover {
  transform: scale(1.2);
  background-color: #333;
  color: #eee;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .multi_standard_select {
  order: 5;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .wrap .multi_standard_select .btn_multi_standard_select {
  cursor: pointer;
  font-size: 0.8em;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  padding: 0.3em 1em;
  width: max-content;
  margin: 0 auto;
}
.new_shopping_car #checkout_list .block .cart_product_list .item .pic {
  width: 7%;
}
.new_shopping_car #checkout_list .block .cart_product_list .item ~ .item {
  border-top: 1px solid #eee;
}
.new_shopping_car #checkout_list .block .bill_list .item:nth-last-child(2) {
  padding-bottom: 2em !important;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .coupon_btn, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .coupon_btn {
  display: inline-flex;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .coupon_btn .coupon_input, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .coupon_btn .coupon_input {
  display: none;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .coupon_btn .coupon_input .btn_input_text input, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .coupon_btn .coupon_input .btn_input_text input {
  width: 7em;
  padding: 0;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .send, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .send {
  cursor: pointer;
  margin-left: 1em;
  color: #fff;
  background-color: #333;
  padding: 0.3em 1em;
  border-radius: 0.3em;
  transition: opacity 0.5s ease;
  pointer-events: none;
  display: none;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .send.using, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .send.using {
  display: inline-flex;
  pointer-events: unset;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .send.using .use, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .send.using .use {
  display: none;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .send.using .delete, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .send.using .delete {
  display: block;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .send.active, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .send.active {
  display: inline-flex;
  pointer-events: unset;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .send.active .use, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .send.active .use {
  display: block;
}
.new_shopping_car #checkout_list .block .bill_list .item.serial_coupon .caption .send.active .delete, .new_shopping_car #checkout_list .block .bill_list .item.profit .caption .send.active .delete {
  display: none;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .coupon_btn {
  display: inline-flex;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .delete {
  display: inline-flex;
  cursor: pointer;
  margin-left: 1em;
  color: #fff;
  background-color: #333;
  padding: 0.3em 1em;
  border-radius: 0.3em;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 700px;
  padding: 4em;
  background-color: #fff;
  border-radius: 0.5em;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li {
  position: relative;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li label {
  padding: 1.5em;
  display: flex;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li label::before {
  display: none;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li label .e_coupon_name {
  width: 30%;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li label .e_coupon_detail {
  width: 50%;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li label .status {
  color: #39bb90;
  width: 20%;
  text-align: right;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li label.not_allowed {
  pointer-events: none;
  background-color: #fafafa;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li label.not_allowed .status {
  color: #f39797;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li ~ li label {
  border-radius: 0;
  border-top: 1px solid #eee;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li:hover label {
  border-radius: 0.5em;
  transform: scale(1.01);
  transition: all 0.1s ease-out;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.05);
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul li:hover + li label {
  border-top-color: transparent;
}
.new_shopping_car #checkout_list .block .bill_list .item.e_coupon .caption .e_coupon_popup .popup_container ul:hover li:not(:hover) {
  filter: opacity(0.5);
}
.new_shopping_car #checkout_list .block .bill_list .item.product_sum {
  font-size: 1.2em;
  line-height: 3;
}
.new_shopping_car #checkout_list .block .bill_list .item.product_sum .content {
  font-weight: 400;
}
.new_shopping_car #checkout_list .block .bill_list .item.event .caption .event_name {
  padding: 0.3em 0.5em;
  border-radius: 0.2em;
  background-color: #56ba81;
  color: #fff;
}
.new_shopping_car #checkout_list .block .bill_list .item.event .caption .event_name.first_order {
  background-color: #8bc4e6;
}
.new_shopping_car #checkout_list .block .bill_list .item.event .caption .event_name.quota_cash {
  background-color: #f39797;
}
.new_shopping_car #checkout_list .block .bill_list .item.profit {
  padding: 1em 0.5em;
}
.new_shopping_car #checkout_list .block .bill_list .item.profit .coupon_btn {
  margin-top: 0.5em;
}
.new_shopping_car #checkout_list .block .bill_list .item.total_price {
  flex-wrap: wrap;
  border-top: 2px solid #666;
}
.new_shopping_car #checkout_list .block .bill_list .item.total_price .caption.strong {
  font-size: 1.5em;
}
.new_shopping_car #checkout_list .block .bill_list .item.total_price .content .unit {
  margin-right: 0.5em;
  font-size: 1em;
}
.new_shopping_car #checkout_list .block .bill_list .item.total_price .content .price {
  font-size: 2em;
  font-weight: 400;
}
.new_shopping_car #checkout_list .block .bill_list .item.total_price .content .tips {
  font-size: 1em;
}
.new_shopping_car #checkout_list .block .bill_list .item ~ .item {
  border-top: 1px solid #eee;
}
.new_shopping_car #checkout_list .block .give_back dt {
  padding: 1em 0.5em;
  line-height: 2;
  font-size: 0.9em;
  font-weight: 400;
  border-bottom: 2px solid #666;
}
.new_shopping_car #promotion .block .list_caption {
  text-align: left;
  padding: 1em 0.5em;
  border-bottom: 2px solid #ddd;
}
.new_shopping_car #promotion .block .list_caption .reward {
  font-size: 0.8em;
  width: 30%;
}
.new_shopping_car #promotion .block .list_caption .ruls {
  font-size: 0.8em;
  width: 50%;
}
.new_shopping_car #promotion .block .list_caption .status {
  font-size: 0.8em;
  width: 20%;
}
.new_shopping_car #promotion .block .list .item .reward {
  width: 30%;
  display: flex;
  justify-content: start;
  align-items: flex-start;
  gap: 1em;
}
.new_shopping_car #promotion .block .list .item .reward .pic {
  width: 5em;
}
.new_shopping_car #promotion .block .list .item .reward .text {
  width: 5em;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #eee;
  line-height: 1.5;
  min-height: 5em;
  color: #666;
}
.new_shopping_car #promotion .block .list .item .reward .text .profit_title {
  z-index: 2;
  font-size: 0.85em;
}
.new_shopping_car #promotion .block .list .item .reward .text .profit {
  z-index: 2;
  font-size: 1.2em;
}
.new_shopping_car #promotion .block .list .item .ruls {
  font-size: 0.8em;
  width: 50%;
  line-height: 1.5;
}
.new_shopping_car #promotion .block .list .item .ruls .name {
  font-size: 1.2em;
  font-weight: 400;
  line-height: 2;
}
.new_shopping_car #promotion .block .list .item .ruls .available {
  color: #999;
}
.new_shopping_car #promotion .block .list .item .status {
  font-size: 0.8em;
  width: 20%;
}
.new_shopping_car #promotion .block .list .item .status .complete {
  padding-left: 1em;
  font-size: 1.5em;
  color: #3ec74a;
}
.new_shopping_car #checkout_attention .block {
  position: relative;
}
.new_shopping_car #checkout_attention .block .content {
  overflow-y: hidden;
  transition: max-height 0.5s ease-in-out;
  max-height: 150px;
}
.new_shopping_car #checkout_attention .block .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(0deg, #fff 15%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.new_shopping_car #checkout_attention .block .btn {
  position: absolute;
  cursor: pointer;
  text-align: center;
  width: 3em;
  height: 3em;
  line-height: 3em;
  bottom: 1.5em;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 99em;
  background-color: #666;
  color: #fff;
}
.new_shopping_car #checkout_attention .block .btn i {
  transition: transform 0.3s ease-out;
  transform: rotate(180deg);
}
.new_shopping_car #checkout_attention .block.close .mask {
  opacity: 1;
}
.new_shopping_car #checkout_attention .block.close .btn i {
  transform: rotate(0);
}
.new_shopping_car #freight .block .internal_check,
.new_shopping_car #payment .block .internal_check {
  margin-bottom: 1em;
}
.new_shopping_car #freight .block dl dt .freight_select,
.new_shopping_car #freight .block dl dt .payment_select,
.new_shopping_car #payment .block dl dt .freight_select,
.new_shopping_car #payment .block dl dt .payment_select {
  cursor: pointer;
  width: 35%;
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 0.5em;
  transition: transform 0.1s ease-out;
}
.new_shopping_car #freight .block dl dt .freight_select:hover,
.new_shopping_car #freight .block dl dt .payment_select:hover,
.new_shopping_car #payment .block dl dt .freight_select:hover,
.new_shopping_car #payment .block dl dt .payment_select:hover {
  transform: scale(1.01);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.new_shopping_car #freight .block dl dt .freight_select .pic,
.new_shopping_car #freight .block dl dt .payment_select .pic,
.new_shopping_car #payment .block dl dt .freight_select .pic,
.new_shopping_car #payment .block dl dt .payment_select .pic {
  margin-right: 1em;
  width: 20%;
}
.new_shopping_car #freight .block dl dt .freight_select .pic i,
.new_shopping_car #freight .block dl dt .payment_select .pic i,
.new_shopping_car #payment .block dl dt .freight_select .pic i,
.new_shopping_car #payment .block dl dt .payment_select .pic i {
  font-size: 2em;
  padding: 0.4em 0.5em;
}
.new_shopping_car #freight .block dl dt .freight_select .caption,
.new_shopping_car #freight .block dl dt .payment_select .caption,
.new_shopping_car #payment .block dl dt .freight_select .caption,
.new_shopping_car #payment .block dl dt .payment_select .caption {
  width: 60%;
}
.new_shopping_car #freight .block dl dt .freight_select .arrow,
.new_shopping_car #freight .block dl dt .payment_select .arrow,
.new_shopping_car #payment .block dl dt .freight_select .arrow,
.new_shopping_car #payment .block dl dt .payment_select .arrow {
  width: 10%;
}
.new_shopping_car #freight .block dl dd,
.new_shopping_car #payment .block dl dd {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.new_shopping_car #freight .block dl dd .mask,
.new_shopping_car #payment .block dl dd .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.new_shopping_car #freight .block dl dd .popup_container,
.new_shopping_car #payment .block dl dd .popup_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 600px;
  padding: 2em;
  background-color: #fff;
  border-radius: 0.5em;
}
.new_shopping_car #freight .block dl dd .popup_container .caption,
.new_shopping_car #payment .block dl dd .popup_container .caption {
  padding-left: 1em;
  margin-bottom: 1em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list,
.new_shopping_car #payment .block dl dd .popup_container ul.list {
  padding: 1em;
  max-height: 60vh;
  overflow-y: auto;
  /* the new scrollbar will have a flat appearance with the set background color */
  /* this will style the thumb, ignoring the track */
  /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
}
.new_shopping_car #freight .block dl dd .popup_container ul.list::-webkit-scrollbar,
.new_shopping_car #payment .block dl dd .popup_container ul.list::-webkit-scrollbar {
  width: 5px;
  margin-right: -20px;
  border-radius: 1em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list::-webkit-scrollbar-track,
.new_shopping_car #payment .block dl dd .popup_container ul.list::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 1em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list::-webkit-scrollbar-thumb,
.new_shopping_car #payment .block dl dd .popup_container ul.list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 1em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list::-webkit-scrollbar-button,
.new_shopping_car #payment .block dl dd .popup_container ul.list::-webkit-scrollbar-button {
  display: none;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 1em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list::-webkit-scrollbar-corner,
.new_shopping_car #payment .block dl dd .popup_container ul.list::-webkit-scrollbar-corner {
  background-color: black;
  border-radius: 1em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item {
  padding: 0;
  border: 0;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item ~ .item,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item ~ .item {
  margin-top: 1em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item label,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item label {
  cursor: pointer;
  padding: 1em;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 0.5em;
  transition: all 0.1s ease-out;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item label:hover,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item label:hover {
  transform: scale(1.005);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item label .pic,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item label .pic {
  width: 20%;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item label .info,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item label .info {
  width: 80%;
  padding-left: 2em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item label .info .name,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item label .info .name {
  font-size: 1.3em;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item label .info .detail,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item label .info .detail {
  font-size: 1em;
  line-height: 1.5;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item input,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item input {
  display: none;
}
.new_shopping_car #freight .block dl dd .popup_container ul.list .item input:checked ~ label,
.new_shopping_car #payment .block dl dd .popup_container ul.list .item input:checked ~ label {
  background-color: #333;
  color: #fff;
  transform: scale(1.005);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.new_shopping_car #freight .block > .detail,
.new_shopping_car #payment .block > .detail {
  margin-top: 1em;
  font-size: 0.9em;
}
.new_shopping_car #freight .block > .detail ul, .new_shopping_car #freight .block > .detail ol, .new_shopping_car #freight .block > .detail dl, .new_shopping_car #freight .block > .detail dt, .new_shopping_car #freight .block > .detail dd,
.new_shopping_car #payment .block > .detail ul,
.new_shopping_car #payment .block > .detail ol,
.new_shopping_car #payment .block > .detail dl,
.new_shopping_car #payment .block > .detail dt,
.new_shopping_car #payment .block > .detail dd {
  list-style: revert;
}
.new_shopping_car #freight .block > .detail ul li, .new_shopping_car #freight .block > .detail ol li, .new_shopping_car #freight .block > .detail dl li, .new_shopping_car #freight .block > .detail dt li, .new_shopping_car #freight .block > .detail dd li,
.new_shopping_car #payment .block > .detail ul li,
.new_shopping_car #payment .block > .detail ol li,
.new_shopping_car #payment .block > .detail dl li,
.new_shopping_car #payment .block > .detail dt li,
.new_shopping_car #payment .block > .detail dd li {
  list-style: revert;
}
.new_shopping_car #freight .COD_info,
.new_shopping_car #payment .COD_info {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 1.5em 4em;
}
.new_shopping_car #freight .COD_info #id_cod_select_link,
.new_shopping_car #payment .COD_info #id_cod_select_link {
  margin-right: 1em;
  font-size: 1.5em;
  transition: transform 0.1s ease-out;
}
.new_shopping_car #freight .COD_info #id_cod_select_link > span,
.new_shopping_car #payment .COD_info #id_cod_select_link > span {
  display: block;
  text-align: center;
  border: 0;
  font-weight: 100;
  line-height: 1;
}
.new_shopping_car #freight .COD_info #id_cod_select_link > span a,
.new_shopping_car #payment .COD_info #id_cod_select_link > span a {
  display: block;
  width: 11em;
  padding: 1em 2em;
}
.new_shopping_car #freight .COD_info #id_cod_select_link > span a:visited, .new_shopping_car #freight .COD_info #id_cod_select_link > span a:link, .new_shopping_car #freight .COD_info #id_cod_select_link > span a:active,
.new_shopping_car #payment .COD_info #id_cod_select_link > span a:visited,
.new_shopping_car #payment .COD_info #id_cod_select_link > span a:link,
.new_shopping_car #payment .COD_info #id_cod_select_link > span a:active {
  font-size: 1em;
}
.new_shopping_car #freight .COD_info #id_cod_select_link > select,
.new_shopping_car #payment .COD_info #id_cod_select_link > select {
  padding: 0.7em 0.5em;
  border-radius: 0.5em;
  font-size: 0.8em;
}
.new_shopping_car #freight .COD_info #id_cod_select_link:hover,
.new_shopping_car #payment .COD_info #id_cod_select_link:hover {
  transform: scale(1.01);
}
.new_shopping_car #freight .COD_info #id_cod_select_info,
.new_shopping_car #payment .COD_info #id_cod_select_info {
  font-size: 1.2em;
}
.new_shopping_car #freight .COD_info #id_cod_select_info .span_button,
.new_shopping_car #payment .COD_info #id_cod_select_info .span_button {
  display: block;
  font-size: 1em;
  padding: 0.85em 1em;
  background-color: #000;
  border-radius: 0.3em;
  transition: transform 0.2s ease-out;
}
.new_shopping_car #freight .COD_info #id_cod_select_info .span_button i,
.new_shopping_car #payment .COD_info #id_cod_select_info .span_button i {
  margin-right: 0.5em;
}
.new_shopping_car #freight .COD_info #id_cod_select_info .span_button:hover,
.new_shopping_car #payment .COD_info #id_cod_select_info .span_button:hover {
  transform: scale(1.05);
}
.new_shopping_car #buyer_info .block .choose_area,
.new_shopping_car #receiver_info .block .choose_area,
.new_shopping_car #invoice .block .choose_area {
  margin-bottom: 1em;
}
.new_shopping_car #buyer_info .block .form dl, .new_shopping_car #buyer_info .block .form dt, .new_shopping_car #buyer_info .block .form dd,
.new_shopping_car #receiver_info .block .form dl,
.new_shopping_car #receiver_info .block .form dt,
.new_shopping_car #receiver_info .block .form dd,
.new_shopping_car #invoice .block .form dl,
.new_shopping_car #invoice .block .form dt,
.new_shopping_car #invoice .block .form dd {
  margin: 0;
  padding: 0;
}
.new_shopping_car #buyer_info .block .form dl,
.new_shopping_car #receiver_info .block .form dl,
.new_shopping_car #invoice .block .form dl {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.new_shopping_car #buyer_info .block .form dl dt,
.new_shopping_car #receiver_info .block .form dl dt,
.new_shopping_car #invoice .block .form dl dt {
  line-height: 1;
  padding: 0.7em;
  min-width: 6.5em;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_block_default,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_block_default,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_block_default {
  display: none;
  padding: 0.7em;
  line-height: 1;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_block_input.lock,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_block_input.lock,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_block_input.lock {
  display: none;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_block_input.lock input, .new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_block_input.lock select,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_block_input.lock input,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_block_input.lock select,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_block_input.lock input,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_block_input.lock select {
  pointer-events: none;
  border: 0;
  appearance: none;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_block_input.lock ~ .edit_icon,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_block_input.lock ~ .edit_icon,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_block_input.lock ~ .edit_icon {
  display: block;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_block_input.lock ~ .edit_block_default,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_block_input.lock ~ .edit_block_default,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_block_input.lock ~ .edit_block_default {
  display: block;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_detail,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_detail,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_detail {
  width: max-content;
  min-height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-right: 1em;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .member_data_notice,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .member_data_notice,
.new_shopping_car #invoice .block .form dl dd .edit_block .member_data_notice {
  display: block;
  color: #f39797;
  font-size: 0.8em;
  font-weight: 100;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .member_data_notice.show,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .member_data_notice.show,
.new_shopping_car #invoice .block .form dl dd .edit_block .member_data_notice.show {
  opacity: 1;
}
.new_shopping_car #buyer_info .block .form dl dd .edit_block .edit_icon,
.new_shopping_car #receiver_info .block .form dl dd .edit_block .edit_icon,
.new_shopping_car #invoice .block .form dl dd .edit_block .edit_icon {
  display: none;
  cursor: pointer;
  margin-left: 0.5em;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module input,
.new_shopping_car #receiver_info .block .form dl dd .address_module input,
.new_shopping_car #invoice .block .form dl dd .address_module input {
  border: 0;
  border-bottom: 1px solid #ddd;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .select_country select,
.new_shopping_car #receiver_info .block .form dl dd .address_module .select_country select,
.new_shopping_car #invoice .block .form dl dd .address_module .select_country select {
  border-radius: 0.3em;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .address,
.new_shopping_car #receiver_info .block .form dl dd .address_module .address,
.new_shopping_car #invoice .block .form dl dd .address_module .address {
  position: relative;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .address input,
.new_shopping_car #receiver_info .block .form dl dd .address_module .address input,
.new_shopping_car #invoice .block .form dl dd .address_module .address input {
  width: 100%;
  min-width: 20.5em;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .address input ~ .input_text_notice,
.new_shopping_car #receiver_info .block .form dl dd .address_module .address input ~ .input_text_notice,
.new_shopping_car #invoice .block .form dl dd .address_module .address input ~ .input_text_notice {
  position: absolute;
  width: max-content;
  right: 0;
  top: 50%;
  transform: translate(100%, -50%);
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .address input:focus ~ .under_line,
.new_shopping_car #receiver_info .block .form dl dd .address_module .address input:focus ~ .under_line,
.new_shopping_car #invoice .block .form dl dd .address_module .address input:focus ~ .under_line {
  width: 100%;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .address input:focus ~ .input_text_notice,
.new_shopping_car #receiver_info .block .form dl dd .address_module .address input:focus ~ .input_text_notice,
.new_shopping_car #invoice .block .form dl dd .address_module .address input:focus ~ .input_text_notice {
  display: block;
  opacity: 1;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .global_items,
.new_shopping_car #receiver_info .block .form dl dd .address_module .global_items,
.new_shopping_car #invoice .block .form dl dd .address_module .global_items {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .global_items > div,
.new_shopping_car #receiver_info .block .form dl dd .address_module .global_items > div,
.new_shopping_car #invoice .block .form dl dd .address_module .global_items > div {
  padding-right: 0;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module .global_items > div ~ div,
.new_shopping_car #receiver_info .block .form dl dd .address_module .global_items > div ~ div,
.new_shopping_car #invoice .block .form dl dd .address_module .global_items > div ~ div {
  margin-left: 1em;
}
.new_shopping_car #buyer_info .block .form dl dd .address_module > div ~ div,
.new_shopping_car #receiver_info .block .form dl dd .address_module > div ~ div,
.new_shopping_car #invoice .block .form dl dd .address_module > div ~ div {
  margin-top: 0.5em;
}
.new_shopping_car #buyer_info .block .form dl ~ dl,
.new_shopping_car #receiver_info .block .form dl ~ dl,
.new_shopping_car #invoice .block .form dl ~ dl {
  margin-top: 1.2em;
}
.new_shopping_car #buyer_info .block .form dl:last-child,
.new_shopping_car #receiver_info .block .form dl:last-child,
.new_shopping_car #invoice .block .form dl:last-child {
  margin-bottom: 2em;
}
.new_shopping_car #buyer_info .block .form dl.address .street,
.new_shopping_car #receiver_info .block .form dl.address .street,
.new_shopping_car #invoice .block .form dl.address .street {
  margin-top: 0.5em;
  width: 20em;
}
.new_shopping_car #buyer_info .block .form dl.agree_split_order dd .btn_input_checkbox input:checked ~ label,
.new_shopping_car #receiver_info .block .form dl.agree_split_order dd .btn_input_checkbox input:checked ~ label,
.new_shopping_car #invoice .block .form dl.agree_split_order dd .btn_input_checkbox input:checked ~ label {
  background-color: #fff;
}
.new_shopping_car #buyer_info .block .form dl.agree_split_order dd .btn_input_checkbox label,
.new_shopping_car #receiver_info .block .form dl.agree_split_order dd .btn_input_checkbox label,
.new_shopping_car #invoice .block .form dl.agree_split_order dd .btn_input_checkbox label {
  border: 0;
}
.new_shopping_car #buyer_info .block .form dl.agree_split_order dd .btn_input_checkbox label:hover,
.new_shopping_car #receiver_info .block .form dl.agree_split_order dd .btn_input_checkbox label:hover,
.new_shopping_car #invoice .block .form dl.agree_split_order dd .btn_input_checkbox label:hover {
  transform: scale(1);
}
.new_shopping_car #buyer_info .block .form dl.buy_note textarea,
.new_shopping_car #receiver_info .block .form dl.buy_note textarea,
.new_shopping_car #invoice .block .form dl.buy_note textarea {
  font-size: 1em;
  width: 20em;
}
.new_shopping_car #buyer_info .block .form dl.tips dd,
.new_shopping_car #receiver_info .block .form dl.tips dd,
.new_shopping_car #invoice .block .form dl.tips dd {
  width: 100%;
  background-color: #eee;
  color: #333;
  font-size: 0.8em;
  padding: 1em;
  border-radius: 0.5em;
}
.new_shopping_car #invoice .block .choose_area {
  flex-wrap: wrap;
}
.new_shopping_car #invoice .block .choose_area .btn_input_radio {
  margin: 0 1em 1em 0;
}
.new_shopping_car #invoice .block .blank_area {
  text-align: left;
}
.new_shopping_car #invoice .block .blank_area .invoice_blank {
  background-color: #fff !important;
  margin-bottom: 1em !important;
  padding: 0 !important;
}
.new_shopping_car #invoice .block .blank_area .invoice_blank select {
  cursor: pointer;
  width: 100%;
  height: 3em;
  border-radius: 0.3em;
  border-color: #ccc;
  color: #666;
}
.new_shopping_car #invoice .block .blank_area .invoice_blank .input_text {
  border-radius: 0.3em;
}
.new_shopping_car #invoice .block .blank_area .invoice_blank .hint {
  display: block;
  font-size: 0.8em;
  line-height: 1.5;
}
.new_shopping_car #invoice .block .blank_area .invoice_explain {
  font-size: 0.8em;
  border-radius: 0.5em;
  border: 1px solid #ddd;
}
.new_shopping_car #to_checkout {
  padding: 4em 0 10em;
}
.new_shopping_car #to_checkout .btn_checkout {
  cursor: pointer;
  width: max-content;
  margin: 0 auto;
  border-radius: 0.5em;
  font-size: 1.3em;
  padding: 1em 1.5em;
  background-color: #333;
  color: #fff;
  transition: all 0.2s ease-out;
  box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.5);
}
.new_shopping_car #to_checkout .btn_checkout i {
  margin-right: 0.5em;
}
.new_shopping_car #to_checkout .btn_checkout:hover {
  transform: scale(1.01);
  box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, 0.5), 0px 18px 10px -15px rgba(0, 0, 0, 0.5);
}

.new_member_card {
  position: relative;
  padding: 1em 0;
  overflow: hidden;
  --block_width: 92%;
}
.new_member_card * {
  box-sizing: border-box;
}
.new_member_card ul, .new_member_card li, .new_member_card dl, .new_member_card dt, .new_member_card dd {
  list-style: none;
  margin: 0;
}
.new_member_card img {
  display: block;
  width: 100% !important;
}
.new_member_card .top_bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 60vw;
  background-color: #333;
}
.new_member_card .block_shadow {
  box-shadow: 5px 5px 1em 0 rgba(0, 0, 0, 0.1);
}
.new_member_card .block {
  position: relative;
  width: var(--block_width);
  margin: 0 auto;
}
.new_member_card .block ~ .block {
  margin-top: 1em;
}
.new_member_card .block.member_info {
  position: relative;
  background-color: transparent;
  padding: 0;
  --member_card_height: 300px;
  height: var(--member_card_height);
}
.new_member_card .block.member_info .mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.new_member_card .block.member_info .card_block {
  position: absolute;
  width: 100%;
  height: var(--member_card_height);
  border-radius: 1em;
  overflow: hidden;
  justify-content: center;
  transition: height 0.5s ease-in-out 0.1s;
}
.new_member_card .block.member_info .card_block .card_area {
  position: relative;
  height: var(--member_card_height);
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.new_member_card .block.member_info .card_block .card_area .member_photo {
  position: absolute;
  width: 3em;
  height: 3em;
  left: 7%;
  top: 15%;
  transform: translateY(-50%);
  border-radius: 99em;
  background-color: #666;
  border: 2px solid #fff;
  overflow: hidden;
}
.new_member_card .block.member_info .card_block .card_area .member_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.new_member_card .block.member_info .card_block .card_area .member_card_no {
  position: absolute;
  left: 25%;
  top: 15%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1em;
}
.new_member_card .block.member_info .card_block .card_area .member_account {
  position: absolute;
  top: 25%;
  left: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.new_member_card .block.member_info .card_block .card_area .member_account li {
  font-size: 1.7em;
  line-height: 1;
}
.new_member_card .block.member_info .card_block .card_area .member_account li ~ li {
  margin-left: 0.5em;
}
.new_member_card .block.member_info .card_block .card_area .member_account li.fb {
  color: dodgerblue;
}
.new_member_card .block.member_info .card_block .card_area .member_account li.line {
  color: #3ec74a;
}
.new_member_card .block.member_info .card_block .card_area .member_account li.google {
  color: orangered;
}
.new_member_card .block.member_info .card_block .card_area .member_account li.unbound {
  color: #999;
}
.new_member_card .block.member_info .card_block .card_area .member_level {
  position: absolute;
  top: 10%;
  left: 5%;
  font-size: 1.2em;
  color: #fff;
}
.new_member_card .block.member_info .card_block .card_area .member_level i {
  color: #ffe253;
  font-size: 0.8em;
  margin-right: 0.5em;
}
.new_member_card .block.member_info .card_block .card_area .info_edit_btn {
  position: absolute;
  color: #666;
  right: 1em;
  bottom: 2em;
}
.new_member_card .block.member_info .card_block .card_area .member_code_btn {
  cursor: pointer;
  position: absolute;
  top: 8%;
  right: 5%;
  font-size: 1.5em;
  line-height: 1;
  padding: 0.2em;
  border-radius: 3px;
  background-color: #fff;
}
.new_member_card .block.member_info .card_block .card_area .member_code_btn .member_code_close {
  display: none;
  width: 1em;
  text-align: center;
}
.new_member_card .block.member_info .card_block .card_area .member_code_btn i ~ i {
  margin-left: 0.3em;
}
.new_member_card .block.member_info .card_block .card_area .member_code_popup {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease-out;
}
.new_member_card .block.member_info .card_block .card_area .member_code_popup .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}
.new_member_card .block.member_info .card_block .card_area .member_code_popup .popup_container {
  position: absolute;
  width: 80%;
  height: 70%;
  padding: 2em 3em;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1em;
  overflow: auto;
  text-align: left;
}
.new_member_card .block.member_info .card_block .card_area .member_code_popup .popup_container > div .title {
  margin-bottom: 1em;
}
.new_member_card .block.member_info .card_block .card_area .member_code_popup .popup_container > div .code_img > div ~ div {
  margin-top: 1em;
}
.new_member_card .block.member_info .card_block .card_area .member_code_popup .popup_container > div.mobile_barcode {
  margin-top: 2em;
}
.new_member_card .block.member_info .card_block .card_area .member_code_popup.open {
  opacity: 1;
  height: 100%;
}
.new_member_card .block.member_info .card_block .detail_area {
  position: relative;
  background-color: #fff;
  padding: 0em 3em;
  height: 0;
}
.new_member_card .block.member_info .card_block .detail_area .member_photo {
  position: absolute;
  width: 4em;
  height: 4em;
  left: 50%;
  top: 0em;
  transform: translateX(-50%);
  border-radius: 99em;
  background-color: #666;
  border: 2px solid #fff;
  overflow: hidden;
}
.new_member_card .block.member_info .card_block .detail_area .member_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.new_member_card .block.member_info .card_block .detail_area .member_card_no {
  font-size: 1em;
}
.new_member_card .block.member_info .card_block .detail_area .member_name {
  font-size: 1em;
}
.new_member_card .block.member_info .card_block .detail_area .member_account {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.3em;
}
.new_member_card .block.member_info .card_block .detail_area .member_account li {
  font-size: 1.5em;
  line-height: 1;
}
.new_member_card .block.member_info .card_block .detail_area .member_account li ~ li {
  margin-left: 0.5em;
}
.new_member_card .block.member_info .card_block .detail_area .member_account li.fb {
  color: dodgerblue;
}
.new_member_card .block.member_info .card_block .detail_area .member_account li.line {
  color: #3ec74a;
}
.new_member_card .block.member_info .card_block .detail_area .member_account li.google {
  color: orangered;
}
.new_member_card .block.member_info .card_block .detail_area .member_account li.unbound {
  color: #999;
}
.new_member_card .block.member_info .card_block .detail_area .code_block {
  margin-top: 1em;
}
.new_member_card .block.member_info .card_block .detail_area .code_block > div {
  border: 1px solid #ddd;
  padding: 1em 0;
}
.new_member_card .block.member_info .card_block .detail_area .code_block > div .title {
  font-size: 0.9em;
}
.new_member_card .block.member_info .card_block .detail_area .code_block > div .code_img .qrcode,
.new_member_card .block.member_info .card_block .detail_area .code_block > div .code_img .barcode {
  width: 70%;
  margin: 0 auto;
  margin-top: 0.5em;
}
.new_member_card .block.member_info .card_block .detail_area .code_block > div.mobile_barcode {
  margin-top: 2em;
}
.new_member_card .block.member_info .card_block .detail_area .info_edit_btn {
  position: absolute;
  color: #666;
  right: 1em;
  bottom: 1em;
}
.new_member_card .block.member_info.open {
  z-index: 1005;
  --this_H: 90vh;
  --this_mtop: -15vh;
}
.new_member_card .block.member_info.open .mask {
  opacity: 1;
  height: 100vh;
  backdrop-filter: blur(5px);
}
.new_member_card .block.member_info.open .card_block {
  position: fixed;
  width: calc(var(--block_width) / 3);
  top: calc((100vh - var(--this_H)) / 2);
  height: auto;
}
.new_member_card .block.member_info.open .card_block .card_area .member_code_btn .member_code_open {
  display: none;
}
.new_member_card .block.member_info.open .card_block .card_area .member_code_btn .member_code_close {
  display: block;
}
.new_member_card .block.member_info.open .card_block .detail_area {
  padding: 2em 3em;
  margin-top: var(--this_mtop);
  transition: all 0.5s ease-in-out;
  height: calc(var(--this_H) + var(--this_mtop) * -1 - var(--member_card_height));
}
.new_member_card .block.member_info.open .card_block .detail_area .member_photo {
  transition: top 0.5s ease-in-out;
  top: -2.5em;
}
.new_member_card .block.reward_panel {
  background-color: #fff;
  border-radius: 10px;
}
.new_member_card .block.reward_panel dt.detail_area {
  padding: 0.3em 1em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid #eee;
}
.new_member_card .block.reward_panel dt.detail_area .member_photo {
  width: 2.5em;
  height: 2.5em;
  left: 7%;
  border-radius: 99em;
  background-color: #666;
  border: 2px solid #fff;
  overflow: hidden;
}
.new_member_card .block.reward_panel dt.detail_area .member_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.new_member_card .block.reward_panel dt.detail_area .member_card_no {
  text-align: left;
  font-size: 1em;
  flex-grow: 1;
}
.new_member_card .block.reward_panel dt.detail_area .info_edit_btn {
  color: #666;
  right: 1em;
  bottom: 2em;
}
.new_member_card .block.reward_panel dd .list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 0.5em;
}
.new_member_card .block.reward_panel dd .list .item {
  text-align: center;
  width: 30%;
}
.new_member_card .block.reward_panel dd .list .item .title {
  font-size: 0.7em;
  color: #999;
}
.new_member_card .block.reward_panel dd .list .item .title i {
  margin-right: 0.5em;
  display: none;
}
.new_member_card .block.reward_panel dd .list .item .title.member_profit i {
  color: #ff8282;
}
.new_member_card .block.reward_panel dd .list .item .title.member_cash i {
  color: #ffc505;
}
.new_member_card .block.reward_panel dd .list .item .title.member_ref_wallet i {
  color: #666;
}
.new_member_card .block.reward_panel dd .list .item .value {
  font-size: 1.3em;
  color: #666;
  margin-top: 0.3em;
}
.new_member_card .block.reward_panel dd .list .item .value > a {
  text-decoration: underline;
}
.new_member_card .block.direc_btn {
  width: 100%;
  padding: 1em 3em;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}
.new_member_card .block.direc_btn::-webkit-scrollbar {
  display: none;
}
.new_member_card .block.direc_btn .item {
  cursor: pointer;
  display: inline-block;
  width: 5em;
}
.new_member_card .block.direc_btn .item ~ .item {
  margin-left: 1.5em;
}
.new_member_card .block.direc_btn .item .icon {
  width: 5em;
  height: 5em;
  border-radius: 99em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #333;
  color: #fff;
  text-align: center;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.new_member_card .block.direc_btn .item .icon i {
  font-size: 1.5em;
}
.new_member_card .block.direc_btn .item .icon .coupon_num {
  padding-left: 0.2em;
  font-size: 2em;
}
.new_member_card .block.direc_btn .item .icon .coupon_num .unit {
  margin-left: 0.2em;
  font-size: 0.4em;
}
.new_member_card .block.direc_btn .item .title {
  margin-top: 0.5em;
  text-align: center;
}
.new_member_card .block.custom_link {
  background-color: #fff;
  border-radius: 10px;
}
.new_member_card .block.custom_link > dt {
  text-align: left;
  padding: 0.3em 1em;
  line-height: 2;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.9em;
}
.new_member_card .block.custom_link > dt .caption {
  flex-grow: 1;
}
.new_member_card .block.custom_link > dt .more {
  color: #666;
}
.new_member_card .block.custom_link > dt .more i {
  margin-left: 0.3em;
}
.new_member_card .block.custom_link > dd {
  padding: 1em 0.5em;
}
.new_member_card .block.custom_link > dd .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2%;
}
.new_member_card .block.custom_link > dd .list .item {
  cursor: pointer;
  width: 15%;
  padding: 0.5em 0;
}
.new_member_card .block.custom_link > dd .list .item .icon {
  margin: 0 auto;
  width: 80%;
  aspect-ratio: 1/1;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f8f8f8;
  color: #666;
  text-align: center;
}
.new_member_card .block.custom_link > dd .list .item .icon i {
  font-size: 1.5em;
}
.new_member_card .block.custom_link > dd .list .item .icon .coupon_num {
  padding-left: 0.2em;
  font-size: 2em;
}
.new_member_card .block.custom_link > dd .list .item .icon .coupon_num .unit {
  margin-left: 0.2em;
  font-size: 0.4em;
}
.new_member_card .block.custom_link > dd .list .item .title {
  margin-top: 0.5em;
  text-align: center;
  font-size: 0.85em;
  word-break: break-all;
}
.new_member_card .block.level {
  width: 100%;
  padding: 1em calc((100% - var(--block_width)) / 2);
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}
.new_member_card .block.level::-webkit-scrollbar {
  display: none;
}
.new_member_card .block.level .item {
  display: inline-block;
  width: 70%;
  padding: 2em;
  border-radius: 2em;
  color: #333;
  box-shadow: 0.6em 0.6em 1em -0.5em rgba(0, 0, 0, 0.2);
}
.new_member_card .block.level .item ~ .item {
  margin-left: calc((100% - var(--block_width)) / 2);
}
.new_member_card .block.level .item .caption {
  font-size: 1.2em;
}
.new_member_card .block.level .item .caption i {
  margin-right: 0.5em;
}
.new_member_card .block.level .item .proportion {
  margin: 1em 0;
  width: 50%;
}
.new_member_card .block.level .item .proportion .num {
  text-align: center;
  font-size: 1.7em;
}
.new_member_card .block.level .item .proportion .bar {
  position: relative;
  margin-top: 1em;
  width: 100%;
  height: 0.5em;
  border-radius: 99em;
  background-color: #fff;
}
.new_member_card .block.level .item .proportion .bar:after {
  position: absolute;
  content: "";
  display: block;
  left: 0;
  border-radius: 99em;
  height: 100%;
  width: var(--bar);
}
.new_member_card .block.level .item .proportion .data {
  margin-top: 0.5em;
  font-size: 0.8em;
}
.new_member_card .block.level .item .detail {
  white-space: break-spaces;
  font-size: 0.9em;
  letter-spacing: 1px;
}
.new_member_card .block.level .item:nth-child(1) {
  background-color: #cfea5b;
}
.new_member_card .block.level .item:nth-child(1) .caption i,
.new_member_card .block.level .item:nth-child(1) .proportion .num,
.new_member_card .block.level .item:nth-child(1) .proportion .data {
  color: #707d37;
}
.new_member_card .block.level .item:nth-child(1) .proportion .bar:after {
  background-color: #707d37;
}
.new_member_card .block.level .item:nth-child(2) {
  background-color: #dec3e8;
}
.new_member_card .block.level .item:nth-child(2) .caption i,
.new_member_card .block.level .item:nth-child(2) .proportion .num,
.new_member_card .block.level .item:nth-child(2) .proportion .data {
  color: #886694;
}
.new_member_card .block.level .item:nth-child(2) .proportion .bar:after {
  background-color: #886694;
}
.new_member_card .block.level .item:nth-child(3) {
  background-color: #aad6f0;
}
.new_member_card .block.level .item:nth-child(3) .caption i,
.new_member_card .block.level .item:nth-child(3) .proportion .num,
.new_member_card .block.level .item:nth-child(3) .proportion .data {
  color: #52778c;
}
.new_member_card .block.level .item:nth-child(3) .proportion .bar:after {
  background-color: #52778c;
}
.new_member_card .block.referrer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.new_member_card .block.referrer i {
  margin-right: 0.5em;
}
.new_member_card .block.referrer .sub_block {
  text-align: left;
}
.new_member_card .block.referrer .sub_block.left {
  width: 43%;
}
.new_member_card .block.referrer .sub_block.right {
  width: 55%;
}
.new_member_card .block.referrer .sub_block .project {
  background-color: #fff;
  border-radius: 0.7em;
  padding: 1em;
  box-shadow: 5px 5px 1em rgba(0, 0, 0, 0.1);
}
.new_member_card .block.referrer .sub_block .project ~ .project {
  margin-top: 3.5%;
}
.new_member_card .block.referrer .sub_block .project .title {
  font-size: 0.8em;
  margin-bottom: 1em;
}
.new_member_card .block.referrer .sub_block .project .item {
  font-size: 0.8em;
}
.new_member_card .block.referrer .sub_block .project .item i {
  width: 1em;
  text-align: center;
}
.new_member_card .block.referrer .sub_block .project .item .value {
  font-size: 1.5em;
}
.new_member_card .block.referrer .sub_block .project .item .unit {
  margin-left: 0.3em;
  font-size: 0.7em;
}
.new_member_card .block.referrer .sub_block .project.friend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.new_member_card .block.referrer .sub_block .project.friend .item {
  text-align: center;
}
.new_member_card .block.referrer .sub_block .project.friend .item .value {
  font-size: 3em;
}
.new_member_card .block.referrer .sub_block .project.mission .item .status {
  padding: 0.3em 1em;
  border-radius: 5px;
  font-weight: 600;
}
.new_member_card .block.referrer .sub_block .project.mission .item.done i, .new_member_card .block.referrer .sub_block .project.mission .item.done .status {
  color: #46d86a;
}
.new_member_card .block.referrer .sub_block .project.mission .item.undone i, .new_member_card .block.referrer .sub_block .project.mission .item.undone .status {
  color: #f7326a;
}
.new_member_card .block.referrer .sub_block .project.ref_detail .item.ref_profit i {
  color: #ff8282;
}
.new_member_card .block.referrer .sub_block .project.ref_detail .item.ref_cash i {
  color: #ffc505;
}
.new_member_card .edit_block,
.new_member_card .custom_link_all {
  position: fixed;
  z-index: 1005;
  width: 80%;
  max-width: 600px;
  height: 100%;
  overflow: hidden;
  top: 0;
  background-color: #fafafa;
  color: #666;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  right: 0;
  transform: translateX(100%);
  transition: all 0.3s ease-out;
}
.new_member_card .edit_block .page,
.new_member_card .custom_link_all .page {
  width: 100%;
  height: 100%;
  overflow: auto;
  flex-shrink: 0;
  flex-grow: 0;
}
.new_member_card .edit_block .page .control_btn,
.new_member_card .custom_link_all .page .control_btn {
  position: sticky;
  top: 0;
  text-align: left;
  line-height: 3;
  padding: 0 1em;
  background-color: #fafafa;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.new_member_card .edit_block .page .control_btn .back_btn,
.new_member_card .edit_block .page .control_btn .close_btn,
.new_member_card .custom_link_all .page .control_btn .back_btn,
.new_member_card .custom_link_all .page .control_btn .close_btn {
  cursor: pointer;
}
.new_member_card .edit_block .page .control_btn .back_btn i,
.new_member_card .edit_block .page .control_btn .close_btn i,
.new_member_card .custom_link_all .page .control_btn .back_btn i,
.new_member_card .custom_link_all .page .control_btn .close_btn i {
  margin-right: 0.5em;
}
.new_member_card .edit_block .page.main_page,
.new_member_card .custom_link_all .page.main_page {
  transition: margin 0.3s ease-in-out;
}
.new_member_card .edit_block .page.main_page.open,
.new_member_card .custom_link_all .page.main_page.open {
  margin-left: -100%;
}
.new_member_card .edit_block .page.main_page .title,
.new_member_card .custom_link_all .page.main_page .title {
  text-align: left;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 3;
  padding-left: 1.5em;
  border-bottom: 1px solid #f1f1f1;
}
.new_member_card .edit_block .page.main_page > .list > .item,
.new_member_card .custom_link_all .page.main_page > .list > .item {
  padding: 0 2em;
  line-height: 3;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
}
.new_member_card .edit_block .page.main_page > .list > .item a,
.new_member_card .custom_link_all .page.main_page > .list > .item a {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.new_member_card .edit_block .page.main_page > .list > .item a .icon,
.new_member_card .custom_link_all .page.main_page > .list > .item a .icon {
  width: 2em;
}
.new_member_card .edit_block .page.main_page > .list > .item a .caption,
.new_member_card .custom_link_all .page.main_page > .list > .item a .caption {
  flex-grow: 1;
}
.new_member_card .edit_block .page.sub_page > .list > .item,
.new_member_card .custom_link_all .page.sub_page > .list > .item {
  display: none;
  padding: 0 2em;
}
.new_member_card .edit_block.open,
.new_member_card .custom_link_all.open {
  right: 0;
  transform: translateX(0%);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.new_member_card:has(.edit_block.open)::before {
  content: "";
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.member_info_edit_block .member_info_edit_title {
  font-size: 1.5em;
  line-height: 3;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item {
  padding: 1em 0;
  border-bottom: 1px solid #e6e6e6;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_caption {
  color: #333;
  font-weight: 600;
  line-height: 2;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_caption.bar_code {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-bottom: 1em;
  padding: 1.5em 1em;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_caption.bar_code img {
  width: 100% !important;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_cancel_icon,
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_icon {
  display: inline-block;
  cursor: pointer;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_cancel_icon i,
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_icon i {
  margin-left: 0.5em;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_member_data ~ .show_member_data {
  display: none;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_member_data.lock {
  display: none;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_member_data.lock ~ .show_member_data {
  display: block;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_member_data .member_data .input_text {
  height: 3em;
  border-radius: 5px;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_member_data .member_data .input_select {
  height: 2.5em;
  border-radius: 5px;
  padding-left: 5px;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_member_data .member_data .address_module .select_country {
  line-height: 3.5;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .edit_member_data .member_data_notice {
  display: block;
  line-height: 1.3;
  margin-top: 0.5em;
  color: #ff8282;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .btn {
  margin-top: 1em;
  width: max-content;
  padding: 1em 1.5em;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item .edit_container .btn ~ .btn {
  margin-left: 1em;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account {
  padding: 1em;
  border-radius: 10px;
  background-color: #fff;
  color: #fff;
  border: 1px solid #ddd;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account ~ .social_account {
  margin-top: 1em;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account.line {
  color: #3ec74a;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account.facebook {
  color: #0251d9;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account.google {
  color: rgb(201, 14, 14);
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account.apple {
  color: #222;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account.unbind {
  color: #666;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account .icon {
  margin-right: 0.5em;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account .icon i {
  font-size: 2em;
}
.member_info_edit_block .member_info_edit_container .member_info_edit_item.social_account .caption {
  flex-grow: 1;
}
.member_info_edit_block .member_info_edit_container .divider {
  border-top: 1px solid #ddd;
  margin: 2em 0;
}
.member_info_edit_block .member_info_edit_container .save_btn {
  width: max-content;
  padding: 1em 2em;
  margin: 2em auto;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
}

/*
.parameter_link {
    align-items: center;
    flex-wrap: wrap;
    width: 100% !important;
    left: 0;
    padding: 0 20px !important;

    span:first-child {
        margin: 0 !important;
    }

    .first_parameter {
        width: 50%;
        flex-grow: 1;
        flex-shrink: 2;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5em;
        height: 2em;
        overflow: hidden;
    }

    .parameter_more {
        cursor: pointer;
        flex-grow: 1;
        text-align: right;
        pointer-events: all;
        font-size: 10px;

        i {
            margin-left: 0.5em;
            font-size: 8px;
        }
    }

    .other_links {
        width: 100%;
        margin-top: 0.5em;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: start;
        gap: 0.5em;
        height: 0;
        overflow: hidden;
        transition: height 0.5s ease-out;

        &.open {
            height: 10em;
        }

        .other_links_wrap {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: start;
            align-items: start;
            gap: 0.5em;

            span {
                box-shadow: 0 0 7px rgba(0,0,0,0.5)!important;
            }
        }
    }

}
*/
/*
//popup attribute_tag (移入pc.scss)
    .open_attribute_tag_btn {
        box-sizing: border-box;
        cursor: pointer;
        width: 85%;
        border: 1px solid #aaa;
        border-radius: 5px;
        padding: 0.5em 2em;
        transition: all 0.2s ease-out;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1.5em;

        &:hover {
            background-color: #333;
            color: #fff;
            scale: 1.05;
        }
    }
    .popup_attribute_tag_panel {
        position: fixed;
        pointer-events: none;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 1100;
        font-size: 16px;

        .mask {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: rgba($color: #000000, $alpha: 0.5);
            backdrop-filter: blur(10px);
            transition: all 0.3s linear;
        }

        .popup_container {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
            //padding: 1em 2em;
            border-radius: 10px;
            text-align: left;
            box-shadow: 0 0 1em rgba($color: #000000, $alpha: 0.5);
            width: 700px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            overflow: hidden;

            .bookmark_container {
                border-bottom: 1px solid #ddd;
                display: none;
                margin-bottom: 1em;

                .bookmark {
                    display: inline-block;
                    cursor: pointer;
                    padding: 0.5em 1.5em;
                    margin-bottom: 1em;
                    border-radius: 5px;
                    border: 1px solid #aaa;
                    &~.bookmark {
                        margin-left: 1em;
                    }

                    &.active {
                        background-color: #333;
                        color: #fff;
                    }
                }
            }

            .function_container {
                flex-grow: 1;
                overflow: auto;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                overflow: hidden;




                .function {
                    display: none;

                    &[data-func-name=filter]{
                        display: block;
                        flex-grow: 1;
                        order: 1;
                        overflow: auto;
                        margin-top: 0.5em;

                        &::-webkit-scrollbar {
                            width: 3px;
                            margin-right: -20px;
                        }
                        &::-webkit-scrollbar-track {
                            background-color: #fafafa;
                        }

                        &::-webkit-scrollbar-thumb {
                                background-color: #ddd; 
                                border-radius: 10px;
                        }

                        &::-webkit-scrollbar-button {
                            display: none;
                                background-color: rgba($color: #000000, $alpha: 0.1);
                        }
                    }
                    &[data-func-name=sort]{
                        display: block;
                        order: 0;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 1em;
                        // padding-top: 0.5em;
                        // padding-bottom: 1em;
                        // padding-left: 0.5em;
                        padding: 1.5em 2.0em 1em;
                        border-bottom: 1px solid #ddd;
                    }


                    &.active {
                        display: block;
                    }

                    dl.filter_catelog {
                        margin: 0;
                        transition: 0.3s ease-out;
                        border-bottom: 1px solid #eee;
                        background-color: #fff;

                        &:last-child {
                            border: 0;
                        }

                        &:hover {
                            background-color: #fafafa;
                            //border-color: #eee;
                        }

                        dt {
                            cursor: pointer;
                            padding: 1em 2em;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            // border: 1px solid #fff;
                            // border-left: 0;
                            // border-right: 0;

                            .arrow {
                                position: relative;
                                width: 1.5em;
                                height: 1.5em;
                                border-radius: 99em;
                                background-color: #333;

                                &:after,&:before {
                                    position: absolute;
                                    content: "";
                                    width: 50%;
                                    height: 2px;
                                    background-color: #Fff;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%);
                                }
                                &:after {
                                    transform: translate(-50%,-50%) rotate(90deg);
                                }
                            }

                            i {
                                font-size: 1.2em;
                                transition: rotate 0.3s linear;
                            }
                        }
                        dd {
                            display: none;
                            margin: 0;
                            padding: 0em 3em 1em;
                            font-size: 12px;
                            //overflow: hidden;
                            //transition: height 0.5s ease-out;
                            ul {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                flex-wrap: wrap;
                                gap: 4%;

                                li {
                                    list-style: none;
                                    margin: 0;
                                    padding: 0;
                                    width: 21%;

                                    label {
                                        cursor: pointer;
                                        display: block;
                                        width: 100%;
                                        padding: 0.5em 0;
                                        display: flex;
                                        justify-content: flex-start;
                                        align-items: center;

                                        .color_show {
                                            position: relative;
                                            flex-shrink: 0;
                                            display: block;
                                            border-radius: 99em;
                                            width: 1.3em;
                                            height: 1.3em;
                                            //overflow: hidden;
                                            margin-right: 0.7em;

                                            .img {
                                                border-radius: 99em;
                                                overflow: hidden;
                                                width: 100%;
                                                height: 100%;
                                                object-fit: cover;
                                                background-color: var(--bg_color);
                                            }

                                            &:before {
                                                content: "";
                                                position: absolute;
                                                top: 50%;
                                                left: 50%;
                                                transform: translate(-50%,-50%);
                                                width: 120%;
                                                height: 120%;
                                                border: 2px solid #ddd;
                                                border-radius: 99em;
                                            }
                                        }

                                        .option_name {
                                            // overflow: hidden;
                                            // text-overflow: ellipsis;
                                            // white-space: nowrap;
                                            // height: 1.3em;
                                        }

                                        input {

                                            &:checked ~ .color_show {

                                                &:before {
                                                    border-color: #0a89ff;
                                                }
                                            }

                                            &:disabled {
                                                &~ .option_name{
                                                    color: #ccc;
                                                }
                                                &~ .color_show {
                                                    opacity: 0.2;
                                                }
                                            }
                                        }

                                    }
                                }
                            }


                        }

                        // &~dl {
                        //     border-top: 1px solid #eee;
                        // }

                        &.open {
                            padding: 1em 0;

                            dt {
                                i {
                                    rotate: 180deg;
                                }
                            }

                            dd {
                                //height: auto;
                            }
                        }

                        &.no_slide {
                            padding: 0.5em 0;

                            &.price_range {
                                position: sticky;
                                top: 0;
                                padding: 0;
                                display: flex;
                                z-index: 1;
                            }

                            dt {
                                cursor: unset;
                                padding-bottom: 0.5em;
                                padding-top: 0.5em;
                            }
                            dd {
                                display: block;
                                padding-bottom: 1em;

                                input[type=number] {
                                    width: 70px;
                                    line-height: 2;
                                    padding: 0 0.5em;
                                    margin-top: 0.5em;

                                    &::-webkit-inner-spin-button,
                                    &::-webkit-outer-spin-button {
                                        -webkit-appearance: none;
                                    }

                                    &::placeholder {
                                        color: #aaa;
                                    }
                                }
                            }
                        }
                    }

                    .sort_btn {
                        cursor: pointer;
                        font-size: 0.8em;
                        padding: 0.5em 1em;
                        border-radius: 5px;
                        border: 1px solid #aaa;
                        transition: transform 0.1s ease-out;

                        &:hover {
                            background-color: #fafafa;
                            transform: scale(1.05);
                        }

                        &.active {
                            color: #fff;
                            background-color: #333;
                        }
                    }

                    .switch_slide {
                        flex-grow: 1;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;
                        font-size: 0.8em;
                        gap: 1em;

                        .switch_slide_btn {
                            cursor: pointer;
                            border-radius: 3px;
                            border: 1px solid #aaa;
                            padding: 0.3em 0.5em;
                        }
                    }

                    .no_filter {
                        padding: 2em 0.5em;
                        font-size: 0.8em;
                        color: #999;
                    }
                }
            }

            .bottom_container {
                //padding-top: 1em;
                padding: 1em 2.5em ;
                border-top: 1px solid #ddd;
                display: flex;
                justify-content: center;
                align-items: center;

                .checked_filter_options {
                    padding: 0.5em 0;
                    max-width: calc(100% - 10em);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 0.5em;

                    .checked_option{
                        cursor: pointer;
                        font-size: 0.8em;
                        padding: 0.3em 1em;
                        background-color: #eee;
                        border: 1px solid #aaa;
                        border-radius: 99em;

                        i{
                            margin-left: 0.5em;
                        }
                    }
                    .clean_filter_btn {
                        cursor: pointer;
                        //width: 100%;
                        font-size: 0.8em;
                        padding: 0 0.5em;
                        text-decoration: underline;
                        color: #4a94be;
                    }
                }

                .filter_submit_btn {
                    cursor: pointer;
                    margin: 0 auto;
                    width: max-content;
                    padding: 1em 2em;
                    background-color: #222;
                    color: #fff;

                    .disable {
                        display: none;
                    }

                    &.disable {
                        background-color: #ddd;
                        color: #999;

                        .disable {
                            display: block;
                        }
                        .enable {
                            display: none;
                        }
                    }
                }
            }

            .please_wait {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: rgba($color: #ffffff, $alpha: 0.9);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease-out;

                &.show {
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }

        .mask,
        .popup_container {
            pointer-events: none;
            opacity: 0;
            transition: all 0.3s ease-out;
        }

        &.open {
            .mask,
            .popup_container {
                pointer-events: all;
                opacity: 1;
            }
            .popup_container {
                top: 50%;
            }
        }
    }
    #is_checked_attr_tag {
        font-size: 12px;
        margin-bottom: 1em;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5em;
        max-height: 4.5em;
        overflow: hidden;

        .checked_option {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 10em;
            line-height: 2em;
            cursor: pointer;
            padding: 0 1em;
            border-radius: 99em;
            //border: 1px solid #aaa;
            background-color: #333;
            color: #fff;
        }
    }
*/
/*
.new_member_profit,
.new_member_bank_cash,
.new_member_record_UI {
    font-family:  'Noto Sans TC', sans-serif, '微軟正黑體';
    position: relative;
    //padding: 1em 0 ;
    font-size: 1em;
    margin-bottom: 5%;

    .block {
        width: 90%;
        margin: 0 auto;

        &~.block {
            margin-top: 1em;
        }

        &.info_panel {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: stretch;
            background-color: #fcfcfc;
            padding: 1em 2em;
            border-radius: 0.5em;
            border: 1px solid #ddd;
            margin-top: 1em;
            overflow: hidden;

            .panel_title {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;

                h2 {
                    font-size: 1.2em;
                    color: #333;
                }

                .withdraw_func {
                    margin: 0;
                }
            }

            .panel_item {
                max-width: 50%;
                padding: 2em 0;

                // &~.panel_item {
                //     border-left: 1px solid #ddd;
                //     padding-left: 1em;
                // }

                .caption {
                    text-align: left;
                    font-size: 0.8em;
                    color: #aaa;
                }
                .content {
                    //margin: 1em 0;
                    font-size: 2em;
                    font-weight: 400;
                    text-align: left;

                    .unit {
                        margin-right: 0.3em;
                        font-size: 0.5em;

                        &._r {
                            margin-right: 0;
                            margin-left: 0.3em;
                        }
                    }
                }

                &._reward_main {
                    padding: 0 0 1.5em;
                    font-size: 1.5em;
                    .caption {
                        text-align: center;
                    }
                    .content {
                    }
                }

                &._reward_bottom {
                    position: relative;
                    width: calc(100% + 4em);
                    max-width: unset;
                    padding: 1em 2em;
                    margin: auto -2em -1em;
                    background-color: rgba($color: #000000, $alpha: 0.05);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 2em;

                    .withdraw_func {
                        position: absolute;
                        margin: 0;
                        right: 2em;
                        top: 25%;
                    }
                }

            }

            .withdraw_func {
                cursor: pointer;
                width: max-content;
                margin: 0.5em auto;
                font-size: 0.8em;
                padding: 0.3em 1em 0.4em;
                border-radius: 99em;
                background-color: #333;
                color: #fff;

                &.withdraw_btn {
                    &.none {
                        //pointer-events: none;
                        opacity: 0.5;
                    }
                }

                i {
                    margin-right: 0.5em;
                }

                &:hover {
                    transform: scale(1.05);   
                }

                &.none {
                    pointer-events: none;
                    opacity: 0.5;
                }

                &.disable {
                    pointer-events: none;
                    opacity: 0.5;
                }
            }
        }

        &.history_list {
            .list_type {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                border-bottom: 1px solid #666;

                li {
                    cursor: pointer;
                    text-align: center;
                    width: 50%;
                    padding: 1em 0;
                    color: #999;

                    &.active {
                        font-size: 1.2em;
                        font-weight: 500;
                        color: #333;
                        border-bottom: 3px solid #666;
                        pointer-events: none;
                    }
                }
            }

            .list_block {
                display: none;
                &.active {
                    display: block;
                }

                .type_list {
                    margin-top: 2em;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 1em;

                    .type {
                        padding: 0.3em 1em;
                        border-radius: 99em;
                        border: 1px solid #aaa;
                        cursor: pointer;
                        transition: all 0.1s ease-out;

                        &:hover {
                            background-color: #333;
                            color: #fff;
                            border: 1px solid #333;
                            transform: scale(1.1);
                        }

                        &.active {
                            background-color: #333;
                            color: #fff;
                            border: 1px solid #333;
                            pointer-events: none;
                        }
                    }
                }

                .list {
                    margin-top: 2em;

                    .list_item {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        align-items: stretch;
                        background-color: #fcfcfc;
                        border: 1px solid #ddd;
                        border-radius: 0.5em;
                        padding: 1em;
                        --up_color:#39bb90;
                        --dn_color: #ff6969;
                        --ex_color: #58c1f5;

                        .info_left {
                            width: 70%;

                            .event {
                                font-size: 0.9em;
                                font-weight: 500;
                                margin-bottom: 0.2em;
                            }

                            .event_detail {
                                font-size: 1em;
                                font-weight: 300;
                            }

                            .use_info {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                gap: 1em;
                                font-size: 0.7em;
                                font-weight: 400;
                                color: #aaa;
                                margin-top: 0.3em;

                                &:has(.remaining) {
                                    color: var(--ex_color);

                                    &:has(.expired){
                                        color: var(--dn_color);
                                    }
                                }

                                .use_history {
                                    position: relative;
                                    width: 2em;
                                    aspect-ratio: 1/1;
                                    border-radius: 99em;
                                    background-color: #ddd;
                                    color: #fff;

                                    &.usefull {
                                        background-color: #333;
                                    }

                                    i {
                                        position: absolute;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%,-50%);
                                    }
                                }

                                .remaining {
                                    // .caption {
                                    //     background-color: #333;
                                    //     color: #fff;
                                    //     padding: 0.2em 0.5em;
                                    // }
                                }
                            }

                            //--bank cash 提領紀錄--
                            .account_name,
                            .account_num {
                                font-size: 0.8em;
                            }
                            .remark {
                                font-size: 0.8em;
                                color: #333;
                            }
                        }
                        .info_right {
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: flex-end;
                            text-align: right;
                            width: 30%;

                            .date {
                                font-size: 0.7em;
                            }
                            .point {
                                margin-top: 0.5em;
                                font-weight: 500;
                                i {
                                    margin-right: 0.3em;
                                }

                                &.up {
                                    color: var(--up_color);
                                }
                                &.down {
                                    color: var(--dn_color);
                                    i {
                                        rotate: 180deg;
                                    }
                                }
                                &.expiring {
                                    margin-top: 0.25em;
                                    color:  var(--ex_color);
                                }
                            }
                            .day_remaining {
                                font-size: 0.9em;
                            }

                            //--bank cash 提領紀錄--
                            .amount {
                                margin-top: 0.5em;
                            }
                            .status {
                                width: max-content;
                                border-radius: 99em;
                                padding: 0.3em 1em;
                                color: #fff;
                                background-color: #333;
                                font-size: 0.8em;
                                margin-top: 0.5em;

                                &.done {
                                    background-color: #39bb90;
                                }
                                &.fail {
                                    background-color: #f78080;
                                }
                            }
                        }
                        .info_bottom {
                            margin-top: 0.5em;
                            border-top: 1px solid #ddd;
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 0.3em 0 0;

                            //--bank cash 提領紀錄--
                            .remark {

                            }
                            .status {
                                width: max-content;
                                border-radius: 99em;
                                padding: 0.3em 1em;
                                color: #fff;
                                background-color: #333;
                                font-size: 0.8em;
                                margin-top: 0.5em;

                                &.done {
                                    background-color: #39bb90;
                                }
                                &.fail {
                                    background-color: #f78080;
                                }
                                &.new {
                                    background-color: #30c4e9;
                                }
                                &.ing {
                                    background-color: #2f92e8;
                                }
                            }
                        }

                        &~.list_item {
                            margin-top: 0.5em;
                        }
                    }

                    .next {
                        text-align: center;
                        margin-top: 0.5em;

                        .next_btn {
                            cursor: pointer;
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: max-content;
                            margin: 0 auto;
                            padding: 0.3em 0.2em 0.5em;
                            border-radius: 0.3em;
                            //background-color: #333;
                            color: #666;
                            font-size: 0.8em;

                            &::after {
                                content: "";
                                position: absolute;
                                bottom: 0.2em;
                                left: 0;
                                width: 100%;
                                height: 1px;
                                background-color: #666;
                            }

                            i {
                                font-size: 0.8em;
                                margin-left: 0.3em;
                            }

                            &:hover {
                                scale: 1.05;

                            }
                        }

                        &.final {
                            color: #999;
                            font-size: 0.8em;
                        }
                    }

                    .loading {
                        text-align: center;
                        margin: 3em auto;
                    }
                }
            }
        }
    }

    .withdraw_popup {
        position: fixed;
        z-index: 999;
        backdrop-filter: blur(5px);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0;
        transition: all 0.3s ease-out;

        &.open {
            opacity: 1;
            pointer-events: all;
        }

        .mask {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: rgba($color: #000000, $alpha: 0.5);
        }


        .popup_container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 600px;
            background-color: #fff;
            border-radius: 1em;
            padding: 1em 0.5em;

            .close {
                position: absolute;
                cursor: pointer;
                right: 0;
                top: 0;
                transform: translate(60%,-60%);
                font-size: 2em;
            }

            .content_form {
                width: 100%;
                max-height: 80vh;
                overflow: auto;
                padding: 1.5em;

                .form_title {
                    font-size: 1.2em;
                    line-height: 2;
                }
                dl {
                    //display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: stretch;
                    margin: 1em 0;

                    dt {
                        line-height: 1.5;
                        font-size: 0.9em;
                        color: #666;


                    }
                    dd {
                        width: 100%;
                        flex-grow: 1;
                        line-height: 1.5;
                        margin-top: 0.3em;

                        &~dt {
                            margin-top: 1.5em;
                        }

                        select[name=bank_id] {
                            width: 100% !important;
                            height: 2.5em;
                            border-radius: 0.5em;
                            box-sizing: border-box;
                        }
                        input {
                            width: 100%;
                            //height: 2.5em;
                            //border-radius: 0.5em;
                            border: 0;
                            border-bottom: 1px solid #ddd;
                            outline: none;

                            &::placeholder {
                                color: #aaa;
                            }
                        }
                    }
                }

                .settle_btn {
                    cursor: pointer;
                    width: max-content;
                    padding: 0.5em 1.5em;
                    border-radius: 0.3em;
                    background-color: #333;
                    color: #fff;
                    margin: 2em auto 0;

                    &:hover {
                        scale: 1.05;
                    }
                }

                .counter {
                    .cash_table {
                        width: 100%;
                        border-collapse: collapse;

                        tr {
                            th,td {

                            padding: 0.5em;
                            }
                            th {
                                width: 60%;
                            }
                            td {
                                width: 40%;
                                text-align: right;

                                i {
                                    cursor: pointer;
                                    margin-left: 0.5em;
                                }
                            }

                            &:hover {
                                background-color: #f1f1f1;
                            }

                            &.count_result {
                                border-top: 1px solid #ddd;
                            }
                        }
                    }
                }

                .content_form_item {
                    border-radius: 1em;
                    border: 1px solid #ddd;
                    padding: 1em;

                    .caption {
                        font-weight: 500;
                    }

                    .mypay_setting {
                        span {
                            margin-left: 0.3em;
                            a {
                                display: inline-block;
                                font-family: inherit;
                                font-size: 1.2em;
                                font-weight: 500;
                                line-height: 1.3;
                                color: #2f92e8;
                                border-bottom: 1px solid #2f92e8;
                                i{
                                    font-size: 0.8em;
                                }
                                &:hover {
                                    font-weight: inherit;
                                }
                            }
                        }
                    }

                    &~.content_form_item {
                        margin-top: 1em;
                    }
                }

                .radio_group {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 2em;

                    .radio_item {
                        width: max-content;
                    }
                }
            }
        }
    }
}
*/
/*
    //member_level
    .new_member_level_intro {
        width: 100%;

        * {
            box-sizing: border-box;
        }

        ul,ol,dl {
            margin: 0;
            padding: 0;
            li,dt,dd {
                list-style: none;
                margin: 0;
                padding: 0;
            }
        }

        .page_title {
            font-size: 3em;
            line-height: 1;
            margin-top: 1em;
        }

        .member_level_wrap {
            position: relative;
            cursor: grab;
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            padding-bottom: 5em;

            .member_level_list { //等級列表
                width: max-content;
                margin: 0 auto;
                padding: 0 5%;
                display: flex;
                justify-content: flex-start;
                align-items: stretch;
                gap: 2em;

                .member_level { //各等級
                    position: relative;
                    user-select: none;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    background-color: #fff;
                    border: 1px solid #ddd;
                    border-radius: 1em;
                    padding-bottom: 2em;
                    width: 23em;
                    height: auto;

                    .member_level_block {
                        position: relative;
                        padding: 1.7em;

                        .block_title {
                            font-size: 1.2em;
                            font-weight: 600;
                            margin-bottom: 1em;
                        }

                        &:not(.level_info) {
                            &::after {
                                content: "";
                                position: absolute;
                                height: 1px;
                                width: calc(100% - 2em);
                                left: 1em;
                                bottom: 0;
                                background-color: #ddd;
                            }
                        }

                        dl {
                            dt {
                                font-size: 1.0em;
                                font-weight: 600;
                                margin-bottom: 0.5em;

                                i {
                                    font-size: 1.5em;
                                    margin-right: 0.4em;
                                    color: var(--level_color);
                                }
                            }
                            dd {
                                display: flex;
                                justify-content: flex-start;
                                align-items: flex-start;
                                gap: 0.5em;
                                padding-left: 2em;
                                margin-top: 0.3em;
                                color: #666;
                                line-height: 1.3em;

                                &:has(.fa-circle ){
                                    padding: 0;
                                    gap: 0;
                                }

                                i {
                                    flex-shrink: 0;
                                    color: var(--level_color);

                                    &.fa-circle {
                                        position: relative;
                                        width: 1.3em;
                                        height: 1.3em;
                                        &:before {
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            transform: translate(-50%,-50%) scale(0.5);
                                        }
                                    }
                                }

                                .content {
                                    flex-grow: 1;
                                }
                            }

                            &~dl {
                                margin-top: 1.2em;
                            }


                        }

                        &.level_info {
                            position: relative;
                            aspect-ratio: 1 / 0.6;
                            overflow: hidden;
                            //background-color: #aaa;

                            .base_bg {
                                position: absolute;
                                overflow: hidden;
                                width: 100%;
                                height: 100%;
                                top: 0;
                                left: 0;
                                background-color: var(--level_color);
                                opacity: 0.4;
                                z-index: 0;
                            }

                            &:has(.base_bg){
                                &::before {
                                    position: absolute;
                                    z-index: 1;
                                    content: "";
                                    width: 200%;
                                    aspect-ratio: 1/1;
                                    border-radius: 99em;
                                    background-image: linear-gradient(350deg, #fff 0%, var(--level_color) 40%);
                                    mix-blend-mode: darken;
                                    top: -160%;
                                    left: -115%;
                                    background-color: var(--level_color);
                                    opacity: 0.4;
                                }

                                &::after {
                                    position: absolute;
                                    z-index: 2;
                                    content: "";
                                    width: 80%;
                                    aspect-ratio: 1/1;
                                    border-radius: 99em;
                                    background-image: linear-gradient(-15deg, #fff 0%, #333 100%);
                                    mix-blend-mode: color-burn;
                                    top: -70%;
                                    left: -30%;
                                }
                            }

                            .level_type {
                                position: absolute;
                                z-index: 5;

                                &[data-type=upgrade] {
                                    right: 1em;
                                    top: 1em;
                                    padding: 0.5em 1.5em;
                                    border-radius: 99em;
                                    background-color: var(--level_color);
                                    color: #fff;
                                }
                                &[data-type=subscription] {
                                    right: 2em;
                                    top: 2em;
                                    transform: translate(50%,-50%) rotate(40deg);
                                    padding: 0.5em 3em;
                                    background-color: var(--level_color);
                                    color: #fff;
                                }
                            }
                            .level_title {
                                position: absolute;
                                z-index: 5;
                                bottom: 1em;
                                font-size: 2em;
                                font-weight: 600;
                                color: #333;

                                .level_icon {
                                    margin-right: 0.5em;
                                }

                                .level_caption {

                                }
                            }
                        }

                        &.upgrade_progress {
                            min-height: 19em;

                            &[data-type=subscription] {
                                .subscription_list {
                                    .list_item {
                                        cursor: pointer;
                                        position: relative;

                                        &~.list_item {
                                            margin-top: 1em;
                                        }

                                        label {
                                            cursor: pointer;
                                            position: relative;
                                            z-index: 1;
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: center;
                                            padding: 1em;
                                            border-radius: 1em;
                                            border: 2px solid #aaa;
                                            transition: all 0.1s ease-out;
                                            overflow: hidden;

                                            input {
                                                display: none;

                                                &:checked ~ .check_box {
                                                    background-color: var(--level_color);
                                                    .checked {
                                                        opacity: 1;
                                                    }
                                                }
                                            }

                                            .check_box {
                                                position: relative;
                                                width: 1.0em;
                                                height: 1.0em;
                                                border-radius: 99em;
                                                border: 2px solid var(--level_color);
                                                margin-right: 0.5em;
                                                overflow: hidden;
                                                display: none;

                                                .checked {
                                                    position: absolute;
                                                    width: 100%;
                                                    height: 100%;
                                                    top: 50%;
                                                    left: 50%;
                                                    transform: translate(-50%,-50%);
                                                    font-size: 0.8em;
                                                    opacity: 0;

                                                    i {
                                                        position: absolute;
                                                        top: 50%;
                                                        left: 50%;
                                                        transform: translate(-50%,-40%);
                                                        color: #fff;
                                                    }
                                                }
                                            }

                                            .detail {
                                                flex-grow: 1;
                                                display: flex;
                                                flex-wrap: wrap;
                                                justify-content: flex-start;
                                                align-items: center;
                                                font-weight: 600;

                                                .plan_type {
                                                    width: 100%;
                                                }

                                                .cost {
                                                    margin-left: 0.5em;
                                                    color: var(--level_color);
                                                }
                                                .subscription_info {
                                                    width: 100%;
                                                    font-size: 0.9em;
                                                    font-weight: 400;
                                                    color: #333;

                                                    &:has(.status_mark){
                                                        display: flex;
                                                        justify-content: flex-start;
                                                        align-items: center;
                                                        gap: 0.5em;
                                                        margin-top: -0.5em;
                                                        margin-bottom: 0.5em;
                                                    }

                                                    .status_mark {
                                                        width: max-content;
                                                        padding: 0.3em 1em;
                                                        border-radius: 99em;
                                                        background-color: var(--level_color);
                                                        color: #fff;
                                                        font-size: 0.8em;
                                                    }
                                                }
                                                .date {
                                                    width: 100%;
                                                    font-size: 0.8em;
                                                    font-weight: 400;
                                                    line-height: 1;
                                                    color: #333;
                                                }
                                                .more_info {
                                                    font-size: 0.8em;
                                                    text-decoration: underline;
                                                    i{
                                                        font-size: 0.7em;
                                                        margin-left: 0.2em;
                                                    }
                                                    &:hover {
                                                        scale: 1.05;
                                                    }
                                                }
                                            }

                                            .func {
                                                display: flex;
                                                flex-direction: column;
                                                align-items: center;

                                                .subscription_btn {
                                                    padding: 0.5em 1em;
                                                    border-radius: 0.5em;
                                                    margin: 0;
                                                }
                                                .status {
                                                    margin-top: 0.3em;
                                                    font-size: 0.8em;
                                                    width: max-content;
                                                }
                                            }

                                        }

                                        >.subscriped_mark {
                                            position: absolute;
                                            z-index: 2;
                                            top: 0;
                                            left: 1em;
                                            transform: translateY(-50%);
                                            background-color: var(--level_color);
                                            color: #fff;
                                            font-size: 0.8em;
                                            font-weight: 500;
                                            padding: 0.3em 1.5em;
                                            border-radius: 99em;
                                        }

                                        &:hover {
                                            label {
                                                //transform: scale(1.01);
                                                border: 2px solid var(--level_color);
                                                box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.2);
                                            }
                                        }

                                        // &:has(input:checked){
                                        //     border-color: var(--level_color);
                                        //     &:before {
                                        //         position: absolute;
                                        //         content: "";
                                        //         width: 100%;
                                        //         height: 100%;
                                        //         top: 0;
                                        //         left: 0;
                                        //         background-color: var(--level_color);
                                        //         opacity: 0.1;
                                        //     }
                                        // }

                                        &:is(.subscriped) {
                                            label {
                                                border-color: var(--level_color);
                                                &:before {
                                                    z-index: -1;
                                                    position: absolute;
                                                    content: "";
                                                    width: 100%;
                                                    height: 100%;
                                                    top: 0;
                                                    left: 0;
                                                    background-color: var(--level_color);
                                                    opacity: 0.1;
                                                }
                                            }
                                        }
                                    }
                                }
                                .subscription_btn {
                                    cursor: pointer;
                                    margin: 1.5em auto;
                                    width: max-content;
                                    border-radius: 99em;
                                    background-color: #333;
                                    color: #fff;
                                    padding: 0.5em 2em;
                                    transition: all 0.1s ease-out;
                                    font-size: 1.2em;

                                    &:hover {
                                        transform: scale(1.05);
                                    }
                                }
                                .tips {
                                    font-size: 0.8em;
                                    color: #999;
                                }
                            }

                            &[data-type=progress] {
                                dl {
                                    dd {
                                        margin-top: 1em;

                                        .content {
                                            .amount {
                                                color: var(--level_color);
                                            }
                                            .progress_bar {
                                                display: flex;
                                                justify-content: space-between;
                                                align-items: center;
                                                flex-wrap: wrap;
                                                margin-top: 0.5em;
                                                font-size: 0.8em;

                                                .bar {
                                                    position: relative;
                                                    width: 100%;
                                                    height: 0.5em;
                                                    overflow: hidden;
                                                    border-radius: 99em;
                                                    background-color: #eee;

                                                    &:after {
                                                        position: absolute;
                                                        content: "";
                                                        height: 100%;
                                                        width: var(--percent);
                                                        border-radius: 99em;
                                                        background-color: var(--level_color);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            &[data-type=now] {
                                .now_level {
                                    dt {
                                        padding: 1em 2em;
                                        border-radius: 0.5em;
                                        border: 1px solid var(--level_color);
                                        width: max-content;
                                        margin: 3em auto 1em;
                                    }
                                    dd {
                                        padding: 0;
                                        justify-content: center;
                                    }
                                }
                            }
                        }

                        &.upgrade_condition {
                            flex-grow: 1;
                        }

                    }


                }
            }
        }

        .member_level_scrollX_control {
            position: sticky;
            top: 90vh;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1em;
            width: max-content;
            margin: 0 auto;
            background-color: #333;
            color: #fff;
            border-radius: 99em;
            border: 1px solid #333;
            padding: 0em 1em;
            opacity: 0;

            &.show {
                transition: opacity 0.5s ease-out;
                opacity: 1;
            }

            .prev,
            .next {
                cursor: pointer;
                line-height: 1;
                font-size: 1.5em;
                padding: 0.5em 0.5em;
                i{
                display: block;
                }

                &:hover {
                    scale: 1.3;
                }
            }
        }

    }
    .subscription_wrapper {
        max-height: 60vh;
        display: flex;
        flex-direction: column;
        font-size: 0.8em;

        ul,li,dl,dt,dd {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        %subscription_order {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 1em;

            .title {
                margin-bottom: 0.5em;
                font-size: 1.2em;
            }
            ul {
                li {
                    padding: 0.5em 0;

                    .flex_group {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 1em;

                        .dtl {
                            flex-grow: 1;
                            display: flex;
                            gap: 1em;
                            .date {

                            }
                            .type {
                            }
                        }
                        .status {
                            flex-shrink: 0;
                            padding: 0.5em 1em;
                            background-color: #333;
                            color: #fff;
                            border-radius: 5px;
                            font-size: 0.7em;

                            &.success {
                                background-color: #43d397;
                            }
                            &.errow {
                                background-color: #e98474;
                            }
                        }
                    }

                    &~li {
                        border-top: 1px solid #f1f1f1;
                    }
                }
            }
        }

        .subscription_order {
            @extend %subscription_order;
        }
        .subscription_order_detail {
            @extend %subscription_order;
            margin-top: 1em;
            flex-grow: 1;
            height: 100%;
            overflow: auto;
        }
    }

    //level 訂閱結果
    .new_subscription_result {
        max-width: 500px;
        margin: 5em auto;
        background-color: #fff;
        border-radius: 0.5em;
        padding: 1em;

        .caption {
            font-size: 2em;
            font-weight: 600;
        }

        .list {
            list-style: none;
            margin: 1em 0;
            padding: 0;
            border-radius: 0.3em;
            border: 1px solid #ddd;

            li {
                margin: 0;
                padding: 1em 2em;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                &~li {
                    border-top: 1px solid #f3f3f3;
                }

                &:hover {
                    background-color: #fafafa;
                }

                .title {

                }
                .content {
                    text-align: right;
                    flex-grow: 1;
                }
            }
        }

        .cta {
            margin: 1em 0;

            .btn {
                transition: all 0.1s ease-out;

                a {
                    display: block;
                    margin: 0 auto;
                    width: max-content;
                    padding: 0.7em 3em;
                    border-radius: 0.3em;
                    background-color: #000;
                    color: #fff;
                }

                &:hover {
                    transform: scale(1.05);
                }
            }
        }
    }
*/
/*
    header._v2 {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 999;
        font-family: 'Noto Sans TC', sans-serif;

        &:has(.-transparent){
            position: fixed;
        }

        a {
            font-family: 'Noto Sans TC', sans-serif !important;
            font-size: 1em;
        }

        ul,dl,li,dt,dd {
            list-style: none;
            padding: 0;
            margin: 0;
        }



        .header {
            position: relative;
            z-index: 999;
            padding: 0.5em 2%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2em;
            background-color: var(--ds_nav_bg_color,#fff);
            color: var(--ds_nav_text_color,#222);
            box-shadow: 0 2px 7px rgba($color: #000, $alpha: 0.2);

            .menu_bar {
                display: none;
            }

            .logo {
                position: relative;
                width: 20%;
                height: 80px;
                max-width: 200px;
                transition: all 0.3s ease-out;

                .logo_wrap {
                    width: 100%;
                    height: 100%;
                    transition: all 0.3s ease-in-out;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }

                    &.website_logo {
                        opacity: 1;
                        pointer-events: all;
                    }
                    &.cate_logo {
                        position: absolute;
                        top: 0;
                        left: 0;
                        opacity: 0;
                        pointer-events: none;
                    }
                }


            }

            %main_nav_color {
                color: var(--caption_color,var(--ds_nav_text_color,#222));
            }
            // &.-transparent {
            //     %main_nav_color {
            //         color: #fff;
            //     }
            // }

            %sub_nav {
                color: var(--ds_nav_sub_text_color,#333);
                background-color: var(--ds_nav_sub_bg_color,#f9f9f9);
            }

            .navigation_container {
                flex-grow: 1;
                width: 80%;
                padding: 0.35em 0;

                .nav_list {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 1em;
                    flex-wrap: wrap;
                    height: 2em;
                    overflow: hidden;

                    >li {
                        display: flex;

                        >a {
                            display: block;
                            border-radius: 3px;
                            line-height: 1;

                            &.img {
                                width: auto;
                                img {
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                    max-height: 1.6em;
                                    object-fit: contain;
                                }
                            }
                        }

                        &.has_BGcolor {
                            >a {
                                padding: 0.3em 0.5em;

                                &.img {
                                    padding: 0;
                                }
                            }
                        }
                    }
                }

                .nav_top,.nav_main {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: 1em;
                }

                .nav_top {
                    overflow: hidden;
                    height: 2em;
                    font-size: 0.80em;
                    margin-bottom: 0.5em;
                    transition: all 0.3s ease-out;
                }

                .nav_main {
                    font-size: 1.0em;

                    nav {
                        width: calc(100% - 7em - 10em);
                        width: calc(100% - 7em - 2em);
                        //overflow-x: clip;
                        //overflow-y: unset;

                        >.nav_list {
                            position: relative;
                            flex-wrap: nowrap;
                            width: max-content;
                            align-items: stretch;
                            height: auto;
                            overflow: unset;
                            gap: 2em;

                            >li {
                                position: relative;
                                height: auto;
                                opacity: 0;
                                @extend %main_nav_color;

                                &.show {
                                    opacity: 1;
                                }
                                &.hide {
                                    pointer-events: none;
                                    opacity: 0;
                                    display: none;
                                }

                                >a {
                                    //color: var(--caption_color);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    gap: 0.5em;
                                    line-height: 1.5;

                                    .icon {
                                        width: 1.5em;
                                        aspect-ratio: 1/1;
                                        background-size: contain;
                                    }

                                    .caption {
                                        position: relative;

                                        .caption_main {
                                            transition: all 0.1s ease-out;
                                        }

                                        .caption_hover {
                                            transition: all 0.2s ease-out;
                                            opacity: 0;
                                            //margin-top: -1em;
                                            font-size: 0.7em;
                                            //margin-top: 0.2em;
                                            position: absolute;
                                            bottom: -1em;
                                            width: max-content;
                                        }
                                    }

                                }

                                .sub_nav_hover_wrap {
                                    pointer-events: none;
                                    opacity: 0;
                                    position: absolute;
                                    bottom: 0;
                                    transform: translateY(100%);
                                    padding-top: 1.3em;

                                    .sub_nav {
                                        padding: 1.5em 1.5em;
                                        width: max-content;
                                        max-width: 80vw;
                                        display: flex;
                                        justify-content: flex-start;
                                        align-items: flex-start;
                                        //gap: 1em;
                                        //flex-wrap: wrap;
                                        box-shadow: 3px 3px 7px rgba($color: #000, $alpha: 0.2);
                                        @extend %sub_nav;

                                        .scroll_area {
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: flex-start;
                                            max-height: 70vh;
                                            overflow-y: auto;

                                            &::-webkit-scrollbar {
                                                width: 7px;
                                                height: 0;
                                            }
                                            &::-webkit-scrollbar-button {
                                                background: transparent;
                                                border-radius: 4px;
                                                height: 0;
                                            }
                                            &::-webkit-scrollbar-track-piece {
                                                background: transparent;
                                            }
                                            &::-webkit-scrollbar-thumb {
                                                border-radius: 99em;
                                                $asd: var(--ds_nav_sub_text_color,#222);
                                                background-color: var(--ds_nav_sub_border_color,rgba(0,0,0,0.3));
                                            }
                                            &::-webkit-scrollbar-track {
                                                box-shadow: transparent;
                                            }
                                        }

                                        .store_pic {
                                            margin-right: 2em;

                                            img {
                                                display: block;
                                                max-width: 30em;
                                            }
                                        }

                                        .category_1, .category_2 {
                                            padding: 0 0.5em;

                                            a {
                                                position: relative;
                                                display: flex;
                                                justify-content: flex-start;
                                                align-items: center;
                                                gap: 0.5em;
                                                line-height: 1.3;
                                                padding: 0.5em 0;
                                                max-width: 10em;

                                                &:has(.icon){
                                                    padding: 0.8em 0;
                                                }

                                                .icon {
                                                    position: absolute;
                                                    left: 0;
                                                    top: 50%;
                                                    transform: translate(-100%,-50%);
                                                    margin-left: -0.5em;
                                                    width: 2.7em;
                                                    aspect-ratio: 1/1;

                                                    img {
                                                        display: block;
                                                        width: 100%;
                                                        height: 100%;
                                                        object-fit: contain;
                                                    }
                                                }
                                            }

                                            &:hover {
                                                background-color: rgba($color: #bbb, $alpha: 0.05);
                                                backdrop-filter: brightness(1.05);
                                            }
                                        }

                                        .category_list {
                                            flex-shrink: 0;
                                            flex-direction: column;
                                            justify-content: flex-start;
                                            align-items: stretch;
                                            column-gap: 2em;
                                            padding: 0 1em;
                                            display: none;

                                            &:has(li){
                                                display: flex;

                                                &~.category_expand {
                                                    margin-left: 2em;
                                                    border-left: 1px solid var(--ds_nav_sub_border_color,#eee);
                                                }
                                            }

                                            li {

                                                a {
                                                    max-width: 15em;
                                                }

                                                ~li {
                                                    //margin-top: 0.5em;
                                                }
                                            }
                                        }

                                        .category_expand {
                                            display: flex;
                                            flex-wrap: wrap;
                                            row-gap: 3em;
                                            justify-content: flex-start;
                                            align-items: stretch;
                                            //gap: 1em;

                                            >dl {
                                                padding: 0 1.5em;
                                                border-right: 1px solid var(--ds_nav_sub_border_color, #eee);

                                                &:last-child {
                                                    border: 0;
                                                }

                                                >dt {
                                                    padding: 0;
                                                    margin-bottom: 0.5em;
                                                    border-bottom: 3px solid var(--ds_nav_sub_border_color, #eee);

                                                    a {
                                                        //border-bottom: 3px solid var(--ds_nav_sub_border_color, #eee);
                                                    }
                                                }

                                                &~dl {
                                                    //border-left: 1px solid var(--ds_nav_sub_border_color, #eee);
                                                }
                                            }
                                        }

                                        .category_list,
                                        .category_expand>dl {
                                            &:has(.category_2 .icon){

                                                .category_2 {
                                                    padding-left: 3.5em;
                                                }
                                            }

                                            &:has(.category_1 .icon) {
                                                .category_1 {
                                                    padding-left: 3.5em;
                                                    padding-bottom: 0.5em;
                                                }
                                                .category_2 {
                                                    padding-left: 4em;
                                                }
                                            }
                                        }

                                    }

                                }

                                &.all_nav_btn {
                                    position: absolute;
                                    right: 0;
                                    top: 0;
                                    opacity: 1;
                                    transform: translateX( calc(100% + 2em));
                                    cursor: pointer;
                                    display: none;

                                    &._only_dot {
                                        padding: 0.25em 0;
                                        a {
                                            position: relative;
                                            display: flex;
                                            justify-content: flex-start;
                                            align-items: center;
                                            gap: 0.3em;
                                            width: 1.5em;
                                            height: 1.5em;
                                            padding: 0em;
                                            border-radius: 99em;
                                            overflow: hidden;
                                            border: 1px solid var(--ds_nav_text_color,#222);

                                            i {
                                                // position: absolute;
                                                // top: 0.25em;
                                                // left: 0.25em;
                                                width: 1.5em;
                                                height: 1.5em;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                flex-shrink: 0;
                                            }

                                            .caption {
                                                display: none;
                                                //padding-left: 2em;
                                                    //padding-right: 1em;
                                                    height: 100%;
                                                    align-content: center;
                                                    font-size: 0.9em;
                                                    text-align: center;
                                            }
                                        }

                                        &:hover {
                                            a {
                                                transition: all 0.1s ease-out;
                                                width: 6.5em;

                                                i {
                                                    //left: 0.4em;
                                                }

                                                .caption {

                                                    display: block;
                                                }
                                            }


                                        }
                                    }

                                    &.show {
                                        display: block;
                                    }

                                    // i {
                                    //     width: 1.5em;
                                    //     aspect-ratio: 1/1;
                                    //     border-radius: 99em;
                                    //     background-color: var(--ds_nav_text_color,#333);
                                    //     color: var(--ds_nav_bg_color,#fff);
                                    //     align-content: center;
                                    //     justify-content: center;
                                    //     text-align: center;
                                    // }
                                }


                                // &:has(.caption_hover) {
                                //     &:hover {
                                //         .caption {
                                //             //opacity: 0;
                                //         }
                                //         .caption_hover {
                                //             opacity: 1;
                                //         }
                                //     }
                                // }

                                &:hover {
                                    .sub_nav_hover_wrap {
                                        opacity: 1;
                                        pointer-events: all;
                                    }

                                    &:has(.caption_hover){
                                        .caption_main {
                                            transform: translateY(-15%);
                                        }
                                        .caption_hover {
                                            opacity: 1;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &:is(.-transparent){
                transition: background-color 0.3s ease-out;
                background-color: transparent;
                color: #fff;
                box-shadow: none;

                .navigation_container {
                    .nav_main {
                        nav {
                            >.nav_list {
                                >li{
                                    color: #fff;

                                    &.all_nav_btn._only_dot  {
                                        a {
                                            border-color: var(--ds_nav_text_color,#fff);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .navigation_callapes_container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                overflow-x: hidden;
                text-align: left;
                pointer-events: none;

                img {
                    display: block;
                    width: 100%;
                }

                .mask {
                    width: 100%;
                    height: 100vh;
                    background-color: rgba($color: #000, $alpha: 0.5);
                    backdrop-filter: blur(5px);
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease-out;
                }

                nav {
                    position: absolute;
                    top: 0;
                    width: 27em;
                    height: 100dvh;
                    background-color: var(--ds_nav_bg_color,#fff);
                    overflow: auto;
                    right: -100%;
                    transition: right 0.5s ease-in-out;
                    --nav_block_border_color: color-mix(in srgb, var(--ds_nav_text_color,#bbb) 20%, transparent 0%);

                    &::-webkit-scrollbar {
                        width: 7px;
                        height: 0;
                    }
                    &::-webkit-scrollbar-button {
                        background: transparent;
                        border-radius: 4px;
                        height: 0;
                    }
                    &::-webkit-scrollbar-track-piece {
                        background: transparent;
                    }
                    &::-webkit-scrollbar-thumb {
                        border-radius: 99em;
                        background-color: rgba(0, 0, 0, 0.24);
                    }
                    &::-webkit-scrollbar-track {
                        box-shadow: transparent;
                    }

                    .nav_block {
                        border-bottom: 1px solid var(--nav_block_border_color);

                        &.nav_head {
                            position: sticky;
                            top: 0;
                            z-index: 5;
                            display: flex;
                            //flex-wrap: wrap;
                            justify-content: space-between;
                            align-items: stretch;
                            background-color: var(--ds_nav_bg_color,#fff);
                            color: var(--ds_nav_text_color,#222);

                            .nav_func {
                                width: auto;
                                flex-grow: 1;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                border-right: 1px solid var(--nav_block_border_color);

                                >* {
                                    cursor: pointer;
                                    width: 50%;
                                    flex-grow: 1;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    height: 100%;
                                    gap: 0.5em;



                                    &.member_nav {
                                        border-left: 1px solid var(--ds_nav_sub_border_color,#ddd);
                                        .member_photo {
                                            width: 1.5em;
                                            aspect-ratio: 1/1;
                                            border-radius: 99em;
                                            overflow: hidden;
                                            border: 2px solid var(--ds_nav_sub_border_color,#333);
                                        }
                                    }
                                }


                            }

                            .close {
                                position: relative;
                                cursor: pointer;
                                flex-shrink: 0;
                                width: 4em;
                                aspect-ratio: 1/1;

                                &::after,
                                &::before {
                                    content: "";
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%) rotate(-45deg);
                                    width: 1.5em;
                                    height: 1px;
                                    background-color: var(--ds_nav_text_color,#222);
                                }
                                &::after {
                                    transform: translate(-50%,-50%) rotate(45deg);
                                }

                                &:hover {
                                    background-color: var(--ds_nav_text_color,#222);

                                    &:after,
                                    &::before {
                                        background-color: var(--ds_nav_bg_color,#fff);
                                    }
                                }
                            }

                            .callape_control {
                                position: absolute;
                                width: auto;
                                top: 50%;
                                left: 1em;
                                transform: translateY(-50%);
                                padding: 0.35em 1em;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                gap: 1em;
                                //border-top: 1px solid var(--ds_nav_sub_border_color,#ddd);
                                //background-color: var(--ds_nav_sub_border_color,#222);

                                .callape_control_btn {
                                    cursor: pointer;
                                    background-color: var(--ds_nav_text_color,#222);
                                    color: var(--ds_nav_bg_color,#fff);
                                    border-radius: 99em;
                                    padding: 0.3em 1em;
                                    font-size: 0.8rem;
                                }
                            }
                        }

                        &.main_nav_func {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 1em;
                            padding: 0.5em 1em;

                            .nav_title {
                                flex-grow: 1;
                                color: var(--ds_nav_text_color,#222);
                                padding-left: 1em;
                            }

                            .callape_control {
                                cursor: pointer;
                                border-radius: 99em;
                                padding: 0.3em 1.0em;
                                background-color: var(--ds_nav_text_color,#222);
                                color: var(--ds_nav_bg_color,#fff);
                                font-size: 0.8em;
                            }
                        }

                        .nav_link {
                            position: relative;
                            display: flex;
                            align-items: center;
                            gap: 0.5em;

                            .icon {
                                flex-shrink: 0;
                                width: 1.5em;
                                aspect-ratio: 1/1;
                                position: absolute;
                                top: 50%;
                                left: 0;
                                transform: translate(calc(-100% - 0em),-50%);

                                img{
                                    width: 100%;
                                    height: 100%;
                                    object-fit: contain;
                                }
                            }
                        }

                        &.main_nav_dl {

                            .main_nav_caption {
                                position: sticky;
                                top: 4em;
                                z-index: 1;
                                display: flex;
                                justify-content: space-between;
                                padding-left: 1em;
                                background-color: var(--ds_nav_bg_color,#fff);
                                @extend %main_nav_color;

                                a {
                                    position: relative;
                                    flex-grow: 1;
                                    padding: 1.0em 1em;

                                    .caption {
                                    }
                                    .caption_hover {
                                        font-size: 0.7em;
                                    }

                                    // &:has(.icon) {
                                    //     .caption_hover {
                                    //         padding-left: 2.857em;
                                    //     }
                                    // }
                                }

                                .hint_icon {
                                    display: none;
                                    border-color: transparent;
                                }

                                &:hover {
                                    a {
                                        &.has_link {
                                            text-decoration: underline;
                                            text-underline-offset: 0.2em;
                                        }
                                    }
                                    .hint_icon {
                                        border-left: 1px solid var(--nav_block_border_color);
                                    }
                                }
                            }

                            .sub_nav {
                                display: none;
                                //padding: 1em;
                                @extend %sub_nav;

                                .sub_nav_dl {
                                    margin-left: 1em;

                                    >dt,>dd {
                                        a {
                                            display: flex;
                                            padding: 0.7em;
                                        }

                                        &:hover {
                                            background-color: rgba($color: #bbb, $alpha: 0.05);
                                            backdrop-filter: brightness(1.05);
                                        }
                                    }
                                    .sub_nav_caption {
                                        //border-bottom: 1px dashed var(--ds_nav_sub_border_color,#ddd);
                                        padding-left: 2em;

                                        // &+.sub_nav_category {
                                        //     border-top: 1px dashed var(--ds_nav_sub_border_color,#ddd);
                                        // }
                                    }

                                    &:has(.sub_nav_category) .sub_nav_caption {
                                        border-bottom: 1px dashed var(--ds_nav_sub_border_color,#ddd);
                                    }

                                    .sub_nav_category {
                                        padding-left: 2em;
                                        margin-left: 2em;
                                    }

                                    &:not(:first-child){
                                        border-top: 1px dashed var(--ds_nav_sub_border_color,#ddd);
                                    }

                                    // &:last-child:not(:has(.sub_nav_category)){
                                    //     .sub_nav_caption {
                                    //         border: 0;
                                    //     }
                                    // }
                                }

                                &:has(.sub_nav_dl) {
                                    padding-top: 1em;
                                    padding-bottom: 1em;

                                    &:has(.store_pic) {
                                        padding-top: 0;

                                        .store_pic {
                                            margin-bottom: 1em;
                                        }

                                        .sub_nav_dl:nth-child(2){
                                            border: 0;
                                        }
                                    }


                                }
                            }



                            &:has(.sub_nav) {
                                .main_nav_caption {

                                    .hint_icon {
                                        flex-shrink: 0;
                                        display: block;
                                        position: relative;
                                        cursor: pointer;
                                        text-align: center;
                                        align-content: center;
                                        width: 4em;
                                        aspect-ratio: 1/1;
                                        //border-left: 1px solid #eee;
                                        transition: all 0.1s ease-out;

                                        .line {
                                            position: absolute;
                                            top: 50%;
                                            left: 50%;
                                            width: 1em;
                                            height: 1px;
                                            //background-color: var(--caption_color, var(--ds_nav_text_color,#222));
                                            background-color: var(--ds_nav_text_color,#222);
                                            transition: all 0.2s ease-out;
                                            transform: translate(-50%,-50%);

                                            &._b {
                                                transform: translate(-50%,-50%) rotate(90deg);
                                            }
                                        }

                                        &:hover {
                                            //background-color: var(--caption_color,var(--ds_nav_text_color,#222));
                                            background-color: color-mix(in srgb,var(--ds_nav_text_color,#222) 1.5%, transparent 0%);
                                            .line {
                                                //background-color: var(--ds_nav_bg_color,#fff);
                                            }
                                        }
                                    }
                                }

                                &:is(.open) {
                                    .main_nav_caption {
                                        box-shadow: 0 12px 12px -13px rgba($color: #222, $alpha: 0.2);
                                        .hint_icon {
                                            //background-color: var(--ds_nav_text_color,#222);
                                            background-color: color-mix(in srgb,var(--ds_nav_text_color,#222) 1.5%, transparent 0%);
                                            border-left: 1px solid var(--nav_block_border_color);

                                            .line {
                                                //background-color: var(--ds_nav_bg_color,#fff);
                                                &._t {
                                                    transform: translate(-50%,-50%) rotate(180deg);
                                                }
                                                &._b {
                                                    transform: translate(-50%,-50%) rotate(180deg);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        &._top,
                        &._bottom {
                            padding: 1em;
                            color: var(--ds_nav_sub_text_color,#333);

                            dt {
                                padding: 0.5em 1em;
                            }

                            dd {
                                margin-left: 1.5em;
                                a {
                                    display: block;
                                    line-height: 1.3;
                                    padding: 0.35em 0.5em;

                                    &:has(img){
                                        // padding-left: 0;
                                        // padding-right: 0;

                                        img {
                                            width: auto;
                                            max-width: 100%;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &:has(.main_nav_caption .icon) {

                        .nav_block {

                            &.main_nav_dl {
                                .main_nav_caption {
                                    padding-left: 3em;

                                    a {
                                        .icon {
                                            // position: absolute;
                                            // left: -0.5em;
                                            width: 2em;
                                        }
                                    }
                                }
                                .sub_nav {
                                    .sub_nav_dl {
                                        margin-left: 3em;
                                    }
                                }
                            }

                            &._top,
                            &.bottom {
                                dd {
                                    margin-left: 2.5em;
                                }
                            }
                        }


                    }
                }

                &.open {
                    nav {
                        right: 0;
                        pointer-events: all;
                        box-shadow: 0 0 0.8em rgba($color: #000, $alpha: 0.2);
                    }

                    .mask {
                        opacity: 1;
                        pointer-events: all;
                    }
                }
            }
        }



        //搜尋、購物車、會員功能區
        #id_master_menu_website_tool {
            position: relative;
            display: flex;
            justify-content: flex-start;
            flex-direction: row-reverse;
            align-items: center;
            gap: 1em;
            //width: 8em;
            width: max-content;
            flex-shrink: 0;
            padding-right: 0.35em;

            &.scroll {
                //top: 9px;
            }

            .master_menu_member,.master_menu_search,.bag_inside_text {
                // float: right;
                // padding: 0px 10px;
                // line-height: 1em;
            }

            .master_menu_member{
                list-style: none;

                >a {
                    color: inherit; 

                    img {
                        width:20px;
                        height:20px;
                        border-radius:20px; 
                        vertical-align:sub;
                    }
                }

                #id_member_center_list{
                    position: absolute;
                    display: none;
                    text-shadow: none;
                    padding-top: 10px;
                    right: -10px;
                    width: 260px;

                    ul {
                        list-style: none;
                        padding: 20px;
                        background-color: rgba($color: #fff, $alpha: 0.9);
                        border-radius: 10px;
                        box-shadow: 0 0 10px rgba($color: #000, $alpha: 0.2);

                        li {
                            margin: 0;
                            color: #666;

                            &.member_info {
                                //padding: 0 8px;
                                margin-bottom: 10px;
                                font-size: 0;
                                display: none;

                                img{
                                    border-radius:20px; 
                                    vertical-align:middle;
                                    width:20px;
                                    height:20px;
                                    margin-right: 9px;
                                }
                                .member_name {
                                    display: inline-block;
                                    vertical-align: middle;
                                    width: 75px;
                                    height: 1.5em;
                                    font-size: 0.8rem;
                                    overflow: hidden;
                                }
                            }

                            &.member_info_flex {
                                font-size: 90%;
                                padding-left: 8px;
                                .info_data {
                                    width: 100%;
                                    padding: 1% 0;
                                    display: flex;
                                    align-items: center;
                                    flex-direction: row;
                                    margin-bottom: 2%;
                                    &.control {
                                        width: 70%;
                                        justify-content: space-between;                                
                                    }
                                    .avatar {
                                        width: 40px;
                                        height: 40px;
                                        border-radius: 50px;
                                        overflow: hidden;
                                        img {
                                            width: 100%;
                                            height: 100%;
                                            -o-object-fit: cover;
                                            object-fit: cover;
                                        }
                                    }
                                    .icon {
                                        width: 25px;
                                    }
                                    .content {
                                        a {
                                            display: unset;
                                            padding: 0;
                                            text-decoration: underline;
                                            line-height: 1;
                                        }
                                    }
                                }
                            }

                            &.memberCardNo {
                                padding: 0 8px;
                                font-size: 0.8rem;
                                line-height: 2.2;
                                height: 2.2em;
                                font-family: 'Noto Sans TC', sans-serif !important;
                            }

                            &.social_account_list {
                                padding: 0 8px 4%;
                                line-height: 2.2;
                            }

                            &.inline_li {
                                display: inline-block;
                                width: 50%;
                            }

                            a{
                                display: block;
                                padding: 0 8px;
                                color: #666;
                                font-size: 0.9rem;
                                line-height: 2.2;
                                height: 2.2em;
                                overflow: hidden;

                                &.img{
                                    height: unset;
                                    padding: 0;
                                    img {
                                        width: 100%;
                                    }
                                }

                                &.member_logout {
                                    display: inline-block;
                                    vertical-align: middle;
                                }

                                &:hover {
                                    background-color: #ddd;
                                }
                            }


                        }
                    }
                }
            }
        }


        &.scroll {
            box-shadow: 0 3px 10px rgba($color: #000, $alpha: 0.2);

            .header {
                background-color: var(--ds_nav_bg_color,#fff);
                color: var(--ds_nav_text_color,#222);

                .logo {
                    height: 50px;

                    .logo_wrap {
                        &.website_logo {
                            opacity: 0;
                            pointer-events: none;
                        }
                        &.cate_logo {
                            opacity: 1;
                            pointer-events: all;
                        }
                    }
                }

                .navigation_container {
                    .nav_top {
                        height: 0;
                        margin-bottom: 0;
                    }
                }

                &:is(.-transparent){
                    //color: #333;

                    .navigation_container {
                        .nav_main {
                            nav {
                                >.nav_list {
                                    >li {
                                        @extend %main_nav_color;

                                        &.all_nav_btn._only_dot  {
                                            a {
                                                border-color: var(--ds_nav_text_color,#222);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
*/
form[name=middle_form].full_size .div_middle_box {
  min-width: 1180px;
  width: 80%;
  margin: 0 auto;
}
form[name=middle_form].full_size .div_middle_box .div_middle_right,
form[name=middle_form].full_size .div_middle_box .div_middle_left_big {
  width: calc(100% - 300px - 2%);
}
form[name=middle_form].full_size .div_middle_box .div_middle_right .product_list,
form[name=middle_form].full_size .div_middle_box .div_middle_left_big .product_list {
  --amount: 3;
  --gap: 1.5em;
}
form[name=middle_form].full_size .div_middle_box .div_middle_right .product_list .pd_list,
form[name=middle_form].full_size .div_middle_box .div_middle_left_big .product_list .pd_list {
  gap: var(--gap);
}
form[name=middle_form].full_size .div_middle_box .div_middle_right .product_list .pd_list .pd_list_item,
form[name=middle_form].full_size .div_middle_box .div_middle_left_big .product_list .pd_list .pd_list_item {
  margin: 0;
  width: calc((100% - (var(--amount) - 1) * var(--gap)) / var(--amount));
}
@media screen and (min-width: 1650px) {
  form[name=middle_form].full_size .div_middle_box .div_middle_right .product_list,
  form[name=middle_form].full_size .div_middle_box .div_middle_left_big .product_list {
    --amount: 4;
    --gap: 1.0em;
  }
  form[name=middle_form].full_size .div_middle_box .div_middle_right .product_list .pd_list .pd_list_item,
  form[name=middle_form].full_size .div_middle_box .div_middle_left_big .product_list .pd_list .pd_list_item {
    padding: 36px 1%;
  }
}

#id_body:has(form[name=middle_form].full_size) #id_fixed_right_bottom_product_view_record {
  right: 2% !important;
}

/*
    .mashup_v1 {
        font-family: 'Noto Sans TC', sans-serif;

        .mashup_caption {
            text-align: left;
            font-size: 1.5em;
            font-weight: 500;
            padding: 0.5em;
            color: var(--ds_main_color,#333);

            .price_caption {
                margin-left: 0.5em;
                font-size: 1.5em;
            }
        }

        .div_middle_box {
            background-color: #fff;
            width: 90%;
            min-width: 1260px;
            max-width: 1280px;
            padding: 1em;

            .div_middle_right {
                background-color: #fff;
                width: 920px;
                padding: 1em 2em;
                margin-bottom: 1em;
            }
        }    


        .mashup_group_list {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
            gap: 0.5em;

            >* {
                flex-grow: 1;
            }


            .mashup_group {

                .group_caption {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 1.5em;

                    .group_amount {
                        font-size: 0.7em;
                        margin-left: 0.5em;
                    }
                }

                .pick_list {
                    padding: 0.5em;

                    li {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        gap: 1em;
                        font-size: 0.8em;

                        .pic {
                            width: 2em;
                        }
                        .name {
                            flex-grow: 1;
                            .product_caption {
                                font-weight: 500;
                            }
                            .standard_caption {
                                font-size: 0.8em;
                            }
                        }
                        .amount {

                        }

                        &~li {
                            margin-top: 1em;
                        }
                    }
                }
            }


            ._group {
                cursor: pointer;
                background-color: var(--ds_cta_btn_bg_color,#222);
                color: var(--ds_cta_btn_color,#fff);
                padding: 1em 2em;
                transition: all 0.2s ease-in-out;
                border: 1px solid var(--ds_cta_btn_bgs_color_hover,#ddd);
                border-radius: 5px;

                &:hover,
                &.active {
                    //flex-grow: 1.2;
                    background-color: var(--ds_cta_btn_bg_color_hover,#222);
                    color: var(--ds_cta_btn_color_hover,#fff);

                    .arrow {
                        rotate: 90deg;
                    }
                }
            }

        }


        .mashup_bag {
            padding: 2em 2em;
            background-color: #fff;
            border-radius: 1em;

            .memu_title {
                text-align: left;
                font-size: 0.8em;
                margin-bottom: 1em;
            }

            .mashup_group_list {
                margin: 0 auto;
                //width: 90%;
                flex-direction: column;
                align-items: stretch;
                gap: 1em;

                .mashup_group {
                    .group_caption {
                        padding: 0.35em;
                        border-bottom: 1px solid #ddd;
                    }
                }
            }
        }

        #mashup_bag_block,
        #mashup_group_block {
            z-index: 100;
            position: sticky;
            top: 50px;
            background-color: var(--ds_bg_color,#fff);
            background-color: #fff;
            padding: 0.5em;
        }

        #mashup_group_block {
            &._tag {
                padding-bottom: 0;
                border-bottom: 1px solid #aaa;
                align-items: flex-end;

                .mashup_group {
                    margin-bottom: -1px;
                    border-end-end-radius: 0;
                    border-bottom-left-radius: 0;
                    border: 1px solid #aaa;
                    padding: 0.5em 1.5em;

                    &.active {
                        color: var(--ds_main_color,#333);
                        background-color: #fff;
                        border-bottom: 0;
                        padding: 1em 2em;
                    }
                }
            }

            &._tag2 {
                background-color: var(--ds_sup_colorx,#f6f6f6);
                border-radius: 10px;
                padding: 1em;

                .mashup_group {
                    border-radius: 7px;
                    border: 0;

                    &:not(.active) {
                        background-color: inherit;
                        color: var(--ds_sup_text_colorx,#333);

                        &:hover {
                            .group_caption {
                                .price_caption {
                                    transition: scale 0.1s ease-out;
                                    scale: 1.1;
                                }
                            }
                        }
                    }

                    &.active {
                        pointer-events: none;
                        background-color: var(--ds_main_color,#333);
                        color: var(--ds_main_text_colorx,#fff);
                    }

                    .group_caption {
                        justify-content: center;
                        gap: 1em;

                        .arrow {
                            display: none;
                        }
                    }
                }
            }
        }

        #mashup_product_list_block {
            padding: 0.5em;
            min-height: 40vh;

            .loading {
                text-align: center;
                font-weight: 500;
                color: #333;
                padding: 15vh 0;
                animation: beat-fade 0.2s infinite alternate;

                i {
                    margin-right: 1em;
                }
            }

            @keyframes beat-fade {
                0% {
                    opacity: 0.5;
                    scale: 1;
                }
                100% {
                    opacity: 1;
                    scale: 1.05;
                }
            }
        }
    }
*/
.choose_v1 {
  font-family: "Noto Sans TC", sans-serif;
  position: relative;
}
.choose_v1 .choose_pos {
  z-index: 100;
  width: 100%;
  position: sticky;
}
.choose_v1 .choose_pos:has(div) {
  height: 0;
  transform: translateY(-100%);
}
.choose_v1 .choose_pos .choose_summary_info {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: max-content;
  background-color: #fefefe;
  box-shadow: 0 -4px 7px -4px rgba(0, 0, 0, 0.25);
}
.choose_v1 .choose_pos dt {
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  background-color: #222;
  color: #fff;
}
.choose_v1 .choose_pos dt .choose_summary_info_left {
  display: flex;
  background-color: inherit;
  color: inherit;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  width: 35%;
  min-width: 4em;
}
.choose_v1 .choose_pos dt .choose_summary_info_left i {
  margin-right: 0.5em;
}
.choose_v1 .choose_pos dt .choose_summary_info_middle {
  flex-grow: 1;
  display: flex;
  background-color: inherit;
  color: inherit;
  justify-content: flex-start;
  align-items: center;
  gap: 2em;
  font-size: 1em;
  padding: 0.5em 2em;
}
.choose_v1 .choose_pos dt .arrow {
  width: 10%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.choose_v1 .choose_pos dt .arrow i {
  transition: rotate 0.1s ease-out;
}
.choose_v1 .choose_pos dt.open .arrow i {
  rotate: 180deg;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail {
  display: none;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .choose_caption {
  padding: 0 5%;
  margin-top: 1em;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap {
  padding: 2em 5%;
  overflow-x: auto;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap::-webkit-scrollbar {
  height: 7px;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap::-webkit-scrollbar-track {
  background-color: #eee;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap::-webkit-scrollbar-thumb {
  background-color: #9c9c9c;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap > ul {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2em;
  width: max-content;
  min-width: 100%;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap > ul > .item {
  width: 12em;
  font-size: 0.8em;
  text-align: center;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap > ul > .item._no {
  width: 100%;
  font-size: 1.2em;
  color: #aaa;
  text-align: center;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap > ul > .item .name {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  line-height: 1.3em;
  margin: 0.5em 0;
  height: 2.6em;
  overflow: hidden;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap > ul > .item .s_content {
  color: #666;
}
.choose_v1 .choose_pos dd.choose_summary_info_detail .list_wrap > ul > .item .amount {
  font-size: 1.2em;
}
.choose_v1 .div_middle_box .banner {
  margin-bottom: 1em;
}
.choose_v1 .div_middle_box .div_middle_right .product_list:first-child {
  margin-top: 0;
}