body {background-image: url(img/background.png);}
:any-link {text-decoration: none;}

#outerContainer:fullscreen {background-image: url(img/background.png); background-color: white;}
#outerContainer:-moz-full-screen {background-image: url(img/background.png); background-color: white;}
#outerContainer:-webkit-full-screen {background-image: url(img/background.png); background-color: white;}
#outerContainer:-ms-fullscreen {background-image: url(img/background.png); background-color: white;}


.justify-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.format-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
}

.search_highlight {
    position: absolute;
    background: yellow;
    opacity: 0.3;
    display: none;
}

.ex-link {
    position: absolute;
    z-index: 11;
}
.ex-link-goto {
    background: green;
    opacity: 0.3;
}
.ex-link-goto:hover {
    border: 2px solid red;
}
.ex-link a {
    display: block;
    width: 100%;
    height: 100%;
}
.ex-link-open {
    background: blue;
    opacity: 0.3;
}
.ex-link-open:hover {
    border: 2px solid red;
}
.ex-link-video video {
    width: 100%;
    height: 100%;
}

#blackout {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
    display: none;
}

/* 이용안내 */
#use-guide {
    width: 600px;
    height: 620px;
    box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.16);
    z-index: 11;
    display: none;
}
#use-guide .header {
    width: 100%;
    height: 67px;
    background-color: #42a5e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#use-guide .header span.title {
    margin-left: 30px;
}
#use-guide .header img.close {
    width: 15px;
    height: 15px;
    align-self: center;
    cursor: pointer;
    margin-right: 30px;
}
#use-guide .content {
    width: 100%;
    height: 553px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 공유 */
#share {
    box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.16);
    background-color: white;
    width: 600px;
    height: 487px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 11;
    display: none;
}
#share .header {
    width: 600px;
    height: 67px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #42a5e8;
}
#share .header span.title {
    color: white;
    margin-left: 30px;
}
#share .header img.close {
    width: 15px;
    height: 15px;
    align-self: center;
    cursor: pointer;
    margin-right: 30px;
}
#share .social-service {
    width: 540px;
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
}
#share .social-service .social-icon {
    width: 60px;
    height: 60px;
    margin: 0 20px;
}
#share .qrcode {
    position: absolute;
    top: 65px;
    right: 35px;
}
#share .qrcode img {
    width: 70px;
    height: 70px;
}
#share .text-field {
    width: 480px;
    height: 60px;
    border: solid 1px #d3d3d3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#share .text-field .location {
    width: 360px;
    font-size: 0.9rem;
    color: #333333;
    margin-left: 10px;
    border: none;
    background-color: #f7f7f7;
}
#share .social-service .streetline {
    width: 480px;
    height: 1px;
    margin: 40px 0;
    background-color: #e5e5e5;
}
#share .text-field .copy {
    width: 100px;
    height: 60px;
    font-size: 1.2rem;
    color: #ffffff;
    background-color: #42a5e8;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* printing */
#printing {
    width: 600px;
    height: 620px;
    box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.16);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 11;
    display: none;
}
#printing .header {
    width: 600px;
    height: 67px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #42a5e8;
}
#printing .header .title {
    margin-left: 30px;
}
#printing .header .close {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 30px;
}
#printing .box-gray {
    width: 540px;
    height: 493px;
    background-color: #f7f7f7;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#printing .preview {
    width: 540px;
    height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#printing .preview .image {
    display: none;
}
#printing .preview .info {
    display: none;
    font-size: 0.95rem;
    color: #7f7c7d;
}
#printing .preview .image img {
    height: 180px;
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.3);
}
#printing .hr {
    width: 480px;
    border-bottom: 1px solid #e5e5e5;
}
#printing .control-container {
    width:  100%;
    height: 266px;
    display: flex;
    justify-content: left;
}
#printing .control {
    width: 348px;
    margin-left: 31px;
}
#printing .control .subject {
    margin-top: 20px;
}
#printing .control .subject label {
    font-weight: bold;
    line-height: 3.0;
    margin-left: 0px;
}
#printing .control input[type=radio] {
    /*margin-top: -1px;*/
    vertical-align: middle;
}
#printing .control label {
    font-size: 0.9rem;
    color: #666666;
    margin-left: 8px;
    line-height: 1.4;
}
#printing .control .option-group {
    display: flex;
    flex-direction: column;
}
#printing .control .option-group .wrapper {
    margin-bottom: 10px;
    display: flex;
}
#printing .control .option-group .select {
    margin: -5px 0 0 30px;
}
#printing .control .option-group .text-field {
    margin: -5px 0 0 46px;
}
#printing .control .option-group .text-field span {
    
}
#printing .control .option-group input[type=text] {
    width: 55px;
    height: 23px;
    padding-left: 2px;
    background-color: #dddddd;
    border: none;
}
#executing-print {
    width: 480px;
    height: 60px;
    border: solid 1px #42a5e8;
    color: #42a5e8;
    background-color: white;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    margin-top: 18px;
    cursor: pointer;
}
#executing-print:hover {
    background-color: #42a5e8;
    color: white;
}

