html{
margin:0 auto;
}
body {
font-family : Arial, Verdana, Tahoma, Verdana;
font-size : 12px;
margin: 0;
overflow-x: hidden;
}
/** Area **/
#wrap {
padding: 0;
margin:0 auto;
width: 978px;
}
#wrapper {
margin:5px auto 0;
padding: 0;
color: #000;
width: 946px;
background: #fff;
}
#bgleft {
background: url(../images/bgleft.png) top left repeat-y;
width:19px;
}
#bgright {
background: url(../images/bgright.png) top left repeat-y;
width:19px;
}
#mc {
width: 946px;
padding: 0 5px;
background: #fff;
}
#left {
width: 220px;
max-width: 220px;
min-width: 220px;
padding: 0;
background: #fff;
border-top: 0;
}
#right {
width:275px;
max-width:275px;
padding: 0;
border: 0;
}
#left li,
#right li {
font: 11px Arial, Verdana;
}
#nav {
height: 18px;
padding: 3px 0 5px 20px;
background: url(../images/nav-home.gif) 0 3px no-repeat;
border-bottom: 1px solid #eee;
}
#main {
margin: 0;
padding: 0;
color: #000;
border: 0;
min-height: 380px;
width: 100%;
}
#header {
width: 946px;
padding: 0;
margin: 0 auto;
background: #fff;
z-index:8000;
}
#header #logo {
float: left;
padding: 0;
}
#header #banner {
float: left;
padding-top: 16px;
}
#fr {
position: relative;
right:0;
top: 0;
padding: 15px 0 0;
float: right;
}
#lang {
text-align: right;
margin: 0;
display: block;
padding: 5px;
margin: 5px 0;
}
#topnav {
color: #444;
}
#topnav a {
color: #000;
}
#topnav a:hover {
color: #000;
text-decoration: underline;
}
#lang img {
vertical-align: middle;
padding-right: 5px;
}
#searchfrm {
position: relative;
float: right;
right: 0;
padding: 2px;
margin: 0;
background:#999999;
}
#searchfrm form {
padding: 0;
margin: 0;
}
#searchfrm #skw{
background:#FFFFFF;
color:#000000;
border: 1px solid #FFFFFF;
font: 12px Arial;
}
#searchfrm #sbt{
color: #FFFFFF;
background: #FF9900;
border: 1px solid #FF9900;
padding: 1px 5px;
font: 12px Arial;
font-weight:bold;
}
#top{
width: 937px;
height: auto;
}
.fixed {
top:0px;
}
#menu {
font: 11px Arial;
color: #fff;
width: 940px;
height: 30px;
background: #b0770c;
padding: 0;
border: 0;
margin: 0;
}
#header span a {
margin: 0;
padding: 0;
font: bold 11px Tahoma;
}
#bottom {
width: 980px;
height: 38px;
margin: 0 auto;
padding:0;
background: url(../images/bottom.jpg) top left no-repeat;
z-index:10;
}
#foot {
width: 920px;
margin: 0 auto;
padding: 5px 0;
color: #666;
font: normal 12px Arial,Helvetica,Verdana;
}
#foot a:link,
#foot a:visited {
color: #666;
}
#foot a:hover {
color: #c00;
}
#foot div {
padding: 3px 0;
margin: 0;
line-height: 150%;
}
#foot span{
float: right;
text-align: right;
}
#foot strong{
}
#powered {
width: 960px;
margin: 0 auto;
}
#powered span{
float: right
}
#powered,
#powered a{
color: #666;
font: normal 11px Arial;
margin-top: 10px;
padding: 0;
}
#hd-h {
border-top: 2px solid #005c9f;
padding: 0;
margin: 0;
width: 272px;
}
#hd-h h4 {
font: bold 11px Tahoma;
color: #005d9d;
line-height: 18px;
text-transform: uppercase;
}
#hd-h h4 span {
color: #666;
}
/** /Area **/
/** Global **/
.clr {
clear: both;
height: 1px;
overflow: hidden;
}
.fr {
float: right;
}
.t {
padding: 5px 0;
font: bold 12px Arial, Verdana, Tahoma;
color: #333;
}
.t a:link,
.t a:visited {
display: block;
font: bold 12px Arial, Verdana, Tahoma;
color: #333;
}
.t a:hover {
display: block;
font: bold 12px Arial, Verdana, Tahoma;
color: #ff9138;
}
.d {
color: #666;
font: 12px Arial, Verdana;
padding-bottom: 5px;
}
.xd {
color: #666;
font: 12px Arial, Verdana;
padding: 6px;
}
.m {
text-align:right;
}
.j {
text-align:justify;
}
table, tr, td, li {
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
}
fieldset legend {
font: bold 11px Arial, Verdana, Tahoma;
}
fieldset {
margin: 6px 3px 0 0;
color: #eee;
padding: 3px;
}
em {
color: #555;
font: 11px Arial;
font-style: italic;
}
a:link, a:visited, a:active {
color : #a27c08;
text-decoration : none;
}
a:hover {
color : #000;
text-decoration : none;
}
h1, h2, h3, h4 , h5, h6{
margin : 0px;
}
h1 {
font : bold 18px Arial, Helvetica, sans-serif;
text-transform : none;
color : #000;
text-decoration : none;
padding: 2px 0px;
}
h2 {
font : bold 14px Arial, Helvetica, sans-serif;
text-transform : none;
color : #111;
text-decoration : none;
}
h3 {
padding: 3px 0px;
line-height: 22px;
font: bold 15px Arial, Verdana, Tahoma;
}
h3 a:link, h3 a:visited, h3 a:active {
font: bold 15px Arial, Verdana, Tahoma;
text-transform : none;
text-decoration : none;
}
h3 a:hover {
font: bold 15px Arial, Verdana, Tahoma;
text-decoration: none;
}
h4 {
font : bold 16px Arial, Helvetica, sans-serif;
text-transform : none;
color : #d00;
padding: 2px 0px;
}
h5 {
font : bold 14px Arial, Helvetica, sans-serif;
text-transform : none;
color : #d00;
padding: 2px 0px;
margin: 0;
}
h6 {
font : bold 12px Arial, Helvetica, sans-serif;
text-transform : none;
padding: 2px 0px;
}
ul {
padding: 0 0 0 20px;
margin: 0;
}
li {
padding: 2px 0;
}
.new {
font-weight: bold;
color: #F00;
}
.c {
text-align: center;
}
.u {
text-decoration: underline;
}
.padding6 {
padding: 6px;
line-height: 18px;
}
.b {
font-weight: bold;
}
.inlineimg {
vertical-align : middle;
}
img {
border : 0;
}
.nopage {
color : #888;
background : #ccc;
border : 1px solid #ccc;
padding : 1px 5px 1px 5px;
}
.pagelink {
color : #bbb;
background : #202020;
border : 1px solid #4f4f4f;
padding : 2px 5px;
}
.pagelink a:hover {
color : #f00;
}
.pagecurrent {
color : #000;
background : #fff;
border : 1px solid #4f4f4f;
font-weight : bold;
padding : 2px 5px;
}
#partner {
margin: 5px auto;
width: 914px;
}
#partner div {
background: #eee;
padding: 5px;
}
#partner h3 {
font: bold 12px Arial;
text-transform: uppercase;
color: #020070;
padding: 6px 2px 6px 20px;
background: url(../images/box-h3.gif) 0 5px no-repeat;
}
#partner a {
margin: 0 5px;
}
/** /Global **/
.box {
width: 648px;
max-width: 648px;
padding: 0;
margin: 0;
color: #333;
background:#fff;
}
.box h3 span {
color: #666;
}
.box h3 {
font: bold 15px Arial, Verdana, Tahoma;
color: #000000;
height:22px;
background:url(../images/icon_course_detail.png);
margin: 5px 6px 5px 0;
padding:0px 0px 10px 0px!important;
}
.box h3 a:link,
.box h3 a:visited {
font: bold 15px Arial, Verdana, Tahoma;
color: #000000;
}
.box h3 a:hover {
font: bold 15px Arial, Verdana, Tahoma;
color: #ff9138;
}
.rbox {
width: 264px;
max-width: 264px;
padding: 0;
margin: 0;
color: #333;
background:#fff;
border: 1px solid #ff9138;
}
.rbox h3 {
font: bold 12px Arial;
text-transform: uppercase;
color: #fff;
background: #ff9138 url(../images/rbox.gif) repeat-x;
margin: 0;
padding: 6px;
}
.rbox h3 a:link,
.rbox h3 a:visited {
font: bold 13px Arial;
color: #fff;
}
.rbox h3 a:hover {
font: bold 13px Arial;
color: #000;
}
.box-ctn {
padding: 0px 3px;
}
.box-ctn ul{
list-style: none;
padding: 3px 0 3px 6px;
}
.box-ctn ul li a{
padding: 3px 0;
}
.box-ctn ul li a:link,
.box-ctn ul li a:visited{
color: #333;
padding: 3px 0 3px 9px;
background: url(../images/dd.gif) 0 9px no-repeat;
}
.box-ctn ul li a:hover{
color: #ff9138;
padding: 3px 0 3px 9px;
background: url(../images/dd.gif) 0 9px no-repeat;
}
.boxr-t {
border-top:2px solid #a27c08;
width: 330px;
max-width: 330px;
padding: 0;
margin: 5px 0 0;
color: #333;
}
.boxr-b {
width: 220px;
height: 3px;
background: #fff url(../images/boxr-b.jpg) repeat-x;
font-size: 0px;
}
.boxr-f {
background: #efefef;
text-align: right;
height: 24px;
line-height: 24px;
}
.boxr-f {
margin-right: 10px;
vertical-align: middle;
}
.boxr {
border-top:2px solid #a27c08;
width: 275px;
max-width: 275px;
padding: 0;
margin: 5px 0 0;
color: #333;
}
.boxr h3 {
font: bold 12px Arial;
text-transform: uppercase;
color: #a27c08;
padding: 6px 0;
}
.boxr h3 span {
color: #666;
}
.boxr h3 a:link,
.boxr h3 a:visited {
font: bold 13px Arial;
color: #a27c08;
text-transform: uppercase;
}
.boxr h3 a:hover {
font: bold 13px Arial;
color: #000;
text-transform: uppercase;
}
.boxr-ctn {
background: #efefef;
padding: 3px;
}
.boxr-ctn table {
background: #fff;
border-bottom: 2px solid #efefef;
}
/** Index **/
#idx {
font-family : arial, helvetica, sans-serif;
font-size : 11px;
width: 690px;
}
.fm {
font: normal 11px Tahoma, Arial, Verdana, Sans-serif;
color: #999;
background: #fff;
border: 0;
padding: 1px 5px;
}
.fmm {
font: normal 12px Arial, Verdana, Sans-serif;
color: #111;
background: #fff;
border: 1px solid #888;
padding: 3px 5px;
}
.fme {
font: normal 12px Arial, Verdana, Sans-serif;
color: #f00;
background: #fde8e8;
border: 1px solid #f00;
padding: 3px 5px;
}
.bt {
font: normal 11px Tahoma, Arial, Verdana, Sans-serif;
color: #000;
background: #eee;
border: 1px solid #888;
padding: 3px 5px;
margin: 1px 0;
}
a.bt:link,
a.bt:visited {
color: #000;
}
a.bt:hover {
color: #c00;
}
#caps {
text-transform : uppercase;
}
.banner {
padding : 2px;
}
.ordtr {
font: bold 11px Tahoma;
color : #fff;
border-bottom : 1px solid #ccc;
height : 14px;
}
.tdbrd {
color : #333333;
border-top : 1px solid #ccc;
border-bottom : 1px solid #ccc;
height : 14px;
padding : 2px;
}
.hrbrd {
color : #333333;
border-bottom : 1px solid #ccc;
}
.time {
font : normal 11px Tahoma;
color : #888;
}
#navi {
padding: 4px 0;
}
#navi span {
float: right;
}
.thumb {
margin: 0 4px 4px 0;
}
.thumb a img {
padding: 0;
border: none;
margin: 0;
}
.mrgt3 {
margin-top: 3px;
}
.mrgt5 {
margin-top: 5px;
}
.pad3 {
padding: 3px;
}
.pad5 {
padding: 5px;
}
.poll {
}
.poll ul {
margin: 0;
padding: 3px;
}
.poll li {
margin: 0;
}
.poll li span {
float: right;
}
.red {
color: #F00;
}
.message {
width: 600px;
font-family: Verdana;
font-size: 12px;
padding: 10px;
border: 2px solid #ddd;
background-color: #eee;
color: #222;
}
.notice {
border-color: #FFD324;
background: #FFF6BF;
color: #817134;
}
.success {
border-color: #C6D880;
background: #E6EFC2;
color: #529214;
}
.error {
border-color: #FBC2C4;
background: #FBE3E4;
color: #D12F19;
}
#detail {
color: #000;
font-family: Arial;
font-size: 12px;
text-align: justify
}
.pad3 {
padding: 3px;
}
#page {
margin: 5px auto;
}
a.page {
font: normal 11px Tahoma;
color: #ccc;
border: 1px solid #ccc;
padding: 3px 6px;
}
a.page:hover {
font: normal 11px Tahoma;
color: #c00;
border: 1px solid #c00;
padding: 3px 6px;
}
#current-page {
font: bold 11px Tahoma;
color: #c00;
border: 1px solid #c00;
padding: 3px 6px;
}
#seo {
margin-top: 10px;
font: 11px Arial;
color: #ccc;
width: 960px;
margin: 0 auto;
}
#seo strong {
font-weight: normal;
}
.sx img{
width: 272px;
border: 0;
margin: 0;
padding: 3.5px 0;
}
.item-cat ul {
margin: 0 0 0 22px;
padding: 3px 0;
list-style: circle;
}
.item-cat ul li {
font: 12px Arial;
}
#item-tool {
line-height: 18px;
font: 11px Arial;
color: #333;
text-align: right;
margin-top: 5px;
padding: 4px 0 4px;
}
#item-other {
line-height: 18px;
font: 11px Arial;
color: #333;
margin-top: 5px;
padding: 4px 0 4px;
background: url(../images/item-other.jpg) top left no-repeat;
}
#item-other h6 {
margin: 0;
font: bold 13px Verdana;
color: #000;
}
#item-other ul {
margin: 0 0 0 6px;
list-style: square;
}
#item-other ul li{
padding: 2px 0;
font: 12px Arial;
}
#item-detail {
margin-top: 5px;
padding-right: 5px;
text-align: justify;
min-height: 320px;
}
.item-cat-more {
text-align: right;
font: 11px Arial;
}
.item-cat-more ,
.item-cat-more a{
color: #666;
}
.item-cat-more a:hover{
color: #000;
}
.n {
background: #eee;
font: bold 13px Verdana;
padding: 2px 5px;
margin-top: 2px;
}
.item-short {
font: 12px Arial;
}
.f {
color: #000;
background: #eee;
border: 1px solid #ccc;
}
.fe {
color: #D8000C;
background: #FFBABA;
border: 1px solid #D8000C;
}
.inf_error {
color: #f00;
font: bold 11px Tahoma;
}
#IdxSlide { z-index: 10; }
#rbox {
border: none;
padding: 0px;
background: #F0F2F3 url(../images/rbox-bg.jpg) bottom right no-repeat;
}
#rbox h3{
font: bold 11px Tahoma, Verdana;
text-transform: uppercase;
padding: 5px 3px;
color: #c19305;
border:none;
border-bottom: 1px solid #e2d6b1;
}
#rbox-ctn {
padding: 5px 2px;
color: #000;
}
#cbox {
border: none;
padding: 0;
background: #fff;
margin: 5px 0;
width: 946px;
}
.bbox {
border: 1px solid #e2e2e2;
padding: 3px;
height: 60px;
}
.bbox h3{
color: #3d7dab;
padding: 3px 5px;
font: bold 12px Tahoma;
margin: 0;
text-transform: uppercase;
}
#rbox-ctn {
padding: 5px 3px;
}
#rbox-ctn ul{
list-style: none;
padding: 3px 0 3px 6px;
}
#rbox-ctn ul li {
color: #000;
list-style: none;
font: normal 12px Arial,Verdana;
}
#rbox-ctn ul li a{
padding: 3px 0;
font: normal 12px Arial,Verdana;
}
#rbox-ctn ul li a:link,
#rbox-ctn ul li a:visited{
color: #000;
padding: 3px 0 3px 12px;
font: normal 12px Arial,Verdana;
background: url(../images/dd.gif) 0 9px no-repeat;
}
#rbox-ctn ul li a:hover{
color: #000;
text-decoration: underline;
padding: 3px 0 3px 12px;
font: normal 12px Arial,Verdana;
background: url(../images/dh.gif) 0 9px no-repeat;
}
#enrol{
background: url(../images/enrol.png) no-repeat;
width: 266px;
height: 37px;
}
#rightnew{
width: 266px;
}
#location{
background: url(../images/training-locations.png) no-repeat;
width: 266px;
height: 37px;
width: 100% !important;
background-size: 100% 100%;
}
#callback{
background: url(../images/call_us.png) right top scroll no-repeat;
width: 266px;
height: 27px;
padding: 0;
}
#advval{
background: url(../images/enrol.png) right top scroll no-repeat;
width: 266px;
height: 27px;
padding: 0;
}
#contactus{
background: url(../images/contact_us.png) right top scroll no-repeat;
width: 266px;
height: 27px;
max-height: 27px;
padding: 0;
}
#video{
background: url(../images/video.png) right top scroll no-repeat;
width: 266px;
height: 27px;
padding: 0;
}
#downloadbrochure{
background: url(../images/study_materials.png) right top scroll no-repeat;
width: 266px;
height: 27px;
padding: 0;
}
#enrol h3,
#location h3,
.usefullink h3,
.usefullink2 h3,
#advval h3,
#downloadbrochure h3,
#contactus h3,
#video h3,
#callback h3{
font: bold 13px Arial;
color: #fff;
padding: 6px 0 0 30px;
margin: 0;
}
#enrol h3 a,
#location h3 a,
.usefullink h3 a,
.usefullink2 h3 a,
#advval h3 a,
#downloadbrochure h3 a,
#contactus h3 a,
#video h3 a,
#callback h3 a{
color: #fff;
margin: 0;
padding: 0;
}
.usefullink{
background: url(../images/useful_info.png) right top scroll no-repeat;
width: 266px;
height: 27px;
padding: 0;
}
.usefullink2{
background: url(../images/useful_info2.png) right top scroll no-repeat;
width: 200px;
height: 27px;
padding: 0;
}
.ulink{
background: url(../images/useful_info.png) left bottom scroll no-repeat;
min-height: 100px;
padding-bottom: 10px;
width: 266px;
}
.ulink div {
width: 262px;
max-width: 262px;
padding: 5px 0;
}
.ulink2{
background: url(../images/useful_info2.png) left bottom scroll no-repeat;
min-height: 100px;
padding-bottom: 10px;
width: 200px;
}
.ulink2 div {
width: 196px;
max-width: 196px;
padding: 5px 0;
}
#clink{
background: url(../images/contact_us.png) left bottom scroll no-repeat;
min-height: 100px;
padding-bottom: 10px;
width: 266px;
}
#cvideo{
min-height: 100px;
padding: 10px 0;
}
#banner{
margin-top: 6px;
}
#catet {
background: url(../images/cate-t.jpg) no-repeat;
width: 210px;
height: 9px;
}
#cateb {
background: url(../images/cate-b.jpg) no-repeat;
width: 210px;
height: 9px;
}
#cate {
background: #cfcfcf;
border-left: 1px solid #cfcfcf;
border-right: 1px solid #cfcfcf;
padding: 0;
margin: 0;
max-width: 208px;
}
#cate ul {
list-style:none;
padding: 0;
margin: 0;
}
#cate ul li ul{
list-style:none;
margin: 0;
padding: 0;
}
#cate ul li,
#cate ul li a {
margin: 0;
padding: 0;
font: normal 11px Tahoma,Arial;
}
.r1 a:link,
.r1 a:visited{
list-style:none;
margin: 0;
padding: 5px 5px 3px 12px;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #b8b8b8;
display: block;
color: #000;
background: #cfcfcf;
font: bold 11px Tahoma,Arial;
}
.r1 a:hover{
list-style:none;
margin: 0;
padding: 5px 5px 3px 12px;
color: #8d6d09;
background: #f6df9c;
border-top: 1px solid #f3e4b8;
border-bottom: 1px solid #e7cd81;
display: block;
font: bold 11px Tahoma,Arial;
}
.r2 a:link,
.r2 a:visited{
font: normal 11px Tahoma,Arial;
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #d2d1d1;
color: #000;
background: #dfdede;
display: block;
padding: 5px 5px 3px 12px;
}
.r2 a:hover{
font: normal 11px Tahoma,Arial;
color: #8d6d09;
background: #f6df9c;
border-top: 1px solid #f3e4b8;
border-bottom: 1px solid #e7cd81;
}
.r3 a:link,
.r3 a:visited{
font: normal 11px Tahoma,Arial;
border-top: 1px solid #f3efef;
border-bottom: 1px solid #dedddd;
background: #e9e9e9;
color: #000;
display: block;
padding: 5px 5px 3px 12px;
}
.r3 a:hover{
font: normal 11px Tahoma,Arial;
color: #8d6d09;
background: #f6df9c;
border-top: 1px solid #f3e4b8;
border-bottom: 1px solid #e7cd81;
display: block;
padding: 5px 5px 3px 12px;
}
.r1active a:link,
.r1active a:visited,
.r1active a:hover,
.r2active a:link,
.r2active a:visited,
.r2active a:hover,
.r3active a:link,
.r3active a:visited,
.r3active a:hover{
font: 11px Tahoma,Arial;
color: #8d6d09;
background: #f6df9c;
border-top: 1px solid #f3e4b8;
border-bottom: 1px solid #e7cd81;
display: block;
padding: 5px 5px 3px 12px;
}
/*Sidebar clip*/
div.sc_menu {
position: relative;
height: 100px;
width: 250px;
overflow: auto;
margin: 0 0 5px 5px;
}
ul.sc_menu {
display: block;
height: 110px;
width: 532px;
padding: 5px 0 0 5px;
margin: 0;
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
display: block;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu span {
display: none;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #111111;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 3px #fff solid;
width: 70px;
height: 70px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.sc_menu a:hover img {
filter:alpha(opacity=50);
opacity: 0.5;
}
#courseform {
background: url(../images/register.jpg) top right no-repeat;
}
#allfloatzone {
max-width: 1280px;
overflow: hidden;
}
#floatLeft {
position: fixed; width: 150px; float: left; left: 0; bottom: 70px;
}
#floatRight {
position: fixed; width: 150px; float: right; right: 0; bottom: 70px;
}
.detail_content_news{
line-height:20px;
}
.detail_content_news img{
border:1px solid #999999;
padding:1px;
}
#Promotion
{
width:auto;
height:auto;
position:absolute;
overflow:hidden;
z-index:100000;
background-repeat:repeat-x;
margin-left:0px;
border:1px solid #CCCCCC;
}
#BannerBottom
{
position:absolute;
z-index:2000;
}
.WP
{
padding: 0px;
background:none;
color:#000000;
z-index:3000;
}
.p-link-title a:link, a:visited, a:active {
color : #000;
text-decoration : none;
}
.p-link-title a:hover {
color : #ff9138;
text-decoration : none;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:auto;
width:auto;
z-index:1000;
padding:7px;
font-size:13px;
}
#popupContact div{ text-align:right;}
#popupContact h1{
text-align:left;
color:#096;
font-size:18px;
font-weight:700;
border-bottom:1px dotted #CCC;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:12px;
line-height:16px;
right:6px;
top:4px;
color:#ffffff;
font-weight:700;
}
#button{
text-align:center;
margin:100px;
}
/* slider layout */
.lof-slidecontent { position:relative; overflow:hidden; border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.lof-slidecontent .preload div{ height:100%; width:100%; background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}
.lof-slidecontent .sliders-wrapper{ position:relative; height:100%; width:100%; z-index:3px; overflow:hidden; }
.lof-slidecontent ul.sliders-wrap-inner{overflow:hidden; padding:0px; margin:0; position:absolute; overflow:hidden;}
.lof-slidecontent ul.sliders-wrap-inner li{overflow:hidden; padding:0px;margin:0px; float:left; position:relative;}
.lof-slidecontent .lof-opacity li{position:absolute; top:0; left:0; float:inherit; }
.lof-slidecontent .navigator-content {position:absolute; bottom:10px; right:10px;
background:url(../images/transparent_bg.png) repeat;
padding:5px 0px;
}
.lof-slidecontent .navigator-wrapper{ position:relative; z-index:10;
height:180px;
width:310px;
overflow:hidden;
color:#FFF;
float:left
}
.lof-slidecontent ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
.lof-slidecontent ul.navigator-wrap-inner li{ cursor:hand; cursor:pointer; list-style:none; padding:0; margin-left:0px; overflow:hidden; float:left; display:block; text-align:center;}
/*******************************************************/
ul.sliders-wrap-inner li img{ padding:0px; }
.lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; }
.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
z-index:100px;
position:absolute;
bottom:50px;
left:0px;
width:350px;
background:url(../images/bg_trans.png);
height:100px;
padding:10px;
color:#FFF;
}
.lof-slidecontent .slider-description h4 { font-size: 14px; margin: 10px 0; padding: 0; }
.lof-slidecontent .slider-description .slider-meta a{
margin:0;
background:#C01F25;
font-size:75%;
padding:2px 3px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
text-transform:uppercase;
text-decoration:none
}
.lof-slidecontent .item-meta a:hover{ text-decoration:underline;}
.lof-slidecontent .item-meta i { font-size:70%; }
/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li img{
border:#666 solid 3px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active img,
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
border:#A8A8A8 solid 3px;
-moz-transition:border-color ease-in-out 0.4s
}
.lof-slidecontent .navigator-content .button-next,
.lof-slidecontent .navigator-content .button-previous{
display:block;
width:22px;
height:30px;
color:#FFF;
cursor:pointer;
}
.lof-slidecontent .navigator-content .button-next {
float:left;
text-indent:-999px;
margin-right:5px;
background:url(../images/arrow-l.png) no-repeat right center;
}
.lof-slidecontent .navigator-content .button-previous {
float:left;
text-indent:-999px;
margin-left:5px;
background:url(../images/arrow-r.png) no-repeat left center;
}
.lof-slidecontent .button-control {
position:absolute;
top:10px;
right:10px;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
background:url(../images/transparent_bg.png) repeat;
}
.lof-slidecontent .button-control span { display:block; width:100%; height:100%;}
.lof-slidecontent .action-start span {
background:url(../images/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
background:url(../images/pause.png) no-repeat center center;
}
.objectContainer {
position: relative;
width: auto;
}
.objectContainer a {
display: block;
position: absolute;
width: 140px;
height: 400px;
z-index: 5;
top: 0px;
left: 0px;
}
/*---------------------------------------------------------------*/
table#wrap {
width: 100%;
}
.lof-slidecontent {
width: 100% !important;
height: auto !important;
}
.main-slider-content {
width: 100% !important;
height: 650px !important;
}
.lof-slidecontent .sliders-wrapper {
width: 100% !important;
}
ul.sliders-wrap-inner li {
width: 100% !important;
}
ul.sliders-wrap-inner li img {
width: 100%;
height: auto;
}
td#bgright {
display: none;
}
td#bgleft {
display: none;
}
td#mc {
padding: 0;
width: auto;
}
#top {
margin: 0 auto -5px;
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
}
#header {
width: 100%;
}
.lof-slidecontent ul.sliders-wrap-inner {
display: flex;
height: 100%;
}
div#back-top {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
div#back-top #wrapper {
width: 100%;
display: flex;
}
div#back-top #wrapper > div:first-child {
width: calc(100% - 20px) !important;
zoom: 1.25;
padding: 0 20px 0 0;
}
div#back-top #wrapper #rightnew {
flex: 0 0 30%;
zoom: 1.25;
}
.navigator-content .button-next, .navigator-content .button-previous {
font-size: 0;
}
body {
font-size: 0;
}
ul.dropdown {
width: 100% !important;
}
ul.dropdown li.dir div, ul.dropdown li.dir div a:link, ul.dropdown li.dir div * {
font-size: 15px !important;
}
#logo span:first-child img {
width: 250px;
height: auto;
}
#logo span:last-child img {
width: 100%;
height: auto;
max-width: 500px;
}
#fr {
padding: 16px 0 0;
zoom: 1.6;
}
#bottom {
display: none;
}
#header span a {
display: block;
}
.ad_float {
display: none !important;
}
ul.dropdown li.dir:hover b {
color: #000;
}
ul.dropdown {
display: flex;
}
ul.dropdown li.dir {
flex: auto;
}
#topnav ~ ul > table:nth-child(odd) td {
background: #02657F !important;
color: #fff !important;
}
.phone-mobile {
display: block;
}
.giuseart-nav {
position: fixed;
right: 13px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
bottom: 13px;
padding: 10px 0 0;
border: 1px solid #bbb;
}
.giuseart-nav ul {list-style: none;padding: 0;margin: 0;}
.giuseart-nav ul li {list-style: none!important;}
.giuseart-nav ul>li a {
border:none;
padding: 3px;
display: block;
border-radius: 5px;
text-align: center;
font-size: 10px;
line-height: 15px;
color: #515151;
font-weight: 700;
max-width: 72.19px;
max-height: 54px;
text-decoration: none;
}
.giuseart-nav ul>li .chat_animation{display:none}
.giuseart-nav ul>li a i.ticon-zalo-circle2 {
background: url(https://test.afc.edu.vn/images/zalo.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.giuseart-nav li .button {
background: transparent;
}
.giuseart-nav ul>li a i.ticon-angle-up {
background: url(https://test.afc.edu.vn/images/totop.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.giuseart-nav ul>li a i {
width: 33px;
height: 33px;
display: block;
margin: auto;
}
.giuseart-nav ul>li a.chat_animation svg {
margin: -13px 0 -20px;
}
.giuseart-nav ul li .button .phone_animation i {
width: 36px;
height: 36px;
}
.giuseart-nav ul>li a i.ticon-messenger {
background: url(https://test.afc.edu.vn/images/mess.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.giuseart-nav ul>li a i.icon-phone-w {
background: url(https://test.afc.edu.vn/images/icon-phone.jpg) no-repeat;
background-size: contain;
}
.f22 {
display: flex;
flex-direction: column;
}
.f22 > div {
width: auto !important;
}
.f24 {
width: 100% !important;
display: flex;
flex-direction: column;
}
.f24 span {
float: left !important;
}
.f25 .f26 {
height: auto !important;
}
.f25 > div:last-child {
width: 100% !important;
font-size: 18px;
}
.f25 {
display: flex;
flex-wrap: wrap;
}
.f23 img {
margin: 0 auto;
display: table;
}
.f24 > div {
display: none;
}
.f24 > p:nth-child(9), .f24 > p:nth-child(10), .f24 > p:nth-child(8), .f24 > p:nth-child(3), .f24 > p:nth-child(1), .f24 > p:nth-child(12), .f24 > p:nth-child(19) {
display: none;
}
div#location ~ a > img {
width: 100% !important;
}
.usefullink.mrgt5 {
width: 100%;
background: #999;
border-radius: 5px 5px 0 0;
}
.usefullink.mrgt5 h3 {
padding: 6px;
}
.ulink {
width: calc(100% - 5px);
background: none;
border: 3px solid #999;
border-radius: 0 0 5px 5px;
}
div#load_tweets ~ a > img {
width: 100%;
}
.c img {
width: 100%;
}
.f2 {
width: 100% !important;
margin: 0 !important;
display: flex;
}
div#foot {
width: 100%;
}
.f2 > .f3 {
width: auto !important;
flex: 1;
overflow: hidden;
padding: 0 !important;
border: 1px solid #02657F !important;
}
.f3 h2 {
width: 100% !important;
margin: 0 !important;
background: #02657F !important;
}
.f21 {
display: flex;
}
.f21 > div {
flex: auto;
width: auto !important;
}
.f32 {
zoom: 1.3;
}
.c:not(.thumb) {
position: relative;
height: 40px;
background: #02657F;
display: flex;
align-items: center;
padding: 0 15px;
font-size: 15px;
color: #fff;
}
.c:not(.thumb) img {
display: none;
}
.c:not(.thumb):before {
content: "AFC FINANCE";
font-weight: 700;
}
.f8 marquee {
width: 100% !important;
position: absolute;
left: 0;
}
.f8 marquee img {
width: 135px;
height: 100px;
}
.f8 {
padding-top: 55px;
}
.f8 marquee ~ div {
padding-top: 115px !important;
}
.f3 h2 a {
color: #fff !important;
}
.content_document ~ div, p.news_diff ~ div {
width: 100% !important;
}
#txt_Rating .clr ~ a > img {
width: auto;
}
.lof-slidecontent ul.sliders-wrap-inner video {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/*----------------------res------------------------*//*----------------------res------------------------*/
/*----------------------res------------------------*//*----------------------res------------------------*/
/*----------------------res------------------------*//*----------------------res------------------------*/
@media (max-width: 1367px) {
.main-slider-content {
height: 470px !important;
}
ul.dropdown li.dir div, ul.dropdown li.dir div a:link, ul.dropdown li.dir div * {
font-size: 13px !important;
}
}
@media (max-width: 1025px) {
.main-slider-content {
height: 400px !important;
}
div#lang {
zoom: 0.7;
position: absolute;
top: 0px;
right: 10px;
text-align: center;
}
div#fr {
position: static;
}
div#fr #topnav {
display: none;
}
div#lang b {
width: 100%;
display: block;
margin: 0 0 5px;
}
#logo span:first-child img {
width: 100%;
max-width: 250px;
}
#logo span:last-child img {
max-width: 370px;
}
#header {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row-reverse;
padding: 0 12px;
}
#logo span:last-child img {
max-width: 310px;
}
div#back-top #wrapper > div:first-child {
flex: unset;
width: 100% !important;
zoom: 1;
}
div#back-top #wrapper #rightnew {
flex: unset;
zoom: 1;
}
div#back-top #wrapper {
width: auto;
padding: 0 10px;
}
div#powered {
width: 100% !important;
}
}
div#logo {
display: flex;
align-items: center;
}
.main-slider-content {
width: 100% !important;
}
.lof-slidecontent .sliders-wrapper {
width: 100% !important;
}
@media (max-width: 769px) {
#logo span:first-child img {
width: 150px;
}
#header {
padding: 0;
}
/* Ẩn navigator thumbnails và nút điều hướng để giảm kích thước slider trên mobile */
.lof-slidecontent .navigator-content,
.lof-slidecontent .navigator-content .button-next,
.lof-slidecontent .navigator-content .button-previous {
display: none !important;
}
.lof-slidecontent {
border: none;
}
/* Loại bỏ zoom để tránh phóng to quá mức trên mobile */
div#back-top #wrapper > div:first-child,
div#back-top #wrapper #rightnew {
zoom: 1.15;
padding: 0 !important;
}
div#back-top #wrapper {
flex-direction: column;
}
.main-slider-content {
height: 320px !important;
}
.item-cat-more ~ div {
width: 100% !important;
}
form[name="pager"] {
margin: 0 !important;
padding: 5px 5px 15px !important;
}
.f23 table {
width: 100%;
}
.f8 marquee {
width: auto !important;
}
.f8 marquee ~ div {
padding-top: 50px !important;
}
.f3 img {
padding: 0 10px 10px 5px !important;
height: auto;
}
.f8 .clr {
display: none;
}
.box-ctn tr td:first-child {
width: 100px;
float: left;
margin: 0 15px 0 0;
clear: both;
}
.box-ctn tr td:first-child img {
width: 100px !important;
}
.box-ctn tr td:nth-child(2) .d {
display: none;
}
.box-ctn tr td:nth-child(3) {
clear: both;
}
#foot span > br {
display: none;
}
#header #logo {
display: flex;
flex-direction: column;
margin: 0 auto;
}
#header .mobile-nav-toggle {
position: absolute;
top: 25px;
left: 15px;
margin: 0;
}
}
@media (max-width: 426px) {
.main-slider-content {
height: 160px !important;
}
div#back-top #wrapper > div:first-child {
zoom: 1;
}
#back-top form input {
width: 100% !important;
float: none !important;
height: 30px !important;
border-radius: 3px !important;
display: block;
margin: 0 0 10px !important;
background: #f4b601 !important;
text-align: center;
}
#back-top form {
display: flex;
flex-direction: column;
width: calc(100% - 30px) !important;
padding: 15px;
height: unset !important;
}
#back-top form input:first-child {
background: #fff !important;
width: calc(100% - 12px) !important;
}
table#wrap, tbody, tr, td {
width: 100%;
display: block;
}
.box {
width: 100%;
}
.box h3 {
height: 100%;
background: unset;
border-bottom: 2px solid #F4B601;
padding: 10px 4px 5px !important;
}
.box-ctn td > div:not(.thumb) a img {
width: 100px;
margin: 0 15px 10px 0;
}
.box-ctn td > div:not(.thumb) a {
font-size: 15px;
line-height: 1.3;
font-weight: 700;
text-align: justify;
display: block;
color: #a27c08;
}
div#back-top #wrapper #rightnew {
zoom: 1;
float: none !important;
display: none;
}
#load_tweets > div > div, #load_tweets > div {
width: 100% !important;
}
#load_tweets > div > div > div:last-child {
width: 74% !important;
}
.clr ~ a > img {
width: 100%;
}
.c > img {
width: 100%;
}
div#foot, div#foot > div, div#foot > div > div {
width: calc(100% - 7px) !important;
float: none !important;
}
div#foot > div > div {
margin: 0 0 15px !important;
overflow: hidden;
padding: 0;
}
div#foot h2 {
margin: 0 !important;
width: 100% !important;
}
div#foot > div {
margin: 5px !important;
}
div#foot a {
font-size: 15px;
line-height: 1.2;
}
marquee ~ div > div {
width: 100% !important;
}
div#foot > .clr ~ div > div > div:first-child {
width: 100% !important;
margin: 0 !important;
}
div#foot > .clr ~ div > div > div:first-child div {
width: 100% !important;
}
#foot span {
text-align: left;
float: left;
}
div#foot marquee ~ div div {
width: 100% !important;
height: auto !important;
}
.f2, .f21 {
flex-direction: column;
}
.f32 {
zoom: 1;
}
.c img {
width: auto;
}
.f33 {
display: flex;
align-items: center;
justify-content: center;
}
.main-slider-content video {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
/* ======================================
MENU MOBILE RESPONSIVE - AFC.EDU.VN
====================================== */
/* ======================================
MENU MOBILE RESPONSIVE - AFC.EDU.VN
====================================== */
/* ======================================
MENU MOBILE RESPONSIVE - AFC.EDU.VN
====================================== */
:root {
--header-height: 60px;
--primary-color: #b0770c;
--primary-dark: #8b5e09;
--text-color: #333;
--text-light: #666;
--bg-overlay: rgba(0,0,0,.5);
--border-color: #ddd;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
-webkit-tap-highlight-color: transparent;
}
/* ==================
NÚT HAMBURGER
================== */
nav.mobile-nav {
display: none;
}
.mobile-nav-toggle {
display: none;
position: relative;
width: 44px;
height: 44px;
background: var(--primary-color);
border: none;
border-radius: 8px;
cursor: pointer;
padding: 0;
z-index: 1001;
transition: var(--transition);
box-shadow: 0 2px 8px rgba(0,0,0,.15);
margin: 0 20% 0 0;
}
.mobile-nav-toggle:hover {
background: var(--primary-dark);
transform: scale(1.05);
}
.mobile-nav-toggle:active {
transform: scale(0.95);
}
.hamburger {
position: relative;
width: 24px;
height: 18px;
margin: 0 auto;
}
.hamburger span {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: #fff;
border-radius: 2px;
transition: var(--transition);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }
/* Hamburger animation khi mở */
.mobile-nav-toggle.active .hamburger span:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.mobile-nav-toggle.active .hamburger span:nth-child(2) {
opacity: 0;
transform: translateX(-100%);
}
.mobile-nav-toggle.active .hamburger span:nth-child(3) {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
/* ==================
MOBILE NAV PANEL
================== */
.mobile-nav {
position: fixed;
top: 158px;
left: 0;
width: 320px;
max-width: 85vw;
height: 100vh;
background: #fff;
box-shadow: 4px 0 12px rgba(0,0,0,.2);
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
z-index: 999;
display: none;
}
.mobile-nav.open {
transform: translateX(0);
display: block;
}
/* ==================
MENU ITEMS
================== */
.mobile-menu {
list-style: none;
margin: 0;
padding: 16px 12px;
}
.mobile-menu > li {
margin-bottom: 8px;
}
.mobile-menu > li > a,
.mobile-menu > li > .submenu-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 16px;
background: #f8f9fa;
border: 1px solid var(--border-color);
border-radius: 10px;
color: var(--text-color);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: var(--transition);
cursor: pointer;
text-align: left;
}
.mobile-menu > li > a:hover,
.mobile-menu > li > .submenu-toggle:hover {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
transform: translateX(4px);
}
.mobile-menu > li > a:active,
.mobile-menu > li > .submenu-toggle:active {
transform: translateX(2px) scale(0.98);
}
/* Icon chevron cho submenu */
.submenu-toggle .chevron {
font-size: 18px;
color: var(--text-light);
transition: transform 0.3s ease;
user-select: none;
}
.submenu-toggle.active .chevron {
transform: rotate(180deg);
color: #fff;
}
/* ==================
SUBMENU (Accordion)
================== */
.mobile-submenu {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
max-height: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-submenu.open {
max-height:2000px; /* Đủ lớn cho nội dung */
margin-top: 8px;
}
.mobile-submenu li {
margin-bottom: 6px;
}
/* Tiêu đề nhóm submenu */
.mobile-submenu li.submenu-group-title {
padding: 10px 16px;
margin-top: 12px;
margin-bottom: 8px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 4px rgba(176, 119, 12, 0.2);
}
.mobile-submenu li.submenu-group-title:first-child {
margin-top: 0;
}
.mobile-submenu li a {
display: block;
padding: 12px 16px 12px 32px;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
color: var(--text-color);
font-size: 14px;
text-decoration: none;
transition: var(--transition);
position: relative;
}
.mobile-submenu li a:before {
content: '›';
position: absolute;
left: 16px;
color: var(--primary-color);
font-weight: bold;
font-size: 18px;
transition: var(--transition);
}
.mobile-submenu li a:hover {
background: #fff5e6;
border-color: var(--primary-color);
color: var(--primary-color);
padding-left: 36px;
}
.mobile-submenu li a:hover:before {
left: 18px;
}
/* ==================
BACKDROP (lớp phủ)
================== */
.mobile-backdrop {
position: fixed;
top: var(--header-height);
left: 0;
width: 100vw;
height: calc(100vh - var(--header-height));
background: var(--bg-overlay);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 998;
display: none;
}
.mobile-backdrop.show {
opacity: 1;
visibility: visible;
}
/* Ngăn scroll body khi menu mở */
body.mobile-nav-open {
overflow: hidden;
}
/* ==================
RESPONSIVE
================== */
@media (max-width: 769px) {
.mobile-nav-toggle {
display: block;
}
.mobile-nav,
.mobile-backdrop {
display: block;
}
/* Ẩn menu desktop */
#rm,
.DynamicFileContents,
#nava {
display: none !important;
}
#bgleft,
#bgright {
display: none !important;
}
.mobile-nav-toggle {
margin: 0 10% 0 0;
}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
.mobile-nav-toggle {
display: block;
}
.mobile-nav,
.mobile-backdrop {
display: block;
}
#rm,
.DynamicFileContents {
display: none !important;
}
}
/* Desktop - ẩn mobile menu */
@media (min-width: 1025px) {
.mobile-nav-toggle,
.mobile-nav,
.mobile-backdrop {
display: none !important;
}
}
@media (max-width: 426px) {
button.mobile-nav-toggle {
flex: 0 0 33px;
height: 33px;
width: 33px;
}
.hamburger {
width: 19px;
height: 16px;
}
.mobile-nav-toggle {
margin: 0 10px 0 0;
}
}
/* ==================
SCROLLBAR STYLING
================== */
.mobile-nav::-webkit-scrollbar {
width: 6px;
}
.mobile-nav::-webkit-scrollbar-track {
background: #f1f1f1;
}
.mobile-nav::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.mobile-nav::-webkit-scrollbar-thumb:hover {
background: #999;
}
/* ==================
ANIMATIONS
================== */
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Loading state */
.mobile-menu > li {
animation: slideIn 0.3s ease forwards;
}
.mobile-menu > li:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu > li:nth-child(2) { animation-delay: 0.1s; }
.mobile-menu > li:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu > li:nth-child(4) { animation-delay: 0.2s; }
.mobile-menu > li:nth-child(5) { animation-delay: 0.25s; }