@font-face {
    font-family: 'msjh';
    src: url('/fonts/msjh.ttc') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

@import url('bootstrap.min.css');

html,body{
	margin:0;
	padding:0;
	font-family:"Microsoft JhengHei","msjh";
	background-color:#FFF;
	color: #454545 !important;
	overflow-x: hidden;
}

body.lang-sc {
	font-family: 'Noto Sans SC',"Microsoft JhengHei","msjh";
}

:root {
	--mc_blue: #002f4f;
	--menu_color: #3370C2;
	--footer_color: #E5FCFF;
	--mc_gray: #454545;
	--mc_orange: #f1920c;
	--mc_green: #8CC21F;
	--mc_lgreen: #77C7C04D;
	--mc_dgreen: #01314E;
	--menu_font_size: 20px;
	--menu_font_size_s: 16px;
	--bs-body-line-height: 1.8;
	--bs-body-font-size: 18px;
}
	
@media screen and (max-width:991px) {
	
	:root {
		--bs-body-font-size: 16px;
	}
}

/* Bootstarp setting */

.row {
    margin: 0px;
}
.row>* {
    padding: 0px;
}
.small, small {
    font-size: 12px;
}
.form-select {
    border-color:#C4C4C4;
	transition: all .3s;
}
.form-select:focus {
    border-color:#01314E;
    outline: 0;
    box-shadow: none;
}

/* Select2 setting */
.select2-selection__rendered {
    line-height: 35px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}
.select2-container *:focus {
	outline: none;
}

/* Page setting */
.page-container {
    position: static;
    top: 0px;
	width: 100%;
}
.home_background {
	
    background: url('/images/home_background.png') top center repeat-y;
    background-size: 100%;
}
.background_deco {
    background: url('/images/background_deco.png') top center repeat-y;
    background-size: 100%;
}
.page_width_1100 {
	width: 100%;
	max-width: 1100px;
	margin: auto;
}
.page_width_500 {
	width: 100%;
	max-width: 500px;
	margin: auto;
}
	
@media screen and (max-width:991px) {
	
	.home_background {
		background: url('/images/home_background_m.png') top center repeat-y;
		background-size: cover;
	}
}

img, .noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
img {
	max-width: 100%;
}

/* Header setting */
.header_nav {
	width: 100%;
	position: static;
	z-index: 100;
	background: #3370C2;
	font-size:14px;
}
.nav-link{
	color:white !important;
	text-shadow: 1px 1px 5px #2c43637f;
	font-size: 16px;
	font-weight: bold;
}

.lang-en .nav-link{
	font-size: 14px;
	text-align: center;
	max-width: 140px;
	line-height: 1.4;
}

.lang-en .nav-link.coming_soon_link {
	
	max-width: 180px;
}
.navbar-brand{
    background-image: url(/images/main_logo.png);
	image-rendering: -webkit-optimize-contrast;
    background-position: center;
    width: 192px;
    height: 64px;
    max-width: calc( 100% - 60px);
    background-size: contain;
    background-repeat: no-repeat;
	margin-right: auto;
    margin-left: auto;
	margin-bottom: 15px;
    margin-top: 15px;
}

.lang-en .navbar-brand{
    background-image: url(/images/main_logo_en.png);
}
.lang-sc .navbar-brand{
    background-image: url(/images/main_logo_sc.png);
}
img {
	
	image-rendering: -webkit-optimize-contrast;
}

.navbar-toggler-icon{
	background: url(/images/icon_menu_btn.svg) no-repeat;
}
.navbar-toggler{
	color:transparent !important;
	border: 0px;
}
#btn_reg > *{
	color: white !important;
    background: #f1920c;
	border-radius: 30px;
}
/*
.nav-item.actived > .nav-link {
	position: relative;
    margin-left: 50px;
}
.nav-item.actived > .nav-link:before {
    content: '';
    background: url(/images/icon_menu_actived.svg) no-repeat;
	background-size: contain;
    width: 43px;
    height: 19px;
    position: absolute;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
}
*/

.header_icon {
    width: 30px;
	height: 30px;
	margin-right: 0.5em;
	margin-left: 2em;
}

#nav_lang {
    position: relative;
    cursor: pointer;
}

.lang_menu {
    overflow: hidden;
    max-height: 0px;
    position: absolute;
    width: 47px;
    margin-top: 20px;
    right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFFFFF7F;
    border-radius: 20px;
    transition: .3s all;
}

