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

/*reset*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

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

fieldset,
img {
	border: 0;
}

ol,
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul {
	list-style-position: outside;
}

caption,
th {
	text-align: left;
}

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

abbr,
acronym {
	border: 0;
}

a {
	text-decoration: none;
	color: #000;
}

html,
body {
	font-family: '微軟正黑體';
	-webkit-text-size-adjust: none;
	/* 在 iOS 旋轉手機畫面時鎖定文字不縮放 */
	padding: 0;
	margin: 0;
}

* {
	box-sizing: border-box;
}

/*setting*/
body {
	font-style: normal;
	font-weight: 200;
	font-size: 16px;
	background: #f2f2f2;
	box-sizing: border-box;
}

a,
a:hover {
	transition: all .3s ease-out;
}

.fontC1 {
	color: #8C8070;
}

.fontC2 {
	color: #594f46;
}

.fontC3 {
	color: #BFB4AA;
}

.fontC4 {
	color: #40332E;
}

.fontC5 {
	color: #f2f2f2;
}

header {
	position: fixed;
	width: 100%;
	background: #f2f2f2;
	z-index: 999;
}

.header_container {
	width: 99%;
	max-width: 1524px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 1.5%;
	gap: 1%;
	border-bottom: 2px solid #BFB4AA;
}



.contain_block{
	width: 99%;
	max-width: 1524px;
	margin: 0 auto;
	display: block;
	padding: 5% 2% 2% 2%;
}

.header_container .logo{
	width: 30%;
}
.header_container .header_result {
	width: 450px;
    display: flex;
    gap: 10px;	
	font-weight: bold;
}
.header_container .header_result .left .top{
	border-bottom: 2px solid;
	text-shadow: 0 0 #594f46;
	font-size: 1.2em;
	text-align: center;
}
.header_container .header_result .left .top span{
	font-size: 1.3em;
}
.header_container .header_result .left .name{
	font-size: 2.5em;
    text-align: center;
	text-shadow: 0 0 #594f46;
}
.header_container .header_result .right {
	width: calc(100% - 180px);
}
.header_container .header_result .right .top{
	font-size: 1.4em;
    padding: 5px;
    text-shadow: 0 0 #594f46;
}
.header_result .progress-container{
	border-radius: 15px;
	background-color: #beb4aa;
	margin-top: 0;
}

.header_result .progress-bar {
    color: #fff;
    background-color: #594f46;
	text-align: left;	
	padding-left: 10px;
}
.header_result .progress-container .all-number {
   /* color: #594f46;*/
}
.header_result .right .bottom {
    font-size: 0.8em;
    position: relative;
}
.header_result .elected,.header_result .no_elected  {
    width: 20%;
    position: absolute;
    top: -15%;
    left: 30%;
    z-index: 2;
}
.header_container .header_result.desktop-visible{
	overflow:visible;
}
.header_result .progress-container .agree_vote {
    position: absolute;
}
.elected,.no_elected{
 opacity: 0;
  transform: scale(2); /* 初始放大兩倍 */
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* 確保它不會擋住點擊 */
  position: absolute;
  top: 0;
  left: 0;
}
.elected.show,.no_elected.show  {
	opacity: 1;
	transform: scale(1); /* 回到正常大小 */
  }
header .nav {
	width: 750px;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.7%;
    margin: 0 auto;
}

header .nav nav ul {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

header .nav nav ul a {
	color: #594f46;
	font-weight: bold;
	text-shadow: 0 0 #594f46;
}
header .nav nav ul li.active a{
	background: #8b7f6f;
    color: #fff;
    padding: 0 5px;
    border-radius: 10px;
}

header .nav nav ul li .gap {
	color: #bfb4aa;
	font-size: 0.8em;
}


.hamburger {
	display: none;
	margin-left: 10px;
	position: fixed;
	right: 3%;
	cursor: pointer;
	z-index: 999;
	TOP: 10PX;
}

.logo_cts {
	width: 19%;
}

.img100 {
	max-width: 100%;
	height: auto;
}
.header_container .logo{
	display: flex;
    align-items: center;
}
.header_container .event_logo{
	width: 70%;
    padding: 0 5%;
}
.header_container .countdown .top{
	text-align: center;
}
.header_container .countdown{
	font-size: 0.8em;
}
/*owl*/
.disabled,
.owl-theme .owl-nav .disabled {
	display: none;
}

.header-owl-1,
.header-owl-2 {
	line-height: 43px;
	font-size: 1em;
	transition: .1s;
}

.header-owl-1 .item {
	padding-top: 7px;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
}

/* 讓外層相對定位，方便 nav 絕對定位 */
.owl-carousel {
	position: relative;
}

/* nav 按鈕容器 */
.owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

/* nav 按鈕本身 */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
	background: none;
	border: none;
	font-size: 32px;
	pointer-events: auto;
	/* 開啟按鈕本身點擊事件 */
	color: #333;
	padding: 0 15px;
	cursor: pointer;
	position: absolute;
	z-index: 10;

}

