@charset "utf-8";

/*공통*/
.arr{
    position: relative;
}
.arr:after{
    display:block;
}
nav.gnb{display: none;}
.main-tlt{
    font-weight: 800;
    font-size: 36px;
    color: #222222;
    margin-bottom: 7px;
}
.main-more{
    width: 36px;
    height: 36px;
    display: block;
    position: absolute;
    top: -5px;
    right: 0;
    background: #00000017;
    font-size: 0px;
    border-radius: 50%;
}
.main-more:after,.main-more:before{
 display:block;
 clear:both;
 content:"";
 width: 12px;
 height: 2px;
 background: #222222;
 position: absolute;
 top: 18px;
 left: 12px;
}
.main-more:before{
    transform: rotate(90deg);
}
.main-txt{color:#999999;font-weight: 400;margin-bottom: 73px;font-size: 14px;}

.swiper-button{
    width: 110px;
    position: absolute;
}
.swiper-button .next{
    padding-left: 2px;
}
.swiper-button .prev{
    padding-right: 2px;
}
.swiper-button .prev, .swiper-button .next{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.swiper-button .prev:after, .swiper-button .next:after{
    font-size: 15px;
    font-weight: bold;
}


@media all and (min-width:768px) {
.main-tlt{}
.main-more{}
.main-txt{}

.swiper-button{}
.swiper-button .next{}
.swiper-button .prev{}

}


@media all and (min-width:1280px) {
    .main-tlt{
    font-size: 64px;
    margin-bottom: 27px;
}
    .main-more{
    top: 0px;
}
    .main-txt{
    font-size: 18px;
}
    
.swiper-button{}
.swiper-button .next{
    right: 0px;
}
.swiper-button .prev{
    left: 0px;
}
.swiper-button .next, .swiper-button .prev{
    /* color: #fff; */
    width: 70px;
    height: 70px;
    /* background: #ffffff3b; */
    /* opacity: 1; */
    /* backdrop-filter: blur(30px); */
    /* border-radius: 50%; */
}
.swiper-button .next:after, .swiper-button .prev:after{font-size: 16px;font-weight: bold;}
    }
    


@media all and (min-width:1520px) {

    nav.gnb{display: block;position:fixed;top:50%;left: 40px;margin-top: -100px;}
    nav.gnb ul{
    line-height: 2;
}
    nav.gnb ul li{
    margin: 20px 0;
}
    nav.gnb ul li a{
    font-size: 14px;
    font-weight: 700;
    color: #88888890;
    opacity: 0.6;
    transition: 0.3s;
    width: 10px;
    height: 10px;
    display: block;
    background: #fff;
    border-radius: 50%;
    opacity: 0.4;
}
        nav.gnb ul li a.active{opacity: 1;}
    
    .fp-viewing-intro nav.gnb ul li a.menu01{opacity:1;position: relative;/* padding-left: 20px; */}

.fp-viewing-intro nav.gnb ul li a{color:#fff;}

    .fp-viewing-sec02 nav.gnb ul li a,     .fp-viewing-sec04 nav.gnb ul li a,.fp-viewing-6 nav.gnb ul li a{background:#4A4A4A;}
    .fp-viewing-sec01 nav.gnb ul li a.menu02:after, .fp-viewing-sec02 nav.gnb ul li a.menu03:after, .fp-viewing-sec03 nav.gnb ul li a.menu04:after{
   
    }

    
}



/*메인 텍스트 애니메이션*/

.main-text-animation-box {
    overflow: hidden;
    display: inline-block;
}
.main-text-animation {
    -webkit-animation-name: main-text-animation;
    animation-name: main-text-animation;
    transition: transform 0.8s cubic-bezier(.21,1.03,.7,1);
    transition: transform 1s cubic-bezier(.165,.84,.44,1)!important;
    display: inline-block;
}

@-webkit-keyframes main-text-animation {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes main-text-animation {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}



/*intro*/

.main-slider{
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1 !important; */
}
.main-slider .m1{
    background: url(/img/mainvs01.png) no-repeat center;
}
.main-slider .m2{
    background: url(/img/mainvs02.png) no-repeat center;
}
.main-slider .m3{
    background: url(/img/mainvs03.png) no-repeat center;
}
.main-slider .m4{
    background: url(/img/mainvs04.png) no-repeat center;
}
.main-slider .swiper-slide{
    background-size: cover;
}


.main-slider .swiper-slide-active .text span em.tn1,
.main-slider .swiper-slide-active .text span em.tn2,.main-slider .swiper-slide-active .text span em.tn3{
    -webkit-animation-name: main-text-animation;
    animation-name: main-text-animation;
    display: block;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: 1;
}
.main-slider .swiper-slide-active .text em.tn1 {
    animation-delay: 0s;
}
.main-slider .swiper-slide-active .text em.tn2 {
    animation-delay: 0.4s;
}
.main-slider .swiper-slide-active .text em.tn3 {
    animation-delay: 0.8s;
}
.main-slider .text{
    padding-top: 128px;
    letter-spacing: -1.2px;
    padding-bottom: 100px;
}
.main-slider .text .t0{
    color: var(--point-color);
    font-weight: bold;
    letter-spacing: 0px;
    text-align: center;
    margin-bottom: 10px;
}
.main-slider .text .t1 {
    color: #fff;
    font-size: 31px;
    /* margin: 0 auto; */
    margin-bottom: 13px;
    text-align: center;
    /* opacity: 0.6; */
    font-weight: 700;
    /* font-size: 14px; */
    letter-spacing: 0.2px;
    /* text-transform: uppercase; */
    line-height: 1.2;
    /* width: 300px; */
    /* margin: 0 auto; */
}
.main-slider .text a{
    background: #00a8ff9c;
    color: #fff;
    position: relative;
    border-radius: 6px;
    display: block;
    width: 200px;
    padding: 13px;
    font-weight: 500;
    margin: 0 auto;
    margin-top: 40px;
    /* background: #00a8ff; */ transition:0.3s;
}
.main-slider .text a:hover{background: #00a8ff;}
.main-slider .text a i{}

.main-slider .text a i{width: 12px;display: block;position: absolute;top: 23px;right: 20px;position: absolute;}
.main-slider .text a i:after,.main-slider .text a i:before{display:block; clear:both; content:"";}
.main-slider .text a i:after{
    width: 10px;
    height: 2px;
    background: #fff;
    width: 100%;
}
.main-slider .text a i:before{
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: -3px;
    right: 0;
}

.main-slider .text .t1.tt{font-size: 25px;}
.main-slider .text .t1 .c1{
    color: var(--main-color);
}
.main-slider .text .t1 .c2{
    color: var(--point-color);
}
.main-slider .text .t2{
    color:#fff;
    text-align: center;
    font-size: 16px;
    opacity: 0.6;
}
.main-slider .text .t2 em{
    font-weight: 400;
    }
.main-slider .text .t1 span,.main-slider .text .t2 span {
    overflow: hidden;
    display: block;
    font-weight:inherit;
}



.swiper-page-area{
    /* position: absolute; */
    /* top: 210px; */
    /* left: 0; */
    /* width: 100%; */
    /* display: flex; */
    /* justify-content: center; */
    /* z-index: 99; */
}
.swiper-page-area .swiperBtn{
    background: #ffffff14;
    border-radius: 10px;
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: static;
    width: 50px;
    height: 50px;
    margin: 0 5px;
    color: #fff;
    display: none;
}
.swiper-page-area .swiper-button-prev:after, .swiper-page-area .swiper-button-next:after{
    font-size: 20px;
}
.main-slider .text .tn1,
.main-slider .text .tn2,
.main-slider .text .tn3,
.main-slider .text .tn4 {
    animation-fill-mode: backwards;
}


 /* 커스텀 페이지네이션 - 모바일 기본 */
        .custom-pagination {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .pagination-item {
            position: relative;
            cursor: pointer;
            padding: 8px 0;
        }

        .pagination-text {
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            font-weight: 500;
            transition: color 0.3s;
            white-space: nowrap;
        }

        .pagination-item.active .pagination-text {
            color: white;
        }

        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            background: rgba(255, 255, 255, 0.2);
            width: 100%;
            border-radius: 1px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #fff;
            width: 0%;
            transition: width 0.1s ease;
            border-radius: 1px;
        }

.quick-box{
    margin-bottom: 10px;
}
.quick-box ul{
    display: flex;
    gap: 10px;
}
.quick-box ul li{
    width: 33.333333333%;
    color: #fff;
    font-weight: 600;
}
.quick-box ul li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    border-radius: 10px;
}
.quick-box ul li:nth-child(1) a{
    background: var(--main-color);
}
.quick-box ul li:nth-child(2) a{
    background: var(--point-color);
}
.quick-box ul li:nth-child(3) a{
    background: #515151;
}
.quick-box ul li a .ic{
    height: 50px;
}
.quick-box ul li a .ic img{}
.quick-box ul li a .txt{}

.popup-box{}
.popup-box .popup-slider{}
.swiper-pagination1{text-align:center;}


@media all and (min-width:768px) {

#intro .pdinner{
    height: 100%;
}
    .main-slider .text{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 136px;
}

.popup-box{}
.popup-box .popup-slider{}
.main-slider .text .t1{
    font-size: 41px !important;
    margin-bottom: 0px;
}
    .main-slider .text .t1 i{display:inline-flex;}

}

@media all and (min-width:1280px) {
.main-slider .text .t0{
    font-size: 20px;
    text-align: left;
    margin-bottom: 25px;
}
.main-slider .text .t1{font-size: 66px !important;text-transform: uppercase;text-align: left;letter-spacing: -2px;line-height: 1;margin-bottom: 14px;}
.main-slider .text .t2{font-size:56px;text-align: left;}
    .main-slider .text{
    padding-top: 300px;
    padding: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 100px;
}


    .main-slider .text a{
    width: 252px;
    height: 60px;
    line-height: 60px;
    padding: 0px;
    padding-left: 20px;
    font-size: 16px;
    margin: 0px;
    margin-top: 30px;
    margin-top: 70px;
}
    .main-slider .text a i{
    top: 30px;
    right: 22px;
}
    .pagination-text{
    font-size: 18px;
}
    .progress-bar{
    height: 2px;
}
    .custom-pagination{
    gap: 0px;
    width: 100%;
    max-width: 1500px;
    bottom: 90px;
}
    .pagination-item{
    width: 25%;
}
    #intro .swiper-button{display:block;}
}

@media all and (max-width:1280px) {
.fp-section,.fp-tableCell{height: unset !important;}
}

/*@media all and (max-height:900px) {
.fp-section,.fp-tableCell{

    height: unset !important;

}
}*/



#intro{
    position: relative;
    padding-top: 220px;
    padding-bottom: 290px;
}
#intro .swiper-button{display:none;}
#intro .contBox{
    position: relative;
    z-index: 1;
}
#intro .contBox .cont01{}
.swiper-pagination-bullet{
    background: #ffffff60;
    width: 10px !important;
    width: 10px !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: var(--main-color); width:30px !important;
}
@media (min-width: 768px) {
#intro .contBox .cont01{}
   
}

@media (min-width: 1280px) {

   
    #intro{
    padding-top: 174px;
}
    #intro .pdinner{height:100%}
    #intro .contBox{}
    #intro .contBox .pdinner{
    display: flex;
    flex-direction: row-reverse;
}
    #intro .contBox .cont01{
    
}
    #intro .swiper-button{display:block;position: absolute;right: 0px;top: 50%;right: 50%;width: 150px;height: 70px;margin-top: -186px;margin-right: -751px;}

    #intro .swiper-button .next, #intro .swiper-button .prev{
    color: #fff;
    background: #ffffff3b;
    opacity: 1;
    backdrop-filter: blur(30px);}
}



