[v-cloak] { display: none;}
	#myApp{ position: relative;}
	#myApp .description{ clear: both; background-color: #eee; border: 1px solid #ddd; margin: 20px; padding: 20px;}
	#myApp .description li{ list-style-type: disc;  margin-left: 15px;}
	#myApp .description li + li{ margin-top: 15px;} 
	/* 圖表-條圖===================== */
	#myApp .chart_bar{ clear: both; display: flex; flex-wrap: wrap; justify-content: center; align-content: space-around; margin: 15px 15px 20px 15px;}
	#myApp .chart_bar .box{ width: 50%; display: flex;}
	#myApp .chart_bar .box .pic{ width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; overflow: hidden;}
	#myApp .chart_bar .box .pic img{ width: 100%; height: 100%; object-fit: cover;}
	#myApp .chart_bar .box .txt{ display: flex; flex-direction: column; justify-content: center;}
	#myApp .chart_bar .box .txt > span{ display: block; width: 100%; font-size: 35px; font-weight: 900; font-weight: 900;}
	#myApp .chart_bar .box .txt > em{ display: block; width: 100%; font-size: 12px; font-weight: 700; font-style: normal; margin-top: -5px;}

	#myApp .chart_bar .box:nth-child(1) .pic{ margin-right: 5px;}
	#myApp .chart_bar .box:nth-child(1) .txt > span{ color: #cc3d3d;}
	#myApp .chart_bar .box:nth-child(2){ justify-content: flex-end;}
	#myApp .chart_bar .box:nth-child(2) .pic{ order: 2; margin-left: 5px;}
	#myApp .chart_bar .box:nth-child(2) .txt{ order: 1;}
	#myApp .chart_bar .box:nth-child(2) .txt > span{ color: #1a80c4; text-align: right;}
	#myApp .chart_bar .box:nth-child(2) .txt > em{ text-align: right;}

	#myApp .chart_bar .bar{ width: 100%; margin-top: 10px;}
	#myApp .chart_bar .bar .inner{ display: flex; justify-content: space-between; background-color: #eee;}
	#myApp .chart_bar .bar .inner > span{ display: block; width: 50%; height: 20px; min-width: 1px;}
	#myApp .chart_bar .bar .inner > span:nth-child(1){ background-color: #cc3d3d;}
	#myApp .chart_bar .bar .inner > span:nth-child(2){ background-color: #1a80c4;}
	#myApp .chart_bar .bar p{ width: 100%; text-align: center; font-weight: 500;}


	/* 圖表-地圖===================== */
	/* .chart_map svg{ max-width: 800px;} */
	#myApp .chart_map{ clear: both; margin-bottom: 15px; display: none;}
	#myApp .chart_map .chart svg *{ cursor: pointer;}
	#myApp .chart_map .chart path{ fill: #888; fill: #eee; stroke: white; transition: 0.3s;}	
	#myApp .chart_map .chart path[id^="path66"],
	#myApp .chart_map .chart path[id^="path94"],
	#myApp .chart_map .chart path[id^="path95"],
	#myApp .chart_map .chart path[id^="path96"],
	#myApp .chart_map .chart path[id^="path97"],
	#myApp .chart_map .chart path[id^="path98"]{ stroke: #333; stroke-width: 1; pointer-events: none;}
	#myApp .chart_map .chart g{ pointer-events: none;}
	#myApp .chart_map .chart g[id="DC"]{ pointer-events: unset;} /*華盛頓特區*/	
	#myApp .chart_map .chart svg text{ font-family: "Noto Sans TC", "Roboto", sans-serif, Arial;}
	#myApp .tooltip{ display: block; background: #fff; width: 120px; font-size: 12px; line-height: 1.3; color: #333; border-radius: 3px; box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.3); pointer-events: none; padding: 10px; position: absolute; left: 50%; top: 300px; z-index: 99; transition: 0.5s;}
	#myApp .chart_map .tooltip h5{ font-size: 14px; font-weight: 700;}
	#myApp .chart_map .tooltip p{ display: flex; padding: 5px 0px;}
	#myApp .chart_map .tooltip span{ display: block; width: 60px; text-align: right;}
	#myApp .chart_map .tooltip p + p{ border-top: 1px solid #ccc;}
	/* 手機不顯示文字 */
	#myApp .chart_map .chart path[id^="path66"],
	#myApp .chart_map .chart path[id^="path94"],
	#myApp .chart_map .chart path[id^="path95"],
	#myApp .chart_map .chart path[id^="path96"],
	#myApp .chart_map .chart path[id^="path97"],
	#myApp .chart_map .chart path[id^="path98"],
	#myApp .chart_map .chart svg text{ display: none;}


	#myApp .col-2{ clear: both;}
	/* 表格===================== */
	#myApp .col-2 .table_box{ clear: both; padding: 15px;}
	#myApp .col-2 .table_box table{ width: 100%; border-collapse: collapse; border: 1px solid #aaa;}
	#myApp .col-2 .table_box table + table{ margin-top: 30px;}
	#myApp .col-2 .table_box table th{ padding: 3px;}
	#myApp .col-2 .table_box table tr:nth-child(1) th{ background-color: #333; color: #eee; font-size: 16px; font-weight: 500; text-align: center;}
	#myApp .col-2 .table_box table tr:nth-child(2) th{ background-color: #aaa; color: #333; font-size: 12px; font-weight: 400; text-align: center;}
	#myApp .col-2 .table_box table td{ padding: 3px 0px; position: relative;}
	#myApp .col-2 .table_box table tr > td:nth-child(1){ text-align: center;}
	#myApp .col-2 .table_box table tr > td:nth-child(2){ text-align: center;}
	#myApp .col-2 .table_box table tr > td:nth-child(3){ text-align: right; padding-right: 20px;}
	#myApp .col-2 .table_box table tr > td:nth-child(2):before{ content:"✓"; display: inline-block; width: 20px; height: 20px; text-align: center; display: none;}
	#myApp .col-2 .table_box table tr + tr { border-top: 1px solid #aaa;}
	/* 共和黨 */
	#myApp .col-2 .table_box table tr.color_1{ vertical-align: middle; }
	#myApp .col-2 .table_box table tr.color_1 td{ background-color: #cc3d3d; color: #fff;}
	#myApp .col-2 .table_box table tr.color_1 > td:nth-child(2)::before{ display: inline-block;}
	/* 民主黨 */
	#myApp .col-2 .table_box table tr.color_2{}
	#myApp .col-2 .table_box table tr.color_2 td{ background-color: #1a80c4; color: #fff;}
	#myApp .col-2 .table_box table tr.color_2 > td:nth-child(2)::before{ display: inline-block;}
	/* 區域計票制 */
    #myApp .col-2 .table_box table tr.style_1{ background-color:  gold;}
	#myApp .col-2 .table_box table tr.style_1 td{ font-size: 11px; padding: 0px; position: relative;}
	#myApp .col-2 .table_box table tr.style_1 td a{ color: #1a80c4; text-decoration: underline;}
	/*  twitter*/
	#myApp .col-2 .side{}
	#myApp .col-2 .side .table_box{}
	#myApp .col-2 .side .twitter_box{ background-color: #1da1f2; padding: 15px; margin: 15px 15px 30px 15px;}
	#myApp .col-2 .side .twitter_box .title{ height: 50px; line-height: 50px; background: url(logo_twitter.png) no-repeat; background-size: auto 100%; padding-left: 50px; font-size: 25px; font-weight: 500; color: #fff;  }
	#myApp .col-2 .side .twitter_box .twitter-timeline{}

	/* 手機 - 橫放 */
	@media only screen and (max-width:900px) and (orientation: landscape){	
		#myApp .col-2{ margin: 30px 20px 20px 20px;}
		#myApp .col-2 .table_box{ padding: 0;}
		#myApp .col-2 .table_box table{ float: left; width: calc((100% - 15px) / 2);}
		#myApp .col-2 .table_box table + table{ margin-top: 0px; margin-left: 15px; margin-bottom: 15px;}
		#myApp .col-2 .table_box table:nth-child(2n+1){ margin-left: 0px;}		
		#myApp .col-2 .side .twitter_box{ float: left; width: calc((100% - 15px) / 2); margin: 0;}
		#myApp .col-2 .side .twitter_box + .twitter_box{ margin-top: 0px; margin-left: 15px; margin-bottom: 15px;}
	}

	/*320px 修小手機*/
	@media only screen and (max-width:320px){
		#myApp .chart_bar .box .pic{ width: 60px; height: 60px;}
		#myApp .chart_bar .box .txt > span{ font-size: 35px;}
		#myApp .chart_bar .box .txt > em{ font-size: 10px; transform: scale(0.9); transform-origin: center left;}
		#myApp .chart_bar .box:nth-child(2) .txt > em{ font-size: 10px; transform: scale(0.9); transform-origin: center right;}
	}

	/*pad ============================*/
	@media only screen and (min-width:768px) and (orientation: portrait){
		#myApp .chart_bar{ margin: 30px 35px 20px 35px;}
		#myApp .chart_bar .box:nth-child(1) .pic{ margin-right: 10px;}
		#myApp .chart_bar .box:nth-child(2) .pic{ margin-left: 10px;}
		#myApp .chart_bar .box .pic{ width: 100px; height: 100px;}
		#myApp .chart_bar .box .txt > span{ font-size: 50px;}
		#myApp .chart_bar .box .txt > em{ font-size: 22px; margin-top: -5px;}

		#myApp .chart_map{ display: block; margin: 0px 15px;} 
		#myApp .chart_map .chart path[id^="path66"],
		#myApp .chart_map .chart path[id^="path94"],
		#myApp .chart_map .chart path[id^="path95"],
		#myApp .chart_map .chart path[id^="path96"],
		#myApp .chart_map .chart path[id^="path97"],
		#myApp .chart_map .chart path[id^="path98"],
		#myApp .chart_map .chart svg text{ display: block;}
		#myApp .chart_map .chart path:hover{ stroke: #333; stroke-width: 2;}
		#myApp .chart_map .chart g[id="DC"]:hover circle{ fill: goldenrod;}

		#myApp .col-2{ margin: 30px 20px 20px 20px;}
		#myApp .col-2 .table_box{ width: calc(100% - 250px); float: left; padding: 0;}
		#myApp .col-2 .table_box table{ float: left; width: calc((100% - 30px) / 2);}
		#myApp .col-2 .table_box table + table{ margin-top: 0px; margin-left: 15px; margin-bottom: 15px;}
		#myApp .col-2 .table_box table:nth-child(2n+1){ margin-left: 0px;}		

		#myApp .col-2 .side{ float: right; width: 250px; height: 100vh; position: sticky; top: 60px;}
		#myApp .col-2 .side .twitter_box{ margin: 0px 0px 20px 0px;}
	}

	@media only screen and (min-width:900px) and (orientation: landscape){
		#myApp .chart_bar{ margin: 30px 35px 20px 35px;}
		#myApp .chart_bar .box:nth-child(1) .pic{ margin-right: 10px;}
		#myApp .chart_bar .box:nth-child(2) .pic{ margin-left: 10px;}
		#myApp .chart_bar .box .pic{ width: 100px; height: 100px;}
		#myApp .chart_bar .box .txt > span{ font-size: 50px;}
		#myApp .chart_bar .box .txt > em{ font-size: 22px; margin-top: -5px;}

		#myApp .chart_map{ display: block; margin: 0px 15px;} 
		#myApp .chart_map .chart path[id^="path66"],
		#myApp .chart_map .chart path[id^="path94"],
		#myApp .chart_map .chart path[id^="path95"],
		#myApp .chart_map .chart path[id^="path96"],
		#myApp .chart_map .chart path[id^="path97"],
		#myApp .chart_map .chart path[id^="path98"],
		#myApp .chart_map .chart svg text{ display: block;}
		#myApp .chart_map .chart path:hover{ stroke: #333; stroke-width: 2;}
		#myApp .chart_map .chart g[id="DC"]:hover circle{ fill: goldenrod;}

		#myApp .col-2{ margin: 30px 20px 20px 20px;}
		#myApp .col-2 .table_box{ width: calc(100% - 250px); float: left; padding: 0;}
		#myApp .col-2 .table_box table{ float: left; width: calc((100% - 30px) / 2);}
		#myApp .col-2 .table_box table + table{ margin-top: 0px; margin-left: 15px; margin-bottom: 15px;}
		#myApp .col-2 .table_box table:nth-child(2n+1){ margin-left: 0px;}		

		#myApp .col-2 .side{ float: right; width: 250px; height: 100vh; position: sticky; top: 60px;}
		#myApp .col-2 .side .twitter_box{ margin: 0px 0px 20px 0px;}
	}

	/*desktop ========================*/
	@media only screen and (min-width:1000px){	
		#myApp .description{ margin: 20px 35px;}
		#myApp .chart_bar .box .pic{ width: 150px; height: 150px;}
		#myApp .chart_bar .box .txt > span{ font-size: 70px;}
		#myApp .chart_bar .box .txt > em{ font-size: 22px; margin-top: -15px;}		
		#myApp .chart_map{ margin: 0px 35px;} 
		#myApp .chart_map .tooltip{ width: 180px; font-size: 14px;}
		#myApp .chart_map .tooltip h5{ font-size: 18px;}
		#myApp .chart_map .tooltip span{ width: 110px;}
		#myApp .col-2{ margin: 30px 35px 20px 35px;}
		#myApp .col-2 .table_box{ width: calc(100% - 300px);}		
		#myApp .col-2 .side{ width: 300px;}
	}

	#myApp .overlap{ width: 100vw; height: 100%; position: fixed; left: 0; top: 0; z-index: 100; background-color: #333;}
	#myApp .overlap span:before,
	#myApp .overlap span:after,
	#myApp .overlap span{ display: block; width: 15px; height: 15px; border-radius: 50%; animation: load7 1.8s infinite ease-in-out both;}
	#myApp .overlap span{ position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);  animation-delay: -0.16s;}
	#myApp .overlap span::before{ content: ''; position: absolute; left: -30px; top: 0px; animation-delay: -0.32s;}
	#myApp .overlap span::after{ content: ''; position: absolute; left: 30px; top: 0px;}
	@keyframes load7{
		0%,
		80%,
		100%{ box-shadow: 0 2.5em 0 -1.3em #fff;}
		40%{ box-shadow: 0 2.5em 0 0 #fff;}
	}