@charset "utf-8";

html {scroll-behavior: smooth;}

.opening {
  min-width: auto;
  min-height: auto;
  padding: 0;
}  
.opening footer {
  position: relative;
  min-width: 100%;
  z-index: 1;
}
.opening footer .box {min-width: auto;}  
.sect {
  position: relative;
  width: 100%;
  transition: 2s;
  overflow: hidden;
}
.sect.hidden {
  opacity: 0;
  visibility: hidden;
}
.sect01 {
  z-index: 1;
  height: 100vh;
} 
.sect02 {
  z-index: 2;
  height: 500vh;
} 
.sect03 {
  z-index: 3;
  height: auto;
  background: #FFFFFF;
} 
.sect01 > div {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100svh;
  padding: 5%;
}
.sect01 > div .philosophy {
  width: 90%;
  margin: 0 auto 5%;
  font-size: 2.8vw;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.25em;
}
.sect01 > div .philosophy span {
  display: inline-block;
  opacity: 0;
  transform: scale(1.75) translateY(0);
  transform-origin: bottom;
}
.load .sect01 > div .philosophy span {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.load .sect01 > div .philosophy span:nth-child(1) {transition: 0.5s ease-out 3s;}
.load .sect01 > div .philosophy span:nth-child(2) {transition: 0.5s ease-out 3.1s;}
.load .sect01 > div .philosophy span:nth-child(3) {transition: 0.5s ease-out 3.2s;}
.load .sect01 > div .philosophy span:nth-child(4) {transition: 0.5s ease-out 3.3s;}
.load .sect01 > div .philosophy span:nth-child(5) {transition: 0.5s ease-out 3.4s;}
.load .sect01 > div .philosophy span:nth-child(6) {transition: 0.5s ease-out 3.5s;}
.load .sect01 > div .philosophy span:nth-child(7) {transition: 0.5s ease-out 3.6s;}
.load .sect01 > div .philosophy span:nth-child(8) {transition: 0.5s ease-out 3.7s;}
.load .sect01 > div .philosophy span:nth-child(9) {transition: 0.5s ease-out 3.8s;}
.load .sect01 > div .philosophy span:nth-child(10) {transition: 0.5s ease-out 3.9s;}
.load .sect01 > div .philosophy span:nth-child(11) {transition: 0.5s ease-out 4s;}
.load .sect01 > div .philosophy span:nth-child(12) {transition: 0.5s ease-out 4.1s;}
.load .sect01 > div .philosophy span:nth-child(13) {transition: 0.5s ease-out 4.2s;}
.load .sect01 > div .philosophy span:nth-child(14) {transition: 0.5s ease-out 4.3s;}
.load .sect01 > div .philosophy span:nth-child(15) {transition: 0.5s ease-out 4.4s;}
.load .sect01 > div .philosophy span:nth-child(16) {transition: 0.5s ease-out 4.5s;}
.load .sect01 > div .philosophy span:nth-child(17) {transition: 0.5s ease-out 4.6s;}

.sect01 > div .philosophy img {width: 100%;}
.sect01 > div h1 {
  width: 24%;
  margin: 0 auto 5%;
  opacity: 0;
  transition: 2s 1s;
}
.sect01 > div h1 img {width: 100%;}
.sect01 > div h1 + p {
  width: 12%;
  opacity: 0;
  transition: 2s 3s;
}
.sect01 > div h1 + p img {width: 100%;}
.sect01 > .scroll {
  position: fixed;
  z-index: 1;
  padding: 0 0 10vh;
  text-align: center;
  inset: auto 0 0;
  margin: auto;
  font-family: var(--outfit);
  font-weight: 300;
  opacity: 0;
  transition: 2s 4s;
}
.sect01 > .scroll.show {opacity: 1;}
.sect01 > .scroll::before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 1px;
  height: 8vh;
  background: #000000;
  margin: auto;
  inset: auto 0 0;
  }
.sect01 > .scroll::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 1px;
  height: 5vh;
  background: #FFFFFF;
  margin: auto;
  inset: auto 0 0;
  animation: scrollbar 2s infinite;
}


.sect01.blur > * {filter: blur(10px);transition: 1s;}

.load .sect01 > div h1 ,
.load .sect01 > div .philosophy ,
.load .sect01 > div h1 + p ,
.load .sect01 > .scroll {opacity: 1;}