.owl-nav button.owl-prev {
	left: -2%;
}

.owl-nav button.owl-next {
	right: -2%;
}

.owl-nav button img {
	width: 85%;
}

.owl-prev, .owl-next {
    pointer-events: all;
    min-width: 40px; /* 保持空間，不然消失會破版 */
    text-align: center;
}
.header-owl-1 a {
	color: #fff;
	display: block;
	line-height: 43px;
	font-size: 1em;
	transition: .1s;
	text-align: center;
}

.header-owl-1 .item img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	/* 或 cover，看你需求 */
}

.header-owl-1 .title {
	text-align: left;
	padding-left: 3%;
	font-size: 1.6em;
	font-weight: bold;
}

.header-owl-1 .title .number {
	font-size: 1.3em;
}

.header-owl-1.img_container {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.header-owl-1 .img_container .name {
	position: absolute;
	bottom: 0;
	background: rgb(89 79 70 / 67%);
	width: 100%;
	border-radius: 0 0 20px 20px;
	font-size: 2.3em;
	padding: 2.5% 6%;
	text-align: right;
	font-weight: bold;
	color: #fff;
}
#result{
	padding-top: 100px;
}
#top_cards .bottom{
	display: flex;
	justify-content: space-between;
	align-items: end;
	text-align: center;
    padding: 3% 1%;
}
#top_cards .bottom >div{
	width: 30%;
}
.down-arr{
	width: 20%;
	margin: 0 auto;
	cursor: pointer;
	animation: float 1.5s ease-in-out infinite;
	user-select: none;
}
@keyframes float {
    0% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 10px); }
    100% { transform: translate(-50%, 0); }
}
.countdown {
	font-size: 1.2em;
}
.countdown .top{
	font-size: 1.5em;
    font-weight: bold;
	text-shadow: 0 0 #594f46;
}
.countdown .top span{
	font-size: 1.7em;
}
.countdown .down,.countdown .down > div{
	display: flex;
	justify-content: center;
	align-items: end;
    font-weight: bold;
}
.countdown .down > div{
	margin: 0 1%;

}
.countdown .down > div > div{
	background: #594f46;
    border-radius: 5px;
    font-size: 3em;
    padding: 5px 7px;
    color: #fff;
    font-family: sans-serif;
    line-height: 1em;
	margin: 5%;
}
#seats{
	width: 90%;
    max-width: 950px;
    margin: 0 auto;
    padding: 6% 1% 10% 1%;
	position: relative;
}
.contain_block .menu {
    display: flex;
	justify-content: center;
    gap: 1em;
    margin: 0 auto 10px auto;
}
.contain_block .menu .btn {  
	position: relative; /* ✅ 加這行 */
	cursor: pointer;
    background: #BFB4AA;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.5em;
    padding: 5px 15px;
    border-radius: 10px;
}
.contain_block .menu .btn.active{
	background: #40332E;
}
.contain_block .menu .btn.active::after{
	content: "";
	position: absolute;
    left: 50%;
    bottom: -10px; /* 距離按鈕底部的距離，可調整 */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #40332E; /* 三角形顏色，和 active 背景一致 */
}
#seats .legislator-text > div{	
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 1.5em;	
	font-weight: bold;
}
#seats .legislator-text .line1{
	margin-top: -5%;
}
#seats .legislator-text span{
	font-size: 1.5em;
}
#seats .note{
	position: absolute;
    right: -10%;
    bottom: 10%;
    font-weight: bold;
    font-size: 1.2em;
}
#legislator-seat canvas{
	width: 100%;
}
 .menu{
	padding-bottom: 2%;
}
#who .top{
	font-size: 0.8em;
}
#who .header-owl-1 .img_container .name{
	font-size: 2.1em;
}
#who .header-owl-1 .img_container{
	position: relative;
}
#who .header-owl-1 .img_container .elected.show,#who .header-owl-1 .img_container .no_elected.show{
	position: absolute;
    bottom: 1%;
    top: unset;
    left: 3%;
    width: 65%;
}
.desktop-visible{
	display: block;
	visibility:visible;
	width: auto;
	overflow: hidden;
}
.mobile-visible{
	display: none;
	visibility: hidden;
	width: 0;
	overflow: hidden;
}
#who .bottom{
	display: none;
	
}
#who .header-owl-2{
	margin-top: -2%;
}
#who .header-owl-2 .card {
    position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: 0 5% 0 0;
  border-radius: 12px;
}

