@charset "utf-8";

@font-face {
  font-family: 'HGGGothicssi_Pro'; font-weight:200;
  src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_20g.woff') format('woff');
}

@font-face {
  font-family: 'HGGGothicssi_Pro'; font-weight:600;
  src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_60g.woff') format('woff');
}

@font-face {
  font-family: 'HGGGothicssi_Pro'; font-weight:800;
  src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_80g.woff') format('woff');
}

/* reset */
*{padding:0; margin:0; text-decoration:none; list-style:none; box-sizing:border-box;}
body {overflow-x:hidden; zoom:1;}
ul, ol{list-style-type:none;}
img,fieldset{border:none;}
body, input, textarea, select, button, table{font-size:13px; color:#666; font-family:"SpoqaHanSansNeo", "Apple SD Gothic Neo", Helvetica, sans-serif, Arial; font-weight: 400;}
a{text-decoration:none; color:#666; }
a:link, a:visited{text-decoration:none; color:#666; /*outline: none!important;*/}
a:hover, a:active{text-decoration:none; color:#666; /*outline: none!important;*/}
input{border:0;}
select{vertical-align: top;height:24px;border:1px solid #c5c5c5;}
iframe{border: 0; margin: 0; padding: 0;}
button {overflow: visible; padding: 0; margin: 0; background: none; border: 0;}

/* custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f7eae1;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #7c7c7c;
    border-radius: 3px;
  }

  ::-webkit-scrollbar-button {
    display: none;
  }

/*////////////header////////////*/
/*common*/
.emergency_relief_cnts_top {
  height: 30px;
}
.CampaignList{left: 47.75%; margin-left: -274px; top: 30px;}
.CampaignList ul {padding: 6px 14px !important;}
.CampaignList ul li {margin-bottom: 7px;}

/*white*/
.emergency_relief_cnts_top {
  background: #fff;
  border-bottom-color: #dadada;
}
.emergency_relief_cnts_top ul.util_right li a {
  color: #7f7f7f;
}
.emergency_relief_cnts_top ul.util_right .save_user,
.emergency_relief_cnts_top ul.util_right .save_user strong{ 
  color:#000;
}

/*brown*/
/*.emergency_relief_cnts_top {height: 30px;}*/

/*footer
#footer {width: 100%; height: auto; background: #fffbf7; border-top: 2px solid #ed425a;}
#footer .inner {width: 1000px; margin: 0 auto; position: relative; min-height: 72px; padding-top: 22px;}*/

/*common*/
body.on{overflow: hidden;}
#wrap{margin: 0 auto; max-width: 1920px; min-width: 1320px;}

/*contents*/
/*해당 캠페인에서만 gnb 고정*/
.emergency_relief_cnts_top {position: fixed; top:0;}

.content_area{margin: 0 auto; max-width: 1920px; min-width: 1320px;}

.div_sec{width:540px; overflow:hidden; position:relative;}
.div_sec img{display:block;}

.div_sec .screen_out {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
.div_sec .div_inner{position: absolute; top: 0; left: 50%; bottom:0; margin-left: -624px; width: 1248px;}

.device-contents{position: relative; display: flex; justify-content: center; gap: 70px; background: linear-gradient(to right, #cfe2e0 10%, #e5dece 56%, #f7eae1 83%);}

/*left mobile*/
.contents-mobile{position: relative; flex-shrink: 0; overflow: hidden; margin-top:80px; margin-bottom:80px; border-radius: 15px; overflow-y: auto;}

.area01{position: relative; margin-top: 30px; height:570px; border-radius: 15px 15px 0 0;}
.area01 .swiper1{cursor: grab;}
.area01 .a1-logo{position: absolute; top:84px; left:66px; z-index:2;}
.area01 .a1-btn-wrap{position: absolute; top:466px; left:30px; width: 280px; height: 50px; box-sizing: border-box; z-index: 2;}
.area01 .a1-btn-wrap::after{content: ''; position: absolute; top:9px; left:7px; width:100%; height:100%; background: transparent; border:1px solid #fff; z-index: 1;}
.area01 .a1-btn-wrap .a1-btn{position: relative; overflow: visible; display: flex; align-items: center; padding-left: 33px; width:100%; height:100%; background: #ffffff; z-index: 2; transition: 0.3s;}
.area01 .a1-btn-wrap .a1-btn .btn-text{font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 20px; color: #000000; letter-spacing: -0.01em;}
.area01 .a1-btn-wrap .a1-btn .btn-text span{font:inherit; color:#da291c;}
.area01 .a1-btn-wrap .a1-btn .btnArrow{position: relative; margin-left:18px; height:12px}
/*hover
.area01 .a1-btn-wrap:hover .a1-btn{background: #d1d1d1;}*/

.area02{padding-bottom:64px; background:#fff;}
.area02 .a2-top{padding:32px 20px; border-top:2px solid #000;}
.area02 .a2-top .a2t-line{display: flex; align-items: center;}
.area02 .a2-top .a2t-line:last-child{margin-top: 7px;}
.area02 .a2-top .a2t-line div{margin-left: 20px; font-family: 'Lato'; font-weight: 400; font-size: 18px; color:#222; letter-spacing: -0.025em;}
.area02 .a2-top .a2t-line div span{font:inherit; font-weight: 900;}
.area02 .a2-mid{padding:70px 0 52px; border-top:1px solid #000; text-align: center;}
.area02 .a2-mid .a2m-title{font-family: 'Lato'; font-weight: 700; font-size: 42px; color:#222; letter-spacing: 0; line-height: 1.3;}
.area02 .a2-mid .a2m-title span{font:inherit; font-size: 57px; letter-spacing: -0.025em;}
.area02 .a2-mid .a2m-sub{font-family: 'Lato'; font-weight: 400; font-size: 20px; color:#222; letter-spacing: -0.025em;}
.area02 .a2-mid .a2m-img{margin-top:70px;}
.area02 .a2-mid .a2m-text{margin-top: 24px; font-weight: 500; font-size: 20px; color: #333333; letter-spacing: -0.03em; line-height: 1.5;}
.area02 .a2-bottom{margin:0 24px;}
.area02 .a2-bottom .swiper2 {width: 100%; height: 242px; margin-left: auto; margin-right: auto;}
.area02 .a2-bottom .swiper2 .swiper-slide{cursor: pointer;}
.area02 .a2-bottom .a2b-text{display: flex; align-items: center; justify-content: center; padding-top: 30px; font-size: 18px; color: #333333; letter-spacing: -0.025em;}

.area03{padding:57px 0 26px; background:#fff; border-top: 1px solid #000;}
.area03 .a3-inner{overflow: hidden; margin-left: 25px;}
.area03 .a3-title{font-family: 'Lato'; font-weight: 700; font-size: 45px; color:#333; letter-spacing: -0.025em; line-height: 1.3;}
.area03 .swiper3{overflow: visible; margin-top: 25px; cursor: grab; margin-left: 0; width:396px; height: 684px;}
.area03 .swiper3 .swiper-slide img{width:100%;}
.area03 .dancer-info{margin-top:24px; font-family: 'Lato'; font-weight: 900; font-size: 21px; color:#333; letter-spacing: -0.025em; line-height: 1.3;}
.area03 .dance-genre{margin-top: 4 px; font-family: 'Lato'; font-weight: 400; font-size: 21px; color:#222; letter-spacing: -0.025em; line-height: 1.3;}
.area03 .plus-btn{position: absolute; bottom:60px; right:0; display:block; width:48px; height:48px; border:1px solid #b5b5b5; background:#ffffff; background-size: cover; cursor: pointer; }
.area03 .plus-btn img{transition: .2s;}
.area03 .plus-btn:hover img{transform: rotate(90deg);}

.area04{display: flex; align-items: center; padding-left: 35px; width:540px; height: 169px; font-family: 'Lato'; font-weight: 700; font-size: 40px; color: #ffffff; letter-spacing: -0.025em; line-height: 1.175; background:url('/webPub/sc_2025/saveonelife/images/a4-bnr.jpg')no-repeat;}

.area05{padding:86px 0 60px; background:#ffffff;}
.area05 .a5-gallery{position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap:12px;}
.area05 .a5-gallery .a5g2{opacity: 0;}

.area05 .a5-btn-wrap{position: relative; margin: 42px 33px 0 26px; width: 481px; height: 64px; box-sizing: border-box; z-index: 2;}
.area05 .a5-btn-wrap::after{content: ''; position: absolute; top:5px; left:5px; width:100%; height:100%; background: #ffffff; border:2px solid #000; z-index: 1;}
.area05 .a5-btn-wrap .a5-btn{position: relative; overflow: visible; display: flex; align-items: center; padding-left: 106px; width:100%; height:100%; background: #ffffff; border:2px solid #000; z-index: 2; transition: 0.3s;}
.area05 .a5-btn-wrap .a5-btn .btn_text{font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 28px; color: #000; letter-spacing: -0.005em;}
.area05 .a5-btn-wrap .a5-btn .btn_text > span{font: inherit; color:#da291c}
.area05 .a5-btn-wrap .a5-btn .btnArrow{position: relative; margin-left:39px; width:68px; height:9px}
.area05 .a5-btn-wrap .a5-btn .btnArrow svg.arrow1{position: absolute;left:0;width:99%;height: 9px; fill: none; stroke: #000; stroke-miterlimit: 10; /* animation: scroll_motion 2.5s infinite;*/}
.area05 .a5-btn-wrap .a5-btn .btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:9px; fill: none; stroke: #000; stroke-miterlimit: 10;}

.area05 .a5-text{position: relative; margin-top: 36px; font-weight: 500; font-size: 20px; color: #555555; letter-spacing: -0.03em; line-height: 1.5; text-align: center;}
.area05::before{content: ''; position: absolute; bottom:0; left: 0; width:540px; height: 432px; background: #eeeeee;}

.blink-in {
  opacity: 0;
  animation: blinkTwice .4s steps(1, end) forwards;
}

@keyframes blinkTwice {
  0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}

.area06{padding:80px 0 56px; background:#ffffff;}
.area06 .a6-title-wrap{margin:0 26px;}
.area06 .a6-title-wrap .a6-subTitle{font-family: 'Lato'; font-weight: 400; font-size: 22px; color:#222; letter-spacing: -0.05em; line-height: 1.454;}
.area06 .a6-title-wrap .a6-subTitle span{font:inherit; font-weight: 900; color:#da291c; letter-spacing: -0.025em;}
.area06 .a6-title-wrap .a6-title-ani{overflow: hidden; width:0; transition:.5s;}
.area06 .a6-title-wrap .a6-title-ani.on{width:406px;}
.area06 .a6-title-wrap .a6-title{display:inline-block; margin-top: 5px; padding:8px 18px; width:max-content; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 34px; color:#fff; letter-spacing: 0.01em; line-height: 1; background:#000;}
.area06 .a6-title-wrap .a6-title span{font:inherit; color:#da291c;}
.area06 .a6-img{position: relative; margin-top: 40px; background: url('/webPub/sc_2025/saveonelife/images/a6-img-shaow.png')no-repeat; background-size: cover; background-position: 0 3px; z-index: 10;}
.area06 .a6-text-wrap{margin:8px 26px 0;}
.area06 .a6-text-wrap .a6-text01{font-family: 'Lato'; font-weight: 400; font-size: 22px; color:#222; letter-spacing: -0.02em; line-height: 1.3; text-align: right;}
.area06 .a6-text-wrap .a6-text01 span{font:inherit; font-weight: 900;}
.area06 .a6-text-wrap .a6-text02{font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size: 32px; color:#222; letter-spacing: -0.02em; line-height: 1.25; text-align: right;}
.area06 .a6-text-wrap .a6-text02 span{margin-left: 2px; font:inherit; font-weight: 800;}
.area06 .a6-text-wrap .a6-text03{font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size: 32px; color:#222; letter-spacing: -0.02em; line-height: 1.25; text-align: right;}
.area06 .a6-text-wrap .a6-text03 span{font:inherit; font-weight: 800;}
.area06 .a6-text-wrap .a6-text03 span.a6t-box{display:inline-block; margin-right: 5px; padding:4px 7px 2px; font:inherit; font-weight: 800; color:#fff; line-height: 1; background: #000;}
.area06 .swiper4{overflow: visible; margin:67px 26px 20px 26px; cursor: grab;}
.area06 .swiper4 .swiper-slide{overflow: visible; display: flex; opacity: 0 !important;}
.area06 .swiper4 .swiper-slide.swiper-slide-active{opacity: 1 !important;}
.area06 .swiper4 .swiper-slide > div{overflow: visible; position: relative; width: 237px;}
.area06 .swiper4 .swiper-slide > div:first-child{margin-right: 14px;}
.area06 .swiper4 .a6Slide-title{margin-top:20px; font-family: 'Lato'; font-weight: 900; font-size: 21px; color:#333; letter-spacing: -0.025em; line-height: 1.3;}
.area06 .swiper4 .a6Slide-sub{margin-top:7px; font-weight: 500; font-size: 18px; color:#333; letter-spacing: -0.03em; line-height: 1.666;}
.area06 .swiper4 .a6Slide-cont{margin-top:10px; font-size: 18px; color:#666; letter-spacing: -0.03em; line-height: 1.5;}
.area06 .swiper4 .a6-cont1 .line-shape {overflow: hidden; position: absolute; bottom:409px; left:31px; width:6px; height:248px; transition: .8s .3s;}
.area06 .swiper4 .a6-cont2 .line-shape {overflow: hidden; position: absolute; bottom:409px; left:-37px; width:60px; height:262px; transition: 1s .8s;}
.area06 .swiper4 .a6-cont3 .line-shape {position: absolute; bottom:409px; left:0;}
.area06 .swiper4 .a6-cont4 .line-shape {position: absolute; bottom:409px; left:-37px;}

.area06 .swiper4 .line-shape.line-hide{height: 0;}
.area06 .swiper4 .line-shape img{position: absolute; bottom:0; width:max-content; height: max-content;}

.updown1 {animation: updown1 4s ease-in-out infinite;}

@keyframes updown1 {
  0% {
    transform: translateY(4px);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(4px);
  }
}

.area07{display: flex; flex-direction: column; align-items: center; padding:46px 0; background:#ffffff; border-top: 1px solid #000;}
.area07 .a7-title{font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 27px; color: #222; letter-spacing: 0; text-align: center;}
.area07 .a7-text{margin-top:16px; font-weight: 500; font-size: 18px; color: #222; letter-spacing: -0.03em; line-height: 1.555; text-align: center;}
.area07 .a7-noti{margin-top:18px; font-weight: 500; font-size: 18px; color: #222; letter-spacing: -0.03em; line-height: 1.5; color:#da291c; text-align: center;}
.area07 .a7-btn{margin-top:20px; position: relative; overflow: visible; display: flex; align-items: center; padding-left: 24px; padding-right: 17px; width:max-content; height:50px; background: #ffffff; border:2px solid #000;}
.area07 .a7-btn .btn_text{font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 20px; color: #000; letter-spacing: 0.005em;}
.area07 .a7-btn .btnArrow{position: relative; margin-left:15px; width:17px; height:9px}
.area07 .a7-btn .btnArrow svg.arrow1{position: absolute;left:0; width:97%; height: 9px; fill: none; stroke: #000; stroke-miterlimit: 10; /* animation: scroll_motion 2.5s infinite;*/}
.area07 .a7-btn .btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:9px; fill: none; stroke: #000; stroke-miterlimit: 10;}

.area08{background: #ffffff;}
.area08 .a8-imgWrap {position: relative; width: 540px; height: 768px;}
.area08 .a8-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.area08 .a8-img img {width: 100%; height: 100%; object-fit: cover;}
.area08 .a8-img.active {opacity: 1;}
.area08 .a8-btn{display: flex; justify-content: space-between; align-items: center; padding:0 32px 0 36px; width: 100%; height: 58px; background: #222222;}
.area08 .a8-btn > span{font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 22px; letter-spacing: 0.01em; color:#ffffff;}
.area08 .a8-btn > span.a8btn-arrow{font-weight: 200;}
.area08 .a8-btn > span > span{font:inherit; color:#da291c;}

.area09{padding:60px 0; background: #ffffff;}
.area09 .a9-title{font-family: 'Lato'; font-weight: 700; font-size:46px; color:#222222; letter-spacing: 0.005em; text-align: center;}
.area09 .faq-container {margin: 41px 34px 0 34px; padding: 0; width: 472px; display: flex; flex-direction: column; list-style: none;}
.area09 .faq-container li.faq {position: relative; overflow: hidden; transition: 0.2s; cursor:pointer; border-top: 2px solid #d2d2d2;}
.area09 .faq-container .faq__title {display: flex; align-items: center; margin: 0; padding:27px 0; font-size: 20px; color: #333333; letter-spacing: -0.03em; line-height: 1; transition:.2s;}
.area09 .faq-container .faq .faq__title:after{content:''; position:absolute; top:29px; right:0; width:14px; height:14px; background:url('/webPub/sc_2025/saveonelife/images/a9_plus.png')no-repeat; background-size: cover; transition:.2s;}
.area09 .faq-container .faq.active .faq__title:after{background:url('/webPub/sc_2025/saveonelife/images/a9_minus.png')no-repeat; background-size: cover; transform:rotate(180deg);}
.area09 .faq-container .faq__answer {max-height: 0; overflow: hidden; transition: 0.4s;}
.area09 .faq-container .faq__text {margin-bottom:20px; padding: 15px 24px; color: #333; font-size: 20px; letter-spacing: -0.03em; line-height: 1.5; word-break: keep-all;}
.area09 .faq-container .faq:last-child .faq__text{margin-bottom: 0;}
.area09 .faq-container .faq.active .faq__answer {max-height: 600px; transition: 0.4s;}

.area10{background: #ffffff;}
.area10 .a10-imgWrap {position: relative; width: 540px; height: 762px;}
.area10 .a10-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s;}
.area10 .a10-img img {width: 100%; height: 100%; object-fit: cover;}
.area10 .a10-img.active {opacity: 1;}
.area10 .a10-btn{display: flex; justify-content: space-between; align-items: center; padding:0 32px 0 36px; width: 100%; height: 58px; background: #222222;}
.area10 .a10-btn > span{font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 22px; letter-spacing: 0.01em; color:#ffffff;}
.area10 .a10-btn > span.a10btn-arrow{font-weight: 200;}
.area10 .a10-btn > span > span{font:inherit; color:#da291c;}

/*right pc*/
.contents-pc{overflow: hidden; flex-shrink: 0; position:sticky; top:0; padding-top:110px; padding-right: 26px; width:1026px; height: 109vh;}
.contents-pc .div-movie{position: relative; overflow: hidden; width:100%; aspect-ratio: 12 / 5; background-image: url('/webPub/sc_2025/saveonelife/images/video-bg.jpg'); background-size: cover; background-position: top center; border-radius: 15px; z-index: 2;}
.contents-pc .div-movie iframe{margin-left: -0.5%; margin-top: -0.25%; width:101%; height:101%; opacity:0; transition:.2s .25s ease-out;}
.contents-pc .div-movie iframe.on{opacity: 1;}
.contents-pc .div-movie .soundBtn{position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.6); color:#fff; border:none; padding:8px 14px; border-radius:8px; cursor:pointer; opacity:0; transition:opacity .3s 1s; font-size:14px; pointer-events:auto;}
.contents-pc .div-movie .soundBtn.on{opacity: 1;}

.contents-pc .board-wrap{position: relative;}
.contents-pc .board-wrap .board-bg{position: absolute; top:-268px; right:0; z-index: 1;}

.contents-pc .board-title{position: relative; display:block; margin-top: 75px; font-family: "HGGGothicssi_Pro"; font-weight: 800; font-size: 29px; color:#222; letter-spacing: 0; z-index: 2;}
.contents-pc .board-text{position: relative; display:block; margin-top: 15px; font-size: 17px; color:#222; letter-spacing: -0.03em; z-index: 2;}

.contents-pc .board-btn-wrap{position: relative; margin-top: 40px; width: 340px; height: 60px; box-sizing: border-box; z-index: 2;}
.contents-pc .board-btn-wrap::after{content: ''; position: absolute; top:9px; left:7px; width:100%; height:100%; background: transparent; border:1px solid #000; border-radius: 5px; z-index: 1;}
.contents-pc .board-btn-wrap .board-btn{position: relative; overflow: visible; display: flex; align-items: center; padding-left: 42px; width:100%; height:100%; background: #222222; border-radius: 5px; z-index: 2; transition: 0.3s;}
.contents-pc .board-btn-wrap .board-btn .btn_text{font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size: 22px; color: #ffffff; letter-spacing: -0.01em;}
.contents-pc .board-btn-wrap .board-btn .btnArrow{position: relative; margin-left:24px; width:60px; height:12px}
.contents-pc .board-btn-wrap .board-btn .btnArrow svg.arrow1{position: absolute;left:0;width:99%;height: 13px; fill: none; stroke: #fff; stroke-miterlimit: 10; /* animation: scroll_motion 2.5s infinite;*/}
.contents-pc .board-btn-wrap .board-btn .btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:12px; fill: none; stroke: #fff; stroke-miterlimit: 10;}
/*hover*/
.contents-pc .board-btn-wrap:hover .board-btn{background: #ffffff;}
.contents-pc .board-btn-wrap:hover .board-btn .btn_text{color: #222222;}
.contents-pc .board-btn-wrap:hover .board-btn .btnArrow svg.arrow1{stroke: #222;}
.contents-pc .board-btn-wrap:hover .board-btn .btnArrow svg.arrow2{stroke: #222;}

.twinkle1 {
  position:absolute; top:52%; left:28%; width:40px; height:40px; opacity: 0;
  animation: twinkle 4.5s linear infinite;
}

.twinkle2 {
  position:absolute; top:43%; left:68%; width:40px; height:40px; opacity: 0;
  animation: twinkle 4.5s 1.5s linear infinite;
}

.twinkle3 {
  position:absolute; top:58%; left:57%; width:40px; height:40px; opacity: 0;
  animation: twinkle 4.5s 3s  linear infinite;
}


@media (max-width: 1646px) {
  .contents-pc{flex-shrink: 1;}
}

@media (max-width: 1440px) {
  .contents-pc .board-wrap .board-bg{right:-130px;}
}

/*@keyframes scroll_motion {
  0% {
      left: 0;
      width: 0;
  }

  45% {
      left: 0;
      width: 99%;
  }

  55% {
      left: 0;
      width: 99%;
  }

  100% {
      left: 99%;
      width: 0;
  }
}*/

@keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  16.667% {
    opacity: 1;
  }
  33.333% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

/* 팝업 오버레이 */
.popup-overlay {display: none; overflow-y: scroll; padding: 70px 0 70px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; opacity: 0; transition: 0.5s;}
.popup-overlay::-webkit-scrollbar-track {background: transparent;}
.popup-overlay.active {display: flex; justify-content: center; opacity: 1;}

/* 팝업 닫기 버튼 */
.popup-close {position: absolute; top: 30px; right: 30px; width: 36px; height: 34px; background:url('/webPub/sc_2025/saveonelife/images/pop/pop_closebtn.png')no-repeat; cursor: pointer; z-index: 10000; transition: all 0.3s ease;}
.popup-close:hover {transform: rotate(90deg);}

/* 팝업 컨텐츠 */
.popup-content {display: none; overflow: visible; position: relative; height: 820px; background: #ffffff;}
.popup-content.active{display:block;}

.popup-content .popup01-swiper,
.popup-content .popup02-swiper{margin:20px; width: 510px; height: 780px;}
.popup-content .popup02-swiper .swiper-wrapper{height: 644px;}

.pop01-pagination.swiper-pagination-progressbar,
.pop02-pagination.swiper-pagination-progressbar{margin: 0 20px 0 20px; width: 510px !important; height:3px !important; top: 661px !important; z-index: 10000; background:#d4d4d4 !important;}
.pop01-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.pop02-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #000000 !important;}

.pop01-fraction,
.pop02-fraction{position: absolute; top: 615px; right: 50px; width: auto; font-size: 23px; color: #000000; text-align: right; text-shadow: 0px 0px 3px #ffffff; z-index: 10000;}

.pop1-text{margin-top:24px; font-weight: 500; font-size: 20px; color:#333333; letter-spacing: -0.03em; line-height: 1.7;}
.pop1-photo{margin-top:10px; font-family: 'Lato'; font-weight: 400; font-size: 17px; color:#888888; letter-spacing: -0.065em; line-height: 1.3;}

.pop2-dancer-info{margin-top:24px; font-family: 'Lato'; font-weight: 900; font-size: 22px; color:#333333; letter-spacing: -0.025em; line-height: 1.5;}
.pop2-dance-genre{font-family: 'Lato'; font-weight: 400; font-size: 22px; color:#333333; letter-spacing: -0.025em; line-height: 1.5;}
.pop2-dance-photo{margin-top:5px; font-family: 'Lato'; font-weight: 400; font-size: 16px; color:#777777; letter-spacing: -0.025em; line-height: 1.3;}

.popup-content .popup01-swiper{cursor: grab;}
.popup-content .popup02-swiper{cursor: grab;}

/* 팝업 네비게이션 버튼 */
.popup-content .pop01-prev,
.popup-content .pop02-prev,
.popup-content .pop01-next,
.popup-content .pop02-next{position: absolute; top:50%; margin-top:-55px; padding:20px; cursor: pointer; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2)); z-index: 10000;}
.popup-content .pop01-prev,
.popup-content .pop02-prev{left:-95px;}
.popup-content .pop01-next,
.popup-content .pop02-next{right:-95px;}
.popup-content .pop01-prev.swiper-button-disabled,
.popup-content .pop02-prev.swiper-button-disabled,
.popup-content .pop01-next.swiper-button-disabled,
.popup-content .pop02-next.swiper-button-disabled{opacity: 0; cursor: default;}

/* sns share */
.sns_area{ padding:47px 0 62px; border-top:3px solid #f8f6f3;}
.sns_area h3{font-weight: normal; display: inline-block; font-size: 16px; color: #4e4e4e; vertical-align: middle; margin-right:8px;}
.sns_area .div_inner {margin: 0 auto; height: 100%; text-align: center;}
.sns_area > .div_inner > a{display: inline-block; margin-left: 14px; vertical-align: middle; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s;}
.sns_area > .div_inner > a > img{width:54px;}