/* #content  이거 쓰면 됨*/
section .main_title {letter-spacing: -0.02em; line-height: 56px; margin-bottom: 20px;}
section .main_title.on {display: none;}
section .sub_text {letter-spacing: -0.02em;}

/*.popup_bg {background: rgba(0, 0, 0, 0.8); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 100; display: none;}*/
/*.popup_area {background: #fff; width: 80%; height: calc(var(--vh, 1vh) * 100 - 72px); border-radius: 16px 16px 0 0; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 101; display: none;}*/
/*.popup_area .btn_close {display: inline-block; width: 28px; height: 28px; position: absolute; top: -40px; right: 0; z-index: 101;}*/
/*.popup_area .btn_close span {display: inline-block; width: 28px; height: 4px; background: #fff; border-radius: 5px; position: absolute; top: 50%; transform: translateY(-50%); left: 0;}*/
/*.popup_area .btn_close span:nth-of-type(1) {transform: rotate(45deg);}*/
/*.popup_area .btn_close span:nth-of-type(2) {transform: rotate(-45deg);}*/
/*.popup_area .popup_con {width: 90%; height: calc(100% - 72px); margin: 0 auto; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 102; overflow-y: scroll;}*/

#content > h3 {font-size: 46px; line-height: 56px; letter-spacing: -0.02em; padding: 0 16.66%; color: #29203B;}
#content > h2 {font-size: 20px; line-height: 58px; letter-spacing: -0.02em; padding: 2% 16.66% 0; color: #979393;}

.list_box {padding: 122px 16.66% 100px;}

.list_box ul {display: flex; flex-direction: column; gap: 90px;}
.list_box ul li {align-items: center; display: flex; flex-direction: row; gap: 70px;}

.list_box ul li .img_box {padding-bottom: 0; position: relative; flex-shrink: 0; width: 160px;}

.list_box ul li .img_box::after {content: ''; display: none; width: 1px; height: 40px; background: rgba(46, 21, 102, 0.48); opacity: .5;
    position: relative; bottom: -32px; left: 50%;}

.list_box ul li .img_box img {width: 100%; filter: drop-shadow(-2px 6px 14px rgba(135, 135, 135, 0.18));}

