.main-floating-wrap{position: relative;z-index: 210;}
body:is(.gnb-open, .srch-open) .main-floating-wrap{z-index: 10;}
.main-floating-inner{position: fixed;top: 50%;right: 20px;z-index: 100;transform: translateY(-50%);}
.main-floating-inner > ul{display: flex;flex-direction: column;gap: 6px;}
.main-floating-inner > ul > li > a{display: block;width: 60px;height: 60px;border-radius: 50%;background-size: 100%;background-position: center;background-repeat: no-repeat;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);transition: transform 0.3s ease,box-shadow 0.3s ease;overflow: hidden;}
.main-floating-inner > ul > li > a:hover{transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);}
.main-floating-inner > ul > li > a:active{transform: translateY(0);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);}
.top-button > a{background-image: url(../img/common/ico-scroll-top@2x.png);}
.notication-button > a{background-image: url(../img/common/ico-notication@2x.png);}
.notication-wrap{box-sizing: border-box;position: absolute;top: 50%;right: 0;display: none;width: 386px;padding: 30px 20px 68px;background-color: rgba(0,0,0,.2);border: 1px solid rgba(255,255,255,.2);border-radius: 10px;transform: translatey(-50%);backdrop-filter: blur(100px)}
.notication-wrap > p{position: relative;display: flex;gap: 5px;margin-bottom: 39px;padding-bottom: 16px;border-bottom: 1px solid rgba(255,255,255,.1);font-weight: 700;font-size: 22px;line-height: 28px;letter-spacing: -0.02em;color: #fff;}
.notication-wrap > p:before{content: '';width: 28px;height: 28px;background: url(../img/main/noti-bell@2x.png) no-repeat center/contain;}
.notication-wrap > .notication-con{position: relative;}
.notication-wrap .noti-close{position: absolute;top: 30.74px;right: 19.43px;width: 24px;height: 24px;margin: auto;background: url(../img/main/noti-close.png) no-repeat center;}
.notication-wrap .notication-swiper{position: relative;}
.notication-wrap .noti-swiper{max-width: calc(100% - 28px);margin: 0 auto;}
.notication-wrap .noti-swiper .swiper-slide > a{display: block;max-width: 316px;max-height: 387px;aspect-ratio: 316/386.22;margin: 0 auto;border-radius: 4.4px;overflow: hidden;}
.notication-wrap .noti-swiper .swiper-slide > a > img{width: 100%;height: 100%;object-fit: cover;object-position: center;transition: transform 0.5s ease;}
.notication-wrap .noti-swiper .swiper-slide > a:hover > img{transform: scale(1.1);}
.notication-wrap .noti-control .navigation{position: absolute;top: 50%;width: 50px;height: 50px;background-color: rgba(255, 255, 255, 0.2);border-radius: 50%;transform: translatey(-50%);cursor: pointer;z-index: 1;backdrop-filter: blur(20px);}
.notication-wrap .noti-control .navigation:after{content: '';position: absolute;inset: 0;width: 8px;height: 15px;margin: auto;background: url(../img/main/noti-arrow.png) no-repeat center;}
.notication-wrap .noti-control .navigation.prev{left: -10px;}
.notication-wrap .noti-control .navigation.next:after{transform: rotate(180deg);}
.notication-wrap .noti-control .navigation.next{right: -10px;}
.notication-wrap .noti-control .pagination{position: absolute;bottom: -41px;left: 0;width: 100%;display: flex;justify-content: center;align-items: center;gap: 5px;}
.notication-wrap .noti-control .pagination span{width: 12px;height: 12px;margin: 0;background-color: transparent;border: 1px solid #fff;opacity: 1;transition: all 0.5s ease;}
.notication-wrap .noti-control .pagination span.swiper-pagination-bullet-active{width: 34px;background-color: #C10230;border-color: #C10230;border-radius: 9px;}
.notication-button.noti-open > .notication-wrap{display: block;}

.notication-wrap .noti-swiper .swiper-slide p {display: block;max-width: 316px;max-height: 387px;aspect-ratio: 316/386.22;margin: 0 auto;border-radius: 4.4px;overflow: hidden;}
.notication-wrap .noti-swiper .swiper-slide p img {width: 100%;height: 100%;object-fit: cover;object-position: center;transition: transform 0.5s ease;}
.notication-wrap .noti-swiper .swiper-slide p:hover > img{transform: scale(1.1);}

@media(max-width:768px){
	.notication-wrap{top: unset;bottom: calc(-50dvh + 51px);right: -9px;width: 100dvw;border-radius: 10px 10px 0 0;transform: translatey(0);}
	.notication-wrap > p{gap: 3px;font-size: 21px;}
	.notication-wrap > p:before{width: 27px;height: 27px;}
	.main-floating-inner{right: 9px;}
	.main-floating-inner > ul{gap: 3px;}
	.main-floating-inner > ul > li > a{width: 50px;height: 50px;}
}