@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	/*background: transparent;*/
	/* color: #fff; */
	font-family: "Microsoft YaHei";
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset, img {	border:0;}
address, caption, cite, code, dfn, em, th, var {
	font-style:normal;
	font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 {
	font-size:200%;
	font-weight:normal;
}
:focus { outline: 0;}
a{ text-decoration:none;}
a:hover img{ border:none;}
img{ /*width:100%;*/ /* height:auto; display:block; */}

/*清除浮动*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
.clearfix {display: block;}


.mainWrap{width: 100%; height: 100%; overflow: hidden; background-color: #e8e8e8;}

/* banner css */
.focus{ width:100%;  margin:0 auto; position:relative; overflow:hidden;   }
.focus .hd{ width:100%; height:15px;  position:absolute; z-index:1; bottom:20px; text-align:center;  }
.focus .hd ul{ display:inline-block; height:15px; padding:3px 5px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; font-size:0; vertical-align:top;}
.focus .hd ul li{ display:inline-block; width:15px; height:15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; background:#ffffff; margin:0 8px;  vertical-align:top; overflow:hidden;}
.focus .hd ul .on{ background:#e01129;  }

.focus .bd{ position:relative; z-index:0; }
.focus .bd li img{ width:100%; background:url(../images/loading.gif) center center no-repeat;  }
.focus .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }

.focus .bd li{ position:relative;}
.focus .bd li p{position: absolute; bottom: 50px; left:20px; font-size: 1.4em;}

.mainWrap .home .links{width: 96%; padding: 0 2%;}
.mainWrap .home .links li{width: 31.3%;float: left;margin: 20px 1% 0; background-color: #fff;}
.mainWrap .home .links li p{ color: #666;font-size: 1.3em; padding: 5px 10px;}
.mainWrap .home .links li span{background:url(../images/more.png) center center no-repeat; width: 30px; height: 11px; float: right; margin:5px 15px 15px 0;}

.mainWrap .home .sensing_com{ width: 100%;/* margin-top: 20px;*/}
.mainWrap .home .sensing_com .title{width: 100%; background-color: #fff; padding: 18px 15px; }
.mainWrap .home .sensing_com .title h2{ color: #333; font-size: 16px; font-weight: bold; border-left:#ec0c28 solid 3px; line-height: 16px; padding-left: 6px}
.mainWrap .home .sensing_com .car_show{background:url(../images/jsfj_bg.jpg) center center no-repeat; background-size: 100%; width: 100%; height: 360px; position: relative;}
.mainWrap .home .sensing_com .car_show .car_gif1{background:url(../images/in1.gif) center center no-repeat; background-size: 100%; width: 100%; height: 360px; position: absolute; left: 0; top: 0; z-index: 11;}
.mainWrap .home .sensing_com .car_show .car_gif1_last{background:url(../images/in1_last.jpg) center center no-repeat; background-size: 100%; width: 100%; height: 360px; position: absolute; left: 0; top: 0; z-index: 10;}
#p1{width: 100%; height: 870px; zoom: 0.55;
		-moz-transform:scale(0.55);
		-moz-transform-origin:top left; /* Firefox */
		-o-transform:scale(0.55);
		-o-transform-origin:top left; /* Opera */}

#p1 .animate img { position: absolute; width: 100%; height: 360px; top: 0; left: 0; display: none;}

.mainWrap .home .sensing_com .word{ background-color: #fff; font-size: 14px; padding: 10px 20px; text-align:justify;}
.mainWrap .home .sensing_com .word .moreText{ color: #666; }
.mainWrap .home .sensing_com .center_movie{background:#fff url(../images/movie_bg.jpg) top center no-repeat; background-size: 100%; width: 100%; position: relative;}
.mainWrap .home .sensing_com .center_movie .honda_movie{ width: 90%; margin: 0 auto; text-align:center; padding-top: 35px; }

.mainWrap .home .slogan{ background-color: #fff; width: 100%; padding-top: 40px;}
.mainWrap .home .slogan img{width: 220px; margin: 0 auto; text-align: center; display: block;}

.moreoh{ display: block;background:url(../images/open.png) center center no-repeat; background-size: 14px auto; width: 30px; height: 30px; text-indent: 111111px;margin:5px auto;overflow: hidden; cursor: pointer;line-height: 100px;}
.word.active .moreoh{ display: block;background:url(../images/close.png) center center no-repeat; background-size: 14px auto; width: 30px; height: 30px; text-indent: 111111px;margin:5px auto;overflow: hidden; cursor: pointer;line-height: 100px;}

.slideBox{ position:relative; width:320px;  height:152px; overflow:hidden; margin:10px auto; }
.slideBox .hd{ position:absolute; height:28px; line-height:28px; bottom:0; right:0; z-index:1; }
.slideBox .hd li{ display:inline-block; width:5px; height:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#333; text-indent:-9999px; overflow:hidden; margin:0 6px;   }
.slideBox .hd li.on{ background:#fff;  }
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative;  }
.slideBox .bd li img{ width:320px;  height:152px; display:block;   }
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */ }
.slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px; background:url(images/focusBg.png) repeat-x; color:#fff;   }

.sensing_com .imglun{padding:0 20px; background-color: #fff;height: 382px;}
.sensing_com .imglun ul li{ float: left; }

.cars_container{overflow: hidden;width: 100%;background-color: #fff;margin: 0 auto;padding: 0 20px;}
.cars_container li{width: 100%; overflow: hidden; margin-bottom: 30px; position: relative;}
.cars_container li img{ width: 60%; position: absolute; top: 0; left: -5%;}
.cars_container li .right-car{ width: 50%; float: right;}
.cars_container li p.name{ /* margin-bottom: 12px; */font-size: 24px;font-size: 1.7rem;line-height: 1.7;color: #333; }
.cars_container li p.c-ico0{line-height: 26px; font-size: 1.4rem; color: #666; margin-bottom: 8px;}

.mask{ background-color:#000; filter:alpha(opacity=50);opacity:0.7; width:100%; height:100%; position:fixed; z-index:199;top:0; display:none;}
.movie-popup01,.movie-popup02{ z-index:200; width:100%; height:450px;position: fixed;display:none; top:50%; left:0;text-align:center;margin-top:-300px;}
.movie-popup01 .close_tan,.movie-popup02 .close_tan{ position:absolute; right:15px; top:15px; cursor:pointer; z-index:201;}



.popup { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000000; display: none; background-color: rgba(0,0,0,0.5);}
.popup img { display: block; position: absolute; left: 50%; top: 50%; border-radius: 10px; overflow: hidden;}

/*css判断屏幕旋转提示*/
@-webkit-keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

@keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    50%, 60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg)
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg)
    }
}

#orientLayer {
    display: none;
}

@media screen and (min-aspect-ratio: 13/8) {
    #orientLayer {
        display: block;
        width:100%;
        height:100%;
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #333;
    z-index: 999997
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center
}

.mod-orient-layer__icon-orient {
   background-image: url(../images/icon-orient.png);
    display: inline-block;
    width: 67px;
    height: 109px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-background-size: 67px;
    background-size: 67px
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 15px;
    color: #fff
}

@media only screen
    and (min-width : 1023px){
        html{
            width:414px;
            margin: 0 auto;
            background-color: #333!important;
            position: absolute;
            left: 50%;
            margin-left: -207px;
            max-height: 672px;
        }
            
        .screen__inner{
            -webkit-transform: scale(1.29375)!important;
            transform: scale(1.29375)!important;
        }

        .mod-orient-layer__content{
            display: none;
        }
    }

.modpop{ height: 100%;overflow: hidden;}
.modpop body{height:100%;overflow:hidden;}
.loadding{width:48px;height:48px;position: fixed;top:50%;left:50%;margin-top:-24px;margin-left:-24px;z-index:999;background: url(../images/loading.gif) no-repeat;display: }
.first_img_canvas{width:640px;height:360px;}
#CanvasDiv0, #CanvasDiv1, #CanvasDiv2, #CanvasDiv3{position:absolute;top:0;left:50%; margin-left: -320px; width:640px;height:360px;}
.canvasBox1, .canvasBox2, .canvasBox3{display: none;}
.sence_con_module .canvasBox{position:absolute;top:0;left:0;width:100%;height:360px;}
.canvasBox1_pop{display:none;position: absolute;width:492px;height:230px;top:50%;margin-top:-115px;left:50%;margin-left:-246px;background: url(../images/word_tan.png) no-repeat;}
.canvasBox1_pop .close{position:absolute;top:6px;right:5px;width:27px;height:27px;background:url(../images/close_blue.gif) no-repeat;}
.canvasBtn,.canvasFirstBtn{display:none;z-index:5;position: absolute;width:47px;height:47px;background: url(../images/icon.png) no-repeat;}
.canvasBox0 .promptArraowFirst{top:230px;left:389px;}
.canvasFirstBtn.canvasFirstBtn01{left:248px;top:92px;}
.canvasFirstBtn.canvasFirstBtn02{left:360px;top:190px;}
.canvasBtn.canvasBtn01{left:344px;top:235px;}
.canvasBtn.canvasBtn02{left:470px;top:154px;}
.canvasBtn.canvasBtn03{left:117px;top:154px;}
.promptArraow,.promptArraowFirst{display:none;z-index:5;position: absolute;width:30px;height:47px;top:272px;left:369px;background: url(../images/promptArraowbg.png) no-repeat;}
.opacityImgZ{display:none;position: absolute;width:100%;height:360px;z-index:3;}
.canvasBox3_pop{display:none;position: absolute;width:640px;height:360px;z-index:10;left:50%; margin-left: -320px;top:350px;background: url(../images/quan.png) no-repeat;}
.canvasBox3_popInner{padding-top: 44px;width:336px;height:280px;margin:0 auto;position: relative;}
.canvasBox3_popInner .close{width:50px;height:42px;position: absolute;top:31px;right:30px;}
.canvasBox3_pop h6{font-size:14px;text-align:center;color:#0fc0fa;position: relative;padding-bottom: 10px;margin-bottom: 10px;}
.canvasBox3_pop h6:after{content: '';position: absolute;width:36px;height:4px;background: #0fc0fa;left:50%;margin-left:-18px;bottom:0;}
.canvasBox3_pop ul li{text-align: center;margin-bottom: 10px;color:#c6ccd8;font-size: 14px;}
.canvasBox3_pop ul li a{color:#c6ccd8;font-size: 14px;border-bottom: 1px solid #c0c0c1;}

.threeCavasBtnAll{ position: relative; z-index: 9; }

.three_area .areaSame{position: absolute;z-index:7;display: none;left:50%; margin-left: -320px;top:0;width:640px;height:360px;}
.areaSame01{background: url(../images/three_area1.png) no-repeat;}
.areaSame02{background: url(../images/three_area2.png) no-repeat;}
.areaSame03{background: url(../images/three_area3.png) no-repeat;}

.three_new{ position: absolute;width:100%;height:35px;z-index:10;left:0;top:750px; margin: 0 auto; text-align: center; font-size: 0;}
.three_new .newSame{ display: inline-block; color: #3be1ff; font-size: 14px;margin: 0 25px; position: relative; opacity: 0.4}
.three_new .newSame:after{content: ''; position: absolute;width: 70px;height: 4px;background: #3be1ff;left: 50%;margin-left: -35px;top: -8px;}
.three_new .newSame.current{ opacity: 1; }


#showMore{ width: 40px; height: 32px; margin: 0 auto 20px; text-align: center; display: block;  }
#showMore .zhankai {background: url(../images/open.png) center center no-repeat; background-size: 14px auto; width: 40px;height: 32px;cursor: pointer; display: block;}
#showMore .shouqi {background: url(../images/close.png) center center no-repeat; background-size: 14px auto; width: 40px;height: 32px;cursor: pointer; display: block;}


 .canvasFirstBtn.current,.canvasBtn.current{-webkit-animation: rotateZ 1.5s infinite linear;animation: rotateZ 1.5s infinite linear;}
@-webkit-keyframes rotateZ {
    0%    { -webkit-transform: rotate(0deg);}
    
    100%  { -webkit-transform: rotateZ(360deg); }
  }

  @-webkit-keyframes rotateBAI {
    0%    { -webkit-transform: rotate(360deg);}
    
    100%  { -webkit-transform: rotateZ(0deg); }
  }
  @-webkit-keyframes rotateHONG {
    0%    { -webkit-transform: rotate(0deg);}
    
    100%  { -webkit-transform: rotateZ(360deg); }
  }

  @-webkit-keyframes rotateLAN {
    0%    { -webkit-transform: rotate(0deg);}
    
    100%  { -webkit-transform: rotateZ(360deg); }
  }


.header_special{width: 100%;height: 6rem;background: #ffffff;position: relative;top:0;left:0;z-index: 100;}
.header_special .logo{width: 14rem;position: absolute;top:0;left:50%;margin-left: -7rem;}

.footer_special{width:100%;height: auto;background: #fafafa;padding-bottom: 1.45rem;padding-top: 1.25rem;position: relative;}
.footer_special .sns-popup{position: absolute;top: -19.78rem;right: 4.3rem;z-index: 10;display: none;}
.footer_special .close-popup{position: absolute; bottom: .55rem;width: 8.0rem;height: 3.4rem;left: 50%;margin-left: -4rem;display: block;z-index: 11;}
.footer_special .sns-popup em{display: block;width: 0;height: 0;border-left: .15rem solid transparent;border-right: .15rem solid transparent;border-top: .2rem solid #aaabab;position: absolute;bottom:.05rem;left:50%;margin-left: -.15rem;}
.footer_special .sns-popup img{ width: 18.6rem;height: 19.78rem;}
.footer_special .footer-fx{width: 17.24rem;margin:0 auto .25rem;}
.footer_special .footer-fx a{display:block;width: 8.42rem;height:3.64rem;float: left;}
.footer_special .footer-fx a.ft-wb{background:url(/assets/images/sp/common/wb-ico.png) no-repeat center top;background-size: 100%;position: relative;}
.footer_special .footer-fx a.ft-wb:after{display: block;position: absolute;width: .02rem;height: .4rem;right:0;top:.12rem;content: "";background: #b5b5b5;}
.footer_special .footer-fx a.ft-wx{background:url(/assets/images/sp/common/wx-ico.png) no-repeat center top;background-size: 100%}
.footer_special .ft-logo{display: table;margin:0 auto;width: 14rem;}
.footer_special p.p1{text-align: center;}
.footer_special p.p1{color: #ff0000; font: 1.2rem/1.2rem '';margin-bottom: .35rem;}
.footer_special p.p1 a{display: inline-block; font: 1.2rem/2.4rem '';color: #000;margin:0.4rem;}
.footer_special>a{display: table;margin:.14rem auto;width: 2.17rem;height: .52rem '';color: #000;text-align: center;font:.28rem/.52rem '';border:solid #ff0000 .04rem;}
.footer_special p.p2{color: #000; font: 0.8em/1.2rem '';text-align: center;}

.sence_con_module .canvasBox .specific-note{ width: 100%; position: absolute; top: 810px; padding: 0 20px;}

.mainWrap .home .sensing_com .word .moreText{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mainWrap .home .sensing_com .word.active .moreText{ -webkit-line-clamp: initial;}







