/* 2021-08-27 해양박람회 게임 css */
*{
	font-family: 'Noto Sans KR',sans-serif;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#container.sub_new_intro01_game {
	position: relative;
	background: #aeaeae;
}
#container.sub_new_intro01_game audio{
	/*display:none;*/
}

#container.sub_new_intro01_game .game_box{
	position:relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background-image: url(/_public/images/new_intro_game/bg/bg.apng);
	background-size: 1300px 730px;
	background-repeat: no-repeat;
	position: absolute;
	z-index: 1;
}
#container.sub_new_intro01_game .game_box .bg{
	width: 1300px;
	height: 730px;
	position: absolute;
}
@media( orientation: portrait ){
	body{overflow: hidden !important;display: initial;}
	html{
		transform:rotate(-90deg);
		transform-origin:top left;
		position:absolute;
		top:100%;
		left:0;
		overflow: hidden !important;
		width: 100%;
		height: 100%;
	}
	#container.sub_new_intro01_game .game_box{
		width: 100vh !important;
		height: 56.25vh !important;
		max-height: 100vw !important;
		max-width: 177.78vw !important;
		background-size: 100% 100% !important;
	}
	#container.sub_new_intro01_game .game_box .quiz_box .board .text .qust{
		font-size: 6.5vw !important;
	}
	#container.sub_new_intro01_game .game_box .quiz_box .board_help .text .help{
		font-size: 3.5vw !important;
	}
	#container.sub_new_intro01_game .game_box .title_box{
		height: 100vw !important;
		min-width: auto !important;
	}
	#container.sub_new_intro01_game .game_box .result_box .board .top div[class^=res_box_] .num{
		font-size: 2.2vw !important;
		line-height: 4.2vw !important;
	}
	#container.sub_new_intro01_game .game_box .result_box .board .top div[class^=res_box_] .text{
		font-size: 3.4vw !important;
		line-height: 9.2vw !important;
	}
	#container.sub_new_intro01_game .game_box .result_box .board .btm{
		font-size: 5.8vw !important;
		line-height: 9.2vw !important;
	}
	#container.sub_new_intro01_game .game_box .quiz_box .score{
		font-size: 115% !important;
		padding: 0.95%;
	}
}

/* 타이틀 */
#container.sub_new_intro01_game .game_box .title_box{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: block;
}
#container.sub_new_intro01_game .game_box .title_box *{
	position: absolute;
}
#container.sub_new_intro01_game .game_box .title_box .title{
	transform: translate(59%, 34%);
}
#container.sub_new_intro01_game .game_box .title_box .char_b{
    transform:translate(121%, 90%);
}
#container.sub_new_intro01_game .game_box .title_box .char_p{
    transform:translate(225%, 81.5%)
}
#container.sub_new_intro01_game .game_box .title_box .btn{
	transition: all ease 0.8s 0s;
	opacity: 0;
    transform: translate(157%, 552%);
}
#container.sub_new_intro01_game .game_box .title_box .btn.show{
	cursor: pointer;
	opacity: 1;
}
/* // 타이틀  */

/* 퀴즈 */

#container.sub_new_intro01_game .game_box .quiz_box{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	display: none;
}
#container.sub_new_intro01_game .game_box .quiz_box div{
	position: absolute;
}

