@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;
		font-size: 11px;
	}
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
	.blocker {
		padding: 0;
	}
	.blocker .modalX {
		width: 100%;
		min-height: 100%;
		padding: 50px 10px 10px 10px;
	}
	.pop_auth {
		width:100%;
		top: 100%;
		transform: translate(-50%,-100%);
		border-radius: 10px 10px 0 0;
		max-height: 100%;
		overflow: auto;
	}
	.pop_auth .pop_wrap{
		width:100%;
		min-width: unset;
		min-height: unset;
		display: block;
	}
	.pop_auth .pop_wrap img.leftImg {
		display:none;
	}
	.pop_auth .content {
		padding: 30px 15px 15px 15px;
	}
	.pop_auth .content .btnFrame {
		display:flex;
		gap:5px
	}
	.notice_popup_area .popup_wrapper{
		left: 0;
		top:0;
	}
	.notice_popup_area .popup_wrapper .notice_popup {
		width: 100% !important;
		overflow-y: scroll;
		top: 0;
	}

	/* header */
	.header .headerWrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 50px;
		width: 100%;
	}

	.header .headerWrapper .rightZone {
		position:absolute;
		right: 0;
	}
	.header .headerWrapper .rightZone .icon-man {
		font-size: 22px;
		color: var(--font01);
		padding: 10px;
	}
	.header .headerWrapper .rightZone img {
		width: 20px;
	}
	.header .headerWrapper .leftZone {
		position:absolute;
		left: 0;
	}
	.header .headerWrapper .left-menu {
		font-size: 22px;
		color: var(--font01);
		padding: 10px;
	}

	.header .headerWrapper .logo img {
		height:45px;
	}

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

	.main_content {
		padding-bottom: 70px;
	}
	
	/* footer */
	.footer {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		background: linear-gradient(#dfdfdf,#ffffff);
		filter: drop-shadow(2px 5px 6px black);
		border-radius: 20px 20px 0 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 14;
		padding: 7px;
		justify-items: center;
	}
	
	.footer a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 2px;
	}
	
	.footer a:nth-child(3){
		background: linear-gradient(var(--main01), var(--main02));
		filter: drop-shadow(2px 2px 2px #ffffff);
		border-radius: 50%;
		width: 50px;
		height: 50px;
	}
	
	.footer a span {
		font-size: 2em;
		margin-bottom: .5vw
	}
	
	.footer a .txt {
		font-size: 11px;
	}

	/* left menu */
	.LeftContent {
		width: 0;
		display: none;
		top: 0;
		bottom: 0;
		background: #f9f9f9;
		animation: rightIn .4s;
		z-index: 20;
	}
	
	.rightContent {
		padding-top: 50px;
		padding-left: 0;
		width: 100%;
	}
	.aside .LeftContent {
		width: 100%;
		display: block;
	}
	.LeftContent .welcomeWrap {
		background: linear-gradient(#0000008a, #00000069), var(--bg-img) no-repeat center;
		background-size: 100% 100%;
		height: 120px;
		text-align: center;
		padding: 20px 0;
	}
	.LeftContent .welcomeWrap .topZone {
		display: flex;
		font-size: 18px;
		color: white;
		justify-content: center;
		margin-bottom: 20px;
		gap: 10px;
	}
	.LeftContent .welcomeWrap .btnZone button {
		background: white;
		padding: 10px;
		font-size: 14px;
		width: 100px;
		margin: 0 5px;
		border-radius: 6px;
	}
	.LeftContent .logo-wrap {
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10px;
		background: white;
		height: 50px;
	}
	.LeftContent .logo-wrap img{
		height: 40px;
	}
	.LeftContent .x-nav {
		border-radius: 50%;
		text-align: center;
		background: var(--main03);
		color: white;
		font-size: 14px;
		padding: 8px;
	}
	.LeftContent .scrollFrame {
		overflow-y: scroll;
		margin-left: 0;
		height: calc(100vh - 50px);
	}
	.LeftContent .info {
		padding: 10px;
		display: flex;
		align-items: center;
	}
	.LeftContent .info img{
		margin-right: 10px;
	}
	.LeftContent .leftMenu{
		margin: 0;
		border-radius: 0;
		box-shadow: unset;
		margin: 10px;
		padding: 0;
		background: #f9f9f9;
	}
	.LeftContent .leftMenu ul {
		display:grid;
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}
	.LeftContent .leftMenu ul li a {
		background: white;
	}
	.LeftContent .leftMenu ul li a span {
		-webkit-text-fill-color: #545454;
	}
	.LeftContent .leftMenu ul li a.active span {
		-webkit-text-fill-color: transparent;
	}
	.LeftContent .leftMenu ul.bottom {
		margin-top: 10px;
		background: white;
		border-radius: 15px;
	}
	.LeftContent .sns_wrap ul {
		grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	}	
	.LeftContent .bottom .logout {
		display: flex;
		align-items: center;
		padding: 10px;
	}
	.LeftContent .bottom .logout span {
		background: linear-gradient(353.95deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 97.43%);
		color: #af71f7;
		font-size: 22px;
		margin: 0 10px;

	}
	.LeftContent .bottom a img {
		width: 100%;
		padding: 10px;
	}

	.home_content {
		padding-bottom: 70px;
	}

	.titleTop {
		text-align:center;
		font-size: 18px;
		padding: 12px;
		background:white;
		position: relative;
	}
	.titleTop .close {
		position: absolute;
		padding: 12px;
		top: 0;
		right: 0;
	}
	.titleTop .prev {
		position: absolute;
		padding: 12px;
		top: 0;
		left: 0;
	}
	.homeWrapper .game-bg {
		width: 185px;
		height: 145px;
		margin-top: 40px;
	}

	.homeWrapper .game-bg .txt .tit {
		font-size: 16px;
	}

	.homeWrapper .game-bg .txt .sub {
		font-size: 12px;
		margin-top: 4px;
	}

	.homeWrapper .otherWrap .game-list {
		flex-direction:column;
		gap: 15px;
		margin: 10px;
	}
	.homeWrapper .other-bg {
		display: flex;
		align-items: center;
		position: relative;
	}
	.homeWrapper .other-bg .model {
		width: 70px;
		height: 70px;
		background: linear-gradient(180deg, var(--main03) 0,var(--main05));
		border-radius: 10px;
		margin-right: 10px;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.homeWrapper .other-bg .model img {
		width: 80px;
	}
	.homeWrapper .other-bg .tit {
		font-size: 14px;
		color: #232323;
	}
	.homeWrapper .other-bg .sub {
		font-size: 12px;
		color: #959595;
		margin-top: 5px;
	}
	.homeWrapper .other-bg .btnPlay {
		position: absolute;
		right: 0;
		font-size: 12px;
		background: var(--main03);
		color: white;
		padding: 5px 10px;
		border-radius: 10px;
	}
		
	.gameZone .gameWrapper {
		width: 100%;
		height: 100%;
		padding: 5px;
	}
	.gameWrapper .game-list {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
	.gameWrapper .game-bg {
		padding-bottom: 33%;
		margin-top: 10px;
		background: linear-gradient(180deg, var(--main03) 0,var(--main05));
	}
	.gameWrapper .game-bg .logo {
		width: 18%;
		left: 79%;
		top: 6%;
	}
	.gameWrapper .game-bg .model {
		width:30%;
		left: 6%;
	}
	.gameWrapper .game-bg .txt {
		text-align:left;
		left: 40%;
		background: transparent;
		top: 20%;
		padding: 0;
	}
	.gameWrapper .game-bg .tit {
		font-size: 5vw;
		color: white;
	}
	.gameWrapper .game-bg .sub {
		display:block;
		color: #acacac;
		margin-top: 8px;
		font-size: 3.5vw;
	}
	.gameWrapper .game-bg .btnPlay {
		left: 40%;
		top: 65%;
		opacity:1;
		transform: unset !important;
		font-size: 3vw;
		padding: 10px;
		background: no-repeat;
		width: 35%;
		display: flex;
		justify-content: center;
	}

	.gameWrapper .mini-bg {
		
padding-bottom: 33%;
		
margin-top: 10px;
		
background: linear-gradient(180deg, var(--main03) 0,var(--main05));
	}
	.gameWrapper .mini-bg .model{
	top: -7%;
	}
	.gameWrapper .mini-bg .txt {
	top: 18%;
	}

	.gameWrapper .mini-bg .tit {
	color: white;
	}

	.gameWrapper .mini-bg .sub {
	color: white;
	}

	.gameWrapper .mini-bg .btnPlay {
	opacity: 1;
	width: 160px;
	text-align: center;
	padding: 10px;
	position: absolute;
	border-radius: 5px;
	z-index: 5;
	left: 10%;
	top: 59%;
	}
	.slotWrapper {
		padding:0 10px;
		margin: 10px auto 75px;
	}
	.slotWrapper .tabZone {
		display: block;
	}
	.slotWrapper .tabZone ul {
		overflow: scroll;
		grid-auto-flow: column;
		grid-template-columns: auto;
		gap: 5px;
		height: auto;
	}
	.slotWrapper .tabZone ul li {
		width: 100px;
		border-radius: 5px;
		padding: 10px 0;
		background: linear-gradient(180deg,#d1d1d1,#dedede);
		border-color: #b3b3b3;
	}
	.slotWrapper.grid .tabZone ul {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		grid-auto-flow: unset;
		border-top: none;
	}
	.slotWrapper.grid .tabZone ul li {
		width: 100%;
		border: none;
	}
	.slotWrapper .slotZone ul.slot-list {
		grid-template-columns: var(--mob-slot-cnt);
	}
	.slotWrapper.grid .slotZone {
		display:none;
	}
	.info-wrap {
		padding: 15px;
	}
	.info-wrap.cash {
		display: block;
		padding: 10px;
	}
	.input-wrap {
		display: block;
		padding: 0px;
	}
	.info-wrap.cash .input-wrap {
		width: 100%;
	}

	.noticeFrame {
		padding: 10px;
		min-height: unset;
		margin: 5px;
		border-radius: 10px;
	}
	.noticeFrame ul.tabZone {
		overflow:scroll
	}
	.noticeFrame ul.tabZone li {
		min-width:80px;
		height: 40px;
	}
	.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;
	}
		
	#btn_top{
		bottom: 150px;
    	right: 18px;
	}
	.langs {
		width: 40px;
	}
	.langs .dynamic-select .dynamic-select-header::after {
		display: none;
	}
	.langs .dynamic-select .dynamic-select-option-text {
		display: none;
	}
}