@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');
}

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

/*= CONTENT =*/
.div_sec{max-width:1920px; min-width:1250px; font-family: "SpoqaHanSansNeo"; font-weight: 400;}
.div_sec img.center_img{position: relative; top: 0; left: 50%; transform: translateX(-50%); display: block; max-width: none;}
.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%; margin-left: -625px; width: 1250px;}

.pinArea{position: relative; z-index: 4;}

.area01{width: 1920px; height: 980px; z-index: 3;}
.area01 .image-container {position: relative; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 1920px; height: 980px; overflow: hidden;}
.area01 .image-container .a1_img {position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover; transition: clip-path 1.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
.area01 .image-container .a1_img.base{z-index: 1;}
.area01 .image-container .a1_img.overlay {z-index: 2; will-change: clip-path; clip-path: inset(0 0 0 0);} /* 처음 반만 보임 */
.area01 .image-container.on .a1_img.overlay {clip-path: inset(0 100% 0 0);} /* 오른쪽 절반 잘림 */
.area01 .image-container .a1_img img{width:100%;}
.area01 .overlay .a1_subTitle{position: absolute; top:150px; left:412px;}
.area01 .base .a1_subTitle{position: absolute; top:114px; left:400px;}
.area01 .a1_title{position: absolute; top:88px; right: -30px; z-index: 3;}
.area01 .a1_campName{position: absolute; top:64px; right: -13px; font-family: 'SpoqaHanSansNeoMedium'; font-size: 18px; color: #ffffff; letter-spacing: -0.05em; z-index: 3;}

.area02 {position: relative; margin-top: -140px; z-index: 4;}
.area02 .a2_title{position: absolute; top:232px; left: 0; display: block; font-family: 'MaruBuriSemiBold'; font-size:41px; color: #ffffff; letter-spacing: -0.04em; text-shadow: 0px 6px 14px rgba(0, 0, 0, 0.35);}
.area02 .a2_cont01{position: absolute; top:332px; left: 0; display: block; font-family: 'MaruBuriSemiBold'; font-size:29px; color: #ffffff; letter-spacing: -0.04em; line-height: 1.689;}
.area02 .a2_cont02{position: absolute; top:498px; left: 0; display: block; font-family:'KoPub Dotum'; font-weight: 400; font-size:22px; color: #ffffff; letter-spacing: -0.065em; line-height: 1.727; transform: rotate(-0.1deg);}

.area02 .mySwiper2{position:absolute; top:620px; left:640px; width:650px;}
.area02 .mySwiper2 .swiper-slide{opacity:0 !important;}
.area02 .mySwiper2 .swiper-slide-active{opacity:1 !important;}
.area02 .mySwiper2 .a2tb02{display: block; margin-top: 15px;}

.area02 .a2_btn{position: absolute; top:652px; left:0; display:flex; align-items: center; justify-content: center; font-family: 'S-Core'; font-weight: 500; padding:0 38px; min-width:485px; height:75px; font-size:24px; color:#ffffff; letter-spacing: -0.025em; background:#098d76; border-radius:37.5px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);}
.area02 .a2_btn span.ml8{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 29px; letter-spacing: 0.1em;}
.area02 .a2_btn span.ml8-2{margin-left: 4px; margin-right: 10px; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 29px; letter-spacing: 0.1em;}
.area02 .a2_btn span.btn_text{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 29px; letter-spacing: -0.01em;}
.area02 .a2_btn span.btnArrow{position: relative; margin-left:30px; width:80px; height:12px}
.area02 .a2_btn span.btnArrow svg.arrow1{position: absolute; left:0; width:99%; height: 13px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-miterlimit: 10;}
.area02 .a2_btn span.btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:12px; fill: none; stroke: #fff; stroke-miterlimit: 10;}

.area03 {position: relative; margin-top: -136px; z-index: 3;}
.area03 .a3_cont{position: absolute; top:200px; left: 0; display: block; width:100%; font-family: 'MaruBuriSemiBold'; font-size:40px; color: #ffffff; letter-spacing: -0.03em; line-height: 1.6; text-align: center;}
.area03 .a3p01{position: absolute; top:411px; left:352px;}
.area03 .a3p02{position: absolute; top:476px; left:441px;}
.area03 .a3p03{position: absolute; top:471px; left:540px;}
.area03 .a3p04{position: absolute; top:475px; left:768px;}
.area03 .a3p05{position: absolute; top:494px; left:911px;}

.drawArea{overflow: visible; position: relative; margin-top:-132px; height:3952px; background-image: url('/webPub/sc_2025/besideyou_v2/images/darw_bg.png'); background-size: cover; background-repeat: no-repeat; background-position: top center; z-index:4;}
.drawArea .div_inner{position: absolute; top: 0; left: 50%; margin-left: -625px; width: 1250px;}

.area04{position: relative; margin:0 auto; padding-top: 180px; width:1250px;}
.area04 .a4_cont{display: block; text-align: center;}
.area04 .a4_text{margin-top:44px; font-family: 'S-Core'; font-weight: 500; font-size:24px; line-height: 1.666; letter-spacing: -0.03em; color: #ffffff;}

.area05{position: relative; margin:260px auto 0; width:1250px; opacity: 0;}
.area05 .a5_bnr{position: relative; display: inline-block; margin-left: 240px;}
.area05 .a5_rightBox{position: absolute; top:0; right:0; width:604px; height:100%;}
.area05 .a5_title01{display: block; margin-top: 34px; width:100%; font-family:'HGGGothicssi_Pro'; font-weight: 800; font-size: 27px; color: #007a62; letter-spacing: 0; text-align: center;}
.area05 .a5_title02{display: block; margin: 6px auto 0; width:482px; height:62px; line-height: 62px; font-family:'HGGGothicssi_Pro'; font-weight: 800; font-size: 40px; color: #ffffff; background: #007a62; letter-spacing: -0.01em; text-align: center;}
.area05 .a5_title02 > span{font-size: inherit; font-weight: 400; letter-spacing: -0.075em;}
.area05 .a5_text{display: block; margin-top: 12px; width:100%; font-family:'S-Core'; font-weight: 500; font-size: 20px; color: #007a62; letter-spacing: -0.04em; text-align: center;}
.area05 .a5_textBox01{position: absolute; top:218px; left:58px;}
.area05 .a5_textBox02{position: absolute; top:357px; left:58px;}
.area05 .a5_textBox03{position: absolute; top:473px; left:58px;}
.area05 .a5_btn{position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; margin: 30px 0 0 240px; padding-left: 70px; width:1040px; height:68px; border:2px solid #daede8; border-radius: 32px; box-sizing: border-box; font-family:'S-Core'; font-weight: 500; font-size: 25px; color: #ffffff; letter-spacing: -0.025em;}
.area05 .a5_btn span.ml8{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 800; font-size: 29px; letter-spacing: -0.025em;}
.area05 .a5_btn span.ml8-2{margin-left: 4px; margin-right: 10px; font-family:'HGGGothicssi_Pro'; font-weight: 800; font-size: 29px; letter-spacing: -0.025em;}
.area05 .a5_btn span.btn_text{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 800; font-size: 29px; letter-spacing: -0.025em;}
.area05 .a5_btn:after {content: ""; height:150px; opacity: .2; position: absolute; top: -40px; left: -110px; background: #fff;-webkit-transform: rotate(35deg);transform: rotate(35deg);-webkit-transition: all 2s cubic-bezier(0.19, 1, 0.22, 1);transition: all 3s cubic-bezier(0.19, 1, 0.22, 1);width: 50px; z-index: 1;}
.area05 .a5_btn:hover:after {left: 1130px;}
.area05 .a5_btn span.btnArrow{position: relative; margin-left:30px; width:80px; height:12px}
.area05 .a5_btn span.btnArrow svg.arrow1{position: absolute; left:0; width:99%; height: 13px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-miterlimit: 10;}
.area05 .a5_btn span.btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:12px; fill: none; stroke: #fff; stroke-miterlimit: 10;}

.area06{position: relative; margin:322px auto 0; width:1250px;}
.area06 .a6_text{display: block; font-family: 'MaruBuriSemiBold'; font-size: 40px; color: #ffffff; letter-spacing: -0.04em; line-height: 1.6; text-align: left;}
.area06 .a6_bnr{position: relative; display: flex; gap: 30px; margin-top:62px;}
.area06 .a6_bnr > a{overflow: hidden; border: 3px solid transparent; border-radius: 30px; transition: .2s;}
.area06 .a6_bnr > a:hover{border: 3px solid #efff3d;}

.area06 .a6_bnr > a > img{scale: 1; transition: .5s;}
.area06 .a6_bnr > a:hover > img{scale: 1.1;}

.area06 .a6_bnr .a6b_top{position: relative; display: block; opacity: 0;}
.area06 .a6_bnr .a6b_bottom{position: relative; display: block; opacity: 0;}

.area06 .a6_title01{position: absolute; bottom:104px; left:0; padding-left: 40px; width:100%; font-family:'S-Core'; font-weight: 600; font-size: 37px; color: #ffffff; letter-spacing: -0.03em; line-height: 1.567; text-align: left; text-shadow: 7px 0px 5px rgba(0, 0, 0, 0.2);}
.area06 .a6_title02{position: absolute; bottom:48px; left:0; padding-left: 40px; padding-right:40px; width:max-content; font-family:'S-Core'; font-weight: 500; font-size: 27px; color: #ffffff; letter-spacing: 0; text-align: left; background:url('/webPub/sc_2025/besideyou_v2/images/a6_arrow.png')no-repeat; background-size: 27px 27px; background-position: right center;}
.area06 .a6_title01 > span,
.area06 .a6_title02 > span{font-size: inherit; color: #fff66c;}

.area07{position: relative; margin:352px auto 0; width:1250px;}
.area07 .a7_text{display: inline-block; margin-left: 262px; font-family: 'MaruBuriSemiBold'; font-size: 40px; color: #ffffff; letter-spacing: -0.04em; line-height: 1.6; text-align: left;}
.area07 .a7_bnrArea{position: relative; display: flex; flex-direction: row-reverse; gap: 10px; margin-top:47px; margin-right: -52px;}
.area07 .a7_brnLeft{display: flex; flex-direction: column; justify-content: space-between;}
.area07 .a7_bnrArea .a7_bnr01{opacity:0;}
.area07 .a7_bnrArea .a7_bnr02{opacity:0;}
.area07 .a7_bnrArea .a7_bnr03{opacity:0;}
.area07 .a7_title{position: absolute; top:48px; left:0; padding-left: 56px; width:100%; font-family:'S-Core'; font-weight: 600; font-size: 30px; color: #ffffff; letter-spacing: -0.03em; line-height: 1.733; text-align: left; box-sizing: border-box; text-shadow: 7px 0px 5px rgba(0, 0, 0, 0.1);}
.area07 .a7_title > span.ls75{margin-right:6px; font-size: inherit; letter-spacing: -0.075em;}
.area07 .a7_title > span.ls75-2{margin-left:3px; font-size: inherit; letter-spacing: -0.075em;}
.area07 .a7_title > span.ls85{font-size: inherit; letter-spacing: -0.085em;}
.area07 .a7_cont{position: absolute; top:220px; left:0; padding-left: 56px; width:100%; font-family:'S-Core'; font-weight: 500; font-size: 22px; color: #ffffff; letter-spacing: -0.025em; line-height: 1.714; text-align: left; box-sizing: border-box;}
.area07 .a7_textBox01{position: absolute; top:52px; left:30px; display:block; font-family:'S-Core'; font-weight: 600; font-size: 33px; color: #098d76; letter-spacing: -0.04em; line-height: 1.333;}
.area07 .a7_textBox02{position: absolute; top:164px; left:30px; display:block; font-family:'KoPub Dotum'; font-weight: 400; font-size:22px; color: #333333; letter-spacing: -0.04em; line-height: 1.59; transform: rotate(-0.1deg);}

.area08 {position: relative; z-index: 4;}
.area08 .a8_title{position: absolute; top:90px; left: 0; display: block; width:100%; font-family: 'MaruBuriSemiBold'; font-size:44px; color: #333333; letter-spacing: -0.03em; line-height: 1.477; text-align: center;}
.area08 .a8_cont{position: absolute; top:598px; left: 0; display: block; width:100%; font-family: 'MaruBuriSemiBold'; font-size:38px; color: #ffffff; letter-spacing: -0.04em; line-height: 1.526; text-align: center; opacity:0; text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);}

.area08 .a8_btn{position: absolute; top:747px; left:50%; margin-left:-325px; display:flex; align-items: center; justify-content: center; font-family: 'S-Core'; font-weight: 500; padding:0 38px; min-width:650px; height:87px; font-size:30px; color:#ffffff; letter-spacing: -0.025em; background:#098d76; border-radius:42px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);}
.area08 .a8_btn span.ml8{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 600; font-size: 34px; letter-spacing: 0.1em;}
.area08 .a8_btn span.ml8-2{margin-left: 4px; margin-right: 10px; font-family:'HGGGothicssi_Pro'; font-weight: 600; font-size: 34px; letter-spacing: 0.1em;}
.area08 .a8_btn span.btn_text{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 34px; letter-spacing: -0.01em;}
.area08 .a8_btn span.btnArrow{position: relative; margin-left:30px; width:80px; height:12px}
.area08 .a8_btn span.btnArrow svg.arrow1{position: absolute; left:0; width:99%; height: 13px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-miterlimit: 10;}
.area08 .a8_btn span.btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:12px; fill: none; stroke: #fff; stroke-miterlimit: 10;}

.area9{margin:0 auto; padding:100px 0 45px; width:1250px;}
.area9 .a9_text01{display:block; width:100%; font-family:'MaruBuriSemiBold'; font-size:37px; color:#222222; letter-spacing:-0.025em; line-height:1.5; text-align:center;}
.area9 .faq-container {width: 1250px; display: flex; flex-direction: column; margin: 65px auto 0; padding: 0; list-style: none;}
.area9 .faq-container li.faq {position: relative; background-color: #ffffff; overflow: hidden; transition: 0.2s; cursor:pointer; border-bottom:1px solid #b7b7b7;}
.area9 .faq-container li.lastFaq{border-bottom:0;}
.area9 .faq-container .faq__title {margin: 0; padding:45px 0; font-family:'HGGGothicssi_Pro'; font-weight:600; font-size: 28px; color:#b7b7b7; letter-spacing:-0.005em; line-height:1; transition:.2s;}
.area9 .faq-container .faq.active .faq__title{color:#333333;}
.area9 .faq-container .faq .faq__title:after{content:''; position:absolute; top:45px; right:0; width:25px; height:22px; background:url('/webPub/sc_2025/besideyou_v2/images/a9_open.png')no-repeat; background-size:cover; transition:.2s;}
.area9 .faq-container .faq.active .faq__title:after{transform:rotate(180deg);}
.area9 .faq-container .faq__title span{padding:0 38px 0 34px; font-size: 29px;}
.area9 .faq-container .faq__answer {max-height: 0; overflow: hidden; transition: 0.2s;}
.area9 .faq-container .faq__text {padding: 0 45px 45px 90px; color: #333333; font-family:'SpoqaHanSansNeo'; font-weight:400; font-size: 20px; letter-spacing:-0.025em; line-height:1.6;}
.area9 .faq-container .faq__text.nextNoti {padding: 0 45px 20px 90px;}
.area9 .faq-container .faq__noti {margin-left: 90px; padding: 20px 45px 45px 0; color: #333333; font-family:'SpoqaHanSansNeo'; font-weight:400; font-size: 17px; letter-spacing:-0.05em; line-height:1.764; border-top: 1px solid #e4e4e4;}
.area9 .faq-container .faq.active .faq__answer {max-height: 500px; transition: 0.2s;}


.draw01,
.draw02{position: relative;}

.holeLine01{position: absolute; top:-79px; left:58px; width:1128px; pointer-events: none; overflow: visible;}
.holeLine01 svg.draw_line01{width:100%; pointer-events: none; overflow: visible;}
.holeLine01 svg .cls-1 {pointer-events: stroke; stroke-linecap: round; stroke-linejoin: round; opacity:0.85;}

.holeLine02{position: absolute; top:-287px; left:62px; width:1154px; pointer-events: none; overflow: visible;}
.holeLine02 svg.draw_line02{width:100%; pointer-events: none; overflow: visible;}
.holeLine02 svg .cls-2 {pointer-events: stroke; stroke-linecap: round; stroke-linejoin: round; opacity:0.85;}

.holeLine03{position: absolute; top:1974px; left:102px; width:580px; pointer-events: none; overflow: visible;}
.holeLine03 svg.draw_line03{width:100%; pointer-events: none; overflow: visible;}
.holeLine03 svg .cls-3 {pointer-events: stroke; stroke-linecap: round; stroke-linejoin: round; opacity:0.85;}

.childLine01{position: absolute; top:1259px; left:-170px; width:334px;}
.childLine01 svg.draw_child01{width:100%; stroke-width: 7px; opacity: 0.9;}

.childLine02{position: absolute; top:1750px; left:-135px; width:334px;}
.childLine02 svg.draw_child02{width:100%; stroke-width: 3px; opacity: 0.9;}

/* modal */
#modal {position: fixed; left:0; top:0; width: 100%; height: 100%; transform: scale(0); z-index: 10;}
#modal .modal-bg {overflow-y: hidden; background: rgba(0,0,0,0.7); display:flex; align-items: flex-start; justify-content: center; min-width: 900px; height: 100%; padding: 150px 0 100px;}
#modal .modal-cont {overflow: visible; position:relative; width: 900px; display: inline-block;}
#modal .modal-top {display: flex; align-items: flex-end; justify-content: space-between; padding:0 52px; height:176px;border-top-left-radius: 30px; border-top-right-radius: 30px;}

#modal .modal-top .pop-left{}
#modal .modal-top .pop-left img{display:block; width:100%;}
#modal .modal-top .pop-right{overflow:visible; padding-left:0; height:100%; text-align: center;}
#modal .modal-top .pop-right span{position: relative; display: flex; align-items: center; height: 100%; font-family: 's-core'; font-weight: 500; font-size: 30px; color:#ffffff; line-height: 1.5; letter-spacing: 0.025em;}
#modal .modal-top .pop-right span::before{content: ''; position: absolute; width:40px; height: 32px; background: url('/webPub/sc_2025/besideyou_v2/images/pop-dd-white01.png')no-repeat; background-size: cover;}
#modal .modal-top .pop-right span::after{content: ''; position: absolute; width:40px; height: 32px; background: url('/webPub/sc_2025/besideyou_v2/images/pop-dd-white02.png')no-repeat; background-size: cover;}

#modal .modal-num1 .modal-top {background:#098d76;}
#modal .modal-num1 .modal-top .pop-right{padding-right:116px;}
#modal .modal-num1 .modal-top .pop-right span::before{top:37px; left:-24px;}
#modal .modal-num1 .modal-top .pop-right span::after{bottom:35px; right:-55px;}

#modal .modal-num2 .modal-top {background:#746559;}
#modal .modal-num2 .modal-top .pop-right{padding-right:116px;}
#modal .modal-num2 .modal-top .pop-right span::before{top:61px; left:-66px;}
#modal .modal-num2 .modal-top .pop-right span::after{bottom:56px; right:-64px;}

#modal .modal-num1 .modal-bottom {display: flex; flex-direction: column; align-items: center; padding:80px 0 70px; background:#ffffff; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}
#modal .modal-num1 .modal-bottom > div {display: flex; flex-direction: column; align-items: center; padding-bottom: 42px; margin-bottom: 44px; width:100%; border-bottom: 2px solid #e7e4dd;}
#modal .modal-num1 .modal-bottom > div:last-child{margin: 0; padding: 0; border: none;}

#modal .modal-num1 .mba-top{position:relative; width:100%; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 40px; color: #333333; letter-spacing: 0; line-height: 1.375; text-align: center;}
#modal .modal-num1 .mba-top span{font-size: inherit; color: #098d76;}

#modal .modal-num1 .mb-area01 .mba-top::before{content: ''; position: absolute; top:-4px; left:90px; width:40px; height: 32px; background: url('/webPub/sc_2025/besideyou_v2/images/pop-dd-gray01.png')no-repeat; background-size: cover;}
#modal .modal-num1 .mb-area01 .mba-top::after{content: ''; position: absolute; bottom:0; right:126px; width:40px; height: 32px; background: url('/webPub/sc_2025/besideyou_v2/images/pop-dd-gray02.png')no-repeat; background-size: cover;}

#modal .modal-num2 .mb-area01 .mba-top::before{content: ''; position: absolute; top:-4px; left:110px; width:40px; height: 32px; background: url('/webPub/sc_2025/besideyou_v2/images/pop-dd-gray01.png')no-repeat; background-size: cover;}
#modal .modal-num2 .mb-area01 .mba-top::after{content: ''; position: absolute; bottom:0; right:110px; width:40px; height: 32px; background: url('/webPub/sc_2025/besideyou_v2/images/pop-dd-gray02.png')no-repeat; background-size: cover;}


#modal .modal-num1 .mba-bottom{margin-top: 36px; font-family:'KoPub Dotum'; font-weight: 400; font-size: 22px; color: #222222; letter-spacing: -0.04em; line-height: 1.681; text-align: center; transform: rotate(-0.1deg);}
#modal .modal-num1 .mba-bottom b{font-size: inherit; font-weight: 700; color: #222222;}


#modal .modal-num2 .modal-middle{padding:54px 0; background: #f6f4f2;}
#modal .modal-num2 .modal-middle > span{display: block; font-family:'KoPub Dotum'; font-weight: 400; font-size: 22px; color: #222222; letter-spacing: -0.03em; line-height: 1.727; text-align: center; transform: rotate(-0.1deg);}
#modal .modal-num2 .modal-middle > span span{display:block; line-height: 1.1;}
#modal .modal-num2 .modal-middle > span b{font-weight: 700; font-size: inherit; line-height: 1.555;}

#modal .modal-num2 .modal-bottom {display: flex; flex-direction: column; align-items: center; padding:60px 0 80px; background:#ffffff; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}
#modal .modal-num2 .modal-bottom > div {overflow: visible; display: flex; flex-direction: column; align-items: center; width:100%;}

#modal .modal-num2 .mba-top{position:relative; width:100%; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 40px; color: #333333; letter-spacing: 0; line-height: 1.375; text-align: center;}
#modal .modal-num2 .mba-top span{font-size: inherit; color: #b6864e;}
#modal .modal-num2 .mba-middle{margin-top: 5px; font-family:'KoPub Dotum'; font-weight: 400; font-size: 22px; color: #222222; letter-spacing: -0.05em; line-height: 1.5; text-align: center; transform: rotate(-0.1deg);}
#modal .modal-num2 .mba-bottom{display:block; margin: 40px auto -62px;}
#modal .modal-num2 .mba-bottom img{display: block; width:100%;}

#modal .pop-close {position: absolute; top: -80px; right: 0; padding: 20px;}
#modal .pop-close svg {width: 40px; fill: #fff; vertical-align: top;}


#modal.one {
    transform: scaleY(0.01) scaleX(0);
    animation: unfoldIn 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.one .modal-bg .modal-cont {
    opacity: 0;
    animation: opaIn 0.5s 0.8s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.one.out {
    transform: scale(1);
    animation: unfoldOut 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.one.out .modal-bg .modal-cont {
    opacity: 1;
    animation: opaOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

@keyframes unfoldIn{
    0% {transform: scaleY(0.005) scaleX(0);}
    50% {transform: scaleY(0.005) scaleX(1);}
    100% {transform: scaleY(1) scaleX(1);}
}
@keyframes unfoldOut{
    0% {transform: scaleY(1) scaleX(1);}
    50% {transform: scaleY(0.005) scaleX(1);}
    100% {transform: scaleY(0.005) scaleX(0);}
}
@keyframes opaIn {
    0% {opacity: 0;}
    20% {opacity: 0;}
    100% {opacity: 1; }
}
@keyframes opaOut {
    0% {opacity: 1;}
    20% {opacity: 0; }
    100% {opacity: 0; }
}



/*animation*/
.slide-in-right {
  -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
            transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation: fade-in 1s .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
          animation: fade-in 1s .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

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

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

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

.copy-area {padding:40px 0;background:#f7f7f7;}
.copy-area p {font-family: 'SpoqaHanSansNeo'; font-weight: 400; font-size: 19px; text-align: center; color: #333333;}

.float_area {position:fixed; right: 80px; bottom:-150px; border-top-left-radius: 30px; border-top-right-radius: 30px; background:#da291c; z-index:6; transition:1s;}
.float_area.on {bottom:0px;}
.float_area a {display:flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding-top: 8px; width: 240px; height: 140px;}
.float_area a span.fb_top{font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 40px; color:#ffffff; letter-spacing: -0.01em; text-shadow: 0px 6px 14px rgba(0, 0, 0, 0.35);}
.float_area a span.fb_top .fb01{font-size: inherit; margin-right:8px;}
.float_area a span.fb_top .fb02{font-size: inherit;margin-left:8px;}
.float_area a span.fb_bottom {display: flex; align-items: center;}
.float_area a span.fb_bottom .fb_txt{font-family: 'MaruBuriSemiBold'; font-size:30px; color: #ffffff; letter-spacing: -0.05em; text-shadow: 0px 6px 14px rgba(0, 0, 0, 0.35);}
.float_area a span.fb_bottom span.fbArrow{position: relative; margin-left:12px; width:27px; height:12px}
.float_area a span.fb_bottom span.fbArrow svg.arrow1{position: absolute; left:0; width:99%; height: 13px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 2px;}
.float_area a span.fb_bottom span.fbArrow svg.arrow2{position: absolute; right:0; width:7px; height:12px; fill: none; stroke: #fff; stroke-miterlimit: 10;}

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