@charset "utf-8";



@font-face {
    font-family:'Times New Roman';
    font-style:normal;
    font-weight:normal;
    font-display: block;
    src:local(''),
    url('font/times-new-roman-italic.woff') format("woff");
}

.en {font-family: var(--enSerif);}

.page_wrap { display: flex; flex-direction: column; min-height: 100vh;}
.page_wrap .container { flex: 1;}

/* common */
.in { width:164rem; max-width:100%; padding:0 var(--inPd); margin:0 auto; position:relative; }

.hidden { clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; }
.clearfix::after{content: ''; display: block; clear: both;}


.swiper-wrapper.disabled { transform: translate3d(0px, 0, 0) !important; }
.swiper-pagination.disabled, .swiper-button-prev.disabled, .swiper-button-next.disabled, .swiper-button-pause.disabled { display: none; }
.swiper-button-next, .swiper-button-prev { outline:none; }

svg {overflow: visible}


/*html.scroll {overflow: visible}*/

.swiper-pagination-progressbar {background: transparent !important;}
*::-webkit-scrollbar {-webkit-appearance: none;}
*::-webkit-scrollbar:vertical {width: 10px;}
*::-webkit-scrollbar:horizontal {height: 5px;}
*::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .3);border-radius: 5px;}
*::-webkit-scrollbar-track {border-radius: 10px;background-color: rgba(0, 0, 0, .1);}

/*--txt:1.6rem;*/


:root {
    --blue: #fff;
    --pur: #5B4599;


    --txt:1.6rem;
    --smTxt:1.3rem;
    --tinyTxt:1.2rem;
    --bigTxt:2rem;

    --inPd:max(15px,2rem);
    --contTit1: 5rem;
    --contTit2: 4rem;
    --sectPd:30rem;

    --headerPd: 5rem;

    --enSerif: "Cormorant Garamond", serif;
    --Outfit: "Outfit", sans-serif;
    --EulSerif: 'Eulyoo1945', serif;
    --NotoSerif: 'Noto Serif KR', serif;
    --awesome: 'Font Awesome 6 Pro';
    --ease1:  cubic-bezier(0.68, 0.03, 0.33, 1);
    --ease2:  cubic-bezier(0.63, 0.04, 0.53, 1);

    --header_Height : 8rem;
    --main_desc:3.5rem;
}




