@media screen and (min-width:1024.1px) {
    #header{background-color:#fff}
}

/* -------------------------------- clover zone  -------------------------------- */
/* 타이틀 */
.clover_sec .inner{max-width:940px}
.clover_sec[data-layout="title"] {height:56.5rem;background:url(/static/images/zone/zone_bg.png) no-repeat center/ cover;position:relative;overflow:hidden}
.clover_sec[data-layout="title"] .inner{height:100%;}
.clover_sec[data-layout="title"] .inner::after{content:'';display:block;width:92%;max-width:865px;padding-bottom:92%;background:url(/static/images/zone/moon.svg) no-repeat top center/ contain;position:absolute;bottom:17%;right:50%;transform:translate(50%, 100%); z-index:0;}
.clover_sec[data-layout="title"] .sec_tit_wrap {padding:0 0 3.5rem}
.clover_sec[data-layout="title"] .sec_tit_wrap .sec_tit{color:#fff}
.clover_sec .character_wrap{width:100%;position:absolute;bottom:11.5%;right:50%;transform: translateX(50%);z-index:3;}
.clover_sec .bubble{color:#FFF;text-align:center;font-size:1.25rem;font-weight:400;line-height:135%;margin:0 auto;display:flex;justify-content:center;align-items:center;width:100%;max-width:630px;height:118px;padding:32px 20px;position:relative}
/*.clover_sec .bubble::after{content:'';display:block;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:url(/static/images/zone/bubble_bg.svg) no-repeat center/contain}*/
.clover_sec .bubble p{position:relative;z-index:2}
.clover_sec .bubble::before{content:'';display:block;width:0;height:0;border-top:10px solid #ffffff4d;border-bottom:6px solid transparent;border-right:6px solid transparent;border-left:6px solid transparent;position:absolute;bottom:0;left:50%;transform:translate(-50%,100%);backdrop-filter:blur(10px);z-index:2}
.clover_sec .bubble::after{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%,0);border-radius:1.5rem;background:#ffffff4d;backdrop-filter:blur(10px);z-index:0}
.clover_sec .character{width:18rem;margin:2rem auto 0}
.clover_sec .slider_wrap{width:100%;height:72px;margin:0 auto;border-radius:1.5rem;background:#ffffff4d;backdrop-filter:blur(10px)}
.clover_sec .swiper-container,
.clover_sec .swiper-wrapper{height:100%}
.clover_sec .swiper-container .swiper-slide{height:72px!important;padding:20px 20px 20px 32px;display:flex;justify-content:flex-start;align-items:center;}
.clover_sec .swiper-container .swiper-slide p{width:100%;display:block;overflow:hidden;color:#FFF;text-overflow:ellipsis;font-size:1rem;font-weight:400;line-height:72px;padding-right:80px;white-space:nowrap}
.clover_sec .swiper_control_wrap{display:inline-flex;z-index:5;flex-direction:row;align-items:center;justify-content:center;gap:0;border-radius:100px;background:#fff9;backdrop-filter:blur(10px);position:absolute;top:50%;right:1.25rem;transform:translateY(-50%);padding:6px}
.clover_sec .swiper-autoplay-control-wrap{margin-left:0}
.clover_sec .swiper-autoplay-control-wrap button{display:block;width:1.25rem;height:1.25rem;border:0;background:transparent;cursor:pointer}
.clover_sec .swiper-autoplay-control-wrap button:before{content:'';display:block;width:1.25rem;height:1.25rem}
.clover_sec .swiper-autoplay-control-wrap button[aria-pressed="false"]:before{background:url(/static/images/common/ico_pause.svg) no-repeat center/100% auto}
.clover_sec .swiper-autoplay-control-wrap button[aria-pressed="true"]:before{background:url(/static/images/common/ico_play.svg) no-repeat center/100% auto}
.clover_sec .swiper_control_wrap .swiper-button-prev,
.clover_sec .swiper_control_wrap .swiper-button-next{width:1.25rem;height:1.25rem;margin:0;position:relative;left:unset;top:unset;right:unset;bottom:unset}
/*웹x*/
/*.clover_sec .swiper_control_wrap .swiper-button-prev{background:url(/static/images/common/arrow_slide.svg) no-repeat center/cover;transform:rotate(180deg)}*/
/*.clover_sec .swiper_control_wrap .swiper-button-next{background:url(/static/images/common/arrow_slide.svg) no-repeat center/cover}*/
.clover_sec .swiper_control_wrap{gap:0.5rem}
.clover_sec .swiper_control_wrap .swiper-button-prev {background:url(/static/images/temp/swiper_nav_next_bk.svg) no-repeat center/cover;transform: scaleX(-1)}
.clover_sec .swiper_control_wrap .swiper-button-next {background:url(/static/images/temp/swiper_nav_next_bk.svg) no-repeat center/cover}
.clover_sec .swiper_control_wrap .swiper-button-prev.swiper-button-disabled {background:url(/static/images/temp/swiper_nav_prev_bk.svg) no-repeat center/cover;transform: scaleX(1)}
.clover_sec .swiper_control_wrap .swiper-button-next.swiper-button-disabled {background:url(/static/images/temp/swiper_nav_prev_bk.svg) no-repeat center/cover;transform: scaleX(-1)}
.clover_sec .swiper_control_wrap .swiper-button-disabled[aria-disabled="true"] {pointer-events: none; cursor: default;opacity:1}

/* 컨텐츠 */
.clover_sec[data-layout="cont"] .inner{padding:3.5rem 0 6.25rem}
.clover_sec .tit_wrap{padding:0 .5rem;margin-bottom:2rem;position:relative}
.clover_sec .campaign_wrap .tit_wrap{margin-bottom:1.25rem;}
.clover_sec .tit_ico h3{display:flex;justify-content:flex-start;align-items:center;gap:.75rem;color:#222;font-size:1.75rem;font-weight:700;line-height:135%}
.clover_sec .tit_ico i{width:2rem;height:2rem;background-repeat:no-repeat;background-size:100% auto;background-position:center}
.clover_sec .mission_wrap .tit_ico i{background-image:url(/static/images/zone/ico_tit_01.png)}
.clover_sec .campaign_wrap .tit_ico i{background-image:url(/static/images/zone/ico_tit_02.png)}
/* 미션 컨텐츠 */
.clover_sec .mission_wrap{margin:0 auto 2.5rem}
.clover_sec .mission_status{border-radius:1.875rem;background:#F5F7FB;padding:2rem 2.5rem;margin:0 auto 2.5rem}
.clover_sec .check_wrap{display:flex;justify-content:space-between;align-items:center;flex-direction:row}
.clover_sec .check_wrap .check_wrap{display:flex;justify-content:space-between;padding:2.25rem 1.25rem 2.25rem 2rem;text-align:left}
.clover_sec .check_wrap p{color:  #222;font-size:1.5rem;font-weight: 700;line-height: 135%; }
.clover_sec .check_list{display:flex;justify-content:flex-end;align-items:center;gap:1rem;flex-direction:row;padding:0 8px;}
.clover_sec .check_list li{position:relative}
.clover_sec .check_list li .icon{width:3.5rem;height:3.5rem;border-radius:100%;background-repeat: no-repeat;background-position:center;background-size:contain;display:block;background-image: url(/static/images/temp/zone_check_off.png)}
/*웹x*/
.clover_sec .check_list li .icon.on {background-image: url(/static/images/zone/check_on.png)}
/*.clover_sec .check_list li.off figure{background-image: url(/static/images/zone/check_off.png)}*/
/*.clover_sec .check_list li:nth-of-type(5).off figure{background-image: url(/static/images/zone/check_last_off.png)}*/
/*.clover_sec .check_list li:nth-of-type(5).on figure{background-image: url(/static/images/zone/check_last_on.png)}*/
.clover_sec .mission_status [class*="btn_type_"]{width:100%;margin:2rem auto 0;}
.clover_sec .mission_status [class*="btn_type_"][aria-disabled="true"] {border:1px solid rgba(45, 84, 173, 0.2); color:rgba(45, 84, 173, 0.8); background-color:#fff}
.clover_sec .mission_list{border-radius:1.875rem;background:#F5F7FB;padding:2.5rem 2.5rem;position:relative;overflow:hidden}
.clover_sec .mission_list > li a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;width:100%;}
.clover_sec .mission_list .txt_box{flex:1}
.clover_sec .mission_list .txt_box strong{color:#5372B9;font-size:1rem;font-weight:400;line-height:135%}
.clover_sec .mission_list .txt_box p{overflow:hidden;color:#222;text-overflow:ellipsis;font-size:1.25rem;font-weight:400;line-height:135%}
.clover_sec .mission_list i[class*='ico_']{width:3.5rem;height:3.5rem;background-size:60% auto;background-repeat:no-repeat;background-position:center;border-radius:100%;background-color:#fff}
.clover_sec .ico_join{background-image:url(/static/images/zone/ico_join.png)}
.clover_sec .ico_step{background-image:url(/static/images/zone/ico_step.png)}
.clover_sec .ico_photo{background-image:url(/static/images/zone/ico_photo.png)}
.clover_sec .ico_like{background-image:url(/static/images/zone/ico_like.png)}
.clover_sec .ico_news{background-image:url(/static/images/zone/ico_news.png)}
.clover_sec .clover{display:flex;justify-content:center;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:18.75rem;background-color:#FFF}
.clover_sec .clover .ico_clover{width:18px;height:18px;background:url(/static/images/common/ico_point_green.svg) no-repeat center / 100% auto}
.clover_sec .clover span{display:block;font-size:1rem;font-weight:500;line-height:1;color:#545454;text-align:center}
.clover_sec .mission_list .no_list{padding:1rem;align-items:flex-start}
.clover_sec .mission_list .no_list h3{color:#222;font-size: 1.5rem;font-weight: 700;line-height: 135%;text-align:left;z-index: 10;}
.clover_sec .mission_list .no_list::after{content:'';display:block;width:11.25rem;aspect-ratio:18/17;background: url(/static/images/main/main_character_01.svg) no-repeat center right /auto 100%; position:absolute;;top:calc(1.375rem - 2.5rem);right:calc(5.5rem - 2.5rem);}

/*리스트타입*/
.clover_sec .campaign_wrap .list{display:flex;gap:1rem;flex-wrap:wrap}
.clover_sec .campaign_wrap .list li{width:calc((100% - 1rem)/2); aspect-ratio: 328/130;/*height:11.375rem*/}
.clover_sec .campaign_wrap li.campaign{position:relative;padding:1.5rem 4.5rem 1.5rem 2.5rem;background:#F5F7FB;border-radius:1.875rem}
.clover_sec .campaign_wrap li.campaign::after{content:'';display:block;width:2rem;height:2rem;background:url(/static/images/common/ico_layer_right.png) no-repeat center/100% auto;position:absolute;top:50%;right:2rem;transform:translateY(-50%)}
.clover_sec .campaign_wrap li.campaign a{width:100%;height:100%;display:flex;justify-content:flex-start;align-items:center;gap:1.5rem}
.clover_sec .campaign_wrap li.campaign a figure{width:10rem; aspect-ratio: 68/100;/*height:6.875rem*/background-size:cover;background-repeat:no-repeat;background-position:center right;border-radius:1.25rem;border:1px solid #EAEEF7}
.clover_sec .campaign_wrap li.campaign a .list_title{flex:1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#222;font-size:1.25rem;font-weight:600;line-height:135%;width:calc(100% - 8.5rem);float:left}
.clover_sec .campaign_wrap li.event a{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%;/*height:11.375rem*/padding:2.5rem ;border-radius:1.875rem;background-size:cover;background-repeat:no-repeat;background-position:center right}
.clover_sec .campaign_wrap li.event .txt_box{width:100%}
.clover_sec .campaign_wrap li.event .list_title p{font-size:1.5rem;font-weight:700;color:#222;line-height:135%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.clover_sec .campaign_wrap li.event .list_date{margin-top:1rem;font-size:1rem;color:#222 /*웹#888*/}


/*접근성 수정*/
.clover_sec .campaign_wrap li.campaign .img {width:10rem;height:6.875rem;background-size:cover;background-repeat:no-repeat;background-position:center;border-radius:1.25rem;border:1px solid #EAEEF7}

@media screen and (max-width:1024px) {
    .clover_sec .tit_ico h3{font-size:1.5rem}
    .clover_sec[data-layout="title"] {height:610px;}
    .clover_sec[data-layout="title"] .inner{padding:1.34rem 0}
    .clover_sec[data-layout="title"] .inner::after{max-width:unset;width:580px;padding-bottom:0;height:580px;bottom:160px}
    .clover_sec .slider_wrap{height:44px;border-radius:1rem}
    .clover_sec .swiper-container .swiper-slide{height:44px!important;padding:10px 8px 10px 16px}
    .clover_sec .bubble{width:77.78%;padding:1.67rem;height:78px;min-width:max-content;font-size:1.16rem}
    .clover_sec .character_wrap{bottom:120px}
    .clover_sec .character{width:230px;margin:2.67rem auto 0}
    .clover_sec[data-layout="cont"]{margin-top:-3.34rem;background-color:#fff;border-radius:30px 30px 0 0;box-shadow:5px 5px 30px 2px #0040991f}
    .clover_sec .mission_status{padding:2.33rem 1.66rem 1.66rem}
    .clover_sec .check_wrap{flex-direction:column;align-items:flex-start;gap:1rem}
    .clover_sec .check_list{padding:0 1rem;justify-content:space-between;width:100%}
    .clover_sec .mission_list{padding:0.8rem 2rem}
    .clover_sec .mission_list > li a{padding:1.66rem 0}
    .clover_sec .mission_list .no_list{padding:1.66rem 0}
    .clover_sec .mission_list .no_list::after{width:10rem;right:calc(2.2rem - 2rem);top:0;background-position:bottom center}
    .clover_sec .campaign_wrap {margin-bottom: 11rem}
    .clover_sec .campaign_wrap li.campaign{padding:2rem 4rem 2rem 2rem}
    .clover_sec .campaign_wrap li.campaign a{gap:1.34rem}
    .clover_sec .campaign_wrap li.campaign a .list_title{-webkit-line-clamp:max(2)}
    .clover_sec .campaign_wrap li.campaign::after{right:1.34rem}
    .clover_sec .campaign_wrap li.event a{padding:2rem}
    .clover_sec .campaign_wrap li.event .list_title p {font-size: 1.33rem;}
}/* sm~md */
@media screen and (max-width:680px) {
    .clover_sec .campaign_wrap .list li{width:100%;/*height:14rem;aspect-ratio:unset;*/}
    .clover_sec .campaign_wrap li.campaign{height:auto;aspect-ratio:unset;}
}/* sm */
@media screen and (max-width:360px) {
    .clover_sec[data-layout="title"] {background:url(/static/images/zone/zone_bg_mo.png) no-repeat center bottom/ auto 100%}
}/* sm */
@media (hover:hover) {
}/* hover */

@keyframes rotate {
    to{transform:translate(50%, 100%) rotate(0)}
    from{transform:translate(50%, 100%) rotate(360deg)}
}
/* -------------------------------- clover zone end -------------------------------- */