@import "reset.css";
@import "common.css";
@import "setting.css";



/* 0926수정사항 - 가로폭제한 해제 */
/* body {min-width: 360px;} */
/* 가로폭제한 해제 끝 */



.layout_fix {width: 75%; margin: 0 auto; position: relative; max-width: 1440px;}
.banner.pg_event {max-width: 1920px; margin: 0 auto;}
/* .pg_banner {width: 100%; height: 580px; background: url(/images/pg_ranking_bg.svg) no-repeat center; background-size: cover;} */
.pg_banner {width: 100%; height: 640px;background-size: cover; display: flex;  align-items: center;  justify-content: center;}

input {border: none; font-family: 'Gmarket Sans TTF';}
* {  box-sizing: inherit;}
*:before, *:after {  box-sizing: inherit;}
/* 스크롤바 설정*/
*::-webkit-scrollbar{width: 8px;}
*::-webkit-scrollbar-thumb {background: #D9D9D9; border-radius: 30px;  padding-right: 10px;} /* 스크롤바 막대 설정 */
*::-webkit-scrollbar-track {background-color: none;}/* 스크롤바 뒷 배경 설정*/

.btnbox .btn.gray {background: #E1E1E1 !important; color: #3F3F3F !important;}
.btnbox .btn.blue {background: #72C2FF !important; color: #fff !important;}
.btnbox .btn.left {border-radius: 0px 0px 0px 14.5px !important;}
.btnbox .btn.right {border-radius: 0px 0px 14.5px 0px !important;}
.btn.black {background: #E1E1E1 !important; color: #000 !important;}
.btn.blue {background: #72C2FF !important; color: #fff !important;}

textarea::placeholder {font-family: 'Gmarket Sans TTF';}
/* 칭호 색상 */
.grade {background: #8FAFE0;}
.grade.unique {background: #72C2FF !important;}
.grade.epic {background: linear-gradient(100.15deg, #3DABFF 8.23%, #FFD673 100%) !important;}
.grade.legendary {background: linear-gradient(101.08deg, #74FFE6 4.84%, #72C2FF 100%) !important;}
.grade.none {background: #8FAFE0 !important;}
.grade.non_title {display: none !important;}

/* header ---------------------------------------------------------------------------------------------*/
.header {border-bottom: 1px solid rgba(217, 217, 217, 0.7); width: 100%; margin: 0 auto; height: 80px; display: flex; align-content: center; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0%);  z-index: 99;}
.header .inner {display: flex; align-items:center; width: 100%; margin: 0 30px; max-width: 1920px;  margin: 0 auto;}
.header .inner .logo a {padding: 27px 30px;}
.header .inner .txt_menu {width: 100%;  height: 100%;  display: flex;  align-items: center; position: relative;}
.header .inner .txt_menu .one {position: absolute;  display: flex;  align-items: center;}
.header .inner .txt_menu .one li .two {display: none; position: absolute;  top: 50px;  left: -200px;  padding-left: 200px;  width: auto;}
.header .inner .txt_menu .one li .two li {position: relative; padding: 0 35px;}
.header .inner .txt_menu .one li:hover>ul {display: flex; width: 1720px; width: 1703px;  border-bottom: 1px solid rgba(250, 250, 250, 0.5); z-index: 99999;}
.header .inner .txt_menu li:hover>a {color: #74FFE6;}
.header .inner .txt_menu li .two li a {padding: 15px 0;  font-weight: 500;  font-size: 13px;  line-height: 15px;  color: #F5F5F5; display: inline-block;}
.header .inner .txt_menu li .two li:hover>a {font-weight: 700;  font-size: 14px;  line-height: 16px; border-bottom: 3px solid #74FFE6; color: #74FFE6;}
.header .inner .txt_menu a {padding: 32px 40px;  font-weight: 700;  font-size: 16px;  line-height: 18px;  color: #F5F5F5;}
.header .inner .right_icon ul {display: flex; align-items: center;}
.header .inner .right_icon ul li {position: relative;}
.header .inner .right_icon ul li .alert_counter {  position:absolute;  top: -5px;  right: 10px;  text-align: center;  text-shadow: 0 1px rgba(0, 0, 0, 0.2);    border-radius: 10px;  width: 18px;  height: 18px;    background: #74FFE6;  box-shadow: 0px 0px 7px rgba(255, 255, 255, 0.11); font-weight: 500; line-height: 20px; font-size: 12px;  color: #484848;}
.header .inner .right_icon ul li a {padding: 0 8px;  margin: 0 10px;}
.header .inner .right_menu ul {display: flex;}
.header .inner .right_menu ul li {width: 100px;  text-align: center;}
.header .inner .right_menu ul li::after {content: "|"; float: right;  display: block; color:rgba(245, 245, 245, 0.4);}
.header .inner .right_menu ul li:last-child::after {content: none;}
.header .inner .right_menu ul li a {font-size: 13px;  line-height: 15px;  color: #F5F5F5; padding: 10px;}

/* 검색어 자동완성 */
.autocomplete {display: none; background: #FFF; box-shadow: 4px 6px 15px 2px rgba(0, 0, 0, 0.12); border-radius: 15px; overflow: hidden; margin-top: 10px;}
.autocomplete div {padding: 12px 25px; font-size: 13px; line-height: 15px; letter-spacing: 0.025em; color: rgba(63, 63, 63, 0.7); cursor: pointer;}
.autocomplete div:hover {background: #A9DAFF;}
.autocomplete div mark {color: #000; background: none;}
.input-search:focus~.autocomplete {display: block;}
.in_keyword:focus~.autocomplete {display: block; position: absolute; width: 100%;}
.m_autocomplete {display: none; background: #FFF; box-shadow: 4px 6px 15px 2px rgba(0, 0, 0, 0.12); border-radius: 15px; overflow: hidden; margin-top: 10px;}
.m_autocomplete div {padding: 12px 25px; font-size: 13px; line-height: 15px; letter-spacing: 0.025em; color: rgba(63, 63, 63, 0.7); cursor: pointer;}
.m_autocomplete div:hover {background: #A9DAFF;}
.m_autocomplete div mark {color: #000; background: none;}
.m_input-search:focus~.m_autocomplete {display: block;}

/* 1123수정사항 - 최근검색어, 인기검색어추가에 따른 css */
.content_wrap{width: 100%;}
.search_history{width: 100%;}
.search_history *{box-sizing: border-box; font-weight: lighter; font-size: 12px;}
.search_history .recently_list {border-bottom: 1px solid rgba(120, 120, 120, 0.2);}

.listBox_head{display: flex; justify-content: space-between; align-items: center;width: 100%; height: 50px;}
.listBox_title{color: rgba(63, 63, 63, 1); font-size: 16px;}

.list_optionBox{display: flex; align-items: center;}
.list_optionBox p{color: rgba(136, 136, 136, 1); cursor: pointer;}
.list_optionBox> p:first-child::after{content: "|"; padding: 0 6px;}

.list_switchBox{display: flex; align-items: center;}
.list_switchBox .switch_box{padding-bottom: 2px;}
.list_switchBox .toggleSwitch{width: 35px;height: 17px;}
.list_switchBox .toggleSwitch .toggleButton{top: 51.5%;left: 0.2rem;}
.list_switchBox #toggleeditor:checked~.toggleSwitch .toggleButton{left: calc(100% - 16px);}
.recently_list .listBox_head .editortogglebox {position: relative; right: 0; top: 0;}

.option_area {width: 100%; text-align: center; display: none; padding-bottom: 15px;}
.option_area p {color: rgba(95, 95, 95, 1);}
/* .list_empty {display: block;} */


.listBox_con{padding-bottom: 10px;}
.recently_list .listBox_con ul {width: 100%; display: flex; align-items: center;}

.recently_list .listBox_con ul {
  overflow-x: scroll; 
  -ms-overflow-style:none; /* IE and Edge */
  scrollbar-width:none; /* Firefox */
  gap: 10px;
}
.recently_list .listBox_con ul::-webkit-scrollbar{
  display: none;/* Chrome , Safari , Opera */
}
.recently_list .listBox_con ul li{white-space: nowrap; border: rgba(192, 192, 192, 1) 1px solid; padding: 10px 14px; border-radius: 28px; display: flex; align-items: center;}
.recently_list .listBox_con ul li p{font-size: 12px; padding-right: 10px; height: 14px; line-height: 14px; color: rgba(95, 95, 95, 1);}

.clear::after {content: ""; display: block; clear: both;}
.hot_list ul{display: grid; grid-template-columns:49% 49%; gap: 2%; }
.hot_list ul .list_member{display: flex; align-items: center; height: 50px; gap: 10px; border-radius: 6px; box-shadow: 2px 2px 8px 2px rgba(233, 233, 233, 0.5); padding: 10px 14px;}
.hot_list ul .list_member p {font-size: 14px;}
.hot_list ul .list_member.high_rank p:first-child{color: rgba(114, 194, 255, 1);font-weight: bold;}
.hot_list ul .list_member .search_keyword{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;}

/* grid 순서 조정 수직우선정렬 */
.hot_list ul .list_member:nth-child(1){order: 1;}
.hot_list ul .list_member:nth-child(2){order: 3;}
.hot_list ul .list_member:nth-child(3){order: 5;}
.hot_list ul .list_member:nth-child(4){order: 7;}
.hot_list ul .list_member:nth-child(5){order: 9;}
.hot_list ul .list_member:nth-child(6){order: 2;}
.hot_list ul .list_member:nth-child(7){order: 4;}
.hot_list ul .list_member:nth-child(8){order: 6;}
.hot_list ul .list_member:nth-child(9){order: 8;}
.hot_list ul .list_member:nth-child(10){order: 10;}

/* 최근검색어, 인기검색어추가에 따른 css 끝 */

/* header-searchbox */
.search-box {height: 50px; position: absolute;  top: -26px;  right: 0;}
.btn-search {width: 30px; 
/* 0604수정 - IOS 헤더 돋보기버튼 안뜨는현상 수정 */
  min-width: 30px;
  padding: 2px 5px;
  /* IOS 헤더 돋보기버튼 안뜨는현상 수정 끝 */ height: 46px;  cursor: pointer;  position: absolute;  right: 0px;  background-color: transparent; border: none;}
.btn-search .search_icon {height: 46px;  background: url(/images/icon_search_white.svg) no-repeat center center;}
.btn-search:focus .search_icon {height: 46px; background: url(/images/icon_search_black.svg) no-repeat center;}
.btn-search:focus~.input-search {width: 382px;  border-radius: 0px;  background-color: #fff;  border-bottom: 1px solid rgba(255, 255, 255, .5);  transition: all 500ms ; border-radius: 28px; }
.input-search {height: 46px;  width: 0px;  transition: all .5s ease-in-out;  background: none;  padding-right: 40px; border: none; padding: 0 15px;}
.input-search::placeholder {color: rgba(63, 63, 63, 0.4)red;}
.input-search:focus {width: 382px; background-color: #fff;  border-bottom: 1px solid rgba(255, 255, 255, .5);  transition: all 500ms ;border-radius: 28px; outline: none;}
.input-search:focus.btn-search:focus .search_icon {background: red; border: 3px solid red;}
/* header-searchbox */
/* header ---------------------------------------------------------------------------------------------*/

/* 광고팝업 -------------------------------------------- */
.shadow_AD {display: none; position: fixed;  left: 0;  top: 0;  background: rgba(0, 0, 0, 0.52);  width: 100%;  height: 100vh;  display: none;  z-index: 999;  height: 100%;}
.ad_popup {position: fixed;   top: 50%;  left: 50%;  transform: translate(-50%, -50%);  z-index:9999; border-radius: 15px; overflow: hidden; text-align: center;}
.ad_popup .ad_img_box img {object-fit: cover; width: 100%; max-width: 950px; max-height: 1000px; min-width: 584px;  max-height: 467px;}

.ad_popup.text .ad_text_box {background: #fff; padding: 40px 66px; width: 453px; max-height: 1000px;     overflow-y: auto;}
.ad_popup.text .ad_text_box .notice_title {font-size: 20px;  line-height: 23px;  color: #000;margin-bottom: 60px;}
.ad_popup.text .ad_text_box .notice_text {font-size: 18px;  line-height: 21px;  color: #3F3F3F;}

.ad_popup .ad_btn_box {background: #FFF; display: flex; align-items: center; padding: 17px 30px;    margin-top: -5px;}
.ad_popup.text .ad_btn_box {background: #E1E1E1;}
.ad_popup .ad_btn_box .btn_close {font-size: 23px;  line-height: 26px;  color: #BCBCBC;}
.ad_popup .ad_btn_box p {display: flex; align-items: center;}
.ad_popup .ad_btn_box p input + label:before {width: 24px; height: 24px; background-size: 18px; border-radius: 50%;}
.ad_popup .ad_btn_box .btn_close.normal {margin-left: auto; color: #3F3F3F;}


/* 광고팝업 -------------------------------------------- */

/* footer ---------------------------------------------------------------------------------------------*/
.footer {background: #fff; border-top: 1px solid #AFAFAF;}
.footer .layout_fix.bottom {height: 175px; display: flex;  justify-content: space-between; align-items: center;}
.footer .layout_fix.bottom .bottom_l img {margin-bottom: 44px;}
.footer .layout_fix.bottom .bottom_l .copyright {font-size: 12px;  line-height: 14px;  color: #3F3F3F;}
.footer .layout_fix.bottom .bottom_r ul {display: flex;  justify-content: end;}
.footer .layout_fix.bottom .bottom_r .sns_list {margin-bottom: 33px;}
.footer .layout_fix.bottom .bottom_r .sns_list ul li {margin-left: 19px;}
.footer .layout_fix.bottom .bottom_r .bottom_menu ul li {margin-left: 25px;}
.footer .layout_fix.bottom .bottom_r .bottom_menu ul li a {font-size: 12px;  line-height: 14px;  color: #3F3F3F;}
/* footer ---------------------------------------------------------------------------------------------*/

/* pagination ---------------------------------------------------------------------------------------------*/
.page {display: flex;  align-items: center;  justify-content: center; margin: 70px 0 130px;}
.page .arrow {width: 32px; height: 32px; display: inline-block; box-shadow: 0px 0px 6px rgba(157, 157, 157, 0.6); border-radius: 50%; cursor: pointer; box-sizing: border-box;}
.page .arrow:hover {border: 1px solid #72C2FF;}
.page .arrow.left {background: #fff url(/images/arrow_left.svg) no-repeat center;}
.page .arrow.right {background: #fff url(/images/arrow_right.svg) no-repeat center;}
.pagination {display: flex; justify-content: space-between; margin: 0 27px;}
.pagination .num {color: #3F3F3F; padding: 12px;}
.pagination .num.on, .pagination .num:hover {color: #72C2FF; font-weight: 700;}
.pagination .arrow {color: #3F3F3F; background: #FFF;  box-shadow: 0px 0px 6px rgb(157 157 157 / 60%);  border-radius: 50%;}
/* pagination ---------------------------------------------------------------------------------------------*/

/* 드롭다운 select_box css  */
.select_box {  position: relative;  width: 200px;  width: 280px;  height: 40px; z-index: 1;}
.select_box2, .select_box3 {border: 3px solid blue; width: 200px;  width: 280px;}
.btn-select {width: 100%; padding: 11px 10px; box-sizing: border-box;  cursor: pointer;  text-align: left;  background: url(/images/select_box_down.svg) center right 14px no-repeat;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;  box-shadow: 3px 3px 12px rgb(0 0 0 / 7%);  border-radius: 6px;  border: none;  font-size: 16px;  line-height: 18px;  color: #000; font-weight: 500;}
.list-member {display: none;  border: 1px solid #C4C4C4;  box-sizing: border-box;  box-shadow: 4px 4px 14px rgb(0 0 0 / 15%);  border-radius: 0px 0px 10px 10px;  padding: 0;  margin: 0;  overflow: hidden; border: none; background: #fff;}
.btn-select.on {  background: url(/images/select_box_up.svg) center right 14px no-repeat;}
.btn-select.on+.list-member {  display: block;  padding: 0;}
.list-member li {box-sizing: border-box;  list-style: none; border-bottom: 1px solid #D9D9D9;}
.list-member li button {  width: 100%; padding: 9px 7px; border: none;  background-color: #fff;  /* border-radius: 8px; */  cursor: pointer;  text-align: left;  /* 말줄임 */  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}
.list-member li button:hover, .list-member li button:focus {  background-color: #A9DAFF; color: #fff;}

/* 드롭다운 m_select_box css  */
.m_select_box {  position: relative;  width: 200px;  width: 280px;  height: 40px;}
.m_btn-select {width: 100%; padding: 11px 26px 11px 10px; box-sizing: border-box;  cursor: pointer;  text-align: left;  background: url(/images/select_box_down.svg) center right 14px no-repeat;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;  box-shadow: 3px 3px 12px rgb(0 0 0 / 7%);  border-radius: 6px;  border: none;  font-size: 16px;  line-height: 18px;  color: #000; font-weight: 500;}
.m_list-member {  display: none;  border: 1px solid #C4C4C4;  box-sizing: border-box;  box-shadow: 4px 4px 14px rgb(0 0 0 / 15%);  border-radius: 0px 0px 10px 10px;  padding: 0;  margin: 0;  overflow: hidden; border: none;    background: #fff;     height: 200px;  overflow-y: auto;}
.m_btn-select.on {  background: url(/images/select_box_up.svg) center right 14px no-repeat;}
.m_btn-select.on+.m_list-member {  display: block;  padding: 0;}
.m_list-member li {box-sizing: border-box;  list-style: none; border-bottom: 1px solid #D9D9D9;}
.m_list-member li button {  width: 100%; padding: 9px 7px; border: none;  background-color: #fff;  /* border-radius: 8px; */  cursor: pointer;  text-align: left;  /* 말줄임 */  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}
.m_list-member li button:hover, .m_list-member li button:focus {  background-color: #A9DAFF;}


/* 드롭다운 css  */



canvas {z-index: 0;}




/* pg_ranking ---------------------------------------------------------------------------------------------*/
.pg_banner.pg_ranking {background: url(/images/pg_ranking_bg.svg) no-repeat center; background-size: cover;}
.pg_banner .ranking_banner {position: relative; width: 75%;}
.layout_fix.ranking {display: flex; flex-direction: column;}
.btn_add_game {position: sticky; margin-right: -120px; cursor: pointer; top: 60%; margin-left: auto; margin-top: 500px; z-index: 9;}
.category_list {width: 79vw;  max-width: 1510px; position: absolute; top: 0;  left: 0;  transform: translate(-2%, -155%); }
.category_list ul {display: flex;  justify-content: space-between;}
.category_list ul li {background: #fff; border-radius: 40px;}
.category_list ul li.on {background: #72C2FF;}
.category_list ul li a {display: block; padding: 9px 20px;  line-height: 18px;  color: #333;}
.category_list ul li:hover a {background: #72C2FF; border-radius: 40px;}

.content_title {display: flex;  justify-content: space-between; align-items: center; margin: -506px 0 48px;}
.content_title .ctg_box {font-weight: 700;  font-size: 22px;  line-height: 25px;  color: #3F3F3F;}
.content_title .ctrl_right {display: flex; align-items: center;}
.content_title .ctrl_right .range {margin-left: 22px;}
.content_title .ctrl_right .range ul {display: flex;}
.content_title .ctrl_right .range ul li {font-weight: 500;  font-size: 15px;  line-height: 17px;  color: #7A92AC; cursor: pointer;}
.content_title .ctrl_right .range ul li.on {font-weight: 700;  color: #72C2FF;}
.content_title .ctrl_right .range ul li:hover {font-weight: 700;  color: #72C2FF;}
.content_title .ctrl_right .range ul li::after {content: "|"; margin: 0 10px; color: #7A92AC; font-weight: 500 !important;}
.content_title .ctrl_right .range ul li:last-child:after {content:none;}
.ranking_list_wrap .ranking_list {}
.ranking_list_wrap .ranking_list .ranking_box {display: flex;  align-items: center;  background: #FFF;  box-shadow: -6px -3px 6px rgb(233 233 233 / 30%), 4px 4px 8px 2px #e9e9e9;  border-radius: 11px; margin-bottom: 15px; padding: 24px 44px;  }
/* 0905수정사항 - 랭킹리스트 h오버시 색상변경수정  */
.ranking_list_wrap .ranking_list .ranking_box:hover,
.ranking_list_wrap .ranking_list .ranking_box:hover .btn_like {background-color: #e6f5ff;}
/* 랭킹리스트 h오버시 색상변경수정 끝 */
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap {display: flex;  align-items: center; justify-content: space-between;justify-content: flex-start; min-width: 50%;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num {font-weight: 700;  font-size: 22px;  line-height: 25px;    color: #72C2FF;  text-transform: uppercase; display: flex;  flex-direction: column;  align-items: center;     width: 38px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num.num_ad {color: #FFAA6C;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num .ranking_chg {padding-left: 16px; margin-top: 5px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num .ranking_chg.up {background: url(/images/rank_up.svg) no-repeat left -2px; color: #FC683B;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num .ranking_chg.down {background: url(/images/rank_down.svg) no-repeat left -2px; color: #7087EB;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num .ranking_chg.bar {background: url(/images/rank_-.svg) no-repeat left center; font-size: 0;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_game_img {display: inline-block;  border-radius: 68px;  width: 70px;  height: 70px;  overflow: hidden;  display: flex;  justify-content: center; margin: 0 16px 0 50px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap {margin-left: 8px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_info {display: flex;  align-items: center; margin-bottom: 11px;}
/* 0905수정사항 - 랭킹페이지 | 관심게임 하트버튼 사이즈업 및 모양조절  */
.btn_like {background: #fff url(/images/icon_heart_empty.svg) no-repeat center; width: 25px; height: 25px; /* box-shadow: 0px 0px 13px #e9e9e9; */ /* border-radius: 50%; */   margin-right: 14px; cursor: pointer; float: left;}
/* 랭킹페이지 | 관심게임 하트버튼 사이즈업 및 모양조절 끝 */
.btn_like.on {background: url(/images/icon_heart_fill.svg) no-repeat center;}
.btn_like:hover {background: url(/images/icon_heart_fill.svg) no-repeat center;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_info .game_title {font-weight: 700;  font-size: 20px;  line-height: 23px;  text-transform: capitalize;  color: #3F3F3F; margin-right: 5px;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden; max-width: 200px; cursor: pointer;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_info .game_genre {background: rgba(112, 135, 235, 0.8);  border-radius: 39.1px;  font-size: 14px;  color: #fff;  display: flex;  align-items: center;  height: 22px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_info .game_genre div {padding: 3px 12px;  color: #fff;  display: -webkit-box;  -webkit-line-clamp: 1;  -webkit-box-orient: vertical;  margin-bottom: -4px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_rating {display: flex; align-items: center;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_rating .count_star {margin-right: 5px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_rating .rating {font-size: 16px;  line-height: 18px;  color: #3F3F3F;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_rating .rating strong {font-weight: 500;  font-size: 12px;  line-height: 14px;  color: #565656;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail {display: flex;  margin-left: auto;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box {padding: 0 40px;  border-right: 1px solid rgba(120, 120, 120, 0.2); font-weight: 700;  font-size: 18px;  line-height: 21px;  color: rgba(63, 63, 63, 0.4); flex-direction: column;     height: 67px; display: flex;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box:last-child {border: none; padding-right: 0;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box:first-child {border: none; padding-left: 0;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.token_OS {display: flex;  justify-content: space-evenly; align-items: inherit;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.token_OS .token_box {width: 121px; display: flex; margin-bottom: 8px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.token_OS .token_box li {width: 20px; height: 20px; display: flex;  justify-content: center; margin-right: 4px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.token_OS .token_box li img {width: 100%;} 
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.token_OS .os_box {display: flex;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.token_OS .os_box li {width: 20px; height: 20px; display: flex;  justify-content: center; margin-right: 4px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.guide .guide_img {width: 26px; height: 35px; background: url(/images/icon_guide_empty.svg) no-repeat center; margin-top: 11px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.guide .guide_img.on {background: url(/images/icon_guide_fill.svg) no-repeat center;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.guide img {width: 26px;  height: 35px; margin-top: 10px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.guide img.on {width: 26px;  height: 35px; margin-top: 10px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.coin_price {width: 160px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.coin_price p {margin-top: 18px;  font-weight: 500;  font-size: 18px;  line-height: 21px;  color: #3F3F3F;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.coin_price p.none {width: 138.4px; color: #D9D9D9;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.coin_price p strong {margin-left: 3px;  font-weight: 500;  font-size: 12px;  line-height: 14px;  color: #FB460E;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.graph_wrap .graph_box {position: relative; margin-top: 11px;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.graph_wrap img {}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.graph_wrap p {position: absolute; bottom: -5px;  left: 0px;  transform: translate(3%, 0);  font-weight: 700;  font-size: 18px;  line-height: 21px;  color: #3F3F3F; width: 110%;}
.ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.graph_wrap p strong {font-weight: 500;  font-size: 12px;  line-height: 14px; color: #FB460E; margin-left: 3px;}
/* pg_ranking ---------------------------------------------------------------------------------------------*/





/* 토글버튼 ----------------------------------------------------------------------------------------- */
.tg-list {  text-align: center;  display: flex;  align-items: center;}
.modal_content_wrap .modal_content.alarm_settings .content_box .tg-list-item {margin: 15px 0;}
.tgl {  display: none;}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {  box-sizing: border-box;}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {  background: none;}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {  background: none;}
.tgl + .tgl-btn {  outline: 0;  display: block;  width: 4em;  height: 2em;  position: relative;  cursor: pointer;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;          user-select: none;}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {  position: relative;  display: block;  content: "";  width: 50%;  height: 100%;}
.tgl + .tgl-btn:after {  left: 0;}
.content_box ul .tg-list-item .tgl + .tgl-btn:before {  display: none;}
.tgl:checked + .tgl-btn:after {  left: 50%;}
.tgl-light + .tgl-btn {  background: #C6C6C6;  border-radius: 2em;  padding: 2px;  transition: all 0.4s ease;}
.tgl-light + .tgl-btn:after {  border-radius: 50%;  background: #fff;  transition: all 0.2s ease;}
.tgl-light:checked + .tgl-btn {  background: #72C2FF;}
/* 토글버튼 ----------------------------------------------------------------------------------------- */

/* 토글버튼2 ----------------------------------------------------------------------------------------- */
.switch-button {  width: 400px;  height: 28px;  text-align: center;  /* position: absolute;  left: 50%;  top: 50%;  transform: translate3D(-50%, -50%, 0); */  will-change: transform;  z-index: 197 !important;  cursor: pointer;  transition: 0.3s ease all;  background: #D8D8D8;  border-radius: 34px;  width: 152px;}
.switch-button-case {  display: inline-block;  background: none;  /* width: 49%; */  height: 100%;  color: white;  position: relative;  border: none;  transition: 0.3s ease all;  text-transform: uppercase;  /* letter-spacing: 5px;   padding-bottom: 1px; */  font-size: 15px;  color: #3F3F3F; padding: 0 10px;}
.switch-button-case:hover {  color: grey;  cursor: pointer;}
.switch-button-case:focus {  outline: none;}
.switch-button .toggle {  /* color: #151515; */  /* background-color: white; */  position: absolute;  left: 0;  top: 0;  width: 50%;  height: 100%;  z-index: -1;  transition: 0.3s ease-out all;  color: #fff;  /* background: #3F3F3F; */  border-radius: 34px;  background: #72C2FF;}
.switch-button .active-case {  /* color: #3F3F3F; */  color: #fff;}
/* 토글버튼2 ----------------------------------------------------------------------------------------- */

/* 토글버튼 3step (랭킹 상세 - 코인시세 탭) */
#toggle_3step {display: flex;  justify-content: flex-end;}
#toggle_3step .toggle_radio {position: relative; overflow: hidden; -moz-border-radius: 50px; width: 225px; background: #D8D8D8; border-radius: 40px;  }
#toggle_3step .toggle_radio>* {float: left;}
#toggle_3step .toggle_radio input[type=radio] {display: none;}
#toggle_3step .toggle_radio label {cursor: pointer; width: 33%;}
#toggle_3step .toggle_radio label p {display: flex; justify-content: center; align-items: center; font-size: 15px; color: #3F3F3F; height: 28px;  }
#toggle_3step .toggle_radio label:hover p {color: gray;}
#toggle_3step .toggle_option_slider { width: 75px; height: 28px; position: absolute; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease;  }
#toggle_3step input:checked~.toggle_option_slider::after {display: flex; align-items: center; justify-content: center; background: #72C2FF; border-radius: 50px; font-size: 15px; line-height: 17px; color: #F5F5F5; height: 28px;}
#toggle_3step #first_toggle:checked~.toggle_option_slider {left: 0;}
#toggle_3step #first_toggle:checked~.toggle_option_slider::after { content: "1D";}
#toggle_3step #second_toggle:checked~.toggle_option_slider {left: 33%;}
#toggle_3step #second_toggle:checked~.toggle_option_slider::after { content: "7D";}
#toggle_3step #third_toggle:checked~.toggle_option_slider {left: 66%;}
#toggle_3step #third_toggle:checked~.toggle_option_slider::after { content: "1M";}
/* 토글버튼 3step (랭킹 상세 - 코인시세 탭) */








/* alarm_msg_tabs.html  햄버거메뉴 추가*/
.slide_wrap_bg {position:fixed; left:0; top:0; z-index:9999999; background:rgba(0,0,0,0.7); width:100%; height:100%; transition-property:none !important; -webkit-transition-property:none !important; }
.slide_wrap {position:fixed; left:0; top:0; z-index:99999999; height:100%; width:100%; box-sizing:border-box; overflow-y:auto; transition-property:none !important; -webkit-transition-property:none !important; }
.slide_wrap .slide_inner {background:#fff; height: 100%;  overflow-y: auto;}
.slide_wrap .menu_upper {display: flex; align-items: center; justify-content: space-between; padding: 20px 15px; background: #FFF; box-shadow: 0px -2px 16px rgba(0, 0, 0, 0.1);}
.slide_wrap .menu_upper .menu_logo img {width: 50%;}
.slide_wrap .info_box {padding: 30px 15px; border-bottom: 8px solid #EFEFEF;}
.slide_wrap .info_box .user {display: flex; align-items: center; justify-content: space-between;}
.slide_wrap .info_box .user .btns {display: flex;  gap: 8px;}
.slide_wrap .info_box .user .btns .btn {border: 1px solid #72C2FF;  border-radius: 60px;}
.slide_wrap .info_box .user .btns .btn a {font-size: 12px;  line-height: 14px;  color: #3F3F3F;padding: 7px 14px;}
.slide_wrap .info_box .my_point {  display: flex;  justify-content: space-between;  align-items: center;  font-weight: 700;  font-size: 41.2174px;  line-height: 47px;  text-transform: capitalize;  color: #72C2FF;  margin-top: 20px;    padding: 30px 20px; background: #F9FAFC;}
.slide_wrap .info_box .my_point p {font-weight: 500;  font-size: 13.7391px;  color: #3F3F3F;     display: flex; flex-direction: column;}
.slide_wrap .info_box .my_point p span {font-size: 9.61739px;  line-height: 11px;  color: #7A92AC; margin-top: 9px;}

.slide_wrap .ctg_box dl {overflow:hidden;}
.slide_wrap .ctg_box dt {border-bottom:1px solid #eee; position:relative;}
.slide_wrap .ctg_box dd {display:none; background:#F9FAFC;}
.slide_wrap .ctg_box .ctg1 {display: block; padding: 8px 15px 8px; background: url(/images/arrow_down_size8.svg) no-repeat right 4% center;    font-size: 16px;  line-height: 20px;  color: #3F3F3F;}
.slide_wrap .ctg_box .ctg2 {display: block; color: #3F3F3F; padding: 13px 25px;}
.slide_wrap .ctg_box .if_open dd {display:block;}
.slide_wrap .ctg_box .if_open .ctg1 {background: url(/images/arrow_up_size8.svg) no-repeat right 4% center;}
/* alarm_msg_tabs.html  */









/* modal_popup 게임정보 등록하기 ----------------------------------------------------------------------------------------- */
/* 통합 */
.modal_popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999;}
.modal_popup .modal_bg {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}
.hidden {display: none}
.modal_popup .title {}
.modal_popup .title h2 {font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000; text-align: center;}
.modal_popup .close-area {cursor: pointer;  position: absolute;  top: 32px;  right: 32px; padding: 5px;}
.modal_popup .modal-window {background: #FFF;  border-radius: 14.5px;  position: absolute;  width: 953px; top: 0px; transform: translate(0, 4%);  height: calc(100% - 150px);  overflow-y: auto;  padding: 42px 0 0;}
.modal_popup .modal-window::-webkit-scrollbar {display: none;}

/* 공통 content_box */
.modal_popup .modal_content_wrap {width: 890px;  margin: 0 auto;}
.modal_popup .modal_content_wrap .modal_content {margin-top: 42px;}
.modal_popup .modal_content_wrap .modal_content .content_tit {font-size: 16px;  line-height: 18px;  letter-spacing: 0.025em;  color: #3F3F3F;  margin-bottom: 16px; }
.modal_popup .modal_content_wrap .modal_content .content_tit strong {font-weight: 500;  font-size: 12px;  letter-spacing: 0.025em;  color: #FB460E; margin-left: 2px;}
.modal_popup .modal_content_wrap .modal_content .content_tit.on::after {content: "*";  font-size: 16px;  line-height: 18px;  color: #FB460E;  margin-left: 4px;}
.modal_popup .modal_content_wrap .modal_content .content_box ul {display: flex; flex-wrap: wrap;}
.modal_popup .modal_content_wrap .modal_content .content_box ul li {margin-bottom: 16px; margin-right: 10px;  flex: 0 0 16%;  display: inline-flex;}
.modal_popup .modal_content_wrap .modal_content.network .content_box ul li  {flex: 0 0 48%;}

/* 공통 check_box */
p input[type="checkbox"] {  display:none;  }/*input 은 숨겨주기*/
p input + label{  cursor:pointer; letter-spacing: 0.025em;  color: #3F3F3F;}/*input 바로 다음의 label*/
p input + label:before{  content:"";  display:inline-block;  width:17px;  height:17px; vertical-align:middle;/*체크 전과 체크 후 높이 차이 때문에 설정*/  margin-right: 10px;  background: #F9F9F9;  border: 1px solid #E4E4E4;}/*input 바로 다음의 label:before 에 체크하기 전 CSS 설정*/
p input:checked + label:before{  content:""; background: #fff url(/images/check_blue.svg) no-repeat center center;  }/*checked된 input 바로 다음의 label:before 에 체크 후 CSS 설정*/  

/* button */
.modal_popup .btnbox {border-radius: 0px 0px 14.5px 14.5px;  margin-top: 54px;}
.modal_popup .btnbox ul {display: flex;}
/* .modal_popup .btnbox ul li {width: 50%; display: flex;  justify-content: center;} */
.modal_popup .btnbox ul li {width: 100%; display: flex;  justify-content: center;}
.modal_popup .btnbox ul li a {width: 100%;  text-align: center;  padding: 17px 0;  font-size: 23px;  line-height: 26px;}
/* game_name 게임이름 입력 */
.modal_popup .modal_content_wrap .modal_content.game_name .content_box {display: flex;  justify-content: space-between;}
.modal_popup .modal_content_wrap .modal_content.game_name .content_box .input_game_name {padding: 0 12px;  font-size: 14px;  letter-spacing: 0.025em; width: 400px; background: #F9F9F9; border-radius: 5px; border: none; height: 40px;}
.modal_popup .modal_content_wrap .modal_content.game_name .content_box .input_game_name::placeholder {font-family: 'Gmarket Sans TTF';}
/* icon_img, game_img 이미지 첨부 */
.modal_popup .modal_content_wrap .modal_content .content_box .img_add_box { display: inline-flex;  flex-direction: column;  align-items: center;}
.modal_popup .modal_content_wrap .modal_content .content_box .img_add_box .img_add {width: 90px;  height: 90px; border-radius: 5.42857px; background: #F9F9F9 url(/images/icon_add_img.svg) no-repeat center;}
.modal_popup .modal_content_wrap .modal_content .content_box .img_add_box .img_add input {cursor: pointer;  width: 100%;  height: 100%;  opacity: 0;}
.modal_popup .modal_content_wrap .modal_content .content_box .img_add_box p {color: #686868; margin-top: 8px;}
.modal_popup .modal_content_wrap .modal_content.game_img .content_box_wrap {display: flex;}
.modal_popup .modal_content_wrap .modal_content.game_img .content_box_wrap .content_box.more {margin-left: 72px;}
.modal_popup .modal_content_wrap .modal_content.game_img .content_box_wrap .content_box .img_add_box .bind {display: flex; justify-content: space-between;  width: 428px;}
.modal_popup .modal_content_wrap .modal_content.game_img .content_box_wrap .content_box .img_add_box .img_add {width: 208px;  height: 90px;}
/* game_info 게임소개 입력 */
.modal_popup .modal_content_wrap .modal_content.game_info .content_box input {font-size: 14px;  letter-spacing: 0.025em;    padding: 12px;  background: #F9F9F9;  border-radius: 5px;}
.modal_popup .modal_content_wrap .modal_content.game_info .content_box textarea {width: 97%;  height: 6.25em;  resize: none; border: none; background: #F9F9F9;  border-radius: 5px;  padding: 12px; font-size: 14px;  letter-spacing: 0.025em;}
/* link 관련링크 */
.modal_popup .modal_content_wrap .modal_content.links .content_box ul {display: initial;}
.modal_popup .modal_content_wrap .modal_content.links .content_box ul li {display: flex; width: 100%;}
.modal_popup .modal_content_wrap .modal_content.links .content_box ul li img {margin-right: 7px;}
.modal_popup .modal_content_wrap .modal_content.links .content_box ul li input {width: 100%;  background: #F9F9F9;  border-radius: 5px; padding: 12px; font-weight: 500;  font-size: 14px;  line-height: 16px;  letter-spacing: 0.025em;}
/* modal_popup 게임정보 등록하기 ----------------------------------------------------------------------------------------- */



/* modal_popup alarm----------------------------------------------------------------------------------------- */
.modal_alarm {position: absolute;  top: 80px;  right: 0;  display: flex;  justify-content: center;  z-index: 99999; height: 532px;  background: #FFFFFF;  box-shadow: -4px 4px 16px rgb(98 98 98 / 25%);  border-radius: 14.5px 0px 0px 14.5px; padding-top: 30px;}
.modal_alarm.hidden {display: none;}
.hidden2 {display: none;}
.modal_alarm .modal-window {width: 100%;}
.modal_alarm .modal-window .title {}
.modal_alarm .modal-window .title h2 {text-align: center;  font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000;}
.modal_alarm .modal-window .settingBtn {cursor: pointer;  position: absolute;  top: 28px;  right: 65px;}
.modal_alarm .modal-window .closeBtn {cursor: pointer;  position: absolute;  top: 27px;  right: 24px;}
.modal_alarm .modal-window .modal_content_wrap .message_box {border-bottom: 1px solid #F1F1F1; display: flex;  align-items: center; padding: 20px 30px; cursor: pointer;}
.modal_alarm .modal-window .modal_content_wrap .message_box:hover {background: #EAEAEA;}
.modal_alarm .modal-window .modal_content_wrap .message_box .alarm_color {margin-right: 12px; background: url(/images/alarm_color_red.svg) no-repeat center; width: 10px; height: 10px;}
.modal_alarm .modal-window .modal_content_wrap .message_box .alarm_color.blue {background: url(/images/alarm_color_blue.svg) no-repeat center;}
.modal_alarm .modal-window .modal_content_wrap .message_box .message_wrap {}
.modal_alarm .modal-window .modal_content_wrap .message_box .message_wrap .time_count {font-size: 12px;  line-height: 14px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);}
.modal_alarm .modal-window .modal_content_wrap .message_box .message_wrap .message_tit {font-size: 16px;  line-height: 18px;  letter-spacing: 0.025em;  color: #3F3F3F; margin: 10px 0 8px;}
.modal_alarm .modal-window .modal_content_wrap .message_box .message_wrap .message_sub {  font-size: 13px;  line-height: 15px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);  display: -webkit-box;  -webkit-box-orient: vertical; overflow: hidden; width: 300px;}
.modal_alarm .modal-window .modal_content_wrap .message_box img {margin-left: auto;}

/* 팝업 알람 - 설정 */
#modal_alarm_setting .modal-window {width: 584px; height: initial; transform: translate(0, 5%);}
#modal_alarm_setting .modal-window .modal_content_wrap {width: 524px; margin: 0 auto;}
#modal_alarm_setting .modal-window .modal_content_wrap .modal_content.alarm_settings {}
#modal_alarm_setting .modal-window .modal_content_wrap .modal_content.alarm_settings .content_tit {font-size: 20px;  line-height: 23px;  color: #3F3F3F;}
#modal_alarm_setting .modal-window .modal_content_wrap .modal_content.alarm_settings .content_box {border-bottom: 1px solid #F1F1F1; margin-bottom: 30px;}
#modal_alarm_setting .modal-window .modal_content_wrap .modal_content.alarm_settings .content_box ul {display: flex; flex-direction: column;}
#modal_alarm_setting .modal-window .modal_content_wrap .modal_content.alarm_settings .content_box ul li {justify-content: space-between;  align-items: center; font-size: 16px;  line-height: 18px;  color: #3F3F3F;}
/* modal_popup alarm----------------------------------------------------------------------------------------- */




/* modal_popup real_time_msg ----------------------------------------------------------------------------------------- */
#real_time_msg {position: absolute;  top: 80px;  right: 85px;  display: flex;  justify-content: center;  z-index: 99999;  width: 452px;  height: 532px;  background: #FFFFFF;  box-shadow: -4px 4px 16px rgb(98 98 98 / 25%);  border-radius: 14.5px;  padding-top: 30px;  overflow-y: auto;}
#real_time_msg .modal-window {width: 100%;}
#real_time_msg .modal-window .title h2 {text-align: center;  font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000;}
#real_time_msg .modal-window .settingBtn {cursor: pointer;  position: absolute;  top: 28px;  right: 65px;}
#real_time_msg .modal-window .closeBtn {cursor: pointer;  position: absolute;  top: 27px;  right: 24px;}
#real_time_msg .modal-window .modal_content_wrap .message_box {border-bottom: 1px solid #F1F1F1; display: flex;  align-items: center; padding: 20px 30px; cursor: pointer;}
#real_time_msg .modal-window .modal_content_wrap .message_box:hover {background: #EAEAEA;}
#real_time_msg .modal-window .modal_content_wrap .message_box .alarm_color {margin-right: 12px; background: url(/images/alarm_color_red.svg) no-repeat center; width: 10px; height: 10px;}
#real_time_msg .modal-window .modal_content_wrap .message_box .alarm_color.blue {background: url(/images/alarm_color_blue.svg) no-repeat center;}
#real_time_msg .modal-window .modal_content_wrap .message_box .message_wrap {}
#real_time_msg .modal-window .modal_content_wrap .message_box .message_wrap .time_count {font-size: 12px;  line-height: 14px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);}
#real_time_msg .modal-window .modal_content_wrap .message_box .message_wrap .message_tit {font-size: 16px;  line-height: 18px;  letter-spacing: 0.025em;  color: #3F3F3F; margin: 10px 0 8px;}
#real_time_msg .modal-window .modal_content_wrap .message_box .message_wrap .message_sub {  font-size: 13px;  line-height: 15px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);  display: -webkit-box;  -webkit-box-orient: vertical; overflow: hidden; width: 300px;}
#real_time_msg .modal-window .modal_content_wrap .message_box img {margin-left: auto;}

/* 팝업 메시지 - 설정 */
#modal_msg_setting {}
#modal_msg_setting .modal-window {width: 584px;  height:initial; transform: translate(0, 100%);}
#modal_msg_setting .modal-window .modal_content_wrap {width: initial; width: 524px;}
#modal_msg_setting .modal-window .modal_content_wrap .modal_content.msg_settings .content_box ul {flex-direction: column;}
#modal_msg_setting .modal-window .modal_content_wrap .modal_content.msg_settings .content_box ul li {justify-content: space-between; align-items: center; margin-bottom: 0;    font-size: 16px;  color: #3F3F3F;}
/* modal_popup real_time_msg ----------------------------------------------------------------------------------------- */

/* modal_popup  buy_popup ----------------------------------------------------------------------------------------- */
.buy_popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 999999;}
.buy_popup.hidden {display: none;}
/* .modal_background {display: none;} */
.buy_popup .modal_bg {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}
.buy_popup .title {}
.buy_popup .title h2 {font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000; text-align: center;}
.buy_popup .close-area {cursor: pointer;  position: absolute;  top: 32px;  right: 32px; padding: 5px;}
.buy_popup .modal-window {background: #FFF;  border-radius: 14.5px;  position: absolute;  width: 585px; top: 0px; transform: translate(0, 40%);  height: 560px;  overflow-y: auto;  padding: 42px 0 0; box-sizing: border-box;}
.buy_popup .modal-window::-webkit-scrollbar {display: none;}

.buy_popup .modal_content_wrap {width: 524px; margin: 0 auto;}
.buy_popup .modal_content_wrap .modal_content {margin-top: 42px;}
.buy_popup .modal_content_wrap .modal_content .content_tit {font-size: 16px;  line-height: 18px;  letter-spacing: 0.025em;  color: #3F3F3F;  margin-bottom: 16px; }
.buy_popup .modal_content_wrap .modal_content .content_tit strong {font-weight: 500;  font-size: 12px;  letter-spacing: 0.025em;  color: #FB460E; margin-left: 2px;}
.buy_popup .modal_content_wrap .modal_content .content_tit.on::after {content: "*";  font-size: 16px;  line-height: 18px;  color: #FB460E;  margin-left: 4px;}
.buy_popup .modal_content_wrap .selected_item {display: flex;  align-items: center;  justify-content: space-between;}
.buy_popup .modal_content_wrap .selected_item li {font-size: 18px;  line-height: 21px;  color: #3F3F3F;}
.buy_popup .modal_content_wrap .selected_item .item_info {width: 304px;}
.buy_popup .modal_content_wrap .selected_item .item_info .info_sub {letter-spacing: 0.01em;  color: rgba(63, 63, 63, 0.4); margin-top: 12px;}
.buy_popup .modal_content_wrap .selected_item .item_info .info_opt {font-weight: 300;  color: #3F3F3F; margin-top: 22px;}
.buy_popup .modal_content_wrap .point_info {border-top: 1.3172px solid #E6E6E6;}
.buy_popup .modal_content_wrap .point_info li {border-bottom: 1.3172px solid #E6E6E6; padding: 16px 0; display: flex;  justify-content: space-around;}
.buy_popup .modal_content_wrap .point_info li p {font-size: 16px;  line-height: 18px;  color: #3F3F3F;}


/* button */
.buy_popup .btnbox {border-radius: 0px 0px 14.5px 14.5px;  margin-top: 54px; position: absolute;  bottom: 0;  width: 100%;}
.buy_popup .btnbox ul {display: flex;}
.buy_popup .btnbox ul li {width: 50%; display: flex;  justify-content: center;}
.buy_popup .btnbox ul li a {width: 100%;  text-align: center;  padding: 17px 0;  font-size: 23px;  line-height: 26px;}
/* modal_popup  buy_popup ----------------------------------------------------------------------------------------- */

/* modal_popup  buy_popup2 ----------------------------------------------------------------------------------------- */
/* 쉐도우 효과*/
.shadow {  position: fixed;  left: 0;  top: 0;  background: rgba(0, 0, 0, 0.52);  width: 100%;  height: 100vh;  display: none; z-index: 9999;     height: 100%;}

/* 팝업 기본디자인 */
.popup {display: none; background: #FFF;  border-radius: 14.5px;  position: fixed;  width: 585px;   overflow-y: auto;  padding: 42px 0 0;  box-sizing: border-box;  z-index: 9999;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}
.popup .title {font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000;  text-align: center;}
.popup .close-area {cursor: pointer;  position: absolute;  top: 37px;  right: 30px;  padding: 5px;}

.popup .modal_content_wrap {width: 60vw; margin: 0 auto; padding: 0 0 110px;}
.popup .modal_content_wrap .modal_content {margin-top: 42px;}
.popup .modal_content_wrap .modal_content .content_tit {font-size: 16px;  line-height: 18px;  letter-spacing: 0.025em;  color: #3F3F3F;  margin-bottom: 16px; }
.popup .modal_content_wrap .modal_content .content_tit strong {font-weight: 500;  font-size: 12px;  letter-spacing: 0.025em;  color: #FB460E; margin-left: 2px;}
.popup .modal_content_wrap .modal_content .content_tit.on::after {content: "*";  font-size: 16px;  line-height: 18px;  color: #FB460E;  margin-left: 4px;}
.popup .modal_content_wrap .selected_item {display: flex;  align-items: center;  justify-content: space-between;}
.popup .modal_content_wrap .selected_item li {font-size: 18px;  line-height: 21px;  color: #3F3F3F;}
.popup .modal_content_wrap .selected_item .item_info {width: 40vw;}
.popup .modal_content_wrap .selected_item .item_info .info_sub {letter-spacing: 0.01em;  color: rgba(63, 63, 63, 0.4); margin-top: 12px;}
.popup .modal_content_wrap .selected_item .item_info .info_opt {font-weight: 300;  color: #3F3F3F; margin-top: 22px;}
.popup .modal_content_wrap .point_info {border-top: 1.3172px solid #E6E6E6;}
.popup .modal_content_wrap .point_info li {border-bottom: 1.3172px solid #E6E6E6; padding: 16px 0; display: flex;  justify-content: space-around;}
.popup .modal_content_wrap .point_info li p {font-size: 16px;  line-height: 18px;  color: #3F3F3F;}
.popup .modal_content_wrap .point_info li p.lack_points {color: #FB460E;}
.popup .modal_content_wrap .alarm_lack_points {  display: flex;  align-items: center;  justify-content: center;  font-size: 18px;  line-height: 21px;  color: #3F3F3F; margin-top: 40px;}
.popup .modal_content_wrap .alarm_lack_points img {margin-right: 12px;}

/* button */
.popup .btnbox {border-radius: 0px 0px 14.5px 14.5px;  margin-top: 54px; position: absolute;  bottom: 0;  width: 100%;}
.popup .btnbox ul {display: flex;}
.popup .btnbox ul li {width: 100%; display: flex;  justify-content: center;}
.popup .btnbox ul li a {width: 100%;  text-align: center;  padding: 17px 0;  font-size: 23px;  line-height: 26px;}

/* 미니팝업 기본디자인 */
.mini_popup {height: 327.66px;}
.mini_popup .modal_content_wrap {padding: 0;}
.mini_popup .modal_content_wrap .buy_question {text-align: center;  margin-top: 62px;}
.mini_popup .modal_content_wrap .buy_question p {font-size: 18px;  line-height: 193%;  color: #3F3F3F;}

/* 신고완료 팝업 */
.mini_popup.report_post_confirm {height: 361px;}
/* modal_popup  buy_popup2 ----------------------------------------------------------------------------------------- */

/* 쌀콘 구매팝업 - 유효기간 안내  */
.popup .modal_content_wrap .expiration_notice {
  margin-top: 18px;
  color: red;
  text-align: center;
  font-size: 18px;
}



 /* 알람 탭 */
 #msg_tab-menu {padding: 30px 0;}
 #msg_tab-menu #msg_tab-btn ul { display: flex; gap: 30px; padding: 0 30px;}
 #msg_tab-menu #msg_tab-btn ul li a {font-size: 16px;  line-height: 23px;  color: #BABABA;}
 #msg_tab-menu #msg_tab-btn ul li.active a {color: #3F3F3F;}
 #msg_tab-menu #msg_tab-cont {margin-top: 20px; height: 420px; overflow-y: auto;}
 #msg_tab-menu #msg_tab-cont .msg_box_wrap {overflow-y: scroll;  height: 430px;}
 
 #msg_tab-menu .msg_box_wrap .message_box {border-bottom: 1px solid #F1F1F1; display: flex;  align-items: center; padding: 0; cursor: pointer; padding: 20px 30px;}
 #msg_tab-menu .msg_box_wrap .message_box:hover {background: #EAEAEA;}
 #msg_tab-menu .msg_box_wrap .message_box .alarm_color {margin-right: 12px; background: url(/images/alarm_color_red.svg) no-repeat center; width: 20px; height: 15px;}
 #msg_tab-menu .msg_box_wrap .message_box .alarm_color.blue {background: url(/images/alarm_color_blue.svg) no-repeat center;}
 #msg_tab-menu .msg_box_wrap .message_box .message_wrap {}
 #msg_tab-menu .msg_box_wrap .message_box .message_wrap .time_count {font-size: 12px;  line-height: 14px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);}
/*  0915수정사항 - 알림메세지 제목 텍스ㅊ트짤림현상 수정 */
 #msg_tab-menu .msg_box_wrap .message_box .message_wrap .message_tit {font-size: 16px;  line-height: 18px;  letter-spacing: 0.025em;  color: #3F3F3F; margin: 10px 0 8px;     /* display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden; */}
/*  알림메세지 제목 텍스트짤림현상 수정 끝 */
 #msg_tab-menu .msg_box_wrap .message_box .message_wrap .message_sub {  font-size: 13px;  line-height: 15px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);  display: -webkit-box;  -webkit-box-orient: vertical; overflow: hidden; width: 300px;}
 #msg_tab-menu .msg_box_wrap .message_box img {margin-left: auto;}






/* PC 사이즈 (1920px ~ 1300px) */
.m_header_wrap, .btn_add_game a, .m_ranking_info_wrap, .m_select_mate, .m_select_box, .m_category_list, .m_sns_list, .m_bottom_menu, .m_btn_add_game, .m_show_icon {display: none;}
@media screen and (max-width:1850px) {
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap .ranking_info .game_title {}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box {padding: 0 20px;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_box ul {display: flex; flex-wrap: wrap;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_box ul li {margin-bottom: 15px; /* margin-right: 10px; */ flex: 1 0 35%; display: inline-flex;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_name .content_box {display: flex;  justify-content: space-between;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_name .content_box .input_game_name {padding: 0 12px;  font-size: 14px;  letter-spacing: 0.025em; width: 41%; background: #F9F9F9; border-radius: 5px; border: none; height: 38px;}
}
@media screen and (max-width:1700px) {  
  .layout_fix {width: 85%;}
  /* 랭킹페이지 */
  .pg_banner .ranking_banner {width: 90%;}
  .category_list {width: 84vw;    transform: translate(-1%, -150%);}
  .btn_add_game {margin-right: 0px;}
  
}

@media screen and (max-width:1600px) {  
  .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box {padding: 0 15px;}
  .category_list {width: 82vw;    transform: translate(6%, -150%);}
  .category_list ul li a {padding: 9px 15px;}
}

@media screen and (max-width:1500px) {  
  .layout_fix {width: 90%;}
  .category_list {width: 88vw;    transform: translate(4%, -150%);}
  .btn_add_game {margin-right: 0px;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_game_img {margin: 0 10px 0 20px;}
}

@media screen and (max-width:1330px) {
  .layout_fix {width: 96%;}
  /* 랭킹페이지 */
  .pg_banner .ranking_banner {width: 96%;}
  .category_list ul li a {padding: 9px 10px;}
  .ranking_list_wrap .ranking_list .ranking_box {padding: 24px 20px;}
}
/* 0901수정사항 - 반응형 진입 사이즈 변경 */ 
@media screen and (max-width:1280px){
/* 	반응형 진입 사이즈 변경 끝 */
  .m_show_icon {display: block;}
}



/* 태블릿 사이즈 (1200px ~ 650px)  */
/* 0901수정사항 - 반응형 진입 사이즈 변경 */
@media screen and (max-width:1280px) {
/* 	반응형 진입 사이즈 변경 끝 */
  .layout_fix {width: 96%; margin: 0 auto; position: initial;}
  .mini_popup {width: 93%;}
  .mini_popup.liked {height: 250px;}
  .mini_popup .modal_content_wrap {width: initial;}
  /* m_header */
  .header {display: none;}
  .m_header_wrap {display: flex;    z-index: 9999;    flex-direction: column;}
  .m_header_wrap .m_header {width: 100%;    margin: 0 auto; box-shadow: 0px -2px 16px rgba(0, 0, 0, 0.1);}
  .m_header_wrap .m_header .inner {height: 60px; display: flex;    justify-content: space-between;    align-items: center; }
  .m_header_wrap .m_header .inner .logo a img {width: 70%;}
  .m_header_wrap .m_header .inner li.right_icon ul {display: flex;    align-items: center;   justify-content: space-between;}
  .m_header_wrap .m_header .inner li.right_icon ul li {}
  .m_header_wrap .m_header .inner li.right_icon ul li a {display: inline-block; /* padding: 11px; */}
  .m_header_wrap .m_header .inner li.right_icon ul li:last-child a {padding-right: 0;}
  .m_header_wrap .header_menu {display: flex; justify-content: space-around;}
  .m_header_wrap .header_menu li {display: flex;    align-items: center; height: 52px;}
  .m_header_wrap .header_menu li a {font-size: 16px;    line-height: 18px;    color: #3F3F3F;     padding: 12px 0; }
  .m_header_wrap .header_menu li.on a {border-bottom: 5px solid #74ffe6;}
  
  /* m_footer */
  .footer .layout_fix.bottom .bottom_l {display: flex; flex-wrap: wrap; width: 100%;}
  .footer .layout_fix.bottom .bottom_l img {}
  .footer .layout_fix.bottom .bottom_r .bottom_menu {display: none;}
  .footer .layout_fix.bottom .bottom_l .m_bottom_menu {display: block; margin-bottom: 7px; width: 100%;}
  .footer .layout_fix.bottom .bottom_l .m_bottom_menu ul {display: flex; justify-content: space-between; width: 280px;}
  .footer .layout_fix.bottom .bottom_l .m_bottom_menu ul li {}
  .footer .layout_fix.bottom .bottom_l .m_bottom_menu ul li a {font-size: 12px; color: #777;}
  .footer .layout_fix.bottom .bottom_l .m_sns_list {display: block; margin-left: auto;}
  .footer .layout_fix.bottom .bottom_l .m_sns_list ul {display: flex;}
  .footer .layout_fix.bottom .bottom_l .m_sns_list ul li {margin-left: 5px;}
  .bottom_r {display: none;}


  .search-box {height: 32px; top: -18px; z-index: 9999;}
  .btn-search {position: absolute; height: 28px;}
  .btn-search .search_icon {height: 28px; background: url(/images/m_icon_search_bck.svg) no-repeat center;}
  .btn-search:focus .search_icon {height: 28px; background: url(/images/icon_search_black.svg) no-repeat center;}
  .btn-search:focus~.m_input-search {height: 35px; width: 200px; background: #FFF; box-shadow: -6px -3px 6px rgba(233, 233, 233, 0.3), 4px 4px 8px 2px #E9E9E9;}
  .m_input-search {height: 32px;  width: 0px;  transition: all .5s ease-in-out;  background: none;  padding-right: 40px; border: none; padding: 0 20px; background: #fff url(/images/m_icon_search_bck.svg) no-repeat center right 10px;}
  .m_input-search:focus {height: 32px; width: 200px; transition: all 500ms ; border-radius: 28px; outline: none; background: #FFF; box-shadow: -6px -3px 6px rgba(233, 233, 233, 0.3), 4px 4px 8px 2px #E9E9E9; background: #fff url(/images/m_icon_search_bck.svg) no-repeat center right 10px;}
  .m_header_wrap .m_header .inner li.right_icon ul li {position: relative;}
  .m_header_wrap .m_header .inner li.right_icon ul li img {margin: 0 15px;}
  .alert_counter {position: absolute;    top: -5px;    right: 5px;    text-align: center;    border-radius: 10px;    width: 18px;    height: 18px;    background: #74FFE6;    line-height: 20px;    font-size: 12px;}  
  #real_time_msg {top: 60px; right: 0;}
  .modal_alarm {top: 60px;}
  /* m_pagination */
  .page {justify-content: space-between; margin: 30px 0;}
  .page .arrow {box-shadow: none; }
  .pagination {width: 100%;}
  .layout_fix {width: 96%;}
    
  /* 랭킹페이지 */
    .pg_banner.pg_ranking {background: none; height: initial;}
    .pg_banner .ranking_banner {width: 100%;}
    .pg_banner .swiper-slide {height: 170px;}
    .pg_banner .swiper-slide-active {height: 200px; transition: all 0.5s; cursor: pointer;}
    .pg_banner .swiper-slide-active:hover {transform:none;}
    .pg_banner .ranking_banner .swiper-container {margin-top: 0; height: 200px;}
    .ranking_banner .swiper-button-prev, .ranking_banner .swiper-button-next {display: none;}
    .ranking_list_wrap .ranking_list .ranking_box {padding: 15px 22px; height: 80px;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.guide {display: none;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.coin_price {display: none;}
    .pg_banner .ranking_banner .swiper-container  .swiper-pagination {display: none;}
    .pg_banner .swiper-slide .text_area_bg {height: 78px;}
    .pg_banner .swiper-slide .text_area_bg .text_area {font-size: 14px; line-height: 16px; margin: 16px 19px;}
    .pg_banner .swiper-slide .text_area_bg .text_area p {font-size: 12px; line-height: 14px;}
    
    .layout_fix.ranking .content_wrap .content_title {margin: 33px 0 48px;}
    .layout_fix.ranking .btn_add_game {order: 3; margin-top: inherit; margin-left: initial; position: initial; background: #72C2FF; border-radius: 51px; height: 38px; margin-bottom: 60px;}
    .layout_fix.ranking .btn_add_game img {display: none;}
    .layout_fix.ranking .btn_add_game a {display: flex; justify-content: center; align-items: center; font-size: 18px; line-height: 21px; color: #FFF; padding: 9px 0;}
    
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap {}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_info_wrap {display: none;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap {display: flex; flex-direction: column;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .game_title {margin-bottom: 3px;       line-height: 18px;      color: #3F3F3F; white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;}
/*     0905수정사항 - 랭킹페이지 | 관심게임 하트버튼 사이즈업 및 모양조절 */
    .btn_like {background: #fff url(/images/icon_heart_empty_size9.svg) no-repeat center cover; width: 16px; height: 16px; /* box-shadow: 0px 0px 13px #e9e9e9; border-radius: 50%; */ cursor: pointer;     margin-right: 6px; float: left;}
    .btn_like.on {background: #fff url(/images/icon_heart_fill_size9.svg) no-repeat center cover; }
/*     랭킹페이지 | 관심게임 하트버튼 사이즈업 및 모양조절 끝 */
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star {display: flex;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .game_genre {font-size: 12px;      line-height: 14px;      color: #5F5F5F; margin-right: 3px;   white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .count_star {display: flex;      font-size: 12px;      line-height: 14px;      color: #3F3F3F;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .count_star img {margin-right: 2px;}

    .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_game_img {width: 50px; height: 50px; border-radius: 6px; margin: 0 12px 0 26px;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box {font-size: 0; padding: 0 30px; line-height:0;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.graph_wrap .graph_box {background: #FFF; box-shadow: 0px 0px 10px #E9E9E9; border-radius: 6px; padding: 14px 6px; margin-top: 1px;}
/*     1106수정사항 - 랭킹 점수표시 폰트사이즈 변경 + 점수,등감률 사이 여백 추가 */
    .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.graph_wrap p {font-size: 14px; transform: translate(0, -50%); text-align: center; width: 100%;}
    .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.graph_wrap p strong {margin-left: 4px; font-size: 10px;}
/*     랭킹 점수표시 폰트사이즈 변경 + 점수,등감률 사이 여백 추가 끝  */

    .category_list {display: none;}
    .layout_fix.ranking .content_wrap .content_title {}
    .layout_fix.ranking .content_wrap .content_title .ctg_box {display: none;}
    .layout_fix.ranking .content_wrap .content_title .ctrl_right .range {display: none;}
    .layout_fix.ranking .content_wrap .content_title .ctrl_right .m_select_mate {display: block;}

    .m_category_list {display: block; margin-top: 40px;}
    .m_category_list .list_title {font-size: 22px; line-height: 25px; color: #3F3F3F; margin-bottom: 20px;}
    .m_category_list .category_wrap {display: flex; gap: 10px;}
    .m_category_list .category_wrap li {background: #EAEAEA; border-radius: 5px; padding: 16px 4.5vw;}
    .m_category_list .category_wrap li a {color: #3F3F3F; font-size: 20px;}

    .content_title .ctrl_right {width: 100%; justify-content: space-between; gap: 10px;}
    .m_select_box {display: block;}
    .m_select_box, .select_box {width: 49%;}
    .modal_popup .modal-window {width: 100%; transform: translate(0, 0); height: calc(100% - 5.5%); transform: initial;}
    .modal_popup .modal_content_wrap {width: 96%;}  
    
    /* 게임추가,이벤트추가 팝업 페이지 */
    .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box { display: inline-flex;  flex-direction: column;  align-items: center;}
    .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box .img_add {width: 70px;  height: 70px; border-radius: 5.42857px; background: #F9F9F9 url(/images/icon_add_img.svg) no-repeat center;}
    .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box .img_add input {cursor: pointer;  width: 100%;  height: 100%;  opacity: 0;}
    .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box p {color: #686868; margin-top: 8px;}
    .pg_m_add_game .modal_content_wrap .modal_content {margin-bottom: 20px;}
    .pg_m_add_game .modal_content_wrap .modal_content .content_tit {margin-bottom: 8px;}
    .pg_m_add_game .modal_content_wrap .modal_content .content_tit strong {font-weight: 500;  font-size: 12px;  letter-spacing: 0.025em;  color: #FB460E; margin-left: 2px;}
    .pg_m_add_game .modal_content_wrap .modal_content .content_tit.on::after {content: "*";  font-size: 16px;  line-height: 18px;  color: #FB460E;  margin-left: 4px;}
    .pg_m_add_game .modal_content_wrap .modal_content.game_info .content_box textarea {width: 93%;  height: 6.25em;  resize: none; border: none; background: #F9F9F9;  border-radius: 5px;  padding: 12px; font-size: 14px;  letter-spacing: 0.025em;}
    .pg_m_add_game .modal_content_wrap {width: 95%; margin: 0 auto;}
    .pg_m_add_game .modal_content_wrap .modal_content.links .content_box ul li {display: inline-flex; flex: 1 0 35%; width: 100%;}
    .pg_m_add_game .modal_content_wrap .modal_content.links .content_box ul li input {width: 100%; background: #F9F9F9; border-radius: 5px; height: 38px;}

    /* 모바일 메시지, 알림 세팅 팝업 페이지 */
    .pg_setting .title {margin-top: 30px; padding: 0 15px;}
    .pg_setting .title h2 {font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000;}
    .pg_setting .modal_content_wrap {padding: 0 15px; margin-top: 20px;}  
    .pg_setting .modal_content_wrap .modal_content .content_tit {font-size: 18px; line-height: 21px; color: #3F3F3F;}
    .pg_setting .modal_content_wrap .modal_content .content_box {margin-bottom: 40px;    border-bottom: 12px solid #F7F7F7;}
    .pg_setting .modal_content_wrap .modal_content .content_box ul li {display: flex; justify-content: space-between; align-items: center; margin-bottom: 0;    font-size: 16px;  color: #3F3F3F; padding: 15px 0;     border-bottom: 1px solid #F1F1F1;}
    .pg_setting .modal_content_wrap .modal_content .content_box ul li:last-child {border: none;}
}
@media screen and (max-width:750px) {
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .game_genre {width: auto;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box {padding: 0 10px;}
}
@media screen and (max-width:700px) {
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .game_genre {width: 16vw;}
}
/* end 태블릿 사이즈 (1200px ~ 650px)  */

/* 모바일 사이즈 (650px ~ 350px )  */
@media screen and (max-width:650px) {
  .pg_banner_j.app_ranking_detail {height: 160px !important;}
  .layout_fix.ranking .content_wrap .content_title {margin: 24px 0 17px;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box.token_OS {display: none;}
  .m_category_list .category_wrap li {padding: 11px 4.5vw;}
  .m_category_list .category_wrap li a {font-size: 14px;}
  .footer .layout_fix.bottom .bottom_r .sns_list ul li {margin-left: 5px;}
  .btn_add_game {display: none;}
  .m_btn_add_game {display: block; order: 3;    margin-top: inherit;    margin-left: initial;    position: initial;    background: #72C2FF;    border-radius: 51px;    height: 38px;    margin-bottom: 60px;}
  .m_btn_add_game a {display: flex;    justify-content: center;    align-items: center;    font-size: 18px;    line-height: 21px;    color: #FFF;    padding: 9px 0;}
  .m_btn_add_game img {display: none;}
  .hide_icon {display: none;}
  
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .game_genre {width: auto;}

  #toggle_3step { margin-right: 20px;;}
  /* 모바일 메시지, 알림 팝업 페이지 */
  .pg_msg {position: relative;}
  .pg_msg .title {margin-top: 30px; padding: 0 15px;}
  .pg_msg .title h2 {font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000;}
  .pg_msg .settingBtn {cursor: pointer;  position: absolute;  top: 0;  right: 32px;}
  .pg_msg .modal_content_wrap .message_box {border-bottom: 1px solid #F1F1F1; display: flex;  align-items: center; padding: 20px 15px; cursor: pointer;}
  /* .pg_msg .modal_content_wrap .message_box:hover {background: #EAEAEA;} */
  .pg_msg .modal_content_wrap .message_box .alarm_color {margin-right: 12px; background: url(/images/alarm_color_red.svg) no-repeat center; width: 12px; height: 12px;}
  .pg_msg .modal_content_wrap .message_box .alarm_color.blue {background: url(/images/alarm_color_blue.svg) no-repeat center;}
  .pg_msg .modal_content_wrap .message_box .message_wrap {}
  .pg_msg .modal_content_wrap .message_box .message_wrap .time_count {font-size: 12px;  line-height: 14px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);}
  .pg_msg .modal_content_wrap .message_box .message_wrap .message_tit {font-size: 16px;  line-height: 18px;  letter-spacing: 0.025em;  color: #3F3F3F; margin: 10px 0 8px;}
  .pg_msg .modal_content_wrap .message_box .message_wrap .message_sub {  font-size: 13px;  line-height: 15px;  letter-spacing: 0.025em;  color: rgba(63, 63, 63, 0.5);  display: -webkit-box;  -webkit-box-orient: vertical; overflow: hidden; width: 270px;}
  .pg_msg .modal_content_wrap .message_box img {margin-left: auto;}
  
  /* 알림메시지 팝업 페이지 (650px~ 360px) */
  .pg_msg.alarm #msg_tab-menu #msg_tab-cont .msg_box_wrap {overflow-y: initial; height: initial;}
  .pg_msg.alarm #msg_tab-menu #msg_tab-btn ul {gap: 15px; padding: 0 15px; justify-content: space-between;}
  .pg_msg.alarm #msg_tab-menu .msg_box_wrap .message_box {padding: 20px 15px;}
  .pg_msg.alarm .modal_content_wrap .message_box .message_wrap {width: 86%;}

  /* 게임추가 팝업 페이지 */
  .pg_m_add_game {position: relative;}
  .pg_m_add_game .title {margin-top: 30px; padding: 0 15px;}
  .pg_m_add_game .title h2 {font-weight: 500;  font-size: 22px;  line-height: 25px;  color: #000;}
  .pg_m_add_game .modal_content_wrap {width: 95%; margin: 0 auto;}
  
  
  .pg_m_add_game .modal_content_wrap .modal_content {margin-bottom: 20px;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_tit {margin-bottom: 8px;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_tit strong {font-weight: 500;  font-size: 12px;  letter-spacing: 0.025em;  color: #FB460E; margin-left: 2px;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_tit.on::after {content: "*";  font-size: 16px;  line-height: 18px;  color: #FB460E;  margin-left: 4px;}

  
  .pg_m_add_game .modal_content_wrap .modal_content.network .content_box ul li {flex: 1 0 30%; }
  .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box { display: inline-flex;  flex-direction: column;  align-items: center;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box .img_add {width: 70px;  height: 70px; border-radius: 5.42857px; background: #F9F9F9 url(/images/icon_add_img.svg) no-repeat center;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box .img_add input {cursor: pointer;  width: 100%;  height: 100%;  opacity: 0;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_box .img_add_box p {color: #686868; margin-top: 8px;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_img .content_box_wrap {display: flex;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_img .content_box_wrap .content_box.more {margin-left: 30px;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_img .content_box_wrap .content_box .img_add_box .bind {display: flex; justify-content: space-between;  width: 150px;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_img .content_box_wrap .content_box .img_add_box .img_add {width: 70px;  height: 70px;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_info .content_box input {font-size: 14px;  letter-spacing: 0.025em;    padding: 12px;  background: #F9F9F9;  border-radius: 5px;}
  .pg_m_add_game .modal_content_wrap .modal_content.game_info .content_box textarea {width: 93%;  height: 6.25em;  resize: none; border: none; background: #F9F9F9;  border-radius: 5px;  padding: 12px; font-size: 14px;  letter-spacing: 0.025em;}
  .pg_m_add_game .modal_content_wrap .modal_content .content_box ul li img {margin-right: 7px;}
  .pg_m_add_game .modal_content_wrap .modal_content.links .content_box ul li {flex: none; width: 100%;}
  .pg_m_add_game .modal_content_wrap .modal_content.links .content_box ul li input {width: 100%; background: #F9F9F9; border-radius: 5px;}

  .popup .title,
  .modal_popup .title h2 {font-size: 18px;}


  /* 버튼 확인/취소*/
  .btn_box {margin: 40px 0 50px;}
  .btn_box ul {display: flex; justify-content: space-around;}
  .btn_box ul li .btn {border-radius: 34px; line-height: 38px; padding: 10px 20vw;}
  .popup .btnbox ul li a,
  .modal_popup .btnbox ul li a {font-size: 18px; padding: 9px;}

 .btn_back {display: flex;  justify-content: center; margin: 30px 0 80px;}
 .btn_back a {border: 1.5px solid #72C2FF;  border-radius: 51px;  padding: 9px 42px;  font-size: 18px;  line-height: 21px;  color: #3F3F3F;}

 /* 이미지 광고 팝업 */
 .ad_popup {width: 93%;}
 .ad_popup .ad_img_box img {min-width: initial;}
 .ad_popup .ad_btn_box p input + label:before {width: 18px; height: 18px;}
 .ad_popup .ad_btn_box .btn_close {font-size: 18px; line-height: 21px;}
 .ad_popup.text .ad_text_box {padding: 40px 20px; width: initial; }
 .ad_popup.text .ad_text_box .notice_title {margin-bottom: 30px;}
}
@media screen and (max-width:560px) {
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .game_genre {width: 100px;}
}
@media screen and (max-width:460px) {
  .number_06, .number_07, .number_08, .number_09, .number_10, .number_11, .number_12, .number_13, .number_14, .number_15, .number_16, .number_17, .number_18, .number_19, .number_20, .number_21, .number_22, .number_23, .number_24, .number_25 {display: none !important;}

  .ranking_list_wrap .ranking_list .ranking_box {padding: 0px 8px;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num {font-size: 10px; line-height: 10px; width: initial;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num .ranking_chg {padding-left: 8px;    margin-top: 5px;    font-weight: 500;    font-size: 10px;    line-height: 11px; }
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num .ranking_chg.up, 
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num .ranking_chg.down {background-position: -2px -1px; background-size: 10px;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_game_img {margin: 0 5px;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .game_title {width: 155px;}
  .m_category_list .category_wrap li a {font-size: 12px;}
  .pagination {margin: 0; justify-content: space-evenly;}
  .pagination a {padding: 4px;}
}
@media screen and (max-width:420px) {
  /* .m_category_list .category_wrap li {padding: 5px} */
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .ranking_num {font-size: 12px;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .genre_star .game_genre {width: 75px;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_info_detail .detail_box:last-child {padding: 0;}
  .ranking_list_wrap .ranking_list .ranking_box .ranking_box_wrap .m_ranking_info_wrap .game_title {width: 125px;}
  .btn-search:focus~.m_input-search {width: 170px;  border-radius: 0px;  background-color: #fff;  border-bottom: 1px solid rgba(255, 255, 255, .5);  transition: all 500ms ; border-radius: 28px;}
  .m_input-search:focus {width: 170px;}
}
 /* end 모바일 사이즈 (649px ~ 350px)  */