@charset "UTF-8";
@import url("fonts.css");

/******************************************** 공통 ***************************************/
a:link, a:visited, a:active, a:hover, a:focus {
    text-decoration: none;
    color: inherit;
    font: inherit;
}
ol, ul {
    list-style: none;
}
img {
    border: none;
    vertical-align: middle;
    height: auto;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, img {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
* {
    margin: 0;
    padding: 0;
}
div {
    display: block;
}

html, body {
    /* width: 1920px;
    height: 1080px;
    overflow: hidden; */
    position: relative;
}

body {
    overflow: hidden;
    font-family: 'Noto Sans KR', sans-serif;
    /* background: #f5f4f0; */
    /* background: url(../images/bg.png) no-repeat; */
}

#background_screen {
    position: absolute;
    margin:auto;
    width: 100%;
    height: 1080px;
    /* background: #f5f4f0; */
    top:0;
    left:0;
    /* z-index: 10000; */
    /* display: none; */
}

#background_bar {
    position: absolute;
    width: 1920px;
    height: 40px;
    background: #3c3b3b;
    display: none!important;
}

#container {
    /* background: url(../images/bg.png) no-repeat; */
    width: 1920px;
    height: 1080px;
    /* height: 990px; */
    overflow: hidden;
    background-color: #cfcfcf;
    /* background: #f5f4f0; */
    opacity: 0;
}

.header {
    position: relative;
    width: 100%;
    height: 65px;
    background-color: #f8f8f8;
    box-sizing: border-box;

    color: #000;
    user-select: none;
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    transition: transform 0.3s;
    white-space: nowrap;

    padding-left: 14px;
}

.bg_deco img{
    position:absolute;
    bottom: -30px;
    height: 30px;
    width: 30px;
    box-sizing: border-box;
    /* background-color: #f9fbfd; */
    /* border-top: 1px solid #f9fbfd; */
    /* border: 1px solid red; */
    display: none;
}

#bg_deco1 {
    left: -1px;
    border-left: 1px solid #abb6bc;
}
#bg_deco2 {
    right: -1px;
    border-right: 1px solid #abb6bc;
}

.top_btn1 {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 35px;
    line-height: 35px;
    min-width: 100px;
    background-color: #fff;
    border:1px solid #79888f;
    border-radius: 35px;
    color:#000;
    text-align: center;
    margin-top: 9px;
    font-size: 15px;
    padding: 0px 17px 0px 30px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: bold;
    cursor: pointer;
}

.top_btn1::before {
    content: '';
    position: absolute;
    display: block;
    top: 14px;
    left: 14px;
    width: 10px;
    height: 10px;
    background-image: url(../images/arrowd.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.top_btn1.on {
    color:#fff;
    background-color: #42a1f1;
}

.top_btn1.on::before {
    background-image: url(../images/arrowd_w.svg);
}

.top_btn {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 115px;
    height: 36px;
    margin-top: 9px;
    cursor: pointer;
    color: transparent;
}

#btn_allchasi {
    background: url(../images/btn_allchasi.png) no-repeat;
    background-size: 100%;
}

#btn_allchasi.on {
    background: url(../images/btn_allchasi_on.png) no-repeat;
    background-size: 100%;
}

#btn_myplan {
    background: url(../images/btn_myplan.png) no-repeat;
    background-size: 100%;
}

#btn_myplan.on {
    background: url(../images/btn_myplan_on.png) no-repeat;
    background-size: 100%;
}

.titleWrap {
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0px;
    right: 0px;
    min-width: 200px;
    height: 52px;
    box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    /* border-bottom: 2px solid #000; */
}

.titleWrap .title1 {
    height: 46px;
    vertical-align: middle;
    font-size: 24px;
}

.titleWrap .title1 .pages {
    font-size: 18px;
    font-weight: normal;
}

/* .titleWrap .title1::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 21px;
    background-image: url(../images/title_deco.png);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right: 10px;
    vertical-align: middle;
} */


