.scroller {
  overflow: hidden !important;
}

.lazy {
  visibility: hidden;
  opacity: 0;
}

.__fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.__fixed.obj {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.mobile .__fixed.obj {
  height: calc(var(--vh, 1vh) * 120);
}

.intro {
  height: 100vh;
  position: relative;
}
.intro [class*=__trigger] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.top_intro {
  position: fixed;
  z-index: 10;
}
.top_intro.off {
  display: none !important;
}
.top_intro .inner {
  padding: 3.3333333333% 4.1666666667% 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.top_intro .inner a {
  margin-left: auto;
  font-size: 1.25em;
  font-weight: bold;
  letter-spacing: 0;
  color: #fff;
  display: block;
  width: auto;
  border-bottom: 2px solid #fff;
}

.intro1 {
  height: 300vh;
}
.intro1 .__trigger1 {
  top: 80vh;
}
.intro1 .__trigger2 {
  top: 90vh;
}
.intro1 .__trigger3 {
  top: 110vh;
}
.intro1 .__trigger4 {
  top: 160vh;
}
.intro1_obj {
  font-size: 1rem;
  height: calc(var(--vh, 1vh) * 100);
}
.mobile .intro1_obj {
  height: calc(var(--vh, 1vh) * 120);
}

@media screen and (max-width: 800px) {
  .intro1_obj {
    font-size: 0.75rem;
  }
}
.intro1_obj [class*=intro1_bg] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  height: 100vh;
}
.intro1_obj .intro1_bg1 {
  background-color: #fff;
  z-index: 1;
}
.intro1_obj .intro1_bg2 {
  background: no-repeat top 50% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s1_bg.jpg");
}
.intro1_obj .intro1_bg3 {
  background: no-repeat top 50% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s1_bg2.png");
}
.intro1_obj [class*=cloud] {
  position: absolute;
  display: block;
}
.intro1_obj .cloud1 {
  width: 105.0625em;
  height: 62.4375em;
  left: -35%;
  top: -10%;
}
.intro1_obj .cloud2 {
  width: 89.8125em;
  height: 41em;
  left: 20%;
  top: 50%;
}
.intro1_obj .cloud3 {
  width: 118.6875em;
  height: 70.5625em;
  left: 50%;
  top: -20%;
}
.intro1_obj .cloud4 {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 269.4375em;
  height: 145.8125em;
}
.intro1_obj .cloud5 {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 269.4375em;
  height: 145.8125em;
}
.intro1_con {
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.intro1_con .inner {
  position: relative;
}
.intro1_con h1 {
  font-size: 15.625vw;
  color: #fff;
  overflow: hidden;
}
.intro1_con h1 span {
  display: block;
}
.intro1_con_img1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72.0833333333vw;
}
.intro1_con_img1 img {
  width: 100%;
}
.intro1_con_img2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 69.6354166667vw;
}
.intro1_con_img2 img {
  width: 100%;
  animation-delay: 0.15s;
}
.intro1_con_img3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 29.0625vw;
}
.intro1_con_img3 img {
  width: 100%;
}
.intro1_scroll {
  width: 9.375em;
  height: auto;
  left: 50%;
  top: auto;
  bottom: 5%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 1rem;
}
.intro1_scroll ._text {
  font-weight: 700;
  font-size: 1.125em;
  white-space: nowrap;
  margin: 0.5555555556em 0;
}
.intro1_scroll svg {
  display: block;
  margin: 0 auto;
  transform-origin: center center;
}
.intro1_scroll .svg1, .intro1_scroll .svg3 {
  width: 1.5em;
  height: 1.5em;
  margin: 1.25em auto;
}
.intro1_scroll .svg2 {
  width: 3em;
  height: 3em;
}
.intro1_scroll .svg3 {
  transform: rotate(-180deg);
}
@media screen and (max-width: 800px) {
  .intro1_scroll {
    font-size: 0.75rem;
  }
}

.intro2 {
  margin-top: 30vh;
  height: 650vh;
}
.intro2 .__trigger1 {
  top: -20vh;
}
.intro2 .__trigger2 {
  top: 200vh;
}
.intro2 .__trigger3_1 {
  top: 80vh;
}
.intro2 .__trigger3_2 {
  top: 200vh;
}
.intro2 .__trigger3_3 {
  top: 350vh;
}
.intro2 .__trigger3_4 {
  top: 600vh;
}
.intro2_obj {
  font-size: 1rem;
  height: calc(var(--vh, 1vh) * 100);
}
.mobile .intro2_obj {
  height: calc(var(--vh, 1vh) * 120);
}

