@charset "utf-8";

/* ---------------------------- layout ---------------------------- */
.wrap{position: relative;width: 100%;height:100%;/*min-height: 768px;min-width: 1024px;*/}
.wrap.type3{height: 100%;}
/* ---------------------------- header ---------------------------- */
.header{position: absolute;top:0;width: 100%;min-width: 1024px;height:45px;background-color: #dfe9f7;z-index: 10}
.header::after{content: "";display: block;clear: both}
.header .site-logo{float: left;height: 35px;padding:  5px 0 5px 10px;margin: 0 20px 0 0 ;font-size:18px;color: #111;font-weight: bold;vertical-align: top;line-height: 30px;max-width: 400px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.header .site-logo img{display: inline-block;max-height: 35px;vertical-align: middle;}
.header .time-info{float: left;height: 20px;line-height: 20px;margin: 13px 0 0 0;padding:0 0 0 20px;background:  url("../images/common/icon_clock.png") left top no-repeat}
.header .time-info::after{content: "";display: block;clear: both}
.header .time-info .time-box{overflow: hidden;position: relative;float: left;width:151px;height: 19px;line-height: 19px;margin:0 5px 0 0;padding:0;background-color: #c3c3c3;border-radius: 15px;}
.header .time-info .time-box .bar{display: block;position: absolute;left:0;width: 50%;height: 19px;z-index: 1;background-color:#00b7c5;border-radius: 15px;}
.header .time-info .time-box .count{position: absolute;width:100%;text-align: center;height: 19px;line-height: 19px;z-index: 5}
.header .time-info .time-box .count span{display: block;line-height: 19px;text-align: center;font-size: 12px;color: #111;font-weight: bold;}
.header .time-info>p{float: left;font-size: 12px;color: #666}
.header .user-info{float: right;position: relative;}
.header .user-info>ul{padding: 0px 10px 0 0}
.header .user-info>ul::after{content: "";display: block;clear: both}
.header .user-info>ul>li{float: left;line-height: 19px;position: relative;margin:2px 0 0 10px;padding:  0 0 0 11px;font-size: 12px;color: #666}
.header .user-info>ul>li::after{content: "";display:block;position: absolute;left:0;top:4px; width: 1px;height: 11px;background-color: #ccc}
.header .user-info>ul>li:first-child::after{display: none}
.header .user-info>ul>li:first-child{margin-top:10px !important;}
.header .user-info>ul>li:last-child{max-width: 270px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle;}

.btn-menu{display: block;position: absolute;top: 55px;left:300px; width: 17px;height:48px;background-color: #fafafa;text-align: center;border:1px solid #ddd;border-left: 0;z-index: 10}
.btn-menu::before{display: inline-block;font: normal normal normal 14px/1 FontAwesome;content: "\f053";color: #7f7f7f}
.btn-menu.close::before{content: "\f054";}
.btn-menu>span{position: absolute;top: 0px;left: 0px;overflow: hidden;display: inline-block;width: 1px;height: 0px;margin: 0;font-size: 0;line-height: 0;}
.type2 .header{position: fixed;}

/* side */
.side-wrap{position: absolute;width: 300px;height: 100%;/*min-height: 768px;*/border-right: 1px solid #ddd;background-color: #fafafa;z-index: 5}
.side-wrap .inner{position: relative;/*height: 100vh;min-height: 768px;*/height:100%;padding:56px 0 280px 0;background-color: #fafafa;box-sizing: border-box;}
.logo-wrap{position: absolute;width: 100%;height:40px;bottom: 12px}
.logo-wrap>ul{text-align: center;padding: 0 4px}
.logo-wrap>ul>li{display: inline-block;margin:0 4px}

.exam-info{position: absolute;bottom: 64px;width: 100%;padding:0 10px;box-sizing: border-box;}
.exam-info>table::before{content: "";display: block;position: absolute;top:0;left:0;width: 100%;height: 2px;background-color: #385579;}
.exam-info>table::after{content: "";display: block;position: absolute;bottom:0;left:0;width: 100%;height: 1px;background-color: #385579;}
.exam-info>table{position: relative;font-size: 12px;text-align: center;width: 100%;table-layout: fixed;letter-spacing: -1px}
.exam-info>table>thead>tr>th{background-color: #f4fcff;color: #444;line-height: 16px;padding: 3px 1px;border-left: 1px solid #ddd;font-weight: normal;}
.exam-info>table>thead>tr>th:first-child{border-left: 0}
.exam-info>table>tbody>tr>td { line-height:16px; padding: 3px 1px; border-left:1px solid #ddd; border-top:1px solid #ddd; background-color:#fff; color:#666; white-space: nowrap; width:104px; overflow:hidden; text-overflow:ellipsis; }
.exam-info>table>tbody>tr>td:nth-child(2){font-weight: bold;}
.exam-info>table>tbody>tr>td:nth-child(3){color:#00b050;}
 
.exam-info>table>tbody>tr>td:first-child{border-left: 0;text-align: left}
.exam-info>table>tfoot>tr>td{background-color: #f4fcff;color: #444;line-height: 16px;padding: 3px 1px;border-left: 1px solid #ddd;border-top: 1px solid #ddd;}
.exam-info>table>tfoot>tr>td:first-child{border-left: 0}
.exam-info>table>tfoot>tr>td:nth-child(2){font-weight: bold;}
.exam-info>table>tfoot>tr>td:nth-child(3){color:#00b050;}


/* nav */
.nav>ul>li{margin: 0 0 7px 0;cursor: pointer;}
.nav>ul>li>h2{padding: 0 0 0 22px;background: url("../images/common/nav_plus.gif") left top no-repeat;line-height: 18px;font-size: 12px;color: #666}
.nav>ul>li.on>h2{background: url("../images/common/nav_minus.gif") left top no-repeat}
.nav>ul>li>.sub-list{display: none;margin:  3px 0 0 32px}
.nav>ul>li>.sub-list>li{margin-bottom: 2px}
.nav>ul>li>.sub-list>li>a{display:inline-block;line-height: 14px;color: #666;font-size: 12px}
.nav>ul>li>.sub-list>li.state01>a{color: #1456d0}
.nav>ul>li>.sub-list>li.state02>a{color: #02ac8a}
.nav>ul>li>.sub-list>li.state03>a{color: #000;font-weight: bold;}

/* jsTree  */
.nav-wrap{height: 100%}
.nav{height: 95%;overflow-y: auto;width: 279px;margin:  0 0 0 10px}
.nav .jstree-anchor>.jstree-themeicon{display: none}
.nav .jstree-default .jstree-clicked{box-shadow: inherit;border-radius: 0}
.nav .jstree-default .jstree-node,

.nav .jstree-default .jstree-icon{background: none;margin-left: 0}
.nav .jstree-default .jstree-icon:empty{height: 20px; width:19px; line-height: 22px}

.nav .jstree-default .jstree-anchor{height: 22px;line-height: 22px}
.nav .jstree-default .jstree-node{line-height: 22px;min-height: 22px}
.nav .jstree-default .jstree-open>.jstree-ocl{background: url("../images/common/nav_minus.gif") left 2px no-repeat;}
.nav .jstree-default .jstree-closed>.jstree-ocl{background: url("../images/common/nav_plus.gif") left 2px no-repeat;}
.nav .jstree-default>ul>li>ul{margin-left: 13px}
.nav .jstree-default>ul>li>a{color: #666}
.ques-current { color: #666; font-weight: 700; }
.ques-answered { color: #0070c0; font-weight: 500; }
.ques-marked { color: #00b050; font-weight: 500; }
.ques-none { color: black; font-weight: normal; }

/* content */
.container{/*min-height: 676px;*/background-color: #fff;}
.content-wrap{position: relative;width: 100%;padding: 45px 45px 0 300px;box-sizing: border-box;background-color: #fff}
.content-wrap::after{content: "";display: block;clear: both}
.content{position: relative;/*min-height: 666px;*/height:100%;padding: 10px 10px 0 22px ;border-right: 1px solid #bbbbbb}
.content>.row{height: calc(100vh/2 - 66px);}
.content>.row.ui-resizable{}
.type2 .container{height: 100%;background-color: transparent}
.type2 .content-wrap{padding: 55px 10px 0 10px;background-color: transparent}
.type2 .content{height: auto !important;padding: 0;border-right: 0;}
.type3 .container{height: 100%;background-color: transparent}
.type3 .content-wrap{display: table;table-layout: fixed;width: 100%;height:100%;padding: 0;background-color: transparent}
.type3 .content{display: table-cell;vertical-align: middle;width: 100%;height: 100% !important;padding: 0;background-color: transparent}

/**/
.content-wrap>.tab-menu{position: absolute;right: 0;top:55px;z-index: 1}
.content-wrap>.tab-menu>ul{width: 45px;}
.content-wrap>.tab-menu>ul>li{width: 35px;height: 54px;line-height: 54px;background-color: #f5f5f5;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd}
.content-wrap>.tab-menu>ul>li:first-child{border-top: 1px solid #ddd}
.content-wrap>.tab-menu>ul>li>a{display: block;text-align: center;font-size: 15px;}
.content-wrap>.tab-menu>ul>li.on{width: 36px;margin-left:-1px ;background-color: #fff}
.content-wrap>.tab-menu>ul>li.on a{color: #111;font-size: 17px;font-weight: bold}
.content-wrap>.tab-menu>ul>li:hover{background-color: #fff;transition: all 0.5s;}
.content-wrap>.tab-menu>ul>li:hover a{color: #111}

/*  */
.view-controller{height: 10px;margin: 0 0 16px 0 ;border-bottom: 1px solid #bbbbbb;background: url("../images/common/bg_view_controller.png") center no-repeat;}
.view-controller.ver2{height: 100%;position: absolute;right: -8px;top: 0;/*width: 6px;*/width:10px;margin: 0;border: 1px solid -+#bbb;border-top:0;border-bottom:0; background: #fff url(../images/common/bg_view_controller02.png) center no-repeat; z-index: 10}

/* footer */
.footer{width: 100%;min-width: 1024px;height:46px;background-color: #fff;border-top: 1px solid #ddd;z-index: 3;position:absolute;bottom:0;left:0;}
.footer .inner{position: relative;width: 100%;padding: 10px 10px 0 321px ;box-sizing: border-box;}
.footer .inner::after{content: "";display: block;color: both;}

/* 문제예시 */
.slide-wrap{display: block;text-align: center}
.ques-ex-item{display: block;text-align: center}
.ques-ex-item:not(:first-child){ margin-top: 10px; }
.ques-ex-item img { max-width: none; }
.slide-pager{display:block;width: 100%}
.slide-pager>li{display: inline-block;font-size: 0;}
.slide-pager>li>a{display: inline-block;width: 3px;height: 3px;background-color: #999999;border-radius: 50%}
.ques-ex-item img {max-width: none !important;width:100%;}

.ques-current>i {background-image: url("../img/ibt_question_icon_choice.png") !important;  background-position: center center; background-size: auto;}
.ques-answered>i {background-image: url("../img/ibt_question_icon_success.png") !important;  background-position: center center; background-size: auto;}
.ques-marked>i {background-image: url("../img/ibt_question_icon_examination.png") !important;  background-position: center center; background-size: auto;}
.ques-none>i {background-image: url("../img/ibt_question_icon_problem.png") !important;  background-position: center center; background-size: auto;}

.code-counter{/* float: right; */position: absolute;top: 10px;right: 10px;font-size: 14px;} 

.use_sub{background: #019984;
    padding: 0px 5px 0px 5px;
    display: inline-block;
    border-radius: 5px;
    margin-left: 5px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 2px 2px 2px #6c6c6c;
    height: 18px;
    line-height: 18px;}