@media screen and (max-height: 1030px) {

  .sect01 > div {padding: 2%;}
  .sect01 > div .philosophy {
    width: 90%;
    margin: 0 auto 1.5%;
  }
  .sect01 > div h1 {
    width: 24%;
    margin: 0 auto 1.5%;
  }
  .sect01 > div h1 + p {width: 9%;}
  .sect01 > .scroll {padding: 0 0 8vh;}
  .sect01 > .scroll::before {height: 6vh;  }
  .sect01 > .scroll::after {height: 3vh;}

}

.sect02 > div {
  position: fixed;
  z-index: 0;
  inset: 0;
}
.sect02 > div::after {
  position: fixed;
  z-index: -1;
  display: block;
  content: "";
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg,  rgba(0,0,0,0.7) 0%,rgba(0,26,114,0.7) 20%,rgba(0,160,225,0.7) 55%,rgba(125,185,232,0.7) 100%);
  filter: brightness(1.15);
  animation: Grad 10s ease infinite;
}
.sect02 > div ul li {
  position: absolute;
  margin: auto;
  inset: 0;
  transform: scale(0);
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out ,opacity 1s;
}
.sect02 > div ul li:nth-child(1) {z-index: 7;}
.sect02 > div ul li:nth-child(2) {z-index: 6;}
.sect02 > div ul li:nth-child(3) {z-index: 5;}
.sect02 > div ul li:nth-child(4) {z-index: 4;}
.sect02 > div ul li:nth-child(5) {z-index: 3;}
.sect02 > div ul li:nth-child(6) {z-index: 2;}
.sect02 > div ul li:nth-child(7) {z-index: 1;}
.sect02 > div ul li:nth-child(8) {z-index: 0;}
.sect02 > div ul li img {width: 100%;}
.sect02 > div .v_box {
  position: absolute;
  z-index: 0;
  width: 90%;
  max-width: 1680px;
  aspect-ratio: 1680 / 854;
  inset: 0;
  margin: auto;
  transform: scale(0);
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
}

@media screen and (max-height: 800px) {

  .sect02 > div .v_box {
    width: auto;
    max-height: 80vh;
  }

}

.sect02 > div .v_box video {width: 100%;}
.sect02 > div .circle {
  position: absolute;
  z-index: 20;
  width: 100%;
  aspect-ratio: 1 / 1;
  inset: 0;
  margin: auto;
  transform: scale(0);
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
}
.sect02 > div .circle img {width: 100%;}
  
