@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Tangerine:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&display=swap");
.FtEN {
  font-family: "Roboto", "Arial";
}

.FtTC {
  font-family: "Noto Sans TC", "Microsoft JhengHei";
}

.FtSpecial {
  font-family: "Tangerine";
}

.FtXL, h1, h5, .CommonTitle {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
}

.FtL, h2, .ProductInfoBox .Title {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.3;
}

.FtML, h3, ul.Square li::before, .EventsItemBox .EventsImg .OffTxt, .EventsTitleBox p.Title, .ProductListBox .Item .PriceBox, .ProductDetailIntro .Title, .StoreBox .StoreItemBox .StoreTitle .StoreName, .PageInView li, .MenuBox .MenuLv01, .MenuSBox .MenuSLv01 {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

.FtM, body, h4, .ProductDetailGrid .GridBox .Point, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li > b, .BasicBtn1st, a.BasicBtn1st, button.BasicBtn1st, input:not([type="checkbox"]):not([type=radio]):not([type=button]), textarea, select, .CommonFormBox .CommonForm .FieldGroup .FieldName, .MenuBox .MenuLv02Box, .MenuSBox .MenuSLv02Btn {
  font-size: 17px;
  line-height: 1.3;
}

.FtS, ul.Disc li::before, .BestSellersItemBox .Item .Point, .BestSellersItemBox .Item .NobuyTag, .ProductInfoBox .Desc, .CartListGrid .CartCell.Info .Price, .CartListGrid .CartCell.Info .Tag, .CommonToolsBg .CommonToolsBox > .CartBox .buyList, .BreadCrumbsBg .BreadCrumbsBox, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li, .FooterBox .CopyrightBox, .StepBox .StepItem, .BasicBtn2nd, a.BasicBtn2nd, button.BasicBtn2nd, .CommonFormBox .CommonForm .FieldGroup .FieldContent small, .CommonFormBox .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
  font-size: 14px;
  line-height: 1.3;
}

