@charset "gb2312";
/* CSS Document */
html, body { margin:0px; padding:0; font:18px/1.6 "Microsoft YaHei" , tahoma, arial, \5FAE\8F6F\96C5\9ED1, "Hiragino Sans GB", sans-serif; -webkit-font-smoothing:antialiased;  background:#fff; color: #474747; }
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,img,button {border:0;  padding:0; margin:0; font-weight:normal; } 
table,td,tr,th{font-size:12px;}
li{list-style-type:none;list-style:none;}
img{vertical-align:top;border:0;}
h1,h2,h3,h4,h5,h6,p,i,em,b,span { margin:0; padding:0; font-weight:normal; font-style:normal;}
ol,ul {list-style:none;}
address,cite,code,th {font-weight:normal;font-style:normal;}
img:hover { opacity:1; filter: alpha(opacity=100); }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
.ks-clear:after, .clear:after { content: '\20'; display: block;  height: 0; clear: both; }
.ks-clear, .clear { *zoom: 1;}
input,select { border:1px solid #d6d7d9; background:#fff; border-radius:5px;  }
.fl { float:left; }
.fr { float:right; }
.cl { clear:both;}
a { color:#404040; text-decoration:none; cursor:pointer; }
a:hover { color:#168bce; text-decoration:none;  }

.wrap { width: 80%; max-width: 1200px; min-width: 920px; margin: 0 auto;}
.ovh { overflow: hidden;}
.move { -webkit-transition:all .3s linear;  -moz-transition:all .3s linear;  -o-transition:all .3s linear; transition:all .3s linear; }
.move:hover { -webkit-transform:translateY(-5px); -moz-transform:translateY(-5px); -ms-transform:translateY(-5px); -o-transform:translateY(-5px); transform:translateY(-5px); cursor: pointer;}
#main { padding-top: 70vh;}

/*header*/
.header { position: absolute; top: 0; left: 0; width: 100%; z-index: 9;} 
.header h1 { text-indent: -999px; width: 246px; height: 64px; background: url(/images/v2023/logo.svg) no-repeat; margin: 2vh 0;}
nav { width: 40%; float: right;}
nav li { width: 20%; text-align: center;color: #fff; float: left;}
nav a { color: #fff; padding: 3.4vh 0; display: block;}
nav a:hover { background: linear-gradient(to bottom, rgba(0, 73, 138, 0.3), rgba(0, 0, 0, 0)); color: #ffecb2;}
.nav-toggle { display: none;}

/*footer*/
#footer { padding:5vh 0 1vh; background:#f3f3f3;}
.add { width: 70%;}
.footer_logo { width: 30%;}
.add .b02 span,.add .b01 { border-left:#cdcdcd solid 4px; padding:0 15px 0 10px; margin-bottom: 3vh;}
.add span { font-size: 16px; font-weight:600; width: 25%; float: left;}
.add p { font-size: 16px; font-weight:400;}
.footer_logo i { background: url("/images/v2023/qrcode.jpg") no-repeat right center; background-size: contain; display: block; width: 30%; height: 12vh;}
.footer_logo h3 { background: url("/images/v2023/logo_dark.svg") no-repeat left top; background-size: contain; width:65%; }
.footer_logo h3 p { margin-top: 9vh; font-size: 14px; text-align: right;}
.copyright { margin-top: 5vh; border-top:#e1e1e1 solid 1px; padding: 2vh 0; color: #858585; font-size: 16px;}


/*home_start*/
/*slide*/
#home .swiper { width: 100%; position: relative; top: 0; left: 0;}
#home .swiper-slide { font-size: 18px; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 60px;}
#home .swiper-slide .title { font-size: 60px; font-weight: 300; letter-spacing: 0.1em; word-spacing: 0.5em; text-shadow: 2px 2px 2px #1e4d7f; text-align: center;z-index: 2; position: relative; top:50%; margin-top: calc(0px - (var(--swiper-navigation-size)/ 2) - 10vh);}
#home .swiper-slide .slidebg { background-repeat:  no-repeat; background-position: center center; background-size:cover; height: 100%; width: 100%; position: absolute; top: 0; left: 0; display: block; z-index: 0;}
#home .swiper-slide .text {font-size: 16px;max-width: 400px;line-height: 1.3; position: absolute; bottom: 5vh; right: 5vw;}
#home .swiper-button-next:after, .swiper-button-prev:after { color: #fff;}
/*home_end*/

/*aboutus_start*/
body#aboutus { background: url("/images/v2023/aboutus_top.jpg") top center no-repeat; background-size: contain;}
#brief { background: #074f97; color: #fff; width: 45%; padding: 11vh 4% 4vh; box-shadow: 8px 8px 0 0 rgba(7,79,151,.3); position: relative; z-index: 2;}
#brief h3 { font-size:36px; font-weight: 300; position: absolute; top: 0; line-height: 2.4em;}
#brief h3 i { width: 30px; height: 3px; background: #fff; display: block; position: absolute; top: 0;}
#brief p { text-indent: 2em; font-size: 16px; line-height: 1.8em; padding-bottom: 2vh; text-align: justify;}

#brand { background: url("/images/v2023/aboutus_city.png") left bottom no-repeat #fff; background-size:60%; padding-left: 60%; margin-top: -6vh; margin-bottom: 10vh; padding-top: 11vh; position: relative;}
#brand h3 { color: #074f97; font-size:36px; font-weight: 300; position: absolute; top: 0; left: 60%; line-height: 2em;}
#brand h3 i { width: 30px; height: 3px; background: #074f97; display: block; position: absolute; top: 0;}
#brand li { background: #f3f3f3; font-size: 16px; line-height: 2.4em; margin-bottom: 1vh;}
#brand li span { background:#074f97; color: #fff; display:  block; float: left; padding:0 .6em; margin-right: .6em;}

#company {position: relative; margin-bottom: 10vh;}
#company h3 { color: #074f97; font-size:36px; font-weight: 300; line-height: 2em; position: relative;}
#company h3 i { width: 30px; height: 3px; background: #074f97; display: block; position: absolute; top: 0;}
#company dl { overflow: hidden; line-height: 2.4em; text-align: center;}
#company dt { border-bottom:#074f97 solid 1px;}
#company dt span { background:#074f97; font-size: 20px; color: #fff; padding:0.5em 1.2em;}
#company dd { background: #f3f3f3; border-left: 10px #fff solid; height:3.2em; float: left; width:19%; font-size: 18px; line-height:3.2em; margin-top: 1vh;}
#company dd:nth-child(7),#company dd:nth-child(5) { line-height:1.6em;}
#company table { border-top:#fff solid 1px; border-left:#fff solid 1px; width: 100%; margin-top: 6vh;}
#company td { border-bottom:#fff solid 1px; border-right:#fff solid 1px; background:#f3f3f3; font-size: 18px; line-height: 2em; padding: 0 .6em;}
#company td.com_title { background: #fff; border-bottom:#074f97 solid 1px; border-right: none; text-align: center; line-height: 2.4em;}
#company td.com_title span { background:#074f97; font-size: 20px; color: #fff; padding:0.5em 1.2em;}
#company .table_tt td { background: #e1e1e1; color: #074f97; text-align: center; font-weight: 600;}
#company .com_id { text-align: center;}
#company td.lightblue { background: #deefff;}


#awards { margin: 10vh 0; position: relative; display: none;}
#awards h3 { color: #074f97; font-size:36px; font-weight: 300; line-height: 2em; position: relative;}
#awards h3 i { width: 30px; height: 3px; background: #074f97; display: block; position: absolute; top: 0;}
#awards .swiper-slide { background: #f3f3f3; width: auto; margin-right: 1vw;}
#awards .swiper-slide img { height:25vh;}
/*aboutus_end*/

/*news_start*/
body#news { background: url("/images/v2023/news_top.jpg") top center no-repeat; background-size: contain;}
#news h2 { color: #fff; font-size:36px; font-weight: 300; line-height: 2em; position: relative; margin-top: -2em;}
#news h2 i { width: 30px; height: 3px; background: #fff; display: block; position: absolute; top: 0;}
.newslist { padding-bottom: 5vh;}
.newslist li { background: #f3f3f3; margin-bottom: 2vh; padding: 3vh 2vw; width: 90%; box-shadow: 4px 4px 0 0 #e1e1e1;  overflow: hidden;}
.newslist li img { width: 33%; height: auto; float:left; margin-right: 2%;}
.newslist li span {color:#858585; font-size: 14px; line-height: 2em;}
.newslist li h5 { font-size: 22px; line-height: 2em; font-weight: 600;}
.newslist li p { color:#858585; font-size: 16px; text-indent: 2em; line-height: 1.8em;}
.newslist li:hover { background: #074f97; color: #fff; box-shadow: 8px 8px 0 0 rgba(7,79,151,.3);}
.newslist li:hover h5 {color: #fff;}
.newslist li:hover p,.newslist li:hover span {color: #7aacde;}
/*news_end*/

/*info_start*/
body#info { background: url("/images/v2023/info_top.jpg") top center no-repeat; background-size: contain;}
#info h2 { color: #fff; font-size:36px; font-weight: 300; line-height: 2em; position: relative; margin-top: -2em;}
#info h2 i { width: 30px; height: 3px; background: #fff; display: block; position: absolute; top: 0;}
.infolist { padding-bottom: 5vh;}
.infolist li { background: #f3f3f3; margin-bottom: 2vh; padding: 3vh 2vw; width: 90%; box-shadow: 4px 4px 0 0 #e1e1e1; overflow: hidden; font-size: 20px; font-weight: 400;}
.infolist li:hover { background: #074f97; color: #fff; box-shadow: 8px 8px 0 0 rgba(7,79,151,.3);}
.infolist li:hover a,.infolist li:hover span {color: #fff;}
.infolist li span {color:#858585; font-size: 14px; line-height: 2em; float: right;}
/*info_end*/

/*selectpage*/
.selectpage { margin-bottom: 5vh; font-size: 18px;}


/*projects_start*/
body#projects { background: url("/images/v2023/projects_top.jpg") top center no-repeat; background-size: contain;}
#projects h2 { color: #fff; font-size:36px; font-weight: 300; line-height: 2em; position: relative; margin-top: -2em;}
#projects h2 i { width: 30px; height: 3px; background: #fff; display: block; position: absolute; top: 0;}
#p_list { background: #fff; position: relative;}
.tabs{ float: right; width: 80%; font-size: 18px;}
.tabs li { float: left; color: #fff; font-weight:300; padding: 0 3vh; position: relative; cursor: pointer;}
.tabs li.active { font-weight:600; background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));}
.tabs li.active:after { content: ""; width: 0; height: 0; border-bottom: 15px solid #fff; border-right: 15px solid transparent; border-left: 15px solid transparent; position: absolute; bottom: -8px; left: 33px;}
.projectlist { padding-bottom: 5vh; overflow: hidden;}
.tabbox { padding-top: 5vh;}
.projectlist li { background: #f3f3f3; height:30.5vh; overflow: hidden;margin-bottom: 2vh; margin-left: 0.25%; margin-right: 0.25%; width:32.8%; box-shadow: 0 4px 0 0 #e1e1e1; float: left; overflow: hidden; font-size: 20px; font-weight: 400; text-align: center;}
.projectlist li img { width: 100%; height: 25vh;}
.projectlist li:hover { background: #074f97; color: #fff; box-shadow: 0 8px 0 0 rgba(7,79,151,.3);}
.projectlist li:hover a,.infolist li:hover span {color: #fff;}
.projectlist li p { padding: 1vh 0;}
/*projects_end*/

/*article_start*/
body#article { background:#f3f3f3;}
#article .header h1 { background-image: url(/images/v2023/logo_dark.svg);}
#article nav li,#article nav a { color: #3f3a37;}
#article nav a:hover { background: linear-gradient(to bottom, rgba(210, 210, 210, 0.3), rgba(0, 0, 0, 0)); color: #178ccf;}
#article #main, #project_main { padding-top: 10vh;}
.arti,.sidebar { background: #fff;}
.arti { width: 70%;}
.sidebar { width: 28%;}
#info_content { padding: 3vh 3vw;}
.dqwz,.subtext { padding-bottom: 2vh; font-size: 14px; color: #858585; }
.dqwz a { color: #858585;}
.dqwz a:hover { color:#168bce;}
#artibodytitle { font-size: 30px; font-weight:600; line-height: 1.6em; padding: 3vh 0 2vh;}
.subtext { border-top:#f1f1f1 solid 1px; padding: 1vh 0;}
#artibody { padding: 3vh 0;}
#artibody p { padding: 1vh 0; /*text-indent: 2em;*/ line-height: 1.8em; text-align: justify;}
#artibody img { width: 100%; height: auto;}
.sidebar h4 { color: #858585; font-size:24px; font-weight: 300; line-height: 2.4em; padding-left: 2vw; position: relative;}
.sidebar h4 i { width: 30px; height: 3px; background: #074f97; display: block; position: absolute; top: 0;}
.sidebar ul { padding: 1vh 2vw;}
.sidebar li { padding-bottom:3vh; font-size: 16px; text-align: justify;}
.sidebar li em { color: #858585; font-size: 14px; display: block;}
/*article_start*/

/*info_inpage*/
.info_inpage .arti { width: 100%; float: none;}
.info_inpage .sidebar { display: none;}

/*project_inpage_start*/
#project_img img { width: 100%;}
#project_info { background: #fff; padding: 3vh 3vw;}
#project_brief { width: 68%; border-right:#f1f1f1 solid 1px; padding-right: 3%;}
#project_detail { width: 25%; padding-left: 2%;}
#project_name { font-size: 30px; font-weight:600; line-height: 1.6em; padding: 3vh 0; border-bottom:#f1f1f1 solid 1px;}
#project_intro { padding: 2vh 0;}
#project_intro p { padding: 1vh 0; text-indent: 2em; line-height: 1.8em; text-align: justify;}
#project_detail dt { color: #858585; font-size: 14px;}
#project_detail dd { font-size: 16px; padding-bottom: 2vh;}
/*project_inpage_end*/

@media screen and (max-width: 768px) {
	body#aboutus,body#news,body#info,body#projects { background-position: 0 10vh;}
	.header { background: #fff; position: relative;}
	.header h1 { background-image: url(/images/xxj/logo.png); background-size: contain; height: 6vh;}
	.wrap { overflow: hidden; width: 100%; min-width: 100%; clear: both;}
	.fr,.fl { float:none;}
	#main { padding-top: 18vh;}
	#home .swiper-slide .title { font-size: 30px; margin-top: calc(0px - (var(--swiper-navigation-size)/ 2) - 4vh);}
	#home .swiper-slide .text { bottom:1vh;}
	#aboutus #main { padding-top: 25vh;}
	#brief { width: 88%; margin-left: 2%; padding-top: 7vh;}
	#brand,#company { width: 96%; margin-left: 2%;}
	#brand { padding-left: 0; padding-top: 7vh; margin-top: 5vh;}
	#brief h3,#brand h3,#company h3 { font-size: 24px; line-height: 2em;}
	#brand h3 { left: 0;}
	#brand li span { float: none; width: 4em;}
	#company dd { float: none; width: 100%;}
	#company dt span,#company td.com_title span { font-size: 16px;}
	#company td { font-size: 16px;}
	#news h2,#info h2,#projects h2 { padding-left: 3%;  font-size: 24px;}
	.newslist li,.newslist li h5,.infolist li { margin-left: 3%; font-size: 18px;}
	.newslist li,.infolist li { padding: 1vh 2vw;}
	.projectlist li { width: 96%; margin-left: 2%;}
	.tabs { width: 50%;}
	#article nav li,#article nav a { color: #fff;}
    #article .arti,#article .sidebar,#project_main #project_brief,#project_main #project_detail,.add,.add span { width: 100%;}
	#article .header { background: none;}
	#article #main, #project_main { padding: 0;}
	#article .dqwz,.footer_logo  { display: none;}
	#project_main #project_detail { border:none;}
	
	/*toggle_nav*/
	nav { width: 100%; position: absolute;z-index: 9; -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing; -webkit-transform: translateY(200%); transform: translateY(200%); display: none;}
	nav li { float: none; width: 100%;}
	.nav-toggle { display: block;width: 60px; height: 60px; z-index: 2; border-radius: 50%; margin: 10px; position: absolute; top:0.5vh; right: 0.5vw; cursor: pointer;-webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing;}
	.nav-toggle:before { width: 60px; height: 60px; content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition-duration: 0.66s; transition-duration: 0.66s; -webkit-transition-timing-function: swing; transition-timing-function: swing;}
	.nav-toggle .icon { width: 30px; height: 4px; background-color: #008cce; border-radius: 2px; position: absolute; top: 28px; left: 15px; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; transiting-timing-function: swing;}
	.nav-toggle .icon:before,.nav-toggle .icon:after { width: 30px; height: 4px; background-color: #008cce; border-radius: 2px; content: ""; position: absolute; left: 0; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: swing; transition-timing-function: swing;}
	.nav-toggle .icon:before { top: -9px; }
	.nav-toggle .icon:after { top: 9px;}
	
	nav.nav_active { -webkit-transform: translateY(0); transform: translateY(0); display: block;}
	body.nav-open .lower-screen { -webkit-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8);}
	body.nav-open .nav-toggle:before {width: 200vw;  height: 200vh;  background-color: rgba(0, 140, 206, 0.95);}
	body.nav-open .nav-toggle .icon { width: 0;}
	body.nav-open .nav-toggle .icon:before { background-color:#fff; -webkit-transform: translateY(9px) rotate(45deg); -ms-transform: translateY(9px) rotate(45deg); transform: translateY(9px) rotate(45deg);}
	body.nav-open .nav-toggle .icon:after { background-color:#fff; -webkit-transform: translateY(-9px) rotate(-45deg); -ms-transform: translateY(-9px) rotate(-45deg); transform: translateY(-9px) rotate(-45deg);}
}