/*!
 * Project_Name: Themezy Modern Architecture
 * Author: Themezy
 * Email: info@themezy.com
 * URL: http://themezy.com
 */
/*=========================================== 
 * Importing CSS Libraries
 *===========================================*/

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }
/* close commented backslash hack */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block; }

audio,
canvas,
video {
  display: inline-block; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

html {
  background: #fcfeff;
  color: #000;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

html,
button,
input,
select,
textarea {
  font-family: sans-serif; }

.wrapper{
	width:100%;
	margin:0 auto;
}

.wrapper-content{
	width:100%;
	max-width:1240px;
	margin:0 auto;
	min-height:300px;
	font-size:16px;
}

a {
  background: transparent;
    outline: none; }
  a:focus{
	outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
  a:hover, a:active {
    outline: none; }

abbr[title] {
  border-bottom: none; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

q:before,
q:after {
  content: '';
  content: none; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }
  
li {
	list-style:none;
}

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

fieldset{
    border: 1px solid #07225D;
    margin: 0 2px;
    padding: 20px;
}

legend {
  color:#07225D;
  font-size:18px;
  font-weight:400;
  border: 0;
  padding: 0 10px;
  white-space: normal; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  vertical-align: baseline; }

button,
input {
  line-height: normal; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
input[disabled] {
  cursor: default; }

input[type="checkbox"],
input[type="radio"] {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  padding: 0; }

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

table tr {
  vertical-align: top; }

*, *:before, *:after {
  -moz-box-sizing: border-box;
       box-sizing: border-box; }

/*
 * Global Styles
 */
body {
    color: #333;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.3px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
	background:#fcfeff;
  	margin: 0;
 }

.tc body{
    font-family: '微軟正黑體',Microsoft JhengHei;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0;}

hr {
  border: none;
  border-bottom: 1px solid #eee; }

ul, ol {
  margin: 0;
  padding-left: 0; }

a {
	text-decoration: none;
	color: #0671e2; }

	
address {
  font-style: normal; }


.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
  *zoom: 1; }
  
  .container:after {
    content: " ";
    clear: both;
    display: block;
    overflow: hidden;
    height: 0; }
/*
 * Header Styles
 */
.site-header {
  *zoom: 1;
}
  
  
  .site-header:after {
    content: " ";
    clear: both;
    display: block;
    overflow: hidden;
    height: 0; }
#branding {
  float: left;
}
  #branding .logo{
    display: inline-block;
    vertical-align: middle; }
  #branding .logo {
    margin-right: 10px; }
  #branding .site-title {
    font-size: 18px;
font-size: 1.28571428571em;
    font-size: 1.2857142857em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0; }
    #branding .site-title a {
      color: white; }
  #branding .site-description {
    font-size: 11px;
font-size: 0.785714285714em;
    font-size: 0.7857142857em;
    color: #585858; }

.main-navigation {
	background:#E3F2FC;
	margin-bottom:20px;
}
  .main-navigation .menu-toggle {
    background: none;
    border: none;
    color: #333;
    font-size: 24px;
font-size: 1.71428571429em;
    font-size: 1.7142857143em;
    display: inline-block;
    vertical-align: middle;
    padding: 15px;
    outline: none; }
    @media screen and (min-width: 991px) {
      .main-navigation .menu-toggle {
        display: none !important; } }
    @media screen and (max-width: 990px) {
		.main-navigation {
			
		}
      .main-navigation .menu-toggle {
        display: block; } }
  .main-navigation .menu {
    display: inline-block; }
    @media screen and (min-width: 991px) {
      .main-navigation .menu {
        display: block !important; } }
    @media screen and (max-width: 990px) {
      .main-navigation .menu {
        display: none; } }
  	.main-navigation .menu-item {
		display: block;
		float: left;
		background:url(../images/dot.png) right center no-repeat;
		position:relative;
	}
	
	.main-navigation .menu-item > .sub-menu.focus{
		display:block;
	}
	
	.main-navigation .menu-item > .sub-menu.blur{
		display:none;
	}

  	.main-navigation .menu-item:hover > .sub-menu{
		display:block;
	}
	
  	.main-navigation .menu-item .sub-menu{
		position: absolute;
		top:48px;
		left:-20px;
		z-index:999;
		width:230px;
		background:#FFF;
		padding:10px 0;
		box-shadow:1px 1px 1px #999;
		display:none;
	}
  	.main-navigation .menu-item .sub-menu li{
		list-style-type:disc;
		list-style-position:outside;
		margin-left:35px;
	}
  	.main-navigation .menu-item .sub-menu li a{
		padding-left:0px;
		padding-right:10px;
	}
@media screen and (max-width: 1180px){
  	.main-navigation .menu-item .sub-menu{
		left:0px;
	}
}
  	.main-navigation .menu-item .sub-menu a{
		text-align: left;
		font-weight:300;
		line-height:20px;
		color:#333 !important;
	}
  	.main-navigation .menu-item .sub-menu a:hover{
		color:#014a80 !important;
		font-weight:400;
	}
  	.main-navigation .last-item {
		background: none;
	}
    .main-navigation .menu-item a {
		padding: 8px 34px 8px 27px;
		position: relative;
		display: block;
		color: #333;
		text-align: center;
		line-height: 32px;
		font-weight: 400;
		font-size:16px;
	}
	.tc .main-navigation .menu-item a {
    padding: 8px 48px 8px 42px;
	}
    .main-navigation .menu-item .active {
		border-bottom: 4px solid #6B8195;
	}
      .main-navigation .menu-item a:after {
        color: #FFF;
        position: absolute;
        right: 0; }
    .main-navigation .menu-item:last-child a:after {
      display: none; }
    .main-navigation .menu-item.current-menu-item a, .main-navigation .menu-item:hover a {
		color:#014a80;
     }

	.mobile-navigation {
	  clear: both;
	  padding: 0;
	  display: none; }
  
  	.main-navigation .menu {
		width: 1173px;
		margin: 0 auto;
	}

  @media screen and (max-width: 1200px) {
    .main-navigation .menu-item a {
		font-size:14px;
	}
	.main-navigation .menu {
		width: 1070px;
	}
	.tc .main-navigation .menu {
		width: 1035px;
	}
	.main-navigation .menu-item a {
		padding: 8px 32px 8px 25px;
	}
	.tc .main-navigation .menu-item a {
    padding: 8px 43px 8px 38px;
	}
  }
  
  @media screen and (max-width: 1100px) {
	.main-navigation .menu-item a {
		padding: 8px 24px 8px 18px;
	}
	.tc .main-navigation .menu-item a {
    padding: 8px 37px 8px 31px;
	}
	.main-navigation .menu {
		width: 940px;
	}
	.tc .main-navigation .menu {
		width: 932px;
	}
  }
  
  @media screen and (min-width: 991px) {
    .mobile-navigation {
      display: none !important; } }
  .mobile-navigation .menu {
    list-style: none;
    padding: 0px 20px 20px 20px;
    zborder-top: 2px solid #f4c545;
    zborder-bottom: 2px solid #f4c545;
    text-transform: uppercase; }
    .mobile-navigation .menu a {
      padding: 10px 0;
      display: block;
      color: #d3d3d3;
	  }
	 .menu-arrow{
		 display:none;
	 }
    .mobile-navigation .menu .current-menu-item a {
      color: #f4c545; }


.fullwidth-block {
  padding: 50px 0; }
  .fullwidth-block.image-block {
    min-height: 300px; }

.section-title {
  font-size: 36px;
font-size: 2.57142857143em;
  font-size: 2.5714285714em;
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase; }

.separator {
  border: none;
  border-top: 1px solid #383838;
  margin: 50px 0;
  clear: both; }


.testimonial {
  margin: 0 0 30px; }
  .testimonial cite {
    font-style: normal;
    color: #f4c545; }

.filterable-nav {
  margin: 50px 0; }
  .filterable-nav .mobile-filter {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #f4c545;
    padding: 10px 20px;
    color: #f4c545;
    border-radius: 0;
    background: none;
    text-transform: uppercase;
    outline: none; }
    @media screen and (max-width: 768px) {
      .filterable-nav .mobile-filter {
        display: block; } }
  .filterable-nav a {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    border: 2px solid #383838;
    position: relative;
    color: #d3d3d3;
    text-transform: uppercase;
    -webkit-transition: .3s ease;
            transition: .3s ease; }
    @media screen and (max-width: 768px) {
      .filterable-nav a {
        display: none; } }
    .filterable-nav a:before, .filterable-nav a:after {
      content: " ";
      width: 20px;
      height: 20px;
      position: absolute;
      background: #212121;
      -webkit-transition: .3s ease;
              transition: .3s ease; }
    .filterable-nav a:before {
      border-bottom: 2px solid #383838;
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
      top: -10px;
      left: -10px; }
    .filterable-nav a:after {
      border-top: 2px solid #383838;
      -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
              transform: rotate(-45deg);
      bottom: -10px;
      right: -10px; }
    .filterable-nav a.current, .filterable-nav a:hover {
      border-color: #f4c545;
      color: #f4c545; }
      .filterable-nav a.current:before, .filterable-nav a.current:after, .filterable-nav a:hover:before, .filterable-nav a:hover:after {
        border-color: #f4c545; }

.filterable-items {
  *zoom: 1; }
  .filterable-items:after {
    content: " ";
    clear: both;
    display: block;
    overflow: hidden;
    height: 0; }



#branding {
}

.main-navigation li:hover{
}

.mobile-lang-btn{
	display:none;
}

.main-navigation  .mobile-search{
	display:none;
}

#mobile-branding {
	display: none;
}


@media screen and (max-width: 1200px){
#branding {
    max-width: 290px;
}

}

@media screen and (max-width: 990px){
.site-header-top{
	display:none;
}

.site-header {
    background: #E3F2FC;
}

.main-navigation {
    background: none;
}

#mobile-branding{
    display: block;
    position: absolute;
    top: 45px;
    left: calc(50% - 40px);
    width: 80px;
}
	
#mobile-branding img{
    width: 100%;
	padding-top: 50px;
}
	

.mobile-lang-btn{
	display: block;
	width:50px;
	float: right;
	margin-right:5px;
}

.mobile-lang-btn span{
    text-transform: uppercase;
    padding: 5px;
    display: block;
    border: 2px solid #084B7E;
    color: #084B7E;
    text-align: center;
    margin-top: 14px;
	font-weight:400;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
 }

.current-lang{
	position:relative;
}

.current-lang:hover>.dropdown-lang{
	display:block;
}


.dropdown-lang{
	position:absolute;
	background:#07487D;
	width:50px;
	display: none;
	padding: 0;
	z-index:99999;
}

.dropdown-lang li a{
	 display:block;
	 color:#FFF;
    padding: 5px 0;
    font-size: 14px;
    text-align: center;
	font-family:"Microsoft JhengHei",Arial, Helvetica, sans-serif;
}

.dropdown-lang li span{
	margin:0;
}

#branding {
	margin-left:20px;
	margin-top: 15px;
	background:url(../images/logo_white.png) center no-repeat;
}

.mobile-navigation .menu .current-menu-item a {
    color: #333;
}

.mobile-navigation .menu a {
    padding: 10px 0 10px 25px;
    display: block;
    color: #333;
	font-weight:300;
}

.mobile-navigation .sub-menu{
	padding-bottom:10px;
}

.mobile-navigation .sub-menu li{
	list-style-type:disc;
	list-style-position:outside;
	margin-left:35px;
	position: relative;
}

.mobile-navigation .menu-arrow{
	 display: block;
	 position:absolute;
    left: -15px;
    top: 4px;
}

.mobile-navigation .sub-menu a {
    padding: 5px 0 5px 45px;
    display: block;
    color: #333;
	font-weight:300;
	font-size:14px;
	text-transform: none;
	padding-left:0px;
	padding-right:10px;
}

.mobile-search{
	display: block;
	padding:5px 0 10px 0;
}

.mobile-search input{
	padding:7px 15px;
	width:100%;
	border:1px solid #FFF;
	background: url(../images/mobile-search.png) 96% center no-repeat #A273AA;
	color:#FFF;
	border-radius:20px;
	font-size:16px;
}

::-webkit-input-placeholder { /* Chrome */
  color: #FFF;
  font-weight:300;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #FFF;
  font-weight:300;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #FFF;
  opacity: 1;
  font-weight:300;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: #FFF;
  opacity: 1;
  font-weight:300;
}
}

@media screen and (max-width: 990px){ 
	#mobile-branding img{
		width: 100%;
		/* 2024-7-4 */
		display: none;
	}
		
}

.main-content{
	padding:0;
}

.site-header {
    padding: 0;
	max-width: 1240px;
	margin:0 auto
}

.site-header-top{
	padding:10px 20px;
	max-width: 1240px;
	margin:0 auto
}

.header-topright{
	float: right;
	width: 300px;
}


.header-topright .lang li{
	float: left;
	background:#F6D56B;
}

.header-topright .lang{
	float: right;
	margin-bottom:15px;
}

.header-topright .lang .tc{
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

.header-topright .lang .en{
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}

.header-topright .lang li:last-child {
	background-image: none;
}

.header-topright .lang li a{
	line-height: 32px;
	width: 45px;
	text-align: center;
	display: block;
	color: #222;
	font-size: 17px;
	font-weight:700;
	cursor:pointer;
	font-family:"Microsoft JhengHei",Arial, sans-serif;
}

.header-topright .lang li .active{
	background-color: #F2B36A;
}

.header-topright .lang .tc .active{
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

.header-topright .lang .en .active{
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}
.seach-box{
	display:block;
	width:410px;
	float:right;
	padding-top:2px;
	position: relative;
}
	
.seach-box .seach-text{
	width:220px;
	padding:3px 10px;
	border-radius:20px;
	border:1px solid #ccc;
	line-height:20px;
	float:right;
	color:#444∂∂∂;
}
	
.seach-text::-ms-clear{
	display:none;
}
	
.seach-box::-ms-clear{
	display:none;
}
	
.seach-box .seach-button{
	position:absolute;
	right:15px;
	top:8px;
	outline:none;
}

.highlight{
	margin:0 0 30px 0;
}

.highlight a{
	display:block;
}

.highlight div{
	display: block;
	float: left;
	width:calc(25% - 15px);
	margin-right:20px;
}

.highlight a img{
	width:100%;
}

.highlight div:last-child {
	margin-right:0px;
}

.home-highlight{
	margin-bottom:30px;
}

.home-highlight .owl-controls {
    position: relative;
    top: 0;
    right: auto;
    width: auto;
    height: 100%;
    z-index: 0;
}

#highlight-slider {
    position: relative;
}

#highlight-slider img{
	width:100%;
}

