.middle {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 581px;
}

.middle::before {
    content: ' ';
    display: block;
    position: absolute;
    width: 818px;
    height: 986px;
    background-image: url(../assets/images/phone_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-8%);
}

.middle::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 335px;
    height: 534px;
    transform: translateY(-124px);
    z-index: 0;
    box-shadow: 0px 60px 60px 0px rgba(0, 0, 0, 0.3);
}

.middle_phone {
    display: block;
    position: absolute;
    width: 335px;
    height: 638px;
    background-image: url(../assets/images/phone.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-124px);
    z-index: 1;
}

.middle_circle {
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 162px;
    height: 162px;
    cursor: pointer;
}

.middle_circle::before {
    content: ' ';
    display: block;
    position: absolute;
    width: 116%;
    height: 116%;
    top: -8%;
    left: -8%;
    border-radius: 150px;
    background-color: rgba(123, 123, 123, 0.25);
    z-index: 1;
}

.middle_circle::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 150px;
    background-color: #818181;
    z-index: 2;
}

.middle_circle__title {
    display: flex;
    position: absolute;
    top: 16px;
    color: #FFFFFF;
    font-size: 1.6em;
    font-weight: 400;
    z-index: 3;
}

.middle_circle__title::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 100px;
    height: 1px;
    background-color: #FFFFFF;
    transform: translateX(-50%);
}

.middle_circle__remark {
    display: block;
    position: absolute;
    top: 74px;
    font-size: 1em;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 1.5em;
    word-break: keep-all;
    z-index: 4;
}

.middle_circle.n1 {
    transform: translate(-352px, -278px);
}
.middle_circle.n4 {
    transform: translate(352px, -278px);
}
.middle_circle.n2 {
    transform: translate(-404px, -64px);
}
.middle_circle.n5 {
    transform: translate(404px, -64px);
}
.middle_circle.n3 {
    transform: translate(-282px, 116px);
}
.middle_circle.n6 {
    transform: translate(282px, 116px);
}

.middle_circle.n1 > .middle_circle__title {
    color: #F7D861;
}
.middle_circle.n2 > .middle_circle__title {
    color: #EE9D77;
}
.middle_circle.n3 > .middle_circle__title {
    color: #83C8C5;
}
.middle_circle.n4 > .middle_circle__title {
    color: #F0A0C3;
}
.middle_circle.n5 > .middle_circle__title {
    color: #ABD498;
}
.middle_circle.n6 > .middle_circle__title {
    color: #92B3DE;
}

.middle_circle.n1 > .middle_circle__title::before {
    background-color: #F7D861;
}
.middle_circle.n2 > .middle_circle__title::before {
    background-color: #EE9D77;
}
.middle_circle.n3 > .middle_circle__title::before {
    background-color: #83C8C5;
}
.middle_circle.n4 > .middle_circle__title::before {
    background-color: #F0A0C3;
}
.middle_circle.n5 > .middle_circle__title::before {
    background-color: #ABD498;
}
.middle_circle.n6 > .middle_circle__title::before {
    background-color: #92B3DE;
}

@keyframes animation-circle {
    0% {
        background-color: #6b6b6b;
    }

    70% {
        background-color: #818181;
    }

    100% {
        background-color: #818181;
    }
}

.middle_circle__active::after {
    animation: animation-circle;
    animation-timing-function: linear;
    animation-duration: .7s;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
}

.middle_circle.n1.middle_circle__active::before {
    background-color: #F7D86133;
}
.middle_circle.n2.middle_circle__active::before {
    background-color: #EE9D7733;
}
.middle_circle.n3.middle_circle__active::before {
    background-color: #83C8C533;
}
.middle_circle.n4.middle_circle__active::before {
    background-color: #F0A0C333;
}
.middle_circle.n5.middle_circle__active::before {
    background-color: #ABD49833;
}
.middle_circle.n6.middle_circle__active::before {
    background-color: #92B3DE33;
}