.list_box ul li p {font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -0.02em; color: #2E1566; word-break: keep-all; }
.list_box ul li p .sm_txt{font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: #2E1566; word-break: keep-all; }
.list_box ul li p span {display: block;}


.list_box ul li b {display: block; font-weight: 500; font-size: 15px; line-height: 25px; letter-spacing: -0.02em; color: #9269EE; margin-top: 10px;}
.list_box ul li .sm_txt {
    display: block;
    font-weight: 500;
    font-size: 17px;
    line-height: 25px;
    letter-spacing: -0.02em;
    color: #2E1566;
    margin-top: 6px;
}
.list_box ul li a {display: inline-block; font-weight: 500; font-size: 20px; line-height: 25px; color: #7435FF;
    background: rgba(116, 53, 255, 0.05); border: 1px solid rgba(116, 53, 255, 0.15); border-radius: 100px; padding: 10px 40px; white-space: nowrap; margin-top: 8px;}

.list_box ul li a.black {pointer-events: none; cursor: default; color: #777777; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(71, 71, 71, 0.15);}

.list_box .pagination_box {text-align: center; margin-top: 100px; position: relative;}
.list_box .pagination_box span {display: inline-block; width: 44px; height: 44px; line-height: 44px;
    font-family: 'Inter'; font-weight: 300; font-size: 28px; vertical-align: middle;}
.list_box .pagination_box span a {display: block;}
.list_box .pagination_box .pagination a {display: block; width: 100%; height: 100%;}
.list_box .pagination_box .pagination.on a {color: #8556E3; font-weight: 400; font-size: 32px; background: rgba(220, 204, 255, 0.42); border-radius: 50%;}
.list_box .pagination_box .front, .list_box .pagination_box .prev, .list_box .pagination_box .next, .list_box .pagination_box .end {
    font-size: 0; color: #fff; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.list_box .pagination_box .front {background-image: url(../images/sub01_06_btn_double_arrow_left.png);}
.list_box .pagination_box .prev {background-image: url(../images/sub01_06_btn_arrow_left.png);}
.list_box .pagination_box .next {background-image: url(../images/sub01_06_btn_arrow_right.png);}
.list_box .pagination_box .end {background-image: url(../images/sub01_06_btn_double_arrow_right.png);}
.list_box .pagination_box button {background: #8556E3; color: #FFFFFF; border: none; border-radius: 8px; padding: 11px 32px; cursor: pointer; white-space: nowrap;
    font-family: 'Spoqa Han Sans Neo'; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; position: absolute; top: -80px; right: 0;}
/*    font-family: 'Spoqa Han Sans Neo'; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em; position: absolute; top: -80px; right: 0;}*/
/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    #content > h3 {padding: 0 12%;}
    #content > h2 {padding: 2% 12.66% ;}
    .list_box {padding: 32px 12% 100px;}
    .research_box {padding: 32px 12% 100px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    #content > h3 {padding: 0 8%;}
    #content > h2 {padding: 2% 8% ;}
    .list_box {padding: 32px 8% 100px;}
    .research_box {padding: 32px 8% 100px;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    #content > h3 {padding: 0 6%;}
    #content > h2 {padding: 0 6%;}
    .list_box {padding: 32px 6% 100px;}
    .research_box {padding: 32px 6% 100px;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .main_title {font-size: 28px; margin-bottom: 12px; line-height: 36px;}
    section .main_title i {display: block;}

    #content > h3 {font-size: 28px; line-height: 36px; padding: 0 5%;}
    #content > h2 {font-size: 14px; line-height: 36px; padding: 4% 5% 0; color:#979393;}

    .list_box {
        padding: 60px 7% 80px;
    }
    .list_box ul li {
        gap: 25px;
    }
    .list_box ul li .img_box {
        width: 120px;
    }
    .list_box ul li .img_box img {
        width: 100%;
        filter: drop-shadow(-2px 6px 14px rgba(135, 135, 135, 0.18));
    }
    .list_box ul li p {
        font-size: 16px;
    }
    .list_box ul li .sm_txt {
        display: block;
        font-weight: 500;
        font-size: 12px;
        line-height: 25px;
        letter-spacing: -0.02em;
        color: #2E1566;
        margin-top: 5px;
    }
    .list_box ul li b {
        display: block;
        font-weight: 500;
        font-size: 10px;
        line-height: 20px;
        letter-spacing: -0.02em;
        color: #9269EE;
        margin-top: 3px;
    }
    .list_box ul li a {
        display: inline-block;
        font-weight: 500;
        font-size: 12px;
        color: #7435FF;
        background: rgba(116, 53, 255, 0.05);
        border: 1px solid rgba(116, 53, 255, 0.15);
        border-radius: 100px;
        padding: 5px 30px;
        white-space: nowrap;
        margin-top: 5px;
    }


    .list_box .pagination_box {margin-top: 80px;}
    .list_box .pagination_box span {font-size: 20px; height: 37px;}
    .list_box .pagination_box .pagination {width: 37px;}
    .list_box .pagination_box .pagination a {display: block; width: 100%; height: 100%; line-height: 37px;}
    .list_box .pagination_box .pagination.on a {font-size: 18px;}
    .list_box .pagination_box button {display: none;}


}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    #content {position: relative;}
    /* content */
    #content > h3 {display: none;}
    #content > h2 {font-size: 18px; line-height: 36px; padding: 4% 13% 0; color:#979393;}

    .list_box {
        padding: 60px 12%;
    }
    .list_box ul {
        gap: 60px;
    }

    /* 각 항목을 이미지+텍스트의 세로 배치로 변경 */
    .list_box ul li {
        flex-direction: column; /* 세로 배치 */
        align-items: center; /* 중앙 정렬 */
        gap: 0; /* 내부 간격은 각 요소의 margin/padding으로 제어 */
        text-align: center; /* 텍스트 중앙 정렬 */
        background-color: transparent; /* 배경색 없음 */
        padding: 0;
        border-radius: 0;
    }

    .list_box ul li .img_box {
        width: auto; /* 너비 자동 */
        padding-bottom: 25px; /* 선과 이미지 사이 간격 */
        /*margin-bottom: 25px; !* 선과 텍스트 사이 간격 *!*/
    }

    /* 이미지 아래 선(::after)  */
  /*  .list_box ul li .img_box::after {
        display: block;
        width: 1px;
        height: 50px;
        background: rgba(46, 21, 102, 0.3);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }*/

    .list_box ul li .img_box img {
        width: auto;
        max-width: 165px; /* 이미지 최대 너비 */
        border: none;
        filter: drop-shadow(0px 6px 14px rgba(135, 135, 135, 0.25)); /* 그림자 효과 적용 */
    }


    .list_box ul li p {
        font-weight: 500;
        font-size: 16px;
        line-height: 25px;
        color: #2E1566;
        margin-bottom: 5px;
        /*padding: 0 24px;*/
    }

    .list_box ul li p span {
        display: block;
    }

    .list_box ul li b {
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        margin-top: 7px;
        color: #9269EE; /* 저자 색상 */
    }
    .list_box ul li p b.sm_txt {
        color: #2E1566; /* 부제목 색상 */
        font-size: 10px;
        line-height: 19px;
        margin-top: 7px;
        font-weight: 400;
        word-break: keep-all;
    }

    .list_box ul li .sm_txt {
        display: block;
        font-weight: 500;
        font-size: 10px;
        line-height: 25px;
        letter-spacing: -0.02em;
        color: #2E1566;
        margin-top: 5px;
    }

    .list_box ul li a {
        margin-top: 5px;
        padding: 5px 30px;
    }
}

/* list_box 끝 */



/* research_box 시작*/
/* ==========================================================
   PC & 태블릿 기본 스타일 (이미지 좌 + 텍스트 우 레이아웃)
   ========================================================== */
.research_box ul li p span {display: block;}

.research_box {
    padding: 80px 16% 100px; /* 전체적인 여백 조정 */
}

/* ul을 1열 수직 리스트로 만들기 위해 flex-direction: column 사용 */
.research_box ul {
    display: flex;
    flex-direction: column;
    gap: 90px;
}

/* ★ 핵심 변경: li를 이미지+텍스트의 가로 배치로 변경 */
.research_box ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 70px;
    /*text-align: left; !* 텍스트 왼쪽 정렬 *!*/

}


.research_box ul li .img_box {
    flex-shrink: 0; /* 창이 줄어들어도 이미지 너비 유지 */
    width: 160px;
    padding-bottom: 0; /* 세로 레이아웃용 여백 제거 */
    position: relative;
}


.research_box ul li .img_box::after {
    display: none;
}

/* 이미지 스타일 */
.research_box ul li .img_box img {
    width: 100%;
    filter: drop-shadow(-2px 6px 14px rgba(135, 135, 135, 0.18));
}


.research_box ul li p {
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    color: #2E1566;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    word-break: keep-all;
}

.research_box ul li p span {
    /*display: inline;*/
}

.research_box ul li p b {
    display: block;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: -0.02em;
    color: #9269EE;
    margin-top: 14px;
}

.research_box ul li p .sm_txt {
    display: block;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -0.02em;
    color: #2E1566;
    margin-top: 14px;
}

/* ★ 버튼 스타일은 요청대로 기존 스타일 유지 */
.research_box ul li a {
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    color: #7435FF;
    background: rgba(116, 53, 255, 0.05);
    border: 1px solid rgba(116, 53, 255, 0.15);
    border-radius: 100px;
    padding: 10px 40px;
    white-space: nowrap;
    margin-top: 15px;
}
.research_box ul li a.black {
    pointer-events: none;
    cursor: default;
    color: #777777;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(71, 71, 71, 0.15);
}


/* 페이지네이션 (기존 스타일과 거의 동일) */
.research_box .pagination_box {text-align: center; margin-top: 100px; position: relative;}
.research_box .pagination_box span {display: inline-block; width: 44px; height: 44px; line-height: 44px; font-family: 'Inter'; font-weight: 300; font-size: 28px; vertical-align: middle;}
.research_box .pagination_box span a {display: block;}
.research_box .pagination_box .pagination a {display: block; width: 100%; height: 100%;}
.research_box .pagination_box .pagination.on a {color: #8556E3; font-weight: 400; font-size: 32px; background: rgba(220, 204, 255, 0.42); border-radius: 50%;}
.research_box .pagination_box .front, .list_box .pagination_box .prev, .list_box .pagination_box .next, .list_box .pagination_box .end {font-size: 0; color: #fff; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.research_box .pagination_box .front {background-image: url(../images/sub01_06_btn_double_arrow_left.png);}
.research_box .pagination_box .prev {background-image: url(../images/sub01_06_btn_arrow_left.png);}
.research_box .pagination_box .next {background-image: url(../images/sub01_06_btn_arrow_right.png);}
.research_box .pagination_box .end {background-image: url(../images/sub01_06_btn_double_arrow_right.png);}
.research_box .pagination_box button {display:none;}


/* ==========================================================
   미디어 쿼리 구간 (디자인에 맞춰 속성값만 수정)
   ========================================================== */

/* PC (1024px ~ 1540px) - 큰 변화 없음 */
@media screen and (max-width:1540px) {}
@media screen and (max-width:1440px) {
    .research_box {
        padding: 80px 11% 100px;
    }
}
@media screen and (max-width:1058px) {}

/* 태블릿 (769px ~ 1024px) */
@media screen and (max-width:1024px) {
    .research_box {
        padding: 60px 7% 80px;
    }
    .research_box ul li {
        gap: 25px;
    }
    .research_box ul li .img_box {
        width: 120px;
    }
    .research_box ul li .img_box img {
        width: 100%;
        filter: drop-shadow(-2px 6px 14px rgba(135, 135, 135, 0.18));
    }
    .research_box ul li p {
        font-size: 16px;
    }
    .research_box ul li p .sm_txt {
        display: block;
        font-weight: 500;
        font-size: 12px;
        line-height: 25px;
        letter-spacing: -0.02em;
        color: #2E1566;
        margin-top: 5px;
    }
    .research_box ul li p b {
        display: block;
        font-weight: 500;
        font-size: 10px;
        line-height: 20px;
        letter-spacing: -0.02em;
        color: #9269EE;
        margin-top: 3px;
    }
    .research_box ul li a {
        display: inline-block;
        font-weight: 500;
        font-size: 12px;
        color: #7435FF;
        background: rgba(116, 53, 255, 0.05);
        border: 1px solid rgba(116, 53, 255, 0.15);
        border-radius: 100px;
        padding: 8px 30px;
        white-space: nowrap;
        margin-top: 5px;
    }
}

/* ==========================================================
   모바일 구간 (해상도 768px 이하)
   ========================================================== */
@media screen and (max-width:768px) {
    #content > h2 {font-size: 18px; line-height: 36px; padding: 4% 10% 0; color:#979393;}
    .research_box {
        padding: 60px 12%;
    }
    .research_box ul {
        gap: 60px;
    }

    /* 각 항목을 이미지+텍스트의 세로 배치로 변경 */
    .research_box ul li {
        flex-direction: column; /* 세로 배치 */
        align-items: center; /* 중앙 정렬 */
        gap: 0; /* 내부 간격은 각 요소의 margin/padding으로 제어 */
        text-align: center; /* 텍스트 중앙 정렬 */
        background-color: transparent; /* 배경색 없음 */
        padding: 0;
        border-radius: 0;
    }

    .research_box ul li .img_box {
        width: auto; /* 너비 자동 */
        padding-bottom: 25px; /* 선과 이미지 사이 간격 */
        /*margin-bottom: 25px; !* 선과 텍스트 사이 간격 *!*/
    }

    /* 이미지 아래 선(::after)  */
    .research_box ul li .img_box::after {
        display: block;
        width: 1px;
        height: 50px;
        background: rgba(46, 21, 102, 0.3);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .research_box ul li .img_box img {
        width: auto;
        max-width: 165px; /* 이미지 최대 너비 */
        border: none;
        filter: drop-shadow(0px 6px 14px rgba(135, 135, 135, 0.25)); /* 그림자 효과 적용 */
    }


    .research_box ul li p {
        font-weight: 500;
        font-size: 16px;
        line-height: 25px;
        color: #2E1566;
        margin-bottom: 5px;
        /*padding: 0 24px;*/
    }

    .research_box ul li p span {
        display: block;
    }

    .research_box ul li p b {
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        margin-top: 7px;
        color: #9269EE; /* 저자 색상 */
    }
    .research_box ul li p b.sm_txt {
        color: #2E1566; /* 부제목 색상 */
        font-size: 10px;
        line-height: 19px;
        margin-top: 7px;
        font-weight: 400;
    }

    .research_box ul li a {
        margin-top: 5px;
    }

    .research_box .pagination_box {margin-top: 60px;}
    .research_box .pagination_box span {font-size: 20px; width: 30px; height: 30px;}
    .research_box .pagination_box .pagination {width: 30px;}
    .research_box .pagination_box .pagination:nth-child(n+6) {display: none;}
    .research_box .pagination_box .pagination a {display: block; width: 100%; height: 100%; line-height: 30px;}
    .research_box .pagination_box .pagination.on a {font-size: 18px;}
}