/* =====================================================
   钦定全功能老黄历万年历
   lifa.css v2.0
   国风玄学主题
   仅控制外观
===================================================== */


/* ---------- 全局 ---------- */

* {
    box-sizing:border-box;
}


html {
    scroll-behavior:smooth;
}


body {

    margin:0;

    padding:30px 15px;

    font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "STKaiti",
    "KaiTi",
    serif;


    color:#4b3218;


    background:


    radial-gradient(
        circle at top,
        #fff9df 0%,
        #f2dfb5 45%,
        #cdb07a 100%
    );


    min-height:100vh;


}


/* 古风光晕 */

body::before {


    content:"";


    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;


    pointer-events:none;


    background:


    radial-gradient(
        circle at 20% 20%,
        rgba(255,255,255,.45),
        transparent 25%
    ),


    radial-gradient(
        circle at 80% 30%,
        rgba(255,220,120,.25),
        transparent 30%
    );


}



/* ---------- 主容器 ---------- */


.container {


    max-width:1200px;


    margin:auto;


    padding:35px;


    border-radius:28px;


    background:


    rgba(255,250,230,.88);



    box-shadow:


    0 30px 70px rgba(80,50,10,.28),


    inset 0 0 40px rgba(255,255,255,.7);



    position:relative;


}



/* ---------- 标题 ---------- */


h1 {


    text-align:center;


    margin:0 0 35px;


    font-size:36px;


    letter-spacing:8px;


    color:#8b4513;



    text-shadow:


    2px 2px 0 #f7d889,


    5px 8px 18px rgba(0,0,0,.25);


}



/* ---------- 查询区域 ---------- */


.search-panel,
.search-panel-now {



    padding:22px;


    margin-bottom:25px;


    border-radius:22px;



    background:


    linear-gradient(
        145deg,
        #fff7d8,
        #eed29a
    );



    box-shadow:


    10px 12px 28px rgba(100,60,10,.25),


    inset 3px 3px 10px white,


    inset -5px -5px 15px rgba(120,70,10,.15);



}



/* ---------- 表单 ---------- */


.form-row {


    display:flex;


    align-items:center;


    padding:12px;


    margin-bottom:10px;


}



.form-label {


    width:130px;


    font-size:18px;


    font-weight:bold;


    color:#7b3f00;


}



.form-control {


    flex:1;


}




/* ---------- 输入 ---------- */


input,
select {


    height:38px;


    padding:5px 10px;


    margin:3px;


    border-radius:10px;


    border:1px solid #c99a50;



    background:#fffaf0;


    color:#5a3614;



    font-size:15px;



    box-shadow:


    inset 2px 2px 5px rgba(0,0,0,.15);



    transition:.3s;


}



input:hover,
select:hover {


    border-color:#9b5b20;


}


input:focus,
select:focus {


    outline:none;


    border-color:#8b4513;


    box-shadow:


    0 0 12px rgba(139,69,19,.35);


}



/* ---------- 按钮 ---------- */


.btn-submit,
.btn-submit-now {


    padding:11px 25px;


    margin-left:8px;


    border:none;


    border-radius:35px;



    color:white;


    font-weight:bold;


    letter-spacing:2px;



    background:


    linear-gradient(
        145deg,
        #c27a36,
        #7b350e
    );



    box-shadow:


    0 8px 18px rgba(80,40,0,.35),


    inset 0 2px 5px rgba(255,255,255,.35);



    cursor:pointer;


    transition:.35s;



}



.btn-submit:hover,
.btn-submit-now:hover {



    transform:


    translateY(-5px)
    scale(1.06);



    box-shadow:


    0 15px 30px rgba(80,40,0,.45);


}



/* =====================================================
   核心内容卡片
===================================================== */


.box {


    position:relative;


    overflow:hidden;


    margin:25px 0;


    padding:25px;



    border-radius:22px;



    /* 默认淡黄色 */

    background:


    linear-gradient(
        135deg,
        #fff4c7,
        #f3dfa5
    );



    border:

    1px solid rgba(170,120,40,.35);




    box-shadow:



    12px 15px 30px rgba(80,50,10,.28),



    inset 5px 5px 15px rgba(255,255,255,.8),



    inset -6px -6px 18px rgba(120,80,20,.18);



    transition:


    .45s ease;



    transform-style:preserve-3d;



}



/* 流光效果 */


