.content_box{  position: relative; border: 10px solid #d4d4d4; height: 439px; overflow: hidden;}
.content_box li{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; list-style: none; cursor: pointer; overflow: hidden;}
.content_box li img{ display: block; width: 100%; height: auto;margin: 0; }

.content_box li{ z-index: 0; opacity: 0;filter: alpha(opacity=0);}
.content_box .active{ z-index: 20; filter: alpha(opacity=100); opacity: 1; filter: alpha(opacity=100);}
.content_box .nActive{ z-index: 19;filter: alpha(opacity=100); opacity: 1;}
.content_btn{height: 24px; overflow: hidden; background-color: #f7f7f7; padding: 8px 10px;}
.box{ width: 774px; *width: ;height: ;}
.stop_btn, .change_btn span{ background-image: url(images/carousel.png); }
.content_box{  position: relative; border: 10px solid #d4d4d4; height: 439px; overflow: hidden;}
.content_box li{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; list-style: none; cursor: pointer; overflow: hidden;}
.content_box li img{ display: block; width: 100%; height: auto;margin: 0; }
.content_btn{height: 40px; overflow: hidden; background-color: #f7f7f7; padding: 8px 10px;}
.stop_btn{ width: 38px; float: left; height: 24px; cursor: pointer; margin-right: 15px; background-position: -44px -34px;}
.stop_btn:hover{ background-position: -44px 0; }
.play_schedule{ width: 152px; float: left;}
.schedule_txt{ font-size: 12px; height: 12px; line-height: 12px;color: #666;}
.schedule_txt .fl{ float: left; }
.schedule_txt .fr{ float: right; }
.schedule_txt span i{ font-size: 10px; padding: 0 5px; }
.schedule_bar{ overflow: hidden; width: 100%; height: 6px; background-color: #d0d0d0; margin-top: 6px; position: relative;}
.schedule_bar span{ display: block; width: 10%; height: 100%; background-color: #a1a1a1; }
.change_btn{ float: right; width: 126px;}
.change_btn span{ display: block; width: 53px; height: 24px; float: left; cursor: pointer;}
.change_btn .prev{ margin-right: 15px; background-position: -93px -30px;}
.change_btn .prev:hover{ background-position: -93px 0; }
.change_btn .next{ background-position: -150px -30px; float: right; }
.change_btn .next:hover{ background-position: -150px 0; }
.box .stop_iocn{ background-position: 0 -34px;}
.box .stop_iocn:hover{background-position: 0 0;}





/* 4 classes: navInLeft, navInRight, navOutLeft, navOutRight */

/*****************************************/
/*1 Soft Scale */
/*****************************************/

.fxSoftScale .navOutNext {
	-webkit-animation: scaleUp 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: scaleUp 0.5s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxSoftScale .navInNext {
	-webkit-animation: scaleDownUp 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: scaleDownUp 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxSoftScale .navOutPrev {
	-webkit-animation: scaleDown 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: scaleDown 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxSoftScale .navInPrev {
	-webkit-animation: scaleUpDown 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: scaleUpDown 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes scaleUp {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: scale(1.2);
		opacity: 0;
	}
}

@keyframes scaleUp {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
		opacity: 0;
	}
}

@-webkit-keyframes scaleDownUp {
	from {
		opacity: 0;
		-webkit-transform: scale(0.9);
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@keyframes scaleDownUp {
	from {
		opacity: 0;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@-webkit-keyframes scaleDown {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		opacity: 0;
		-webkit-transform: scale(0.9);
	}
}

@keyframes scaleDown {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		opacity: 0;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}

@-webkit-keyframes scaleUpDown {
	from {
		-webkit-transform: scale(1.2);
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@keyframes scaleUpDown {
	from {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

/*****************************************/
/*2 Press away */
/*****************************************/

.fxPressAway .navOutNext {
	-webkit-animation: slideOutScaleRight 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: slideOutScaleRight 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxPressAway .navInNext {
	opacity: 1;
	-webkit-animation: slideInFromLeft 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: slideInFromLeft 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxPressAway .navOutPrev {
	-webkit-animation: slideOutScaleLeft 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: slideOutScaleLeft 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

.fxPressAway .navInPrev {
	opacity: 1;
	-webkit-animation: slideInFromRight 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
	animation: slideInFromRight 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

@-webkit-keyframes slideOutScaleRight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateX(100%) scale(0.9);
		opacity: 0;
	}
}

@keyframes slideOutScaleRight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateX(100%) scale(0.9);
		transform: translateX(100%) scale(0.9);
		opacity: 0;
	}
}

@-webkit-keyframes slideInFromLeft {
	from {
		-webkit-transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0);
	}
}

@keyframes slideInFromLeft {
	from {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes slideOutScaleLeft {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateX(-100%) scale(0.9);
		opacity: 0;
	}
}

@keyframes slideOutScaleLeft {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateX(-100%) scale(0.9);
		transform: translateX(-100%) scale(0.9);
		opacity: 0;
	}
}

@-webkit-keyframes slideInFromRight {
	from {
		-webkit-transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
	}
}

@keyframes slideInFromRight {
	from {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	to {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}


/*****************************************/
/*3 Swipe */
/*****************************************/

.fxSwipe .navOutNext {
	-webkit-animation: decreaseHeight 0.8s forwards ease-in-out;
	animation: decreaseHeight 0.8s forwards ease-in-out;
}

.fxSwipe .navInNext {
	-webkit-animation: show 0.8s forwards ease-in-out;
	animation: show 0.8s forwards ease-in-out;
}

.fxSwipe .navOutPrev {
	-webkit-animation: hide 0.8s forwards ease-in-out;
	animation: hide 0.8s forwards ease-in-out;
}

.fxSwipe .navInPrev {
	z-index: 200;
	opacity: 1;
	-webkit-animation: increaseHeight 0.8s forwards ease-in-out;
	animation: increaseHeight 0.8s forwards ease-in-out;
}

@-webkit-keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		height: 0;
	}
}

@keyframes decreaseHeight {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		height: 0;
	}
}

@-webkit-keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

@keyframes show {
	0% {
		opacity: 0;
	}
	1%,100% {
		opacity: 1;
	}
}

@-webkit-keyframes hide {
	0%,99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes hide {
	0%,99% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes increaseHeight {
	from {
		height: 0;
	}
	to {
		height: 100%;
	}
}

@keyframes increaseHeight {
	from {
		height: 0;
	}
	to {
		height: 100%;
	}
}

/*****************************************/
/*3 Push reveal */
/*****************************************/

.fxPushReveal .navOutNext {
	opacity: 1;
	-webkit-animation: slideOutBottom 0.7s forwards ease-in-out;
	animation: slideOutBottom 0.7s forwards ease-in-out;
}

.fxPushReveal .navInNext {
	opacity: 1;
	-webkit-animation: slideInHalfFromTop 0.7s forwards ease-in-out;
	animation: slideInHalfFromTop 0.7s forwards ease-in-out;
}

.fxPushReveal .navOutPrev {
	opacity: 1;
	-webkit-animation: slideOutHalfTop 0.7s forwards ease-in-out;
	animation: slideOutHalfTop 0.7s forwards ease-in-out;
}

.fxPushReveal .navInPrev {
	opacity: 1;
	z-index: 200;
	-webkit-animation: slideInFromBottom 0.7s forwards ease-in-out;
	animation: slideInFromBottom 0.7s forwards ease-in-out;
}

@-webkit-keyframes slideOutBottom {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateY(100%);
	}
}

@keyframes slideOutBottom {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
}

@-webkit-keyframes slideInHalfFromTop {
	from {
		-webkit-transform: translateY(-50%);
	}
	to {
		-webkit-transform: translateY(0);
	}
}

@keyframes slideInHalfFromTop {
	from {
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@-webkit-keyframes slideOutHalfTop {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateY(-50%);
	}
}

@keyframes slideOutHalfTop {
	from {} /* Fixes Chrome issue 35.0.1916.114 (easing breaks) */
	to {
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}

@-webkit-keyframes slideInFromBottom {
	from {
		-webkit-transform: translateY(100%);
	}
	to {
		-webkit-transform: translateY(0);
	}
}

@keyframes slideInFromBottom {
	from {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}



/*****************************************/
/*4 Vertical growth */
/*****************************************/

.fxVGrowth .navOutNext {
	-webkit-animation: scaleDown 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
	animation: scaleDown 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
}

.fxVGrowth .navInNext {
	z-index: 200;
	opacity: 1;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-animation: maximize 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
	animation: maximize 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
}

.fxVGrowth .navOutPrev {
	-webkit-animation: scaleDown 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
	animation: scaleDown 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
}

.fxVGrowth .navInPrev {
	z-index: 200;
	opacity: 1;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-animation: maximize 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
	animation: maximize 0.6s forwards cubic-bezier(0.6, 0, 0.4, 1);
}

@-webkit-keyframes maximize {
	from {
		-webkit-transform: scale(0);
	}
	to {
		-webkit-transform: scale(1);
	}
}

@keyframes maximize {
	from {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}



/*****************************************/
/*5 to Open */
/*****************************************/
.toOpen{ will-change: transform;}
.toOpen .navOutPrev img{ opacity: 0; filter: alpha(opacity=0); }
.toOpen .navOutPrev .tt_before,.toOpen .navOutPrev .tt_after{ content: ''; position: absolute; top: 0; bottom: 0; background-size: 780px 439px;}
.toOpen .navOutPrev .tt_before{ left: 0; background-position: 0 0; -webkit-animation: toOpenLeft 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: toOpenLeft 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);}
.toOpen .navOutPrev .tt_after{ right: 0;background-position: right 0;-webkit-animation: toOpenRgiht 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: toOpenRgiht 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);}
@-webkit-keyframes toOpenLeft {
	from {} 
	to {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
		opacity: 1;
	}
}

@keyframes toOpenLeft {
	from {} 
	to {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
		opacity: 1;
	}
}

@-webkit-keyframes toOpenRgiht {
	from {} 
	to {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
		opacity: 1;
	}
}

@keyframes toOpenRgiht {
	from {} 
	to {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
		opacity: 1;
	}
}

/*****************************************/
/*6 three pieces */
/*****************************************/
.threePieces{}
.threePieces .navOutNext{}
.threePieces .navInNext{}
.threePieces .navOutNext img{ opacity: 0; filter: alpha(opacity=0); }
.threePieces .tt_part{ width: 33.33%; height: 100%; position: absolute; top: 0;  background-size: 780px 439px;}
.threePieces .tt_left{ left: 0;background-position: 0 0 !important;}
.threePieces .tt_center{ left: 33.33%; background-position: -260px 0 !important;}
.threePieces .tt_right{ left: 66.66%; background-position: -520px 0 !important;}
.threePieces .navOutNext .tt_left{-webkit-animation: fxThreePieces_l 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fxThreePieces_l 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);}
.threePieces .navOutNext .tt_center{-webkit-animation: fxThreePieces_l 1.2s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fxThreePieces_l 1.2s forwards cubic-bezier(0.7, 0, 0.3, 1);}
.threePieces .navOutNext .tt_right{-webkit-animation: fxThreePieces_l 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fxThreePieces_l 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);}
.threePieces .navInNext { webkit-animation: scaleUpDown 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: scaleUpDown 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1); }
@-webkit-keyframes fxThreePieces_l {
	from {} 
	to {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
		opacity: 1;
	}
}

@keyframes fxThreePieces_l {
	from {} 
	to {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
		opacity: 1;
	}
}
/*****************************************/
/*7 lineBlinds */
/*****************************************/
.lineBlinds{}
.lineBlinds .navOutNext{}
.lineBlinds .navInNext{}
.lineBlinds .navOutNext img{ opacity: 0; filter: alpha(opacity=0); }
.lineBlinds .navOutNext .linebar{ width:130px; height: 439px; position: absolute;top: 0; bottom: 0; webkit-animation: fxlineBlinds 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1); animation: fxlineBlinds 0.8s forwards cubic-bezier(0.7, 0, 0.3, 1);  } 
.lineBlinds .navOutNext .linebar1{ left: 0px; background-position: 0 0;}
.lineBlinds .navOutNext .linebar2{ left: 130px; background-position: -130px 0 !important;}
.lineBlinds .navOutNext .linebar3{ left: 260px; background-position: -260px 0 !important;}
.lineBlinds .navOutNext .linebar4{ left: 390px; background-position: -390px 0 !important;}
.lineBlinds .navOutNext .linebar5{ left: 520px; background-position: -520px 0 !important;}
.lineBlinds .navOutNext .linebar6{ left: 650px; background-position: -650px 0 !important;}

@-webkit-keyframes fxlineBlinds {
	from {} 
	to {
  		width: 0;
		opacity: 1;
	}
}

@keyframes fxlineBlinds {
	from {} 
	to {
  		width: 0;
		opacity: 1;
	}
}

.lineBlinds .navOutNext .linebar, .threePieces .tt_part{ display: none\9;display: block\9\0; }