#full_menu {
    position: absolute;
    width: 38px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50%;
    top: 7px;
    right: 9px;
    background-image: url(../images/btn_fullscreen.png);
    cursor: pointer;
    z-index: 1;
}

#full_menu.on {
    background-image: url(../images/btn_restore.png);
}

.first {
    color: #3c3b3b;
    font-size: 15px;
    line-height: 35px;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    float: left;
}

.icon_arrowBottom {
    float: right;
    background: #d8d8d8;
    padding: 7px 16px;
    cursor: pointer;
}

.icon_arrowBottom .select_arrow {
    vertical-align: 5px;
}

.pageWrap {
    /* float:left; */
    /* margin-left: 30px; */
    position: absolute;
    margin:auto;
    left:0px; right:0px;
    bottom: 12px;
    width: 173px;
    z-index: 100;
    text-align: center;
}

.pageWrap img {
    width: 36px;
    display: inline-block;
    vertical-align: bottom;
    cursor: pointer;
}

.pageWrap .icon_arrowLeft {
    margin-right: 6px;
}

.pageWrap .icon_arrowRight {
    margin-left: 6px;
}

.pageWrap .pageTxt {
    display: inline-block;
    font-size: 18px;
    line-height: 38px;
    color: #767573;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    min-width: 40px;
    text-align: center;
}
.pageWrap .pageTxt .nowPage {
    color: #20d0b0;
    font-weight: bold;
}

.zoom_plus {
    height: 33px;
    width: 32px;
    cursor: pointer;
    margin: 2px;
    background-image: url(../images/btn_plus.png);
    border: 0px;
    background-size: 100%;
    background-color: #fff;
}

.zoom_minus {
    height: 33px;
    width: 32px;
    cursor: pointer;
    margin: 2px;
    background-image: url(../images/btn_minus.png);
    border: 0px;
    background-size: 100%;
    background-color: #fff;
}

.zoom_plus.off,
.zoom_minus.off {
    filter:grayscale(1);
}

.btm_btn {
    position: fixed;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    bottom: 6px;
    left: 0px;
}

#btn_toc {
    left: 13px;
    width: 105px;
    height:45px;
    background-image: url(../images/btn_toc.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transform: scale(1.2);
    transform-origin: 0% 50%;
}
#btn_toc:hover {
    background-image: url(../images/btn_toc_hover.png);
}
#btn_toc.on {
    background-image: url(../images/btn_toc_on.png);
}
#btn_tools {
    left: auto;
    right: 12px;
    width: 105px;
    height:45px;
    background-image: url(../images/btn_tool.png);
    background-size: 100%;
    background-repeat: no-repeat;
    transform: scale(1.2);
    transform-origin: 100% 50%;
}
#btn_tools:hover {
    background-image: url(../images/btn_tool_hover.png);
}
#btn_tools.on {
    background-image: url(../images/btn_tool_on.png);
}

#zoombox {
    position: absolute;
    left: 0px;
    top: 65px;
    right: 0px;
    margin: 0 auto;
    width: 100%;
    height: 954px;
    overflow: auto;
}

#zoombox.cfull {
    top:0px;
    transform-origin: 50% 0%;
    transform: scale(1.066);
}

#zoominbox {
    position: absolute;
    left: 0px;
    right: 0px;
    margin: 0 auto;
    width: 100%;
    height: 954px;
    overflow: hidden;
    transform-origin: 0 0;
}

/* index */
#content {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    margin: 0 auto;
    width: 1600px;
    height: 900px;
    overflow: hidden;
    /* width: 1545px;
    height: 869px; */
    /* -webkit-box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
    box-shadow: 3px 3px 1px rgba(0,0,0,0.2); */
    /* border:3px dotted red; */

    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    transform-origin: 50% 0%;

    -webkit-transform:scale(1.06);
    -moz-transform:scale(1.06);
    transform:scale(1.06);

    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    transition: transform 0.3s;
}

#content.full {
    top:0px;
    width:100%;
    height:100%;
    z-index: 1000;
}

iframe#ipage {
    width: 100%;
    height: 100%;
    border-radius: 30px;
}

