/**
 * kc-network styles
 * update:2015-09-30 09:11:54
 */


/* base */
html, body {
    -webkit-text-size-adjust: none;
}
body {
    background:url(../images/bg.jpg) no-repeat top center fixed;
}

body,
a {
    color: #2e314f;
}

a:hover {
    color: #f04949;
}


/* layout */
.main {
    max-width: 960px;
    position: relative;
    padding: 1px 0;
    margin: -1px auto;
}


/* links */

.links > ul {
    font-size: 0;
    line-height: 0;
}

.links > ul > li {
    display: inline-block;
    line-height: 32px;
    font-size: 14px;
}

/* logo */
.logo {
    width: 120px;
    height: 190px;
    margin: 8px;
    font-size: 0;
    line-height: 0;
    /*background-image: url(../images/logo.png);
    background-image: -webkit-image-set( url(../images/logo.png) 1x, url(/images/logo@2x.png) 2x);*/
    background-repeat: no-repeat;
    background-position: 0 0;
}

#modify {
    position: absolute;
    right: -40px;
    top: 0;
    width: 111px;
    height: 308px;
    z-index: 0;
    /*background-image: url(../images/modify.png);
    background-image: -webkit-image-set( url(../images/modify.png) 1x, url(/images/modify@2x.png) 2x);*/
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* header-smart */
.header-smart {
    display: none;
    /*background: #f04949;
    box-shadow: 0 1px 0 rgba(164, 18, 18, .5), 0 1px 6px 5px rgba(164, 18, 18, .2);*/
    height: 54px;
}
.header-smart > .logo {
    width: 60px;
    height: 60px;
    background-image: url(../images/logo-smart.png);
    background-image: -webkit-image-set( url(../images/logo-smart.png) 1x, url(/images/logo-smart@2x.png) 2x);
    background-position: 0 0;
    margin: 5px auto;
}

/* nt-test */

#nt-test {
    position: relative;
    z-index: 2;
}

#nt-test > h2 {
    display: block;
    max-width: 480px;
    height: 77px;
    margin: 10px;
    font-size: 0;
    background-image: url(../images/testing-title.png);
    background-image: -webkit-image-set( url(../images/testing-title.png) 1x, url(/images/testing-title@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 0;
}

#nt-test > ul a,
#nt-test > ul i,
#nt-test > ul em,
#nt-test > ul span {
    font-style: normal;
}

#nt-test > ul,
#nt-test > ul a {
    font-size: 0;
    line-height: 0;
}

#nt-test > ul > li {
    display: inline-block;
    width: 33.333333333333333333333333%;
}

#nt-test > ul > li a {
    display: block;
    margin: 8px;
    padding: 8px;
    background: #fff;
    border: 1px #8799ba solid;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    box-shadow: 0 2px 6px rgba(131, 147, 183, .3);
    position: relative;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
}

#nt-test > ul > li a:hover {
    box-shadow: 0 5px 10px rgba(131, 147, 183, .5);
}

#nt-test > ul > li a > em,
#nt-test > ul > li a > span {
    font-size: 14px;
    line-height: 32px;
    padding: 0 8px;
}

#nt-test > ul > li a > i,
#nt-test > ul > li a > span {
    position: absolute;
    top: 8px;
}

#nt-test > ul > li a > i {
    display: block;
    width: 32px;
    height: 32px;
    right: 8px;
    background-image: url(../images/enter.png);
    background-image: -webkit-image-set( url(../images/enter.png) 1x, url(/images/enter@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 0 0;
}

#nt-test > ul > li a > em {
    display: block;
    margin-right: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#nt-test > ul > li a > span {
    right: 40px;
    text-align: center;
    width: 110px;
}

#nt-test > ul > li a > span i {
    padding: 0 4px;
    margin-right: 4px;
    font-weight: bold;
}

#nt-test > ul > li a > span em.testing {
    color: #f90;
}

#nt-test > ul > li a > span em.error {
    color: #f04949;
}

#nt-test > button {
    border: 0;
    background-color: #fff;
    border:1px solid #284473;
    color: #284473;
    display: block;
    font-size: 16px;
    height: 48px;
    line-height: 40px;
    margin: 20px auto;
    outline: 0;
    padding: 0 32px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
     font-family: 'Microsoft Yahei';
}
#nt-test > button:hover {
    background-color: #284473;
    border:1px solid #284473;
    color: #fff;
}
#nt-test > button:active {
    background-color: #284473;
    border:1px solid #284473;
    color: #fff;
}
#nt-test > p {
    position: relative;
    margin: 0 auto 20px;
    text-align: center;
    background-color: #58384f;
    color: #fff;
    font-size: 13px;
    padding: 6px 8px;
    width: 580px;
    border-radius: 5px;
}
#nt-test > p::before {
    position: absolute;
    left: 50%;
    top: -16px;
    margin-left: -4px;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px;
    border-color: transparent transparent #58384f transparent;
}

