@charset "utf-8";

/****************************************
*			    common.css              *
****************************************/

#bgContainer {
	position: absolute;
	width: 100%;
	height: 800px;
}
#frameContainer {
	position: absolute;
	top: 0;
	width: 1280px;
	height: 800px;
	/*outline: 1px solid red;*/
}


/***********************************/
/* loading */
#loadingContainer {
	pointer-events: auto;
	background: rgba(0, 0, 0, 0.85);
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 40;
	width: 100%;
	height: 100%;
}

.loadingIconAnimation {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90px;
	height: 90px;
	margin: -60px 0 0 -60px;
	-webkit-animation: spin 2s linear infinite;
	-moz-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	background: url('../images/loadingIcon.png') no-repeat;
}

@-moz-keyframes spin {
	100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}


/***********************************/
/* common */
[class*="Btn"], [class*="btn"], .sndText, .sndText span { cursor: pointer; }
.dim {
	opacity: .4;
	pointer-events: none;
}

.displayN { display: none; }
.displayB { display: block; }

.view { visibility: visible; }
.hide { visibility: hidden; }

.inBlockBox {
	display: inline-block;
	vertical-align: top;
}

.circleIcon_half {
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(../images/common/circleHalf_icon.png) no-repeat;
	background-size: 25px;
}
.circleIcon {
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(../images/common/circle_icon.png) no-repeat;
	background-size: 25px;
}
/***********************************/
/* text */
.kor {
	opacity: 0;
	color: #2a8ade;
	font-size: 22px;
	text-align: center;
	margin-bottom: 16px;
	font-family: NotoM;
}
.sndText { line-height: 48px; }
.sndText:hover {
	color: #e22929;
	transition: color 0.2s;
}
.sndText:hover span {
	color: #e22929;
	transition: color 0.2s;
}

.eg {
	color: #3c5aa8;
	vertical-align: top;
}

