@charset "utf-8";



.sub .wrap-header {background:#fff;border-bottom: 1px solid #c5c5c573;}
.sub .wrap-header .head-navi .a_1,  .sub .wrap-header .head-logo span, .sub .wrap-header .top-util ul li a {color:#000} 
.sub .wrap-header .head-util li.btn-mgnb, .sub .wrap-header .head-util .menu-open {background: url(/sites/test19/images/common/menu-c.png) center right no-repeat !important; padding: 0 40px;}
.sub .wrap-header img.white {display:none !important;}
.sub .wrap-header img.color {display:block !important;}
  




.left-menu {position: relative;z-index: 5;min-width: 250px;margin-right: 3%;} 
.left-menu nav h2 {height: 140px;width: 100%;text-align: center;font-size: 28px;color: #fff;line-height: 1.2;letter-spacing: -0.5px;font-weight: 600;background: #213152;background-size: cover;display: flex;flex-direction: column;justify-content: center;border-radius: 30px;border-top-left-radius: 10px;border-bottom-right-radius: 10px;} 
.left-menu nav .a_2 {display: block;padding: 15px 23px 15px 18px;font-size: 16px;color:#333333;line-height: 1.2;border: 1px solid #e3e3e3;border-radius: 10px;position: relative;}
.left-menu nav .a_2:before {content:'';position:absolute;background: url(../../images/common/arrow_1_b.png) center no-repeat;width: 23px;height: 23px;right: 10px;top: 50%;transform: translateY(-50%);background-size: 26% !important;border-radius: 50px;border: 1px solid #9b9b9b;background-position-x: 9px !important;opacity: 0.7;}
.left-menu nav .a_2._active {color: #224188;background: #eceef4 url(../../images/sub_gnb_on.png) no-repeat 90% center;border: 1px solid #6b88b9;font-weight: bold;}
.left-menu nav .a_2._active:before {border-color: #3e5275;background: #213152 url(../../images/common/arrow_1_w.png) center no-repeat;}
.left-menu nav .div_3 {overflow: hidden; max-height: 0;}
.left-menu nav .ul_2 > li {margin-bottom: 10px;}
.left-menu nav .li_2._active .div_3 {max-height: 1000px;background: #f8f9fa;}
.left-menu nav .ul_3 {padding: 5px 15px;border-top: 0px; }
.left-menu nav .ul_3 li {border-bottom: 1px dashed #d9d9d9;}
.left-menu nav .a_3 {position: relative; padding: 10px 15px;background:url("../../images/sub_menu_on.png") no-repeat left center;font-size: 16px;color: #666666;display: block; }
.left-menu nav a[target="_blank"] {background: url(/sites/test19/images/common/nw_icon.png) no-repeat center right; background-position: right 13px top 17px;}
.left-menu nav a[target="_blank"]:before {display:none}
.left-menu nav .a_3:hover, .left-menu nav .a_3._active {color: #3474c9;font-weight: bold;}
.left-menu nav .a_3:hover::before, .left-menu nav .a_3._active::before {content: "";position: absolute;width: 5px;height: 2px; left: 0;top: 15px;}


.left-menu nav .sub_div {margin-top: 25px;} 
.left-menu nav .sub_div ul li:last-child {border-bottom:0;margin-bottom: 0;}



.sub-content {width: calc(100% - 250px);}
.sub-title {height: 140px;margin-bottom: 25px;display: flex;flex-direction: column;justify-content: flex-end;}
.sub-title h2 {border-bottom: 2px solid #e3e3e3;padding: 0px 5px;padding-bottom: 25px;font-weight: bold;font-size: 30px; }
.sub-location { position: absolute;right: 0;top: 10px;}
.sub-location ul {display: flex;justify-content: center;background: #f3f5fa;border-radius: 50px;border: 1px solid #b9c1d1;padding-right: 10px;} 
.sub-location ul li {padding: 15px 12px;margin-left: 0 !important;line-height: 1;}
.sub-location ul li span {text-indent:-9999px;position: relative;}
.sub-location ul li span:before {content:'';position:absolute;top: 7px;left: -10px;width: 3px;height: 3px;background: #656565;border-radius: 50px;}
.sub-location ul li.home {text-indent:-9999px;position:relative;padding-right: 35px;margin-right: 3px;}
.sub-location ul li.home:before {content:'\f015';position:absolute;font-size:20px;width: 80%;h;height: 80%;background: #fff url(../../images/sub/home.png) center no-repeat;left: 4px;top: 50%;transform: translateY(-50%);border-radius: 50px;background-size: 60%;}



/*컨텐츠*/
.wrap-contents{margin-top: 150px;min-height: 700px;padding: 0 20px;}
.wrap-contents .container{position:relative;max-width: 1600px;margin: 0 auto 70px auto;display: flex;}
.wrap-contents .tab_div ul {display: flex;border-bottom: 1px solid #ddd;}
.wrap-contents .tab_div ul li {width: auto !important;border: none;margin: 0;background: none !important;}
.wrap-contents .tab_div ul li a {height: auto;padding: 13px 30px;position: relative;}.wrap-contents .tab_div ul li._active a:before {content:''; position:absolute; bottom:0; left:0; width:100%; border-top:2px solid #213152;}
.wrap-contents .tab_div ul li._active a {color: #0a3688; font-weight: bold;}



@media all and (max-width:1300px) {

  .wrap-contents {margin-top: 100px;} 

}

@media all and (max-width: 1024px){
  
  .sub-content {float: none; width: 100%;}
  .left-menu {display: none;}

  .sub-title h2{text-align:center;padding-top: 30px;border-width: 1px;}
  .sub-title {height:auto;}
  .sub-location {left: 50%;transform: translate(-50%);width: 100%;right: auto;}
  .sub-location ul {border: none;background: none;} 
  .sub-location ul li {padding: 0 10px;} 
  .sub-location ul li.home {margin-right: 0;} 

  
}


/* --- 인사말 -- */
.greeting-box {position: relative;}
.greeting-box .flexBox {display: flex; align-items: flex-start; justify-content: center; gap: 60px; margin: 0 auto; padding: 60px 0; box-sizing: border-box;}
.greeting-box .img {position: relative; width: 320px; flex-shrink: 0; opacity: 0; transform: translateX(-30px); animation: fadeInLeft 0.7s ease-out 0.1s forwards;}
.greeting-box .img img {width: 100%; height: auto; border-radius: 8px; transition: transform 0.45s ease, box-shadow 0.45s ease;}
/*.greeting-box .flexBox:hover .img img {transform: scale(1.02); box-shadow: 0 14px 28px rgba(0,0,0,0.28);}*/
.greeting-box .nameplate {position: absolute; bottom: -25px; left: 68%; transform: translateX(-50%) translateY(10px); background: linear-gradient(135deg, rgba(33,73,166,0.96), rgba(12,32,90,0.96)); color: #fff; text-align: center; width: 300px; padding: 20px 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.18); opacity: 0; animation: nameplateFadeUp 0.6s ease-out 0.2s forwards; transition: transform 0.35s ease, box-shadow 0.35s ease;}
.greeting-box .flexBox:hover .nameplate {transform: translateX(-50%) translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.35);}
.greeting-box .nameplate small {display: block; font-size: 16px;}
.greeting-box .nameplate strong {display: block; font-size: 28px; margin-top: 4px; font-weight: 700;}
.greeting-box .conArea {flex: 1; font-size: 19.5px; color: #111; opacity: 0; transform: translateX(30px); animation: fadeInRight 0.7s ease-out 0.15s forwards;}
.greeting-box .desc .head {font-size: 26px; font-weight: 600; margin-bottom: 18px; line-height: 1.45; color: #000; position: relative; opacity: 0; transform: translateY(10px); animation: headlineFade 0.6s ease-out 0.3s forwards;}
.greeting-box .desc .head strong {background: linear-gradient(90deg, #003a94 0%, #0059c8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; transition: transform 0.35s ease, letter-spacing 0.35s ease;}
.greeting-box .desc .head:hover strong {transform: scale(1.02); letter-spacing: 0.5px;}
.greeting-box .desc:hover .head::after {transform: scaleX(1);}
.greeting-box .desc p {margin-top: 14px; line-height: 1.62; padding: 8px 14px 8px 18px; border-radius: 8px; transition: background 0.25s ease, transform 0.25s ease; position: relative;}
.greeting-box .desc p::before {content: ""; position: absolute; left: 4px; top: 8px; width: 2px; height: calc(100% - 16px); background: #3f7cff; border-radius: 2px; opacity: 0; transform: scaleY(0.4); transform-origin: top; transition: opacity 0.25s ease, transform 0.25s ease;}
.greeting-box .desc p:hover {background: rgba(0,47,140,0.03); transform: translateY(-2px);}
.greeting-box .desc p:hover::before {opacity: 1; transform: scaleY(1);}

@keyframes nameplateFadeUp {
  0% {opacity:0; transform:translateX(-50%) translateY(20px);}
  100% {opacity:1; transform:translateX(-50%) translateY(0);}
}
@keyframes fadeInLeft {
  0% {opacity:0; transform:translateX(-35px);}
  100% {opacity:1; transform:translateX(0);}
}
@keyframes fadeInRight {
  0% {opacity:0; transform:translateX(35px);}
  100% {opacity:1; transform:translateX(0);}
}
@keyframes headlineFade {
  0% {opacity:0; transform:translateY(18px);}
  100% {opacity:1; transform:translateY(0);}
}
@media (max-width: 1024px) {
  .greeting-box .flexBox {flex-direction: column; text-align: center; gap: 25px; padding: 30px 0 40px;} 
  .greeting-box .img {width: 200px; margin: 0 auto 20px;} 
  .greeting-box .nameplate {width: 200px; padding: 10px 0; bottom: -28px;} 
  .greeting-box .nameplate strong {font-size:22px;}
  .greeting-box .desc .head {font-size:22px;} 
  .greeting-box .conArea {font-size:18px;}
}
@media (max-width: 550px) {
  .greeting-box .desc p {font-size:16px;} 
  .greeting-box .desc .head {font-size:20px;}
}


/* --- 조직도 --- */
.bg-gray {background-color: #a6a8ac !important;}
.bg-blue {background-color: #078b7f !important;}

.org-wrap {max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:60px; position:relative; padding-bottom: 10px;}
.org-wrap::before {content: ''; width: 2px; height: calc(100% - 302px); background-color: #aaa; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.org-wrap .org-box {width:280px; background:#fff; text-align:center; position:relative; box-shadow:0px 0px 10px 2px rgb(144 144 151 / 10%); border-radius:10px; border:1px solid #e6e6e6; position: relative;}
.org-wrap .office {margin-left: -360px; position: relative;}
.org-wrap .office::before {content: ''; width: 40px; height: 2px; background-color: #aaa; position: absolute; top: 50%; transform: translateY(-50%); right: -40px; z-index: -1;}

.org-wrap .org-box .title {background:#213152; color:#fff; font-size: 20px; padding:12px 0; border-radius: 10px 10px 0 0;}
.org-wrap .org-box .title-cont {min-height: 60px; display:flex; align-items:center; justify-content:center; border-radius: 10px;}

.org-wrap .line-top::before {content: ''; width: 2px; height: 50px; background-color: #aaa; position: absolute; top: -32px; left: 50%; transform: translateX(-50%); z-index: -1;}

.org-wrap .org-box .content {padding:15px 20px; font-size:17px; border-top:none;}
.org-wrap .org-box span {font-size:18px; font-weight: bold; margin-bottom:10px; display:block; text-align: center;}
.org-wrap .org-box ul {display:flex; flex-direction:column; gap:4px; text-align:left;}
.org-wrap .org-box ul li {font-size:17px; position:relative; padding-left:15px;}
.org-wrap .org-box ul li::before {content:'-'; position:absolute; top:0; left:0;}
.org-wrap .row {display:flex; justify-content:center; gap:80px; position:relative;}
.org-wrap .row::before {content: ''; width: 56.5%; height: 2px; background-color: #aaa; position: absolute; top: -32px; left: 50%; transform: translateX(-50%);}

/* 조직도 인터렉션 */
.org-box {opacity: 0; transform: translateY(30px) scale(0.98);}
.org-wrap::before,
.org-box::before,
.row::before {opacity: 0;}
.org-box.show {animation: fadeInUp .8s cubic-bezier(.22, .61, .36, 1) forwards;}
.org-wrap.show-lines::before {animation: lineGrowV .8s ease forwards;}
.org-box.show-line::before,
.row.show-line::before {animation: lineGrowH .8s ease forwards;}

@keyframes fadeInUp {
  0% {opacity: 0; transform: translateY(30px) scale(0.98);}
  100% {opacity: 1; transform: translateY(0) scale(1);}
}
@keyframes lineGrowH {
  0% { width: 0; opacity: 0; }
  100% { opacity: 1; }
}
@keyframes lineGrowV {
  0% { height: 0; opacity: 0; }
  100% { opacity: 1; }
}

@media(max-width:768px){
    .org-wrap {gap: 20px;}
 	.org-wrap::before {height: calc(100% - 10px);}
    .org-wrap .office {margin-left: 0;}
    .org-wrap .office::before {display: none;}

    .org-wrap .org-box .title {padding: 8px 0; font-size: 19px;}
    .org-wrap .org-box .title-cont {min-height: 50px;}
    .org-wrap .org-box .content {padding: 12px;}
    .org-wrap .org-box span {font-size: 17px; margin-bottom: 5px;}
    .org-wrap .org-box ul {gap: 2px;}
    .org-wrap .org-box ul li {font-size: 16px;}

    .org-wrap .row {flex-direction: column; gap: 20px;}
    .org-wrap .row::before {display: none;}
	.org-box.show-line::before,
	.row.show-line::before {display:none;}
}