CSS 셀렉터 개수 제한(4개 이하)

좋은 예시)s\sobang\event\2025\01090002\style.css

@charset "euc-kr";

:root{
    --drop-shadow : drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
    --point: #ff075a
}

/* settings */
.evSection:not(.evtoggleWarning,.evCon1) { padding: 160px 0; } 
.evSection:not(.event){background-size: auto 100%;}
.eventWrap .evSection.fff, .eventWrap .evSection .fff, .fff { color: #fff !important; } 
.eventWrap .evSection .lecture { margin:0 auto; color: #000; } 
.eventWrap .point{color:var(--point)}

/* text */
.eventWrap .tiny {opacity: 0.3;} 
.evSection:not(.event) .con_tit { margin-bottom: 70px; }
.evSection:not(.event) .con_tit b span{color: #4f6eff;}
.evSection:not(.event) .con_tit .mini_tit {color: var(--point);margin-bottom: 20px;}

/* swiper */
.swiper_common_wrap {position: relative;} 
.swiper_common_wrap .swiper_common.swiper-initialized { position: relative; overflow: hidden; margin: 0 auto; } 
/* swiper - destroy */
.swiper_common_wrap.type-d .swiper-wrapper {justify-content: space-between;} 
/* swiper - pagination */
.swiper_common_wrap .swiper-pagination { position: relative; display: flex; justify-content: center; top: auto; bottom: auto; margin-top: 15px; z-index: 2; } 
.swiper_common_wrap .swiper-pagination-bullet{width: 10px;height: 10px;}
.swiper_common_wrap .swiper-pagination-bullet-active{background-color:var(--point);width: 20px;border-radius: 30px;}
/* swiper - button */
.swiper_common_wrap [class*="swiper-button-"]:after { font-size: 0; } 
.swiper_common_wrap [class*="swiper-button-"].swiper-button-disabled { opacity: 1; } 
.swiper_common_wrap .arrow {position: absolute;top: 50%;transform: translate(0, calc(-50%));left: 110px;z-index: 2;background: url('https://image.megagong.net/m/2025/0109_rara1012/con3_arrow.png') no-repeat center;width: 28px;height: 49px;background-size: contain;} 
.swiper_common_wrap .arrow.swiper-button-next {transform: rotate(180deg) translate(0, calc(50%));left: auto;right: 110px;} 

/* contents */
.evCon1{background: #000b14 url(https://image.megagong.net/m/2025/0109_rara1012/con1_bg.jpg) no-repeat center 0;padding: 100px 0 120px;}
.evCon1 .top_text{ letter-spacing: .8rem; }
.evCon1 h3{font-size: 100px;font-weight: 900;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 40px;line-height: 1;margin: 40px auto 50px;}
.evCon1 h3 ul{ gap: 10px; align-items: flex-end; }
.evCon1 h3 .dot{ display: block; width: 25px; height: 25px; background: var(--point); border-radius: 50%; }
.evCon1 .home {background: var(--point);width: 305px;height: 45px;margin: 0 auto;display: flex;align-items: center;justify-content: center;border-radius: 45px;}

.evCon2{background: #fff url(https://image.megagong.net/m/2025/0109_rara1012/con2_bg.jpg) no-repeat center 0;}
.evCon2 .under{border-bottom: 2px solid;line-height: 1.4;}
.evCon2 .arrow_box{ gap: 17px; align-items: center; margin-bottom: 55px;}
.evCon2 .arrow_box li{ flex: 1; background: #ededed; border-radius: 10px; height: 270px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;position: relative;}
.evCon2 .arrow_box li p:last-child{ margin-top: 30px;}
.evCon2 .arrow_box li strong{ display: block; margin: 0 auto 10px; width: fit-content;}
.evCon2 .arrow_box .point_box{ width: 410px; height: 355px; flex: none; border: 3px solid var(--point); background: #0e254b; color: #fff;}
.evCon2 .arrow_box .last_box::before, 
.evCon2 .arrow_box .point_box::before{content: '';display: block;position: absolute; top: 50%; transform: translate(0, calc(-50%)); left: -35px; z-index: 2; background: url('https://image.megagong.net/m/2025/0109_rara1012/con2_arrow.png') no-repeat center; width: 61px; height: 85px; background-size: contain;filter: var(--drop-shadow);}

.evCon3{background-color: #0e254b;color: #fff;}
.evCon3 .under{position: relative;z-index: 2;}
.evCon3 .under::before{content: '';display: block;background: var(--point);position: absolute;left: 50%;transform: translateX(-50%);height: 14px;width: 105%;bottom: 7px;z-index: -1;}
.evCon3 .bookSlider .swiper-wrapper{align-items: stretch;}
.evCon3 .bookSlider .swiper-slide{height: auto;display: flex;align-items: center;justify-content:center;background: #fff;border-radius: 10px;}
.evCon3 .bookSlider .tiny{margin-top: 20px;}
.evCon3 .number_title{margin-bottom: 40px;}
.evCon3 .number_title > span{ background: #fff; color: #13254c; border-radius: 50%; width: 45px; height: 45px; display: inline-block; line-height: 43px; font-weight: 700;}
.evCon3 .number_title p{margin: 10px 0 0;font-weight: 700;}
.evCon3 .number_box:not(:last-child){ margin-bottom: 95px;}
.evCon3 .level_box{gap: 30px;margin: 0 auto 20px;}
.evCon3 .level_box li{ flex: 1; background: #203f75; padding-top: 45px; height: 250px; border-radius: 10px;}
.evCon3 .level_box li > span{ display: block; background: var(--point); width: fit-content; margin: 0 auto 12px; border-radius: 30px; padding: 7px 25px;}
.evCon3 .data_box{width: 930px;justify-content: space-between;align-items: flex-end;margin: 0 auto;}
.evCon3 .data_box li{position: relative;width: 255px;height: 255px;border-radius: 50%;background: #143469;display: flex;align-items: center;justify-content: center;}
.evCon3 .data_box p{width: calc(100% - 30px);height: calc(100% - 30px);background: #1a3d76;border-radius: inherit;display: flex;align-items: center;justify-content: center;filter: var(--drop-shadow);}
.evCon3 .data_box li i{position: absolute;top: -15px;right: -15px;z-index: 2;}
.evCon3 .error_box{gap: 17px;align-items: stretch;}
.evCon3 .error_box li{ flex: 1; background: #203f75; padding: 30px 0 40px; position: relative; border-radius: 10px;}
.evCon3 .error_box li span{ background: #fff; color: var(--point); border-radius: 30px; width: 290px; display: inline-block; padding: 12px 0; margin-bottom: 25px;}
.evCon3 .error_box li i{ position: absolute; top: -40px; right: -35px;}

.evCon4{background-color: #c7d5ed;}
.evCon4 .evt-tab.type-1 li a{ display: flex; flex-direction: column; border: none;background-color: #b2b2b2;color:#dfdfdf}
.evCon4 .evt-tab.type-1 li.on::before{display:none}
.evCon4 .evt-tab.type-1 li.on a{ color: #fff; background: var(--point);}
.evCon4 .eventVideo{max-width: 1000px;margin: 30px auto ;}
.evCon4 .way_box .swiper-wrapper{justify-content: space-between;align-items: stretch;gap: 20px;}
.evCon4 .way_box .swiper-slide{background: #fff;border-radius: 10px;display: flex;flex-direction: column;align-items: center;flex: 1;height: 310px;padding-top: 50px;gap: 25px;position: relative;color: #111;}
.evCon4 .way_box + .lecture{margin-top: 60px;}

.evCon5 .reviewSlider .swiper-wrapper{ gap: 13px; flex-wrap: wrap; }
.evCon5 .reviewSlider .swiper-slide{ width: 351px; }
.evCon5 .reviewSlider .swiper-slide img{filter: var(--drop-shadow);}
.evCon5 .reviewSlider + .tiny{margin-top: 20px;}

.event .con_tit{color: #fff;}
.event .con_tit .end::after{background-color: #000;}
.event .mini_tit{color: #fff;opacity: .7;margin: 40px -10px 55px;font-weight: normal;}
.event .con_tit > strong >  span{color:#ffba00}
.event .container_info_wrap > *{color: #fff;gap: 18px;}
.event .container_info.ver_circle .info .info_title{width: 130px;}

.event1{background-color: #326dd3;}
.event1 .container_info_wrap + .lecture{margin-top: 60px;}
.event2{background-color: #c9334e;}
.event2 .gift_list_wrap li .badge{background: #ffba00;height: 83px;color: #111;}

@media screen and (max-width: 1200px){
    .eventWrap { font-size: clamp(13px,1.6vmin,16px); } 
    .eventWrap .tiny_noti { font-size: clamp(10px,1.3vmin,13px); } 
    .evSection:not(.evtoggleWarning,.evCon1) { padding: 15% 0; } 
    
    .evSection:not(.event1) .con_tit { margin-bottom: 8%; } 
    .evSection:not(.event1) .con_tit .mini_tit{margin-bottom: 3%;}
    
    .evCon1{padding: 10% 0;}
    .evCon1 h3{font-size: clamp(30px,10vmin,100px);gap: clamp(20px,4vmin,40px);margin: clamp(20px,4vmin,40px) auto;}
    
    .evCon2 .arrow_box{gap: 1vmin;}
    .evCon2 .arrow_box .point_box{width: 40%;}
    .evCon2 .arrow_box .point_box::before, .evCon2 .arrow_box .last_box::before{ width: 15%; left: -7%; }

    .evCon3 .number_title{margin-bottom: 5%;}
    .evCon3 .number_box:not(:last-child){margin-bottom: 12%;}
    .evCon3 .data_box{width: 100%;gap: 2vmin;max-width: 900px;}
    .evCon3 .error_box li span{width: 90%;}
    .evCon3 .error_box li i{width: min(111px,60%);right: clamp(-5px,-2vmin,-20px);top: -10vmin;}
    
    .evCon4 .evt-tab.type-1 li a{font-size: clamp(14px,3.1vmin,26px);}
    .evCon4 .evt-tab.type-1 li a span{font-size: clamp(12px,2.5vmin,20px);}
    .evCon4 .way_box + .lecture{margin-top: clamp(30px,8vmin,60px);}
    .evCon4 .way_box .swiper-slide{height: auto; padding: 7% 10px;}
    .evCon5 .reviewSlider .swiper-wrapper{gap: 1vmin;}
    .evCon5 .reviewSlider .swiper-slide{width: min(351px, calc(33% - .5vmin));}

    .event .mini_tit{margin: 5% auto;font-size: clamp(14px,3vmin,22px)}
    .event .container_info_wrap > *{gap: 2vmin;}
    .event .container_info.ver_circle .info .info_title{width: clamp(100px,15vmin,130px);}
    .event1 .container_info_wrap + .lecture{margin-top: clamp(30px,8vmin,60px);}
}
@media screen and (max-width: 768px){
    .flex.column-768{flex-direction: column;}

    .evCon1 .home{height: clamp(30px,4vmin,45px);}
    .evCon1 h3 ul{margin: 0 15%;}
    .evCon1 h3 .dot{ width: 20px; height: 20px;}
    .evCon2 .arrow_box{ flex-direction: column; gap: 5vmin;}
    .evCon2 .arrow_box li{ height: auto; padding: 7% 0; width: 90%; max-width: 500px; }
    .evCon2 .arrow_box .point_box{ width: 100%; max-width: calc(500px + 10%); height: auto; }
    .evCon2 .arrow_box .point_box::before,.evCon2 .arrow_box .last_box::before{left: 50%;transform: translate(-50%, 0) rotate(90deg);top: -25%;width: 12%;}

    .evCon3 .bookSlider {max-width: 500px; margin: 0 auto;}
    .evCon3 .bookSlider .swiper-pagination-bullet:not(.swiper-pagination-bullet-active){background-color: #fff;opacity: .8;}    
    .evCon3 .bookSlider .swiper-slide{overflow: hidden;border-radius: 10px;height: auto;background: #fff;}
    .evCon3 .bookSlider .swiper-slide img{max-width: 200%;margin: 0 -100%;}
    .evCon3 .number_title > span{ height: auto; width: auto; line-height: normal; border-radius: 3px; padding: 2px 20px;}
    .evCon3 .number_title .point{ display: block; }
    .evCon3 .level_box{max-width: 500px;gap: 3vmin;}
    .evCon3 .level_box li{padding: 5% 3% 5% 5%;height: auto;display: flex;align-items: center;text-align: left;gap: 2vmin;} 
    .evCon3 .level_box li > span{margin: 0;padding: 0;width: clamp(50px,9vmin,90px);height: clamp(50px,9vmin,90px);padding-top: 1vmin;text-align: center;border-radius: 50%;} 
    .evCon3 .level_box li p{ flex: 1;}
    .evCon3 .data_box{margin-top: 15%;align-items: stretch;}
    .evCon3 .data_box li{border-radius: 10px;width: auto;height: auto;flex: 1;}
    .evCon3 .data_box li p{padding: 27% 0;width: 85%;height: 85%;}
    .evCon3 .data_box li i{width: min(111px,60%);min-width: 55px;top: -10vmin;}
    .evCon3 .error_box{gap: 3vmin;}
    .evCon3 .error_box li{ padding: 5% 0; height: auto;}
    .evCon3 .error_box li span{padding: 1% 0;margin-bottom: 3vmin;}

    .evCon4 .waySlider{gap: 0;max-width: 500px; margin: 0 auto; }
    .evCon4 .way_box .swiper-wrapper{gap: 0;}
    .evCon4 .way_box .swiper-slide{width: auto; padding-left: 30%;text-align: left;align-items: flex-start;gap: 2vmin;flex:none}
    .evCon4 .way_box .swiper-slide img{width: min(94px,18%); position: absolute; left: 6%; top: 50%; transform: translateY(-50%);}

    .evCon5 .reviewSlider .swiper-wrapper{flex-wrap: nowrap;gap:0}
    .evCon5 .reviewSlider .swiper-slide{width: auto;}
    .evCon5 .reviewSlider .swiper-slide img{width: min(300px, 80%);margin: 0 auto;}

    .event2 .gift_list_wrap li .badge{height: 60px;}
}

안 좋은 예시)s\gong\event\2024\04030031\style.css

@media screen and (max-width: 576px){
    .evCon1 .con1_swiper .swiper-slide .wrap .sub { gap: 10px; } 
    .evCon1 .con1_swiper .swiper-slide .wrap .sub .review { width: calc(50% - 5px); height: calc(50% - 5px); } 
    .evCon1 .con1_swiper .swiper-slide .wrap .review h6 { margin-bottom: 10px; font-size: 18px; } 
    .evCon1 .con1_swiper .swiper-slide .wrap .review p { font-size: 12px; z-index: 2; } 
    .evCon1 .con1_swiper .swiper-slide .wrap .review span { margin-top: 15px; font-size: 10px; z-index: 2; } 
    .evCon1 .con1_swiper .swiper-slide .wrap .big, .evCon1 .con1_swiper .swiper-slide .wrap .sub { height: 300px; } 
}