@font-face {
	font-family: 'GmarketSansMedium';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GmarketSansBold';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.match_top {width:100%; line-height:0;}
.match_top > img {width: auto; max-width: 100%; margin: auto; display: block;}
.match_body {position:relative; width:100%; overflow: hidden;}
.match_body .match_bg {width:100%;}
.match_body .match_bg > img {width: auto; max-width: 100%; margin: auto; display: block; min-height: 510px;}
.match_body .match_cont {position:absolute; width:86.667%; height:100%; top:46px; left:6.6%;}

.match_body .match_cont .timeWrap {width:100%; text-align:center;}
.match_body .match_cont .time_cont {position: relative; display: inline-block; margin:0 auto 40px; padding:2% 5% 1% 10%; font-family: 'GmarketSansBold';font-size:40px;color: #fff;letter-spacing:-2px;background: #af6b44; border-radius: 100px;line-height:1;}

.match_body .match_cont .time_cont:before {content: ''; position: absolute; left:0; top:37%; transform: translate(-25%, -48%); display:inline-block; width:99px; height:104px; background: url('/webzine/202602/img/match_img/match_clock.png') no-repeat center center; }
.match_body .match_cont .time_cont span { display:inline-block; margin-left:25px; font-family: 'GmarketSansBold'; font-size:45px; color: #fff; letter-spacing:-2px; vertical-align: middle; }
 
.match_body .match_cont .match_box {position:relative; background: url('/webzine/202602/img/match_img/game_screen_bg.png') top left; border-radius:20px; background-size: cover;}	
.match_body .match_cont .match_box .game_screen_wrap {position:relative; text-align:center; padding:8%;}
.match_body .match_cont .match_box .game_screen {position:relative; z-index:1;}
.game_screen .game_table {border-collapse: collapse; border-spacing: 0; width: 100%;}
.game_screen .game_table td {position: relative;}
.pad { position: absolute; left: 0; top: 0; width:96.79%; height:100%; padding-bottom:116.52%; background:url('/webzine/202602/img/match_img/match_card_blank.png') no-repeat center; background-size:cover; box-sizing: border-box;}
.pad img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.panel {
	width: 100%;
	position: relative;
	font-size: 5.8em;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	margin-bottom:6px !important;
	padding-bottom: 116.52%;
	cursor: pointer;
}
.panel .front {
	position: absolute;
	top: 0;
	z-index: 900;
	width: 100%;
	height: 100%;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.panel.flip .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.panel .back {
	position: absolute;
	top: 0;
	z-index: 800;
	width: inherit;
	height: inherit;
	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}

.game_screen_wrap .game_info:not(.active) { display:none; }
.game_screen_wrap .game_info .shadow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000000; opacity: 0.7; z-index: -1; border-radius:20px;}
.game_screen_wrap .game_info .btn-start { opacity: 1;}
.game_screen_wrap .game_info { position:absolute; left: 0; top: 0;width: 100%; height: 100%; z-index: 2;}
.game_screen_wrap .game_info .game_info_con {position:absolute; top:50%; margin-top:-205px; left:50%; margin-left:-140px;}
.game_screen_wrap .game_info#restart_screen .game_info_con {margin-left:-165px;}
.game_screen_wrap .game_info#app_screen .game_info_con {margin-left:-200px;}
.game_screen_wrap .game_info .game_info_con > .tit {width:100%; line-height:1; margin:0;}
.game_screen_wrap .game_info .game_info_con > .march-start {margin-top:45px; cursor:pointer;}
.game_screen_wrap .game_info .game_info_con > .btn-retry {margin-top:45px; cursor:pointer;}
.game_screen_wrap .game_info .game_info_con > .btn-app {margin-top:45px; cursor:pointer;}

.game_screen_wrap .popup {display:none; position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border-radius:20px; z-index:1;}
.game_screen_wrap .popup.app {background: rgba(38,38,38,0.7);}
.game_screen_wrap .popup .inner { display: table; width:46%; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -23%; box-sizing: border-box;}
.game_screen_wrap .popup.app .inner { width:60%; margin-left:-30%;}
.game_screen_wrap .popup .cont {display: table-cell;vertical-align: middle}
.game_screen_wrap .popup .article {background: #fa7376;border-radius: 15px;color: #fff;font-size: 17px;line-height: 1.3;padding: 39px 42px;}
.game_screen_wrap .popup .txt {margin: 20px 0 19px;border-bottom: 1px solid #fff;padding-bottom: 40px;letter-spacing: -1px; font-weight: normal;}
.game_screen_wrap .popup .btn_yn {padding: 9px 0 22px;}
.game_screen_wrap .popup .btn_yn button {width: 37.465%;}
.game_screen_wrap .popup .btn_yn button:first-child {margin-right:20px;}

.match_appform .form-group {padding-bottom:10px;}
.match_appform > .form-group > label {color:#fff; font-family:'Noto Sans KR'; font-weight:400; font-size:18px; width:15%;}
.match_appform input[type="text"] {width:80%; font-size:16px; padding:6px 6px; height:30px;line-height: 1.33;}
.match_appform > .form-group > p {color:#fff; line-height:1; padding-top:10px; text-align:center; margin-bottom:10px}
.match_appform .match_agree {width: 62%; margin: 0 auto; display: table;}
.match_appform .match_agree > ul > li {float:left; display:inline-block; margin:0; padding:0 10px 20px;}
.match_appform .match_agree > ul > li > label {font-family:'Noto Sans KR'; font-weight:400; font-size:16px;}

.match_appform .popup.app .result_submit_btn {width:100%; height: 50px; font-size: 20px; font-weight: bold;}

@media (max-width:1335px) {
	.match_body .match_cont .time_cont {font-size:30px; padding:2% 5% 1% 12%;}
	.match_body .match_cont .time_cont span {font-size:35px;}
	.match_body .match_cont .time_cont:before {width:28%; padding-bottom:30%; height: initial; background-size: contain;}
}

@media (max-width:1068px) {
}

@media (max-width: 960px) {
	.match_body .match_cont .match_box .game_screen_wrap {padding:5% 4% 5% 5%;}
	.match_body .match_cont .match_box	{ top: -10px;}
}

@media (max-width: 640px) {
	.match_body .match_cont {width:90%; left:5.6%; top: 30px;}
	.match_body .match_cont .time_cont {font-size:25px; margin: 0 auto 20px;}
	.match_body .match_cont .time_cont span {font-size:30px; margin-left:15px;}
	.match_body .match_cont .time_cont:before {background-size: contain;}
	.match_body .match_cont .match_box .game_screen_wrap {padding:4% 3% 3% 4%;}
	.game_screen_wrap .game_info .game_info_con {margin-top:-145px; margin-left:-155px;}
	.game_screen_wrap .game_info .game_info_con > .tit {width:inherit;}
	.game_screen_wrap .game_info .game_info_con > .tit > img {width:auto; max-width:80%;}
	.game_screen_wrap .game_info .game_info_con > .march-start > img {width:auto; max-width:70%;}
	.game_screen_wrap .game_info .game_info_con > .btn-retry > img {width:auto; max-width:70%;}
	.game_screen_wrap .game_info .game_info_con > .btn-app > img {width:auto; max-width:80%;}

	.game_screen_wrap .game_info#start_screen .game_info_con		{ margin-left: -135px; margin-top: -76px;}
	.game_screen_wrap .game_info#restart_screen .game_info_con		{ margin-left: -160px; margin-top: -182px;}
	.game_screen_wrap .game_info#app_screen .game_info_con			{ margin-top: -182px;}

	/*.match_body .match_bg {background-color:#9E563E; padding-top:8%;}*/
}

@media (max-width:480px) {
	.match_body .match_cont .time_cont {font-size:20px; padding:2% 5% 1% 12%; border: 2px solid #f1cf4c;}
	.match_body .match_cont .time_cont span {font-size:25px;}
	/*.match_body .match_bg {background-color:#9E563E; padding-top:15%;}*/
	.match_body .match_cont .match_box {background:#90A731; border:1px solid #000;}

	.game_screen_wrap .game_info#app_screen .game_info_con		{ margin-left: -156px; margin-top: -120px;}
	.game_screen_wrap .game_info#restart_screen .game_info_con { margin-top: -120px; margin-left: -156px;}
	.game_screen_wrap .game_info .game_info_con {margin-top:-40px; margin-left: -134px;}
	.game_screen_wrap .game_info#app_screen .game_info_con { margin-left:-174px;}
	.game_screen_wrap .game_info .game_info_con > .tit > img {width:auto; max-width:50%;}
	.game_screen_wrap .game_info .game_info_con > .march-start {margin-top:20px;}
	.game_screen_wrap .game_info .game_info_con > .btn-retry {margin-top:20px;}
	.game_screen_wrap .game_info .game_info_con > .btn-app {margin-top:20px;}
	.game_screen_wrap .game_info .game_info_con > .march-start > img {width:auto; max-width:40%;}
	.game_screen_wrap .game_info .game_info_con > .btn-retry > img {width:auto; max-width:40%;}
	.game_screen_wrap .game_info .game_info_con > .btn-app > img {width:auto; max-width:40%;}
}