@charset "UTF-8";

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


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

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

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

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

  @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;
} 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap');
*{
    font-family: 'Noto Sans TC', sans-serif!important;

    /* font-family: 'SF Pro display' ,'pin'; */
    font-weight: 600;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    box-sizing: border-box;
  }

  body{
    min-width: 320px;
  }

  /* beta nav style */

  .navdesktop{
    
    width: 100%;
    height: 50px;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    position: relative;
    z-index: 2;
    background-color: #f3f3f3;
  }

  .nav,
  .nabdesktop,
  .navmobile{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    position: fixed;
    height: 50px;
    width: calc(100% - 20px);
    background-color: #f3f3f3;
    border-radius: 18px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    min-width: 320px;
    /* transition: height .5s cubic-bezier(.66,0,0.2,1), width .5s cubic-bezier(.66,0,0.2,1), border-radius .5s cubic-bezier(.66,0,0.2,1), max-width .5s cubic-bezier(.66,0,0.2,1); */
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    overflow: hidden;
    transition-delay: .5s;
    border: 1px solid #d2d2d7;
    
  }
  .navmobile{
    display: none;
    margin: 0;
  }

  .logo-beta{
    height: 25px;
    width: 25px;
    cursor: pointer;
    background-image: url(/image/puffmonthly-logo-beta.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: 5px;
  }

  .navdesktop .link-selection{
    display: flex;
    width: 700px;
    justify-content: space-between;
    padding-top: 4px;
    font-size: 15px;
    padding-right: 15px;
    gap: 10px;
    position: relative;
    z-index: 2;
    background-color: #F3F3F3;
    transition: all .3s cubic-bezier(0.66,0,0.2,1);
  }

  .navdesktop .link-selection a{
    color: #6B6B6B;
    font-weight: 900;
    text-align: center;
    
  }

  .navdesktop li{
    width: 100%;
    list-style: none;
    text-align: center;
  }

  .search-nav {
    margin-top: 2px;
    background-image: url(/css/link-icon/search.svg);
    height: 16px;
    width: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .nav .nav-content{
    
    /* background-color: #000; */
    width: calc(100% - 20px);
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    opacity: 0;
    background-color: #dfdfdf;
    border-radius: 25px;
    position: relative;
    z-index: 1;
    margin: 10px;
    overflow: auto;
    overflow-x: hidden;
    height: 0px;
  }

  .nav .nav-content.back{
    opacity: 0;
  }

  .tools-bar.nop{
    opacity: 0;
    pointer-events: none;
  }

  .nav .nav-content.opst{
    /* animation: ifff .2s cubic-bezier(0.66,0,0.2,1) forwards; */
    opacity: 1;
    transition-delay: 1s;
    height: calc(90vh - 92px);

  }

  .nav.aa .navmobile{
    border: none;
  }

  .nav.aa{
    border: 1px solid #d2d2d7;
  }
  
  @keyframes ifff{
    0%{
      transform: translateY(-100vh);
      opacity: 0;
    }
    100%{
      transform: translateY(-0vh);
      opacity: 1;
    }
  }

  .nav.navc{
    height: calc(100vh - 20px);
  }

  .nav.aa{
    height: calc(100vh - 20px);
  }

  .nav.bb{
    height: calc(100vh - 20px);
  }

  .nav.cc{
    height: calc(100vh - 20px);
  }

  .nav.dd{
    height: calc(100vh - 20px);
  }

  .nav.ee{
    height: calc(100vh - 20px);
  }
  
  @media (max-width: 1017px){
    .nav .link-selection{
      width: 549px;
    }
  }

  .nav.ebook-width {
    min-width: 55px!important;
    width: 55px!important;
    border-radius: 70px;
}

  @media (max-width: 753px){
    .navdesktop{
      display: none;
    }
    .navmobile{
      display: block;
    }
    .nav,
    .navmobile{
      height: 70px;
      border-radius: 37px;
    }

    .nav.ebook-width {
      min-width: 75px!important;
      width: 70px!important;
  }

    .nav{
      border: none;
    }
  .navmobile.m,
  .nav.m{
    height: calc(100vh - 20px)!important;
  }

  }

  .navmobile{
    width: 100%;
    position: relative;
    z-index: 3;
    border-radius: 37px;
  }

  .navmobile .link-selection{
    display: block;
    width: 100%;
    opacity: 1;
    transition: all .3s cubic-bezier(0.66,0,0.2,1);
    /* margin: 10px; */
  }

  .navmobile .line-nav{
    margin: 20px 10px;
    height: 1px;
    width: 100%;
    background-color: #d2d2d7;
  }

  .navmobile .link-selection li{
    list-style: none;
    padding: 20px;
    width: calc(100% - 20px);
    margin: auto;
    border-bottom: 1px solid #d2d2d7;
  }

  .navmobile .link-selection a{
    color: #2b2b2b;
  }

  .aldis{
    height: 70px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
  
  .navmobile li{
    opacity: 0;
  margin-top: 50px;
  transform: translatey(50px);
  transition: opacity .5s cubic-bezier(0.6, 0.34, 0.2, 1.55), transform .5s cubic-bezier(0.6, 0.34, 0.2, 1.55), margin .5s cubic-bezier(0.6, 0.34, 0.2, 1.55);
  }

  .navmobile.m li{
    opacity: 1;
    transform: translatey(0);
    margin-top: 0px;
    
  }

  /* .navdesktop li{
    transform: translateY(120px);
    animation: ope .5s cubic-bezier(0.6, 0.34, 0.2, 1.55) forwards;
  } */

  .navdesktop.ebook{
    width: 100%;
    margin: 0;
  }

  @keyframes ope{
    0%{
      transform: translateY(120px);
    }
    100%{
      transform: translateY(0);
    }
  }

  .navdesktop li:nth-of-type(1) {
    animation-delay: 400ms;
  } 
  
  .navdesktop li:nth-of-type(2) {
    animation-delay: 500ms;
  } 
  
  .navdesktop li:nth-of-type(3) {
    animation-delay: 600ms;
  } 
  
  .navdesktop li:nth-of-type(4) {
    animation-delay: 700ms;
  } 
  
  .navdesktop li:nth-of-type(5) {
    animation-delay: 800ms;
  } 
  
  .navdesktop li:nth-of-type(6) {
    animation-delay: 900ms;
  } 

  .navmobile.m li:nth-of-type(1) {
    transition-delay: 400ms;
  } 
  
  .navmobile.m li:nth-of-type(2) {
    transition-delay: 500ms;
  } 
  
  .navmobile.m li:nth-of-type(3) {
    transition-delay: 600ms;
  } 
  
  .navmobile.m li:nth-of-type(4) {
    transition-delay: 700ms;
  } 
  
  .navmobile.m li:nth-of-type(5) {
    transition-delay: 800ms;
  } 
  
  .navmobile.m li:nth-of-type(6) {
    transition-delay: 900ms;
  } 

  .navmobile li:nth-of-type(6) {
    transition-delay: 200ms;
  } 
  
  .navmobile li:nth-of-type(5) {
    transition-delay: 300ms;
  } 
  
  .navmobile li:nth-of-type(4) {
    transition-delay: 400ms;
  } 
  
  .navmobile li:nth-of-type(3) {
    transition-delay:500ms;
  } 
  
  .navmobile li:nth-of-type(2) {
    transition-delay: 600ms;
  } 
  
  .navmobile li:nth-of-type(1) {
    transition-delay: 700ms;
  } 
  

  .navmobile .link-selection .rr a{
    gap: 10px;
    display: flex;
  }

  .navmobile .tools-bar{
    display: flex;
    background-color: #dadada;
    width: 100px;
    height: 50px;
    margin-top: -11px;
    border-radius: 40px;
    padding: 5px;
    gap: 5px;
    justify-content: space-around;
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
  }

  .navmobile .tools-bar .ebook-icon.m{
    display: none;
  }

  .navmobile .tools-bar.m{
    width: 50px;
  }

  .navmobile .tools-bar.m .ebook-icon{
    opacity: 0;
    transform: translateX(50px);
  }

  .navmobile .tools-bar .tool{
    height: 40px;
    width: 40px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
  }

  .navmobile .ebook-icon{
    background-image: url(/beta-nav-image/ebook-icon-nav.svg);
    background-size: 20px;
    transition: all .4s cubic-bezier(0.66,0,0.2,1);
  }

  .navmobile .control-nav{
    background-image: url(/beta-nav-image/list.svg);
    background-size: 20px;
    transition: all .5s cubic-bezier(0.66,0.2,0,1);
    transition-delay: .2s;
  }

  .navmobile .control-nav.m{
    transform: rotate(1800deg);
    background-image: url(/beta-nav-image/x.svg);
  }

  .nav.desktop,
  .nav.mobile{
    display: none;
  }

  .x-icon{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    transform: translatey(10px) translateX(10px);
    background-image: url(/beta-nav-image/x.svg);
    background-color: #fff;
    cursor: pointer;
    transition: all .2s cubic-bezier(0.66,0,0.2,1);
  }

  .x-icon:hover{
    background-image: url(/beta-nav-image/x-light.svg);
    background-color: #0071ef;
  }

  .x-icon:active{
    background-image: url(/beta-nav-image/x-light.svg);
    background-color: #000000;
  }

  .nav-content{
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
  }

  .nav.aa .link-selection{
    opacity: 0;
    pointer-events: none;
  }

  .link-select{
    width:257px;
    display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0px;
  z-index: 200;
  }

  .link-select .link-button{
    padding: 5px 10px;
    border-radius: 20px;
    transform: translateY(14.5px);
    background-color: #bbbbbb;
  }

  .link-select .link-button:active{
    background-color: #0071ef;
  }

  .link-select .link-button.m{
    background-color: #0071ef;
  }

  .nav-content-box{
    transition: all .5s cubic-bezier(0.66,0,0.2,1);
    height: calc(90vh - 112px);
    margin-top: 20px;
    padding: 10px;
    width: 100%;
    max-width: 800px;
    display: flex;
    gap: 30px;
    margin: auto;
    margin-top: 20px;
    opacity: 1;
    animation: ini .5s cubic-bezier(0.66,0,0.2,1) forwards;
  }

  .nav-content::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 20px;
    /* display: none; */
  }
  
  .nav-content::-webkit-scrollbar-track {
    background: rgb(223, 223, 223);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    /* display: none; */
  
  }
  
  .nav-content::-webkit-scrollbar-thumb {
    background: #a4a4a439;
    border-radius: 20px;
    /* display: none; */
  
  }

.link-select.kkk{
  width: 509px;
}

  .list li{
    list-style:disc;
    margin-top: 10px;
  }
  
  .nav-content:hover::-webkit-scrollbar-thumb {
    background: rgba(88, 88, 88, 0.71);
    border-radius: 20px;
    /* display: none; */
  }

  .nav-content .product-content a{
    height: 100px;
  }

  .nav .nav-content .second.nav-content-box,
  .nav .nav-content .third.nav-content-box,
  .nav .nav-content.second .first.nav-content-box,
  .nav .nav-content.second .third.nav-content-box,
  .nav .nav-content.third .first.nav-content-box,
  .nav .nav-content.third .second.nav-content-box{
    opacity: 0;
    display: none;
  }

  .nav .nav-content.second .second.nav-content-box,
  .nav .nav-content.third .third.nav-content-box{
    opacity: 1;
    display: flex;
  }

  .nav.m .nav-button{
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: 794px){
    .nav .nav-content.second .second.nav-content-box,
  .nav .nav-content.third .third.nav-content-box{
    opacity: 1;
    display: block;
  }

  .nav-content-box{
    display: block;
    max-width: 320px!important;
  }

  .nav-content-box .product-picture{
    height: 320px!important;
    width: 320px!important;
    margin: auto;
  }

  .nav-content-box h1{
    font-size: 30px;
  }

  .nav-content.opst{
    height: calc(100vh - 112px)!important;
  }

  .nav.yoyo .nav-content.opst{
    height: 210px!important;
  }

  .nav.yoyo{
    height: 300px!important;
  }
  }

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

  .nav-content-box.first.s{
    display: none;
    opacity: 0;
  }

  .nav-content-box.first.t{
  }

  .nav-content-box.m{
    opacity: 0;
  }

  .nav-content-box p{
    width: 300px;
  }

  .nav-content-box h1{
    white-space: nowrap;
  }

  .nav-content-box .product-picture{
    width: 350px;
    height: 350px;
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .first.nav-content-box .product-picture{
    background-image: url(/image/cc12.png);
    
  }

  .second.nav-content-box .product-picture{
    background-image: url(/image/c1-1.png);
    
  }

  .third.nav-content-box .product-picture{
    background-image: url(/image/c2-1.png);
    
  }

  .nav.yoyo .tools-bar{
    opacity: 0;
    pointer-events: none;
  }
  /* the end of the beta nav */

  .drfhujr{
    padding: 15px;
    transition: opacity .5s cubic-bezier(0.66,0,0.2,1);
    /* margin-top: -100%; */
    transition-delay: .5s;
    opacity: 0;
  }

  .nav.mobile.active .drfhujr{
    /* margin-top: 0; */
    opacity: 1;
  }

  .drfhujr .flex{
    margin-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #575757;
  }

  .cursorp{
    cursor: pointer;
  }

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

.content{
    max-width: 1000px!important;
    margin: auto;
    display: block;
    width: 100%!important;
    min-width: 320px!important;
    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{
  width: 100%!important;
}

.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%;
  max-width: 600px;
  padding: 0px 10px;
}

#myse li{
  overflow-x: hidden;
  font-family: 'SF Pro Display';
  font-weight: 700;
  font-size: 35px;
  list-style: none;
  counter-increment: item-counter;
}

#myse li:before{
  color: #AFAFAF;
  overflow-x: hidden;
  font-family: 'SF Pro Display'!important;
  font-weight: 600;
  font-size: 35px;
  list-style: none;
  content: counter(item-counter);
}

#myse p{
  overflow-x: hidden;
  font-family: 'SF Pro Display','pin';
  font-weight: 500;
  font-size: 17px;
  list-style: none;
}

