@charset "utf-8";

	*, *::after, *::before { box-sizing: border-box;}
	body {min-width: 1064px;min-height: 760px;background-color:#c9986d;padding:20px;height: 100%;margin:0;}
	div, ul, li, a, span, select, input {padding:0; margin:0;}
	input {text-align: center;}
	a {text-decoration:none; }
	li {list-style: none; }
	
	#ladder_before_wrap {width: 100%; text-align: center;}

	.display_wrap {background-color: #fff6ec;border-radius: 10px;height: 100%;padding-top:8%;min-width:1024px;position: relative;}
	.display_wrap h1 {background-image:url('/nedu/images/myedu/ladder/i_title.png');width:581px;height:130px;font-size:0;line-height:0;text-indent:-999;margin:auto;}
	.display_wrap .cont_w{display: block;width:660px;border-radius:25px; background-color:#67320d;margin:0 auto;padding:10px;min-height:210px;}

	/* 참여학생수 */
	.display_wrap .cont_w div.cont{float:left;width:49%;height: 90px;position: relative;}
	.display_wrap .cont_w div.cont:after{content:"";height:100%;min-height:175px;top:10px;right:-15px;position:absolute;width:1px;line-height:0;background-color:#957056;display:block;}
	.display_wrap .cont_w div.cont label{font-size:19px;color:#fff;display:block;text-align: center;font-weight: 500;letter-spacing: -1px;padding:10px 0 20px 0;}
	.display_wrap .cont_w div.cont .input_w{width:90px;height:90px;border:2px solid #ffb17a;padding-top:15px;background-color: #fff;border-radius: 90px;display: inline-block;line-height: 10px;}
	.display_wrap .cont_w div.cont .input_w input{color: #67320d;width:55px;font-size:48px;text-align: center;border:0;}
	.display_wrap .tot_cnt_bttn{position:absolute;top:70px; height:54px;width:54px;border-radius:54px; background-color:#c9986d;display: inline-block;text-align:center;font-size:0;text-indent:-999;background-position: center center;background-repeat: no-repeat;}
	.display_wrap .tot_cnt_bttn.minus{background-image:url('/nedu/images/myedu/ladder/ico_minus.png');left:30px;}
	.display_wrap .tot_cnt_bttn.plus{background-image:url('/nedu/images/myedu/ladder/ico_plus.png');right:30px;}
	.display_wrap .tot_cnt_bttn:hover{background-color:#ec6400;}
	.display_wrap .cont_w .noti{font-size: 15px;color:#e1cfb8;padding-top:15px;display: block;}


	/* 난이도를 선택 */
	.display_wrap .cont_w #setting_val{ padding: 0;float: right;width:49%}
	.display_wrap .cont_w #setting_val li span{font-size:19px;color:#fff;display:block;text-align: center;font-weight: 500;letter-spacing: -1px;padding:10px 0 20px 0;}	
	.select{position:relative;display:block;width:50%; text-align: center;margin:0 auto;padding:20px 0;}
	.select select, .select select option{color: #67320d; font-weight: 600;display:inline-block;width:100%;cursor:pointer;outline:0;border:1px solid #d9d9d9;appearance:none;-webkit-appearance:none;-moz-appearance:none;height:48px;line-height:48px;font-size:18px;padding:0 25px 0 10px;background: white;}
	.select select::-ms-expand{display:none}
	.select select:focus,.select select:hover{color:#67320d;background-color:#fff;border-color:#000}
	.select select:focus~.select-arrow,.select select:hover~.select-arrow{border-top-color:#000}
	.select .select-arrow{position:absolute;width:0;height:0;pointer-events:none;border-style:solid;border-width:5px 4px 0 4px;border-color:#7b7b7b transparent transparent transparent;padding-right:1px;top:40px;right:12px}

    /* 메인 버튼 */
	.btn_w{z-index: 1;display: block;width:660px;margin:0 auto;position: relative;text-align: center;padding-top:8%;}
	.btn_w .btn_reset_01{position:absolute;top:0px;right:0;display:block;background-color:#c9986d;color:#fff;padding:10px 30px;font-size:17px;text-align:center;margin:10px 0 0 400px;border-radius:25px;}
	.btn_w .btn_start{margin: 0 auto;background-color:#ec6400;color:#fff;font-size:30px;border-radius:100px;padding:20px 85px;font-weight: 700;box-shadow: 5px 5px 10px 5px rgba(236,100,0,0.2);}

	/* 메인 배경 */
	.visual_w {z-index: 0;}
	.i_star {background-image:url('/nedu/images/myedu/ladder/i_visual_03.png');width:66px;height:112px;position:absolute;top:15%} 
	.i_star.left {left:12%} 
	.i_star.right {right:12%} 
	.i_ladder {background-image:url('/nedu/images/myedu/ladder/i_visual_01.png');width:143px;height:106px;position:absolute;bottom:0} 
	.i_ladder.left {left:20%} 
	.i_ladder.right {right:20%} 
	.i_center {background-image:url('/nedu/images/myedu/ladder/i_visual_02.png');width:88px;height:392px;position:absolute;bottom:0;right:47%} 
	
	
	
	/* Sterp 02부터 배경 */
	.display_wrap.step {padding:20px;margin-top:65px !important;height:calc(100% - 70px);}
	.display_wrap#ladder_wrap {padding:0 20px 90px !important;}
	.display_wrap#ladder_wrap #ladder_input_form{margin:0 auto;}
	.display_wrap .logo {background-image:url('/nedu/images/myedu/ladder/i_title_01.png');width:250px;height:75px;font-size:0;line-height:0;text-indent:-999;margin:auto; position: absolute; top: -75px; left: 11px;}
	.display_wrap h2 {text-align:center;position: absolute; top: -85px;left:0px;width: 100%; color:#fff;font-size:30px; letter-spacing: -1px; padding-left: 40px;}


	
	#ladder_wrap {width: 100%; margin-top:40px; display:none;}
	#ladder_wrap canvas {width: 100%; height:calc(100% - 160px);}
	#ladder_wrap #ani_cnvs, #ladder_wrap #objct_cnvs {position:absolute; left: 20px; top:110px; width:calc(100% - 40px); height: calc(100% - 248px);}
	#ladder_wrap .ladder_input_wrap {width: 100%; height:50px; padding:0; margin:0;}
	#ladder_wrap .ladder_input_wrap li {height: 100%; display:inline-block; float:left; padding:0px 5px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #333; line-height: 23px; font-size: 13px; text-align: center;}
	/*.ladder_input_wrap li:last-child {width: 11%;}*/
	#ladder_wrap .ladder_input_wrap li input {width:100%; height: 100%;border: 2px solid #c9986d; border-radius: 13px; font-size:20px;letter-spacing: -1px;}
	/* #ladder_wrap .ladder_input_wrap li input:focus {outline-color: #c9986d;} */
	#ladder_wrap .ladder_input_wrap li a {color:#8c5323; width:100%; height: 100%; display:none; border-radius: 13px;font-size:20px;font-weight: 700;letter-spacing: -1px; border: 2px solid #c9986d;background-color:#fff;line-height: 34px;padding:5px;text-overflow:ellipsis;white-space:nowrap;overflow: hidden;}
	#ladder_wrap .ladder_input_wrap li a.user_bttn { line-height: 23px;}
	#ladder_wrap .ladder_input_wrap li a:hover,
	#ladder_wrap.step3 .ladder_input_wrap li:hover a {border-color:#ec6400;}
	#ladder_wrap .ladder_input_wrap li a.checked {border:none;}
	#ladder_wrap .ladder_input_wrap li span {width:100%; height: 100%; display:none;}
	#ladder_wrap .ladder_input_wrap#ladder_key_wrap { height: 110px;}
	#ladder_wrap .ladder_input_wrap#ladder_key_wrap li{ padding-top: 70px;}
	#ladder_wrap.step3 .ladder_input_wrap#ladder_key_wrap li {cursor: pointer;}

	#bttn_wrap { position: absolute; margin: -68px auto 0; width: calc(100% - 40px); min-width: 1024px; text-align: center; }
	#bttn_wrap a {display:inline-block; border-radius:25px;background-color:#c9986d;color:#fff;font-weight: bold; padding: 10px 20px;}
	#bttn_wrap a#lddr_prev_bttn {background: gray; color: white; }
	#bttn_wrap a#lddr_next_bttn, #bttn_wrap a#lddr_all_draw_bttn, #bttn_wrap a#lddr_all_result_bttn, #bttn_wrap a#lddr_re_bttn {margin-left:10px;background-color:#ec6400;color:#fff;font-size:20px;font-weight: 700;box-shadow: 5px 5px 10px 5px rgba(236,100,0,0.2);border-radius: 30px;padding:10px 30px;}
	#bttn_wrap #lddr_re_bttn {display:none;}
	#bttn_wrap #lddr_all_result_bttn {display:none;}
	
	#bttn_wrap a.fn_bttn_wrap {background-color:#c9986d; color: white; position: absolute;}
	#bttn_wrap a#print_bttn { right:135px; }
	#bttn_wrap a#reset_bttn{ right: 25px; padding-left:35px;background-image:url('/nedu/images/myedu/ladder/ico_reset.png');background-repeat: no-repeat;}

	
	#result_wrap {display:none; margin: 40px auto 0; width:100%; padding-bottom: 90px;}
	#result_wrap ul {width: max-content;}
	#result_wrap ul li {width: max-content;}

    /* 전체결과보기  */
	#result_wrap ul.result_w {width:100%;max-width:1100px;margin: 0 auto;max-height:100%;overflow: auto;}
	#result_wrap ul.result_w li {width: 90%;margin: 0 auto;background-image:url('/nedu/images/myedu/ladder/i_line_arrow.png');background-repeat: no-repeat;background-position: center 30px;min-height:75px;}
	#result_wrap ul.result_w li .user{font-size:22px;color:#8c5323;position: relative;padding:0 0 0 80px;float: left;font-weight:700;height: 75px;line-height: 72px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;max-width: 200px; background-position: left center; background-repeat: no-repeat;}
	#result_wrap ul.result_w li .user img{position: absolute;left:0px;}
	#result_wrap ul.result_w li .value{ height: 54px;padding:10px 5px;margin-top:11px;font-size:22px;color:#8c5323;position: relative;text-align:center;float:right;border: 2px solid #c9986d; border-radius: 13px;background-color:#fff;font-weight:700;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:inline-block;width: 200px; background-repeat: no-repeat; background-position: left center;}
	
	.line_01{border-color:#00b79f;}
	.line_02{border-color:#f48839;}
	.line_03{border-color:#2fa5d8;}
	.line_04{border-color:#f1b205;}
	.line_05{border-color:#20b36a;}
	.line_06{border-color:#8a5ebc;}
	.line_07{border-color:#5969dd;}
	.line_08{border-color:#87bb4f;}    
	.line_09{border-color:#c27740;}
	.line_10{border-color:#ed5682;}

	@media print { 
		body, page[size="A4"] {
			/* width: 297mm;
			height:210mm; */
		}
		/*
		@page { 
			size: Landscape;
			filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3); 
		}*/
		.noprint { display:none; } 
		#ani_cnvs {
			display:none;
		}
		#ladder_cnvs{height:calc(100% - 250px) !important;}
		#objct_cnvs{
			top: auto !important;
			bottom: 140px !important; 
			width:calc(100% - 40px) !important;
			height:auto !important;
		}
		.display_wrap#ladder_wrap{
			padding-bottom:0  !important;
		}
		#ladder_wrap .ladder_input_wrap li a.checked {
			border: 2px solid #c9986d;
		}
    
	}