.lang_menu > a {
    height: 40px;
    line-height: 40px;
	text-decoration: none;
    color: #454545;
}

#nav_lang:hover .lang_menu {
    max-height: 200px;
}
.nav_lang_mobile_row:before {
    content: '';
    background: url('/images/icon_lang.svg') no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -30px;
}

.nav_lang_mobile_row {
    position: relative;
    width: fit-content;
}


	
	.nav-link.coming_soon_link {
		position: relative;
	}
	.nav-link.coming_soon_link:after {
		content: '快將推出';
		position: absolute;
		top: 90%;
		text-align: center;
		left: 50%;
		background: #fff;
		transform: translateX(-50%);
		font-size: 12px;
		color: #3370C2;
		padding: 3px 10px;
		border-radius: 20px;
		text-shadow: none;
		width: max-content;
	}
	
	
	    
	.lang-sc .nav-link.coming_soon_link:after {
		content: '快将推出';
	}
	.lang-en .nav-link.coming_soon_link:after {
		content: 'Coming Soon';
	}

@media (max-width: 1399px){
	.header_nav {
		padding: 0px;
	}
	.nav-link{
		font-size: 14px;
	}
	
	.lang-en .nav-link{
		font-size: 12px;
		max-width: 120px;
	}
	.lang-en .nav-link.coming_soon_link {
		
		max-width: 150px;
	}
	.nav-link.coming_soon_link:after {
		transform: translateX(-50%) scale(.7);
		top: 80%;
	}
	/*
	.nav-item.actived > .nav-link:before {
		height: 15px;
		left: -25px;
	}
	*/
	.header_icon {
		width: 20px;
		height: 20px;
	}
	
	.navbar-brand {
		width: 180px;
		height: 45px;
		margin-bottom: 5px;
		margin-top: 5px;
	}
	
	
}

@media screen and (min-width:992px) {
	.nav-link {
		transition: .3s all;
		word-break: keep-all;
	}
	.nav-link:hover {
		transform: translateY(-5px);
	}
	
	#MainNavbars {
		height: 70px;
	}
}
@media screen and (max-width:991px) {
	.header_nav {
		position: static;
	}
	.page-container {
		position: static;
	}
	.lang-en .nav-link.coming_soon_link {
		max-width: unset;
	}
	.nav-link.coming_soon_link:after {
		position: static;
		margin-left: 10px;
	}
	/*
	.navbar-brand{
		background-image: url(/images/main_logo_m.png);
		width: 177px;
		height: 60px;
		margin-bottom: 5px;
		margin-top: 5px;
		transform: translateX(-15%);
	}
	.lang-en .navbar-brand{
		background-image: url(/images/main_logo_m_en.png);
	}
	.lang-sc .navbar-brand{
		background-image: url(/images/main_logo_m_sc.png);
	}
	*/
	.navbar-brand{
		background-image: none !important;
		width: 100%;
		height: 60px;
		margin-bottom: 5px;
		margin-top: 5px;
		transform: none;
	}
	.logo_text_ {
		font-size: 24px;
		width: 100%;
		white-space: break-spaces;
		background: none;
		align-items: center;
		height: 100%;
		line-height: 1.4;
		
		padding-right: 54px;
		justify-content: center;
	}
	.lang-en .logo_text_{
		font-size:13px;
	}
	.nav-link{
		text-align: center !important;
	}
	.lang-en .nav-link{
		font-size: 12px;
		max-width: unset;
	}
	
	li#btn_reg {
		padding: 0 27vw;
	}
	.container-xl.menu{
		padding:0 0!important;
	} 
	
	.navbar.navbar-expand-lg.navbar-dark {
		padding:0 !important;
	}
	
	#nav_lang > div{
		margin: 5px 0;
		text-align: center;
	}

	#nav_lang > div > a {
		color: #002f4f;
		text-decoration: none;
	}
	.navbar-expand-lg .navbar-nav #btn_reg {
		padding-right: 1rem;
		padding-left: 1rem;
	}
	
    img.Organizer_logos {
        width: 200px;
    }
	.header_icon {
		width: 30px;
		height: 30px;
		margin: 0px;
	}
	/*
	.nav-item.actived > .nav-link {
		margin-left: 0px;
	}
	.nav-item.actived > .nav-link:before {
		display: none;
	}
	*/
	#MainNavbars {
		background: #4587CF;
	}
	.nav_lang_mobile {
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #3370C2;
	}
	.nav_lang_mobile_row > * {
		margin: 0px 10px;
	}
	.nav_lang_mobile_row a {
		color: #FFF;
		text-decoration: none;
	}
}

