@import url(//tlhj.changyou.com/logo/logo.css);
* { box-sizing: border-box; }

:before, :after { pointer-events: none; }

@font-face { font-family: 'hyjk'; src: url(hyjk.ttf); }

@font-face { font-family: 'hysw'; src: url(hysw.ttf); }

html { width: 100vw; height: 100vh; font-size: calc(100vh / 1080); margin: 0 auto; background: #c8d6de; }

body._popupScrollLock { position: static !important; }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@keyframes pulse { 0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); } }

::-webkit-scrollbar { width: 5rem; }

::-webkit-scrollbar-track { border-radius: 5rem; background-color: #748bae; }

::-webkit-scrollbar-thumb { border-radius: 5rem; background-color: #dce8f1; }

#cyou_top { background-size: 100% 65px !important; }

#cyou_bottom { height: auto !important; background-size: 100% 65px !important; }

body { width: 100%; height: 100%; }

.snow-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 44; pointer-events: none; }

.snowImg { width: 0; height: 0; visibility: hidden; pointer-events: none; display: none; }

.wrap { width: 100%; height: calc(100% - 55px); font-family: 'hyjk'; position: relative; }

.aslide { display: flex; flex-direction: column; align-items: center; position: absolute; top: 50%; left: 22rem; transform: translateY(-50%); z-index: 11; opacity: 1; pointer-events: auto; transition: opacity .6s; opacity: 0; pointer-events: none; }

.aslide.active { opacity: 1; pointer-events: auto; }

.aslide-item { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }

.aslide-item:before { content: ''; width: 13rem; height: 411rem; background: url(../img/alsie-line.png) no-repeat center/cover; position: absolute; left: 50%; bottom: 70rem; transform: translateX(-50%); z-index: -1; }

.aslide-item li { display: flex; flex-direction: column; width: 208rem; height: 58rem; margin-bottom: 28rem; }

.aslide-item li:last-child { margin-bottom: 0; }

.aslide-item li.active a { background-position-y: -58rem; }

.aslide-item li.active[data-name="home"] a { background-position-y: -71rem; }

.aslide-item li[data-name="rank"] a { background-position-x: 0; }

.aslide-item li[data-name="guide"] a { background-position-x: -208rem; }

.aslide-item li[data-name="reward"] a { background-position-x: -416rem; }

.aslide-item li[data-name="double"] a { background-position-x: -624rem; }

.aslide-item li[data-name="grow"] a { background-position-x: -832rem; }

.aslide-item li[data-name="grow"] a:after { content: ''; width: 166rem; height: 21rem; background: url(../img/alside-grow-after.png) no-repeat center/cover; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }

.aslide-item li[data-name="home"] { margin-top: 10rem; width: 71rem; height: 71rem; }

.aslide-item li[data-name="home"] a { background: url(../img/alsie-home.png) no-repeat 0 0/71rem 142rem; }

.aslide-item li[data-name="home"] a:hover { background-position-y: -71rem; }

.aslide-item a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-indent: 0; color: transparent; background: url(../img/alsie.png) no-repeat 0 0/1040rem 116rem; transition: all .3s; position: relative; }

.aslide-item a:hover { background-position-y: -58rem; }

.main { width: 100%; height: 100%; }

.page { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-image: url(../img/bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }

.page-title { width: auto; height: 65rem; margin-bottom: 42rem; }

.page-con { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }

.page-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 1423rem; height: 763rem; padding: 0 150rem; background: url(../img/page-box.png) no-repeat center/cover; position: relative; }

.page-desc { display: flex; flex-direction: column; margin: -21rem 0 0; }

