.progress {             height: 10px; width: 200px; background: linear-gradient(#a88fbf 0 0), linear-gradient(#a88fbf 0 0), #1d1f21;
                        background-size: 60% 100%; background-repeat: no-repeat; animation: progress-7x9cg2 3s infinite; }

.svgContent {           display: none; width: 100%; max-width: 850px; margin: 0 auto; background-color: #777; 
                        padding-bottom: 48px; user-select: none; }

@keyframes progress-7x9cg2 {
                        0% { background-position: -150% 0,-150% 0; }
                        66% { background-position: 250% 0,-150% 0; }
                        100% { background-position: 250% 0, 250% 0; } }


.pNavBtnN,
.pNavBtnB {             position: fixed;  
                        width: 80px; height: 80px; line-height: 76px; font-size: 2.00em;
                        background-color: #1d1f21; color: #efefef;
                        user-select: none; }


.pNavBtnN {             right: 0; top: calc(50vh - 90px); }
.pNavBtnB {             left: 0; top: calc(50vh - 90px); }
                        /* pNavBtn::hover s.u. */

.iconMobDiv {           display: none; background-color: #777; position: fixed; width: 185px; height: 47px; 
                        right: 0; border-bottom-left-radius: 10px; }

.mobDivLogo {           display: none; position: fixed; left: 0; z-index: 100000; width: 70px; margin: 11px 0 0 10px; }

.hhIcon {               position: fixed; left: 0; width: 42px; height: 42px; margin: 15px; user-select: none; }
.hhIcon:hover {         cursor: pointer; width: 40px; height: 40px; margin: 16px; }

.hhIconX {              float: right; width: 36px; height: 36px; margin: 0px; }
.hhIconX:hover {        cursor: pointer; width: 34px; height: 34px; margin: 1px; }

.homeIcon {             position: fixed; right: 6px; width: 42px; height: 42px; margin: 15px; user-select: none; }
.homeIcon:hover {       cursor: pointer; width: 40px; height: 40px; margin: 16px; }

.zoomIcon {             position: fixed; left: -3px; top: 55px; width: 46px; height: 46px; margin: 15px; user-select: none; }
.zoomIcon:hover {       cursor: pointer; width: 44px; height: 44px; margin: 16px; }

.logoutIcon {           position: fixed; right: 3px; top: 55px; width: 46px; height: 46px; margin: 15px; user-select: none; }
.logoutIcon:hover {     cursor: pointer; width: 44px; height: 44px; margin: 16px; }

.menuBox {              display: none; position: fixed; z-Index: 200000; width: 100%; height: 100vh; 
                        background-color: rgba(0,0,0,0.80); }
.menuBoxGoodbye {       display: none; position: fixed; z-Index: 200000; width: 100%; height: 100%; 
                        background-color: rgba(0,0,0,0.90); }

.menuBoxCnt {           width: 100%; max-width: 450px; height: 100vh; padding: 30px 25px; 
                        font-size: 15px; line-height: 21px; text-align: left; color: #1d1f21; 
                        background-color: #efefef; 
                        box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.29);
                        -webkit-box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.29);
                        -moz-box-shadow: 10px 0px 5px 0px rgba(0,0,0,0.29); 
                        user-select: none; }

