@charset "UTF-8";

.contents_box .contents_section:has(.history_area) {
    padding-top:120px;
}
.history_year {
    min-width:168px;
    position:relative;
    display:inline-block;
}
.history_year .btn_history_year {
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    border-radius:999px;
    background-color:#eee;
    font-size:1.6rem;
    font-weight:600;
    line-height:1.5;
    color:#1A1A1A;
}
.history_year .btn_history_year::after {
    content:'';
    width:20px;
    height:20px;
    background:url("/img/common/icon/icon_chevrondown-af3fd4135f2eeba7bb683ce220a33069.svg") no-repeat center / 100% auto;
    transition:transform .2s ease;
}
.history_year.is_open_history_year .btn_history_year::after {
    transform:rotate(180deg);
}
.history_year .history_year_dropbox {
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:160px;
    padding:8px 12px 8px 20px;
    border-radius:12px;
    background-color:#eee;
    box-sizing:border-box;
    z-index:10;
}
.history_year .history_year_dropbox_inner {
    height:220px;
    overflow-y:auto;
}
.history_year .history_year_dropbox_inner::-webkit-scrollbar {
    width:8px;
}
.history_year .history_year_dropbox_inner::-webkit-scrollbar-track {
    background:transparent;
    border: none;
}
.history_year .history_year_dropbox_inner::-webkit-scrollbar-thumb {
    background-color:#D9D9D9;
    border-radius:2px;
    box-shadow: inset 4px 0 0 0 #eee;
}
.history_year.is_open_history_year .history_year_dropbox {
    display:block;
}
.history_year .history_year_list {
    display:flex;
    flex-direction:column;
}
.history_year .link_history_year {
    display:block;
    width:100%;
    padding:10px 0;
    text-align:left;
    font-size:1.6rem;
    line-height:1.5;
    color:#1A1A1A;
} 
.history_year .link_history_year.is_selected {
    font-weight:600;
}

.history_list {
    margin-top:60px;
}
.history_list > li {
    display:flex;
    gap:56px;
}
.history_list > li + li {
    padding-top:80px;
}
.history_list .year {
    display:block;
    width:160px;
    font-size:4rem;
    line-height:1.4;
    font-weight:700;
    flex-shrink: 0;
}
.history_list .text {
    padding-top:12px;
}
.history_list .text > h4 {
    display:block;
    font-size:2.4rem;
    line-height:1.4;
    font-weight:600;
    margin-bottom:32px;
}
.history_list .text > ul > li {
    position:relative;
    font-size:1.8rem;
    line-height:1.5;
    color:#333;
}
.history_list .text > ul > li + li {
    padding-top:12px;
}
.history_list .text > ul > li > a {
    display: inline-flex;
    align-items:center;
    gap:4px;
    color:#333;
}
.history_list .text > ul > li > a::after {
    content:'';
    display:inline-block;
    width:20px;
    height:20px;
    background:url("/img/common/icon/icon_link_arrow-e7456a29ef389448443341db17526c74.svg") no-repeat 0 0 / 100% auto;
    flex-shrink: 0;
}
.history_list .text > ul > li .tooltip_link {
    display: block;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 350px;
    box-sizing: border-box;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .7);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 20px;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    text-overflow: ellipsis;
    transition: opacity .2s, visibility .2s;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}
.history_list .text > ul > li > a:focus-visible ~ .tooltip_link,
.history_list .text > ul > li .tooltip_link.is_show {
    opacity:1;
    visibility:visible;
}
.history_list .img {
    margin-left:auto;
    padding-top:12px;
}
.history_list .img > img {
    width:436px;
}


/* Mobile (1169.98px 이하) */
@media only screen and (max-width: 1169.98px) {
    .contents_box .contents_section:has(.history_area) {
        padding-top:0;
    }
    
    .history_year {
        min-width:144px;
    }
    .history_year .btn_history_year {
        padding:8px 16px;
        font-size:1.4rem;
        line-height:1.5;
    }
    .history_year .btn_history_year::after {
        width:16px;
        height:16px;
    }
    .history_year .history_year_dropbox {
        top:calc(100% + 4px);
        min-width:144px;
        padding:8px 12px 8px 20px;
        border-radius:12px;
    }
    .history_year .history_year_dropbox_inner {
        height:205px;
        overflow-y:auto;
    }
    .history_year .history_year_dropbox_inner::-webkit-scrollbar {
        width:8px;
    }
    .history_year .history_year_dropbox_inner::-webkit-scrollbar-track {
        background:transparent;
        border: none;
    }
    .history_year .history_year_dropbox_inner::-webkit-scrollbar-thumb {
        background-color:#D9D9D9;
        border-radius:2px;
        box-shadow: inset 4px 0 0 0 #eee;
    }
    .history_year .link_history_year {
        font-size:1.4rem;
    }

    .history_list {
        margin-top:40px;
    }
    .history_list > li {
        flex-direction:column;
        gap:32px;
    }
    .history_list > li + li {
        padding-top:60px;
    }
    .history_list .year {
        width:auto;
        font-size:2.4rem;
        line-height:1.5;
        font-weight:700;
    }
    .history_list .text {
        padding-top:0;
    }
    .history_list .text > h4 {
        font-size:1.6rem;
        line-height:1.5;
        font-weight:700;
        margin-bottom:20px;
    }
    .history_list .text > ul > li {
        font-size:1.4rem;
        line-height:1.5;
    }
    .history_list .text > ul > li + li {
        padding-top:8px;
    }
    .history_list .text > ul > li > a::after {
        width:16px;
        height:16px;
    }

    .history_list .text > ul > li .tooltip_link {
        right: 0;
        left: unset;
        width: 216px;
        font-size:1rem;
        font-style:normal;
        font-weight:400;
        line-height:normal;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .history_list .text > ul > li:hover .tooltip_link,
    .history_list .text > ul > li:focus-within .tooltip_link {
        opacity:1;
        visibility:visible;
    }
    .history_list .img {
        padding:0;
        margin-left:0;
    }
    .history_list .img > img {
        width:100%;
    }
}