<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.clear { clear: both }
.liyou { background: url(../images/liyou_bg.jpg) no-repeat center top; height: 700px; padding-top: 180px; }
.wrapper { width: 1200px; margin: 0 auto; }
.stage { list-style: none; padding: 0; }
.scene h1 { font-weight:bold}
/*************************************
Build the scene and rotate on hover
**************************************/

.scene { width: 20%; height: 400px; float: left; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; }
.movie { height: 400px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-130px); -moz-transform: translateZ(-130px); transform: translateZ(-130px); -webkit-transition: -webkit-transform 350ms; -moz-transition: -moz-transform 350ms; transition: transform 350ms; }
.movie .info { box-shadow: 0 10px 50px -10px rgba(0,0,0,0.3); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); }
.reason1 { -webkit-transform: rotateX(15deg) translateZ(0px) scale3D(0.9, 0.9, 0.9); -moz-transform: rotateX(15deg) translateZ(0px) scale3D(0.9, 0.9, 0.9); transform: rotateY(15deg) translateZ(0px) scale3D(0.9, 0.9, 0.9); }
.reason2 { -webkit-transform: rotateY(6deg) translateZ(20px) scale3D(0.8, 0.8, 0.8); -moz-transform: rotateY(6deg) translateZ(20px) scale3D(0.8, 0.8, 0.8); transform: rotateY(6deg) translateZ(20px) scale3D(0.8, 0.8, 0.8); }
.reason3 { -webkit-transform: rotateY(-0deg) translateZ(-50px) scale3D(0.9, 0.9, 0.9); -moz-transform: rotateY(-0deg) translateZ(-50px) scale3D(0.9, 0.9, 0.9); transform: rotateY(-0deg) translateZ(-50px) scale3D(0.9, 0.9, 0.9); }
.reason4 { -webkit-transform: rotateY(-6deg) translateZ(20px) scale3D(0.8, 0.8, 0.8); -moz-transform: rotateY(-6deg) translateZ(20px) scale3D(0.8, 0.8, 0.8); transform: rotateY(-6deg) translateZ(20px) scale3D(0.8, 0.8, 0.8); }
.reason5 { -webkit-transform: rotateY(-15deg) translateZ(20px) scale3D(0.9, 0.9, 0.9); -moz-transform: rotateY(-15deg) translateZ(20px) scale3D(0.9, 0.9, 0.9); transform: rotateY(-15deg) translateZ(20px) scale3D(0.9, 0.9, 0.9); }
.movie:hover { -webkit-transform: rotateY(0deg) translateZ(0) scale3d(1, 1, 1); -moz-transform: rotateY(0deg) translateZ(0) scale3d(1, 1, 1); transform: rotateY(0deg) translateZ(0) scale3d(1, 1, 1); }
/*************************************
Transform and style the two planes
**************************************/

.movie .poster, .movie .info { position: absolute; width: 100%; height: 400px; }
/*************************************
Movie information
**************************************/

