body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Microsoft Yahei", simsun, "Apple SD Gothic Neo", NanumGothic, Dotum, "새굴림", sans-serif;
  font-size: 15px;
  line-height: 1.6rem;
  letter-spacing: 0.004em;
  background: #000;
  color: #958d9e;
  background: #EDEDF5;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

a {
  color: #6236FF;
  outline: 0 !important;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  outline: 0 !important;
  color: #6236FF;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 0;
}

.loading {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 250px 0;
  background: #060a1b;
  overflow: hidden;
}

.loading-text {
  bottom: -100px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: relative;
  z-index: 10;
}
.loading-text span {
  display: inline-block;
  margin: 0 5px;
  color: #FFF;
  font-family: "Montserrat";
}
.loading-text span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0s infinite linear alternate;
          animation: blur-text 1.5s 0s infinite linear alternate;
}
.loading-text span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.2s infinite linear alternate;
          animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.loading-text span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.4s infinite linear alternate;
          animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.loading-text span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.6s infinite linear alternate;
          animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.loading-text span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 0.8s infinite linear alternate;
          animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.loading-text span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1s infinite linear alternate;
          animation: blur-text 1.5s 1s infinite linear alternate;
}
.loading-text span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-text 1.5s 1.2s infinite linear alternate;
          animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@-webkit-keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

@keyframes blur-text {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

.btc_icon{
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 10;
}

.back_logo{
  position: absolute;
  animation: backlogo 1.5s infinite linear alternate;
}

@keyframes backlogo {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}

/* KEYFRAMES */

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}

@keyframes configure-clockwise {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes configure-xclockwise {
  0% {
    transform: rotate(45deg);
  }
  25% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-135deg);
  }
  75% {
    transform: rotate(-225deg);
  }
  100% {
    transform: rotate(-315deg);
  }
}

@keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .25;
    transform: scale(.75);
  }
}

/* GRID STYLING */

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background-color: #1d2630;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
}

.spinner-box {
  width: 450px;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
}

/* SPINNING CIRCLE */

.leo-border-1 {
  position: absolute;
  width: 320px;
  height: 320px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(63,249,220);
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  animation: spin3D 1.8s linear 0s infinite;
}

.leo-core-1 {
  width: 100%;
  height: 100%;
  background-color: #37474faa;
  border-radius: 50%;
}

.leo-border-2 {
  position: absolute;
  width: 150px;
  height: 150px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(251, 91, 83);
  background: linear-gradient(0deg, rgba(251, 91, 83, 0.1) 33%, rgba(251, 91, 83, 1) 100%);
  animation: spin3D 2.2s linear 0s infinite;
}

.leo-core-2 {
  width: 100%;
  height: 100%;
  background-color: #1d2630aa;
  border-radius: 50%;
}

/* ALTERNATING ORBITS */

.circle-border {
  width: 320px;
  height: 320px;
  padding: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(63,249,220);
  background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
  animation: spin 3s linear 0s infinite;
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 50%;
}

/* X-ROTATING BOXES */

.configure-border-1 {
  width: 115px;
  height: 115px;
  padding: 3px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fb5b53;
  animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}

.configure-border-2 {
  width: 115px;
  height: 115px;
  padding: 3px;
  left: -115px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63,249,220);
  transform: rotate(45deg);
  animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}

.configure-core {
  width: 100%;
  height: 100%;
  background-color: #1d2630;
}

/* PULSE BUBBLES */

.pulse-container {
  width: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pulse-bubble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #3ff9dc;
}

.pulse-bubble-1 {
    animation: pulse .4s ease 0s infinite alternate;
}
.pulse-bubble-2 {
    animation: pulse .4s ease .2s infinite alternate;
}
.pulse-bubble-3 {
    animation: pulse .4s ease .4s infinite alternate;
}

/* SOLAR SYSTEM */