/* 툴박스 */
#toolBox {
    /* width: 1071px; */
    /* width: 973px; */
    width: fit-content;
    height: 80px;
    background: #fff;
    border: 2px solid #c6c6c6;
    border-radius: 20px;
    position: absolute;
    right: 12px;
    bottom: 60px;
    margin: 0 auto;
    box-sizing: border-box;
    user-select: none;
    white-space: nowrap;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;

    clip: rect(0px 973px 80px 973px);
    opacity: 0;
    z-index: 100;
    text-align: right;
    overflow: hidden;
}

#toolBox.on {
    opacity: 1;
    clip: rect(0px 973px 80px 0px);
}

#toolBox p.btn_more {
    /* float: left; */
    display: inline-block;
    width: 80px;
    height: 80px;
    color: #000;
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    border-right: 1px solid #c6c6c6;
    cursor: pointer;
    box-sizing: border-box;
}

#toolBox p.btn_more:last-child {
    border-right: none;
}

#toolBox p.btn_more:hover,
#toolBox p.btn_more.on {
    background: #f0f0fe;
    color: #6f6ff3;
}

#toolBox p.btn_more.disable {
    cursor: default;
    opacity:0.5;
}

#toolBox p.btn_more.disable:hover {
    color: #3c3b3b;
    background: transparent;
}

#toolBox .btn_more .img_more {
    display: block;
    width: 80px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    /* line-height: 40px; */
    /* vertical-align: middle; */
    /* text-align: center; */
    background-position: 50% 50%;
    margin-top: 18px;
}

#toolBox #btn_Tkkam .icon {
    background-image:url('../images/icon_kkam.png');
}

#toolBox #btn_Tkkam:hover .icon,
#toolBox #btn_Tkkam.on .icon {
    background-image:url('../images/icon_kkam_on.png');
}

#toolBox #btn_sikimi .icon {
    /* width: 16px;
    height: 17px; */
    background-image:url('../images/icon_sikimi.png');
}

#toolBox #btn_sikimi:hover .icon,
#toolBox #btn_sikimi.on .icon {
    background-image:url('../images/icon_sikimi_on.png');
}

#toolBox #btn_sadari .icon {
    /* width: 15px;
    height: 15px; */
    background-image:url('../images/icon_sadari.png');
}

#toolBox #btn_sadari:hover .icon,
#toolBox #btn_sadari.on .icon {
    background-image:url('../images/icon_sadari_on.png');
}

#toolBox #btn_group .icon {
    /* width: 18px;
    height: 18px; */
    background-image:url('../images/icon_group.png');
}

#toolBox #btn_group:hover .icon,
#toolBox #btn_group.on .icon {
    background-image:url('../images/icon_group_on.png');
}

#toolBox #btn_draw .icon {
    /* width: 18px;
    height: 15px; */
    background-image:url('../images/icon_draw.png');
}

#toolBox #btn_draw:hover .icon,
#toolBox #btn_draw.on .icon {
    background-image:url('../images/icon_draw_on.png');
}

#toolBox #btn_writer .icon {
    /* width: 18px;
    height: 18px; */
    background-image:url('../images/icon_writer.png');
}

#toolBox #btn_writer:hover .icon,
#toolBox #btn_writer.on .icon {
    background-image:url('../images/icon_writer_on.png');
}

#toolBox #btn_timer .icon {
    /* width: 18px;
    height: 18px; */
    background-image:url('../images/icon_timer.png');
}

#toolBox #btn_timer:hover .icon,
#toolBox #btn_timer.on .icon {
    background-image:url('../images/icon_timer_on.png');
}

#toolBox #btn_stopwatch .icon {
    /* width: 16px;
    height: 18px; */
    background-image:url('../images/icon_stopwatch.png');
}

#toolBox #btn_stopwatch:hover .icon,
#toolBox #btn_stopwatch.on .icon {
    background-image:url('../images/icon_stopwatch_on.png');
}

