.head{ background: url("../images/index_bg1.jpg") no-repeat center; height:762px; min-width: 1200px;}

.head .play{ margin: 457px 0 0 1080px; cursor: pointer;}
.head .key{  margin: 0 auto 0; width: 289px;}

.head_main{ background: url("../images/index_bg2.jpg") no-repeat center; height:612px; min-width: 1200px;}
.head_main .con{padding-top: 25px;}
.head_main .left{width: 700px; height: 380px; float: left;}
.head_main .left .banner{width: 700px; height: 380px; position: relative;}
.head_main .left .banner .pagination{width: 100%; position: absolute; bottom: 0; left: 0; height: 40px; line-height: 40px; z-index: 1;  background: #000; background: rgba(0,0,0,0.5);text-align: center}
.head_main .left .banner .pagination li{width: 25%; color: #b3bdcc; float: left; position: relative; cursor: pointer;}
.head_main .left .banner .pagination li.on{color: #e8d1a7;}
.head_main .left .banner .pagination li:after{ position: absolute; top: 10px; right: 100%; content: ' '; width: 1px; height: 20px; background: #4e525a;}
.head_main .left .banner .pagination li:first-child:after{ display: none;}

.head_main .right{width: 480px;height: 379px;float: right;background: #000;background: rgba(0,0,0,0.2);filter:Alpha(opacity=20);position: relative;}
.head_main .right .tab{font-size: 18px;color: #b3bdcc;overflow: hidden;border-top: 1px solid #485164;}
.head_main .right .more{position: absolute;top: 20px;right:10px;}
.head_main .right .tab li{text-align: center; float: left; width: 70px; line-height: 57px; height: 57px; font-weight: 700; cursor: pointer;}
.head_main .right .tab li.on{ color: #e8d1a7; background: #10141d; z-index: 1; border-bottom: 1px solid #e8d1a7}
.head_main .right .list{ padding: 20px;}
.head_main .right .list li{ height: 41px; border-bottom: 1px solid #242935; line-height: 41px;}
.head_main .right .list li .title{ background:  url("../images/index_icon1.png") no-repeat 0 center; padding-left: 20px; width: 340px;word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left;color: #b3bdcc;}

.head_main .right .list li .time{ float: right; text-align: right;color: #b3bdcc;}
.head_main .adv{ margin-top: 20px;;}
.head_main .adv li{margin-left: 20px; float: left;}
.head_main .adv li:first-child{ margin: 0}
.head_main .adv li img{width: 386px; height: 160px}



.game_features{ background: url("../images/index_bg3.jpg") no-repeat center; height:645px; min-width: 1200px;}
.game_features .con{padding-top: 140px;}
.game_features ul{width:900px; height: 450px;position: relative; margin: 0 auto; }
.game_features ul li{ position: absolute; top: 0; left:0;width:900px; height: 450px;
    -webkit-transition-property: top,left,width,opacity;
    -webkit-transition-duration:0.3s;
    -ms-transition-property: top,left,width,opacity;
    -ms-transition-duration:0.3s;
    -o-transition-property: top,left,width,opacity;
    -o-transition-duration:0.3s;
    -moz-transition-property: top,left,width,opacity;
    -moz-transition-duration:0.3s;
    transition-property: top,left,width,opacity;
    transition-duration:0.3s;

}
.game_features ul li.left{ width: 80%; top: 10%; left: -8%; z-index: 1; opacity: 0.5;}
.game_features ul li.right{ width: 80%; left: 28%; top: 10%; z-index: 1;opacity: 0.5}
.game_features ul li.center{width: 100%; top: 0; left: 0; z-index: 2;opacity: 1;}
.game_features ul li.hide{ width: 80%; top: 10%; left: 10%; z-index: 0;opacity: 0.5;}
.game_features ul li img{ width: 100%;}
.game_features .icons{ text-align: center; width: 100%;margin-top: 27px; font-size: 0;}
.game_features .icons i{ display: inline-block;width: 10px;height: 10px; margin-left:10px; background: #977f5e; border-radius: 50%; }
.game_features .icons i.on{ background: #fff;}
.game_features .con{ position: relative}
.game_features .keys{ position: absolute; top: 320px;width: 100%;}
.game_features .keys i{background: url("../images/gf_key.png") no-repeat; width: 57px; height: 40px;display: block;cursor:pointer;}
.game_features .keys i.left{ background-position-x: -57px;float: left}
.game_features .keys i.right{float: right;}


.raiders{background: url("../images/index_bg4.jpg") no-repeat center; height:719px; min-width: 1200px;}
.raiders .left{width: 480px; float: left;margin-top: 138px;}
.raiders .left .imgs li{width: 235px; margin-left: 10px; float: left;}
.raiders .left .imgs li:first-child{margin: 0;}
.raiders .left .box{width: 480px;height: 380px; background:#1f263a;background: rgba(31,38,58,0.5); margin-top: 10px; position: relative}
.raiders .left .box .tab{height: 58px;font-size: 18px;border-top: #485166 1px solid;position: relative;}
.raiders .left .box .more{position: absolute;top: 20px;right:10px;}
.raiders .left .box .tab li{ width: 80px; height: 58px; line-height: 58px; float: left; text-align: center; cursor: pointer; font-weight: 700;}
.raiders .left .box .tab li.on{background: #141721;color: #e8d1a7; position: relative;}
.raiders .left .box .tab li.on:after{ content: ' '; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #e8d1a7; z-index: 1;}
.raiders .left .box .list{ padding: 20px;}
.raiders .left .box .list ul{display: none;}
.raiders .left .box .list li{ height: 41px; border-bottom: 1px solid #242935; line-height: 41px;}
.raiders .left .box .list li .title{ background:  url("../images/index_icon1.png") no-repeat 0 center; padding-left: 20px; width: 340px;word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left;color: #b3bdcc}
.raiders .left .box .list li .time{ float: right; text-align: right;color: #b3bdcc}

.raiders .right{ float: left; width: 650px; background-repeat: no-repeat; padding: 405px 0 0 70px; margin-top: 83px;
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -ms-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;

}
.raiders .right .box{width: 488px; margin: 0 auto; background:#1f263a;background: rgba(31,38,58,0.5); height: 180px; position: relative;}
.raiders .right .tab{ height: 48px; line-height: 48px;text-align: center; font-size: 0;border-top: #485166 1px solid;}
.raiders .right .tab ul{display: block; margin: 0 auto; width: 240px;  overflow: hidden;}
.raiders .right .tab li{width: 80px; height: 48px; text-align: center; display: inline-block; font-size: 18px; font-weight: 700;cursor: pointer; float:left;}
.raiders .right .tab li.on{background: #141721;color: #e8d1a7; position: relative;}
.raiders .right .tab li.on:after{ content: ' '; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: #e8d1a7; z-index: 1;}
.raiders .right .text{ padding:27px 20px 0; text-align: left;}
.raiders .right .more{ position: absolute; bottom: 10px;right: 10px;}

.viedo{background: url("../images/index_bg5.jpg") no-repeat center; height:702px; min-width: 1200px;}
.viedo .viedo_list{padding-top: 150px;}
.viedo .viedo_list li{ float: left;margin-left: 10px;position: relative; cursor: pointer}
.viedo .viedo_list li:first-child{margin-left: 0;}
.viedo .viedo_list li:after{content: ' '; width: 59px; height: 59px; background: url("../images/index_viedo_key.png");  position: absolute; top: 56px; left: 116px;}
.viedo .viedo_list li img{width: 292px; height: 171px;}

.viedo .screenshot_list{padding-top: 65px;}
.viedo .screenshot_list li{ float: left;margin-left: 10px;position: relative; }
.viedo .screenshot_list li:first-child{margin-left: 0;}
.viedo .screenshot_list li img{width: 232px; height: 120px;}

.viedo .media{ margin-top: 30px;}
.viedo .media p{ height: 35px; line-height: 35px; color: #afafaf;}
.viedo .media li{ margin-left:10px; float: left}
.viedo .media li:first-child{ margin-left:0;}
.viedo .media li img{width:141px; height: 50px;}


.side_nav{ position: fixed; top: 250px; right: 50px;width: 180px; height: 340px;background: url("../images/side_nav_bg.png") no-repeat; z-index: 9;}
.side_nav ul{ padding-top: 30px;}
.side_nav li{ height: 39px; line-height: 39px; background: url("../images/side_nav_key_bg.png") no-repeat;width: 89px; margin: 0 auto ; cursor: pointer; position: relative }
.side_nav li a{ display: block;}
.side_nav li.li1{}
.side_nav li.li2{ background-position-y: -39px;}
.side_nav li.li3{ background-position-y: -78px;}
.side_nav li.li4{ background-position-y: -117px;}
.side_nav li.li5{ background-position-y: -156px; height: 67px;}
.side_nav li.li6{ background-position-y: -223px; height: 67px;}
.side_nav li:hover{background-position-x:-89px;}
.side_nav .return_top{ position: absolute; top: 100%;left: 76px; cursor: pointer;}
.side_nav li img{ position: absolute;right: 100%; top: 5px; padding-right: 38px; display: none;}
.side_nav li:hover img{ display: block;}