#highlight-slider .owl-prev{
    position: absolute;
    top: -77px;
    left: -30px;
    background: url(../images/highlight-arrow-left.png) center no-repeat rgba(255,255,255,0.7);
    width: 30px;
    height: 30px;
    font-size: 0;
}
#highlight-slider .owl-next {
    position: absolute;
    top: -77px;
    right: -30px;
    background: url(../images/highlight-arrow-right.png) center no-repeat rgba(255,255,255,0.7);
    width: 30px;
    height: 30px;
    font-size: 0;
}
@media screen and (max-width: 1274px){
#highlight-slider .owl-prev{
    left: 10px;
    top: 60px;
}
#highlight-slider .owl-next {
    right: 10px;
    top: 60px;
}

.site-header {
    padding: 0 20px;
}

.main-content{
	padding:0 20px;
}
}
@media screen and (max-width: 990px){
.home-highlight{
	margin:0 -15px 20px -15px;
}

.highlight{
	margin:0 -15px 20px -15px;
}

.highlight div{
	width:25%;
	margin-right:0;
}
}
@media screen and (max-width: 800px){
.highlight{
	padding:0;
}

.highlight div{
	width:50%;
	margin-bottom: -4px;
}
}

.home-banner{
	width:100%;
	height:400px;
	background-position:center;
	background-size:cover;
}

.home-banner a{
	display: block;
	width:100%;
	height:100%;
}

.home-banner-words{
	width:90%;
	max-width:360px;
	margin:90px auto 0;
}

.home-banner-words h2{
    padding: 20px 20px;
    background: #E6FBFF;
    color: #004175;
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
}

.home-banner-words p{
    padding: 20px;
    background: rgba(255,255,255,0.85);
    color: #004175;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
}

.home-event{
	margin-bottom:30px;
}

.responsive-calendar{
	width:290px;
	float:left;
	background:#FFF;
	border:2px solid #CDCDCE;
	padding:15px 10px;
}

.upcoming-event{
	width:calc(100% - 310px);
	float:right;
	position:relative;
}

.upcoming-event h2{
	font-size:22px;
	font-weight:300;
	word-spacing:1px;
	padding:20px 0 20px 90px;
	margin-bottom:0;
	color:#000;
	background:url(../images/event-icon.png) 10px bottom no-repeat #95D2D3;
}

.newsticker{
    background: #F1F2EF;
	padding:0 60px 0 20px;
}

.newsticker li {
    color: #222;
    overflow: hidden;
    line-height: 20px;
	padding:15px 0;
    font-size: 16px;
    text-align: left;
    border-bottom: 1px dotted #2c8162;
}

.newsticker li .date{
	display:inline-block;
	float:left;
	width:110px;
	border:1px solid #000;
	border-radius:20px;
	text-align:center;
}

.newsticker li .topic{
	display:inline-block;
	float:right;
	width:calc(100% - 130px);
	color:#000;
	margin-top:16px;
}

.upcoming-event #prev-button{
	position:absolute;
	right:20px;
	top:148px;
}

.upcoming-event #next-button{
	position:absolute;
	right:20px;
	top:180px;
}

.home-intro{
	margin-bottom:30px;
}

.home-intro .photo{
	width:290px;
	float:left;
}

.home-intro .photo{
	width:290px;
	float:left;
}

.home-intro .photo img{
	display: block;
	width:176px;
	margin:0 auto 10px;
}

.home-intro .photo p{
	text-align:center;
	color:#222;
	padding:0 40px;
	font-size:16px;
	margin-bottom:0;
}

.home-intro .photo .title{
	color:#00636c;
	font-style:italic;
}

.home-intro .quote{
	width:calc(100% - 360px);
	margin-left:20px;
	margin-top:30px;
	float:left;
	border:3px solid #83A5BE;
	position:relative;
}

.home-intro .quote p{
	background:#D2EBF5;
	border:3px solid #FFF;
	padding:20px;
	font-size:16px;
	line-height:36px;
	margin-bottom:0;
}

.home-intro .quote-start{
	position:absolute;
	left: -26px;
    top: -17px;
}

.home-intro .quote-end{
	position:absolute;
	right:-21px;
	bottom:-13px;
}

.home-media{
	margin-bottom:30px;
}

.home-media .video{
	width:calc(50% - 10px);
}

.home-media .audio{
	width:calc(50% - 10px);
	float:right;
}

.home-media .video h2{
	background:url(../images/icon-video.png) left bottom no-repeat #DFF0FD;
	line-height:65px;
	font-size:20px;
	font-weight:300;
	color:#263044;
	padding-left:60px;
	margin-bottom:0;
}

.home-media .video iframe{
	width:100%;
	height:330px;
	border:none;
}

.home-media .audio h2{
	background:url(../images/icon-audio.png) left bottom no-repeat #DFF0FD;
	line-height:65px;
	font-size:20px;
	font-weight:300;
	color:#263044;
	padding-left:60px;
	margin-bottom:0;
}

#audio-slider{
	position:relative;
}

#audio-slider .owl-item{
	height:330px;
	text-align:center;
	color:#263044;
	font-size:16px;
}

#audio-slider .topic{
	font-size:15px;
	margin-bottom:15px;
}

#audio-slider .title{
	font-size:15px;
}

#audio-slider .blue1{
    background: #92CBF7;
    height: 100%;
}

#audio-slider .blue2{
	background:#6FB9F9;
    height: 100%;
}

#audio-slider div img{
	width:145px;
	padding-top:20px;
	margin:0 auto 15px;
}

#audio-slider div p{
	margin-bottom:0;
	padding:0 5px;
}

#audio-slider .owl-prev{
	position:absolute;
	top:20px;
	right:60px;
	background:url(../images/arrow-left.png) center no-repeat;
	width:24px;
	height:24px;
	font-size:0;
}

#audio-slider .owl-next{
	position:absolute;
	top:20px;
	right:25px;
	background:url(../images/arrow-right.png) center no-repeat;
	width:24px;
	height:24px;
	font-size:0;
}

.owl-controls {
    position: absolute;
    top: -65px;
    right: 0;
    width: 100%;
    height: 65px;
    z-index: 0;
}

.footer{
	background:#DFF0FD;
	padding:50px 0 20px 0;
	max-width:1240px;
	margin:0 auto;
}

.footer-logo{
	width:1005px;
	margin:0 auto 20px;
}

.footer-logo a{
	display:block;
	margin:0 20px;
	float:left;
}

.footer p{
	padding:0 10px;
	margin-bottom:20px;
	text-align:center;
}

.footer p a{
	color:#333;
}

.footer-media{
	width:350px;
	margin:0 auto 20px;
}

.footer-media a{
	display:block;
	margin:0 15px;
	float:left;
}

@media screen and (max-width: 990px) {
.main-content{
	padding:0 15px;
}

.site-header{
	padding:0 10px;
}

.home-banner{
	height:360px;
}
.home-banner-words {
    margin: 60px auto 0;
}
.home-intro .photo {
    margin-top: 20px;
}
.footer-logo{
	display:none;
}
}

@media screen and (max-width: 768px) {
.hero-slider .slide-title {
    margin-top: 25%;
}
.home-banner2{
	background-image:url(../images/main-banner2b.png) !important;
}
.banner-tc .home-banner2{
	background-image:url(../images/main-banner2b-tc.png) !important;
}
.banner-sc .home-banner2{
	background-image:url(../images/main-banner2b-sc.png) !important;
}
.home-banner4{
	background-image:url(../images/main-banner4b-en.png) !important;
	background-position:center !important;
}
.banner-tc .home-banner4{
	background-image:url(../images/main-banner4b-tc.png) !important;
}
.banner-sc .home-banner4{
	background-image:url(../images/main-banner4b-sc.png) !important;
}
.responsive-calendar {
    width: 100%;
    float: none;
	margin-bottom:20px;
}
.upcoming-event {
    width: 100%;
    float: none;
}
.newsticker li {
    padding: 20px 0;
}
.newsticker li .date {
	font-size:14px;
}
.newsticker li .topic {
	font-size:14px;
}

.home-intro .photo {
    width: 290px;
	margin:0 auto 20px;
    float: none;
}
.home-intro .quote {
    width: calc(100% - 40px);
    margin: 0 auto 20px;
    float: none;
}
.home-intro .quote p {
    font-size: 14px;
    line-height: 30px;
}

.home-media .video{
	width:100%;
	float:none;
	margin-bottom:20px;
}

.home-media .audio{
	width:100%;
	float:none;
}
.home-media .video h2, .home-media .audio h2{
	font-size:20px;
	letter-spacing:1px;
}
}

@media screen and (max-width: 480px) {
.home-banner-words {
	margin:60px auto 0;
}
.newsticker li .date {
    float: none;
    margin-bottom: 10px;
}
.newsticker li .topic {
    display: block;
    float: none;
    width: 100%;
}
.home-media .video iframe{
	height: 245px !important;
}
.footer-media{
	width:300px;
	margin:0 auto 20px;
}
.footer-media a{
	margin:0 10px;
}

.home-media .audio h2 {
    font-size: 14px;
	zline-height:18px;
}
}


.cd-container {
  width: 90%;
  max-width: 768px;
  margin: 2em auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../images/cd-top-arrow.svg) no-repeat center 50% #004175;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
  z-index: 99999;
  -webkit-border-radius: 30px; 
  -moz-border-radius: 30px; 
  border-radius: 30px; 
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: .5;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.cd-top:hover {
  background-color: #004175;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}



.morelink{
	display:none !important;
}
.moreellipses{
	display:none !important;
}
@media screen and (max-width: 990px) {
.morecontent span {
    display: none;
}
.mobile-navigation .sub-menu .morelink {
    display: block !important;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -15px;
    top: 4px;
    padding: 0;
	background:url(../images/menu-show.png) center no-repeat;
}

.mobile-navigation .sub-menu .less {
	background:url(../images/menu-hide.png) center no-repeat;
}
.menu-item{
	position:relative;
}
}



.inner-banner{
	background:url(../images/top-banner-news.png) center no-repeat;
	padding:23px 0;
	max-width:1240px;
	margin:0 auto 20px;
}

.inner-banner-about{
	background:url(../images/top-banner-about.png) center no-repeat;
}

.inner-banner-search{
	background:url(../images/top-banner-search.png) center no-repeat;
}

.inner-banner-information{
	background:url(../images/top-banner-information.png) center no-repeat;
}

.inner-banner-career{
	background:url(../images/top-banner-career.png) center no-repeat;
}

.inner-banner-event{
	background:url(../images/top-banner-event.png) center no-repeat;
}

.inner-banner-maritime-hub{
	background:url(../images/top-banner-maritime-hub.png) center no-repeat;
}

.banner-ship-finance{
	background:url(../images/banner-ship-finance.png) left center no-repeat;
	height:200px;
}
.banner-ship-broking{
	background:url(../images/banner-ship-broking.png) left center no-repeat;
	height:200px;
}
.banner-ship-mangement{
	background:url(../images/banner-ship-mangement.png) left center no-repeat;
	height:200px;
}
.banner-pilots{
	background:url(../images/banner-pilots.png) left center no-repeat;
	height:200px;
}
.banner-seagoing-vessels{
	background:url(../images/banner-seagoing-vessels.png) left center no-repeat;
	height:200px;
}
.banner-local-vessels{
	background:url(../images/banner-local-vessels.png) left center no-repeat;
	height:200px;
}
.banner-marine-insurance{
	background:url(../images/banner-marine-insurance.png) left center no-repeat;
	height:200px;
}
.banner-marine-legal-services{
	background:url(../images/banner-marine-legal-services.png) left center no-repeat;
	height:200px;
}
.inner-banner-connectivity{
	background:url(../images/banner-connectivity.png) center no-repeat;
}

.inner-banner-world-class-hub-port{
	background:url(../images/banner-world-class-hub-port.png) center no-repeat;
}
.inner-banner-media{
	background:url(../images/top-banner-media.png) left center no-repeat;
}


.inner-banner h1{
	background:url(../images/h1-bg.png) right center no-repeat;
	width:480px;
	height:76px;
	font-size:36px;
	color:#FFF;
	text-transform:uppercase;
	font-weight:300;
	line-height:76px;
	text-align:center;
}

.inner-banner .long-h1{
	background:url(../images/h1-bg-long.png) right center no-repeat;
	width:690px;
}

.maritime-services .inner-banner .long-h1{
	font-size:30px;
}



/************Whats's New************/
ul#filterOptions {
	margin: 30px 0;
	overflow: hidden;
	border-bottom: 2px solid #091E54;
}
ul#filterOptions li {
	 margin-right: 2px; 
	 float: left;
}
ul#filterOptions li a{
    padding: 14px 25px;
    color: #333;
    font-weight: 400;
    text-decoration: none;
    display: block;
    font-size: 16px;
    background: #A7CDDF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
ul#filterOptions li.active a {
    color: #FFF;
    background: #0182C6;
}
/*- -*/
/*- OUR DATA HOLDER -*/
#ourHolder {
	padding-bottom:80px;
}

#ourHolder div.item {
    background: #F4F8F9;
    border-bottom: 1px solid #ccc;
    height: 80px;
    padding: 10px 0;
    margin-bottom: 15px;
    display: table;
    width: 100%;
}

.news div.year {
	color:#091E54;
	border-bottom: 2px solid #091E54;
	padding-bottom:4px;
	padding-top:20px;
	margin-bottom:20px;
}

.news .year h2{
	font-size:18px;
	font-weight:400;
}

#ourHolder h3{
	font-size:18px;
	font-weight:400;
	color:#004a80;
	padding-top:15px;
	margin-bottom:15px;
}

#ourHolder .item .icon{
	float:left;
	width:124px;
	height:100%;
}

#ourHolder .icon-what-new {
	background:url(../images/icon-news.png) center no-repeat;
	float:left;
	width:124px;
	height:59px;
}

#ourHolder .icon-speeches{
	background:url(../images/icon-speeches.png) center no-repeat;
	float:left;
	width:124px;
	height:59px;
}

#ourHolder .icon-press-releases{
	background:url(../images/icon-press-releases.png) center no-repeat;
	float:left;
	width:124px;
	height:59px;
}

#ourHolder .icon-advertorials{
	background:url(../images/icon-advertorials.png) center no-repeat;
	float:left;
	width:124px;
	height:59px;
}
#ourHolder .item .icon p{
	font-size:16px;
	line-height:16px;
	color:#FFF;
	text-align:center;
	/*display:none;*/
}

#ourHolder .item .date{
    width: 150px;
	float:left;
	display:table;
    margin-bottom: 0;
	height:100%;
}

#ourHolder .item .date p{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#ourHolder .item .date p span{
	font-size:16px;
	font-weight:400;
	padding:3px 15px;
	border:1px solid #111;
	border-radius:20px;
	color:#111;
}

#ourHolder .item .title{
    width: calc(100% - 274px);
	float:left;
	display:table;
    margin-bottom: 0;
	height:100%;
}

#ourHolder div.item .title p{
    display: table-cell;
    vertical-align: middle;
    text-align: left;
	font-size:18px;
	color:#111;
	font-weight:400;
	padding-right: 30px;
}

