﻿.listing { display: inline-block; float: right; margin-left: 20px; width: calc(100% - 320px); margin-bottom: 50px }
.listing.speed{min-height:900px}
.listing ul { text-align: justify; min-height: 1212px }
.listing.multimedia ul { min-height: unset }
.listing ul li {  height: auto; position: relative; overflow: hidden; background: #fff; display: inline-block;}
.listing ul li.gap { opacity: 0; height: 0; display: inline-block }
.listing ul li:nth-of-type(3n) { margin-left: 0 }
.listing ul li:nth-last-child(-n+3) { margin-bottom: 0 }
.listing ul li a { display: inline-block;float:right;width:100% }
.listing ul li .secName { padding: 2px 10px;  top: 0px; right: 0px; z-index: 1 }
.listing ul li .imageCntnr { position: relative; overflow: hidden; padding-bottom: 67%; display: inline-block; float: right; width: 100% }
.listing ul li a img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0 auto; width: 100%; height: 100%; border: none; filter: brightness(100%) contrast(100%); -webkit-filter: brightness(100%) contrast(100%); -moz-filter: brightness(100%) contrast(100%); -o-filter: brightness(100%) contrast(100%); -ms-filter: brightness(100%) contrast(100%); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; }
.listing ul li:hover img { filter: brightness(108%) contrast(108%); -webkit-filter: brightness(108%) contrast(108%); -moz-filter: brightness(108%) contrast(108%); -o-filter: brightness(108%) contrast(108%); -ms-filter: brightness(108%) contrast(108%) }
.listing ul li .desc { width: 100%; cursor: pointer; display: inline-block; float: right; padding: 10px 0 }
.listing ul li .desc p { display: inline-block; float: right; width: 100%; color: #000; text-align: right; line-height: 1.8; font-size: 14px;   direction: rtl; height: 78px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.listing ul li:hover .desc p { color: #0277bd }
.listing ul li .desc p.date { display: none }
.listing ul li .desc .time { display: inline-block;   font-size: 12px; color: #6E6E6E; float: right; direction: rtl; width: 100%; margin-bottom: 2px; margin-top: 4px; }
.listing ul li .desc .icon-time:before { content: "x"; float: right; margin-left: 8px; font-size: 16px; line-height: 1.2; display: none }
.listing ul li .desc .time span { margin-left: 16px; position: relative; float: right; line-height: 1.6; }
.listing ul li .desc .time span:after { content: ""; position: absolute; left: -8px; top: 2px; width: 1px; height: 14px; background: #b9b9b9; }
.listing ul li .desc .time span:last-child:after { display: none }
.listing ul li.noStats { display: inline-block; width: 100%; float: right; min-height: 230px }
.listing ul li.noStats p { position: absolute; top: 50%; transform: translateY(-50%);   font-size: 14px; color: #000; width: 100%; text-align: center }
.listing .more { display: inline-block; width: 100%; height: 28px; background: #0277bd; padding: 0 10px; text-align: left; color: #fff;   font-size: 13px; line-height: 2.3 }
.listing .more:hover { background: #1b92d9 }
.listing .more span { float: left; margin-right: 10px }
.listing .more .icon-more:before { content: "h"; color: #fff; font-size: 14px; line-height: 2.2 }
.listing ul li .secName{ font-size: 13px;color: #fff;background: rgba(0,0,0,0.7);position: absolute;z-index: 1;line-height: 2.3;}
/*.listing ul li .secName .icon {background-color: #000;width: 30px;height: 25px;position: absolute;top: 0;margin-left: 0;right: 0;}*/
.listing ul li .secName .icon.icon-album:before{content: 'n';color: #fff;font-size: 13px;float: left;left: 50%;position: absolute;top: 50%;transform: translate(-50%,-50%);}
.listing.multimedia .subCat { display: inline-block; width: 100%; float: right; margin-bottom: 20px }
.listing.multimedia .subCat:last-child { margin-bottom: 0 }


.proPlayer .title a { display: inline-block; float: left; color: #0277BD; font-size: 14px;   }
.proPlayer .remainContent .listing { width: 100%; margin-left: 0; background-color: #fff; padding-top: 20px; border-radius: 6px; margin-bottom: 40px;  }
.proPlayer .remainContent .listing .ttl { display: none }
.proPlayer .remainContent .listing .title h2 { margin-right: 16px }
.proPlayer .remainContent .listing .title a { margin-left: 10px }

.proPlayer .remainContent .listing ul li { border-radius: 6px; width: calc((100% - 48.1px) / 4); margin-left: 0; float: none; margin-bottom: 16px; border: 0;}
.proPlayer .remainContent .listing ul li:nth-of-type(3n) { margin-left: 0 }
.proPlayer .remainContent .listing ul li:nth-of-type(4n) { margin-left: 0 }
.proPlayer .remainContent .listing ul li .desc p.date { display: inline-block; font-size: 12px; max-height: unset; font-weight: unset; position: relative; color: #AAAAAA; line-height: 1; height: auto; overflow: unset; margin-bottom: 0 }

.proPlayer .remainContent .listing ul li.gap{margin-bottom:0!important;height:0;}
.mainTour .title:after {
    background-color: #efefef;
}
.mainTour .remainContent .multimedia ul {
    padding: 0 16px;
}


/*.proPlayer .remainContent .listing ul li.gap { display: none }*/
.proPlayer .remainContent .bx-wrapper { margin: 0 }
.proPlayer .remainContent .listing.multimedia ul li .desc p.date { font-weight: unset }
.proPlayer .remainContent .listing ul li .secName { left: 0; width: 30px; height: 25px; overflow: hidden; padding: 0; right: auto; top: 0 }
.proPlayer .remainContent .listing ul li .secName .icon { background-color: #000; width: 30px; height: 25px; position: absolute; top: 0; margin-left: 0; right: 0; }
.proPlayer .remainContent .listing ul li .secName .icon:before { content: 'm'; color: #fff; font-size: 8px; float: left; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.proPlayer .remainContent .listing ul li .secName .icon.icon-album:before { content: 'n'; color: #fff; font-size: 13px; float: left; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.proPlayer .remainContent .listing ul li .desc .secName { position: relative; width: auto; height: auto; color: #0277bd; font-size: 12px; margin-bottom: 6px; background: none;min-width:2px;min-height:27px }
.proPlayer .remainContent .listing ul li .desc .secName.empty{width:30px;height:27px;}
.proPlayer .remainContent .listing ul li .secName.mediaIcon { display: none }
.proPlayer .remainContent .listing ul li.video .secName.mediaIcon,
.proPlayer .remainContent .listing ul li.album .secName.mediaIcon,
.proPlayer .remainContent .listing ul li.sed .secName.mediaIcon,
.proPlayer .remainContent .listing ul li.infograph .secName.mediaIcon { display: inline-block }
.proPlayer .remainContent .listing .more { display: inline-block ; width:150px; height: 40px;margin:30px calc((100% - 150px) / 2) 0; margin-bottom:20px;background: #0277bd; text-align:center; color: #fff;   font-size: 13px; line-height:40px;border-radius:30px }
.proPlayer .remainContent .listing .more:hover { background: #1b92d9 }
.proPlayer .remainContent .listing .more span { float: left; margin-right: 10px;display:none }
.proPlayer .remainContent .listing .more .icon-more:before { content: "h"; color: #fff; font-size: 14px; line-height: 2.2 }

.proPlayer .remainContent .listing ul li.noStats { width: 100%; min-height: 80px; }

@media screen and (min-width:1536px) and (max-width:1599px) {
     .proPlayer .remainContent .listing ul li { width: calc((100% - 32.1px)/ 3) }
    .proPlayer .remainContent .listing ul li:nth-of-type(4n) { margin-left: 0 }
    .proPlayer .remainContent .listing ul li:nth-of-type(3n) { margin-left: 0 }
}

@media screen and (min-width:1440px) and (max-width:1535px) {
     .proPlayer .remainContent .listing ul li { width: calc((100% - 32.1px)/ 3) }
    .proPlayer .remainContent .listing ul li:nth-of-type(4n) { margin-left: 0 }
    .proPlayer .remainContent .listing ul li:nth-of-type(3n) { margin-left: 0 }
}

@media screen and (min-width:1360px) and (max-width:1439px) {
        .proPlayer .remainContent .listing ul li { width: calc((100% - 32.1px)/ 3) }
    .proPlayer .remainContent .listing ul li:nth-of-type(4n) { margin-left: 0 }
    .proPlayer .remainContent .listing ul li:nth-of-type(3n) { margin-left: 0 }
}

@media screen and (min-width:1280px) and (max-width:1359px) {
     .proPlayer .remainContent .listing ul li { width: calc((100% - 32.1px) / 3) }
    .proPlayer .remainContent .listing ul li:nth-of-type(4n) { margin-left: 0 }
    .proPlayer .remainContent .listing ul li:nth-of-type(3n) { margin-left: 0 }
}

@media screen and (min-width:1152px) and (max-width:1279px) {
        .proPlayer .remainContent .listing ul li { width: calc((100% - 16.1px) / 2) }
    .proPlayer .remainContent .listing ul li:nth-of-type(4n) { margin-left: 0 }
    .proPlayer .remainContent .listing ul li:nth-of-type(2n) { margin-left: 0 }
}

@media screen and (min-width:1024px) and (max-width:1151px) {
        .proPlayer .remainContent .listing ul li { width: calc((100% - 16.1px) / 2) }
    .proPlayer .remainContent .listing ul li:nth-of-type(4n) { margin-left: 0 }
    .proPlayer .remainContent .listing ul li:nth-of-type(2n) { margin-left: 0 }
}

@media only screen and (max-width: 1023px) {
     .proPlayer .remainContent .listing ul li .imageCntnr { width: 100%; padding-bottom: 66.5% }
    .proPlayer .remainContent .VerticalSection.listing ul li .imageCntnr{padding-bottom:178%}
    .proPlayer .remainContent .listing ul li .desc { width: 100%; margin-top: 0 }
    .proPlayer .remainContent .Pcnt ul li:first-child { margin-right: 16px }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
        .proPlayer .remainContent .listing ul li:first-child { width: 100%; margin-left: 0; height: auto; margin-bottom: 20px; }
    .proPlayer .remainContent .listing ul li:first-child .imageCntnr { padding-bottom: 67%; width: 100%; height: auto;}
    .proPlayer .remainContent .listing ul li:first-child .desc { height: auto; padding: 0 10px; width: 100%;right:0;left:0; position: absolute; bottom: 0; background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box; }
    .proPlayer .remainContent .listing ul li { margin-right: 0; width: 100%; height: 66px; margin-bottom: 20px; border: 0 }
    .proPlayer .remainContent .listing ul li .imageCntnr { width: 100px; padding-bottom: calc((100px * 66.5)/ 100);float: right }

        .proPlayer .remainContent .listing ul li .desc { background: #fff; height: 100%; width: calc(100% - 100px); padding: 0 10px 0 0; position: relative; float: left; }
    .proPlayer .remainContent .listing ul li:first-child .desc p { font-size: 16px; max-height: 56px; padding: 0; color: #fff; height: auto }
    .proPlayer .remainContent .listing ul li:first-child .desc { padding: 0 10px 10px 0 }
    .proPlayer .remainContent .listing ul li:first-child .desc .time { display: none }
    .proPlayer .remainContent .listing ul li:first-child .desc p.date { color: #fff; font-size: 11px; padding: 10px 0 0 0; margin-bottom: 5px; margin-top: 8px; }
    .proPlayer .remainContent .listing ul li .desc p { font-size: 13px; max-height: 40px; color: #000; }
    .proPlayer .remainContent .listing ul li .desc p.date { bottom: 5px; right: 0; line-height: 1; height: auto; font-size: 10px; margin-top: 13px; color: #AAAAAA }

        .proPlayer .remainContent .listing ul li:first-child .secName, .proPlayer .remainContent .listing ul li:first-child .secName .icon { width: 50px; height: 35px; background-color: #000 }
    .proPlayer .remainContent .listing ul li:first-child .secName { right: auto; left: 0 }
    .proPlayer .remainContent .listing ul li:first-child .secName .icon:before { font-size: 14px }
    .proPlayer .remainContent .listing ul li .secName, .proPlayer .remainContent .listing ul li .secName .icon { width: 25px; height: 20px; background-color: #000 }
    .proPlayer .remainContent .listing ul li .secName { right: 75px }
    .proPlayer .remainContent .listing ul li .secName .icon:before { font-size: 8px }
/*
}