@charset "UTF-8";

@font-face {
    font-family: 'pin';
    font-weight: 500;
      src:
       url("font/PingFang-TC-Medium-2.otf") format("opentype");
  }

  @font-face {
    font-family: 'pin';
    font-weight: 600;
      src:
       url("font/PingFang-TC-Regular-2.otf") format("opentype");
  }

  @font-face {
    font-family: 'pin';
    font-weight: 400;
      src:
       url("font/PingFang-TC-Light-2.otf") format("opentype");
  }

  @font-face {
    font-family: 'SF Pro display';
    font-weight: 400;
      src:
       url("font/SF-Pro-Text-Light.otf") format("opentype");
  }
/* 
  @font-face {
    font-family: 'SF Pro display';
    font-weight: 600;
      src:
       url("font/SF-Pro-Text-Regular.otf") format("opentype");
  }

  @font-face {
    font-family: 'SF Pro display';
    font-weight: 500;
      src:
       url("font/SF-Pro-Text-Medium.otf") format("opentype");
  } */

  @font-face {
    font-family: 'SF Pro display';
    font-weight: 700;
      src:
       url("font/SF-Pro-Text-Bold.otf") format("opentype");
  }

  @font-face {
    font-family: 'SF Pro display';
    src: url('/css/font/sf-pro-text-regular-webfont.woff2') format('woff2'),
         url('/css/font/sf-pro-text-regular-webfont.woff') format('woff');
         font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'SF Pro display';
    src: url('/css/font/sf-pro-text-medium-webfont.woff2') format('woff2'),
         url('/css/font/sf-pro-text-medium-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
  *{
    font-family: 'SF Pro display' , 'pin'!important;
    font-weight: 500;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }

  body{
    min-width: 320px;
  }

  .nav{
    width: 100%;
    height: 44px;
    background-color: rgb(24, 24, 24);
    /* background: linear-gradient(90deg, #FF0000 0%, #FE0000 32%, #FFFFFF 32%, #FFFFFF 70%, #000095 70%, #000095 100%); */
    color: #fff;
    display: flex;
    position: fixed;
    z-index: 31;
    justify-content: space-between;
    padding: 0 13px;
    min-width: 320px;
    background-position: center;
    background-image: url(../image/roch.png);
    background-size: 44px;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.329);
  }

  .nav .logo{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../image/puffwiki-logo.png);
    height: 39.5px;
    width: 39.5px;
    margin-top: 2.25px;
  }

  .nav .logo-box{
    display: flex;
    color: #fff;
    /* color: #000; */
    text-decoration: none;
    opacity: 1;
  /* transform: translatex(-100%); */
  }

  .nav .logo-text{
    display: block;
    margin-top: 11px;
  }

  .nav .only{
    margin-top: 11px;
    color: #AFAFAF;
    font-weight: 400;
  }

  .no-select,
  br{
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
}

.content{
    max-width: 1000px;
    margin: auto;
    display: block;
    width: 100%;
    min-width: 320px;
    margin-top: 74px;
    padding: 0 15px;
}

.load{
    background-color: #ffffff54;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 30;
}

.load .circle{
    height: 50px;
    width: 50px;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    border-radius: 50%;
    border: 4px solid #000;
    border-top: 4px solid #00000000;
    animation: spin .8s linear infinite; 
}

@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.content p{
  color: #4E4E4E;
}

.img-puff{
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../image/mrspuffface.jpg);
    width: 366.55px;
  height: 319px;
  margin-top: 18px;
}

.content span{
  font-size: 10px;
  font-weight: 600;
  color: #9B9B9B;
}

.content h1{
  color: #000;
  margin-top: 13px;
}

.scary{
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../image/scary.jpg);
  height: 153px;
  width: 256px;
}

.content .add-list{
  width: 1000px;
  margin: auto;
  height: 482px;
  transform: translateX(-371px) translateY(-51px);
}

.hidden{
  overflow: hidden;
  width: 300px;
  height: 491px;
  margin-top: -36px;
}

.content h1{
  z-index: 2;
  font-size: 25px;
  position: relative;
}

@media (max-width: 681px){
  h1{
    font-size: 25px;
  }

  p{
    font-size: 17px;
    font-weight: 600;
  }
}

@media (max-width: 416px){
  .logo-box{
    margin: auto;
  }
}