body {font-size: 17px; background-color: #fff; word-break: keep-all}

/*--------------공통스타일--------------*/



.nice-select .list {transition: none}

.header .ham_nav .top_box,
.header { display: flex; align-items: center; justify-content: space-between ;position: fixed; left: 0; top: 0; height: var(--header_Height); width: 100%; padding: 0 var(--headerPd); z-index: 60; color: #fff;
    transition: background-color 0.3s ease-in-out , color 0.3s ease-in-out , top 0.3s ease-in-out}
.header .ham_nav .top_box .ham_logo,
.header .logo {display: flex; width: 170px; }
.header .ham_nav .top_box .logo svg,
.header .logo svg {width: 170px; height: auto}
.header .logo svg path {transition: fill 0.3s ease-in-out}

.header.on.mo_on nav .depth1 > li:before {content: none}
.header.on.mo_on .nav .depth1 > li > a:before {content: none}
.header.on.mo_on nav .depth1 .depth2 li > a:hover span:before {opacity: 0}


.header nav {position: absolute; left: 50%; top: 0; height: 100%; transform: translate(-50%,0%); z-index: 1}
.header nav .depth1 {display: flex; align-items: center; height: 100%;}
.header nav .depth1 > li { position: relative; height: 100%; display: flex; align-items: center; font-size: 1.2em;}
.header nav .depth1 > li:before {content: "";position: absolute; left: 50%; top: 0px; transform: translate(-50%,0) ;width: 100%; height: 0px;opacity: 0; ;background-color: #004a98; }
.header nav .depth1 > li > a {display: flex; align-items: center; justify-content: center ;position: relative; padding: 0 3em; width: 100%; height: 100%;  font-weight: 500; white-space: nowrap ;transition: padding .3s}
.header nav .depth1 > li > a:before {content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background-color: rgba(255,255,255,0.5); transition: width 0.3s ease-out}
.header nav .depth1 .depth2 {position: absolute; bottom: -3rem; left: 50%; transform: translate(-50%,100%); width: 100%; height: 22rem; white-space: nowrap; text-align: center; opacity: 0; pointer-events: none ;}
.header nav .depth1 .depth2 > li + li {margin-top: 1.5rem}
.header nav .depth1 .depth2 > li > a {position: relative; display: inline-block; width: 100%; font-size: 0.95em; font-weight: 400; opacity: 0.5; transition: opacity 0.3s ease-out}
.header nav .depth1 .depth2 > li > a span {position: relative}
.header nav .depth1 .depth2 > li > a span:before {content: ""; position: absolute; left: -1.5rem; top: 50%; transform: translate(100%,-50%); width:0.4rem; height: 0.4rem; border-radius: 50%; background-color: #fff; opacity: 0; transition: opacity 0.3s ease-out , left 0.3s ease-out}
.header nav .depth1 .depth2 > li > a span.outer_link:after {content: "\f08e"; font-family: "Font Awesome 6 Sharp"; position: absolute; right: -10px; bottom: 0%; transform: translate(100%,0%); font-weight: 300; font-size: 0.8em}

.header nav .depth1 .depth2 > li.active .depth3 {display: block !important;}

.header nav .depth1 .depth3 {margin-top: 1rem; display: none}
.header nav .depth1 .depth3 > li {}
.header nav .depth1 .depth3 > li > a {font-size: 0.75em; opacity: 0.4; transition: opacity 0.3s ease-out}
.header nav .depth1 .depth3 > li > a.active {opacity: 1}
.header nav .depth1 .depth3 > li + li {margin-top: 5px}


.header nav .depth1 .depth2 > li.active > a { opacity: 1; }
.header nav .depth1 .depth2 > li.active > a span:before {opacity: 1; right: -1rem}
.header nav .depth1 > li.active > a:before {opacity: 1}

.header nav .depth1 > li.active > a span {text-decoration-line: underline;text-decoration-style: solid;text-underline-position: under;text-underline-offset: 2px;text-decoration-thickness: 1px ;}

.header .gnb_bg {position: absolute; left: 0; top: 0; width: 100%; height: 0; background-color: rgb(0 74 152 / 70%); backdrop-filter: blur(25px); z-index: -1; overflow: hidden; opacity: 0; }




.header .right_wrap {margin-left: auto; display: flex; align-items: center; height: 100%; position: relative}

.header .right_wrap .btn {margin-left: 2rem; display: flex; align-items: center}
.header .right_wrap .btn .ico {width: 2rem;display: block}
.header .right_wrap .btn svg {width: 2rem; height: auto; fill: #fff; transition: fill 0.3s ease-in-out}

.header .right_wrap .global {display: flex; align-items: center; position: relative; height: 100%}
.header .right_wrap .global .btn_txt {font-size: var(--smTxt); font-weight: 500;}

.header .right_wrap .global .btn_nav {position: absolute;left: 50%;bottom: 0px;transform: translate(-50%,100%);box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.1);text-align: left;z-index: 15;background-color: #fff;font-size: var(--smTxt);opacity: 0;pointer-events: none;transition: all .3s; color: #000}

/*.header .right_wrap .global .btn_nav li {opacity: 0.8; transition: opacity 0.3s ease-in-out}*/
.header .right_wrap .global .btn_nav li a {padding: 6px 20px; display: block; white-space: nowrap ;transition: background-color 0.3s ease-in-out}
.header .right_wrap .global .btn_nav li a:hover {opacity: 1; background-color: #eee}





.header.down {background-color: #fff;color: #000 !important;box-shadow: 0 0 23px 5px rgba(0, 0, 0, 0.03);}
.header.down .logo svg path{fill: #004a98 !important;}
.header.down .logo svg .bbb {fill: #8dc6e8 !important;}
.header.down .right_wrap .btn svg {fill: #000 !important;}


.header.no {top: calc((var(--header_Height) + 2px) * -1) !important;}
.header.scroll_down {top: calc((var(--header_Height) + 2px) * -1)}
.header.on.scroll_down .gnb_bg {opacity: 0}
.header.on.scroll_down nav .depth1 > li .depth2 {opacity: 0;}
.header.on.scroll_down nav .depth1 > li:before {height: 0}


.ham_nav {position: fixed; left: 0; top: 0; transform: translateY(-100%); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgb(0 74 152 / 70%); backdrop-filter: blur(25px); z-index: 999; display: none}
.header .ham_nav .top_box .ham_logo {background: url('/images/logo.png') no-repeat;height: 4rem;}
.header .ham_nav .top_box .ham_logo {width: 31rem}
.ham_nav .ham_logo {overflow: hidden;width: 10rem}
.ham_nav .ham_logo svg {transform: translateY(150%); transition: 0.3s cubic-bezier(0.54, 0, 0.23, 0.97); width: 100%; height: auto}
.ham_nav .ico {width: 3rem; height: 3rem; position: relative}
.ham_nav .line_box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;}
.ham_nav .line_box > span {position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; background-color: #fff; opacity: 0; transition: opacity 0.3s ease-out, transform 0.3s ease-out }
.ham_nav .line_01 { transform:  translate(-50%,-50%) rotate(0deg);}
.ham_nav .line_02 { transform:  translate(-50%,-50%) rotate(-0deg);}


.ham_nav .depth_list {display: flex; color: #fff;}
.ham_nav .depth_list a {overflow: hidden; display: block; text-align: center}
.ham_nav .depth_list a span {display: inline-block; transform: translateY(102%); transition: 0.6s ease-out }
.ham_nav .depth_list > li {position: relative}
.ham_nav .depth_list > li.active .depth2 {display: block}
.ham_nav .depth_list > li:before {content: ""; position: absolute; left: 50%; top: -4rem; transform: translate(-50%,-100%); width: 1rem; height: 1rem;border-radius: 50%; background-color: #fff; opacity: 0; transition: opacity 0.3s ease-out , top 0.3s ease-out; }
.ham_nav .depth_list > li + li {margin-left: 11rem}
.ham_nav .depth_list > li > a {font-size: 3.5rem; font-weight: 700}
.ham_nav .depth_list .depth2 {margin-top: 3rem; text-align: center}
.ham_nav .depth_list .depth2 > li + li {margin-top: 3rem}
.ham_nav .depth_list .depth2 > li > a {;font-size: var(--bigTxt); font-weight: 500; opacity: 0.5; line-height: 1.7; transition: opacity 0.3s ease-out}
.ham_nav .depth_list .depth2 > li > a span {position: relative; transition: 0.6s cubic-bezier(0.54, 0, 0.23, 0.97) }
.ham_nav .depth_list .depth2 > li > a span:before {content: ""; position: absolute; left: 50%; bottom: 2px; transform: translate(-50%,100%); width: 0; height: 1px; background-color: #fff; transition: width 0.3s ease-out}
.ham_nav .depth_list .depth2 > li > a span.outer_link:after {content: "\f08e"; font-family: "Font Awesome 6 Sharp"; position: absolute; right: -8px; top: 50%; transform: translate(100%, -50%); font-weight: 300; font-size: 0.8em}

.ham_nav .depth_list .depth3 {margin-top: 1rem; }
.ham_nav .depth_list .depth3 > li + li {margin-top: 10px}
.ham_nav .depth_list .depth3 > li > a {font-size: 0.85em;opacity: 0.4;}

.ham_nav {display: flex}
.ham_nav.up {transition-delay: 0.5s}

.ham_nav.on {transform: unset}
.ham_nav.on .depth_list a span,
.ham_nav.on .ham_logo svg {transform: unset; transition: 0.3s ease-out 0.6s}
.ham_nav.on .depth_list .depth2 > li > a span { transition: 0.6s cubic-bezier(0.54, 0, 0.23, 0.97) 0.8s}
.ham_nav.on .depth_list .depth3 > li > a span { transition: 0.6s cubic-bezier(0.54, 0, 0.23, 0.97) 0.8s}
.ham_nav.on .depth_list .depth2 > li.active > a span:before {width: 100%;  transition: width 0.3s ease-out 1.2s}
.ham_nav.on .line_box > span {opacity: 1; transition: opacity 0.3s ease-out 1s, transform 0.3s ease-out 1.3s}
.ham_nav.on .line_01 {transform:  translate(-50%,-50%) rotate(45deg);}
.ham_nav.on .line_02 {transform:  translate(-50%,-50%) rotate(-45deg);}

.ham_nav.on .depth_list > li.active:before {opacity: 1; top: -2rem; transition: opacity 0.3s ease-out 1.2s , top 0.3s ease-out 1.2s; }

.header.on {background-color: transparent; box-shadow: none; color: #fff !important;}
.header.on nav .depth1 > li > a{padding: 0 4em}
.header.on .gnb_bg{height: 45rem; opacity: 1; transition: height 0.3s ease-in-out, opacity 0.2s ease-in-out;}
.header.on nav .depth1 > li:before{height: 45rem;  transition: height  ease-in-out.5s, opacity ease-in-out .5s }
.header.on nav .depth1 > li .depth2 {opacity: 1;;pointer-events: visible; transition: opacity 0.3s; transition-delay: .1s}
.header.on nav .depth1 a svg {fill: #fff}
.header.on .logo svg path{fill: #fff !important;}
.header.on .right_wrap .btn svg {fill: #fff !important;}


#sub .header { color: #000; }
#sub .header .logo svg path{fill: #000}
#sub .header .logo svg g rect + path {fill: #fff}
#sub .header .right_wrap .btn svg {fill: #000}

html {font-size: clamp(10px, calc(0.45vw), 14px); }


/*호버스타일*/
@media screen and (min-width: 1240px){
    .header .right_wrap .global.on .btn_nav,
    .header .right_wrap .global:hover .btn_nav {bottom: 1.5rem; opacity: 1; pointer-events: auto}


    .header .nav .depth1 > li:hover:before{opacity: 1;}
    .header .nav .depth1 > li:hover > a:before {width: 100%}
    .header nav .depth1 .depth2 li > a:hover {opacity: 1}
    .header nav .depth1 .depth2 li > a:hover span:before {opacity: 1; }

    .ham_nav .depth_list > li:hover:before {opacity: 1; top: -2rem;}
    .ham_nav .depth_list .depth2 > li > a:hover {opacity: 1}
    .ham_nav .depth_list .depth2 > li > a:hover span:before {width: 100%;}
    .ham_nav .depth_list .depth2 > li.active > a {opacity: 1}

}


@media screen and (max-width: 2800px) {
    :root {
        --txt:clamp(16px, .1875vw + 13.25px, 18.5px);
        --smTxt:clamp(14px, .125vw + 11.5px, 15px);
        --tinyTxt: clamp(11px, .125vw + 8.5px, 12px);
        --bigTxt:clamp(20px, .375vw + 11.25px, 23px);
    }
}


@media screen and (max-width: 2000px) {
    html {font-size: 9.5px}

}


@media screen and (max-width: 1640px) {
    html {font-size: 8.5px}

    .header .ham_nav .top_box, .header {padding: 0 var(--inPd)}
    .header nav .depth1 > li > a {padding: 0 2.5em;}
    .header.on nav .depth1 > li > a {padding: 0 3em}
    .header.on nav .depth1 > li:before,
    .header.on .gnb_bg{height: 48rem; }


}


@media screen and (max-width: 1440px) {
    .header nav .depth1 > li > a {padding: 0 1.5em;}
    .header.on nav .depth1 > li > a {padding: 0 2.5em}
    .ham_nav .depth_list > li > a {font-size: 3rem}
    .footer .cont_box .right {margin-left: 6rem}
    /* .header nav {left: 45%} */
}


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

    :root {
        --txt:14px;
        --smTxt:12px;
        --bigTxt:18px;
        --sectPd:180px;
        --main_desc: 3rem;
    }

    .pc_over{display: block !important;}
    .pc_over.ib{display: inline-block !important;}
    .pc_only{display: none !important;}

    html {font-size: 8px}
    .header nav {display: none}

    
    .ham_nav .depth_list > li + li {margin-left: 4rem}
   /*  .ham_nav .depth_list > li > a {font-size: var(--bigTxt)}
   .ham_nav .depth_list .depth2 > li > a {font-size: var(--txt)}*/
    .header .right_wrap .global.on .btn_nav {bottom: 1.5rem;opacity: 1;pointer-events: auto;}



    .header {top: 0 !important;}
    #sub .header {background-color: #fff}
}

@media screen and (max-width: 1000px) {
    .ham_nav { display: flex; align-items: flex-start; height: 100%; padding: 100px 0; overflow: auto; left: auto; right: 0; transform: translateX(100%); width: 90%; background-color: #fff; backdrop-filter: none; transition: none}
    .header  .gnb_bg { height: 100%;  opacity: 1; pointer-events: auto; display: block; position: fixed; z-index: 500;  transform: translateX(100%)}
    .ham_nav.on {transition: transform 0.6s cubic-bezier(0.54, 0, 0.23, 0.97);}

    .gnb_bg.on { transform: unset; /*transition: transform 0.6s cubic-bezier(0.54, 0, 0.23, 0.97);*/}
    .header .ham_nav .top_box {position: absolute; padding: 0 25px}
    .ham_nav .ham_logo path {fill: #000}
    .ham_nav .ham_logo rect + path {fill: #fff}
    .ham_nav .line_box > span {background-color: #000}

    .ham_nav .depth_list { flex-direction: column; align-items: flex-start; width: 100%; padding: 0 25px; color: #000}
    .ham_nav .depth_list .depth2 { display: none; text-align: left; }
    .ham_nav .depth_list > li { width: 100%; }

    .ham_nav .depth_list > li > a { position: relative; font-size: 22px; text-align: left; }
    .ham_nav .depth_list > li > a.single_depth:before {content: none}
    .ham_nav .depth_list > li > a.single_depth:after {content: none}
    .ham_nav .depth_list > li > a:before { content: ''; position: absolute; right: 0; top: calc(50% - 2px); width: 0.9em; height: 2px; background-color: transparent; transform: translateY(-50%); transition: background-color 0.6s; }
    .ham_nav .depth_list > li > a:after { content: ''; position: absolute; right: 0; top: calc(50% - 2px); width: 0.9em; height: 2px; background-color: transparent; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s, opacity 0.3s, background-color 0.6s; }
    .ham_nav .depth_list > li.open > a:after { transform: translateY(-50%) rotate(0); opacity: 0; }
    .ham_nav.on .depth_list > li > a:before { background-color: #000; transition: background-color 0.3s 1s;}
    .ham_nav.on .depth_list > li > a:after { background-color: #000; transition: transform 0.3s, opacity 0.3s, background-color 0.3s 1s; }
    .ham_nav.on .depth_list > li.dir_menu > a:before { display: none}
    .ham_nav.on .depth_list > li.dir_menu > a:after { display: none }
    .ham_nav .depth_list > li + li { margin-left: 0; margin-top: 40px; }
    .ham_nav .depth_list > li:before {width: 5px; height: 5px; }

    .ham_nav.on .depth_list > li.active:before {display: none}
    .ham_nav .depth_list .depth2 > li + li {margin-top: 15px}
    .ham_nav .depth_list .depth2 > li > a { font-size: 18px; opacity: 1; padding-left: 15px; font-weight: 500}
    .ham_nav .depth_list .depth2 > li > a span:before {background-color: #000}
    .ham_nav .depth_list .depth3 {margin-top: 15px}
    .ham_nav .depth_list .depth3 > li > a {font-size: 0.9em; opacity: 1}
    .ham_nav .depth_list a {text-align: left}
    .ham_nav .depth_list .depth3 {padding-left: 25px; padding-bottom: 10px}
    .header .ham_nav .top_box .ham_logo {background: url('/images/logo_on.png') no-repeat;height: 4rem;}

    .header .ham_nav .top_box .ham_logo, .header .logo {width: 31rem}


}



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


    :root {
        --txt:13px;
        --bigTxt:18px;
        --sectPd:120px;
        --main_desc: 16px;
        --contTit1: 30px;
        --contTit2: 24px;
        --header_Height: 10rem;
        --contMt1: 30px;
        --contMt2: 40px;
        --contTitMb: 10px;


    }

    html {font-size: 7px}
    .header nav {display: none}




    .ham_nav .depth_list > li > a { font-size: 16px; }
    .ham_nav .depth_list .depth2 > li > a { font-size: 14px; }
    .ham_nav .depth_list .depth3 > li > a { font-size: 13px;}
    .ham_nav .depth_list .depth3 > li > a.active {font-weight: 700}
    .header .ham_nav .top_box .ham_logo {background: url('/images/logo_on.png') no-repeat;height: 4rem;}

    .header .ham_nav .top_box .ham_logo, .header .logo {width: 31rem}
    .header .right_wrap .btn svg {width: 3.2rem}
    .header .right_wrap .global {margin-right: 0}
    /* .header .right_wrap .global .btn_txt {margin-left: 7px} */

}


@media screen and (max-width: 600px) {
    html {font-size: 6px}
    :root {
        --sectPd:120px;
        --main_desc: 16px;
    }

    .header .ham_nav .top_box .ham_logo {background: url('/images/logo_on.png') no-repeat;height: 5rem;}

    .header .ham_nav .top_box .ham_logo, .header .logo {width: 37rem}
}