#ourHolder div.item .title p a{
	color:#005895;
	font-weight:400;
	text-decoration:underline;
}

.more-news{
	font-size:25px;
	font-weight:400;
	color:#FFF;
	width:180px;
	text-align:center;
	padding:15px 15px 15px 0;
	display:block;
	margin:40px auto 0;
	background: url(../images/news-arrow.png) 120px center no-repeat #005995;
	border-radius:30px;
}

.news-details {
	padding-bottom:80px;
}

.news-details h2{
	font-size:30px;
	font-weight:300;
	color:#00235c;
	padding: 10px 70px 0;
	margin-bottom:30px;
}

.tc .news-details h2{
	font-weight:400;
}

.news-details h2 span{
    font-size: 16px;
    display: block;
    padding-top: 5px;
}
.news-details p{
	margin-bottom:30px;
}

.year2018{
	max-height: 1px;
}

.year2017{
	max-height: 1px;
}

.scrollbar-news{
	overflow:scroll;
	height:500px;
}

.news-content{
	padding:0 70px;
	text-align:justify;
}

.news-tc{
    font-family: '微軟正黑體',Microsoft JhengHei;
    font-weight: 400;
}


@media screen and (max-width: 990px) {
	#ourHolder div.item .title p {
    font-size: 16px;
}
.inner-banner {
    margin: 0 -15px 20px;
}
.inner-banner h1 {
    max-width: 480px;
	 width: 90%;
}
.inner-banner .long-h1{
    max-width: 600px;
	 width: 90%;
	 font-size:26px;
}
.maritime-services .inner-banner .long-h1{
	font-size:24px;
}
ul#filterOptions {
    margin: 20px 0 0 0;
    padding: 0;
    border-bottom: none;
}
ul#filterOptions li{
	margin-bottom:10px;
}

ul#filterOptions li a {
	font-size:15px;
    border-radius: 0;
    border: none;
}
	
ul#filterOptions li.active a {
    border-radius: 0;
    border: none;
}
.news-content{
	padding:0;
}
.news-details h2{
	padding: 10px 0 0 0;
}
}

@media screen and (max-width: 768px) {
.inner-banner .long-h1{
	 font-size:18px;
}
.maritime-services .inner-banner .long-h1{
	font-size:16px;
}
.news-details h2{
	font-size:20px;
	margin-bottom:20px;
}
.news-details h2 span{
    font-size: 14px;
}
.news-details p{
	font-size:14px;
	margin-bottom:20px;
}
.news-details a{
	word-break:break-all;
}

}

@media screen and (max-width: 600px) {
.inner-banner h1 {
    font-size: 22px;
}
.inner-banner .long-h1{
	 font-size:16px;
}
.maritime-services .inner-banner .long-h1{
	font-size:14px;
}
#ourHolder div.year {
    padding-top: 10px;
    margin-bottom: 10px;
}
#ourHolder h3 {
    font-size: 14px;
    padding-top: 10px;
    margin-bottom: 10px;
}

#ourHolder div.item {
    height: auto;
	border-bottom:none;
}

#ourHolder .icon-what-new, #ourHolder .icon-speeches, #ourHolder .icon-press-releases{
    float: none;
    width: 100%;
    padding: 15px 0 2px 0;
    height: auto;
	background-size:70px;
	background-size:auto 40px;
	padding:20px 0;
}

#ourHolder .item .icon p{
	font-weight:400;
}

#ourHolder .item .date {
    width: 100%;
    float: none;
    height: 100%;
}

#ourHolder .item .title {
    width: 100%;
    float: none;
    height: 100%;
}

#ourHolder .item .date p {
    display: block;
    text-align:left;
	padding:10px 10px 5px 10px;
	margin-bottom:0;
}

#ourHolder .item .date p span {
    padding: 0;
	border:none;
}

#ourHolder div.item .title p {
	padding:0 10px;
	padding-bottom:20px;
}

.more-news{
	font-size:20px;
	font-weight:400;
	color:#FFF;
	width:180px;
	text-align:center;
	padding:15px 15px 15px 0;
	display:block;
	margin:40px auto 0;
	background: url(../images/news-arrow.png) 120px center no-repeat #005995;
	border-radius:30px;
}
.news-details p{
	margin-bottom:10px;
}
.news-details h2 {
    margin-bottom: 10px;
}
}



/************HK Port************/
.port-map-area{
	background:#DBEDEF;
	width:100%;
	margin-bottom:130px;
}

.port-map{
	width:960px;
	height:903px;
	margin:0 auto;
	position:relative;
}

#map-image{
	width:100%;
}

#map-mobile{
	display:none;
	width:100%;
}

.legend{
	position:absolute;
	left:calc(50% - 405px);
	bottom: 40px;
	width:810px;
}

.legend-btn{
	width:260px;
	padding:10px 5px 10px 55px;
	background:#FFF;
	border:1px solid #FFF;
	border-radius:5px;
	margin:0 5px 10px 5px;
	display:block;
	float:left;
	font-size:13px;
	line-height:20px;
	color:#000;
}

.tc .legend-btn{
	font-size:14px;
}

.legend-btn:hover{
	border:1px solid #499251;
}

.legend-icon-1{
	background:url(../images/legend-1.png) 7px center no-repeat #FFF;
}

.legend-icon-1:hover > .port-map{
	background:url(../images/map-legend1-en.png) center no-repeat;
}

.legend-icon-2{
	background:url(../images/legend-2.png) 7px center no-repeat #FFF;
}

.legend-icon-3{
	background:url(../images/legend-3.png) 20px center no-repeat #FFF;
}

.legend-icon-4{
	background:url(../images/legend-4.png) 7px center no-repeat #FFF;
}

.legend-icon-5{
	background:url(../images/legend-5.png) 18px center no-repeat #FFF;
}

.legend-icon-6{
	background:url(../images/legend-6.png) 20px center no-repeat #FFF;
}

.legend-icon-7{
	background:url(../images/legend-7.png) 7px center no-repeat #FFF;
}

.legend-icon-8{
	background:url(../images/legend-8.png) 20px center no-repeat #FFF;
}

.legend-icon-9{
	background:url(../images/legend-9.png) 25px center no-repeat #FFF;
}

.legend-detail{
	background:#D9F0FA;
	position:relative;
	margin-bottom:100px;
}

.port-icon{
	position:absolute;
	left:0;
	top:-29px;
}

.port-photo{
	margin-bottom:20px;
}

.port-photo img{
	width:300px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}

.legend-detail h2{
	font-size:20px;
	padding-left:235px;
	text-transform:uppercase;
	color:#033f7d;
	margin-bottom:20px;
	font-weight:400;
	padding-top:25px;
}

.tc .legend-detail h2 {
    font-size: 24px;
    padding-top: 17px;
}

.legend-detail p{
	font-size:16px;
	margin-bottom:20px;
	font-weight:300;
}

.legend-detail .port-content{
	padding:0 20px 0px 20px;
  overflow: hidden;
}

.expand_btn_more, .expand_btn_less{
	display:block;
	background:#AAD7EC;
}

.expand_btn_more img, .expand_btn_less img{
	display:block;
	width:18px;
	margin:0 auto;
	padding:10px 0;
}


@media screen and (max-width: 990px) {
.port-map{
	width:100%;
	height:auto;
}

#map-image{
	display:none;
}

#map-mobile{
	display: block;
}

.legend{
	display:none;
}
}

@media screen and (max-width: 768px) {
.legend-detail h2 {
    font-size: 18px;
    padding-top: 15px;
}

.tc .legend-detail h2 {
    font-size: 22px;
    padding-top: 17px;
}

}


@media screen and (max-width: 600px) {
.legend-detail h2 {
    font-size: 16px;
    padding: 60px 20px 0 20px;
    margin-bottom: 5px;
}
.tc .legend-detail h2 {
    font-size: 18px;
    padding: 60px 20px 0 20px;
    margin-bottom: 5px;
}

.legend-detail p {
    font-size: 14px;
}
}


/************Information************/
.submission-form{
	margin-bottom:40px;
}

.submission-form fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.submission-form h2{
	background:#168DCC;
	padding:8px 15px;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
}

.submission-form .gray{
    color: #666;
    font-size: 14px;
    font-weight: 400;
	padding:5px 20px;
	margin-bottom:0;
	background: #DAE3F2;
}

.submission-form .group{
    background: #DAE3F2;
    margin-bottom: 20px;
    padding: 10px 20px 10px 20px;
}

.submission-form .msg-error{
	color:#F00;
	padding-bottom:5px;
}

.send-success{
	border:1px solid #CE6F26;
	color:#CE6F26;
	padding:10px;
}

.submission-form input[type="text"]{
	display: block;
	width:100%;
	max-width:500px;
	padding:3px 5px;
	margin-top:2px;
	border:1px solid #999;
}

.submission-form input[type="email"] {
    display: block;
    width: 100%;
    max-width: 500px;
    padding: 3px 5px;
    margin-top: 2px;
    border: 1px solid #999;
}

.submission-form select{
	display: block;
	width:calc(100% - 63px);
	max-width:500px;
	padding:2px 0;
	margin-top:2px;
	border:1px solid #999;
	float:left;
	margin-right:5px;
}

.submission-form textarea{
	display: block;
	width:100%;
	max-width:500px;
	height:100px;
	resize:none;
	padding:3px 5px;
	margin-top:2px;
	border:1px solid #999;
}

.submission-form .field{
	width:calc(50% - 20px);
	margin-right:20px;
	float:left;
	margin-bottom:20px;
}

.submission-form .field span, .submission-form .long-field span{
	color:#D2272F;
}

.submission-form .long-field{
	float:left;
	width:calc(100% - 20px);
	margin-right:20px;
	margin-bottom:20px;
}

.submission-form .add-business-type{
	float:left;
	display:block;
	width:20px;
	padding-top:5px;
	margin:0 4px;
}

.submission-form .submit{
	background:#07225D;
	color:#FFF;
	border:none;
	padding:7px 25px;
	border-radius:20px;
	margin-bottom:20px;
}

.submission-form .confrim-checkbox{
	float:left;
	margin-top:3px;
}
.submission-form .confrim{
	width: calc(100% - 20px);
    display: inline-block;
    float: right;
}

.publications-date{
	font-weight:400;
	color:#091E54;
	padding-left:70px;
	text-decoration: underline;
	font-weight: bold;
}

.publications{
	padding-bottom:40px;
}

@media screen and (max-width: 600px) {
.submission-form .field{
	width:100%;
	margin-right:0px;
	float:none;
}

.submission-form .long-field{
	width:100%;
	float:none;
}
}






/************About Us************/
.about-bg{
	background-image:url(../images/about-bg.png);
	background-position:center;
	background-size:cover;
	padding:50px 0;
	margin-bottom:20px;
}

.about-quote{
    background: #FFF;
	width:1074px;
	padding:55px 60px;
	margin:0 auto 40px;
	position:relative;
    border: 8px solid #074A7E;
    border-radius: 60px;
}

.about-quote-left{
	float:left;
	width:189px;
}

.about-quote-right{
	float:right;
	width:720px;
}

.about-quote-right p{
	font-size:16px;
	color:#004a80;
	font-weight:400;
	text-align:justify;
	text-justify: inter-ideograph; 
}

.about-quote-right p span{
	font-size:25px;
	font-weight:700;
}

.about-quote-right .name{
	text-align:right;
	margin-bottom:5px;
}

.quote-left {
    position: absolute;
    left: -30px;
    top: 20px;
}

.quote-right{
    position: absolute;
    right: -30px;
    bottom: 20px;
}

.about-chart1{
	display:block;
	width:calc(100% - 40px);
	max-width:612px;
	margin:0 auto 30px;
}

.about-bg img[usemap] {
    border: none;
    height: auto;
	max-width:612px;
	margin:0 auto 30px;
}

.about-btn-icon01{
    display: block;
    margin: 0 auto 30px;
    padding: 17px 50px 17px 115px;
    width: 606px;
    background: url(../images/about-icon01.png) 55px center no-repeat #005995;
    border-radius: 50px;
    color: #FFF;
    line-height: 27px;
    font-size: 16px;
    text-decoration: underline;
}

.membership-of-HKMPDB{
	width:calc(100% - 40px);
	margin:0 auto 40px;
	max-width:1034px;
	padding:0 20px;
	background:#FFF;
	color:#6082a5;
}

.membership-of-HKMPDB h2{
	font-weight:400;
	font-size:17px;
	padding-top:20px;
}

.membership-of-HKMPDB p{
	margin-bottom:0;
	font-size: 17px;
    line-height: 22px;
	font-weight:300;
}

.membership-of-HKMPDB .title{
	font-style:italic;
	font-weight:400;
	margin-top:20px;
}

@media screen and (max-width: 1274px) {
.about-bg {
    margin: 0 -15px;
}
}
@media screen and (max-width: 1200px) {
.about-quote {
    background: #FFF;
    border: 8px solid #074A7E;
    border-radius: 60px;
    width: calc(100% - 100px);
    box-shadow: 0 7px #ccc;
	padding: 30px 60px;
}
.about-quote-right {
    float: right;
    width: calc(100% - 230px);
}
}
@media screen and (max-width: 990px) {
.about-us .inner-banner {
	margin-bottom:0;
}
}
@media screen and (max-width: 768px) {
.about-quote {
    padding: 30px 50px;
}
.about-quote-left {
    float: none;
	display:block;
	width:100%;
	max-width:190px;
	margin:0 auto 20px;
}
.about-quote-right {
    float: none;
    width: calc(100% - 20px);
	margin:0 auto;
}
.about-quote-right p {
    font-size: 14px;
}
.about-quote-right p span {
    font-size: 20px;
}
.membership-of-HKMPDB p{
	font-size: 16px;
    line-height: 20px;
}
}

@media screen and (max-width: 600px) {
.about-quote {
    width: calc(100% - 50px);
	 border: 6px solid #074A7E;
    padding: 20px 15px;
}
.about-quote-left {
	max-width:150px;
}
.quote-left, .quote-right{
    width: 50px;
}
}

.contact-info p{
	line-height:25px;
	margin-bottom:12px;
}

.contact-info-content{
	padding:0 70px;
}

.contact-info .tel{
	padding-left:30px;
	background:url(../images/icon-tel.png) 2px center no-repeat;
}

.contact-info .fax{
	padding-left:30px;
	background:url(../images/icon-fax.png) 2px center no-repeat;
}

.contact-info .email{
	padding-left:30px;
	background:url(../images/icon-email.png) 2px center no-repeat;
}

.contact-info .mail{
	padding-left:30px;
	background:url(../images/icon-mail.png) 2px 5px no-repeat;
}

.terms-of-reference{
	padding:0 70px 30px 70px; 
	text-align:justify;
}

.terms-of-reference ul{
	padding-left:20px;
	margin-bottom:30px;
}

