html {
    font-size: 20px;
    margin: 0px;
    padding: 0px;
}
:root{
    --viewwidth:12;
}
body,div,a,p,ul,li {
    margin: 0px;
    padding: 0px;
}
div {
    box-sizing: border-box;
}
.main {
    width:100%;
    min-height: 200px;
    background: url(../images/main_bg1.jpg) no-repeat;
    background-size: 100% 100%;
}
.jiaozhao_container {
    width:1200px;
    margin: auto;
}
.area_1 {
    width:1200px;
    height:522px;
    display: grid;
    grid-template-rows: 71fr 73fr 226fr 152fr;
}
.area_1_2,.area_1_3 {
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.top_title {
  box-sizing:border-box;
  width:552px;
  height:73px;
  background:url(../images/top_title.png) no-repeat;
  line-height:40px;
  text-align:center;
  color:#ffffff;
  font-size:40px;
  padding-top:12px;
  font-weight:bold
}
.area_box {
    width:1200px;
    padding:17px;
    box-sizing: border-box;
    background-color: #ffd5b5;
    border-radius: 20px;
}
.area_box_inter {
    width:1166px;
    padding:10px;
    min-height: 200px;
    border-radius: 20px;
    box-sizing: border-box;
    background: linear-gradient(to right,#fb503a, #fe875c);
}
.area_title {
    width:600px;
    height:78px;
    background: url(../images/title_bg.png) no-repeat;
    background-position: center;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size:44px;
    font-weight: bold;
}
.area_content {
    margin: auto;
    width:1136px;
    min-height: 300px;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding-left:30px;
    padding-right:30px;
    padding-top:16px;
    padding-bottom:16px;
    display:flex;
    flex-direction:column;
    align-items:center
}
.area_2_1 {
    width:1050px;
    height:178px;
    display: grid;
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.area_2_item {
   display: flex;
   align-items: center;
}
.area_2_item_1 {
    display: flex;
    align-items: center;
    background-color: #ffeabd;
    border:1px solid #ffca90;
    border-radius: 20px;
    box-sizing: border-box;
    width:344px;
    height:62px;
    padding-left:20px;
    font-size:26px;
    color:#202020;
    font-weight: bold;
 }
 .area_2_item_1_number {
    color:#fb503a;
    font-style: italic;
 }
 .area_2_2 {
    width:1050px;
    height:89px;
    display: grid;
    grid-template-columns:  1fr 1fr;
 }
 .area_2_item_2 {
    display: flex;
    align-items: center;
    background-color: #ffeabd;
    border:1px solid #ffca90;
    border-radius: 20px;
    box-sizing: border-box;
    width:510px;
    height:62px;
    padding-left:20px;
    font-size:26px;
    color:#202020;
    font-weight: bold;
 }
 .right_flex {
    justify-content: right;
 }
 .left_flex {
    justify-content: left;
 }
 .center_flex {
    justify-content: center;
 }
 .area_bottom {
    margin: auto;
    width:1200px;
    height:60px;
    background: url(../images/box_bottom.png) no-repeat;

 }
 .bottom_img {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
 }
 .area_margin {
    margin: auto;
    width:1200px;
    height:12px;
    line-height: 12px;
 }
 .area_3_1 {
    margin: auto;
    width:1076px;
    height:420px;
    display: grid;
    grid-template-columns:  1fr 1fr;
}
.area_3_1_left {
    display: flex;
    justify-content: left;
}
.area_3_1_right {
    display: flex;
    justify-content: right;
}
.yuyue {
    width:520px;
    height:420px;
    box-sizing: border-box;
    border:1px solid #ffcb91;
    border-radius: 20px;
    background-color: #ffeabd;
    padding:30px;
    display: grid;
    grid-template-rows: 252fr 108fr;
}
.saoma {
    width:520px;
    height:420px;
    box-sizing: border-box;
    border:1px solid #ffcb91;
    border-radius: 20px;
    background-color: #ffeabd;
    padding:30px;
    display:grid;
    grid-template-rows: 252fr 108fr;
}
.yuyue_2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.yuyue_2 img {
    cursor: pointer;
}
.saoma_1 {
    display: grid;
    grid-template-columns: 170fr 290fr;
}
.saoma_1_left {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.saoma_1_left_1 {
    width:100%;
    padding-top:8px;
    display: flex;
    justify-content: center;
    font-size:18px;
    color:#202020
}
.saoma_1_left_2 {
    width:100%;
    display: flex;
    justify-content: center;
    font-size:28px;
    line-height: 1.6;
    color:#202020;
    font-weight: bold;
}
.saoma_1_left_3 {
    width:100%;
    display: flex;
    justify-content: center;

}
.qr_code {
    padding:3px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qr_code img {
 width:150px;
 height:150px;
}
.saoma_1_right {
    padding-left:32px;
    color:#202020;
    font-size:20px;
    line-height: 1.6;
}
.saoma_2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.table_area {
    width:1076px;
    box-sizing: border-box;
    border-radius: 20px;
    border:1px solid #ffc78b;
    overflow: hidden;
    min-height: 200px;
}
.table {
    width:1076px;
    border-collapse:collapse;

    
}
table tr th {
    background-color: #ffeabd;
}
table tr th {
    border:0px;
    font-size: 24px;
    font-weight: bold;
}
.table td {
    background-color: #ffffff;
    border:1px solid #ffc78b;
    font-size:22px
}
.table th,td{
    height:60px;
    color:#333333;
    text-align: center;
}

.table tr:nth-child(2) td {
    border-top:0px
}
.table tr td:first-child {
    border-left:0px
}
.table tr td:last-child {
    border-right:0px;
    border-bottom: 0;
}
.table tr:last-child td {
    border-bottom:0
}
.rowtd {
    width:100%;
    height:240px;
    display: grid;
    grid-template-rows: 37fr 17fr;
}
.rowtd_1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.rowtd_2 {
  display: flex;
  justify-content: center;
}
.rowtd_2 img {
    width: 187px;
    height:47px
}
.qr_area {
    width:150px;
    height:150px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #fb503a;
    overflow: hidden;
}
.qr_area img {
  width:150px;
  height:150px;
}
.area_5_1 {
    width:1076px;
    height:380px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.area_5_1_cell {
    display: flex;
    justify-content: center;
}
.cell_left {
  justify-content: left;
}
.cell_right {
    justify-content: right;
  }
.area_5_1_item {
    width:336px;
    height:380px;
    box-sizing: border-box;
    border-radius: 20px;
    border:1px solid #ffc78b;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffeabd;
    padding-top:20px;
}
.area_5_1_item_1 {
    width:294px;
    height: 193px;
    border-radius: 20px;
    background-color: #ffffff;
    overflow:hidden
}
.area_5_1_item_1 img {
   width:294px;
   height: 193px
}
.area_5_1_item_2 {
    font-size:20px;
    color:#333333;
    padding-top:16px;
    text-align: center;
}
.area_5_1_item_3 {
    font-size:24px;
    color:#333333;
    font-weight: bold;
    text-align: center;
}
.area_5_1_item_4 {
    padding-top: 20px;
    text-align: center;
}

.area_6_1 {
    width:1076px;
    height:301px;
    display: grid;
    grid-template-columns: 368fr 460fr 248fr;
}
.area_6_1_cell {
    display: flex;
    justify-content: center;
}
.online_server {
    width:315px;
    height:262px;
}
.zixun_link {
    width:456px;
    height:184px;
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    align-self: center;
}
.link_box {
    width:198px;
    height:70px;
    border-radius: 10px;
    background-color: #fb503a;
    font-size:26px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.link_box a {
    color: #ffffff;
    text-decoration: none;
    font-size:26px;
}
.area_6_1_qr {
    width:240px;
    height:248px;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-rows: 198fr 50fr;
}
.area_6_1_qr_1 {
 
    align-self: center;
    justify-self: center;

}
.qr_img {
    width:198px;
    height:198px;
    border-radius: 10px;
    background-color: #ffc78b;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr_img img {
    width:188px;
    height:188px
}
.area_6_1_qr_2 {
    justify-self: center;
    align-self: center;
    font-size: 26px;
    font-weight: bold;
    color:#ff9267
}