.cover-masonry li, .cover-slider li, .cover-thumbnail-list li, .cover-list li, .cover-gallery li{ list-style-type:none; } .cover-masonry h2, .cover-list h2, .cover-gallery h2, .cover-thumbnail-list h2 { margin-bottom: 26px; font-weight: bold; font-size:1.5em; border-bottom: 1px solid #ebebeb; } .cover-thumbnail-list { overflow: hidden; max-width: 1200px; margin: 0 auto 40px; } .cover-thumbnail-list ul { margin-left: -16px; } .cover-thumbnail-list ul li { float: left; width: 25%; padding:20px 0 33px 16px; box-sizing: border-box; } .cover-thumbnail-list ul li .thum { display: block; position: relative; overflow: hidden; height: 0; margin-bottom: 17px; padding-bottom: 98.4848%; background-color: #ebebeb; } .cover-thumbnail-list ul li .thum:before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 0; width: 22px; height: 18px; margin: -9px 0 0 -11px; background: url(./images/ico_package.png) no-repeat -150px -300px; } .cover-thumbnail-list ul li .thum img { display: block; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; } .cover-thumbnail-list ul li a { display: block; text-decoration: none; } .cover-thumbnail-list ul li .title { display: block; overflow: hidden; width: 90%; margin-bottom: 2px; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1em; color: #000; -webkit-transition: color .2s; transition: color .2s; } .cover-thumbnail-list ul li .excerpt { display: block; display:-webkit-box; overflow: hidden; width: 90%; height:auto; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom: 16px; text-overflow:ellipsis; font-size: 0.875em; line-height: 1.375rem; color: #666; -webkit-transition: color .2s; transition: color .2s; } .cover-thumbnail-list ul li .excerpt.protected:before { content: ""; display: inline-block; width: 9px; height: 13px; margin-right: 10px; background: url(./images/ico_package.png) no-repeat -100px -350px; vertical-align: middle; } .cover-thumbnail-list ul li .more { display: inline-block; font-size: 0.75em; color: #d4bca7; vertical-align: top; } .cover-thumbnail-list ul li .more:after { content: ""; display: inline-block; width: 4px; height: 8px; margin: 3px 0 4px 6px; background: url(./images/ico_package.png) no-repeat 0 -300px; vertical-align: top; } .cover-thumbnail-list ul li .thum:after { content: ""; background-color: rgba(255,255,255,0); -webkit-transition: background-color .5s; transition: background-color .5s; } .cover-thumbnail-list ul li a:hover .thum:after { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(255,255,255,0.5); } .cover-thumbnail-list ul li a:hover .title{ color: #7a583a; } .cover-thumbnail-list ul li a:hover .excerpt{ color: #000; } .cover-thumbnail-list ul li a:hover .more { color: #7A583A; } .cover-thumbnail-list ul li a:hover .more:after { background-position-x: -50px; } .layout-float .cover-thumbnail-list ul { margin-left: -36px; } .layout-float .cover-thumbnail-list ul li { width: 33.3333%; padding-left: 36px; } .color-dark .cover-thumbnail-list ul li{ border-color: #000; } .color-dark .cover-thumbnail-list h2{ border-color: #7A583A; } .color-dark .cover-thumbnail-list ul li .more{ color: #7a583a; } .color-dark .cover-thumbnail-list ul li a:hover .title, .color-dark .cover-thumbnail-list ul li a:hover .more { color: #d4bca7; } .color-dark .cover-thumbnail-list h2, .color-dark .cover-thumbnail-list ul li a:hover .excerpt{ color: #fff; } .color-dark .cover-thumbnail-list ul li .excerpt { color: #808080; } .color-dark .cover-thumbnail-list ul li .title { color: #ccc; } .color-dark .cover-thumbnail-list ul li .more:after { background-position-x: -50px; } .color-dark .cover-thumbnail-list ul li a:hover .more:after { background-position-x: 0; } .cover-slider-indicator{ position: absolute; left: 50%; transform: translateX(-50%); list-style: none; text-align: center; bottom: 20px; } .cover-slider-indicator li{ width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; display: inline-block; cursor: pointer; margin: 0 5px; transition: all 0.5s ease-in-out; } .cover-slider-indicator li.active{ background-color: #fff;} .cover-slider { position: relative; overflow: hidden; width: 100%; margin:0 auto 40px; padding: 0; background-color: #000; box-sizing: border-box; } .cover-slider ul li { display: table; width: 100%; height: 360px; text-align: center; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; background-color: #fff; } .cover-slider ul li a { display: table-cell; background-color: rgba(0,0,0,0.25); text-decoration: none; color: #fff; vertical-align: middle; } .cover-slider ul li .category { display: inline-block; margin-bottom: 16px; border-bottom: 1px solid #fff; } .cover-slider ul li .title { display: block; max-width: 70%; margin: 0px auto 0; font-size: 1.8em; color: #fff !important; line-height: 1.3; } .cover-slider ul li .btn { border-color: #fff; color: #fff; } .cover-slider ul li .btn:hover { background-color: #fff; color: #000; } .cover-slider .prev, .cover-slider .next { position: relative; width: 60px; height: 60px; font-size:3em; color:#fff; border-radius:50px; line-height:0em; background-color: rgba(255,255,255,0); } .cover-slider button span{ display:none; } .cover-slider .prev { float: left; margin:-210px 0 0 30px; } .cover-slider .prev:before{ content:"\f053"; font-family:"Font Awesome 5 Free"; font-weight:600; padding-right:6px; } .cover-slider .next { float: right; margin: -210px 30px 0 0; } .cover-slider .next:before{ content:"\f054"; font-family:"Font Awesome 5 free"; font-weight:600; padding-left:6px; } .cover-slider .prev:hover, .cover-slider .next:hover { background-color: rgba(255,255,255,0.2); } .cover-masonry { margin: 0 auto -1px; padding: 30px 0 29px; border-bottom: 1px solid #ebebeb; } .cover-masonry h2 { margin-bottom: 30px; font-weight: bold; } .cover-masonry ul { margin-left: -20px; } .cover-masonry ul li { float: left; width: 33.33333333%; margin: 0 0 37px; padding-left: 20px; box-sizing: border-box; } .cover-masonry ul li:nth-child(3n+1) { } .cover-masonry ul li a { display: block; text-decoration: none; color: #080808; background:#fff; } .cover-masonry ul li .thum { display: block; } .cover-masonry ul li .thum img { width: 100%; height: auto; } .cover-masonry ul li .article-info{ padding:15px; } .cover-masonry ul li .category { display: inline-block; margin-bottom: 12px; border-bottom: 1px solid #a3a3a3; font-size: 0.875em; color: #808080; } .cover-masonry ul li .title { display: block; font-size: 1em; line-height: 1.4444; } .cover-masonry ul li a:hover .title { text-decoration: underline; color: #4e2e28; } .cover-masonry ul li .excerpt { display: block; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; max-height: 6.4em; font-size: 0.9375em; line-height: 1.6; color: #808080; margin: 8px 0 12px 0; } .cover-list { margin: 0 auto -1px; padding: 30px 0 39px; border-bottom: 1px solid #ebebeb; max-width: 940px; } .cover-list h2 { margin: 15px 0; font-weight: bold; } .cover-list ul li { border-top: 1px solid #ebebeb; } .cover-list ul li:first-child { border-top: 0; } .cover-list ul li a { display: block; min-height: 180px; margin: 30px 0 30px; text-decoration: none; color: #080808; background: #fff; } .cover-list ul li figure { float: right; position: relative; width: 180px; height: 180px; margin: 0 0 0 50px; background-color: #f6f6f6; } .cover-list ul li figure:before { content: "NO IMAGE"; position: absolute; top: 50%; left: 0; z-index: 0; width: 100%; height: 18px; margin: -9px 0 0 0; text-align: center; font-size: 0.875em; color: #cbcbcb; } .cover-list ul li figure img { position: relative; z-index: 10; width: 100%; height: 100%; } .cover-list ul li .article-info{ box-sizing: border-box; padding: 20px; } .cover-list ul li .category { display: inline-block; margin-bottom: 12px; border-bottom: 1px solid #a3a3a3; font-size: 0.875em; color: #808080; } .cover-list ul li .title { display: block; font-size: 1em; line-height: 1.4444em; } .cover-list ul li a:hover .title { text-decoration: underline; color: #666; } .cover-list ul li .excerpt { display: block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height: 4.8em; margin-bottom: 9px; margin-top: 8px; font-size: 0.9375em; line-height: 1.6; color: #666; } .cover-list ul li .date { display: block; font-size: 0.8125em; color: #999; } .cover-gallery { margin: 0 auto -1px; padding: 30px 0 45px; border-bottom: 1px solid #ebebeb; max-width: 940px; } .cover-gallery h2 { margin-bottom: 30px; font-weight: bold; } .cover-gallery ul { display: inline-block; margin-left: -12px; } .cover-gallery ul li { float: left; width: 25%; margin: 0 0 12px 0; padding-left: 12px; box-sizing: border-box; } .cover-gallery ul li a { display: block; position: relative; width: 100%; background-color: #ebebeb; } .cover-gallery ul li .title { display: block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; position: absolute; top: 50%; left:0; z-index: 30; overflow: hidden; width: 100%; max-height: 4.2em; text-align: center; line-height: 1.4; padding: 0 20px; color: #fff; box-sizing: border-box; transform: translateY(-50%); visibility: hidden; } .cover-gallery ul li a:hover .title { visibility: visible; } .cover-gallery ul li a:hover:after { content: ""; position: absolute; top: 0; left: 0; z-index: 20; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); } .cover-gallery ul li a:before { content: "NO IMAGE"; position: absolute; top: 50%; left: 0; z-index: 0; width: 100%; height: 18px; margin: -9px 0 0 0; text-align: center; font-size: 0.875em; color: #cbcbcb; } .cover-gallery ul li figure { height: 0; padding-bottom: 100%; } .cover-gallery ul li figure img { position: relative; width: 100%; height: auto; z-index: 10; } /* Media Screen - Mobie */ @media screen and (max-width:767px) { .cover-thumbnail-list { padding: 0 20px; } .cover-thumbnail-list { margin-bottom: 20px; } .cover-thumbnail-list ul { margin-left: -10px; } .cover-thumbnail-list ul li { width: 50%; margin-bottom: 20px; padding-left: 10px; } .cover-thumbnail-list ul li .title { padding-right: 10%; font-size: 1em; box-sizing: border-box; } .cover-thumbnail-list ul li .excerpt { height: 2.5rem; margin-bottom: 8px; padding-right: 10%; font-size: 0.75em; line-height: 1.25rem; } .layout-float .cover-thumbnail-list{ padding: 0 10px; } .layout-float .cover-thumbnail-list ul { margin-left: -10px; } .layout-float .cover-thumbnail-list ul li { width: 50%; padding-left: 10px; } .cover-slider{ max-width:100%; margin:0; } .cover-slider h2{ padding-left:18px; } .cover-slider ul{ height:360px; color:#fff; } .cover-slider ul li { width: 100%; box-sizing: border-box; } .cover-slider ul li > a { width:100%; background-size: cover; } .cover-slider ul li > .article-info { width:100%; position:absolute; background:rgba(0,0,0,0.25); } .cover-slider ul li .category a{ color: #fff; } .cover-slider ul li .title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height: 9.6em; padding: 0 45px 5px; margin-top: 30px; font-size: 2em; text-align:center; } .cover-slider ul li .index { left: 49%; bottom: 10px; border-top: 1px solid #fff; } .cover-slider .prev { top: auto; bottom: 0; left: 0; color:#fff; margin: -200px 0 0 20px; } .cover-slider .next { top: auto; right: 0; bottom: 0; color:#fff; margin: -200px 20px 0 0; } .cover-masonry ul li { float: none; width: 50%; } .cover-masonry ul li .category, .cover-list ul li .category { margin-bottom: 8px; } .cover-thumbnail-list ul li .title, .related-articles ul li .title, .cover-list ul li .title { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height: 4.2em; line-height: 1.4; } .cover-list { padding: 30px 0 40px; } .cover-list ul li a { min-height: 100px; } .cover-list ul li figure { width: 113px; height: 113px; margin: 0 0 0 18px; } .cover-list ul li .title { -webkit-line-clamp: 2; } .cover-list ul li .excerpt { display: none; } .cover-gallery { padding: 60px 0 70px; } .cover-gallery ul li { width: 33.3%; } }