@charset "UTF-8";

.banner{
    display:flex;
    flex-direction: column;
    width:100%;
    height:800px;
    text-align: center;
    justify-content: center;
    font-family: 'Pretendard-Regular';
}

.banner>div{padding-bottom:100px;
    -webkit-animation: scale-up-center 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.banner>div>h1{padding-bottom:30px;}
.banner>div>span{font-size:1.5rem;}
.banner>div>div{padding-top:50px;}

@-webkit-keyframes scale-up-center {
    0% {
        opacity: 0;
    }
    30%{opacity:0}
    100% {
        opacity: 1;
    }
  }
  @keyframes scale-up-center {
    0% {
        opacity: 1;
    }
    30%{opacity:1}
    100% {
        opacity: 1;
    }
}
@media screen and (max-width:850px){
    .banner{height:600px;}
    .banner>div{padding-top:50px;}
}
@media screen and (max-width:580px){
    .banner>div>span{font-size:14px;}
    .banner{height:350px;}
}

.notice-actions {
    display: flex;
    gap: 5px;
}

.notice-actions button {
    padding: 5px 10px;
    cursor: pointer;
}
.tab-buttons {
    display: flex;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.tab-buttons button {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    background-color: #f4f4f4;
    border: none;
    outline: none;
    transition: background-color 0.3s;
    font-size: 16px;
}

.tab-buttons button:hover {
    background-color: #ddd;
}

.tab-buttons button.active {
    background-color: #fff;
    border-bottom: 2px solid #fa0707;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
}