.u-image.u-section-1 {
    background-size: unset !important;
}

.header {
    background-image: none;
    height: 700px;
}

.headerText {
    font-family: 'Open Sans',sans-serif;
    font-size: 6rem;
    font-weight: 900;
    font-stretch: 100%;
    text-anchor: middle;
    margin-top: 5rem;
    background-color: #de216b;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

#divBuffer {
    height: 250px;
}

@media (min-width:1980px) {
    .u-image.u-section-1 {
        background-size: cover !important;
    }

    .header {
        height: 851px;
    }
}

@media (max-width:1200px) {
}

@media (max-width: 991px) {
}


@media (max-width: 767px) {
    .header > div {
        font-size: 6rem;
    }

    #divBuffer {
        height: 500px;
    }
}

@media (max-width: 500px) {
    .header > div {
        font-size: 5rem;
    }

    #divBuffer {
        height: 100px;
    }
}

body {
    font-family: 'Open Sans',sans-serif
}



.infoContainer {
    background-color: #fff;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 1px 1px 67px -22px rgba(95,95,95,0.6);
    -webkit-box-shadow: 1px 1px 67px -22px rgba(95,95,95,0.6);
    -moz-box-shadow: 1px 1px 67px -22px rgba(95,95,95,0.6);
    padding-inline: 60px;
    padding-block: 30px;
    border-radius: 20px;
    margin-top: -80px;
}

.infoText {
    font-weight: 600;
    line-height: 3.5vmin;
    vertical-align: middle;
    text-align:left
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.containerMedia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
    grid-auto-flow: row;
    grid-template-areas:
        "div1 div2 ."
        "div3 div4 ."
        "div5 div6 ."
        "div7 div8 .";
    align-items: center;
    max-width:1400px;
}

.div1 {
    grid-area: div1;
}

.div2 {
    grid-area: div2;
}

.div3 {
    grid-area: div3;
}

.div4 {
    grid-area: div4;
}

.div5 {
    grid-area: div5;
}

.div6 {
    grid-area: div6;
}

.div7 {
    grid-area: div7;
}

.div8 {
    grid-area: div8;
}


.image {
    width: 80%;
}

.arrows {
    width: 60px;
    height: 72px;
    left: 50%;
    margin-left: -30px;
    bottom: 20px;
}

    .arrows path {
        stroke: #B6024B;
        fill: transparent;
        stroke-width: 3px;
        animation: arrow 2s infinite;
        -webkit-animation: arrow 2s infinite;
    }

@keyframes arrow {
    0% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
    0% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    80% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.arrows path.a1 {
    animation-delay: -1s;
    -webkit-animation-delay: -1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s; /* Safari 和 Chrome */
}

.containerCard {
    max-width: 80%;
    margin-block: 50px;
    padding-bottom:50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px 20px;
    grid-auto-flow: row;
    grid-template-areas:
        "card1 card2 card3 card4";
    margin-left: auto;
    margin-right: auto;
}

.card {
    border-radius: 20px;
    box-shadow: 1px 0px 24px 1px rgba(158,157,157,0.30);
    -webkit-box-shadow: 1px 0px 24px 1px rgba(158,157,157,0.30);
    -moz-box-shadow: 1px 0px 24px 1px rgba(158,157,157,0.30);
    padding: 20px;
}

.card1 {
    grid-area: card1;
}

.card2 {
    grid-area: card2;
}

.card3 {
    grid-area: card3;
}

.card4 {
    grid-area: card4;
}

@media (max-width:1200px) {
    .container {
        display: block
    }
}

@media (min-width:1800px) {
    .header {
        height: 1000px;
    }
}
@media (max-width:400px){
    .mediaImage {
        width: 100%;
    }
    .containerCard{
        display:block;
    }
    .card{
        margin-bottom:20px
    }
}

.section {
    text-align: center;
    font-size: 3em;
    color: white;
}

    .section img {
        border-radius: 50%;
        height: 200px;
        width: 200px;
        object-fit: cover;
        margin: 0 auto;
        display: block;
        box-shadow: 0 10px 30px rgb(0 0 0 / 15%), 0 1px 4px rgb(0 0 0 / 15%), 0 1px 0 rgb(0 0 0 / 7%);
    }

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: white;
}

h1 {
    margin: 0 0 20px 0;
}