.solar-system {
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.orbit {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #fafbfC;
	border-radius: 50%;
} 

.earth-orbit {
	width: 165px;
	height: 165px;
  -webkit-animation: spin 12s linear 0s infinite;
}

.venus-orbit {
	width: 120px;
	height: 120px;
  -webkit-animation: spin 7.4s linear 0s infinite;
}

.mercury-orbit {
	width: 90px;
	height: 90px;
  -webkit-animation: spin 3s linear 0s infinite;
}

.planet {
	position: absolute;
	top: -5px;
  width: 10px;
  height: 10px;
	border-radius: 50%;
  background-color: #3ff9dc;
}

.sun {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: #ffab91;
}

.leo {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.blue-orbit {
	width: 165px;
	height: 165px;
  border: 1px solid #91daffa5;
  -webkit-animation: spin3D 3s linear .2s infinite;
}

.green-orbit {
	width: 120px;
	height: 120px;
  border: 1px solid #91ffbfa5;
  -webkit-animation: spin3D 2s linear 0s infinite;
}

.red-orbit {
	width: 90px;
	height: 90px;
  border: 1px solid #ffca91a5;
  -webkit-animation: spin3D 1s linear 0s infinite;
}

.white-orbit {
	width: 60px;
	height: 60px;
  border: 2px solid #ffffff;
  -webkit-animation: spin3D 10s linear 0s infinite;
}

.w1 {
  transform: rotate3D(1, 1, 1, 90deg);
}

.w2 {
  transform: rotate3D(1, 2, .5, 90deg);
}

.w3 {
  transform: rotate3D(.5, 1, 2, 90deg);
}

.three-quarter-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #fb5b53;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin .5s linear 0s infinite;
}

.btn{
  max-width: 750px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-bottom: 200px;
}

.btn .left{
  text-align: center;
  width: 100%;
  padding: 5px;
}

.btn .left a{
  width: 100%;
  text-align: right;
  display: block;
  color: #FFF;
  font-size: 18px;
}

.btn .left a span{
  color: yellow;
  padding-left: 30px;
  font-weight: bold;
}

.btn .right{
  text-align: center;
  width: 100%;
  padding: 0 5px;
}

.btn .right a{
  width: 100%;
  display: block;
  background: #000;
  color: #FFF;
  font-size: 18px;
  padding: 20px 0;
  border-radius: 10px;
}

.btn .right a span{
  color: yellow;
  padding-left: 30px;
  font-weight: bold;
}

.btn .middle{
  text-align: center;
  width: 100%;
  padding: 0 5px;
  margin-top: 10px;
}

.btn .middle a{
  width: 100%;
  display: block;
  background: #000;
  color: #FFF;
  font-size: 18px;
  padding: 20px 0;
  border-radius: 10px;
}

.btn .middle a span{
  color: yellow;
  padding-left: 30px;
  font-weight: bold;
}

#myVideo{
  position: absolute;
    top: -130px;
    left: 0;
    width: 100%;
}

.mining_box{
  width: 100%;
  padding: 0 5px;
}

.mining_box a {
  position: relative;
  padding: 20px 0;
  color: #FFF;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  width: 100%;
  display: block;
  background: #000;
  border-radius: 5px;
  text-align: center;
}

.mining_box a span {
  position: absolute;
  display: block;
}

.mining_box a p{
  color: yellow;
  padding-left: 30px;
  font-weight: bold;
  margin: 0;
  display: inline-block;
}

.mining_box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.mining_box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.mining_box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.mining_box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

.pc{
  display: block;
}

.mo{
  display: none;
}

@media (max-width: 1580px) {
  #myVideo{
    top: -150px;
  }
}

@media (max-width: 1256px) {
  #myVideo{
    top: -100px;
  }
}

@media (max-width: 1157px) {
  #myVideo{
    top: 0px;
  }
}

@media (max-width: 989px) {
  #myVideo{
    top: 0px;
  }
  .pc{
    display: none !important;
  }
  
  .mo{
    display: block !important;
  }
}

@media (max-width: 778px) {
  #myVideo{
    top: 0px;
  }
  .pc{
    display: none !important;
  }
  
  .mo{
    display: block !important;
  }
}

@media (max-width: 624px) {
  #myVideo{
    top: 0px;
  }
  .pc{
    display: none !important;
  }
  
  .mo{
    display: block !important;
  }
}

.detail_table{
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  color: #FFF;
  text-align: center;
}

.detail_table dl{
  display: flex;
  width: 100%;
  border-bottom: 1px solid #FFF;
  padding: 30px 0;
  margin: 0;
}

.detail_table dl:nth-child(2n){
  background: rgba(0, 0, 0, 0.4);
}

.detail_table dd{
  width: 100%;
}

.detail_table dt{
  width: 100%;
}

.detail_table dd span{
  font-size: 10px;
  color: yellow;
  padding-left: 10px;
}

.detail_table dt span{
  font-size: 10px;
  color: yellow;
  padding-left: 10px;
}


