@import url(default.css);
@import url(fonts.css);
@import url(common.css);
@import url(layout.css);

.visual {
    background: url(../images/main/visual01.png) no-repeat center center / cover;
    height: 800px;
    position: relative;
}
.visual .tit {
    text-align: right;
    color: var(--txt-color-white);
    padding: 482px 0 200px 0;
}
.visual .tit strong {
    font-size: 25px;
}
.visual .tit h2 {
    font-size: var(--txt-size-tit);
    font-weight: 700;
}
.visual .info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 65px;
    background-color: rgba(29, 29, 29, 0.5);
    backdrop-filter: blur(10px);
    color: var(--txt-color-white);
    text-align: center;
    padding: 0 20px;
    font-weight: 100;
}
.visual .info ul.depth1 {
    display: flex;
    justify-content: center;
    line-height: 65px;
}
.visual .info ul.depth1 > li {
    position: relative;
    white-space: nowrap;
    width: 33.3%;
    max-width: 388px;
}
.visual .info > ul.depth1 > li > ul.depth2 > li > span {
    padding-left: 20px;
}
.visual .info > ul.depth1 > li > ul.depth2 > li > span::before {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_44_2575' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_44_2575)'%3E%3Cpath d='M19.3412 20.6587L20.6588 19.3413L15.9375 14.62V8.75H14.0625V15.3797L19.3412 20.6587ZM15.0022 26.875C13.3597 26.875 11.8158 26.5633 10.3706 25.94C8.92542 25.3167 7.66833 24.4707 6.59937 23.4022C5.53042 22.3336 4.68406 21.0771 4.06031 19.6325C3.43677 18.1879 3.125 16.6445 3.125 15.0022C3.125 13.3597 3.43667 11.8158 4.06 10.3706C4.68333 8.92542 5.52927 7.66833 6.59781 6.59937C7.66635 5.53042 8.92292 4.68406 10.3675 4.06031C11.8121 3.43677 13.3555 3.125 14.9978 3.125C16.6403 3.125 18.1842 3.43667 19.6294 4.06C21.0746 4.68333 22.3317 5.52927 23.4006 6.59781C24.4696 7.66635 25.3159 8.92292 25.9397 10.3675C26.5632 11.8121 26.875 13.3555 26.875 14.9978C26.875 16.6403 26.5633 18.1842 25.94 19.6294C25.3167 21.0746 24.4707 22.3317 23.4022 23.4006C22.3336 24.4696 21.0771 25.3159 19.6325 25.9397C18.1879 26.5632 16.6445 26.875 15.0022 26.875ZM15 25C17.7708 25 20.1302 24.026 22.0781 22.0781C24.026 20.1302 25 17.7708 25 15C25 12.2292 24.026 9.86979 22.0781 7.92188C20.1302 5.97396 17.7708 5 15 5C12.2292 5 9.86979 5.97396 7.92188 7.92188C5.97396 9.86979 5 12.2292 5 15C5 17.7708 5.97396 20.1302 7.92188 22.0781C9.86979 24.026 12.2292 25 15 25Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.visual .info > ul.depth1 > li.fee > ul.depth2 > li > span::before  {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_44_2568' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='30' height='30'%3E%3Crect width='30' height='30' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_44_2568)'%3E%3Cpath d='M15 25.625C11.9665 25.625 9.43719 25.1967 7.41219 24.34C5.3874 23.4835 4.375 22.4134 4.375 21.1297V8.75C4.375 7.54333 5.41187 6.5125 7.48562 5.6575C9.55937 4.8025 12.0642 4.375 15 4.375C17.9358 4.375 20.4406 4.8025 22.5144 5.6575C24.5881 6.5125 25.625 7.54333 25.625 8.75V21.1297C25.625 22.4134 24.6126 23.4835 22.5878 24.34C20.5628 25.1967 18.0335 25.625 15 25.625ZM15 11.1972C16.8221 11.1972 18.6567 10.9396 20.5037 10.4244C22.3506 9.90917 23.4207 9.35344 23.7141 8.75719C23.4286 8.1451 22.3697 7.57417 20.5372 7.04437C18.7047 6.51479 16.859 6.25 15 6.25C13.1442 6.25 11.3048 6.5076 9.48188 7.02281C7.65896 7.53802 6.58563 8.1001 6.26188 8.70906C6.57771 9.33406 7.64302 9.905 9.45781 10.4219C11.2728 10.9388 13.1202 11.1972 15 11.1972ZM15 17.4519C15.8671 17.4519 16.7108 17.4102 17.5313 17.3269C18.3517 17.2435 19.1357 17.1218 19.8834 16.9616C20.6309 16.8014 21.3308 16.6026 21.9831 16.3653C22.6354 16.1282 23.2244 15.8598 23.75 15.56V11.125C23.2244 11.4246 22.6354 11.693 21.9831 11.9303C21.3308 12.1674 20.6309 12.366 19.8834 12.5263C19.1357 12.6867 18.3517 12.8085 17.5313 12.8919C16.7108 12.9752 15.8671 13.0169 15 13.0169C14.1171 13.0169 13.2569 12.9731 12.4194 12.8856C11.5821 12.7983 10.7917 12.6746 10.0481 12.5144C9.30458 12.3542 8.61188 12.1575 7.97 11.9244C7.32812 11.691 6.75479 11.4246 6.25 11.125V15.56C6.75479 15.8598 7.32812 16.1263 7.97 16.3594C8.61188 16.5925 9.30458 16.7892 10.0481 16.9494C10.7917 17.1098 11.5821 17.2336 12.4194 17.3209C13.2569 17.4082 14.1171 17.4519 15 17.4519ZM15 23.75C16.0144 23.75 17.0104 23.6831 17.9881 23.5494C18.9656 23.4154 19.855 23.2327 20.6562 23.0012C21.4575 22.7696 22.1333 22.5007 22.6838 22.1947C23.2344 21.8886 23.5898 21.5673 23.75 21.2306V17.435C23.2244 17.7348 22.6354 18.0032 21.9831 18.2403C21.3308 18.4776 20.6309 18.6764 19.8834 18.8366C19.1357 18.9968 18.3517 19.1185 17.5313 19.2019C16.7108 19.2852 15.8671 19.3269 15 19.3269C14.1171 19.3269 13.2569 19.2832 12.4194 19.1959C11.5821 19.1086 10.7917 18.9848 10.0481 18.8244C9.30458 18.6642 8.61188 18.4675 7.97 18.2344C7.32812 18.0013 6.75479 17.7348 6.25 17.435V21.25C6.41021 21.5946 6.7624 21.9147 7.30656 22.2103C7.85052 22.5059 8.52313 22.7696 9.32438 23.0012C10.1258 23.2327 11.0185 23.4154 12.0025 23.5494C12.9865 23.6831 13.9856 23.75 15 23.75Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.visual .info > ul.depth1 > li.call > ul.depth2 > li > span::before  {
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_44_2584' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_44_2584)'%3E%3Cpath d='M22.6805 23.9166C20.4819 23.9166 18.2731 23.4055 16.0541 22.3831C13.8353 21.3607 11.7966 19.9185 9.93812 18.0565C8.07982 16.1943 6.63947 14.1555 5.61708 11.9402C4.59469 9.72512 4.0835 7.51827 4.0835 5.31969C4.0835 4.96638 4.20016 4.67199 4.4335 4.43652C4.66683 4.20105 4.9585 4.08331 5.3085 4.08331H9.11358C9.40816 4.08331 9.66804 4.17947 9.89321 4.37177C10.1184 4.56388 10.2616 4.8013 10.3228 5.08402L10.9916 8.51665C11.0379 8.83515 11.0282 9.10883 10.9625 9.33769C10.8965 9.56655 10.7783 9.75876 10.6078 9.91431L7.91337 12.5373C8.34698 13.3314 8.84243 14.0826 9.3997 14.791C9.95679 15.4991 10.56 16.1755 11.2092 16.8201C11.8493 17.4604 12.5299 18.055 13.2509 18.6039C13.9719 19.1529 14.7504 19.6637 15.5865 20.1364L18.2045 17.4956C18.3871 17.3056 18.6082 17.1724 18.8678 17.096C19.1272 17.0198 19.3968 17.0011 19.6766 17.04L22.9161 17.6998C23.2107 17.7776 23.4511 17.9279 23.6374 18.1507C23.8237 18.3735 23.9168 18.6263 23.9168 18.909V22.6916C23.9168 23.0416 23.7991 23.3333 23.5636 23.5666C23.3281 23.8 23.0338 23.9166 22.6805 23.9166ZM7.08533 10.8815L9.16754 8.88911C9.20487 8.85916 9.22918 8.81804 9.24045 8.76573C9.25173 8.71342 9.24989 8.66481 9.23491 8.6199L8.72771 6.01269C8.71273 5.95299 8.68658 5.90817 8.64925 5.87823C8.61191 5.84828 8.5633 5.83331 8.50341 5.83331H6.0085C5.96358 5.83331 5.92615 5.84828 5.8962 5.87823C5.86645 5.90817 5.85158 5.94561 5.85158 5.99052C5.91127 6.78774 6.04175 7.5976 6.243 8.4201C6.44405 9.2428 6.72483 10.0633 7.08533 10.8815ZM17.2353 20.9641C18.0086 21.3246 18.8152 21.6002 19.655 21.791C20.495 21.9815 21.2799 22.0948 22.0096 22.1308C22.0545 22.1308 22.092 22.1158 22.1219 22.0859C22.1519 22.0559 22.1668 22.0185 22.1668 21.9736V19.5192C22.1668 19.4593 22.1519 19.4107 22.1219 19.3734C22.092 19.336 22.0471 19.3099 21.9875 19.2949L19.5375 18.7967C19.4925 18.7818 19.4533 18.7799 19.4196 18.7912C19.386 18.8025 19.3504 18.8268 19.3129 18.8641L17.2353 20.9641Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.visual .info > ul.depth1 > li > ul.depth2 {
    display: flex;
    gap: 30px;
    justify-content: center;
}
.visual .info > ul.depth1 > li > ul.depth2 > li > span {
    font-weight: 400;
    padding-right: 30px;
    position: relative;
}
.visual .info > ul.depth1 > li > ul.depth2 > li > span:first-child::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 2px;
    height: 90%;
    background-color: var(--txt-color-w80);
    content: "";
}