@media (min-width: 1550px) {


}





/*company*/

#company{
    background: url(/img/bg01.png) no-repeat center;
    padding: 50px 0;
    background-size: cover;
}
#company .main-tlt {color: #fff;}
#company .main-txt {color: #ffffff;opacity: 0.9;}
#company .com-list{
    display: flex;
    flex-direction: row;
    gap: 20px;
    flex-wrap: wrap;
}
#company .com-list li{
    /* margin-bottom: 20px; */
    width: calc(50% - 10px);
}
#company .com-list li a{
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(30px);
    background: #ffffff47;
    color: #fff;
    display: block;
    border-radius: 10px;
    height: 128px;
    padding: 20px;
}
#company .com-list li a:hover{background: transparent linear-gradient(180deg, #1509B5 0%, #00A8FF 100%) 0% 0% no-repeat padding-box;color:#fff;}
#company .com-list li a .top{
    display: block;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0px;
    text-transform: uppercase;
    letter-spacing: 0px;
}
#company .com-list li a b{
    font-size: 20px;
}
#company .com-list li .icon{
    position: absolute;
    bottom: 20px;
    right: 20px;
}
#company .com-list li .icon img{
    height: 30px;
}

@media (min-width: 768px) {
  #company .main-tlt {
}
#company .main-txt {
}
#company .com-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
#company .com-list li{
    width: calc(50% - 10px);
}
#company .com-list li a{}
#company .com-list li a .top{}
#company .com-list li a b{}
#company .com-list li .icon{}
#company .com-list li .icon img{}
}

