/*    SHOPIMG BACKGROUND-IMAGE    */

/*    DVD    */

.d-dvd3      .shopImg {background-image: url(../img/shop/d-dvd3.jpg);}
.d-dvd2      .shopImg {background-image: url(../img/shop/d-dvd2.jpg);}
.d-dvd1      .shopImg {background-image: url(../img/shop/d-dvd1.jpg);}

/*    PRODUCT    */

.p-2015c      .shopImg {background-image: url(../img/shop/p-2015c.png);}
.p-minibrick2 .shopImg {background-image: url(../img/shop/p-minibrick2.png);}
.p-poster100  .shopImg {background-image: url(../img/shop/p-poster100.jpg);}
.p-ptbag      .shopImg {background-image: url(../img/shop/p-ptbag.png);}
.p-tote       .shopImg {background-image: url(../img/shop/p-tote.png);}
.p-penbag     .shopImg {background-image: url(../img/shop/p-penbag.png);}
.p-cpbag      .shopImg {background-image: url(../img/shop/p-cpbag.png);}
.p-badges2    .shopImg {background-image: url(../img/shop/p-badges2.jpg);}
.p-badges3    .shopImg {background-image: url(../img/shop/p-badges3.jpg);}
.p-tag        .shopImg {background-image: url(../img/shop/p-tag.png);}

/*    CLOTHING    */

.t-pts-otk200 .shopImg {background-image: url(../img/shop/t-pts-otk200.png);}
.t-pts-mmcap  .shopImg {background-image: url(../img/shop/t-pts-mmcap.png);}
.t-hotdog     .shopImg {background-image: url(../img/shop/t-hotdog.png);}

/*    SUBSCRIBE    */

.s-pteens .shopImg {background-image: url(../img/shop/s-pteens.jpg);}
.s-ptimes .shopImg {background-image: url(../img/shop/s-ptimes.jpg);}

/*    BOOK    */

.b-mm6    .shopImg {background-image: url(../img/shop/b-mm6.jpg);}
.b-mm5    .shopImg {background-image: url(../img/shop/b-mm5.jpg);}
.b-mm4    .shopImg {background-image: url(../img/shop/b-mm4.jpg);}
.b-mm3    .shopImg {background-image: url(../img/shop/b-mm3.jpg);}
.b-mm2    .shopImg {background-image: url(../img/shop/b-mm2.jpg);}
.b-mm1    .shopImg {background-image: url(../img/shop/b-mm1.jpg);}
.b-urfail .shopImg {background-image: url(../img/shop/b-urfail.jpg);}
.b-kh2    .shopImg {background-image: url(../img/shop/b-kh2.jpg);}
.b-kh1    .shopImg {background-image: url(../img/shop/b-kh1.jpg);}
.b-tb3    .shopImg {background-image: url(../img/shop/b-tb3.jpg);}
.b-tb2    .shopImg {background-image: url(../img/shop/b-tb2.jpg);}
.b-tb1    .shopImg {background-image: url(../img/shop/b-tb1.jpg);}
.b-ghost1 .shopImg {background-image: url(../img/shop/b-ghost1.jpg);}
.b-msc2   .shopImg {background-image: url(../img/shop/b-msc2.jpg);}
.b-msc1   .shopImg {background-image: url(../img/shop/b-msc1.jpg);}

/*    COMICS    */

.c-mmc3   .shopImg {background-image: url(../img/shop/c-mmc3.jpg);}
.c-mmc2   .shopImg {background-image: url(../img/shop/c-mmc2.jpg);}
.c-mmc1   .shopImg {background-image: url(../img/shop/c-mmc1.jpg);}
.c-plc2   .shopImg {background-image: url(../img/shop/c-plc2.jpg);}
.c-plc1   .shopImg {background-image: url(../img/shop/c-plc1.jpg);}
.c-today1 .shopImg {background-image: url(../img/shop/c-today1.jpg);}

/* =============================================================================
   SHOP-SLIDER
   ========================================================================== */

.shop-slider {
  width: 100%;
  margin: auto;
  margin-top: 2em;
}
.shop-slider .maxWrapper {
  padding: 0;
}
.shop-slider-wrap {}
.shop-slider-item {
  position: relative;
  height: 0;
  padding-top: 300px;
  background-size: cover;
}
.shop-slider-item .shop-slider-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: auto;
  width: 100%;
  max-width: 1280px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.shop-slider-item.b-kh2 {
  background-color: #5fa59d;
}
.shop-slider-item.b-kh2 .shop-slider-bg {
  background-image: url(../img/shop/b-kh2-f3-w2.png);
}
.shop-slider-item.b-tb2 {
  background-image: url(../img/shop/b-tb-bg.jpg);
}
.shop-slider-item.b-tb2 .shop-slider-bg {
  background-image: url(../img/shop/b-tb2-f.png);
}
.shop-slider-item.b-mm2 {
  background-color: #fff;
}
.shop-slider-item.b-mm2:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  background-color: #000;
}
.shop-slider-item.b-mm2 .shop-slider-bg {
  background-image: url(../img/shop/b-mm2-f.jpg);
}
.shop-slider-item.b-urfail {
  background-color: #000;
}
.shop-slider-item.b-urfail .shop-slider-bg {
  background-image: url(../img/shop/b-urfail-bg.png);
}
@media only screen and (max-width: 1280px) {
  .shop-slider {
    margin-top: 0;
  }
}
@media only screen and (max-width: 1024px) {
  .shop-slider {
    margin-top: 0;
  }
  .shop-slider .maxWrapper {
    max-width: 100%;
    padding: 0;
  }
}
@media only screen and (max-width: 1023px) {
  .shop-slider-item {
    padding-top: 250px;
  }
}
@media only screen and (max-width: 768px) {}
@media only screen and (max-width: 568px) {
  .shop-slider-item {
    padding-top: 8%;
  }
}