/* 背後 layer 色塊 */
#who .header-owl-2 .card .layer {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 67%;
    background: #d8d3cf;
    z-index: 0;
    border-radius: 12px;
}

/* 前面的內容層，左右排版 */
#who .header-owl-2 .card .content {
	position: relative;
    display: flex;
    z-index: 1;
    align-items: flex-end;
}

/* 左圖 */
#who .header-owl-2 .card .img_container {
    margin-right: 2%;
    display: flex;
    align-items: flex-end;
	position: relative;
}
#who .header-owl-2 .card .img_container .elected,#who .header-owl-2 .card .img_container .no_elected{
	position: absolute;
    left: 5%;
    top: unset;
    bottom: 2%;
    width: 40%;
}
#who .header-owl-2 .card .img_container img {
    max-height: 100%;
    object-fit: contain;
}

/* 右文 */
#who .header-owl-2 .card .info {
    width: calc(96% - 450px);
    right: 4%;
    position: absolute;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 可選：讓內部內容分散 */
    bottom: 0;
    padding: 3% 0 3.2% 0;
}

#who .header-owl-2 .card .title {
	font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 8px;
    border-bottom: 2px solid #594f46;
    display: inline-block;
}
#who .header-owl-2 .card .title .number{
	font-size: 1.3em;
}
#who .header-owl-2 .card .name {
	font-size: 3.2em;
    margin-top: 4px;
    font-weight: bold;
}

#who .header-owl-2 .card .bar {
    width: 100%; 
}

#who .bottom,#who .bottom-info{
	padding: 0 0 10px 0;
	position: relative;
}
#who .bottom .owl-nav{
	left: 16%;
    right: 16%;
    TOP: 60%;
}
.news-slide .owl-nav{
	left: 0 !important;
    right: 0 !important;
	top: 50% !important;
}
.progress-container {
	width: 100%;
	background-color: #8c8070;
	border-radius: 20px;
	overflow: hidden;
	margin-top: 10px;
	position: relative;
  }
  
  .progress-bar {
	height: 100%;
	width: 0;
	background-color: #bfb4aa;
    text-align: center;
    line-height: 1em;
    height: 3em;
    color: #594f46;
    font-size: 1em;
    font-weight: bold;
    padding-top: 0.5em;
	text-shadow: 0 0 #594f46;
  }
  .progress-container .all-number{
	position: absolute;
    right: 10px;
    color: #fff;
    top: 0;
    line-height: 1em;
    height: 3em;
    font-size: 1em;
    font-weight: bold;
    padding-top: 0.5em;
    text-align: center;
  }
 #who .note {
	position: absolute;
    right: 22%;
    top: 10%;
    font-weight: bold;
	font-size: 0.85em;
  }
  #who .note2 {
	text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    padding: 20px;
  }



  .bottom-info-top {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  padding: 30px 0;
  flex-wrap: wrap;
}


.bottom-info-top .left{
	align-self: flex-start;
	width: 14%;
}
.bottom-info-top .right {
	align-self: flex-end;
	width: 20%;
}
.bottom-info-top .center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  justify-content: end;
}



/* 對話泡泡通用樣式 */
.talk {
  max-width: 90%;
  background: #8c8070; 
  font-weight: bold;
  padding: 10px 14px;
  border-radius: 10px;
  position: relative;
  line-height: 1.6;
  opacity: 0;
  font-size: 1.5vw;
}
.talk a{
	color: #fff;
    display: flex;
  align-items: center; /* 垂直置中 */
    gap: 1em;
}
/* 左邊說話 */
.talk-left {
  align-self: flex-start;
  animation: bubbleInLeft 0.6s ease forwards;
}

.talk-left::before {
	content: "";
    position: absolute;
    left: -25px;
    top: 30%;
    border-style: solid;
    border-width: 10px 25px 10px 0;
    border-color: transparent #8c8070 transparent transparent;
}

/* 右邊說話 */
.talk-right {
  align-self: flex-end;
  text-align: right;
  animation: bubbleInRight 0.6s ease forwards;
}

