@charset "utf-8";

input {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

body {
  width: 100%;
  height: 100%;
  background: url(../images/main/bg_pt.jpg) left top/46px repeat;
}

.mainFrame {
  width: 1280px;
  height: 800px;
}

div {
  user-select: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "KoPubDotumBold";
}
ul {
  list-style: none;
}

.handler {
  cursor: pointer;
}
.hide {
  display: none;
}
/*
.background {
  background: url(../images/main/gd.jpg) no-repeat;
  width: 1280px;
  height: 800px;
  background-size: contain;
   opacity: 0.5; 
}  

 .background {
  width: 1680px;
  height: 800px;
  background-size: contain;
  position: absolute;
  left: -200px;
}   

*/

#canvas_container {
  position: absolute;
  width: 90px;
  height: 90px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  display: none;
}

#loading_canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 90px;
  height: 90px;
}

.content-wraper {
  position: absolute;
  left: 60px;
  top: 25px;
  width: 1160px;
  height: 770px;
  z-index: 2;
  overflow-y: hidden;
  overflow-x: hidden;
  border-radius: 0 0 5px 5px;
  background-color: #fff;
}

.top_background {
  background: url(../images/main/top_bg.png) no-repeat;
  background-size: contain;
  border-radius: 0 0 30px 30px;
  width: 1196px;
  height: 65px;
  position: absolute;
  left: 43px;
  top: 0;
  z-index: 11;
}

.top_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* 상단 레슨 코너명 */
.top_wrap .top_titleBox {
  position: absolute;
  left: 55px;
  top: 0;
  width: 870px;
  height: 100%;
}

.top_titleBox .lessonbtn {
  position: absolute;
  display: inline-block;
  background: url(../images/main/top_bt_index.png) top left/124px no-repeat;
  width: 124px;
  height: 40px;
  top: 11px;
  left: 0;
}

.top_titleBox .lessonbtn.over {
  background: url(../images/main/top_bt_index.png) bottom left/124px no-repeat;
}

.top_titleBox .corner {
  position: relative;
  display: inline-block;
  left: 142px;
  top: 17px;
  width: 560px;
  height: 30px;
  z-index: 11;
}

.top_titleBox .title p,
.top_titleBox .corner p {
  color: #fff;
  font-size: 21px;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  text-shadow: 2px 2px 0 #047370, 2px -2px 0 #047370, -2px -2px 0 #047370, -2px 2px 0 #047370, 2px 0 0 #047370, 0 2px 0 #047370,
    -2px 0 0 #047370, 0 -2px 0 #047370;
  padding-right: 20px;
}

/* 상단 현재 교과서 페이지 */
.top_pageBox {
  position: absolute;
  display: inline-block;
  width: 104px;
  height: 40px;
  left: 770px;
  top: 8px;
  z-index: 11;
}
.top_pageBox > span,
.top_pageBox .page_now_num {
  position: absolute;
  width: 38px;
  left: 46px;
  height: 100%;
  font-size: 17px;
  color: #fff;
  text-align: right;
  text-shadow: 2px 2px 0 #127270, 2px -2px 0 #127270, -2px -2px 0 #127270, -2px 2px 0 #127270, 2px 0 0 #127270, 0 2px 0 #127270,
    -2px 0 0 #127270, 0 -2px 0 #127270;
  background-color: transparent;
  border: none;
  user-select: none;
  pointer-events: none;
}

.top_pageBox > span:nth-of-type(1) {
  left: 0;
  top: 11px;
  width: 47px;
}
.top_pageBox > span:nth-of-type(2) {
  left: 64px;
  top: 11px;
}

/* 상단 페이지 이동 */
.top_naviBox {
  position: absolute;
  display: inline-block;
  width: 157px;
  height: 40px;
  left: 908px;
  top: 7px;
  z-index: 11;
}

.top_naviBox .navi_now_num,
.top_naviBox .navi_max_num {
  position: absolute;
  top: 0;
  left: 51px;
  width: 35px;
  height: 40px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  background-color: transparent;
  border: none;
  user-select: none;
  pointer-events: none;
}
.top_naviBox .navi_now_num {
  user-select: none;
  pointer-events: none;
}
.top_naviBox .navi_max_num {
  left: 78px;
  top: 2px;
  width: 36px;
  font-size: 16px;
}
.top_naviBox .top_nav {
  position: absolute;
  top: 4px;
}