/* addition */
#addition {
    position: relative;
    margin-bottom: 20px;
}
#addition::after {
    display: block;
    content: '';
    clear: both;
}
#addition > .item {
    margin: 10px;
    padding: 10px 0;
    display: inline-block;
    float: left;
    overflow: hidden;
    vertical-align: top;
}
#addition > .item.ai-app {
    width: 210px;
}
#addition > .item.ai-app .img {
    width: 140px;
    height: 140px;
    padding: 8px;
    border: 1px #8799ba solid;
    margin: 0 auto 10px;
    overflow: hidden;
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    box-shadow: 0 2px 6px rgba(131, 147, 183, .3);
}
#addition > .item.ai-app .img img {
    width: 100%;
    height: 100%;
}
#addition > .item.ai-app h2 {
    width: 160px;
    height: 48px;
    margin: 0 auto 10px;
    font-size: 0;
    line-height: 0;
    background-repeat: no-repeat;
    background-position: 0 0;
}
#addition > .item.ai-app h2.f-apple {
    background-image: url(../images/app-apple.png);
    background-image: -webkit-image-set( url(../images/app-apple.png) 1x, url(/images/app-apple@2x.png) 2x);
}
#addition > .item.ai-app h2.f-android {
    background-image: url(../images/app-android.png);
    background-image: -webkit-image-set( url(../images/app-android.png) 1x, url(/images/app-android@2x.png) 2x);
}
#addition > .item.ai-app h4,
#addition > .item.ai-app p {
    padding: 0 16px;
    font-size: 12px;
    text-align: center;
    font-size: 12px;
}
#addition > .item.ai-tips {
    color: #fff;
    width: 480px;
    height: 300px;
    background-color: #f04949;
    background-image: url(../images/tips-bg.png);
    background-image: -webkit-image-set( url(../images/tips-bg.png) 1x, url(/images/tips-bg@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: right bottom;
    margin-top: 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    text-shadow: 0 1px 3px rgba(164, 18, 18, .5);
    box-shadow: inset 0 4px 6px rgba(164, 18, 18, .5), 0 1px 0 rgba(255, 255, 255, .5);
}
#addition > .item.ai-tips p {
    padding: 0 16px;
}
#addition > .item.ai-tips ol {
    padding: 0 16px 0 48px;
}

/* footer */
.footer {
    color: #8090b5;
    text-align: center;
    font-size: 12px;
}

/* honor */
#honor {
    position: relative;
    margin-bottom: 30px;
}
#honor li {
    width: 33.33%;
    box-shadow: inset -1px 0 0 #8799ba;
}
#honor li.h-03 {
    box-shadow: none;
}
#honor i,
#honor em {
    display: inline-block;
    font-style: normal;
    vertical-align: top;
}
#honor i {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    background-image: url(../images/honor-icon.png);
    background-image: -webkit-image-set( url(../images/honor-icon.png) 1x, url(/images/honor-icon@2x.png) 2x);
    background-repeat: no-repeat;
}
#honor em {
    font-size: 18px;
    line-height: 32px;
}
#honor li.h-01 i { background-position: 0 0; }
#honor li.h-02 i { background-position: -32px 0; }
#honor li.h-03 i { background-position: -64px 0; }

/* links-base */
.links-base a {
    display: inline-block;
    padding: 0 8px;
}


/* footer-tipsy */
#footer-tipsy {
    margin: 20px;
    display: inline-block;
    padding: 0 32px;
    color: #f04949;
}

/* media-quire */
@media screen and (max-width:960px) {
    .header {
        display: none;
    }
    .header-smart {
        display: inherit;
    }
    #nt-test > h2 {
        width: 300px;
        height: 32px;
        background-image: url(../images/testing-title-smart.png);
        background-image: -webkit-image-set( url(../images/testing-title-smart.png) 1x, url(/images/testing-title-smart@2x.png) 2x);
        background-position: 0 0;
        margin: 10px auto 0;
    }
    #nt-test > ul > li a > span {
        font-size: 16px;
    }
    #nt-test > button {
        font-size: 18px;
    }
    #nt-test > p {
        width: 90%;
        line-height: 22px;
    }
    #honor {
        display: none;
    }
    #addition > .item.ai-tips {
        display: none;
    }
    #addition > .item.ai-app {
        width: 50%;
        margin: 0;
    }
}
@media screen and (max-width: 480px) {
    #nt-test > ul > li {
        width: 100%;
    }
}
@media screen and (max-width: 320px) {
    #addition > .item.ai-app {
        width: 100%;
    }
}




/* browser-mode-fixed */
#browser-mode-fixed {
	color: #999;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 10px 0;
	text-align: center;
	z-index: 1;
}
#browser-mode-fixed .bmf-browser {
	font-size: 0;
	line-height: 0;
	text-align: center;
	margin-bottom: 8px;
}
#browser-mode-fixed .bmf-browser li {
	display: inline-block;
	overflow: hidden;
}
#browser-mode-fixed .bmf-browser li a {
	display: block;
	width: 48px;
	height: 48px;
	margin: 4px;
	background-image: url(../images/new-kc.png);
	background-image: -webkit-image-set( url(../images/new-kc.png) 1x,
		url(/images/new-kc@2x.png) 2x);
	background-repeat: no-repeat;
	opacity: .5;
}
#browser-mode-fixed .bmf-browser li a:hover {
	opacity: 1;
}
#browser-mode-fixed .bmf-browser li a.b-b-chrome {
	background-position: -188px 0;
}
#browser-mode-fixed .bmf-browser li a.b-b-firefox {
	background-position: -236px 0;
}
#browser-mode-fixed .bmf-browser li a.b-b-safari {
	background-position: -284px 0;
}
#browser-mode-fixed .bmf-browser li a.b-b-ie {
	background-position: -332px 0;
}
.mob{margin-top:40px;}
@media (max-width: 640px) {
	.main{margin:40px 10px 0 10px;}
	.mob{margin-top:40px;}
}