@import url('/teacher_new/css/nanumgothic.css'); @import url('/teacher_new/css/notosanskr.css'); @charset "euc-kr"; @import url("base.css"); /* layout111111111 */
#wrap {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  position: relative;
}

#header {
  width: 100%;
  overflow: hidden;
  background: url('../images/common/bg_gnb.gif') no-repeat 0 56px;
}

#header h1 {
  float: left;
  width: 230px;
  height: 88px;
  padding: 17px 0 0 0;
  text-align: center;
}

#header .util {
  float: right;
  margin-top: 32px;
  text-align: right;
}

#header .util li {
  float: left;
}

#header .util li a img {
  vertical-align: top;
}

#gnb {
  float: left;
  width: 714px;
  margin-top: 10px;
  overflow: hidden;
}

#gnb li {
  float: left;
}

#gnb li a {
  display: inline-block;
  height: 28px;
  vertical-align: top;
  overflow: hidden;
}

#gnb li a:active, #gnb li a:hover {
  border: none;
}

#gnb li.on a {
  cursor: default;
}

#gnb li a img {
  vertical-align: top;
}

#gnb li.on a img, #gnb li a:active img, #gnb li a:focus img, #gnb li a:hover img {
  margin-top: -30px;
}

#container {
  width: 100%;
  margin-top: 0;
  overflow: hidden;
}

#snbarea {
  float: left;
  width: 205px;
  margin-right: 26px;
}

#snbarea p.welcome-msg {
  margin-top: 1px;
  text-align: center;
  line-height: 16px;
  font-family: gulim;
  letter-spacing: -1px;
  color: #545454;
}

#snbarea p.welcome-msg em {
  color: #eb5e00;
  font-weight: bold;
}

#snbarea div.mem-info {
  padding: 18px 0 0 24px;
  height: 110px;
  background: url('../images/common/bg_mem_info.gif') no-repeat 0 0;
}

#snbarea div.mem-info ul {
  background: url('../images/common/bg_mem_info01.gif') no-repeat 0 0;
}

#snbarea div.mem-info ul li {
  height: 16px;
  color: #595858;
  font-size: 90%;
  line-height: 13px;
}

:root #snbarea div.mem-info ul li {
  line-height: 12px;
}

#snbarea div.mem-info ul li em {
  display: inline-block;
  width: 28px;
  padding-top: 2px;
  text-align: center;
  color: #fff;
}

#snbarea div.mem-info input.logout {
  vertical-align: top;
  margin-top: 10px;
}

#snb {
  padding: 0 0 84px 4px;
  background: url('../images/common/bg_snb.gif') no-repeat 0 bottom;
}

#snb h2 {
  margin-left: -4px;
}

#snb ul {
  position: relative;
  margin-top: -5px;
  padding-right: 19px;
}

#snb ul li a {
  display: block;
  padding: 8px 0 0 11px;
  height: 20px;
  line-height: 13px;
  font-family: gulim;
  background: url('../images/common/bg_snb_menu.gif') no-repeat 0 -1px;
}

:root #snb ul li a {
  line-height: 11px;
}

#snb ul li.end a {
  background: none;
}

#snb ul li.on a, #snb ul li a:active, #snb ul li a:focus, #snb ul li a:hover {
  background: url('../images/common/bg_snb_menu.gif') no-repeat 0 -37px !important;
  color: #fff;
  font-weight: bold;
}

#snbarea .quick-menu {
  height: 500px;
  padding: 13px 19px 0 16px;
  background: url('/ex/admin/images/common/bg_quick.gif') no-repeat 0 0;
}

#snbarea .quick-menu li {
  vertical-align: top;
}

#snbarea .quick-menu li a {
  display: block;
  height: 30px;
  padding-top: 6px;
  overflow: hidden;
  background: url('../images/common/bg_quick_menu.gif') no-repeat 0 6px;
}

#snbarea .quick-menu li.end a {
  height: 24px;
}

#contents {
  position: relative;
  float: left;
}

#location {
  position: absolute;
  top: 0;
  right: 0;
  font-family: gulim;
}

#location a {
  padding: 0 3px 0 9px;
  background: url('../images/common/bl_location.gif') no-repeat 0 2px;
  color: #9f9f9f;
}

#location a.home {
  padding: 0 1px 0 0;
  background: none;
}

#location span {
  padding-left: 9px;
  background: url('../images/common/bl_location02.gif') no-repeat 0 2px;
  color: #1e1e1e;
}

#footer {
  height: 65px;
  overflow: hidden;
  padding: 17px 0 0 66px;
  margin-top: 100px;
  border-top: 1px solid #dfdfdf;
}

#footer h1 {
  float: left;
  margin-right: 36px;
}

#footer address {
  float: left;
  padding-top: 6px;
}

/*                         design                           */
/* popup */
#pWrap {
  width: 100%;
  overflow: hidden;
  background: url("../images/common/popup/bg_popup.gif") repeat-x 0 0;
}

#pWrap h1 {
  height: 33px;
  margin-top: 38px;
  padding-left: 55px;
  background: url("../images/common/popup/bl_ptit.gif") no-repeat 34px 0;
  font-size: 14px;
}

#pcont {
  padding: 0 41px;
}

#pcont.etc {
  padding: 0 20px;
}

#pcont .data-a {
  margin-top: 43px;
}

#pcont .data-a th {
  font-size: 100%;
  padding: 8px 0 6px;
}

#pcont .data-a tbody td {
  color: #7e7e7e;
}

