@charset "utf-8";

#mVisual{width: 100%; height: 100vh; position: relative;  height: auto; aspect-ratio: 1440/910; overflow: hidden;}
#mVisual .visual{width: 100%; height: 100%;}
#mVisual .visual > div{height: 100%;}
#mVisual .visual > div > div{height: 100%;}
#mVisual .visual .mv{width: 100%; height: 100%; background-color: #000;}
#mVisual .visual .mv.mv1{background: url('/images/main/mv.webp') center center / cover no-repeat;}
#mVisual .visual .mv .inner{height: 100%;}
#mVisual .visual .mv .inner .txt{ height: 100%; padding-top: 200px; text-align: left;}
#mVisual .visual .mv .inner .txt h3{font-size: 48px; margin-bottom: 0.4em; line-height: 1.3em; color: #1d2c55; word-break: keep-all;}
#mVisual .visual .mv .inner .txt h4{font-size: 24px; color: #374567; font-weight: 500; word-break: keep-all;}
#mVisual .visual .mv .inner .txt p{margin-top: 1.3em; font-size: 16px; font-weight: 300;  line-height: 1.6em; color: #121d39; word-break: keep-all;}

br.mo{display: none;}
br.mo568{display: none;}

@media all and (max-width:1280px){
    #mVisual .visual .mv .inner .txt{padding-top: 140px;}
}
@media all and (max-width:1024px){
    #mVisual .visual .mv .inner .txt{padding-top: 110px;}
    #mVisual .visual .mv .inner .txt h3{font-size: 40px;}
}
@media all and (max-width:768px){
    #mVisual{aspect-ratio: 768/817;}
    #mVisual .visual .mv.mv1{background: url('/images/main/mv_mo.webp') center bottom / cover no-repeat;}
	#mVisual .visual .mv .inner .txt h3{font-size: 32px; }
    #mVisual .visual .mv .inner .txt p{}
    br.mo{display: block !important;}
}
@media all and (max-width:568px){
    br.mo568{display: block !important;}
}
@media all and (max-width:480px){
    #mVisual .visual .mv .inner .txt{padding-top: 20vw;}
	#mVisual .visual .mv .inner .txt h3{font-size: 3.0rem; }
    #mVisual .visual .mv .inner .txt h4{font-size: 2.2rem;}
    #mVisual .visual .mv .inner .txt p{font-size: 1.8rem;}
    #mVisual .visual .mv .inner .txt p br{display: none;}
}