.talk-right::before {
	content: "";
	position: absolute;
	right: -25px;
	top: 30%;
	border-style: solid;
	border-width: 10px 0 10px 25px; /* 上 右 下 左 */
	border-color: transparent transparent transparent #8c8070;
}

/* tag 樣式 */
.talk .tag {
	font-size: 0.9vw;
  opacity: 0.8;
}

/* 動畫效果 */
@keyframes bubbleInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes bubbleInRight {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.bottom-info-bottom{
	padding: 2% 0;
	display: flex;
	align-items: stretch; /* 讓 .left/.right 跟 .center 同高 */
}
.bottom-info-bottom .right,.bottom-info-bottom .left{
	width: 15%;
	background-image: url('../images/｛.png');
	background-size: auto 100%;
    background-position: 80%;
    flex-shrink: 0;
    background-repeat: no-repeat;
}
.bottom-info-bottom .right{
	transform: scaleX(-1); /* 水平翻轉 */
  	background-position: 80%; /* 可調整位置以配合翻轉 */
}
.bottom-info-bottom .center{
	width: 70%;
}
.bottom-info-bottom .title{
	font-size: 1.8em;
    font-weight: bold;
    line-height: 2.2em;
	text-shadow: 0 0 #40332E;
}
.bottom-info-bottom .vote2024_block .row{
	display: flex;
	margin-bottom: 10px;
}
.bottom-info-bottom .vote2024_block .name{
	font-size: 1.4em;
    font-weight: bold;
    border-right: 2px solid #40332E;
    height: 1.4em;
	padding-right: 5px;
	text-shadow: 0 0 #40332E;
}
.bottom-info-bottom .vote2024_block  .imgH100{
	margin-top: -1%;
}
.bottom-info-bottom .vote2024_block .votes{
	flex: 1;
	padding-left: 5px;
}
.bottom-info-bottom .vote2024_block .progress-container{
	background-color: transparent;
    border-radius: 0;
    display: flex;
    gap: 5px;
    margin-top: 0;
}
.bottom-info-bottom .vote2024_block .progress-bar{
    height: 2em;
    padding-top: 0;
    line-height: 2em;
    background-color: #8c8070;
}
.bottom-info-bottom .vote2024_block .progress-container .all-number {
	position: relative;
    right: 0;
    color: #40322e;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 0 0 #40332E;
    height: auto;
    padding: 0;
    min-width: 5em;
    line-height: 1em;
}
.imgH100{
	max-height: 100%;
    width: auto;
}
.bottom-info-bottom .content {
	font-size: 1.4em;
    font-weight: bold;
    line-height: 1.4em;
    padding-right: 5px;
    text-shadow: 0 0 #40332E;
}
.news_block{
	padding: 20px 0;
}
.news_block .title{
	text-align: center;
    font-size: 2.8em;
    font-weight: bold;
	text-shadow: 0 0 #d8d3ce;
}
.news_block .title .small{
	font-size: 0.8em;
}
.news_block .news_bg_container{
	padding: 3.5% 6%;
	margin-top: -7px;
}
.bottom-pnews .news_bg_container{
	background: #beb4aa;
}
.bottom-news .news_bg_container{
	background: #d5d0cc;
}


.newsimg-thumb {
    width: 9999px;
    max-width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
 }
.newsimg-thumb img {
    transition: all .3s ease-out;
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.newsimg-thumb:hover img {
    transform: scale(1.1);
}
.line-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news_list p{
	margin: 5px 0 10px 0;
    font-size: 1.2em;
    font-weight: 500;
}
.news_list .item{
	padding: 10px 5px;
}

.news_list .item .title{
	font-size: 1.4em;
    text-align: left;
}
#why {
	position: relative;
  }
  #scene {
	position: relative;
	max-width: 1600px;
	width: 100%;
	margin: 0 auto;
  }
  
  .mid-line {
	position: absolute;
	top: 5%;                 /* 從上方 5% 開始 */
	height: 90%;
	left: 50%;
	width: 0.25%;
    background-color: #bfb4aa;
    min-width: 2px;
	transform: translateX(-50%);
	z-index: 0;
  }
