body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, fieldset, button, input, textarea, th, td { margin: 0; padding: 0;}
body {font: 12px/1.8 "PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; color: #333; background-color: #eee; text-align: center;}
ul, ol, li { list-style: none;}
a { text-decoration: none; color: #000;}
html,body { width: 100%; height: 100%;}

.i-header { position: relative; background: url(../images/bg.jpg) no-repeat center center; background-size: cover; font-size: 42px; color: #fff; text-align: center; padding: 130px 0 140px 0; font-weight: bold; text-shadow: 0 0 15px rgba(0,0,0,0.5)}
.i-header .title i { display: inline-block; width: 50px; height: 50px; background: url(../images/logo.png) no-repeat 0 0; background-size: 100% auto; position: relative; top: 10px; margin-right: 10px;}
.i-header .language { position: absolute; right: 20px; top: 18px; font-size: 13px; color: #fff;}
.i-header .language a { color: #fff; display: inline-block; padding: 1px 10px; border-radius: 2px; background-color: transparent; transition: all .3s ease;}
.i-header .language a:hover { background-color: rgba(255,255,255,0.3); transition: all .3s ease;}
.i-header .language a i.en { display: inline-block; width: 12px; height: 12px; background: url(../images/icon-language.png) no-repeat 0 -24px; background-size: 100% auto; position: relative; top: 1px; margin-right: 5px;}
.i-header .language a i.zh { display: inline-block; width: 12px; height: 12px; background: url(../images/icon-language.png) no-repeat 0 -12px; background-size: 100% auto; position: relative; top: 1px; margin-right: 5px;}
.i-box { padding: 10px 20px; max-width: 1200px; margin: 0 auto;}

.card-header { font-size: 20px; color: #000; margin: 30px;}

/* .card-box { padding: 20px;} */
.card-box:after { display: block; clear: both; height: 0; content: "\0020"}
.card { float: left; width: 31.33%; margin: 0 1% 1.5%; border: none; border-radius: 3px; box-shadow: 0 0 5px rgba(100,100,100,0.05);}
.card a { display: block; border-radius: 3px; transition: all .3s ease;}
.card-body { padding: 20px 0;}
.card-title { font-size: 15px; color: #333; transition: all .3s ease;}
.card-text { font-size: 13px; color: #666; transition: all .3s ease;}
.card a:hover { background-color: #001435; transition: all .3s ease;}
.card a:hover .card-title { color: #fff; transition: all .3s ease;}
.card a:hover .card-text { color: #fff; transition: all .3s ease;}

.footer p { font-size: 12px; color: #555; padding: 20px 0;}

/*----*/
.header { position: relative; background: url(../images/bg.jpg) no-repeat center center; background-size: cover; color: #fff; text-align: left; padding: 30px 0; font-weight: bold; text-shadow: 0 0 15px rgba(0,0,0,0.5)}
.header .title { position: absolute; left: 15px; top: 6px; font-size: 18px;}
.header .title a { color: #fff;}
.header .title i { display: inline-block; width: 30px; height: 30px; background: url(../images/logo.png) no-repeat 0 0; background-size: 100% auto; position: relative; top: 9px; margin-right: 6px;}
.header .language { position: absolute; right: 15px; top: 16px; font-size: 13px; color: #fff;}
.header .language a { color: #fff; display: inline-block; height: 27px; line-height: 27px; padding: 0 10px; border-radius: 2px; background-color: transparent; transition: all .3s ease;}
.header .language a:hover { background-color: rgba(255,255,255,0.3); transition: all .3s ease;}
.header .language a i.en { display: inline-block; width: 12px; height: 12px; background: url(../images/icon-language.png) no-repeat 0 -24px; background-size: 100% auto; position: relative; top: 1px; margin-right: 5px;}
.header .language a i.zh { display: inline-block; width: 12px; height: 12px; background: url(../images/icon-language.png) no-repeat 0 -12px; background-size: 100% auto; position: relative; top: 1px; margin-right: 5px;}
.header .btn-docs { display: inline-block; position: absolute; right: 85px; top: 16px; color: #fff; height: 27px; line-height: 27px; padding: 0 10px; border-radius: 2px; transition: all .3s ease;}
.header .btn-docs:hover { background-color: rgba(255,255,255,0.3); transition: all .3s ease;}
.header .btn-docs i { display: inline-block; width: 14px; height: 14px; background: url(../images/icon-docs.png) no-repeat 0 0; background-size: 100% auto; position: relative; top: 3px; margin-right: 3px;}

/*--docs-box--*/
.docs-box { display: none;}
.docs-bg { background-color: rgba(0,0,0,0.5); z-index: 998; position: fixed; left: 0; top: 0; width: 100%; height: 100%;}
.docs-con { position: absolute; z-index: 999; left: 50%; top: 100px; width: 500px; margin-left: -280px; background-color: #fff; border-radius: 4px; padding: 30px; text-align: left; box-shadow: 0 0 10px rgba(50,50,50,0.1);}
.docs-con h3 { padding: 10px 0; font-size: 14px;}
.docs-con .btn-close { position: absolute; right: 12px; top: 12px; display: inline-block; width: 36px; height: 36px; background: url(../images/icon-x.png) no-repeat center center; background-size: 80% auto; transition: all .3s ease;}
.docs-con .btn-close:hover {
    transition: all .3s ease;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); /* IE 9 */
    -moz-transform:rotate(180deg); 	/* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 鍜� Chrome */
    -o-transform:rotate(180deg);
}




@media screen and (max-width: 1000px) {
    .card { width: 48%;}
}

@media screen and (max-width: 600px) {
    .i-header { padding: 100px 0;}
    .i-header .title i { width: 40px; height: 40px;}
    .card { width: 100%; margin: 0 0 10px 0;}
    .card-header { margin: 20px 0; font-size: 18px;}
    .footer p { padding-top: 10px;}
    .header .title { font-size: 16px;}
    .header .language { right: 10px;}
    .header .btn-docs { right: 75px;}
    .docs-con { width: 280px; padding: 20px; margin-left: -160px;}
}