@media (max-width: 412px){
  .img-puff{
    width: 303px;
    height: 263.69px;
  }
}

@media (max-width: 366px){
  .only{
    font-size: 12px;
    margin-top: 14px!important;
  }
}

.need{
  font-size: 10px;
  transform: translateY(-121px);
}

.footer{
  height: 44px;
  width: 100%;
  background-color: #DADADA;
}

.footer p{
  display: block;
  text-align: center;
    font-size: 11px;
    transform: translateY(13.5px)!important;
  
}

.mnmn a{
  color: #0071ef;
  text-decoration: none;
  font-weight: 600;
}

.mnmn a:hover{
  text-decoration: underline;
}

.newest-window{
  width: 100%;
  /* height: 300px; */
  height: auto;
  background-color: #F6F6F6;
  border-radius: 20px;
  margin-top: 31px;
  padding: 15px;
  overflow: hidden;
}

.e{
  width: 10000px;
  display: block;
}

.e a{
  color: #0071ef;
  text-decoration: none;
  border-bottom: 1px solid #d2d2d7;
  padding-bottom: 15px;
  padding-top: 15px;
  display: block;
  font-size: 16px;
}

.watch-all{
  width: calc(100% + 30px);
  margin-left: -15px;
  height: 40px;
  background-color: #D9D9D9;
  color: #787878;
  transform: translateY(-274px);
  text-align: center;
  font-size: 15px;
  padding-top: 5px;
  cursor: pointer;
}

.watch-all span{
  color: #787878;
}

.newest-window.active{
  height: auto;
}

.watch-all.active{
  transform: translateY(24px);
}

.watch-all.active .mo,
.watch-all .la{
  display: none;
}

.watch-all.active .la,
.watch-all .mo{
  display: block;
}

.immm{
  margin-top: 18px;
}

.pangdafp-logo{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(../image/pangdafp-logo.png);
  height: 168px;
  width: 300px;
}

@media (max-width: 342px){
  .pangdafp-logo{
    width: 270px;
    height: 151.2px;
  }
}

body{
  overflow-x: hidden;
}

.add-in-title{
  text-align: center;
  font-size: 30px;
}

.hid{
  overflow: hidden;
  height: 700px;
  width: 100%;
}

.hid iframe{
  width: 100%;
  height: 5050px;
  transform: translateY(-51px) translateX(20px);
}

#myse{
  width: 100%;
  overflow-x: hidden;
}

#myse li{
  list-style: none;
}

#mysearch{
  width: 100%;
  height: 40px;
  border-radius: 5px;
  background-color: #d9d9d9;
  padding: 0px 10px;
  outline: none;
  border: 1px solid #00000000;
}

#mysearch::placeholder{
  font-size: 17px;
}

#myse a{
  color: #0071ef;
  text-decoration: none;
  font-size: 16px;
}

#myse li{
  width: 10000px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d2d2d7;
}


[type=search]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  width: 36px;
  height: 36px;
  border: 0;
  background: url("../image/puffwiki-logo.png") center no-repeat;
  background-size: 36px;
  cursor: pointer;
  transition: .2s;
}

/* body{
  margin-left: 100%;
    opacity: 0;
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

body.loaded{
  margin-left: 0;
    opacity: 1;
} */


/* body.loaded .logo-box{
  transition: .5s cubic-bezier(0.66,0,0.2,1);
  transition-delay: .1s;
  transform: translateX(0);
    opacity: 1;
}

body.loaded .nav{
  transform: translateY(0);
}

body .nav{
  transition: .5s ;
  transform: translateY(-100%);
} */

.link{
  color: #0071ef;
  text-decoration: none;
}

.link:hover{
  text-decoration: underline;
}

.content img{
  border-radius: 20px;
  border: 1px solid #000;
}

.load{
  display: none!important;
}

.logo-box{
  /* animation: in .5s cubic-bezier(0.66,0,0.2,1) forwards; */
}

@keyframes in{
  0%{
    transform: translateX(-100%);
    opacity: 0;
  }
  100%{
    transform: translateX(0);
    opacity: 1;
  }
}

.whole{
  width: 100%;
  overflow: hidden;
  display: flex;
 margin: auto;
 margin-top: -56px;
 background-color: #040404;
 padding: 20px;
 border-radius: 20px;
}

