<?
header("content-type:text/css");
?>
@charset "utf-8";

#wood_bg {
	background:url("../../img/wood_bg.png");
	background-repeat:repeat;
	background-size:100%;
}
#wrap { 
	width:100%; 
	height:100%;
}
#container {
	width:100%; 
	height:auto;
}
#container:after {
	content : "";
	display : block;
	clear : both;
}
footer {
	width:100%; 
	height:40px; 
	margin-top:10px;
	text-align:center; 
	font-weight:bold; 
	color:#5b2d2f;
	font-size:80%;
}

/* intro */
.login_bg {
	background:url("../../img/login_bg.png");
	background-repeat:no-repeat;
	background-size:70%;
	background-position:right top;
}
#intro_title {
	float:left;
	width:30%;
	padding-top:8%;
	padding-left:20px;
}
#login {
	float:left;
	width:50%;
	padding-top:12%;
	text-align:right;
}
#login div {
	display:block;
	width:100%;
	padding-bottom:10px;
}
#login div label {
	font-weight:bold;
	color: #5b2d2f;
}
.input_login {
	width:60%;
	padding:8px 0;
	background:#e5dbca;
	border-top:1px solid #a58c68;
	border-left:1px solid #a58c68;
	border-bottom:1px solid #e5dbca;
	border-right:1px solid #e5dbca;
}
#btn_login {
	width:60%;
	border:1px solid #1e1818;
	border-radius:5px;
	padding:10px 10px;
	color:#FFFFFF;
	font-weight:bold;
	cursor:pointer;
	background: #765f5f; /* Old browsers */
	background: -moz-linear-gradient(top,  #765f5f 0%, #2a1314 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#765f5f), color-stop(100%,#2a1314)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #765f5f 0%,#2a1314 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #765f5f 0%,#2a1314 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #765f5f 0%,#2a1314 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #765f5f 0%,#2a1314 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#765f5f', endColorstr='#2a1314',GradientType=0 ); /* IE6-9 */

}

#btn_print {
        width:60%;
        border:1px solid #1e1818;
        border-radius:5px;
        padding:10px 10px;
        color:#ffffff;
        font-weight:bold;
        cursor:pointer;

	background: #358f35; /* Old browsers */
        background: -moz-linear-gradient(top,  #358f35 0%, #004b00 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#358f35), color-stop(100%,#004b00)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #358f35 0%,#004b00 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #358f35 0%,#004b00 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #358f35 0%,#004b00 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #358f35 0%,#004b00 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#358f35', endColorstr='#004b00',GradientType=0 ); /* IE6-9 */
}
/* grade */
.grade_bg {
	background:url("../../img/grade_bg.png");
	background-repeat:no-repeat;
	background-size:100%;
	background-position:left top;
}
#grade_title {
	width:50%;
	margin:0 auto;
	padding-top:2.5%;
	padding-left:10px;
}
#grade_box {
	width:78%;
	margin: 0 auto;
}
#grade {
	width:100%;
	border-left:1px solid #d4c7b6;
}
#grade:after {
	content : "";
	display : block;
	clear : both;
}
#grade li {
	float:left;
	width:30%;
	padding: 1.1% 1.1%;
	font-size:0%;
	text-align:center;
	border-top:2px solid #d4c7b6;
	border-left:1px solid #d4c7b6;
	border-right:1px solid #bcb2a3;
	border-bottom:2px solid #bcb2a3;
}

#grade li a {
	display:block;
}
#grade li.grade_high {
	border-right:2px solid #bcb2a3;
}


#grade2 {
	width:100%;
}
#grade2 li {
	width:97%;
	padding: 1.1% 1.1%;
	font-size:0%;
	text-align:center;
	border-top:1px solid #d4c7b6;
	border-left:2px solid #d4c7b6;
	border-right:2px solid #bcb2a3;
	border-bottom:1px solid #bcb2a3;
}

#grade2 li a {
	display:block;
}
#grade2 li.grade_primary {
	border-top:2px solid #d4c7b6;
}
#grade2 li.grade_high {
	border-bottom:2px solid #bcb2a3;
}

