/* CSS Document */

#header { z-index: 900; }
#drawer { z-index: 800; }
#article { z-index: 0; }
#footer { z-index: 0; }



.gr_pop{width:100%; height:100%; box-sizing:border-box; padding-top:70px; position:fixed; top:0; left:0; z-index:850; background:rgba(0,0,0,0.6); display:none;}
.gr_pop p{width:100%; height:100%; position:relative;}
.gr_pop .erweima{width:70%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
.gr_pop .close{display:block; width:18%; position:absolute; top:0px; right:0px; z-index:10;}




#header{width:100%; height:70px; background:#fff; text-align:center; position:fixed; left:0; top:0;}
#header_container{position:relative;}
#header h1{width:100%; height:70px; position:relative; text-align:center; display:block;}
#header h1 span,
#header h1 a{height:70px; background:url(https://www.toyota.com.cn/mobile/common/img/logo/logo03.png) center center no-repeat; background-size:200px auto; text-indent:-10000px;}

#header h1.newlogo2019 a{background-image:url(https://www.toyota.com.cn/mobile/common/img/logo/logo03.png); background-size: 200px auto;}
/*#header h1.newlogo a{background-image:url(../image/logo02.jpg); background-size: 100px auto;}*/





/*#btn_menu{width:50px; height:50px; display:block; position:absolute; left:0; top:10px;}
#btn_menu_container{position:relative;}
.btn_menu_item {display:block; width:50px; height:50px; background-repeat:no-repeat; background-size:50px auto; position:absolute; left:0; top:0;}
#btn_menu_item01{background-image: url(/mobile/common/img/header/btn_menu_top.png); }
#btn_menu_item02{background-image: url(/mobile/common/img/header/btn_menu_bottom.png); }
#btn_menu_item03{background-image: url(/mobile/common/img/header/btn_menu_middle.png); }
#btn_menu_item04{display: none; background-image: url(/mobile/common/img/header/btn_menu_middle.png); }
*/

#btn_menu{width:50px; height:50px; box-sizing:border-box; padding:13px 10px; display:block; position:absolute; left:0; top:9px;}
#btn_menu_container{width:100%; height:100%; position:relative;}
.btn_menu_item {display:block; height:4px; background:#4e4e4e; position:absolute; left:0;}
#btn_menu_item01{width:23px; top:20px;}
#btn_menu_item02{width:17px; top:10px;}
#btn_menu_item03{width:30px; top:0; }
#btn_menu_item04{display:none; width:30px; top:0;}

#header .header_btn_lk{width:76px;/*width:33px;*/ height:33px; position:absolute; right:15px; top:18.5px;}
#header .header_btn_lk a{display:block; width:33px; height:100%; float:left; text-align:center; position:relative;}
#header .header_btn_lk a:first-child{margin-right:10px;}
#header .header_btn_lk img{width:23px; position:relative; top:5px;}



/***下拉菜单***/

#drawer{width:100%; height:100%;padding-top:70px; box-sizing:border-box; background:#fff; position:fixed; top:0; left:0; overflow:hidden; overflow-y:scroll; display:none;}
#drawer_container{width:100%; height:100%; position:relative; border-top:1px solid #d3d3d3;}

#drawer .service{width:100%; padding:10px 0; background:#e60021; position:fixed; bottom:20px; left:0; z-index:10;}
#drawer .service a{display:block; width:50%; height:32px; float:left; text-align:center; box-sizing:border-box; position:relative; color:#fff;}
#drawer .service a p{width:100%; height:100%;}
#drawer .service a:first-child{border-right:1px solid #fff;}
#drawer .service a span{display:inline-block; height:100%; position:relative;}
#drawer .service a span.pic{ width:16%; /*width:100%;*/ margin-right:10px; /*position:absolute; left:0; top:-22%;*/}
#drawer .service a img{width:100%; max-width:48px; /*position:relative; bottom:-30%; margin-right:10px;*/}

#drawer .service a span.txt{position:relative; bottom:30%;}
#drawer .service a img.pic2{position:absolute; top:0; left:0;}

/***一级导航***/
#drawer .level_1{position:relative; z-index:2;}
#drawer .level_1 li{width:100%; font-size:13px; padding:0 5%; box-sizing:border-box;}

#drawer .level_1 li p{width:100%; border-bottom:1px solid #666; box-sizing:border-box; padding:20px 2% 15px; color:#202020; position:relative;}
#drawer .level_1 li p a{color:#333;}
#drawer .level_1 li p span{display:block; width:7px; height:12px; background:url(../image/jt.png) 0 0 no-repeat; background-size:100% auto; position:absolute; right:2%; bottom:17px;}

/***二级导航***/
#drawer .level_2{width:100%; height:100%; background:#fff; position:absolute; top:0; left:0; z-index:1; font-size:14px;}

@media screen and (max-width:361px){
#drawer .level_2{font-size:13px;}
}

#drawer .level_2 section{width:100%; background:#fff; display:none;}
#drawer .level_2 section.l2_on{display:block;}
#drawer .level_2 section h2{width:100%; background:#e9e9e9; padding:24px 0; text-align:center; position:relative;}
#drawer .level_2 section h2 .back{display:block; width:20px; position:absolute; top:50%; left:5%; transform:translateY(-50%);}

/***二级导航----全线车系***/
#drawer .vehicles_wrap .tab_btn{width:100%; box-sizing:border-box; padding:6% 3%;}
#drawer .vehicles_wrap .tab_btn li{width:22%; padding:5px 0; margin-bottom:10px; text-align:center; float:left; border-bottom:2px solid #fff;}
#drawer .vehicles_wrap .tab_btn li.wid_s{width:12%;}
#drawer .vehicles_wrap .tab_btn li.wid_m{width:20%;}
#drawer .vehicles_wrap .tab_btn li.on{border-bottom:2px solid #e60021;}

#drawer .vehicles_wrap .tab_con{width:100%;}
#drawer .vehicles_wrap .tab_con li{width:100%; box-sizing:border-box; padding:0 3% 100px; display:none;}
#drawer .vehicles_wrap .tab_con li:after{display:table; content:''; clear:both;}
#drawer .vehicles_wrap .tab_con li.on{display:block;}
#drawer .vehicles_wrap .tab_con li a{color:#333;}
#drawer .vehicles_wrap .tab_con li dl{width:48.5%; margin-right:3%; margin-bottom:3%; float:left; border:1px solid #e9e9e9; background:#f8f8f8; border-radius:8px; box-sizing:border-box; padding:4% 0 5%;}
#drawer .vehicles_wrap .tab_con li dl:nth-child(2n){margin-right:0;}
#drawer .vehicles_wrap .tab_con li dl dt,
#drawer .vehicles_wrap .tab_con li dl dd{width:100%;}
#drawer .vehicles_wrap .tab_con li dl dt{box-sizing:border-box; padding:0 3%; margin-bottom:10px;}
#drawer .vehicles_wrap .tab_con li dl dd{box-sizing:border-box; padding:0 1%;}
#drawer .vehicles_wrap .tab_con li dl dt img{display:block; width:100%;}
#drawer .vehicles_wrap .tab_con li dl dd{height:30px; text-align:center;}
#drawer .vehicles_wrap .tab_con li dl dd .txt_s{font-size:10px;}

/*品牌天地*/
#drawer .brand_wrap .brand_toppic{width:100%;}
#drawer .brand_wrap .brand_toppic img{display:block; width:100%;}
#drawer .brand_wrap .tab_box{width:100%; box-sizing:border-box; padding:15px 5%;}
#drawer .brand_wrap .tab_box .tab_btn{width:100%; display:flex; justify-content:center; margin-bottom:20px;}
#drawer .brand_wrap .tab_box .tab_btn li{text-align:center; padding:5px 0px; margin:0 15px; letter-spacing:2px;}
#drawer .brand_wrap .tab_box .tab_btn li.on{border-bottom:2px solid #e60021;}

#drawer .brand_wrap .tab_box .tab_con{width:100%;}
#drawer .brand_wrap .tab_box .tab_con li{width:100%; display:none; letter-spacing:2px;}
#drawer .brand_wrap .tab_box .tab_con li.on{display:block;}
#drawer .brand_wrap .tab_box .tab_con li .pic{width:100%; margin-bottom:13px;}
#drawer .brand_wrap .tab_box .tab_con li .pic img{display:block; width:100%;}
#drawer .brand_wrap .tab_box .tab_con li .lk{width:100%; text-align:center;}
#drawer .brand_wrap .tab_box .tab_con li a{display:inline-block; padding:7px 0; color:#202020;}

@media screen and (min-height:750px){
	#drawer .brand_wrap .tab_box{padding-top:25px;}
	#drawer .brand_wrap .tab_box .tab_btn{margin-bottom:25px;}
	#drawer .brand_wrap .tab_box .tab_con li .pic{margin-bottom:25px;}
}
@media screen and (max-height:680px){
	#drawer .brand_wrap .tab_box{padding-top:10px;}
	#drawer .brand_wrap .tab_box .tab_btn{margin-bottom:10px;}
	#drawer .brand_wrap .tab_box .tab_con li .pic{margin-bottom:10px;}
	#drawer .brand_wrap .tab_box .tab_con li a{padding:5px 0;}
}


/***二级导航----其他栏目***/
#drawer .level_2 section .lk_wrap{width:100%; padding:6% 0 0;}
#drawer .level_2 section .lk_wrap a{display:block; width:100%; text-align:center; color:#333; padding:10px 0;}


.l2_on{
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


#header .header_btn_lk a.wheel img,
#drawer .service a.btn1 img,
#drawer .service a img.pic2,
.robot_btn .icon{
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-animation-duration:1.5s;
  animation-duration:1.5s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
  -webkit-transform-origin:center center;
  transform-origin:center center;
}
#header .header_btn_lk a.wheel img,
#drawer .service a.btn1 img{
  -webkit-animation-name:wheel_swing;
  animation-name:wheel_swing;
}
.robot_btn .icon{
  -webkit-animation-name:robot_zoomIn;
  animation-name:robot_zoomIn;
}

#drawer .service a img.pic2{
  -webkit-animation-name:map_shake;
  animation-name:map_shake;
}


@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


.l2_out{
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
	visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes wheel_swing {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, -15deg);
    transform: rotate3d(0, 0, 1, -15deg);
  }
  to{
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, -15deg);
    transform: rotate3d(0, 0, 1, -15deg);
  }
  to{
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@-webkit-keyframes robot_zoomIn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
	-webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
}

@keyframes robot_zoomIn {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
	-webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
}
@-webkit-keyframes map_shake{
  from,
  to {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  25% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }

  50% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  75% {
    -webkit-transform: translate3d(0,2px,0);
    transform: translate3d(0,2px,0);
  }
}

@keyframes map_shake{
  from,
  to {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  25% {
    -webkit-transform: translate3d(0,-2px,0);
    transform: translate3d(0,-2px,0);
  }

  50% {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  75% {
    -webkit-transform: translate3d(0,2px,0);
    transform: translate3d(0,2px,0);
  }
}









/*全站的内容盒子*/
#wrapper{width:100%; position:relative;}


/*全网站跟随nav*/
.follow_nav{width:60px; position:fixed; bottom:30px; right:0; z-index:1000000;}
.follow_nav a{display:block; width:100%; height:60px; margin-bottom:4px; text-align:center; line-height:1.2;}
.follow_nav a img{width:100%;}