.terms-of-reference ul li{
	list-style-type: lower-alpha;
	margin-bottom:15px;
	list-style-position:outside;
}

.vision-statement{
	padding-bottom:30px;
}

.vision-statement-content{
	padding:0 70px;
	text-align:justify;
}

.vision-statement p{
	line-height:30px;
	margin-bottom:0;
}

.vision-statement .bold{
	font-weight:400;
}

.vision-statement p span{
	color:#004a80;
}

.vision-img{
	padding-top:40px;
	width:100%;
	display:block;
}

.committees-bg{
	background-image:url(../images/committees-bg.jpg);
	background-position:center;
	background-size:cover;
	padding:50px 0;
}

.committees-bg img[usemap] {
    border: none;
    height: auto;
	max-width:612px;
	margin:0 auto ;
}

.committees-blue-bg{
	background:#F2FEFF;
	padding:50px 0;
}

.committees-white-bg{
	background:#FFF;
	padding:50px 0;
}

.committees-content{
	width:100%;
	margin:0 auto;
	max-width:1240px;
	padding:0 20px;
}

.committees-content h2{
	font-size:18px;
	color:#1c497c;
	font-weight:400;
	margin-bottom:20px;
}

.committees-icon{
	width:125px;
	margin:10px 40px;
	float:left;
}

.committees-words{
	width:calc(100% - 220px);
	float:right;
  font-size: 16px;
}

.committees-words p{
	margin-bottom:10px;
}

.committees-words ul{
	padding-left:20px;
	margin-bottom:10px;
}

.committees-words ul li{
	list-style-type: lower-alpha;
	margin-bottom:5px;
	list-style-position:outside;
}

.membership{
	max-height: 1px;
}

.membership p{
	margin-bottom:0;
	/*font-size:15px;*/
  font-size:16px;
	font-weight:300;
  
}

.membership-list p{
	margin-bottom:0;
	/*font-size:15px;*/
  font-size:16px;
	font-weight:300;
}

.membership .title{
	font-style:italic;
	font-weight:400;
	margin-top:20px;
}

.membership h3{
	margin-bottom:10px;
	color:#018cce;
}

.membership-expand{
	width:115px !important;
	background:url(../images/membership-more.png) right center no-repeat;
	padding-right:20px;
	font-weight:400;
	color:#018cce;
	text-decoration:underline;
	font-size:16px;
}

.tc .membership-expand {
    width: 55px !important;
}

.membership-collapse{
	width:110px !important;
	background:url(../images/membership-less.png) right center no-repeat;
	padding-right:20px;
	font-weight:400;
	color:#018cce;
	font-size:15px;
	margin-top:20px;
}


@media screen and (max-width: 1274px) {
.committees-bg {
    margin: 0 -15px;
}
.committees-blue-bg{
    margin: 0 -15px;
}
.committees-white-bg{
    margin: 0 -15px;
}
}

@media screen and (max-width: 990px) {
.vision-statement-content{
	padding:0;
}
.contact-info-content{
	padding:0;
}
.terms-of-reference{
	padding:0 0 30px 0; 
}
}

@media screen and (max-width: 768px) {
.committees-content h2 {
	text-align:center;
}
.vision-statement p{
	line-height:22px;
	margin-bottom:10px;
	font-size: 14px;
}
.terms-of-reference{
	font-size:14px;
}
.committees-icon {
	display:block;
    width: 125px;
    margin: 10px auto 20px;
    float: none;
}
.committees-words {
    width: 100%;
    float: none;
}
.contact-info p {
	font-size:14px;
}
}






.statistics-type .item{
	width:calc(50% - 10px);
	height:180px;
	float:left;
	background-position:center;
	background-size:cover;
	margin-bottom:20px;
}

.statistics-type .statistics01{
	margin-right:20px;
	background-image:url(../images/statistics01.png);
}

.statistics-type .statistics02{
	background-image:url(../images/statistics02.png);
}

.statistics-type .statistics03{
	margin-right:20px;
	background-image:url(../images/statistics03.png);
}

.statistics-type .statistics04{
	background-image:url(../images/statistics04.png);
}

.statistics-type .item p{
	font-size:16px;
	font-weight:300;
	width:320px;
	padding-top:20px;
	padding-right:20px;
	float: right;
	color:#111;
	margin-bottom:20px;
}

.tc .statistics-type .item p{
	font-size:24px;
}

.statistics-type .download-btn{
	width:320px;
	float: right;
}

.statistics-type .download-btn a{
	color:#FFF;
	border-radius:30px;
	line-height:47px;
	display:block;
	float:left;
	font-size:15px;
	font-weight:300;
}


.statistics-type .download-btn .btn-pdf{
	background:url(../images/icon-pdf.png) 20px center no-repeat #3972BC;
	padding:0 20px 0 50px;
	margin-right:15px;
}

.statistics-type .download-btn .btn-excel{
	background:url(../images/icon-excel.png) 20px center no-repeat #3972BC;
	padding:0 20px 0 50px;
}

.statistics-type .download-btn .btn-link{
	background:url(../images/icon-link.png) 30px center no-repeat #3972BC;
	padding:0 40px 0 70px;
}

@media screen and (max-width: 1140px) {
.statistics-type .item p{
	font-size:15px;
	width:270px;
}

.tc .statistics-type .item p{
	font-size:20px;
}

.statistics-type .download-btn{
	width:270px;
	float: right;
}

.statistics-type .download-btn a {
    font-size: 12px;
}

.statistics-type .download-btn .btn-pdf{
	background:url(../images/icon-pdf.png) 15px center no-repeat #3972BC;
	padding:0 10px 0 40px;
	margin-right:15px;
}

.statistics-type .download-btn .btn-excel{
	background:url(../images/icon-excel.png) 10px center no-repeat #3972BC;
	padding:0 10px 0 40px;
}

.statistics-type .download-btn .btn-link{
	background:url(../images/icon-link.png) 15px center no-repeat #3972BC;
	padding:0 30px 0 60px;
}
}

@media screen and (max-width: 900px) {
.statistics-type .item{
	width:100%;
	float:none;
	background-position:left center;
}
.statistics-type .statistics01{
	margin-right:0;
	background-image:url(../images/statistics01m.png);
}

.statistics-type .statistics02{
	background-image:url(../images/statistics02m.png);
}

.statistics-type .statistics03{
	margin-right:0;
	background-image:url(../images/statistics03m.png);
}

.statistics-type .statistics04{
	background-image:url(../images/statistics04m.png);
}

.statistics-type .item p{
	width:calc(100% - 220px);
	padding-top:30px;
}

.statistics-type .download-btn{
	width:calc(100% - 220px);
}

}

@media screen and (max-width: 768px) {
.statistics-type .item p{
	font-size:15px;
	margin-bottom:10px;
}
}

@media screen and (max-width: 500px) {
.statistics-type .item p{
	font-size:14px;
	width:calc(100% - 180px);
}
.tc .statistics-type .item p {
    font-size: 16px;
}
.statistics-type .item p {
    padding-top: 20px;
	text-align:center;
}
.statistics-type .download-btn {
    width: 100%;
}
.statistics-type .download-btn a{
	float:right;
	margin-right:10px;
}
.statistics-type .download-btn .btn-pdf{
	margin-right:30px;
}
.statistics-type .download-btn .btn-link{
	margin-right:30px;
}
}


.reports-type .item{
	width:calc(50% - 10px);
	height:180px;
	float:left;
	margin-bottom:20px;
}

.reports-type .reports01{
	margin-right:20px;
	background:url(../images/reports01.png) left center no-repeat #C8E0E7;
}

.reports-type .reports02{
	background:url(../images/reports02.png) left center no-repeat #C8E0E7;
}

.reports-type .reports03{
	margin-right:20px;
	background:url(../images/reports03.png) left center no-repeat #C8E0E7;
}

.reports-type .reports04{
	background:url(../images/reports04.png) left center no-repeat #C8E0E7;
}

.reports-type .reports05{
	margin-right:20px;
	background:url(../images/reports05.png) left center no-repeat #C8E0E7;
}

.reports-type .reports06{
	background:url(../images/reports06.png) left center no-repeat #C8E0E7;
}

.reports-words{
	padding:20px 10px 0 180px;
}

.reports-words p{
	font-size:18px;
	line-height:27px;
	margin-bottom:5px;
}

.reports-words a{
    background: #3972BC;
	padding:10px 20px;
    color: #FFF;
    border-radius: 30px;
    line-height: 20px;
    display: block;
    float: left;
    font-size: 15px;
    font-weight: 400;
	margin-right:10px;
	margin-bottom:5px;
}
.tc .reports-words p {
    margin-bottom: 25px;
}
@media screen and (max-width: 1140px) {
.reports-words p{
	font-size:17px;
	line-height:21px;
}
}

@media screen and (max-width: 990px) {
.reports-words p{
	font-size:17px;
	line-height:20px;
}
.reports-words a {
    padding: 7px 20px;
    font-size: 13px;
}
}

@media screen and (max-width: 900px) {
.reports-type .item{
	width:100%;
	float:none;
}
}

@media screen and (max-width: 500px) {
.reports-words p{
	font-size:14px;
	line-height:16px;
}
.reports-words a {
    padding: 7px 20px;
    font-size: 12px;
}
}



#legislative-tab {
	margin: 30px 0;
	overflow: hidden;
	border-bottom: 2px solid #091E54;
}
#legislative-tab li {
	 margin-right: 2px; 
	 float: left;
}
#legislative-tab li a{
    padding: 14px 25px;
    color: #333;
    font-weight: 400;
    text-decoration: none;
    display: block;
    font-size: 16px;
    background: #A7CDDF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#legislative-tab li.active a {
    color: #FFF;
    background: #0182C6;
}

.legislative-tab {
	padding-bottom:20px;
}

.legislative-tab h2{
	color:#091E54;
	border-bottom: 2px solid #091E54;
	padding-bottom:4px;
	padding-top:20px;
	margin-bottom:20px;
	font-size:18px;
	font-weight:400;
}

.legislative-tab .blue-box{
	width:100%;
	height:80px;
	background:#DFF0FC;
	margin-bottom:10px;
	border-radius:3px;
	box-shadow:0 1px 0 #ccc;
}

.legislative-tab td{
	padding:10px 20px;
}

.legislative-tab .date{
	width:150px;
	text-align:center;
	color:#003e7d;
	font-weight:400;
}

.legislative-tab span{
	display:block;
	border:1px solid #003e7d;
	border-radius:15px;
	padding:2px 0;
}

.legislative-tab .questions{
	font-size:18px;
	text-align:left;
	font-weight:400;
	color:#000;
}

.legislative-tab .legco{
	margin-bottom:20px;
}

.legislative-tab .legco-white{
	width:100%;
	height:80px;
	background:#FFF;
	margin-bottom:0;
	border:1px solid #666;
}

.legislative-tab .legco-purple{
	background-color:#DFF0FF;
	padding:15px 20px;
	border-bottom:1px solid #666;
	border-right:1px solid #666;
	border-left:1px solid #666;
}

.legislative-tab .legco-purple p{
	margin-bottom:10px;
	color:#000;
}

.legislative-tab .legco-blue{
	background-color:#D3F1FF;
	padding:15px 20px;
	border-bottom:1px solid #666;
	border-right:1px solid #666;
	border-left:1px solid #666;
}

.legislative-tab .legco-blue p{
	margin-bottom:10px;
	color:#000;
}

.legislative-tab p a{
	text-decoration:underline;
	color:#206f96;
}

.legislative-tab .download-btn{
	display:block;
	width:100%;
	max-width:570px;
	padding:20px 15px 20px 75px;
	color:#FFF;
	font-size:14px;
	background:url(../images/download.png) 25px center no-repeat #387DCC;
	border-radius:5px;
}

#legislative-tab-3{
	padding-bottom:80px;
}
.information .related-websites{
	padding-bottom:60px;
	padding-left:0;
	background:none;
}

.website-type{
	font-size:18px;
	color:#000;
	margin-bottom:10px;
}

.related-websites ul{
	margin-bottom:30px;
	margin-left:20px;
}

.related-websites ul li{
	list-style-type: square;
	list-style-position:outside;
	padding-left:20px;
	font-size:15px;
	color:#768c9f;
	margin-bottom:5px;
}

.related-websites ul li a{
	color:#475b6c;
}

.career-tab-group .related-websites ul li a{
	color:#2687C6;
}

@media screen and (max-width: 990px) {
#legislative-tab {
    margin: 20px 0 0 0;
    padding: 0;
    border-bottom: none;
}
#legislative-tab li{
	margin-bottom:10px;
	width:100%;
}

#legislative-tab li a {
	font-size:15px;
    border-radius: 0;
    border: none;
	width:100%;
}
	
#legislative-tab li.active a {
    border-radius: 0;
    border: none;
}
}


@media screen and (max-width: 600px) {
.legislative-tab td {
    padding: 10px;
}
.legislative-tab .date {
    width: 105px;
    font-size: 12px;
}
.legislative-tab .questions {
    font-size: 14px;
}
.legislative-tab .legco-purple, .legislative-tab .legco-blue{
    padding: 10px 15px;
	font-size:14px;
}
.legislative-tab h2 {
    font-size: 16px;
}
.legislative-tab {
    padding-bottom: 0;
}
}


/************Publications************/

#publications-tab {
	margin: 30px 0;
	overflow: hidden;
	border-bottom: 2px solid #091E54;
}
#publications-tab li {
	 margin-right: 2px; 
	 float: left;
}
#publications-tab li a{
    padding: 14px 25px;
    color: #333;
    font-weight: 400;
    text-decoration: none;
    display: block;
    font-size: 16px;
    background: #A7CDDF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#publications-tab li .selected{
    color: #FFF;
    background: #0182C6;
}

.publications-tab {
	padding-bottom:20px;
}

.publications-grid{
	width:25%;
	float:left;
	margin-top:80px;
	min-height:280px;
}

.publications-item{
	width:276px;
	margin:0 auto;
}

.publications-item .blue-bg{
	width:100%;
	zbackground:#BEDEEB;
	height:110px;
	zborder-right:5px solid #4B5687;
	margin-bottom: 70px;
	position:relative;
}

.publications-img{
    position: absolute;
    top: -50px;
    left: calc(50% - 82px);

    max-width: 160px;
}

.publications-item .download{
	display:block;
	width:80px;
	float:right;
	color:#004f69;
	font-weight:400;
	margin-right:10px;
	padding-bottom:30px;
	padding-top:30px;
	text-decoration:underline;
	zbackground:url(../images/publications-download.png) bottom center no-repeat;
}

.tc .publications-item .download {
    width: 36px;
    margin-right: 30px;
}

.publications-item p{
	font-size:17px;
	margin-bottom:0;
	text-align:center;
	padding: 0 20px;
}

@media screen and (max-width: 990px) {
.publications-grid{
	width:50%;
}
}

@media screen and (max-width: 660px) {
.publications-grid{
	width:100%;
}

.publications-grid {
    margin-top: 60px;
    min-height: 260px;
}
}


