@import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);

		
		[v-cloak] {
			display: none;
		}

/* ============ 기본 테마 변경 */
		body {
			height: 100%;
		}

		.ui.segment { 
			background: none;  
			z-index: 1;
		}
		
		.ui.cards > .card {   
			background-color: #fff;  
			text-align: center;
		}   

		.ui.large.label {
			background-color: #fc3a44;
			color: #fff;
			font-weight: 400;
		} 
		

/* ============ 타이틀*/
		#main { 
			height: 650px;
			padding-top: 100px;  
			text-align: center; 
			background-image: url("http://img.sbs.co.kr/newimg/news/20170728/201076097.jpg");
			background-size: cover; 
			background-position: center;
			 background-attachment: fixed;
			background-repeat: no-repeat;  
		} 
		/* 국회 로고 */
		#svgBox { 
			margin: 0 auto;
			width: 100px;
			height: 55px;
		}

		#svgtest {
			width: 100px;
			height: 55px;
		}

		.st0{ fill: #4C5056;} 
		.st2 {stroke: none; fill: #222;}
		
		/* 숫자 */
		.mainTitle { 
			font-family: 'KoPub Batang', serif;
			font-size: 1.6em;
			font-weight: 500; 
			color: #9DA5B2; 
			letter-spacing: 0.1em;
			line-height: 2.2em;
		}
		
		.counter { 
			font-family: 'KoPub Batang', serif;
			font-size: 15em;
			color: #44daff;   
			margin: 0;
			line-height: 1em;
		}

/* ============ 인물 박스 */
		#containers {
			margin: 5% 0%;
		}
 		
 		/* 옵션 선택 */
		.btnbox {
			width: 90%;
			margin-left: 1em; 
			margin-bottom: 20px; 
		}

		.mobilebtn {
			display: none;
		} 

		.explain {
			font-size: 1em;
			color: #aaa;
			margin: 0 ;
			line-height: 2em;
		}

		/*  인물 아이콘  */
 		
		.testbox { 
			text-align: center; 
			float: left;
		}

		.manpic {
			width: 85px;
			height: 85px;
			margin: 1.5em 1rem 0.5em;
			border: 4px solid rgba(255,255,255,0.1);
			border-radius: 50%;
			text-align: center;
		}
		
		.manpic:hover {
			border: 4px solid #ccc;
			border-radius: 50%;
		}
		
		.jobText {
			font-size: 0.9em;
			font-weight: 300;
			color: #999;
		}

		.nameText {  
			font-size: 1.1em;
			font-weight: 700;
			color: #333;
		}
	
		/* 팝업 */

		.modalmask {  
			position: fixed;
			z-index: 2000;
			top: 0;
			left: 0;
			width: 100%; 
			height: 100%;
			background-color: rgba(0,0,0,0.6);  
			overflow-y: auto; 
		}

		.modalbox {
			position: absolute;
			top: 10%;
			left: 20%;
			width: 60%;
			padding: 5%;
			margin-bottom: 10%;
			background-color: #fff;
			text-align: left;
		}

		.cardTitle {
			font-family: 'KoPub Batang', serif;
			letter-spacing: 2px;
			font-size: 3em;
			font-weight: 400;
			color: #222;
		} 
		
		.tablebox {
			width: 90%;
			height: 100px;
			padding: 5%;
			background-color: #efefef;
		}
		 

		.closebtn {
			width: 3%; 
			height: 3%; 
			position: absolute; 
			top: 10%; 
			left: 91%;
			cursor: pointer;
		}
 
		#minibox {   
			float: left;
			margin-top: 1em;
		}

@media screen and (max-width: 639px) {
 		
/* ============ 기본 테마 변경  */
 		.ui.button {
 			font-size: 0.6rem;
 		}
		
		.ui.selection.dropdown {
			min-width: 11.5em;
			max-width: 12em;
		}

		.ui.checkbox {
			display: block;
		}


 		.explain {
 			font-size: 0.9em;
 		}

 		.ui.items > .item > .image > img {
			margin: 0 auto;
		}

 /* ============ 타이틀*/
		 #main {  
		 	background-image: url("http://img.sbs.co.kr/newimg/news/20170728/201076100.jpg");
			height: 280px;
			padding-top: 25px;  
			background-size: contain;
			background-position: top;
			 background-attachment: fixed;
			background-repeat: no-repeat;   
		 }

		#svgBox { 
			margin: 0 auto;
			width: 60px;
			height: 33px;
		}

		#svgtest {
			width: 40px;
			height: 30px;
		}
		
		.mainTitle {
			font-size: 0.9em; 
			letter-spacing: 0px;
		} 
		
		.counter {  
			font-size:  5em; 
			margin: 0;
			margin-bottom: 5px;
			line-height: 0.9;
		}

		#minibox {
			 width: 95% !important;
			margin: 0 auto;
		}
 	
 /* ============ 인물 박스 */
		
		.testbox {
			width: 25%; 
			height: 140px;
			text-align: center; 
			float: left;
		}
 		
 		.ui.image {
 			margin: 0 auto;
 		}

		.jobText {
			font-size: 0.8em;
		}
		
 		 
		.btnbox {
			width: 96%;
			margin-left: 0.5em;
			margin-bottom: 15px; 
		}
		
		
		.mobilebtn {
			display: block;
			width: 95%;
			height: 40px;
			padding-top: 2%;
			border: 1px solid #ccc; 
		}

		.mobilebtn p {
			font-size: 1em;
			text-align: center;
			font-weight: 500;
			color: #555;
		}

		
		.checkwrap { 
			width: 100%;
			height: auto;
		}

		.manpic {
			width: 70px;
			height: 70px;
			margin: 1.2em 0.4rem 0.5em;
			border: 4px solid rgba(255,255,255,0.1);
			border-radius: 50%;
		}
 
		.modalbox {
			position: absolute;
			top: 5%;
			left: 2%;
			width: 96%;
			padding: 5% 2%;
			margin-bottom: 10%;
			background-color: #fff;
		} 

		.cardTitle {
			font-size: 2.5em;
			font-weight: 600;
			color: #222;
			text-align: center;
		}

		.closebtn {
			width: 10%; 
			height: 10%; 
			position: absolute; 
			top: 3%; 
			left: 85%;
		}
			 
}