@import url(fonts.css);
html {
/*设置CSS html整个页面为弹性盒布局，高度为视窗的全高，页面下的元素整体通过html元素的justify-content: center而居中
这样整个页面不论视窗的宽度如何都会整体居中*/
height: 100%;
display: flex;
justify-content: center;
}
body {
/*设置CSS 元素盒模型的尺寸为border-box,而非缺省的content-box
使得元素盒子的高度和宽度尺寸包含了内容尺寸+内边距尺寸+边界尺寸*/
box-sizing: border-box;
height: 100%; /* 设定body高度为100% 拉到视窗可视的大小 */
min-width: 1360px; /*设定最小宽度是1360像素*/
max-width: 1920px; /*设定最大宽度是1920像素*/
/*这样整个页面会在1360像素至1920像素的视窗界面中自动适应宽度，当在分辨率超过1920的显示器上全屏显示时，页面宽度仍为1920，并且居中显示
在小于1360分辨率的显示器上展示时，页面宽度仍为1360，浏览器窗口底部出现水平滚动条。*/
margin: 0;
padding: 0;
font-size: 14px;
font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: #333;
background: #f8f8f8 no-repeat;
background-size: 100% 100%;
}
/*页面布局介绍*/
/*body元素下的一级子元素包括： #mainheader, .navcontainer, #maincontainer2, footer*/
*, *::before, *::after{
/*box-sizing: border-box;*/
}
/*body元素下的一级子元素#mainheader用于包含页面头部栏*/
#mainheader {
width: 100%;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
overflow: hidden;
}
#mainheader .headerlogo {
float: left;
margin-left: 20px;
}
#mainheader .headersearch {
float: left;
}
#mainheader .headerlogin {
float: right;
margin-right: 20px;
}
/*body元素下的一级子元素navcontainer，用于包含水平导航栏菜单*/
.navcontainer {
width: 100%;
height: 60px;
background: black;
box-sizing: border-box;
display: flex;
}
.comheadnav {
background: black;
display: block;
height: 60px;
margin-left: 0;
}
/* 悬停菜单 */
.comheadnav_nr_tab {
position: relative;
float: left;
width: 160px;
height: 60px;
}
.comheadnav_nrtab_area {
display: none;
position: absolute;
left: 0;
right: 0;
width: 160px;
padding-bottom: 10px;
padding-top: 10px;
background: rgba(0,18,51,0.8);
z-index: 99;
}
.comheadnav_nr_tab:hover .comheadnav_nrtab_area {
display: block;
}
.comheadnav_nrt_a1{
display: inline-block;
width: 160px;
font-size: 14px;
font-weight: 400;
color: #545454;
text-align: center;
line-height: 60px;
background-color: black;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.comheadnav_nrt_a1:hover{
height: 57px;
border-bottom: 4px solid #137ABF;
color: #137ABF;
}
.comheadnav_nrt_aon{
height: 57px;
border-bottom: 4px solid #137ABF;
color: #137ABF;
}
.comheadnav_nrtaa_btn{
display: inline-block;
width: 160px;
float: left;
font-size: 12px;
font-weight: 100;
color: #FFFFFF;
text-align: center;
line-height: 42px;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.comheadnav_nrtaa_btn:hover{
font-size: 14px;
letter-spacing: 1px;
}
.comheadnav a, .comheadnav a:link, .comheadnav a:visited {
display: inline-block;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
color: white;
margin-left: 0;
margin-top: 0;
vertical-align: middle;
}
.button, input[type="submit"], input[type="button"]{
background: #79aec8;
padding: 10px 15px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
/*body元素下的一级子元素#mainfooter，用于包含底部导航栏*/
#mainfooter {
clear: both;
display: flex;
width: 100%;
height: 60px;
color: #003366;
background: #555555;
padding: 10px;
justify-content: center;
align-content: center;
text-align: center;
}
#mainfooter p {
line-height: 100%;
margin: auto;
}
#mainfooter a {
text-decoration: none;
}
/*bottom 当底部使用多栏项目导航时采用*/
.ch_index_bottom{
width: 100%;
height: 390px ;
overflow: hidden;
margin: auto;
background: #FAFAFA;
border-top: 1px #e0e0e0 solid;
}
.ch_index_bottombox{
width: 100%;
height: 390px ;
overflow: hidden;
margin: auto;
position: relative;
left: 50%;
}
.ch_index_bottom_five{
width: 1280px ;
height: 390px ;
margin: auto;
overflow: hidden;
}
.ch_index_bf_list{
width: 196px ;
height: 360px ;
float: left;
margin-left: 60px ;
text-align: left;
}
.ch_index_bfl_line{
width: 80px ;
height: 2px;
background: #001233;
margin-top: 40px ;
}
.ch_index_bfl_title{
display: block;
line-height: 56px ;
font-size: 16px ;
color: #001233;
font-weight: 400;
cursor: pointer;
letter-spacing: 1px;
}
.ch_index_bfl_info{
display: block;
line-height: 42px ;
font-size: 14px ;
font-weight: 100;
color: #545454;
letter-spacing: 1px ;
}
.ch_index_bfl_link{
display: block;
line-height: 42px ;
font-size: 14px ;
font-weight: 100;
color: #545454;
letter-spacing: 1px ;
}
.ch_index_bfl_link:hover{
color: #001233;
font-size: 16px ;
cursor: pointer;
}
.ch_index_bfl_img{
width: 140px ;
height: 140px ;
margin: 14px 0;
}
.ch_index_bottom_line{
width: 100%;
height: 1px;
background: #001233;
}
.ch_index_bottom_rights{
display: block;
text-align: center;
height: 30px ;
margin: 10px 0;
line-height: 30px;
font-size: 14px ;
font-weight: 100;
color: #001233;
}
/* body元素下的一级子元素maincontainer2 用于包含已经整理好的html模块，例如Django管理站点页面中的container容器*/
#maincontainer2 {
width: 100%;
display: block;
/*min-height: 100%; /* 为了使footer定位在页面底部，暂时设置这个包含页面主要内容的容器最小高度为视窗的100%高度*/
min-height: calc(100vh - 207px);
/* 100vh是窗口高度100%，177px是mainheader + navcontainer + footer + footer前的clear元素的高度之和*/
}
/* maincontainer2元素下的一级子元素bannerimgsection, 用于包含展播图片*/
#bannerimgsection {
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
background: white;
overflow: hidden;
}
/* maincontainer是maincontainer2下的一级子元素，用于包含已经整理好的html模块，例如Django container */
#maincontainer {
display: flex;
width: 100%;
padding: 0;
}
.content-container-row-direction {
width: 100%;
height: auto;
display: flex;
justify-content: space-evenly;
align-items: center;
overflow: hidden;
}
.content-container-column-direction {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.center-justify-content {
justify-content: center;
}
.left-justify-content {
justify-content: left;
}
.flex-start-justify-content {
justify-content: flex-start;
}
.space-between-justify-content {
justify-content: space-between;
}
.space-evenly-justify-content {
justify-content: space-evenly;
}
.center-table-container {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
table#doc-table {
border: solid black;
padding: 10px;
width: calc(100% - 240px);
}
table#doc-table th {
font-size: 14px;
color: white;
background: darkblue;
padding-left: 20px;
padding-right: 20px;
}
#maincontainer .leftnav {
float: left;
background: white;
width: 181px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
#maincontainer .rightcontent {
float: right;
background: white;
width: calc(100% - 220px);
margin: 10px 10px 5px 10px;
border: 1px solid;
padding: 5px;
box-shadow: 4px 4px lightgrey;
}
.rightcontent .headersection {
width: auto;
height: auto;
display: flex;
justify-content: space-between;
padding-left: 10px;
padding-right: 10px;
align-items: center;
background: white;
overflow: hidden;
}
.rightcontent .sectline {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
background: white;
overflow: hidden;
}
.rightcontent .middlesection {
width: auto;
height: auto;
display: flex;
justify-content: space-between;
background: white;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
.rightcontent .bottomsection {
width: auto;
height: auto;
display: flex;
justify-content: space-between;
background: white;
overflow: hidden;
}
.headersection h3 {
float: left;
font-size: 20px;
}
.headersection .pagetag {
float: right;
font-size: 10px;
}
.bottomsection .divmap {
margin: 0 auto; /*使divmap在bottomsection中水平居中*/
display: block;
align-content: center;
}
.leftnav .navtopimg {
display: block;
width: auto;
height: auto;
}
.leftnav .navmiddleimg {
display: block;
width: auto;
height: auto;
}
.leftnav ul {
list-style-type: none;
display: block;
background: lightgrey;
margin-top: 3px;
margin-bottom: 3px;
padding: 0;
}
.leftnav li {
/*background: url("../images/leftnavitembg.jpg");*/
height: 35px;
line-height: 34px;
margin-bottom: 5px;
text-align: center;
}
#leftnavcontact {
display: block;
background: lightgrey;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: black;
padding-top: 5px;
vertical-align: middle;
padding-bottom: 5px;
}
#leftnavcontact p {
margin-left: 3px;
}
#leftnavcontact h3 {
border-bottom: 1px solid navajowhite;
text-align: center;
font-size: 14px;
margin-top: 0;
}
.leftnav a, .leftnav a:link, .leftnav a:visited {
display: block;
background: url("../images/leftnavitembg.jpg");
font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: black;
margin-left: 0;
margin-top: 0;
margin-right: 5px;
vertical-align: middle;
}
.leftnav a:hover, .leftnav a:active {
background: url("../images/leftnavitembg2.jpg");
color: blue;
}
#no_text_decoration {
text-decoration: none;
}
.no_text_decoration {
text-decoration: none;
}
.no_list_style_type {
list-style-type: none;
}
.centertable {
margin: 0 auto;
}
/*定义rightcontent容器中各个子部分headersection/middlesection/bottomsection中的子弹性盒 */
.flexrowsubcontainer {
width: 100%;
height: auto;
display: flex;
flex-direction: row; /* 设置flexsubcontainer弹性盒里面子div盒堆成成一行*/
justify-content: space-between;
background: white;
overflow: hidden;
}
/*定义rightcontent容器中各个子部分headersection/middlesection/bottomsection中的子弹性盒 */
.flexcolumnsubcontainer {
display: flex;
flex-direction: column; /* 设置flexsubcontainer弹性盒里面子div盒堆成成一列*/
width: 100%;
height: auto;
justify-content: space-between;
overflow: hidden;
}
.flexwrapsubcontainer {
width: auto;
height: auto;
display: flex;
margin: 0 auto;
flex-direction: row; /* 设置flexsubcontainer弹性盒里面多个子div盒堆成成一行*/
flex-wrap: wrap; /*设置flexsubcontainer弹性盒里面的多个子div盒溢出时自动换行*/
/*justify-content: space-between;*/
background: white;
overflow: hidden;
}
.flexbusinesscontainer {
width: auto;
height: auto;
display: flex;
flex-direction: row; /* 设置flexsubcontainer弹性盒里面多个子div盒堆成成一行*/
flex-wrap: wrap; /*设置flexsubcontainer弹性盒里面的多个子div盒溢出时自动换行*/
justify-content: space-between;
background: white;
overflow: hidden;
}
.imgbusiness {
margin: 10px 10px;
}
.ebg_box {
width: 267px;
box-sizing: border-box;
height: auto;
border-radius: 8px;
border: lightgrey solid 1px;
overflow: hidden;
box-shadow: 0 0 10px 3px rgba(0,0,0,0.1);
background: #fff;
margin-left: 10px;
margin-top: 10px;
}
.ebg_box ul {
margin-right: 5px;
}
.ebg_box2 {
box-sizing: border-box;
width: 95%;
height: auto;
border-radius: 8px;
border: lightgrey solid 1px;
overflow: hidden;
box-shadow: 0 0 10px 3px rgba(0,0,0,0.1);
background: #fff;
margin-left: 15px;
margin-top: 15px;
}
.fleximgbox40percent {
float: left;
width: 40%;
height: auto;
margin-left: 5px;
margin-right: 15px;
}
.fleximgbox100percent {
display: flex;
width: 100%;
height: auto;
align-content: space-between;
align-items: center;
margin-left: 5px;
margin-right: 15px;
}
.fleximgbox40percent .imgplaycss, .fleximgbox100percent .imgplaycss {
float: left;
width: 100%;
height: auto;
margin-left: 0;
}
.middlesection .imgplaycss {
width: 100%;
height: auto;
margin-left: 0;
}
.middlesection .imgplaycss2 {
width: auto;
height: auto;
margin-left: 0;
}
.flexdocbox60percent {
float: right;
width: 60%;
height: auto;
margin-left: 5px;
margin-right: 5px;
}
.flexdocbox100percent {
display: flex;
align-content: space-between;
align-items: normal;
width: 100%;
height: auto;
margin-left: 5px;
margin-right: 5px;
}
.flexdocbox60percent .doccss, .flexdocbox100percent .doccss {
text-align: left;
font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", Verdana, Arial, sans-serif;
font-size: 14px;
}
.doccss h1, .doccss h2, .doccss h3, .doccss h4, .doccss h5 {
text-align: center;
}
.datalist {
float: left;
width: 100%;
height: auto;
text-align: left;
vertical-align: top;
padding-left: 30px;
padding-top: 10px;
}
.datalist .newstitle {
text-align: left;
}
.datalist .casetitle {
text-align: left;
}
.datalist h2 {
font-size: 20px;
margin-top: 5px;
margin-bottom: 0;
}
.datalist p {
font-size: 14px;
margin-top: 5px;
margin-bottom: 35px;
}
.middlesection h1, .middlesection h2, .middlesection h3, .middlesection h4 {
text-align: center;
width: 100%;
}
.errornote {
font-size: 14px;
font-weight: 700;
display: block;
padding: 10px 12px;
margin: 0 0 10px 0;
color: #ba2121;
border: 1px solid #ba2121;
border-radius: 4px;
background-color: #fff;
background-position: 5px 12px;
}
.culturetitle {
color: darkblue;
text-align: left;
}
.culturepa {
}
#company_introduction {
padding: 15px;
}
/* Copy from django base.css for some pages integrated with django*/
#container {
position: relative;
width: 100%;
/* min-width: 980px;*/
padding: 0;
}
#content {
padding: 20px 40px;
}
#content-main {
float: left;
width: 100%;
}
#content-related {
float: right;
width: 260px;
position: relative;
margin-right: -300px;
}
fieldset {
margin: 0;
padding: 0;
border: none;
border-top: 1px solid #eee;
}
.help, p.help, form p.help, div.help, form div.help, div.help li {
font-size: 11px;
color: #999;
}
/* BREADCRUMBS */
div.breadcrumbs {
background: #79aec8;
padding: 10px 40px;
border: none;
font-size: 14px;
color: #c4dce8;
text-align: left;
}
div.breadcrumbs a {
color: #fff;
}
div.breadcrumbs a:focus, div.breadcrumbs a:hover {
color: #c4dce8;
}
/* TABLES */
table {
border-collapse: collapse;
border-color: #ccc;
}
td, th {
font-size: 13px;
line-height: 16px;
border-bottom: 1px solid #eee;
vertical-align: top;
padding: 8px;
font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
}
th {
font-weight: 600;
text-align: left;
}
thead th,
tfoot td {
color: #666;
padding: 5px 10px;
font-size: 11px;
background: #fff;
border: none;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
tfoot td {
border-bottom: none;
border-top: 1px solid #eee;
}
thead th.required {
color: #000;
}
tr.alt {
background: #f6f6f6;
}
.row1 {
background: #fff;
}
.row2 {
background: #f9f9f9;
}
/* SORTABLE TABLES */
thead th {
padding: 5px 10px;
line-height: normal;
text-transform: uppercase;
background: #f6f6f6;
}
thead th a:link, thead th a:visited {
color: #666;
}
thead th.sorted {
background: #eee;
}
thead th.sorted .text {
padding-right: 42px;
}
table thead th .text span {
padding: 8px 10px;
display: block;
}
table thead th .text a {
display: block;
cursor: pointer;
padding: 8px 10px;
}
table thead th .text a:focus, table thead th .text a:hover {
background: #eee;
}
thead th.sorted a.sortremove {
visibility: hidden;
}
table thead th.sorted:hover a.sortremove {
visibility: visible;
}
table thead th.sorted .sortoptions {
display: block;
padding: 9px 5px 0 5px;
float: right;
text-align: right;
}
table thead th.sorted .sortpriority {
font-size: .8em;
min-width: 12px;
text-align: center;
vertical-align: 3px;
margin-left: 2px;
margin-right: 2px;
}
table thead th.sorted .sortoptions a {
position: relative;
width: 14px;
height: 14px;
display: inline-block;
background: url("../images/sorting-icons.svg") 0 0 no-repeat;
background-size: 14px auto;
}
table thead th.sorted .sortoptions a.sortremove {
background-position: 0 0;
}
table thead th.sorted .sortoptions a.sortremove:after {
content: '\\';
position: absolute;
top: -6px;
left: 3px;
font-weight: 200;
font-size: 18px;
color: #999;
}
table thead th.sorted .sortoptions a.sortremove:focus:after,
table thead th.sorted .sortoptions a.sortremove:hover:after {
color: #447e9b;
}
table thead th.sorted .sortoptions a.sortremove:focus,
table thead th.sorted .sortoptions a.sortremove:hover {
background-position: 0 -14px;
}
table thead th.sorted .sortoptions a.ascending {
background-position: 0 -28px;
}
table thead th.sorted .sortoptions a.ascending:focus,
table thead th.sorted .sortoptions a.ascending:hover {
background-position: 0 -42px;
}
table thead th.sorted .sortoptions a.descending {
top: 1px;
background-position: 0 -56px;
}
table thead th.sorted .sortoptions a.descending:focus,
table thead th.sorted .sortoptions a.descending:hover {
background-position: 0 -70px;
}
/* FORM DEFAULTS */
input, textarea, select, .form-row p, form .button {
margin: 2px 0;
padding: 2px 3px;
vertical-align: middle;
font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif;
font-weight: normal;
font-size: 13px;
}
.form-row div.help {
padding: 2px 3px;
}
textarea {
vertical-align: top;
}
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], textarea, select, .vTextField {
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px 6px;
margin-top: 0;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=url]:focus, input[type=number]:focus, input[type=tel]:focus,
textarea:focus, select:focus, .vTextField:focus {
border-color: #999;
}
select {
height: 30px;
}
select[multiple] {
/* Allow HTML size attribute to override the height in the rule above. */
height: auto;
min-height: 150px;
}
/* FORM BUTTONS */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
background: #79aec8;
padding: 10px 15px;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
}
a.button {
padding: 4px 5px;
}
.button:active, input[type=submit]:active, input[type=button]:active,
.button:focus, input[type=submit]:focus, input[type=button]:focus,
.button:hover, input[type=submit]:hover, input[type=button]:hover {
background: #609ab6;
}
.button[disabled], input[type=submit][disabled], input[type=button][disabled] {
opacity: 0.4;
}
.button.default, input[type=submit].default, .submit-row input.default {
float: right;
border: none;
font-weight: 400;
background: #417690;
}
.button.default:active, input[type=submit].default:active,
.button.default:focus, input[type=submit].default:focus,
.button.default:hover, input[type=submit].default:hover {
background: #205067;
}
.button[disabled].default,
input[type=submit][disabled].default,
input[type=button][disabled].default {
opacity: 0.4;
}
/* MODULES */
.module {
border: none;
margin-bottom: 30px;
background: #fff;
}
.module p, .module ul, .module h3, .module h4, .module dl, .module pre {
padding-left: 10px;
padding-right: 10px;
}
.module blockquote {
margin-left: 12px;
}
.module ul, .module ol {
margin-left: 1.5em;
}
.module h3 {
margin-top: .6em;
}
.module h2, .module caption, .inline-group h2 {
margin: 0;
padding: 8px;
font-weight: 400;
font-size: 13px;
text-align: left;
background: #79aec8;
color: #fff;
}
.module caption,
.inline-group h2 {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
}
.module table {
border-collapse: collapse;
}
.clear {
clear: both;
}
.submit-row .centerinput {
margin-top: 10px;
margin-left: 45%;
}
/* OBJECT TOOLS */
.object-tools {
font-size: 10px;
font-weight: bold;
padding-left: 0;
float: right;
position: relative;
margin-top: -50px;
}
.form-row .object-tools {
margin-top: 5px;
margin-bottom: 5px;
float: none;
height: 2em;
padding-left: 3.5em;
}
.object-tools li {
display: block;
float: left;
margin-left: 5px;
height: 16px;
}
.object-tools a {
border-radius: 15px;
}
.object-tools a:link, .object-tools a:visited {
display: block;
float: left;
padding: 3px 12px;
background: #999;
font-weight: 400;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
}
.object-tools a:focus, .object-tools a:hover {
background-color: #417690;
}
.object-tools a:focus{
text-decoration: none;
}
.object-tools a.viewsitelink, .object-tools a.golink,.object-tools a.addlink {
background-repeat: no-repeat;
background-position: right 7px center;
padding-right: 26px;
}
.object-tools a.viewsitelink, .object-tools a.golink {
background-image: url("../images/tooltag-arrowright.svg");
}
.object-tools a.addlink {
background-image: url("../images/tooltag-add.svg");
}
/* OBJECT HISTORY */
table#change-history {
width: 100%;
}
table#change-history tbody th {
width: 16em;
}
.center-text {
text-align: center;
}