#toolBox #btn_memo .icon {
    /* width: 18px;
    height: 17px; */
    background-image:url('../images/icon_memo.png');
}

#toolBox #btn_memo:hover .icon,
#toolBox #btn_memo.on .icon {
    background-image:url('../images/icon_memo_on.png');
}

#toolBox #btn_memo.disable:hover .icon {
    background-image:url('../images/icon_memo.png');
}

#toolBox #btn_ruler .icon {
    /* width: 18px;
    height: 18px; */
    background-image:url('../images/icon_ruler.png');
}

#toolBox #btn_ruler:hover .icon,
#toolBox #btn_ruler.on .icon {
    background-image:url('../images/icon_ruler_on.png');
}

#toolBox #btn_protractor .icon {
    /* width: 18px;
    height: 18px; */
    background-image:url('../images/icon_protractor.png');
}

#toolBox #btn_protractor:hover .icon,
#toolBox #btn_protractor.on .icon {
    background-image:url('../images/icon_protractor_on.png');
}


/* 다시하기 정답확인 */
#btnGroup {
    width: 266px;
    height: 40px;
    position: absolute;
    right: 210px;
    bottom: 9px;
    margin: 0 auto;
    user-select: none;
    text-align: right;

    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    transition: transform 0.3s;
}

#btnGroup .btnAnswer {
    width: 108px;
    cursor: pointer;
    transform: scale(1.2);
    transform-origin: 100% 50%;
}

#btnGroup #btn_Tanswer {
    margin-left: 2px;
    transform-origin: 0% 50%;
}

#pan_bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width:100%;
    height:62px;
    padding: 0px;
    background: #f8f8f8;
    border-top: 1px solid #bbbbbb;
}

#pan_part {
    position: absolute;
    display: inline-block;
    top: 12px;
    left: 210px;
    border: 1px solid rgb(185, 194, 199);
    border-radius: 36px;
    background: rgb(255, 255, 255);
    height: 36px;
    padding:0px 20px;
    margin-right:10px;
}
#pan_part .part {
    position: relative;
    display: inline-block;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: normal;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    margin: 0px 8px;
    transition: all 0.3s;
}

#pan_part .part.on {
    color: #fff;
    font-weight: 900;
    /* border-bottom:3px solid #42a1f1; */

}

.part_on {
    position: absolute;
    width:96px;
    height:42px;
    top: -3px;
    left: 5px;
    transition: all 0.1s;
    background-color: #6f6ff3;
    border-radius: 8px 20px 20px 20px;
    border:1px solid #5757c7;
}

.part_on::after {
    content: '';
    position: absolute;
    top:7px; left:7px;
    width:6px;
    height:6px;
    border-radius: 6px;
    background-color: #fff;
}

/* 콘텐츠 영역 오른쪽 버튼 */
.rightArea {
    width: 74px;
    height: 190px;
    position: absolute;
    right: 86px;
    bottom: 120px;
    user-select: none;

    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    transition: transform 0.3s;
    display: none;
}

.rightArea .btn_more2 {
    width: 74px;
    height: 58px;
    background: #17d0b0;
    border-radius: 0px 10px 10px 10px;
    border: 2px solid #16a68d;
    box-sizing: border-box;
    margin-bottom: 8px;
    cursor: pointer;
}

.rightArea .btn_more2:last-child {
    margin-bottom: 0;
}

.rightArea #btn_memo1:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 18px solid #16a68d;
    border-bottom: 18px solid transparent;
}

.rightArea #btn_memo2:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 66px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 18px solid #16a68d;
    border-bottom: 18px solid transparent;
}

.rightArea #btn_memo3:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 132px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 18px solid #16a68d;
    border-bottom: 18px solid transparent;
}

.rightArea .btn_more2 p {
    font-weight: bold;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 900;
    color: #fff;
    text-align: center;
    line-height: 54.8px;
}

.rightArea div {
    width: 74px;
    height: 58px;
}