/* common */
@font-face {
		font-family:³ª´®°íµñ; src:ur(http://moda.ivyro.net/home/DBFNT0.eot);
}

.ctit {
  padding-left: 23px;
  background: url('../images/common/bl_ctit.gif') no-repeat 5px 5px;
  height: 28px;
  color: #333333;
  font-size: 20px;
	font-family: ³ª´®°íµñ, Dotum;
  letter-spacing: -0.5pt;
  line-height: 130%;
}

div.ctit-desc {
  padding-bottom: 13px;
  margin-top: 7px;
  background: url('../images/member/bg_ctit_desc_btm.gif') no-repeat 0 bottom;
}

div.ctit-desc p {
  padding: 15px 0 0 12px;
  background: url('../images/member/bg_ctit_desc.gif') no-repeat 0 0;
  color: #999999;
  font-weight: bold;
  font-family: ³ª´®°íµñ, Dotum;
}

.stit2, .stit {
  padding: 0 0 0 18px;
  margin-top: 40px;
  height: 23px;
  background: url('../images/common/bl_stit.gif') no-repeat 9px 1px;
}

.stit2 {
  margin-top: 15px;
}

input.text {
  height: 14px;
  padding-top: 2px !important;
  line-height: 14px;
  font-size: 11px;
}

input.text2 {
  height: 15px;
  padding-top: 2px !important;
  padding-left: 5px;
  line-height: 14px;
  font-size: 11px;
  color: #999999;
  border: 1px solid #b8b7b7;
}

input.radio {
  width: 13px;
  height: 13px;
  vertical-align: top;
  margin: 0;
  padding: 0;
}

div.sort-menu {
  padding-bottom: 7px;
}

div.sort-menu input.radio {
  margin-right: 3px;
}

div.sort-menu label {
  display: inline-block;
  padding-top: 1px;
  font-size: 90%;
  line-height: 13px;
  margin-right: 13px;
  border: 1px solid #fff;
  color: #7e7e7e;
  vertical-align: top;
}

:root div.sort-menu label {
  line-height: 11px;
}

div.btn-center3, div.btn-center2, div.btn-center {
  margin-top: 20px;
  text-align: center;
}

div.btn-center2 {
  margin-top: 70px;
}

div.btn-center3 {
  margin-top: 35px;
}

div.btn-center3 a, div.btn-center2 a, div.btn-center a {
  padding: 0 2px 0 2px;
}

div.btn-right {
  margin-top: 16px;
  padding-right: 24px;
  text-align: right;
}

div.btn-center a img, div.btn-right a img {
  vertical-align: top;
}

.tbl-under {
  margin-top: 35px !important;
}

.tit-under {
  margin-top: 55px !important;
}

.stit-under {
  margin-top: 0 !important;
}

.desc-under {
  margin-top: 40px !important;
}

.section_top {
  margin: 15px 0;
  font-size: 16px;
  float: right;
}

.section_top .group_lft {
  float: left;
  margin-right: 10px;
}

.section_top .tit, .section_top .txt {
  line-height: 38px;
  color: #222;
}

.section_top .group_rgt {
  float: right;
}

.section_top input[type=text] {
  height: 38px;
  box-sizing: border-box;
  padding: 0 0 0 5px;
  border: 1px solid #ccc;
}

.section_top .btn_ty1, .section_top .btn_ty2, .section_top .btn_ty4 {
  font-weight: 700;
  color: #fff;
}

.btn_search {
  padding: 0 26px 0 46px;
  background-repeat: no-repeat;
  background-position: 26px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARJJREFUeNpi/P//PwMS4AfiECA2AGJGIL4KxKuB+A0DOgBphOJAIH7zHxN8BuIkJHVgDGN4A/EfqMJjQFwKxEVAvBfJgAR0jexA/Agq2Q7EjGimF0DlPgKxELJGb6jEVSBmQncSFB+GqomDiTEBvakN9e5uIP7HgB1sgdL6MAGQxj9QNjMDbsAGpf8hh6oj1Bn3gJgVizNBfj4NVROJ7EcWIL4FlZgL5cM0gfzcDZV7DsTc6NFhDcQ/oQruAPEEIO4B4itI0fEQiOXRNYKwLRDfxZIAngHxZSj7PkwzI1qSAwWCCxAbATELEF8C4q1AzAXEe6Di94HYgQFHvGHDoMg/B7V5L7qNhIAQEM8C4oMAAQYAgDnCUFGoZUcAAAAASUVORK5CYII=);
}

.btn_ty2 {
  border-radius: 38px;
  border: 2px solid #919ba0;
  background-color: #919ba0;
}

.btn_ty1, .btn_ty2 {
  display: inline-block;
  height: 38px;
  width: 38px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0;
  background-position: center;
}

.section_top:after {
  content: "";
  display: block;
  clear: both;
}

table.brd_list thead tr th:first-child {
  border-left: none;
}

table.brd_list thead th {
  height: 44px;
  padding: 8px;
  border: 1px solid #ddd;
  text-align: center;
  background: #eee;
}

div.paging > * {
  display: inline-block;
  margin: 0 1px;
  cursor: pointer;
  height: 32px;
  min-width: 32px;
  line-height: 32px;
  padding: 0 10px;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-sizing: border-box;
}

div.paging {
  text-align: center;
  margin-top: 14px;
  display: block;
  margin: 30px 12px;
  vertical-align: middle;
}

div.paging strong, div.paging a {
  background-color: #b9bec3;
}

div.paging strong {
  background-color: #5e44b4;
}

div.paging strong.end {
}

div.paging a.prev, div.paging a.next, div.paging a.first, div.paging a.last {
  width: 15px;
  padding: 0;
  background: none;
}

div.paging a.prev {
  padding-right: 10px;
}

div.paging a.next {
  padding-left: 10px;
}

/* search form */
.search {
  width: 100%;
  margin-top: 40px;
  overflow: hidden;
}

.search fieldset {
  display: block;
  float: right;
  padding-left: 60px;
  background: url('../images/common/label_search.gif') no-repeat 0 4px;
}

.search fieldset input, .search fieldset select {
  float: left;
  vertical-align: middle;
  font-size: 11px;
  margin-right: 4px;
  color: #999999;
  padding: 1px;
}

.search fieldset select.end {
  margin-right: 10px;
}

.search fieldset input.btn {
  padding: 0;
  margin-right: 3px;
}

.search fieldset label {
  float: left;
  height: 12px;
  padding: 4px 2px 0 0;
  line-height: 13px;
  font-size: 11px;
  font-size: 90%;
  color: #575757;
}

.search fieldset span.note {
  float: left;
  font-size: 90%;
  padding: 0 9px 0 5px;
  margin-top: 3px;
  color: #999999;
}

.search.type1 {
  width: auto !important;
  width: 660px;
  padding: 5px 17px 5px 0;
  margin-top: 50px;
  background: url('../images/appraisal/label_month.gif') no-repeat right 0;
}

.search.type2 {
  width: auto !important;
  width: 660px;
  padding: 5px 17px 5px 0;
  margin-top: 10px;
  background: url('../images/appraisal/label_course.gif') no-repeat right 0;
}

.search.type3 {
  width: auto !important;
  width: 660px;
  padding: 5px 17px 5px 0;
  margin-top: 58px;
  background: url('../images/notice/bg_search.gif') no-repeat right 0;
}

.search.type3 fieldset, .search.type1 fieldset, .search.type2 fieldset {
  background: none;
}

/* data -tbl */
table colgroup {
  background: none;
}

div.form-under {
  margin-top: 0 !important;
}

div.data-a {
}

div.data-a table {
  table-layout: fixed;
  color: #4b505a;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  font-size: 16px;
}

div.data-a th, div.data-a td {
  height: 44px;
  padding: 8px;
  border: 1px solid #ddd;
  text-align: center;
}

div.data-a th {
  height: 44px;
  padding: 8px;
  border: 1px solid #ddd;
  text-align: center;
  background: #eee;
}

div.data-a td {
  background: #fff;
}

div.data-a th.etc, div.data-a tbody tr.end td {
  border-bottom: none;
  padding-bottom: 8px;
  background: #fff url("../images/common/bg_tbl.gif") repeat-x 0 bottom;
}

div.data-a tbody tr.end td.etc {
  border-bottom: 1px solid #dfdfdf;
  padding-bottom: 8px;
  background: none;
}

div.data-a tbody td.tdtype {
  padding-left: 7px !important;
  text-align: left;
  letter-spacing: -1px;
}

div.data-a tbody td.subject .reply img {
  vertical-align: middle;
  margin-right: 6px;
}

div.data-a tbody td.subject {
  padding-left: 14px;
  text-align: left;
  letter-spacing: -1px;
}

div.data-a tbody td.subject a {
  letter-spacing: 0;
}

div.data-a td a.print {
  display: inline-block;
  margin-bottom: 2px;
}

div.data-a td.bold {
  font-weight: bold;
}

div.data-a td.point {
  font-weight: bold;
  color: #e86d00 !important;
}

div.data-a .first {
  border-left: none;
}

/* board-write */
#pcont div.board-view, #pcont div.board-write {
  margin-top: 43px;
}

div.board-write {
  border-top: 2px solid #919ba0;
}

div.board-write select {
  padding: 1px;
}

div.board-write.answer {
  margin-top: 15px;
}

div.board-write table {
  table-layout: fixed;
  color: #4b505a;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  font-size: 16px;
}

div.board-write th, div.board-write td {
  line-height: 15px;
  padding: 9px 0 6px 0;
  border-bottom: 1px solid #dfdfdf;
}

div.board-write th {
  padding: 20px;
  border: 1px solid #ddd;
  text-align: center;
  background: #eee;
}

div.board-write td {
  color: #999999;
  background: #fff;
  padding: 8px 0 6px 15px;
  text-align: left;
}

div.board-write td input.text2 {
  vertical-align: top;
  margin-right: 10px;
}

div.board-write td input.text2.end {
  margin-right: 0;
}

div.board-write th.etc, div.board-write tbody tr.end td {
  border-bottom: none;
  padding-bottom: 8px;
  background: #fff url("../images/common/bg_tbl.gif") repeat-x 0 bottom;
}

div.board-write td input {
  vertical-align: top;
}

