@charset "utf-8";

html {
    overflow-x: hidden;
}

img {
    width:100%;
}

.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;
    border-bottom:5px solid #fff;
    max-width:1300px;
    margin:0 auto;
}
header img.logo {
    height:91px;
    width:auto;
}
header .left {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    text-align:left;
}
header .date {
    text-shadow: 0px 3px 4px  #00000066;
    font-size:22px;
    font-weight:500;
}

header .time {
    text-shadow: 0px 3px 4px  #00000066;
    font-size:32px;
    font-weight:500;
}

.header_sns {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}
.header_sns a {
    display:flex;
    justify-content:center;
    align-items:center;
}
.header_sns a img {
    width:40px;
    height:40px;
}

.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;
}
.banners {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:7px 0;
    max-width:1300px;
    margin:0 auto;
    padding-top:35px;
    padding-bottom:35px;
}

.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 img {
    max-width:220px;
}

.area__btm {
    background-image: linear-gradient(
        to bottom,
        #13001a 0%,    /* 어두운 보라색 시작 */
        #430054 50%,   /* 중간 부분에 밝은 보라색 */
        #13001a 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 #9A1598;
    padding:10px 8px 20px;
    border-radius:5px;
    background:#0C0327;
}

.links__title {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    margin-bottom:10px;
    gap:10px;
}

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

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

.links a {
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:7px;
    margin-bottom:16px;
    margin-bottom:16px;
}
.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:500;
}

.link {
    background: linear-gradient(90deg, #9A1598 0%, rgba(154, 21, 152, 0) 100%);
    height:30px;
    border-radius:50px 0 0 50px;
    margin-bottom:14px;
}
.link:last-child {
    margin-bottom:0;
}
.link .num {
    width:33.33px;
    height:33.33px;
    display:flex;
    justify-content:center;
    align-items:center;
    background: linear-gradient(180deg, #601282 0%, #B100E7 100%);
    border-radius:50%;
    font-size:16px;
    font-weight:500;
    box-shadow: 1.59px 0px 3.17px 0px #00000066;
}

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;
        margin-bottom:20px;
    }
    header img.logo{
        height:70px;
    }
    .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:0;
        flex-wrap:wrap;
    }
    .area__btm-top{
        display:block;
    }
    .area__btm-top img{
        display:block;
    }
    .area__btm-top span{
        font-size:20px;
    }
    .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:10px 5px;
    }
    .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;
    }
}