@media screen and (max-width: 1199px) {
  .FtXL, h1, h5, .CommonTitle {
    font-size: 27px;
  }

  .FtL, h2, .ProductInfoBox .Title {
    font-size: 22px;
  }

  .FtML, h3, ul.Square li::before, .EventsItemBox .EventsImg .OffTxt, .EventsTitleBox p.Title, .ProductListBox .Item .PriceBox, .ProductDetailIntro .Title, .StoreBox .StoreItemBox .StoreTitle .StoreName, .PageInView li, .MenuBox .MenuLv01, .MenuSBox .MenuSLv01 {
    font-size: 19px;
  }

  .FtM, body, h4, .ProductDetailGrid .GridBox .Point, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li > b, .BasicBtn1st, a.BasicBtn1st, button.BasicBtn1st, input:not([type="checkbox"]):not([type=radio]):not([type=button]), textarea, select, .CommonFormBox .CommonForm .FieldGroup .FieldName, .MenuBox .MenuLv02Box, .MenuSBox .MenuSLv02Btn {
    font-size: 17px;
  }

  .FtS, ul.Disc li::before, .BestSellersItemBox .Item .Point, .BestSellersItemBox .Item .NobuyTag, .ProductInfoBox .Desc, .CartListGrid .CartCell.Info .Price, .CartListGrid .CartCell.Info .Tag, .CommonToolsBg .CommonToolsBox > .CartBox .buyList, .BreadCrumbsBg .BreadCrumbsBox, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li, .FooterBox .CopyrightBox, .StepBox .StepItem, .BasicBtn2nd, a.BasicBtn2nd, button.BasicBtn2nd, .CommonFormBox .CommonForm .FieldGroup .FieldContent small, .CommonFormBox .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .FtXL, h1, h5, .CommonTitle {
    font-size: 24px;
  }

  .FtL, h2, .ProductInfoBox .Title {
    font-size: 20px;
  }

  .FtML, h3, ul.Square li::before, .EventsItemBox .EventsImg .OffTxt, .EventsTitleBox p.Title, .ProductListBox .Item .PriceBox, .ProductDetailIntro .Title, .StoreBox .StoreItemBox .StoreTitle .StoreName, .PageInView li, .MenuBox .MenuLv01, .MenuSBox .MenuSLv01 {
    font-size: 18px;
  }

  .FtM, body, h4, .ProductDetailGrid .GridBox .Point, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li > b, .BasicBtn1st, a.BasicBtn1st, button.BasicBtn1st, input:not([type="checkbox"]):not([type=radio]):not([type=button]), textarea, select, .CommonFormBox .CommonForm .FieldGroup .FieldName, .MenuBox .MenuLv02Box, .MenuSBox .MenuSLv02Btn {
    font-size: 16px;
  }

  .FtS, ul.Disc li::before, .BestSellersItemBox .Item .Point, .BestSellersItemBox .Item .NobuyTag, .ProductInfoBox .Desc, .CartListGrid .CartCell.Info .Price, .CartListGrid .CartCell.Info .Tag, .CommonToolsBg .CommonToolsBox > .CartBox .buyList, .BreadCrumbsBg .BreadCrumbsBox, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox, .FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li, .FooterBox .CopyrightBox, .StepBox .StepItem, .BasicBtn2nd, a.BasicBtn2nd, button.BasicBtn2nd, .CommonFormBox .CommonForm .FieldGroup .FieldContent small, .CommonFormBox .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
    font-size: 13px;
  }
}
@-webkit-keyframes SlidesOn {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-moz-keyframes SlidesOn {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-ms-keyframes SlidesOn {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes SlidesOn {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes ServiceOn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes ServiceOn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes ServiceOn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ServiceOn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes WaveAct01 {
  0% {
    left: 0px;
  }
  50% {
    left: -480px;
  }
  50.00001% {
    left: 480px;
  }
  100% {
    left: 0px;
  }
}
@-moz-keyframes WaveAct01 {
  0% {
    left: 0px;
  }
  50% {
    left: -480px;
  }
  50.00001% {
    left: 480px;
  }
  100% {
    left: 0px;
  }
}
@-ms-keyframes WaveAct01 {
  0% {
    left: 0px;
  }
  50% {
    left: -480px;
  }
  50.00001% {
    left: 480px;
  }
  100% {
    left: 0px;
  }
}
@keyframes WaveAct01 {
  0% {
    left: 0px;
  }
  50% {
    left: -480px;
  }
  50.00001% {
    left: 480px;
  }
  100% {
    left: 0px;
  }
}
@-webkit-keyframes WaveAct02 {
  0% {
    left: 479px;
  }
  50% {
    left: -1px;
  }
  50.00001% {
    left: 0px;
  }
  100% {
    left: -479px;
  }
}
@-moz-keyframes WaveAct02 {
  0% {
    left: 479px;
  }
  50% {
    left: -1px;
  }
  50.00001% {
    left: 0px;
  }
  100% {
    left: -479px;
  }
}
@-ms-keyframes WaveAct02 {
  0% {
    left: 479px;
  }
  50% {
    left: -1px;
  }
  50.00001% {
    left: 0px;
  }
  100% {
    left: -479px;
  }
}
@keyframes WaveAct02 {
  0% {
    left: 479px;
  }
  50% {
    left: -1px;
  }
  50.00001% {
    left: 0px;
  }
  100% {
    left: -479px;
  }
}
body {
  font-family: "Noto Sans TC";
  font-weight: 300;
  line-height: 1.3;
  color: #333333;
  background: #FFFFFF;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div, input, select, button, section, textarea, a, ol, ul, li {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Noto Sans TC";
}

ul, li {
  list-style: none;
}

img {
  vertical-align: middle;
}

a, a:link {
  cursor: pointer;
  color: inherit;
  word-wrap: break-word;
  text-decoration: underline;
}

a:hover, a:visited {
  text-decoration: none;
}

button {
  background: transparent;
  cursor: pointer;
}

input, select, button {
  outline: none;
  vertical-align: middle;
}

button, input[type="submit"] {
  border: 0;
}

select:disabled {
  cursor: default;
}

input:focus, textarea:focus {
  outline: none;
}

strong, b {
  font-weight: 500;
}

p {
  margin: 10px 0;
}

h4 {
  font-weight: 500;
}

h5 {
  font-family: "Tangerine";
  color: #277E1F;
}

.FtColor_Gn {
  color: #277E1F !important;
}

.FtColor_Pp {
  color: #BF4080 !important;
}

.LineH1 {
  line-height: 1;
}

.LineH2 {
  line-height: 1.2;
}

.LineH3 {
  line-height: 1.3;
}

.LineH4 {
  line-height: 1.4;
}

.LineH5 {
  line-height: 1.5;
}

.LineH6 {
  line-height: 1.6;
}

.MarginN1 {
  margin: 5px 0;
}

.MarginN2 {
  margin: 10px 0;
}

.MarginN3 {
  margin: 15px 0;
}

.MarginN4 {
  margin: 20px 0;
}

.Discell {
  display: table-cell;
}

.DisiB {
  display: inline-block;
  vertical-align: middle;
  margin: 0 -2px;
}

.DisB {
  display: block;
}

.DisN {
  display: none;
}

.DisF {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.Flex1 {
  flex: 1;
}

.Flex2 {
  flex: 2;
}

.Flex3 {
  flex: 3;
}

.Flex4 {
  flex: 4;
}

.Flex5 {
  flex: 5;
}

.Flex6 {
  flex: 6;
}

.TaL {
  text-align: left;
}

.TaC {
  text-align: center;
}

.TaR {
  text-align: right;
}

.FtB {
  font-weight: 500 !important;
}

hr.Line01, .Line01 {
  display: inline-block;
  width: 100%;
  height: 1px;
  margin: 10px 0 10px 0;
  border: 0;
  background: #CCCCCC;
}

hr.Line02, .Line02 {
  display: inline-block;
  width: 100%;
  height: 3px;
  margin: 10px 0 10px 0;
  border: 0;
  background: #333333;
}

ul.Indent, ol.Indent {
  margin: 0 0 0 20px;
}

ol.Decimal {
  margin: 0 0 0 20px;
}
ol.Decimal > li {
  list-style-type: decimal;
}

ol.Zero {
  margin: 0 0 0 30px;
}
ol.Zero > li {
  list-style-type: decimal-leading-zero;
}

ul.Square li, ul.Disc li {
  text-indent: -1em;
  padding: 0 0 0 1em;
}
ul.Square li::before, ul.Disc li::before {
  display: inline-block;
  width: 1em;
  margin: 0 -2px 0 0;
  padding: 0 0 0 0.6em;
  box-sizing: border-box;
  font-family: verdana;
  text-align: center;
}

ul.Square li::before {
  content: "▪";
}

ul.Disc li::before {
  content: "●";
}

@media screen and (max-width: 575px) {
  .HiddenXS {
    display: none !important;
  }

  .VisibleXS {
    display: block !important;
  }
}
@media screen and (max-width: 767px) {
  .HiddenS {
    display: none !important;
  }

  .VisibleS {
    display: block !important;
  }
}
@media screen and (max-width: 959px) {
  .HiddenM {
    display: none !important;
  }

  .VisibleM {
    display: block !important;
  }
}
@media screen and (max-width: 1199px) {
  .HiddenL {
    display: none !important;
  }

  .VisibleL {
    display: block !important;
  }
}
.TxtUnderLine {
  text-decoration: underline;
}

.TxtThrough {
  text-decoration: line-through !important;
}

.Clear {
  clear: both;
  height: 0;
}

.Hidden {
  display: none;
}

.OutFrame {
  width: 100%;
  min-width: 320px;
  position: relative;
  margin: 0 auto;
  text-align: left;
  overflow-x: hidden;
}

.OutFrame.PopOpen {
  position: fixed;
}

.InnerFrame {
  width: 100%;
  padding: 175px 0 0 0;
  margin: 0 auto;
  text-align: center;
}

.InnerFrameIndent {
  display: inline-block;
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 1199px) {
  .InnerFrame {
    padding: 115px 0 0 0;
  }
}
@media screen and (max-width: 959px) {
  .InnerFrame {
    padding: 77px 0 0 0;
  }
}
@media screen and (max-width: 767px) {
  .DisFMobileNone {
    display: block !important;
  }

  .InnerFrame {
    padding: 77px 0 0 0;
  }

  .InnerFrameIndent {
    width: calc( 100% - 20px );
  }
}
.SwiperStyle01 {
  width: 100%;
  position: relative;
  margin: 0 auto;
}
.SwiperStyle01 .swiper-container {
  width: 100%;
  overflow: visible !important;
}
.SwiperStyle01 .swiper-slide.swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}
.SwiperStyle01 .swiper-slide {
  opacity: 0.55;
  transform: scale(0.85);
  transition: transform 1s;
  -moz-transition: transform 1s;
  -ms-transition: transform 1s;
  -webkit-transition: transform 1s;
  -o-transition: transform 1s;
  overflow: hidden;
}
.SwiperStyle01 .swiper-slide img {
  width: 100%;
  height: auto;
}
.SwiperStyle01 .swiper-button-next, .SwiperStyle01 .swiper-button-prev {
  width: 60px;
  height: 60px;
  background-size: auto 60px;
}
.SwiperStyle01 .swiper-button-next:focus, .SwiperStyle01 .swiper-button-prev:focus {
  outline: none;
}
.SwiperStyle01 .swiper-button-next {
  left: calc( 50% + 453px ) !important;
  background-image: url("../images/btn01.png");
  background-repeat: no-repeat;
  background-position: -60px 0;
}
.SwiperStyle01 .swiper-button-prev {
  background-image: url("../images/btn01.png");
  background-repeat: no-repeat;
  background-position: 0;
  left: calc( 50% - 513px ) !important;
}
.SwiperStyle01 .swiper-pagination {
  width: 100%;
  text-align: center;
  bottom: -50px !important;
}
.SwiperStyle01 .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 10px !important;
  border-radius: 6px;
  border-style: solid;
  border-width: 0;
  background: none;
  opacity: 1;
  outline: none;
  background-color: #F0F0F0;
}
.SwiperStyle01 .swiper-pagination-bullet-active {
  background-color: #277E1F;
}

.IndexSlideBox {
  width: 100%;
  height: 550px;
  position: relative;
  margin: 60px auto 0 auto;
  z-index: 1;
  overflow: hidden;
}

.IndexSlideInner {
  width: 3000px;
  height: 550px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.IndexTitle {
  margin: 20px auto;
}

.BestSellersBox.Product {
  padding: 30px 0 40px 0;
  margin: 20px auto 20px auto;
}

.BestSellersBox {
  width: 100%;
  height: auto;
  position: relative;
  padding: 40px 0 60px 0;
  margin: 40px auto 60px auto;
}

.BestSellersInner {
  width: 100%;
  max-width: 1414px;
  text-align: center;
  margin: 0 auto;
}

.Product .BestSellersItemBox {
  margin: 30px auto 0px auto;
}
.Product .BestSellersItemBox .Item:first-child {
  margin: 0 12px 0 0 !important;
}
.Product .BestSellersItemBox .Item:last-child {
  margin: 0 0 0 12px !important;
}
.Product .BestSellersItemBox .Item {
  width: 210px;
  height: 280px;
  padding: 22px 17px 22px 17px;
  margin: 0 12px;
  position: relative;
  border: 1px solid #E5E5E5;
}
.Product .BestSellersItemBox .Item .SortPic {
  width: 56px;
  height: 58px;
  position: absolute;
  right: 14px;
  top: 0;
  background-image: url("../images/icon_pic01.svg");
  background-repeat: no-repeat;
  background-size: auto 58px;
}
.Product .BestSellersItemBox .Item .SortPic.t1 {
  background-position: 0;
}
.Product .BestSellersItemBox .Item .SortPic.t2 {
  background-position: -56px 0;
}
.Product .BestSellersItemBox .Item .SortPic.t3 {
  background-position: -112px 0;
}
.Product .BestSellersItemBox .Item .SortPic.t4 {
  background-position: -168px 0;
}
.Product .BestSellersItemBox .Item .SortPic.t5 {
  background-position: -224px 0;
}

.BestSellersItemBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  position: relative;
  width: 100%;
  margin: 50px auto 10px auto;
}
.BestSellersItemBox .Item:first-child {
  margin: 0 8px 0 0;
}
.BestSellersItemBox .Item:last-child {
  margin: 0 0 0 8px;
}
.BestSellersItemBox .Item {
  width: 270px;
  padding: 14px 14px 20px 14px;
  margin: 0 8px;
  position: relative;
  overflow: hidden;
  border: 1px solid #F0F0F0;
  background: #FFFFFF;
}
.BestSellersItemBox .Item a {
  text-decoration: none;
}
.BestSellersItemBox .Item .Point {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 7px 6px 7px;
  background: #E9303E;
  font-weight: 500;
  color: #FFFFFF;
}
.BestSellersItemBox .Item .NobuyTag {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 7px 6px 7px;
  font-weight: 500;
  color: #FFFFFF;
  background: #000000;
  font-weight: 500;
  color: #FFFFFF;
}
.BestSellersItemBox .Item .PDImg {
  width: 100%;
  height: auto;
}
.BestSellersItemBox .Item .PDName {
  height: 42px;
  margin: 18px 0 20px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.BestSellersItemBox .Item .GoPage.PDImg, .BestSellersItemBox .Item .GoPage.PDName {
  cursor: pointer;
}
.BestSellersItemBox .Item .PriceBox {
  width: 100%;
  margin: 0 auto 15px auto;
  font-family: "Roboto";
  font-weight: 400;
}
.BestSellersItemBox .Item .Price01, .BestSellersItemBox .Item .Price02 {
  display: inline-block;
  margin: 0 5px;
}
.BestSellersItemBox .Item .Price01 {
  text-align: right;
  color: #999999;
  text-decoration: line-through;
}
.BestSellersItemBox .Item .BtnGridBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: -70px;
  transition: bottom 0.4s;
  text-align: center;
  z-index: 2;
}
.BestSellersItemBox .Item .BtnGridBox .ItemBtn.Disable {
  background: #797979;
  cursor: default;
  color: rgba(255, 255, 255, 0.7);
  border-right: 1px solid #797979 !important;
  border-left: 1px solid #797979 !important;
}
.BestSellersItemBox .Item .BtnGridBox .ItemBtn {
  flex: 1;
  height: 100%;
  background: #C5538C;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  text-decoration: none;
}
.BestSellersItemBox .Item .BtnGridBox .ItemBtn i {
  display: inline-block;
  margin: 0 5px 0 0;
}
.BestSellersItemBox .Item .BtnGridBox .ItemBtn:first-child {
  border-right: 1px solid #BF4080;
}
.BestSellersItemBox .Item .BtnGridBox .ItemBtn:last-child {
  border-left: 1px solid #BF4080;
}
.BestSellersItemBox .Item:hover .BtnGridBox {
  bottom: 0px;
  transition: bottom 0.3s;
}

.SwiperStyle02 {
  margin: 0 auto;
}
.SwiperStyle02 .swiper-pagination-bullets {
  display: none;
}

.AboutBox {
  width: 100%;
  text-align: left;
}
.AboutBox h1 {
  margin: 0 0 20px 0;
  color: #277E1F;
}
.AboutBox .AboutBlock01 {
  position: relative;
  min-height: 363px;
  padding: 60px 0 0 0;
}
.AboutBox .AboutBlock01 > .AboutTxt {
  width: 600px;
  padding: 38px 40px 38px 0;
  position: relative;
  background: #FFFFFF;
  z-index: 2;
  line-height: 2;
}
.AboutBox .AboutBlock01 > .AboutPic {
  width: 765px;
  height: 363px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  background-image: url("../images/about/pic01.jpg");
  background-repeat: no-repeat;
  background-position: top right;
}
.AboutBox .AboutBlock02 {
  display: flex;
  justify-content: flex-end;
  position: relative;
  padding: 60px 0 0 0;
  margin: 90px 0 0 0;
}
.AboutBox .AboutBlock02 > .AboutTxt {
  width: 800px;
  padding: 38px 0px 38px 40px;
  position: relative;
  background: #FFFFFF;
  z-index: 2;
  line-height: 2;
}
.AboutBox .AboutBlock02 > .AboutPic {
  width: 555px;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: url("../images/about/pic02.jpg");
  background-repeat: no-repeat;
  background-position: 0 right;
}

.EventsBox.Index {
  padding: 70px 0 120px 0;
  margin: 60px auto 55px auto;
  background: #F9F8F4;
}

.EventsBox.News {
  padding: 20px 0 0px 0;
}

.EventsBox {
  width: 100%;
  position: relative;
}

.EventsInner {
  text-align: center;
}

.News .EventsItemBox {
  flex-wrap: wrap;
  max-width: 1268px;
  margin: 0 auto;
}
.News .EventsItemBox .EventsItem {
  width: 250px;
  margin: 0 33px 60px 33px;
}

.Index .EventsItemBox {
  max-width: 1230px;
  margin: 40px auto 0 auto;
}
.Index .EventsItemBox .EventsItem {
  flex: 1;
  margin: 0 15px;
}

.EventsItemBox {
  display: flex;
  width: 100%;
  text-align: left;
}
.EventsItemBox .EventsItem {
  display: inline-block;
  text-decoration: none;
}
.EventsItemBox .EventsImg.Off::after {
  display: inline-block;
}
.EventsItemBox .EventsImg.Off .OffTxt {
  display: inline-block;
}
.EventsItemBox .EventsImg {
  display: inline-block;
  width: 100%;
  height: auto;
  position: relative;
}
.EventsItemBox .EventsImg img {
  width: 100%;
  height: auto;
}
.EventsItemBox .EventsImg::after {
  display: none;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
}
.EventsItemBox .EventsImg .OffTxt {
  display: none;
  width: 150px;
  height: 150px;
  position: absolute;
  top: calc( 50% - 75px);
  left: calc( 50% - 75px);
  padding: 60px 0 0 0;
  z-index: 3;
  border-radius: 75px;
  background: #999999;
  text-align: center;
  color: #FFFFFF;
}
.EventsItemBox .EventsTxt {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 68px;
}

.EventsStatus {
  display: inline-block;
  padding: 3px 8px;
  margin: 20px 0 10px 0;
  border: 2px solid #277E1F;
  color: #277E1F;
  font-weight: 500;
}

.EventsStatus.Off {
  border: 2px solid #666666;
  color: #666666;
}

.EventsTitleBox {
  text-align: left;
  margin: 20px auto 40px auto;
}
.EventsTitleBox p.Title {
  display: inline-block;
  width: 100%;
  margin: 0 0 10px 0;
  text-align: left;
}
.EventsTitleBox .EventsStatus {
  margin: 6px 0 30px 0;
}

.EventsDetail {
  display: inline-block;
  width: 100%;
  margin: 10px auto 60px auto;
  text-align: left;
}
.EventsDetail img {
  width: 75% !important;
  max-width: 840px !important;
  height: auto !important;
  margin: 0 auto;
}

.HealthIntroBox {
  display: inline-block;
  width: 100%;
  padding: 35px 0;
  margin: 55px 0 25px 0;
}

.HealthIntroInner {
  width: 100%;
  text-align: center;
}

.HealthIntroItemBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 1414px;
  margin: 0 auto;
}
.HealthIntroItemBox .Grid01, .HealthIntroItemBox .Grid02 {
  width: 50%;
}
.HealthIntroItemBox .Grid01 {
  position: relative;
  text-align: left;
}
.HealthIntroItemBox .Grid01 > .Img01 {
  position: absolute;
  right: 0;
  bottom: 15px;
}
.HealthIntroItemBox .Grid01 > .bg01 {
  width: 660px;
  height: auto;
}
.HealthIntroItemBox .Grid02 {
  padding: 30px 0 0 102px;
  text-align: left;
}
.HealthIntroItemBox .Grid02 .HealthIntroTxt {
  max-width: 580px;
  height: auto;
  min-height: 250px;
  margin: 30px 0 30px 0;
  line-height: 1.6;
  font-family: "Noto Sans TC";
  font-weight: 300;
}

.Health.EventsDetail div, .Health.EventsDetail p {
  font-family: "Noto Sans TC" !important;
}

.ProductListBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  max-width: 1260px;
  margin: 80px auto 0px auto;
  padding: 0;
}
.ProductListBox .Item {
  width: 360px;
  min-height: 420px;
  height: auto;
  padding: 24px 23px 20px 23px;
  margin: 0 29px 60px 29px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid #E5E5E5;
}
.ProductListBox .Item .Point {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 7px 6px 7px;
  font-weight: 500;
  color: #FFFFFF;
  background-color: #E9303E;
}
.ProductListBox .Item .NobuyTag {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 4px 7px 6px 7px;
  font-weight: 500;
  color: #FFFFFF;
  background: #000000;
}
.ProductListBox .Item .PDImg {
  width: 100%;
  height: auto;
}
.ProductListBox .Item .PDName {
  height: 42px;
  margin: 30px 0 28px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ProductListBox .Item .GoPage.PDImg, .ProductListBox .Item .GoPage.PDName {
  cursor: pointer;
}
.ProductListBox .Item .PriceBox {
  width: 100%;
  margin: 0 auto 18px auto;
  font-family: "Roboto";
  font-weight: 400;
}
.ProductListBox .Item .Price01, .ProductListBox .Item .Price02 {
  display: inline-block;
  margin: 0 5px;
}
.ProductListBox .Item .Price01 {
  text-align: right;
  color: #999999;
  text-decoration: line-through;
}
.ProductListBox .Item .BtnGridBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: -65px;
  transition: bottom 0.4s;
  text-align: center;
  z-index: 2;
}
.ProductListBox .Item .BtnGridBox .ItemBtn.Disable {
  background: #797979;
  cursor: default;
  color: rgba(255, 255, 255, 0.7);
  border-right: 1px solid #797979 !important;
  border-left: 1px solid #797979 !important;
}
.ProductListBox .Item .BtnGridBox .ItemBtn {
  flex: 1;
  height: 100%;
  background: #C5538C;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  text-decoration: none;
}
.ProductListBox .Item .BtnGridBox .ItemBtn i {
  display: inline-block;
  margin: 0 5px 0 0;
}
.ProductListBox .Item .BtnGridBox .ItemBtn:first-child {
  border-right: 1px solid #BF4080;
}
.ProductListBox .Item .BtnGridBox .ItemBtn:last-child {
  border-left: 1px solid #BF4080;
}
.ProductListBox .Item:hover .BtnGridBox {
  bottom: 0px;
  transition: bottom 0.3s;
}

.ProductDetailGrid {
  display: flex;
  width: 100%;
  margin: 0 auto 50px auto;
  text-align: left;
}
.ProductDetailGrid .GridBox {
  width: 50%;
  position: relative;
}
.ProductDetailGrid .GridBox .Point {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 7px 6px 7px;
  background: #E9303E;
  font-weight: 500;
  color: #FFFFFF;
}
.ProductDetailGrid .ProductImg02 {
  width: 480px;
  height: 360px;
  border: 1px solid #E5E5E5;
}

.ProductInfoBox .Title {
  padding: 0 10px 15px 10px;
  border-bottom: 1px solid #CCCCCC;
}
.ProductInfoBox .EventMsg {
  padding: 0 10px;
  margin: 17px 0;
  color: #277E1F;
}
.ProductInfoBox .Desc {
  padding: 0 10px;
  margin: 17px 0;
  line-height: 1.6 !important;
}
.ProductInfoBox .PriceBox {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 17px 10px;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  background: #F7F4EE;
  font-weight: 500;
}
.ProductInfoBox .PriceBox .Discount {
  flex: 1;
}
.ProductInfoBox .PriceBox .Price {
  flex: 1;
  text-align: left;
}
.ProductInfoBox .PriceBox span, .ProductInfoBox .PriceBox b {
  display: inline-block;
  vertical-align: middle;
}
.ProductInfoBox .PriceBox b {
  margin: 0 0 0 3px;
}
.ProductInfoBox .QtyAndBuy {
  display: flex;
  margin: 30px 0 10px 0;
}
.ProductInfoBox .QtyFun {
  display: flex;
  align-items: center;
  width: 180px;
  height: 45px;
  margin: 0px 20px 0px 0;
  overflow: hidden;
}
.ProductInfoBox .QtyFun button, .ProductInfoBox .QtyFun input {
  display: inline-block;
}
.ProductInfoBox .QtyFun button {
  width: 45px !important;
  height: 45px !important;
  background-color: #333333;
  border: 1px solid #333333;
}
.ProductInfoBox .QtyFun input {
  width: calc( 100% - 86px );
  height: 45px !important;
  text-align: center;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  margin: 0 !important;
}
.ProductInfoBox .QtyFun button i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 5px 0 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/icon_pic02.png");
}
.ProductInfoBox .QtyFun button.Add i {
  background-position: 0;
}
.ProductInfoBox .QtyFun button.Cut i {
  background-position: -20px 0;
}
.ProductInfoBox .InfoTabBox {
  display: flex;
  align-items: flex-start;
  height: 36px;
  margin: 20px 0;
}
.ProductInfoBox .InfoTabBox .InfoTab {
  display: inline-block;
  flex: 1;
  height: 36px;
  padding: 4px 0 0 0;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.ProductInfoBox .InfoTabBox .InfoTab:first-child {
  margin: 0 10px 0 0;
}
.ProductInfoBox .InfoTabBox .InfoTab:last-child {
  margin: 0 0 0 10px;
}
.ProductInfoBox .InfoTabBox .InfoTab::before {
  display: inline-block;
  width: 100%;
  height: 3px;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: #999999;
}
.ProductInfoBox .InfoTabBox .InfoTab.On {
  color: #277E1F !important;
}
.ProductInfoBox .InfoTabBox .InfoTab.On::before {
  background: #277E1F;
}
.ProductInfoBox .InfoTabContent {
  display: none;
  padding: 0 10px;
}
.ProductInfoBox .InfoTabContent.On {
  display: inline-block;
}

.ProductDetailIntro {
  display: inline-block;
  width: 100%;
  margin: 60px auto 60px auto;
}
.ProductDetailIntro .Title {
  width: 100%;
  height: 50px;
  margin: 0 0 80px 0;
  background: #F0F0F0;
  line-height: 50px;
  text-align: center;
}
.ProductDetailIntro .DetailIntro {
  text-align: left;
}
.ProductDetailIntro .DetailIntro img {
  max-width: 100%;
  margin: 0 auto;
}

.ExchangeListBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1235px;
  margin: 20px auto 0px auto;
}
.ExchangeListBox .Item {
  width: 210px;
  min-height: 280px;
  padding: 20px 20px 10px 20px;
  margin: 0 18px 40px 19px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border: 1px solid #E5E5E5;
}
.ExchangeListBox .Item .PDImg {
  width: 100%;
  height: auto;
}
.ExchangeListBox .Item .PDName {
  height: 42px;
  margin: 20px 0 25px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ExchangeListBox .Item .ViewBtn.PDImg, .ExchangeListBox .Item .ViewBtn.PDName, .ExchangeListBox .Item .ViewBtn02.PDImg, .ExchangeListBox .Item .ViewBtn02.PDName {
  cursor: pointer;
}
.ExchangeListBox .Item .ExchangePpoint {
  width: 100%;
  margin: 0 auto 15px auto;
  font-weight: 500;
}
.ExchangeListBox .Item .PriceBox {
  width: 100%;
  margin: 0 auto 10px auto;
  font-family: "Roboto";
  font-weight: 400;
}
.ExchangeListBox .Item .Price01, .ExchangeListBox .Item .Price02 {
  display: inline-block;
  margin: 0 5px;
}
.ExchangeListBox .Item .Price01 {
  text-align: right;
  color: #999999;
  text-decoration: line-through;
}
.ExchangeListBox .Item .BtnGridBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: -70px;
  transition: bottom 0.4s;
  text-align: center;
  z-index: 2;
}
.ExchangeListBox .Item .BtnGridBox .ItemBtn.Disable {
  background: #797979;
  cursor: default;
  color: rgba(255, 255, 255, 0.7);
  border-right: 1px solid #797979 !important;
  border-left: 1px solid #797979 !important;
}
.ExchangeListBox .Item .BtnGridBox .ItemBtn, .ExchangeListBox .Item .BtnGridBox a.ItemBtn, .ExchangeListBox .Item .BtnGridBox button.ItemBtn {
  flex: 1;
  height: 100%;
  background: #C5538C;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  text-decoration: none;
}
.ExchangeListBox .Item .BtnGridBox .ItemBtn i, .ExchangeListBox .Item .BtnGridBox a.ItemBtn i, .ExchangeListBox .Item .BtnGridBox button.ItemBtn i {
  display: inline-block;
  margin: 0 5px 0 0;
}
.ExchangeListBox .Item .BtnGridBox .ItemBtn:first-child {
  border-right: 1px solid #BF4080;
}
.ExchangeListBox .Item .BtnGridBox .ItemBtn:last-child {
  border-left: 1px solid #BF4080;
}
.ExchangeListBox .Item:hover .BtnGridBox {
  bottom: 0px;
  transition: bottom 0.3s;
}

