/*
+----------------------------------------------------------------------+
| Copyright (c) NDS.  co. Ltd
+----------------------------------------------------------------------+
| common.CSS file
+----------------------------------------------------------------------+
*/

@charset "utf-8";

@import url(reset.css);
@import url(../../font/font.css);
/* @import url(remixicon.css); */

/* layout 여백 */
.contentsInner{width:1400px; margin:0 auto}
.contentsInner2{padding:0 40px}
.contentsInner3 {width:1200px; margin: 0 auto;}


/* mobile */
.mobile_ver{display: none;}
.pc_ver{display: block;}

/* 블라인드 */
.blind{border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; white-space: nowrap; display: inline-block;}

.pa-0{padding:0 !important}
.ma-0{margin:0 !important}

/*mobile*/
@media (max-width:680px) {
    .mobile_ver{display: block;}
    .pc_ver{display: none;}
}



/*==================================================================
// 전체 공통 (checkbox / Top버튼 / 다운로드 버튼 / Dialog)
//=================================================================*/


input[type="checkbox"].checkbox{display: none;}
input[type="checkbox"].checkbox + label { display: inline-block; position: relative; padding-left:30px; font-size: 17px; color:#212134; font-family:'SpoqaM', sans-serif;}
input[type="checkbox"].checkbox + label::after { content: ''; width: 20px; height: 20px; position: absolute; left: 0; top: 2px; background-image: url(../../img/brandpage/check_gray.svg); background-size:100%; border:1px solid #d9d9d9; border-radius: 4px; transition: .3s;}
input[type="checkbox"].checkbox:checked + label::after { background-image: url(../../img/brandpage/check_white.svg); background-size:100%; background-color: #FF2C68; border-color: #FF2C68;}


/* Top버튼 / 다운로드 버튼 */
.aside{position: fixed; bottom: 5%; right:50px; width:220px; height:auto; text-align: center; z-index: 3;}
.aside .download_btn{border:none; width:220px; height:220px; background: url(../../img/brandpage/app_dowmload2.png); background-size:100%; text-indent: -9999px;}
.aside .download_btn a{display: inline-block; width:100%; height:100%;}
.aside .download_btn:hover{animation: scale 2s infinite}
.aside .top_btn { visibility: hidden; opacity: 0; transition: 0.4s; border-radius: 100%; width:77px; height: 77px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background: url(../../img/brandpage/top_btn.svg) center no-repeat white; background-size: 23px ; border: none; text-indent: -9999px; margin-bottom: -90px; }
.aside .top_btn.on{visibility: visible;opacity: 1; margin-bottom: 0px;}

/* 메인화면 스토어 이벤트 버튼  :: 이벤트 종료 후 제거*/
.main_wrap .aside .event_go_btn{display:inline-block; width: 260px; height:260px; background:url(../../img/brandpage/event_btn.png) no-repeat; border:none; text-indent:-9999px; -webkit-animation: bounce-in-top 1.1s both; animation: bounce-in-top 1.1s both; background-size: 100%; margin-left: -11%;}
.main_wrap .aside .event_go_btn:hover{animation: scale 2s infinite}

/* 메인화면 스토어 다운로드 버튼 :: 애니메이션 효과 추가 */
.main_wrap .aside .download_btn{-webkit-animation: bounce-in-top 1.1s both; animation: bounce-in-top 1.1s both; }
.main_wrap .aside .download_btn:hover{animation: scale 2s infinite}


/* Dialog */
.dialog{position: fixed;top:50%;left:50%;transform: translate(-50%, -50%);width: 240px;background-color: white;border-radius: 10px;z-index: 1;overflow: hidden;text-align: center;box-shadow: 0px 4px 40px 0px #0000004D; display: none; padding:30px 15px 15px; z-index: 11;}
.dialog .dialog_content {width: 100%; margin-bottom: 20px;}
.dialog .dialog_content .dialog_content{font-family: "SpoqaM", sans-serif; color:#4A4A6A; font-size: 16px; line-height: 1.3;}

.dialog .btn_wrap{font-size: 15px;}
.dialog .btn_wrap .btn_filled {color:white; font-family: "SpoqaB", sans-serif; background:#FF2C68; border-radius:8px; width: 100%; border:none; height:42px;}

#shadow {position: fixed;width:100vw;height:100vh;overflow: hidden;touch-action: none;background: #050504; opacity:0.3; top: 0;left: 0;right: 0; display: none; z-index: 10;}







/*TAB*/
@media (max-width:1200px){
    .aside{right:30px; width:150px; }
    .aside .download_btn, .main_wrap .aside .event_go_btn{ width:160px; height:160px;}
    .aside .top_btn {width:55px; height:55px; background-size: 18px; }
}

/*TAB + mobile*/
@media (max-width: 900px) {
    .aside{bottom: 25px; right:30px;}
}

/*TAB + mobile*/
@media (max-width: 800px) {
    .main_wrap .aside .download_btn{display: none;}
}

/*mobile*/
@media (max-width:680px) {
    .aside{bottom: 10px; right:5px; width:110px;}
    .aside .top_btn{width:40px; height:40px; background-size: 13px;}
    .aside .download_btn{border:none; width:110px; height:110px; background: url(../../img/brandpage/app_dowmload2.png); background-size:100%; text-indent: -9999px;}
    .main_wrap .aside .event_go_btn{border:none; width:110px; height:110px;}

    .dialog { width: 75%; min-width: 260px; max-width: 300px; }
    .dialog .dialog_content{min-height: 115px;}
    .dialog .dialog_content .content_title{font-size: 19px;}
    .dialog .dialog_content .content_content{font-size: 16px;}
    .dialog .btn_wrap{height: 45px;}
    .dialog .btn_wrap .close{background-color: #e9433e; font-size: 15px;}
}

/* mobile */
@media (max-width: 500px) {
    .dialog .dialog_content{min-height: 100px;}
    .dialog .dialog_content .content_title{font-size:18px;}
    .dialog .dialog_content .content_content{font-size: 15px}
}

@media (max-width: 360px) {
    .dialog .dialog_content .content_title{font-size:17px;}
    .dialog .dialog_content .content_content{font-size: 14px}
}





/*==================================================================
// sub 공통 (header / content / title / footer)
//=================================================================*/


/* sub header */
.sub_header_wrap{width:100%;height: 90px;position: fixed;top:0;right:0;left:0;background:white;border-bottom: 1px solid #e8e8e8;z-index: 10;}
.sub_header { height: 100%; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 5; }
.sub_header::after{content:''; display: table; clear:both;}
.sub_header .logo{float: left;}
.sub_header .logo a{display: inline-block;width: 160px;background: url(../../img/brandpage/lifewallet_logo_1.svg) center no-repeat;height: 35px;background-size: 100%;text-indent: -9999px;}

.sub_header .main_gnb{float: left;margin-left: 60px;height: 100%;}
.sub_header .main_gnb .main_gnb_list { height: 100%; }
.sub_header .main_gnb .main_gnb_list > li{display: inline-block;position: relative;padding: 0 30px;height: 100%;}
.sub_header .main_gnb .main_gnb_list > li > a { color: black; font-family: 'SpoqaM',sans-serif; font-size: 20px; width: 100%; height: 100%; text-align: center; transition: .5s; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.sub_header .main_gnb .main_gnb_list > li > a.on{color:#FF2C68}
.sub_header .main_gnb .main_gnb_list > li > a:hover{ transform: translateY(-2px);}
.sub_header .main_gnb .main_gnb_list > li.on .list_sub{display: block; animation: subgnb .5s;}


.sub_header .main_gnb .main_gnb_list > li .list_sub{display: none;position: absolute;top: 78px;left: 50%;transform: translateX(-50%);background:#07224A;border-radius: 40px;text-align: center; height:48px;}
.sub_header .main_gnb .main_gnb_list > li .list_sub.sub1{width:210px;}
.sub_header .main_gnb .main_gnb_list > li .list_sub.sub2{width: 190px;}

.sub_header .main_gnb .main_gnb_list > li .list_sub > li { display: inline-block; }
.sub_header .main_gnb .main_gnb_list > li .list_sub > li > a{color:white;font-size: 19px;margin: 0 8px;display: inline-block;padding: 10px 0;font-family: 'SpoqaM', sans-serif;}

.sub_header .header_btn { position: absolute; right: 0; }
.sub_header .header_btn .app_download {background: url(../../img/brandpage/gnb_down_icon.svg) calc(100% - 13px) center no-repeat #FF2C68;background-size: 22px;padding: 8px 36px 8px 18px;border-radius: 30px;color: white;font-size: 16px;font-family: 'SpoqaM', sans-serif;letter-spacing: -0.03rem; transition:.5s;}

/* mobile side menu */
.sub_sidemenu{position: fixed;top: 0;right:-100%;background: white;height: 100%;z-index: 11;width: 270px;box-shadow: -6px 0px 23px rgb(0 0 0 / 8%);display:none;}
.sub_sidemenu .sidemenu_list {padding: 0 25px 0 30px;margin-top: 100px;}
.sub_sidemenu .sidemenu_list .list_title { font-size: 20px; font-family: 'SpoqaM'; margin: 32px 0 16px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.sub_sidemenu .sidemenu_list .list_title .arrow{display:inline-block; width:30px; height:30px; background:url(../../img/brandpage/gnb_arrow_icon.svg) center no-repeat; background-size: 100%;transition: .3s;}
.sub_sidemenu .sidemenu_list .list_title .arrow.rotate{transform: rotate(180deg);}
.sub_sidemenu .sidemenu_list .sub_list li a { font-size: 18px; color: #787878; line-height: 2.2; display: inline-block; width: 100%; height: auto; font-family:'SpoqaR', sans-serif ; }
.sub_sidemenu .sidemenu_list .sub_list li a:hover, .sub_sidemenu .sidemenu_list .sub_list li a:active, .sub_sidemenu .sidemenu_list .sub_list li a:focus{text-decoration: underline;}
.sub_sidemenu .sidemenu_close{width:40px;height:40px;background: url(../../img/brandpage/gnb_close_icon.svg) center no-repeat;background-size: 100%;text-indent: -9999px;border:none;position: absolute;top: 20px;right: 20px;}
.sub_sidemenu_shadow{width:100%;height:100%;background: rgba(0, 0, 0, 0.2);position: fixed;right:0;left:0;top: 0;display:none;z-index: 10;}


/* tab mobile 노출 */
.sub_header .total_menu{display: none;}

@-webkit-keyframes subgnb {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes subgnb {
  0% {opacity: 0;}
  100% {opacity: 1;}
}



/* sub content_feature 공통 */
.content_feature{height:48px; border-bottom:1px solid #e8e8e8;}
.content_feature .list_path {width: 100%;height: 100%;}
.content_feature .list_path li {display: inline-block;height: 100%;}
.content_feature .list_path li .link_path { display: inline-block; height: 100%; line-height: 48px; padding-right: 30px;color: #999; opacity: .6; font-size: 15px; font-family: 'SpoqaM',sans-serif; position: relative;}
.content_feature .list_path li .link_path::after{content:''; display: inline-block; width:20px; height: 20px; background:url(../../img/brandpage/icon_arrow.svg) center no-repeat; background-size: 100%; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.content_feature .list_path li:last-child .link_path{color:#000}
.content_feature .list_path li:last-child .link_path::after{display: none;}
/* .content_feature .list_path li a.home{text-indent: -9999px; background:url(../../img/brandpage/home_icon.svg) center no-repeat; padding:0 26px;} */


/* sub container 공통 */
#container{margin-top: 90px; padding-bottom: 120px;}


/* sub page title 공통 */
.page_title h2 { font-size: 34px; font-family: "SpoqaM", sans-serif; word-spacing: -3px; letter-spacing: -1px; margin-bottom: 45px; padding: 90px 0 25px; border-bottom: 1px solid #505050; }
.page_title h2 em{font-family: "SpoqaB", sans-serif;}



/* footer 공통 */
.footerwrap { padding: 55px 0 45px 0; border-top: 1px solid #E8E8E8; background: white;}
.footerwrap .nds_logo{margin-bottom: 15px;}

.footerwrap .footer_info > p{font-size:14px; color:#8D8D8D; font-family: 'SpoqaR', sans-serif; letter-spacing: 0px; margin-bottom: 7px;}
.footerwrap .footer_info > p strong{color:#333333; font-family: 'SpoqaR', sans-serif; font-size: 14px; margin-right: 3px;}
.footerwrap .footer_info > p span:not(:first-child){margin-left:10px;}
.footerwrap .footer_info > p span:not(:first-child)::before { content: ''; display: inline-block; width: 1px; height: 12px; background: #dcdcdc; margin-right: 12px; }
.footerwrap .footer_info > p a.link_info{ font-family: 'SpoqaM', sans-serif; border-bottom: 1px solid #999; color:#999; display: inline-block;}

.footerwrap .footer_gnb { margin-top: 35px; display: -ms-flexbox; display: -webkit-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.footerwrap .footer_gnb .term_list li{display: inline-block;margin-right: 33px;}
.footerwrap .footer_gnb .term_list li a{color:#444; font-size: 14px; font-family: 'SpoqaM', sans-serif;}
.footerwrap .footer_gnb .term_list li a:hover, .footerwrap .footer_gnb .term_list li a:active, .footerwrap .footer_gnb .term_list li a:focus{text-decoration: underline;}

.footerwrap .footer_gnb .sns_list li{display: inline-block; margin-left:10px}
.footerwrap .footer_gnb .sns_list li a{text-indent: -9999px; font-size: 1px; width:45px; height:45px; border-radius: 100%;display: inline-block; background-position: center; background-repeat: no-repeat;}
.footerwrap .footer_gnb .sns_list li .facebook{background-image:url(../../img/brandpage/sns_facebook_gray.svg); background-color:#F6F6F9;}
.footerwrap .footer_gnb .sns_list li .instargram{background-image:url(../../img/brandpage/sns_instargram_gray.svg);background-color:#F6F6F9;}
.footerwrap .footer_gnb .sns_list li .youtube{background-image:url(../../img/brandpage/sns_youtube_gray.svg);background-color:#F6F6F9;}
.footerwrap .footer_gnb .sns_list li .blog{background-image:url(../../img/brandpage/sns_blog_gray.svg); background-color:#F6F6F9;}


.sub_sidemenu .sidemenu_list .sns_list{position: absolute; bottom: 30px;}
.sub_sidemenu .sidemenu_list .sns_list li{display: inline-block; margin-right:10px}
.sub_sidemenu .sidemenu_list .sns_list li a{text-indent: -9999px; font-size: 1px; width:42px; height:42px; border-radius: 100%;display: inline-block;}
.sub_sidemenu .sidemenu_list .sns_list li .facebook{background:url(../../img/brandpage/sns_facebook_gray.svg) center no-repeat #f6f6f6; background-size: 25px;}
.sub_sidemenu .sidemenu_list .sns_list li .instargram{background:url(../../img/brandpage/sns_instargram_gray.svg) center no-repeat #f6f6f6; background-size: 25px;}
.sub_sidemenu .sidemenu_list .sns_list li .youtube{background:url(../../img/brandpage/sns_youtube_gray.svg) center no-repeat #f6f6f6; background-size: 25px;}
.sub_sidemenu .sidemenu_list .sns_list li .blog{background:url(../../img/brandpage/sns_blog_gray.svg) center no-repeat #f6f6f6; background-size: 25px;}




/* pagenation 공통 */
.pagenation{margin-top:60px; text-align: center;}
.pagenation a{display: inline-block;  height:30px; line-height: 30px; font-size: 14px; margin:0 6px; color:#888; min-width: 18px; transition: 0.3s;}
.pagenation a.on, .pagenation a:hover, .pagenation a:focus{font-family: "SpoqaB", sans-serif; text-decoration: underline; color:#000;}

.pagenation .page_btn{width:30px; height:30px; line-height: 30px; margin:0 2px; padding:0; border-radius: 100%; position: relative; z-index: 1;}
.pagenation .page_btn.btn_prev{background:url(../../img/brandpage/pagenation.svg) center no-repeat; background-size: 7px; transform: rotate(180deg);}
.pagenation .page_btn.btn_next{background:url(../../img/brandpage/pagenation.svg) center no-repeat; background-size: 7px;}

.pagenation .page_btn.btn_prev:hover{background:url(../../img/brandpage/pagenation.svg) center no-repeat #f7f7f7; background-size: 7px; transform: rotate(180deg);}
.pagenation .page_btn.btn_next:hover{background:url(../../img/brandpage/pagenation.svg) center no-repeat #f7f7f7; background-size: 7px;}




/*==================================================================
// Responsive size
//=================================================================*/

@media (max-width: 1500px){
  /* contents padding */
  .contentsInner {padding: 0 30px; width: 100%;}

  /* header */
  .sub_header .header_btn{right:30px;}

}

/*small_pc*/
@media (max-width:1250px){

  /* header */
  .sub_header .header_btn{right:40px;}
}


/*TAB*/
@media (max-width: 1024px){

  /* header */
  .sub_header{margin: 0px 0 70px;}
  .sub_header .main_gnb{margin-left:2vw;}
  .sub_header .main_gnb .main_gnb_list > li{padding:0 2vw;}
  .sub_header .main_gnb .main_gnb_list > li > a{font-size: 20px;}
  .sub_header .main_gnb .main_gnb_list > li .list_sub > li > a{font-size: 18px;}
}


/*TAB*/
@media (max-width: 900px) {

    /* contents padding */
    .contentsInner {padding: 0 30px; width: auto;}

    /* sub header */
    .sub_header_wrap, .sub_header{height:75px;}
    .sub_header .main_gnb .main_gnb_list > li .list_sub{top:65px}
    .sub_header .main_gnb .main_gnb_list > li .list_sub > li > a{font-size: 17px;}

    /* sub container */
    #container{margin-top:75px; padding-bottom: 70px;}

    /* sub page title 공통 */
    .page_title h2 { font-size: 28px; margin-bottom: 30px; padding: 55px 0 25px; }

    /* footer */
    .footerwrap .footer_info > p{font-size: 14px;}
    .footerwrap .footer_gnb .term_list li a{font-size: 15px;}
}

@media (max-width: 800px) {

  /* mobile header */
  .sub_header{justify-content: space-between;margin: 0px 0 30px;}
  .sub_header .main_gnb, .sub_header::after, .content_feature{display: none;}
  .sub_header .header_btn{position: revert;}
  .sub_header .header_btn .app_download, .sub_header .header_btn .total_menu{display: block; text-indent: -9999px; width:38px; height:38px; border:none; float:left; background-size:33px !important;}
  .sub_header .header_btn .app_download{margin-right: 12px;border:none;padding: 0;border-radius: 0;background-position: center;background:url(../../img/brandpage/gnb_down_icon_2.svg) center no-repeat; }

  .sub_header .header_btn .total_menu{background: url(../../img/brandpage/gnb_menu_icon_2.svg) center no-repeat;}

}

@media (max-width: 750px) {
 /* contents padding */
 .contentsInner {padding: 0 16px;}
}

/*TAB + mobile*/
@media (max-width:680px) {

    /* sub header */
    .sub_header_wrap, .sub_header{height:60px; margin:0;}
    .sub_header .gnb_app{font-size: 13px; padding: 5px 28px 6px 15px;}
    .sub_header .gnb_app > i{font-size: 15px; top: 7px; right: 10px;}
    .sub_header .logo a{width: 120px;}
    .sub_header .header_btn .app_download{margin-right: 0px;}
    .sub_header .header_btn .total_menu, .sub_header .header_btn .app_download{background-size: 27px !important;}

    /* sub container */
    #container{margin-top:56px; padding-bottom: 50px;}

    /* sub page title 공통 */
    .page_title h2 {padding:40px 0 15px; font-size: 23px;}

    /* footer */
    .footerwrap{padding:45px 0 35px 0}
    .footerwrap .footer_gnb { margin-top: 25px; -webkit-box-orient: vertical; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: flex-start; -ms-flex-align: flex-start; align-items: flex-start; }
    .footerwrap .footer_gnb .sns_list li{margin:15px 10px 0 0;}
    .footerwrap .footer_info > p span{display: inline-block; margin-bottom: 3px;}
    .footerwrap .footer_info > p span{margin: 0 5px 0 0px !important;}
    .footerwrap .footer_info > p span:not(:first-child)::before{display: none;}


    /* pagenation */
    .pagenation{margin-top: 30px;}
    .pagenation a{font-size: 13px;}
    .pagenation .page_btn.btn_prev, .pagenation .page_btn.btn_next{background-size:5px}
}

/*mobile*/
@media (max-width: 575px) {

}

/* mobile */
@media (max-width: 500px) {

    /* contents padding */
    .contentsInner {padding: 0 20px !important;}

    /* sub page title 공통 */
    .page_title h2 {font-size: 5.7vw; }


    /* footer */
    .footerwrap .footer_info > p{margin-bottom: 16px;font-size: 13px;}
    .footerwrap .footer_info > p strong{font-size: 13px;}
    .footerwrap .footer_info > p span{margin:0 5px 2px 0px !important}
    .footerwrap .footer_gnb .term_list li{margin-right:10px;}
}

@media (max-width: 440px) {
  .sub_sidemenu{width: 100%}
  .sub_sidemenu .sidemenu_list .sns_list { width: 100%; text-align: center; margin-left: -30px; }
  .sub_sidemenu .sidemenu_list .sns_list li{margin-right: 14px;}
}

/* mobile */
@media (max-width: 360px) {
    /* contents padding */
    .contentsInner {padding: 0 16px !important;}

    /* sub page title 공통 */
    .page_title h2 {font-size: 7vw;}

    /* footer */
    .footerwrap .footer_info > p{font-size: 12px;}
    .footerwrap .footer_info > p strong{font-size: 13px;}

    .sub_sidemenu .sidemenu_list .list_title{font-size: 17px;}
    .sub_sidemenu .sidemenu_list .sub_list li a{font-size: 15px;}
}


@media (max-width: 320px) {
  /* contents padding */
  .contentsInner {padding: 0 12px !important;}
}



/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-in-top {
    0%  { -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
    38%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; }
    55%  { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    72%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    81%  { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    90%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    95%  { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    100%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  }
  @keyframes bounce-in-top {
    0%  { -webkit-transform: translateY(-100px); transform: translateY(-100px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; }
    38%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; }
    55%  { -webkit-transform: translateY(-65px); transform: translateY(-65px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    72%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    81%  { -webkit-transform: translateY(-28px); transform: translateY(-28px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    90%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
    95%  { -webkit-transform: translateY(-8px); transform: translateY(-8px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }
    100%  { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  }

  @-webkit-keyframes scale {
    0%{transform: scale(1)}
    50%{transform: scale(1.1)}
    100%{transform: scale(1)}
  }
  @keyframes scale {
    0%{transform: scale(1)}
    50%{transform: scale(1.1)}
    100%{transform: scale(1)}
  }


  @-webkit-keyframes showup {
    0%{transform: translateY(20px); opacity: 0.8;}
    100%{transform: translateY(0px); opacity:1;}
  }
  @keyframes showup {
    0%{transform: translateY(20px); opacity: 0.8;}
    100%{transform: translateY(0px); opacity:1;}
  }