@import url(default.css);
@import url(fonts.css);
@import url(common.css);

.header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: var(--header-h);
    color: #fff;
    fill: #fff;
    padding: 0 var(--wrapper-margin);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.header.fixed {
    background-color: #fff;
    color: var(--font-color-tit);
    fill: var(--font-color-tit);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.header .logo a {
    display: block;
    width: calc(var(--header-h) * (211 / 90));
    height: calc(var(--header-h) * (32 / 90));
    background: url(../images/logo_w.svg) no-repeat center center / contain;
}
.header.fixed .logo a {
    background-image: url(../images/logo.svg);
}



@media screen and (min-width:1025px) {
/* header 디자인은 PC와 모바일이 완전히 다름, 여기는 PC(최소 너비 1025px 이상) */
                .header .gnb .gnb_open,
                .header .gnb .gnb_wrap .gnb_logo,
                .header .gnb .gnb_wrap .gnb_close {
                    display: none; /* 모바일에서 나옴 */
                }

                .header .gnb .gnb_wrap ul.depth1 {
                    display: flex;
                }

                .header .gnb .gnb_wrap ul.depth1 > li {
                    position: relative; /* ul.depth2 정렬 기준 */
                    min-width: 0;
                    transition: 0.3s;
                }

                .header .gnb .gnb_wrap ul.depth1 > li > a {
                    display: block;
                    position: relative; /* ::after */
                    line-height: var(--header-h);
                    font-family: var(--font-family-tit);
                    font-size: 24px;
                    font-weight: var(--font-weight-tit);
                    padding: 0 36px;
                    text-align: center;
                    transition: padding 0.3s;
                }
                .header .gnb .gnb_wrap ul.depth1 > li > a::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 0;
                    width: 0;
                    height: 3px;
                    background-color: var(--color-main);
                    transition: width 0.3s;
                }

                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
                    display: block !important; /* jQuery slideUp, slideDown 부작용 방지 */
                    position: absolute;
                    left: 0;
                    top: var(--header-h);
                    width: 100%;
                    height: 0;
                    text-align: center;
                    padding: 0;
                    border-right: 1px solid rgba(255, 255, 255, 0.2);
                    opacity: 0;
                    transition: 0.3s;
                    overflow: hidden;
                    /* display: none, block은 transition은 안 됨 */
                }
                .header .gnb .gnb_wrap ul.depth1 > li:first-child > ul.depth2 {
                    border-left: 1px solid rgba(255, 255, 255, 0.2);
                }
                .header.menu_over .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
                    height: 199px;
                    padding: 13px 0 0 0;
                    opacity: 1;
                    border-color: #ccc;
                }

                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a {
                    display: block;
                    padding: 5px 0;
                    color: var(--font-color-default);
                }
                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a:hover {
                    color: var(--color-main);
                }

                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a span {
                    position: relative;
                }
                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a span::after {
                    content: "";
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: -2px;
                    width: 0;
                    height: 1px;
                    background-color: var(--color-main);
                    /* transition: 0.3s; */
                }
                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a:hover span::after {
                    width: 100%;
                }

                .header .util {
                    display: flex;
                }

                .header .util .search .search_open,
                .header .util .mypage {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 54px;
                    height: 54px;
                }

                /* .header.menu_over .header.menu_over .header.menu_over */
                .header.menu_over {
                    color: var(--font-color-tit);
                    fill: var(--font-color-tit);
                }
                .header::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    z-index: -1;
                    width: 100%;
                    height: 289px;
                    background-color: #fff;
                    transform: translateY(-110%); /* 헤더 내려오는 애니메이션 */
                    transition: 0.3s;
                }
                .header.menu_over::before {
                    transform: translateY(0);
                }
                .header.menu_over::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: var(--header-h);
                    width: 100%;
                    height: 1px;
                    background-color: #ccc;
                }

                .header.menu_over .logo a {
                    background-image: url(../images/logo.svg);
                }
                
                .header.menu_over .gnb .gnb_wrap ul.depth1 > li {
                    min-width: 185px;
                }

                .header.menu_over .gnb .gnb_wrap ul.depth1 > li.over > a::after {
                    width: 100%;
                }

                .header .gnb .gnb_bg {
                    position: fixed;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100vh;
                    z-index: -2;
                    background-color: rgba(0, 0, 0, 0);
                    backdrop-filter: blur(0);
                    transform: translateY(-110%);
                    transition: background-color 0.3s, backdrop-filter 0.3s;
                    /* transition을 background-color와 backdrop-filter만 주어짐 */
                }
                .header.menu_over .gnb .gnb_bg {
                    background-color: rgba(0, 0, 0, 0.4);
                    backdrop-filter: blur(8px);
                    transform: translateY(0);
                }
} /* @media screen and (min-width:1025px) */

