@charset "UTF-8";

@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 100;
	src: local('※'),
		url('../res/font/NanumGothic-Bold.woff') format("woff"),
		url('../res/font/NanumGothic-Bold.otf') format("otf");
}

/**================================
 * @date: 2023-11-13
 * @description: 객체 함수 정의
 * @copyright: 김동근
 * @version:1.0
 =================================**/

/**================================
 * 공통요소
 =================================**/
/**
 * 	스크롤 생성을 위한 컨테이너
 */
#container{
	position:relative;
	width:100%; height:100%;
	overflow:auto;
}
/**
 * 	스크롤 내부 컨텐츠 영역 (스크롤바 제외를 위해 필요)
 */
#content{
	position:relative;
	width:100%; height:100%;
}
/**
 * 	콘텐츠 뷰
 */
#view{
	overflow:hidden;
	position:relative;
	width:1920px; height:1080px; 
	background-size:100% 100%;
}

/**================================
 * 내부 디자인 영역
 =================================**/
 


[data-screen="quiz"]{
	display: none;
	width: 100%; height: 100%;
	background: url('../res/img/퀴즈_문제_bg.png') 0 0 no-repeat;
}

[data-screen="quiz"] .quizBox{
	position: absolute;
	top:187px; left: 42px;
	width: 1141px; height: 893px; 
}


 
/* 퀴즈 타입 타이틀 */
[data-screen="quiz"] [quiz-title]{
	position: absolute;
	top:50px; left: 50px;
	width: 500px; height: 121px;
}
[data-screen="quiz"] [quiz-title="ox"]{
	background: url('../res/img/ox_문제.png') 0 0 no-repeat;
	background-size: contain;
}
[data-screen="quiz"] [quiz-title="write"] {
	background: url('../res/img/빈칸넣기_문제.png') 0 0 no-repeat;
	background-size: contain;
}   
[data-screen="quiz"] [quiz-title="choice"] {
	background: url('../res/img/단어고르기_문제.png') 0 0 no-repeat;
	background-size: contain;
}


[data-screen="quiz"] [data-quiz]{
	display: none;
	position: absolute;
	top: 150px; height: 740px;
	padding: 60px;
}
[data-screen="quiz"] [data-quiz] p { 
	font-family:'NanumGothic'; font-size: 70px;
	line-height: 100px;
}

/* 빈칸 채우기 퀴즈 */
[data-screen="quiz"] [data-quiz='write'] span {
	display: inline-block;
	height: 100px;
	position: relative;
	border: 6px solid #ff8400;
	border-radius: 10px; padding: 0px 20px;
	line-height:80px; color: #cbcbcb;
	background-color: #fff;
}
[data-screen="quiz"] [data-quiz='write'] span > input{
	position:absolute;
	top:0px; left: 0px;
	width: 100%; height: 100%;
	font-size: 70px; font-family: 'NanumGothic';
	color: #df2a00; padding: 0px 20px;
	background-color: transparent;
}
[data-screen="quiz"] [data-quiz='write'] span>input.ing {
	background-color: #fff;
}
[data-screen="quiz"] [data-quiz='choice'] a[bogi]{
	position: relative;
}
[data-screen="quiz"] [data-quiz='choice'] a[bogi].on::after {
	content: '';
    display: inline-block;
    position: absolute;
    width: 145%; height: 100px;
	top: 0px; left: 50%; 
	transform: translateX(-50%);
	border: 6px solid red;
	border-radius: 100%; 
}


/* 정오답 이벤트 */
[data-screen="quiz"] [answer-event] {
	display: none;
	position: absolute;
	width: 100%; height: 100%;
} 

[data-screen="quiz"] [answer-event="correct"] {
	background: url('../res/img/정답입니다.png');
}

[data-screen="quiz"] [answer-event="wrong"] {
	background: url('../res/img/다시풀어보세요.png');
}

.gourdState{
	position: absolute;
	top:0px; right: 0px;
	width: 670px; height: 1080px;
}

 

/**================================
 * 버튼 디자인
 =================================**/
[data-screen] button[data-btn]{
	position: absolute;
	width: 208px; height: 86px;
}
[data-screen="intro"] button[data-btn="start"]{ 
	top: 840px; left: 750px; 
	width:435px; height: 164px;
	background-image: url('../res/btn/퀴즈_스타트_btn.png'); 
}
[data-screen="quiz"] button[data-btn="answerCheck"] { 
	top: 70px; right: 70px;
	background-image: url('../res/btn/정답_보기_btn.png');
}
[data-screen="quiz"] button[data-btn="nextQuiz"] {   
	display: none;
	top: 70px; right: 70px;
	background-image: url('../res/btn/다음_문제_btn.png');
} 
[data-screen="ending"] button[data-btn="replay"]{  
	display: none;
	right: 80px; bottom: 80px;
	width:435px; height: 164px;
	background-image: url('../res/btn/btn_엔딩-처음으로.png'); 
}

[data-screen="quiz"] .oxWrap{  
	position: absolute;
	left:284px ;bottom: 70px;
	text-align: center;
}
[data-screen="quiz"] .oxWrap [bogi]{
	width: 206px; height: 206px;
	margin: 0px 40px;
}
[data-screen="quiz"] .oxWrap [bogi="o"]{
	background-image: url('../res/btn/o.png');
}
[data-screen="quiz"] .oxWrap [bogi="x"] {
	background-image: url('../res/btn/x.png');
}