.page-shop {}
.page-shop .footer { background-color: #f4f6f9;}
.section-banner {display: block; position: relative;}
.section-banner-m {display: none; position: relative;}
/* .section-banner .banner-img { display: block; background-image: url('../images/shop-banner-1.png'); background-size: contain; background-repeat: no-repeat; background-position-x: center; background-position-y: center; width: 100%; height: 690px;} */
.section-banner .banner-img { display: block; margin: 0 auto;}
.section-banner-m .banner-img { display: block; margin: 0 auto;}
.section-banner .slick-dots {position: absolute; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); display: -webkit-box; display: -ms-flexbox; display: flex;}
.section-banner .slick-dots li button { font-size: 0; width: 15px; height: 15px; border-radius: 7.5px; background-color: #fff; opacity: 0.2;}
.section-banner .slick-dots li { margin-right: 15px; height: 15px; }
.section-banner .slick-dots li:last-child { margin-right: 0px; }
.section-banner .slick-dots li.slick-active button { opacity: 1; }
.page-shop .section-shop {}
.page-shop .section-shop .shop-header { margin-top: 0px; -webkit-box-shadow: inset 0px -1px 0 0 #dddddd; box-shadow: inset 0px -1px 0 0 #dddddd; height: 60px;}
.page-shop .section-shop .shop-header .inner { height: 60px; text-align: center; line-height: 56px;}
.page-shop .section-shop .shop-header ul { list-style: none; display: inline-block;}
.page-shop .section-shop .shop-header ul li { float: left; margin-right: 70px; cursor: pointer; font-size: 14px; padding: 0 10px;}
.page-shop .section-shop .shop-header ul li:last-child { margin-right: 0px;}
.page-shop .section-shop .shop-header ul li.active { border-bottom: 4px solid #333; font-weight: 500; }
.page-shop .section-shop .shop-content-wrapper { margin-top: 100px; }
.page-shop .section-shop .shop-content-wrapper .shop-content-title { font-size: 18px; font-weight: 500; color: #2b354e; margin-bottom: 30px; }
.page-shop .section-shop .shop-content-wrapper .shop-content { margin-bottom: 50px; width: calc(100% + 20px); }
.page-shop .section-shop .shop-content-wrapper .shop-content.featured { margin-bottom: 130px;}
.shop-content .arrow-left { cursor: pointer; position: absolute; top: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 0px; margin-top: -45px; z-index: 200; }
.shop-content .arrow-right {cursor: pointer; position: absolute; top: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); right: -60px; margin-top: -45px; z-index: 200; }
.shop-content .shop-item-type { padding: 0px 5px; border: 1px solid black; border-radius: 3px; display: inline-block; vertical-align: middle; color: black; margin-bottom: 10px; font-size: 12px; height: 20px; line-height: 20px;}
.shop-content .shop-item-type.gif { margin-left: 10px;}
.shop-content .shop-item-type.arcontents { color: white; background: black; border: none; }
.shop-content .shop-item-type.sticker-effects { color: white; background: #42b72d; border: none; }
.shop-content .shop-item-type.filter { color: white; background: #8430e6; border: none; }
.shop-content .shop-item-type.segmentation { color: white; background: #ef6532; border: none; }

.slider-container { min-width: 0;}
.slider-item-wrapper {position: relative; border: 1px solid #dddddd; border-radius: 6px; overflow: hidden; background: white; cursor: pointer; width: calc(100% - 20px); }
.shop-badge { position: absolute; z-index: 100; top: 0px; left: 0px; }
.shop-badge-amount { position: absolute; z-index: 100; width: 30px !important; height: 30px !important; bottom: 15px; right: 15px; }
.slider-item-wrapper .slider-item-hover-wrapper { display: none; position: absolute; width: 100%; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 10; background-color: rgba(0,0,0,0.2) };
.slider-item-wrapper { background: #f4f6f9; -webkit-box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1) };
.slider-item-wrapper .shop-item-type { margin-bottom: 20px; }
.slider-item-wrapper .shop-item-title { color: white; font-size: 18px; margin-bottom: 30px; }
.slider-item-wrapper .shop-item-splitter { width: 30px; height: 1px; background: white; margin-bottom: 25px; }
.slider-item-wrapper .shop-item-price { color: white; font-size: 20px; }
.slider-item-wrapper .shop-item-img-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; }
.slider-item-wrapper .shop-item-img-wrapper img { width: 100%; height: 100%; } 
.package-item-wrapper { margin-right: 20px; border-radius: 6px; overflow: hidden; cursor: pointer;}

.top-item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 15px 25px; margin-right: 20px; border-radius: 6px; border: 1px solid #ddd; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; }
.top-item-wrapper:nth-child(2n + 1) { margin-bottom: 20px; }
.top-item-rank { font-size: 24px; margin-right: 30px; font-weight: 500; }
.top-item-img { width: 90px; height: 90px; margin-right: 20px; }
.top-item-img  img { width: 100%; height: 100%; }
.top-item-detail { height: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; }
.shop-item-type { margin-bottom: 20px; }
.top-item-wrapper .shop-item-price { position: absolute; top: 15px; right: 5px; color: #ffa700; }

.shop-content.grid {display: -ms-grid;display: grid; grid-gap: 25px; -ms-grid-columns: 1fr 25px 1fr 25px 1fr 25px 1fr 25px 1fr; grid-template-columns: repeat(5, 1fr); line-height: 1.25;}
.shop-item-wrapper { position: relative; border: 1px solid #dddddd; border-radius: 6px; overflow: hidden; background: white; cursor: pointer; }
.shop-item-wrapper:hover { background: #f4f6f9; -webkit-box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1); }
.shop-item-img-wrapper { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; }
.shop-item-img-wrapper img { width: 100%; height: 100%; }
.shop-item-description { height: 120px; padding: 20px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; }
.shop-item-description .shop-item-title { font-weight: 500; font-size: 14px; margin-bottom: 10px; }
.shop-item-description .shop-item-price { position: absolute; bottom: 20px; left: 20px; color: #ffa700; font-size: 16px; }

.paginate-wrapper { display: block; margin-top: 100px; margin-bottom: 130px; text-align: center; }
.paginate-wrapper-m { display: none; }
.paginate-box { width: 30px; height: 30px; text-align: center; color: #999999; line-height: 30px; display: inline-block; border-radius: 6px; border: 1px solid #dddddd; background: white; margin: 0px 5px; cursor: pointer; }
.paginate-box.inactive { color: #ddd; cursor: not-allowed; }
.paginate-box.active { color: #3063e6; border: 1px solid #3063e6; }
.paginate-box:hover { background: #f4f6f9; color: #3063e6; }

@media screen and (max-width: 1209px) {
  .shop-content.grid { -ms-grid-columns: 1fr 25px 1fr 25px 1fr 25px 1fr; grid-template-columns: repeat(4, 1fr);}
  .page-shop .section-shop .shop-header ul { display: block; white-space: nowrap; overflow-x: scroll;}
  .page-shop .section-shop .shop-header ul::-webkit-scrollbar { display: none; }
  .page-shop .section-shop .shop-header ul li { float: none; display: inline-block; margin-right: 25px;}
}

@media screen and (max-width: 770px) {
  .shop-content.grid { -ms-grid-columns: 1fr 25px 1fr 25px 1fr; grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 700px) {
  .shop-content.grid { -ms-grid-columns: 1fr 25px 1fr; grid-template-columns: repeat(2, 1fr);}
  .section-banner { display: none;}
  .section-banner-m { display: block; }
  .section-banner-m .slick-dots {position: absolute; bottom: 30px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); display: -webkit-box; display: -ms-flexbox; display: flex;}
  .section-banner-m .slick-dots li button { font-size: 0; width: 15px; height: 15px; border-radius: 7.5px; background-color: #fff; opacity: 0.2;}
  .section-banner-m .slick-dots li { margin-right: 15px; height: 15px; }
  .section-banner-m .slick-dots li:last-child { margin-right: 0px; }
  .section-banner-m .slick-dots li.slick-active button { opacity: 1; }
  .shop-content.package .slider-container { margin-bottom: 10px;}
  .page-shop .section-shop .shop-content-wrapper { margin-top: 50px; margin-bottom: 100px;}
  .shop-badge { width: 36px;}
  .page-shop .section-shop .shop-content-wrapper .shop-content-title { margin-bottom: 20px;}
  .page-shop .section-shop .shop-content-wrapper .shop-content { margin-bottom: 35px;}
  .page-shop .section-shop .shop-content-wrapper .shop-content.featured { margin-bottom: 80px;}
  .page-shop .section-shop .shop-content-wrapper .shop-content.grid { width: 100%; grid-gap: 10px;}
  .page-shop .section-shop .shop-content-wrapper .shop-content .slick-slide { width: 150px;}
  .top-item-wrapper { margin-bottom: 10px; padding: 20px;}
  .top-item-wrapper .top-item-rank { margin-right: 15px;}
  .top-item-wrapper .top-item-img { width: 60px; height: 60px; margin-right: 15px;}

  .slider-item-wrapper .shop-item-title { font-size: 16px; max-width: 75%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
  .shop-item-description .shop-item-title { font-size: 12px; font-weight: 500;}
  .shop-item-description .shop-item-price { font-size: 12px;}
  .shop-content.new { width: 100%; white-space: nowrap; overflow-x: scroll; height: 160px; -ms-overflow-style: none;}
  .shop-content.new::-webkit-scrollbar {display: none; }
  .shop-content.featured { width: 100%; white-space: nowrap; overflow-x: scroll; height: 160px; -ms-overflow-style: none; }
  .shop-content.featured::-webkit-scrollbar {display: none; }
  .shop-content.new .slider-container { width: 150px; height: 150px; display: inline-block; margin-right: 10px;}
  .shop-content.featured .slider-container { width: 150px; height: 150px; display: inline-block; margin-right: 10px;}
  .shop-content.new .slider-item-wrapper { width: 100%; }
  .shop-content.featured .slider-item-wrapper { width: 100%; }
  .paginate-wrapper { display: none;}
  .paginate-wrapper-m { display: block; font-size: 16px; background-color: #3063e6; border-radius: 25px; height: 50px; color: white; text-align: center; line-height: 50px;}
  .shop-content .slick-dots { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: -40px; right: 20px; line-height: 10px; }
  .shop-content .slick-dots li button { font-size: 0; width: 10px; height: 10px; border-radius: 5px; background-color: #20283b; opacity: 0.2;}
  .shop-content .slick-dots li { margin-right: 5px; }
  .shop-content .slick-dots li:last-child { margin-right: 0px; }
  .shop-content .slick-dots li.slick-active button { opacity: 1; }
  .shop-badge-amount { width: 20px !important; height: 20px !important;}
  .shop-content .shop-item-type { font-size: 11px; }
  .shop-content.grid .shop-item-type { margin-bottom: 0px;}
}