.poster header, .info header { color: #fff; padding: 7px 10px; font-weight: bold; height: 195px; background: #636363 }
.poster header h1, .info header h1 { margin: 0 0 2px; font-size: 1.4em; color: #fff; }
.poster .year, header .year { padding: 0px 3px; color: #fff; font-weight: bold; font-size: 1.4em; }
.info header p { padding: 1.8em 1.1em; color: #fff; font-weight: 100; text-align: center; font-size: 1.1m; }
.info header p em { padding-top: 30px; /*font-size: 1.6em; line-height: 1.6em; */font-style: normal; }
/*************************************
Posters and still images
**************************************/

.scene:nth-child(1) .info { background: url(../images/pic.jpg) bottom; border-left: 5px solid #575757;}
.scene:nth-child(2) .info { background: url(../images/pic2.jpg) bottom; border-left: 3px solid #575757; }
.scene:nth-child(3) .info { background: url(../images/pic3.jpg) bottom; border-left: 1px solid #999;border-right: 1px solid #999; }
.scene:nth-child(4) .info { background: url(../images/pic4.jpg) bottom; border-right: 4px solid #575757; }
.scene:nth-child(5) .info { background: url(../images/pic5.jpg) bottom; border-right: 6px solid #575757; }

.movie:hover .info{border-left:0px solid #999;border-right:0px solid #999; transition:all 0.4s}
/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .info { position: relative; }

/*************************************
Media Queries
**************************************/
.liyou_tit { display:none; text-align:center; width:100%;}
.liyou_tit img{ width:95%}
@media screen and (max-width: 60.75em) {
.scene { float: none; margin: 30px auto 60px; }
}
@media screen and (max-width: 1280px) {
.scene { float: left; margin:0; }
.wrapper{ width:100%}
.movie.reason1,.movie.reason2,.movie.reason3,.movie.reason4,.movie.reason5 {-webkit-transform:none;-moz-transform:none;transform:none}
.poster .year, header .year { text-align:center; font-size:1.2em}
}
@media screen and (max-width: 1124px) {
.liyou{ height:auto}
.scene {width: 100%;   height: 190px;}
.movie { height:160px; background-color: #666;}
.movie .poster, .movie .info {  height: 180px;; -webkit-box-reflect:none; -webkit-transform-origin:none; transform-origin:none}
.poster header, .info header{ text-align:center; height:auto; background:none;
}
.scene:nth-child(1) .info,.scene:nth-child(2) .info,.scene:nth-child(3) .info,.scene:nth-child(4) .info,.scene:nth-child(5) .info {   background-repeat: no-repeat;
  background-color: #666;
  background-position: left;}
.scene:nth-child(2) .info,.scene:nth-child(4) .info { background-position:right}

.scene:nth-child(1) .info header,.scene:nth-child(3) .info header,.scene:nth-child(5) .info header { text-align:left; padding-left:270px;}
.scene:nth-child(1) .info header p,.scene:nth-child(3) .info header p,.scene:nth-child(5) .info header p{ text-align:left;}
.scene:nth-child(2) .info header,.scene:nth-child(4) .info header { text-align:right; padding-right:270px;}
.scene:nth-child(2) .info header p,.scene:nth-child(4) .info header p  { text-align:right;}

li.scene.fadeInDown.wow.animated {
  animation-delay: 0;
  -webkit-animation-delay: 0;
  animation-name: inherit;
  -webkit-animation-name: inherit;
}
}
@media screen and (max-width: 586px) {
.scene {
  width: 90%;
  height: 190px;
  margin-left: 5%;
}
	.scene:nth-child(1) .info,.scene:nth-child(2) .info,.scene:nth-child(3) .info,.scene:nth-child(4) .info,.scene:nth-child(5) .info {  background-position: center;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover; border:none; border-left:3px solid #000}
	.scene:nth-child(1) .info header,.scene:nth-child(3) .info header,.scene:nth-child(5) .info header { text-align:left; padding: 0 0 0 5%;}
  .scene:nth-child(1) .info header p,.scene:nth-child(3) .info header p,.scene:nth-child(5) .info header p{ text-align:left;}
  .scene:nth-child(2) .info header,.scene:nth-child(4) .info header { text-align:left; padding: 0 0 0 5%;}
  .scene:nth-child(2) .info header p,.scene:nth-child(4) .info header p  { text-align:left;}
	.info header{ 
  height: 180px;
	background-color:#666;/* IE6鍜岄儴鍒咺E7鍐呮牳鐨勬祻瑙堝櫒(濡俀Q娴忚鍣�)涓嬮鑹茶瑕嗙洊 */
  background-color:rgba(0,0,0,0.6); /* IE6鍜岄儴鍒咺E7鍐呮牳鐨勬祻瑙堝櫒(濡俀Q娴忚鍣�)浼氳鎳傦紝浣嗚В鏋愪负閫忔槑 */
	}
header .year {
  /* margin-top: 22px; */
  height: 40px;
  line-height: 40px;
  display: block;
  text-align: left;
}
.liyou{ background:#f9f9f9; padding:20px}
.liyou_tit{ display:block}
}


</pre></body></html>