.box::before {


    content:"";


    position:absolute;


    top:-100%;


    left:-80%;


    width:180%;


    height:180%;



    background:


    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );



    transform:rotate(25deg);


    transition:.9s;



}




.box:hover::before {


    left:120%;


}



/* 鼠标动态 */


.box:hover {



    transform:


    translateY(-12px)


    rotateX(3deg)


    rotateY(-3deg);



    background:


    linear-gradient(
        135deg,
        #eaf5dc,
        #d8ebcb
    );



    box-shadow:



    18px 30px 50px rgba(70,90,30,.35),



    inset 5px 5px 18px white;



}



/* ---------- 标题 ---------- */


.title {


    font-size:32px;


    font-weight:bold;


    color:#8b4513;



    padding-bottom:12px;


    margin-bottom:15px;



    border-bottom:

    2px solid rgba(150,100,30,.35);



    text-shadow:

    1px 2px 4px rgba(0,0,0,.15);


}



/* ---------- 内容 ---------- */


.row {


    line-height:2;


    font-size:26px;


}



.row b {


    color:#6b3b12;


}


/* =====================================================
   lifa.css v2.0
   第二部分
===================================================== */


/* ---------- 宜忌标签 ---------- */


.badge {


    display:inline-block;


    padding:6px 16px;


    margin:5px;


    border-radius:22px;


    font-weight:bold;


    box-shadow:


    0 5px 12px rgba(0,0,0,.18);



    transition:.3s;


}



.badge:hover {


    transform:


    translateY(-3px);


}



.badge-yi {


    background:


    linear-gradient(
        135deg,
        #e4f4c9,
        #c8df9f
    );


    color:#315b18;


}



.badge-ji {


    background:


    linear-gradient(
        135deg,
        #f5d4c7,
        #eab09d
    );


    color:#7b2415;


}



/* =====================================================
   四柱反查结果古卷效果
===================================================== */


.result-item {


    margin:12px 0;


    padding:16px;


    border-radius:16px;



    background:


    linear-gradient(
        135deg,
        #fff0c4,
        #e8ca88
    );



    box-shadow:


    8px 12px 22px rgba(80,45,10,.28),


    inset 3px 3px 8px white;



    transition:.35s;


}



.result-item:hover {


    transform:


    translateX(15px);



    background:


    linear-gradient(
        135deg,
        #e5f2d9,
        #c9dfb7
    );


}



.result-item-link {


    text-decoration:none;


    color:#7b3f00;


}





/* =====================================================
   平板
===================================================== */


@media(max-width:900px){



.container{


    padding:25px;


}



h1{


    font-size:30px;


}



.box{


    padding:20px;


}



.form-label{


    width:110px;


}



}





/* =====================================================
   手机 768px
===================================================== */


@media(max-width:768px){



body{


    padding:15px 8px;


}




.container{


    padding:15px;


    border-radius:18px;


}



h1{


    font-size:25px;


    letter-spacing:4px;


    line-height:1.5;


}



/* 查询区域 */


.search-panel,
.search-panel-now{


    padding:15px;


    border-radius:18px;


}




.form-row{


    display:block;


    padding:8px 0;


}



.form-label{


    width:auto;


    margin-bottom:8px;


    font-size:17px;


}



.form-control{


    width:100%;


}



/* 输入框手机友好 */


input,
select{


    height:42px;


    font-size:16px;


    margin:5px 2px;


}



/* 按钮单独占行 */


.btn-submit,
.btn-submit-now{


    width:100%;


    margin:10px 0 0;


    height:45px;


}





/* 卡片 */


.box{


    padding:18px;


    border-radius:18px;


}



/* 手机取消3D旋转 */


.box:hover{


    transform:


    translateY(-5px);


}



.title{


    font-size:21px;


}



.row{


    font-size:15px;


    line-height:1.9;


}



/* 点击反馈 */


.box:active{


    transform:


    scale(.98);


}



}



/* =====================================================
   小屏手机 480px
===================================================== */


@media(max-width:480px){



body{


    padding:8px 5px;


}



.container{


    padding:12px;


}



h1{


    font-size:22px;


    letter-spacing:2px;


}



.search-panel,
.search-panel-now{


    padding:12px;


}



input,
select{


    width:100% !important;


    margin:5px 0;


}



.box{


    padding:15px;


    margin:18px 0;


}



.title{


    font-size:19px;


}



.row{


    font-size:14px;


}




.badge{


    padding:5px 12px;


    font-size:14px;


}



.result-item{


    font-size:14px;


    padding:12px;


}



}



