*{margin:0px;padding:0px;}
div{margin:auto;}
a img{border:0px;outline:0px;}
a {margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent; text-decoration:none; outline:0px; font-style:normal;}
body{text-align:center; width: 100%;margin:0 auto; background-color: #e9eaed;background-repeat:repeat-y;background-position:center;background-attachment:fixed;font-family: 'lucida grande';}
a:hover{cursor:pointer;}

.user_icon{
float:right;
margin-top:40px;
margin-right:-28px;
background:#ffffff;
width:116px;
padding-top:6px;
padding-bottom:8px;
text-align:left;
border:1px solid #e5e5e5;
      -moz-border-radius: 3px;    
        -webkit-border-radius: 3px;   
        border-radius:3px;  

}

.header_font{
height:24px;
width:116px;
margin-top:2px;
font-size:14px;
line-height:24px;
color:#666666;
}

.header_font:hover{
height:24px;
width:116px;
background:#4689ee;
margin-top:2px;
font-size:14px;
line-height:24px;
color:#ffffff;

}

.header{
width: 100%;
height: 42px;
position:fixed;
z-index:10000000;
text-align: center;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#4986da,endColorStr=#276ec3);/*IE6*/
    background:-moz-linear-gradient(top,#4986da,#276ec3);/*非IE6的其它*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4986da), to(#276ec3));/*非IE6的其它*/
    background:-o-linear-gradient(#4986da, #276ec3);
    background:linear-gradient(#4986da, #276ec3);
}

.sdks_kuang_1{
min-width:105px;
height: auto;
background: #ffffff;
position: absolute;
margin-top: 0px;
margin-left: 0px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top:1px solid #ffffff;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#bfbfbf;')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#bfbfbf;'); /* For IE 5.5 - 7 */
-moz-box-shadow:0px 4px 6px #bfbfbf;/* for firefox */
-webkit-box-shadow: 0px 4px 6px #bfbfbf;/* for safari or chrome */
box-shadow:0px 4px 6px #bfbfbf;/* for opera or ie9 */
    -moz-border-bottom-left-radius: 3px;    
        -webkit-border-bottom-left-radius: 3px;   
        border-bottom-left-radius:3px; 
		    -moz-border-bottom-right-radius: 3px;    
        -webkit-border-bottom-right-radius: 3px;   
        border-bottom-right-radius:3px; 
}

.support_kuang{
min-width:82px;
height: auto;
background: #ffffff;
position: absolute;
margin-top: 0px;
margin-left: 0px;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top:1px solid #ffffff;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#bfbfbf;')"; /* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#bfbfbf;'); /* For IE 5.5 - 7 */
-moz-box-shadow:0px 4px 6px #bfbfbf;/* for firefox */
-webkit-box-shadow: 0px 4px 6px #bfbfbf;/* for safari or chrome */
box-shadow:0px 4px 6px #bfbfbf;/* for opera or ie9 */
    -moz-border-bottom-left-radius: 3px;    
        -webkit-border-bottom-left-radius: 3px;   
        border-bottom-left-radius:3px; 
		    -moz-border-bottom-right-radius: 3px;    
        -webkit-border-bottom-right-radius: 3px;   
        border-bottom-right-radius:3px; 
}

.sdk_docs_font{
padding-left:17px;
padding-right:17px;
font-size:12px;
height:16px;
line-height:16px;
margin-top:8px;
color:#446cb3;
}

.sdk_docs_font:hover .on{
text-decoration:underline;
}  



.font_title{font-size: 32px; color: white;line-height: 20px;}
.font_h1{font-size: 18px;color: rgb(51,51,51);}
.font_y1{ font-size: 14px; color: rgb(89,89,89);}
.font_sign{ font-size: 18px; color: rgb(28,42,71);letter-spacing: 2px;line-height: 28px;}
.font_top{ font-size: 14px; color: rgb(255,255,255);letter-spacing: 2px;line-height: 25px;font-weight: bolder;}
.in_text{width: 200px;height: 18px;border: 1px solid rgb(157,172,203);}

.sign {
    width: 82px;
    height: 28px;
    background-color:#FFFFFF;
    border: 1px solid rgb(153,153,153);
    FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#C0C0C0);/*IE6*/
    background:-moz-linear-gradient(top,rgb(255,255,255),rgb(225,225,225));/*非IE6的其它*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255,255,255)), to(rgb(225,225,225)));/*非IE6的其它*/
    background:-o-linear-gradient(rgb(255,255,255), rgb(225,225,225));
    background:linear-gradient(rgb(255,255,255), rgb(225,225,225));
    text-align: center;
    cursor: pointer;
}
article,aside,dialog,figure,hgroup,nav,section {display:block;}

div{margin:0 auto;}
@font-face {
    font-family: 'juphoon';  
    src:url('../font/Lucida Grande.ttf') format('truetype');/*non-IE*/    
}
@font-face {
    font-family: 'juphoon title';  
    src:url('../font/klavikaregular-tf.otf') format('truetype');/*non-IE*/    
}

/***************  header ************/


  .juphoon_trademark{
    height: 36px;
    float: left;
    }
  .juphoon_trademark_on{
    height: 36px;
    float: left;
    background: rgb(26,60,108);
    }
  .tab_search{
    	border-bottom: rgb(98,122,173) 1px solid;
    	border-left: rgb(98,122,173) 1px solid;
    	height: 20px;
    	border-top: rgb(98,122,173) 1px solid;
    	border-right: rgb(98,122,173) 1px solid;
        background-color: white;
    }
    
    .searchinput{
    	border-right-width: 0px;
    	padding-left: 3px;
    	width:95%;
    	float: left;
    	border-top-width: 0px;
    	border-bottom-width: 0px;
    	border-right: rgb(226,226,226) 1px solid;
    	color: rgb(140,119,119);
    	margin-left: 4px;
    	font-size: 12px;
    	vertical-align: middle;
    	border-left-width: 0px;
    	margin-right:3px;
        outline: none;
    }
    
    .tab_search{
    	border-bottom: rgb(98,122,173) 1px solid;
    	border-left: rgb(98,122,173) 1px solid;
    	height: 25px;
    	border-top: rgb(98,122,173) 1px solid;
    	border-right: rgb(98,122,173) 1px solid;
        background-color: white;
    
    }
    .searchaction{
    	width: 13px;
    	float: left;
    	height: 13px;
    }
    .header_tri_on{
        float: right;
        height: 35px;
        width: 26px;
        border-top: 1px solid rgb(26,60,108);
        border-left: 1px solid rgb(26,60,108);
        border-right: 1px solid rgb(26,60,108);
        background: rgb(26,60,108);
        cursor: pointer;
        }
    .header_tri_out{
        float: right;
        height: 35px;
        width: 26px;
        border-top: 1px solid rgb(53,97,159);
        border-left: 1px solid rgb(53,97,159);
        border-right: 1px solid rgb(53,97,159);
        cursor: pointer;
        }
    .header_tri_onc{
        float: right;
        height: 35px;
        width: 26px;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
        background: rgb(255,255,255);
        cursor: pointer;
    }
    .triangle_out{
        margin-top: 16px;
        width: 0px;
        height: 0px;
        border-top: 7px solid rgb(216,222,234);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }
    .triangle_on{
        margin-top: 16px;
        width: 0px;
        height: 0px;
        border-top: 7px solid rgb(255,255,255);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }
    .triangle_onc{
        margin-top: 16px;
        width: 0px;
        height: 0px;
        border-top: 7px solid rgb(0,0,0);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }
    
    
    .footer_link{color: rgb(59,88,158);}
    a.footer_link:hover{text-decoration: underline;}
    
    
    a.app_un{
        
        font-size: 18px;
        color: rgb(59,88,158);
        line-height: 20px;
        }
    a.app_un:hover {
        text-decoration: underline;
        }
    .header_select_on{
        width: 100%;
        height: 100%;
        background: rgb(109,132,180);
        border-top: 1px solid rgb(60,90,144);
        border-bottom: 1px solid rgb(60,90,144);
        font-family: 'juphoon',tahoma;
        font-size: 14px;
        line-height: 16px;
        color: rgb(255,255,255);
        }
    .header_select_out{
        width: 100%;
        height: 100%;
        background: white;
        border-top: 1px solid rgb(255,255,255);
        border-bottom: 1px solid rgb(255,255,255);
        font-family: 'juphoon',tahoma;
        font-size: 14px;
        line-height: 16px;
        color: rgb(0,0,0);
        }
    .header_select_on span{
        color: rgb(255,255,255);
    }
    .header_select_out span{
        color: rgb(0,0,0);
    }
    .header_name_on{
        float: right;
        height: 36px;
        cursor: pointer;
        background: rgb(26,60,108);
    }
    .header_name_out{
        float: right;
        height: 36px;
        cursor: pointer;
        background: rgb(53,97,159);
    }
    .header_name_on span{
        color: rgb(255,255,255);
    }
    
    .header_name_out span{
        color: rgb(216,222,234);
    }
    
    .tr_setting_on{
        background: rgb(247,247,247);
        height: 34px;
        cursor: pointer;
    }
    
    .tr_setting_out{
        background: rgb(255,255,255);
        height: 34px;
        cursor: pointer;
    }
    .tr_setting_on span.setting_chakan{
        font-family: 'juphoon',tahoma;
        font-size: 13px;
        line-height: 34px;
        color: rgb(59,88,158);
        text-decoration: underline;
    }
    
    .tr_setting_out span.setting_chakan{
        font-family: 'juphoon',tahoma;
        font-size: 13px;
        line-height: 34px;
        color: rgb(59,88,158);
    }
    
    
    
    #graydiv {
        z-index: 1;
        background: rgb(253,253,253);
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        filter:alpha(opacity=50);
        opacity: 0.5;
        -moz-opacity: 0.5;
    }
    .graydiv{
        z-index: 1;
        background:#000000;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        filter:alpha(opacity=50);
        opacity: 0.5;
        -moz-opacity: 0.5;
    }
    
    .tm{filter:alpha(opacity=70);opacity: 0.7;-moz-opacity: 0.7;}
    .tmm{width: 94%;filter:alpha(opacity=70);opacity: 0.7;-moz-opacity: 0.7;}
    
    .tlyj{
        border-top: 5px solid rgb(108,108,108);
        border-left: 0px solid rgb(108,108,108);
        border-bottom: 5px solid rgb(108,108,108);
        background: rgb(108,108,108);
        -moz-border-bottom-left-radius: 10px;    
        -webkit-border-bottom-left-radius: 10px;   
        border-bottom-left-radius:10px;  
        -moz-border-top-left-radius: 10px;    
        -webkit-border-top-left-radius: 10px;   
        border-top-left-radius:10px;  
        /*
        -moz-border-top-right-radius: 10px;    
        -webkit-border-top-right-radius: 10px;   
        border-top-right-radius:10px;  
        */     
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    }
    
    .tryj{
        background: rgb(108,108,108);
        border-top: 5px solid rgb(108,108,108);
        border-right: 0px solid rgb(108,108,108);
        border-bottom: 5px solid rgb(108,108,108);
        
        -moz-border-bottom-right-radius: 10px;    
        -webkit-border-bottom-right-radius: 10px;   
        border-bottom-right-radius:10px;   
         /*
        -moz-border-top-left-radius: 10px;    
        -webkit-border-top-left-radius: 10px;   
        border-top-left-radius:10px;  
        */ 
       
        -moz-border-top-right-radius: 10px;    
        -webkit-border-top-right-radius: 10px;   
        border-top-right-radius:10px;  
            
        opacity: 0.7;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    }
    
    .font_st1{font-family: 'juphoon',tahoma;font-size: 12px;color: rgb(51,51,51);font-weight: bold;line-height: 120%;}
    .font_st7{font-family: 'juphoon',tahoma;font-size: 17px;color: white;line-height: 150%;font-weight: bold;}
    .font_st55{font-family: 'juphoon',tahoma;font-size: 12px;color: white;font-weight: bold;}
    
    #set{
        width:150px;
        margin-left:-125px;
        margin-top: -17px;
        background: white;
        position: absolute;
        border-bottom: 1px solid #333333;
        border-left: 1px solid #333333;
        border-right: 1px solid #333333;
    }
    
.on_font{
font-size:13px;
margin-left:30px;
line-height:28px;
color:#5890ff;
}
.on_font_b{
font-size:13px;
margin-left:30px;
line-height:28px;
color:#141823;
font-weight:bold;
}
.on_font_b:hover{
font-size:13px;
margin-left:30px;
line-height:28px;
color:#5890ff;
font-weight:bold;
}

.off_font{
font-size:13px; 
margin-left:30px;
line-height:28px;
color:#141823;
}
.on_font_1{
font-size:13px;
margin-left:40px;
line-height:28px;
color:#5890ff;
}
.off_font_1{
font-size:13px; 
margin-left:40px;
line-height:28px;
color:#141823;
}

/*  ---version--- */
.version_kuang{
width:770px;
margin-left:212px;
min-height:45px;
height:auto;
background:#ffffff;
border-left:1px solid #d2d6d8;
border-right:1px solid #d2d6d8;
border-bottom:1px solid #d2d6d8;
        -moz-border-bottom-left-radius: 5px;    
        -webkit-border-bottom-left-radius: 5px;   
        border-bottom-left-radius:5px;  
        -moz-border-bottom-right-radius: 5px;    
        -webkit-border-bottom-right-radius: 5px;   
        border-bottom-right-radius:5px;  
}

.xz_sdk_version{
float:left;
font-size:12px;
line-height:42px;
color:#1162c1;
margin-left:30px;
}

.xz_sdk_version:hover{
float:left;
font-size:12px;
line-height:42px;
color:#1162c1;
margin-left:30px;
text-decoration:underline;
}

.docs_docs_font{
float:left;
margin-left:17px;
font-size:12px;
height:16px;
line-height:16px;
margin-top:8px;
color:#446cb3;
}

.docs_docs_font:hover{
float:left;
margin-left:17px;
font-size:12px;
height:16px;
line-height:16px;
margin-top:8px;
color:#446cb3;
text-decoration:underline;
}

.sdk_background{
width:989px;
height:556px;
margin-top:20px;
background-image:url('../../../images/SDK_background.png');
}


.support_background{
width:989px;
height:476px;
margin-top:20px;
background-image:url('../../../images/support_background.png');
}

.bs_tm_kuang{
float:left;
width:110px;
height:110px;
text-align:center;
border:1px solid #ffffff;
background:#f6f7f7;
filter:alpha(opacity=32);
opacity: 0.32;
-moz-opacity: 0.32;
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;   
border-radius:5px;  
}
.bs_tm_kuang_1 {
float:left;
width:110px;
height:110px;
text-align:center;
background:#f44336;
border:1px solid #f44336;
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;   
border-radius:5px;  
}

.bs_tm_kuang_2{
float:left;
width:110px;
height:110px;
text-align:center;
background:#ffc107;
border:1px solid #ffc107;
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;   
border-radius:5px;   
}

.bs_tm_kuang_3{
float:left;
width:110px;
height:110px;
text-align:center;
background:#00bcd4;
border:1px solid #00bcd4;
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;   
border-radius:5px;   
}
.bs_tm_kuang_4{
float:left;
width:110px;
height:110px;
text-align:center;
background:#2196f3;
border:1px solid #2196f3;
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;   
border-radius:5px;   
}

.bs_tm_kuang_5{
float:left;
width:110px;
height:110px;
text-align:center;
background:#8bc34a;
border:1px solid #8bc34a;
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity: 0.9;
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;   
border-radius:5px;   
}


.contact_body{
width:990px;
height:260px;
margin-top:10px;
text-align:center;
border:1px solid #d2d6d8;
background:#ffffff;
-moz-border-radius: 5px;    
-webkit-border-radius: 5px;   
border-radius:5px;   

}