/*
LESS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: @icon-home-width;
}

The large array-like variables contain all information about a single icon
@icon-home: x y offset_x offset_y width height total_width total_height image_path name;

At the bottom of this section, we provide information about the spritesheet itself
@spritesheet: width height image @spritesheet-sprites;
*/
/*
The provided classes are intended to be used with the array-like variables

.icon-home {
  .sprite-width(@icon-home);
}
.icon-email {
  .sprite(@icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `.sprites` mixin generates identical output to the CSS template
  but can be overridden inside of LESS

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

.sprites(@spritesheet-sprites);
*/
.m-toast-warpper {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 200;
  line-height: 18px;
  font-size: 18px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  width: 100%;
  padding: 15px 12px;
  border-radius: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.m-toast-shown {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.m-toast-icon {
  margin-right: 8px;
}
.m-toast-success {
  background-color: #fff;
  color: #000;
}
.m-toast-success .m-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons-micons-m-9209ff.png);
  background-position: 0px -62px;
  background-size: 82px auto;
  width: 20px;
  height: 20px;
}
.m-toast-notice-light {
  background-color: #fff;
  color: #000;
}
.m-toast-notice-light .m-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons-micons-m-9209ff.png);
  background-position: -62px -21px;
  background-size: 82px auto;
  width: 20px;
  height: 20px;
}
.m-toast-notice-heavy {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
.m-toast-notice-heavy .m-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons-micons-m-9209ff.png);
  background-position: -62px 0px;
  background-size: 82px auto;
  width: 20px;
  height: 20px;
}
.m-toast-error {
  background-color: #fc7878;
  color: #fff;
}
.m-toast-error .m-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons-micons-m-9209ff.png);
  background-position: -31px -31px;
  background-size: 82px auto;
  width: 20px;
  height: 20px;
}

