@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: #555; }
#wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1280px; overflow: hidden; }

	.tc_01 { color: #0066b3; }
	.tc_02 { color: #ff0000; }
	.tc_03 { color: #007b43; }
	.tc_04 { color: #fffc00; }

	h1, .h1 { font-weight: 400; font-size: 28px; line-height: 1.5em; }
	h2, .h2 { font-weight: 400; font-size: 24px; line-height: 1.5em; }
	h3, .h3 { font-weight: 400; font-size: 22px; line-height: 1.5em; }
	h4, .h4 { font-weight: 400; font-size: 20px; line-height: 1.5em; }
	h5, .h5 { font-weight: 400; font-size: 18px; line-height: 1.5em; }
	h6, .h6 { font-weight: 400; font-size: 14px; line-height: 1.5em; }

/* 상단bar */
	.bar { display: flex; align-items: center; position: relative; height: 100px; color: #fff; background: url('../images/bar_bg.png') no-repeat; }
	.bar ul { display: flex; flex-wrap: wrap; align-items: center; }
	.bar .index { 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 ul li:nth-child(1) { width: 90px; height: 30px; }

	.bar .btn_box { display: flex; gap: 10px; width: 130px; }
	.bar .btn_box span { width:60px; height:60px; font-size: 0; border-radius: 60px; cursor: pointer; }
	.bar .btn_box .common_chatbot_url{ background:url( ../images/btn_top01.png ) center no-repeat, #e85355; }
	.bar .btn_box .common_metabus_url{ background:url( ../images/btn_top02.png ) center no-repeat, #2faa4d; }
	.bar .btn_box span:hover { background-color: #fff; }

	.bar .name { width: 886px; padding: 0 10px; text-align: center; }
	.bar .name span { color: #b3ff0f; border-bottom:1px solid #b3ff0f; }
	.bar .name p { font-weight: 800; }

	.bar .page { width: 74px; text-align: center; color: #dbdcdc; }
	.bar .page i { color: #fff; }

	.bar .prev  { width: 50px; text-align: right; }
	.bar .prev a { display:block; float: right; width: 20px; height: 24px; 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: 50px; }
	.bar .next a { display: block; width: 20px; height: 24px; 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; }
	.bar a img { width:0; height:0; }

	.menu_wrap { display: none; }
	.menu_wrap.on { display: block; }
	.menu { position: absolute; top: 90px; left: 0; z-index: 10; width: 260px; 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: 20px; right: 20px; width: 32px; height: 32px; 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 20px 20px 0; }
	.menu dt { width: 100%; padding: 20px 0 0 0; }
	.menu dt span { display: block; padding: 5px 0 5px 20px; line-height: 1em; font-size: 14px; color: #000; border-radius: 0 10px 10px 0; background: #b3ff0f; }
	
	.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: #b3ff0f; }

	.menu .btn_dwon { padding: 0 0 20px 0; }
	.menu .btn_dwon a { display: block; padding: 10px 0; border-top: 1px solid #595959; }
	.menu .btn_dwon .btn_term { height: 40px; background: url(../images/btn_term_off.png) 20px center no-repeat; }
	.menu .btn_dwon .btn_term:hover { background: url(../images/btn_term_on.png) 20px center no-repeat; }
	.menu .btn_dwon .btn_plan { height: 40px; background: url(../images/btn_plan_off.png) 20px center no-repeat; }
	.menu .btn_dwon .btn_plan:hover { background: url(../images/btn_plan_on.png) 20px center no-repeat; }
	.menu .btn_dwon .btn_plan img { display: none; }
	
	
	/* .menu .btn_dwon a + a { margin: 15px 0 0 0; } */

/* Vod */
	.vod { display: flex; justify-content: center; align-items: center; height: 720px; }
	.vod iframe { width: 1280px; height: 720px; }

/* 버튼 */
	.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: 185px; 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: 185px; height: 53px; 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: 185px; 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: 185px; height: 53px; 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: 185px; 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: 185px; 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: 185px; 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: 185px; 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: 185px; 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: 185px; 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: 185px; 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: 185px; 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: 185px; 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: 185px; 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: 720px; }
	.quest .title { display: flex; justify-content: flex-start; align-items: center; height: 90px; padding: 0 60px; }
	.quest .title .tt_box { font-size: 14px; line-height: 1.5em; color:#fff; }

	.quest .scroll { height: 450px; padding: 40px 0; overflow-y: scroll; }

	.quest dl { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 15px 0; padding: 0 0 30px 0; }
	.quest dt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 30px; font-size: 18px; background: #ececec; }
	.quest dt i { color: #0066b3; }
	.quest dt span { 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: #0066b3; }
	.quest dd.on i { background: #0066b3; }

/* 결과 팝업 */
	.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; color: #121826; }
	
	.result.pop { display:none; position:absolute; top: 100px; left:0; width:100%; z-index:10; }
	.result.on { display:block; }
	.quest.pop { display:none; position:absolute; top: 100px; left:0; width:100%; z-index:10; background: #fff; }
	.quest.on { display:block; }

/* 사전진단 */
	.pre .title { gap: 30px; background: #121826; }

/* 시뮬레이션 선택 */
	.choice { background: url('../images/bg_choice.png') no-repeat; }
	.choice .title { justify-content: center; background: #121826; }
	.choice .atob { padding: 0 30px; }
	.choice .atob h5{ display:flex; align-items: center; height: 96px; font-weight: 800; }
	.choice .atob ul{ display:flex; flex-wrap: wrap; align-items: stretch; gap: 20px; }
	.choice .atob ul li { position: relative; width: calc(50% - 10px); }
	.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: 135px; padding: 20px; font-size: 15px; font-weight: 400; text-align: left; letter-spacing: -1px; line-height: 1.3em; color: #fff; }

/* 마무리 점검 퀴즈 */
	.end.pop { background: #fff; }
	.end .title { gap: 30px; background: #121826; }

/* 잠깐퀴즈 */
	.quiz .title { gap: 30px; background: #121826; }
	.quiz_con { padding: 40px 0; }
	.quiz_con h5 { padding: 40px 10px; font-weight: 800; text-align: center; text-decoration: underline; }
	.quiz_con ul { display:flex; justify-content: center; align-items: center; gap: 0 80px; padding: 0 0 40px 0; }
	.quiz_con .on{ display: none; }
	.quiz_con .wrong .on{ display: block; }
	.quiz_con .wrong .off{ display: none; }

	.quiz .pop { position: absolute; bottom: 0; left: 0; z-index: 10; width: 100%; height: calc(100% - 100px); background: rgba(0, 0, 0, 0.5);
		display: flex; justify-content: center; align-items: center; flex-direction: column; }
	.quiz .pop > div { width: 700px; height: 400px; border-radius: 40px; background: #fff; overflow: hidden; }
	.quiz .pop h2 { display: flex; justify-content: center; align-items: center; position: relative; height: 90px; color: #fff; background: #212936; }
	.quiz .pop ul { display:flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; height: 140px; margin: 40px; overflow-y: scroll; }
	.quiz .pop li i { display: block; width: 48px; height: 36px; line-height: 36px; text-align: center; color: #fff; background: #0066b3; }
	.quiz .pop li:nth-child(2n+1) { width: 48px; }
	.quiz .pop li:nth-child(2n) { width: calc( 100% - 68px ); }
	.quiz .pop li.btn { display:flex; justify-content: center; width: 100%; }

	#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; }

/*챗봇*/
	.pop_cha .pop_close,
	.pop_met .pop_close { position: absolute; top:10px; right:10px; font-size: 0; width: 30px; height: 30px; background: url(../images/bnt_close_off.png) center no-repeat; cursor: pointer; }
	.pop_cha .pop_close:hover,
	.pop_met .pop_close:hover { background: url(../images/bnt_close_on.png) center no-repeat; }

	.pop_cha { position:absolute; top: 0; left: 0; z-index: 20; width: 100%; height:100%; background: rgba(0, 0, 0, 0.5);  overflow: hidden; }
	.pop_cha iframe { width:100%; height:100%; }

/*메타버스보기*/
	.pop_met { position:absolute; bottom: 0; left: 0; z-index: 20; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);  overflow: hidden; }
	.pop_met iframe { width:100%; height:100%; }

/*VR페이지*/
	.vr_wrap { padding: 100px 0 0 0; }
	.vr_wrap div { width: 100%; text-align: center; padding: 0 0 50px 0; }
	.vr_wrap div h2 { font-weight: 800; }
	.vr_wrap ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 50px; }
	.vr_wrap ul li { position: relative; }
	.vr_wrap ul li p { position: absolute; padding: 5px 0 0 0; text-align: center; }