html,body{
  height: auto;
}
.container {
  position: relative;
}

.top {
  width: 100%;
  height: 11.89rem;
  background: url(../images/bg_top.jpg) no-repeat top center;
  background-size: cover;
  font-size: 0;
}

.logo_png {
  margin: .30rem 0 .4rem .30rem;
  width: 1.54rem;
  height: .47rem;
}

.tit_png {
  display: block;
  width: 6.51rem;
  height: 1.12rem;
  margin: 0 auto;
}

.sm_tit_png {
  display: block;
  margin: .5rem auto 1.45rem;
  width: 5.15rem;
  height: .88rem;
}

.skill {
  margin: 0 auto;
  width: 66%;
  color: #ffffff;
}

.you_can {
  font-size: .36rem;
  margin: 0 0 .15rem 0;
}

.skill li {
  font-size: .3rem;
  line-height: .54rem;

}

.skill li img {
  margin: 0 .18rem 0 0;
  width: .28rem;
  height: .28rem;
  vertical-align: middle;
}

.skill li span {
  vertical-align: middle;
}

.top .tit_shrq {
  display: block;
  width: 3.87rem;
  height: .55rem;
  margin: 2.1rem auto .3rem;
}


.top p {
  font-size: .28rem;
  text-align: center;
  color: #000000;
}

.top p span {
  color: #258e8b;
  font-weight: bold;
}


.main {
  font-size: 0;
  background: #e5fdfa url(../images/bg_main.jpg) no-repeat center bottom;
  background-size: contain;
  padding: .3rem .3rem 1.6rem .3rem;
}

.main .tit_kcld {
  display: block;
  width: 3.87rem;
  height: .55rem;
  margin: 0 auto .25rem;
}

.main .classs div {
  padding: 0 0 0 1rem;
  height: .8rem;
  margin: 0 0 .23rem 0;
}

.main .classs div.class_icon_01 {
  background: url(../images/class_icon_01.png) no-repeat top left;
  background-size: .8rem .8rem;
}

.main .classs div.class_icon_02 {
  background: url(../images/class_icon_02.png) no-repeat top left;
  background-size: .8rem .8rem;
}

.main .classs div.class_icon_03 {
  background: url(../images/class_icon_03.png) no-repeat top left;
  background-size: .8rem .8rem;
}

.main .classs div h4 {
  font-size: .28rem;
  color: #333333;
  margin: 0 0 .1rem 0;
}

.main .classs div p {
  font-size: .24rem;
  color: #333333;
}

.main .tit_kcap {
  display: block;
  width: 3.87rem;
  height: .55rem;
  margin: .45rem auto .35rem;
}

.main table {
  font-size: .28rem;
}

.main table tr:nth-child(odd) {
  background: #258e8b;
  color: #ffffff;
}

.main table tr:nth-child(even) {
  background: #ffffff;
  color: #258e8b;
}

.main table tr td {
  padding: .3rem .12rem .35rem .1rem;
  line-height: .5rem;
}

.main table tr td.bor_color_white {
  border-right: #ffffff 1px solid;
  border-left: #ffffff 1px solid;
}

.main table tr td.bor_color_green {
  border-right: #258e8b 1px solid;
  border-left: #258e8b 1px solid;
}

.main table tr td strong {
  display: block;
  text-align: center;
}

.bd {
  font-size: 0px;
  background: #28908c;
  /* height: 9.2rem; */
  padding: 0 0 0.3rem;
}

.bd .title {
  font-size: .36rem;
  text-align: center;
  color: #ffffff;
  padding: .4rem 0.35rem;
}

.bd .title span {
  font-weight: bold;
}

.bd .fr_box {
  width: 6.48rem;
  height: 6.67rem;
  background: #ffffff;
  border-radius: .14rem;
  margin: 0 auto;
  padding: .42rem .3rem;
}

.bd .fr_box ul {
  height: 100%;
  font-size: 0;
}

.bd .fr_box ul li {
  width: 100%;
  height: .7rem;
  margin: 0 0 .3rem 0;
}

.bd .fr_box ul li span {
  font-size: .32rem;
  letter-spacing: .1rem;
  color: #f39800;
  font-weight: bold;
}

.bd .fr_box ul li input,
select {
  width: 3.8rem;
    height: .68rem;
    border: 1px solid #258e8b;
    font-size: .28rem;
    border-radius: 5px;
    padding: 0 .3rem;

}

.bd .fr_box ul li select {
  width:4.45rem;
  background: url(../images/down_icon.png) no-repeat right center;
  background-size: .19rem .12rem;
  background-position: 4rem;
}

.bd .fr_box ul p .terms {
  width: .32rem;
  height: .32rem;
  margin: 0 .1rem 0 0;
}

.bd .fr_box ul p {
  font-size: .22rem;
  color: #258e8b;
}

.bd .fr_box ul p a {
  color: #f39800;
}

.bd .fr_box ul button {
  width: 100%;
  height: .64rem;
  line-height: .64rem;
  background: #258e8b;
  color: #ffffff;
  font-size: .3rem;
  border-radius: .5rem;
  margin: .32rem auto .12rem;
}

.bd .fr_box ul .msg {
  font-size: .22rem;
  color: #999999;
  text-align: center;
}

.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

.alert_box {
  font-size: 0;
  width: 6.3rem;
  height: 4.53rem;
  background: url(../images/alert_box.png) no-repeat center center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  padding: 2.5rem .3rem .55rem .3rem;
}

.alert_box p {
  text-align: center;
  font-size: .3rem;
  color: #333333;
  line-height: .45rem;
  margin: 0 0 .55rem 0;
}

.alert_box input {
  width: 3.18rem;
  height: .86rem;
  border: 1px solid #258e8b;
  text-align: center;
  border-radius: .1rem;
  font-size: .28rem;
  vertical-align: middle;
  margin: 0 .2rem 0 0;
  padding: 0 .2rem 0 .2rem;
}

.alert_box .copy_btn {
  width: 2.4rem;
  height: .88rem;
  font-size: .28rem;
  border-radius: .1rem;
  color: #ffffff;
  background: #ff9c04;
  line-height: .88rem;
  vertical-align: middle;
}

.alert_box .jump_url {
  display: block;
  width: 100%;
  height: .62rem;
  line-height: .62rem;
  text-align: center;
  background: #258e8b;
  font-size: .3rem;
  color: #ffffff;
  border-radius: .5rem;
  margin: .7rem 0 .2rem 0;
}

.alert_box .guide_url {
  display: block;
  text-align: center;
  font-size: .28rem;
  color: #258e8b;
  text-decoration: underline;
}

.alert_box span {
  position: absolute;
  bottom: -8.6rem;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: .5rem;
  height: .5rem;
  background: url(../images/close_btn.png) no-repeat;
  background-size: .5rem .5rem;
  z-index: 9999;
  margin: auto;

}