/*
LESS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: @icon-home-width;
}

The large array-like variables contain all information about a single icon
@icon-home: x y offset_x offset_y width height total_width total_height image_path name;

At the bottom of this section, we provide information about the spritesheet itself
@spritesheet: width height image @spritesheet-sprites;
*/
/*
The provided classes are intended to be used with the array-like variables

.icon-home {
  .sprite-width(@icon-home);
}
.icon-email {
  .sprite(@icon-email);
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/
/*
The `.sprites` mixin generates identical output to the CSS template
  but can be overridden inside of LESS

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

.sprites(@spritesheet-sprites);
*/
.toast-container-pc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 20px;
  right: 30px;
  position: fixed;
  z-index: 10001;
  top: 102px;
}
.pc-toast-warpper {
  line-height: 18px;
  font-size: 14px;
  position: relative;
  word-wrap: break-word;
  color: #ffffff;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center;
  max-width: 686px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 2px 5px 0px;
          box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 2px 5px 0px;
  pointer-events: auto;
  padding: 11px 20px;
  background: 0% 0% / cover rgba(0, 0, 0, 0.75);
  border-radius: 2px;
}
.pc-toast-shown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pc-toast-icon {
  margin-right: 8px;
}
.pc-toast-success {
  background-color: #fff;
  color: #000;
}
.pc-toast-success .pc-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons_pcicons_pc-565a2e.png);
  background-position: -703px -38px;
  background-size: 913px auto;
  width: 20px;
  height: 20px;
}
.pc-toast-notice-light {
  background-color: #fff;
  color: #000;
}
.pc-toast-notice-light .pc-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons_pcicons_pc-565a2e.png);
  background-position: -682px -38px;
  background-size: 913px auto;
  width: 20px;
  height: 20px;
}
.pc-toast-notice-heavy {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
.pc-toast-notice-heavy .pc-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons_pcicons_pc-565a2e.png);
  background-position: -242px -67px;
  background-size: 913px auto;
  width: 20px;
  height: 20px;
}
.pc-toast-error {
  background-color: #fc7878;
  color: #fff;
}
.pc-toast-error .pc-toast-icon {
  background-image: url(//docs.gtimg.com/scenario/img/icons_pcicons_pc-565a2e.png);
  background-position: -892px -38px;
  background-size: 913px auto;
  width: 20px;
  height: 20px;
}

.header-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 60px;
  background-color: #fff;
  width: 100%;
  z-index: 500;
  top: 0;
  -webkit-box-shadow: 0 2px 4px 0 rgba(85, 85, 85, 0.1);
          box-shadow: 0 2px 4px 0 rgba(85, 85, 85, 0.1);
}
.header-wrapper .header-content {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 912px;
  margin: 0 auto;
  font-size: 20px;
  color: #000000;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-wrapper .header-button-list {
  height: 30px;
  cursor: pointer;
}
.header-wrapper .header-button-list .user-info-container {
  width: 28px;
  height: 28px;
  padding: 2px;
  border-radius: 50%;
}
.header-wrapper .header-button-list .user-info-container div {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.header-wrapper .header-button-list .user-info-container div:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.header-wrapper .header-button-list .user-info-container div:active {
  background-color: rgba(0, 0, 0, 0.2);
}
.header-wrapper .header-button-list .user-info-container div .user-avatar {
  display: inline-block;
  border-radius: 50%;
  margin-top: 2px;
  margin-left: 2px;
  width: 28px;
  height: 28px;
  vertical-align: middle;
  background-size: contain;
}

.content-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 48px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
}
.content-line {
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0.1);
}
.tab-line-selected {
  width: auto;
  height: 3px;
  margin-top: 18px;
  background-color: #000000;
}
.tab-line {
  width: auto;
  height: 3px;
  margin-top: 18px;
  background-color: #FFFFFF;
}
.content-tab-title-warpper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.step-title-normal {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 20px;
}
.step-title-selected {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  color: #000000;
  line-height: 20px;
}
.icon-1 {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAutJREFUWAntWM1rE0EUz8YmwRSEgOLBXNRCUeNNevDm1XvjJRATQoIeihexCF48VLyIF5GQEEjMof0TPEjQk3oS1IoRRREvPZTiISQN2fh7LSvZ2ZftzsfSUjowmZ335r33m/cxu5NI5KjpecDSE/dKV6vVa6A+sixr3suNvCiXy0sMfSppZipHklGv1zO2bT8ej8fXSRSjR0M0Gv3hIe5B0AbYbDbPDAaDh6PR6CZsRf3swasf/fgcTxlgu90+0ev1lvv9/h0oPs4pF2nxeFwaoHQOIsdiMHwL/QH6SRGEz3yjUqmc9uGzrMAeRE5ZtVptEeMKNJ1ntfkQEd5PPuypLN+ccaRQAAsA9xbg1kCbCg4gRuCvO3LCKB1ekg8EENWZArgFwaA4fQfCFfTXIoPmKgVCcoEA4ux6ibWvSEBsMLwF2m2suYr+AfOMuIbmoQIkAzjD7sHI/8MNz9sgP00kEnNI/ueY27QO7fLu4Pq1UcGfXZSAE6kqRgWvQu8N9LVYLHa/WCy6Dl7kaRrp8Jux/R2bmGPoe5ICVzFpgheWcSA/KZVK7znNyFPOe7RUqUBIUApgoVD4CRnqbEOYMwDJ8ZQBBioSziJHC8ODRgECtPEQGwPY6XRm4MELomcR9n4qlfom0oPOjQHsdrtUpQnRMEB/yWaz9IZRasYAwjobXnhQuUBoR6EDhI2DDRBvIKWvGPIeNWMepDNwV6X7F2+c/fdgq9WaRTGcc0Pb+UDYzOfzf0S6zNyIB/HZfxFGPboAWiu8tBGPUpndTaxlKxh8rfCSflMA2fw7SABZD+qegSY9yAJMJpP7n4ONRuMUisFznYT3fuVyub/kBZ2mnYPD4TC0/KONaQOEDja8oGtXcKgATRTI4QeI4qBb4SXa6WSD97Zxufo6SVN9PqYqSHLpdPosQN5ldKzjmvmMoUuTtIoE4EItENpNKAARYu0D2nG11L3YEXJGfIy+wXPFmTsj/l1g/8dx+Idq/Ad/As2fkU9maAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
.icon-1-selected {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAdxJREFUWAntmLlKBEEQhtcLA0EQ0UQDFRNFI8XMQIx8Ad9hE/EpTBVzczMjMzfQSFMPDFTYUBExEDzA6/9hC4alepzprp6RZQp+eqamu/rr7uq5arXK/t8MrADpFHpWtFsm7hw6P4R+UrRZBuAYOt2DvlLABHq1SMBBdLYFvWYAE8DRIgD70MkG9JgDjIAPUFTrQvR16BaSGclTNmLSLSH4WQawT9S5ctTbgT+3dWdsMYR6hEwzDmAROnZUunD4zdxHiKQtKe93dUgGe+Ko99cA0SzMFtD8GxLIDxxvQ8NQ0ggsdaTkLWggWSnW8X6rc5ZTSifjresCJiU3ViE2gV7SlmoN1wUqWR740vXmbNhEfcplfNxp5r1BJLG1oD6+eUejzgV0DNjLzXR5h5K5x+M3qAfyMsslngZBv0JxDR9vM15mCWiefxxRBYhJuPRa2wiNbhCzfYPwnG/cpRufs9or/1MomVUOzgJEixW8vFpQn0FH2cEEsQI0fwbLLFkBRptBAQ0t7xFA28H8NC3dRkCgwTUtyCyWOFr+cYAWgFHzrwK0yMOQGPwd8gK1bxJ+kvIfTuk2CYJ2OJ6fW5GF5mDUDcJBxgIMfkmQFWAOhdgyGs8oARrw3Sn+znP9Av+PuUWDGvhPAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
.icon-2 {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAA1xJREFUWAntmE1LVFEYx+fVEhczFi1iIIhcSPRGH8AWSZRY7WwZg+kQLewTBH2B1qE2OIIUStEmnVUECa1EKiLaZIG6KNIBh6wZZ+x3oAuXO8+5557bbSrowuWc+3/e/ud5zttMLPb/+bUMxG3Nx8fHS9hcsrXb5cFmKx6PV+hWaJcTicSj4eHhRfpNnb+UTqDDcfa+2WxmdXID3g25Q0qHtq/RaIypAdPP41cNoOVJtCAGAGevDCq24quTk5PailgTTKVSL20ZBNA/pdOxJpjP51cox5bOYRicquzX2YWZg7vMmyuQzOicunGCsxYSnbS9vDeQdbrlqg++4cWcb2uCynB0dHTBcWDTMrA0ZMa8Ngz2kxdzvq1L7BiGbPdKdmT4nYQrrK0EyV6PRIQMvpXwthMk4FEvEchV2KzXvbjz3bYMlkoltVIPOoFd7WtXv6XbNoK1Wu14S3QAyu678beNIFzEzZgF8ncQ5PwelDIIQd8Sh9oHpUA6bGZmprtard5CflbQqe/s7Pgenb+F4MTExGHm1gUIDUKunzYtkIuxgpfY9L9KMgeLhOD8/PyetbW1PkVKvZSz1wlgaJ8Y5LHQBIvF4oF6vX6ZLAyurq72Q6zLFMwtx+4jNnfcmNS3Jsjd7TwZusncUaVLEkTyq8Ugpgzm0un0GDcj3/IqJ4Gv/NPT013b29v3sbmoDG0eSNXQX+R9nEwmH/qdHF6/gTMIudsYByYHqRWyW6YtZ7PZp0NDQ1Vv8CDfgTLIqjxBWZdwqB0QRL5B6JkiRJbKZEl7QwlCzNHRBnQUVEvgAo2oC6EF3mImkymHzZI7lrcvBvUq8X1OwGKcAtdGRkbuSbKoMGOJf54ELVdysvaGTfZYVER0foyXBRbHaY3xcw0eKWwkyOI4KUUkg8sSHjVmJEhA8R6nShw1GclfaIJsJX+eINtLglf6HbHOMVWRRhw15pvBqampIwRs+aEN1pbsqcH67oNcCMT5h90ZfoR/UQ7CPFTlRaFQEG/YXn++BFEWCRKgA9k+r7Og32zwDwLr+ilCRCToZ2OSsfo/53K5OZOeI/edgyhFThCfxYGBge8OAVOrJTg7O6v+keoxObCUN7mo3rWx0c7Bzc3NDubKdRtnAXQ32J4+BND7d1R+AMOOGYs2sSgxAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
.icon-2-selected {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAl9JREFUWAntWNsqRUEYXuRMOaXkiihuHPIA3FI7UsoDcIPkEbyAcsWluKMkKYcbNyg3aueUpNg3XCiHInL2/bs9NXu1/rVmz5o1Uf76mlnf/Idvz8xaa9Z2nH8LNwNZGuHziOnRiPtGzCPwkEIc7TKwC3wBxmwCmaiYKcwhl85EIczb+kCbEify9HqXcpxsbsCHP/AZ0x1q4wJ1BF4iGe0lk1bJJcvhBnx4WpYBoNTHRx6iSSgEmoDRVB9Nmt2lXUkXOgIpfEPKkUk3F87jHgE3HlyS0lliLpcKX8A4nTG81k3C5VLhGxinU4a3Tl+joni0iPbeugqmIN2pQpTcbjP+SdrmHmxmhBwyvHWB3MP41wiMMTN1xPDW6HJUmgLkfSf6b+CLrCmRCtWhPwKsAyRCCHK3exjzNd03iTtpPogOoDsFeq2p2JqKk65PFQKHgBXgCXDPTtB1AjGRLG8XEm8CH0CQCK9xOj0vAtWAUStGtlXAq2gQ94q4LWAMqAEisUlkDRIij1/Afwag75cSIFJrQfZ3QBbg7r9gnI5hdJxqBKzaNKq5BYlrepT0A5HPkt8vPmcEDvoF2RqjN4GYLbk9tiFA5TTTzgjZYXijtIrAVqZinOGN0ioCuXPciVElIZLtI1bee6JfFiKnsVCa4WcPgVfGKgQkClriesTTR7fbrC1v0HGL23+dUHzrVp3BNZ0DYyr+ugLzkLxCpQDjs8DwGdNLiBA3hamW/uagA66SBe1BbomVkjNOs+Dp+BXa6Ob4BEzNHOWhfLWAsvntQdpnw8qZ1Bzpb7aEmusf8foBK//3Tno7yroAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
.icon-3 {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAA2hJREFUWAntmD2IE0EUx5PNh4eEcH4VFidB1GghiCiiVsFKLPxoU4QEknRaaWeljaCVIuQDA5axMIWkOqwstLA5v0DwThBDEC5ejGhMTOL/hd1jM/cmO7O5RRAXwuy8eR+/vJl5O7s+3/9rtgz4dcwLhcKS3+9fULEZjUZd6H6HLv066C8bhrEYDAYX0+l0U8UH6egCPoHNOVXnMj2AX8/lcjdl43a5Ye8o3L9S0HFUQTZvlEqlq46KUNACxBQtqThV0QFkWkVPCxBTsykZJDAAxrGmtzpBBp0U7OPRaPRdu90+ZpdJ7kOQzwFiP9os2uOMnhEIBPZC/poZWxdpbZJ1K42bSqUy3+/3W4DkYu3L5/MfprnTmuJpjmRjKClrgFvjxiORSIuT22WeA9br9S0IuM0e1Lz/lkwmvzLyCZHngI1GQ1bYVyZIJB3PARH3EBcbFeEtJxdlngMOBoMjYlDqA3Dq7rVsPAcEyBkrmL2F/Jm9L7vntr5MV1uOQnwCRgQi1tsveBbvBuTQyalo6KQ/Hq9Wq5Fer7ch+6h3BuRRFOAdKC1nh8PhFQbOh0fmbRU4CuYqg8jMS9geJQcurhqydwmAIxXbDVlQMYJzpQUu+GrC7rIOHNm7AsT0vRGCO3VfQOEC4O6qZs5y6AoQa0g3g7RZnheLxVq5XN5uBVdpXQEiC7oZHLMg8+excR6ogFk6rjYJGeOUMmc5sbcACOG9I9rtdk9Bfh+/nfZxuscfjGO634tyru+qzJAjnFK6nEPISN7B7xGm9DSyRqVm4gIgPf6UAF1N8US06Z1f3DCglRPjNeAeDhCbTPm102vAwxxgKBT6yMk5mWeAeByGMZVxJmg7lUp9ZuSsyDPATqdDG4Fba0rnQIvWM0CcA09aQYRWq4Z6BgiohAA27mKD/H1A1L8DWH8XOUDInkrkrHjTM4ijWAJwjxGNXt7FazmbzWp9PuEW8dgpAh3EzT0xAtfHk8EPqF1oFtDOczqmjMC1LilgOBxu4nTMvk+IEQA1FlmtOG72f6D+aR0UyE46xfRFAOOfTOezNkM4SGYyGa0SQ0GlgCaR1noxbbjmGr7B1LgBJ5kT4Cyf2+iIfwu/OODuOIHIxqVrkAxQsx6iUfpEgfX3EzCr0G/hPLgai8VWEonEb/LzT19/APiz96EAhqPQAAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}
.icon-3-selected {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAkdJREFUWAntWD0vBUEUXd8iyENUgkIIgmhEJBSoaGj8AIVSFBKVnkKh8Af8AopXKkU0GkHHSzSeCCG+v52b7OTN29xZM7uzQ8RNTmbm7p1zz96dnZ33PO/f4lWgwHD6PuIbNec8Ie7Oxy3aE2DLRxZtIpYG66cFLOqqK9IN9OO60Q4azuHCR+B8AHa4i7KvUB5o9OkR27JpW0QyTxcGNh4xcbwDFTI51zd9SWhJ9HJEAV8JxuVAKzAD9AGc0ZI54C649KWQ7APgKt/iUkhYriuFwJqwSa6ulSnE3egIMH2LdTiDMaqNPRMM5MYuBHZwieE7Uvjz3C4Eqt56rbfXhcDRvJLkBtu57s/1+pH6FQhuMefwaRWnOKL2SkUCSloN1AFjwBzA5ViBn/bGxGwPzMGq6I43MNf0C2Z8I+sRBJ5hzqwLcXQ3C4BuxShuF6D16MzGkclEoIjdxLxaFyqbIwokoSTSidFxikMV/A3AFHABiOrJbRv8v8JWoUIWJvoTuuq0NktdMibumfGRi9sb2dCkBTaxWT0vq/A7d9OBQDxWuaU1+uNWCgXcd/jaRFmSj5jOgdxa0zoHiptIUuCASBJoDwPj0GGSAocVmY0EKjhiu2kjfgHkF0P0e2KzxySgylGVhCC5PTbl5hax4GhHZ00MvmnpfFcP0C+4VEgsnQWtGSWS7z5u/x58ndbU+USnlkTSH0WTtsURXxqIWzmaP09kSdgSSKMKpCP+MhDraEWLO8zoazAUFiBde0T/EqA/iqjNAG/A37YvBSwUFWCB/7QAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}

.content-appeal {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
}
.content-title {
  color: #000000;
  height: 20px;
  width: auto;
}
.content-tips {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  font-size: 14px;
  margin-top: 8px;
}
.appeal-input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 40px;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 0px 16px 0px 16px;
  margin-top: 8px;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.appeal-input-error {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 40px;
  font-size: 14px;
  border: 1px solid #EF4E2F;
  border-radius: 2px;
  padding: 0px 16px 0px 16px;
  margin-top: 8px;
  outline: none;
}
.appeal-input:focus {
  border: 1px solid #0188FB;
  border-radius: 2px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
.appeal-input::-webkit-input-placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
}
.appeal-input::-moz-placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
}
.appeal-input::-ms-input-placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
}
.icon-loading {
  background: url(//docs.gtimg.com/scenario/img/ic_loadingic_loading-53a93f.png);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.icon-success {
  background: url(//docs.gtimg.com/scenario/img/ic_successic_success-40a02e.png);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.icon-error {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAwRJREFUWAnNmb9v00AUx+/OSCQZSBOpC2JBLIyFIiEkhhSxpvyQoAtILHTuyNiRvyEsSGUBJH40awUdkBAShY4sFQtiSeU0DEmQaI/3Pfucw26Mz7ETW3L8fH733qfvfL53r5ylPPq3L58Z/hk2BOfnmWTzkrF5MoUTR4fTyTjrHEn5rXSitF159emH98jul+wkP3p3rtTl7+FdxuQSAZ1L3pMRK9uj3/f8ZOlF9eVHN2nfRIA/m4uVCj+8R1D3yXA5qfExegNyutGXzrPT7Z3+GJ2g+b+AB82L1yQ/ekQ96kGvbASXS/F4rv3lXZy5sYBSSt67ceEhRW01zsCkzwigVX379QnnnFxFj2MBvz9olGrd3jpBXo92yb6F4La6ter62afbw7B1EW5A5KYJB/8IhO8zErAIoBrWKUXODA4g4dtsg/wPoJoQKd85KZ212ubuJZyO46yFHSW5x/sOBlM3CCk+JWV++IYeppqtADMNd5cXPpv3FrI7kM5N/QkKIojvXFo4C+dJVOs+i9JVgGqF8D7CSQzkroMFAUxwpABp+VohedIVIkvwsrekBpNENrK0no0tuQQ7AlkJhdRq4c8GIN4KmMAmkDLFq87uqUrnVD43O4ZYz2ATSDZjtWb5kNgEjXVhAcGGz0xhAcFGgMfnYbMc2ZFvSmkp2dkfNRRNkvuCsoVO0bA0D9gEtoa6oXBXYhPYtxYOzAcCm8CmOgvAX7cWr2o7pqzb0lzBphLWg+WF50Vbjwlsb25zd0WlW9jxp/kL8+3jMSlAlCPI2WASh1nsSQz/A5/JS1hRK6GQbhgK1mK9vfNBdzr1eiTrNpsrWHT9xh9ixlArISOJizo2Di11XZ9FdQsAsYtCrcTSWKDuNrOZxWDQOzoYV7M48EICzehVmtG51mNMf6ZMMC2auS2zLYigbvQLOVv6flpX1GfgO+wvAogqEwo56BBWzuteF4/gO+wjMsRaAUWkwpbfNCSuhS1gmpCFLgGboH4RnaoQsmG7dtO7lF8R3YTU8rT+DfEXLukxgHmqwgkAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
  }
}
.rotation {
  -webkit-transform: rotate(-360deg);
  animation: rotation 1s linear infinite;
  -moz-animation: rotation 1s linear infinite;
  -webkit-animation: rotation 1s linear infinite;
  -o-animation: rotation 1s linear infinite;
}
.content-title-2-warpper {
  margin-top: 20px;
}
.appeal-content-textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  resize: none;
  width: 100%;
  height: 160px;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 10px 16px 10px 16px;
  margin-top: 8px;
  outline: none;
}
.appeal-content-textarea:focus {
  border: 1px solid #0188FB;
  border-radius: 2px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
.appeal-content-textarea::-webkit-input-placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
}
.appeal-content-textarea::-moz-placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
}
.appeal-content-textarea::-ms-input-placeholder {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.3);
}
.btn-warpper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 48px;
  margin-bottom: 48px;
}
.placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
}