@media screen and (min-width:1025px) and (max-width:1200px) {
                .header .gnb .gnb_wrap ul.depth1 > li > a {
                    padding: 0 18px;
                }

                .header.menu_over .gnb .gnb_wrap ul.depth1 > li {
                    min-width: 142px;
                }
} /* @media screen and (min-width:1025px) and (max-width:1200px) */

@media screen and (max-width:1024px) {
                .header {
                    padding-right: 0;
                }

                .header .gnb .gnb_open {
                    width: var(--header-h);
                    height: var(--header-h);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .header .gnb .gnb_open svg {
                    /* 모바일/태블릿 너비에 따른 아이콘 크기 조정 */
                    width: calc(var(--header-h) * (24 / 56));
                    height: calc(var(--header-h) * (18 / 56));
                }

                .header .gnb .gnb_wrap {
                    visibility: hidden;
                    position: fixed;
                    right: 0;
                    top: 0;
                    z-index: 1;
                    width: 100%;
                    max-width: 500px;
                    height: 100vh;
                    background-color: #fff;
                    color: var(--font-color-tit);
                    fill: var(--font-color-tit);
                    transform: translateX(110%);
                    transition: transform 0.3s;
                }
                .header.menu_open .gnb .gnb_wrap {
                    visibility: visible;
                    transform: translateX(0);
                }

                .header .gnb .gnb_wrap .gnb_logo {
                    position: absolute; /* gnb_wrap 기준 정렬 */
                    left: var(--wrapper-margin);
                    top: 0;
                    width: calc(var(--header-h) * (211 / 90));
                    height: var(--header-h);
                    background: url(../images/logo.svg) no-repeat left center / contain;
                }

                .header .gnb .gnb_wrap ul.depth1 {
                    margin: var(--header-h) 0 0 0;
                    height: calc(100% - var(--header-h));
                    overflow: hidden auto;
                    padding: 8px 0 0 0;
                }

                .header .gnb .gnb_wrap ul.depth1 > li > a {
                    font-family: var(--font-family-tit);
                    font-size: 24px;
                    font-weight: var(--font-weight-tit);
                    display: block;
                    padding: 17px var(--wrapper-margin) 17px var(--wrapper-margin);
                    position: relative; /* ::after 정렬 기준 */
                }
                .header .gnb .gnb_wrap ul.depth1 > li > a::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: var(--header-h); /* gnb_close와 같은 너비 */
                    height: 100%; /* a와 같은 높이 */
                    background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.53812 8.91412C8.70553 8.85687 8.86099 8.75954 9.00448 8.62214L15.6054 2.30153C15.8685 2.04962 16 1.72901 16 1.33969C16 0.950382 15.8685 0.629771 15.6054 0.377863C15.3423 0.125954 15.0075 -8.67694e-08 14.6009 -1.22313e-07C14.1943 -1.57858e-07 13.8595 0.125954 13.5964 0.377862L8 5.73664L2.40359 0.377861C2.14051 0.125953 1.80568 -1.24091e-06 1.3991 -1.27645e-06C0.992526 -1.312e-06 0.657699 0.125953 0.394619 0.377861C0.13154 0.62977 -8.3085e-08 0.95038 -1.1712e-07 1.33969C-1.51155e-07 1.72901 0.13154 2.04962 0.394619 2.30153L6.99552 8.62214C7.13901 8.75954 7.29447 8.85687 7.46188 8.91412C7.6293 8.97137 7.80867 9 8 9C8.19133 9 8.3707 8.97137 8.53812 8.91412Z' fill='%23231815'/%3E%3C/svg%3E%0A");
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: calc(var(--header-h) * (16 / 56));
                    transition: transform 0.3s;
                }
                .header .gnb .gnb_wrap ul.depth1 > li.open > a::after {
                    transform: rotate(180deg);
                }

                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
                    display: none;
                    background-color: var(--color-bg);
                    margin: 0 calc((var(--header-h) - (var(--header-h) * (24 / 56))) / 2) 0 var(--wrapper-margin);
                    padding: 10px 4px;
                }
                /* .header .gnb .gnb_wrap ul.depth1 > li.open > ul.depth2 {
                    display: block;
                } */

                .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 > li > a {
                    display: block;
                    padding: 4px 16px;
                    color: var(--font-color-default);
                }

                .header .gnb .gnb_wrap .gnb_close {
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: var(--header-h);
                    height: var(--header-h);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .header .gnb .gnb_wrap .gnb_close svg {
                    width: calc(var(--header-h) * (24 / 56));
                    height: calc(var(--header-h) * (18 / 56));
                }

                .header .gnb .gnb_bg {
                    position: fixed;
                    left: 0;
                    top: 0;
                    width: 100vw;
                    height: 100vh;
                    background-color: rgba(0, 0, 0, 0);
                    backdrop-filter: blur(0);
                    transition: background-color 0.3s, backdrop-filter 0.3s;
                    transform: translateX(110%);
                }
                .header.menu_open .gnb .gnb_bg {
                    background-color: rgba(0, 0, 0, 0.4);
                    backdrop-filter: blur(8px);
                    transform: translateX(0);
                }
                
                .header .util {
                    display: none;
                }
} /* @media screen and (max-width:1024px) */


