@charset "utf-8";
/* CSS Document */
html{ font-size:14px; }
body{font-family: Source Han Sans CN, Microsoft JhengHei, PingFang SC, Source Han Serif SC, Microsoft YaHei, sans-serif;
 margin:0;
 padding:0;
 background-color:#fff;
 overflow-x:hidden;
}
div,img,h3,h4,p,dd,dl,em{margin: 0; padding: 0; border: 0;}
h1{letter-spacing:0px;margin:0;padding:0}
h2{font:bold 1.7em Arial, Sans-Serif;letter-spacing:0px;font-size:16px;color:#000;background:inherit;margin:0 0 5px;padding:0}
p{margin:0 auto}
ul,li{list-style:none;margin:0;padding:0}
form{margin:0}
a{text-decoration:none;}
a:hover{text-decoration:none; color:#c01701;transition:all 0.2s linear 0s;}
.clear{font-size:0; line-height:0;clear: both;overflow: hidden; zoom: 1;}
.fr{float:right;}
.fl{float:left;}

/*banner*/
.lunbo {margin-top:-4vw;
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;}       
.lunbor {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.2s ease-in-out;
            background-size: cover;
            background-position: center;}       
.lunbor.active {
            opacity: 1;}
        
/* 覆盖层增强文字可读性 */
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.0) 100%);}       
        .fugai {
            position: absolute;
            top: 36%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            width: 1300px;           
            z-index: 10;}       
        .fugai h1 {margin-left: -7vw;transition: all 2s;opacity: 0; color:#fff;width:1280px;
            font-size: 2.5vw;font-weight:bold;
            margin-bottom: 10px;           
            animation: fadeInDown 1s ease;}
.active .fugai h1 {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
    margin-left: 0px;}        
.fugai p {color:#fff;margin-left: -4vw;opacity: 0;transition: all 2s;
            font-size: 1.1vw;
            margin-bottom: 30px;
            animation: fadeInUp 1s ease 1s both;}
.active .fugai p{
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition-delay: 0.5s;
    margin-left: 0px;}   
        
        .bana {
            display: inline-block;
            padding: 7px 35px;
            border: #fff 1px solid;
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            animation: fadeIn 1s ease 0.6s both;
        }
        
        .bana:hover {
            background: #2196f3;border: #2196f3 1px solid;color:#fff;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
        }
        
        /* 导航控制 */
        .kongzhi {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            z-index: 100;
        }
        
        .bandian {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            margin: 0 8px;
            cursor: pointer;
            transition: all 0.6s ease;
        }
        
        .bandian.active {
            background: #fff;
            transform: scale(1);
        }
        
        /* 左右箭头
        .prev, .next {display:none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 0px;
            height: 0px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
            transition: all 0.3s ease;
        }
        
        .prev {display: none;
            left: 30px;
        }
        
        .next {display: none;
            right: 30px;
        }
        
        .prev:hover, .next:hover {
            background: rgba(0, 0, 0, 0.6);
        }
        
        .prev::after, .next::after {
            content: '';
            border: solid white;
            border-width: 0 3px 3px 0;
            display: inline-block;
            padding: 10px;
        }
        
        .prev::after {
            transform: rotate(135deg);
            margin-left: 5px;
        }
        
        .next::after {
            transform: rotate(-45deg);
            margin-right: 5px;
        } */
        /* 动画 */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .fugai h1 {
                font-size: 2.5rem;
            }
            
            .fugai p {
                font-size: 1.1rem;
            }
            
            .prev, .next {
                width: 40px;
                height: 40px;
            }
        }

/*智航banner*/
.jch_banner{ width: 100%;clear: both; position: relative;}
.jch_banner img{ width: 100%;position: relative;}
.jch_banner h3{font-size:50px;
    color: #fff;
    position: absolute;
    left: 18.6vw;
    top:290px;
    font-weight:normal;margin:0 auto;
}
.jch_banner p{font-size:30px;
    color: #fff;
    position: absolute;
    left: 18.6vw;
    top: 435px;
    font-weight: normal;
    margin: 0 auto;}
	
