/*基本樣式*/ :root {
  --maincolor: #c46196;
  --bgcolor: #fff5e6;
}
* {
  margin: 0;
  padding: 0;
  transition: all .3s;
  box-sizing: border-box
}
html, body {
  height: 100%; /*外層高度100%*/
}
body {
  background: var(--bgcolor);
  font-family: "微軟正黑體";
  color: #262626;
}
a {
  text-decoration: none;
  color: #262626;
  transition: all .3s;
}
a:hover {
  color: var(--maincolor);
}
h1 {
  font-size: 26px;
  font-weight: bold
}
/*footer*/
.footer {
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 20px 0;
}
.footer .logo {
  height: 70px;
  width: 70px;
  position: relative;
  margin: 0 auto;
}
.footer .logo img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  overflow: hidden 
}
.footer .copyright {
  font: bold 16px/1 "微軟正黑體";
  margin-top: 10px;
}
.footer .info {
  color: #262626;
  font: 16px/28px "微軟正黑體";
  margin: 8px 0;
}
.footer .info a:hover {
  text-decoration: underline
}
.footer .sns a {
  display: inline-block;
  margin: 0 8px;
  font-size: 35px;
}
.footer .ssl {
  margin-top: 15px;
  line-height: 28px;
  padding-top: 15px;
  font-size: 14px;
  border-top: 1px solid #262626
}
/*右側浮動區*/
.flyMod {
  position: fixed;
  right: 50px;
  width: 60px;
  bottom: 100px;
  z-index: 1001;
}
.flyMod .backTop, .flyMod .snsBtn, .flyMod .shopBtn {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: #585858;
  position: relative;
  cursor: pointer;
  margin-top: 15px;
}
.flyMod .backTop:hover {
  background: var(--maincolor);
}
.flyMod .backTop::after {
  content: "\e90f";
  font-family: 'icomoon';
  color: #fff;
  position: absolute;
  font-size: 24px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.flyMod .snsBtn, .flyMod .shopBtn {
  background: var(--maincolor);
}
.flyMod .snsBtn {
  text-align: center;
}
.flyMod .snsBtn span {
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff
}
.flyMod .shopBtn {
  height: auto;
  padding: 0 8px 15px;
  word-break: break-all;
  overflow: hidden;
}
.flyMod .shopBtn span {
  color: #fff
}
.flyMod .shopBtn:hover, .flyMod .snsBtn:hover {
  background: #585858;
}
.flyMod .shopBtn .btnShopee, .flyMod .snsBtn .btnLine, .flyMod .snsBtn .btnMessage {
  color: #fff;
  font-size: 44px;
  height: 44px;
}
.flyMod .shopBtn p {
  text-align: center;
  float: left;
}
.flyMod .shopBtn p.large {
  width: 23px;
  font-size: 21px;
  display: inline-block;
  line-height: 25px;
}
.flyMod .shopBtn p.small {
  width: 21px;
  font-size: 16px;
  display: inline-block;
  line-height: 22px;
}
/*更多的按鈕*/
#load-more {
  width: 100%;
  background: var(--maincolor);
  height: 40px;
  border: 0;
  color: #fff;
  font-size: 18px;
  cursor: pointer
}
#load-more span {
  display: inline-block;
}
#load-more .icon-a6 {
  transform: rotate(0.25turn);
}
.hidden {
  display: none;
}
/*分享的按鈕*/
.share a.btnFB span {
  color: #1877f2;
}
/*topcon的SNS按鈕*/
.topcon_Btn {
  display: inline-block;
  height: 34px;
  vertical-align: top
}
.topcon_Btn a {
  text-decoration: none;
  margin-right: 15px;
  font-size: 34px;
  display: inline-block
}
.topcon_Btn a span {
  vertical-align: top
}
.btnFB span {
  color: #1877f2;
}
.btnIG span {
  color: #d62196;
}
.btnShopee span {
  color: #ff5722;
}
.btnYB span {
  color: #d92524;
}
.btnMessage span {
  color: #0095ff;
}
.btnLine span {
  color: #00b833;
}
/*top搜尋*/
.topSearch {
  background: var(--maincolor);
  height: 34px;
  border-radius: 17px;
  width: 186px;
  position: relative;
  display: inline-block
}
.topSearch input[type=text] {
  border: 0;
  height: 34px;
  margin-right: 8px;
  position: absolute;
  background: none;
  right: 8px;
  left: 30px;
  color: #fff;
  line-height: 34px;
  padding-left: 5px
}
.topSearch input[type=text]:focus {
  outline: none
}
.topSearch ::placeholder {
  color: #fff;
}
.topSearch button {
  width: 21px;
  height: 21px;
  display: inline-block;
  position: absolute;
  left: 8px;
  color: #fff;
  font-size: 21px;
  background: none;
  border: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.topSearch button span {
  vertical-align: top
}
p.qrcode {
  height: 143px;
  position: relative;
  overflow: hidden
}
p.qrcode img {
  display: inline-block;
  margin-right: 20px
}
p.qrcode a.qrFB, p.qrcode a.qrLINE {
  display: table-cell;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  color: #fff;
  padding: 0 8px;
  text-align: center;
  border-radius: 8px;
  margin-right: 5px;
  position: absolute;
  bottom: 0;
}
p.qrcode a.qrFB {
  background: #3b5998;
}
p.qrcode a.qrLINE {
  background: #00b833;
  margin-left: 90px
}
p.qrcode a.qrFB i, p.qrcode a.qrLINE i {
  vertical-align: baseline
}
.lds-dual-out {
  position: fixed;
  top: 50%;
  left: 50%;
  transfrom: translate(-50%, -50%);
  text-align: center
}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
  position: relative
}
.lds-dual-ring img {
  z-index: 111;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  width: 70px;
  height: 70px;
  animation: show 1.2s linear infinite;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid var(--maincolor);
  border-color: var(--maincolor) transparent var(--maincolor) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  top: 0;
  left: 0
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes show {
  0% {
     opacity: 1;
  }
  50% {
      opacity: 0.6;
  }
	100% {
      opacity: 1;
  }
	
}