@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');

		[v-cloak] {
			display: none;
		}

		body {
			background-image: url("http://img.sbs.co.kr/newimg/news/20170724/201073892.jpg");
			background-size: cover;
			color: #fff;
		}

		#main {
			height: 50px;
			margin: 20px 0px;
		}

		.title {
			font-size: 2.2em;
			font-weight: 700;
		}
 		
 		.ui.segment {
 			background:  none;
 		}

 		.ui.segment:first-child {
 			text-align: center;
 		}
		
		.ui.checkbox {
			margin: 10px 20px;
		}

		.ui.checkbox label {
			color: #fff;
		}
		
		.mobilemsg {
			display: none;
		}
		#chart {
			width: auto;
			margin:0 auto;
		}

		#chart svg {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
  
		svg text {
			font-weight: 500;
			font-size: 0.8em;
			fill: #fff; 
		}

		.card {
			width: 23%;
			height: auto;
			margin: 10px 0px;
			padding: 10px 1%;
			position: absolute;
			top:0;  
			background-color: rgba(0,0,0,0.7);
		}

		.whois { 
			font-size: 1.4em;
			font-weight: 600;
			color: #fff;
		} 
		.explain {
			margin: 0;
			font-size: 1em;
			font-weight: 400;
			color: #ccc;
		}

		.cardhead {
			margin:0;
			font-size: 1.1em;
			font-weight: 500;
			color: #fff;
		}

		@media screen and (max-width: 639px) {
			
			body {
				background-image: url("http://img.sbs.co.kr/newimg/news/20170724/201073948.jpg");
				background-position: center;
				background-size: cover;
				color: #fff;
			}

			.title {
				font-size: 1.4em;			
			}
			
			#main {
				margin: 10px 0px;
			}

			.ui.segment {
				padding: 0.5em 1em;
			}
			.ui.checkbox {
				margin: 5px 2px;
			} 
			
			.mobilemsg {
				display: block;
			}
			.desktopmsg {
				display: none;
			}

			#canvas {
				min-height: 80vh;
			}
			.card {
				width: 100%;
				height: auto;
				margin: 0px 0px;
				position: relative;
				background-color: rgba(0,0,0,0.7);
			}

			.explain {
			margin: 0;
			font-size: 0.8em;
			font-weight: 400;
			color: #ccc;
			}


			svg text {
				font-size: 0.5em;
			}
		}