

/* å‘å±•æŠ¥å‘Š */

.shadows{ background: url(shadow.png) no-repeat; width: 120%; height: 336px; position: absolute; top: 233px; z-index:0; left: -60px;  }
.book{ position: relative; height: 500px;    width: 82%;
    margin: 169px auto 0 auto; }
.book a{ display: block; position: absolute;   }
.h1{ z-index: 1; left: 21px; top: 38px; }
.h1 img{ height: 289px; width: auto; }
.h2{ z-index: 2; left: 75px; top: 28px; }
.h2 img{ height: 312px; width: auto; }
.h3{ z-index: 3; left: 133px; top: 17px; }
.h3 img{ height: 337px; width: auto;  }
.h4{ z-index: 4; left: 196px; top: 5px; }
.h4 img{ height: 364px; width: auto; }
.h5{ z-index: 5; left: 264px; top: -7px; }
.h5 img{ height: 393px; width: auto; }
.h6{ z-index: 6; left: 338px; top: -21px; }
.h6 img{ height: 425px; width: auto; }
.h7{ z-index: 7; left: 417px; top: -35px; }
.h7 img{ height: 459px; width: auto; }
.book2{ overflow: hidden; display: none;  }
.book2 ul{ text-align: center; margin: 0 auto; width: 900px; padding: 0 40px;}
.book2 ul li{ float: left; display: inline-block; margin-bottom: 20px; margin-right: 28px; width: 30%;    }
.book2 ul li img{ width: 100%;  }

/* åŠ¨ç”»è®¾ç½® */

.h1 img{
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}
.h2 img{
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 2s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}
.h3 img{
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}
.h4 img{
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}
.h5 img{
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}
.h6 img{
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}
.h7 img{
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
}

.h1
{
transition: left 1s, top 1s, transform 1s;
-moz-transition: left 1s, top 1s, -moz-transform 1s;
-webkit-transition: left 1s, top 1s, -webkit-transform 1s;
-o-transition: left 1s, top 1s,-o-transform 1s;
}
.h2
{
transition: left 1s, top 1s, transform 1s;
-moz-transition: left 1s, top 1s, -moz-transform 1s;
-webkit-transition: left 1s, top 1s, -webkit-transform 1s;
-o-transition: left 1s, top 1s,-o-transform 1s;
}
.h3
{
transition: left 1s, top 1s, transform 1s;
-moz-transition: left 1s, top 1s, -moz-transform 1s;
-webkit-transition: left 1s, top 1s, -webkit-transform 1s;
-o-transition: left 1s, top 1s,-o-transform 1s;
}
.h4
{
transition: left 1s, top 1s, transform 1s;
-moz-transition: left 1s, top 1s, -moz-transform 1s;
-webkit-transition: left 1s, top 1s, -webkit-transform 1s;
-o-transition: left 1s, top 1s,-o-transform 1s;
}
.h5
{
transition: left 1s, top 1s, transform 1s;
-moz-transition: left 1s, top 1s, -moz-transform 1s;
-webkit-transition: left 1s, top 1s, -webkit-transform 1s;
-o-transition: left 1s, top 1s,-o-transform 1s;
}
.h6
{
transition: left 1s, top 1s, transform 1s;
-moz-transition: left 1s, top 1s, -moz-transform 1s;
-webkit-transition: left 1s, top 1s, -webkit-transform 1s;
-o-transition: left 1s, top 1s,-o-transform 1s;
}
.h7
{
transition: left 1s, top 1s, transform 1s;
-moz-transition: left 1s, top 1s, -moz-transform 1s;
-webkit-transition: left 1s, top 1s, -webkit-transform 1s;
-o-transition: left 1s, top 1s,-o-transform 1s;
}

.h1:hover{
left: -120px; top: 5px;

} 
.h2:hover{
left: -110px; top: -14px;

}
.h3:hover{
left: -115px; top: -39px;

} 
.h4:hover{
left: -100px; top: -61px;

}
.h5:hover{
left: 10px; top: -67px;

} 
.h6:hover{
left: 200px; top: -95px;
}
.h7:hover{
left: 240px; top: -95px;
}  

.h1:hover img{

 width: auto;
 height: 360px; 
}
.h2:hover img{

 width: auto;
 height: 400px; 
}
.h3:hover img{

 width: auto;
 height: 455px; 
}
.h4:hover img{

 width: auto;
 height: 505px; 
}
.h5:hover img{

 width: auto;
 height: 520px; 
}