/************Event************/
.activities-and-visits{
	padding-bottom:50px;
}

.activities-and-visits h2{
	font-size:18px;
	color:#00235c;
	border-bottom:2px solid #00235c;
	font-weight:400;
	padding-top:20px;
	padding-bottom:5px;
	margin-bottom:20px;
}

.activities-words{
	padding:0 70px;
	text-align:justify;
}

.activities-and-visits p a{
	color:#347BA2;
	text-decoration:underline;
}

.activities, .visits{
	margin:0 -1%;
}

.activities-box{
	width:23%;
	float:left;
	margin:0 1% 20px;
	border:1px solid #666;
  	height: 310px;
	padding-bottom: 25px;
}

.activities-box .activities-img{
	width:100%;
	height: 60%;
	margin-bottom:10px;
}

.activities-box .date{
	color:#007CAD;
	padding:0 10px;
}

.activities-box .date span{
	padding:3px 20px;
	border:1px solid #007CAD;
	border-radius:20px;
	margin-bottom:15px
}

.activities-box .topic{
	display:block;
	color:#333;
	padding:0 10px;
	font-size:18px;
	min-height:80px;
}

.activities-details h2{
	font-size:30px;
	margin-bottom:20px;
	color:#00235c;
	font-weight:400;
}

.activities-details h2 span {
    font-size: 16px;
    display: block;
    padding-top: 5px;
}

.activities-details p{
	margin-bottom:20px;
}

.activities-content{
	margin-bottom:40px;
}

.activities-photo{
	margin:0 -1% 40px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.logo_pop{
	margin:0 -1% 0px !important;
}

.activities-photo a{
	display:block;
	float:left;
	margin:0 1% 20px;
}

.activities-photo a img{
	width:100%;
	border-radius:5px;
	aspect-ratio: 4 / 3;

}

@media screen and (max-width: 990px) {
.activities-words{
	padding:0;
}

.activities-box {
    width: 31%;
}
.activities-box .topic{
	font-size:16px;
}
}

@media screen and (max-width: 768px) {
.activities-box {
    width: 48%;
}
.activities-photo a{
	width:48%;
}

}


@media screen and (max-width: 480px) {
.activities, .visits{
	margin:0;
}
.activities-box {
    width: 100%;
}
.activities-box .topic {
    min-height: 40px;
	margin-bottom:10px;
}
.activities-photo a{
	width:100%;
	margin:0 0 20px ;
}

}



/************Local Training************/
.local-bg{
	background-image:url(../images/local-bg.png);
	background-position:center;
	background-size:cover;
	padding:40px 0;
	margin-bottom:20px;
}

.course-intro{
	width:100%;
	max-width:1240px;
	margin:0 auto;
	padding:0 20px;
}

.course-intro p{
	font-size:24px;
}

.course-type-all{
	margin:0 -1%;
}

.course-type{
	width:31.33%;
	height:140px;
	padding:0 80px 0 100px;
	display:table;
	position:relative;
	border-radius:5px;
	box-shadow:0 2px 0 #bbb;
	float:left;
	margin:0 1% 20px;
}

.course-icon1{
	background:url(../images/couse1.png) 25px center no-repeat #A6DFED;
}

.course-icon2{
	background:url(../images/couse2.png) 15px center no-repeat #A6DFED;
}

.course-icon3{
	background:url(../images/couse3.png) 25px center no-repeat #A6DFED;
}

.course-icon4{
	background:url(../images/couse4.png) 25px center no-repeat #A6DFED;
}

.course-icon5{
	background:url(../images/couse5.png) 25px center no-repeat #A6DFED;
}

.course-icon6{
	background:url(../images/couse6.png) 25px center no-repeat #A6DFED;
}

.course-type p{
	display:table-cell;
	font-size:24px;
	vertical-align: middle;
	color:#111;
	word-break: break-strict;
}

.couse-more{
	position:absolute;
	right:15px;
	top:41px;
}

@media screen and (max-width: 1200px) {
.course-type p {
    font-size: 18px;
}
}

@media screen and (max-width: 990px) {
.local-bg {
    margin: 0 -15px 20px;
}
.course-type {
    width: 48%;
}
.local-training .inner-banner {
    margin: 0 -15px 0;
}
.course-intro p {
    font-size: 20px;
}
}

@media screen and (max-width: 680px) {
.course-intro p {
    font-size: 16px;
}
.course-type-all {
    margin: 0;
}
.course-type {
    width: 100%;
	height:80px;
	margin: 0 0 10px 0;
}
.couse-more {
    top: 20px;
	width:40px;
}
.course-type {
    background-size: auto 50px;
}
}

#couse-tab {
	margin: 30px 0 0 0;
	overflow: hidden;
}
#couse-tab li {
	 float: left;
}
#couse-tab li a{
    padding: 14px 25px;
    font-weight: 400;
    text-decoration: none;
    display: block;
    font-size: 16px;
    width: 100%;
    color: #222;
	background: #A7CDDF;
}
#couse-tab li .selected{
    color: #FFF;
    background: #0182C6;
}

.couse-tab{
	padding:40px;
	border:1px solid #bfd1da;
	background:#FFF;
	margin-bottom:40px;
}

.couse-tab p{
	margin-bottom:0;
}

.couse-tab .filter p{
	display:inline-block;
	float:left;
	margin-bottom:0;
	margin-right:10px;
	font-size:14px;
	line-height:30px;
}

.couse-tab .filter{
	margin-bottom:20px;
}

.couse-tab .filter > div{
	float:left;
}

.couse-tab .filter select{
	float:left;
	width:220px;
	background:#DFE7EB;
	border:1px solid #768c9f;
	height:28px;
}

.couse-tab .academic-level{
	margin-left:30px;
}

.couse-tab table{
	width:100%;
	margin-bottom:20px;
}

.couse-tab table th, .couse-tab table td{
	border:1px solid #768c9f;
	text-align:center;
	vertical-align:middle;
	padding:20px 15px;
	font-size:14px;
}

.couse-tab table .th{
	padding:30px 15px;
	background:#F7FCFF;
}

.couse-tab table img{
	max-width:30px;
	max-height:30px;
	width:auto;
	height:auto;
	margin:0 5px;
}

.local-training .hr-line{
	border-top:1px solid #999;
	padding-bottom:40px;
}

.local-training .download-btn{
	display:block;
	width:100%;
	max-width:570px;
	padding:20px 15px 20px 75px;
	color:#FFF;
	font-size:14px;
	background:url(../images/download.png) 25px center no-repeat #387DCC;
	border-radius:5px;
	margin-bottom:40px;
}

.couse-popup {
	width:700px;
	height:400px;
}

.couse-popup h4{
	font-size:20px;
	margin-bottom:10px;
}

.couse-popup ul{
	padding-left:20px;
}

.couse-popup ul li{
	font-size:16px;
	margin-bottom:5px;
	list-style-type:square;
	list-style-position:outside;
}

#lightcase-info{
	display:none !important;
}

@media screen and (max-width: 990px) {
.couse-popup {
	width: auto;
	height:auto;
}

.couse-tab {
    padding: 20px;
    margin-bottom: 20px;
}

#couse-tab li a {
    padding: 14px 15px;
    font-size: 15px;
}
.couse-tab .filter > div{
	float:none;
	margin-bottom:10px;
}
.couse-tab .academic-level{
	margin-left:0px;
}
.couse-tab table th, .couse-tab table td{
	padding:10px;
	font-size:13px;
}

.couse-tab table .th{
	padding:20px 10px;
}
}

@media screen and (max-width: 800px) {
.by-academic-institutions{
	width:100%;
	overflow-x: scroll;
}
}


@media screen and (max-width: 768px) {
.couse-tab table th, .couse-tab table td{
	font-size:12px;
}
#couse-tab li{
	float:none;
	margin-bottom:5px;
}
#couse-tab li a {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
}

@media screen and (max-width: 640px) {
.couse-popup h4{
	color:#FFF;
}
.couse-popup ul li{
	color:#FFF;
}
}




/************Event************/
#event-tab {
	margin: 30px 0;
	overflow: hidden;
	border-bottom: 2px solid #091E54;
}
#event-tab li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
    background: #A8CDDE;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#event-tab li a {
    padding: 14px 25px;
    font-weight: 400;
    text-decoration: none;
    display: block;
    font-size: 16px;
    width: 100%;
    color: #222;
}

#event-tab .ui-tabs-active a{
	color:#FFF;
}

#event-tab .active {
    background: #1483C4;
}

#event-tab .active a {
    color: #FFF;
}

#event-tab li .selected{
    color: #FFF;
    background: #0182C6;
}

.event-tab {
	padding-bottom:20px;
}

#event-2017, #event-2016{
	padding:0 70px;
}

.event-box{
	width:23%;
	float:left;
	margin:0 1% 20px;
	border:1px solid #666;
	background:#FCFEFF;
	min-height: 440px;
}

.event-box h2{
	padding:13px 8px;
	background:#1F84C2;
	min-height:70px;
	color:#FFF;
	font-weight:400;
	font-size:14px;
	line-height:22px;
}

.tc .event-box h2{
	font-size:17px;
}

.tc .event-box h2 .text-en{
	font-size:14px;
}

.event-box h2 a{
	display:block;
	color:#FFF;
	text-align:center;
}

.event-box .Global-Maritime-Forum{
	padding-top:25px;
}


.event-box .event-img{
	width:100%;
}

.event-list{
	margin:0 -1%;
}

.event-info{
	padding:10px 5px  5px  5px;
}

.event-info .row-d-t{
	height:68px;
}

.event-info .date{
	width:50%;
	float:left;
	padding-top:35px;
	background:url(../images/event-date.png) top center no-repeat;
	text-align:center;
	font-size:13px;
	font-weight:400;
}

.event-info .time{
	border-left:1px solid #666;
	width:calc(50% - 1px);
	float:left;
	padding-top:35px;
	background:url(../images/event-time.png) top center no-repeat;
	text-align:center;
	font-size:13px;
	font-weight:400;
}

.event-info .location{
	border-top:1px solid #666;
	padding:10px 0 10px 28px;
	background:url(../images/event-location.png) 3px 12px no-repeat;
	font-size:14px;
	margin-bottom:0;
}

.event-info .type{
	border-top:1px solid #666;
	padding:10px 0 10px 28px;
	background:url(../images/event-type.png) 3px 12px no-repeat;
	font-size:14px;
	margin-bottom:0;
}

.tc .event-info .location{
	font-size:16px;
}

.tc .event-info .type{
	font-size:16px;
}

.past-event{
	padding-bottom:10px;
	margin-bottom:20px;
	border-bottom:1px solid #666;
	font-size:16px;
	font-weight:400;
}

.past-event .date{
	margin-bottom:5px;
	color:#009CB1;
}

.past-event-detail{
	zmax-height: 1px;
	font-weight:300;
	text-align: justify;
}

.tc .past-event-detail{
	font-weight:400;
}

.past-event-detail .label{
	min-width:110px;
}

.past-event-detail .label2{
	min-width:160px;
}

.past-event-detail span{
	display:inline-block;
}

.past-event-detail a{
	text-decoration:underline;
}

.past-event-detail[aria-expanded=true]{
	zheight:auto !important;
}

.past-event .membership-collapse {
	margin-top:0;
}

.event-details h2{
	font-size:30px;
	margin-bottom:20px;
	color:#00235c;
	font-weight:400;
}

.event-details p{
	margin-bottom:10px;
}

.event-content{
	padding-bottom:60px;
}

.event-content .blue{
	color:#178DCC;
	padding-top:20px;
	font-weight:400;
	margin-bottom:5px;
}

.event-words{
	padding:0 70px;
	text-align:justify;
}

.event-detail-info .date{
	padding:5px 0 5px 32px;
	background:url(../images/event-date.png) 3px center no-repeat;
	margin-bottom:0;
}

.event-detail-info .time{
	padding:5px 0 5px 32px;
	background:url(../images/event-time.png) 3px center no-repeat;
	margin-bottom:0;
}

.event-detail-info .location{
	padding:5px 0 5px 32px;
	background:url(../images/event-location.png) 3px center no-repeat;
	margin-bottom:0;
}

.event-detail-info .type{
	padding:5px 0 5px 32px;
	background:url(../images/event-type.png) 3px center no-repeat;
	margin-bottom:0;
}

.event-content .list li { list-style-type: disc; }


@media screen and (max-width: 1160px) {
.event-box {
    width: 31%;
}
.event-words{
	padding:0;
}
.event-content a{
	word-break:break-all;
}
#event-2017, #event-2016{
	padding:0;
}
.tc .event-info .row-d-t {
    height: 88px !important;
}
}

@media screen and (max-width: 880px) {
.event-box {
    width: 48%;
}
.past-event{
	font-size:14px;
}
.event-details{
	font-size:14px;
}
.event-details h2{
	font-size:20px;
}
.event-content .blue{
	padding-top:10px;
}
#event-tab li {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    margin-bottom: 5px;
    width: 100%;
}
}


@media screen and (max-width: 600px) {
.event-list{
	margin:0;
}
.event-box {
    width: 100%;
    margin: 0 0 20px 0;
}
.event-box .topic {
    min-height: 40px;
	margin-bottom:10px;
}
}





/************A Myriad of Maritime Services************/
.maritime-services-bg{
	background-image:url(../images/hkmsc-bg.png);
	background-position:center bottom;
	background-size:cover;
	padding:50px 0;
	height:950px;
	margin-bottom:20px;
}

.hkmsc{
    width: calc(100% - 40px);
    padding: 20px 0;
	height:100%;
	max-width:1400px;
	margin:0 auto;
	position:relative;
}

.hkmsc h2{
	font-size:24px;
	line-height:34px;
	letter-spacing:2px;
	color:#FFF;
	background:#07225D;
	border-radius:100px;
	text-align:center;
	font-weight:400;
	padding:30px 0;
	width:440px;
	position:absolute;
	left:calc(50% - 220px);
	top:calc(50% - 64px);
}

.hkmsc .left-item, .hkmsc .right-item{
	display:block;
	width:330px;
	position:absolute;
}
	
.hkmsc h3{
	width:170px;
	font-size:24px;
	line-height:34px;
	font-weight:400;
	margin-top:34px;
}
	
.hkmsc .short{
	padding-right:30px;
}
	
.hkmsc .icon{
	display:block;
	width:144px;
}
	
.hkmsc .icon img{
	width:100%;
}
	
.hkmsc .left-item h3{
	float:left;
	text-align:right;
}
	
.hkmsc .right-item h3{
	float:right;
	text-align:left;
}
	
.hkmsc .left-item .icon{
	float:right;
}
	
.hkmsc .right-item .icon{
	float:left;
}	

.hkmsc .item01{
	top:0;
	left:200px;
}	

.hkmsc .item02{
	top:130px;
	left:100px;
}	

