@charset "utf-8";
/* CSS Document */

img, .heeaerwarp, #so, #an, .contactwarp, .contactcontent{ behavior: url(templates/afd/style/iepngfix.htc); }

/* ====================公共样式==================== */
.clear-float{clear:both;}
ul{	margin:0; 	padding:0; 	list-style-type:none;}

body{ margin:0 auto; padding:0; background: url(../images/topbg.png);}

/* *{ font:15px/20px Arial, Helvetica, sans-serif; color:#000000;}*/

.fl{ float:left;}
.fr{ float:right;}

/* ====================页面布局==================== */
.warp{ 
	width:100%;
    height:auto;
	margin:0 auto;
	 }
	 	 
/*===================new=========================*/
.newscon02{width:890px; height:auto; margin:0 auto;}
.nwescon02 li{width:890px; height:auto; border-bottom:1px solid #d6d6d6; padding-left: 20px;}
.nwescon02 li h3{width:890px; height:30px; margin:0; padding:0; font:16px/40px Arial, Helvetica, sans-serif; color:#666;}
.nwescon02 li a{font:18px/30px Arial, Helvetica, sans-serif;color:#000; text-decoration:none;}
.nwescon02 li a:hover{font:18px/30px Arial, Helvetica, sans-serif;color:#FCC21B; text-decoration:none;}


.newswarp h3{ width:890px; height:30px; margin:0; padding:0; font: bold 16px/30px Arial, Helvetica, sans-serif; color:#890005; text-align:left;}
.newswarp h5{ width:890px; margin:0; padding:0; font: bold 14px/30px Arial, Helvetica, sans-serif; color:#707172; text-align:left;}
.newswarp p{width:890px; margin:0; padding:0; font:12px/20px Arial, Helvetica, sans-serif; color:#88898b; text-align:left; margin-top:}

.aboutwarprn002{ 
width:900px; 
height:auto; 
margin-top:15px; 
float:right; 
margin-bottom: 30px;
}

.aboutwarprn002 img{ margin-right:10px;}

/*==================rn news====================*/
.productwarplm{ 
width:900px; 
height:50px; 
border-left: 3px solid #FCC21B;
font: bold 30px/50px Arial, Helvetica, sans-serif; 
color:#000; 
padding-left:10px;
float: right;
/*background:#3e5052; 
border-bottom: 3px solid #FCC21B;*/
}

#wrap02 {
	width:890px;
	margin:10px auto 0 auto;
	float: right;
	padding-left: 20px;
}
#wrap02 dl {
	width:900px;
	margin-bottom:15px;
	background:url(../images/dx.jpg) repeat-x bottom;
	padding-bottom:15px;
}

#wrap02 dl dt {
	float:right;
	width:900px;
	height:20px;
}

#wrap02 dl dt a {
	font: bold 16px/25px Arial, Helvetica, sans-serif; 
	color:#3e5052;
	text-decoration:none;
}

#wrap02 dl dt a:hover {
	text-decoration:underline;
}

#wrap02 dl dd.text02 {
	float:right;
	width:900px;
	font:16px/20px Verdana, Geneva, sans-serif; 
	color:#333;
	text-indent:2em;
}

#wrap02 dl dd.links02 {
	float:right;
	width:900px;
	margin-top:5px;
	text-align:left;
}

#wrap02 dl dd.links02 a {
	font:30px/25px Arial, Helvetica, sans-serif; 
	color:#3e5052;
	text-decoration:none;
}

#wrap02 dl dd.links02 a:hover {
	text-decoration:none;
	background:#3e5052  url(../images/dx.jpg) repeat-x bottom;
	color:#fff;
}

#wrap02 dl:after {
    content:"."; 
    display:block;
    height:0; 
    clear:both; 
    visibility:hidden;
} 
.newconwarp{
    width: 900px;
    height: auto;
    margin-top: -10px;
    font: 16px/20px Verdana, Geneva, sans-serif;
    color: #333;
    text-align: left;
}

.newconwarp h3{
width: 900px;
height: 0px;
font:bold 30px/0px Arial, Helvetica, sans-serif; 
color:#3e5052; 
text-align:center;
/*text-align:left; 
background: linear-gradient(to right, #fff, #F6F6F6, #fff);*/
}

