@charset "UTF-8";
@import (reference) 'size';
@import (reference) 'color';

.page-tags-nav{
    position: static;
    left: 0;
    right: 0;
}
.tag{
    display: block;
    margin: 2em auto 10px;
    font-size: @fs-16;
    padding: 6px 12px;
    border: 1px solid;
}
.tag-primary{
    color: @color-ff !important;
    background: @primary;
    border-color: @primary;
}
.tag-success{
    color: @color-ff !important;
    background: @success;
    border-color: @success;
}
.tag-danger{
    color: @color-ff !important;
    background: @danger;
    border-color: @danger;
}
.tag-default{
    color: @color-black !important;
    background: @color-ff;
    border-color: @color-wuwu;
}
.tag-warning{
    color: @color-ff !important;
    background: @warning;
    border-color: @warning;
}

.tag-block{
    padding: 0 10px;
    &:last-child{
        padding-right: 10px !important;
    }
}
.product-tag{
    margin-bottom: 8px;
    border-bottom: 1px solid @color-ee;
    padding-top: 60px;
    display:flex;
    align-items:center;
    @media @max850{
        flex-direction: column;
        align-items: flex-start;
    }
    &:first-child{
        padding-top: 0;
    }
    .h3-title{
        font-size: 28px;
        display:flex;
        align-items:center;
    }
    .icon-tag{
        font-size: 30px;
    }
}
.sub-tag{
    font-size: @fs-20;
    padding-left: 1em;
}
.years-tags{
    background: @color-ff;
}
/*tags-list*/
.tags-main,.product-list{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    position: relative;
}
//.tags-main{
//  &#newsList{
//      flex-direction: column;
//      justify-content: center;
//  }
//}
.tags-main{
    .tags-row{
        margin: 0 -15px;
        width:-moz-available;
        width:fill-available;
        width:-webkit-fill-available;
        .tag-warpper{
            width:100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .i_c_list{
                height: auto;
                width:33.3%;
                float: left;
                margin:15px 0;
                padding: 0 15px;
                .i_c_list_cen > a{
                    display: block;
                    height: 100%;
                    width: 100%;
                }
                @media @max850{
                    width: 100%;
                    .i_c_img{
                        width: 100%;
                        min-height: 400px;
                        max-height: 400px;
                        overflow: hidden;
                    }
                }
            }
        }
        .tag-warpper::after{
            content: "";
            width: 30%;
            height: 0px;
            visibility: hidden;
        }
        &:nth-child(3){
            .tag-warpper{
                .i_c_list{
                    &:first-child{
                        width:100%;    
                        height: auto;
                        // max-height: 400px;
                        overflow: hidden;
                        @media @max850{
                            max-height: 100%;
                        }
                        .i_c_list_cen a {
                            display: flex;
                            flex-direction: row-reverse;
                            justify-content: space-between;
                            @media @max850{
                                flex-direction: column;
                            }
                        }
                        .content-tag-warp{
                            flex: 1;
                            background: #ececec;
                            padding: 30px;
                        }
                    }
                }
            }
        }
   }
}

.article-tags{
    position: relative;
    flex-basis: 33.33%;
    padding: 0px;
    margin: 8px;
    article{
        text-align: left;
        background: @color-ff;
        border-radius: 2px;
        border: 1px solid transparent;
        // box-shadow: 0 4px 10px rgba(0,0,0,.1);
        height: 100%;
        display: flex;
        transition: all .3s ease-in-out;
        &.status{
            flex-basis: 100%;
            max-width: 100%;
        }
        &:hover{
            border-color: @primary;
            transition: all .3s ease-in-out;
        }
    }
    .tag-img{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height:100%;
        background-size: cover;
        img{
            display: block;
            width: auto;
            max-width: 80%;
            margin: auto;
        }
    }
    .tag-item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        flex-basis: 100%;
    }
    .tag-header{
        padding: 1em;
        display: block;
        width: 100%;
    }
    .tags-warp{
        display: block;
        margin: 0;
        padding: 0;
        margin:1em 0;
    }
    .tags-title{
//      display: block;
        width: 100%;
        height: auto;
        color: @color-e8;
        font-size: @fs-18;
        &:hover{
            color: @primary;
        }
    }
    .tag-summary{
        display: block;
        padding: 1em;
        flex-grow: 1;
        .des{
            font-size: @fs-16;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }
    }
    .exhibition{
        .tag-summary{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .tags-title{
            height: auto;
        }
        .des{
            font-size: @fs-16;
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }
        .date{
            &:before{
                font-family: 'anviz' !important;
                content: "\ea26";
                font-size: @fs-24;
                padding-right: 4px;
            }
        }
        .address{
            &:before{
                font-family: 'anviz' !important;
                content: "\e956";
                font-size: @fs-24;
                padding-right: 4px;
            }
        }
        .booth{
            &:before{
                font-family: 'anviz' !important;
                content: "\e9af";
                font-size: @fs-24;
                padding-right: 4px;
            }
        }
    }
    .tag-footer{
        height: 70px;
        padding: 16px;
        border-top: 1px solid @color-ee;
    }
    .tag-date{
        font-size: @fs-16;
        display: flex;
        align-items: center; 
        &:before{
            font-family: 'anviz' !important;
            content: "\ea26";
            font-size: @fs-24;
            padding-right: 4px;
        }
    }
}
.news-tags{
    .tag-list{
        height: auto;
        display: flex;
        &.timezone-year{
            justify-content: space-between;
            background-color: #fff;
            padding: 15px;
            border-radius: 10px;
            align-items: center;
            .year, .timeZone{
                cursor: pointer; 
                position: relative;
                min-width: 300px;

                >div{    
                    display: flex;
                    align-items: center;
                }
                .tag-list{
                    display: none;
                    position: absolute;
                    left: 0;
                    right: 0;
                    z-index: 9;
                    .tag-item{
                        padding: 0;
                        height: auto;
                        border-bottom: 1px solid #ddd;
                        &:last-child{
                            border: 0;
                        }
                        a{
                            width: 100%;
                            background: #eee;
                            padding: 4px 10px;
                        }
                    }
                    &.timezoneList{
                        width: max-content;
                        height: 500px;
                        overflow-y: auto;
                        flex: 1;
                    }
                }
            }
        }
    }
}
.news-nav{
    width: 100%;
    height: auto;
    .tag-item{
        a{
            display: inline-block;
            min-width: 50px;
            height: 30px;
            border-radius: 30px;
            padding: 4px 10px;
            background: @color-ee;
            &:hover{
                background: @primary;
                color: @color-ff !important;
            }
        }
        .year-active{
            background: @primary;
            color: @color-ff !important;
        }
    }
}