/* mixin */ 
@import "../mixin/ui-mixin";

.fixed-btn {
  position:fixed; right:50px; bottom:50px; z-index:999;
  ul {
    li {
      &.gl-navi {
        background:#fff; width:58px; height:58px; border-radius: 50%; position:relative;box-shadow: -1px 2px 10px 0 rgba(0,0,0,0.1);border: 1px solid var(--line-color); cursor:pointer; 
        > img {width:24px; height:24px; color:#5f6674; @include alignCenter;}
        .layer {
          @include scrollbar; cursor:default; display:none; position:absolute; background:#fff; border-radius: 5px;bottom: calc(100% + 10px); right:0; width: 320px; border: 1px solid var(--line-color); box-shadow: 0 5px 6px 0 rgba(0,0,0,0.1); height: 380px; overflow-y: auto; 
          ul {
            > li {
              position: relative; float:left; width:33.33%; text-align:center; cursor:pointer; height:115px; border-radius: 3px; border-bottom: 1px dashed var(--line-color);
              &:not(:nth-child(3n)) { border-right: 1px dashed var(--line-color); }
              &:hover { background:#f2f2f2; }
              .box {
                @include alignCenter; width: calc(100% - 20px); top:53%;
                .img-wrap {
                  width: 45px; height: 45px; text-align: center; margin: 0 auto; position:relative;
                  > img {width: 100%; height: 100%; }
                }
                .navi-txt {
                  font-size: 1.15rem; color: #888; padding-top: 15px; word-break: break-all; font-weight:500; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 18px;
                }
              }
              &:hover {
                .img-wrap {
                  border-color: var(--main-color);
                }
              }
            }
          }
        }
        &.on {
          .layer {
            display:block;
          }
        }
      }
      &.top-btn {
        width:58px; height:58px; position:relative; background:#000; border-radius: 50%; color:#fff; margin-top:20px; box-shadow: -1px 2px 10px 0 rgba(0,0,0,0.1);
        img {width:30px; height:30px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);} cursor:pointer;
      }
    }
  }
}

@media(max-width:1440px) {
  .fixed-btn {
    right:20px; bottom:20px;
  }
}

@media(max-width:1024px) {
  .fixed-btn {
    ul {
      li {
        &.gl-navi {
          width:40px; height:40px;
          .layer { 
            width: 300px; 
            ul {
              > li {
                .box {
                  .navi-txt { font-size: 1.1rem; }
                }
              }
            }
          }
        }
        &.top-btn {
          width:40px; height:40px; 
          img {
            width:24px; height:24px;           
          }
        }
      }
    }
  }
}