@charset "utf-8";
@import url('../../font/small/iconfont.css?ver=240501');

/*********************** Basic ***********************/

html, body, header, header nav, main, footer{
   max-width: 768px;
}
html, body, header, main, footer{
   margin: 0 auto;
}
html body img{
  /* 禁止文字选中与图片拖拽 */
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
html, body{
  background-color: #eee;
  background-color: #b3c8d9;
  background-color: #f2f2f2;
}
body, select, input, textarea, button{
  font-family: 'notosans', '맑은 고딕', 'Nanum Gothic', 'Microsoft Yahei', 'Gulim', 'dotum', 'Helvetica', 'sans-serif';
  box-sizing: border-box;
  outline: none;
}
input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #fff inset;   /* 저장된 기록이 있을 경우 파란색 배경 안 나오게 하기 */
}
a{
  cursor: pointer;
}

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

header{
  overflow: hidden;
  height: 62px;
  padding: 0 14px;
}
header.real{
  background-color: #b44c97;
  background-color: #2b2b2b;
  background-color: #221a1f;
  background-color: #381c2d;
  background-color: #43258a;
  background-image: linear-gradient(to right, #43258a , rgb(255, 0, 149));
}
header.mpt{
  background-color: #fff;
}
header #msg-icon{
  width: 1.7rem;
  margin-top: -5px;
  cursor: pointer;
}
header #back-icon{
  width: 1.4rem;
}
header.real .logo{
  width: 8rem;
  margin-left: -3px;
}
header .title{
  font-size: 1.13rem;
}
header.real #icon-menu-open{
  width: 1.7rem;
  margin-right: 6px;
}
@media screen and (min-width: 768px){
  header{
    height: 100px;
    padding: 0 25px;
  }
  header #msg-icon{
    width: 2.1rem;
    margin-top: -8px;
    margin-left: 4px;
  }
  header #back-icon{
    width: 1.95rem;
  }
  header.real .logo{
    width: 12rem;
    margin-left: -3px;
  }
  header.real .title{
    font-size: 1.5rem;
  }
  header.real #icon-menu-open{
    width: 2.2rem;
    margin-right: 10px;
  }
}

/*********************** Mian ***********************/

main{
  height: calc(100% - 62px - 85px); 
  overflow: hidden;
  background-color: #fff;
  overflow-y: scroll;
  padding-bottom: 25px;
}
main::-webkit-scrollbar{
  width: 0px;
}
main::-webkit-scrollbar-thumb{
  background-color: #eee;
}
@media screen and (min-width: 768px){
  main{
    height: calc(100% - 100px - 140px);
  }
}

main .live-top{
  background-color: #f2f2f2;
}
main .live-top button[type="button"] img{
  width: 1.2rem;
}
main .live-top button[type="button"] p{
  font-size: 0.82rem;
}
main .live-top .customer-btn{
  background-color: #00b900;  
}
main .live-top .deposit-btn{
  background-color: #ac3663;  
}
main .live-top .withdraw-btn{
  background-color: #c0870c;  
}
main .live-top .search{
  height: 31px;
  border: 1px solid #9b9b9b;
  padding-left: 5px;
}
main .live-top .search input[type="text"]{
  width: 80px;
  font-size: 0.75rem;
}
main .live-top .search img{
  width: 19px;
}
@media screen and (min-width: 768px){
  main .live-top button[type="button"] img{
    width: 1.5rem;
  }
  main .live-top button[type="button"] p{
    font-size: 0.98rem;
  }
  main .live-top .search{
    height: 36px;
    padding-left: 5px;
  }
  main .live-top .search input[type="text"]{
    width: 120px;
    font-size: 0.75rem;
  }
}


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

footer{
  height: 85px;
  background-color: #fff;
  border-top: 1px solid #b44c97;
}
footer a{
  color: #2b2b2b;
}
footer a.act{
  color: #b44c97;
}
footer a i{
  font-size: 2rem;
}
@media screen and (min-width: 768px){
  footer{
    height: 140px;
  }
  footer a{
    font-size: 1.5rem;
  }
  footer a i{
    font-size: 3.5rem;
  }
}


/*********************** Menu ***********************/

