#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

html {
  height: 100%;
}

body {
  font-size: 14px;
  margin: 0;
  min-height: 100%;
}

body, button, input, keygen, select, textarea {
  font-family: Arial, MicrosoftYaHei, 微软雅黑;
}

div {
  box-sizing: border-box;
}

p {
  outline: 0;
}

ol, p, ul {
  margin: 0;
}

ol, ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: #212121;
  outline: 0;
}

button, input {
  list-style: none;
  border: 0;
}

i {
  font-style: normal;
}

.v-enter-active {
  transition: all .3s;
}

.v-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

.timeline {
  height: 3px;
  max-width: 100%;
  position: absolute;
  top: 8px;
  transition: all .5s;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
}

@media (min-width: 768px) {
  .line {
    display: inline-block;
    font-size: 15px;
    float: right;
    color: #00b704;
    height: 20px;
    position: absolute;
    left: 50%;
    bottom: 40%;
    transform: translate3d(-50%, -50%, 0);
  }
}

@media (max-width: 768px) {
  .line {
    display: inline-block;
    font-size: 15px;
    float: right;
    margin-right: 30px;
    color: #00b704;
    height: 20px;
  }
}

.yellow {
  color: #ffc107;
}

.red {
  color: red;
}

.none {
  display: none;
}

.tui {
  margin-right: 16px;
}

.pointer {
  cursor: pointer !important;
}

.text-l {
  text-align: left;
}

.text-r {
  text-align: right;
}

.text-c {
  text-align: center;
}

.text-through {
  text-decoration: line-through;
}

.fr {
  float: right;
}

.fl {
  float: left;
}

.no-border-r {
  border-right: none !important;
}

.mr {
  margin-right: -30px !important;
}

