/*CSS Reset*/


/* base  */
html,body{ height:100%; }
body { min-width: 1000px; word-break: break-all; word-wrap: break-word; font: normal 12px/1.8 "Microsoft YaHei", \5b8b\4f53, Simsun, Arial, tahoma; }
ul,li{ list-style: none;}
ul:after{ 
	content:'\20';
	display:block;
	clear:both;
	height: 0;
	visibility: hidden;
}
em,var { font-style:normal;}
input,textarea,button { outline:none;}
textarea { resize: none; }
a { color: #333; text-decoration: none; }
a:hover { text-decoration: underline }

*{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-o-box-sizing:border-box; /* Safari */
	-webkit-box-sizing:border-box; /* chrome */
}

.relative { position: relative; zoom: 1; }
.absolute { position: absolute; zoom: 1; }

.fl { float: left; }
.fr { float: right; }
.display-none{ display:none}
.display-block{ display:block}
.t-hide { text-indent: -999em; overflow: hidden; display: none;}
.t-right { text-align: right; }
.t-center { text-align: center; }

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.circle{
	border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-webkit-border-radius: 50%;
	}

.anmt-scale { 
	animation: scale 1s linear infinite alternate; 
	-webkit-animation: scale 1s linear infinite alternate; 
	-moz-animation: scale 1s linear infinite alternate; 
	-o-animation: scale 1s linear infinite alternate; 
}
@keyframes scale { 
	0% {
		transform: scale(0.8);
	}
 	100% {
		transform: scale(1);
	}
}
@-webkit-keyframes scale { 
	0% {
		-webkit-transform: scale(0.8);
	}
 	100% {
		-webkit-transform: scale(1);
	}
}
@-moz-keyframes scale { 
	0% {
		-moz-transform: scale(0.8);
	}
 	100% {
		-moz-transform: scale(1);
	}
}
@-o-keyframes scale { 
	0% {
		-o-transform: scale(0.8);
	}
 	100% {
		-o-transform: scale(1);
	}
}


.anmt-rotate{
	animation: rotate 3s linear 0s normal none infinite ;
    -webkit-animation: rotate 3s linear 0s normal none infinite ;
	-moz-animation: rotate 3s linear 0s normal none infinite ;
	-o-animation: rotate 3s linear 0s normal none infinite ;   
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}
@-0-keyframes rotate {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(360deg);
    }
}



/* common  */
body{ background:#000; color:#fff}
.bg-full01, .bg-full02, .bg-full03, .bg-full04, .bg-full05, .bg-full06, .bg-full07, .bg-full08 { width: 100%; overflow: hidden; background-repeat: no-repeat; background-position: center top; }
.bg-full01 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full01.jpg); height:700px }
.bg-full02 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full02.jpg); height:381px }
.bg-full03 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full03.jpg); height:678px }
.bg-full04 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full04.jpg); height:1175px }
.bg-full05 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full05.jpg); height:526px }
.bg-full06 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full06.jpg); height:833px }
.bg-full07 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full07.jpg); height:771px }
.bg-full08 { background-image: url(/images/2016/codol/2016/zt/act/others/bg-full08.jpg); height:764px }

.wrapper { width: 1000px; height:100%; margin: 0 auto; text-align: left;position: relative; }

.header { position: relative; }
.header01{ height: 0px  }
.header02{ height: 0px; }
.header03{ height: 0px; }
.header04{ height: 0px;   }
.header05{ height: 0px; }
.header06{ height: 0px; }
.header07{ height: 0px; }
.header08{ height: 0px; }

.main { position: relative; }
.main01 { }
.main02 { }
.main03 { }
.main04 { } 
.main05 { }
.main06 { }

/* mudule  */
.logo,.btn,.step,.header,.lottery-wrap,.bottombtn-wrap{ }
.logo,.nav-wrap,.btn,.step,.step-wrap,.header,.lottery-wrap,.bottombtn-wrap,.rbbtn{}