.newconwarp h4{
width: 900px;
height: 25px;
font:14px/25px Verdana, Geneva, sans-serif; 
color:#576d6f; 
text-align:center;
margin-bottom:5px;
background: linear-gradient(to right, #fff, #F6F6F6, #fff);
/*text-align:left;
background: #E1E1E1; */
}


/* ====================header==================== */
.heeaerbg{ width:100%; height:190px; margin:auto; text-align: center;  background:url(../images/topbg.png); justify-content:center; }

.heeaerwarp{ width:1200px; height:auto; margin:auto; text-align: center;  background:url(../images/topbg.png); justify-content:center; }

/*====================top==================== */ 
.logo{ /* width:782px; */ height:128px; float:left; margin-left:0px; margin-top:0px;}
.topright{ width:315px; height:23px; float:right; margin-right:0px;_margin-right:15px; margin-top:50px;}
.topright ul li{ height:23px; float:left;}
#so{ background:url(../images/txtbg.png) no-repeat; border:0; height:25px; width:223px; padding-left:5px; margin-right:10px;display:block;}
#an{background:url(../images/an.png) no-repeat;border:0; height:25px; width:71px; padding:0; margin:0;display:block;}
/*=====================bot====================*/
.botbg{ width:100%; height:188px; margin:auto; text-align: center;  background:#FCC21B justify-content:center; }
.botwarp{ width:1200px; height:auto; font:16px/20px Arial, Helvetica, sans-serif; color:#d6d6d6; text-align:right; margin:0 auto; padding-right:5px;}

/* ====================nav==================== */
.navbg{ width:100%; height:30px; margin:auto; background:url(../images/navbg.jpg) repeat-x; float:left;}
.navleftwarp{ width:100%; height:30px; margin:auto; margin-top:30px; margin-bottom:0px;}
#navwarp li a{ font:14px/30px Arial, Helvetica, sans-serif; color:#000; text-decoration:none; padding:0 12px; text-align:center; display:block;}
#navwarp li a:hover{font:14px/30px Arial, Helvetica, sans-serif; color:#FFF; text-decoration:none; padding:0 12px; text-align:center; display:block;}
.navleftwarp ul li{float:left; display:inline; font:20px/43px Arial, Helvetica, sans-serif; }


.nav01 a{ width:117px; height:43px; background:url(../images/nav01.jpg) left 0 no-repeat; display:block; text-decoration:blink;}
.nav01 a:hover{ width:117px; height:43px;background:url(../images/nav01.jpg) left -43px no-repeat; display:block; text-decoration:blink;}

.nav02 a{ width:150px; height:43px; background:url(../images/nav02.jpg) left 0 no-repeat; display:block; text-decoration:blink;}
.nav02 a:hover{ width:150px; height:43px;background:url(../images/nav02.jpg) left -43px no-repeat; display:block; text-decoration:blink;}

.nav03 a{ width:149px; height:43px; background:url(../images/nav03.jpg) left 0 no-repeat; display:block; text-decoration:blink;}
.nav03 a:hover{ width:149px; height:43px;background:url(../images/nav03.jpg) left -43px no-repeat; display:block; text-decoration:blink;}

.nav04 a{ width:230px; height:43px; background:url(../images/nav04.jpg) left 0 no-repeat; display:block; text-decoration:blink;}
.nav04 a:hover{ width:230px; height:43px;background:url(../images/nav04.jpg) left -43px no-repeat; display:block; text-decoration:blink;}

.nav05 a{ width:139px; height:43px; background:url(../images/nav05.jpg) left 0 no-repeat; display:block; text-decoration:blink;}
.nav05 a:hover{ width:139px; height:43px;background:url(../images/nav05.jpg) left -43px no-repeat; display:block; text-decoration:blink;}

.nav06 a{ width:155px; height:43px; background:url(../images/nav06.jpg) left 0 no-repeat; display:block; text-decoration:blink;}
.nav06 a:hover{ width:155px; height:43px;background:url(../images/nav06.jpg) left -43px no-repeat; display:block; text-decoration:blink;}

.nav07 a{ width:157px; height:43px; background:url(../images/nav07.jpg) left 0 no-repeat; display:block; text-decoration:blink;}
.nav07 a:hover{ width:157px; height:43px;background:url(../images/nav07.jpg) left -43px no-repeat; display:block; text-decoration:blink;}
/* ====================nav==================== */

/*=============nav=====================*/

.navwarps{ height:60px; margin:0 auto; width:1200px; background:#000;}

.navwarps ul li{float:left; display:inline; border-right:1px solid #FCC21B; }

.navwarps ul li a{color:#fff; font:22px/60px Verdana, Geneva, sans-serif; padding:0 20px; text-decoration:none; display:block;}

.navwarps ul li a:hover{ background-color: rgba(252, 194, 27, 0.8); color:#fff; display:block; font:22px/60px Verdana, Geneva, sans-serif; padding:0 20px;text-decoration:none;}

.navdx{ background:#3e5052; margin-top:4px; height:1px; font-size:0; width:1200px; }


/* ====================bot==================== */
.bots{
clear:both; 
margin-left: 12px;
font: 15px/22px Arial, Helvetica, sans-serif;
}
ul{	margin:0; 	padding:0; 	list-style-type:none;}

body{ margin:0 auto; padding:0; background: #F4F4F4; /*background: url(../images/topbg0.png);*/}

/* *{ font:13px/20px Arial, Helvetica, sans-serif; color:#000000;}*/

*productdetails{ font:16px/50px Arial, Helvetica, sans-serif; color:#000000; }

.fl{ float:left;}
.fr{ float:right;}
/* ====================bannerh==================== */
.bannerh{ width:100%; height:auto; margin:auto; background-size: cover; margin-bottom: -25px;}
.bannerh img{ border:0; display:block; margin:auto; border-bottom: 3px solid #FCC21B;}
/* ====================banner==================== */
.banner{ width:100%; height:auto; margin:auto; background-size: cover; margin-bottom: 30px;}
.banner img{ border:0; display:block; margin:auto; border-bottom: 3px solid #FCC21B;}
/*================content===================*/
.contactwarp{ width:1200px; height:auto; margin:10px auto 0 auto; background: #FFF;/*background:#fff url(../images/tactenttop.png) no-repeat top;*/}
/*================content left===================*/
.contactwarpleft{ width:275px; height:auto; float:left; background: #e5e5e9; margin-bottom: 30px;}

.contactlpwarp{ 
width:260px; 
height:50px; 
background: #000; 
font: 26px/50px Helvetica; 
color:#FFF; 
text-align:left; 
padding-left:15px; 
margin-bottom:3px;
border-bottom: 3px solid #FCC21B;
}

.productorders{ width:260px; height:50px; font: 26px/50px Helvetica; color:#000; text-align:left; padding-left:15px; margin-bottom:3px;}

/*================fl=======================*/
#suckertree1{ margin:0 auto; padding: 0; list-style-type: none; width: 245px; margin-bottom: 30px; /* Width of Menu Items */	}
	
#suckertree1 li{ 
position: relative; height:50px; line-height:30px; 
background:url(../images/tb.gif) no-repeat 5px 20px;
/*background:url(../images/flbg.jpg) no-repeat top;*/
padding-bottom:2px;
 _ padding-bottom:0px;
 z-index:1000;
}
#suckertree1 li a{
	font:16px/50px Helvetica;
	padding-left:20px; color:#000; text-decoration:none; display: block;
	border-bottom: 1px solid #d6d6d6;
	background:url(../images/tb.gif) no-repeat 5px 20px;
	}	
#suckertree1 li a:hover{
	font:16px/50px Helvetica;
	padding-left:20px;color:#000; text-decoration:none; display: block;
	border-bottom: 1px solid #d6d6d6;
	background-color: rgba(238, 238, 242, 1); 
	}	
/*1st level sub menu style */
.suckertree2{
left:245px; /* Parent menu width - 1*/
position: absolute;
width:150px; /*sub menu width*/
top: 0;
display: none;
padding:5px;
background:#d6d6d6;
 z-index:1000;
}
.suckertree2 li{
position: relative;
height:30px;
line-height:30px;
 background:#fff;
}
.suckertree2 li a{
	font:13px/30px Helvetica;
	padding-left:38px;color:#000; text-decoration:none; display: block;
	}	
.suckertree2 li a:hover{
	font:13px/30px Helvetica;
	padding-left:38px;color:#ff6600; text-decoration:none; display: block;
	}	
/*All subsequent sub menu levels offset */
.suckertree3{ 
left:150px; /* Parent menu width - 1*/
position: absolute;
width:150px; /*sub menu width*/
top: 0;
display: none;
padding:5px;
background:#d6d6d6;
 z-index:1000;
}
.suckertree3 li{
position: relative;
height:30px;
line-height:30px;
 background:fff;
}
.suckertree3 li a{
	font:13px/30px Helvetica;
	padding-left:38px;color:#000; text-decoration:none; display: block;
	}	
.suckertree3 li a:hover{
	font:13px/30px Helvetica;
	padding-left:38px;color:#ff6600; text-decoration:none; display: block;
	}	
/* menu links style */
.suckerdiv ul li a:link{
padding-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; text-decoration:none; background:#FFF url(../images/tb022.gif) no-repeat -193px 2px;display: block;
}

.suckerdiv ul li a:visited{
padding-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; text-decoration:none; background:#FFF url(../images/tb022.gif) no-repeat -193px 2px;display: block;;
}

.suckerdiv ul li a:hover{
padding-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px;color:#fff; text-decoration:none;background:#f7b523 url(../images/tb022.gif) no-repeat 163px -18px;display: block;;
}



	
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

.homeNP{ 
width:auto;
height:auto; 
background:#FFF; 
/*margin-bottom: 30px;*/
}

.homeAB{ 
width:auto;
height:600px; 
background:#F4F4F4; 
/*margin-bottom: 30px;*/
}

/*================content right===================*/
.contactwarpright{ 
width:900px; 
height:auto; 
float:right;
margin-top:0px; 
margin-right:10px;
_margin-right:5px;
/*margin-bottom: 50px;*/
}

.aboutlmwarp01{
width:1200px;
height:60px; 
padding-left:30px; 
font:bold 30px/60px Helvetica; 
color:#000;
margin: 0 auto 0px auto;
text-align:center;
/*margin-bottom: 20px;
border-left: 6px solid #FCC21B; 
background:url(../images/tb0.gif) no-repeat 11px 5px;
background: #ececec;*/ 
}

.aboutlmwarp02{ height:50px; border-left: 3px solid #FCC21B; /*background:url(../images/tb0.gif) no-repeat 11px 5px;*/ padding-left:30px; font: 30px/50px Helvetica; color:#000;}
.aboutlmwarp02 span{font: bold 30px/50px Helvetica; color:#000;}
.aboutlmwarp{ width:900px; height:20px; /*background:#cecece url(../images/dx0.jpg) no-repeat bottom left;*/ font-size:0;}
.aboutwarp{ width:95%; height:auto;font:16px/30px Arial, Helvetica, sans-serif; color:#000; padding-left: 30px; margin-top:0px; margin-bottom:50px; text-align:left;}
.aboutwarp img{ margin-right:8px;}

/*==================about================*/

.aboutwarph{ width:1180px; height:600px; background: url(../images/ab-bg.png); padding:0 10px; display:block; margin:0 auto 10px auto; margin-bottom: 50px; /*background: #ececec;*/}

.aboutwarph h2{height: 160px; font: bold 30px/300px Arial, Helvetica, sans-serif; color:#333; padding-left:25px;}

.aboutwarph h2 span{ font:bold 16px/25px Arial, Helvetica, sans-serif; color:#f79300;}

.aboutwarph p{width: 600px; height: 180px; font:16px/30px Verdana, Geneva, sans-serif; color:#333; text-align:left; text-indent:2em; padding-left: 25px;}

.aboutwarph h3 a{ font:16px/25px Verdana, Geneva, sans-serif; color:#3e5052; text-align:left; background:url(../images/dx.jpg) repeat-x bottom; text-decoration:underline;}

.aboutwarph h3 a:hover{font:16px/25px Verdana, Geneva, sans-serif; color:#fff; text-decoration:underline; background:#3e5052  url(../images/dx.jpg) repeat-x bottom;}

.aboutwarph02{ width:700px; height: auto; margin:0 auto 10px auto; background:#ececec; padding:10px 10px;}

.aboutwarph02 h2{ font: bold 16px/25px Arial, Helvetica, sans-serif; color:#282c2f;}

.aboutwarph02 h2 span{ font:bold 16px/25px Arial, Helvetica, sans-serif; color:#1758a8;}

.aboutwarph02 p{ font:11px/18px Verdana, Geneva, sans-serif; color:#282c2f; text-align:left; text-indent:2em;}

.ABorder{ 
width:80px; 
height:25px; 
margin-top:15px;
padding-left: 380px;
}

.ABorder a{
width:150px; 
height:50px; 
background:#212121; 
border:1px solid #FCC21B; 
padding:1px; 
font:bold 16px/50px Arial, Helvetica, sans-serif; 
color:#fff; 
text-align:center; 
display:block; 
text-decoration:none;
}

.ABorder a:hover{
width:150px; 
height:50px; 
background-color: rgba(252, 194, 27, 1); 
border:1px solid #d6d6d6; 
padding:1px; 
font:bold 16px/50px Arial, Helvetica, sans-serif; 
color:#000; 
text-align:center; 
display:block; 
text-decoration:none;
}

/*================contact us====================*/
.contactcontent{ width:225px;; height:auto;  padding:25px; background:url(../images/contact.png) no-repeat;}
.contactcontent ul li{font:16px/30px Arial, Helvetica, sans-serif; color:#000;}
.contactcontent ul li img{ margin-top:5px; border:0; display:block;}
.like{ float:left; margin-bottom:5px;}
/*================contact us====================*/
/*================home products====================*/
.cpworph{ width:1200px; margin:10px auto 0 auto;}
.cpworph li{ width:300px; height:270px; float:left; margin-left:0px; margin-bottom:20px; display:inline;}
.cpworph li a {
	display:block;
}
.cpworph li a img {
	width:280px; height:212px;
	border:1px solid #d6d6d6;
	}
.cpworph li span a {
	width:282px;
	height:50px;
	background:#cecece;
	text-align:center;
	text-overflow:ellipsis; 
	overflow: hidden;
	font:bold 16px/50px arial, helvetica, sans-serif; color:#000; 
	text-decoration:none;
}
.cpworph li span a:hover{
	width:282px;
	height:50px;
	text-align:center;
	text-overflow:ellipsis; 
	overflow: hidden;
	font:bold 16px/50px arial, helvetica, sans-serif; color:#FCC21B;
	text-decoration:none;
}

/*================products====================*/
.cpworp{ width:auto; margin:10px auto 0 auto;}
.cpworp li{ width:300px; height:262px; float:left; margin-left:0px; margin-bottom:20px; display:inline;}
.cpworp li a {
	display:block;
}
.cpworp li a img {
	width:280px; height:212px;
	border:1px solid #d6d6d6;
	}
.cpworp li span a {
	width:282px;
	height:50px;
	background:#cecece;
	text-align:center;
	text-overflow:ellipsis; 
	overflow: hidden;
	font:bold 16px/50px arial, helvetica, sans-serif; color:#000; 
	text-decoration:none;
}
.cpworp li span a:hover{
	width:282px;
	height:50px;
	text-align:center;
	text-overflow:ellipsis; 
	overflow: hidden;
	font:bold 16px/50px arial, helvetica, sans-serif; color:#FCC21B;
	text-decoration:none;
}

.aboutwarp02{ height:auto;font:16px/25px Arial, Helvetica, sans-serif; color:#606060; margin-top:5px; text-align:left; float: right; 
/* background: #ececec; */
}

.productleft{ width:600px; height:auto;float:left; margin-bottom:15px;}
.productleft img{ width:600px; height:auto; border:1px solid #d6d6d6;}
.productright{ width:280px; height:auto; float:right;margin-bottom:15px; padding-left: 20px;}
.productright ul li{ width:250px; height:auto; border-bottom:1px solid #d6d6d6; font:16px/40px Arial, Helvetica, sans-serif; color:#606060; padding-left: 20px;}

.productorder{ 
width:80px; 
height:25px; 
margin-top:15px;
padding-left: 20px;
}

.productorder a{
width:150px; 
height:50px; 
background:#212121; 
border:1px solid #FCC21B; 
padding:1px; 
font:bold 16px/50px Arial, Helvetica, sans-serif; 
color:#fff; 
text-align:center; 
display:block; 
text-decoration:none;
}

.productorder a:hover{
width:150px; 
height:50px; 
background-color: rgba(252, 194, 27, 1); 
border:1px solid #d6d6d6; 
padding:1px; 
font:bold 16px/50px Arial, Helvetica, sans-serif; 
color:#000; 
text-align:center; 
display:block; 
text-decoration:none;
}

.detailspigsome{ width:auto; height:auto; font:30px/50px Arial, Helvetica, sans-serif; color:#000; /*background:#212121; border-top:1px solid #d6d6d6;*/ border-bottom:1px solid #d6d6d6; padding-bottom:14px; margin:15px auto;}
.detailspigsome li{ width:100px; height:77px; margin-left:10px;_margin-left:7px; margin-top:10px; float:left; display:inline;}
.detailspigsome li img{ width:100px; height:77px; background:#fff; border:2px solid #323232; cursor:hand;}
/*================products====================*/
.contentbot{ width:100%; height:280px; background-color:#FCC21B; margin:0 auto 0px auto;}
/*================content===================*/

/*==================foot=====================*/ 
.footwarp1{ width:250px; height:250; margin:auto; font:15px/20px Arial, Helvetica, sans-serif; color:#000; text-align:right; margin:0 auto; padding-right:5px;}
.footwarp2{ width:780px; height:250; margin:auto;  font:13px/20px Arial, Helvetica, sans-serif; color:#000; text-align:right; margin:0 auto; padding-right:5px;}
.footwarp3{ width:200px; height:250; margin:auto;  font:15px/20px Arial, Helvetica, sans-serif; color:#000; text-align:right; margin:0 auto; padding-right:5px;}


.footwarp a{ font:14px/20px Arial, Helvetica, sans-serif; color:#000; text-decoration:none;}
.footwarp a:hover{ font:14px/20px Arial, Helvetica, sans-serif; color:#ff6600; text-decoration:none;}
/*==================foot=====================*/


/*--------------fenye----------------------------------------*/
.cpfy{ text-align:center; margin-bottom:10px;}
.cpfy ul{ margin:0 auto; padding:0;}
.cpfy ul li{ list-style:none; float:left; height:20px;}
.cpfy a:link,.cpfy a:visited{  font:12px/20px Arial, Helvetica, sans-serif; color:#000; text-decoration:none;}
.cpfy a:hover,.cpfy a:active{ font:12px/20px Arial, Helvetica, sans-serif;  color:#0277D7; text-decoration:none;}

#fenye{ 
margin:0 auto;  
padding-bottom:50px; 
padding-top:5px;
}

#fenye li{ 
width:26px; 
height:28px; 
text-align:center; 
float:left; 
border:1px solid #666; 
padding:2px; 
background-color:#FFF; 
list-style:none; 
margin:0 5px;  
color:#FFF; 
font-size:18px; 
font-weight:bold;
}

#fenye li.nowy{ 
width:26px; 
height:28px; 
float:left; 
border:1px solid #A7BCCD; 
padding:2px; 
background-color:#FCC21B; 
list-style:none; 
margin-left:5px; 
margin-right:5px; 
text-align:center; 
color:#000; 
font-size:18px; 
font-weight:bold;
}

#fenye li a,#fenye li a:visited{ 
color:#000; 
text-decoration:none; 
font-size:18px; 
line-height:28px;
}

#fenye li.nowy a,#fenye li.nowy a:visited{ 
color:#ffffff; 
text-decoration:none;  
font-size:16px;
line-height:28px; 
}

#fenye li.next{ 
width:auto; 
padding-left:2px; 
padding-right:2px;
}

.homek{ 
width:auto; 
height:30px; 
background: #FFF;
}

.homeD{ 
width:auto; 
height:30px; 
background: #F4F4F4;
}
/*--------------fenye----------------------------------------*/


/*首先，我们需要给需要下拉的区域设置一个固定的高度和宽度*/
.right-pull{
width: 200px;
height: 200px;
}
/*接下来，我们需要将overflow属性设置为hidden，以隐藏下拉的内容*/
.right-pull{
overflow: hidden;
}
/*然后，我们需要将下拉内容的位置设置为绝对定位，然后把right属性设置为-200px，使其隐藏在页面右侧*/
p.pull-down{
position: absolute;
right: -200px;
}
/*现在，我们需要给下拉内容添加一些动画效果，可以通过CSS的transition属性来实现*/
p.pull-down{
transition: right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/*最后，我们需要通过JavaScript来实现当鼠标移到需要下拉的区域时，再将下拉内容向右移动200px*/
.right-pull:hover p.pull-down{
right: 0;
}