:root{
    --color-primary: #001448;
    --color-secondary: #3C3C3C;
    --color-dark: #000;
    --color-text: #222;
    --color-text02: #182851;
    --color-white: #fff;
    --mn-sec-padding: 100px;
    --sub-sec-padding: 120px;

    --fz-10: min(2.1vw, 10px); 
    --fz-11: min(2.4vw, 11px); 
    --fz-12: min(2.7vw, 12px); 
    --fz-13: min(2.9vw, 13px); 
    --fz-14: min(3.2vw, 14px); 
    --fz-15: min(3.5vw, 15px); 
    --fz-16: min(3.7vw, 16px); 
    --fz-17: min(4.0vw, 17px); 
    --fz-18: min(4.3vw, 18px); 
    --fz-19: min(4.5vw, 19px); 
    --fz-20: min(4.8vw, 20px); 
    --fz-21: min(5.1vw, 21px); 
    --fz-22: min(5.3vw, 22px); 
    --fz-23: min(5.6vw, 23px); 
    --fz-24: min(5.9vw, 24px); 
    --fz-25: min(6.1vw, 25px); 
    --fz-26: min(6.4vw, 26px); 
    --fz-27: min(6.7vw, 27px); 
    --fz-28: min(6.9vw, 28px); 
    --fz-29: min(7.2vw, 29px); 
    --fz-30: min(7.5vw, 30px); 
    --fz-31: min(7.7vw, 31px); 
    --fz-32: min(8.0vw, 32px); 
    --fz-33: min(8.3vw, 33px); 
    --fz-34: min(8.5vw, 34px); 
    --fz-35: min(8.8vw, 35px); 
    --fz-36: min(9.1vw, 36px); 
    --fz-37: min(9.3vw, 37px); 
    --fz-38: min(9.6vw, 38px); 
    --fz-39: min(9.9vw, 39px); 
    --fz-40: min(10.1vw, 40px); 
    --fz-41: min(10.4vw, 41px); 
    --fz-42: min(10.7vw, 42px); 
    --fz-43: min(10.9vw, 43px); 
    --fz-44: min(11.2vw, 44px); 
    --fz-45: min(11.5vw, 45px); 
    --fz-46: min(11.7vw, 46px); 
    --fz-47: min(12.0vw, 47px); 
    --fz-48: min(12.3vw, 48px); 
    --fz-49: min(12.5vw, 49px); 
    --fz-50: min(12.8vw, 50px);
    
    --h1-fz: 36px;
    --h2-fz: 28px;
    --h3-fz: 24px;
    --h4-fz: 20px;
    --h5-fz: 18px;
    --tit-desc-fz: 18px;
    --detail-fz: 18px;
    --ff-pretendard: 'Pretendard Variable',serif;
    --ff-notoserif:  "Noto Serif KR", serif;
    --ff-libre: 'Libre Baskerville',serif;
}

h1{font-size: var(--fz-36);}
h2{font-size: var(--fz-28);}
h3{font-size: var(--fz-24);}
h4{font-size: var(--fz-20);}
h5{font-size: var(--fz-18);}

body, button, input, select, textarea, a{color: var(--color-text); font-family: var(--ff-pretendard);}


.mo{display: none !important;}
.mo-ib{display: none !important;}
.mo-if{display: none !important;}
.mo-f{display: none !important;}
.mo-g{display: none !important;}