.CartListBox {
  width: 100%;
  max-width: 1200px;
}

.CartListGrid {
  display: flex;
  align-items: center;
  min-height: 105px;
  padding: 15px 15px;
  border-bottom: 1px solid #CCCCCC;
}
.CartListGrid .CartCell.Pic {
  width: 130px;
  text-align: left;
}
.CartListGrid .CartCell.Pic img {
  width: 100px;
  height: auto;
}
.CartListGrid .CartCell.Info {
  flex: 1;
  padding: 0 50px 0 0;
  text-align: left;
}
.CartListGrid .CartCell.Info .Price, .CartListGrid .CartCell.Info .Tag {
  display: inline-block;
}
.CartListGrid .CartCell.Info .Price {
  width: 90px;
  padding: 0 10px 0 0px;
  font-family: "Roboto";
}
.CartListGrid .CartCell.Info .Tag {
  color: #277E1F;
}
.CartListGrid .CartCell.Info .Name {
  width: 100%;
  height: 44px;
  margin: 0px 0 10px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.CartListGrid .CartCell.Qty {
  width: 150px;
  text-align: center;
  font-family: "Roboto";
}
.CartListGrid .CartCell.Qty .QtyFun {
  margin: 0 auto;
}
.CartListGrid .CartCell.Summary {
  width: 90px;
  text-align: right;
  font-family: "Roboto";
}
.CartListGrid .CartCell.Del {
  width: 70px;
  text-align: right;
}
.CartListGrid .QtyFun.SelectBox {
  margin: 7px 0px 8px 0px;
}

.TotalGridBox.NoBottomMargin {
  margin: 0px auto;
}

.TotalGridBox {
  width: 100%;
  padding: 19px 85px 19px 0;
  margin: 0px auto 60px auto;
  position: relative;
  background: #F0F0F0;
}
.TotalGridBox .TotalGrid {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.TotalGridBox .TotalGrid .TotalL {
  width: 140px;
  text-align: left;
}
.TotalGridBox .TotalGrid .TotalR {
  width: 150px;
  text-align: right;
  font-family: "Roboto";
}
.TotalGridBox .HasToggleMargin {
  width: 100%;
  height: 0px;
  transition: all 0.3s;
}

.HasToggleBtn.TotalGridBox .HasToggleMargin {
  height: 30px;
}

.CartGrayTxt {
  width: 100%;
  padding: 30px 15px;
  margin: 0px auto 20px auto;
  line-height: 1.6;
  text-align: left;
  background-color: #F0F0F0;
}

.CreditCardTipremind {
  margin: 10px 0 0 0;
  text-align: right;
  color: #BF4080;
}

.OrderDetailBtnBox.Open {
  height: 0px;
}

.OrderDetailBtnBox {
  width: 100%;
  height: 40px;
  position: relative;
  padding: 0;
  margin: 0px 0 40px 0;
  line-height: 0;
  transition: all 0.3s;
}
.OrderDetailBtnBox button {
  position: absolute !important;
  right: 0;
  top: 0;
  margin: 0 !important;
}

.OrderShowOffBtnBox.Open {
  height: 35px;
}
.OrderShowOffBtnBox.Open .BtnIconXS.ArrowDown {
  transform: rotate(180deg);
}

.OrderShowOffBtnBox {
  position: relative;
  width: 100%;
  height: 0px;
  z-index: 5;
  transition: all 0.3s;
}
.OrderShowOffBtnBox button {
  position: absolute !important;
  right: 0;
  top: 0;
  margin: 0 !important;
}
.OrderShowOffBtnBox .BtnIconXS.ArrowDown {
  transition: transform 0.5s;
}

.OrderOverTxt {
  width: 100%;
  max-width: 920px;
  margin: 0 auto 60px auto;
  text-align: center;
}

.ServiceContent.On {
  display: inline-block;
  opacity: 0;
  animation: ServiceOn 1.1s ease-out 0s forwards;
}

.ServiceContent {
  display: none;
  position: relative;
  opacity: 0;
}

.StoreSelect {
  position: relative;
  width: 253px;
  height: 56px;
  margin: 20px auto;
}
.StoreSelect > select {
  width: 253px;
  height: 56px;
  padding: 4px 42px 4px 22px !important;
  border-radius: 4px;
  border: 1px solid #999999;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.StoreSelect > select::-ms-expand {
  display: none;
}
.StoreSelect::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 22px;
  right: 10px;
  z-index: 2;
  content: "";
  pointer-events: none;
  background-image: url("../images/form_pic.svg");
  background-repeat: no-repeat;
  background-size: auto 24px;
  background-position: -48px 0;
}

.StoreBox {
  width: 100%;
  margin: 60px auto 0 auto;
}
.StoreBox .StoreItemBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1268px;
  margin: 0 auto;
  text-align: left;
}
.StoreBox .StoreItemBox .StoreItem {
  width: 250px;
  height: 200px;
  margin: 0 34px 60px 33px;
}
.StoreBox .StoreItemBox .StoreTitle {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #277E1F;
}
.StoreBox .StoreItemBox .StoreTitle .StoreName {
  display: inline-block;
  padding: 0 3px;
  margin: 6px 0;
}
.StoreBox .StoreItemBox .StoreTitle .StoreMapBtn {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("../images/btn04.svg");
  background-repeat: no-repeat;
}
.StoreBox .StoreItemBox .StoreInfo {
  padding: 0 3px;
  margin: 10px 0 0 0;
  line-height: 1.4;
}

.HealthBox {
  width: 100%;
  margin: 0px auto;
}