.mtitle{margin-bottom: 70px;}
.mtitle h4{margin-bottom: 0.7em; color: #133f8f; font-size: 2.4rem; font-weight: 600;}
.mtitle h3{font-size: 4.0rem; line-height: 1.4em; color: #000; word-break: keep-all;}
@media all and (max-width:1280px){
    .mtitle h4{}
    .mtitle h3{font-size: 3.8rem;}
}
@media all and (max-width:1024px){
    .mtitle{margin-bottom: 50px;}
}
@media all and (max-width:768px){
    .mtitle h4{font-size: 2.0rem;}
    .mtitle h3{font-size: 3.4rem;}
}
@media all and (max-width:568px){
    .mtitle{margin-bottom: 40px;}
}
@media all and (max-width:480px){
    .mtitle{margin-bottom: 9vw;}
    .mtitle h4{font-size: 1.8rem;}
    .mtitle h3{font-size: 2.8rem;}
}

#mIndustry{}
#mIndustry .contwrap{display: flex; flex-wrap: wrap; gap: 24px;}
#mIndustry .contwrap .box {display: block; width: calc((100% - 24px*2)/3);}
#mIndustry .contwrap .box .img{overflow: hidden; position: relative;}
#mIndustry .contwrap .box .img:before{content: ''; transition: all .5s;}
#mIndustry .contwrap .box .img:hover:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.4);}
#mIndustry .contwrap .box .img img{width: 100%;}
#mIndustry .contwrap .box p{margin-top: 1.17em; font-size: 2.4rem ; color: #000; font-weight: 500; text-align: center;;}
@media all and (max-width:1280px){
}
@media all and (max-width:1024px){
    #mIndustry .contwrap {justify-content: center; gap: 60px 24px;}
    #mIndustry .contwrap .box {width: calc((100% - 24px*1)/2);}
    #mIndustry .contwrap .box p{margin-top: 1em; font-size: 2.2rem;}
}
@media all and (max-width:768px){
      #mIndustry .contwrap{gap: 5vw 1em;}
}
@media all and (max-width:568px){
}
@media all and (max-width:480px){
      #mIndustry .contwrap .box {width: 100%;}
}



#mDevelop{overflow: hidden;}
#mDevelop .mtitle{margin-bottom: 90px;}
#mDevelop .cont_inner{max-width: 1300px; width: 90%; margin: 0 auto;}
#mDevelop .develop_st .slick-list{margin-right: -50px;}
#mDevelop .develop_st .item_wrap{position: relative; height: auto; margin-right: 50px; padding: 0 0 60px; }
#mDevelop .develop_st .item{width: 100%; height: auto; aspect-ratio: 638/873;  display: flex !important; align-items: flex-end; padding: 0 60px 120px;}
#mDevelop .develop_st .item.bg1{background: url('/images/main/develop_bg1.webp')no-repeat center top/cover;}
#mDevelop .develop_st .item.bg2{background: url('/images/main/develop_bg2.webp')no-repeat center top/cover;}
#mDevelop .develop_st .item.bg3{background: url('/images/main/develop_bg3.webp')no-repeat center top/cover;}
#mDevelop .develop_st .item.bg4{background: url('/images/main/develop_bg4.webp')no-repeat center top/cover;}
#mDevelop .develop_st .item_wrap dl{color: #fff;}
#mDevelop .develop_st .item_wrap dl dt{font-size: 30px; font-weight: 600;}
#mDevelop .develop_st .item_wrap dl dd{margin-top: 0.7em; font-weight: 300; line-height: 1.5;}
#mDevelop .develop_st .item_wrap .go_link{position: absolute; display: flex; justify-content: center; align-items: center; width: 120px; aspect-ratio: 1/1; border-radius: 50%; background-color: #000; border:8px solid #fff;  left: 50%; transform: translateX(-50%); bottom: 0;}


#mDevelop .develop_st .item_wrap:has(.go_link[href*="alert"]) .item{position: relative;}
#mDevelop .develop_st .item_wrap:has(.go_link[href*="alert"]) .item:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
#mDevelop .develop_st .item_wrap:has(.go_link[href*="alert"]) .item:after{content: '업데이트 예정'; position: absolute; z-index: 3; font-size: 2.4rem; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#mDevelop .develop_st .item_wrap .go_link[href*="alert"]{background-color: #818181;}

#mDevelop .slick-dots{bottom: calc(100% + 34px); transform: translateX(-50%);}
#mDevelop .slick-dots li{background-color: #cccccc;}
#mDevelop .slick-dots li.slick-active{background-color: #12408e;}


@media all and (max-width:1280px){
    #mDevelop .develop_st .slick-list{margin-right: -30px;}
    #mDevelop .develop_st .item_wrap{margin-right: 30px;}
}
@media all and (max-width:1024px){
    #mDevelop .mtitle{margin-bottom: 80px;}

    #mDevelop .develop_st .item_wrap{padding: 0 0 45px;}
    #mDevelop .develop_st .item{padding: 0 40px 90px;}
    #mDevelop .develop_st .item_wrap dl dd br{display: none;}
    #mDevelop .develop_st .item_wrap .go_link{width: 90px;}

    #mDevelop .slick-dots{bottom: calc(100% + 26px); }
}
@media all and (max-width:768px){
    #mDevelop .mtitle h3 br{display: none;} 
    #mDevelop .develop_st .slick-list{margin-right: -2em;}
    #mDevelop .develop_st .item_wrap{margin-right: 1em; padding: 0 0 35px;}
    #mDevelop .develop_st .item{padding: 0 20px 70px;}
    #mDevelop .develop_st .item_wrap dl dt{font-size: 2.8rem;}
    #mDevelop .develop_st .item_wrap .go_link{width: 70px; border-width: 5px;}
}
@media all and (max-width:568px){
    #mDevelop .mtitle{margin-bottom: 60px;}

    #mDevelop .develop_st .slick-list{margin-right: 0}
    #mDevelop .develop_st .item_wrap{margin-right: 0;}
    #mDevelop .develop_st .item_wrap dl dt{font-size: 2.6rem;}

    #mDevelop .slick-dots{bottom: calc(100% + 10px);}
}
@media all and (max-width:480px){
    #mDevelop .mtitle{margin-bottom: 11vw;}
}
@media all and (max-width:380px){
    #mDevelop .slick-dots{bottom: calc(100% + 5px);}
}
#mSystem{padding: 80px 0; color: #fff; background-color: #101010; overflow: hidden;}
#mSystem .title{margin-bottom: 80px; text-align: center; line-height: 1.5;}
#mSystem .title h3{font-size: 5.6rem;}
#mSystem .title p{margin-top: 1.5em; font-size: 1.8rem; font-weight: 500; word-break: keep-all;}
#mSystem .imgwrap{position: relative; max-width: 1024px; margin: 0 auto;}
#mSystem .imgwrap:before{content: ''; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 60%); width:150%; aspect-ratio: 1638/471; background:url('/images/main/system_light1.webp')no-repeat center center/contain;}
#mSystem .imgwrap:after{content: ''; position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%); width:150%; aspect-ratio: 1607/469; background:url('/images/main/system_light2.webp')no-repeat center center/contain;}
#mSystem .imgwrap .imgcont{max-width: 100%; position: relative; z-index: 3;}
#mSystem .contwrap{margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: center; gap: 70px 20px; text-align: center;}
#mSystem .contwrap .box{width: calc((100% - 20px*2)/3);}
#mSystem .contwrap .box dl{}
#mSystem .contwrap .box dl dt{margin-top: 1em; font-size: 22px; line-height: 1.2;}
#mSystem .contwrap .box dl dd{margin-top: 1em; font-size: 18px; line-height: 1.5;}
@media all and (max-width:1280px){
    #mSystem .title h3{font-size: 5.2rem;}
}
@media all and (max-width:1024px){
    #mSystem .title h3{font-size: 5.0rem;}
}
@media all and (max-width:768px){
    #mSystem .title h3{font-size: 4.4rem;}
    #mSystem .contwrap .box dl dt{font-size: 2.0rem;}
    #mSystem .contwrap .box dl dd{font-size: 1.8rem; word-break: keep-all;}
}
@media all and (max-width:568px){
    #mSystem .title h3{font-size: 4.0rem;}
    #mSystem .contwrap .box{width: calc((100% - 20px*1)/2);}
 
}
@media all and (max-width:480px){
    #mSystem .title h3{font-size: 3.4rem;}
    #mSystem .contwrap{gap: 5vw 1em;}
     #mSystem .contwrap .box dl dd{font-size: 1.7rem;}
}


#mAsk{background: url('/images/main/ask_bg.webp')no-repeat center bottom;}
#mAsk .mtitle{text-align: center;}
#mAsk .link_wrap{text-align: center;}
#mAsk .link_wrap .link{display: inline-block; width: 185px; line-height: 48px; font-size: 1.8rem; font-weight: 600; color: #000; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); border-radius: 10px; background-color: #fff;}
#mAsk .imgwrap{padding:120px 0 80px ; text-align: center;}
#mAsk .imgwrap .imgcont{width: 800px; max-width: 100%;}

@media all and (max-width:1280px){
}
@media all and (max-width:1024px){
}
@media all and (max-width:768px){
}
@media all and (max-width:568px){
}
@media all and (max-width:480px){
    #mAsk .imgwrap{padding: 15vw 0 10vw;}
}


.popup:has(.contactBox){max-width: 600px;}
.popup:has(.contactBox) .in-box{height: 600px;}
@media all and (max-width:768px){
.popup:has(.contactBox) .in-box{height: auto; overflow: hidden;}

}
.contactBox{background-color: #f1f3f5; padding: 8% 3%;}
.contactBox + .contactBox{margin-top: 20px;}
.contactBox dt{margin-bottom: 20px; color: #374567; font-weight: 600;}
.contactBox dd .dev1_contact{flex-direction: column; align-items: center;}