*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f7f8fc;
    font-family:Arial,"Microsoft YaHei",sans-serif;
    padding:40px;
}

.section{
    max-width:1200px;
    margin:0 auto 80px;
}

.section h2{
    text-align:center;
    font-size:32px;
    color:#1d3557;
    margin-bottom:12px;
}

.section .desc{
    text-align:center;
    color:#7a8699;
    margin-bottom:35px;
}


/* switch component */

.switch{
    display:flex;
    gap:40px;
    align-items:center;
    width:100%;
}

.switch.reverse{
    flex-direction:row-reverse;
}

.switch-info{
    flex:1;
    height:460px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.item{
    flex:1;
    padding:18px 24px;
    background:#fff;
    border:1px solid #e3e8f0;
    border-radius:16px;
    cursor:pointer;
    transition:.3s;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.item:hover,
.item.active{
    border-color:#667eea;
    background:#f5f7ff;
    transform:translateX(4px);
}

.item h3{
    font-size:20px;
    color:#1d3557;
    margin-bottom:8px;
}

.item p{
    color:#667085;
    font-size:14px;
    line-height:1.6;
}


.switch-img{
    width:780px;
    height:460px;
    overflow:hidden;
    border-radius:18px;
}

.switch-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.35s;
}

.switch-img img.change{
    opacity:.2;
    transform:scale(1.03);
}


@media(max-width:1200px){

.switch-img{
    width:60%;
}

}

@media(max-width:768px){

body{
    padding:20px;
}

.switch,
.switch.reverse{
    flex-direction:column;
}

.switch-img{
    width:100%;
    height:auto;
    aspect-ratio:780 / 460;
    order:-1;
}

.switch-info{
    width:100%;
    height:auto;
    gap:12px;
}

.item{
    min-height:110px;
}

}