.nav-item{
	
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	
}

/*header setting end*/
/*footer setting */
footer{
	height: 170px;
	background-color: #3370C2;
	color: #FFFFFF;
    bottom: 0;
    width: 100%;
	position: relative;
    margin-top: calc(100vw * 63 / 1920);
}
footer:before {
    content: '';
    background: url('/images/footer_deco.png');
    position: absolute;
    background-size: 100%;
    width: 100%;
    height: calc(100vw * 63 / 1920);
    bottom: 100%;
    z-index: 100;
}
.footer_menu {
	font-size: 14px;
}

.lang-en .footer_menu {
	font-size: 14px;
}
.footer_menu a {
	text-decoration: none;
	color: #FFFFFF;
}
@media screen and (max-width:1200px) {
	.footer_menu {
		font-size: 14px;
	}
}
@media screen and (max-width:991px) {
	.footer_menu {
		font-size: 12px;
	}
	footer {
		margin-top: calc(100vw * 126 / 750);
		height: unset;
	}
	footer:before {
		background: url('/images/footer_deco_m.png');
		background-size: 100%;
		height: calc(100vw * 126 / 750);
	}
}
@media screen and (min-width:992px) {
	
}
/*footer setting end*/

/* home */

.home_banner{
	background-image: url("/images/home_banner.jpg");
	width:100%;
	height: calc(100vw * 750 / 1920);
	background-size: cover;
	background-repeat:no-repeat;
}
@media screen and (max-width:991px) {
	.home_banner{
		background-image: url("/images/home_banner_m.jpg");
		width:100%;
		height: calc(100vw * 1000 / 751);
		background-size: cover;
		background-repeat:no-repeat;
	}
}

/* home end */

/* Section */

.section_header {
    font-size: 38px;
    font-weight: bold;
	position: relative;
    /* margin-left: 60px; */
	color: #0C8190;
}

.section_subheader {
    font-size: 32px;
    font-weight: bold;
	position: relative;
	color: #454545;
}

.section_subheader2 {
    font-size: 28px;
    font-weight: bold;
	position: relative;
	color: #3370C2;
}
/*
.section_header:before {
    content: '';
    background: url(/images/icon_section_header_icon.svg) left no-repeat;
	background-size: 100%;
    width: 46.5px;
    height: 20px;
    position: absolute;
    left: -60px;
	top: 50%;
    transform: translateY(-50%);
}
*/
.section_box {
    background: #FFF;
    /* margin: 0px 20px; */
    padding: 20px;
    /* border-radius: 20px; */
    /* box-shadow: 0px 0px 30px #00000019; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}
.section_box.have_border {
    border-left: 2px solid #3C7F8E33;
}
.section_box_title {
    font-size: 28px;
    font-weight: bold;
	color: #0C8190;
	text-align: center;
}

.section_box_title.section_box_title_about {
    font-size: 33px;
	color:#8CC21F;
}
.section_box_row {
    margin: 0px -20px;
}
.page-content {
    min-height: calc(100vh - 220px);
}
@media screen and (max-width:991px) {
	.section_header {
		font-size: 26px;
		/* margin-left: 50px; */
	}
	.section_subheader {
		font-size: 22px;
	}
	.section_subheader2 {
		font-size: 18px;
	}
	/*
	.section_header:before {
		width: 36px;
		height: 16px;
		left: -50px;
	}
	*/
	.section_box {
		margin: 20px 0px;
		height: unset;
	}
	.section_box_row {
		margin: 0px;
	}
	.page-content {
		min-height: calc(100vh - 310px);
	}
	
	.section_box.have_border {
		border-left: none;
	}
	.section_box_title, .section_box_title.section_box_title_about {
		font-size: 18px;
	}
}
/* Section end */

/* Page banner */

.page_banner{
	width:100%;
	height: calc(100vw * 480 / 1920);
	background-size: cover;
	background-repeat:no-repeat;
}

.about_page_banner {
	background-image: url("/images/about_banner.jpg");
}
.news_page_banner {
	background-image: url("/images/news_banner.jpg");
}
.guidelines_page_banner {
	background-image: url("/images/guidelines_banner.jpg");
}
.webservices_page_banner {
	background-image: url("/images/webservices_banner.jpg");
}
.questions_page_banner {
	background-image: url("/images/questions_banner.jpg");
}
.informations_page_banner {
	background-image: url("/images/informations_banner.jpg");
}
.inquire_page_banner {
	background-image: url("/images/inquire_banner.jpg");
}