@media screen and (max-width: 700px) {
    h1 {
        font-size: 2em;
    }

    .section {
        font-size: 1.5em;
    }

        .section img {
            width: 100px;
            height: 100px;
        }
}
.timeline {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

    /* The actual timeline (the vertical ruler) */
    .timeline::after {
        content: '';
        position: absolute;
        width: 6px;
        background-color: white;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

/* Container around content */
.containerTimeline {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

    /* The circles on the timeline */
    .containerTimeline::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -16px;
        background-color: white;
        border: 4px solid #C51C5F;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

/* Place the container to the left */
.left {
    left: 0;
}

/* Place the container to the right */
.right {
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
    left: -16px;
}

/* The actual content */
.content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }

    /* Full-width containers */
    .containerTimeline {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

        /* Make sure that all arrows are pointing leftwards */
        .containerTimeline::before {
            left: 60px;
            border: medium solid white;
            border-width: 10px 10px 10px 0;
            border-color: transparent white transparent transparent;
        }

    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
        left: 15px;
    }

    /* Make all right containers behave like the left ones */
    .right {
        left: 0%;
    }
}

.submitBtn{
    padding:15px;
    width:40%!important;
    float:right;
}

.u-section-2 .u-shape-1 {
    width: 250px;
    height: 250px;
    margin: 90px auto 0 0
}

.u-section-2 .u-shape-2 {
    width: 788px;
    height: 472px;
    margin: 45px 0 0 auto
}

.u-section-2 .u-layout-wrap-1 {
    width: 829px;
    margin: -639px auto 0
}

.u-section-2 .u-layout-cell-1 {
    min-height: 590px
}

.u-section-2 .u-container-layout-1 {
    padding-left: 20px;
    padding-right: 20px
}

.u-section-2 .u-group-1 {
    width: 611px;
    min-height: 457px;
    background-image: none;
    margin: 0 auto 0 -20px
}

.u-section-2 .u-container-layout-2 {
    padding: 30px
}

.u-section-2 .u-text-1 {
    text-transform: uppercase;
    letter-spacing: 7px;
    line-height: 1;
    font-weight: 400;
    margin: 0
}

.u-section-2 .u-text-2 {
    font-size: 3.75rem;
    font-weight: 700;
    margin: 28px 0 0
}

.u-section-2 .u-text-3 {
    margin: 28px 0 0
}

.u-section-2 .u-btn-1 {
    border-style: none none solid;
    padding: 0
}

.u-section-2 .u-btn-2 {
    background-image: none;
    border-style: none;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 2px;
    margin: 33px auto 0
}

.u-section-2 .u-layout-cell-2 {
    min-height: 646px
}

.u-section-2 .u-container-layout-3 {
    padding-left: 20px;
    padding-right: 20px
}

.u-section-2 .u-image-1 {
    width: 487px;
    height: 368px;
    margin: -36px auto 0 -92px
}

.u-section-2 .u-text-4 {
    font-size: 1.125rem;
    margin: 35px 0 0
}

.u-section-2 .u-text-5 {
    margin-left: 0;
    margin-right: 0
}

.u-section-2 .u-btn-3 {
    border-style: none none solid;
    padding: 0
}

.u-section-2 .u-layout-cell-3 {
    min-height: 646px
}

.u-section-2 .u-container-layout-4 {
    padding-left: 20px;
    padding-right: 20px
}

.u-section-2 .u-image-2 {
    width: 365px;
    height: 463px;
    margin: -197px -9px 0 auto
}

.u-section-2 .u-text-6 {
    font-weight: 700;
    font-size: 3rem;
    margin: 21px 0 0 19px
}

.u-section-2 .u-text-7 {
    font-size: 1.125rem;
    margin: 28px 1px 0 19px
}

.u-section-2 .u-shape-3 {
    width: 210px;
    height: 53px;
    margin: 10px 0 30px auto
}

@media (max-width: 1199px) {
    .u-section-2 .u-sheet-1 {
        min-height: 1507px
    }

    .u-section-2 .u-shape-1 {
        width: 196px;
        height: 196px
    }

    .u-section-2 .u-shape-2 {
        width: 650px
    }

    .u-section-2 .u-layout-wrap-1 {
        width: 768px
    }

    .u-section-2 .u-image-1 {
        width: 387px;
        height: 292px;
        margin-top: -78px;
        margin-left: -56px
    }

    .u-section-2 .u-text-4 {
        margin-top: 68px
    }

    .u-section-2 .u-image-2 {
        width: 346px;
        height: 439px;
        margin-right: 0
    }
    #circle {
        display:none;
    }
    #divBuffer {
        height: 600px!important;
    }
}

@media (max-width: 991px) {
    .u-section-2 .u-sheet-1 {
        min-height: auto;
    }

    .u-section-2 .u-shape-1 {
        margin-top: 70px;
        margin-left: -43px
    }

    .u-section-2 .u-shape-2 {
        width: 572px;
        margin-top: 76px
    }

    .u-section-2 .u-layout-wrap-1 {
        width: 660px;
        margin-left: 30px
    }

    .u-section-2 .u-layout-cell-1 {
        min-height: 683px
    }

    .u-section-2 .u-group-1 {
        min-height: 517px
    }

    .u-section-2 .u-layout-cell-2 {
        min-height: 599px
    }

    .u-section-2 .u-image-1 {
        width: 320px;
        height: 241px;
        margin-left: 0
    }

    .u-section-2 .u-layout-cell-3 {
        min-height: 599px
    }

    .u-section-2 .u-container-layout-4 {
        padding-left: 30px
    }

    .u-section-2 .u-image-2 {
        width: 310px;
        height: 393px;
        margin-top: -130px;
        margin-right: -20px
    }

    .u-section-2 .u-text-6 {
        margin-top: 28px
    }

    .u-section-2 .u-shape-3 {
        margin-bottom: 100px
    }
}

