/*
Theme Name:Wp
Version: 0.26.7
*/
html { height: 100%; }
body {
font-family: Arial, sans-serif; /* font-family: Arial, sans-serif; */
background: #f5f5fa; color: #000; font-size: 16px; word-wrap: break-word; word-break: break-all;
word-break: keep-all;
}/*#f4f4f4 #f6f9ff #f5f5f5 #eaeaec #f5f5f5 #f2f5fb #f7f7ff #f4f4f4 #f2f5fb #f6f8fd*/
/*img {image-rendering: -moz-crisp-edges;}*/
/*img-logo {image-rendering: -moz-crisp-edges;}*/
#site-title a { font-weight: bold; color: #fff; }
#top { border-bottom: 1px solid #d6d6df;background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }/*#223319 #6d4a2c #012d00 #2d2800 #616161 #5d5c5c #2c3e50 #4b4b4b #022c41 #033c59 #333348 #002d62 #1E2A38*/
#top-bar { padding: 0.5rem 0; border-bottom: 1px solid #EEE; }
/*#top .post-type-tabs {font-weight: 600;}*/
#top .tabs li:not(:last-child) { margin-right: 2rem; }
#top .tabs ul { border: none; padding-bottom: 1px; }
#top .tabs .icon { margin: 0; }
#top .tabs ul li a { border-bottom: #FFF 2px solid; padding: 0.5rem 0.5rem; }
#top .tabs li.is-active a, #top .tabs li a:hover { border-bottom: #ffe08a 2px solid; }
.wnd-message .message-body { border: none; }
/*#searchform input{border: 2px solid #ffe08a;}*/
#searchform input:focus { outline: none; }
#wrap { flex: 1; width: 100%; }
body { display: flex; flex-direction: column; min-height: 100%; }
/*.home #top{margin-bottom: 1rem;}*/
.home #banner{
background: #F9F9F9
url('static/images/banner7.webp')
no-repeat center center;
background-size: cover;
/*url('https://img1.wsimg.com/Sitecore/3/D/marq-photo-godaddy-hosting-products-mrq-440-r6-7-8.jpg') no-repeat top center;*/
/*url('http://127.0.0.1/wordpress/wp-content/uploads/2019/10/file5daeb6081f066.jpg') no-repeat top center;*/
height: 500px;
margin-bottom: 1rem;
}
.breadcrumb-wrap.columns {margin: 0rem auto 0;padding: .25em 0.25em 0.25em 0em;}/*margin: 0.5rem auto 0; */
.main.box{ padding: 50px;}
.sidebar { min-width: 250px; background: #FFF;}
.sidebar a { color: #333 }
/*#right-sidebar { border-left: 0px solid #EEE; margin-left: 0.75rem; width: 320px; padding-left: 20px; }*/
/*#left-sidebar { border-right: 0px solid #EEE; margin-right: 0.75rem; padding-right: 20px; }*/
/*侧边栏*/
#sidebar-menu { max-width: 100%; width: 380px; position: fixed; top: 0; left: -380px; background: #FFF; height: 100%; overflow: auto; z-index: 200; padding-bottom: 2rem; }
#sidebar-menu .menu { font-size: 15px; padding: 10px; }
#sidebar-menu .menu-list li ul { display: flex; flex-wrap: wrap; }
#sidebar-menu .menu-list li ul li { width: 50%; }
#modal-background { z-index: 31 }
#footer { margin-top: 20px; color: #333; padding: 0.5rem 0 0.5rem; font-size: 0.9rem; line-height: 1.5rem; background: transparent;/*border-top: 1px solid #e4e4e4;*/ background-color: #fff;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}/*#141e0f #1e0f0f #2c3e50 #033c59 #333348#00142f*/
#footer .content ul { list-style: none; }
#footer a, #footer p {color: #999;} /* #fff 999*/
#footer .bookmarks .column { padding-top: 0 }
/**
*
********************************************覆盖bulma框架样式
*/
a, .breadcrumb a { color: #333; } /**#333 #485fc7*/
table a { color: #0AA2E0; }
/*a { color: #0AA2E0; }*/
a:focus { outline: none; }
a::-moz-focus-inner { border: 0; }
.breadcrumb a { color: #333; }
a:hover, .breadcrumb a:hover { color: #777; text-decoration: underline; }
.navbar-burger { display: block; height: auto; }
.navbar-burger:hover { background: transparent; }
.navbar-burger span { height: 2px; width: 20px; left: calc(50% - 10px); }
.container {margin: 0 auto; width: 100%; max-width: 1200px } /*1000px*/
#top .container {
width: 100%;
max-width: 100% !important;
}
.select:not(.is-multiple):not(.is-loading)::after { border-color: #333; }
.navbar { min-height: 3.25rem; }/* 5.0rem */
.navbar.is-transparent { background: none; }
/*.navbar-dropdown{border-top:none;}*/
.navbar-link:not(.is-arrowless)::after { border-color: #333; }
a.navbar-item:hover, .navbar-item a.navbar-link:hover { background: transparent !important; color: #222; } /*修改 #ffe08a,#485fc7 #4545ff*/
.navbar-dropdown .navbar-item:hover {
color: #f60 !important; /* #FFD700 将文本颜色设置为黄色 下拉框链接颜色*/
background-color: rgba(255, 255, 0, 0.2); /* 可选，添加背景色以增强可视效果 */
}
a.navbar-item.is-active { color: #ffe08a; border-bottom: 0px #ffe08a solid; }
/*.container .navbar .navbar-brand, .container .navbar .navbar-menu { margin: 0; } 2025-12-21.23.58注释*/
.tabs ul { flex-wrap: wrap; }
.tabs li.is-active a { color: #ffe08a; border-color: #ffe08a; }
/* .tabs:not(.is-boxed .is-toggle) ul:first-child a { padding-left: 0; } */
.tabs.is-boxed li.is-active .icon { color: #FFF; }
.menu-list a.is-active { background-color: #01cdb8; color: #fff; }
/*.box { box-shadow: none; border-radius: 0; }*/
.content { line-height: 1.8em; }
.content p:not(:last-child){margin-bottom: 0.6rem}
.content h1 {
font-size: 1.6em;
margin-bottom: .5em;
}
/* 中部下划线 .content a{text-decoration: underline;} */
.content a:hover {color:#007bff;}/*#ffe08a a链接的颜色*/
/*.content .box { padding: 50px; }*/
code .number {
background: transparent;
border:none;
font-size: inherit;
height:auto;
margin:0;
min-width: auto;
padding: 0;
}
/*标题*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { /*font-family: Arial, sans-serif;*/ font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space:normal; }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { /*font-family: Arial, sans-serif;*/ font-weight: 500; }
.label { font-weight: 500; }
/*.content h3{font-size: 1.1rem;}*/
/* 导航 */
/*.navbar-start .navbar-dropdown { min-width: 300px; }*/
/*.navbar-start .navbar-dropdown a { display: inline-block; width: 49%; }*/
/*表单图标、占位文字颜色*/
.control.has-icons-left .icon, .control.has-icons-right .icon { color: #999; }
.input::placeholder, .textarea::placeholder { color: #999; }
.has-background-light { background: #F9F9F9 !important; }
.field-body {
flex-grow: 8;
}
/**
*
********************************************
*/
.button.is-warning.is-outlined {
background-color: transparent;
border-color: #FDAB0E;
color: #FDAB0E;
}
/* ################### filter ###################*/
.wnd-filter-tabs { background: #FFF; }
.wnd-filter-tabs .tabs:not(.is-boxed) ul { border: none; }
.wnd-filter-tabs .tabs:not(.is-boxed) ul a { border: none; padding: 0.1em 0.5em; margin: 0.3em 0; font-size: 0.95rem; }
.wnd-filter-tabs .tabs:not(.is-boxed) li.is-active a { background: #ffe08a; color: #FFF; border-radius: 3px; }
.wnd-filter-tabs .column { padding: 0.5em 0.3em; }
.wnd-filter-tabs .column.is-narrow { color: #777; }
.wnd-filter-tabs .columns:not(:last-child) { border-bottom: 1px solid #EEE; }
.wnd-filter-tabs .tag { border: 1px solid #333; color: #333; background: #FFF; }
.archive .wnd-filter-tabs { /*background: #F5F5F5;*/
margin-bottom: 20px; padding: 1.25rem; /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);*/ border: 1px solid #EEE; font-size: 0.95rem; }
/*########################################*/
/*.ajax-message { text-align: center; margin-bottom: 1rem; }*/
/* tags */
.tags a { line-height: 1.6em; color: #ffe08a; border-radius: 3px; border: 0px solid #333; margin: 0 5px 0 0; }
/* post list */
.post-list.columns, .post-list.column { font-size:0.95rem; border: 1px solid #EEE; border-radius: 5px; padding: 20px; background: #FFF; }
.post-list.columns:not(:last-child){margin-bottom: 1rem;margin-top: 0;}
.post-list a:hover { text-decoration: underline; }
.post-list h3 { font-size: 1.2rem; line-height: 1.8em; }
.post-list:hover { box-shadow: 0 0px 10px 0 #DDD; }
.post-list .column { padding: 7px; }
/* 正文 */
article.entry { border-top: 1px solid #EEE; padding-top: 20px; }
/* 分类复选框 */
.profile-category-checkbox { flex-wrap: wrap; display: flex; }
/* label.checkbox { margin: 0 1rem 0 0.2rem; } */
/*边栏分类下拉*/
.post-form .column .select{width: 100%;}
.is-grouped-centered .button,.comments .button{min-width: 200px;}
/*code{font-size: 0.9rem;}*/
code span{font-size: 0.9rem;}
.modal-entry {
transition: all 0.16s;
}
.user-form{ max-width: 400px; margin: 0 auto; }
/*.box ul{padding:0;margin: 0 ;}*/
.box li{
/*padding: 0;*/
/*margin: 0;*/
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
white-space: inherit;
/*width:80%;*/
font-size: 1em;
}
.wnd-pay-button.box{box-shadow: 0 -10px 50px 0px #DDD;border-radius: 0;margin-top: 3rem}
/*.wnd-pay-button{}*/
/* ------------------------------
comment list
------------------------------ */
#comments { overflow: hidden; clear: both; font-size: 0.95rem;margin-top: .25em;} /*1rem*/
#comments li{list-style-type:none;}
#comments ol{margin:0;}
ol.commentList li { clear: both; margin: 0 0 20px; list-style-type: none; }
.commentList li .avatar { float: left; width: auto; border: 1px solid #CCC; padding: 3px; margin: 5px 5px 0 0; }
.comment-body p { margin: 5px 0; }
#comments input#author, #comments input#email, #comments input#url { width: 68%; padding: 5px 5px; border: none; border-bottom: 1px #c9c9c9 solid; background: #fff; font-size: 14px; } /*transparent */
#comments textarea#comment { width: 100%; height: 250px; padding: 8px; border: 1px solid #c9c9c9; border-radius: 10px;outline: none; }
/* #comments textarea#comment:focus {border-color: #0366d6!important;} */ /* 聚焦时边框颜色变为黑色 */
#commentform label { max-width: 100px; display: block; float: left; text-align: right; }
.comment-form-comment label { clear: both; }
#comments .button { display: block; clear: both; box-shadow: 0 1px 2px 0 #999; border-radius: 99px; margin: 10px auto; height: 44px;}
#comments li.thread-even { /**奇数评论**/
padding: 10px; background: #f9f5f5; border: 1px solid #EEE; }
#comments li.thread-odd { /**偶数评论**/
padding: 10px; background: #FFF; border: 1px solid #EEE; }
#comments ol>li { margin: 2rem 0; box-shadow: 0 0 20px 0px #EEE;}
#comments li { border-radius: 0px; }
p.input { margin: 10px 0; }
#comments .avatar { float: left; margin-right: 10px; border-radius: 50%; }
.bypostauthor>div .fn:after { content: "admin"; background-color: #F60; color: #FFF; padding: 1px 5px; border-radius: 3px; font-size: 13px; margin: 0 3px; }
cite.fn { color: #600; margin-right: 5px; color: #f60; font-weight: 700; }
/*评论插件定义CSS文件部分*/
/*回复*/
#comments .children { border-left: 2px solid #F60; border-bottom: 1px solid #EEE; margin: 10px 0; padding: 10px; background-color: #FFF; /*回复颜色2*/ }
#comments ol>li>ol>li { margin: 0; }
#newcomment { border: 1px dashed #333; width: 99%; }
.comments-header { position: relative; /*text-align: center; */overflow: hidden; }
.comments-heading { position: relative; display: inline-block; font-size: 1.3rem;} /*font-weight: bold; */
.comments-heading:before { content: ''; width: 40px; height: 2px; background-color: #e0e0e0; position: absolute; top: 50%; margin-right: 2rem; right: 100%; margin-top: -1px; }
.comments-heading:after { content: ''; width: 40px; height: 2px; background-color: #e0e0e0; position: absolute; top: 50%; left: 100%; margin-left: 2rem; margin-top: -1px; }
/* ##Comment Form
---------------------------------*/
.comment-respond .comment-reply-title { font-size: 1.25em; margin: 0px auto; text-align: center; padding: 10px 20px 10px 20px;}
.comment-form { font-size: 14px; padding: 0px 10px 10px 10px;}
.comment-form .comment-notes, .comment-form .logged-in-as { color: #333; text-align: center; }
.comment-form-author, .comment-form-email, .comment-form-url { float: left; width: 50%; margin-bottom: 1.25rem; }
#commentform input { border: 0; border-radius: 0 }
.comment-form-comment textarea { margin-bottom: 1.25rem; }
.comment-form-submit { text-align: right; }
/*ajax 评论样式*/
.ajax-comment-message{
background:#D24B58;
border-radius:4px;
box-shadow:0 1px 1px rgba(0,0,0,0.25),0 0 1px rgba(0,0,0,0.35);
display:inline-block;
font-size:14px;
margin-bottom:0;padding:12px 25px;color:#FFF;
}
/*上传*/
/*翻页*/
.pagination { text-align: center; clear: both; }
.pagination ul li { display: inline-block; margin: 0 10px; }
/* 相册 */
/*.wnd-gallery .modal-content { width: auto; max-width: 1024px; text-align: center; }*/
/*.field .gallery { border: 2px dashed #DDD; min-height: 100px; margin: 10px auto; background: #F5F5F5; }*/
/*wp editor前端*/
.media-frame-menu { display: none; }
#mceu_52 { display: none; }
/* 移动 */
@media screen and (max-width:1023px) {
.sidebar { max-width: 100%; }
.main.box { padding: 20px; }
.navbar { min-height: 3rem; }
/*main.column { padding: 20px; }*/
/* Tabs */
.list-posts .tabs ul { flex-wrap: nowrap; flex-shrink: 1; }
}
/**
************************************************ bulma 拓展 *************************************************
*/
/*悬停下拉导航菜单*/
.navbar-item.is-mega {
position: static;
}
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
/* 上标提示 */
[data-badge] { position: relative; }
[data-badge]::after {
display: inline-block;
position: absolute;
min-width: 1rem;
min-height: 1rem;
font-size: .75rem;
top: 0;
right: 0;
bottom: auto;
left: auto;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
margin: 0;
padding: .1rem .25rem;
text-align: center;
white-space: nowrap;
line-height: 1;
background: #333;
background-clip: padding-box;
border-radius: 5px;
box-shadow: 0 0 0 1px #fff;
color: #fff;
content: attr(data-badge);
z-index: 9;
background: #ff3860;
color: #fff;
}
/**
************************************************ loading *************************************************
*/
.spinner {
margin: 0px auto 0;
padding: 10px 0;
width: 150px;
text-align: center;
}
.spinner>div {
width: 30px;
height: 30px;
background-color: #989292;
border-radius: 100%;
display: inline-block;
animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */
animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
animation-delay: -0.16s;
animation-delay: -0.16s;
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0.0)
}
40% {
transform: scale(1.0)
}
}
@keyframes bouncedelay {
0%,
80%,
100% {
transform: scale(0.0);
transform: scale(0.0);
}
40% {
transform: scale(1.0);
transform: scale(1.0);
}
}
/**************88*/
#ajax-module{
/*min-height: calc(100vh/2);*/
min-height: 200px;
}
/*#wnd-6046d44e12fa7-5-text{height:500px;font-size: 2rem;}*/
.editor-text{min-height: calc(100vh - 300px);font-size: 1.1rem;height: 1px;}
/*form{max-width: 900px;margin: 0 auto;}*/
#teamnewslist ol{list-style:none;padding-left: 14px;border-left: 2px solid #eee;font-size: 15px;color: #666;}
#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #01cdb8;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#teamnewslist li:hover{color: #555;}
#teamnewslist li:hover b::after{border-color: #00cc00;}
#teamnewslist li:hover b{color: #00cc00;}
#teamnewslist{padding-left:33px;}
#timedd dd{margin:0;padding:0;}
#timedd dl{width:100%;height:auto;display:block;overflow:hidden;margin:0 auto;font-size:10pt;line-height:160%;}
#timedd dt,dt a{width:100%;height:auto;display:block;font-weight: bold;color:#333;font-size:18px;cursor:pointer;padding: 1px 0 0 14px;}
#timedd dt a:hover{color: #FF0000;}
/* bulma 修改 */
.navbar-link {color:#fff;font-weight: 500;font-size: 1.1rem;}
.navbar-item {color:#222;font-weight: 550;font-size: 16px;}
.navbar-burger:not(.is-active) {color: #222;} /* #fa7c0c */
.navbar-burger .is-active {color: #4a4a4a !important;}
.content h2,.content h4,.content h5,.content h6 {color:#111827;}
.content h1,.content h3 {color:#111827}
.has-text-centered {margin-top:5px;}
.navbar-dropdown {background: #fff;color:#fff}/*#bcbfba*/
.navbar-item img {max-height: 3rem;}
.navbar-link:not(.is-arrowless)::after {border-color: #333;}
a:hover {text-decoration: none;color: blue;} /* 修改首页内容链接悬停颜色 a:hover {text-decoration: none;color: inherit;}*/
code {color: #e96900;}
cite {font-style: normal;}
.is-reward {background-color:#ffe08a; border-color:transparent; color:#FFF;font-size:13px;}
.banner-title {color: #1c1d27;font-size: 25px;text-align: center;font-weight: bolder;letter-spacing:0.1em;}
.banner-title bb {color: #0772fc;}
/* 侧边栏样式*/
/*侧边栏主题推荐*/
.spywidget {clear:both;position:relative;margin-bottom:20px;overflow:hidden;}
.spywidget_product {background:#fff;}
.spyproduct_content {padding:15px;}
.spyproduct_info h2 {font-size:20px;margin:0;font-weight:bold;padding:5px 0 10px 0;}
.spywidget ul {zoom:1;list-style:none;padding:0;margin:0;}
.spyproduct_info>ul>li {font-size:13px;margin-bottom:8px;list-style:none;}
.spyprice_sale {border-top:1px solid #eee;padding:10px 0px;}
.spyprice_sale strong {float:right;font-size:20px;line-height:1;font-weight:100;}
small,.spysmall {font-size:85%;}
.spyprice_sale h2 {margin:0;font-size:14px;color:#999;line-height:20px;}
.spyproduct_content>.spybtn {top:5px;padding:1px;text-align:center;text-decoration:none;cursor:pointer;width:100%;background:linear-gradient(-125deg,#01cdb8 0%,#01735e 100%);box-shadow:0 3px 10px -1px #01cdb8!important;color:#ffffff;}
.spywidget {max-width:320px;margin:0 auto;}
.spybtn {border:none;border-radius:4px;cursor:pointer;display:inline-block;font-size:15px;font-weight:400;letter-spacing:1px;line-height:46px;outline:none;padding:0 18px;text-align:center;position:relative;}
/*侧边栏主题推荐*/
/* 服务器推荐区块 */
.widget-ssr {overflow:hidden;padding:0;}
.widget-ssr {font-size:14px;background-color:#fff;}
.asr {border-radius:10px;display:block;padding:40px 15px;text-align:center;color:#fff !important;background:#fe3d7d;background-image:linear-gradient(to right,#080824 0,#080824 50%,#080824 100%);}
.asr .btn {margin-top:20px;font-weight:700;}
.asr h4 {margin:0;font-size:22px;}
.asr h5 {margin:10px 0 0;font-size:14px;}
.asr .btn:hover {color:#fe3d7d;}
.btn-outline:hover {background-color:#fff;}
.btn-outline {line-height:36px;color:#fff;background-color:transparent;border:1px solid #fff;display:inline-block;font-weight:400;text-align:center;vertical-align:top;user-select:none;padding:0 36px;font-size:14px;border-radius:100px;outline:0;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
/* 服务器推荐区块 */
/* 需求定制表单样式 */
.onehalf{width:50%;float:left!important;}
.outer{margin:0 -10px;}
.inner{padding:0 10px;}.outer{margin:0 -10px;}
.cf7part{float:left;margin-bottom:20px;}
.nodisplay{display:none!important;}
@media only screen and (max-width: 640px)
{.onehalf{width:100%!important;}}
.hunkcf77 input{height:55px!important;background:#eee!important;border:none!important;border-radius:30px!important;font-size:17px!important;padding:15px 30px 15px 30px!important}
.hunkcf77 textarea{height:200px!important;background:#eee!important;border:none!important;border-radius:30px!important;font-size:17px!important;padding:15px 30px 15px 30px!important}
.hunkcf77 .submit{text-align:center!important;}
.hunkcf77 .submit .wpcf7-submit{padding:15px 40px!important;background:#fff!important;border-radius:30px!important;border:1px solid #333!important;color:#333!important;}
.hunkcf77 .wpcf7-submit:hover{background:#333!important;color:#fff!important;}
/* 需求定制表单样式 */
/* 角标 */
.n-mark-red{display:inline-block;transform:translateY(-12px);font-size:.75rem;letter-spacing:0.05em;background:linear-gradient(to top,#f308a0 0%,#fb0655 100%);color:#ffffff;border-radius:1rem;padding:.15rem .275rem;line-height:1;font-weight:bold;}
.n-mark-yello{display:inline-block;transform:translateY(-12px);font-size:.75rem;letter-spacing:0.05em;background:linear-gradient(to top,#efd3b0 0%,#f9e1be 100%);color:#ffffff;border-radius:1rem;padding:.15rem .275rem;line-height:1;font-weight:bold;}
.n-mark-blue{display:inline-block;-webkit-transform:translateY(-12px);-ms-transform:translateY(-12px);transform:translateY(-12px);font-size:.75rem;letter-spacing:0.05em;background:#188ef4;background:-webkit-linear-gradient(legacy-direction(to right),#6454ef 0%,#316ce8 100%);background:-webkit-gradient(linear,left top,right top,from(#6454ef),to(#316ce8));background:-webkit-linear-gradient(left,#6454ef 0%,#316ce8 100%);background:-o-linear-gradient(left,#6454ef 0%,#3021ec 100%);background:linear-gradient(to right,#6454ef 0%,#3021ec 100%);color:#ffffff;border-radius:1rem;padding:.15rem .275rem;line-height:1;font-weight:bold;}
.n-mark-yellos{display:inline-block;-webkit-transform:translateY(-12px);-ms-transform:translateY(-12px);transform:translateY(-12px);font-size:.75rem;letter-spacing:0.05em;background:#f9e1be;background:-webkit-linear-gradient(legacy-direction(to right),#efd3b0 0%,#f9e1be 100%);background:-webkit-gradient(linear,left top,right top,from(#efd3b0),to(#f9e1be));background:-webkit-linear-gradient(left,#efd3b0 0%,#f9e1be 100%);background:-o-linear-gradient(left,#efd3b0 0%,#f9e1be 100%);background:linear-gradient(to top,#efd3b0 0%,#f9e1be 100%);color:#ffffff;border-radius:1rem;padding:.15rem .275rem;line-height:1;font-weight:bold;}
.n-mark-yelloss{display:inline-block;transform:translateY(-12px);font-size:.75rem;letter-spacing:0.05em;background:linear-gradient(to top,#efd3b0 0%,#f9e1be 100%);background:-webkit-gradient(linear,left top,right top,from(#ff4949),to(#ff7849));background:-webkit-linear-gradient(left,#ff4949,#ff7849);background:linear-gradient(90deg,#ff4949,#ff7849);text-shadow:0 -1px #ff4949;-webkit-box-shadow:0 10px 10px -2px rgba(255,73,73,.5);box-shadow:0 5px 5px -2px rgba(255,73,73,0.34);color:#ffffff;border-radius:1rem;padding:.2rem .575rem;line-height:1;font-weight:bold;}
.n-mark-green{display:inline-block;transform:translateY(-8px);font-size:.6rem;letter-spacing:.05em;background:linear-gradient(to right,#02bb9b 0%,#02bac3 100%);color:#fff;border-radius:1rem;padding:.18rem .5rem;line-height:1;font-weight:700;}
/* 角标 */
/* logo-2022 */
.logo-2023{background-image:url("/wp-content/themes/lkd/static/images/2023.png");position:relative;width:70px;background-repeat:no-repeat;background-size:contain;background-position:center}
.logo-2023:before{content:"";position:absolute;left:-10px;top:-460px;width:200px;height:10px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1s ease-in 1s infinite;-o-animation:searchLights 1s ease-in 1s infinite;animation:searchLights 2s ease-in 1s infinite}
/* logo-2022 */
/* 返回顶部 */
#gotop{font-size:19px;text-align:center;width:30px;height:30px;position:fixed;bottom:25px;right:10%;top:auto;display:block;cursor:pointer;background:#fff;border-radius:50px;color:#000;}
#gotop:hover{color:#ccc}
/* 返回顶部 */
/* 侧边栏文章 */
.widget {position:relative;clear:both;margin-bottom:15px;padding:25px;background-color:#fff;}
.widget-posts ul {margin-top:-20px;padding:0}
.widget-posts li {margin-top:20px;overflow:hidden;display:flex;align-items:center}
.widget-posts li .thumbnailcbl {flex:none;width:86px;overflow:hidden}
.widget-posts li .thumbnailcbl img {width:79px;max-width:97px;margin-left:3px;border-radius:10px;}
.widget-posts li a:last-child {margin-left:15px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-align:justify}
.thumbnailcbl {border:none;padding:0;margin:0}
/* 侧边栏文章 */
.wnd-filter-tabs .tabs:not(.is-boxed) li.is-active a {background: #01cdb8;color: #FFF;border-radius: 3px;}/*tabs颜色*/
.wnd-filter-tabs .tabs:not(.is-boxed) ul a {border: none;padding: 0.1em 0.5em;margin: 0.3em 0;font-size: 0.95rem;}/*tabs大小*/
mark{
color: inherit;
padding: 0;
background: none;
background-image: linear-gradient(120deg,rgba(255,193,7,0.4) 0%,rgba(255,193,7,0.4) 100%);
background-repeat: no-repeat;
background-size: 0% 0.3em;
background-position: 0 80%;
position: relative;
-webkit-animation-delay: 1s;
animation-delay: 1s;
background-size: 100% 0.3em;
}
/* bulma 1.0 修改类*/
/*.is-marginless {margin: 0 !important;}*/
/*.button.is-outlined{color:#000}*/
/*.navbar-item {background-color: transparent !important;}*/
.button.is-info {background-color:#66D1FF; border-color:transparent; color:#000; }
.button.is-primary {background-color:#00D1B2; border-color:transparent; color:#000; }
.button.is-success {background-color:#48C78E; border-color:transparent; color:#000; }
.button.is-warning {background-color:#FFB70F; border-color:transparent; color:#000; }
.button.is-danger {background-color:#FF6685; border-color:transparent; color:#000; }
/*..contentbb {color:#fa7c0c; font-size: 1.1rem;}*/
.right-align {
display: block;
margin: 0 auto;
}
.has-text-centered {
margin-top: 5px;
}
@media screen and (max-width: 768px) {
.is-hidden-mobile {
display: none !important; /* display: block !important; */
}
}
.h3.loan{
margin-top: .6666em;
margin-bottom: .6666em;
font-size: 1.25rem !important;
}
table.tftable {color:#000000;width:100%;border-width: 1px;border-color: #f7f7f7;border-collapse: collapse;text-align:center;}
table.tftable th {background-color:#f7f7f7;border-width: 1px;padding: 8px;border-style: solid;border-color: #f7f7f7;text-align:center;}
table.tftable tr {background-color:#ffffff;}
table.tftable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #f7f7f7;text-align:center;}
.hiddenDiv {
display: none;
}
.button.chinesecopy {
display: inline-block;
margin: 0 5px; /* 设置按钮之间的水平间距为10px */
padding: 5px 5px;
margin-top: 20px;
margin-bottom: 2px;
background-color: #007bff !important;
color: white;
border: none;
cursor: pointer;
line-height: 15px !important;
font-size: 16px;
text-align: center;
}
.button.chinesecopy i {
margin-right: 5px; /* 设置图标与文字之间的右边距 */
font-size: 16px; /* 设置图标的大小 */
color: white; /* 设置图标的颜色 */
}
.button.chineseconvert {
display: inline-block;
margin: 0 5px; /* 设置按钮之间的水平间距为10px */
padding: 5px 5px;
margin-top: 20px;
margin-bottom: 2px;
background-color: #55b442 !important;
color: white;
border: none;
cursor: pointer;
line-height: 15px !important;
font-size: 16px;
text-align: center;
}
.button.chineseconvert i {
margin-right: 5px; /* 设置图标与文字之间的右边距 */
font-size: 16px; /* 设置图标的大小 */
color: white; /* 设置图标的颜色 */
}
.button.chineseclear {
display: inline-block;
margin: 0 5px; /* 设置按钮之间的水平间距为10px */
padding: 5px 5px;
margin-top: 20px;
margin-bottom: 2px;
background-color: #5e5451 !important;
color: white;
border: none;
cursor: pointer;
line-height: 15px !important;
font-size: 16px;
text-align: center;
}
.button.chineseclear i {
margin-right: 5px; /* 设置图标与文字之间的右边距 */
font-size: 16px; /* 设置图标的大小 */
color: white; /* 设置图标的颜色 */
}
.boxa{
width: 100%;
overflow: auto;
/* height: 100vh; 使容器填满整个视窗高度 */
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
#whiteboard {
/* border: 1px solid #c1ddd2; /* Border styles */
box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
}
::-webkit-scrollbar {
height:10px;width:10px;
}
::-webkit-scrollbar-thumb {
border-radius:10px;
border-style:solid;
border-color:transparent;
border-width:2px;
background-color:rgba(0, 0, 0, 0.3);
background-clip:padding-box
}
::-webkit-scrollbar-thumb:hover {
border-color:rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.table-container-email {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
@media only screen and (max-width: 768px) {
.table-container-email {
flex-direction: column;
}
}
.converteremail {
margin: 0 5px;
padding: 20px;
border: none; /*border: 1px solid #ccc; */
flex: 1;
}
@media only screen and (max-width: 768px) {
.converteremail {
margin: 6px 5px;
}
}
.converteremail label {
margin-right: 10px;
}
.button.avif {
margin: 0 5px; /* 设置按钮之间的水平间距为10px */
padding: 5px 10px;
margin-top: 2px;
margin-bottom: 2px;
background-color: #007bff !important;
color: white;
border: none;
cursor: pointer;
line-height: 3px !important;
font-size: 10px;
text-align: center;
}
.button.avif2 {
margin: 0 5px; /* 设置按钮之间的水平间距为10px */
padding: 5px 10px;
margin-top: 2px;
margin-bottom: 2px;
background-color: #5e5451 !important;
color: white;
border: none;
cursor: pointer;
line-height: 3px !important;
font-size: 10px;
text-align: center;
}
.table-container-robots {
display: flex;
justify-content: space-between;
margin-top: 2px;
}
@media only screen and (max-width: 600px) {
.table-container-robots {
flex-direction: column;
}
}
.converterrobots {
margin: 0 5px;
padding: 8px;
border: 1px solid #ccc;
flex: 1;
}
@media only screen and (max-width: 767px) {
.convertererobots {
margin: 2px 1px;
}
}
/**
* 自定义radio单选按扭
**/
input[type="radio"] {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid deeppink;
border-radius: 5px;
vertical-align: text-top;
outline: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
input[type="radio"]:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
width: 9px;
height: 9px;
background: #0798ff;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
-webkit-transition: all ease-in-out 200ms;
-moz-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
}
input[type="radio"]:checked {
border-color: #0798ff;
}
input[type="radio"]:checked:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
/**
* 自定义checkbox复选框
**/
/*
input[type="checkbox"] {
position: relative;
margin: 5px;
width: 14px;
height: 14px;
font-size: 14px;
vertical-align: text-top;
border: 0;
background: none;
cursor: pointer;
}
input[type="checkbox"]:after {
content: "";
position: absolute;
top: -1px;
left: -1px;
display: block;
width: 14px;
height: 14px;
border-radius: 3px;
visibility: visible;
background-color: white;
border: 1px solid fuchsia;
}
input[type="checkbox"]:checked::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
display: block;
width: 16px;
height: 16px;
border-radius: 3px;
border-color: #0798ff;
background-color: #0798ff;
}
input[type="checkbox"]:checked:after {
content: "";
position: absolute;
top: 2px;
left: 5px;
display: table;
width: 4px;
height: 8px;
border: 2px solid white;
border-top: 0;
border-left: 0;
border-radius: 0;
background-color: #0798ff;
transform: scale(0.2) rotate(45deg);
animation: checked-select 0.2s ease-in forwards;
}
@keyframes checked-select {
to {
transform: scale(1) rotate(45deg);
}
}
*/
.go-to-page {
display: flex;
align-items: center;
}
#page-number {
width: 100px;
padding: 5px;
/* margin-right: 10px;*/
border: 1px solid #6c63ff;
border-radius: 5px;
}
.back-to-top {
position: fixed;
bottom: 20px; /* 距离底部30px */
right: 20px; /* 距离右侧30px */
display: none; /* 默认隐藏 */
width: 50px;
height: 50px;
background-color: #4d90fe; /* #6c63ff按钮背景颜色 */
color: #fff; /* 文字颜色 */
text-align: center; /* 文字居中 */
line-height: 58px;
border-radius: 50%; /* 圆形按钮 */
text-decoration: none; /* 无下划线 */
font-size: 40px; /* 字体大小 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */
transition: background-color 0.3s; /* 背景颜色变化过渡 */
cursor: pointer;
z-index: 99999;
}
/*
.back-to-top::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #2c64c0;
color: #fff;
padding: 5px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
font-size: 15px;
line-height: 15px;
}
.back-to-top:hover::after {
opacity: 1;
}
*/
.back-to-top:hover {
background-color: #2c64c0; /* 悬停时的背景颜色 */
color: #fff;
}
.delete-button {
background-color: #5e5451 !important;
color: white;
}
.home-list.column.is-4 .box:hover {
background-color: #F1FAFF;
}
.recommend-title {
margin-top: 10px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/* background-color: #f1f1f1;*/
margin-bottom: 25px;
padding: 8px 5px;
/* border-width: 0px 1px 1px 4px;*/
/* border-style: none none none dashed;*/
border-color: #a0a0a0;
border-image: initial
}
.recommend-title span {
/* font-family: PingFang SC;*/
font-style: normal;
font-weight: bold;
font-size: 1.75em;
/* line-height: 40px;*/
text-align: center;
color: #111827;
}
@media (max-width: 768x) {
.recommend-title span {
font-size: 1.5em;
}
}
/*
.recommend-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
*/
.recommend-container {
display: flex;
/* flex-wrap: wrap; */ /* 自动换行 */
gap: 10px;
/* padding: 0 10px; */
box-sizing: border-box;
max-width: 100vw;
margin: 0 auto;
}
.recommend-container .button, .form-submit .button {
/* border-radius: 0px!important;*/
}
.recommend-container a {
flex: 0 1 auto; /* 不放大，允许缩小 */
min-width: 0px; /* 按钮最小宽度 100px */
white-space: nowrap; /* 文字不换行 */
box-sizing: border-box;
color: white;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
text-align: center;
width: 49.3%;
}
/* 媒体查询 - 小屏幕设备 (如手机) */
@media (max-width: 768px) {
.recommend-container {
grid-template-columns: 1fr; /* 在手机上，每个项占满一整行 */
flex-wrap: wrap;
}
.recommend-container a {
width: 100%;
}
}
.recommend-item {
}
.recommend-container .box {
box-sizing: border-box;
display: flex; /* 为 box 设置 flexbox */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 80px; /* 设置一个固定的高度（可根据需求调整） */
margin-bottom: 0.5rem;
}
.recommend-container .is-size-5 {
margin: 0; /* 去掉默认的 margin，以便更好地居中 */
}
.recommend-container .box:hover {
background-color: #F1FAFF;
}
/*
.recommend-container {
display: -webkit-flex; /* 兼容旧版浏览器 */
/* display: flex;
/* -webkit-flex-wrap: wrap; /* 兼容旧版浏览器 */
/* flex-wrap: wrap; /* 允许换行 */
/* justify-content: space-between; /* 在子项之间平分空间 */
/* gap: 10px; /* 设置间距 */
/*}
/*.recommend-item {
flex: 1 0 calc(33.33% - 20px); /* 三列布局，考虑外边距 */
/* margin: 10px; /* 为每个项添加外边距 */
/*}
/* 媒体查询 - 小屏幕设备 (如手机) */
/*@media (max-width: 600px) {
.recommend-item {
flex: 1 0 100%; /* 在手机上，每个项占满一整行 */
/* }
/*}
*/
.column.is-3 {
padding: 0rem;
}
#wnd-menus-side {
display: none; /* 隐藏整个菜单 */
}
/* 当屏幕宽度小于等于768px时（常见的手机宽度），显示菜单 */
@media (max-width: 1024px) {
#wnd-menus-side {
display: block; /* 显示菜单 */
}
}
.table-container-ads {
display: flex;
justify-content: space-between;
margin-top: 5px;
}
@media only screen and (max-width: 600px) {
.table-container-ads {
flex-direction: column;
}
}
.converterads {
margin: 0 5px;
padding: 10px;
/* border: 1px solid #ccc; */
flex: 1;
}
@media only screen and (max-width: 767px) {
.converterads {
margin: 6px 5px;
}
}
.converterads label {
margin-right: 10px;
}
.sticky-ads-ads {
width: 200px;
height: 660px;
position: fixed;
top: 16%;
right: 2%;
/* background-color: #fff;*/
background-color: transparent;
/* background-color: rgba(241, 241, 241, .5); */
border-radius: 8px;
padding: 10px;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
z-index: 1000;
}
.sticky-ads-ads p {
margin: 0;
font-size: 14px;
margin-top: 2px;
text-align: center;
color:#ccc;
}
.ads-ads-close-btn {
position: absolute;
top: 0px;
right: 5px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #888;
}
.ads-ads-close-btn:hover {
color: #f00;
}
@media (max-width: 830px) { /* 按照你的需求调整宽度 */
.sticky-ads-ads {
display: none; /* 在手机上隐藏 */
}
}
@media (max-height: 900px) { /* 按照你的需求调整宽度 */
.sticky-ads-ads {
display: none; /* 在手机上隐藏 */
}
}
@media (min-width: 768px) { /* 按照你的需求调整宽度 */
.box.ads {
display: none; /* 在手机上显示 电脑端隐藏*/
}
}
@media (max-width: 767px) { /* 当屏幕宽度小于768px（手机端） */
.cps-ads-1 {
display: none; /* 在手机端隐藏该元素 */
}
}
@media (min-width: 768px) { /* 当屏幕宽度大于或等于768px（电脑端） */
.cps-ads-2 {
display: none; /* 在电脑端隐藏该元素 */
}
}
@media screen and (min-width: 1024px) {
.container>.navbar .navbar-brand, .navbar>.container .navbar-brand {
margin-left: 0rem; /* top 的偏移 原 -.75rem*/ /* 2024-12-5 原 margin-left: -4.75rem; 2025-9-13前-2.75rem 2026-4-13前-0.75rem*/
}
} /* top 的偏移*/
.select select:not([multiple]) {
padding-right: 2em;
}
#right-sidebar.column.is-3 {
padding: 0.25rem 0rem 0.5rem 0.25rem !important; /* 2025-8-2 晚上 ， 0.45rem 0rem 0.5rem 0.75rem*/
} /* 2024-11-28 晚上 0.75rem*/
@media screen and (max-width: 768px) {
#right-sidebar.column.is-3 {
padding: 0.25rem 0px 0px 0px !important; /* 2025-8-2 晚上 padding: 0.75rem 0rem 0rem 0rem !important; */ /*padding: 0.75rem 10px 0px 10px !important; */
} /* 2024-11-28 晚上 0.75rem*/
}
.main.box table {
border-collapse: collapse;
}
.main.box table,
.main.box td,
.main.box th {
border: 1px solid #ccc;
}
.main.box td {
padding: 0.2em;
}
.column.is-9 > .main.box {
width: 100%;
overflow: auto;
}
.smads {
position: fixed;
bottom: 45px; /* 距离底部30px */
left: 30px; /* 距离右侧30px */
width: 50px;
height: 50px;
background-color: #fff; /* #6c63ff按钮背景颜色 */
color: #999; /* 文字颜色 */
text-align: center; /* 文字居中 */
line-height: 50px;
border-radius: 50%; /* 圆形按钮 */
text-decoration: none; /* 无下划线 */
font-size: 20px; /* 字体大小 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */
transition: background-color 0.3s; /* 背景颜色变化过渡 */
z-index: 99999;
cursor: pointer;
}
.smads:hover {
background-color: #F1FAFF; /* 悬停时的背景颜色 */
color: #000;
}
.sticky-adcps {
/* width: 350px;
height: 250px;*/
width: 325px;
/* height: 250px; */
height: auto;
position: fixed;
bottom: 13.5%;
left: 2.5%;
background-color: #fff;
/* background-color: transparent;*/
/* background-color: rgba(241, 241, 241, .5); */
border-radius: 8px;
padding: 10px;
/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 9999999;
opacity: 1; /* 默认透明度为30% */
transition: opacity 0.3s; /* 添加过渡效果 */
}
@media (max-width: 768px) { /* 可以根据实际需求调整最大宽度 */
.sticky-adcps {
left: 50%; /* 设置左边距为50% */
transform: translateX(-50%); /* 将自身向左移动50%以实现居中 */
}
}
.sticky-adcps:hover {
opacity: 1; /* 鼠标悬停时透明度为100% */
}
.sticky-adcps p {
margin: 0;
font-size: 14px;
margin-top: 2px;
text-align: center;
color:#ccc;
}
.adcps-close-btn {
position: absolute;
top: -4px;
right: 2px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #00aecd; /* #888 */
}
.adcps-close-btn:hover {
color: #f00;
}
.navbar.is-fixed-bottom {
box-shadow: 0 -3px 15px #999;
min-height: 2.5rem;
}
.navbar.is-fixed-bottom, .navbar.is-fixed-top {
left: 0;
position: fixed;
right: 0;
z-index: 30;
}
.navbar.is-fixed-bottom .column {
cursor: pointer;
padding: 0.25rem;
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
}
@keyframes masked-animation2{
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
.table-container-email2 {
display: flex;
justify-content: space-between;
margin-top: 0px; /* 5px */
flex-direction: row !important;
min-height: 50px; /* 根据实际内容调整 */
/* 预设宽度避免重排 */
width: 100%;
contain: layout; /* 限制布局影响 */
gap: 10px;
}
/*
@media only screen and (max-width: 600px) {
.table-container-email2 {
flex-direction: column;
}
}
*/
.converteremail2 {
margin: 0; /* 0 5px */
padding: 0px; /* 10px */
/* border: 1px solid #e2e2e2; */
border: none;
flex: 1;
/* border-radius: 9px; */
min-height: 280px; /* 稍小于父容器 */
/* 防止内容溢出导致布局变化 */
overflow: hidden;
box-sizing: border-box;
}
@media (max-width: 768px) { /* 设定手机端的最大宽度 */
.table-container-email2 {
flex-direction: column!important; /* 变为垂直排列 */
margin-top: -5px !important;
gap: 10px;
}
.converteremail2 {
flex: 0 0 100%; /* 让每个converteremail2占满一整行 */
margin: 0; /* 上下的间距 5px 0 */
min-height: 280px;/* 280px */
}
}
.image-container p b {
font-size: 24px;
margin-top: 5px;
/* color:#a92626!important; */
}
.image-container p:not(:last-child) {
margin-top: 10px;
}
#lastBreadcrumb a {
pointer-events: auto; /* none */
color: #333; /* 可选：改变颜色以表示链接不可用 gray #333*/
text-decoration: none; /* 可选：去掉下划线 */
cursor: pointer;
}
.author-avatar a {
pointer-events: none;
text-decoration: none;
}
.mobile-show {
display: none!important;
}
@media screen and (max-width: 768px) {
.mobile-show {
display: flex!important;
padding-left: 0px;
padding-right: 0px;
}
.mobile-item {
padding-left: 10px; /* 4px */
padding-right: 8px; /* 4px */
}
}
/*
.navbar-item a {
position: relative;
text-decoration: none;
}
.navbar-item a::after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 2px;
background-color: #fff;
transition: width 0.5s ease, left 0.5s ease;
}
.navbar-item a:hover {
color: #fff!important;
}
.navbar-item a:hover::after {
width: 100%;
left: 0;
}
.navbar-start a {
position: relative;
text-decoration: none;
}
.navbar-start a::after {
content: "";
position: absolute;
left: 50%;
bottom: 20px;
width: 0;
height: 2px;
background-color: #fff;
transition: width 0.5s ease, left 0.5s ease;
}
.navbar-start a:hover {
color: #4545ff !important;
}
.navbar-start a:hover::after {
width: 100%;
left: 0;
}
*/
/************2025-8-2*****************/
@media screen and (max-width: 768px) {
#lastBreadcrumb { display: none;
}
}
.column {
padding: 0.25rem 0px; /* padding: .45rem 0px; .25rem 0px */
}
/*
@media screen and (max-width: 768px) {
.column {
padding: .45rem 10px 4px 10px;
}
}
*/
.box {
padding: 0.55rem 0.75rem 0.65rem 0.75rem;
color:#000000;
box-shadow:none;
border-radius: 0px;
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
border: none; /* border: 1px solid rgb(229, 231, 235); 1px solid #eaeaea*/
background-color: #f5f5fa;
}
.post.content.box {
padding: 10px; /* 0.55rem 0.75rem 0.75rem 0.75rem */
}
.breadcrumb {
margin-left: 11px; /* 4px */
}
@media screen and (max-width: 768px) {
.breadcrumb {
margin-left: 11px; /* 5px */
}
}
/*
@media screen and (max-width: 768px) {
.breadcrumb {
margin-left: 10px;
}
} */
.content h1 {
display: block;
margin-block-start: 0em; /* 0.1em -0.2em -0.4*/
margin-block-end: 0.3em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
font-size: 2.0em;
color:#242424;
margin-top: 5px;
}
.content h2 {
display: block;
margin-block-start: 0em;
margin-block-end: 0.7em; /* 0.83em */
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
font-size: 1.75em;
line-height: 1.2;
}
@media (max-width: 768px) {
.content h2 {
font-size: 1.5em;
}
}
.content h3:not(:first-child) {
margin-top: 1.25rem;
}
.content h3 {
display: block;
margin-block-start: 1rem;
margin-block-end: 1rem;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
font-size: 1.25em;
margin-left: 0px; /* 7px */
}
@media screen and (max-width: 768px) {
.content h1 {
font-size: 1.3em;
line-height: 1.3;
}
.content h3 {
font-size: 1.2em;
}
/*
.content h2 {
font-size: 1.2em;
}
.content h3 {
font-size: 1.1em;
}
*/
}
#calculatorBlock {
display: inline-block;
vertical-align: top;
float: left;
/* margin: 0px 10px 20px 0px; /* 3px 20px 20px 5px 3px 10px 20px 0px; */
position: relative;
/* z-index: 100; */
}
@media screen and (max-width: 1000px) {
#calculatorBlock {
display: block;
margin: auto;
float: none;
margin-bottom: 0px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1408px) {
#calculatorBlock {
display: block;
margin: auto;
float: none;
margin-bottom: 0px;
}
}
div#calculatorWrap {
background: #fff; /* #fff #f0f0f0 #f5f5fa*/
/* padding: 0.5em 0.5em 0.5em 0.5em; */
padding: 0em 0em 0.5em 0em;
/* border: 1px solid #00000026; /* #00000026 #e6e7e8*/
/* border: 2px solid #00000026;*/
/* border-radius: 8px; */
font-size: 0.9em;
/* box-shadow: 0px 0px 2px 2px #c9c9c9; #e9e9e9*/
/* box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);*/
/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);*/
/* box-shadow: 0px 0px 3px 3px #e9e9e9; */
border-radius: 5px;
/* box-shadow: 0 4px 20px rgba(44, 62, 80, 0.1);*/
overflow: hidden;
}
div#calculatorWrap {
padding: 0em;
}
.hd {
padding: 8px 0px 8px 8px; /* 10px 0px 10px 10px */
/* background-color: #6b6b6b;/* #9f402a #2a6d95 #34495e*/
color: #fff;
margin-bottom: 5px;
/* background: linear-gradient(135deg, #2a6d95 0%, #34495e 100%);*/
/* background: linear-gradient(135deg, #b64b39 0%, #002d62 100%); /*#4b4b4b #c36969*/
background: #2c64c0;/*#0066ff #eb2200*/
text-align: center;
/* margin: 10px;
border-radius: 5px; */
border-bottom: 1px solid #fbfbfb;
}
.hd h2 {
color: #fff;
margin-block-end: 0em;
font-size: 1.3em; /*20px*/
letter-spacing: 0.5px;
word-break: keep-all;
}
/*
@media screen and (max-width: 425px) {
.hd h2 {
font-size: 18px;
}
}
*/
.form-group {
margin-bottom: 5px;
line-height: 1.5;
}
.form-group label {
display: block;
margin-bottom: 2px;
/* font-weight: bold;*/
font-size: 16px;
color: #000000;/*#2c5aa0*/
}
@media screen and (max-width: 769px) {
.form-group {
display: flex;
justify-content: space-between;
align-items: center;
}
.form-group label {
margin-right: 10px;
min-width: 150px; /* 确保标签占一个固定的最小宽度，你可以根据实际需要调整 */
line-height: 1.2;
font-size: 16px;
}
.form-group .input {
flex-grow: 1; /* 输入框会占用剩余空间 */
}
/* 仅当 label 不是唯一子元素时，加上 width: 40% */
.form-group label:not(:only-child) {
width: 40%;
}
}
.form-group2 {
display: flex;
justify-content: center;
align-items: center;
line-height: 1.5;
}
.form-group3 {
margin-bottom: 5px;
line-height: 1.5;
}
.form-group3 label {
display: block;
margin-bottom: 5px;
/* font-weight: bold;*/
font-size: 16px;
color: #000000;/*#2c5aa0*/
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 16px;
color: #000;
}
.checkbox-label input[type="checkbox"] {
margin: 0;
}
.mass {
color: red;
}
.required {
color: red;
}
#calculatorWrap input[type="number"], input[type="date"], input[type="text"], select, .input {
width: 100%;
padding: 10px 5px;
border: 1px solid #cfcfcf;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
color: #000000;
outline: none;
background: #fff;
/*-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none; */
min-width:50px;
}
#calculatorWrap .input {
border: 1px solid #cfcfcf;
border-radius: 5px;
}
#calculatorWrap .input-group {
display: flex;
gap: 5px;
align-items: center;
}
#calculatorWrap .input-group input {
flex: 1;
}
#calculatorWrap .input-group select {
width: 55px;
flex-shrink: 0;
/* padding: 10px; */
padding: 0px 2px 0px 2px;
border: 1px solid #cfcfcf;
border-radius: 5px;
font-size: 15px;
height: 42px;
background: #fff;
}
#calculatorWrap .button {
/* background-color: #6b6b6b; /* #9f402a */
color: white;
/* padding: 15px 30px; */
border: none;
/* margin: 10px auto;*/
/* width: 100%;*/
/* margin-top: 20px;*/
margin: 10px auto 0;
}
#calculatorWrap input:focus,
#calculatorWrap select:focus {
border-color: #485fc7!important;
box-shadow: 0 0 0 .125em rgba(72,95,199,.25);
}
/* 按钮样式 */
.button {
/* background: linear-gradient(135deg, #2a6d95 0%, #34495e 100%); */
background: #4d90fe; /*#4b4b4b #c36969 #eb2200 #0052cd #ee2020*/
color: white;
border: none;
border-radius: 20px;
font-size: 1.3em;/* 18px */
font-weight: 700;
cursor: pointer;
display: block;
margin: 0px auto 0;
/* width: 60%;*/
/* max-width: 300px;*/
transition: all 0.3s ease;
/* c text-transform: uppercase; apitalize */
letter-spacing: 0.5px;
/* box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3); */
height: 2.2em;
line-height: 1;
padding-top: calc(.45em - 1px);
}
@media screen and (max-width: 768px) {
.button {
font-size: 18px;
}
}
#calculatorWrap .button {
font-size: 1.25em;
}
.button:hover {
background: #2c64c0; /*linear-gradient(135deg, #2086ee 0%, #2086ee 100%)*/
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
color: #fff;
}
.button:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(44, 62, 80, 0.3);
}
#calculatorWrap .button:hover {
background-color: #45a049;
}
.summary {
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
border-left: 4px solid #2c5aa0;
}
.summary span {
font-weight: bold;
color: #2c5aa0;
}
.summary p {
margin: 10px 0;
line-height: 1.6;
}
div#calculatorWrap {
padding: 0em;
}
#calculatorBlock {
/* width: 489px !important;*/
}
/*
@media (max-width: 768px) {
#calculatorBlock {
width: 350px !important;
}
}
*/
@media (max-width: 768px) {
#calculatorBlock {
width: clamp(325px, 100%, 400px) !important;
/* 最小350px，首选100%，最大400px */
}
}
.result-highlight {
font-size: 20px;
font-weight: bold;
color: #4CAF50;
}
.result-highlight2 {
font-size: 20px;
font-weight: bold;
color: #ff8a10;/*#ffce56 #ffa900 */
}
.result-highlight3 {
font-size: 20px;
font-weight: bold;
color: #0aacdd;/* #36a2eb #09addf*/
}
.result-highlight4 {
font-size: 20px;
font-weight: bold;
color: #FF6B6B;
}
.result-highlight5 {
font-size: 20px;
font-weight: bold;
color: #444;
}
.result-highlight6 {
font-size: 20px;
font-weight: bold;
color: #ff982d;/*#ffa900 #f60 */
}
.result-highlight7 {
font-size: 20px;
font-weight: bold;
color: #37c4ef;/* #a0cddb */
}
.result-highlight8 {
font-size: 20px;
font-weight: bold;
color: #fb7474;/* #bd5454 #ed3636 */
}
.result-highlight9 {
font-size: 20px;
font-weight: bold;
color: #b1b1b1;
}
.results-title {
display: flex;
flex-wrap: wrap;
gap: 4px;
/* margin-left: 10px; */
}
.result-item-container {
width: 48%;
border-radius: 0px;
text-align: left;
margin-left: 0px; /* 7px */
/* font-family: Arial, sans-serif; */
}
/*
@media screen and (max-width: 768px) {
.result-item-container {
width: 47.2%;
}
}
*/
.result-title {
font-size: 1.15em; /* 16px */
color: #000000;
display: block;
line-height: 1.34;/*原来没有写*/
}
/*
.content-section {
margin-bottom: 20px;
padding: 0px;
border-radius: 8px;
}
*/
.content-section {
min-height: 100px;
height: auto;
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
font-family: Arial, sans-serif;
/* 防止字体加载导致的布局跳动 */
font-display: swap;
/* 为数字使用等宽特性 */
font-variant-numeric: tabular-nums;
}
.control-buttons, .table-controls {
margin-left: 10px;
text-align: center;
margin: 20px 0;
}
.control-button {
padding: 10px 20px;
margin: 0 5px;
border: 1px solid #1a5ea0;/* #4CAF50 */
background-color: white;
color: #1a5ea0;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.2s ease;
}
.control-button.active {
background-color: #1a5ea0;/* #4CAF50 */
color: white;
}
.control-button:hover {
background-color: #1a5ea0;
color: white;
}
.tftable {
width: 100%;
border-collapse: collapse;
font-family: 'Arial', sans-serif;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 0px;
overflow: hidden;
font-size: 16px;
color: #000;
min-width: 350px;
table-layout: auto;
}
.tftable caption {
font-size: 15px;
font-weight: bold;
padding: 0px;
text-align: center;
background-color: #f0f0f0;
border-bottom: 1px solid #e9ecef;
}
.tftable thead th {
background-color: #3498db;/**/
color: white;
font-weight: bold;
/* padding: 5px 5px; */
text-align: center;
border: 1px solid #ddd;
position: sticky;
top: 0;
}
.tftable th {
font-size: 16px;
background-color: #acc8cc;
border: 1px solid #fff;
color: #333333;
padding: 8px 6px;
text-align: center;
white-space: normal;
word-wrap: break-word;
min-width: auto; /* 取消最小宽度限制 */
max-width: none; /* 取消最大宽度限制 */
width: auto; /* 宽度自适应内容 */
white-space: normal; /* 允许换行 */
word-break: keep-all; /* 保持单词完整，不在单词中间断开 */
overflow-wrap: normal; /* 不强制断词 */
hyphens: none;
line-height: 1.1;
vertical-align: middle!important; /* 垂直居中 */
text-align: center!important;
}
.tftable tr {
background-color: #d4edda;
}
.tftable tr:nth-child(even) {
background-color: #f3f3f3;
}
.tftable tr:hover {
background-color: #f0f8ff;
/* font-weight: bold; */
}
.tftable tr:last-child {
font-weight: bold;
background-color: #f8f9fa;
}
.tftable td {
font-size: 16px;
border: 1px solid #00000026!important;
color: #000000;
padding: 8px 6px;
text-align: center;
white-space: normal;
word-wrap: break-word;
/* min-width: 100px;
max-width: 120px; */
min-width: auto; /* 取消最小宽度限制 */
max-width: none; /* 取消最大宽度限制 */
width: auto; /* 宽度自适应内容 */
line-height: 1.125; /* 1.6 */
}
.tftable td:first-child,
.tftable td:nth-child(2) {
text-align: center;
}
.section {
margin-bottom: 0px;
padding: 0px;
/* border: 1px solid #d5d5d5; /* #e5e7eb */
border-radius: 0px;
/* background-color: #fff; */
background-color: #fff; /* #fff #f0f0f0 #f5f5fa*/
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media screen and (max-width: 769px) {
.grid-container {
gap: 0px;
}
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
.containercalc {
max-width: 800px;
margin: 0 auto;
padding: 10px;
background: #fff; /* #f0f0f0 #f5f5fa*/
/* font-family: Arial, sans-serif;*/
}
p {
margin-bottom: 0px;
color:#000000;
letter-spacing: .3px;
font-size: 1em;
margin-left: 0.75em;
margin-top: 0.5em;
}
.table-container {
display: flex;
gap: 0px;
width: 100%;
max-width: 990px;
margin: 0 auto;
}
.table-item {
flex: 1;
min-width: 0;
}
.table-wrapper {
overflow-x: auto;
/* margin: 10px;
/* border: 1px solid #ccc;
/* padding: 10px; #36a2eb*/
max-width: 990px;
border: 1px solid #00000026;
}
.table-wrapper .tftable th {
background: #2c64c0;/*#36a2eb #5d92b5 #36a2eb #2086ee #0088ff*/
color: #fff;
font-size: 16px;/*13px 15px*/
}
.table-wrapper2 {
overflow-x: auto;
max-width: 990px;
/* border: 1px solid #ccc;
/* padding: 10px; #ff6b6b*/
border: 1px solid #ccc;
}
.table-wrapper2 .tftable th {
background: #ff6b6b;
color: #fff;
font-size: 15px;
}
@media (max-width: 1320px) {
.table-container {
flex-direction: column;
gap: 10px;
}
.table-item {
width: 100%;
}
}
.table-controls {
margin: 10px 0 10px 0;
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
.table-controls h3 {
margin-bottom: 15px;
color: #333;
}
.download-buttons-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.download-button {
padding: 8px 12px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
flex: 1;
min-width: 200px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
.download-button:hover {
background: #45a049;
}
@media (min-width: 768px) {
.download-buttons-container {
flex-wrap: nowrap;
}
.download-button {
flex: 1;
min-width: auto;
}
}
@media (max-width: 768px) {
.download-buttons-container {
flex-wrap: wrap;
}
.download-button {
flex: 1 1 calc(50% - 5px);
min-width: calc(50% - 5px);
font-size: 12px;
padding: 6px 8px;
}
}
#LeftSidebar {
display: none;
}
#LeftSidebar {
width: 728px!important;
height: 90px;
}
@media screen and (min-width: 768px) {
#LeftSidebar {
display: block;
float: none;
overflow: hidden;
width: 728px;
height: 90px;
text-align: center;
margin: 5px auto 15px auto;
vertical-align: middle;
box-sizing: content-box;
}
}
#Top {
display: none;
}
#Mid {
display: none;
}
.pages {
display: table;
margin: 0px auto;
padding: 10px 0 0 0; /* 25px 0 0 0 , 20px 0 0 0 */
text-align: center;
position: relative;
/* z-index: 1; */
z-index: 1;
}
.pages:before {
display: none;/* block*/
position: absolute;
top: 5px;
content: "Advertisement";
font-size: 10px;
font-weight: normal;
line-height: 1.2;
color: #666666;
text-transform: uppercase;
left: 50%;
margin-left: -52px;
z-index: 1;
}
@media screen and (max-width: 768px) {
#Top {
display: block;
margin: 10px auto 10px auto;
text-align: center;
float: none;
width: 320px;
height: 100px;
overflow: hidden;
}
#Mid {
display: block;
margin: 10px auto 10px auto;
text-align: center;
float: none;
width: 336px;
height: 280px;
overflow: hidden;
}
.pages {
display: table;
margin: 0px auto;
padding: 0px 0 0 0; /* 25px 0 0 0 */
text-align: center;
position: relative;
/* z-index: 1; */
z-index: 1;
}
.pages:before {
display: none;
position: absolute;
top: 5px;
content: "Advertisement";
font-size: 10px;
font-weight: normal;
line-height: 1.2;
color: #666666;
text-transform: uppercase;
left: 50%;
margin-left: -52px;
z-index: 1;
}
}
table.tftable th, table.tftable td {
text-align: right;
vertical-align: middle;
}
.cost-breakdown-table {
max-width:500px;
}
.breadcrumb.is-small {
font-size: .75em;
}
a:visited {
color: #069; /*#4545ff*/
}
.navbar-item.mobile-show a {
color: #fff;
}
.breadcrumb.is-small a {
position: relative;
text-decoration: none;
}
.breadcrumb.is-small a:hover {
color: #4545ff!important;
}
.breadcrumb.is-small a::after {
content: "";
position: absolute;
left: 50%;
bottom: 0px;
width: 0;
height: 1px; /* 下划线高度 */
background-color: #4545ff; /* 下划线颜色 */
transition: width 0.2s ease, left 0.2s ease;
}
.breadcrumb.is-small a:hover {
color: #4545ff;
}
.breadcrumb.is-small a:hover::after {
width: 100%;
left: 0;
}
@media screen and (min-width: 768px) {
.auto-loan{
margin-left:40%;
}
}
/* 微动画效果 */
.form-group {
animation: fadeInUp 0.5s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 为不同的表单组添加延迟动画 */
.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }
.checkbox-group {
display: flex;
gap: 20px;
margin-top: 0px; /* 10px */
}
.checkbox-item {
display: flex;
align-items: center;
gap: 5px;
}
.term-inputs {
display: flex;
align-items: center;
gap: 5px;
font-weight: 500;
color: #000;
}
.term-inputs input {
flex: 1;
}
.term-inputs .input {
min-width: 35px; /* width: 60px; */
}
.iconlogo {
display: flex;
justify-content: center;
align-items: center;
/* 如果需要设置容器高度 */
height: 30px; /* 根据需要调整 */
}
.iconlogo a {
display: flex;
align-items: center;
}
#right-sidebar {
position: relative;
transition: transform 0.1s ease-out;
will-change: transform;
}
/* 确保父容器有正确的高度 */
.columns {
align-items: flex-start; /* 防止列拉伸 */
}
.menu-list li a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: keep-all;
}
.content table th {
color: #000000;
}
.content table thead td, .content table thead th {
border-width: 1px 0px 0px 1px;
}
#content a {
color: #1638e3; /* #297bff #2271b1 #485fc7 #5656e5 #069*/
}
.comment-meta.commentmetadata a, .reply a {
color: #F60!important;
}
#content .comments-heading a {
color: #111827; /* 或者其他颜色，如 inherit、#000 等 */
font-size: 1.5rem;
}
#content a:hover,#content a:visited {
color: #1638e3;/* #4545ff #069*/
}
table.tftable td {
padding: 5px 3px; /* 3px */
}
#content {
max-width:1800px!important; /* 1344px */
}
.tabs:not(:last-child){
margin-bottom: 10px;
}
.breadcrumb li+li::before {
content: "";
}
.breadcrumb li::after {
content: ">";
color: #808080;/*#b5b5b5*/
}
.breadcrumb li:last-child::after {
content: "";
}
select {
font-family: Arial, sans-serif;
}
.form-group select {
height:44px;
}
.recommend-container a {
color: #fff!important;
}
.recommend-container a:hover, .recommend-container a:visited {
color: #fff!important;
}
.content pre {
padding: 0.5em 1em;
}
pre {
font-family: monospace;
background: #f9f9f9;
font-size: 18px!important;
color: #000000;/* #0066e9 #004cff*/
}
.is-size-5 {
font-size: 1.05rem !important;
}
code {
background-color: #f5f5f5;
color: #0066e9;
font-size: 1em;
font-weight: 400;
padding: .3em .5em .3em;
}
.recommend-container .button {
text-transform: none!important;
}
/* 为字体图标设置合适的回退 */
.fa, .fas {
font-family: 'Font Awesome 5 Free', Arial, sans-serif;
/* 预留空间防止跳动 */
width: 1em;
height: 1em;
display: inline-block;
}
@font-face {
font-family: 'Font Awesome 5 Free';
src: url('/wp-content/plugins/wnd-frontend-0.9.89.13/static/webfonts/fa-solid-900.woff2') format('woff2');
font-display: swap;
size-adjust: 100%; /* 调整字体大小匹配 */
}
.charts-container {
/* 预设固定尺寸，防止布局跳动 */
min-height: 300px; /* 根据实际图表高度调整 */
width: 100%;
}
.menu-label:not(:last-child) {
margin-bottom: 0.4em;
}
.menu-label {
letter-spacing: 0em;
font-size: 10px;
}
.content h4 {
font-size: 1em;
margin-bottom: .8em;
margin-top: 0.8em;
font-weight: bold !important;
}
.breadcrumb-right {
margin-right: 0px;
}
@media (max-width: 768px) {
.breadcrumb-right {
padding: 0.25rem 4px 0px 0px /* padding: .25rem 4px 0px 0px */
}
}
.download-schedule-btn3 {
margin-bottom: 0px;
}
.download-schedule-btn3, .mortgage-history-item {
padding: 10px 5px;
color: #000;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
border: 1px solid #ccc;
background-color: #fff !important;
}
.px-3.download-schedule-btn3.active, .px-3.download-schedule-btn3:hover {
border: 1px solid #0052ff;
background: #e5e5e5;
color: #0052ff;
}
.download-schedule-btn {
border: none;
cursor: pointer;
margin-bottom:0px;
background: transparent;
opacity: 0.7;
}
.download-schedule-btn2 {
padding: 2px 2px;
/*background: linear-gradient(135deg, #eb2200 0%, #0052cd 100%);*/
color: #3f3f3f;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom:10px;
border: 1px solid #ccc; /*#36363626*/
background-color: #fff !important;
}
.headerUnitB {
/* background: linear-gradient(135deg, #eb2200 0%, #0052cd 100%); */
/* background: linear-gradient(60deg, #eb2200 0%, #0296c3 100%);/*#0066ff*/
color: #1a73e8;
/* padding: 5px 10px;*/
font-size: 16px;
font-weight: bold;
border-radius: 0px;
margin-bottom: 10px;
/* border-color: #e6e7e8;
border-style: solid;
border-width: 1px;*/
}
.headerUnitL {
font-size: 16px;
font-weight: 600;
border-radius: 0px;
margin-bottom: 5px;
}
.sectionUnitB {
background-color: #fff;
padding: 4.5px 10px; /* 6px 10px */
border-bottom: 1px solid #e9e9e9;
/* font-weight: bold;*/
color: #000000; /*#cb6262 4a4a4a*/
cursor: pointer;
}
.sectionUnitB:hover {
background-color: #f7f7ff;
}
.unit-gridB {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 5px 10px 5px 10px;; /*0px 10px 5px 10px;*/
background-color: #fff;
}
.unit-itemB {
padding: 5px 0;
font-size: 14px;
}
.unit-itemB a {
color: #069; /* #7d2d2d */
text-decoration: none;
}
.unit-itemB a:hover {
color: #4545ff; /* #1b5e20 */
text-decoration: underline;
}
.expandedUnitB {
display: grid;
}
.collapsedUnitB {
display: none;
}
#right-sidebar.column.is-5 {
padding: 0.75rem 10px 0px 10px !important;
}
@media screen and (min-width: 769px), print {
#right-sidebar.column.is-5, #right-sidebar.column.is-5-tablet {
flex: none;
width: 100%; /* 89% */
}
}
.content h2:not(:first-child) {
margin-top: 0.7em;
}
input[type="date"] {
font-family: Arial, sans-serif;
cursor:pointer;
}
.box:not(:last-child) {
margin-bottom: 1.25em; /* 12px */
}
strong {
color: #000000;
}
#right-sidebar strong {
color: #ff6b6b;
font-weight: 700;
font-size: 15px;
}
.comment-author-moneycalc a {
pointer-events: none; /* 禁止鼠标事件 */
cursor: default; /* 鼠标指针改为默认，不显得像链接 */
color: inherit; /* 颜色改为继承，避免看起来像可点击链接 */
text-decoration: none; /* 去掉下划线 */
}
#menus-side .button.is- {
height: 2.15em;
}
@media (max-width: 768px) {
#menus-side .button.is- {
height: 40px;
}
}
hr {
background-color: #cfcfcf;
}
#searchform .input {
height: 45px;
}
@media (max-width: 768px) {
#searchform .input {
height: 40px;
}
}
.input-group .input-hint.warning, .term-inputs .input-hint.warning, .input-group .input-hint.error, .term-inputs .input-hint.error {
max-width: 180px;
}
@media screen and (min-width: 768px) {
.input-group .input-hint.warning, .term-inputs .input-hint.warning, .input-group .input-hint.error, .term-inputs .input-hint.error {
max-width: 120px;
}
}
.headerUnitB #searchform .input {
height: 40px;
}
.headerUnitB #searchform .button.is- {
height: 40px;
font-size: 16px;
}
@media screen and (min-width: 1024px) {
.navbar-item.has-dropdown {
align-items: center;
}
}
#top a {
color: #222!important;
}
#top a:visited {
color: #222!important;
}
#top .column.is-3{flex:none;width:25%}
#top .column.is-3 a {
background-color: #fff; /* #f4f8fd */
color: rgb(30, 64, 175)!important;/* */
border-radius: 0px;
padding-left: 0.75rem !important;
padding-right: 0.5rem !important;
margin-left: 0.75rem !important;
margin-right: 0.75rem !important;
margin-bottom: 0.3rem !important;
padding-top: .5rem !important;
padding-bottom: .5rem !important;
border:1px solid rgb(219, 234, 254);
}
#top .column.is-3 a:hover {
background-color: #fff!important;/*#d5e7ff #e7f1ff #f4f8fd*/
color: #069!important;/*#c11293 #092fc1 #0035ff*/
border:1px solid #ccc;
}
#top .column.is-3 a:visited {
background-color: #fff!important;/*#d5e7ff f2f7ff*/
color: #069!important;/*#c11293 #092fc1*/
font-weight: 600;
}
@media screen and (min-width: 769px) {
.modal-card, .modal-content {
margin: 0 auto;
max-height: calc(100vh - 40px);
width: 680px;
}
}
#top .has-dropdown a:hover {
background-color: #fff!important;/*#d5e7ff*/
color: #0296c3!important;/*#c11293*/
}
.navbar-link:not(.is-arrowless):hover::after {
border-color: #2c64c0;/*#0296c3*/
}
#comments textarea#comment:focus {
border-color: #485fc7!important;
box-shadow: 0 0 0 .125em rgba(72,95,199,.25);
}
/*
.menu-list a {
padding: .5em 0em; padding: .5em 0.75em;
}
*/
.navbar-item .icon:only-child, .navbar-link .icon:only-child {
margin-left: 0rem;
margin-right: 0rem;
margin-top: 0em;/*-0.25em -0.1em*/
}
#top .iconfont {
font-size: 15px !important;
}
@media screen and (min-width: 1024px) {
.navbar-dropdown {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 2px 5px rgba(10, 10, 10, .1);
}
}
.container.is-fluid {
padding-left: 2px;
padding-right: 2px;
}
/*
.content h2:not(.hd h2) {
background-color: #eee;
padding: 8px 5px;
margin-block-end: 0em;
border-width: 0px 1px 1px 2px;
border-style: none none none dashed;
border-color: #a0a0a0;
border-image: initial
}
*/
.content h2 {
/* background-color: #f1f1f1;*/
padding: 8px 10px; /*8px 5px*/
margin-block-end: 0em;
/* border-width: 0px 1px 1px 4px; */
/* border-style: none none none dashed; */
border-color: #a0a0a0;
border-image: initial
}
.content .content-section h2 {
background-color: #f1f1f1;
padding: 8px 5px;
margin-block-end: 0em;
color:#fff;
background: #2c64c0;
border: none;
text-align: center;
font-size: 1.22em;
letter-spacing: 0.5px;
word-break: keep-all;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
/* border-radius: 5px; */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content .hd h2 {
background-color: transparent;
padding: 0px;
margin-block-end: 0em;
border-width: 0px;
border-style: none;
border-color: transparent;
border-image: initial
}
.content .comments-header h2 {
/* background-color: transparent;
margin-block-end: 0em;
border-width: 0px;
border-style: none;
border-color: transparent;
border-image: initial; */
margin-bottom: 0px;
}
/* 选择 .content 下第一个 h3 */
.content h3:first-of-type {
margin-left: 0px;
}
.right-box p, .containercalc p, #commentform p, .content-section p {
margin-left: 0px;
margin-top: 0em;
}
.comment-respond{
/* background-color: #f5f5fa;*/
border-radius: 5px;
}
.subtitle {
font-size: 1em;
color: #000;
letter-spacing: .3px;
margin-left: 0px;
margin-top: 12px;
}
@media screen and (min-width: 769px) and (max-width: 1024px), print {
.column.is-3, .column.is-3-tablet {
flex: none;
width: 98%;
}
}
.recommend-container .button {
font-size: 1rem;
background: linear-gradient(135deg, #0296c3 0%, #0296c3 100%)!important;
}
.post-list.box {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) {
.post-list.box .columns.is-multiline.is-tablet.is-marginless .column.is-hidden-mobile {
display: block !important;
}
.post-list.box .columns.is-multiline.is-tablet.is-marginless .column.is-narrow.is-marginless {
display: none !important;
}
}
#right-ads {
will-change: transform;
transition: transform 0.08s linear;
transform: translateY(0);
}
@media screen and (max-width: 768px) {
#right-ads {
transform: none !important;
transition: none;
display: none;
}
}
.navbar-item, .navbar-link {
padding: .5rem .5rem;
}
.icon {
width: 0.9rem;
height:0.9rem;
opacity: 0.7;
}
.icon:hover,
.icon:focus,
.icon.is-active {
opacity: 1;
}
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/*
.input:hover,.select select:hover,.textarea:hover,input:hover,textarea:hover {
border-color:#b5b5b5!important;
}
*/
.input:not(textarea):hover,
.select select:hover,
input:not([type="radio"]):not([type="checkbox"]):hover {
border-color:#b5b5b5 !important;
}
textarea:hover, textarea .input:hover,textarea:focus {
border-color:#485fc7 !important;
}
input[type="radio"]:hover, input[type="checkbox"]:hover{
border-color: #485fc7;
}
/*
@media (min-width: 769px) {
#right-sidebar { align-self: flex-start; }
#right-ads { position: sticky; bottom: 20px; }
}
*/
.content-section .table-wrapper {
border: none;
}
.navbar-link:not(.is-arrowless)::after {
opacity: 1;
transform: rotate(225deg);
}
.navbar-link:not(.is-arrowless) {
padding-right: 2.5em;
}
@media screen and (min-width: 1024px) {
.container>.navbar .navbar-menu, .navbar>.container .navbar-menu {
margin-right: -.15rem;
}
}
@media screen and (min-width: 1408px) {
.container:not(.is-max-desktop):not(.is-max-widescreen) {
max-width: 1815px;
padding: 0 15px;
}
}
@media screen and (min-width: 1216px) {
.container:not(.is-max-desktop) {
max-width: 1300px;
padding: 0 15px;
}
}
@media screen and (min-width: 1308px) {
.container:not(.is-max-desktop) {
max-width: 1500px;
padding: 0 15px;
}
}
p {
margin-left: 1em;
line-height: 1.5;
}
.upload-section {
padding: 10px;
}
/*
.upload-area {
border: 3px dashed #ddd;
border-radius: 5px;
padding: 40px 20px;
text-align: center;
transition: all 0.3s ease;
background: #fafafa;
max-width: 1200px;
margin: auto;
cursor: pointer;
}
*/
.upload-area {
/* 删除原先固定的 border */
/* border: 3px dashed #ddd; */
border-radius: 5px;
padding: 40px 20px;
text-align: center;
transition: all 0.3s ease;
max-width: 1200px;
margin: auto;
cursor: pointer;
/* 将原本的 background 分拆一下，避免覆盖 SVG 背景图 */
background-color: #fff;
/* 使用 SVG 绘制自定义虚线 */
z-index: 100;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='2' y='2' width='calc(100%25 - 4px)' height='calc(100%25 - 4px)' fill='none' rx='13' ry='13' stroke='%23b6b6b6' stroke-width='4' stroke-dasharray='16, 18' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}
.upload-area:hover {
background: #f6f6f6;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='2' y='2' width='calc(100%25 - 4px)' height='calc(100%25 - 4px)' fill='none' rx='13' ry='13' stroke='%23b6b6b6' stroke-width='4' stroke-dasharray='16, 18' stroke-dashoffset='0' stroke-linecap='round'/%3e%3c/svg%3e");
}
/*
.upload-area:hover {
border-color: #4d90fe;
background: #ffff;
}
.upload-area.dragover {
border-color: #4d90fe;
background: #e8f2ff;
transform: scale(1.02);
}
*/
.upload-area:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
}
.upload-icon {
font-size: 4em;
display: block;
margin-bottom: 20px;
}
.upload-content p {
font-size: 1.5em;
color: #242424;
margin-bottom: 20px !important;
font-weight: 700;
}
.upload-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
background: #4d90fe;
color: white;
border: none;
padding: 15px 30px;
border-radius: 99px;
font-size: 1.2em;
cursor: pointer;
font-weight: 700;
transition: transform 0.2s ease;
box-shadow: 0 2px 8px 0 rgba(50, 50, 50, .3);
}
.btn-primary:hover {
transform: translateY(-2px);
background: #2c64c0;
}
.btn-folder {
background: linear-gradient(135deg, #ffffff 0%, #dbdbdb 100%);
color: #878787;
border: none;
padding: 15px 30px;
border-radius: 99px;
font-size: 1.1em;
cursor: pointer;
transition: transform 0.2s ease;
z-index: 9999;
box-shadow: 0 2px 8px 0 rgba(50, 50, 50, .3);
}
.upload-content .icon {
width: 5.5rem;
height: 5.5rem;
}
.btn-folder:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #ffffff 0%, #e7d3d3 100%);
}
.settings-section {
padding: 10px;
background: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
max-width: 400px;
border-radius: 5px;
margin-top: 0px;
transition: all 0.3s ease;
position: relative;
overflow: visible !important;
z-index: 1;
}
.settings-section:hover {
border-color: #4d90fe;
}
.settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.setting-group h3 {
color: #333;
margin-bottom: 15px;
}
.content h3 {
margin-block-start: 0em;
}
.radio-group {
display: flex;
flex-direction: column;
gap: 0px;
}
.radio-group label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 5px;
border-radius: 8px;
transition: background 0.2s ease;
line-height: 1.7;
}
.radio-group label:hover {
background: rgba(102, 126, 234, 0.1);
}
.radio-group input[type="number"] {
margin-left: 10px;
padding: 5px 10px;
border: 2px solid #ddd;
border-radius: 5px;
width: 80px;
}
.radio-group input[type="number"]:enabled {
border-color: #667eea;
}
.btn-process {
width: 100%;
background: #4d90fe;
color: white;
border: none;
padding: 10px;
margin: 0 auto;
border-radius: 99px;
font-size: 1.5em;
cursor: pointer;
font-weight: 700;
transition: transform 0.2s ease;
align-items: center;
display: inline-flex;
justify-content: center;
box-shadow: 0 2px 8px 0 rgba(50, 50, 50, .3);
}
.btn-process:hover {
transform: translateY(-2px);
background: #2c64c0;
}
.btn-process .icon {
width: 1.4rem;
}
.images-section {
padding: 0px;
}
.images-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.image-preview {
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px;
padding: 10px;
text-align: center;
background: white;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .08);
position: relative;
line-height: 1.6;
}
.image-preview:hover {
border: 1px solid #9999a2;
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
.image-preview img {
width: 100%;
height: 160px;
object-fit: contain;
border-radius: 8px;
/* margin-bottom: 10px; */
background: #fff;
}
.image-preview .delete-btn .icon {
position: absolute;
top: 0px;
right: 0px;
background: #ddd;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
opacity: 1;
}
.image-preview .delete-btn .icon:hover {
background: #4d90fe;
border: 1px solid #4d90fe;
opacity: 1;
}
.image-preview:hover .delete-btn .icon {
background: #4d90fe;
border: 1px solid #4d90fe;
opacity: 1;
}
.image-info {
color: #47474f;
font-size: 12px;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.image-preview:hover .image-info-span {
color: #222;
background: #f8f9fa;
font-weight: bold;
}
.progress-section {
padding: 10px;
text-align: center;
}
.progress-container {
max-width: 400px;
margin: 0 auto;
}
.progress-bar {
width: 100%;
height: 40px;
background: #eee;
border-radius: 20px;
overflow: hidden;
margin-bottom: 20px;
margin-top: 12px;
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #28a745 0%, #28a745 100%);
/*#20c997*/
transition: width 0.3s ease;
border-radius: 99px;
}
.results-section {
padding: 0px;
}
.results-section h2 {
text-align: center;
color: #242424;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
margin-bottom: 10px;
}
.result-item {
/* background: white;*/
border-radius: 8px;
/* padding: 10px;*/
/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);*/
text-align: center;
/* border: 1px solid rgba(0, 0, 0, 0); */
line-height: 1.6;
}
.result-item:hover {
/* border: 1px solid #9999a2;*/
-webkit-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
.result-image {
margin-bottom: 0px;
}
.result-image img {
width: 100%;
height: 150px;
object-fit: contain;
border-radius: 8px;
margin-bottom: 0px;
background: #fff;
}
.result-image .filename {
color: #47474f;
margin-bottom: 0px;
word-break: break-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
font-size: 12px;
}
.result-image .dimensions {
color: #47474f;
font-size: 12px;
margin-bottom: 0px;
}
.result-stats {
background: #f8f9fa;
padding: 0px;
border-radius: 0px;
margin-bottom: 0px;
}
.stat-row {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 8px;
font-size: 0.75rem;
gap: 10px;
}
.stat-label {
color: #47474f;
}
.stat-value {
font-weight: bold;
color: #333;
}
.size-reduction {
font-weight: bold;
}
.size-reduction.positive {
color: #28a745;
}
.size-reduction.negative {
color: #dc3545;
}
.result-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.format-info {
color: #47474f;
font-size: 12px;
margin: 0;
}
.btn-download-single {
color: white;
border: none;
padding: 0px 2px;
border-radius: 20px;
font-size: 1rem;
cursor: pointer;
transition: transform 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
}
.btn-download-single:hover {
transform: translateY(-2px);
background-color: #f1f1f1;
}
.btn-download {
display: block;
/* width: 200px; */
margin: 0 auto;
background: #4d90fe;
color: white;
border: none;
font-weight: 700;
padding: 15px;
border-radius: 99px;
font-size: 1.5em;
cursor: pointer;
margin-bottom: 25px;
margin-top: 15px;
transition: transform 0.2s ease;
box-shadow: 0 2px 8px 0 rgba(50, 50, 50, .3);
}
.btn-download:hover {
transform: translateY(-2px);
background-color: #2c64c0;
}
.btn-download .icon {
width: 1.4rem;
height: 1.4rem;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.section-header h3 {
margin: 0;
color: #333;
}
.btn-clear {
background: #4d90fe;
color: white;
border: none;
/*padding: 8px 16px; */
border-radius: 99px;
cursor: pointer;
font-size: 0.9em;
font-weight: bold;
transition: background 0.2s ease;
align-items: center;
display: inline-flex;
justify-content: center;
margin-top: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.btn-clear:hover {
background: #2c64c0;
}
.btn-clear .icon {
width: 2rem;
height: 2.5rem;
}
.btn-more .icon {
background: #4d90fe;
color: white;
border: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 99px;
cursor: pointer;
font-size: 0.9em;
font-weight: bold;
transition: background 0.2s ease;
align-items: center;
display: inline-flex;
justify-content: center;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.btn-more .icon:hover {
background: #2c64c0;
}
.btn-return .icon {
color: white;
border: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 99px;
cursor: pointer;
font-size: 0.9em;
font-weight: bold;
transition: background 0.2s ease;
align-items: center;
display: inline-flex;
justify-content: center;
}
.btn-return .icon:hover {
transform: translateY(-2px);
}
#progressText {
background: #4d90fe;
color: #fff;
padding: 8px 16px;
border-radius: 99px;
font-size: 1.5rem;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.main-layout {
display: flex;
gap: 20px;
align-items: flex-start;
margin-top: 20px;
}
.upload-section {
flex: 1;
padding: 26px 26px;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
max-width: 720px;
background: #fff;
margin: auto;
transition: all 0.3s ease;
}
.upload-section:hover {
background: #f6f6f6;
}
.settings-section {
padding: 15px;
background: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
max-width: 400px;
width: 100%;
border-radius: 5px;
margin-top: 0px;
transition: all 0.3s ease;
}
/* 响应式布局 */
@media (max-width: 768px) {
.content h1 {
margin-top: 0px;
}
.btn-primary {
margin-bottom: 10px;
}
.upload-content p {
font-size: 1.1em;
margin-bottom: 10px !important;
line-height: 1.5;
}
.upload-content .icon {
width: 4.3rem;
height: 4.3rem;
display: none;
}
.result-images {
flex-direction: column;
}
.main-layout {
flex-direction: column;
margin-top: 0px;
}
.upload-section,
.settings-section {
flex: none;
width: 100%;
}
.images-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 2fr));
}
.results-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 2fr));
}
.stat-row {
font-size: 0.6rem;
}
}
@media (max-width: 480px) {
.upload-buttons {
flex-direction: column;
align-items: center;
}
.btn-primary,
.btn-folder {
width: 200px;
}
}
.hero-section {
text-align: center;
padding: 40px 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
margin-bottom: 40px;
}
.hero-section h1 {
color: #333;
margin-bottom: 20px;
font-size: 2.5em;
font-weight: 700;
}
.hero-section p {
color: #666;
font-size: 1.2em;
max-width: 800px;
margin: 0 auto 30px;
line-height: 1.6;
}
.features-section {
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 30px;
}
.feature-item {
background: white;
padding: 25px;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: center;
}
.feature-item h3 {
color: #333;
margin-bottom: 15px;
font-size: 1.3em;
}
.feature-item p {
color: #666;
line-height: 1.5;
}
.how-it-works {
background: #f8f9fa;
padding: 40px 20px;
margin: 40px 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.step-item {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
}
.step-number {
background: linear-gradient(135deg, #375bff 0%, #35aad7 100%);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin: 0 auto 15px;
}
.upload-icon {
width: 250px;
height: 81px;
display: block;
margin: 0 auto 20px;
color: #667eea;
}
.upload-more-badge {
position: absolute;
top: 2px;
right: -6px;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 999px;
background: #fff;
color: #4d90fe;
font-size: 12px;
font-weight: 700;
line-height: 19px;
text-align: center;
border: 2px solid #4d90fe;
}
.upload-more-badge:hover {
color: #2c64c0;
border: 2px solid #2c64c0;
}
.btn-more {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.work-area {
display: flex;
gap: 20px;
align-items: flex-start;
margin-top: 0px;
}
.work-area .images-section {
flex: 1;
min-width: 0;
}
.work-area .settings-section {
width: 100%;
max-width: 400px;
flex: 0 0 400px;
}
@media (max-width: 768px) {
.work-area {
flex-direction: column;
margin-top: 0px;
}
.work-area .images-section,
.work-area .settings-section {
width: 100%;
max-width: 100%;
flex: none;
}
}
@media (min-width: 769px) {
.work-area .settings-section {
position: sticky;
top: 20px;
/* height: 80vh; */
display: flex;
flex-direction: column;
overflow: hidden;
}
.work-area .settings-section .settings-grid {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.work-area .settings-section .btn-process {
margin-top: auto;
flex-shrink: 0;
}
}
@media (max-width: 768px) {
.work-area .settings-section {
position: static;
height: auto;
display: block;
overflow: visible;
}
.upload-area {
padding: 20px 20px;
}
}
.is-hidden {
display: none !important;
}
.progress-bar {
width: 100%;
height: 40px;
background: #eee;
border-radius: 20px;
overflow: hidden;
margin-bottom: 20px;
position: relative;
margin-top: 12px;
}
.progress-fill {
height: 100%;
background: linear-gradient(135deg, #28a745 0%, #28a745 100%);
transition: width 0.3s ease;
border-radius: 99px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
min-width: 60px;
}
#progressPercent {
font-size: 28px;
white-space: nowrap;
}
.option-input {
margin: 4px 0 10px 5px;
}
.option-input input[type="number"] {
padding: 5px 10px;
outline: none;
border: 1px solid #667eea;
border-radius: 5px;
width: 100px;
}
.pulse:not(:disabled) {
position: relative;
z-index: 9;
overflow: visible;
}
.pulse:not(:disabled)>* {
position: relative;
z-index: 2;
}
.pulse:not(:disabled)::after {
content: "";
position: absolute;
inset: 0;
border-radius: 99px;
box-shadow: 0 0 0 0 rgba(98, 140, 229, .6);
animation: pulse 4s cubic-bezier(.66, 0, 0, 1) infinite;
animation-delay: 2s;
pointer-events: none;
z-index: 1;
}
.pulse:not(:disabled):hover::after {
animation: none;
}
/* pulse 关键帧 */
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(98, 140, 229, .6);
box-shadow: 0 0 0 0 rgba(98, 140, 229, .6)
}
30% {
-webkit-box-shadow: 0 0 0 60px rgba(98, 140, 229, .1);
box-shadow: 0 0 0 60px rgba(98, 140, 229, .1)
}
40% {
-webkit-box-shadow: 0 0 0 60px rgba(98, 140, 229, .1);
box-shadow: 0 0 0 60px rgba(98, 140, 229, .1)
}
to {
-webkit-box-shadow: 0 0 0 0 rgba(98, 140, 229, .1);
box-shadow: 0 0 0 0 rgba(98, 140, 229, .1)
}
}
/*
@keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(98, 140, 229, .6);
box-shadow: 0 0 0 0 rgba(98, 140, 229, .6)
}
30% {
-webkit-box-shadow: 0 0 0 50px rgba(98, 140, 229, .1);
box-shadow: 0 0 0 50px rgba(98, 140, 229, .1)
}
40% {
-webkit-box-shadow: 0 0 0 50px rgba(98, 140, 229, .1);
box-shadow: 0 0 0 50px rgba(98, 140, 229, .1)
}
to {
-webkit-box-shadow: 0 0 0 0 rgba(98, 140, 229, .1);
box-shadow: 0 0 0 0 rgba(98, 140, 229, .1)
}
}
*/
:root {
--pulse-size: 20px;
}
@media (max-width: 768px) {
:root {
--pulse-size: 20px;
}
}
@keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(98, 140, 229, .6);
box-shadow: 0 0 0 0 rgba(98, 140, 229, .6);
}
30%,
40% {
-webkit-box-shadow: 0 0 0 var(--pulse-size) rgba(98, 140, 229, .1);
box-shadow: 0 0 0 var(--pulse-size) rgba(98, 140, 229, .1);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(98, 140, 229, .1);
box-shadow: 0 0 0 0 rgba(98, 140, 229, .1);
}
}
.faq-list {
margin-top: 16px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0);
/* box-shadow: 0 0 8px 0 rgba(0, 0, 0, .08); */
}
.faq-item {
border-bottom: 1px solid #dfe8f0;
background: transparent;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
width: 100%;
border: none;
background: transparent;
padding: 16px 18px;
text-align: left;
font-size: 1rem;
font-weight: 700;
color: #222;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
justify-content: space-between;
gap: 8px;
white-space: normal;
}
.faq-text {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: normal;
text-align: left;
}
.faq-question:hover {
background: #f5f5f8;
}
.faq-icon {
font-size: 1.5rem;
color: #4d90fe;
margin-left: 14px;
}
.faq-answer {
display: none;
padding: 0 20px 18px;
color: #000;
line-height: 1.65;
background: transparent;
}
.faq-item.active .faq-answer {
display: block;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
}
/*
.language__list {
padding: .5rem .5rem;
align-items: center;
display: flex;
}
*/
.language {
position: relative;
display: inline-block;
padding: .5rem .5rem;
align-items: center;
}
.language__button {
display: inline-flex;
align-items: center;
gap: 10px;
height: 40px;
/* padding: 0 12px; */
border: none;
border-radius: 6px;
background: #fff;
color: #363636;/*#2563eb*/
cursor: pointer;
line-height: 1;
font-size: 16px;
font-weight: 600;
}
.language__button:hover {
border: none;/*1px solid #b5b5b5*/
}
.language__button::after {
content: "";
width: 9px;
height: 9px;
border-right: 3px solid currentColor;
border-bottom: 3px solid currentColor;
transform: rotate(45deg);
margin-top: -3px;
font-weight: 600;
}
/*
.language__text {
margin-top: -3px;
}
*/
.language__list {
display: none;
position: absolute;
top: calc(100% + 8px);
left: -100%;
z-index: 1000;
min-width: 120px;
margin: 0;
padding: 12px 10px;
list-style: none;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
.language.is-open .language__list {
display: grid;
}
.language__title {
display: block;
padding: 4px 8px;
color: #111827;
text-decoration: none;
white-space: nowrap;
}
.language__title:hover,
.language__title_selected {
background: #f3f4f6;
border-radius: 5px
}
.faq-container{
margin: 40px auto 10px auto;
max-width: 900px;
}
.unit-itemB.current-menu-item a {
font-weight: 700;
color: #2b6df8;
}
.is-dropdown {
position: relative;
display: inline-block;
padding: .5rem .5rem;
align-items: center;
}
.is-dropdown__button {
display: inline-flex;
align-items: center;
gap: 10px;
height: 32px;
/* padding: 0 12px; */
border: none;
border-radius: 6px;
background: #fff;
color: #333;/*#2563eb*/
cursor: pointer;
font-size: 1rem;
font-weight: 600;
}
.is-dropdown__button:hover {
color: #4d90fe;
}
.is-dropdown__button::after {
content: "";
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -3px;
}
.is-dropdown__button::after:hover {
color: #4d90fe;
}
/*
.is-dropdown__text {
margin-top: -3px;
}
*/
.is-dropdown__list {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 1000;
min-width: 360px;
margin: 0;
padding: 16px 10px;
list-style: none;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.is-dropdown.is-open .is-dropdown__list {
display: grid;
}
.is-dropdown__title {
display: block;
padding: 4px 8px;
color: #111827;
text-decoration: none;
white-space: nowrap;
}
.is-dropdown__title:hover,
.is-dropdown__title_selected {
background: #f3f4f6;
border-radius: 5px
}
.upload-area::after {
display: block;
margin-top: 10px;
font-size: 0.75em;
color: #242424;
}
.faq-container p {
line-height: 1.8;
}
/*
.faq-container h2 {
padding: 8px 0px;
margin-block-end: 0em;
border-color: #a0a0a0;
border-image: initial;
display: block;
margin-block-start: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
font-size: 1.75em;
line-height: 1.2;
color: #111827;
margin-bottom: .5714em;
}
*/
.image-preview-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
align-items: center;
justify-content: center;
padding: 40px;
background: rgba(0, 0, 0, 0.82);
}
.image-preview-modal.is-active {
display: flex;
}
.image-preview-large {
max-width: 92vw;
max-height: 86vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.image-preview-close {
position: fixed;
top: 18px;
right: 24px;
z-index: 1;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(255, 255, 255, 0.18);
font-size: 34px;
line-height: 40px;
cursor: pointer;
}
.image-preview-close:hover {
background: rgba(255, 255, 255, 0.3);
}
.image-preview-title {
position: fixed;
left: 24px;
right: 24px;
bottom: 18px;
color: #fff;
text-align: center;
font-size: 14px;
word-break: break-all;
}
.image-preview-open {
overflow: hidden;
}
.result-image img,
.image-preview img {
cursor: zoom-in;
}
.format-group .format-radio-group {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* gap: 12px;*/
align-items: stretch;
}
.format-group .format-radio-group label {
margin: 0;
display: flex;
}
.format-group .format-radio-group label input[type="radio"] {
/* display: none;*/
}
.format-group .format-radio-group label span {
/* width: 100%; */
display: flex;
align-items: center;
justify-content: center;
/* min-height: 44px;
padding: 10px 12px;
border: 1px solid #dcdfe6;
border-radius: 10px;
background: #fff;*/
color: #333;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-sizing: border-box;
text-align: center;
}
.format-group .format-radio-group label span:hover {
border-color: #4d90fe;
color: #4d90fe;
}
.format-group .format-radio-group label input[type="radio"]:checked + span {
/* background: #4d90fe;
border-color: #4d90fe;
color: #fff;
box-shadow: 0 4px 12px rgba(77, 144, 254, 0.18); */
color: #4d90fe;
}
@media (max-width: 640px) {
.format-group .format-radio-group {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.compare-section {
max-width: 1100px;
margin: 30px auto 30px;
box-sizing: border-box;
}
.compare-container {
width: 100%;
}
.compare-title {
text-align: center;
font-size: 32px;
font-weight: 700;
margin: 0 0 10px;
color: #222;
}
.compare-desc {
text-align: center;
font-size: 16px;
color: #666;
margin: 0 0 24px;
}
/*
.image-compare {
position: relative;
width: 100%;
max-width: 1024px;
height: 580px;
margin: 0 auto;
overflow: hidden;
border-radius: 18px;
background: #eee;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.compare-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
*/
.image-compare {
position: relative;
width: 100%;
max-width: 928px;
aspect-ratio: 16 / 10;
margin: 0 auto;
overflow: hidden;
background: #eee;
user-select: none;
-webkit-user-select: none;
border-radius: 18px;
user-select: none;
touch-action: none;
}
.compare-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* object-fit: contain; */
object-position: center;
display: block;
user-select: none;
pointer-events: none;
}
.compare-overlay {
position: absolute;
inset: 0 auto 0 0;
width: 50%;
height: 100%;
overflow: hidden;
z-index: 2;
}
.compare-img-front {
width: 100%;
height: 100%;
object-fit: cover;
}
.compare-divider {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: rgba(255, 255, 255, 0.85);
z-index: 3;
pointer-events: none;
}
.compare-handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 46px;
height: 46px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
.arrow.left {
border-right: 8px solid #222;
}
.arrow.right {
border-left: 8px solid #222;
}
.compare-label {
position: absolute;
top: 16px;
z-index: 4;
padding: 8px 14px;
font-size: 15px;
font-weight: 600;
color: #222;
background: rgba(255, 255, 255, 0.92);
border-radius: 10px;
line-height: 1;
}
.compare-label-left {
left: 16px;
}
.compare-label-right {
right: 16px;
}
.compare-range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: ew-resize;
z-index: 5;
margin: 0;
}
@media (max-width: 768px) {
.compare-title {
font-size: 24px;
}
.compare-desc {
font-size: 14px;
}
.image-compare {
height: 360px;
border-radius: 14px;
}
.compare-label {
font-size: 13px;
padding: 7px 12px;
}
.compare-handle {
width: 40px;
height: 40px;
}
}
@media (max-width: 480px) {
.image-compare {
height: 260px;
}
}
.subtitle-local-free {
font-size: 18px;
line-height: 1.6;
}
.free-badge {
display: inline-block;
background: #4d90fe;
color: white;
border: none;
padding: 6px 8px;
border-radius: 99px;
line-height: 1;
font-weight: 700;
}
.compare-container {
max-width: 980px;
margin: 0 auto;
}
.compare-title {
font-size: 42px;
line-height: 1.2;
margin-bottom: 14px;
color: #333;
}
.compare-desc {
max-width: 800px;
margin: 0 auto 28px;
font-size: 18px;
line-height: 1.7;
color: #000000;
}
.compare-tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 26px;
}
.compare-tab {
border: none;
background: transparent;
color: #2d3748;
font-size: 16px;
font-weight: 700;
padding: 12px 28px;
border-radius: 99px;
cursor: pointer;
transition: all 0.2s ease;
}
.compare-tab.active,
.compare-tab:hover {
background: #e5e5e5;
color: #111827;
}
.image-compare {
position: relative;
width: 100%;
max-width: 928px;
aspect-ratio: 16 / 10;
margin: 0 auto;
overflow: hidden;
border-radius: 18px;
border: 1px solid #e5e7eb;
background: #f7f7f7;
}
.compare-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
/* object-fit: contain; */
object-position: center;
display: block;
user-select: none;
pointer-events: none;
}
.compare-overlay {
position: absolute;
inset: 0 auto 0 0;
width: 50%;
overflow: hidden;
z-index: 2;
}
.compare-img-front {
width: 928px;
max-width: none;
}
.compare-label {
position: absolute;
top: 16px;
z-index: 5;
background: rgba(17, 24, 39, 0.72);
color: #fff;
padding: 7px 12px;
border-radius: 99px;
font-size: 13px;
font-weight: 700;
}
.compare-label-left {
left: 16px;
}
.compare-label-right {
right: 16px;
}
.compare-divider {
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background: #fff;
z-index: 6;
transform: translateX(-50%);
pointer-events: none;
}
.compare-handle {
position: absolute;
top: 50%;
left: 50%;
width: 46px;
height: 46px;
border: 2px solid #fff;
border-radius: 50%;
background: rgba(0, 0, 0, 0.22);
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
/*
.arrow {
width: 9px;
height: 9px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
}
.arrow.left {
transform: rotate(-45deg);
}
.arrow.right {
transform: rotate(135deg);
}
*/
.arrow {
display: inline-block;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
}
.arrow.left {
border-right: 8px solid #fff;
}
.arrow.right {
border-left: 8px solid #fff;
}
.compare-range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: ew-resize;
z-index: 8;
}
.compare-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 26px;
}
.compare-action {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #2563eb;
background: #fff;
border: 1px solid #dbeafe;
border-radius: 99px;
padding: 10px 16px;
font-size: 15px;
font-weight: 700;
transition: all 0.2s ease;
}
.compare-action:hover,
.compare-action.active {
background: #4d90fe;
color: #fff;
border-color: #4d90fe;
}
.go2img-copy-section {
padding: 30px 0px 0px;
border-radius: 18px;
margin: 30px auto 30px;
}
.go2img-copy-container {
max-width: 980px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
text-align: left;
align-items: center;
}
.go2img-copy-text h2 {
font-size: 32px;
line-height: 1.25;
margin-bottom: 18px;
color: #333;
}
.go2img-copy-text p {
font-size: 17px;
line-height: 1.8;
color: #000;
margin-bottom: 14px;
}
@media (max-width: 768px) {
.compare-title {
font-size: 32px;
}
.compare-tabs {
gap: 8px;
}
.compare-tab {
padding: 10px 18px;
}
.compare-img-front {
width: calc(100vw - 32px);
}
.go2img-copy-container {
grid-template-columns: 1fr;
gap: 28px;
}
.go2img-copy-text h2 {
font-size: 26px;
}
}
.go2img-preview-switcher {
margin-top: 24px;
}
.go2img-preview-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 16px;
}
.go2img-preview-tab {
padding: 10px 16px;
border: 1px solid #ddd;
border-radius: 999px;
background: #fff;
cursor: pointer;
transition: all .2s ease;
}
.go2img-preview-tab.active {
background: #111;
color: #fff;
border-color: #111;
}
.go2img-preview-image-wrap {
width: 100%;
}
.go2img-preview-img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
.faq-answer p {
margin-left: 0;
}
/* */
#calculatorWrap input[type="text"], input[type="text"],input[type="text"], input[type="date"], select, .input {
width: 100%;
padding: 10px 5px;
border: 1px solid #cfcfcf;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
color: #000000;
outline: none;
FONT-WEIGHT: 600;
}
select {
FONT-WEIGHT: 500;
}
#calculatorWrap input[type="text"], input[type="text"], input[type="text"]{
border-radius: 0px;
}
#calculatorWrap input[type="number"] {
FONT-WEIGHT: 600;
}
.form-group3 label {
margin-bottom: 10px;
}
#calculatorWrap .button {
margin: 10px AUTO 20PX AUTO;
}
.input-group.grid-4 {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px;
width: 100%;
}
.input-group.grid-4 > * {
width: 100%;
box-sizing: border-box;
text-align: center;
}
.form-group3 label {
margin-bottom: 2px;
border-radius: 0px;
/* border: 1px solid #cfcfcf; */
}
.form-group2 {
margin-bottom: 2px;
justify-content: center;
}
.download-schedule-btn2 {
margin-bottom: 0px;
}
.tftable tr:last-child {
font-weight: 500;
}
.grid-container {
gap: 0px 10px;
}
.content table thead td, .content table thead th {
color: #000;
}
.content table td, .content table th {
vertical-align: middle;
}
.input-group.grid-3 {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px;
width: 100%;
}
table.tftable th, table.tftable td {
text-align: center;
}
.content table:not(.tftable) td,
.content table:not(.tftable) th {
border: none;
padding: .07em .07em;
}
.mortgage-rate-tabs {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin: 20px 0 10px;
}
.mortgage-rate-tab {
border: 1px solid #1a5ea0;
background: #fff;
color: #1a5ea0;
padding: 10px 18px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.2s ease;
}
.mortgage-rate-tab:hover,
.mortgage-rate-tab.active {
background: #1a5ea0;
color: #fff;
}
.table-wrapper {
width: 100%;
overflow-x: auto;
margin-top: 10px;
}
.tftable {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.tftable caption {
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.tftable th,
.tftable td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
.tftable th {
background: #1a5ea0;
color: #fff;
}
.tftable tbody tr:nth-child(even) {
background: #f7f7f7;
}
.tftable tbody tr:hover {
background: #eef6ff;
}
@media (max-width: 767px) {
#mapChart {
height: 520px !important;
}
.mortgage-rate-tab {
font-size: 14px;
padding: 8px 12px;
}
}
#nationalRate,#additionalRate {
margin: 0px 0px 10px 0;
}
.national-rate-row.single {
grid-template-columns: 1fr;
}
.national-rate-row.single .national-rate-item + .national-rate-item {
border-left: none;
}
.national-rate-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 14px;
}
.national-rate-card {
border-bottom: 1px solid #ddd;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #fff;
overflow: hidden;
}
.national-rate-source {
padding: 4px 14px;
font-size: 16px;
font-weight: 700;
color: #333;
background: #f7f7f7;
border-bottom: 1px solid #ddd;
}
.national-rate-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.national-rate-item {
padding: 14px 18px;
}
.national-rate-item + .national-rate-item {
border-left: 1px solid #ddd;
}
.national-rate-label {
font-size: 16px;
font-weight: 700;
color: #7a7a7a;
margin-bottom: 8px;
line-height: 1.5;
}
.national-rate-value {
font-size: 24px;
font-weight: 700;
color: #111;
}
.national-rate-change {
margin-left: 4px;
font-size: 20px;
font-weight: 500;
}
.national-rate-change.up {
color: #d71920;
}
.national-rate-change.down {
color: #149447;
}
.national-rate-change.flat {
color: #666;
}
@media (max-width: 900px) {
.national-rate-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.national-rate-label {
font-size: 16px;
}
.national-rate-value {
font-size: 20px;
}
.national-rate-change {
font-size: 16px;
}
}
#loanAmountInput {
width: 100%;
border: none;
padding: 10px 12px;
font-size: 18px;
outline: none;
}
.loan-amount-help {
margin-top: 8px;
color: #666;
font-size: 13px;
}
.monthly-payment-text {
display: block;
margin-top: 4px;
font-size: 13px;
color: #555;
}
.monthly-payment-strong {
color: #333;
}
.national-monthly-payment {
margin-top: 6px;
font-size: 13px;
color: #555;
}
.national-monthly-payment strong {
color: #333;
}
.rate-watch-case-study {
margin-top: 18px;
padding: 16px 18px;
border: 1px solid #c9dced;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 8px rgba(26, 94, 160, 0.08);
}
.case-study-label {
display: inline-block;
margin-bottom: 8px;
padding: 4px 9px;
border-radius: 999px;
background: #1a5ea0;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rate-watch-case-study h3 {
margin: 0 0 10px;
color: #1a5ea0;
font-size: 20px;
line-height: 1.35;
}
.rate-watch-case-study p {
margin: 0 0 10px;
}
.rate-watch-case-study p:last-child {
margin-bottom: 0;
}
.case-study-impact {
padding: 12px 14px;
border-left: 4px solid #d71920;
background: #fff7f7;
color: #222;
font-size: 17px;
}
.case-study-impact strong {
color: #d71920;
}
.case-study-note {
color: #666;
font-size: 13px;
}
@media (max-width: 767px) {
.rate-watch-case-study {
padding: 14px;
}
.rate-watch-case-study h3 {
font-size: 18px;
}
.case-study-impact {
font-size: 15px;
}
}
.national-rate-source .rate-source-meta {
font-size: 13px;
color: #555;
font-weight: 500;
margin-left: 4px;
}
/*.cost-breakdown-table {
max-width: 486px;
}*/
#displayResults {
margin-top: 5px!important;
/* border-width: 0px 1px 1px 2px;*/
/* border-style: none none none dashed;*/
border-color: #a0a0a0;
border-image: initial;
/* padding:10px;*/
font-size: 16px;
/* background-color: #eee;*/
}
.highlight2 {
color:#ff6b6b;
}
.first-table-container {
/* border-width: 0px 1px 1px 2px;*/
/* border-style: none none none dashed;*/
border-color: #a0a0a0;
border-image: initial;
/* background-color: #eee;*/
contain: layout;
width: 100%;
display: flex;
}
@media (max-width: 768px) {
.first-table-container {
gap: 4px;
flex-wrap: wrap;
}
}
.first-table-container .result-item-container {
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
.content table.tftable2 td, .content table.tftable2 th {
vertical-align: middle;
text-align: center;
}
.tftable2 thead th {
background-color: #0296c3;
color: white!important;
}
.table-wrapper .tftable caption {
color: #2c64c0;
cursor: pointer;
text-decoration: underline;
}
/* =========================
三栏布局
========================= */
.mortgage-page-layout {
display: grid;
grid-template-columns: 1050px minmax(0, 1fr) 700px;
gap: 10px;
align-items: start;
max-width: 1800px;
margin: 0 auto;
/* padding: 10px;*/
}
@media (max-width: 768px) {
.mortgage-page-layout {
width: clamp(325px, 100%, 400px) !important;
}
}
.mortgage-right {
position: sticky;
top: 16px;
align-self: start;
/* max-height: calc(100vh - 32px);*/
background: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.mortgage-left {
top: 16px;
align-self: start;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.mortgage-center {
min-width: 0;
}
/* 左侧计算器宽度 */
#calculatorBlock {
width: 100%;
}
#calculatorWrap {
width: 100%;
}
/* 右侧利率卡片 */
.rate-card {
background: #fff;
border: 1px solid #d9e2ef;
border-radius: 12px;
padding: 18px;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.rate-card h3 {
margin-top: 0;
margin-bottom: 16px;
font-size: 18px;
}
.rate-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #edf1f7;
}
.rate-item strong {
color: #0b62b4;
}
.rate-note {
margin-top: 14px;
font-size: 13px;
color: #6b7280;
line-height: 1.5;
}
/* =========================
Tab 样式
========================= */
.mortgage-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
}
.mortgage-tab {
border: 1px solid #eaeaea;
background: #fff;
color: #2d3748;
padding: 8px 12px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
border-radius: 99px;
}
.mortgage-tab.active, .mortgage-tab:hover {
border: 1px solid #fff;
background: #e5e5e5;
color: #0052ff;
}
/* =========================
$ 单输入样式
========================= */
.money-input-box {
display: flex;
align-items: center;
border: 1px solid #b9c9dd;
border-radius: 6px;
overflow: hidden;
background: #fff;
height: 42px;
}
.money-input-box .money-prefix {
width: 34px;
height: 100%;
background: #eef6ff;
border-right: 1px solid #b9c9dd;
display: flex;
align-items: center;
justify-content: center;
color: #2c5aa0;
font-weight: 700;
}
.money-input-box input {
border: none !important;
outline: none;
flex: 1;
height: 100%;
padding: 0 12px;
font-size: 16px;
background: #fff;
}
/* =========================
$ + % 双输入样式
========================= */
.dual-money-percent-box {
display: grid;
grid-template-columns: 1fr 105px;
border: 1px solid #c6ced8;
border-radius: 12px;
overflow: hidden;
height: 46px;
background: #fff;
}
.dual-side {
display: flex;
align-items: center;
min-width: 0;
}
.dual-money-side {
border-right: 1px solid #c6ced8;
}
.dual-money-side span {
width: 40px;
text-align: center;
color: #5f6f83;
font-weight: 700;
}
.dual-percent-side span {
width: 34px;
text-align: center;
color: #5f6f83;
font-weight: 700;
}
.dual-side input {
width: 100%;
min-width: 0;
border: none !important;
outline: none;
height: 100%;
padding: 0 8px;
font-size: 16px;
background: transparent;
}
.dual-percent-side input {
text-align: right;
}
.input-note {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
}
/* 隐藏非当前 tab */
.mortgage-hidden-by-tab {
display: none !important;
}
/* =========================
移动端
========================= */
@media (max-width: 1500px) {
.mortgage-page-layout {
grid-template-columns: 1fr;
}
.mortgage-left,
.mortgage-right {
position: static;
max-height: none;
overflow-x: auto;
}
}
.split-amount-input {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
background: #fff;
}
.split-side {
height: 100%;
display: flex;
align-items: center;
background: #fff;
}
.split-dollar {
flex: 1;
min-width: 0;
}
.split-percent {
border-left: 1px solid #ccc;
justify-content: center;
}
.split-symbol {
color: #000;
font-size: 16px;
padding: 0 5px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #f3f3f3;
border-right: 1px solid #ccc;
}
.split-symbol-right {
color: #000;
font-size: 16px;
padding: 0 5px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #f3f3f3;
border-left: 1px solid #ccc;
}
.split-input {
width: 100%;
height: 100%;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 16px;
color: #1f2933;
padding: 0 8px;
}
.split-input:focus {
outline: none !important;
box-shadow: none !important;
}
.split-percent-field {
width: 40px!important;
text-align: center;
padding: 0;
}
.split-amount-input:focus-within, .unit-amount-input:focus-within {
border-color: #485fc7;
box-shadow: 0 0 0 .125em rgba(72,95,199,.25);
}
.unit-amount-input {
width: 100%;
height: 44px;
display: flex;
align-items: center;
border: 1px solid #d0d5dd;
border-radius: 5px;
overflow: hidden;
background: #fff;
box-sizing: border-box;
}
.unit-main {
flex: 1;
height: 100%;
display: flex;
align-items: center;
padding: 0 0px;
box-sizing: border-box;
}
.unit-main .split-input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 15px;
background: transparent;
box-sizing: border-box;
}
.unit-tail {
width: 45px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #d0d5dd;
background: #ebebeb;
color: #000;
font-size: 15px;
box-sizing: border-box;
}
.unit-tail-year {
width: 45px;
}
.split-symbol {
color: #000;
font-size: 15px;
flex: 0 0 auto;
}
.split-symbol-right {
color: #000;
font-size: 15px;
flex: 0 0 auto;
min-width: 24px;
}
/* tooltip icon */
.mortgage-tooltip-icon,
label .icon {
width: 14px;
height: 14px;
margin-left: 4px;
vertical-align: -2px;
cursor: help;
outline: none;
}
/* floating tooltip */
.mortgage-tooltip-box {
position: fixed;
z-index: 999;
max-width: 320px;
padding: 8px 10px;
background: rgba(60, 60, 60, 0.95);
color: #fff;
font-size: 14px;
line-height: 1.35;
border-radius: 3px;
pointer-events: none;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.12s ease, transform 0.12s ease;
box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}
.mortgage-tooltip-box.is-visible {
opacity: 1;
transform: translateY(0);
}
.results-title {
line-height: 1.6;
margin-top: 10px;
/* padding: 10px;
background: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
}
td.property-tax-rate-selected {
background-color: #e8f3ff;
font-weight: bold;
}
.mortgage-guide-section {
margin-top: 28px;
padding: 10px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
line-height: 1.75;
color: #333;
max-width: 1800px;
margin: 20px auto;
}
.mortgage-guide-section h2 {
font-size: 24px;
margin: 22px 0 12px;
color: #000;
padding: 0px;
}
.mortgage-guide-section h3 {
font-size: 1.25em;
margin: 10px 0 10px;
color: #000;
}
.mortgage-guide-section p {
margin: 0 0 14px;
}
.mortgage-guide-section ul {
margin: 8px 0 18px 22px;
padding: 0;
}
.mortgage-guide-section li {
margin-bottom: 8px;
}
.biweekly-callout {
background: #f0f7ff;
border-left: 1px solid #2c7be5;
padding: 18px 20px;
border-radius: 8px;
margin-bottom: 26px;
}
.biweekly-callout h3 {
margin-top: 0;
color: #174ea6;
}
.biweekly-callout p:last-child {
margin-bottom: 0;
}
.biweekly-mini-note {
margin-top: 12px;
padding: 12px 14px;
background: #fff7ed;
border-left: 4px solid #f97316;
border-radius: 6px;
font-size: 14px;
line-height: 1.6;
}
.rate-source-note {
font-size: 12px;
line-height: 1.6;
color: #666;
margin: 4px 8px;
width: 96%;
word-break: break-all;
}
.tooltip-q {
display: inline-flex;
align-items: center;
justify-content: center;
width: 15px;
height: 15px;
margin-left: 4px;
border-radius: 50%;
background: #e5e7eb;
color: #555;
font-size: 11px;
font-weight: bold;
cursor: help;
position: relative;
}
.tooltip-q::after {
content: attr(data-tooltip);
display: none;
position: absolute;
left: 50%;
bottom: 130%;
transform: translateX(-50%);
width: 240px;
padding: 8px 10px;
background: rgba(17, 24, 39, 0.95);
color: #fff;
border-radius: 6px;
font-size: 12px;
line-height: 1.5;
font-weight: normal;
z-index: 9999;
white-space: normal;
text-align: left;
}
.tooltip-q:hover::after {
display: block;
}
.mortgage-expert-guide {
margin-top: 20px;
padding: 18px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
font-size: 14px;
line-height: 1.8;
color: #333;
}
.mortgage-expert-guide h3 {
font-size: 17px;
margin: 0 0 12px;
}
.mortgage-expert-guide h4 {
font-size: 15px;
margin: 14px 0 6px;
color: #111;
}
.comments-box {
border-radius: 10px;
background: #fff;
margin: 10px auto 10px auto;
max-width: 1770px;
/* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); */
border: 1px solid #e5e7eb;
}
@media (max-width: 768px) {
.comments-box {
margin: auto 10px;
}
}
.mini-note {
margin-top: 10px;
padding: 10px 10px;
background: #fff7ed;
border-left: 2px solid #f97316;
border-radius: 0px;
font-size: 14px;
line-height: 1.6;
overflow-x: auto;
}
.split-symbol2 {
color: #000;
font-size: 16px;
padding: 0px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
border-right: 1px solid #ccc;
}
#openTaxRateTableBtn {
cursor: pointer;
/* width: 16px;
height: 16px;*/
vertical-align: middle;
margin-left: 4px;
}
.tax-rate-modal-overlay {
display: none;
position: fixed;
z-index: 99999;
inset: 0;
background: rgba(0, 0, 0, 0.55);
align-items: center;
justify-content: center;
}
.tax-rate-modal-overlay.is-open {
display: flex;
}
.tax-rate-modal {
position: relative;
width: min(900px, 92vw);
max-height: 82vh;
overflow: auto;
background: #fff;
padding: 20px 16px;
box-sizing: border-box;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.tax-rate-modal h2 {
margin: 0 0 10px;
font-size: 24px;
font-weight: 700;
}
.tax-rate-modal-desc {
margin: 0 0 18px;
color: #555;
font-size: 14px;
}
.tax-rate-modal-close {
position: absolute;
right: 18px;
top: 14px;
border: none;
background: transparent;
font-size: 30px;
line-height: 1;
cursor: pointer;
}
.tax-rate-table-wrap {
overflow-x: auto;
}
.tax-rate-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.tax-rate-table td {
border: 1px solid #ddd;
padding: 8px 10px;
text-align: center;
cursor: pointer;
}
.tax-rate-table td:nth-child(3n + 2) {
text-align: left;
}
.tax-rate-table tr:hover td {
background: #f7f7f7;
}
.property-tax-rate-selected {
background: #e8f3ff !important;
color: #0057a8;
font-weight: 700;
}
.comment-form-email
{
margin-bottom: 15px!important;
}
input[readonly] {
background: #f3f3f3!important;
color: #595959;
}
#backToTop:hover,
#backToFoot:hover {
opacity: 1 !important;
}
.content table td, .content table th {
vertical-align: middle;
}
#mortgageOutput {
max-width: 1300px;
margin: auto;
overflow-x:auto;
}
.mortgage-guide-section {
width: 100%;
margin: 32px auto 0;
padding: 24px 16px 40px;
box-sizing: border-box;
}
.mortgage-guide-inner {
max-width: 1580px;
margin: 0 auto;
}
.mortgage-guide-section h2 {
font-size: 28px;
line-height: 1.35;
margin: 0 0 16px;
color: #1f2937;
font-weight: 800;
}
@media (max-width: 768px) {
.mortgage-guide-section {
padding: 20px 12px 32px;
}
.mortgage-guide-section h2 {
font-size: 24px;
}
}
.mortgage-guide-section {
margin-top: 28px;
padding: 10px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
line-height: 1.75;
color: #333;
max-width: 1800px;
margin: 20px auto;
}
.mortgage-right h2 {
background-color: #f1f1f1;
padding: 8px 5px;
margin-block-end: 0em;
color: #fff;
background: #2c64c0;
border: none;
text-align: center;
font-size: 1.1em;
letter-spacing: 0.5px;
word-break: keep-all;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
/* border-radius: 5px; */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.mortgage-right .table-wrapper .tftable th {
/* background: #919191; */
}
.mortgage-right .table-wrapper {
border: none;
}
.rate-icon-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-left: 10px;
}
.interest-rate-row {
border-bottom: 1px dashed #04208f;
margin-bottom: 0;
}
.rate-table-icon {
display: flex;
align-items: center;
text-align: right;
margin-right: 10px;
color: #8a8a8a;
}
.content .mortgage-guide-inner h3 {
padding: 8px 0px;
}
.math-scroll {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.content table:not(:last-child)
{
margin-bottom: 0em;
}
.table-wrapper {
position: relative;
}
/* 给 caption 右边留出按钮空间，避免文字和按钮重叠 */
.table-wrapper caption {
position: relative;
/* padding-right: 45px;*/
}
/* 按钮定位到 caption 右上角 */
.table-wrapper .table-controls {
position: absolute;
top: 3px;
z-index: 10;
margin: 0;
}
@media (min-width: 768px) {
.table-wrapper .table-controls {
right: 5px;
}
}
@media (max-width: 768px) {
.table-wrapper .table-controls {
left: 5px;
}
}
.detailed-analysis {
margin: 10px 0;
}
.analysis-section {
padding: 10px;
background: #f8f9fa;
/* border-left: 4px solid #007bff; */
border-width: 0px 1px 1px 2px;
border-style: none none none dashed;
border-color: #a0a0a0;
border-image: initial;
border-radius: 8px;
}
.highlight-positive {
color: #28a745;
font-weight: bold;
font-size: 1.05em;
}
.highlight-negative {
color: #dc3545;
font-weight: bold;
font-size: 1.05em;
}
.highlight-neutral {
color: #608cb3;/*#6c757d*/
font-weight: bold;
font-size: 1.05em;
}
.highlight-info {
color: #17a2b8;
font-weight: bold;
font-size: 1.05em;
}
.analysis-recommendation {
/* margin-top: 20px; */
margin-bottom: 10px;
padding: 10px;
background: #ebf6ff;/*#fff3cd*/
border-width: 0px 1px 1px 2px;
border-style: none none none dashed;
border-color: #3498db;
border-image: initial;
font-size: 1.05em;
border-radius: 8px;
}
.recommendation-positive {
color: #3d65ff;/*#155724*/
font-weight: bold;
font-size: 1.1em;
}
.recommendation-negative {
color: #ff2035;/*#721c24*/
font-weight: bold;
font-size: 1.1em;
}
.recommendation-neutral {
color: #b99019;/*#856404*/
font-weight: bold;
font-size: 1.1em;
}
.detailed-analysis strong {
color: #147ee7;
}
.detailed-analysis p {
margin-left: 0px;
margin-top: 0em;
}
.checkbox {
position: relative;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.checkbox__input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
}
.checkbox__box {
position: relative;
background-color: #e5e7eb;
min-width: 44px;
width: 44px;
max-width: 44px;
height: 24px;
border-radius: 12px;
transition: .3s ease;
}
.checkbox__input:checked+.checkbox__box {
background-color: #4d90fe; /*#ed7400*/
}
.checkbox__input:checked+.checkbox__box::after {
left: 22px;
}
.checkbox__box::after {
content: "";
transition: .3s ease;
display: block;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06), 0 1px 3px 0 rgba(0, 0, 0, .1);
position: absolute;
left: 2px;
top: 2px;
width: 20px;
height: 20px;
}
.checkbox__title {
font-size: .875rem;
line-height: 1.25rem;
color: #000;
}
/* Schedule 首屏不显示表头和表体 */
.lazy-schedule-table.lazy-schedule-collapsed thead,
.lazy-schedule-table.lazy-schedule-collapsed tbody,
.lazy-schedule-table.lazy-schedule-collapsed tfoot {
display: none;
}
/* 展开后正常显示 */
.lazy-schedule-table.lazy-schedule-expanded thead {
display: table-header-group;
}
.lazy-schedule-table.lazy-schedule-expanded tbody {
display: table-row-group;
}
.lazy-schedule-table.lazy-schedule-expanded tfoot {
display: table-footer-group;
}