.banner { width: 100%; height: 600px; background: #4131d5; color: #fff; position: relative; z-index: 1001; overflow: hidden; -moz-transition: background 0.5s; -o-transition: background 0.5s; -webkit-transition: background 0.5s; transition: background 0.5s; }
.banner .hd { width: 200px; height: 60px; background: rgba(0, 0, 0, 0.4); position: absolute; left: 50%; bottom: 0; z-index: 10; margin-left: -100px; text-align: center; font-size: 0; }
.banner .hd ul { display: inline-block; margin: 25px 20px 0; position: relative; }
.banner .hd ul:before, .banner .hd ul:after { content: ''; position: absolute; left: -28px; top: 4px; width: 33px; height: 1px; background: rgba(255, 255, 255, 0.4); }
.banner .hd ul:after { left: auto; right: -28px; }
.banner .hd li { display: inline-block; vertical-align: top; width: 10px; height: 10px; outline: 2px solid #fff; outline: 2px solid rgba(255, 255, 255, 0.4); padding: 2px; margin: 0 8px; -moz-transition: outline-color 0.4s; -o-transition: outline-color 0.4s; -webkit-transition: outline-color 0.4s; transition: outline-color 0.4s;line-height: 100px;
    overflow: hidden; }
.banner .hd li + li:before { content: ''; position: absolute; width: 10px; height: 1px; background: rgba(255, 255, 255, 0.4); margin-left: -15px; margin-top: 2px; }
.banner .hd li:after { content: ''; display: inline-block; width: 100%; height: 100%; background: #ff3a3a; opacity: 0; visibility: hidden; -moz-transform: scale(0); -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; }
.banner .hd li.on { outline-color: #ff3a3a; }
.banner .hd li.on:after { visibility: visible; opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.banner .bd { height: 760px; }
.banner .bg { position: absolute; width: 1920px; height: 760px; top: 0; left: 50%; margin-left: -960px; z-index: -1; }
.banner .bd-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; display: block !important; visibility: hidden; }
.banner .bd-item.on { visibility: visible; }
.banner .bd-inner { position: relative; height: 100%; }
.banner .bd-inner dl { position: relative; z-index: 100; }
.banner .name { font-size: 48px; color: #fffd57; font-weight: bold; padding-top: 205px; margin-bottom: 45px; letter-spacing: 3px; }
.banner .name b { font-size: 60px; font-weight: inherit; }
.banner .text { width: 625px; font-size: 16px; line-height: 48px; padding-left: 35px; position: relative; }
.banner .text:before, .banner .text:after { font-family: 'arial'; font-size: 48px; font-weight: bold; position: absolute; margin-left: -33px; margin-top: 11px; }
.banner .text:before { content: '“'; }
.banner .text:after { content: '”'; margin-top: 13px; margin-left: 10px; }