a.logo{ top: 20px; left: 20px}
a.logo img{ height: 60px; width: auto;}
a#navSwitch{ top: 20px; right: 20px;}
.first-box *{ max-width:60%; text-align: center;}
.first-box p.ch{ font-size: 16px}
nav{ width: auto; padding: 0 50px}

.about{padding:30px; box-sizing: border-box;}
.about-box{ flex-flow: column nowrap; margin-bottom: 30px; height:700px}
.about-box-item{ width: 100%; height:50%; position: static}
.about-fixed-img{ width: 40%; }
.about-fixed-img.arrow{ display: none}
.about-box-list{ width: 100%; height: 100%; flex-flow: column nowrap; justify-content: space-between; align-items: center; box-sizing: border-box; padding:20px}
.about-box-list a{width: 100%; align-items: center; justify-content: center}
.about-box-list a img{ width: 116px;}
.about-box-list a div{ background-size:10px 10px !important; overflow: hidden; justify-content: center;}
.about-box-list a div h3{ font-size:12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%}
.about-box-list a:nth-child(-n+4) {flex-direction: row !important}
.about-box-list a:nth-child(-n+4) div{ padding-left:24px; padding-right: 0 !important;background: url("../images/about-list-icon-white.png") no-repeat left 7px center; align-items: flex-start}
.about-box-list a:nth-child(-n+4) div h3{ color: #fff}
.about-box-list a:nth-child(-n+4) div span{ color: #a8a9a8}

.about-box-list a:nth-child(n+5) {flex-direction: row-reverse!important}
.about-box-list a:nth-child(n+5) div{ padding-right:24px; padding-left: 0 !important;background: url("../images/about-list-icon-green.png") no-repeat right 7px center; align-items: flex-end}
.about-box-list a:nth-child(n+5) div h3{ color: #00552c}
.about-box-list a:nth-child(n+4) div h3{ color: #00552c}
.about-box-list a:nth-child(n+5) div span{ color: #a8a9a8}

.about-box-list a:nth-child(4){ margin-top:140px}

.about-bar{ flex-flow: row wrap; justify-content: space-between; width:100%}
.about-bar a{ width: 71px; height: 71px; line-height:71px; font-size: 14px; margin:0}
@media (min-width: 375px){
    .about-bar a{ width: 100px; height: 100px; line-height:100px; font-size: 14px; margin:0}
}
.pro{ padding:20px; box-sizing: border-box;}
.title{ padding-top: 40px}
.title > *{ max-width:100%;}
.title b{ font-size:70px;}
.title span{ font-size:30px}
.title p{font-size:12px; text-align: center}
.pro-bar a { padding: 5px 15px; font-size: 14px}
.pro-box a{ width: calc(50% - 10px)}

.base{ padding: 30px; box-sizing: border-box;}

.base-box{ width: 100% !important; height: auto; position: static}

.base-box.top{ flex-flow: column nowrap; align-items: flex-end}
.base-top-title{  align-items: flex-end; padding: 30px 0; margin-right: 20px}
.base-top-title b{ font-size: 30px}
.base-top-title p{ text-align: right;}
.base-img{ position: static}
.base-img a{font-size: 0}
.base-img img{ width:100%}


.base-box.bot{ display: flex; flex-flow: column nowrap; align-items:flex-start}
.base-box.bot a{ margin: 0; font-size: 0}
.base-box.bot a img{width: 100%}
.base-bot-title{ padding: 30px 0; margin: 0; margin-left: 20px}
.base-bot-title b{margin: 0}

.news{padding: 20px; box-sizing: border-box;}
#news .swiper-slide a{flex-flow: column nowrap; padding: 20px}
#news .swiper-slide a img{width: 100%;height: auto; margin: 0}
#news .swiper-slide a div.text{align-items: flex-end}
#news .swiper-slide a div.text strong{margin: 15px 0;align-self: flex-end}
.contact-box{flex-flow: column nowrap}
.contact-box div{width: 100%; border:none; border-bottom:1px solid rgba(255,255,255,.5); padding: 10px 0 }
.contact-box div:first-child{border-left: none}
.contact-box div b{font-size: 20px}
.contact-box div p{margin:0}
.contact-box div:last-child{border-bottom:none}

footer {width: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center;overflow-x: hidden}
footer > *:not(a){ position: static !important}
.bot-code{display: none}
a#audioPlay{bottom:66px; right: 20px; width: 30px; height: 30px; background-size:50% auto}
a.getTel{margin-top:0; width: 100%; font-size: 16px}
.audio-tel{width: 100%; box-sizing: border-box;}
.getTel{box-sizing: border-box;}
.code-copyright{align-self: flex-start; padding: 10px; box-sizing: border-box;}

.page *{ display:none}
.page .next,
.page .prev{ display:block; height:50px; font-size:16px; line-height:50px; width:50%;}

.loca-bar{ padding: 20px 0 20px 60px; background-position:left 20px center}

.list-box{padding: 20px; box-sizing: border-box;}
.list-footer{margin-top: 30px}

.list-news-box a{flex-flow: column nowrap; padding: 20px}
.list-news-box a img{width: 100%;height: auto; margin: 0 !important; order: 1 !important}
.list-news-box a div.text{align-items: flex-end}
.list-news-box a div.text strong{margin: 15px 0;align-self: flex-end}


.cont-title{height:120px; flex-wrap:nowrap}
.cont-title h3{ font-size:16px;}
.cont-page{ margin-top: 20px;padding:20px 0; flex-flow:column nowrap;align-items:flex-start}
.cont-page > a{margin-top:20px;}

.bot{ flex-flow: column nowrap; padding: 20px; box-sizing: border-box;}
.bot-logo{margin-bottom: 20px}

.list-copyright div{ flex-flow: column nowrap; padding:10px; box-sizing: border-box;}

.list-news-box a div.text h3 {
    font-size: 16px;
    color: #00552c;
    font-weight: bold;
}
.list-news-box a div.text span {
    color: #676767;
    font-size: 12px;
    font-weight: bold;
}

.list-news-box a div.text strong {
    display:none;
}
.list-news-box a:nth-child(even) div.text * {
    text-align: left;
}