@import url(default.css);
    @import url(fonts.css);
    @import url(common.css);
    @import url(layout.css);
/********************* visual *********************/
.visual {
    margin: var(--header-h) 0 0 0;
}
.visual .vis {
    background: url(../images/main.jpg) no-repeat center center / cover;
    height: 730px;
}
.visual .vis .wrapper {
    display: flex;
    flex-direction: column;
    padding: 364px 0 0 0;
}
.visual .vis .wrapper .text{
    margin: 0  0 0 24px;
}
.visual .vis .wrapper strong {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}
.visual .vis .wrapper .text h2 {
    color: #fff;
    font-size: 100px;
    font-family: 'Lib';
    margin: 10px 0 20px 0;
}
.visual .search {
    position: relative;
    width: 100%;
    height: 80px;
}
.visual .search input {
    width: 100%;
    height: 100%;
    border: 5px solid var(--color-main);
    border-radius: 50px;
    padding: 0 60px 0 24px;
    font-size: 18px;
    outline: none
}
.visual .search button {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    padding: 24px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L17.3 15.9C17.4833 16.0833 17.575 16.3167 17.575 16.6C17.575 16.8833 17.4833 17.1167 17.3 17.3C17.1167 17.4833 16.8833 17.575 16.6 17.575C16.3167 17.575 16.0833 17.4833 15.9 17.3L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' /%3E%3C/svg%3E%0A");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--color-main);
    border-radius: 30px;
    cursor: pointer;
}
@media screen and (max-width:1024px){
    .visual .vis {
        height: 600px;
    }
    .visual .vis .wrapper {
        display: flex;
        flex-direction: column;
        padding: 234px 0 0 0;
    }
    .visual .vis .wrapper .text{
        margin: 0  0 0 20px;
    }
    .visual .vis .wrapper strong {
        font-size: 20px;
    }
    .visual .vis .wrapper .text h2 {
        font-size: 80px;
        margin: 10px 0 20px 0;
    }
    .visual .search {
        position: relative;
        width: 100%;
        height: 80px;
    }
    .visual .search input {
        width: 100%;
        height: 100%;
        border: 5px solid var(--color-main);
        border-radius: 50px;
        padding: 0 60px 0 24px;
        font-size: 18px;
        outline: none
    }
    .visual .search button {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        padding: 24px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L17.3 15.9C17.4833 16.0833 17.575 16.3167 17.575 16.6C17.575 16.8833 17.4833 17.1167 17.3 17.3C17.1167 17.4833 16.8833 17.575 16.6 17.575C16.3167 17.575 16.0833 17.4833 15.9 17.3L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' /%3E%3C/svg%3E%0A");
        background-size: 18px;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: var(--color-main);
        border-radius: 30px;
        cursor: pointer;
    }
}
@media screen and (max-width:768px){
    .visual .vis {
        height: 550px;
    }
    .visual .vis .wrapper {
        padding: 403px 0 0 0;
    }
    .visual .vis .wrapper .text{
        margin: 0  0 0 16px;
    }
    .visual .vis .wrapper strong {
        font-size: 16px;
    }
    .visual .vis .wrapper .text h2 {
        font-size: 60px;
        margin: 8px 0;
    }
    .visual .search {
        position: relative;
        width: 100%;
        height: 64px;
    }
    .visual .search input {
        width: 100%;
        height: 100%;
        border: 5px solid var(--color-main);
        border-radius: 50px;
        padding: 0 32px 0 16px;
        font-size: 18px;
        outline: none
    }
    .visual .search button {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        padding: 20px;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L17.3 15.9C17.4833 16.0833 17.575 16.3167 17.575 16.6C17.575 16.8833 17.4833 17.1167 17.3 17.3C17.1167 17.4833 16.8833 17.575 16.6 17.575C16.3167 17.575 16.0833 17.4833 15.9 17.3L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' /%3E%3C/svg%3E%0A");
        background-size: 18px;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: var(--color-main);
        border-radius: 30px;
        cursor: pointer;
    }
}
/********************* visual *********************/
/********************* recommend *********************/
.recommend {
    padding: 120px 0;
}
.recommend .reco1 .wrapper {
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 40px;
    display: flex;
    justify-content: space-between;
}
.recommend .reco1 .wrapper .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    margin-right: 80px;
}
.recommend .reco1 .wrapper .left h3 {
    font-family: 'Lib';
    font-size: var(--fontsize-title);
    color: var(--color-title);
}
.recommend .reco1 .wrapper .left .tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px 0;
}
.recommend .reco1 .wrapper .left .tags span {
    background-color: var(--color-main);
    color: #fff;
    border-radius: 20px;
    padding: 8px 16px;
}
.recommend .reco1 .wrapper .swiper {
    width: 934px;
    overflow: hidden;
}
.recommend .reco1 .wrapper .swiper .swiper-slide {
    width: 214px;
}
.recommend .reco1 .wrapper .swiper-slide h4 {
    margin: 20px 0 16px 0;
    color: #1d1d1d;
    font-size: 24px;
    font-weight: 700;
}
.recommend .reco2 .wrapper {
    margin-top: 40px;
}
.recommend .reco2 .wrapper .section_head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.recommend .reco2 .wrapper .section_head .tab_btns {
    display: flex;
    gap: 0 8px;
}
.recommend .reco2 .wrapper .section_head a {
    border: 1px solid var(--color-title);
    border-radius: 20px;
    padding: 8px 16px;
}
.recommend .reco2 .wrapper .section_head .tab_btns button {
    font-size: 24px;
    font-family: 'Lib';
    color: var(--color-title);
    border: 1px solid var(--color-title);
    line-height: 1;
    border-radius: 5px;
    padding: 8px 16px;
}
.recommend .reco2 .wrapper .section_head .tab_btns button.active {
    color: #fff;
    background-color: var(--color-main);
    border: 0px;
}
.recommend .reco2 .wrapper .swiper {
    width: 100%;
}
.recommend .reco2 .wrapper .swiper .swiper-slide {
    width: 214px;
}
.recommend .reco2 .wrapper .swiper-slide h4 {
    margin: 20px 0 16px 0;
    color: #1d1d1d;
    font-size: 24px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 1;      /* 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media screen and (max-width:768px){
    .recommend {
        padding: 110px 0 80px 0;
    }
    .recommend .reco1 .wrapper {
        display: block;
    }
    .recommend .reco1 .wrapper .swiper {
        width: 100%;
        overflow: hidden;
    }
    .recommend .reco1 .wrapper .left {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .recommend .reco1 .wrapper .left h3 br {
        display: none;
    }
    .recommend .reco1 .wrapper .left .tags {
        display: none;
    }
    .recommend .reco1 .wrapper .swiper-slide h4,
    .recommend .reco2 .wrapper .swiper-slide h4 {
        margin: 10px 0 8px 0;
        font-size: 20px;
    }
    .recommend .reco2 .wrapper .section_head a {
        width: 40px;
        height: 40px;
        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%231D1D1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5V19' stroke='%231D1D1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
    }
    .recommend .reco2 .wrapper .section_head a span {
        display: none;
    }
}
/********************* recommend *********************/
.service-menu {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: hidden;
}
.service-menu .btns::before {
    width: 626.67px;
    height: 174px;
}
.service-menu .btns::after {
    width: 616px;
    height: 184px;
}
.service-menu .btns::before,
.service-menu .btns::after {
    content: "";
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}
.service-menu .btns::before {
    right: 110%;
    background-image: url("../images/books_left.png");
}
.service-menu .btns::after {
    left: 110%;
    background-image: url("../images/books_right.png");
}
.service-menu .wrapper {
    display: flex;
    justify-content: center;
}
.service-menu .btns {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 32px 0 32px 0;
    gap: 20px;
}
.service-menu .btns li a {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    color: #fff;
    background-color: var(--color-main);
    display: flex;
    flex-direction: column; /* 위 아이콘, 아래 텍스트 */
    justify-content: flex-end; /* 텍스트 아래 정렬 */
    align-items: center; /* 수평 가운데 */
    position: relative;
    padding-bottom: 16px;
}
.service-menu .btns li a:hover {
    background-color: #00559F;
}
.service-menu .btns li a::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%); /* 수평 가운데 정렬 */
    top: 20px;
    width: 48px;
    height: 48px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.service-menu .btns .btn_1 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 4H14C11.7909 4 10 5.79086 10 8V40C10 42.2091 11.7909 44 14 44H34C36.2091 44 38 42.2091 38 40V8C38 5.79086 36.2091 4 34 4Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 36H24.02' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.service-menu .btns .btn_2 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36 4H12C9.79086 4 8 5.79086 8 8V40C8 42.2091 9.79086 44 12 44H36C38.2091 44 40 42.2091 40 40V8C40 5.79086 38.2091 4 36 4Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 43.9999V30.8599' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 22H24.02' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 14H24.02' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 30.8599V43.9999' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 32C28.269 30.7018 26.1637 30 24 30C21.8363 30 19.731 30.7018 18 32' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 22H32.02' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 14H32.02' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 22H16.02' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 14H16.02' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.service-menu .btns .btn_3 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10H8C5.79086 10 4 11.7909 4 14V34C4 36.2091 5.79086 38 8 38H40C42.2091 38 44 36.2091 44 34V14C44 11.7909 42.2091 10 40 10Z' fill='%230088FF' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 20H36Z' fill='%230088FF'/%3E%3Cpath d='M32 20H36' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 28H36Z' fill='%230088FF'/%3E%3Cpath d='M32 28H36' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.3398 30.0001C12.7521 28.8282 13.518 27.8131 14.5319 27.095C15.5457 26.3769 16.7575 25.9912 17.9998 25.9912C19.2422 25.9912 20.454 26.3769 21.4678 27.095C22.4816 27.8131 23.2476 28.8282 23.6598 30.0001' fill='%230088FF'/%3E%3Cpath d='M12.3398 30.0001C12.7521 28.8282 13.518 27.8131 14.5319 27.095C15.5457 26.3769 16.7575 25.9912 17.9998 25.9912C19.2422 25.9912 20.454 26.3769 21.4678 27.095C22.4816 27.8131 23.2476 28.8282 23.6598 30.0001' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 26C20.2091 26 22 24.2091 22 22C22 19.7909 20.2091 18 18 18C15.7909 18 14 19.7909 14 22C14 24.2091 15.7909 26 18 26Z' fill='%230088FF' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.service-menu .btns .btn_4 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38 28C40.98 25.08 44 21.58 44 17C44 14.0826 42.8411 11.2847 40.7782 9.22183C38.7153 7.15893 35.9174 6 33 6C29.48 6 27 7 24 10C21 7 18.52 6 15 6C12.0826 6 9.28473 7.15893 7.22183 9.22183C5.15893 11.2847 4 14.0826 4 17C4 21.6 7 25.1 10 28L24 42L38 28Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.service-menu .btns .btn_5 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_59_708)'%3E%3Cpath d='M30 4H12C10.9391 4 9.92172 4.42143 9.17157 5.17157C8.42143 5.92172 8 6.93913 8 8V40C8 41.0609 8.42143 42.0783 9.17157 42.8284C9.92172 43.5786 10.9391 44 12 44H36C37.0609 44 38.0783 43.5786 38.8284 42.8284C39.5786 42.0783 40 41.0609 40 40V14L30 4Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 4V12C28 13.0609 28.4214 14.0783 29.1716 14.8284C29.9217 15.5786 30.9391 16 32 16H40' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M30 4H12C10.9391 4 9.92172 4.42143 9.17157 5.17157C8.42143 5.92172 8 6.93913 8 8V40C8 41.0609 8.42143 42.0783 9.17157 42.8284C9.92172 43.5786 10.9391 44 12 44H36C37.0609 44 38.0783 43.5786 38.8284 42.8284C39.5786 42.0783 40 41.0609 40 40V14L30 4Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 18H16H20Z' fill='white'/%3E%3Cpath d='M20 18H16' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 26H16H32Z' fill='white'/%3E%3Cpath d='M32 26H16' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M32 34H16H32Z' fill='white'/%3E%3Cpath d='M32 34H16' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_59_708'%3E%3Crect width='48' height='48' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.service-menu .btns .btn_6 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 8H8C5.79086 8 4 9.79086 4 12V36C4 38.2091 5.79086 40 8 40H40C42.2091 40 44 38.2091 44 36V12C44 9.79086 42.2091 8 40 8Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44 14L26.06 25.4C25.4425 25.7869 24.7286 25.992 24 25.992C23.2714 25.992 22.5575 25.7869 21.94 25.4L4 14' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
