@charset "utf-8";


@font-face { font-family: 'YEONGJUSeonbiTTF'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403@1.0/YEONGJUSeonbiTTF.woff2') format('woff2'); font-weight: normal; font-style: normal; }
.en{font-family: "Poppins", sans-serif !important;}

.left_menu{position: fixed; left:0; top:0; width:20%; height:100vh; border-right:1px solid #d9d9d9; background:#fff; z-index: 10000;}
.left_menu .logo{display: flex; align-items: center;  height:100px; padding:0 30px;}
.left_menu .logo span{display: flex; align-items: center; justify-content: center; max-width:246px;}
.left_menu .logo img{width:100%;}

.left_menu .nav{display: flex; flex-direction: column; padding:30px;}
.left_menu .nav h2{font-weight: 900; font-size:16px; color:#a3a3a3; padding:0 15px; margin-bottom:15px;}
.left_menu .nav > ul{display: flex; flex-direction: column; gap:10px;}
.left_menu .nav > ul > li{position: relative; transition: all .3s ease;}
.left_menu .nav > ul > li.list::before{position: absolute; content:''; right:15px; top:17px; transform: rotate(90deg); width:20px; height:20px;  background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") no-repeat center / 100%; z-index: 10;}
.left_menu .nav > ul > li.list.on::before{transform: rotate(-90deg);}
.left_menu .nav > ul > li > a{position: relative; display: flex; align-items: center; gap:15px; padding:15px; font-size:16px; font-weight: 700; line-height: 1; transition: all .3s ease;}
.left_menu .nav > ul > li > a:hover{background:#f7f7f7;}
.left_menu .nav > ul > li > a i{display: flex; align-items: center; justify-content: center; width:20px; height:20px;}
.left_menu .nav > ul > li > a i svg{width:100%; height:100%;}
.left_menu .nav > ul > li.on > a{color:#1b9f3a;}
.left_menu .nav > ul > li > ul{position: relative; display: none; flex-direction: column; opacity: 0; max-height: 350px; overflow-y: auto;}
.left_menu .nav > ul > li > ul::-webkit-scrollbar{width:5px;}
.left_menu .nav > ul > li > ul::-webkit-scrollbar-thumb{background:#1b9f3a; border-radius: 100px;}
.left_menu .nav > ul > li.on > ul{display: flex; animation: left_menu .3s linear forwards;animation-timing-function:ease; box-sizing: border-box;}
@keyframes left_menu { from{opacity: 0;} to{opacity: 1;} }
.left_menu .nav > ul > li > ul li{position: relative; margin-left:45px;}
.left_menu .nav > ul > li > ul li::before{position: absolute; content:''; width:1px; height:100%; left:-20px; top:0; background:#d9d9d9;}
.left_menu .nav > ul > li > ul li a{display: flex; padding:10px; font-size:14px; font-weight: 500; transition: all .3s ease;}
.left_menu .nav > ul > li > ul li a:hover{background:#f7f7f7;}
.left_menu .nav > ul > li > ul li a span.on{color:#1b9f3a;}
.left_menu .login{position: absolute; display: none; left:50%; transform: translateX(-50%); bottom:30px; align-items: center;}
.left_menu .login ul:nth-child(1){display: flex; gap:15px;}
.left_menu .login ul:nth-child(1) li a{position: relative; display: flex; padding:7px 15px; font-size:14px; font-weight: 500; border:1px solid #d9d9d9;}
.left_menu .login ul:nth-child(1) li:nth-child(2) a{border-color:transparent; background:#1b9f3a; color:#fff; overflow: hidden;}
.left_menu .login ul:nth-child(1) li:nth-child(2) a span{z-index: 1;}
.left_menu .login ul:nth-child(1) li:nth-child(2) a::before{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:125%; height:125%; background: linear-gradient( to bottom, transparent, #fff); opacity: .5;}
.left_menu .login ul:nth-child(2){display: none;}
.left_menu .login ul:nth-child(2) li{position: relative; cursor: pointer;}
.left_menu .login ul:nth-child(2) li p{display: flex; align-items: center; padding:15px 20px; gap:15px;}
.left_menu .login ul:nth-child(2) li p i{width:20px; height:20px; transform: rotate(90deg); background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") no-repeat center / 100%;}
.left_menu .login ul:nth-child(2) ul{position: absolute; display: none; min-width:100%; top:100%; left:50%; transform: translateX(-50%); background:#fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .15);}
.left_menu .login ul:nth-child(2) ul li a{display: block; text-align: center; white-space: nowrap; padding:10px 15px; transition: all .3s ease;}
.left_menu .login ul:nth-child(2) ul li a:hover{background:#f2f2f2;}
.left_menu .login ul:nth-child(2) li:hover p i{transform: rotate(-90deg);}
.left_menu .login ul:nth-child(2) li:hover ul{display: block;}
.left_menu .close{position: absolute; right:40px; top:40px; width:20px; height:20px; z-index: 10; cursor: pointer; display: none;}
.left_menu .close::before{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotate(45deg); width:100%; height:1px; background:#000;}
.left_menu .close::after{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%) rotate(-45deg); width:100%; height:1px; background:#000;}

@media(max-width:1440px){
    .left_menu .nav{padding:0;}
}

@media (max-width:1400px) {
    .left_menu{left:auto; right:-100%; z-index: 100000; max-width:425px; width:100%; padding:40px; display: flex; flex-direction: column; box-shadow: -15px 0 30px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: all .3s ease;}
    .left_menu.on{right:0; opacity: 1; visibility: inherit;}
    .left_menu .nav{height:calc(100% - 35px); margin-bottom:40px; overflow-y: scroll;}
    .left_menu .logo{display: none;}
    .left_menu .login{display: block; position: relative; left:0; top:0; transform: translate(0,0); height:35px;}
    .left_menu .login ul:nth-child(1){justify-content: center;}
    .left_menu .login ul:nth-child(1) li a{display: flex; padding:0 10px; height:35px; align-items: center;}
    .left_menu .login ul:nth-child(1) li a span{font-size:12px;}
    .left_menu .login ul:nth-child(1) li:nth-child(2) a span{color:#fff;}
    .left_menu .nav > ul > li > ul{max-height:30vh;}
    .left_menu .close{display: block;}
    .left_menu .login > ul.member li{position: relative; cursor: pointer;}
    .left_menu .login > ul.member li p{display: none;}
    .left_menu .login > ul.member li p i{transform: rotate(90deg); width:15px; height:15px; background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") no-repeat center / 100%}
    .left_menu .login > ul.member li ul{display: flex !important; gap:10px; display: none; width:100%;}
    .left_menu .login > ul.member li ul::before{position: relative; width:100%; height:10px;}
    
    @keyframes fade { 0%{opacity: 0;} 100%{opacity: 1;} }
    .left_menu .login > ul.member li ul li a{white-space: nowrap; display: flex; padding:10px 15px; font-size:12px; transition: all .3s ease; text-align: center;}

}

.header{position: fixed; display: flex; align-items: center; gap:30px;  left:20%; top:0; width:80%; height:100px; border-bottom:1px solid #d9d9d9; background:#fff; z-index: 10000; padding:0 60px;}
.header .content{display: flex; justify-content: space-between; width:100%;}
.header .search{display: flex; align-items: center; gap:30px;}
.header .search span{font-size:16px; font-weight: 700;}
.header .search div{position: relative; height:50px; width:320px; border:1px solid #d9d9d9;}
.header .search div button{position: absolute; font-size: 0;border: 0;right:0; top:0; width:50px; height:50px; background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m229.66 218.34l-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32M40 112a72 72 0 1 1 72 72a72.08 72.08 0 0 1-72-72'/%3E%3C/svg%3E") no-repeat center / 50%;}
.header .search input{width:100%; height:100%; padding:15px 50px 15px 15px; font-size:14px; transition: all .3s ease;}
.header .search input:hover{background:#f9f9f9;}
.header .login{display: flex; align-items: center;}
.header .login > ul:nth-child(1){display: flex; gap:15px;}
.header .login > ul:nth-child(1) > li > a{position: relative; padding:7px 15px; font-size:14px; font-weight: 500; border:1px solid #d9d9d9;}
.header .login > ul:nth-child(1) > li:nth-child(2) > a{border-color:transparent; background:#1b9f3a; color:#fff; overflow: hidden;}
.header .login > ul:nth-child(1) > li:nth-child(2) > a span{z-index: 1; color:#fff;}
.header .login > ul:nth-child(1) > li:nth-child(2) > a::before{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:125%; height:125%; background: linear-gradient( to bottom, transparent, #fff); opacity: .5;}
.header .login > ul:nth-child(2) > li{position: relative; cursor: pointer;}
.header .login > ul:nth-child(2) > li p{display: flex; align-items: center; padding:15px 20px; gap:15px;}
.header .login > ul:nth-child(2) > li p i{width:20px; height:20px; transform: rotate(90deg); background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") no-repeat center / 100%;}
.header .login > ul:nth-child(2) ul{position: absolute; display: none; min-width:100%; top:100%; left:50%; transform: translateX(-50%); background:#fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .15);}
.header .login > ul:nth-child(2) ul li a{display: block; text-align: center; white-space: nowrap; padding:10px 15px; transition: all .3s ease;}
.header .login > ul:nth-child(2) ul li a:hover{background:#f2f2f2;}
.header .login > ul:nth-child(2) > li:hover p i{transform: rotate(-90deg);}
.header .login > ul:nth-child(2) > li:hover ul{display: block;}
.header .login > ul.member li{position: relative; cursor: pointer;}
.header .login > ul.member li p{display: flex; align-items: center; gap:15px; border:1px solid #d9d9d9; padding:10px 15px; height:40px;}
.header .login > ul.member li p i{transform: rotate(90deg); width:15px; height:15px; background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") no-repeat center / 100%}
.header .login > ul.member li ul{position: absolute; top:calc(100% + 10px); left:50%; transform: translateX(-50%); background:#fff; box-shadow: 0 10px 20px rgba(0, 0, 0, .15); display: none; width:100%;}
.header .login > ul.member li ul::before{position: absolute; content:''; left:50%; bottom:100%; transform: translate(-50%,0); width:100%; height:10px;}
.header .login > ul.member li:hover ul{display: block; animation: fade .3s linear forwards;}
@keyframes fade { 0%{opacity: 0;} 100%{opacity: 1;} }
.header .login > ul.member li ul li a{white-space: nowrap; display: flex; padding:10px 15px; font-size:12px; transition: all .3s ease; text-align: center;}
.header .login > ul.member li ul li a:hover{background:#f2f2f2;}
.header .site_map{position: relative; width:50px; height:50px; cursor: pointer; display: none;}
.header .site_map span{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); content:''; width:50%; height:2px; background:#000;}
.header .site_map span:nth-child(1){top:calc(50% - 4px)}
.header .site_map span:nth-child(2){width:0;}
.header .site_map span:nth-child(3){top:calc(50% + 4px)}
@media(max-width:1440px){
    .header{height:80px; padding:0 30px;}
    .header .search div{height:40px;}
    .header .search div button{width:40px; height:40px;}
    .header .search span{font-size:14px;}
}

@media (max-width:1400px) {
    .header{width:100%; left:0; display: flex; justify-content: space-between; gap:0;}
    .header .logo{display: flex; align-items: center; justify-content: center; width:100%; margin-right:auto; max-width:216px;}
    .header .logo img{width:100%;}
    .header .content{width:auto; gap:20px; margin-right:20px;}
    .header .site_map{display: block; width:40px; height:40px;}
    .header .login > ul.member li p{font-size:12px;}
    .header .login > ul.member li p span{white-space: nowrap;}
    .header .search{gap:20px;}
    .header .search div{width:220px;}
    .header .search input{background: #f9f9f9; padding: 0 40px 0 10px}
    .header .login > ul.member li p{padding:0 10px;}
    
}


@media(max-width:1024px){
    .header{height:65px;}
    .header .search div{width:180px; height:35px;}
    .header .search div button{width:35px; height:35px;}
    .header .site_map{display: block; width:35px; height:35px;}
    .header .login > ul.member li p{height:35px;}
}

@media(max-width:768px){
    .header{padding: 0 15px;}
    .header .search span{display: none;}
    .header .logo{justify-content: flex-start; overflow: hidden; width:78px;}
    .header .logo img{width:160px;}
}

@media (max-width:550px) {
    .header .content{display: none;}
    .header{height:55px;}
    .header .site_map{width:30px; height:30px;}
}

@media(max-width:425px){
    
}




.footer{background:#011023; width:80%; margin-left:auto;}
.footer .content_top{display: flex; justify-content: space-between; padding:40px 80px;}
.footer .content_top .info{display: flex; gap:60px;}
.footer .content_top .logo{display: flex; align-items: center; justify-content: center;}
.footer .content_top .info ul{position: relative; top:5px; display: flex; flex-direction: column; gap:15px;}
.footer .content_top .info ul li{display: flex; color:#fff; opacity: .75;}
.footer .content_top .info ul li span{color:#fff;}
.footer .content_top .info ul li .desc1{width:60px; font-weight: 700; line-height: 1;}
.footer .content_top .info ul li .desc2{width:calc(100% - 60px); line-height: 1;}
.footer .content_top .cs{display: flex; flex-direction: column; color:#fff; opacity: .75;}
.footer .content_top .cs h3{font-size:32px; line-height: 1; font-weight: 700; margin-bottom:10px;}
.footer .content_top .cs p{color:#fff; opacity: .75;}
.footer .content_bottom{display: flex; justify-content: space-between; padding:25px 80px; border-top:1px solid rgba(255, 255, 255, .15);}
.footer .content_bottom ul{display: flex; gap:60px;}
.footer .content_bottom ul li a{color:#fff; opacity: .75;}
.footer .content_bottom .copy{color:#fff; opacity: .75; letter-spacing: 1.25px;}
@media(max-width:1440px){

}

@media (max-width:1400px) {
    .footer{width:100%;}
}

@media (max-width:1400px) {
    .footer .content_top,.footer .content_bottom{padding:30px;}
}

@media(max-width:1024px){

}

@media (max-width:970px) {
    .footer .content_top{flex-direction: column; align-items: flex-start; gap:30px;}
    .footer .content_top .info{width:100%; gap:30px;}
    .footer .content_top .info ul{width:50%;}
    .footer .content_top .cs{width:50%;}
}

@media(max-width:768px){
    .footer .content_top,.footer .content_bottom{padding:30px 15px;}
}

@media (max-width:750px) {
    .footer .content_top{gap:60px;}
    .footer .content_top .info{flex-direction: column; gap:40px;}
    .footer .content_top .info ul,.footer .content_top .cs{width:100%;}
    .footer .content_bottom{flex-direction: column; gap:20px;}
    
}

@media(max-width:425px){

}


.fix{position: fixed; display: flex; flex-direction: column; align-items: center; justify-content: center; width:60px; height:60px; z-index: 100; backdrop-filter: blur(5px); transition: all .3s ease;}

.fix_top{ right:40px; bottom:120px; background:#fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
.fix_top i{transform: rotate(-90deg); width:20px; height:20px; background:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='%23000000' d='M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") no-repeat center / 100% ;transition: all .3s ease;}
.fix_top span{font-weight: 500; transition: all .3s ease;}
.fix_top:hover{background:#1b9f3a;}
.fix_top:hover span{color:#fff;}
.fix_top:hover i{filter: brightness(0) invert(1);}

.fix_inquiry{right:40px; bottom:40px; background:#fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); gap:5px;}
.fix_inquiry i{width:20px; height:20px; transition: all .3s ease;}
.fix_inquiry span{font-size:11px; font-weight: 700; transition: all .3s ease;}
.fix_inquiry:hover{background:#1b9f3a; color:#fff;}
.fix_inquiry:hover span,.fix_inquiry:hover i{color:#fff;}


@media(max-width:1440px){
    .fix{width:55px; height:55px;}
    .fix_top{right:20px; bottom:90px;}
    .fix_top span{font-size:11px;}
    .fix_inquiry{right:20px; bottom:20px;}
}

@media(max-width:1024px){

}

@media(max-width:768px){

}

@media(max-width:425px){

}