@charset "utf-8";

/* 基础样式 */
body, p, td, div, span, input, th, li, textarea { 
    font-family: arial, helvetica, sans-serif; 
    font-size: 16px; 
    color: rgb(0, 0, 0); 
}

body { 
    background: rgb(255, 255, 255); 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    text-align: center; 
}

p { margin: 5px 0px 8px; }

img { border: 0px; }

h1 { 
    color: rgb(0, 51, 102); 
    font-size: 26px; 
    font-weight: bold; 
    padding: 0px; 
    margin: 12px 0px; 
}

h2 { 
    font-size: 22px; 
    font-weight: bold; 
    color: rgb(0, 51, 102); 
    padding: 0px; 
    margin-bottom: 2px; 
}

h3 { 
    font-size: 19px; 
    font-weight: bold; 
}

hr { 
    border: 0px; 
    color: rgb(170, 170, 170); 
    background-color: rgb(170, 170, 170); 
    height: 1px; 
}

a { 
    color: rgb(0, 102, 153); 
    text-decoration: underline; 
}

a:hover { 
    text-decoration: none; 
}

/* 输入框样式 */
input { 
    padding: 5px; 
    color: rgb(0, 0, 0); 
    box-sizing: border-box; 
}

select { 
    padding: 4px; 
    color: rgb(0, 0, 0); 
    box-sizing: border-box; 
}

option { 
    font-size: 16px; 
}

input[type="text"], input[type="url"], input[type="tel"], input[type="number"], 
input[type="color"], input[type="date"], input[type="email"], select { 
    border: 1px solid rgb(4, 66, 132); 
    border-radius: 2px; 
    box-shadow: rgb(102, 102, 102) 1px 1px 2px; 
    font-size: 16px; 
    background-color: rgb(255, 255, 255); 
}

input[type="submit"] { 
    border: 0px; 
    color: rgb(255, 255, 255); 
    padding: 11px 50px 11px 16px; 
    font-size: 16px; 
    font-weight: bold; 
    background-color: rgb(76, 123, 37); 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180px' height='40px'><circle cx='112' cy='20' r='11' fill='darkseagreen' /><path d='M110 12 L120 20 L110 28 Z' fill='white' /></svg>"); 
    background-repeat: no-repeat; 
}

input[type="submit"]:hover { 
    background-color: rgb(68, 68, 68); 
}

input[type="reset"], input[type="button"] { 
    border: 0px; 
    color: rgb(255, 255, 255); 
    padding: 11px 8px; 
    font-size: 16px; 
    background: rgb(171, 171, 171); 
}

input[type="reset"]:hover, input[type="button"]:hover { 
    background: rgb(68, 68, 68); 
}

/* 输入框尺寸类 */
.indollar { 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15px' height='20px'><text x='2' y='15' style='font: normal 16px arial;'>¥</text></svg>"); 
    background-position: left center; 
    background-repeat: no-repeat; 
    padding-left: 18px !important; 
}

.inpct { 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17px' height='20px'><text x='1' y='15' style='font: normal 16px arial;'>%</text></svg>"); 
    background-position: right center; 
    background-repeat: no-repeat; 
    padding-right: 18px !important; 
}

.innormal { width: 90px; }
.in4char { width: 58px; }
.in3char { width: 46px; }
.in2char { width: 35px; }
.inlong { width: 120px; }
.inlonger { width: 170px; }
.inlongest { width: 230px; }
.inlongesthalf { width: 112px; }
.infull { width: 226px; }
.inhalf { width: 110px; }
.infulltxarea { width: 600px; padding: 8px; }
.inshortfull { width: 170px; }
.inshorthalf { width: 82px; }

/* 复选框样式 */
.cbcontainer { 
    display: inline-block; 
    position: relative; 
    padding-left: 28px; 
    padding-top: 1px; 
    margin: 5px 0px; 
    cursor: pointer; 
    font-size: 16px; 
    user-select: none; 
}

.cbcontainer input { 
    position: absolute; 
    opacity: 0; 
    cursor: pointer; 
    height: 0px; 
    width: 0px; 
}

.cbmark { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 16px; 
    width: 16px; 
    background-color: rgb(255, 255, 255); 
    border: 2px solid rgb(51, 102, 153); 
}

