@import url("//fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean");
@font-face {
  font-family: "MoeumT R";
  src: url("/fonts/MoeumTR-HM.eot");
  src: url("/fonts/MoeumTR-HM.eot?#iefix") format("embedded-opentype"),
       url("/fonts/MoeumTR-HM.woff2") format("woff2"),
       url("/fonts/MoeumTR-HM.woff") format("woff"),
       url("/fonts/MoeumTR-HM.svg#MoeumTR-HM") format("svg");
  font-weight: normal;
  font-style: normal;
}

html {
  width: 100%;
  min-height:100%;/* make sure it is at least as tall as the viewport */
  position:relative;
}
body { width: 100%; font-family: "Nanum Gothic", "나눔고딕", "맑은 고딕", "Malgun Gothic", san-serif; font-size: 12px; color: #333; margin: 0px; padding: 0px; }
img { border: 0px 0px 0px 0px; }
.title { font-family: "돋움", "Dotum", san-serif; background-color: #1e1e1e; color: #d2d2d2; height: 54px; width: 100%; }
.title-left { position: static; float: left; }
.title .title-left .logo-div { position: static; float: left; }
.title .title-left .logo-div .logo-image { margin-left: 33px; margin-top: 10px; }
.title .title-right { position: static; float: right; }
.title .user-div { position: static; float: left; }

.mnu-sub .mnu-sub-word-spring .mnu-sub-item a:link { color: #11566b; text-decoration: none; }
.mnu-sub .mnu-sub-word-spring .mnu-sub-item a:visited { color: #11566b; text-decoration: none; }
.mnu-sub .mnu-sub-word-spring .mnu-sub-item a:hover { color: #fff; text-decoration: none; }
.mnu-sub .mnu-sub-word-spring .mnu-sub-item a:active { color: #11566b; text-decoration: none; }
.mnu-sub .mnu-sub-academic-spring .mnu-sub-item a:link { color: #704916; text-decoration: none; }
.mnu-sub .mnu-sub-academic-spring .mnu-sub-item a:visited { color: #704916; text-decoration: none; }
.mnu-sub .mnu-sub-academic-spring .mnu-sub-item a:hover { color: #fff; text-decoration: none; }
.mnu-sub .mnu-sub-academic-spring .mnu-sub-item a:active { color: #704916; text-decoration: none; }
.mnu-sub .mnu-sub-sound-spring .mnu-sub-item a:link { color: #4c6116; text-decoration: none; }
.mnu-sub .mnu-sub-sound-spring .mnu-sub-item a:visited { color: #4c6116; text-decoration: none; }
.mnu-sub .mnu-sub-sound-spring .mnu-sub-item a:hover { color: #fff; text-decoration: none; }
.mnu-sub .mnu-sub-sound-spring .mnu-sub-item a:active { color: #4c6116; text-decoration: none; }
.mnu-sub .mnu-sub-manage-spring .mnu-sub-item a:link { color: #455668; text-decoration: none; }
.mnu-sub .mnu-sub-manage-spring .mnu-sub-item a:visited { color: #455668; text-decoration: none; }
.mnu-sub .mnu-sub-manage-spring .mnu-sub-item a:hover { color: #fff; text-decoration: none; }
.mnu-sub .mnu-sub-manage-spring .mnu-sub-item a:active { color: #455668; text-decoration: none; }

.mnu-panel-left { position: absolute; top: 0px; left: 0px; width: calc(100% - 320px); height: 100%; background-color: #000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=59)"; filter: alpha(opacity=59); opacity: 0.59; }
.mnu-panel-right { position: absolute; top: 0px; right: 0px; width: 320px; height: 100%; background-color: #1d2333; }

.mobile-bar-home { position: relative; left: 40px; top: 17px; width: 27px; cursor: pointer; }
.mobile-bar-close { position: absolute; right: 33px; top: 11px; cursor: pointer; }
.mobile-bar-character { position: relative; left: 140px; top: 49px; width: 61px; }
.mobile-bar-select-group-div { position: relative; left: 54px; top: 64px; width: 220px; }
.mobile-bar-select-group { width: 216px; height: 35px; margin-top: 11px; padding: 0px 5px; background-color: #1e1e1e; border: 1px solid #d2d2d2; color: #fff; font-size: 12px; }
.mobile-bar-due-date { position: absolute; left: 70px; top: 208px; }
.mobile-bar-menu { position: absolute; left: 0px; top: 250px; }
.mobile-bar-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-bar-menu li { margin: 0; padding: 0; }
.mobile-bar-menu .mnu-item { position: static; float: left; width: 100%; margin: 12px 0px; text-align: center; font-family: "MoeumT R"; cursor: pointer;  }
.mobile-bar-menu .mnu-item .mnu-each { position: static; display: inline-block; }
.mobile-bar-menu .mnu-item .mnu-each .mnu-icon-sound { margin-left: 15px; }
.mobile-bar-menu .mnu-front { color: #fcfdff; font-size: 22px; }
.mobile-bar-menu .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
.mobile-bar-menu .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
.mobile-bar-logout { position: relative; left: 0px; top: 390px; width: 100%; margin-top: 12px; text-align: center; }
.mobile-bar-logout-button { color: #fff; width: 80px; height: 30px; background-color: transparent; border: 1px solid #fff; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

@media (min-width: 1024px){
  .wrapper {}

  .title .title-left .due-date { position: static; float: left; margin-left: 47px; margin-top: 31px; }
  .title .title-right { display: block; }
  .title .title-right .user-div { position: static; float: left; }
  .title .title-right .user-div .home-image { margin-top: 13px; }
  .title .title-right .character-div { position: static; float: left; }
  .title .title-right .character-div .character-image { margin-top: 13px; margin-left: 15px; margin-right: 20px; }
  .title .title-right .select-group-div { position: static; float: left; margin-top: 12px; }
  .title .title-right .select-group { width: 216px; height: 35px; margin-top: 11px; padding: 0px 5px; background-color: #1e1e1e; border: 1px solid #d2d2d2; color: #fff; font-size: 12px; }
  .title .title-right .user-signs { position: static; float: left; margin-top: 31px; margin-right: 41px; margin-left: 25px; }
  .title .title-right .user-signs a:link { color: #d1d1d1; }
  .title .title-right .user-signs a:visited { color: #d1d1d1; }
  .title .title-right .user-signs a:hover { color: #d1d1d1; }
  .title .title-right .user-signs a:active { color: #d1d1d1; }

  .title .mobile-bar { display: none; }

  .mnu-panel { display: none; color: #fff; }

  .menu { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu li { margin: 0; padding: 0; float: left; }
  .menu .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu .mnu-item .mnu-each { position: static; text-align: center; }
  .menu .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-word-spring li { position: static; float: left; }
  .menu .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-1 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-1 ul { list-style: none; margin: 0; padding: 0; }
  .menu-1 li { margin: 0; padding: 0; float: left; }
  .menu-1 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-1 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-1 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-word-spring li { position: static; float: left; }
  .menu-1 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-1 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-1 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-1 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu-1 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-2 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-2 ul { list-style: none; margin: 0; padding: 0; }
  .menu-2 li { margin: 0; padding: 0; float: left; }
  .menu-2 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-2 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-2 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-word-spring li { position: static; float: left; }
  .menu-2 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-2 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-2 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-2 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu-2 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-3 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-3 ul { list-style: none; margin: 0; padding: 0; }
  .menu-3 li { margin: 0; padding: 0; float: left; }
  .menu-3 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-3 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-3 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-word-spring li { position: static; float: left; }
  .menu-3 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-3 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-3 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-3 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu-3 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-4 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-4 ul { list-style: none; margin: 0; padding: 0; }
  .menu-4 li { margin: 0; padding: 0; float: left; }
  .menu-4 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-4 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-4 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-word-spring li { position: static; float: left; }
  .menu-4 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-4 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-4 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-4 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu-4 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .mnu-sub { width: 100%; position: static; float: left; margin: 0px 0px; }
  .mnu-sub ul { list-style: none; margin: 0; padding: 10px 0px 10px 0px; position: static; float: left; }
  .mnu-sub li { margin: 0;  padding: 0; }
  .mnu-sub .mnu-sub-word-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(40,176,218);
    background: -moz-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28b0da",endColorstr="#1a93b0",GradientType=1);
  }
  .mnu-sub .mnu-sub-academic-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(220,147,32);
    background: -moz-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dc9320",endColorstr="#b0741c",GradientType=1);
  }
  .mnu-sub .mnu-sub-sound-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(154,187,74);
    background: -moz-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9abb4a",endColorstr="#779a32",GradientType=1);
  }
  .mnu-sub .mnu-sub-manage-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(152,178,203);
    background: -moz-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#98b2cb",endColorstr="#8197af",GradientType=1);
  }
  .mnu-sub .mnu-sub-word-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #11566b; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-academic-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #704916; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-sound-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #4c6116; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #455668; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-item:hover { color: #fff; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item-selected { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }

  .contents-area { position: static; float: left; width: 100%; }

  .chart-area { position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area { position: static; float: left; margin-top: 44px; margin-left: 22px; width: 700px; }
  .chart-area .chart-pie-area .chart-title { margin-left: 15px; position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 15px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 13px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 93px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-due-date { position: relative; float: left; top: -7px; height: 32px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 .ui-datepicker-trigger { position: relative; top: -6px; cursor: pointer; }

  .chart-area .chart-pie-area .chart-donut-area { position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each { position: static; float: left; margin: 15px 15px 15px 15px; text-align: center; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each .chart-donut-each-text { margin-top: 20px; font-weight: bold; }
  .chart-area .chart-pie-area .chart-donut-area-legend { position: static; float: left; margin-top: 20px; margin-left: 40px; }

  .chart-area .chart-bar-area { position: static; float: left; margin-top: 44px; margin-left: 22px; width: 460px; }
  .chart-area .chart-bar-area .chart-bar-area-1 { position: static; float: left; margin-top: 10px; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area { position: left; margin-top: 20px; text-align: center; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title { margin-left: 15px; position: static; float: left; width: 100%; }
  .chart-area .chart-bar-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 15px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 5px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 61px; padding: 5px 5px 5px 5px; margin-right: 8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit { position: relative; float: left; top: -8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit .chart-title-select-input { height: 19px; width: 18px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section { position: relative; float: left; top: -9px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section .chart-title-select-button { height: 33px; width: 60px; font-weight: bold; color: #fdfdfd; padding: 5px 8px 5px 8px; background-color: #727272; border: 1px solid #727272; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:link { color: #050505; text-decoration: none; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:visited { color: #050505; text-decoration: none; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:hover { color: #050505; text-decoration: none; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:active { color: #050505; text-decoration: none; }

  .notice-area { margin: 45px 35px 35px 35px; position: static; float: left; width: calc(100% - 70px); }
  .notice-area .notice-head { position: static; float: left; width: 100%; margin-bottom: 25px; }
  .notice-area .notice-head .notice-head-title { position: static; float: left; font-size: 20px; font-weight: bold; }
  .notice-area .notice-head .notice-head-more { position: static; float: right; font-weight: bold; margin-right: 10px; }
  .notice-area .notice-head .notice-head-more a:link { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:visited { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:hover { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:active { color: #050505; text-decoration: none; }

  .notice-area .notice-head-list { position: static; float: left; width: 100%; margin-bottom: 0px; }
  .notice-area .notice-head-list .notice-head-title { position: static; float: left; }
  .notice-area .notice-head-list .notice-head-title .notice-head-text { position: relative; top: -7px; left: 9px; font-size: 24px; font-weight: bold; }
  .notice-area .notice-head-list .notice-head-breadcrumb { position: relative; float: right; top: 11px; font-family: "Noto Sans KR", sans-serif; font-size: 14px; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:link { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:visited { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:hover { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:active { color: #000; text-decoration: none; }
  .notice-area .notice-head-hr { position: relative; top: -1px; margin-bottom: 16px; }
  .notice-area .notice-search { position: static; float: right; }
  .notice-area .notice-search .notice-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .notice-area .notice-search .notice-search-box .notice-search-select { position: static; float: left; height: 32px; width: 70px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-text { position: static; float: left; height: 26px; width: 140px; padding: 2px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .notice-area .notice-body { width: 100%; position: static; font-family: "돋움", "Dotum", san-serif; margin-bottom: 30px; }
  .notice-area .notice-body .notice-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-body .notice-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .notice-area .notice-body .notice-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 14px 15px; }
  .notice-area .notice-body .notice-table td:nth-of-type(1)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(2)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(3)  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-area .notice-body .notice-table td:nth-of-type(4)  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-area .notice-body .notice-table td:nth-of-type(5)  { text-align: center; padding-top: 1px; padding-bottom: 0px; }

  .notice-area .notice-pagination { width: 100%; position: static; float: left; text-align: center; margin-top: 15px; }
  .notice-area .notice-pagination .notice-pagination-area { position: static; display: inline-block; }
  .notice-area .notice-pagination .notice-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .notice-area .notice-pagination .notice-pagination-area li { position: static; float: left; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(3) { width: 75px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }

  .notice-area .notice-view { width: 100%; position: static; float: left; font-size: 15px; margin-top: 20px; }
  .notice-area .notice-view .notice-view-area { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-area td { padding: 12px 20px; border: 1px solid #ccc; line-height: 1.5em; }
  .notice-area .notice-view .notice-view-area td:nth-of-type(1) { width: 150px; text-align: center; background-color: #dceaf7; font-weight: bold; }

  .notice-area .notice-view .notice-view-body { width: 100%; position: static; border-top: 0px solid transparent; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-body td {  padding: 25px 25px; height: 440px; overflow-y: scroll; vertical-align: top; line-height: 2.5em; }
  .notice-area .notice-view .notice-view-list { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; }
  .notice-area .notice-view .notice-view-list .notice-view-list-button { width: 104px; padding: 10px 12px; font-size: 14px; background-color: #7fa2c8; color: #fff; font-weight: bold; border: 0px solid #7fa2c8; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); }

  .popup-area { position: absolute; left: calc(50% - 250px); top: calc(50% - 370px); width: 500px; font-family: "Noto Sans KR", sans-serif; font-size: 12px; border: 8px solid #42a3d0; background-color: #fff; }
  .popup-area .popup-caption { width: calc(100% - 20px); background-color: #42a3d0; font-size: 18px; color: #fff; font-weight: bold; padding: 6px 0px 15px 20px; }
  .popup-area .popup-caption .popup-close-button { position: relative; left: 288px; top: 0px; cursor: pointer; }
  .popup-area .popup-search { position: static; float: right; padding: 9px 9px 0px 0px; }
  .popup-area .popup-search .popup-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .popup-area .popup-search .popup-search-box .popup-group-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-class-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .popup-area .popup-body { width: calc(100% - 18px); position: static; float: left; padding: 0px 9px 0px 9px; }
  .popup-area .popup-body .popup-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .popup-area .popup-body .popup-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .popup-area .popup-body .popup-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 15px 5px; }
  .popup-area .popup-body .popup-table td:nth-of-type(1)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(2)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(3)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(4)  { text-align: center; }

  .popup-area .popup-pagination { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; margin-bottom: 15px; }
  .popup-area .popup-pagination .popup-pagination-area { position: static; display: inline-block; }
  .popup-area .popup-pagination .popup-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .popup-area .popup-pagination .popup-pagination-area li { position: static; float: left; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(3) { width: 75px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .wrapper {}

  .title .title-left .due-date { position: static; float: left; margin-left: 47px; margin-top: 31px; }
  .title .title-right { display: none; }
  .title .title-right .user-div { position: static; float: left; }
  .title .title-right .user-div .home-image { margin-top: 13px; }
  .title .title-right .character-div { position: static; float: left; }
  .title .title-right .character-div .character-image { margin-top: 12px; margin-left: 15px; margin-right: 20px; }
  .title .title-right .select-group-div { position: static; float: left; }
  .title .title-right .select-group { width: 216px; height: 35px; margin-top: 11px; padding: 0px 5px; background-color: #1e1e1e; border: 1px solid #d2d2d2; color: #fff; font-size: 12px; }
  .title .title-right .user-signs { position: static; float: left; margin-top: 31px; margin-right: 41px; margin-left: 25px; }
  .title .title-right .user-signs a:link { color: #d1d1d1; }
  .title .title-right .user-signs a:visited { color: #d1d1d1; }
  .title .title-right .user-signs a:hover { color: #d1d1d1; }
  .title .title-right .user-signs a:active { color: #d1d1d1; }

  .title .mobile-bar { display: block; position: absolute; right: 33px; top: 11px; cursor: pointer; }

  .mnu-panel { display: none; color: #fff; }

  .menu { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu li { margin: 0; padding: 0; float: left; }
  .menu .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu .mnu-item .mnu-each { position: static; text-align: center; }
  .menu .mnu-word-spring { width: calc(50% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-academic-spring { width: 50%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-sound-spring { width: calc(50% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-manage-spring { width: 50%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }
  .menu .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-1 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-1 ul { list-style: none; margin: 0; padding: 0; }
  .menu-1 li { margin: 0; padding: 0; float: left; }
  .menu-1 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-1 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-1 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-word-spring li { position: static; float: left; }
  .menu-1 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-1 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-1 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-1 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-1 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-2 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-2 ul { list-style: none; margin: 0; padding: 0; }
  .menu-2 li { margin: 0; padding: 0; float: left; }
  .menu-2 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-2 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-2 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-word-spring li { position: static; float: left; }
  .menu-2 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-2 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-2 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-2 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-2 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-3 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-3 ul { list-style: none; margin: 0; padding: 0; }
  .menu-3 li { margin: 0; padding: 0; float: left; }
  .menu-3 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-3 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-3 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-word-spring li { position: static; float: left; }
  .menu-3 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-3 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-3 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-3 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-3 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-4 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-4 ul { list-style: none; margin: 0; padding: 0; }
  .menu-4 li { margin: 0; padding: 0; float: left; }
  .menu-4 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-4 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:first-child { display: inline-block; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:last-child { display: none; }
  .menu-4 .mnu-word-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-word-spring li { position: static; float: left; }
  .menu-4 .mnu-academic-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-sound-spring { width: calc(25% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-manage-spring { width: 25%; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-4 .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu-4 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-4 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-4 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .mnu-sub { width: 100%; position: static; float: left; margin: 0px 0px; }
  .mnu-sub ul { list-style: none; margin: 0; padding: 10px 0px 10px 0px; position: static; float: left; }
  .mnu-sub li { margin: 0;  padding: 0; }
  .mnu-sub .mnu-sub-word-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(40,176,218);
    background: -moz-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28b0da",endColorstr="#1a93b0",GradientType=1);
  }
  .mnu-sub .mnu-sub-academic-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(220,147,32);
    background: -moz-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dc9320",endColorstr="#b0741c",GradientType=1);
  }
  .mnu-sub .mnu-sub-sound-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(154,187,74);
    background: -moz-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9abb4a",endColorstr="#779a32",GradientType=1);
  }
  .mnu-sub .mnu-sub-manage-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(152,178,203);
    background: -moz-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#98b2cb",endColorstr="#8197af",GradientType=1);
  }
  .mnu-sub .mnu-sub-word-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #11566b; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-academic-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #704916; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-sound-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #4c6116; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #455668; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-item:hover { color: #fff; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item-selected { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }

  .contents-area { position: static; float: left; width: 100%; }

  .chart-area { position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area { position: static; float: left; margin-top: 44px; margin-left: 22px; width: calc(100% - 22px); }
  .chart-area .chart-pie-area .chart-title { margin-left: 15px; position: static; float: left; width: calc(100% - 15px); }
  .chart-area .chart-pie-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 15px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 13px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 93px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-due-date { position: relative; float: left; top: -7px; height: 32px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 .ui-datepicker-trigger { position: relative; top: -6px; cursor: pointer; }

  .chart-area .chart-pie-area .chart-donut-area { position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each { position: static; float: left; margin: 15px 15px 15px 15px; text-align: center; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each .chart-donut-each-text { margin-top: 20px; font-weight: bold; }
  .chart-area .chart-pie-area .chart-donut-area-legend { position: static; float: left; margin-top: 20px; margin-left: 40px; }

  .chart-area .chart-bar-area { position: static; float: left; margin-top: 44px; margin-left: 22px; width: 460px; }
  .chart-area .chart-bar-area .chart-bar-area-1 { position: static; float: left; margin-top: 10px; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area { position: left; margin-top: 20px; text-align: center; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title { margin-left: 15px; position: static; float: left; width: 100%; }
  .chart-area .chart-bar-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 15px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 5px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 61px; padding: 5px 5px 5px 5px; margin-right: 8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit { position: relative; float: left; top: -8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit .chart-title-select-input { height: 19px; width: 18px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section { position: relative; float: left; top: -9px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section .chart-title-select-button { height: 33px; width: 60px; font-weight: bold; color: #fdfdfd; padding: 5px 8px 5px 8px; background-color: #727272; border: 1px solid #727272; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:link { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:visited { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:hover { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:active { color: #050505; }

  .notice-area { margin: 45px 35px 35px 35px; position: static; float: left; width: calc(100% - 70px); }
  .notice-area .notice-head { position: static; float: left; width: 100%; margin-bottom: 25px; }
  .notice-area .notice-head .notice-head-title { position: static; float: left; font-size: 20px; font-weight: bold; }
  .notice-area .notice-head .notice-head-more { position: static; float: right; font-weight: bold; margin-right: 10px; }
  .notice-area .notice-head .notice-head-more a:link { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:visited { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:hover { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:active { color: #050505; text-decoration: none; }

  .notice-area .notice-head-list { position: static; float: left; width: 100%; margin-bottom: 0px; }
  .notice-area .notice-head-list .notice-head-title { position: static; float: left; }
  .notice-area .notice-head-list .notice-head-title .notice-head-text { position: relative; top: -7px; left: 9px; font-size: 24px; font-weight: bold; }
  .notice-area .notice-head-list .notice-head-breadcrumb { position: relative; float: right; top: 11px; font-family: "Noto Sans KR", sans-serif; font-size: 14px; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:link { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:visited { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:hover { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:active { color: #000; text-decoration: none; }
  .notice-area .notice-head-hr { position: relative; top: -1px; margin-bottom: 16px; }
  .notice-area .notice-search { position: static; float: right; }
  .notice-area .notice-search .notice-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .notice-area .notice-search .notice-search-box .notice-search-select { position: static; float: left; height: 32px; width: 70px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-text { position: static; float: left; height: 26px; width: 140px; padding: 2px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .notice-area .notice-body { width: 100%; position: static; font-family: "돋움", "Dotum", san-serif; margin-bottom: 30px; }
  .notice-area .notice-body .notice-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-body .notice-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .notice-area .notice-body .notice-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 14px 15px; }
  .notice-area .notice-body .notice-table td:nth-of-type(1)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(2)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(3)  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-area .notice-body .notice-table td:nth-of-type(4)  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-area .notice-body .notice-table td:nth-of-type(5)  { text-align: center; padding-top: 1px; padding-bottom: 0px; }

  .notice-area .notice-pagination { width: 100%; position: static; float: left; text-align: center; }
  .notice-area .notice-pagination .notice-pagination-area { position: static; display: inline-block; }
  .notice-area .notice-pagination .notice-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .notice-area .notice-pagination .notice-pagination-area li { position: static; float: left; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(3) { width: 75px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }

  .notice-area .notice-view { width: 100%; position: static; float: left; font-size: 15px; margin-top: 20px; }
  .notice-area .notice-view .notice-view-area { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-area td { padding: 12px 20px; border: 1px solid #ccc; line-height: 1.5em; }
  .notice-area .notice-view .notice-view-area td:nth-of-type(1) { width: 150px; text-align: center; background-color: #dceaf7; font-weight: bold; }

  .notice-area .notice-view .notice-view-body { width: 100%; position: static; border-top: 0px solid transparent; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-body td {  padding: 25px 25px; height: 440px; overflow-y: scroll; vertical-align: top; line-height: 2.5em; }
  .notice-area .notice-view .notice-view-list { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; }
  .notice-area .notice-view .notice-view-list .notice-view-list-button { width: 104px; padding: 10px 12px; font-size: 14px; background-color: #7fa2c8; color: #fff; font-weight: bold; border: 0px solid #7fa2c8; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); }

  .popup-area { position: absolute; left: calc(50% - 250px); top: calc(50% - 370px); width: 500px; font-family: "Noto Sans KR", sans-serif; font-size: 12px; border: 8px solid #42a3d0; background-color: #fff; }
  .popup-area .popup-caption { width: calc(100% - 20px); background-color: #42a3d0; font-size: 18px; color: #fff; font-weight: bold; padding: 6px 0px 15px 20px; }
  .popup-area .popup-caption .popup-close-button { position: relative; left: 288px; top: 0px; cursor: pointer; }
  .popup-area .popup-search { position: static; float: right; padding: 9px 9px 0px 0px; }
  .popup-area .popup-search .popup-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .popup-area .popup-search .popup-search-box .popup-group-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-class-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .popup-area .popup-body { width: calc(100% - 18px); position: static; float: left; padding: 0px 9px 0px 9px; }
  .popup-area .popup-body .popup-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .popup-area .popup-body .popup-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .popup-area .popup-body .popup-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 15px 5px; }
  .popup-area .popup-body .popup-table td:nth-of-type(1)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(2)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(3)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(4)  { text-align: center; }

  .popup-area .popup-pagination { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; margin-bottom: 15px; }
  .popup-area .popup-pagination .popup-pagination-area { position: static; display: inline-block; }
  .popup-area .popup-pagination .popup-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .popup-area .popup-pagination .popup-pagination-area li { position: static; float: left; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(3) { width: 75px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .wrapper {}

  .title .title-left .due-date { position: static; float: left; margin-left: 47px; margin-top: 31px; }
  .title .title-right { display: none; }
  .title .title-right .user-div { position: static; float: left; }
  .title .title-right .user-div .home-image { margin-top: 13px; }
  .title .title-right .character-div { position: static; float: left; }
  .title .title-right .character-div .character-image { margin-top: 12px; margin-left: 15px; margin-right: 20px; }
  .title .title-right .select-group-div { position: static; float: left; }
  .title .title-right .select-group { width: 216px; height: 35px; margin-top: 11px; padding: 0px 5px; background-color: #1e1e1e; border: 1px solid #d2d2d2; color: #fff; font-size: 12px; }
  .title .title-right .user-signs { position: static; float: left; margin-top: 31px; margin-right: 41px; margin-left: 25px; }
  .title .title-right .user-signs a:link { color: #d1d1d1; }
  .title .title-right .user-signs a:visited { color: #d1d1d1; }
  .title .title-right .user-signs a:hover { color: #d1d1d1; }
  .title .title-right .user-signs a:active { color: #d1d1d1; }

  .title .mobile-bar { display: block; position: absolute; right: 33px; top: 11px; cursor: pointer; }

  .mnu-panel { display: none; color: #fff; }

  .menu { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu li { margin: 0; padding: 0; float: left; }
  .menu .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu .mnu-item .mnu-each { position: static; text-align: center; }
  .menu .mnu-word-spring { width: calc(50% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-academic-spring { width: 50%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-sound-spring { width: calc(50% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-manage-spring { width: 50%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }
  .menu .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-1 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-1 ul { list-style: none; margin: 0; padding: 0; }
  .menu-1 li { margin: 0; padding: 0; float: left; }
  .menu-1 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-1 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-1 .mnu-word-spring { width: calc(34% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-word-spring li { position: static; float: left; }
  .menu-1 .mnu-academic-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-sound-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-manage-spring { width: 22%; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-1 .mnu-front { font-size: 22px; }
  .menu-1 .mnu-front-1 { color: #fcfdff; }
  .menu-1 .mnu-front-2 { color: #f5aa2d; }
  .menu-1 .mnu-front-3 { color: #a1c934; }
  .menu-1 .mnu-front-4 { color: #a4c2da; }
  .menu-1 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-1 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-1 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-1 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-1 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-2 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-2 ul { list-style: none; margin: 0; padding: 0; }
  .menu-2 li { margin: 0; padding: 0; float: left; }
  .menu-2 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-2 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-2 .mnu-word-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-word-spring li { position: static; float: left; }
  .menu-2 .mnu-academic-spring { width: calc(34% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-sound-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-manage-spring { width: 22%; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-2 .mnu-front { font-size: 22px; }
  .menu-2 .mnu-front-1 { color: #27c4ed; }
  .menu-2 .mnu-front-2 { color: #fcfdff; }
  .menu-2 .mnu-front-3 { color: #a1c934; }
  .menu-2 .mnu-front-4 { color: #a4c2da; }
  .menu-2 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-2 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-2 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-2 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-2 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-3 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-3 ul { list-style: none; margin: 0; padding: 0; }
  .menu-3 li { margin: 0; padding: 0; float: left; }
  .menu-3 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-3 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-3 .mnu-word-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-word-spring li { position: static; float: left; }
  .menu-3 .mnu-academic-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-sound-spring { width: calc(34% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-manage-spring { width: 22%; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-3 .mnu-front { font-size: 22px; }
  .menu-3 .mnu-front-1 { color: #27c4ed; }
  .menu-3 .mnu-front-2 { color: #f8a933; }
  .menu-3 .mnu-front-3 { color: #fcfdff; }
  .menu-3 .mnu-front-4 { color: #a4c2da; }
  .menu-3 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-3 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-3 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-3 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-3 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-4 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-4 ul { list-style: none; margin: 0; padding: 0; }
  .menu-4 li { margin: 0; padding: 0; float: left; }
  .menu-4 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-4 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-4 .mnu-word-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-word-spring li { position: static; float: left; }
  .menu-4 .mnu-academic-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-sound-spring { width: calc(22% - 2px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-manage-spring { width: 34%; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-4 .mnu-front { font-size: 22px; }
  .menu-4 .mnu-front-1 { color: #27c4ed; }
  .menu-4 .mnu-front-2 { color: #f8a933; }
  .menu-4 .mnu-front-3 { color: #abd43a; }
  .menu-4 .mnu-front-4 { color: #fcfdff; }
  .menu-4 .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-4 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 5px; }
  .menu-4 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu-4 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-4 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .mnu-sub { width: 100%; position: static; float: left; margin: 0px 0px; }
  .mnu-sub ul { list-style: none; margin: 0; padding: 10px 0px 10px 0px; position: static; float: left; }
  .mnu-sub li { margin: 0;  padding: 0; }
  .mnu-sub .mnu-sub-word-spring { list-style: none; margin: 0px 0px 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(40,176,218);
    background: -moz-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28b0da",endColorstr="#1a93b0",GradientType=1);
  }
  .mnu-sub .mnu-sub-academic-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(220,147,32);
    background: -moz-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dc9320",endColorstr="#b0741c",GradientType=1);
  }
  .mnu-sub .mnu-sub-sound-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(154,187,74);
    background: -moz-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9abb4a",endColorstr="#779a32",GradientType=1);
  }
  .mnu-sub .mnu-sub-manage-spring { list-style: none; margin: 0px 0px; width: 95%; padding-left: 5%;
    display: none;
    background: rgb(152,178,203);
    background: -moz-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#98b2cb",endColorstr="#8197af",GradientType=1);
  }
  .mnu-sub .mnu-sub-word-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #11566b; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-academic-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #704916; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-sound-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #4c6116; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #455668; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-item:hover { color: #fff; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item-selected { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }

  .contents-area { position: static; float: left; width: 100%; }

  .chart-area { position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area { position: static; float: left; margin-top: 44px; margin-left: 22px; width: calc(100% - 22px); }
  .chart-area .chart-pie-area .chart-title { margin-left: 15px; position: static; float: left; width: calc(100% - 15px); }
  .chart-area .chart-pie-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 15px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 13px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 93px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-due-date { position: relative; float: left; top: -7px; height: 32px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 .ui-datepicker-trigger { position: relative; top: -6px; cursor: pointer; }

  .chart-area .chart-pie-area .chart-donut-area { position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each { position: static; float: left; margin: 15px 15px 15px 15px; text-align: center; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each .chart-donut-each-text { margin-top: 20px; font-weight: bold; }
  .chart-area .chart-pie-area .chart-donut-area-legend { position: static; float: left; margin-top: 20px; margin-left: 20px; }

  .chart-area .chart-bar-area { position: static; float: left; margin-top: 44px; margin-left: 22px; width: calc(100% - 44px); }
  .chart-area .chart-bar-area .chart-bar-area-1 { position: static; float: left; margin-top: 10px; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area { position: left; margin-top: 20px; text-align: center; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title { margin-left: 15px; position: static; float: left; width: calc(100% -15px); }
  .chart-area .chart-bar-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 15px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 5px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 61px; padding: 5px 5px 5px 5px; margin-right: 8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit { position: relative; float: left; top: -8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit .chart-title-select-input { height: 19px; width: 18px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section { position: relative; float: left; top: -9px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section .chart-title-select-button { height: 33px; width: 60px; font-weight: bold; color: #fdfdfd; padding: 5px 8px 5px 8px; background-color: #727272; border: 1px solid #727272; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:link { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:visited { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:hover { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:active { color: #050505; }

  .notice-area { margin: 45px 35px 35px 35px; position: static; float: left; width: calc(100% - 70px); }
  .notice-area .notice-head { position: static; float: left; width: 100%; margin-bottom: 25px; }
  .notice-area .notice-head .notice-head-title { position: static; float: left; font-size: 20px; font-weight: bold; }
  .notice-area .notice-head .notice-head-more { position: static; float: right; font-weight: bold; margin-right: 10px; }
  .notice-area .notice-head .notice-head-more a:link { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:visited { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:hover { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:active { color: #050505; text-decoration: none; }

  .notice-area .notice-head-list { position: static; float: left; width: 100%; margin-bottom: 0px; }
  .notice-area .notice-head-list .notice-head-title { position: static; float: left; }
  .notice-area .notice-head-list .notice-head-title .notice-head-text { position: relative; top: -7px; left: 9px; font-size: 24px; font-weight: bold; }
  .notice-area .notice-head-list .notice-head-breadcrumb { position: relative; float: right; top: 11px; font-family: "Noto Sans KR", sans-serif; font-size: 14px; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:link { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:visited { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:hover { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:active { color: #000; text-decoration: none; }
  .notice-area .notice-head-hr { position: relative; top: -1px; margin-bottom: 16px; }
  .notice-area .notice-search { position: static; float: right; }
  .notice-area .notice-search .notice-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .notice-area .notice-search .notice-search-box .notice-search-select { position: static; float: left; height: 32px; width: 70px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-text { position: static; float: left; height: 26px; width: 140px; padding: 2px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .notice-area .notice-body { width: 100%; position: static; font-family: "돋움", "Dotum", san-serif; margin-bottom: 30px; }
  .notice-area .notice-body .notice-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-body .notice-table col:nth-of-type(4)  { display: none; }
  .notice-area .notice-body .notice-table col:nth-of-type(5)  { display: none; }
  .notice-area .notice-body .notice-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .notice-area .notice-body .notice-table th:nth-of-type(4)  { display: none; }
  .notice-area .notice-body .notice-table th:nth-of-type(5)  { display: none; }
  .notice-area .notice-body .notice-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 14px 15px; }
  .notice-area .notice-body .notice-table td:nth-of-type(1)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(2)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(3)  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-area .notice-body .notice-table td:nth-of-type(4)  { display: none; }
  .notice-area .notice-body .notice-table td:nth-of-type(5)  { display: none; }

  .notice-area .notice-pagination { width: 100%; position: static; float: left; text-align: center; }
  .notice-area .notice-pagination .notice-pagination-area { position: static; display: inline-block; }
  .notice-area .notice-pagination .notice-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .notice-area .notice-pagination .notice-pagination-area li { position: static; float: left; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(3) { width: 75px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }

  .notice-area .notice-view { width: 100%; position: static; float: left; font-size: 15px; margin-top: 20px; }
  .notice-area .notice-view .notice-view-area { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-area td { padding: 12px 20px; border: 1px solid #ccc; line-height: 1.5em; }
  .notice-area .notice-view .notice-view-area td:nth-of-type(1) { width: 150px; text-align: center; background-color: #dceaf7; font-weight: bold; }

  .notice-area .notice-view .notice-view-body { width: 100%; position: static; border-top: 0px solid transparent; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-body td {  padding: 25px 25px; height: 440px; overflow-y: scroll; vertical-align: top; line-height: 2.5em; }
  .notice-area .notice-view .notice-view-list { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; }
  .notice-area .notice-view .notice-view-list .notice-view-list-button { width: 104px; padding: 10px 12px; font-size: 14px; background-color: #7fa2c8; color: #fff; font-weight: bold; border: 0px solid #7fa2c8; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); }

  .popup-area { position: absolute; left: calc(50% - 170px); top: calc(50% - 370px); width: 340px; font-family: "Noto Sans KR", sans-serif; font-size: 12px; border: 8px solid #42a3d0; background-color: #fff; }
  .popup-area .popup-caption { width: calc(100% - 20px); background-color: #42a3d0; font-size: 18px; color: #fff; font-weight: bold; padding: 6px 0px 15px 20px; }
  .popup-area .popup-caption .popup-close-button { position: relative; left: 130px; top: 0px; cursor: pointer; }
  .popup-area .popup-search { position: static; float: right; padding: 9px 9px 0px 0px; }
  .popup-area .popup-search .popup-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .popup-area .popup-search .popup-search-box .popup-group-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-class-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .popup-area .popup-body { width: calc(100% - 18px); position: static; float: left; padding: 0px 9px 0px 9px; }
  .popup-area .popup-body .popup-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .popup-area .popup-body .popup-table col:nth-of-type(1)  { display: none; }
  .popup-area .popup-body .popup-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .popup-area .popup-body .popup-table th:nth-of-type(1)  { display: none; }
  .popup-area .popup-body .popup-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 15px 5px; }
  .popup-area .popup-body .popup-table td:nth-of-type(1)  { display: none; }
  .popup-area .popup-body .popup-table td:nth-of-type(2)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(3)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(4)  { text-align: center; }

  .popup-area .popup-pagination { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; margin-bottom: 15px; }
  .popup-area .popup-pagination .popup-pagination-area { position: static; display: inline-block; }
  .popup-area .popup-pagination .popup-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .popup-area .popup-pagination .popup-pagination-area li { position: static; float: left; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(3) { width: 75px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
}

@media (max-width: 479px) {
  .wrapper {}

  .title .title-left .due-date { display: none; }
  .title .title-right { display: none; }
  .title .title-right .user-div { position: static; float: left; }
  .title .title-right .user-div .home-image { margin-top: 13px; }
  .title .title-right .character-div { position: static; float: left; }
  .title .title-right .character-div .character-image { margin-top: 12px; margin-left: 15px; margin-right: 20px; }
  .title .title-right .select-group-div { position: static; float: left; }
  .title .title-right .select-group { width: 216px; height: 35px; margin-top: 11px; padding: 0px 5px; background-color: #1e1e1e; border: 1px solid #d2d2d2; color: #fff; font-size: 12px; }
  .title .title-right .user-signs { position: static; float: left; margin-top: 31px; margin-right: 41px; margin-left: 25px; }
  .title .title-right .user-signs a:link { color: #d1d1d1; }
  .title .title-right .user-signs a:visited { color: #d1d1d1; }
  .title .title-right .user-signs a:hover { color: #d1d1d1; }
  .title .title-right .user-signs a:active { color: #d1d1d1; }

  .title .mobile-bar { display: block; position: absolute; right: 33px; top: 11px; cursor: pointer; }

  .mnu-panel { display: none; color: #fff; }

  .menu { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu li { margin: 0; padding: 0; float: left; }
  .menu .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu .mnu-item .mnu-each { position: static; text-align: center; }
  .menu .mnu-word-spring { width: 100%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-academic-spring { width: 100%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-sound-spring { width: 100%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-manage-spring { width: 100%; border-bottom: 2px solid #4d5b68; }
  .menu .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }
  .menu .mnu-front { color: #fcfdff; font-size: 22px; }
  .menu .mnu-tail { color: #c0cedb; font-size: 20px; margin-left: -5px; }
  .menu .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 10px; }
  .menu .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 22px; display: none; }

  .menu-1 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-1 ul { list-style: none; margin: 0; padding: 0; }
  .menu-1 li { margin: 0; padding: 0; float: left; }
  .menu-1 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-1 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img { margin-left: 0px; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-1 .mnu-word-spring { width: calc(100% - 171px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-word-spring li { position: static; float: left; }
  .menu-1 .mnu-academic-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-sound-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-manage-spring { width: 55px; border-bottom: 2px solid #4d5b68; }
  .menu-1 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-1 .mnu-front-1 { color: #016482; font-size: 22px; margin-left: -2px; }
  .menu-1 .mnu-front-2 { display: none; /* color: #f5aa2d; */ }
  .menu-1 .mnu-front-3 { display: none; /* color: #a1c934; */ }
  .menu-1 .mnu-front-4 { display: none; /* color: #a4c2da; */ }
  .menu-1 .mnu-tail { /* display: none; */ }
  .menu-1 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 0px; }
  .menu-1 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #016482; font-size: 18px; margin-left: -2px; }
  .menu-1 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-1 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 15px; display: none; }

  .menu-2 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-2 ul { list-style: none; margin: 0; padding: 0; }
  .menu-2 li { margin: 0; padding: 0; float: left; }
  .menu-2 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-2 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img { margin-left: 0px; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-2 .mnu-word-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-word-spring li { position: static; float: left; }
  .menu-2 .mnu-academic-spring { width: calc(100% - 171px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-sound-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-manage-spring { width: 55px; border-bottom: 2px solid #4d5b68; }
  .menu-2 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-2 .mnu-front-1 { display: none; /* color: #f5aa2d; */ }
  .menu-2 .mnu-front-2 { color: #814900; font-size: 22px; margin-left: -2px; }
  .menu-2 .mnu-front-3 { display: none; /* color: #a1c934; */ }
  .menu-2 .mnu-front-4 { display: none; /* color: #a4c2da; */ }
  .menu-2 .mnu-tail { /*  display: none;  */ }
  .menu-2 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 0px; }
  .menu-2 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #814900; font-size: 18px; margin-left: -2px; }
  .menu-2 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-2 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 15px; display: none; }

  .menu-3 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-3 ul { list-style: none; margin: 0; padding: 0; }
  .menu-3 li { margin: 0; padding: 0; float: left; }
  .menu-3 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-3 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img { margin-left: 0px; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-3 .mnu-word-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-word-spring li { position: static; float: left; }
  .menu-3 .mnu-academic-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-sound-spring { width: calc(100% - 171px); border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-manage-spring { width: 55px; border-bottom: 2px solid #4d5b68; }
  .menu-3 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-3 .mnu-front-1 { display: none; /* color: #f5aa2d; */ }
  .menu-3 .mnu-front-2 { display: none; /* color: #a1c934; */ }
  .menu-3 .mnu-front-3 { color: #557600; font-size: 22px; margin-left: -2px; }
  .menu-3 .mnu-front-4 { display: none; /* color: #a4c2da; */ }
  .menu-3 .mnu-tail { /* display: none; */ }
  .menu-3 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 0px; }
  .menu-3 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #557600; font-size: 18px; margin-left: -5px; }
  .menu-3 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-3 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 15px; display: none; }

  .menu-4 { height: 54px; width: 100%; background-color: #4d5b68; }
  .menu-4 ul { list-style: none; margin: 0; padding: 0; }
  .menu-4 li { margin: 0; padding: 0; float: left; }
  .menu-4 .mnu-item { height: 52px; background-color: #768491; font-family: "MoeumT R"; cursor: pointer; }
  .menu-4 .mnu-item .mnu-each { position: static; text-align: center; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img { margin-left: 0px; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:first-child { display: none; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img:last-child { display: inline-block; }
  .menu-4 .mnu-word-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-word-spring li { position: static; float: left; }
  .menu-4 .mnu-academic-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-sound-spring { width: 55px; border-right: 2px solid #4d5b68; border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-manage-spring { width: calc(100% - 171px); border-bottom: 2px solid #4d5b68; }
  .menu-4 .mnu-item .mnu-each .mnu-icon img { position: static; margin-top: 8px; }

  .menu-4 .mnu-front-1 { display: none; /* color: #f5aa2d; */ }
  .menu-4 .mnu-front-2 { display: none; /* color: #a1c934; */ }
  .menu-4 .mnu-front-3 { display: none; /* color: #a4c2da; */ }
  .menu-4 .mnu-front-4 { color: #445668; font-size: 22px; margin-left: -2px; }
  .menu-4 .mnu-tail { /* display: none; */ }
  .menu-4 .mnu-item .mnu-each .mnu-text { position: relative; top: -10px; margin-left: 0px; }
  .menu-4 .mnu-item .mnu-each .mnu-text .mnu-text-1 { color: #445668; font-size: 18px; margin-left: -2px; }
  .menu-4 .mnu-item .mnu-each .mnu-text .mnu-text-2 { display: none; }
  .menu-4 .mnu-item .mnu-each .mnu-arrow { position: relative; float: right; top: 22px; right: 15px; display: none; }

  .mnu-sub { width: 100%; position: static; float: left; margin: 0px 0px; }
  .mnu-sub ul { list-style: none; margin: 0; padding: 10px 0px 10px 0px; position: static; float: left; }
  .mnu-sub li { margin: 0;  padding: 0; }
  .mnu-sub .mnu-sub-word-spring { list-style: none; margin: 0px 0px; width: calc(100% - 20px); padding-right: 10px; padding-left: 10px;
    display: none;
    background: rgb(40,176,218);
    background: -moz-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    background: linear-gradient(0deg, rgba(40,176,218,1) 0%, rgba(40,176,218,1) 80%, rgba(26,147,176,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28b0da",endColorstr="#1a93b0",GradientType=1);
  }
  .mnu-sub .mnu-sub-academic-spring { list-style: none; margin: 0px 0px; width: calc(100% - 20px); padding-right: 10px; padding-left: 10px;
    display: none;
    background: rgb(220,147,32);
    background: -moz-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    background: linear-gradient(0deg, rgba(220,147,32,1) 0%, rgba(220,147,32,1) 80%, rgba(176,116,28,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dc9320",endColorstr="#b0741c",GradientType=1);
  }
  .mnu-sub .mnu-sub-sound-spring { list-style: none; margin: 0px 0px; width: calc(100% - 20px); padding-right: 10px; padding-left: 10px;
    display: none;
    background: rgb(154,187,74);
    background: -moz-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    background: linear-gradient(0deg, rgba(154,187,74,1) 0%, rgba(154,187,74,1) 80%, rgba(119,154,50,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9abb4a",endColorstr="#779a32",GradientType=1);
  }
  .mnu-sub .mnu-sub-manage-spring { list-style: none; margin: 0px 0px; width: calc(100% - 20px); padding-right: 10px; padding-left: 10px;
    display: none;
    background: rgb(152,178,203);
    background: -moz-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    background: linear-gradient(0deg, rgba(152,178,203,1) 0%, rgba(152,178,203,1) 80%, rgba(129,151,175,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#98b2cb",endColorstr="#8197af",GradientType=1);
  }
  .mnu-sub .mnu-sub-word-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #11566b; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-academic-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #704916; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-sound-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #4c6116; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #455668; font-size: 16px; font-weight: 500; cursor: pointer; }
  .mnu-sub .mnu-sub-item:hover { color: #fff; }
  .mnu-sub .mnu-sub-manage-spring .mnu-sub-item-selected { position: static; float: left; padding: 4px 12px; font-family: "Noto Sans KR", sans-serif; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }

  .contents-area { position: static; float: left; width: 100%; }

  .chart-area { position: static; float: left; width: 100%; }
  .chart-area .chart-pie-area { position: static; float: left; margin-top: 44px; margin-left: 10px; width: calc(100% - 10px); }
  .chart-area .chart-pie-area .chart-title { margin-left: 10px; position: static; float: left; width: calc(100% - 10px); }
  .chart-area .chart-pie-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 0px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 13px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 93px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .select-due-date { position: relative; float: left; top: -7px; height: 32px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-pie-area .chart-title .chart-title-select .chart-title-select-2 .ui-datepicker-trigger { position: relative; top: -6px; cursor: pointer; }

  .chart-area .chart-pie-area .chart-donut-area { position: static; float: left; width: 100%; text-align: center; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each { position: static; margin: 15px 15px 15px 15px; text-align: center; }
  .chart-area .chart-pie-area .chart-donut-area .chart-donut-each .chart-donut-each-text { margin-top: 20px; font-weight: bold; }
  .chart-area .chart-pie-area .chart-donut-area-legend { position: static; float: left; margin-top: 20px; margin-left: 20px; }

  .chart-area .chart-bar-area { position: static; float: left; margin-top: 44px; margin-left: 10px; width: (100% - 10px); }
  .chart-area .chart-bar-area .chart-bar-area-1 { position: static; float: left; margin-top: 10px; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-each img { width: 100%; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area { position: left; margin-top: 20px; text-align: center; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title { margin-left: 10px; position: static; float: left; width: calc(100% - 10px); }
  .chart-area .chart-bar-area .chart-title .chart-title-text { margin-right: 25px; margin-bottom: 15px; margin-left: 0px; font-size: 17px; font-weight: bold; position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-1 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-text { position: static; float: left; margin-top: 3px; margin-right: 7px; margin-left: 5px; font-family: "돋움", "Dotum", san-serif; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-2 { position: static; float: left; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .select-chart { position: relative; float: left; top: -7px; height: 32px; width: 61px; padding: 5px 5px 5px 5px; margin-right: 8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit { position: relative; float: left; top: -8px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-select-edit .chart-title-select-input { height: 19px; width: 18px; padding: 5px 5px 5px 5px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section { position: relative; float: left; top: -9px; }
  .chart-area .chart-bar-area .chart-title .chart-title-select .chart-title-button-section .chart-title-select-button { height: 33px; width: 60px; font-weight: bold; color: #fdfdfd; padding: 5px 8px 5px 8px; background-color: #727272; border: 1px solid #727272; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:link { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:visited { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:hover { color: #050505; }
  .chart-area .chart-bar-area .chart-bar-area-1 .chart-bar-page-area .chart-bar-page-area-contents a:active { color: #050505; }

  .notice-area { margin: 45px 35px 35px 35px; position: static; float: left; width: calc(100% - 70px); }
  .notice-area .notice-head { position: static; float: left; width: 100%; margin-bottom: 25px; }
  .notice-area .notice-head .notice-head-title { position: static; float: left; font-size: 20px; font-weight: bold; }
  .notice-area .notice-head .notice-head-more { position: static; float: right; font-weight: bold; margin-right: 10px; }
  .notice-area .notice-head .notice-head-more a:link { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:visited { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:hover { color: #050505; text-decoration: none; }
  .notice-area .notice-head .notice-head-more a:active { color: #050505; text-decoration: none; }

  .notice-area .notice-head-list { position: static; float: left; width: 100%; margin-bottom: 0px; }
  .notice-area .notice-head-list .notice-head-title { position: static; float: left; }
  .notice-area .notice-head-list .notice-head-title .notice-head-text { position: relative; top: -7px; left: 9px; font-size: 24px; font-weight: bold; }
  .notice-area .notice-head-list .notice-head-breadcrumb { position: relative; float: right; top: 11px; font-family: "Noto Sans KR", sans-serif; font-size: 14px; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:link { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:visited { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:hover { color: #000; text-decoration: none; }
  .notice-area .notice-head-list .notice-head-breadcrumb a:active { color: #000; text-decoration: none; }
  .notice-area .notice-head-hr { position: relative; top: -1px; margin-bottom: 16px; }
  .notice-area .notice-search { position: static; float: right; }
  .notice-area .notice-search .notice-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .notice-area .notice-search .notice-search-box .notice-search-select { position: static; float: left; height: 32px; width: 70px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-text { position: static; float: left; height: 26px; width: 140px; padding: 2px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .notice-area .notice-search .notice-search-box .notice-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .notice-area .notice-body { width: 100%; position: static; font-family: "돋움", "Dotum", san-serif; margin-bottom: 30px; }
  .notice-area .notice-body .notice-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-body .notice-table col:nth-of-type(4)  { display: none; }
  .notice-area .notice-body .notice-table col:nth-of-type(5)  { display: none; }
  .notice-area .notice-body .notice-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .notice-area .notice-body .notice-table th:nth-of-type(4)  { display: none; }
  .notice-area .notice-body .notice-table th:nth-of-type(5)  { display: none; }
  .notice-area .notice-body .notice-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 14px 15px; }
  .notice-area .notice-body .notice-table td:nth-of-type(1)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(2)  { text-align: center; }
  .notice-area .notice-body .notice-table td:nth-of-type(3)  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notice-area .notice-body .notice-table td:nth-of-type(4)  { display: none; }
  .notice-area .notice-body .notice-table td:nth-of-type(5)  { display: none; }

  .notice-area .notice-pagination { width: 100%; position: static; float: left; text-align: center; }
  .notice-area .notice-pagination .notice-pagination-area { position: static; display: inline-block; }
  .notice-area .notice-pagination .notice-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .notice-area .notice-pagination .notice-pagination-area li { position: static; float: left; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(3) { width: 40px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .notice-area .notice-pagination .notice-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }

  .notice-area .notice-view { width: 100%; position: static; float: left; font-size: 12px; margin-top: 20px; }
  .notice-area .notice-view .notice-view-area { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-area td { padding: 12px 20px; border: 1px solid #ccc; line-height: 1.5em; }
  .notice-area .notice-view .notice-view-area td:nth-of-type(1) { width: 50px; text-align: center; background-color: #dceaf7; font-weight: bold; }

  .notice-area .notice-view .notice-view-body { width: 100%; position: static; border-top: 0px solid transparent; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .notice-area .notice-view .notice-view-body td {  padding: 25px 25px; height: 440px; overflow-y: scroll; vertical-align: top; line-height: 2.5em; }
  .notice-area .notice-view .notice-view-list { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; }
  .notice-area .notice-view .notice-view-list .notice-view-list-button { width: 104px; padding: 10px 12px; font-size: 14px; background-color: #7fa2c8; color: #fff; font-weight: bold; border: 0px solid #7fa2c8; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5); }

  .popup-area { position: absolute; left: calc(50% - 170px); top: calc(50% - 370px); width: 340px; font-family: "Noto Sans KR", sans-serif; font-size: 12px; border: 8px solid #42a3d0; background-color: #fff; }
  .popup-area .popup-caption { width: calc(100% - 20px); background-color: #42a3d0; font-size: 18px; color: #fff; font-weight: bold; padding: 6px 0px 15px 20px; }
  .popup-area .popup-caption .popup-close-button { position: relative; left: 130px; top: 0px; cursor: pointer; }
  .popup-area .popup-search { position: static; float: right; padding: 9px 9px 0px 0px; }
  .popup-area .popup-search .popup-search-box { position: static; float: left; font-family: "Noto Sans KR", sans-serif; font-size: 14px; margin-bottom: 15px; }
  .popup-area .popup-search .popup-search-box .popup-group-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-class-select { position: static; float: left; height: 32px; width: 88px; padding: 0px 0px 0px 5px; border: 1px solid #000; color: #000; font-size: 12px; margin-right: 10px; }
  .popup-area .popup-search .popup-search-box .popup-search-img-span { position: static; float: left; margin-top: 0px; cursor: pointer; }

  .popup-area .popup-body { width: 100%; position: static; font-family: "돋움", "Dotum", san-serif; margin-bottom: 30px; }
  .popup-area .popup-body .popup-table { width: 100%; position: static; border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0; table-layout: fixed; }
  .popup-area .popup-body .popup-table col:nth-of-type(1)  { display: none; }
  .popup-area .popup-body .popup-table th  { background-color: #999ea4; height: 30px; color: #fff; border: 1px solid #dbe0e4; }
  .popup-area .popup-body .popup-table th:nth-of-type(1)  { display: none; }
  .popup-area .popup-body .popup-table td  { background-color: #fff; color: #030303; border: 1px solid #dbe0e4; padding: 15px 5px; }
  .popup-area .popup-body .popup-table td:nth-of-type(1)  { display: none; }
  .popup-area .popup-body .popup-table td:nth-of-type(2)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(3)  { text-align: center; }
  .popup-area .popup-body .popup-table td:nth-of-type(4)  { text-align: center; }

  .popup-area .popup-pagination { width: 100%; position: static; float: left; text-align: center; margin-top: 25px; }
  .popup-area .popup-pagination .popup-pagination-area { position: static; display: inline-block; }
  .popup-area .popup-pagination .popup-pagination-area ul { list-style: none; margin: 0; padding: 0; }
  .popup-area .popup-pagination .popup-pagination-area li { position: static; float: left; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(1) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(2) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(3) { width: 40px; border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 22px; background-color: #fff; text-align: center; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(4) { border: 1px solid #dfdfdf; margin-right: 1px; padding: 11px 13px; background-color: #f2f2f2; cursor: pointer; }
  .popup-area .popup-pagination .popup-pagination-area li:nth-of-type(5) { border: 1px solid #dfdfdf; padding: 11px 12px; background-color: #f2f2f2; cursor: pointer; }
}