/* =============================================================================
   SHOPSECTION
   ========================================================================== */


/*    .SHOPSECTION    */

.shopSection {
  padding-top: 3rem;
}
@media only screen and (min-width: 1025px) {
  .shopSection:last-child {
    padding-bottom: 3rem;
  }
}
@media only screen and (max-width: 1024px) {
  .shopSection {
    position: relative;
    padding-top: 0;
  }
  .shopSection.mobile-grid {
    border-bottom: 1px solid hsl(97, 3%, 80%);
  }
  body.dark .shopSection.mobile-grid {
    border-color: hsl(97, 3%, 20%);
  }
}

/*    .SHOPMODULE-WRAP-CON    */

.shopModule-wrap-con:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
@media only screen and (min-width: 769px) {
  .shopModule-wrap-con {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

/* =============================================================================
   SHOPSECTION-HEADER
   ========================================================================== */


/*    .SHOPSECTION-HEADER    */

.shopSection-header:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.shopSection-header {}
.shopSection-title {
  float: left;
  font-size: 1.71875em;
  line-height: 28px;
  margin-right: 0.75em;
}
.shopSection-all {
  font-size: 1rem;
  line-height: 1;
  font-weight: bold;
  color: #bea22f;
}
.shopSection-all > a {
  display: block;
}

/*    .SHOPSECTION-TOGGLE    */

.shopSection-toggle:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.shopSection-toggle {
  float: left;
}
.shopSection-toggle.self {
  float: none;
/*  outline: 1px solid lime;*/
  margin-bottom: 1rem;
}
.shopSection-toggle li {
  float: left;
  font-size: 0.875rem;
  line-height: 2;
  padding: 0 0.625em;
  color: hsl(34, 3%, 30%);
  background-color: hsl(97, 3%, 92%);
  font-weight: bold;
  cursor: pointer;
}
.shopSection-toggle li.active {
  color: hsl(97, 3%, 95%);
  background-color: #bea22f;
}
.shopSection-toggle li ~ li {
  margin-left: 1em;
}
@media only screen and (max-width: 1024px) {
  .shopSection-header {
    padding: 1em;
    text-align: center;
  }
.shopSection-toggle.self {
  margin-bottom: auto;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .shopSection-all {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 28px;
    margin: 1rem;
  }
}
@media only screen and (max-width: 768px) {
  .shopSection-title {
    float: none;
    margin: auto;
    font-size: 1.25rem;
  }
  body.shop .shopSection-toggle {
    display: none;
    margin-top: 0;
    margin-top: 0.25em;
  }
  body.shop .shopSection-toggle li {
    font-size: 0.75em;
  }
  .shopSection-all {
    margin: 1rem 1rem 2rem;
    text-align: center;
  }
}

/*    .SHOPSECTION SHOPMODULE-WRAP    */

.shopSection .shopModule-wrap {
  float: left;
  padding: 1rem;
}
.shopSection.grid5 .shopModule-wrap {
  width: 20%;
}
.shopSection.book .shopModule-wrap {
  width: 16.6666666666%;
}
.shopSection.large .shopModule-wrap {
  width: 33.3333333333%;
}

/*    .SHOPSECTION FEATURE OVERWRITE    */

.shopSection.feature {
  margin-top: 2em;
  padding: 0;
}
.shopSection.feature .maxWrapper {
  padding: 0;
  background-color: hsl(97, 3%, 92%);
  border: 1px solid hsl(97, 3%, 80%);
}
body.dark .shopSection.feature .maxWrapper {
  border-color: hsl(97, 3%, 20%);
  background-color: hsl(97, 3%, 10%);
}
.shopSection.feature .shopSection-title {
  float: none;
  margin: auto;
  padding: 1em 0;
  line-height: 1;
  text-align: center;
  border-bottom: 1px solid hsl(97, 3%, 80%);
}
body.dark .shopSection.feature .shopSection-title {
  border-color: hsl(97, 3%, 20%);
}
.shopSection.large.feature .imgBox {
  background-color: transparent;
}
.shopSection.large .shopModule-wrap-con {
  padding: 2em 0;
}
.shopSection.large .shopModule-wrap {
  padding-top: 0;
  padding-bottom: 0;
}
.shopSection.large .shopModule-wrap ~ .shopModule-wrap {
  border-left: 1px solid hsl(97, 3%, 85%);
}
body.dark .shopSection.large .shopModule-wrap ~ .shopModule-wrap {
  border-color: hsl(97, 3%, 20%);
}
.shopSection.large .imgBox {
  padding: 0;
  background-color: hsl(97, 3%, 92%);
}
.shopSection.large .imgBox .shopImg {
  padding-top: 75%;
}
@media only screen and (max-width: 1280px) {
  .shopSection.feature {
    margin-top: auto;
  }
  .shopSection.feature .maxWrapper {
    border-left: none;
    border-right: none;
  }
}
@media only screen and (max-width: 1023px) {
  .shopSection.feature .maxWrapper {
    max-width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  .shopSection.large .shopModule-wrap ~ .shopModule-wrap {
    border-left: 1px solid hsl(97, 3%, 87%);
  }
  .shopSection.large .imgBox .shopImg {
    padding-top: 110%;
  }
}
@media only screen and (max-width: 614px) {
  .shopSection.large .imgBox .shopImg {
    padding-top: 120%;
  }
}
@media only screen and (max-width: 568px) {
  .shopSection.large .shopModule-wrap-con {
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    overflow-x: scroll;
    width: auto;
    padding: 1.5em 0;
  }
  .shopSection.large .shopModule-wrap {
    float: none;
    display: inline-block;
    width: 200px;
  }
  .shopSection.large .imgBox .shopImg {
    padding-top: 130%;
  }
}
@media only screen and (max-width: 374px) {
  .shopSection.large .shopModule-wrap {
    width: 180px;
  }
}
@media only screen and (max-width: 1024px) {
  .shopSection.mobile-grid:last-child {
    border-bottom: none;
  }
  .shopSection.mobile-grid .maxWrapper {
    max-width: 100%;
    padding: 0;
  }
  /*    .SHOPSECTION.MOBILE-GRID .SHOPMODULE-WRAP-CON    */
  .shopSection.mobile-grid .shopModule-wrap-con {
    margin: auto;
  }
  .shopSection.mobile-grid .shopModule-wrap {
    width: 20%;
    padding: 2rem 0 1.75rem;
    border-top: 1px solid hsl(97, 3%, 90%);
  }
  body.dark .shopSection.mobile-grid .shopModule-wrap {
    border-color: hsl(97, 3%, 10%);
  }
  /*    .SHOPSECTION.MOBILE-GRID .SHOPMODULE    */
  .shopSection.mobile-grid .imgBox {
    margin: auto;
    width: 80%;
    padding: 0;
    background-color: transparent;
  }
  .shopSection.mobile-grid .imgBox .shopImg {
    padding-top: 120%;
  }
  .shopSection.mobile-grid .shopImg-overlay {
    display: none;
  }
  .shopSection.mobile-grid .shopModule .textBox {
    padding: 0 0.75em;
  }
  .shopSection.mobile-grid .shopModule .textBox h5,
  .shopSection.mobile-grid .shopModule .textBox h4 span,
  .shopSection.mobile-grid .shopModule .textBox h4 {
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  .shopSection.mobile-grid .shopModule-wrap {
    width: 25%;
    padding: 1.75rem 0 1.5rem;
  }
  .shopSection.mobile-grid .imgBox .shopImg {
    padding-top: 110%;
  }
}
@media only screen and (max-width: 614px) {
  .shopSection.mobile-grid .shopModule-wrap {
    width: 33.3333333333%;
  }
}
@media only screen and (max-width: 420px) {
  .shopSection.mobile-grid .shopModule-wrap {
    padding: 1.5rem 0 1.25rem;
  }
}
@media only screen and (max-width: 414px) {
  .shopSection.mobile-grid .shopModule-wrap {
    width: 50%;
  }
}
@media only screen and (max-width: 413px) {
  .shopSection.mobile-grid.book .imgBox {
    width: 86%;
  }
}

/*    .SHOPSECTION.MOBILE-GRID .SHOPMODULE-WRAP HIDE & CLEAR FLOAT & BORDER    */

@media only screen and (min-width: 1025px) {
  body.shop .shopSection.mobile-grid .shopModule-wrap:nth-child(n+6) {
    display: none;
  }
  body.shop .shopSection.mobile-grid.book .shopModule-wrap:nth-child(n+6) {
    display: block;
  }
  body.shop .shopSection.mobile-grid.book .shopModule-wrap:nth-child(n+7) {
    display: none;
  }
  body.shop-book .shopSection.mobile-grid.grid5 .shopModule-wrap:nth-child(6n+1) {
    clear: both;
  }
  body.shop-product .shopSection.mobile-grid.grid5 .shopModule-wrap:nth-child(5n+1) {
    clear: both;
  }
}

/*    FIVE IN A ROW    */

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  body.shop .shopSection.mobile-grid .shopModule-wrap:nth-child(n+6) {
    display: none;
  }
  .shopSection.mobile-grid .shopModule-wrap:nth-child(5n+1) {
    clear: both;
  }
  .shopSection.mobile-grid .shopModule-wrap:nth-child(n+1) .shopModule {
    border-left: 1px solid hsl(97, 3%, 90%);
  }
  body.dark .shopSection.mobile-grid .shopModule-wrap:nth-child(n+1) .shopModule {
    border-color: hsl(97, 3%, 10%);
  }
}

/*    FOUR IN A ROW    */

@media only screen and (min-width: 615px) and (max-width: 768px) {
  body.shop .shopSection.mobile-grid .shopModule-wrap:nth-child(n+9) {
    display: none;
  }
  .shopSection.mobile-grid .shopModule-wrap:nth-child(4n+1) {
    clear: both;
  }
  .shopSection.mobile-grid .shopModule-wrap:nth-child(n+1) .shopModule {
    border-left: 1px solid hsl(97, 3%, 90%);
  }
  body.dark .shopSection.mobile-grid .shopModule-wrap:nth-child(n+1) .shopModule {
    border-color: hsl(97, 3%, 10%);
  }
  body.dark .shopSection.mobile-grid .shopModule-wrap:nth-child(4n+1) .shopModule,
  .shopSection.mobile-grid .shopModule-wrap:nth-child(4n+1) .shopModule {
    border-left: none;
  }
}

/*    THREE IN A ROW    */

@media only screen and (max-width: 614px) {
  body.shop .shopSection.mobile-grid .shopModule-wrap:nth-child(n+7) {
    display: none;
  }
  .shopSection.mobile-grid .shopModule-wrap:nth-child(n+2) .shopModule {
    border-left: 1px solid hsl(97, 3%, 90%);
  }
  body.dark .shopSection.mobile-grid .shopModule-wrap:nth-child(n+2) .shopModule {
    border-color: hsl(97, 3%, 10%);
  }
  body.dark .shopSection.mobile-grid .shopModule-wrap:nth-child(3n+1) .shopModule,
  .shopSection.mobile-grid .shopModule-wrap:nth-child(3n+1) .shopModule {
    border-left: none;
  }
}
@media only screen and (min-width: 415px) and (max-width: 614px) {
  .shopSection.mobile-grid .shopModule-wrap:nth-child(3n+1) {
    clear: both;
  }
}

/*    TWO IN A ROW    */

@media only screen and (max-width: 414px) {
  .shopSection.mobile-grid .shopModule-wrap:nth-child(2n+1) {
    clear: both;
  }
  .shopSection.mobile-grid .shopModule-wrap:nth-child(even) .shopModule {
    border-left: 1px solid hsl(97, 3%, 90%);
  }
  body.dark .shopSection.mobile-grid .shopModule-wrap:nth-child(even) .shopModule {
    border-color: hsl(97, 3%, 10%);
  }
}

/* =============================================================================
   SHOPSECTION-HEADER
   ========================================================================== */


/*    .SHOPMODULE    */

.shopModule > a {
  display: block;
}
.shopModule .imgBox {
  position: relative;
  padding: 1rem;
  background-color: hsl(97, 3%, 92%);
}
.book .shopModule .imgBox {
  padding: 0;
  background-color: transparent;
}
.shopModule .imgBox .shopImg {
  height: 0;
  max-width: 100%;
  max-height: 100%;
  padding-top: 125%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1024px) {
  .desktop .shopModule .imgBox:hover .shopImg {
    opacity: 0.25;
  }
}
.shopModule .textBox {}
.shopModule .textBox h4 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  margin-top: 0.5em;
  font-size: 0.875rem;
  line-height: 1.375;
  font-weight: bold;
  text-align: center;
}
.shopModule .textBox h4 span {
  display: block;
  font-weight: normal;
  font-size: 0.8rem;
  color: hsl(97, 3%, 30%);
}
.shopModule .textBox h5 {
  text-align: center;
}
@media screen and (max-width: 568px) {}

/*  .media .shopImg-overlay  */

.shopImg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: auto;
  opacity: 0;
  background-color: transparent;
  pointer-events: none;
  cursor: pointer;
  -webkit-user-select: none;
}
@media screen and (max-width: 1023px) {
  .mobile .shopImg-overlay {
    display: none;
  }
}
.shopModule .imgBox:hover .shopImg-overlay {
  opacity: 1;
  pointer-events: auto;
}
.shopImg-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  margin: auto;
  width: 4rem;
  height: 4rem;
  text-align: center;
  border-radius: 3px;
  color: hsl(34, 3%, 30%);
  cursor: pointer;
}
.shopImg-icon i {
  font-size: 3rem;
  line-height: 4rem;
}

/* =============================================================================
   TRANSITION
   ========================================================================== */

.shopModule .imgBox img,
.shopModule .imgBox .shopImg,
.shopModule .shopImg-overlay,
.shopModule .shopImg-overlay span {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  -webkit-transition: all 400ms cubic-bezier(0.75, 0.10, 0.10, 1.000);
  -moz-transition: all 400ms cubic-bezier(0.75, 0.10, 0.10, 1.000);
  -ms-transition: all 400ms cubic-bezier(0.75, 0.10, 0.10, 1.000);
  -o-transition: all 400ms cubic-bezier(0.75, 0.10, 0.10, 1.000);
  transition: all 400ms cubic-bezier(0.75, 0.10, 0.10, 1.000);
  /*custom cubic-bezier*/
}

/* =============================================================================
   SHOPSECTION SHOPINFO
   ========================================================================== */


/*    SHOPSECTION.SHOPINFO    */

.shopSection.shopInfo {
  padding: 3rem 0 4rem;
}
.shopSection.shopInfo .maxWrapper {
  max-width: 1024px;
}
.shopSection.shopInfo .shopModule .imgBox {
  padding: 0;
}
.shopSection.shopInfo .shopModule .imgBox .shopImg {
  padding-top: 100%;
}
@media only screen and (max-width: 768px) {
  .shopSection.shopInfo {
    padding: 2rem 0 3rem;
  }
}
@media only screen and (max-width: 640px) {
  .shopSection.shopInfo {
    padding: 1.5rem 0 2rem;
  }
}

/*    .SHOPINFO .SHOPMODULE-WRAP    */

.shopInfo .shopModule-wrap {
  width: 100%;
  padding: 0;
}
.shopInfo .shopModule .media {}

/*    .SHOPINFO .SHOPMODULE .IMGBOX    */

.shopInfo .shopModule .imgBox {
  position: absolute;
  top: 0;
  width: 24rem;
  height: 24rem;
  margin: auto;
  padding-top: 0;
  background-color: transparent;
}
.shopInfo .shopModule .imgBox:hover .shopImg {
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .shopInfo .shopModule .imgBox.stick {
    position: fixed;
    top: 1.5rem;
  }
  .shopInfo .shopModule .imgBox.stick.stickBottom {
    position: absolute;
    top: auto;
    bottom: 0;
  }
}

/*    .SHOPINFO .SHOPMODULE .TEXTBOX    */

.shopInfo .shopModule .textBox {
  width: 100%;
  min-height: 24rem;
  padding-left: 26rem;
}
.shopInfo .shopModule .textBox > h5.caption {
  margin-top: 1em;
  text-align: left;
}

/*    .SHOPINFO .SHOPMODULE .SHOP-BODY    */

.shopInfo .shopModule .shop-body {
  font-size: 1.25em;
}
.shopInfo .shopModule .shop-body h2 {}
.shopInfo .shopModule .shop-body h4 {
  margin-top: 0.125em;
  font-weight: normal;
  text-align: left;
  white-space: normal;
  color: hsl(97, 3%, 30%);
}
body.dark .shopInfo .shopModule .shop-body h4 {
  color: hsl(97, 3%, 80%);
}
.shopInfo .shopModule .shop-price {
  margin-top: 1em;
  font-size: 1.25em;
  line-height: 1;
}
body.dark .shopInfo .shopModule .shop-price {
  color: hsl(97, 3%, 95%);
}
@media only screen and (max-width: 1024px) {
  .shopInfo .shopModule .textBox {
    padding-left: 25rem;
  }
}
@media only screen and (max-width: 1023px) {
  .shopInfo .shopModule .imgBox {
    width: 18rem;
    height: 18rem;
  }
  .shopInfo .shopModule .textBox {
    min-height: 18rem;
    padding-left: 19rem;
  }
}
@media only screen and (max-width: 767px) {
  .shopInfo .shopModule .imgBox {
    width: 8rem;
    height: 8rem;
  }
  .shopInfo .shopModule .textBox {
    min-height: 0;
    padding-left: 0;
    padding-top: 9rem;
  }
  .shopInfo .shopModule .shop-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 9rem;
  }
}
@media only screen and (max-width: 568px) {
  .shopInfo .shopModule .imgBox {
    width: 7rem;
    height: 7rem;
  }
  .shopInfo .shopModule .textBox {
    padding-top: 8rem;
  }
  .shopInfo .shopModule .shop-body {
    padding-left: 8rem;
    font-size: 1em;
  }
}