textarea.write-box {
  width: 556px;
  height: 163px;
  line-height: 25px;
  padding: 5px;
  font-size: 90%;
  color: #999999;
  border: 1px solid #b8b7b7;
}

/* board-view */
div.board-view {
  padding-top: 2px;
  background: url("../images/common/bg_tbl.gif") repeat-x 0 0;
}

div.board-view table {
  table-layout: fixed;
}

div.board-view th, div.board-view td {
  line-height: 15px;
  padding: 8px 0 6px 0;
  border-bottom: 1px solid #dfdfdf;
}

div.board-view th {
  background-color: #fafafa !important;
  color: #7e7e7e;
}

div.board-view td {
  color: #111111;
  background: #fff;
  font-size: 90%;
  padding-left: 15px;
}

div.board-view th.etc, div.board-view tbody tr.end td {
  border-bottom: none;
  padding-bottom: 8px;
  background: #fff url("../images/common/bg_tbl.gif") repeat-x 0 bottom;
}

div.textarea2, div.textarea {
  width: 556px;
  min-height: 183px;
  _height: 183px;
  line-height: 25px;
}

div.textarea2 {
  min-height: 50px;
  _height: 50px;
}

div.letter-write {
  padding-top: 2px;
  background: url("../images/common/bg_tbl.gif") repeat-x 0 0;
}

div.letter-write table {
  table-layout: fixed;
}

div.letter-write table select {
  padding: 1px;
  font-size: 12px;
}

div.letter-write th, div.letter-write td {
  line-height: 15px;
  padding: 6px 0 8px 0;
}

div.letter-write thead th {
  border-right: 1px solid #dfdfdf;
  background: #fafafa url("../images/common/bg_tbl.gif") repeat-x 0 bottom;
  font-size: 90%;
  color: #7e7e7e;
}

div.letter-write thead td {
  color: #999999;
  background: #fff url("../images/common/bg_tbl.gif") repeat-x 0 bottom;
  font-size: 90%;
  padding-left: 15px;
  text-align: left;
}

div.letter-write tbody td {
  padding: 14px 25px 0 35px;
}

div.letter-paper {
  width: 648px;
  height: 593px;
  padding-top: 52px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #808080;
  background: url("../images/member/birthday_1.jpg") no-repeat 0 0;
}

div.letter-paper input, div.letter-paper textarea {
  text-align: left;
  background: none;
}

div.letter-paper input {
  width: 390px;
  padding-left: 5px;
}

div.letter-paper textarea {
  width: 580px;
  height: 462px;
  padding: 7px;
  margin: 30px 0;
}

table td.box-in {
  padding: 10px 0 12px 15px !important;
}

table td.box-in2 {
  padding: 7px 0 7px 15px !important;
}

a.att {
  padding-left: 17px;
  background: url("../images/common/icon_att.gif") no-repeat 0 0;
  color: #338ee2 !important;
  text-decoration: underline;
}

div.board-view a.thumb, div.board-write a.thumb {
  display: block;
  width: 80px;
  height: 60px;
}

div.board-write a.thumb img {
  width: 80;
  height: 60px;
}

em.att-note {
  display: inline-block;
  height: 15px;
  padding: 3px 0 0 8px;
  font-size: 11px;
  color: #338ee2 !important;
  vertical-align: top;
}

/* study-present */
span.course-grade6, span.course-grade5, span.course-grade4, span.course-grade3, span.course-grade2, span.course-grade1, span.course-grade {
  float: left;
  width: 55px;
  height: 13px;
  margin-left: 8px;
  overflow: hidden;
  text-align: left;
  background: #fff url("../images/present/icon_course.gif") no-repeat 0 0;
}

span.course-grade6 span, span.course-grade5 span, span.course-grade4 span, span.course-grade3 span, span.course-grade2 span, span.course-grade1 span, span.course-grade span {
  display: block;
  text-indent: -999px;
  background: #fff url("../images/present/icon_course.gif") no-repeat 0 -13px;
}

span.course-grade span {
  width: 0;
}

span.course-grade1 span {
  width: 10px;
}

span.course-grade2 span {
  width: 20px;
}

span.course-grade3 span {
  width: 30px;
}

span.course-grade4 span {
  width: 40px;
}

span.course-grade5 span {
  width: 50px;
}

span.course-grade6 span {
  width: 60px;
}

#pcont .ptab {
  width: 100%;
  overflow: hidden;
  margin-top: -26px;
}

#pcont .ptab ul {
  float: right;
  padding-right: 19px;
}

#pcont .ptab li {
  float: left;
}

#pcont .ptab li a {
  display: inline-block;
  height: 26px;
  vertical-align: top;
  overflow: hidden;
}

#pcont .ptab li a:hover {
  border: none;
}

#pcont .ptab li a:hover img, #pcont .ptab li.on a img {
  margin-top: -28px;
}

#pcont .present-info {
  display: inline-block;
  margin-top: 43px;
}

#pcont .present-info div.lev {
  float: left;
  margin-right: 14px;
  border: 1px solid #dfdfdf;
}

#pcont .present-info div.lev img {
  vertical-align: top;
}

#pcont .present-info .data-a {
  float: left;
  margin-top: 0;
  width: 540px;
}

#pcont .present-info .data-a th, #pcont .present-info .data-a td {
  padding: 7px 0;
}

#pcont .present-info .data-a td {
  letter-spacing: 0;
}

/* calendar */
.calendar-util {
  width: 100%;
  overflow: hidden;
  padding-top: 70px;
}

.course-header {
  float: left;
  padding-left: 11px;
  line-height: 0;
  font-size: 0;
}

.tbl-desc {
  float: right;
  padding-right: 12px;
  color: #999999;
  line-height: 13px;
}

.tbl-desc em {
  font-weight: bold;
}

div.year-month {
  float: left;
  width: 100%;
  margin-top: -29px;
  text-align: center;
}

div.year-month select {
  width: 75px;
  padding: 1px;
  margin-right: 20px;
  vertical-align: top;
  color: #999;
}

div.course-util strong, div.year-month strong {
  display: inline-block;
  width: 60px;
  color: #f15500;
  line-height: 16px;
  font-size: 14px;
  text-align: center;
  vertical-align: 5px;
}

div.course-util a img, div.year-month a img {
  vertical-align: 3px;
}

div.course-util {
  text-align: center;
  margin-top: 42px;
}

div.course-util strong {
  width: 100px;
  vertical-align: 6px;
}

/* tbl calendar */
div.tbl-calendar {
  width: 662px;
  padding: 0 0 1px 1px;
  margin-top: 9px;
  overflow: hidden;
  background: #fff url("../images/present/bg_calendar.gif") no-repeat 0 0;
}

div.tbl-calendar table {
  table-layout: fixed;
  border-collapse: collapse;
  border-bottom: 1px solid #d9d7d7;
  border-spacing: 0;
}

div.tbl-calendar table th {
  padding: 6px 0 7px 0;
  line-height: 16px;
  letter-spacing: -1px;
  border-top: 1px solid #bcd9e7;
  background: url("../images/present/bg_calendar_th.gif") no-repeat right 0;
  font-family: dotum;
  color: #68a1c5;
}

div.tbl-calendar table td {
  height: 67px;
  color: #666666;
  font-size: 11px;
  vertical-align: top;
  line-height: 13px;
  border-top: 1px solid #d9d7d7;
  background: #f9f9f9 url("../images/present/bg_calendar_td.gif") no-repeat right 0;
}

div.tbl-calendar table td.today {
  background: #faedfb;
  border-top: 1px solid #d9b5e0;
  border-right: 1px solid #d9b5e0;
}

div.tbl-calendar table td.sunday {
  color: #eb168c;
}

div.tbl-calendar table td.satday {
  color: #7793eb;
}

div.tbl-calendar table td span.day {
  display: block;
  padding: 7px 0 0 5px;
}