.page-desc p, .page-desc strong { font-size: 22rem; color: #33396d; }

.page-desc strong { font-weight: bold; color: #b50a0a; }

.home { justify-content: flex-end; background-image: url(../img/home.jpg); }

.home-logo { width: 207rem; height: 137rem; font-size: 0; color: transparent; background: url(../img/logo.png) no-repeat center/cover; position: absolute; top: 25rem; left: 30rem; }

.home-slogan { width: 1132rem; height: 371rem; font-size: 0; color: transparent; background: url(../img/home-slogan.png) no-repeat center/cover; }

.rank-head { display: flex; flex-direction: column; }

.rank-btn { align-self: flex-end; display: flex; justify-content: center; align-items: center; width: 278rem; height: 34rem; font-size: 20rem; color: #6c4116; background: url(../img/rank-btn.png) no-repeat center/cover; }

.rank-desc { display: flex; flex-direction: column; padding-top: 15rem; }

.rank-desc p { font-size: 18rem; color: #3b4c59; }

.rank-content { display: flex; flex-direction: column; width: 100%; }

.rank-box { display: flex; align-items: flex-end; }

.rank-tab { display: flex; flex-direction: column; justify-content: space-between; height: 400rem; padding-right: 50rem; }

.rank-tab li { display: flex; width: 167rem; height: 43rem; }

.rank-tab li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 24rem; color: #3b4c59; padding: 5rem 15rem 0 0; }

.rank-tab li.active { background-repeat: no-repeat; background-position: center; background-size: cover; }

.rank-tab li.active:nth-child(1) { background-image: url(../img/rank-tab-0.png); }

.rank-tab li.active:nth-child(1) a { color: #986a1d; }

.rank-tab li.active:nth-child(2) { background-image: url(../img/rank-tab-1.png); }

.rank-tab li.active:nth-child(3) { background-image: url(../img/rank-tab-2.png); }

.rank-tab li.active:nth-child(4) { background-image: url(../img/rank-tab-3.png); }

.rank-tab li.active:nth-child(5) { background-image: url(../img/rank-tab-4.png); }

.rank-tab li.active a { color: #fff; }

.rank-info { display: flex; flex-direction: column; }

.rank-info-desc { display: flex; flex-direction: column; padding-bottom: 10rem; line-height: 1.2; }

.rank-info-desc div { display: flex; justify-content: space-between; align-items: center; width: 100%; }

.rank-info-desc strong { font-size: 30rem; color: #3b4c59; }

.rank-info-desc p { font-size: 18rem; color: #3b4c59; }

.rank-info-desc dl { display: flex; }

.rank-info-desc dl dd { display: flex; justify-content: center; align-items: center; width: 95rem; height: 29rem; font-size: 16rem; color: #fff; background: url(../img/guide-list-toggle.png) no-repeat center/cover; margin: 0 2rem; cursor: pointer; }

.rank-info-desc dl dd.big { width: 160rem; background-image: url(../img/guide-list-toggle-big.png); }

.rank-info-desc dl dd.active { color: #a05d2f; background: url(../img/guide-list-goggle-active.png) no-repeat center/cover; }

.rank-info-desc dl dd.active.big { background-image: url(../img/guide-list-toggle-big-active.png); }

.rank-info-table { width: 936rem; }

.rank-info-table table { width: 100%; border-collapse: collapse; border: 1rem solid #deb15b; }

.rank-info-table thead td { height: 56rem; font-size: 24rem; color: #ce9130; font-weight: bold; }

.rank-info-table td { height: 46rem; font-size: 15rem; color: #3b4c59; text-align: center; border: 1rem solid #deb15b; }

.rank-info-table td:nth-child(1) { width: 155rem; }

.rank-info-table td:nth-child(2) { width: 264rem; }

.rank-info-table td:nth-child(3) { width: 280rem; }

.rank-info-table td:nth-child(4) { width: 140rem; }

.rank-tips { font-size: 18rem; color: #3b4c59; padding-top: 20rem; }

.guide .page-box { justify-content: flex-start; padding-top: 50rem; }

.guide-tab { display: flex; align-items: center; }

.guide-tab li { display: flex; width: 194rem; height: 43rem; margin: 0 50rem; }

.guide-tab li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 22rem; color: #fff; background: url(../img/guide-tab.png) no-repeat center/cover; }

.guide-tab li.active a { color: #4c3a30; background-image: url(../img/guide-tab-active.png); }

.guide-small { display: flex; align-items: center; }

.guide-small li { display: flex; margin: 30rem 5rem 0; }

.guide-small li.active a { background-image: url(../img/guide-small-active.png); }

.guide-small a { display: flex; justify-content: center; align-items: center; width: 151rem; height: 29rem; font-size: 16rem; color: #ae772c; background: url(../img/guide-small.png) no-repeat center/cover; }

.guide-list { display: flex; flex-wrap: wrap; justify-content: center; width: 1170rem; height: 570rem; padding: 20rem 0 0; margin-top: 30rem; overflow-y: auto; }

.guide-list li { flex: none; display: flex; flex-direction: column; align-items: center; width: 378rem; height: 203rem; background: url(../img/guide-list.png) no-repeat center/100%; margin: 0 10rem 65rem 0; position: relative; }

.guide-list li:last-child { margin-bottom: 0; }

.guide-list li.big { width: 471rem; background-image: url(../img/guide-list-big.png); margin: 0 50rem 65rem; }

.guide-list li.big h6 { width: 286rem; height: 44rem; background-image: url(../img/guide-list-title-big.png); }

.guide-list li.small { width: 345rem; background-image: url(../img/guide-list-small.png); margin: 0 100rem 65rem; }

.guide-list li.small h6 { width: 286rem; height: 44rem; background-image: url(../img/guide-list-title-big.png); }

.guide-list li.super { width: 761rem; height: 228rem; background-image: url(../img/guide-list-super.png); }

.guide-list li.super h6 { width: 521rem; height: 50rem; background-image: url(../img/guide-list-title-super.png); }

.guide-list li.super dd:last-child { position: relative; }

.guide-list li.super dd:last-child:before { content: ''; width: 1rem; height: 80%; background: #303e61; position: absolute; left: -20rem; top: 0; transform: translate(0, 0); }

.guide-list h6 { display: flex; justify-content: center; align-items: center; width: 216rem; height: 36rem; font-size: 20rem; color: #303e61; background: url(../img/guide-list-title.png) no-repeat center/cover; margin-top: -16rem; position: relative; }

.guide-list h6 i, .guide-list h6 em { font-size: 20rem; color: #215183; font-style: normal; position: absolute; bottom: 0; transform: translateY(110%); }

.guide-list h6 em { color: #93752e; }

.guide-list h6.big { width: 286rem; height: 44rem; background-image: url(../img/guide-list-title-big.png); }

.guide-list span { color: #b50a0a; }

.guide-list dl { flex: auto; display: flex; justify-content: space-evenly; align-items: center; width: 100%; padding-top: 15rem; }

.guide-list dd { display: flex; flex-direction: column; align-items: center; width: 100rem; margin: 0 7rem; }

.guide-list dd div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100rem; background: url(../img/guide-icon.png) no-repeat center/cover; }

.guide-list dd img { width: 70%; height: 70%; object-fit: cover; }

.guide-list dd strong { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 130%; height: 30rem; font-size: 14rem; color: #303e61; font-weight: 400; line-height: 1.1; text-align: center; margin-top: 3rem; }

.guide-list dd strong em { font-size: 12rem; color: #b87810; }

.guide-list p { display: flex; position: absolute; bottom: 0; transform: translateY(130%); }

.guide-list p a { display: flex; justify-content: center; align-items: center; width: 95rem; height: 29rem; font-size: 16rem; color: #fff; background: url(../img/guide-list-toggle.png) no-repeat center/cover; margin: 0 2rem; }

.guide-list p a:last-child { width: 160rem; background-image: url(../img/guide-list-toggle-big.png); }

.guide-list p a.active { color: #a05d2f; background: url(../img/guide-list-goggle-active.png) no-repeat center/cover; }

.guide-list p a.active:last-child { background-image: url(../img/guide-list-toggle-big-active.png); }

.reward .page-box { padding: 0; }

.reward-tab { display: flex; align-items: center; opacity: 0; pointer-events: none; transition: all .3s; }

.reward-tab.active { opacity: 1; pointer-events: auto; }

.reward-tab li { display: flex; width: 271rem; height: 42rem; margin: 0 10rem; }

.reward-tab li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 24rem; color: #fff; background: url(../img/reward-tab.png) no-repeat center/100%; }

.reward-tab li.active a { color: #4c3a30; background-image: url(../img/reward-tab-active.png); }

.reward-box { display: flex; align-items: center; width: 1159rem; height: 573rem; background: url(../img/reward-list.png) no-repeat center/cover; margin-top: 30rem; opacity: 0; pointer-events: none; transition: all .3s; }

.reward-box.active { opacity: 1; pointer-events: auto; }

.reward-list { display: flex; flex-wrap: wrap; align-content: flex-start; width: 1137rem; height: 540rem; padding: 0 10rem; overflow-y: auto; overflow-x: hidden; }

.reward-list li { flex: none; display: flex; align-items: center; width: 1137rem; height: 92rem; padding: 0 0 0 10rem; position: relative; }

.reward-list li:nth-child(2n) { background: rgba(204, 228, 255, 0.36); }

.reward-list i { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 151rem; height: 50rem; font-size: 25rem; color: #785019; font-style: normal; text-align: center; background: url(../img/reward-list-name.png) no-repeat center/cover; margin-right: 25rem; }

.reward-list h6 { display: flex; align-items: center; font-size: 24rem; color: #b87810; font-weight: 400; width: 220rem; }

.reward-list dl { display: flex; align-items: center; width: 500rem; }

.reward-list dd { display: flex; align-items: center; width: 50%; }

.reward-list div { flex: none; display: flex; justify-content: center; align-items: center; width: 78rem; height: 78rem; background: url(../img/guide-icon.png) no-repeat center/cover; }

.reward-list img { width: 62rem; height: 62rem; object-fit: cover; }

.reward-list p { display: flex; justify-content: center; font-size: 16rem; color: #26265a; padding-left: 10rem; }

.reward-list span { font-size: 24rem; color: #26265a; }

.reward-mask { display: flex; flex-direction: column; align-items: center; position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); transition: all .3s; }

.reward-mask.active { opacity: 0; pointer-events: none; }

.reward-mask img { width: 1262rem; height: 443rem; }

.reward-mask a { width: 313rem; height: 75rem; font-size: 0; color: transparent; background: url(../img/reward-mask-btn.png) no-repeat center/cover; margin-top: -50rem; }

.grow .page-box { justify-content: flex-start; padding-top: 50rem; }

.grow-tab { display: flex; align-items: center; }

.grow-tab li { display: flex; width: 194rem; height: 43rem; margin: 0 5rem; }

.grow-tab li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 22rem; color: #fff; background: url(../img/guide-tab.png) no-repeat center/cover; }

.grow-tab li.active a { color: #4c3a30; background-image: url(../img/guide-tab-active.png); }

.grow-tips { font-size: 20rem; color: #b47700; margin: 10rem 0 -10rem 0; }

.grow-small { display: flex; align-items: center; }

.grow-small li { display: flex; margin: 15rem 5rem 0; }

.grow-small li.active a { color: #4c3a30; background-image: url(../img/grow-small-active.png); }

.grow-small a { display: flex; justify-content: center; align-items: center; width: 95rem; height: 29rem; font-size: 16rem; color: #fff; background: url(../img/grow-small.png) no-repeat center/cover; }

.grow-list { display: flex; flex-wrap: wrap; justify-content: center; width: 1170rem; height: auto; padding: 20rem 0 0; margin-top: 30rem; overflow-y: auto; }

.grow-list li { flex: none; display: flex; flex-direction: column; align-items: center; width: 378rem; height: 203rem; background: url(../img/guide-list.png) no-repeat center/100%; margin: 0 10rem 65rem 0; position: relative; }

.grow-list li:nth-child(3), .grow-list li:last-child { margin-bottom: 0 !important; }

.grow-list li.big { width: 471rem; background-image: url(../img/guide-list-big.png); margin: 0 50rem 65rem; }

.grow-list li.big h6 { width: 286rem; height: 44rem; background-image: url(../img/guide-list-title-big.png); }

.grow-list li.small { width: 345rem; background-image: url(../img/guide-list-small.png); margin: 0 100rem 65rem; }

.grow-list li.small h6 { width: 286rem; height: 44rem; background-image: url(../img/guide-list-title-big.png); }

.grow-list li.super { width: 761rem; height: 228rem; background-image: url(../img/guide-list-super.png); }

.grow-list li.super h6 { width: 521rem; height: 50rem; background-image: url(../img/guide-list-title-super.png); }

.grow-list h6 { display: flex; justify-content: center; align-items: center; width: 216rem; height: 36rem; font-size: 20rem; color: #303e61; background: url(../img/guide-list-title.png) no-repeat center/cover; margin-top: -16rem; position: relative; }

.grow-list h6 i, .grow-list h6 em { font-size: 20rem; color: #215183; font-style: normal; position: absolute; bottom: 0; transform: translateY(110%); }

.grow-list h6 em { color: #93752e; }

.grow-list h6.big { width: 286rem; height: 44rem; background-image: url(../img/guide-list-title-big.png); }

.grow-list span { color: #b50a0a; }

.grow-list dl { flex: auto; display: flex; justify-content: space-evenly; align-items: center; width: 100%; padding-top: 15rem; }

.grow-list dd { display: flex; flex-direction: column; align-items: center; width: 100rem; margin: 0 7rem; }

.grow-list dd div { display: flex; justify-content: center; align-items: center; width: 100%; height: 100rem; background: url(../img/guide-icon.png) no-repeat center/cover; }

.grow-list dd img { width: 70%; height: 70%; object-fit: cover; }

.grow-list dd strong { display: flex; justify-content: center; width: 130%; height: 30rem; font-size: 14rem; color: #303e61; font-weight: 400; line-height: 1.1; text-align: center; margin-top: 3rem; }

.grow-list p { display: flex; position: absolute; bottom: 0; transform: translateY(130%); }

.grow-list p a { display: flex; justify-content: center; align-items: center; width: 95rem; height: 29rem; font-size: 16rem; color: #fff; background: url(../img/guide-list-toggle.png) no-repeat center/cover; margin: 0 2rem; }

.grow-list p a:last-child { width: 160rem; background-image: url(../img/guide-list-toggle-big.png); }

.grow-list p a.active { color: #a05d2f; background: url(../img/guide-list-goggle-active.png) no-repeat center/cover; }

.grow-list p a.active:last-child { background-image: url(../img/guide-list-toggle-big-active.png); }

.double-list { display: flex; align-items: flex-start; height: 763rem; padding-top: 50rem; }

.double-list li { display: flex; flex-direction: column; align-items: center; width: 358rem; height: 555rem; padding-top: 47rem; background: url(../img/double-item.png) no-repeat center/cover; margin: 0 25rem; }

.double-list li:nth-child(2) { margin-top: 50rem; }

.double-list div { display: flex; justify-content: center; align-items: center; width: 235rem; height: 235rem; border-radius: 50%; background: url(../img/double-icon.png) no-repeat center/cover; position: relative; }

.double-list div img { width: 250rem; height: 250rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.double-list span { display: flex; justify-content: center; align-items: center; width: 241rem; height: 51rem; font-size: 36rem; color: #3c4376; background: url(../img/double-name.png) no-repeat center/cover; position: relative; margin: 15rem 0 20rem; }

.double-list span:after { content: ''; width: 252rem; height: 9rem; background: url(../img/double-name-after.png) no-repeat center/cover; position: absolute; bottom: -17rem; }

.double-list p { max-width: 280rem; font-size: 16rem; color: #fff; text-align: center; }

.double-list dl { display: flex; }

.double-list dd { display: flex; flex-direction: column; align-items: center; margin: 15rem 15rem 0; }

.double-list dd img { width: 40rem; height: 40rem; }

.double-list dd em { font-size: 14rem; color: #fff; }

.footer { height: auto; }

@keyframes reward-name-swing { 0% { transform: rotate(10deg); }
  50% { transform: rotate(-5deg); }
  100% { transform: rotate(10deg); } }