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);
}




/* 添加触摸优化 */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* 通用移动端优化 */
button, .card a, .header .language a, .header .btn-docs {
    touch-action: manipulation;
    min-height: 44px;
}

/* 改进的移动端响应式设计 */
@media screen and (max-width: 1200px) {
    .i-box { padding: 10px 15px; }
    .card { width: 48%; margin: 0 1% 15px 1%;}
}

@media screen and (max-width: 768px) {
    .i-header { 
        padding: 80px 20px; 
        font-size: 36px;
    }
    .i-header .title i { 
        width: 45px; 
        height: 45px;
    }
    .i-header .language { 
        right: 15px; 
        top: 15px;
        font-size: 14px;
    }
    .card { 
        width: 100%; 
        margin: 0 0 15px 0;
    }
    .card-header { 
        margin: 25px 15px; 
        font-size: 20px;
    }
    .card-body { 
        padding: 25px 15px;
    }
    .card-title { 
        font-size: 16px; 
        margin-bottom: 8px;
    }
    .card-text { 
        font-size: 14px; 
        line-height: 1.6;
    }
    .footer p { 
        padding: 25px 15px;
        font-size: 13px;
    }
    .header { 
        padding: 35px 0;
    }
    .header .title { 
        font-size: 18px; 
        left: 20px;
    }
    .header .language { 
        right: 15px;
        top: 20px;
    }
    .header .btn-docs { 
        right: 85px;
        top: 20px;
    }
    .docs-con { 
        width: calc(100% - 40px); 
        padding: 25px 20px; 
        margin-left: calc(-50% + 20px);
        top: 80px;
        left: 50%;
    }
}

@media screen and (max-width: 480px) {
    .i-header { 
        padding: 60px 15px; 
        font-size: 28px;
    }
    .i-header .title i { 
        width: 35px; 
        height: 35px;
        margin-right: 8px;
    }
    .i-header .language { 
        right: 10px; 
        top: 12px;
        font-size: 12px;
    }
    .i-box { 
        padding: 5px 10px; 
    }
    .card-header { 
        margin: 20px 10px; 
        font-size: 18px;
    }
    .card-body { 
        padding: 20px 12px;
    }
    .card-title { 
        font-size: 15px;
    }
    .card-text { 
        font-size: 13px;
    }
    .header .title { 
        font-size: 16px; 
        left: 15px;
    }
    .header .language { 
        right: 10px;
        top: 18px;
    }
    .header .language a { 
        padding: 0 8px;
        font-size: 12px;
    }
    .header .btn-docs { 
        right: 70px;
        top: 18px;
        padding: 0 8px;
        font-size: 12px;
    }
    .docs-con { 
        width: calc(100% - 20px); 
        padding: 20px 15px; 
        margin-left: calc(-50% + 10px);
        top: 60px;
    }
    .docs-con h3 { 
        font-size: 16px; 
        padding: 8px 0;
    }
}