@media (min-width: 1280px) {
    #company{
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* height: 100%; */
    /* align-content: center; */
    padding: 0px;
}
    #company .pdinner{height:100%;display: flex;flex-direction: column;justify-content: center;}
  #company .main-tlt {
}
#company .main-txt {
}
#company .com-list{
    gap: 55px;
    margin-top: 35px;
}
#company .com-list li{
    width: calc(25% - 41.25px);
}
#company .com-list li a{
    padding: 40px;
    height: 276px;
    border-radius: 20px; transition:0.3s;
}
#company .com-list li a:hover{border-radius: 20px 120px;background: transparent linear-gradient(180deg, #1509B5 0%, #00A8FF 100%) 0% 0% no-repeat padding-box;color:#fff;}
#company .com-list li a .top{
    font-size: 15px;
}
#company .com-list li a b{
    font-size: 28px;
}
#company .com-list li .icon{
    bottom: 40px;
    right: 40px;
}
#company .com-list li .icon img{
    height: unset;
}
}





/*product*/


#product{
    padding: 50px 0 30px;
    position: relative;
    overflow: hidden;
    background: url(/img/bg02.png) no-repeat center;
}
#product .pdinner{
    padding: 0px;
}

#product .main-tlt{
    margin-left: 20px;
}
#product .main-txt{
    margin-left: 20px;
    margin-bottom: 10px;
}
#product .product-slider{}
#product .product-slider .box{
    box-shadow: 10px 10px 19px #00000014;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
    padding: 30px;
    height: 250px;
    margin-bottom: 42px;
    margin-top: 30px;
    transition: 0.3s;
    }