/* primary_list */
#header {
	width:100%;
	height:65px;

}
.primary_header_bg {
	background:url("../../img/primary_header_bg.png");
	background-repeat:no-repeat;
	background-size:100% 60px;

}
.middle_header_bg {
	background:url("../../img/middle_header_bg.png");
	background-repeat:no-repeat;
	background-size:100% 60px;

}
.high_header_bg {
	background:url("../../img/high_header_bg.png");
	background-repeat:no-repeat;
	background-size:100% 60px;

}
#header:after {
	content : "";
	display : block;
	clear : both;
}
#header_back {
	float:left; 
	width:35px; 
	height:auto;
	margin-top:7px;
	margin-left:5px;
	font-size:0;
}
#header_home {
	float:right; 
	width:35px; 
	height:auto;
	text-align:right;
	margin-top:7px;
	margin-right:5px;
	font-size:0;
}
#header_title {
	width:50%;
	height:100%;
	margin-left:45px;
	padding-left:50px;
	font-size:120%;
	color:#59330a;
	font-weight:bold;
	padding-top:10px;
}
#header_title span{
	color:#751a1a;
}
#header_title p {
	display:table-cell;
	width:100%;
	height:58px;
	vertical-align:middle;
}
#header_title p img{
	width:96%;
}
.header_primary {/*초급태그*/
	background:url("../../img/header_primary.png");
	background-repeat:no-repeat;
	background-size:45px 65px;
}
.header_middle {/*중급태그*/
	background:url("../../img/header_middle.png");
	background-repeat:no-repeat;
	background-size:45px 65px;
}
.header_high {/*고급태그*/
	background:url("../../img/header_high.png");
	background-repeat:no-repeat;
	background-size:45px 65px;
}
#header_title2 {
	width:50%;
	height:100%;
	margin-left:45px;
	padding-left:50px;
}
#header_title2 p {
	display:table-cell;
	width:100%;
	height:53px;
	color:#7f3d0c;
	font-weight:bold;
	vertical-align:middle;
}

#list_box {
	width:100%;
	height:100%;
}

.primary_bg {/*녹색배경*/
	background:url("../../img/primary_bg.png");
	background-repeat:no-repeat;
	background-size:cover;
}
.middle_bg {/*청색배경*/
	background:url("../../img/middle_bg.png");
	background-repeat:no-repeat;
	background-size:cover;
}
.high_bg {/*황색배경*/
	background:url("../../img/high_bg.png");
	background-repeat:no-repeat;
	background-size:cover;
}
#list_ul {
	border-top: 1px solid #d7d8c6;
}
.list_li {
	height:50px;
	padding-left:40px;
	font-weight:bold;
	border-bottom:1px solid #ccc8bc;
}
.list_li a {
	width:100%; 
	height:100%; 
	display:block;
	line-height:345%;
}
.tag_primary {
	background: #f8efe3 url("../../img/tag_primary.png");
	background-repeat:no-repeat;
	background-size: contain;
}
.tag_adult {
	background: #f8efe3 url("../../img/tag_adult.png");
	background-repeat:no-repeat;
	background-size: contain;
}
.tag_pediatric {
	background: #f8efe3 url("../../img/tag_pediatric.png");
	background-repeat:no-repeat;
	background-size: contain;
}
.tag_maternity {
	background: #f8efe3 url("../../img/tag_maternity.png");
	background-repeat:no-repeat;
	background-size: contain;
}
.tag_mental {
	background: #f8efe3 url("../../img/tag_mental.png");
	background-repeat:no-repeat;
	background-size: contain;
}
.tag_nurse {
	background: #f8efe3 url("../../img/tag_nurse.png");
	background-repeat:no-repeat;
	background-size: contain;
}

/* class info */
#info_box {
	width: 95%;
	margin: 0 auto;
}
#info_con {
	width:100%;
	height:150px;
	background: url("../../img/info_bg.png");
	background-repeat:no-repeat;
	background-size: 100% 100%;
	font-size:100%;
}
#info_con:after {
	content : "";
	display : block;
	clear : both;
}
#info_con ul {
	width:75%;
	margin: 0 auto;
	padding-top:70px;
}
.subject {
	float:left;
	width:45%;
	color:#6e3e0d;
	text-align:center;
	line-height: 100%;
	font-weight:bold;
}
.topic {
	float: right;
	width:55%;
	color:#5b3909;
	font-weight:bold;
	text-align:center;
}
#info_btn {
	width:100%;
	padding-bottom:10px;
	text-align:center;
	font-size:0;
}
#info_btn a {
	padding: 0 5px;
}

