@charset "utf-8";

#toc-modal {
  position: absolute; /* 18.04.18 fixed -> absolute */
  width: 493px;
  height: 707px;
  border-radius: 14px;
  overflow: hidden;
}
.toc-modal-outer {
  height: 707px;
  border-radius: 14px;
  background: #13b4c8;
  padding: 10px;
  overflow: auto;
}
.toc-modal-inner {
  height: 687px;
  padding: 5px;
  border: 1px dashed rgba(255, 255, 255, .4);
  border-radius: 14px;
}
.toc-modal-content {
  border-radius: 9px;
  height: 677px;
  background: #fff;
  overflow: auto;
}

.L-unit {
  height: 58px;
  color: #2d759d;
  font-weight: bold;
  font-size: 26px;
  background-color: #e9f5f9;
  line-height: 58px;
  cursor: default;
}
.L-unit .no {
  display: inline-block;
  margin-left: 18px;
  border-radius: 50%;
  behavior: url(PIE.htc); /* remove if you don't care about IE8 */
  width: 30px;
  height: 30px;
  background: #297099;
  font-size: 25px;
  color: #fff;
  text-align: center;
  font-weight: normal;
  line-height: 30px;
}
.L-unit .name {
  display: inline-block;
  margin-left: 8px;
}

.M-unit {
  height: 47px;
  color: #2999c9;
  font-weight: bold;
  font-size: 21px;
  /*cursor: pointer;*/
  pointer-events: none;
}
.M-unit .box {
  padding: 0px 19px;
  border-top: 2px dashed #cceff4;
}
.M-unit .box-borderN {
  padding: 0px 19px;
}
.M-unit .box .name,
.M-unit .box-borderN .name {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0px 40px;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
}
.M-unit .box .name.active,
.M-unit .box .name:hover,
.M-unit .box-borderN .name.active,
.M-unit .box-borderN .name:hover {
  color: #fff;
  background-color: #16b8cc;
}

/*소단원*/
.S-unit {
  width: 100%;
  height: 32px;
  line-height: 32px;
  color: #10b6cb;
  font-weight: bold;
  font-size: 20px;
  cursor: pointer;
}
.S-unit .box {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0px 19px;
  background: #fff;
}
.S-unit .box .name {
  display: inline-block;
  width: 105%;
  height: 100%;
  padding: 0px 60px;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
}
.S-unit .box .name.active,
.S-unit .box .name:hover,
.S-unit .box .name:active {
  background-color: #e5f7f9;
}
.S-unit .box .arrow {
  position: absolute;
  margin-top: 5px;
  right: 29px;
  width: 21px;
  height: 20px;
  vertical-align: middle;
  background: transparent url(../images/toc/arrow.png) left top no-repeat;
  display: none;
}
.S-unit .box .arrow.active {
  display: initial;
}

#subject-modal {
  border-radius: 14px;
  /*margin-left: 47%;*/
  margin-top: 10px; /*임시용*/
  margin-left: 810px; /*임시용*/
  width: 493px;
  height:auto;
  overflow:hidden;
  top:62px !important;
  background: transparent;

  overflow: hidden;
  background: #13b4c8;
  padding: 10px;
}
.subject-modal-inner {
  width: 100%;
  height: auto;
  padding: 5px;
  border: 1px dashed rgba(255, 255, 255, .4);
  border-radius: 14px;
}
.subject-modal-content {
  border-radius: 9px;
  height: auto;
  overflow: hidden;
  background: #13b4c8;
}
.subject-modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 39px;
  height: 40px;
  background: url(../images/ui/ui_closeBtn.png) no-repeat;
  cursor: pointer;
}
.subject-modal-close:hover {
  background: url(../images/ui/ui_closeBtn_over.png) no-repeat;
}

/*페이지 정보*/
.pageUnit {
  width: 100%;
  height: 35px;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}
/*.pageUnit .subject {
  width: auto;
  height: 60px;
  overflow: hidden;
}*/
.pageUnit .arrow {
  margin: 0px 16px;
  width: 21px;
  height: 20px;
  vertical-align: middle;
  background: transparent url(../images/toc/arrow.png) left top no-repeat;
  visibility: hidden;
}
.pageUnit .arrow.active,
.pageUnit .arrow.hover {
  visibility: visible;
}

#contentPageBox {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.contentExplain {
  position: absolute; /* 18.04.18 fixed -> absolute */
  width: 1104px;
  height: 258px;
  bottom: 0px; /* 18.04.18 77 -> 0 */
  background: #fff;
}
.contentExplain .contentExplainImage {
  position: absolute;
  left: 12px;
  width: 1099px;
  height: 258px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}
.contentExplain .explain_small {
  position: absolute;
  left: 12px;
  top: 0px;
  width: 1106px;
  height: 258px;
  pointer-events: none;
  background: transparent url(../images/toc/explain_small.png) left top no-repeat;
}
.contentExplain .explain_middle {
  position: absolute;
  left: 12px;
  top: -150px;
  width: 1106px;
  height: 398px;
  pointer-events: none;
  background: transparent url(../images/toc/explain_middle.png) left top no-repeat;
}
.contentExplain .explain_large {
  position: absolute;
  left: 12px;
  top: -402px;
  width: 1106px;
  height: 608px;
  pointer-events: none;
  background: transparent url(../images/toc/explain_large.png) left top no-repeat;
}

.contentAnswer {
  position: absolute; /* 18.04.18 fixed -> absolute */
  width: 1104px;
  height: 258px;
  bottom: 0px; /* 18.04.18 77 -> 0 */
  background: #fff;
}
.contentAnswer .contentAnswerImage {
  position: absolute;
  left: 12px;
  width: 1099px;
  height: 258px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}
.contentAnswer .answer_small {
  position: absolute;
  left: 12px;
  top: 0px;
  width: 1106px;
  height: 258px;
  pointer-events: none;
  background: transparent url(../images/toc/answer_small.png) left top no-repeat;
}
.contentAnswer .answer_middle {
  position: absolute;
  left: 12px;
  top: -150px;
  width: 1106px;
  height: 398px;
  pointer-events: none;
  background: transparent url(../images/toc/answer_middle.png) left top no-repeat;
}
.contentAnswer .answer_large {
  position: absolute;
  left: 12px;
  top: -402px;
  width: 1106px;
  height: 608px;
  pointer-events: none;
  background: transparent url(../images/toc/answer_large.png) left top no-repeat;
}

#pagination {
  position: absolute;
  top: 58px;
  right: 10px;
}
/*#pagination .tabs_tab {
  width: 83px;
  height: 67px;
  line-height: 67px;
  font-weight: bold;
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 10px;
  -webkit-box-shadow: 2px 2px 10px #666666;
  -moz-box-shadow: 2px 2px 10px #666666;
  box-shadow: 2px 2px 10px #666666;
  color: #ffffff;
  font-size: 18px;
  background: #13b3c8;
  padding-left: 15px;
  margin-top: 3px;
  text-decoration: none;
  cursor: pointer;
}
#pagination .tabs_tab.active {
  background: #9368f6;addClass
  text-decoration: none;
}*/

#pagination .tabs_tab {
  width: 83px;
  height: 67px;
  line-height: 67px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding-left: 15px;
  margin-top: 3px;
  text-decoration: none;
  background: transparent url(../images/toc/tab_out.png) left top no-repeat;
  cursor: pointer;

  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
  filter: url(#drop-shadow);
  -webkit-filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));
  filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.3));
}
#pagination .tabs_tab.active {
  background: transparent url(../images/toc/tab_over.png) left top no-repeat;
}