[v-cloak] {
  display: none;
}

.waittime {
  background-color: rgb(203, 203, 203) !important;
  color: #000000 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

::-webkit-input-placeholder {
  color: #b3b3b3 !important;
  font-size: 0.55rem;
  font-weight: 400;
}

:-moz-placeholder {
  color: #b3b3b3;
  font-size: 0.55rem;
  font-weight: 400;
  opacity: 1;
}

::-moz-placeholder {
  color: #b3b3b3;
  font-size: 0.55rem;
  font-weight: 400;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #b3b3b3;
  font-size: 0.55rem;
  font-weight: 400;
  opacity: 1;
}

select {
  width: 100%;
  height: 100%;
  color: #b3b3b3;
  font-size: 0.55rem;
  font-weight: 400;
  border: 0;
  outline: 0;
  padding: 0rem 0.4rem;
  box-sizing: border-box;
  background-color: #ffffff;
}

input {
  width: 100%;
  height: 100%;
  font-size: 0.55rem;
  font-weight: 400;
  border: 0;
  outline: 0;
  -moz-appearance: textfield;
  padding: 0rem 0.4rem !important;
  box-sizing: border-box !important;
  background-color: #ffffff;
}

html,
body {
  width: 100%;
  background: #ffffff;
}

#app {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 0 0rem;
  font-size: 0.6rem;
  font-family: microsoft yahei;
  font-weight: 400;
  color: #3d3d3d;
}

.banner {
  width: 100%;
  height: 13.5rem;
  position: relative;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toggle,
.article {
  width: 96%;
  margin: 0 auto;
}

.toggle {
  margin-top: 2%;
  position: sticky;
  top: 2rem;
  left: 0;
  background-color: #fff;
  z-index: 10;
}

.toggle span {
  display: inline-block;
  width: 2.4rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  background: #278133;
  border-radius: .2rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: .25rem;
}

.toggle span:nth-of-type(11) {
  width: 5rem;
}

.toggle .active {
  font-weight: bold;
  background: #f6cd4d;
  color: #000000;
}

.article {
  margin-top: 1rem;
}

.publictitle .left,
.publictitle .right {
  height: 1.88rem;
  line-height: 1.88rem;
  text-align: center;
  background: #46ad56;
  font-weight: bold;
  color: #ffffff;
}

.publictitle .left {
  background: no-repeat;
  background-size: 100% 100%;
}

.publictitle .right {
  background: no-repeat;
  background-size: 100% 100%;
}

.publictitle .center {
  width: 3.25rem;
  height: 3.25rem;
  line-height: 1rem;
  padding: 0rem .4rem;
  box-sizing: border-box;
  text-align: center;
  background:  no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  color: #000000;
  letter-spacing: .1rem;
  word-break: break-all;
}

.article-country {
  padding: 0rem .5rem;
  box-sizing: border-box;
}

.article-title {
  height: .75rem;
  font-weight: bold;
  color: #000000;
  text-align: center;
  padding: .3rem 0rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
}

.article-flag span {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
}

.article-flag span:nth-of-type(1) {
  margin-left: .5rem;
}

.article-flag span img {
  width: 1.25rem;
  height: 0.73rem;
  box-shadow: 0rem 0rem .5rem 0rem rgba(140, 140, 140, 0.3);
  margin-left: .2rem;
}

.article-label {
  width: 4rem;
  height: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  border-radius: 1rem;
  font-weight: bold;
  color: #ffffff;
  margin: .38rem 0rem;
}

.article-txt {
  line-height: .8rem;
  padding-left: .38rem;
  /* padding-right: .9rem; */
  box-sizing: border-box;
}

.article-txt2 {
  margin-left: .5rem;
  padding-right: .3rem !important;
}

.article-circle span {
  display: inline-block;
  height: 1rem;
  line-height: 1rem;
  background: #f1f1f1;
  border-radius: .1rem;
  padding: 0rem 0.2rem;
  font-size: .55rem;
  box-sizing: border-box;
  position: relative;
}

.article-circle span::before {
  display: inline-block;
  position: absolute;
  left: -0.58rem;
  top: 50%;
  transform: translatey(-50%);
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
}

.article-txt .normal {
  padding-left: .2rem;
  padding-right: .6rem !important;
  box-sizing: border-box;
  padding: .55rem 0rem;
  padding-bottom: 0rem;
  margin-bottom: .55rem;
  box-sizing: border-box;
  position: relative;
}

.article-circle:nth-of-type(1) span:first-of-type::after {
  position: absolute;
  left: -0.53rem;
  top: -.2rem;
  content: "";
  width: 0.2rem;
  height: .5rem;
  background-color: #ffffff;
}

.article-txt .normal:last-of-type::before {
  position: absolute;
  left: -0.53rem;
  top: -.3rem;
  content: "";
  width: 0.2rem;
  height: 130%;
  background-color: #ffffff;
}

.article-country .orange .article-flag span {
  color: #ff5b1a;
}

.article-country .orange .article-label,
.article-country .orange .article-circle span::before {
  background: #ff5b1a;
}

.article-country .orange .article-txt {
  border-left: 0.05rem solid #ff5b1a;
}

.article-country .green .article-flag span {
  color: #46ad56;
}

.article-country .green .article-label,
.article-country .green .article-circle span::before {
  background: #46ad56;
}

.article-country .green .article-txt {
  border-left: 0.05rem solid #46ad56;
}

.article-country .pink .article-flag span {
  color: #f0546c;
}

.article-country .pink .article-label,
.article-country .pink .article-circle span::before {
  background: #f0546c;
}

.article-country .pink .article-txt {
  border-left: 0.05rem solid #f0546c;
}

.article .zhu {
  text-align: center;
  font-size: 0.5rem;
  color: #999999;
  margin: .5rem;
  /* height: .8rem; */
}

.article .btn {
  width: 7.5rem;
  height: 1.75rem;
  margin: 0 auto;
  background: #278133;
  border-radius: 1rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.75rem;
}

.baseform {
  width: 100%;
  padding: 1rem .75rem;
  box-sizing: border-box;
  background:  no-repeat;
  background-size: 100% 100%;
  margin-top: 1rem;
}

.baseform .title1 {
  font-size: 0.88rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}

.baseform .title2 {
  color: #ffffff;
  margin-top: .4rem;
  text-align: center;
}

.baseform .txt1 {
  margin: .85rem 0rem;
  color: #ffffff;
}

.baseform .txt1 li {
  width: 33%;
  height: 2.5rem;
  padding: .1rem 0rem;
  box-sizing: border-box;
}

.baseform .txt1 li:nth-of-type(2) {
  border-left: 0.03rem solid #eeeeee;
  border-right: 0.03rem solid #eeeeee;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

.baseform .txt1 li:nth-of-type(3) {
  padding-left: 10%;
  box-sizing: border-box;
}

.baseform .txt2 .input {
  width: 49%;
  margin-bottom: 2%;
  height: 1.5rem;
  background: #f2f2f2;
}

.baseform .txt2 .input .code {
  width: 3.25rem;
  height: 1.5rem;
  background: #ffdd1c;
  text-align: center;
  color: #000000;
  line-height: 1.5rem;
}

.baseform .submit {
  width: 7.5rem;
  height: 1.75rem;
  margin: 0 auto;
  background:  no-repeat;
  background-size: 100% 100%;
  box-shadow: 0rem 0rem 0rem 0rem rgba(0, 36, 91, 0.5);
  border-radius: 1rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: #064710;
  line-height: 1.75rem;
  margin-top: .5rem;
}

.baseform input {
  background-color: #f2f2f2;
}

.baseform select {
  padding: 6px 11px;
  padding-right: 5%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #f2f2f2  no-repeat;
  background-size: 12px 6px;
  background-position-x: 95%;
  background-position-y: center;
}

/* 弹窗,我知道遮罩层是mask，避免与公共样式冲突 */
.popup {
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, .5);
  height: 100%;
  width: 100%;
  transition: all .3s ease-in-out;
  z-index: 998;
}

.marsk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translatex(-50%) translatey(-50%);
  z-index: 999;
  width: 12.5rem;
  height: 11.5rem;
  background:  no-repeat;
  background-size: 100% 100%;
  border-radius: 2rem 1rem 2rem 1rem;
  padding: .5rem;
  box-sizing: border-box;
  position: relative;
}