/*    .SHOPINFO-TOGGLE    */

.shopInfo-toggle:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.shopInfo-toggle {
  float: left;
  margin-bottom: 1.5rem;
  border: 1px solid hsl(97, 3%, 80%);
}
.shopInfo-toggle li {
  float: left;
  padding: 0 1em;
  font-size: 0.875rem;
  line-height: 36px;
  color: hsl(97, 3%, 30%);
  cursor: pointer;
}
.shopInfo-toggle li + li {
  border-left: 1px solid hsl(97, 3%, 80%);
}
.shopInfo-toggle li.active {
  background-color: hsl(97, 3%, 90%);
}
@media only screen and (max-width: 568px) {
  .shopInfo-toggle {
    float: none;
  }
  .shopInfo-toggle li {
    text-align: center;
  }
  .shopInfo-toggle.child1 li {
    width: 100%;
  }
  .shopInfo-toggle.child2 li {
    width: 50%;
  }
  .shopInfo-toggle.child3 li {
    width: 33.3333333333%;
  }
}

/*    .SHOPINFO-BODY    */

.shopInfo-body:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.shopInfo-body {
  clear: both;
  padding-top: 2rem;
}
.shopInfo-body a {
  color: #bea22f;
  font-weight: bold;
}

/*    .SHOPINFO-CONTENT    */

