@charset "UTF-8";

:root {
  --head-animal: all 0.2s;
  --max-height: calc(100vh - 72px);
  --theme-color: #747374;
  --font-weight: 500;
  --page-padding: 2.083vw;
}

ul {
  list-style-type: none;
}

body {
  background: #000;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 2.604vw;
  padding: 2.604vw 2.813vw;
  box-sizing: border-box;
}

.head-item {
  width: 50%;
  color: #fff;
  position: relative;
  cursor: pointer;
}

.head-left {
  width: 50%;
  height: auto;
}

.head-left-title {
  position: relative;
}

.head-left-con {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 13.625vw;
  height: 2.604vw;
  height: 100%;
  cursor: pointer;
}

.head-bottom-line {
  bottom: -0.26vw;
  width: 0;
  height: 1px;
  transition: var(--head-animal);
  background-color: #fff;
  margin-top: 0.26vw;
}

.head-right-bottom {
  width: 0;
  position: absolute;
  right: 0;
}

.head-left-bottom {
  position: absolute;
  left: 0;
}

.head-right-bottom {
  right: 0;
}

.head-left-con:hover .head-left-menu {
  width: 0;
}

.head-left-con:hover .head-left-bottom {
  width: 300%;
}

.head-left-con:hover .head-title-hover {
  height: 6.604vw;
}

.head-left-con img {
  width: 6.25vw;
  height: 2.604vw;
  object-fit: cover;
}

.head-title {
  color: #fff;
  margin-left: 0.521vw;
  font-size: 0.938vw;
  font-weight: var(--font-weight);
}

.head-left-menu {
  transition: all 0.4s;
  width: 2.292vw;
  height: auto;
}

.head-left-menu li {
  width: 100%;
  height: 1px;
  background-color: #fff;
  margin-bottom: 0.26vw;
}

.head-left-menu li:last-of-type {
  margin-bottom: 0;
}

.head-title-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
  height: 0;
  padding-top: 3.125vw;
  z-index: 2;
  height: 0;
  transition: var(--head-animal);
  overflow: hidden;
}


.head-title-hover a{
  color: #fff;
  display: block;
  height: 0.938vw;
  margin-bottom: 1.25vw;
  border-left: 2px solid rgba(255,255,255, 0);
  transition: var(--head-animal);
}
.head-title-hover a:hover{
  padding-left: 0.521vw;
  border-left: 2px solid rgba(255,255,255, 1);
}

.head-right {
  width: fit-content;
}

.head-right .head-title {
  text-align: right;
}

.head-right-media {
  position: absolute;
  right: 0;
  width: 0;
  padding-top: 3vw;
  height: 0;
  overflow: hidden;
  top: 0;
  z-index: 2;
  text-align: center;
  cursor: pointer;
  transition: height 0.2s;
}