.top_naviBox .navi_top_prev {
  background: url(../images/main/top_bt_navi.png) top left/33px no-repeat;
  width: 33px;
  height: 33px;
  left: 6px;
}
.top_naviBox .navi_top_next {
  background: url(../images/main/top_bt_navi.png) top left/33px no-repeat;
  transform: scaleX(-1);
  width: 33px;
  height: 33px;
  left: 119px;
}

.top_naviBox .navi_top_prev.over {
  background: url(../images/main/top_bt_navi.png) bottom left/33px no-repeat;
}

.top_naviBox .navi_top_next.over {
  background: url(../images/main/top_bt_navi.png) bottom left/33px no-repeat;
}

/* 비활성모드 추가  */
.top_naviBox .navi_top_prev.off,
.top_naviBox .navi_top_next.off {
  opacity: 0.2;
  pointer-events: none;
}

/* 탑 오른쪽 사이드 부가버튼 */

.side_box {
  position: absolute;
  top: 6px;
  left: 1082px;
  width: 90px;
  height: 50px;
}

.side_box > .drawbtn,
.side_box > .helperbtn {
  position: absolute;
  display: inline-block;
  background: url(../images/main/top_bt_draw.png) top left/43px no-repeat;
  width: 43px;
  height: 44px;
  top: 0;
}
.side_box > .drawbtn.over,
.side_box > .drawbtn.on {
  background: url(../images/main/top_bt_draw.png) bottom left/43px no-repeat;
}

.side_box > .helperbtn {
  background: url(../images/main/top_bt_box.png) top left/43px no-repeat;
  left: 46px;
}

.side_box > .helperbtn.over,
.side_box > .helperbtn.on {
  background: url(../images/main/top_bt_box.png) bottom left/43px no-repeat;
}

/* 그리기툴 미니팝업 */
.draw_pop {
  position: absolute;
  width: 54px;
  height: 420px;
  top: 57px;
  left: 102px;
  display: none;
}

.side_box .draw_pop > .btclosebtn {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  left: 14px;
  background: url(../images/main/top_bt_close.png) top left/20px no-repeat;
  margin-bottom: 2px;
}
.side_box .draw_pop > .btclosebtn.over {
  background: url(../images/main/top_bt_close.png) bottom left/20px no-repeat;
}

.draw_pop ul {
  position: relative;
  width: 45px;
  height: 130px;
  margin-bottom: 8px;
  text-align: center;
}
.draw_pop ul.draw_pen {
  height: 160px;
  margin-bottom: -4px;
}

.draw_pop ul li {
  position: relative;
  display: inline-block;
  width: 49px;
  height: 52px;
}
.draw_pop ul:nth-child(n + 3) {
  left: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}
.draw_pop ul:nth-child(n + 3) li {
  width: 33px;
  height: 33px;
  top: 10px;
}
.draw_pop .draw_pen li + li {
  margin-top: -6px;
}
.draw_pop .draw_color li + li,
.draw_pop .draw_weight li + li {
  margin-top: 2px;
}

.draw_pen li:nth-child(1) {
  background: url(../images/main/top_draw_bt1.png) 0 0/150px no-repeat;
}
.draw_pen li:nth-child(2) {
  background: url(../images/main/top_draw_bt1.png) -50px 0/150px no-repeat;
}
.draw_pen li:nth-child(3) {
  background: url(../images/main/top_draw_bt1.png) -100px 0/150px no-repeat;
}

.draw_color li:nth-child(1) {
  background: url(../images/main/top_draw_bt2.png) 0 0/204px no-repeat;
}
.draw_color li:nth-child(2) {
  background: url(../images/main/top_draw_bt2.png) -34px 0/204px no-repeat;
}
.draw_color li:nth-child(3) {
  background: url(../images/main/top_draw_bt2.png) -68px 0/204px no-repeat;
}

.draw_weight li:nth-child(1) {
  background: url(../images/main/top_draw_bt2.png) -102px 0/204px no-repeat;
}
.draw_weight li:nth-child(2) {
  background: url(../images/main/top_draw_bt2.png) -136px 0/204px no-repeat;
}
.draw_weight li:nth-child(3) {
  background: url(../images/main/top_draw_bt2.png) -170px 0/204px no-repeat;
}

