.visual {
    background:url('../img/visual4.jpg') 50% 50% no-repeat;
    background-size:cover;
    height:430px;
}

main {
    background:#fff;
    display:flex;
    gap:60px;
    position:relative;
    top:-30px;
    z-index:6000;
}

article {
    width:210px;
    height:auto;
    margin-top:70px;
    margin-left:34px;
}

article li {
    margin-bottom:26px;
    position:relative;
}

article li a {
    color:#686868;
    display:block;
}

article li.now a {
    color:#fff;
    font-weight:700;
    z-index:7000;
}

article li.now:after {
    content:'';
    display:block;
    position:absolute;
    z-index:-1;
    background:#00a19a;
    width:210px;
    height:26px;
    top:-1px;
    left:-12px;
}

section {
    margin-top:70px;
    width:calc(100% - 270px);
}

.title h2 {
    width:100%;
    font-size:24px;
    font-weight:500;
    padding-bottom: 12px;
    border-bottom:2px dashed #dbdbdb;
}

.title {
    position:relative;
    padding-right:34px;
    margin-bottom:70px;
}

.title span {
    position:absolute;
    top:12px;
    right:34px;
    font-size:14px;
    color:#686868;
}

.content {
    padding-right:34px;
    display:flex;
}

.content a {
    display:block;
    width:50%;
    height:82px;
    border:1px solid #333;
    font-size:24px;
    color:#2c2e83;
    font-weight:500;
    line-height:82px;
    text-align:center;
}

.content a:first-child {
    border-right:0;
}

input[id*="faq"] {
    display:none;
}

input[id*="faq"] + label {
    display:flex;
    width:100%;
    padding:13px 0 13px 60px;
    border-bottom:1px solid #767676;
    cursor:pointer;
    position:relative;
    align-items:center;
}

input[id*="faq"] + label em {
    display:block;
    background: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.01517 0.859834C9.16161 1.00628 9.16161 1.24372 9.01517 1.39016L5.26515 5.14015C5.1187 5.2866 4.8813 5.2866 4.73485 5.14015L0.984851 1.39016C0.838401 1.24372 0.838401 1.00628 0.984851 0.859833C1.1313 0.713388 1.3687 0.713388 1.51515 0.859833L5 4.34465L8.48484 0.859834C8.63128 0.713389 8.86872 0.713389 9.01517 0.859834Z' fill='black'/%3E%3C/svg%3E%0A") 50% 50% no-repeat;
    background-size:10px;
    width:10px;
    height:6px;
    margin-left:14px;
}

input[id*="faq"] + label:before {
    content:'';
    display:block;
    position:absolute;
    left:30px;
    top:24px;
    background:#333;
    width:5px;
    height:5px;
    border-radius:50%;
}

input[id*="faq"] + label + div {
    height:0;
    max-height:0;
    padding:0 70px;
    transition:all 0.3s ease;
    overflow:hidden;
    background:#FBFBFB;
}

input[id="faq0"] + label {
    border-top:1px solid #767676;
}

input[id*="faq"]:checked + label + div {
    height:auto;
    max-height:300px;
    padding:40px 70px;
    border-bottom:1px solid #767676;
}

input[id*="faq"]:checked + label em {
    transform:rotate(180deg);
}

.marginB {
    margin-bottom:18px;
}


@media all and (max-width:1024px) {
    article {
        display:none;
    }

    main {
        background:#fff;
        gap:0;
        position:static;
        justify-content:center;
    }

    .title span {
        left:0;
        top:-24px;
    }

    .title, .content {
        padding-right:0;
    }

    section {
        width:100%;
    }

}

@media all and (max-width:720px) {
    .title {
        margin-bottom:34px;
    }

    input[id*="faq"]:checked + label + div {
        max-height:400px;
    }

}

@media all and (max-width:560px) {
    .title h2 {
        font-size:20px;
    }

    .title span {
        font-size:12px;
    }

    .content {
        flex-direction:column;
    }

    .content a {
        width:100%;
        height:50px;
        font-size:14px;
        line-height:50px;
    }
    
    .content a:first-child {
        border-right:1px solid #333;
        border-bottom:0;
    }

    input[id*="faq"] + label {
        font-size:14px;
        padding:14px 0 14px 40px;
    }
    
    input[id*="faq"] + label em {
        background-size:8px;
        width:8px;
        height:4px;
        margin-left:10px;
    }
    
    input[id*="faq"] + label:before {
        left:21px;
        top:23px;
        width:4px;
        height:4px;
    }

    input[id*="faq"] + label + div p {
        font-size:14px;
    }
    
    input[id*="faq"] + label + div {
        padding:0 10px;
    }
    
    input[id*="faq"]:checked + label + div {
        padding:24px 10px;
    }

    .marginB {
        margin-bottom:16px;
    }

}