#mysearch{
  max-width: 500px;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  background-color: #ffffff9f;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0px 10px;
  outline: none;
  border: 1px solid #000000;
  padding-left: 30px;
  /* transform: translateX(-18px); */
}

.search-icon{
  height: 18px;
  width: 18px;
  position: relative;
  z-index: 2;
  transform: translateY(29px) translateX(8px);
  background-image: url(/css/icon/search.svg);
  ;
}

.input-group.remove .search-icon{
  display: none;
}

.input-group.remove #mysearch,
.input-group.remove input{
  padding-left: 10px;
}

.input-group{
  padding: 0px 10px;
  max-width: 500px;
  margin: auto;
  position: sticky;
  top: 50px;
  width: 100%;
}

.sm-title{
  font-size: 10px;
  color: rgb(83, 83, 83);
}

.on-the-top{
  background-color: rgb(255, 69, 69);
  color: #fff;
  height: 25px;
  padding: 2px;
  border-radius: 5px;
  font-size: 15px;
  display: flex;
  gap: 5px;
  width: 90px;
}

.pin-icon{
  background-image: url(/css/icon/pin-angle.svg);
  height: 15px;
  width: 15px;
  color: #fff;
  margin-top: 2px;
}

.community-background{
  background-image: url(/image/community-background.png);
  height: 100vh;
  width: 100%;
  max-width: 2560px;
  min-width: 320px;
  background-color: #F2F2F2;
  background-size: 100vh!important;
  margin-top: 10px;
}


@media (max-width:663px){
  .community-background{
    background-size: 70vh!important;
    height: 70vh;
  }
}

#myse img{
  max-width: 300px;
  border-radius: 15px;
}

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

#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: 20px;
  height: 20px;
  border: 0;
  background: url("/css/icon/x-circle-fill.svg") center no-repeat;
  background-size: cover;
  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; */
}

.cursord{
  cursor: default!important;
}

.ebookrr{
  max-width: 200px;
}

.sticky{
  position: sticky;
}

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

.bookshelf{
  height: 283.03px;
  width: 200px;
  box-shadow: 15.5429px 18.2857px 36.5714px rgba(0, 0, 0, 0.21);
}



.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/fjodp.png);
  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: 463px;
  /* background-color: #F1F1F1; */
  margin-top: 0px;
  overflow-x: auto;
  overflow-y: hidden;
}

.barfhjf .closemode{
  text-align: center;
  display: block;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 600;
  transition: all .2s cubic-bezier(0.66,0,0.2,1);
  border-bottom: 1px solid #d2d2d7;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.opzero{
  opacity: 0;
  pointer-events: none;
}

.fixed{
  position: fixed;
  z-index: 981;
}

.dfghu{
  width: 100%;
  top: calc(50% - 32px);
  display: flex;
  transition: opacity .2s cubic-bezier(0.66,0,0.2,1);
  justify-content: space-between;
}

.dfghu .nextpage,
.dfghu .lastpage{
  height: 50px;
  width: 40px;
  overflow: hidden;
}

.barfhjf .closemode:hover{
  background-color: rgb(255, 97, 97);
  color: #fff;
}

