@charset "UTF-8";
.pro-category .caption .favo a:before, .ranking .ranking-item .caption .favo a:before, #mob-nav .nav li .dropdown-menu li ul .dropdown-header a:before, #mob-nav .nav li .dropdown-toggle span:before, #pc-navbar .nav li .dropdown-menu li li a:before, #pc-navbar .nav li .dropdown-toggle span:before, .mob-topnav .topright .mbr-menu li a:before, .float-wrap .float-ad .gotop a:before, footer .cust-service .tel:before, .topnav-group .topright .mbr-menu li a:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  resize: none;
  outline: none;
}

button, input, textarea, select {
  resize: none;
  outline: none;
}

* img {
  max-width: 100% !important;
  height: auto !important;
  border: none;
}

div {
  word-wrap: break-word;
  word-break: break-all;
}

body {
  margin: 0px !important;
  padding: 0px;
  font: 100%/1.5 "微軟正黑體", sans-serif;
  letter-spacing: 0.25px;
  color: #595757;
}

figure {
  margin: 0;
  line-height: 0;
}

header,
section,
main,
footer {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.inner {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  clear: both;
  position: relative;
  z-index: 1;
}

header {
  display: none;
}
@media (min-width: 1025px) {
  header {
    display: block;
  }
}

header.m-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.logo {
  float: left;
  margin: 16px 0 0 20px;
}
@media (min-width: 1280px) {
  .logo {
    margin: 16px 0 0 30px;
  }
}
.logo a {
  display: block;
  line-height: 0;
}
.logo a img {
  height: 40px !important;
}
.logo a .huge-logo {
  display: none;
}
@media (min-width: 1280px) {
  .logo a .huge-logo {
    display: block;
  }
}
.logo a .wide-logo {
  display: block;
}
@media (min-width: 1280px) {
  .logo a .wide-logo {
    display: none;
  }
}

.topnav-group {
  float: right;
}
.topnav-group .topright li {
  display: inline-block;
  position: relative;
  border-left: #e5e5e5 solid 1px;
}
.topnav-group .topright li a {
  display: block;
  font-size: 0;
  position: relative;
  padding: 27px 15px;
}
@media (min-width: 1280px) {
  .topnav-group .topright li a {
    padding: 27px;
  }
}
.topnav-group .topright li a:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.topnav-group .topright li .member:after {
  background: url(../images/ico/ico-member.png) 0 0 no-repeat;
  background-size: 20px;
}
.topnav-group .topright li .member .identity {
  font-size: 14px;
  line-height: normal;
  color: #595757;
  vertical-align: middle;
  margin: 0 5px 0 0;
}
.topnav-group .topright li .cart:after {
  background: url(../images/ico/ico-cart.png) 0 0 no-repeat;
  background-size: 20px;
}
.topnav-group .topright li .cart .cart-num {
  display: inline-block;
  background: #afbadc;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  color: #ffffff;
  font-size: 9px;
  font-family: "Nunito", sans-serif;
  text-align: center;
  line-height: 15px;
  margin: -5px 0 0 19px;
}
.topnav-group .topright li .search:after {
  background: url(../images/ico/ico-search.png) 0 0 no-repeat;
  background-size: 20px;
}
.topnav-group .topright .mbr-on .member:after {
  background: url(../images/ico/ico-member-login.png) 0 0 no-repeat;
  background-size: 20px;
}
.topnav-group .topright .mbr-menu {
  display: none;
  position: absolute;
  z-index: 100;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
  min-width: 170px;
  right: 0;
  padding: 20px 25px;
}
.topnav-group .topright .mbr-menu li {
  border-left: none;
  width: 100%;
  margin: 0 0 2px 0;
}
.topnav-group .topright .mbr-menu li a {
  padding: 0;
  color: #595757;
  font-size: 15px;
  line-height: 23px;
}
.topnav-group .topright .mbr-menu li a:before {
  content: "\f0da";
  color: #595757;
  margin: 0 5px 0 0;
}
.topnav-group .topright .mbr-menu li a:after {
  display: none;
}
.topnav-group .topright .mbr-menu li a:hover {
  color: #000000;
  text-decoration: underline;
}
.topnav-group .topright .mbr-menu li a:hover:before {
  color: #ee618c;
}

#sch-wrap {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  background: #ffffff;
  width: 90%;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
@media (min-width: 1025px) {
  #sch-wrap {
    width: 45%;
  }
}
#sch-wrap .modal-header {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  background: #f5f5f5;
  color: #000000;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 20px;
  position: relative;
}
#sch-wrap .modal-header .close-btn {
  font-size: 0;
  position: absolute;
  right: 27px;
  top: 27px;
  z-index: 10;
  cursor: pointer;
}
#sch-wrap .modal-header .close-btn:before, #sch-wrap .modal-header .close-btn:after {
  content: "";
  display: inline-block;
  background: #000000;
  width: 12px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
}
#sch-wrap .modal-header .close-btn:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#sch-wrap .modal-header .close-btn:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#sch-wrap .modal-body {
  padding: 20px;
}
#sch-wrap .modal-body fieldset {
  border: #dfdfdf solid 2px;
  padding: 15px 20px 5px 20px;
}
#sch-wrap .modal-body legend {
  color: #121212;
  font-size: 18px;
}
#sch-wrap .modal-body .keyword {
  margin: 0 0 15px 0;
}
#sch-wrap .modal-body .keyword .sch-box {
  background: #fef4f6;
  position: relative;
}
#sch-wrap .modal-body .keyword .srch-input {
  border: none;
  background: transparent;
  height: 36px;
  padding: 5px 10px;
  width: calc(100% - 36px);
  color: #666666;
  font-family: "Nunito", sans-serif;
  letter-spacing: 0.25px;
  outline: none;
  font-size: 16px;
}
#sch-wrap .modal-body .keyword .ico-enter {
  border: none;
  background: transparent;
  padding: 0;
  position: absolute;
  right: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
}
#sch-wrap .modal-body .keyword .ico-enter span {
  font-size: 0;
  display: block;
}
#sch-wrap .modal-body .keyword .ico-enter span:after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../images/ico/ico-search.png) 0 0 no-repeat;
  background-size: 18px;
}
#sch-wrap .modal-body .label .lbl-box {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -4px 10px -4px;
}
#sch-wrap .modal-body .label .lbl-box a {
  padding: 0 4px;
  margin: 0 0 8px 0;
}
#sch-wrap .modal-body .label .lbl-box a span {
  display: block;
  font-size: 14px;
  padding: 6px 15px;
  text-align: center;
  background: #e0e0e0;
  color: #7b7b7b;
  border-radius: 20px;
}
#sch-wrap .modal-body .label .lbl-box a .active {
  background: #f0f2ff;
}
#sch-wrap .modal-body .label .lbl-btn {
  text-align: center;
}
#sch-wrap .modal-body .label .lbl-btn a {
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  padding: 5px 20px;
  margin: 0 4px;
}
#sch-wrap .modal-body .label .lbl-btn .confirm {
  background: #e85a71;
}
#sch-wrap .modal-body .label .lbl-btn .confirm:hover {
  background: #ef4a65;
}
#sch-wrap .modal-body .label .lbl-btn .cancel {
  background: #595757;
}
#sch-wrap .modal-body .label .lbl-btn .cancel:hover {
  background: #474646;
}