.HealthListBox {
  text-align: left;
}
.HealthListBox .HealthList {
  height: 69px;
  padding: 12px 15px;
  border-top: 1px solid #CCCCCC;
  line-height: 42px;
}
.HealthListBox .HealthList .HealthTitle {
  display: inline-block;
  display: -webkit-box;
  height: auto;
  max-height: 42px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.HealthListBox .HealthList a:hover {
  text-decoration: underline;
}

.HealthCardBox {
  width: 100%;
  max-width: 1240px;
  margin: 0px auto 0 auto;
}
.HealthCardBox .HealthCardGrid {
  display: flex;
  width: 100%;
  text-align: left;
}
.HealthCardBox .HealthCardGrid .HealthCard {
  width: calc( 50% - 40px );
  padding: 24px 20px;
  margin: 0 20px 30px 20px;
  border: 1px solid #CCCCCC;
}
.HealthCardBox .HealthCardGrid .HealthCard .HealthTitle {
  color: #277E1F;
  font-weight: 500;
}

.JoinBox {
  width: 100%;
  margin: 20px auto 0px auto;
  border-bottom: 1px solid #CCCCCC;
}
.JoinBox .MemberOrLine {
  width: 100%;
}
.JoinBox .MemberOrLine::before {
  display: inline-block;
  width: calc( 50% - 30px );
  height: 1px;
  content: "";
  margin: 0;
  vertical-align: middle;
  background: #CCCCCC;
}
.JoinBox .MemberOrLine span {
  display: inline-block;
  width: 50px;
  height: 22px;
  font-size: 14px;
}
.JoinBox .MemberOrLine::after {
  display: inline-block;
  width: calc( 50% - 30px );
  height: 1px;
  content: "";
  margin: 0;
  vertical-align: middle;
  background: #CCCCCC;
}
.JoinBox .JoinGrid {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 688px;
  margin: 20px auto;
}
.JoinBox .JoinGrid .Flex1:first-child img {
  display: block;
  margin: 18px auto;
}

@media screen and (max-width: 1559px) {
  .Product .BestSellersItemBox {
    margin: 30px auto 0px auto;
  }

  .BestSellersItemBox .Item {
    width: 208px;
    height: auto;
    padding: 10px 10px 20px 10px;
  }
  .BestSellersItemBox .Item .BtnGridBox {
    height: 50px;
    position: absolute;
    bottom: -70px;
  }

  .News .EventsItemBox {
    max-width: 966px;
  }
  .News .EventsItemBox .EventsItem {
    margin: 0 36px 60px 36px;
  }

  .Index .EventsItemBox {
    width: 82%;
    max-width: 1120px;
  }

  .HealthIntroItemBox {
    width: 86%;
  }
  .HealthIntroItemBox .Grid01 > .Img01 {
    bottom: 0px;
  }
  .HealthIntroItemBox .Grid01 > .bg01 {
    width: 40vw;
  }
  .HealthIntroItemBox .Grid02 {
    padding: 0px 0 0 7%;
  }
  .HealthIntroItemBox .Grid02 .HealthIntroTxt {
    min-height: 220px;
  }

  .AboutBox .AboutBlock01 > .AboutTxt {
    width: 50vw;
  }
  .AboutBox .AboutBlock01 > .AboutPic {
    width: 50vw;
    max-width: 765px;
    background-position: top center;
  }
  .AboutBox .AboutBlock02 {
    padding: 90px 0 0 0;
  }
  .AboutBox .AboutBlock02 > .AboutTxt {
    width: 55vw;
  }

  .ProductListBox {
    max-width: 1065px;
  }
  .ProductListBox .Item {
    width: 310px;
    min-height: 370px;
    padding: 24px 20px 20px 20px;
    margin: 0 22px 60px 22px;
  }
  .ProductListBox .Item .PDName {
    height: 45px;
    margin: 25px 0 22px 0;
  }

  .ProductDetailGrid .ProductImg02 {
    width: 88%;
    max-width: 480px;
    height: auto;
  }

  .ExchangeListBox {
    max-width: 984px;
  }
  .ExchangeListBox .Item {
    width: 210px;
    min-height: 280px;
    padding: 20px 20px 10px 20px;
    margin: 0 18px 40px 18px;
  }

  .HealthBox {
    width: calc( 85% + 40px );
  }

  .StoreBox {
    max-width: 966px;
  }
}
@media screen and (max-width: 1199px) {
  .SwiperStyle01 .swiper-slide {
    opacity: 1;
  }
  .SwiperStyle01 .swiper-button-next, .SwiperStyle01 .swiper-button-prev {
    width: 60px;
    height: 60px;
    background-size: auto 60px;
  }
  .SwiperStyle01 .swiper-button-next:focus, .SwiperStyle01 .swiper-button-prev:focus {
    outline: none;
  }
  .SwiperStyle01 .swiper-button-next {
    left: calc( 100% - 60px ) !important;
    background-position: -60px 0;
  }
  .SwiperStyle01 .swiper-button-prev {
    background-position: 0;
    left: 0 !important;
  }
  .SwiperStyle01 .swiper-pagination {
    bottom: -40px !important;
  }
  .SwiperStyle01 .swiper-pagination-bullet {
    margin: 0 12px;
  }

  .IndexSlideBox {
    height: auto;
    padding: 0 0 50px 0;
    margin: 0 auto;
  }

  .IndexSlideInner {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    position: relative;
    left: 0;
    transform: translate(0, 0);
  }

  .BestSellersBox.Product {
    padding: 30px 0 70px 0;
  }

  .BestSellersBox {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0 60px 0;
    margin: 40px auto 60px 0;
  }

  .Product .BestSellersItemBox {
    width: calc( 100% - 300px );
  }
  .Product .BestSellersItemBox .Item:first-child {
    margin: 0 10px 0 0 !important;
  }
  .Product .BestSellersItemBox .Item:last-child {
    margin: 0 0 0 10px !important;
  }
  .Product .BestSellersItemBox .Item {
    height: 270px;
    margin: 0 10px;
  }

  .BestSellersItemBox {
    width: calc( 100% - 370px );
  }
  .BestSellersItemBox .Item {
    width: 192px;
  }

  .SwiperStyle02 {
    width: 100%;
    margin: 0 auto;
  }
  .SwiperStyle02 .swiper-pagination-bullets {
    display: block;
  }
  .SwiperStyle02 .swiper-slide.swiper-slide-active {
    opacity: 1;
  }
  .SwiperStyle02 .swiper-pagination {
    width: 100%;
    text-align: center;
    bottom: -45px !important;
  }
  .SwiperStyle02 .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 11px;
    border-radius: 6px;
    border-style: solid;
    border-width: 0;
    background: none;
    opacity: 1;
    outline: none;
    background-color: #F0F0F0;
  }
  .SwiperStyle02 .swiper-pagination-bullet-active {
    background-color: #277E1F;
  }

  .News .EventsItemBox {
    max-width: 880px;
  }
  .News .EventsItemBox .EventsItem {
    margin: 0 20px 60px 20px;
  }

  .Index .EventsItemBox {
    width: 90%;
    max-width: 950px;
  }

  .EventsStatus {
    margin: 15px 0 10px 0;
  }

  .HealthIntroBox {
    margin: 55px 0 25px 0;
  }

  .HealthIntroItemBox {
    width: calc( 90% - 30px );
    max-width: 920px;
  }
  .HealthIntroItemBox .Grid01 > .Img01 {
    width: 200px;
  }
  .HealthIntroItemBox .Grid01 > .bg01 {
    width: 100%;
  }
  .HealthIntroItemBox .Grid02 {
    width: 50%;
    padding: 0px 0 0 38px;
  }
  .HealthIntroItemBox .Grid02 .HealthIntroTxt {
    min-height: 200px;
    margin: 25px 0 20px 0;
  }

  .AboutBox .AboutBlock02 {
    padding: 48px 0 0 0;
    margin: 72px 0 0 0;
  }

  .ProductListBox {
    max-width: 684px;
    margin: 70px auto 0px auto;
  }
  .ProductListBox .Item {
    width: 310px;
    min-height: 370px;
    padding: 24px 20px 20px 20px;
    margin: 0 16px 60px 16px;
  }

  .ProductDetailGrid {
    margin: 0 auto 40px auto;
  }

  .ProductDetailIntro {
    margin: 35px auto 45px auto;
  }

  .ExchangeListBox {
    max-width: 738px;
  }

  .TotalGridBox {
    margin: 0px auto 40px auto;
  }

  .StoreBox {
    max-width: 880px;
  }
  .StoreBox .StoreItemBox .StoreItem {
    margin: 0 20px 60px 20px;
  }
}
@media screen and (max-width: 959px) {
  .IndexSlideInner {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    position: relative;
    left: 0;
    transform: translate(0, 0);
  }

  .Product .BestSellersItemBox {
    width: 85%;
  }
  .Product .BestSellersItemBox .Item {
    height: auto;
    padding: 18px 14px 0 14px;
  }

  .BestSellersItemBox {
    width: 85%;
    margin: 30px auto 10px auto;
  }
  .BestSellersItemBox .Item:first-child {
    margin: 0 16px 0 0;
  }
  .BestSellersItemBox .Item:last-child {
    margin: 0 0 0 16px;
  }
  .BestSellersItemBox .Item {
    width: 210px;
    height: auto;
    padding: 18px 14px 0 14px;
    margin: 0 16px;
  }
  .BestSellersItemBox .Item .PDName {
    margin: 15px 0 12px 0;
  }
  .BestSellersItemBox .Item .BtnGridBox {
    width: calc( 100% + 28px );
    height: 50px;
    position: relative;
    left: -14px;
    bottom: 0px;
  }
  .BestSellersItemBox .Item:hover .BtnGridBox {
    bottom: none;
    top: 0;
    transition: none;
  }

  .EventsBox.Index {
    padding: 70px 0 34px 0;
    margin: 60px auto 25px auto;
    background: #F9F8F4;
  }

  .News .EventsItemBox {
    max-width: 620px;
  }
  .News .EventsItemBox .EventsItem {
    margin: 0 30px 45px 30px;
  }

  .Index .EventsItemBox {
    width: 94%;
    max-width: 620px;
    flex-wrap: wrap;
  }
  .Index .EventsItemBox .EventsItem {
    flex: none;
    width: 270px;
    margin: 0 20px 45px 20px;
  }

  .EventsItemBox {
    display: flex;
  }
  .EventsItemBox .EventsImg .OffTxt {
    width: 114px;
    height: 114px;
    top: calc( 50% - 57px);
    left: calc( 50% - 57px);
    padding: 45px 0 0 0;
    border-radius: 57px;
  }

  .EventsDetail img {
    width: 85% !important;
    max-width: 840px !important;
  }

  .HealthIntroBox {
    padding: 20px 0;
    margin: 55px 0 25px 0;
  }

  .HealthIntroItemBox {
    display: inline-block;
    width: 65vw;
    min-width: 500px;
  }
  .HealthIntroItemBox .Grid01, .HealthIntroItemBox .Grid02 {
    width: 100%;
  }
  .HealthIntroItemBox .Grid01 {
    text-align: center;
    padding: 0 0 110px 0;
  }
  .HealthIntroItemBox .Grid01 > .Img01 {
    right: 50%;
    bottom: 0px;
    transform: translate(50%, 0);
    width: 240px;
  }
  .HealthIntroItemBox .Grid01 > .bg01 {
    width: 100%;
    min-width: 500px;
    margin: 0 auto;
  }
  .HealthIntroItemBox .Grid02 {
    padding: 50px 0 0 0;
  }
  .HealthIntroItemBox .Grid02 .HealthIntroTxt {
    width: 100%;
    min-height: 160px;
    margin: 25px auto 20px auto;
  }

  .AboutBox .AboutBlock02 > .AboutPic {
    width: 50vw;
    background-position: 0 center;
  }

  .ProductListBox .Item {
    padding: 24px 20px 55px 20px;
  }
  .ProductListBox .Item .PDName {
    margin: 20px 0 15px 0;
  }
  .ProductListBox .Item .BtnGridBox {
    width: 310px;
    position: absolute;
    left: 0px;
    bottom: 0px;
  }

  .ProductDetailGrid {
    display: inline-block;
    width: 100%;
    max-width: 600px;
  }
  .ProductDetailGrid .GridBox {
    width: 100%;
  }
  .ProductDetailGrid .GridBox:first-child {
    width: 408px;
    margin: 0 auto 30px auto;
    text-align: center;
  }
  .ProductDetailGrid .ProductImg02 {
    width: 408px;
    margin: 0 auto;
  }

  .ProductDetailIntro .Title {
    margin: 0 0 60px 0;
  }

  .ExchangeListBox {
    max-width: 492px;
    margin: 20px auto 0px auto;
  }
  .ExchangeListBox .Item {
    padding: 20px 20px 58px 20px;
  }
  .ExchangeListBox .Item .BtnGridBox {
    position: absolute;
    bottom: 0px;
  }

  .CartListGrid {
    flex-wrap: wrap;
  }
  .CartListGrid .CartCell.Info {
    padding: 0 0px 0 0;
    min-width: 490px;
    min-height: 90px;
  }
  .CartListGrid .CartCell.Info .Price {
    margin: 0 0 10px 0;
  }
  .CartListGrid .CartCell.Qty {
    flex: 1;
    width: none;
    min-width: 468px;
    padding: 0 0 0 130px;
    text-align: left;
  }
  .CartListGrid .CartCell.Qty .QtyFun {
    margin: 0;
  }
  .CartListGrid .CartCell.Del {
    width: 60px;
  }

  .TotalGridBox {
    padding: 19px 75px 19px 0;
  }

  .HealthBox {
    width: 85%;
  }

  .HealthCardBox .HealthCardGrid {
    display: block;
  }
  .HealthCardBox .HealthCardGrid .HealthCard {
    width: 100%;
    margin: 0 0 30px 0;
  }

  .StoreBox {
    max-width: 620px;
  }
  .StoreBox .StoreItemBox .StoreItem {
    height: 150px;
    margin: 0 30px 60px 30px;
  }
}
@media screen and (max-width: 767px) {
  .IndexSlideBox {
    margin: 0 auto;
  }

  .AboutBox .AboutBlock01 {
    padding: 15px 0 0 0;
  }
  .AboutBox .AboutBlock01 > .AboutTxt {
    width: 100%;
    padding: 0px 0px 35px 0;
  }
  .AboutBox .AboutBlock01 > .AboutPic {
    width: 100%;
    height: 290px;
    position: relative;
  }
  .AboutBox .AboutBlock02 {
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0px 0 0 0;
    margin: 40px 0 0 0;
  }
  .AboutBox .AboutBlock02 > .AboutTxt {
    width: 100%;
    padding: 35px 0px 0px 0px;
  }
  .AboutBox .AboutBlock02 > .AboutPic {
    width: 100%;
    height: 290px;
    position: relative;
  }

  .ProductListBox {
    justify-content: flex-start;
    text-align: left;
    width: calc( 100% - 10px );
    max-width: 520px;
    margin: 50px auto 0px auto;
  }
  .ProductListBox .Item {
    width: calc( 50% - 10px );
    min-height: auto;
    padding: 24px 5px 47px 5px;
    margin: 0 5px 40px 5px;
  }
  .ProductListBox .Item .PDName {
    margin: 20px 0 18px 0;
  }
  .ProductListBox .Item .BtnGridBox {
    width: 100%;
    height: 50px;
  }

  .EventsBox.News {
    padding: 15px 0 5px 0;
  }
  .EventsBox.News .EventsInner {
    width: calc( 100% - 20px );
    margin: 0 auto;
  }

  .EventsDetail {
    margin: 20px auto 40px auto;
  }
  .EventsDetail img {
    width: 100% !important;
  }

  .ProductDetailGrid .GridBox:first-child {
    width: 100%;
    max-width: 480px;
  }
  .ProductDetailGrid .ProductImg02 {
    width: 100%;
  }

  .ProductInfoBox .Title {
    padding: 0 10px 10px 10px;
  }
  .ProductInfoBox .EventMsg {
    margin: 14px 0;
  }
  .ProductInfoBox .Desc {
    margin: 14px 0;
  }
  .ProductInfoBox .PriceBox .Discount {
    flex: 2;
  }
  .ProductInfoBox .PriceBox .Price {
    flex: 1;
  }
  .ProductInfoBox .QtyAndBuy {
    display: block;
    margin: 20px 0 10px 0;
  }
  .ProductInfoBox .QtyAndBuy button.BasicBtn1st {
    margin: 20px 0 0 0;
  }
  .ProductInfoBox .QtyFun {
    width: 160px;
    height: 40px;
  }
  .ProductInfoBox .QtyFun button {
    width: 40px !important;
    height: 40px !important;
  }
  .ProductInfoBox .QtyFun input {
    height: 40px !important;
  }

  .ProductDetailIntro {
    margin: 20px auto 45px auto;
  }
  .ProductDetailIntro .Title {
    margin: 0 0 40px 0;
  }

  .CartListGrid .CartCell.Pic {
    width: 110px;
  }
  .CartListGrid .CartCell.Info {
    min-width: 75%;
  }
  .CartListGrid .CartCell.Info .Name {
    height: auto;
    min-height: 49px;
    display: inline-block;
  }
  .CartListGrid .CartCell.Qty {
    min-width: 50%;
    padding: 0 0 0 110px;
  }
  .CartListGrid .CartCell.Del {
    width: 55px;
  }

  .TotalGridBox {
    padding: 19px 18px 19px 0;
  }
  .TotalGridBox .TotalGrid .TotalL {
    width: 46%;
    max-width: 150px;
  }
  .TotalGridBox .TotalGrid .TotalR {
    width: 46%;
    max-width: 150px;
  }

  .CreditCardTipremind {
    text-align: left;
  }

  .OrderDetailBtnBox {
    margin: 0 0 30px 0;
  }

  .HealthBox {
    width: 90%;
  }

  .HealthCardBox {
    display: block;
  }
  .HealthCardBox .HealthCardGrid {
    padding: 0 0px;
  }

  .JoinBox {
    padding: 0 0 15px 0;
  }
  .JoinBox .JoinGrid {
    display: block;
  }
  .JoinBox .JoinGrid .Flex1:first-child {
    margin: 0 0 30px 0;
  }
  .JoinBox .JoinGrid .Flex1:first-child img {
    margin: 10px auto;
  }
}
@media screen and (max-width: 700px) {
  .News .EventsItemBox {
    max-width: 500px;
  }
  .News .EventsItemBox .EventsItem {
    width: 100%;
    margin: 0 0px 40px 0px;
  }

  .Index .EventsItemBox {
    max-width: 500px;
    margin: 30px auto 0 auto;
  }
  .Index .EventsItemBox .EventsItem {
    display: inline-block;
    flex: none;
    width: 100%;
    height: auto;
    margin: 0 auto 35px auto;
  }

  .StoreBox {
    max-width: 290px;
    margin: 40px auto 0 auto;
  }
  .StoreBox .StoreItemBox .StoreItem {
    margin: 0 20px 30px 20px;
  }
}
@media screen and (max-width: 575px) {
  .SwiperStyle01 .swiper-slide {
    opacity: 1;
  }
  .SwiperStyle01 .swiper-button-next, .SwiperStyle01 .swiper-button-prev {
    width: 36px;
    height: 36px;
    background-size: auto 36px;
  }
  .SwiperStyle01 .swiper-button-next:focus, .SwiperStyle01 .swiper-button-prev:focus {
    outline: none;
  }
  .SwiperStyle01 .swiper-button-next {
    left: calc( 100% - 36px ) !important;
    background-position: -36px 0;
  }
  .SwiperStyle01 .swiper-button-prev {
    background-position: 0;
    left: 0 !important;
  }
  .SwiperStyle01 .swiper-pagination {
    bottom: -40px !important;
  }
  .SwiperStyle01 .swiper-pagination-bullet {
    margin: 0 12px;
  }

  .BestSellersBox {
    padding: 40px 0 20px 0;
    margin: 40px auto 15px 0;
  }

  .Product .BestSellersItemBox {
    width: 100%;
  }
  .Product .BestSellersItemBox .Item:first-child {
    margin: auto;
  }
  .Product .BestSellersItemBox .Item:last-child {
    margin: auto;
  }
  .Product .BestSellersItemBox .Item {
    margin: auto;
  }

  .SwiperStyle02 {
    width: 170%;
    height: auto;
    left: 50%;
    position: relative;
    transform: translate(-50%, 0);
    padding: 0 0 50px 0;
  }
  .SwiperStyle02 .swiper-pagination {
    bottom: 10px !important;
  }

  .BestSellersItemBox {
    width: 100%;
    margin: 20px auto 5px auto;
    text-align: center;
    overflow: hidden;
  }
  .BestSellersItemBox .Item:first-child {
    margin: auto;
  }
  .BestSellersItemBox .Item:last-child {
    margin: auto;
  }
  .BestSellersItemBox .Item {
    width: auto;
    padding: 18px 14px 0 14px;
    margin: auto;
  }

  .EventsBox.Index {
    padding: 10px 0 5px 0;
    margin: 60px auto 10px auto;
  }

  .Index .EventsItemBox {
    margin: 25px auto 0 auto;
  }

  .HealthIntroBox {
    padding: 0 0 20px 0;
    margin: 40px 0 25px 0;
  }

  .HealthIntroItemBox {
    display: inline-block;
    width: 100vw;
    min-width: 260px;
  }
  .HealthIntroItemBox .Grid01, .HealthIntroItemBox .Grid02 {
    width: 100%;
  }
  .HealthIntroItemBox .Grid01 {
    text-align: center;
    padding: 0 0 75px 0;
  }
  .HealthIntroItemBox .Grid01 > .Img01 {
    width: 200px;
  }
  .HealthIntroItemBox .Grid01 > .bg01 {
    width: 100%;
    min-width: 100%;
    margin: 0 auto;
  }
  .HealthIntroItemBox .Grid02 {
    padding: 35px 10px 0 10px;
  }
  .HealthIntroItemBox .Grid02 .HealthIntroTxt {
    width: 100%;
    margin: 25px auto 20px auto;
  }

  .ExchangeListBox {
    width: calc( 100% - 10px );
    max-width: 520px;
  }
  .ExchangeListBox .Item {
    width: calc( 50% - 10px );
    min-height: auto;
    padding: 20px 5px 47px 5px;
    margin: 0 5px 40px 5px;
  }
  .ExchangeListBox .Item .PDName {
    margin: 20px 0 15px 0;
  }
  .ExchangeListBox .Item .BtnGridBox {
    height: 50px;
    position: absolute;
    bottom: 0px;
  }

  .CartListGrid {
    padding: 12px 10px;
  }
  .CartListGrid .CartCell.Info {
    min-width: 130px;
    min-height: 90px;
  }
  .CartListGrid .CartCell.Qty {
    min-width: 100%;
    margin: 0 0 12px 0;
  }
  .CartListGrid .CartCell.Summary {
    width: none;
    min-width: calc( 100% - 50px );
    padding: 0 0 0 110px;
    text-align: left;
  }
  .CartListGrid .CartCell.Del {
    width: 50px;
  }
}
@media screen and (max-width: 320px) {
  .ProductInfoBox .PriceBox .Discount {
    flex: 2;
  }
  .ProductInfoBox .PriceBox .Price {
    flex: 1;
  }
}
.LoadingBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.LoadingBox .LoadingInner {
  width: 0px;
  height: 0px;
  position: relative;
  left: 0;
  top: 50%;
  margin: 0 auto;
}
.LoadingBox .LoadingInner .enterLoading {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.LoadingBox.Off {
  display: none;
}

.LoadingBox.Index {
  background: #FFFFFF;
}

.LoadingBox.Program {
  background: rgba(255, 255, 255, 0.8);
}

.waitingBg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
}
.waitingBg::after {
  display: inline-block;
}

