@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;
	}
	body {
		overflow: scroll
	}
	::-webkit-scrollbar {
		width: 0;
		background-color: transparent;
	}
	.blocker {
		padding: 0;
	}
	.blocker .modalX {
		width: 100%;
		padding-top: 50px;
	}

	/* popup */
	.pupop_content .inputFrame .info {
		width:auto;
		margin-right:10px;
	}
	.pupop_content .inputFrame .info .txt {
		display:none;
	}
	#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;
	}
	#join_pop .pop_wrap .inputFrame .info{
		width: 40%;
	}
	#join_pop .pop_wrap .inputFrame .info .txt{
		font-size: 12px;
	}
	#ask_pop .pop_wrap {
		width: 100%;
		height: 100%;
		overflow: scroll;
		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 {
		padding: 0;
	}

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

	.headerWrapper button.signup-btn {
		color: #bbbcc2;
		padding: 0;
	}

	.header .headerWrapper .logo {
		margin: auto;
	}

	.header .headerWrapper .logo img {
		height: 25px;
	}
	.header .headerWrapper .leftZone {
		position: absolute;
		left: 10px;
		display: flex;
		align-items: center;
	}
	.header .headerWrapper .leftZone .left-menu{
		font-size: 24px;
		margin-right: 5px;
		padding: 8px;
	}
	.header .headerWrapper .leftZone .sns img {
		width: 40px
	}
	.header .headerWrapper .rightZone {
		position: absolute;
		right: 10px;
	}

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

	.footer a.home{
		margin-bottom: 15px;
		position:relative;
		color: var(--font04);
	}
	.footer a.home:before{
		content:'';
		width: 70px;
		height: 70px;
		background: var(--main02);
		border: 7px solid #000000;
		position:absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;
		border-radius: 50%;
	}
	.home_content {
		padding:0
	}
	.main_content {
		padding: 0 10px;
		padding-bottom: 80px;
	}
	.main_content .banner {
		margin:10px 0;
	}
	.main_content .banner img {
		border-radius:10px;
	}
	.banner .video.slick-slide {
		aspect-ratio: 1033/568;
	}
	.banner .video.slick-slide video {
	    position: relative !important;
	    top: 0% !important;
	    transform: translate(0%, 0%) !important;
	}
	/* left menu */
	.LeftContent {
		display: none;
	}
	.LeftContent .logo{
		display: none;
	}
	.LeftContent .gameMenu{
		background: unset;
	}
	.LeftContent .gameMenu ul li {
		border: 1px solid #424242;
		margin-bottom: 7px;
		padding: 8px;
		border-radius: 7px;
		background: linear-gradient(#353535 0%, #000000bd 100%);
	}
	.LeftContent .leftMenu{
		margin: 0;
		padding: 0;
		width: 100%;
		border-radius: 0;
	}
	.LeftContent .leftMenu ul li a span {
		margin-right: 10PX;
	}
	.LeftContent .leftMenu ul li a .txt {
		display: block;
	}
	.LeftContent .leftMenu01 {
		margin-top: 10px;
		padding-bottom: 15px;
	}
	.LeftContent .leftMenu01 ul li {
		border-bottom: 1px solid #485160;
	}
	.LeftContent .leftMenu01 ul li a span {
		font-size: 18px;
		margin-left: 10px;
	}
	.LeftContent .leftMenu01:after{
		height: 0;
	}
	.LeftContent .sns_wrap {
		margin: auto;
		padding: 10px;
	}
	.LeftContent .sns_wrap a {
		display: flex;
		align-items: center;
		border: 1px solid var(--border);
		margin-bottom: 7px;
		padding: 6px 8px;
		border-radius: 7px;
		color: white;
	}
	.LeftContent .sns_wrap span {
		margin-right: 7px;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 24px;
	}
	.LeftContent .sns_wrap a.full {
		padding: 0;
		border: none;
	}
	.LeftContent .sns_wrap a.full img {
		width: 100%
	}
	.rightContent {
		padding-left: 0;
	}
	.aside .LeftContent {
		display: block;
		width: 180px;
	}
	.aside .rightContent {
		margin-left: 180px;
    	width: 100vw;
	}
	.aside .rightContent .header{
		left: 180px;
	}
	/* main */
	.maingame .topZone{
		display: flex;
		margin-bottom: 10px;
		padding: 10px;
		background: #252525;
		font-size: 12px;
		border-radius: 5px;
		white-space: nowrap;
	}
	.maingame .topZone .memberZone{
		display: flex;
		align-items: center;
	}
	.maingame .topZone .memberZone img{
		width: 25px;
		margin-right: 5px;
	}
	.maingame .topZone .memberZone span{
		color: aliceblue;
	}
	.maingame .topZone .moneyZone{
		display: flex;
		align-items: center;
		margin-left: 10px;
	}
	.maingame .topZone .moneyZone .money{
		color: #ffffff;
		margin-right: 5px;
	}
	.maingame .topZone .moneyZone .refresh img{
		width: 25px;
	}
	.game-wrap {
		width: 100%;
		display: flex;
		transition: all 0.5s;
		overflow: hidden;
		height: calc(120vh - 107.5vw - 2em);
	}
	.game-wrap ul.game-menu {
		height: 100%;
		margin-right: 5px;
		position: relative;
		overflow-y: auto;
	}
	.game-wrap ul.game-menu li {
		width: 4.5em;
		height: 5em;
		margin-bottom: 5px;
		border-radius: 10px;
		background-repeat: no-repeat;
		background-position: 50%;
		align-items: center;
		position: relative;
		display: flex;
		flex-flow: column;
		justify-content: center;
		border: 1px solid #4b4545;
		background: linear-gradient(#353535 0%, #000000bd 100%);
	}
	.game-wrap ul.game-menu li .icon {
		background: linear-gradient(13deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 97.43%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 2em;
	}
	.game-wrap ul.game-menu li.on {
		background: var(--main);
		color: var(--font04);
	}
	.game-wrap ul.game-menu li.on .icon {
		-webkit-text-fill-color: var(--font04);
		background: unset;
	}
	.game-wrap ul.game-menu li .txt {
		display: inline-block;
		text-align: center;
		font-size: 0.8em;
		margin-top: 0.5em;
	}
	.game-wrap .game-content-wrap {
		position: relative;
		flex: 1 1 0%;
		width: 100%;
		overflow: scroll;
	}
	.game-wrap .game-content-wrap .game-list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 5px;
		margin-bottom: 5px;
	}
	.game-wrap .game-content-wrap .game-list.slot {
		grid-template-columns: 1fr 1fr;
	}
	.gameFrame {
		padding-bottom: 40%;
	}
	.gameFrame .model {
		bottom: -10%;
		width: 60%;
		right: -8%;
	}
	.gameFrame .txt {
		font-size: 18px;
	}
	.gameFrame .logo-wrap {
		left: 10%;
	}
	.gameWrapper .content .rightZone {
		width: 100%;
	}
	.gameWrapper .content .rightZone .game-list {
		grid-template-columns: 1fr;
	}
	.slotWrapper {
		margin-top:0;
		padding: 0;
	}
	.slotWrapper .tabZone {
		display: block;
	}
	/*.slotWrapper .tabZone ul {
		grid-template-columns: auto;
		grid-auto-flow: column;
		overflow: auto;
		gap: 0;
		height: auto;
	}*/
	.slotWrapper .tabZone ul {
	    display: inline-flex;
        grid-template-columns: auto;
        grid-auto-flow: column;
        overflow: auto;
        gap: 0;
        height: auto;
        flex-wrap: wrap;
	}	
		
	.slotWrapper .tabZone ul li{
		width: 100px;
		border-radius: 0;
		height: 85px;
		background: linear-gradient(0deg, #3d3d3d, black);
		box-shadow: inset 0 4px var(--main);
	}
	
	.slotWrapper .tabZone ul li .pic {
		width: 60%;
	}
	.slotWrapper .tabZone ul li h4 {
		font-size: 12px;
	}
	.slotWrapper .tabZone .searchZone {
		width: 90%;
		margin-top: 15px;
		padding: 0;
	}
	.slotWrapper .slotZone ul {
		grid-template-columns: var(--mob-slot-cnt);
	}
	.slotWrapper .slotZone ul li {
		margin-bottom: 10px;
	}
	.slotWrapper .slotZone ul li .pic {
		border-radius: 5px;
	}
	.slotWrapper .slotZone ul li .name {
		font-size:12px;
	}

	.info-wrap {
		padding: 10px;
	}

	.info-wrap.cash {
		display: block;
		padding: 10px;
	}
	.input-wrap {
		display: block;
		padding: 6px;
	}
	.info-wrap.cash .input-wrap {
		width: 100%;
	}
	.noticeFrame .listZone ul.imgList {
		grid-template-columns: var(--mob-thumb-cnt);
	}
	.noticeFrame .infoZone table tr th {
		width:auto;
		padding: 10px;
	}
	.noticeFrame .infoZone table input {
		width:calc(100% - 20px)
	}
	.titleWrap {
		padding: 10px;
		color:white;
		font-size: 18px;
	}
	.titleWrap span {
		margin-left:5px;
		color:var(--font03);
		font-size: 12px;
	}
	.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 #414141;
	}
	.marquee {
		padding: 0 10px;
		font-size: 12px;
	}
	.marquee img {
		filter: hue-rotate(136deg);
	}
}