/*智航购车*/
.gouche{width: 100%;}
.gouche ul{}
.gouche ul li{float: left;margin: 1% 0%;position: relative;text-align: center;
    width: 23.65%;}
.gouche ul li:nth-child(2){width:50.7%;margin: 1%;position: relative;}	
.gouche ul li img{width: 100%;position: relative;}
.gouche ul li p{margin-left: -50%;width: 100%;position: absolute;top: 6vw;left:50%;font-size:16px;}
.gouche ul li h3{margin-left: -50%;width: 100%;position: absolute;top: 8vw;left:50%;font-size:30px;}
.gouche a{margin-left: -50%;width: 100%;position: absolute;top: 12vw;left:50%;font-size:16px;}
/*智航大video*/
.video{width: 100%;position: relative;}
.about a{color:#fff;margin: 3vw auto;
    display: block;
    border-radius: 30px;
    font-weight: normal;
    font-size: 14px;
    border: 1px solid #b3b3b3;
    width: 10vw;
    text-align: center;
    height: 2vw;
    line-height: 2vw;
}
.about{width: 1280px;
    margin: 0;
    margin-left: -640px;
    position: absolute;
    left: 50%;
    top: 10vw;
    text-align: left;}
.about h3{font-size: 40px;
    font-weight: 600;
    color: #fff;
	    text-align: center;padding-bottom: 15px;}
