@charset "utf-8";

@font-face{
    font-family: 'SUIT';
    font-weight: 400;
    src: url('https://static.cloud.sbs.co.kr/font/suit/SUIT-Regular.woff2') format('woff2'),
    url('https://static.cloud.sbs.co.kr/font/suit/SUIT-Regular.woff2') format('woff');
}
@font-face{
    font-family: 'SUIT';
    font-weight: 500;
    src: url('https://static.cloud.sbs.co.kr/font/suit/SUIT-Medium.woff2') format('woff2'),
    url('https://static.cloud.sbs.co.kr/font/suit/SUIT-Medium.woff2') format('woff');
}
@font-face{
    font-family: 'SUIT';
    font-weight: 600;
    src: url('https://static.cloud.sbs.co.kr/font/suit/SUIT-SemiBold.woff2') format('woff2'),
    url('https://static.cloud.sbs.co.kr/font/suit/SUIT-SemiBold.woff2') format('woff');
}
@font-face{
    font-family: 'SUIT';
    font-weight: 700;
    src: url('https://static.cloud.sbs.co.kr/font/suit/SUIT-Bold.woff2') format('woff2'),
    url('https://static.cloud.sbs.co.kr/font/suit/SUIT-Bold.woff2') format('woff');
}
/* Description: 브라우저 초기화/공통요소*/

