@charset "UTF-8";

.wrap-notice{margin: 165px 0 0 0}
.wrap-notice > h1{font-size: 70px; font-family: "Gmarket Medium"; /*20251110color: rgba(255,255,255,.1);*/  color: rgba(255, 255, 255, .45); margin-bottom: 28px; opacity: 0; visibility: hidden; filter: blur(50px); -webkit-filter:blur(50px); transition: all .7s;}
.mCustomScrollbar .wrap-notice > h1,
.wrap-notice.on > h1{opacity: 1; visibility: visible; filter: blur(0); -webkit-filter: blur(0);}
.wrap-notice > h1 span{font-family: "Gmarket Bold"; color: white;}
.notice-tab{position: relative; border-bottom: 1px solid white; padding-bottom: 25px;;}
.notice-tab li{display: inline-block; margin-right: 30px; opacity: 0; visibility: hidden; transition: all .7s;}
.notice-tab li:nth-child(2){transition-delay: .1s;}
.notice-tab li:nth-child(3){transition-delay: .2s;}
.notice-tab li:nth-child(4){transition-delay: .3s;}
.notice-tab li:nth-child(5){transition-delay: .4s;}
.notice-tab li:nth-child(6){transition-delay: .5s;}
.notice-tab li:nth-child(7){transition-delay: .6s;}
.notice-tab li:nth-child(8){transition-delay: .7s;}
.mCustomScrollbar .notice-tab li,
.wrap-notice.on .notice-tab li{opacity: 1; visibility: visible;}
.notice-tab li:last-child{margin-right: 0;}
.notice-tab li button{color: #ffffff; font-size: 30px; font-family: "Gmarket Light";}
.notice-tab li.on button,
.notice-tab li button:hover{font-family: "Gmarket Medium";}
.notice-tab li a{display: none; position: absolute; right: 0; top: -7px; width: 46px; height: 46px; text-indent: -9999px; background: url(../images/notice_more.png) no-repeat center center; transition: all .5s;}
.notice-tab li a:hover{transform: rotate(360deg);}
.notice-tab li.on a{display: block;}
.wrap-notice > ul > li{display: none;}
.wrap-notice > ul > li.on{display: block;}
.wrap-notice .nodata{text-align: center; font-size: 20px; border-bottom: 1px solid rgba(255,255,255,.5); font-family: "Gmarket Medium"; color: white; padding: 20px 0;}
.wrap-notice .list li{border-bottom: 1px solid rgba(255,255,255,.2); position: relative; left: -100px; opacity: 0; visibility: hidden; transition: all .7s;}
.wrap-notice .list li:nth-child(2){transition-delay: .1s;}
.wrap-notice .list li:nth-child(3){transition-delay: .2s;}
.wrap-notice .list li:nth-child(4){transition-delay: .3s;}
.wrap-notice .list li:nth-child(5){transition-delay: .4s;}
.wrap-notice .list li:nth-child(6){transition-delay: .5s;}
.wrap-notice .list li:nth-child(7){transition-delay: .6s;}
.wrap-notice .list li:nth-child(8){transition-delay: .7s;}
.mCustomScrollbar .wrap-notice .list li,
.wrap-notice.on .list li{left: 0; opacity: 1; visibility: visible;}
.wrap-notice .con a{font-size: 24px; font-family: "Noto Regular"; color: white; padding: 15px 0; display: block;}
.wrap-notice .con a::after{content:""; display: table; clear: both;}
.wrap-notice .con p{float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: calc(100% - 120px);}
.wrap-notice .con p span{position: relative;}
.wrap-notice .con p span::after{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: white; transition: all .7s;}
.wrap-notice .con a:hover p span::after{width: 100%;}
.wrap-notice .con .date{float: right; font-size: 16px; font-family: "Play Bold"; display: block; line-height: 36px;}

@media all and (max-width: 1500px) {
    .wrap-notice > h1{font-size: 40px;}
    .notice-tab li{margin-right: 10px;}
    .notice-tab li button{font-size: 25px;}
    .notice-tab li a{width: 27px; height: 28px; top: -2px;}
    .wrap-notice .con a{font-size: 20px;}
}

@media all and (max-width: 1023px) {
    .wrap-notice{margin: 55px 0 40px 0;}
    .wrap-notice > h1{font-size: 30px;}
    .notice-tab li{margin-right: 5px;}
    .notice-tab li button{font-size: 20px;}
    .wrap-notice .con a{padding: 10px 0;}
}

@media all and (max-width: 480px) {
    .wrap-notice .con a{font-size: 15px;}
    .wrap-notice .con .date{font-size: 12px; line-height: 22px;}
}