.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
    font-family: "Microsoft JhengHei", "Heiti TC";
    /*Replace boots*/
}


.f-12 {
    font-size: 12px;
}

.f-16 {
    font-size: 16px;
}

.hidetxt {
    display: none;
}

.selected {
    border: #f44268 5px solid;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-button {
    background: rgb(238, 238, 238);
}

::-webkit-scrollbar-track-piece {
    background: rgb(204, 204, 204);
}

::-webkit-scrollbar-thumb {
    background: rgb(136, 136, 136);
}


img[src$=".gif"],
img[src$=".png"] {
    image-rendering: -moz-crisp-edges;
    /* Firefox */
    image-rendering: -o-crisp-edges;
    /* Opera */
    image-rendering: -webkit-optimize-contrast;
    /* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* IE (non-standard property) */
}

.uline {
    position: absolute;

    border-bottom: 3px solid #E4007E;
}

@-moz-document url-prefix() {
    .uline {
        border-bottom: 4px solid #E4007E;
    }
}

.hLight {
    position: absolute;
    opacity: 0.2;
    background-color: red;
}

.markLine {
    position: absolute;
    opacity: 0.8;
    background-color: yellow;
}

.round {

    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 50%;

    /* Firefox 1-3.6 */
    -moz-border-radius: 50%;

    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 50%;
}

.ans,
.answers,
.informations {
    color: #183790;
    font-size: 0.8vw;
    visibility: hidden;
}

#pgInputBox {
    font-size: 10pt;
}

.heiFonts {

    font-family: "Microsoft JhengHei", "Heiti TC";
}

.ans {
    /*background-color: rgba(0, 123, 255, 0.25);*/
    color: #9e0000;
    padding: 2px;
    font-size: 1rem;

}

#markerClick {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5px;
}

.mediaButton {
    cursor: pointer;
    position: relative;
}

.mediaButton :hover {

    background-color: rgba(214, 140, 184, 1)
}

#markerClick {
    opacity: 0.2;
    background-color: white;
}

.marker {
    display: inline-block;
    background: #ffffff;
    border: 0.1vw solid #E4007E;
    position: absolute;
    font-size: 0.05vw;
    border-radius: 50%;
    vertical-align: middle;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
    font-family: sans-serif;
    color: #E4007E;
    cursor: pointer;

    /* Equal to scaleX(0.7) scaleY(0.7) */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
}

.invisible {
    visibility: hidden;
}

.visible {
    visibility: visible;
}


.marker:hover {

    background-color: rgba(214, 140, 184, 1)
}

#jumperClick {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5px;
}

#jumperClick:hover {
    opacity: 0.2;
    background-color: red;
}

.jumper {
    background: #ffffff;
    position: absolute;
    font-size: 5pt;
    vertical-align: middle;
    text-align: center;
    padding: 2px;
    font-family: sans-serif;
    font-weight: bold;
    color: #E4007E;
    cursor: pointer;
}

.jumper:hover {

    background-color: rgba(214, 140, 184, 1)
}


.jump:hover {

    background-color: rgba(214, 140, 184, 0.4)
}


#outline button {

    color: white;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    margin: 2px;
    padding: 10px;
}

#outline button:hover {
    background-color: #f4ad66;
}


.dialogs {
    width: 90%;
}

.dialogs input {
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
    *display: inline;
    /* for IE7*/
    zoom: 1;
    /* for IE7*/
    vertical-align: middle;
    margin-left: 20px;
}

.dialogs label {
    display: inline-block;
    *display: inline;
    /* for IE7*/
    zoom: 1;
    /* for IE7*/
    /*float: left;*/
    padding-top: 5px;
    text-align: right;
    width: 140px;
}


.exampleContainer {
    position: absolute;
    top: 10%;
    left: 20%;
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
    border-radius: 3px;
    margin: auto;
    width: 80%;
    padding: 0px;
    overflow: hidden;
    height: 85%;
}

