@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
	body {
			font-family: 'Noto Sans', sans-serif;
			font-style: normal;
			background-image: url("back3.jpg");
			background-size: cover;
			margin:0;
	}

	/* 템플릿 */
	#menubar {
	        width:100%;
	        height:50px;
	        background-color:#ddcfba;
	        margin-bottom:20px;
	    }

	    #menubar a {
	        text-decoration: none;
	    }

	    #teamname {
	        font-size::18px;
	        color:#938c80;
	        margin:15px 0px 0px 10px;
	        float:left;
	        font-weight: bold;
	    }

	    #credit {
	        font-size:12px;
	        color:#333333;
	        text-align: center;
	    }

	/* 제목 */

	.bigtitle {
			display: block;
			margin:0 auto;
		}
	
	/* 인터랙티브 틀 */
	/* =============== 계산 전 =================*/
		/* 전체 div */
	#canvas {
			width:660px;
			padding:20px 30px;
			height:880px;
			margin:0 auto;
	}
		/* 국가 체크*/
		input[type="radio"] {
			display: none;
		}

		input[type="radio"] + label span {
			display: inline-block;
  			vertical-align: middle;
			width:86px;
			height:30px;
			margin:4px 10px;
			padding-top:10px;
			background-color:#2D333F;
			color:#ffffff;
			font-size:16px;
			text-align: center;
		}

		input[type="radio"]:checked + label span {
			background-color:#e03f3f;
			color:#ffffff;
		}

		/* 품목  체크 */
		input[type="checkbox"] {
			display: none;
		}
		input[type="checkbox"]+ label  span{
			display: inline-block;
  			vertical-align: middle;
			width:146px;
			height:146px;
			border:2px solid #cccccc;
			margin:5px;
			background-size: cover;
		}

		input[type="checkbox"]:checked + label  span{
			width:140px;
			height:140px;
		    	border: 5px solid #ff4343;
		}
		
		/* 설명 텍스트 */
		.explain {
			font-size:20px;
			font-weight: bold;
			color:#555555;
			margin: 5px;
		}

		.explain2 {
			font-size:0.7em;
			font-weight: bold;
			color:#555555;
			margin: 5px;
			text-align: center;
		}
		
		/* 영역 나누기 */
		.container {
			margin-bottom: 30px;
		}
		
		/* 계산하기 버튼 */
		#getCheckedAll {
			width:400px;
			height:50px;
			background-color:#e03f3f;
			margin: 10px auto;
			padding:10px 0px;
			text-align:center;
		}


	/* =============== 계산 후 =================*/
		/* 전체 div */
		#canvas2 {
			width:660px;
			padding:20px 30px;
			height:450px;
			margin:10px auto;
			background-color: #f2f0e7;
			display: none;
		}
		/* 제목 */
		.bill {
			font-size:30px;
			font-weight: bold;
			color:#444444;
			text-align: center;
		}

		/* 설명 텍스트 */
		.moneytext {
			font-size: 18px;
			color:#444444;
			margin:10px;
		}

		/* 임금 / 장바구니 금액 */
		.moneytext2 {
			font-size:22px;
			color:#222222;
			font-weight: bold;
		}
		
		/* 최종 판별 문구 */
		#final {
			font-size:36px;
			font-weight: bold;
			color:#e03f3f;
			text-align: center;
		}
		
		/* 국가별 구매여부 판별 영역 */
		.smallbox {
			width:110px;
			height:110px;
			float: left;
			text-align: center;
		}

		/* 국가별 구매여부 판별 텍스트 */
		.moneytext3 {
			font-size: 30px;
			font-weight: bold;
			margin:10px;
		}

		/* 다시하기 버튼 */
		#reload {
			width:400px;
			height:50px;
			background-color:#e03f3f;
			margin: 0px auto;
			padding:10px 0px;
			text-align:center;
			display: none;
		}
		
		.buttonText {
			font-size: 20px;
			font-weight: bold;
			margin:10px;
			color:#ffffff;
		}
/* ============================================== 모바일 */

@media screen and (max-width: 639px) {
	body {		
			background-image: url("back4.jpg");
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
	}

	/* 템플릿 */
	#menubar {
	        width:100%;
	        height:50px;
	        margin-bottom:10px;
	    }

	    #menubar a {
	        text-decoration: none;
	    }

	    #teamname {
	        font-size:0.9em;
	        margin:15px 0px 0px 5px;
	        float:left;
	    }
		

	    #credit {
	        font-size:0.6em;
	        text-align: center;
	        
	    }
	
	/* 제목 */

	.bigtitle {
			width:90%;
		}
	
	/* 인터랙티브 틀 */
	/* =============== 계산 전 =================*/
		/* 전체 div */
	#canvas {
			width:90%;
			padding: 5px;
			height:850px;
			margin:0 auto;
	}

	/* 국가 체크*/
		input[type="radio"] + label span {
			width:13%;
			height:30px;
			margin:5px auto;
			padding-top:5px;
			font-size:0.9em;
		}

		/* 품목  체크 */
		input[type="checkbox"]+ label  span{
			width:100px;
			height:100px;
			border:5px solid #ffffff;
			margin:5px 3px;
			background-size: cover;
		}

		input[type="checkbox"]:checked + label  span{
		    	border: 5px solid #ff4343;
		}
		
	/* 설명 텍스트 */
		.explain {
			font-size:1em;
			margin: 2px;
		}
		
		/* 영역 나누기 */
		.container {
			margin: 10px auto;
		}
		
		/* 계산하기 버튼 */
		#getCheckedAll {
			width:100%;
			height:45px;
			margin: 5px auto;
			padding:5px 0px;
		}

/* =============== 계산 후 =================*/
		/* 전체 div */
		#canvas2 {
			width:90%;
			padding: 10px;
			height:460px;
			margin:20px auto;
		}
		/* 제목 */
		.bill {
			font-size:2em;
			margin: 20px 0px;
		}

		/* 설명 텍스트 */
		.moneytext {
			font-size: 1em;
			margin:5px;
		}

		/* 임금 / 장바구니 금액 */
		.moneytext2 {
			font-size:1.5em;
		}
		
		/* 최종 판별 문구 */
		#final {
			font-size:2em;
			margin:20px;
		}
		
		/* 국가별 구매여부 판별 영역 */
		.smallbox {
			width:70px;
			height:70px;
			margin: 10px;
		}

		/* 국가별 구매여부 판별 텍스트 */
		.moneytext3 {
			font-size: 1.5em;
			font-weight: bold;
			margin:10px;
		}

		/* 다시하기 버튼 */
		#reload {
			width:90%;
			height:50px;
			margin: 10px auto;
			padding:5px 0px;
		}
		
		.buttonText {
			font-size: 1.2em;
		}


} /* 끝 */