.dmh-luh,
.dmh-luh * {
    box-sizing: border-box;
}

.dmh-luh {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: auto;
    height: 48px;
    background-color: #1e4471;
    display: flex;
    padding: 20px;
    align-items: center;
    z-index: 1;
    transition: padding 0.5s, display 1s;
    border-radius: 100px;
    border: solid 2px #00bceb;
    z-index: 9999;
}

.dmh-luh .btn {
    overflow: hidden;
    cursor: pointer;
}

.dmh-luh .btn-icn {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.dmh-luh .btn-icn .dm-img {
    position: absolute;
    visibility: hidden;
}

.dmh-luh .btn-txt {
    vertical-align: middle;
    line-height: 0;
}

.dmh-luh ul {
    display: none;
}

.dmh-luh .btn-icn.anm .a1 {
    z-index: 0;
    animation: btn-icon-rot 1s ease-in-out 0s 1 normal forwards;
}

.dmh-luh .btn-icn.anm .a2 {
    z-index: 1;
    animation: btn-icon-rot 1s ease-in-out 1.25s 1 normal forwards;
}

.dmh-luh .btn-icn.anm .a3 {
    z-index: 2;
    animation: btn-icon-rot 1s ease-in-out 2.5s 1 normal forwards;
}

.dmh-luh .btn-icn.anm .a4 {
    z-index: 3;
    animation: btn-icon-rot 1s ease-in-out 3.75s 1 normal forwards, anm-over 0.1s linear 4.75s 1 normal forwards;
}

.dmh-luh.scrl {
    padding: 10px;
}

.dmh-luh.scrl .btn-txt {
    display: none;
}

.dmh-luh.open,
.dmh-luh.open.scrl {
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    height: auto;
    display: block;
    padding: 0;
    transition: width 1s, height 1s;
    border-radius: 0;
    border: none;
}

.dmh-luh.open li {
    margin: 0;
    padding: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.dmh-luh.open ul > li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dmh-luh.open li .dm-img {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    padding-top: 0;
}

.dmh-luh.open .hd {
    background: #fff;
    border: none;
    color: #4d4c4c;
}

.dmh-luh.open .btn {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.dmh-luh.open .cls {
    line-height: 0;
    vertical-align: middle;
    float: right;
    cursor: pointer;
}

.dmh-luh.open .phn {
    display: inline-block;
    vertical-align: middle;
}

.dmh-luh.open ul {
    display: block;
}

.dmh-luh.open .ancr {
    display: inline-block;
    width: calc(100% - 50px);
    vertical-align: middle;
}

/* 600px */
@media only screen and (min-width:37.5em) {
    .dmh-luh {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    }

    .dmh-luh.open,
    .dmh-luh.open.scrl {
        bottom: 40px;
        right: 40px;
        left: auto;
        top: auto;
        border-radius: 15px;
        width: 415px;
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.5);
        border: solid 2px #00bceb;
    }

    .dmh-luh.open .hd {
        border-radius: 15px 15px 0 0;
    }
}

@-webkit-keyframes btn-icon-rot {
    0% {
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
        visibility: visible;
    }

    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100%{
        visibility: hidden;
    }
}

@-webkit-keyframes anm-over {
    0% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

@keyframes btn-icon-rot {
    0% {
        -webkit-transform: translateY(25px);
        transform: translateY(25px);
        visibility: visible;
    }

    75% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100%{
        visibility: hidden;
    }
}

@keyframes anm-over {
    0% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}