@charset "utf-8";

html {
    overflow-x: hidden;
}

img {
    width:100%;
}
body {
    background:#000;
}
.area__top {
    background:url(../img/top_bg_center.png) top /cover no-repeat, url(../img/top_bg.png) top /cover no-repeat;
}
.area__top .inner {
    margin:0 auto;
    padding:0;
    text-align:center;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:center;
    padding:9px 21px;
    background:#1E1E1E;
    border-bottom:1px solid #6A6A6A;
}
.header__inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1200px;
    margin:0 auto;
    width:100%;
}
header .header__inner>div:first-child {
    min-width:242px;
}

header a {

}

header img.logo {
    height:56px;
}

header .date {
    text-shadow: 0px 3px 4px  #00000066;
    font-size:22px;
    font-weight:800;
}

header .time {
    text-shadow: 0px 3px 4px  #00000066;
    font-size:32px;
    font-weight:800;
}
.date__time {
}
.gradient-text {
    background: linear-gradient(92.52deg, #BF922F -0.07%, #FBF3C1 49.93%, #C59030 99.93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
/* Container for all banners */
.banners {
    width: 100%;
    overflow: hidden;
    padding:66px 0;
  }
  
  /* Top row of banners */
  .banners__top {
    gap:10px;
    display: flex;
    width: max-content; /* Allow content to define width */
    animation: scrollRightToLeft 20s linear infinite;
  }
  
  /* Bottom row of banners */
  .banners__btm {
    gap:10px;
    display: flex;
    width: max-content; /* Allow content to define width */
    animation: scrollLeftToRight 20s linear infinite;
  }
  
  /* Make all banner links display in a row */
  .banners__top a,
  .banners__btm a {
    display: block;
    flex-shrink: 0; /* Prevent images from shrinking */
  }
  
  /* Make sure images display properly */
  .banners__top img,
  .banners__btm img {
    display: block;
    height: 196px;
  }
  
  /* Animation for right to left scrolling (top row) */
  @keyframes scrollRightToLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  /* Animation for left to right scrolling (bottom row) */
  @keyframes scrollLeftToRight {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  /* To ensure continuous scrolling, we need to duplicate the banner content */
  .banners__top::after,
  .banners__btm::after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
  }

.area__btm-top {
    padding:20px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    max-width:1400px;
    margin:0 auto;
}
.area__btm-top .left {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}
.area__btm-top .left b {
    font-size:32px;
    font-weight:700;
}
.area__btm-top .left img {
    max-width:49px
}

.area__btm-top span {
    font-size:24px;
    font-weight:700;
}
.area__btm-top .right {
    gap:10px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.area__btm-top .right img {
    width:48px;
}
.area__btm-top .right span {
    font-size:24px;
}
.area__btm-top .right b {
    font-size:36px;
    color:#FFE033;
    font-weight:700;
}

.area__btm {
    background: linear-gradient(0, 
    #0D0D0D 0%,
rgba(255, 0, 4, 0.4) 50%,
    #0D0D0D 100%
    );
}

.sns {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    margin-bottom:40px;
}

.sns a {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
}

.sns img {
    max-width:52px;
}

.sns span {
    font-size:18px;
}

.wrapper__links {
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:40px 20px;
    max-width:1420px;
    margin:0 auto;
}

.links {
    border:1px solid rgb(39, 39, 39);
    border-radius:5px;
    background:#000;
    padding-bottom:15px;
    box-shadow: 0px 3.59px 6.47px 0px #00000040;
    border-radius:5px;
    overflow:hidden;
}

.links__title {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:20px;
    gap:10px;
    background: linear-gradient(0deg, #520000 0%, #8D0B0B 100%);
    padding:10px 3px;
    box-shadow: 0px 3.59px 6.47px 0px #00000040;
    border-radius:5px;
}

.links__title img {
    height:31px;
    width:auto;
}

.links__title b {
    font-size:22px;
    font-weight:700;
}

.links a {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:7px;
    margin-bottom:16px;
    margin-right:10px;
    margin-left:10px;
    border-radius:0;
}
.links a:last-child {
    margin-bottom:0;
}
.links a img {
    min-width:28px;
    max-width:28px;
    height:auto;
}

.links a span {
    font-size:17px;
    font-weight:700;
}

.link {
    height:30px;
    border-radius:50px 0 0 50px;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid rgb(39, 39, 39);
}
.link:last-child {
    margin-bottom:0;
    border-bottom:0;
}
.link .num {
    width:30px;
    height:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    background: #000000;
    border-radius:50%;
    font-size:16px;
    font-weight:500;
    border:1px solid #8D0B0B;
}

footer {
    text-align:center;
    padding:50px 0 100px;
}
footer a {}
footer a img {
    max-width:158px;
}
footer p {
    display:flex;
    justify-content:center;
    align-tiems:center;
    gap:5px;
    margin-top:5px;
}
footer p span {
    font-size:18px;
}
footer p img {
    height:20px;
    min-width:20px;
    max-width:20px;
}

.br__footer{
    display:none;
}


@media screen and (max-width:1400px) {
    .sns {
        gap:1%;
    }
    .wrapper__links{
        gap:20px 1%;
    }
}

@media screen and (max-width:1200px) {
    .sns img{
        max-width:30px;
    }
    .links a span{
        font-size:17px;
    }
}

@media screen and (max-width:991px) {
    .sns img{
        max-width:20px;
    }
    .links a span{
        font-size:14px;
    }
    .wrapper__links{
        grid-template-columns:repeat(4, 1fr);
    }
    .sns span{
        font-size:12px;
    }
    .links__title img{
        height:24px;
    }
    header .header__inner>div:first-child{
        min-width:200px;
    }
}


@media screen and (max-width: 768px) {
    header .header__inner>div:first-child{
        min-width:auto;
    }
    header>div:first-child{
        min-width:auto;
    }
    header img.logo{
        height:40px;
    }
    .header_sns{
        gap:8px;
    }
    .header_sns a img{
        width:30px;
        height:30px;
    }
    header .date{
        font-size:12px;
    }
    header .time{
        font-size:14px;
    }
    header{
        padding:20px 10px;
        display:block;
    }
    .banners{
        grid-template-columns:repeat(1, 1fr);
        padding:0;
    }

    .banners:nth-of-type(1){
        padding-top:28px;
    }
    .banners:nth-of-type(3){
        padding-bottom:28px;
    }
    .area__btm-top .left b{
        font-size:20px;
    }
    .area__btm-top .right {
        margin-top:20px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .area__btm-top .right img{
        max-width:150px;
    }

    .banners{
        padding:20px 0;
        flex-wrap:wrap;
    }
    .area__btm-top{
        display:block;
    }
    .area__btm-top img{
        display:block;
    }
    .area__btm-top .right span{
        font-size:14px;
    }
    .area__btm-top p{
        font-size:24px;
    }
    .sns{
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:10px;
    }
    .sns a{
        width:calc(33.3333% - 10px);
        justify-content:flex-start;
        gap:6px;
    }
    .wrapper__links{
        grid-template-columns:repeat(2, 1fr);
        gap:20px 10px;
    }
    .links{
        padding:0;
    }
    .links__title{
        justify-content:flex-start;
    }
    .links__title b{
        font-size:14px;
    }
    .links__title img{
        height:24px;
    }
    footer a img {
        max-width:120px;
    }
    footer p{
        flex-wrap:wrap;
        margin-top:20px;
    }
    footer p span{
        font-size:12px;
        display:block;
    }
    footer p span:first-child {
        width:100%;
    }
    .br__footer {
        display:block;
    }
    footer p img{
        height:14px;
        min-width:14px;
        max-width:14px;
    }
    .links a span{
        font-size:12px;
    }
    .links a img{
        max-width:24px;
    }

    .banners__top img, .banners__btm img{
        height:100px;
    }
    .area__btm-top .right b{
        font-size:20px;
    }
    .area__btm-top .right img{
        width:30px;
    }
    .area__btm-top .left img{
        max-width:30px;
    }
    .links a{
        margin-bottom:5px;
    }
}