@charset "utf-8";


/* 404 */
.wrapper--404{padding-top: 2rem;padding-bottom: 2rem;text-align:center;font-size: 20px;/* background: linear-gradient(135deg, rgb(110 235 136) 0%, rgb(10 85 150) 100%); */background: radial-gradient(100% 58.8% at 0% 100%, #0A5596 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(100% 46.38% at 100% 41.74%, #0A5596 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(145deg, #0A5596 0%, #0A5596 15%, #67e089 55%, #000000 100%);color:#fff}
.wrapper--404 .container{position: relative;display:flex;justify-content: space-between;align-items: center;}
.wrapper--404 .container::before,.wrapper--404 .container::after{content:'';position:absolute;top:50%;background: #fff;}
.wrapper--404 .container::before{
    left: 24vw;
    right: 340px;
    /* width: calc(100% - 36vw - 200px); */
    height: 1px;
    opacity: .25;
	 background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%)
}
.wrapper--404 .container::after{
    left: 24vw;
    width: 6px;
    height: 6px;
    border-radius: 3em;
    transform: translateY(-50%);
    -webkit-animation: key404 3.0s infinite ease-out;
    animation: key404 3.0s infinite ease-out;
	box-shadow:0 0 1rem rgba(255,255,255,.9);
}
@-webkit-keyframes key404 {
  0%{left:24vw;opacity:0;box-shadow:0 0 1rem rgba(255,255,255,.9)}
  15%{opacity:1;box-shadow:0 0 3rem rgba(255,255,255,1)}
  100%{left:60vw;opacity:0;box-shadow:0 0 1rem rgba(255,255,255,.9)}
}
@keyframes key404 {
  0%{left:24vw;opacity:0;box-shadow:0 0 1rem rgba(255,255,255,.9)}
  15%{opacity:1;box-shadow:0 0 3rem rgba(255,255,255,1)}
  100%{left:60vw;opacity:0;box-shadow:0 0 1rem rgba(255,255,255,.9)}
}

.wrapper--404 h1{margin-bottom: 0;font-size: 12vw;font-weight:700;text-shadow: 0 5px 1rem rgba(0, 0, 0, 0.5);line-height: 1;}
.wrapper--404 .space{width:100px;height:150px;border-top-left-radius:5em;border-top-right-radius:5em;overflow:hidden;margin:30px auto 0;position:relative;pointer-events:none;-webkit-transform:translateZ(0);display: none;}
.wrapper--404 .blackhole{height:100px;width:100px;border-radius:100%;position:absolute;top:0;left:0;background: #2a1b5b;background: linear-gradient(135deg,rgba(176,15,20,1) 0%,rgba(51,51,153,1) 100%);box-shadow: inset 0 1rem 3rem rgba(0, 0, 0, 0.9), 0 0 3rem #000;}
.wrapper--404 .blackhole:after{content:'';height:calc(100% + 10px);width:calc(100% + 10px);border:5px solid #000;border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;position:absolute;top:-5px;left:-5px;z-index:5;transform:rotate(45deg)}
.wrapper--404 .btn-style.dark-style:hover{background:rgba(255,255,255,.9)}
.wrapper--404 .ship{height:100px;width:100px;background:url(../images/404/Character.svg) center/contain no-repeat;animation:blackhole 6s infinite linear;position:absolute;bottom:-150px}
@keyframes blackhole {
  to{transform:translateY(-100vh) rotate(135deg)}
}
.wrapper--404 .btnStyle{font-size:18px;color:#fff;letter-spacing:.5em}
.wrapper--404 .btnStyle span{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-50%);opacity:0}
.wrapper--404 .btnStyle:hover{color:transparent}
.wrapper--404 .btnStyle:hover span{color:#fff;opacity:1}

.btn404{display:inline-block;position:relative;vertical-align:middle;min-width: 250px;padding: 1rem 2rem;border-radius: 3em;font-size: 1.125rem;font-weight: 400;text-align: center;background: linear-gradient(to right, #00B189 0%, #00a0e600 100%);color: #fff;border: none;letter-spacing: 0.1em;}
.btn404 span{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50%,-50%);opacity:0;-webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition: all .3s cubic-bezier(0.165,0.84,0.44,1);-o-transition: all .3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition: all .3s cubic-bezier(0.165,0.84,0.44,1);transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);}
.btn404:hover{background: linear-gradient(to right, #00B189 0%, #00B189 100%);color:transparent}
.btn404:hover span{color:#fff;opacity:1}

.page404Title{font-size: 1rem;font-weight: 300;text-align: center;margin: 1rem 0;letter-spacing: .25em;text-transform: uppercase;opacity: .7;}

.wrapper--404Promote{padding: clamp(3rem,4.5vw,6rem) 0;background: #fff;color: #212529;}
.wrapper--404Promote .container{display: flex;align-items: flex-start;gap: 4rem;}
.wrapper--404Promote .promoteNav{list-style: none;padding: 0;margin: 0;display: grid;grid-template-columns: 1fr;gap: .5rem;width: 25%;}
.wrapper--404Promote .promoteNav__li{}
.wrapper--404Promote .promoteNav__link{display: block;padding: 1rem;border-radius: 3em;font-size: clamp(1rem,1.5vw,1.125rem);font-weight: 400;text-align: center;background: #0A5596;color: #fff;}
.wrapper--404Promote .promoteNav__link:hover{background: linear-gradient(135deg, rgb(10 85 150) 0%, rgb(110 235 136) 100%);}
.wrapper--404Promote .promoteBlock{flex:1}
.wrapper--404Promote .promoteBlock__header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;}
.wrapper--404Promote *+.promoteBlock__header{margin-top:4rem}
.wrapper--404Promote .promoteBlock__title{font-size: 1.5rem;font-weight: 600;}
.wrapper--404Promote .moreBtn{display: flex;align-items: center;gap: .5rem;font-size: 1rem;font-weight: 400;text-align: center;border: none;letter-spacing: 0.1em;color: #aaa;}
.wrapper--404Promote .moreBtn::after{content: '';display: inline-flex;width: .5rem;aspect-ratio: 1;border-top: solid 1px;border-right: solid 1px;transform: rotate(45deg);}
.wrapper--404Promote .moreBtn:hover{color:#0A5596}

.wrapper--404Promote .news-area,
.wrapper--404Promote .event-group{gap:.5rem;}
.wrapper--404Promote .event-group{display:grid;grid-template-columns:1fr 1fr}
.wrapper--404Promote .event-group .date2 span:last-child{display:block;padding:0;width: 100%;background: transparent;}
.wrapper--404Promote .event-group .date2:before{display:none}
.wrapper--404Promote .news-list,
.wrapper--404Promote .event-group .item{margin: 0;padding: 1rem;background: #fff;border-radius: .5rem;box-shadow: 0 0 1rem rgba(0,0,0,.15);}
.wrapper--404Promote .news-list .small-txt,
.wrapper--404Promote .event-group .item .small-txt{display: none;margin-bottom:0}

.wrapper--404Promote .news-list:hover,
.wrapper--404Promote .event-group .item:hover{background:#f5f5f5}

@media (max-width: 1024px) { 
  .wrapper--404Promote .event-group{grid-template-columns:1fr}
}

@media (max-width: 996px) { 
  .wrapper--404Promote .container{flex-direction:column}
  .wrapper--404Promote .promoteNav{grid-template-columns: repeat(3,1fr);width: 100%;}
  
}

@media (max-width: 768px) { 
  .wrapper--404Promote .promoteNav{grid-template-columns: repeat(2,1fr);}
}

@media (max-width: 640px) { 
    /* 404 */
    .wrapper--404 .container{flex-direction: column;gap: 4rem;}
    .btn404{font-size: 16px;}

    .wrapper--404Promote .promoteNav{grid-template-columns: 1fr;}

}