#menu{
  position: fixed;
  top: 0px;
  max-width: 768px;
  height: 100%;
  z-index: 50;
}
#menu .layer .l{
  height: 100%; background-color: #1b1b1b; opacity: 0.75;
}
#menu .layer .r{
  display: flex;
  flex-direction: column;
  width: 80%;
  height: 100%; 
  background-color: #fff;
}
#menu .layer .r .hd{
  height: 70px;
  background-color: #b44c97;
}
#menu .layer .r .hd .menu-logo{
  width: 7rem;
}
#menu .layer .r .hd #icon-menu-close{
  width: 1.55rem;
}
#menu .layer .r .ct{
  overflow-y: scroll;
  height: 100%;
}
#menu .layer .r .ct::-webkit-scrollbar{
  width: 0px;
}
#menu .layer .r .ct ul li.user-info{
  background-color: #e9dff8;
  background: linear-gradient(to right, #e6d7f6, #f8f6fc);
  border-top: 0px solid #e9e9e9;
  border-bottom: 0px solid #e9e9e9;
  font-weight: normal;
  color: #333;
  font-size: 0.91rem;
}
#menu .layer .r .ct ul li.user-info .nick span:nth-child(1){
  color: #6c00fe; font-weight: bold;
}
#menu .layer .r .ct ul li.user-info .nick span:nth-child(1)::after{
  font-size: 0.88rem;
}
#menu .layer .r .ct ul li.user-info .nick span:nth-child(2){
  color: #ea6d85;
}
#menu .layer .r .ct ul li.user-info .point{
  font-weight: normal;
}
#menu .layer .r .ct ul li.user-info .point span{
  color: #c21d99; font-weight: bold; font-size: 0.95rem;
}
#menu .layer .r .ct ul li.user-info .point span::after{
  color: #777; font-size: 0.88rem;
}
#menu .layer .r .ct ul li.user-info .message{
  font-weight: normal;
}
#menu .layer .r .ct ul li.user-info .message a{
  font-weight: bold; font-size: 0.95rem;
}
#menu .layer .r .ct ul li.user-info .message a::after{
  color: #777; font-size: 0.88rem;
}
#menu .layer .r .ct ul li.user-info .mypage{
  width: 1.2rem;
}
#menu .layer .r .ct ul li.menu{
  height: 47px;
  border-bottom: 0.8px solid #e9e9e9;
}
#menu .layer .r .ct ul li.menu p{
  font-size: 0.91rem; color: #333;
}
#menu .layer .r .ct ul li.bg{
  background-color: #f9f9f9;
}
#menu .layer .r .ct ul li.menu a{
  font-size: 0.95rem; color: #303030;
}
#menu .layer .r .ct ul li.menu .arraw-icon{
  display: none;
  width: 0.88rem;
  opacity: 0.8;
  transform: scaleX(-1);
}
#menu .layer .r .ct ul li:nth-last-child(2){ /* 충전 */
  background-color: #f3cfe8;
  background: linear-gradient(to right, #f3edcf, #fff);
  border-bottom: 0;
  color: #000;
}
#menu .layer .r .ct ul li:nth-last-child(2) img{
  width: 1.2rem;
  margin-top: 1px;
}
#menu .layer .r .ct ul li:last-child{ /* 환전 */
  background-color: #b8cef1;
  background: linear-gradient(to right, #f3dacf, #fff);
  color: #000;
}
#menu .layer .r .ct ul li:last-child img{
  width: 1.2rem;
  margin-top: -1px;
}
#menu .layer .r .ct .btn-grp button{
  font-size: 0.9rem;
}
#menu .layer .r .ct .btn-grp .myinfo, #menu .layer .r .btn-grp .login{
  background-color: #ea6d85;
}
#menu .layer .r .ct .btn-grp .logout, #menu .layer .r .btn-grp .join{
  background-color: #71757e;
}
#menu .layer .r .ft{
  width: 100%;
}
/* Kakao */
#menu .layer .r .ft .kakao{
  height: 52px;
  background-color: #ffe401; border-top: 0.5px solid #7b7b7b; border-bottom: 0px;
  padding: 0; 
}
#menu .layer .r .ft .kakao img{
  width: 34px;
}
#menu .layer .r .ft .kakao p{
  font-weight: bold; color: #3c1e20; font-size: 1.1rem;
}
#menu .layer .r .ft .kakao p span{
  color: #ff096b; font-size: 1.3rem;
}
/* Line */
#menu .layer .r .ft .line{
  height: 52px;
  background-color: #00b900; border-top: 0.5px solid #7b7b7b; border-bottom: 0px;
  padding: 0; 
}
#menu .layer .r .ft .line img{
  width: 44px;
}
#menu .layer .r .ft .line p{
  font-weight: bold; color: #fff; font-size: 1.1rem;
}
#menu .layer .r .ft .line p span{
  color: #fff; font-size: 1.3rem;
}
/* Telegram */
#menu .layer .r .ft .telegram{
  height: 52px;
  background-color: #3ab1e3; border-top: 0.5px solid #7b7b7b; border-bottom: 0px;
  padding: 0; 
}
#menu .layer .r .ft .telegram img{
  width: 32px;
}
#menu .layer .r .ft .telegram p{
  font-weight: bold; color: #fff; font-size: 1.1rem;
}
#menu .layer .r .ft .telegram p span{
  color: #fff; font-size: 1.3rem;
}