.fade {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

.modal {
  position: fixed;
  z-index: 100050;
  left: 50%;
  top: 10%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.hide {
  display: none;
}

.fade.in {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}

.modal.fade {
  top: -25%;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100040;
  background: #000000;
  width: 100%;
  height: 100%;
}

.modal-backdrop.fade.in {
  opacity: 0.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
}

#messageModal {
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  background: #ffffff;
  width: 100%;
  max-width: 350px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
#messageModal .modal-body {
  padding: 30px;
}
#messageModal .modal-body h4 {
  text-align: center;
  margin: 10px 0 20px 0;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
}
#messageModal .modal-body .add-btn {
  text-align: center;
}
#messageModal .modal-body .add-btn a {
  display: inline-block;
  color: #ffffff;
  font-size: 15px;
  padding: 7px 30px;
}
#messageModal .modal-body .add-btn .confirm {
  background: #595757;
}
#messageModal .modal-body .add-btn .confirm:hover {
  background: #474646;
}

footer {
  background: #fdf9fb;
  padding: 15px 0 0 0;
}
@media (min-width: 1025px) {
  footer {
    padding: 30px 0 0 0;
  }
}
@media (min-width: 1280px) {
  footer {
    padding: 50px 0 0 0;
  }
}
footer .foot-up {
  padding: 0 15px 15px 0;
}
@media (min-width: 1025px) {
  footer .foot-up {
    padding: 0 15px 30px 0;
  }
}
@media (min-width: 1280px) {
  footer .foot-up {
    padding: 0 0 50px 0;
  }
}
footer .foot-up .col-3 {
  width: 50%;
  padding: 0 0 0 15px;
  margin: 0 0 15px 0;
}
@media (min-width: 821px) {
  footer .foot-up .col-3 {
    border-left: rgba(240, 146, 165, 0.25) solid 1px;
    padding: 0 0 10px 15px;
    width: calc((100% / 12) * 3);
    margin: 0;
  }
}
footer .foot-up .col-3:first-of-type {
  border-left: none;
}
footer .foot-up h2 {
  margin: 0 0 3px 0;
  color: #ee618c;
  font-size: 16px;
  font-family: "Nunito", sans-serif;
}
footer .foot-up ul a {
  color: #595757;
  font-size: 13px;
  line-height: 18px;
}
footer .foot-up ul a:hover {
  text-decoration: underline;
}
footer .follow {
  margin: 0 0 20px 0;
}
footer .follow .cm-wrap {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 769px) {
  footer .follow .cm-wrap {
    display: block;
  }
}
footer .follow .cm-wrap a {
  font-size: 0;
  display: inline-block;
  width: calc(100% / 4);
}
@media (min-width: 769px) {
  footer .follow .cm-wrap a {
    width: auto;
  }
}
footer .follow .cm-wrap a:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 42px;
}
@media (min-width: 480px) {
  footer .follow .cm-wrap a:before {
    height: 36px;
    width: 36px;
  }
}
footer .follow .cm-wrap a:hover:before {
  background-color: #ffe5e5;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
footer .follow .cm-wrap .ico-fb:before {
  background: url(../images/ico/ico-fb.png) center no-repeat;
  background-size: 42px;
}
@media (min-width: 480px) {
  footer .follow .cm-wrap .ico-fb:before {
    background-size: 36px;
  }
}
footer .follow .cm-wrap .ico-line:before {
  background: url(../images/ico/ico-line.png) center no-repeat;
  background-size: 40px;
}
@media (min-width: 480px) {
  footer .follow .cm-wrap .ico-line:before {
    background-size: 36px;
  }
}
footer .follow .cm-wrap .ico-ig:before {
  background: url(../images/ico/ico-ig.png) center no-repeat;
  background-size: 40px;
}
@media (min-width: 480px) {
  footer .follow .cm-wrap .ico-ig:before {
    background-size: 36px;
  }
}
footer .follow .cm-wrap .ico-youtube:before {
  background: url(../images/ico/ico-youtube.png) center no-repeat;
  background-size: 42px;
}
@media (min-width: 480px) {
  footer .follow .cm-wrap .ico-youtube:before {
    background-size: 36px;
  }
}
footer .cust-service p {
  margin: 0;
}
footer .cust-service .tel {
  color: #777ca8;
  font-family: "Nunito", sans-serif;
  font-size: 17px;
  font-weight: bold;
}
footer .cust-service .tel:before {
  content: "\f095";
  margin: 0 5px 0 0;
  font-size: 18px;
}
footer .cust-service .txt {
  color: #595757;
  font-size: 13px;
  line-height: 18px;
}
footer .cust-service .map-link {
  color: #595757;
  font-size: 13px;
  line-height: 18px;
  margin: 12px 0 0 0;
}
footer .cust-service .map-link a {
  color: #595757;
}
footer .cust-service .map-link a:hover {
  color: #777ca8;
  text-decoration: underline;
}
footer .pc-cust-sev {
  display: none;
}
@media (min-width: 821px) {
  footer .pc-cust-sev {
    display: block;
  }
}
footer .mob-cust-sev {
  padding: 0 0 0 15px;
}
@media (min-width: 821px) {
  footer .mob-cust-sev {
    display: none;
  }
}
footer .foot-down {
  border-top: rgba(240, 146, 165, 0.25) solid 1px;
  padding: 8px 15px;
}
@media (min-width: 1280px) {
  footer .foot-down {
    padding: 8px 0;
  }
}
footer .foot-down .f-logo {
  text-align: center;
}
@media (min-width: 821px) {
  footer .foot-down .f-logo {
    display: inline-block;
    text-align: left;
  }
}
footer .foot-down .f-logo img {
  height: 35px !important;
  vertical-align: middle;
}
footer .foot-down .f-logo span {
  font-size: 13px;
  line-height: 18px;
  color: #595757;
  display: block;
  margin: 8px 0 0 0;
}
@media (min-width: 821px) {
  footer .foot-down .f-logo span {
    display: inline-block;
    margin: 0 0 0 5px;
  }
}
footer .foot-down .f-copy {
  text-align: center;
  font-size: 12px;
  color: #595757;
  font-family: "Nunito", sans-serif;
  margin: 8px 0 0 0;
}
@media (min-width: 480px) {
  footer .foot-down .f-copy {
    font-size: 13px;
  }
}
@media (min-width: 821px) {
  footer .foot-down .f-copy {
    float: right;
    text-align: left;
  }
}

.float-wrap {
  position: absolute;
  z-index: 99;
  display: none;
  width: 80px;
}
.float-wrap .close-ad, .float-wrap .open-ad {
  background: #595757;
  width: 100%;
  height: 23px;
  line-height: 18px;
  display: block;
  position: relative;
  left: 0;
  top: 0;
  cursor: pointer;
  color: #ffffff;
  text-align: center;
}
.float-wrap .close-ad em, .float-wrap .open-ad em {
  font-size: 0;
  display: inline-block;
  font-style: normal;
  line-height: normal;
}
.float-wrap .close-ad em:before, .float-wrap .open-ad em:before {
  content: "收合";
  font-family: "微軟正黑體";
  font-size: 12px;
}
.float-wrap .close-ad span, .float-wrap .open-ad span {
  width: 12px;
  height: 1px;
  position: absolute;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  top: 11px;
  right: 5px;
  background: transparent;
}
.float-wrap .close-ad span:before, .float-wrap .close-ad span:after, .float-wrap .open-ad span:before, .float-wrap .open-ad span:after {
  content: "";
  display: inline-block;
  background: #ffffff;
  width: 12px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.float-wrap .close-ad span:before, .float-wrap .open-ad span:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.float-wrap .close-ad span:after, .float-wrap .open-ad span:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.float-wrap .open-ad em:before {
  content: "展開";
}
.float-wrap .open-ad span {
  background: #ffffff;
}
.float-wrap .open-ad span:before, .float-wrap .open-ad span:after {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.float-wrap .open-ad span:before {
  top: 4px;
}
.float-wrap .open-ad span:after {
  top: -4px;
}
.float-wrap .float-ad .ad-wrap a {
  display: block;
  line-height: 0;
}
.float-wrap .float-ad .ad-wrap a:last-of-type {
  margin: 6px 0 0 0;
}
.float-wrap .float-ad .ad-wrap .ico-histoy {
  border-radius: 50%;
  background: #B87070;
  padding: 18px;
  width: 100%;
  max-width: 75px;
  margin: 3px auto 0 auto !important;
}
.float-wrap .float-ad .ad-wrap .ico-histoy img {
  -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(11deg) brightness(103%) contrast(104%);
          filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(11deg) brightness(103%) contrast(104%);
}
.float-wrap .float-ad .gotop {
  margin: 6px 0 0 0;
}
.float-wrap .float-ad .gotop a {
  display: block;
  background: #a79c93;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  font-family: "Nunito", sans-serif;
  padding: 3px 0;
}
.float-wrap .float-ad .gotop a:before {
  content: "\f0d8";
  font-size: 18px;
  margin: 0 5px 0 0;
}
.float-wrap .close-ad ~ .float-ad {
  display: block;
}
.float-wrap .open-ad ~ .float-ad {
  display: none;
}

@media (max-width: 820px) {
  .float-wrap {
    display: none !important;
  }
}
.row {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mob-search {
  margin-left: 15px;
}
.mob-search .search {
  display: block;
  font-size: 0;
  position: relative;
  padding: 15px 0;
}
.mob-search .search:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: url(../images/ico/ico-search.png) 0 0 no-repeat;
  background-size: 20px;
}

.mob-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.mob-logo a {
  display: block;
  line-height: 0;
}
.mob-logo a img {
  height: 36px !important;
}

.mob-topnav {
  float: right;
  margin-right: 2px;
}
.mob-topnav .topright li {
  display: inline-block;
}
.mob-topnav .topright li a {
  display: block;
  font-size: 0;
  position: relative;
  padding: 15px 0;
}
.mob-topnav .topright li a:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.mob-topnav .topright li .member:after {
  background: url(../images/ico/ico-member.png) 0 0 no-repeat;
  background-size: 20px;
}
.mob-topnav .topright li .member .identity {
  font-size: 14px;
  line-height: normal;
  color: #595757;
  vertical-align: middle;
  margin: 0 5px 0 0;
}
.mob-topnav .topright li .cart {
  padding: 15px 25px 15px 15px;
}
.mob-topnav .topright li .cart:after {
  background: url(../images/ico/ico-cart.png) 0 0 no-repeat;
  background-size: 20px;
}
.mob-topnav .topright li .cart .cart-num {
  display: inline-block;
  background: #afbadc;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  width: 15px;
  height: 15px;
  position: absolute;
  color: #ffffff;
  font-size: 9px;
  font-family: "Nunito", sans-serif;
  text-align: center;
  line-height: 15px;
  margin: -5px 0 0 19px;
}
.mob-topnav .topright .mbr-on .member:after {
  background: url(../images/ico/ico-member-login.png) 0 0 no-repeat;
  background-size: 20px;
}
.mob-topnav .topright .mbr-menu {
  display: none;
  position: absolute;
  z-index: 10;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35);
  min-width: 170px;
  right: 0;
  padding: 20px 25px;
}
.mob-topnav .topright .mbr-menu li {
  border-left: none;
  width: 100%;
  margin: 0 0 2px 0;
}
.mob-topnav .topright .mbr-menu li a {
  padding: 0;
  color: #595757;
  font-size: 15px;
  line-height: 23px;
}
.mob-topnav .topright .mbr-menu li a:before {
  content: "\f0da";
  color: #595757;
  margin: 0 5px 0 0;
}
.mob-topnav .topright .mbr-menu li a:after {
  display: none;
}
.mob-topnav .topright .mbr-menu li a:hover {
  color: #000000;
  text-decoration: underline;
}
.mob-topnav .topright .mbr-menu li a:hover:before {
  color: #ee618c;
}

.mbr-right-float {
  position: fixed;
  right: 8px;
  bottom: 110px;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (min-width: 821px) {
  .mbr-right-float {
    display: none;
  }
}
.mbr-right-float .mbr-line a {
  display: block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  overflow: hidden;
  -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
  background: #00c200;
  padding: 1px;
}
.mbr-right-float .mbr-line a:after {
  content: "";
  display: block;
  background: url(../images/ico/float-icon-line.png) 0 0 no-repeat;
  width: 28px;
  height: 28px;
  background-size: 100%;
}
.mbr-right-float .mbr-histoy {
  margin: 5px 0;
}
.mbr-right-float .mbr-histoy a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
  background: #B87070;
  width: 30px;
  height: 30px;
  padding: 7px;
}
.mbr-right-float .mbr-histoy img {
  -webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(11deg) brightness(103%) contrast(104%);
          filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(11deg) brightness(103%) contrast(104%);
}
.mbr-right-float .mbr-gotop {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.mbr-right-float .mbr-gotop a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #ee618c;
  text-align: center;
  line-height: 27px;
  color: #ffffff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.2);
}
.mbr-right-float .mbr-gotop .fa-angle-up {
  font-size: 16px;
}
.mbr-right-float .mbr-gotop.show {
  opacity: 1;
  visibility: visible;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .topnav-group .topright li .cart .cart-num {
    margin: -5px 0 0 0;
  }
}
a.bars_close {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #000000;
  opacity: 0.3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  z-index: 10;
  top: 0;
  right: 0;
}
@media (min-width: 1025px) {
  a.bars_close {
    display: none;
  }
}

#navbar_top {
  background: #ffffff;
  width: 100%;
  position: fixed;
  z-index: 1000;
  height: 50px;
  top: 0;
}
@media (min-width: 1025px) {
  #navbar_top {
    display: none;
  }
}