.marsk .close {
  position: absolute;
  right: .5rem;
  top: .3rem;
  width: 0.6rem;
  height: 0.6rem;
  background:  no-repeat;
  background-size: 100% 100%;
}

.marsk .title1 {
  font-size: 0.88rem;
  font-family: notosanscjk;
  font-weight: bold;
  color: #7a260c;
  text-align: center;
  margin-bottom: .43rem;
}

.marsk .title2 {
  color: #89381c;
  line-height: 0.75rem;
  text-align: center;
}

.marsk .txt {
  margin-top: .57rem;
}

.marsk .txt .input {
  width: 49%;
  margin-bottom: 2%;
  height: 1.5rem;
  background: #ffffff;
}

.marsk .txt .input .code {
  width: 2.5rem;
  height: 1.5rem;
  background: #7a260c;
  text-align: center;
  color: #ffffff;
  line-height: 1.5rem;
}

.marsk .submit {
  width: 4rem;
  height: 1.5rem;
  margin: 0 auto;
  background: #e64c4a;
  border-radius: 1rem;
  text-align: center;
  font-size: 0.65rem;
  font-weight: bold;
  color: #ffffff;
  line-height: 1.5rem;
  margin-top: .3rem;
}

.marsk select {
  padding: 6px 11px;
  padding-right: 5%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: #ffffff  no-repeat;
  background-size: 12px 6px;
  background-position-x: 95%;
  background-position-y: center;
}

.wangxiaohui {
  width: 48%;
}

.wangxiaohui:nth-of-type(odd) {
  margin-right: .4rem;
}

.hongkong:nth-of-type(3),
.korea:nth-of-type(5) {
  margin-top: -18rem;
}

.xbya:nth-of-type(5) {
  margin-top: -3rem;
}

.deguo:nth-of-type(3) {
  margin-top: -12rem;
}

.beiou:nth-of-type(4) {
  margin-top: -3rem;
}

.article-country {
  background: ;
  background-size: 16rem 22.5rem;
}

/* read */
.read-title {
  width: 100%;
  height: 1.8rem;
  line-height: 1.8rem;
  font-size: .75rem;
  font-weight: bolder;
  text-align: center;
  margin-bottom: .5rem;
}

.read-title .txt {
  display: inline-block;
  padding: 0rem 1rem;
  box-sizing: border-box;
  border-radius: 1rem;
  color: #ffffff;
  background: #46ad56;
}

.reda-box {
  width: 100%;
  overflow-x: auto;
  background: #d5fcdb;
  padding: .5rem;
  box-sizing: border-box;
}

.reda-box li {
  width: 5.5rem;
  height: 6rem;
  margin-right: .5rem;
}

.reda-box li img {
  width: 100%;
  height: 100%;
}

.read {
  margin-top: 1.25rem;
}