#product .product-slider .box:hover{background: transparent linear-gradient(180deg, #1509B5 0%, #00A8FF 100%) 0% 0% no-repeat padding-box;color:#fff;}
#product .product-slider .box:hover .slide-header{color:#fff;}
#product .product-slider .slide-header{
    transition: 0.3s;
    font-weight: bold;
    font-size: 12px;
    color: var(--point-color);
    letter-spacing: 0px;
}
#product .product-slider .slide-title{
    font-size: 22px;
    font-weight: 600;
}
#product .product-slider .slide-image{
    position: absolute;
    bottom: -28px;
    right: 20px;
    width: 100px;
}
#product .swiper-button{
    top: 24px;
    right: 10px;
}
#product .swiper-button .swiper-button-prev2{
}
#product .swiper-button .swiper-button-next2{}
#product .swiper-button .swiper-button-prev2, #product .swiper-button .swiper-button-next2{
    background: #fff;
}


@media (min-width: 768px) {
#product{}
#product .main-tlt{
    margin-left: 50px;
}
#product .main-txt{
    margin-left: 50px;
}
#product .product-slider{
    /* margin: 0 30px; */
    /* padding: 0 10px; */
    /* margin: 0 20px; */
    padding: 0 30px;
}
#product .product-slider .slide-header{}
#product .product-slider .slide-title{}
#product .product-slider .slide-image{}
#product .swiper-button{
    right: 50px;
    top: 75px;
}
#product .swiper-button .swiper-button-prev2{}
#product .swiper-button .swiper-button-next2{}

}