.mob-navbar {
  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

#pageslide {
  display: none;
  position: absolute;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 9999;
  width: 100%;
  padding: 0;
}
@media (min-width: 1025px) {
  #pageslide {
    display: none !important;
  }
}

#rwd_nav {
  width: 22px;
  margin: 0;
  padding-top: 0;
  position: fixed;
  z-index: 10000;
  left: 15px;
  top: 14px;
}
#rwd_nav .ico {
  width: 100%;
  height: 22px;
  position: relative;
  padding-top: 11px;
}
#rwd_nav .ico span {
  width: 100%;
  height: 2px;
  position: absolute;
  background: #ed8ea6;
  display: block;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
#rwd_nav .ico span:before, #rwd_nav .ico span:after {
  content: "";
  left: 0;
  top: -9px;
  width: 100%;
  height: 2px;
  position: absolute;
  background: #ed8ea6;
  display: block;
  -webkit-transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
#rwd_nav .ico span:after {
  top: 9px;
}
@media (min-width: 1025px) {
  #rwd_nav {
    display: none;
  }
}

.active .ico span {
  background: transparent !important;
}
.active .ico span:before {
  top: 0 !important;
  height: 2px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #afbadc !important;
}
.active .ico span:after {
  top: 0 !important;
  height: 2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #afbadc !important;
}

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

