html{height: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body{
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
overflow-x:hidden;
margin:0;
}
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
:after,:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
input,
textarea,
button,
select,
img {
outline: none;
}
body {
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
overflow-x: hidden;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px;
}
body:lang(zh-HK){font-family: Microsoft JhengHei;font-size: 16px;}
body:lang(zh-HK) button,body:lang(zh-HK) input,
body:lang(zh-HK) select,body:lang(zh-HK) textarea
{font-family: Microsoft JhengHei;font-size: 16px;}
body:lang(en-HK) button,body:lang(en-HK) input,
body:lang(en-HK) select,body:lang(en-HK) textarea
{font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;font-size: 17px;}
.zh{font-family: Microsoft JhengHei;}
.en{font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
input,
input.text,button,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}
.fl{float: left;}
.fr{float: right !important;}
.clear{clear: both;}
h1,h2,h3,h4,h5,h6{margin:10px 0;padding: 0;font-weight: normal;}
button,div,input,select{outline: none;}
#load{
top: 0;
width:100%;
height:100%;
position:fixed;
z-index:9999;
background-color: #fff;
}
#load img{
width: 150px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fullCenter{
width: 100%;
text-align: center;
}
.m0{margin: 0 !important;}
.m5{margin: 5px 0;}
.m10{margin: 10px 0!important;}
.m20{margin: 20px 0;}
.m30{margin: 30px 0;}
.m40{margin: 40px 0;}
.m50{margin: 50px 0 !important;}
.mt-0{margin-top: 0px !important;;}
.mt-10{margin-top: 10px;}
.mt-20{margin-top: 20px;}
.mt-30{margin-top: 30px;}
.mt-50{margin-top: 50px;}
.mb-0{margin-bottom: 0px !important;;}
.mb-10{margin-bottom: 10px !important;;}
.mb-20{margin-bottom: 20px !important;;}
.mb-30{margin-bottom: 30px !important;;}
.mb-40{margin-bottom: 40px !important;;}
.mb-50{margin-bottom: 50px !important;;}
.mb-60{margin-bottom: 60px !important;;}
.mb_min10{margin-bottom: -10px !important;}
.mr-20{margin-right: 20px;}
.text_left{text-align: left;}
.text_center{text-align: center;}
.colorBlue{color: #004998;}
.colorGrey{color: #777;}
.full_col{width: 100%;}
.full_col img{max-width: 100%;}
.col_20{float: left;width: 20%;padding: 0 20px;}
.col_25{float: left;width: 25%;padding: 0 20px;}
.col-md-12{width: 100%;padding: 0 20px;}
.col_md_50{
width: 50%;
float: left;
padding: 0 20px;
}
hr.hr-30{
border:0;
border-top: 1px solid #ddd;
margin:30px 0;
}
.wrapper {
min-height:100%;
position:relative;
padding-bottom: 255px;
}
/*topbar*/
.topbar{
background-color: #004998;
color: #fff;
padding: 8px 20px;
}
.topbar img{position: relative;
top: 2px;}
.topbar a{
margin: 0 15px;
display: inline-block;
color: #fff;
text-decoration: none;
}
/* ----------------------------------------------------------------
Basic
-----------------------------------------------------------------*/
dl, dt, dd, ol, ul, li {
margin: 0;
padding: 0;
}
.clear {
clear: both;
display: block;
font-size: 0px;
height: 0px;
line-height: 0;
width: 100%;
overflow:hidden;
}
::selection {
background: #004998;
color: #FFF;
text-shadow: none;
}
::-moz-selection {
background: #004998; /* Firefox */
color: #FFF;
text-shadow: none;
}
::-webkit-selection {
background: #004998; /* Safari */
color: #FFF;
text-shadow: none;
}
:active,
:focus { outline: none !important; }
/* ----------------------------------------------------------------
Logo
-----------------------------------------------------------------*/
#logo {
position: relative;
float: left;
font-family: 'Raleway', sans-serif;
font-size: 36px;
line-height: 100%;
margin-right: 40px;
}
#header.full-header #logo {
padding-right: 0;
margin-right: 0;
}
#header.transparent-header.full-header #logo { border-right-color: rgba(0,0,0,0.1); }
#logo a {
display: block;
color: #000;
}
#logo img {
display: block;
max-width: 100%;
position: relative;
top: 10px;
margin-left: 20px;
width: auto;
height: 70px;
}
#logo a.standard-logo { display: block; }
#logo a.retina-logo { display: none; }
/* ----------------------------------------------------------------
Primary Menu
-----------------------------------------------------------------*/
#primary-menu { float: right; }
#primary-menu ul.mobile-primary-menu { display: none; }
#header.full-header #primary-menu > ul {
float: left;
padding-right: 15px;
margin-right: 0;
}
#header.transparent-header.full-header #primary-menu > ul { border-right-color: rgba(0,0,0,0.1); }
#primary-menu-trigger,
#page-submenu-trigger {
opacity: 0;
pointer-events: none;
cursor: pointer;
font-size: 14px;
position: absolute;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
#primary-menu ul {
list-style: none;
margin: 0;
}
#primary-menu > ul { float: left; }
#primary-menu ul li { position: relative; }
#primary-menu ul li.mega-menu { position: inherit; }
#primary-menu ul > li {
float: left;
margin-left: 2px;
}
#primary-menu > ul > li:first-child { margin-left: 0; }
#primary-menu ul li > a {
cursor: pointer;
display: block;
text-decoration: none;
line-height: 22px;
padding: 39px 15px;
color: #444;
font-size: 16px;
letter-spacing: 0;
-webkit-transition: margin .4s ease, padding .4s ease;
-o-transition: margin .4s ease, padding .4s ease;
transition: margin .4s ease, padding .4s ease;
}
body:lang(zh-HK) #primary-menu ul li > a {
font-size: 18px;
}
#primary-menu ul li > a span { display: none; }
#primary-menu ul li > a i {
position: relative;
top: -1px;
font-size: 14px;
width: 16px;
text-align: center;
margin-right: 6px;
vertical-align: top;
}
#primary-menu ul li > a i.icon-angle-down:last-child {
font-size: 12px;
margin: 0 0 0 5px;
}
#primary-menu ul li:hover > a,
#primary-menu ul li.current > a { color: #004998; }
#primary-menu > ul > li.sub-menu > a > div { }
body.no-superfish #primary-menu li:hover > ul:not(.mega-menu-column),
body.no-superfish #primary-menu li:hover > .mega-menu-content { display: block; }
#primary-menu ul ul:not(.mega-menu-column),
#primary-menu ul li .mega-menu-content {
display: none;
position: absolute;
width: 320px;
background-color: #0860bf;
color: #fff;
box-shadow: 0px 13px 42px 11px rgba(0, 0, 0, 0.05);
border: 0;
border-top: 2px solid #004998;
height: auto;
z-index: 199;
top: 100%;
left: 0;
margin: 0;
}
#primary-menu ul ul:not(.mega-menu-column) ul {
top: -2px !important;
left: 318px;
}
#primary-menu ul ul.menu-pos-invert:not(.mega-menu-column),
#primary-menu ul li .mega-menu-content.menu-pos-invert {
left: auto;
right: 0;
}
#primary-menu ul ul:not(.mega-menu-column) ul.menu-pos-invert { right: 318px; }
#primary-menu ul ul li {
float: none;
margin: 0;
}
#primary-menu ul ul li:first-child { border-top: 0; }
#primary-menu ul ul li > a {
font-size: 16px;
color: #fff;
padding-top: 8px;
padding-bottom: 8px;
border: 0;
letter-spacing: 0;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
body:lang(zh-HK) #primary-menu ul ul li > a {
font-size: 17px;
}
#primary-menu ul ul li > a i { top: 0; }
#primary-menu ul ul li:hover > a {
background-color: #F9F9F9;
padding-left: 18px;
color: #004998;
}
#primary-menu ul ul > li.sub-menu > a,
#primary-menu ul ul > li.sub-menu:hover > a {
background-image: url("../img/right_arrow_white.png");
background-position: right center;
background-repeat: no-repeat;
}
/* Primary Menu - Sub Title
-----------------------------------------------------------------*/
#primary-menu.sub-title > ul > li,
#primary-menu.sub-title.style-2 > div > ul > li {
background: url("images/icons/menu-divider.png") no-repeat right center;
margin-left: 1px;
}
#primary-menu.sub-title ul li:first-child {
padding-left: 0;
margin-left: 0;
}
#primary-menu.sub-title > ul > li > a,
#primary-menu.sub-title > div > ul > li > a {
line-height: 14px;
padding: 27px 20px 32px;
text-transform: uppercase;
border-top: 5px solid transparent;
}
#primary-menu.sub-title > ul > li > a span,
#primary-menu.sub-title > div > ul > li > a span {
display: block;
margin-top: 10px;
line-height: 12px;
font-size: 11px;
font-weight: 400;
color: #888;
text-transform: capitalize;
}
#primary-menu.sub-title > ul > li:hover > a,
#primary-menu.sub-title > ul > li.current > a,
#primary-menu.sub-title > div > ul > li:hover > a,
#primary-menu.sub-title > div > ul > li.current > a {
background-color: #004998;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
border-top-color: rgba(0,0,0,0.1);
}
#primary-menu.sub-title > ul > li:hover > a span,
#primary-menu.sub-title > ul > li.current > a span,
#primary-menu.sub-title.style-2 > div > ul > li:hover > a span,
#primary-menu.sub-title.style-2 > div > ul > li.current > a span { color: #EEE; }
#primary-menu.sub-title.style-2 ul ul span { display: none; }
/* Primary Menu - Style 2 with Sub Title
-----------------------------------------------------------------*/
#primary-menu.sub-title.style-2 > div > ul > li { background-position: left center; }
#primary-menu.sub-title.style-2 > div #top-search,
#primary-menu.sub-title.style-2 > div #top-cart,
#primary-menu.sub-title.style-2 > div #side-panel-trigger {
float: right;
margin-top: 30px;
margin-bottom: 30px;
}
#primary-menu.sub-title.style-2 div ul li:first-child,
#primary-menu.sub-title.style-2 > div > ul > li:hover + li,
#primary-menu.sub-title.style-2 > div > ul > li.current + li { background-image: none; }
#primary-menu.sub-title.style-2 > div > ul > li > a {
padding-top: 17px;
padding-bottom: 22px;
}
#primary-menu li.respon_remove{margin: 0 -12px;}
#primary-menu li.en a{
position: relative;
top: 2px;
}
/*slider css*/
.slider_container{
position: relative;
width: 100%;
height: auto;
}
.slide{
position: relative;
width: 100%;
}
.slide img{width: 100%;height: auto;}
.slide_rb_style{
position: absolute;
right: 20px;
bottom: 20px;
font-size: 24px;
font-weight: bold;
padding: 10px 10px;
}
.slide_lightblue{
background-color: rgba(51,153,254,0.92);
color: #fff;
}
/*home grid services*/
.main_services{
width: 100%;
float: left;
}
.services{
text-align: center;
float: left;
width: 20%;
padding: 35px 0;
}
.services img{
margin-bottom: 15px;
width: auto;
height: 90px;
}
.services a{text-decoration: none;}
.service_title{font-size: 22px;color: #fff;}
.bgblue{background-color: #04b2e9;}
.bggreen{background-color: #8bc540;}
.bgorange{background-color: #f37126;}
.bgyellow{background-color: #fcb313;}
.bgpurple{background-color: #5c186a;}
.bglightgrey{background-color: #eeeeee;}
/*home about*/
.home_about{
width: 100%;
}
.homeabout_container{
width: 100%;
max-width: 1200px;
padding: 0 20px;
margin:80px auto;
}
.homeabout_logo{width: 100%;text-align: center;margin-bottom: 30px;}
.homeabout_logo img{
border-bottom: 3px solid #ffcf03;
}
.homeabout_container .description{
font-size: 18px;
line-height: 1.7;
}
/*news*/
.section{width: 100%; padding: 60px 0;}
.home_container{
width: 90%;
margin:0 auto;
padding: 0 20px;
}
.centerHeading{text-align: center;width: 100%;position: relative;}
.cabinetOptions .tabOption{
position: absolute;
left: 0;
top: 0;
text-align: left;
width: 250px;
}
.styleHeading{
font-size: 30px;
color: #00529b;
display: inline-block;
margin:0 auto;
padding: 0 0;
border-bottom: 3px solid #ffcf03;
}
.news_container{margin-top: 40px;}
.row{
margin-right: -20px;
margin-left: -20px;
}
.news{
width: 100%;float: left;
padding: 0 0;
}
.news img{width: 100%;height: auto;margin-bottom: -3px;}
.news_content{
width: 100%;
padding: 10px;
background-color: #fff;
line-height: 1.6;
}
.news_h3{font-size: 18px;}
.news_date{
font-size: 13px;
color: #696969;
margin-bottom: 8px;
}
.news_para{width: 100%;}
.news_para p{margin:0;}
.eqWrap {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.equalHMR {
width: 30%;
text-align: left;
margin-bottom: 0;
margin-left: 3%;
background-color: #fff;
}
.moreBtn button{
border:0;
font-size: 17px;
color: #00529b;
background-color: #ffcf03;
padding: 8px 24px;
border-radius: 3px;
}
.news_container .moreBtn button{margin-top: 50px;}
hr.gradientstyle {
border:0;
margin:0;
width: 100%;
height: 3px;
background: rgba(51,152,254,1);
background: -moz-linear-gradient(left, rgba(51,152,254,1) 0%, rgba(51,152,254,1) 20%, rgba(142,196,66,1) 20%, rgba(142,196,66,1) 40%, rgba(255,112,27,1) 40%, rgba(255,112,27,1) 60%, rgba(255,179,0,1) 60%, rgba(255,179,0,1) 80%, rgba(94,20,112,1) 80%, rgba(94,20,112,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,152,254,1)), color-stop(20%, rgba(51,152,254,1)), color-stop(20%, rgba(142,196,66,1)), color-stop(40%, rgba(142,196,66,1)), color-stop(40%, rgba(255,112,27,1)), color-stop(60%, rgba(255,112,27,1)), color-stop(60%, rgba(255,179,0,1)), color-stop(80%, rgba(255,179,0,1)), color-stop(80%, rgba(94,20,112,1)), color-stop(100%, rgba(94,20,112,1)));
background: -webkit-linear-gradient(left, rgba(51,152,254,1) 0%, rgba(51,152,254,1) 20%, rgba(142,196,66,1) 20%, rgba(142,196,66,1) 40%, rgba(255,112,27,1) 40%, rgba(255,112,27,1) 60%, rgba(255,179,0,1) 60%, rgba(255,179,0,1) 80%, rgba(94,20,112,1) 80%, rgba(94,20,112,1) 100%);
background: -o-linear-gradient(left, rgba(51,152,254,1) 0%, rgba(51,152,254,1) 20%, rgba(142,196,66,1) 20%, rgba(142,196,66,1) 40%, rgba(255,112,27,1) 40%, rgba(255,112,27,1) 60%, rgba(255,179,0,1) 60%, rgba(255,179,0,1) 80%, rgba(94,20,112,1) 80%, rgba(94,20,112,1) 100%);
background: -ms-linear-gradient(left, rgba(51,152,254,1) 0%, rgba(51,152,254,1) 20%, rgba(142,196,66,1) 20%, rgba(142,196,66,1) 40%, rgba(255,112,27,1) 40%, rgba(255,112,27,1) 60%, rgba(255,179,0,1) 60%, rgba(255,179,0,1) 80%, rgba(94,20,112,1) 80%, rgba(94,20,112,1) 100%);
background: linear-gradient(to right, rgba(51,152,254,1) 0%, rgba(51,152,254,1) 20%, rgba(142,196,66,1) 20%, rgba(142,196,66,1) 40%, rgba(255,112,27,1) 40%, rgba(255,112,27,1) 60%, rgba(255,179,0,1) 60%, rgba(255,179,0,1) 80%, rgba(94,20,112,1) 80%, rgba(94,20,112,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3398fe', endColorstr='#5e1470', GradientType=1 );
}
/*counter*/
.home_counter{
width: 100%;float: left;
background:url('../img/lions_bg.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.counter,.counter_II{
float: left;
width: 25%;
text-align: center;
padding: 50px 0;
}
.counteringNo{
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
font-weight: 700;
color: #fff;
}
.counter-value{display: inline;}
.counteringNo span{margin-right: -30px;}
/*home videos*/
.video_container{
width: 70%;
max-width: 800px;
margin:0 auto;
margin-top: 40px;
}
.videos{
width: 70%;
max-width: 800px;
margin:0 auto;
padding: 0 0;
}
.Video-Wrapper{position: relative;}
.videoradio {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 56.25%;
}
.video_play{
cursor: pointer;
position: absolute;
width: 100%;height: 100%;
object-fit:cover;
top: 0;left: 0;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.videos .item{background-color: transparent;}
.lSSlideOuter .lSPager.lSGallery li, .lSSlideOuter .lSPager.lSGallery li{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
border:2px solid #fff;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover{
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
border:2px solid #ffd800;
}
.video_description{
width: 50%;
float: left;
padding: 0 20px;
}
.videos_title{
font-size: 22px;
color: #00529b;
}
.description_p p{
line-height: 1.7;
}
button.readmore{display: none;}
/*invitation*/
.invitation{
position: relative;
background-color: #ffcf03;
color: #004998;
padding: 15px 0;
margin:0 0 -2px 0;
}
.inline_bk{display: inline-block;}
.invitation .fl img{
position: absolute;
top: 15px;
left: 15px;
}
.invitation.tc .fl img{top: 22px;}
.invitation button{
position: relative;
top: 15px;
cursor: pointer;
background-color: #00529b;
color: #fff;
padding: 10px 30px;
border-radius: 3px;
border:0;
font-size: 17px;
}
.invitation a{
position: relative;
top: 15px;
cursor: pointer;
background-color: #00529b;
color: #fff;
padding: 10px 30px;
border-radius: 3px;
border:0;
font-size: 17px;
text-decoration: none;
}
.invitation.tc a{top: 22px;}
/*footer*/
footer{
background-color: #004998;
color: #fff;
padding: 40px 0 0 0;
text-align: center;
display: block;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
footer img{
margin-bottom: 40px;
max-width: 85%;
}
.footer_links{margin-bottom: 40px;}
.footer_links a{
color: #fff;
text-decoration: none;
display: inline-block;margin: 0 15px;
}
footer .copyrights{
width: 100%;
border-top: 2px solid #003c7d;
padding: 14px 15px;
color: #b5b5b5;
font-size: 14px;
}
/*scroll top*/
.scrollToTop{
width:35px;
height:35px;
padding:10px;
text-align:center;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
bottom:25px;
right:25px;
display:none;
z-index: 99;
}
.scrollToTop img{width: 35px;height: 35px;}
.scrollToTop:hover{
text-decoration:none;
}
/*details*/
.web_locations{
padding: 20px;
width: 100%;float: left;
background:url('../img/lions_bg.jpg');
background-size: cover;
background-repeat: no-repeat;
color: #fff;
}
.web_locations i{position: relative;top: 2px;padding-right: 5px;}
.container{width: 1199px;margin:0 auto;}
.web_locations a{
color: #fff;
text-decoration: none;
padding:0 5px;
}
.web_locations a.active,.web_locations a:hover{
color: #ffce05;
}
.FullBox{width: 100%;}
.box-padding4020{
width: 100%;
padding: 40px 20px;
min-height: 550px;
}
.box-padding3020{
width: 100%;
padding: 30px 20px;
min-height: 550px;
}
h1{font-size: 32px;}
h2{font-size: 24px;}
h3{font-size: 20px;}
h4{font-size: 16px;}
h5{font-size: 12.8px;}
h6{font-size: 11.2px;}
.style_xl{font-size: 50px;}
.style_h1_border{
font-size: 32px;
display: inline-block;
color: #00529b;
border-bottom: 4px solid #ffce05;
margin: 10px 0;
}
.style_h2_blue_border{
display: inline-block;
font-size: 24px;
color: #00529b;
margin: 10px 0;
border-bottom: 3px solid #ffce05;
}
.details_fullIMG_m10{width: 100%;margin:10px 0;height: auto;}
.style_h2_blue{
font-size: 24px;
color: #00529b;
margin: 10px 0;
}
.style_h3_blue{
font-size: 20px;
color: #00529b;
margin: 10px 0;
}
.style_h3_underline{
font-size: 20px;
text-decoration: underline;
margin: 10px 0;
}
/*.box_details p{margin: 0 0 20px 0;font-size: 16px;line-height: 1.6;}*/
.box_details p:lang(zh-HK) {margin: 0 0 20px 0;font-size: 16px;line-height: 1.6;}
.box_details p:lang(en-HK) {margin: 0 0 20px 0;font-size: 17px;line-height: 1.6;}
.details_hr{
width: 100%;
border:0;
border-top: 1px solid #ddd;
}
.full_box{
float: left;
width: 100%;
margin: 30px 0;
}
.half_box{
width: 48%;
float: left;
margin: 10px 0;
margin-right: 4%;
}
.half_box img,.full_box img,.col_3 img{max-width: 100%;}
.col_3{
margin: 10px 0;
float: left;
width: 31%;
margin-right: 3%;
}
.lastone{margin-right: -4%;}
.details_fullIMG,.fullIMG{width: 100%;height: auto;}
.tableBox_Full{width: 100%;float: left; margin:10px 0;}
.tableBox_Half{width: 48%;float: left; margin:10px 0;}
.tableBox_Half.lastone{float: right;}
.row_auto_box{
width: 100%;
margin: 0 0;
display: table;
}
.box_data{
vertical-align: top;
padding: 0 15px 0 0;
display: table-cell;
}
.tabOption{width: 100%;}
.tabOption button{
cursor: pointer;
padding: 10px 15px;
border: 1px solid #e5e5e5;
color: #555;
margin-right: 10px;
border-radius: 2px;
background-color: #e5e5e5;
height: 44px;
}
.tabOption button.active{
color: #fff;
background-color: #00529b;
}
/*gallery list*/
.list_03{
float: left;
display: block;
width: 33%;
padding: 0 20px;
margin-bottom: 30px;
}
.list_03 h4{
height: 23px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-container {
width: 100%;
max-width: 100%;
padding: 0;
margin:50px auto;
display: flex;
flex-flow: column wrap;
height:auto;
align-items: center;
}
.masonry {
/* Masonry container */
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
}
.grid{width:100%;float: left;margin-top: 20px;}
.grid-item { width: 25%;padding: 5px; }
.grid-item img{max-width: 100%;}
/*landmark*/
.landmark{
width: 33%;
float: left;
padding: 0 20px;
position: relative;
margin-bottom: 40px;
}
.landmark_item{
position: relative;
width: 100%;
}
.landmark_item img{
height: 276px;width: 100%;
object-fit:contain;
}
/*magazine*/
.magazine_list_download{
width: 25%;
float: left;
padding: 0 20px;
position: relative;
margin-bottom: 40px;
}
.magazine_list_download .download_item{
position: relative;
width: 100%;
}
.magazine_content,.landmark_content{
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
width: 100%;
background-color: rgba(0,73,152,0.85);
}
.download_item .item_title,.landmark_content .item_title{
font-size: 16px;
color: #fff;
}
.download_item .download_icon img{
position: relative;
top: 2px;
}
.page_no{
width: 100%;
margin:20px 0;
text-align: right;
}
.page_no a{
display: inline-block;
width: 35px;
border-radius: 3px;
text-align: center;
height: 37px;
line-height: 37px;
text-decoration: none;
color: #777;
background-color: #eee;
margin: 0 0 0 10px;
transition: 0.3s;
}
.page_no a:hover,.page_no a.active{
background-color: #004998;
color: #fff;
}
.sm_central_container{
width: 100%;
max-width: 450px;
margin:0 auto;
}
/*login*/
.login_container{text-align: center;margin-bottom: 50px;}
input.border_txt_fullbox{
border:1px solid #ddd;
padding: 12px;
width: 100%;
}
.submitbtn_full_blue{
cursor: pointer;
background-color: #004998;
color: #fff !important;
padding: 15px 0;
text-align: center;
width: 100%;
border:0;
display: block;
font-size: 16px;
text-decoration: none;
}
.login_container a{color: #777;text-decoration: none;}
/*contacts*/
.googlemap{
width: 100%;
height: 500px;
}
.contacts{width: 100%;}
.contacts_row{
width: 100%;
margin:20px 0;
}
.contacts_row img{
position: relative;
top: 4px;
margin-right: 5px;
}
.border_txtarea{
width: 100%;
min-height: 100px;
resize:none;
border:1px solid #ddd;
padding: 12px;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.rowName select{
float: left;
display: inline-block;
width: 30%;
border:1px solid #ddd;
padding: 12px;
}
.captcha_img{
display: inline-block;
width: 30%;
float: right;
}
.captcha_img img{max-width: 100%;}
.rowName input,.captcha input{
display: inline-block;
width: 66%;
float: left;
border:1px solid #ddd;
padding: 12px;
}
.blueBtn{
cursor: pointer;
background-color: #004998;
color: #fff;
font-size: 16px;
border:0;
padding: 10px 35px;
}
/*download*/
.download_row{
padding: 30px 0 0px 0;
width: 100%;
float: left;
border-bottom: 1px solid #ddd;
}
.each_download{
width: 20%;
float: left;
padding: 0 20px;
margin-bottom: 10px;
}
.download_content .item{
float: left;
width: 100%;
position: relative;
background-color: transparent;
}
.download_content .item img{width: 100%;}
.download_text{
position: absolute;
bottom: 20px;
width: 100%;
padding-left: -20px;
text-align: center;
}
.download_content .item{
position: relative;
width: 100%;
background-color: #eee;
min-height: 180px;
text-align: center;
border-radius: 5px;
transition: 0.3s;
}
.download_content .item i{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
font-size: 70px;text-decoration: none;
}
.each_download a{color: #7f7f7f;text-decoration: none;}
.download_text i{
width: auto !important;
position: relative !important;
left: -8px !important;
top: 3px !important;
margin-right: -11px;
font-size: 15px !important;
}
.download_content .item:hover{
color: #fff;
background-color: #004998;
}
.download_content .item:hover ~ .download_content .item a{
color: #fff;
}
/*namelist*/
.namelist_container{
overflow-x: auto;
margin:0 auto;
}
.namelist_container .centerHeading{min-width: 1199px;}
.namelist_container img,.nameGrid_container img{width: auto;height: 100px;}
.row_list{
margin: 60px auto 30px auto;
width: 1199px;
text-align: center;
display: table;
}
.staff_cell{display: table-cell;}
.staff{
display: inline-block;
width: 180px;
text-align: center;
}
.staff_pic{margin-bottom: -5px;z-index: 1;}
.staff_pic img{width: 100%;height: auto;}
.staff .name_post{
padding: 12px 0 7px 0;
font-size: 17px;
text-align: center;
width: 100%;
background-color: #004998;
color: #fff;
z-index: 2;
}
.name_post .name,.data_container .name{display: table;width: 100%;}
.name_post .tc_name,.name_post .en_name,
.data_container .tc_name,.data_container .en_name
{
width: 100%;
display: table-cell;
height: 42px;
text-align: center;
vertical-align: middle;
color: #ffce05;letter-spacing: -0.5px;
}
.name_post .post{
font-size: 13px;
}
/*president*/
.nameGrid_container{
float: left;
width: 100%;
margin:50px auto;
}
.nameGrid_container .person{
width: 25%;
float: left;
padding: 0 20px;
text-align: center;
margin-bottom: 40px;
}
.person .details img{width: 100%;height: auto;margin-bottom: -10px;}
.data_bg{
width: 100%;
/*background-color: #eee;*/
padding: 5p 40px;
}
.data_container{
width: 100%;
text-align: center;
background-color: #004998;
color: #fff;
font-size: 18px;
padding: 15px 0 10px 0;
}
.data_container .post{font-size: 15px;}
/*calendar*/
.calendar_options_container{
width: 100%;
background-color: #fbf9fc;
padding: 10px 20px 20px 20px;
}
.calendar_options{width: 100%;float: left;}
.calendar_options .options{
width: 20%;
float: left;
padding-right: 20px;
}
.calendar_options .options input{
width: 100%;
padding: 10px;
border:1px solid #ddd;
border-radius: 0;
height:44px;
}
.calendar_options h4{margin-bottom:2px;}
.calendar_options .options input[type="submit"]{
width:100%;
max-width: 180px;
cursor: pointer;
padding: 10px;
border:1px solid #00529b;
color: #fff;
border-radius: 2px;
background-color: #00529b;
}
/*calendar table*/
.calendar_table_container{
width: 100%;
}
.month_options{
position: relative;
text-align: center;
width: 100%;
float: left;
margin-bottom: 30px;
}
.month_options h2{margin:0;}
.previous_month{
position: absolute;
left:0;
bottom:0;
cursor: pointer;
}
.next_month{
position: absolute;
right:0;
bottom:0;
cursor: pointer;
}
.previous_month:hover,.next_month:hover{
color: #00529b;
}
.calendar_table_container table{
width: 100%;
border-collapse: collapse;
}
.calendar_table_container table th{
background-color: #00529b;
color: #fff;
text-align: center;
padding: 15px 0;
width: 14.28%;
}
.calendar_table_container table td{
border:1px solid #eee;
width: 14.28%;
vertical-align: top;
padding: 0;
font-size: 13px;
}
.fc-header td{border:0 !important;}
.calendar_table_container table td.otherdate{color: #a5a5a5;}
.calendar_table_container table td span.active{
border-radius: 50%;
background-color: #00529b;
color: #fff;
}
.calendar_table_container table td div{
line-height: 1.3;
}
.fc-day{
height: 140px;
}
.fc-day-number{
text-decoration: none;
font-size: 13px;
width: 14px;
display: inline-block;
height: 14px;
line-height: 14px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.fc-today span{
border-radius: 50%;
background-color: #00529b;
color: #fff;
}
.tooltiptopicevent{
max-width: 320px;
border:0;
background-color: #fff;
-webkit-box-shadow: 0px 0px 15px 5px rgba(201,201,201,1);
-moz-box-shadow: 0px 0px 15px 5px rgba(201,201,201,1);
box-shadow: 0px 0px 15px 5px rgba(201,201,201,1);
}
.tooltiptopicevent_title{
padding: 7px;
font-size: 13px;
background-color: #00529b;
color: #fff;
}
.tooltiptopicevent_content{
padding: 7px;
font-size: 13px;
background-color: #fff;
}
.viewas{
float: right !important;
text-align: right;
margin:10px 0 0 0 !important;
}
.viewas button{
cursor: pointer;
padding: 10px 15px;
border: 1px solid #e5e5e5;
color: #555;
margin-left: 10px;
border-radius: 2px;
background-color: #e5e5e5;
height:44px;
}
.viewas button.active{
background-color: #00529b;
color: #fff;
border: 1px solid #00529b;
}
/*list view*/
.listview_title{position: relative;margin-bottom: 30px;}
.listview_title h2{text-align: center;margin:0;}
.listview_title .previous_months{
cursor: pointer;
border:0;
background-color: transparent;
padding: 0;
margin:0;
position: absolute;
left: 0;
bottom: 2px;
}
.listview_title .next_months{
cursor: pointer;
border:0;
background-color: transparent;
padding: 0;
margin:0;
position: absolute;
right: 0;
bottom: 2px;
}
.event{
width: 100%;
margin-bottom: 25px;
}
.event_date{margin-bottom: 5px;color: rgba(221, 126, 10);font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
.event_content{
border:1px solid #ddd;
}
.event_title{
width: 100%;
background-color: #f5f5f5;
padding: 10px;
}
.event_details{
padding: 10px;
}
.event_details p{margin:0;}
.event_details a{
display: block;
margin-top: 8px;
font-size: 14px;
text-decoration: none;
color: rgba(221, 126, 10);
}
.wrap-event .fc-title{
white-space:nowrap;
}
.wrap-event .fc-title:before{
position: relative;
top: 1px;
content: '• ';
font-size: 19px;
color: #004998;
}
.row_filter{
width: 100%;
margin: 0 0 20px 0;
}
.row_filter select{
min-width: 200px;
border:1px solid #bfbfbf;
padding: 4px 5px;
}
.filter_option_3{
float: left;
width: 33.33%;padding: 0 20px;
}
.filter_options input,.filter_options select{
width: 100%;
padding: 8px;
border:1px solid #bfbfbf;
height: 46px;
}
.button_right{
width: 100%;
text-align: right;
}
button.blue_btn-md,a.blue_btn-md{
display: inline-block;
border:0;
width: auto;
text-align: center;
padding: 10px 18px;
min-width: 150px;
background-color: #004998;
color: #fff;
text-decoration: none;
}
/*lcif*/
.lcif,.updown{
margin-bottom: 30px;
width: 100%;
position: relative;
clear: both;
}
.lcif_title,.updown_title{
border-bottom: 1px solid #bfbfbf;
margin-bottom: 10px;
}
.lcif_title h3,.updown_title h3{margin: 5px 0;cursor: pointer;}
.lcif_title.active,.updown_title.active{pointer-events: none;}
.lcif_table table,.updown_table table,.updown_table_pa10-0 table {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.autolayout {
table-layout: auto;
}
table.fixedlayout {
table-layout: fixed;
}
.updown_table table td{vertical-align: top;}
.trHighlightTxt{color: #fff;background-color: #00529b;}
.lcif_table table th,.updown_table table th{
background-color: #004998;
color: #fff;
font-weight: normal;
padding: 12px 15px;
text-align: left;
}
.lcif_table table td,.updown_table table td{
padding: 8px 15px;
text-align: left;
}
.updown_table table td:first-child{
padding: 8px 15px 8px 8px;
}
.updown_table_pa10-0 table td{
padding: 8px ;
}
.lcif_table table tr:nth-child(odd){background: #f5f5f5}
.borderbttr table tr{border-bottom: 1px solid #eee;}
.borderbttr table tr:last-child{border:0;}
.lcif_table,.updown_table{display: none;}
.lcif_title i,.updown_title i{
position: absolute;
right:0;
top: 6px;
pointer-events:none;
}
.lcif_table.active,.updown_table.active{
display: block;
}
.rotate {
transform: rotate(-180deg);
/*transform: rotate(180deg);*/
transition: .3s;
}
.rotate-reset {
transform: rotate(0deg);
transition: .3s;
}
/*magnifier*/
* {box-sizing: border-box;}
.img-magnifier-container {
position:relative;
}
.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 120px;
height: 120px;
}
.comingsoon{
text-align: center;
margin: 30px 0;
}
.comingsoon img{margin-bottom: 10px;}
.comingsoon h1{font-size: 40px;margin-right: -30px;}
/*table style*/
.table_style{
width: 100%;
border-collapse: collapse;
}
.table_style th{
background-color: #004998;
color: #fff;
}
.table_style th{padding: 12px 10px;}
.table_style td{padding: 8px 10px;}
.table_style tr{
border-bottom: 1px solid #eee;
}
.table_style tr:last-child{border:0;}
/*notice*/
.notice a{color: #000;text-decoration: none;}
/*committees*/
.profile img{width: 100%;height: auto;}
.profile {width: 100%;float: left;display: table;margin-bottom: 20px;}
.profile .img{
width: 200px;display: table-cell;
vertical-align: top;
padding-top: 10px;
position: relative;
}
.profile .text{
width: 260px;display: table-cell;
vertical-align: top;
padding-top: 10px;
position: relative;
}
.profile .content{width: 100%;float: left;padding: 0 15px;display: table-cell;}
.updownContainer{display: none;}
.updownContainer.active{display: block;}
.profile .name{
width: 100%;
background-color: #004998;
color: #fff;
text-align: center;
padding: 5px 3px;
line-height: 1.6;
margin-top: -5px;
}
.profile .name h4,.profile .name h3{color: #ffce05;}
.profile table td{vertical-align: top;}
.col100{width: 100%;padding: 0 15px;}
/*cabinet-officer*/
.cabinet-row{margin-right: -3%;}
.cabinet {
width: 100%;
display: flex;
justify-content: left;
flex-wrap: wrap;
}
.cabinet-officers {
width: 22%;
text-align: left;
margin-bottom: 0;
margin-right: 3%;
background-color: #fff;
border-radius: 20px;
padding: 10px;
border:4px solid #777;
margin-bottom: 3%;
}
.cabinet .year{
text-align: center;font-size: 25px;
margin-bottom: 5px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.officers-container{
line-height: 1.6;
height: 100%;
}
.officers-container .namepost{
min-height: 100%;
padding: 10px;
border-radius: 15px;
border:2px solid #777;
}
/*sidenav*/
nav.sidenav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 300px;
background-color: #036;
transform: translate3d(-300px, 0, 0);
transition: transform 0.2s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav.sidenav ul {
list-style: none;
margin-top: 0;
}
nav.sidenav ul li a {
text-decoration: none;
display: block;
text-align: left;
letter-spacing: -0.45px;
color: #fff;
padding:8px 10px;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
nav.sidenav ul li a:hover{
color: #036;
background-color: #fff;
}
.slidenav_container{
overflow: hidden;
height: 100%;
}
.scroll_sidenav{
margin-right: -17px;
height: 100%;
overflow-y: scroll;
padding: 10px 0;
margin-bottom: 30px;
}
.sidenav h3{color: #fff;padding-left: 10px;}
.closesidenav {
display: block;
position: absolute;
right:0;
top: 10px;
width: 40px;
height: 40px;
background-color: transparent;
color: #fff;
}
.page_sidebtn{
position: absolute;
top: 50%;
right: -28px;
transform: translate(0%, -50%);
}
.closesidenav img{width: 28px;height: 28px;}
.device-lg.no-transition.no-superfish.active-nav,
.no-transition.no-superfish.active-nav.device-sm,
.no-transition.no-superfish.active-nav.device-xs,
.no-transition.no-superfish.active-nav.device-xxs {
position: fixed;
}
.wrapper {
transition: transform 0.2s ease;
}
.active-nav .wrapper {
transform: translate3d(300px, 0, 0);
}
a.iconlink{
position: relative;
top: 2px;
color: #004998;
text-decoration: none;
}
img.details_icon{width: auto;height: 20px;}
img.table_social_icon{width: auto;height: 16px;
position: relative;
top: 4px;
margin:0 5px;
}
.member_system{
width: 100%;
float: left;
margin: 30px 0;
}
.member-sidebar{
width: 25%;
float: left;
padding: 0 20px;
}
.member-sidebar a{
display: block;
color: #555;
text-decoration: none;
padding: 14px 15px;
width: 100%;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.member-sidebar a.active{
color: #fff;
background-color: #004998;
}
.member-content{
width: 75%;
float: left;
padding: 0 20px;
}
.edit_member_container{
display: table;
margin-bottom: 50px;
}
.edit_member_container .member_img,.edit_member_container .member_editing{
display: table-cell;
vertical-align: top;
}
.edit_member_container .member_img{width: 150px;}
.edit_member_container .member_editing{width: 100%;padding-left: 40px;}
.member-content .member_img img{
width: auto;height: 180px;
border:1px solid #ddd;
margin: 10px 0;
}
.editinfo input{
width: 100%;
border:1px solid #ddd;
padding: 8px;
}
.editinfo select{
width: 100%;
border:1px solid #ddd;
padding: 8px;
}
.edit_info_half{
float: left;
margin: 0 0 7px 0;
width: 50%;
padding: 0 20px;
}
.edit_info_full{
float: left;
margin: 0 0 7px 0;
width: 100%;
padding: 0 20px;
}
.edit_info_3{
float: left;
margin: 0 0 7px 0;
width: 33.33%;
padding: 0 20px;
}
span.new_msg_notice{
width: 12px;
height: 12px;
background-color: #004998;
border-radius: 50%;
margin-right: 10px;
display: inline-block;
}
table.msg_table{
width: 100%;
border-collapse: collapse;
}
table.msg_table tr{
border:0;
border-bottom:1px solid #eee;
}
table.msg_table td{
cursor: pointer;
padding: 10px 0;
vertical-align: top;
white-space: nowrap;
}
.new_msg{color: #004998;}
.read_msg{color: #666;}
table.msg_table td.title{
padding: 10px 15px;
}
table.msg_table td.title div {
overflow: hidden;
text-overflow: ellipsis;
white-space:normal;
width: 90%;
}