#referral-award .wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center; }
  #referral-award .wrapper#wrapper-1 {
    background-color: #466ABD; }
  #referral-award .wrapper#wrapper-2 {
    background: url("/images/award/referral_bg.png") no-repeat #FFF;
    background-size: cover; }

#referral-award .motto-container {
  width: 100%;
  max-width: 800px;
  margin-top: 22px;
  color: white; }
  #referral-award .motto-container .logo-container {
    text-align: left; }
    #referral-award .motto-container .logo-container img {
      max-width: 122px; }
  #referral-award .motto-container hr {
    border: none;
    border-bottom: rgba(255, 255, 255, 0.3) 1px solid;
    margin: 16px 0 30px; }
  #referral-award .motto-container .top-motto {
    font-size: 60px;
    line-height: 65px; }
  #referral-award .motto-container .sub-motto-container {
    margin-top: 20px; }
    #referral-award .motto-container .sub-motto-container img {
      max-height: 206px; }
    #referral-award .motto-container .sub-motto-container .sub-motto {
      font-size: 24px; }
      #referral-award .motto-container .sub-motto-container .sub-motto span {
        color: #EE9590; }
  #referral-award .motto-container .claim-button {
    margin: 43px auto 33px;
    display: block;
    max-width: 400px;
    height: 49px;
    background: url("/images/award/referral_button.png") no-repeat;
    background-size: 400px 49px;
    font-size: 18px;
    color: #EE9590;
    line-height: 49px; }

#referral-award .note-container {
  max-width: 400px;
  background: #EEF2F8;
  padding: 17px 200px 20px;
  text-align: left;
  border-radius: 4px;
  margin-bottom: 30px; }
  #referral-award .note-container .rule-title {
    font-size: 14px;
    line-height: 26px;
    color: #466ABD;
    text-align: center;
    border-bottom: 1px #466ABD solid;
    width: 80px;
    margin: 0 auto 13px; }
  #referral-award .note-container .rule {
    line-height: 23px;
    margin-bottom: 10px; }
  #referral-award .note-container .sub-rule {
    color: #657791;
    margin-bottom: 10px; }

@media only screen and (max-width: 444px) {
  #referral-award .wrapper {
    padding: 0 21px; }
  #referral-award .motto-container #monkey {
    height: 24px; }
  #referral-award .motto-container .top-motto {
    max-width: 255px;
    margin: 0 auto; }
  #referral-award .motto-container .sub-motto-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
    #referral-award .motto-container .sub-motto-container img {
      height: 100px;
      margin-right: 9px; }
    #referral-award .motto-container .sub-motto-container .sub-motto {
      width: 139px;
      text-align: left; }
  #referral-award .motto-container .claim-button {
    width: 278px;
    background-size: 278px 49px;
    margin-top: 21px; }
  #referral-award .note-container {
    max-width: 278px;
    padding: 17px 17px 28px; } }