.header {
    background-image: url("../img/Dialog_System/S01/Dialog-System01_BG.0e6e83107a7a.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
    padding-bottom: 0;
    background-position: bottom;
}

.section-head {
    display: flex;
    flex-flow: wrap;
}

.display-4 {
    font-size: 2rem;
    padding-right: 4px;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .display-4 {
        font-size: 3rem;
        padding-right: 8px;
    }
}

@media (min-width: 992px) {
    .display-4 {
        font-size: 3.4rem;
        padding-right: 8px;
    }
}

/*S02_section02*/
.Box {
    position: relative;
    height: 1000px;
    margin-bottom: -120%;
    max-width: 280px;
}

.bgbox-r {
    position: absolute;
    width: 100%;
    height: 370px;
    top: 27%;
    background-color: rgba(203, 204, 212, 0.81);
    right: 0;
    border-radius: 10%;

}

#S02_01 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_01.5e46076053fe.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 21%;
    height: 12%;
    top: 3%;
    left: 15%;
}

#S02_01arrow {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_01arrow.5a5c9d79a8f1.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 15%;
    height: 5%;
    top: 13%;
    left: 1%;
    transform: rotate(90deg);
}

#S02_02 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_02.34d79b315872.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 35%;
    height: 10%;
    top: 18%;
    left: -11%;
}

#S02_02arrow {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_02arrow.c9f25040ffff.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 22%;
    height: 16%;
    top: 10.5%;
    left: 37%;
    transform: rotate(90deg);
}

#S02_03 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_03.ef471d351efa.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 50%;
    height: 10%;
    top: 16.3%;
    left: 60%;
}

#S02_03arrow {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_04arrow.11bf364f1b48.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 70px;
    height: 1%;
    top: 278px;
    left: 68%;
    transform: rotate(90deg);
}

#S02_04 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_04.3eb0cf7db794.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 33%;
    height: 10%;
    top: 22.5%;
    left: 24%;
}

#S02_04arrow01 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_04arrow.11bf364f1b48.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 70px;
    height: 1%;
    top: 18.5%;
    left: 28%;
    transform: rotate(90deg);
}

#S02_04arrow02 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_06arrow.907dded4045b.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 68%;
    height: 5%;
    top: 36%;
    left: -20%;
    transform: rotate(90deg) scaleX(-1);

}

#S02_05_01 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_05-01.c3f6e13ba538.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 120px;
    top: 318px;
    right: -20.5%;
}

#S02_05arrow01 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_05arrow01.76e913981828.png");
    background-size: contain;
    background-repeat: no-repeat;
}

#S02_05arrow02 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_05arrow02.9c2d43b14b3b.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 5%;
    height: 64px;
    top: 41.5%;
    right: 46%;
}

#S02_05arrow03 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_05arrow03.5f23ac696e96.png");
    background-size: contain;
    background-repeat: no-repeat;
}

#S02_06 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_06.3574120e0bf5.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 59%;
    height: 15%;
    right: 29%;
    top: 48%;
}

#S02_06arrow {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_06arrow.907dded4045b.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 76%;
    height: 4%;
    top: 37%;
    left: -33.5%;
    transform: rotate(90deg);
}

#S02_07 {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_07.a62d9d8ef7c5.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 23%;
    height: 10%;
    right: 4%;
    top: 53%;
}

#S02_07arrow {
    position: absolute;
    background-image: url("../img/Dialog_System/S02/Dialog-System02_07arrow.f2de3b807bd4.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 5%;
    height: 2%;
    top: 55%;
    right: 24%;
}

.arrow-title {
    position: absolute;
}

.arrow-title h3 {
    font-size: 0.6rem;
}

#arrow-title1 {
    top: 10%;
    left: -5%;
}

#arrow-title2 {
    top: 37%;
    right: 88%;
    left: -13.5%;
}

.description {
    position: absolute;

}

.description h6 {
    font-style: italic;
    margin-bottom: 0.5px;
    font-size: 0.45rem;
}

.description p {
    color: #03188d;
    line-height: 1.2;
    font-size: 0.45rem;
}

#description1 {
    left: 75%;
    top: 12%;
    right: -15%;
}

#description2 {
    left: 23.5%;
    top: 12.5%;
}

#description3 {
    left: 51%;
    top: 25%;
}

#description4 {
    top: 41%;
    right: -10%;
}

.img-title {
    position: absolute;
    font-style: italic;
    font-size: 0.45rem;
    font-weight: 500;
}

#img-title1 {
    top: 32.5%;
    right: 69.5%;
}

#img-title2 {
    top: 31.5%;
    right: 53%;
}

#img-title3 {
    top: 30.5%;
    right: 37%;
}