.openmode{
  position:fixed;
  bottom:0px;
  left: calc(50% - 40px);
  margin: auto;
  height: 36px;
  width: 80px;
  top: none!important;
  background-color: rgba(233, 233, 233, 1);
  border-radius: 10px 10px 0px 0px;
  border: 1px solid #d2d2d7;
  cursor: pointer;
  z-index: 981;
  transition: all .2s cubic-bezier(0.66,0,0.2,1);
  animation: opdfjo .2s cubic-bezier(0.66,0,0.2,1) forwards;
  animation-delay: .5s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes opdfjo{
  0%{
    background-color: rgba(233, 233, 233, 1);
  }
  100%{
    background-color: rgba(233, 233, 233, 0.253);
  }
}

.openmode .icondgkf{
  transform: scale(1.5) rotate(-90deg);
  margin: auto;
  margin-top: 13px;
}

.barfhjf{
  background-color: #f1f1f193;
  position: fixed;
  top: calc(100% - 101px);
  left: calc(50% -  231.5px);
  overflow: hidden;
  height: 87px;
  border-radius: 10px;
  width: 463px;
  margin: auto;
  display: block;
  backdrop-filter: blur(8px);
  border: 1px solid #d2d2d7;
  -webkit-backdrop-filter: blur(8px);
  z-index: 10020;
  transition: .5s transform cubic-bezier(0.66,0,0.2,1);
}

.barfhjf.passed{
  /* animation: opfhs .5s cubic-bezier(0.66,0,0.2,1) forwards; */
  /* opacity: 0.5; */
  animation-delay: 2s;
}

@keyframes opfhs{
  0%{
    opacity: 0.5;
    transform: scale(0);
    background-color: #0071ef;
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}

.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;
}

.resetbuttonposition{
  margin-top: 7px;
  height: 32px;
  cursor: pointer;
  color: rgb(223, 223, 223);
  border: 1px solid #d2d2d7;
  transition: all .2s cubic-bezier(0.66,0,0.2,1);
  border-radius: 5px;
  padding: 5px;
display: none;
}

.google.active{
  cursor: all-scroll;
}

.resetbuttonposition:hover{
  color: #000;
  background-color: #fff;
}

.wp,
.wppp{
  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;
  color: #000;
  transition: opacity .2s cubic-bezier(0.33,0,0.2,1);
}

.page .o-t,
.page .t-f,
.page .f-s,
.page .s-e{
  display: flex;
  justify-content: space-between;
  scroll-snap-type: y mandatory;
}

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

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

.pdfd{
  width: 100%;
  height: calc(100vh);
  /* margin-top: 44px; */
  border: #4E4E4E;
  scroll-snap-align: start;
}

.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: 390px;
  /* background-color: #F1F1F1; */
  /* position: absolute; */
  /* top: calc(100% - 25px); */
  /* 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.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: 100vh;
    background-color: #00000000;
    position: fixed;
    pointer-events: none;
}

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

.nav{
  z-index: 500001;
}

@media(max-width: 767px){
  .page .o-t,
.page .t-f,
.page .f-s,
.page .s-e{
  display: block;
  overflow: auto;
  height: calc(100vh - 0px);
  /* 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;
  }
  .barfhjf,
  .book .bar,
  .book .bart{
    width: 370px;
  }
  .barfhjf{
    left: calc(50% - 185px);
  }
}

@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;
  }
}

.onehp{
  width: 100%!important;
}

.fhllsk{
  font-size: 17px!important;
}

.buybrandnewmonthly .content h1{
  margin: auto;
  display: block;
  width: 182px;
  font-size: 30px;
}

a{
  text-decoration: none;
}

.buybrandnewmonthly{
  width: 100%;
  cursor: pointer;
  padding-bottom: 50px;
  border: 5px solid #F3F3F3;
  background-color: #FCFCFC;
}

.buybrandnewmonthly .linkgroup{
  margin: auto;
  display: flex;
  justify-content: space-between;
  width: 92px;
  margin-top: 20px;
}

.imgrhfk{
  background-image: url(/image/s3-fi-sha.png);
 height: 363px;
 width: 256.67px;
 margin: auto;
 margin-top: 30px;
}

.icondgkf{
  height: 18px;
  width: 12px;
  margin-top: 4px;
  background-image: url(link-icon/angle-right.svg);
  
}

.background-setting{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

.wijmdm{
  text-align: center;
  display: block;
  font-size: 17px!important;
}

.text-center{
  text-align: center;
  display: block;
}

.swhior{
  margin-top: 7px!important;
}

.moreaboutebook{
  padding-bottom: 29px;
  border-bottom: 5px solid #F3F3F3;
  cursor: pointer;
  width: 100%;
  padding-top: 37px;
  height: 736px;
  margin-top: 10px;
}

.gjifpds{
  margin-top: 0px!important
}

.moreaboutebook .linkgroup{
  margin: auto;
  display: flex;
  width: 78px;
  margin-top: 15px;
}

.jccontent{
  justify-content: space-between!important;
}

.imgsioj{
  background-image: url(/image/s3-ebookcomputer.jpg);
  height: 340px;
  width: 336.84px;
  margin: auto;
  margin-top: 69px;

}

.location{
  display: flex!important;
  height: 44px!important;
}

.fhogdi{
  margin-top: 0!important;
  padding-top: 46px;
}

.footer h1{
  font-weight: 600;
  font-size: 20px;
  margin-top: 9px;
}

.footer{
  background-color: #F3F3F3!important;
}

.first-pagelink{
  display: flex!important;
  cursor: pointer!important;
}

.group4893g{
  display: flex!important;
  margin-top: 72px!important;
  justify-content: space-between!important;
  width: 100%!important;
}

.ig-icon,
.fb-icon{
  height: 30px!important;
  width: 30px!important;
  margin-right: 15px!important;
}

.qlink .title{
  font-size: 17px!important;
  margin-bottom: 10px!important;
}

.qlink a{
  color: #5E5E5E!important;
  font-size: 13px!important;
}

.qlink a:hover{
  text-decoration: underline!important;
}

.line{
  width: 100%!important;
  background-color: #d2d2d7!important;
  height: 1px!important;
  margin-top: 80px!important;
}

.links{
  display: flex;
}

@media (max-width: 712px){
  .group4893g{
    display: block!important;
  }

  .links{
    margin-top: 40px;
  }
}

.ig{
  margin-top: 21px!important;
}

.fb-icon{
  background-image: url(/css/icon/facebook.svg)!important;
}

.ig-icon{
  background-image: url(/css/icon/instagram.svg)!important;
}

.ig,
.faceb{
  display: flex!important;
  font-size: 20px!important;
  font-weight: 600!important;
  font-family: 'pin'!important;
  cursor: pointer!important;
}

.disappear{
  transform: translateY(calc(100vh + 150px))!important;
}

input, textarea {

  font-size: initial;
  
  }

  .copyright{
    font-size: 10px!important;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
  }

  .groupfhgoid{
    width: 100%!important;
    display: flex;
    justify-content: space-between;
    max-width: none!important;
  }

  .line,
  .location,
  .group4893g{
    max-width: none!important;
  }


.help{
  height: 15px!important;
  margin-top: 10px!important;
  cursor: pointer;
  width: 15px!important;
  background-image: url(/css/icon/question-circle.svg);
}

@media (max-width: 377px){
  .imgsioj{
    height: 279px;
    width: 286.84px!important;
  }
  .imgrhfk{
    height: 339px;
  }
}

@media (max-width: 342px){
  .group4893g{
    display: block;
  }
  .links{
    margin-top: 20px;
  }
}

.titlegroupfhkjlg{
  /* height: 100vh; */
  margin-top: 72px;
  width: 100%;
}

.rocthirdpagetitle{
  height: 582px;
  width: 476px!important;
  margin: auto;
  background-image: url(/image/rocthirdpagetitle.svg);
}

.puffthird{
  color: #A6A6A6;
  font-size: 30px;
  text-align: center;
  transform: translateY(-309px);
}

.thelistthird{
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.13);
  padding: 10px;
  padding-top: 20px;
  height: 370px;
}

.shadow-style{
  padding: 10px;
  padding-top: 20px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.13);
  border-radius: 20px;
}

.h1wmvporsi span,
.h1wmvporsi{
  font-size: 30px!important;
}

.h1wmvporsi{
  text-align: center;
}

.h1wmvporsi span{
  color: #7D7D7D;
}

.imgwopvms{
  background-image: url(/image/thelistthird.svg);
  height: 149px;
  width: 235px;
  margin: auto;
  margin-top: 72px;
}

