@import url('//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;500;700');

@font-face {
    font-family: GmarketSansTTF;
    src: url("./eFiles/GmarketSansMedium.otf") format("opentype");
    font-style: "bold";
    font-weight: 400;
}
*{
	touch-action: pan-y;
}
body {
    font-family: 'Noto Sans KR', sans-serif;

}
body.GmarketSans{
	font-family:'GmarketSansTTF',sans-serif;
}
body,img {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-thumb {
	background: rgb(108 108 108); /* 스크롤바 색상 */
	border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

::-webkit-scrollbar-track {
	background: rgba(185, 185, 185, 0.7);  /*스크롤바 뒷 배경 색상*/
}
ul,li,dl,dd{list-style:none;}

button:focus {
    outline:none;
}
/* 로딩중 */
	.bodyLoading{
		position:fixed;
		width:102%;
		height:102%;
		margin:-1%;
		left:0px;
		top:0px;
	}
	.bodyLoading .loadingBOX{
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 40%;
	}
	.bodyLoadingSpin{
		/* border-top-color: #001f64; */
		width: 60px;
		height: 60px;
		/* margin-top: 50px; */
		border: solid 5px rgba(189, 189, 189, 0.25);
		border-radius: 50%;
		border-left-color: #aaa;
		border-top-color: #bbb;
		-webkit-animation: pace-spinner 400ms linear infinite;
		animation: pace-spinner 600ms linear infinite;
	}
	@keyframes pace-spinner {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
	@-webkit-keyframes pace-spinner {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
/**/

/* 상단 버튼 */
	.top_button_action{
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 1;
		max-width: 720px;
	}
	.top_button_action .top_button_left{
		position:absolute;
		left:0px;
		width:8%;
		margin:3% 0 0 2%;
	}
	.top_button_action .top_button_right{
		position:absolute;
		right:0px;
		width:8%;
		margin:3% 2% 0 0%;
	}
/**/

/*팝업*/
	.popup-box{
		position:absolute;
		top:0px;left:0px;
		width:100%;height:100%;
	}
	.popup-box div,
	.popup-box li{
		font-family:'Noto Sans KR'
	}

	.popup-box .popup-box-background{
		position:fixed;
		width:100%;
		height:100%;
		background: #000000;
		opacity: 0.4;
		z-index: 99990;
	}
	.popup-box .popup-box-content{
		position:fixed;
		bottom:0px;
		width:100%;
		text-align:center;
		z-index:99999;
	}
	.popup-box-message{
		width:100%;max-width:720px;
		text-align:left;
		background:#FFF;
		padding:20px 30px 25px 30px;
		border-radius:50px 50px 0px 0px;
		overflow:hidden;
	}
	.popup-box-message img{width:100%;}
	.popup-box-close {float:right;width:20px;cursor:pointer;}
	.popup-box-success{clear:both;padding-top:20px;cursor:pointer;}
	.popup-box-message  .popup-box-info{
		width:100%;
	}
	.popup-box-message ul{
		margin-top:20px;
		width:100%;
		padding:0px;
	}
	.popup-box-message ul li{list-style:none;padding:0px;float:left;}
	.popup-box-message .check{width:30px;margin-right:10px;cursor:pointer;margin-top:-4px}
	.popup-box-message .text{cursor:pointer;}

	.popup-box-message  .popup-box-info .box-title{
		font-size:1.0rem;
		font-weight:bold;
		text-align:center;
	}
	.popup-box-message  .popup-box-info .box-contents{
		padding:15px 15px 0px 15px;
		font-size:0.7rem;
	}
	.popup-box .popup-box-content .pop-up-txt{
		max-width:720px;
		font-size:15pt;font-weight:bold;
		margin:20px 30px 15px 30px;
	}

	/*일반 레이어 팝업*/
	.popup-box-content.popMSG{
		width:80%;
		top: 50%;left:50%;transform: translate(-50%, -50%);
		border-radius: 0px;
		font-weight:bold;
		min-width:320px;
	}
	.popMSG .popup-box-message{
		border-radius:15px;
		text-align:center;
	}
	.popMSG .popup-box-close{
		clear: both;
		float: none;
		width: 100%;
	}
	.popMSG .popup-box-close img{
		width:50%;
		margin-top:30px;
		display:inline;
		vertical-align:top;
	}
	/*일반 레이어 팝업*/
/*팝업*/
/*광고박스*/
	.ad-box-banner{
		border-radius:10px;
		background:#cecece;
		overflow:hidden;
	}
	.ad-box-banner img{
		width:100%;
		cursor:pointer;
	}
/**/
/*입력형 팝업*/
	.user_info_box{
		font-family: NotoSansBold;
		position:fixed;top:0px;left:0px;
		width:100%;height:0px;
		background:rgba(0,0,0,0.6);
		overflow:hidden;
		max-width:720px;
		left: 50%;transform: translate(-50%, 0%);
	}
	.user_info_box .rect{
		position:absolute;top:0;
		width: 90%;height: 100%;
		max-width:720px;
		left: 50%;transform: translate(-50%, 0%);
		overflow: auto;
	}
	.user_info_box #uPOPclose {
		right: 28px;
		height:20px;
		margin-top:5px;
	    position: absolute;
	}

	.user_info_box .formBOX{
		margin-top:60px;
		background:#FFF;
		padding:20px;
		border-radius:15px;
	}
	.user_info_box .formBOX div{width:100%;text-align:center;clear:both;}
	.user_info_box .formBOX ul{
		position:relative;
		/*margin-top:20px;*/
		font-size:15pt;
		font-weight:bold;
		color:#626161;
		height:45px;
	}
	.user_info_box .formBOX ul li{float:left;line-height:2.8rem;text-align:left}
	.user_info_box .formBOX ul li img{width:1rem}
	.user_info_box .formBOX ul li select{
		width:30%;margin-right:1%;
		border-radius:0px;
		padding:5px;
		border-radius:5px;
		border:none;
		background:#e0e0e0;
		color:#44106c;
		height:2.2rem;
		font-size:1rem;
		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
	}
	.user_info_box .formBOX ul li select option:checked,
	.user_info_box .formBOX ul li select option:hover {
	}
	.user_info_box .formBOX ul li.iNAME {
		min-width:90px;text-align:left
	}

	.user_info_box .formBOX ul li.iCONT {
		font-size:12pt;
	}

	.user_info_box .formBOX ul dd{
		float:left;
		text-align:left;
		font-size:1.12rem;
		padding-right:8px;
	}
	.user_info_box .formBOX .popAgree img{

	}

	.user_info_box .formBOX .title{
		font-size: 20pt;
		font-weight: bold;
		border-bottom: 1px solid #000000;
		padding: 0px 0px 20px;
		color:#44106c;
	}

	.user_info_box .formBOX .inform{
	}

	.user_info_box .formBOX .informLine{
		border-bottom: 1px solid #000000;
		padding: 40px 0px 0px;
	}
	.user_info_box .formBOX .notice{
		font-size:12pt;letter-spacing:-2px;
		line-height:1.5em;
		text-align:left;
		padding-left:10px;
		padding-top:20px;
	}
	.user_info_box .formBOX .formBTN{
		border-radius:10px;
		background:#8b4cbd;
		padding:10px;
		color:#FFF;
		font-weight:bold;
		width:100%;
		margin:30px 0px 0px;
		font-size:1.3rem;
	}
/**/

/* 상단바 */
	.topbar_df{
		position:relative;
		z-index:9999;
		width:100%;height:50px;max-width:720px;
		padding:0px 15px;margin:auto;
		line-height:18px;
	}
	.topbar_df .tbL{
		width:15%;
		text-align:left;
		/*transform: translate(0%, -30%);*/
	}
	.topbar_df .tbC{
		width:70%;text-align:center;
		font-family: 'Noto Sans KR', sans-serif;
		font-size: 12pt;
		font-weight:bold;
		line-height:18px;
		/*transform: translate(0%, -30%);*/
	}
	.topbar_df .tbR{
		width:15%;
		text-align:right;
		/*transform: translate(0%, -30%);*/
	}

	.topbar_fix{
		position:fixed;
		width:100%;height:50px;
		max-width:720px;left:50%;transform: translate(-50%, 0);
		background:#FFF;
		padding:17px;
		border-bottom:1px solid #cecece;
		box-sizing:border-box;
	}
	.topbar_fix div{float:left;}
	.topbar_fix img{cursor:pointer;height:18px;display: inline;vertical-align: top;}
/**/

/* 옵션 */
	.hide {display:none;}
	.bold {font-weight:bold;}

	.f09{font-size:9pt;}

	.w60p{width:60%;margin:0px 20%}
	.w85p{width:85% !important}
	.w100 {width:100px !important;}
	.w200 {width:200px !important;}
	.w230 {width:230px !important;}
	.w250 {width:250px !important;}
	.mx700 {max-width:720px;}

	.w30p {width:30% !important;}
	.w50p {width:50% !important;}
	.w70p {width:70% !important;}
	.w95p {width:95% !important;}
	.w100p {width:100% !important;}
	.text-center{text-align:center !important;}

	.posCENTER{position:absolute;left:50%;transform: translate(-50%,0);}

	.fwhite{color:#FFF !important;}
/**/

/* etc */
	.game-box-txt{background:#cecece;padding:20px 0px;cursor:pointer}
	.game_list_info_box_etc{
		position: absolute;
		width: 95%;
	}
	.alert_notice,
	.alert_notice li{font-family: 'Noto Sans KR', sans-serif;font-weight:normal;position:relative;list-style:disc}
	.alert_notice li .dot{
    font-size: 2pt;
    padding-right: 8px;
    position: absolute;
    transform: translate(0px, -50%);
    height: 100%;
}


	.gameAni-BOX{position:absolute;width:100%;height:100%;}
/**/

/* media set */
	@media (max-width: 359px) {
		html {
			font-size: 14px;
		}
	}
	@media (min-width: 360px) {
		html {
			font-size: 15px;
		}
	}
	@media (min-width: 400px) {
		html {
			font-size: 16px;
		}
	}
	@media (min-width: 500px) {
		html {
			font-size: 20px;
		}
	}
	@media (min-width: 560px) {
		html {
			font-size: 22px;
		}
	}
	@media (min-width: 719px) {
		html {
			font-size: 28px;
		}
	}
/**/

/* effect */
	/* 좌우 움직임 */
		.row_move{
			position: relative;
			animation-name: loop;
			animation-duration: 10s;
			animation-iteration-count: infinite;
		}
	/**/

	/* 깜빡이*/
		.ani_blink {
			animation: blink-effect 1s step-end infinite;
		}
		.ani_blink_bg{position:absolute;}
	/**/
	/* 좌우 움직임 3초 */
		.slowMOVE_01{
			position: relative;
			animation-name: slowROW_01;
			animation-duration: 3s;
			animation-iteration-count: infinite;
		}
	/**/
	/* 좌우 움직임 8초 */
		.slowMOVE_02{
			position: relative;
			animation-name: slowROW_02;
			animation-duration: 8s;
			animation-iteration-count: infinite;
		}
	/**/
	/* 좌우 움직임 6초 */
		.slowMOVE_03{
			position: relative;
			animation-name: slowROW_02;
			animation-duration: 6s;
			animation-iteration-count: infinite;
		}
	/**/
	/* 좌우 움직임 8초 */
		.slowMOVE_04{
			position: relative;
			animation-name: slowROW_01;
			animation-duration: 8s;
			animation-iteration-count: infinite;
		}
	/**/
	/* 바운스 1초 */
		.bounce-up {
			animation-name: bounce;
			animation-duration: 1s;
			animation-iteration-count: infinite;
		}
	/**/
	/* 바운스 6.5초 */
		.bounce-up2 {
			animation-name: bounce;
			animation-duration: 1.5s;
			animation-iteration-count: infinite;
		}
	/**/
	/*바운스 2초 */
		.bounce-float {
			animation-name: bounceFloat;
			animation-duration: 2s;
			animation-iteration-count: infinite;
		}
	/**/
	/* 좌우 띠용 1.5 */
		.rubber{
			animation-name: rubberBand;
			animation-duration: 1.5s;
			animation-iteration-count: infinite;
		}
	/**/
/**/

/* ANI OPTION */
	@keyframes loop{
		0%{
			top:0px;
			left:-15%;
		}
		40%{
			top:0px;
			left:15%;
		}
		60%{
			top:0px;
			left:-15%;
		}
		80%{
			top:0px;
			left:15%;
		}
		100%{
			top:0px;
			left:-15%;
		}
	}
	@keyframes slowROW_01{
		0%{
			top:0px;
			left:-10%;
		}
		25%{
			top:0px;
			left:10%;
		}
		50%{
			top:0px;
			left:0%;
		}
		75%{
			top:0px;
			left:10%;
		}
		100%{
			top:0px;
			left:-10%;
		}
	}
	@keyframes slowROW_02{
		0%{
			top:0px;
			left:-5%;
		}
		25%{
			top:0px;
			left:10%;
		}
		50%{
			top:0px;
			left:0%;
		}
		75%{
			top:0px;
			left:10%;
		}
		100%{
			top:0px;
			left:-5%;
		}
	}
	@keyframes bounce {
		from,
		20%,
		53%,
		80%,
		to {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}
		40%,
		43% {
			-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
			animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
			-webkit-transform: translate3d(0, -20px, 0);
			transform: translate3d(0, -20px, 0);
		}
		70% {
			-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
			animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
			-webkit-transform: translate3d(0, -15px, 0);
			transform: translate3d(0, -15px, 0);
		}
		90% {
			-webkit-transform: translate3d(0, -4px, 0);
			transform: translate3d(0, -4px, 0);
		}
	}
	@keyframes bounceIn {
	  0% {
		transform :scale(2,2);
		opacity:1;
	  }

	  10%,
	  20% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
		opacity:1;
	  }

	  30%,
	  50%,
	  70%,
	  90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		opacity:1;
	  }

	  40%,
	  60%,
	  80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		opacity:1;
	  }

	  to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
		opacity:1;
	  }
	}
	@keyframes blink-effect {
	  50% {
		opacity: 0;
	  }
	}
	@-webkit-keyframes rubberBand {
	  from {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	  }

	  30% {
		-webkit-transform: scale3d(1.25, 0.75, 1);
		transform: scale3d(1.25, 0.75, 1);
	  }

	  40% {
		-webkit-transform: scale3d(0.75, 1.25, 1);
		transform: scale3d(0.75, 1.25, 1);
	  }

	  50% {
		-webkit-transform: scale3d(1.15, 0.85, 1);
		transform: scale3d(1.15, 0.85, 1);
	  }

	  65% {
		-webkit-transform: scale3d(.95, 1.05, 1);
		transform: scale3d(.95, 1.05, 1);
	  }

	  75% {
		-webkit-transform: scale3d(1.05, .95, 1);
		transform: scale3d(1.05, .95, 1);
	  }

	  to {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	  }
	}
	@keyframes bounceFloat {
	  from,
	  20% {
	  }
	  40%,
	  to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	  }
	  50% {
		-webkit-transform: translate3d(0, -4px, 0);
		transform: translate3d(0, -4px, 0);
	  }
	  70%{
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	  }
	}
/**/

/* adm tools */
	.adm_info_data{
		position:fixed;
		top:5%;
		z-index:9999999;
		background:#FFF;
		opacity:0.8;
		font-size:8pt;
		word-wrap:break-word;
		width:400px;
	}
	.adm_info_data li {
		list-style:none;
	}
	.adm_plus_game{
		padding: 5px;
		border: 1px solid #000;
		border-radius: 8px;
		margin: 8px;
		cursor: pointer;
	}
/**/