﻿

html body img{
   /* 禁止文字选中与图片拖拽 */
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/********************* Header *********************/
header{
   width: 100%; height: 70px; background-color: #32284b;
}
header .wrapper{
   width: 94%; margin: 0 auto;
}
header .wrapper .logo{
   width: 115px; margin-top: -1.5px;
}
header .wrapper .admin-link{
   font-weight: bold; color: #fff; font-size: 0.9rem;
}
header .wrapper .msg-icon{
   width: 29px; margin-top: 3.5px;
}

/********************* 회원정보 *********************/
.mb-info{
   width: 100%; height: 40px;
   background-color: #e6d4e4;
}
.mb-info .wrapper{
   width: 94%; margin: 0 auto;
}
.mb-info .wrapper .people-icon{
   width: 16px;
}
.mb-info .wrapper .name{
   font-weight: 610; color: #6c00fe;
}
.mb-info .wrapper .name span{
   color: #222; font-weight: normal; margin-left: 2px;
}
.mb-info .wrapper .cash-icon{
   width: 19px;
}
.mb-info .wrapper .cash span:nth-child(1){
   font-weight: 610; color: #ff096b; margin-left: 2px;
}
.mb-info .wrapper .cash span:nth-child(2){
   font-weight: 610; color: #ff096b; margin-left: 2px;
}

/********************* 한줄공지 *********************/
.notice-onerow{
   width: 100%; height: 40px;
   background-color: #6c00fe;
   background-image: url('../../../img/mobile/notice-onerow-bg.jpg');
   background-size: contain;
}
.notice-onerow .wrapper{
   width: 94%; margin: 0 auto;
}
.notice-onerow ul{
   display: block;
   overflow: hidden;
   height: 18px;
}
.notice-onerow ul li a{
   color: #fff; font-weight: 610;
}
.notice-onerow ul li  a span{
   color: #ffbc3b; font-weight: 610;
}

/********************* main *********************/
main{
   #margin-bottom: 54px;
}

/********************* Menu *********************/
#mainmenu{
   position: fixed; top: 0px; width: 100%; height: 100%;
}
#mainmenu .wrapper .empty{
   height: 100%; background-color: #191919; opacity: 0.7;
}
#mainmenu .wrapper .content{
   width: 87%; height: 100%; 
   background-color: #fff; border-left: 1px solid #000;
}
#mainmenu .wrapper .content .logo-gray{
   width: 100px;
}
#mainmenu .wrapper .content svg{
   width: 22px; margin-right: 19px;
}
#mainmenu .wrapper .content .nickname span:nth-child(1){
   color: #2a50bd; font-weight: bold;
}
#mainmenu .wrapper .content .nickname span:nth-child(2){
   color: #333; font-weight: normal; margin-left: 1px;
}
#mainmenu .wrapper .content .membercash span:nth-child(1){
   color: #f7464f; font-weight: bold;
}
#mainmenu .wrapper .content .membercash span:nth-child(2){
   color: #f7464f; font-weight: bold; margin-left: 1px;
}
#mainmenu .wrapper .content .menuname a{
   font-size: 0.95rem; color: #303030;
}
#mainmenu .wrapper .content .menuname img{
   width: 8px;
}
#mainmenu .wrapper .content .btn-group .myinfo, #mainmenu .wrapper .content .btn-group .login{
   background-color: #ea6d85;
}
#mainmenu .wrapper .content .btn-group .logout, #mainmenu .wrapper .content .btn-group .join{
   background-color: #71757e;
}
#mainmenu .wrapper .content .kakao{
   position: absolute; bottom: 0px; height: 65px;
   background-color: #ffe401; border-top: 1px solid #2b2b2a; border-bottom: 0px;
   padding: 0; 
}
#mainmenu .wrapper .content .kakao img{
   width: 34px;
}
#mainmenu .wrapper .content .kakao p{
   font-weight: bold; color: #3c1e20; font-size: 1.1rem;
}
#mainmenu .wrapper .content .kakao p span{
   color: #ff096b; font-size: 1.3rem;
}



/********************* Footer *********************/
footer{
   /* position: fixed; bottom: 0px; */
   background-color: #d13952;
}
footer .wrapper{
   width: 85%;
   margin: 0 auto;
}
footer .wrapper img{
   width: 22px;
}
footer .wrapper p{
   font-size: 0.83rem; color: #81061a; font-weight: bold; margin-top: 4px;
}


/*********************** 이미지 유유히 흔들리는 효과 ***********************/
@-webkit-keyframes hover{
  0% {
    webkit-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    webkit-animation-timing-function: cubic-bezier(0.3, 0.36, 0.6, 1);
    -webkit-animation-timing-function: cubic-bezier(0.3, 0.36, 0.6, 1);
    animation-timing-function: cubic-bezier(0.3, 0.36, 0.6, 1);
  }
  25% {
    webkit-transform: translateY(-6.25px);
    -webkit-transform: translateY(-6.25px);
    transform: translateY(-6.25px);
    webkit-animation-timing-function: cubic-bezier(0.51, -0.05, 0.85, 0.82);
    -webkit-animation-timing-function: cubic-bezier(0.51, -0.05, 0.85, 0.82);
    animation-timing-function: cubic-bezier(0.51, -0.05, 0.85, 0.82);
  }
  50% {
    webkit-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    webkit-animation-timing-function: cubic-bezier(0.3, 0.36, 0.6, 1);
    -webkit-animation-timing-function: cubic-bezier(0.3, 0.36, 0.6, 1);
    animation-timing-function: cubic-bezier(0.3, 0.36, 0.6, 1);
  }
  75% {
    webkit-transform: translateY(6.25px);
    -webkit-transform: translateY(6.25px);
    transform: translateY(6.25px);
    webkit-animation-timing-function: cubic-bezier(0.51, -0.05, 0.85, 0.82);
    -webkit-animation-timing-function: cubic-bezier(0.51, -0.05, 0.85, 0.82);
    animation-timing-function: cubic-bezier(0.51, -0.05, 0.85, 0.82);
  }
  100% {
    webkit-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