/* 퀴즈 보드판 */
#container.sub_new_intro01_game .game_box .quiz_box .board{
	width: 63%;
	height: 51.5%;
	background-image: url("/_public/images/new_intro_game/comm/board.png");
	background-size: 100%;
	background-repeat: no-repeat;
	transform:translate(30%, 20%);
	display: table;
}
#container.sub_new_intro01_game .game_box .quiz_box .pass_btn{
	width:100%;
	height:50%;
	position: absolute;
	z-index: 3;
}
#container.sub_new_intro01_game .game_box .quiz_box .score{
	width: 9.5%;
    height: 9.5%;
    position: absolute;
    background-image: url(/_public/images/new_intro_game/comm/score.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transform: translate(930%, 30%);
    z-index: 2;
	color: #fff;
    font-size: 170%;
    font-weight: bold;
    padding: 1.15%;
    text-align: center;
}
#container.sub_new_intro01_game .game_box .quiz_box .pass_btn .btn_prev{
	/* display:none; */
	position: absolute;
	transform: translate(75%, 190%);
	cursor: pointer;
}
#container.sub_new_intro01_game .game_box .quiz_box .pass_btn .btn_next{
	/* display:none; */
	position: absolute;
	transform: translate(1250%, 190%);
	cursor: pointer;
}
#container.sub_new_intro01_game .game_box .quiz_box .board .text{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
    position: static;
	padding: 0 10% 1% 7.5%
}
#container.sub_new_intro01_game .game_box .quiz_box .board .text .qust{
	font-weight: bold;
	font-size: 3rem;
}
#container.sub_new_intro01_game .game_box .quiz_box .board .text .qust red{
	color:red;
}
/*
#container.sub_new_intro01_game .game_box .quiz_box .prev{
	transition: all ease 0.7s 0s;
	transform:translate(-101%, 20%) !important
}
#container.sub_new_intro01_game .game_box .quiz_box .next{
	transition: all ease 0.7s 0s;
	transform:translate(30%, 20%) !important
}
*/
#container.sub_new_intro01_game .game_box .quiz_box .board.left{
	transform:translate(-101%, 20%) !important
}
#container.sub_new_intro01_game .game_box .quiz_box .board.right{
	transform:translate(159%, 20%) !important;
}
#container.sub_new_intro01_game .game_box .quiz_box .board_help.left{
	transform:translate(-101%, 13%) !important
}
#container.sub_new_intro01_game .game_box .quiz_box .board_help.right{
	transform:translate(159%, 13%) !important;
}
#container.sub_new_intro01_game .game_box .quiz_box .move{
	transition: all ease 0.7s 0s;
}
#container.sub_new_intro01_game .game_box .quiz_box .result{
	height: 100%;
	width: 100%;
	left: 0;
    top: 0;
}
#container.sub_new_intro01_game .game_box .quiz_box .board .result .result_o{
	display:none;
	position: absolute;
	transform: translate(39%, -12%);
}
#container.sub_new_intro01_game .game_box .quiz_box .board .result .result_x{
	display:none;
	position: absolute;
	transform:translate(0, 0);
}

#container.sub_new_intro01_game .game_box .quiz_box .board_help{
	width: 63%;
	height: 55%;
	background-image: url("/_public/images/new_intro_game/comm/board_help.png");
	background-size: 100%;
	background-repeat: no-repeat;
	transform:translate(30%, 13%);
	display: table;
}
#container.sub_new_intro01_game .game_box .quiz_box .board_help .text {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	position: static;
	padding: 7% 10% 0 7.8%
}
#container.sub_new_intro01_game .game_box .quiz_box .board_help .text .help{
	font-weight: bold;
	font-size: 1.7rem;
}
/* // 퀴즈 보드판 */

/* 퀴즈 OX 버튼 */
#container.sub_new_intro01_game .game_box .quiz_box .btns{
    transition: all ease 0.8s 0s;
    z-index: 2;
}
#container.sub_new_intro01_game .game_box .quiz_box .btns.show{
    opacity: 1;
}
#container.sub_new_intro01_game .game_box .quiz_box .btns.hide{
    opacity: 0;
}
#container.sub_new_intro01_game .game_box .quiz_box .btns.show img[class^=btn_]{
	cursor: pointer;
}
#container.sub_new_intro01_game .game_box .quiz_box .btns {
	height: 100%;
	width: 100%;
}
#container.sub_new_intro01_game .game_box .quiz_box .btns .btn_o{
    transform:translate(134%, 173.5%)
}
#container.sub_new_intro01_game .game_box .quiz_box .btns .btn_x{
    transform: translate(171%, 173.5%)
}
/* // 퀴즈 OX 버튼 */