#pc-navbar {
  float: left;
  margin: 0 0 0 15px;
}
@media (min-width: 1280px) {
  #pc-navbar {
    margin: 0 0 0 60px;
  }
}
#pc-navbar .nav {
  float: left;
  width: 100%;
}
#pc-navbar .nav li {
  float: left;
}
#pc-navbar .nav li a {
  color: #595757;
  padding: 0 15px;
  float: left;
  position: relative;
}
@media (min-width: 1280px) {
  #pc-navbar .nav li a {
    padding: 0 20px;
  }
}
@media (min-width: 1400px) {
  #pc-navbar .nav li a {
    padding: 0 25px;
  }
}
#pc-navbar .nav li a span {
  display: block;
  position: relative;
  padding: 25px 0;
}
#pc-navbar .nav li a span:after {
  content: "";
  display: block;
  background: #f9657e;
  height: 3px;
  position: absolute;
  bottom: 0;
  width: 0%;
  left: 0;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#pc-navbar .nav li .dropdown-toggle span:before {
  content: "\f107";
  position: absolute;
  right: -15px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#pc-navbar .nav li .dropdown-menu {
  width: 100%;
  position: absolute;
  left: 0;
  top: 74px;
  background: #ffffff;
  padding: 25px 0;
  -webkit-box-shadow: 0px 5px 21px rgba(0, 0, 0, 0.09);
  box-shadow: 0px 5px 21px rgba(0, 0, 0, 0.09);
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#pc-navbar .nav li .dropdown-menu .inner {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
#pc-navbar .nav li .dropdown-menu li {
  width: calc(100% / 6);
}
#pc-navbar .nav li .dropdown-menu li li {
  width: 100%;
  margin: 0 0 5px 0;
}
#pc-navbar .nav li .dropdown-menu li li a {
  padding: 0;
  font-size: 14px;
  line-height: 22px;
}
#pc-navbar .nav li .dropdown-menu li li a:before {
  content: "\f0da";
  color: #cccccc;
  margin: 0 5px 0 3px;
}
#pc-navbar .nav li .dropdown-menu li li a:hover {
  text-decoration: underline;
}
#pc-navbar .nav li .dropdown-menu li .dropdown-header {
  color: #f9657e;
  margin: 0 0 8px 0;
}
#pc-navbar .nav li:hover a span:after {
  width: 100%;
}
#pc-navbar .nav li:hover .dropdown-menu {
  z-index: 100;
  display: block;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}

