@charset "utf-8";

body { 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: #222; }

/* common */
	#wrap { position:relative; background:#000; width:1024px; height:636px; }

	.main_co{ color: #6b5c81; }
	.red_co{ color: #ff0000; }
	.green_co{ color: #90ff00; }

	.main_bg{ color: #fff; background: #6b5c81; }

	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: 60px; line-height: 1em; color: #fff; background: url('../images/bg.png') no-repeat; }
	.bar .index{ width: 111px; cursor: pointer; }
	.bar .name { width: 710px; padding: 0 20px; text-align: left; }
	.bar .name span { display: block; vertical-align: middle; padding: 0 5px; line-height: 1.1em; }
	.bar .plan { width: 60px; }
	.bar .page { width: 87px; letter-spacing: 1px; text-align: center; }
	.bar .prev { width: 28px; text-align: right; }
	.bar .next { width: 28px; }
	.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: 105px; left: 50%; z-index: 10; transform: translate(-50%, 0); width: 580px; height: 365px; padding: 40px; border: 5px solid #6b5c81; background: #fff; }
	.menu .title{ position: relative; padding: 0 0 20px 0; text-align: center; }
	.menu .title button { position: absolute; right: 0; }
	.menu h5{ float: left; padding: 10px 0; }
	.menu dl{ padding: 0 0 0 110px; }
	.menu dt { float:left; width: 100%; padding: 10px 0; }
	.menu dt span{ display: inline-block; padding: 5px 15px; line-height: 1em; border-radius: 20px; }
	.menu dd{ float:left; }
	.menu dd a{ display: block; padding: 10px 10px 10px 0; font-weight: 400; }

	.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; }
	.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 { padding: 0 0 25px 0; font-weight: 400; }
	.quest dt { position: relative; padding: 9px 0 10px 45px; line-height: 1em; }
	.quest dt span{ position: absolute; top: 0; left: 0; width: 35px; height: 100%; text-align: center; line-height: 35px; border-radius: 0 15px 15px 0; background: #000; }

	.quest dd { position: relative; padding: 0 0 5px 0; font-size: 14px; cursor: pointer; }
	.quest dd:nth-of-type(1){ padding: 20px 0 5px 0; }
	.quest dd span{ display: block; position: relative; padding: 0 0 0 35px; line-height: 25px; }
	.quest dd i { position: absolute; left: 0; top: 0; width: 25px; height: 25px; line-height: 25px; text-align: center; color: #fff; border-radius: 50px; background: #999; }
	.quest dd:hover span, .quest dd.on span{ color: #fff; background: #999; }

/* 결과보기 */
	.result{ padding: 0 30px; text-align: center; }
	.result .tt{ height: 55px; line-height: 55px; color: #fff; background: #222; }
	.result .tt span { display: inline-block; padding: 0 10px; line-height: 55px; }
	.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; background: #00a49a; }
	.result h6{ padding: 60px 0 0 0; }
	.result h6 span{ display: block; padding: 6px; color: #fff; background: rgba( 0, 0, 0, 0.5 ); }
	
	.result.pop{ display:none; position:absolute; top:0; left:0; width:100%; z-index:10; }
	.result.on{ display:block; }
	.quest.pop{ display:none; position:absolute; top:0; left:0; width:100%; z-index:10; }
	.quest.on{ display:block; }

	.btn_wrap{ padding: 15px 0 0 0; text-align: center; }
	.btn_wrap input[type="submit"]{ width: 190px; height: 48px; font-weight: 700; border-radius: 50px; cursor: pointer; }
	.btn_wrap input[type="button"]{ width: 190px; height: 48px; font-weight: 700; border:0; outline:0; border-radius: 50px; cursor: pointer; }
	.btn_wrap button, .down button{ width: 190px; height: 48px; margin: 0 5px; font-weight: 700; border-radius: 50px; }
	.btn_wrap .main_btn, .down .main_btn{ color: #fff; background: #ff8400; }
	.btn_wrap .sub_btn, .down .sub_btn{ color: #fff; background: #c6b7a7; }
	
/* 사전진단 */
	.pre{background: url('../images/bg_pre.png') no-repeat;}
	.pre dt { color: #fff; background: #3d7abe; }
	.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: 40px 30px; }
	.choice h5{ padding: 0 0 25px 0; }
	.choice ul{ margin: 0 -10px; }
	.choice ul li{ float: left; padding: 0 10px; }
	.choice li a{ position: relative; display: block; }
	.choice li a:hover:before{ content: ""; position: absolute; top: 0; left: 0; width: 462px; height: 341px; border: 5px solid #000; }
	.choice li span{ position: absolute; top: 210px; left: 0; padding: 20px; font-size: 15px; font-weight: 400; letter-spacing: -1px; line-height: 1.3em; }

/* 마무리 점검 퀴즈 */
	.end {background: url('../images/bg_end.png') no-repeat;}
	.end .title h6 , .end .title h2{ padding-left: 280px; }
	.end dt { color: #fff; background: #c456b3; }
	.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{ padding: 10px; color: #fff; background: #43a288; }
	.quiz_con ul{ text-align: center; font-size: 0; }
	.quiz_con ul li { display: inline-block; padding: 40px 30px 115px 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{ position: absolute; top: 160px; left: 0; right: 0; width: 580px; margin: 0 auto; padding: 10px; background: #6b5c81; }
	.quiz .pop > div{ padding: 30px; text-align: center; background: #fff; }
	.quiz .pop img { width: 50px; margin: 0 15px 0 0; vertical-align: middle; }
	.quiz .pop ul{ padding: 30px 20px; overflow: hidden; }
	.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; }