.hkmsc .item03{
	top:260px;
	left:0;
}	

.hkmsc .item04{
	top:420px;
	left:0;
}	

.hkmsc .item05{
	top:550px;
	left:100px;
}	

.hkmsc .item06{
	top:680px;
	left:200px;
}	

.hkmsc .item07{
	top:0;
	right:200px;
}	

.hkmsc .item08{
	top:130px;
	right:100px;
}	

.hkmsc .item09{
	top:260px;
	right:0;
}	

.hkmsc .item10{
	top:420px;
	right:0;
}	

.hkmsc .item11{
	top:550px;
	right:100px;
}	

.hkmsc .item12{
	top:680px;
	right:200px;
}

.maritime-services-main .maritime-professions-bluebox h2{
    padding-left: 20px;
}

.maritime-services-main .maritime-professions-bluebox p{
	margin-bottom:10px;
	text-align:justify;
}

.note-mark{
    font-size: 10px;
    vertical-align: super;
}

.maritime-services-main .maritime-professions-bluebox .small{
	font-size:14px;
}

.maritime-services-main ul{
	margin-left:20px;
	margin-bottom:10px;
}
.maritime-services-main ul li{
	list-style-type: disc;
	list-style-position: outside;
	margin-bottom:5px;
}

@media screen and (max-width: 1274px) {
.maritime-services-bg {
    margin: 0 -20px 20px;
	height: 800px;
}
.hkmsc h2 {
    font-size: 18px;
    line-height: 30px;
    width: 360px;
	padding:20px 0;
    left: calc(50% - 180px);
    top: calc(50% - 50px);
}
.hkmsc .left-item, .hkmsc .right-item {
    width: 250px;
}
.hkmsc .icon {
    width: 110px;
}
.hkmsc h3 {
    width: 125px;
    font-size: 18px;
    line-height: 28px;
    margin-top: 26px;
}
.hkmsc .item02{
	top:110px;
}	

.hkmsc .item03{
	top:220px;
}	

.hkmsc .item04{
	top:360px;
}	

.hkmsc .item05{
	top:470px;
}	

.hkmsc .item06{
	top:580px;
}	

.hkmsc .item08{
	top:110px;
}	

.hkmsc .item09{
	top:220px;
}	

.hkmsc .item10{
	top:360px;
}	

.hkmsc .item11{
	top:470px;
}	

.hkmsc .item12{
	top:580px;
}	
}
@media screen and (max-width: 990px) {
.maritime-services-bg  {
    margin: 0 -15px 20px;
    padding: 20px 0;
    height: auto;
}
.maritime-services .inner-banner {
	margin-bottom:0;
}
.hkmsc h2{
    position: static;
    margin: 0 auto 20px;
    line-height: 24px;
    letter-spacing: 1px;
    width: 300px;
	font-weight:300;
}
.hkmsc .left-item, .hkmsc .right-item {
    position: static;
    float: left;
    width: 33.33%;
	margin-bottom:10px;
}
.hkmsc .left-item h3, .hkmsc .right-item h3{
    float: left;
    text-align: left;
    width: 115px;
    font-size: 16px;
    line-height: 20px;
    margin-top: 25px;
}

.hkmsc .left-item .icon, .hkmsc .right-item .icon{
	float:left;
	margin-right:10px;
	width: 90px;
}
}

@media screen and (max-width: 768px) {
.hkmsc .left-item, .hkmsc .right-item {
    width: 50%;
}
.maritime-services-main ul li {
	font-size:14px;
}
.maritime-services-main .maritime-professions-bluebox .small {
    font-size: 12px;
}
}

@media screen and (max-width: 520px) {
.hkmsc h2{
	font-size:16px;
	width:100%;
    line-height: 22px;
	padding:15px 0;
    letter-spacing: normal;
}
.hkmsc .left-item, .hkmsc .right-item {
    width: 100%;
	margin-bottom:5px;
}
.hkmsc .left-item .icon, .hkmsc .right-item .icon{
	width: 60px;
}
.hkmsc .left-item h3, .hkmsc .right-item h3 {
    width: calc(100% - 80px);
    font-size: 15px;
    line-height: 18px;
    margin-top: 21px;
}
}




/************Maritime Professions************/
.maritime-professions-intro{
	padding:0 70px 20px;
	text-align:justify;
}

.maritime-professions-intro p{
	margin-bottom:5px;
}

.maritime-professions-intro .intro-title{
	font-weight:700;
	color:#1483C4;
}

.maritime-professions-intro2{
	padding:0 0 20px 0;
	text-align:justify;
}

.maritime-professions-intro h2{
	font-size:24px;
	font-weight:400;
	margin-bottom:10px;
}

.maritime-professions-intro2 h2{
	font-size:24px;
	font-weight:400;
	margin-bottom:10px;
}

.maritime-professions-type{
	padding-bottom:40px;
}

.maritime-professions-type .type-left{
	float:left;
	width:calc(35% - 20px);
	margin-right:20px;
	height:276px;
	background:url(../images/type-left.png) center no-repeat;
}

.maritime-professions-type .type-middle{
	float:left;
	width:calc(50% - 20px);
	height:276px;
	background:url(../images/type-middle.png) left center no-repeat;
}

.maritime-professions-type .type-right{
	float:right;
	width:15%;
	height:276px;
	background:url(../images/type-right.png) center no-repeat;
}

.maritime-professions-btn{
	padding-top:25px;
}

.type-left .maritime-professions-btn{
	width:300px;
	margin:0 auto;
}

.type-middle .maritime-professions-btn{
	width:450px;
	margin:0 auto;
}

.type-right .maritime-professions-btn{
	width:150px;
	margin:0 auto;
}

.maritime-professions-btn a{
	display:block;
	float:left;
	background-color:#E3F6F7;
	background-position: center 10px;
	background-repeat: no-repeat;
	padding:55px 10px 10px 10px;
	border-radius:35px;
	margin:0 5px 10px;
	color:#222;
	width:140px;
	line-height:18px;
	text-align:center;
}

.tc .maritime-professions-btn a{
	line-height: normal;
}

.type-right .maritime-professions-btn a{
	background-position: center 5px;
}

.maritime-professions-btn .maritime-professions-01{
	background-image:url(../images/maritime-professions-01.png);
}

.maritime-professions-btn .maritime-professions-02{
	background-image:url(../images/maritime-professions-02.png);
	padding:55px 20px 10px 20px;
}

.maritime-professions-btn .maritime-professions-03{
	background-image:url(../images/maritime-professions-03.png);
}

.maritime-professions-btn .maritime-professions-04{
	line-height:36px;
	background-image:url(../images/maritime-professions-04.png);
}

.maritime-professions-btn .maritime-professions-05{
	line-height:36px;
	background-image:url(../images/maritime-professions-05.png);
}

.maritime-professions-btn .maritime-professions-06{
	background-image:url(../images/maritime-professions-06.png);
}

.maritime-professions-btn .maritime-professions-07{
	background-image:url(../images/maritime-professions-07.png);
}

.maritime-professions-btn .maritime-professions-08{
	background-image:url(../images/maritime-professions-08.png);
	padding:55px 0px 10px 0px;
}

.maritime-professions-btn .maritime-professions-09{
	background-image:url(../images/maritime-professions-09.png);
	padding:90px 10px 10px 10px;
	width: 140px;
}

@media screen and (max-width: 1160px) {
.maritime-professions-btn .maritime-professions-09{
	background-size:auto 70px;
    width: 120px;
}
.type-right .maritime-professions-btn {
    width: 130px;
}
}

@media screen and (max-width: 990px) {
.maritime-professions-intro{
	padding:0 0 20px 0;
}
.maritime-professions-type .type-left {
	float:none;
    width: 100%;
	margin:0 0 20px 0;
}
.maritime-professions-type .type-middle {
	float:none;
    width: 100%;
	margin:0 0 20px 0;
}
.maritime-professions-type .type-right {
    width: 100%;
	float:none;
    width: 100%;
}
}

@media screen and (max-width: 768px) {
.maritime-professions-intro{
	font-size:14px;
	padding-bottom:0;
}
}

@media screen and (max-width: 660px) {
.maritime-professions-intro h2{
	font-size:18px;
}

.maritime-professions-intro {
	font-size:14px;
}
.type-left .maritime-professions-btn {
    width: 260px;
}
.type-middle .maritime-professions-btn {
    width: 330px;
    margin: 0 auto;
}
.maritime-professions .maritime-professions-btn a{
    font-size: 13px;
    width: 120px;
}
.type-middle .maritime-professions-btn a{
    width: 100px;
}

.maritime-professions-btn .maritime-professions-04{
	line-height: normal;
	width:130px !important;
}

.maritime-professions-btn .maritime-professions-06{
	width:130px !important;
}
}


.inner-banner .maritime-professions-h1{
    background: none;
    width: auto;
    height:auto;
    color: #05205f;
    line-height: normal;
    text-align: left;
	padding-left:40px;
}

.maritime-professions-detail{
	padding-bottom:40px;
	padding-top: 10px;
}

.maritime-professions-bluebox {
    background: #D9F0FA;
    position: relative;
    margin-bottom: 30px;
}

.maritime-professions-bluebox h2{
	font-size:20px;
	padding-left:110px;
	text-transform:uppercase;
	color:#033f7d;
	padding-bottom:20px;
	font-weight:400;
	padding-top:20px;
}

.maritime-professions-icon1{
	background:url(../images/maritime-professions-icon1.png) 35px center no-repeat;
}

.maritime-professions-icon2{
	background:url(../images/maritime-professions-icon2.png) 40px center no-repeat;
}

.maritime-professions-icon3{
	background:url(../images/maritime-professions-icon3.png) 35px center no-repeat;
}

.maritime-professions-icon4{
	background:url(../images/maritime-professions-icon4.png) 40px center no-repeat;
}

.maritime-professions-icon5{
	background:url(../images/maritime-professions-icon7.png) 40px center no-repeat;
}

.maritime-professions-icon6{
	background:url(../images/maritime-professions-icon11.png) 40px center no-repeat;
	background-size:40px auto;
}

.maritime-professions-bluebox p{
	font-size:16px;
	margin-bottom:20px;
	font-weight:300;
	text-align:justify;
}

.maritime-professions-bluebox ul {
	padding-bottom:20px;
	padding-left:20px;
	margin-left:0;
}

.maritime-professions-bluebox ul li{
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 0;
    color: #222;
    margin-bottom: 5px;
}


.maritime-professions-bluebox .expand-content{
	padding:0 20px 0px 20px;
  overflow: hidden;
}

.nautic-quest-intro{
	padding:0 60px 20px;
	text-align:justify;
}

.nautic-quest-icon{
	width:200px;
	margin:10px 40px;
	float:left;
}

.nautic-quest-words{
	width:calc(100% - 220px);
	float:right;
}

.nautic-quest-words p{
	margin-bottom:10px;
}


.career-tab-group{
	padding:0 70px 20px;
}

.career-tab-group h2{
	font-size:24px;
	padding-left:0;
	text-transform:none;
	color:#033f7d;
	padding-bottom:5px;
	font-weight:300;
	padding-top:0px;
}

.tc .career-tab-group h2{
    font-size: 20px;
    font-weight: 400;
}

.career-tab-group .sub-title {
	margin-top:10px;
	margin-bottom:5px;
}

.career-tab-group > div{
	padding-bottom:30px;
}

.career-tab-group ul {
	margin-bottom:10px;
	padding-left:20px;
	margin-left:0;
}

.career-tab-group ul li{
    list-style-type: disc;
    list-style-position: outside;
    padding-left: 0;
    color: #222;
    margin-bottom: 0;
}

.career-tab-group p{
	margin-bottom:20px;
}

.career-tab-line{
	border-bottom:1px dashed #999;
	margin-bottom:30px;
}

.prospect{
	background:url(../images/maritime-professions-icon5.png) left 10px no-repeat;
	background-size:50px auto;
	padding-left:70px;
}

.discription{
	background:url(../images/maritime-professions-icon1.png) left 10px no-repeat;
	padding-left:70px;
}

.entry-requirement{
	background:url(../images/maritime-professions-icon2.png) 5px 10px no-repeat;
	padding-left:70px;
}

.entry{
    background: url(../images/entry.png) 0px 2px no-repeat;
    padding-left: 70px;
    background-size: 45px auto;
}

.career-path{
	background:url(../images/maritime-professions-icon6.png) 5px 10px no-repeat;
	background-size:45px auto;
	padding-left:70px;
}

.training{
	background:url(../images/maritime-professions-icon3.png) 5px 10px no-repeat;
	padding-left:70px;
}

.government-funding{
	background:url(../images/maritime-professions-icon7.png) 5px 10px no-repeat;
	padding-left:70px;
}

.related-websites{
	background:url(../images/maritime-professions-icon4.png) 5px 10px no-repeat;
	padding-left:70px;
}

.related-websites2{
	background:url(../images/maritime-professions-icon11.png) 5px 10px no-repeat;
	background-size:45px auto;
	padding-left:70px;
}

.tech{
	background:url(../images/maritime-professions-icon9.png) 5px 10px no-repeat;
	padding-left:70px;
}

.qualification{
	background:url(../images/maritime-professions-icon12.png) 5px 10px no-repeat;
	padding-left:70px;
}

.objective{
	background:url(../images/maritime-professions-icon5.png) 5px 20px no-repeat;
	background-size:44px auto;
	padding-left:70px;
}

.target{
	background:url(../images/target.png) 5px 20px no-repeat;
	padding-left:70px;
	background-size:44px auto;
}

.enquiries{
	background:url(../images/enquiries.png) 5px 20px no-repeat;
	padding-left:70px;
	background-size:44px auto;
}

.subsidy{
	background:url(../images/subsidy.png) 5px 20px no-repeat;
	padding-left:70px;
	background-size:44px auto;
}

.application{
	background:url(../images/application.png) 5px 20px no-repeat;
	padding-left:70px;
	background-size:44px auto;
}

.examinations-list{
	background:url(../images/examinations-list.png) 5px 20px no-repeat;
	padding-left:70px;
	background-size:44px auto;
}

.information{
	background:url(../images/information.png) 5px 20px no-repeat;
	padding-left:70px;
	background-size:44px auto;
}

.website{
	background:url(../images/website.png) 5px 20px no-repeat;
	padding-left:70px;
	background-size:44px auto;
}


.maritime-professions-chart{
	width:100%;
}

#career-tab .ui-icon {
	background:url(../images/maritime-professions-icon8.png) center no-repeat;
	margin-right:10px;
    width: 30px;
    height: 30px;
}

#career-tab .ui-accordion .btn_explore {
    width: 180px;
    border-radius: 30px;
    padding: 15px 40px 12px 40px;
	background:#164982;
	color:#FFF;
	font-weight:300;
    margin-left: 70px;
    margin-bottom: 20px;
}

#career-tab .ui-accordion .btn_explore {
    width: 162px;
}