/* 퀴즈 캐릭터 */
#container.sub_new_intro01_game .game_box .char{
	width: 100%;
	height: 100%;
	z-index: 1;
}
#container.sub_new_intro01_game .game_box .char .hide{
	display: none;
}
#container.sub_new_intro01_game .game_box .char .show{
	display: block;
}
#container.sub_new_intro01_game .game_box .quiz_box .char .idle,
#container.sub_new_intro01_game .game_box .quiz_box .char .happy,
#container.sub_new_intro01_game .game_box .quiz_box .char .sad{
	width: 100%; height: 100%;
}
#container.sub_new_intro01_game .game_box .quiz_box .char .idle .char_b{
	transform: translate(35%, 198%);
	position: absolute !important;
}
#container.sub_new_intro01_game .game_box .quiz_box .char .idle .char_p{
    transform: translate(460%, 193%);
    position: absolute !important;
}
#container.sub_new_intro01_game .game_box .quiz_box .char .happy .char_b{
    transform: translate(35%, 198%);
    position: absolute !important;
}
#container.sub_new_intro01_game .game_box .quiz_box .char .happy .char_p{
    transform: translate(460%, 193%);
    position: absolute !important;
}
#container.sub_new_intro01_game .game_box .quiz_box .char .sad .char_b{
    transform: translate(35%, 198%);
    position: absolute !important;
}
#container.sub_new_intro01_game .game_box .quiz_box .char .sad .char_p{
    transform: translate(460%, 193%);
    position: absolute !important;
}
/* // 퀴즈 캐릭터  */

/* // 퀴즈  */

/* 완료 */
#container.sub_new_intro01_game .game_box .result_box{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 4;
	display: none;
}
#container.sub_new_intro01_game .game_box .result_box .board{
	width: 60%;
	height: 100%;
	position: relative;
	background-image: url("/_public/images/new_intro_game/comm/res_board.png");
	background-size: 100%;
	background-repeat: no-repeat;
	transform:translate(31.5%, 5.5%);
	display: table;
}
#container.sub_new_intro01_game .game_box .result_box .board .top{
	padding: 13.7% 13% 0 11%;
	height: auto;
	width: 100%;
	display: inline-flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}
#container.sub_new_intro01_game .game_box .result_box .board .top .res_box_O{
	background-image: url("/_public/images/new_intro_game/comm/box_res_O.png");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 16.1%;
    height: 16.1%;
    margin: 1%;
}
#container.sub_new_intro01_game .game_box .result_box .board .top .res_box_X{
	background-image: url("/_public/images/new_intro_game/comm/box_res_X.png");
	background-size: 100%;
	background-repeat: no-repeat;
	width: 16.1%;
    height: 16.1%;
    margin: 1%;
}
#container.sub_new_intro01_game .game_box .result_box .board .top div[class^=res_box_] .num{
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 1.2rem;
	line-height: 2.1rem;
}
#container.sub_new_intro01_game .game_box .result_box .board .top div[class^=res_box_] .text{
	text-align: center;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 4rem;
}
#container.sub_new_intro01_game .game_box .result_box .board .btm{
	width: 100%;
	font-size: 3rem;
    text-align: center;
    font-weight: bold;
	padding: 6.2% 11.3% 0 9.7%;
    line-height: 4.5rem;
}
#container.sub_new_intro01_game .game_box .result_box .board .try_btn{
	position: absolute;
	width: 100%;
	height: 100%;
	left:0;
	top:0;
}
#container.sub_new_intro01_game .game_box .result_box .board .try_btn .btn{
	transform: translate(216%, 510%);
    position: absolute;
    cursor: pointer;
}
/* // 완료 */

/* //2021-08-27 해양박람회 게임 css */