span.addline {
  display: block;
  height: 14px;
  font-size: 90%;
  font-family: verdana;
  padding: 0 3px 0 5px;
  letter-spacing: -1px;
  margin-top: 2px;
  line-height: 10px;
  overflow: hidden;
}

span.addline em.course-b {
  float: left;
}

span.addline img {
  float: right;
  vertical-align: top;
}

div.step-info {
  width: 100%;
  height: 81px;
  margin-top: 7px;
  background: url("../images/present/icon_schedule.gif") no-repeat 0 0;
}

ul.ptab-step {
  width: 100%;
  margin-top: 11px;
  background: #f2f2f2;
  overflow: hidden;
}

ul.ptab-step li {
  float: left;
  line-height: 0;
  font-size: 0;
}

ul.ptab-step li a {
  display: inline-block;
  height: 25px;
  overflow: hidden;
}

ul.ptab-step li a:hover {
  border: none;
}

ul.ptab-step li.on img, ul.ptab-step li a:hover img {
  margin-top: -25px;
}

.tbl-schedule table {
  margin-top: 11px;
  border-spacing: 2px;
  text-align: center;
  vertical-align: middle;
  border-collapse: separate;
}

.tbl-schedule table thead th {
  padding: 7px 0 4px 0;
  background: #f2f9fb;
  border: 1px solid #bcd9e7;
  line-height: 16px;
  color: #68b1dc;
}

.tbl-schedule table th {
  background: #d8eded;
  border: 1px solid #afdedf;
  color: #3aa9c1;
}

.tbl-schedule table th.prev-study {
  background: #f3e6ee;
  border: 1px solid #e9b8d5;
  color: #c978aa;
}

.tbl-schedule table td {
  padding: 6px 0 6px 0;
  background: #f9f9f9;
  border: 1px solid #d9d7d7;
  text-align: center;
  vertical-align: middle;
  line-height: 16px;
}

.tbl-schedule table td.on {
  background: #fafad8;
  border: 2px solid #e1e080;
}

.tbl-schedule table td img {
  vertical-align: top;
}

.polltable {
  border: 2px solid #ffa414;
  padding: 10px;
  background: #fcfcf3;
  margin: 20px 0 0 0;
}

.questionN {
  font-size: 16px;
  font-weight: bold;
  color: #f48a33;
  font-family: Tahoma;
}

.questionT {
  font-size: 13px;
  font-weight: bold;
  color: #c77a1e;
}

/*ÆùÆ®*/
.font_oreng {
  color: #f76e00;
}

/*°øÅë*/
li {
  margin: 0 0 0 0px;
  list-style: none;
}

.a_C {
  text-align: center;
}

.a_R {
  text-align: right;
}

/*ÆÐµù, ¸¶Áø*/
.m_b5 {
  margin-bottom: 5px;
}

.m_b10 {
  margin-bottom: 10px;
}

.m_b20 {
  margin-bottom: 20px;
}

.m_b30 {
  margin-bottom: 30px;
}

.m_b40 {
  margin-bottom: 40px;
}

.m_b50 {
  margin-bottom: 50px;
}

.m_b60 {
  margin-bottom: 60px;
}

.m_t5 {
  margin-top: 5px;
}

.m_t10 {
  margin-top: 10px;
}

.m_t20 {
  margin-top: 20px;
}

.m_t30 {
  margin-top: 30px;
}

.m_t40 {
  margin-top: 40px;
}

.m_t50 {
  margin-top: 50px;
}

.m_t60 {
  margin-top: 60px;
}

.m_l5 {
  margin-left: 5px;
}

.m_l10 {
  margin-left: 10px;
}

.m_l20 {
  margin-left: 20px;
}

.m_l30 {
  margin-left: 30px;
}

.m_l40 {
  margin-left: 40px;
}

.m_l50 {
  margin-left: 50px;
}

.m_r5 {
  margin-right: 5px;
}

.m_r10 {
  margin-right: 10px
}

.m_r15 {
  margin-right: 10px
}

.m_r20 {
  margin-right: 20px
}

.m_r25 {
  margin-right: 25px
}

.m_r30 {
  margin-right: 30px
}

.m_r60 {
  margin-right: 60px
}

.p_t2 {
  padding-top: 2px;
}

.p_t5 {
  padding-top: 5px;
}

.p_t10 {
  padding-top: 10px;
}

.p_t15 {
  padding-top: 15px;
}

.p_t20 {
  padding-top: 20px;
}

.p_t25 {
  padding-top: 25px;
}

.p_t30 {
  padding-top: 30px;
}

.p_t40 {
  padding-top: 40px;
}

.p_t50 {
  padding-top: 50px;
}

.p_b5 {
  padding-bottom: 5px;
}

.p_b10 {
  padding-bottom: 10px;
}

.p_b20 {
  padding-bottom: 20px;
}

.p_b25 {
  padding-bottom: 25px;
}

.p_b30 {
  padding-bottom: 30px;
}

.p_b40 {
  padding-bottom: 40px;
}

.p_b50 {
  padding-bottom: 50px;
}

.p_l5 {
  padding-left: 5px;
}

.p_l10 {
  padding-left: 10px;
}

.p_l15 {
  padding-left: 15px;
}

.p_l20 {
  padding-left: 20px;
}

.p_l30 {
  padding-left: 30px;
}

.p_l50 {
  padding-left: 50px;
}

.p_r5 {
  padding-right: 5px;
}

.p_r10 {
  padding-right: 10px;
}

.p_r20 {
  padding-right: 20px;
}

.p_r25 {
  padding-right: 25px;
}

.p_r30 {
  padding-right: 30px;
}

.p_r40 {
  padding-right: 40px;
}

.p_r60 {
  padding-right: 60px;
}

.font14 {
  font-size: 14px;
}

.font_gray {
  color: #6e6e6e;
}

.B {
  font-weight: bold;
}

/*°æ½Ã´ëÈ¸È­¸é Ãß°¡*/
#contents2 {
  position: relative;
  float: left;
  width: 1080px;
  padding: 20px;
}

.ctit_add {
  background: #f1f1f1;
  margin-top: 7px;
  padding: 10px;
}

ul.tabadd {
  width: 100%;
  height: 26px;
  background: url(/teacher_new/images/study_data/bg_tab.gif) repeat-x;
  margin-top: 20px;
}

ul.tabadd li {
  float: left
}

.addoption {
  clear: both;
  float: left;
  position: absolute;
  padding-top: 3px;
}

.addoption select {
  margin-right: 20px;
}

.resulttext {
  font-weight: bold;
  color: #F30
}

dl.addinfo {
  padding: 10px 0;
  margin-top: 10px;
}

dl.addinfo dt {
  clear: both;
  float: left;
  font-weight: bold;
}

dl.addinfo dd {
  float: left
}

/*
#snb ul li > ul.ssnb > li > a.cnb {font-weight:normal;}
#snb ul li > ul.ssnb > li.on a.cnb,
#snb ul li > ul.ssnb > li > a.cnb:active, 
#snb ul li > ul.ssnb > li > a.cnb:focus, 
#snb ul li > ul.ssnb > li > a.cnb:hover {color:#444; font-weight:bold; font-size:11px;}
*/
ul.ssnb li {
  padding-left: 10px;
  font-size: 11px;
  background: none;
  letter-spacing: -1px;
}

#snb ul li > ul.ssnb > li > a.cnb {
  background: none;
  color: #444;
  font-size: 11px;
  font-weight: normal
}

#snb ul li > ul.ssnb > li > a.cnb:active {
  background: none;
  color: #444;
  font-size: 11px;
  font-weight: normal
}

#snb ul li > ul.ssnb > li > a.cnb:focus {
  background: none;
  color: #444;
  font-size: 11px;
  font-weight: normal
}

#snb ul li > ul.ssnb > li > a.cnb:hover {
  background: none !important;
  color: #444;
  font-size: 11px;
  font-weight: bold ;
}

ul.contup li {
  padding: 5px 0;
}