.sect03 {margin: 350vh 0 0;}
.opening .header_login {
  position: fixed;
  z-index: 3;
  inset: 0 0 auto;
}
.opening .header_login .btn_lang span {background: #FFFFFF;}
.opening .header_login .btn_login {
  position: absolute;
  z-index: 1;
  width: 260px;
  height: 60px;
  line-height: 60px;
  inset: 15px 310px 0 auto; 
}
.opening .header_login .btn_login a {
  display: block;
  height: 100%;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  background: var(--color03);
  border-radius: 4px;
  padding: 0 0 0 60px;
  text-decoration: none;
  transition: 0.5s;
}
.opening .header_login .btn_login a:hover {opacity: 0.5;}
.opening .header_login .btn_login a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 8px;
  height: 16px;
  background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 10px 0 auto;
}
.opening .header_login .btn_login a::before {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 2em;
  height: 2em;
  background: url("../img/sub/ico_login.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 auto 0 10px;
}
.view_box {
  position: fixed;
  z-index: 0;
  inset: auto 0 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.view_box::after {
  position: absolute;
  z-index: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  inset: 0;
  background: url("../img/opening/bg_view.png") no-repeat center / cover;
  opacity: 0;
  transition: 1s;
}
.view_box.bg::after {opacity: 1;}


.view_box h2 {
  position: relative;
  z-index: 4;
  width: 90%;
  opacity: 0;
  transition: 0.5s;
}
.view_box h2.show {opacity: 1;}
.view_box h2 img {width: 100%;}
.view_box h2 > span {
  position: relative;
  z-index: 0;
  display: block;
}
.view_box h2 > span:nth-of-type(1) {
  display: flex;
  overflow: hidden;
  justify-content: center;
  font-size: 8vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  font-family: var(--outfit);
  text-align: center;
  margin: 0 auto 0.3em;
}
.view_box h2 > span:nth-of-type(1) span {
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.view_box h2 > span:nth-of-type(1).show span {transform: translate(0, 0);}

.view_box h2 > span:nth-of-type(1).show span:nth-child(1) {color: #001A72;transition-delay: 0.1s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(2) {color: #004495;transition-delay: 0.2s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(3) {color: #0068B3;transition-delay: 0.3s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(4) {color: #007BC2;transition-delay: 0.4s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(5) {color: #00A0E1;transition-delay: 0.5s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(6) {color: #44B9E9;transition-delay: 0.6s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(7) {color: #6EC9ED;transition-delay: 0.7s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(8) {color: #44B9E9;transition-delay: 0.8s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(9) {color: #009CDE;transition-delay: 0.9s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(10) {color: #007BC2;transition-delay: 1s;}
.view_box h2 > span:nth-of-type(1).show span:nth-child(11) {color: #0068B3;transition-delay: 1.1s;}

.view_box h2 > span:nth-of-type(2) {
  opacity: 0;
  filter: blur(10px);
  transition: 2s linear;
}
.view_box h2 > span:nth-of-type(2).show {
  opacity: 1;
  filter: blur(0);
}
.view_box h2 > span:nth-of-type(2) {
  font-size: 52px;
  font-family: var(--outfit);
  font-weight: 300;
  text-align: center;
  margin: 0.5em auto 0;
}
.view_box figure {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: 1s;
}  
.view_box figure.show {opacity: 1;}
.view_box .ribon {
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 0;
}
.view_box .ribon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.view_box .confetti {
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 1;
}
.view_box .confetti img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.view_box .giftbox {
  width: 50%;
  max-width: 880px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  margin: auto;
  inset: 0 5% 0 auto;
  animation: giftbox 3s infinite;
}
.sect03 .box {
  position: relative;
  z-index: 0;
}
.sect03 > .box {margin: 0 auto 20vh;}
.sect03 > .box p {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 700;
  line-height: 2.85;
  margin: 0 auto 400px;
  transition: 1s;
}
.sect03 > .box .btn_gift {
  position: relative;
  width: 50%;
  max-width: 660px;
}
.sect03 > .box .btn_gift a {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.25em;
  color: #FFFFFF;
  font-size: min(3vw,34px);
  font-weight: 700;
  line-height: 1.5;
  background: var(--color01);
  border-radius: 99px;
  text-shadow: none;
  text-decoration: none;
  transition: 0.5s;
}
.sect03 > .box .btn_gift a:hover {opacity: 0.5;}
.sect03 > .box .btn_gift a span {
  font-family: var(--outfit);
  font-weight: 300;
  font-size: 0.76em;
  margin: 0 0 20px;
}
.sect03 > .box .btn_gift a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  z-index: -1;
  background: inherit;
}
.sect03 > .box .btn_gift a::after {
  position: absolute;
  z-index: 1;
  display: block;
  content: "";
  width: 0.6em;
  height: 1.2em;
  background: url("../img/common/btn_ar_w.svg") no-repeat center / contain;
  margin: auto;
  inset: 0 5% 0 auto;
}
.sect03 > .box .btn_gift:after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 99px;
  transition: opacity linear 0.4s;
  content: '';
  animation: pulseMotion 1.4s linear infinite;
}





@media screen and (max-width: 1100px) {
  
  header.header_login {
    height: 60px;
    padding: 10px 5%;
  }
  header.header_login .logo {
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }
  header.header_login .logo img {width: 70px;margin: 0 20px 0 0;}
  header.header_login .logo img:nth-of-type(2) {width: 140px;}
  header.header_login .menu {
    position: absolute;
    z-index: 1;
    display: block;
    width: 40px;
    height: 40px;
    background: #333333;
    border-radius: 4px;
    top: 10px;
    right: 5%;
    cursor: pointer;
  }
  header.header_login .menu::before,
  header.header_login .menu::after {
    position: absolute;
    display: block;
    content: "";
    width: 20px;
    height: 2px;
    background: #333333;
    border-radius: 2px;
    margin: auto;
    left: 0;
    right: 0;
    transition: 0.5s;
  }
  header.header_login .menu::before {top: 11px;background: #FFFFFF;box-shadow: 0 8px 0 0 #FFFFFF;}
  header.header_login .menu::after {bottom: 11px;background: #FFFFFF;}
  header.header_login .menu.open::before {box-shadow: none;transform: rotate(135deg);top: 19px;}
  header.header_login .menu.open::after {transform: rotate(-135deg);bottom: 19px;}
  header.header_login .menu_box {
    display: none;
    position: absolute;
    height: calc(100vh - 40px);
    height: calc(100svh - 40px);
    overflow-y: auto;
    z-index: 10;
    background: #333333;
    padding: 40px 5%;
    margin: auto;
    top: 60px;
    left: 0;
    right: 0;
  }
  header.header_login .btn_close {
    position: absolute;
    z-index: 1;
    margin: auto;
    inset: auto 0 20px;
    display: block;
    color: #FFFFFF;
    font-size: 20px;
    font-family: var(--outfit);
    text-align: center;
    padding: 0 0 40px;
    font-weight: normal;
    cursor: pointer;
  }
  header.header_login .btn_close::before ,
  header.header_login .btn_close::after {
    position: absolute;
    z-index: 0;
    display: block;
    content: "";
    width: 24px;
    height: 2px;
    background: #FFFFFF;
    margin: auto;
    inset: auto 0 30px;
    transform: rotate(45deg);
  }
  header.header_login .btn_close::after {transform: rotate(-45deg);}
  header.header_login .btn_lang {
    position: static;
    width: 100%;
    font-size: 16px;
  }
  header.header_login .btn_lang span {
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0;
    background: #FFFFFF;
  }
  header.header_login .btn_lang span::before {
    width: 30px;
    height: 30px;
    inset: 0 auto 0 10px;
  }
  header.header_login .btn_lang span::after {
    width: 16px;
    height: 8px;
    inset: 0 10px 0 auto;
  }
  .opening .header_login .btn_login {
    position: relative;
    width: 100%;
    inset: 0; 
    margin: 0 auto 5%;
  }
  .opening .header_login .btn_login a {
    text-align: center;
    padding: 0;
    transition: 0s;
  }
  .opening .header_login .btn_login a:hover {opacity: 1;}
}

@media screen and (max-width: 767px) {

  .sect01 {height: 200vh;} 
  .sect02 {height: 300vh;}
  .sect01 > div .philosophy {
    font-size: 6vw;
    width: 80%;
    margin: 0 auto 8%;
  }
  .sect01 > div h1 {
    width: 50%;
    margin: 0 auto 5%;
  }
  .sect01 > div h1 + p {
    width: 24%;
    margin: 0 auto 20%;
  }
  .sect02 > div .v_box {
    width: 80%;
    aspect-ratio: 310 / 600;
    max-height: 90svh;
  }
  .sect02 > div .v_box video {
    width: 100%;
    max-height: 100%;
  }
  .sect03 {margin: 400vh 0 0;}
  .view_box h2 {
    width: 90%;
    margin: 0 auto;
  }
  .view_box h2 > span:nth-of-type(1) {font-size: 11vw;}
  .view_box h2 > span:nth-of-type(2) {
    font-size: 6vw;
    margin: 1em auto 0;
  }
  .view_box .giftbox {
    width: 120%;
    max-width: 80%;
    inset: auto 0 8% auto;
  }
  .sect03 > .box {margin: 0 auto 20vh;}
  .sect03 > .box p {
    font-size: 20px;
    line-height: 2.3;
    margin: 0 0 30vh;
  }
  .sect03 > .box .btn_gift {
    width: 330px;
    height: 100px;
    margin: 0 auto 20svh;
  }
  .sect03 > .box .btn_gift a {
    font-size: 20px;
    transition: 1s;
  }
  .sect03 > .box .btn_gift a:hover {opacity: 1;}
  .sect03 > .box .btn_gift a span {
    font-size: 12px;
    margin: 0 0 10px;
  }
  .sect03 > .box .btn_gift a::after {inset: 0 30px 0 auto;}

}







@keyframes scrollbar {
  0% {bottom: 100%;}
  70% {bottom: -5vh;}
  100% {bottom: -5vh;}
}
@keyframes giftbox {
  0% {transform: translateY(0);}
  50% {transform: translateY(20px);}
  100% {transform: translateY(0);}
}
@keyframes pulseMotion {
  0% {
    transform: translate(-50%, -50%) scale(1, 1);
    background-color: rgba(0, 23, 114, 0.4)
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2, 1.5);
    background-color: rgba(0, 23, 114, 0)
  }
}
@keyframes Grad {
  0%{inset:auto auto 0 0;}
  50%{inset: auto auto 0 -100%;}
  100%{inset:auto auto 0 0;}
}