html,body,div,ul,ol,li,span,p,a,b,i,p,img,h1,h2,h3{margin: 0; padding: 0; border: 0}
ul,ol,li{list-style: none}
a{text-decoration: none;}
html,body{ width: 100%; max-width: 1920px; min-width: 1440px; margin: 0 auto; position: relative; height: 100%; font-family: Microsoft YaHei;}

.top_bar{ position: relative; z-index: 2 }
.top_bar .logo{ width: 150px; display: block; position: absolute; top:30px; left: 20px;}
.top_bar .logo img{ width: 100%; display: block; }
.top_bar .slogan{ width: 132px; display: block; position: absolute; top: 60px; left: 200px; }
.top_bar .ico_box{ width: 170px; position: absolute; top: 55px; right: 40px; }
.top_bar .ico_box a{ width: 34px; height: 34px; display: block; float: left; margin: 0 10px; background-image: url(img/ico.png); }
.top_bar .ico_box a.home{ background-position: 0 0}
.top_bar .ico_box a.down{ background-position: -34px 0}
.top_bar .ico_box a.music_ico{ background-position: -68px 0}
.top_bar .ico_box a.music_ico.playing{ background-position: -68px 0; }
.top_bar .ico_box a.music_ico.stop{ background-position: -68px -68px; }
.top_bar .ico_box a.home:hover{ background-position: 0 -34px}
.top_bar .ico_box a.down:hover{ background-position: -34px -34px}
.top_bar .ico_box a.music_ico:hover{ background-position: -68px -34px}

.main{ position: relative; z-index: 1; width: 100%; height: 100%; min-height: 1050px; max-height: 1200px; background: url(img/bg.jpg) top center no-repeat; overflow: hidden;}

