@charset "utf-8";

/* m_txt */
.m_txt{}
.m_txt h2{font-family: 'NanumSquare', sans-serif; font-weight: 800; font-size: 64px; transform: skew(-0.1deg); color:#000; line-height: 1.3em;}
.m_txt h2 span{color:var(--color1);}

@media all and (max-width:1400px) {
    .m_txt h2{font-size: 56px;}
}
@media all and (max-width:1024px) {
    .m_txt h2{font-size: 48px;}
}
@media all and (max-width:768px) {
    .m_txt h2{font-size: 40px; text-align: center;}
}
@media all and (max-width:500px) {
    .m_txt h2{font-size: 32px;}
}


/* mvisual */
#mVisual{margin-top: 100px; position: relative;}
#mVisual .visual{height: calc(100vh - 100px); min-height: 640px;}
#mVisual .visual img{width: 100%; height: 100%; object-fit: cover;}
#mVisual .visual img.mo{display: none;}
#mVisual .inner{position: absolute; height: 100%; left: 50%; transform: translateX(-50%); z-index: 2; top: 0;}
#mVisual .inner .mv_txt{position: absolute; top: 38%; left: 35%; transform: translate(-50%, -50%);}
#mVisual .inner .mv_txt img{}
#mVisual .inner .mv_txt img.pc{display: block;}
#mVisual .inner .mv_txt img.mo{display: none;}
#mVisual .inner .txt{padding-top: 180px;}
#mVisual .inner .txt .tit{}
#mVisual .inner .txt .tit img{max-width: 547px;}
#mVisual .inner .txt p{font-size: 30px; color:#fff;font-weight: 600; line-height: 1.4em; margin: 25px 0 40px;}
#mVisual .inner .txt p span{color:#1EC7FF;}
#mVisual .inner .txt .date{}
#mVisual .inner .txt .date img{max-width: 523px;}

@media  all and (max-width:1400px) {
    #mVisual{margin-top: 70px;}
    #mVisual .visual{height: calc(100vh - 70px);}
    #mVisual .inner .mv_txt{left: 0; transform: translateY(-50%);}
    #mVisual .inner .mv_txt img{max-width: 60vw; min-width: 560px;}
    #mVisual .inner .txt .tit img{width: 45vw;}
    #mVisual .inner .txt p{font-size: 27px; margin: 20px 0 35px;}
    #mVisual .inner .txt .date img{width: 50vw;}
}
@media  all and (max-width:1024px) {
    #mVisual .inner .txt p{font-size: 25px;}
}
@media  all and (max-width:768px) {
    #mVisual .visual{height: calc(100vh - 70px); min-height: 600px;}
    #mVisual .visual img.pc{display: none;}
    #mVisual .visual img.mo{display: block;}
    #mVisual .inner .txt .tit{text-align: center;}
    #mVisual .inner .txt .tit img{width: 55vw; min-width: 320px;}
    #mVisual .inner .txt p{font-size: 23px; margin: 17px 0 30px; text-align: center;}
    #mVisual .inner .txt .date{text-align: center;}
    #mVisual .inner .txt .date img{width: 60vw; min-width: 340px;}
    #mVisual .inner .mv_txt img.pc{display: none;}
    #mVisual .inner .mv_txt img.mo{display: block;}
    #mVisual .inner .mv_txt img{min-width: 0; width: 74vw; max-width:380px;}
    #mVisual .inner .mv_txt{top: 45%;}
}
@media  all and (max-width:500px) {
    #mVisual .inner .txt p{font-size: 21px;}
    #mVisual .inner .mv_txt{top: 43%;}
}


/* sec1 */
#sec1{padding: 160px 0 200px; background: #E9F5F9 url(/images/main/sec1_bg.webp) no-repeat bottom center;}
#sec1 .m_txt{margin-bottom: 120px; display: flex; justify-content: space-between; align-items: flex-end;}
#sec1 .m_txt .button a{background-color: #FFF; color:var(--color1); font-size: 18px; font-weight: 600; display: inline-flex; gap:30px; padding: 25px 40px; border-radius: 5px;}
#sec1 .list .slick-list{padding-top: 50px !important; margin-top: -50px;}
#sec1 .list li{width: 400px; height: 466px; margin: 0 15px; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);}
#sec1 .list li.slick-current{transform: translateY(-50px);}
#sec1 .list li a{padding: 60px 50px; display: block; height: 100%; position: relative; border-radius: 20px; color:#fff;}
#sec1 .list li.l1 a{background-color: #2166AE;}
#sec1 .list li.l2 a{background-color: #118A71;}
#sec1 .list li.l3 a{background-color: #17768B;}
#sec1 .list li.l4 a{background-color: #17648B;}
#sec1 .list li.l5 a{background-color: #145196;}
#sec1 .list li a .txt{}
#sec1 .list li a .txt h3{font-size: 36px; font-weight: 800; font-family: 'NanumSquare', sans-serif; margin-bottom: 20px;}
#sec1 .list li a .txt p{font-size: 18px; font-weight: 600; opacity: 0.8; line-height: 1.4em;}
#sec1 .list li a .img{position: absolute; bottom: 35px; right: 35px;}
#sec1 .list li a .img img{}

@media  all and (max-width:1400px) {
    #sec1{padding: 140px 0 180px;}
    #sec1 .m_txt{margin-bottom: 110px;}
    #sec1 .m_txt .button a{font-size: 17px; gap:25px; padding: 20px 35px;}
    #sec1 .list li{aspect-ratio: 400/466; height: auto; width: 360px;}
    #sec1 .list li a{padding: 50px 40px;}
    #sec1 .list li a .txt h3{font-size: 32px; margin-bottom: 15px;}
    #sec1 .list li a .txt p{font-size: 17px;}
    #sec1 .list li a .img img{max-height: 150px; max-width: 210px;}
}
@media  all and (max-width:1024px) {
    #sec1{padding: 120px 0 160px;}
    #sec1 .m_txt .button a{font-size: 16px; gap:22px; padding: 18px 32px;}
}
@media  all and (max-width:768px) {
    #sec1{padding: 110px 0 140px; background-position: bottom 60% center;}
    #sec1 .m_txt{flex-direction: column; gap:30px; align-items: center; margin-bottom: 100px;}
    #sec1 .m_txt .button a{font-size: 15px; gap:20px; padding: 16px 28px;}
    #sec1 .list li{width: 320px; margin: 0 10px;}
    #sec1 .list li a{padding: 40px 30px;}
    #sec1 .list li a .txt h3{font-size: 27px; margin-bottom: 12px;}
    #sec1 .list li a .txt p{font-size: 16px;}
    #sec1 .list li a .img img{max-height: 140px; max-width: 190px;}
}
@media  all and (max-width:500px) {
    #sec1{padding: 90px 0 120px;}
    #sec1 .m_txt{gap:25px;}
    #sec1 .m_txt .button a{font-size: 15px; gap:18px; padding: 15px 24px;}
    #sec1 .list li{width: 300px; margin: 0 10px;}
    #sec1 .list li a .txt h3{font-size: 25px;}
    #sec1 .list li a .txt p{font-size: 16px;}
    #sec1 .list li a .img img{max-height: 130px; max-width: 180px;}
}


/* sec2 */
#sec2{padding: 180px 0;}
#sec2 .inner{display: flex; gap:60px;}
#sec2 .inner .l_cont{width: 67.14285714285714%;}
#sec2 .inner .l_cont .m_txt{margin-bottom: 70px;}
#sec2 .inner .l_cont .mid{display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;}
#sec2 .inner .l_cont .mid .tab{display: flex; border: 1px solid #DDD; border-radius: 100px;}
#sec2 .inner .l_cont .mid .tab li{line-height: 56px; padding: 0 32px; border-radius: 100px; color:#6b6b6b; font-weight: 600; font-size: 20px; text-align: center; cursor: pointer;}
#sec2 .inner .l_cont .mid .tab li.on{background-color: var(--color1); color:#fff;}
#sec2 .inner .l_cont .arrows{display: flex; gap:10px;}
#sec2 .inner .l_cont .arrows li{font-weight: 600; font-size: 20px; font-weight: 600; color:#6b6b6b; width: 56px; height: 56px; border-radius: 100%; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ddd; cursor: pointer;}
#sec2 .inner .l_cont .cont{display: none; gap:30px;}
#sec2 .inner .l_cont .cont.on{display: flex;}
#sec2 .inner .l_cont .cont .box{background-color: #F3F3F3; border-radius: 20px; width: 455px; margin-right: 30px;}
#sec2 .inner .l_cont .cont .box a{padding: 50px 40px; display: flex; flex-direction: column;}
#sec2 .inner .l_cont .cont .box a .tit{}
#sec2 .inner .l_cont .cont .box a .tit .tag{font-size: 18px; font-weight: 600; color:#000; border-radius: 50px; line-height: 42px; padding: 0 20px; border: 1px solid #ddd; display: inline-block; margin-bottom: 20px;}
#sec2 .inner .l_cont .cont .box a .tit h3{font-size: 28px; color:#000; height: 2.4em; line-height: 1.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
#sec2 .inner .l_cont .cont .box a .date{font-size: 16px; font-weight: 500; color:#000000; opacity: 0.5; margin-top: 60px;}
#sec2 .inner .r_cont{width: 28.57142857142857%;}
#sec2 .inner .r_cont .list{display: flex; flex-direction: column; gap:30px; height: 100%;}
#sec2 .inner .r_cont .list li{height: 100%; border-radius: 20px; overflow: hidden; position: relative;}
#sec2 .inner .r_cont .list li:nth-child(1) a{background-color: #214B88;}
#sec2 .inner .r_cont .list li:nth-child(2) a{background-color: #00A684;}
#sec2 .inner .r_cont .list li a{display: block; padding: 50px;height: 100%;}
#sec2 .inner .r_cont .list li a .txt{color:#fff;}
#sec2 .inner .r_cont .list li a .txt h3{font-family: 'NanumSquare', sans-serif; font-size: 36px; font-weight: 800;}
#sec2 .inner .r_cont .list li a .txt p{font-size: 18px; font-weight: 600; color:#fff; opacity: 0.8; margin-top: 20px; line-height: 1.4em;}
#sec2 .inner .r_cont .list li a .img{position: absolute; bottom: 20px; right: 5px;}
#sec2 .inner .r_cont .list li a .img img{}


@media  all and (max-width:1400px) {
    #sec2{padding: 160px 0;}
    #sec2 .inner{gap:50px;}
    #sec2 .inner .l_cont {width: 50%;}
    #sec2 .inner .l_cont .m_txt{margin-bottom: 50px;}
    #sec2 .inner .l_cont .mid{margin-bottom: 30px;}
    #sec2 .inner .l_cont .mid .tab li{line-height: 52px; padding: 0 27px; font-size: 19px;}
    #sec2 .inner .l_cont .cont .box{width: 100%; margin-right: 0;}
    #sec2 .inner .l_cont .arrows li{width: 52px; height: 52px; font-size: 19px;}
    #sec2 .inner .l_cont .cont .box a{padding: 40px 35px;}
    #sec2 .inner .l_cont .cont .box a .tit .tag{font-size: 17px; line-height: 38px; padding: 0 17px; margin-bottom: 17px;}
    #sec2 .inner .l_cont .cont .box a .tit h3{font-size: 26px;}
    #sec2 .inner .l_cont .cont .box a .date{margin-top: 50px;}
    #sec2 .inner .r_cont{width: 50%;}
    #sec2 .inner .r_cont .list li a{padding: 40px;}
    #sec2 .inner .r_cont .list li a .txt h3{font-size: 32px;}
    #sec2 .inner .r_cont .list li a .txt p{font-size: 17px; margin-top: 17px;}
    #sec2 .inner .r_cont .list li a .img img{width: 154px;}
}
@media  all and (max-width:1024px) {
    #sec2{padding: 140px 0;}
    #sec2 .inner{gap:40px;}
    #sec2 .inner .l_cont .m_txt{margin-bottom: 40px;}
    #sec2 .inner .l_cont .mid .tab li{line-height: 48px; padding: 0 16px; font-size: 18px;}
    #sec2 .inner .l_cont .arrows{gap:7px;}
    #sec2 .inner .l_cont .arrows li{width: 48px; height: 48px; font-size: 18px;}
    #sec2 .inner .l_cont .cont .box a .tit .tag{font-size: 16px; line-height: 35px; padding: 0 15px; margin-bottom: 15px;}
    #sec2 .inner .l_cont .cont .box a .tit h3{font-size: 24px;}
    #sec2 .inner .r_cont .list li a .txt h3{font-size: 28px;}
    #sec2 .inner .r_cont .list li a .txt p{font-size: 17px; margin-top: 17px;}
    #sec2 .inner .r_cont .list li a .img img{width: 148px;}
    
}
@media  all and (max-width:768px) {
    #sec2{padding: 120px 0;}
    #sec2 .inner{flex-direction: column; gap:50px;}
    #sec2 .inner .l_cont .mid .tab li{line-height: 45px; font-size: 17px; padding: 0 14px;}
    #sec2 .inner .l_cont .arrows li{font-size: 17px; width: 45px; height: 45px;}
    #sec2 .inner .l_cont .cont .box a{padding: 35px 30px;}
    #sec2 .inner .l_cont .cont .box a .date{margin-top: 35px;}
    #sec2 .inner .l_cont, #sec2 .inner .r_cont{width: 100%;}
    #sec2 .inner .l_cont .cont .box a .tit .tag{font-size: 15px; line-height: 34px; margin-bottom: 14px;}
    #sec2 .inner .l_cont .cont .box a .tit h3{font-size: 22px;}
    #sec2 .inner .r_cont .list{gap:20px;}
    #sec2 .inner .r_cont .list li a{padding: 60px 40px;}
    #sec2 .inner .r_cont .list li a .txt h3{font-size: 25px;}
    #sec2 .inner .r_cont .list li a .txt p{font-size: 16px; margin-top: 15px;}
    #sec2 .inner .r_cont .list li a .img img{width: 136px;}
}
@media  all and (max-width:500px) {
    #sec2{padding: 100px 0;}
    #sec2 .inner .l_cont .cont .box a .tit h3{font-size: 20px;}
    #sec2 .inner .r_cont .list li a{padding: 50px 8%;}
    #sec2 .inner .r_cont .list li a .txt h3{font-size: 23px;}
    #sec2 .inner .r_cont .list li a .txt p{margin-top: 13px;}
    #sec2 .inner .r_cont .list li a .img img{width: 120px;}
}