/* RESET */
html,body{-webkit-text-size-adjust:none;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,img,div{margin:0;padding:0;font-weight:300;}
img,fieldset{border:0}
button{background:none;border:0;cursor:pointer;font-family:'Pretendard','SUIT','Noto Sans KR',Arial,sans-serif;}
ul,ol{list-style:none}
input,select{vertical-align:middle;background:#FFF;}
em,address,i{font-style:normal}
table{border-collapse:collapse;border-spacing:0px;empty-cells:show;table-layout:fixed}
legend,caption{visibility:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0}
a{text-decoration:none;color:#000;}
a:hover,a:focus{text-decoration:none;}
input,button,select,textarea{border-radius:0;font-family:'SUIT','Noto Sans KR',Arial,sans-serif;}
body{position:relative;font-family:'SUIT','Noto Sans KR',Arial,sans-serif;font-size:16px;color:#000;font-weight:300;}

:root{
    --ui-color001:rgba(109, 29, 0, 0.25);
    --ui-color002:rgba(205, 144, 122, 0.20);

     /* bg01 : 배경 */
    /* 이미지 --ui-bg### */
    --ui-bg001:url(https://image.sbs.co.kr/event/sbsplay_event_260921/img/pc/event_bg.jpg); /* bg : 배경 */
    --ui-bg002:url(https://image.sbs.co.kr/event/sbsplay_event_260921/img/pc/event_logo01.png); /* 프로그램로고 */
    --ui-bg003:url(https://image.sbs.co.kr/event/sbsplay_event_260921/img/pc/event_stamp01.png); /* 스템프 */
   
   
  
    --filter-color001:brightness(0.8) invert(79%) sepia(28%) saturate(0%) hue-rotate(362deg) brightness(122%) contrast(98%)/* 모든색 → #CDCDCD */
   
  }
  

/* common */
.blind{position:absolute;top:0;left:-9999em;width:0;height:0;font-size:0;line-height:0}
.hide{top:-99999em;left:-99999em;font-size:1px;opacity:0;text-indent:-99999em;}
.ir{zoom:-10;z-index:-1;position:relative;display:block !important;width:100%;line-height:0;font-size:0px !important;text-align:center;white-space:nowrap;overflow:hidden;}
.bl{display:block;}
.roboto{font-family:'Roboto', sans-serif;}

/* skip_navigation */
#skip_nav{position:absolute;left:0;top:0 !important;width:100%;z-index:9999;}
#skip_nav a{position:absolute;left:0;top:-100px;display:block;width:100%;height:60px;background-color:#015293;font-size:17px;color:#FFF;line-height:60px;text-align:center;}
#skip_nav a:active,#skip_nav a:focus{top:0;height:60px;z-index:999;}

/* layout */
.sbsEventContainer-w{display:flex;flex-direction:column;justify-content:center;overflow:hidden;position:relative;background-image:var(--ui-bg001);background-repeat:repeat;background-position:center center;}
.sbsEventContainer-w.event260427{width:100%;background-color:#FF6CC4;min-width:1200px;}
[class*='event-section']{display:flex;justify-content:center;position:relative;width:100%;}
[class*='event-section'] .se-inner{position:relative;display:flex;flex-direction:column;gap:40px;justify-content:center;align-items:center;margin:0 auto;width:1200px;}

/* section1 */
.event-section1{position:relative;overflow:hidden;height:645px;display:flex;justify-content:center;background-color:var(--ui-color001);} 
.event-section1 .img01{position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);display:block;height:646px;}
.event-section1 .img02{position:absolute;z-index:1;bottom:0;left:-398px;display:block;height:414px;width:863px;transform-origin: right bottom;-webkit-animation-name: imgLeft; animation-name: imgLeft;-webkit-animation-duration: 1.5s; animation-duration: 1.5s;  -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards;}
.event-section1 .img03{position:absolute;z-index:1;bottom:67px;right:-250px;display:block;height:379px;width:570px;transform-origin: left bottom;transform: translateX(-100px) translateY(59%) rotate(-42deg) scale(1);-webkit-animation-name: imgRight; animation-name: imgRight;-webkit-animation-duration: 1.2s; animation-duration: 1.2s; animation-delay:0.3s; -webkit-animation-delay:0.3s;-webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);}
.event-section1 .stamp-ani01{position:absolute;z-index:3;top:64px;left:50%;transform:translateX(290px);display:block;width:183px;height:183px;background-image:var(--ui-bg002);background-repeat:no-repeat;background-position:center center;opacity:0;transition:opacity 0.3s ease-in-out; -webkit-animation-name: stamp-motion; animation-name: stamp-motion; animation-delay:1s; -webkit-animation-delay:1s; -webkit-animation-duration: 0.3s; animation-duration: 0.5s; opacity: 0; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; }
@-webkit-keyframes stamp-motion{
    0%{
      opacity: 0;
    }
   
    100%{
      opacity:1;
     
    }
  }

  @-webkit-keyframes imgLeft{
    0%{
        
        transform: translateX(200px) translateY(-50%) rotate(-49deg) scale(1);

      }
      
      100%{
        transform: translateX(0) translateY(0) rotate(0) scale(1);
      }
    }

    @-webkit-keyframes imgRight{
        0%{
            
            transform: translateX(-100px) translateY(59%) rotate(-42deg) scale(1);
    
          }
          
          100%{
            transform: translateX(0) translateY(0) rotate(0) scale(1);
          }
        }
/* section1 */
.event-section2{padding:60px 0 80px;background-color:var(--ui-color002);} 
.event-section2 .img{display:block;width:1100px;}
/* section1 */
.event-section3{display:flex;justify-content:center;padding:60px 0 80px;background-color:var(--ui-color001);} 
.event-section3 .seTop-w{position:relative;display:flex;justify-content:center;}
.event-section3 .seTop-w>img{display:block;}
.event-section3 .seTop-w .list01{position:absolute;top:215px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:20px;}
.event-section3 .seTop-w .list01 li{position:relative;display:flex;justify-content:center;}
.event-section3 .seTop-w .list01 li a{display:block;}
.event-section3 .seTop-w .list01 li a img{display:block;position:relative;z-index:3;}
.event-section3 .seTop-w .list01 li [class*='btn0']:hover:before,
.event-section3 .seTop-w .list01 li [class*='btn0']:focus-within:before{width:100%;}
.event-section3 .seTop-w .list01 li [class*='btn0']:before{z-index:2;content:'';position:absolute;bottom:0;left:0;display:block;width:0%;height:100%;transition:width 0.3s ease-in-out;}
.event-section3 .seTop-w .list01 li [class*='btn0']{border: 1px solid rgba(124, 100, 84, 0.6);}
.event-section3 .seTop-w .list01 li [class*='btn0'].disabled{background-color:#ABABAB!important;}
.event-section3 .seTop-w .list01 li [class*='btn0'].disabled img{opacity:0.6;}
.event-section3 .seTop-w .list01 li [class*='btn0'].disabled:before{display:none!important;}
.event-section3 .seTop-w .list01 li .btn01{background-color:rgba(151, 156, 98, 0.90);}
.event-section3 .seTop-w .list01 li .btn01:before{background-color:rgba(94, 97, 59, 0.90);}
.event-section3 .seTop-w .list01 li .btn02{background-color:rgba(207, 158, 64, 0.90);}
.event-section3 .seTop-w .list01 li .btn02:before{background-color:rgba(155, 110, 23, 0.90);}
.event-section3 .seTop-w .list01 li .btn03{background-color:#FF4B84;}
.event-section3 .seTop-w .list01 li .btn03:before{background-color:#CD245A;}
.event-section3 .seBottom-w{position:relative;display:flex;justify-content:center;}
.event-section3 .seBottom-w .list01{height:48px;position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:24px;}
.event-section3 .seBottom-w .list01 li{background-color:#fff;position:relative;display:flex;justify-content:center;}
.event-section3 .seBottom-w .list01 li a{display:block;}
.event-section3 .seBottom-w .list01 li a:hover,
.event-section3 .seBottom-w .list01 li a:focus-within{opacity:0.8;}
.event-section3 .seBottom-w .list02{height:110px;position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:24px;}
.event-section3 .seBottom-w .list02 li{width:280px;position:relative;display:flex;justify-content:center;}
.event-section3 .seBottom-w .list02 li img{display:block;width:110px;height:110px;opacity:0;transition:opacity 0.3s ease-in-out;}
.event-section3 .seBottom-w .list02 li.active img{opacity:1;-webkit-animation-name: pulse;
    animation-name: pulse;
    animation-delay:0.1s;
    -webkit-animation-delay:0.1s;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.3s;
    opacity: 0;
    -webkit-animation-fill-mode:forwards;
     animation-fill-mode:forwards;}

@-webkit-keyframes pulse{
    0%{
      opacity: 0;
    }
    10%{
      opacity:.50;
      transform-origin: 50% 50%;
      transform: rotate(-2deg) scale(8);
      transition: all .3s cubic-bezier(0.6, 0.04, 0.98, 0.335);
    }
    100%{
      opacity:1;
      transform: rotate(-15deg) scale(1);
    }
  }
  
/* notice */
.eventNotice-w{position:relative;overflow:hidden;margin:0 auto;width:100%;min-width:1200px;background-color:#F2F2F2;font-size:14px;padding-bottom:50px;}
.eventNotice-box{margin:0 auto;width:1200px;}
.eventNotice-title{position:relative;overflow:hidden;padding:50px 0 16px 32px;display:block;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;text-align:left;font-family:'SUIT',sans-serif;line-height:normal;color:#888;font-size:23px;font-weight:500;border-bottom:1px solid #707070;}
.eventNotice-title:before{position:absolute;overflow:hidden;content:'';display:block;left:0;top:56px;width:24px;height:24px;background-image:url('../img/ico_check.svg');background-repeat:no-repeat;background-position:50% 50%;background-size:100%;}
.eventNotice-text{display:block;margin:16px 0;font-weight:700;color:#888;}
.eventNotice-list{display:flex;flex-direction:column;gap:10px;overflow:hidden;}
.eventNotice-inner{position:relative;display:block;padding-left:22px;font-family:'SUIT',sans-serif;font-weight:400;line-height:normal;color:#888;}
.eventNotice-inner:before{position:absolute;display:block;content:'';left:0;top:8px;width:4px;height:4px;border-radius:50%;background-color:#888;}
.eventNotice-inner>a{color:#888;}