/********************* Header *********************/

#header{
   background-image: linear-gradient(to right, #fccea0, #d3959b);
   background-image: url('../../img/common/sexy/sexy girl (15).jpg');
   background-size: contain; 
}
#header .width{
   width: 1300px;
   background-color: rgba(16, 16, 16, 0.57);
}
#header .width .logo{
   text-shadow: 0 0 15px #ef4164, 0 0 10px #ef4164, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}
#header .width .logo svg{
   width: 70px;
   margin-top: -4px;
   margin-right: -4px;
}
#header .width .logo svg g{
   fill: #f8a1c4;
}
#header .width nav{
   margin-top: 1px;
}
#header .width nav ul#mainmenu{
   width: 100%;
   background: #2b2b2b;
   float: left;
}
#header .width nav ul#mainmenu li{
   float: left;
   display: inline;
   padding: 3px 0;
}
#header .width nav ul#mainmenu li a.selected{
   color: #ec1d6a;
   font-weight: bold;
}
#header .width nav ul#mainmenu li:hover{
   background: #454444;
}
#header .width nav ul#mainmenu li a{
   padding: 5px 0px;
   color: #ebf7db;
   font-size: 0.95rem;
   padding:0 15px;
}
#header .width nav ul#mainmenu li:first-child a{
   padding-left: 24px;;
}
#header .width nav ul#mainmenu li ul{
   position: absolute;
   min-width: 100px;
   max-width: 150px;
   background: #32342e;
   z-index: 100;
   border: 1px solid #a0353d;
   border-radius: 8px;
}
#header .width nav ul#mainmenu li:hover ul{
   display: block;
}
#header .width nav ul#mainmenu li ul li{
   width: 100%;
}
#header .width nav ul#mainmenu li ul li.selected{
   background-color: #555;
}
#header .width nav ul#mainmenu li ul li.selected a{
   color: #ec1d6a;
   font-weight: bold;
}
#header .width nav ul#mainmenu li ul li a{
   color: #ede9f9;
   font-size: 0.88rem;
   padding-left: 15px;
}
#header .width nav ul#mainmenu li ul li:first-child a{
   padding-left: 15px;
}
#header .width nav ul#mainmenu li ul li:hover{
   background: #555;
}
#header .width nav ul#mainmenu li ul li:hover a{
   color: #ec1d6a;
}
#header .width nav ul#mainmenu li ul{
   display: none;
}

/********************* Main *********************/

main .width{
   width: 1280px;
}
main .other-areas, main .hashtags{
   width: 1150px;
}
main .other-areas{
   margin-top: 80px;
}
main .hashtags .hashtag{
   padding: 1.2px 10px;
   font-size: 0.9rem;
   color: #ff2f82;
   border: 1px solid #ff2f82;
}


/********************* 카톡 박스 *********************/

main .kakao-box{
   background-color: #f7e111;
   border-radius: 15px;
   padding: 6px 15px;
}
main .kakao-box img{
   width: 36px;
}
main .kakao-box p{
   color: red;
}
main .kakao-box p span{
   background-color: transparent;
}

/********************* 라인 박스 *********************/

main .line-box{
   background-color: #00b900;
   border-radius: 15px;
   padding: 2px 8px;
   padding-right: 15px;
}
main .line-box img{
   width: 45px;
}
main .line-box p{
   color: #fff;
}

/********************* 텔레그램 박스 *********************/

main .telegram-box{
   background-color: #3ab1e3;
   border-radius: 15px;
   padding: 6px 12px;
   padding-right: 15px;
}
main .telegram-box img{
   width: 37px;
}
main .telegram-box p{
   color: #fff;
}

/********************* Footer *********************/

footer{
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee;
}
footer .width{
   width: 1280px;
}
footer .width .meetOK .subject{
   color: #fff;
   font-size: 0.95rem;
}
footer .width .meetOK .date{
   color: #d91958;
   font-size: 0.95rem;
}
footer .width .meetOK .count{
   color: #edef6f;
   font-size: 1.1rem;
}

/********************* 이미지 유유히 흔들림 *********************/

@-webkit-keyframes move-x{
  0% {
    webkit-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(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: translateX(-6.25px);
    -webkit-transform: translateX(-6.25px);
    transform: translateX(-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: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(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: translateX(6.25px);
    -webkit-transform: translateX(6.25px);
    transform: translateX(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: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}