.logo-wrap{ position: absolute; display: block; width:600px; height:116px;  overflow: hidden; left: 32px;  top:5px; }
.logo { position: absolute; display: block; text-indent: -999em; overflow: hidden; }
.logo-game { left: 0px; top: 0px; width: 140px; height: 70px;    background: url(/images/2016/codol/2016/zt/act/others/logo-game.png) no-repeat;  }
.logo-act { left: 150px; top:10px; width: 150px; height: 50px;   background: url(/images/2016/codol/2016/zt/act/others/logo-act.png) no-repeat;    }

.share{position: absolute; display: block; left:18px; top:8px;}
.gb-share-con{ width:80px; height:20px; overflow:hidden}
.activity-time{ position:absolute; left:88px ; top:502px; width:500px; height:50px; color:#fff; font-size:24px; font-weight:bold}

.nav-wrap{ position: absolute; display: block; width:600px; height:60px;  overflow: hidden; left: 706px;  top:26px; }
.nav { position: absolute; display: block;  overflow: hidden;  font-size:14px; color:#d9eff4; }
.nav a{ color:#d9eff4}
.nav01{left: 0px;  top:0px;}
.nav02{left: 90px;  top:0px;}
.nav03{left: 180px;  top:0px;}
.nav04{left: 270px;  top:0px;}
.nav.active{ color:#ff7800}




.btn {display: block;position:absolute;overflow: hidden; text-indent: -9999px;}



/* tab */
.feature { width: 1000px; height:400px; position:absolute; left:0px; top:680px; }
.feature h4 { height: 113px; }
.feature-handle { position:absolute; left:430px; top:360px; width: 100px; height: 3px; }
.feature-handle a {  position:absolute; width: 34px; height: 3px; line-height:85px; display: block; background: #676767 ; text-align:center; color:#000000; text-indent:-9999px }
.feature-handle a.n01 { left:0px;  }
.feature-handle a.n02 { left:50px; }
.feature-handle a.n03 { left:100px;}

.feature-handle a:hover,.feature-handle a.on { background:#ff7800; }


.feature-list { width: 1000px; height: 334px; overflow: hidden;  position:absolute; left:0px; top:0px; }
.feature-list li{width: 1000px; height: 334px; overflow:hidden}

/* right-bar  */
.right-bar{position:fixed; right:30px; top:150px; width:154px; height:316px;  }

.right-bar .rbbtn{ display:block; background-color:rgba(168,146,53,.5); width:154px; height:36px; line-height:36px; font-size:16px; color:#ffffff; padding-left:20px; margin-bottom:2px; }
.right-bar .rbbtn09{ background:none}
.right-bar .rbbtn.active,.right-bar .rbbtn:hover{ border-left:9px solid #ff7800; color:#ff7800; background-color:rgba(0,0,0,.5);}
.right-bar .rbbtn09.active,.right-bar .rbbtn09:hover{ border-left:none; color:#fff; background:none;}


/* ipop  */

.cover { position: absolute; z-index: 9998; top: 0; margin-top: -30px; background: #000; filter: Alpha(opacity=50); opacity: 0.5; }
.ipop { display: none; position: fixed; z-index: 9999; width: 740px; height: 480px; background: #ffffff; }
.ipop .btn-closeipop { position: absolute; top: -36px; right: 0px; width: 36px; height: 36px; background: url(/images/2016/codol/2016/zt/act/others/bg-close.png) no-repeat 0 0; cursor: pointer;}
.ipop .title{ text-align:center; font-size:24px; color:#333333; padding:20px 0px 0px 0px  }
.ipop .content { margin: 0 auto; padding: 10px 27px 0 20px; color: #ffffff; font: 14px/2.0 "Microsoft YaHei"; }
.ipop .left { padding-top:10px;}
.ipop .right {width:326px;}

.pop-video { width: 960px; height: 560px; background: #000000;  }
.pop-video .content { margin: 0 auto; padding: 0;}
.pop-giftinfo { width: 650px; height: 360px;  }




/* footer */
.footer .global-footer,.footer .global-footer a{ color:#feffef}

/* special */

div#fancybox-wrap{ padding:0;}



.area-list{width:1000px; height:200px; position:absolute; left:0px; top:370px;}
.area-item{ width:238px; height:179px; position:absolute;}
.area-item-01{ left:0}
.area-item-02{ left:250px}
.area-item-03{ left:500px}
.area-item-04{ left:750px}
.area-item .img-wrap{ width:100%; height:100%;  position:absolute; left:0; top:0; z-index:10}
.area-item .title-wrap{ height:40px; width:100%; line-height:40px; text-align:center; font-size:20px; position:absolute; bottom:0px; left:0px; z-index:20;}
.area-item .detail-wrap{ width:100%; height:100%;  position:absolute; left:0; top:0;z-index:30; background-color:rgba(0,0,0,.7); display:none}
.area-item .detail-wrap .desc{color:#ff7800; font-size:14px; text-align:center; width:200px; position:absolute; top:40px; left:19px; line-height:24px }
.area-item .detail-wrap .btn-view{ width:80px; height:30px; line-height:30px; background:#ff7800; color:#000; text-align:center;  position:absolute; bottom:12px; left:79px;}
.area-item.active .detail-wrap{ display:block}
.area-item.active .title-wrap{ top:5px; z-index:40; color:#ff7800; font-weight:bold}


.boss-list{width:1000px; height:335px;  position:absolute; left:140px; top:220px; }
.boss-item{ width:335px; height:335px; float:left; display:inline; margin-right:2px; position:absolute; background-color:rgba(168,146,53,.5);}
.boss-boss-01{ left:0}
.boss-boss-02{ left:365px;}
.boss-item .img-wrap{ width:100%; height:100%;  position:absolute; left:0; top:0px; z-index:10}
.boss-item .title-wrap{ height:40px; width:100%; line-height:40px; text-align:center; font-size:24px; position:absolute; bottom:0px; left:0px; z-index:20;}
.boss-item .detail-wrap{ width:100%; height:100%;  border:4px solid #a89235; position:absolute; left:0; top:0;z-index:30; background-color:rgba(0,0,0,.9); display:none}
.boss-item .detail-wrap .desc{color:#a89235; font-size:14px; text-align:center; width:300px; position:absolute; top:150px; left:15px; line-height:24px }
.boss-item .detail-wrap .btn-view{ width:80px; height:30px; line-height:30px; background:#ff7800; color:#000; text-align:center;  position:absolute; bottom:12px; left:79px;}
.boss-item.active .detail-wrap{ display:block}
.boss-item.active .title-wrap{ top:100px; z-index:40; color:#a89235; font-weight:bold}


.monster-list{width:1000px; height:334px; }
.monster-item{ width:198px; height:334px; float:left; display:inline; margin-right:2px; position:relative; background-color:rgba(0,0,0,.5);}

.monster-item .img-wrap{ width:100%; height:100%;  position:absolute; left:0; top:20px; z-index:10}
.monster-item .title-wrap{ height:40px; width:100%; line-height:40px; text-align:center; font-size:20px; position:absolute; bottom:0px; left:0px; z-index:20;}
.monster-item .detail-wrap{ width:100%; height:100%;  position:absolute; left:0; top:0;z-index:30; background-color:rgba(0,0,0,.7); display:none}
.monster-item .detail-wrap .desc{color:#ff7800; font-size:14px; text-align:center; width:140px; position:absolute; top:90px; left:29px; line-height:24px }
.monster-item .detail-wrap .btn-view{ width:80px; height:30px; line-height:30px; background:#ff7800; color:#000; text-align:center;  position:absolute; bottom:12px; left:79px;}
.monster-item.active .detail-wrap{ display:block}
.monster-item.active .title-wrap{ top:50px; z-index:40; color:#ff7800; font-weight:bold}

.weapon-list-wrap{ position:absolute; width:1000px; height:500px; left:0px; top:160px;}
.weapon-list{width:1000px; height:334px; }
.weapon-item{ width:164px; height:235px; float:left; display:inline; margin-right:2px; margin-bottom:2px; position:relative; background-color:rgba(0,0,0,.5);}

.weapon-item .img-wrap{ width:100%; height:100%;  position:absolute; left:0; top:20px; z-index:10}
.weapon-item .title-wrap{ height:40px; width:100%; line-height:40px; text-align:center; font-size:16px; position:absolute; bottom:0px; left:0px; z-index:20;}
.weapon-item .detail-wrap{ width:100%; height:100%;  position:absolute; left:0; top:0;z-index:30; background-color:rgba(0,0,0,.7); display:none}
.weapon-item .detail-wrap .desc{color:#ff7800; font-size:14px; text-align:center; width:144px; position:absolute; top:70px; left:10px; line-height:24px }
.weapon-item .detail-wrap .btn-view{ width:80px; height:30px; line-height:30px; background:#ff7800; color:#000; text-align:center;  position:absolute; bottom:12px; left:79px;}

.weapon-item.active .detail-wrap{ display:block}
.weapon-item.active .title-wrap{ top:38px; z-index:40; color:#ff7800; font-weight:bold}

.skill-list-wrap{ position:absolute; width:1000px; height:260px; left:0px; top:170px;}
.skill-item{ height:111px; float:left; display:inline; margin-right:2px; margin-bottom:2px; margin-bottom:10px; }
.skill-item .img-wrap{ float:left; display:inline; width:126px}
.skill-item .desc-wrap{ float:left; display:inline; width:323px; height:98px; margin-top:6px;  font-size:16px; color:#ffda03;  display:none}
.skill-item.active .desc-wrap{ display:block}
.skill-list-r1 .desc-wrap{ padding:10px 10px 10px 20px; background:  url(/images/2016/codol/2016/zt/act/others/skill/desc01.png) no-repeat;}
.skill-list-r2 .desc-wrap{ padding:10px 20px 10px 10px; background:  url(/images/2016/codol/2016/zt/act/others/skill/desc02.png) no-repeat;}

.prize-list{ position:absolute; width:1000px; height:260px; left:0px; top:170px;}
.prize-item{ width:304px;  height:304px; float:left; display:inline; margin-right:20px; margin-bottom:2px; margin-bottom:10px; border:2px solid #a89235; position:relative;background-color:rgba(0,0,0,.5) }
.prize-item .img-wrap{ float:left; display:inline; width:126px}
.prize-item .title-wrap{ height:40px; width:100%; line-height:40px; text-align:center; font-size:24px; position:absolute; bottom:0px; left:0px; z-index:20;}

.btn-getrole{ left:420px; top:550px; background:#a89235; color:#ffffff; width:410px; height:74px; line-height:74px; font-size:24px; text-align:center; text-indent:0}
.btn-weapon{ left:285px; top:660px; background:#a89235; color:#ffffff; width:410px; height:74px; line-height:74px; font-size:24px; text-align:center; text-indent:0}
.btn-go{ width:100px; height:56px; left:450px; bottom:10px;  background:  url(/images/2016/codol/2016/zt/act/others/btn-go.png) center bottom no-repeat; color:#d8be8a; font-size:14px; text-indent:0; text-align:center}

.intro-game{ position:absolute; left:276px; top:70px; width:654px; height:180px; font-size:14px; color:#fff; line-height:32px }
.intro-dao{ position:absolute; left:50px; top:166px; width:900px; height:180px; font-size:16px; color:#fff; line-height:32px }
.intro-role{ position:absolute; left:420px; top:166px; width:580px; height:400px; font-size:16px; color:#fff; line-height:32px }
.intro-lottery{position:absolute; left:240px; top:576px; width:700px; height:220px; color:#ffffff; font-size:16px; line-height: 28px}