.shopInfo-content {
  display: none;
}
.shopInfo-content.active {
  display: block;
}
.shopInfo-content p,
.shopInfo-content h4,
.shopInfo-content h3,
.shopInfo-content .cell {
  color: hsl(97, 3%, 30%);
}
.shopInfo-content {
  clear: both;
}
.shopInfo-content h3 + .table-row,
.shopInfo-content h3 + p {
  margin-top: 1em;
}
.shopInfo .shopModule .textBox .shopInfo-content h4 {
  font-weight: bold;
  text-align: left;
}
.shopInfo-content p {
  font-size: 0.875em;
}
.shopInfo-content p + p {
  margin-top: 0.75em;
}
.shopInfo-content p + .table-row {
  margin-top: 1rem;
}
.shopInfo-content p + h6 {
  position: relative;
  margin-top: 1em;
  padding-top: 0.5em;
  font-size: 0.875em;
}
.shopInfo-content p + h6:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 1px solid hsl(97, 3%, 80%);
  width: 1.5rem;
}
@media only screen and (max-width: 568px) {
  .shopInfo-body {
    padding-top: 1.5rem;
  }
}

/*    .SHOPINFO-TABLE    */

.shopInfo-table {
  color: hsl(34, 3%, 20%);
}
.shopInfo-table .table-row ~ .table-row {
  margin-top: 1em;
}
.shopInfo-table .table-row h4 {
  font-weight: bold;
  margin-bottom: 0.5em;
}
.shopInfo-table .cell {
  position: relative;
  padding-left: 70px;
  line-height: 1.625;
}
.shopInfo-table.wide-header .cell {
  padding-left: 150px;
}
.shopInfo-table .cell ~ .cell {
  margin-top: 0.5em;
}
.shopInfo-table .cell .header {
  position: absolute;
  left: 0;
}
.shopInfo-table .cell .shopName:after {
  content: '｜';
  opacity: 0.25;
}

