:root { 
    --main-color: #499b86;
    --light-color:#CDD8D6; 
    --sub-color: #5B7A73; } 

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', 'Noto Sans KR', sans-serif; letter-spacing: -0.81px;  word-break: keep-all; } 
img { border: none; max-width: 100%; display: inherit; } 
img.icon { display: inline-block;vertical-align: middle;} 
ul,ol,li { list-style: none; } 
a,i { font-style: normal; text-decoration: none;color: #1b1b1b; } 
a:active {color: inherit;}
table { border-collapse: collapse; } 
body { position: relative; color: #1b1b1b;} 
.material-symbols-outlined { font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 48; vertical-align: text-bottom; } 


.inner { padding-left: 47px; padding-right: 47px; } 

.main-btn { position: relative; width: 238px; color: var(--light-color); border: 1px solid var(--light-color);; border-radius: 50px; padding: 12px 0; text-align: center; transition:all .5s cubic-bezier(.6,0,0,1); } 
.main-btn:hover { background: var(--main-color); color: #fff; font-weight: 600; border-color: var(--main-color); } 
.main-btn::before { position: absolute; content: ''; width: 100%; height: 100%; border-radius: 50px; transform: scale(1); top: -1px; left: -1px; transition: all .5s cubic-bezier(.6,0,0,1); } 
.main-btn:hover::before { border: 1px solid var(--main-color); width: calc(100% + 18px); height: calc(100% + 16px); top: -9px; left: -10px; } 


/* 슬라이딩팝업
.popup-wr * { color: #fff; } 
.popup-wr P { transform-origin: 0; transform: rotateZ(90deg); width: 200px; position: absolute; left: 50%; top: 0; } 
.popup-wr { position: absolute; top: 152px; left: 0; transform: translateX(0); transition: .3s; display: flex; z-index: 2 } 
.popup-wr img { width: 500px; } 
.popup-wr span { position: absolute; font-style: normal; transform-origin: 0; transform: translate(-6px, -22px) rotateZ(0deg); font-size: 25px; transition: .3s; bottom: 0; left:50%; } 
.popup-wr .popup-btn { position: relative; width: 60px; height: 316px; background: var(--main-color);; line-height: 60px; font-weight: 300; display: flex; justify-content: space-between; padding: 0 10px 0 10px; font-size: 20px; cursor: pointer; } 
.popup-wr.active { transform: translateX(-500px); } 
.popup-wr.active span { transform: translate(6px, -22px) rotateZ(180deg); }  */

#pop-wr {position: absolute; z-index: 5;top: 95px;display: flex;left: 89px;}
.popup_close {background: #000;padding: 5px 10px;}
.popup img {display: block;}
.popup_close span:last-child {float: right;color: #fff;cursor: pointer;}
.popup label {color: #fff;}

#pop3 .cont {position: relative;}
#pop3 .cont a {width: 290px; height: 57px; display: block; position: absolute;  top: 50%; left: 50%; transform:  translate(-50%,88px);margin-top: 26px;}
#pop3 .cont a.pop3-link-02 {margin-top: 91px;}

#pop4 .cont {position: relative;}
#pop4 .cont a {width: 290px; height: 42px; display: block; position: absolute;  top: 50%; left: 50%; transform: translateX(-50%);margin-top: 26px;}
#pop4 .cont a.pop4-link-02 {margin-top: 72px;}    
#pop4 .cont a.pop4-link-03 {margin-top: 119px;}    
#pop4 .cont a.pop4-link-04 {margin-top: 169px;}    
#pop4 .cont a.pop4-link-05 {margin-top: 215px;}   

@media (max-width:1630px) and (min-width:1401px) {
    #pop3 .cont a.pop3-link-02 {margin-top: 83px;}

    #pop4 .cont a {height: 29px;}
    #pop4 .cont a.pop4-link-02 {margin-top: 68px;}    
    #pop4 .cont a.pop4-link-03 {margin-top: 108px;}    
    #pop4 .cont a.pop4-link-04 {margin-top: 152px;}    
    #pop4 .cont a.pop4-link-05 {margin-top: 192px;}    
}

@media (max-width:1465px) and (min-width:1401px) {
    #pop3 .cont a.pop3-link-02 {margin-top: 83px;}

    #pop4 .cont a.pop4-link-02 {margin-top: 61px;}    
    #pop4 .cont a.pop4-link-03 {margin-top: 97px;}    
    #pop4 .cont a.pop4-link-04 {margin-top: 140px;}    
    #pop4 .cont a.pop4-link-05 {margin-top: 180px;}    
}





    /**/

/* html[data-direction="down"] header.header {top:-105px;} */
header.header { position: fixed; top:0; width: 100vw; z-index: 999; overflow: hidden; transition: top 0.3s ease-in-out; } 
header.header::before {position: absolute; content: ''; visibility: hidden; top:105px; width: 100vw; height: 0; transition: 0.3s; background: #000; } 
header.header .inner { display: flex; height: 105px; align-items: center; } 
header.header .call-btn-wr { margin-left: auto; height: 31px; line-height: 31px; background: var(--main-color);; border-radius: 16px; padding: 0 1em 0 0.8em; font-size: 1.125rem; color: #EAF4F2; transition: 0s;} 
header.header .call-btn-wr a {color: #EAF4F2;  } 
header.header .gnb { display: flex; margin-left: 70px;} 
header.header .gnb > li { margin-right: 41px; height: 105px; line-height: 105px; } 
header.header .gnb > li > a { color:#EAF4F2; font-weight: 400; transition: 0.3s; } 
header.header .gnb > li:hover > a { color:var(--main-color); font-weight: 600; } 
header.header .gnb .depth { width: 320px; position: absolute; height: 0; border-left: 1px solid #344A4A; padding-left: 1em; transition: 0.3s; } 
header.header .gnb .depth-2 { left:640px; } 
header.header .gnb .depth-3 { left:960px; } 
header.header .gnb .depth-4 { left:1280px; } 
header.header .gnb .depth li { line-height: 35px; font-size: 1.063rem; color: #EAF4F2; } 
header.header .gnb .depth li a { color: #EAF4F2; font-weight: 300; transition: 0.3s; } 
header.header .gnb .depth li a:hover { color:var(--main-color); font-weight: 600; } 
header.header .gnb .depth li.dt-tit { position: relative; color: #fff; font-weight: bold; font-size: 1.25rem; margin-bottom: 18px; margin-top: 28px; } 
header.header .gnb .depth li.dt-tit::after { width: 3px; height: 1.1em; background: #fff; position: absolute; content: ''; top: 5px; left: -17px; } 

header.header.fix { background: rgba(0,0,0,0.8); } 
header.header.fix .call-btn-wr { background: var(--light-color); color: #005148; } 
header.header.fix .call-btn-wr a { color: #005148; } 

header.header.active { background: #000; overflow: visible; } 
header.header.active::before { height: 277px; visibility: visible; border-top: 1px solid #344A4A; } 
header.header.active .call-btn-wr { background: var(--light-color); color: #005148; } 
header.header.active .call-btn-wr a {color: #005148; } 
header.header.active .gnb .depth { height: 277px; } 
header.header img.logo.icon {display:block;}

/**/
.ham_menu_btn{margin-left: auto; display: none;}
.ham_menu_btn span{display: block; width: 35px;height: 3px;background: #fff;}
.ham_menu_btn span:nth-child(2) {margin: 12px 0;}

.ham_menu_btn.close_ham {display: block; margin: 20px auto;padding: 29px 0 0 13px;text-align: center; width: 60px; height: 60px; background: var(--main-color);border-radius: 100%;}
.ham_menu_btn.close_ham span {background:#fff;transform-origin: center; width: 35px;height: 2px;display: block;}
.ham_menu_btn.close_ham span:nth-child(1){transform: rotate(45deg);}
.ham_menu_btn.close_ham span:nth-child(2) {display: none;}
.ham_menu_btn.close_ham span:nth-child(3){transform: translateY(-2px) rotate(135deg)}

.ham_menu {position: fixed;right: 0;top: 0;z-index: 9999;width: 0;height: 100vh; background:url(../image/intro/intro-bg.jpg)no-repeat center / cover;  overflow: hidden; visibility: hidden;transition: .3s;}
.ham_menu.active {width: 40%;visibility: visible;}
.ham_menu a {color: var(--light-color);}
.ham_menu > ul {padding: 30px;}
.ham_menu > ul > li{width: 100%;line-height: 2;position: relative;}
.ham_menu > ul > li:after {content: "";display: block;width: 20px;height: 1px;position: absolute;right: 20px;top: 2.3em;background: #ccc;transform:rotate(0deg);transition-duration: 0.4s}
.ham_menu > ul > li:before {content: "";display: block;width: 20px;height: 1px;position: absolute;right: 20px;top: 2.3em;background: #ccc;transform:rotate(90deg);transition-duration: 0.4s}
.ham_menu > ul > li.active:after{transform:rotate(180deg);transition-duration: 0.4s}
.ham_menu > ul > li.active:before{transform:rotate(360deg);transition-duration: 0.4s}
.ham_menu > ul > li.active .gnb-depth{padding: 15px;height: 173px;}
.ham_menu > ul > li:nth-child(4).active .gnb-depth{height: 213px;}
.ham_menu > ul > li.non::after,.ham_menu > ul > li.non::before {display: none;}
.ham_menu > ul > li.non a {display: flex; align-items: center;}
.ham_menu > ul > li.non a span {margin-left: 0.5rem;    font-size: 1em;}
/* .ham_menu > ul > li:nth-child(4).active .gnb-depth{height: 208px;} */
/* .ham_menu > ul > li:nth-child(2).active .di-none,
.ham_menu > ul > li:nth-child(3).active .di-none {display: none;}
.ham_menu > ul > li:nth-child(2):before,
.ham_menu > ul > li:nth-child(2):after,
.ham_menu > ul > li:nth-child(3):before,
.ham_menu > ul > li:nth-child(3):after {display: none} */


.ham_menu > ul > li > .gnb-depth {height: 0;overflow: hidden;padding:0 15px;background: rgba(255, 255, 255, 0.11);transition-duration: 0.4s}
.ham_menu > ul > li > a {font-size: 2.1rem;font-weight: 600;}
.ham_menu > ul > li > .gnb-depth a {display: block;line-height: 36px}
.ham_menu > ul > li > .gnb-depth{position: relative;}
/* .ham_menu > ul > li > .gnb-depth:before {top:0;border-top: 2px solid #f77b83;content: "";display: block;width: 100%;position: absolute;left: 0;} */
.ham_bg.active{position: fixed;width: 100%;background:rgba(29, 42, 40, 0.7); backdrop-filter: blur(3px);left: 0;top: 0;height: 100%;z-index: 999;}



/**/
footer { background: var(--sub-color); padding: 3.625em 0 2.688em 0; } 
footer .inner { display: flex; justify-content: space-between; } 
footer ul li { color: var(--light-color); font-size: 0.875rem; } 
footer ul li strong { color: #fff; } 
footer ul li.ft-copy { font-size: 0.75rem; margin-top: 1.25em; } 
footer .ft-right { display: flex; justify-content: flex-start; align-items: flex-start; padding-top: 1.25em; } 
footer .ft-right ul { margin-left: 4.188em; } 
footer.intro-ft .ft-left { display: flex; } 
footer .ft-left ul { margin-left: 0.875em; } 
footer .ft-left img {width: 361px;}

footer .ft-left.call-btn-wr {height: 31px; line-height: 31px;font-size: 1.125rem; color: #EAF4F2;} 
footer .ft-left.call-btn-wr a {color: #EAF4F2;} 

.go_top {width: 60px;height: 60px;border-radius: 100%; border: 1px solid #5b7a73;background: #eaf4f2; position: fixed;bottom: 45px;right: 45px;cursor: pointer;z-index: 3; transition: .3s;display: flex; justify-content: center; align-items: center;}
.go_top span {color: #5b7a73; transition: .3s;}
.go_top:hover {background: #eaf4f2c7;}
.go_top:hover span {margin-bottom: 0.5em;}