@media screen and (max-width:1024px){
    .service-menu .btns::before,
    .service-menu .btns::after {
        width: 0;
        height: 0;
    }
    .service-menu .btns {
        gap: 20px;
    }
    .service-menu .btns li {
        width: calc(33.333% - 20px);  /* 한 줄에 3개 */
    }
    .service-menu .btns li a {
        width: 100%;
    }
}
@media screen and (max-width:768px){
    .service-menu .btns {
        gap: 20px;
    }
    .service-menu .btns li {
        width: calc(33.333% - 20px);  /* 한 줄에 3개 */
    }
    .service-menu .btns li a {
        width: 100%;
        height: 130px;
    }
}
/********************* noti *********************/
.noti {
    background: url(../images/noti_bg.jpg) no-repeat center center / cover;
    color: #fff;
    padding: 120px 0;
}
.noti .wrapper {
    display: flex; /* tit-inner 좌우배치 */
    justify-content: space-between;
}
.noti .tit h2 {
    font-family: 'Lib';
    font-size: var(--fontsize-title);
    line-height: 1.3;
    margin: 0 0 20px 0;
}
.noti .inner {
    display: flex; /* notice - service 좌우 배치 */
    align-items: flex-end; 
    gap: 0 12px;
}
.noti .inner .notice {
    backdrop-filter: blur(10px);
    background-color: rgba(1, 32, 63, 0.6);
    width: 548px;
    height: 383px;
    border-radius: 10px;
    padding: 42px 40px 0 40px; 
    /* 아래여백은 절대 안줌 - 높이가 있으므로 */
    position: relative; /* more 정렬의 기준 */
}
.noti .inner .notice h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}
.noti .inner .notice ul {
    margin: 20px 0 0 0;
}
.noti .inner .notice ul li a {
    display: flex; /* h4-span 좌우배치 */
    justify-content: space-between;
    padding: 12px 0 12px 0;
}
.noti .inner .notice ul li a h4 {
    width: calc(100% - 105px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.noti .inner .notice ul li a span {
    color: rgba(255, 255, 255, 0.8);
}
.noti .inner .notice .more {
    position: absolute; /* notice를 기준으로 정렬 */
    right: 40px;
    top: 42px;
    color: #fff;
}
/* notice over 스타일 */
.noti .inner .notice:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: #1d1d1d;
}
.noti .inner .notice:hover ul li a span {
    color: #666;
}
.noti .inner .notice:hover .more {
    color: var(--color-title);
}
.noti .inner .notice ul li a:hover h4 {
    color: var(--color-main);
    font-weight: 700;
}
.noti .inner .notice ul li a:hover span {
    color: var(--color-main);
}
.noti .inner .service {
    width: 312px;
}
.noti .inner .service ul {
    display: flex; /* li를 좌우로 */
    flex-wrap: wrap; /* 2줄이상 허용 */
    gap: 12px 12px;
}
.noti .inner .service ul li {
    width: calc(50% - 6px);
    /* 100%/한줄에 나오는 li갯수 2 = 100/2 = 50%
       한줄여백의합 12px / 한줄에 나오는 li갯수 2 = 6  */
}
.noti .inner .service ul li a {
    height: 150px;
    backdrop-filter: blur(10px);
    background-color: rgba(1, 32, 63, 0.6);
    border-radius: 10px;
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    padding: 28px 0 0 27px;
    position: relative; /* after 정렬의 기준 */
}
.noti .inner .service ul li a::after {
    content: "";
    position: absolute; /* a를 기준으로 정렬 */
    left: 15px;
    bottom: 20px;
    width: 45px;
    height: 45px;
    background-position: center center;
    background-repeat: no-repeat;
}
.noti .inner .service ul li.icon1 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.333 10.3331C13.3333 10.1555 13.381 9.98116 13.471 9.82805C13.561 9.67495 13.6902 9.54859 13.8453 9.46196C14.0003 9.37533 14.1757 9.33157 14.3533 9.33517C14.5308 9.33876 14.7043 9.38959 14.8557 9.48242L19.741 12.4811C19.8866 12.5706 20.0069 12.6959 20.0903 12.845C20.1737 12.9942 20.2175 13.1622 20.2175 13.3331C20.2175 13.504 20.1737 13.672 20.0903 13.8212C20.0069 13.9703 19.8866 14.0956 19.741 14.1851L14.8557 17.1851C14.7041 17.278 14.5304 17.3289 14.3526 17.3324C14.1748 17.3358 13.9993 17.2918 13.8441 17.2049C13.689 17.118 13.5598 16.9912 13.47 16.8377C13.3802 16.6843 13.3329 16.5096 13.333 16.3318V10.3331Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 22.6665V27.9998' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.667 28H21.3337' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26.667 4H5.33366C3.8609 4 2.66699 5.19391 2.66699 6.66667V20C2.66699 21.4728 3.8609 22.6667 5.33366 22.6667H26.667C28.1397 22.6667 29.3337 21.4728 29.3337 20V6.66667C29.3337 5.19391 28.1397 4 26.667 4Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.noti .inner .service ul li.icon2 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3337 22.6667C6.66699 18.6667 4.00033 13.3333 4.00033 10.6667C4.00033 9.95942 4.28128 9.28115 4.78137 8.78105C5.28147 8.28095 5.95975 8 6.66699 8C7.37424 8 8.05251 8.28095 8.55261 8.78105C9.05271 9.28115 9.33366 9.95942 9.33366 10.6667C9.33366 14 2.66699 14 2.66699 18.6667C2.66699 20.9333 4.40033 22.6667 6.66699 22.6667C10.4003 22.6667 13.3337 19.7333 13.3337 16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.3337 22.6667C22.667 18.6667 20.0003 13.3333 20.0003 10.6667C20.0003 9.95942 20.2813 9.28115 20.7814 8.78105C21.2815 8.28095 21.9597 8 22.667 8C23.3742 8 24.0525 8.28095 24.5526 8.78105C25.0527 9.28115 25.3337 9.95942 25.3337 10.6667C25.3337 14 18.667 14 18.667 18.6667C18.667 20.9333 20.4003 22.6667 22.667 22.6667C26.4003 22.6667 29.3337 19.7333 29.3337 16' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.noti .inner .service ul li.icon3 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.3337 18.6667C27.3203 16.72 29.3337 14.3867 29.3337 11.3333C29.3337 9.38841 28.561 7.52315 27.1858 6.14788C25.8105 4.77262 23.9452 4 22.0003 4C19.6537 4 18.0003 4.66667 16.0003 6.66667C14.0003 4.66667 12.347 4 10.0003 4C8.0554 4 6.19014 4.77262 4.81488 6.14788C3.43961 7.52315 2.66699 9.38841 2.66699 11.3333C2.66699 14.4 4.66699 16.7333 6.66699 18.6667L16.0003 28L25.3337 18.6667Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.noti .inner .service ul li.icon4 a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_59_797' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='32' height='32'%3E%3Crect width='32' height='32' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_59_797)'%3E%3Cpath d='M8.81316 27.6178L9.93849 25.0868C9.59338 24.8339 9.26138 24.578 8.94249 24.3191C8.62361 24.06 8.31805 23.7758 8.02583 23.4665C7.86516 23.5331 7.70361 23.5831 7.54116 23.6165C7.37872 23.6498 7.21038 23.6665 7.03616 23.6665C6.35416 23.6665 5.76905 23.4225 5.28083 22.9345C4.79283 22.4465 4.54883 21.8614 4.54883 21.1791C4.54883 20.7776 4.63694 20.4041 4.81316 20.0588C4.98916 19.7135 5.23094 19.4271 5.53849 19.1998C5.36072 18.6887 5.23427 18.172 5.15916 17.6498C5.08405 17.1276 5.04649 16.5776 5.04649 15.9998C5.04649 15.422 5.08405 14.872 5.15916 14.3498C5.23427 13.8276 5.36072 13.3109 5.53849 12.7998C5.23094 12.5725 4.98916 12.2861 4.81316 11.9408C4.63694 11.5955 4.54883 11.222 4.54883 10.8205C4.54883 10.1383 4.79283 9.55314 5.28083 9.06514C5.76905 8.57714 6.35416 8.33314 7.03616 8.33314C7.21038 8.33314 7.37872 8.34981 7.54116 8.38314C7.70361 8.41648 7.86516 8.46648 8.02583 8.53314C8.75916 7.73314 9.59383 7.06436 10.5298 6.52681C11.4656 5.98925 12.4668 5.59136 13.5335 5.33314C13.6275 4.71781 13.9117 4.2007 14.3862 3.78181C14.8604 3.36314 15.4053 3.15381 16.0208 3.15381C16.6362 3.15381 17.1809 3.36236 17.6552 3.77948C18.1296 4.19636 18.4138 4.7057 18.5078 5.30747C19.5916 5.5657 20.6014 5.96014 21.5372 6.49081C22.4732 7.0217 23.3078 7.68025 24.0412 8.46648C24.2018 8.39981 24.3557 8.35414 24.5028 8.32948C24.6497 8.30459 24.8035 8.29214 24.9642 8.29214C25.6462 8.29214 26.2313 8.53614 26.7195 9.02414C27.2075 9.51214 27.4515 10.0973 27.4515 10.7795C27.4515 11.181 27.3668 11.5476 27.1975 11.8791C27.0284 12.2109 26.7968 12.4905 26.5028 12.7178C26.6806 13.2425 26.8071 13.7763 26.8822 14.3191C26.9575 14.8618 26.9952 15.422 26.9952 15.9998C26.9952 16.5776 26.9575 17.1387 26.8822 17.6831C26.8071 18.2276 26.6806 18.7554 26.5028 19.2665C26.7882 19.4938 27.0134 19.769 27.1785 20.0921C27.3434 20.4153 27.4258 20.7776 27.4258 21.1791C27.4258 21.8614 27.1818 22.4465 26.6938 22.9345C26.2058 23.4225 25.6207 23.6665 24.9385 23.6665C24.7778 23.6665 24.6241 23.6519 24.4772 23.6228C24.33 23.5937 24.1762 23.5501 24.0155 23.4921C23.7233 23.8015 23.4254 24.0925 23.1218 24.3651C22.8185 24.6378 22.4788 24.9006 22.1028 25.1535L23.1745 27.6381C23.3096 27.9306 23.2883 28.205 23.1105 28.4615C22.9327 28.7177 22.6865 28.8458 22.3718 28.8458C22.1874 28.8458 22.0255 28.7963 21.8862 28.6971C21.7468 28.598 21.6413 28.4698 21.5695 28.3125L20.5642 25.9895C20.2188 26.1486 19.8804 26.2845 19.5488 26.3971C19.2173 26.51 18.8703 26.6084 18.5078 26.6921C18.4138 27.2939 18.1296 27.8033 17.6552 28.2201C17.1809 28.6373 16.6362 28.8458 16.0208 28.8458C15.4053 28.8458 14.8604 28.6365 14.3862 28.2178C13.9117 27.7989 13.6275 27.2818 13.5335 26.6665C13.1575 26.5827 12.8003 26.4844 12.4618 26.3715C12.1234 26.2588 11.7815 26.1229 11.4362 25.9638L10.4052 28.3331C10.3334 28.4905 10.2245 28.6153 10.0785 28.7075C9.93227 28.7997 9.77372 28.8458 9.60283 28.8458C9.28816 28.8458 9.04416 28.7143 8.87083 28.4511C8.69727 28.1878 8.67805 27.91 8.81316 27.6178ZM10.5182 23.6871L12.8668 18.4305C12.5984 18.0903 12.3903 17.7143 12.2425 17.3025C12.0947 16.8905 12.0208 16.4563 12.0208 15.9998C12.0208 14.9127 12.4156 13.9743 13.2052 13.1845C13.9949 12.3947 14.9335 11.9998 16.0208 11.9998C17.1079 11.9998 18.0464 12.3947 18.8362 13.1845C19.6257 13.9743 20.0205 14.9127 20.0205 15.9998C20.0205 16.4563 19.9389 16.8994 19.7758 17.3291C19.6125 17.7591 19.3898 18.1485 19.1078 18.4971L21.4565 23.7128C21.7078 23.5264 21.9493 23.3396 22.1808 23.1525C22.4126 22.9651 22.6344 22.7501 22.8462 22.5075C22.701 22.3213 22.5989 22.114 22.5398 21.8858C22.4809 21.6576 22.4515 21.422 22.4515 21.1791C22.4515 20.468 22.7152 19.8677 23.2425 19.3781C23.7698 18.8884 24.3763 18.6683 25.0618 18.7178C25.1952 18.2734 25.2994 17.8301 25.3745 17.3881C25.4498 16.9464 25.4875 16.4836 25.4875 15.9998C25.4875 15.516 25.4498 15.0464 25.3745 14.5908C25.2994 14.1353 25.1952 13.6853 25.0618 13.2408C24.3763 13.2904 23.7741 13.0703 23.2552 12.5805C22.7365 12.0909 22.4772 11.4906 22.4772 10.7795C22.4772 10.5537 22.5156 10.3336 22.5925 10.1191C22.6694 9.90448 22.7625 9.70403 22.8718 9.51781C22.2274 8.84759 21.5099 8.28814 20.7195 7.83948C19.9288 7.39081 19.0874 7.04425 18.1952 6.79981C17.9934 7.20314 17.7015 7.52536 17.3195 7.76648C16.9373 8.00759 16.5044 8.12814 16.0208 8.12814C15.5371 8.12814 15.1041 8.00759 14.7218 7.76648C14.3398 7.52536 14.0479 7.20314 13.8462 6.79981C12.9266 7.04425 12.0715 7.39425 11.2808 7.84981C10.4904 8.30536 9.77294 8.87503 9.12849 9.55881C9.23783 9.74503 9.33094 9.94548 9.40783 10.1601C9.48472 10.3746 9.52316 10.5947 9.52316 10.8205C9.52316 11.54 9.26638 12.137 8.75283 12.6115C8.23905 13.0857 7.63949 13.3091 6.95416 13.2818C6.82083 13.7263 6.72083 14.1695 6.65416 14.6115C6.58749 15.0533 6.55416 15.516 6.55416 15.9998C6.55416 16.4836 6.58749 16.9464 6.65416 17.3881C6.72083 17.8301 6.82083 18.2734 6.95416 18.7178C7.62238 18.6683 8.21761 18.8861 8.73983 19.3715C9.26205 19.857 9.52316 20.4596 9.52316 21.1791C9.52316 21.422 9.49372 21.6465 9.43483 21.8525C9.37572 22.0585 9.27361 22.2546 9.12849 22.4408C9.34027 22.6835 9.56205 22.901 9.79383 23.0935C10.0254 23.2857 10.2668 23.4836 10.5182 23.6871ZM12.0565 24.5638C12.3352 24.7007 12.6236 24.8199 12.9218 24.9215C13.2203 25.0233 13.5284 25.116 13.8462 25.1998C14.0479 24.7965 14.3398 24.4743 14.7218 24.2331C15.1041 23.992 15.5371 23.8715 16.0208 23.8715C16.5044 23.8715 16.9373 23.992 17.3195 24.2331C17.7015 24.4743 17.9934 24.7965 18.1952 25.1998C18.5045 25.116 18.7993 25.0276 19.0795 24.9345C19.3599 24.8414 19.6395 24.7264 19.9182 24.5895L17.7028 19.6151C17.4446 19.7347 17.1775 19.8287 16.9015 19.8971C16.6255 19.9656 16.3319 19.9998 16.0208 19.9998C15.6959 19.9998 15.3877 19.9621 15.0962 19.8868C14.8048 19.8117 14.5301 19.6989 14.2718 19.5485L12.0565 24.5638ZM16.0208 17.9998C16.5542 17.9998 17.0208 17.8109 17.4208 17.4331C17.8208 17.0554 18.0208 16.5776 18.0208 15.9998C18.0208 15.4665 17.8208 14.9998 17.4208 14.5998C17.0208 14.1998 16.5542 13.9998 16.0208 13.9998C15.443 13.9998 14.9653 14.1998 14.5875 14.5998C14.2097 14.9998 14.0208 15.4665 14.0208 15.9998C14.0208 16.5776 14.2097 17.0554 14.5875 17.4331C14.9653 17.8109 15.443 17.9998 16.0208 17.9998Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.noti .inner .service ul li a:hover {
    background-color: var(--color-main);
}
@media screen and (max-width:1140px){
    .noti {
        padding: 100px 0;
    }
    .noti .wrapper {
        display: block; /* tit-inner 좌우배치 */
    }
    .noti .tit h2 {
        margin: 0 0 20px 0;
    }
    .noti .tit p {
        display: none;
    }
    .noti .inner {
        display: flex; /* notice - service 좌우 배치 */
        align-items: flex-end; 
        gap: 0 6px;
    }
    .noti .inner .notice {
        width: calc(100% - 320px);
        min-width: 400px;
    }
    .noti .inner .notice ul {
        margin: 20px 0 0 0;
    }
    .noti .inner .notice ul li a {
        padding: 12px 0 12px 0;
    }
    .noti .inner .notice ul li a h4 {
        width: 100%;
    }
    .noti .inner .notice ul li a span {
        display: none;
    }
    .noti .inner .service ul {
        gap: 6px 6px;
    }
    .noti .inner .service ul li {
        min-width: 120px;
    }
    .noti .inner .service ul li a {
        font-size: 20px;
    }
}
@media screen and (max-width:768px){
    .noti {
        padding: 80px 0;
    }
    .noti .wrapper {
        display: block; /* tit-inner 좌우배치 */
    }
    .noti .tit h2 {
        margin: 0 0 20px 0;
    }
    .noti .tit p {
        display: none;
    }
    .noti .inner {
        display: block; /* notice - service 좌우 배치 */
        align-items: flex-end; 
        gap: 0 12px;
    }
    .noti .inner .notice {
        width: 100%;
        height: 340px;
        position: relative; /* more 정렬의 기준 */
    }
    .noti .inner .notice h3 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
    }
    

    .noti .inner .notice ul li a {
        padding: 8px 0 8px 0;
    }
    .noti .inner .notice ul li a h4 {
        width: calc(100% - 105px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .noti .inner .notice ul li a span {
        display: block;
    }
    .noti .inner .service {
        width: 100%;
        margin-top: 12px;
    }
    .noti .inner .service ul {
        gap: 12px 12px;
    }
    .noti .inner .service ul li {
        width: calc(50% - 6px);
        /* 100%/한줄에 나오는 li갯수 2 = 100/2 = 50%
           한줄여백의합 12px / 한줄에 나오는 li갯수 2 = 6  */
    }
    .noti .inner .service ul li a {
        font-size: 20px;
    }
}@media screen and (max-width:450px){
    .noti .inner .notice ul li a h4 {
        width: 100%;
    }
    .noti .inner .notice {
        width: 100%;
        min-width: 0;
    }
    .noti .inner .notice ul li a span {
        display: none;
    }
}
/********************* noti *********************/
/********************* page *********************/
.page {
    padding: 120px 0 120px 0;
}
.page .wrapper {
    position: relative; /* ctrl_btn, more 정렬의 기준 */
}
.page .wrapper .tit h2 {
    font-family: 'Lib';
    font-size: var(--fontsize-title);
    color: var(--color-title);
}
.page .list {
    margin: 20px 0 0 0;
}
.page .list .swiper-slide a {
    display: block;
}
.page .list .swiper-slide a .photo {
    overflow: hidden;
    height: 297px;
}
.page .list .swiper-slide.long a .photo {
    height: 426px; 
}
.page .list .swiper-slide a .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page .list .swiper-slide a .txt h3 {
    font-size: 24px;
    color: var(--color-title);
    font-weight: 700;
    margin: 20px 0 0 0;
    /* 무조건 2줄  제한*/
    line-height: 1.3;
    height: 2.6em; /* 행간*2 = 단위는 em */
    overflow: hidden;
}
.page .list .swiper-slide a .txt p {
    margin: 16px 0 0 0;
    /* 무조건 5줄 제한 */
    line-height: 1.3;
    height: 6.5em;
    overflow: hidden;
}
.page .list .swiper-slide.long a .txt p {
    display: none;
}
.page .list .swiper-slide a .txt span {
    display: inline-block;
    margin: 21px 0 0 0;
    color: #6C4B44;
    padding: 0 30px 0 0;
    position: relative;
}
.page .list .swiper-slide a .txt span::after {
    content: "";
    position: absolute;
    right: 0;
    top: 4px;
    width: 15px;
    height: 15px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9327 7.07422L6.85084 0.992354L7.60001 0.249217L14.95 7.59922L7.60001 14.9492L6.85084 14.2061L12.9327 8.12422L0.250012 8.12422L0.250012 7.07422L12.9327 7.07422Z' fill='%236C4B44'/%3E%3C/svg%3E%0A");
}
.page .more {
    position: absolute;
    right: 0;
    top: 12px;
}
.page .more a {
    display: block;
    border: 1px solid var(--color-title);
    border-radius: 20px;
    padding: 8px 16px;
}
@media screen and (max-width:768px){
                .page {
                    padding: 80px 0 80px 0;
                }
                .page .list .swiper-slide {
                    width: 200px;
                }
                .page .list .swiper-slide a .photo {
                    height: 200px;
                }
                .page .list .swiper-slide.long a .photo {
                    height: 200px; 
                }
                .page .list .swiper-slide a .txt h3 {
                    font-size: 20px;
                    margin: 16px 0 0 0;
                }
                .page .list .swiper-slide a .txt p {
                    margin: 10px 0 0 0;
                    /* 무조건 5줄 제한 -> 2줄 */
                    height: 2.6em; /* 행간*2 = 단위는 em */
                }
                .page .list .swiper-slide.long a .txt p {
                    display: block;
                }
                .page .list .swiper-slide a .txt span {
                    display: none;
                }
                .page .more {
                    top: 0;
                    border: 1px solid var(--color-title);
                    border-radius: 20px;
                    width: 40px;
                    height: 40px;
                    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%231D1D1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5V19' stroke='%231D1D1D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
                    background-position: center;
                    background-repeat: no-repeat;
                }
                .page .more a {
                    display: none;
                }
}/* @media */
/********************* page *********************/
/********************* map *********************/

.map {
    padding: 0 0 120px 0;
}
.map .tit .wrapper h2 {
    font-family: 'Lib';
    font-size: var(--fontsize-title);
    color: var(--color-title);
}
.map .list {
    margin: 20px 0 0 0;
}
.map .list ul {
    display: flex;
    gap: 0 1px;
}
.map .list ul li {
    overflow: hidden;
    width: 25%;
    height: 600px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../images/map01.jpg);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 1.5% 62px 1.5%;
    position: relative; /* before 정렬의 기준 */
    transition: width 0.5s;
}
.map .list ul li.map02 {
    background-image: url(../images/map02.jpg);
}
.map .list ul li.map03 {
    background-image: url(../images/map03.jpg);
}
.map .list ul li.map04 {
    background-image: url(../images/map04.jpg);
}
.map .list ul li::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.map .list ul li .txt {
    position: relative;
    z-index: 10; /* before 보다 위에 배치하기 위해 */
}
.map .list ul li .txt h3 {
    font-family: 'Lib';
    font-size: 3.2rem;
    line-height: 1.3;
    margin: 11px 0 0 0;
    white-space: nowrap; /* 줄바꿈 금지 */
}

