@charset "utf-8";
/* CSS Document */
*{ margin:0px auto;}
html,body{margin:0px auto; padding:0px;font-family: "Raleway", Helvetica, sans-serif;font-weight: 200;background-color: #f8f8f8;overflow-x: hidden;}
img { border: 0; display: block;}
ul,ol,li {margin:0px auto; padding:0px; }
.clear,.cl{ clear:both;}

header{width: 100%;margin-top: 10px;}
article{min-width:320px;max-width:1170px;margin:0 auto;width:100%; padding:0px;}


.container {
    -webkit-align-items: center;
    align-items: center;
    margin: 0px auto;
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    padding: 20px;
	width: 100%;
}

.container form{width: 100%;}

.ti {
    color: #333;
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

.input-group {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    padding: 30px;
    width: 90%;
	margin: 0px auto;
	
}

.input-row {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 10px;
}

.input-item {
    width: 48%;
}

.input-wrapper {
    -webkit-align-items: stretch;
    align-items: stretch;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
}

.input-wrapper input {
    border: none;
    -webkit-flex: 1;
    flex: 1;
    font-size: 28px;
    padding: 16px;
	width: 100%;
}

.unit {
    -webkit-align-items: center;
    align-items: center;
    background-color: #007aff;
    border-left: 2px solid #ddd;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    font-size: 28px;
    -webkit-justify-content: center;
    justify-content: center;
    min-width: 80px;
	
}

button {
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(76,175,80,.3);
    color: #fff;
    font-size: 40px!important;
    height: 100px!important;
    line-height: 70px!important;
    margin-top: 20px;
    padding: 10px;
    width: 100%!important;
}

button:hover {
    background-color: #0069d9;
}

.tip-icon {
    background: #007aff;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
    text-align: center;
    width: 32px;
}

.label {
    color: #666;
    display: block;
    font-size: 28px;
}

.label-row {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 10px;
}

.result {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    margin: 20px auto 0;
    padding: 40px;
    width: 90%;
}

.result-title,.result-title-row {
    border-bottom: 2px solid #eee;
    color: #333;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 30px;
    padding-bottom: 20px;
    text-align: center;
}

.result-title-row {
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

.result-title-row .tip-icon {
    margin-left: 10px;
}

.result-section {
    margin-bottom: 20px;
	width: 100%;
	margin: 0px auto;
}

.result-row {
    margin-bottom: 24px;
}

.result-item,.result-row {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.result-item {
    -webkit-align-items: center;
    align-items: center;
    border-bottom: 2px solid #f0f0f0;
    padding: 8px 0;
    width: 48%;
}

.result-label {
    color: #666;
    -webkit-flex: 1;
    flex: 1;
    font-size: 28px;
    text-align: left;
	
}

.result-value {
    color: orange;
    font-size: 28px;
    font-weight: 600;
    text-align: right;
}

.result-note {
    background-color: #f0f0f0;
    border-radius: 8px;
    color: #666;
    font-size: 18px;
    margin-top: 20px;
	margin-bottom: 20px;
    padding: 15px;
    text-align: center;
}

.ad-container {
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}

.roijia,.jianyijia{font-size: 36px;color:#E70C0F;font-weight: 700;}


.footer{ padding:1%; color:#007bff; width:100%; margin-top:15px; font-size: 16px; -webkit-box-shadow: 1px 2px 1px rgba(0,0,0,0.2); height:auto; height:150px; text-align:center;background: -webkit-linear-gradient(left top, #f8f8f8, #f0f0f0,#f8f8f8); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(bottom right, #f8f8f8, #f0f0f0,#f8f8f8); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(bottom right, #f8f8f8, #f0f0f0,#f8f8f8); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom right, #f8f8f8, #f0f0f0,#f8f8f8);}
.footer p{padding:1%;}
.footer p a{text-decoration:none; color:#007bff;}
/*底部导航*/

.social_nav5{ height:45px; background:#0069d9; line-height:45px; position:fixed; bottom:0;width:100%; z-index:999;} 
.social_nav5 a{text-decoration:none;}
.social_nav5 ul li{ float:left; width:33%; position:relative; border-left: 1px solid #ffffff;
 text-align:center; height:45px; line-height:45px;list-style: none;}

.social_nav5 ul li a{ color:#fff; display:block; font-size:18px; text-shadow:none; text-decoration:none;}
.social_nav5 ul li img{ width:60px; height:60px; margin-top:-22px;}

.icon-top {background: url(../images/istop.png) no-repeat center #fff;background-size: 22px;width: 40px;height: 40px;position: fixed;right: 20px;bottom: 10%;opacity: 0;transition: all 0.3s;z-index: 9999999;border: #ccc 1px solid;border-radius: 100%;}
.icon-top.cd-is-visible { visibility: visible; opacity: 1; }
/*移动适配*/

 @media only screen and (max-width: 860px){
	 
	 .ti {font-size: 24px;margin-bottom: 10px;}	
	.container {padding: 6px;}
	.input-wrapper input {font-size: 26px;padding: 5px;}
	.unit {font-size: 18px;min-width: 50px;}
	button {font-size: 30px!important;height: 80px!important;
    line-height: 60px!important;}
	.label {font-size: 16px;}
	.result {padding: 19px;width: 90%;}
	.result-title,.result-title-row {font-size: 24px;}
	.result-label {font-size: 17px;}
	.result-value {font-size: 20px;}
	.result-note {font-size: 16px;}
	.roijia{font-size: 36px;}
	.input-group {padding: 8px; width: 95%;}
	.result-row {margin-bottom: 18px;}
    .roijia{font-size: 32px;}
}