/* --------------------------------layout-------------------------------- */
#container {margin-top:0 !important}

@media screen and (max-width:767px) {
    html, body {
    touch-action:none; /* iOS에서 터치 스크롤 방지 */
    -webkit-overflow-scrolling:auto; 
}
    #container {position:relative; 
        width:100vw; 
        height:100dvh; /* 모바일 웹의 안정적인 전체 높이 확보 */
        overflow:hidden; 
        -webkit-touch-callout:none; /* 텍스트 꾹 누를 때 동작 제거 */
        -webkit-user-select:none; 
        user-select:none}
}/* sm */
/* --------------------------------layout end-------------------------------- */


/* --------------------------------main-------------------------------- */
.fade{opacity:0}
.stage_wrapper {position:relative; width:100vw; height:100vh; background:url(/public/test/images/main/bg_main.webp) no-repeat center/100% auto, linear-gradient(to bottom, #fffbf1 0%, #f6ede6 100%); transition:all 0.4s ease-in-out}
.stage_item {position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s .1s ease}
.stage_item img {max-width:unset}
.stage_item.on {opacity:1; visibility:visible; z-index:1}
.btn_next {position:absolute; cursor:pointer; z-index:10; display:none}
.btn_next.disabled {display:none; cursor:default}
.step1 .btn_next::after,
.step2 .stage_item.on .btn_next,
.step3 .stage_item.on .btn_next,
.step4 .stage_item.on .btn_next,
.step5 .stage_item.on .btn_next {animation:blink 1.4s .2s infinite ease-in-out}
.semie_wrap {position:absolute; top:50%; left:50%; display:none}
.semie_wrap .semie{width:100%; position:absolute; bottom:0; left:0; z-index:1; cursor:pointer}
.step2 .semie_wrap .semie{transition:all 0s}
.step2 .semie_wrap .semie,
.step3 .semie_wrap .semie,
.step4 .semie_wrap .semie,
.step5 .semie_wrap .semie {opacity:0; animation:none}
.semie_wrap.show .semie {opacity:1; animation:bounce 0.325s forwards ease-in-out}
.semie_wrap .obj {position:absolute; z-index:2}
.semie_wrap .msg {position:absolute; z-index:4; display:none}
.semie_wrap .msg.ani {animation:bounceUp 0.4s forwards ease-in-out}

/* step1 :시작 */
.stage_wrapper .logo.bpc {width:calc(578/1920*100%); max-width:578px; position:fixed; top:50%; left:calc(15/1920*100%); transform:translateY(-50%)}
/*.step1 .semie_wrap {position:absolute; top:50%; left:calc(200/1920*100%); transform:translateY(calc(-50% + (294/1080*100%))); width:422px; aspect-ratio:844/865}*/
.step1 .semie_wrap {transform:translate(calc(-50% + (-2680/1920*100%)),calc(-50% + (600/1080*100%))); width:calc(428/1920*100%); /*max-width:428px; */aspect-ratio:428/484}
.step1 .semie_wrap .logo {width:100%}
.step1 .btn_next {width:calc(185/428*100%); max-width:185px; position:absolute; right:calc(-45/428*100%); top:calc(160/526*100%); background:url(/public/test/images/main/btn_start.png) no-repeat center/contain; aspect-ratio:370/271}
.step1 .btn_next::after {content:''; display:block; width:100%; max-width:185px; position:absolute; right:calc(-138/185*100%); top:calc(15/136*100%); background:url(/public/test/images/main/btn_click.png) no-repeat center/contain; aspect-ratio:328/328}
/* step2 :싱크대 */
.step2 .semie_wrap {transform:translate(calc(-51% + (300/1920*100%)),calc(-50% + (130/1080*100%))); width:calc(252/1920*100%); /*max-width:252px; */aspect-ratio:504/868}
.step2 .semie_wrap .obj {width:calc(50/146*100%); position:absolute; top:calc(66/235*100%); left:calc(2/146*100%); animation:shake 2.6s infinite ease-in-out}
.step2 .semie_wrap .msg {width:calc(302.5/252*100%); top:calc(60/248*100%); left:calc(-90/146*100%); transform:translateY(-100%); aspect-ratio:605/387}
.step2 .btn_next {width:calc(185/252*100%); max-width:185px; position:absolute; right:calc(-90/252*100%); top:calc(190/496*100%); background:url(/public/test/images/main/btn_click.png) no-repeat center/contain; aspect-ratio:328/328}
/* step3 :냉장고 */
.step3 .semie_wrap {transform:translate(calc(-50% + (1706/1920*100%)),calc(-50% + (174/1080*100%))); width:calc(404/1920*100%); /*max-width:404px*/; aspect-ratio:808/816}
.step3 .semie_wrap .msg {width:calc(361.5/404*100%); top:calc(50/248*100%); right:calc(-77/404*100%); transform:translateY(-100%); aspect-ratio:723/321}
.step3 .btn_next {width:calc(185/404*100%); max-width:185px; position:absolute; right:calc(58/404*100%); bottom:0; background:url(/public/test/images/main/btn_click.png) no-repeat center/contain; aspect-ratio:328/328}
/* step4 :인덕션 */
.step4 .semie_wrap {transform:translate(calc(-50% + (3100/1920*100%)),calc(-50% + (200/1080*100%))); width:calc(292/1920*100%); /*max-width:292px; */aspect-ratio:584/792}
.step4 .semie_wrap .obj_wrap {width:calc(69/292*100%); max-width:69px; position:absolute; top:calc(52/236*100%); right:calc(20/292*100%); aspect-ratio:69/63}
.step4 .semie_wrap .obj {animation:heat_wave 2.6s infinite ease-in-out; bottom:0}
.step4 .semie_wrap .obj1 {width:calc(26/69*100%); animation-delay:0.1s; left:calc(-10/69*100%)}
.step4 .semie_wrap .obj2 {width:calc(36/69*100%); animation-delay:0.2s; left:calc(50% - calc(20/69*100%))}
.step4 .semie_wrap .obj3 {width:calc(26/69*100%); animation-delay:0s; right:calc(-10/69*100%)}
.step4 .semie_wrap .msg {width:calc(314.5/ 292*100%); top:calc(60/396*100%); right:calc(68/292*100%); transform:translateY(-100%); aspect-ratio:629/377}
.step4 .btn_next {width:calc(185/292*100%); max-width:185px; position:absolute; right:0; bottom:calc(16/396*100%); background:url(/public/test/images/main/btn_click.png) no-repeat center/contain; aspect-ratio:328/328}
/* step5 :식탁 */
.step5 .semie_wrap {transform:translate(calc(-50% + (1160/1920*100%)),calc(-50% + (550/1080*100%))); width:calc(440/1920*100%); max-width:440px; aspect-ratio:880/972}
.step5 .semie_wrap .obj_wrap {width:calc(100/440 * 100%); max-width:100px; position:absolute; top:calc(220/486 * 100%); left:calc(160/440 * 100%); aspect-ratio:116/92}
.step5 .semie_wrap .obj {animation:twinkle 1.4s infinite ease-in-out; bottom:0}
.step5 .semie_wrap .obj1 {width:calc(22/100 * 100%); animation-delay:.1s; left:0}
.step5 .semie_wrap .obj2 {width:calc(22.5/100 * 100%); animation-delay:.2s; bottom:unset; top:0; right:calc(15/100 * 100%)}
.step5 .semie_wrap .obj3 {width:calc(13.5/100 * 100%); animation-delay:0s; right:0; top:calc(39/92 * 100%)}
.step5 .semie_wrap .msg {width:calc(375/ 440*100%); top:calc(160/486*100%); right:calc(-144/440*100%); transform:translateY(-100%); aspect-ratio:750/322}
.step5 .btn_next {position:fixed; top:50%; right:0; transform:translate(0,calc(-50% + calc(-500/1080*100%))); width:calc(185/1920*100%); max-width:185px; background:url(/public/test/images/main/btn_click.png) no-repeat center/contain; aspect-ratio:328/328}
/*하단 플로팅 버튼*/
.btn_float {width:calc(261/1920*100%); max-width:261px; position:fixed; bottom:calc(63/1080*100%); left:calc(83/1920*100%); z-index:10; background:url(/public/test/images/main/btn_floating.png) no-repeat center/contain; aspect-ratio:261/281}
/*PC전용 캠페인 버튼*/
.btn_more {position:fixed; top:50%; right:calc(100/1920*100%); /* transform:translate(0,calc(-50% + calc(-1370/1080*100%))); */ width:calc(182/1920*100%); z-index:10; /*background:url(/public/test/images/main/btn_more.png) no-repeat center/contain; aspect-ratio:261/281*/}
/*팝업*/
#popup_all .popup_apply .in_layer_box {width:535px; background:url(/public/test/images/main/bg_popup.webp) no-repeat center/100% auto; aspect-ratio:535/475; box-shadow:none; padding:0}
#popup_all .popup_apply .popup_cont {margin-top:211px}
#popup_all .popup_apply .popup_cont p {color:#333; text-align:center; font-size:1.75rem; font-weight:700; line-height:120%; letter-spacing:-.56px}
#popup_all .popup_apply .popup_cont p:last-of-type {margin-top:.5rem}
#popup_all .popup_apply .popup_cont .color {color:#20924B}
#popup_all .popup_apply .btn_apply {position:relative; display:inline-flex; justify-content:center; align-items:center; gap:.75rem; border-radius:1rem; border:2px solid #324D46; background:linear-gradient(0deg,#425A54 0%,#1D4138 100%),linear-gradient(180deg,#009752 0%,#00B160 100%),linear-gradient(0deg,#425A54 0%,#1D4138 100%),radial-gradient(52.15% 50.15% at 50% 50%,#FFF 0%,#F1F1F1 100%); box-shadow:4px 6px 10px 0 #0000001a; color:#FFF; text-align:center; font-size:16px; font-weight:700; line-height:3rem; height:3rem; padding:0 1.75rem; margin:2rem auto 0; letter-spacing:-.48px; overflow:hidden; transition:transform .3s ease}
#popup_all .popup_apply .btn_apply::after {content:''; display:block; width:14px; height:14px; background:url(/public/test/images/common/ico_btn_next.png) no-repeat center/contain}
#popup_all .popup_apply .btn_apply::before {content:''; position:absolute; top:0; left:-100%; width:200%; height:100%; background:linear-gradient(120deg,#ffffff1a,transparent); transform:skewX(-20deg); transition:left .5s ease}
#popup_all .popup_apply .btn_apply:hover::before {left:125%}
#popup_all .popup_apply .btn_apply:hover {box-shadow:4px 6px 10px 0 #0000004a}
#popup_all .popup_apply .btn_close {width:2.5rem; height:2.5rem; right:-30px; top:90px}

@media screen and (min-width:1024.1px){
    .btn_more{transform:translate(0,calc(-50% + calc(-100/1080*100%))); background:url(/public/test/images/main/btn_more.png) no-repeat top center/contain; aspect-ratio:261/870}

}/* lg */


@media screen and (max-width:1024px) {
    .stage_wrapper {background:url(/public/test/images/main/bg_main_mo.webp) no-repeat center/100% auto, linear-gradient(to bottom, #fffbf1 0%, #f6ede6 100%); background-size:2250px auto; background-position-y:center}
    .stage_wrapper.step1 {background-position-x:0}
    .btn_next,.step5 .btn_next {width:165px; height:165px}

    /* step1 :시작 */
    .step1 .semie_wrap {width:100%; max-width:539px; transform:translate(calc(-50% + (-7/360*100%)), calc(-50% + calc(35/526*100%))); aspect-ratio:359/526}
    .step1 .semie_wrap .logo {}
    .step1 .semie_wrap .semie {width:calc(272/360 * 100%); left:unset; right:0; opacity:0; transition:all 0.15s ease-in-out}
    .step1 .semie_wrap .semie.on {opacity:1; animation:bounce 0.45s forwards ease-in-out}
    .step1 .btn_next {right:calc(-22/360*100%); top:unset; bottom:calc(130/526 * 100%); background:url(/public/test/images/main/btn_start_mo.png) no-repeat center/contain; aspect-ratio:222/158}
    .step1 .btn_next::after {right:calc(-30/110*100%); top:calc(100/136 * 100%); width:165px; background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain}
    /* step2 :싱크대 */
    .step2 .semie_wrap {transform:translate(calc(-50% + (39/360*100%)),calc(-50% + (78/650*100%))); width:219px}
    .step2 .semie_wrap .semie {width:100%}
    .step2 .semie_wrap .obj {width:78px; position:absolute; top:calc(66/235*100%); left:calc(2/146*100%); animation:shake 2.6s infinite ease-in-out}
    .step2 .semie_wrap .msg {width:367.5px; top:calc(30/248*100%); right:calc(-41/146*100%); transform:translateY(-100%)}
    .step2 .btn_next {right:calc(-50/146*100%); bottom:calc(124/526*100%); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /* step3 :냉장고 */
    .step3 .semie_wrap {transform:translate(calc(-50% + (-31/360*100%)),calc(-50% + (103/650*100%))); width:351px}
    .step3 .semie_wrap .semie {width:auto; height:100%}
    .step3 .semie_wrap .msg {width:415.5px; top:calc(34/234*100%); right:calc(-36/146*100%); transform:translateY(-100%)}
    .step3 .btn_next {right:calc(30/234*100%); bottom:calc(6/236*100%); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /* step4 :인덕션 */
    .step4 .semie_wrap {transform:translate(calc(-50% + (34/360*100%)),calc(-50% + (128/650*100%))); width:255px}
    .step4 .semie_wrap .semie {width:auto; height:100%}
    .step4 .semie_wrap .obj_wrap {width:60px; height:55.5px; top:calc(48/236*100%); right:calc(11/170*100%); position:absolute}
    .step4 .semie_wrap .obj {animation:heat_wave 2.6s infinite ease-in-out}
    .step4 .semie_wrap .obj1 {width:20px; animation-delay:0.1s; position:absolute; bottom:0; left:0}
    .step4 .semie_wrap .obj2 {width:27px; animation-delay:0.2s; position:absolute; bottom:0; left:calc(50% - 13.5px)}
    .step4 .semie_wrap .obj3 {width:20px; animation-delay:0s; position:absolute; bottom:0; left:calc(100% - 20px)}
    .step4 .semie_wrap .msg {width:375px; top:calc(25/236*100%); right:calc(-31/170*100%); transform:translateY(-100%)}
    .step4 .btn_next {right:0; bottom:calc(20/236*100%); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /* step5 :식탁 */
    .step5 .semie_wrap {transform:translate(calc(-50% + (-14/360*100%)),calc(-50% + (331/650*100%))); width:402px}
    .step5 .semie_wrap .semie {width:auto; height:100%}
    .step5 .semie_wrap .obj_wrap {width:114px; height:93px; top:calc(101/274*100%); left:calc(90/270*100%); position:absolute}
    .step5 .semie_wrap .obj {animation:twinkle 1.2s infinite ease-in-out}
    .step5 .semie_wrap .obj1 {width:22px; animation-delay:0.1s; position:absolute; bottom:0; left:0}
    .step5 .semie_wrap .obj2 {width:22px; animation-delay:0.2s; position:absolute; top:0; right:10px}
    .step5 .semie_wrap .obj3 {width:14px; animation-delay:0s; position:absolute; top:25px; right:0}
    .step5 .semie_wrap .msg {width:418.5px; top:calc(28/286*100%); right:calc(-22/268*100%); transform:translateY(-100%)}
    .step5 .btn_next {right:50%; bottom:calc(20/236*100%); transform:translate(calc(50% + calc(340/360*100%)),calc(-50% + calc(1100/650*100%))); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /*하단 플로팅 버튼*/
    .btn_float {width:156px; bottom:calc(10/650*100%); left:calc(23/360*100%); background:url(/public/test/images/main/btn_floating_mo.png) no-repeat center/contain; aspect-ratio:156/68}
}/* md */

@media screen and (max-width:767px) {
    .stage_wrapper {background-size:1500px auto}
    .btn_next,.step5 .btn_next {width:110px; height:110px}

    /* step1 :시작 */
    .step1 .semie_wrap {transform:translate(calc(-50% + (-7/360*100%)),calc(-50% + (78/650*100%))); max-width:359px}
    .step1 .btn_next {width:calc(111/360*100%)}
    .step1 .btn_next::after {width:110px; right:calc(100 / 110 * 100%); top:calc(140 / 136 * 100%)}
    /* step2 :싱크대 */
    .step2 .semie_wrap {transform:translate(calc(-50% + (39/360*100%)),calc(-50% + (78/650*100%))); width:146px}
    .step2 .semie_wrap .semie {width:auto; height:100%}
    .step2 .semie_wrap .obj {width:52px; position:absolute; top:calc(66/235*100%); left:calc(2/146*100%); animation:shake 2.6s infinite ease-in-out}
    .step2 .semie_wrap .msg {width:245px; top:calc(30/248*100%); right:calc(-41/146*100%); transform:translateY(-100%)}
    .step2 .btn_next {right:calc(-50/146*100%); bottom:calc(124/526*100%); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /* step3 :냉장고 */
    .step3 .semie_wrap {transform:translate(calc(-50% + (-31/360*100%)),calc(-50% + (103/650*100%))); width:234px}
    .step3 .semie_wrap .semie {width:auto; height:100%}
    .step3 .semie_wrap .msg {width:277px; top:calc(34/234*100%); right:calc(-36/146*100%); transform:translateY(-100%)}
    .step3 .btn_next {right:calc(30/234*100%); bottom:calc(6/236*100%); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /* step4 :인덕션 */
    .step4 .semie_wrap {transform:translate(calc(-50% + (34/360*100%)),calc(-50% + (128/650*100%))); width:170px}
    .step4 .semie_wrap .semie {width:auto; height:100%}
    .step4 .semie_wrap .obj_wrap {width:40px; height:37px; top:calc(50/236*100%); right:calc(11/170*100%); position:absolute}
    .step4 .semie_wrap .obj {animation:heat_wave 2.6s infinite ease-in-out}
    .step4 .semie_wrap .obj1 {width:13px; animation-delay:0.1s; position:absolute; bottom:0; left:0}
    .step4 .semie_wrap .obj2 {width:18px; animation-delay:0.2s; position:absolute; bottom:0; left:calc(50% - 9px)}
    .step4 .semie_wrap .obj3 {width:13px; animation-delay:0s; position:absolute; bottom:0; left:calc(100% - 13px)}
    .step4 .semie_wrap .msg {width:250px; top:calc(25/236*100%); right:calc(-31/170*100%); transform:translateY(-100%)}
    .step4 .btn_next {right:0; bottom:calc(20/236*100%); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /* step5 :식탁 */
    .step5 .semie_wrap {transform:translate(calc(-50% + (-14/360*100%)),calc(-50% + (331/650*100%))); width:268px}
    .step5 .semie_wrap .semie {width:auto; height:100%}
    .step5 .semie_wrap .obj_wrap {width:76px; height:62px; top:calc(98/236*100%); right:calc(11/170*100%); position:absolute}
    .step5 .semie_wrap .obj {animation:twinkle 1.4s infinite ease-in-out}
    .step5 .semie_wrap .obj1 {animation-delay:0.1s}
    .step5 .semie_wrap .obj2 {animation-delay:0.2s}
    .step5 .semie_wrap .obj3 {animation-delay:0s}
    .step5 .semie_wrap .msg {width:279px; top:calc(28/286*100%); right:calc(-22/268*100%); transform:translateY(-100%)}
    .step5 .btn_next {right:calc(150/268*100%); bottom:calc(200/286*100%); background:url(/public/test/images/main/btn_click_mo.png) no-repeat center/contain; aspect-ratio:220/220}
    /*팝업*/
    #popup_all .popup_apply .in_layer_box {width:320px; background:url(/public/test/images/main/bg_popup.webp) no-repeat center/100% auto; aspect-ratio:535/475; box-shadow:none; padding:0}
    #popup_all .popup_apply .popup_cont {margin-top:120px}
    #popup_all .popup_apply .popup_cont p {font-size:16px; line-height:140%}
    #popup_all .popup_apply .popup_cont p:last-of-type {margin-top:1px}
    #popup_all .popup_apply .btn_apply {margin:8px auto 0; height:48px; line-height:48px}
    #popup_all .popup_apply .btn_close {width:24px; height:24px; right:12px; top:10px}
}/* sm */
/* --------------------------------main end-------------------------------- */


/* --------------------------------campaign -------------------------------- */
.sec_campaign{position:relative; width:100vw; height:100vh; background:url(/public/test/images/main/bg_campaign.webp) no-repeat center/ 100% auto,linear-gradient(to bottom,#93e6da 0%,#c2de67 100%); transition:all .4s ease-in-out}
.sec_campaign .inner{height:100%}
.sec_campaign .semie_wrap{width:calc(428/1200*100%); max-width:428px; display:block; top:unset; bottom:calc(92 / 1080 * 100%); transform:translate(calc(-50% + calc(1100/1920*100%)), calc(-50% + calc(500/1080*100%)))}
.sec_campaign .board_wrap{position:absolute; bottom:calc(73/1080*100%); left:50%; transform:translate(calc(-100% + calc(300/1200*100%)),0); z-index:5; cursor:pointer}
.sec_campaign .board{width:355px; background:url(/public/test/images/main/img_board.webp) no-repeat center / 100% auto; aspect-ratio:355/267}
.sec_campaign .board p{width:calc(100% - calc(66/355*100%)); position:absolute; top:calc(59 / 267 * 100%); left:0; color:#454545; text-align:center; text-shadow:0 0 4px #FFF; font-size:22px; font-weight:700; line-height:130%; letter-spacing:-.72px}
.sec_campaign .board span{display:inline}
.sec_campaign .board .count{color:#009752; font-weight:900}

.sec_campaign .btn_popup{display:block; position:absolute; bottom:0; right:0; width:130px; background:url(/public/test/images/main/ico_click.png) no-repeat center/contain; aspect-ratio:260/245}
.sec_campaign .btn_popup::after {content:''; display:block; width:131.5px; position:absolute; top:0; right:0; transform:translate(24%, -60%); background:url(/public/test/images/main/ico_msg.png) no-repeat center/contain; aspect-ratio:263/148; opacity:0; transition:all .15s ease-in-out; animation:blink 1.1s infinite ease-in-out}
.sec_campaign .btn_popup:hover::after{opacity:1}

/*팝업*/
#popup_all .popup_campaign .in_layer_box{width:calc(1280/1920*100%); max-width:1280px; background:url(/public/test/images/main/bg_board.webp) no-repeat center/100% auto; aspect-ratio:1280/720; box-shadow:none; padding:0; margin-bottom:8rem}
#popup_all .popup_campaign .in_layer_box::before{content:''; display:block; position:absolute; z-index:2; width:calc(395/1280*100%); max-width:395px; aspect-ratio:395/537; bottom:0; left:0; transform:translate(calc(-100% + calc(170/507*100%)), calc(100%  - calc(450/720*100%))); background:url(/public/test/images/main/pop_semie.png) no-repeat center/contain}
#popup_all .popup_campaign .in_layer_box::after{content:''; display:block; position:absolute; z-index:2; width:calc(243/1280*100%); max-width:243px; aspect-ratio:243/306; bottom:0; right:0; transform:translate(calc(100% - calc(400/507*100%)), calc(100%  - calc(320/720*100%))); background:url(/public/test/images/main/pop_dog.png) no-repeat center/contain}
#popup_all .popup_campaign .tit{color:#333; text-align:center; font-size:1.6vw; font-weight:700; line-height:120%; letter-spacing:-.56px; position:absolute; top:calc(46 / 720 * 100%); right:50%; transform:translate(calc(50% - calc(36/1280*100%)),0)}
#popup_all .popup_campaign .tit span{display:inline}
#popup_all .popup_campaign .tit .count{color:#20924B}
#popup_all .popup_campaign .btn_reset{position:absolute; bottom:0; right:50%; transform:translate(50%,calc(100% + 1.75rem)); display:inline-flex; justify-content:center; align-items:center; gap:.75rem; color:#FFF; text-align:center; /*font-size:2rem; */font-size:1.85vw; font-weight:700; line-height:6.5625rem; height:6.5625rem; letter-spacing:-.48px; overflow:hidden; transition:transform .3s ease; border-radius:2.5rem; border:4px solid #009551; background:linear-gradient(180deg,#009752 0%,#00B160 100%); box-shadow:16px 12px 24px 0 #0000001a; width:24rem; z-index:5}
#popup_all .popup_campaign .btn_reset::after{content:''; display:block; width:1.5rem; height:1.5rem; background:url(/public/test/images/main/ico_reset.png) no-repeat center/contain}
#popup_all .popup_campaign .btn_reset::before{content:''; position:absolute; top:0; left:-100%; width:200%; height:100%; background:linear-gradient(120deg,#ffffff1a,transparent); transform:skewX(-20deg); transition:left .5s ease}
#popup_all .popup_campaign .btn_reset:hover::before{left:125%}
#popup_all .popup_campaign .btn_reset:hover::after{animation:rotate 0.7s forwards ease-in-out}
#popup_all .popup_campaign .btn_reset:hover{box-shadow:4px 6px 10px 0 #0000004a}
/*#popup_all .popup_campaign .btn_close{width:2.5rem; height:2.5rem; right:-30px; top:90px}*/
.campaign_swiper{width:calc(1011/1280*100%); aspect-ratio:1011/480; /*1011/452*/; position:absolute; right:50%; bottom:calc(114/720*100%); transform:translateX(calc(50% - calc(12/1280*100%))); /*transform:translateX(calc(50% - calc(12/1280*100%)))*/}
.campaign_swiper .swiper-slide{width:auto; position:relative}
.campaign_swiper .swiper-slide a{display:block; width:100%; height:100%}
.campaign_swiper .swiper-slide figcaption{color:#333; text-align:center; font-size:1.3vw; font-style:normal; font-weight:500; line-height:120%; letter-spacing:-.72px; position:absolute; top:calc(88/452*100%); left:0; width:calc(100% - calc(20/338*100%))}
.campaign_swiper .swiper-slide .color{font-size:1.8vw; font-weight:700; line-height:160%}
.campaign_swiper .swiper-slide .color1{color:#9B9F31}
.campaign_swiper .swiper-slide .color2{color:#29A2A3}
.campaign_swiper .swiper-slide .color3{color:#D97E71}
.campaign_swiper .btn_popup{display:block; position:absolute; bottom:0; right:0; width:110px; background:url(/public/test/images/main/ico_click.png) no-repeat center/contain; aspect-ratio:260/245; transform:translate(-16%, 13%); z-index:3}
.campaign_swiper .btn_popup::after {content:''; display:block; width:131.5px; position:absolute; top:0; right:0; transform:translate(30%, -58%); background:url(/public/test/images/main/ico_msg.png) no-repeat center/contain; aspect-ratio:263/148; opacity:0; transition:all .15s ease-in-out}
.campaign_swiper .swiper-slide:hover .btn_popup::after,
.campaign_swiper .btn_popup:hover::after{opacity:1}

@media (min-width:1024px) {
    .campaign_swiper{overflow:visible}
    .swiper-button-next,
    .swiper-button-prev {
        display:none !important; 
    }
} /*lg*/
@media screen and (max-width:1400px) {
    #popup_all .popup_campaign .tit{font-size:1.5vw}
} /*lg*/
@media screen and (max-width:1024px) {
    .sec_campaign {background:url(/public/test/images/main/bg_campaign_mo.webp) no-repeat center/ 100% auto, linear-gradient(to bottom, #93e6da 0%, #c2de67 100%); background-size:1154px auto; background-position-y:center}
    .sec_campaign .semie_wrap{width:calc(300/360*100%); max-width:300px; top:50%; bottom:unset; transform:translate(calc(-50% + calc(80/360*100%)),calc(-50% + calc(110/650*100%)))}
    .sec_campaign .board_wrap{bottom:calc(110/650*100%); left:50%; transform:translate(calc(-50% + calc(22/223*100%)),0)}
    .sec_campaign .board{width:350px; background:url(/public/test/images/main/img_board_mo.webp) no-repeat center / 100% auto; aspect-ratio:446/342}
    .sec_campaign .board p{font-size:20px; top:calc(39 / 171 * 100%)}
    .sec_campaign .board span.bpc{display:none}
    .sec_campaign .btn_popup{width:126px; bottom:18px}
    .sec_campaign .btn_popup::after{width:120px; opacity:1; top:-5px}

    /*팝업*/
    #popup_all .popup_campaign .in_layer_box{width:450px; background:url(/public/test/images/main/bg_board_mo.webp) no-repeat center/100% auto; aspect-ratio:600/792; box-shadow:none; padding:0; margin-bottom:202px}
    #popup_all .popup_campaign .in_layer_box::before{display:none}
    #popup_all .popup_campaign .in_layer_box::after{content:''; display:block; position:absolute; z-index:2; width:507px; aspect-ratio:676/656; bottom:0; right:50%; transform:translate(50%,calc(100% - 78px)); background:url(/public/test/images/main/pop_semie_mo.png) no-repeat center/contain}
    #popup_all .popup_campaign span.bpc{display:none}
    #popup_all .popup_campaign .tit{font-size:24px; top:25px; right:unset; transform:none; left:0; width:calc(100% - 12px)}
    .campaign_swiper{width:360px; aspect-ratio:676 / 936; transform:translateX(50%); bottom:unset; top:72px}
    .campaign_swiper .swiper-wrapper{padding-left:calc(0/292*100%)}
    .campaign_swiper .swiper-slide{padding-left:calc(15/292*100%)}
    .campaign_swiper .swiper-slide figcaption{font-size:24px; width:calc(100% - calc(50/360*100%)); left:50%; transform:translateX(-50%); line-height:160%; top:70px}
    .campaign_swiper .swiper-slide .color{font-size:36px; line-height:160%}
    .campaign_swiper .swiper-button-prev{width:60px; height:60px; display:block; background:url(/public/test/images/main/arrow_prev.png) no-repeat center/contain; transform:translateY(-50%); margin:0; left:-75px}
    .campaign_swiper .swiper-button-next{width:60px; height:60px; display:block; background:url(/public/test/images/main/arrow_next.png) no-repeat center/contain; transform:translateY(-50%); margin:0; right:-65px; left:unset}
    #popup_all .popup_campaign .btn_reset{width:20rem; height:72px; line-height:72px; border-radius:12px; border:2px solid #009551; background:linear-gradient(180deg, #009752 0%, #00B160 100%), linear-gradient(0deg, #425A54 0%, #1D4138 100%), radial-gradient(52.15% 50.15% at 50% 50%, #FFF 0%, #F1F1F1 100%); box-shadow:4px 6px 10px 0 #0000001a; font-size:24px; transform:translate(50%,calc(100% + 130px))}
    #popup_all .popup_campaign .btn_reset::after{width:18px; height:18px}
    .campaign_swiper .btn_popup{width:84px; transform:translate(-40%, -30%); opacity: 1}
    .campaign_swiper .btn_popup::after{width:80px; opacity:1; animation:blink 1.2s infinite ease-in-out}

}/* md */
@media screen and (max-width:767px) {
    .sec_campaign {background-size:180% auto; background-position-x:44%}
    .sec_campaign .semie_wrap{width:calc(200/360*100%)}
    .sec_campaign .board{width:223px}
    .sec_campaign .board p{font-size:16px; line-height:120%; top:calc(37 / 171 * 100%)}
    .sec_campaign .btn_popup{width:84px}
    .sec_campaign .btn_popup::after{width:80px}
    #popup_all .popup_campaign .in_layer_box {width:300px; margin-bottom:142px}
    #popup_all .popup_campaign .in_layer_box::after{width:338px; transform:translate(50%,calc(100% - 54px))}
    #popup_all .popup_campaign .tit{width:calc(100% - 8px); font-size:16px; top:17px}
    .campaign_swiper{width:240px; top:48px}
    .campaign_swiper .swiper-slide figcaption{font-size:16px; top:46px}
    .campaign_swiper .swiper-slide .color{font-size:24px}
    .campaign_swiper .swiper-button-prev{width:40px; height:40px; left:-48px; transform:translateY(calc(-50% - calc(240/332*100%)))}
    .campaign_swiper .swiper-button-next{width:40px; height:40px; right:-42px; transform:translateY(calc(-50% - calc(240/332*100%)))}
    #popup_all .popup_campaign .btn_reset{width:13.66rem; height:48px; font-size:16px; border-radius:8px; transform:translate(50%,calc(100% + 95px))}
    #popup_all .popup_campaign .btn_reset::after{width:12px; height:12px}
}/* sm */
@media screen and (max-width:500px) {
    #popup_all .popup_campaign .tit{font-size:15px; top:18px}

}/* s */
/* --------------------------------campaign end-------------------------------- */


/* --------------------------------animation-------------------------------- */
@keyframes shake {
    0%   {opacity:1; transform:translate(0, 0) scale(1) rotate(0deg)}
    20%  {opacity:0.95; transform:translate(-4px, 5px) scale(1.05) rotate(-3deg)}
    40%  {opacity:0.85; transform:translate(5px, -4px) scale(1.1) rotate(4deg)}
    60%  {opacity:0.9; transform:translate(-3px, 3px) scale(1.08) rotate(-2deg)}
    80%  {opacity:0.92; transform:translate(4px, -2px) scale(1.03) rotate(2deg)}
    100% {opacity:1; transform:translate(0, 0) scale(1) rotate(0deg)}
}
@keyframes heat_wave {
    0%   {transform:translateY(0) scaleX(1) scaleY(1) rotate(0deg); opacity:0.6}
    25%  {transform:translateY(-2px) scaleX(1.1) scaleY(1.1) rotate(2deg); opacity:0.8}
    50%  {transform:translateY(-4px) scaleX(1) scaleY(1.2) rotate(-2deg); opacity:1}
    75%  {transform:translateY(-2px) scaleX(0.95) scaleY(1.05) rotate(1deg); opacity:0.8}
    100% {transform:translateY(0) scaleX(1) scaleY(1) rotate(0deg); opacity:0.6}
}
@keyframes twinkle {
    0%, 100% {transform:scale(1); opacity:0.4}
    50% {transform:scale(1.3); opacity:1}
}
@keyframes blink {
    0%, 100% {opacity:1}
    50% {opacity:0}
}
@keyframes bounceUp {
    0%, 100% {transform:translateY(-100%)}
    50% {transform:translateY(calc(-100% - 10px))}
}
@keyframes rotate {
    0% {transform:rotate(0)}
    100% {transform:rotate(360deg)}
}
@keyframes bounce {
    0% {transform:translateY(5px)}
    60% {transform:translateY(-5px)}
    100% {transform:translateY(0px)}
}
/* --------------------------------animation end-------------------------------- */