@CHARSET "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Sora:wght@100..800&display=swap');

* {
	font-family: "Sora", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	box-sizing: border-box;
}

:root {
	--Orange-Mango: #FDC228;
	--Green-Sea-Green: #28964F;
	--Blue-Celtic-Blue: #1D62CA;
	--Purple-Majorelle-Blue: #6F45E9;
	--Purple-Lavender: #E6DDFF;
	--Purple-Indigo: #270685;
	--Purple-Magnolia: #F7F4FF;
	--Neutrals-Black-Coral: #535D66;
	--Neutrals-Azureish-White: #E1E3ED;
	--Neutrals-White: #FFF;
	--Neutrals-Black: #191919;
	--Neutrals-Slate-Gray: #78838D;
	--Neutrals-Alice-Blue: #EDEFF6;
	--Neutrals-Azureish-White: #E1E3ED;
	--Neutrals-Silver-Sand: #BAC2C7;
	--Purple-Ocean-Blue: #5732BF;
	--Red-Golden-Gate-Bridge: #B83232;
	--Red-Snow: #FFF6F6;
	 
	--vh: 100%;
	--white: #FFF;
	--black: #000;
	--gray-0: #191A1A;
	--gray-1: #222;
	--gray-2: #333;
	--gray-3: #F3F3F3;
	--gray-4: #DDD;
	--gray-5: #A1A1A1;
	--gray-6: #797979;
	--gray-7: #EEE;
	
	--primaryColor: rgba(179, 177, 255);
	
	--alertBg: hsl(47.39999999999998 95% 92.2%/1);
	--alertIcon: hsl(45.60000000000002 91.2% 49.2%/1);
	--alertOutline: hsl(44.19999999999999 100% 39.4%/1);
}

