.fullbg { position: relative; z-index: 1; width: 100%; max-width: 1920px; min-width: 1000px; margin: 0 auto; overflow: hidden; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/navbg.jpg) no-repeat center top #000!important; }
.wrapper { position: relative; width: 1000px; margin: 0 auto; }
.header { position: relative; height: 300px; }
.class .header { height: 81px; }
.content { position: relative; width: 100%; padding-bottom: 0; margin: 0 auto; }
.main { width: 1000px; margin: 0 auto; }
.footer { background: none; padding: 30px 0; }

a.logo { width: 220px; z-index: 2; top: 100px; }
.class a.logo { top: 20px; }

a.guideindex { position: absolute; top: 20px; right: 0; z-index: 2; display: block; width: 264px; height: 118px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/btns.png) no-repeat -1px -2px; }
a.guideindex:hover { background-position: -1px -123px; }

.classlist { position: relative; width: 100%; max-width: 1920px; min-width: 1000px; margin: 0 auto; }
.classscroll li { position: relative; }
/*.classscroll .classintro { position: absolute; left: 50px; top: 365px; font-size: 24px; color: #cfcfcf; }*/
.classscroll .classintro { position: absolute; left: 50px; top: 305px; font-size: 24px; color: #cfcfcf; }
.classscroll .classintro strong { color: #fff; }
.classscroll .classintro li { float: left; text-align: center; width: 130px; color: #cfcfcf; font-size: 16px; }
.classscroll .classintro p { padding: 10px 0; line-height: 38px; }

/*.bg1 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/mage.jpg) no-repeat center top; }
.bg2 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/necromancer.jpg) no-repeat center top; }
.bg3 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/paladin.jpg) no-repeat center top; }
.bg4 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/shadow.jpg) no-repeat center top; }
.bg5 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/vampire.jpg) no-repeat center top; }
.bg6 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/warrior.jpg) no-repeat center top; }*/
.bg1 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/mage.jpg) no-repeat center -60px; }
.bg2 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/necromancer.jpg) no-repeat center -60px; }
.bg3 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/paladin.jpg) no-repeat center -60px; }
.bg4 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/shadow.jpg) no-repeat center -60px; }
.bg5 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/vampire.jpg) no-repeat center -60px; }
.bg6 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/warrior.jpg) no-repeat center -60px; }
.bg7 { width: 100%; height: 1054px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/ranger.jpg) no-repeat center -60px; }

/*.classtabs { position: absolute; left: 50%; top: 0; z-index: 4; color: #fff; width: 1000px; margin-left: -500px; }*/
.classtabs { position: absolute; left: 50%; top: -60px; z-index: 4; color: #fff; width: 1000px; margin-left: -500px; }
.classtabs li { position: absolute; width: 79px; height: 84px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/btns.png) no-repeat 0 0; cursor: pointer; }

.classtabs li.ic1 { right: 155px; top: 170px; background-position: -472px -93px; }
.classtabs li.ic1.on, .classtabs li.ic1:hover { background-position: -351px -93px; }

.classtabs li.ic2 { right: 88px; top: 250px; background-position: -472px -4px; }
.classtabs li.ic2.on, .classtabs li.ic2:hover { background-position: -351px -4px; }

.classtabs li.ic3 { right: 56px; top: 350px; background-position: -472px -183px; }
.classtabs li.ic3.on, .classtabs li.ic3:hover { background-position: -351px -183px; }

.classtabs li.ic4 { right: 56px; top: 460px; background-position: -472px -272px; }
.classtabs li.ic4.on, .classtabs li.ic4:hover { background-position: -351px -272px; }

.classtabs li.ic5 { right: 95px; top: 570px; background-position: -472px -362px; }
.classtabs li.ic5.on, .classtabs li.ic5:hover { background-position: -351px -362px; }

.classtabs li.ic6 { right: 170px; top: 650px; background-position: -472px -451px; }
.classtabs li.ic6.on, .classtabs li.ic6:hover { background-position: -351px -451px; }

.classtabs li.ic7 { right: 280px; top: 700px; background-position: -472px -541px; }
.classtabs li.ic7.on, .classtabs li.ic7:hover { background-position: -351px -541px; }


.classlist a.prev, .classlist a.next { position: absolute; top: 30%; z-index: 5; display: block; width: 34px; height: 106px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/btns.png) no-repeat 0 0; }
.classlist a.prev { left: 20px; background-position: -3px -274px; }
.classlist a.next { right: 20px; background-position: -58px -274px; }
.classlist a.prev:hover { background-position: -3px -385px; }
.classlist a.next:hover { right: 20px; background-position: -58px -385px; }


.fullbg.doc { background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/commonbg.jpg) no-repeat center top #000!important; }
.doc .header, .veteran .header { height: 225px; }

.veteran a.logo { width: 180px; }
.doc a.guideindex { top: 100px; }

.content .title { width: 700px; height: 70px; margin: 0 auto; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/titles.png) no-repeat center top; text-indent: -999em; }
.title.t2 { background-position: center -153px; }
.title.t3 { background-position: center -78px; }
.title.t4 { background-position: center -301px; }
.title.t5 { background-position: center -225px; }
.title.t6 { background-position: center -6px; }