.whole .UK-queen{
  background-image: url(../image/UK-queen.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 663px;
  width: 363px;
  margin: auto;
  animation: op 1.5s cubic-bezier(0.66,0,0.2,1) forwards;
}

@keyframes op{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.whole h1{
  color: #fff;
  animation: op 1.5s cubic-bezier(0.66,0,0.2,1) forwards;
  animation-delay: .5s;
  opacity: 0;
}

.whole span{
  animation: op 1.5s cubic-bezier(0.66,0,0.2,1) forwards;
  animation-delay: 1s;
  opacity: 0;
}

.whole span{
  font-size: 20px;
  font-family: 'SF Pro display';
  font-weight: 400;
  color: rgb(167, 167, 167);
}

@media (max-width: 409px){
  .whole h1{
    font-size: 20px;
  }
  
 

  /* .whole h1,
.whole span{
  margin-left: 15px;
} */
}

@media (max-width: 703px){
  .whole{
    display: block;
  }

  .texttt{
    display: block;
    margin: auto;
    overflow: hidden;
  }

  .whole h1,
  .whole span{
    display: block;
    text-align: center!important;
  }
  .whole .UK-queen{
    width: 260px;
    height: 458px;
  }
}

.gjo{
  transform: translateY(-15px);
}

.doo{
  color: #dddddd!important;
  font-weight: 600;
  font-size: 20px!important;
}

.t404-img{
  background-image: url(../image/404.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 175px;
  width: 305px;
  margin: auto;
  position: absolute;
  top: calc(50% - 87.5px);
  left: calc(50% - 152.5px);
}

.li404nk{
  width: 180px;
  display: block;
  margin: auto;
  transform: translateY(389px);
}

.title-of-news{
  text-align: center;
  display: block;
}

.midddd{
  max-width: 300px;
  min-width: 300px;
  margin: auto;
  display: block;
  margin-top: 50px;
}

.progress{
  background-color: #ddd;
  width: 100%;
  height: 18px;
  border-radius: 50px;
}

.progresss{
  transform: translateY(-18px);
  background-color: rgb(73, 163, 65);
  background-image: url(../image/Mask\ group.png);
  width: 100%;
  height: 18px;
  border-radius: 50px;
}


.stitle-of-news{
  font-size: 15px!important;
  text-align: center;
  display: block;
  color: rgb(94, 94, 94)!important;
}

.newww{
  color: #818181;
  font-size: 25px;
  text-align: center;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 125px);
}

.pangdafp-shadow{
  background-image: url(../image/pangdafp-shadow.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 126.37px;
  width: 322px;
  display: block;
  margin: auto;
  margin-top: 20px;
  position: absolute;
  top: calc(50% - 246px);
  left: calc(50% - 161px);
}

.mnmn{
  margin-top: 10px;
}

.mnmn a{
  background-color: #0071ef;
  border-radius: 50px;
  padding: 2px 10px;
  color: #fff;
  border: 1px solid #ffffff00;
  transition: all .2s cubic-bezier(0.66,0,0.2,1);
}

.mnmn a:hover{
  border: 1px solid #0071ef;
  color: #0071ef;
  text-decoration: none;
  background-color: #ffffff00;
}

.mnmn a:nth-child(3){
  margin-left: 10px;
}

.ho{
  overflow: hidden;
}

.ho li{
  /* transform: translateX(-100%); */
  animation: inin .5s cubic-bezier(0.66,0,0.2,1) forwards;
}

@keyframes inin{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(0);
  }
}

.ho li:nth-child(1){
  animation-delay: .1s;
}

.ho li:nth-child(2){
  animation-delay: .2s;
}
.ho li:nth-child(3){
  animation-delay: .3s;
}
.ho li:nth-child(4){
  animation-delay: .4s;
}

.ho li:nth-child(5){
  animation-delay: .5s;
}

.ho li:nth-child(6){
  animation-delay: .6s;
}

.ho li:nth-child(7){
  animation-delay: .7s;
}

.ho li:nth-child(8){
  animation-delay: .8s;
}

.ho li:nth-child(9){
  animation-delay: .9s;
}

.ho li:nth-child(10){
  animation-delay: 1s!important;
}

.ho li:nth-child(11){
  animation-delay: 1.1s!important;
}

.ss{
  height: 424.54px;
  background-image: url(../image/s2.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  border: 1px solid #d2d2d7;
  margin: auto;
  margin-top: 25px;
}

.s2-f{
  width: 100%;
  border-radius: 20px;
  height: 520px;
  background-image: url(../image/s3-ebook-online.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #d2d2d7;
}

.mnmnbr{
  display: none;
}

.mmm a:nth-child(2){
  margin-left: 10px;
}

@media (max-width: 340px){
  .mnmnbr{
    display: block;
  }

  .mnmn a:nth-child(3){
    margin-left: 0;
    display: block;
    width: 194px;
    margin-top: 10px;
  }

  .mmm a:nth-child(2){
    margin-left: 10px;
  }
}

@media (max-width: 450px){
  .s2-f{
    height: 288px;
  }
}


#menu{
  width: 254px;
  background-color: rgba(68, 68, 68, 0.582);
  font-size: 12px;
  border-radius: 10px;
  position: fixed;
  top: 0px;
  left: 0px;
  /*height: 240px;*/
  /*padding-left: 26px;*/
  padding: 5px;
  border:1px solid #d2d2d7;
  display: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 999;
}
#menu li{
  list-style: none;
  line-height: 25px;
  margin-left: -1px;
  padding-left: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
#menu li:hover{
  background-color: #0071ef;
  color: #fff;
  
}

.line{
    width: 100%;
    height: 1px;
    background-color: #d8d8d8;
    margin-top: 2px;
    margin-bottom: 2px;
}

.book{
  display: none;
}

.book.active{
  height: 100vh;
  width: 100%;
  display: block;
  background-color:rgb(255, 255, 255);
  position: fixed;
  z-index: 998;
}

.book .bar{
  height: 60px;
  display: flex;
  justify-content: space-between;
  padding:  0 10px;
  width: 100%;
  background-color: #F1F1F1;
  position: absolute;
  top: calc(100% - 80px);
  /* border-top: 1px solid #9c9c9c; */
  overflow-x: auto;
  overflow-y: hidden;
}

.close{
  height: 40px;
  width: 40px;
  background-color: rgb(134, 134, 134);
  margin-top: 10px;
  cursor: pointer;
  border-radius: 50%;
  background-image: url(../image/x.svg);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
  max-width: 40px;
  min-width: 40px;
}

.bjof{
  display: flex;
  gap: 5px;
  margin: auto;
}

.wp{
  height: 40px;
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #0071ef;
  width: 50px;
  background-color: #fff;
  text-align: center;
  display: block;
  padding-top: 8px;
}

.page .o-t,
.page .t-f,
.page .f-s,
.page .s-e{
  display: flex;
  justify-content: space-between;
}

.page{
  overflow: hidden;
  display: block;
}

.page.auto .pdfd{
  width: auto;
  height: calc(100vh - 124px);
  margin: auto;
  margin-top: 44px;
}

.pdfd{
  width: 100%;
  height: calc(100vh - 124px);
  margin-top: 44px;
  border: #4E4E4E;
}

.bjof .auto{
  height: 40px;
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #3b3b3b;
  width: 65px;
  background-color: #fff;
  text-align: center;
  display: block;
  padding-top: 8px;
  cursor: pointer;
  color: #3b3b3b;
}

.bart{
  height: 20px;
  display: flex;
  justify-content: space-between;
  padding:  2.5px 10px;
  width: 100%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: calc(100% - 20px);
  /* border-top: 1px solid #9c9c9c; */
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 5px;
}

.closse{
  width: 40px;
  text-align: center;
}

.npp{
  width: 50px;
  display: block;
  text-align: center;
}

.wpp{
  width: 65px;
  display: block;
  text-align: center;
}

.cb{
  margin-top: 10px;
  height: 40px;
  width: 40px;
  background-image: url(../image/lscreen.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 1px solid #3b3b3b;
  cursor: pointer;
}

.fb{
  margin-top: 10px;
  height: 40px;
  width: 40px;
  background-image: url(../image/fullscreen.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 1px solid #3b3b3b;
  cursor: pointer;
}

.np{
  margin-top: 10px;
  height: 40px;
  width: 40px;
  background-image: url(../image/np.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 1px solid #3b3b3b;
  cursor: pointer;
}

.lp{
margin-top: 10px;
  height: 40px;
  width: 40px;
  background-image: url(../image/lp.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 1px solid #3b3b3b;
  cursor: pointer;
}

.fbbb{
  width: 40px;
  display: block;
  text-align: center;
}

.cbbb{
  width: 40px;
  display: block;
  text-align: center;
}

/* body{
  background-image: url(../image/sisterstawberry.gif);
}

.background,
.book{
  background-image: url(../image/sisterstawberry.gif);
} */

.bjig:hover{
  border: 1px solid #0071ef;
  color: #0071ef;
}

.npo,
.lpp{
  width: 40px;
  text-align: center;
  display: block;
}

.page{
  transition: .5s transform cubic-bezier(0.66,0,0.2,1);
}

.page.n3ext{
  transform: translateY(-25%);
}

.page.n1ext{
  transform: translateY(-50%);
}

.page.n2ext{
  transform: translateY(-75%);
}

.page.n0ext{
  transform: translateY(0%);
}

.no{
  opacity: 0.5;
}

.no:hover{
  border: 1px solid #3b3b3b;
}

.pageg{
  width: 100%;
    height: calc(100vh - 80px);
    background-color: #00000000;
    position: fixed;
}

.pageg,
.page{
  z-index: 980;
}

.nav{
  z-index: 1001;
}

@media(max-width: 767px){
  .page .o-t,
.page .t-f,
.page .f-s,
.page .s-e{
  display: block;
  overflow: auto;
  height: calc(100vh - 124px);
  margin-top: 44px;
  
}
.pdfd{
  margin-top: 0px!important;
  margin: 0px!important;
}
.pageg{
  display: none;
}
}

body.fixed{
  position: fixed;
}

@media (max-width: 484px){
  .fb,
  .cb,
  .fbbb,
  .cbbb{
    display: none;
  }
}

@media (max-width: 404px){
  .close.b,
  .closse.b{
    display: none;
  }
  .close{
    max-width: 30px;
    min-width: 30px;
    height: 30px;
    background-size: 20px;
    margin-top: 15px;
  }
  .closse{
    display: none;
  }
}

.shdhi{
  display: block;
}

.shd{
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.bookmini{
  height: 353.78px;
  width: 250px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #3b3b3b;
  border-radius: 10px;
}

.nonee{
  display: none!important;
}

.noff .bookmini{
  border: 1px solid #00000000!important;
}

.bookmini.fhiu{
  background-image: url(../image/s2-fi.png);
}

.bookmini.wojf{
  background-image: url(../image/strawflip.jpg);
}

.bookmini.gjeo{
  background-image: url(../image/s3-fi.png);
}

.list a{
  text-decoration: none;
}

.shd a{
  text-decoration: none;
}

.shd a span{
  text-align: center;
  display: block;
}

.rehjkhf{
  overflow: hidden;
  width: 100%;
  height: 100vh;
  margin: auto;
  margin-top: 50px;
}

.fhjkd{
  text-align: center;
  display: block;
  margin-left: 30px;
}

iframe{
  overflow: hidden;
  margin-top: -52px;
  width: 100%;
  height: calc(100vh - 50px - 44px);
  margin-left: 30px;
}

.shdhi{
  margin-top: 50px;
}

.dnfjk{
  padding-bottom: 40px;
  border-bottom: 1px solid #d2d2d7;
}

@media(max-width: 804px){
  .shd{
    display: block;
  }
  .shd a div{
    margin: auto;
    margin-top: 20px;
  }
  .shd a span{
    display: block;
  }
}

.dhisi{
  font-weight: 600;
  font-size: 15px;
  padding: 5px 10px;
  color: #fff;
  background: #0071ef;
  border-radius: 50px;
  cursor: pointer;
}

.dhisi:hover{
  background-color: #388ef0;
}

.groupdhisi{
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.shdhi.monthly .joint{
  display: none;
}

.shdhi.joint .monthly{
  display: none;
}

.shdhi .monthly,
.shdhi .joint{
  display: block;
}

.shdhi a{
  animation: infi .5s cubic-bezier(0.66,0,0.2,1) forwards;
}

@keyframes infi{
  0%{
    transform: scale(0);
  }
  100%{
    transform: scale(1);
  }
}

@media (max-width: 584px){
  .nav{
    background-image: none;
  }
}