.local-vessels-table {
    width: 100%;
    border: none;
	margin-bottom:20px;
}

.local-vessels-table td{
	padding:5px 10px 5px 0;
	vertical-align: top;
}

.maritime-professions #highlight-slider .owl-prev {
    top: -100px;
}
.maritime-professions #highlight-slider .owl-next {
    top: -100px;
}
@media screen and (max-width: 990px) {
.career-tab-group{
	padding:0;
}
}

@media screen and (max-width: 768px) {
.maritime-professions-bluebox {
    margin-bottom: 20px;
}
.maritime-professions-bluebox h2 {
    font-size: 18px;
    padding-top: 15px;
}
.career-tab-group h2 {
    font-size: 18px;
}
.tc .career-tab-group h2 {
    font-size: 18px;
}
.career-tab-group p {
	font-size:14px;
}
#career-tab .ui-accordion .btn_explore {
    width: 160px;
    padding: 10px 30px 7px 30px;
	font-size:14px;
}
.tc #career-tab .ui-accordion .btn_explore {
    width: 135px;
}
#event-tab {
    border-bottom: none;
}
.maritime-professions #highlight-slider .owl-prev {
    top: -130px;
}
.maritime-professions #highlight-slider .owl-next {
    top: -130px;
}
.career-tab-group > div {
    padding-bottom: 10px;
}
.career-tab-group ul {
	font-size:14px;
}
}

@media screen and (max-width: 660px) {
.maritime-professions-intro2 h2{
	font-size:18px;
}
.maritime-professions-intro2 {
	font-size:14px;
}
.maritime-professions-bluebox h2 {
    font-size: 16px;
	padding-left:70px;
}
.maritime-professions-bluebox p {
    font-size: 14px;
}
.maritime-professions-icon1{
	background-position:10px center;
}
.maritime-professions-icon2{
	background-position:15px center;
}
.maritime-professions-icon3{
	background-position:10px center;
}
.maritime-professions-icon4{
	background-position:15px center;
}
}

@media screen and (max-width: 600px) {
.maritime-professions .inner-banner{
	height:150px;
	background-size:cover;
}
#event-tab li a {
    font-size: 14px;
}
}


/************An Ideal Place for Maritime Business************/
.maritime-business{
    margin: 0 -1%;
	padding-bottom:20px;
}

.maritime-business .box{
    width: 31.33%;
    float: left;
    margin: 0 1% 20px;
	border:1px solid #d4d5d0;
	min-height:410px;
}

.maritime-business .box h2{
	background:#262B59;
	color:#FFF;
	text-align:center;
	font-weight:300;
	font-size:24px;
	padding:10px 0;
}

.maritime-business .box a{
	display:block
}

.maritime-business .box img{
	width:100%;
}

.maritime-business .box .box-list{
	padding: 15px 15px 10px 35px;
}

.maritime-business .box .box-list li{
	margin-bottom:15px;
	list-style-type: disc;
	list-style-position:outside;
}

@media screen and (max-width: 990px) {
.maritime-business .box h2 {
    font-size: 22px;
}
.maritime-business{
	padding-top:20px;
}
.maritime-business .box{
    width: 48%;
}
.maritime-business .box-connectivity{
	width:98%;
}
}

@media screen and (max-width: 680px) {
.maritime-business .box{
	width:98%;
	min-height:auto;
}
.maritime-business .box h2 {
    font-size: 20px;
}
.maritime-business .box .box-list li{
	margin-bottom:10px;
	font-size:14px;
}
}


#connectivity-tab {
	margin: 30px 0;
	overflow: hidden;
	border-bottom: 2px solid #091E54;
}
#connectivity-tab li {
	 margin-right: 2px; 
	 float: left;
}
#connectivity-tab li a{
    padding: 14px 25px;
    color: #333;
    font-weight: 400;
    text-decoration: none;
    display: block;
    font-size: 16px;
    background: #A7CDDF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
#connectivity-tab li.active a {
    color: #FFF;
    background: #0182C6;
}

.connectivity-tab {
    padding-bottom: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #d4d5d0;
}
.connectivity-tab h2{
	color:#091E54;
	font-size:24px;
	font-weight:400;
	margin-bottom:5px;
}

.connectivity-tab p{
	margin-bottom:20px;
	text-align: justify;
}

.connectivity-tab-content{
	padding:0 70px 0 150px;
}

.connectivity-icon1{
	background:url(../images/connectivity-icon1.png) 70px 10px no-repeat;
}

.connectivity-icon2{
	background:url(../images/connectivity-icon2.png) 70px 10px no-repeat;
}

.connectivity-icon3{
	background:url(../images/connectivity-icon3.png) 70px 10px no-repeat;
}

.connectivity-icon4{
	background:url(../images/connectivity-icon4.png) 70px 10px no-repeat;
}

.connectivity-icon5{
	background:url(../images/connectivity-icon5.png) 70px 10px no-repeat;
}

.connectivity-icon6{
	background:url(../images/connectivity-icon6.png) 70px 10px no-repeat;
}

.connectivity-icon7{
	background:url(../images/connectivity-icon7.png) 70px 10px no-repeat;
}

.connectivity-icon8{
	background:url(../images/connectivity-icon8.png) 70px 10px no-repeat;
}

.long-tab li {
    max-width: 450px;
}

.competitive-tax-regime-bluebox {
    background: #D9F0FA;
    position: relative;
    margin-bottom: 30px;
}

.competitive-tax-regime-bluebox h3{
	font-size:20px;
	color:#033f7d;
	font-weight:400;
	padding:20px;
}

.competitive-tax-regime-bluebox h3 span{
	display:block;
	font-size:16px;
	text-transform: none;
	font-weight:300;
	text-align:justify;
}

.competitive-tax-regime-bluebox .expand-content {
	background:#FFF;
	border:1px solid #ccc;
	border-top:0;
}

.competitive-tax-regime-bluebox h4{
	font-size:18px;
	text-transform:uppercase;
	color:#222;
	background:#ccc;
	text-align:center;
	font-weight:400;
	padding:5px 0;
}

.competitive-tax-regime-bluebox .country-list{
	padding:20px 0 0 0;
}

.competitive-tax-regime-bluebox .country{
	margin:0 20px;
	width:137px;
	float:left;
}

.competitive-tax-regime-bluebox .country img{
    width: auto;
    height: 36px;
    margin: 0 auto;
    display: block;
    margin-bottom: 10px;
}

.competitive-tax-regime-bluebox .country p{
	text-align:center;
}

@media screen and (max-width: 990px) {
#connectivity-tab {
    margin: 20px 0 0 0;
    padding: 0;
    border-bottom: none;
}
#connectivity-tab li{
	margin-bottom:10px;
	width:100%;
}
#connectivity-tab li a {
    font-size: 15px;
    border-radius: 0;
    border: none;
    width: 100%;
}
.connectivity-tab-content{
	padding:0 0 0 80px;
}
.connectivity-icon1, .connectivity-icon2, .connectivity-icon3, .connectivity-icon4, .connectivity-icon5, .connectivity-icon5{
	background-position:5px 10px;
}
.connectivity-icon6, .connectivity-icon7, .connectivity-icon8{
    background-position: top left;
    padding: 75px 0 0 0;
}
.long-tab li {
    max-width: 100%;
}
}

@media screen and (max-width: 768px) {
.connectivity-tab-content{
	font-size:14px;
}
.competitive-tax-regime-bluebox h3{
	font-size:16px;
}

.competitive-tax-regime-bluebox h3 span{
	font-size:14px;
}
}

@media screen and (max-width: 600px) {
.connectivity-tab h2 {
    font-size: 16px;
}
.connectivity-tab {
    padding-bottom: 0;
}
}

@media screen and (max-width: 577px) {
.competitive-tax-regime-bluebox .country {
    width: calc(50% - 40px);
}

.competitive-tax-regime-bluebox .country img {
    width: auto;
    margin: 0 auto;
    height: 36px;
    display: block;
}
}

.media-content{
	padding-bottom:60px;
}

.media-content h2{
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 400;
    color: #263044;
    padding:12px  10px 12px 60px;
    margin-bottom: 10px;
    background:left bottom no-repeat #DFF0FD;
	background-size:40px auto;
}

.video-content h2{
	background-image:url(../images/icon-video.png);
}
.audio-content h2{
	background-image:url(../images/icon-audio.png);
}

.video-list, .audio-list{
	margin:0 -1%;
}

.video-box, .audio-box{
	width:48%;
	margin:0 1% 20px;
	float:left;
	background:#009CD6;
}

.video-box .photo{
	display:block;
	width:100%;
}
.video-box .photo img{
	width:100%;
}

.video-box .topic{
	display: table;
	width:100%;
	font-size:15px;
	font-weight:300;
	height:50px;
	padding:0 10px 5px;
}

.video-box .topic a{
	display:table-cell;
	vertical-align:middle;
	color:#FFF;
}

.audio-box .left{
    width: 50%;
	float:left;
	height:250px;
}

.audio-box .right{
    width: 50%;
    float: right;
    background: #6FB9F9;
    height: 250px;
    padding-top: 70px;
}

.audio-box img {
	display:block;
    width: 145px;
    padding-top: 20px;
    margin: 0 auto 15px;
}

.btn-play-audio{
	display:block;
	background:url(../images/btn_play-audio.png) 25px center no-repeat #1483C4;
	color:#FFF;
	font-size:14px;
	width:170px;
	margin:0 auto;
	padding: 10px 0 10px 60px;
	border-radius:30px;
}

.tc .btn-play-audio{
	width:120px;
}
.audio-box .right p{
    font-weight: 400;
	padding:0 20px;
	margin-bottom:0;
}

.audio-box .right .topic{
	margin-bottom:10px;
}

#connectivity-tab li .on{
    background: #1483C4;
	color:#FFF;
}
@media screen and (max-width: 990px) {
.audio-box img {
    width: 130px;
}
.btn-play-audio{
	background:url(../images/btn_play-audio.png) 15px center no-repeat #1483C4;
	width:140px;
	padding: 10px 0 10px 50px;
}
.audio-box .right {
    padding-top: 40px;
	font-size:14px;
}
}

@media screen and (max-width: 768px) {
.media-content h2{
    font-size:16px;
}
.video-box .topic{
	font-size:14px;
}
.video-list, .audio-list{
	margin:0;
}
.video-box, .audio-box {
    width: 100%;
    margin: 0 0 20px;
}
}

@media screen and (max-width: 600px) {
.video-list{
	margin:0;
}
.video-box{
	width:100%;
	margin:0 0 20px 0;
}
}



/************MATF************/
.matf-intro{
	padding:0 70px 20px;
	text-align:justify;
}

.matf .four-type{
	position:relative;
	margin:0 -10px 20px;
}

.matf-box{
	width:calc(50% - 20px);
	height:180px;
	margin:0 10px 20px;
	float:left;
}

.matf-box a{
	width: 100%;
	height:100%;
	font-size:24px;
	display:table;
	color:#222;
}

.matf-box a span{
	padding-left:260px;
	padding-right:20px;
	vertical-align:middle;
	display:table-cell;
}

.matf .type-1{
	background:url(../images/matf-box1.png) left top no-repeat;
	background-size:cover;
}

.matf .type-2{
	background:url(../images/matf-box2.png) left top no-repeat;
	background-size:cover;
}

.matf .type-3{
	background:url(../images/matf-box3.png) left top no-repeat;
	background-size:cover;
}

.matf .type-4{
	background:url(../images/matf-box4.png) left top no-repeat;
	background-size:cover;
}

.matf .btn-all{
	display:block;
	width:120px;
	line-height:120px;
	text-align:center;
	font-size:24px;
	font-weight:300;
	color:#FFF;
	background:#304474;
	border-radius:60px;
	position:absolute;
	left:calc(50% - 60px);
	top:calc(50% - 60px);
}

.matf-detail{
	padding:0 70px 40px;
}

.matf-bluebox {
    background: #D9F0FA;
    position: relative;
    margin-bottom: 30px;
}

.matf-bluebox article{
	padding:10px 20px;
}

.matf-bluebox h2{
	font-size:24px;
	padding-left:100px;
	color:#033f7d;
	padding-bottom:30px;
	font-weight:300;
	padding-top:30px;
}

.tc .matf-bluebox h2{
	font-weight:400;
}

.matf-bluebox h3{
	font-size:16px;
	font-weight:300;
	margin:10px 0;
}

.tc .matf-bluebox h3{
	font-weight:400;
}


.matf-icon1{
	background:url(../images/matf-icon1.png) 25px center no-repeat #D9F0FA;
}

.matf-icon2{
	background:url(../images/matf-icon2.png) 25px center no-repeat #D9F0FA;
}

.matf-icon3{
	background:url(../images/matf-icon3.png) 25px center no-repeat #D9F0FA;
}

.matf-icon4{
	background:url(../images/matf-icon4.png) 25px center no-repeat #D9F0FA;
}

.matf-icon5{
	background:url(../images/matf-icon5.png) 30px center no-repeat #D9F0FA;
}

.matf-bluebox p{
	font-size:16px;
	margin-bottom:5px;
	font-weight:300;
	text-align:justify;
}

.matf-bluebox .expand-content{
	background:#FFF;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.matf-bluebox .accordion{
	padding:20px;
}

.matf-bluebox .accordion h4{
	font-weight:400;
	color:#374d7f;
	margin-bottom:5px;
	padding-top:15px
}

.matf-bluebox p strong{
	font-weight:400;
}

.matf-bluebox .accordion ul{
	padding-left:18px;
	margin-bottom:5px;
}

.matf-bluebox .accordion ul li{
	margin-bottom:5px;
	list-style-type:square;
	list-style-position:outside;
}

.matf-bluebox .link-list{
	padding:20px 20px 20px 40px;
}

.matf-bluebox .link-list li{
	margin-bottom:10px;
	list-style-type:square;
	list-style-position:outside;
	line-height:24px;
}

.matf-bluebox .enquiries{
	padding:0 20px;
	margin-bottom:30px;
}

.matf .inner-banner .long-h1{
	font-size:30px;
}

.matf-detail h4{
	font-weight:400;
	color:#374d7f;
	margin-bottom:5px;
	padding-top:20px;
}

.matf-detail p {
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 400;
    text-align: justify;
	background:url(../images/bullet.png) left 8px no-repeat;
	padding-left:15px;
}

.matf-detail p strong{
	font-weight:700;
}

.matf-detail ul{
	padding-left:18px;
	margin-bottom:5px;
}

.matf-detail ul li{
	margin-bottom:5px;
	list-style-type:square;
	list-style-position:outside;
}

.matf .news-details h2 {
    margin-bottom: 10px;
}

.matf-course-table{
	width:100%;
	border:none;
	background:#E4F2FC;
}

.matf-course-table-head{
	color:#FFF;
	background:#168DCC;
}

.matf-course-table td{
	padding:5px 10px;
	border:2px solid #FCFEFF;
}

