@charset "utf-8";
@import url('font.css');
html, body { overflow: hidden; }
.chart-wrap { width:1000px; padding:0 0 50px; }
.chart-wrap .chart-title { font-size:34px; font-weight:bold; color:#000; text-align:center; margin:50px 0 10px; }
.chart-wrap .product-name { font-size:20px; color:#999; text-align:center; margin:0px 0 30px;}
.chart-wrap .chart-box { position:relative; }
.chart-wrap .chart-box .chart-label { display:none; margin-left:20px; font-size:16px; color:#000; }
.chart-wrap .chart-box .chart-info { position:absolute; right:50px; top:0px; background-color:#fff; width:250px; box-sizing:border-box; padding:50px 25px 40px; border-radius: 20px; box-shadow: 0 0 40px rgba(68, 68, 68, 0.2); }
.chart-wrap .chart-info .info-title { text-align:center; padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid #ddd; }
.chart-wrap .chart-info .info-title p { font-size:18px; color:#000; }
.chart-wrap .chart-info .info-title p + p { font-size:14px; color:#777; margin:10px 0 0; }
.chart-wrap .chart-info .info-result {}
.chart-wrap .chart-info .info-result ul {}
.chart-wrap .chart-info .info-result li:after { content:''; display:block; clear:both; }
.chart-wrap .chart-info .info-result li { margin:10px 0; }
.chart-wrap .chart-info .info-result li .num { width:50px; height:50px; background-color:#ffd2ce; border-radius: 50%; text-align:center; line-height:50px; font-size:16px; color:#fff; font-weight:bold; display:inline-block;}
.chart-wrap .chart-info .info-result li:first-child .num { background-color:#f87064; } 
.chart-wrap .chart-info .info-result li .text { display:inline-block; font-size:18px; color:#000; margin-left:15px; letter-spacing: -0.04em; }