@media screen and (min-width:1025px){ /* 1025px이상 - pc버전일때 */
    .map .list ul li.active {
        width: 50%;
    }
    .map .list ul li .txt {
        transform: translateY(115px);
        transition: transform 0.5s;
    }
    .map .list ul li.active .txt {
        transform: translateY(0);
    }
    .map .list ul li .txt h3 {
        transition: font-size 0.5s;
    }
    .map .list ul li.active .txt h3 {
        font-size: 40px;
    }
    .map .list ul li .txt p {
        white-space: nowrap; /* 줄바꿈 금지 */
        margin: 8px 0 16px 0;
        opacity: 0;
    }
    .map .list ul li .txt a {
        opacity: 0;
        border: 1px solid #fff;
        border-radius: 20px;
        padding: 8px 16px;
        display: inline-block;
    }
    .map .list ul li.active .txt p {
        opacity: 1;
    }
    .map .list ul li.active .txt a {
        opacity: 1;
    }
    .map .list ul li.active .txt a:hover {
        background-color: #fff;
        color: var(--color-title);
    }
    .map .list.over ul li:not(.active) {
        color: rgba(255, 255, 255, 0.8);
    }
    .map .list.over ul li:not(.active)::before {
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }
}/*@media*/

@media screen and (max-width:1024px){
    .map .list {
        overflow-x: auto; /* 가로스크롤 허용 */
    }
    .map .list ul {
        gap: 0 8px;
        width: 1224px;
        margin: 0 var(--wrapper-margin) 0 var(--wrapper-margin);
        /*
            li의 넓이 (300px) * 4 = 1200px
            li 사이의 여백 (8px) * 3 = 24px
            1000 + 24 = 1224px
        */
    }
    .map .list ul li {
        width: 300px;
        height: 450px;
        padding: 0 20px 41px 20px;
        border-radius: 10px;
    }
    .map .list ul li .txt h3 {
        font-size: 2.7rem;
        margin: 7px 0 0 0;
        white-space: wrap; /* 줄바꿈 허용 */
    }
    .map .list ul li .txt p {
        display: none;
    }
    .map .list ul li .txt a {
        position: absolute; /* txt를 기준으로 정렬 */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .map .list ul li .txt a span {
        display: none; /* 글자 숨기기 */
    }
}/*@media*/

@media screen and (max-width:768px){
    .map {
        padding: 0 0 80px 0;
    }
    .map .list {
        margin: 30px 0 0 0;
    }
    .map .list ul {
        width: 1024px;
        /*
            li의 넓이 (250px) * 4 = 1000px
            li 사이의 여백 (8px) * 3 = 24px
            1000 + 24 = 1024px
        */
    }
    .map .list ul li {
        width: 250px;
        height: 335px;
    }
    .map .list ul li .txt h3 {
        font-size: 2.2rem;
    }
}/*@media*/
/********************* map *********************/
/********************* community *********************/
.community {
    padding: 0 0 120px 0;
}
.community .tit h2 {
    font-family: 'Lib';
    font-size: var(--fontsize-title);
    line-height: 1.3;
    margin: 0 0 20px 0;
    color: var(--color-title);
}
.community .list {
    display: flex; /* group을 좌우로배치 */
    justify-content: space-between; /* 양쪽끝에 배치 */
}
.community .list .group {
    width: calc(50% - 6px);
    /*
        몇개로 분할 : 2개  = 100/2 = 50%
        사이 여백의 총합 / 분할하는 갯수로 나눔 = 12 / 2 = 6px
    */
}
.community .list .group ul {
    display: flex; /* li를 좌우에 배치 */
    flex-wrap: wrap; /* li가 2줄로 나타나는 걸 허락 */
    gap: 12px;
}
.community .list .group ul li.m {
    width: calc(50% - 6px);
}
.community .list .group ul li a {
    border-radius: 20px;
}
.community .list .group ul li a strong {
    margin: 7px 0 0 44px;
    position: relative;
}
.community .list .group ul li a strong::before {
    content: "";
    position: absolute;
    left: -44px;
    top: -7px;
    width: 36px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
}
.community .list .group ul li a .lo::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 15C30 22.4895 21.6915 30.2895 18.9015 32.6985C18.6416 32.8939 18.3252 32.9996 18 32.9996C17.6748 32.9996 17.3584 32.8939 17.0985 32.6985C14.3085 30.2895 6 22.4895 6 15C6 11.8174 7.26428 8.76516 9.51472 6.51472C11.7652 4.26428 14.8174 3 18 3C21.1826 3 24.2348 4.26428 26.4853 6.51472C28.7357 8.76516 30 11.8174 30 15Z' fill='white' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 19.5C20.4853 19.5 22.5 17.4853 22.5 15C22.5 12.5147 20.4853 10.5 18 10.5C15.5147 10.5 13.5 12.5147 13.5 15C13.5 17.4853 15.5147 19.5 18 19.5Z' fill='white' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.community .list .group ul li a .gu::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 22.5C6 22.5 7.5 21 12 21C16.5 21 19.5 24 24 24C28.5 24 30 22.5 30 22.5V4.5C30 4.5 28.5 6 24 6C19.5 6 16.5 3 12 3C7.5 3 6 4.5 6 4.5V22.5Z' fill='white' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 33V22.5' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.community .list .group ul li a .qu::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 27C4.10218 27 3.72064 26.842 3.43934 26.5607C3.15804 26.2794 3 25.8978 3 25.5V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H12C13.5913 4.5 15.1174 5.13214 16.2426 6.25736C17.3679 7.38258 18 8.9087 18 10.5C18 8.9087 18.6321 7.38258 19.7574 6.25736C20.8826 5.13214 22.4087 4.5 24 4.5H31.5C31.8978 4.5 32.2794 4.65804 32.5607 4.93934C32.842 5.22064 33 5.60218 33 6V25.5C33 25.8978 32.842 26.2794 32.5607 26.5607C32.2794 26.842 31.8978 27 31.5 27H22.5C21.3065 27 20.1619 27.4741 19.318 28.318C18.4741 29.1619 18 30.3065 18 31.5C18 30.3065 17.5259 29.1619 16.682 28.318C15.8381 27.4741 14.6935 27 13.5 27H4.5Z' fill='white' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 10.5V31.5' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.community .list .group ul li a .sc::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.5 6H7.5C5.84315 6 4.5 7.34315 4.5 9V30C4.5 31.6569 5.84315 33 7.5 33H28.5C30.1569 33 31.5 31.6569 31.5 30V9C31.5 7.34315 30.1569 6 28.5 6Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 21H18V27' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M24 3V9' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 15H31.5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 3V9' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.community .list .group ul li a .bo::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 29.25V6.75C6 5.75544 6.39509 4.80161 7.09835 4.09835C7.80161 3.39509 8.75544 3 9.75 3H28.5C28.8978 3 29.2794 3.15804 29.5607 3.43934C29.842 3.72064 30 4.10218 30 4.5V31.5C30 31.8978 29.842 32.2794 29.5607 32.5607C29.2794 32.842 28.8978 33 28.5 33H9.75C8.75544 33 7.80161 32.6049 7.09835 31.9016C6.39509 31.1984 6 30.2446 6 29.25C6 28.2554 6.39509 27.3016 7.09835 26.5984C7.80161 25.8951 8.75544 25.5 9.75 25.5H30' fill='white'/%3E%3Cpath d='M6 29.25V6.75C6 5.75544 6.39509 4.80161 7.09835 4.09835C7.80161 3.39509 8.75544 3 9.75 3H28.5C28.8978 3 29.2794 3.15804 29.5607 3.43934C29.842 3.72064 30 4.10218 30 4.5V31.5C30 31.8978 29.842 32.2794 29.5607 32.5607C29.2794 32.842 28.8978 33 28.5 33H9.75C8.75544 33 7.80161 32.6049 7.09835 31.9017C6.39509 31.1984 6 30.2446 6 29.25ZM6 29.25C6 28.2554 6.39509 27.3016 7.09835 26.5983C7.80161 25.8951 8.75544 25.5 9.75 25.5H30' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.community .list .group ul li a .ar::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 30C30.7956 30 31.5587 29.6839 32.1213 29.1213C32.6839 28.5587 33 27.7956 33 27V12C33 11.2044 32.6839 10.4413 32.1213 9.87868C31.5587 9.31607 30.7956 9 30 9H18.15C17.6483 9.00492 17.1533 8.88392 16.7105 8.64807C16.2676 8.41222 15.8909 8.06906 15.615 7.65L14.4 5.85C14.1268 5.4352 13.755 5.09472 13.3177 4.85909C12.8805 4.62347 12.3917 4.50008 11.895 4.5H6C5.20435 4.5 4.44129 4.81607 3.87868 5.37868C3.31607 5.94129 3 6.70435 3 7.5V27C3 27.7956 3.31607 28.5587 3.87868 29.1213C4.44129 29.6839 5.20435 30 6 30H30Z' fill='white' stroke='%230088FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.community .list .group ul li.m a {
    height: 297px;
    background-color: #E4EDFF;
    color: var(--color-title);
    position: relative;
}
.community .list .group ul li.m a::before {
    content: "";
    position: absolute;
    bottom: 32px;
    left: 30px;
    width: 121px;
    height: 103px;
}
.community .list .group ul li.m a::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../images/m_btn_bg.png) no-repeat center center / cover;
    width: 80px;
    height: 80px;
}
.community .list .group ul li.m a .more {
    position: absolute;
    z-index: 10;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 48px;
    border-radius: 30px;
    background-color: #E4EDFF;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='%23555555' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.5673 17.3354H6.66732C6.28954 17.3354 5.97287 17.2077 5.71732 16.9521C5.46176 16.6965 5.33398 16.3799 5.33398 16.0021C5.33398 15.6243 5.46176 15.3077 5.71732 15.0521C5.97287 14.7965 6.28954 14.6688 6.66732 14.6688H21.5673L15.034 8.13543C14.7673 7.86877 14.6395 7.55765 14.6507 7.2021C14.6618 6.84654 14.8007 6.53543 15.0673 6.26877C15.334 6.02432 15.6451 5.89654 16.0007 5.88543C16.3562 5.87432 16.6673 6.0021 16.934 6.26877L25.734 15.0688C25.8673 15.2021 25.9618 15.3465 26.0173 15.5021C26.0729 15.6577 26.1007 15.8243 26.1007 16.0021C26.1007 16.1799 26.0729 16.3465 26.0173 16.5021C25.9618 16.6577 25.8673 16.8021 25.734 16.9354L16.934 25.7354C16.6895 25.9799 16.384 26.1021 16.0173 26.1021C15.6507 26.1021 15.334 25.9799 15.0673 25.7354C14.8007 25.4688 14.6673 25.1521 14.6673 24.7854C14.6673 24.4188 14.8007 24.1021 15.0673 23.8354L21.5673 17.3354Z' /%3E%3C/svg%3E%0A");
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}
.community .list .group ul li.m.location a::before {
    background: url(../images/lo_icon.png) no-repeat center center / cover;
}
.community .list .group ul li.m.guide a::before {
    background: url(../images/gu_icon.png) no-repeat center center / cover;
}
.community .list .group ul li.m.bookstore a::before {
    background: url(../images/bo_icon.png) no-repeat center center / cover;
}
.community .list .group ul li.m.archive a::before {
    background: url(../images/ar_icon.png) no-repeat center center / cover;
}