.tab_box{ width: 426px; height: 560px; position: absolute; top: 250px; left: 50%; margin-left: -600px; z-index: 2;  transition: .4s;}
.tab_box .tab{ width: 100%; height: 560px; overflow: hidden;}
.tab_box .tab ul li{ width: 120px; float: left; margin: 20px 10px; text-align: center; color: #666; display: none;}
.tab_box .tab ul li.show{display: block;}
.tab_box .tab ul li a{ width: 120px; height: 120px; display: block; background-image: url(img/box_ico.png); background-position: left; position: relative;}
.tab_box .tab ul li a i{ width: 106px; height: 106px; display: block; border-radius: 80px; overflow: hidden; margin: 7px; float: left;}
.tab_box .tab ul li a i img{ width: 100%; display: block;}
.tab_box .tab ul li a .hover_mask{ width: 106px; height: 106px; border-radius: 50px; background-color: rgba(0,0,0,.7); position: absolute; top: 7px; left: 7px; opacity: 0; transition: .5s}
.tab_box .tab ul li a .hover_mask:before{ content: "查看详情"; width: 35px; height: 29px; padding: 8px 5px; display: block; position: absolute; top: 30px; left: 30px; z-index: 2; border-radius: 50px; border: 1px #dbbc81 dashed; color: #dbbc81; text-align: center; font-size: 12px; line-height: 15px;}
.tab_box .tab ul li a:hover .hover_mask{ opacity: 1; }
.tab_box .tab ul li .name{ display: block; font-size: 16px; color: #666; padding-top: 6px; text-align: center; }
.tab_box .tab ul li.cur a{ background-position: right }
.tab_box .tab_arrow a{ width: 426px; height: 41px; display: block; position: absolute; left: 0; background-image: url(img/arrow_1.png); }
.tab_box .tab_arrow a.prev{ background-position: top left; top: -60px;}
.tab_box .tab_arrow a.next{ background-position: bottom left; bottom: -60px;}
.tab_box .tab_arrow a.prev:hover{ background-position: top right;}
.tab_box .tab_arrow a.next:hover{ background-position: bottom right;}
.tab_box .all_sz{ display: none }

.sexy{ position: absolute; top: 0; left: 50%; margin-left: 500px; z-index: 2 }
.sexy ul li{ width: 1px; float: left; margin: 0 40px; position: relative; height: 260px;}
.sexy ul li i{ width: 1px; height: 260px; display: block; background: #c1a468; }
.sexy ul li a{ width: 56px; height: 56px; display: block; position: absolute; top: 230px; left: -28px; font-size: 20px; background-image: url(img/sexy_ico.png); color: #fdf1d8; text-align: center; line-height: 56px; transition: top .5s}
.sexy ul li.cur a{ width: 85px; height: 161px; top: 260px; left: -43px; font-size: 30px; color: #fdf1d8; line-height: 85px; background-image: url(img/sexy_ico_cur.png);}

.next_sz{ width: 30px; height: 45px; display: block; position: absolute; z-index: 3; top: 480px; left: 50%; margin-left: 650px; background-image: url(img/arrow_2.png); background-position: left; animation: Arrow .5s linear infinite alternate;}
.next_sz:hover{ background-position: right; }
.pic{ position: absolute; z-index: 1; top: 50px; left: 50%; margin-left: -180px;}
.pic_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.pic_box .pic_mask{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }

.detail_tab{ width: 70px; height: 100%; position: absolute; top: 0; left: 8%; margin-left: 0;}
.detail_tab i{ width: 1px; height: 100%; display: block; background: #c1a468; margin: 0 auto; transition: .5s}
.detail_tab .tab{ width: 70px; height: 530px; position: relative; z-index: 2; position: absolute; top: 190px; left: 0;}
.detail_tab .tab ul li{ width: 70px; margin: 8px 0; }
.detail_tab .tab ul li a{ width: 70px; height: 70px; background-image: url(img/box_ico_1.png);}
.detail_tab .tab ul li a i{ width:62px; height: 62px; margin: 4px; }
.detail_tab .tab ul li a .hover_mask{ width: 62px; height:62px; border-radius: 50px; background-color: rgba(0,0,0,.7); position: absolute; top: 4px; left: 4px; opacity: 0; transition: .5s}
.detail_tab .tab ul li a .hover_mask:before{ content: ""; width: 24px; height: 24px; background-image: url(img/ico_1.png); background-position: center center; background-repeat: no-repeat; padding: 0; display: block; position: absolute; top: 18px; left: 18px; z-index: 2; border-radius: 50px; border: 1px #dbbc81 dashed; color: #dbbc81; text-align: center; font-size: 12px; line-height: 15px;}
.detail_tab .tab ul li a:hover .hover_mask{ opacity: 1; }
.detail_tab .tab ul li .name{ display: block; font-size: 14px; height: 15px; line-height: 15px; color: #666; padding-top: 5px; text-align: center; }
.detail_tab .all_sz{ display: block; width: 80px; height: 26px; border: 1px #c1a468 solid; line-height: 26px; text-align: center; color: #333; font-size: 14px; position: absolute; top: 820px; left: 50%; margin-left: -40px; background: #fef4df; transition: .5s}
.detail_tab .all_sz img{ display: inline-block; margin-left: 3px; vertical-align: middle; margin-top: -3px; transition: .5s}
.detail_tab .all_sz:hover{  color: #fff; background: #c1a468 }
.detail_tab .all_sz:hover img{ filter: brightness(200%) }

.detail_tab .tab_arrow a{ width: 46px; height: 20px; display: block; position: absolute; left: 13px; background-image: url(img/arrow_4.png); }
.detail_tab .tab_arrow a.prev{ background-position: left top; top: 150px;}
.detail_tab .tab_arrow a.next{ background-position: bottom left; top: 740px;}
.detail_tab .tab_arrow a.prev:hover{ background-position: top right;}
.detail_tab .tab_arrow a.next:hover{ background-position: bottom right;}

.info_box{ width: 450px; position: absolute; top: 200px; left: 50%; margin-left: -600px; z-index: 4; visibility: hidden; opacity: 0; transition:opacity .5s .3s}
.info_box.show{ opacity: 1; visibility:visible  }
.info_box .t_1{ font-size: 18px; color: #e4c3a6; letter-spacing: 10px; font-family: Arial;}
.info_box .name{ font-size: 72px; color: #c51616; padding: 5px 0;}
.info_box .line{ width: 361px; height: 7px; background-image: url(img/ico_3.png); display: block; }
.info_box .get_way{ padding-top: 10px; font-size: 18px; color: #666 }
.info_box .get_way i{ width: 14px; height: 14px; display: inline-block; background-image: url(img/ico_4.png); vertical-align: middle; margin-top: -3px; margin-right: 10px; }
.info_box .get_way span{ font-weight: bold; }
.info_box .info_tab{ width: 100%; padding-top: 60px; position: relative;}
.info_box .info_tab ul li{ width: 60px; float: left; margin-right: 15px; }
.info_box .info_tab ul li .info_ico{ width: 60px; height: 60px; background-image: url(img/info_ico.png); display: block; background-position-y:1px;}
.info_box .info_tab ul li.info_1 .info_ico{ background-position-x: -60px}
.info_box .info_tab ul li.info_2 .info_ico{ background-position-x: -120px }
.info_box .info_tab ul li.info_3 .info_ico{ background-position-x: -180px }
.info_box .info_tab ul li.info_4 .info_ico{ background-position-x: -240px}
.info_box .info_tab ul li.info_5 .info_ico{ background-position-x: -300px}
.info_box .info_tab ul li.info_6 .info_ico{ background-position-x: -360px}
.info_box .info_tab ul li .info_type{ display: block; font-size: 14px; color: #666; padding: 5px 0 10px; text-align: center;}
.info_box .info_tab ul li .detail_arrow{ width: 12px; height: 7px; display: block; margin: 0 auto; background-image: url(img/arrow_3.png); position: relative; z-index: 3; display: none}
.info_box .info_tab ul li .info_detail{ width: 410px; height: 25px; line-height: 25px; padding: 5px 10px; background: #fefcf7; border: 1px #f7e8c9 solid; border-radius: 5px; text-align: center; position: absolute; left: 0; top: 160px; font-size: 14px; display: none}
.info_box .info_tab ul li .info_detail span{ color: #666 }
.info_box .info_tab ul li .info_detail b{ color: #c51616; font-weight: normal;}
.info_box .info_tab ul li .info_detail i{ color: #c9ba83; padding: 0 4px; font-family: Arial;}
.info_box .info_tab ul li.cur .detail_arrow{display: block;}
.info_box .info_tab ul li.cur .info_detail{display: block;}
.info_box .info_tab ul li.cur .info_type{ font-weight: bold; color: #c51616 }
.info_box .info_tab ul li.cur .info_ico{ background-image: url(img/info_ico_cur.png);background-position-y:0;}
.info_box .sz_animate{ width: 220px; height: 220px; position: absolute; top: 380px; left: -20px; background: url(//cdn.ziyan666.com/g/gtj_v2/style/img/zy_d.png) bottom center no-repeat; }
.info_box .sz_animate i{ width: 220px; height: 220px; display: block; margin: 0 auto; background-size: 100% 1300%; -webkit-animation: Show 1.5s steps(12) infinite; animation: Show 1.5s steps(12) infinite;}


@-webkit-keyframes Arrow {
	from { transform: translateX(-5px); }
	to { transform: translateX(5px); }
}
@keyframes Arrow {
	from { transform: translateX(-5px); }
	to { transform: translateX(5px); }
}


@-webkit-keyframes Show{
	from{background-position-y:0}
	to{background-position-y:100%}
}
@keyframes Show{
	from{background-position-y:0}
	to{background-position-y:100%}
}

@media screen and (max-width: 1680px) {
	.detail_tab{ left: 30px; }
	.detail_tab i{display: none}
	.info_box{margin-left: -550px;}
}