@media (max-width: 767px) {
    .u-section-2 .u-sheet-1 {
        min-height: 2257px
    }

    .u-section-2 .u-shape-1 {
        margin-left: -42px
    }

    .u-section-2 .u-shape-2 {
        width: 440px
    }

    .u-section-2 .u-layout-wrap-1 {
        width: 454px;
        margin-left: 0
    }

    .u-section-2 .u-layout-cell-1 {
        min-height: 630px
    }

    .u-section-2 .u-container-layout-1 {
        padding-left: 10px;
        padding-right: 10px
    }

    .u-section-2 .u-group-1 {
        min-height: 489px;
        margin-right: initial;
        margin-left: initial;
        width: auto
    }

    .u-section-2 .u-container-layout-2 {
        padding-left: 20px;
        padding-right: 20px
    }

    .u-section-2 .u-text-2 {
        font-size: 3rem
    }

    .u-section-2 .u-layout-cell-2 {
        min-height: 665px
    }

    .u-section-2 .u-container-layout-3 {
        padding-left: 10px;
        padding-right: 10px
    }

    .u-section-2 .u-image-1 {
        width: 376px;
        height: 281px;
        margin-left: -10px
    }

    .u-section-2 .u-text-4 {
        margin-top: 28px
    }

    .u-section-2 .u-layout-cell-3 {
        min-height: 654px
    }

    .u-section-2 .u-container-layout-4 {
        padding-left: 10px;
        padding-right: 10px
    }

    .u-section-2 .u-image-2 {
        width: 388px;
        height: 535px;
        margin-right: auto;
        margin-left: 66px
    }

    .u-section-2 .u-text-6 {
        margin-top: 25px
    }

    .u-section-2 .u-shape-3 {
        margin-bottom: 54px
    }
}

@media (max-width: 575px) {
    .image {
        width: 100%!important;
        height: auto!important;
        object-position: 100% 50%;
        margin: 60px auto 0 0;
    }

    .list {
        min-height: auto!important;
        grid-template-columns: repeat(1, calc(100% - 12.5px))!important;
        height: auto!important;
        width:90%!important;
        justify-content:center;
        grid-gap: 25px;
        margin-block: 20px!important;
    }
    .u-sheet {
        width: 100%;
    }
    .u-section-2 {
        margin-top: 0!important;
    }
    .u-section-2 .u-sheet-1 {
        min-height: auto
    }

    .u-section-2 .u-shape-1 {
        margin-left: -50px
    }

    .u-section-2 .u-shape-2 {
        width: 100%;
        height: auto;
        margin-top: 154px;
        margin-right: auto;
        margin-left: 80px
    }

    .u-section-2 .u-layout-wrap-1 {
        width: 100%;
        margin-top: -500px
    }

    .u-section-2 .u-layout-cell-1 {
        min-height: 706px
    }

    .u-section-2 .u-group-1 {
        min-height: 550px;
        width: auto;
        margin-right: initial;
        margin-left: initial
    }

    .u-section-2 .u-text-2 {
        font-size: 2rem
    }

    .u-section-2 .u-layout-cell-2 {
        min-height: 651px
    }

    .u-section-2 .u-image-1 {
        width: 100%;
        height: 239px;
        margin-left: 0
    }

    .u-section-2 .u-layout-cell-3 {
        min-height: 542px
    }

    .u-section-2 .u-image-2 {
        width: 320px;
        height: 441px;
        margin-left: 0
    }

    .u-section-2 .u-text-6 {
        font-size: 1.5rem
    }

    .u-section-2 .u-shape-3 {
        margin-bottom: 43px
    }
}
.u-section-2 .u-text-3 {
    line-height: 1.8 !important;
    letter-spacing: 1px;
    font-weight:700;
    font-size:1rem;
}

@media (max-width: 767px) {
    .mediaImage {
        width: 100%;
    }
}
@media (max-width: 1199px) {
    .u-section-2 {
        margin-top: -150px;
    }
}
.image{
    width: 605px;
    height: 624px;
    object-position: 100% 50%;
    margin: 60px auto 0 0;
}

.list {
    min-height: 506px;
    grid-template-columns: repeat(2, calc(50% - 12.5px));
    height: auto;
    width: 581px;
    grid-gap: 25px;
    margin: -565px 0 119px auto;
}