.draw_pen li:nth-child(1).on,
.draw_pen li:nth-child(1).over {
  background: url(../images/main/top_draw_bt1.png) 0 -53px/150px no-repeat;
}
.draw_pen li:nth-child(2).on,
.draw_pen li:nth-child(2).over {
  background: url(../images/main/top_draw_bt1.png) -50px -53px/150px no-repeat;
}
.draw_pen li:nth-child(3).on,
.draw_pen li:nth-child(3).over {
  background: url(../images/main/top_draw_bt1.png) -100px -53px/150px no-repeat;
}

.draw_color li:nth-child(1).on,
.draw_color li:nth-child(1).over {
  background: url(../images/main/top_draw_bt2.png) 0 -35px/204px no-repeat;
}
.draw_color li:nth-child(2).on,
.draw_color li:nth-child(2).over {
  background: url(../images/main/top_draw_bt2.png) -34px -35px/204px no-repeat;
}
.draw_color li:nth-child(3).on,
.draw_color li:nth-child(3).over {
  background: url(../images/main/top_draw_bt2.png) -68px -35px/204px no-repeat;
}

.draw_weight li:nth-child(1).on,
.draw_weight li:nth-child(1).over {
  background: url(../images/main/top_draw_bt2.png) -102px -35px/204px no-repeat;
}
.draw_weight li:nth-child(2).on,
.draw_weight li:nth-child(2).over {
  background: url(../images/main/top_draw_bt2.png) -136px -35px/204px no-repeat;
}
.draw_weight li:nth-child(3).on,
.draw_weight li:nth-child(3).over {
  background: url(../images/main/top_draw_bt2.png) -170px -35px/204px no-repeat;
}

/* 활동도우미 미니팝업 */
.side_box .helper_pop {
  position: absolute;
  width: 54px;
  height: 420px;
  top: 57px;
  left: 102px;
  display: none;
}

.side_box .helper_pop > span {
  position: relative;
  display: inline-block;
  width: 49px;
  height: 62px;
}
.side_box .helper_pop > span:nth-child(n + 2) + span {
  margin-top: -6px;
}

.side_box .helper_pop > .btclosebtn {
  width: 20px;
  height: 20px;
  left: 14px;
  background: url(../images/main/top_bt_close.png) top left/20px no-repeat;
  margin-bottom: 2px;
}
.side_box .helper_pop > .btclosebtn.over {
  background: url(../images/main/top_bt_close.png) bottom left/20px no-repeat;
}

