@charset "UTF-8";

.mediation-accordion-box .accordion-box + .accordion-box {margin-top: 24px;}
.mediation-accordion-box .accordion-box .tit-box {position: relative; display: flex; align-items: center; height:62px; padding-left:24px; padding-right: 78px; border-radius: 8px; background: #F3F8FF; border:1px solid #C6C6C6; cursor: pointer;}
.mediation-accordion-box .accordion-box .tit-box::after {content:''; position: absolute; top:16px; right:24px; width: 30px; height: 30px; background: url(/static/imgs/common/ico_accordion_arrow_2.svg) no-repeat 0 0 /100%; transform: rotate(180deg); transition: all .3s ease;}
.mediation-accordion-box .accordion-box .tit-box .tit {color:#0065E8; font-size: 18px; line-height: 27px; font-weight: 700;}
.mediation-accordion-box .accordion-box .toggle-box {border: 1px solid #C6C6C6; border-radius: 0 0 8px 8px; padding:32px;}
.mediation-accordion-box .accordion-box .toggle-box .item-box > * {margin-bottom:0;}
.mediation-accordion-box .accordion-box .toggle-box .item-box {display: flex; flex-direction: column; gap:16px;}
.mediation-accordion-box .accordion-box .toggle-box .item-box .img-box .arrow {flex:none; display: block; width:40px; height:20px; background: url(/static/imgs/common/ico_arrow_blue.svg) no-repeat 0 0 /100%;}
.mediation-accordion-box .accordion-box .toggle-box .item-box .img-box {display: flex; justify-content: center; align-items: center; padding:32px 40px; border-radius: 16px; background: #F8F8F8; border:1px solid #E8E8E8; gap:30px;}
.mediation-accordion-box .accordion-box .toggle-box .item-box .img-box img {flex:1;}
.mediation-accordion-box .accordion-box .toggle-box .item-box .img-box .img-txt {display: flex; align-self: flex-end; align-items: center; flex-direction: column; flex:210px 0 0; height:100%;}
.mediation-accordion-box .accordion-box .toggle-box .item-box .img-box .img-txt .txt {width:100%; margin-top: 16px; display: flex; justify-content: center; align-items: center; height:32px; gap:8px; border: 1px solid #CFD8DC; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.08); border-radius: 20px; font-size: 16px; line-height: 24px; font-weight: 700; color:#002352;}
.mediation-accordion-box .accordion-box .toggle-box .item-box .img-box .img-txt .txt::before {content:''; display: block; width: 6px; height: 6px; border-radius: 6px; background: #CFD8DC;}
.mediation-accordion-box .accordion-box .toggle-box .item-box .img-box .img-txt .txt::after {content:''; display: block; width: 6px; height: 6px; border-radius: 6px; background: #CFD8DC;}

.mediation-accordion-box .accordion-box .toggle-box .item-box span.replace-txt {font-size: 18px; letter-spacing: -0.9px; font-weight: 700;}

.mediation-accordion-box .accordion-box .toggle-box .item-box + .item-box {margin-top: 24px; padding-top: 24px; border-top: 1px dashed #C6C6C6;}
.mediation-accordion-box .accordion-box .toggle-box .pc {display: block;}
.mediation-accordion-box .accordion-box .toggle-box .m {display: none;}
.mediation-accordion-box .accordion-box .toggle-box {display: none;}

.mediation-accordion-box .accordion-box.active .toggle-box {display: block;}
.mediation-accordion-box .accordion-box.active .tit-box {background: linear-gradient(0deg, #00B9FF, #00B9FF), linear-gradient(92.06deg, #0065E8 -13.39%, #0099DB 92.18%); border:none; border-radius: 8px 8px 0 0;}
.mediation-accordion-box .accordion-box.active .tit-box::after {transform: rotate(0);}
.mediation-accordion-box .accordion-box.active .tit-box .tit {color:#FFF;}

.list-txt li + li {margin-top: 16px;}
.list-txt li {display: flex; gap:8px; flex-wrap:wrap;}
.list-txt li .num {margin-top: 2px; flex:none; display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: #FCD7E2; border-radius: 10px; font-size: 13px; line-height: 20px; font-weight: 400;}
.list-txt li .txt-list {flex:calc(100% - 30px); font-size: 18px; line-height: 26px; font-weight: 400;}
.list-txt li .txt-secondary4 {font-size: 16px; line-height: 24px;}

@media (max-width: 1024px) {
    .mediation-accordion-box .accordion-box .toggle-box .item-box {align-items: center;}
    .mediation-accordion-box .accordion-box .toggle-box .item-box .img-box {flex-direction: column; gap:24px;}
    .mediation-accordion-box .accordion-box .toggle-box .item-box .img-box .arrow {transform: rotate(90deg);}

    .mediation-accordion-box .accordion-box .toggle-box .item-box .dh02 {width: 100%;}
}

@media (max-width: 765px) {

    .mediation-accordion-box .accordion-box .tit-box {height:56px; padding:0 56px 0 16px;}
    .mediation-accordion-box .accordion-box .tit-box::after {right:16px; width: 24px; height: 24px;}
    .mediation-accordion-box .accordion-box .toggle-box .pc {display: none;}
    .mediation-accordion-box .accordion-box .toggle-box .m {display: block;}
    .mediation-accordion-box .accordion-box.active .toggle-box {padding:16px;}
    .mediation-accordion-box .accordion-box .tit-box .tit {font-size: 16px; line-height: 24px;}
    .mediation-accordion-box .accordion-box + .accordion-box {margin-top: 16px;}
    .mediation-accordion-box .accordion-box .toggle-box .item-box .img-box .img-txt {width:100%;}

    .list-txt li .num {margin-top: 0;}
    .list-txt li .txt-list {font-size: 14px; line-height: 20px; font-weight: 400;}
    .list-txt li .txt-secondary4 {font-size: 14px; line-height: 20px;}

    .mediation-accordion-box .accordion-box .toggle-box .item-box span.replace-txt {font-size: 14px;}
}