.h1ashle .spanihth{
  background: linear-gradient(94.85deg, #7E5E2D 46.09%, #E7CCA3 73.16%, #7E5E2D 103.2%);
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
background-clip: text;
font-size: 30px!important;
font-weight: 500!important;
}

.h1ashle{
  font-size: 30px!important;
  text-align: center;
}

.h1ashle span{
  font-size: 30px!important;
font-weight: 500!important;
}

.thirdighdl{
  height: 515px;
  width: 100%;
  margin-top: 20px;
}

.bookred{
  height: 300px;
  width: 300px;
  margin: auto;
  display: block;
  background-image: url(/image/bookred.svg);
  border-radius: 20px;
  margin-top: 30px;
}

.bookredgreen{
  height: 317.42px;
  width: 300px;
  margin: auto;
  display: block;
  background-image: url(/image/bookredgreen.svg);
  border-radius: 20px;
  margin-top: 30px;
}

.bookredblack{
  height: 317.42px;
  width: 300px;
  margin: auto;
  display: block;
  background-image: url(/image/bookredblack.svg);
  border-radius: 20px;
  margin-top: 30px;
}

.imgphmke{
  background-image: url(/image/ebookonphone.png);
  height: 442px;
  width: 217.39px;
  margin: auto;
  margin-top: 30px;
}

.h1fherjgk .spanfihioe{
  color: #00D959!important;
  font-weight: 500;
  font-size: 40px;
}

.h1fherjgk{
  font-size: 40px!important;
  text-align: center;
}

.earthicon{
  background-image: url(/image/earth-icon.svg);
  height: 308px;
  width: 308px;
  margin: auto;
  margin-top: 20px;
}

.puffebookicon{
  background-image: url(/image/puffebook-icon.svg);
  height: 250px;
  width: 200px;
  margin: auto;
  margin-top: 100px;
}

.h1ghosehi{
  font-size: 30px!important;
  color: #A6A6A6!important;
  text-align: center;
  margin-bottom: 8px;
}

.h1ghosehi span{
  font-size:30px!important;
  font-weight: 500;
  color: #2b2b2b!important;
}

.undericon{
  font-size: 20px;
  text-align: center;
  color: #535353!important;
  margin-top: 10px;
}

.last-pageicon-large{
  background-image: url(/image/lp-large.svg);
  height: 150px;
  width: 150px;
  margin: auto;
  margin-top: 10px;
}

.next-pageicon-large{
  background-image: url(/image/np-large.svg);
  height: 150px;
  width: 150px;
  margin: auto;
  margin-top: 10px;
}

.ifull-screenicon-large{
  background-image: url(/image/fullscreen-large.svg);
  height: 150px;
  width: 150px;
  margin: auto;
  margin-top: 10px;
}

.full-screenicon-large{
  background-image: url(/image/lscreen-large.svg);
  height: 150px;
  width: 150px;
  margin: auto;
  margin-top: 10px;
}

.besticon-large{
  background-image: url(/image/onehp-large.svg);
  height: 150px;
  width: 266.36px;
  margin: auto;
  margin-top: 10px;
}

.autoicon-large{
  background-image: url(/image/auto-large.svg);
  height: 150px;
  width: 266.36px;
  margin: auto;
  margin-top: 10px;
}

.pageicon-large{
  background-image: url(/image/wpage-large.svg);
  height: 150px;
  width: 266.36px;
  margin: auto;
  margin-top: 10px;
}

.ebookonphone{
  background-image: url(/image/ebookonphone-clear.png);
  height: 373px;
  width: 183.46px;
  margin: auto;
  margin-top: 20px;
}

.top-bar{
  padding-bottom: 20px;
  border-bottom: 1px solid #d2d2d7;
}

.q{
  font-size: 20px;
  color: #828282;
}

.a{
  font-size: 25px;
}

.notanymore{
  background-color: rgb(255, 255, 255);
  height: 736px;
}

.imgdhfouh{
  background-image: url(/image/notanymore.png);
  height: 278.22px;
  width: 320px;
  margin: auto;
}

@media (max-width: 529px){
  .rocthirdpagetitle{
    height: 493px;
    width: 403px;
  }
  .puffthird{
    transform: translateY(-264px);
  }
}

@media (max-width: 449px){
  .rocthirdpagetitle{
    height: 399px;
    width: 322px;
  }
  .puffthird{
    font-size: 25px;
    transform: translateY(-219px);
  }
}

.imgsohf{
  background-image: url(/image/s8-fi.png);
  height: 424.54px;
  width: 300px;
  margin: auto;
  box-shadow: 17px 20px 40px rgb(0 0 0 / 21%);
}

.loadds{
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: #ffffffab;
  transition: all 0.5s cubic-bezier(0.66,0,0.2,1);
  transition-delay: 2s;
}

.loadds.passed{
  

  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transform: scalex(0) translateY(100%);
  
}

.barfhjf.passed .aut,
.barfhjf.passed .fb,
.barfhjf.passed .au,
.barfhjf.passed .lp,
.barfhjf.passed .np,
.barfhjf.passed .wp,
.barfhjf.passed .cb{
  transform: scale(1);
}

.barfhjf .aut,
.barfhjf .fb,
.barfhjf .au,
.barfhjf .lp,
.barfhjf .np,
.barfhjf .wp,
.barfhjf .cb{
  transition: all .5s cubic-bezier(0.66, 0.41, 0.31, 1.53);
  /* animation: 1s rfij cubic-bezier(0.83,-0.55, 0.31, 1.53) infinite; */
  transform: scale(0);
  transition-delay: 2.8s;
}


.barfhjf.passed{

  transform: scale(1) translateY(0)!important ;
  
}

.barfhjf.disappear{
  transition-delay: 0s!important;
  transform: translateY(1000px)!important;
}

.barfhjf{
  transition: all .5s cubic-bezier(0.66, 0.41, 0.31, 1.53)!important;
  transform: scale(0)!important;
  transition-delay: 2.7s!important;
  
}

.notr{
  transition: all .5s cubic-bezier(0.66, 0, 0.2, 1)!important;

  transition-delay: 0s!important;
}


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

.load-circle{
  height: 297px;
  width: 210px;
  background-color: #000;
  position: absolute;
  top: calc(50% - 148.5px);
  left: calc(50% - 105px);
  border: 1px solid #d2d2d7;
  box-shadow:17px 20px 40px rgb(0 0 0 / 21%);
}

.progree{
  position: absolute;
  top: calc(80%);
  left: calc(50% - 150px);
  display: block;
}

.progree .lon{
  border-radius: 100px;
  height: 5px;
  width: 300px;
  background-color: #ddd;
}

.loadds.passed .progree .lin{
animation: 2s eryg linear forwards;

}

.progree .lin{
  border-radius: 100px;
  background-color: #000;
height: 5px;
width: 300px;
transform: translateY(-5px);
}

@keyframes eryg{
  0%{
    width: 0;
  }
  100%{
    width: 300px;
  }
}

.barfhjf{
  /* transition-delay: 2s; */
  /* animation: none!important; */
  transform: translateY(100%);
  /* transition: all .5s cubic-bezier(0.66,0,0.2,1)!important; */
}

/* 
.barfhjf.passed{
  transform: translateY(0);
} */

.page.scale .pdfd{
  width: 200%;
  height: calc(200vh - 44px);
}

.page.scale.auto .pdfd{
  width: auto;
  height: calc(200vh - 44px);
}

.page.scale .o-t, .page.scale .t-f, .page.scale .f-s, .page.scale .s-e{
  height: 100vh;
  overflow: auto;
}

.pageg.scale{
  display: none;
}

.pdfd{
  pointer-events: none;
  transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

@media (max-width: 390px){
  .barfhjf{
   width: 100%;
   border-radius: 0;
   left: 0;
    top: calc(100vh - 87px);
  }
  .pdfd{
    height: calc(100vh - 87px)
  }
}

@media (max-width: 370px){
  .au,
  .aut{
    display: none!important;
  }
  .bar{
    width: 231px!important;
    margin: auto;
  }
}

.dhfi{
  display: block!important;
}

@media (max-width: 550px){
  .imgsohf{
    height: 333.97px;
    width: 236px;
  }
  .imgrry{
    height: 333.97px;
      width: 236px;
  }
}
/* 
.piccha{
  overflow: hidden!important;
  height: 100vh;
  width: 100%;
  min-width: 320px;
  background-color: #F1F1F1;
  margin-top: 44px;
  
  animation: baskd 18s linear infinite;
}

.bottom-bar{
  height: 200px;
  width: 100%;
  background-color: #000;
  position: absolute;
  top: calc(100% - 200px);
  color: #198964;
  font-size: 200px;
  text-align: center;
  overflow: hidden;
}

.width-control{
  max-width: 1000px;
  min-width: 320px;
  margin: auto;
}

.pone,
.ptwo,
.pthree{
  height: 100vh;
}

.briefly{
  border-radius: 25px;
  background-color: #fff;
  height: 250px;
  width: 320px;
  position: absolute;
  top: calc(100% - 325px);
  left: 20px;
  z-index: 100;
  padding: 7px;
  overflow: hidden;
}

.title{
  display: flex;
  padding-bottom: 15px;
  padding-top: 5px;
  padding-left: 5px;
  border-bottom: 1px solid #d2d2d7;
}

.title .titleo{
  padding: 5px 10px;
  background-color: #198964;
  color: #fff;
  border-radius: 40px;
}

.title .titlet{
  margin-top: 5px;
  margin-left: 5px;
}

.briefly .about-it{
  padding: 15px 5px;
  color: rgb(71, 71, 71)
}

.progressp{
  display: block;
  padding: 5px;
  margin-top: 5px;
}

.proline{
  position: relative;
  z-index: 2;
  height: 2px;
  background-color: #00FFAB;
}

.probackground{
  width: 100%;
  height: 2px;
  background-color: #AFAFAF;
  border-radius: 20px;
  transform: translateY(-2px);
}

.imagetitle-1{
  background-image: url(/image/s5-fi.png);
  height: 452.84px;
  width: 320px;
  margin: auto;
  margin-top: 11vh;
  box-shadow: 17px 20px 40px rgb(0 0 0 / 21%);
  animation: poneimgt 18s linear infinite;
}

@keyframes poneimgt{
  0%{
     transform: scale(1);
     opacity: 0;
     width: 0;
     margin-top: 11vh;
  }
  2%{
    transform: scale(1);
    width: 320px;
    opacity: 1;
  }
  30%{
    transform: scale(1.2);
    width: 320px;
    opacity: 1;
  }
  32%{
    width: 0;
    opacity: 0;
  }
  100%{
    width: 0;
    opacity: 0;
  }
}

.pone .briefly{
  animation: ponebrt 18s cubic-bezier(0.66,0,0.2,1) infinite;
}

@keyframes ponebrt{
  0%{
     transform: scale(1);
     opacity: 0;
     width: 0; */
     /* margin-top: 11vh; */
  /* }
  2%{
    transform: scale(1);
    width: 320px;
    opacity: 1;
  }
  30%{
    width: 320px;
    opacity: 1;
  }
  32%{
    width: 0;
    opacity: 0;
  }
  100%{
    width: 0;
    opacity: 0;
  }
}

.pone .bottom-bar{
  animation: ponebbt 18s cubic-bezier(0.66,0,0.2,1) infinite;
}

@keyframes ponebbt{
  0%{
    transform: translateY(100%);
  }
  2%{
    transform: translateY(0);
  }
  30%{
    transform: translateY(0);
  }
  32%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(100%);
  }
}

.pone .proline{
  animation: poneplt 18s linear infinite;
}

@keyframes poneplt{
  0%{
    width: 0;
  }
  32%{
    width: 100%;
  }
  100%{
    transform: translateY(100%);
  }
}

.ptwo .bottom-bar{
  animation: ptwobbt 18s linear infinite;
  background-color: rgb(235, 235, 235);
}

@keyframes ptwobbt{
  0%{
    transform: translateY(100%);
  }
  32%{
    transform: translateY(100%);
  }
  33%{
    transform: translateY(0);
  }
  64%{
    transform: translateY(0);
  }
  65%{
    transform: translateY(100%);
  }
  100%{
    transform: translateY(100%);
  }
}

.ptwo .briefly{
  animation: ptwobrt 18s cubic-bezier(0.66,0,0.2,1) infinite;
}

@keyframes ptwobrt{
  0%{
    width: 0;
    opacity: 0;
  }
  33%{
     transform: scale(1);
     opacity: 0;
     width: 0; */
     /* margin-top: 11vh; */
  /* }
  35%{
    transform: scale(1);
    width: 320px;
    opacity: 1;
  }
  65%{
    width: 320px;
    opacity: 1;
  }
  66%{
    width: 0;
    opacity: 0;
  }
  100%{
    width: 0;
    opacity: 0;
  }
}

.ptwo .proline{
  animation: ptwoplt 18s linear infinite;
}

@keyframes ptwoplt{
  35%{
    width: 0;
  }
  65%{
    width: 100%;
  }
  100%{
    transform: translateY(100%);
  }
}

.pthree .proline{
  animation: pthreeplt 18s linear infinite;
}

@keyframes pthreeplt{
  66%{
    width: 0;
  }
  100%{
    width: 100%;
  }
  0%{
    width: 0;
  }
}

.pthree .briefly{
  animation: pthreebrt 18s cubic-bezier(0.66,0,0.2,1) infinite;
}

@keyframes pthreebrt{
  65%{
    width: 0;
    opacity: 0;
  }
  66%{
     transform: scale(1);
     opacity: 0;
     width: 0; */
     /* margin-top: 11vh; */
  /* }
  68%{
    transform: scale(1);
    width: 320px;
    opacity: 1;
  }
  100%{
    width: 320px;
    opacity: 1;
  }
  0%{
    width: 0;
    opacity: 0;
  }
}

.pthree .bottom-bar{
  
  animation: pthreebbt 18s linear infinite;
}

@keyframes pthreebbt{
  0%{
    transform: translateY(100%);
  }
  65%{
    transform: translateY(100%);
  }
  66%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes baskd{
  0%{
    background-color: #F1F1F1;
    overflow: hidden!important;;

  }
  32%{
    background-color: #F1F1F1;
    overflow: hidden!important;;
  }
  33%{
      background-color: #000;
      overflow: hidden!important;
;
  }
  65%{
    background-color: #000;
    overflow: hidden!important;;
}
66%{
  background-color: #F1F1F1;
  overflow: hidden!important;
}
100%{
  background-color: #F1F1F1;
  overflow: hidden!important;
}
}

.imagetitle-2{
  height: 452.84px;
  background-image: url(/image/scale-image.png);
  width: 520.84px;
  animation: ptwoimgt 18s linear infinite;
  margin: auto;
}


@keyframes ptwoimgt{
  33%{
     transform: scale(1) translateY(-120%);
     opacity: 0;
     width: 0;
  }
  35%{
    transform: scale(1) translateY(-120%);
    width: 520.84px;
    opacity: 1;
  }
  64%{
    transform: scale(1.2) translateY(-120%);
    width: 520.84px;
    opacity: 1;
  }
  65%{
    width: 0;
    opacity: 0;
    transform: scale(1) translateY(-120%);
  }
  100%,0%{
    width: 0;
    opacity: 0;
    transform: scale(1) translateY(-120%);
  }
}

@media (max-width: 442px){
  .imagetitle-2{
    height: 278.22px;
    background-image: url(/image/scale-image.png);
    width: 320px;
    animation: ptwoimgt 18s linear infinite;
    margin: auto;
  }
  
  
  @keyframes ptwoimgt{
    33%{
       transform: scale(1) translateY(-200%);
       opacity: 0;
       width: 0;
    }
    35%{
      transform: scale(1) translateY(-200%);
      width: 320px;
      opacity: 1;
    }
    64%{
      transform: scale(1.2) translateY(-200%);
      width: 320px;
      opacity: 1;
    }
    65%{
      width: 0;
      opacity: 0;
      transform: scale(1) translateY(-200%);
    }
    100%,0%{
      width: 0;
      opacity: 0;
      transform: scale(1) translateY(-200%);
    }
  }

  .briefly{
    left: calc(50% - 160px);
  }
} */


.imgrry{
  background-image: url(/image/s9-fi.png)!important;
  height: 300px;
    width: 212.15px;
    margin: auto;
    box-shadow: 0px 0px 40px rgba(0, 0, 0,0.21);
}

#paintArea {
  position: relative;
  height: 100vh;
  width: 100%;
  margin-top: -46px;
}
.options {
  height: 60px;
  background-color: #ebebebd7;
  border-top: 1px solid #d2d2d7;
  position: absolute;
  top: calc(100vh - 70px);
  padding: 10px;
border-radius: 10px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
left: calc(50% - 72px);
}
.tools-row {
  display: flex;
  justify-content: space-between;
  width: 144px;
}
.tools-row h5 {
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.5px;
}
.tools-row div {
  border: 1px solid #000;
  border-radius: 5px;
  background-color: #ffffff;
  font-size: 18px;
  height: 40px;
  width: 40px;
  background-size: 30px!important;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
input[type="range"] {
  height: 40px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  width: 180px;
  border-radius: 4px;
  background: rgb(224, 224, 224);
}

input[type="range"]::-webkit-slider-thumb {
  position: relative;
  height: 16px;
  width: 16px;
  margin-top: -5px;
  background-color: #0071ef; 
  border-radius: 50%;
  border: 1px solid #d2d2d7;
}

input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  width: 40px;
  height: 40px;
  border: none;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch {
  border-radius: 8px;
  border: 3px solid #000000;
}
input[type="color"]::moz-color-swatch {
  border-radius: 8px;
  border: 3px solid #000000;
}

#canvas{
  cursor: url('/image/vector-pen\ 1.png'),auto;
  height: 100vh;
}

#canvas.erase{
  cursor: url('/image/Group\ 9.png'),auto;
  height: 100vh;
}