header{position: fixed; top: 30px; width: 100%; margin: 0 auto;  z-index: 999; --hd-text: #222; --hd-ham: #524A43;  transition: 0.5s ease; }
header.hide{ transform: translateY( calc(-100% - 30px) ); box-shadow: unset;}
header.tr{background: transparent; --hd-ham: #fff; box-shadow: unset;}
header .hd-cont{position: relative; z-index: 9999; width: 100%; max-width: 1696px; height: 85px; padding-inline: 80px; justify-content: space-between; align-items: center; display: flex; box-sizing: border-box; margin: auto; background: #fff; border-radius: 50px;}
header .logo-area{width: auto; display: flex; align-items: center; gap: 30px;}
header .logo-txt{color: #182851; font-family: var(--ff-notoserif); font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.5; /* 150% */ letter-spacing: -0.16px;}
header .logo-image {width: 160px; height: auto;}
header .logo-image.cl{display: block;}
header .logo-image.wh{display: none;}
header.tr .logo-image.cl{display: none;}
header.tr .logo-image.wh{display: block;}
header .navigation {flex-grow: 1; display: flex; justify-content: end; align-items: center; height: 100%;}
header .menu-list {display: flex; gap: 60px; justify-content: space-between; width: 100%; max-width: 906px; list-style: none; padding: 0; margin: 0; white-space: nowrap;}
header .menu-item{position: relative; width: fit-content; transition: width 0.5s; text-align: center;}
header .menu-item a{text-align: center; color: var(--hd-text); font-size: 16px; font-family: var(--ff-pretendard); font-weight: 400; line-height: 1.4; word-wrap: break-word; transition: .3s;}
header .menu-item:hover a{color: #182851; font-weight: 600;}
header .menu-item.active a{color: #182851; font-weight: 600;}
header .hd-btn-wrap {display: flex; justify-content: end; align-items: center; width: 250px; gap: 28px;}
header .hd-btn-wrap .btn-login{padding: 10px 27px; border-radius: 99px; border: 1px solid var(--hd-ham); color: var(--hd-text); font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal;}
header .hamburger-button {width: 36px; height: 18px; flex-direction: column; justify-content: space-between; align-items: flex-start; display: inline-flex; background: none; border: none; cursor: pointer; padding: 0; position: relative;}
header .bar {width: 100%; height: 2px; background: var(--hd-ham); transition: all 0.3s;}
header.is-active .bar:nth-child(1) {transform: translateY(8px) rotate(30deg);}
header.is-active .bar:nth-child(2) {opacity: 0;}
header.is-active .bar:nth-child(3) {transform: translateY(-8px) rotate(-30deg);}

#top_menu { position: absolute; top: 50%; left: 0; width: 100%;  height: 0; overflow: hidden; transition: height 0.3s ease-in-out; z-index: 99; } 

#main_header.is-hover #top_menu, #main_header.is-active #top_menu { height:440px; } 
#top_menu .nav-body { display: none; justify-content: space-between; background:#fff url(../img/gnb_bg.webp) left bottom -50px / cover no-repeat; max-width: 1696px; margin: 0 auto; padding: 70px 80px 40px 190px; border-radius: 0 0 60px 60px;}
#top_menu .nav-body.active{display: flex;}
#top_menu .nav-body .nav-txt{display: flex; text-align: left; gap: 85px; }
#top_menu .nav-body .nav-txt h3{color: #001448; font-family: var(--ff-notoserif); font-size: 32px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.32px; width: 195px;}
#top_menu .nav-body .img-box{display: flex; flex-direction: column; gap: 20px; align-items: end;}
#top_menu .nav-body ul {display: flex; align-items: flex-start;}
#top_menu .nav-body ul li{position: relative; display: flex; align-items: start; flex-direction: column; gap: 30px; text-align: left; padding-top: 10px;} 
#top_menu .nav-body ul li a {position: relative; color: #222; font-family: var(--ff-pretendard); font-size: 20px; font-style: normal; font-weight: 500; line-height: 1.5; transition: .3s;}
#top_menu .nav-body ul li a:hover{color: #182851;}
#top_menu .login-btn{color: #444; font-family: var(--ff-pretendard); font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.66; /* 166.667% */ letter-spacing: -0.18px; display: flex; gap: 20px; align-items: center;}
#top_menu .login{color: #000; font-weight: 600;}
#side_menu{position: fixed; top: 0; top: 0; width: 100%; max-width: 1280px; height: 100vh; padding-inline: 46px; transform: translateY(calc(-100% - 100px)); transition: 0.8s ease; z-index: 1000; background-color: #fff; display: none;}
#side_menu.open{transform: translateY(0);}
#side_menu .nav-head{display: flex; align-items: center; justify-content: end; padding-block: 31px; border-bottom: 1px solid rgba(60, 60, 60, 0.50); color: #3C3C3C; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-head button{padding: 0; margin: 0; margin-left: 35px; background-color: transparent; border: 0;}
#side_menu .nav-body{padding: 77px 73px;}
#side_menu .nav-body ul{display: flex; flex-direction: column; gap: 61px;}
#side_menu .nav-body ul li{display: flex; align-items: center;}
#side_menu .nav-body ul li .title{width: 178px; margin-right: 64px; color: #7FA0C1; font-family: "Noto Serif KR"; font-size: 22px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-body ul li a{display: inline-block; color: #3C3C3C; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal;}
#side_menu .nav-body ul li a:last-child{margin-right: 0;}

footer{background: #0B152F; color: #fff;  padding: 80px 0 100px; position: relative;}
footer::after{display: inline-block; background: #0B152F; top: 100%; position: fixed; left: 0; width: 100%; height: 100%; content: "";}
footer a{text-decoration: none;}
footer .inner{width: 100%; max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: end;}
footer .info-list{display: flex; align-items: center;}
footer .info-list li{padding: 0 10px; position: relative; }
footer .info-list li::after{position: absolute; width: 1px; height: 12px; background: #C7C7C7; content: ""; right: 0; top: 50%; transform: translateY(-50%);}
footer .info-list li:last-child:after{display: none;}
footer .info-list li:first-child{padding-left: 0;}
footer .info-list li:last-child{padding-right: 0;}
footer .btn-wrap ul{display: flex; align-items: center; gap: 10px; justify-content: end;}
footer .btn-wrap li{width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid #878787;}
footer .ft-link-wrap{display: flex; justify-content: left; gap: 20px;}
footer .ft-link-wrap a{color: #FFF; text-align: center; font-family: var(--ff-pretendard); font-size: var(--fz-16); font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.16px;}
footer .left-cont{display: flex; flex-direction: column; gap: 30px;}
footer .right-cont{display: flex; flex-direction: column; gap: 20px;}

footer .bottom-cont{display: flex; flex-direction: column; gap: 15px;}
footer .bottom-cont .info-list{color: #C7C7C7;}
footer .bottom-cont .info-list li{color: #C7C7C7;}
footer .copy{color: #C7C7C7; text-align: center; font-family: var(--ff-pretendard); font-size: var(--fz-14); font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.14px;}
.floating-container {position: fixed; bottom: 30px; right: 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; z-index: 990; animation: bounce 0.8s infinite alternate;}
.floating-list{width: 93px; position: relative; background: linear-gradient(180deg, rgba(24, 40, 81, 0.9) 37.71%, rgba(24, 40, 81, 0.85) 100%); border-radius: 100px; overflow: hidden; }
.floating-list ul{display: flex; flex-direction: column; transition: .5s; height: 528px;}
.floating-container.active .floating-list ul{height: 93px;}
.floating-container.hide .floating-list ul{opacity: 0; pointer-events: none;}
.floating-list ul li:last-child{height: 93px;}
.floating-list ul li img{transition: 0s;}
.floating-list ul li a{padding: 20px 0 15px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; color: var(--color-white);  text-align: center; font-family: var(--ff-pretendard); font-size: var(--fz-14); font-style: normal; font-weight: 500; line-height: normal; letter-spacing: -0.14px;}
.floating-list ul li:hover a{color: #CFBC99;}
.floating-list ul li:hover img{filter: brightness(0) saturate(100%) invert(78%) sepia(13%) saturate(674%) hue-rotate(359deg) brightness(90%) contrast(87%);}
.floating-list ul li:first-child a{padding-top: 30px;}
.floating-list ul li:nth-child(5) a{padding-bottom: 30px;}
.floating-trigger.active .floating-list{height: 93px;}
.floating-trigger{cursor: pointer; width: 93px; height: 93px; display: flex; align-items: center; justify-content: center; border-radius: 100px; overflow: hidden; background: #182851; position: absolute; bottom: 0;}
.floating-trigger .def{display: none; color: #fff; font-family: "Libre Baskerville"; font-size: var(--fz-18); font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.36px;}
.floating-container.active .floating-trigger .def{display: block; }
.floating-container.active .floating-trigger .trans{display: none;}
.floating-container .top-btn{display: flex; width: 93px; height: 93px; justify-content: center; align-items: center; border-radius: 100px; background: rgba(255, 255, 255, 0.80); cursor: pointer; border: 1px solid #182851;}
.hamberger {transition: all .3s; cursor:pointer; transition-duration: .7s;display:none;align-items:center; justify-content: center;  z-index: 2; height: 23px;}
.hd_menu{display:block; z-index:1;}
.hd_menu:after{left:0;top:0;width:100%;}
.hd_menu span{transition: .3s; display:block;background:#182851;width:38px; height:3px; border-radius:0px; transition:margin .25s .25s,transform .25s, background .25s;background-size:cover; border-radius: 10px; overflow: hidden;}
.hd_menu span:first-child{margin-bottom:7px;}
.hd_menu span:nth-child(3){margin-top:7px;}
.second .hd_menu span{background: #5D5D5D;}
.second + #moHeader .hd_menu span{background: #5D5D5D;}
.hamberger.on .hd_menu span{background: #5D5D5D;}
.on .hd_menu span{transition:margin .25s,transform .25s .25s; width: 35px;}
.on .hd_menu span:first-child{margin-top:0;margin-bottom:0;transform:rotate(45deg)}
.on .hd_menu span:nth-child(2){transform:rotate(135deg);margin-top: -3px;}
.on .hd_menu span:nth-child(3){margin-top:6px;transform:rotate(135deg); opacity:0; display: none;}
@keyframes rotateText {
    from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
@keyframes bounce {
    0%{
        transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
    }
    100%{
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}
.mo-1024{display: none!important;}
@media(max-width: 1440px){
    header .hd-cont{max-width: 92%;}
    header .menu-list{gap: 0; max-width: 800px;}
    header .hd-cont{gap: 20px;}
}    

@media(max-width: 1024px){
    :root{
        --mn-sec-padding: 80px;
        --sub-sec-padding: 100px;
        --fz-12: min(3.0vw, 12px);
        --fz-13: min(3.1vw, 13px);
        --fz-14: min(3.3vw, 14px);
        --fz-15: min(3.5vw, 15px);
        --fz-16: min(3.8vw, 16px);
        --fz-17: min(4.0vw, 17px);
        --fz-18: min(4.3vw, 18px);
        --fz-19: min(4.5vw, 19px);
        --fz-20: min(4.8vw, 20px);
        --fz-21: min(5.0vw, 21px);
        --fz-22: min(5.3vw, 22px);
        --fz-23: min(5.5vw, 23px);
        --fz-24: min(5.8vw, 24px);
        --fz-25: min(6.0vw, 25px);
        --h1-fz: var(--fz-25);
        --h2-fz: var(--fz-22);
        --h3-fz: var(--fz-20);
        --h4-fz: var(--fz-18);
        --h5-fz: var(--fz-16);
        --tit-desc-fz: var(--fz-16);
        --detail-fz: var(--fz-18);
    }

    .pc{display: none !important;}
    .mo{display: block !important;}
    .mo-ib{display: inline-block !important;}
    .mo-if{display: inline-flex !important;}
    .mo-f{display: flex !important;}
    .mo-g{display: grid !important;}

    .pc-1024{display: none!important;}
    .mo-1024{display: block!important;}
    header .hd-cont{height:90px; padding-inline: 6%; max-width: 92%;}
    header .logo-image{width: 180px;}
    header .logo-image{width: 18vw;}
    header .navigation{display: none;}
    header .hd-btn-wrap .btn-login{display: none;}
    header .hamburger-button{width: 28px; gap: 5px;}
    header .bar{height: 1.5px;}
    .hamberger {display: flex;} 
    #top_menu{display: none;}
    #side_menu{max-width: 100%; padding-inline: 20px; padding-top: 100px; opacity: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden;}
    #side_menu.open{opacity: 1;}
    #side_menu .nav-head{padding: 0; border: none; color: #444; font-family: var(--ff-pretendard); font-size: var(--fz-20); font-style: normal; font-weight: 500; line-height: 1.66; letter-spacing: -0.18px; display: flex; gap: 20px; align-items: center;} 
    #side_menu .nav-head a{font-family: var(--ff-pretendard); font-size: var(--fz-20); font-style: normal; font-weight: 500; line-height: 1.66; letter-spacing: -0.18px;}
    #side_menu .nav-head a:first-of-type{color: #000; font-weight: 600;}
    #side_menu .nav-body{padding: 40px 20px; flex: 1 1 auto; overflow-y: scroll; max-height: 600px;}
    #side_menu .nav-body ul{gap: 0; overflow: hidden; }
    #side_menu .nav-body ul li{flex-direction: column; align-items: flex-start; padding: 40px 0; border-bottom: 1px solid #D2D2D2;}
    #side_menu .nav-body ul li:first-child{ padding-top: 0px;}
    #side_menu .nav-body ul li:last-child{ padding-bottom: 0px; border: none;}
    #side_menu .nav-body ul li .side-menu-title{width: 100%; font-size: var(--fz-32); font-family: var(--ff-notoserif); font-weight: 600; color: #001448; position: relative;}
    #side_menu .nav-body ul li .side-menu-title::after{display: inline-block; width: 27px; height: 12px; background: url(../img/nav-arrow.png) center center / 100% no-repeat; position: absolute; right: 0; content: ""; top: 50%; transform: translateY(-50%); transition: .5s;}
    #side_menu .nav-body ul li.active .side-menu-title::after{transform: rotate(-180deg) translateY(50%);}
    #side_menu .nav-body ul li.no-sub .side-menu-title::after{display: none;}
    #side_menu .nav-body ul li .title{width: 100%; margin-right: 0; font-size: var(--fz-24);}

    #side_menu .nav-body .side-sub-links{display: flex; gap:100px; padding-left: 20px; align-items: center;}
    #side_menu .nav-body ul li a{font-size: var(--fz-24); font-family: var(--ff-pretendard);}
    #side_menu .nav-body ul li .side-menu-img{padding-top: 30px;}
    #side_menu .nav-body ul li .side-menu-img img{width: 100%;}
    #side_menu .nav-body ul li img{width: 100%;}
    #side_menu .side-sub-menu{display: flex; flex-direction: column; gap: 40px; height: 0px; transition: .5s;overflow: hidden;}
    #side_menu .side-menu-item.active .side-sub-menu{height: 285px;}
    footer .inner{flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 20px;}
    footer .ft-link-wrap{justify-content: center;}
    footer .btn-wrap{display: none;}
}

@media(max-width: 768px){
    header{background: rgba(255, 255, 255, 1); top: 0;}
    header .hd-cont{background: none; height: 60px; border-radius: 0; padding-inline: 40px; max-width: 100%;}
    header .logo-image {width: 32vw; max-width: 160px;}
    header .logo-txt{display: none!important;}
    #side_menu .nav-head{font-size:  min(3.2vw, 16px); padding-right: 20px;}
    #side_menu .nav-head a{font-size:  min(3.2vw, 16px);}
    #side_menu .nav-body{max-height: 100%; overflow: auto;}
    #side_menu .nav-body ul li a{font-size: min(3.2vw,16px); white-space: nowrap;}
    #side_menu .nav-body .side-sub-links{justify-content: start; gap: 25px; padding: 0 10px;}
    #side_menu .nav-body ul li .side-menu-title{font-size: min(5vw , 32px);}
    #side_menu .nav-body ul li .side-menu-title::after{width: 16px;}
    #side_menu .nav-body ul li .side-menu-img{padding-top: 20px;}
    #side_menu .nav-body ul li{padding: 20px 0;}
    #side_menu .side-sub-menu{gap: 20px;}
    #side_menu .side-menu-item.active .side-sub-menu {height: 28vw; }
    footer .info-list{flex-wrap: wrap; justify-content: center; gap: 2px;}
    footer .left-cont img{width: 30vw;}
    footer .ft-link-wrap a{font-size: min(3.5vw , 16px); }
    .floating-container{gap: 10px;}
    .floating-container .top-btn{width: 18vw; height: 18vw; max-width: 93px; max-height: 93px;}
    .floating-list ul{height: 113vw; max-height: 477px;}
    .floating-list ul li a{padding: 15px 0 10px;}
    .floating-list ul li a{font-size: min(3.2vw , 16px);}
    .floating-list ul li:first-child a{padding-top: 20px;}
    .floating-list ul li:nth-child(5) a{padding-bottom: 20px;}
    .floating-list ul li:last-child{height: 18vw; max-height: 93px;}
    .floating-list{width: 18vw; max-width: 93px;}
    .floating-trigger{width: 18vw; height: 18vw; max-width: 93px; max-height: 93px;}
    .floating-trigger .def{font-size: min(3.2vw, 18px);}
}
@media(max-width: 425px){
    #side_menu .side-menu-item.active .side-sub-menu {height: 130px;}
    #side_menu{padding-top: 60px;}
    .floating-list ul{height: 110vw; min-height: 428px;}
    .floating-container.active .floating-list ul{height: 18vw; min-height: 0px;}
    .floating-trigger .trans img{width: 5vw;}
}