@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; /* SVG 색상 */
}

.header .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .logo a {
    display: block;
    /* logo는 header의 높이에 비례 */
    width: calc(var(--header-h) * 1.6111);
    height: calc(var(--header-h) * 0.53);
    background: url(../images/logo_w.svg) no-repeat center center / contain;
    margin-bottom: calc(var(--header-h) * 0.14);
}

/*** .header.fixed .header.fixed .header.fixed 시작 ***/
.header.fixed,
.header.menu_over {
    background-color: #fff;
    color: #2E3138;
    fill: #515662;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.header.fixed .logo a,
.header.menu_over .logo a {
    background-image: url(../images/logo.svg);
}
/*** .header.fixed .header.fixed .header.fixed 끝 ***/

/* 너비 1025px 이상 */
@media screen and (min-width: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 {
            width: 202px;
            text-align: center;
            position: relative; /* ul.depth2 정렬 기준 */
        }

        .header .gnb .gnb_wrap ul.depth1 > li > a {
            display: block;
            font-size: 20px;
            font-weight: 800;
            line-height: var(--header-h);
        }

        .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
            position: absolute;
            left: 0;
            top: var(--header-h); /* 2차 메뉴는 반드시 header 높이와 동일한 top 값 */
            width: 100%;
            padding: 34px 0 0 0;
            display: none;
        }

        .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 li > a {
            display: block;
            color: #515662;
            padding: 4px 0;
        }
        .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 li > a:hover {
            color: #0065BD;
        }

        .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: 0;
            bottom: -1px;
            width: 0;
            height: 1px;
            background-color: #0065BD;
            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 .mypage,
        .header .util .lang .lang_open {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
        }

        .header .gnb_bg {
            position: fixed;
            left: 0;
            top: 0;
            z-index: -2;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px); 
            display: none;
        }
        .header::before {
            content: "";
            position: fixed; /* .header 기준 정렬 */
            left: 0;
            top: 0;
            z-index: -1; 
            width: 100%;
            height: 343px;
            background-color: #fff;
            display: none;
        }
        .header::after {
            content: "";
            position: absolute;
            left: 0;
            top: var(--header-h);
            width: 100%;
            height: 1px;
            background-color: #ededed;
            display: none;
        }
        /*** .header.menu_over .header.menu_over .header.menu_over 시작 ***/

        .header.menu_over::before {
            display: block;
        }        
        .header.menu_over::after {
            display: block;
        }
        
        .header.menu_over .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
            display: block;
        }

        .header.menu_over .gnb_bg {
            display: block;
        }
        
        .header.menu_over .gnb .gnb_wrap ul.depth1 > li.over > a {
            color: #0065BD;
        }         
        
        .header .gnb .gnb_wrap ul.depth1 > li > a span {
            position: relative; /* ::after 정렬 기준 */
        } 
        .header .gnb .gnb_wrap ul.depth1 > li > a span::after {
            content: "";
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -34px;
            width: 0;
            height: 2px;
            background-color: #0065BD;
            transition: 0.3s;
        } 
        .header.menu_over .gnb .gnb_wrap ul.depth1 > li.over > a span::after {
            width: 100%;
        } 
        /*** .header.menu_over .header.menu_over .header.menu_over 끝 ***/
}
/* @media screen and (max-width:1024px) */

/* 너비 1025px 이상 1200px 이하 */
@media screen and (min-width:1025px) and (max-width:1200px) {
    .header .gnb .gnb_wrap ul.depth1 > li {
        width: 170px;
    }
} /* @media screen and (min-width:1025px) and (max-width:1200px) */