/*    .SHOPINFO .BTNCON    */

.shopInfo .btnCon {
  clear: both;
  width: auto;
  margin: auto -0.5rem;
}
.shopInfo .btnCon .btn73 {
  float: left;
  padding: 0 0.5rem;
  width: 70%;
}
.shopInfo .btnCon .btn73 + .btn73 {
  width: 30%;
}
.shopInfo .btnCon .btn73 > button {
  margin: auto;
  width: 100%;
}
.shop-select-size + .btnCon,
.shop-toggle-option + .btnCon {
  margin-top: 1.5rem;
}
@media only screen and (max-width: 568px) {
  .shopInfo .btnCon .btn73,
  .shopInfo .btnCon .btn73 + .btn73 {
    width: 100%;
  }
  .shopInfo .btnCon .btn73 + .btn73 {
    margin-top: 0.75rem;
  }
}

/* =============================================================================
   .SIZE-TABLE
   ========================================================================== */


/*    SIZE-TABLE    */

.size-table {
  font-size: 0.875rem;
  color: hsl(97, 3%, 30%);
}
body.dark .size-table {
  color: hsl(97, 3%, 95%);
}
.size-table.inch .size-value .cm,
.size-table.cm .size-value .inch {
  display: none;
}

/*    .SIZE-GUIDE    */