.phone-appeal {
  width: 320px;
  height: auto;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  font-size: 14px;
  color: #000000;
}
.appeal-phone-input-warpper {
  margin-top: 8px;
  width: 318px;
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.appeal-phone-input-warpper-focus {
  margin-top: 8px;
  width: 318px;
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #0188FB;
  border-radius: 2px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
.appeal-phone-input-warpper-error {
  margin-top: 8px;
  width: 318px;
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #F27159;
  border-radius: 2px;
}
.country-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 80px;
  height: 40px;
  opacity: 1;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-direction: column;
  margin-top: 20px;
}
.country-button:hover {
  opacity: 0.8;
}
.country-num {
  font-size: 14px;
  color: #777777;
  position: absolute;
  left: 16px;
}
.icon-arrow {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAOpJREFUWAntkr0NgzAQhW1XpI+YIEtQp2eC7BDkykwAFUoWYYPULJEJUHq6kHsRJyEk4GgokrNk2ff7zh8Yo0sJKAEloASUwL8TsBIAIYRb3/dXSS7nWGvvZVlmbM+dbi4w9kdR5Mmux76Vez3UrKQZIyKALlVVHdq2fRCJZKkrvbyJ4/jsve+W8jgmIoBkNKRXpSTw5OLpiRhypOKoFxNgMfofTkShIfvIvuF80QAJfffZASf5X1NMgIsh4JxLyR4j7uDbKo6emwdAUVEUDQle6MVvbNzhQ2zXled5hr2rqIopASWgBH6OwAcGQTlSLhjBXAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 58px;
}
.country-line-v {
  width: 1px;
  height: 24px;
  position: absolute;
  left: 82px;
  background-color: rgba(0, 0, 0, 0.2);
}
.appeal-phone-input {
  width: 205px;
  height: 40px;
  font-size: 14px;
  color: #000000;
  background: transparent;
  outline: none;
  border-width: 0px;
  margin-left: 16px;
}
.country-table {
  position: absolute;
  height: 222px;
  width: 318px;
  background-color: white;
  overflow: scroll;
  overflow-x: hidden;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.country-table li:hover {
  background: #ebebeb;
}
.country-item-content {
  height: 40px;
  font-size: 14px;
  color: #777777;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: 16px;
  margin-right: 7px;
}
.country-item-content span {
  pointer-events: none;
}
.appeal-sms-input {
  margin-top: 8px;
  width: 158px;
  height: 18px;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 10px 16px 10px 16px;
  font-size: 14px;
  color: #000000;
}
.appeal-sms-input:focus {
  border: 1px solid #0188FB;
  border-radius: 2px;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
.appeal-sms-input-error {
  margin-top: 8px;
  width: 158px;
  height: 18px;
  outline: none;
  border: 1px solid #F27159;
  border-radius: 2px;
  font-size: 14px;
  color: #000000;
}
.icon-error {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAwRJREFUWAnNmb9v00AUx+/OSCQZSBOpC2JBLIyFIiEkhhSxpvyQoAtILHTuyNiRvyEsSGUBJH40awUdkBAShY4sFQtiSeU0DEmQaI/3Pfucw26Mz7ETW3L8fH733qfvfL53r5ylPPq3L58Z/hk2BOfnmWTzkrF5MoUTR4fTyTjrHEn5rXSitF159emH98jul+wkP3p3rtTl7+FdxuQSAZ1L3pMRK9uj3/f8ZOlF9eVHN2nfRIA/m4uVCj+8R1D3yXA5qfExegNyutGXzrPT7Z3+GJ2g+b+AB82L1yQ/ekQ96kGvbASXS/F4rv3lXZy5sYBSSt67ceEhRW01zsCkzwigVX379QnnnFxFj2MBvz9olGrd3jpBXo92yb6F4La6ter62afbw7B1EW5A5KYJB/8IhO8zErAIoBrWKUXODA4g4dtsg/wPoJoQKd85KZ212ubuJZyO46yFHSW5x/sOBlM3CCk+JWV++IYeppqtADMNd5cXPpv3FrI7kM5N/QkKIojvXFo4C+dJVOs+i9JVgGqF8D7CSQzkroMFAUxwpABp+VohedIVIkvwsrekBpNENrK0no0tuQQ7AlkJhdRq4c8GIN4KmMAmkDLFq87uqUrnVD43O4ZYz2ATSDZjtWb5kNgEjXVhAcGGz0xhAcFGgMfnYbMc2ZFvSmkp2dkfNRRNkvuCsoVO0bA0D9gEtoa6oXBXYhPYtxYOzAcCm8CmOgvAX7cWr2o7pqzb0lzBphLWg+WF50Vbjwlsb25zd0WlW9jxp/kL8+3jMSlAlCPI2WASh1nsSQz/A5/JS1hRK6GQbhgK1mK9vfNBdzr1eiTrNpsrWHT9xh9ixlArISOJizo2Di11XZ9FdQsAsYtCrcTSWKDuNrOZxWDQOzoYV7M48EICzehVmtG51mNMf6ZMMC2auS2zLYigbvQLOVv6flpX1GfgO+wvAogqEwo56BBWzuteF4/gO+wjMsRaAUWkwpbfNCSuhS1gmpCFLgGboH4RnaoQsmG7dtO7lF8R3YTU8rT+DfEXLukxgHmqwgkAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}
.phone-tips-div,
.smscode-tips-div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  color: #EF4E2F;
  margin-top: 8px;
}
.sms-code-div {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.btn-next-phone {
  border-radius: 2px;
  background-color: #0d88fb;
  color: #fff;
  opacity: 1;
  margin-left: 8px;
  margin-right: auto;
  width: 120px;
  height: 40px;
  font-size: 14px;
  border-width: 0px;
  outline: none;
  cursor: pointer;
}
.btn-next-phone:hover {
  opacity: 0.8;
}
.btn-next-phone.active,
.btn-next-phone:active {
  background-color: #0a79df;
  opacity: 1;
}
.btn-next-phone-disabled {
  border-radius: 2px;
  background-color: #EBEBEB;
  color: #AAAAAA;
  margin-left: 8px;
  margin-right: auto;
  width: 120px;
  height: 40px;
  font-size: 14px;
  border-width: 0px;
  outline: none;
}
.btn-warpper-phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 48px;
  margin-bottom: 80px;
}
.btn-verifcode-warpper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 8px;
  width: 120px;
  height: 40px;
}

.submit-appeal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 650px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 84px;
}
.icon-finish {
  background: url(//docs.gtimg.com/scenario/img/ic_finishic_finish-46c3a1.png);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  width: 68px;
  height: 68px;
  margin-right: 6px;
}
.title1 {
  font-size: 24px;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  margin-top: 32px;
}
.title2 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.56);
  letter-spacing: 0;
  text-align: center;
  margin-top: 16px;
  margin-bottom: 155px;
}
.title2 .title3 {
  margin-top: 6px;
}

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
}
p,
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
html,
body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  background-color: #F7F8FA;
}
.cm-page-wrap,
.root {
  width: 100%;
  height: 100%;
}
.cm-page-wrap > div,
.root > div {
  display: -webkit-box;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
}
.content-wrapper {
  padding: 0 136px;
  background-color: #fff;
  margin: 32px auto 0;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
  display: table;
}
.btn-next {
  border-radius: 2px;
  background-color: #0d88fb;
  color: #fff;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 38px;
  font-size: 14px;
  border-width: 0px;
  border-color: #0d88fb;
  outline: none;
  cursor: pointer;
}
.btn-next:hover {
  opacity: 0.8;
}
.btn-next.active,
.btn-next:active {
  background-color: #0a79df;
  opacity: 1;
}
.btn-next-disabled {
  border-radius: 2px;
  background-color: #EBEBEB;
  color: #AAAAAA;
  margin-left: auto;
  margin-right: auto;
  width: 160px;
  height: 38px;
  font-size: 14px;
  border-width: 0px;
  border-color: #EBEBEB;
  outline: none;
}
.header-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.header-title-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: .5em;
  width: 128px;
  height: 26px;
  background-image: url(//docs.idqqimg.com/tim/docs/desktop/img/node_modules/@tencent/docs-design-resources/pc/svg/logo_combination-7cf8da.svg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.header-content {
  width: 1112px !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 24px;
}
.user-avatar {
  border-radius: 4px !important;
}
@media screen and (max-width: 834px) and (min-width: 415px) {
  .header-wrapper {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 2.87769784vw;
  }
  .content-wrapper {
    margin: 2.87769784vw;
    padding: 0 8.63309353vw;
  }
  .header-content {
    padding: 0;
  }
}
@media screen and (max-width: 414px) {
  .content-appeal * {
    font-size: 3.38164251vw;
  }
  .content-appeal input::-webkit-input-placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal input::-moz-placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal input::-ms-input-placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal input::placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal textarea::-webkit-input-placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal textarea::-moz-placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal textarea::-ms-input-placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal textarea::placeholder {
    font-size: 3.38164251vw !important;
  }
  .content-appeal .icon-error {
    width: 4.83091787vw;
    height: 4.83091787vw;
  }
  .header-wrapper {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0 5.79710145vw;
  }
  .header-content {
    padding: 0;
  }
  .content-wrapper {
    margin: 5.79710145vw;
    padding: 0 3.8647343vw;
  }
  .content-tab-title-warpper {
    font-size: 3.38164251vw;
  }
  .content-tab-title-warpper > span {
    width: 4.34782609vw;
    height: 4.34782609vw;
  }
  .header-title {
    font-size: 5.31400966vw;
  }
  .header-title-icon {
    width: 30.9178744vw;
    height: 6.76328502vw;
  }
}
@media screen and (max-width: 1010px) and (min-width: 835px) {
  .content-wrapper {
    margin: 32px 24px 0;
  }
}


/*# sourceMappingURL=appeal-02efe9.css.map*/