@charset "utf-8";
body{background-color:#fff; font-family:Tahoma,Verdana; position:relative;}
a{text-decoration:none; color:#fff;}
a:hover{text-decoration:none;}
li{list-style:none;}
img{border:0; max-width:100%;}
.details {width: 1170px;margin: 0 auto;}

.main01 {padding: 60px 0 50px;background: #fff url(../images/challenge-sports-video/bg1.jpg) no-repeat center top/100% auto;text-align: center;color: #fff;}
.main01 .banner-para {font-size: 31px;line-height: 33px;color: #bdb9ca;}
.main01 h1 {font-size: 50px;line-height: 54px;margin: 16px 0 25px;font-weight: 600;}
.main01 h1+h3 {font-size: 41px;line-height: 43px;color: #43cc84;}
.main01 .win-arrow {display: inline-block;padding: 10px 10px 60px;color: #fff;background: url(../images/challenge-sports-video/word-arrow.png) no-repeat center top;}
.banner-gift {width: 470px;height: 440px;border-radius: 50%;background-color: rgba(0,0,0,0.3);box-sizing: border-box;padding: 50px 0 0;margin: -25px auto 26px;}
.banner-gift a {display: block;width: 280px;line-height: 64px;font-size: 31px;background-color: #773dff;border-radius: 12px;margin: 30px auto 0;}
.banner-gift a:hover {box-shadow: 0 0 10px 0 rgba(119,61,255,0.8);}
.activity-intro {font-size: 17px;color: #e3e3e3;line-height: 31px;text-align: center;padding: 0 80px 35px;}
.activity-intro span {color: #43cc84;}
.product-box {min-height: 425px;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;background-color: #fff;border-radius: 20px;box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);}
.box-left-content {width: 618px;height: 425px;border-radius: 20px 0 0 20px;box-sizing: border-box;padding-top: 40px;background: #ffae43 url(../images/challenge-sports-video/product-bg.png) no-repeat left top;}
.box-left-content img {margin-left: -40px;}
.box-right-content {width: 552px;box-sizing: border-box;padding: 0 40px 0 28px;text-align: left;}
.box-right-content h3 {font-size: 37px;color: #000;line-height: 41px;font-weight: 600;}
.box-right-content h3 span {display: inline-block;vertical-align: middle;font-size: 23px;font-weight: lighter;line-height: 32px;color: #fff;padding: 0 19px 0 10px;background-color: #43cc84;position: relative;}
.box-right-content h3 span::after {content: "";border-top: 16px solid transparent;border-bottom: 16px solid transparent;border-right: 11px solid #fff;position: absolute;top: 0;right: 0;}
.box-right-content p {font-size: 17px;line-height: 27px;color: #606060;margin: 40px 0 30px;}
.the-download,.mobile-download a {display: block;width: 310px;font-size: 25px;line-height: 64px;text-indent: 65px;color: #fff;background: #43cc66 url(../images/challenge-sports-video/download-icon.png) no-repeat 30px center;border-radius: 6px;margin-left: 77px;}
.the-download:hover,.mobile-download a:hover {box-shadow: 0 0 10px 0 rgba(67,204,102,0.8);}
.mobile-download {display: none;}
.box-right-content .vpc-link {text-align: center;font-size: 17px;line-height: 26px;color: #606060;margin-top: 20px;}
.box-right-content .vpc-link a {color: inherit;text-decoration: none;}
.steps-list {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;padding-top: 60px;}
.steps-list li {width: 320px;text-align: center;margin-bottom: 30px;}
.steps-list li:nth-child(2) {margin: 0 100px 30px;}
.steps-list li .icon-container {width: 100px;height: 100px;color: #ff8543;border-radius: 50%;background: #fff3dd;position: relative;margin: 0 auto 24px;}
.steps-list li .icon-container b {display: inline-block;width: 100%;font-size: 35px;line-height: 37px;margin-top: 20px;}
.steps-list li .icon-container span {display: inline-block;width: 100%;font-size: 19px;line-height: 21px;}
.steps-list li:nth-child(2) .icon-container::before,
.steps-list li:nth-child(2) .icon-container::after {content: "";width: 260px;height: 0;border-top: 1px dashed #ff8543;position: absolute;top: 50px;left: -296px;}
.steps-list li:nth-child(2) .icon-container::after {left: auto;right: -296px;}
.steps-list li .step-content {font-size: 19px;line-height: 25px;color: #3b3b3b;min-height: 50px;}
.steps-list li .step-content a {color: #773dff;}
.steps-list .hover-popup {display: inline-block;position: relative;text-decoration: none;cursor: pointer;}
.steps-list .hover-popup div {display: none;width: 800px;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);z-index: 10;}
.steps-list .hover-popup:hover div {display: block;}

.main02 {padding: 0 0 0;}
.main02 h2 {font-size: 37px;font-weight: 600;color: #010101;line-height: 41px;text-align: center;}
.main02 h2+p {font-size: 17px;color: #773dff;line-height: 21px;margin: 20px 0 46px;text-align: center;}
.main02 h2+p a {color: inherit;text-decoration: underline;}
.question-challenges {width: 830px;position: relative;display: flex;justify-content: space-between;margin: 0 auto 325px;}
.question-challenges::before {content: "";width: 100%;height: 6px;background-color: #e0e0e0;position: absolute;top: 0;left: 0;}
.the-challenge {width: 49%;cursor: pointer;}
.the-challenge .progress-line {height: 6px;position: relative;}
.the-challenge .progress-line::before {display: none;content: "";width: 15px;height: 100%;background: url(../images/challenge-sports-video/double-arrow.png) no-repeat left center/auto 6px;position: absolute;top: 0;right: -15px;}
.challenge-two .progress-line::before {right: auto;left: -15px;transform: rotate(180deg);}
.the-challenge.on-active .progress-line {background-color: #8143f1;}
.the-challenge.on-active .progress-line::before {display: block;}
.the-challenge h4 {font-size: 19px;color: #999494;line-height: 21px;margin: 20px 0 6px;}
.the-challenge.on-active h4 {color: #7c40f8;}
.the-challenge p {font-size: 16px;color: #969696;line-height: 18px;}
.the-challenge.on-active p {color: #7c40f8;}
.challenge-content-container {width: 960px;box-sizing: border-box;padding: 0 110px 40px;border: 2px solid #5dda9c;border-radius: 14px;background-color: #fff;margin: 0 auto 70px;}
.challenge-video {width: 720px;background-color: #000;margin: -280px auto 56px;border-radius: 14px;overflow: hidden;position: relative;}
.challenge-video::before {display: block;content: "";width: 100%;padding-bottom: 56.25%;}
.challenge-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.the-question {padding: 0 24px;}
.question-one {padding-bottom: 28px;border-bottom: 1px solid #ccc;margin-bottom: 46px;}
.the-question h4 {font-size: 19px;line-height: 21px;color: #5a5754;margin-bottom: 22px;}
.options-list {display: flex;justify-content: space-between;flex-wrap: wrap;}
.question-two .options-list,.question-three .options-list {justify-content: flex-start;}
.options-list li {margin: 0 20px 20px 0;font-size: 19px;color: #000;line-height: 21px;}
.options-list li.large-margin-right {margin-right: 150px;}
.options-list li:last-child {margin-right: 0;}
.options-list li .img-container {margin-bottom: 20px;}
.checked-box {display: inline-block;vertical-align: middle;width: 21px;height: 21px;border: 1px solid #e5dbc9;border-radius: 3px;margin-right: 12px;}
.checked-box input {display: none;}
.checked-box label {display: block;width: 100%;height: 100%;background: url(../images/challenge-sports-video/checked-icon.png) no-repeat 30px center;cursor: pointer;}
.checked-box input:checked+label {background-position: center;}
.to-next {display: block;width: 130px;line-height: 36px;border: 1px solid #ff9b42;color: #ff9b42;font-size: 21px;text-align: center;outline: none;margin: 10px auto 0;border-radius: 5px;cursor: not-allowed;background-color: #fff;}
.to-next:hover {color: #fff;background-color: #ff9b42;}
.submit-or-back {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;margin: 14px 0 30px;}
.back-to-one {width: 43px;height: 41px;background: url(../images/challenge-sports-video/orange-double-arrow.png) no-repeat center;margin-right: 25px;cursor: pointer;transition: all 0.2s;}
.back-to-one:hover {background-position: 0 center;}
.the-submit {font-size: 21px;line-height: 64px;color: #fff;padding: 0 30px;background-color: #ff9b42;border-radius: 10px;cursor: pointer;}
.the-submit:hover {box-shadow: 0 0 10px 0 rgba(255,155,66,0.4);}
.other-intro {font-size: 17px;line-height: 19px;color: #745bf0;text-align: center;}
.other-intro a {color: inherit;}
.other-intro a:hover {text-decoration: underline;}

.main03 {padding: 50px 0 65px;background: #fff url(../images/challenge-sports-video/bg2.jpg) no-repeat center bottom/100% auto;}
.main03 h2 {font-size: 37px;font-weight: 600;color: #010101;line-height: 41px;text-align: center;}
.main03 h2+p {font-size: 17px;color: #773dff;line-height: 21px;margin: 10px 0 35px;text-align: center;}
.main03 h2+p a {color: inherit;text-decoration: underline;}
.prizes-content {display: flex;justify-content: center;align-items: flex-start;flex-wrap: wrap;margin-bottom: 60px;text-align: center;}
.prizes-left-content {width: 571px;min-height: 480px;box-sizing: border-box;margin-right: 30px;padding: 40px 0 0;background: url(../images/challenge-sports-video/gift-bg1.png) no-repeat center top;position: relative;}
.prizes-left-content::after {content: "";border-top: 32px solid #816EF7;border-right: 17px solid transparent;border-left: 17px solid transparent;position: absolute;bottom: -32px;left: 50%;margin-left: -8px;}
.prizes-left-content::before {display: none;content: "";border-top: 32px solid #26214A;border-right: 17px solid transparent;border-left: 17px solid transparent;position: absolute;bottom: -32px;left: 50%;margin-left: -8px;z-index: 2;}
.the-mask {width: 100%;height: 100%;font-size: 29px;display: none;justify-content: center;align-items: center;color: #fff;background-color: rgba(0,0,0,0.7);position: absolute;top: 0;left: 0;border-radius: 48px;}
.prizes-right-content .right-prizes .the-mask {font-size: 23px;}
.prizes-left-content:hover::before {display: block;}
.has-mask:hover .the-mask {display: flex;}
.prizes-left-content h4 {font-size: 37px;line-height: 41px;color: #ffe157;font-weight: 600;}
.prizes-left-content p {font-size: 21px;line-height: 23px;color: #f0eeff;margin: 12px 0 24px;}
.prizes-left-content .the-remark {font-size: 14px;line-height: 16px;color: #3d3a53;margin-top: 25px;}
.prizes-right-content {width: 370px;}
.prizes-right-content .right-prizes {min-height: 232px;box-sizing: border-box;padding-top: 40px;background: url(../images/challenge-sports-video/gift-bg2.png) no-repeat center top;margin-bottom: 16px;position: relative;}
.prizes-right-content .right-prizes-two {background-image: url(../images/challenge-sports-video/gift-bg3.png);margin-bottom: 0;}
.right-prizes h4 {font-size: 23px;line-height: 27px;color: #773dff;margin: 16px 0 8px;}
.right-prizes p {font-size: 15px;line-height: 17px;color: #817c78;}
.rules-container {width: 960px;box-sizing: border-box;padding: 14px;border: 1px solid #d0ccc5;border-radius: 20px;color: #343434;margin: 0 auto 50px;}
.rules-container h4 {padding-left: 38px;background: url(../images/challenge-sports-video/rules-icon.png) no-repeat left center;font-size: 17px;line-height: 24px;font-weight: 600;margin-bottom: 13px;}
.rules-list li {font-size: 15px;line-height: 25px;padding: 0 0 8px 15px;position: relative;}
.rules-list li::before {content: "";width: 6px;height: 6px;background-color: #816ef7;border-radius: 3px;position: absolute;top: 9px;left: 0;}
.ytb-videos {display: flex;justify-content: center;flex-wrap: wrap;text-align: center;}
.ytb-videos li {width: 432px;padding: 0 50px 30px;cursor: pointer;}
.ytb-videos li .img-container {position: relative;}
.ytb-videos li .play-icon {position: absolute;top: 50%;left: 50%;width: 80px;height: 80px;margin: -40px 0 0 -40px;border-radius: 50%;background-color: #fff;cursor: pointer;}
.ytb-videos li .play-icon::after {content: "";border-top: 14px solid transparent;border-bottom: 14px solid transparent;border-left: 22px solid #745bf0;position: absolute;top: 26px;left: 31px;}
.ytb-videos li .play-icon:hover {box-shadow: 0 0 15px 3px rgba(255,255,255,0.6);}
.ytb-videos li .play-icon.on-active {animation: boxShadow 1s infinite;}
@keyframes boxShadow {0% {box-shadow: 0 0 0 0 rgba(255,255,255,0.6);}50% {box-shadow: 0 0 15px 3px rgba(255,255,255,0.6);}100% {box-shadow: 0 0 0 0 rgba(255,255,255,0.6);}}
.ytb-videos li p {font-size: 17px;line-height: 19px;color: #fff;text-decoration: underline;margin-top: 15px;}
.vpv-container {margin-top: 60px;}
.vpv-container h3 {font-size: 30px;line-height: 33px;color: #fff;text-align: center;margin-bottom: 18px;font-weight: 600;}
.vpv-container h3 img {vertical-align: middle;margin-right: 12px;}
.vpv-content {width: 960px;box-sizing: border-box;padding: 26px 20px 66px;margin: 0 auto;min-height: 434px;background: #fff url(../images/challenge-sports-video/vpv-content-bg.jpg) no-repeat center bottom;border-radius: 20px;color: #363636;text-align: center;}
.vpv-content h4 {font-size: 25px;line-height: 29px;font-weight: 600;}
.intro-list {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;padding: 34px 0 0;}
.intro-list li {width: 230px;margin: 0 33px 30px;}
.intro-list li .img-container {height: 63px;}
.intro-list li .img-container img {max-height: 100%;}
.intro-list li h5 {font-size: 21px;line-height: 23px;color: #222222;font-weight: 600;margin: 22px 0 10px;}
.intro-list li h5 a {color: inherit;}
.intro-list li p {font-size: 15px;color: #555555;line-height: 25px;}
.vpv-content .the-download,.vpv-content .mobile-download {margin: 0 auto;text-align: left;}

.aside-share {width: 47px;padding: 30px 13px;border-radius: 36px;background-color: #fff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.05);display: flex;flex-wrap: wrap;position: fixed;top: 45%;right: 200px;z-index: 100;}
.aside-share a {width: 47px;height: 47px;margin-bottom: 16px;background: url(../images/challenge-sports-video/share-icons.png) no-repeat center top;}
.aside-share a:last-child {background-position: center -64px;margin-bottom: 0;}

.challenge-popup-container,.ytb-popup-container {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.6);z-index: 101;}
.submit-email-content,.submit-score-content {width: 770px;padding: 86px 0 130px;text-align: center;background-color: #fff8ec;border-radius: 14px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.submit-score-content {display: none;padding: 30px 0 54px;}
.submit-email-content h3 {font-size: 29px;line-height: 33px;color: #000;}
.submit-email-content p {display: inline-block;font-size: 19px;line-height: 29px;color: #7c776d;margin: 26px 0 32px;text-align: left;}
.submit-email-content input {display: block;width: 584px;height: 52px;font-size: 21px;color: #7c776d;padding-left: 10px;background-color: #fff;border: 1px solid #eae3d7;border-radius: 5px;outline: none;margin: 0 auto;}
.submit-email-content button {display: block;border: none;outline: none;font-size: 23px;color: #fff;line-height: 74px;width: 366px;background-color: #43cc66;border-radius: 10px;margin: 54px auto 0;cursor: pointer;}
.submit-email-content button:hover {box-shadow: 0 0 10px 0 rgba(67,204,102,0.6);}
.submit-score-content .the-scores {font-size: 35px;line-height: 66px;color: #fff;height: 261px;box-sizing: border-box;padding-top: 44px;background: url(../images/challenge-sports-video/popup-bg.png) no-repeat center/auto 100%;}
.submit-score-content .the-scores b {font-size: 75px;}
.submit-score-content p {font-size: 19px;line-height: 29px;color: #202020;margin: 30px 0 26px;}
.submit-score-content p span {color: #ff8f0c;}
.popup-shares {display: flex;justify-content: center;align-items: flex-start;margin-bottom: 28px;}
.popup-shares a {width: 47px;height: 47px;background: url(../images/challenge-sports-video/share-icons.png) no-repeat center top;margin: 0 14px;}
.popup-shares a:last-child {background-position-y: -64px;}
.submit-score-content .go-to-homepage {font-size: 17px;color: #3b3b3b;line-height: 21px;text-align: center;text-decoration: underline;}
.submit-score-content .go-to-homepage a {color: inherit;}
.cancel-popup {width: 24px;height: 24px;background: url(../images/challenge-sports-video/cancel-icon.png) no-repeat center;cursor: pointer;position: absolute;top: -30px;right: 4px;}

.ytb-popup-container>div {width: 900px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.ytb-popup-container>div::before {display: block;content: "";width: 100%;padding-bottom: 56.25%;}
.ytb-popup-container iframe {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}

@media (max-width:1800px) {
    .main01,.main03 {background-size: auto auto;}
    .aside-share {right: 30px;}
}
@media (max-width:979px) {
    .details {width: 96%;}

    .activity-intro {padding: 0 0 35px;}
    .product-box {justify-content: center;padding-bottom: 30px;}
    .box-left-content {width: 100%;margin-bottom: 30px;background: #ffae43;height: auto;padding: 40px 0;border-radius: 20px;}
    .box-left-content img {margin-left: 0;}
    .box-right-content {width: 100%;text-align: center;}
    .box-right-content p {margin: 20px 0;}
    .platform-download {display: none;}
    .the-download {margin: 0 auto;}
    .mobile-download {display: block;}
    .mobile-download a {margin: 0 auto;width: 260px;text-indent: 28px;background-position-x: 15px;font-size: 23px;line-height: 54px;}

    .steps-list li,.steps-list li:nth-child(2) {margin: 0 15px 30px;}
    .steps-list li .icon-container {margin: 0 auto 15px;}
    .steps-list li:nth-child(2) .icon-container::before, .steps-list li:nth-child(2) .icon-container::after {display: none;}
    .steps-list .hover-popup div {width: 500px;}

    .prizes-left-content {margin: 0 0 30px;}
    .prizes-left-content::before,.prizes-left-content::after {display: none;}
    .prizes-left-content:hover::before {display: none;}
    .question-challenges {width: 100%;}
    .challenge-content-container {width: 100%;padding: 0 5% 40px;}
    .challenge-video {width: 80%;}
    .the-question {padding: 0 4% 28px;}

    .rules-container {width: 100%;}
    .ytb-videos li p {color: #333;margin-top: 10px;}

    .vpv-container h3 {color: #222;}
    .vpv-content {width: 100%;padding: 30px 0;}
    .intro-list {justify-content: center;}

    .aside-share {right: 10px;}

    .submit-email-content,.submit-score-content {width: 90%;padding: 40px 0;}
    .submit-email-content button {margin-top: 30px;}

    .ytb-popup-container>div {width: 90%;}
}

@media (max-width:767px) {
    .main01 .banner-para {font-size: 21px;line-height: 23px;}
    .main01 h1 {font-size: 33px;line-height: 37px;}
    .main01 h1+h3 {font-size: 23px;line-height: 25px;}
    .main01 .win-arrow {font-size: 33px;padding: 0 10px;background: none;}
    .banner-gift {margin-top: 20px;}
    .banner-gift a {font-size: 25px;line-height: 50px;width: 220px;}

    .box-right-content h3 {font-size: 29px;line-height: 33px;}
    .the-download {font-size: 21px;line-height: 50px;text-indent: 0;width: 270px;}

    .steps-list .hover-popup div {width: 400px;}

    .prizes-left-content,.prizes-right-content {width: 100%;border-radius: 48px;}
    .prizes-left-content {padding-bottom: 13px;}
    .prizes-left-content h4 {font-size: 29px;line-height: 33px;}

    .question-challenges {margin-bottom: 100px;}
    .challenge-video {margin: -50px auto 30px;width: 100%;}
    .options-list li.large-margin-right {margin-right: 50px;}

    .submit-email-content input {width: 90%;}
    .submit-email-content button {line-height: 60px;width: 270px;font-size: 21px;}
    .submit-score-content .the-scores b {font-size: 50px;line-height: 50px;}
    .submit-score-content a {font-size: 21px;line-height: 60px;width: 270px;}
}

@media (max-width:479px) {
    .banner-gift {width: 100%;border-radius: 50px;height: auto;padding: 30px 0;}

    .steps-list li {width: 100%;margin: 0 0 30px;}
    .steps-list .hover-popup div {width: 200px;}

    .prizes-left-content {background: #816EF7;}
    .prizes-right-content .right-prizes {background: #FFEDCD;border-radius: 20px;}

    .ytb-videos li {width: 100%;padding: 0 0 30px;}

    .vpv-container h3 {font-size: 23px;line-height: 25px;}
    .vpv-content {padding: 30px 20px;}
    .vpv-content h4 {font-size: 21px;}

    .aside-share {padding: 15px 5px;}

    .submit-email-content,.submit-score-content {padding: 20px 10px;box-sizing: border-box;}
    .submit-score-content .the-scores {line-height: 45px;background-size: auto 100%;height: 190px;}
    .submit-score-content .the-scores b {font-size: 40px;}
    .submit-score-content p {margin: 15px 0;font-size: 17px;line-height: 21px;}
    .submit-email-content p {margin: 15px 0;}
}