.menuBoxCntList {       height: calc(100vh - 200px); position: relative; overflow-y: auto; border-top: 1px solid #efefef; }
.menuBoxCntList::-webkit-scrollbar { width: 5px;  /* Remove scrollbar space */ }
.menuBoxCntList::-webkit-scrollbar-thumb { background: #ddd; }


.menuBtnSection,
.menuBtnSectionA {      width: calc(100% - 10px); padding: 6px 10px 5px 10px; border-bottom: 1px solid #c3c3c3; 
                        display: flex; flex-wrap: wrap; justify-content: space-between;
                        font-size: 14px; font-weight: 600; }
.menuBtnTopic,
.menuBtnTopicA {        width: calc(100% - 10px); padding: 5px 10px 4px 18px; border-bottom: 1px solid #c3c3c3; 
                        display: flex; flex-wrap: wrap; justify-content: space-between;
                        font-size: 13px; font-weight: 400; }

.menuBtnSectionA,
.menuBtnTopicA {        background-color: #a78fc3; }

.menuBtnSection:hover,
.menuBtnTopic:hover,
.menuBtnSectionA:hover,
.menuBtnTopicA:hover {  cursor: pointer; background-color: #181818; color: #fff; }


.btmPageDisplay {       width: 70px; height: 35px; line-height: 54px; background-color: #000; border-radius: 5px; 
                        padding: 0; display: inline-block; border: none; outline: none;
                        color: #777; text-align: center; font-size: 1.20em; font-weight: bold;  }
.btmPageDisplay:hover { cursor: ns-resize; background-color: #a78fc4; color: #fff; }

input[type='number'] {  -moz-appearance:textfield; }                /* Removes spinner from input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

.btmFooter {            position: fixed; height: 55px; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; 
                        background-color: #1d1f21; font-size: 12px; color: #efefef; padding: 10px 20px 8px 20px; }

.btmDivL {              width: 20%; text-align: left; position: relative; user-select: none; }
.btmDivC {              width: 60%; text-align: center; }
.btmDivR {              width: 20%; text-align: right; padding: 10px 0 0 0; position: relative; user-select: none; }

.btmSub1,
.btmSub2,
.btmSub3 {              display: inline-block; }
.btmSubM {              display: none; }

.btmBtn,
.btmBtnM,
.btmBtnS,
.btmBtnPB {             width: 36px; height: 35px; line-height: 32px; background-color: #000; border-radius: 5px; 
                        color: #777; text-align: center; font-size: 1.40em; font-weight: 600; 
                        margin: 0px 2px; display: inline-block; }
                        /* btmBtn:hover s.u. */

.btmBtnM {              background-image: url('i/nav-icon-hh-777.svg'); background-repeat: no-repeat; background-size: 40%; 
                        background-position: center center; }
.btmBtnM:hover {        background-image: url('i/nav-icon-hh-white.svg'); }

.btmBtnS {              background-image: url('i/nav-icon-zoom-777.svg'); background-repeat: no-repeat; background-size: 55%; 
                        background-position: center center; }
.btmBtnS:hover {        background-image: url('i/nav-icon-zoom-white.svg'); }

.btmBtnPB {             background-image: url('i/nav-icon-pBack-777.svg'); background-repeat: no-repeat; background-size: 55%; 
                        background-position: center center; }
                        /* btmBtnPB:hover s.u. */

.btmLogo {              position: absolute; max-width: 120px; top: -34px; border-radius: 5px; user-select: none; }
.btmCopyright {         position: absolute; font-size: 0.88em; top: 10px; left: 0px; color: #777; }

.btmZoomLevel {         position: absolute; right: 150px; top: 3px; width: 50px; text-align: center; color: #777; }
.btmZoomRange {         position: absolute; right: 0; width: 150px; }

.sInput {               width: 100%; height: 36px; border: 1px solid #e4e4e4; outline: none; background-color: #fff; border-radius: 5px; 
                        padding: 0 10px; background-image: url('i/nav-icon-zoom-white.svg'); background-repeat: no-repeat; 
                        background-position: calc(100% - 5px) center; }

.sResultCntBox {       height: calc(100vh - 250px); overflow-y: auto; margin-top: -10px; }
.sResultCntBox::-webkit-scrollbar { width: 5px;  /* Remove scrollbar space */ }
.sResultCntBox::-webkit-scrollbar-thumb { background: #ddd; }

.sListBtn {             font-size: 1.00em; line-height: 1.10em; padding: 10px 15px 10px 12px; border-bottom: 1px solid #c3c3c3; }
.sListBtn:hover {       cursor: pointer; background-color: #a78fc4; color: #fff; }

.roundBtnBlue,
.roundBtnRed {          width: 100%; max-width: 240px; height: 50px; line-height: 50px;
                        background-color: #53b7e8; border-radius: 10px; margin: 0 auto;
                        text-align: center; font-size: 0.70em; font-weight: 500; }
.roundBtnRed {          background-color: #f15b66; }
                        /* roundBtns:hover s. u. */


/************************************************************************************************/
/***** @MEDIA QUERY *****************************************************************************/
/************************************************************************************************/

@media screen and (max-width: 1091px) {

    .btmLogo {          border: 1px solid rgba(29, 31, 33, 0.3); }
    #btmRights {        display: none; }
}

@media screen and (max-width: 1005px) {
    
    .homeIcon {         transform: scale(62%); top: -14px; right: 37px; }
    .logoutIcon {       transform: scale(62%); top: -16px; right: -7px; }
    
    .hhIcon {           transform: scale(58%); top: -14px; left: calc(100% - 190px); }
    .zoomIcon {         transform: scale(62%); top: -16px; left: calc(100% - 152px); }
    
    .iconMobDiv {       display: block; }
    
    .pNavBtnN,
    .pNavBtnB {         width: 50px; height: 60px; line-height: 56px; font-size: 2.00em;
                        background-color: rgba(29, 31, 33, 0.05); color: #1d1f21; 
                        top: calc(50vh - 120px); }
                        /* pNavBtnN:hover s.u. */
    
    .btmCopyright {     display: none; }
    .btmLogo {          position: absolute; max-width: 80px; top: 3px; border-radius: 3px; }
    
}

@media screen and (max-width: 851px) {
    
    .btmZoomLevel,
    .btmZoomRange {     display: none; }
    
}

@media screen and (max-width: 851px) {
    
    .btmDivL,
    .btmDivR {          display: none; }
    .btmDivC {          width: 100%; }
}

@media screen and (max-width: 501px) {

    .btmFooter {        height: 120px;  }
    .btmDivC {          display: flex; flex-direction: row; justify-content: center; }
    
    .btmPageDisplay {   height: 44px; font-size: 1.40em; }
    
    .btmBtn,
    .btmBtnM,
    .btmBtnS,
    .btmBtnPB {         width: 48px; height: 40px; line-height: 36px; font-size: 1.80em; margin: 0; }
    
    .btmSub1 {          display: none; }
    .btmSub2 {          margin-top: 5px; }
    .btmSub3 {          display: none; }
    .btmSubM {          display: flex; justify-content: center; width: 100%; margin-top: 8px; }

}

@media screen and (max-width: 451px) {

    .iconMobDiv {           width: 100%; border-radius: 0; }
    .mobDivLogo {           display: block; }
    .svgContent {           margin: 0 auto 0 auto; padding-top: 48px; padding-bottom: 0; } */

}


/************************************************************************************************/
/***** @MEDIA QUERY TOUCH DEVICES ***************************************************************/
/************************************************************************************************/

@media (hover: hover) {
    
    .pNavBtnN:hover,
    .pNavBtnB:hover {       cursor: pointer; background-color: #000; }
    
    .btmBtn:hover,
    .btmBtnM:hover, 
    .btmBtnS:hover,
    .btmBtnPB:hover {       cursor: pointer; background-color: #a78fc4; color: #fff; }
    .btmBtnPB:hover {       background-image: url('i/nav-icon-pBack-white.svg'); }
    
    .roundBtnBlue:hover,
    .roundBtnRed:hover {    cursor: pointer; transform:scale(98%); }
    
    @media screen and (max-width: 1005px) {
        
    .pNavBtnN:hover,
    .pNavBtnB:hover {   background-color: rgba(29, 31, 33, 0.30); }
    
    }
    
}