@media screen and (max-width:1024px) {
    .visual {
        height: 500px;
    }
    .visual .tit {
        text-align: center;
        padding-top: 125px;
    }
    .visual .tit strong {
        font-size: 15px;
    }
    .visual .tit h2 {
        font-size: var(--txt-size-tit-mo);
    }
    .visual .info {
        height: auto;
        padding: 10px 0;
    }
    .visual .info > ul.depth1 {
        display: block;
    }
    .visual .info ul.depth1 {
        line-height: 30px;
    }
    .visual .info ul.depth1 > li {
        width: 100%;
        height: 30px;
        padding-left: 0;
        max-width: 100%;
    }
    .visual .info > ul.depth1 > li > ul.depth2 {
        display: flex;
        gap: 15px;
    }
    .visual .info > ul.depth1 > li > ul.depth2 > li > span {
        padding-right: 15px;
    }
    .visual .info > ul.depth1 > li > ul.depth2 > li > span::before {
        width: 18px;
        height: 18px;
    }
    .visual .info > ul.depth1 > li > ul.depth2 > li > span:first-child::after {
        width: 1px;
    }
}

.about {
    background: url(../images/main/about_bg0.png) no-repeat center center / cover;
    padding: 100px 0;
    color: var(--txt-color-white);
}
.about .wrapper {
    display: flex;
    position: relative;
    justify-content: space-between;
}
.about .tit h2 {
    font-size: var(--txt-size-tit);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}