.visual {
    position: relative; /* .ctrl_left, .ctrl_right 정렬 기준 */
}

.visual .swiper-slide {
    height: max(500px, 100vh);
    background: url(../images/visual_bg1.jpg) no-repeat center center / cover;
    color: #fff;
    padding: 0 var(--wrapper-margin) 184px var(--wrapper-margin);
    display: flex; /* h3, p 아래로 배치 */
    flex-direction: column;
    justify-content: flex-end;
}
.visual .swiper-slide.bg2 {
    background-image: url(../images/visual_bg2.jpg);
}
.visual .swiper-slide.bg3 {
    background-image: url(../images/visual_bg3.jpg);
}

.visual .swiper-slide h3 {
    font-family: var(--font-family-tit);
    font-size: clamp(36px, 8vw, 80px); /* 모바일 크기, PC 크기의 1/10 vw, PC 크기 */
    font-weight: 700;
    line-height: var(--line-height-tit);
    margin: 0 0 13px 0;
}

.visual .ctrl_left {
    position: absolute;
    left: var(--wrapper-margin);
    bottom: 93px;
    z-index: 10;
    color: #fff;
    fill: #fff;
    display: flex;
    align-items: center;
    gap: 0 12px;
}

.visual .ctrl_left .bar {
    position: relative; /* span 정렬 기준 */
    width: 247px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.2);
}
.visual .ctrl_left .bar span {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: #fff;
}

.visual .ctrl_left .play {
    display: none; /* 재생 버튼은 눌렀을 때만 나옴 */
}