/* =====================================================
   超小屏 360px
===================================================== */


@media(max-width:360px){



h1{


    font-size:20px;


}



.container{


    padding:8px;


}



.box{


    padding:12px;


}



.title{


    font-size:18px;


}



.row{


    font-size:13px;


}



.btn-submit,
.btn-submit-now{


    font-size:14px;


}




}



/* =====================================================
   手机性能优化
===================================================== */


@media (hover:none){



.box:hover{


    transform:none;


    background:


    linear-gradient(
        135deg,
        #fff4c7,
        #f3dfa5
    );


}



.box:active{


    background:


    linear-gradient(
        135deg,
        #e7f3db,
        #d4e7c3
    );


}



.btn-submit:active,
.btn-submit-now:active{


    transform:scale(.96);


}



}



/* =====================================================
   滚动条国风优化
===================================================== */


::-webkit-scrollbar{


    width:10px;


}



::-webkit-scrollbar-track{


    background:#ead7aa;


}



::-webkit-scrollbar-thumb{


    background:#a66b2d;


    border-radius:20px;


}



/* =====================================================
   页面底部留白
===================================================== */


body{


    padding-bottom:50px;


}




/* =====================================================
   lifa.css v2.1 修正补丁
   表单尺寸 + 字体增强 + 去除流光
===================================================== */


/* ===============================
   去除斜向动态光影
================================ */


.box::before {

    display:none !important;

}


/* 保留卡片浮起，但取消旋转 */

.box:hover {


    transform:

    translateY(-8px) !important;


}



/* ===============================
   电脑端查询区域优化
================================ */


/* 查询区域整体字体 */

.search-panel,
.search-panel-now {


    font-size:20px;


}



/* 表单文字 */

.form-label {


    width:160px;


    font-size:26px;


    font-weight:900;


}



/* 输入区域 */

.form-control {


    display:flex;


    align-items:center;


    flex-wrap:nowrap;


}



/* 所有输入框扩大 */


.form-control input {


    height:46px;


    font-size:20px;


}



/* 日期输入 */


input[type="date"] {


    width:180px !important;


}



/* 年月日时 */

input[type="number"] {


    width:85px !important;


}



/* 自定义年份 */


input[name="c_year"] {


    width:170px !important;


}



/* 四柱 */

input[name="fp_year"],
input[name="fp_month"],
input[name="fp_day"],
input[name="fp_time"] {


    width:75px !important;


}



/* 下拉时间 */


select {


    min-width:95px;


    height:46px;


    font-size:20px;


}



/* 按钮同步放大 */


.btn-submit,
.btn-submit-now {


    font-size:20px;


    padding:13px 30px;


}





/* ===============================
   内容文字整体放大
================================ */



.row {


    font-size:20px;


    line-height:2.1;


}



.row b {


    font-size:21px;


}



/* 标题 */

.title {


    font-size:28px;


}



/* ===============================
   手机端优化
================================ */


@media(max-width:768px){



.form-control {


    display:block;


}



.form-label {


    font-size:22px;


}



/* 输入框手机 */

input,
select {


    height:46px !important;


    font-size:18px !important;


}



/* 查询按钮 */


.btn-submit,
.btn-submit-now {


    font-size:18px;


}



/* 内容区域 */

.row {


    font-size:18px !important;


    line-height:2;


}



.row b {


    font-size:19px;


}



.title {


    font-size:24px;


}



/* 卡片 */


.box {


    padding:20px;


}



}



/* ===============================
   小屏手机
================================ */


@media(max-width:480px){


.form-label {


    font-size:21px;


}



.row {


    font-size:17px !important;


}



.row b {


    font-size:18px;


}



.title {


    font-size:22px;


}


}



/* ===============================
   360手机
================================ */


@media(max-width:360px){


.row {


    font-size:16px !important;


}


.row b {


    font-size:17px;


}



}


/*手机端输入框 每个一行*/
/* =====================================================
   手机端最终输入布局 v2.6
   每个 年/月/日/时 独立一行
   输入框与文字同行
===================================================== */
/* 输入组合 */

.input-item{

    display:inline-flex;

    align-items:center;

    margin-right:8px;

}


.input-item span{

    margin-left:5px;

}


/* 手机 */

@media(max-width:768px){


.input-item{

    display:flex;

    width:100%;

    margin:8px 0;


}


.input-item input,
.input-item select{

    width:120px !important;

}



}


