AsiaH7_2/assets/stylesheets/template/modules/adbanner.scss

	  		.annc-box{
  			position: relative;
  			overflow: hidden;
  			// height: 500px;
  		}
  		.pages{

  			// transition:opacity.5s;
  			padding: 0;
  			width: 100%;
  			position:absolute;
  			left: 100%;
  			top:0;
  			text-align: center;
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
  			.w-annc__item{
  				float: none;
  				display: inline-block;
  				vertical-align: top;
  				text-align: left;
  				padding: 0 1px;
  				.mask{
  					position: absolute;
  					width: 100%;
  					height: 100%;
  					top: 0;
  					left: 0;
  					transition:.3s;
  				}
  				.w-annc__postdate-wrap{
  					position: absolute;
  					bottom: 0;
  					left: 0;
  					background: rgba(0,0,0,.5);
  					color: #fff;
  					padding: 10px;
  					font-size: 0.875em;
  				}
  				.w-annc__subtitle{
  					font-size: 0.875em;
  					color: #666;
  					font-family: '微軟正黑體','sans-serif';
  					line-height: 1.7em;
  				}
  				.w-annc__title{
  					color:#7d7133;
  					&:hover{
  						color: $theme-color-main;
  					}
  				}
  			}  			
  			.data{
  				background: #fff;
  				&:hover .mask{
  					 background: rgba(0,0,0,.3);
  				}  				
  			}
  			.w-annc__content-wrap{
  				padding: 15px;
  			}
        img{
            transform:scale(1,1) !important;
            transition:transform 0s 2s ;
        }

  			&.active{
  				left:0;
  				opacity: 1;
  			}
        &.active img,&.ltr_in img,&.rtl_in img{
                transition: transform 20s;
                transform-origin:center center 0px;
                transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1);
                transform:scale(1.3) !important;
        }
			// &.ltr_in {
			// 	left: 0;
			// 	-webkit-animation: left-in  1s  ;
			// 	-moz-animation: left-in  1s  ;
			// 	-ms-animation: left-in  1s  ;
			// 	-o-animation: left-in  1s  ;
			// 	animation: left-in  1s ;
			// 	animation-fill-mode:forwards;
			// }
			// &.ltr_out {

			// 	-webkit-animation: left-out  1s  ;
			// 	-moz-animation: left-out  1s  ;
			// 	-ms-animation: left-out  1s  ;
			// 	-o-animation: left-out  1s  ;
			// 	animation: left-out  1s  ;
			// 	animation-fill-mode:forwards;
			// }
			// &.rtl_in {

			// 	left: 0;
			// 	-webkit-animation: right-in  1s  ;
			// 	-moz-animation: right-in  1s  ;
			// 	-ms-animation: right-in  1s  ;
			// 	-o-animation: right-in  1s ;
			// 	animation: right-in  1s ;
			// 	animation-fill-mode:forwards;
			// }
			// &.rtl_out {

			// 	-webkit-animation: right-out  1s ;
			// 	-moz-animation: right-out  1s  ;
			// 	-ms-animation: right-out  1s  ;
			// 	-o-animation: right-out  1s  ;
			// 	animation: right-out  1s  ;
			// 	animation-fill-mode:forwards;
			// }  			
  		}
@-webkit-keyframes left-in {
    /*0%{left: -900px;}*/
    0% {

    left: -100%;
}
 100% {
  transform:scale(1,1);
  opacity: 1;
  left: 0;
}
}
@-webkit-keyframes right-in {
    /*0%{left: 900px;}*/
    0% {

left: 100%;
}
 100% {
  transform:scale(1,1);
  opacity: 1;
left: 0;
}
}
@-webkit-keyframes left-out {
 0% {

left: 0;
}
  /*100%{left: 900px;}*/
  100% {
    opacity: 1;
left: 100%;
}
}
@-webkit-keyframes right-out {
 0% {

left: 0;
}
  /*100%{left: -900px;}*/
  100% {
    opacity: 1;
left: -100%;
}
}
@keyframes left-in {
    /*0%{left: -900px;}*/
    0% {

    left: -100%;
}
 100% {
  transform:scale(1,1);
  opacity: 1;
  left: 0;
}
}
@keyframes right-in {
    /*0%{left: 900px;}*/
    0% {

left: 100%;
}
 100% {
  transform:scale(1,1);
  opacity: 1;
left: 0;
}
}
@keyframes left-out {
 0% {

left: 0;
}
  /*100%{left: 900px;}*/
  100% {
    opacity: 1;
left: 100%;
}
}
@keyframes right-out {
 0% {

left: 0;
}
  /*100%{left: -900px;}*/
  100% {

    opacity: 1;
    left: -100%;
}
}