.side_box .helper_pop > span:nth-child(2) {
  background: url(../images/main/top_box_bts.png) 0 0/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(3) {
  background: url(../images/main/top_box_bts.png) -50px 0/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(4) {
  background: url(../images/main/top_box_bts.png) -100px 0/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(5) {
  background: url(../images/main/top_box_bts.png) -150px 0/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(6) {
  background: url(../images/main/top_box_bts.png) -200px 0/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(7) {
  background: url(../images/main/top_box_bts.png) -250px 0/300px no-repeat;
}

.side_box .helper_pop > span:nth-child(2).over {
  background: url(../images/main/top_box_bts.png) 0 -63px/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(3).over {
  background: url(../images/main/top_box_bts.png) -50px -63px/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(4).over {
  background: url(../images/main/top_box_bts.png) -100px -63px/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(5).over {
  background: url(../images/main/top_box_bts.png) -150px -63px/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(6).over {
  background: url(../images/main/top_box_bts.png) -200px -63px/300px no-repeat;
}
.side_box .helper_pop > span:nth-child(7).over {
  background: url(../images/main/top_box_bts.png) -250px -63px/300px no-repeat;
}

/* 목차 내비게이션 */
.cornerMenu_box {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 1280px;
  height: 800px;
  left: 0;
  top: 0;
  z-index: 12;
  /* display: none; */
  opacity: 0;
  pointer-events: none;
}

.cornerMenu_box.on {
  /* display: block; */
  opacity: 1;
  pointer-events: auto;
}

.corner_box {
  position: absolute;
  left: 60px;
  width: 1116px;
  height: 800px;
  overflow: hidden;
}
.lesson_bgline,
.corner_bgline {
  position: absolute;
  background: #0bb8b3;
  border-radius: 10px;
  width: 417px;
  height: 585px;
  left: -420px;
  top: 72px;
  z-index: 12;
}
.corner_bgline {
  position: fixed;
  width: 629px;
  height: 0;
  left: 500px;
  top: 72px;
  z-index: 12;
  overflow: hidden;
}

.lesson_bg,
.corner_bg {
  position: absolute;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  top: 7px;
  left: 7px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.cornerMenu_box.on .lesson_bgline {
  transition: all 0.3s ease-in-out;
  left: 14px;
}
.cornerMenu_box.on .corner_bgline {
  transition: all 0.3s 0.2s ease-in-out;
}

.cornerMenu_box.on .corner_bgline.off {
  transition: none;
}

.cornerMenu_box .lessonList {
  position: absolute;
  left: 25px;
  width: 360px;
  height: 500px;
  top: 7px;
}
.cornerMenu_box .lessonList > li {
  position: relative;
  width: 100%;
  border-bottom: 1px dashed #d7d7d7;
}

.cornerMenu_box .lessonList > li > div.handler {
  display: block;
  line-height: 40px;
  font-size: 23px;
  color: #333;
  height: 40px;
}
.cornerMenu_box .lessonList > li > div:nth-child(2) {
  position: relative;
  color: #858585;
  display: none;
  left: 40px;
  width: 325px;
}
.cornerMenu_box .lessonList > li > div.handler.on:before {
  position: absolute;
  content: "";
  display: inline-block;
  height: 34px;
  width: 315px;
  top: 3px;
  left: 50px;
  border-radius: 5px;
  background-color: #fff091;
}
.cornerMenu_box .lessonList > li > div.handler > span:nth-child(1) {
  position: relative;
  top: 5px;
  left: -15px;
  display: inline-block;
  margin-right: 5px;
  background: url(../images/main/index_plus.png) top left/25px no-repeat;
  width: 53px;
  height: 21px;
}
.cornerMenu_box .lessonList > li > div.handler.open > span:nth-child(1) {
  background: url(../images/main/index_plus.png) bottom left/25px no-repeat;
}

.cornerMenu_box .lessonList > li > div.handler > span:nth-child(1)::before {
  position: absolute;
  content: "";
  top: -3px;
  left: 30px;
  display: inline-block;
  width: 34px;
  height: 25px;
}
.cornerMenu_box .lessonList > li > div.handler > span:nth-child(2) {
  position: relative;
}
.lessonList > li > div.handler > .ls01::before {
  background: url(../images/main/index_num.png) 0 0 /280px no-repeat;
}
.lessonList > li > div.handler > .ls02::before {
  background: url(../images/main/index_num.png) -35px 0 /280px no-repeat;
}
.lessonList > li > div.handler > .ls03::before {
  background: url(../images/main/index_num.png) -70px 0 /280px no-repeat;
}
.lessonList > li > div.handler > .ls04::before {
  background: url(../images/main/index_num.png) -105px 0 /280px no-repeat;
}
.lessonList > li > div.handler > .ls05::before {
  background: url(../images/main/index_num.png) -140px 0 /280px no-repeat;
}
.lessonList > li > div.handler > .ls06::before {
  background: url(../images/main/index_num.png) -175px 0 /280px no-repeat;
}
.lessonList > li > div.handler > .ls07::before {
  background: url(../images/main/index_num.png) -210px 0 /280px no-repeat;
}
.lessonList > li > div.handler > .ls08::before {
  background: url(../images/main/index_num.png) -245px 0 /280px no-repeat;
}

.cornerMenu_box .lessonList > li > div:nth-child(2) * {
  font-size: 22px;
}
.cornerMenu_box .lessonList > li > div:nth-child(2) .subTopic,
.cornerMenu_box .lessonList > li > div:nth-child(2) > p {
  position: relative;
  padding: 0 46px 0 24px;
  left: 24px;
  margin: 5px 0;
}
.cornerMenu_box .lessonList > li > div:nth-child(2) .subTopic:before,
.cornerMenu_box .lessonList > li > div:nth-child(2) > p:before {
  content: "";
  position: absolute;
  top: 3px;
  left: -24px;
  display: inline-block;
  width: 40px;
  height: 21px;
  margin-right: 6px;
}

.lessonList #L1 .cn01:before {
  background: url(../images/main/index_num2.png) 0 0 /40px 550px no-repeat;
}
.lessonList #L1 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -22px /40px 550px no-repeat;
}
.lessonList #L1 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -44px /40px 550px no-repeat;
}

.lessonList #L2 .cn01:before {
  background: url(../images/main/index_num2.png) 0 -66px /40px 550px no-repeat;
}
.lessonList #L2 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -88px /40px 550px no-repeat;
}
.lessonList #L2 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -110px /40px 550px no-repeat;
}

.lessonList #L3 .cn01:before {
  background: url(../images/main/index_num2.png) 0 -132px /40px 550px no-repeat;
}
.lessonList #L3 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -154px /40px 550px no-repeat;
}
.lessonList #L3 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -176px /40px 550px no-repeat;
}

.lessonList #L4 .cn01:before {
  background: url(../images/main/index_num2.png) 0 -198px /40px 550px no-repeat;
}
.lessonList #L4 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -220px /40px 550px no-repeat;
}
.lessonList #L4 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -242px /40px 550px no-repeat;
}
.lessonList #L4 .cn04:before {
  background: url(../images/main/index_num2.png) 0 -264px /40px 550px no-repeat;
}