.size-guide {
  max-width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-bottom: 1rem;
}
.size-guide.size-guide1 {
  width: 200px;
  height: 200px;
  background-image: url(../img/shop/size-guide1.png);
}
body.dark .size-guide.size-guide1 {
  background-image: url(../img/shop/size-guide1-w.png);
}
.size-guide.size-guide2 {
  width: 310px;
  height: 180px;
  background-image: url(../img/shop/size-guide2.png);
}
body.dark .size-guide.size-guide2 {
  background-image: url(../img/shop/size-guide2-w.png);
}

/*    .SIZE-TABLE .SIZE-TABLE-ROW    */

.size-table .size-table-row:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.size-table .size-table-row {
  position: relative;
  padding-left: 3rem;
}
.size-table .size-table-row:nth-child(2n+2) {
  background-color: hsl(97, 3%, 92%);
}
body.dark .size-table .size-table-row:nth-child(2n+2) {
  background-color: hsl(97, 3%, 20%);
}
.size-table .size-table-row.header,
body.dark .size-table .size-table-row.header {
  background-color: hsl(97, 3%, 30%);
}

/*    .SIZE-TABLE .SIZE-TABLE-ROW CHILD    */

.size-table .size-label {
  position: absolute;
  left: 0;
  width: 3rem;
  margin: auto;
  padding: 0 0.75em;
  line-height: 2.25;
}
.size-table .size-table-header,
.size-table .size-value {
  float: left;
  width: 33.3333333333%;
  text-align: center;
}
.size-table .size-table-header {
  color: hsl(97, 3%, 95%);
  padding: 0.5em 0;
  line-height: 1.3125;
  font-size: 0.875em;
}
.size-table .size-table-header span {
  display: block;
  font-size: 0.875em;
}
.size-table .size-value {
  line-height: 2.25;
}

/*    .SIZE-UNIT-TOGGLE    */

.size-unit-toggle {
  margin-top: 1rem;
  font-size: 0.75em;
  color: hsl(97, 3%, 30%);
  overflow: hidden;
}
body.dark .size-unit-toggle {
  color: hsl(97, 3%, 70%);
}
.size-unit-toggle span {
  display: block;
  float: left;
  line-height: 2;
  width: 4.375rem;
  text-align: center;
  cursor: pointer;
  border: 1px solid hsl(97, 3%, 95%);
}
body.dark .size-unit-toggle span {
  border: 1px solid hsl(97, 3%, 0%);
}
.size-unit-toggle span.active {
  border: 1px solid hsl(97, 3%, 30%);
}
body.dark .size-unit-toggle span.active {
  border: 1px solid hsl(97, 3%, 70%);
}

