@CHARSET "UTF-8";

/*main page 2026*/
.mainPg{width:100%; min-width:1080px; overflow:hidden}
.mainPg .footer{display:none}
.mainPart{position:relative; width:100%; height:100vh; min-height:700px; background-color:#000b18}

/*carousel*/
.mainCarousel{position:relative; width:100%; height:100vh; min-height:100vh; overflow:hidden}
.mainCarousel__slides{position:relative; width:100%; height:100%; min-height:inherit}
.mainCarousel__slide{position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; transition:opacity 0.6s ease; pointer-events:none}
.mainCarousel__slide.is-active{opacity:1; pointer-events:auto; z-index:1}
.mainCarousel__bg{width:100%; height:100%; object-fit:cover; object-position:center center; display:block}
.mainCarousel__arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:50px; height:50px; border:none; background:transparent; cursor:pointer; padding:0; opacity:0.7; transition:opacity 0.2s}
.mainCarousel__arrow:hover{opacity:1}
.mainCarousel__arrow--prev{left:0}
.mainCarousel__arrow--prev img{width:50px; height:auto}
.mainCarousel__arrow--next{right:0}
.mainCarousel__arrow--next img{width:50px; height:auto}
.mainCarousel__pagination{position:absolute; left:150px; bottom:210px; z-index:10; display:flex; align-items:center; gap:20px}
.mainCarousel__counter{font-family:'Pretendard', sans-serif; font-weight:700; font-size:24px; color:#fff}
.mainCarousel__counter span{font-weight:400; color:rgba(255,255,255,0.3)}
.mainCarousel__dots{display:flex; align-items:center; gap:20px}
.mainCarousel__dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; padding:0; cursor:pointer; transition:all 0.3s}
.mainCarousel__dot.is-active{width:40px; border-radius:30px; background:#3366ff}

/*solution bar*/
.mainSolution{position:absolute; bottom:0; left:0; width:100%; height:170px; display:flex; z-index:20; border-top:1px solid rgba(145,160,174,0.7)}
.mainSolution__item{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:none; border-right:1px solid rgba(145,160,174,0.7); cursor:pointer; transition:background 0.2s; background:transparent}
.mainSolution__item:last-child{border-right:none}
.mainSolution__item:hover{background:rgba(103,209,255,0.12)}
.mainSolution__icon{width:55px; height:56px; object-fit:contain; margin-bottom:16px}
.mainSolution__icon--bus{width:60px; height:44px}
.mainSolution__label{font-family:'Pretendard', sans-serif; font-weight:500; font-size:20px; color:#fff; text-align:center}

/*header main page*/
#header.header--main{position:fixed; top:0; left:0; width:100%; height:auto; min-height:79px; z-index:150000; background:transparent; border-bottom:none; color:#fff; transition:background 0.3s; overflow:visible}
#header.header--main .menuDiv{min-width:1080px; max-width:1920px; height:auto; margin:0 auto; padding:40px 70px 0; display:flex; align-items:flex-end}
#header.header--main .menuDiv .homeIc,#header.header--main .menuDiv .menus{float:none}
#header.header--main .menuDiv .homeIc{width:100px !important; flex-shrink:0}
#header.header--main .menuDiv .homeIc .logoImg{width:100px; height:38px; margin-top:0; object-fit:contain; padding-bottom:10px}
#header.header--main .menuDiv .menus{width:auto; flex:none; margin-left:107px}
#header.header--main .menuDiv .menus .menu_wrap{display:flex; justify-content:flex-start; align-items:flex-end; gap:63px}
#header.header--main .menuDiv .menus .menu{cursor:pointer; width:auto; text-align:center; font-size:23px; line-height:1; font-weight:700; font-family:'Pretendard', sans-serif; color:#fff !important; position:relative; padding-bottom:0}
#header.header--main .menuDiv .menus .menu .menuTxt{display:block; padding-bottom:20px}
#header.header--main .menuDiv .menus .menu--has-sub{cursor:default}
#header.header--main .menuDiv .menus .menu:hover{font-weight:900; color:#fff !important}
#header.header--main .menuDiv .menus .menu--hover,#header.header--main .menuDiv .menus .menu.menu--active{font-size:25px; font-weight:900}
#header.header--main .menuDiv .menus .menu--hover .mb,#header.header--main .menuDiv .menus .menu.menu--active .mb{display:block !important; position:absolute; bottom:0; left:0; right:0; transform:none; width:100%; height:2px; background-color:#67d1ff !important; margin-top:0; z-index:2}
#header.header--main .menuDiv .menus .menu--clickable{cursor:pointer}
#header.header--main .menuDiv .menus .menu--clickable:hover{color:#fff !important}
#header.header--main .header__line{display:block; width:100%; height:1px; margin-top:0; line-height:0}
#header.header--main .header__line img{width:100%; height:1px; display:block}
#header.header--main .menuDivSub{display:none; height:80px; background:transparent; border-top:none; padding:0}
#header.header--main .menuDivSub.is-open{display:block !important}
#header.header--main .menuDivSub .submenuWrap{display:flex; height:79px; margin:0 auto; padding:0 10px; position:relative}
#header.header--main .menuDivSub .submenuWrap .submenu{display:none; flex-wrap:nowrap; position:relative; width:auto; min-width:0}
#header.header--main .menuDivSub .submenuWrap .submenu.is-visible{display:flex !important}
#header.header--main .menuDivSub .submenuWrap .submenu div{margin-right:50px; font-family:'Pretendard', sans-serif; font-size:20px; font-weight:500; line-height:80px; color:rgba(255,255,255,0.7); cursor:pointer; white-space:nowrap}
#header.header--main .menuDivSub .submenuWrap .submenu div:hover{font-weight:500; color:#67d1ff}

/*header detail pages - show mb on hover (keep web.css color/size) */
#header.header--2026 .menuDiv .menus .menu--hover .mb,
#header.header--2026 .menuDiv .menus .menu.menu--active .mb{display:block !important}

@media(max-width:1400px){
	.mainCarousel__pagination{left:80px; bottom:200px}
}
@media(max-width:1200px){
	.mainSolution__label{font-size:16px}
	#header.header--main .menuDiv .menus{margin-left:60px}
	#header.header--main .menuDiv .menus .menu_wrap{gap:40px}
}