.about .tit span {
    font-weight: 100;
}
.about .photo {
    font-size: 0;
    line-height: 0;
    width: 618px;
    height: 400px;
    overflow: hidden;
    border-radius: 50px;
}
.about .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about .txt {
    position: absolute;
    left: 0;
    bottom: 169px;
    width: 35%;
    height: 85px;
    font-size: 20px;
    color: var(--txt-color-white);
}
.about .more {
    position: absolute;
    left: 0;
    bottom: 0;
}
.about .more a {
    display: block;
    padding: 14px 37px 14px 20px;
    line-height: 1;
    border: 1px solid var(--txt-color-gray);
    border-radius: 25px;
}
.about .more a span {
    position: relative;
}
.about .more a span::after {
    position: absolute;
    right: -22px;
    top: -3px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_60_2431' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='25'%3E%3Crect width='25' height='25' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_60_2431)'%3E%3Cpath d='M11.7186 13.2813H5.729V11.7188H11.7186V5.72925H13.2811V11.7188H19.2707V13.2813H13.2811V19.2709H11.7186V13.2813Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.about .more a:hover {
    background-color: var(--color-main3);
    border-color: var(--color-main3);
}

@media screen and (max-width:1024px) {
    .about {
        padding: 50px 0 25px 0;
    }
    .about .wrapper {
        display: block;
    }
    .about .tit h2 {
        font-size: var(--txt-size-tit-mo);
        margin-bottom: 5px;
    }
    .about .photo {
        width: auto;
        height: 300px;
        overflow: hidden;
        border-radius: 25px;
        margin: 20px auto;
    }
    .about .txt {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        height: auto;
        font-size: 15px;
    }
    .about .more {
        position: relative;
        margin: 20px auto;
        text-align: center;
    }
    .about .more a {
        display: inline-block;
        padding: 11px 30px 11px 15px;
        line-height: 1;
        border: 1px solid var(--txt-color-gray);
        border-radius: 25px;
        text-align: center;
    }
    .about .more a span::after {
        right: -20px;
        top: -2px;
        width: 17px;
        height: 17px;
    }
}
@media screen and (max-width:768px) {
    .about .photo {
        height: 200px;
    }
}
.Campaine {
    margin-top: 100px;
}
.Campaine .tit {
    position: relative;
}
.Campaine .tit h2 {
    font-size: var(--txt-size-tit);
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
    color: var(--txt-color-tit);
}
.Campaine .tit .photo {
    width: 300px;
    height: 300px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    margin: 0 auto;
    position: relative;
}
.Campaine .tit .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.Campaine .tit span {
    font-size: 0;
    line-height: 0;
}
.Campaine .tit span.circle_y {
    position: absolute;
    right: 20px;
    top: 25px;
    width: 40px;
    height: 40px;
}
.Campaine .tit span.circle_b {
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 70px;
    height: 70px;
}
.Campaine .tit span.circle_y::after {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -10;
    width: 100%;
    height: 100%;
    background-color: var(--color-main3);
    border-radius: 50%;
    content: "";
}
.Campaine .tit span.circle_b::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-main);
    border-radius: 50%;
    content: "";
}
.Campaine .txt {
    margin-top: 100px;
    color: var(--txt-color-tit);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    align-items: center;
    font-size: 7vh;
}
.Campaine .txt span,
.Campaine .txt img {
    display: inline-block;
}
.Campaine .txt span {
    margin: 20px 10px 10px 10px;
}
.Campaine .txt img {
    width: 2.5em;
    height: 1.1em;
    margin: 10px;
    border-radius: 10px;
}
.Campaine .slogan {
    width:10000px;
    margin-top: 100px;
    font-size: 100px;
    font-weight: 700;
    color: var(--color-main2);
    white-space: nowrap;
    animation:rolling; 
    animation-duration:12s; 
    animation-timing-function:linear; 
    animation-iteration-count:infinite;
}
@keyframes rolling {
    0% { transform:translate(0, 0) }
    100% { transform:translate(-1976px, 0) } 
}