/**************************************** 메세지박스 *************************************/
.___popup {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.55);
    z-index: 150;
}
.___popupwin {
    /* position: absolute;
    margin: auto;
    top: -162px;
    left: -640px;
    right: 0;
    bottom: 0;
    width: 405px;
    height: 181px;
    border: 2px solid #000;
    border-radius: 8px;
    background-color: #fff; */
    position: absolute;
    margin: auto;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 475px;
    height: 275px;
    /* border: 2px solid #000; */
    border-radius: 8px;
    background-color: #fff;
}
.___popupwin>.___popupcontent {
    display: block;
    /* margin-top: 77px; */
    color: #464e50;
    font-size: 25px;
    text-align: center;
    font-family: 'Nanum Gothic', 'BMJUA', sans-serif;
    font-weight: bold;
    line-height: 36px;
    /* padding: 95px 30px; */
    width: 100%;
    box-sizing: border-box;
    width: 100%;
    height: 127px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 30px;
}
.___popupwin>.___popupbuttons {
    display: block;
    position: absolute;
    margin: auto;
    /* left: -204px; */
    right: 0px;
    bottom: 24px;
    text-align: center;
    font-weight: bold;
    width: 100%;
    height: 50px;
}
.___popupwin .button2 {
    position: relative;
    display: inline-block;
    width: 135px;
    height: 50px;
    background-color: #737373;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    font-size: 26px;
    color: #fff;
    line-height: 53px;
    font-family: 'BMJUA', 'Nanum Gothic', sans-serif;
    font-weight: normal;
}
.___popupwin>.___popupbuttons>.btn_ok {
    /* left: 160px; */
}
.___popupwin>.___popupbuttons>.btn_cancel {
    margin-left: 7px;
    /* left: 300px; */
    display: inline-block;
}

/**
    Custom Select box style
**/
div.selectui {
    position: absolute;
    background: #fff;
    border-radius: 8px;
    height: 36px;
    /* padding: 28px 80px 28px 28px; */
    width: 630px;
    font-size: 14px;
    font-weight: bold;
    /* font-family: 'Noto Sans KR', sans-serif; */
    font-family: 'Noto Sans KR', sans-serif;
    top: 12px;
    /* left: 1046px; */
    right:375px;
}

div.selectui.open {
    border-radius:8px 8px 0 0;
}

div.selectui label.select_text {
    /* font-size: 16px; */
    font-size: 20px;
    font-weight: bold;
    line-height: 36px;
    /* font-family: 'Noto Sans KR', sans-serif; */
    font-family: 'Noto Sans KR', sans-serif;
    display: block;
    height: 36px;
    position: relative;
    padding-left: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 575px;
}

div.selectui .select_arrow {
    position:absolute;
    margin:auto;
    top:0; bottom:0;
    right:-9px;
    width: 55px;
    height: 55px;
    cursor: pointer;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}

div.selectui .select_arrow>svg {
    width:100%;
    height:100%;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    transition: transform 0.3s;
}

div.selectui.open .select_arrow>svg {
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
}

div.selectui ul.select_items {
    position: absolute;
    top: 36px;
    width: 100%;
    background: #ffffff;
    left: 0;
    max-height: 308px;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    overflow-y: auto;
    font-weight: normal;
    font-size: 14px;
    z-index: 100;
    display: none;
}

div.selectui.open ul.select_items {
    display: block;
}

div.selectui ul.select_items li {
    /* border-bottom: 1px solid #cccccc; */
    /* height: 32px; */
    /* padding-left: 20px; */
    /* line-height: 32px; */
    /* cursor: pointer; */

    border-bottom: 1px solid #cccccc;
    /* height: 37px; */
    padding-left: 40px;
    line-height: 37px;
    cursor: pointer;
    font-size: 20px;

}

div.selectui ul.select_items li:last-child {
    border-bottom: 0px;
}

div.selectui ul.select_items li.select,
div.selectui ul.select_items li:hover {
    background: #cccccc;
}

.btn_navigation {
    position: absolute;
    width: 69px;
    height:69px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    top: 0;
    bottom: 0;
    opacity: 0.5;
    cursor: pointer;
}

