@charset "utf-8";
/* CSS Document */
*, *:after, *:before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body { font-family:Arial,"Microsoft Yahei",'Hiragino Sans GB',sans-serif; background-repeat: no-repeat; margin: 0;}
body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,input,button{margin:0;padding:0;border:0;}
body { background:#dbdbdb;}
p,form,table,tr,td {margin:0px;padding:0px;}
select,input,img,select{vertical-align:middle;outline: none;}
ul,li,ol{list-style-type:none;margin:0;padding:0;}
img {border:0px;vertical-align:bottom;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
small{font-size:12px;}
a{color:#454545; line-height:22px; text-decoration:none;outline: none;}
/*a:link{ text-decoration: none;}*/
/*a:visited{ text-decoration: none;}*/
a:hover{color:#f00; text-decoration: underline;}
a[data-gal] {display: block;height: 100%;float: left;position: relative;}
a[data-gal] img {width: 100%;height: 210px;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
 
.wrap { width:1200px; margin:0 auto; }
.cl { clear:both;}
.fl { float:left;}
.fr { float:right;}
.tr { text-align: right; }
.tl { text-align: left; }
.center { text-align: center; }

.fy { text-align:right;}
.fy2 { border-top:1px solid #ccc;}

.m10 { margin:10px;}
.m15 { margin:15px;}
.line { height:5px; background:#cb0003; overflow:hidden; margin-bottom:5px}
   
.mt15{ margin-top:15px;}
.pt10 { padding-top:10px;}
.mr10 { margin-right:10px;}
.mr15 { margin:0px 15px;}
.tc { text-align:center;}

#right-float-box{
    left: 5px !important;
    width: 160px;
}
.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:100%; 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
**************************************/

.owl-item:nth-child(1) .scene .info { background: url(../images/pic.jpg) bottom; border-left: 5px solid #575757;}
.owl-item:nth-child(2) .scene .info { background: url(../images/pic2.jpg) bottom; border-left: 3px solid #575757; }
.owl-item:nth-child(3) .scene .info { background: url(../images/pic3.jpg) bottom; border-left: 1px solid #999;border-right: 1px solid #999; }
.owl-item:nth-child(4) .scene .info { background: url(../images/pic4.jpg) bottom; border-right: 4px solid #575757; }
.owl-item:nth-child(5) .scene .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和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
  background-color:rgba(0,0,0,0.6); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
	}
header .year {
  /* margin-top: 22px; */
  height: 40px;
  line-height: 40px;
  display: block;
  text-align: left;
}
.liyou{ background:#f9f9f9; padding:20px}
.liyou_tit{ display:block}
}

.zhbj{background-color: #f6f6f6;padding: 20px;width: 910px;margin: 0 auto;}
.fm1{font-size: 16px;}
.fm1 p{padding: 5px 0;}
.fm1 label{margin-right: 10px;}
.fm1 p span{display: inline-flex;align-items: flex-end;margin-right: 10px;}
.fm1 p span input{zoom:1.5;}
.fm1 .ipt1{padding: 2px 10px;background: #fff;border: 1px solid #ccc;border-radius: 5px;line-height: 30px;}
.fm1 p button{background: #127a59;color: #fff;border: 0 none;padding: 7px 35px;border-radius: 5px;cursor: pointer;outline: none;font-size: 18px;}

@media screen and (max-width: 780px) {
  .zhbj{width: auto;padding: 10px;}
  .fm1 p{margin: 5px 0;}
  .fm1 label{display: inline-block;width: 30%;text-align: center;float: left;}
  .fm1 p span{width: 15%;display: inline-block;margin-right: 0;}
  a[data-gal] img{height: 140px;}
}