ul.contup li a.preview {
  margin-left: 5px;
  color: #06F
}

ul.contup li img {
  vertical-align: middle;
  margin-left: 5px;
}

/* Ä­Å¸Å¸ Ãß°¡ 2017 0531 */
.guidetext {
  margin-top: 20px;
  height: 90px;
}

ul.cttmenu {
  height: 70px;
}

ul.cttmenu li {
  float: left;
}

ul.cttlist1 {
  width: 710px;
}

ul.cttlist1 li {
  position: relative;
  float: left;
  margin: 10px 11px;
  width: 212px;
  height: 231px;
}

ul.cttlist1 li a {
  display: block;
  width: 100%;
  height: 100%;
}

ul.cttlist1 li a:hover {
  margin-left: -5px;
  margin-top: -5px;
  border: 5px solid #9900ff
}

ul.cttlist1 > li > .cover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  zoom: 1; position: absolute;
  display: block;
  width: 212px;
  height: 232px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100000000;
}

ul.cttlist2 {
  width: 710px;
}

ul.cttlist2 li {
  position: relative;
  float: left;
  margin: 10px 11px;
  width: 212px;
  height: 231px;
}

ul.cttlist2 li a {
  display: block;
  width: 100%;
  height: 100%;
}

ul.cttlist2 li a:hover {
  margin-left: -5px;
  margin-top: -5px;
  border: 5px solid #0066cc;
}

ul.cttlist2 > li > .cover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  zoom: 1; position: absolute;
  display: block;
  width: 212px;
  height: 232px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100000000;
}

ul.cttlist3 {
  width: 710px;
}

ul.cttlist3 li {
  position: relative;
  float: left;
  margin: 10px 11px;
  width: 212px;
  height: 231px;
}

ul.cttlist3 li a {
  display: block;
  width: 100%;
  height: 100%;
}

ul.cttlist3 li a:hover {
  margin-left: -5px;
  margin-top: -5px;
  border: 5px solid #009900;
}

ul.cttlist3 > li > .cover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  zoom: 1; position: absolute;
  display: block;
  width: 212px;
  height: 232px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100000000;
}

ul.cttlist4 {
  width: 710px;
}

ul.cttlist4 li {
  position: relative;
  float: left;
  margin: 10px 11px;
  width: 212px;
  height: 231px;
}

ul.cttlist4 li a {
  display: block;
  width: 100%;
  height: 100%;
}

ul.cttlist4 li a:hover {
  margin-left: -5px;
  margin-top: -5px;
  border: 5px solid #ff3300
}

ul.cttlist4 > li > .cover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  zoom: 1; position: absolute;
  display: block;
  width: 212px;
  height: 232px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100000000;
}

.layercon {
  position: absolute;
  left: -40px;
  margin: 0 auto;
  top: 250px;
  width: 1020px;
  height: 617px;
  border-top: 1px solid #002448;
  border-left: 1px solid #002448;
  border-right: 1px solid #002448;
  border-bottom: 12px solid #002448;
  background: url(/teacher_new/images/readnlearn/cantata/bg_layercon.png) top repeat-x #d3eeff;
  z-index: 100000001;
}

.layercon .picture {
  position: absolute;
  left: 18px;
  top: 65px;
}

.layercon .close {
  position: absolute;
  right: 18px;
  top: 10px;
}

.layercon .viewactlec {
  position: absolute;
  left: 253px;
  top: 512px;
  width: 281px;
  text-align: right
}

.layercon .viewactlec span {
  clear: both;
  padding-top: 3px;
  display: block;
  font-family: 'Noto Sans KR';
  font-size: 14px;
  color: #002448
}

.layercon .cttcon {
  position: absolute;
  left: 560px;
  top: 60px;
  width: 436px;
  height: 532px;
}

.layercon .cttcon h3.ctt_title {
  width: 436px;
  height: 70px;
  text-align: center;
  font-family: 'Noto Sans KR';
  font-size: 20px;
  font-weight: 600px;
  letter-spacing: -1px;
  color: #fff;
  padding-top: 5px;
}

.layercon .cttcon h3.ctt_title span {
  color: #a60cff;
  margin-right: 5px;
}

.layercon .cttcon h4.ctstitle {
  height: 112px;
}

.layercon .cttcon .ebook {
  clear: both;
  float: left;
  width: 132px;
  text-align: center;
  margin-right: 20px;
}

.layercon .cttcon ul li {
  width: 132px;
  height: 64px;
  border-radius: 6px;
  margin-bottom: 5px;
}

/* 20180206 º¯°æ */
.layercon .cttcon ul li a {
  display: block;
  color: #fff;
  font-family: 'Noto Sans KR';
  font-weight: 700px;
  font-size: 18px;
  height: 50px;
  letter-spacing: -1px;
  line-height: 120%;
  padding-top: 12px;
}

.layercon .cttcon ul li a span {
  font-size: 14px;
}

.layercon .cttcon ul li a:hover {
  text-decoration: none;
  font-size: 20px;
  letter-spacing: -1px;
  line-height: 110%;
  padding-top: 10px;
}

.layercon .cttcon .ebook ul li.s1 {
  background: #0f7dbf;
}

.layercon .cttcon .ebook ul li.s2 {
  background: #00a6d6;
}

.layercon .cttcon .ebook ul li.s3 {
  background: #30c0e4;
}

/* 20180206 Ãß°¡ */
.layercon .cttcon .ebook ul li.s4 {
  background: #6f44ee;
}

/* 20180206 Ãß°¡ */
.layercon .cttcon .readbook {
  float: left;
  width: 132px;
  text-align: center;
  margin-right: 20px;
}

.layercon .cttcon .readbook ul li.s1 {
  background: #d41e88;
  position: relative
}

.layercon .cttcon .readbook ul li.s2 {
  background: #f06ba8;
  position: relative
}

.layercon .cttcon .actbook {
  float: left;
  width: 132px;
  text-align: center
}

/* 20180206 Ãß°¡ */
.layercon .cttcon .actbook ul li {
  padding-top: 8px;
  height: 56px;
}

/* 20180206 Ãß°¡ */
.layercon .cttcon .actbook ul li.s1 {
  background: #d41e88;
  position: relative
}

.layercon .cttcon .actbook ul li.s2 {
  background: #ef509d;
  position: relative
}

.layercon .cttcon .actbook ul li.s3 {
  background: #f178af;
  position: relative
}

.layercon .cttcon .actbook ul li.s4 {
  background: #f498c0;
  position: relative
}

.layercon .cttcon .readbook ul li .ctstr {
  position: absolute;
  z-index: 10000;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 30px;
  border-radius: 25px;
  background: #FFF;
  padding-top: 10px;
}

.layercon .cttcon .actbook ul li .ctstr {
  position: absolute;
  z-index: 10000;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 30px;
  border-radius: 25px;
  background: #FFF;
  padding-top: 10px;
}

.tabbg {
  width: 100%;
  height: 27px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ff8314;
}

/* µðÁî´Ï Ãß°¡ 2017 11 06 */

/* ¼öÁ¤ 2017 1220 */
.guidetext {
  margin-top: 20px;
  height: 90px;
}

ul.dsnmenu {
  float: left;
  width: 427px;
  height: 58px;
  background: url(/teacher_new/images/readnlearn/disney/bg_dpm.png);
  padding-left: 15px;
  padding-top: 50px;
}

ul.dsnmenu li {
  float: left;
  margin-left: 4px;
}

ul.mas {
  float: left
}

ul.mas li {
  float: left;
  margin-left: 3px;
}

/* ¼öÁ¤ 2017 1220 */
.dsnlist {
  width: 710px;
}

.dsnlist ul li {
  position: relative;
  float: left;
  margin: 10px 12px;
  width: 208px;
  height: 320px;
}

.dsnlist ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.dsnlist ul li a:hover {
  margin-left: -5px;
  margin-top: -5px;
  border: 5px solid #9900ff
}

