﻿
.banner { position: relative; width: 100%; height: 600px; }
.banner .item { width:100%; position:relative; margin:0 auto}
.banner .item li { width: 100%; height: 600px; position: absolute; overflow: hidden; opacity: 0; filter: alpha(opacity=0); }

/*.banner .item li .font_box { position:absolute; width:100%; height:600px;  background-color: rgba(0,0,0,.4);  display:none; z-index:1}*/


.banner .item li .font_box {position:relative ; width: 100%; height: 600px; background-color: rgba(0,0,0,.4); overflow:hidden; position: relative; top: 0; animation: mymove infinite; animation-duration: 1.5s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; /* Safari and Chrome */ -webkit-animation: mymove infinite; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: forwards;}
.banner .item li .font_box .shade { width: 100%; height: 600px;  z-index: 1;  }
@keyframes mymove {
    from { top: -1200px; }
    to { top: 0px; } 
}

.banner .item li .font_box .shade h1 { text-align:center; color:#fff; margin:160px 0 20px 0; font-size:30px;}
.banner .item li .font_box h2 { text-align:center; color:#fff; margin:40px 0 0 0; font-size:18px; font-weight:400}
.banner .item li .font_box a {  color:#fff;  font-size:16px;  display:block; height:40px; line-height:40px;  width:160px;  text-align:center; border:1px solid #fff; border-radius:10px;  z-index:100; position:absolute; bottom:160px; left:50%; right:50%; margin-left:-80px; font-size:14px;  }
.banner .item li .font_box a:hover { background:#fff; color:#333}
.banner .item a { display: block; width: 100%; height: 100%; position: relative; z-index: 20 }
.banner .thumbnail { position: absolute; z-index: 20; display: flex; margin: 0 0 0 -13px; bottom: 20px; transform: translate(-50%,0); left: 50%; }
.banner .thumbnail li { width: 13px; height: 13px; position: relative; margin: 0 0 0 13px; cursor: pointer; border-radius: 50%; }
.banner .thumbnail li .mask { width: 13px; height: 13px; background: rgba(255, 255, 255, 0.45); cursor: pointer; border-radius: 50%; }
.banner .bottom_mask { height: 155px; width: 100%; position: absolute; left: 0; bottom: 0; background-image: linear-gradient(180deg,rgba(0,0,0,0),#141414); z-index: 13; }
.banner .thumbnail li .maskShow { background: rgba(255, 255, 255, 1.95); }



.banner_box {  height: 420px;  }/*background: rgb(246, 227, 208);*/ 
.banner_2 { width: 1300px; margin: 0 auto; position: relative; height: 430px; }
.banner_2 li { width: 100%; height: 420px; position: absolute; overflow: hidden; display: none; z-index: 1 }
.banner_2 li img { max-width: 100% }
.banner_2 li a { display: block; width: 100%; height: 430px; }
.banner_2 .banner_left { position: absolute; left: 12px; top: 50%; z-index: 10; width: 34px; height: 56px; margin-top: -28px; background: url(/theme/image/left.png) no-repeat center center rgba(000,000,000,.2); cursor: pointer }
.banner_2 .banner_left:hover { background: url(/theme/image/left.png) no-repeat center center rgba(000,000,000,.5); }


.banner_2 .banner_right { position: absolute; right: 12px; top: 50%; z-index: 10; width: 34px; height: 56px; margin-top: -28px; background: url(/theme/image/right.png) no-repeat center center rgba(000,000,000,.2); cursor: pointer }
.banner_2 .banner_right:hover { background: url(/theme/image/right.png) no-repeat center center rgba(000,000,000,.5); }