.waitingBg.On {
  display: block;
}

.HeaderBg.Hide {
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.28, 0.29, 0.06, 0.88) 0.1s;
}

.HeaderBg {
  width: 100vw;
  height: 115px;
  position: fixed;
  top: 0;
  background: #FFFFFF;
  z-index: 98;
  transition: all 0.3s linear 0s;
}
.HeaderBg .LogoBox {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 60px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.HeaderBg .LogoBox img {
  width: 100%;
  max-width: 240px;
  height: auto;
}
.HeaderBg .MenuBar {
  width: 100%;
  height: 60px;
  position: relative;
  background: #333333;
}

.LogoBox .Grid:nth-child(1), .LogoBox .Grid:nth-child(3) {
  width: 322px;
  text-align: right;
}

.SchBox input, .SchBox .SchTxt {
  width: 200px;
}
.SchBox button, .SchBox .BasicBtn2nd {
  min-width: 102px;
  margin: 6px 0;
}
.SchBox .SchBarOpen {
  display: none;
  width: 32px;
  height: 32px;
  background-image: url("../images/btn05.png");
  background-repeat: no-repeat;
}

.SchBarBox.Open {
  display: flex;
}

.SchBarBox {
  display: none;
  width: 100%;
  background-color: #277E1F;
}
.SchBarBox .SchGridBox {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 56px;
}
.SchBarBox .SchGridBox input, .SchBarBox .SchGridBox .SchTxt {
  width: calc( 100% - 122px );
  margin: 0 !important;
}
.SchBarBox .SchGridBox button, .SchBarBox .SchGridBox .BasicBtn2nd {
  min-width: 102px;
  margin: 6px 0 !important;
}
.SchBarBox .SchGridBox .BtnIconS {
  margin: 0px 5px 0 0;
}

.CommonToolsBg.Open {
  right: 0;
}

.CommonToolsBg {
  position: fixed;
  right: -270px;
  bottom: calc( 50vh - 240px );
  z-index: 99;
  pointer-events: none;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
.CommonToolsBg .CommonToolsBox {
  display: flex;
  align-items: center;
  text-align: left;
}
.CommonToolsBg .CommonToolsBox > .ToolsBox {
  width: 68px;
  background: #333333;
  text-align: center;
  pointer-events: auto;
  font-size: 13px;
}
.CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem {
  display: flex;
  align-items: center;
  width: 68px;
  height: 69px;
  border-bottom: 1px solid #515151;
}
.CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem:last-child {
  border-bottom: none;
}
.CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem:first-child {
  padding: 1px 0 0 0;
}
.CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.Good, .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.Point, .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.MobileCart {
  display: none;
}
.CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsBtn {
  display: inline-block;
  margin: 0 auto;
  color: #FFFFFF;
  line-height: 1.1;
  text-decoration: none;
}
.CommonToolsBg .CommonToolsBox > .ToolsBox .CartQty {
  font-size: 15px;
}
.CommonToolsBg .CommonToolsBox > .CartBox {
  width: 270px;
  background: #000000;
  color: #FFFFFF;
  pointer-events: auto;
}
.CommonToolsBg .CommonToolsBox > .CartBox .TitleBar {
  height: 40px;
  position: relative;
}
.CommonToolsBg .CommonToolsBox > .CartBox .TitleBar .CloseBtn {
  width: 32px;
  height: 32px;
  position: absolute;
  right: 14px;
  top: 7px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background-image: url("../images/icon_btn01.svg");
  background-repeat: no-repeat;
  background-position: -256px 0;
  background-size: auto 32px;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList {
  width: 100%;
  padding: 0px 5px 0px 14px;
  height: 380px;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList .GridBox:first-child {
  margin: 5px 0 18px 0;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList .GridBox {
  display: flex;
  margin: 19px 0 18px 0;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList .GridBox .Grid01 {
  width: 112px;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList .GridBox .Grid02 {
  flex: 1;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList .GridBox .Grid02 p {
  min-height: 50px;
  margin: 0 0 10px 0;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList .GridBox .Grid02 .SubBox {
  display: inline-block;
  margin: 0 12px 0 0;
}
.CommonToolsBg .CommonToolsBox > .CartBox .buyList .PDImg {
  width: 100px;
  height: auto;
}
.CommonToolsBg .CommonToolsBox > .CartBox .CheckoutBtn {
  display: block;
  width: 100%;
  height: 50px;
  margin: 5px 0 0 0;
  background: #BF4080;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
}

.BreadCrumbsBg {
  width: 100%;
  height: 45px;
  background-color: #F0F0F0;
  text-align: left;
}
.BreadCrumbsBg .BreadCrumbsBox {
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 0;
  line-height: 20px;
  font-weight: 300;
}

.CommonBanner {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0px auto;
}
.CommonBanner img {
  width: 100%;
  height: auto;
}

.CommonTitleBox {
  width: 100%;
  text-align: center;
  margin: 110px auto 60px auto;
}

.ToolsIcon {
  display: block;
  width: 36px;
  height: 36px;
  vertical-align: middle;
  margin: 0px auto;
  background-image: url("../images/icon_tool.svg");
  background-repeat: no-repeat;
  background-size: auto 36px;
}

.ToolsIcon.Cart {
  background-position: -36px 0;
}

.ToolsIcon.Line {
  background-position: -72px 0;
}

.ToolsIcon.Msg {
  background-position: -108px 0;
}

.ToolsIcon.Top {
  background-position: -144px 0;
}

.ToolsIcon.Good, .ToolsIcon.Point, .ToolsIcon.Cart.Mobile {
  width: 32px;
  height: 32px;
  background-size: auto 32px;
}

.ToolsIcon.Good {
  background-position: -160px 0;
}

.ToolsIcon.Point {
  background-position: -192px 0;
}

.ToolsIcon.Cart.Mobile {
  background-position: -224px 0;
}

.SocialItemBox {
  display: inline-block;
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  padding: 0 0 60px 0;
  margin: 50px 0 0 0;
  background: #9DBA06;
}
.SocialItemBox .SocialItemBoxBlock {
  width: 100%;
  height: 140px;
  position: absolute;
  top: 0;
  z-index: 0;
  background: #FFFFFF;
}
.SocialItemBox .SocialItemInner {
  display: inline-block;
  width: 100%;
  height: auto;
  max-width: 1200px;
  position: relative;
  top: 0;
  margin: 0 auto;
  z-index: 1;
  background-image: url("../images/index/bg01.jpg");
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.SocialItemBox .SocialGridBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  height: 280px;
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.65);
}
.SocialItemBox .SocialGridBox .Grid01 {
  flex: 1;
  text-align: center;
  padding: 40px 0 20px 0;
  background: rgba(0, 0, 0, 0.65);
}
.SocialItemBox .SocialGridBox .Grid01 p {
  width: 90%;
  max-width: 230px;
  margin: 25px auto 0 auto;
}
.SocialItemBox .SocialGridBox .Grid02 {
  flex: 2;
  text-align: center;
  padding: 85px 0 0 0;
}
.SocialItemBox .SocialGridBox .Grid02 .SocialItem {
  display: inline-block;
  width: 110px;
  margin: 0 28px;
  padding: 0;
  text-decoration: none;
  text-align: center;
}
.SocialItemBox .SocialGridBox .Grid02 .SocialItem > .PicIcon {
  margin: 10px auto 5px auto !important;
}
.SocialItemBox .SocialGridBox .Grid02 .SocialItem.TeL {
  cursor: pointer;
  position: relative;
}
.SocialItemBox .SocialGridBox .Grid02 .SocialItem.TeL .ContactTip.Open {
  display: inline-block;
}
.SocialItemBox .SocialGridBox .Grid02 .SocialItem.TeL .ContactTip {
  display: none;
  width: 290px;
  height: 63px;
  padding: 21px 0 0 0;
  position: absolute;
  bottom: -72px;
  left: calc( 50% - 140px );
  border-radius: 8px;
  cursor: text;
  text-align: center;
  color: #FFFFFF;
  background-image: url("../images/bg_pic01.png");
  background-repeat: no-repeat;
  background-position: 0;
}
.SocialItemBox .SocialGridBox .Grid02 .SocialItem.PadUse {
  display: none;
}

.FooterBox {
  width: 100%;
  padding: 60px 0 45px 0;
  margin: 0 auto;
  background: #333333;
  text-align: left;
  position: relative;
  top: 0;
}
.FooterBox .FooterInner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  color: #FFFFFF;
}
.FooterBox .GridBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  padding: 0 30px;
}
.FooterBox .FooterGrid01 {
  flex: 1;
  padding: 0 30px 0 0;
  font-weight: 500 !important;
  text-decoration: !important;
}
.FooterBox .FooterGrid01 p {
  margin: 5px 0 2px 0;
}
.FooterBox .FooterGrid02 {
  width: 700px;
}
.FooterBox .FooterGrid02 .SiteMapBox {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  margin: 0 auto 30px auto;
}
.FooterBox .FooterGrid02 .SiteMapBox .LinkBox {
  width: 140px;
  padding: 0 6px;
  margin: 0px 0px 20px 0px;
  text-align: center;
}
.FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li {
  margin: 6px 0;
}
.FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li:first-child {
  margin: 0 0 12px 0;
}
.FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li > a {
  text-decoration: none;
}
.FooterBox .FooterGrid02 .SiteMapBox .LinkBox > li > a:hover {
  text-decoration: underline;
}
.FooterBox .CopyrightBox {
  border-top: 1px solid #CCCCCC;
  padding: 18px 30px 0 30px;
}
.FooterBox .CopyrightBox .CopyrightGrid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
}
.FooterBox .CopyrightBox .CopyrightGrid .Txt01 {
  flex: 3;
  text-align: left;
}
.FooterBox .CopyrightBox .CopyrightGrid .Txt02 {
  flex: 1;
  text-align: right;
}
.FooterBox .CopyrightBox .CopyrightGrid .Txt02 > a {
  display: block;
  text-decoration: none !important;
}

.PicIcon {
  display: inline-block;
  vertical-align: top;
  margin: 10px 10px;
  background-repeat: no-repeat;
}

.ContactPicIcon {
  display: block !important;
  width: 64px;
  height: 64px;
  margin: 10px auto;
  vertical-align: top;
  background-image: url("../images/icon_contact.svg");
  background-repeat: no-repeat;
  background-size: auto 64px;
}

.ContactPicIcon.LINE {
  background-position: 0;
}

.ContactPicIcon.CONTACT {
  background-position: -64px 0;
}

.ContactPicIcon.MSG {
  background-position: -128px 0px;
}

.ContactPicIcon.TEL {
  background-position: -192px 0px;
}

.BtnIcon {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url("../images/icon_tool.svg");
  background-repeat: no-repeat;
  background-size: auto 36px;
}

.BtnIcon.Detail {
  background-position: 0px 0;
}

.BtnIcon.Cart {
  background-position: -36px 0;
}

.Disable .BtnIcon.Cart {
  opacity: 0.7;
}

.BtnIconS {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: top;
  margin: 1px 5px 0 0;
  background-image: url("../images/icon_btn01.svg");
  background-repeat: no-repeat;
  background-size: auto 22px;
}

.BtnIconS.BackArrow {
  background-position: 0;
}

.BtnIconS.Bag {
  background-position: -22px 0;
}

.BtnIconS.People {
  background-position: -44px 0;
}

.BtnIconS.NextArrow {
  background-position: -66px 0;
}

.BtnIconS.Cart {
  background-position: -88px 0;
}

.BtnIconS.Submit {
  background-position: -110px 0;
}

.BtnIconS.Search {
  background-position: -132px 0;
}

.BtnIconS.Order {
  background-position: -154px 0;
}

.BtnIconS.X {
  background-position: -176px 0;
}

.BtnIconS.Ok {
  background-position: -198px 0;
}

.BtnIconXS {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin: 0 5px 0 0;
  background-image: url("../images/icon_btn02.svg");
  background-repeat: no-repeat;
  background-size: auto 18px;
}

.BtnIconXS.Up {
  background-position: 0;
}

.BtnIconXS.Change {
  background-position: -18px 0;
}

.BtnIconXS.ArrowDown {
  background-position: -36px 1px;
}

.BtnIconXS.Search {
  background-position: -54px 0;
}

.StepIcon {
  background-image: url("../images/icon_cart.svg");
  background-repeat: no-repeat;
  background-size: auto 64px;
}

.StepIcon.Cart {
  background-position: 0 0;
}

.StepIcon.Info {
  background-position: -64px 0;
}

.StepIcon.Over {
  background-position: -128px 0;
}

.StepBox {
  width: 82%;
  max-width: 350px;
  position: relative;
  margin: 10px auto 70px auto;
}
.StepBox::after {
  display: block;
  width: calc( 100% - 64px );
  height: 1px;
  content: "";
  position: absolute;
  left: 32px;
  top: 32px;
  z-index: -1;
  background: #CCCCCC;
}
.StepBox .StepGrid {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.StepBox .StepItem {
  text-align: center;
  color: #CCCCCC;
}
.StepBox .StepItem .StepIcon {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  margin: 0 auto 15px auto;
  background-color: #CCCCCC;
}
.StepBox .StepItem.In {
  color: #339999;
}
.StepBox .StepItem.In .StepIcon {
  background-color: #339999;
}

.ClassTabWrapper {
  width: 100%;
  height: 70px;
  position: relative;
  margin: 20px 0 60px 0;
  overflow: hidden;
}

.ClassTabOuter.NoScroll {
  left: 50%;
  transform: translate(-50%, 0);
}

.ClassTabOuter {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 1px solid #CCCCCC;
}

.ClassTabInner {
  text-align: left;
  white-space: nowrap;
}
.ClassTabInner .ClassTab {
  display: inline-block;
  width: 200px;
  height: 68px;
  vertical-align: top;
  position: relative;
  white-space: pre-wrap;
  padding: 5px 15px 6px 15px;
  margin: 0 -2px;
  border-right: 1px solid #CCCCCC;
  line-height: 1.3;
  font-weight: 500;
  color: #333333;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ClassTabInner .ClassTab .TabTxt {
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  color: inherit;
}
.ClassTabInner .ClassTab::before {
  display: inline-block;
  width: 0px;
  height: 100%;
  content: "";
  vertical-align: middle;
  background: #eee;
}
.ClassTabInner .In.ClassTab {
  background: #BF4080;
  color: #FFFFFF;
}
.ClassTabInner .In.ClassTab::after {
  display: inline-block;
}

.QtyFun {
  display: flex;
  align-items: center;
  width: 120px;
  height: 35px;
  overflow: hidden;
  font-family: "Roboto";
}
.QtyFun button, .QtyFun input {
  display: inline-block;
}
.QtyFun button {
  width: 35px;
  height: 35px !important;
  background-color: #333333;
  border: 1px solid #333333;
}
.QtyFun input {
  width: calc( 100% - 68px );
  height: 35px !important;
  text-align: center;
  border-left: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  margin: 0 !important;
}
.QtyFun button i {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 5px 0 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/icon_pic02.png");
}
.QtyFun button.Add i {
  background-position: 0;
}
.QtyFun button.Cut i {
  background-position: -20px 0;
}
.QtyFun select {
  width: 120px;
  padding: 0 0 0 10px;
}

.PageInTabBox {
  display: inline-block;
  height: 36px;
  text-align: center;
  margin: 20px auto 60px auto;
}

.PageInTab {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  width: 100%;
}

.PageInView {
  display: inline-block;
  height: 24px;
  padding: 0px 0 8px 0;
}
.PageInView li {
  display: inline-block;
  width: 20px;
  height: 24px;
  position: relative;
  margin: 0 8px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}
.PageInView li a {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.PageInView li:hover a {
  text-decoration: underline;
}
.PageInView .Act a {
  color: #BF4080;
  text-decoration: underline;
}

.PageInPrev, .PageInNext {
  display: inline-block;
  height: 36px;
  margin: 0 2px;
}

.PageInPrev a, .PageInNext a {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: url("../images/btn03.png");
  background-repeat: no-repeat;
  background-position: 0 0;
}

.PageInNext a {
  background-position: -36px 0;
}

.PopUpBg.DetailsPop .PopUpBox {
  max-width: 1440px;
  min-width: 1440px;
  padding: 55px 115px 20px 115px;
  background-color: #FFFFFF;
  border: 4px solid #277E1F;
}

.PopUpBg.StatusPop .PopUpBox {
  max-width: 1004px;
  min-width: 600px;
  padding: 60px 50px 30px 50px;
  border-radius: 12px;
  background-color: rgba(191, 64, 128, 0.85);
  color: #FFFFFF;
}

.PopUpBg.GifPop .PopUpBox {
  padding: 10px 28px 0px 28px;
  border-radius: 12px;
  background-color: #CC6699;
  color: #FFFFFF;
}

.PopUpBg.Open {
  display: block;
}

.PopUpBg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.75);
}

.PopUpCloseBg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
}

.PopUpBox {
  display: inline-block;
  width: auto;
  height: auto;
  position: relative;
  z-index: 2;
  vertical-align: middle;
  text-align: center;
}

.PopUpContent {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

.In.PopUpCut {
  display: block;
}

.PopUpCut {
  display: none;
}
.PopUpCut > h1 {
  margin: 0 0 20px 0;
}
.PopUpCut > p {
  line-height: 1.6;
}
.PopUpCut > button {
  margin: 40px 0 0 0;
}
.PopUpCut img {
  margin: 0 auto;
}

.DetailsPop .PopUpCloseBtn {
  display: inline-block;
}

.PopUpCloseBtn {
  display: none;
  width: 48px;
  height: 48px;
  cursor: pointer;
  position: absolute;
  top: -60px;
  right: 0;
  border-radius: 24px;
  text-align: center;
  background: #277E1F;
  z-index: 9;
  transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
}
.PopUpCloseBtn::after {
  display: inline-block;
  width: 40px;
  height: 40px;
  content: "";
  margin: 4px auto;
  background-image: url("../images/icon_btn01.svg");
  background-repeat: no-repeat;
  background-position: -320px 0;
  background-size: auto 40px;
}

.PageControlBtnBox {
  margin: 40px 0 0 0;
}

.ImportantTxt {
  padding: 8px 9px;
  margin: 5px 0;
  text-align: left;
  font-weight: 500;
  color: #FFFFFF;
  background-color: #BF4080;
}

.TxtIndent {
  display: block;
  padding: 0 15px;
  text-align: left;
}

.ContentNoBottomMarginUse {
  display: inline-block;
  width: 100%;
  height: 60px;
  margin: 0;
}

.CommonGridBox {
  display: flex;
}
.CommonGridBox .Grid {
  width: 50%;
}
.CommonGridBox .Grid:first-child {
  margin: 0 30px 0 0;
}
.CommonGridBox .Grid:last-child {
  margin: 0 0 0 30px;
}

#Mv01, #Mv02 {
  position: relative;
  max-width: 960px;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin: 0 auto;
}

#Mv01 iframe, #Mv01 object, #Mv01 embed, #Mv02 iframe, #Mv02 object, #Mv02 embed {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1559px) {
  .SocialItemBox .SocialItemInner {
    width: 85%;
  }
  .SocialItemBox .SocialGridBox .Grid02 .SocialItem {
    width: 100px;
    margin: 0 10px;
  }

  .FooterBox .FooterInner {
    width: 85%;
  }
  .FooterBox .FooterGrid01 {
    flex: 1;
  }
  .FooterBox .FooterGrid02 {
    width: 560px;
  }
  .FooterBox .FooterGrid02 .SiteMapBox {
    flex-wrap: wrap;
  }

  .PopUpBg.DetailsPop .PopUpBox {
    max-width: 1440px;
    min-width: 90%;
    width: 90%;
    padding: 55px 40px 20px 40px;
  }

  .BtnIcon {
    width: 30px;
    height: 30px;
    background-size: auto 30px;
  }

  .BtnIcon.Cart {
    background-position: -30px 0;
  }
}
@media screen and (max-width: 1199px) {
  .HeaderBg .LogoBox {
    padding: 0 35px;
  }
  .HeaderBg .MenuBar {
    display: none;
  }

  .LogoBox .Grid:nth-child(1) {
    display: none;
  }
  .LogoBox .Grid:nth-child(2) {
    text-align: left;
  }
  .LogoBox .Grid:nth-child(3) {
    width: 40%;
    text-align: right;
    padding: 0 9% 0 0;
  }

  .SchBox input, .SchBox .SchTxt {
    display: none !important;
  }
  .SchBox button, .SchBox .BasicBtn2nd {
    display: none;
  }
  .SchBox .SchBarOpen {
    display: inline-block;
  }

  .BreadCrumbsBg .BreadCrumbsBox {
    width: 90%;
  }

  .CommonBanner {
    margin: 0px auto;
  }

  .CommonTitleBox {
    margin: 90px auto 40px auto;
  }

  .FooterBox {
    padding: 50px 0 45px 0;
  }
  .FooterBox .FooterInner {
    width: 85%;
  }
  .FooterBox .FooterGrid02 {
    width: 420px;
  }
}
@media screen and (max-width: 959px) {
  .HeaderBg {
    height: 77px;
  }
  .HeaderBg .LogoBox img {
    width: 204px;
    max-width: 204px;
    height: auto;
  }

  .CommonTitleBox {
    margin: 80px auto 40px auto;
  }

  .PicIcon.LINE, .PicIcon.MSG, .PicIcon.TEL, .PicIcon.CONTACT {
    display: block !important;
    width: 58px;
    height: 58px;
    background-size: auto 58px;
  }

  .PicIcon.LINE {
    background-image: url("../images/icon_white.svg");
    background-position: 0;
  }

  .PicIcon.MSG {
    background-image: url("../images/icon_white.svg");
    background-position: -58px 0;
  }

  .PicIcon.TEL {
    background-image: url("../images/icon_white.svg");
    background-position: -116px 0px;
  }

  .PicIcon.CONTACT {
    background-image: url("../images/icon_white.svg");
    background-position: -174px 0px;
  }

  .ContactPicIcon {
    width: 58px;
    height: 58px;
    background-size: auto 58px;
  }

  .ContactPicIcon.LINE {
    background-position: 0;
  }

  .ContactPicIcon.CONTACT {
    background-position: -58px 0;
  }

  .ContactPicIcon.MSG {
    background-position: -116px 0px;
  }

  .ContactPicIcon.TEL {
    background-position: -174px 0px;
  }

  .SocialItemBox {
    padding: 0 0 0px 0;
    margin: 35px 0 0px 0;
    background: #C69B55;
  }
  .SocialItemBox .SocialItemInner {
    width: 100%;
  }
  .SocialItemBox .SocialGridBox {
    height: 280px;
  }
  .SocialItemBox .SocialGridBox .Grid01 {
    display: inline-block;
  }
  .SocialItemBox .SocialGridBox .Grid01 p {
    width: calc( 100% - 60px );
  }
  .SocialItemBox .SocialGridBox .Grid02 {
    display: inline-block;
  }
  .SocialItemBox .SocialGridBox .Grid02 .SocialItem {
    margin: 0 9px;
  }
  .SocialItemBox .SocialGridBox .Grid02 .SocialItem.TeL {
    display: none;
  }
  .SocialItemBox .SocialGridBox .Grid02 .SocialItem.PadUse {
    display: inline-block;
  }

  .FooterBox {
    padding: 30px 0 30px 0;
  }
  .FooterBox .FooterInner {
    width: 100%;
  }
  .FooterBox .FooterGrid01 {
    flex: 1;
  }
  .FooterBox .FooterGrid02 {
    width: 420px;
  }
  .FooterBox .FooterGrid02 .SiteMapBox {
    margin: 0 auto;
  }

  .ContentNoBottomMarginUse {
    height: 45px;
  }

  .CommonGridBox {
    display: block;
  }
  .CommonGridBox .Grid {
    width: 100%;
  }
  .CommonGridBox .Grid:first-child {
    margin: 0 0px 0 0;
  }
  .CommonGridBox .Grid:last-child {
    margin: 0 0 0 0px;
  }
}
@media screen and (max-width: 767px) {
  .LoadingBox .LoadingInner .enterLoading {
    width: 80vw;
    max-width: 360px;
    height: auto;
  }

  .HeaderBg .LogoBox {
    padding: 0 5%;
  }
  .HeaderBg .LogoBox img {
    width: 84%;
    max-width: 180px;
    min-width: 160px;
    height: auto;
  }

  .LogoBox .Grid:nth-child(3) {
    padding: 0 62px 0 0;
  }

  .SchBarBox .SchGridBox {
    padding: 0 12px;
  }
  .SchBarBox .SchGridBox input, .SchBarBox .SchGridBox .SchTxt {
    width: calc( 100% - 114px );
  }

  .CommonToolsBg.Open {
    left: 0;
  }

  .CommonToolsBg {
    left: 0;
    bottom: 0;
  }
  .CommonToolsBg .CommonToolsBox {
    display: block;
  }
  .CommonToolsBg .CommonToolsBox > .ToolsBox {
    width: 100vw;
    height: 61px;
    background: #C5538C;
    padding: 2px 0 0 0;
    display: flex;
    justify-content: space-around;
  }
  .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem {
    flex-wrap: wrap;
    width: none;
    height: 55px;
    border-bottom: none;
  }
  .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem .CartShowBtn .ToolsIcon, .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem .CartShowBtn .CartQty {
    display: inline-block !important;
    vertical-align: middle;
  }
  .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem .CartShowBtn .CartQty {
    padding: 3px 0 0 0;
  }
  .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.Good, .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.Point, .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.MobileCart {
    display: flex;
  }
  .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.Line, .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.Msg, .CommonToolsBg .CommonToolsBox > .ToolsBox .ToolsItem.Cart {
    display: none;
  }
  .CommonToolsBg .CommonToolsBox > .CartBox {
    display: none;
  }

  .BreadCrumbsBg {
    display: none;
  }

  .CommonTitleBox {
    margin: 60px auto 25px auto;
  }

  .ToolsIcon.Top {
    width: 32px;
    height: 32px;
    background-size: auto 32px;
    background-position: -256px 0;
  }

  .SocialItemBox .SocialItemInner {
    width: 100%;
    background-size: 800px auto;
  }
  .SocialItemBox .SocialGridBox {
    height: auto;
    display: block;
  }
  .SocialItemBox .SocialGridBox .Grid01 {
    flex: none;
    width: 100%;
    padding: 10px 0 25px 0;
  }
  .SocialItemBox .SocialGridBox .Grid01 .IndexTitle {
    margin: 20px auto 15px auto;
  }
  .SocialItemBox .SocialGridBox .Grid01 p {
    width: calc( 100% - 60px );
    max-width: 450px;
    margin: 0px auto 0 auto;
  }
  .SocialItemBox .SocialGridBox .Grid02 {
    flex: none;
    width: 100%;
    padding: 30px 0 30px 0;
  }
  .SocialItemBox .SocialGridBox .Grid02 .SocialItem {
    margin: 0 8px;
  }

  .FooterBox {
    padding: 30px 0 75px 0;
    background: #277E1F;
  }
  .FooterBox .FooterInner {
    width: 90%;
  }
  .FooterBox .GridBox {
    padding: 0 0 18px 0;
  }
  .FooterBox .FooterGrid01 {
    text-align: center;
  }
  .FooterBox .FooterGrid02 {
    display: none;
  }
  .FooterBox .CopyrightBox {
    padding: 15px 16px 0 16px;
  }
  .FooterBox .CopyrightBox .CopyrightGrid {
    display: block;
  }
  .FooterBox .CopyrightBox .CopyrightGrid .Txt01 {
    flex: none;
    width: 100%;
    text-align: center;
  }
  .FooterBox .CopyrightBox .CopyrightGrid .Txt02 {
    flex: none;
    width: 100%;
    text-align: center;
  }

  .StepIcon {
    background-size: auto 48px;
  }

  .StepIcon.Cart {
    background-position: 0 0;
  }

  .StepIcon.Info {
    background-position: -48px 0;
  }

  .StepIcon.Over {
    background-position: -96px 0;
  }

  .StepBox .StepItem .StepIcon {
    width: 48px;
    height: 48px;
    margin: 0 auto 15px auto;
  }

  .PopUpBg.DetailsPop .PopUpBox {
    max-width: 1440px;
    min-width: 100%;
    width: 100%;
    padding: 90px 10px 20px 10px;
    margin: 0;
    border: none;
  }

  .PopUpBg.StatusPop .PopUpBox {
    max-width: 1004px;
    min-width: 88%;
    width: 88%;
  }

  .PopUpBox.JustGif {
    padding: 25px 5vw 25px 5vw;
  }

  .PopUpCloseBtn {
    width: 36px;
    height: 36px;
    top: 30px;
    right: 0;
  }
  .PopUpCloseBtn::after {
    width: 28px;
    height: 28px;
    margin: 4px auto;
    background-position: -224px 0;
    background-size: auto 28px;
  }
}
@media screen and (max-width: 575px) {
  .SocialItemBox .SocialGridBox .Grid02 {
    max-width: 280px;
    padding: 20px 0 0px 0;
    margin: 0 auto;
  }
  .SocialItemBox .SocialGridBox .Grid02 .SocialItem {
    margin: 0px 8px 30px 8px;
  }
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}

.lds-ellipsis span {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #339999;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis span:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.8s infinite;
}

.lds-ellipsis span:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.8s infinite;
}

.lds-ellipsis span:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.8s infinite;
}

.lds-ellipsis span:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.8s infinite;
}

