#hkNbLuckyDraw {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-bottom: 60px;
  background-size: cover;
  background-position: top;
  background: #d58336; }
  #hkNbLuckyDraw h3.title {
    color: #fff;
    font-size: 48px;
    text-align: center;
    font-weight: 700;
    margin: 36px 0; }
    @media (max-width: 960px) {
      #hkNbLuckyDraw h3.title {
        font-size: 30px; } }
  #hkNbLuckyDraw a {
    color: #fff;
    text-decoration: underline;
    padding: 0 5px; }
    #hkNbLuckyDraw a:hover {
      background-color: #dd442d;
      text-decoration: none; }
  #hkNbLuckyDraw .wrapper {
    max-width: 1920px;
    background: url("https://storage-asset.msi.com/event/2020/nb/2020-HK-Autumn-Luckydraw/hk-luckydraw-bg.jpg") 0 0 no-repeat;
    background-position: top;
    background-size: 100%; }
    #hkNbLuckyDraw .wrapper__kvbox {
      text-align: center; }
      #hkNbLuckyDraw .wrapper__kvbox img {
        display: inline-block;
        max-width: 100%; }
    #hkNbLuckyDraw .wrapper__stepbox {
      /*min-height: 700px;*/ }
      #hkNbLuckyDraw .wrapper__stepbox .content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start; }
        #hkNbLuckyDraw .wrapper__stepbox .content a:link {
          text-decoration: none; }
          #hkNbLuckyDraw .wrapper__stepbox .content a:link p {
            text-decoration: underline; }
        #hkNbLuckyDraw .wrapper__stepbox .content a:hover p {
          text-decoration: none; }
        #hkNbLuckyDraw .wrapper__stepbox .content .step {
          width: 20%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          justify-content: flex-start;
          -webkit-box-align: start;
          -ms-flex-align: start;
          align-items: flex-start;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          position: relative;
          padding: 2%; }
          #hkNbLuckyDraw .wrapper__stepbox .content .step a {
            display: inline-block;
            margin-top: 8px; }
            #hkNbLuckyDraw .wrapper__stepbox .content .step a:link {
              text-decoration: underline;
              padding: 5px 10px; }
            #hkNbLuckyDraw .wrapper__stepbox .content .step a:hover {
              background: #434e71;
              color: #fff;
              text-decoration: none; }
          #hkNbLuckyDraw .wrapper__stepbox .content .step .icon-box {
            min-width: 300px;
            min-height: 300px;
            border-radius: 200px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            position: relative;
            margin: 0 auto;
            background: #e7edb0;
            /*
                        &.yellow {
                            background: #eec908;
                        }

                        &.gray {
                            background: #92999c;
                        }

                        &.blue {
                            background: #434e71;
                        }
                        */ }
            #hkNbLuckyDraw .wrapper__stepbox .content .step .icon-box h5.step-title {
              color: #432918;
              font-size: 24px;
              margin-top: 16px;
              font-weight: 700; }
          #hkNbLuckyDraw .wrapper__stepbox .content .step p {
            width: 100%;
            margin-top: 24px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            color: #fff;
            font-weight: 700; }
            #hkNbLuckyDraw .wrapper__stepbox .content .step p span {
              display: block;
              margin-bottom: 24px;
              text-align: left; }
          #hkNbLuckyDraw .wrapper__stepbox .content .step ul li {
            list-style-type: decimal;
            margin-bottom: 24px;
            line-height: 30px;
            text-align: left;
            margin-left: 24px; }
          @media (max-width: 1536px) {
            #hkNbLuckyDraw .wrapper__stepbox .content .step .icon-box {
              min-width: 200px;
              min-height: 200px; }
              #hkNbLuckyDraw .wrapper__stepbox .content .step .icon-box img {
                width: 40%; } }
        #hkNbLuckyDraw .wrapper__stepbox .content .arrow-box {
          height: 240px;
          width: 10%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center; }
          #hkNbLuckyDraw .wrapper__stepbox .content .arrow-box .arrow {
            width: 50%;
            height: 1px;
            background: #fff;
            opacity: 0; }
          @media (max-width: 1536px) {
            #hkNbLuckyDraw .wrapper__stepbox .content .arrow-box {
              height: 200px; } }
        @media (max-width: 960px) {
          #hkNbLuckyDraw .wrapper__stepbox .content {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column; }
            #hkNbLuckyDraw .wrapper__stepbox .content .step {
              width: 100%;
              text-align: center; }
              #hkNbLuckyDraw .wrapper__stepbox .content .step .icon-box {
                min-width: 180px;
                min-height: 180px; }
                #hkNbLuckyDraw .wrapper__stepbox .content .step .icon-box img {
                  width: 40%; }
              #hkNbLuckyDraw .wrapper__stepbox .content .step p {
                width: 100%; }
            #hkNbLuckyDraw .wrapper__stepbox .content .arrow-box {
              height: 100px;
              width: 100%;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              justify-content: center; }
              #hkNbLuckyDraw .wrapper__stepbox .content .arrow-box .arrow {
                width: 1px;
                height: 50%;
                background: #fff;
                opacity: 0; } }
    #hkNbLuckyDraw .wrapper__termsbox {
      margin-top: 100px; }
      #hkNbLuckyDraw .wrapper__termsbox .content {
        color: #fff;
        width: 85%;
        margin: 0 auto;
        font-size: 18px;
        /*background:rgba(221,68,48,.3) ;*/ }
    #hkNbLuckyDraw .wrapper__storebox .content {
      width: 85%;
      margin: 0 auto;
      text-align: center;
      background: white;
      padding: 5% 0;
      border-radius: 30px; }
      #hkNbLuckyDraw .wrapper__storebox .content a {
        border: 0; }
        #hkNbLuckyDraw .wrapper__storebox .content a:hover {
          background: none; }
      @media (max-width: 960px) {
        #hkNbLuckyDraw .wrapper__storebox .content {
          width: 100%;
          border-radius: 0px; } }
      #hkNbLuckyDraw .wrapper__storebox .content img {
        display: inline-block;
        border: 0;
        max-width: 100%; }
        @media (max-width: 960px) {
          #hkNbLuckyDraw .wrapper__storebox .content img {
            max-width: 94%; } }