/* 너비 1024 이하 */
@media screen and (max-width:1024px) {
    .header .wrapper {
        margin-right: 0;
    }

    .header .util,
    .header .gnb_bg {
        display: none;
    }

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

    .header .gnb .gnb_open svg,
    .header .gnb .gnb_wrap .gnb_close svg {
        width: calc(var(--header-h) * 0.465);
        height: calc(var(--header-h) * 0.304);
    }
    
    .header .gnb .gnb_wrap {
        position: absolute;
        right: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        color: #515662;
        fill: #515662;
        display: none;
    }
    .header.menu_open .gnb .gnb_wrap {
        display: block;
    }

    .header .gnb .gnb_wrap .gnb_logo {
        display: none;
    }

    .header .gnb .gnb_wrap ul.depth1 {
        margin: var(--header-h) 0 0 0;
        /* 나머지 영역은 브라우저 높이에 맞춤, 넘치면 스크롤 추가 */
        height: calc(100vh - var(--header-h));
        overflow-y: auto;
        padding: 38px 0 0 0;
    }

    .header .gnb .gnb_wrap ul.depth1 > li > a {
        display: block;
        padding: 8px 16px;
        font-size: 22px;
        font-weight: 800;
        color: #2E3138;
        position: relative;
    }
    .header .gnb .gnb_wrap ul.depth1 > li.open > a {
        color: #0065BD;
    }
    .header .gnb .gnb_wrap ul.depth1 > li > a::after {
        content: "";
        position: absolute;
        right: 20px;
        top: 19px;
        width: 17px;
        height: 10px;
        background-image: url("data:image/svg+xml,%3Csvg width='17' height='10' viewBox='0 0 17 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 1.50743L8.5 10L0 1.50743L1.50875 1.17068e-06L8.5 6.98514L15.4913 5.59482e-07L17 1.50743Z' fill='%23181818'/%3E%3C/svg%3E%0A");
    }
    .header .gnb .gnb_wrap ul.depth1 > li.open > a::after {
        transform: rotate(180deg);
        background-image: url("data:image/svg+xml,%3Csvg width='17' height='10' viewBox='0 0 17 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 1.50743L8.5 10L0 1.50743L1.50875 1.17068e-06L8.5 6.98514L15.4913 5.59482e-07L17 1.50743Z' fill='%230065BD'/%3E%3C/svg%3E%0A");
    }
    
    .header .gnb .gnb_wrap ul.depth1 > li > ul.depth2 {
        margin: 0 16px;
        padding: 20px 20px;
        background-color: #f7f7f7;
        display: none;
    }
    .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 0;
    }

    .header .gnb .gnb_wrap .gnb_close {
        position: absolute; /* .gnb_wrap 기준 정렬 */
        right: 0;
        top: 0;
    }

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


.visual{
    position: relative; /* scroll 정렬의 기준 */
}
.visual .swiper-slide{
    height: 100dvh; /* 브라우저의 높이 */
    min-height: 500px;
    background: url(../images/visual_bg01.jpg) no-repeat center center / cover;
    color: #fff;
    display: flex; /* wrapper를 아래로 정렬 */
    align-items: flex-end;
}
.visual .swiper-slide.pop2{
    background-image: url(../images/visual_bg02.jpg);
}
.visual .swiper-slide.pop3{
    background-image: url(../images/visual_bg03.jpg);
}
.visual .swiper-slide h2{
    font-size: 70px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 97px 0;
}
.visual .scroll{
    position: absolute;
    /* left: 50%;
    transform: translateX(-50%);
    bottom: 33px; */
    right: 0;
    bottom: 100px;
    transform: rotate(90deg);
    z-index: 10;
    font-size: 12px;
    color: #fff;
}
.visual .scroll::before,
.visual .scroll::after{
    content: "";
    position: absolute; /* scroll를 기준으로 정렬 */
    /* left: 0;
    bottom: -11px;
    width: 100%;
    height: 13px; */
    right: -20px;
    top: 0;
    width: 13px;
    height: 100%;
    transform: rotate(-90deg);
    background: url(../images/visual_scroll.svg) no-repeat center center;
}
.visual .scroll::after{
    /* bottom: -15px; */
    opacity: 0;
    animation: scroll1 2s linear 1s infinite;
}
.visual .scroll::before{
    animation: scroll1 2s linear infinite;
}
/* 삼천리 스타일 */
@keyframes scroll1 {
    0%{right: -20px;opacity: 1;}
    80%{right: -28px;opacity: 1;}
    100%{right: -30px;opacity: 0;}
}
/*  위아래 반복 스타일 
@keyframes scroll1 {
    0%{right: -20px;}
    50%{right: -30px;}
    100%{right: -20px;} 
} */
@media screen and (max-width:1024px){
            .visual .swiper-slide h2{
                font-size: 50px;
                margin: 0 0 64px 0;
            }
            .visual .scroll{
                display: none;
            }
}/*@media*/
@media screen and (max-width:768px){
            .visual .swiper-slide h2{
                font-size: 40px;
            }
}/*@media*/