.clearfix:after, .clearfix:before {
  content: "";
  display: table;
  clear: both;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.m_show {
  display: none;
}

.body_view {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 3%;
}

.header_title {
  width: 100%;
  position: relative;
}

.title_tips_text {
  padding: 0 5% 15px;
  font-size: 18px;
  color: #242b33;
}

.header_title .logo {
  display: block;
  padding: 20px 0 15px;
  font-size: 45px;
  font-family: Arial, MicrosoftYaHei, 微软雅黑, fantasy;
  color: #ff5722;
  letter-spacing: 3px;
  text-shadow: 1px 2px 2px #ffc107;
}

.header_title .title_tips {
  position: absolute;
  right: 0;
  bottom: 18px;
  font-size: 16px;
  color: #667380;
  border: 1px dashed #667380;
  padding: 5px 10px;
  border-radius: 3px;
}

.xianlu {
  width: 100%;
  padding: 20px 0;
}

.xianlu .xianlu_item {
  float: left;
  display: block;
  margin: 5px;
  height: 100px;
  line-height: 90px;
  width: calc(20% - 10px);
  border: 1px solid #ff8960;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
  font-size: 15px;
  color: #ff5722;
  position: relative;
}

.xianlu .xianlu_item .text {
  font-size: 18px;
  display: inline-block;
  padding-left: 40px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAcCAYAAAB2+A+pAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1ZGNlNDAzMi03NzBkLTQ1NDYtYmY0ZS1hMWUxNTdiNzBkMmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTlENEUyMDlFMTFDMTFFQUFDNEQ5NUE2ODk3NjBENDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTlENEUyMDhFMTFDMTFFQUFDNEQ5NUE2ODk3NjBENDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTIyODIxNDYtOGE3Yy0yMjQzLTg1ZDMtZGJkMDIwZjAzNjY1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVkY2U0MDMyLTc3MGQtNDU0Ni1iZjRlLWExZTE1N2I3MGQyYSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq4ojEEAAAJSSURBVHja7JddaM5RHMef5xmzME1ZoayYkjREC5GXeSsrpEi21i6kuOCSSREXXi5doeQC5Z3EnWVlWcSF4opE0ox5zUsbi89vfR/9HOf/PJO2q+dXn/6/c3bO+f7/5+U536U7N81OJUQZbIXVMEV1j+AKHIYPqfxRAnugDkbBHdgFrekE4cVwRo1j0QnroTmHaBquwYqgvhuWDIp0mKUOJSq3wU0NtBDm6IWuwwJ9RSxqnOgtuAubYSjsD4WtfEqi9mb1cD5osw5OwhA4AVPhR0R4hstXwXsYrOWrzgSNl8FE5dsjohbnoEn5ZFie8MWvXb4WKmG+yh2ZyPRYfIOjOdbP/talfFFCG9uEb137JzBd5SOh8Gg9n0s8Kb6oje8TxkdYCe2u7icch4OZyE60+N6Ho9IV9InFbbd0KR3DjdCTSfV/fHX571kcCOFoFIQLwgXhgvB/Cw+3H26oVXmS7tox/SVsF/8waIGZrr4YGmWBzHG8zDNGX2e121c2OdFWGYDLKo/TjRKLT3pOyCNc4fJ2L1yn/J481SFYo6nO2pbSyIBtzuJU5RBujPTpFR6r3Ka7xzVq0bMIyiMDHtO9bWOcduP4qHU2yczeAy+cdRJLtba+U3ZdOiKDPoYDyu2LH6pss9UAZ+GqxrQ7eUu4Mcwx7oVpsqq2vvP0IhaXZHVisRtGwDYYqf0Rxmd58Pt/WB0MvVnZGzA30ukpmON/k2cDmTvdqRcucpvvAuyDZ3+5ff0nYR55B2yA8fAKLqrTu384nqU6CWZxXiT47d74JcAA1G92MAy+64QAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 30px 28px;
}

.xianlu .xianlu_item .icon {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiOTEwOTA5Ny0zZWVjLWY5NGUtOTc4MC1mOTIzZDBjNTVjYTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEZCQzRCMEVFMTMxMTFFQUIyNERDMjI2NTlDNTMwNjAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEZCQzRCMERFMTMxMTFFQUIyNERDMjI2NTlDNTMwNjAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6YjRjOGMzMDktN2Q0ZS0xMjQ3LWFiNTktMDAyNTliYTJlZTE4IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YzE5MDYwYmYtZGUwOC0xMWVhLWFiMTgtYTkwNDRlZmI0YmRkIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jkRVXAAAA09JREFUeNrEmVuITVEYx/c5zgzGzAPb0MnMeRmdyYMMZopCZh7kYRrXyGUUijNub4p4ICTx5JJLUoQhZURSinkgZEZezWjK7TToHKlB2TT8P/3PtNudy1p77Tm++tVp729/67/2XpfvWyeS2jTL8mFh0AAaQT2Ig0lgDO9/B0nQC7pBJ+gCg7oNRTT9q8BWsAZU5/EbCcaBqWAZr70HV8Ap8EHnTaiYzcB9YFcBcbmsms/2MZYdlMAV4BXYAkotcytlLIm50kSgfP7T4DoYbwVvEvMa24joCiwDHSBhDb8l2FaZqkDpTTtotopnzWwzoiLwJGixim8tbDuvQBm0m63/Z9L2qlwC7Ww9yGNPwVqwE3wNUKRoqMwm8KDGbJWdYiEX3mNgOngWkEBZ4A94BcbARo0gf1zbmtgbMA8c4T1T20BNQwLbQIlGgHKw33PtF3cKebOfDQWWUNM/gWGOJV1bD2qyXL8PpoEHhiJFUziTlVT5CCBr1u4c9z6CBWAv+O1ToGhqEIFNBr1cDcbmuCep1SGmZO98xm8UgTMNBI4Gywv4PAYzwC0f8etFYG0A21QhS4OlYAf4qRG7VgRGDQXO1liaTtD/teIzURFYYSiwUjOBfclP/kjBtyJsBWMTNf2/gcOqGfVAAAJH+HgmpuAzIAL7AxD4SdN/MTiq4NcvAnsMxX0BbxV9R3GidCiO/R4R+MJQ4BPFBKGWKdo2jdjdYRbVJnZTwWcdC/g6zdidIvC5TiHtMUlUbxTIei6Bi/ytY6KpK8w987JPgWe4ZGSzOg6fVp+xRdNgZh2USt/RDJBiguq1ENjODDvuU5xDTUMJq7zO85pB9mWpRWyOyeM8n/FrFzLDLuQ63bK55KicmcjmP8FzWjWHNUrMcNKlOePT3qIprbEE2ExIM4nrHq4GpuIsZjxpd1bsNjkrma9YG9/huibZ0OSA9vRz4Ko3bc/Wg6jC6YI8OzfAevg2J1fBow+H1f29Ip4o3GWbjurp1g+wCJwtgjhpYwnbtFQFZurcBHuWGgZhKRZdCbZl6Qp0T5wp3DWcAIQ5jCUx21USVtXetrFQl90j6UNYks/WMJbSVwkZ/g3RxLI1zkK73JXSy07Qy/34oeXzb4i/AgwAujOkZP9wh3IAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 100% 100%;
}

.commonlyUsed .address_item {
  display: block;
  text-decoration: none;
  color: #242b33;
  cursor: pointer;
  font-size: 20px;
}

.commonlyUsed .address_item img {
  width: 28px;
}

.commonlyUsed .used_left {
  width: 70%;
  padding-right: 10px;
}

.left_item {
  border-radius: 10px;
  background: #e3fdff;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.left_item .left_title, .right_item .right_title {
  font-size: 24px;
  color: #242b33;
  padding: 24px 30px;
}

.left_item .left_body {
  width: 100%;
}

.left_item .address_item {
  float: left;
  width: 20%;
  padding: 20px 0;
  text-align: center;
}

.left_item .address_item img {
  margin-right: 3px;
}

.left_item .address_item img, .left_item .address_item span {
  display: inline-block;
  vertical-align: middle;
}

.commonlyUsed .used_right {
  width: 30%;
  padding-left: 10px;
}

.right_item {
  border-radius: 10px;
  background: #e3fdff;
  padding-bottom: 30px;
}

.right_item .address_item {
  float: left;
  width: 50%;
  padding: 34px 0;
  text-align: center;
}

.right_item .address_item img {
  display: block;
  margin: 0 auto 5px;
}

.right_item .address_item span {
  display: block;
}

.commonlyUsed_title {
  width: 100%;
  padding: 20px 0;
}

.commonlyUsed_title .used_title_item {
  float: left;
  display: block;
  width: 25%;
  border-right: 1px solid #919599;
  font-size: 14px;
  color: #a9abad;
  text-align: center;
  cursor: pointer;
}

.commonlyUsed_title .used_title_item.select {
  color: #242b33;
  font-weight: 800;
}

@media only screen and (max-width: 1300px) {
  .header_title .title_tips {
    font-size: 14px;
  }
}

@media only screen and (max-width: 1200px) {
  .header_title .logo {
    font-size: 45px;
    font-family: Arial, MicrosoftYaHei, 微软雅黑, fantasy;
    color: #ff5722;
  }
  .header_title .title_tips {
    font-size: 14px;
  }
  .xianlu .xianlu_item {
    font-size: 13px;
  }
  .xianlu .xianlu_item .text {
    padding-left: 28px;
    background-size: 24px 22px;
  }
}

@media only screen and (max-width: 1110px) {
  .header_title .title_tips {
    font-size: 12px;
  }
}

@media only screen and (max-width: 1050px) {
  .header_title .logo {
    font-size: 45px;
    font-family: Arial, MicrosoftYaHei, 微软雅黑, fantasy;
    color: #ff5722;
  }
  .header_title .title_tips {
    font-size: 12px;
  }
  .xianlu .xianlu_item {
    height: 100px;
    line-height: 90px;
    font-size: 10px;
  }
  .xianlu .xianlu_item .text {
    padding-left: 28px;
    background-size: 24px 22px;
  }
  .commonlyUsed .address_item {
    font-size: 18px;
  }
  .commonlyUsed .address_item img {
    width: 24px;
  }
  .left_item .left_title, .right_item .right_title {
    padding: 24px 30px 15px;
  }
  .right_item .address_item {
    padding: 33px 0;
  }
}

@media only screen and (max-width: 930px) {
  .m_none {
    display: none !important;
  }
  .m_show {
    display: block !important;
  }
  .header_title .logo {
    width: 180px;
    float: none;
    margin: 0 auto;
    font-size: 35px;
    font-family: Arial, MicrosoftYaHei, 微软雅黑, fantasy;
    color: #ff5722;
  }
  .header_title .title_tips {
    display: none;
  }
  .ml, .mr {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .xianlu {
    padding: 0 5%;
  }
  .xianlu .clearfix {
    padding: 20px 18px 5px;
    border: 2px solid #f5b29b;
    border-style: dashed;
    border-radius: 5px;
  }
  .xianlu .xianlu_item {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    float: none;
    text-align: left;
    padding: 0 20px;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .xianlu .xianlu_item .text {
    padding-left: 24px;
    background-size: 20px 20px;
  }
  .commonlyUsed .address_item {
    font-size: 18px;
  }
  .commonlyUsed .used_item_title {
    display: none !important;
  }
  .commonlyUsed .used_item {
    background: none !important;
    padding: 0 5%;
  }
  .commonlyUsed .used_item .clearfix {
    padding: 20px 0 !important;
    border: 2px solid #f5b29b !important;
    border-style: dashed !important;
    border-radius: 5px !important;
    background: none !important;
  }
  .commonlyUsed .address_item {
    width: 25% !important;
    height: 45px;
    padding: 20px 0 !important;
    font-size: 14px !important;
  }
  .commonlyUsed .address_item img {
    display: block;
    margin: 0 auto 5px;
  }
  .commonlyUsed .address_item span {
    display: block;
    height: 20px;
    line-height: 20px;
  }
  .commonlyUsed .used_left, .commonlyUsed .used_right {
    float: inherit !important;
    width: 100% !important;
    padding: 0 !important;
  }
}