.why-section {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 150px 50px 10vh 50px;
	box-sizing: border-box;
  }
  .why-section .block{
	position: relative;
  }
  .why-section.right .block {
	width: 50%;
	margin-left: auto;
	text-align: left;
  }
  
  .why-section.left .block {
	width: 50%;
	margin-right: auto;
  }
  
  .why-section  .title-image {
	opacity: 0;
	transform: translateY(100px);
	overflow: hidden;
  }
  .why-section  .title-image img{
	max-width: 85%;
  }

  .why-section .content {
	opacity: 0;
	transform: translateY(100px);
	font-size: 1.2em;
  }
 .why-section .bg_div {
    padding: 5% 6%;
    font-weight: bold;
    border-radius: 10px;
  }
  .why-section .content_div{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5% 10%;
}
  .bgC1{
	background: #8C8070;
  }
  .bgC2{
	background: #594F46;
  }
  .bgC3{
	background: #bfb4aa;
  } 
  .why-section .content .bgC1{
	color: #FFF;
	border-radius: 5PX;
    padding: 5px;
  }
.in_div .note{
	margin-top: 10px;
}
  .why-section .content .row {
	display: inline-grid;
  grid-template-columns: max-content auto;
  gap: 1em;
  padding-bottom: 0.5em;
  }
  
  .why-section .content .row > div {
	white-space: normal;
  align-self: start;
  }
  .why-section .content .row:first-child{
  margin-top: 1em;}
  .why-section .content .row > div:first-child {
	min-width: 10em;
	padding-left: 1em;
  }
  .why-section .content .row > div:last-child {
	white-space: normal;
  }
  .why-section.right .title-image{
    left: -13%;
    z-index: 1;
    position: absolute;
}
.why-section.right .content{
	margin-top: 23%;
    margin-left: 2%;
}
.why-section.left .title-image{
    right: -29%;
    z-index: 1;
    position: absolute;
}
.why-section.left .content{
	margin-top: 23%;
    margin-right: 2%;
}
.why-section.center1 .title-image{
	left: 6%;
    z-index: 1;
    position: absolute;
}
.why-section.center1 .title-image img{
	max-width: 95%;
}
.why-section.center1 .content{
	margin-top: 16%;
}
.why-section .in_div.bg_div{
	padding: 2% 6% 1%;
    margin-bottom: 1.5%;
	display: flex;
}
.why-section .block2 .image{
	width: 10%;
}
.why-section .block2 .word{
	width: 90%;
}
.why-section strong{
	font-size: 1.1em;
    text-shadow: 0 0 #594f46;
}
.arrimg{
	width: 30%;
	max-width: 50px;
	margin: -10px auto -20px auto;
	z-index: 2;
    position: relative;
}
.box_div{
	display: flex;
    z-index: 1;
    position: relative;
}
.box_div > div:first-child{
	font-size: 1em;
    width: 2em;
    background: #40332e;
    color: #fff;
    padding: 5px;
    display: flex;
    align-items: center;
    border-radius: 10px 0 0 10px;
}
.box_div > div:last-child{
	background: #a99f93;
    padding: 0 10px;
}
.bg_div .imgH100{
	height: 1em;
}
.bg_div .moreH{
	height: 1.5em;
	margin-top: 5px;
}
.in_div_show{
	display: flex;
	opacity: 0;
  transform: translateY(30px); /* 視覺上下滑 */
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.in_div_show.visible {
	opacity: 1;
	transform: translateY(0);
  }
.in_div_show > div{
	width: 50%;
    padding: 15px;
	position: relative;
}
.in_div_show > div > div{
	border-radius: 20px;
    padding: 20px;
    color: #fff;
    font-weight: bold;
    font-size: 0.9em;
	
}
.in_div_show  .title{
	font-size: 1.2em;
}
.in_div_show  > div > div::after{
	content: "";
	position: absolute;
    bottom: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
   
}
.in_div_show  > div.left > div::after{
	border-top: 10px solid transparent;
    border-right: 10px solid #594f46;
    border-bottom: 10px solid transparent;
    left: 10px;
}	
.in_div_show  > div.right > div::after{
	border-top: 10px solid transparent;
	border-left: 10px solid #594f46; /* 將左邊設置為紅色，形成三角形 */
	border-bottom: 10px solid transparent;
    right: 10px;
	transform: translateX(25%);
}	
.floatimg {
	float: right;
	width: 15%;
	margin-left: 1em;
	margin-top: 1em;
	margin-bottom: 0.5em;
	transform:rotate(8deg);
  }
  
  .floatimg img {
	width: 100%;
	height: auto;
	display: block;
  }
 .content  .small{
	font-size: 0.9em;
  }
  #why2 .title-image {
	display: flex;
    align-items: center;
    justify-content: center;
  }
  #why2 .title-image img{
	max-width: 85%;
  }
 #yt_container_placeholder{
	width: 85%;
    margin: 0 auto;
    max-width: 950px;
  }