#button-pen{
  background-image: url(/image/cursor-pen.png);
}

#button-erase{
  background-image: url(/image/cursor-erase.png);
}

#button-clear{
  background-image: url(/image/clean.png);
}

input[type="range"],
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.pen-tools{
  
  height: 147px;
  width: 229px;
  background-color: #f5f5f5d7;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all .5s cubic-bezier(0.66,0,0.2,1);
  border-radius: 0 0 15px 15px;
  margin: auto;
  margin-top: -147px;
  padding: 10px;
  border: 1px solid #d2d2d7;
  border-top: none;
   z-index: 10;
   transform: translateY(-147px);
  position: relative;
}


.pen-tools.fi{
 
  margin-top: -174px;
  transform: translateY(100px);
}

.cancel-button{
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 1px solid #000;
  margin-left: 189px;
  background-color: rgb(233, 233, 233);
  background-image: url(/css/icon/x.svg);
  background-size: 20px;
  background-position: center;
  cursor: pointer;
}

.close-button-shio{
  height: 25px;
  width: 25px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #000000;
  top: 10px;
  left: calc(100% - 40px);
  z-index: 10;
  background-image: url(/css/icon/x.svg);
  background-size: cover;
  cursor: pointer;
}

.sui.none{
  display: none;
}

.none{
  display: none!important;
}

.nav.sdc{
  transition: all .5s cubic-bezier(0.66,0,0.2,1);
  transform: translateY(-40px);
  opacity: 0;
}

.nav.sdc:hover{
  opacity: 1;
  transform: translateY(0px);
}

.domain-online{
  background-image: url(/image/domain-online.png);
  height: 100vh;
  width: 100%;
  min-width: 320px;
  border-bottom: 1px solid #d2d2d7;
  overflow: hidden;
}

.text-line{
  height: 50px;
  display: flex;
  transform: translateY(calc(100vh - 80px));
  background-color: #D9D9D9;
  gap: 10px;
}

.text-line .text{
  height: calc(60px / 3);
  transform: translateY(15px);
  animation: jkfoj 8000s linear infinite;
}

@keyframes jkfoj{
  0%{
    transform: translateX(-208375.12px) translateY(15px);
  }
  100%{
    transform: translateX(208375.12px) translateY(15px);
  }
}

.text.hj{
  animation-delay: 1s;
}

@media (max-width: 476px){
  .domain-online{
    background-image: url(/image/domain-online-2.png);
  }
}

.r2022g{
  margin-top: 44px;
  height: calc(100vh - 44px);
  background-color: #D2D2D2;
  overflow: hidden;
}

.r2022g .back{
  background-image: url(/image/Group\ 37.jpg);
  height: 450px;
  width: 450px;
  margin: auto;
  margin-top: 3px;
}

@media (max-width: 445px){
  .r2022g .back{
    height: 320px;
   width: 320px;
   margin-top: 79px;
  }
}

.whback{
  height: calc(100vh + 44px);
  width: 100%;
  background-image: url(/image/whole-s-background.jpg);
}

@media (max-width: 759px){
  .whback{
    background-image: url(/image/whole-s-background-2.jpg);
  }
}

@media (max-width: 516px){
  .whback{
    background-image: url(/image/whole-s-background-3.jpg);
  }
}

.gbean-grow{
  height: 736px;
  width: 100%;
  max-width: 2560px;
  min-width: 320px;
  /* margin-top: 44px; */
  padding: 5px;
  /* border-bottom: 1px solid #d2d2d7; */
  margin: auto;
}

.gif-gbean{
  height: 350px;
  width: 350px;
  margin: auto;
  background-image: url(/image/Glean.GIF);
  margin-top: 126px;
}

.logoo{
  display: flex;
}

.logo-imgg{
  height: 50px;
  width: 50px;
  background-image: url(/green-bean/big-head/puffmonthly-chr.png);
  border: 1px solid #000;
  border-radius: 100px;
}

.post-stat{
  max-width: 800px;
  min-width: 320px;
  margin: auto;
  display: block;
  margin-top: 60px;
  padding: 10px;
}

.post{
  max-width: 600px;
  min-width: 320px;
  margin: auto;
  border-bottom: 1px solid #d2d2d7;
  padding-bottom: 40px;
  margin-top: 40px;
}

.cont{
  padding-left: 10px;
}

.name{
  font-size: 20px;
  font-family: 'SF Pro display'!important;
  font-weight: 500;
}

.date{
  font-family: 'SF Pro display'!important;
  font-weight: 600;
  font-size: 10px;
  color: #848484;
}

.content-img{
  margin-top: 10px;
  margin-bottom: 10px;
}

.content-img img{
  width: 100%;
  padding: 5px;
  border-radius: 20px;
  border: 1px solid #d2d2d7;
}

.post p{
  color: rgb(61, 61, 61);
  font-weight: 500;
}

.tran{
  position: fixed;
  width: 100%;
  height: 90vh;
  
  margin: auto;
  /* background-color: #000; */
}

.more-link{
  min-width: 100px;
  width: 100px;
  padding: 9px;
  text-align: center;
  height: 40px;
  color: #fff;
  border-radius:10px;
  background: #0071ef;
  cursor: pointer;
  transition: transform .5s cubic-bezier(0.66,0,0.2,1);
}

.more-link:hover{
  transform: scale(0.8);
}
.tran{
  display: none;
}

