@charset "utf-8";

/* ==========================================================================
   mobile styles
   ========================================================================== */
/* common */

/* media */
@media screen and (min-width: 991px) {
	/* pc device */
	.mob {
		display: none !important;
	}
}

.main_game_box {
	width: 100%;
	max-width: 1300px;
}

.game_list_wrap {
	width: 100%;
}

.game_list_wrap>ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
}

.game_list_wrap>ul>li {
	margin: 0;
	padding: 5px;
	flex-grow: 0;
	flex: 25%;
	max-width: 25%;
}
.game_list_wrap>ul>li img {
	max-width: 100%;
}
.game_list_wrap>ul>li .check img {
	max-width: 100%;
	width: 3em;
}
.check {
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	top: 5px;
	left: 5px;
	padding: 0;
	text-align: center;
	font-size: 1.2rem;
	letter-spacing: -1px;
	font-weight: 400;
	color: #ffffff;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
}

.popup_wrapper .input1::placeholder {
	opacity: 0;
}
.btn_plus_wrapper {
	display: inline-block;
	vertical-align: middle;
}
.input1 + b {
	margin: 0 .1em;
}

@media screen and (max-width: 990px) { /* mobile device */
	body {
		font-size: calc(.75rem + 1vmin);
	}
	.pc {
		display: none !important;
	}
	.btn3_1,
	.btn3_2 {
		width: 100%;
		min-width: initial;
		margin: 0 1px;
		height: 4em;
		line-height: 4em;
	}

	#wraper {
	    max-width: min(1900px, 100vw);
	}
	
	.wraper-left {
		position: fixed;
		z-index: 101;
		top: 0;
		left: 0;
		bottom: calc(4.8em + 2px);
		width: 100%;
		height: initial;
		overflow-y: auto;
		background-color: #1f1f1f;
		transform-origin: center left;
		transform: perspective(1000px) rotateY(180deg);
	}
	.hamburger-active .wraper-left {
	    transform: perspective(1000px) rotateY(0deg);
	    padding: 2.5em 1em;
	}
	.wraper-right {
		margin-left: 0;
	}
	
	#header {
		padding: 0 1em;
	}
	#container {
		padding: 1em;
	}
	
	.header-tp-rt {
		flex-wrap: wrap;
		padding: .5em 0;
		gap: 5px;
	}
	.header-tp-rt ul {
		gap:5px;
	}
	.header-tp-rt ul li {
		font-size:12px
	}
	.label-lvl {
		width:20px;
		height:20px
	}
	#header_wrap {
		background-color: rgb(0 0 0 / 50%);
		height: var(--header_wrap-height);
	}
	#header_wrap .top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 4em;
		padding: 0.5em 0 .5em 1em;
		background-color: #1c123b;
	}
	#header_wrap .login {
		background-color: #111;
	}
	#header_wrap .m_logo {
		width: 100%;
		height: 100%;
		background: left no-repeat url("../images/common/m_logo.png?var(--ver)");
		background-size: contain;
	}
	#header_wrap .m_logo > a {
		display: inline-block;
		min-width: 10em;
		height: 100%;
	}
	#header_wrap .m_menu > a{
		padding: 0 1em;
		display: inline-block;
	}
	#footer {
	    padding-bottom: 7em;
	}
	
	.hamburger {
		font-size: 3em;
	}
	.hamburger-inner,
	.hamburger-inner:after,
	.hamburger-inner:before {
		height: 0.1em;
	}
	.hamburger-inner {
		top: 50%;
		display: block;
		margin-top: -2px;
		background-color: var(--main02);
	}
	body.hamburger-active {
		overflow: hidden;
	}
	.hamburger-active #header_wrap {
		position: sticky;
		top: 0;
		z-index: 2001;
	}
	.main_game_title {
		display: none;
	}

	.main_popup_tab>li>a {
		font-size: 1em;
	}
	.main_popup_tab_box {
		width: inherit;
	}
	.main_popup_tab_box .con_box30 {
		padding: .25rem;
	}
	.main_game_box {
		padding: .25rem;
	}
	
	.nav>ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: center;
	}
	.nav>ul>li {
		width: 50%;
	}

	
	h3.main-title {
		font-size: 1.5em;
		margin: 2em 0;
	}
	h3.main-title>span {
		position: absolute;
		top: 3em;
		margin-left: 0;
	}

	h3.sub-title {
		padding: 1em 1.5em;
		text-align: center;
	}
	.notandum-box {
		padding: 1em 1.5em;
	}
	.notandum-box>h3.tit {
		text-align: center;
	}
	.application-style {
		padding: 0 1.5em;
	}
	.application-style>dl {
		display: flex;
		flex-wrap: wrap;
	}
	.application-style>dl>* {
		display: inline-flex;
		align-items: start;
		justify-content: center;
		flex-flow: column;
		min-height: 70px;
		height: fit-content;
	}
	.application-style>dl>dt {
		width: 25%;
	}
	.application-style>dl>dd {
		width: 75%;
	}
	.application-style>dl.dt-narrow>dt {
		width: 20%;
	}
	.application-style>dl.dt-narrow>dd {
		width: 80%;
	}
	
	.application-style>dl>dd>input, .application-style>dl>dd>select {
	    width: 100%;
	}

	.form-btn-wrapper {
		flex-flow: column;
	}
	.form-btn-wrapper > a.btn {
		flex-grow: 1;
		width: 100% !important;
	}

	.slot-btn {
		margin-bottom: 3em;
	}
	.slot-btn .name {
		font-size: 0.8em;
	}
	.slot-btn .slot-cont .nameEn{
		font-size: 1em;
	}
	.img-list .sc-inner {
		font-size: 1em;
		--grid-layout-gap: .25em;
	}

	.main_game_start {
		padding: .25rem;
	}

	.game_list_wrap > ul > li {
		padding: 2.5px;
		flex: 33.333%;
		max-width: 33.333%;
	}
	.game_list_wrap > ul > li  a > img {
		width: 100%;
	}

	.check {
		width: calc(100% - 5px);
		height: calc(100% - 5px);
		top: 2.5px;
		left: 2.5px;
	}
	.main_con_box {
		padding: 0 0.25rem;
		flex-flow: column;
	}
	.main_con1_wrap {
		width: 100%;
		margin: .25rem 0;
		max-width: initial;
	}
	.main_con1_wrap+.main_con1_wrap {
		margin-left: 0;
	}
	.main_con_wrap .more {
		right: 1.5em;
	}
	.main_con1_wrap .main_con1 {
		width: inherit;
		padding: 0.5em 3em;
	}
	.main_con1_wrap .main_con1 table {
		width: 100%;
		min-width: initial;
	}
	
	.main_con1_title {
		text-align: left;
	}
	.main_con1_title > img {
		max-width: 100%;
	}

	.notice_popup_area {
		top: 4rem;
		left: 0;
		max-width: 100%;
	}
	.notice_popup {
		width:100% !important;
		min-width:unset;
		
	}
	.notice-wrap>.notice-box {
		padding:15px
	}
	.login ul {
		display: flex;
		justify-content: space-between;
	}
	.login ul li {
		font-size: .8em;
		line-height: 2em;
		width: fit-content;
		max-width: 100%;
		white-space: nowrap;
	}
	.login ul li .nickName {
		font-size: 1.2em;
	}

	.login ul li.item-username,
	.login ul li.item-password {
		flex-grow: 1;
		padding-right: .1em;
	}
	.login ul li.item-username input,
	.login ul li.item-password input {
		width: 100%;
	}
	.login ul li.item-nickname {
		overflow: hidden;
		flex-grow: 1;
		text-align: left;
	}
	.login ul li img {
		max-width: 30vw;
	}
	.hamburger-active .login ul li.item-cash {
		display: none;
	}
	.hamburger-active .login ul li.item-logout,
	.hamburger-active .login ul li.item-partner {
		display: list-item !important;
	}

	/* sk_popup mobile styles (not popup exactly, subpage theme) */
	.popup_background:not(#notice_pop_background) {
		display: none !important;
	}
		
	#login_pop_background.popup_background {
		display: block !important;
		opacity: initial !important;
		background-color: rgb(28 18 59 / 50%) !important;
		backdrop-filter: blur(20px);
	}

	.popup-bg {
		backdrop-filter: blur(10px);
	}
	.popup_wrapper {
		top: var(--header_wrap-height) !important;
		overflow: hidden !important;
		margin-top: -1px;
	}
	.popup_wrapper .close_box {
		display: none;
	}
	.popup_wrapper .popup_wrap {
		font-size: 0.8em;
	}
	.popup_wrapper .popup_content {
		display: block !important;
		width: 100%;
	}
	.popup_wrapper .popup_content>.popup_wrap {
		width: 100%;
	}
	#notice_pop .notice_popup_text {
		min-width:initial;
		padding:1em;
	}
	.notice_popup_box {
		min-height: unset !important;
	}
	.notice_popup p img {
		width:100%;
		height:auto;
	}
	.popup_wrapper .popupbox {
		border-radius: 0;
		background: url("../images/common/bg.jpg?var(--ver)") center -7rem no-repeat;
		padding: 0;
		overflow: auto;
		height: calc(100vh - var(--header_wrap-height));
	}
	.popup_wrapper .popupbox .slot_loding {
		padding: .5em;
		font-size: 2em;
	}
	.popup_wrapper .popupbox .slot_loding img {
		max-width: 80vw;
	}
	.popup_wrapper .popupbox .pop_content {
		padding-bottom: 10em;
	}

	.popup_wrapper .title1 {
		height: 3em;
		line-height: initial;
		text-align: center;
		background: url("../images/common/bg_popup.jpg?var(--ver)") center center no-repeat;
		background-size: cover;
		margin: 0;
		float: initial;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}
	.popup_wrapper .title1-search {
		height: 3em;
		background: url("../images/common/bg_popup.jpg?var(--ver)") center center no-repeat;
		background-size: cover;
		margin: 0;
	}
	.popup_wrapper .title1-search .input1{
		min-width: initial;
	}
	.popup_wrapper .title1-search .clearable {
		width: 12em;
	}

	.popup_wrapper .popup-noheader .title1 {
		align-items: start;
	}
	.popup_wrapper .popup-noheader .title1 + .close_box {
		display: inline-flex;
		position: absolute;
		top: 0;
		justify-content: end;
		transform: scale(0.8);
		transform-origin: top right;
	}

	.popup_wrapper .title2 {
		float: initial;
		text-align: center;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
	}

	.popup_wrapper .con_box00,
	.popup_wrapper .con_box10,
	.popup_wrapper .con_box20,
	.popup_wrapper .con_box30 {
		padding: 0 0.5em;
		float: initial;
	}
	.popup_wrapper .con_box00 .btn_wrap_center,
	.popup_wrapper .con_box10 .btn_wrap_center,
	.popup_wrapper .con_box20 .btn_wrap_center,
	.popup_wrapper .con_box30 .btn_wrap_center {
		float: initial;
	}
	.popup_wrapper .input1::placeholder {
		opacity: 1;
	}

	.popup_wrapper .write_title,
	.popup_wrapper .write_basic {
		min-height: 2em;
		line-height: 2em;
		padding: 0.5em 1em;
	}
	.popup_wrapper .write_title {
		max-width: 12em;
		white-space: nowrap;
		width: 25%;
	}
	.popup_wrapper .write_title_2 {
		display: none;
	}
	.popup_wrapper .flex-table .write_title {
		width: 100%;
		display: flex;
		padding: .75em .8em 0;
		border-bottom: none;
		margin-top: .2em;
		max-width: initial;
	}

	.popup_wrapper .write_basic {
		display: flex;
		flex-wrap: wrap;
	}
	.popup_wrapper .write_basic > .input1{
		flex-grow: 1;
		width: 4em;
	}
	.popup_wrapper .write_basic > .input1 + span {
		display: block;
		font-size: .8em;
		width: 100%;
		line-height: initial;
	}
	.popup_wrapper .write_basic > .input1 + a {
		margin-left: .3em;
	}

	.popup_wrapper .popup_tab_wrap {
		display: none;
	}

	.btn_plus_wrapper {
		display: grid;
		grid-template-columns: auto auto auto auto auto auto min-content;
		margin: .25em 0;
		flex: 0 0 100%;
	}
	.btn_plus_wrapper > a {
		padding: .1em;
	}
	.btn_plus_wrapper > a > .btn {
		width: 100%;
		padding: 0 1em;
		line-height: 3.5em;
		height: 3.5em;
	}
	.qna_wrapper {
		width: 100%;
	}

	.list1,
	.list_title1,
	.list_notice1,
	.list_notice2 {
		line-height: initial;
		padding: 1em .2em;
	}

	.slot_list>ul {
		grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
		gap: .5em;
	}
	.slot_list>ul>li {
		margin-top: .6em;
		border: none;
	}
	.slot_list>ul>li .tit {
		padding: .75em .25em;
	}
	
	.pagination>li>a,
	.pagination>li>span {
		margin: 0.1em;
		border-radius: 0.2em;
		padding: 0.5em 1.25em;
		line-height: 2;
	}

	.popup_tab.flex .tab1 {
		flex-grow: 1;
		min-width: initial;
	}

	.roulette-container {
		position: relative;
		display: block;
		width: 100%;
		scale: initial;
		right: 0;
		top: 2vw;
		background: url("../images/common/roul-bg.png?var(--ver)");
		z-index: 1;
	}

	.roulette .cash-font {
		font-size: 1em;
	}
	.btn.primary,
	.btn.secondary {
		padding:5px;
		min-width:80px;
	}
	.quick {
		right:1em;
		bottom:6em
	}
	.banner .slick-list {
		margin:-1em;
		border-radius:0
	}
	.table-view .box>.header {
		flex-direction:column;
	}
	.table-view .box>.header .ico{
	margin-right: auto;
	margin-bottom: 0.5em;
	}
	.table-view .box>.header .time{
		margin-left: auto;
		margin-top: 0.5em;
	}
}

