.container{position: relative}
.part{position: absolute; top: -50px}

/* .main ========================== */
.main{position:relative}
.main-img{height:260px;background:url(../images/intro_s.jpg) center;background-size:cover;margin-top:60px;position:relative}
.main h1{background-color:rgba(0, 122, 138, 0.6);color:#fff;text-align:center;padding:10px;font-size:18px;position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:1200px}
.main h1 .mnone{display:none}

@media(min-width:600px){
  .main,.main-img{height:360px;margin:0}
  .main-img{background-image:url(../images/intro_m.jpg)}
  .main h1{font-size:20px;padding:20px;line-height:1.5}
}
@media(min-width:1024px){
  .main,.main-img{height:550px}
  .main-img{background-image:url(../images/intro.jpg)}
  .main h1{font-size:24px;letter-spacing:2px;padding:20px;border-radius:10px 10px 0 0}
  .main h1 .mnone{display:block;font-size:17px;font-weight:normal;margin-top:20px}
}

/* .intro-area ========================== */
.intro-area{}
.intro-area .container{background-color:#7fbec5;padding:50px 15px;font-size:17px}
.intro-area .mshow{color:#fff;}
.intro-area h2{color:#fff;font-size:28px;margin-top:30px;margin-bottom:20px;text-align:center}
.intro-area p{color:#000; line-height:1.5}

.intro-area .left, .intro-area .right{width:100%; margin:20px auto;position:relative}
.intro-area .left img, .intro-area .right img{max-width:100%;height:auto;display:block;margin:0 auto}
.intro-area .left p, .intro-area .right p{position:absolute;color:#000;top:70px;left: 50%}
.intro-area .left p{width:70px;transform: translateX(-160%)}
.intro-area .right p{width:130px;transform: translateX(-130%)}

@media(min-width:1024px){
  .intro-area .mshow{display:none}  
  .intro-area h2{font-size:35px;margin-bottom:30px}
  .intro-area p{color:#000;margin:20px auto;max-width:700px}
  .intro-area .row{display:flex;max-width:800px;margin:0 auto}
  .intro-area .left{width:50%}
  .intro-area .right{width:50%}
  .intro-area .left p, .intro-area .right p{top: 50px}
}

/* .intro-area2 ========================== */
.intro-area2{background-color:#e5e5e5}
.intro-area2 .container{padding:50px 15px;font-size:17px}
.intro-area2 h2{color:#1b7483;font-size:28px;margin-top:30px;margin-bottom:30px}
.intro-area2 p{line-height:1.5}

.item-group{display:flex;flex-wrap:wrap;padding:30px 0}
.item-group .item{width:45%;margin:2.5%;text-align:center}
.item-group .item img{width:100px;height:auto}
.item-group .item h3{color:#1b7483;font-size:18px;padding:10px 0;margin-bottom:10px;border-bottom:1px solid #1b7483}
.item-group .item p{text-align:justify}

@media(min-width:800px){
  .intro-area2 h2{font-size:28px;text-align:center}
  .intro-area2 .container>p{text-align:center}
  .item-group .item{width:20%}
  .item-group .item h3{font-size:24px}
  .item-group .item p{font-size:17px}
}
@media(min-width:1024px){
  .intro-area2 h2{font-size:35px}
}
/* .intro-area3 ========================== */
.intro-area3{background-color:#e5e5e5}
.intro-area3 .container{padding:50px 15px;font-size:17px}
.intro-area3 h2{color:#1b7483;font-size:28px;margin-top:30px;margin-bottom:30px;text-align:center}
.intro-area3 .container>p{line-height:1.5;margin-bottom: 30px;text-align: center}
.intro-area3 .row {padding-bottom:40px}

.intro-area3 .left{width: 318px;height: 314px;margin: 0 auto}
.intro-area3 .left>div{width: 318px;height: 314px;position:relative}
.intro-area3 .left svg{position: absolute;left: 0;top: 0;width: 100%;height: 100%}
.intro-area3 .left .cls{cursor:pointer}
.intro-area3 .left .linearea { display: none }

.intro-area3 .right h3{color:#1b7483;font-size:18px}
.intro-area3 .right p{margin:0 20px;text-align:justify;margin-bottom:20px;}
.intro-area3 .right .con.scaleB{background-color:#e5e5e5;border-radius:6px;padding:10px 10px 20px 10px;z-index:9}
.intro-area3 .right .con.scaleB h3{font-size:27px}
.intro-area3 .right .con.scaleB p{font-size:24px}

@media(min-width:800px){
  .intro-area3 { min-height:700px }
  .intro-area3 .container { padding: 50px 15px 20px; }
  .intro-area3 h2{font-size:28px}
  .intro-area3 .container>p{margin-bottom:50px}
  .intro-area3 .row{overflow:hidden;pa}
  .intro-area3 .left{float:left;width:35%;}
  .intro-area3 .left div {width: 100%; height: auto}
  .intro-area3 .left .linearea,
  .intro-area3 .left .linearea img { display: block; position: absolute; left: 0; top: 0;}
  .intro-area3 .left .linearea img{display: none}
  /* .intro-area3 .left img, .intro-area3 .left svg{width:100%;height: auto }*/
  
  .intro-area3 .right{float:left;width:60%;padding-left: 20px}
  .intro-area3 .right .con.scaleB{margin-left:-20px}
}
@media(min-width:1024px){
  .intro-area3 h2{font-size:35px}
}
/*.intro-area3 .con.scaleb {transform-origin: left center; transform: scale(1.2)}*/
.intro-area3 .con.scaleb h3 {font-size: 22px}
.intro-area3 .con.scaleb p {font-size: 20px}

/* .intro-area4 ========================== */
.intro-area4{background-color:#fff}
.intro-area4 .container{padding:50px 15px;font-size:17px;text-align:center;}
.intro-area4 h2{color:#1b7483;font-size:28px;margin-top:30px;margin-bottom:30px}
.intro-area4 .container>p{line-height:1.5;margin-bottom: 40px;font-size: 17px}
.intro-area4 img{max-width:100%;height:auto}

@media(min-width:1024px){
  .intro-area4 h2{font-size:35px}
}

/* .intro-area5 ========================== */
.intro-area5{background-color:#fff}
.intro-area5 .container{padding:50px 15px;font-size:17px}
.intro-area5 h2{color:#1b7483;font-size:28px;margin-top:30px;margin-bottom:30px}
.intro-area5 p{line-height:1.5}

.intro-area5 .item-group{display:flex;flex-wrap:wrap;padding:30px 0}
.intro-area5 .item-group .item{width:45%;margin:2.5%;text-align:center}
.intro-area5 .item-group .item img{width:100px;height:auto}
.intro-area5 .item-group .item h3{color:#57ad73;font-size:18px;padding:10px 0;margin-bottom:10px;border-bottom:1px solid #57ad73;}
.intro-area5 .item-group .item p{text-align:justify}

@media(min-width:800px){
  .intro-area5 h2{font-size:28px;text-align:center}
  .intro-area5 .container>p{text-align:center}
  .intro-area5 .item-group .item{width:20%}
  .intro-area5 .item-group .item h3{font-size:24px}
  .intro-area5 .item-group .item p{font-size:17px}
}
@media(min-width:1024px){
  .intro-area5 h2{font-size:35px;}
}