@charset "euc-kr";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

.clear a:link,
.clear a:visited,
.clear a:active,
.clear a:hover{ font-family: inherit; font-size: inherit; letter-spacing:0; color: inherit; text-decoration: none }
.clear ul,
.clear li{list-style:none}
.clear span, .clear i{ color:inherit}

.topMenu{ position:absolute; right:0; top:0; width:740px; height:87px}
.topMenu .gnb{ height:100%; display:flex; justify-content:space-between; padding:0 10px}
.topMenu .gnb a{ display:flex; align-items:center; font-family:'Noto Sans KR', sans-serif; transition:.3s}
.topMenu .gnb > li{ position:relative; height:55px; flex:1}
.topMenu .gnb > li .dp1{ height:100%; font-weight:700; font-size:15px; justify-content:center; text-align:center}
.topMenu .gnb > li .dp1 .va{ position:relative}
.topMenu .gnb > li .dp1 .va:before,
.topMenu .gnb > li .dp1 .va:after{content:attr(data-tit); display:block; overflow:hidden; transition:.3s}
.topMenu .gnb > li .dp1 .va:after{ content:attr(data-tit); position:absolute; left:0; bottom:0; color:#d42630; width:100%; transform:scaleY(0)}
.topMenu .gnb > li:hover .dp1 .va:before,
.topMenu .gnb > li.on .dp1 .va:before{ transform:scaleY(0); transform-origin:top}
.topMenu .gnb > li:hover .dp1 .va:after,
.topMenu .gnb > li.on .dp1 .va:after{ transform:scaleY(1); transform-origin:bottom}
.topMenu .gnb > li .dp2{ opacity:0; display:flex; align-items:center; position:absolute; left:22px; top:100%; white-space:nowrap; gap:0 30px; height:auto}
.topMenu .gnb > li.m_6 .dp2{ left:auto; right:20px}
.topMenu .gnb > li .dp2 > li > a{height:32px; color:#fff; font-size:14px; font-weight:400; position:relative}
.topMenu .gnb > li .dp2 > li:not(:last-child) > a:after{ content:""; position:absolute; left:calc(100% + 13px); top:50%; transform:translateY(-50%); height:12px; border-left:1px solid rgba(0,0,0,.1); border-right:1px solid rgba(255,255,255,.3)}
.topMenu .gnb > li .dp2 > li > a:hover,
.topMenu .gnb > li .dp2 > li.on > a{ color:#ffff00 !important}
.topMenu .gnb > li:hover,
.topMenu .gnb > li.on{ z-index:1}
.topMenu .gnb > li.on .dp2{ opacity:1}
.topMenu .gnb:hover > li .dp2{ opacity:0}
.topMenu .gnb > li:hover .dp2{ opacity:1}
.topMenu .gnb > li.m_hide{ display:none}

.subGnb .gnb{ width:180px; border-radius:0 60px 0 0; box-sizing:border-box; padding:20px; min-height: 260px; box-shadow:1px 1px 3px rgba(0,0,0,.5) inset, 1px 1px 10px rgba(0,0,0,.2); 
  background: repeating-linear-gradient(-45deg, #cb0909, #cb0909 3px, #d61615 0, #d61615 5px);}
.subGnb .gnb > li:not(.on){ display:none}
.subGnb .gnb > li a{ display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; color:#fff; position:relative; font-family:'Noto Sans KR', sans-serif; line-height:1; transition:.5s}
.subGnb .gnb > li a:before{ content:""; position:absolute; left:0; top:100%; height:auto; width:100%; border-top:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(255,255,255,.2)}
.subGnb .gnb > li .dp1{ text-shadow:1px 1px 3px rgba(0,0,0,.5); margin-bottom:15px; padding-bottom:15px}
.subGnb .gnb > li .dp1:after{ content: attr(data-en); display:block; font-size:13px; opacity:.8; margin-top:.5em}
.subGnb .gnb > li .dp1 .va{ font-size:30px; letter-spacing:-1px}
.subGnb .gnb > li .dp1 .va:before{ content: attr(data-tit)}
.subGnb .gnb > li .dp2 > li{ padding:5px 0}
.subGnb .gnb > li .dp2 > li > a{ height:30px; font-size:15px; border-radius:5px; padding:0 10px; font-weight:500}
.subGnb .gnb > li .dp2 > li > a:before{ transform:translateY(5px)}
.subGnb .gnb > li .dp2 > li > a:after{ content:">"; position:absolute; right:0; top:50%; width:1em; text-align:center; transform:scale(.7, 1.5) translateY(-40%); display:none}
.subGnb .gnb > li .dp2 > li:hover > a,
.subGnb .gnb > li .dp2 > li.on > a{ background:#f9e10a; box-shadow:1px 1px 2px rgba(0,0,0,.5) inset; color:#111}
.subGnb .gnb > li .dp2 > li:hover > a:after,
.subGnb .gnb > li .dp2 > li.on > a:after{ display:block}

.imgWrap{ position:relative; overflow:hidden}
.imgWrap .el{ position:absolute; left:0; top:0; display:block; width:100%; height:100%}
.imgWrap .el img{ width:100%; height:100%}
.imgWrap .fix{ overflow:hidden}
.imgWrap .fix .in{ position:absolute; left:0; top:0; width:100%; height:auto}
.imgWrap .fix.p1,
.imgWrap .fix.p1 .in{ top:auto; bottom:0}
.imgWrap .ani{ opacity:0; animation-fill-mode:forwards}
.imgWrap .twrap{ box-sizing:border-box; color:#fff; text-align:left; font-family:'Noto Sans KR', sans-serif}
.imgWrap .twrap .t1{ font-size:40px; font-weight:400; line-height:1; text-shadow:2px 2px 3px rgba(0,0,0,1);}
.imgWrap .twrap .t2{ font-size:17px; font-weight:400; margin-top:20px; line-height:1.4; text-shadow:1px 1px 2px rgba(0,0,0,1); margin-left:6px; position:relative}
.imgWrap.main{ transform:translateY(6px)}
.imgWrap.main .twrap{ padding:25px;}
.imgWrap.sub .twrap{ padding:60px 35px 0 35px}
.imgWrap.sub .twrap .t1{ font-size:32px}
.imgWrap.sub .twrap .t2{ font-size:16px; margin-top:14px}
.imgWrap.main .ani1{ animation-name: mainAni1; animation-duration: 1s}
.imgWrap.main .ani2{ animation-name: mainAni2; animation-duration: 2s; animation-delay:.5s}
.imgWrap.main .ani3{ animation-name: mainAni3; animation-duration: 2s; animation-delay:.5s}
.imgWrap .txt1{ animation-name: txt1; animation-duration: 2s; animation-delay:1s}
.imgWrap .txt2{ animation-name: txt2; animation-duration: 2s; animation-delay:2s; transform-origin:left top}
@keyframes mainAni1{
0% { transform:translateY(100px)}
80% { transform:translateY(-20px); opacity:1}
100% { transform:translateY(0); opacity:1}
}
@keyframes mainAni2{
0% { transform:translateY(50px)}
100% { transform:translateY(0); opacity:1}
}
@keyframes mainAni3{
0% { transform:translate(100px,-100px)}
100% { transform:translate(0); opacity:.5}
}
@keyframes txt1{
0% { transform:translateX(-100px)}
50% { transform:translateX(20px); opacity:1}
60% { transform:translateX(0); opacity:1}
70% { transform:translateX(20px); opacity:1}
80% { transform:translateX(0); opacity:1}
90% { transform:translateX(20px); opacity:1}
100% { transform:translateX(0); opacity:1}
}
@keyframes txt2{
0% { height:0}
100% { height:50px; opacity:1}
}

.imgWrap.sub .ani1{ animation-name: subAni1; animation-duration: 1s}
.imgWrap.sub .ani2{ animation-name: subAni2; animation-duration: 1s}
.imgWrap.sub .ani3{ animation-name: subAni3; animation-duration: 1s; animation-delay:1s;}
.imgWrap.sub .ani4{ animation-name: subAni4; animation-duration: 1s; animation-delay:1.5s}
@keyframes subAni1{
0% { transform:translate(50px, 50px)}
100% { transform:translate(0); opacity:1}
}
@keyframes subAni2{
0% { }
100% { opacity:1}
}
@keyframes subAni3{
0% { transform:translateY(100px)}
100% { transform:translateY(0); opacity:1}
}
@keyframes subAni4{
0% { height:0}
100% { height:100%; opacity:1}
}