.cbcontainer:hover input ~ .cbmark { 
    background-color: rgb(204, 204, 204); 
}

.cbcontainer input:checked ~ .cbmark { 
    background-color: rgb(51, 102, 153); 
}

.cbmark::after { 
    content: ""; 
    position: absolute; 
    display: none; 
}

.cbcontainer input:checked ~ .cbmark::after { 
    display: block; 
}

.cbcontainer .cbmark::after { 
    left: 4px; 
    top: 0px; 
    width: 5px; 
    height: 10px; 
    border-style: solid; 
    border-color: white; 
    border-image: initial; 
    border-width: 0px 3px 3px 0px; 
    transform: rotate(45deg); 
}

/* 提示图标样式 */
.ttimg { 
    opacity: 0.4; 
    vertical-align: top; 
}

.ttimg:hover { 
    opacity: 1; 
}

/* 头部样式 */
#headerout { 
    background: rgb(0, 51, 102); 
    text-align: center; 
}

#header { 
    width: 1100px; 
    height: 60px; 
    background: rgb(0, 51, 102); 
    padding: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
    overflow: hidden; 
}

#logo { 
    padding: 18px 0px; 
    width: 270px; 
    float: left; 
}

#login { 
    padding: 2px; 
    float: right; 
    color: rgb(204, 204, 204); 
}

#login a { 
    color: rgb(204, 204, 204); 
    text-decoration: none; 
}

#login a:hover { 
    text-decoration: underline; 
}

/* 顶部导航 */
.topNavAbs { 
    position: absolute; 
    top: 21px; 
    left: 50%; 
    width: 520px; 
    margin-left: -80px; 
    text-align: left; 
}

.topNavAbs a { 
    color: white; 
    padding: 10px 16px; 
    border: none; 
    cursor: pointer; 
    font-size: 16px; 
    text-transform: uppercase; 
    display: inline-block; 
    text-decoration: none; 
}

.topNavAbs a:hover { 
    background-color: rgb(81, 132, 40); 
}

.topNavOn { 
    background-color: rgb(81, 132, 40); 
}

/* 主内容区域 */
#contentout { 
    width: 1100px; 
    padding-top: 5px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
    overflow: auto; 
}

#content { 
    padding: 0px 0px 15px; 
    width: 728px; 
    float: left; 
}

#right { 
    width: 336px; 
    float: right; 
    text-align: center; 
}

/* 面包屑导航 */
#breadcrumbs, #breadcrumbs span { 
    font-size: 13px; 
}

#breadcrumbs a, #breadcrumbs a span { 
    text-decoration: none; 
    color: rgb(0, 102, 153); 
}

#breadcrumbs a:hover, #breadcrumbs a span:hover { 
    text-decoration: underline; 
}

/* 打印按钮 */
#printit { 
    width: 80px; 
    float: right; 
    text-align: right; 
}

/* 说明图标 */
#insmdc { 
    background-color: rgb(51, 102, 153); 
    margin-bottom: 3px; 
    text-align: center; 
}

/* 面板样式 */
.panel { 
    background: rgb(238, 238, 238); 
    border: 1px solid rgb(187, 187, 187); 
    padding: 5px; 
}

/* 布局类 */
.clefthalf { 
    width: 350px; 
    float: left; 
}

.crighthalf { 
    width: 350px; 
    float: right; 
}

.espaceforM { 
    display: none; 
}

#clear { 
    margin-left: auto; 
    margin-right: auto; 
    clear: both; 
    height: 0px; 
}

/* 结果样式 */
.h2result { 
    background: rgb(81, 132, 40); 
    color: rgb(255, 255, 255); 
    border: 1px solid rgb(81, 132, 40); 
    padding: 5px; 
    margin-top: 3px; 
    font-size: 22px; 
    font-weight: normal; 
}

/* 搜索框 */
#searchbox { 
    padding-top: 16px; 
}

#bluebtn { 
    border-radius: 1px; 
    background: rgb(51, 102, 153); 
    padding: 5px 8px; 
    font-size: 18px; 
    color: rgb(255, 255, 255); 
    cursor: pointer;
}

#bluebtn:hover { 
    background: rgb(68, 68, 68); 
    color: rgb(255, 255, 255); 
}

/* 其他计算器 */
#othercalc { 
    border: 1px solid rgb(51, 102, 153); 
    margin: auto; 
    text-align: left; 
    width: 332px; 
}

