@charset "UTF-8";
.whitePage-scroll {min-width: 1200px; overflow: auto; }
.whitePage-scroll .container{min-width: 1200px}
.whitePage-msg a{ color: #8799a9;}
.whitePage-banner { width: 100%; }
.whitePage-banner .swiper-container { height: 450px; width: 100%;display: block }
.whitePage-banner .swiper-container .swiper-slide { background-position: center top; background-repeat: no-repeat; }
.whitePage-banner .swiper-container .swiper-slide a{display: block; width:100%; height:100%;}
.swiper-button-prev { display: none; left:40px;-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); background-image: url(/static/web4.0/img/banner-arrow.png);opacity: .8;}
.swiper-button-next { display: none; right:40px; background-image: url(/static/web4.0/img/banner-arrow.png);opacity: .8;}
.swiper-button-prev:hover{ opacity:1;}
.swiper-button-next:hover{ opacity:1;}
.swiper-button-next, .swiper-button-prev { width: 36px; height: 45px; -moz-background-size: 100%; -webkit-background-size: 100%; background-size: 100%; }
::-webkit-scrollbar-track-piece { background-color: #EEE; -webkit-border-radius: 0; }
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-thumb { height: 20px; background-color: #DDD; -webkit-border-radius: 4px; outline: 2px solid #EEE; outline-offset: -2px; border: 2px solid #EEE; }
.whitePage-ranking { padding: 22px 0 18px 0; width: 100%; background-color: #344656; }
.whitePage-ranking .season-top { float: left; }
.whitePage-ranking .season-top .season { position: relative; }
.whitePage-ranking .season-top .examine { position: absolute; width: 100%; color: #fff; text-align: center; top: 160px; left: 0px; }
.whitePage-ranking .season-line { margin-top: 20px; float: left; width: 107px; height: 132px; background-position: center top; background-repeat: repeat-y; background-image: url(/static/web4.0/img/line-left.jpg); }
.whitePage-ranking .season-time { float: left; width: 800px; padding-top: 32px; }
.whitePage-ranking .season-time .start-end { width: 100%; overflow: hidden; margin-bottom: 11px; }
.whitePage-ranking .season-time .start-end > div { width: 50%; float: left; color: #8799a9; }
.whitePage-ranking .season-time .start-end .start { text-align: left; }
.whitePage-ranking .season-time .start-end .end { text-align: right; }
.whitePage-ranking .season-time .time-ratio { width: 100%; height: 5px; background-color: #263543; border-radius: 5px; position: relative; }
.whitePage-ranking .season-time .time-ratio .season-progress { border-radius: 5px; height: 5px; transition: width .5s; position: absolute; background: red; background: -webkit-linear-gradient(left, #f9bc4f, #f76c1d); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #f9bc4f, #f76c1d); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #f9bc4f, #f76c1d); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #f9bc4f, #f76c1d); /* 标准的语法 */ }
.whitePage-ranking .season-time .time-ratio .for-position { position: absolute; top: -42px; transition: left .5s;width: 88px;text-align: center; }
.whitePage-ranking .season-time .time-ratio .for-position .title-progress { width: 100%; padding: 8px; color: #fff; background-color: #ffae00; border-radius: 5px; margin-left: -50%; }
.whitePage-ranking .season-time .time-ratio .for-position .title-progress .days { font-size: 12px; position: relative; }
.whitePage-ranking .season-time .time-ratio .for-position .title-progress .days .triangle { position: absolute; left: 55%; top: 100%; margin-left: -19%; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #ffae00; }
.whitePage-ranking ul.season-list { padding: 44px 0 10px 37px; }
.whitePage-ranking ul.season-list > li { width: 225px; float: left; margin-right: 40px; }
.whitePage-ranking ul.season-list > li:last-child { margin-right: 0; }
.whitePage-ranking ul.season-list .item { position: relative; z-index: 1}
.whitePage-ranking ul.season-list .item .num { position: absolute; z-index: 21; left: -38px; top: -21px; display: block; width: 42px; height: 42px; background-repeat: no-repeat; background-position: left top; }
.whitePage-ranking ul.season-list .item .Rank1 { background-image: url(/static/web4.0/img/gold-rank.png); }
.whitePage-ranking ul.season-list .item .Rank2 { background-image: url(/static/web4.0/img/silver-rank.png); }
.whitePage-ranking ul.season-list .item .Rank3 { background-image: url(/static/web4.0/img/cu-rank.png); }
.whitePage-ranking ul.season-list .item .header-img { position: absolute; z-index: 20; left: -16px; top: -6px; display: block; width: 48px; height: 48px; border-radius: 24px; border: 2px solid #fff; }
.whitePage-ranking ul.season-list .item .list { height: 37px; background: #405569; border-radius: 50px; }
.whitePage-ranking ul.season-list .item .list > span { float: left; color: #fff; line-height: 37px; }
.whitePage-ranking ul.season-list .item .list .name { padding-left: 40px; font-size: 14px; width: 124px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-right: 18px; }
.whitePage-ranking ul.season-list .item .list .integral { color: #62a3ed; font-size: 12px; padding-right: 13px; background-repeat: no-repeat; background-position: right center; }
.whitePage-ranking ul.season-list .item .list .state1 { background-image: url(/static/web4.0/img/up.png); }
.whitePage-ranking ul.season-list .item .list .state2 { background-image: url(/static/web4.0/img/down.png); }
.whitePage-ranking ul.season-list .item .list .state3 { background-image: url(/static/web4.0/img/norm.png); }
.whitePage-ranking .explain { padding-top: 8px; text-align: right; color: #5d7791; font-size: 12px; }

.season-playoffs { padding-top: 40px; }
.season-playoffs .playoffs-news { position: relative; float: left; line-height: 22px; height: 36px; padding: 7px 12px 7px 46px; background: #293844; border-radius: 20px; font-size: 12px; color: #a8cbe5; }
.season-playoffs .playoffs-news .pic-medal { position: absolute; z-index: 2; left: -10px; top: -12px; display: inline-block; }
.season-playoffs .playoffs-btn { float: right; }
.season-playoffs .playoffs-btn a { display: inline-block; font-size: 13px; border: solid 1px #45E5E5; border-radius: 2px; color: #45E5E5; line-height: 20px; padding: 6px 15px; text-decoration: none; }
.season-playoffs .playoffs-btn a:hover,.season-playoffs .playoffs-btn a:active { background: #45E5E5; color: #fff; }

.whitePage-detail { background-color: #4d6071; }
.whitePage-detail .container .tips { display: none; position: absolute; top: -38px; transition: left .5s; left: 40%; width: 57%; text-align: center; }
.whitePage-detail .container .tips .title-progress { padding: 8px; color: #fff; background-color: #339AFF; border-radius: 3px; margin-left: -50%; }
.whitePage-detail .container .tips .title-progress .days { font-size: 12px; position: relative; }
.whitePage-detail .container .tips .title-progress .days a { color: #fff; }
.whitePage-detail .container .tips .title-progress .days .triangle { position: absolute; left: 50%; top: 100%; margin-left: -7%; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 15px solid #339AFF; }
.whitePage-detail .container .detail-scroll { width: 500px; overflow: hidden; position: relative; background: none; }
.whitePage-detail .container .detail-scroll .season-list { position: absolute; }
.whitePage-detail .container .detail-scroll .season-list li { color: #9fbed9; height: 28px; font-size: 12px; line-height: 28px; }
.whitePage-detail .container .detail-scroll .season-list li  a:hover{ color: #f0f0f0;}
.whitePage-detail .container .detail-scroll .season-list li  a:focus{ color: #f0f0f0;}
.whitePage-detail .container > div:first-child { padding-left: 0; }
.whitePage-detail .container > div { position: relative; float: left; padding: 0 40px 0 36px; margin: 11px 0; background-image: url(/static/web4.0/img/line-b.png); background-repeat: no-repeat; background-position: right 3px; height: 30px; }
.whitePage-detail .container > div > span { padding-top: 7px; float: left; font-size: 12px; display: inline-block; }
.whitePage-detail .container > div .title { color: #9fbed9; font-size: 12px; }
.whitePage-detail .container > div .detail-num { color: #ffbc62; padding-left: 16px; }
.whitePage-detail .container > div .icon { width: 46px; height: 37px; margin-top: -18px; background-position: center top; background-repeat: no-repeat; }
.whitePage-detail .container > div .icon-bg1 { background-image: url(/static/web4.0/img/jewe1.png); }
.whitePage-detail .container > div .icon-bg2 { background-image: url(/static/web4.0/img/jewe2.png); }
.whitePage-detail .container > div .icon-bg3 { background-image: url(/static/web4.0/img/jewe3.png); }
.whitePage-detail .container > div .icon-bg4 { background-image: url(/static/web4.0/img/jewe4.png); }
.whitePage-detail .container > div .icon-bg5 { background-image: url(/static/web4.0/img/jewe5.png); }
.whitePage-detail .container .season-news { color: #9fbed9; }
.whitePage-detail .container .level { padding-right: 0; background: none; }
.whitePage-detail .container .level .title { padding-top: 7px; float: left; margin-right: 25px; }
.whitePage-detail .container .level .makeUp { float: left; width: 180px; height: 5px; padding-top: 13px; }
.whitePage-detail .container .level .makeUp > span { float: left; height: 5px; position: relative; }
.whitePage-detail .container .level .makeUp > span .absoluteTips { position: absolute; top: -39px; left: 0;height: 40px; }
.whitePage-detail .container .level .makeUp .color1 { width: 20%; background-color: #fd5555; }
.whitePage-detail .container .level .makeUp .color2 { width: 30%; background-color: #ffb900; }
.whitePage-detail .container .level .makeUp .color3 { width: 40%; background-color: #e47afa; }
.whitePage-detail .container .level .makeUp .color4 { width: 10%; background-color: #81e7ff; }
.whitePage-detail .container .level .makeUp .color5 { width: 100%; background-color: #CCCCCC; display: none;}
.whitePage-detail .container .level .makeUp .color-show{display: block;}
.whitePage-detail .container .level .makeUp .color-hide{display: none;}
.whitePage-detail .container .level .makeUp #talkbubble { min-width: 100px; max-width: 100px; height: 28px; line-height: 26px; position: relative; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px #339aff solid; background-color: #fff; text-align: center; }
.whitePage-detail .container .level .makeUp #talkbubble:before { content: " "; position: absolute; top: 100%; left: 39px; width: 0; height: 0; border-left: 11px solid transparent; border-top: 9px solid #339aff; border-right: 11px solid transparent; }
.whitePage-detail .container .level .makeUp #talkbubble a{color: #4a4c52; padding:3px;}
.whitePage-detail .container .level .makeUp #talkbubble a:hover{color: #4a4c52;}
.whitePage-detail .container .level .makeUp .inlayer:after { content: " "; position: absolute; top: 87%; left: 36px; width: 0; height: 0; border-left: 14px solid transparent; border-top: 11px solid #fff; border-right: 14px solid transparent; }
.whitePage-detail .container .level .tips { width: 26%; }
.whitePage-detail .container .level .tips .title-progress .days .triangle { margin-left: -10%; }

.whitePage-msg { width: 100%; background: #f6f6f6 url(/static/web4.0/img/whitePage-bg.png) no-repeat center top;padding-bottom: 50px; }
.whitePage-msg .container { padding-top: 40px; }
.whitePage-msg .title { padding: 15px 0 15px 20px; font-size: 16px; font-weight: 600; border-bottom: 1px solid #f5f5f5;margin-bottom: 5px }
.whitePage-msg .msg-left { margin-right: 300px;  }
.whitePage-msg .msg-left .scroll-msg { height: 507px; background-color: #fff; border-radius: 4px; border: 1px solid #ebebeb; overflow: hidden; margin-bottom: 20px; }
.whitePage-msg .msg-left .scroll-msg .star-abs { height: 415px; overflow: hidden; position: relative; margin: 10px 25px 0 20px; width: 100%; }
.whitePage-msg .msg-left .scroll-msg .scroll-detail { position: absolute; overflow: hidden; width: 93%; }
.whitePage-msg .msg-left .scroll-msg .scroll-detail li { height: 37px; line-height: 37px; overflow: hidden; color: #9baab8; font-size: 12px; }
.whitePage-msg .msg-left .scroll-msg .scroll-detail li .detail { float: left; }
.whitePage-msg .msg-left .scroll-msg .scroll-detail li .detail .blue { color: #339aff; }
.whitePage-msg .msg-left .scroll-msg .scroll-detail li .detail .oriange { color: #ff8a21; }
.whitePage-msg .msg-left .scroll-msg .scroll-detail li .detail .methods { color: #22b573; }
.whitePage-msg .msg-left .scroll-msg .scroll-detail li .time { float: right; }
.whitePage-msg .msg-left .project { background: #fff; border-radius: 4px; border: 1px solid #ebebeb; padding: 0; margin-bottom: 20px; }
.whitePage-msg .msg-left .project ul { overflow: hidden; border-bottom: 1px solid #f5f5f5; }
.whitePage-msg .msg-left .project ul li { float: left; margin: 0 23px; }
.whitePage-msg .msg-left .project ul li a { font-size: 14px; padding: 22px 22px; float: left; }
.whitePage-msg .msg-left .project ul li a:hover { text-decoration: none; }
.whitePage-msg .msg-left .project ul li a:focus { text-decoration: none; }
.whitePage-msg .msg-left .project ul li .active { border-bottom: 2px solid #339aff; color: #339aff; }
.whitePage-msg .msg-left .project .active-main { padding: 40px 24px; max-height: 880px; overflow-y: auto; }
.whitePage-msg .msg-left .project .active-main .btn-more { color: #339AFF; border: solid 1px #339AFF; background: none; width: 127px; height: 30px; line-height: 28px; font-size: 14px; padding: 0; float: none; display: block; margin: 35px auto; }
.whitePage-msg .msg-left .project .active-main .btn-more:hover{ color: #fff; background: #339AFF;}
.whitePage-msg .msg-left .project .active-main .join-active { margin-bottom: 20px; overflow: hidden; border: 1px solid #ebebeb; border-top-left-radius:5px;border-bottom-left-radius:5px;}
.whitePage-msg .msg-left .project .active-main .join-active .project-join { position: relative; float: left; width: 220px; height: 147px; }
.whitePage-msg .msg-left .project .join-hide {display: none;}
.whitePage-msg .msg-left .project .active-main .join-active .project-join img { width: 100%; height: 100%; }
.whitePage-msg .msg-left .project .active-main .join-active .project-join .project-num { position: absolute; padding: 9px; left: 0; top: 30px; font-size: 12px; color: #ffffff; text-align: center; border-radius: 2px; background-color: rgba(59, 125, 200, 0.7); }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail { float: left; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg { padding: 40px 0 0 29px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .timer { color: #8799a9; font-size: 12px; margin-bottom:2px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .name >a {color: #2f2f2f;}
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .name { color: #000; font-size: 14px; margin-bottom:20px;width: 250px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .monye-level { float: left; height: 23px; line-height: 23px; margin-right: 17px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .level-grades { float: left; width: 80px; height: 23px; background: url(/static/web4.0/img/grades.png) no-repeat; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades1 { background-position: 0 -161px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades2 { background-position: 0 -138px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades3 { background-position: 0 -115px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades4 { background-position: 0 -92px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades5 { background-position: 0 -69px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades6 { background-position: 0 -46px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades7 { background-position: 0 -23px; }
.whitePage-msg .msg-left .project .active-main .join-active .project-detail .specific-msg .grades8 { background-position: 0 0; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner { padding: 40px 0 0 137px; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner ul { border: 0; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner li { float: none; height: 30px; margin-bottom: 12px; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner .btn { width: 108px; font-size: 14px; line-height: 28px; padding: 0; display: block; border-radius: 3px; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner .btn-success { color: #22B573; border: solid 1px #22B573; background: none;transition: all .5s; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner .btn-success:hover{color: #fff;background: #22B573;}
.whitePage-msg .msg-left .project .active-main .join-active .pattner .btn-ticket { background-color: #ffa300; color: #fff; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner .btn-sub { color: #339AFF; border: solid 1px #339AFF; background: none;transition: all .5s; }
.whitePage-msg .msg-left .project .active-main .join-active .pattner .btn-sub:hover{background: #339AFF;color: #fff;}
.whitePage-msg .msg-left .poc-main-body { border-radius: 2px; background-color: #ffffff; border: solid 1px #e2e2e2; }
.whitePage-msg .msg-left .poc-main-body .btn-more { color: #339AFF; border: solid 1px #339AFF; background: none; width: 127px; height: 30px; line-height: 28px; font-size: 14px; padding: 0; float: none; display: block; margin: 40px auto; }
.whitePage-msg .msg-left .poc-main-body .btn-more:hover{color: #fff;background: #339AFF;}
.whitePage-msg .msg-left .poc-main-body .poc-main-table { margin-bottom: 0; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li { padding: 14px 17px; border-bottom: solid 1px #e2e2e2; overflow: hidden; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li:hover{ background-color: #F2F6FA; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li > div { display: inline-block; overflow: hidden; padding: 5px 17px; font-size: 14px; color: #4A4A4A; float: left; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .timer { width: 182px; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .ofw { width: 240px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; color: #8799a9;}
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .name { width: 440px; text-overflow: ellipsis; white-space: nowrap; color: #8799a9;}
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .name-num { width: 160px; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .state-edit { padding: 0; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .state-edit span { height: 30px; line-height: 28px; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .subm_poc { padding: 0 0 0 17px; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .subm_poc a { display: block; border: 0; border-radius: 2px;width: 77px; height: 30px;text-align: center; line-height: 30px; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .subm_poc a:hover { text-decoration: none; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .subm_poc a:focus { text-decoration: none; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .subm_poc .subing { color: #fff; background-color: #4db8ff; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .subm_poc .subed { color: #9b9b9b; background-color: #d8d8d8; border: solid 1px #9b9b9b;cursor: not-allowed;}
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .green { color: #22b573; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table > li .closed { color: #9b9b9b; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table >li:first-child:hover { background-color: none; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table li:first-child .name{color: #4a4c52;}
.whitePage-msg .msg-left .poc-main-body .poc-main-table li:first-child .subm_poc { padding: 5px 17px; }
.whitePage-msg .msg-left .poc-main-body .poc-main-table li:first-child .ofw { color: #4a4c52;}
.plane-box { border: 1px solid #ebebeb; border-radius: 4px; background-color: #fff; margin-bottom: 20px; }
.plane-box.m-b0 { margin-bottom: 0; }
.whitePage-msg .msg-right { width: 280px; float: right; }
.whitePage-msg .msg-right .knowledge { padding: 12px 15px; }
.whitePage-msg .msg-right .knowledge .know-detail { width: 100%; padding-bottom: 13px; border-bottom: 2px solid #f6f6f6; }
.whitePage-msg .msg-right .knowledge .know-detail img { width: 100%; margin-bottom: 11px; }
.whitePage-msg .msg-right .knowledge .know-detail p{ color: #828282;}
.whitePage-msg .msg-right .btn-more { color: #339AFF; border: solid 1px #339AFF; background: none; width: 127px; height: 30px; line-height: 28px; font-size: 14px; padding: 0; float: none; display: block; margin: 23px auto;transition: all .5s; }
.whitePage-msg .msg-right .btn-more:hover{color: #fff;background: #339AFF;}
.faq-con ul { padding: 10px 20px 0; }
.faq-con ul li { line-height: 20px; padding: 6px 0; position: relative; }
.faq-con ul li a { display: block; padding-left: 15px; height: 20px; color: #8c8c8c; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.faq-con ul li a:before { position: absolute; left: 0px; top: 14px; content: ''; width: 4px; height: 4px; border-radius: 50%; background: #b9b9b9; }
.faq-con ul li a:hover { color: #4db8ff; }
.faq-con ul li a:hover:before { background: #4db8ff; }
.tag-hot { display: inline-block; width: 37px; height: 16px; margin-left: 10px; background: url(/static/web4.0/img/icon-hot.png) no-repeat center center; }