/* =============================================================================
   .SHOP-TOGGLE-OPTION
   ========================================================================== */

.shop-toggle-wrap:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}
.shop-toggle-wrap {
  clear: both;
  margin-top: 1.5rem;
  color: hsl(34, 3%, 30%);
}
@media only screen and (max-width: 767px) {
  .shop-toggle-wrap {
    margin-top: 0.5rem;
  }
}
label.special-offer {
  float: left;
  position: relative;
  display: inline-block;
  margin-right: 1em;
  font-size: 1em;
  line-height: 32px;
}
label.special-offer ~ * {
  display: none;
}
body.dark label.special-offer {
  color: hsl(97, 3%, 95%);
}
label.special-offer span {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875em;
  line-height: 1;
  color: hsl(34, 3%, 50%);
}
label.special-offer span i {
  cursor: help;
}
label.special-offer input {
  float: left;
  display: block;
  width: 200px;
  margin-right: 1rem;
  padding: 10px;
  line-height: 20px;
  text-transform: uppercase;
  background-color: hsl(97, 3%, 92%);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
body.dark label.special-offer input {
  box-shadow: inset 0 0 0 1px hsl(34, 3%, 20%);
  background-color: hsl(97, 3%, 20%);
}
body.dark label.special-offer input:focus {
  box-shadow: inset 0 0 0 1px #bea22f;
}
label.special-offer button {
  margin-right: auto;
}
label.special-offer .caption {
  float: left;
  clear: both;
  margin-top: 0.375rem;
  display: none;
}
body.dark label.special-offer.fail input,
label.special-offer.fail input {
  box-shadow: inset 0 0 0 1px hsl(5, 65%, 65%);
}
body.dark label.special-offer.fail .caption,
label.special-offer.fail .caption {
  display: block;
  color: hsl(5, 65%, 65%);
}
.shop-select + .btnCon,
.shop-toggle-option + .btnCon,
.shop-toggle-option + .shop-select,
.shop-select + .shop-select {
  padding-top: 1.5rem;
}
.shop-select {
  clear: both;
}
.s-ptimes .shop-select-size {
  display: none;
}
.shop-select-size span {
  font-size: 0.8rem;
  margin-bottom: 0.75em;
  display: block;
}
.shop-select-size .size-btn-wrap {}
.shop-select-size .size-btn-wrap:after {
  /* clearfix */
  content: ' ';
  visibility: hidden;
  height: 0;
  display: table;
  clear: both;
}

/*    SIZE-BTN    */

.shop-select-size .size-btn {
  float: left;
  width: 3rem;
  margin-right: 1rem;
  line-height: 2rem;
  text-align: center;
  border: 1px solid hsl(97, 3%, 80%);
  cursor: pointer;
}
.shop-select-size .size-btn:hover {
  background-color: hsl(97, 3%, 97%);
}
.shop-select-size .size-btn.active:hover,
.shop-select-size .size-btn.active {
  color: hsl(97, 3%, 97%);
  border-color: hsl(97, 3%, 30%);
  background-color: hsl(97, 3%, 30%);
  box-shadow: 0 0 0 2px hsl(97, 3%, 95%), 0 0 0 4px hsl(97, 3%, 30%);
}
@media only screen and (max-width: 568px) {
  .shop-select-size .size-btn {
    width: 16.8%;
    margin: auto;
  }
  .shop-select-size .size-btn ~ .size-btn {
    margin-left: 4%;
  }
}

/*    SIZE-BTN.UNAVAILABLE    */

.shop-select-size .size-btn.unavailable:hover,
.shop-select-size .size-btn.unavailable {
  position: relative;
  cursor: not-allowed;
  color: hsl(97, 3%, 80%);
  border-color: hsl(97, 3%, 80%);
  background-color: hsl(97, 3%, 92%);
  overflow: hidden;
}
.shop-select-size .size-btn.unavailable:after,
.shop-select-size .size-btn.unavailable:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: -0.25rem;
  right: -0.25rem;
  bottom: 0;
  margin: auto;
  height: 1px;
  background-color: hsl(97, 3%, 80%);
}
.shop-select-size .size-btn.unavailable:before {
  -webkit-transform: skewY(35deg) scale(1.25);
  -moz-transform: skewY(35deg) scale(1.25);
  -ms-transform: skewY(35deg) scale(1.25);
  -o-transform: skewY(35deg) scale(1.25);
  transform: skewY(35deg) scale(1.25);
}
.shop-select-size .size-btn.unavailable:after {
  -webkit-transform: skewY(325deg) scale(1.25);
  -moz-transform: skewY(325deg) scale(1.25);
  -ms-transform: skewY(325deg) scale(1.25);
  -o-transform: skewY(325deg) scale(1.25);
  transform: skewY(325deg) scale(1.25);
}

/*    .SHOP-TOGGLE-OPTION    */