.underLine { border-bottom: 2px solid #000; }

.subTitle {
	color: #444;
	font-size: 25px;
	margin-bottom: 20px;
}
.colorText {
	display: inline-block;
	margin-right: 10px;
}
.green { color: #5ab346; }
.switchText {
	color: #a45413;
	cursor: pointer;
}
/***********************************/
/* quiz */
.answerObj {
	position: absolute;
	color: #e22929;
}

.checkObj {
	opacity: 0;
	position: absolute;
	width: 50px;
	height: 40px;
	background: url(../images/common/check_blue.png) no-repeat;
	background-size: 50px;
	cursor: pointer;
}
.checkObj.checkComplete {
	background: url(../images/common/check_red.png) no-repeat;
	background-size: 50px;
}

.quiz .switchTalkView {
	display: inline-block;
}
.quiz .switchTalkHide {
	display: none;
}

/***********************************/
/* btn */
.aniBtn {
	position: absolute;
	width: 100px;
	height: 37px;
	background: url(../images/common/ani_popupBtn.png) no-repeat;
	background-size: 100px;
}

.inAnswerBtn {
	position: absolute;
	width: 80px;
	height: 34px;
	background: url(../images/common/inAnswerBtn.png) no-repeat;
	background-size: 80px;
}
.inAnswerBtn:hover {
	background: url(../images/common/inAnswerBtn_over.png) no-repeat;
	background-size: 80px;
}

.inResetBtn {
	position: absolute;
	width: 80px;
	height: 34px;
	background: url(../images/common/inResetBtn.png) no-repeat;
	background-size: 80px;
}
.inResetBtn:hover {
	background: url(../images/common/inResetBtn_over.png) no-repeat;
	background-size: 80px;
}

.pageBtnContainer {
	position: absolute;
	top: 350px;
}
.pageBtnContainer > div {
	position: absolute;
	width: 30px;
	height: 50px;
	background: #bbb;
}
.pageBtnContainer .prevBtn { left: -40px; }
.pageBtnContainer .nextBtn { left: 1050px; }


/***********************************/
/* contents */
#wrap {}
.contentsArea {
	position: absolute;
	width: 1120px;
}
.scrollOutBox {
	width: 1070px;
	height: 100%;
	overflow: hidden;
}
.scrollInBox { position: relative; }
[class*="page_"] {
	visibility: hidden;
	position: absolute;
}
[class*="page_"].view { visibility: visible; }


/* script */
.pageContainer .scriptList {
	position: absolute;
	background: #efeeec;
	padding: 20px 20px 0px 10px;
	border-radius: 15px;
	box-sizing: border-box;
}
.pageContainer .scriptList > li {
	/*width: 1060px;*/
	text-align: left;
	margin-bottom: 20px;
}
.pageContainer .scriptList > li:last-child {
	margin-bottom: 0px;
}
.pageContainer .scriptList > li > div {
	display: inline-block;
}
.pageContainer .scriptList .name {
	width: 50px;
	margin-right: 5px;
	text-align: right;
	vertical-align: top;
}
.pageContainer .scriptList .talk {
	text-align: justify;
}
.talk > span {
	display: inline-block;
}
.talk .kor {
	position: static;
	text-align: justify;
}
.pageContainer .popupIPBtn {
	position: absolute;
	bottom: 11px;
	right: 14px;
	width: 86px;
	height: 37px;
	background: url(../images/popup/pop_interpretBtn.png) no-repeat;
	background-size: 86px;
}

/***********************************/
/* popup */
.popupBtnContainer {
	position: absolute;
	bottom: 0;
	left: 334px;
	width: 448px;
	height: 50px;
	color: #fff;
	font-size: 16px;
	padding-top: 7px;
	padding-left: 24px;
	text-align: center;
	box-sizing: border-box;
	/*border-top-left-radius: 50px;*/
	/*border-top-right-radius: 50px;*/
	/*background: rgba(0, 100, 200, .25);*/
	cursor: default;
}
.popupBtnContainer [class*="Btn"] {
	/*position: absolute;*/
	bottom: 5px;
	height: 38px;
	width: 100px;
	border-radius: 3px;
	background: #4ba59e;
	box-shadow: inset -2px -2px 1px 1px rgba(0, 0, 0, .4), 0px 0px 3px rgba(0, 0, 0, .2);
}
.popupBtnContainer [class*="Btn"] > span {
	display: inline-block;
	margin-top: 10px;
	text-align: center;
}
.popupBtnContainer > li {
	position: static;
	float: left;
	margin: 0 2px;
	/*padding: 0 22px;*/
	/*border-right: 2px solid rgba(0, 0, 0, 0);*/
}
.popupBtnContainer [class*="Btn"]:hover {
	background: #46b5ab;
}
.popupBtnContainer > li span { cursor: pointer; }
.popupBtnContainer > li:last-child {
	border-right: none;
}

.popupPageContainer {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 40px;
	line-height: 48px;
	word-spacing: 1px;
	letter-spacing: -1.5px;
	font-family: NotoB;
	box-sizing: border-box;
	z-index: 1;
}
.popupPageContainer > li {
	display: none;
	width: 100%;
	height: 100%;
}
.popupPageContainer .script {
	background: url(../images/popup/popup_bg_script.png);
	background-size: 1120px;
}
.popupPageContainer .ani {
	background: url(../images/popup/popup_bg_ani.png);
	background-size: 1120px;
}
.popupPageContainer .popCloseBtn {
	position: absolute;
	top: 14px;
	right: 15px;
	width: 30px;
	height: 30px;
	/*background: #eee;*/
	cursor: pointer;
}
.audioContainer.popup {
	top: 750px;
	left: 420px;
}

/* script */
.script .scrollOutBox {
	position: absolute;
	top: 80px;
	left: 30px;
	width: 1060px;
	height: 666px;
	overflow: hidden;
}
.script .scrollInBox {
	width: 100%;
}
.script .scriptList > li {
	width: 1060px;
	text-align: left;
	margin-bottom: 20px;
}
.script .scriptList > li > div {
	display: inline-block;
}
.script .scriptList .name {
	width: 80px;
	color: #4296cb;
	margin-right: 5px;
	text-align: right;
	vertical-align: top;
}
.script .scriptList .talk {
	width: 920px;
	text-align: justify;
}
.script .scriptList .talk > span {
	display: inline-block;
}
.script .scriptList .talk .kor {
	position: static;
	text-align: justify;
}
.script .popupIPBtn {
	position: absolute;
	bottom: 11px;
	right: 14px;
	width: 86px;
	height: 37px;
	background: url(../images/popup/pop_interpretBtn.png) no-repeat;
	background-size: 86px;
}

/***********************************/
/* changeTitle */
.changeTitle {
	margin-bottom: 10px;
}
.changeTitle > span {
	color: #333;
	font-size: 34px;
    font-family: NotoM;
}
.changeTitle.EN > span {
	line-height: 34px;
}
.changeTitle.KR > span {
	letter-spacing: -2px;
	line-height: 38px;

}
.changeTitle .changeTitleBtn {
	display: inline-block;
	width: 38px;
	height: 38px;
	margin-top: -2px;
	background: url(../images/common/changeLanBtn.png) no-repeat;
	background-size: 38px;
	vertical-align: middle;
}
.changeTitleBtn > img {
	width: 38px;
}
.changeTitleBtn:hover {
	background: url(../images/common/changeLanBtn_over.png) no-repeat;
	background-size: 38px;
}
.changeTitle > span > .num {
	font-family: NotoB;
	font-size: 30px;
}

/***********************************/
/* ZoomIn */
.zoomInContents > li {
	margin-bottom: 120px;
}
.zoomInContents > li > span {
	display: inline-block;
}
.zoominNum {
	width: 35px;
	height: 35px;
	font-size: 30px;
	margin-top: 10px;
	line-height: 30px;
	font-family: NotoM;
	text-align: center;
	background: #EBCC76;
	border-radius: 50%;
	vertical-align: top;
}

/***********************************/
/* TFContainer */
.TFContainer {
	position: absolute;
	right: 50px;
}
.TFContainer span {
	display: inline-block;
}
.TFContainer .box {
	width: 28px;
	height: 28px;
	margin: -2px 5px;
	border-radius: 4px;
	border: 2px solid #888;
}
.TFContainer .FBox {
	margin-left: 30px;
}