.head-right-media li {
  width: 90%;
  margin: 0 auto;
  height: auto;
  margin-bottom: 2vw;
  font-size: 1.927vw;
  transform: var(--head-animal);
}
.head-right-media li a{
  color: #fff;
  height: 1.302vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.head-right-media li a:hover {
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
}

.head-right:hover .head-right-bottom {
  width: 100%;
}

.head-right:hover .head-right-media {
  height: 12.8vw;
  width: 100%;
}

.head-log {
  position: fixed;
  left: 0;
  right: 0;
  top: 2.604vw;
  margin: auto;
  width: 2.08vw;
  height: auto;
  z-index: 10;
}

.head-log img {
  width: 100%;
  height: auto;
}


.main-bg{
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
}
.main-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-con {
  position: relative;
  z-index: 3;
  padding-top: 10.313vw;
}
.article-con .textbox .inner-title{
  text-align: center;
  font-size: 3.906vw;
  line-height: 0.8;
  margin-bottom: 1.406vw;
}
.article-con .date{
  text-align: center;
  font-weight: 600;
  font-size: 0.938vw;
}
/* cookie */
.agelimit-bottom {
  position: fixed;
  bottom: -200px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  height: 80px;
  z-index: 99999;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.agelimit-bottom.add {
  bottom: 0;
}

.agelimit-bottom p {
  color: #fff;
  font-size: 0.938vw;
  font-weight: 300;
}

.agelimit-bottom p a {
  text-decoration: underline;
  color: #fff;
}

.agelimit-bottom .center {
  width: 100%;
  padding: 1.25vw 23vw;
  position: relative;
  box-sizing: border-box;
}

.agelimit-bottom .btn-border {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--page-padding);
  margin: auto;
  width: 8.4vw;
  height: 2.4vw;
  background-color: rgba(255,255,255, 0.15);
  border: 1px solid #fff;
  font-size: 0.938vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 0.4vw;
}

/* toast 部分  mask 部分*/
/*  */
.eb-mask {
  --mask-theme-color: #fff;
  position: fixed;
  width: 100vw;
  height: calc(100vh + 2px);
  max-height: 101vh;
  min-height: 95vh;
  background-color: #000;
  transform:translate3d(0,-1px,0);
  -webkit-transform:translate3d(0,-1px,0);
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: none;
}

.eb-mask-content {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}

.eb-mask-close {
  position: fixed;
  left: 1.563vw;
  top: 1.563vw;
  width: 3.125vw;
  height: 3.125vw;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 2.344vw;
  color: var(--mask-theme-color);
  z-index: 10;
  cursor: pointer;
}
.floor-mask {
  width: 100%;
  height: auto;
  position: relative;
  display: none;
  color: var(--mask-theme-color);
  text-align: center;
}

.floor-mask-content {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.floor1-mask .floor-mask-content::after{
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   z-index: 1;
   background-color: rgb(77 141 22 / 40%);
}
.floor-eb-media{
  position: absolute;
  z-index: 1;
  top: 2.5vw;
  right: 2.5vw;
  display: none;
}
.floor-media-con{
  width: auto;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.floor-eb-media li{
  color: var(--mask-theme-color);
  width: 2.604vw;
  height: 2.344vw;
  margin-left: 1.458vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  font-size: 0.938vw;
}
.floor-eb-media li i{
  color: var(--mask-theme-color);
  font-size: 2.344vw;
}
.floor-eb-media li .icon-tiktok{
  font-size: 1.979vw;
}

.floor1-mask img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.floor1-mask .eb-media-icons{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.floor1-mask .eb-media-icons a:last-of-type{
  margin-left: 3.125vw;
}
.floor1-mask a{
  display: block;
  font-size: 1.979vw;
  color: var(--mask-theme-color);
}


.mask-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
.mask-label{
  position: absolute;
  top: 1.979vw;
  right: 2.813vw;
  width: 3.854vw;
  height: auto;
  z-index: 2;
}
.mask-label img{
  width: 100%;
  height: auto;
}
.floor1-mask .mask-text{
  z-index: 3;
}

.eb-title {
  font-size: 7.813vw;
  font-weight: var(--font-weight);
}

.eb-small-title {
  font-size: 1.875vw;
  line-height: 1.2;
  font-weight: 600;
  margin-top: 1.406vw;
  margin-bottom: 1.042vw;
}

.eb-desc {
  font-size: 0.938vw;
  line-height: 1.2;
  margin-bottom: 4vh;
}

.mask-text .eb-media {
  width: 33vw;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--mask-theme-color);
  text-align: center;
}

.eb-media-title {
  font-size: 0.938vw;
  font-weight: 600;
  margin-bottom: 1.563vw;
  width: 100%;
}
.floor-mask .eb-title {
  line-height: 0.8;
}
.floor-mask .eb-desc {
  margin-top: 2.188vw;
  line-height: 1.2;
}
.floor1-mask .eb-desc {
  margin-top: 0;
}

.eb-emjo {
  font-size: 3vw;
  font-weight: 600;
  transform: translateX(-2vw);
}

.eb-desc-tip {
  font-size: 0.938vw;
  margin-bottom: 2.042vw;
  font-weight: 600;
}

.eb-marquee {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 35vh;
  width: 100%;
  overflow: hidden;
  will-change: auto;
}

.eb-marquee li {
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  display: flex;
  padding-left: 2.083vw;
  flex-shrink: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.eb-marquee li picture{
  height: 100%;
  width: 100%;
}

.eb-marquee img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

.eb-marquee li:nth-child(odd) {
  aspect-ratio: 0.8;
}

.eb-marquee li:nth-child(even) {
  aspect-ratio: 1.56;
}
@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

@keyframes circle-out-center {
  from {
    clip-path: circle(125%);
  }
  to {
    clip-path: circle(0%);
  }
}

.eb-mask-show-close {
  animation: 0.5s cubic-bezier(.25, 1, .30, 1) circle-out-center both;
}
.eb-mask-show {
  animation: 1.2s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
}


@media (max-width: 828px),
(orientation: portrait){
  :root {
    --page-padding: 4.6vw;
  }
  .head{
    padding: 9.16vw 8vw;
  }
  .head-title-hover a{
    height: 4.2vw;
    margin-bottom: 4.6vw;
  }
  .head-bottom-line{
    bottom: -1vw;
  }
  .head-title{
    font-size: 4.2vw;
  }
  .head-log{
     width: 7.12vw;
     top: 6.87vw !important;
  }
  .head-left-con:hover .head-title-hover{
    height: 26vw;
  }
  .head-left-con:hover .head-left-bottom{
    width: 16.56vw;
  }
  .head-right:hover .head-right-media{
    height: 50.8vw;
  }
  .head-right-media li{
    font-size: 7.88vw;
    margin-bottom: 6.87vw;
  }
  .head-right-media{
    padding-top: 10vw;
  }
  .head-title-hover{
    padding-top: 11vw;
  }
  .head-right-media li a{
    height: 6.41vw;
  }
  .agelimit-bottom{
    height: 52vw;
    bottom: -70vw;
  }
  .agelimit-bottom .center{
    padding: var(--page-padding);
  }
  .agelimit-bottom p{
     font-size: 4.615vw;
     padding-bottom: 20vw;
  }
  .agelimit-bottom .btn-border{
     width: 36vw;
     height: 10vw;
     bottom: 9.23vw;
     top: unset;
     left: 0;
     right: 0;
     font-size: 3.8vw;
     border-radius: 2vw;
  }
  .eb-title{
     font-size: 15.38vw;
  }
  .eb-emjo{
    font-size: 15.38vw;
    line-height: 0.75;
    margin-top: -3vw;
  }
  .floor-mask .eb-desc {
    margin-top: 2.87vw;
    margin-bottom: 2.87vw;
  }

  .eb-desc{
     font-size: 3vw;
     padding: 0 var(--page-padding);
     box-sizing: border-box;
  }
  .eb-desc br{
    display: none;
  }
  .eb-mask-close{
    position: absolute;
    width: 7.69vw;
    height: 7.69vw;
    top: 5vh;
    left: 5.69vw;
    font-size: 7.69vw;
  }
  .eb-desc-tip{
    font-size: 4.1vw;
    margin-bottom: 3vh;
  }
  .eb-small-title{
    font-size: 6.4vw;
    line-height: 1;
    margin-bottom: 0;
  }
  .floor1-mask .eb-title{
    margin-bottom: 4.35vw;
  }
  .mask-text .eb-media{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3vh;
  }
  .eb-media-title{
    font-size: 3.07vw;
    margin-bottom: 2.82vw;
  }
  .floor1-mask .icon-discord{
    font-size: 11.79vw;
  }
  .eb-media-right{
    margin-top: 3.43vw;
  }
  .floor1-mask .eb-media-icons a:last-of-type{
    margin-left: 10.76vw;
  }
  .floor1-mask .eb-media-icons .icon-instagram{
     font-size: 10.25vw;
  }
  .floor1-mask .eb-media-icons .icon-tiktok{
    font-size: 9.74vw;
 }
  .mobile .floor-media-con{
    align-items: center;
    margin-bottom: 4vh;
  }
  .mobile .floor-media-con a {
    font-size: 8vw;
    color: var(--mask-theme-color);
  }
  .mobile .floor-media-con li:last-of-type{
    margin-left: 11vw;
  }
  .mobile .floor-media-con li:last-of-type a{
    font-size: 6.23vw;
  }
  .floor-elfamine{
     width:18.97vw;
     margin-bottom: 1vh;
  }
  .floor-elfamine img{
     width:100%;
     height: auto;
  }
  .eb-marquee {
     height: 22vh;
  }
  .head-title-hover a:hover{
    padding-left: 0;
    border-left: none;
  }
}
@media (max-width: 767px){
  .floor-elfamine{
    margin-bottom: 4.87vw;
  }
  .floor-mask .eb-desc{
    margin-top: 4.87vw;
    margin-bottom: 4.87vw;
  }
  .eb-media-right{
     margin-top: 7.43vw;
  }
  .eb-desc{
    font-size: 3.58vw;
  }
  .mask-text .eb-media{
    margin-top: 4.87vw;
  }
  .mobile .floor-media-con li .icon-tiktok{
    font-size: 9vw;
  }
  .mobile .floor-media-con li .icon-instagram{
    font-size: 9.23vw;
  }
  .eb-marquee {
    height: 25vh;
  }
  .article-con{
    padding-top: 20vh;
  }
  .article-con .textbox .inner-title{
    font-size: 15.38vw;
    margin-bottom: 6.8vh;
  }
  .article-con .date{
    font-size: 4.61vw;
  }
}




/*  */

/* 消除自动填充表单的背景色 */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

.inputgroup {
  position: relative;
}

.inputgroup:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  /* background: #fff; */
  z-index: 0;
}

.inputgroup input {
  position: relative;
  background: transparent;
  z-index: 2;
  width: 100%;
  height: 42px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.inputgroup select {
  -webkit-appearance: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
  background: transparent;
  z-index: 2;
  width: 100%;
  height: 42px;
  border-radius: 2px;
}

.inputgroup textarea {
  position: relative;
  width: 100%;
  height: 48px;
  line-height: 24px;
  z-index: 2;
  resize: vertical;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.inner-title {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 48px;
  font-weight: 600;
}

.inner-pagebox {
  color: #fff;
}

.innerresize-l .searchable-select-holder {
  border: 1px solid #e5e5e5;
  width: 100%;
  height: 48px;
  line-height: 48px;
  border-radius: 2px;
  color: #757575;
  padding: 0 0 0 16px;
  box-shadow: none;
}

.innerresize-l .searchable-select-dropdown {
  top: 47px;
  padding: 8px;
  border: 1px solid #e5e5e5;
}

.searchable-select .icon-arrow-down {
  position: absolute;
  right: 18px;
  top: 18px;
  color: #757575;
}

.innerresize-l .searchable-select-input {
  height: 36px;
  line-height: 36px;
}

.innerresize-l .searchable-select-item {
  padding: 8px;
  transition: none;
}

.inputgroup .icon-arrow-down {
  position: absolute;
  right: 12px;
  top: 16px;
  color: #333;
  z-index: 2;
}


/*---unsubscribe---*/
.unsubscribe {
  width: 680px;
  text-align: center;
  display: table;
  margin: 100px auto 200px auto;
}

.unsubscribe .title {
  font-size: 36px;
  margin-bottom: 24px;
  font-weight: bold;
  color: #000000;
}

.unsubscribe .des {
  font-size: 16px;
  margin-bottom: 40px;
}

.unsubscribe-iconbox {
  display: table;
  width: 100%;
}

.unsubscribe-iconbox li {
  display: table-cell;
  width: 33.33333%;
  text-align: center;
}

.unsubscribe-iconbox i {
  font-size: 48px;
  color: #121212;
}

.unsubscribe-iconbox p {
  margin-top: 20px;
}

.unsubscribe-select {
  font-size: 18px;
  margin-top: 48px;
}

.unsubscribe-btngroup {
  display: table;
  margin: 0 auto;
}

.unsubscribe .icon-check {
  color: #059922;
  font-size: 48px;
  margin: 32px auto;
  display: block;
}

.unsubscribe-btngroup [class^='btn'] {
  display: block;
  width: 160px;
  margin-top: 32px;
  height: 48px;
  line-height: 48px;
  float: left;
  border-radius: 2px;
  border: 0;
  background: linear-gradient(138deg, #FFB720 0%, #FF840F 100%);
}

.unsubscribe-btngroup a:first-child {
  margin-right: 20px;
  background: #000;
  color: #fff;
}

@media (max-width:820px) {
  .unsubscribe {
    margin: 80px auto 120px auto;
  }
}

@media (max-width:767px) {
  .unsubscribe {
    width: 100%;
    margin: 60px auto;
  }

  .unsubscribe .title {
    font-size: 26px;
  }

  .unsubscribe-iconbox p {
    font-size: 13px;
  }

  .unsubscribe-iconbox i {
    font-size: 36px;
  }

  .unsubscribe-btngroup {
    display: block;
  }

  .unsubscribe-btngroup [class^='btn'] {
    width: calc(50% - 10px);
    margin-top: 24px;
  }

  .unsubscribe .icon-check {
    font-size: 32px;
  }
}

/*---404page---*/
.nofind {
  display: table;
  margin: 120px auto 140px auto;
  text-align: center;
}

.nofind img {
  margin: 0 auto 40px auto;
}

.nofind p {
  margin-bottom: 16px;
}

.nofind .btn {
  width: 160px;
  margin-top: 24px;
}