html,
body {
	width: 100%;
	height: 100vh;
	height: 100%;
	/* height: calc(var(--vh, 1vh) * 100) !important; */
	min-height: 100%;
	/* min-height: calc(var(--vh, 1vh) * 100) !important; */
	padding: 0;
	margin: 0;
	overflow: hidden;
}
html, body {
	* {
		line-height: 150%;
		box-sizing: border-box;
	}
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	top: 0 !important;
	footer {
		width: 100%;
	}
	> .skiptranslate {
		display: none !important;
		height: 0 !important;
		iframe {
			height: 0 !important;
		}
	}
	/* > * {
		padding: 0 1rem;
	} */	
}
section {
	flex-grow: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

body > *, .wrap {
	width: 100%;
	max-width: 430px;
}
.wrap {
	padding: 0 1rem;
}

.toggle {
	display: none !important;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

button, a {
	text-decoration: none;
	cursor: pointer;
}

h1, h2, h3, h4, h5, p, button {
	margin: 0;
	padding: 0;
}

/* START Loader */
.loaderWrap {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .256);
	.loader {
	  color: #FFF;
	  font-size: 7px;
	  position: relative;
	  text-indent: -9999em;
	  transform: translateZ(0);
	  animation-delay: -0.16s;
	  &::after, &::before {
		border-radius: 50%;
		width: 2.5em;
		height: 2.5em;
		animation-fill-mode: both;
		animation: bblFadInOut 1.8s infinite ease-in-out;
	  }
	}
}
.loader, .loader:before, .loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}
.loader {
  color: #FFF;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}

.loaderContainer {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 100% !important;
	height: 100vh;
	background-color: rgba(0, 0, 0, .256);
	.loader {
		color: #FFF;
		font-size: 7px;
		position: relative;
		text-indent: -9999em;
		transform: translateZ(0);
		animation-delay: -0.16s;
	}
	.loader, .loader:before, .loader:after {
		border-radius: 50%;
		width: 1.5em;
		height: 1.5em;
		animation-fill-mode: both;
		animation: fadeInOut 1.8s infinite ease-in-out;
	}
	
	.loader:before,
	.loader:after {
	  content: '';
	  position: absolute;
	  top: 0;
	}
	.loader:before {
	  left: -2.5em;
	  animation-delay: -0.32s;
	}
	.loader:after {
	  left: 2.5em;
	}
}

@keyframes fadeInOut {
  0%, 80%, 100% { box-shadow: 0 1.5em 0 -1.3em }
  40% { box-shadow: 0 1.5em 0 0 }
}
/* End Loader */












h1, h2, h3, h4, h5, p {
	margin: 0;
	padding: 0;
} 

html,
body {
     /*height: 100dvh;*/
    position:relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden !important;	
}

body {
	display: flex;
	flex-direction: column;
}

content {
	z-index: 1;
	flex-grow: 1;
	overflow-x: hidden !important;
}

a,
a:focus,
button,
button:focus {
	cursor: pointer;
	outline: 0;
}

input {
	outline: 0;
}

input[type=password],
input[type=text] {
	outline: 0;
	-webkit-appearance: none;	
}

.toggle {
	display: none;
}

body.scroll {
	overflow: hidden;
}

.wrapper {
	width: 100%;
	max-width: 450px;
	margin: auto;
}

.mobile-view {
	max-width: 650px;
}

.separate {
	width: 100%;
	height: 8px;
	background: #EEE;
}

/* ===== start of header ===== */
header {
	background: #FFF;
}

header .wrapper {
	width: calc(100% - 20px);
	position: relative;
	padding: 5px 10px;
}

header .logo {
	width: 150px;
	height: 30px;
	margin: auto;
	background: url('../../images/icon/logo.png') no-repeat;
	background-size: 75% auto;
	background-position: center center;
	cursor: pointer;
}

header a.btn-mypage {
  position: absolute;
  top: 8px;
  left: 10px;
  width: 90px;
  padding: 3px;
  font-size: 12px;
  color: #666;
  text-align: center;
  border: 1px solid #CCC;
}

header .badge-cnt {
	position: absolute;
	top: 10px;
	right: 37px;
	padding: 1px 8px;
	border-radius: 10px;
	background: #F04B4C;
	color: #FFF;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

header a.btn-nav {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 21px;
	height: 21px;
	/*
	text-stroke: 2px #FFF;
	-webkit-text-stroke: 2px #FFF;
	-moz-text-stroke: 2px #FFF;
	*/
}

header a i {
	font-size: 26px;
	color: #373E46;
}

header a.btn-nav.open {
	z-index: 4;
}

header a.open i {
	color: #FFF !important;
}

header nav {
	position: absolute;
	top: 10px;
	right: 10px;
	max-height: calc(100vh - 60);
	overflow-y: auto;
	z-index: 4;
}

header nav ul {
	list-style: none;
	padding: 0 10px;
	margin: 0 auto;
	border-radius: 5px;
	border: 1px solid #000;
	background: #22316C;
}

header nav ul li {
	width: auto;
	border-top: 1px solid #000;	
}

header nav ul li:first-child {
	border-top: none;	
}

header nav ul li button {
	position: relative;
	border: none;
	background: none;
	font-size: 16px;
	color: #FFF;
	padding: 15px 15px;
}

header nav ul li button i {
	width: 25px;
	margin-right: 3px;
	text-align: center;
	font-size: 18px;
}

header nav ul li button span.icon-gamble {
	position: absolute;
	bottom: 0;
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url('../../images/icon/icon-gamble-grey.png');
	background-position: center bottom;
	background-size: 100% auto;
	margin-right: 5px;
} 

header nav ul li button span:not(.icon-gamble) {
	margin-left: 28px;
}

@media screen and (max-width: 550px){
	header a {
		right: 30px;
	}
	
	header .badge-cnt {
		top: 11px;
		right: 35px;
		padding: 0 8px;
		border-radius: 9px;
		font-size: 13px;
	}
}
/* ===== end of header ===== */

/* ===== start of popup ===== */
.nav-modal,
section.popup-wrap {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 4;
}

.nav-modal,
section.popup-wrap .modal {
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .4);
}

section.popup-wrap .popup {
	position: absolute;
	top: 5vh;
	right: 0;
	left: 0;
	width: 100%;
	max-width: 470px;
	height: 90vh;
	margin: auto;
	background: #FFF;
}

article.popup .m-render {
	width: 100%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 14px;
	border-bottom: 1px solid #E6E6E6;
}

article.popup .m-render a {
	position: absolute;
	left: 15px;
	text-align: left;
}

article.popup .m-render a i {
	font-size: 21px;
	color: #3E3E3E;
	text-stroke: 2px #FFF;
	-webkit-text-stroke: 2px #FFF;
	-moz-text-stroke: 2px #FFF;
}

/* popup-mypage */
article.popup .pop-mypage {
	position: relative;
	padding: 20px;
}

article.popup .pop-mypage p {
	padding: 0;
	margin: 3px 0;
	font-size: 14px;
	color: #555;
}

article.popup .pop-mypage p.member-addr {
	color: #BBB;
}

article.popup .pop-mypage p span {
	padding: 3px 10px;
	margin-left: 5px;
	border-radius: 15px;
	color: #FFF;
	font-size: 12px;
	background: #FED939;
}

article.popup .pop-mypage p span.ico-user {
}

article.popup .pop-mypage p span.ico-store {
}

article.popup .pop-mypage hr {
	border-top: none;
	border-bottom: 1px solid #B3B3B3;
	margin: 25px 0;
}

article.popup .pop-mypage table {
	border-collapse: collapse;
	width:100%;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 20px;
}

article.popup .pop-mypage table th {
	font-weight: normal;
	text-align: left;
	color: #494949;
}

article.popup .pop-mypage table td {
	text-align: right;
	padding: 15px 0;
	color: #B5B5B5;	
	cursor: pointer;
}

article.popup .pop-mypage table td i {
	text-stroke: 1px #FFF;
	-webkit-text-stroke: 1px #FFF;
	-moz-text-stroke: 1px #FFF;	
}

article.popup .pop-mypage table td.tx-center {
	text-align: center;
	font-size: 13px;	
}

article.popup .pop-mypage a {
	position: relative;
	top: 0;
	right: 0;
	width: 100%;
	z-index: 2;
}

article.popup .pop-mypage button {
	width: 100%;
	border: 1px solid #D8D8D8;
	padding: 10px;
	background: #FFF;
	color: rgba(110, 110, 110, 1);
}

article.popup .pop-mypage button:hover {
	color: rgba(110, 110, 110, .4);
}

article.popup .pop-mypage .member-info {
	margin-top: 20px;
}

article.popup .pop-mypage .btn-update {
	width: auto;
	border: 1px solid #DDD !important;
	padding: 3px 5px;
}

article.popup .pop-mypage .btn-update i {
	margin-right: 2px;
}

article.popup .pop-mypage div.mypage-bar {
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

article.popup .pop-mypage div.mypage-bc {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 4px;
}

article.popup .pop-mypage .qrCodeNum {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	font-weight: 400;
	font-size: 12px;
	color: #222;
}

article.popup .pop-mypage .member-update {
	border: 1px solid red;
}

article.popup .pop-mypage .update-wrap {
	position: relative;
	height: 82vh;
}

article.popup .pop-mypage .update-wrap p {
	color: #777;
}

article.popup .pop-mypage .update-wrap p span {
	padding: 0;
	margin-left: 5px;
	font-size: 12px;
	background: transparent;
	color: #777;
}

article.popup .pop-mypage .update-wrap input[type=text],
article.popup .pop-mypage .update-wrap input[type=password] {
	width: calc(100% - 10px);
	border: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-radius: 0;
	padding: 7px 5px;
	margin-bottom: 15px;
}

article.popup .pop-mypage .update-wrap button {
	margin-top: 20px;
	border: 1px solid #CCC !important;
	background: #CCC;
	color: #333;
	font-weight: 700;
}

@media screen and (max-width: 450px){
	section.popup-wrap .popup {
		top: 0;
		height: 100%;
	}
	
	article.popup .pop-mypage table {
		font-size: 12px;
	}
	
	article.popup .pop-mypage .update-wrap {
		position: relative;
		height: 85vh;
	}
}
/* ===== end of popup ===== */

/* ===== start of footer ===== */
footer {
	z-index: 0;
}

footer .bxslider {
	z-index: 1;
}

footer .bxslider img {
	width: 100%;
}

.ad-wrap {
	background: transparent;
}

.ad-wrap img {
	width: 100%;
}

footer .btn-wrap {
	position: relative;
	height: 25px;
	margin-top: 5px;
}

footer .btn-wrap button {
	position: absolute;
	border: none;
	background: none;
	color: #424242;
	font-size: 14px;
	font-weight: 500;
}

footer .btn-wrap button:first-child {
	top: 0;
	left: 0;
}

footer .btn-wrap button:nth-child(2) {
	top: 0;
	right: 0;
}
/* ===== end of footer ===== */

/* ===== start of rule ===== */
.pg-rule {
	font-size: 14px;
}

.pg-rule .wrapper {
	width: calc(100% - 20px);
	padding: 0 10px;
}

.pg-rule h4 {
	font-size: 16px;
}
/* ===== end of rule ===== */