* { margin: 0; padding: 0; list-style: none; font-family: "맑은 고딕", "Malgun Gothic"; }
.kcal_wrap { overflow: visible; width: 100%; padding: 30px 0; background: #f5f5f5; margin: 0 auto; text-align: center; letter-spacing: -0.04em; }
.kcal_wrap .tit { width: 312px; padding: 80px 0 0 0; margin: 0 auto 20px; color: #df573e; font-size: 24px; font-weight: bold; background: url(http://img.dongascience.com/interactive/calorie/images/icon_common.png) 50% -312px no-repeat; text-align:center; }
.kcal_wrap .tit .desc { padding-top: 6px; color: #777; font-size: 16px; font-weight:normal; }
.kcal_wrap ul { overflow: hidden; width:312px; margin:0 auto; }
.kcal_wrap ul li { overflow: hidden; position: relative; float: left; width: 150px; height: 155px; margin: 0 3px 10px; border-radius: 10px; text-align: center; cursor: pointer; }
.kcal_wrap ul li .state { display: none; position: absolute; top: 0; width: 150px; height: 96px; background: url(http://img.dongascience.com/interactive/calorie/images/icon_common.png) 50% -300px no-repeat; z-index: 10; }
.kcal_wrap ul li .thumb { overflow: hidden; display: block; height: 96px; }
.kcal_wrap ul li .thumb img { width: 100%; }
.kcal_wrap ul li .txt { display: block; height: 51px; padding-top: 8px; background: #fff; font-size: 14px;}
.kcal_wrap ul li .txt strong { display: block; color: #df573e; font-size: 16px; }
.kcal_wrap ul li.active .state { display: block; background: url(http://img.dongascience.com/interactive/calorie/images/icon_common.png) 50% 0px no-repeat; }
.kcal_wrap .result { }
.kcal_wrap .result .desc { display: block; padding: 10px 0 20px; color: #777; font-size: 14px; }
.kcal_wrap .result .border_box { padding: 30px 0; background: #fff; border: 6px solid #df573e; }
.kcal_wrap .result .border_box .txt { display: block; margin-bottom: 10px; color: #555; }
.kcal_wrap .result .border_box .txt2 { display: block; font-size: 24px; line-height: 34px; letter-spacing:-0.06em; }
.kcal_wrap .result .border_box .txt2 strong { display:block; color: #df573e; font-size: 30px; }