@media (min-width: 1280px) {
#product{
    padding: 0px;
}
    #product .pdinner{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#product .main-tlt{
    margin-left: 0px;
}
#product .main-txt{
    margin-left: 0px;
    margin-bottom: 153px;
}
#product .product-slider{
    padding: 0px;
    position: absolute;
    width: calc(100% - 300px);
    right: -120px;
}
#product .product-slider .slide-header{
    font-size: 15px;
    margin-bottom: 10px;
}
#product .product-slider .slide-title{
    font-size: 30px;
}
#product .product-slider .slide-image{
    width: unset;
    bottom: -35px;
    right: 45px;
}
#product .swiper-button{
    width: 150px;
    right: unset;
    left: 50%;
    top: 50%;
    margin-left: -771px;
    margin-top: 94px;
}
#product .swiper-button .swiper-button-prev2{}
    #product .swiper-button .swiper-button-prev2, #product .swiper-button .swiper-button-next2{}
#product .swiper-button .swiper-button-next2{}
#product .product-slider .box{
    padding: 40px;
    border-radius: 20px;
    height: 390px;
    margin-right: 25px;
    margin-left: 25px;
}
    #product .product-slider .box:hover{border-radius: 20px 120px;background: transparent linear-gradient(180deg, #1509B5 0%, #00A8FF 100%) 0% 0% no-repeat padding-box;color:#fff;}

}





/*infra*/

#infra{
    padding-top: 50px;
    background: url(/img/bg04.png);
    background-position: center;
    background-size: cover;
    position: relative;
}
#infra .swiper-button{
    top: 177px;
    left: 50%;
    margin-left: -55px;
}
#infra .swiper-button .prev,#infra  .swiper-button .next{
        color: #fff;
        /* width: 70px; */
        /* height: 70px; */
        background: none;
        opacity: 1;
        backdrop-filter: blur(30px);
        border-radius: 50%;
        border: 1px solid #ffffff57;
        }
#infra .main-tlt{
    
text-align: center;
    
color: #fff;
}
#infra .main-txt{
    
text-align: center;
    
color: #fff;
    
opacity: 0.8;
}
#infra .infra-slider{
    color: #fff;
    border-top: 1px solid #ffffff42;
}
#infra .swiper-slide a{
    border-bottom: 1px solid #ffffff42;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 50px 10px;
    border-right: 1px solid #ffffff42; transition:0.3s;
    }
#infra .swiper-slide a:hover{background:#ffffff17;}
#infra .swiper-slide a .top{
    font-weight: bold;
    font-size: 12px;
    color: var(--point-color);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0px;
}
#infra .swiper-slide a b{
    display: block;
    font-size: 28px;
    margin-bottom: 20px;
}
#infra .swiper-slide a .arr-btn{
    background: #ffffff36;
    border-radius: 7px;
    /* opacity: 0.6; */
    backdrop-filter: blur(30px);
    width: 40px;
    height: 40px;
    backdrop-filter: blur(43px);
}
#infra .swiper-slide a .arr-btn .arr{width: 12px;display: block;position: absolute;top: 19px;right: 15px;}
#infra .swiper-slide a .arr-btn .arr:after,#infra .swiper-slide a .arr-btn .arr:before{display:block; clear:both; content:"";}
#infra .swiper-slide a .arr-btn .arr:after{
    width: 10px;
    height: 2px;
    background: #fff;
    width: 100%;
}
#infra .swiper-slide a .arr-btn .arr:before{
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: -3px;
    right: 0;
}

