@charset "utf-8";

body { position: relative; width: 100%; height: 100%; font-family:'Noto Sans KR','Dotum','돋움','sans-serif'; font-size:16px; font-weight: 500; line-height: 1.5em; word-break: keep-all; word-wrap: break-word; color: #333; background: #000000; }

/* common */
	#wrap { position:fixed; background:#000; width:1024px; height: 636px; top: 50%; left: 50%; transform:translate(-50%, -50%) }

	.main_co{ color: #6b5c81; }
	.red_co{ color: #ff0000; }
	.green_co{ color: #007b43; }
	.yellow_co{ color: #fffc00; }

	.main_bg{ color: #fff; background: #7cb500; }

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

/* 과정명 */
	.bar { position: relative; height: 35px; line-height: 1em; color: #fff; background: url('../images/bg.png') no-repeat; }
	.bar .index { width: 93px; cursor: pointer; }
	.bar .name  { width: 817px; padding: 0 20px; text-align: left; }
	.bar .page  { width: 70px; letter-spacing: 1px; text-align: center; color: #d5d5d5; }
	.bar .prev  { width: 22px; text-align: right; color: #d5d5d5; }
	.bar .next  { width: 22px; color: #d5d5d5; }
	.bar .click { display: none; position: absolute; top: -29px; right: 0; }
	.bar .click.on { display: block; }
	.title_name { padding: 0 0 9px 0; line-height: 1em; color: #fff; }

	.menu_wrap { display: none; }
	.menu_wrap.on { display: block; }
	.menu { position: absolute; top: 105px; left: 50%; z-index: 10; transform: translate(-50%, 0); width: 580px; height: 375px; padding: 30px 40px; border: 5px solid #fff; border-radius: 30px; background: url('../images/menu_bg.png') 420px 215px no-repeat, #fcffe7; }
	.menu .title { position: relative; padding: 0 0 20px 0; text-align: center; }
	.menu .title span { display: inline-block; padding: 0 0 5px 0; line-height: 1.5em; color: #007b43; border-bottom: 1px solid #007b43; }
	.menu .title button { position: absolute; right: 0; }
	.menu h5 { float: left; padding: 10px 0; }
	.menu dt { float:left; width: 100%; }
	.menu dt span { display: inline-block; padding: 5px 15px; line-height: 1em; border-radius: 0 20px 20px 0; }
	.menu dd { float:left; }
	.menu dd a { display: block; padding: 10px 10px 10px 0; font-weight: 400; }
	.menu .btn_dwon { padding: 15px 0 0 0; text-align: center; clear: both; }

	.menu_bg { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.5 ); cursor: pointer; }

/* 진단문제 */
	.quest{ height: 576px; }
	.quest .title { height: 107px; }
	.quest .title span{ float: left; padding: 15px 0 0 0; }
	.quest .title h6{ padding-top: 25px; line-height: 1.4em; font-weight: 400; }
	.quest .title h2{ padding-top: 25px; }
	.quest .scroll{ height: 375px; margin: 0 30px; padding: 0 30px 0 0; overflow-y: scroll; }
	.quest dl { font-weight: 400; }
	.quest dt { position: relative; padding: 8px 0 8px 45px; line-height: 1.3em; }
	.quest dt span{ position: absolute; top: 0; left: 0; width: 35px; height: 100%; text-align: center; line-height: 35px; color: #fff; background: #1998a3; }

	.quest dd { position: relative; padding: 10px 35px 10px 35px; font-size: 24px; cursor: pointer; overflow: hidden; }
	.quest p  { float: left; width: 50%; padding: 0 0 10px 0 ; }
	.quest dd span { display: inline-block; position: relative; padding: 0 20px 0 40px; line-height: 30px; border-radius: 7px; }
	.quest dd i { position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 27px; font-size: 16px; text-align: center; color: #5d8800; border: 1px solid #7cb500; border-radius: 7px; background: #fcffe7; }

	.quest p:hover span, .quest p.on span{ color: #fff; background: #7cb500; }

/* 결과보기 */
	.result{ padding: 0 30px; text-align: center; }
	.result .tt{ font-size: 30px; }
	.result .tt span { display: inline-block; padding: 5px 20px 7px 20px; line-height: 1em; border-radius: 50px; }
	.result ul { padding: 40px 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 .see_btn { width: 89px; height: 34px; color: #fff; border: 1px solid #5e5e5e; border-radius: 8px; background: url(../images/see_btn.png) center no-repeat; background-size: cover; }
	.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: 25px; left:0; width:100%; z-index:10; }
	.result.on{ display:block; }
	.quest.pop{ display:none; position:absolute; top: 25px; left:0; width:100%; z-index:10; }
	.quest.on{ display:block; }
	.pop .see_btn { width: 89px; height: 34px; color: #fff; border: 1px solid #5e5e5e; border-radius: 8px; background: url(../images/see_btn.png) center no-repeat; background-size: cover; }

	.btn_wrap{ padding: 15px 0 0 0; text-align: center; }
	.btn_wrap input[type="submit"]{ width: 190px; height: 48px; font-weight: 700; border-radius: 8px; cursor: pointer; }
	.btn_wrap input[type="button"]{ width: 190px; height: 48px; font-weight: 700; border:0; outline:0; border-radius: 8px; cursor: pointer; }
	.btn_wrap button, .down button{ width: 190px; height: 48px; margin: 0 5px; font-weight: 700; border-radius: 8px; }
	.btn_wrap .main_btn, .down .main_btn{ color: #fff; border: 1px solid #00242c; background: url(../images/pre_btn.png) center no-repeat; background-size: cover; }
	.btn_wrap .sub_btn, .down .sub_btn { color: #fff; border: 1px solid #004655; background: url(../images/sub_btn.png) center no-repeat; background-size: cover; }
	.btn_wrap .audio_btn, .down .audio_btn { color: #fff; border: 1px solid #00718a; background: url(../images/audio_btn.png) center no-repeat; background-size: cover; }
	
/* 사전진단 */
	.pre{background: url('../images/bg_pre.png') no-repeat;}
	.pre dt { color: #000; background: #e5e5e5; }
	.pre .title h6 , .pre .title h2{ padding-left: 205px; }

/* 시뮬레이션 선택 */
	.choice{background: url('../images/bg_choice.png') no-repeat;}
	.choice .title{ height: 66px; }
	.choice .atob{ padding: 30px; }
	.choice h5{ padding: 0 0 25px 0; }
	.choice ul{ margin: 0 -10px; }
	.choice ul li { padding: 0 10px 15px 10px; }
	.choice li a{ position: relative; display: block; }
	.choice li a:hover:before{ content: ""; position: absolute; top: 0; width: 760px; height: 170px; border: 5px solid #000; }
	.choice li span{ position: absolute; top: 0; width: 355px; padding: 20px; font-size: 15px; font-weight: 400; text-align: left; letter-spacing: -1px; line-height: 1.3em; color: #fff; }
	.choice .l_con span { left: 416px; }
	.choice .r_con span { left: 194px; }
	.choice .l_con a:hover:before{ left: 0; border-radius: 0 40px 40px 0; }
	.choice .r_con a:hover:before{ right: 0; border-radius: 40px 0 0 40px; }
	.choice .r_con { text-align: right; }

/* 마무리 점검 퀴즈 */
	.end {background: url('../images/bg_end.png') no-repeat;}
	.end .title h6 , .end .title h2{ padding-left: 280px; }
	.end dt { background: #fff; }
	.end dt span { background: #1998a3; }
	.end .down{ padding-top: 45px; }

/* 잠깐퀴즈 */
	.quiz { position: relative; background: url('../images/bg_quiz.png') no-repeat;}
	.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_con .on{ display: none; }
	.quiz_con .wrong .on{ display: block; }
	.quiz_con .wrong .off{ display: none; }

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