@charset "utf-8";
body{ margin: 0 auto; padding: 0; font-size: 14px; font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none; overflow-x: hidden; overflow-y: auto;}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6{ font-size: 100%; font-weight: normal;}
*{ outline: none;}
img{ border: 0;}
ol,ul{ list-style: none;}
a{ font-family: "Microsoft Yahei",Arial, Helvetica, sans-serif; text-decoration: none; outline: none; cursor: pointer;}
a:hover{ text-decoration: none;}

.wrap{ position: relative; width: 100%; max-width: 1920px; height: 5330px; margin: 0 auto; background: url(../images/bg.jpg) no-repeat center top;}
.section-box{ position: relative; overflow: hidden; width: 100%;}
/* section-head */
#section-head{ height: 1057px; }
.logo{ position: absolute; left: 36px; top: 26px;}
.top-nav{ display: flex; position: absolute; right: 47px; top: 42px; z-index: 5; width: 600px; height: 37px; justify-content: flex-end;}
.top-nav a{ display: block; position: relative; width: 127px; height: 37px; margin-left: 20px;}
.top-nav a img{ display: none; position: absolute; left: -35px; top: 40px; width: 200px;}
.top-nav a:hover{ background-position: 0 -37px;}
.top-nav a:hover img{ display: block;}
.btn-rule1{ background: url(../images/btn-rule1.png) no-repeat;}
.btn-main{ background: url(../images/btn-main.png) no-repeat;}
.btn-download{ background: url(../images/btn-download.png) no-repeat;}

