@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;700&family=Open+Sans:wght@400;700&display=swap');

/* CSS Document */
html, html[lang=en-GB]{font-size: 20px; background-color: #ebf6f8}
body{font-size: 0.9rem; background-image: url("../images/main_bg.png"); background-position: top center; background-size: 100%; background-repeat: no-repeat; background-attachment: fixed; padding-top: 20px; padding-bottom: 20px; font-family: "Noto Sans TC", "Microsoft JhengHei", 微軟正黑體, "Microsoft YaHei", 微软雅黑体, "Open Sans", Helvetica, Arial, PMingLiU, 新細明體, 宋体, simsun, sans-serif;
}

html[lang=en-GB] body{ font-family: "Open Sans", "Microsoft JhengHei", 微軟正黑體, "Microsoft YaHei", 微软雅黑体, Helvetica, Arial, PMingLiU, 新細明體, 宋体, simsun, sans-serif;
	font-size: 0.8rem;
}

.h1, h1, .h2, h2{ font-weight: bold; color:#0075b3; font-size: 2em; }
.h3, h3, .h4, h4{ font-weight: bold; color:#e7397d; font-size: 1.5em; }
.h4, h4{font-size: 1.25em;}


.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{vertical-align: inherit;}

.table-bordered{border-collapse: separate; border: none;  border-spacing: 0;}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{border-width: 0 1px 1px 0;border-color:#00a8ce;}
.table-bordered>tbody>tr:first-child>td:first-child, .table-bordered>tbody>tr:first-child>th:first-child{border-radius: 12px 0 0 0;} /*left top*/
.table-bordered>tbody>tr:first-child>td:last-child, .table-bordered>tbody>tr:first-child>th:last-child{border-radius: 0 12px 0 0;}  /*right top*/
.table-bordered>tbody>tr:last-child>td:first-child, .table-bordered>tbody>tr:last-child>th:first-child{border-radius: 0 0 0 12px;}  /*left bottom*/
.table-bordered>tbody>tr:last-child>td:last-child, .table-bordered>tbody>tr:last-child>th:last-child{border-radius: 0 0 12px 0;} /*right bottom*/
.table-bordered>tbody>tr:first-child>td, .table-bordered>tbody>tr:first-child>th{border-top-width:1px;} /*line first*/
.table-bordered>tbody>tr:first-child>td:first-child, .table-bordered>tbody>tr:first-child>th:first-child{border-width: 1px 1px 1px 1px;} /*col first*/
.table-bordered>tbody>tr>td:first-child,.table-bordered>tbody>tr>th:first-child{border-left-width:1px;} /*left col*/

.table-striped>tbody>tr:nth-of-type(odd){background-color: #ebf6f8;}
.table-striped th{color:#00a8ce;}
.table-col-center th, .table-col-center td{text-align: center}

.btn-ex{font-size: 32px; padding: 0.5em 2em; font-weight: bold; border-radius: 1rem; white-space: normal; background-color: #81bf24; color:#FFF; /*border: 5px #81bf24 solid;*/
-webkit-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.35);
box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.35);
transform: translateY(-5px);
}
.btn-ex:active, .btn-ex:focus, .btn-ex:hover, .btn-ex:active:focus{ color:#FFF;}
.btn-ex:active{ color:#FFF; 
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	transform: translateY(0);
}


.btn-ex.disabled{background-color: #999; /*border-color:#999;*/
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	transform: translateY(0);
}

.main-content ul>li:before, .main-content ul[type=disc]>li:before, sections ul[type=circle]>li:before, .main-content ul.dot>li:before{ background-color: #00a8ce;}

.wrapper-boxed{background-color: #fff; width: 96%; max-width: 1170px; border-radius: 12px; overflow: hidden; position: relative; 
	background-image: url(../images/bottom_bg.svg); background-repeat: no-repeat; background-position: bottom center; padding-bottom: 80px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(41, 60, 74,0.205);
-moz-box-shadow: 0px 0px 20px 0px rgba(41, 60, 74,0.205);
box-shadow: 0px 0px 20px 0px rgba(41, 60, 74,0.205);
}

.wrapper-boxed .container{width: 100%;}

.nav-wrapper{position: relative; z-index: 1}

#showcase{position: relative;}
.lang-switch{position: absolute; top:12px; /*right:12px;*/ height: auto; right:0; padding: 5px 15px 5px 5px; border-radius: 24px 0 0 24px; background-color: #087f92; line-height: 0;
	-webkit-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2);
}
.lang-switch>a{display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #087f92;
    color: #FFF;
    text-align: center;
    line-height: 36px;
    font-size: 0.75rem;
    letter-spacing: -1px;
	
}
.lang-switch>a.active, .lang-switch>a:hover, .lang-switch>a:focus, .lang-switch>a:focus:active {
/*-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);*/
}
.lang-switch>a.active{background-color: #81bf24;}


#main-content section{padding-top: 30px;}

.block-html .item{ position: relative; }
.block-html .item:before{content: ""; position: absolute; left:30px; top:72px; bottom: 0; display:block; width: 3px; background-color: #fac106; border-radius: 2px;}

.block-html .item>div{-ms-flex:1 0 100%; flex:1 0 100%;}
.block-html .item-intro{padding: 1em 1em 1em 84px;}
.block-html .item-title{ min-height: 64px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center !important;
 align-items: center !important;
}
.block-html .item-title h3{margin-bottom: 0;}
.block-html .title-icon{max-width: 64px; max-height: 64px; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 20px}

.block-text .item-intro{padding: 1em 0;}

.agency-info{}
.agency-info .item-footer{ order: 3; padding-left: 1rem;}
.agency-info .btn{background-color: #81bf24 !important; border-color: #81bf24; color:#FFF;}

.mangn-modal{border-radius: 12px;}
.login-text{margin-bottom: 1rem;}
.login-ex{ text-align: right !important; }
.login-ex .btn{font-size: 0.75rem}

.shadow-box{ border-radius: 12px; height: 100%; position: relative; font-size: 0.75rem; line-height: 1.5em;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
	
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;

}
.voting-item:hover{ 
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
}

.block-agency-list .item{display: -ms-flexbox; display: flex; }

.block-agency-list .shadow-box{/*height: auto; margin: 0 15px 15px; -ms-flex: 0 0 calc(50% - 30px); flex: 0 0 calc(50% - 30px);*/
	-ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px;
	display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
}

.item-thumb:before{background-color: transparent;}
.item-thumb img{z-index: 0;}
.block-agency-list .shadow-box .item-thumb{margin-top: 15px;}
.block-agency-list .shadow-box .item-thumb::before{background-color: #FFF;}

.voting-item .item-video{border-radius: 12px 12px 0 0; overflow: hidden;}
.voting-item .item-intro{padding: 0 15px; min-height: 80px; }
.voting-item .item-desc{position: initial;}

.voting-item .show-intro{padding-right: 90px;}
.voting-item .show-intro .inline-logo{width: 80px; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 1rem;}
.voting-item .show-intro h4{margin-bottom: 0;}
.voting-button{position: absolute; right:10px; bottom:5px;}

.voting-button>label, .agency-info .btn{ width: 80px; height: 80px; background-color: #999; color:#FFF; border-radius: 50%; text-align: center; line-height: 1; user-select: none;
	display:-ms-flexbox; display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-line-pack: center !important;
 align-content: center !important;
	-ms-flex-pack: center !important;
 justify-content: center !important;
}
.agency-info .btn{ width: 120px; height: 120px; font-size: 24px; font-weight: bold; margin: auto;}

.voting-button>input[type=checkbox]:checked+*{background-color: #81bf24;
	-webkit-animation: vote-clicked .35s ease-in-out forwards;
        	animation: vote-clicked .35s ease-in-out forwards;
}
.voting-button>input[type=checkbox]{display:block;
	webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.voting-button>label::before, .agency-info .btn::before{ content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 417.065 417.065'%3E%3Cpath d='M401.56 47.087c-17.452-14.176-42.561-12.128-56.095 4.536L167.042 271.598 73.913 150.58c-13.892-18.037-39.781-21.411-57.819-7.535-18.054 13.884-21.427 39.781-7.535 57.843L133.56 363.321c13.892 18.037 39.789 21.419 57.835 7.535 5.145-3.959 8.95-8.958 11.648-14.42l205.645-253.514c13.527-16.688 10.332-41.675-7.128-55.835z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	background-color: transparent; border: none; width: 100%; height: 32px; background-repeat: no-repeat; background-position: center; margin: 0 0 5px 0;
	/*background: none; border: none; width: 100%; font-size: 32px; position: relative; top:auto; left: auto; margin: 0*/}
.voting-button input[type=checkbox]:checked+label::before{background-color: transparent; border: none;}

.voting-button input[type=checkbox]:disabled+label{background-color: #CCCCCC; cursor: not-allowed}
.voting-button input[type=checkbox]:disabled+label::before{background-color: transparent; cursor: not-allowed}

.click-list{display:inline-block; padding-left: 0; margin: 20px auto 30px;}
.click-list li{ margin-bottom: 0.5em; text-align: left }

.icon-check{font-size: 32px;}
.icon-check::before, .icon-check::after{width: 6px; }

.list-dropdowns{display:-ms-flexbox; display:flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap;  }
.list-dropdowns, .list-dropdowns ul{padding: 0;}
.list-dropdowns li{ font-size:0.7rem;}
.list-dropdowns>li{-ms-flex:1 1 auto; flex:1 1 auto; max-width: 20%; /*border:1px #00a8ce solid; margin-left: -1px;*/ padding: 0 !important; position: relative; background-color: #00a8ce;border-left:1px #FFF solid;}
.list-dropdowns>li::before{content: none !important;}
.list-dropdowns>li>h4{ background-color: #00a8ce; color:#FFF; font-size: 1em; font-weight: normal; letter-spacing: 2px; padding: 1em 0.5em; text-align: center;  margin: 0;  min-height: 75px; padding-bottom: 25px; position: relative}
.list-dropdowns>li:first-child{border-left:none;}
.list-dropdowns .subox{position: absolute; left: 0; right:0; top:100%; z-index: 6; background-color: #FFF; border: 1px #00a8ce solid; padding: 1em 1em 0; /*height: 0; overflow: hidden;*/
}

.list-dropdowns .subox li{ margin-bottom: 1em;} 
/*.list-dropdowns>li:hover>ul>li{height: 2em;}*/
.list-dropdowns ul.arrow>li:before{ top: 0.5em; left: 0.35em; color:#00a8ce; font-size: 2em; background-color: transparent; }

.list-dropdowns .btn-link{padding: 0; position: absolute; left:0; right:0; bottom:4px; margin: auto; color:inherit; font-size: 12px;}


#chart-tooltip{ position: absolute; width: 300px; padding: 10px; background-color:#FFF; border: 1px #00a8ce solid; border-radius: 8px; opacity: 0; font-size: 0.8rem;  pointer-events: none; 
	-webkit-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.25);
box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.25);
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
#chart-tooltip h4{background-color: #00a8ce; color:#FFF; padding: 8px 10px; margin: -10px -10px 10px -10px;}

#page-footer{padding-top: 60px;}
#page-footer ul{padding-left: 0; list-style: none;}
#page-footer li{padding-left: 40px;}
#page-footer li:before{content: none}
.footer-title{display:block; font-weight: bold; color:#333;}
.footer-text{display:block; }

.vote-counter{/*position: fixed; left: 0; right: 0; top:450px; z-index: 9; pointer-events: none*/ }

.vote-counter .wrapper{
	/*width: 120px; height: 120px; border-radius: 50%; background-color: #087F92; color:#FFF; text-align: center; float: right; margin-right: -75px;
	display:-ms-flexbox; display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-line-pack: center !important;
 align-content: center !important;
	-ms-flex-pack: center !important;
 justify-content: center !important;*/
	position: relative;
	width:100%;
	max-width: 400px; padding: 1rem; margin: 0 auto 20px;
	border: 2px #81bf24 solid; color:#6aa018; background-color: #f0ed6a;
	border-radius: 10px; font-size: 32px; font-weight: bold;
}

.vote-counter .wrapper::before {
    content: "";
    color: #81bf24;
    width: 0;
    height: 0;
    border: 8px currentColor solid;
    position: absolute;
    bottom: -16px;
    left: 0; right: 0; margin: 0 auto;
    border-color: currentColor transparent transparent transparent;
}

.vote-counter .wrapper::after {
    content: "";
    color: #f0ed6a;
    width: 0;
    height: 0;
    border: 8px currentColor solid;
    position: absolute;
    bottom: -13px;
    left: 0; right: 0; margin: 0 auto;
    border-color: currentColor transparent transparent transparent;
}


.vote-counter.disabled .wrapper{
	border: 2px #CCC solid; color:#CCC; background-color: #eee;
}
.vote-counter.disabled .wrapper::before{color:#CCC;}
.vote-counter.disabled .wrapper::after{color: #eee;}

.counter-num{/*display:block; width: 100%; font-size: 48px; line-height: 1.1em; font-weight: bold;*/}
.counter-text{/*display:block; width: 100%;font-weight: bold;*/}

.confirm-help{color:#990000; visibility: visible;}
.confirm-help.disabled{color:#FFF;visibility: hidden;}

.mini-head{font-size: 1.1em; color:#00a8ce}

/*@media (min-width: 992px){ 
	#main-content section>.container>div{max-width: 800px; margin-left: auto; margin-right: auto;}
}*/


@-webkit-keyframes vote-clicked {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
	100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes vote-clicked {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
	100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@media (max-width: 1280px){
.main-content { min-height: 0; }
	/*.vote-counter{ top:420px;}
	.vote-counter .wrapper{margin-right: -35px;}*/
}

@media (max-width: 1140px){
 /*.vote-counter{ top:200px;}
	.vote-counter .wrapper{margin-right: 0;}*/
}

@media (min-width: 993px){ 
	#top-menu{ height:auto; color:#FFF}
	#top-menu .navbar>li>a{padding: 8px; border-left:1px #fff solid; background-color: #087f92;}
	#top-menu .navbar>li:first-child>a{border-left:none;}
	#top-menu .nav>li>a:active, #top-menu .nav>li>a:focus, #top-menu .nav>li>a:hover, #top-menu .nav>li>a:active:focus, #top-menu .nav>li.active>a { background-color: #81bf24; }
} 

@media (max-width: 992px){ /*bootstrap lg*/
	body{font-size: 0.8rem;}
	.lang-switch{ padding-right: 64px; }
	#mobile-menu { position: absolute; top: 5px; right: 0; width: 58px; height: 58px; background: #FFF; color: #087f92; border: 5px #087f92 solid; font-size: 24px; text-align: center;
	-webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
	}
	#top-menu, #top-menu.fixed{position: absolute; top:0; bottom:auto; }
	#top-menu:before{background-color: #213540;}
	#top-menu.open:before{ opacity: 0.9;}
	/*#top-menu .navbar, #top-menu.fixed .navbar{ width: 50%; min-width: 320px; float: right;}*/
	#top-menu .navbar>li {
    /*background-color: #FFF;
    border-top: 1px #ddd solid;
    position: relative;*/
		color:#FFF; font-weight: bold; letter-spacing: 0.1em;
		font-size: 32px;
}
	#top-menu .navbar>li>a{}
	
	html[lang=en-GB] .navbar>li>a{font-size: 1rem;}
	.wrapper-boxed{max-width: 768px;}
	
	.list-dropdowns{-ms-flex-wrap: wrap; flex-wrap: wrap;  }
	.list-dropdowns>li{ max-width: 33.33%;}
	
	/*.vote-counter{bottom:74px; right:10px;}*/
}


@media (max-width: 768px){ /*tablet*/ 
	.h1, h1, .h2, h2{font-size: 1.5rem;}
	.wrapper-boxed{max-width: 640px;}
	/*.vote-counter{top:200px; bottom:auto;}
	.vote-counter .wrapper{width: 100px; height: 100px; font-size: 18px;}*/
	.counter-num{font-size: 32px;}
	.block-html .item:before{content: none;}
	.block-html .item-intro{padding: 1em;}
	
	.items-image-left .item-thumb{margin: 0;}
}


@media (max-width: 767px){
	body{padding-top: 0; padding-bottom: 0;}
	body{font-size: 0.7rem;}
	.table-responsive>.table-bordered>tbody>tr:last-child>td, .table-responsive>.table-bordered>tbody>tr:last-child>th, .table-responsive>.table-bordered>tfoot>tr:last-child>td, .table-responsive>.table-bordered>tfoot>tr:last-child>th{border-bottom: 1px #00a8ce solid;}
	.table-responsive>.table-bordered>tbody>tr>td:first-child, .table-responsive>.table-bordered>tbody>tr>th:first-child, .table-responsive>.table-bordered>tfoot>tr>td:first-child, .table-responsive>.table-bordered>tfoot>tr>th:first-child, .table-responsive>.table-bordered>thead>tr>td:first-child, .table-responsive>.table-bordered>thead>tr>th:first-child{border-left: 1px #00a8ce solid;}
	.table-responsive>.table-bordered>tbody>tr>td:last-child, .table-responsive>.table-bordered>tbody>tr>th:last-child, .table-responsive>.table-bordered>tfoot>tr>td:last-child, .table-responsive>.table-bordered>tfoot>tr>th:last-child, .table-responsive>.table-bordered>thead>tr>td:last-child, .table-responsive>.table-bordered>thead>tr>th:last-child{ border-right: 1px #00a8ce solid;}
	
	
	.wrapper-boxed{width:100%; max-width: 100%; border-radius: 0;}
	.block-voting-list .shadow-box, .block-agency-list .shadow-box, .items-image-left .item{-ms-flex-wrap: wrap;flex-wrap: wrap;}
	.agency-info .item-footer{width: 100%; padding: 30px 0 0;}
	.list-dropdowns>li{max-width: 50%;}
	.block-html{}
	.block-html .item-intro{padding: 10px 0;}
	.block-html .item:before{content: none;}
}

@media (max-width: 640px){
	/*.vote-counter{top:80px;}*/
	
}

@media (max-width: 425px){
	.lang-switch{ position: relative; top:0;left:0; right:0; border-radius:0; text-align: left;}
	.list-dropdowns>li{max-width: 100%;}
	.list-dropdowns .subox{position: relative; top:0; }
}

@media (max-width: 374px){
	.show-intro.d-flex{-ms-flex-wrap: wrap; flex-wrap: wrap;}
	.show-intro.d-flex>h4{width: 100%; padding-bottom: 20px;}
}