/* =================================
   推广小卡片
================================= */


.promo-box{


    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:25px;

    justify-content:center;


}



.promo-item{


    width:180px;

    padding:15px;


    text-align:center;


    text-decoration:none;


    color:#7b3f00;


    border-radius:15px;



    background:


    linear-gradient(
        145deg,
        #fff5cf,
        #e8cf91
    );



    box-shadow:


    6px 8px 18px rgba(80,50,10,.25),


    inset 2px 2px 8px white;



    transition:.3s;


}



.promo-item div{


    font-size:18px;

    font-weight:bold;


}



.promo-item span{


    display:block;


    margin-top:8px;


    font-size:14px;


    color:#a35d18;


}



.promo-item:hover{


    transform:


    translateY(-6px);


    background:


    linear-gradient(
        145deg,
        #e7f3d8,
        #c9dfb2
    );


}





/* =================================
   网站备案底栏
================================= */


/* =================================
   网站备案底栏优化
================================= */


.footer-info{


    max-width:1200px;


    margin:30px auto 0;


    padding:12px 20px;


    text-align:center;


    border-radius:18px;



    font-size:14px;


    color:#765126;



    background:


    rgba(255,245,210,.85);



    box-shadow:


    0 8px 20px rgba(80,50,10,.18),


    inset 2px 2px 8px white;


}



.footer-info a{


    color:#8b4513;

    text-decoration:none;


}



/* 手机 */


@media(max-width:768px){


.promo-item{


    width:45%;


}


.footer-info{


    font-size:12px;


}



}



@media(max-width:400px){


.promo-item{


    width:100%;


}


}


/* ============================
   手机查询TAB
============================ */


.mobile-query-tabs{

    display:none;

}



@media(max-width:768px){


.mobile-query-tabs{


    display:flex;


    gap:8px;


    margin:15px 0;


}



.mobile-query-tabs button{


    flex:1;


    border:none;


    border-radius:20px;


    padding:10px 5px;


    color:#fff;


    font-weight:bold;


    background:


    linear-gradient(
        145deg,
        #c27a36,
        #7b350e
    );


}



/* 默认只显示公历 */

.query-box{


    display:none;


}



.solar-box{


    display:block;


}



}


/* =========================
   首页SEO介绍区域
========================= */


.seo-intro{


    max-width:1200px;


    margin:30px auto 0;


    padding:12px 20px;


    text-align:center;


    border-radius:18px;



    font-size:14px;


    color:#68451d;



    background:


    rgba(255,245,215,.75);



    box-shadow:


    0 8px 20px rgba(80,50,10,.18),


    inset 2px 2px 8px white;


}



.seo-intro h2{


    margin-top:0;


    text-align:center;


    font-size:24px;


    color:#8b4a12;


}



.seo-intro p{


    margin:15px 0;


    font-size:16px;


}



@media(max-width:768px){


.seo-intro{


    padding:15px;


}



.seo-intro h2{


    font-size:21px;


}



.seo-intro p{


    font-size:15px;


}



}



.top-nav{
    text-align:center;
    margin:15px auto;
}


.top-nav a{
    display:inline-block;
    padding:8px 18px;
    margin:5px;
    border-radius:8px;
    background:#8b5a2b;
    color:white;
    text-decoration:none;
    font-size:16px;
}


.top-nav a:hover{
    opacity:.85;
}


/* ===========================
   黄历日期导航
=========================== */

.date-nav {

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:#fff8e7;

    border:1px solid #d8b36a;

    border-radius:18px;

    padding:18px 28px;

    margin-bottom:20px;

    box-shadow:
    0 5px 15px rgba(120,80,20,.15);

}


/* 前后按钮 */

.date-btn {

    background:#f8ecd0;

    color:#8b4513;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

    padding:10px 20px;

    border-radius:30px;

    border:1px solid #d4ad62;

    transition:.3s;

}


.date-btn:hover {

    background:#e8c985;

    color:#fff;

}



/* 日期输入区域 */

.date-picker {

    background:#fffdf6;

    border:1px solid #d9bb83;

    border-radius:12px;

    padding:8px 15px;

    display:flex;

    align-items:center;

    gap:8px;

}


.date-picker span {

    font-size:20px;

}


.date-picker input {

    border:none;

    background:transparent;

    font-size:18px;

    color:#79501d;

    outline:none;

}