.community .list .group ul li.l {
    width: 100%; 
    /* 나를 감싸는 요소 ul의 넓이의 100%가 들어감 */
}
.community .list .group ul li.l a {
    height: 297px;
}
.community .list .group ul li.l.quote .txt {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
.community .list .group ul li.l.quote .txt h3 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--color-title);
}
.community .list .group ul li.l.quote a {
    background: url(../images/quote_bg.jpg) no-repeat center center / cover;
}
.community .list .group ul li.l.schedule a {
    background-color: var(--color-main);
    color: #fff;
}
.community .list .group ul li.l.schedule a .date {
    background-color: #fff;
    margin-top: 23px;
    padding: 16px 0;
    border-radius: 20px;
    color: var(--color-title);
    display: flex;
    justify-content: center;
    gap: 0 16px;
    align-items: center;
}
.community .list .group ul li.l.schedule a .date .today {
    font-size: 24px;
    padding: 8px 16px;
    border: 1px solid var(--color-title);
    border-radius: 30px;
}
.community .list .group ul li.l.schedule a .date .da {
    font-size: 32px;
    font-weight: 700;
}
.community .list .group ul li.l.schedule a .tit {
    font-weight: 700;
}
.community .list .group ul li.l.schedule a .sc_ti,
.community .list .group ul li.l.schedule a .sc_da {
    display: flex;
    gap: 0px 16px;
}
.community .list .group ul li.l.schedule a .sc_ti {
    margin: 16px 0;

}
.community .list .group ul li a {
    padding: 30px 30px 0 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.community .list .group ul li.m a h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 16px 0 0 0;
}
.community .list .group ul li.m a .mo_h3 {
    display: none;
}
@media screen and (max-width:1280px){
    .community .list .group ul li.m a .pc_h3 {
        display: none;
    }
    .community .list .group ul li.m a .mo_h3 {
        display: block;
    }
}
@media screen and (max-width:1024px){
    .community .list {
        display: block; /* group을 좌우로배치 */
    }
    .community .list .group {
        width: 100%;
    }
    .community .list .group ul li.m a {
        height: 260px;
    }
    .community .list .group ul li.l.schedule a {
        margin-top: 12px;
    }
    .community .list .group ul li.l.quote .txt h3 {
        font-size: 32px;
    }
    .community .list .group ul li.l a {
        height: 260px;
    }
}
@media screen and (max-width:768px){
    .community {
        padding: 0 0 80px 0;
    }
    .community .list .group ul li a {
        padding: 16px 16px 0 16px;
    }
    .community .list .group ul li.m a {
        height: 220px;
    }
    .community .list .group ul li.m a h3 {
        font-size: 20px;
        font-weight: 700;
        margin: 16px 0 0 0;
    }
    .community .list .group ul li.m a::before {
        content: "";
        position: absolute;
        bottom: 32px;
        left: 16px;
        width: 80px;
        height: 68px;
    }
    .community .list .group ul li.l a {
        height: 220px;
    }
    .community .list .group ul li.l.schedule.l a {
        height: 240px;
    }
    .community .list .group ul li.l.quote .txt h3 {
        font-size: 28px;
        margin-bottom: 8px;
    }
    .community .list .group ul li.l.schedule a .date .today {
        font-size: 20px;
        padding: 4px 8px;
    }
    .community .list .group ul li.l.schedule a .date .da {
        font-size: 20px;
    }
}
@media screen and (max-width:558px) {
    .community .list .group ul li.m a .mo_h3 {
        display: none;
    }
}
/********************* community *********************/
footer {
    border-top: 1px solid #ccc;
    color: var(--color-title);
    padding: 100px 0;
}
footer .wrapper {
    display: flex;
    gap: 0 54px;
    position: relative;
}
footer .f_logo {
    width: 207px;
    height: 55px;
    background: url(../images/logo.png) no-repeat center center / contain;
}
footer .f_util {
    position: absolute; /* wrapper를 기준으로 정렬 */
    right: 0;
    top: 0;
    display: flex; /* family_site - top이랑 좌우로 배치 */
    gap: 0 6px;
    color: #fff;
}
footer .f_util .family_site {
    width: 186px;
    /* 관련사이트는 여는 버튼, 바로가기 사이트 등의 넓이가 같음
       그래서 감싸고 있는 family_site에 넓이를 주고 내부요소는 그에 100%를 꽉차게줌 */
    position: relative; /* family_wrap 정렬의 기준 */
}
footer .f_util .family_site .family_open,
footer .f_util .family_site .family_close {
    display: block;
    width: 100%;
    height: 2.5294em;
    text-align: left;
    padding: 0.2941em 0 0 1.1176em;
    background-color: #00559F;
    position: relative; /* 정렬의 기준 */
}
footer .f_util .family_site .family_open::after,
footer .f_util .family_site .family_close::after {
    content: "";
    position: absolute;
    right: 1.1176em;
    top: 1.15em;
    width: 0.6865em;
    height: 0.4041em;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 7' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6667 1.03581L5.83333 6.86914L-2.54983e-07 1.03581L1.03542 0.000390484L5.83333 4.79831L10.6312 0.000390065L11.6667 1.03581Z' /%3E%3C/svg%3E%0A");
}
footer .f_util .family_site .family_wrap {
    display: none;
    position: absolute;
    left: 0;
    bottom: calc(2.5294em + 1px); /* 하단에 버튼을 포함한 높이 */
    width: 100%;
    background-color: #00559F;
    padding: 1.1765em 1.1176em 1.0588em 1.1176em;
}
footer .f_util .family_site .family_wrap ul li a {
    display: block;
    padding: 0.1765em 0;
}
footer .f_util .family_site .family_wrap ul li a span {
    position: relative; /* after 정렬 */
}
footer .f_util .family_site .family_wrap ul li a span::after {
    content: "";
    position: absolute;
    right: -0.8824em;
    top: 0.4118em;
    width: 0.6176em;
    height: 0.6176em;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 11 11' fill='white' fill-opacity='0.6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.5V0H5.25V1.16667H1.16667V9.33333H9.33333V5.25H10.5V10.5H0ZM3.90833 7.40833L3.09167 6.59167L8.51667 1.16667H6.41667V0H10.5V4.08333H9.33333V1.98333L3.90833 7.40833Z' /%3E%3C/svg%3E%0A");
}
footer .f_util .family_site .family_close {
    display: none;
}