.footer {
    position: absolute;
    z-index: 2;
    bottom: 0px;
    color: white;
    background-color: #313e4f;
    width: 100%;
    height: 58px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    padding-top: 2px\9\0;
    /* ie 9*/
}

.player {
    position: absolute;
    top: 10%;
    display: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    padding-top: 2px\9\0;
    padding-right: 10px;
    box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.7);
    /* ie 9*/
}

.player #speedControl {
    width: 100px;
    padding: 5px;
    margin-top: -25px;
}

#speedControl .irs {
    width: 100%;

    float: left;

}

.fcopyright {
    padding-right: 4px;
}

.answer {
    display: block;
    visibility: hidden;
}

body {
    overflow-y: hidden;
}



.video-js .vjs-time-control {
    display: block;
}

.video-js .vjs-remaining-time {
    display: none;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 5px;
}

.audio_player-dimensions {
    width: 100%;
    height: 100%;
}

.vjs-poster {
    height: 100%;
    display: none;
}

.video-js.vjs-default-skin .vjs-big-play-button {
    display: none;
}

.vjs-default-skin.vjs-paused .vjs-control-bar {
    display: flex;
}


.vjs-volume-menu-button,
.vjs-menu-button,
.vjs-menu-button-inline,
.vjs-control,
.vjs-button,

.vjs-volume-menu-button-horizontal,
.vjs-vol-3 {
    display: flex;
}

#bookmark {
    left: 10px;
}


.btn-group-xs>.btn,
.btn-xs {
    padding: .1rem .2rem;
    font-size: .6rem;
    line-height: .2;
    border-radius: .2rem;
}

.text-decoration-underline {
    text-decoration: underline;
}


.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.modal-header {
    padding: 5px;
}

.popover.clean-mw {
    max-width: none;
}

.popover.clean-mh {
    max-height: none;
}

.popover.mw-25 {
    max-width: 25%;
    max-height: 25%;

}

.popover-header {
    padding: 2px;
    padding-left: 2px;
    font-size: 0.9rem;
    font-weight: bold;
    vertical-align:middle;
}

.popover-body {
    color: #9e0000;
    padding: 5px;
    font-family: "Microsoft JhengHei", "Heiti TC";
    /*white-space: pre-wrap;*/
    cursor: pointer;
    font-size: .8rem;
    line-height: 1.6;
    max-height: 800px;
    /*overflow-y: hidden;*/
}

.popover.scroll .popover-body {
    width: 100%;
    height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    cursor: pointer;
    font-size: 1rem;
}

.popover.scroll .popover-body img {
    max-width: 245px;
}


.searchBox .popover-body {
    height: auto;
    overflow-y: auto;
    cursor: pointer;
    white-space: normal;
    font-size: 0.5em;

}



#videoModal {

    margin: 30px auto;
}



#videoModal .modal-body {

    position: relative;
    padding: 0px;
}