.line { width: 100%; height: 1px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/line.png) no-repeat center top; margin: 10px auto; }
.guidedetail { width: 80%; padding: 30px 20px 0 0; margin: 0 auto; color: #fff; font-size: 15px; line-height: 20px; }
.guidedetail p { padding: 5px 0; }
.guidedetail p strong { font-size: 20px; }
.guidedetail p em { font-weight: bold; font-style: normal; }
.guidedetail img { max-width: 100%; }
.doc .footer { padding: 100px 0 30px 0; }


.fullbg.home { background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/home.jpg) no-repeat center top #000!important; }
.fullbg.veteran { background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/newfeature.jpg) no-repeat center top #000!important; }
.home .content { position: relative; height: 700px; }
a.beginner { display: block; position: absolute; right: 120px; top: 20px; width: 205px; height: 205px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/ball.png) no-repeat -21px -246px; animation: updown 1.5s infinite alternate; -webkit-animation: updown 1.5s infinite alternate; }
a.veteran { display: block; position: absolute; right: 320px; top: 220px; width: 205px; height: 205px; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/ball.png) no-repeat -44px -33px; animation: updown2 1s ease-in-out infinite alternate; -webkit-animation: updown2 1s ease-in-out infinite alternate; }
a.beginner:hover { background-position: -242px -246px; } 
a.veteran:hover { background-position: -255px -33px; } 

.veterancont { width: 400px; padding-left: 600px; padding-top: 40px; color: #fde2ca; }
.veterancont h2 { font-size: 26px; border-bottom: 1px solid #fde2ca; padding: 10px 0; margin-bottom: 20px; }
.veterancont p { line-height: 28px; padding: 5px 0; font-size: 16px; }
.veterancont .detailbtn { display: block; width: 240px; height: 40px; line-height: 40px; font-size: 16px; text-align: center; background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/btns.png) no-repeat 0 -503px; color: #fde2ca; margin: 20px 0 20px 160px; }
.veterancont .detailbtn:hover { background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/btns.png) no-repeat 0 -550px; }
.veteran .content { height: 800px; }

@keyframes updown{
	from{margin-top:40px;}
	to{margin-top:0;}
}
@-webkit-keyframes updown{
	from{margin-top:40px;}
	to{margin-top:0;}
}

@keyframes updown2{
	from{margin-top:40px;}
	to{margin-top:20px;}
}
@-webkit-keyframes updown2{
	from{margin-top:40px;}
	to{margin-top:20px;}
}


/*beginner index*/
.fullbg.beginner { background: url(https://images.eudemons.com/uploads/eo/2018/en/landing/beginner.jpg) no-repeat center top #000!important; }
/*.beginner .header { position: relative; height: 300px; }
.beginner .content { padding-bottom: 0; }
.beginner .main { width: 1000px; margin: 0 auto; }
.beginner .footer { background: none; padding: 30px 0; }*/


.iconlist { position: relative; width: 1000px; height: 900px; margin: 0 auto; }
.iconlist li { position: absolute; }
.iconlist li a { display: block; }
.iconlist li a:hover { animation: bounce 1s, enlarge 1s; -moz-animation: bounce 1s, enlarge 1s; -webkit-animation: bounce 1s, enlarge 1s; -o-animation: bounce 1s, enlarge 1s;}
.gd1 { left: 50px; top: 80px; }
.gd2 { left: 418px; top: 0; }
.gd3 { left: 720px; top: 80px; }
.gd4 { left: 35px; top: 380px; }
.gd5 { left: 338px; top: 342px; }
.gd6 { left: 609px; top: 458px; }


.guidenav { position: absolute; left: 0; top: 20px; border-left: 3px solid #fff; height: 16px; line-height: 16px; padding-left: 10px; color: #ccc; font-size: 16px; }
.guidenav a { font-size: 18px; }
.guidenav a:hover { text-decoration: underline; }
.ztop { z-index: 66; }

.doc .guidenav { top: 101px; }

@-webkit-keyframes bounce {
	0%,100%,20%,53%,80% {
		-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
		transition-timing-function: cubic-bezier(.215,.61,.355,1);
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0)
	}

	40%,43% {
		-webkit-transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		-webkit-transform: translate3d(0,-30px,0);
		transform: translate3d(0,-30px,0)
	}

	70% {
		-webkit-transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		-webkit-transform: translate3d(0,-15px,0);
		transform: translate3d(0,-15px,0)
	}

	90% {
		-webkit-transform: translate3d(0,-4px,0);
		transform: translate3d(0,-4px,0)
	}
}

@keyframes bounce {
	0%,100%,20%,53%,80% {
		-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
		transition-timing-function: cubic-bezier(.215,.61,.355,1);
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0)
	}

	40%,43% {
		-webkit-transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		-webkit-transform: translate3d(0,-30px,0);
		transform: translate3d(0,-30px,0)
	}

	70% {
		-webkit-transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		transition-timing-function: cubic-bezier(.755,.05,.855,.06);
		-webkit-transform: translate3d(0,-15px,0);
		transform: translate3d(0,-15px,0)
	}

	90% {
		-webkit-transform: translate3d(0,-4px,0);
		transform: translate3d(0,-4px,0)
	}
}

@-webkit-keyframes enlarge {
	0% {
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}

	10%,20% {
		-webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
		transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
	}

	30%,50%,70%,90% {
		-webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
		transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
	}

	40%,60%,80% {
		-webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
		transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
	}

	100% {
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}
}

@keyframes enlarge {
	0% {
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}

	10%,20% {
		-webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
		transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
	}

	30%,50%,70%,90% {
		-webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
		transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
	}

	40%,60%,80% {
		-webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
		transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
	}

	100% {
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1)
	}
}