.lessonList #L5 .cn01:before {
  background: url(../images/main/index_num2.png) 0 -286px /40px 550px no-repeat;
}
.lessonList #L5 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -308px /40px 550px no-repeat;
}
.lessonList #L5 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -330px /40px 550px no-repeat;
}

.lessonList #L6 .cn01:before {
  background: url(../images/main/index_num2.png) 0 -352px /40px 550px no-repeat;
}
.lessonList #L6 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -374px /40px 550px no-repeat;
}
.lessonList #L6 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -396px /40px 550px no-repeat;
}

.lessonList #L7 .cn01:before {
  background: url(../images/main/index_num2.png) 0 -418px /40px 550px no-repeat;
}
.lessonList #L7 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -440px /40px 550px no-repeat;
}
.lessonList #L7 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -462px /40px 550px no-repeat;
}

.lessonList #L8 .cn01:before {
  background: url(../images/main/index_num2.png) 0 -484px /40px 550px no-repeat;
}
.lessonList #L8 .cn02:before {
  background: url(../images/main/index_num2.png) 0 -506px /40px 550px no-repeat;
}
.lessonList #L8 .cn03:before {
  background: url(../images/main/index_num2.png) 0 -528px /40px 550px no-repeat;
}

.cornerMenu_box .lessonList > li > div:nth-child(2) > ul {
  position: relative;
  left: 48px;
  width: 280px;
}
.lessonList > li > div:nth-child(2) > div.handler {
  position: relative;
  /* margin: 5px 0; */
  /* height: 30px; */
}
.lessonList > li > div:nth-child(2) > div.handler,
.lessonList > li > div:nth-child(2) > ul > li {
  position: relative;
  line-height: 30px;
}

.lessonList > li > div:nth-child(2) > ul > li.tamgu {
  left: 30px;
  width: 245px;
}
.lessonList > li > div:nth-child(2) > ul > li.endcon > span {
  left: -20px;
}

.lessonList > li > div:nth-child(2) > p {
  margin-top: 4px;
}
.lessonList > li > div:nth-child(2) > ul + p,
.lessonList > li > div:nth-child(2) > ul > li.endcon {
  margin-top: 5px;
}
.lessonList > li > div:nth-child(2) > ul > li.endcon {
  margin-bottom: 5px;
}

.lessonList > li > div:nth-child(2) > ul > li u {
  text-decoration: none;
  position: absolute !important;
  display: inline-block;
  font-size: 20px !important;
  width: 20px;
  left: -20px;
}
.lessonList > li > div:nth-child(2) > ul > .tamgu u {
  left: -52px;
  width: 52px;
}

.lessonList > li > div:nth-child(2) > div.handler.on,
.lessonList > li > div:nth-child(2) > div.handler.over,
.lessonList > li > div:nth-child(2) > ul > li.on,
.lessonList > li > div:nth-child(2) > ul > li.over {
  color: #8d1f01;
}