#navigation {
    display: none;
}

#btn_prev {
    background-image: url(../images/btn_prev.png);
    /* left:0px; */
    left:5px;
}

#btn_next {
    background-image: url(../images/btn_next.png);
    /* right:0px; */
    right:5px;
}


/** content full **/
#container>header.header.cfull {
    -webkit-transform: translateY(-65px);
    -moz-transform: translateY(-65px);
    transform: translateY(-65px);
}
#content.cfull {
    -webkit-transform: scale(1.13);
    -webkit-transform-origin: 50% 500px;
    -moz-transform: scale(1.13);
    -moz-transform-origin: 50% 500px;
    transform: scale(1.13);
    transform-origin: 50% 500px;
}

.rightArea.cfull {
    -webkit-transform: translateX(1600px);
    -moz-transform: translateX(1600px);
    transform: translateX(1600px);
}

#toolBox.cfull {
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    transform: translateY(3px);
}

/* #btnGroup.cfull {

    -webkit-transform: translateY(160px);
    -moz-transform: translateY(160px);
    transform: translateY(160px);
} */

#pan_allchasi {
    position: absolute;
    top: 54px;
    left: 0px;
    width: 1378px;
    height: 334px;
    background-color: #fff;
    border:1px solid #000;
    border-radius: 30px;
    display: none;
    box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
    overflow: auto;
}
#pan_allchasi.on {
    display: block;
}
#pan_allchasi .panhead {
    position:absolute;
    top:0px; left: 0px;
    width: 100%;
    height: 78px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 30px 30px 0 0;
}

#pan_allchasi .tab_btn {
    position: absolute;
    bottom:0px;
    background-color: #f8f8f8;
    color: #383838;
    font-weight: 400;
    width: 85px;
    height: 38px;
    border: 1px solid #dedede;
    border-bottom: 0px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    line-height: 38px;
}

#pan_allchasi .semester_1 {
    left: 25px;
}

#pan_allchasi .semester_2 {
    left: 110px;
}

#pan_allchasi .tab_btn.on {
    background-color: #fff;
    font-weight: 900;
}

#pan_allchasi .tab_btn.on::after {
    content: '';
    position:absolute;
    display: block;
    width:40px;
    bottom:0px;
    left: 23px;
    border:1px solid #000;
}

#pan_allchasi .grade_pan {
    position: absolute;
    top:18px;
    left: 320px;
}

#pan_allchasi .btn_grade {
    position: relative;
    display: inline-block;
    background-color: #fff;
    color: #383838;
    font-weight: normal;
    width: 75px;
    height: 42px;
    border: 1px solid #b3b3b3;
    border-radius: 15px;
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    line-height: 42px;
    margin-right: 7px;
}

#pan_allchasi .btn_grade.on {
    background-color: #20d0b0;
    border-color:#17b872;
    color: #fff;
}

#pan_allchasi .panbody {
    position: absolute;
    top: 78px;
    left:0px;
    width: 100%;
    height: 256px;
}

#pan_allchasi .splitter {
    position:absolute;
    top:18px;
    width: 1px;
    height: 214px;
    background-color: #e6e7e9;
}

#pan_allchasi .splitter1 { left: 193px;}
#pan_allchasi .splitter2 { left: 502px;}
#pan_allchasi .splitter3 { left: 803px; display: none;}

#pan_allchasi .depth {
    position: absolute;
    top: 18px;
    height: 214px;
    overflow: auto;
    /* background-color: rgba(255, 0, 0, 0.189); */
}

#pan_allchasi .depth ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;

    font-size: 15px;
}

#pan_allchasi .depth li {
    display: list-item;
    margin-top: 9px;
    margin-bottom: 9px;
    cursor: pointer;
    line-height: 1.3em;
    font-size: 16px;
    font-weight: normal;
}

#pan_allchasi .depth li.on {
    color: #20d0b0;
    font-weight: 900;
}