/* class voca */
.primary_voca_bg {/*녹색배경*/
	background:#faf0ab url("../../img/primary_voca_bg.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-position: left 5px;
}
.middle_voca_bg {/*청색배경*/
	background:#faf0ab url("../../img/middle_voca_bg.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-position: left 5px;
}
.high_voca_bg {/*황색배경*/
	background:#faf0ab url("../../img/high_voca_bg.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-position: left 5px;
}
#voca_box {
	width:98%;
	padding-top:10px;
	margin: 0 auto;
}
#voca_con {
	width:100%;
	height:150px;
	margin:0 auto;
	background: url("../../img/voca_con_bg.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#voca_con ul {
	width:94%;
	margin:0 auto;
	padding-top:20px;
}
#voca_con .voca_che_off {
	background: url("../../img/che_off.png");
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:25px 24px;
	width:70%;
	height:24px;
	font-weight:bold;
	font-size:90%;
	padding-left:30px;
}
#voca_con .voca_che_on {
	background: url("../../img/che_on.png");
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:25px 24px;
	width:70%;
	height:24px;
	font-weight:bold;
	font-size:90%;
	padding-left:30px;
}
#voca_con .voca_eng {
	width:100%;
	color:#495165;
	font-size:130%;
	line-height:100%;
	padding:8px 0;
	font-weight:bold;
	text-align:center;
}
#voca_con .voca_kor {
	width:100%;
	color:#8492b8;
	font-size:130%;
	font-weight:bold;
	text-align:center;
}
#voca_ctr {
	width:98%;
	margin:2px auto;
	text-align:center;
}
#voca_ctr li {
	float:left;
	line-height:180%;
}
.voca_ctr_title {
	background: url("../../img/voca_ctr_title_ico.png");
	background-repeat:no-repeat;
	background-position:0 7px;
	padding-left:23px;
}
.voca_ctr_title span {
	font-weight:bold;
}
.voca_btn {
	font-size:0;
	padding:0 8px;
}
.voca_btn img {
	width:30px;
	height:30px;
}
.voca_repeat {
	background-image: url("../../img/btn_line.png");
	background-repeat:no-repeat;
	background-position: right 50%;
	background-size:2px 30px;
}
.voca_pause {}
.voca_time {
	font-weight:bold;
}
.voca_total {
	letter-spacing:1px;
	font-weight:bold;
}
.voca_total span{
	color:#FF0000;
}

/* class ani */
#ani_box {
	width:50%;
	margin:0 auto;
}
#ani_box a {
	display:block;
}

/*팝업*/
#popup_bg {
	float:left;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image: url("../../img/popup_bg.png");
	background-repeat:no-repeat;
	background-size:100% 100%;
}
#popup_box {
	width:60%;
	margin:0 auto;
	background-image: url("../../img/popup_box.png");
	background-repeat:no-repeat;
	background-position: 50% 10px;
	background-size:100%;
	text-align:center;
}

#popup_txt {
	font-weight:bold;
	padding-top:25%;
}
#popup_btn {
	padding-bottom:5%;
}
#popup_btn img {
	width:30%;
	padding-top:1%;
}

/* 세로화면 */
@media all and (orientation:portrait) {
	#login div label {
		display:block;
		font-weight:bold;
		color: #5b2d2f;
	}

	#grade_title {padding-top:3%;}
	#grade {display:none;}
	#grade2 {display:block;}
	#ani_box {
		width:90%;
		margin:0 auto;
	}

	#voca_con {
		height:250px;
	}
	#voca_con ul {
		padding-top:40px;
	}
	#voca_con .voca_eng {
		width:100%;
		color:#495165;
		font-size:150%;
		padding:20px 0;
		font-weight:bold;
		text-align:center;
	}
	#voca_con .voca_kor {
		width:100%;
		color:#8492b8;
		font-size:150%;
		font-weight:bold;
		text-align:center;
	}

	#voca_ctr div {
		display:block;
		padding-bottom:10px;
		text-align:right;
	}
	#voca_ctr div:after {
		content : "";
		display : block;
		clear : both;
	}
	#voca_ctr div ul {
		float:right;
	}
	/*팝업*/
	#popup_box {
		width:80%;
		height:50%;
		margin:10% auto;
		background-image: url("../../img/popup_box2.png");
		background-repeat:no-repeat;
		background-position: 50% 10px;
		background-size:100% 100%;
		text-align:center;
	}
	#popup_con {
		padding:0 10px;
	}
	#popup_txt {
		font-weight:bold;
		padding-top:30%;
	}
	#popup_btn {}
	#popup_btn img {
		width:50%;
		padding-top:1%;
	}
}