.buttondd{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

.noneerr{
  pointer-events: none;
  opacity: 0.7;
}

.doewj{
  height: 736px;
  width: 100%;
  max-width: 2560px;
  min-width: 320px;
  background-image: url(/image/234.jpg);
  margin: auto;
  margin-top: 10px;
  cursor: pointer;
}

.content-d{
  width: 100%;
  max-width: 1000px;
  min-width: 320px;
  padding: 10px;
  margin: auto;
  margin-top: 80px;
}

.download-background{
  background-image: url(/image/opendownload-background.jpg);
  height: 485px;
  margin: auto;
  width: 100%;
  max-width: 1000px;
  min-width: 300px;
  border-radius: 15px;
}
.container-a{
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.file-bar,
.link-bar{
  width: 100%;
}

.container-b{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.container-b .location{
  height: 37px;
  width: calc(100% - 120px);
  padding: 7px;
  padding-left: 9px;
  display: flex;
  gap: 10px;
  border-radius: 100px;
  background-color: #EFEFEF;
  border: 1px solid #d2d2d7;
}

.container-b .location span{
  color: #0071ef;
  cursor: pointer;
}

.container-b .location span:hover{
  text-decoration: underline;
}

.se{
  width: 100%;
  margin-top: 10px;
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid #d2d2d7;
}

.se li{
  list-style: none;
  height: 40px;
  padding: 10px;
  color: #000;
  background-color: #DBDBDB;
  display: flex;
  gap: 5px;
  transition: all .2s cubic-bezier(0.66,0,0.2,1);
}

.se li a{
  color: #000;
}

.se .l{
  background-color: #EBEBEB;
}

.type{
  height: 20px;
  width: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.folder{
  background-image: url(/image/folder2.svg);
}

.file{
  background-image: url(/image/file-earmark.svg);
}

.ww{
  cursor: pointer;
  display: flex;
}

.se li.ww:hover{
  background-color: #c0c0c0;
}

.link-barrr{
  width: 50%;
  margin-top: 10px;
  padding-left: 20px;
}

.link-barrr .value{
  color: #0071ef;
  cursor: pointer;
}

.link-barrr .tell{
  display: flex;
  gap: 10px;
}

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

.se li.link-window{
  display: none;
}

.se li.link-window.work{
  display: flex;
}

.ww{
  display: flex;
}

.loaction-folder{
  position: fixed;
  height: 300px;
  width: 320px;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  background-color: #fff;
  padding: 20px;
  border-radius: 15px;
  border: 1px solid #d2d2d7;
  display: block;
  opacity: 0;
  transition: all .3s cubic-bezier(0.66,0,0.2,1);
  transform: scale(0);
  overflow-x: hidden;
  overflow-y: auto;
}

.loaction-folder a{
  color: #000;
}


.overlay-location{
  background-color: rgba(0, 0, 0, 0.466);
  position: fixed;
  height: 100vh;
  transition: all .3 cubic-bezier(0.66,0,0.2,1);
  width: 100%;
  opacity: 0;
  display: none;
}

.opfr{
  opacity: 1;
  transform: scale(1);
  display: block;
}

.line-location{
  background-color: #d2d2d7;
  width: 100%;
  height: 1px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.loaction-folder li{
  margin-bottom: 10px;
  gap: 10px;
}

.sdjhf{
  display: flex;
  justify-content: space-between;
}

.cancel-location{
  height: 30px;
  width: 30px;
  background-image: url(/css/icon/x.svg);
  cursor: pointer;
}

.ww.www:hover,
.ww.www{
  background-color: #EBEBEB!important;
  cursor: default;
}

.yero.yer{
  display: block!important;
  color: #000!important;
  cursor: default!important;
}

.yero.yer:hover{
  text-decoration: none!important;
}

.yero{
  color: #000;
  display: none;
}

.titlt-ab{
  cursor: default;
}

.title-ab.cur{
  cursor: pointer;
}

.back{
  height: 20px;
  width: 20px;
  margin-top: 0.5px;
  cursor: pointer;
}

.back svg{
  height: 20px;
  width: 20px;
  transition: fill .2s cubic-bezier(0.66,0,0.2,1);
}

.back:hover svg{
  fill: #0071ef;
}

.download-button{
  padding: 5px 20px;
  border-radius: 15px;
  border: 1px solid #0071ef;
  color: #0071ef;
  transition: all .3s cubic-bezier(0.66,0,0.2,1);
  cursor: pointer;
}

.download-button:hover{
  padding: 5px 20px;
  border-radius: 15px;
  border: 1px solid #0071ef;
  color: #fff;
  cursor: pointer;
  background-color: #0071ef;
}

.tio{
  margin-top: 20px;
}

.ere{
  animation: ewr .5s cubic-bezier(0.66,0,0.2,1);
}

@keyframes ewr{
  0%{
    transform: scale(1.5) translateY(10%);
  }
  100%{
    transform: scale(1) translateY(0%);
  }
}

.tio.now{
  display: none;
}

.zip{
  background-image: url(/image/file-earmark-zip.svg);
}

.sdjhf.stt{
  position: sticky;
  top: -20px;
  height: 50px;
  padding-bottom: 20px;
  padding-top: 10px;
  margin-top: -10px;
  margin-bottom: 20px;
  background-color: #fff;
  border-bottom: 1px solid #d2d2d7;
}


.se{
  height: 202px;
  overflow: auto;
}

@media (max-width: 906px){
  .container-a{
    display: block;
  }
  .link-barrr{
    width: 100%;
  }
}

@media (max-width: 598px){
  .ak.io{
    display: none;
  }
}

@media (max-width: 550px){
  .aop.io{
    display: none;
  }
}

@media (max-width: 494px){
  .ak.oi{
    display: none;
  }
  
}

@media (max-width: 452px){
  
  .ak{
    display: none;
  }
}

@media (max-width: 449px){
  .doewj{
    background-image: url(/image/234-2.jpg);
  }
}

@media (max-width: 406px){
  .container-b{
    display: block;
  }
  .container-b .location{
    width: 100%!important;
  }
}

@media (max-width: 386px){
  .doewj{
    height: 530px;
    background-image: url(/image/234-2.jpg);
  }
}


.nav.timeout{
  animation: 2s cjdi linear forwards;
}

@keyframes cjdi{
  0%{
    background: rgb(255, 0, 0)
  }
  10%{
    background: rgb(255, 123, 0)
  }
  20%{
    background: rgb(255, 196, 0)
  }
  30%{
    background: rgb(27, 131, 79)
  }
  40%{
    background: rgb(54, 74, 255)
  }
  50%{
    background: rgb(0, 17, 255)
  }
  60%{
    background: rgb(131, 39, 150)
  }
  70%{
    background: rgb(0, 0, 0)
  }
  100%{
    background-color: #000;
  }
}

.hou{
  background-color: rgba(255, 255, 255, 0.747);
  padding: 5px 10px;
  border-radius: 15px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.myvad{
  border: 1px solid #d2d2d7!important;
}

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

.imgsohf,
.imgrry{
  transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

.imgsohf.background{
  height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    background-image: url(/image/s8-background.png);
}

.imgrry.background{
  height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    background-image: url(/image/s9-background.png);
}

html{
  scroll-behavior: smooth;
  position: -moz-sticky;

position: -ms-sticky;

position: sticky;

top: 0;

z-index: 666;
}

.we.background{
  background-image: url(/image/s7-background.png);
}

.we{
  background-image: url(/image/s7-fi.png);
}

.download-background{
  animation: .2s efhio cubic-bezier(0.66,0,0.2,1) forwards;
  position: relative;
  z-index: -1;
}

@keyframes efhio {
  0%{
    transform: translateY(-50px);
  }
  100%{
    transform: translateY(0);
  }
}

.hou{
  animation: .5s fvhi cubic-bezier(0.66,0,0.2,1) forwards;
}

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

.nav{
  /* background-image: url(/image/turtle.gif); */
}

body .footer:nth-last-of-type(2){
  display: none;
}

@media (max-width: 904px){ 
  .bb{ 
    background-image: url(/image/first-page-background-s10-2.png)!important;
  }
}



.icon{
  height: 20px;
  width: 20px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 20px;;
}

.icon.first-page{
  background-image: url(/image/first-page-nav.svg);
}

.icon.search{
  background-image: url(/image/search-nav.svg);
}

.icon.book-shelf{
  background-image: url(/image/ebook-nav.svg);
  width: 15.81px;;
}

.icon.brand-new{
  background-image: url(/image/brand-new-nav.svg);
}

.icon.tree{
  background-image: url(/image/tree-nav.svg);
}

.icon.support{
  background-image: url(/image/support-nav.svg);
}

.icon.community{
  background-image: url(/image/community-nav.svg);
}

body.loaded .nav.mobile .drfhujr{
  transform: translateY(20px);
  transition: transform .5s cubic-bezier(0.6, 0.34, 0.2, 1.55), opacity .5s cubic-bezier(0.6, 0.34, 0.2, 1.55);
  transition-delay: .5s;
}

body.loaded .nav.mobile.active .drfhujr{
  transition-delay: .5s;
  transform: translateY(0px);
}

body.loaded .nav.mobile .drfhujr .flex{
  /* transform: translateX(-80px); */
  opacity: 0;
  margin-top: 50px;
  transition: opacity 1.5s cubic-bezier(0.6, 0.34, 0.2, 1.55), transform 1.5s cubic-bezier(0.6, 0.34, 0.2, 1.55), margin .5s cubic-bezier(0.6, 0.34, 0.2, 1.55);
}

body.loaded .nav.mobile.active .drfhujr .flex{
  opacity: 1;
 transform: translateX(0);
 margin-top: 15px;
}

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(1) {
  transition-delay: 100ms;
} 

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(2) {
  transition-delay: 200ms;
} 

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(3) {
  transition-delay: 300ms;
} 

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(4) {
  transition-delay: 400ms;
} 

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(5) {
  transition-delay: 500ms;
} 

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(6) {
  transition-delay: 600ms;
} 

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(7) {
  transition-delay: 700ms;
} 

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(8) {
  transition-delay: 800ms;
}  

body.loaded .nav.mobile.active .drfhujr .flex:nth-of-type(8) {
  transition-delay: 100ms;
} 

body.loaded .nav.mobile .drfhujr .flex:nth-of-type(7) {
  transition-delay: 200ms;
} 

body.loaded .nav.mobile .drfhujr .flex:nth-of-type(6) {
  transition-delay: 300ms;
} 

body.loaded .nav.mobile .drfhujr .flex:nth-of-type(5) {
  transition-delay: 400ms;
} 

body.loaded .nav.mobile .drfhujr .flex:nth-of-type(4) {
  transition-delay: 500ms;
} 

body.loaded .nav.mobile .drfhujr .flex:nth-of-type(3) {
  transition-delay: 600ms;
} 

body.loaded .nav.mobile .drfhujr .flex:nth-of-type(2) {
  transition-delay: 700ms;
} 

body.loaded .nav.mobile .drfhujr .flex:nth-of-type(1) {
  transition-delay: 800ms;
}  

.nav.desktop li,
.nav.mobile .flex{
  -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
}

body .nav.mobile.active .drfhujr .flex{
  display: none;
}

body .nav.mobile.active::after{
  content: '';
  height: 30px;
  width: 30px;
  display: block;
  margin: auto;
  position: absolute;
  top: calc(50vh - 15px);
  left: calc(50% - 15px);
  border: 2px solid #fff;
  border-bottom: 2px solid #25252500;
  border-radius: 50%;
  animation: r 1s linear infinite;
}

body.loaded .nav.mobile.active::after{
  display: none;
}

@keyframes r{
  0%{
    transform: rotate(0deg);
  }

  100%{
    transform: rotate(360deg);
  }
}

body.loaded .nav.mobile.active .drfhujr .flex{
  display: flex;
}



.nav.no-select{
  display: none;
}

.nav.mobile:nth-of-type(4),
.nav.desktop:nth-of-type(3){
  display: none!important;
}

.margin-nav{
  margin-top: 44px;
}

.text-alignc{
  text-align: center;
}


.yy {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 10px;
}

.content-user {
  font-size: 16px;
  font-weight: 500;
  color: rgb(50, 50, 50);
}

.fonw5{
  font-weight: 500;
}

.fonw6{
  font-weight: 600;
}

.link-button{
  background-color: #0071ef;
  color: #fff;
  font-size: 15px;
  padding: 5px 15px;
  border-radius: 100px;
  height: 30px;
  margin-top: -4px;
  cursor: pointer;
  transition: background-color .5s cubic-bezier(0.66,0,0.2,1);
}

.link-button:hover{
  background-color: #2380eb;
}

.search-nav{
  background-image: url(/css/link-icon/search.svg);
  height: 16px;
  width: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.logoyyy{
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.nav-button{

  padding: 5px 10px;
  background-color: #bbb;
  color: #ffffff;
  border-radius: 50px;
  overflow: hidden;
  animation: figh .5s cubic-bezier(0.66,0,0.2,1) forwards;
  cursor: pointer;
  transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

.nav .logoyyy .nav-button:nth-child(3){
  background-image: linear-gradient(to right, #bbb, #f3f3f3);
}

.nav .logoyyy .nav-button:nth-child(3):hover{
  background-image: linear-gradient(to right, #000000, #f3f3f3);
}

.nav-button:hover{
  background-color: #000000;
}

.nav-button:active{
  background-color: #0071ef;
}

.nav.yoyo .logoyyy .nav-button,
.nav.yoyo .link-selection{
  opacity: 0;
  pointer-events: none;
}

.nav.yoyo{
  height: 242px;
  border: 1px solid #d2d2d7;
}

.nav.yoyo .nav-content{
  height: 169px;
}

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

.nav-button a{
  color: #f3f3f3;
}



.nav.logo.change-logo-to-png{
  background-image: url(/image/changed-logo.png);
}

.telling{
  position: fixed;
  margin-top: 49px;
  left: 5px;
  height: 40px;
  width: 220px;
  background-color: rgb(66, 66, 66);
  z-index: 1001;
  border-radius: 10px;
  
  color: #fff;
  font-weight: 700!important;
  text-align: center;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  gap: 20px;
  transform: translatex(0);
  transition: transform .5s cubic-bezier(0.66,0,0.2,1);
}

.telling.loaded{
  transform: translatex(-105%);
}

.telling .loooo{
  height: 20px;
  width: 20px;
  border-radius: 50px;
  border: 2px solid #fff;
  border-top: 2px solid rgb(66, 66, 66);
  animation: spin .5s linear infinite;
}

.sten{
  background-image: url(/image/first-page-background-s10.png);
  height: 736px;
  width: 100%;
  max-width: 2560px;
  
}

.sten-book-content h1{
  font-size: 24px;
  color: #DB4712;
  font-weight: 900;
}

.sten-book-content p{
  color: #1E8A1D;
}

.sten-container{
  max-width: 700px;
  margin: auto;
  display: flex;
  margin-top: 89.732px!important;
  justify-content: space-between;
}

.sten-container .imgrry{
  height: 424.54px;
  width: 300px;
 
}

@media (max-width: 813px){
  .sten-container{
    display: block;
    /* margin-top: 89.732px!important; */
    margin: auto;
  }

  .sten-book-content{
    max-width: 306px;
    margin: auto;
    margin-top: 30px;
  }

  .sten{
    height: 789px;
  }

  .sten button{
  }

  .sten .imgrry{
    margin: auto!important;
  }
}
.sten p .aa{
  display: none;
}
@media (max-width: 452px){
  .sten .imgrry{
    height: 300px;
    width: 212.15px;
  }

  .sten-book-content {
    max-width: 212.15px;
    margin: auto;
    margin-top: 30px;
}

.sten h1{
  font-family: 22px;
}

.sten p .ll{
  display: none;
}

.sten p .aa{
  display: block;
}

.sten p{
  font-size: 15px;
}

}

.normal-btn.dark{
  padding: 6px 12px;
  color: #0071ef;
  font-size: 18px;
  border-radius: 980px;
  border: 1px solid #0071ef;
  background-color: #00000000;
  margin-top: 1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(0.66,0,0.2,1);
}

.normal-btn.fill{
  padding: 6px 12px;
  color: #ffffff;
  font-size: 18px;
  border-radius: 980px;
  border: 1px solid #0071ef;
  background-color: #0071ef;
  margin-top: 1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(0.66,0,0.2,1);
}

.normal-btn.dark:hover{
  background-color: #0070ef2a;
}

.hover-dark:hover{
  background-color: #2781e9;
}

.stenbtn-container{
  display: flex;
  justify-content: space-between;
  max-width: 228px;
}

@media(max-width: 773px){
  .sten{
    background-image: url(/image/first-page-background-s10-2.png);
  }
}

.center{
  display: block;
    margin: auto;
}


.width-control{
  max-width: 1000px;
  min-width: 320px;
  width: 100%;
}

.width-control-9{
  max-width: 900px;
  min-width: 320px;
  width: 100%;
}

.width-control-8{
  max-width: 800px;
  min-width: 320px;
  width: 100%;
}

.width-control-7{
  max-width: 700px;
  min-width: 320px;
  width: 100%;
}

.width-control-6{
  max-width: 600px;
  min-width: 320px;
  width: 100%;
}

.jc{
  display: flex;
  justify-content: center;
}

.jcspace{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.listsnone{
  list-style: none;
}

@media (max-width: 492px){
  .swhior{
    font-size: 70px!important;
  }
}

.selev,
.twel{
  background-image: url(/image/s11-background.jpg);
  height: 736px;
    width: 100%;
    max-width: 2560px;
}

.selev .ebook-fi,
.twel .ebook-fi{
  background-image: url(/image/s11-fi-shadow.png);
  height: calc(297px * 1.2);
  width: calc(210px * 1.2);
  transform: translateY(120px);
}

.selev h1,
.twel h1{
  font-size: 50px;
  color: #fff;
  text-align: center;
}

.selev .space{
  width: 100%;
  height: 154px;
}

.selev p,
.twel p{
  font-size: 20px;
  text-align: center;
  color: #ddd;
}

.normal-btn.hover-fill:hover{
  background-color: #0071ef;
  color: #fff;
}

@media (max-width: 626px){
  .selev{
    background-image: url(/image/s11-background-2.jpg);
  }
}

.max-none{
  /* min-width: 70px; */
}

.navdesktop.max-none .link-selection,
.navmobile.max-none .aldis .tools-bar{
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;

}

.navmobile.max-none .aldis .logoyyy{
  pointer-events: none;
}

.navdesktop .link-selection{
  transition-delay: 1s;
}

.nav.ebook-width{
  min-width: 70px;
  width: 70px;
  transition-delay: 0s;
}

.openmode{
  top: auto!important;
}



:root{
  /* --background-layer: #10a957; */
  --background-bar: #c2bdf5;
  --btncolor-1: #10A957;
  --btncolor-1-b: #0a6937;
  --btncolor-2: #FFC700;
  --btncolor-2-b: #bd9400;
  --btncolor-3: #C6B9FF;
  --btncolor-3-b: #a794fd;
  --btncolor-4: #F54C21;
  --btncolor-4-b: #c23b19;
  --btncolor-1-l: linear-gradient(90deg, var(--btncolor-1) 0%, var(--btncolor-1) 50%, var(--btncolor-3) 50%, var(--btncolor-3) 100%);;
  --btncolor-2-l: linear-gradient(90deg, var(--btncolor-2) 0%, var(--btncolor-2) 50%, var(--btncolor-4) 50%, var(--btncolor-4) 100%);
  --btncolor-3-l: linear-gradient(90deg, var(--btncolor-3) 0%, var(--btncolor-3) 50%, var(--btncolor-2) 50%, var(--btncolor-2) 100%);
  --btncolor-4-l: linear-gradient(90deg, var(--btncolor-4) 0%, var(--btncolor-4) 50%, var(--btncolor-3) 50%, var(--btncolor-3) 100%);
}

.gift-card-first-page.sl1{
  background-color: #10A957;
}

.gift-card-first-page.sl1 .gift-card-image{
  transform: translateX(0%) translateY(-736px);
}

.gift-card-first-page.sl2 .gift-card-image{
  transform: translateX(-25%) translateY(-736px);
}

.gift-card-first-page.sl3 .gift-card-image{
  transform: translateX(-50%) translateY(-736px);
}

.gift-card-first-page.sl4 .gift-card-image{
  transform: translateX(-75%) translateY(-736px);
}

.gift-card-first-page.sl1 .layer-1 .bar-1,
.gift-card-first-page.sl1 .layer-2 .bar-1,
.gift-card-first-page.sl1 .layer-3 .bar-1,
.gift-card-first-page.sl1 .layer-1 .bar-2,
.gift-card-first-page.sl1 .layer-2 .bar-2,
.gift-card-first-page.sl1 .layer-3 .bar-2{
  background-color: #C6B9FF;
}

.gift-card-first-page.sl2{
  background-color: #F54C21;
}

.gift-card-first-page.sl2 .layer-1 .bar-1,
.gift-card-first-page.sl2 .layer-2 .bar-1,
.gift-card-first-page.sl2 .layer-3 .bar-1,
.gift-card-first-page.sl2 .layer-1 .bar-2,
.gift-card-first-page.sl2 .layer-2 .bar-2,
.gift-card-first-page.sl2 .layer-3 .bar-2{
  background-color: #FFC700;
}

.gift-card-first-page.sl3{
  background-color: #ffc700;
}

.gift-card-first-page.sl3 .layer-1 .bar-1,
.gift-card-first-page.sl3 .layer-2 .bar-1,
.gift-card-first-page.sl3 .layer-3 .bar-1,
.gift-card-first-page.sl3 .layer-1 .bar-2,
.gift-card-first-page.sl3 .layer-2 .bar-2,
.gift-card-first-page.sl3 .layer-3 .bar-2{
  background-color: #C6B9FF;
}

.gift-card-first-page.sl4{
  background-color: #C6B9FF;
}

.gift-card-first-page.sl4 .layer-1 .bar-1,
.gift-card-first-page.sl4 .layer-2 .bar-1,
.gift-card-first-page.sl4 .layer-3 .bar-1,
.gift-card-first-page.sl4 .layer-1 .bar-2,
.gift-card-first-page.sl4 .layer-2 .bar-2,
.gift-card-first-page.sl4 .layer-3 .bar-2{
  background-color: #F54C21;
}

.gift-card-first-page{
  height: 736px;
  width: 100%;
  max-width: 2560px;
  overflow: hidden;
  background-color: #10A957;
  transition: all .5s cubic-bezier(0.66,0,0.2,1);
}

.gift-card-first-page .layer-1,
.gift-card-first-page .layer-2,
.gift-card-first-page .layer-3{
  height: 245.3333px;
  display: flex;
  justify-content: space-between;
}

.gift-card-first-page .layer-1 .bar-1,
.gift-card-first-page .layer-2 .bar-1,
.gift-card-first-page .layer-3 .bar-1,
.gift-card-first-page .layer-1 .bar-2,
.gift-card-first-page .layer-2 .bar-2,
.gift-card-first-page .layer-3 .bar-2{
  background-color: #C6B9FF;
  height: 245.3333px;
  width: 100%;
  border-radius: 500px;
  transition: all .5s cubic-bezier(0.66,0,0.2,1);
}


.gift-card-first-page .layer-1 .bar-1{
  animation: l11 20s linear infinite;
}

@keyframes l11{
  0%{
    width: 100%;
  }
  20%{
    width: 50%;
  }
  40%{
    width: 15%;
  }
  60%{
    width: 70%;
  }
  80%{
    width: 30%;
  }
  100%{
    width: 100%;
  }
}

.gift-card-first-page .layer-1 .bar-1{
  animation: l11 25s cubic-bezier(0.66,0,0.2,1) infinite;
}

@keyframes l11{
  0%{
    width: 50%;
  }
  20%{
    width: 100%;
  }
  40%{
    width: 30%;
  }
  60%{
    width: 70%;
  }
  80%{
    width: 30%;
  }
  100%{
    width: 50%;
  }
}

.gift-card-first-page .layer-2 .bar-1{
  animation: l11 20s linear infinite;
}

.gift-card-first-page .layer-2{
  transform: scaleX(-1);
}

.gift-card-first-page .layer-3{
  margin-top: -1px;
  height: 246.3333px;
}

  @keyframes l22{
    0%{
      width: 30%;
    }
    20%{
      width: 50%;
    }
    40%{
      width: 100%;
    }
    60%{
      width: 70%;
    }
    80%{
      width: 40%;
    }
    100%{
      width: 30%;
    }
}

.gift-card-first-page .layer-2 .bar-2{
  animation: l12 25s cubic-bezier(0.66,0,0.2,1) infinite;
}

@keyframes l21{
  0%{
    width: 100%;
  }
  20%{
    width: 50%;
  }
  40%{
    width: 100%;
  }
  60%{
    width: 100%;
  }
  80%{
    width: 100%;
  }
  100%{
    width: 100%;
  }
}


.gift-card-first-page .layer-3 .bar-1{
  animation: l12 20s linear infinite;
}


  @keyframes l31{
    0%{
      width: 30%;
    }
    20%{
      width: 50%;
    }
    40%{
      width: 100%;
    }
    60%{
      width: 70%;
    }
    80%{
      width: 40%;
    }
    100%{
      width: 30%;
    }
}

.gift-card-first-page .layer-3 .bar-2{
  animation: l11 25s cubic-bezier(0.66,0,0.2,1) infinite;
}

@keyframes l32{
  0%{
    width: 100%;
  }
  20%{
    width: 50%;
  }
  40%{
    width: 100%;
  }
  60%{
    width: 100%;
  }
  80%{
    width: 100%;
  }
  100%{
    width: 100%;
  }
}

.gift-card-first-page .gift-card-image{
  display: flex;
  width: 400%;
  height: 736px;
  justify-content: space-between;
  transform: translateY(-736px);
  transition: all .5s cubic-bezier(0.66, 0, 0.04, 1.45);
}

.gift-card-first-page .gift-card-image .slide-1,
.gift-card-first-page .gift-card-image .slide-2,
.gift-card-first-page .gift-card-image .slide-3,
.gift-card-first-page .gift-card-image .slide-4{
  width: 100%;
  height: 736px;
}

.gift-card-first-page .gift-card-image .slide-1 .img,
.gift-card-first-page .gift-card-image .slide-2 .img,
.gift-card-first-page .gift-card-image .slide-3 .img,
.gift-card-first-page .gift-card-image .slide-4 .img{
  height: 224px;
  width: 384.42px;
  box-shadow: 0px 15.45px 38.63px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  display: block;
  margin: auto;
  margin-top: calc(368px - 184.42px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gift-card-first-page .gift-card-image .slide-1 .img{
  background-image: url(/image/gift-card-5.png);
}


.gift-card-first-page .gift-card-image .slide-2 .img{
  background-image: url(/image/gift-card-10.png);
}

.gift-card-first-page .gift-card-image .slide-3 .img{
  background-image: url(/image/gift-card-20-2.png);
}

.gift-card-first-page .gift-card-image .slide-4 .img{
  background-image: url(/image/gift-card-20-1.png);
}

.control-bar-gift-card{
  position: sticky;
  height: 200px;
  width: 60px;
  background-color: #ffffff;
  border: 1px solid #d2d2d7;
  border-radius: 20px;
  justify-content: space-between;
  top: calc(50vh - 100px);
  left: 10px;
  padding: 12px;
  z-index: 2;
}

.up-gifir{
  transform: translateY(-200px);
}

.mbtnpf{
  margin-top: 12px;
}

.control-bar-gift-card .color-button{
  height: 35px;
  width: 35px;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
  transition: all .5s cubic-bezier(0.66, 0, 0.04, 1.45);
}



.coverimg{
  height: 736px;
  width: 100%;
  transform: translateY(-200%);
  opacity: 0;
  background-color: #000;
  pointer-events: none;
}

.control-bar-gift-card .color-1{
  background-color: var(--btncolor-1);
  background-image: none;
  border: 2px solid var(--btncolor-1-b);
}

.control-bar-gift-card .color-2{
  background-color: var(--btncolor-2);
  background-image: none;
  border: 2px solid var(--btncolor-2-b);
}

.control-bar-gift-card .color-3{
  background-color: var(--btncolor-3);
  background-image: none;
  border: 2px solid var(--btncolor-3-b);
}

.control-bar-gift-card .color-4{
  background-color: var(--btncolor-4);
  background-image: none;
  border: 2px solid var(--btncolor-4-b);
}

.control-bar-gift-card .color-1:hover{
  background-image: var(--btncolor-1-l);
  border: 2px solid var(--btncolor-1);
  transform: rotate(135deg) scale(1.1);
}

.control-bar-gift-card .color-2:hover{
  background-image: var(--btncolor-2-l);
  border: 2px solid var(--btncolor-2);
  transform: rotate(135deg) scale(1.1);
}

.control-bar-gift-card .color-3:hover{
  background-image: var(--btncolor-3-l);
  border: 2px solid var(--btncolor-3);
  transform: rotate(135deg) scale(1.1);
}

.control-bar-gift-card .color-4:hover{
  background-image: var(--btncolor-4-l);
  border: 2px solid var(--btncolor-4);
  transform: rotate(135deg) scale(1.1);
}

.gift-card-image h1{
  margin: auto;
  white-space: nowrap;
  max-width: 320px;
  margin-top: 50px;
}

.gift-card-image p{
  max-width: 320px;
  margin: auto;
}

.gift-card-first-page .stenbtn-container button:hover{
  background-color: #0071ef!important;
  color: #fff!important;
  border: 1px solid #0071ef!important;
}

@media (max-width: 735px){
  .gift-card-first-page .gift-card-image .slide-1 .img{
      width: 300px;
      height: 182.19px;
   }
  
  
  .gift-card-first-page .gift-card-image .slide-2 .img{
      width: 300px;
      height: 182.19px;
  }
  
  .gift-card-first-page .gift-card-image .slide-3 .img{
        width: 300px;
        height: 182.19px;
  }
  
  .gift-card-first-page .gift-card-image .slide-4 .img{
        width: 300px;
        height: 182.19px;
  }

  .gift-card-image p{
    max-width: 300px;
    font-size: 15px;
  }
  .gift-card-image h1{
    max-width: 300px;
  }

  .control-bar-gift-card{
    transform: scale(0.8);
  }
  .gift-card-first-page .stenbtn-container{
    max-width: 300px!important;
  }
}

@media (max-width: 472px){
  .gift-card-first-page .gift-card-image .slide-1 .img{
      width: 270px;
      height: 163.98px;
      border-radius: 10px;
   }
  
   .gift-card-first-page .gift-card-image{
    height: 629px;
    transform: translateY(-629px);
   }

   .coverimg{
    height: 629px;
   }
  
  .gift-card-first-page .gift-card-image .slide-2 .img{
      width: 270px;
      height: 163.98px;
      border-radius: 10px;
  }
  
  .gift-card-first-page .gift-card-image .slide-3 .img{
        width: 270px;
        height: 163.98px;
        border-radius: 10px;
  }
  
  .gift-card-first-page .gift-card-image .slide-4 .img{
        width: 270px;
        height: 163.98px;
        border-radius: 10px;
  }

  .gift-card-first-page.sl1 .gift-card-image{
    transform: translateX(0%) translateY(-629px);
  }
  
  .gift-card-first-page.sl2 .gift-card-image{
    transform: translateX(-25%) translateY(-629px);
  }
  
  .gift-card-first-page.sl3 .gift-card-image{
    transform: translateX(-50%) translateY(-629px);
  }
  
  .gift-card-first-page.sl4 .gift-card-image{
    transform: translateX(-75%) translateY(-629px);
  }

  .gift-card-image p{
    max-width: 270px;
    font-size: 15px;
 }
  .gift-card-image h1{
    max-width: 270px;
  }

.control-bar-gift-card{
  top: 85px;
  left: calc(50% - 100px);
  display: flex;
  width: 200px;
  height: 60px;
  }

  .up-gifir{
    transform: translateY(-60px);
  }

  .gift-card-first-page .layer-1, .gift-card-first-page .layer-2, .gift-card-first-page .layer-3,.gift-card-first-page .layer-1 .bar-1, .gift-card-first-page .layer-2 .bar-1, .gift-card-first-page .layer-3 .bar-1, .gift-card-first-page .layer-1 .bar-2, .gift-card-first-page .layer-2 .bar-2, .gift-card-first-page .layer-3 .bar-2 {
    height: 209.66667px;
  }

  .gift-card-first-page{
    height: 629px;
  }

  .mbtnpf{
    margin-top: 0;
  }

  .gift-card-first-page .stenbtn-container{
    max-width: 270px!important;
  }
}

.scroll.kkk{
  width: 100%;
  height: 45px;
  overflow-y: hidden;
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: #dfdfdf;
  
}
  .link-select.kkk{
    height: 45px;
    width: 640px;
    overflow-y: hidden;
    overflow-x: auto;scroll-snap-type: x mandatory;
  }

  .link-select.kkk .link-button{
    width: 136px;
    text-align: center;
  }

.link-select.kkk li{
  scroll-snap-align: center;
}

.list li:nth-child(7){
  height: 100px;
}

  .scroll.kkk::-webkit-scrollbar {
    height: 0.3rem;
    margin-right: 20px;
    /* display: none; */
  }
  
  .scroll.kkk::-webkit-scrollbar-track {
    background: rgb(223, 223, 223);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    /* display: none; */
  
  }
  
  .scroll.kkk::-webkit-scrollbar-thumb {
    background: #a4a4a439;
    border-radius: 20px;
    /* display: none; */
  
  }

  .scroll.kkk:hover::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 20px;
    /* display: none; */
  
  }

.s-16{
  height: 100vh;
  padding-top: 60px;
  background-color: #F0F0F0;
}

.s-16 .headline img{
  display: block;
  margin: auto;
  height: 283.61px;
  width: 600px;
}

.s-16 .headline{
  position: relative;
  z-index: 2;
  animation: in 2s cubic-bezier(0.66,0,0.2,1) forwards;
}

@keyframes in{
  0%{
    opacity: 0;
    transform: translatey(20px) scale(.8);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.s-16 .p-img img{
  display: block;
  margin: auto;
  transform: translateY(-50px) scale(3);
  animation: in-p 1.5s cubic-bezier(0.66,0,.2,1) forwards;
  animation-delay: 0.2s;
  opacity: 0;
  position: relative;
  z-index: 1;
}

@keyframes in-p{
  0%{
    opacity: 0;
    transform: translateY(-50px) scale(3);
  }
  100%{
    opacity: 1;
    transform: translateY(-16vh) scale(1);
  }
}