@charset "utf-8";
/* CSS Document */
body{ background-color:#FFF; }
.container{width: 100%; height:100%; position: fixed; left:0; top:0; z-index: 100;}
.header{ width:100%; box-sizing: border-box; padding:30px 5.51625%; position: absolute; left:0; top:0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; z-index: 200;}
.header > .logo{ display: block; width: 240px; }
.header > .logo > img{ width: 100%; }
.btnMenu,.search{ width:36px; position: absolute; right:5.51625%; top:42px; z-index: 1000;}
.btnMenu{ width: 120px; position: absolute; right:9%; /*top:50%; margin-top: -0.875%;*/ background-color: rgba(255,255,255,0.01); z-index: 800;}
.btnMenu > img,.search > img{ width:100%; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.search > img:nth-of-type(1){ display: block; }
.search > img:nth-of-type(2){ display: none; }
.sechActive > img:nth-of-type(2){ display: block; }
.sechActive > img:nth-of-type(1){ display: none; }

.swiper1{ width: 100%; height: 100%; }
.swiper1 .swiper-pagination {right:0; display:inline-block;  padding-top:2%; padding-bottom:6%; bottom:0; left:auto; text-align:center; padding-right:0; box-sizing:border-box; width:100%; box-sizing: border-box; padding-right: 10%; padding-left:10%;}
.swiper1 .swiper-pagination-bullet{opacity:1; margin:0 0px!important; width:25%; height:auto; line-height:3; border-top: 4px solid rgba(255,255,255,0.6);  border-radius:0; box-sizing:border-box; background-color: transparent; font-size: 18px; color: rgba(255,255,255,0.8);  text-align: left;}
.swiper1 .swiper-pagination-bullet-active{border-top:4px solid rgba(255,255,255,1); background-color: transparent; color: #FFF;}
.swiper1 .swiper-slide{ position:relative;width: 100%; height: 100%; overflow: hidden; }
.swiper1 .swiper-slide > a{ display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; /*display: none;*/background-repeat: no-repeat;background-position: center bottom; /*background-size: 100% 100%;*/ background-size: 1920px 1080px;}
.swiperLogo,.swiperHeader{ width: 100%; height: 100%; box-sizing: border-box; position: absolute; left:0; top:0; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; }
.swiperLogo > p{ width: 31.25%; overflow: hidden; }
.swiperLogo > p > img,.swiperHeader > p > img{ width: 100%; }
.swiperHeader > p:nth-of-type(1){ width:39.0625%; }
.swiperHeader > p:nth-of-type(2){ width:62.5%; margin-top: 2%;}
.swiper1 .swiper-slide .swiperTitle{ width: 1200px; height: 100%; box-sizing: border-box; position: absolute; left:50%; top:0;margin-left:-600px; display: none;flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; }
.swiper1 .swiper-slide .swiperTitle > h3,.swiper1 .swiper-slide .swiperTitle > p{ width: 100%; text-align: center; font-size: 60px;font-weight: 550; color: #FFF;}
.swiper1 .swiper-slide .swiperTitle > p{ font-size: 36px; font-weight: normal; text-transform: uppercase; margin-top: 2%;}

.swiper1 .swiper-slide-active .swiperTitle > h3{  animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;  opacity: 1;}
.swiper1 .swiper-slide-active .swiperTitle > p{  animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out; opacity: 1;}

.swiper1 .swiper-button-next,.swiper1 .swiper-button-prev{ color:rgba(255,255,255,0.2); background-color:rgba(0,0,0,0.1); border-radius:0%; height:40px; width:30px; line-height:40px; text-align:center; background-image:url(none); cursor:pointer; margin-top:-20px; box-sizing:border-box; display: none; }
.swiper1 .swiper-button-next:hover,.swiper1 .swiper-button-prev:hover{ color:rgba(237,31,36,1) !important; } 
.swiper1 .swiper-button-next i,.swiper1 .swiper-button-prev i{ font-size:1.0rem; }


.footer{width: 100%;box-sizing: border-box;padding: 20px 10px;background-color: rgba(0,0,0,0.5);position: absolute;bottom: 0;z-index: 999;}
.footer section,.footer aside{ width: 100%; font-size: 14px; line-height: 24px; text-align: center; color: #fff;}
.footer a{color: #fff;}
.footer section{ color: #fff; }

.footer > .QRcode{width: 80px;color: #FFF;position: absolute;right: 0%;bottom: 3%;}
.footer > .QRcode > p{/* width: 150px; *//* margin:0 auto; *//* overflow: hidden; */}
.footer > .QRcode > p > img{width: 80px;}
.footer > .QRcode > h3{ font-weight: 550; line-height: 3; text-transform: uppercase; font-size: 14px;text-align: center; text-decoration: underline; }

.float{position: fixed;width: 67%;/* min-width: 240px; */left: 20%;top: 1%;z-index: 1600;/* height: 100%; *//* background-color: #1b3271; */box-sizing: border-box;padding:2%;flex-direction: column;flex-wrap: nowrap;justify-content: space-between;align-items: flex-start;animation: fadeInRight 0.5s ease-in-out;-webkit-animation: fadeInRight 0.5s ease-in-out;}
.float .close{ display: inline-block; background-color: rgba(255,255,255,0.01); color: rgba(255,255,255,0.8) !important; width: 100%; text-align: left; z-index: 1000; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.float .close img{ width: 32px; height: 32px; transition: all 0.5s  linear; -webkit-transition: all 0.5s  linear; }
.float .close img:hover{ transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); }
.menu,.menu > ul{ width: 100%;  }
.menu > ul{/* margin-top: 8%; */}
.menu > ul > li{width: 10%;float: left;}

.menu > ul > li > a{display: flex;padding-top: 6%;padding-bottom: 6%;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;color: rgba(255,255,255,1);transition: all 0.5s linear;-webkit-transition: all 0.5s linear;}
.menu > ul > li > a > p{ margin-right: 6%;width:0; overflow: hidden; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; display: none;animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.menu > ul > li > a > h3{ font-weight: normal; font-size: 18px; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
.close:hover,.menu > ul > li > a:hover{ color: rgba(255,255,255,1) !important; }
.menu > ul > li > a:hover > p{ width:auto; display: block;}
.menu > ul > li > a:hover > h3{ animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;}

.menu > ul > li > div{ width: 100%; display: none; margin-top: 6%; margin-bottom: 6%; }
.menu > ul > li > div > a{ display: flex; width: 100%; height: auto; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center;  color: rgba(255,255,255,0.4); }
.menu > ul > li > div > a > p{ margin-right: 6%;width:0; overflow: hidden; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; display: none;/*animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;*/}
.menu > ul > li  > div > a > h3{font-weight: normal;font-size: 16px;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;line-height: 2.25;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.menu > ul > li:hover > a{ color: rgba(255,255,255,1) !important; /**/ }
.menu > ul > li:hover > div > a{ color: rgba(255,255,255,1) !important; background-color: rgba(255,255,255,0.2); }
.menu > ul > li > div > a:hover > p{ width:auto; display: block;}
.menu > ul > li:hover > div > a > h3{/*animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;*/}
.menu > ul > li:hover >div{display: block;}



.online{ width: 100%; }
.online > .QRcode{ width: 100%; color: #FFF }
.online > .QRcode > p{ width: 30%;margin:0 auto; overflow: hidden; }
.online > .QRcode > p > img{ width: 100%; }
.online > .QRcode > h3{ font-weight: 550; line-height: 3; text-transform: uppercase; font-size: 14px;text-align: center; text-decoration: underline; }
.online > .olCopyright{ width: 100%; line-height: 1.6; font-size: 14px; color: rgba(255,255,255,0.4); text-align: center; margin-top: 3%;}
.box{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); position: absolute; left:0; top:0; z-index: 840; display: none; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;}
.box .header{ position: fixed; background-color: transparent;justify-content: flex-end; }
.box .menu{ position: absolute; margin-top: -1.4%; top:50%; right: 6%; }
.searchForm{ width: 60%; padding:10px 0 10px 10px; box-sizing: border-box; border-bottom:1px solid #FFF; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: stretch; animation: fadeIn 0.5s ease-in-out; -webkit-animation: fadeIn 0.5s ease-in-out; }
.searchForm > form > p:nth-of-type(1){ width: 100%; height: 30px; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out;}
.searchForm > form > p:nth-of-type(1) > input{ width: 100%; height: 30px; border:0; color: #FFF; background-color: transparent; font-size: 14px; }
.searchForm > form > p:nth-of-type(2){ width:80px; height: 30px; flex-shrink: 0; animation: fadeInRight 0.5s ease-in-out; -webkit-animation: fadeInRight 0.5s ease-in-out;}
.searchForm > form > p:nth-of-type(2) > input{ width: 100%; height: 30px; border:0; background-color: transparent; color: #FFF; font-size: 14px; }

@media (max-width:1920px){
	
	.swiper1 .swiper-slide .swiperTitle > h3{  font-size: 60px; }
	.swiper1 .swiper-slide .swiperTitle > p{ font-size: 36px; }
}
@media (max-width:1600px){
	
	.swiper1 .swiper-slide .swiperTitle > h3{  font-size: 48px; }
	.swiper1 .swiper-slide .swiperTitle > p{ font-size: 30px; }
	.float .close img{ width: 28px; height: 28px; }

}
@media (max-width:1440px){
	.header{ padding:20px 5%;}
	.header > .logo{ display: block; width: 210px; }
	.btnMenu,.search{ width:24px; top:39px;}
	.btnMenu{ width: 80px;  right:10%; }
	.swiper1 .swiper-slide .swiperTitle > h3{  font-size: 36px; }
	.swiper1 .swiper-slide .swiperTitle > p{ font-size: 24px; }
	.float .close img{ width: 24px; height: 24px; }
	.menu > ul > li > a > h3{ font-size: 16px; }

	.swiperHeader > p:nth-of-type(1){ width:48%; }
	.swiperHeader > p:nth-of-type(2){ width:76.8%; }
}

@media (max-width:1200px){
	.c-con{ width:100%; box-sizing:border-box; padding-left:10px; padding-right:10px;}	
	/*	
	.btnMenu,.search{ width:24px; top:49px;}*/
	.swiperLogo > p{ width: 50%;}
	.swiperHeader > p:nth-of-type(1){ width:60%; }
	.swiperHeader > p:nth-of-type(2){ width:96%; }
	.swiper1 .swiper-slide .swiperTitle{ width:100%; left:0; margin-left:0; box-sizing: border-box; padding:5%; }
	.swiper1 .swiper-slide .swiperTitle > h3{  font-size: 30px; }
	.swiper1 .swiper-slide .swiperTitle > p{ font-size: 20px; }
	

	.menu > ul > li  > div > a > h3{ font-size: 14px; }
}
@media (max-width:992px){
	.header{ padding:15px 5%;}
	.header > .logo{ display: block; width: 192px; }
	.btnMenu,.search{ width:21px; top:30px;}
	.btnMenu{ width: 70px;  right:10%; }
	.footer > .c-con,.loadMenu{ font-size: 12px; }
	.swiper1 .swiper-slide .swiperTitle > h3{  font-size: 24px; }
	.swiper1 .swiper-slide .swiperTitle > p{ font-size: 16px; }
	.float .close img{ width: 20px; height: 20px; }
	
}
@media (max-width:768px){
	.container{ display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: space-between; align-items: center; }
	.header{ padding:15px 10px; flex-shrink: 0; position: initial; background-color: #1b3271; justify-content: center;}
	.header > .logo{ display: block; width: 120px; order:2; margin-left:0px;}
	.btnMenu,.search{ width:18px; top:2.5%; right: 4%;}
	.btnMenu{ width: 60px;  left: 4%; right:auto; }
	.menu > ul > li  > div > a > h3{ font-size: 14px; }
	.search{ order: 3; }
	.swiper1 .swiper-pagination,.swiperHeader{ display: none; }
	.swiper1 .swiper-slide > a{  background-size: 750px 1315px; background-position: center center;}
	.swiperLogo{ padding-bottom: 30%; }
	.swiperLogo > p{ width: 60%;}
	.swiper1 .swiper-slide .swiperTitle{ display: flex; justify-content: flex-start; padding:20% 5%; }
	.swiper1 .swiper-slide .swiperTitle > h3{  font-size: 20px; font-weight: normal;  text-align: left;}
	.swiper1 .swiper-slide .swiperTitle > p{ font-size: 30px; font-weight: 550; text-align: left;}
	.float{ min-width: 160px; animation: fadeInLeft 0.5s ease-in-out; -webkit-animation: fadeInLeft 0.5s ease-in-out; left:0; right:auto; padding:20px;}
	.float .close{ display: inline-block; background-color: rgba(255,255,255,0.01); color: rgba(255,255,255,0.8) !important; width: 100%; text-align: left; z-index: 1000; }
	.float .close img{ width: 16px; height: 16px; }
	.online > .QRcode > h3,.online > .QRcode > .olCoyright{ font-size: 12px; }
	.menu > ul > li > a > h3{ font-size: 14px; }
	.searchForm{ width: 90%; }
}
@media (max-width:640px){
	

}
@media (max-width:480px){
	/*.header{  padding:15px 10px;}
	.header > .logo{ display: block; width: 108px;}
	.search{ width:18px;}
	.btnMenu{ width: 50px; position: initial; margin-top: 0; order:1; }*/


	.swiper1 .swiper-slide .swiperTitle > h3{  font-size: 16px;}
	.swiper1 .swiper-slide .swiperTitle > p{ font-size: 24px; }
	.menu > ul > li > a{ font-size: 14px; }
	.menu > ul > li  > div > a > h3{ font-size: 12px; }


	.footer section,.footer aside{ font-size: 12px; }


}
@media (max-width:375px){

}
@media (max-width:320px){

}