.intro .right{
    text-align: center;
}

.intro .right .plx-ctn{
    width: clamp(450px, calc(19.7917vw + 260px), 640px);
    margin: 0 auto;
}

.accordion{
    --item-count: 4;
    --item-active-expand: 2;
    background-color: #edf0f7;
}

.acc-item .title{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;

    font-size: calc(24 * var(--rpx));
}

.acc-item:hover:not(.active){
    filter: brightness(1.05);
}

.acc-item.active .title{
    font-size: calc(30 * var(--rpx));
    transition: .3s font-size;
}

.accordion .icon{
    width: calc(130 * var(--rpx));
    height: calc(130 * var(--rpx));
    margin-bottom: calc(24 * var(--rpx));
}

.accordion .desc{
    font-size: 1rem;
}

.accordion .acc-item{
    background-color: #edf0f7;
    color: var(--theme-navy);
}


.accordion .acc-item:nth-of-type(2n){
    background-color: #e6e9f3;
}

.accordion .acc-item.active{
    color: #fff;
}

.accordion .acc-info{
    justify-content: center;
    padding-left: calc(16 * var(--rpx));
    padding-right: calc(16 * var(--rpx));
}

.accordion .acc-item .btn-expand{
    filter: url(#navy-overlay);
}

.acc-item.active .acc-info::after{
    opacity: 1;
}

.acc-item.active .icon{
    filter: url(#white-overlay);
}

.acc-item.active .desc{
    width: clamp(400px, calc(35.4167vw + 60px), 740px);
}

section.qna{
    padding-top: calc(200 * var(--rpx-50));
    padding-bottom: calc(150 * var(--rpx-50));
}

.qna .part1{
    position: relative;
    display: flex;
    justify-content: space-between;
    color: #fff;
    padding: calc(72 * var(--rpx-50)) calc(80 * var(--rpx-50));
    overflow: hidden;
    min-height: calc(640 * var(--rpx));
}

.qna .part1 .left{
    width: clamp(300px, calc(6.25vw + 240px), 360px);
    position: relative;
    z-index: 210;
}

.qna .part1 .right{
    width: clamp(540px, calc(18.75vw + 360px), 720px);
    position: relative;
    z-index: 210;
}

.qna .part1::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 50%) rgba(0, 0, 0, .2);
    z-index: 205;
}

.desc-ctn{
    padding-top: calc(70 * var(--rpx-50));
    padding-bottom: calc(70 * var(--rpx-50));

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    border-bottom: 1px solid #e5e5e5;
}

.desc-ctn .desc{
    font-size: calc(24 * var(--rpx));
    line-height: calc(30em / 24);
    width: clamp(720px, calc(25vw + 480px), 960px);
}

.qna-list{
    margin-top: calc(40 * var(--rpx-50));
}

.qna-list .qna{
    margin-bottom: calc(20 * var(--rpx));
}

.qna-title{
    font-size: calc(28 * var(--rpx));
    line-height: calc(40em / 28);
    padding: calc(40em / 28) calc(60 * var(--rpx-50));
    cursor: pointer;
    background-color: #fafbfd;
    font-weight: bold;
    position: relative;
}

.qna-title::after{
    content: "";
    width: calc(22em / 28);
    height: calc(22em / 28);
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    right: calc(60 * var(--rpx-50));

    background: url("../images/global/icon_plus.svg") center/cover no-repeat;
}

.qna-title:hover, .qna.active .qna-title{
    background-color: #e6e9f3;
}

.qna.active .qna-title::after{
    background-image: url("../images/global/icon_minus.svg");
}

.qna-content{
    overflow: hidden;
    height: 0;
}

.qna-content-inner{
    padding: calc(48 * var(--rpx-50)) calc(60 * var(--rpx-50));

    border-bottom: 1px solid #e5e5e5;
    font-weight: lighter;
    font-size: calc(18em / 16);
}

.qna-content-inner p+p{
    margin-top: 0;
}

.qna-content-inner p{
    width: 100%;
    min-height: calc(30em / 18);
}


.qna-content-inner ul{
    margin-top: .5em;
    margin-bottom: .5em;
}

.content li{
    padding-left: calc(12em / 16);
    line-height: calc(30em / 18);
}

.content strong{
    font-weight: bold;
}

@media (max-width: 750px) {
    .qna .part1{
        padding: calc(20 * var(--rpx));
        flex-direction: column;
        gap: calc(30 * var(--rpx));
    }
    .qna .part1 .left,
    .qna .part1 .right{
        width: 100%;
    }

    .qna-title{
        padding: calc(20 * var(--rpx)) calc(80 * var(--rpx)) calc(20 * var(--rpx)) calc(20 * var(--rpx));
    }

    .intro .right .plx-ctn{
        width: 100%;
    }

}



