.section1 {
    margin-bottom: 200px;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.section1 h2 {
    font-size: 42px;
    color: var(--color-main);
    margin: 65px 0;
}

.section1 > div {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.section1 > div > div {
    width: 250px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

.section1 > div > div > div {
    width: 100%;
    height: 250px;
    background-color: var(--color-main);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-shadow:
    0 2px 6px rgba(0, 9, 33, 0.04),
    0 10px 28px rgba(0, 9, 33, 0.06),
    0 -1px 0 rgba(255, 255, 255, 0.6);
}

.section1 > div > div > div > h2 {
    color: white;
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}

.section1 > div > span {
    display: block;
    width: 80%;
    height: 1px;
    border: 2px dashed var(--color-gray);
    position: absolute;
    left: 10%;
    top: 124px;
}

.section1 > div > div > span > h3 {
    padding: 0;
    font-size: 16px;
    color: var(--color-gray);
    margin: 15px 0;
}

.section1 > div > div > span > p {
    margin: 0;
    padding: 0;
    color: var(--color-gray);
    font-size: 14px;
}

.section2 {
    margin: 0;
    padding: 0 0 0 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 100px;
}

.section2 > div {
    width: 50%;
}

.section2 > div > video {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.section2 > div > h2 {
    font-size: 42px;
    margin: 0;
    padding: 0;
    color: var(--color-main);
    margin-bottom: 30px;
}

.section2 > div li {
    line-height: 32px;
}

.section2 > div > h3 {
    margin: 30px 0;
    padding: 0;
}

.section2 > div > a {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background-color: white;
    padding: 16px 20px;
    border-radius: 50px;
    border: 2px dotted black;
    margin-top: 30px;
}

.section2 > div > a * {
    color: black;
    font-weight: 600;
}

.section2 > div > a > p {
    margin: 0;
    padding: 0;
}

.section2 > div > a > i {
    margin-left: 20px;
}

.section3 {
    width: 100%;
    margin: 0;
    padding: 50px 100px;
    background-color: var(--color-main);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 100px;
}

.section3 * {
    color: white;
}

.section3 ul > li {
    line-height: 28px;
    font-size: 14px;
}

.section3 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.section3 > div.right {
    margin-left: auto;
    text-align: right;
}

.section3 > div.right > h3 {
    font-size: 16px;
}

.section3 > div > h2 {
    font-size: 20px;
}

.section3 > h3 {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    font-style: italic;
    font-size: 26px;
    top: 50%;
    height: 40px;
    margin-top: -20px;
}


.section3 > div.right > h3 {
    margin-bottom: 60px;
}

.section3 > div.left li {
    line-height: 48px;
}

.section3 > div.left ol {
    margin: 50px 0 50px 20px;
    padding: 0;
}

.section4 {
    width: 100%;
    padding: 0 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: white;
    margin-bottom: 100px;
    margin-top: 30px;
}

.section4 > div {
    width: 50%;
}

.section4 > div li {
    line-height: 32px;
}

.section3 .special {
    position: absolute;
    width: 3px;
    background-color: var(--color-main);
    height: 200px;
    display: block;
    bottom: 0;
    right: 0;
    margin-right: 100px;
    margin-bottom: -200px;
    z-index: 1;
}

.section3 .special::before {
    content: " ";
    position: absolute;
    bottom: -5px;
    left: -6px;
    width: 16px;
    height: 16px;
    background-color: var(--color-main);
    border-radius: 16px;
}

@media screen and (max-width: 1500px) {
    .section1 > div > div > div { width: 180px; height: 180px; }
    .section1 > div > div > div > h2 { font-size: 20px; }
    .section1 > div > span { top: 90px; }
    .section2 > div > video { width: auto; height: 100%; }
}

@media screen and (max-width: 1300px) {
    .section1 { padding: 0; }
    .section1 > h2 { width: 100%; text-align: center; }
    .section1 > div { justify-content: center; gap: 20px; width: 600px; flex-wrap: wrap; margin-left: auto; margin-right: auto; }
    .section1 > div > div { width: 180px; }
    .section1 > div > span { display: none; }
    .section2 > div { padding: 0 20px 0 0; }
    .section3 > h3 { font-size: 16px; }
}

@media screen and (max-width: 900px) {
    .section1 { margin-bottom: 0; }
    .section1 > h2 { font-size: 32px; margin: 50px 0; }
    .section1 > div { width: 100%; gap: 0; }
    .section1 > div > div { margin-bottom: 50px; width: 45%; }
    .section1 > div > div > div { width: 100%; }
    .section1 > div > div:nth-child(even) { margin-left: auto; }
    .section2 { padding: 0; margin-bottom: 50px; display: grid; grid-template-areas:
        "video"
        "text"; }
    .section2 > div > h2 { font-size: 32px; margin-top: 20px; }
    .section2 > div { width: 100%; padding: 0; }
    .section2 > div.text { padding: 0 20px; grid-area: text; }
    .section2 > div.video { grid-area: video; }
    .section2 > div > a { width: 100%; align-items: center; justify-content: center; }
    .section2 > div > video { border-top-left-radius: 0px; border-bottom-left-radius: 0px; width: 100%; height: auto; }
    .section3 { margin-bottom: 0px; padding: 50px 20px; flex-direction: column; }
    .section3 > div.right { margin-left: 0; text-align: left; }
    .section3 .special { display: none; }
    .section3 > h3 { position: relative; left: initial; top: initial; height: auto; margin-top: 0; font-size: 16px; width: 100%; text-align: center; margin-bottom: 50px; }
    .section3 > div.right > h3 { margin-bottom: 20px; }
    .section4 { flex-direction: column; padding: 0 20px; margin-top: 0; }
    .section4 h3 { font-size: 24px; }
    .section4 > div { width: 100%; }
}