:root {
    --border-size: 3px;
    --button-size: 20px
}

.inner-slider {
    display: flex;
    height: 520px;
    overflow-y: hidden;
    background-color: #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    position: relative;
}

.inner-slider .slide-in {
    width: 920px;
    height: 520px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

.inner-slider .slide-in img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 920px;
    height: 520px;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}

.inner-slider .slide-in img.active {
    opacity: 1;
    z-index: 1;
    pointer-events: auto;
}

/* Buttons */
.inner-slider .slide-in .slide-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}


.inner-slider .slide-in .slide-buttons .slide-page {
    width: calc(var(--button-size) - 10px);
    height: calc(var(--button-size) - 10px);
    margin: 5px;
    border-radius: 50%;
    background-color: #f1f1f1;
    position: relative;
    cursor: pointer;
}

.inner-slider .slide-in .slide-buttons .slide-page.active {
    transform: scale(1.2);
    background-color: #bbbbbb;
    box-shadow: 0 0 5px #ccc(0, 123, 255, 0.5);
}

/* Details */
.inner-slider .details {
    width: calc(100% - 920px);
    display: block;
    color: var(--bg-color-1);
}

.inner-slider .details .title {
    font-size: 30px;
    padding: 30px;
}

.inner-slider .details .details-part {
    display: flex;
    padding: 30px;
    color: #000;
}

.inner-slider .details .details-left {
    width: 50%;
    font-size: 16px;
}

.inner-slider .details .details-right {
    width: 50%;
    font-size: 16px;
}

.details-right .map-button {
    text-decoration: none;
    color: var(--bg-color-1);
    display: block;
}

.inner-slider .details .details-left .social-sr {
    display: flex;
    margin-top: 10px;
    justify-content: left;
}

.inner-slider .details .details-left .social-sr a {
    display: block;
    height: 60px;
    width: 55px;
    margin-left: -15px;
}

.inner-slider .details .details-left .social-sr img {
    height: 60px;
    width: 60px;
    display: block;
}

.inner-slider .details-right .store-logo {
    margin-top: -20px;
    width: 100% !important;
}

.inner-slider .details-right .store-logo img {
    height: 100px;
    transform: translateX(-20px);
}

.inner-slider .map-button img {
    height: 24px;
    transform: translateY(8px);
}

.inner-slider .map-button span {
    height: 24px;
    line-height: 24px;
    font-weight: bold;
    border-bottom: 2px solid var(--bg-color-2);
    padding-bottom: 2px;
}

.inner-description {
    width: 1000px;
    margin: 46px auto 0;
    margin-bottom: 100px;
}

.inner-description .text * {
    color: var(--bg-color-1);
    text-align: justify;
    font-family: Ubuntu;
    font-size: 16px;
    font-style: normal;
    line-height: 30px;
    letter-spacing: 0.5px;
}

.inner-description .map-frame {
    width: 1000px;
    height: 600px;
    display: block;
}

.page-boxes {
    justify-content: center;
}