#mob-nav {
  width: 100%;
  display: none;
  position: fixed;
  top: 0;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  overflow-y: auto;
}
#mob-nav .mob-nav-link {
  height: 50px;
  padding-left: 52px;
}
#mob-nav .mob-nav-link ul {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
#mob-nav .mob-nav-link li {
  display: inline-block;
  width: calc(100% / 4);
  border-left: #eeeeee solid 1px;
}
#mob-nav .mob-nav-link li a {
  display: block;
  text-align: center;
  color: #ed8ea6;
  line-height: 18px;
  padding: 5px 0;
}
#mob-nav .mob-nav-link li img {
  height: 20px !important;
  background: #ed8ea6;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  padding: 4px;
}
#mob-nav .mob-nav-link li span {
  font-size: 12px;
  display: block;
  text-align: center;
}
#mob-nav .nav {
  border-top: #eee solid 1px;
}
#mob-nav .nav li {
  border-bottom: #eee solid 1px;
}
#mob-nav .nav li a {
  display: block;
  color: #595757;
  padding: 10px 15px;
  font-weight: bold;
}
#mob-nav .nav li a.active {
  background: #F17487;
  color: #ffffff;
}
#mob-nav .nav li .dropdown-toggle span {
  position: relative;
}
#mob-nav .nav li .dropdown-toggle span:before {
  content: "\f0d7";
  position: absolute;
  right: -17px;
  top: 50%;
  -webkit-transform: translate(0, -45%);
  transform: translate(0, -45%);
  font-size: 18px;
}
#mob-nav .nav li .dropdown-menu {
  display: none;
  overflow: hidden;
}
#mob-nav .nav li .dropdown-menu li {
  border-bottom: none;
  float: left;
  width: 100%;
}
#mob-nav .nav li .dropdown-menu li a {
  padding: 5px 15px;
  font-weight: normal;
  background: #EBD6D6;
  color: #272727;
}
#mob-nav .nav li .dropdown-menu li a img {
  height: 22px !important;
  vertical-align: middle;
  margin: 0 5px 0 0;
}
#mob-nav .nav li .dropdown-menu li ul {
  overflow: hidden;
  margin: 0 0 1px 0;
}
#mob-nav .nav li .dropdown-menu li ul li a {
  padding: 5px 30px;
}
#mob-nav .nav li .dropdown-menu li ul .dropdown-header a {
  padding: 6px 20px;
  background: #F6A2A8;
  color: #ffffff;
}
#mob-nav .nav li .dropdown-menu li ul .dropdown-header a:before {
  content: "\f0da";
  font-size: 18px;
  margin: 0 5px 0 0;
}