/* 열렸을때 */
footer .f_util .family_site.open .family_open {
    display: none;
}
footer .f_util .family_site.open .family_close {
    display: block;
}
footer .f_util .family_site.open .family_close::after {
    animation: family_btn 0.5s 1 forwards;
}
@keyframes family_btn {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

footer .f_util .top {
    height: 2.5294em;
    padding: 0.2941em 0.9412em 0 0.9412em;
    background-color: var(--color-main);
}
footer .inner {
    margin: 14px 0 0 0;
}
footer .inner .f_nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.1765em;
}
footer .inner .f_info {
    display: flex;
    flex-direction: column;
    margin: 31px 0 0 0;
    gap: 8px 0;
}

@media screen and (max-width:1280px){
    footer .wrapper {
        gap: 0 20px;
    }
    footer .inner .f_nav ul {
        gap: 0 1.5em;
    }
}
@media screen and (max-width:1024px){
    footer {
        margin: 64px 0 0 0;
    }
    footer .wrapper {
        flex-direction: column;
        gap: 20px 0;
    }
    footer .f_util {
        top: 52px;  
    }
}
@media screen and (max-width:768px){
    footer {
        padding: 80px 0;
    }
    footer .wrapper {
        display: block; /*f_logo - inner 좌우배치*/
    }
    footer .f_logo {
        width: 70px;
        height: 43px;
        background: url(../images/logo_L.png) no-repeat center center / cover;
    }
    footer .f_util {
        position: relative; /* absolute 해제 */
        right: auto;
        top: auto;
        margin: 32px 0 52px 0;
    }
    footer .f_util .family_site {
        width: calc(100% - 73px);
        max-width: 420px;
    }
    footer .inner {
        margin: 0;
    }
    footer .inner .f_info {
        margin: 22px 0 0 0;
    }
}