.visual .ctrl_right {
    position: absolute;
    right: var(--wrapper-margin);
    bottom: 69px;
    z-index: 10;
    color: #fff;
    fill: #fff;
    display: flex;
    gap: 8px;
}
.visual .ctrl_right button {
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:768px) {
    .visual .swiper-slide {
        height: 500px;
        padding-bottom: 45px;
    }

    .visual .ctrl_left,
    .visual .ctrl_right {
        display: none;
    }
} /* @media screen and (max-width:768px) */


.book {
    background-color: var(--color-bg);
    padding: clamp(107px, 20vw, 186px) 0 clamp(99px, 14vw, 131px) 0;
    /* display: flex; .inner 오른쪽 배치
    justify-content: flex-end; */
}

.book .inner {
    /* width: calc(50% + calc(var(--wrapper-w) / 2)); */
    display: flex; /* .tit .list 좌우 배치 */
    justify-content: space-between;
    position: relative; /* .btn_wrap 정렬 기준 */
    margin-left: calc((100% - var(--wrapper-w)) / 2); /* (전체 너비 - wrapper 너비) / 2) */
}

@media screen and (max-width:1384px){ /* 1284+50+50 = 1384 */
        .book .inner {
            /* width: calc(100% - var(--wrapper-margin)); */
            margin-left: var(--wrapper-margin);
        }
}

.book .tit h2 {
    font-family: var(--font-family-tit);
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
    color: var(--font-color-tit);
    margin: 0 0 9px 0;
}

.book .list {
    width: calc(100% - 326px); /* inner 100% - 326px */
}

.book .list .swiper {
    padding-right: var(--wrapper-margin);
}

.book .list .swiper-wrapper {
    align-items: flex-end; /* 책 정렬 기준점을 아래로 */
}

.book .list .swiper-slide {
    width: 275px;
}

.book .list .swiper-slide a {
    display: block;
}

.book .list .swiper-slide a .photo {
    overflow: hidden;
    border: 1px solid #D0CABC;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.book .list .swiper-slide a .photo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 책 안 잘림 */
    vertical-align: bottom;
}

.book .list .swiper-slide a .txt {
    /* 높이 고정을 위해 폰트 크기와 line-height를 부모에게 제공함 */
    font-size: var(--font-size-subTit2);
    line-height: var(--line-height-tit);
    height: calc((var(--line-height-tit) * 3em) + (1.0417em + 0.1667em));
}

.book .list .swiper-slide a .txt h3 {
    font-weight: var(--font-weight-tit);
    color: var(--font-color-tit);
    margin: 1.0417em 0 0.1667em 0;
    /* 최대 2줄 */
    max-height: calc(var(--line-height-tit) * 2em);
    overflow: hidden;
    /* 책 제목은 단어 단위 줄바꿈 해제 */
    word-break: normal;
}

.book .list .swiper-slide a .txt h3 strong {
    /* 밑줄 */
    background-image: linear-gradient(var(--font-color-tit));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size 0.3s;
}

.book .list .swiper-slide a:hover .txt h3 strong {
    background-size: 100% 1px;
}

.book .list .swiper-slide a .txt span {
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
    color: var(--font-color-gray);
    /* 1줄 제한 */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.book .btn_wrap {
    display: flex;
    gap: 0 4px;
    position: absolute;
    left: 0;
    top: 257px;
}

.book .btn_wrap button,
.book .btn_wrap .more {
    width: 48px;
    height: 48px;
    border: 1px solid var(--font-color-gray);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--font-color-gray);
    fill: var(--font-color-gray);
}
.book .btn_wrap button.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
}
.book .btn_wrap button:not(.swiper-button-disabled):hover,
.book .btn_wrap .more:hover {
    border-color: var(--color-main);
    background-color: var(--color-main);
    color: #fff;
    fill: #fff;
}

