@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url(reset.css);
* { font-family: "Noto Sans TC", "Roboto", sans-serif; box-sizing: border-box;}
html{
-webkit-text-size-adjust:none;/*修正旋轉後文字會變大*/
-webkit-overflow-scrolling:touch;/*修正ios滾動順暢*/
scroll-behavior: smooth;
scroll-padding-top: 10px}
body{ background: #f1f1f1; font-size: 15px; color: #4d4d4d; line-height:1.6;}
a:link, a:visited{ color: #aa0727; text-decoration: none;}
a:hover, a:active{ text-decoration: underline;}
img{ vertical-align: bottom;} 
a img{ border: none;}
h1{ font-size: 24px; line-height: 1.5;}
h2{ font-size: 20px; line-height: 1.5;}
h3{ font-size: 18px; line-height: 1.5;}
h4{ font-size: 16px; line-height: 1.5;}

.header{ max-width: 1000px; margin: 0 auto; position: relative;}
.main{ max-width: 1000px; padding: 15px; margin: 0 auto;}
.footer{ background-color: #2f276f; text-align: center; padding: 10px 15px; color: #fff; font-size: 11px;}
.footer > .menu{ font-size: 15px; margin-bottom: 10px;}
.footer > .menu a:link, .footer > .menu a:visited{ color: #fff;}
.footer address{ font-style: normal;}
@media only screen and (min-width:1000px){
  .main{ padding: unset;}
}
/* top_bar */
.top_bar{ background-color: #2f276f; height: 40px; border-bottom: 1px solid #ccc; position: relative;}
.top_bar > .inner{ max-width: 1000px; margin: 0 auto; height: 100%; display: flex; justify-content: space-between; align-items: center;}
.top_bar > .inner > .menu_1 > a{ margin: 0 5px;}
.top_bar > .inner > .menu_1 > a:link, .top_bar > .inner > .menu_1 > a:visited{ color: #fff;}
.top_bar > .inner > .menu_2{ display: flex; }
.top_bar > .inner > .menu_2 > a{ display: block; width: 40px; height: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden; position: relative;}
.top_bar > .inner > .menu_2 > a::after{content: ""; display: block; width: 25px; height: 25px; background: url(../images/icon_social.png) no-repeat; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: 50px auto; border-radius: 50%;}
.top_bar > .inner > .menu_2 > a.fb::after{ background-position: 0 0;}
.top_bar > .inner > .menu_2 > a.line::after{ background-position: 0 -50px;}
.top_bar > .inner > .menu_2 > a.weibo::after{ background-position: 0 -75px;}
.top_bar > .inner > .menu_2 > a.fb:hover::after{ background-position: -25px 0;}
.top_bar > .inner > .menu_2 > a.line:hover::after{ background-position: -25px -50px;}
.top_bar > .inner > .menu_2 > a.weibo:hover::after{ background-position: -25px -75px;}

/* logo_main */
.logo_main{ width: 80%; max-width: 500px; margin: 0 auto;}
.logo_main > img{ width: 100%; height: auto;}
/* main_nav */
.main_nav{ background-color: #ddd; height: 50px;}
.main_nav > .inner{ max-width: 1000px; margin: 0 auto; height: 100%; display: flex;}
.main_nav > .inner > a{ font-size: 15px; font-weight: 400; height: 100%; flex-grow: 1; display: flex; justify-content: center; align-items: center;}
.main_nav > .inner > a:link, .main_nav > .inner > a:visited{ color: #4d4d4d; text-decoration: none;}
.main_nav > .inner > a:hover, .main_nav > .inner > a:active{ background-color: #bbb; text-decoration: none;}
.main_nav > .inner > a.current{ background-color: #4d4d81; color: #fff; font-weight: 700;}
@media only screen and (min-width:768px){
  .main_nav > .inner > a{ font-size: 18px;}
}

/* block_1 */
.block_1{ margin-bottom: 20px;}
.block_1 .block_title{ text-align: center;}
.block_1 .block_title > h2{ font-size: 26px; font-weight: 400; line-height: 2; padding: 0 15px;}
@media only screen and (min-width:768px){
  .block_1 .block_title > h2{ font-size: 34px;}
}

/* part_list_1 */
.part_list_1 > .info{ display: flex; justify-content: center; gap: 25px; background-color: #eee; padding: 5px 0; border-top: 1px dashed #aaa; border-bottom: 1px dashed #aaa; font-size: 13px; margin-bottom: 15px; }
.part_list_1 > .info > div{ display: flex; align-items: center; gap: 5px;}
.part_list_1 > .info > div::before{ content: ""; display: block; width: 15px; height: 15px;}
.part_list_1 > .info > div.invoicing::before{ background-color: #fff; 
}
.part_list_1 > .info > div.successful::before{ background-color: #6A0DAD;}
.part_list_1 > .info > div.failed::before{ background-color: #F2E2F7;}
.part_list_1 > .content{ display: grid; gap: 10px; grid-template-columns: repeat( auto-fill, minmax(80px, 1fr));}
.part_list_1 > .content > a{ color: #333339; display: flex; padding: 5px 0; justify-content: center; border: 1px solid #333; border-radius: 3px;  font-weight: 700;}
.part_list_1 > .content > a:hover, .part_list_1 > .content > a:active{ text-decoration: none;}
.part_list_1 > .content > a.invoicing{ background-color: #fff; color: #333; border-color: #333;}
.part_list_1 > .content > a.successful{ background-color: #6A0DAD; color: #fff; border-color: #6A0DAD;}
.part_list_1 > .content > a.failed{ background-color: #F2E2F7; border-color: #F2E2F7; color: #333;}
@media only screen and (min-width:414px){
  .part_list_1 > .content > a{ font-size: 18px;}
}
@media only screen and (min-width:768px){  
  .part_list_1 > .info{ font-size: 15px;}
  .part_list_1 > .info > div::before{ width: 15px; height: 15px;}
}

/* part_list_2 */
.part_list_2{ margin-bottom: 40px;}
.part_list_2 .piece{ background-color: #fff; padding: 15px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 15px;}
.part_list_2 .piece.successful .piece_content > .chart > .bar > .disagree{ background-color: #eee;}
.part_list_2 .piece_title{ display: flex; flex-direction: row; align-items: center; gap: 15px; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #ddd;}
.part_list_2 .piece.failed .piece_content > .chart > .bar > .agree{ background-color: #eee;}
.part_list_2 .piece_title .city{ position: relative;}
.part_list_2 .piece_title .city::after{ content: ""; display: block; width: 1px; height: 30px; background-color: #aaa; position: absolute; top: -3px; right: -7px; transform: rotate(25deg);}
.part_list_2 .piece_title .name{ font-size: 22px; font-weight: 400;}
.part_list_2 .piece_title .state{ background-color: #ccc; padding: 5px 10px; border-radius: 5px; margin-left: auto; font-weight:700}
.part_list_2 .piece_title .state.invoicing{ background-color: #fff; color: #333; border: 1px solid #333;}
.part_list_2 .piece_title .state.successful{ background-color: #6A0DAD; color: #fff;}
.part_list_2 .piece_title .state.failed{ background-color: #F2E2F7; color: #333;}
.part_list_2 .piece_content > .chart{ display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px;}
.part_list_2 .piece_content > .chart > .txt{ display: flex; flex-direction: row; justify-content: space-between;}
.part_list_2 .piece_content > .chart > .bar{ display: flex; flex-direction: row; justify-content: space-between; height: 20px; background-color: #eee;}
.part_list_2 .piece_content > .chart > .bar > .agree{ width: 1%; background-color: #6A0DAD;}
.part_list_2 .piece_content > .chart > .bar > .disagree{ width: 1%; background-color: #F2E2F7;}
.part_list_2 .piece_content > .chart > .votes{ display: flex; flex-direction: row; justify-content: space-between; font-size: 13px;}
.part_list_2 .piece_content > .agree_threshold > span{ display: inline-block;}
.part_list_2 .piece_content > .agree_threshold > .yes::before{ content: "🅥";}
.part_list_2 .piece_content > .agree_threshold > .yes{ color: green;}  
.part_list_2 .piece_content > .agree_threshold > .no::before{ content: "🅧";}
.part_list_2 .piece_content > .agree_threshold > .no{ color: red;}
.part_list_2 .piece_content > .agree_threshold > .notyet::before{ content: "🅧";}
.part_list_2 .piece_content > .agree_threshold > .notyet{ color: skyblue;}
@media only screen and (min-width:650px){  
  .part_list_2{ display: flex; flex-direction: row; flex-wrap: wrap; gap: 2%;}
  .part_list_2 .piece{ width: 49%;}
  .part_list_2 .piece.row1{ width: 100%;}
  .part_list_2 .piece_title .name{ font-size: 22px;}
  .part_list_2 .piece_title .state{ font-size: 15px;}
  .part_list_2 .piece_content > .chart > .votes{ font-size: 15px;}
}

/* part_info_1 */
.part_info_1{ padding: 15px; background-color: #f8f1b1; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 15px;}
.part_info_1 p{ margin-bottom: 5px;}
.part_info_1 > ol{ padding: 0; margin: 0; margin-left: 30px;}
.part_info_1 > .btn_close{
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
outline: none;
margin: 0 auto; display: block; padding: 5px 10px; font-size: 15px; background-color: #edeeee; color: #4d4d4d; border: 1px solid #aaa; border-radius: 5px; margin-top: 10px;}
@media only screen and (min-width:768px){
  .part_info_1{ font-size: 15px;}
}

.gototop{ width: 45px; height: 45px; background: url(../images/gototop.png) no-repeat left top / 100% 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; opacity: 0.3; position: fixed; right: 10px; bottom: 30px; z-index: 100; cursor: pointer; transition: 0.3s ease-in-out;}
@media only screen and (min-width:1000px){
  .gototop{ width: 50px; height: 50px; right: 50px;}
}