@media screen and (min-width: 768px){
  #menu .layer .r .hd{
    height: 90px;
  }
  #menu .layer .r .hd .menu-logo{
    width: 8.5rem;
  }
  #menu .layer .r .hd #icon-menu-close{
    width: 1.7rem;
  }
  #menu .layer .r .ct ul li.user-info{
    font-size: 0.92rem;
  }
  #menu .layer .r .ct ul li.menu{
    height: 55px;
  }
  #menu .layer .r .ct ul li.menu p{
    font-size: 0.92rem;
  }
  #menu .layer .r .ct ul li.menu .arraw-icon{
    width: 0.9rem;
  }
  #menu .layer .r .ct ul li:nth-last-child(2) img{
    width: 1.3rem;
    margin-top: 1.2px;
  }
  #menu .layer .r .ct ul li:last-child img{
    width: 1.3rem;
    margin-top: 1px;
  }
  #menu .layer .r .ct .btn-grp button{
    font-size: 1rem;
  }
  #menu .layer .r .ft .kakao, #menu .layer .r .ft .line, #menu .layer .r .ft .telegram{
    height: 62px;
  }
}


/*********************** Layer ***********************/

/* 어두운 배경 */
#overlay{
  position: fixed;
  width: 768px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  filter: alpha(opacity=77);
  opacity: 0.8;
  overflow: hidden;
  background-color: #000;
  z-index: 60;
}

/* 로딩 효과 */
#loader{
  border: 12px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-top: 12px solid #9b9b9b;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite; /* 키프레임 애니메이션값 1초 가속도없이 일정하게 연속적인 로딩 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
}
@keyframes spin{
  /*
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  */
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@media screen and (min-width: 768px){
  #loader{
    border: 16px solid #f3f3f3;
    border-top: 16px solid #9b9b9b;
    width: 130px;
    height: 130px;
  }
}


/*********************** Modal ***********************/

/* 모달 레이어 */
#warning-layer, #success-layer, #password-layer, #search-layer, #upload-layer, #gallery-layer, #send-point-layer{
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  z-index: 70;
}

/* 경고 메시지 */
#warning-layer .modal{
  position: relative;
  width: 88%;
  min-width: 180px;
  height: auto;
  padding: 0px;
  box-sizing: border-box;
}
#warning-layer .modal .body .hr{
  border-top: 1px solid #ddd;
}

/* 확인 메시지 */
#success-layer .modal{
  position: relative;
  width: 88%;
  min-width: 180px;
  height: auto;
  padding: 0px;
  box-sizing: border-box;
}
#success-layer .modal .body .hr{
  border-top: 1px solid #ddd;
}

/* 비밀번호 입력 */
#password-layer .modal{
  position: relative;
  width: 87%;
  min-width: 180px;
  height: auto;
  box-sizing: border-box;
  background-color: #b44c97;
}
#password-layer .modal .head{
  border-bottom: 1px solid #e46075;
}
#password-layer .modal .head .sbj{
  font-size: 1.1rem;
  color: #fff;
}
#password-layer .modal .head .r img{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 1.7rem;
}
#password-layer .modal #confirm-pw{
  font-size: 0.92rem;
}
#password-layer .modal #confirm-pw::-webkit-input-placeholder{
  font-size: 0.82rem;
}
#password-layer .modal .err-msg{
  color: #fff;
  font-size: 0.88rem;
}
#password-layer .modal button{
  background-color: #e46075;
  font-size: 0.95rem;
}

/* 파일 업로드 레이어 */
#upload-layer .modal{
  position: relative;
  width: 88%;
  min-width: 180px;
  max-width: 270px;
  height: auto;
  padding: 30px 0;
  box-sizing: border-box;
}
#upload-layer .modal p{
  font-size: 0.92rem;
}

/* 갤러리 뷰 레이어 */
#gallery-layer .modal{
  position: relative;
  width: auto;
  max-width: 80%;
  height: auto;
  padding: 3px;
  box-sizing: border-box;
}
#gallery-layer .modal .close-btn{
  position: absolute;
  top: -8px;
  right: -8px;
  width: 1.5rem;
  cursor: pointer;
}

/* 포인트 전송 입력 */
#send-point-layer .modal{
  position: relative;
  width: 87%;
  min-width: 180px;
  height: auto;
  box-sizing: border-box;
  background-color: #b44c97;
}
#send-point-layer .modal .head{
  border-bottom: 1px solid #e46075;
}
#send-point-layer .modal .head .sbj{
  font-size: 1.1rem;
  color: #fff;
}
#send-point-layer .modal .head .r img{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 1.7rem;
}
#send-point-layer .modal #confirm-pw{
  font-size: 0.92rem;
}
#send-point-layer .modal #confirm-pw::-webkit-input-placeholder{
  font-size: 0.82rem;
}
#send-point-layer .modal .err-msg{
  color: #fff;
  font-size: 0.88rem;
}
#send-point-layer .modal button{
  background-color: #e46075;
  font-size: 0.95rem;
}