#raw-download {
    width: 600px;
    height: 487px;
    box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
    z-index: 11;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: none;
}
#raw-download .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 600px;
    height: 67px;
    background-color: #42a5e8;
}
#raw-download .header .title {
    margin-left: 30px;
}
#raw-download .header .close {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 30px;
}
#raw-download .hr {
    width: 480px;
    border-bottom: 1px solid #e5e5e5;
    margin: 17px 0 34px 0;
}
#raw-download .content {
    width: 540px;
    height: 330px;
    background-color: #f7f7f7;
    margin-top: 30px;
    padding-top: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: auto;
}
#raw-download .content .files .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7px;
    width: 480px;
    height: 63px;
    margin-bottom: 17px;
    border: 1px solid #bbbbbb;
    font-size: 1rem;
    color: #666666;
    cursor: pointer;
    background-color: white;
}
/*#raw-download .content .item:hover {
    background-color: rgb(246, 242, 243);
    color: #888;
}*/
#raw-download .content .files .item .desc div.size {
    font-weight: 300;
    margin-top: 6px;
    font-size: 0.9rem;
}
#raw-download .content .item img {
    margin-left: 7px;
}
#raw-download .button {
    width: 220px;
    height: 60px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    color: #42a5e8;
    border: 1px solid #42a5e8;
    cursor: pointer;
}
#raw-download .button:hover {
    color: #f7f7f7;
    background-color: #42a5e8;
}

/* 검색 */
#findbox {
    width: 600px;
    height: 487px;
    box-shadow: 3px 3px 16px 0 rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
    z-index: 11;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: none;
}
#findbox .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 600px;
    height: 67px;
    background-color: #42a5e8;
}
#findbox .header .title {
    margin-left: 30px;
}
#findbox .header .close {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 30px;
}
#findbox .content {
    width: 540px;
    height: 330px;
    background-color: #f7f7f7;
    margin-top: 30px;
    padding-top: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: auto;
}
#findbox .text-field {
    display: flex;
    justify-content: space-between;
}
#word-to-find {
    width: 410px;
    height: 60px;
    padding-left: 10px;
    color: #111111;
    font-size: 1.1rem;
    border: 1px solid #d3d3d3;
}
#findbox .text-field .button-exec {
    cursor: pointer;
}
#findbox .comment {
    text-align: left;
    width: 484px;
    margin-top: 18px;
    font-weight: bold;
    color: #666666;
}
#findbox .hr {
    width: 480px;
    border-bottom: 1px solid #e5e5e5;
    margin: 15px 0 34px 0;
}
#findbox .result {
    width: 484px;
}
#findbox .result .desc {
    width: 100%;
    text-align: center;
    color: #666666;
    font-size: 1rem;
}
#findbox .result .resultset {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
#findbox .result .resultset .item {
    display: flex;
    width: 48%;
    margin-bottom: 15px;
}
#findbox .result .resultset .item img {
    cursor: pointer;
    margin-right: 10px;
    max-width: 90px;
    max-height: 102px;
}
#findbox .result .resultset .item .subject {
    margin-bottom: 10px;
}
#findbox .result .resultset .item .quickover {
    font-size: 0.55rem;
}
#findbox .pagination {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 10px 0 20px 0;
}

#prog1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 15px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    z-index: 1601;
    display: none;
}

#prog2 {
    display: none;
}


/* navigation */
#go-prev {position: absolute; display: flex; height: 100%; align-items: center; left: -70px; top: 0px; cursor: pointer; z-index: 7; visibility: hidden;}
#go-prev div {width: 31px; height: 60px; background-image: url(img/go_prev.png);}
/*#go-prev div:hover {background-image: url(img/go_prev_o.png);}*/
#go-next {position: absolute; display: flex; height: 100%; align-items: center; right: -70px; top: 0px; cursor: pointer; z-index: 7;}
#go-next div {width: 31px; height: 60px; background-image: url(img/go_next.png);}
/*#go-next div:hover {background-image: url(img/go_next_o.png);}*/

