/* *{box-sizing: border-box;} */
/* font-size: 0.88rem;   14px */
.col-12{margin: auto;}
.fullwidth{width: 100%;box-sizing: border-box;}

a{
  border: 0.25rem solid transparent;
  box-sizing: border-box;
}
a.accesskey{
  color: #000;
  text-decoration: none;
  display: inline-block;
  position: relative;
  z-index: 10;
}
/*a:focus{
  border: 0.25rem solid #A593E0;
  box-sizing: border-box;
}*/
.pagebox .page a:focus{
  background-color: #A593E0;
}
.mainswiper .slider{
  border:none;
}

*:focus {
    border: 0.25rem solid #A593E0;
    box-sizing: border-box;
}

.sr-only{
  position: absolute;
    width: 0.063rem;
    height: 0.063rem;
    padding: 0;
    margin: -0.063rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.sr-only-focusable:active, .sr-only-focusable:focus{
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    color:#000;
}

.raw{width: 100%;}
.container{
  width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 1rem 0;
}

.top{background: #EB9F9F;}
.header{height: 4.5rem;display: flex;align-items: center;}
.header .site {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header .site h2{
  font-size: 1.5rem;
  font-family: 'ARIAL';
}
.header .site span{
  font-size: 0.8125rem;
  font-family: 'ARIAL';
  margin-left: 1rem;
}
.header h1{margin: 0;}
.logo img{
  width: 6.125rem;
}
.mainswiper{position: relative;}
.mainswiper img{
    width: 100%;
}
    .mainswiper img:hover {
        border:dashed 2px #A593E0;
    }
.slider .container{padding: 0;}
.pagebox{
  position: absolute;
  bottom: 3rem;
  left: 6rem;
}
.pagebox .page{
    display: flex;
}
.pagebox .page a{
  font-size: 0.875rem;
  font-weight: bold;
  font-family: 'ARIAL';
  color: #fff;
  background-color: #333;
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  text-align: center;
  line-height: 1.35rem;
  position: relative;
  z-index: 10;
  cursor: pointer;
  opacity: 1 !important;
  border-radius: 0 !important;
}
.pagebox .page a.active{
  background-color: #EB9F9F;
}
a.swiper-pagination-bullet-active:focus{
  border-color: #EB9F9F !important;
}

.swiper-pagination-bullet-active{
  background-color: #EB9F9F !important;
}

h3{font-size: 2.25rem;margin: 0;}
h3 span.info{font-size: 1rem;display: block;}
.sell{background-color: #FFFDF5;}

.list{}
.list a{
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin-right: 1rem;
}
.list .item a{margin-bottom: 1rem;}
.list a:last-child{
  margin-right: 0;
}
.list .item{
    width: 100%;
    display: inline-block;
    font-size:1.125rem;
    font-weight:500;
    position: relative;
}
.list .item label{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;display: block;color: #333;word-break: break-word;min-height: 4.25rem;}
.list .item .imgArea{
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
}
.list .item .imgArea img{width: 100%;box-sizing: border-box;position: absolute;top: 0;}
.list .item .info{}
.list .item .info .price{
    color: #EB5772;
}
.list .item .info .unit{
    color: #333;
}
.slider .pagebox, .sell .pagebox,
.ad .pagebox {
    position: revert;
    margin: 2rem 0 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagebox.flex{
  display: flex;
  align-items: center;
}

.ad{background-color: #FFFDF5;}
.ad img{width: 100%;}

.Pdbottom{padding-bottom: 5rem;}

footer{
  background-color: #566270;
  color:#F2F2F2;
  font-size: 0.875rem;
  padding: 1.75rem 0 3.75rem 0;
  position: relative;
}
footer h4{font-weight: bold;}
footer a{
  color:#56CCF2;text-decoration: underline;display: inline;
}
footer .intro{
    display: block;
}
footer .org{
    display: inline-block;
    width: 43%;
}
footer .org p{
    display: flex;
    align-items: center;
}
footer .org p img{
    margin-right: 1rem;
}
footer .social{
    display: inline-block;
    width: 18%;
}
footer .social .links{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .social a{}
footer .qrcode{
    margin-top: 1rem;
    display: inline-block;
    width: 18%;
    text-align: center;
}
footer .qrcode a{
  display: inline-flex;flex-wrap: wrap;width: 9.375rem;justify-content: center;
}
footer .qrcode .small{
  margin-top: 0.25rem;display: block;
}
footer .qrcode img{}
footer .emblem{
    display: inline-block;
    width: 18%;
    text-align: right;
}
footer .emblem img{width: auto;}
footer .info{}
footer .copyright{
  background-color: #353D47;
  position: absolute;
  width: 100vw;
  left: 0;
  bottom: 0;
  text-align: center;
  padding: 0.5rem;
}
.sitemap{background-color: #FFFDF5;}
.sitemap h4{font-size: 1.25rem;}
.sitemap p{font-size:1.125rem;line-height:1.5rem ;}
/* 桌機板 (min-width: 992px) and (max-width: 1140px)*/
@media screen and (min-width: 992px) and (max-width: 1140px){
  body{
    background: #fff;
  }
  .container{
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }
}
/* 桌機板-平板 */
@media screen and (min-width: 768px) and (max-width: 992px){
  .container{
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }
  footer .org{
    display: inline-block;
    width: 35%;
  }
  footer .social{width: 9rem;}
}
/* 桌機板-手機板 */
/* @media screen and (min-width: 576px) and (max-width: 768px){
   body{}
} */
/* 手機板 576px*/ 
@media screen and (max-width: 768px){
  .container{
    width: calc(100% - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .logo img{margin-left: 0;}
  .header .site h2{font-size: 1rem;text-align: center;}
  .header{height: 3rem;}
  .slider .container{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .pagebox{
    position: absolute;
    bottom: 1rem;
    left: 1rem;
  }

  .list a{
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-right: 1rem;
  }
  .list a:nth-child(2n){
    margin-right: 0;
  }
  footer{
    padding-bottom: 1rem;
  }
  footer .org{width: 100%;}
  footer .social{
    display: block;
    width: 12rem;
    margin-bottom: 1rem;
  }
  footer .qrcode{
    width: 50%;
  }
  footer .emblem{
    width: 45%;
  }
  footer .org p{
    display: block;
    align-items: center;
  }
  footer .emblem img{width: 100%;}
}