#imgModal {

    margin: 30px auto;
}
.DisplayAnswerAll{
        
    background-image: url("img/showAllAns_Over.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 40px;
    height: 44px;
}
.GoToPage{
    
    background-image: url("img/goToPageIcon.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 22px;
    height: 24px;
}

.GoToPage:hover{

    background-color: rgba(245, 61, 171, 0.5);
}

.WebSite{
    background-image: url("img/webIcon.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 40px;
    height: 44px;
}
.wordFile{
    background-image: url("img/wordIcon.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 40px;
    height: 44px;
}

.pptFile{
    background-image: url("img/pptIcon.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 40px;
    height: 44px;
}

.showHideInfo {
    background-image: url("img/hotarea_Over.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 22px;
    height: 24px;
    
}

.showHideInfo :hover {

    background-color: rgba(214, 140, 184, 0.5);
  
}

.showHideAns {
    background-image: url("img/showAns_Over.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 22px;
    height: 24px;
}

.showHideAns :hover {

    background-color: rgba(214, 140, 184, 1);
    width: 22px;
    height: 24px;
}

.showHideAnsOff {
    background-image: url("img/Info_答案.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 26px;
    height: 26px;
}

button.flipClass {
    background-image: url("img/Media_翻轉教室.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.explanation {
    background-image: url("img/Media_內容詳釋.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;


}

.btn.emap {
    background-image: url("img/Media_電子地圖.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.histAni {
    background-image: url("img/videoIcon.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 40px;
    height: 44px;

}

button.histVideo {
     background-image: url("img/videoIcon.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 40px;
    height: 44px;
}

button.imgLib {
    background-image: url("img/Info_圖片補充.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.mapLib {
    background-image: url("img/Media_電子地圖.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.teachPt {
    background-image: url("img/Info_教學重點.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.teachIns {
    background-image: url("img/Info_教學指引.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.actObj {
    background-image: url("img/Info_活動目的.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.histExp {
    background-image: url("img/Info_史事速遞.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.charIntro {
    background-image: url("img/Info_人物介紹.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.geoExp {
    background-image: url("img/Info_地理探知.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.detaExp {
    background-image: url("img/Info_概念詳釋.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}
button.picStory {
    background-image: url("img/media_圖說歷史.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.story {
    background-image: url("img/Info_故事講述.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.culKlgBase {
    background-image: url("img/Info_文化知識庫.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 90px;
    height: 26px;
}

button.shortHist {
    background-image: url("img/Info_歷史短評.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.qs {
    background-image: url("img/Info_提問.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 62px;
    height: 26px;
}

/*
.qs .popover-header {
    margin-top: 5px;
    background-image: url("img/Info_提問.png");
    background-color: #ffffff;
    border-bottom: 0px solid #ebebeb;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 62px;
    height: 57px;
    color: transparent;
}*/

button.picExp {
    background-image: url("img/Info_圖意說明.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}

button.picLibrary {
    background-image: url("img/Info_圖片補充.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
    cursor: pointer;
}

button.mapLibrary {
    background-image: url("img/Info_地圖庫.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}


button.orgPoetry {
    background-image: url("img/Info_文學賞析.png");
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 82px;
    height: 26px;
}



.bi {
    z-index: 0;
}

#svg-container {
    z-index: 0;
}


.input-group.clean-mw {
    max-width: none;
}



.input-group.pgInp {

    max-width: 300px;
}

button.close {
    position: relative;
    top: 0;
    right: 0;
    color: grey;
}

.fancybox-button--share {
    display: none !important;
}

.cursor-zoom-in {
    cursor: zoom-in;
}

.cursor-zoom-out {
    cursor: zoom-out;
}

#imgModal button.close {
    position: absolute;
    top: 15px;
    right: 2%;
    color: grey;
    z-index: 10;
}



.mlayer {

    position: absolute;
    border: 0;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    z-index: 1;
}


.drawBoardReal {
  /*/  position: absolute;*/
    bottom: 0;
}


#svg-container {
    bottom: 0;
}

.dawBar {
    max-width: 100%;
    background-color: #ebefb3;
}

.dawBar .border-left {
    border-left: 1px solid #7295b7 !important;
}

.stroke-width {
    max-width: 25%;
      min-width: 60px!important;
}

.stroke-alpha {
    max-width: 25%;
      min-width: 60px!important;
}

/* picker */
.popover .color-picker {
    position: absolute;
    top: 30px;
    left: 100px;

    background: rgba(255, 255, 255, 0.75);
    padding: 10px;
    border: 1px solid rgba(203, 203, 203, 0.6);
    border-radius: 2px;
}

.color-picker .popover-body>div {
    width: 40px;
    display: inline-block;
    height: 40px;
    margin: 5px;
    border-radius: 100%;
    opacity: 0.7;
}



.color-picker>div:hover {
    opacity: 1;
}

#copyRight .card {
    position: absolute;
    bottom: 58px;
    right: 0px;
    background: rgba(76, 175, 80, 0.5);
    color: #000000;
    border: 0px solid rgba(76, 175, 80, 0);
    width: 100%;
}

.bottom-menu button {

    padding-left: 20px;
    padding-right: 20px;
}



.w-15 {
    width: 15% !important;
}

.w-18 {
    width: 18% !important;
}



.w-20 {
    width: 20% !important;
}

.w-30 {
    width: 30% !important;
}

.w-35 {
    width: 35% !important;
}


.w-40 {
    width: 40% !important;
}

.w-43 {
    width: 43% !important;
}

.w-45 {
    width: 45% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}
.f-130{
    width:130px !important;
}
.f-150{
    width:150px !important;
}
.f-280{
    width:280px !important;
}
.f-300{
    width:300px !important;
}
.w-65 {
    width: 65% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}


.w-82 {
    width: 82% !important;
}


.w-85 {
    width: 85% !important;
}

.w-90 {
    width: 90% !important;
}

.mw-40 {
    max-width: 400px !important;
}


.mw-60 {
    max-width: 60% !important;
}

.mw-98 {
    max-width: 98% !important;
}

.mw-80 {
    max-width: 80% !important;
}

.mw-90 {
    max-width: 90% !important;
}

.p-375 {
    padding: .375rem .75rem;
}

.mn-3 {
    margin-top: -20px;
}

.cursor-pointer {
    cursor: pointer;
}

.specW-250 {
    width: 250px;
}

.specW-300 {
    width: 300px;
}

.specW-400 {
    width: 400px;
}

.specH-200 .popover-body {
    height: 200px !important;
}

.specH-250 .popover-body {
    height: 250px !important;
}

.specH-300 .popover-body {
    height: 300px !important;
}

.specH-400 .popover-body {
    height: 400px !important;
}


.img-responsive {
    display: block;
    height: 350px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;

}

@media (max-width: 768px) {

    .ans {

        font-size: 1rem;

    }



    .popover-header {
        font-size: 1rem;
    }

    .popover-body {
        font-size: 0.8rem;
        line-height: 1.6;
    }

}

@media (max-width: 576px) {

    /* .footer {
        height: 98px;
    }

    #page-container {


        height: calc(100% - 156px);
    }

    #copyRight .card {

        bottom: 98px;

    }*/
    
    #toolbars{
        justify-content: start!important;
    }

    #toolbars .bkTitle{
         transform: scale(0.5);
    }


    .btn[data-target="#copyRight"] {
        display: none;
    }


    #pgInputBox {
        font-size: 8px;
        height: 34px;
    }

    .input-group.pgInp {

        max-width: 190px;
    }

    .w-40 {
        width: 100% !important;
        padding: 0px;
        margin: 0px;
    }


    #myModal .modal-dialog {
        max-width: 100% !important;

    }

    #myModal .modal-content {
        transform: scale(0.8);
    }

 
    #sidebar {

        width: 50%;
        height: calc(100% - 116px);

    }

    .ans {

        font-size: 1rem;

    }

    .popover-header {
        font-size: 1rem;
    }

    .popover-body {
        font-size: 0.8rem;
        line-height: 1.6;
    }

    .img-responsive {
        height: 300px;
    }

    .bottom-menu button {
        transform: scale(0.7);
        padding-left: 5px;
        padding-right: 5px;
    }

    .bkTitle {
        transform: scale(0.7);
    }

    .top-menu button {
        transform: scale(0.7);
    }
}

button {
    touch-action: manipulation;
}

button:disabled,
button[disabled] {
    border: 1px solid rgba(76, 175, 80, 0);
    background: rgba(76, 175, 80, 0);
    color: #666666;
}



button:hover:disabled {
    cursor: default;
    color: #666666;
}

button:active:disabled {
    cursor: default;
    color: #666666;
}

button.active {
    background: rgba(76, 175, 80, 1);
}

button.activeP {
    background-color: #138496;
}


.navbar svg path {
    fill: white;
    color: white;
}

.navbar .btn::after {
    fill: white;
    color: white;
}


#pgBox {
    color: white;
}

.jump {
    color: #0056b3;
    text-decoration: underline;
}

.jump:hover {
    color: #0056b3;
    text-decoration: underline;
    cursor: pointer;
}

.dawBar p {
    font-size: 0.9rem;
}

.dawBar .closes {
    position: absolute;
    bottom: 2%;
    right: 2%;
    color: grey;
    font-size: 24px;
    width: 35px;
    height: 35px;
    background-color: transparent;
    border: 0;

}

.default-fonts {
    font-family: "Microsoft JhengHei", "Heiti TC";
}

.modal {
    font-family: "Microsoft JhengHei", "Heiti TC";

}

.modal .modal-title {
    font-weight: bold;
    font-size: 1.2rem;
}

.modal .info {
    font-weight: bold;
}

.popover {
    font-family: "Microsoft JhengHei", "Heiti TC";
    font-size: 1vmax;
}

.carousel-item span {
    font-family: "Microsoft JhengHei", "Heiti TC";
    font-size: 14pt;
    font-weight: bold;
}

#dropdownMenuLink span {
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
}

.popover.showHideAns {


    z-index: 1060;
    display: block;
    max-width: 276px;

    background-image: none;
    width: auto;
    height: auto;

}


.popover.showHideAns :hover {

    background-color: rgba(37, 7, 25, 0)
}



.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0);
}

.popover-body .title {
    font-size: 12pt;
}

.popover-body ul {
    white-space: normal;
}

.popover-body ul li {
    list-style: disc;
}


.popover-body table td {
    border: 1px #9e0000 solid;
    vertical-align: middle;
}

.popover-body table td div {
    vertical-align: middle;
}

.popover-body strong {
    font-weight: bold;
}

.center {
    margin: auto;
    width: 80%;
    padding: 6px;
}

.center2 {
    margin: auto;
    width: 100%;
    padding: 6px;
    text-align: center;
    font-size: 1rem;
}


.explanation b {
    display: inline-block;
    margin-bottom: 5px;
}

.popover-body p {
    margin-bottom: 2px;
}

.popover-body td p {
    margin-bottom: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.teachPt ol,
.actObj ol {

    padding-left: 14px;
}


.teachPt li,
.actObj li {
    list-style: decimal;

}

.explanation ul {
    padding-left: 18px;
    list-style-type: disc;
}


.popover img {
    object-fit: contain;
}


.h-780 {
    height: 780px;
}

.modal {
    overflow-y: auto !important;
}

body.modal-open {
    overflow: visible;
}

.popover h6 {
    font-size: 0.5rem;
}

.tb-5c tr td:last-child {
    text-align: left;
    padding-left: .5rem;
    padding-right: .5rem;
}

.tb-5cT2 tr td:last-child {
    
    padding-left: .5rem;
    padding-right: .5rem;
}


.tb-c6 td:nth-child(3) {
    border-right: 3px solid #9e0000;

}

.tb-c4 td:nth-child(2) {
    border-right: 3px solid #9e0000;

}
.circleBullet {
    background: #9e0000;
    border-radius: 50%;
    width: 15px;
    height: 18px;
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
    color: white;
    font-size: 8px;
    text-align: center;
}

.img-popover {
    padding: 0;
}


/*2020-06-26 choi
.mlayer img{
    width:auto!important;
    height:auto!important;

}
*/


.onoffeye{
  margin-left: 10px;
} 


.onoffcodeul a, .jcode2 a{
    background-color: white;


}

.mx-45{
    max-width: 45%;
}

.mfx-450
{
    max-width: 450px;
}

.fh-350{
    height:350px;
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  /*user-drag: none;*/
}


iframe  {
    height:50px;
}

.opened .closed{
    display: none;
}

.opened .opened{
   display: block;
}

.closed .closed{
    display: none;
}

.closed .opened{
   display: none;
}