.about p{font-size:20px;
    font-weight:normal;
    color: #fff;    text-align: center;}

.pro{width:100%;margin: 1vw 0% 1vw 0%;position: relative;background:url(../images/index/pro_ban1.jpg) no-repeat;height: 83vw;background-size: cover;text-align: center;}
/*.pro img{width:26vw;position: relative;}*/
.prol{width:1280px;text-align: center;padding: 7vw 0 0vw 0;margin: 0 auto;}
.prol h3{font-size: 40px;
    color: #000;}
.prol p{padding: 1vw 0 2vw 0;
    font-size: 20px;
    color: #666;}
.prol a{
    padding: 0.4vw 3vw;
    text-align: center;
    font-size: 14px;
    color: #666;
    border: 1px solid #999;
    border-radius: 30px;}

.pro-container {margin: 0 0% 0 14%;            
            width: 86%;            
            border-radius: 16px;            
            overflow: hidden;}
        
        /* 上部显示区域 */
        .display-area {margin:0vw auto 4vw auto;width: 1280px;
            height:22vw;
            position: relative;
            overflow: hidden;
        }
        
        .display-img {margin: 0 auto;
            width: 45%;
            height: auto;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .pro-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 1280px;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 0px;        
            color: white;}
        
        .pro-content.active {
            opacity: 1;}        
        
        
        /* 下部选项卡区域 */
        .pro-options {
            display: block;
            background-color: #f8f9fa;
            border-top: 1px solid #eaeaea;
        }
        
        .pro-option {
            flex: 1;
            padding:4vw;
            cursor: pointer;
            transition: all 0.3s ease;
            display: block;    float: left;
    width: 33%;
            border-bottom: 3px solid transparent;
        }
        
        .pro-option:hover {
            background-color: #f0f2f5;
        }
        
        .pro-option.active {
            /*background-color: white;
            border-bottom: 3px solid #eeee;*/
        }
        
        .pro-option-thumb {
            width: 5vw;
            height: auto;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 1.5vw;
            flex-shrink: 0;}
        
        .pro-option-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .pro-option:hover .pro-option-thumb img {
            transform: scale(1.1);
        }
        
        .pro-option-text {text-align: left;
            flex: 1;}
        
        .pro-option-text h3 {
            font-size: 1.1vw;
            margin-bottom:0.6vw;
            color: #333;
        }
        
        .pro-option-text p {padding-bottom:1vw;
            font-size: 0.85vw;
    color: #666;
    line-height: 1.5vw;}
    
    .pro-option-text a {
            font-size: 0.8vw;
    color: #666;
    line-height: 1.5vw;}
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .display-area {
                height: 300px;
            }
            
            .pro-options {
                flex-direction: column;
            }
            
            .pro-option {
        padding: 7vw 0vw;
        margin-bottom: 0vw;
        width: 90%;
        margin: 0 5%;
    }               
        }
        
        @media (max-width: 480px) {
            .display-area {
                height: 250px;
            }
            
            .pro-content {
                padding: 20px;
            }
            
            .pro-option-thumb {
                width: 60px;
                height: 50px;
            }
            
            .pro-option-text h3 {
                font-size: 16px;
            }
            
            .pro-option-text p {
                font-size: 13px;
            }
        }

.pro ul{width: 86%;margin: 4vw 0 0 14%;}
.pro ul li{background: #ffffffb5;
    overflow: hidden;
    float: left;
    margin-right: 1vw;
    width: 38%;
    border-radius: 20px;
    padding: 3%;}
.pro ul li h4{float: left;
    font-size: 1.2vw;
    text-align: left;
    width: 45%;}
.pro ul li h4 dd{font-size: 16px;padding-top: 1vw;
    color: #666;line-height: 26px;
    font-weight: normal;}
.pro ul li img{float: right;
    width: 8vw;}

/*智航品牌聚焦*/
.jch_pinpai{width: 100%;margin-top: 60px;margin-bottom: 60px;}
.pinpai{width:1280px; margin: 0 auto;margin-bottom: 45px;}
.pinpai h3{font-size: 40px;
    font-weight: 600;
    color: #000;
	    text-align: center;padding-bottom: 15px;}
.pinpai p{font-size:16px;
    font-weight:normal;
    color: #666;    text-align: center;}
	
.jujiao{width:98%;margin: 0 auto;overflow: hidden;}
.jujiao ul{}
.jujiao ul li{float: left;width:32.65%;margin-right: 1%;position: relative;text-align: center;}
.jujiao ul li:nth-child(3){margin-right: 0%;}
.jujiao ul li img{width: 100%;position: relative;}
.jujiao ul li p{position: absolute;
    bottom:30vw;
    font-size: 16px;
    color: #fff;left: 50%;border-bottom: 0px solid #fff;margin-left: -50%;
    width: 100%;
    padding-bottom: 5px;}
.jujiao ul li h3{position: absolute;
    bottom: 7vw;
    font-size: 26px;
    color: #fff;
    width: 88%;
    font-weight: bold;
    margin: 0 6%;}
.jujiao ul li a{position: absolute;margin-left: -50%;
    width: 100%;
    bottom: 5vw;
    font-size: 16px;
    color: #fff;left: 50%;}
	

.online {
    width: 100%;
    min-width: 1000px;
    clear: both;
    position: relative;
}
.online img {
    width: 100%;
    position: relative;
}
.online h3 {
    font-size: 30px;
    color: #000;
    position: absolute;
    left:66vw;
    top:6.5vw;
    font-weight: normal;
}
.online p {
    font-size: 0.8vw;
    color: #000;
    position: absolute;
    left: 66vw;
    top: 9.8vw;
    font-weight: normal;
	border-bottom: 1px solid #000;
    padding-bottom: 8px;
	width: 275px;
}
.online a {
    font-size: 0.85vw;
    color: #fff;
    position: absolute;
    left: 66vw;
    top: 14.2vw;
    background: #ce2018;
    text-align: center;
    width: 275px;
    height: 45px;
    line-height: 45px;
    font-weight: lighter;
}
.bolang{position: relative;width: 100%;margin:2vw auto 8vw auto;background: url(../images/bolangbg.jpg) no-repeat;padding:0 10%;    background-size: cover;}  
.demo-container {width: 100%;}
.xiayi{margin-top: 9vw;}
.animation-box {            
            border-radius: 30px;
            padding:2vw 0 4.5vw 0;          
            width: 100%;
            min-height: 15vw;            
            flex-direction: column;
            overflow: hidden;
            position: relative;
            border: 0px solid rgba(255, 255, 255, 0.2);}       
.animation-box h3{font-size: 2.5vw;
    padding: 2vw 0% 1vw 0%;
    text-align: left;
    color: #000;
    padding-right: 0vw;
    padding-left: 0%;}
.animation-box h3 img{width: 1.6vw;
    margin-right: 1vw;}
.animation-box h3 span{float: right;font-family: 微软雅黑;
    font-size: 3vw;text-align: right;
    line-height: 4vw;}
.animation-box a{display: inline-block;float: right;box-shadow: 3px 0px 15px 0px #efefef;
    margin-right: 0vw;
    padding:0 0vw 0 2vw;
    margin-top: 2vw;
    background: #00b0bc3b;
    font-size: 0.8vw;
    color: #666;
    overflow: hidden;
    width: 25vw;
    line-height: 3vw;
    border-radius: 35px;}
.animation-box a img {height: 3vw;
    position: relative;
    top: 0vw;
    margin-right: 0vw;
    border-radius: 30px;
    width: 3vw;
    float: right;
    background: #00b0bc3b;}
.haoz{overflow: hidden;}
.diphone{text-align: right;color: #666;padding:0vw 0vw 0vw 0;}
.hao img{width:1.3vw;float: left;margin-right:1vw;
    position: relative;
    top: 0.45vw;}
.hao{margin-right: 0vw;
    font-size: 1.5vw;
    padding:0.1vw 0vw 0.4VW 3vw;
    color: #666;
    width: 14vw;
    border-radius: 100px;
    float: right;
    text-align: center;
    font-weight: bold;}
.youxiang img{width:1.3vw;float: left;margin-right:1vw;
    position: relative;
    top: 0.6vw;}
.youxiang{margin-right: 2vw;
    font-size: 1.5vw;
    padding:0.1vw 0vw 0.4VW 1vw;
    color: #fff;
    width: 23vw;
    border-radius: 100px;
    float: right;
    text-align: center;
    font-weight: bold;}
.path-container {top: -15vw;
            width: 100%;
            height:1.3vw;
            position: relative;
            flex-grow: 1;}
/* SVG路径样式 */
#motionPath {
            stroke: #00b0bc3b;
            stroke-width: 30;
            fill: none;
            stroke-dasharray: 0, 0;}
                
/* 移动的圆点 */
.moving-dot {
            width: 24px;
            height: 24px;
            background: #fff;
            border-radius: 50%;
            position: absolute;
            top: 9vw;
            left: 0;           
            animation: moveAlongPath 5s linear infinite;
            offset-path: path("M 0,300 C 100,50 200,50 250,150 S 400,250 450,150 S 600,50 1050,750");
            z-index: 10;}
        
        
        /* 动画定义 */
        @keyframes moveAlongPath {
            0% {
                offset-distance: 0%;
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                offset-distance: 100%;
                transform: scale(1);
            }
        }
@media (max-width: 768px) {
.lunbo {
    margin-top: -17vw;
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.fugai {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 10;
}
.fugai h1 {
    margin-left: 0vw;
    transition: all 2s;
    opacity: 0;
    color: #fff;
    width: 100%;
    font-size:5vw;
    font-weight: bold;
    margin-bottom: 10px;
    animation: fadeInDown 1s ease;
}
.fugai p {
        font-size: 1.1rem;
    }
.prol h3 {
    font-size: 5vw;
    color: #000;
}
.prol p {
        padding: 4vw 0 5vw 0;
        font-size: 3vw;
        color: #666;
}
.prol a {
    padding: 0.4vw 3vw;
    text-align: center;
    font-size: 3.2vw;
    color: #666;
    border: 1px solid #999;
    border-radius: 30px;
}
.pro-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}
.display-area {
        margin: 0vw auto 17vw auto;
        width: 100%;
        height:53vw;
        position: relative;
        overflow: hidden;
    }
.pinpai h3 {
    font-size: 4vw;
    font-weight: 600;
    color: #000;
    text-align: center;
    padding-bottom: 15px;
}
.jujiao ul li {
    float: left;
    width: 90%;
    position: relative;
    text-align: center;
    margin: 2vw 5%;
}
.jch_pinpai {
    width: 100%;
    margin-top:11vw;
    margin-bottom: 60px;
}
.jujiao ul li p {
    position: absolute;
    bottom: 73vw;
    font-size: 16px;
    color: #fff;
    left: 50%;
    border-bottom: 0px solid #fff;
    margin-left: -50%;
    width: 100%;
    padding-bottom: 5px;
}
.jujiao ul li h3 {
    position: absolute;
    bottom: 25vw;
    font-size: 4vw;
    color: #fff;
    width: 88%;
    font-weight: bold;
    margin: 0 6%;
}
.jujiao ul li a {
    position: absolute;
    margin-left: -50%;
    width: 100%;
    bottom: 17vw;
    font-size: 16px;
    color: #fff;
    left: 50%;
}
.diphone {
    text-align: right;
    color: #666;
    padding: 2vw 0vw 0vw 0;
    font-size: 3vw;
}
.hao {
    margin-right: 0vw;
    font-size: 3vw;
    padding: 1.1vw 0vw 0.4VW 3vw;
    color: #666;
    width: 23vw;
    border-radius: 100px;
    float: right;
    text-align: center;
    font-weight: bold;
}
.animation-box a {
    display: inline-block;
    float: right;
    box-shadow: 3px 0px 15px 0px #efefef;
    margin-right: 0vw;
    padding: 0 0vw 0 4vw;
    margin-top: 5vw;
    background: #00b0bc3b;
    font-size: 3vw;
    color: #666;
    overflow: hidden;
    width: 42vw;
    line-height: 6vw;
    border-radius: 35px;
}
.animation-box a img {
    height: 5vw;
    position: relative;
    top: 0.5vw;
    margin-right: 2vw;
    border-radius: 30px;
    width: 5vw;
    float: right;
    background: #00b0bc3b;
}
.animation-box h3 {
    font-size: 3.5vw;
    padding: 2vw 0% 1vw 0%;
    text-align: left;
    color: #000;
    padding-right: 0vw;
    padding-left: 0%;
}
.pro {
    width: 100%;
    margin: 1vw 0% 4vw 0%;
    position: relative;
    background: url(../images/index/pro_ban1.jpg) no-repeat;
    height: auto;
    background-size: cover;
    text-align: center;
    overflow: hidden;
}
.pro-container {
    margin: 0 0% 16vw 5%;
    width: 90%;
    border-radius: 16px;
    overflow: hidden;
}
.pro-option-text p {
        font-size: 3vw;
        line-height: 5vw;
    }
.bana {
    display: inline-block;
    padding: 1vw 7vw;
    border: #fff 1px solid;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    animation: fadeIn 1s ease 0.6s both;
}
.pro-option.active {
    background-color: white;
    border-bottom: 3px solid #eeee;
    width: 90%;
    padding: 5vw 5%;
    margin: 5vw auto;
    border-radius: 2vw;
}
.pro-option-text h3 {
        font-size: 4vw;
    }
.pro-option:hover {
    background-color: #f0f2f5;
    border-radius: 2vw;
}
.display-img {
    margin: -8vw auto;
    width:90%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.about a {
    color: #fff;
    margin: 3vw auto;
    display: block;
    border-radius: 30px;
    font-weight: normal;
    font-size: 14px;
    border: 1px solid #b3b3b3;
    width: 30vw;
    text-align: center;
    height: 7vw;
    line-height: 7vw;
}
.about h3 {
    font-size: 4vw;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding-bottom: 15px;
}
.about p {
    font-size: 3vw;
    font-weight: normal;
    color: #fff;
    text-align: center;
}
.about {
    width: 95%;
    margin: 0;
    margin-left: 0;
    position: absolute;
    left: 5%;
    top: 10vw;
    text-align: left;
}
.prol {
    width: 100%;
    text-align: center;
    padding: 7vw 0 0vw 0;
    margin: 0 auto;
}
.pinpai {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 45px;
}
}