@media screen and (max-width:1024px){
                .book .inner {
                    flex-direction: column;
                    gap: 72px 0;
                }
                
                .book .tit h2 br.not-in-mobile {
                    display: none;
                }

                .book .tit p {
                    display: none;
                }

                .book .list {
                    width: auto;
                }

                .book .list .swiper-slide a .txt h3 {
                    margin: 0.5em 0 0.1em 0;
                }

                .book .btn_wrap {
                    left: auto;
                    right: var(--wrapper-margin);
                    top: calc(var(--line-height-tit) * var(--font-size-tit));
                }

} /* @media screen and (max-width:1024px) */

@media screen and (max-width:768px) {
                .book .list .swiper-slide {
                    width: 225px;
                }

                .book .btn_wrap button {
                    display: none;
                }

                .book .btn_wrap button,
                .book .btn_wrap .more {
                    width: 36px;
                    height: 36px;
                }

                .book .btn_wrap .more svg {
                    width: 16px;
                    height: 16px;
                }
} /* @media screen and (max-width:768px) */


.interview {
    margin: clamp(67px, 19vw, 171px) 0 clamp(119px, 15vw, 142px) 0;
}

.interview .wrapper {
    position: relative; /* .more 정렬 기준 */
}

.interview .tit h2 {
    font-family: var(--font-family-tit);
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
    color: var(--font-color-tit);
    margin: 0 0 9px 0;
}

.interview .tit h2 br{
    display: none;
}

.interview .list {
    margin: clamp(46px, 6vw, 62px) 0 0 0;
}

.interview .list ul {
    display: flex;
    justify-content: space-between;
}

.interview .list ul li {
    /* (100% / 1줄 li 개수) - (여백 합 / 1줄 li 개수) */
    width: calc((100% / 3) - 16px);
}
.interview .list ul li:nth-child(2) {
    margin-top: 50px;
}

.interview .list ul li a {
    display: block;
    position: relative; /* .txt, .over 정렬 기준 */
}

.interview .list ul li a .photo {
    position: relative; /* ::before 정렬 기준 */
    overflow: hidden;
    height: 416px;
    border-radius: 70px 0 70px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.interview .list ul li:nth-child(2) a .photo {
    border-radius: 0 70px 0 70px;
}
.interview .list ul li a .photo::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
    background-image: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
    opacity: 1;
    transition: opacity 0.3s;
}
.interview .list ul li:hover a .photo::before {
    opacity: 0;
}

.interview .list ul li a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.interview .list ul li:hover a .photo img {
    filter: grayscale(0);
}

.interview .list ul li a .txt {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 12.1% 50px 12.1%;
    z-index: 11;
    color: #fff;
    fill: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    opacity: 1;
    transition: opacity 0.3s;
}
.interview .list ul li:hover a .txt {
    opacity: 0;
}

.interview .list ul li a .txt h3 {
    font-family: var(--font-family-tit);
    font-size: var(--font-size-interview-tit);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
}

.interview .list ul li a .over {
    position: absolute;
    left: 0;
    bottom: -47px;
    z-index: 12;
    width: 92.2%;
    background-color: var(--color-main);
    color: #fff;
    fill: #fff;
    border-radius: 70px 0 70px 0;
    padding: 50px 13.2%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s, transform 0.3s;
}
.interview .list ul li:nth-child(2) a .over {
    border-radius: 0 70px 0 70px;
}
.interview .list ul li:hover a .over {
    opacity: 1;
    transform: translateY(0);
}

.interview .list ul li a .over h3 {
    font-family: var(--font-family-tit);
    font-size: var(--font-size-subTit1);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 9px 0;
}

.interview .list ul li a .over p {
    line-height: var(--line-height-default);
    height: calc(var(--line-height-default) * 2em);
    overflow: hidden;
    word-break: normal;
}

.interview .more {
    display: flex;
    gap: 0px 3px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: var(--font-size-tit);
    color: var(--font-color-gray);
    fill: var(--font-color-gray);
    border: 1px solid var(--font-color-gray);
    border-radius: 100px;
    padding: 11px 28px;
}
.interview .more:hover {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
    fill: #fff;
}