.h6:hover img{

 width: auto;
 height: 540px; 
}
.h7:hover img{

 width: auto;
 height: 520px; 
}
/* ç‰ˆæƒå£°æ˜Ž */
.r_bl_con.pgnt p{ font-size: 14px; padding-bottom: 10px; line-height: 24px;  }
.list-w-bg{ padding: 15px; background: #f2efeb; list-style: none;  }
.list-w-bg li{ list-style: none; }
.xll_main .r_main_box .r_bl_box .r_bl_con ul.list-w-bg li{ list-style: none; }


.col3-list{ width: 90%; margin: 40px auto; text-align: center; margin-top: 60px;  }
.col3-list li{ border: 1px solid #e5e5e5; width: 20%; float: left; margin-bottom: 20px; margin-left: 33px; display: inline-block; background:#fff;   }
.col3-list li img{ width: 90%;margin: 5%; }
.col3-list li p{ margin-bottom: 20px;  }


@media screen and (max-width:1366px) {

/* å‘å±•æŠ¥å‘Šé˜´å½± */
.shadows{ background-size:98%; left: -50px;  }


	
}

@media screen and (max-width:1280px) {

/* å‘å±•æŠ¥å‘Š */
.book{ width: 88%; }

.h1{ z-index: 1; left: 115px; top: 38px; }
.h1 img{ height: 189px; width: auto; }
.h2{ z-index: 2; left: 151px; top: 31px; }
.h2 img{ height: 205px; width: auto; }
.h3{ z-index: 3; left: 191px; top: 23px; }
.h3 img{ height: 223px; width: auto;  }
.h4{ z-index: 4; left: 235px; top: 14px; }
.h4 img{ height: 243px; width: auto; }
.h5{ z-index: 5; left: 284px; top: 5px; }
.h5 img{ height: 264px; width: auto; }
.h6{ z-index: 6; left: 338px; top: -5px; }
.h6 img{ height: 287px; width: auto; }
.h7{ z-index: 7;     left: 394px;
    top: -15px; }
.h7 img{ height: 311px; width: auto; }
.h1:hover{
left: -40px; top: 3px;
} 
.h2:hover{
left: -10px; top: -6px;
}
.h3:hover{
left: 20px; top: -19px;
} 
.h4:hover{
left: 40px; top: -32px;
}
.h5:hover{
left: 65px; top: -45px;
} 
.h6:hover{
left: 220px; top: -55px;
} 
.h7:hover{
left: 240px; top: -55px;
} 
.h1:hover img{
 width: auto;
 height: 265px; 
}
.h2:hover img{
 width: auto;
 height: 285px; 
}
.h3:hover img{
 width: auto;
 height: 309px; 
}
.h4:hover img{
 width: auto;
 height: 341px; 
}
.h5:hover img{

 width: auto;
 height: 372px; 
}
.h6:hover img{

 width: auto;
 height: 378px; 
}
.h7:hover img{

 width: auto;
 height: 384px; 
}

/* å‘å±•æŠ¥å‘Šé˜´å½± */
.shadows{ background-size:66%; left: 48px;top: 170px;  }

/* ä¹¦ç±æ¦‚è§ˆ */
.col3-list li{ margin-left: 27px;  }

}
@media screen and (max-width:1200px) {

.book{ width: 88%; }
/* å‘å±•æŠ¥å‘Šé˜´å½± */
.shadows{ display: none; }
.book{ display: none; }
.book2{ display: block;}
.book2 ul{ text-align: center; margin: 0 auto; width:90%; padding:40px;}
.book2 ul li{ margin-bottom:10px; margin-left:10px; margin-right: 5px;    }

/* ä¹¦ç±æ¦‚è§ˆ */
.col3-list li{ margin-left: 24px;  }

}
@media screen and (max-width:1100px) {

.book2{ width: 100%;  }.book2 ul{ text-align: center;  padding:40px; width: 100%; padding-left:0px; padding-right: 0px; }
.book2 ul li{  float: none; margin: 0px;  }
.col3-list li{ margin-left: 30px;  }
}

@media screen and (max-width:980px) {

		/* è·Ÿéšå¯¼èˆªå­é¡µ */
.xll_fixed{ position: fixed; width: 90%;}
.search_input2{ width: 150px;  }
.search_in_fol{ margin-left: 30px; display: none;  }
.nav-fol li a{ padding: 5px 13px;  }

.book2 ul{ padding-left:0px; padding-right: 0px;   }.book2 ul li{ float: none;  }
.book2 ul li{ width: 44%;  }
	.col3-list li{ margin-left: 0; margin: 1%; float: none;  }
	}
@media screen and (max-width:850px) {
.col3-list li{ margin-left: 0; margin: 1%; width: 35%; float: none;  }

}
