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

.section1 {
    margin-bottom: 150px;
}

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

.section1 li {
   line-height: 32px;
}

.section1 > div.left {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.section1 > div.right {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 800px;
}

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

.section1 > div.right > div > div {
    width: 250px;
    height: 250px;
    border-radius: 10px;
    background-color: var(--color-main);
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    z-index: 1;
    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.right > div > div:nth-child(1), .section1 > div.right > div > div:nth-child(2), .section1 > div.right > div > div:nth-child(3) {
    margin-bottom: 55px;
}

.section1 > div.right > div > div:nth-child(2), .section1 > div.right > div > div:nth-child(5) {
    margin-left: auto;
    margin-right: auto;
}

.section1 > div.right > div > div * {
    color: white;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.section1 > div.right > div > div > p {
    font-weight: 600;
}

.section1 > div.right > div > div > img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -24px;
    margin-top: -24px;
}

.section1 > div.right > div > div > p:last-of-type {
    margin-left: auto;
    margin-top: auto;
}

.section1 > div.right > div > div.info * {
    font-size: 16px; 
}

.section1 > div.right > div > div.info > p {
    margin-left: 0;
    margin-top: 0;
}

.section1 > div.right > div > div.info > ul {
    list-style-type: none;
    margin-top: auto;
}

.section1 > div.right > div > span {
    display: block;
    position: absolute;
    width: calc(100% - 250px);
    height: calc(100% - 250px);
    border: 2px dashed var(--color-gray);
    left: 0;
    top: 0;
    margin-left: 125px;
    margin-top: 125px;
    z-index: 0;
}

.section1 > div.right > div > span::before {
    content: " ";
    position: absolute;
    width: 50%;
    height: 100%;
    border: 2px dashed var(--color-gray);
    left: 0;
    top: 0;
    margin-left: -2px;
    margin-top: -2px;
    z-index: 0;
}

.section2 {
    background-color: var(--color-main);
    padding: 50px 100px;
}

.section2 > div.video {
    width: 70%;
}

.section2 > div.text {
    width: 30%;
}

.section2 > div * {
    color: white;
}

.section2 > div li {
    line-height: 48px;
    padding-left: 10px;
}

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

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

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

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

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

.section2 > div.video > div {
    position: absolute;
    width: 80%;
    height: 150%;
    left: 0;
    top: -25%;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section3 > div {
    width: 50%;
}

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

.section2 .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;
}

.section2 .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.right > div > div, .section1 > div.right > div > div:nth-child(1), .section1 > div.right > div > div:nth-child(2), .section1 > div.right > div > div:nth-child(3) { margin-bottom: 0; }
    .section1 > div.right > div > div:nth-child(2), .section1 > div.right > div > div:nth-child(5) { margin-left: 0; margin-right: 0; }
    .section1 > div.right > div { gap: 20px; }
    .section1 > div.right > div > div { width: 180px; height: 180px; }
    .section1 > div.right > div > div.info * { line-height: 20px; font-size: 14px; }
    .section2 > div.video { width: 60%; }
    .section2 > div.text { width: 40%; }
}

@media screen and (max-width: 1300px) {
    .section1 { flex-wrap: wrap; }
    .section1 > div.left, .section1 > div.right { width: 100%; }
    .section1 > div.left { flex-direction: row; }
    .section1 > div.left h3 { display: none; }
    .section1 > div.left h2 { width: 350px; }
    .section1 > div.right { max-width: 100%; margin-top: 50px; }
    .section1 > div.right > div > span, .section1 > div.right > div > span::before { display: none; }
    .section1 > div.right > div > div.info { background-color: transparent; width: 50%; box-shadow: none;  }
    .section1 > div.right > div > div.info * { font-size: 16px; line-height: 32px; color: black; }
    .section1 > div.right > div > div.info > ul { columns: 2; list-style-type: disc; margin-left: 20px; }
}

@media screen and (max-width: 900px) {
    .section1 { flex-direction: column; margin-bottom: 50px; margin-top: 0; padding: 0 20px; }
    .section1 > div.left h2, .section1 h2 { width: 100%; font-size: 32px; }
    .section1 > div.left { flex-direction: column; }
    .section1 > div.right > div { gap: 0; flex-direction: row; }
    .section1 > div.right > div > div { width: 48%; margin-bottom: 20px; }
    .section1 > div.right > div > div, .section1 > div.right > div > div:nth-child(1), .section1 > div.right > div > div:nth-child(2), .section1 > div.right > div > div:nth-child(3) { margin-bottom: 20px; }
    .section1 > div.right > div > div:nth-child(even) { margin-left: auto; }
    .section1 > div.right { margin-top: 0; }
    .section1 > div.right > div > div.info { width: 100%; padding: 0; margin-top: 30px; }
    .section1 > div.right > div > div.info > ul { columns: 1; }
    .section2 { padding: 0; flex-direction: column; margin-bottom: 0; }
    .section2 > div.video { width: 100%; }
    .section2 > div.video > div { position: relative; width: 100%; height: auto; left: initial; top: initial; border-radius: 0; }
    .section2 > div.video > div > video { width: 100%; height: auto; }
    .section2 > div.text { width: 100%; padding: 0 20px 50px 20px; }
    .section2 > .text > h3 { font-size: 32px; }
    .section2 > div > a {  width: 100%; align-items: center; justify-content: center; }
    .section2 .special { display: none; }
    .section3 { flex-direction: column; padding: 0 20px; margin-top: 0; }
    .section3 h3 { font-size: 24px; }
    .section3 > div { width: 100%; }
}