@media screen and (max-width:768px){
                .interview .tit h2 {
                    margin: 0;
                }

                .interview .tit h2 br{
                    display: block;
                }

                .interview .tit p {
                    display: none;
                }

                .interview .list ul li {
                    width: calc(50% - 8px);
                }
                .interview .list ul li:nth-child(2) {
                    margin-top: 0;
                }
                .interview .list ul li:nth-child(3) {
                    display: none;
                }
                

                .interview .list ul li a .photo {
                    border-radius: 24px 0 24px 0;
                }
                .interview .list ul li:nth-child(2) a .photo {
                    border-radius: 24px 0 24px 0;
                }
                .interview .list ul li a .photo::before {
                    display: none;
                }

                .interview .list ul li a .photo img {
                    filter: grayscale(0);
                }

                .interview .list ul li a .txt {
                    display: none;
                }

                .interview .list ul li a .over {
                    bottom: -32px;
                    max-width: calc(100% - 20px);
                    border-radius: 24px 0 24px 0;
                    padding: 20px 6.3%;
                    opacity: 1;
                    transform: translateY(0);
                }
                .interview .list ul li:nth-child(2) a .over {
                    border-radius: 24px 0 24px 0;
                }

                .interview .list ul li a .over h3 {
                    margin: 0 0 13px 0;
                }

                .interview .list ul li a .over h3 svg {
                    height: calc(var(--font-size-subTit1) * 0.7);
                }

                .interview .more {
                    right: 0;
                    top: calc(var(--line-height-tit) * var(--font-size-tit));
                    border-radius: 50%;
                    padding: 10px;
                }
                .interview .more:hover {
                    background-color: var(--color-main);
                    border-color: var(--color-main);
                    color: #fff;
                    fill: #fff;
                }

                .interview .more span {
                    display: none;
                }
} /* @media screen and (max-width:768px) */

@media screen and (max-width:489px) {
                .interview .list ul li {
                    width: 100%;
                }
                .interview .list ul li:nth-child(2) {
                    display: none;
                }
} /*@media screen and (max-width:489px) */


.story {
    background-color: var(--color-bg);
    padding: clamp(105px, 18vw, 168px) 0 clamp(99px, 14vw, 126px) 0;
}

.story .wrapper {
    position: relative; /* .btn_wrap 정렬 기준 */
}

.story .tit {
    text-align: center;
}

.story .tit h2 {
    font-family: var(--font-family-tit);
    font-size: var(--font-size-tit);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
    color: var(--font-color-tit);
    margin: 0 0 9px 0;
}

.story .tit h2 br {
    display: none;
}

.story .list {
    margin: clamp(43px, 6vw, 62px) 0 0 0;
}

.story .list .swiper-slide {
    width: 303px;
}

.story .list .swiper-slide a {
    display: block;
}

.story .list .swiper-slide a .photo {
    overflow: hidden;
    height: 332px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.story .list .swiper-slide.long a .photo {
    height: 472px;
}

.story .list .swiper-slide a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.1s;
}
.story .list .swiper-slide a:hover .photo img {
    transform: scale3d(1.125, 1.125, 1);
}


.story .list .swiper-slide a h3 {
    font-size: var(--font-size-subTit2);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
    color: var(--font-color-tit);
    margin: 1.1875em 0 0 0;
    /* 높이는 2줄 고정 */
    height: calc(var(--line-height-tit) * 2em);
    overflow: hidden;
    word-break: normal;
}

.story .list .swiper-slide a h3 span {
    background-image: linear-gradient(var(--font-color-tit));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0% 100%;
    transition: background-size 0.3s;
}
.story .list .swiper-slide a:hover h3 span {
  background-size: 100% 1px;
}