@media screen and (max-width: 720px) {
	.btn_plus_wrapper {
		grid-template-columns: auto auto auto;
	}
	.btn_plus_wrapper > .btn_plus + .btn_plus + .btn_plus + .btn_plus + .btn_plus + .btn_plus + .btn_reset {
	    grid-column-start: 2;
	}
	.slot_list>ul {
		grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
	}
}
@media screen and (max-width: 425px) {
	.game_list_wrap>ul>li {
		flex: 50%;
		max-width: 50%;
	}
	.btn_plus_wrapper {
		grid-template-columns: auto auto;
	}
	.btn_plus_wrapper > .btn_plus + .btn_plus + .btn_plus + .btn_plus + .btn_plus + .btn_plus + .btn_reset {
	    grid-column-start: 1;
		grid-column-end: -1;
	}
	.slot_list>ul {
		grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
	}
	.main_con1_wrap .main_con1 {
		width: inherit;
		padding: 0.5em 1em;
	}
}
@media screen and (max-width: 320px) {
	.game_list_wrap>ul>li {
		flex: 50%;
		max-width: 50%;
	}

	.btn_plus_wrapper {
		grid-template-columns: auto;
	}
	
	.popup_wrapper .title1-search span {
		display: none;
	}
	
	.popup_wrapper .title1-search .clearable {
		width: 100%;
	}
	.slot_list>ul {
		grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
	}
}