.matf-detail .matf-course-table p{
	padding:0;
	background:none;
	font-size:14px;
}
@media screen and (max-width: 990px) {
.matf .inner-banner .long-h1 {
    font-size: 24px;
}
.matf-intro{
	padding:0 0 20px 0;
}
.matf-detail{
	padding:0 0 40px;
}
.matf-box{
	height:120px;
	font-size:18px;
}
.matf-box a span{
	padding-left:160px;
}
}

@media screen and (max-width: 768px) {
.matf .inner-banner .long-h1 {
    font-size: 18px;
}
.matf-intro{
	font-size:14px;
	padding-bottom:0;
}
.matf .four-type{
	margin:0 0 20px;
}
.matf-box{
	width:100%;
	margin:0 0 10px;
	height:100px;
	float:none;
}
.matf .type-1, .matf .type-2, .matf .type-3, .matf .type-4{
	background-size:contain;
	background-color:#BCDFE5;
}
.matf-box a span {
    padding-left: 150px;
	font-size:16px;
}
.matf .btn-all{
	position:static;
	width:100%;
	height:100px;
	line-height:100px;
	border-radius:0;
}
.matf-bluebox h2 {
    font-size: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}
.matf-bluebox .accordion h3 {
    padding: 4px 0;
    font-size: 14px;
}
.matf-bluebox .accordion h4 {
    padding-top: 10px;
    font-size: 14px;
}
.matf-bluebox p {
    font-size: 14px;
}
.matf-detail p {
    font-size: 14px;
}
.matf-detail ul li{
    font-size: 14px;
}
.matf-course-table{
    margin-left: -70px;
    width: calc(100% + 70px);
}
.matf-course-table p{
	text-align:left;
	font-size:12px;
}
}

@media screen and (max-width: 400px) {
.matf .inner-banner .long-h1 {
    font-size: 14px;
}
.matf-box{
	height:80px;
}
.matf .btn-all{
	height:80px;
	line-height:80px;
}
.matf-box a span {
    padding-left: 120px;
}
.matf-bluebox h2 {
    font-size: 16px;
    padding-bottom: 20px;
    padding-top: 20px;
}
.matf-bluebox .accordion {
    padding: 10px;
}
}


.sitemap{
	padding-bottom:60px;
}

.sitemap .related-websites{
	background:none;
	padding:0 70px;
}

.sitemap .website-type{
    font-weight: 400;
}
@media screen and (max-width: 990px) {
.sitemap .related-websites{
	padding:0;
}
}









.text-en{
    font-family: 'Roboto', sans-serif;
}

.maritime-directory-top{
	padding:0 70px;
}

.maritime-directory-top .intro{
}

.md-filer{
	width:100%;
	margin: 0 -1% 20px;
}

.md-filer .filer-col{
	width:18%;
	float:left;
	margin:0 1%;
}

.md-filer .filer-col:hover > p{
    background: #009CD6;
    border-bottom: 5px solid #76C5DE;
}

.md-filer .filer-col:hover > p span{
	color:#FFF;
}

.md-filer .filer-col p{
	width:100%;
	height:80px;
	display:table;
	padding:0 10px;
	background:#00b8d4;
	font-size:16px;
	font-weight:400;
	border-bottom:5px solid #A4FCFF;
	margin-bottom:5px;
}

.md-filer .active p{
	background:#07225D;
	border-bottom:5px solid #426894;
}

.md-filer .filer-col p span{
	display:table-cell;
	color:#00203a;
	text-align:center;
	vertical-align:middle;
}

.md-filer .active p span{
	color:#FFF;
}

.md-filer .sub-cat{
	width:280px;
	padding:10px 20px 10px 40px;
	background:#e8eaf6;
	display:none;
	position: absolute;
}

.md-filer .sub-cat li{
	padding:5px 0;
	font-size:15px;
	list-style-type:disc;
	list-style-position:outside;
}

.md-filer .sub-cat li a{
	color:#222;
}

.md-filer .filer-col:hover > .sub-cat{
	display:block;
}

.maritime-directory-table{
	width:100%;
	border:none;
}

.maritime-directory-table th, .maritime-directory-table td{
	font-weight: normal;
	border:1px solid #333;
	text-align:center;
	height:100px;
	background:#FFF;
	padding:10px;
}

.maritime-directory-table .th{
	background:#FCFEFF;
}

.maritime-directory-table .company-logo{
	border-right:none;
	text-align: right;
}

.maritime-directory-table .company-logo img{
	width:auto;
	height:auto;
	max-width:200px;
	max-height:90px;
}

.maritime-directory-table .company-name{
	border-left:none;
	text-align: left;
	padding-left:10px;
}

.maritime-directory-bottom{
	padding-bottom:40px;
}

.mdfilter-sub-cat{
    margin: 0 70px 30px 70px;
    border: 1px solid #188DCC;
    padding: 7px 10px;
    display: inline-block;
}

.company-detail{
	padding-bottom:40px;
	border-bottom:1px solid #333;
	margin-bottom:40px;
}

.company-logo-big{
	width:auto;
	height:auto;
	max-width:400px;
	max-height:100px;
	margin-bottom:10px;
}

.company-detail-table{
	width:100%;
	border:none;
}

.company-detail-table td{
	text-align:left;
	padding:15px;
}

.company-detail-table .left{
	width:210px;
}

.submission{
	padding-bottom:40px;
	border-bottom:1px solid #333;
	margin-bottom:40px;
}

.submission-form-btn{
	background: url(../images/download-icon.png) 20px center no-repeat #0081C7;
	border-radius:5px;
	max-width:610px;
	width:100%;
	padding:20px 0;
}

.submission-form-btn a{
	color:#FFF;
	padding-left:100px;
	padding-right:20px;
	display:block;
	font-size:14px;
	line-height:22px;
}

.note{
	background: url(../images/note-icon.png) 25px 5px no-repeat;
	padding:0 0 20px 100px;
	padding-bottom:20px;
	border-bottom:1px solid #333;
	margin-bottom:40px;
}

.note .blue{
	color:#384E7D;
	font-weight:400;
}



@media screen and (max-width: 990px) {
.md-filer .filer-col:hover > p{
    border-bottom: none;
}

.mdfilter-sub-cat{
	margin: 0 0 30px 0;
}

.maritime-directory-top{
	padding:0;
}
.md-filer{
	width:100%;
	padding:0;
	margin: 0 0 20px;
}

.md-filer .filer-col{
	width:100%;
	float:none;
	margin:0 0 10px 0;
}
.md-filer .filer-col p {
    height: 40px;
    border-bottom: 0;
    margin-bottom: 0;
}

.md-filer .sub-cat {
	width: calc(100% - 30px);
}
.maritime-directory-table td {
	font-size:15px;
}
}

@media screen and (max-width: 768px) {
.maritime-directory-top p{
	font-size:14px;
}
.maritime-directory-table td {
	font-size:14px;
}
.maritime-directory-table .company-logo img{
	width:auto;
	height:auto;
	max-width:80px;
	max-height:30px;
}
.maritime-directory-table td{
	padding:5px;
}
.submission {
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.note {
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.note p{
	margin-bottom:10px;
	font-size:14px;
}
.maritime-directory-bottom {
    padding-bottom: 20px;
}
.submission-form-btn a {
    font-size: 13px;
    line-height: 18px;
}
.company-detail {
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.company-detail-table td{
	font-size:14px;
	word-break: break-word;
}
.company-detail-table td {
    padding: 5px;
}
.company-detail-table .left {
    width: 140px;
	word-break:keep-all;
}
}


@media screen and (max-width: 480px) {
.maritime-directory-table td {
	font-size:12px;
}
}


.banner3-link{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}


#news-tab {
    margin: 30px 0;
    overflow: hidden;
    border-bottom: 2px solid #091E54;
}

#news-tab .ui-tabs-active a {
    color: #FFF;
}

#news-tab li a {
    padding: 14px 25px;
    font-weight: 400;
    text-decoration: none;
    display: block;
    font-size: 16px;
    width: 100%;
    color: #222;
}

.search-result{
	padding:0 70px 80px 70px;
}

.search-result h2{
	font-size:20px;
	font-weight:400;
}

.search-result .title{
	margin-top:20px;
	font-size:18px;
	text-decoration:underline;
}

.search-result p{
	margin-bottom:2px;
	font-size:14px;
}

.search-result p strong {
    color: #c00;
    font-weight: normal;
}
.search-result .link-path{
    color: #55c;
}

.search-result ul{
	margin-left:20px;
}
	
.search-result ul li{
	list-style-type:decimal;
	list-style-position:outside;
	color:#214F83;
}
	
@media only screen and (max-width: 990px) {
.search-result {
	padding:0 0 80px 0;
}
}
	
@media only screen and (max-width: 768px) {
#news-tab {
	margin:20px 0;
    border-bottom: none;
}
}






/************Photo Gallery************/
.gallery-content{
	padding-bottom:60px;
}

.gallery-content h2{
    font-size: 18px;
    font-weight: 400;
    color: #263044;
    padding:18px 15px;
    background:left bottom no-repeat #DFF0FD;
}

.gallery-content h2 span{
    font-size: 18px;
    font-weight: 400;
    color: #263044;
    padding:2px 10px;
	border:1px solid #1583c4;
	color:#1583c4;
	border-radius:20px;
	margin-right:10px;
}

.gallery{
	border:1px solid #999;
	padding:20px 40px;
}

#thumb {
    margin: 0 -5px;
}

#thumb li {
    float: left;
    margin: 0 0.5%;
    margin-bottom: 0.5%;
    width: 9%;
}

#thumb li img{
    width: 100%;
	opacity:0.5;
	cursor:pointer;
}

#thumb li img:hover{
	opacity:1;
}

@media only screen and (max-width: 768px) {
#thumb li {
    float: left;
    margin: 0 0.3%;
    margin-bottom: 0.5%;
    width: 19%;
}
.gallery {
    border: 1px solid #999;
    padding: 20px;
}
.flex-direction-nav .flex-prev {
    left: -17px !important;
}
.flex-direction-nav .flex-next {
    right: -17px !important;
}
.gallery-content h2 span {
    font-size: 14px;
}
.gallery-content h2 {
    font-size: 14px;
}
}

.access{
	position: absolute;
    visibility: hidden;
    left: -9999px;
}


/*skip to content*/
.skipwrapper {margin: 0; padding: 0} 
.skip {display: none; font-family: verdana, sans-serif; text-align: left; margin: 0; padding: 0; position: absolute}
.skip {display: block}
:root .skip {display: block}
.skip a {padding: 0 0.5em; display: inline; z-index: 2; text-decoration:none; position: absolute; width: 14em; left: -200em;}
.skip a:focus, .skip a:active {position: absolute; left: 0.5em; border: solid #333 2px; color: #fff; background: #555;}
.skip a:hover {cursor: default}




/*

.popupwindow {
    position: relative; 
    top: 0;
    left: 0;
    width: 100%;
    background-color:#95D2D3 ;
    color: #333;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

	padding: 8px;
   font-weight: 900;

	top:0;
	bottom:0;
	margin-top: 0;
	margin-bottom: 0;

  }
  */
  
  /*.marquee {
    overflow: hidden;
    white-space: nowrap;
    animation: marquee 50s linear infinite;
  }*/
  
  /*
  .marquee p {
    display: inline-block;

	font-weight: 900;

	padding-right: 100px;

	top:10px
;
	
	top:0;
	bottom:0;
	margin-top: 0;
	margin-bottom: 0;
   
  }
  */

  /*
  .marquee-t{
    display: inline-block;
    margin-bottom:0px;
    padding-left: 60px;

	top:10px;

	white-space: nowrap;

	margin-right:5px;

	margin-right:15px;
    height:100%;
    
	top:0;
	bottom:0;
	margin-top: 0;
	margin-bottom: 0;

  }
  */

  /*
  .closebtn {
    position: absolute;

	top: 13%;
    right: 10px;

	top:0;
	bottom:0;
	margin-top: 0;
	margin-bottom: 0;
    right: 0px;

	width: 20px;
    height: auto;
    cursor: pointer;

	margin: 3px;

	font-size: 24px;
    padding-right: 40px;
    display: block;
    z-index: 999;
  }
  */

  /*
  .popupbody.close {
    margin-top: -20px; 
    display: inline-block;

  }
  */

  /*
  .popupwrapper{
    height: 100px;
  }
  */

  /*@keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }*/

  /*
  @media screen and (max-width:500px) {
     .popupwindow {
        font-size: 10px;
        padding-right: 30px;
      }
     .popupbody.close {
        margin-top: -10px; 
      }
     .popupwrapper{
        height: 120px;
      }
	  .marquee-t{
		padding-left: 5px;
	  }
	  .marquee p{
		padding-right: 60px;
	  }
  }
  */

  .popupwindow {
    position: sticky; 
    top: 0;
    left: 0;
    width: 100%;   
    background-color:#95D2D3 ;
    color: #333;

	display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
	padding: 8px;
    font-family: "Segoe UI";
  }
  
  .marquee {
	display:flex;
  }
  
  /*.marquee {
    overflow: hidden;
    white-space: nowrap;
    animation: marquee 50s linear infinite;
  }*/
  
  .marquee p {
    display: inline-block;
    margin-bottom:0px;  
    margin-top:0px;  
    padding-right: 100px;
    font-weight: 600;
    font-size: 18px;
   
  }
  .marquee-t{
    display: inline-block;
    margin-bottom:0px;
    margin-top:0px;  
	margin-right:5px;
    font-weight: 600;
    white-space: nowrap;
    padding-left: 60px;
    padding-right:5px !important;
    height:100%;
    font-size: 18px;

  }
  .closebtn {
    position: absolute;
    top: 8%;
    right: 10px;
    width: 20px;
    height: auto;
    cursor: pointer;
    margin: 3px;
    padding-right: 40px;
    display: block;
    z-index: 999;
  }
  .popupbody.close {
    margin-top: -20px; 
    display: inline-block;

  }
  .popupwrapper{
    height: 100px;
  }
  /*@keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }*/

  @media screen and (max-width:500px) {
     .popupwindow {
        font-size: 7px;
        padding-right: 30px;
      }
     .popupbody.close {
        margin-top: -10px; 
      }
     .popupwrapper{
        height: 120px;
      }
      .marquee-t {
        padding-left: 5px;
        padding-right: 0px !important;
        font-size: 10px;
       
      }
      .marquee p {
        padding-right: 20px !important;
        font-size: 10px !important;
       float: right;
      }
      .closebtn {
        top: 1%;
        padding-right: 20px;
      }
  }

  .closebtn{
    font-size: 20px;
    top:3%;
  }

  .closebtn-chi{
    font-size: 18px;
    top:5%
  }

  @media screen and (max-width: 500px) {
    .closebtn{
        font-size: 10px;
        top:5%;
    }

    .closebtn-chi{
        top:10%
    }
  }