.alls {
  width: 653px;
  height: 60px;
  background: url(/teacher_new/images/readnlearn/disney/bg_allsound.gif);
  padding-top: 13px;
  padding-left: 57px;
  margin-bottom: 20px;
}

.alls .stas {
  float: left
}

.alls ul li {
  float: left;
  margin-left: 10px;
}

.dlayercon {
  position: absolute;
  left: -30px;
  top: 280px;
  width: 1050px;
  height: 800px;
  border-top: 1px solid #002448;
  border-left: 1px solid #002448;
  border-right: 1px solid #002448;
  border-bottom: 1px solid #002448;
  z-index: 10000000;
  background: #FFF
}

.dlayercon .bg18 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d18.jpg) no-repeat
}

.dlayercon .bg1 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d1.jpg) no-repeat
}

.dlayercon .bg2 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d2.jpg) no-repeat
}

.dlayercon .bg3 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d3.jpg) no-repeat
}

.dlayercon .bg4 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d4.jpg) no-repeat
}

.dlayercon .bg5 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d5.jpg) no-repeat
}

.dlayercon .bg6 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d6.jpg) no-repeat
}

.dlayercon .bg7 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d7.jpg) no-repeat
}

.dlayercon .bg8 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d8.jpg) no-repeat
}

.dlayercon .bg9 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d9.jpg) no-repeat
}

.dlayercon .bg10 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d10.jpg) no-repeat
}

.dlayercon .bg11 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d11.jpg) no-repeat
}

.dlayercon .bg12 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d12.jpg) no-repeat
}

.dlayercon .bg13 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d13.jpg) no-repeat
}

.dlayercon .bg14 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d14.jpg) no-repeat
}

.dlayercon .bg15 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d15.jpg) no-repeat
}

.dlayercon .bg16 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d16.jpg) no-repeat
}

.dlayercon .bg17 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d17.jpg) no-repeat
}

.dlayercon .bg18 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d18.jpg) no-repeat
}

.dlayercon .bg19 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d19.jpg) no-repeat
}

.dlayercon .bg20 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d20.jpg) no-repeat
}

.dlayercon .bg21 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d21.jpg) no-repeat
}

.dlayercon .bg22 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d22.jpg) no-repeat
}

.dlayercon .bg23 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d23.jpg) no-repeat
}

.dlayercon .bg24 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d24.jpg) no-repeat
}

.dlayercon .bg25 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d25.jpg) no-repeat
}

.dlayercon .bg26 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d26.jpg) no-repeat
}

.dlayercon .bg27 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d27.jpg) no-repeat
}

.dlayercon .bg28 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d28.jpg) no-repeat
}

.dlayercon .bg29 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d29.jpg) no-repeat
}

.dlayercon .bg30 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d30.jpg) no-repeat
}

.dlayercon .bg31 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d31.jpg) no-repeat
}

.dlayercon .bg32 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d32.jpg) no-repeat
}

.dlayercon .bg33 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d33.jpg) no-repeat
}

.dlayercon .bg34 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d34.jpg) no-repeat
}

.dlayercon .bg35 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d35.jpg) no-repeat
}

.dlayercon .bg36 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d36.jpg) no-repeat
}

.dlayercon .bg37 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d37.jpg) no-repeat
}

.dlayercon .bg38 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d38.jpg) no-repeat
}

.dlayercon .bg39 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d39.jpg) no-repeat
}

.dlayercon .bg40 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d40.jpg) no-repeat
}

.dlayercon .bg41 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d41.jpg) no-repeat
}

.dlayercon .bg42 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d42.jpg) no-repeat
}

.dlayercon .bg43 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d43.jpg) no-repeat
}

.dlayercon .bg44 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d44.jpg) no-repeat
}

.dlayercon .bg45 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d45.jpg) no-repeat
}

.dlayercon .bg46 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d46.jpg) no-repeat
}

.dlayercon .bg47 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d47.jpg) no-repeat
}

.dlayercon .bg48 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d48.jpg) no-repeat
}

.dlayercon .bg49 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d49.jpg) no-repeat
}

.dlayercon .bg50 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d50.jpg) no-repeat
}

.dlayercon .bg51 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d51.jpg) no-repeat
}

.dlayercon .bg52 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d52.jpg) no-repeat
}

.dlayercon .bg53 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d53.jpg) no-repeat
}

.dlayercon .bg54 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d54.jpg) no-repeat
}

.dlayercon .bg55 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d55.jpg) no-repeat
}

.dlayercon .bg56 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d56.jpg) no-repeat
}

.dlayercon .bg57 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d57.jpg) no-repeat
}

.dlayercon .bg58 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d58.jpg) no-repeat
}

.dlayercon .bg59 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d59.jpg) no-repeat
}

.dlayercon .bg60 {
  position: absolute;
  left: 0;
  top: 89px;
  width: 1050px;
  height: 711px;
  background: url(/teacher_new/images/readnlearn/disney/bg_d60.jpg) no-repeat
}

.dlayercon .close {
  position: absolute;
  right: 18px;
  top: 10px;
}

.dlayercon .lheader {
  width: 100%;
  height: 78px;
  padding-top: 11px;
  text-align: left;
}

.dlayercon .lheader .llogo {
  width: 300px;
  text-align: center;
  float: left
}

.dlayercon .lheader .booktitle {
  float: left
}

.dlayercon .dcon {
  position: relative;
}

.dlayercon .dcon .bookcover {
  position: absolute;
  top: 118px;
  left: 27px;
}

.dlayercon .dcon .allsound {
  position: absolute;
  top: 636px;
  left: 11px;
}

.dlayercon .dcon .allsound ul li {
  float: left;
  width: 116px;
  height: 51px;
  text-align: center;
  margin-right: 5px;
  font-family: 'Noto Sans KR';
}

.dlayercon .dcon .allsound ul li a {
  display: block;
  height: 41px;
  color: #fff;
  text-decoration: none;
  line-height: 120%;
  padding-top: 10px;
  font-size: 12px;
  opacity: 0.7;
  filter: alpha(opacity=70);
  letter-spacing: -1px;
  word-spacing: 2px
}

.dlayercon .dcon .allsound ul li a span {
  font-size: 14px;
  font-weight: bold;
}

.dlayercon .dcon .allsound ul li a:hover {
  display: block;
  height: 41px;
  color: #fff;
  text-decoration: none;
  line-height: 120%;
  padding-top: 10px;
  font-size: 12px;
  opacity: 1;
  filter: alpha(opacity=100);
  /* For IE8 and earlier */
}

.dlayercon .dcon .allsound ul li .ctstr {
  position: absolute;
  z-index: 10000;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 30px;
  border-radius: 25px;
  background: #FFF;
  padding-top: 10px;
}

.dlayercon .dcon .insound {
  position: absolute;
  top: 615px;
  left: 443px;
}

.dlayercon .dcon .insound ul li {
  float: left;
  width: 118px;
  height: 53px;
  text-align: center;
  margin-right: 12px;
  font-family: 'Noto Sans KR';
}

.dlayercon .dcon .insound ul li a {
  display: block;
  height: 43px;
  color: #fff;
  text-decoration: none;
  line-height: 120%;
  padding-top: 10px;
  font-size: 12px;
  opacity: 0.9;
  filter: alpha(opacity=90);
  letter-spacing: -1px;
  word-spacing: 2px
}

.dlayercon .dcon .insound ul li a span {
  font-size: 14px;
  font-weight: bold;
}

.dlayercon .dcon .insound ul li a:hover {
  display: block;
  height: 45px;
  color: #fff;
  text-decoration: none;
  line-height: 120%;
  padding-top: 8px;
  font-size: 14px;
  opacity: 1;
  filter: alpha(opacity=100);
  /* For IE8 and earlier */
}

.dlayercon .dcon .insound ul li .ctstr {
  position: absolute;
  z-index: 10000;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 30px;
  border-radius: 25px;
  background: #FFF;
  padding-top: 10px;
}