#North {
    /*flex-direction: column;*/
    width: 100vw;
    height: 55px;
    background-color: #42a5e8;
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
#North .custom-logo {
    position: absolute;
    top: 0px;
    left: 28px;
}
#North .custom-logo img {
    align-self: center;
    height: 55px;
}
#North .navigation {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 453px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.15);
}
#North .navigation .left_area {
    margin-left: 20px;
}
#North .navigation .right_area {
    margin-right: 20px;
}
#North .row1 {
    position: absolute;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#North .-notth-icon {
    width: 30px;
    height: 30px;
    margin-right: 20px;
    object-fit: contain;
    cursor: pointer;
}
#raw-file-link {
    height: 21px;
}
#North .-notth-icon2 {
    width: 31px;
    height: 28px;
    margin: 0 7px;
    object-fit: contain;
    cursor: pointer;
}
#North .tooltip {
    display: none;
    position: relative;
    top: 18px;
    left: -84px;
}
#North .tooltip .bubble {
    position: absolute;
    width: 98px;
    height: 63px;
    background-image: url(img/north/text_bubble.png);
    z-index: 11;
}
#North .tooltip .label {
    position: absolute;
    font-size: 0.9rem;
    width: 98px;
    top: 25px;
    text-align: center;
    color: #666666;
    z-index: 12;
}

#page_number {
    width: 150px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#page_number span, #page_number input {
    font-size: 1.4rem;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 1.2;
}
#page_number span.delimiter {
    display: inline-block;
    margin: 0 10px;
}
#where-to-go {
    position: absolute;
    top: 12px;
    left: 170px;
    width: 30px;
    height: 30px;
    text-align: right;
    font-family: "Source Sans Pro";
    border-color: transparent;
    border-bottom: 1px solid white;
    background-color: transparent;
    outline-style: none;
    display: none;
}

#West {
    position: absolute;
    top: 0px;
    left: 0px;
}
#West .handle-table-of-contents {
    position: absolute;
    top: 75px;
    left: 20px;
    cursor: pointer;
    z-index: 3;
    display: none;
}
#West .table-of-contents {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 400px;
    height: 100vh;
    background-color: #fefcfc;
    /*opacity: 0.8;*/
    transform: translateX(-105%);
    transition: transform 0.4s;
    box-shadow: 10px 0px 15px 0px rgba(0,0,0,0.25);
    overflow: hidden;
    z-index: 4;
}
#West .table-of-contents .header {
    width: 400px;
    height: 54px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#West .table-of-contents .header .title {
    margin-left: 20px;
}
#West .table-of-contents .header img.close {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin-right: 25px;
}
#West .table-of-contents .contents {
    height: calc(100vh - 84px);
    overflow-y: scroll;
}
#West .table-of-contents .contents div {
    line-height: 2.2;
    cursor: pointer;
}
#West .table-of-contents .contents div:hover {
    color: #984d03;
}
#West .table-of-contents .contents .level0 {
    color: #494949;
    font-weight: bold;
    font-size: 10pt;
    margin-left: 30px;
}
#West .table-of-contents .contents .level1 {
    color: #494949;
    font-size: 10pt;
    margin-left: 41px;
}
#West .table-of-contents .contents .level2 {
    color: #727171;
    font-size: 10pt;
    margin-left: 51px;
}
#West .table-of-contents .contents .level3 {
    color: #737070;
    font-size: 10pt;
    margin-left: 59px;
}
#West .table-of-contents .contents .level4 {
    color: #737070;
    font-size: 10pt;
    margin-left: 66px;
}

#East {
    position: absolute;
    top: 0px;
    right: 0px;
}

#sentinel {
    width: 1px;
    height: 1px;
}

#South {
    position: absolute;
    width: 100vw;
    z-index: 3;    
}
#preview {
    position: absolute;
    width: 100vw;
    bottom: 0px;
    display: flex;
    justify-content: center;
    transition: bottom 0.4s;
}
#preview .handle-preview {
    position: absolute;
    top: -45px;
    width: 90px;
    height: 90px;
    cursor: pointer;
}
#preview .panel {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0px;
    width: 100vw;
    height: 185px;
    padding-top: 15px;
    z-index: 2;
}
#preview .panel-bg {
    position: absolute;
    top: 0px;
    width: 100vw;
    height: 200px;
    opacity: 0.55;
    background-color: #42a5e8;
    z-index: 1;
}
#preview .panel .preview-item {
    margin: 0 3px;
}
#preview .panel .preview-item img {
    max-width: 140px;
    max-height: 140px;
    cursor: pointer;
}
#preview .panel-pagination {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 170px;
    width: 100vw;
    z-index: 2;
}
#preview .panel-pagination .note,
#findbox .resultset .note {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    border-radius: 6px;
    background-color: #D9D9D9;
    cursor: pointer;
}

#preview .panel-pagination .active,
#findbox .resultset .active {
    background-color: white;
    cursor: default;
}

#printArea {
    display: block;
}

@media print {
    #outerContainer {
        display: none;
    }
    #printArea {
        display: block;
    }
    html, body {
        width: 210mm;
        height: 296mm;
    }
    @page {
        size: A4;
        margin: 0;
    }
    #printArea div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 296mm;
    }
    #printArea div:not(:first-child) {
        page-break-before: always;
    }
    #printArea img {
        max-width: 200mm;
        max-height: 286mm;
        border: none;
    }
}