@charset "utf-8";
@import url('reset.css');

html,
body {
    overflow-x: hidden;
    min-width: 320px;
}


/* common */
#container {
    width: 90%;
    margin: 0 auto;
}

.wbk {
    word-break: keep-all;
}

.mo_only {
    display: none !important;
}

.pc_only {
    display: block;
}
@media all and (max-width:1024px) {
.tb-none{
    display: none;
}
}

/* header */
header {
    position: fixed;
    left: 0; top: 0;
    z-index: 700;
    display: flex;
    width: 100%;
    height: 80px;
    padding: 0 60px;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05);
    color: #222;
}
header .vol{
    display: flex;
    gap: 4px;
    font-size: 18px;
}
.logo_w img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
}

header .util {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* side menu */
#side {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100% - 80px); /* 헤더 높이(80px)만큼 제외 */
    background: #fff;
    z-index: 9999;
    display: none;
}

#side.active {
    display: block;
}

.gnb_new {
    padding-top: 5%;
}

.gnb_new .gnb_t {
    max-width: 1160px !important;
    gap: 128px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.gnb_new .gnb_t .post {
    width: 100% !important;
    width: 360px !important;
}

.gnb_new .menu_wrap {
    width: 100% !important;
    max-width: 720px !important;
    flex: 1;
}

.gnb_new .menu_wrap .area>:nth-child(1) {
    margin-right: 0px !important;
}

.gnb_new .menu_wrap .area {
    gap: 160px;
}

.gnb_new .menu_wrap .area .menu {
    flex: 1 !important;
}
.gnb_new .menu_wrap .area .menu .other{
    padding: 1px 8px;
    border-radius: var(--Radius-Radius-Full, 999px);
    background: var(--text-999999, #999);
    color: var(--text-inverse, #FFF);
    font-size: var(--size-S4, 12px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.24px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.gnb_new .post img {
    max-width: 483px;
}


.gnb_new .gnb_t .post {
    width: 28%;
    text-align: left !important;
    font-weight: bold
}

.gnb_new .gnb_t .post .gnb_number {
    color: #333;
    font-size: clamp(1.5rem, 1.083rem + 2.083vw, 2.75rem);
    display: flex;
    font-weight: 600;
    padding: 10px 0;
}

.gnb_new .gnb_t .post .gnb_number span {
    color: #045C93 !important;
    font-weight: 600;
}

.gnb_new .gnb_t .post .date {
    color: #4A4A4A;
    font-weight: 600;
    font-size: clamp(1.375rem, -0.125rem + 2.344vw, 1.75rem);
    ;
    margin-bottom: 28px;
    padding-top: 10px;
    border-top: 3px solid #666666;
    letter-spacing: -1.2px;
}

.gnb_new .gnb_t .post img {
    width: 100%;
}
.gnb_new .menu_wrap {
    width: 60%;
}
.gnb_new .menu_wrap .area {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.gnb_new .menu_wrap .area .menu {
    width: 48%;
}

.gnb_new .menu_wrap .area>:nth-child(1) {
    margin-right: 150px;
}
.gnb_new .menu_wrap .area .menu>a {
    color: #045C93;
    font-size: clamp(1.0625rem, -0.6875rem + 2.734vw, 1.5rem);
    font-weight: bold;
    height: 51px;
    display: flex;
    align-items: center;
}


.gnb_new .sub_menu {
    border-top: 1px solid #333;
}

.gnb_new .sub_menu>:nth-child(1) {
    margin-top: 9px;
}

.gnb_new .sub_menu li a {
    font-size: clamp(0.9375rem, 0.1875rem + 1.172vw, 1.125rem);
    color: #222;
    display: block;
    padding: 9px 0 9px 0;
    transition: ease-in-out 0.3s;
}

.gnb_new .sub_menu li a:hover {
    color: #045C93
}
.gnb_new .sub_menu li a:active{
    background: var(--surface-background_color, #D1D9E8);
    color: var(--brand-primary, #045C93);
}
.gnb_new .menu_wrap .area.two {
    margin-top: 40px;
}


@media all and (max-width:1660px) {
    .gnb_new {
        padding: 80px !important;
    }

    .gnb_new .menu_wrap .area {
        gap: 40px;
        justify-content: left !important;
    }

    .gnb_new .menu_wrap .area .menu {
        flex: 1
    }
}

@media all and (max-width:1280px) {
    .gnb_new .gnb_t {
        gap: 40px;
    }

    .gnb_new .gnb_t .post {
        width: 100% !important;
        width: 230px !important;
    }

    .gnb_new {
        padding: 40px !important;
    }

    .gnb_new .menu_wrap .area {
        gap: 40px;
        justify-content: left !important;
    }
}

@media all and (max-width:1024px) {
    /* gnb_new: 스크롤 가능한 세로 레이아웃, 아코디언 없이 항상 펼쳐진 목록 */
    .gnb_new {
        padding: 28px 40px !important;
        height: 100%;
        overflow-y: auto;
    }
    .gnb_new .gnb_t {
        flex-direction: column !important;
        gap: 0 !important;
    }
    /* post 섹션 숨김 */
    .gnb_new .post {
        display: none !important;
    }
    /* menu_wrap 전체 너비 */
    .gnb_new .menu_wrap {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    /* area 세로 나열 */
    .gnb_new .menu_wrap .area {
        flex-direction: column !important;
        gap: 0 !important;
        justify-content: flex-start !important;
        border-bottom: none !important;
    }
    .gnb_new .menu_wrap .area.two {
        margin-top: 0 !important;
        border-top: 1px solid #DCDCDC;
    }
    /* 각 메뉴 그룹: 구분선은 그룹 사이에만 (area 경계는 area.two 자체 border-top으로 처리) */
    .gnb_new .menu_wrap .menu {
        width: 100% !important;
        flex: none !important;
        padding: 0 0 28px;
        border-bottom: none;
    }
    .gnb_new .menu_wrap .menu:not(:first-child) {
        border-top: 1px solid #eee;
    }
    /* 카테고리 타이틀: 가운데 정렬된 정적 라벨 (클릭/아코디언 없음) */
    .gnb_new .menu_wrap .menu > a {
        display: block !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px 0 !important;
        font-weight: 700 !important;
        font-size: 20px !important;
        text-align: center !important;
        border-bottom: none !important;
        margin-bottom: 0 !important;
        height: auto !important;
        color: var(--main) !important;
        cursor: default;
    }
    .gnb_new .menu_wrap .menu.pt0 > a {padding-top: 0 !important;}
    /* sub_menu: 항상 펼쳐진 상태 */
    .gnb_new .sub_menu {
        max-height: none !important;
        overflow: visible !important;
        border-top: none !important;
        padding: 0 25px !important;
    }
    .gnb_new .sub_menu > :nth-child(1) {
        margin-top: 0 !important;
    }
    .gnb_new .sub_menu li a {
        padding: 12px 0 !important;
        line-height: 1.4 !important;
        color: #333 !important;
        text-align: center !important;
        border-bottom: none !important;
        font-size: 16px;
    }
    .gnb_new .menu_wrap .area > :nth-child(1) {
        margin-right: 0 !important;
    }
}
@media all and (max-width:767px){
    #side{
        top: 60px;
    }
    .mo_only{
        display: block !important;
    }
}
/* list */
.listWrap {
    font-size: var(--t16);
    padding: 5px 20px;
    line-height: 1.75;
    border-radius: var(--Radius-Radius-Full, 999px);
    background: var(--button-hover-press-30, rgba(183, 194, 206, 0.30));
    transition: all .3s;
    cursor: pointer;
}

.listWrap:hover {
    color: var(--brand-primary, #045C93);
    background: var(--button-hover, #DFE3E6);
}
.listWrap:active {
    color: var(--brand-primary, #045C93);
    background: var(--button-hover, #CAD5DE);
}

.btn_side {
    width: 48px;
    height: 48px;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
    display: block;
    transition: all .3s;
}

.btn_side:hover {
    background: var(--button-hover, #DFE3E6);
}
.btn_side:active {
    background: var(--button-hover, #CAD5DE);
}
.btn_side:hover span, 
.btn_side:active span {
    background: var(--brand-primary, #045C93);
}

.btn_side span {
    position: absolute;
    height: 2px;
    width: 24px;
    background: #222;
    border-radius: 2px;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.btn_side span:nth-child(1) {
    top: 16px;
}

.btn_side span:nth-child(2) {
    top: 24px;
}

.btn_side span:nth-child(3) {
    top: 32px;
}

.btn_side.active span:nth-child(1) {
    top: 23px !important;
    transform: translateX(-50%) rotate(45deg) !important;
}

.btn_side.active span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(0) !important;
}

.btn_side.active span:nth-child(3) {
    top: 23px !important;
    transform: translateX(-50%) rotate(-45deg) !important;
}

.close {
    display: none;
    position: absolute;
    top: 50px;
    right: 6%;
    width: 35px;
    height: 33px;
    background-image: url('../../../images/btn_close.png');
    background-position: 0 0;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    text-indent: -9999px;
    opacity: 1
}

.gnb {
    margin-top: 40%;
    padding-left: 20%;
    height: 100%;
}

.gnb>li {
    font-size: clamp(1rem, 0.917rem + 0.417vw, 1.25rem);
    font-weight: normal;
    margin-bottom: 10%;
    font-weight: 500;
}

.gnb>li>a {
    color: #404040
}

.gnb>li>a:hover {
    color: #964b9e
}

@media screen and (max-width:767px) {}

:root {
    --main: #045C93;
    --t16: clamp(0.875rem, 0.833rem + 0.208vw, 1rem);
    --t18: clamp(1rem, 0.958rem + 0.208vw, 1.125rem);
    --t20: clamp(1rem, 0.917rem + 0.417vw, 1.25rem);
    --lh26: 1.625;
    --lh44: 2.2;
    --radius: 16px
}

.ccolor {
    color: #045C93;
}

.vol b {
    font-weight: 600;
}

/*인트로*/
.intro {
    margin-top: 80px;
    display: flex;
    width: 100%;
    background: #f1f1f1;
}

.intro_wrap1,
.intro_wrap2 {
    flex: 1;
    min-width: 0;
}

.intro_wrap1 {
    position: relative;
    overflow: hidden;
    /* aspect-ratio: 3 / 4; */
}

.intro_wrap1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.intro_wrap1 img:first-child {
    position: relative;
    opacity: 1;
}

.intro_wrap1 img.active {
    opacity: 1;
    z-index: 2;
}

.intro_wrap2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding-left: 100px;

}

.intro_wrap2 .intro_t {
    border-top: 1px solid var(--main);
    max-width: 600px;
    width: 100%;
    text-align: center;
    color: var(--main);
    padding: 20px 0;
}
.intro_wrap2 .intro_t:hover{
    color: #034975;
}
.intro_wrap2 .intro_t:active {
    color: #034975;
    background-color: #DFE3E6;
    transition: 0s; /* 클릭은 즉각적인 피드백이 중요하므로 보통 transition을 끕니다 */
}
.intro_wrap2 .intro_t.active {
    background: #DFE3E6;
    border-radius: 0 0 var(--radius) var(--radius);
}

.intro_wrap2 .intro_t .category {
    font-size: var(--t16);
    line-height: var(--lh26);
    font-weight: 400;
    letter-spacing: -0.32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.intro_wrap2 .intro_t .intro_tit {
    font-size: var(--t20);
    line-height: var(--lh44);
    letter-spacing: -0.6px;
    font-weight: 600;
}

.item:active {
    transform: scale(0.97); 
    transition: transform 0.1s ease; 
}
/*콘텐츠*/
.cont {
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 160px;
}

.cont .title {
    font-size: var(--size-H6, clamp(1.875rem, -0.625rem + 3.906vw, 2.5rem));
    font-weight: 600;
    line-height: var(--line-height-H6, 1.35);
    letter-spacing: -0.8px;
}

.title.flexs {
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.line {
    display: inline-block;
    height: 1px;
    background-color: var(--main);
    flex-grow: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.5s ease-out;
}

.line.active {
    transform: scaleX(1);
}

/* item */
.cont .item {
    display: flex;
    min-width: 0;
    padding: 28px 32px 36px 32px;
    flex-direction: column;
    gap: 24px;
    border-radius: var(--radius);
    background: var(--surface-card, #F7F7F7);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
}

.cont .s_tit {
    color: #222;
    font-size: var(--size-H12, clamp(1.25rem, 0.689rem + 1.170vw, 1.625rem));
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.52px;
    margin-bottom: 8px;
}

.cont .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    color: #666;
}

.cont .item .img_wrap {
    overflow: hidden;
    border-radius: var(--radius);
}

.cont .item .img_wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: all .3s;
    transform-origin: center;
}

.cont1 .item:hover img,
.cont3 .item:hover img,
.cont4 .item:hover img {
    transform: scale(1.05);
}
.cont1 .flexs .item{
    flex: 1;
}
/* cont2 */
.cont .flexs {
    justify-content: space-between;
}

.cont2 .flexs .item {
    width: 48.8%;
    padding: 24px 40px 30px 40px;
}

.up.under {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.cont2 .text {
    white-space: normal;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 보여주고 싶은 줄 수 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 1.4;
}

.item.bl {
    background: var(--main-bg1, #F0F6F9);
}



/* cont3 */
.cont3 .item {
    flex: 1;
    background: none;
    box-shadow: none;
    padding: 0;
}
.cont3 .up{
    margin-bottom: 6px;
    line-height: 1.6;
}
.cont3 .s_tit{
    min-height: 72px;
}
.cont3 .img_wrap{
    flex-grow: 1;
    overflow: hidden;
}
.cont3 .img_wrap .image{
    width: 100%; height: 100%;
}
.cont3 .img_wrap .image img{
    width: 100%; height: 100%;
    object-fit: cover;
}
/* cont4 */
.cont4 .flexs {
    flex-wrap: nowrap;

}
.cont4 .item {
    padding: 30px;
    gap: 22px 28px;
    max-height: 547px;
}
.cont4 .item a {
    display: contents;
}
.cont4 .up{
    margin-bottom: 12px;
}
.cont4 .s_tit{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.4em * 2);
}
.cont4 .item span {
    width: 100%;
    height: 1px;
    background: #222;
}
.cont4 .img_wrap{
    overflow: hidden;
    flex-grow: 1;
}
.cont4 .img_wrap.pt6{
    padding-top: 0;
    margin-top: 6px;
}
.cont4 .image{
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
}
.cont4 .image img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cont4 .s_tit .other{
    width: fit-content;
    height: auto;
    display: inline-block;
    line-height: 1.57;
    padding: 1px 10px;
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--Radius-Radius-Full, 999px);
    background: var(--text-999999, #999);
    color: var(--text-inverse, #FFF);
    font-size: var(--size-S3, 14px);
    position: relative;
    top: -2px;
}
@media screen and (max-width:1024px) {
    .cont4 .item{
        padding: 20px;
        gap: 16px 20px !important ;
    }
    .cont3 .img_wrap{
        margin-top: 0;
    }

}
@media screen and (max-width:767px){
    .cont3 .s_tit{
        min-height: 0;
        height: auto;
    }
}
/* footer */
footer {
    background: var(--main);
    padding: 46px 60px;
    color: #f8f8f8;
}

.foot_in.flexs {
    gap: 0;
    justify-content: space-between;
    align-items: center;
}
.fright a:hover img,
.fright a:active img{
    filter: brightness(90%);
}
/* top */
.top_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 6%;
    right: 1.5%;
    z-index: 99;
    cursor: pointer;
    transition: bottom 0.2s ease, opacity 0.2s ease;
    border-radius: 99px;
    background: var(--button-hover-press-30, rgba(183, 194, 206, 0.30));
    width: 48px;
    height: 48px;
    /* button_shadow */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.top_btn.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.top_btn:hover{
    background: var(--button-hover, #DFE3E6);
}
.top_btn:hover path,
.top_btn:active path{
    stroke: #045C93;
}
.top_btn:active{
    background: var(--button-hover, #CAD5DE);
}



@media screen and (max-width:1024px) {
    .intro {
        flex-direction: column;
        align-items: center;
    }

    .intro_wrap1 img {
        width: 100%;
        margin-bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
    }

    .intro_wrap2 {
        padding-left: 0;
        width: 100%;
        align-items: center;
        gap: 0;
    }
    .cont {
        width: 100%;
    }

    .cont .s_tit {
        line-height: 1.4;
    }

    .up {
        margin-bottom: 8px;
    }

    .cont2 .flexs .item {
        width: 90%;
    }

    .cont2 .flexs .item .img_wrap {
        max-width: 600px;
        margin: 0 auto;
    }

    .cont2 .video_wrap {
        max-width: 544px;
        margin: 0 auto;
    }

    .cont2 .up.under {
        text-align: right !important;
    }

    .cont4 .contWrap.flexs {
        flex-direction: row;
        align-items: center;
    }

    .top_btn:hover .hover {
        display: none;
    }

    .top_btn:hover .normal {
        visibility: visible;
    }

    header {
        background: var(--surface-background, #FFF);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    }
}
.mo-only{
    display: none;
}
.width620{
    max-width: 620px;
}
@media screen and (max-width:767px) {
    .cont2 .flexs.mt28{
        margin-top: 0 !important;
    }
    .top_btn{
        display: none;
    }
    .width620{
        max-width: 100%;
    }
    .mo-only{
        display: block;
    }
    .intro_wrap1 img{
        aspect-ratio: 360 / 340;
    }
    .cont .contWrap .flexs{
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .cont3 .contWrap .flexs{
        gap: 10px;
    }
    .cont .contWrap .flexs .item{
        width: 100%;
        padding: 20px 20px 28px 20px;
        gap: 16px;
        margin-bottom: 20px;
        
    }
    .cont3 .contWrap .flexs .item{
        padding: 0;
        margin-bottom: 28px;
    }
    .pc_only {
        display: none;
    }
    .cont .s_tit{
        line-height: 1.3;
    }

    header {
        height: 60px;
        padding: 0 6px 0 20px;
    }


    .logo_w img {
        width: 70px;
    }

    header .util {
        gap: 0px;
    }


    .cont {
        width: 100%;
        margin-bottom: 80px;
    }

    .title.flexs {
    margin-bottom: 12px;
    }
    .intro_wrap1 img {
        width: 100%;
    }

    .up{
        font-size: 0.875rem;
    }
    .fleft.flex{
        display: flex;
    }
    .foot_in.flexs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        align-items: center;
    }
    .fleft.flexs{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .foot_in .copy{
        margin-top: 16px;
        font-size: 14px;
    }
    .cont .text {
        white-space: normal; 
        
        display: -webkit-box;
        -webkit-line-clamp: 2;    
        -webkit-box-orient: vertical;

        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
        height: auto; 
        max-height: 2.8em; 
        line-height: 1.6; 
    }
    
    .cont1 .txt_wrap{
        padding: 0 4px;
    } 
}


@media screen and (max-width:425px) {
    .fleft.flexs {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    footer{
        padding: 46px 10px;
        text-align: center;
    }
}