.dlayercon .dcon ul.viewm {
  position: absolute;
  top: 82px;
  left: 371px;
}

.dlayercon .dcon ul.viewm li {
  width: 210px;
  height: 83px;
  cursor: pointer
}

.dlayercon .dcon ul.viewm li.m1 {
  position: absolute;
  left: 218px;
  top: 0;
}

.dlayercon .dcon ul.viewm li.m2 {
  position: absolute;
  left: 432px;
  top: 100px;
}

.dlayercon .dcon ul.viewm li.m3 {
  position: absolute;
  left: 432px;
  top: 241px;
}

.dlayercon .dcon ul.viewm li.m4 {
  position: absolute;
  left: 218px;
  top: 345px;
}

.dlayercon .dcon ul.viewm li.m5 {
  position: absolute;
  left: 0;
  top: 241px;
}

.dlayercon .dcon ul.viewm li.m6 {
  position: absolute;
  left: 0;
  top: 100px;
}

/* µðÁî´Ï ¹«·á ·¹ÀÌ¾î */
ul > li > .cover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  zoom: 1;
  position: absolute;
  display: block;
  width: 208px;
  height: 265px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100000;
}

/* ÇÛ·Î¿ì¸®µù ¹«·á ·¹ÀÌ¾î */
ul.hrbook > li > .cover {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);
  zoom: 1; position: absolute;
  display: block;
  width: 226px;
  height: 345px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 100000;
}

/* 20180725 Çï·Î¿ì¸®µù Ãß°¡ */
.hello_wrap {
  clear: both;
  position: relative;
  width: 100%;
  height: 1200px;
}

.hello_wrap .hr_tab1 {
  width: 710px;
  height: 50px;
  padding-top: 40px;
}

.hello_wrap .hr_tab1 li {
  float: left
}

.hello_wrap .hr_tab2 {
  width: 710px;
  height: 80px;
  padding-top: 30px;
}

.hello_wrap .hr_tab2 li {
  float: left;
  margin-left: 8px;
}

.hello_wrap .hrbook {
  width: 700px;
  padding-left: 10px
}

.hello_wrap .hrbook li {
  float: left;
  width: 228px;
  text-align: center;
  overflow: hidden;
  height: 350px;
  cursor: pointer;
  position: relative;
}

.hello_wrap .hrbook li img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #666
}

.hello_wrap .hrbook2 {
  width: 700px;
  padding-left: 10px
}

.hello_wrap .hrbook2 li {
  float: left;
  width: 228px;
  text-align: center;
  overflow: hidden;
  height: 350px;
  cursor: pointer;
  position: relative;
}

.hello_wrap .hrbook2 li img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #666
}

.hralls {
  width: 653px;
  height: 60px;
  background: url(helloreading/bg_allsound.gif);
  padding-top: 13px;
  padding-left: 57px;
  margin-bottom: 20px;
  clear: both
}

.hralls .hrstas {
  float: left
}

.hralls ul li {
  float: left;
  margin-left: 10px;
}

/* Çï·Î¿ì¸®µù·¹ÀÌ¾îÆË¾÷¼öÁ¤ 20180828 */
#contpop {
  position: fixed;
  width: 1050px;
  height: 750px;
  border: 1px solid #000;
  z-index: 10000;
  background: #fff;
}

#contpop .close {
  position: absolute;
  top: 22px;
  right: 22px;
}

#contpop .close img {
  cursor: pointer
}

#contpop .booktitle {
  width: 1002px;
  padding: 36px 0;
  background: #4aacd1;
  text-align: left;
  padding-left: 48px;
}

#contpop .bookcont {
  padding: 76px 50px 76px 70px;
}

#contpop .bookcont .maincover {
  float: left;
  width: 370px;
}

#contpop .bookcont .maincover dl {
  width: 331px;
}

#contpop .bookcont .maincover dl dt {
}

#contpop .bookcont .maincover dl dd {
  margin-top: 10px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Noto Sans KR';
  color: #000
}

#contpop .bookcont .maincover dl dd span {
  font-weight: 700;
}

#contpop .bookcont .bookinfo {
  float: left
}

#contpop .bookcont .bookinfo ul {
  overflow: hidden;
  margin-bottom: 68px;
}

#contpop .bookcont .bookinfo ul li {
  float: left;
  margin-right: 18px;
  overflow: hidden
}

#contpop .bookcont .bookinfo h2 {
  text-align: left;
  font-size: 26px;
  font-weight: 500;
  font-family: noto sans kr;
  color: #000;
  height: 68px;
}

#contpop .bookcont .bookinfo h3 {
  height: 40px;
  text-align: left;
  overflow: hidden
}

/* Çï·Î¿ì¸®µù·¹ÀÌ¾îÆË¾÷¼öÁ¤ 20180828 */

/* Çï·Î¿ì¸®µùÀ§ÀÎÆí */
.hr2top {
  clear: both;
  width: 100%;
  height: 123px;
  background: #bdb6ad;
  text-algin: center;
  padding-top: 25px;
}

#contpop2 {
  position: fixed;
  width: 1050px;
  height: 750px;
  border: 1px solid #000;
  z-index: 10000;
  background: #fff;
}

#contpop2>.close {
  position: absolute;
  top: 22px;
  right: 22px;
}

#contpop2>.close img {
  cursor: pointer
}

#contpop2>.booktitle {
  width: 1002px;
  padding: 36px 0;
  background: #bdb6ad;
  text-align: left;
  padding-left: 48px;
}

#contpop2>.bookcont {
  padding: 76px 50px 76px 70px;
}

#contpop2>.bookcont>.maincover {
  float: left;
  width: 370px;
}

#contpop2>.bookcont>.maincover>dl {
  width: 331px;
}

#contpop2>.bookcont>.maincover>dl dt {
}

#contpop2>.bookcont>.maincover>dl dd {
  margin-top: 10px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Noto Sans KR';
  color: #000
}

#contpop2>.bookcont>.maincover>dl dd span {
  font-weight: 700;
}

#contpop2>.bookcont>.bookinfo {
  float: left
}

#contpop2>.bookcont>.bookinfo>ul {
  overflow: hidden;
  margin-bottom: 68px;
}

#contpop2>.bookcont>.bookinfo>ul li {
  float: left;
  margin-right: 14px;
  overflow: hidden
}

#contpop2>.bookcont>.bookinfo>h2 {
  text-align: left;
  font-size: 26px;
  font-weight: 500;
  font-family: noto sans kr;
  color: #000;
  height: 68px;
}

#contpop2>.bookcont>.bookinfo>h3 {
  height: 40px;
  text-align: left;
  overflow: hidden
}

#contpop2>.bookcont>.bookinfo>ul.thum li img {
  width: 172px;
  height: 229px;
}

.hello_wrap .hrbook2 {
  width: 952px;
  margin: 0 auto
}

.hello_wrap .hrbook2 li {
  float: left;
  width: 238px;
  text-align: center;
  overflow: hidden;
  height: 350px;
  cursor: pointer;
  position: relative;
}

.hello_wrap .hrbook2 li img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid #666
}

/* Çï·Î¿ì¸®µùÀ§ÀÎÆí */
.storyplus_wrap #contents {
  float: none;
}

#wrapper.storyplus_wrap {
  min-height: 800px;
}

.storyplus_wrap .booknum {
  position: sticky;
  background: #514193;
  line-height: 0;
  font-size: 0;
  top: 0;
  z-index: 10;
  min-width: 1040px;
  left: 0;
  right: 0;
}

.storyplus_wrap .booknum li {
  position: relative;
  display: inline-block;
}

.storyplus_wrap .booknum li:first-child:before {
  left: -1px;
}

.storyplus_wrap .booknum li:first-child:before, .storyplus_wrap .booknum li:after {
  content: '';
  position: absolute;
  background: #fff;
  right: -1px;
  width: 1px;
  top: 4px;
  height: 43px;
}