.MainlandInformationSystem_page_banner {
	background-image: url("/images/MainlandInformationSystem_banner.jpg");
}
.BookingForTravel_page_banner {
	background-image: url("/images/BookingForTravel_banner.jpg");
}
.RenewalApplication_page_banner {
	background-image: url("/images/RenewalApplication_banner.jpg");
}

.page_banner_row{
	margin-top: 120px;
}
.page_banner_title {
	max-width: 80%;
}
@media screen and (max-width:991px) {
	.page_banner{
		width:100%;
		height: calc(100vw * 400 / 750);
		background-size: cover;
		background-repeat:no-repeat;
	}
	.about_page_banner {
		background-image: url("/images/about_banner_m.jpg");
	}
	.news_page_banner {
		background-image: url("/images/news_banner_m.jpg");
	}
	.guidelines_page_banner {
		background-image: url("/images/guidelines_banner_m.jpg");
	}
	.webservices_page_banner {
		background-image: url("/images/webservices_banner_m.jpg");
	}
	.questions_page_banner {
		background-image: url("/images/questions_banner_m.jpg");
	}
	.informations_page_banner {
		background-image: url("/images/informations_banner_m.jpg");
	}
	.inquire_page_banner {
		background-image: url("/images/inquire_banner_m.jpg");
	}
	.MainlandInformationSystem_page_banner {
		background-image: url("/images/MainlandInformationSystem_banner_m.jpg");
	}
	.BookingForTravel_page_banner {
		background-image: url("/images/BookingForTravel_banner_m.jpg");
	}
	.RenewalApplication_page_banner {
		background-image: url("/images/RenewalApplication_banner_m.jpg");
	}
	.page_banner_row{
		margin-top: 0px;
	}
	.page_banner_title {
		max-width: 100%;
	}
}

/* Page banner end */

/* About Page */
.apply_title {
    color: #3370C2;
    font-size: 24px;
    font-weight: bold;
    margin-left: 40px;
    position: relative;
}
.apply_title:before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    left: -40px;
	top: 50%;
    transform: translateY(-50%);
}
.apply_title_1:before {
	background: url(/images/apply_title_icon_1.svg) left center no-repeat;
	background-size: 100%;
}
    
.apply_title_2:before {
	background: url(/images/apply_title_icon_2.svg) left center no-repeat;
	background-size: 100%;
}
    
.apply_title_3:before {
	background: url(/images/apply_title_icon_3.svg) left center no-repeat;
	background-size: 100%;
}
.apply_title_4:before {
	background: url(/images/apply_title_icon_4.svg) left center no-repeat;
	background-size: 100%;
}
.apply_title_5:before {
	background: url(/images/apply_title_icon_5.svg) left center no-repeat;
	background-size: 100%;
}
.apply_title_6:before {
	background: url(/images/apply_title_icon_6.svg) left center no-repeat;
	background-size: 100%;
}
.apply_title_7:before {
	background: url(/images/apply_title_icon_7.svg) left center no-repeat;
	background-size: 100%;
}
    
.warning_box {
    background: #E5FCFF;
    padding: 20px;
    border-radius: 20px;
    width: fit-content;
}


.warning_box_title{
	font-size: 28px;
	font-weight: bold;
	color: #3370C2;
    display: flex;
}

.warning_box_highlight{
	font-weight: bold;
	color: #3370C2;
}

.table_box{
    background: #E5FCFF;
    padding: 20px;
    width: 100%;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
}
.table_box td, .table_box th {
    padding: 15px 0;
}
.table_box .header-row{
	background-color: #3370C233;
  }

  @media screen and (max-width:991px){
	.table_container {
		display: flex;
		flex-wrap: nowrap;
		height: 100%;
		overflow-x: auto;
		width: auto;
	}
	.table_container .table_box {
		width: 165%;
	}
  }



.apply_box {
    border-radius: 20px;
    overflow: hidden;
	height: 100%;
}
.apply_box_title {
	font-size: 28px;
	font-weight: bold;
    display: flex;
	align-items: center;
	padding: 10px 20px;
}
.apply_box_content {
	padding: 10px 20px;
}

.apply_box_a {
    background: #FAFCF4;
	margin-right: 10px;
}
.apply_box_b {
    background: #F7FDFE;
	margin-left: 10px;
}
.apply_box_a > .apply_box_title {
    background: #EEF6DD;
	color: #8CC21F;
}