@media screen and (max-width: 800px) {
  .intro2_obj {
    font-size: 0.75rem;
  }
}
.intro2_obj [class*=intro2_bg] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.intro2_obj .intro2_bg1 {
  background-color: #fff;
  z-index: 1;
}
.intro2_obj .intro2_bg2 {
  background: no-repeat top 80% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s2_bg.jpg");
}
.intro2_obj .intro2_bg3 {
  background: no-repeat top -40% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s2_bg2.png");
}
.intro2_obj .intro2_bg4 {
  height: 150% !important;
  opacity: 0.5;
  object-fit: contain;
  background-image: linear-gradient(to bottom, rgba(0, 35, 75, 0) 36%, #00234b);
}
.intro2_obj .intro2_bg5 {
  background: no-repeat top 50% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s3_bg2.png");
}
.intro2_obj .intro2_bg6 {
  background: no-repeat top 50% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s3_bg.png");
}
.intro2_obj [class*=cloud] {
  position: absolute;
  display: block;
}
.intro2_obj .cloud-4 {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 269.4375em;
  height: 145.8125em;
}
.intro2_obj .cloud-5 {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 269.4375em;
  height: 145.8125em;
}
.intro2_obj .cloud1 {
  top: -20%;
  left: -10%;
}
.intro2_obj .cloud2 {
  top: 0%;
  right: -40%;
}
.intro2_obj .cloud3 {
  top: 150%;
  left: 0;
}
.intro2_obj .cloud4 {
  top: 60%;
  left: -60%;
}
.intro2_con {
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (max-width: 800px) {
  .intro2_con {
    font-size: 0.75rem;
  }
}
.intro2_con .water_img {
  width: 11.25em;
  height: 14.375em;
  transform: translateY(-50vh) scale(0.5);
  opacity: 0;
  margin: -6em auto 0;
}
.intro2_con .water_img img {
  width: 100%;
}
.intro2_con .water_txt1, .intro2_con .water_txt2, .intro2_con .water_txt3 {
  margin: 0;
  font-size: 3em;
  height: 1.21em;
  font-weight: bold;
  line-height: 1.21;
  letter-spacing: 0.01em;
  text-align: center;
  color: #fff;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.intro2_con .water_txt1 > span, .intro2_con .water_txt2 > span, .intro2_con .water_txt3 > span {
  display: block;
  transform-origin: top left;
}
.intro2_con .water_txt2 {
  margin-top: 1.21em;
}
.intro2_scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.intro2_scroll .inner {
  width: 90%;
  padding: 0;
  position: relative;
  margin-bottom: 3%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.intro2_scroll .svg_run {
  width: 5.5625em;
  height: 4.6875em;
  margin-right: auto;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-80%, -50%);
  opacity: 0;
}
.intro2_scroll .svg_scroll_water {
  width: 3em;
  height: 4.1875em;
  margin-left: auto;
  position: relative;
}
.intro2_scroll .svg_scroll_progress {
  position: absolute;
  left: 0;
  right: 1.25em;
}
.intro2_scroll .svg_scroll_progress_bar {
  width: 100%;
  position: absolute;
  height: 0.25em;
  background-color: rgba(255, 255, 255, 0.3);
}
.intro2_scroll .svg_scroll_progress_bar::before {
  display: block;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-100%, -50%);
  width: 1em;
  height: 1em;
  border-radius: 100%;
  opacity: 0.5;
  background-color: #c20909;
}
.intro2_scroll .svg_scroll_progress_bar_fill {
  width: 0;
  height: 100%;
  opacity: 0.5;
  background-color: #c20909;
}
@media screen and (max-width: 800px) {
  .intro2_scroll {
    font-size: 0.75rem;
  }
}

.intro3 {
  margin-top: 30vh;
  height: 300vh;
}
.intro3 .__trigger1 {
  top: 0vh;
}
.intro3 .__trigger2 {
  top: 40vh;
}
.intro3 .__trigger3 {
  top: 60vh;
}
.intro3 .__trigger4 {
  top: 280vh;
}
.intro3_obj {
  font-size: 1rem;
  opacity: 0;
  height: calc(var(--vh, 1vh) * 100);
}
.mobile .intro3_obj {
  height: calc(var(--vh, 1vh) * 120);
}

@media screen and (max-width: 800px) {
  .intro3_obj {
    font-size: 0.75rem;
  }
}
.intro3_obj [class*=intro3_bg] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.intro3_obj .intro3_bg1 {
  height: 120% !important;
  object-fit: contain;
  background-image: linear-gradient(to top, rgba(0, 35, 75, 0) 36%, #00234b);
}
.intro3_obj .intro3_bg2 {
  background: no-repeat top 50% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s3_bg2.jpg");
}
.intro3_obj .intro3_bg3 {
  background: no-repeat top 80% left 50%;
  background-size: 100% auto;
  background-image: url("/resource/images/intro/s3_bg.png");
}
.intro3_con {
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
}
.mobile .intro3_con {
  height: calc(var(--vh, 1vh) * 120) !important;
}

@media screen and (max-width: 800px) {
  .intro3_con {
    font-size: 0.75rem;
  }
}
.intro3_con .inner {
  position: relative;
  height: 100%;
}
.intro3_con .water_img {
  position: absolute;
  width: 11.25em;
  height: 14.375em;
  transform: translate(-50%, -50%) scale(0.5);
  top: 50%;
  opacity: 0;
  left: 50%;
  margin: 0 auto;
}
.intro3_con .water_img img {
  width: 100%;
}
.intro3_con .men_img {
  position: absolute;
  width: 82.9375em;
  height: 55.125em;
  transform: translateX(-50%) scale(0.5);
  transform-origin: bottom center;
  left: 50%;
  bottom: 50%;
  margin: 0 auto;
  opacity: 0;
}
.intro3_con .men_img img {
  width: 100%;
}
.intro3_con_obj {
  position: relative;
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  transform: translateY(100%);
}
.intro3_con_obj [class*=intro3_con_bg] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

.intro3_con_bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  transform: translateY(100%);
}
.intro3_con_bg1 {
  background: repeat-x top 0% left 50%;
  background-size: 300vw auto;
  background-image: url("/resource/images/intro/s4_bg1.svg");
  transform: translateY(12.5em);
}
.intro3_con_bg2 {
  background: repeat-x top 0% left 50%;
  background-size: 300vw auto;
  background-image: url("/resource/images/intro/s4_bg2.svg");
  transform: translateY(18.75em);
}
.intro3_con_bg3 {
  background: repeat-x top 0% left 50%;
  background-size: 300vw auto;
  background-image: url("/resource/images/intro/s4_bg3.svg");
  transform: translateY(31.25em);
  position: relative;
}
.intro3_con_bg3 .intro3_con_bg3_1 {
  display: block;
  position: absolute;
  width: 100%;
  height: 250vh;
  left: 0;
  top: 18.75em;
  background: #a50c0c;
}
@media screen and (max-width: 800px) {
  .intro3_con_bg1 {
    background-size: 500vw auto;
    transform: translateY(12.5em);
  }
  .intro3_con_bg2 {
    background-size: 500vw auto;
    transform: translateY(15.625em);
  }
  .intro3_con_bg3 {
    background-size: 500vw auto;
    transform: translateY(21.875em);
  }
  .intro3_con_bg3 .intro3_con_bg3_1 {
    top: 15.625em;
    height: 220vh;
  }
}

.intro4 {
  margin-top: 30vh;
  height: 450vh;
}
.intro4 .__trigger1 {
  top: 100vh;
}
.intro4 .__trigger2 {
  top: 150vh;
}
.intro4 .__trigger3 {
  top: 300vh;
}
.intro4 .__trigger4 {
  top: 400vh;
}
.intro4_obj {
  font-size: 1rem;
  height: calc(var(--vh, 1vh) * 100);
}
.mobile .intro4_obj {
  height: calc(var(--vh, 1vh) * 120);
}

@media screen and (max-width: 800px) {
  .intro4_obj {
    font-size: 0.75rem;
  }
}
.intro4_obj [class*=intro4_bg] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.intro4_obj .intro4_bg1 {
  z-index: 1;
  position: relative;
}
.intro4_obj .intro4_bg1 > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
}
.intro4_obj .intro4_bg1 > div::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
.mobile .intro4_obj .intro4_bg1 > div::before {
  height: calc(var(--vh, 1vh) * 120);
}