.coin {
  height: 150px;
  width: 150px;
  transform-style: preserve-3d;
  transform-origin: 50%;
  cursor: grab;
}
.coin.anim {
  animation: flip 1s linear forwards;
}
.coin:before, .coin:after {
  display: grid;
  place-items: center;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: #f7941e;
  border: 12px solid #f8a037;
  box-shadow: inset 0 0 0 3px #f38809;
  font-size: 60px;
  font-family: "Raleway", sans-serif;
  color: #f38809;
  text-shadow: 1.5px 1.5px 0 #e48008, -1.5px -1.5px 0 #f8a745;
}
.coin:before {
  transform: translateZ(12.5px);
  content: "B";
}
.coin:after {
  transform: translateZ(-12.5px) rotateY(180deg) rotateZ(180deg);
  content: "B";
}
.coin .edge {
  transform: translateX(62.5px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment {
  height: 150px;
  width: 25px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.coin .edge .segment:before, .coin .edge .segment:after {
  content: "";
  display: block;
  height: 15px;
  width: 25px;
  position: absolute;
  transform: rotateX(84.375deg);
}
.coin .edge .segment:before {
  transform-origin: top center;
  background: repeating-linear-gradient(#f38809 0, #f38809 25%, #da7a08 25%, #da7a08 50%);
}
.coin .edge .segment:after {
  bottom: 0;
  transform-origin: center bottom;
  background: repeating-linear-gradient(#da7a08 0, #da7a08 25%, #f38809 25%, #f38809 50%);
}
.coin .edge .segment:nth-child(1) {
  transform: rotateY(90deg) rotateX(11.25deg);
}
.coin .edge .segment:nth-child(2) {
  transform: rotateY(90deg) rotateX(22.5deg);
}
.coin .edge .segment:nth-child(3) {
  transform: rotateY(90deg) rotateX(33.75deg);
}
.coin .edge .segment:nth-child(4) {
  transform: rotateY(90deg) rotateX(45deg);
}
.coin .edge .segment:nth-child(5) {
  transform: rotateY(90deg) rotateX(56.25deg);
}
.coin .edge .segment:nth-child(6) {
  transform: rotateY(90deg) rotateX(67.5deg);
}
.coin .edge .segment:nth-child(7) {
  transform: rotateY(90deg) rotateX(78.75deg);
}
.coin .edge .segment:nth-child(8) {
  transform: rotateY(90deg) rotateX(90deg);
}
.coin .edge .segment:nth-child(9) {
  transform: rotateY(90deg) rotateX(101.25deg);
}
.coin .edge .segment:nth-child(10) {
  transform: rotateY(90deg) rotateX(112.5deg);
}
.coin .edge .segment:nth-child(11) {
  transform: rotateY(90deg) rotateX(123.75deg);
}
.coin .edge .segment:nth-child(12) {
  transform: rotateY(90deg) rotateX(135deg);
}
.coin .edge .segment:nth-child(13) {
  transform: rotateY(90deg) rotateX(146.25deg);
}
.coin .edge .segment:nth-child(14) {
  transform: rotateY(90deg) rotateX(157.5deg);
}
.coin .edge .segment:nth-child(15) {
  transform: rotateY(90deg) rotateX(168.75deg);
}
.coin .edge .segment:nth-child(16) {
  transform: rotateY(90deg) rotateX(180deg);
}

world {
  position: absolute;
  transform: scale(0.6);
  bottom: 30px;
  z-index: 100;
}

.floor {
  position: absolute;
  width: 150px;
  height: 150px;
}
.floor .line {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3.125px;
  width: 150px;
  height: 6.25px;
  transform-origin: center left;
  border-radius: 6.25px;
  background: linear-gradient(90deg, white 20%, transparent 20%);
  background-repeat: no-repeat;
  opacity: 0;
}
.floor .line.anim {
  animation: lines 0.6s ease-out forwards;
  animation-delay: 0.65s;
}
.floor .line:nth-child(1) {
  transform: rotate(30deg) scale(1.1);
}
.floor .line:nth-child(2) {
  transform: rotate(60deg);
}
.floor .line:nth-child(3) {
  transform: rotate(90deg) scale(1.1);
}
.floor .line:nth-child(4) {
  transform: rotate(120deg);
}
.floor .line:nth-child(5) {
  transform: rotate(150deg) scale(1.1);
}
.floor .line:nth-child(6) {
  transform: rotate(180deg);
}
.floor .line:nth-child(7) {
  transform: rotate(210deg) scale(1.1);
}
.floor .line:nth-child(8) {
  transform: rotate(240deg);
}
.floor .line:nth-child(9) {
  transform: rotate(270deg) scale(1.1);
}
.floor .line:nth-child(10) {
  transform: rotate(300deg);
}
.floor .line:nth-child(11) {
  transform: rotate(330deg) scale(1.1);
}
.floor .line:nth-child(12) {
  transform: rotate(360deg);
}

@keyframes flip {
  0% {
    transform: rotateY(0) rotateX(0deg) scale(1);
  }
  10% {
    transform: rotateY(45deg) rotateX(calc(var(--flips) / 3)) scale(1.6);
  }
  60% {
    transform: rotateY(-30deg) rotateX(calc(var(--flips) / 1.5)) scale(2);
  }
  100% {
    transform: rotateY(0) rotateX(var(--flips)) scale(1);
  }
}
@keyframes lines {
  40% {
    opacity: 1;
    background-position: -120px 0;
  }
  70% {
    opacity: 1;
    background-position: 75px 0;
  }
  100% {
    opacity: 1;
    background-position: 150px 0;
  }
}