.apply_box_b > .apply_box_title {
    background: #E6F8FA;
	color: #3370C2;
}


@media screen and (max-width:991px) {
	
	.apply_title {
		font-size: 18px;
	}
	.apply_box_a {
		margin-right: 0px;
		margin-bottom: 10px;
	}
	.apply_box_b {
		margin-left: 0px;
	}
	
	.warning_box_title {
		font-size: 22px;
	}
	.apply_box_title {
		font-size: 18px;
	}
	.apply_box_title > img {
		height: 20px;
	}
		
}
/* About page end */

/* News Page */
.news_title {
	color: #0C8190;
	font-size: 22px;
	font-weight: bold;
}

.news_link {
	overflow-wrap: break-word;
}

@media screen and (max-width:991px) {
	.news_title {
		font-size: 18px;
	}
}

.coming_soon {
	color: #3370C2;
	font-weight: bold;
	font-size: 28px;
	text-align: center;
}
.qa_title {
	color: #3370C2;
	font-weight: bold;
	font-size: 28px;
}
@media screen and (max-width:991px) {
	.coming_soon {
		font-size: 22px;
	}
	.qa_title {
		font-size: 18px;
	}
}
/* News Page End */
.button{
	color: white !important;
	background: #8CC21F;
	border-radius: 10px;
    cursor: pointer;
    width: fit-content;
    padding: 5px 20px;
	transition: all .3s;
	text-decoration: none;
	
	
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	
}

.button:hover{
	opacity: 0.8;
}

.event_banner{
	background-image: url("/images/event_banner.jpg");
	width:100%;
	padding-top: calc(100% * 249 / 1920);
	background-size: cover;
	background-repeat:no-repeat;
}
.event_banner_m{
	background-image: url("/images/event_banner_m.jpg");
	width:100%;
	padding-top: 46.66%;
	background-size: cover;
	background-repeat:no-repeat;
}
.lang-tc .event_banner{
	background-image: url("/images/event_banner_tc.jpg");
}
.lang-tc .event_banner_m{
	background-image: url("/images/event_banner_m_tc.jpg");
}

@media screen and (max-width: 992px){
	.container-xl{
		padding: 15px ;
	}
}

.nav-link.coming_soon_link::after{
	padding: 4px 6px;
    line-height: 10px;
    font-size: 10px;
    border-radius: 10px;
}

iframe {
    max-width: 100%;
}


.content_popup{background-color:#FFF;padding:20px 20px;}
@media(min-width:768px){
	.content_popup{
		padding:20px 50px;
	}
}
@media(min-width:768px){
	.content_popup{min-width:360px;height:280px;max-width:800px;}
	
}
@media(max-width:767px){
	.content_popup{
		max-width:calc(100% - 0px);
		margin:0px 10px;
		max-height: 400px;
		height: 100%;
	}
	.fancybox-content{
		padding:25px 15px;
	}
}
.content_popup>div{display:table;height:100%;width:100%}
.content_popup>div>div{display:table-cell;vertical-align:middle;height:100%;}
.content_popup .title{font-size:20px;line-height:30px;letter-spacing:1px;text-align:center;margin-bottom:10px;font-weight:700}
.content_popup .caption{ /*text-align:center;*/ margin-bottom:20px;letter-spacing:1px}

.content_popup.leftalign .title,
.content_popup.leftalign .caption{
	text-align:left;
}
.content_popup.autoHeight{
	height:auto;
}

.content_popup .caption+div{
	text-align:center !important;
}
 
.displayib{display:inline-block !important;}



.calendar_row {
	text-align: right;
	background-color: #fff2cc;
}
.calendar_row > td {
	padding: 1rem;
	width: calc(100% / 7);
	vertical-align: top;
	border: 2px solid #FFF;
}
.calendar_row > td > span {
	display: block;
	font-size: 12px;
	
}
.calendar_row > td > span.calendar_remark {
	font-weight: bold;
	color: red;
	font-size: 10px;
}

.calendar_row > td > span {
	display: block;
	
}
@media only screen and (max-width: 768px){
	
	.calendar_row > td {
		padding: .25rem;
	}
	.calendar_row > td > span {
		font-size: 10px;
	}
}

.table_bg_green {
	background-color:#e2efd9;
}

.table_bg_yellow {
	background-color:#fff2cc;
}

.table_bg_blue {
	background-color:#E5FCFF;
}
.table_bg_lightgrey {
	background-color:#CCC;
}