@media screen and (min-width: 768px){
  #warning-layer, #success-layer, #password-layer, #search-layer, #upload-layer, #gallery-layer{
    width: 768px;
  }

  /* 경고 메시지 */
  #warning-layer .modal{
    width: 78%;
    min-width: 250px;
  }
  #warning-layer .modal p{
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.7rem;
  }

  /* 확인 메시지 */
  #success-layer{
    width: 768px;
  }
  #success-layer .modal{
    width: 78%;
    min-width: 250px;
  }
  #success-layer .modal p{
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.7rem;
  }

  /* 비밀번호 입력 */
  #password-layer{
    width: 768px;
  }
  #password-layer .modal{
    width: 65%;
    min-width: 200px;
  }
  #password-layer .modal .head .sbj{
    font-size: 1.15rem;
  }
  #password-layer .modal .head .r img{
    width: 1.9rem;
  }
  #password-layer .modal #confirm-pw{
    font-size: 0.95rem;
  }
  #password-layer .modal #confirm-pw::-webkit-input-placeholder{
    font-size: 0.82rem;
  }
  #password-layer .modal .err-msg{
    font-size: 0.88rem;
  }
  #password-layer .modal button{
    font-size: 1.05rem;
  }

  /* 파일 업로드 레이어 */
  #upload-layer .modal{
    width: 88%;
    min-width: 180px;
    max-width: 300px;
    padding: 40px 0;
  }
  #upload-layer .modal p{
    font-size: 0.95rem;
  }

  /* 갤러리 뷰 레이어 */
  #gallery-layer .modal{
    max-width: 77%;
  }
  #gallery-layer .modal .close-btn{
    position: absolute;
    top: -9px;
    right: -9px;
    width: 1.6rem;
    cursor: pointer;
  }

  /* 포인트 전송 */
  #send-point-layer{
    width: 768px;
  }
  #send-point-layer .modal{
    width: 65%;
    min-width: 200px;
  }
  #send-point-layer .modal .head .sbj{
    font-size: 1.15rem;
  }
  #send-point-layer .modal .head .r img{
    width: 1.9rem;
  }
  #send-point-layer .modal #confirm-pw{
    font-size: 0.95rem;
  }
  #send-point-layer .modal #confirm-pw::-webkit-input-placeholder{
    font-size: 0.82rem;
  }
  #send-point-layer .modal .err-msg{
    font-size: 0.88rem;
  }
  #send-point-layer .modal button{
    font-size: 1.05rem;
  }
}

/*********************** Search ***********************/

/* 검색 레이어 */
#search-layer > div{
  position: relative;
  width: 88%;
  min-width: 180px;
  min-height: 90%;
  max-height: 90%;
  padding: 0px;
  box-sizing: border-box;
}
#search-layer > div .serh-top{
  padding: 15px 15px;
  padding-left: 10px;
}
#search-layer > div .serh-top img{
  width: 1.25rem;
}
#search-layer > div .serh-top p{
  font-size: 1.17rem;
}
#search-layer > div .cate .tit{
  font-size: 1.12rem;
  color: #2b2b2b;
}
#search-layer > div .cate button[type="button"]{
  font-size: 0.85rem;
}
#search-layer > div form .tit{
  font-size: 1.12rem;
  color: #2b2b2b;
}
#search-layer > div form input[type="text"]{
  background-color: none;
  border: 1px solid #ccc;
  font-size: 0.82rem;
}
#search-layer > div form input[type="text"]::-webkit-input-placeholder{
  color: #7b7b7b;
}
@media screen and (min-width: 768px){
  #search-layer > div{
    width: 85%;
  }
  #search-layer > div .serh-top{
    padding: 20px 20px;
    padding-left: 10px;
  }
  #search-layer > div .serh-top img{
    width: 1.4rem;
    margin-left: 3px;
  }
  #search-layer > div .serh-top p{
    font-size: 1.2rem;
  }
  #search-layer > div .cate .tit{
    font-size: 1.12rem;
  }
  #search-layer > div .cate button[type="button"]{
    font-size: 0.85rem;
  }
  #search-layer > div form .tit{
    font-size: 1.12rem;
  }
  #search-layer > div form input[type="text"]{
    font-size: 0.82rem;
  }
}

/*********************** Common ***********************/

.ds-nickname::after{
  content: '님';
  margin-left: 0.1rem;
  font-weight: normal;
}
.ds-point::after{
  content: '원';
  margin-left: 0.05rem;
}
.ds-record::after{
  content: '개';
  margin-left: 0.05rem;
  font-weight: normal;
}