@charset "utf-8";
@media screen and (min-width: 991px) {
	.mob {
		display: none !important;
	}
}

@media screen and (max-width: 990px) { /* mobile device */
	.pc {
		display: none !important;
	}

	body,html {
		margin: 0;
		height: 100%
	}
	body {
		overflow: scroll
	}
	::-webkit-scrollbar {
		width: 0;
		background-color: transparent;
	}
	.blocker {
		padding: 0;
	}
	.blocker .modalX {
		width: 100%;
		padding-top: 50px;
	}

	/* popup */
	#login_pop .pop_wrap {
		width: 100%;
		height: 100%;
	}
	#login_pop .pop_wrap .content {
		width: 100%;
	    padding: 30px;
	}
	#join_pop .pop_wrap {
		width: 100%;
		height: 100%;
		overflow: scroll;
		padding: 50px 25px;
	}
	#ask_pop .pop_wrap {
		width: 100%;
		height: 100%;
		padding: 50px 25px;
	}
	.notice_popup_area .popup_wrapper{
		left: 0;
		top:0;
	}
	.notice_popup_area .popup_wrapper .notice_popup {
		position: fixed;
		width: 100% !important;
		height: 100%;
		overflow-y: scroll;
	}
	.notice_popup_area .popup_wrapper .notice_popup .pop_box img {
		width:100%
	}
	/* header */
	.swiper {
		margin: 10px;
		border-radius: 10px;
	}
	.header {
		width: 100% !important;
	}
	.header .headerWrapper {
		position: fixed;
		margin:auto;
	}

	.headerWrapper button {
		font-size: .8rem;
		background: none
	}

	.headerWrapper .leftZone {
		position: absolute;
		left: 10px;
		display: flex;
		align-items: center;
	}
	.headerWrapper .left-menu{
		font-size: 24px;
		padding: 10px;
	}
	.headerWrapper .rightZone {
		position: absolute;
		right: 10px;
	}

	.header .headerWrapper .logo {
		text-align: center;
		margin: auto;
	}

	.header .headerWrapper .logo img {
		width: 34vw;
		height: auto;
		max-width: 150px;
	}

	/* footer */
	.footer {
		position: fixed;
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		justify-items: center;
		align-items: center;
		background: var(--bg);
		filter: drop-shadow(2px 4px 6px #6f7073);
		border-radius: 20px 20px 0 0;
		padding: 0 8px;
		height: 60px;
		z-index:1000;
	}
	
	.footer a {
		text-align:center;
		color: #6f7073;
	}
	.footer a span{
		font-size:20px;
	}
	.footer a div{
		margin-top: 5px;
		font-size: 12px;
	}

	.footer a.home{
		margin-bottom: 15px;
		position:relative;
		color: white;
	}
	.footer a.home:before{
		content:'';
		width: 70px;
		height: 70px;
		background: var(--main01);
		border: 7px solid #f5f9fe;
		position:absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;
		border-radius: 50%;
	}
	.home_content {
		padding:0
	}
	.main_content {
		padding: 5px;
		padding-bottom: 80px;
	}
	/* left menu */
	.rightContent {
		padding-left: 0;
	}
	
	.LeftContent {
		display: none;
		width: 180px;
		overflow-y: scroll;
		padding-bottom: 30px;
		background-color: white;
	    box-shadow: #d4d4d4 0.1em 0 0;
	    z-index: 14;
	    top: 0px;
	    bottom: 0px;
	    padding: 29px 0 0;
	    position: fixed;
	    transition: .25s ease-out
	}
	.LeftContent .leftMenu{
		margin: 0;
		padding: 0;
		width: 100%;
		border-radius: 0;
	}
	.LeftContent .leftMenu ul {
		width: 89%;
		margin: 0 auto
	}
	
	.LeftContent .leftMenu ul li {
		padding: 9px 3px;
		border-bottom: 1px solid #485160;
		position: relative
	}
	
	.LeftContent .leftMenu ul li a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		cursor: pointer
	}
	
	.LeftContent .leftMenu ul li a span {
		background: linear-gradient(13deg,#a1a2c4 0%,#6f7073 97.43%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		color: var(--font03);
		font-size: 24px;
		margin-right: 10px;
		transition: .2s ease-out
	}
	
	.LeftContent .leftMenu ul li a.active span {
		background-image: linear-gradient(353.95deg,rgba(16,148,223,0) 0%,var(--main) 50.24%);
		opacity: 1!important;
		transform: scale(1.3);
	}
	
	.LeftContent .gameMenu ul li {
		border: 1px solid var(--border);
		margin-bottom: 7px;
		padding: 6px 8px;
		border-radius: 7px;
		background: linear-gradient(var(--bg) 0%,var(--bg02) 100%);
	}
	.LeftContent .leftMenu01 {
		margin-top: 10px;
		padding-bottom: 15px;
	}
	.LeftContent .leftMenu01 ul li {
		border-bottom: 1px solid var(--border);
		margin-left: 5px;
	}
	.LeftContent .sns_wrap {
		width: 89%;
		margin: auto;
	}
	.LeftContent .sns_wrap a {
		display: flex;
		align-items: center;
		border: 1px solid var(--border);
		margin-bottom: 7px;
		padding: 6px 8px;
		border-radius: 7px;
	}
	.LeftContent .sns_wrap span {
		margin-right: 7px;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 24px;
	}
	.LeftContent .sns_wrap a .icon-service {
		background-image: linear-gradient(#ff6335,#ff35a2);
	}
	.LeftContent .sns_wrap .icon-telegram {
		background-image: linear-gradient(#16d3fb,#00d2ff);
	}
	.LeftContent .sns_wrap .icon-kakao1 {
		background-image: linear-gradient(#ffea30,#ffdc00);
	}
	.LeftContent .sns_wrap .icon-sphere {
		background-image: linear-gradient(#ffacac, #ff0b74);
	}
	.LeftContent .sns_wrap a.full {
		padding: 0;
	}
	.LeftContent .sns_wrap a.full img {
		width: 100%
	}
	.aside .LeftContent {
		display: block;
		padding-bottom: 70px;
	}
	.aside .rightContent {
		margin-left: 180px;
    	width: 100vw;
	}
	.aside .rightContent .header{
		left: 180px;
	}
	/* main */
	.maingame {
		width: 100vw;
		padding: 5px 10px;
	}
	.maingame .topZone{
		display: flex;
		padding: 8px 0;
		border-radius: 5px;
	}
	.maingame .topZone .memberZone{
		display: flex;
		align-items: center;
	}
	.maingame .topZone .memberZone img{
		width: 25px;
		margin-right: 5px;
	}
	.maingame .topZone .memberZone span{
		color: var(--font03);
	}
	.maingame .topZone .moneyZone{
		display: flex;
		align-items: center;
		margin-left: 10px;
	}
	.maingame .topZone .moneyZone .money{
		color: var(--main);
		margin-right: 5px;
	}
	.maingame .topZone .moneyZone .refresh img{
		width: 25px;
	}
	.game-wrap {
		width: 100%;
		display: flex;
		transition: all 0.5s;
		overflow: hidden;
		margin-bottom: 6em;
		height: calc(var(--vh, 1vh) * 100 - 6.68rem);
	}
	.game-wrap ul.game-menu {
		display: flex;
		height: 100%;
		margin-right: 5px;
		position: relative;
		overflow-y: auto;
		flex-direction: column;
	}
	.game-wrap .game-menu li {
		width: 4.5em;
		height: 5em;
		margin-bottom: 5px;
		border-radius: 10px;
		align-items: center;
		position: relative;
		display: flex;
		flex-flow: column;
		justify-content: center;
		border: 1px solid var(--border);
		background: linear-gradient(var(--bg) 0%,var(--bg02) 100%);
	}
	.game-wrap .game-menu li.on {
		background: linear-gradient(var(--main01) 0%,var(--main02) 50.24%);
	}
	.game-wrap .game-menu li .icon {
		background: linear-gradient(13deg,#a1a2c4 0%,#6f7073 97.43%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 2em;
	}
	.game-wrap .game-menu li.on .icon {
		display:none;
	}
	.game-wrap .game-menu li img {
		display:none;
		bottom: 13%;
		position: absolute;
	}
	.game-wrap .game-menu li.on img {
		display:block;
	}
	.game-wrap .game-menu li .txt {
		display: inline-block;
		text-align: center;
		font-size: 0.8em;
		margin-top: 0.5em;
		color: var(--font03);
		position: absolute;
		bottom: 8%;
	}
	.game-wrap .game-menu li .game-menu-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.3em;
		height: 3.3em;
		background-size: 100%;
	}
	.game-wrap .game-content {
		position: relative;
		flex: 1 1 0%;
		width: 100%;
		overflow: scroll;
		padding-bottom: 100%;
	}
	.game-wrap .game-content .game-list {
		width: 100%;
		display: block;
		-webkit-animation: slideDown 0.2s ease;
		animation: slideDown 0.2s ease;
		margin-bottom: 0.5em;
		display: grid;
		grid-template-columns: 1fr;
		gap: 5px;
	}
	.game-wrap .game-content .game-list.slot {
		grid-template-columns: repeat(2, 1fr);
	}
	/*  */
	.titlePic {
		margin: 10px 0;
	}
	.titlePic h2 {
		font-size: 14px;
	}
	.info-wrap {
		padding:15px;
	}

	.info-wrap.cash {
		display: block;
		padding: 10px;
	}
	.input-wrap {
		display: block;
		padding: 6px;
	}
	.info-wrap.cash .input-wrap {
		width: 100%;
	}
	
	.slotWrapper {
		padding: 0;
		display: block;
	}
	.slotWrapper .tabZone {
		display: block;
	}
	.slotWrapper .tabZone ul {
		overflow: scroll;
		flex-direction: row;
		gap: 0px;
		height: auto;
		padding: 0;
	}
	.slotWrapper .tabZone ul li{
		width: 100px;
		border-radius: 0;
		box-shadow: inset 0 4px var(--main);
		padding: 5px;
	}
	.slotWrapper .tabZone ul li .pic {
		width: 85px;
		margin-top: 10px;
	}
	.slotWrapper .tabZone .searchZone {
		width: 90%;
		margin-top: 15px;
		padding: 0;
		font-size:12px;
	}
	.slotWrapper .slotZone .tab-pane ul {
		grid-template-columns: var(--mob-slot-cnt);
	}
	.slotWrapper .slotZone .tab-pane ul li .name {
		font-size:12px;
	}
	.noticeFrame .listZone ul.imgList {
	    grid-template-columns: var(--mob-thumb-cnt);
	}

	.contentZone .txt{
		padding:5px
	}
	.contentZone .txt img {
	    width:100%;
	    height:auto;
	}
	.reply-list table tbody tr {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.reply-list table tbody td {
		height:auto;
		text-align: left;
	}
	.reply-list table tbody td.user {
		flex: 1
	}
	.reply-list table tbody td.content {
		order: 1;
		width: 100%;
		border-top: 1px solid #ddd;
	}
	.marquee {
		margin: 0;
		height: auto;
	}
	.marquee img {
		padding-right:5px;
		width: 35px;
	}
	.langs {
		width: 40px !important;
	}
	.langs .dynamic-select .dynamic-select-header {
		padding: 3px;
	}
	.langs .dynamic-select .dynamic-select-header::after {
		display: none;
	}
	.langs .dynamic-select .dynamic-select-option-text {
		display: none;
	}
}