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;}
.m20{margin: 20px 0;}
.m30{margin: 30px 0;}
.m40{margin: 40px 0;}
.m50{margin: 50px 0 !important;}
.mt-20{margin-top: 20px;}
.mt-30{margin-top: 30px;}
.mt-50{margin-top: 50px;}
.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;}
.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_50{
width: 50%;
float: left;
padding: 0 20px;
}
.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;
}
/*nav*/
.toggle,
[id^=drop],
.togggle_menu {
display: none;
}
.logo{float: left;}
.logo img{
position: relative;
top: 10px;
width: auto;
height: 70px;
-webkit-transition: height .4s ease, opacity .3s ease;
-o-transition: height .4s ease, opacity .3s ease;
transition: height .4s ease, opacity .3s ease;
}
.nav_header{
margin-right: -25px;
position: relative;
top: 0;
float: right;
}
nav {
position: relative;
width: 100%;
left: 0;
padding: 0 35px;
border:0;
background-color: #fff;
border-bottom: 2px solid #ffd800;
z-index: 100;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
clear:both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding:0;
margin:0;
list-style: none;
position: relative;
z-index: 10;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.openMenu{position: relative !important;}
.sticky .logo img{top: 10px;}
.menu li.respon_remove{margin: 0 -22px;}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: transparent;
cursor: pointer;
}
/* Styling the links */
nav .logo a {
display: inline-block;
padding: 0 !important;
margin:0;
border:0;
padding: 0;
text-decoration:none;
height: auto;
line-height: 1;
}
nav a {
display:block;
padding: 0;
margin:0 22px;
font-size:16px;
height: 90px;
line-height: 90px;
text-decoration:none;
color: #222;
-webkit-transition: height .4s ease, opacity .3s ease;
-o-transition: height .4s ease, opacity .3s ease;
transition: height .4s ease, opacity .3s ease;
}
body:lang(zh-HK) nav a{font-size:18px;margin:0 23px;}
nav ul li ul li a{
height: auto;
line-height: 1.6;
display:block;
padding:10px 8px 10px 8px !important;
margin:0 0 !important;
text-decoration:none;
color: #fff;
background-color: #0860bf;
border:0;
border-bottom: 1px solid #0050a6;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Background color change on Hover */
/*nav a:hover {
color: #004998;
}*/
nav ul li ul li a:hover{
color: #ffd800;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 88px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:250px;
float:none;
display:list-item;
position: relative;
background-color: #0860bf;
padding: 0;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top:-88px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:250px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:only-child:after { content: ''; }
.nav_header .en{
position: relative;
top: 2px;
}
.mobieldrop_3:after{
position: absolute;
top: 13px;
right: 8px;
display: block;
content: "";
width: 12px;
height: 12px;
background: transparent url('../img/right_arrow_svg.svg') no-repeat;
background-size: 12px 12px;
}
/*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;
}
.details_fullIMG_m10{width: 100%;margin:10px 0;height: auto;}
.style_h2_blue{
font-size: 24px;
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;
}
/*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;
}
.updown_table table td{vertical-align: top;}
.trHighlightTxt{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_pa10-0 table td{
padding: 8px 0 ;
}
.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 8px;}
.table_style td{padding: 8px;}
.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 .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{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;
}