#live h2{
	text-align: center;
    font-size: 3em;
    border-bottom: 3px solid #8c8070;
    display: inline-block;
    padding: 0;
    margin: 0;
}
#live h2 span{
	font-size: 0.8em;
}
#live .title{
	text-align: center;
	padding-bottom: 10px;
}
#result .content{
	display: flex;
	align-items: center;
}
#result .map{
	width: 30%;
}
#result .vote_block{
	width: 70%;
}
#result .vote_block .top{
	padding: 10px;
}
.vote_row{
	display: flex;
    font-size: 1.5em;
    background: #d3ccc6;
    border-radius: 20px;
    margin-bottom: 2%;
	text-shadow: 0 0 #594f46;
}
.vote_row .name_bar{
	min-width: 50%;
    display: flex;
    align-items: center;
    padding: 0 10px 0 20px;
    font-weight: bold;
    flex-wrap: wrap;
	min-height: 3vw;
}
.vote_row .bar{
	width: 50%;
	font-size: 0.8em;
	position: relative;
}
.vote_row .progress-container{
	margin-top: 0;
	background: #beb4aa;
}
.vote_row .progress-bar{
	color: #fff;
	background-color: #594f46;
}
.vote_row .progress-container .all-number{
	/*color: #594f46;*/
}
.vote_row .progress-container >div{
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-left: 10px;
}
.vote_row .progress-container .agree_vote{
	
	position: absolute;
}
.vote_row .big{
	font-size: 1.3em;
}
.vote_row .small{
	padding: 0.3em 5px;
	font-size: 0.7em;
}
.vote_row .small2{
	font-size: 0.8em;
}
.vote_row .gap{
	color: #bfb4aa;
    font-size: 0.8em;
	padding: 5px;
}
.vote_block .note{
	text-align: right;
    font-weight: bold;
}

.vote_row .elected,.vote_row .no_elected{
	width: 30%;
    position: absolute;
    top: -10%;
    left: 30%;
	z-index: 2;
  }

 /*youtube*/
 .youtube_player {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
  }
  
  .youtube_player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }

  
footer{
	background: #594f46;
	text-align: center;
	color: #fff;
    padding: 2% 1% 1% 1%;
}
footer .top{
	font-weight: bold;
	display: flex;
		justify-content: center;
		gap: 2%;
		flex-wrap: wrap;
		line-height: 2em;
}
footer .bottom{
	padding: 1% 0;
}
footer .bottom img{
	width: 60px;
}
@media screen and (min-width: 951px) and (max-width: 1500px) {
	.content_wrapper {
		padding-top: 100px;
	}

	.header_container .logo,
	.header_container .countdown {
		width: 25%;
	}
	.header_container .countdown {
		font-size: 0.7em;
	}
	header .nav {
		font-size: 1.3em;
	}

	.logo_cts {
		width: 25%;
	}
	#top_cards .bottom >div:nth-child(2),.down-arr {
		width: 50px;
	}
	.countdown {
		font-size: 0.9em;
	}
	#seats {
		width: 80%;
	}
	#seats .legislator-text > div{
		font-size:1.3em;
	}
	#seats .note{
		font-size:1em;
	}
	#who.contain_block .menu .btn{
		font-size: 1.2em;
   		 padding: 5px 10px;
	}
	#who .top{
		font-size: 0.7em;
	}
	#who .header-owl-1 .img_container .name{
		font-size: 2em;
	}
	#who .header-owl-2 .card .img_container{
		width: 50%;
	}
	#who .header-owl-2 .card .info{
		width: 46%;
		font-size: 0.8em;
	}
	#who .header-owl-2 .card .name{
		margin-top: 0;
	}
	#who .header-owl-2 .card .title{
		font-size: 1.6vw;
		line-height: 2.5vw;
	}
	#who .header-owl-2 .card .name{
		font-size: 3.5vw;
	}
	.progress-bar,.progress-container .all-number{
		font-size: 1.3vw;
		line-height: 1.5vw;
	}
	#who .note {		
		top: 20%;
		font-size: 0.85em;
	}
	.vote_row {
		display: block;
	}
	.vote_row .bar{
		margin: 10px auto;
	}
	.vote_row .name_bar{
		justify-content: center;
	}
	.vote_row .progress-bar,.vote_row .progress-container .all-number{
		height: 2.5em;
	}
	.header_container .header_result{
		font-size: 0.9em;
	}
}