#octitle { 
    background-color: rgb(51, 102, 153); 
    padding: 6px; 
    color: rgb(255, 255, 255); 
    font-size: 18px; 
    font-weight: bold; 
}

#octitle a { 
    color: rgb(255, 255, 255); 
    text-decoration: none; 
}

#octitle a:hover { 
    text-decoration: underline; 
}

#occontent { 
    padding: 3px 6px; 
    font-size: 14px; 
}

#occontent a { 
    display: inline-block; 
    width: 158px; 
    padding: 3px 0px; 
}

#ocother { 
    background-color: rgb(221, 221, 221); 
    padding: 6px; 
    text-align: center; 
    font-size: 15px; 
    color: rgb(187, 187, 187); 
}

/* 页脚 */
#footer { 
    background: rgb(225, 225, 225); 
    padding: 25px 0px; 
    font-size: 13px; 
    color: rgb(85, 85, 85); 
    text-align: center; 
}

#footer a { 
    color: rgb(68, 68, 68); 
}

#footer a:hover { 
    text-decoration: none; 
}

#footerin { 
    width: 1100px; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
    overflow: auto; 
    color: rgb(85, 85, 85); 
}

#footernav {
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 1140px) {
    #header {
        width: 990px;
        padding-left: 8px;
    }

    #contentout {
        width: 1000px;
    }

    #content {
        width: 640px;
        float: left;
        padding-left: 10px;
    }

    #footerin {
        width: 990px;
    }

    .clefthalf, .crighthalf {
        width: 310px;
    }
}

@media (max-width: 720px) {
    #header {
        width: auto;
        padding: 0px 8px;
    }

    #contentout {
        width: auto;
        padding: 8px;
    }

    #content {
        float: none;
        width: auto;
        padding: 0px;
    }

    #right {
        width: auto;
        float: none;
    }

    #footerin {
        width: auto;
    }

    .topNavAbs {
        display: none;
    }

    .espaceforM {
        display: block;
    }

    .clefthalf, .crighthalf {
        width: auto;
        float: none;
    }
}

@media (max-width: 650px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 490px) {
    .innormal, .inhalf, .inlong, .inlonger, .inlongest {
        width: 100%;
        max-width: 200px;
    }
}

/* 表格样式 */
table.cinfoT {
    border-collapse: collapse;
    border-spacing: 0px;
    margin-top: 0px;
}

table.cinfoT th, table.cinfoT td.cinfoHd, table.cinfoT td.cinfoHdL {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(17, 68, 119) rgb(17, 68, 119) rgb(51, 102, 153);
    background-color: rgb(51, 102, 153);
    font-weight: bold;
    color: rgb(255, 255, 255);
    padding: 5px 3px;
}

table.cinfoT td {
    border: 1px solid rgb(204, 204, 204);
    color: rgb(0, 0, 0);
    padding: 3px;
}

table.cinfoT tr:nth-child(2n+1) {
    background-color: rgb(238, 238, 238);
}

table.cinfoT tr:nth-child(2n) {
    background-color: rgb(255, 255, 255);
}

/* 图表区域 */
#pieChart {
    margin: 20px 0;
    text-align: center;
}

#pieCanvas {
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* 还款计划表 */
#amortizationSchedule {
    margin-top: 30px;
    clear: both;
}

#scheduleTable {
    overflow-x: auto;
    margin-top: 10px;
}

#scheduleTable table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

#scheduleTable th {
    background-color: rgb(51, 102, 153);
    color: white;
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

#scheduleTable td {
    padding: 6px;
    text-align: right;
    border: 1px solid #ddd;
}

#scheduleTable tr:nth-child(even) {
    background-color: #f9f9f9;
}

#scheduleTable tr:hover {
    background-color: #f0f0f0;
}

/* 手机端优化 */
@media (max-width: 480px) {
    #scheduleTable {
        font-size: 12px;
    }

    #scheduleTable th,
    #scheduleTable td {
        padding: 4px 2px;
    }

    .panel {
        margin: 5px 0;
        padding: 10px;
    }

    h1 {
        font-size: 22px;
    }

    h2 {
        font-size: 18px;
    }

    .h2result {
        font-size: 18px;
        padding: 8px;
    }
}