/* Global settings */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/


/* 補鈣知識 */
.suggest-icon { }
.suggest-icon img { width:77px; height:auto; padding:0 20px 5px 0; display:inline-block; vertical-align: top;}
.suggest-icon p { background:#52aed3; font-size:40px; line-height:40px; display:inline-block; padding:10px 10px; margin:0; color:#ffffff; border-radius:99em; position:relative;}
.suggest-icon p span { width: 0; height: 0; position:absolute; left:-12px; top:50%; margin-top:-7.5px;
                           border-style: solid;
                           border-width: 7.5px 15px 7.5px 0;
                           border-color: transparent #52aed3 transparent transparent;
                           }
.calc-note { font-size:16px; display:block; color:#313131; padding:10px 0; width:100%; }
img.calc-food-icon { width:200px; height:auto; display:block; margin:0 auto;}
img.calc-food-icon2 { width:110px; height:auto; display:block; margin:0 auto;}
img.calc-food-icon3 { width:80px; height:auto; display:block; margin:0 auto;}
h2.calc-food-title { font-size:30px; color:#313131; margin: 20px 0; padding:0; font-weight:normal;}

.calc-table-info { text-align:center; }
.calc-table-info img { width:750px; height:auto; display:inline-block;}

.calc-point { padding:10px 0; }
.calc-point .lis { margin-bottom:30px;}
.calc-point .lis img { float:left; width:20px; height:auto; margin-top:7px;}
.calc-point .lis span { display:block; margin-left:30px; font-size:21px; }



/* 鈣值計算 */
.calc-main-box { background:#f0f1f3; margin:-80px 0 0 0; padding:50px 0; }
.calc-title { color:#037ea1; text-align:center; padding-bottom:50px;}
.calc-title h1 {font-size:60px; font-weight:normal; margin:20px 0; padding:0; }
.calc-title h1 img { display:inline-block; vertical-align: top; width:80px; height:auto; margin-right:10px;}
.calc-title p { font-size:40px; padding:0; margin:0;}

.calc-box { background:#ffffff; max-width:1170px; padding:50px;font-size:21px; color:#313131;  border-radius:20px; overflow:hidden; margin: 0 auto;}
.calc-box h2 { font-size:30px; color:#313131; font-weight:normal; display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #037eae;}
.calc-box h3 { font-size:21px; color:#313131; font-weight:normal; text-align:center; margin:0;}
.calc-box h3.calc-in-title { font-size:30px; color:#9b9ea2; padding:30px 0;}
.sex-box { max-width:480px; margin:0 auto;}
.sex-box img { display:inline-block; width:100px; height:auto;}
.sex-box span { display: inline-block; width:100px; height:115px; background-position:center; background-size:cover; vertical-align:middle;}
.sex-box span.sex-male { background-image:url(../sex-male.png); }
.sex-box span.sex-male.active { background-image:url(../sex-male-hover.png); }
.sex-box span.sex-female { background-image:url(../sex-female.png); }
.sex-box span.sex-female.active { background-image:url(../sex-female-hover.png); }

.calc-box .age { border:0; width:210px; font-size:21px; font-family:"SansCJKtc", Microsoft JhengHei; border:1px #9b9ea2 solid; padding:10px 10px; text-align:center; margin-right:10px;}


.calc-box .btn { text-align:center; padding:50px 0;}
.calc-box .btn a { text-decoration: unset; background:#ffffff; color:#626262; font-size:21px; width:20%; padding:10px 20px; display:block; border:2px #52aed3 solid; border-radius:99em; min-width:inherit; }
.calc-box .btn a img { width:10px; height:auto; display:inline-block; vertical-align: top; margin-top:8px; margin-left:15px; transition: all 0.3s ease 0s;}
.calc-box .btn a.left img { margin-top:8px; margin-right:15px; margin-left:0; }
.calc-box .btn a:hover {color:#313131; border:2px #313131 solid;}
.calc-box .btn a:hover img { +filter: grayscale(100%); -webkit-filter:grayscale(1); -webkit-filter:brightness(.3); transition: all 0.3s ease 0s;}
.calc-box .btn a.left { float:left;}
.calc-box .btn a.right { float:right;}
.calc-box .btn a.one { min-width:240px; display:inline-block;}

.calc-info { }
 h3.need-cale { color:#b7448e; font-size:24px; text-align:center; }
.cale-status { background:#52aed3; max-width:800px; color:#ffffff; margin:70px auto; position:relative; padding:0 100px; overflow:hidden; border-radius:99em;}
.cale-status .photo { width:20%; position:absolute; left:80px; bottom:0; top:0;}
.cale-status .photo table { width:100%; height:100%;}
.cale-status .photo img { width:100%; height:auto;}
.cale-status p {color:#ffffff; font-size:24px; padding:30px 20px; margin:0 0 0 20%; }
.cale-status p img.calc-pill { width:40px; height:auto; display:inline-block; margin:0 5px;}


.pie-chart { text-align:center; width:400px; margin:0 auto; position:relative;}
.circle-box { width:100%; position: relative;}
.pie-chart .circle-calc-ingestion { position:absolute; font-size:24px; color:#9b9ea2; font-family:"roboto", Microsoft JhengHei; top:150px; width:80%; left:10%; text-align:center; z-index:10; font-weight:bold; padding-left:10px;}


#suggestion { padding:30px; }
#suggestion h4 { font-size:30px; text-align:center; color:#313131; margin:0 0 40px 0; }
img.suggestion-icon { width:20px; height:auto; display:inline-block; margin:-15px 0 0 5px;}
.seggestion-box { width:100%; }
.seggestion-box .lis { display:inline-block; width:30%; margin:5px;}
.seggestion-box .lis img { background:#ffffff; padding:10px; border:1px #dcdcdc solid; max-width:100%; width:auto; height:auto; }
.seggestion-box .lis p { font-size:21px; color:#313131; margin:20px 0 0px 0; }

.calc-left {flex: 1 0 40%;}
.calc-right  { padding:0 0 20px 20px;}
.calc-line { border-bottom:1px #dcdcdc solid; padding:0px 0 20px 0; margin:50px 0;
display: flex;
    flex-direction: unset !important;
    flex-wrap: wrap;
    gap: 20px;

}
.calc-icon-btn { }
.calc-icon-btn a {background:#52aed3; display: block; float:left; text-align:center; border-radius:5px; overflow:hidden; padding:20px 20px;}
.calc-icon-btn a img { width:auto; height:auto; max-width:100%; display: block; margin: auto; }
.calc-icon-btn a:hover { background: #9b9ea2; }


h2.calc-in-title { font-size:30px; font-family:"roboto", Microsoft JhengHei; font-weight:bold; border-bottom:1px solid #dcdcdc; padding:0 0 20px 0; margin:0 0 30px 0; }
h4.table-title { text-align:left; font-weight:normal; font-size:24px; padding:0 0 10px 0; margin:0;}
h4.table-title span { display:inline-block; float:right; font-family:"roboto", Microsoft JhengHei; font-weight:bold; }
.w-890 { max-width:890px;}

table.calc-table { background: #999; margin: 10px 0;  border-radius:10px 10px 0 0;}
table.calc-table th { background:#eeeeee; font-size:21px; color:#313131; font-weight:normal; padding:15px 5px; text-align:center; }
table.calc-table th:first-child {  border-radius:8px 0 0 0;}
table.calc-table th:last-child {  border-radius:0 8px 0 0;}
table.calc-table td { background:#ffffff; font-size:21px; color:#313131; font-weight:normal; padding:15px 5px; text-align:center;  }
table.calc-table td a { display:block; color:#313131; position:relative;}
table.calc-table td a:hover { color:#06C;}



table.calc-table td.select { padding:0;}
table.calc-table td.select select {
  width: 100%;
    height: 100%;
    font-family: "SansCJKtc", Microsoft JhengHei;
    font-size: 21px;
    color: #313131;
    padding: 15px 15px;
    border: 0;
	background-image:url(../select-arrow02.png);
	background-repeat:no-repeat;
	background-size: 48px 36px;
	background-position: top right;
-webkit-appearance: none; /*Chrome*/
-moz-appearance: none; /*FF*/
appearance: none;/*CSS3*/
}
table.calc-table td.select option { text-align:center;　 text-align-last: center}


.hover-trigger {
  position: relative;
  color: #0074c1 !important;
  text-decoration: none;
}

.hover-preview {
  display: none;
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 10px;
  z-index: 9999;
  background: #fff;
  padding: 8px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.hover-preview img {
  max-width: 120px;
  height: auto;
}

.hover-trigger:hover .hover-preview {
  display: block;
}

/* Print */
@media print {
  body {
    width: 210mm;
    margin: 0 auto;
  }
}