.shop-toggle-option {
  position: relative;
  width: 100%;
  padding: 0.75em 1em;
  padding-right: 7rem;
  border-radius: 3px;
  border: 1px solid hsl(97, 3%, 80%);
  cursor: pointer;
}
.shop-toggle-option.active:hover,
.shop-toggle-option.active {
  background-color: hsl(97, 3%, 97%);
  border: 1px solid hsl(97, 3%, 30%);
}
.shop-toggle-option + .shop-toggle-option {
  margin-top: 1em;
}
.desktop .shop-toggle-option:hover {
  box-shadow: 0 1em 2em -0.5rem rgba(0, 0, 0, 0.1);
}
.shop-toggle-option .shop-toggle-head {
  font-size: 1rem;
}
.shopInfo .shopModule .shop-toggle-option h5 {
  color: hsl(97, 3%, 50%);
  text-align: left;
}
.shopInfo .shopModule .shop-toggle-option .shop-price {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0 0.75em;
  line-height: 1;
  height: 1em;
}
@media only screen and (max-width: 568px) {
  .shop-toggle-option + .shop-toggle-option {
    margin-top: 0.75em;
  }
}

/*    TRANSITION    */

.shop-select-size .size-btn,
.shop-toggle-option {
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

/* =============================================================================
   .SHOPSECTION.QNA
   ========================================================================== */

.shopSection.QnA {
  padding: 3rem 0;
  background-color: hsl(97, 3%, 92%);
}
body.dark .shopSection.QnA {
  background-color: hsl(97, 3%, 0%);
}
.shopSection.QnA a {
  color: #bea22f;
  font-weight: bold;
  word-break: keep-all;
}
.shopSection.QnA a:hover {
  text-decoration: underline;
}
.shopSection.QnA .maxWrapper {
  max-width: 1024px;
}
.shopSection.QnA h5 {
  margin-top: 1.5rem;
}
body.dark .shopSection.QnA h5 {
  color: hsl(97, 3%, 80%);
}
.shopQnA-list {
  clear: both;
  padding-top: 2rem;
}
.shopQnA-row {
  border-top: 1px solid hsl(97, 3%, 80%);
}
body.dark .shopQnA-row {
  border-top: 1px solid hsl(97, 3%, 20%);
}
@media only screen and (max-width: 768px) {
  .shopSection.QnA {
    padding: 2rem 0;
  }
  .shopQnA-list {
    padding-top: 1rem;
  }
  .shopSection.QnA h5 {
    margin-top: 0.5rem;
  }
}

/*    .SHOPQNA-ROW .SHOPQNA-TITLE    */

.shopQnA-row .shopQnA-title {
  position: relative;
  padding: 1em 0;
  padding-right: 56px;
  cursor: pointer;
}
.shopQnA-row .shopQnA-title:hover {
  text-decoration: underline;
}
.shopQnA-row .shopQnA-title h3 {
  font-size: 0.875rem;
  line-height: 1.75;
  color: hsl(97, 3%, 30%);
}
body.dark .shopQnA-row .shopQnA-title h3 {
  color: hsl(97, 3%, 80%);
}
.shopQnA-row .shopQnA-title i {
  position: absolute;
  top: 0;
  right: 0;
  height: 56px;
  width: 56px;
  line-height: 56px;
  font-size: 1.5rem;
  text-align: center;
}
.shopQnA-row .shopQnA-title.active + .shopQnA-body {
  opacity: 1;
}
.shopQnA-row .shopQnA-title.active i {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
@media only screen and (max-width: 768px) {
  .shopQnA-row .shopQnA-title {
    padding-right: 3rem;
  }
  .shopQnA-row .shopQnA-title i {
    width: 2.5rem;
  }
}
@media only screen and (max-width: 640px) {
  .shopQnA-row .shopQnA-title {
    padding-right: 2rem;
  }
  .shopQnA-row .shopQnA-title i {
    width: 2rem;
  }
}

/*    .SHOPQNA-ROW .SHOPQNA-BODY    */

.shopQnA-row .shopQnA-body {
  padding-right: 56px;
  padding-bottom: 1.5rem;
  display: none;
  opacity: 0;
}
.shopQnA-row .shopQnA-body p {
  font-size: 0.875rem;
  line-height: 1.75;
  color: hsl(97, 3%, 30%);
}
body.dark .shopQnA-row .shopQnA-body p {
  color: hsl(97, 3%, 80%);
}
.shopQnA-row .shopQnA-body p + .shopQnA-body-list {
  margin-top: 1rem;
}
.shopQnA-row .shopQnA-body-list {
  padding-left: 1.11111em;
}
.shopQnA-row .shopQnA-body-list li {
  list-style-type: disc;
  font-size: 0.875rem;
  line-height: 1.75;
  color: hsl(97, 3%, 30%);
}
body.dark .shopQnA-row .shopQnA-body-list li {
  color: hsl(97, 3%, 80%);
}
@media only screen and (max-width: 640px) {
  .shopQnA-row .shopQnA-body {
    padding-right: 0;
  }
}

/*    TRANSITION    */

.shopQnA-row .shopQnA-body {
  -webkit-transition: opacity 300ms ease;
  -moz-transition: opacity 300ms ease;
  -ms-transition: opacity 300ms ease;
  -o-transition: opacity 300ms ease;
  transition: opacity 300ms ease;
}