@media (min-width: 768px) {
    .Box {
        margin: 8% 0 10% 0;
        height: 315px;
        min-width: 656px;
    }

    .bgbox-r {
        height: 315px;
        width: 46%;
        right: 9%;
        top: 5%;
    }

    #S02_01 {
        width: 13%;
        height: 53%;
        top: 26%;
        left: 1%;
    }

    #S02_01arrow {
        width: 10%;
        height: 18%;
        top: 77%;
        left: 11%;
        transform: rotate(0deg);
    }

    #S02_02 {
        width: 19%;
        height: 35%;
        top: 88%;
        left: 18.5%;
    }

    #S02_02arrow {
        width: 24%;
        height: 53%;
        top: 35.5%;
        left: 16.5%;
        transform: rotate(0deg);
    }

    #S02_03 {
        width: 27%;
        height: 40%;
        top: 15.5%;
        left: 15%;
    }

    #S02_03arrow {
        background-image: url("../img/Dialog_System/S02/Dialog-System02_03arrow.4ef8718ec7de.png");
        width: 6.5%;
        height: 10%;
        top: 33%;
        left: 42%;
        transform: rotate(0deg);
    }

    #S02_04 {
        width: 17%;
        height: 40%;
        top: 54%;
        left: 34%;
    }

    #S02_04arrow01 {
        width: 17%;
        height: 20%;
        top: 59%;
        left: 16.5%;
        transform: rotate(0deg);
    }

    #S02_04arrow02 {
        background-image: url("../img/Dialog_System/S02/Dialog-System02_03arrow.4ef8718ec7de.png");
        width: 6%;
        height: 6%;
        top: 60%;
        left: 51%;
        transform: rotate(0deg);
    }

    #S02_05_01 {
        width: 40%;
        height: 40%;
        top: 10%;
        right: 11.5%;
    }

    #S02_05arrow01 {
        width: 2%;
        height: 15%;
        top: 46%;
        right: 28%;
    }

    #S02_05arrow02 {
        width: 2%;
        height: 18%;
        top: 43%;
        right: 22%;
    }

    #S02_05arrow03 {
        width: 2%;
        height: 21.5%;
        top: 39.5%;
        right: 17%;
    }

    #S02_06 {
        width: 27%;
        height: 40%;
        right: 15%;
        top: 58%;
    }

    #S02_06arrow {
        width: 39%;
        height: 15%;
        top: 89%;
        left: 37.5%;
        transform: rotate(0deg);
    }

    #S02_07 {
        width: 15%;
        height: 40%;
        right: -1%;
        top: 65%;
    }

    #S02_07arrow {
        width: 3%;
        height: 2%;
        top: 75%;
        right: 12%;
    }

    .arrow-title h3 {
        font-size: 0.85rem;
    }

    #arrow-title1 {
        top: 96%;
        left: 8%;
    }

    #arrow-title2 {
        top: 96%;
        right: 18%;
        left: 47%;
    }

    .description h6, .description p {
        font-size: 0.56rem;
    }

    #description1 {
        left: 22%;
        top: 3%;
        right: 0;
    }

    #description2 {
        left: 17%;
        top: 75%;
    }

    #description3 {
        left: 40%;
        top: 86%;
    }

    #description4 {
        top: 45%;
        right: 5%;
    }

    .img-title {
        font-size: 0.56rem;
        font-weight: 500;
    }

    #img-title1 {
        top: 12%;
        right: 46.5%;
    }

    #img-title2 {
        top: 8%;
        right: 39%;
    }

    #img-title3 {
        top: 5%;
        right: 32%;
    }
}

@media (min-width: 992px) {
    .Box {
        margin: 8% 0 10% 0;
        height: 500px;
        max-width: 1200px;
    }

    .bgbox-r {
        height: 500px;
        width: 50%;
        right: 5%;
        top: 5%;
    }

    .arrow-title h3 {
        font-size: 1.2rem;
    }

    .description h6, .description p {
        font-size: 0.85rem;
    }

    .img-title {
        font-size: 0.85rem;
    }
}

/*S03_section03*/
.list-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0
}

.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    background-color: #fff;
    border: none;
}

.timeline .timeline-panel {
    padding-left: 10px;
}

.timeline-inverted .timeline-panel {
    padding-right: 10px;
}

.timeline-panel {
    position: relative;
    height: 410px;
    margin-bottom: -40%;
}

.timeline-image, .timeline-content {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.timeline-content {
    z-index: 1;
    position: absolute;
    padding-top: 50%;
    height: 100px;
    font-weight: 500;
}

.timeline-content .timeline-body {
    background-color: white;
}

.timeline-image img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.timeline .timeline-panel .timeline-image {
    position: absolute;
    right: -10%;
    left: 25%;
}

.timeline-inverted .timeline-panel .timeline-image {
    position: absolute;
    left: -10%;
    right: 0;
}

.timeline-inverted .timeline-panel .timeline-content {
    position: absolute;
    right: 0%;
}

@media (min-width: 768px) {
    .timeline-panel {
        margin-bottom: 0;

    }

    .timeline-image, .timeline-content {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .timeline-inverted .timeline-panel .timeline-image {
        left: 0;
        right: 0;
    }

    .timeline-inverted .timeline-panel .timeline-image img {
        padding-left: 12%;
        padding-right: 1%;
    }

    .timeline .timeline-panel .timeline-image {
        left: 50%;
        right: -50%;
    }

    .timeline .timeline-panel .timeline-image img {
        padding-right: 12%;
        padding-left: 1%;
    }

    .timeline-content {
        width: 48%;
        font-size: 1rem;
        padding-top: 0;
        height: 200px;
        top: 50%;
        margin-top: -100px;
    }

    .timeline-body {
        position: absolute;
        height: 200px;
    }
}

@media (min-width: 992px) {
    .timeline-panel {
        height: 550px;
    }

    .timeline-content {
        font-size: 1.3rem;
        top: 48%;
    }
}