/* Browser */
@media screen and (min-width: 1100px) {
    .jll-topORleft {
        display: inline-block;
        width: 250px;
        height: inherit;
        overflow-y: auto;
    }

    .jll-topORleft .jll-topORleft-preview {
        width: 90%;
    }

    .jll-centerORmiddle {
        display: inline-block;
        height: 100%;
        overflow-y: auto;
    }

    .jll-bottomORright {
        display: inline-block;
        width: 300px;
        height: 100%;
        background: white;
        overflow-y: auto;
    }

    .jll-bottomORright-area img {
        width: 100%;
        margin-left: 0%;
    }

    .jll-bottomORright-area .area-top {
        position: fixed;
    }
}

/* Pad */
@media screen and (max-width: 1099px) and (min-width: 601px) {
    .jll-topORleft {
        display: block;
        width: 100%;
        height: auto;
        overflow-y: hidden;
    }

    .jll-topORleft .jll-topORleft-preview {
        width: 90%;
    }

    .jll-centerORmiddle {
        display: block;
        height: auto;
        overflow-y: hidden;
    }

    .jll-bottomORright {
        display: block;
        width: 100%;
        height: auto;
        overflow-y: hidden;
    }

    .jll-bottomORright-area img {
        width: 80%;
        margin-left: 10%;
    }

    .jll-bottomORright-area .area-top {
        position: relative;
    }
}


/* Phone*/
@media screen and (max-width: 600px) {
    .jll-topORleft {
        display: block;
        width: 100%;
        height: auto;
        overflow-y: hidden;
    }

    .jll-topORleft .jll-topORleft-preview {
        width: 90%;
    }

    .jll-centerORmiddle {
        display: block;
        height: auto;
        overflow-y: hidden;
    }

    .jll-bottomORright {
        display: block;
        width: 100%;
        height: auto;
        overflow-y: hidden;
    }

    .jll-bottomORright-area img {
        width: 90%;
        margin-left: 5%;
    }

    .jll-bottomORright-area .area-top {
        position: relative;
    }

}

.jll-topORleft {
    float: left;
    background: white;
}

.jll-topORleft .jll-topORleft-preview {
    margin-left: 5%;
}

.jll-topORleft .jll-topORleft-content {
    width: 90%;
    margin: 5%;
}

.jll-topORleft .jll-topORleft-content a {
    width: 50%;
}

.jll-topORleft a {
    font-size: 10pt;
    font-weight: 600;
    margin-right: 5%;
    margin-left: 5%;
    text-align: center;
}

.jll-topORleft .brand-div {
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-bottom: 1px solid #fafafa;
    text-align: center;
}

.jll-topORleft .brand-div img {
    position: absolute;
    left: 17px;
    height: 30px;
    background: white;
    border-radius: 30px;
}

.jll-topORleft .brand-div a {
    font-size: 12pt;
    font-weight: 800;
    color: #2c2c2c;
}

.jll-centerORmiddle {
    background: linear-gradient(to right, #eedbd0, #ffebdf, rgba(255, 244, 244, 0.87));
}

.jll-centerORmiddle .jll-centerORmiddle-area {
    margin: 30px 30px 30px 30px;
}

.jll-centerORmiddle .jll-centerORmiddle-area .area-top {
    height: 30px;
}

.jll-centerORmiddle .jll-centerORmiddle-area .area-body {
    position: relative;
    font-size: 10pt;
}

.jll-centerORmiddle .jll-centerORmiddle-area .area-map {
    width: 100%;
    height: 300px;
}

.jll-centerORmiddle .jll-centerORmiddle-area .area-body img {
    margin-left: 10px;
    cursor: pointer;
}

.jll-centerORmiddle .jll-centerORmiddle-area .area-body img:hover {
    opacity: 0.8;
    transition: opacity 500ms;
}

.jll-centerORmiddle .jll-centerORmiddle-area video {
    width: 100%;
}

.jll-centerORmiddle .jll-centerORmiddle-area .area-body a {
    position: absolute;
    text-align: center;
    overflow: hidden;
}


.jll-bottomORright {
    background: white;
}

.jll-bottomORright-area {
    width: inherit;
}

.jll-bottomORright-area .area-top {
    z-index: 100;
    background: #ff9e00;
    color: white;
    font-size: 11pt;
    font-weight: 600;
    width: inherit;
    text-align: center;
    height: 40px;
    line-height: 40px;

}

.jll-bottomORright-area .area-body {
    width: inherit;
    height: 40px;
}

.jll-bottomORright-area .thumb-frame {
    position: relative;
}

.jll-bottomORright-area .thumb-frame .thumblabel {
    bottom: 10px;
    left: 5px;
    background: white;
    position: absolute;
    color: black;
    border: 1px solid #ff8478;
    border-radius: 5px;
    padding: 3px;
    font-size: 8pt;
    font-weight: 700;
}

.jll-bottomORright-area .thumb-frame .thumbnail {
    cursor: pointer;
}

.jll-bottomORright-area  .thumb-frame .thumbnail:hover {
    opacity: 0.8;
    transition: opacity 500ms;
}

.jll-popup {
    z-index: 100;
    background: #cecece;
    width: 94%;
    left: 3%;
    bottom: 55px;
    position: absolute;
    border-radius: 10px 10px 0px 10px;
}

.jll-exit {
    z-index: 100;
    position: absolute;
    bottom: 15px;
    text-align: center;
    right: 3%;
    width: 80px;
    height: 40px;
    background: #2b72f4;
    cursor: pointer;
    font-weight: 700;
    font-size: 10pt;
    border-radius: 0px 0px 10px 10px;
}

.jll-exit img {
    margin-top: 3px;
}

.jll-exit:hover {
    background: #ff8478;
}

.jll-cover {
    z-index: 99;
    background: black;
    opacity: 0.7;
    position: absolute;
    top: 0px;
    left: 0px;
}