@charset "utf-8";
/* CSS Document */

body{ position:relative; left:0; }
body.body-nav{ left: 250px; }
body, #sidebar #nav-mobile, #header{ 
    -webkit-transition: left 600ms ease-in-out 0s;
    -moz-transition: left 600ms ease-in-out 0s;
    -o-transition: left 600ms ease-in-out 0s;
    transition: left 600ms ease-in-out 0s;
}
#sidebar #nav-mobile{
    margin: 0;
    position: fixed;
	left: -250px;
    top: 0;
    width: 249px;
	border-right:1px #e8e8e8 solid;
    z-index: 999999;
	overflow-y:auto;
	height:100%;
	background:#202020;
}
#nav-mobile.nav-visible { left: 0 !important; }

#nav #logo{ display:block; width:100%; margin:20px 0; text-align:center; }
#nav ul{ display:block; width:82%; margin:auto; }
#nav ul li{ border-bottom:1px #606060 solid; padding:7px 0 6px 10px; }
#nav ul li.current{ background-image:url(../images/nav-current.png); background-position:184px 8px; background-repeat:no-repeat; }
#nav ul li:first-child{ border-top:1px #606060 solid; }
#nav ul li a{ font-size:16px; }

#header{ height:auto; }
#header #menu-trigger{ display:block; padding:0 3%; float:left; border-right:1px #f2f3ed solid; width:7%; height:61px; text-align:center; }
#header #menu-trigger img{ margin:21px 0 0; height:20px; cursor:pointer; }
#header #lang{ width:15%; margin:auto; border-left:1px #f2f3ed solid; }
#header #lang span{ display:none; }
#header #lang a{ display:block; width:100%; text-align:center; margin:0; height:25px; padding-top:5px; }
#header #lang #lang-th{ border-bottom:1px #f2f3ed solid; }
#header #logo{ height:61px; margin:0; width:26%; text-align:right; }
#header #logo img{ height:20px; width:auto; margin:20px 5px 0 0; }
#header #support{ height:40px; width:45%; font-size:11px; margin:0; padding-top:21px; }

/*#slider{ height:70px; }
#slider .slides img{ height:70px; width:auto; }*/
#wrapper{ display:block; }
#sidebar #container{ padding: 15px 5%; }
#sidebar #icon-login{ display:none; }
#wrapper #icon-type{ z-index:5; }

#wrapper #icon-type{ position:absolute; top:10px; right:3%; display:block; width:70px; height:62px; background-repeat:no-repeat; background-position:0 0; }
#wrapper #icon-type:hover{ background-position:0 0; }
#wrapper .icon-type-1{ background-image:url(../images/type/diamond-mobile.png); }
#wrapper .icon-type-2{ background-image:url(../images/type/platinum-mobile.png); }
#wrapper .icon-type-3{ background-image:url(../images/type/gold-mobile.png); }
#wrapper .icon-type-4{ background-image:url(../images/type/software-mobile.png); }
#wrapper .icon-type-5{ display:none; }

#sidebar, #content{ display:block; width:100%; }

#building p{ display:none; }
#building #ip{ display:none; }
#sidebar-contact{ margin:40px auto 0; padding:0; width:85%; }
#sidebar-contact div{ font-size:12px; margin-bottom:9px; }
#sidebar-contact div img{ width:17px; margin-right:8px; }
#sidebar-contact div .msg_support_time{ font-size:13px; }
#sidebar-contact #email-support .msg_support_time{ padding-left:20px; }

#sidebar-jobs{ margin:40px auto 0; padding:0; width:85%; }
#sidebar-jobs div{ font-size:12px; margin-bottom:9px; }
#sidebar-jobs div img{ width:17px; margin-right:8px; }
#sidebar-jobs div .msg_support_time{ font-size:13px; }
#sidebar-jobs #email-support .msg_support_time{ padding-left:20px; }

#building h3{ width:100%; font-size:14px; margin:7px 0 0; }
#building #ip{ font-size:13px; }
#building p{ width:100%; font:500 12px Arial; margin-bottom:3px; }
#type{ display:none; padding:20px 0; }
#type h4{ text-align:center; }
#type ul{ display:block; width:190px; margin:10px auto 0; }
#type ul li div{ width:15px; height:15px; background:none; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; border-radius:15px; }

#login{ height:auto; padding:50px 0 30px; }
#login #form_login{ width:80%; padding-top:0; }
#login input[type="text"], #login input[type="password"]{ width:69%; padding:8px 15%; font-size:13px; }
#login input[type="submit"]{ width:100%; padding:8px 0; font-size:13px; }

#system{ margin-top:20px; }
#system h1, #system h2, #system #description, #status-isp .topic, #status-isp .left, #status-isp .right{ width:90%; }
#status-isp .topic h3{ font-size:16px; }
#status-isp .topic h4{ font-size:14px; }
#status-isp .left #icon-lan{ width:25px; }

#contact{ margin:auto; padding:50px 0; }
#contact .p label .th{ font-size:14px; }
#contact .p label .en{ font-size:12px; }
#contact #form_login{ width:90%; }
#contact input[type="text"], #contact textarea{ padding: 16px 5%; width:89%; }
#contact input[type="submit"]{ width:100%; }
#contact .p label{ left:5%; }

#info{ width:90%; margin:auto; padding:50px 0; }
#info h1{ font-size:15px; }
#info h2{ margin:10px 0 0; font-size:13px; }
#info p .introduct-th{ font-size:16px; }
#info p .introduct-en{ font-size:13px; }
#info input[type="text"]{ }

#help{ padding:50px 0; }
#help table{ width:96%; }
#help table thead tr th:nth-child(1){ width:23% !important; padding-right:2%; }
#help table thead tr th:nth-child(2){ width:73% !important; padding-right:2%; }
#help table thead tr th:nth-child(3), #help table thead tr th:nth-child(4), 
#help table tbody tr td:nth-child(3), #help table tbody tr td:nth-child(4){ display:none; }
/*#help table thead tr th .th{ font-size:14px; }
#help table thead tr th .en{ font-size:12px; }*/
#help table tbody tr td{ width:25%; }
#help table tbody tr td:nth-child(1){ font-size:13px; }
#help table tbody tr td:nth-child(2){ font-size:12px; }
#help table tbody tr td:nth-child(3) img, #help table tbody tr td:nth-child(4) img{ width:20px; }
#help table tbody tr td:nth-child(2) .mobile{ display:block; margin-top:15px; }
#help table tbody tr td:nth-child(2) .mobile a{ display:inline-block; margin-right:10px; }
#help table tbody tr td:nth-child(2) .mobile a img{ width:20px; }