@media (min-width: 1025px) {
  #mob-header {
    display: none;
  }
}

.index-body footer {
  margin: 0 0 60px 0;
}
@media (min-width: 821px) {
  .index-body footer {
    margin: 0;
  }
}

#banner {
  position: relative;
  margin-top: 50px;
  z-index: 0;
}
@media (min-width: 1025px) {
  #banner {
    margin-top: 0;
  }
}
#banner .swiper-slide img {
  width: 100%;
}
#banner .swiper-button-prev, #banner .swiper-button-next {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}
#banner .swiper-button-prev::after, #banner .swiper-button-next::after {
  font-size: 12px;
  color: #000000;
}
#banner .swiper-pagination-bullet {
  background: #d8d8d8;
  opacity: 1;
  margin: 0 5px;
}
#banner .swiper-pagination-bullet-active {
  background: #595757;
}

.pc-banner {
  display: none;
}
@media (min-width: 821px) {
  .pc-banner {
    display: block;
  }
}
.pc-banner .swiper-button-prev, .pc-banner .swiper-button-next {
  width: 40px;
  height: 40px;
}
@media (min-width: 1025px) {
  .pc-banner .swiper-button-prev, .pc-banner .swiper-button-next {
    width: 45px;
    height: 45px;
  }
}
.pc-banner .swiper-button-prev {
  left: 15px;
}
@media (min-width: 1025px) {
  .pc-banner .swiper-button-prev {
    left: 30px;
  }
}
.pc-banner .swiper-button-next {
  right: 15px;
}
@media (min-width: 1025px) {
  .pc-banner .swiper-button-next {
    right: 30px;
  }
}
.pc-banner .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 30px;
}
.pc-banner .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

.mob-banner {
  display: block;
}
@media (min-width: 821px) {
  .mob-banner {
    display: none;
  }
}
.mob-banner .swiper-button-prev, .mob-banner .swiper-button-next {
  width: 30px;
  height: 30px;
}
.mob-banner .swiper-button-prev {
  left: 10px;
}
.mob-banner .swiper-button-next {
  right: 10px;
}
.mob-banner .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 20px;
}

.ad {
  padding: 15px 15px 0 15px;
}
@media (min-width: 1025px) {
  .ad {
    padding: 30px 15px;
  }
}
@media (min-width: 1280px) {
  .ad {
    padding: 50px 0;
  }
}
.ad a {
  display: block;
  line-height: 0;
}
.ad a:hover {
  opacity: 0.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
}
@media (min-width: 821px) {
  .ad .row {
    margin: 0 -8px;
  }
}
.ad .row:last-of-type {
  margin: 0 -8px;
}
.ad .col-6 {
  margin: 0 0 16px 0;
  width: 100%;
}
@media (min-width: 821px) {
  .ad .col-6 {
    padding: 0 8px;
    width: calc((100% / 12) * 6);
  }
}
.ad .col-3 {
  padding: 0 8px;
  margin: 0 0 16px 0;
  width: calc((100% / 12) * 6);
}
@media (min-width: 821px) {
  .ad .col-3 {
    width: calc((100% / 12) * 3);
    margin: 0;
  }
}