.lessonList > li > div:nth-child(2) > div.handler.on:before,
.lessonList > li > div:nth-child(2) > div.handler.over:before,
.lessonList > li > div:nth-child(2) > ul > li.on:before,
.lessonList > li > div:nth-child(2) > ul > li.over:before {
  position: absolute;
  content: "";
  display: inline-block;
  height: 30px;
  width: 315px;
  left: -40px;
  border-radius: 5px;
  background-color: #fff091;
}
.lessonList > li > div:nth-child(2) > div.handler.on:before,
.lessonList > li > div:nth-child(2) > div.handler.over:before {
  left: -20px !important;
  width: 335px;
}

.lessonList > li > div:nth-child(2) > div.handler.hi2 .subTopic {
  /* height: 70px; */
}

.lessonList > li > div:nth-child(2) > div.handler.hi2.on:before,
.lessonList > li > div:nth-child(2) > div.handler.hi2.over:before,
.lessonList > li > div:nth-child(2) > ul > li.hi2.on:before,
.lessonList > li > div:nth-child(2) > ul > li.hi2.over:before {
  height: 62px;
}
.lessonList > li > div:nth-child(2) > ul > li > span {
  position: relative;
}
.lessonList > li > div:nth-child(2) > ul > li.tamgu.on:before,
.lessonList > li > div:nth-child(2) > ul > li.tamgu.over:before {
  left: -70px;
}

.index3 {
  display: none;
}

.index3.on {
  display:block;
}
/* .lessonList > li > div:nth-child(1) > .index3.on,
.lessonList > li > div:nth-child(2) > ul > li .index3.on {
  display: block;
} */

.index3 {
  position: fixed;
  width: 600px;
  top: 100px;
  left: 520px;
}
.index3.on {
  height: 600px !important;
  overflow: auto;
}

.index3 > li {
  position: relative;
  width: calc(100% - 20px);
  min-height: 40px;
  height: auto;
 color: #858585;
  line-height: 30px;
  float: left;
  border-bottom: 1px dashed #d7d7d7;
}

.index3 > li:last-child {
  border-bottom: 0;
}

.index3 > li.hi2 {
  height: 70px;
}

.cornerMenu_box .cornerList {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 30px 30px 10px 10px;
}

.index3 > li + li {
  margin-top: -2px;
}

.index3 > li.on,
.index3 > li.over {
  color: #14436d;
}

.index3 > li.on::before,
.index3 > li.over::before {
  position: absolute;
  content: "";
  display: inline-block;
  height: calc(100% - 4px);
  width: 100%;
  top: 3px;
  left: 0;
  border-radius: 5px;
  background-color: #9ee9ff;
}
.index3 > li > span {
  position: relative;
  display: inline-block;
}
.index3 > li > span:nth-child(1) {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  display: inline-block;
  width: 32px;
  height: 31px;
}
.index3 > li span.ic1 {
  background: url(../images/main/index_icon.png) 0 0 /165px no-repeat;
}
.index3 > li span.ic2 {
  background: url(../images/main/index_icon.png) -33px 0 /165px no-repeat;
}
.index3 > li span.ic3 {
  background: url(../images/main/index_icon.png) -66px 0 /165px no-repeat;
}
.index3 > li span.ic4 {
  background: url(../images/main/index_icon.png) -99px 0 /165px no-repeat;
}
.index3 > li span.ic5 {
  background: url(../images/main/index_icon.png) -132px 0 /165px no-repeat;
}

.index3 > li > span:nth-child(2) {
  padding-top: 5px;
  left: 35px;
  width: 535px;
  padding-bottom: 3px;
}

.cornerMenu_box .Menu_close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 0 0 0 60%;
  background-color: #0bb8b3;
  z-index: 12;
}
.cornerMenu_box .Menu_close > span {
  display: inline-block;
  margin: 2px 0 0 4px;
  background: url(../images/main/index_close.png) top left/14px no-repeat;
  width: 14px;
  height: 14px;
}

.cornerMenu_box .Menu_close.over > span {
  background: url(../images/main/index_close.png) bottom left/14px no-repeat;
}