@media screen and (max-width: 950px) {
	.content_wrapper,.contain_block{
		padding-top: 80px;
	}
	.content_wrapper {
		padding-top: 80px;
	}

    .nav nav ul {
        display: none;
    flex-direction: column;
    background-color: #f2f2f2;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 10px 0;
    border: 1px solid #ccc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    z-index: 99;
    }

    .nav nav ul.show {
        transform: scaleY(1);
        visibility: visible;
        opacity: 1;
		display: flex;
    }

    .nav nav ul li {
        text-align: center;
        padding: 10px 20px;
    }

    .nav nav ul li .gap {
        display: none;
    }

    .hamburger {
        display: block;
    }


	.header_container .logo,
	.header_container .countdown {
		width: 50%;
	}

	header .nav {
		width: 0;
	}

	header .nav nav ul {
		display: none;
	}

	.logo_cts {
		width: 40%;
	}


	.header-owl-1 .item {
		padding-top: 5px;
	}

	.maxContent {
		padding: 0 6px;
	}

	.countdown {
		font-size: 0.6em;
	}
	#top_cards .bottom >div:nth-child(2),.down-arr {
		width: 50px;
	}
	#seats .legislator-text > div {
		font-size: 1.3em;
	}
	.contain_block .menu .btn{
		font-size: 1.3em;
		gap: 10px;
	}
	#seats .note {
		position: relative;
		right: 0;
		text-align: center;
		padding: 10px 0;
		font-size:0.85em;
	}
	#who .top{
		font-size: 0.75em;
	}
	#who .header-owl-1 .img_container .name{
		font-size: 1.8em;
	}
	.desktop-visible{
		display: none;
		visibility: hidden;
		width: 0;
		height: 0;
	}
	.mobile-visible{
		display: block;
		visibility:visible;
		width: auto;
		height: auto;
	}
	.menu-m{
		text-align: center;
		padding: 0 0 5% 0;
	}
	.menu-m select{
		padding: 1%;
    width: 150px;
    text-align: center;
    border: 1px solid #594f46;
    border-radius: 5px;
    font-size: 1em;
	}
	#result {
		padding-top: 30px;
	}
	#who .header-owl-2 .card .img_container{
		width: 50%;
	}
	#who .header-owl-2 .card .info{
		width: 46%;
		font-size: 0.8em;
	}
	#who .header-owl-2 .card .name{
		margin-top: 0;
	}
	#who .header-owl-2 .card .title{
		font-size: 2vw;
		line-height: 2.5vw;
	}
	#who .header-owl-2 .card .name{
		font-size: 3.5vw;
		line-height: 3.5vw;
	}
	.progress-bar,.progress-container .all-number{
		font-size: 1.5vw;
        line-height: 2vw;
	}
	#who .note {		
		top: 5%;
		font-size: 0.75em;
	}
	.talk-left::before{
		left: -10px;
    	top: 25%;
		border-width: 10px 15px 10px 0;
	}
	.talk-right::before{
		right: -10px;
		top: 25%;
		border-width: 10px 0 10px 15px;
	}
	.talk{
		font-size: 1.9vw;
	}
	.talk .tag {
		font-size: 1.5vw;
	}
	.bottom-info-bottom  {
		font-size: 0.9em;
	}
	.news_block .title {
		font-size: 2.5em;
	}
	.news-slide{
		font-size: 0.9em;
	}

	.why-section.right .block,.why-section.left .block {
		width: 100%;
	}

	
	.why-section.left .title-image {
		right:  -16%;
	}
	.why-section.right .title-image {
		left: 0;
        right: -16%;
	}
	.why-section.left .content {
		margin-top: 16%;
		margin-right: 0;
	}
	.why-section.right .content {
		margin-top: 16%;
		margin-left: 0;
	}
	#live h2{
		font-size: 5vw;
	}
	.vote_row {
		display: block;
	}
	.vote_row .bar{
		margin: 10px auto;
	}
	.vote_row .name_bar{
		justify-content: center;
	}
	.vote_row .progress-bar,.vote_row .progress-container .all-number{
		height: 2.5em;
	}
	.vote_row .name_bar{
		font-size: 0.9em;
	}
	.vote_row .elected ,.vote_row .no_elected {
		width: 20%;
		top: -90%;
        left: 120%;
	}
	#scene{
		max-width: 100vw;
		overflow-x: hidden;
		padding-bottom: 7vh;
	}
}

