@import url("main.css");
@import url("common.css");
.laydate-day-mark:hover,
.layui-laydate-header:hover,
.category form div:hover,
.button-box a.on:hover,
.close-window:hover,
.category form div input[type="radio"]:hover,
.laydate-set-ym span:hover,
.layui-laydate-header i.laydate-prev-m:hover,
.layui-laydate-header i.laydate-prev-y:hover,
.single-month ul li .perform-info .btn-toBuyTicket:hover,
.category form>div:hover,
.category form div label:hover,
.category form div input:hover,
.layui-laydate-header i.laydate-next-m:hover,
.layui-laydate-header i.laydate-next-y:hover
{
    cursor:  pointer;
}



/* 日历 */
.calendar-container #calendar{
    overflow: hidden;
    font-family: "Noto Sans SC";
}
.calendar-container{
    margin-bottom: 30px; 
    background: #fff;
    padding: 20px;
    border-radius: 8px;  
}

.concert{
    width: 95%;
    max-width: 1340px;
    margin: 0 auto;
    padding: 180px 0 30px;
    display: flex;
    justify-content: space-between;
}
.concert .left-calendar{
   position: sticky;
   width: 40%;
}
.concert .right-content{
    width: 60%;
    border-radius: 8px;
}
.concert .right-content::-webkit-scrollbar{
    display: none;
}
.calendar-arrow, .calendar-display{
    color: #0D0C22;
}
.calendar-arrow span{font: 500 28px sans-serif;}
.calendar-hd{height: 60px;}
.calendar-arrow span:hover,.calendar-display:hover{color: #C0B283;}
.calendar-views .days .old{color: #D5D5D5;}
.calendar .calendar-views .now{background: #0D0C22 !important;}
.calendar-ct{height: 360px !important;}
.calendar-views .week{border-bottom: 1px solid #EBEBEB;
    padding: 10px 0;
    margin-bottom: 10px;
}
#caledar .layui-laydate, .layui-laydate-hint{
    border: none;
    box-shadow: none;
    margin: 0 auto;
}
.layui-laydate{
    font-size: 0.7rem;
    width: 100% !important;
    min-height: 350px;
}

/* 分类选择 */
.category{
    width: 100%;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
}
.category h2{
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.category form{
    display: flex;
    flex-wrap: wrap;
}
.category form div{
    width: 50%;
    display: flex;
    align-items: center;
   padding: 10px 0;
   cursor: pointer;
}

.category form div input[type="radio"] { 
    width: 20px;
    height: 20px;
    border-radius: 50%;
    appearance: none;     
    background-color: #fff;
    border: 1px solid #0D0C22;
    margin: 0;
    cursor: pointer;
    outline: none;
} 
.category form div input[type="radio"]:checked { 
    background:#0D0C22 url(../../images/checkbox.png) no-repeat center;
    background-size: 12px;
    color: #fff;
} 
.category form div label{
    font-size: 0.7rem;
    margin-bottom: 0;
    margin-left: 12px;
    width: calc(100% - 30px);
}
.category .search{
    height: 40px;
    border: 1px solid #D3D3D3;
    border-radius: 2px;
    width: 100%;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
}
.category .search i{
    display: block;
    width: 40px;
    height: 100%;   
    cursor: pointer;   
    background: url(../../images/arrow-down.png) no-repeat center;
    background-size: 14px; 
}
.category .search i.arrow-up{
    background: url(../../images/arrow-up.png) no-repeat center;
    background-size: 14px;
}
.category .search .search-text{
    font-size: 0.6rem;    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 300px;
}
.category .search input{
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-size: 0.6rem;
    font-weight: 700;
    width: calc(100% - 195px);
}
.category .search .search-btn{
    width: 50px;
    height: 100%;
    background: #C0B283 url(../../images/search.png) no-repeat center;
    background-size: 18px;
    text-align: center;
    line-height: 40px;
    border: none;
}
.category .search .search-btn:hover{
    background-color: #0D0C22;
}
.sy-box{
    position: relative;
    margin-bottom: 30px;
}
.sy-box .search-option .yj{
    font-size: 0.6rem;
    color: #8D8D8D;
    border-right: 1px solid #eeeeee;
    width: 140px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 3px rgba(0, 0, 0, 0.08);
    left: 0;    
    padding: 10px 0;
    position: absolute;
    z-index: 50;
    text-align: center;
    max-height: 200px;
    overflow-y: auto;
}
.sy-box .search-option .yj li{
    line-height: 35px;
    cursor: pointer;
}
.sy-box .search-option .yj li.on{
    font-weight: 700;
    color: #fff;
    background: #C0B283;
}
.sy-box .search-option .yj li:hover{
    background: #C0B283;
}
.sy-box .search-option .yj-month{
    width: 120px;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px 3px rgba(0, 0, 0, 0.08);
    left: 150px;    
    padding: 10px 0;
    position: absolute;
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
}
.sy-box .search-option .yj-month li{
    font-size: 0.6rem;
    line-height: 35px;
    cursor: pointer;
    color: #8D8D8D;
}

.sy-box .search-option .yj-month li:hover{
    background: #C0B283;
}
.sy-box .search-option .yj-month li.on{
    color: #fff;
    font-weight: 700;
    background: #C0B283;
}
.yj,.yj-month{
    display: none;
}


/* 右侧内容区卡片 */
.right-content .single-month{
    margin: 40px 0;
}

.right-content .single-month h2{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.right-content .single-month ul li {
    margin-bottom: 20px;
    display: block;
    background: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    height: 170px;
    transition: 0.5s;
    transform: scale(1);
    cursor: pointer;
}
.right-content .single-month ul li:hover,.right-content .single-month ul li.on{
    transform: scale(1.03);
    box-shadow: 0px 0px 12px 1px #E2DCC9;
}

.single-month ul li .date-box{
    padding: 20px;
    width: 15%;
    text-align: center;
    border-right: 1px solid #EAEAEA;
}
.single-month ul li .date-box .week,
.single-month ul li .date-box .month{
    color: #A6A7A8;
    font-size: 0.8rem;
    margin-bottom: 10px;
}
.single-month ul li .date-box .day{
    color: #1D1D1D;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.single-month ul li .perform-info{
    padding: 20px;
    width: 60%;
}
.single-month ul li .perform-info .title{
    font-size: 0.9rem;
    color: #1D1D1D;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.single-month ul li .perform-info .time{
    font-size: 0.8rem;
    color: #424242;
    display: block;
    margin-bottom: 20px;
}
.single-month ul li .perform-info .btn-toBuyTicket{
    display: inline-block;
    padding: 6px 15px;
    border-radius: 2px;
    border: 1px solid #E2E2E2;
    color: #424242;
    font-size: 0.8rem;
}
.single-month ul li .perform-info .btn-toBuyTicket:hover{    background: #0D0C22;
    color: #fff;
    border: none;
   
}
.single-month ul li .perform-pic{
    width: 23%;
    height: 100%;
}
.single-month ul li .perform-pic img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: 0.5s;
    transform: scale(1);
}

.right-content .single-month ul li:hover .date-box,
.right-content .single-month ul li.on .date-box{
    background: #C0B283;
}
.right-content .single-month ul li:hover .date-box .week,
.right-content .single-month ul li.on .date-box .week,
.right-content .single-month ul li:hover .date-box .day,
.right-content .single-month ul li.on .date-box .day,
.right-content .single-month ul li:hover .date-box .month,
.right-content .single-month ul li.on .date-box .month
{
    color: #fff;
}
.right-content .single-month ul li:hover .perform-info .title,
.right-content .single-month ul li.on .perform-info .title
{
    font-weight: 700;
}
.right-content .single-month ul li:hover .perform-pic img,
.right-content .single-month ul li.on .perform-pic img
{
    transform: scale(1.1);
}

/* 选中的卡片样式 */
.right-content .single-month ul li.choosed .date-box{
    background: #C0B283;
}
.right-content .single-month ul li.choosed .date-box .week,
.right-content .single-month ul li.choosed .date-box .day,
.right-content .single-month ul li.choosed .date-box .month
{
    color: #fff;
}
.right-content .single-month ul li.choosed .perform-info .title{
    font-weight: 700;
}
.right-content .single-month ul li.choosed .perform-pic img{
    transform: scale(1.1);
}

.mobile-calendar-icon{
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.8rem;
    display: none;
}
.mobile-calendar-icon img{
    width: 20px;
    margin-right: 15px;
}

/* 购票弹窗 */
.dialog-mask{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    display: none;
}
.ticket-info{
    width: 60%;
    height: 90vh;
    overflow-y: auto;
    background: #F8F7F4;
    position: fixed;
    top: 5vh;
    left: 20%;
    z-index: 1002;
    border-radius: 15px;
    display: none;
}
.ticket-info::-webkit-scrollbar{
    display: none;
}
.ticket-info .pic-date{
    width: 100%;
    height: 300px;
}
.ticket-info .pic-date img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ticket-info .pic-date .date{
    position: absolute;
    top: 0;
    left: 30px;
    background: #C0B283;
    border-radius: 0 0 15px 15px;
    padding: 10px 30px;
    color: #fff;
    text-align: center;
}
.ticket-info .pic-date .date .ticket-week{
    font-size: 0.7rem;    
}
.ticket-info .pic-date .date .ticket-day{
    font-size: 1.4rem;
    font-weight: 700;
}
.ticket-info .pic-date .date .ticket-day span{
    font-size: 1rem;
    margin-left: 4px;
}
.ticket-info .pic-date .date .ticket-month{
    font-size: 0.7rem; 
}
.ticket-info .ticket-perform{
    width: 100%;
    background: #fff;
    padding: 30px;
    padding-bottom: 10px;
}
.ticket-info .ticket-perform .title-box{
    max-width: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ticket-info .ticket-perform .title-box h2{
    font-size: 1.2rem;
    font-weight: 700;
    width: 76%;
    line-height: 1.5;
}
.ticket-info .ticket-perform .title-box .tips{
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    border-radius: 4px;
    background: #0D0C22;
    color: #fff;
    font-size: 0.7rem;
}
.ticket-info .ticket-perform .address span{
    font-size: 0.8rem;
    margin-right: 20px;
}
.ticket-info .ticket-perform .address{
    margin-bottom: 25px;
}
.ticket-info .ticket-perform .personnel-box{
    display: flex;
}
.ticket-info .ticket-perform .personnel-box ul{
    width: 50%;
    padding-right: 20px;
}
.ticket-info .ticket-perform .personnel-box ul>p{
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.ticket-info .ticket-perform .personnel-box ul li{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.ticket-info .ticket-perform .personnel-box ul li .name{
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 10px;
}
.ticket-info .ticket-perform .personnel-box ul .con{
    /* font-weight: 500; */
    font-size: 0.8rem;
}
.perform-details{
    width: 100%;
    padding: 30px;
    padding-bottom: 100px;
}
.perform-details p{
    font-size: 0.8rem;
    color: #262423;
    line-height: 1.8;
    /*text-indent: 2em;*/
}

.button-box{
    width: 60%;
    padding: 20px 0;
    background: #F8F7F4;
    border-top: 1px solid #BCBCBC;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 5vh;
    left: 20%;
    border-radius: 0 0 15px 15px;
    z-index: 1003;
}
.button-box a,.button-box span{
    padding: 10px 40px;    
    color: #fff;
    border-radius: 55px;
    font-size: 1rem;
    font-weight: 700; 
    display: block;
}

.button-box a.on{
    background: #0D0C22;
}
.button-box a.on:hover{
    background: #C0B283;
    color: #fff;
}
.button-box span.off{
    background: #84837D;
}
.close-window{
    display: block;
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff url(../../images/close.png) no-repeat center;
    background-size: 30px;
    z-index: 1005;
}
.close-window:hover{
    background: #C0B283 url(../../images/close.png) no-repeat center;
    background-size: 30px;
}

/*layui-laydate 日历相关样式*/
.laydate-day-mark:hover ul{display:block}
.layui-this .laydate-day-mark:hover::after,
.laydate-day-mark:hover::after{display:none !important}
.layui-this .laydate-day-mark::after{display:block !important}
.laydate-day-mark:hover i{display:block !important;}
.laydate-day-mark ul{
	background: #C0B283;
    color: #fff;
    font-weight: 700; 
}
.laydate-day-mark{
    overflow: unset !important;
}

.laydate-day-mark ul li{
    line-height: 1.5;
    font-size: 0.7rem;
    font-weight: 400;
    margin-bottom:0;
}
.laydate-day-mark ul li>span{
    display: block;
    font-size: 0.6rem;
    margin-top: 5px;
}
.laydate-day-mark>i{
    display: none;
    width: 20px;
    position: absolute;
    right: 50%;
    margin-right: -10px;
    bottom: 42px;
}

.layui-laydate-main{
    width: 100% !important;
}

/*layui-laydate 日历相关样式*/

@media(max-width:1800px){
    .ticket-info{width: 70%;left: 15%;}
    .button-box{width: 70%;left: 15%;}
}

@media(max-width:1440px){
    .concert .right-content{width: 70%;}
    
}

@media(max-width:1366px){
    .ticket-info{width: 80%;left: 10%;}
    .button-box{width: 80%;left: 10%;}
    .concert .right-content{width: 64%;}
}
@media(max-width:1250px){
    .concert .right-content{width: 58%;}
}

@media(max-width:1100px){
    .ticket-info .ticket-perform{padding: 20px;}
    .ticket-info .ticket-perform .title-box h2{margin-bottom: 10px;width: 100%;}
    .ticket-info .pic-date .date{left: 20px;}
    .perform-details{padding: 20px;padding-bottom: 100px;}
    .ticket-info .ticket-perform .title-box{flex-direction: column-reverse;align-items: flex-start;}
    .ticket-info .ticket-perform .title-box .tips{margin-bottom: 20px;}
    .layui-laydate *{margin: 0 auto;}
    .mobile-calendar-icon{display: block;}
    .concert{padding-top: 110px;flex-direction: column;}
    .calendar-container{display: none;justify-content: center;padding: 10px;}
    .concert .left-calendar{margin-right: 0;}
    .category form div{padding: 10px 0;}
    .category{padding: 20px;}
    .category h2{margin-bottom: 15px;}
    .ticket-info{width: 100%;left: 0;height: 100%;top: 0;border-radius: 0;margin-left: 0;}
    .button-box{width: 100%;bottom: 0;left: 0;z-index: 1002;}
    .ticket-info .ticket-perform .personnel-box{flex-direction: column;}
    .ticket-info .ticket-perform .personnel-box ul>p{margin-bottom: 10px;}
    .ticket-info .ticket-perform .personnel-box ul{width: 100%;margin-bottom: 0;margin-right: 0;}
    .ticket-info .ticket-perform .personnel-box ul li{margin-bottom: 5px;}
    .layui-laydate-main{margin: 0 auto !important;}
    .concert .right-content{width: 100%;}
    .concert .left-calendar{width: 100%;}
}

@media(max-width:550px){
    .concert{padding-top: 60px;padding-bottom: 0;}
    .mobile-calendar-icon,.category{padding: 10px;}
    .mobile-calendar-icon{margin-bottom: 10px;}
    .mobile-calendar-icon img{width: 16px;margin-right: 10px;}
    .category form div input[type="checkbox"]{width: 14px;height: 14px;}
    .category form div{padding: 5px 0;}
    .right-content .single-month{margin: 20px 0;}
    .right-content .single-month h2{margin-bottom: 15px;}
    .single-month ul li .date-box{padding: 10px;}
    .right-content .single-month ul li{flex-wrap: wrap;height: auto;}
    .single-month ul li .date-box{width: 20%;display: flex;justify-content: center;flex-direction: column;}
    .single-month ul li .perform-info{width: 80%;}
    .single-month ul li .perform-pic{display: none;}
    .ticket-info .pic-date{height: 240px;}
    .ticket-info .pic-date .date{padding: 10px 20px;border-radius: 0 0 15px 15px;}
    .ticket-info .ticket-perform{padding: 15px;position:unset;margin-left: 0;width: 100%;border-radius: 0;box-shadow: none;}
    .perform-details{padding: 10px;padding-bottom: 70px;}
    .ticket-info .ticket-perform .title-box{flex-direction: column-reverse;justify-content: flex-start;}
    .ticket-info .ticket-perform .title-box .tips{width: 100px;text-align: center;margin-bottom: 20px;}
    .ticket-info .ticket-perform .address{margin-bottom: 20px;}
    .button-box{height: 60px;padding: 0;}
    .close-window{width: 36px;height: 36px;background-size: 20px;}
	.category .search .search-text{width: 170px;}
    .category .search input{width: calc(100% - 65px);}
}