.bottomBg{ width:100%; height:auto; background:#fafafa; padding:30px 0 0;}
.bottomBg .mainContainer{ }
.bottomPart1{ width:78%; float:left;}
.bottomPart2{ width:22%; float:left;}
.bottomPart1 ul.menu{}
.bottomPart1 ul.menu li{ width:25%; float:left; font-size:16px;line-height:40px; color:#333;  text-align:left;}
.bottomPart1 ul.menu li ul{width:100%;}
.bottomPart1 ul.menu li ul li{width:100%; line-height:30px;font-size:14px; margin:0; }
.bottomPart1 ul.menu li ul li a{color:#686868;}
.bottomPart1 ul.menu li ul li a:hover{color:#df0716;}

.bottomPart1 .linkCon{ padding:30px 0;}
.bottomPart1 .linkCon p{font-size:16px;line-height:40px; color:#333; text-align:left;  }
.bottomPart1 .linkCon li{width:20%;font-size:14px; line-height:30px; float:left; padding:0 50px 0 0;text-align:left; }
.bottomPart1 .linkCon li a{color:#686868;}
.bottomPart1 .linkCon li a:hover{color:#df0716;}

.copy{ padding:20px 0;}
.copy span{ padding:0 3px; color:#686868; display:inline-block;
height:100%;vertical-align:middle;}
.copy img{vertical-align:middle}

.bottomPart2 .codeCon{ display:inline-block; float:right; }

.bottomPart2 .codeCon li{ padding:10px 0;}
.bottomPart2 .codeCon li .Img{ width:42px; height:auto; background:#dcdcdc;vertical-align:middle;border-radius:5px; float:left;}
.bottomPart2 .codeCon li .Img img{ width:100%; height:auto;}
.bottomPart2 .codeCon li span{ text-align:left; line-height:42px; padding:0 0 0 15px;}
.bottomPart2 .codeCon li a{color:#686868; display:block;}
.bottomPart2 .codeCon li a:hover{color:#df0716;display:block;}
.bottomPart2 .codeCon li a .Img.c01{  background:#dcdcdc; transition: all .3s;}
.bottomPart2 .codeCon li a .Img.c02{  background:#dcdcdc; transition: all .3s;}
.bottomPart2 .codeCon li a:hover .Img.c01{  background:#8dca1d; transition: all .3s;}
.bottomPart2 .codeCon li a:hover .Img.c02{  background:#de3031; transition: all .3s;}

.bottomPart2 .codeCon .tooltip {opacity:0; visibility:hidden; width:120px;  
           padding:10px;
           border-radius:3px;
           position:absolute;
           box-shadow:1px 1px 10px 0 #dfdfdf;
           margin: -350px 0 0 -42px;
           background:#fff;;-webkit-transition: opacity 0.3s, visibility 0s;
  -moz-transition: opacity 0.3s, visibility 0s;
  transition: opacity 0.3s, visibility 0s;}

.bottomPart2 .codeCon .tooltip .ImgCode{width:100%; height:auto;}
.bottomPart2 .codeCon .tooltip .ImgCode p{ display:none;}
.bottomPart2 .codeCon .tooltip .ImgCode img{width:100%; height:auto;}
.bottomPart2 .codeCon .item:hover .tooltip {opacity:1; visibility:visible;
           margin:-178px 0 0 -42px;
		   -webkit-transition: opacity 0.3s, visibility 0s;
  -moz-transition: opacity 0.3s, visibility 0s;
  transition: opacity 0.3s, visibility 0s;}

.bottomPart2 .codeCon .arrow {
  position:absolute;
    margin:10px 0 0 42px;
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
}
@media (max-width: 768px) { 
.bottomBg{ width:100%; height:auto; background:#fafafa; padding:0 0;}
.bottomPart1{ width:100%; float:none; display:none;}
.bottomPart2{ width:100%; float:none;}
.bottomPart1 ul.menu{}
.bottomPart1 ul.menu li{ width:50%; float:left; font-size:14px;line-height:30px; color:#333;  text-align:left; margin:10px 0;}

.bottomPart1 .linkCon p{font-size:14px;line-height:30px; color:#333; text-align:left; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; }
.bottomPart1 .linkCon li{width:50%;font-size:14px; line-height:30px; float:left; padding:0 0 0 0;text-align:left;  }

.bottomPart2 .codeCon{width:100%; display:inline-block; float:none;}

.bottomPart2 .codeCon li{ padding:20px 20px; float:none; width:auto;  display:inline-block;}
.bottomPart2 .codeCon li .Img{ width:42px; height:auto; background:#dcdcdc;vertical-align:middle;border-radius:5px; float:none; display:inline-block; padding:0;}
.bottomPart2 .codeCon li .Img img{ width:100%; height:auto;padding:0;}
.bottomPart2 .codeCon li span{ text-align:left; line-height:42px; padding:0 0 0 10px;float:none; display:inline-block; }
.bottomPart2 .codeCon li a{color:#686868; display:block;}
.bottomPart2 .codeCon li a:hover{color:#df0716;display:block;}
.bottomPart2 .codeCon li a .Img.c01{  background:#dcdcdc; transition: all .3s;}
.bottomPart2 .codeCon li a .Img.c02{  background:#dcdcdc; transition: all .3s;}
.bottomPart2 .codeCon li a:hover .Img.c01{  background:#8dca1d; transition: all .3s;}
.bottomPart2 .codeCon li a:hover .Img.c02{  background:#de3031; transition: all .3s;}
.bottomPart2 .codeCon .tooltip { width:70%; height:auto; z-index:1002; 
           padding:15px;
           border-radius:3px;
           position:fixed; left:50%; top:60%; transform: translate(-50%, -50%); 
           box-shadow:none;
           margin:0;
           background:#fff;opacity:0;visibility: hidden;
		  transition: all .3s;
           -webkit-transition: all .3s;
           -moz-transition: all .3s;
		  }

.bottomPart2 .codeCon .tooltip .ImgCode{width:100%; height:auto;}
.bottomPart2 .codeCon .tooltip .ImgCode p{ display:block; padding:10px 0 0 0;}
.bottomPart2 .codeCon .tooltip .ImgCode img{width:100%; height:auto;}
.bottomPart2 .codeCon .item:hover .tooltip {opacity:0;visibility: hidden; margin:0;transition: all .3s;
           -webkit-transition: all .3s;
           -moz-transition: all .3s;}
.bottomPart2 .codeCon .item.is-visible .tooltip {left:50%; top:50%; opacity:1;visibility: visible; margin:0;transition: all .3s;
           -webkit-transition: all .3s;
           -moz-transition: all .3s;transition-delay: 0.1s;}
.cd-popup-code{
  position: fixed;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
 background-color: rgba(0,0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  z-index:1001;
}/*大背景*/
.cd-popup-code.is-visible{left: 0;
  bottom: 0;
   opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.bottomPart2 .codeCon .arrow { display:none;}

}