@charset "utf-8";
main{min-height:100vh; overflow:hidden;}
*{font-family: 'Pretendard'}
main .fix-layout{max-width:1594px; padding:0 12px; margin:0 auto;}

.mainVisu{width:100%; height:570px; position:relative; overflow:hidden;}
.mainVisu .fix-layout{max-width:1700px; }
.mainVisu .img{width:100%; height:100%;}
.mainVisu .img img{width:100%; height:100%; object-fit:cover;}
.mainVisu .txt{position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.mainVisu .t1{display:inline-block; padding:14px 40px; background:#fff; border-radius:30px; color:#282828; font-size:20px;}
.mainVisu .t2{margin:60px 0 40px 0; font-family:'Gmarket'; font-size:50px; color:#242424; word-break: keep-all;}
.mainVisu .t3{font-family:'Gmarket'; font-size:22px; line-height:1.5; font-weight:300;}

.sc02{padding:50px 0;}
.info-list{display:flex; gap:20px;}
.info-itm{flex:1; border-radius:24px; height:320px; transition:all .3s;}
.info-itm a{display:flex; flex-direction:column; width:100%; height:100%; position:relative; border-radius:24px; overflow:hidden; justify-content: start;
padding:40px 30px;}
.info-itm .txt{z-index:1;}
.info-itm .txt .t1{color:#0055a2; font-size:25px; font-weight:600;}
.info-itm .txt .t2{color:#797979; font-size:18px; margin:20px 0;     word-break: auto-phrase;}
.info-itm .txt i{position:absolute; bottom:30px; right:30px;}
.info-itm .txt i img{margin-left:auto; display:block;}
.info-itm .img{position:absolute; width:100%; height:100%; top:0; left:0; display:none;}
.info-itm .img img{width:100%; height:100%; object-fit:cover;}
.info-itm .img:after{content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.5); position:absolute; top:0; left:0;}
.info-itm.itm01{background:#e9c5ef}
.info-itm.itm02{background:#d5ecfc}
.info-itm.itm03{background:#fef7cd}
.info-itm.itm04{background:#c5efe1}
.info-itm:hover{flex: 2;}
.info-itm:hover .img{display:block;}
.info-itm a:hover{justify-content: center;}
.info-itm a:hover .txt{display:flex; justify-content:space-between; gap:30px;}
.info-itm a:hover .txt .t1{color:#fff; font-size:32px;}
.info-itm a:hover .txt .t2{color:#fff;}
.info-itm a:hover .txt i{position:relative; bottom:unset; right:unset;}

.sc03 .con{display:flex;}
.sc03 .con > div{padding-top:50px;padding-bottom:50px; }
.sc03 .tit-box{display:flex;  justify-content:space-between;     align-items: center; margin-bottom:60px;}
.sc03 .tit-box h3{color:#000000; font-size:40px; font-weight:600;}
.sc03 .tit-box a{padding-right:30px; position:relative; color:#161616; font-size:18px; }
.sc03 .tit-box a:after{content:""; display:block; width:12px; height:12px; background:url(/resources/custom/images/leadership/main/ico-more.png);
position:absolute; right:0; top:50%; transform:translateY(-50%); transition:all .3s;}
.sc03 .tit-box a:hover:after{transform:translateY(-50%) rotate(180deg);}

.pgm-area{width:50%; padding-right:50px; position:relative}
.pgm-area:before{content:""; display:block; width:120vh; height:100%; background:#f1f3f8; position:absolute; right:0; top:0; border-radius:0 24px 0 0; z-index:-1;}
.pgm-list{display:flex; gap:20px}
.pgm-itm{width:calc((100% - 20px) / 2);}
.pgm-itm .pgm-itm-box{display: block; position:relative; padding:70px 50px 0 50px; width:100%;  min-height:460px; background:#fff; border-radius:32px; overflow: hidden; margin-top:-40px;}
.pgm-itm .pgm-label{display:flex; width:96px; height:96px; background:#00da80; align-items:center; justify-content:center;
color:#fff; font-size:18px;  border-radius:100%; z-index:2; margin-left: 40px; position:relative;}
.pgm-itm .pgm-itm-box .pgm-tit{font-size:30px; font-weight:600; color:#242424;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis; z-index:2; position:relative;}
.pgm-itm .pgm-itm-box .pgm-desc{line-height: 1.5; color:#5c5c5c; font-size:16px; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin:20px 0;
z-index:2; position:relative;}
.pgm-itm .pgm-itm-box .pgm-info li{display:flex; gap:16px; align-items:center; margin-bottom:8px; z-index:2; position:relative;}
.pgm-itm .pgm-itm-box .pgm-info li span{display:inline-block; width:51px; line-height:30px; background:#e6e6e6; color:#5c5c5c; text-align:center; border-radius:30px;}
.pgm-itm .pgm-itm-box .pgm-info li p{color:#5c5c5c; width:calc(100% - 51px - 16px); word-break:break-all;}
.pgm-itm .pgm-itm-box .pgm-img{position:absolute; width:calc(100% - 50px); height:180px; right:0; bottom:0; border-radius:24px 0 24px 0; overflow:hidden; transition:all .3s;}
.pgm-itm .pgm-itm-box .pgm-img img{width:100%; height:100%; object-fit:cover;}
.pgm-itm .pgm-itm-box .pgm-more{width:100%; padding:16px 12px; background:#fff; font-family:"Gmarket"; color:#068551; font-size:20px; display: block; z-index:2; position:relative; border-radius:12px; display:none; margin-top:50px; text-align:center;}
.pgm-itm .pgm-info-box{display:flex; width:100%; margin-top:14px; padding:20px 0; background:#fff; border-radius:30px;}
.pgm-itm .pgm-info-box > div{text-align:center; display:flex; gap:16px; flex: 1;align-items: center;justify-content: center;}
.pgm-itm .pgm-info-box > div:first-child{border-right:1px solid #eee;}
.pgm-itm .pgm-info-box > div span{color:#4c4c4c; font-weight:600;}
.pgm-itm .pgm-info-box > div p{color:#068551; font-family:"Gmarket"; font-size:35px;}
.pgm-itm:hover .pgm-img{width:100%; height:100%;}
.pgm-itm:hover .pgm-img:after{content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.7); position:absolute; left:0; top:0; }
.pgm-itm:hover .pgm-tit{color:#fff; }
.pgm-itm:hover .pgm-desc{color:#fff;}
.pgm-itm:hover .pgm-info li span{background:#fff; color:#5c5c5c}
.pgm-itm:hover .pgm-info li p{color:#fff;}
.pgm-itm:hover .pgm-more{display:block;}

.noti-area{width:50%; padding-left:50px;}
.noti-area .tit-box a{padding-right:60px;}
.noti-area .tit-box a:before{content:""; display:block; width:40px; height:40px; background:#d7ddef; right:0; top:50%; transform:translateY(-50%);
position:absolute; border-radius:30px; }
.noti-area .tit-box a:after{right:14px;}

.noti-list li a{display:block; position:relative;}
.noti-list .recent{margin-top:20px; padding-bottom:40px; border-bottom:2px solid #000; margin-bottom:40px;}
.noti-list .recent a{display:flex; align-items:center}
.noti-list .recent .noti-date{width:85px; height:85px; border-radius:12px; border:4px solid #ededed; display:flex; justify-content: center; align-items:center; flex-direction:column; font-family:'Gmarket'; color:#333333; font-size:30px; font-weight:300;}
.noti-list .recent .noti-date span{font-family:'Gmarket'; color:#333333; font-size:14px; display:block; font-weight:300; margin-top:8px;}
.noti-list .recent .noti-txt{width:calc(100% - 85px); padding-left:20px; }
.noti-list .recent .noti-txt h5{ font-family:'Gmarket'; color:#333333; font-size:22px;   white-space: nowrap;overflow: hidden;text-overflow: ellipsis; margin-bottom:8px;}
.noti-list .recent .noti-txt p{color:#525252; font-weight:400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height:1.3; min-height:2.6;}
.noti-list li:not(.recent) a{padding:20px 30px; position:relative; border-bottom:1px solid #e7e7e7; color:#3f3f3f; font-size:18px;}
.noti-list li:not(.recent) .noti-tit{font-size:18px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }

.sc04{padding:120px 0; background:url(/resources/custom/images/leadership/main/sc04-bg.jpg);}
.sc04 .con{display:flex; align-items:center;     justify-content: space-between; gap:30px;}
.qk-tit{display:flex; gap:30px; flex-direction:column; width: calc(100% - 940px - 30px);}
.qk-tit .t1{font-family:'Gmarket'; color:#fff; font-size:22px;}
.qk-tit .t2{font-family:'Gmarket'; color:#fff; font-size:60px;}
.qk-tit .t3{color:#fff; font-size:18px; word-break: keep-all;}
.qk-list{width:940px; display:flex; gap:40px}
.qk-itm{flex:1; display:flex; justify-content:center; height:205px; padding:30px; border-radius:0 32px 32px 32px; flex-direction:column; gap:12px;}
.qk-itm h3{color:#fff; font-family:'Gmarket'; font-size:25px; }
.qk-itm a{display:block; width:115px; line-height:43px; border-radius:12px; background:#fff; font-size:18px; font-weight:bold; margin-left: auto;
    text-align: center;}
.qk-itm.itm01{background:#2a5fea}
.qk-itm.itm01 a{color:#2a5fea;}
.qk-itm.itm02{background:#2222a1}
.qk-itm.itm02 a{color:#2222a1;}
.qk-itm.itm03{background:#0a944a}
.qk-itm.itm03 a{color:#0a944a;}

@media all and (max-width:1300px){
		.info-list{gap:10px;}
		.info-itm{height:340px;}
		.info-itm .txt .t1{font-size:22px;}
		.info-itm .txt .t2{margin:10px 0 0 0;}
		.info-itm a:hover .txt .t1{font-size:24px;}
		
		.pgm-list{gap:10px;}
		.pgm-itm{width:calc((100% - 10px) / 2);}
		.pgm-itm .pgm-itm-box{padding:50px 20px 0 20px;}
		.pgm-itm .pgm-itm-box .pgm-img{width:calc(100% - 20px)}
		.pgm-itm .pgm-itm-box .pgm-tit{font-size:24px;}
		.pgm-itm:hover .pgm-img{width:100%; height:100%;}
		.pgm-itm .pgm-label{margin-left:20px;}
		
		.qk-list{gap:10px;}
		.qk-tit{width: calc(100% - 700px - 30px);}
		.qk-list{width:700px}
		
		
}
@media all and (max-width:1100px){
		.mainVisu{height:470px;}
		.mainVisu .t2{margin:30px 0;}
}
@media all and (max-width:1024px){
		.info-list{flex-wrap:wrap;}
		.info-itm{width:calc((100% - 10px) / 2); flex:auto;}
		.info-itm:hover{flex: auto;}
		
		.pgm-area{padding-right:20px;}
		
		.noti-area{padding-left:20px;}
		
		.sc04{padding:50px 0;}
		.qk-list{width:250px; flex-direction:column;}
		.qk-itm h3{font-size:22px;}
		.qk-tit{flex:1;}
		
		
		
}
@media all and (max-width:880px){
		.sc03 .con{flex-direction:column;}
		.sc03 .con > div{width:100%; }
		.sc03 .tit-box{margin-bottom:20px;}
        .noti-area{padding-left:0;}
        .noti-list .recent{padding-bottom:20px; margin-bottom:20px;}
        .noti-list .recent .noti-txt h5{font-size:18px;}
        .noti-list li:not(.recent) a{font-size:16px; padding:12px;}
}
@media all and (max-width:767px){
		.mainVisu{height:400px;}
		.mainVisu .t1 {font-size:16px; padding:10px 14px;}
		.mainVisu .t2{font-size:30px; margin:20px 0; text-shadow: 1px 1px 10px rgba(0, 0, 0, .3);}
		.mainVisu .t3{font-size:18px; text-shadow: 1px 1px 10px rgba(0, 0, 0, .3);}
		.mainVisu .t3 br{display:none;}
		
		.pgm-itm .pgm-info-box > div p{font-size:20px;}
		
}
@media all and (max-width:600px){
		.sc04 .con{flex-direction:column;}
		.qk-tit{width:100%; gap:10px; text-align:center;}
		.qk-tit .t2{font-size:40px;}
		.qk-list{width:100%;}
		
}
@media all and (max-width:520px){
		.info-itm{width:100%; height:300px;}
		.info-itm .txt .t2{font-size:16px;}
		.info-itm a:hover .txt .t1{font-size:20px;}
		
		.pgm-list{flex-direction:column;}
		.pgm-itm{width:100%;}
		.pgm-itm .pgm-itm-box .pgm-tit{font-size:20px;}
		.pgm-itm .pgm-itm-box .pgm-desc{margin:10px 0;}
		.pgm-itm .pgm-itm-box{min-height:410px;}
}

/*animation*/
.animation{opacity: 0; transform: translateY(50%); transition: transform 2s;}
.animation.active{opacity: 1; transform: translateY(0);}
.animation.to-right{transform: translateX(-50%);}
.animation.to-right.active{transform: translateX(0);}
.animation.to-left{transform: translateX(50%);}
.animation.to-left.active{transform: translateX(0);}

.mainVisu .txt{opacity:0;transform:translateY(50px);}
.mainVisu .txt{animation-name:bContents;animation-duration:1s;animation-fill-mode:forwards;animation-delay:0.75s;}
.mainVisu .img{animation-name:Visual;animation-duration:2s;animation-fill-mode:forwards;}
@keyframes bContents{
  0%{}
  100%{opacity:1;transform:translateY(-50%);}
}
@keyframes Visual{
  0%{filter:blur(10px);transform:scale(1.1);}
  100%{filter:blur(0);transform:scale(1);}
}
.qk-itm.itm02{transition-delay:.2s;}
.qk-itm.itm03{transition-delay:.4s;}
@media all and (max-width:1024px){
		.qk-itm.itm02{transition-delay:.0s;}
        .qk-itm.itm03{transition-delay:.0s;}
}