@charset "utf-8";

/*fonts*/
/*본명조*/
@font-face {
    font-family: 'Bonmyeongjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/*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;}
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 =*/
.div_sec{position: relative; max-width:1920px; min-width:1240px; 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: -620px; width: 1240px;}

.bon96{font-family: 'Bonmyeongjo'; display: inline-block; transform: scaleX(0.96);}
.pinArea{position: relative; z-index: 4;}

.area01{z-index: 3;}
.area01 .a1_campName{position: absolute; top:64px; left:-4px; font-family: 'SpoqaHanSansNeoRegular'; font-size: 17px; color: #ffffff; letter-spacing: -0.05em; z-index: 3;  text-shadow: 8px 0px 14px rgba(0, 0, 0, 0.35);}
.area01 .a1_logo{position: absolute; top:90px; left:0px; z-index: 3;}
.area01 .a1_title01{position: absolute; top:190px; left:938px;}
.area01 .a1_title02{position: absolute; top:362px; left:1016px; opacity:0; transition:.5s;}
.area01 .a1_title02.on{opacity: 1;}
.area01 .a1_title_line{position: absolute; top:584px; left:965px; display: block; width:2px; height: 181px; background: #f0f0f1; opacity:0; transition:.5s;}
.area01 .a1_title_line.on{opacity: 1;}

.area02 .div_movie{overflow: hidden; position:absolute; top:148px; left:308px; display:block; width:1030px;border-radius: 20px; background:#000;}
.area02 .div_movie .load_movie{position:relative; aspect-ratio: 16 / 9;}
.area02 .div_movie .load_movie iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.area02 a.a2_btn {display:flex; flex-direction: column; justify-content: center; gap: 5px; position: absolute; top:609px; left:-40px; width: 407px; height: 163px; background: #098d76; border-radius: 37.5px; padding-left: 60px;}
.area02 a.a2_btn span.fb_top{display: flex; align-items: flex-end; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 45px; color:#ffffff; letter-spacing: -0.01em;}
.area02 a.a2_btn span.fb_top .fb01{font-size: inherit; margin-right:8px;}
.area02 a.a2_btn span.fb_top .fb02{font-size: inherit;margin-left:8px;}
.area02 a.a2_btn span.fb_top .fb_txt{margin-left: 3px; font-family: 'MaruBuriSemiBold'; font-size:32px; color: #ffffff; letter-spacing: -0.05em;}
.area02 a.a2_btn span.fb_bottom {display: flex; align-items: center;}
.area02 a.a2_btn span.fb_bottom .fb_txt{font-family: 'MaruBuriSemiBold'; font-size:32px; color: #ffffff; letter-spacing: -0.05em;}
.area02 a.a2_btn span.fb_bottom span.fbArrow{position: relative; margin-left:20px; width:80px; height:11px}
.area02 a.a2_btn span.fb_bottom span.fbArrow svg.arrow1{position: absolute; left:0; width:99%; height: 11px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 1px;}
.area02 .a2_btn span.fb_bottom span.fbArrow svg.arrow2{position: absolute; right:0; width:6px; height:11px; fill: none; stroke: #fff; stroke-miterlimit: 10;}

.area03 .a3_text{position: absolute; top:190px; left:447px; padding-left: 16px; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 22px; color:#333333; letter-spacing: -0.04em; line-height: 1.636;}
.area03 .a3_comment{position: absolute; top:370px; left:447px; margin-top:36px; margin-left: 15px; padding-top:2px; padding-left: 32px; border-left: 2px solid #f393a2;}
.area03 .a3_comment::after{content: ''; position: absolute; top:-35px; left:-16px; width:32px; height:21px; background: url('/webPub/sc_2025/besideyou_v3/images/a3_dd.png')no-repeat;}
.area03 .a3_comment span.a3_comTop{font-size: 27px; color:#333333; letter-spacing: -0.03em; line-height: 1.666; transform-origin: left;}
.area03 .a3_comment span.a3_comBottom{display:block; margin-top: 26px; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 19px; color:#777777; letter-spacing: -0.05em; line-height: 1.1;}

.area04 .a4_text{position: absolute; top:145px; left:0; padding-left: 25px; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 22px; color:#333333; letter-spacing: -0.04em; line-height: 1.62;}
.area04 .a4_text span{font:inherit; font-weight: 700; font-size: 24px; color:#f393a2;}

.area05 .a5_text{position: absolute; top:207px; left:658px; width: max-content; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 22px; color:#333333; letter-spacing: -0.04em; line-height: 1.636;}

.area06{z-index: 2;}
.area06 .a6_text{position: absolute; top:172px; left:0; padding-left: 25px; font-family: 'Noto Sans KR'; font-weight: 500; font-size: 22px; color:#333333; letter-spacing: -0.04em; line-height: 1.636;}

.area06 .a6_btn{position: absolute; top:385px; left:25px; display:flex; align-items: center; justify-content: center; padding:0 52px; min-width:489px; height:85px; font-size:24px; color:#ffffff; letter-spacing: -0.025em; background:#098d76; border-radius:20px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);}
.area06 .a6_btn span.ml8{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 800; font-size: 30px; letter-spacing: 0em;}
.area06 .a6_btn span.ml8-2{margin-left: 4px; margin-right: 2px; font-family:'HGGGothicssi_Pro'; font-weight: 800; font-size: 30px; letter-spacing: 0.1em;}
.area06 .a6_btn span.btn_text{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 30px; letter-spacing: 0.01em;}
.area06 .a6_btn span.btnArrow{position: relative; margin-left:17px; width:80px; height:11px}
.area06 .a6_btn span.btnArrow svg.arrow1{position: absolute; left:0; width:99%; height: 11px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-miterlimit: 10;}
.area06 .a6_btn span.btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:11px; fill: none; stroke: #fff; stroke-miterlimit: 10;}

.area07{margin-top: -90px;}
.area07 .a7_title01{position: absolute; top:204px; left:937px;}
.area07 .a7_title02{position: absolute; top:380px; left:1015px; opacity:0; transition:.5s;}
.area07 .a7_title02.on{opacity: 1;}
.area07 .a7_title_line{position: absolute; top:600px; left:964px; display: block; width:2px; height: 181px; background: #f0f0f1; opacity:0; transition:.5s;}
.area07 .a7_title_line.on{opacity: 1;}
.area07 .a7_people{position: absolute; top:238px; left:473px; opacity:0; transition:.5s;}
.area07 .a7_people.on{opacity: 1;}

.area08{height:223px; background:#ffffff;}
.area08 .a8_text{display: flex; align-items: center; justify-content: center; padding:57px 0; font-family: 'S-Core'; font-weight: 500; font-size: 22px; color:#00745d; letter-spacing: -0.03em; line-height: 1.636; text-align: center;}

.area09 {position: relative;}
.area09 .a9_cont{position: absolute; top:90px; left: 0; display: inline-block; width:100%; font-size:35px; color: #ffffff; letter-spacing: -0.025em; line-height:1.747; text-align: center; text-shadow: 6px 0px 14px rgba(0, 0, 0, 0.35);}
.area09 .a9_cont > span{font:inherit; letter-spacing: -0.04em;}
.area09 .a9_cont > span > span{font:inherit; text-decoration: underline; text-underline-position: under; text-decoration-thickness: 2px;}
.area09 .a9_notiWrap{position: absolute; top:297px; left: 50%; margin-left: -205px; width:410px; height: 40px; background: url('/webPub/sc_2025/besideyou_v3/images/a9_bgLine.png')no-repeat;}
.area09 .a9_notiWrap .a9_noti{width: 100%; height: 100%; font-size:25px; color: #ffffff; letter-spacing: -0.025em; line-height: 1.4; text-align: center; }
.area09 .a9p01{position: absolute; top:332px; left:120px;}
.area09 .a9p02{position: absolute; top:384px; left:196px;}
.area09 .a9p03{position: absolute; top:467px; left:315px;}
.area09 .a9p04{position: absolute; top:482px; left:464px;}
.area09 .a9p05{position: absolute; top:476px; left:768px;}
.area09 .a9p06{position: absolute; top:476px; left:868px;}
.area09 .a9p07{position: absolute; top:474px; left:954px;}
.area09 .a9p08{position: absolute; top:408px; left:1066px;}

.drawArea{overflow: visible; position: relative; height:1522px; background-image: url('/webPub/sc_2025/besideyou_v3/images/darw_bg.jpg'); 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: -620px; width: 1240px;}
.draw01{position: relative;}
.holeLine01{position: absolute; top:-181px; left:50px; width:1127px; 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:1342px; left:66px; width:565px; 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;}
.childLine01{position: absolute; top:1102px; left:-170px; width:334px;}
.childLine01 svg.draw_child01{width:100%; stroke-width: 7px; opacity: 0.9;}

.area10{position: relative; margin:0 auto; padding-top: 130px; width:1240px;}
.area10 .a10_cont{display: block; text-align: center;}
.area10 .a10_text{margin-top:44px; font-family: 'S-Core'; font-weight: 500; font-size:20px; line-height: 2; letter-spacing: -0.03em; color: #ffffff;}
.area10 .a10_bnr{position: relative; display: inline-block; margin-top:216px;  margin-left: 226px; opacity: 0;}
.area10 .a10_rightBox{position: absolute; top:0; right:0; width:604px; height:100%;}
.area10 .a10_rightBox .a10_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;}
.area10 .a10_rightBox .a10_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;}
.area10 .a10_rightBox .a10_title02 > span{font-size: inherit; font-weight: 400; letter-spacing: -0.075em;}
.area10 .a10_rightBox .a10_rbtext{display: block; margin-top: 10px; width:100%; font-family:'S-Core'; font-weight: 500; font-size: 20px; color: #007a62; letter-spacing: -0.04em; text-align: center;}
.area10 .a10_rightBox .a10_textBox01{position: absolute; top:218px; left:58px;}
.area10 .a10_rightBox .a10_textBox02{position: absolute; top:357px; left:58px;}
.area10 .a10_rightBox .a10_textBox03{position: absolute; top:473px; left:58px;}

.area11{overflow: hidden; z-index: 4;}
.area11 .a11_left{position: absolute; top:220px; left:-141px; /*left:-156px*/}
.area11 .a11_left .a11_title{margin-top:110px; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 73px; color:#007a62; letter-spacing: 0.01em;}
.area11 .a11_left .a11_text{margin-top:28px; font-family:'S-Core'; font-weight: 600; font-size: 24px; color:#007a62; letter-spacing: -0.04em; line-height: 1.666;}
.area11 .a11_left .a11_noti{margin-top:20px; padding-left: 8px; text-indent: -8px; font-family:'S-Core'; font-weight: 500; font-size: 17px; color:#007a62; letter-spacing: -0.04em; line-height: 1.647;}
.area11 .a11_left ul{display: flex; gap: 18px; margin-top:50px;}
.area11 .a11_left ul li{position: relative; opacity: 0;}
.area11 .a11_textBox01{position: absolute; top:36px; left:28px; display:block; font-family:'S-Core'; font-weight: 600; font-size: 28px; color: #098d76; letter-spacing: -0.05em; line-height: 1.357;}
.area11 .a11_textBox02{position: absolute; top:130px; left:28px; display:block; font-family:'S-Core'; font-weight: 500; font-size:20px; color: #333333; letter-spacing: -0.05em; line-height: 1.75; transform: rotate(-0.1deg);}

.area12 {position: relative;}
.area12 .a12_cont{position: absolute; top:840px; left: 0; display: inline-block; width:100%; font-size:36px; color: #00745d; letter-spacing: -0.05em; line-height:1.666; text-align: center;}
.area12 .a12_btn{position: absolute; top:1000px; left:50%; margin-left: -303px; display:flex; align-items: center; justify-content: center; padding:0 70px 0 95px; min-width:606px; height:90px; font-size:30px; color:#ffffff; letter-spacing: -0.025em; background:#098d76; border-radius:20px; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);}
.area12 .a12_btn span.ml8{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 600; font-size: 34px; letter-spacing: 0.05em;}
.area12 .a12_btn span.ml8-2{margin-left: 4px; margin-right: 2px; font-family:'HGGGothicssi_Pro'; font-weight: 600; font-size: 34px; letter-spacing: 0.1em;}
.area12 .a12_btn span.btn_text{margin-left: 4px; font-family:'HGGGothicssi_Pro'; font-weight: 900; font-size: 34px; letter-spacing: 0.005em;}
.area12 .a12_btn span.btnArrow{position: relative; margin-left:35px; width:80px; height:11px}
.area12 .a12_btn span.btnArrow svg.arrow1{position: absolute; left:0; width:99%; height: 11px; animation: scroll_motion 2.5s infinite; fill: none; stroke: #fff; stroke-miterlimit: 10;}
.area12 .a12_btn span.btnArrow svg.arrow2{position: absolute; right:0; width:7px; height:11px; fill: none; stroke: #fff; stroke-miterlimit: 10;}

.area13{margin:0 auto; padding:100px 0 45px; width:1240px;}
.area13 .a13_text01{display:block; width:100%; font-family:'MaruBuriSemiBold'; font-size:37px; color:#222222; letter-spacing:-0.025em; line-height:1.5; text-align:center;}
.area13 .faq-container {width: 1240px; display: flex; flex-direction: column; margin: 65px auto 0; padding: 0; list-style: none;}
.area13 .faq-container li.faq {position: relative; background-color: #ffffff; overflow: hidden; transition: 0.2s; cursor:pointer; border-bottom:1px solid #b7b7b7;}
.area13 .faq-container li.lastFaq{border-bottom:0;}
.area13 .faq-container .faq__title {margin: 0; padding:45px 0; font-family:'HGGGothicssi_Pro'; font-weight:600; font-size: 26px; color:#b7b7b7; letter-spacing:0.005em; line-height:1; transition:.2s;}
.area13 .faq-container .faq.active .faq__title{color:#333333;}
.area13 .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;}
.area13 .faq-container .faq.active .faq__title:after{transform:rotate(180deg);}
.area13 .faq-container .faq__title span{padding:0 38px 0 34px; font-size: 29px;}
.area13 .faq-container .faq__answer {max-height: 0; overflow: hidden; transition: 0.2s;}
.area13 .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;}
.area13 .faq-container .faq__text.nextNoti {padding: 0 45px 20px 90px;}
.area13 .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;}
.area13 .faq-container .faq.active .faq__answer {max-height: 500px; transition: 0.2s;}

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

.float_area {position:fixed; right: 60px; bottom:-150px; border-top-left-radius: 30px; border-top-right-radius: 30px; background:#ffc0cb; filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.1)); 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:#007a62; letter-spacing: 0.01em;}
.float_area a span.fb_top .fb01{font-size: inherit; font-weight: 800; margin-right:8px;}
.float_area a span.fb_top .fb02{font-size: inherit; font-weight: 800; 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: #007a62; letter-spacing: -0.05em;}
.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: #007a62; 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: #007a62; 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;}


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

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

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

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

.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-bottom {
-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
      animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom {
  0% {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
  opacity: 0;
  }
  100% {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  }
}