#snsDiv img {
    border-radius: 70%;
    vertical-align: top;
    max-width: 100%;
}

#snsDiv button {
    margin: 0 4rem;
    padding: 0;
    overflow: visible;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 0;
}

#snsDiv {
    z-index: 99;
    position: absolute;
    border: 0;
    height:0;
    text-align: right;
    background: #fff;
    clear: both;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
#snsDiv.open {
    display: flex;
    top: 56rem;
    height: auto;
    width: auto;
    flex-direction: column;
    gap: 10px;
    right: 15rem;
    padding: 10px 3px;
    border-radius: 15rem;
    box-shadow: 0 12px 28px rgb(23 41 65 / 27%);
    max-height: 200px;
    opacity: 1;
}

.caption{
    position: absolute;
    top: 70%;
    bottom: 0;
    left: 80%;
    width: 280px;
    padding-left: 25px;
    color: #fff;
    font-size: 14px;
}
@media screen and (max-width: 767px) {
    .caption{
        position: absolute;
        top: 64%;
        bottom: 0;
        left: 35%;
        width: 206px;
        padding-left: 25px;
        color: #fff;
        font-size: 14px;
    }
}


sub{
    position:relative;font-size:75%;line-height:0;vertical-align:baseline
}
sub{
    bottom:-.25em;}

@media (min-width: 1024px) {



    /*.page-head .page-navi li.gnb-item:not(:last-child)::after {*/
    /*    content: "";*/
    /*    display: block;*/
    /*    position: absolute;*/
    /*    height: 18px;*/
    /*    border-left: 1px solid #cdcdcd;*/
    /*    top: 38px;*/
    /*    right: -28rem;*/
    /*}*/

    .lnb-list li.lnb-item:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        height: 18px;
        border-left: 1px solid #cdcdcd;
        top: 4px;
        right: -20px;
    }


    .page-foot .service-policy .section-body > .navi-list > li.navi-item:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        height: 18px;
        border-left: 1px solid #373b44;
        top: 4px;
        right: -15px;
    }

    .related-sites .navi-list li.navi-line:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        width: 80%;
        border-bottom: 1px solid #373b44;
        top: 30px;
        right: 10%;
    }

    /* .site-map .navi-wrap .navi-list .navi-item:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        width: 50%;
        border-bottom: 1px solid #d6d8de;
        top: 28px;
    }

    .site-map .navi-wrap  .navi-list .navi-item {
        position: relative;
    } */

    .related-sites .navi-list li.navi-line {
        position: relative;
    }

    .page-foot .navi-list li.navi-item {
        position: relative;
    }


    .page-navi li.gnb-item {
        position: relative;
    }

    .lnb-list li.lnb-item {
        position: relative;
    }

}

@media (max-width: 424px) {
    .lnb-list li.lnb-item:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        /*border-bottom: 1px solid #0184d0; 20230629 */
        border-bottom: 1px solid rgb(236, 239, 245);
        top: 30px;
        right: 5px;
    }
}


#progress-container {
    width: 100%;
    background-color: #DDDDDD;
}
#progress-bar {
    width: 0;
    height: 30px;
    background-color: #108128;
}
#progress-bar-info{
    padding: 5px 0;
    width: 100%;
    text-align: center;
    font-size: 14rem;
}

.gnb-item {
    cursor: pointer;
}

button.btn.module-b.props {
    padding-right: 18rem;
    padding-left: 18rem;
    border-color: rgb(216, 219, 225);
}