#pan_allchasi .depth1 {
    left: 0px;
    width: 193px;
}
#pan_allchasi .depth2 {
    left: 194px;
    width: 307px;
}
#pan_allchasi .depth3 {
    left: 502px;
    width: 875px;
}
#pan_allchasi .depth4 {
    display: none;
    left: 800px;
    width: 576px;
}
#pan_allchasi.d4 .depth3 {
    width: 300px;
}
#pan_allchasi.d4 .depth4,
#pan_allchasi.d4 .splitter3 {
    display: block;
}

#pan_myplan {
    position: absolute;
    top: 54px;
    left: 0px;
    width: 1378px;
    height: 334px;
    background-color: #fff;
    border:1px solid #000;
    border-radius: 20px;
    display: none;
    box-shadow: 3px 3px 1px rgba(0,0,0,0.2);
    overflow: auto;
}
#pan_myplan.on {
    display: block;
}
#pan_myplan .panhead {
    position:absolute;
    top:0px; left: 0px;
    width: 100%;
    height: 60px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 20px 20px 0 0;
}

#myplan_subjects {
    position: absolute;
    top: 6px;
    right: 25px;
    font-size: 18px;
    padding: 5px 20px;
    border-radius: 15px;
    width: 200px;
    border: 1px solid #666;
}

#myplan_subjects>label {
    width: 160px;
}

#myplan_subjects>ul.select_items {
    border: 1px solid #666;
    border-top: 1px solid #eee;
    left: -1px;
    border-radius: 0 0 15px 15px;
}

#myplan_subjects .select_arrow {
    z-index: 101;
}

#pan_myplan .panbody {
    position: absolute;
    top: 60px;
    left:0px;
    width: 100%;
    height: 256px;
    text-align: center;
}

#pan_myplan table:nth-child(1) {
    margin-top: 20px;
}
#pan_myplan table:nth-child(1) tr {
    border-bottom: 1px solid #e1e1e1;
}
#pan_myplan th, #pan_myplan td {
    border:0px solid #666;
    margin: 0; padding: 0;
    line-height: 2em;
    box-sizing: border-box;
    padding: 0px 10px;
    height:45px;
}
#pan_myplan tr {
    height: 45px;
}
#pan_myplan th {
    text-align: center;
}
#pan_myplan td {
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    height: 45px;
    line-height: 1.3em;
    padding: 8px 10px;
    font-size: 15px;
}

#pan_myplan td img {
    width: 35px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    top: -8px;
}

#pan_myplan table {
    border-collapse: collapse;
    width: 1310px;
    margin: 0px 26px;
}

#pan_myplan table:nth-child(2) {
    margin-top: 30px;
}

#pan_myplan th:nth-child(1),
#pan_myplan td:nth-child(1) {
    width: 80px;
    max-width: 80px;
    text-align: center;
}
#pan_myplan th:nth-child(2),
#pan_myplan td:nth-child(2) {
    width: 120px;
    max-width: 120px;
    text-align: center;
}
#pan_myplan th:nth-child(3),
#pan_myplan td:nth-child(3) {
    width: 455px;
    max-width: 455px;
}
#pan_myplan th:nth-child(4),
#pan_myplan td:nth-child(4) {
    width: 455px;
    max-width: 455px;
}
#pan_myplan th:nth-child(5),
#pan_myplan td:nth-child(5) {
    width: 80px;
    max-width: 80px;
    text-align: center;
}
#pan_myplan th:nth-child(6),
#pan_myplan td:nth-child(6) {
    width: 120px;
    max-width: 120px;
    text-align: center;
}

#pan_toc {
    position: absolute;
    bottom: 76px;
    left: 14px;
    width: 594px;
    min-height: 100px;
    background-color: #fff;
    border:1px solid #000;
    border-radius: 30px;
    display: none;
    box-shadow: 3px -3px 1px rgba(0,0,0,0.2);
}
#pan_toc::after {
    content:'';
    background-image: url(../images/toc_tail.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width:40px;
    height:20px;
    position: absolute;
    bottom:-18px;
    left:40px;
}
#pan_toccon {
    width: 100%;
    max-height: 945px;
    overflow: hidden;
    overflow-y: auto;
    border-radius: 30px;
}
#pan_toc.on {
    display: block;
}

