@charset "utf-8";

/*fonts*/

/*Notosans*/
@font-face {
    font-family: 'NotoSerifKR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}	

/*HakgyoansimKkokkoma*/
@font-face {
    font-family: 'TTHakgyoansimKkokkomaR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimKkokkomaR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*HGGGothicssi_Pro*/
@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: 1280px;}

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

.area01{height: 986px; z-index: 3;}
.area01 .image-container {position: relative; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 1920px; height: 986px; overflow: hidden;}
.area01 .image-container .a1_img {position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover; transition: 1.5s;}
.area01 .image-container .a1_img.base{z-index: 1;}
.area01 .image-container .a1_img.overlay {z-index: 2; opacity: 1;} /* 처음 반만 보임 */
.area01 .image-container.on .a1_img.overlay {opacity: 0;} /* 오른쪽 절반 잘림 */
.area01 .image-container .a1_img img{width:100%;}

.area01 .a1_title_area{position: absolute; top:352px; left:340px;}
.area01 .a1_title_top{overflow: hidden; position: absolute; top:0px; left:52px; height:0px; transition: .5s;}
.area01 .a1_title_top.on{top:-113px; height: 113px;}

.area01 .a1_tree{scale:0; transition: .2s; will-change:scale; }
.area01 .a1_tree.on{scale:1;}
.area01 .aTree01{position:absolute; bottom:0; left:66px;}
.area01 .aTree02{position:absolute; bottom:0; left:87px;}
.area01 .aTree03{position:absolute; bottom:0; left:109px;}
.area01 .aTree04{position:absolute; bottom:0; left:154px;}

.area01 .a1_bike{opacity: 0; right:80px; transition: 1s;  will-change:opacity;}
.area01 .a1_bike.on{opacity:1; right:128px;}
.area01 .aBike{position:absolute; bottom:0;}

.area01 .a1_title{z-index: 3;}
.area01 .a1_campName{position: absolute; top:27px; left: 83px; font-family:'SpoqaHanSansNeoMedium'; font-weight:500; font-size: 18px; color: #ffffff; letter-spacing: -0.04em; z-index: 3;}

.area02{z-index: 4; mix-blend-mode: multiply; }
.area02 .a2_title{position: absolute; top:306px; font-weight: bold; left:73px; font-family:'TTHakgyoansimKkokkomaR'; font-size: 61px; color:#fff; letter-spacing: -0.04em; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.18);}
.area02 .a2_text{position: absolute; top:376px; left:84px; font-family:'S-Core'; font-weight: 500; font-size: 23px; color:#fff; letter-spacing: -0.025em; line-height: 1.695; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.18);}

.area02 .a2_noti{position: absolute; top:579px; left:84px; font-family: 'Noto Sans KR'; font-weight: 400; font-size: 17px; color:#fff; letter-spacing: -0.05em; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);}
.area02 .a2_noti b{font-family: 'Noto Sans KR'; font-weight: 500;}

.area02 .a2_info{position: absolute; height: 42px;}
.area02 .a2_info.aInfo01{top:832px; left:98px;}
.area02 .a2_info.aInfo02{top:832px; left: 408px;}
.area02 .a2_info .a2_info_bottom{display: flex; justify-content: center; align-items: center; height: 100%; font-family:'S-Core'; font-weight: 500; font-size: 18px; color:#fff; letter-spacing: -0.025em; background: url('/webPub/sc_2025/villages/images/a2_house_bottomBg.jpg'); background-size: cover;}
.area02 .a2_info.aInfo01 .a2_info_bottom{width: 203px;}
.area02 .a2_info.aInfo02 .a2_info_bottom{width: 225px;}
.area02 .a2_info_top{overflow: hidden; position: absolute; transition: .5s;}
.area02 .a2_info.aInfo01 .a2_info_top{top:-102px; left:-19px; height:102px;}
.area02 .a2_info.aInfo02 .a2_info_top{top:-100px; left:-21px; height:100px;}
.area02 .a2_info.aInfo01 .a2_info_top.on{top:-162px; height: 162px;}
.area02 .a2_info.aInfo02 .a2_info_top.on{top:-219px; height: 219px;}
.area02 .a2_info .a2_info_top .a2_num{position: absolute; bottom:15px; left: 40px; opacity: 0; scale: .8; transition:.5s .5s;}
.area02 .a2_info .a2_info_top.on .a2_num{opacity:1; scale: 1;}

.area02 .a2_btn{position: absolute; top: 919px; left:93px; overflow: hidden; display: flex; align-items: center; padding-left: 78px; width:550px; height:85px; border-radius: 20px; box-sizing: border-box; font-family:'S-Core'; font-weight: 500; font-size: 27px; color: #ffffff; letter-spacing: -0.025em; background: #005eb8;}
.area02 .a2_btn span.btn_text{margin-left: 4px;}
.area02 .a2_btn span.btnArrow{position: relative; margin-left:30px; width:145px; 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;}

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

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

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

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

.area02 .a2Line01{position: absolute; top:80px; left:-320px; width:1415px;}
.area02 .a2Bike01{position: absolute; top:114px; left:1085px; width:139px;}
.area02 .a2Line02{position: absolute; top:212px; right:-320px; width:398px;}

.area03{margin-top:-228px; z-index: 2;}
.area03 .div_inner{z-index: 3;}
.area03 .a3_bg_area{width:1920px; height: 1116px;}
.area03 .a3_bg_area .a3_BigSliderImg{position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; max-width: none; opacity: 0; transition: opacity 0.6s ease;}
.area03 .a3_bg_area .a3_BigSliderImg.on {opacity: 1;}

.area03 .a3_info_area{position: absolute; top:363px; right:50px;}
.area03 .a3_info_area .a3_title{margin-right: -15px; display: block; font-family: 'MaruBuriSemiBold'; font-size: 35px; color: #005eb8; letter-spacing: -0.05em; text-align: right;}
.area03 .a3_info_area .a3_text{display: block; margin-top: 37px; font-family: 'NotoSerifKR'; font-size: 22px; color: #222222; letter-spacing: -0.05em; line-height: 1.581; text-align: right;}

.area03 .a3_noti{position: absolute; top:1025px; right:50px; font-family: 'SpoqaHanSansNeo'; font-size: 15px; color:#222; letter-spacing: -0.025em;}

.area03 .a3_info_area.on .a3_title{color: #ffffff;}
.area03 .a3_info_area.on .a3_text{color: #ffffff;}
.area03 .a3_noti.on{color:#fff;}

.area03 .a3-swiper-wrap{overflow: visible; position: absolute; left: 588px; bottom:109px; width: 648px;}
.area03 .a3-swiper-wrap .mySwiper1{overflow: hidden;}
.area03 .a3-swiper-wrap .mySwiper1 .swiper-slide{margin:0 2.5px 5px 2.5px; width: 319px !important; height: 238px;}
.area03 .a3-swiper-wrap .mySwiper1 .swiper-slide img {filter: drop-shadow(0px 2px 2.5px rgba(0, 0, 0, 0.4));}
.area03 .a3-swiper-wrap .a3-next {position: absolute; right: -75px; width: 35px; height: 72px; background: url('/webPub/sc_2025/villages/images/a3_next_btn.png') no-repeat center; cursor:pointer; color: transparent;}
.area03 .a3-swiper-wrap .a3-prev {position: absolute; left: -75px; width: 35px; height: 72px; background: url('/webPub/sc_2025/villages/images/a3_prev_btn.png') no-repeat center; cursor:pointer; color: transparent;}

.area04{margin-top:-184px; z-index: 1;}
.area04 .div_inner{z-index: 3;}
.area04 .a4_bg_area{width:1920px; height: 1120px;}
.area04 .a4_bg_area .a4_BigSliderImg{position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; max-width: none; opacity: 0; transition: opacity 0.6s ease;}
.area04 .a4_bg_area .a4_BigSliderImg.on {opacity: 1; z-index: 3;}

.area04 .a4_info_area{position: absolute; top:354px; left:77px;}
.area04 .a4_info_area .a4_title{display: block; font-family: 'MaruBuriSemiBold'; font-size: 35px; color: #005eb8; letter-spacing: -0.05em; text-align: left;}
.area04 .a4_info_area .a4_text{display: block; margin-top: 37px; font-family: 'NotoSerifKR'; font-size: 22px; color: #222222; letter-spacing: -0.05em; line-height: 1.581; text-align: left;}

.area04 .a4-swiper-wrap{overflow: visible; position: absolute; left: 77px; bottom:120px; width: 648px; z-index: 3;}
.area04 .a4-swiper-wrap .mySwiper2{overflow: hidden;}
.area04 .a4-swiper-wrap .mySwiper2 .swiper-slide{margin:0 2.5px 5px 2.5px; width: 319px !important; height: 238px;}
.area04 .a4-swiper-wrap .mySwiper2 .swiper-slide img {filter: drop-shadow(0px 2px 2.5px rgba(0, 0, 0, 0.4));}
.area04 .a4-swiper-wrap .a4-next {position: absolute; right: -75px; width: 35px; height: 72px; background: url('/webPub/sc_2025/villages/images/a3_next_btn.png') no-repeat center; cursor:pointer; color: transparent;}
.area04 .a4-swiper-wrap .a4-prev {position: absolute; left: -75px; width: 35px; height: 72px; background: url('/webPub/sc_2025/villages/images/a3_prev_btn.png') no-repeat center; cursor:pointer; color: transparent;}

.area05{margin-top:-60px; z-index: 2;}
.area05 .div_inner{z-index: 2;}

.area05 .div_movie{position:absolute; top:182px; left:50%; margin-left:-480px; display:block; width:960px; }
.area05 .div_movie .load_movie{position:relative; aspect-ratio: 16 / 9;}
.area05 .div_movie .load_movie iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.area05 .a5_btn{position: absolute; top: 774px; left:50%; margin-left:-240px; overflow: hidden; display: flex; align-items: center; padding-left: 65px; width:480px; height:86px; border-radius: 20px; box-sizing: border-box; font-family:'S-Core'; font-weight: 500; font-size: 27px; color: #ffffff; letter-spacing: -0.025em; background: #098d76;}
.area05 .a5_btn span.btn_text{margin-left: 4px;}
.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 .a6_title{position: absolute; top:117px; left: 0; display: block; width:100%; font-family: 'HGGGothicssi_Pro'; font-weight: 900; font-size: 48px; color:#103f8f; letter-spacing: 0; line-height: 1; text-align: center;}

.area06 .a6_infoArea{position: absolute; top: 240px; left: 0; width:100%; display: flex; justify-content: space-around; align-items: flex-start;}
.area06 .a6_infoArea .a6_left{margin-top: 13px; margin-left:77px;}
.area06 .a6_infoArea .a6_left .a6_leftTop{display: block; padding:20px 0; border-top:2px dotted #899196; border-bottom:2px dotted #899196; font-family:'S-Core'; font-weight: 400; font-size: 20.5px; color:#333; letter-spacing: -0.04em; line-height: 1.853;}
.area06 .a6_infoArea .a6_left .a6_leftTop span.ls75{font: inherit; letter-spacing: -0.075em;}
.area06 .a6_infoArea .a6_left .a6_leftTop span.ls30{font: inherit; letter-spacing: -0.03em;}

.area06 .a6_infoArea .a6_left .a6_leftBottom{display: block; padding-top:40px; font-family:'S-Core'; font-weight: 500; font-size: 23px; color:#222; letter-spacing: -0.04em; line-height: 1.695;}
.area06 .a6_infoArea .a6_left .a6_leftBottom span.ls75{font: inherit; letter-spacing: -0.075em;}

.area06 .a6_infoArea .a6_right{margin-right:50px; }
.area06 .a6_infoArea .a6_right .a6_info_wrap{display: flex; align-items: center; margin-bottom:6px; opacity: 0; transition: .5s;}
.area06 .a6_infoArea .a6_right .a6_info_wrap.on{opacity: 1;}
.area06 .a6_infoArea .a6_right .a6_info_wrap:last-child{margin-bottom:0;}
.area06 .a6_infoArea .a6_right .a6_info_wrap .a6Info_graph{display: flex; align-items: center; position: relative; width:424px; height: 77px;}
.area06 .a6_infoArea .a6_right .a6_info_wrap .a6_linebox{position: absolute; top:15px; right:0;}
.area06 .a6_infoArea .a6_right .a6_info_wrap .a6_infoText{position: absolute; top:28px; right:28px; font-family:'S-Core'; font-weight: 500; font-size: 23px; color:#333; letter-spacing: -0.04em; line-height: 1;}
.area06 .a6_infoArea .a6_right .a6_info_wrap .a6_result{position: absolute; top:15px; left:0; overflow: hidden; width:0; transition: 1s .2s cubic-bezier(0, 0.36, 0.25, 0.57);}
.area06 .a6_infoArea .a6_right .a6_info_wrap.on .a6_result{width:100%;}
.area06 .a6_infoArea .a6_right .a6_info_wrap .a6_result img{width: max-content;}
.area06 .a6_infoArea .a6_right .a6_info_wrap .a6_round{position: absolute; top:0; left:0;}
.area06 .a6_infoArea .a6_right .a6_info_wrap .a6_num{margin-left: 21px; opacity:0; scale: .8; transition: .5s .5s;}
.area06 .a6_infoArea .a6_right .a6_info_wrap.on .a6_num{opacity:1; scale: 1;}

.area06 .a6_rightBottom{margin-top: 22px; font-family:'S-Core'; font-weight: 400; font-size: 17px; color:#555; letter-spacing: -0.03em; line-height: 1.853; text-align: center;}

.area07 .a7_box{position: absolute; top:109px; left:9px;}
.area07 .a7_box .a7_title{position: absolute; top:48px; left: 0; display: block; width:100%; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 26px; color:#ffffff; letter-spacing: -0.02em; line-height: 1; text-align: center; 
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);}
.area07 .a7_box .a7_message{position:absolute; opacity:0; transition:.5s;}
.area07 .a7_box .a7_message.on{opacity:1;}
.area07 .a7_box .a7me1{top:123px; left:29px;}
.area07 .a7_box .a7me2{top:221px; right:32px;}
.area07 .a7_box .a7me3{top:362px; left:29px;}
.area07 .a7_box .a7me4{top:528px; right:32px;}
.area07 .a7_box .a7me5{top:668px; left:29px;}

.area08{margin-top:-84px;}
.area08 .a8_title{position: absolute; top:444px; left: 0; display: block; width:100%; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 40px; color:#ffffff; letter-spacing: -0.025em; line-height: 1.5; text-align: center; 
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);}
.area08 .a8_text{position: absolute; top:582px; left: 0; display: block; width:100%; font-family:'KoPub Dotum'; font-weight:500; font-size: 22px; color: #ffffff; letter-spacing: -0.03em; line-height: 1.636; text-align: center;}
.area08 .a8_btn{position: absolute; top: 700px; left:50%; margin-left:-324px; overflow: hidden; display: flex; align-items: center; padding-left: 115px; width:648px; height:86px; border-radius: 20px; box-sizing: border-box; font-family:'S-Core'; font-weight: 500; font-size: 27px; color: #ffffff; letter-spacing: -0.025em; background: #098d76;}
.area08 .a8_btn span.btn_text{margin-left: 4px;}
.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;}

.float_area {position:fixed; right: -300px; bottom:80px; z-index:6; transition:1s;}
.float_area.on {right:60px;}
.float_area a {position: relative; display:block; width:218px;}
.float_area a img{display: block;}
.float_area a span.fb_text{position:absolute; top:60px; left: 0; width:100%; font-family: 'HGGGothicssi_Pro'; font-weight: 800; font-size: 26px; color:#ffffff; letter-spacing: -0.005em; line-height: 1.44; text-align: center; 
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);}
.float_area a span.fb_bike{position:absolute; top:150px; left: 42px;}
.float_area.on .shake-bottom {
	-webkit-animation: shake-bottom 3s 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-bottom 3s 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@-webkit-keyframes shake-bottom {
  0%, 2.5% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  2.5%, 5% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  5%, 7.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  7.5%, 10%{
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  10%, 12.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12.5%, 15%{
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  15%, 17.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  17.5%, 20%{
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  20%, 22.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  22.5%, 25%{
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  25%, 27.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  27.5%, 30%{
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%, 32.5% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  32.5%, 35%{
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  35%, 37.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  37.5%, 40%{
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  40%, 100%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}

@keyframes shake-bottom {
  0%, 2.5% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  2.5%, 5% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  5%, 7.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  7.5%, 10%{
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  10%, 12.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12.5%, 15%{
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  15%, 17.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  17.5%, 20%{
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  20%, 22.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  22.5%, 25%{
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  25%, 27.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  27.5%, 30%{
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%, 32.5% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  32.5%, 35%{
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  35%, 37.5%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  37.5%, 40%{
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  40%, 100%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}

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