.middle_phone__view {
    display: block;
    position: absolute;
    top: 43px;
    left: 7px;
    right: 7px;
    bottom: 63px;
}

.middle_phone__video {
    display: block;
    position: absolute;
    object-position: top;
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.middle_phone__cover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    opacity: 0;
    z-index: 2;
}

@keyframes animation-opacity {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.middle_phone__cover--active {
    animation: animation-opacity;
    animation-duration: .7s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
}

.middle_button {
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    bottom: -33px;
    padding: 10px 42px 4px 42px;
    border-radius: 70px;
    border-bottom: solid 10px #112848;
    background-color: #2A4F83;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    font-family: 'Do Hyeon', sans-serif;
    line-height: normal;
 }

.middle_button > h1 {
    margin: 0;
}

.middle_button::before {
    content: ' ';
    display: block;
    position: absolute;
    bottom: -11px;
    right: -14px;
    width: 60px;
    height: 64px;
    background-image: url(../assets/images/tap.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


/*Responsive Styles*/
/* Smartphones (portrait) ---------------- */
@media only screen
and (max-width : 414px)
and (orientation : portrait) {
    .middle {
        height: 400px;
        transform: scale(.55);
    }

    .middle_phone,
    .middle::after {
        /*transform: scale(.8) translateY(-25%);*/
        transform: scale(.8) translateY(-292px);
    }

    .middle_circle.n1 {
        transform: translate(-238px, -365px);
    }
    .middle_circle.n4 {
        transform: translate(238px, -365px);
    }
    .middle_circle.n2 {
        transform: translate(-238px, -150px);
    }
    .middle_circle.n5 {
        transform: translate(238px, -150px);
    }
    .middle_circle.n3 {
        transform: translate(-238px, 70px);
    }
    .middle_circle.n6 {
        transform: translate(238px, 70px);
    }

    .middle_button {
        transform: scale(.8);
        bottom: 50px;
    }
}

/* Smartphones (landscape) ---------------- */
@media only screen
and (min-width : 415px)
and (max-width : 813px)
and (orientation : landscape) {
    .middle {
        height: 228px;
        transform: scale(.6);
    }

    .middle_phone,
    .middle::after {
        transform: scale(.55) translateY(-13%);
    }

    .middle_circle.n1 {
        transform: translate(-284px, -139px);
    }
    .middle_circle.n4 {
        transform: translate(284px, -139px);
    }
    .middle_circle.n2 {
        transform: translate(-405px, 7px);
    }
    .middle_circle.n5 {
        transform: translate(405px, 7px);
    }
    .middle_circle.n3 {
        transform: translate(-218px, 40px);
    }
    .middle_circle.n6 {
        transform: translate(218px, 40px);
    }

    .middle_button {
        display: none;
    }
}

/* Tablets (portrait) -------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    .middle {
        transform: scale(.8);
    }

    .middle_circle.n1 {
        transform: translate(-314px, -278px);
    }
    .middle_circle.n4 {
        transform: translate(314px, -278px);
    }
    .middle_circle.n2 {
        transform: translate(-314px, -80px);
    }
    .middle_circle.n5 {
        transform: translate(314px, -80px);
    }
    .middle_circle.n3 {
        transform: translate(-314px, 116px);
    }
    .middle_circle.n6 {
        transform: translate(314px, 116px);
    }
}

/* Tablets (landscape) ------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    .middle {
        height: 504px;
        transform: scale(.8);
    }
}

/* Old Desktops and laptops ------------------ */
@media only screen
and (min-width : 1025px) {
    .middle {
        transform: scale(.85);
    }

    .middle_remark {
        bottom: -2vh;
    }
}

/* Desktops ------------------ */
@media only screen
and (min-width : 1201px) {

}

/* iPhone X ------------------ */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2),
only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3),
only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3) {
    .middle {
        height: 50vh;
    }
}