#pan_toc table {
    border-collapse: collapse;
    width: 594px;
    margin: 0px 0px;
    border-radius: 30px;
}

#pan_toc tr:first-child th:first-child {
    border-top-left-radius: 30px;
}
#pan_toc tr:first-child td:last-child {
    border-top-right-radius: 30px;
}
#pan_toc tr:last-child th:first-child {
    border-bottom-left-radius: 30px;
}
#pan_toc tr:last-child td:last-child {
    border-bottom-right-radius: 30px;
}

#pan_toc tr {
    border-bottom: 1px solid #d5d5d5;
}
#pan_toc tr:last-child {
    border-bottom: 0px;
}

#pan_toc th {
    font-size: 16px;
    font-weight: normal;
    background-color: #f8f8f8;
    width: 147px;
    vertical-align: top;
    border-right: 1px solid #d5d5d5;
    padding: 24px;
    box-sizing: border-box;
    text-align: left;
    word-break: keep-all;
}

#pan_toc td {
    padding: 0px 20px 0px 0px;
    box-sizing: border-box;
    background-color: #fff;
    font-weight: normal;
    text-align: left;
    word-break: keep-all;
}

#pan_toc ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 25px;
    margin-block-end: 25px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    font-size: 16px;
    line-height: 30px;
}

#pan_toc li {
    display: list-item;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    line-height: 1.3em;
}
#pan_toc li:hover {
    color:#16a68d;
}

#pan_toc tr.on th,
#pan_toc tr.on td {
    background-color: #f0f0fe;
}

#pan_toc tr.on li.on {
    color: #6f6ff3;
    font-weight: 900;
}


.depth::-webkit-scrollbar {
	width: 8px;
}

.depth::-webkit-scrollbar-button {
    background:transparent;
}
.depth::-webkit-scrollbar-corner {
    width:0;
    height:0;
}
.depth::-webkit-scrollbar-button:start:decrement, .depth::-webkit-scrollbar-button:end:increment {
    display: block;
    height:5px;
    background:transparent;
}
.depth::-webkit-scrollbar-track {
    background: #efefef;
    border-radius: 10px;
    box-shadow: inset 0 0 4px rgba(0,0,0,.2);
    cursor: pointer;
}
.depth::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
    border-radius: 8px;
    box-shadow: inset 0 0 4px rgba(0,0,0,.1);
}
/*
#zoombox::-webkit-scrollbar {
	width: 20px;
	height: 20px;
}
#zoombox::-webkit-scrollbar-corner {
    width:0;
    height:0;
}
#zoombox::-webkit-scrollbar-button:start:decrement,
#zoombox::-webkit-scrollbar-button:end:increment {
    display: block;
    height:0px;
    width:0px;
    background:transparent;
}

#zoombox::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
    border-radius: 20px;
    box-shadow: inset 0 0 4px rgba(0,0,0,.1);
} */

#pan_allchasi div.rev_pan {
    position: absolute;
    top:0; left:0;
    padding: 4px 30px;
}
#pan_allchasi div.rev_pan button {
    font-size: 16px;
    padding: 3px 10px;
    border-radius: 5px;
    outline: 0px;
    margin: 0 3px;
    border: 1px solid #999;
    color: #4e4e4e;
    cursor: pointer;
}
#pan_allchasi div.rev_pan button.on {
    font-weight: bold;
    background-color: #20d0b0;
}

#myplan_revlist {
    position: absolute;
    top: 6px;
    right: 280px;
    font-size: 18px;
    padding: 5px 20px;
    border-radius: 15px;
    width: 110px;
    border: 1px solid #666;
}

#myplan_revlist>label {
    width: 70px;
}

#myplan_revlist>ul.select_items {
    border: 1px solid #666;
    border-top: 1px solid #eee;
    left: -1px;
    border-radius: 0 0 15px 15px;
}

#myplan_revlist .select_arrow {
    z-index: 101;
}