@charset "UTF-8";

.sports-hero {width: 100%; min-height: 100vh; color: #ffffff; display: flex; flex-direction: column; overflow: hidden; position: relative;}
.sports-hero__bg {position: absolute; inset: 0; z-index: 0; background: url('/_user/intro/img/bg1_on.jpg') no-repeat right center/cover;}
.sports-hero__bg::before {content: ''; width: 160px; height: 240px; display: none; position: absolute; top: 0; right: 0; background: #111; clip-path: polygon(0 0, 100% 0, 100% 100%, 160px 100%);}
.sports-hero__bg.bg_1 {background: url('/_user/intro/img/bg1_on.jpg') no-repeat center/cover;}
.sports-hero__bg.bg_1::before {background: linear-gradient(60deg, #7FBE26 21.58%, #00A63C 33.89%, #00A0E9 48.71%, #0082CD 62.47%, #0068B7 68.95%);}
.sports-hero__bg.bg_2 {background: url('/_user/intro/img/bg2_on.jpg') no-repeat center/cover;}
.sports-hero__bg.bg_2::before {background: linear-gradient(42deg, #ABCD03 27.78%, #ABCD03 28.02%, #9FC814 33.55%, #7CB729 43.43%, #2E9E39 56.5%, #008742 70.65%, #008742 70.89%);}
.sports-hero__overlay {display: none; position: absolute; inset: 0; z-index: 1; clip-path: polygon(0 0, 25% 0, 52% 100%, 0 100%);}
.sports-hero__overlay .bg {width: 100%; height: 100%; position: relative;}
.sports-hero__overlay--green {background: linear-gradient(348deg, #ABCD03 9.24%, #ABCD03 9.74%, #9FC814 21.4%, #7CB729 42.19%, #2E9E39 69.7%, #008742 99.49%, #008742 100%);}
.sports-hero__overlay--blue .bg {background: url('/_user/intro/img/bg_01.jpg') no-repeat left center;}
.sports-hero__overlay--green .bg {background: url('/_user/intro/img/bg_02.png') no-repeat left -514px center;}
.sports-hero__content {padding: 60px 30px; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; position: relative; z-index: 2;}
.sports-hero__title {margin-bottom: 25px; color: #FFF; font-size: 35px; font-style: italic; font-weight: 800; line-height: 1.3; text-shadow: 2px 2px 10px rgba(16, 16, 16, 0.80); position: relative;}
.sports-hero__title::before {content: ''; width: 70px; height: 80px; margin-bottom: 10px; display: block; background: url("/_user/intro/img/ico-intro.svg") no-repeat; background-size: cover;}
.sports-hero__subtitle {margin-bottom: 13px; font-size: 20px; font-weight: 800;}
.sports-hero__desc {color: #FFF; font-size: 14px; line-height: 1.4;}
.sports-hero__buttons {width: 100%; display: flex; flex-direction: column; position: relative; z-index: 2;}
.sports-btn {padding: 20px 30px; color: #ffffff; text-decoration: none; display: flex; flex-direction: column; justify-content: center; transition: background-color 0.3s ease;}
.sports-btn__date {margin-bottom: 5px; color: #FFF; font-size: 16px; font-weight: 400; line-height: normal; letter-spacing: -0.32px;}
.sports-btn__date span {font-weight: 900;}
.sports-btn__title {color: #FFF; font-size: 22px; font-weight: 700;}
.sports-btn__arrow {display: none;}
.sports-btn__arrow::after {content: ''; width: 15px; height: 1px; margin-left: 8px; display: inline-block; position: relative; background: currentColor;}
.sports-btn--blue {background: linear-gradient(90deg, #00112E 0%, #003894 100%);}
.sports-btn--green {background: linear-gradient(90deg, #008742 0%, #002110 100%);}
.sports-btn > span {display: none;}

@media screen and (min-width: 1200px) {
    .sports-hero__bg::before {display: block;}
    .sports-hero__bg::after {background: rgba(0, 0, 0, 0.15);}
    .sports-hero__content {padding: 0 50px; justify-content: center;}
    .sports-hero__title {font-size: 48px;}
    .sports-hero__subtitle {font-size: 20px;}
    .sports-hero__desc {font-size: 14px;}
    .sports-hero__buttons {flex-direction: row;}
    .sports-btn {padding: 32px 5%; display: flex; flex-direction: row; align-items: center; flex: 1; background-color: #222; transition: flex 0.3s ease-in-out;}
    .sports-btn.active {flex: 1.4;}
    .sports-btn:first-child {clip-path: polygon(0 0, calc(100% - 80px) 0, 100% 100%, 0 100%);}
    .sports-btn:last-child {margin-left: -80px; clip-path: polygon(0 0, 100% 0, 100% 100%, 80px 100%);}
    .sports-btn--blue, .sports-btn--green {background: #222;}
    .sports-hero__overlay {display: block;}
    .sports-hero:has(.sports-btn--blue:hover) .sports-hero__overlay--blue {opacity: 1;}
    .sports-btn--blue.active, .sports-hero:has(.sports-btn--blue:hover) .sports-btn--blue {background: linear-gradient(90deg, #00112E 0%, #003894 100%);}
    .sports-hero:has(.sports-btn--green:hover) .sports-hero__overlay--green {opacity: 1;}
    .sports-btn--green.active, .sports-hero:has(.sports-btn--green:hover) .sports-btn--green {background: linear-gradient(90deg, #008742 0%, #002110 100%);}
}

.sports-btn__date {font-size: 20px;}
.sports-btn__title {font-size: 34px;}

@media screen and (min-width: 1400px) {
    .sports-hero__title::before {width: 98px; height: 111px; margin-bottom: 20px;}
}

@media screen and (min-width: 1600px) {
    .sports-hero__content {padding: 0 110px;}
    .sports-hero__title {font-size: 56px;}
    .sports-hero__subtitle {font-size: 24px;}
    .sports-hero__desc {font-size: 16px;}
    .sports-btn-wrap {margin-right: 50px;}
    .sports-btn > span {color: #FFF; font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: -0.32px; display: block; position: relative;}
    .sports-btn > span::after {content: ''; width: 105px; height: 18px; display: block; position: absolute; background: url("/_user/intro/img/ico-go.svg") no-repeat;}
}