.biz{
    margin: 174px 0 0 0;
}
.biz .wrapper{
    display: flex; /* tit-list 좌우 배치 */
    justify-content: space-between;
    align-items: flex-start;
    /* align-item을 안주면 좌우로 들어가는 요소의 높이가 동일해짐
       align-item: flex-start를 주면 tit과 list가 각자의 콘텐츠가 존재하는 만큼만 높이가 잡힘 */
}
.biz .tit{
    position: sticky;
    /* 왼쪽에 고정할 요소는 오른쪽의 요소보다 반드시 짧아야 구현이 가능함.
       좌우 배치를 flex로 했다면 반드시 align-item: flex-start를 추가해줘야함 
       감싸는 요소 중에서 단한개의 요소라도 overflow:hidden값을 가지고 있으면 작동하지 않음   
    */
    top: 100px;
    /* sticky를 주면 대부분 top값만 줌 (left를 주면 도망감 ㅋ)
       맨 상단에서 부터 얼만큼 떨어져서 고정할지 위치값임 */
}
.biz .tit strong{
    font-weight: 800;
    color: #0065BD;
}
.biz .tit h2{
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
    margin: 10px 0 0 0;
}
.biz .list{
    max-width: 832px; 
    /* 최대넓이 - 넓이가 이이상 늘어나지 않음 - 그리고 그보다 작을때는 260px의 여백을 빼고 나머지 전부 */
    width: calc(100%  -  260px); 
}
.biz .list ul{
    display: flex; /* li를 좌우로 배치 */
    flex-wrap: wrap; /* 여러줄 허용 */
    flex-direction: row-reverse; /**/
    gap: 24px 24px;
}
.biz .list ul li{
    width: calc(50%  -  12px);
    /* 100% / 한줄에 나오는 li 갯수 - 한줄의 여백의 합/한줄에 나오는 li 갯수
       100%/2 - 24/2 == 50% - 12px */
}
.biz .list ul li:nth-child(even){ /* 홀수 odd, 짝수 even */
    transform: translateY(152px);
    /* margin으로 여백을 주면 다른 요소가 같이 밀림 
       transform: translateY로 조절하면 괜찮음 
       transform 은 다른 요소에 영상을 끼치지 않음 
       --- 왼쪽에 있는 걸 오른쪽으로 transform으로 움직이면 겹침.. 밀리지 않음 */
}
.biz .list ul li a{
    display: block;
    height: 490px;
    background: url(../images/biz01.jpg) no-repeat center center / cover;
    color: #fff;
    border-radius: 20px;
    position: relative; /* txt정렬의 기준 */
    overflow: hidden; /* p태그 밖으로 삐져나가는거 막기 */
}
.biz .list ul li.biz02 a{
    background-image: url(../images/biz02.jpg);
}
.biz .list ul li.biz03 a{
    background-image: url(../images/biz03.jpg);
}
.biz .list ul li.biz04 a{
    background-image: url(../images/biz04.jpg);
}
.biz .list ul li.biz05 a{
    background-image: url(../images/biz05.jpg);
}
.biz .list ul li a::before{
    content: "";
    position: absolute; /* a를 기준으로 정렬 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #0065BD;
    opacity: 0;
    transition: 0.3s;
}
.biz .list ul li a .txt{
    /* 마우스 오버 애니메이션을 줄때 밑에서 위로 자연스럽게 올라오면서
       p태그가 나타남.. -- 그래서 a를 기준으로 absolute 줌 */
    position: absolute; /* a를 기준으로 정렬 */
    left: 40px;
    bottom: -40px;
    width: calc(100%  -  80px); /* 좌우 여백을 합 빼기 */
    transition: bottom 0.3s;
}
.biz .list ul li a .txt h3{
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 10px 0;
}
.biz .list ul li a .txt p{
    opacity: 0;
    transition: 0.3s;
}
/****** hover했을때 ******/
.biz .list ul li a:hover::before{
    opacity: 0.9;
}
.biz .list ul li a:hover .txt{
    bottom: 50px;
}
.biz .list ul li a:hover .txt p{
    opacity: 1;
}
@media screen and (max-width:1024px){
                .biz .tit h2{
                    font-size: 38px;
                }
                .biz .list{
                    max-width: 500px;
                }
                .biz .list ul li {
                    width: 100%;
                }
                .biz .list ul li:nth-child(even) {
                    transform: translateY(0);
                }
                .biz .list ul li a .txt{
                    bottom: 40px;
                }
                .biz .list ul li a .txt h3{
                    font-size: 28px;
                }
                .biz .list ul li a .txt p{
                    opacity: 1;
                }
}
@media screen and (max-width:768px){
                .biz{
                    margin: 125px 0 0 0;
                }
                .biz .wrapper{
                    display: block; /* flex해제 */
                }
                .biz .tit{
                    position: relative; /* sticky해제 - relative 제일 멀쩡한 값이라 */
                    top: auto; /* 0이랑 다름 - 아예 안준 것 처럼 됨 */
                }
                .biz .tit h2{
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .biz .tit h2 br{
                    display: none; /* 줄바꿈 삭제 */
                }
                .biz .list{
                    max-width: 100%;
                    width: auto; 
                    /* auto 원래 속성대로 넓이를 갖음 -
                       block요소면 100%들어감.. 
                       그냥 100%하면 안되냐???? - margin을 좌우로 줘버리면 늘어남 */
                    margin: 42px 0 0 0;
                }
                .biz .list ul{
                    flex-wrap: nowrap; /* 여러줄 허용 안함 */
                    flex-direction: column;
                    gap: 8px 0;
                }
                .biz .list ul li{
                    width: auto;
                }
                .biz .list ul li:nth-child(even){ /* 홀수 odd, 짝수 even */
                    transform: translateY(0);
                }
                .biz .list ul li a{
                    height: 150px;
                    border-radius: 10px;
                }
                /* .biz .list ul li a::before{
                    display: none;
                } */
                .biz .list ul li a .txt{
                    left: 20px;
                    bottom: 20px;
                    width: calc(100%  -  70px); /* 좌우 여백을 합 빼기 */
                }
                .biz .list ul li a .txt::after{
                    content: "";
                    position: absolute;
                    right: -24px;
                    top: 0;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    background: #fff url(../images/biz_more.svg) no-repeat center center ;
                }
                .biz .list ul li a .txt h3{
                    font-size: 24px;
                    margin: 0;
                }
                .biz .list ul li a .txt h3 br{
                    display: none; /* 줄바꿈삭제 */
                }
                .biz .list ul li a .txt p{
                    display: none; /* 계속 안나옴 */
                }
                /****** hover했을때 ******/
                .biz .list ul li a:hover .txt{
                    bottom: 20px;
                }
}/*@media*/

.news{
    background-color: #F3F6F9;
    margin: 124px 0 0 0;
    padding: 174px 0 113px 0;
}
.news .wrapper{
    position: relative; /* more 정렬의 기준 */
}
.news .tit strong{
    font-weight: 800;
    color: #0065BD;
}
.news .tit h2{
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
    margin: 10px 0 0 0;
}
.news .list{
    margin: 31px 0 0 0;
}
/*
    <ul>
        <li></li>    --- (X)맨 위에 있는 li라 해당 사항 없음
        <li></li>    --- (O)위에 li가 있고 다음에 나오는 li라 li + li 선택가능
        <li></li>    --- (O)선택가능
        <li></li>    --- (O)선택가능
    </ul>
*/
.news .list ul li + li{
    margin-top: 12px;
}
.news .list ul li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 40px 21px 40px;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}
.news .list ul li a:hover{
    background-color: #536385;
    color: #fff;
}
.news .list ul li a strong{
    background-color: #536385;
    color: #fff;
    padding: 4px 18px 5px 18px;
    border-radius: 20px;
}
.news .list ul li a:hover strong{
    background-color: #fff;
    color: #536385;
    font-weight: 800;
}
.news .list ul li.sch a strong{
    background-color: #0065BD;
}
.news .list ul li.sch a:hover strong{
    background-color: #fff;
    color: #0065BD;
}
.news .list ul li a h3{
    font-size: 20px;
    font-weight: 800;
    color: #2E3138;
    line-height: 1.3;
    width: calc(100%  -  214px);
    /*  strong 카테고리명 + span 날짜가 더이상 늘어나지 않는다는 가정하에
        100%에서 그 두개의 넓이를 뺀값이 제목의 넓이
        84 + 130 = 214  
        1줄 제한    */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news .list ul li a:hover h3{
    color: #fff;
}
.news .more{
    position: absolute; /* wrapper를 기준으로 정렬 */
    right: 0;
    top: 42px;
}
.news .more a{
    display: block;
    border: 1px solid #99A3B7;
    border-radius: 30px;
    padding: 12px 56px 11px 33px;
    position: relative; /* after 정렬의 기준 */
}
.news .more a:hover{
    border-color: #536385;
    background-color: #536385;
    color: #fff;
}
.news .more a::after{
    content: "";
    position: absolute; /* a를 기준으로 정렬 */
    right: 34px;
    top: 17px;
    width: 14px; /* 아이콘 사이즈 */
    height: 14px;
    background: url(../images/more1.svg) no-repeat center center / contain;
    transition: transform 1s;
}
.news .more a:hover::after{
    background-image: url(../images/more_w.svg);
    transform: rotate(360deg);
}
@media screen and (max-width:1024px){
    .news .tit h2{
        font-size: 38px;
    }
    .news .list ul li a {
        padding: 20px 40px 14px 40px;
    }
    .news .list ul li a h3{
        font-size: 18px;
    }
    .news .more {
        top: 32px;
    }
    .news .more a{
        padding: 9px 56px 8px 33px;
    }
    .news .more a::after {
        top: 14px;
    }
}/*@media*/
@media screen and (max-width:768px){
                .news{
                    margin: 84px 0 0 0;
                    padding: 126px 0 88px 0;
                }
                .news .tit h2{
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .news .list{
                    margin: 40px 0 0 0;
                }
                .news .list ul li{
                    border-bottom: 1px solid rgba(153, 163, 183, 0.5);
                }
                .news .list ul li:first-child{
                    border-top: 1px solid rgba(153, 163, 183, 0.5);
                }
                .news .list ul li + li{
                    margin-top: 0;
                }
                .news .list ul li a{
                    padding: 13px 0 12px 0;
                    background-color: transparent;
                    box-shadow: none;
                }
                .news .list ul li a:hover{
                    background-color: transparent;
                    color: inherit;
                }
                .news .list ul li a strong{
                    display: none; /* 모바일에서 숨김 */
                }
                .news .list ul li a h3{
                    font-size: 16px;
                    width: calc(100%  -  120px);
                }
                .news .list ul li a:hover h3{
                    color: #2E3138;
                }
                .news .more{
                    position: relative; /* absolute 해제 */
                    right: auto; /* 아예 안준것 처럼 해제 */
                    top: auto;
                    margin: 29px 0 0 0;
                    display: flex;
                    justify-content: center;
                }
                .news .more a{
                    border: none;
                    padding: 8px 54px 7px 32px;
                    background-color: #536385;
                    color: #fff;
                }
                .news .more a::after{
                    right: 32px;
                    top: 13px;
                    width: 12px; /* 아이콘 사이즈 */
                    height: 12px;
                    background-image: url(../images/more_w.svg);
                }
}/*@media*/

.webzine{
    background-color: #01194C;
    color: #fff;
    padding: 174px 0 123px 0;
}
.webzine .wrapper{
    position: relative; /* ctrl_wrap의 정렬의 기준 */
}
.webzine .tit strong{
    font-weight: 800;
    color: #78B1E3;
}
.webzine .tit h2{
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    margin: 10px 0 0 0;
}
.webzine .list{
    margin: 45px 0 0 0;
}
.webzine .list .swiper-slide a{
    display: block;
    background-color: #fff;
    color: #515662;
    border-radius: 20px;
}
.webzine .list .swiper-slide a .photo{
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    height: 232px;
}
.webzine .list .swiper-slide a .photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}
.webzine .list .swiper-slide a:hover .photo img{
    transform: scale3d(1.125, 1.125, 1);
}
.webzine .list .swiper-slide a .txt{
    padding: 30px 30px 45px 30px;
}
.webzine .list .swiper-slide a .txt strong {
    font-weight: 800;
    color: #0065BD;
    display: block;

    /* 1줄제한 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.webzine .list .swiper-slide a .txt h3{
    font-size: 24px;
    font-weight: 800;
    color: #2E3138;
    margin: 11px 0 11px 0;
    /* 2줄 제한 */
    line-height: 1.3;
    height: 2.6em; /* 행간 * 줄수 = 단위em */
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 2줄 */
}
.webzine .list .swiper-slide a .txt p{
    /* 3줄 제한 */
    line-height: 1.5;
    height: 4.5em; /* 행간 * 줄수 = 단위em */
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 3줄 */
}
.webzine .ctrl_wrap{
    position: absolute;
    right: 0;
    top: 39px;
    display: flex; /* prev-next-more 좌우로 정렬 */
    gap: 0 6px;
}
.webzine .ctrl_wrap button{
    width: 49px;
    height: 49px;
    border-radius: 50%;
    border: 1px solid #F3F6F9;
    background: url(../images/prev1.svg) no-repeat center center;
}
.webzine .ctrl_wrap button:hover:not(.swiper-button-disabled){
    border-color: #fff;
    background-color: #fff;
    background-image: url(../images/prev2.svg);
}
.webzine .ctrl_wrap button.next{
    transform: rotate(180deg);
}
.webzine .ctrl_wrap button.swiper-button-disabled{
    opacity: 0.4;
    cursor: default;
}
.webzine .ctrl_wrap .more a{
    display: block;
    height: 49px;
    border: 1px solid #F3F6F9;
    border-radius: 30px;
    padding: 12px 56px 0 33px;
    position: relative; /* after 정렬의 기준 */
}
.webzine .ctrl_wrap .more a:hover{
    background-color: #fff;
    color: #01194C;
}
.webzine .ctrl_wrap .more a::after{
    content: ""; /* before/after 필수값 */
    position: absolute;
    right: 34px;
    top: 17px;
    width: 14px; /* 아이콘사이즈 */
    height: 14px;
    background: url(../images/more1.svg) no-repeat center center / contain;
    transition: transform 1s;
}
.webzine .ctrl_wrap .more a:hover::after{
    background-image: url(../images/more2.svg);
    transform: rotate(360deg);
}
@media screen and (max-width:1024px){
                .webzine .tit h2{
                    font-size: 38px;
                }
                .webzine .ctrl_wrap{
                    top: 36px;
                }
                .webzine .ctrl_wrap button{
                    width: 44px;
                    height: 44px;
                }
                .webzine .ctrl_wrap .more a{
                    height: 44px;
                    padding: 10px 56px 0 33px;
                }
                .webzine .ctrl_wrap .more a::after{
                    top: 14px;
                }
                .webzine .list .swiper-slide a .txt {
                    padding: 25px 20px 35px 20px;
                }
                .webzine .list .swiper-slide a .txt h3{
                    font-size: 22px;
                }
}/*@media*/
@media screen and (max-width:768px){
                .webzine{
                    padding: 137px 0 86px 0;
                }
                .webzine .tit h2{
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .webzine .list{
                    margin: 37px 0 0 0;
                }
                .webzine .list .swiper-slide{
                    width: 250px;
                }
                .webzine .list .swiper-slide a{
                    border-radius: 10px;
                }
                .webzine .list .swiper-slide a .photo{
                    border-radius: 10px 10px 0 0;
                    height: 184px;
                }
                .webzine .list .swiper-slide a .txt{
                    padding: 26px 16px 34px 16px;
                }
                .webzine .list .swiper-slide a .txt h3{
                    font-size: 20px;
                    margin: 8px 0 9px 0;
                }
                .webzine .ctrl_wrap{
                    position: relative; /* absolute해제 */
                    right: auto;
                    top: auto;
                    justify-content: center;
                    margin: 29px 0 0 0;
                }
                .webzine .ctrl_wrap button{
                    display: none;
                }
                .webzine .ctrl_wrap .more a{
                    height: 39px;
                    border: none;
                    padding: 8px 54px 0 32px;
                    background-color: #536385;
                }
                .webzine .ctrl_wrap .more a::after{
                    right: 32px;
                    top: 13px;
                    width: 12px; /* 아이콘사이즈 */
                    height: 12px;
                    background-image: url(../images/more_w.svg);
                }
}/*@media*/

.service{
    margin: 174px 0 116px 0;
}
.service .tit strong{
    font-weight: 800;
    color: #0065BD;
}
.service .tit h2 {
    font-size: 45px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
    margin: 10px 0 0 0;
}
.service .list{
    margin: 32px 0 0 0;
}
.service .list ul{
    display: flex; /* li를 좌우 배치 */
    justify-content: space-between;
}
.service .list ul li{
    width: calc(33.33%  -  16px);
    /*
        100% / 한줄에보이는li갯수 - 한줄의여백의합 / 한줄에보이는li갯수
        100% / 3  - (24+24) / 3
        33.33% - 16px
    */
}
.service .list ul li a{
    display: block;
    background-color: #F3F6F9;
    padding: 35px 40px 35px 40px;
    position: relative; /* after 정렬의 기준 */
}
.service .list ul li a:hover{
    background-color: #536385;
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
}
.service .list ul li a::after{
    content: "";/* 필수값 */
    position: absolute;
    right: 40px;
    top: 34px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #99A3B7 url(../images/more_w.svg) no-repeat center center / 10px;
    transition: transform 1s;
}
.service .list ul li a:hover::after{
    background-color: #fff;
    background-image: url(../images/more2.svg);
    transform: rotate(360deg);
}
.service .list ul li a strong{
    display: none;
}
.service .list ul li a h3{
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: #2E3138;
}
.service .list ul li a:hover h3{
    color: #fff;
}
.service .list ul li a h3 br{
    display: none; /* 모바일에서만 줄바꿈 */
}
@media screen and (max-width:1024px){
                .service .tit h2 {
                    font-size: 38px;
                }
                .service .list ul li a {
                    text-align: center;
                    padding: 35px 40px 64px 40px;
                    height: 100%; /* li의 높이와 동일하게 */
                }
                .service .list ul li a::after {
                    right: calc(50% - 13.5px); /* 넓이의 절반 */
                    top: auto;
                    bottom: 20px;
                }
                .service .list ul li a h3{
                    font-size: 18px;
                }
}/*@media*/
@media screen and (max-width:768px){
                .service{
                    margin: 123px 0 100px 0;
                }
                .service .tit h2 {
                    font-size: 32px;
                    margin: 6px 0 0 0;
                }
                .service .list{
                    margin: 28px 0 0 0;
                }
                .service .list ul{
                    flex-direction: column;
                    gap: 8px 0;
                }
                .service .list ul li{
                    width: auto;
                }
                .service .list ul li a{
                    padding: 26px 20px 25px 20px;
                    text-align: left;
                }
                .service .list ul li a::after{
                    right: 20px;
                    top: 26px;
                    bottom: auto;
                    width: 21px;
                    height: 21px;
                    background-size: 8px;
                }
                .service .list ul li a h3{
                    font-size: 16px;
                }
}/*@media*/

.footer{
    background-color: #343B48;
    color: #99A3B7;
    padding: 78px 0 92px 0;
}
.footer .wrapper{
    position: relative; /* top 정렬의 기준 */
}
.footer .top{
    position: absolute; /* wrapper를 기준으로 정렬 */
    right: 0;
    top: -18px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #0065BD url(../images/top_w.svg) no-repeat center center;
}
.footer .top:hover{
    background-color: #fff;
    background-image: url(../images/top.svg);
}
.footer .f_nav ul{
    display: flex; /* li를 좌우에 배치 */
    gap: 6px 40px;
    flex-wrap: wrap; /* 여러줄 허용 */
}
.footer .f_nav ul li{
    position: relative; /* after 정렬의 기준 */
}
.footer .f_nav ul li.imp{
    color: #fff;
    font-weight: 800;
}
.footer .f_nav ul li::after{
    content: ""; /* after/before 필수값 */
    position: absolute;
    right: -22px;
    top: 5px;
    width: 1px;
    height: 12px;
    background-color: rgba(153, 163, 183, 0.5);
}
.footer .f_nav ul li:last-child::after{
    display: none;
}
.footer .f_info{
    margin: 34px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}
@media screen and (max-width:768px){
        .footer{
            padding: 86px 0 79px 0;
        }
        .footer .top{
            top: -103px;
        }
        .footer .f_info{
            margin: 48px 0;
        }
}/*@media*/