.ranking {
  background: #fdf9fb;
  padding: 15px 15px 0 15px;
}
@media (min-width: 1025px) {
  .ranking {
    padding: 30px 15px;
  }
}
@media (min-width: 1280px) {
  .ranking {
    padding: 50px 0;
  }
}
.ranking .row {
  margin: 0 -8px;
}
.ranking .col-2 {
  margin: 0 0 16px 0;
  width: calc((100% / 12) * 6);
}
@media (min-width: 821px) {
  .ranking .col-2 {
    width: calc((100% / 12) * 4);
    padding: 0 8px;
  }
}
@media (min-width: 1025px) {
  .ranking .col-2 {
    width: calc((100% / 12) * 2);
  }
}
.ranking .ranking-item {
  padding: 0 8px;
  border: transparent solid 1px;
}
@media (min-width: 640px) {
  .ranking .ranking-item {
    padding: 10px;
  }
}
.ranking .ranking-item .ranking-num {
  color: #595757;
  font-size: 22px;
  line-height: normal;
  font-weight: bold;
  font-family: Arial;
  margin: 0 0 3px 0;
}
.ranking .ranking-item .ranking-num:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 18px;
  margin: 0 5px 0 0;
}
.ranking .ranking-item .num1:before {
  background: url(../images/ico/ico-crown01.png) 0 0 no-repeat;
  background-size: 22px 18px;
}
.ranking .ranking-item .num2:before {
  background: url(../images/ico/ico-crown02.png) 0 0 no-repeat;
  background-size: 22px 18px;
}
.ranking .ranking-item .num3:before {
  background: url(../images/ico/ico-crown03.png) 0 0 no-repeat;
  background-size: 22px 18px;
}
.ranking .ranking-item .num4:before {
  background: url(../images/ico/ico-crown04.png) 0 0 no-repeat;
  background-size: 22px 18px;
}
.ranking .ranking-item .ranking-img {
  margin: 0 0 7px 0;
  line-height: 0;
}
.ranking .ranking-item .ranking-img a {
  display: block;
  position: relative;
}
.ranking .ranking-item .caption .title {
  margin: 0 0 3px 0;
  font-size: 16px;
  line-height: 24px;
}
.ranking .ranking-item .caption .title a {
  color: #595757;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.ranking .ranking-item .caption p {
  margin: 0;
  display: inline-block;
}
.ranking .ranking-item .caption .price {
  color: #bb1924;
  font-family: "Nunito", sans-serif;
  font-size: 13px;
}
.ranking .ranking-item .caption .price b {
  font-size: 18px;
}
.ranking .ranking-item .caption .favo {
  float: right;
  margin: 5px 0 0 0;
}
.ranking .ranking-item .caption .favo a {
  font-size: 0;
  display: block;
}
.ranking .ranking-item .caption .favo a:before {
  content: "\f08a";
  color: #ee618c;
  font-size: 16px;
}
.ranking .ranking-item .caption .favo.active a:before {
  content: "\f004";
}
.ranking .ranking-item:hover {
  border: #f092a5 solid 1px;
}
.ranking .ranking-item:hover .ranking-img a:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(16, 14, 14, 0.3);
}

.benefits {
  background: #fcfcfc;
  padding: 15px;
}
@media (min-width: 1025px) {
  .benefits {
    padding: 30px 15px;
  }
}
@media (min-width: 1280px) {
  .benefits {
    padding: 50px 0;
  }
}
.benefits .ttl {
  text-align: center;
  font-family: "Tinos", serif;
  color: #ee618c;
  font-size: 24px;
  line-height: normal;
  margin: 0 0 15px 0;
}
.benefits .ttl span {
  display: block;
  font-family: "微軟正黑體";
  color: #595757;
  font-size: 15px;
}
@media (min-width: 480px) {
  .benefits .swiper-slide {
    padding: 0 8px;
  }
}
.benefits .swiper-slide .img {
  margin: 0 0 10px 0;
}
.benefits .swiper-slide .img a {
  display: block;
  width: 100%;
  padding-bottom: 70%;
  height: 0;
  overflow: hidden;
  position: relative;
}
.benefits .swiper-slide .img a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: 100% !important;
  max-width: none !important;
  width: auto;
}
.benefits .swiper-slide .text {
  display: block;
  line-height: normal;
}
.benefits .swiper-slide .text a {
  display: block;
  color: #595757;
}
.benefits .swiper-slide .text a:hover {
  text-decoration: underline;
}
.benefits .benef-slider .swiper-button-next,
.benefits .benef-slider .swiper-button-prev {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  background: #f092a5;
  width: 30px;
  height: 70px;
  margin-top: -55px;
}
.benefits .benef-slider .swiper-button-next:after,
.benefits .benef-slider .swiper-button-prev:after {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}
.benefits .benef-slider .swiper-button-prev {
  left: 0;
}
.benefits .benef-slider .swiper-button-next {
  right: 0;
}

