@charset "utf-8";

/* common */

.mp_part{padding: 120px 0;}
.mm_part{margin: 120px 0;}

br.mo{display: none;}

.m_txt{margin-bottom: 60px;}
.m_txt h4{ font-size: 20px;}
.m_txt h3{font-size: 48px; font-weight: 700; color: #000000; line-height: 1.3em; word-break: keep-all;}
.m_txt h3 span{word-break: keep-all;}
.m_txt h2{font-weight: 700; font-size: 56px; line-height: 1.3em; color: #000; word-break: keep-all;}
.m_txt p{margin-top: 1.2em; line-height: 2; color: #555; font-size: 18px; word-break: keep-all;}

@media all and (max-width:1400px){
    .m_txt{margin-bottom: 50px;}
	.m_txt h4{font-size: 19px;}
	.m_txt h3{font-size: 36px;}
	.m_txt h2{font-size: 48px;}
}
@media all and (max-width:1024px){
.mp_part{padding: 100px 0;}
.mm_part{margin: 100px 0;}

    .m_txt{margin-bottom: 40px;}
	.m_txt h4{font-size: 18px;}
	.m_txt h3{font-size: 33px;}
	.m_txt h2{font-size: 40px;}
}
@media all and (max-width:768px){
.mp_part{padding: 80px 0;}
.mm_part{margin: 80px 0;}

br.mo{display: block;}


    .m_txt{margin-bottom: 35px;}
	.m_txt h4{font-size: 17px;}
	.m_txt h3{font-size: 30px;}
	.m_txt h2{font-size: 34px;}
	.m_txt p{font-size: 17px; }
}
@media all and (max-width:568px){
.mp_part{padding: 15vw 0;}
.mm_part{margin: 15vw 0;}

    .m_txt{margin-bottom: 30px;}
	.m_txt h4{font-size: 16px;}
	.m_txt h3{font-size: 2.6rem;}
	.m_txt h2{font-size: 3rem;}
	.m_txt p{font-size: 1.6rem;}
}


/* mVisual */
#mVisual{width: 100%; height: 100vh; max-height: 820px; overflow: hidden; position: relative;}
#mVisual .visual{width: 100%; height: 100%;}
#mVisual .visual > div{height: 100% !important;}
#mVisual .visual > div > div{height: 100% !important;}
#mVisual .visual .mv{background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; height: 100%;}
#mVisual .visual .mv.mv1{background-image: url(/images/main/m_visual1_260128.webp);}
#mVisual .visual .mv.mv2{background-image: url(/images/main/m_visual2_260129_2.webp);}
#mVisual .visual .mv.mv3{background-image: url(/images/main/m_visual3.webp);}
#mVisual .visual .mv{}
#mVisual .visual .mv .s-inner{height: 100%; display: flex; flex-direction: column; justify-content: center; position: relative;}
#mVisual .visual .mv .s-inner .m_txt{position: absolute; top: 150px;}
#mVisual .visual .mv .s-inner .m_txt h2{color: #fff;}
#mVisual .visual .mv .s-inner .m_txt p{color: #fff; margin-top: 0; font-size: 25px;}
#mVisual .visual .mv .s-inner .m_txt a{margin-top: 0;}
#mVisual .visual .mv .s-inner .m_txt .box{display: flex; flex-wrap: wrap; align-items: center; gap:20px; margin-top: 40px;}
#mVisual .status{position: absolute; z-index: 9; right: 0; bottom: 40px; display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-radius: 60px; background-color: rgb(0, 0, 0, 0.8);}
#mVisual .status .left_cont{color: #777; font-size: 14px; font-weight: 700; line-height: 1;}
#mVisual .status .left_cont .now_num{color: #fff;}
#mVisual .status .right_cont .arrow{display: flex; gap: 9px; align-items: center; font-size: 14px;}
#mVisual .status .right_cont .arrow div{color: #fff; font-family: 'SUIT'; font-size: 15px; font-weight: 500; cursor: pointer;} 

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

}
@media all and (max-width:976px){
	#mVisual{height: auto; aspect-ratio: 9/8;}
    #mVisual .status{right: auto; left: 50%; gap: 10px; padding: 6px 12px; transform: translateX(-50%); bottom: 20px;}
    #mVisual .status .left_cont{font-size: 13px;}
    #mVisual .status .right_cont .arrow {font-size: 13px; gap: 5px;}
    #mVisual .status .right_cont .arrow div{font-size: 13px;}
}
@media all and (max-width:768px){

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

}


[data-aos="highlighter"]{position: relative;background: linear-gradient(to right, #003380 50%); background-size: 200% 1.4em; background-repeat: no-repeat;background-position: 200% 100%; padding: 0 1rem;}
[data-aos="highlighter"].aos-animate{background-position: 100% 100%;}


.m_btn{position: relative; display: inline-flex; padding: 20px 30px; gap: 1em; background-color: #003380; font-size: 18px; color: #fff; font-weight: 700; border-radius: 10px;} 
.m_btn:after{content: '→'; font-family: 'SUIT'; font-size: 18px;}
@media all and (max-width:1024px){
    .m_btn{padding: 15px 25px; font-size: 17px;}
    .m_btn:after{font-size: 17px;}
}
@media all and (max-width:568px){
    .m_btn{padding: 0.8em 1.6em; font-size: 1.6rem;;}
    .m_btn:after{font-size: 1.6rem;}
}

#msec1{padding: 110px 0;}
@media all and (max-width:768px){
    #msec1{padding: 80px 0;}
}
@media all and (max-width:568px){
    #msec1{padding: 16vw 0;}
}


#msec2{padding: 200px 0; background:url('/images/main/msec2-bg.webp')no-repeat center center/cover;}
@media all and (max-width:768px){
    #msec2{padding: 150px 0;}
}
@media all and (max-width:568px){
    #msec2{padding: 25vw 0;}
}

#msec3{padding: 90px 0;}
#msec3 .inner{display: flex; justify-content: space-between;}
#msec3 .inner .top{padding-top: 130px;}
#msec3 .inner .top dl{margin-bottom: 45px;}
#msec3 .inner .top dl dt{font-size: 32px; font-family: 'Noto Serif KR'; letter-spacing: -0.06em; word-break: keep-all;}
#msec3 .inner .top dl dd{font-size: 18px; color: #555; line-height: 2em; word-break: keep-all;}
#msec3 .inner .top dl dt + dd{padding-top: 1em;}
#msec3 .inner .mid{position: relative; margin:0 80px 0 40px; }
#msec3 .inner .mid .sb{position: absolute; z-index: -1; left: 55%; transform: translateX(-50%);}
#msec3 .inner .btm{padding-top: 130px;}
#msec3 .inner .btm dl{margin-bottom: 45px;}
#msec3 .inner .btm dl dt{font-size: 24px;}
#msec3 .inner .btm dl dd{font-size: 48px; color: #000;}
#msec3 .inner .btm ul {}
#msec3 .inner .btm ul li{color: #333; font-size: 18px; line-height: 1.3; word-break: keep-all;}
#msec3 .inner .btm ul li + li{margin-top: 0.6em;}
#msec3 .inner .btm .m_btn{display: none;}
@media all and (max-width:1479px){
    #msec3 .inner .top{width: 30%; padding-top: 7%;}
    #msec3 .inner .top dl dt br{display: none;}
    #msec3 .inner .top dl dd br{display: none;}
    #msec3 .inner .mid{width: 30%;}
    #msec3 .inner .mid img{max-width: 100%;}
    #msec3 .inner .btm{ padding-top: 7%;}
}
@media all and (max-width:1280px){
    #msec3 .inner .top{padding-top: 3%;}
    #msec3 .inner .top dl dt{font-size: 27px;}
    #msec3 .inner .top dl dd{font-size: 17px;}
    #msec3 .inner .btm{padding-top: 3%;}
    #msec3 .inner .btm dl dt{font-size: 20px;}
    #msec3 .inner .btm dl dd{font-size: 40px;}
    #msec3 .inner .btm ul li{font-size: 17px;}
}
@media all and (max-width:1024px){
    #msec3 .inner{flex-wrap: wrap; gap: 0;}
    #msec3 .inner .top{width: 100%; text-align: center;}
    #msec3 .inner .top dl dd br{display: block;;}
    #msec3 .inner .top .m_btn{display: none;}
    #msec3 .inner .mid{width:40%; margin: 0;}
    #msec3 .inner .btm{width: 60%; padding-left: 8%;}
    #msec3 .inner .btm .m_btn{margin-top: 30px; display: inline-flex;}
}
@media all and (max-width:768px){
    #msec3{padding: 60px 0;}
    #msec3 .inner .top dl dt br{display: block;}
    #msec3 .inner .top dl dd{font-size: 17px;}
    #msec3 .inner .btm {text-align: center;}
    #msec3 .inner .btm dl{margin-bottom: 20px;}
    #msec3 .inner .btm dl dt{font-size: 17px;}
    #msec3 .inner .btm dl dd{font-size: 32px;}
    #msec3 .inner .btm ul li{font-size: 16px;}
}
@media all and (max-width:568px){
    #msec3{padding: 10vw 0 15vw;}
    #msec3 .inner .top dl dt{word-break: keep-all; font-size: 2.5rem;}
    #msec3 .inner .top dl dt span{word-break: keep-all;}
    #msec3 .inner .top dl dd{font-size: 1.7rem;}
    #msec3 .inner .mid{width: 100%; max-width: 340px; margin: 0 auto;}
    #msec3 .inner .btm{width: 100%; padding-left: 0;}
    #msec3 .inner .btm ul li{font-size: 1.7rem;}
}

#msec4{background-color: #f6f7f9;}
#msec4 .contWrap{display: flex; justify-content: space-between; gap: 30px;}
#msec4 .contWrap .box .imgWrap{position: relative; border-radius: 20px; overflow: hidden;;}
#msec4 .contWrap .box .imgWrap .imgCont{max-width: 100%;}
#msec4 .contWrap .box .imgWrap h4{position: absolute; left: 30px; top: 30px; padding: 14px 20px; border-radius: 20px; background-color: #000; color: #fff; font-size: 24px;}
#msec4 .contWrap .box .imgWrap .tags{position: absolute ; left: 30px; bottom: 30px; display: flex; gap: 10px;}
#msec4 .contWrap .box .imgWrap .tags p{padding:7px 15px; background-color: #efefef; color: #222; font-weight: 500; font-size: 16px; border-radius: 5px;}
#msec4 .contWrap .box .list{padding: 30px;}
#msec4 .contWrap .box .list li{border-bottom: 1px solid #dddee0;}
#msec4 .contWrap .box .list li a{position: relative; display: block; padding: 16px 0; font-size: 18px; font-weight: 600; color: #000;}
#msec4 .contWrap .box .list li a .date{position: absolute; right: 0; top:50%; transform: translateY(-50%); color: #666; font-size: 16px; font-weight: normal;}

#msec4 .contWrap .box.ver2 .imgWrap h4{background-color: #e0e4ec; color: #000;}
@media all and (max-width:1479px){
    #msec4 .contWrap .box .imgWrap h4{padding: 0.5em 1em; font-size: 20px; border-radius: 0.6em;}
    
}
@media all and (max-width:1024px){
    #msec4 .contWrap .box .imgWrap h4{left: 15px; top: 15px; font-size: 17px;}
    #msec4 .contWrap .box .imgWrap .tags{left: 15px; bottom: 15px;;}
    #msec4 .contWrap .box .imgWrap .tags{flex-wrap: wrap;}
    #msec4 .contWrap .box .imgWrap .tags p{font-size: 1.5rem; padding: 0.4em 1em;}
    #msec4 .contWrap .box .list{padding: 0 15px;}
    #msec4 .contWrap .box .list li a .date{position: static; padding-top: 5px; display: block; transform: none; font-size: 1.6rem; opacity: .8;}
}
@media all and (max-width:768px){
    #msec4 .contWrap{display: block;}
    #msec4 .contWrap .box + .box{margin-top: 20px;}
    #msec4 .contWrap .box .imgWrap{border-radius: 12px;}
    #msec4 .contWrap .box .imgWrap h4{font-size: 1.6rem;}
    #msec4 .contWrap .box .imgWrap .tags{gap: 4px;}
    #msec4 .contWrap .box .imgWrap .tags p{font-size: 1.4rem; padding: 0.3em 0.7em;}
}


#msec5{}
#msec5 .inner{display: flex; }
#msec5 .inner > div{width: 50%;}
#msec5 .inner .r_cont{border-top: 1px solid #000;}
#msec5 .inner .r_cont .list{display: flex; flex-wrap: wrap;}
#msec5 .inner .r_cont .list li{width: 50%; position: relative; padding: 60px 45px;  counter-increment: number;}
#msec5 .inner .r_cont .list li:before{content: counter(number, decimal-leading-zero); position: absolute; left: 0; top: 30px;; font-family: 'Poppins'; color: #003380; opacity: .1; font-size: 90px; font-weight: 700; line-height: 1;}
#msec5 .inner .r_cont .list li dl dt{font-size: 20px; color: #000; font-weight: 700;}
#msec5 .inner .r_cont .list li dl dd{margin-top: 1em; font-size: 16px; color: #555; line-height: 1.6;}
@media all and (max-width:1479px){
    #msec5 .inner .r_cont .list li dl dd br{display: none;}
}
@media all and (max-width:1280px){
    #msec5 .inner .l_cont{padding-right: 3%;}
    #msec5 .inner .l_cont .m_txt p br{display: none;}
}
@media all and (max-width:1024px){
    #msec5 .inner {flex-wrap: wrap;}
    #msec5 .inner > div{width: 100%;}
    #msec5 .inner .l_cont{margin-bottom: 45px; padding-right: 0; text-align: center;}
    #msec5 .inner .l_cont .m_txt p br{display: block;}
    #msec5 .inner .r_cont .list li dl dd br{display: block;}
}
@media all and (max-width:768px){
    #msec5 .inner .r_cont .list li{padding: 40px 30px;}
    #msec5 .inner .r_cont .list li:before{top: 15px;}
    #msec5 .inner .r_cont .list li dl dt{word-break: keep-all;}
    #msec5 .inner .r_cont .list li dl dd br{display: none;}
}
@media all and (max-width:568px){
    #msec5 .inner .l_cont{margin-bottom: 30px;}
    #msec5 .inner .l_cont .m_txt{margin-bottom: 18px;}
    #msec5 .inner .r_cont .list li{padding:30px 20px 20px; padding-right: 0; padding-bottom: 0;}
    #msec5 .inner .r_cont .list li:before{font-size: 8rem;}
    #msec5 .inner .r_cont .list li dl dt{font-size: 2.0rem;}
    #msec5 .inner .r_cont .list li dl dd{font-size: 1.6rem;}
}


#msec6{background-color: #104391;}
#msec6 .list li{position: relative; padding: 60px; padding-right: 230px; margin-inline:20px; background-color: #fff; border-radius: 20px;}
#msec6 .list li img{position: absolute; right: 60px; top: 60px;}
#msec6 .list li dl dt{font-size: 32px; font-weight: 700; color: #000; line-height: 1.4;}
#msec6 .list li dl dd{font-size: 18px; color: #666;}
#msec6 .list li dl dt + dd{margin-top: 3em;}
@media all and (max-width:1479px){
    #msec6 .list li{padding: 40px; padding-right: 180px;}
    #msec6 .list li dl dt{font-size: 28px;}
    #msec6 .list li dl dt br{display: none;}
    #msec6 .list li dl dd{font-size: 17px;}
    #msec6 .list li img{width: 120px; right: 40px; top: 40px;}
}
@media all and (max-width:768px){
    #msec6 .list li{padding: 2em 3em; text-align: center; margin-inline:15px;}
    #msec6 .list li dl dt{font-size: 2.4rem;}
    #msec6 .list li dl dt + dd{margin-top: 1em; margin-bottom: 1em;}
    #msec6 .list li img{position: static; display: inline-block; }
}
@media all and (max-width:568px){
    #msec6 .list li dl dt{font-size: 2.2rem;}
    #msec6 .list li dl dd{font-size: 1.7rem;}
    #msec6 .list li img{width: 90px;}
}

#msec7{display: flex; gap: 40px;}
#msec7 .box{width: 50%; border:1px solid #e5e5e5;}
#msec7 .box .top{padding: 24px; font-size: 24px; display: flex; justify-content: space-between; align-items: center; border-bottom:1px solid #e5e5e5;}
#msec7 .box .top h4{color: #000;}
#msec7 .box .top a{font-size: 16px; color: #003380; font-weight: 700;}
#msec7 .box .list{padding: 0 24px;}
#msec7 .box .list li{border-bottom: 1px solid #e5e5e5;}
#msec7 .box .list li a{position: relative; display: block; padding: 24px 0; font-weight: 600; color: #000; font-size: 18px;}
#msec7 .box .list li a span.date{position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 16px; color: #666; font-weight: normal;}
@media all and (max-width:1024px){
    #msec7{gap: 20px;}
    #msec7 .box .list li a span.date{position: static; display: block; padding-top: 4px;; transform: none; opacity: .8; font-size: 1.6rem;}
}
@media all and (max-width:768px){
    #msec7{flex-wrap: wrap;}
    #msec7 .box{width: 100%;}
    #msec7 .box .top{padding: 18px; font-size: 18px;}
    #msec7 .box .top a{font-size: 14px;}
    #msec7 .box .list{padding: 0 18px;}
    #msec7 .box .list li a{padding: 18px 0; font-size: 16px;}
    #msec7 .box .list li a span.date{font-size: 14px;}
    
}


#msec8{display: flex;}
#msec8 .l_cont{width: 800px;}
#msec8 .mMap{width: 100%; height: 100%;}
#msec8 .mMap .wrap_map{height: 100% !important;}
#msec8 .mMap .cont{display: none;}
#msec8 .mMap .wrap_controllers {display: none;}
#msec8 .mMap .border2{display: block;}
#msec8 .r_cont{padding: 60px 0 60px 80px;}
#msec8 .r_cont .top h4{margin-bottom: 0.5em;  font-size: 24px; color: #000;}
#msec8 .r_cont .top h3{font-size: 40px; color: #000;}
#msec8 .r_cont .top p{margin-top: 0.5em; font-size: 18px; color: #555;}
#msec8 .r_cont dl{margin: 2em 0; display: flex; flex-wrap: wrap; font-size: 18px; color: #000; gap: 0.6em 0;}
#msec8 .r_cont dl dt{max-width: 20%; width: 100px; font-weight: 700;}
#msec8 .r_cont dl dd{width: calc(100% - 100px); color: #444; font-weight: 500;}
#msec8 .r_cont .btm{margin-top: 35px; padding-top: 35px; border-top: 1px solid #e5e5e5; }
#msec8 .r_cont .btm h4{font-size: 24px; color: #000;}
#msec8 .r_cont .btm p{margin-top: .5em; font-size: 18px; color: #555;}
@media all and (max-width:1024px){
    #msec8 .r_cont{padding: 40px 0 40px 6%;}
}
@media all and (max-width:768px){
    #msec8{display: block;}
    #msec8 .l_cont{width: 100%; height: 60vw;}
    #msec8 .r_cont{padding: 2em 0 0;}
    #msec8 .r_cont dl dt{width: 20%; min-width: 100px;}
}
@media all and (max-width:568px){
    #msec8 .r_cont .top h4{font-size: 20px;}
    #msec8 .r_cont .top h3{font-size: 30px;}
    #msec8 .r_cont .top p{font-size: 16px;}
    #msec8 .r_cont dl{font-size: 16px;}
    #msec8 .r_cont .btm{padding-top: 30px; margin-top: 30px;}
    #msec8 .r_cont .btm h4{font-size: 20px;}
    #msec8 .r_cont .btm p{font-size: 16px;}
}