@media screen and (max-width: 650px) {
	.content_wrapper,.contain_block{
		padding-top: 65px;
	}
	.header-owl-1 .title {
		font-size: 1em;
	}
    #result {
        padding-top: 0;
    }

	.header-owl-1 .img_container .name {
		border-radius: 0 0 10px 10px;
		font-size: 1.3em;
		padding: 1% 6%;
	}
	.owl-nav button img {
		width: 55%;
	}
	.countdown {
		font-size: 0.8em;
	}
	#top_cards .center{
		position: absolute;
		bottom: 0;
		left: 50%;
	}
	#top_cards .bottom{
		display: block;
		padding: 5% 1% 50px 1%;
		position: relative;
	}
	#top_cards .bottom >div {
		width: 80%;
		margin: 0 auto;
	}
	.event_logo{
		width: 70%;
    margin: 5% auto 10% auto;
	}
	.contain_block .menu .btn{
		font-size: 1em;
	}
	#top_cards{
		/*min-height: 100vh;*/
	}
	.header_container .countdown{
		display: none !important;
	}
	.header_container .event_logo{
		margin:0;
	}
	#seats{
		padding-top: 100px;
	}
	#seats .legislator-text > div{
        font-size: 0.9em;
		gap: 10px;
    }
	#who .note2 {
		font-size: 1em;
	}
	#who .top{
		font-size: 1em;
	}
	#who .header-owl-2 {
		margin-top: 0;
	}
	#who .header-owl-1 .img_container .name{
		font-size: 1.9em;
	}
	.header-owl-1 .img_container .name{
		border-radius: 0 0 10px 10px;
	}
	#who .top{
		font-size: 1em;
	}
	#who .header-owl-1 .img_container .name{
		font-size: 1.3em;
	}
	
	#who .bottom .owl-nav {
		left: 8%;
		right: 8%;
		top: 50%;
	}
	#who .header-owl-2 .card .img_container{
		width: 40%;
	}
	#who .header-owl-2 .card .info{
		width: 56%;
		font-size: 0.8em;
	}
	#who .header-owl-2 .card .layer{
		height: 77%;
	}
	#who .header-owl-2 .card .title{
		font-size: 2.5vw;
		line-height: 4vw;
		margin-bottom: 5px;
	}
	#who .header-owl-2 .card .name{
		font-size: 4.5vw;
		line-height: 5vw;
	}
	
	.progress-bar,.progress-container .all-number{
		font-size: 2vw;
		line-height: 2.5vw;
	}
	#who .note {	
		top: -10px;
		right: 10%;
		font-size: 0.5em;
	}

	.bottom-info-top {
		align-items: center;
		gap: 10px;
	  }
	  .talk{
		font-size: 2.8vw;
	}
	.talk .tag {
		font-size: 1.8vw;
	}
	.talk a{
		display: block;
	}
	#who .bottom-info{
		padding-bottom: 10%;
	}
	.bottom-info-bottom  {
		font-size: 0.6em;		
	}
	.bottom-info-bottom .right, .bottom-info-bottom .left{
		width: 10%;
		background-size: 50% 100%;
	}
	.bottom-info-bottom .center {
		width: 80%;
		font-size: 1.2em;
	}
	.news_block .title {
        font-size: 2rem;
    }
	.news_list .item .title {
		font-size: 1.1em;
	}
	.news_list p{
		font-size: 0.9em;
	}
	.news_list p.line-3 {
		-webkit-line-clamp: 2 !important;
	}
	.news-slide .owl-nav {
		left: -5% !important;
		right: -5% !important;
	}
	.bottom-info-bottom .title{
		line-height: 1.5em;
	}
	.why-section{
		padding: 150px 20px 20vh 20px;
	}
	.why-section .content .row{
		display: flex;
	}
	.why-section .content .row > div:first-child,.why-section .content .row > div:last-child {
		min-width: auto;
		width: 50%;
	}
	.why-section .content_div{
		padding: 10px;
	}
	.why-section .content{
		font-size: 1em;
	}
	.in_div_show > div > div {
		border-radius: 10px;
		padding: 10px;
		color: #fff;
		font-weight: bold;
		font-size: 0.85em;
	}
	.why-section.center1 .content
 {
    margin-top: 25%;
}
#result .content {
    display: block;
	}
	#result .map{
		margin: 0 auto;
	}
	#result .vote_block{
		width: 100%;
	}

	.vote_row .name_bar {
        font-size: 0.75em;
    }
	.vote_row{
		margin-bottom: 20px;
	}
	.vote_row .bar {
		width: 70%;
		font-size: 1em;
	}
	
	.vote_row .elected,.vote_row .no_elected {
		width: 20%;
		top: -150%;
		left: 100%;
	}
}