.login-box{ position: absolute; right: 47px; top: 93px; width: 950px; height: 28px;}
.login-box div{ width: 100%; height: 100%; font-size: 16px; line-height: 28px; color: #564a59; text-align: right;}
.login-after{ display: none;}
.btn-login,.btn-logout{ color: #b70f1d; cursor: pointer;}

.btn-rule2{ position: absolute; left: 50%; top: 708px; transform: translate(-50%,0); width: 310px; height: 90px; background: url(../images/btn-rule2.png) no-repeat; cursor: pointer;}
/* section-yy */
#section-yy{ height: 1098px;}
.btn-rule3{ position: absolute; left: 50%; top: 43px; width: 97px; height: 25px; margin-left: 470px; background: url(../images/btn-rule3.png) no-repeat; cursor: pointer;}
.section-t{ display: block; margin: 0 auto;}
.yy-prize{ position: relative; margin: 48px auto 0; width: 1228px; height: 517px; background: url(../images/yy-prize.png) no-repeat;}
.yy-prize-info{ display: flex; position: absolute; left: 12px; bottom: 0; width: 1204px; height: 44px; justify-content: center;}
.yy-prize-info li{ width: 25%; height: 44px; font-size: 18px; line-height: 22px; color: #a98e70; text-align: center;}
.yy-tip{ height: 52px; margin-top: 40px; font-size: 17px; line-height: 52px; color: #407cc9; text-align: center;}
#btn-yy{ display: block; width: 339px; height: 129px; margin: 0 auto; background: url(../images/btn-yy.png) no-repeat; cursor: pointer;}
#btn-yy.done{ background: url(../images/btn-yy-done.png) no-repeat; cursor: default;}
/* section-team */
#section-team{ height: 1315px;}
.team-tip{ height: 76px; font-size: 17px; line-height: 60px; color: #6cc6c0; text-align: center;}
.btn-wrap{ display: flex; width: 100%; height: 86px; justify-content: center;}
.btn-wrap div{ height: 86px; margin: 0 46px; cursor: pointer;}
.btn-team-create{ width: 335px; background: url(../images/btn-team-create.png) no-repeat;}
.btn-team-join{ width: 335px; background: url(../images/btn-team-join.png) no-repeat;}
.btn-team-invite{ display: none; width: 321px; background: url(../images/btn-team-invite.png) no-repeat;}
.team-prize{ display: flex; width: 100%; height: 461px; margin-top: 72px; justify-content: center;}
.team-prize li{ position: relative; width: 265px; height: 461px; margin: 0 16px;}
.team-prize li img{ display: block; width: 100%;}
.team-prize li span{ display: none; position: absolute; left: -20px; top: -20px; width: 157px; height: 63px; background: url(../images/icon-done.png) no-repeat; cursor: pointer;}
.team-prize li.done span{ display: block;}

.team-box{ display: none; position: absolute; left: 50%; top: 817px; transform: translate(-48%,0); width: 1444px; height: 361px; background: url(../images/team-bg.png) no-repeat;}
.team-member-list{ display: flex; width: 810px; height: 190px; margin: 77px 0 0 290px; justify-content: center;}
.team-member-list li{ position: relative; width: 196px; height: 190px;}
.team-member-list li div{ position: relative; width: 159px; height: 160px; margin: 0 auto; background: url(../images/tx-bg.png) no-repeat;}
.btn-tx-invite,.team-member-list li div img{ position: absolute; left: 32px; top: 33px; width: 98px; height: 98px; border-radius: 98px;}
.btn-tx-invite{ cursor: pointer;}
.team-member-list li div img{ display: none; z-index: 2;}
.team-member-list li .nickname{ position: absolute; left: 0; bottom: 0; overflow: hidden; width: 100%; height: 28px; font-size: 20px; line-height: 28px; color: #469ba8; text-align: center;}
.leader-tag{ position: absolute; left: -54px; top: 0; z-index: 3; width: 82px; height: 27px; background: url(../images/leader-tag.png) no-repeat;}
.team-code{ position: absolute; left: 866px; top: 74px; width: 328px; height: 26px; font-size: 20px; line-height: 26px; color: #bd750e; text-align: right;}
/* section-progress */
#section-progress{ height: 540px;}
.progress-box{ position: relative; width: 1069px; height: 240px; margin: 64px auto 0; background: url(../images/progress-bg.png) no-repeat;}
.all-progress-line{ position: absolute; left: 0; top: 160px; overflow: hidden; width: 1061px; height: 9px; border-radius: 9px;}
.all-progress-line span{ display: block; width: 0%; height: 9px; background-color: #e86f17; border-radius: 9px;}
.all-progress{ position: absolute; left: 0; top: 155px; width: 100%; height: 19px;}
.all-progress li{ position: absolute; top: 0; width: 19px; height: 19px; border-radius: 19px;}
.all-progress li.on{ background-color: #e86f17;}
.all-progress li:nth-child(1){ left: 75px;}
.all-progress li:nth-child(2){ left: 212px;}
.all-progress li:nth-child(3){ left: 348px;}
.all-progress li:nth-child(4){ left: 632px;}
.all-progress li:nth-child(5){ left: 969px;}
/* section-version */
#section-version{ height: 855px;}
.version-box{ position: relative; width: 1084px; height: 494px; margin: 38px auto 0; background: url(../images/version-bg.png) no-repeat center 24px;}
.version-swiper{ width: 100%; height: 100%;}
.version-item-t{ position: absolute; left: 452px; top: 89px;}
.version-item-info{ position: absolute; left: 458px; top: 159px; overflow: hidden; width: 462px; height: 86px; font-size: 18px; line-height: 25px; color: #3f3f3f;}
.version-item-info span{ color: #db5c2a;}
.version-swiper .swiper-pagination-bullet{ width: 24px; height: 24px; background: url(../images/icon-page.png) no-repeat; border-radius: 0; opacity: 1;}
.version-swiper .swiper-pagination-bullet-active{ background: url(../images/icon-page-on.png) no-repeat;}

.version-view{ position: absolute; left: 145px; top: 0; z-index: 5;}
.version-tab{ position: absolute; left: 464px; top: 243px; z-index: 5; width: 480px; height: 91px;}
.version-tab li{ float: left; width: 95px; height: 91px; margin-right: 9px; cursor: pointer; opacity: .6;}
.version-tab li.on{ opacity: 1;}
.version-tab li:nth-child(1){ background: url(../images/version-nav1.png) no-repeat 0 0;}
.version-tab li:nth-child(2){ background: url(../images/version-nav2.png) no-repeat 0 0;}
.version-tab li:nth-child(3){ background: url(../images/version-nav3.png) no-repeat 0 0;}
.version-tab li:nth-child(4){ background: url(../images/version-nav4.png) no-repeat 0 0;}
.btm-prev-version,.btm-next-version{ position: absolute; top: 170px; z-index: 5; width: 58px; height: 109px; cursor: pointer;}
.btm-prev-version{ left: 0; background: url(../images/btn-prev.png) no-repeat;}
.btm-next-version{ right: 0; background: url(../images/btn-next.png) no-repeat;}
.swiper-button-disabled{ opacity: .3; cursor: default;}
/* section-ewm */
#section-ewm{ height: 640px;}
.ewm_list{ display: flex; width: 100%; height: 230px; margin: 54px auto 0; justify-content: center;}
.ewm_list li{ width: 188px; height: 222px; margin: 0 20px; background-color: #fff; border: 1px solid #f37472;}
.ewm_list li div{ position: relative; width: 188px; height: 188px;}
.ewm_list li div img{ width: 100%; height: 100%;}
.ewm_list li p{ width: 100%; height: 34px; font-size: 20px; line-height: 34px; color: #fff; text-align: center;  background-color: #f37472;}
/* float-nav */
.float-nav{ position: fixed; right: 2px; bottom: 50px; z-index: 10; width: 259px; height: 404px; padding-top: 76px; box-sizing: border-box; background: url(../images/float-nav-bg.png) no-repeat;}
.float-nav span{ display: block; width: 173px; height: 44px; margin: 0 auto 18px; cursor: pointer; background: url(../images/float-nav.png) no-repeat;}
#nav-go-home{ background-position: 0 0;}
#nav-go-home.on{ background-position: -173px 0;}
#nav-go-yy{ background-position: 0 -61px;}
#nav-go-yy.on{ background-position: -173px -61px;}
#nav-go-team{ background-position: 0 -123px;}
#nav-go-team.on{ background-position: -173px -123px;}
#nav-go-progress{ background-position: 0 -185px;}
#nav-go-progress.on{ background-position: -173px -185px;}
#nav-go-version{ background-position: 0 -247px;}
#nav-go-version.on{ background-position: -173px -247px;}

/* pop */
.pop-fixed{ display: none; position: fixed; left: 0; top: 0; z-index: 991; width: 100%; height: 100%; background:rgba(0,0,0,0.8);}
.pop-bg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.icon-close{ position: absolute; right: 88px; top: 62px; z-index: 5; width: 52px; height: 52px; background: url(../images/icon-close.png) no-repeat; cursor: pointer;}
/* pop-msg */
#pop-msg{ z-index: 999;}
.pop-bg1{ width: 730px; height: 871px; background:url(../images/pop-bg1.png) no-repeat;}
.msg{ display: flex; width: 538px; height: 438px; margin: 214px auto 0; font-size: 30px; line-height: 42px; color: #336c8a; align-items: center; justify-content: center; text-align: center;}
/* pop-rule */
.pop-t{ display: block; margin: 91px auto 0;}
.cus-scroll{ overflow-y: auto; overflow-x: hidden;}
.cus-scroll::-webkit-scrollbar{ width: 6px; background-color: #336c8a;}
.cus-scroll::-webkit-scrollbar-thumb{ width: 6px; background-color: #a1e2e4;}
.pop-rule-scroll{ width: 528px; height: 530px; margin: 30px 0 0 106px;}
.rule-list{ width: 500px;}
.rule-list li{ padding-bottom: 10px; font-size: 22px; line-height: 32px; color: #336c8a;}
.bold{ font-weight: bold;}
.color-red{ color: #ff0d0d;}
/* pop-createrole */
.tx-tip{ height: 70px; font-size: 22px; line-height: 70px; color: #336c8a; text-align: center;}
.choise-tx-wrap{ position: relative; width: 460px; height: 160px; margin: 19px auto 0;}
.role-tx-box{ position: relative; width: 159px; height: 160px; margin: 0 auto ; background: url(../images/tx-bg2.png) no-repeat;}
.role-tx-box img{ display: none; position: absolute; left: 32px; top: 32px; width: 98px; height: 98px; border-radius: 98px;}
.btn-prev-tx,.btn-next-tx{ position: absolute; top: 24px; width: 58px; height: 109px; cursor: pointer;}
.btn-prev-tx{ left: 0; background: url(../images/btn-prev2.png) no-repeat 0 0;}
.btn-next-tx{ right: 0; background: url(../images/btn-next2.png) no-repeat 0 0;}
#role-name{ display: block; width: 418px; height: 52px; margin: 38px auto 0; padding: 0 25px; box-sizing: border-box; font-size: 26px; line-height: 52px; color: #336c8a; background-color: #fff; border: 1px solid #90cfd9; outline: 0;}
.btn-sub{ display: block; width: 340px; height: 76px; margin: 60px auto 0; background: url(../images/btn-sub.png) no-repeat; cursor: pointer;}
/* pop-createrole-succ */
#pop-createrole-succ .pop-t{ margin-top: 138px;}
.pop-text{ width: 538px; margin: 144px auto 0; font-size: 30px; line-height: 40px; color: #336c8a; text-align: center;}
/* pop-createrole-first */
#pop-createrole-first .pop-text{ margin-top: 340px;}
.btn-cr-first-go{ display: block; width: 340px; height: 76px; margin: 200px auto 0; background: url(../images/btn-cr-first-go.png) no-repeat; cursor: pointer;}
/* pop-createteam-confirm */
#pop-createteam-confirm .pop-text{ width: 100%; margin-top: 280px; font-size: 26px;}
.pop-btn-wrap{ width: 340px; margin: 100px auto 0;}
.pop-btn-wrap span{ display: block; width: 340px; height: 76px; margin-bottom: 40px; cursor: pointer;}
.btn-confirm{ background: url(../images/btn-confirm.png) no-repeat;}
.btn-cancel{ background: url(../images/btn-cancel.png) no-repeat;}
/* pop-createteam-succ */
.pop-succ-t{ margin-top: 304px; font-size: 45px; line-height: 50px; color: #336c8a; text-align: center;}
.pop-succ-dec{ margin-top: 40px; font-size: 32px; line-height: 42px; color: #de981c; text-align: center;}
.btn-team-succ-invite{ display: block; width: 340px; height: 76px; margin: 200px auto 0; background: url(../images/btn-team-succ-invite.png) no-repeat; cursor: pointer;}
/* pop-team-invite */
#pop-team-invite .pop-t{ margin-top: 148px;}
.invite-link-box{ width: 516px; height: 140px; margin: 56px auto 0;}
.invite-link-t{ height: 56px; margin: 0 auto; font-size: 26px; line-height: 56px; color: #336c8a;}
.invite-link{ overflow: hidden; width: 514px; height: 80px; padding: 0 18px; box-sizing: border-box; font-size: 26px; line-height: 80px; color: #336c8a; background-color: #fff; border: 1px solid #90cfd9; text-overflow: ellipsis; white-space: nowrap;}
.btn-copy-link{ display: block; width: 340px; height: 76px; margin: 230px auto 0; background: url(../images/btn-copy-link.png) no-repeat; cursor: pointer;}
/* pop-team-search */
#pop-team-search .pop-t{ margin-top: 148px;}
.search-box{ width: 512px; height: 80px; margin: 70px auto 0; background-color: #fff; border: 1px solid #90cfd9;}
.search-box input{ float: left; width: 332px; height: 100%; margin-left: 20px; font-size: 26px; color: #336c8a; line-height: 80px; border: none; background: none;}
.btn-search{ float: right; width: 132px; height: 80px; background: url(../images/btn-search.png) no-repeat; cursor: pointer;}

.search-result-box{ display: none; width: 514px; margin: 32px auto 0;}
.search-table{ width: 512px; background-color: #fff; border: 1px solid #90cfd9;}
.search-result-th{ display: flex; width: 100%; height: 75px; justify-content: center; background-color: #edfcff;}
.search-result-th span{ display: block; width: 50%; font-size: 26px; line-height: 75px; color: #336c8a; text-align: center;}
.search-result-list{ width: 100%;}
.search-result-list li{ display: flex; width: 100%; height: 70px; justify-content: center; border-top: 1px solid #90cfd9;}
.search-result-list li span{ display: block; overflow: hidden; width: 50%; height: 70px; font-size: 26px; line-height: 70px; color: #336c8a; text-align: center;}
.search-result-th span:nth-child(1),.search-result-list li span:nth-child(1){ border-right: 1px solid #90cfd9;}
.btn-sub-join,.btn-letter-join{ display: block; width: 340px; height: 76px; margin: 35px auto 0; background: url(../images/btn-sub-join.png) no-repeat; cursor: pointer;}
/* pop-letter */
.letter-leader{ margin-top: 270px; font-size: 32px; line-height: 40px; color: #336c8a; text-align: center;}
.new-server-name{ font-size: 45px; line-height: 76px; color: #de981c; text-align: center;}
#pop-letter .pop-text{ margin-top: 90px; font-size: 24px;}
.btn-letter-join{ background: url(../images/btn-letter-join.png) no-repeat;}
/* pop-team-done */
.done-t-box{ position: relative; width: 100%; height: 100px; margin-top: 260px;}
.done-t-box p{ display: none; font-size: 45px; line-height: 110px; color: #336c8a; text-align: center;}
.done-tip-box{ margin-top: 46px;}
.done-tip-box p{display: none; font-size: 32px; line-height: 42px; color: #de981c; text-align: center;}