button.btn.props .btn-text {
    display: block;
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
@media (max-width: 767px){
    .submit-form.module-b .form-list .form-item .form-wrap .form-body .form-area .btn.module-b.props {
        -webkit-box-flex: 0;
        -ms-flex:  0 0 auto;
        flex: 0 0 auto;
    }
}

.selectize-control.multi .selectize-input.has-items {
    display: flex;
    flex-wrap: wrap;
}
.selectize-control.multi .selectize-input>div{
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.outputDetail {
    position: relative;
    /*height: 200px;*/
    overflow: hidden;
}
.outputDetail.open{
    height: auto;
    overflow:visible;
}

.outputDetail .detail-fold{
    display:block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding:  6rem 0;
    border-bottom: 1px solid #d8dbe1;
    -webkit-box-shadow: inset 0px -20px 27px -2px #D9D9D9, 7px -1px 24px -1px rgba(219,219,219,0.72);
    box-shadow: inset 0px -20px 27px -2px #D9D9D9, 7px -1px 24px -1px rgba(219,219,219,0.72);
    background-color: #EFEBEB;
    text-align: center;
    font-size: 15rem;
    font-weight: 700;
}
.outputDetail .detail-fold:hover{
    text-decoration: underline;
    background-color: #d0cfcf;
    cursor: pointer;
}

.outputDetail.open  .detail-fold{
    bottom: -30rem;
}
.outputDetail .tag-wrap {
    display: flex;
    align-items: center;
    column-gap: 5px;
    row-gap: 5px;
    flex-wrap: wrap;
}
.outputDetail .tag-wrap > span {
    padding: 2px 8px;
    background-color: #eee;
    border-radius: 20px;
}

.submit-form.module-b .form-list .form-item .form-wrap .form-body .form-area .form.flex.sign{
    margin-right: 23px;
}
.submit-form.module-b .form-list .form-item .form-wrap .form-body .form-area .form.flex.sign:after{
    content: "~";
    position: absolute;
    right: -20px;
    top: 26%;
}

.submit-form.module-b .form-list.optn-list .form-item .form-wrap .form-head{
    display: flex;
}
.submit-form.module-b .form-list.optn-list .form-item .form-wrap .form-head .help{
    margin-left: 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    border: 0;
    outline: 0;
    background-color: #ffffff00;
    width: 2px;
    cursor: pointer;
}
.submit-form.module-b .form-list.optn-list .form-item .form-wrap .form-head .help:before {
    content: "";
    width: 5em;
    height: 20rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 170% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144c-17.7 0-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/svg%3E");
}

.submit-form.module-b .form-list.optn-list .form-item .form-wrap .form-head .help .btn-text{
    display: block;
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.info-board .board-summary #opt-help {
    text-align: left;
    white-space: pre-wrap;
    overflow: auto;
    height: 500rem;
    width: 300rem;
    border: 1rem #dad7d7 solid;
    padding: 50px;
}

#videoViewer .popup-content-body .tab-display{
    padding-bottom: 1.5em;
}

#videoViewer .video-viewer{
    display: flex;
    align-items: center;
    justify-content: center;
}


.selectize-control.form-elem.multi.plugin-remove_button{
    min-height: 100%;
}
.selectize-input{
    min-height: 40px;
}
.selectize-dropdown-content{
    max-height: 300px;
}
.selectize-dropdown .optgroup-header{
    background: #bac1c5;
}
.selectize-dropdown .option {
    padding: 6px 15px;
}
.selectize-dropdown .option.selected{
    background: #f3eeb6;
}
.output-input.selected, .output-fav.selected{
    outline: 2px solid #83c998;
}
.output-input.selected:focus, .output-fav.selected:focus{
    outline-color: #000;
}



#pdfView{
    width:100%;
    height: 950px;
}
@media (max-width: 1024px) {
    #pdfView {
        height: 670px;
    }
}
@media (max-width: 768px) {
    #pdfView {
        height: 550px;
    }
}
@media (max-width: 425px) {
    #pdfView {
        height: 310px;
    }
}
@media (max-width: 375px) {
    #pdfView {
        height: 270px;
    }
}

#tools{
    z-index: 99;
    position: fixed;
    bottom: 7%;
    right: 2%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    opacity: .7;
}
#tools:hover{
    opacity: 1;
}
#tools > div{
    position: relative;
}
#tools > div > button{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    width: 100%;
    padding: 7px 8px;
    border: 2px solid #90c7cd;
    background-color: #fff;
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
}
#tools > div > button > span.txt{
    display: none;
}
#tools > div.alarm > button > span.count {
    position: absolute;
    top: -6px;
    right: -4px;
    font-size: 14px;
    background-color: #e92020;
    color: #fff;
    padding: 2px 6px;
    border-radius: 50%;
}
#tools > div > button > svg{
    display: block;
    width: 23px;
    height: 23px;
    fill: #0178d0;
}
#tools > div.alarm .list{
    position: absolute;
    bottom: 0;
    right: 50px;
    display: none;
}

@media (max-width: 1023px) {
    #tools{
        bottom: 0;
        left: 0;
        flex-direction: row;
        width: 100%;
        opacity: 1;
    }
    #tools > div{
        flex: 1 1 auto;
    }
    #tools > div > button{
        border-radius: 0;
    }
    #tools > div > button > svg{
        width: 18px;
        height: 18px;
    }
    #tools > div > button > span.txt{
        display: block;
    }
    #tools > div.alarm > button > span.count{
        position: relative;
        top: initial;
        right: initial;
    }
    #tools > div.alarm .list {
        position: absolute;
        bottom: 30px;
        right: initial;
        left: 0;
        width: 100vw;
    }
}
