/*----------header----------*/
img{max-width: 100%}
.loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3001; background: #efefef }
.loading .logo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.loading img { max-width: 60% }
.header { height: 50px;max-width:550px; margin:0 auto; border-radius: 50px; display: flex; align-items: center; padding: 10px; background: #fff; position: fixed; top: 10px; left: 10px; right: 10px; z-index: 1001; }
.header .logo { flex: 1; }
.header .logo img { max-height: 30px; }
 
.menu { width: 30px;flex-direction:column; height: 30px; display: flex; align-items: center; justify-content: center; margin-right:10px;}
.menu:before, .menu:after, .menu label { content: ''; display: block; width: 21px; height: 2px; background: #1977bd }
.menu label{ margin:4px 0}
.search i { display: block; width: 35px; height: 35px; border-radius: 100%; background: url(../img/icon1.jpg) no-repeat center center #0186eb; border: 1px solid #0167b2 }

.banner1 { border-bottom: 1px solid #f1eee9; padding:100px 15px 80px; background-repeat: no-repeat; background-position: center center; background-size: cover; color: #fff; }
.banner1 h3, .banner1 h4{ font-size: 18px; text-transform: uppercase; line-height: 1.5 }
.banner1 h3{ letter-spacing:3px}
.banner1 h5 { text-transform: capitalize }
.banner1 .line{width:80px; height:1px; background:#fff;opacity:0.5;margin:10px 0}
.banner1 p{ font-size:12px;line-height:1.5;max-width:70%}
.page_items .item{padding:20px 15px}
.page_tit h5{ color:#1977bd;text-transform:uppercase;margin-bottom:5px; }
.page_tit h2{ font-size:20px;}
.page_tit label { display: block; margin: 10px 0; width: 27px; height: 2px; background: #b3b3b3 }
.page_txt p{margin-top:10px;line-height:1.5;color:#999; font-size:15px;}

.more{ display:flex;align-items:center;grid-gap:10px;margin:10px 0;color:#888}
.more label { content: ''; display: flex; align-items: center; justify-content: center; width: 50px; height: 30px; border-radius: 30px; background: #d61518 }
.more label:after{ content:'→'; display:block;color:#fff;}
.years { font-size: 26px; color: #c5e5ce; font-weight: bold; font-style: italic; text-transform: uppercase; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
.years span{ font-size:2em;}
.imgs { margin: 0 -15px; }

.footer{ padding:15px;}
.f_logo{ max-width:60%}
.foot_info{margin-top:20px;}
.foot_info h3 { font-size: 16px; color: #076cba ;position:relative;}
.foot_info h3:after {content:'';margin-top:10px;margin-bottom:10px; display: block; border-bottom: 1px solid #e7e7e7 ;}
.foot_info h3:before{ position:absolute;bottom:0;content:'';display:block; left:0; width:4em;height:1px; background:#1977bd}
.foot_info li{display:flex;align-items:center;line-height:2}
.foot_info li span{ display:block;width:6em;}
.foot_info  li p{ flex:1; color:#999}
.foot_info ul{margin-bottom:20px;}
.page_txt2{ color:#888;line-height:1.5;font-size:12px;}

.menu_box{ transition:all 0.2s; position:fixed;top:0; left:100%; width:100%;padding-top:80px;background:#fff;z-index:10;bottom:0}
.menu_box.on{ left:0}
.menu_box > ul { width: 80%; margin: 0 auto; }
.menu_box > ul > li { line-height: 40px; border-bottom: 1px solid #f3f3f3 ;text-align:center;}
.menu_box > ul > li:last-child{ border-bottom:0}
.menu_box .drop li { line-height: 30px; font-size: 15px; }
.menu_box .drop {display:none; background: #f6f6f6 ;padding:5px 0}
.menu_box h3{ display:block; position:relative;font-weight:normal;}
.menu_box label {width:40px; text-align:center; position: absolute; right:0;font-size:20px;color:#999;}
.menu_box label:before { content: '+' }
.menu_box li.on label:before { content: '-' }
.menu_box .btn { width: 130px; line-height: 38px; border-radius: 30px; background: #1977bd; color: #fff; display: block; margin: 0 auto; margin-top: 20px; }
.header.on .search{display:none;} 
.header.on .menu{transform:rotate(45deg); position:relative;}
.header.on .menu label { height: 0 }
.header.on .menu:after, .header.on .menu:before { position:absolute; top:50%;  }
.header.on .menu:after{ transform:rotate(90deg)}