@-webkit-keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-ms-keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@-moz-keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@-ms-keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@-webkit-keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@-moz-keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@-ms-keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
.BasicBtn {
  display: inline-block;
  width: 100%;
  margin: 10px 0;
}

.BtnGridBox {
  display: flex;
  margin: 15px 0 0 0;
}
.BtnGridBox .BtnGrid {
  flex: 1;
}

.BasicBtn1st, a.BasicBtn1st, button.BasicBtn1st {
  display: inline-block;
  min-width: 150px;
  height: 45px;
  position: relative;
  padding: 12px 36px 10px 32px;
  vertical-align: middle;
  background: #333333;
  overflow: hidden;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
.BasicBtn1st::after, a.BasicBtn1st::after, button.BasicBtn1st::after {
  display: inline-block;
  content: "";
  width: 250px;
  height: 600px;
  background: #BF4080;
  position: absolute;
  top: 0px;
  left: -250px;
  transition: all 0.35s ease-Out;
}
.BasicBtn1st div, a.BasicBtn1st div, button.BasicBtn1st div {
  position: relative;
  z-index: 2;
}

.BasicBtn1st:hover::after, a.BasicBtn1st:hover::after, button.BasicBtn1st:hover::after {
  left: 0px;
}

.NoHover.BasicBtn1st:hover::after, a.NoHover.BasicBtn1st:hover::after, button.NoHover.BasicBtn1st:hover::after {
  display: none;
}

.BasicBtn2nd, a.BasicBtn2nd, button.BasicBtn2nd {
  display: inline-block;
  min-width: 130px;
  height: 40px;
  position: relative;
  padding: 1px 30px 2px 24px;
  margin: 6px 10px;
  vertical-align: middle;
  background: #333333;
  overflow: hidden;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}
.BasicBtn2nd::after, a.BasicBtn2nd::after, button.BasicBtn2nd::after {
  display: inline-block;
  content: "";
  width: 250px;
  height: 600px;
  background: #BF4080;
  position: absolute;
  top: 0px;
  left: -250px;
  transition: all 0.35s ease-Out;
}
.BasicBtn2nd div, a.BasicBtn2nd div, button.BasicBtn2nd div {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}

.BasicBtn2nd:hover::after, a.BasicBtn2nd:hover::after, button.BasicBtn2nd:hover::after {
  left: 0px;
}

.BasicBtn2nd:first-child {
  margin: 6px 10px 6px 0;
}

.BasicBtn2nd:last-child {
  margin: 6px 0px 6px 10px;
}

.BasicBtn3rd {
  display: inline-block;
  margin: 20px 0 0 0;
}
.BasicBtn3rd span {
  display: inline-block;
}
.BasicBtn3rd::after {
  display: inline-block;
  content: " ";
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin: 0 3px;
  background-image: url("../images/icon_arrow.svg");
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: -80px 0;
}

.JoinBtn {
  display: block;
  margin: 15px auto;
}

@media screen and (max-width: 1199px) {
  .BasicBtn2nd small, a.BasicBtn2nd small, button.BasicBtn2nd small {
    margin: 4px 0 0 5px;
  }
}
@media screen and (max-width: 1024px) {
  .BasicBtn1st::after, a.BasicBtn1st::after, button.BasicBtn1st::after {
    transition: none;
  }

  .BasicBtn1st:hover::after, a.BasicBtn1st:hover::after, button.BasicBtn1st:hover::after {
    left: none;
    display: none;
  }

  .BasicBtn2nd::after, a.BasicBtn2nd::after, button.BasicBtn2nd::after {
    transition: none;
  }

  .BasicBtn2nd:hover::after, a.BasicBtn2nd:hover::after, button.BasicBtn2nd:hover::after {
    left: none;
    display: none;
  }
}
@media screen and (max-width: 959px) {
  .GlobalMenuBtn {
    display: inline-block;
  }

  .GlobalMenuBtn.Close {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .BtnGridBox {
    margin: 8px 0 0 0;
  }

  .BasicBtn1st, a.BasicBtn1st, button.BasicBtn1st {
    min-width: 128px;
    height: 40px;
    padding: 11px 24px 8px 18px;
  }

  .BasicBtn2nd, a.BasicBtn2nd, button.BasicBtn2nd {
    min-width: 120px;
    height: 36px;
    padding: 10px 28px 8px 22px;
  }
}
input:not([type="checkbox"]):not([type=radio]):not([type=button]), textarea, select {
  display: inline-block;
  height: 35px;
  padding: 4px 6px 4px 6px;
  margin: 7px 6px 8px 0px;
  border-radius: 0;
  -webkit-appearance: none;
  font-family: "Noto Sans TC";
  line-height: 1.3;
  font-weight: 300;
  border: 1px solid #CCCCCC;
}

input:not([type="checkbox"]):not([type=radio]):not([type=button]).Err, textarea.Err, select.Err {
  border: 1px solid #BF4080;
}

textarea {
  min-height: 100px;
}

.SelectBox {
  display: inline-block;
  height: 35px;
  position: relative;
  left: 0;
  top: 0;
  margin: 7px 6px 8px 0px;
}
.SelectBox select {
  width: 100%;
  padding: 4px 42px 4px 6px !important;
  margin: 0 !important;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.SelectBox select::-ms-expand {
  display: none;
}
.SelectBox::before {
  display: inline-block;
  width: 35px;
  height: 35px;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  content: "";
  pointer-events: none;
  background-color: #333333;
}
.SelectBox::after {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  content: "";
  pointer-events: none;
  background-image: url("../images/icon_pic02.png");
  background-repeat: no-repeat;
  background-size: auto 20px;
  background-position: -40px 0;
}

.CustomRadioBox {
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 7px 6px 8px 0px;
}
.CustomRadioBox > label {
  display: inline-block;
  min-width: 133px;
  height: 44px;
  border: 1px solid #777777;
  background-color: #FFFFFF;
  color: #666666;
  border-radius: 3px;
  line-height: 42px;
  cursor: pointer;
}
.CustomRadioBox > input[type=radio] {
  display: none !important;
  width: 0;
  height: 0px;
}
.CustomRadioBox > input[type="radio"]:checked + label {
  border: 1px solid #277E1F;
  background-color: #277E1F;
  color: #FFFFFF;
}
.CustomRadioBox > input[type="radio"]:checked + label i {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  right: 1px;
  bottom: 1px;
  background-image: url("../images/form_pic.svg");
  background-size: auto 24px;
  background-position: -72px 0;
  background-repeat: no-repeat;
}

.CustomRadioBox.Disabled > label {
  border: 1px solid #777777;
  background-color: #CCCCCC;
  cursor: not-allowed;
}
.CustomRadioBox.Disabled > input[type="radio"] + label i {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  right: 1px;
  bottom: 1px;
  background-image: url("../images/form_pic.svg");
  background-size: auto 24px;
  background-position: -96px 0;
  background-repeat: no-repeat;
}

.CustomCheckBox {
  display: inline-block;
  position: relative;
  margin: 7px 6px 8px 0px;
}
.CustomCheckBox > input[type="checkbox"] {
  display: inline-block;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 12px;
  left: 7px;
  opacity: 0;
  z-index: 0;
}
.CustomCheckBox > label.error {
  display: none !important;
  width: 5px;
  height: 5px;
}
.CustomCheckBox > label.checklabel {
  display: inline-block;
  vertical-align: top;
  margin: 1px 30px 0 0;
  padding: 0px 10px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  background-color: #fff;
}
.CustomCheckBox > label.checklabel i {
  display: inline-block;
  width: 24px !important;
  height: 24px !important;
  margin: 0px 3px 0px 0;
  vertical-align: top;
  background-image: url("../images/form_pic.svg");
  background-repeat: no-repeat;
  background-position: left top;
  cursor: pointer;
}
.CustomCheckBox > input[type="checkbox"].Err ~ label.checklabel i {
  background-position: -120px top;
}
.CustomCheckBox > input[type="checkbox"]:checked {
  opacity: 0;
}
.CustomCheckBox > input[type="checkbox"]:checked ~ label.checklabel i {
  background-image: url("../images/form_pic.svg");
  background-repeat: no-repeat;
  background-position: -24px top;
}
.CustomCheckBox > label.checklabel span {
  display: inline-block;
  vertical-align: middle;
}

.FormL {
  width: 100%;
}

.FormML {
  width: 75%;
}

.FormM {
  width: 300px;
}

.FormS {
  width: 120px;
}

.FormXS {
  width: 100px;
}

.FormGroup.NoBottomMargin {
  margin: 0px 0 0px 0;
}

.FormGroup {
  margin: 0px 0 60px 0;
}
.FormGroup .FormTitleBox {
  margin: 20px 0 0px 0 !important;
}

.FormTitleBox.NoBottomMargin {
  margin: 20px 0 0px 0 !important;
}

.FormTitleBox.HeightS {
  padding: 11px 15px 11px 15px;
}

.FormTitleBox {
  display: inline-block;
  width: 100%;
  max-width: 1200px;
  margin: 20px 0 60px 0;
  padding: 16px 15px 16px 15px;
  border-top: 3px solid #333333;
  border-bottom: 1px solid #CCCCCC;
  text-align: left;
}
.FormTitleBox .FormTitleGrid {
  display: flex;
  align-items: center;
}
.FormTitleBox .Grid {
  flex: 1;
  margin: 0 10px;
}
.FormTitleBox .Grid:first-child {
  margin: 0 10px 0 0;
}
.FormTitleBox .Grid:last-child {
  margin: 0 0 0 10px;
  text-align: Right;
}
.FormTitleBox .FormTile {
  margin: 2px 0 2px 0;
}
.FormTitleBox .FormTile small, .FormTitleBox .FormTile h3 {
  display: inline-block;
}
.FormTitleBox .FormTile small {
  margin: 0 0 0 15px;
}

.CommonFormBox.HasBottomLine {
  border-bottom: 1px solid #CCCCCC;
}

.CommonFormBox .CommonForm.Small {
  max-width: 570px;
  padding: 0 0 0 10px;
}
.CommonFormBox .CommonForm {
  display: inline-block;
  width: 100%;
  max-width: 710px;
  margin: 22px auto 20px auto;
}
.CommonFormBox .CommonForm .FieldGroup {
  display: flex;
  width: 100%;
  min-height: 50px;
}
.CommonFormBox .CommonForm .FieldGroup .FieldName {
  display: inline-block;
  width: 102px;
  height: 35px;
  padding: 15px 0 0 0;
  color: #666666;
  text-align: left;
}
.CommonFormBox .CommonForm .FieldGroup .FieldContent {
  flex: 1;
  align-self: center;
  position: relative;
  padding: 0 6px 0 6px;
  text-align: left;
}
.CommonFormBox .CommonForm .FieldGroup .FieldContent small {
  display: inline-block;
  position: relative;
  top: -5px;
  color: #666666;
}
.CommonFormBox .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt {
  display: none;
  min-height: 27px;
  border-radius: 2px;
  border-width: 1px;
  border-style: solid;
  border-color: #FF0000;
  background-color: #FFE8E8;
  padding: 8px 10px 6px 10px;
  position: absolute;
  z-index: 9;
  top: -6px;
  right: 20px;
  color: #FF0000;
  line-height: 1;
}
.CommonFormBox .CommonForm .FieldGroup .FieldContent .PlaceHolderTxt::after {
  display: inline-block;
  width: 16px;
  height: 7px;
  content: "";
  background-image: url("../images/pic01.png");
  background-repeat: no-repeat;
  position: absolute;
  bottom: -7px;
  left: 40%;
}
.CommonFormBox .CommonForm .FieldGroup .FieldContent .ChkCodePic {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px 0 1px;
  color: #FF6600;
  min-width: 72px;
}
.CommonFormBox .CommonForm .FieldGroup .FieldContent .OnelineBox {
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px 0 4px;
}
.CommonFormBox .CommonForm .FieldGroup .FieldContent.Err .PlaceHolderTxt {
  display: inline-block;
}
.CommonFormBox .CommonForm .FormTxtIndent {
  margin: 0 0 0 2px;
}
.CommonFormBox .CommonForm.NoEdit {
  margin: 6px auto 6px auto;
}
.CommonFormBox .CommonForm.NoEdit .FieldGroup {
  min-height: 40px;
}
.CommonFormBox .CommonForm.NoEdit .FieldGroup .FieldName {
  padding: 9px 0 0 0;
}

@media screen and (max-width: 1199px) {
  .FormGroup {
    margin: 0px 0 40px 0;
  }

  .FormTitleBox {
    margin: 20px 0 40px 0;
  }
}
@media screen and (max-width: 959px) {
  .FormTitleBox .FormTitleGrid {
    display: block;
  }
  .FormTitleBox .Grid {
    flex: none;
    width: 100%;
  }
  .FormTitleBox .Grid:first-child {
    margin: 0 0 0 0;
  }
  .FormTitleBox .Grid:last-child {
    margin: 10px 0 0 0;
    text-align: left;
  }
  .FormTitleBox .FormTile small {
    display: block;
    margin: 7px 0 0 0px;
  }
}
@media screen and (max-width: 767px) {
  .FormM {
    width: 100%;
  }

  .FormS {
    width: 125px;
  }

  .FormTitleBox {
    padding: 16px 10px 16px 10px;
  }

  .CommonFormBox .CommonForm.Small {
    padding: 0 0 0 0px;
  }
  .CommonFormBox .CommonForm .FieldGroup .FieldName {
    padding: 15px 10px 0 10px;
  }
}
.MenuSwitchBox {
  display: none;
  position: fixed;
  left: calc( 100% - 78px );
  top: 32px;
  padding: 1px 1px;
  z-index: 99;
}

.MenuSwitchBtn {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  position: relative;
  background: #277E1F;
  cursor: pointer;
}
.MenuSwitchBtn:before, .MenuSwitchBtn:after {
  display: block;
  width: 20px;
  height: 3px;
  content: "";
  position: absolute;
  left: 14px;
  background: #FFFFFF;
  transform-origin: 0 50%;
  transition: all 0.5s ease 0s;
}
.MenuSwitchBtn:before {
  top: 17px;
}
.MenuSwitchBtn:after {
  top: 25px;
  background: #FFFFFF;
}

.On.MenuSwitchBtn {
  background: #FFFFFF;
}
.On.MenuSwitchBtn:before, .On.MenuSwitchBtn:after {
  left: 17px;
  background: #277E1F;
}
.On.MenuSwitchBtn:before {
  top: 15px;
  transform: rotate(45deg);
}
.On.MenuSwitchBtn:after {
  top: 29px;
  transform: rotate(-45deg);
}

.MenuSBgBox {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  position: fixed;
  left: calc( 100% - 54px );
  top: 56px;
  z-index: 97;
  background: #277E1F;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition: all 0.4s cubic-bezier(0.3, 0.25, 0.1, 1) 0.3s;
}

.On.MenuSBgBox {
  width: 350vw;
  height: 350vw;
  border-radius: 175vw;
  transition: all 0.7s cubic-bezier(0.3, 0.25, 0.1, 1);
}

.MenuBox {
  width: 100%;
  height: 60px;
  position: relative;
  background: #277E1F;
  text-align: center;
  color: #FFFFFF;
}
.MenuBox a, .MenuBox a:hover {
  text-decoration: none;
}
.MenuBox .MenuLv01 {
  display: inline-block;
  height: 60px;
  padding: 0 8px;
  margin: 0 12px;
  vertical-align: top;
  position: relative;
  line-height: 60px;
}
.MenuBox .MenuLv01Btn {
  display: block;
  position: relative;
  background: transparent;
  cursor: pointer;
}
.MenuBox .MenuLv01Btn::before {
  display: inline-block;
  width: calc( 100% + 12px );
  height: 5px;
  content: "";
  position: absolute;
  bottom: 0;
  left: -6px;
  background: transparent;
}
.MenuBox .MenuLv01Btn.Hover {
  color: #9DBA06;
}
.MenuBox .MenuLv02Bg {
  display: none;
  width: 100vw;
  height: auto;
  position: fixed;
  left: 0;
  top: 175px;
  background: #9DBA06;
  text-align: center;
}
.MenuBox .MenuLv02Box {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  max-width: 1020px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
}
.MenuBox .MenuLv02Btn {
  display: inline-block;
  height: 100%;
  margin: 0 20px;
  position: relative;
  padding: 0 5px;
  line-height: 60px;
  color: #FFFFFF;
}
.MenuBox .MenuLv02Btn::before {
  display: none;
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  left: 0px;
  bottom: 0px;
  background: #fff;
}
.MenuBox .MenuLv02Btn:hover::before {
  display: inline-block;
}

.MyConcernBox {
  display: flex;
  width: 425px;
  height: 60px;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 60px 0 0;
  background: #BF4080;
  color: #FFFFFF;
  font-weight: 500;
  line-height: 60px;
}
.MyConcernBox::before {
  display: inline-block;
  content: "";
  width: 60px;
  height: 60px;
  background-image: url("../images/menu/pic01.png");
  background-repeat: no-repeat;
}
.MyConcernBox img {
  display: inline-block;
  margin: 0 14px 0 0;
}
.MyConcernBox a, .MyConcernBox a:hover {
  text-decoration: none;
}
.MyConcernBox .MyConcernGrid:first-child {
  flex: 3.6;
  text-align: left;
}
.MyConcernBox .MyConcernGrid:last-child {
  flex: 1;
  text-align: right;
}
.MyConcernBox .MyConcernBtn {
  margin: 0 7px;
}
.MyConcernBox .LoginBtn {
  display: none !important;
}
.MyConcernBox .LogoutBtn {
  display: inline-block !important;
}

.MyConcernBox.NoSignin {
  width: 205px;
}
.MyConcernBox.NoSignin .MemberMenu {
  display: none !important;
}
.MyConcernBox.NoSignin .LoginBtn {
  display: inline-block !important;
}
.MyConcernBox.NoSignin .LogoutBtn {
  display: none !important;
}

.MenuSBox {
  display: none;
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 98;
  background: transparent;
  opacity: 0;
  transition: opacity 0.5s linear 0s;
}
.MenuSBox a, .MenuSBox a:hover {
  text-decoration: none;
}
.MenuSBox .MenuSInner {
  width: 80vw;
  height: 100vh;
  position: relative;
  padding: 140px 0 50px 0;
  margin: 0 auto;
  overflow-y: auto;
}
.MenuSBox .MenuSGridBox {
  display: flex;
  align-items: center;
  padding: 40px 5px 10px 5px;
  border-bottom: 1px solid #FFFFFF;
}
.MenuSBox .MenuSGridBox .MenuSGrid {
  flex: 1;
}
.MenuSBox .MenuSGridBox .MenuSGrid a {
  text-decoration: none;
  color: #FFFFFF;
}
.MenuSBox .MenuSGridBox .MenuSGrid .LogoutBtn {
  display: inline-block !important;
}
.MenuSBox .MenuSGridBox .MenuSGrid .LoginBtn {
  display: none !important;
}
.MenuSBox .MenuSGridBox .MenuSGrid:first-child {
  text-align: left;
}
.MenuSBox .MenuSGridBox .MenuSGrid:first-child .CartIcon {
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  background-image: url("../images/icon_tool.svg");
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: -32px 0;
}
.MenuSBox .MenuSGridBox .MenuSGrid:first-child .CartQty {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 0 0 0;
}
.MenuSBox .MenuSGridBox .MenuSGrid:last-child {
  text-align: right;
  padding: 2px 12px 0 0;
}
.MenuSBox .MenuSGridBox .MenuSGrid.NoSignin .LogoutBtn {
  display: none !important;
}
.MenuSBox .MenuSGridBox .MenuSGrid.NoSignin .LoginBtn {
  display: inline-block !important;
}
.MenuSBox .MenuSLv01 {
  width: 100%;
  padding: 13px 5px;
  color: #FFFFFF;
  text-align: left;
}
.MenuSBox .MenuSLv01Btn {
  position: relative;
  cursor: pointer;
}
.MenuSBox .MenuSLv01Btn i {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: 0 7px;
  vertical-align: middle;
  position: absolute;
  top: -1px;
  right: 0;
  content: url("../images/menu/pic02.png");
}
.MenuSBox .Open > .MenuSLv01Btn i {
  transform: rotate(90deg);
}
.MenuSBox .MenuSLv02 {
  display: none;
}
.MenuSBox .MenuSLv02Btn {
  display: block;
  width: 100%;
  height: auto;
  margin: 15px 0;
  font-weight: 300;
  color: #FFFFFF;
}

@media screen and (max-width: 1599px) {
  .MyConcernBox {
    width: 29.5vw;
    max-width: 410px;
    padding: 0 25px 0 0;
  }
}
@media screen and (max-width: 1199px) {
  .MenuSwitchBox {
    display: inline-block;
  }

  .MenuBox {
    display: none;
  }

  .MenuSBgBox {
    display: inline-block;
  }

  .On.MenuSBox {
    opacity: 1;
  }

  .In.MenuSBox {
    display: block;
  }
}
@media screen and (max-width: 959px) {
  .MenuSwitchBox {
    top: 12px;
  }

  .MenuSBgBox {
    top: 36px;
  }
}
@media screen and (max-width: 767px) {
  .MenuSwitchBox {
    left: calc( 96% - 48px );
    top: 15px;
  }

  .MenuSBgBox {
    left: calc( 96% - 25px );
    top: 39px;
  }

  .On.MenuSBgBox {
    width: 350vh;
    height: 350vh;
    border-radius: 175vh;
  }

  .MenuSBox .MenuSInner {
    width: 86vw;
    padding: 100px 0 50px 0;
  }
}
.TableBox.HasMargin {
  margin: 20px 0 60px 0;
}

.TableBox {
  display: inline-block;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
}
.TableBox .TableTitle {
  border-top: 3px solid #333333;
}
.TableBox .TableGrid {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0px 15px 0px 15px;
  margin: 0;
  border-bottom: 1px solid #CCCCCC;
}
.TableBox .Grid:first-child {
  margin: 0 10px 0 0;
}
.TableBox .Grid:last-child {
  margin: 0 0 0 10px;
}
.TableBox .Grid {
  margin: 19px 10px;
  text-align: left;
}
.TableBox .Flex2 {
  flex: 2;
}
.TableBox .Flex25 {
  flex: 2.5;
}
.TableBox .Flex3 {
  flex: 3;
}
.TableBox .Flex35 {
  flex: 3.5;
}
.TableBox .Flex4 {
  flex: 4;
}
.TableBox .Flex5 {
  flex: 5;
}
.TableBox .Grid.FieldName {
  text-align: left;
  color: #666666;
}

@media screen and (max-width: 959px) {
  .TableBox .TableGrid {
    flex-wrap: wrap;
    padding: 5px 15px 5px 15px;
  }
  .TableBox .Grid:first-child {
    margin: 6px 0;
  }
  .TableBox .Grid:last-child {
    margin: 6px 0;
  }
  .TableBox .Grid {
    margin: 6px 0;
    text-align: left;
  }
  .TableBox .Flex2, .TableBox .Flex25, .TableBox .Flex3, .TableBox .Flex35, .TableBox .Flex4, .TableBox .Flex5 {
    flex: 1;
    min-width: 75%;
  }
  .TableBox .Grid.FieldName {
    width: 10%;
    min-width: 80px;
    margin: 5px 3% 5px 0;
  }
}
@media screen and (max-width: 767px) {
  .TableBox .Flex2, .TableBox .Flex25, .TableBox .Flex3, .TableBox .Flex35, .TableBox .Flex4, .TableBox .Flex5 {
    flex: 1;
    min-width: 60%;
  }
  .TableBox .Grid.FieldName {
    width: 20%;
    min-width: 80px;
    margin: 5px 3% 5px 0;
  }
}