/* 가로화면 */
@media all and (orientation:landscape) {
	#grade {display:block;}
	#grade2 {display:none;}

	#voca_ctr div {
		display:inline-block;
		padding-bottom:10px;
		text-align:center;
	}
	#voca_ctr div:after {
		content : "";
		display : block;
		clear : both;
	}
}

/* 태블릿 가로 */
@media (min-width:770px) {
	#info_box {
		width: 700px;
	}
	#info_con {
	}

	/*팝업*/
	#popup_box {
		width: 500px;
	}
	#popup_btn img {
		width:150px;
	}
}
/* 가로-작은화면 540 */
@media screen and (max-width:540px) {

	#header_title {
		width:50%;
		font-size:100%;
		padding-top:15px;
	}
	#info_con {
		font-size:65%;
		line-height: 40%;
	}
	#info_con ul {
		width:75%;
		margin: 0 auto;
		padding-top:73px;
	}
	#info_con li {
	}
	
	.voca_btn img {
		width:25px;
		height:25px;
	}
}
/* 세로-작은화면 300 */
@media screen and (max-width:300px) {

	#header_title {
		width:50%;
		height:100%;
		margin-left:45px;
		padding-left:50px;
		color:#59330a;
		font-weight:bold;
		font-size:80%;
		padding-top:5px;
	}
	#header_title span {
		display:block
	}

	#header_title2 {
		width:50%;
		font-size:70%;
	}
	#header_title2 span {
		display:block
	}

	#info_con {
		height:150px;
		font-size:65%;
	}
	#info_con ul {
		padding-top:70px;
	}
	#voca_ctr li {
		line-height:150%;
	}
	.voca_ctr_title {
		background: url("../../img/voca_ctr_title_ico.png");
		background-repeat:no-repeat;
		background-position:0 6px;
		background-size:10px 10px;
		padding-left:13px;
		font-size:80%;
	}
	.voca_ctr_title span {
		font-weight:bold;
	}
	.voca_btn {
		font-size:0;
		padding:0 4px;
	}
	.voca_btn img {
		width:25px;
		height:25px;
	}
	.voca_repeat {
		background-image: url("../../img/btn_line.png");
		background-repeat:no-repeat;
		background-position: right 50%;
		background-size:2px 20px;
	}
	
	#popup_txt {
		font-size:70%;
		padding-top:100px;
	}
}

/*2018퀴즈추가*/
.txtcent {width:90%; padding:0 5%; text-align:center; }
.txtleft {width:90%; padding:0 5%;}
.txtleft li {clear:left; padding:3% 0; width:100%; border-bottom:solid 1px #d0c679; }

.quetxt {width:90%; padding:0 5%;}
.quetxt  .quetxt_num{font-weight:bold; font-size:20px; background-color:#7f4300; color:#fff; border:solid 2px #fff; border-radius:30px 30px 0 30px; width:30px; padding:3px; text-align:center; display:inline-block;}
.quetxt  .quetxt_que{font-size:20px; color:#7f4300;}

.contxt { margin-top:5%; padding:5px 30px; font-size:1.5em; font-weight:bold; background:#fff; border:solid 1px #d0c679; }
.oxbtn {width:30%; text-align:center; margin-top:5%; display:inline-block;}
.oxbtn a { padding:5px 30px; font-size:1.5em; font-weight:bold; text-align:center;  border:solid 1px #d0c679; background-color:#fff; }

.inpbox { width:100%; padding:3% 0; text-align:center; font-size: 1.2em; border:solid 1px #d0c679;}
.inpbtn { width:20%; padding:3px; text-align:center; font-size: 1.0em; cursor:pointer; border:solid 1px #009900; }

#ansmsg {
	background-color:rgba(35, 35, 35, 0.8);
	float:left; position:absolute; left:0px; top:0px; width:100%; height:100%;
	display:none;
}
.anstxt { position:absolute; left:4%; top:30%; width:80%; padding:5%; text-align:center; font-size:1.0em; font-weight:bold; background:#fff; color:#404040; border:solid 5px #fcf3b4;}
.answer { font-size:1.0em; font-weight:bold; color:#f00; }
.remark { font-size:0.8em; font-weight:bold; color:#222222; }

.btn_queok{ background-color:#cb6d03; color:#fff; font-size:20px; padding:2% 10%; margin-top:5%; border:none; border-radius:5px;}
.btn_queok2{ background-color:#ff6000; color:#fff; font-size:20px; padding:2% 10%; margin-top:5%; border:none; border-radius:5px;}