@charset "utf-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-family: tahoma;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a:hover{
	text-decoration: none;
}

.row{
	padding:0px auto;
	margin:0px
}
.container{
	margin:0px auto;
}

.col-md-1 , .col-md-2, .col-md-3 , .col-md-4 , .col-md-5 , .col-md-6 , .col-md-7 , .col-md-8 , .col-md-9 , .col-md-10, .col-md-11 , .col-md-12 {
	padding:0px;
	margin:0px;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

/*wrapper*/
.lds-dual-ring {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid blue;
  border-bottom: 6px solid blue;
  width: 80px;
  height: 80px;
  animation: lds-dual-ring 0.8s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

body{
	background:#5e6f91;
}
/* header */
#header{
	position:fixed;
    width:100%;
    z-index:99;
    background:#5e6f91;
    top:0
}
.sp_logo{
	padding:10px;
	float:left;
    z-index:9
}
.sp_logo img{
	height:60px;
	max-width:100%;
}

#menu_bar{
	margin-top:2%
}
.navbar-default{
	background:none;
	border:none;
}
.navbar{
	margin-bottom:0;
}
.navbar-default .navbar-nav>li>a{
	color:white;
	font-size:16px;
}

.navbar-default .navbar-nav>li>a:hover{
	color:#ff6936;
}
.navbar-nav{
	float:right;
}

/* content speed */
#content_speed{
	overflow:hidden;
	text-align:center;
    margin-top:85px;
    background:#ffffff;
}

#content_speed2{
    margin-top:80px;
}

#content_speed::after {
  opacity: 0.5;
}

#your_ip {
	
	font-size:1.5em;
}
.tv_Speed{
    width:200px;
    height:200px;
     display: table-cell;
    vertical-align: middle ;
    border-radius: 50%;
    background: #3d5173;
    color: white;
}
.sp_Unit{
	font-size:1.2em;
}

.cl_line_in p{
	border-bottom:1px solid #ababab;
}
.cl_line_in  h2{
	padding:12px;
}
.btn_start{
    margin-top:20px;
	padding:30px;
    padding-bottom:50px;
}
.btn_start a{
	padding:20px 50px;
	background:#3d5173;
	border-radius:20px;
	color:white;
	font-size:1.5em
}
.btn_start a:hover{background:#5e6f91}

#id_btn_click{
    display:none;
}

/* content app */
.content{
    padding-top:20px;
	padding-bottom:40px;
    background-color:#f0f0f0;
}

	
#l_title{
	width:100%;
	border-bottom:1px solid #00517e;
	padding:15px 0px;
}
#note_update{
	line-height:200%;
	overflow:hidden
}
#note_update img{
	float:left;
	padding:10px;
	
	margin-right:20px;
}
#note_update h1{
	overflow:hidden;
	margin-bottom:20px;
    margin-top:20px;
}

.i_daidien img{
	max-width:100%;
}

.i_sceen img{
    width:80%;
    height:auto;
}

#content_video{
    background:orange;
    text-align:center;
    padding:20px;
}

/* footer content */
#footer{
	padding:10px 0px 40px 0px;
	color:white;
	overflow:hidden;
	line-height:150%;
    font-size:14px
}

.f_title {
	text-transform:uppercase;
	padding:20px 0px;
	color:orange;
}

.f_title a{
	color:orange;
}

.f_title a:hover{
	color:white;
}

.f_key{
	color:#d8d8d8;
}
.f_key a{
	color:white;
	padding:5px;
	float:left;
}
.f_key a:hover{
	color:orange
}

/*#videopc{
    display:block
}
#videomobile{
    display:none;
}*/
#testinfo{
    text-align: left;
    overflow: hidden;
    padding: 10px;
    border: 1px solid #dadada;
}


/*Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {
	.navbar-default .navbar-toggle{
		margin-top:25px;
	}

    .navbar-default .navbar-toggle .icon-bar{
        background-color: #fff;
    }

	#content_speed{
		display:none;
	}
    /*#content{
        margin-top:85px;
    }*/

    .i_sceen img{
    width:100%;
    height:auto;
}
    
#id_btn_click{
    display:block;
    margin-top:85px;

}

/*#id_btn_click a{
    background:#ffffff;
    padding:20px;
    border-radius:20px;
    color:#115fa9;
}
#id_btn_click a:hover{
     background:#115fa9;
     color:white;
}*/

    /*#videopc{
    display:none
}
#videomobile{
    display:block;
}*/
}

/*screen*/
@media (min-width: 576px) {

}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	
}

/* Creates a wrapper for a series of columns */
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  /* // Negative margin nested rows out to align the content of columns */
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

/* // Generate the extra small columns */
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  /* // Prevent columns from collapsing when empty */
  min-height: 1px;
  /* // Inner gutter via padding */
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  /* // Calculate width based on number of columns available */
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

/* // Generate the small columns */
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  /* // Prevent columns from collapsing when empty */
  min-height: 1px;
  /* // Inner gutter via padding */
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  /* // Calculate width based on number of columns available */
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

/* // Generate the small column offsets */
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

/* // Generate the medium columns */
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  /* // Prevent columns from collapsing when empty */
  min-height: 1px;
  /* // Inner gutter via padding */
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  /* // Calculate width based on number of columns available */
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

/* // Generate the medium column offsets */
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

/* // Generate the large columns */
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  /* // Prevent columns from collapsing when empty */
  min-height: 1px;
  /* // Inner gutter via padding */
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  /* // Calculate width based on number of columns available */
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

/* // Generate the large column offsets */
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}