@media screen and (max-width:1024px) {
    .Campaine {
        margin-top: 50px;
    }
    .Campaine .tit h2 {
        font-size: var(--txt-size-tit-mo);
        margin-bottom: 25px;
    }
    .Campaine .tit .photo {
        width: 200px;
        height: 200px;
    }
    .Campaine .tit span.circle_y {
        width: 22px;
        height: 22px;
        right: 10px;
    }
    .Campaine .tit span.circle_b {
        width: 40px;
        height: 40px;
    }
    .Campaine .txt {
        gap: 0;
        margin-top: 50px;
        font-size: 4vh;
    }
    .Campaine .txt span {
        margin: 10px 5px 5px 5px;
    }
    .Campaine .txt img {
        margin: 0;
    }
    .Campaine .slogan {
        margin-top: 50px;
        font-size: 50px;
    }    
    @keyframes rolling {
        0% { transform:translate(0, 0) }
        100% { transform:translate(-1339px, 0) } 
    }
}


.program {
    background-color: var(--color-main2);
    padding: 100px 0;
}
.program .wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.program h2 {
    color: var(--txt-color-tit);
    font-size: var(--txt-size-tit);
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1;
    margin-right: 20px;
}
.program .tab {
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: left;
}
.program .tab ul li {
    width: 270px;
    height: 55px;
    background-color: var(--txt-color-white);
    color: var(--txt-size-txt);
    border-radius: 50px;
    margin-top: 15px;
    line-height: 55px;
}
.program .tab ul li .tab_menu {
    width: 100%;
    text-align: left;
    padding-left: 20px;
    position: relative;
}
.program .tab ul li .tab_menu::after {
    position: absolute;
    right: 26px;
    top: 16px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_60_2180' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_60_2180)'%3E%3Cpath d='M14.8365 18.6634L13.7673 17.6191L18.6462 12.7401H2.5V11.2404H18.6558L13.7923 6.36139L14.8365 5.31714L21.5095 11.9904L14.8365 18.6634Z' fill='%233D3D3D'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.program .tab ul li:hover .tab_menu {
    font-weight: 700;
}
.program .tab ul li:hover .tab_menu::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_115_20' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_115_20)'%3E%3Cpath d='M15 19L13.575 17.6L18.175 13H2V11H18.175L13.6 6.4L15 5L22 12L15 19Z' fill='%233d3d3d'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.program .tab_detail .detail_list .list {
    position: relative;
    display: none;
    width: 700px;
    height: 450px;
}
.program .tab_detail .detail_list .list .photo {
    display: none;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border-radius: 35px;
}
.program .tab_detail .detail_list .list .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.program .tab_detail .detail_list .list .txt {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(61, 61, 61, 0.7);
    border-radius: 0 0 35px 35px;
    padding: 20px 30px 20px 30px;
}
.program .tab_detail .detail_list .list .txt h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--txt-color-white);
    white-space: nowrap;
}
.program .tab_detail .detail_list .list .txt p {
    color: var(--txt-color-white);
    font-weight: 100;
    letter-spacing: 0.02em;
}
.program .tab_detail .detail_list .list .txt a {
    position: absolute;
    right: 30px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    font-size: 0;
    line-height: 0;
    border: 1px solid var(--txt-color-w80);
    border-radius: 50%;
}
.program .tab_detail .detail_list .list .txt a::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_113_14' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='25' height='25'%3E%3Crect width='25' height='25' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_113_14)'%3E%3Cpath d='M11.7186 13.2813H5.729V11.7188H11.7186V5.72925H13.2811V11.7188H19.2707V13.2813H13.2811V19.2709H11.7186V13.2813Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.program .tab_detail .detail_list .list .txt a:hover {
    background-color: var(--color-main3);
    border-color: var(--color-main3);
}
/* li에 on클래스 */
.program .tab ul li[aria-selected="true"] {
    background-color: var(--color-main);
    color: var(--txt-color-white);
}
.program .tab ul li[aria-selected="true"] .tab_menu::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_60_2188' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_60_2188)'%3E%3Cpath d='M14.8365 18.6634L13.7673 17.6191L18.6462 12.7401H2.5V11.2404H18.6558L13.7923 6.36139L14.8365 5.31714L21.5095 11.9904L14.8365 18.6634Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.program .tab ul li[aria-selected="true"]:hover .tab_menu::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_115_20' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_115_20)'%3E%3Cpath d='M15 19L13.575 17.6L18.175 13H2V11H18.175L13.6 6.4L15 5L22 12L15 19Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.program .tab_detail .detail_list .list.on {
    display: block;
}
.program .tab_detail .detail_list .list.on .photo {
    display: block;
}
.program .tab_detail .detail_list .list.on .txt {
    display: block;
}
@media screen and (max-width:1300px) {
    .program .tab_detail .detail_list .list {
        width: 650px;
    }
}
@media screen and (max-width:1024px) {
    .program {
        padding: 50px 0;
    }
    .program .wrapper {
        display: block;
    }
    .program h2 {
        font-size: var(--txt-size-tit-mo);
        font-weight: 700;
    }
    .program .tab {
        margin: 20px 0 25px 0;
        font-size: 13px;
    }
    .program .tab ul {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .program .tab ul li {
        width: calc(50% - 5px);
    }
    .program .tab ul li .tab_menu {
        position: relative;
        width: 100%;
        bottom: 0;
        text-align: center;
        padding: 10px;
    }
    .program .tab ul li.pro2 .tab_menu {
        bottom: 0;
    }
    .program .tab ul li.pro3 .tab_menu {
        bottom: 0;
    }
    .program .tab ul li.pro4 .tab_menu {
        bottom: 0;
    }
    .program .tab ul li .tab_menu span::after {
        display: none;
    }
    .program .tab_detail .detail_list .list {
        width: auto;
        height: 400px;
    }
    .program .tab_detail .detail_list .list .photo {
        border-radius: 25px;
    }
    .program .tab_detail .detail_list .list .photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .program .tab_detail .detail_list .list .txt {
        border-radius: 0 0 25px 25px;
        padding: 15px 20px 15px 20px;
    }
    .program .tab_detail .detail_list .list .txt h3 {
        font-size: 18px;
        margin-bottom: 5px;
        color: var(--txt-color-white);
        white-space: nowrap;
    }
    .program .tab_detail .detail_list .list .txt h3 span {
        display: none;
    }
    .program .tab_detail .detail_list .list .txt  p br {
        display: none;
    }
    .program .tab_detail .detail_list .list .txt a {
        right: 20px;
        top: 15px;
        width: 25px;
        height: 25px;
    }
    .program .tab_detail .detail_list .list .txt a::after {
        width: 15px;
        height: 15px;
    }
}

.notice {
    margin-top: 100px;
}
.notice .wrapper {
    display: flex;
    position: relative;
}
.notice .tit {
    padding-right: 10%;
}
.notice .tit h2 {
    font-size: var(--txt-size-tit);
    font-weight: 700;
    margin: 0 20px 10px 0;
    line-height: 1;
    color: var(--txt-color-tit);
}
.notice .list {
    width: 1260px;
}
.notice .list .swiper ul li {
    width: 297px;
    border-radius: 25px;
    border: 1px solid #B3B3B3;
}
.notice .list .swiper ul li a .inner {
    padding: 30px;
}
.notice .list .swiper ul li strong {
    font-size: 18px;
}
.notice .list .swiper ul li.promotion strong {
    color: var(--color-main);
}
.notice .list .swiper ul li.event strong {
    color: var(--color-main3);
}
.notice .list .swiper ul li.announce strong {
    color: var(--color-main4);
}
.notice .list .swiper ul li a h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    height: 4.2em;
    margin: 15px 0 10px 0;
    overflow: hidden;
    color: var(--txt-color-tit);
}
.notice .list .swiper ul li a p {
    line-height: 1.4;
    height: 2.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notice .list .swiper ul li a span {
    display: block;
    margin-top: 45px;
}
.notice .list .swiper ul li:hover a h3 {
    color: var(--txt-color-white);
    font-weight: 400;
}
.notice .list .swiper ul li:hover a strong,
.notice .list .swiper ul li:hover a p,
.notice .list .swiper ul li:hover a span {
    color: var(--txt-color-white);
}
.notice .list .swiper ul li.promotion:hover {
    background-color: var(--color-main);
}
.notice .list .swiper ul li.event:hover {
    background-color: var(--color-main3);
}
.notice .list .swiper ul li.announce:hover {
    background-color: var(--color-main4);
}
.notice .btn_wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.notice .btn_wrap button {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #B3B3B3;
    font-size: 0;
    line-height: 0;
}
.notice .btn_wrap button::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    content: "";
}
.notice .btn_wrap button.btn_prev::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_50_1154' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_50_1154)'%3E%3Cpath d='M7.373 12.75L13.0693 18.4462L12 19.5L4.5 12L12 4.5L13.0693 5.55375L7.373 11.25H19.5V12.75H7.373Z' fill='%233D3D3D'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.notice .btn_wrap button.btn_next::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_44_2435' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect x='24' y='24' width='24' height='24' transform='rotate(-180 24 24)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_44_2435)'%3E%3Cpath d='M16.627 11.25L10.9308 5.55375L12 4.5L19.5 12L12 19.5L10.9307 18.4462L16.627 12.75L4.5 12.75L4.5 11.25L16.627 11.25Z' fill='%233D3D3D'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.notice .btn_wrap a {
    display: inline-block;
    border: 1px solid #B3B3B3;
    border-radius: 25px;
    padding: 10px 37px 10px 20px;
}
.notice .btn_wrap a span {
    position: relative;
}
.notice .btn_wrap a span::after {
    position: absolute;
    right: -22px;
    top: -3px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_44_2443' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_44_2443)'%3E%3Cpath d='M9.37492 10.6249H4.58325V9.37492H9.37492V4.58325H10.6249V9.37492H15.4166V10.6249H10.6249V15.4166H9.37492V10.6249Z' fill='%233D3D3D'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
}
.notice .btn_wrap button:hover,
.notice .btn_wrap a:hover {
    background-color: var(--color-main);
    color: var(--txt-color-white);
}
.notice .btn_wrap button.btn_prev:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_50_1154' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_50_1154)'%3E%3Cpath d='M7.373 12.75L13.0693 18.4462L12 19.5L4.5 12L12 4.5L13.0693 5.55375L7.373 11.25H19.5V12.75H7.373Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.notice .btn_wrap button.btn_next:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_44_2435' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect x='24' y='24' width='24' height='24' transform='rotate(-180 24 24)' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_44_2435)'%3E%3Cpath d='M16.627 11.25L10.9308 5.55375L12 4.5L19.5 12L12 19.5L10.9307 18.4462L16.627 12.75L4.5 12.75L4.5 11.25L16.627 11.25Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.notice .btn_wrap a:hover span::after {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_44_2443' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_44_2443)'%3E%3Cpath d='M9.37492 10.6249H4.58325V9.37492H9.37492V4.58325H10.6249V9.37492H15.4166V10.6249H10.6249V15.4166H9.37492V10.6249Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}
@media screen and (max-width:1024px) {
    .notice {
        margin-top: 50px;
    }
    .notice .wrapper {
        display: block;
    }
    .notice .tit {
        margin: 0 0 20px 0;
    }
    .notice .tit h2 {
        font-size: var(--txt-size-tit-mo);
        margin-bottom: 5px;
    }
    .notice .list .swiper ul li {
        width: 210px;
    }
    .notice .list .swiper ul li a {
        height: 210px;
    }
    .notice .list .swiper ul li a .inner {
        padding: 20px;
    }
    .notice .list .swiper ul li strong {
        font-size: 15px;
    }
    .notice .list .swiper ul li a h3 {
        font-size: 18px;
        margin: 10px 0 5px 0;
    }
    .notice .list .swiper ul li a p {
        display: none;
    }
    .notice .list .swiper ul li a span {
        display: block;
        margin-top: 45px;
    }
    .notice .btn_wrap {
        position: relative;
    }
    .notice .btn_wrap button {
        display: none;
    }
    .notice .btn_wrap a {
        display: block;
        padding: 9px 30px 7px 10px;
        border-radius: 25px;
        text-align: center;
        margin: 30px auto;
    }
    .notice .btn_wrap a span::after {
        width: 18px;
        height: 18px;
    }
}