body{margin:0;padding:0;background:#fff;color:#666}
body{font:12px/1.5 'Microsoft Yahei',"微软雅黑",Verdana,SimHei,"Microsoft JhengHei",Tahoma}
dd,dl,dt,form,h1,h2,h3,h4,h5,h6,img,li,p,span,ul{margin:0;padding:0;border:none;list-style-type:none;font-weight:400}
a{color:#666;text-decoration:none}

.ecjia-content{overflow:hidden;margin:0 auto;width:1200px}
.ecjia-fl{float:left}
.ecjia-fr{float:right}
.clear{clear:both}
.wt-10{margin-top:10px}
.wt-80{margin-top:80px}
.wt-50{margin-top:50px}
.wt-20{margin-top:20px}
.wt-30{margin-top:30px}
.wt-135{margin-top:135px}
.ml-20{margin-left:20px}
.mr-10{margin-right:10px}
.mr-20{margin-right:20px}
.m-t-50{margin-top:-50px}
.ecjia-fl+.ecjia-fl{width:50%}
.fsize-24{font-size:24px}
.fsize-36{font-size:36px}
.fsize-48{font-size:48px}

.arrow-left{display:inline-block;width:0;height:0;border-top:8px solid transparent;border-right:28px solid #fff;border-bottom:5px solid transparent;vertical-align:super}
.ecjia-btn{padding: 10px 35px 10px 60px;border-radius:20px;background:#fff;color:#333;font-size:18px;position:relative;}
.ecjia-btn .icon{display:inline-block;margin-right:5px;width:20px;height:20px;background-image:url(../images/icons.png);background-repeat:no-repeat;position:absolute;top: 11px;left: 35px;}
.ecjia-btn .icon.iphone{background-position:0 0;}
.ecjia-btn .icon.android{background-position:-20px 0}
.two-btn .ecjia-btn:last-child{margin-left:30px}
.blue.ecjia-btn{background:#42b8f1;color:#fff}
.blue.ecjia-btn .icon.iphone{background-position:-40px 0}
.blue.ecjia-btn .icon.android{background-position:-60px 0}
.green.ecjia-btn{background:#fa6720;color:#fff}
.green.ecjia-btn .icon.iphone{background-position:-40px 1px}
.green.ecjia-btn .icon.android{background-position:-60px 1px}
.hover-font a:hover{background-color:#fff;color:#fa6720}
.blue.ecjia-btn:hover{background-color:#56c8ff}
.green.ecjia-btn:hover{background-color:#58c55c}
.ecjia-truncate{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecjia-truncate2{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.ecjia-header{height:80px;background:#fff}
.ecjia-header.fixed.navbar-transparent{-webkit-box-shadow:0 3px 6px rgba(0,0,0,.12);box-shadow:0 3px 6px rgba(0,0,0,.12)}
.ecjia-header .ecjia-logo{width:50%}
.ecjia-header .ecjia-logo img{height:60px}
.ecjia-header .nav{overflow:hidden}
.ecjia-header .nav li{float:left;padding:0 17px;color:#333;font-size:17px;line-height:80px}
.ecjia-header .nav li a{display:inline;padding:5px}
.ecjia-header .nav li:last-child{padding-right:0}
.ecjia-header.fixed{position:fixed;top:0;right:0;left:0;z-index:9999;height:80px}
.ecjia-container{margin-top:80px}
.ecjia-header .nav li a.ecjia-back-green{padding:5px 15px;border-radius:40px;background-color:#fa6720;color:#fff;text-align:center;font-size:17px;line-height:30px;cursor:pointer}
.ecjia-header .nav li.active a {border-bottom: 4px solid #fa6720;color: #fa6720}

.ecjia-container{width:100%;height:510px;min-width:1200px;background-color:#282828}
.wt-phone{margin-top:60px}
.project-view{position:relative;margin-top:0;margin-left:85px;width:449px;height:757px;background:url(../images/phone.png) no-repeat;background-size:100%}
.project-view iframe{padding:70px 64px;width:324px;height:567px}
.project-view .phone-tips{position:absolute;top:200px;right:0;padding:0 0 30px;width:15px;background:url(../images/mouse.png) no-repeat bottom;background-size:100%;color:#fff;text-align:center;writing-mode:lr-tb}
.ecjia-desc{width:100%;color:#fff;text-align:right}
.ecjia-desc .ecjia-text-name{margin-right:-15px}
.ecjia-desc .ecjia-edition{padding:3px 10px;border-radius:5px;background-color:#fff;color:#47aa4d;vertical-align:text-bottom;font-size:20px;line-height:31px}
.ecjia-desc .edition-icon{position:relative;top:-1px;right:-15px}
.ecjia-desc h2{line-height:70px}
.ecjia-code{color:#333;font-size:14px}
.ecjia-code span{display:inline-block;text-align:center}
.ecjia-code span,.ecjia-code span img{width:200px;height:200px}

.video{text-align:center}
.ecjia-title{color:#333;text-align:center}
.ecjia-title p{margin:30px auto 40px;width:785px;color:#888;font-size:16px}
.cly-title{color:#47aa4d;text-align:center;font-size:16px}

.swiper-container-phone{position:static;overflow:hidden;margin:70px 0 0 64px;width:320px}
.swiper-container-phone .swiper-pagination{position:relative;bottom:36px;z-index:2;height:20px}
.swiper-pagination-bullet{width:10px;height:10px}
.clyimges{position:relative}
.swiper-button-prev{left:90px}
.swiper-button-next{right:90px}
.swiper-container{position:static;width:900px}
.swiper-container img{width:100%}
.swiper-slide p{margin-top:25px;color:#000;text-align:center;font-size:16px}

/* 轮播图平滑过渡优化 */
.swiper-wrapper {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.swiper-slide {
    transition: all 0.3s ease-in-out;
}

.swiper-container .swiper-slide {
    opacity: 0.8;
    transform: scale(0.95);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swiper-container .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.download{margin-bottom:50px;text-align:center}

.page-footer{padding:15px 0;background-color:#2c313a;text-align:center;font-size:14px;line-height:25px}
.page-footer p:first-child{color:#333}
.page-footer p:last-child{color:#888}
.page-footer .outlink a{display:inline-block;width:132px;height:30px;cursor:pointer}
.page-footer .outlink .blog-ico{margin-right:35px;background:url(../images/blog.png)}
.page-footer .outlink .blog-ico:hover{background:url(../images/blog_hover.png)}
.page-footer .outlink .wechart{background:url(../images/wechart.png)}
.outlink-qrcode{position:relative;display:inline-block}
.outlink-qrcode .wechar-code{position:absolute;top:-197px;z-index:99;display:none;padding:10px 5px;width:130px;border-radius:5px 5px 0 0;background:#f8f8f8}
.outlink-qrcode .wechar-code img{width:130px;height:130px}
.page-footer .outlink .wechart:hover{background:url(../images/wechart_hover.png)}
.outlink .outlink-qrcode:hover .wechar-code{display:block}
.footer-links p{text-align:center}
.footer-links p a{margin-right:20px}

/* 白色字体样式 */
.main-title {
    color: #fff !important;
}

.main-title span {
    color: #fff !important;
}

.ecjia-title h1 {
    color: #fff !important;
}

.ecjia-text-name {
    color: #fff !important;
}

/* ========== 响应式设计 ========== */

/* 汉堡菜单样式 */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 20px 0;
    margin-right: 20px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* 平板端适配 (768px - 1199px) */
@media screen and (max-width: 1199px) {
    .ecjia-content {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    
    .ecjia-container {
        min-width: auto;
    }
    
    .project-view {
        margin-left: 20px;
        transform: scale(0.8);
        transform-origin: left top;
    }
    
    .ecjia-desc {
        padding-left: 20px;
    }
    
    .swiper-container {
        width: 100%;
        max-width: 700px;
    }
}

/* 移动端适配 (最大宽度 767px) */
@media screen and (max-width: 767px) {
    /* 基础布局重置 */
    .ecjia-content {
        width: 100%;
        padding: 0 15px;
    }
    
    .ecjia-fl {
        float: none;
        width: 100% !important;
        display: block;
    }
    
    /* 头部导航 */
    .ecjia-header {
        height: 60px;
        padding: 0;
    }
    
    .ecjia-header {
        height: 50px;
    }
    
    .ecjia-header .ecjia-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
    }
    
    .ecjia-header .ecjia-logo {
        width: auto;
        margin-top: 0;
    }
    
    .ecjia-header .ecjia-logo img {
        height: 35px;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .ecjia-header .nav {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
        flex-direction: column;
        padding: 0;
    }
    
    .ecjia-header .nav.show {
        display: flex;
    }
    
    .ecjia-header .nav li {
        float: none;
        padding: 0 8px;
        border-bottom: 1px solid #eee;
        line-height: 45px;
        text-align: center;
    }
    
    .ecjia-header .nav li a {
        font-size: 14px;
    }
    
    .ecjia-header .nav li:last-child {
        border-bottom: none;
    }
    
    .ecjia-header .nav li a {
        display: block;
        padding: 10px 20px;
        font-size: 16px;
    }
    
    /* 主容器 */
    .ecjia-container {
        margin-top: 60px;
        height: auto;
        min-height: auto;
        padding: 20px 0;
    }
    
    /* 隐藏桌面端手机预览 */
    .desktop-only {
        display: none !important;
    }
    
    /* 产品描述区域 */
    .product-desc {
        margin-top: 0 !important;
        width: 100%;
    }
    
    .ecjia-desc {
        text-align: center;
        color: #333;
        padding: 20px 0;
    }
    
    .title-section {
        margin-bottom: 20px;
    }
    
    .ecjia-text-name {
        font-size: 28px !important;
        display: block;
        margin-bottom: 10px;
    }
    
    .edition-icon {
        display: none;
    }
    
    .ecjia-edition {
        display: none !important;
    }
    
    .main-title {
        font-size: 24px !important;
        line-height: 1.4;
        margin: 15px 0;
    }
    
    .sub-title {
        font-size: 18px !important;
        margin-bottom: 25px;
    }
    
    /* 隐藏p元素 */
    p {
        display: none !important;
    }
    
    /* 下载按钮 */
    .download-buttons {
        margin: 25px 0;
        text-align: center;
    }
    
    .download-buttons .ecjia-btn {
        display: block;
        width: 80%;
        max-width: 280px;
        margin: 10px auto;
        padding: 12px 20px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
    }
    
    .download-buttons .ecjia-btn .icon {
        left: 20px;
    }
    
    .two-btn .ecjia-btn:last-child {
        margin-left: auto;
    }
    
    /* 二维码区域 - 移动端隐藏 */
    .qr-codes {
        display: none !important;
    }
    
    .qr-item {
        display: inline-block;
        margin: 10px 15px;
        text-align: center;
    }
    
    .qr-item img {
        width: 120px !important;
        height: 120px !important;
    }
    
    .qr-label {
        display: block;
        margin-top: 8px;
        font-size: 14px;
        color: #666;
    }
    
    /* 标题区域 - 移动端隐藏 */
    .ecjia-title {
        display: none !important;
    }
    
    .ecjia-title h1 {
        font-size: 24px;
    }
    
    .ecjia-title p {
        width: 100%;
        font-size: 14px;
        line-height: 1.6;
        margin: 20px 0;
    }
    
    /* 轮播图区域 */
    .clyimges {
        padding: 0 15px;
    }
    
    .cly-title {
        font-size: 18px;
        margin-bottom: 20px;
    }
    
    .swiper-container {
        width: 100%;
        margin: 0 auto;
    }
    
    .swiper-slide {
        text-align: center;
    }
    
    .swiper-slide img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }
    
    .swiper-slide p {
        font-size: 14px;
        margin-top: 10px;
    }
    
    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }
    
    /* 下载区域 */
    .download {
        margin: 30px 0;
        padding: 0 15px;
    }
    
    .download .ecjia-btn {
        display: block;
        width: 80%;
        max-width: 280px;
        margin: 10px auto;
        font-size: 16px;
    }
    
    /* 页脚 */
    .page-footer {
        padding: 20px 15px;
        font-size: 12px;
        line-height: 1.6;
    }
    
    .page-footer .outlink {
        margin-bottom: 15px;
    }
    
    .page-footer .outlink a {
        width: 100px;
        height: 25px;
        margin: 5px;
    }
    
    .footer-links p a {
        display: inline-block;
        margin: 5px 10px;
        font-size: 12px;
    }
    
    .page-footer p {
        font-size: 11px;
        line-height: 1.5;
        margin: 10px 0;
    }
}

/* 超小屏幕适配 (最大宽度 480px) */
@media screen and (max-width: 480px) {
    .ecjia-content {
        padding: 0 10px;
    }
    
    .ecjia-text-name {
        font-size: 24px !important;
    }
    
    .main-title {
        font-size: 20px !important;
    }
    
    .sub-title {
        font-size: 16px !important;
    }
    
    .download-buttons .ecjia-btn {
        width: 90%;
        font-size: 14px;
        padding: 10px 15px;
    }
    
    .qr-item {
        margin: 10px 8px;
    }
    
    .qr-item img {
        width: 100px !important;
        height: 100px !important;
    }
    
    .ecjia-title h1 {
        font-size: 20px;
    }
    
    .ecjia-title p {
        font-size: 13px;
    }
    
    .footer-links p a {
        margin: 3px 5px;
        font-size: 11px;
    }
}