*{ margin: 0px; padding: 0px;}
.sl-slider-wrapper{ width: 800px; height: 400px; margin: 0 auto; position: relative; overflow: hidden;}
.sl-slider{ position: absolute; top: 0; left: 0;}

/* Slide wrapper and slides */

.sl-slide, .sl-slides-wrapper, .sl-slide-inner{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.sl-slide{ z-index: 1;}

/* The duplicate parts/slices */

.sl-content-slice{ overflow: hidden; position: absolute; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; background: #fff; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; opacity: 1;}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice{ width: 100%; height: 50%; left: -200px; -webkit-transform: translateY(0%) scale(1); -moz-transform: translateY(0%) scale(1); -o-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1);}
.sl-slide-horizontal .sl-content-slice:first-child{ top: -200px; padding: 200px 200px 0px 200px;}
.sl-slide-horizontal .sl-content-slice:nth-child(2){ top: 50%; padding: 0px 200px 200px 200px;}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice{ width: 50%; height: 100%; top: -200px; -webkit-transform: translateX(0%) scale(1); -moz-transform: translateX(0%) scale(1); -o-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); transform: translateX(0%) scale(1);}
.sl-slide-vertical .sl-content-slice:first-child{ left: -200px; padding: 200px 0px 200px 200px;}
.sl-slide-vertical .sl-content-slice:nth-child(2){ left: 50%; padding: 200px 200px 200px 0px;}

/* Content wrapper */


/* Width and height is set dynamically */

.sl-content-wrapper{ position: absolute;}
.sl-content{ width: 100%; height: 100%; background: #fff;}

/* Default styles for background colors */

.sl-slide-horizontal .sl-slide-inner{ background: #ddd;}
.sl-slide-vertical .sl-slide-inner{ background: #ccc;}
.demo-2 .sl-slider-wrapper{ width: 100%; height: auto; overflow: hidden; position: relative;}
.demo-2 .bg-img{ -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center;}

/* Custom navigation dots */

.nav-dots{ text-align: center; position: absolute; bottom: 25px; height: 30px; width: 100%; left: 0; z-index: 1000;}
.nav-dots span{ display: inline-block; position: relative; width: 16px; height: 16px; border-radius: 50%; margin: 3px; background: #ddd; background: rgba(150, 150, 150, 0.4); cursor: pointer; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1);}
.demo-2 .nav-dots span{ background: rgba(150, 150, 150, 0.1); margin: 6px 12px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5);}
.demo-2 .nav-dots span.nav-dot-current, .demo-2 .nav-dots span:hover{ box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5);}
.nav-dots span.nav-dot-current:after{ content: ""; position: absolute; width: 10px; height: 10px; top: 3px; left: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.8);}
.sl-slide-inner .slideText{ width: calc(100% * 0.26); height: auto; position: absolute; left: 26%; bottom: 100px;}
.sl-slide-inner .slideText img{ width: 100%;}
.sl-slide-inner .slideText.t{ width: calc(100% * 0.39); height: auto; bottom: 150px;}
.demo-2 .bg-img-1{ background-image: url(../image/banner.jpg);}
.demo-2 .bg-img-2{ background-image: url(../image/banner2.jpg);}
.demo-2 .bg-img-3{ background-image: url(../image/banner3.jpg);}
.demo-2 .bg-img-4{ background-image: url(http://www.scstsy.com/statics/images/4.jpg);}
.demo-2 .bg-img-5{ background-image: url(http://www.scstsy.com/statics/images/5.jpg);}

/* Animations for content elements */

.sl-trans-elems .deco{ -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both; animation: roll 1s ease-out both, fadeIn 1s ease-out both;}
.sl-trans-elems h2{ -webkit-animation: moveUp 1s ease-in-out both; -moz-animation: moveUp 1s ease-in-out both; -o-animation: moveUp 1s ease-in-out both; -ms-animation: moveUp 1s ease-in-out both; animation: moveUp 1s ease-in-out both;}
.sl-trans-elems blockquote{ -webkit-animation: fadeIn 0.5s linear 0.5s both; -moz-animation: fadeIn 0.5s linear 0.5s both; -o-animation: fadeIn 0.5s linear 0.5s both; -ms-animation: fadeIn 0.5s linear 0.5s both; animation: fadeIn 0.5s linear 0.5s both;}
.sl-trans-back-elems .deco{ -webkit-animation: scaleDown 1s ease-in-out both; -moz-animation: scaleDown 1s ease-in-out both; -o-animation: scaleDown 1s ease-in-out both; -ms-animation: scaleDown 1s ease-in-out both; animation: scaleDown 1s ease-in-out both;}
.sl-trans-back-elems h2{ -webkit-animation: fadeOut 1s ease-in-out both; -moz-animation: fadeOut 1s ease-in-out both; -o-animation: fadeOut 1s ease-in-out both; -ms-animation: fadeOut 1s ease-in-out both; animation: fadeOut 1s ease-in-out both;}
.sl-trans-back-elems blockquote{ -webkit-animation: fadeOut 1s linear both; -moz-animation: fadeOut 1s linear both; -o-animation: fadeOut 1s linear both; -ms-animation: fadeOut 1s linear both; animation: fadeOut 1s linear both;}
@-webkit-keyframes roll{ 0%{-webkit-transform: translateX(500px) rotate(360deg);}
	100%{-webkit-transform: translateX(0px) rotate(0deg);}
	}
@-moz-keyframes roll{ 0%{-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100%{-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
	}
@-o-keyframes roll{ 0%{-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100%{-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
	}
@-ms-keyframes roll{ 0%{-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100%{-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
	}
@keyframes roll{ 0%{transform: translateX(500px) rotate(360deg); opacity: 0;}
	100%{transform: translateX(0px) rotate(0deg); opacity: 1;}
	}
@-webkit-keyframes moveUp{ 0%{-webkit-transform: translateY(40px);}
	100%{-webkit-transform: translateY(0px);}
	}
@-moz-keyframes moveUp{ 0%{-moz-transform: translateY(40px);}
	100%{-moz-transform: translateY(0px);}
	}
@-o-keyframes moveUp{ 0%{-o-transform: translateY(40px);}
	100%{-o-transform: translateY(0px);}
	}
@-ms-keyframes moveUp{ 0%{-ms-transform: translateY(40px);}
	100%{-ms-transform: translateY(0px);}
	}
@keyframes moveUp{ 0%{transform: translateY(40px);}
	100%{transform: translateY(0px);}
	}
@-webkit-keyframes fadeIn{ 0%{opacity: 0;}
	100%{opacity: 1;}
	}
@-moz-keyframes fadeIn{ 0%{opacity: 0;}
	100%{opacity: 1;}
	}
@-o-keyframes fadeIn{ 0%{opacity: 0;}
	100%{opacity: 1;}
	}
@-ms-keyframes fadeIn{ 0%{opacity: 0;}
	100%{opacity: 1;}
	}
@keyframes fadeIn{ 0%{opacity: 0;}
	100%{opacity: 1;}
	}
@-webkit-keyframes scaleDown{ 0%{-webkit-transform: scale(1);}
	100%{-webkit-transform: scale(0.5);}
	}
@-moz-keyframes scaleDown{ 0%{-moz-transform: scale(1);}
	100%{-moz-transform: scale(0.5);}
	}
@-o-keyframes scaleDown{ 0%{-o-transform: scale(1);}
	100%{-o-transform: scale(0.5);}
	}
@-ms-keyframes scaleDown{ 0%{-ms-transform: scale(1);}
	100%{-ms-transform: scale(0.5);}
	}
@keyframes scaleDown{ 0%{transform: scale(1);}
	100%{transform: scale(0.5);}
	}
@-webkit-keyframes fadeOut{ 0%{opacity: 1;}
	100%{opacity: 0;}
	}
@-moz-keyframes fadeOut{ 0%{opacity: 1;}
	100%{opacity: 0;}
	}
@-o-keyframes fadeOut{ 0%{opacity: 1;}
	100%{opacity: 0;}
	}
@-ms-keyframes fadeOut{ 0%{opacity: 1;}
	100%{opacity: 0;}
	}
@keyframes fadeOut{ 0%{opacity: 1;}
	100%{opacity: 0;}
	}