.pro-category {
  padding: 0 0 15px 0;
  overflow: hidden;
}
@media (min-width: 1025px) {
  .pro-category {
    padding: 0 0 30px 0;
  }
}
@media (min-width: 1280px) {
  .pro-category {
    padding: 0 0 50px 0;
  }
}
.pro-category .category-box {
  padding: 15px 15px 0 15px;
  position: relative;
}
@media (min-width: 1025px) {
  .pro-category .category-box {
    padding: 30px 15px 0 15px;
  }
}
@media (min-width: 1280px) {
  .pro-category .category-box {
    padding: 50px 0 0 0;
  }
}
.pro-category .category-box:after {
  content: "";
  display: inline-block;
  background: url(../images/ico/ico-ttl-bg.png) right center repeat-x;
  background-size: 340px 59px;
  position: absolute;
  width: 100%;
  height: 70px;
  bottom: 57px;
  right: -100%;
  z-index: -1;
}
.pro-category .category-box .ttl {
  color: #ee618c;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  padding: 10px 0;
  text-align: center;
  margin: 0 0 15px 0;
}
@media (min-width: 480px) {
  .pro-category .category-box .ttl {
    padding: 10px 0 10px 60px;
    margin: 0 0 20px 0;
    text-align: left;
  }
}
.pro-category .category-box .ttl:after {
  content: "";
  display: inline-block;
  background: url(../images/ico/ico-ttl-bg.png) left center repeat-x;
  background-size: 340px 59px;
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  left: 0;
  height: 100%;
}
@media (min-width: 480px) {
  .pro-category .category-box .ttl:after {
    height: 70px;
    left: calc(-100% + 105px);
  }
}
.pro-category .row {
  margin: 0 -8px;
}
.pro-category .col-3 {
  margin: 0 0 16px 0;
  width: calc((100% / 12) * 6);
  padding: 0 8px;
  position: relative;
}
@media (min-width: 821px) {
  .pro-category .col-3 {
    width: calc((100% / 12) * 3);
  }
}
.pro-category figure {
  margin: 0 0 10px 0;
}
.pro-category figure a {
  display: block;
  position: relative;
  background: #000000;
}
.pro-category figure a:hover img {
  opacity: 0.75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
}
.pro-category .caption .title {
  margin: 0 0 5px 0;
  font-size: 16px;
  line-height: 24px;
}
.pro-category .caption .title a {
  display: block;
  color: #595757;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pro-category .caption .price {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  -moz-align-items: baseline;
  align-items: baseline;
  font-size: 13px;
  font-family: "Nunito", sans-serif;
  text-align: left;
}
@media (min-width: 480px) {
  .pro-category .caption .price {
    display: block;
  }
}
.pro-category .caption .price .original {
  color: #999999;
  text-decoration: line-through;
  margin: 0 8px 0 0;
}
@media (min-width: 480px) {
  .pro-category .caption .price .original {
    margin: 0 20px 0 0;
  }
}
.pro-category .caption .price .special {
  color: #bb1924;
  margin: 0;
}
@media (min-width: 480px) {
  .pro-category .caption .price .special {
    margin: 0 0 0 10px;
  }
}
.pro-category .caption .price .special b {
  font-size: 18px;
}
.pro-category .caption .favo {
  margin: 0;
  position: absolute;
  right: 6px;
  bottom: 5px;
}
@media (min-width: 480px) {
  .pro-category .caption .favo {
    float: right;
    margin: 5px 0 0 0;
    position: relative;
    right: auto;
    bottom: auto;
  }
}
.pro-category .caption .favo a {
  font-size: 0;
  display: block;
}
.pro-category .caption .favo a:before {
  content: "\f08a";
  color: #ee618c;
  font-size: 16px;
}
.pro-category .caption .favo.active a:before {
  content: "\f004";
}
.pro-category .blog-general figure {
  margin: 0 0 15px 0;
}
.pro-category .blog-general figure a {
  background: transparent;
}
.pro-category .blog-general figure a:hover img {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}
.pro-category .blog-general .caption .title {
  margin: 0 0 15px 0;
}
.pro-category .blog-general .caption .title a {
  color: #595757;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pro-category .blog-general .caption .title a:hover {
  text-decoration: underline;
}
.pro-category .blog-general .caption .date {
  color: #595757;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  margin: 0 0 5px 0;
}
.pro-category .blog-general .caption .tag {
  background: #eeeeee;
  color: #595757;
  font-size: 11px;
  display: inline-block;
  position: relative;
  padding: 1px 5px 3px 5px;
}
.pro-category .blog-general .caption .tag:after {
  position: absolute;
  content: "";
  right: -10px;
  top: 0;
  width: 0px;
  height: 0px;
  border-color: transparent transparent transparent #eeeeee;
  border-style: solid;
  border-width: 10px 0 10px 10px;
}
.pro-category .blog-general .blog-top {
  background: #fafafa;
  padding: 13px;
  position: relative;
}
@media (min-width: 821px) {
  .pro-category .blog-general .blog-top {
    padding: 17px;
  }
}
.pro-category .blog-general .blog-top:before {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: #f092a5 transparent transparent transparent;
}
.pro-category .blog-general .blog-top:after {
  content: "";
  display: inline-block;
  background: url(../images/ico/ico-popular.png) 0 0 no-repeat;
  background-size: 35px 33px;
  width: 35px;
  height: 33px;
  position: absolute;
  left: 6px;
  top: 10px;
  z-index: 100;
}

.mob-foot-wrap {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ee618c;
  z-index: 100;
}
@media (min-width: 821px) {
  .mob-foot-wrap {
    display: none;
  }
}
.mob-foot-wrap .mob-index {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.mob-foot-wrap .mob-index li {
  width: calc(100% / 5);
  text-align: center;
  border-right: #ffffff solid 1px;
}
.mob-foot-wrap .mob-index a {
  display: block;
  font-size: 12px;
  color: #ffffff;
  padding: 10px 5px;
  line-height: normal;
  height: 60px;
}
.mob-foot-wrap .mob-index a img {
  height: 16px !important;
}
.mob-foot-wrap .mob-index a span {
  display: block;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ranking .row {
    margin: 0 -9px;
  }
}
@supports (-ms-ime-align: auto) {
  .ranking .col-2 {
    width: 16.66666667%;
  }
}