@media (min-width: 768px) {

#infra{}
#infra .main-tlt{
    
}
#infra .main-txt{
    margin-bottom: 70px;
}
#infra .infra-slider{}
#infra .swiper-slide a{}
#infra .swiper-slide a .top{}
#infra .swiper-slide a b{}
#infra .swiper-slide a .arr-btn{}
#infra .swiper-slide a .arr-btn .arr{
}
    #infra .swiper-button{
    width: calc(100% - 100px);
    left: 50px;
    margin-left: 0px;
    top: 103px;
}

}
@media (min-width: 1280px) {


#infra{
    /* display: flex; */
    align-items: flex-end;
    padding: 0px;
}
    #infra .in{/* display: flex; *//* height: 100%; *//* flex-direction: column; *//* align-items: center; *//* justify-content: center; */padding-top: 163px;}
    #infra .pdinner{}
    #infra .fp-tableCell{}
#infra .main-tlt{
    
}
#infra .main-txt{
    
}
#infra .infra-slider{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0px;
}
#infra .swiper-slide a{
    border-bottom: 0px;
    height: 460px;
}
#infra .swiper-slide a .top{
    font-size: 15px;
}
#infra .swiper-slide a b{
    font-size: 40px;
    margin-bottom: 44px;
}
#infra .swiper-slide a .arr-btn{
    width: 66px;
    height: 60px; transition:0.3s;
}
    #infra .swiper-slide a:hover .arr-btn{
    transform: translate(0px, -10px);}
#infra .swiper-slide a .arr-btn .arr{width: 15px;top: 29px;right: 27px;}
#infra .swiper-slide a .arr-btn .arr:before{
    width: 8px;
    height: 8px;
    top: -4px;
}
    #infra .swiper-button .prev, #infra .swiper-button .next{}
    #infra .swiper-button .prev{
    left: 0px;
}
    #infra .swiper-button .next{
    right: 0px;
}
    #infra .swiper-button{
    width: calc(100% - 180px);
    left: 90px;
    top: 243px;
}
}





/*news*/


#news{
    /* padding: 50px 0; */
    padding-top: 50px;
    overflow: hidden;
}

.banner-swiper{
}
.banner-swiper .swiper-slide{
    text-align: center;
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-swiper .swiper-slide img{
    /* width:auto; */
    /* height: 22px; */
    max-height: 33px;
    width: auto;
    }




@media (min-width: 768px) {

    #news{
    overflow: hidden;
}
   
    .banner-swiper{
    margin-left: 181px !important;
}
    .banner-swiper .swiper-slide{}
    .banner-swiper .swiper-slide img{}
    #news .swiper-page-area{
    display: block;
    top: -4px;
    display: flex;
    /* left: 50%; */
    /* margin-left: -542px; */
    width: 200px;
    left: -41px;
}
    #news .swiper-page-area .swiperBtn2{}
    #news .swiper-page-area .swiper-button-prev4{}
    #news .swiper-page-area .swiper-button-next4{}
#news .box:after{
    height: 29vw;
    right: 0;
    /* width: 91%; */
}
    #news .banner h6{
    /* left: -73px; */
    position: absolute;
    top: 6px;
}


#news .img02{display:none;}
#news .img01{display:block;position: absolute;bottom: -21px;right: -39px;}
#news .img01 img{
    width: 200px;
}
}





