@charset "utf-8";
/* main1 */
main section {margin-bottom: 70px;}
main section:not(:first-child) .inner {padding-top: 60px; border-top: 1px solid #535353;}

.m_tit, .m_tit span {font-family: 'Cafe24Moyamoya-Regular-v1.0'; font-size: 65px;  background: linear-gradient(to right, #003777, #003777 50%, #dcdcdc 50%); background-clip: text; -webkit-background-clip: text; color: transparent; background-position: 100%; background-size: 200% 100%; opacity: 1 !important; transform: translateZ(0) !important; transition-duration: 0s !important;}
.m_tit span {font-weight: 900; font-size: 55px;}
.m_tit.aos-animate span { animation: txt-color 0.2s 0.5s ease-in forwards;}
.m_tit.aos-animate { animation: txt-color 1.5s ease-in forwards;}
.m_tit + .m_tit.aos-animate { animation-delay: 0.5s;}
@keyframes txt-color{
  0% { background-position: 100%; }
  100% { background-position: 0 100%;}
}
.m_tit br {display: none;}

.box_tit {font-size: 36px; font-weight: 700;}
.box_tit span {color: #00b4d7;}
.box_wrap {justify-content: space-between;}
.box .txt {padding: 25px 0;}
.box .txt h5 {font-size: 22px; font-weight: 700; line-height: 1.4;}
.box .txt p {font-size: 20px;}
.box .img {position: relative; overflow: hidden; border-radius: 20px; display: flex;}
.box .img img { transition: all 0.3s;}

.box .img .number {position: absolute; bottom:20px; left: 25px;}

.box .txt .mo_q {display: none;}

.more_btn {padding: 7px 25px; border-radius: 30px; background: #00b4d7; color: #fff;font-family: 'SCoreDream'; display: inline-block;}
.number {font-size: 45px;font-family: 'SCoreDream'; font-weight: 800; color: #fff;  -webkit-text-stroke: 1px #00b4d7; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #00b4d7;}

.main1 {text-align: center; background: #062d5c; height: min(960px,90vh);justify-content: center; align-items: center; position: relative;}
.main1 .top {padding: 50px 0; position: relative; overflow: hidden;}
.main1 .top .bg1 {width: 100%; height: 100%; background: url(../images/index/main1_img1.png) 55% 50% repeat-y; position: absolute; top:0; animation: main1_snow 2s linear infinite; background-size: contain;}
.main1 .top .bg2 {width: 100%; height: 100%; background: url(../images/index/main1_img1.png) 55% 50% repeat-y; position: absolute; top:0; animation: main2_snow 2s linear infinite; background-size: contain;}
.main1 .top .title {position: relative; display: inline-block;}
.main1 .top .img2 {position: absolute; left: 50%; transform: translate(50%, -50%); top:0px}
.main1 .bottom h2 {color: #fff; font-size: 26px; line-height: 1.7;}
.main1 .bottom h2 span {font-size: 28px;color: #00b4d7;}
.main1 .scroll {position: absolute; bottom:25px; justify-content: center; align-items: center;}
.main1 .scroll p {color: #fff; margin-bottom: 10px;}

@keyframes main1_snow {
  0% { transform: translateY(0%);}
  100% { transform: translateY(100%);}
}
@keyframes main2_snow {
  0% { transform: translateY(-100%);}
  100% { transform: translateY(0%);}
}

.main2 .box_wrap {padding-top: 50px;}
.main2 .box_wrap .box {width: min(345px, 32%);}
.main2 .box_wrap1 .box_tit {padding-bottom: 45px;}
.main2 .box_wrap1 .box3 .sm_txt {font-size: 15px;}
.main2 .box_wrap2 {margin-top: 70px; padding-top: 50px; border-top: 1px solid #535353;}
.main2 .box_wrap2 .box_tit {width: 100%; padding-bottom: 20px;}
.main2 .box_wrap2 .box {align-items: flex-start; justify-content: space-between}
.main2 .box .img img:hover{transform: scale(1.1);}

.main3 .box {justify-content: space-between; align-items: center; padding-top: 40px;}
.main3 .box .txt {width: 35%;}
.main3 .box .more_btn {margin-top: 60px;}
.main3 .box .img {max-width: 720px; width: 65%; justify-content: space-between; align-items: center;}
.main3 .box .img img {object-fit: contain;width: 45%;}

.main4 .box {justify-content: space-between;  padding-top: 40px;}
.main4 .box .txt {width: 35%;}
.main4 .box .more_btn {margin-top: 60px;}
.main4 .box .img {max-width: 720px; width: 65%; justify-content: space-between;}
.main4 .box .img img {width: 100%; object-fit: contain;}

.main5 .box {justify-content: space-between;  padding-top: 40px;}
.main5 .box .txt {width: 35%;}
.main5 .box .m_tit br {display: none;}
.main5 .box .more_btn {margin-top: 60px;}
.main5 .box .img {max-width: 720px; width: 65%; justify-content: space-between;}
.main5 .box .img img {width: 100%; object-fit: contain;}

@media (max-width:1200px) {
  main section {margin-bottom: 60px;}
  main section:not(:first-child) .inner {padding-top: 50px; }

  .m_tit, .m_tit span { font-size: 60px;}
  .m_tit span {font-size: 50px;}
  .m_tit + .m_tit.aos-animate { animation-delay: 0s;}

  .box_tit {font-size: 32px; }

  .number {font-size: 42px;}

  .main2 .box_wrap {padding-top: 45px;}
  .main2 .box_wrap1 .box_tit {padding-bottom:40px;}
  .main2 .box_wrap2 {margin-top: 60px; padding-top: 40px; }


}

@media (max-width:1080px) {
  main section {margin-bottom: 55px;}
  main section:not(:first-child) .inner {padding-top: 45px; }

  .m_tit, .m_tit span { font-size:min(50px,5.6vw);}
  .m_tit span {font-size: min(40px,5vw);}

  .box_tit {font-size: 28px; }
  .box .txt h5 {font-size: 20px; }
  .box .txt p {font-size: 18px;}

  .number {font-size: 40px;}

  .main1 .bottom {max-width: 840px; margin: 0 auto;}
  .main1 .bottom h2 {font-size: 24px;}
  .main1 .bottom h2 span {font-size: 26px;}
  .main1 .bottom h2 br {display: none;}

  .main2 .box_wrap {padding-top: 40px;}
  .main2 .box_wrap1 .box_tit {padding-bottom: 30px;}
  .main2 .box_wrap1 .box3 .sm_txt {font-size: 14px;}
  .main2 .box_wrap2 {margin-top: 55px; padding-top:35px; }
  .main2 .box_wrap2 .box_tit {padding-bottom: 15px;}
	
  .main3 .box .more_btn {margin-top: 50px;}
  .main4 .box .more_btn {margin-top: 50px;}
  .main5 .box .more_btn {margin-top: 50px;}
}

@media (max-width:800px) {
  main section {margin-bottom: min(40px,7%);}
  main section:not(:first-child) .inner {padding-top: min(35px,6%); }

  .m_tit, .m_tit span { font-size:min(65px,8.6vw);}
  .m_tit span {font-size: min(55px,7vw);}
  .m_tit br {display: block;}
  
  .box_tit {font-size: min(36px,5.5vw); }
  .box .txt {padding: 4% 0;}
  .box .txt h5 {font-size: min(24px,4.4vw); }
  .box .txt h5 span {display: block;}
  .box .txt h5 br {display: none;}
  .box .txt p {font-size: min(22px,4.1vw);}
  .box .txt .mo_q {display: block; margin-top: 3%;}
  .box .txt .mo_q p {font-size: 16px; line-height: 1.6;}
  .box .txt .mo_q span {color: #00b4d7; font-weight: 700;}

  .number {font-size: max(30px,5.5vw);}

  .main1 {height: 90vh;}
  .main1 .top .title {width: 67%;}
  .main1 .top .img2 {width: 50%;}
  .main1 .bottom {max-width: 840px; margin: 0 auto;}
  .main1 .bottom h2 {font-size: min(26px,4.4vw);}
  .main1 .bottom h2 span {font-size: min(28px,5vw);}
  .main1 .bottom h2 br {display: none;}

  .main2 .box_wrap {padding-top: min(40px,7%);}
  .main2 .box_wrap1 .box_tit, .main2 .box_wrap2 .box_tit {padding-bottom: 20px;}
  .main2 .box_wrap1 .box3 .sm_txt {font-size: min(16px,3.2vw);}
  .main2 .box_wrap .box_tit br {display: none;}
  .main2 .box_wrap .box {width: 100%; margin-bottom: min(40px,7%);}
  .main2 .box_wrap .box:last-child {margin-bottom: 0;}
  .main2 .box_wrap .box .img img {width: 100%; object-fit: cover;}
  .main2 .box_wrap2 {margin-top: min(40px,7%); padding-top: min(30px,5%); }

  .main3 .box { padding-top:  min(40px,7%);}
  .main3 .box .txt {width: 100%; order:2;}
  .main3 .box .more_btn {margin-top: min(40px,7%);}
  .main3 .box .img {max-width: 100%; width: 100%; order:1;}
  .main3 .box .img img {object-fit: contain;}

  .main4 .box { padding-top:  min(40px,7%);}
  .main4 .box .txt {width: 100%; order:2;}
  .main4 .box .more_btn {margin-top: min(40px,7%);}
  .main4 .box .img {max-width: 100%; width: 100%; order:1;}
  .main4 .box .img img {object-fit: contain;}

  .main5 .box { padding-top:  min(40px,7%);}
  .main5 .box .txt {width: 100%; order:2;}
  .main5 .box .m_tit {display: block;}
  .main5 .box .more_btn {margin-top: min(40px,7%);}
  .main5 .box .img {max-width: 100%; width: 100%; order:1;}
  .main5 .box .img img {object-fit: contain;}


}