@charset "utf-8";
/* Malgun Web Standard Team KKS, PJS */

/* 단락 ::[컨텐츠 공통] */
.section{position:relative;background-color:#fff}

/* 컨텐츠 공통 */
.evt_inner{position:relative;max-width:960px;margin:0 auto}
.evt_inner.v2{max-width:2560px}
section{text-align:center}
.evt_content.bg1{height:34px;background:url(../img/bg_bar1.jpg) repeat-x;background-size:contain}
.evt_content.bg2{height:40px;background:url(../img/bg_bar2.jpg) repeat-x;background-size:contain}

/* 레이어팝업 공통 */
body.no_scroll{overflow-y:hidden}
.dimmed{overflow-y:scroll;position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background-color:rgba(0,0,0,0.8)}
.dimmed.no_show{z-index:-10;opacity:0}

.header {padding:1.35rem 0 1rem; border-bottom:1px solid #d6d6d6}
.logo {display: inline-block;margin-bottom: 0.75rem; position: relative; left: -.7rem;}
.gnb {display:table; width:100%;  font-size:0; padding:0 1.5rem 0; box-sizing:border-box; table-layout:fixed;}
.gnb li {display:table-cell; vertical-align:middle;}
.gnb li a {display:block; font-family:'Noto Sans KR', sans-serif; font-size:0.875rem; color:#333; font-weight:700}
.gnb .item_width {width: 21%;}
#top {display: block; width: 2.875rem; position: fixed; display: block; right: 1.25rem;}

/******************
	컨텐츠
******************/
.game_wrap {
	position: relative;
	height: 21.25rem;
	padding: 1rem;
	margin: 0  2.5rem;
	border:  0.25rem solid #000;
	background-color: #fff;
	box-sizing: border-box;
	border-radius: 0.8rem;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.4);
}

.wordOuter {
	height: 104%;
}

.wordInner > span {
	position: relative;
	display: inline-block;
	width: 3.6%;
	padding: .3vw 0;
	cursor: pointer;
}

.wordInner >span:before,
.wordInner >span:after {
	position: absolute;
	content: '';
	transform-origin: right;
	top: .1rem;
	transform: translateX(-50%);
}

.wordInner >span.wrong:before,
.wordInner >span.wrong:after {
	width: .25rem;
	height: 1.53rem;
	left: 45%;
	background-color: #ff0000;
	transform-origin: center;
}

.wordInner >span.wrong:before {
	transform: rotate(45deg);
}

.wordInner >span.wrong:after {
	transform: rotate(-45deg);	
}

.wordInner >span.answer:before {
	left: 50%;
	width: 1.35rem;
	height: 1.35rem;
	left: 52.25%;
	border: .2rem solid #ff0000;
	border-radius: 50%
}

.gamePop {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	bottom: -0.25rem;
	left: -0.25rem;
	border-radius: 0.8rem;
	background-color: #fff;
	border:  0.25rem solid #000;
	opacity: 0;
	visibility: hidden;
}

.gamePop img {
	width: 100%;
}

.gamePop.visible {
	opacity: 1;
	visibility: visible;
}

.wordInner > span.lg {
	width: auto;
	padding:.23vw 0.1rem;
	letter-spacing: 0;
}

.timer {
	display: inline-block;
	background-color: #000;
	color: #fff;
	line-height: 1;
	padding: 0.49rem 2.7rem 0.86rem;
	border-radius: 0 0 .8rem .8rem;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}

.timer > * {
	line-height: 1;
	vertical-align: middle;
	display: inline-block;
}

.timer > em {
	font-size: 1.5rem;
	margin-right: .5rem;
}

.timer .time_wrap  {
	margin-top: -.2rem;
	font-size: 2.25rem;
	font-weight: 500;
}

.timer .time_wrap > span {
	margin: 0 2px;
}

/******************
	footer
******************/
#footer .inner_content {max-width:960px; margin:0 auto; padding:1.55rem 1.25rem 2.5rem; text-align:left}
.title_footer h5 {font-size:1.25rem; margin-bottom: .8rem; color:#000;font-weight:600}
.list_footer{margin-top:.25rem}
.list_footer>li{line-height: 1.8;letter-spacing: -0.12rem;}
.list_footer>li>span{display:block;overflow:hidden}
.list_footer>li .list_pointer{float:left;margin-right:0.5vw}
.footer_info > div{font-size:0}

/******************
	미디어 쿼리
******************/
@media all and (max-width: 767px){
	.wordInner > span  {
		width: 6%;
		padding: .35vw 0;
	}

	.wordInner > span.lg {
		width: 8% !important
	}
}

@media all and (min-width:768px) and (max-width:1024px){
	.wordInner > span {
		width: 5.5%;
		padding: .6vw 0;
	}

	.wordInner > span.lg {
		width: 6.8% !important;
	}
}

@media all and (max-width:960px){
	.logo img {
		width: 5.65rem;
	}

	.game_wrap {
		height: 25.25rem;
	}

	.timer {
		padding: 0.69rem 2.7rem 0.66rem;
	}
	/* footer */
	.footer_btn_member {display:inline-block;width:7rem}
	.footer_copy img {width:15rem}
}

@media all and (max-width:320px){
	.gnb{padding:0 0 0 0.5rem;}
	.gnb li a{letter-spacing:-1.5px;}
}