@media (min-width: 1280px) {

    #news{
}
    .banner-swiper{
    margin-left: 256px !important;
}
    .banner-swiper .swiper-slide{}
    .banner-swiper .swiper-slide img{
    max-height: 40px;
}
    #news .swiper-page-area{
    transform: scale(1) !important;
    top: 19px !important;
    left: 161px !important;
}
    #news .swiper-page-area .swiperBtn{}
    #news .swiper-page-area .swiper-button-prev4{}
    #news .swiper-page-area .swiper-button-next4{}
    #news .img01{
    bottom: -45px;
}
    #news .banner h6{
    font-size: 28px !important;
    /* left: calc(50% - 800px); */
    /* top: 24px; */
    position: static;
}
    #news .banner{
    height: 160px;
    padding: 0px;
    padding-top: 66px;
    width: 100%;
    background: #fff;
    position: absolute;
    bottom: 0;
    padding: 60px 0 !important;
}
    #news .banner .pdinner{
    display: flex;
}
}


#news {
  background: url(/img/bg03.png);
  padding: 50px 0px;
  background-position: center;
  background-size: cover;
  padding-bottom: 0px;
  position: relative;
}
#news .banner{
    background: #fff;
    padding: 20px 0;
    border-top: 1px solid #dededede;
}
#news .banner h6{
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}
#news .flex {
  display: flex;
  flex-direction: column;
  /* gap: 40px; */
  /* max-width: 1280px; */
  /* margin: 0 auto; */
}
#news .banner .swiper-page-area{
    width: 73px;
    position: absolute;
    top: 12px;
    left: 114px;
    transform: scale(0.8);
}
#news .banner .swiper-button-prev,#news .banner .swiper-button-next{
    width: 34px;
    height: 34px;
    border: 1px solid #dedede;
    border-radius: 50%;
}
#news .banner .swiper-button-prev:after, #news .banner .swiper-button-next:after{
    font-size: 14px;
    font-weight: bold;
}

#news .banner .swiper-button-prev{
    left: 0px;
}
#news .banner .swiper-button-next{
    right: 0px;
}

#news .news-box1 {
  width: 100%;
}

#news .main-tlt {
  /* font-size: 32px; */
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
  line-height: 1.2;
}

#news .main-txt {
  /* font-size: 15px; */
  color: #555;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 0px;
}

#news .notice-box {
  position: relative;
  margin-top: 30px;
  width: 100%;
}

#news .notice-box > a {
  position: absolute;
  top: -78px;
  right: 0;
  font-size: 14px;
  color: #4A4A4A;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  padding-right: 20px;
}

#news .notice-box .arr {
}
#news .notice-box .arr{width: 12px;display: block;position: absolute;top: 9px;right: 0px;}
#news .notice-box .arr:after,#news .notice-box .arr:before{display:block; clear:both; content:"";}
#news .notice-box .arr:after{
    width: 10px;
    height: 2px;
    background: #4A4A4A;
    width: 100%;
}
#news .notice-box .arr:before{
    width: 6px;
    height: 6px;
    border-top: 2px solid #4A4A4A;
    border-right: 2px solid #4A4A4A;
    transform: rotate(45deg);
    position: absolute;
    top: -3px;
    right: 0;
}

#news .notice-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
#news .notice-list .none{padding:20px;}

#news .notice-list li {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

#news .notice-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
}

#news .notice-list a {
  display: block;
  text-decoration: none;
  color: #111;
  padding: 25px 20px;
}

#news .notice-list strong {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#news .notice-list em {
  display: block;
  font-size: 14px;
  color: #777;
  line-height: 1.5;
  margin-bottom: 15px;
  font-style: normal;
  display: none;
}

#news .notice-list .date {
  font-size: 14px;
  font-weight: bold;
  color: var(--point-color);
  display: none;
}

#news .new-box2 {
  width: 100%;
  margin-bottom: 50px;
}

#news .quick-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#news .quick-list li {
  border-radius: 10px;
  /* padding: 24px 20px; */
  color: #fff;
  font-weight: 600;
  position: relative; transition:0.3s;
}

#news .quick-list li:first-child {
  background: #00aeff;
}

#news .quick-list li:last-child {
  background: #090087;
}