.story .list .swiper-slide a p {
    margin: 0.3333em 0 0 0;
    /* 높이는 5줄 고정 */
    height: calc(var(--line-height-default) * 5em);
    overflow: hidden;
    word-break: normal;
}
.story .list .swiper-slide.long a p {
    display: none;
}

.story .btn_wrap {
    display: flex;
    gap: 0 8px;
    position: absolute;
    right: 0;
    top: 38px;
}

.story .btn_wrap button,
.story .btn_wrap .more {
    width: 48px;
    height: 48px;
    border: 1px solid var(--font-color-gray);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--font-color-gray);
    fill: var(--font-color-gray);
}
.story .btn_wrap button.swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
}
.story .btn_wrap button:not(.swiper-button-disabled):hover,
.story .btn_wrap .more:hover {
    border-color: var(--color-main);
    background-color: var(--color-main);
    color: #fff;
    fill: #fff;
}


@media screen and (max-width:1024px){
                .story .btn_wrap {
                    top: calc(var(--line-height-tit) * var(--font-size-tit));
                }
} /* @media screen and (max-width:1024px) */

@media screen and (max-width:768px) {
                .story .tit {
                    text-align: left;
                    margin-right: 40px;
                }

                .story .tit h2 br {
                    display: block;
                }

                .story .tit p {
                    display: none;
                }

                .story .list .swiper-slide {
                    width: 225px;
                }
                
                .story .list .swiper-slide a .photo {
                    height: 247px;
                }
                .story .list .swiper-slide.long a .photo {
                    height: 350px;
                }

                .story .list .swiper-slide a h3 {
                    margin: 0.9em 0 0 0;
                }

                .story .list .swiper-slide a p {
                    margin: 0.35em 0 0 0;
                    /* 높이는 4줄 고정 */
                    height: calc(var(--line-height-default) * 4em);
                }

                .story .btn_wrap button {
                    display: none;
                }

                .story .btn_wrap button,
                .story .btn_wrap .more {
                    width: 36px;
                    height: 36px;
                }

                .story .btn_wrap .more svg {
                    width: 16px;
                    height: 16px;
                }
                
} /* @media screen and (max-width:768px) */


.footer {
    background-color: #444;
    color: rgba(255, 255, 255, 0.6);
    padding: 93px 0 clamp(96px, 11vw, 105px) 0;
}

.footer .wrapper {
    position: relative; /* .copyright 정렬 기준 */
    display: flex; /* .slogan, .f_info 좌우 배치 */
    justify-content: space-between;
}

.footer .slogan {
    font-family: var(--font-family-tit);
    font-size: var(--font-size-subTit1);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
    color: rgba(255, 255, 255, 0.8);
}

.footer .f_info {
    width: 303px;
}

.footer .f_info h3 {
    font-family: var(--font-family-tit);
    font-size: var(--font-size-subTit2);
    font-weight: var(--font-weight-tit);
    line-height: var(--line-height-tit);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.5294em 0;
}

/* f_info 안의 모든 태그들 중, 태그 다음 태그가 h3 태그인 경우, 그 h3 태그에 대해 */
.footer .f_info * + h3 {
    margin-top: 2.5833em;
}

.footer .f_info .sns {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.5294em;
}

.footer .f_info .sns li a {
    position: relative;
}
.footer .f_info .sns li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}

.footer .copyright {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 303px - var(--wrapper-margin));
}

.footer .copyright .f_logo img {
    width: 180px;
    opacity: 0.8;
}

.footer .copyright p {
    margin: 0.7059em 0 0 0;
}

@media screen and (max-width:768px) {
                .footer {
                    padding-top: 96px;
                }

                .footer .wrapper {
                    flex-direction: column;
                    gap: 51px 0;
                }

                .footer .f_info {
                    width: auto;
                }

                .footer .copyright {
                    position: relative;
                    left: auto;
                    bottom: auto;
                    width: auto;
                    text-align: center;
                }

                .footer .copyright .f_logo img {
                    width: 136px;
                }

}