.intro4_obj .intro4_bg1_1 {
  background: #a50c0c;
  opacity: 1 !important;
}
.intro4_obj .intro4_bg1_2::before {
  background: no-repeat top 50% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/s5_bg.jpg");
}
.intro4_obj .intro4_bg1_3 {
  background: #fff;
}
.intro4_obj .intro4_bg1_4::before {
  background: no-repeat top 50% left 50%;
  background-size: cover;
  background-image: url("/resource/images/intro/intro14_bg.jpg");
  position: relative;
}
.intro4_obj .intro4_bg1_4.on {
  background-color: #fff;
}
.intro4_obj .intro4_bg1_4.on::before {
  display: none;
}
@media screen and (max-width: 800px) {
  .intro4_obj .intro4_bg1_4::before {
    background-position: top 50% left 30%;
  }
}
.intro4_con {
  height: 100vh !important;
  height: calc(var(--vh, 1vh) * 100) !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media screen and (max-width: 800px) {
  .intro4_con {
    font-size: 0.75rem;
  }
}
.intro4_con .inner {
  position: relative;
}
.intro4_con .inner .intro4_tit1, .intro4_con .inner .intro4_tit2 {
  font-size: 3.5em;
  height: 1.2em;
  line-height: 1.2;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.intro4_con .inner .intro4_tit1 > span, .intro4_con .inner .intro4_tit2 > span {
  display: block;
}
.intro4_con .inner .intro4_tit1 {
  color: #fff;
  overflow: hidden;
}
.intro4_con .inner .intro4_tit2 {
  color: #222;
  height: 0;
}
.intro4_con .inner .intro4_tit2 > .tc_1 {
  color: #a50c0c;
}
.intro4_con .inner .intro4_con_img1 {
  overflow: hidden;
}
.intro4_con .inner .intro4_con_img1 img {
  max-width: 59.125em;
  width: 69.6354166667vw;
}

/*# sourceMappingURL=intro.css.map */