@charset "utf-8";

/*fonts*/

/*HGGGothicssi_Pro*/
@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');
}
@font-face {
	font-family: 'HGGGothicssi_Pro'; font-weight:900;
	src:  url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.eot'); 
    src: 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.ttf') format('truetype'), 
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.woff2') format('woff2'),
    url('/webPub/sc_2018/font/HGGGothicssi_Pro/HGGGothicssi_Pro_99g.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;}

/*////////////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: 1240px;}

/*= CONTENT =*/
#savering{margin: 0 auto; max-width: 1920px; min-width: 130px;}
#savering .swiper-wrapper{cursor: grab; will-change: transform;}
#savering .swiper-slide {flex-shrink: 0;}

#savering .div-sec{max-width:1920px; min-width:1250px; position:relative;}
#savering .div-sec img{display:block;}
#savering .div-sec img.center-img{position: relative; top: 0; left: 50%; transform: translateX(-50%); display: block; max-width: none;}
#savering .div-sec .screen-out {position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important;}
#savering .div-sec .div-inner{position: absolute; top: 0; left: 50%; bottom:0; margin-left: -675px; width: 1350px;}

.area01{overflow: hidden; background:#faf4ed; height:980px;}
.area01 .a1-left{position:absolute; top:0px; left: -285px; width:960px; height:100%; font-family: 'HGGGothicssi_Pro'; font-weight: 600;}
.area01 .a1-left .a1-subTitle{position: absolute; left: 218px; top: 93px; font:inherit; font-size: 20px; color: #ea0429; line-height:1; letter-spacing: -0.05em;}
.area01 .a1-left .a1-title01{position: absolute; left: 212px; top: 136px; font:inherit; font-size: 60px; font-weight: 900; color: #ea0429; line-height:1; letter-spacing: -0.04em;}
.area01 .a1-left .a1-title02{position: absolute; left: 0px; top: 231px;}
.area01 .a1-left .a1-title02 .a1t2-ring{position: absolute; left: 368px; top: 98px;}
.area01 .a1-left .a1-title02 .a1t2-sub{position: absolute; left: 677px; top: 60px; font-family:"HGGGothicssi_Pro"; font-weight:800; font-size:27px; color:#ea0429; line-height:1; letter-spacing:0.01em;}
.area01 .a1-left .a1-text{position: absolute; left: 218px; top: 755px; font:inherit; font-size: 27px; color: #555555; line-height: 1.555; letter-spacing: -0.04em;}
.area01 .a1-left .a1-title02 svg{overflow: visible; position:absolute; top:0px; left: -6px; width:989.04px;}
.area01 .a1-left .a1-title02 svg .ecg-line-base {fill: none; stroke: transparent; stroke-width: 3px; stroke-miterlimit: 10;}
.area01 .a1-left .a1-title02 #follower { position: absolute; width: 25px; height: 25px; background: red; border-radius: 50%; border:1.5px solid red; box-shadow: 0 0 2px #ea0429, 0 0 4px #ea0429, 0 0 6px #ea0429; pointer-events: none; opacity: 0;}
.area01 .a1-left .a1-title02 #follower.on{opacity: 1;}

.area01 .video-wrap{position:absolute; top:0px; right:-285px; width:960px; height:100%; background-color: #333; background-image: url('/webPub/sc_2025/savering/images/a1-cover.jpg'); background-size: cover; background-position: top center;}
.area01 .video-wrap iframe{width:100%; height:100%; opacity:0; transition:.5s .25s ease-out; transform: translateZ(0); backface-visibility: hidden;}
.area01 .video-wrap iframe.on{opacity: 1;}

.area02{overflow: hidden; margin: 120px 0; height: 698px; background:#fff;}
.area02 .swiper1{overflow: visible; margin-left: -285px; width:2050px; height:700px;}
.area02 .swiper1 .swiper-slide{overflow: hidden; width:490px; height: 580px;}
.area02 .swiper1 .swiper-slide img{width:auto; height:100%; scale: 1; filter: blur(0); transition: .5s;}
.area02 .swiper1 .swiper-slide.blur img{scale: 1.2; filter: blur(10px);}
.area02 .swiper1 .swiper-fix{position: absolute; top:0; left:520px; width:490px; z-index: 2;}
.area02 .swiper1 .swiper-fix .sf-inner{position: absolute; top:0; left:0; right:0; bottom:0; margin:0 36px 40px 36px;}
.area02 .swiper1 .swiper-fix .sf-inner > span{position: absolute; top:359px; left:0; font-family: 'HGGGothicssi_Pro'; font-weight: 900; font-size: 80px; color:#ffffff; line-height: 1.2; letter-spacing: -0.025em;}
.area02 .swiper1 .swiper-fix .sf-inner a{position: absolute; top:572px; left:0; display: flex; align-items: center; justify-content: center; width:203px; height: 46px; font-size: 18px; color:#ffffff; line-height: 0.5; letter-spacing: -0.025em; border:2px solid #fff; transition:.2s;}
.area02 .swiper1 .swiper-fix .sf-inner a:hover{background-color: #ffffff; color:#000000;}
.area02 .swiper1 .swiper-fix .sf-inner .s1-pagination{position: absolute; bottom:0; left:0; top:unset; right: 0; height: 3px !important; background: #d5d5d5;}
.area02 .swiper1 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #000000;}
.area02 .swiper1 .swiper-fix .sf-inner .s1-fraction{position: absolute; bottom: 10px; right: 0; width: auto; font-size: 20px; color: #000000; letter-spacing: 0; text-align: right;}

.area03{height: 980px; background:#faf4ed;}
.area03 .a3-left{position:absolute; top:0; left: -285px; padding-left:285px; width:1160px; height:100%; font-family: 'S-Core'; background:url('/webPub/sc_2025/savering/images/a3-bgLogo.png')no-repeat; background-position: left top;}
.area03 .a3-left .a3-title{display: flex; align-items: flex-end; position: absolute; left: 341px; top: 93px; font:inherit; font-size: 24px; font-weight: 400; color: #222222; line-height:1.2; letter-spacing: -0.025em;}
.area03 .a3-left .a3-text{position: absolute; left: 341px; top: 162px; font:inherit; font-size: 24px; font-weight: 400; color: #222222; line-height:1.5; letter-spacing: -0.03em;}
.area03 .a3-left .a3-text span{font-weight: 500; color: #ea0429; line-height:1.5; letter-spacing: -0.03em;}
.area03 .a3-left .a3-cont01{position: absolute; left: 341px; top: 810px; font:inherit; font-size: 20px; font-weight: 400; color: #333333; line-height:1.5; letter-spacing: -0.065em;}
.area03 .a3-left .a3-cont01 span{font:inherit; font-weight: 600; color: #333333; line-height:1.5; letter-spacing: -0.065em;}
.area03 .a3-right{position:absolute; top:0; right: -285px; width:760px; height:100%; font-family: 'S-Core'; overflow: hidden;}
.area03 .a3-right .a3-spotlight {position: absolute; top: 288px; left: 113px; width: 0; height: 0; background: transparent; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4); border:0 solid rgba(255, 255, 255, 0.5); transition:.6s;}
.area03 .a3-right .a3-spotlight.on{width: 382px; height: 382px; border: 1px solid rgba(255, 255, 255, 0.5);}
.area03 .a3-right .a3-spotlight .a3-dot{position: absolute; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; opacity: 0;}
.area03 .a3-right .a3-spotlight.on .a3-dot{opacity: 1;}
.area03 .a3-right .a3-spotlight .a3-dot.a3d01{top:-5px; left:-5px;}
.area03 .a3-right .a3-spotlight .a3-dot.a3d02{top:-5px; left:50%; transform: translateX(-50%);}
.area03 .a3-right .a3-spotlight .a3-dot.a3d03{top:-5px; right:-5px;}
.area03 .a3-right .a3-spotlight .a3-dot.a3d04{top:50%; left:-5px; transform: translateY(-50%);}
.area03 .a3-right .a3-spotlight .a3-dot.a3d05{top:50%; right:-5px; transform: translateY(-50%);}
.area03 .a3-right .a3-spotlight .a3-dot.a3d06{bottom:-5px; left:-5px;}
.area03 .a3-right .a3-spotlight .a3-dot.a3d07{bottom:-5px; left:50%; transform: translateX(-50%);}
.area03 .a3-right .a3-spotlight .a3-dot.a3d08{bottom:-5px; right:-5px;}
.area03 .a3-right .a3-cont02{position: absolute; left: 113px; top: 810px; font:inherit; font-size: 20px; font-weight: 500; color: #ffffff; line-height:1.5; letter-spacing: -0.065em;}
.area03 .a3-right .a3-cont02 span{font:inherit; letter-spacing: -0.1em;}

/* 3d */
.area03 .a3-scene-wrap{position: absolute; top:290px; left:341px;}
.area03 .a3-scene-wrap #viewer-box {width: 500px; aspect-ratio: 1/1;overflow: hidden;}
.area03 .a3-scene-wrap canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.area03 .a3-scene-wrap #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;}
.area03 .a3-scene-wrap .spinner {width: 50px; height: 50px;}
.area03 .a3-scene-wrap .spinner circle {fill: none; stroke: #4a9eff; stroke-width: 4; stroke-linecap: round; animation: spinner 1.5s ease-in-out infinite;}
@keyframes spinner {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
.area03 .a3-scene-wrap #error-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: flex-end;}
.area03 .a3-scene-wrap #error-image {max-width: 100%; max-height: 100%; object-fit: contain;}
.area03 .a3-scene-wrap .a3-noti{position: absolute; top: 435px; right: -214px;}
/* //3d */

.area04{height: 298px; background: #e4dcd0;}
.area04 .div-inner{display: flex; align-items: center; gap:130px;}
.area04 .a4-left{margin-top:12px; position:relative; display: flex; justify-content: center; width:430px;}
.area04 .a4-left .a4-line{overflow: hidden; position: absolute; top:9px; left:2px; width: 0;}
.area04 .a4-left .a4-line.on{animation: slideReveal 3s ease-in-out infinite;}
@keyframes slideReveal {
  0% {
    width: 0;
  }
  10% {
    width: 0;
  }
  70% {
    width: 423px;
    opacity: 1;
  }
  100% {
    width: 423px;
    opacity: 0;
  }
}
.area04 .a4-right{display: flex; flex-direction: column; font-family: 'S-Core';}
.area04 .a4-right .a4-title{margin-top:8px; display: flex; align-items: flex-end; font:inherit; font-size: 22px; font-weight: 500; color: #222222; line-height:1.2; letter-spacing: -0.04em;}
.area04 .a4-right .a4-text {margin-top: 15px; font: inherit; font-size: 22px; font-weight: 500; color: #222222; line-height: 1.727; letter-spacing: -0.04em;}

.area05{overflow: hidden; margin: 120px 0; height: 730px; background:#fff;}
.area05 .swiper2{overflow: visible; margin-left: -262px; width:1874px; height:730px;}
.area05 .swiper2 .swiper-slide{overflow: hidden; width:600px; height: 600px; }
.area05 .swiper2 .swiper-slide img{width:auto; height:100%; filter: blur(0); transition: .5s;}
.area05 .swiper2 .swiper-slide.blur img{scale: 1.2; filter: blur(30px);}
.area05 .swiper2 .swiper-fix{position: absolute; top:0; left:637px; width:600px; z-index: 2;}
.area05 .swiper2 .swiper-fix .sf-inner{position: absolute; top:0; left:0; right:0; bottom:0; margin:0 36px 40px 36px;}
.area05 .swiper2 .swiper-fix .sf-inner > span{position: absolute; top:64px; left:0; font-family: 'HGGGothicssi_Pro'; font-weight: 900; font-size: 80px; color:#ffffff; line-height: 0.5; letter-spacing: -0.025em; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}
.area05 .swiper2 .swiper-fix .sf-inner .s2-pagination{position: absolute; bottom:0; left:0; top:unset; right: 0; height: 3px !important; background: #d5d5d5;}
.area05 .swiper2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #000000;}
.area05 .swiper2 .swiper-fix .sf-inner .s2-fraction{position: absolute; bottom: 10px; right: 0; width: auto; font-size: 20px; color: #000000; letter-spacing: 0; text-align: right;}

.area06 .a6-text01{position: absolute; top:128px; left:52px; display: flex; flex-direction: column; font-family: 'S-Core'; font-weight: 500; font-size: 34px; color:#333333;}
.area06 .a6-text01 > span{font:inherit; line-height: 1; letter-spacing: -0.05em;}
.area06 .a6-text01 .a6-t12{margin-top:22px;}
.area06 .a6-text01 .a6-t13{margin-top:26px;}
.area06 .a6-text02{position: absolute; top:351px; left:52px; display: flex; flex-direction: column; font-family: 'S-Core'; font-weight: 500; font-size: 24px; color:#333333}
.area06 .a6-text02 > span{font:inherit; line-height: 1; letter-spacing: -0.05em;}
.area06 .a6-text02 .a6-t22{margin-top:14px; display: flex;}
.area06 .a6-text02 .a6-t23{margin-top:18px; font-size: 20px;}
.area06 .a6-btnWrap{position: absolute; top:517px; left:52px; display: flex; gap:13px;}
.area06 .a6-btnWrap a{display: flex; align-items: center; justify-content: center; width:275px; height:80px; font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size: 27px; letter-spacing: 0.005em;}
.area06 .a6-btnWrap a.a6-btn01{color: #ffffff; background: #e21623;}
.area06 .a6-btnWrap a.a6-btn02{color: #e21623; background: #ffffff; border:3px solid #e21623;}

.area07{display: flex; flex-direction: column; align-items: center;padding:170px 0 70px; background: #faf4ed;}
.area07 .a7-title{display: flex; align-items: center; justify-content: space-between; width:1128px; font-family: 'HGGGothicssi_Pro'; font-weight: 900; font-size: 95px; line-height: 1; letter-spacing: -0.025em;}
.area07 .a7-title .a7-textWrap{overflow: hidden; position: relative; width:0px; height:117px; background:#ea0429; transition:.5s;}
.area07 .a7-title .a7-textWrap.on{width:380px;}
.area07 .a7-title .a7-textWrap .a7-text01{position:absolute; top:0; left:0; width:380px; height:117px; display: flex; align-items: center; justify-content: center; font:inherit; color:#ffffff; }
.area07 .a7-title .a7-text02{display: flex; align-items: center; height: 117px; font:inherit; color:#222222;}
.area07 .a7-text03{display: flex; align-items: center; margin-top:40px; font-family: 'S-Core'; font-weight: 500; font-size:32px; color:#555555; line-height: 1; letter-spacing: -0.05em;}
.area07 .a7-listWrap{margin-top:148px;}
.area07 .a7-listWrap > img{position: relative; z-index: 2;}
.area07 .a7-listWrap ul{display: flex; justify-content: space-between; margin-top:-506px;}
.area07 .a7-listWrap ul li{width:430px;}
.area07 .a7-listWrap ul li .a7l-top{position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 418px; z-index: 2;}
.area07 .a7-listWrap ul li:first-child .a7l-top{padding-right: 10px;}
.area07 .a7lt-subTitle01{margin-top:35px; padding:8px 10px; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 40px; color:#ffffff; line-height: 1; letter-spacing: -0.04em; background:#ea0429;}
.area07 .a7lt-subTitle02{margin-top:7px; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 40px; color:#222222; line-height: 1.25; letter-spacing: -0.04em;}
.area07 .a7lt-cont{margin-top:26px; font-weight: 500; font-size: 24px; color:#555555; line-height: 1.333; letter-spacing: -0.04em; text-align: center;}
.area07 .a7-listWrap ul li .a7l-bottom{position: relative; display: block; margin-top: 82px; perspective: 1000px;}
.area07 .a7-listWrap ul li .a7l-bottom .a7lb-wrap{display:block; position:relative; opacity:0; transform-style: preserve-3d;}
.area07 .a7-listWrap ul li .a7l-bottom .a7lb-wrap.on{animation: flip-in-ver-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.area07 .a7-listWrap ul li .a7l-bottom .a7lb-wrap .a7lb-cont{position: absolute; bottom:30px; left:0; width:100%; font-family: 'MaruBuriSemiBold'; font-size:21.5px; color:#ffffff; line-height: 1.498; letter-spacing: -0.025em; text-align: center;}
.area07 .a7-listWrap ul li .a7l-bottom .a7lb-wrap .a7lb-cont span{font:inherit; letter-spacing: -0.075em;}
.area07 .a7-listWrap .a7-noti{margin-top:30px; font-size: 17px; color:#333333; line-height: 1.588; letter-spacing: -0.05em; text-align: right;}
@keyframes flip-in-ver-right {
  0% {
    transform: rotateY(-70deg);
    opacity: 0;
  }
  1% {
    transform: rotateY(-70deg);
    opacity: 1;
  }
  60% {
    transform: rotateY(15deg);
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}

.area08{overflow: hidden; height: 100vh; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 50px; color:#ffffff; line-height: 1; letter-spacing: -0.025em; background: url('/webPub/sc_2025/savering/images/a8-bg.jpg') no-repeat; background-size: cover; background-position: center center;}
.area08 .a8-top{position:absolute; top:50%; left:0; margin-top:-20%; width:100%; text-align: center;}
.area08 .a8-top .a8t-line01{display: flex; flex-direction: row; align-items: flex-end; justify-content: center;}
.area08 .a8-top .a8t-line02{overflow: hidden; margin-top:65px; max-height: 100px; transition: 1s;}
.area08 .a8-top .a8t-line02.height0{max-height: 0;}
.area08 .a8-top .a8t-line03{display: flex; align-items: center; justify-content: center; gap:18px; margin-top:26px;}
.area08 .a8-top .a8t-line03 span{overflow: hidden; position: relative; display: inline-block; padding:14px 10px; border:1px solid #ffffff; transition:.2s;}
.area08 .a8-top .a8t-line03 span:after {content: ""; height:150px; opacity: 1; position: absolute; top: -40px; left: -200px; background: #fff;-webkit-transform: rotate(35deg);transform: rotate(35deg);-webkit-transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);width: 50px; z-index: 1;}
.area08 .a8-top .a8t-line03 span.active:after {left: 400px;}
.area08 .a8-top .a8t-num{margin-right:22px; filter: drop-shadow(5px 0px 5px rgba(0, 0, 0, .2));}
.area08 .a8-top.a8t02{opacity: 0;}
.area08 .a8-bottom{position: absolute; top:72.5%; left:0; width:100%; text-align: center;}
.area08 .a8-scroll{position: absolute; bottom:8%; left:50%; transform: translateX(-50%); font-size:18px; font-weight: 600; letter-spacing: 0.05em; animation: fadeLoop 0.8s infinite ease-in-out alternate;}
@keyframes fadeLoop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.area09{position: relative;}
.area09 .a9-text{position:absolute; top:265px; right:55px; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 50px; color:#ffffff; line-height: 1.48; letter-spacing: 0; text-align: right;}
.area09 .a9-text span{font:inherit; letter-spacing: -0.05em;}
.area09 .a9-btn{position: absolute; top:537px; right:55px; display: flex; align-items: center; justify-content: center; padding:0 197px 0 60px; width:493px; height:80px; font-family: 'HGGGothicssi_Pro'; font-weight: 600; font-size: 27px; color:#ffffff; line-height: 1; letter-spacing: 0; background:#db291d url('/webPub/sc_2025/savering/images/a9-arr.png')no-repeat; background-size: 146px 10px; background-position: top 30px right 50px;}

.area10{padding-top:110px; padding-bottom: 97px; background:#f6f6f6;}
.area10 .a10_wrap{margin:0 auto; width:1240px;}
.area10 .a10_wrap .a10_title01{text-align:center;}
.area10 .a10_tab_wrap .htab_area{overflow:hidden; display: flex; padding-top:70px; }
.area10 .a10_tab_wrap .htab_area > li{flex: 1;  display: flex; align-items: center; justify-content: center; height:80px; font-family:"HGGGothicssi_Pro"; font-weight:600; font-size:27px; color:#222; letter-spacing: 0.005em; text-align:center; background:#fff; border:1px solid #dedede; cursor: pointer;}
.area10 .a10_tab_wrap .htab_area > li + li{margin-left: -1px;}
.area10 .a10_tab_wrap .htab_area > li.on{background:#da291c; border:1px solid #da291c; color:#ffffff; z-index: 1;}
.area10 .a10_tab_wrap .hcontent_area > div{display:none;}
.area10 .a10_tab_wrap .hcontent_area > div.on{display:block;}
.area10 .faq-container {width: 1240px; display: flex; flex-direction: column; margin: 50px auto 0; padding: 0; list-style: none;}
.area10 .faq-container li.faq {position: relative; background-color: #ffffff; overflow: hidden; cursor:pointer; margin-bottom: 20px;}
.area10 .faq-container li.lastFaq{margin-bottom:0;}
.area10 .faq-container .faq-title {position: relative; display: flex; align-items: center; margin: 0; padding:45px 0; font-weight:500; font-size: 24px; color:#333333; letter-spacing:0.04em; line-height:1;}
.area10 .faq-container .faq .faq-title:after{content:'＋'; position:absolute; top:50%; right:50px; font-size: 30px; font-weight: 200; color:#ea0429; transform:translateY(-50%) rotate(-90deg); transition:.45s;}
.area10 .faq-container .faq.active .faq-title:after{content:'－'; transform:translateY(-50%) rotate(0deg); transition:.45s;}
.area10 .faq-container .faq-title span{margin:0 20px 0 50px; width:22px; height:26px; background:url('/webPub/sc_2025/savering/images/a10-q.png')no-repeat; background-size:cover; background-position: center center;}
.area10 .faq-container .faq-answer {max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out;}
.area10 .faq-container .faq.active .faq-answer {max-height: 500px; transition: max-height 0.5s ease-in;}
.area10 .faq-container .faq-answer .faq-text {margin: 0 50px 35px 50px; padding:30px 0 0 43px; color: #333333; font-family:'SpoqaHanSansNeo'; font-weight:400; font-size: 20px; letter-spacing:-0.025em; line-height:1.6; word-break: keep-all; border-top:1px solid #e5e5e5;}

.copy-area {padding:40px 0;background:#ffffff;}
.copy-area p {font-size: 19px; text-align: center; color: #333333;}

.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;}

:root {
  --s-1: #f3decd;
  --s-2: #f7e9db;
  --s-3: #f7eae1;
  --s-4: #f3decd;

  --float-speed: 8s; /* 🔥 전체 속도 컨트롤 */
}

.float_area { overflow: hidden; position: fixed; right: 60px; bottom: -200px; width: 330px; height: 160px; box-shadow: 5px 5px 0px rgba(0,0,0,0.1); z-index:2; transition:.8s;}
.float_area .float-bg { position: absolute; inset: 0; overflow: hidden; will-change: transform, background-position; transition: var(--float-speed) ease-in-out; }
.float_area .float-bg::before { 
  content: ''; position: absolute; z-index: -1; top: -50%; left: -5%; width: 200%; height: 300%; mix-blend-mode: color;

  background:
  radial-gradient(6% 10% at 77% 20%, var(--s-1) 5%, var(--s-2) 60%, var(--s-2) 65%, var(--s-3) 80%, transparent 95%),
  radial-gradient(25% 69% at 40% 10%, var(--s-1) 40%, var(--s-2) 60%, var(--s-3) 90%, transparent),
  radial-gradient(20% 55% at -2% 10%, var(--s-1) 50%, var(--s-3) 85%, transparent),
  radial-gradient(12% 19% at 31% 98%, var(--s-1) 30%, var(--s-3) 80%, transparent),
  radial-gradient(18% 19% at 0 94%, var(--s-1), var(--s-3) 75%, transparent),
  radial-gradient(30% 43% at 73% 83%, var(--s-1) 55%, var(--s-3), transparent),
  radial-gradient(40% 50% at 20% 20%, var(--s-3), transparent),
  radial-gradient(40% 65% at 40% 25%, var(--s-3), var(--s-1) 80%, transparent),
  radial-gradient(70% 70% at 110% 85%, var(--s-3), transparent),
  radial-gradient(30% 23% at 5% 65%, var(--s-4), var(--s-1) 40%, transparent),
  radial-gradient(100% 100% at 70% 20%, var(--s-3), var(--s-4));

  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: var(--float-speed) ease-in-out;
}
.float_area .float-bg::after { 
  content: ''; position: absolute; top: -100%; bottom: -100%; left: 0; width: 200%; z-index: 1; mix-blend-mode: overlay; opacity: 1; 

  background: linear-gradient( 120deg, transparent 10%, rgba(255,255,255,.5), rgba(255,255,255,.9), transparent 20%, transparent 30%, rgba(255,255,255,1), rgba(255,255,255,.75), transparent 70%, rgba(255,255,255,1), rgba(255,255,255,.75), transparent ); 

  transform: translate3d(-50%, 0, 0);
  transition: var(--float-speed) ease-in-out; 
}
.float_area .float-bg.on::before { background-position: 100% 0%; }
.float_area .float-bg.on::after { transform: translate3d(0%, 0, 0) scale3d(1.5, 1.2, 1); }

.float_area.on {bottom:5px;}
.float_area.on8 {bottom:50%; transform: translateY(50%);}
.float_area a {position: relative; display:flex; gap:20px; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100%;}

.float_area .fBtn-left img{animation: talkupdown 5s 1s ease-in-out infinite;}

@keyframes talkupdown {
  0% {
    transform: translateY(6px);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(6px);
  }
}
.float_area .fBtn-right{display: flex; flex-direction: column; gap:20px;}
.float_area .fBtn-right .fBtn-text{font-family:"HGGGothicssi_Pro"; font-weight:800; font-size:25px; color:#222; letter-spacing: -0.06em; line-height: 1.4;}

.no_scroll{overflow-y:hidden !important;}
.savering_pop_wrap{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #222; z-index:99999; overflow-y:scroll;}
.spop_inner{position:relative; margin:0 auto; padding-top:98px; padding-bottom:90px; width:848px; text-align:center;  z-index: 11;}
.spop_cont01{font-family:"HGGGothicssi_Pro"; font-weight:800; font-size:25px; color:#ffffff; letter-spacing:0; line-height:1;}
.spop_cont02{display: flex; justify-content: center; align-items: flex-end; margin-top:14px; font-family:"HGGGothicssi_Pro"; font-weight:800; font-size:24px; color:#fff; letter-spacing:0; line-height:1.1;}
.spop_cont03{display: flex; justify-content: center; text-align: left; margin-top:46px; font-size:17px; color:#fff; letter-spacing:-0.04em; line-height:1.705;}
.spop_cont04{margin-top: 22px; width:100%; text-align: right; font-size:15px; color:#fff; letter-spacing:-0.04em; line-height:1;}
.spop_cont05{display: flex; justify-content: center; text-align: left; margin-top:20px; font-size:16px; color:#fff; letter-spacing:-0.04em; line-height:1.6875;}
.select_area{margin-top:42px; padding-bottom:20px;}
.select_area:after{content:''; display:block; clear:both;}
.select_area .select_ring{float:left; display: flex; flex-wrap: wrap;}
.select_area .sb_wrap{display: flex; justify-content: space-between; gap:22px; width:100%;}
.select_area .sb_wrap button{display: flex; flex-direction: column; justify-content: center; gap: 8px; flex:1; height:95px; color:#fff; border:1px solid #7a7a7a; border-radius:10px; background:#222; cursor: pointer; transition:.3s;}
.select_area .sb_wrap button.btnOn{color:#222; border:1px solid #fff; background:#fff;}
.select_area .sb_wrap button p{font-weight:400; font-size:16px; line-height: 1.2; letter-spacing: -0.04em;}
.select_area .sb_wrap button p:nth-child(2){font-size:15px; line-height: 1.2;}
.select_area .sb_wrap button p span{font-weight:600; font-size:25px;}
.select_area .sb_wrap button p b{display:none;}

.select_area .sg_wrap{margin-top:22px; display: flex; gap:20px;}
.select_area .sg_wrap .goods_img{overflow: hidden; border-radius: 15px;}
.select_area .sg_wrap .goods_img img{display:block;}

.spop_ok_btn{display:block; margin-top:32px; width:100%; height:70px; line-height:70px; font-family:"HGGGothicssi_Pro"; font-weight:600; font-size:23px; color:#fff !important; background:#c61a0e; border-radius:15px;}
.spop_close_btn{display:block; position:absolute; top:56px; right:0;}