@charset "utf-8";

body { position: relative; width: 100%; height: 100%; font-family:'Noto Sans KR','Dotum','돋움','sans-serif'; font-size:16px; font-weight: 400; line-height: 1.5em; word-break: keep-all; word-wrap: break-word; color: #333; background: url(../images/full_bg.png) no-repeat; background-size: cover; }

/* common */
	/* #wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
	 	#wrap .body { position: relative; width:1024px; height: 660px; } */

	.tc_01 { color: #00b0aa; }
	.tc_02 { color: #ff0000; }
	.tc_03 { color: #007b43; }
	.tc_04 { color: #fffc00; }

	h1, .h1 { font-weight: 400; font-size: 30px; }
	h2, .h2 { font-weight: 400; font-size: 24px; }
	h3, .h3 { font-weight: 400; font-size: 22px; }
	h4, .h4 { font-weight: 400; font-size: 20px; }
	h5, .h5 { font-weight: 400; font-size: 18px; }
	h6, .h6 { font-weight: 400; font-size: 14px; }

/* 상단 타이틀 */
	.tt_name { height: 49px; text-align: center; font-weight: 800; line-height: 1em; color:#fff; background: url('../images/title_bg.png') no-repeat; }

/* 하단bar */
	.bar { position: relative; height: 35px; line-height: 35px; color: #fff; background: url('../images/bar_bg.png') no-repeat; }
	.bar .index,
	.bar .index_alert{ width: 93px; cursor: pointer; background: url('../images/btn_index_off.png') center no-repeat; }
	.bar .index:hover { background: url('../images/btn_index_on.png') center no-repeat; }
	.bar .name  { width: 817px; padding: 0 20px; text-align: center; font-weight: 800; color: #333; }
	.bar .page  { width: 70px; letter-spacing: 1px; text-align: center; color: #555; }
	.bar .prev  { width: 22px; text-align: right; }
	.bar .prev a { display:block; height: 35px; background: url('../images/prev_off.png') center no-repeat; }
	.bar .prev a:hover { background: url('../images/prev_on.png') center no-repeat; }
	.bar .next  { width: 22px; }
	.bar .next a { display: block; height: 35px; background: url('../images/next_off.png') center no-repeat; }
	.bar .next a:hover { background: url('../images/next_on.png') center no-repeat; }
	.bar .click { display: none; position: absolute; top: -29px; right: 0; }
	.bar .click.on { display: block; }

	.menu_wrap { display: none; }
	.menu_wrap.on { display: block; }
	.menu { position: absolute; top: 49px; left: 0; z-index: 10; width: 280px; height: 576px; background: rgba(0, 0, 0, 0.8); }
	.menu .title { position: relative; padding: 50px 0 0 0; }
	.menu .title img { display: none; }
	.menu .title span { display: none; }
	.menu .title button { position: absolute; top: 30px; right: 30px; width: 22px; height: 22px; background: url(../images/bnt_close_off.png) no-repeat; }
	.menu .title button:hover { background: url(../images/bnt_close_on.png) no-repeat; }
	.menu h5 { display: none; }
	.menu dl { padding: 0 30px; }
	.menu dt { width: 100%; padding: 30px 0 0 0; text-align: center; }
	.menu dt span { display: block; padding: 10px 0; line-height: 1em; font-size: 14px; color: #00b0aa; border-top: 1px solid #00b0aa; }
	
	.menu dd a { position: relative; display: block; padding: 5px 10px 0 15px; font-weight: 400; color: #fff; }
	.menu dd a:before { content: ""; position: absolute; top: 15px; left: 0; width: 8px; height: 8px; background: url(../images/bullet.png) no-repeat; }
	.menu dd a:hover { color: #00b0aa; }
	.menu .btn_dwon { position: absolute; left: 0; bottom: 0; width: 100%; background: #000; }
	.menu .btn_dwon a:hover { background: #00b0aa; }
	.menu .btn_dwon a { display: flex; justify-content: center; align-items: center; width: 100%; height: 47px; text-align:center; }
	/* .menu .btn_dwon a + a { margin: 15px 0 0 0; } */

/* 버튼 */
	.btn_wrap { display: flex; justify-content: center; align-items: center; gap: 15px; }
	.btn_wrap input, .btn_wrap button { border: 0; text-indent: -9999px; cursor: pointer; }

	.btn_wrap .main_btn { width: 155px; height: 53px; background: url(../images/btn_ans_off.png) no-repeat; }
	.btn_wrap .main_btn:hover { background: url(../images/btn_ans_on.png) no-repeat; }
	.see_btn { width: 130px; height: 32px; background: url(../images/btn_com_off.png) no-repeat; text-indent: -9999px; cursor: pointer; }
	.see_btn:hover { background: url(../images/btn_com_on.png) no-repeat; }
	.ok_btn { width: 155px; height: 53px; background: url(../images/btn_ok.png) no-repeat; text-indent: -9999px; cursor: pointer; }
	.ok_btn:hover { background: url(../images/btn_ok.png) no-repeat; }

	.video_btn { width: 155px; height: 32px; background: url(../images/btn_com_vod_off.png) no-repeat; text-indent: -9999px; cursor: pointer; }
	.video_btn:hover { background: url(../images/btn_com_vod_on.png) no-repeat; }
	.video_btn01 { width: 155px; height: 53px; background: url(../images/btn_com_vod_off.png) no-repeat; text-indent: -9999px; cursor: pointer; }
	.video_btn01:hover { background: url(../images/btn_com_vod_on.png) no-repeat; }

	.down { display: flex; justify-content: center; align-items: center; gap: 15px; padding: 40px 0 0 0; }
	.down input, .down button { border: 0; text-indent: -9999px; cursor: pointer; }

	.down .btn_sup { width: 155px; height: 53px; background: url(../images/btn_sup_off.png) no-repeat; }
	.down .btn_sup:hover { background: url(../images/btn_sup_on.png) no-repeat; }
	.down .data01_btn { width: 155px; height: 53px; background: url(../images/btn_sup_off.png) no-repeat; }
	.down .data01_btn:hover { background: url(../images/btn_sup_on.png) no-repeat; }

	.down .btn_int { width: 155px; height: 53px; background: url(../images/btn_int_off.png) no-repeat; }
	.down .btn_int:hover { background: url(../images/btn_int_on.png) no-repeat; }
	.down .data02_btn { width: 155px; height: 53px; background: url(../images/btn_int_off.png) no-repeat; }
	.down .data02_btn:hover { background: url(../images/btn_int_on.png) no-repeat; }

	.down .btn_aud { width: 155px; height: 53px; background: url(../images/btn_aud_off.png) no-repeat; }
	.down .btn_aud:hover { background: url(../images/btn_aud_on.png) no-repeat; }
	.down .audio_btn { width: 155px; height: 53px; background: url(../images/btn_aud_off.png) no-repeat; }
	.down .audio_btn:hover { background: url(../images/btn_aud_on.png) no-repeat; }

	.down .btn_sup_vod { width: 155px; height: 53px; background: url(../images/btn_sup_vod_off.png) no-repeat; }
	.down .btn_sup_vod:hover { background: url(../images/btn_sup_vod_on.png) no-repeat; }
	.down .btn_int_vod { width: 155px; height: 53px; background: url(../images/btn_int_vod_off.png) no-repeat; }
	.down .btn_int_vod:hover { background: url(../images/btn_int_vod_on.png) no-repeat; }
	.down .btn_aud_vod { width: 155px; height: 53px; background: url(../images/btn_aud_vod_off.png) no-repeat; }
	.down .btn_aud_vod:hover { background: url(../images/btn_aud_vod_on.png) no-repeat; }

/* 문제 */
	.quest { height: 576px; background: #e4e4e4; }
	.quest .title { display: flex; justify-content: flex-start; align-items: center; height: 100px; padding: 0 60px; }
	.quest .title i { display: block; height: 80px; margin: 0 30px; margin-bottom: auto; border-left: 1px solid rgba(0, 0, 0, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.15); }
	.quest .title .tt_box { font-size: 14px; line-height: 1.5em; color:#fff; }

	.quest .scroll { height: 330px; margin: 30px; padding: 0 30px 0 0; overflow-y: scroll; }

	.quest dl { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 10px 0; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #cacaca; }
	.quest dt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 0 10px 0; font-size: 20px; color: #614747; }
	.quest dt i { display: block; width: 35px; height: 35px; line-height: 32px; text-align: center; font-weight: 800; border: 1px solid #614747; border-radius: 35px; box-shadow: 2px 2px 0 #614747 }
	.quest dt span { width: calc( 100% - 45px); font-weight: 500; }

	.quest dd { display: flex; gap: 10px; width: 50%; align-items: center; justify-content: flex-start; cursor: pointer; }
	.quest dd:nth-of-type(2n+1){ padding-left: 50px; }
	.quest dd i { display: block; width: 24px; height: 24px; line-height: 22px; font-size: 16px; text-align: center; color: #fff; border-radius: 24px; background: #555; }
	.quest dd.on { color: #00b0aa; }
	.quest dd.on i { background: #00b0aa; }

/* 결과 팝업 */
	.result { padding: 0 30px; text-align: center; }
	.result .tt { padding: 60px 0 0 0; line-height: 1em; font-size: 40px; font-weight: 500; letter-spacing: -2px; }
	.result ul { padding: 30px 0; font-size: 0px; line-height: 1em; overflow: hidden; }
	.result li { display: inline-block; padding: 0 30px; }
	.result .off { display: none; }
	.result .wrong .on { display: none; }
	.result .wrong .off{ display: block; }
	 
	.result h6{ padding: 60px 0 0 0; }
	.result h6 span{ display: block; padding: 6px; border: 1px solid #c9c9c9; background: #fff; }
	
	.result.pop { display:none; position:absolute; top: 49px; left:0; width:100%; z-index:10; }
	.result.on { display:block; }
	.quest.pop { display:none; position:absolute; top: 49px; left:0; width:100%; z-index:10; }
	.quest.on { display:block; }

/* 사전진단 */
	.end.pop { background: url('../images/bg_pre.png') no-repeat; }
	.pre .title { background: url('../images/bg_pre_title.png') no-repeat; }

/* 시뮬레이션 선택 */
	.choice { background: url('../images/bg_choice.png') no-repeat; }
	.choice .title { justify-content: center; background: url('../images/bg_choice_title.png') no-repeat; }
	.choice .atob h4{ display:flex; align-items: center; height: 106px; padding:0 40px; font-weight: 800; }
	.choice .atob ul{ display:flex; flex-wrap: wrap; align-items: stretch; }
	.choice .atob ul li { position: relative; width: 50%; height: 370px; }
	.choice .atob li a{ display: block; }
	.choice .atob li a:hover:before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 5px solid #000; }
	.choice .atob li p { position: absolute; bottom: 0; left: 0; width: 100%; height: 115px; padding: 20px; font-size: 15px; font-weight: 400; text-align: left; letter-spacing: -1px; line-height: 1.3em; color: #fff; }

/* 마무리 점검 퀴즈 */
	.end.pop { background: url('../images/bg_end.png') no-repeat; }
	.end .title { background: url('../images/bg_end_title.png') no-repeat; }

/* 잠깐퀴즈 */
	.quiz { background: url('../images/bg_quiz.png') no-repeat;}
	.quiz .title { background: url('../images/bg_quiz_title.png') no-repeat; }
	.quiz_con h4 { height: 120px; padding: 30px 40px; font-weight: 800; }
	.quiz_con ul { display:flex; justify-content: center; align-items: center; gap: 0 80px; padding: 0 0 30px 0; }
	.quiz_con .on{ display: none; }
	.quiz_con .wrong .on{ display: block; }
	.quiz_con .wrong .off{ display: none; }

	.quiz .pop { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);
		display: flex; justify-content: center; align-items: center; flex-direction: column; }
	.quiz .pop > div { width: 600px; height: 350px; padding: 30px; background: #e4e4e4; }
	.quiz .pop h2 { display: flex; justify-content: center; align-items: center; gap: 10px; position: relative; padding: 0 0 10px 0; }
	.quiz .pop h2:before { content: ""; position:absolute; bottom:0; left: 0; right: 0; width: 180px; margin: 0 auto; border-bottom: 1px solid #555; }
	.quiz .pop ul { display:flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; height: 140px; margin: 20px 0 30px 0; overflow-y: scroll; }
	.quiz .pop li i { display: block; width: 58px; height: 28px; line-height: 28px; text-align: center; border: 1px solid #614747; border-radius: 35px; box-shadow: 2px 2px 0 #614747; }
	.quiz .pop li:nth-child(2n+1) { width: 65px; }
	.quiz .pop li:nth-child(2n) { width: calc( 100% - 75px ); padding: 4px 0 0 0; }
	.quiz .pop li.btn { display:flex; justify-content: center; width: 100%; }

	/*.quiz .title h6 , .quiz .title h2{ padding-left: 250px; }
	.quiz_con { position: relative; padding: 0 30px; }
	.quiz_con p{ width: 100%; padding: 10px; color: #fff; border-radius: 7px; background: #7cb500; }
	.quiz_con ul{ text-align: center; font-size: 0; }
	.quiz_con ul li { display: inline-block; padding: 40px 30px 65px 30px; vertical-align: top; cursor: pointer; }

	.quiz .pop .pop_wrap { position: absolute; top: 140px; left: 0; right: 0; z-index: 20; width: 580px; margin: 0 auto; border-radius: 50px; background: #fff; overflow: hidden; }
	.quiz .pop .box  { padding: 30px; text-align: center; }
	.quiz .pop img   { width: 50px; margin: 0 15px 0 0; vertical-align: middle; }
	.quiz .pop ul    { padding: 30px 20px; overflow: hidden; background: #c21c7a; }
	.quiz .pop li    { float: left; }
	.quiz .pop .tt   { width: 44px; height: 23px; line-height: 23px; font-size: 14px; text-align: center; color: #6b5c81; background: #fff; }
	.quiz .pop .bo   { width: 476px; padding: 0 0 10px 10px; font-size: 15px; font-weight: 400; color: #fff; }
	.quiz .pop .bg   { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); }*/

	#media_ready { top: 25px !important; }

/* 동영상보기 */
	.vod_pop { position: absolute; top: 45px; left: 0; padding: 80px 60px; background: rgba(0,0,0,0.5); z-index: 99999; }
	.vod_pop button { position: absolute; top: 25px; right: 60px; width: 30px; height: 30px; background: url(../images/off_x.png); background-size: 100%; }

	.vod_pop2 { position: absolute; top: 45px; left: 0; padding: 80px 60px; background: rgba(0,0,0,0.5); z-index: 99999; }
	.vod_pop2 button { position: absolute; top: 25px; right: 60px; width: 30px; height: 30px; background: url(../images/off_x.png); background-size: 100%; }

/* 계속듣기 팝업 */
	.pop_info { display: none; }
	.pop_info .body_info { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.pop_info .body_info div { position:relative; z-index: 20; padding: 20px; text-align: center; border-radius: 20px 0 0 0; background: #fff; }
	.pop_info .bg { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
	.pop_info p { padding: 0 0 20px 0; font-size: 1.1em; }
	.pop_info button { font-family:'Noto Sans KR'; padding: 7px 30px; font-weight: 400; color: #fff; border-radius: 2px; background: #00a49a; }