@charset "UTF-8";


.header.main-h{left:50%; top:52px; transform: translateX(-50%); width:calc(100% - (85px * 2)); height:auto; border:0; background: transparent;}
.header.main-h .hd-inner{padding:0;}
.header.main-h .logo{color:var(--gray-0)}
.header.main-h .menu > ul > li > a{color:var(--gray-0);}
.header.main-h .site-map-btn::before, .header.main-h .site-map-btn::after{background: var(--gray-0);}

@media (max-width:1240px) {
    .header{width:100%; top:0; background: var(--gray-0);}
}



#sec1{width:100%; height:100vh; background: var(--gray-50);}
#sec1 .sec-inner{width:100%; height:100%;}
#sec1 .swiper1{width:100%; height:100%;}
#sec1 .swiper1 .swiper-slide{display: flex; align-items: center;}
#sec1 .swiper1 .swiper-slide.slide1{background: url("../img/mobility-bg1.png") no-repeat center / cover;}
#sec1 .swiper1 .slide-inner{max-width:1440px; width:100%; margin:0 auto;}
#sec1 .swiper1 .cont-txt{display: flex; flex-direction: column; gap:25px;}
#sec1 .swiper1 .cont-txt h2{font-size:55px; line-height: 125%; color:var(--gray-0); font-weight: 200;}
#sec1 .swiper1 .cont-txt h2 span{font-weight: 700;}
#sec1 .swiper1 .cont-txt p{font-size:21px; color:var(--gray-0); opacity: .75;}
#sec1 .notice{display: flex; position: absolute; left:50%; bottom:52px; transform: translateX(-50%); max-width:1440px; width:100%; height:75px; border:2px solid rgba(255, 255, 255, .9);; border-radius: 999px; background: rgba(255, 255, 255, .25); backdrop-filter: blur(15px); z-index: 10; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);}
#sec1 .notice h3{display: flex; align-items: center; justify-content: center; width:150px; font-size:18px; font-weight: 700; color:var(--gray-0);}
#sec1 .notice .swiper{width:calc(100% - 100px); height:100%;}
#sec1 .notice .swiper-slide{padding-right:130px;}
#sec1 .notice .swiper-slide a{display: flex; align-items: center; gap:25px; width:100%; height:100%;}
#sec1 .notice .swiper-slide .title{width:calc(100% - 125px); font-size:18px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; color:#fff;}
#sec1 .notice .swiper-slide .date{width:100px; font-size:16px; font-weight: 200; line-height: 1; color:var(--gray-0); text-align: right;}
#sec1 .notice .control{display: flex; align-items: center; gap:5px; position: absolute; right:12.5px; top:50%; transform: translateY(-50%); z-index: 1;}
#sec1 .notice .control div{display: flex; align-items: center; justify-content: center; width:50px; height:50px; border:1px solid rgba(255, 255, 255, .75); border-radius: 100%; background: rgba(255, 255, 255, .25); transition: all .3s ease; cursor: pointer;}
#sec1 .notice .control div i{font-size:24px; color:var(--gray-0); transition: all .3s ease;}
#sec1 .notice .control div:hover{background: rgba(255, 255, 255, .75);}
#sec1 .notice .control div:hover i{color:var(--blue-500);}




@media (max-width:1440px) {
    #sec1 .swiper1 .slide-inner,
    #sec1 .notice {width:90%;}
    #sec1 .swiper1 .cont-txt h2{font-size:45px;}
    #sec1 .swiper1 .cont-txt p{font-size:18px;}
    #sec1 .notice{height:55px;}
    #sec1 .notice .control{right:5px;}
    #sec1 .notice .control div{width:41px; height:41px;}
    #sec1 .notice h3{font-weight: 500;}
    #sec1 .notice .swiper-slide{padding-right:105px;}
    #sec1 .notice .swiper-slide .title{font-size:16px;}
    #sec1 .notice .swiper-slide .date{font-size:14px;}
    #sec1 .notice .control div i{font-size:18px;}
}

@media (max-width:768px) {
    #sec1 .swiper1 .slide-inner,
    #sec1 .notice {width:95%; bottom:15px}
    #sec1 .notice{border-width: 1.5px;}
    #sec1 .notice h3{width:100px;}
    #sec1 .swiper1 .cont-txt{justify-content: center; align-items: center;}
    #sec1 .swiper1 .cont-txt h2{font-size:36px; text-align: center;}
    #sec1 .swiper1 .cont-txt p{text-align: center;}
    
}

@media (max-width:550px) {
    #sec1 .notice h3{display: none;}
    #sec1 .notice .swiper{width:100%;}
    #sec1 .notice .swiper-slide{padding-left:15px;}
    #sec1 .notice .swiper-slide a{gap:15px;}
    #sec1 .notice .swiper-slide .title{width:calc(100% - 95px);}
    #sec1 .notice .swiper-slide .date{width:80px;}
    #sec1 .swiper1 .cont-txt h2{font-size:28px;}
    #sec1 .swiper1 .cont-txt p{font-size:14px;}
}