@font-face {
    font-family: 'Recipekorea';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('RecipekoreaFONT'), local('RecipekoreaM');
    src: url('/images/font/RecipekoreaFONT.woff2') format('woff2'),
    url('/images/font/RecipekoreaM.woff') format('woff'),
    url('/images/font/RecipekoreaFONT.ttf') format('truetype')
  }
  
  @font-face {
    font-family: 'CookieRun';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: local('CookieRunBlack');
    src: url('/images/font/CookieRunBlack.woff2') format('woff2'),
    url('/images/font/CookieRunBlack.woff') format('woff'),
    url('/images/font/CookieRunBlack.ttf') format('truetype')
  }
  
  @font-face {
    font-family: 'CookieRun';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('CookieRunBold');
    src: url('/images/font/CookieRunBold.woff2') format('woff2'),
    url('/images/font/CookieRunBold.woff') format('woff'),
    url('/images/font/CookieRunBold.ttf') format('truetype')
  }
  
  @font-face {
    font-family: 'CookieRun';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: local('CookieRunRegular');
    src: url('/images/font/CookieRunRegular.woff2') format('woff2'),
    url('/images/font/CookieRunRegular.woff') format('woff'),
    url('/images/font/CookieRunRegular.ttf') format('truetype')
  }
/* 
  ::-webkit-scrollbar {
    display: none;
  }

  ::-ms-scrollbar {
    display: none;
  } */

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0); 
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #eee; 
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #bbb; 
  }
  

  .battle_cont{font-size:14px;font-family:'noto';box-sizing: border-box;}
 
  .battle_cont *,
  .battle_cont *::before,
  .battle_cont *::after {
    box-sizing: inherit;
  }
  
  .t-c{text-align:center!important;}
  .t-r{text-align:right!important;}
  .t-l{text-align:left!important;}
  .f-l{float:left!important;}
  .f-r{float:right!important;}
  .p-r{position:relative;}
  
  .wid100{width:100%!important;}
  .wid90{width:90%;margin:0 auto;}
  .hei100{height:100%!important}
  
  .pt10{padding-top:10px;}
  .pt15{padding-top:15px;}
  .pt20{padding-top:20px;}
  .pt25{padding-top:25px;}
  .pt30{padding-top:30px;}
  .pt35{padding-top:35px;}
  .pt40{padding-top:40px;}
  .pt70{padding-top:70px!important;}
  .mt5{margin-top:5px;}
  .mt10{margin-top:10px!important;}
  .mt15{margin-top:15px;}
  .mt20{margin-top:20px;}
  .mt25{margin-top:25px;}
  .mt30{margin-top:30px;}
  .mt35{margin-top:35px!important;}
  .mt40{margin-top:40px;}
  .mt50{margin-top:50px!important;}
  
  .pb10{padding-bottom:10px;}
  .pb15{padding-bottom:15px;}
  .pb20{padding-bottom:20px;}
  .pb25{padding-bottom:25px;}
  .pb30{padding-bottom:30px;}
  .pb35{padding-bottom:35px;}
  .pb40{padding-bottom:40px;}
  .mb5{margin-bottom:5px;}
  .mb10{margin-bottom:10px;}
  .mb15{margin-bottom:15px;}
  .mb20{margin-bottom:20px;}
  .mb25{margin-bottom:25px;}
  .mb30{margin-bottom:30px;}
  .mb35{margin-bottom:35px;}
  .mb40{margin-bottom:40px;}

  .ml10{margin-left:10px;}
  .pr10{padding-right:10px;}
  .pr30{padding-right:30px;}
  .pl30{padding-left:30px;}
  .m0{margin:0!important;}
  
  .t-color-g{color:#b2b2b2;}
  .t-color-w{color:#fff!important;}

  .t-color-1{color:#ffbb01!important;}
  .t-color-2{color:#9cd6ec!important;}
  .t-color-3{color:#d2b97f!important;}
  .t-color-4{color:#00ac7e!important;}
  .t-color-5{color:#999!important;}

  .t-size-13{font-size:13px!important;}
  .t-size-20{font-size:20px!important;}

  .bor-n{border: none!important;;}
  .bor-t{border-top:1px solid #e5e5e5;}
  .bor-b{border-bottom:1px solid #e5e5e5;}
  .bor-r{border-right:1px solid #e5e5e5;}
  .bor-l{border-left:1px solid #000;}
  
  .btn{font-family:'Recipekorea';line-height:3;border-radius:17px;font-size:20px;}
  .btn_big{width:100%;}
  .btn_half{width:49%;}
  .btn_half.mr2{margin-right:1%;}
  .btn_small{width:19%}
  .btn_mid{width:79%;}
  .btn_green{border:1px solid #00ac7e;background:url('https://image.gohackers.com/img/voca/btn_fill_green.png');color:#fff801;background-size:100% 100%;}
  .btn_yellow{border:1px solid #ffcd38;background:url('https://image.gohackers.com/img/voca/btn_fill_yellow.png');color:#fff;background-size:100% 100%;}
  .btn_white{border:1px solid #00ac7e;background:#fff;color:#00ac7e;}

  .btn_opacity{border:none;background:#fff;color:#999;}
  .btn_blue{border:none;background:#fff;color:#2185ba;}
  
  .btn2{font-family: 'noto';font-size:14px;height:51px;border-radius:8px;padding:0 5px;float:right;}
  .btn_green2{border:1px solid #00ac7e;background:#00ac7e;color:#fff;}
  
  .select_box{width:100%;padding:5%;color:#333;border:1px solid #dbdbdb;box-sizing:border-box;border-radius:6px;position:relative;}
  select { 
  -webkit-appearance: none; /* 네이티브 외형 감추기 */ 
  -moz-appearance: none; 
  appearance: none;
   background: url('https://image.gohackers.com/img/voca/main/ic_arrow_down.png') no-repeat 95% 50%; /* 화살표 모양의 이미지 */ 
   background-size:20px;
  } 
  select::-ms-expand { display: none; } /* IE 10, 11의 네이티브 화살표 숨기기 */
  select:focus{outline:none;border:1px solid #00c994;}

  a:link, a:visited, a:active{color:#999}

/* The Modal (background) */
.modal {
    display: none;/*  Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    /* padding-left:250px */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 600px; /* Could be more or less, depending on screen size */        
    border-radius:10px;               
    position:absolute;
    top:50%;
    left:50%;   
    margin-left:-150px;
    transform: translateY(-50%);
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.modal-header .close {
  float: right;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  padding: 1rem;
  margin:-1rem -1rem -1rem auto;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
}

.modal-header .close span {
  text-indent:0;
}

.modal-header div.post_user{position:absolute;top:24px;right:50px;padding-left:23px;background:url('https://image.gohackers.com/img/voca/pc_main/ic_user_s.png') no-repeat left;}


.modal-content .modal-header h3{font-size:18px;color:#333;}
.modal-content .modal-header h3 em{font-size:12px;color:#43425d;font-weight:normal;padding-left:5px;}
.modal-content .modal-header h3 b{font-size:12px;color:#00ac7e;padding-left:5px;}

.modal-content .modal-header h3.ic_setting{padding-left:30px;background:url('https://image.gohackers.com/img/voca/pc_main/ic_setting.png') no-repeat left;}
.modal-content .modal-header h3.icon_community{padding-left:30px;background:url('https://image.gohackers.com/img/voca/pc_main/icon_community.png') no-repeat left;}
.modal-content .modal-header h3.ic_user_s{padding-left:30px;background:url('https://image.gohackers.com/img/voca/pc_main/ic_user_s.png') no-repeat left;}

.modal-content .modal-body{border-top:1px solid #e5e5e5;margin-top:15px;padding-top:15px;display:flex;flex-direction: column;align-items:center;}
.modal-content .modal-body .modal_list{width:100%;}
.modal-content .modal-body .modal_list li{width:49%;margin-right:2%;background:#f1f3f5;color:#43425d;float:left;text-align:center;border-radius:10px;padding:5%;margin-bottom:2%;}
.modal-content .modal-body .modal_list li:nth-child(2n){margin-right:0;}
.modal-content .modal-body .modal_list li.active{color:#fff;background:#00c994;}

.modal-content .modal-body .modal_list_book{width:100%;}
.modal-content .modal-body .modal_list_book li{width:32%;margin-right:2%;float:left;margin-bottom:2%;position:relative;}
.modal-content .modal-body .modal_list_book li:nth-child(3n){margin-right:0;}
.modal-content .modal-body .modal_list_book li.active::after{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background:#00c994 url('https://image.gohackers.com/img/voca/main/ic_check_white_large.png') no-repeat center;background-size:44px;opacity:.8;}
.modal-content .modal-body .modal_list_book li img{width:100%;}

.modal-content .modal-footer{text-align:center;}

.modal-pager{position:absolute;bottom:5%;left:0;width:100%;text-align:center;}
.modal-pager .modal-pager-item{display:inline-block;margin:0 0.5%;width:8px;height:8px;background:#fff;border-radius:10px;font-size:0;text-indent:-9999em;opacity:.4;}
.modal-pager .modal-pager-item.active{opacity:1;}


.setting_wrap img, .back_wrap img, .pause_wrap img{width:100%;height:100%;}
.setting_wrap .btn_setting, .setting_wrap .btn_plus{display:inline-block;width:42px;}

.no_chart{width:100%;max-height:300px;padding-top:120px;color:#c8c8c8;font-size:14px;text-align:center;background:#ebf6f3 url('https://image.gohackers.com/img/voca/main/toon_nothing.png') no-repeat center;border-radius:10px;background-size:75px;}
#week_list .no_chart, #best_list .no_chart{height:300px;padding-top:193px;background:#fff url('https://image.gohackers.com/img/voca/main/toon_nothing.png') no-repeat center;background-size:75px;}
.postbox_wrap .no_chart{height:300px;padding-top:195px;background:#fdf2e9 url('https://image.gohackers.com/img/voca/main/toon_nothing.png') no-repeat center;background-size:75px;}

.pagebox{text-align: center;}
.pagebox a{padding: 2px 6px;}
.pagebox .on{font-weight: bold;color:#f06b3c;}

/* 단어장 선택 모달창 */
#select_my_wordbook ul li{width:100%;background:#f6f7f8;text-indent:10px;margin-bottom:10px;height:45px;line-height:45px;border-radius:8px;}
#select_my_wordbook ul li.select{border:1px solid #00ac7e;color:#00ac7e;background:#f8fefc}
#select_my_wordbook .scroll_box{max-height:300px;overflow-y:scroll;margin-bottom:10px;}
#select_my_wordbook .ic_plus_blue{width:16px;height:16px;background:url('https://image.gohackers.com/img/voca/main/ic_plus_blue.png') no-repeat;background-size:contain;position:absolute;right:20px;top:20px;}

.scroll_wrap{width:100%;height:100%;overflow:scroll;}

.toon{position:absolute;left:0;bottom:0;}
.toon_game01_01{width:312px;}
.toon_game02_03{width:14%;}
.toon_game03_01 img{width:320px;}
.img_shortcuts{left:907px;bottom:27px;width:333px;}

.toon_fale{position:relative;}
.toon_fale:after{content:"";background:url('https://image.gohackers.com/img/voca/toon_fale.png') no-repeat;width:160px;height:248px;position:absolute;left:-25px;bottom:-25px;background-size:contain;display:block}