html {
    scroll-behavior: smooth;
}

.content_cont {
    position: relative;
    background-color: #F9E2ED;
    overflow: hidden;
}

.content_cont.gradient {
    background: linear-gradient(175.34deg, #FFE7EF -1.56%, #F4E6FF 102.28%);
}

.content_cont .content_bg {
    position: absolute;
    left: 0;
    top: -8px;
    width: 100%;
    z-index: 1;
    display: flex;
}

.content_cont .content_img {
    z-index: 2;
}

/* 이벤트소개 */
.content_img.main_intro .btn_content_group {
    bottom: 4.059%;
    left: 0;
}

.content_img.main_intro .btn_content_group .btn_link {
    width: 39.867%;
    aspect-ratio: 1/0.408;
}

/* 이름검색섹션 */
.event_search_sect {
    padding-bottom: 8.533%;
}

/* 이벤트 요약 */
.content_img.main_eventSum {
    padding-top: 10.159%;
    margin-bottom: 3.81%;
}

/* 참여가능 상품 슬라이드 */
.content_img.main_productSlide {
    margin-bottom: 3.81%;
}

.content_img.main_productSlide .deco_img {
    position: absolute;
    display: flex;
    width: 33.016%;
    aspect-ratio: 1/0.942;
    bottom: -10%;
    left: -9.524%;
}

.product_swiper_box {
    position: absolute;
    left: 0;
    width: 100%;
    top: 29.618%;
    height: 68.718%;
    padding: 0 0.8%;
    overflow: hidden;
}

#productSwiper {
    height: 100%;
}

#productSwiper .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    filter: blur(5px);
}

#productSwiper .swiper-slide.swiper-slide-active {
    filter: blur(0);
}

#productSwiper .swiper-slide .product_img {
    display: flex;
}

/* [추후] 상품 이미지 확정에 따라 height 봐서 조정 필요할 것으로 보임 */
#productSwiper .swiper-slide.swiper-slide-active .product_img {
    max-height: 75%;
}

#productSwiper .swiper-slide .product_name {
    font-size: 1rem;
    color: #E95A91;
    border: 1px solid #E95A91;
    border-radius: 1000px;
    padding: 4.167% 6%;
    text-align: center;
    display: none;
    aspect-ratio: 1/0.275;
    font-weight: 500;
}

#productSwiper .swiper-slide.swiper-slide-active .product_name {
    display: block;
}

/* 응모가능 이름 */
.event_name_wrap {
    position: relative;
    z-index: 2;
}

.event_name_wrap .event_name_input {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 13.915%;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 9.067% 0 14.133%;
}

.event_name_input .btn_kancho {
    width: 19.097%;
    aspect-ratio: 1/1;
}

.event_name_input .event_name {
    background-color: transparent;
    width: 80.903%;
    color: #fff;
    font-size: 1rem;
    padding: 1.321rem 0;
}

.event_name_input .event_name:focus-visible {
    outline: none;
}

.event_name_input .event_name::placeholder {
    color: #fff;
    opacity: 1;
    font-family: 'jalnan', sans-serif !important;
}

.event_name_wrap .event_name_swiper {
    position: absolute;
    left: 0;
    top: 27.385%;
    padding: 0 10.4%;
    background: url('/static/app_www/base/img/bg_name_slide.png') center / 85.067% no-repeat;
    z-index: 3;
    width: 100%;
    aspect-ratio: 1/0.864;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.event_name_swiper .btn_swiper {
    position: absolute;
    top: 54.867%;
    background-color: transparent;
    width: 6.27%;
    aspect-ratio: 1/1;
    display: flex;
}

.event_name_swiper .btn_swiper.prev {
    left: 0.627%;
}

.event_name_swiper .btn_swiper.next {
    right: 0.627%;
    transform: rotate(180deg);
}

.event_name_swiper .name_swiper_head {
    width: 100%;
    display: flex;
    position: relative;
    z-index: 2;
}

.event_name_swiper .name_swiper {
    margin-top: -4px;
    position: relative;
    width: 100%;
    aspect-ratio: 1/0.909;
}

.event_name_swiper .name_swiper .bg_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}

#KanchoNames {
    width: 100%;
    height: 100%;
}