#news .quick-list a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 24px 20px;
  display: block;
  height: 100%;
}

#news .quick-list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.07);
}

#news .quick-list i.top {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-style: normal;
  /* opacity: 0.7; */
  font-size: 15px;
  letter-spacing: 0px;
}

#news .quick-list strong {
  font-size: 18px;
}

#news .quick-list .ic {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 28px;
  height: 28px;
}

#news .quick-list .ic img {
  width: 100%;
  height: auto;
}



@media (min-width: 768px) {
  #news .notice-list {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 35px;
    display: flex;
    width: 100%;
  }

  #news .notice-list li {
    flex: 1 1 calc(31.333% - 13.33px);
    width: calc(33.33333% - 25px);
  }
    #news .notice-list em{
    display: block;
    overflow-wrap: break-word;
}
    #news .quick-list{
    display: flex;
    flex-direction: row;
}
    #news .quick-list li{
    width: 100%;
    height: 119px;
}
    #news .quick-list a{}
}

@media (min-width: 1280px) {
  #news .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-bottom: 167px;
  }

  #news .news-box1 {
    width: calc(100% - 410px);
  }

  #news .new-box2 {
    width: 410px;
    padding-left: 55px;
    margin-top: 24px;
  }
    #news .quick-list{
    display: flex;
    flex-direction: column;
    gap: 35px;
}
    #news .notice-list strong{
    font-size: 26px;
}
    #news .notice-list em{
    font-size: 16px;
    margin-bottom: 100px;
}
    #news .notice-list .date{font-size:15px;}
    #news .notice-list a{
    padding: 45px 37px;
    height: 323px;
}
#news .notice-list li{
    border-radius: 20px;
    flex: 1 1 calc(33.333% - 24.33px);
    /* width: 33.33333%; */
}
       #news .quick-list li{border-radius: 20px;height: 191px;}
    #news .quick-list strong{
    font-size: 28px;
}
    #news .quick-list a{
    padding: 35px;
}
    #news .quick-list .ic{
    width: unset;
    bottom: 40px;
    right: 40px;
    height: unset;
}
    #news .main-txt{
    display: inline-block;
    margin-left: 12px;
}
    #news .notice-box > a{
    font-size: 16px;
    top: -62px;
    padding-right: 32px;
}
    #news .notice-box .arr{
    width: 15px;
    top: 10px;
}#news .notice-box .arr:before{
    width: 8px;
    height: 8px;
    top: -4px;
}
}


.fp-auto-height{height:unset !important;}
.fp-auto-height .fp-tableCell{height:unset !important;}




.scroll-down{display: none;}



@media (min-width: 1500px) {


.scroll-down{
    display: block;
    color: #fff;
    position: absolute;
    bottom: -338px;
    left: -2px;
}
.scroll-down .text{
    font-size: 15px;
    letter-spacing: 1px;
    opacity: 0.4;
    transform: rotate(91deg);
    position: absolute;
    width: 100px;
    /* background: red; */
    bottom: 62px;
    left: -43px;
}
.scroll-down span{
    width: 12px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid #fff;
    display: block;
    position: relative; overflow:hidden;
}
.scroll-down span i{
    width: 4px;
    height: 4px;
    position: absolute;
    background: #fff;
    border-radius: 50%;
    left: 2px;
    top: 3px; animation: scrollDown 2s infinite ;
}

    @keyframes scrollDown {
  0% { top: 3px; opacity: 1; }
  50% { top: 15px; opacity: 0; }
  100% { top: 17px; opacity: 0; }
}
.fp-viewing-sec02 .scroll-down span,.fp-viewing-sec04 .scroll-down span{border-color:#4A4A4A;}
.fp-viewing-sec02 .scroll-down span i,.fp-viewing-sec04 .scroll-down span i{background:#4A4A4A;}
    .fp-viewing-sec02 .scroll-down,    .fp-viewing-sec04 .scroll-down {color:#4A4A4A;}
}