/**
 * @author youhualao.com
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}

body {
    min-height: 100vh;
    background-color: #000000;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", Arial, "sans-serif";
}

#app {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 0;
    background-color: #FFFFFF;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 480px) {
    #app {
        max-width: 480px;
    }
}

/*五行颜色*/
.wxmu0{color: #00ad7c;}
.wxmu1{color: #00ad7c;}
.wxhuo0{color: #fc345c;}
.wxhuo1{color: #fc345c;}
.wxtu0{color: #a64b00;}
.wxtu1{color: #a64b00;}
.wxjin0{color: #ffa500;}
.wxjin1{color: #ffa500;}
.wxshui0{color: #0074e4;}
.wxshui1{color: #0074e4;}

/*左右箭头*/
a.arrow {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    color: #fff;
    text-decoration: none;
    border: 0;
    border-radius: 0;
}
/*往右的箭头*/
a.arrow::after {
    content: "";
    position: absolute;
    left: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}
/*往左的箭头*/
a.prev.arrow::after {
    left: auto;
    right: 0;
    border: 0;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

/*加减号*/
a.minus, a.plus {
    position: relative;
    width: 25px;
    height: 25px;
    text-decoration: none;
    border: 0;
    border-radius: 0;
}
/*加减号的一横*/
a.minus::before, a.plus::before {
    position: absolute;
    left: 10%;
    top: 50%;
    margin-top: -2px;
    content: "";
    width: 80%;
    height: 4px;
    background-color: #333333;
}
/*加号的一竖*/
a.plus::after {
    position: absolute;
    left: 50%;
    top: 10%;
    margin-left: -2px;
    content: "";
    width: 4px;
    height: 80%;
    background-color: #333333;
}

/*下拉选择框*/
select {
    cursor: pointer;
    position: relative;
    background: transparent;
    text-align: center;
    outline: none;
    color: #fff;
    border: 0;
    appearance: none;
    font-weight: bold;
}
select option {
    color: #000000;
    font-size: 16px;
}

/*顶部标题栏*/
.title_bar {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #663ab7;
    color: #ffffff;
    width: 100%;
    height: 70px;
    padding-top: 8px;
}

/*顶部标题栏中间的标题*/
.title_bar .title{
    letter-spacing:1px;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
}

/*标题栏中间年月日*/
.title_bar .v {
    position: absolute;
    top: 38px;
    left: 46%;
    margin-left: -135px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
}
/*标题栏的年份*/
.title_bar .v .year {
    width: 110px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.title_bar .v .year b {
    font-weight: bold;
}
/*标题栏的月份*/
.title_bar .v .month {
    width: 90px;
    margin-left: -10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.title_bar .v .month .b {
    font-size: 14px;
}
/*标题栏的日*/
.title_bar .v .day {
    width: 90px;
    margin-left: -10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

}
.title_bar .v .day b{
    font-weight: bold;
}

/*返回*/
.title_bar a.back {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    left: 7px;
    top: 40px;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    font-weight: normal;
}

/*返回今天*/
.title_bar a.today {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 23px;
    right: 7px;
    top: 40px;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 6px;
    font-size: 11px;
    text-decoration: none;
    font-weight: normal;
}

/*月历*/
.calendar {
    width: 100%;
    margin: 0;
    padding: 0 1px;
}

/*月历部分*/
.calendar .month {
}

/*星期几*/
.calendar .month ul.week {
    list-style: none;
    display: flex;
    flex-direction: row;
    margin-left: -1px;
}
.calendar .month ul.week li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    margin-top: 1px;
    font-size: 10px;
    height: 24px;
    border-radius: 2px;
    white-space: nowrap;
    background-color: #4e6ef1;
    color: #ffffff;
    font-weight: bold;
}
/*星期几的周末*/
.calendar .month ul.week li.weekend {
    background-color: #D4473D;
}

/*日期部分*/
.calendar .month .days {
    position: relative;
}

/*每一排*/
.calendar .month .days ul.day {
    list-style: none;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #dddddd;
}

/*每一个格子*/
.calendar .month .days ul.day li {
    position: relative;
    flex: 1;
    height: 50px;
    white-space: nowrap;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*格子内容容器，用来与格子产生间隙*/
.calendar .month .days ul.day li div {
    position: relative;
    width: 95%;
    min-height: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*格子公历日期数字*/
.calendar .month .days ul.day li b {
    display: block;
    font-weight: bold;
    font-size: 22px; /*月历格子公历数字大小*/
    line-height: 1;
}

/*格子农历日期*/
.calendar .month .days ul.day li i {
    position: absolute;
    left: 3px;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    width: 8px;
    font-style: normal;
    font-size: 8px;
    color: #333;
    white-space: break-spaces;
    font-weight: bold;
}

/*节日*/
.calendar .month .days ul.day li u {
    position: absolute;
    left: 0;
    bottom: 2px;
    right: 0;
    text-align: center;
    display: block;
    font-style: normal;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px;
    color: #c73c0d;
}

/*周末格子*/
.calendar .month .days ul.day li.weekend {
    background-color: #ffffff;
    color: #c73c0d;
}

.calendar .month .days ul.day li.today {
}

.calendar .month .days ul.day li.today div {
    color: #4e6ef1;
}

.calendar .month .days ul.day li.today u {
    color: #4e6ef1;
}

.calendar .month .days ul.day li.today i {
    color: #4e6ef1;
}

/*法定假日*/
.calendar .month .days ul.day li.holiday::after {
    content: '休';
    position: absolute;
    right: 5%;
    top: 5%;
    background-color: indianred;
    border-radius: 3px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 7px;
    font-weight:bold;
}

/*法定假日上班的*/
.calendar .month .days ul.day li.work b {

}
.calendar .month .days ul.day li.work::after {
    content: '班';
    background-color: #3489ff;
}

/*节气*/
.calendar .month .days ul.day li.jie_qi u {
    color: darkgreen;
}
/*公历节日*/
.calendar .month .days ul.day li.solar_festival u {
    color: #ff6da8;
}
/*农历节日*/
.calendar .month .days ul.day li.lunar_festival u {
    color: #f10000;
}
/*国际节日*/
.calendar .month .days ul.day li.guoji_festival u {
    color: #0b78fe;
}

/*今天的今*/
.calendar .month .days ul.day li.today::after {
    content: '今';
    position: absolute;
    right: 5%;
    top: 5%;
    background-color: #6d8bff;
    border-radius: 3px;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
}

/*选中的那天*/
.calendar .month .days ul.day li.selected div {
    background-color: #4e6ef1;
    color: #ffffff;
    border-radius: 7px;
}

.calendar .month .days ul.day li.selected b, .calendar .month .days ul.day li.selected u, .calendar .month .days ul.day li.selected i {
    color: #ffffff;
}

/*背景的月数字*/
.calendar .month .days .shadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 160px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(225, 216, 241, 0.562);
    z-index: -1;
}

/*当天版块*/
.current_day {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

/*今天节日板块*/
.condition {
    margin-top: 1px;
    height: 35px;
    background-color: #663ab7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.condition div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/*今天节日标题*/
.condition div b{
    color: #ffffff;
    font-size: 14px;
}
/*今天节日正文*/
.condition div .jieri{
    padding-left: 15px;
    color: #ffffff;
    font-size: 14px;
}

/*中间部分*/
.current_day .center {
    flex: 1;
    color: #333333;
    padding-top: 5px;
    width: 100%;
}
/*中间公历*/
.current_day .center .gongli {
    font-size: 16px;
    font-weight:bold;
    letter-spacing:2px;
    color: #000;
}
/*中间农历*/
.current_day .center .nongli {
    font-size: 14px;
    color: #000;
}
/*中间大日期*/
.current_day .center .day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    height: 80px;
    font-size: 80px;
    margin: 30px 0;
    padding: 0 50px;
}
.current_day .center .day div {
    flex: 1;
    color: #D4473D;
    font-weight: bold;
}
/*箭头*/
.current_day .center .day a {
    border-radius: 50%;
    background-color: #000000;
    width: 30px;
    height: 30px;
}
.current_day .center .day a.arrow::after {
    left: 7px;
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
}
/*左箭头*/
.current_day .center .day a.prev.arrow::after {
    left: 10px;
    border: 0;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

/*左右 星座 星期几*/
.current_day .left, .current_day .right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    color:#333333;
    font-size: 16px;
}
.current_day .right {
    padding-right: 5px;
}
.current_day .left .row, .current_day .right .row {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.current_day .left .row div, .current_day .right .row div {
    margin: 5px;
    width: 10px;
    line-height: 1.3;
}

/*宜忌版块*/
.yj {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}
.yj .yi, .yj .ji {
    width: 290px;
    margin-top: 10px; /*宜忌行隙*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/*宜忌字*/
.yj b {
    width: 30px;
    height: 20px;
    color: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;

}
.yj .yi .y, .yj .ji .j {
    margin-right: 2px;
    padding-top: 1px;
}
/*宜字*/
.yj .yi .y b {
    background: #D4473D;
}
/*忌字*/
.yj .ji .j b {
    background: #000000;
}
/*宜忌内容*/
.yj .yi .yistr, .yj .ji .jistr {
    flex: 1;
    text-align: left;
    padding-left: 10px;
    line-height: 22px;
    color: #797263;
    font-size: 15px;
}
.yj .ji .jistr {
    color: #797263;
}

/*详细信息第一个版块*/
.huang_li {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    font-size: 13px;
    border: 1px solid #dddddd;
    color: #000;
}

/*详细信息第一个版块*/
.huang_li .box {
    flex: 1;
    border-right: 1px solid #dddddd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.huang_li .box:last-child {
    border-right: 0;
}

/*标题*/
.huang_li .box b {
    color: #673cb9;
    font-weight: bold;
    font-size: 15px;
}

.huang_li .box ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.huang_li .box ul li {
    font-size: 14px;
}

/*左边内容*/
.huang_li .box .content_l {
    padding: 2px 0;
}
.huang_li .box .content_l ul li {
    width: 1em;
    margin: 8px 13px;
}
/*左边标题*/
.huang_li .box .content_l ul li b {
    line-height: 1.1;
}
/*左边正文*/
.huang_li .box .content_l ul li .l {
    line-height: 1.1;
    padding-top: 3px;
}
/*左边正文 六合*/
.huang_li .box .content_l ul li .l1 {
    font-weight: bold;
    line-height: 1.4;
    padding-top: 3px;
}

/*右边内容*/
.huang_li .box .content {
    width: 100%;
    flex: 1;
    border-bottom: 1px solid #dddddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.huang_li .box .content:last-child {
    border-bottom: 0;
}

.huang_li .box .content b {
    display: block;
}

/*右边四柱内容*/
.huang_li .box .content .top {

}
.huang_li .box .content .top ul li {
    width: 1em;
    margin: 5px 10px;
}
/*右边四柱干支*/
.huang_li .box .content .top ul li b {
    line-height: 1.2;
    color: #cc0000;
}
/*右边四柱生肖*/
.huang_li .box .content .top ul li .l {
    font-weight: bold;
    line-height: 1.2;
    padding-top: 3px;
}

/*右边下面彭祖百忌标题*/
.huang_li .box .content .peng {
    padding-bottom: 6px;
}
/*右边下面彭祖百忌内容*/
.huang_li .box .content .l {
    padding-top: 1px;
    letter-spacing:1px;
    line-height: 1.5;
    font-size: 14px;
}

/*时辰版块*/
.hour {
    font-size: 13px;
    display: flex;
    flex-direction: row;
    border: 1px solid #dddddd;
    border-top: 0;
    padding: 10px 0px;
    margin-bottom: 5px;
}

/*标题*/
.hour b {
    color: #673cb9;
    font-weight: bold;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px;
    font-size: 14px;
    line-height: 1.2;
}

/*时辰列表*/
.hour ul {
    flex: 1;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 20px;
    color: #000;
}

/*每个时辰*/
.hour ul li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 1em;
    position: relative;
    line-height: 1.2;
}

/*当前时辰*/
.hour ul li.current {
    color: #673cb9;
    font-weight: bold;
}

/*当前时辰箭头*/
.hour ul li.current::before {
    content: "";
    position: absolute;
    font-size: 0;
    bottom: -5px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom-color: mediumpurple;
}

/*底部文字版块*/
.lines {
    border: 1px solid #dddddd;
    border-bottom: 0;
    margin-bottom: 5px;
    font-size: 13px;
    text-align: left;
    color: #191919;
}

/*标题*/
.lines b {
    color: #673cb9;
    font-weight: bold;
    font-size: 15px;
    margin-right: 10px;
}

/*每一段*/
.lines p {
    margin: 0;
    padding: 4px 5px 5px 5px;
    border-bottom: 1px solid #dddddd;
}

/*需要多列的*/
.lines .row {
    display: flex;
    flex-direction: row;
}

.lines .row p {
    flex: 1;
    border-right: 1px solid #dddddd;
}

.lines .row p:last-child {
    border-bottom: 1px solid #dddddd;
    border-right: 0;
}


.lines p:last-child {
    border: 0;
}

/*底部版权*/
.end{
    padding:10px 0;
    font-size: 11px;
    color: #888;
    line-height: 2.5;
}
.end A{
    color: #888;
    text-decoration:none;
}
.end A:visited{
    color: #888;
}


/*弹窗*/
.popup {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
    transition: all .5s;
    font-size: 15px;
}

.popup.show {
    display: block;
    z-index: 99999;
    opacity: 1;
}

/*弹窗阴影*/
.popup .popup-mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

/*弹窗面板*/
.popup .popup-panel {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #fff;
}

.popup .popup-panel.top {
    top: 0;
}

.popup .popup-panel.bottom {
    bottom: 0;
}

/*弹窗标题栏*/
.popup .popup-panel .popup-action {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 2.5em;
    border-bottom: 1px solid #efefef;
}

.popup .popup-panel .popup-action .left,
.popup .popup-panel .popup-action .right,
.popup .popup-panel .popup-action .title {
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/*弹窗标题文字*/
.popup .popup-panel .popup-action .title {
    width: 60%;
    color: #666;
}

.popup .popup-panel .popup-action .left, .popup .popup-panel .popup-action .right {
    width: 20%;
    font-size: .9em;
}

/*标题栏左边*/
.popup .popup-panel .popup-action .left {
    color: #999;
}

/*标题栏右边*/
.popup .popup-panel .popup-action .right {
    color: #20a0ff;
}

/*弹窗内容*/
.popup .popup-panel .popup-content div {
    height: 160px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/*输入框*/
.popup .popup-panel .popup-content div input {
    display: block;
    width: 90px;
    height: 36px;
    line-height: 30px;
    outline: none;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    margin: 0 20px;
}

/*滑动特效*/
.top-enter-active, .top-leave-active, .bottom-enter-active, .bottom-leave-active {
    transition: all .5s;
}

.top-enter, .top-leave-active {
    transform: translateY(-100%);
}

.bottom-enter, .bottom-leave-active {
    transform: translateY(100%);
}

.slider {
    user-select: none;
    transition: transform 0.1s ease;
}

.slider * {
    user-select: none;
}