#KanchoNames .swiper-slide.in_name {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    align-content: flex-start;
    align-items: flex-start;
    padding: 0.673%;
    border-radius: 0 0 6% 6%;
    overflow: hidden;
}

#KanchoNames .swiper-slide.empty {
    display: flex;

}

#KanchoNames .swiper-slide.in_name::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url("/static/app_www/base/img/img_nameSwiper_grid.png") center / 100% no-repeat;
}

#KanchoNames .name_box {
    width: calc(100% / 6);
    aspect-ratio: 1/0.909;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

#KanchoNames .name_box.active {
    color: #805DA5;
    font-weight: 700;
    background-color: #F6E7FD;
}

.content_img.main_nameSearch {
    width: 100%;
    padding: 0 1.333% 0 7.467%;
}

.content_img.main_nameSearch .btn_content_group {
    bottom: 0;
    left: 0;
}

.content_img.main_nameSearch .btn_content_group .btn_kancho {
    width: 84%;
    aspect-ratio: 1/0.2;
}

/* 참여방법 */
.content_img.main_guide .btn_content_group {
    left: 0;
    bottom: 4.301%;
    padding: 0 8%;
}

.content_img.main_guide .btn_content_group .btn_kancho {
    aspect-ratio: 1/0.2;
}

/* 경품안내 */
.content_img.main_giftInfo {
    background-color: #FAE2EC;
}

.content_img.main_giftInfo .gift_btn_group {
    gap: 0;
    top: 15.69%;
}

/* [추후] 이미지 변경에 따라 top값 재계산 필요 */
.content_img.main_giftInfo .gift_btn_group.gift_none {
    top: 15.468%;
}

/* [추후] 이미지 변경에 따라 top값 재계산 필요 */
.content_img.main_giftInfo .gift_btn_group .btn_kancho {
    width: 42.4%;
    aspect-ratio: 1/0.384;
}

/* 랭킹 */
.event_ranking_sect {
    margin-bottom: 10.667%;
}

.event_ranking_sect .event_ranking_area {
    margin-bottom: 6.349%;
}

.ranking_btn_group {
    position: relative;
}

.ranking_btn_group .btn_kancho {
    aspect-ratio: 1/0.2;
    background: url("/static/app_www/base/img/img_mainRanking_btn.png") center / cover no-repeat;
}

.ranking_btn_group .btn_deco {
    position: absolute;
}

.ranking_btn_group .btn_deco.deco01 {
    width: 8.254%;
    left: -6.984%;
    bottom: 15.079%;
}

.ranking_btn_group .btn_deco.deco02 {
    width: 13.651%;
    right: -9.524%;
    top: -50.413%;
}

/* 응모현황 */
.event_join_sect {
    margin-bottom: 5.299%;
}

.content_img.join_title {
    margin-bottom: 5.333%;
}

.event_join_area {
    margin-bottom: 5.333%;
    aspect-ratio: 1/0.8533;
    width: 100%;
    padding: 0 10.4%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("/static/app_www/base/img/bg_main_join.png") center / 97.33% no-repeat;
}

.event_join_area .event_join_list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.347%;
    width: 100%;
    aspect-ratio: 1/1;
}

.event_join_list .join_item {
    width: calc(97.306% / 3);
    aspect-ratio: 1/1;
    border: clamp(2px, 0.533vw, 4px) solid #fff;
    display: flex;
    background-color: #F2DCF3;
    overflow: hidden;
}

.event_join_list .join_item.all_empty {
    border: none;
    width: 100%;
}

.event_join_list .join_item.empty {
    align-items: center;
    justify-content: center;
}

.event_join_list .join_item.empty img {
    width: 41.667%;
    display: block;
}

.event_join_list .join_item:first-child {
    border-top-left-radius: clamp(16px, 4.267vw, 32px);
}

.event_join_list .join_item:nth-of-type(3) {
    border-top-right-radius: clamp(16px, 4.267vw, 32px);
}

.event_join_list .join_item:nth-of-type(7) {
    border-bottom-left-radius: clamp(16px, 4.267vw, 32px);
}

.event_join_list .join_item:nth-of-type(9) {
    border-bottom-right-radius: clamp(16px, 4.267vw, 32px);
}

.join_btn_group .btn_kancho {
    aspect-ratio: 1/0.2;
    background: url("/static/app_www/base/img/img_mainJoin_btn.png") center / cover no-repeat;
}