.storyplus_wrap .booknum li:nth-child(1).on {
  background: #f6ab00;
}

.storyplus_wrap .booknum li:nth-child(2).on {
  background: #00a47a
}

.storyplus_wrap .booknum li:nth-child(3).on {
  background: #008dc4
}

.storyplus_wrap .booknum li:nth-child(4).on {
  background: #7c6eb0
}

.storyplus_wrap .booknum li:not(.on):hover {
  transition: background .3s;
  background: rgba(255, 255, 255, 0.2);
}

.storyplustop {
  margin-top: 4px;
  overflow: hidden;
  height: 220px;
  max-width: 100%;
  background: url(/buddyMain/imgs/rnl/storyplus_subtitle.png) center center / 1500px no-repeat;
}

.storyplustop:nth-of-type(1) {
  background-color: #fdd118;
}

.storyplustop:nth-of-type(2) {
  background-color: #6fc1ac;
}

.storyplustop:nth-of-type(3) {
  background-color: #6eb2d9
}

.storyplustop:nth-of-type(4) {
  background-color: #a89fce
}

.storypluslist {
  margin-top: 60px;
}

.storypluslist > .mainlist {
  display: flex;
  flex-wrap: wrap;
  margin: -187px auto 0;
  width: 969px;
}

.storypluslist > .mainlist:last-child {
  margin-bottom: 40px;
}

.storypluslist > .mainlist > li {
  position: relative;
  flex: 1;
  min-width: 33%;
  height: 386px;
  text-align: center;
}

.storypluslist > .mainlist > li:before {
  content: '';
  position: absolute;
  top: 251px;
  height: 2px;
  background: #1d1d1b;
  left: -40px;
  right: -40px;
  z-index: 1;
}

.storypluslist > .mainlist > li > a {
  display: block;
}

.storypluslist > .mainlist > li img:first-of-type, .storypluslist > .mainlist > li > div {
  border: 10px solid #fff;
  border-bottom: 0;
  transform-origin: bottom center;
  transition: transform .3s, border-color .3s;
  transform: scale(.92);
  /* box-shadow: inset 0 1px 0px 1px #000; */
}

.storypluslist > .mainlist > li > a:hover > img:first-of-type, .storypluslist > .mainlist > li > div:hover, .storypluslist > .mainlist > li > div:hover + img {
  transform: scale(1);
  /* border-color: #ed6d00; */
}

.storypluslist > .mainlist > li img:last-child {
  position: absolute;
  top: 266px;
  left: 0;
  right: 0;
  margin: auto;
}

.storypluslist > .mainlist > li > div {
  width: 181px;
  height: 243px;
  left: 0;
  right: 0;
  margin: auto;
  border: 0;
  top: 10px;
  z-index: 1;
}

.storypluslist > .mainlist:after {
  content: '';
  clear: both;
  display: block;
}

.storyplus_wrap #id_LayerView_Loding {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.storyplus_wrap #id_LayerView {
  position: fixed;
  z-index: 6000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
}

#id_LayerView .storyplus_wrap {
  width: 1038px;
  height: 800px;
  position: absolute;
}

#id_LayerView .storyplus_wrap > section {
  width: 1038px;
}

.storyplus_wrap > section {
  width: 1050px;
  height: 800px;
  background: 0 0/100% no-repeat;
  position: relative;
}

.storyplus_wrap.rnl1-6 > section {
  background-image: url(/buddyMain/imgs/rnl/storyplus/lyrview/bg1-6.jpg);
}

.storyplus_wrap.rnl7-12 > section {
  background-image: url(/buddyMain/imgs/rnl/storyplus/lyrview/bg7-12.jpg);
}

.storyplus_wrap.rnl13-18 > section {
  background-image: url(/buddyMain/imgs/rnl/storyplus/lyrview/bg13-18.jpg);
}

.storyplus_wrap.rnl19-24 > section {
  background-image: url(/buddyMain/imgs/rnl/storyplus/lyrview/bg19-24.jpg);
}

.storyplus_wrap > section > * {
  position: absolute;
}

.storyplus_wrap > section img {
  pointer-events: none;
}

.storyplus_wrap > section header {
  left: 39px;
  top: 45px;
}

.storyplus_wrap > section .bookCover {
  left: 138px;
  top: 135px;
}

.storyplus_wrap > section .anchor_raired {
  left: 44px;
  top: 571px;
}

.storyplus_wrap > section .anchorTxt {
  left: 211px;
  top: 606px;
}

.storyplus_wrap > section .anchorTxt[src$="24.png"] {
  top: 601px;
}

.storyplus_wrap > section .pairedTxt {
  left: 213px;
  top: 657px;
}

.storyplus_wrap > section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  left: 674px;
  top: 175px;
}

.storyplus_wrap > section ul li {
  margin-bottom: 14px;
  width: 207px;
  height: 36px;
  background-color: #c7e0ea;
  border-radius: 36px;
  cursor: pointer;
}

.storyplus_wrap .rnl1-6 > section ul li {
  background: #fcf2d0;
}

.storyplus_wrap .rnl7-12 > section ul li {
  background: #c1e4d7;
}

.storyplus_wrap .rnl19-24 > section ul li {
  background: #d7d4e9
}

.storyplus_wrap > section ul li a {
  display: block;
}

.storyplus_wrap > section ul li img {
  transform: scale(0.83);
  transition: all 0.3s;
  transform-origin: center center;
}

.storyplus_wrap > section ul li:hover img {
  transform: scale(1);
}

.storyplus_wrap > section button {
  padding: 0;
  background: no-repeat;
  border: none;
  outline: none;
  cursor: pointer;
  right: 25px;
  top: 27px;
}

.storyplus_wrap > section ul > li:nth-child(3), .storyplus_wrap > section ul > li:nth-child(4), .storyplus_wrap > section ul > li:nth-child(7), .storyplus_wrap > section ul > li:nth-child(8) {
  margin-bottom: 30px;
}

.storyplus_wrap > section ul > li:nth-child(6) {
  margin-bottom: 79px;
}

.storyplus_wrap > section .ctstr {
  position: absolute;
  z-index: 10000;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 30px;
  border-radius: 25px;
  background: #FFF;
  padding-top: 10px;
  text-align: center;
}

.storypluslogo {
  position: absolute;
  margin: auto;
  max-width: 1835px;
  right: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  height: 100%;
  top: 220px;
  pointer-events: none;
}

.storypluslogo img {
  position: sticky;
  top: 55px;
  float: left;
}

.storyplus_wrap {
  width: 100%;
}

.storyplus_wrap > .introwrap {
  padding: 30px 0 78px 0;
  background: #0061a3;
}

.storyplus_wrap .intro {
  margin: auto;
  position: relative;
  width: 1173px;
  text-align: center;
  display: block;
  overflow: hidden;
  background: #fff;
  width: 1173px;
  text-align: center;
  border-radius: 10px;
  padding: 74px 0;
}

.storyplus_wrap {
  width: 100%;
}

.storyplus_wrap > .introwrap {
  padding: 30px 0 78px 0;
  background: #0061a3;
}

.storyplus_wrap .intro {
  margin: auto;
  position: relative;
  width: 1173px;
  text-align: center;
  display: block;
  overflow: hidden;
  background: #fff;
  width: 1173px;
  text-align: center;
  border-radius: 10px;
  padding: 74px 0;
}

@media (max-width: 918px) {
  .storypluslogo {
    top: 170px;
  }
}

.nav {
  position: relative;
}

.nav a {
  display: inline-block;
  height: 42px;
  line-height: 42px;
  box-sizing: border-box;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 21px;
  color: #fff;
  font-family: ³ª´®°íµñ, Dotum;
}

.nav a:hover {
}

.nav a:nth-child(1) {background:#5e44b4}
.nav a:nth-child(2) {background:#46a5f0}
.nav a:nth-child(3) {background:#ff842a}