* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,blockquote,fieldset,input,textarea{list-style: none}
a,a:visited{outline:none; text-decoration:none;}
a:hover{text-decoration:underline;}
.fwrap{overflow: hidden; }
.fleft{float: left; }
.fright{float: right; }
.center{margin: 0 auto; }
.wauto{width: auto; }
.bnr{overflow: hidden; }
.img{overflow: hidden; position: relative;}
.date{font-size: 10px; color:#999; }
.header-main {background: #000;box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.col1300{width: 1200px; margin: 0 auto; padding: 0; }
.col960{width: 960px; }
.col620{width: 620px; }
.col366{width: 366px; }
.col320{width: 320px; }
.top3{margin-top: 3px; }
.top20{margin-top: 20px; }
.bottom20{margin-bottom: 20px; }
.inbottom20{padding-bottom: 20px; }
.intop350{padding-top: 350px; }
.mleft19{margin-left: 19px;}
.mtop16{margin-top: 30px;}
.mbottom7{margin-bottom: 7px;}
.mright20{margin-right: 20px;}
.mleft20{margin-left: 20px;}
.clearfix:before,
.clearfix:after{display: table; content: " ";}
.clearfix:after{clear: both;}
body {
background-color: #f5f5f5;
}
.root{display: flex; justify-content: center;}
.root-bd{/*overflow: hidden;*/ }
.bd-rel-contr{display: flex; justify-content: center; position: relative; margin: 0 auto; }
.bd-contr{background: #f9f9f9; margin: 3px auto 30px auto; }
.root-hd{position: relative; z-index: 6}
.hd-hd{background: #fbfbfb; border-bottom: 1px solid #f0f0f0; padding:7px 10px;}
.hd-hd .fleft span{color:#999; font-size: 12px; }
.hd-hd .fleft a, .hd-hd .fleft a:visited{color:#999; font-size: 12px; display: inline-block; margin: 0 20px; }
.hd-search {
display: flex;
}
.hd-search form {
position: relative;
display: flex;
gap: 5px;
}
.hd-search input[type="text"] {
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 4px;
width: 180px;
font-size: 14px;
}
.hd-search input[type="text"]:focus {
outline: none;
border-color: #4a6fa5;
box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2);
}
.hd-search .btn {
padding: 6px 12px;
background: linear-gradient(to right, #FFE600, #00FF4C);
color: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
width: 40px;
}
.hd-search .fa-search{position: absolute;right: 10px;top: 7px;color: #fff;font-size: 16px;}
.hd-search .btn:hover {
background-color: #3a5a8a;
}
/* Мобайл дээр ажиллах */
@media (max-width: 992px) {
.hd-bd {
flex-wrap: wrap;
gap: 15px;
}
.header-menu {
order: 3;
width: 100%;
justify-content: center;
margin-top: 10px;
}
.hd-search input[type="text"] {
width: 150px;
}
}
@media (max-width: 768px) {
.hd-bd {
flex-direction: column;
align-items: stretch;
}
.logo {
align-self: flex-start;
}
.centering {
align-self: flex-end;
}
.header-menu {
order: 0;
justify-content: flex-start;
overflow-x: auto;
padding: 10px 0;
}
}
@media (max-width: 480px) {
.centering {
width: 100%;
justify-content: space-between;
}
.hd-search {
width: 100%;
}
.hd-search form {
width: 100%;
}
.hd-search input[type="text"] {
width: 100%;
}
.header-menu {
gap: 10px;
}
.header-menu a {
font-size: 12px;
padding: 6px 8px;
}
}
.bottommidllebnr{width: 940px; height: 100px; overflow: hidden; background: #ccc; margin-top: 15px;}
.hd-bd {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #eee;
gap: 20px;
}
.centering {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.hd-bd .logo {
flex-shrink: 0;
}
.hd-bd .logo a, .hd-bd .logo a:visited{
display: block;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
}
.uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle{color: #fff;font-weight: 500;padding: 6px 6px;white-space: nowrap;text-transform: uppercase;font-size: 14px;line-height: 45px;}
.uk-navbar-nav>li:hover>a, .uk-navbar-nav>li>a.uk-open, .uk-navbar-nav>li>a:focus{color: #00FF4C;}
[class*=uk-navbar-dropdown-bottom]{margin-top: 0}
.uk-nav>li>a{text-transform: uppercase;font-size: 14px;font-weight: 500;line-height: 25px;color: #000}
.uk-navbar-dropdown-nav>li>a:focus, .uk-navbar-dropdown-nav>li>a:hover{color: #00FF4C;}
.hd-menu{}
.hd-menu ul{width: 100%;display: flex;align-items: center }
.hd-menu ul:after {content: "";display: table;clear: both;}
.hd-menu > ul > li {position: relative;}
.hd-menu > ul > li > ul {display: none; position: absolute; z-index: 1;list-style: none}
.hd-menu > ul > li:hover > ul {display: block;}
.hd-menu > ul > li > ul > li{float: none; width: 150px;}
.hd-menu > ul > li > ul > li > ul > li{padding-left: 15px; background: #454d62; width: 150px;}
.home-bd{position: relative; overflow: hidden; margin-top: 40px;}
.home-title{height: 34px; background: #f2f2f2; overflow: hidden; }
.home-title em{float:left; width:auto; text-transform: uppercase; color:#fff; font-size: 13px; padding:8px 10px; /*background: #39FF14;*/ display: block; font-style: normal; }
.home-title a, .home-title a:visited{float:left; width:auto; text-transform: uppercase; color:#fff; font-size: 13px; padding:8px 10px; background: #ff0101; display: block; }
.home-title a span, .home-title em span{font-weight: bold; width: auto; height: auto; background: none; float: none; }
.home-title span{display: inline-block; width: 38px; height: 34px; float: left; }
.hd-bd {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
padding: 10px 0;
}
.logo {
width: 310px;
height: 80px;
}
.logo img {
height: 100%;
width: 100%;
object-fit: contain;
}
.centering {
justify-self: end;
}
@media (max-width: 768px) {
.hd-bd {
flex-direction: column;
gap: 15px;
}
.logo {
width: 150px;
height: 45px;
}
.header-menu {
order: 2;
}
.centering {
order: 3;
width: 100%;
}
}
.home-social{position: absolute; right: -50px; top: 0; width: 50px; height: 160px; background: #000; }
.newcontent{}
.newcontent ul{}
.newcontent ul li{width: 100%; overflow: hidden; background: #f2f2f2; margin-top: 3px; height: 70px; }
.newcontent ul li .img{float: left; width: 70px; height: 70px; margin-right: 10px; }
.newcontent ul li .img a, .newcontent ul li .img a:visited{position:absolute; width: 70px; height: 70px; /*background: url("assets/img.png") 0 0 repeat; */display: block; z-index: 1;}
.newcontent ul li .img a:hover{background: none; text-decoration: none; }
.newcontent ul li .txt{padding: 10px 10px 10px 0;}
.newcontent ul li .txt a, .newcontent ul li .txt a:visited{color:#555fe5; font-size: 14px; font-weight: bold; line-height: 1; }
.top-featured{margin-top: 3px; position: relative; width: 100%; overflow: hidden; }
.top-featured a.prev{position: absolute; display: block; width: 25px; height: 30px; left:0; top:215px; z-index: 4; background: url("assets/sprite.png") -320px -380px no-repeat;}
.top-featured a.next{position: absolute; display: block; width: 25px; height: 30px; right:0; top:215px; z-index: 4; background: url("assets/sprite.png") -350px -380px no-repeat; }
.top-featured:hover a.prev{background: url("assets/sprite.png") -150px -220px no-repeat; }
.top-featured:hover a.next{background: url("assets/sprite.png") -180px -220px no-repeat; }
.top-featured ul{}
.top-featured ul li{position: relative; width: 300px; height: 460px; overflow: hidden; }
.top-featured ul li a, .top-featured ul li a:visited{text-align: center; padding: 15px 10px; bottom:0; left:0 ; width:300px; display:block; overflow: hidden; color:#fff; font-size: 18px; font-weight: bold; text-transform: uppercase; position: absolute; z-index: 10; }
.top-featured ul li .img{width: 300px; height: 460px; background: #f2f2f2; }
.top-featured ul li .img a{position: absolute; width: 300px; height: 460px; /*background: url("assets/img.png") 0 0 repeat;*/ z-index: 1; }
.top-featured ul li .img a:hover{background:none; text-decoration: none; }
.top-featured ul li .txt{position: absolute; bottom: 0; left: 0; width: 300px; height:75px; background: #000; opacity: 0.7; z-index: 2; }
.sub-featured{width: 300px; overflow: hidden; margin-top: 3px; }
.sub-featured ul{height:113px;}
.sub-featured .img{float:left; width: 150px; height:113px; margin-right: 10px; }
.sub-featured .img a, .sub-featured .img a:visited{position:absolute; width: 150px; height: 113px; /*background: url("assets/img.png") 0 0 repeat;*/ display: block; z-index: 1;}
.sub-featured .img a:hover{background: none; text-decoration: none; }
.sub-featured .txt{padding:10px 0; height:113px; overflow: hidden; }
.sub-featured .txt a, .sub-featured .txt a:visited{color:#000; font-size: 14px; font-weight: bold; line-height: 17px;}
.sub-featured .txt .date{padding-top: 10px; }
.home-style{width: 100%; overflow: hidden; }
.home-style-hd{padding-bottom: 3px; }
.home-style-hd a, .home-style-hd a:visited{display: block; width: 132px; height: 33px; background: url("assets/sprite.png") -30px -70px no-repeat; }
.home-style-hd a:hover{text-decoration: none; }
.home-style-bd{width: 100%; overflow: hidden; position:relative; }
.home-style-bd .img{width: 100%; height:380px; }
.home-style-bd .txt{width: 620px; padding:20px; position: absolute; left:0; bottom: 14px; background: url("assets/sprite-x.png") 0 -250px repeat-x;}
.home-style-bd .txt .title{}
.home-style-bd .txt .title a, .home-style-bd .txt .title a:visited{color:#eb0a8d; font-size: 21px; font-weight: bold; font-style: italic; }
.home-style-bd .date{color:#f79422; text-align: right; }
.home-cat{}
.home-cat .home-title em{background: #f79422; }
.home-cat .home-title a, .home-cat .home-title a:visited{background: #f79422; }
.home-cat .home-title a span, .home-cat .home-title em span{background: none; }
.home-cat .home-title span{background: url("assets/sprite.png") -50px -220px no-repeat; }
.home-cat .img{float:left; width: 150px; height:113px; margin-right: 10px; }
.home-cat .img a, .home-cat .img a:visited{position:absolute; width: 150px; height: 113px; /*background: url("assets/img.png") 0 0 repeat; */display: block; z-index: 1;}
.home-cat .img a:hover{background: none; text-decoration: none; }
.home-cat .txt{padding:10px 0; height:113px; overflow: hidden; }
.home-cat .txt a, .home-cat .txt a:visited{color:#000; font-size: 14px; font-weight: bold; font-style: italic; }
.home-cat .txt .date{padding-top: 10px; }
.most{}
.most-navs{}
.most-navs ul{width: 100%; overflow: hidden; background: #f2f2f2;}
.most-navs ul li{float: left; width: auto; background: #f2f2f2; text-transform: uppercase; padding:8px 20px; }
.most-contents{}
.most-contents ul{}
.most-contents ul li{width: 100%; overflow: hidden; margin-top: 3px; background: #f2f2f2; padding:10px; }
.most-contents ul li a, .most-contents ul li a:visited{color:#000; font-size: 14px; font-style: italic; }
.article-view {
max-width: 800px;
margin: 20px auto;
padding: 20px;
line-height: 1.6;
color: #2c3e50;
background: #ffffff;
}
.article-header {
margin-bottom: 2rem;
border-bottom: 2px solid #f8f9fa;
padding-bottom: 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.article-title {
font-size: clamp(1.8rem, 4vw, 2.5rem);
line-height: 1.2;
margin: 0 0 1rem 0;
color: #2c3e50;
font-weight: 700;
}
.article-meta {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
align-items: center;
}
.article-meta i {
margin-right: 0.5rem;
color: #007bff;
}
.category-link {
color: #007bff;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.category-link:hover {
color: #0056b3;
text-decoration: underline;
}
/* Онцлох зураг */
.article-featured-image {
margin: 2rem 0;
text-align: center;
}
.featured-img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
border: 4px solid #ffffff;
}
.featured-img:hover {
transform: scale(1.02);
}
.featured-caption {
margin-top: 1rem;
font-style: italic;
color: #6c757d;
font-size: 0.9rem;
}
/* Агуулгын стиль */
.content-body {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 2rem;
}
.content-body ul li{list-style: disc}
.content-body p {
margin-bottom: 15px;
}
.content-body img {
border-radius: 8px;
margin: 1rem 0;
}
.c-content{text-align: justify; font-family: sans-serif!important;font-size: 16px; line-height: 1.75;color: #535353;}
.c-content h1 {color: #222; font-size: 32px;margin: 10px 0px 10px 0px;font-weight: normal;}
.c-content h3 {color: #454d62;font-weight: bold;padding: 0;margin: 0px 0 8px;font-size: 18px;text-transform: uppercase;text-align: center}
.c-content h4 {color: #454d62;font-weight: bold;padding: 0;margin: 0px 0 8px;font-size: 18px;text-transform: uppercase}
.c-content h5 {color: #00497d;font-weight: bold;padding: 0;margin: 0px 0 8px;font-size: 18px;text-transform: uppercase;text-align: center}
.c-content h6 {color: #00497d;font-weight: bold;padding: 0;margin: 0px 0 8px;font-size: 18px;text-transform: uppercase}
.c-content a:hover{color: #0077dd;}
.c-content b, strong { font-weight: 600; }
.c-content a{ color: #0077dd; text-decoration: none; cursor: pointer; }
.c-content a[target=_blank]{text-decoration: underline;}
.c-content .tweetabletext{background-color:#e9ebe4;cursor:pointer;padding-left:0px;padding-right:4px; color: #000;}
.c-content .tweetabletext:after{font-family:"FontAwesome";content:'\f099';margin-left:4px}
.c-content .tweetabletext:hover{background-color:#e2f1f9}
.c-content .tweetabletext:hover:after{font-family:"FontAwesome";content:'\f099';margin-left:4px;color:#00acee}
.c-content figure{margin: 0;}
.c-content figure.image{position: relative; padding: 0; margin: 0; display: inline-block;}
.c-content figure.image figcaption{ background-color: #dbe1ea; font-size: 14px; color: #454d62; text-align: center; font-style: italic; line-height: 1.6; padding: 4px; position: absolute; bottom: 0; box-sizing: border-box; left: 0; right: 0; width: 100% }
/*.c-content blockquote { border-left: 5px solid #0077dd; background: #f1f1f1; padding: 20px; }*/
.c-content .blockquote-second p { color: #333; font-size: 16px; font-style: normal; line-height: 23px; margin: 0; }
.c-content .blockquote-second {border-radius: 3px;position: relative; /* <--- */font-style: normal;text-align: center;padding: 1rem 1.2rem;width: 90%; /* create space for the quotes */color: #4a4a4a;margin: 1rem auto 2rem;color: #4a4a4a;background: #E8E8E8; overflow: hidden; border: none !important;}
.c-content .blockquote-second:hover{box-shadow: 0 0 4px rgba(0,0,0,0.4);-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);-webkit-transition: all 350ms linear;-moz-transition: all 350ms linear;-o-transition: all 350ms linear;-ms-transition: all 350ms linear;transition: all 350ms linear;}
.c-content blockquote { font-weight: 500;padding: 3rem 1.2rem;margin: 2rem auto 2rem;text-align: center;position: relative;color: #4a4a4a;background-color: #EEEEEE;border-radius: 3px;font-style: italic}
.c-content blockquote p{font-size: 14px;line-height: 1.7;padding-left: 10px;margin-top: -.6em;font-family: "Times New Roman";color: #363636}
.c-content blockquote:after {clear: both;content: " "}
.c-content blockquote:before {color: #dbe1ea;content: "“";position: absolute;font-size: 150px;line-height: .1em;font-family: "Times New Roman", Times, serif;left: 7px;top: 25px;}
.c-content .blockquote-third { border-left: 5px solid #0080c3 !important; background: #f1f1f1 !important; padding: 10px 20px !important; overflow: hidden; width: 100%;; border-top: 1px solid #fff !important; border-bottom: 1px solid #fff !important; border-right: 1px solid #fff !important; margin-bottom: 10px !important;}
.c-content ol {
padding-left: 30px
}
.c-content ul {
padding-left: 30px;
}
.c-content caption{ color: #fff; background-color: #007bff; border-color: #007bff; padding: 10px; font-weight: bold; }
.c-content table {
font-size: 13px;
margin: 20px 0;
width: 100%;
border-top: 3px solid #363636;
border-bottom: 2px solid #363636;
border-collapse: collapse
}
.c-content table th {
border: 1px solid #ccc;
border-bottom: 1px solid #363636;
font-weight: bold;
padding: 4px;
color: #363636;
}
.c-content table td {
border: 1px solid #dbe1ea;
padding: 4px;
color: #363636;
font-weight: 300
}
.c-content table th > p,
.c-content table td > p {
margin: 0
}
.c-content table.tright tr:nth-child(even) {
background-color: #fbfdff
}
.c-content table.tleft tr:nth-child(even) {
background-color: #fbfdff
}
.c-content table.tshort td {
padding: 2px
}
@media (min-width: 768px) and (max-width: 978px) {
.c-content blockquote {
width: 400px;
font-size: 1.2em
}
.c-content blockquote > p {
font-size: 1em
}
}
@media (min-width: 601px) and (max-width: 767px) {
.c-content blockquote {
width: 300px;
font-size: 1em
}
.c-content blockquote > p {
font-size: 1em
}
}
@media (max-width: 600px) {
.c-content blockquote {
width: 90%;
font-size: 1em;
padding: 10px 10px 40px 10px !important;
}
.c-content blockquote > p {
font-size: 1em
}
.c-content img{
width: 100% !important;
}
}
@media (max-width: 480px) {
.c-content blockquote {
float: none;
margin: 20px auto;
}
.c-content blockquote:before{
margin-left: -.09em;
font-size: 120px;
top: 19px;
}
}
@media (max-width: 600px) {
.c-content table {
width: 100% !important
}
}
/* Медиа хэсэг */
.media-section {
margin: 3rem 0;
padding: 2rem;
background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
border-radius: 12px;
border: 1px solid #e8e8e8;
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
/* Зургийн галерей */
.photo-gallery {
position: relative;
}
.gallery-main {
margin-bottom: 1rem;
border-radius: 12px;
overflow: hidden;
}
.gallery-item {
margin: 0;
text-align: center;
width: 100%;
}
.gallery-item img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 8px;
cursor: zoom-in;
transition: transform 0.3s ease;
}
.gallery-item img:hover {
transform: scale(1.05);
}
.gallery-caption {
margin-top: 1rem;
font-style: italic;
color: #6c757d;
padding: 0 1rem;
}
.gallery-thumbs {
height: 80px;
margin-top: 1rem;
border-radius: 8px;
overflow: hidden;
}
.gallery-thumbs .swiper-slide {
opacity: 0.6;
cursor: pointer;
transition: opacity 0.3s ease;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-thumbs img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
/* Зургийн сүлжээ */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.photo-item {
margin: 0;
break-inside: avoid;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #f0f0f0;
}
.photo-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}
.photo-item img {
width: 100%;
height: 250px;
object-fit: cover;
cursor: zoom-in;
transition: transform 0.3s ease;
}
.photo-item:hover img {
transform: scale(1.05);
}
.photo-caption {
padding: 1rem;
font-size: 0.9rem;
color: #6c757d;
background: white;
}
/* Видео хэсэг */
.video-container {
position: relative;
margin: 2rem 0;
}
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
}
.video-error {
background: #f8d7da;
color: #721c24;
padding: 1rem;
border-radius: 8px;
text-align: center;
border: 1px solid #f5c6cb;
}
/* Сошиал хэсэг */
.social-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #ffffff 100%);
color: #2c3e50;
padding: 2rem;
border-radius: 16px;
text-align: center;
margin: 3rem 0;
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
border: 2px solid #e9ecef;
}
.social-prompt p {
margin: 0 0 1.5rem 0;
font-size: 1.1rem;
font-weight: 500;
}
.social-buttons {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.copy-link-btn {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
color: #2c3e50;
border: 2px solid #e9ecef;
padding: 10px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.copy-link-btn:hover {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-color: #dee2e6;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
/* Холбоотой нийтлэлүүд */
.related-articles {
margin: 4rem 0;
padding: 2rem;
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
border-radius: 12px;
border-left: 4px solid #3498db;
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.section-title {
font-size: 1.5rem;
color: #212529;
margin: 0 0 1.5rem 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-title i {
color: #007bff;
}
/* Сэтгэгдэл хэсэг */
.comments-section {
margin: 4rem 0 2rem;
padding-top: 3rem;
border-top: 2px solid #e9ecef;
}
.comment-notice {
background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
border: 1px solid #e9ecef;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
border-left: 4px solid #3498db;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.notice-content {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.notice-content i {
color: #3498db;
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.notice-content strong {
color: #2c3e50;
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
align-items: center;
justify-content: center;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
text-align: center;
}
.lightbox-close {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 35px;
font-weight: bold;
background: none;
border: none;
cursor: pointer;
z-index: 10000;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,0.5);
transition: background 0.3s ease;
}
.lightbox-close:hover {
background: rgba(255,255,255,0.2);
}
#lightbox-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.lightbox-nav button {
background: rgba(0,0,0,0.5);
color: white;
border: none;
font-size: 24px;
padding: 12px 16px;
cursor: pointer;
border-radius: 50%;
transition: background 0.3s ease;
pointer-events: all;
}
.lightbox-nav button:hover {
background: rgba(255,255,255,0.2);
}
/* Toast */
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: #28a745;
color: white;
padding: 12px 24px;
border-radius: 8px;
z-index: 10000;
opacity: 0;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Loading spinner */
.loading-spinner {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
color: #6c757d;
}
/* Анимацүүд */
.fade-in {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive design */
@media (max-width: 768px) {
.article-view {
padding: 15px;
}
.article-meta {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.photo-grid {
grid-template-columns: 1fr;
}
.social-buttons {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.gallery-thumbs {
height: 60px;
}
.media-section {
padding: 1rem;
}
.gallery-item img {
height: 250px;
}
.lightbox-nav button {
font-size: 20px;
padding: 8px 12px;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: high) {
.article-title {
color: #000;
}
.social-section {
background: #000;
color: #fff;
}
.copy-link-btn {
background: #fff;
color: #000;
border-color: #000;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.article-view {
background: #fdfdfd;
color: #e0e0e0;
}
.article-title {
color: #111;
}
.content-body {
color: #111;
font-size: 16px;
}
.media-section {
background: #2a2a2a;
border-color: #404040;
}
.related-articles {
background: #fafbfb;
}
.photo-item {
background: #2a2a2a;
box-shadow: 0 2px 8px rgba(255,255,255,0.1);
}
.photo-caption {
background: #2a2a2a;
color: #b0b0b0;
}
}
.newmedee{width: 298px; height: 640px; border: 1px solid #cdcdcd; overflow: hidden;}
.newmedee .hdcomp{height: 35px; width: 298px; background: #e1e1e1; border-bottom: 1px solid #990000;}
.newmedee .hdcomp ul li{float: left; padding:8px 10px 3px 10px; font: bold 14px Tahoma,serif; height:24px; color: #333333;}
.newmedee .hdcomp ul li.sel{color: #fff; background: #ff0000;}
.newmedee .hdcomp ul li a, .latest_news .header ul li a:visited{color: #333333; text-decoration: none;}
.newmedee .hdcomp ul li.sel a{color: #fff;}
.newmedee .bdcomp{width: 298px;}
.newmedee .bdcomp .inner{padding: 0px 15px;}
.newmedee .bdcomp .inner ul{}
.newmedee .bdcomp .inner ul li{padding: 20px 0; border-bottom: 1px dotted #cccccc; overflow: hidden;}
.newmedee .bdcomp .inner ul li .leftdiv{float: left; margin-right: 15px; width: 75px; height: 60px;}
.newmedee .bdcomp .inner ul li .leftdiv .img{width: 75px; height: 60px;}
.newmedee .bdcomp .inner ul li .leftdiv .img a, .width300 .newmedee .bdcomp .inner ul li .leftdiv .img a:visited{ display:block; width: 75px; height: 60px;}
.newmedee .bdcomp .inner ul li .rightdiv{float: left; width: 178px; height: 60px;}
.newmedee .bdcomp .inner ul li .rightdiv .desc{color: #3b5998; font: normal 13px Arial,sans-serif; margin-bottom: 5px;}
.newmedee .bdcomp .inner ul li .rightdiv .desc a, .width300 .newmedee .bdcomp .inner ul li .rightdiv .desc a:visited{color: #3b5998; font: normal 13px Arial,sans-serif;}
.newmedee .bdcomp .inner ul li .rightdiv .time{color: #ff000a; font: normal 11px Arial,sans-serif;}
.rating{}
.rating .home-title a, .rating .home-title a:visited{ width: 130px; color:#f79422; background: #111; font-style: italic; font-weight: bold; }
.rating .home-title a span, .rating .home-title em span{background: none; }
.rating-bd{margin-top: 3px; position: relative; }
.rating-bd .img{width: 300px; height: 304px; }
.rating-bd .txt{position: absolute; top:0; left: 0;width: 300px; height: 304px; background: #000; opacity: 0.2; }
.rating-bd a, .rating-bd a:visited{position: absolute; top:20%; left: 15%;width: 210px; text-align:center; z-index:1; text-transform: uppercase; font-size: 20pt; color:#fff; }
.root-ft{margin-top: 20px}
.ft-top .title{color:#000; font-size: 18px; font-weight: bold; }
.ft-logos{padding:15px 0 0 0;}
.ft-logos ul{width: 100%; overflow: hidden; }
.ft-logos ul li{float: left; width: 140px; overflow: hidden; }
.ft-logos ul li a, .ft-logos ul li a:visited{float:left; display: inline-block; padding-top: 15px; color:#4a7085; font-size: 10px; width: 60px; }
.ft-top{padding: 15px 0;background: #000;}
.foot-bottom{padding: 15px 0;background: #000;border-top: 1px solid #232323}
.ft-menu{}
.ft-menu ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.ft-menu ul li{
margin: 0;
padding: 0;
}
.ft-menu li a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
font-weight: 500;
font-size: 16px;
line-height: 55px;
transition: all 0.3s ease;
position: relative;
}
.ft-menu li a:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ft-menu li a::after {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(to right, #FFE600, #00FF4C);
transition: all 0.3s ease;
transform: translateX(-50%);
border-radius: 1px;
}
.social-list-box{display: flex;align-items: center}
.social-list-btn{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;background: #efefef;border-radius: 8px;transition: 1s ease-in-out}
.social-list-btn i{font-size: 18px;color: #000;}
.social-list-item{margin-left: 10px}
.social-list-item:hover .social-list-btn{transform: translateY(-5px);transition: 1s ease-in-out}
.ft-menu li a:hover::after {
width: 60%;
}
.ft-copyright{font-size: 16px;line-height: 20px;color: #fff}
.ft-menu li a.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.ft-menu li a.active::after {
display: none;
}
.ft-menu-bot{display: flex; justify-content: center; color:#067ab4; font-size: 11px; padding-left: 20px; padding-bottom: 20px;}
/*.ft-tool{position:absolute; z-index:1111; width:100px; height: 100px; left:1000px;}*/
.ft-tool{margin-left: 970px; position: fixed; top: 623px; width: 210px; height: 50px;}
.ft-tool a, .ft-tool a:visited{display: inline-block; padding: 10px 0 10px 35px; color:#eb0a8d; text-transform:uppercase; font-size: 11px; background: url("assets/up.png") 0 0 no-repeat; }
.ft-info-box{display: flex;align-items: center}
.ft-info-icon{display: flex;align-items: center;justify-content: center;font-size: 16px;margin-right: 10px;color: #000;width: 22px;height: 22px;background: #fff;border-radius: 6px;}
.ft-info-txt{font-size: 16px;line-height: 20px;color: #fff}
.copyright{position: absolute; left: 0; bottom:-30px; padding:10px; color:#fff; font-size: 10px;}
.contentlist{}
.contentlist ul{}
.contentlist ul li{width: 100%; overflow: hidden; margin-bottom: 20px;}
.contentlist ul li .img{float:left; width: 220px; height: 150px; margin-right: 20px; }
.contentlist ul li .img a, .contentlist ul li .img a:visited{position:absolute; width: 220px; height: 150px; /*background: url("assets/img.png") 0 0 repeat; */display: block; z-index: 1;}
.contentlist ul li .img a:hover{background: none; text-decoration: none;}
.contentlist ul li .txt{}
.contentlist ul li .txt a, .contentlist ul li .txt a:visited{color:#222; font-size: 18px; font-weight: bold; }
.contentlist ul li .txt .desc{color:#666; font-size: 14px; max-height: 60px; overflow: hidden;}
.contentlist ul li .txt .date{font-size: 12px; text-transform: none; padding:5px 0; }
.pagination-nav {border-top: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: center;padding-top: 10px;margin: 10px 0;}
.list__pagination:after{content: ''; display: block; clear: both;}
.list__pagination-item {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;font-size: 18px;line-height: 20px;transition: background-color .3s;font-weight: 300;border-radius: 8px;margin: 0 3px;color: #000;border: 1px solid #ededed;}
.list__pagination-item--active {background: linear-gradient(to right, #FFE600, #00FF4C);color: #000;font-weight: 400;}
.list__pagination-item:hover:not(.c-pagination-item--active) {background: linear-gradient(to left, #FFE600, #00FF4C); color: #000;}
.list-top{margin-bottom: 20px; width: 100%; overflow: hidden; }
.list-top-items-contr{width: 898px; float: left; overflow: hidden; }
.list-top-items{}
.list-top-items ul{}
.list-top-items ul li{float: left; border:1px solid #000; overflow: hidden; position: relative;}
.list-top-items ul li.sep{border:none;}
.list-top-items ul li .img{width: 172px; height:212px; }
.list-top-items ul li .img a, .list-top-items ul li .img a:visited{position:absolute; width: 172px; height: 212px; /*background: url("assets/img.png") 0 0 repeat; */display: block; z-index: 1;}
.list-top-items ul li .img a:hover{background: none; text-decoration: none; }
.list-top-items ul li .txt{position: absolute; left:0; bottom:0; width: 172px; height:45px; background: #000; opacity: 0.7; }
.list-top-items ul li a, .list-top-items ul li a:visited{position: absolute; left:0; bottom:0; display:inline-block; width: 172px; height:45px; padding:5px; z-index: 3; color:#fff; }
.pager2{border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; padding:2px 0; width: 100%; overflow: hidden; }
.pager2 a, .pager2 a:visited{display: block; float: left; width: 310px; padding:15px 35px; color:#067ab4; text-transform: uppercase; font-size: 13px; font-weight: bold; }
.pager2 a.prev{text-align: left; background: #b6eaff url("assets/prev.png") 10px 13px no-repeat; }
.pager2 a.next{text-align: right; background: #ccf0fc url("assets/next.png") right 13px no-repeat; }
.articles-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
.articles-list {
list-style: none;
padding: 0;
margin: 0;
}
.article-item {
border-bottom: 1px solid #e4e4e4;
transition: background-color 0.2s ease;
}
.article-item:last-child {
border-bottom: none;
}
.article-item:hover {
background-color: #f9f9f9;
}
.article-card {
display: flex;
padding: 20px;
gap: 20px;
}
.article-image {
width: 300px;
height: 250px;
border-radius: 6px;
overflow: hidden;
}
.article-img {
width: 100%;
height: 100%;
object-position: top;
object-fit: cover;
transition: transform 0.2s ease;
}
.article-img:hover {
transform: scale(1.02);
}
.no-image-placeholder {
width: 220px;
height: 140px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 14px;
}
.article-content {
flex: 1;
min-width: 0;
}
.article-title {
margin: 0 0 10px 0;
font-size: 18px;
font-weight: 600;
line-height: 1.4;
}
.article-title a {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
}
.article-title a:hover {
color: #2c5aa0;
}
.article-date {
display: block;
font-size: 14px;
color: #000;
line-height: 20px;
}
.article-description {
color: #666;
line-height: 1.5;
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 768px) {
.layout-container {
flex-direction: column;
gap: 15px;
}
.sidebar {
flex: none;
width: 100%;
}
.article-card {
flex-direction: column;
padding: 15px;
}
.article-image {
flex: none;
width: 100%;
}
.no-image-placeholder {
width: 100%;
height: 200px;
}
.article-title {
font-size: 16px;
}
}
@media (max-width: 480px) {
.home-content {
padding: 0 10px;
}
.article-card {
padding: 12px;
}
.article-title {
font-size: 15px;
}
.no-image-placeholder {
height: 150px;
}
}
.view{padding: 20px 110px; background-color: #fff;}
.contentread{}
.contentread .title{color:#222; font-size: 26px; font-weight: bold; line-height: 32.5px;}
.contentread .date{font-size: 14px; padding: 5px 0; text-transform: none; }
.contentread .txt{color:#000; font-size: 14px !important; text-align: justify; line-height: 18px !important; overflow: hidden; font-family: Roboto, sans-serif; }
.contentread .txt img{max-width: 620px;}
.contentread .txt p img{max-width: 620px;}
.contentread .txt ul{margin:10px 0;}
.contentread .txt ul li,.contentread .txt ol li{margin-left:50px;}
.contentread .txt ul li{list-style:disc;}
.contentread .txt ol li{list-style:decimal;}
.contentread .txt em{font-style:italic; font-size: 100%; }
.contentread .txt .tweetable{background-color: #e9ebe4; cursor: pointer; padding-left: 4px; padding-right: 4px; color:#363636;}
.contentread .txt .tweetable span{background-color: #e9ebe4; color:#363636;}
.contentread .txt .tweetable:hover{background-color: #e2f1f9; text-decoration:none;}
.contentread .txt .tweetable span:hover{background-color: #e2f1f9; text-decoration:none;}
.contentread .txt .tweetable:after{font-family: 'icomoon'; content:url('https://dev.twitter.com/sites/default/files/images_documentation/bird_gray_16.png'); margin-left: 4px;}
.contentread .txt .tweetable:hover:after{font-family: 'icomoon'; content:url('https://dev.twitter.com/sites/default/files/images_documentation/bird_blue_16.png'); margin-left: 4px; color: #00acee;}
.contentread .txt blockquote{position:relative; border: 3px solid #e4e4e4; background-color:#f8f8f8; float: right; display: block; width: 305px; margin:20px 0 20px 20px; padding: 10px 10px 25px 10px;}
.contentread .txt blockquote:before {color: #e4e4e4; content: "“"; font-size:66px; font-weight:bold; font-style:italic; line-height:48px; vertical-align: -.5em; margin-left: -10px; margin-bottom: -.3em; font-family: "Times New Roman", Times, serif;}
.contentread .txt blockquote:after {position:absolute; right:10px; bottom:0; color: #e4e4e4; content: "”"; font-size:66px; font-weight:bold; font-style:italic; vertical-align: -.5em; margin-left: -10px; margin-bottom: -.3em; font-family: "Times New Roman", Times, serif;}
.contentread .txt blockquote p{font-size: 14px; line-height: 1.7; padding:0 20px; margin-top: -20px;}
.contentread .txt blockquote div{font-size: 14px; line-height: 1.7; padding:0 20px; margin-top: -20px;}
.contentread .content p{font-size: 17px; line-height: 28px; margin: 0 0 30px; color: #333;}
.contentread .tool{background: #f7f7f7; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; padding:10px; }
.faceshare{display:inline-block; width:60px; height:22px; background: url("assets/facebook_share.png") no-repeat;}
.related{width: 100%; overflow: hidden;}
.related .home-title a, .related .home-title a:visited{background: #f79422; }
.related .home-title em{/*background: #f79422;*/ }
.related .home-title a span, .related .home-title em span{background: none; }
.related .home-title span{background: url("assets/sprite.png") -50px -220px no-repeat; }
.related-item{margin-top: 3px; }
.related-item .img{float:left;/* width: 150px; height:113px; margin-right: 10px; */}
.related-item .img a, .related-item .img a:visited{position:absolute; /*width: 150px; height: 113px;*/ /*background: url("assets/img.png") 0 0 repeat; */display: block; z-index: 1;}
.related-item .img a:hover{background: none; text-decoration: none; }
.related-item .txt{padding:10px 0; height:113px; overflow: hidden; }
.related-item .txt a, .related-item .txt a:visited{color:#000; font-size: 14px; font-weight: bold; font-style: italic; }
.related-item .txt .date{padding-top: 10px; font-size: 10px; text-transform: uppercase; }
.sidebar .title a, .sidebar .title a:visited{background: #f79422; }
.sidebar .title em{background: #f79422; }
.sidebar .title a span, .sidebar .title em span{background: none; }
.sidebar .title{height: 34px; background: #f2f2f2; overflow: hidden; }
.sidebar .title em{float:left; width:auto; text-transform: uppercase; color:#fff; font-size: 13px; padding:8px 10px; background: #fd0101; display: block; font-style: normal; }
.sidebar .title a, .sidebar .title a:visited{float:left; width:130px; text-transform: uppercase; color:#111; font-size: 13px; padding:8px 10px; background: #39FF14; display: block; }
.sidebar .title a span, .sidebar .title em span{font-weight: bold; width: auto; height: auto; background: none; float: none; }
.sidebar .title span{display: inline-block; width: 38px; height: 34px; float: left; }
/*.title span{background: url("assets/sprite.png") -50px -220px no-repeat; }*/
/*.comment{}*/
/*.comment-form{width: 100%; overflow: hidden;}*/
.comment .title a, .comment .title a:visited{background: #f79422; }
.comment .title em{background: #f79422; }
.comment .title a span, .comment .title em span{background: none; }
.comment .title{height: 34px; background: #f2f2f2; overflow: hidden; }
.comment .title em{float:left; width:auto; text-transform: uppercase; color:#fff; font-size: 13px; padding:8px 0 8px 10px; background: #f79422; display: block; font-style: normal; }
.comment .title a, .comment .title a:visited{float:left; width:130px; text-transform: uppercase; color:#fff; font-size: 13px; padding:8px 0 8px 10px; background: #ff0101; display: block; }
.comment .title a span, .comment .title em span{font-weight: bold; width: auto; height: auto; background: none; float: none; }
.comment .title span{display: inline-block; width: 38px; height: 34px; background: url("assets/sprite.png") 0 -220px no-repeat; float: left; }
.comment .title span{background: url("assets/sprite.png") -50px -220px no-repeat; }
.comment-warning {background-color: transparent; color: #ff0000; padding: 15px 10px;}
.comment .title{background: #f2f2f2; overflow: hidden;}
.comm-box{padding: 0 0 20px;}
.comm-box textarea {width: 100%}
.comm-box .comm-form .comm-sent-box .submit-btn{background: #f79422; float: right; width: auto; color: #fff;}
.comm-box .prev-comms-box h3 { border-bottom: 1px solid #f79422; color: #f79422;}
.friend{position: relative;}
.friend-hd{position: absolute; top:0; left: 0; width: 165px; padding: 8px 0; text-align: center; border-top:1px solid #4d4c4c; background: #111; color:#fff; font-size: 19px; font-weight: bold; z-index: 1; }
.friend-bd{position: relative; top:30px; border-top:1px solid #4d4c4c; background: #111; padding:0 5px; overflow: hidden; }
.friend-bd ul{width: 100%; overflow: hidden; padding:15px 0 5px 0; }
.friend-bd ul li{float:left; width: 300px; overflow: hidden; margin-top: 3px; }
.friend-bd ul li .img{float:left; width: 150px; height:113px; margin-right: 10px; }
.friend-bd ul li .img a, .friend-bd ul li .img a:visited{position:absolute; width: 150px; height: 113px; /*background: url("assets/img.png") 0 0 repeat; */display: block; z-index: 1;}
.friend-bd ul li .img a:hover{background: none; text-decoration: none; }
.friend-bd ul li .txt{padding:10px 0; }
.friend-bd ul li .txt a, .friend-bd ul li .txt a:visited{color:#fff; font-size: 14px; }
.stylenew{width: 621px; overflow: hidden; background: #ffffff; }
.style-top-new{width: 621px; overflow: hidden; height:80px; margin: 20px 0; background: #f9f9f9; }
.style-top-new .img{margin:30px 0 30px 10px; float: left; width: 160px; height: 33px; background: url("assets/sprite.png") -30px -70px no-repeat; }
.style-top-new .txt{float:left; padding:10px; border-left:1px solid #e64946; width: 440px; }
.style-top-new .txt .title{color:#ffee9a; font-size: 18px; font-weight: bold; width: 100%; }
.style-top-new .txt .desc{color:#323232; font: normal 12px/150% Arial,sans-serif; width: 390px; }
.style-bd-new{padding:20px 0px 50px 0px; overflow: hidden; background: #ffffff; }
.photo-view{}
.photo-view ul{}
.photo-view ul li{ margin-bottom: 20px;}
.photo-view ul li .img{overflow: hidden; margin-bottom: 10px; width: 300px; height: 600px;}
.photo-view ul li .img a, .photo-view ul li .img a:visited{display: block; margin-bottom: 10px; }
.photo-view ul li .img a img{display: block;}
.photo-view ul li .btm{width: 620px; height: 152px; background: #eeeeee; margin-top: 10px;}
.photo-view ul li .btm .container{overflow: hidden;}
.photo-view ul li .btm .container .desc{float: left; width: 280px;}
.photo-view ul li .btm .container .desc .title{color: #eb0a8d; font: normal 18px Arial,sans-serif; margin-bottom: 5px; }
.photo-view ul li .btm .container .desc .txt{color: #323232; font: normal 13px Arial,sans-serif; text-align: justify; }
.photo-view ul li .btm .container .scl{float: left; width: 280px; padding:20px 10px; }
.photo-view ul li .btm .container .scl .title{color: #eb0a8d; font: bold 11px Arial,sans-serif; text-transform: uppercase; }
.photo-view ul li .btm .container .scl .monlike{overflow: hidden; margin-top: 10px;}
.photo-view ul li .btm .container .scl .monlike .yes{overflow:hidden; height: 33px; padding-left: 5px; padding-right: 5px; border: 1px solid #e1e1e1; background: #fff; border-radius: 4px; margin-bottom: 5px;}
.photo-view ul li .btm .container .scl .monlike .yes a, .photo-view ul li .btm .container .scl .monlike .yes a:hover{display: inline-block; height: 33px; padding-left: 5px; padding-right: 5px;}
.photo-view ul li .btm .container .scl .monlike .yes a .icon{float: left; height: 23px; width: 23px; margin-top: 5px; margin-left: 4px; margin-right: 5px; background: url("assets/monlike.png") no-repeat; }
.photo-view ul li .btm .container .scl .monlike .yes a .txt{float: left; color: #ee0077;margin-top: 8px; font: bold 11px Arial,sans-serif; text-transform: uppercase; }
.photo-view ul li .btm .container .scl .monlike .no{overflow:hidden; height: 33px; padding-left: 5px; padding-right:5px; border: 1px solid #e1e1e1; background: #fff; border-radius: 4px;}
.photo-view ul li .btm .container .scl .monlike .no a, .photo-view ul li .btm .container .scl .monlike .no a:visited{display: inline-block; height: 33px; padding-left: 5px; padding-right: 5px;}
.photo-view ul li .btm .container .scl .monlike .no a .icon{float: left; height: 23px; width: 23px;margin-right: 5px; margin-left: 2px; margin-top: 5px; background: url("assets/dislike.png") no-repeat; }
.photo-view ul li .btm .container .scl .monlike .no a .txt{ float:left; color: #ee0077;margin-top: 8px; font: bold 11px Arial,sans-serif; text-transform: uppercase; }
.photo-view ul li .btm .container .scl .enlike{overflow: hidden; margin-top: 10px;}
.photo-view ul li .btm .container .scl .enlike .flike{float: right;height: 20px; width: 80px; margin-right: 20px;}
.photo-view ul li .btm .container .scl .enlike .tweet{float: right; height: 20px; width: 56px; }
.other-style{position: relative; }
.other-style-hd{position: absolute; width: 215px; color:#fdf59f; font-size: 19px; font-weight: bold; left:0; top:0; background: #434242; text-align: center; padding:10px 0;}
.other-style-btns{text-align: right; height:45px; }
.other-style-btns a, .other-style-btns a:visited{display: inline-block; width: 36px; height: 38px; }
.other-style-btns a.prev{background: url("assets/sprite.png") -290px -215px no-repeat; margin-right: 10px; }
.other-style-btns a.next{background: url("assets/sprite.png") -330px -215px no-repeat; }
.other-style-bd{padding: 5px; background: #434242; }
.other-style-bd ul{width: 100%; overflow: hidden; }
.other-style-bd ul li{float: left; width: 200px; position: relative; }
.other-style-bd ul li .img{width: 200px; height: 438px; }
.other-style-bd ul li .btn{position: absolute; width: 86px; height: 88px; background: url("assets/sprite.png") -370px -180px no-repeat; text-align: center; top: 215px; right:15px; }
.other-style-bd ul li .btn a, .other-style-bd ul li .btn a:visited{display:block; margin:20px 0 0 -7px; color:#fff; font-size: 16px; font-weight: bold; font-style: italic; text-transform: uppercase; }
.other-style-bd ul li .txt-bg{position: absolute; width: 200px; height: 120px; left:0; bottom:0; display: block; z-index: 2; background:url("assets/sprite-x.png") 0 -40px repeat-x; }
.other-style-bd ul li .txt{position: absolute; width: 200px; height: 120px; left:0; bottom:0; overflow: hidden; z-index: 3; padding:5px 10px; }
.other-style-bd ul li .txt .desc{color:#ee0077; font-weight: bold; text-transform: uppercase; font-size: 10px; }
.other-style-bd ul li .txt a, .other-style-bd ul li .txt a:visited{color:#000; font-weight: bold; text-transform: uppercase; font-size: 21px; font-style: italic; display: block; height:80px; }
.other-style-bd ul li .txt .more{text-align: right; }
.other-style-bd ul li .txt .more a, .other-style-bd ul li .txt .more a:visited{color:#067ab4; font-size: 10px; font-style: normal; display: inline-block; padding-right: 10px; background: url("assets/more2.png") right 0 no-repeat; }
.artlist{width: 100%; overflow: hidden;}
.artlist ul{}
.artlist ul li{width: 100%; overflow: hidden; margin-bottom: 10px; }
.artlist ul li .img{width: 100%; height:415px; }
.artlist ul li .txt{padding:25px 50px; overflow: hidden; background: #f2f2f2; }
.artlist ul li .txt .title{}
.artlist ul li .txt .title a, .artlist ul li .txt .title a:visited{color:#3c3c3c; font-size: 24px; font-weight: bold; }
.artlist ul li .txt .tool{width: 100%; overflow: hidden; }
.artlist ul li .txt .tool .date{float: left; width: auto; margin-right: 30px; font-size: 14px; text-transform: none; padding:10px 0;}
.artlist ul li .txt .tool .social{float: left; width: auto; overflow: hidden; }
.artlist ul li .txt .tool .social span{display: inline-block; color:#999; font-size: 14px; float: left; width: auto; padding:10px; }
.artlist ul li .txt .tool .social .btns{display: inline-block; overflow: hidden; width: 70px; height:33px; background: url("assets/sprite.png") -140px -180px no-repeat; margin-top: 3px; padding:5px 0 0 15px; }
.artlist ul li .txt .tool .social .btns a, .artlist ul li .txt .tool .social .btns a:visited{float:left; display: block; width: 24px; height: 24px; margin:0 3px 0 0; }
.artlist ul li .txt .tool .social .btns a.facebook{background: url("assets/sprite.png") -400px -80px no-repeat;}
.artlist ul li .txt .tool .social .btns a.facebook:hover{background: url("assets/sprite.png") -400px -55px no-repeat;}
.artlist ul li .txt .tool .social .btns a.twitter{background: url("assets/sprite.png") -400px -133px no-repeat;}
.artlist ul li .txt .tool .social .btns a.twitter:hover{background: url("assets/sprite.png") -400px -108px no-repeat;}
.artlist ul li .txt .desc{color:#636467; font-size: 16px; margin:10px 0 20px 0;}
.artlist ul li .txt .more{text-align: right; }
.artlist ul li .txt .more a, .artlist ul li .txt .more a:visited{display: inline-block; padding:10px; background: #3c3c3c; color:#fff; font-size: 12px; text-transform: uppercase; border-radius:4px; }
.gallery{width: 100%; overflow: hidden; background: #272727; }
.gallery-top{width: 100%; overflow: hidden; height:100px; padding: 10px 0; }
.gallery-top a, .gallery-top a:visited{display:block; margin:30px 10px 30px 10px; float: left; height: 33px; color:#ee0077; font-weight: bold; font-size: 24px; }
.gallery-top .txt{float:left; width: 650px; padding:10px; border-left:1px solid #141414; height:80px; }
.gallery-top .txt .title{color:#ffee9a; font-size: 18px; font-weight: bold; }
.gallery-top .txt .desc{color:#ccc; font-size: 12px; }
.gallery-top .img{margin:30px 0 30px 10px; float: left; width: 233px; height: 35px; background: url("assets/sprite.png") 0 -389px no-repeat; margin-right: 10px; }
.gallery-bd{width: 100%; overflow: hidden; background: #ccc; }
.gallery-left{float:left; padding:20px 10px; width:640px; overflow:hidden; background: #141414; }
.gallery-view{padding:20px 10px; overflow:hidden; background: #141414; }
.gallery-right{float:right; padding:20px 10px; width:320px; overflow:hidden; }
.tweet-box{width:100%; height:275px;}
.tweet-box .tweet-box-top{height:30px; background: #f2f2f2; overflow: hidden;}
.tweet-box .tweet-box-top span{display: inline-block; padding: 8px; color: #999; font-weight: bold;}
.tweet-box .tweet-box-bd{position: relative; margin-bottom: 10px;}
.tweet-box .tweet-box-bd .follow{height: 30px;}
.tweet-box .tweet-box-bd .follow iframe{position: absolute; top: 5px; right: 5px;}
.tweet-box .tweet-box-bd .tweet-list{height: 215px; overflow-y: auto; border-top:solid 1px #d2d2d2;}
.tweet-box .tweet-box-bd .tweet-list .list-top{height: 50px; overflow: hidden; padding: 7px 10px 0 10px; margin-bottom: 0; }
.tweet-box .tweet-box-bd .tweet-list .list-top .img{float: left; width: 32px; height: 32px; margin-right: 6px; }
.tweet-box .tweet-box-bd .tweet-list .list-top .img a{display: inline-block; background-size: 32px 32px; border-radius: 4px 4px 4px 4px;}
.tweet-box .tweet-box-bd .tweet-list .list-top .img img{display: inline-block; width: 32px; height: 32px; background-size: 32px 32px; border-radius: 4px 4px 4px 4px;}
.tweet-box .tweet-box-bd .tweet-list .list-top .name{}
.tweet-box .tweet-box-bd .tweet-list .list-top .name a{font-size:12px; font-weight: bold; color: #333333;}
.tweet-box .tweet-box-bd .tweet-list .list-top .name span{margin-top: 2px; font-size:12px; font-weight: normal; color: #aa99bb;}
.tweet-box .tweet-box-bd .tweet-list .list-top .name span a{font-weight: normal; color: #aa99bb;}
.tweet-box .tweet-box-bd .tweet-list .list-top .date{font-size: 11px; color: #aa99bb;}
.tweet-box .tweet-box-bd .tweet-list .list-bottom{padding: 0px 10px 10px 10px;}
.tweet-box .tweet-box-bd .tweet-list .list-bottom .desc{margin-bottom: 3px; font-size: 12px; color: #333333;}
.tweet-box .tweet-box-bd .tweet-list .list-bottom .desc a{color: #0084B4; font-size: 12px!important;}
.tweet-box .tweet-box-bd .tweet-list .list-bottom .retweet{text-align: right; font-size: 12px; font-weight: bold; color: #333333}
.tweet-box .tweet-box-bd .tweet-list .list-bottom .retweet span{color: #999999;}
.rating-items{}
.rating-items ul{width: 100%; overflow: hidden; }
.rating-items ul li{float: left; width: 300px; height:327px; margin-bottom:20px; overflow: hidden; background: #272727; }
.rating-items ul li.sep{width: 20px; background: none; }
.rating-items ul li .img{width: 300px; height: 250px; }
.rating-items ul li a, .rating-items ul li a:visited{display: block; width: 100%; text-align: center; color:#fff; font-size: 13px; text-transform: uppercase; padding:6px 0; background: #f79422; }
.rating-items ul li a span{font-weight: bold; }
.rating-items ul li .result-contr{margin: 0 auto; margin-top: 10px; height:6px; width:280px; background: #751b50; }
.rating-items ul li .result-contr .result{display: block; height:6px; background: #eb0a8d; }
.rating-items ul li .result-percent{margin-top: 10px; width: 100%; text-align: center; font-size: 13px; font-size: 13px; font-weight: bold; text-transform: uppercase; color:#fff; }
.other-rating{}
.other-rating-hd{background: #f2f2f2; overflow: hidden; }
.other-rating-hd span{float:left; display: block; background:#434242; color:#fff; font-size: 13px; font-weight:bold; text-transform: uppercase; padding:8px 0 8px 10px; }
.other-rating-hd em{display: block; float:left; background:url("assets/sprite.png") -389px -380px no-repeat; width: 34px; height: 34px; }
.other-rating ul{width: 100%; overflow: hidden; margin-top: 3px; }
.other-rating ul li{float: left; width: 300px; position: relative;}
.other-rating ul li.fright{float: right; }
.other-rating ul li .img{width:300px; height:305px; }
.other-rating ul li .bg{position: absolute; background: #000; opacity: 0.25; left:0; top:0; width: 300px; height:305px; }
.other-rating ul li a, .other-rating ul li a:visited{display:block; position: absolute; left:0; top:0; width: 300px; height:305px; text-align: center; vertical-align: middle; color:#fff; font-size: 36px; }
.people{}
.people ul{width: 100%; overflow: hidden;}
.people ul li{float: left; width: 300px; border:1px solid #ccc; height:460px; position: relative; margin-bottom: 20px; overflow: hidden; }
.people ul li.sep{width:20px; border:none; }
.people ul li .img{width: 298px; height:458px; }
.people ul li .txt{position: absolute; left:0; bottom: 0; width: 298px; height:120px; background: url("assets/sprite-x.png") 0 -40px repeat-x; }
.people ul li .txt a, .people ul li .txt a:visited{display:inline-block; height:100px; color:#000; font-size: 21px; font-weight: bold; font-style: italic; padding: 10px; }
.people ul li .txt .more{padding: 0 10px; }
.people ul li .txt .more a, .people ul li .txt .more a:visited{float: right; color:#000; font-size: 13px; font-style: normal; font-weight: normal; padding: 0 10px 0 0; height: auto; background: url("assets/more.png") right 3px no-repeat; }
.topic-top{}
.topic-top ul{width: 100%; overflow: hidden; }
.topic-top ul li{float: left; margin-right: 5px; height:22px; border:1px solid #e6e4e5; text-align: center; padding:0 7px; }
.topic-top ul li:hover{border:1px solid #000; }
.topic-top ul li.sep{margin: 0 15px; border:none; color:#004276; padding:0; }
.topic-top ul li a, .topic-top ul li a:visited{color:#004276; font-size: 12px; text-transform: uppercase; font-weight: bold; }
.topic-view{}
.topic-view .title{width: 100%; text-align: center; color:#222; font-size: 22px; font-weight: bold; }
.topic-view .img{width: 100%; margin:15px 0; }
.topic-view .txt{color:#000; font-size: 12px; text-align: left; }
.topic-contents{}
.topic-contents ul{}
.topic-contents ul li{width: 100%; overflow: hidden; margin-top: 3px; background: #f2f2f2; padding:10px; }
.topic-contents ul li a, .topic-contents ul li a:visited{color:#000; font-size: 14px; font-style: italic; }
.side-bnr-container{width: 960px; position: fixed; top: 0; left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);}
.side-bnr-left{position:absolute; left:-202px; top: 118px; width: 200px; height:452px; /*background: #c9e7f1;*/ }
.side-bnr-right{position:absolute; right:-225px; top: 118px; width: 200px; height:452px; /*background: #c9e7f1;*/ }
.social-right{overflow: hidden; position:absolute; right:-160px; top: 117px; width: 160px; height:450px;}
.social-right ul{}
.social-right ul li{width: 40px;}
.social-right ul li a .facebook{width: 40px; height: 40px; background: url("assets/facebook-icon.png") no-repeat;}
.social-right ul li a .twitter{width: 40px; height: 40px; background: url("assets/twitter-icon.png") no-repeat;}
.social-right ul li a .gmail{width: 40px; height: 40px; background: url("assets/gmail-icon.png") no-repeat;}
.social-right ul li a .instagram{width: 40px; height: 40px; background: url("assets/instagram-icon.png") no-repeat;}
.social-right ul li a .youtube{width: 40px; height: 40px; background: url("assets/youtube-icon.png") no-repeat;}
/*------------------------*/
.home-new-feature{background: #ccc; height: 349px; position: relative;}
.home-new-feature .img{height: 349px;width: 620px; overflow: hidden;}
.home-new-feature .desc{position: absolute; left: 0; bottom: 10px; height: 93px; width: 467px; background: #ea50a2;}
.home-new-feature .desc a, .home-new-feature .desc a:visited{display: block; height: 93px; width: 467px; color: #fff;}
.home-new-feature .desc a .text{color: #fff; font: normal 32px Arial,sans-serif; padding: 5px 5px 5px 15px;}
.socialbtns{}
.featured{}
.feature-inner{position: relative;}
.feature-inner .slide{ display: flex; justify-content: center; }
.feature-inner .slide .fea-img{position:relative;}
.feature-inner .slide .fea-img .bg{position:absolute; bottom:20px; left:0; z-index: 100;}
.feature-inner .slide .fea-img .bg .title{}
.feature-inner .slide .fea-img .bg .title a, .feature-inner .slide .fea-img .bg .title a:visited{display:block; padding: 5px 5px 5px 15px; }
.feature-inner .slide .fea-img .img{/*width:620px; height:349px;*/}
.slide .slides_container {width:950px; height:480px; overflow:hidden; position:relative; display:none;}
.slide .slides_container div.slide {width:950px;height:480px; display:block;}
.slide .slides_container div.slide a img, .slide .slides_container div.slide a:visited img {border:none;}
.slide .pagination {padding:2px 5px; height: 15px; overflow:hidden; position: absolute; top: 20px; right: 20px; z-index: 100;}
.slide .pagination li {float:left; margin:0 3px; list-style:none;}
.slide .pagination li a {display:block; float:left; overflow:hidden; color: #fff; width:12px; height:12px; border: 3px solid #fff; border-radius: 6px; background: #ffffff; box-shadow: 0px 0px 1px 1px #333; text-indent: -3000;}
.slide .pagination li.current a { display: block; width:12px; height:12px; color: #333; background: #333; border-radius: 6px; border: 3px solid #fff;}
.latest_news{background: #fff; }
.latest_news .header{margin-bottom: 7px;}
.latest_news .header ul{overflow: hidden;}
.latest_news .header ul li{float: left; height: 30px; border-right: 1px solid #f2f2f2; background: #fff; font: normal 12px Arial, sans-serif; text-transform: uppercase; color: #111; padding-bottom: 7px;}
.latest_news .header ul li.sel{color: #bd413d; background: #ff0101;}
.latest_news .header ul li a, .latest_news .header ul li a:visited{display:block; padding:8px 15px; color: #111; text-decoration: none;}
.latest_news .header ul li.sel a{color: #fff;}
.latest_news .body{/*height: 216px;overflow-y: scroll; */}
.latest_news .body ul{overflow: hidden;}
.latest_news .body li{float: left; margin-right: 3px; background: #f2f2f2; overflow: hidden; margin-bottom: 3px; padding-right: 10px;}
.latest_news .body li.right{margin-right: 0;}
.latest_news .body li .img{float: left; width: 70px; height: 70px; margin-right: 10px;}
.latest_news .body li .img a, .latest_news .body li .img a:visited{display: block; width: 70px; height: 70px;}
.latest_news .body li .title{font: bold 12px/130% Arial, Tahoma, sans-serif; color: #071441; margin-top: 9px; margin-bottom: 7px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;position: relative;}
.latest_news .body li .title a, .latest_news .body li .title a:visited{color: #071441;}
.latest_news .body li .date{font: normal 11px Arial, Tahoma, sans-serif; color: #999999;}
.homemedia{float: left; width: 620px; height: 454px; overflow: hidden; margin-right: 20px; margin-bottom: 10px; position: relative;}
.mdhead{float: left; height: 36px; overflow: hidden; margin-top: 4px;}
.mdhead .lefthd{float: left;}
.mdhead .lefthd ul{overflow: hidden;}
.mdhead .lefthd ul li{float: left;}
.mdhead .lefthd ul li.pic{color: #454d62; font: normal 26px Arial,sans-serif; padding-right: 5px;}
.mdhead .lefthd ul li.pic a, .mdhead .lefthd ul li .pic a:visited{color: #454d62; font: normal 26px Arial,sans-serif;}
.mdhead .lefthd ul li span.sep{color: #dcdcdc; font: normal 26px Arial,sans-serif;}
.mdhead .lefthd ul li.vid{color: #454d62; font: normal 26px Arial,sans-serif; padding-left: 5px;}
.mdhead .lefthd ul li.vid a, .mdhead .lefthd ul li .vid a:visited{color: #454d62; font: normal 26px Arial,sans-serif;}
.mdhead .righthd{float: right;}
.mdhead .righthd ul{margin-right: 9px; margin-top: 12px;}
.mdhead .righthd ul li{float: left; margin-left: 6px;}
.mdhead .righthd ul li a{display: block; border: 4px solid #42c0fb; border-radius: 6px; }
.mdbody{/*height: 448px;*/ position: relative; width: 100%; overflow: hidden;}
.mdbody .paginations{float: right; margin-right: 9px; margin-top: 15px;}
.mdbody .paginations li{float: left; margin-left: 6px;}
.mdbody .paginations li a{display: block; border: 3px solid #42c0fb; border-radius: 6px; }
/*.mdbody .tab-content{height: 408px; position: relative; width: 100%; overflow: hidden; }*/
/*.mdbody .tab-content ul{}*/
/*.mdbody .tab-content ul li{height: 408px; width: 620px;}*/
.mdbody .img{height: 100%; width: 100%;}
.mdbody .img a, .mdbody .img a:visited{display:block; height: 100%; width: 100%;}
.mdbody .desc{/*height: 40px !important; position: absolute; bottom: 0; left: 0; right: 0; background: url("assets/slidedescbg.png") repeat;*/}
.mdbody .desc a, .mdbody .desc a:visited{display: block; padding:8px 20px; color: #111; font: normal 16px 'RobotoThin',serif;}
.mdbody .arrow-left{margin-top: 32px; margin-left: 9px; width: 9px; height: 15px; background: url("assets/arrowleft.png") no-repeat;}
.mdbody .arrow-right{margin-top: 32px; margin-left: 11px; width: 9px; height: 15px; background: url("assets/arrowright.png") no-repeat;}
/*.mdbody .tab-content{height: 408px; position: relative; width: 100%; overflow: hidden; }*/
/*.mdbody .tab-content ul{}*/
/*.mdbody .tab-content ul li{height: 408px; width: 620px;}*/
/*.mdbody .tab-content ul li .img{height: 408px; width: 620px;}*/
/*.mdbody .tab-content ul li .img a, .mdbody .img a:visited{display:block; height: 408px; width: 620px;}*/
/*.mdbody .tab-content ul li .desc{height: 40px !important; position: absolute; bottom: 0; left: 0; right: 0; background: url("assets/slidedescbg.png") repeat;}*/
/*.mdbody .tab-content ul li .desc a, .mdbody .tab-content ul li .desc a:visited{display: block; padding:8px 20px; color: #ffffff; font: normal 16px 'RobotoThin',serif; }*/
.rightcool{}
.rightcool-inner{position: relative; border: 5px solid #111;}
.rightcool-inner .img{height: 527px; width: 290px; overflow: hidden;}
.rightcool-inner .img a, .rightcool .img a:visited{display: block; height: 527px; width: 290px; }
.rightcool-inner .desc{position: absolute; bottom: 15px; left: 15px; background-color: #454d62;}
.rightcool-inner .desc a, .rightcool-inner .desc a:visited{display: block; padding: 10px; }
/*.bannerbigtop{position: relative; height: 100px; width:880px; overflow: hidden; background: #eee; margin: 0 30px;}*/
/*.bannermedtop{position: relative; height: 130px; width:620px; overflow: hidden; background: #eee;}*/
/*.bannermedbot{position: relative; height: 130px; width:620px; overflow: hidden; background: #eee;}*/
/*.bannerrightsmall{position: relative; width: 300px; height: 130px; overflow: hidden; background: #eee;}*/
/*.bannersocialbottom{position: relative; width: 960px; height: 115px; overflow: hidden; background: #eee;}*/
.tab-navs {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.tab-nav {
flex: 1;
text-align: center;
transition: all 0.3s ease;
}
.tab-nav a {
display: block;
padding: 18px 20px;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tab-nav a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
.tab-nav.sel a {
color: white;
background-color: rgba(255, 255, 255, 0.15);
}
.tab-nav.sel a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #ffcc00;
border-radius: 2px 2px 0 0;
}
.tab-content {
background-color: white;
border-radius: 0 0 12px 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
/*padding: 30px;*/
min-height: 400px;
}
.tab-panel {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-panel.active {
display: block;
}
@media (max-width: 768px) {
.tab-navs {
flex-direction: column;
}
.tab-nav a {
padding: 15px;
text-align: left;
display: flex;
align-items: center;
}
.tab-nav a::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
}
.tab-nav:nth-child(1) a::before {
background-image: url('data:image/svg+xml;utf8,');
}
.tab-nav:nth-child(2) a::before {
background-image: url('data:image/svg+xml;utf8,');
}
.tab-nav:nth-child(3) a::before {
background-image: url('data:image/svg+xml;utf8,');
}
}
.banner-container {
width: 100%;
max-width: 100%;
position: relative;
background-color: #f0f0f0;
overflow: hidden;
}
.banner-iframe {
width: 100%;
height: 300px; /* Өөрийн хэрэгцээнд тохируулна уу */
border: none;
display: block;
}
/*carousel*/
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
-o-transition: .6s ease-in-out left;
transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
.carousel-control {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 15%;
font-size: 20px;
color: #000000;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
filter: alpha(opacity=50);
opacity: .5;
}
.carousel-control.left {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
background-image: url("assets/slidedescbg.png");
width: 30px;
height: 80px;
top: 186px;
}
.carousel-control.right {
right: 0;
left: auto;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-image: url("assets/slidedescbg.png");
width: 30px;
height: 80px;
top: 186px;
}
.carousel-control:hover,
.carousel-control:focus {
color: #fff;
text-decoration: none;
filter: alpha(opacity=90);
outline: 0;
opacity: .9;
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
left: 50%;
margin-left: -10px;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
right: 50%;
margin-right: -10px;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 20px;
height: 20px;
margin-top: -10px;
font-family: serif;
}
.carousel-control .icon-prev:before {
content: '\2039';
}
.carousel-control .icon-next:before {
content: '\203a';
}
.carousel-indicators {
position: absolute;
/*bottom: 10px;*/
left: 118%;
top: -1px;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 8px;
height: 8px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
border: 1px solid #42c0fb;
border-radius: 10px;
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.carousel-caption .btn {
text-shadow: none;
}
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
font-size: 30px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
margin-left: -15px;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
margin-right: -15px;
}
.carousel-caption {
right: 20%;
left: 20%;
padding-bottom: 30px;
}
}
.award-bd{}
.award-bd .award-hd{width: 960px; height: 92px; background: url("assets/grandawards.jpg") no-repeat;}
.award-bd .award-mainbd{margin: 20px 0 80px 0;}
.award-bd .award-mainbd .question{}
.award-bd .award-mainbd .question .subhd{margin: 0 10px 20px 10px; background-color: #e1e2e3;}
.award-bd .award-mainbd .question .subhd .bg{height: 34px;}
.award-bd .award-mainbd .question .subhd .bg .title{padding: 8px 0 8px 8px; color: #ffffff; text-transform: uppercase; font-family: arial, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; background-color: red;}
.award-bd .award-mainbd .question .subhd .rec{width: 34px; height: 34px; background: url("assets/award-subhd-bg.png") no-repeat;}
.award-bd .award-mainbd .question ul{}
.award-bd .award-mainbd .question ul li{width: 140px; margin: 0 10px 20px 10px;}
.award-bd .award-mainbd .question ul li .img{position: relative; overflow: hidden; width: 140px; height: 140px;}
.award-bd .award-mainbd .question ul li .img a{}
.award-bd .award-mainbd .question ul li .img a i{display: none;}
.award-bd .award-mainbd .question ul li .img a:hover{}
.award-bd .award-mainbd .question ul li .img a:hover i{display: inline-block; position: absolute; top: 0; left: 0; width: 140px; height: 140px; padding: 58px 58px; text-decoration: none; color: white; font-size: 24px; font-family: FontAwesome; background-color: rgba(235,10,141,0.7);}
.award-bd .award-mainbd .question ul li .name{margin: 5px 0;}
.award-bd .award-mainbd .question ul li .name a{}
.award-bd .award-mainbd .question ul li .name a:hover{}
.award-bd .award-mainbd .question ul li .name a p{margin: 0; line-height: 16px; font-family: arial, Arial, Helvetica, sans-serif; }
.award-bd .award-mainbd .question ul li .name a p.first{font-weight: bold; font-size: 14px; color: #272727;}
.award-bd .award-mainbd .question ul li .name a p.last{font-size: 12px; color: #999999;}
.award-bd .award-mainbd .question ul li .box{position: relative;}
.award-bd .award-mainbd .question ul li .box .btn{width: 140px; height: 32px; text-align: center; background-color: #c0c0c0;}
.award-bd .award-mainbd .question ul li .box .btn a{display: block; padding: 8px 0 7px; font-size: 12px; color: #272727;}
.award-bd .award-mainbd .question ul li .box .btn a:hover{color: white; text-decoration: none; background-color: #f79422;}
.award-bd .award-mainbd .question ul li .box .result{}
.award-bd .award-mainbd .question ul li .box .result .error{position: absolute; top: 0; left: 0; width: 140px; height: 32px; padding: 7px 0; text-align: center; background-color: #272727; font-size: 12px; color: #ffffff;}
.award-bd .award-mainbd .question ul li .box .result .done{position: absolute; top: 0; left: 0; width: 140px; height: 32px; padding: 6px 0; background-color: #f79422; text-align: center; color: #ffffff;}
.background_overlay{position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1;}
#popup-window{position: fixed; padding: 20px; background: white; width: 600px; z-index: 200; overflow: auto; -webkit-box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.28); -moz-box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.28); box-shadow: 2px 2px 7px 1px rgba(0,0,0,0.28);}
#popup-window .nominee-img{overflow: hidden; width: 198px; margin-right: 13px;}
#popup-window .nominee-text{}
#popup-window .nominee-text .name{margin-bottom: 5px; font-family: arial, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 18px; color: #272727; text-transform: uppercase;}
#popup-window .nominee-text .description{font-size: 12px; color: #333333; line-height: 20px;}
#popup-window .close-btn{position: absolute; top: 1px; right: 1px; width: 30px; height: 30px; margin: 15px; padding: 5px 0; border-radius: 15px; background-color: #f79422;}
#popup-window .close-btn a{padding: 6px 9px;}
#popup-window .close-btn a i{font-family: FontAwesome; font-size: 16px; color: #ffffff;}
.feature-inner {position: relative;height: 480px;overflow: hidden;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);}
.banner-hero {width: 100%;height: 100%;}
.swiper-wrapper {
width: 100%;
height: 100%;
}
.swiper-slide {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.fea-img {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.6) 100%
);
z-index: 2;
pointer-events: none;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.slide-image {
width: 100% !important;
height: 100%;
object-fit: cover;
object-position: top;
aspect-ratio: 16/9;
transition: transform 0.8s ease;
}
.image-link:hover .slide-image {
transform: scale(1.05);
}
.no-image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
}
.no-image-placeholder img {
width: 80px;
height: 80px;
opacity: 0.7;
}
.content-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 30px;
z-index: 3;
color: white;
background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 100%);
}
.title {
margin: 0 0 12px 0;
font-size: 2.2rem;
font-weight: 700;
line-height: 1.2;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.title-link-top {
color: white !important;
text-decoration: none;
transition: color 0.3s ease;
}
.title-link-top:hover {
color: #f0f0f0;
text-decoration: underline;
}
.slide-meta {
display: flex;
align-items: center;
gap: 15px;
}
.date {
font-size: 14px;
opacity: 0.9;
display: flex;
align-items: center;
gap: 5px;
}
.date::before {
content: '🕒';
font-size: 12px;
}
/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 50%;
color: #333;
margin-top: -30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
opacity: 0;
}
.banner-hero:hover .swiper-button-next,
.banner-hero:hover .swiper-button-prev {
opacity: 1;
}
.banner-feed:hover .swiper-button-next,
.banner-feed:hover .swiper-button-prev {
opacity: 1;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
color: #007bff;
}
.swiper-button-next:after,
.swiper-button-prev:after {
display: none;
}
/* Navigation Buttons */
.banner-right .swiper-button-next,
.banner-right .swiper-button-prev {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 50%;
color: #333;
margin-top: -30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
opacity: 0;
}
.banner-right:hover .swiper-button-next,
.banner-right:hover .swiper-button-prev {
opacity: 1;
}
.banner-right:hover .swiper-button-next,
.banner-right:hover .swiper-button-prev {
opacity: 1;
}
.banner-right .swiper-button-next:hover,
.banner-right .swiper-button-prev:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
color: #007bff;
}
.banner-right .swiper-button-next:after,
.banner-right .swiper-button-prev:after {
display: none;
}
/* Pagination */
.swiper-pagination {
bottom: 20px !important;
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5);
opacity: 1;
transition: all 0.3s ease;
margin: 0 6px !important;
}
.swiper-pagination-bullet-active {
background: white;
transform: scale(1.2);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Responsive Design */
@media (max-width: 1000px) {
.feature-inner {
width: 95%;
height: 400px;
}
}
@media (max-width: 768px) {
.feature-inner {
height: 350px;
border-radius: 12px;
}
.content-overlay {
padding: 25px;
}
.title {
font-size: 1.5rem;
}
.swiper-button-next,
.swiper-button-prev {
width: 45px;
height: 45px;
opacity: 0.7;
}
}
@media (max-width: 480px) {
.feature-inner {
height: 250px;
}
.content-overlay {
padding: 15px;
}
.title {
font-size: 1.1rem;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
}
}
/* Loading Animation */
.swiper-slide {
transition: opacity 0.5s ease;
}
.swiper-slide-active,
.swiper-slide-next,
.swiper-slide-prev {
opacity: 1;
}
/* Accessibility */
.swiper-button-next:focus,
.swiper-button-prev:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.slide-image,
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination-bullet {
transition: none;
}
.image-link:hover .slide-image {
transform: none;
}
}
.news-container {
width: 100%;
margin: 0 auto;
position: relative;
height: auto;
}
.header ul li.sel {
background: #007bff;
color: white;
border-radius: 4px 4px 0 0;
}
.header ul li.sel a {
color: white !important;
}
/* 2 баганын grid загвар */
.news-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
/*padding: 20px;*/
}
/* Мэдээний элемент */
.news-item {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.news-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-color: #007bff;
}
/* Зургийн хэсэг - томруулсан */
.news-image {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-image:hover img {
transform: scale(1.05);
}
.news-image a {
display: block;
width: 100%;
height: 100%;
}
/* Агуулгын хэсэг */
.news-content {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
}
/* Мэдээний гарчиг */
.news-title {
margin: 0 0 12px 0;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
}
.news-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.news-title a:hover {
color: #007bff;
}
/* Мета мэдээлэл */
.news-meta {
margin-top: auto;
padding-top: 0px;
border-top: 1px solid #f0f0f0;
}
.boost-label {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Boost мэдээний тусгай стиль */
.boost-news {
position: relative;
background: linear-gradient(135deg, #fff, #f8f9ff);
border: 2px solid #ff6b6b;
}
.boost-news::before {
content: "🚀";
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
z-index: 1;
}
/* Жагсаалтын элементүүд */
.news-grid ul {
display: contents;
list-style: none;
margin: 0;
padding: 0;
}
.news-grid li {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.news-grid li:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-color: #007bff;
}
.news-grid li .img {
width: 100%;
height: 200px;
overflow: hidden;
}
.news-grid li .img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.news-grid li:hover .img img {
transform: scale(1.05);
}
.news-grid li .title {
padding: 16px;
flex: 1;
}
.news-grid li .title a {
color: #333;
text-decoration: none;
font-size: 16px;
line-height: 1.4;
font-weight: 600;
display: block;
transition: color 0.3s ease;
}
.news-grid li .title a:hover {
color: #007bff;
}
.news-grid li .date {
padding: 0 16px 16px;
color: #666;
font-size: 14px;
border-top: 1px solid #f0f0f0;
margin-top: auto;
}
/* Хариуцлагтай дизайн */
@media (max-width: 768px) {
.news-grid {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
.news-image {
height: 180px;
}
.news-title {
font-size: 15px;
}
}
@media (max-width: 480px) {
.news-grid {
gap: 12px;
padding: 12px;
}
.news-image {
height: 160px;
}
.news-content {
padding: 12px;
}
.news-title {
font-size: 14px;
}
}
/* Ачаалах анимаци */
.news-item {
animation: fadeInUp 0.6s ease forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Скролл тохиргоо */
.news-container .ps__rail-y {
opacity: 0.6;
}
.news-container:hover .ps__rail-y {
opacity: 1;
}
.modern-news-grid {
display: grid;
grid-template-columns: 205px repeat(auto-fit, minmax(300px, 1fr));
gap: 80px;
padding: 20px 0;
max-width: 1200px;
margin: 0 auto;
align-items: start;
}
.column {
display: flex;
flex-direction: column;
gap: 20px;
}
.left-column {
/* Дөрвөлжин картуудын баган */
width: 250px;
}
.right-column {
/* Хөндлөн картуудын баган */
width: 455px;
}
/* Дөрвөлжин карт - Зүүн баганд */
.square-card {
background: white;
overflow: hidden;
width: 100%; /* Баганын өргөнд тохируулах */
height: 320px;
display: flex;
flex-direction: column;
}
/* Хөндлөн карт - Баруун баганд */
.horizontal-card {
background: white;
overflow: hidden;
width: 100%; /* Баганын өргөнд тохируулах */
height: 320px;
display: flex;
flex-direction: column;
}
.square-card:hover, .horizontal-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border-color: #e0e0e0;
}
.news-card-inner {
height: 100%;
display: flex;
flex-direction: column;
}
/* Зургийн хэсэг */
.news-image-container {
position: relative;
overflow: hidden;
flex-shrink: 0;
background: #f8f9fa;
}
/* Дөрвөлжин картын зургийн хэсэг */
.square-card .news-image-container {
height: 250px;
width: 100%;
aspect-ratio: 1 / 1;
}
/* Хөндлөн картын зургийн хэсэг */
.horizontal-card .news-image-container {
width: 100%;
height: 250px;
aspect-ratio: 4 / 3;
}
.news-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.square-card:hover .news-image,
.horizontal-card:hover .news-image {
transform: scale(1.05);
}
.no-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
color: #999;
font-size: 24px;
}
.image-link.no-image .news-image {
display: none;
}
/* Категори шошго */
.category-tag {
position: absolute;
top: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 3px 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Шошгууд */
.news-badges {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 4px;
}
.badge {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: white;
font-weight: bold;
}
.hot-badge {
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
}
/* Агуулгын хэсэг */
.news-content {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.news-header {
margin-bottom: 0;
}
.news-title {
margin: 0;
font-size: 15px;
line-height: 1.4;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #333;
}
.square-card .news-title {
font-size: 14px;
-webkit-line-clamp: 2;
}
.horizontal-card .news-title {
font-size: 16px;
min-height: auto;
-webkit-line-clamp: 3;
}
.title-link {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
}
.title-link:hover {
color: #007bff;
}
/* Анимаци */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.square-card, .horizontal-card {
animation: fadeInUp 0.4s ease-out forwards;
}
/* Responsive дизайн */
@media (max-width: 1200px) {
.modern-news-grid {
gap: 20px;
padding: 16px;
}
.column {
gap: 16px;
}
.square-card, .horizontal-card {
height: 300px;
}
.square-card .news-image-container {
height: 160px;
}
.horizontal-card .news-image-container {
height: 200px;
}
}
@media (max-width: 992px) {
.modern-news-grid {
grid-template-columns: 1fr; /* Нэг баган болгох */
gap: 16px;
}
.column {
gap: 16px;
}
.square-card, .horizontal-card {
height: 280px;
}
.square-card .news-image-container {
height: 160px;
}
.horizontal-card .news-image-container {
height: 180px;
}
}
@media (max-width: 768px) {
.modern-news-grid {
gap: 16px;
padding: 12px;
}
.column {
gap: 12px;
}
.square-card, .horizontal-card {
height: 250px;
}
.square-card .news-image-container {
height: 140px;
}
.horizontal-card .news-image-container {
height: 150px;
}
.news-content {
padding: 12px;
}
.news-title {
font-size: 14px;
}
.square-card .news-title {
-webkit-line-clamp: 2;
}
.horizontal-card .news-title {
-webkit-line-clamp: 2;
}
}
@media (max-width: 480px) {
.modern-news-grid {
gap: 12px;
padding: 10px;
}
.column {
gap: 10px;
}
.square-card, .horizontal-card {
height: 220px;
}
.square-card .news-image-container {
height: 120px;
}
.horizontal-card .news-image-container {
height: 130px;
}
.news-content {
padding: 10px;
}
.news-title {
font-size: 13px;
-webkit-line-clamp: 2;
}
.category-tag {
font-size: 9px;
padding: 2px 4px;
}
.badge {
width: 20px;
height: 20px;
font-size: 10px;
}
}
.modern-carousel {
position: relative;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
background: #fff;
}
.modern-carousel-inner {
border-radius: 16px;
}
.carousel-item {
transition: transform 0.6s ease-in-out;
}
.img-container {
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
}
.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.image-link:hover .carousel-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.7));
pointer-events: none;
}
.content-wrapper-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
/*padding: 30px;*/
padding: 30px 30px 20px 30px;
color: white;
z-index: 2;
}
.content-wrapper {
margin-top: 40px;
}
.sticky-feed {
position: sticky;
top: 50px;
align-self: flex-start;
z-index: 100;
}
.category-tag-media {
position: absolute;
top: -5px;
left: 22px;
color: white;
padding: 3px 6px;
border-radius: 6px;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.category-link {
display: inline-block;
color: #000;
font-size: 14px;
font-weight: 400;
line-height: 20px;
transition: all 0.3s ease;
}
.category-link:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.title {
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.title-link {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.title-link:hover {
color: #f0f0f0;
}
/* Modern Indicators */
.carousel-indicator-wrapper {
position: absolute;
bottom: 100px;
left: 0;
right: 0;
z-index: 3;
}
.modern-indicators {
display: flex;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0 20px;
}
.modern-indicators li {
width: 12px;
height: 12px;
margin: 0;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.modern-indicators li.active,
.modern-indicators li:hover {
background: white;
transform: scale(1.2);
}
.modern-indicators li:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* Modern Controls */
.modern-control {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modern-carousel:hover .modern-control {
opacity: 1;
}
.prev-control {
left: 20px;
}
.next-control {
right: 20px;
}
.control-arrow {
color: #333;
transition: transform 0.2s ease;
}
.modern-control:hover .control-arrow {
color: #007bff;
transform: scale(1.1);
}
/* No Content Styling */
.no-content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400px;
background: #f8f9fa;
border-radius: 16px;
}
.no-content-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.5;
}
.no-content-message {
color: #6c757d;
font-size: 18px;
margin: 0;
text-align: center;
}
/* No Image Placeholder */
.no-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #e9ecef;
}
.no-image-placeholder img {
width: 80px;
height: 80px;
opacity: 0.3;
}
/* Responsive Design */
@media (max-width: 768px) {
.img-container {
height: 300px;
}
.content-wrapper-bottom {
padding: 20px;
}
.content-wrapper {
padding: 20px;
}
.title {
font-size: 18px;
}
.carousel-indicator-wrapper {
bottom: 80px;
}
.modern-control {
width: 50px;
height: 50px;
opacity: 0.8;
}
.prev-control {
left: 10px;
}
.next-control {
right: 10px;
}
}
@media (max-width: 480px) {
.img-container {
height: 250px;
}
.content-wrapper-bottom {
padding: 16px;
}
.content-wrapper {
padding: 16px;
}
.title {
font-size: 16px;
}
.category-link {
font-size: 10px;
padding: 4px 10px;
}
}
/* Accessibility Improvements */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.modern-carousel {
border: 2px solid #000;
}
.modern-indicators li {
border: 2px solid #000;
}
.modern-control {
border: 2px solid #000;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.carousel-image,
.category-link,
.modern-control,
.modern-indicators li {
transition: none;
}
.image-link:hover .carousel-image {
transform: none;
}
}
.main-banner{overflow: hidden;position: relative;height: 460px}
.main-banner img{height: 100%;width: 100%;object-fit: cover}
.sidebar-articles{}
.sidebar-articles__title:nth-child(2){padding-left: 0;}
.sidebar-articles__title:nth-child(3){ padding-left: 0;}
.uk-subnav>*{background: #000}
.uk-subnav-pill>*>:first-child{font-size: 20px;color: #fff}
.sidebar-articles__title > a{font-weight: 500}
.sidebar-articles__title.uk-active > a{font-size: 20px;font-weight: 600;background: linear-gradient(to top, #FFE600, #00FF4C);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.tabContent{margin-top: 20px}
.home-sidebar-article__stories {display: block;height: 430px;overflow: auto;position: relative;}
.article-list-new-box{display: flex;align-items: start;}
.article-list-new-img{width: 90px;min-width: 90px;height: 80px;margin-right: 15px;}
.article-list-new-img img{width: 100%;height: 100%;object-fit: cover;border-radius: 4px}
.article-list-new{padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px dashed #ddd}
.article-new-item__title{margin-bottom: 5px;font-size: 14px;line-height: 20px;color: #363636;}
.article-new-item__date{font-size: 14px;line-height: 20px;font-weight: 300;color: #909090;}
.article-list-new:hover .article-new-item__title{opacity: .7}
@media (max-width: 768px) {
.ft-menu ul {
flex-direction: column;
}
.ft-menu li a {
width: 100%;
text-align: center;
margin: 2px 0;
padding: 14px 20px;
}
.ft-menu li::after {
display: none;
}
}
.top-section__head {
margin-bottom: 20px;
font-size: 20px;
display: block;
font-weight: 700;
text-transform: uppercase;
line-height: 40px;
position: relative;
color: #2B2F3A;
border-bottom: 2px solid;
border-image: linear-gradient(to right, #FFE600, #00FF4C) 1;
}
.top-section__head a {
color: #2B2F3A;
}
.home-article-horzontal-img {
width: 100%;
height: 0;
padding-bottom: 58.173913%;
overflow: hidden;
position: relative;
background: #ccc;
border-radius: 5px;
transition: all 0.3s ease;
}
.home-article-horzontal-name {
margin-top: 10px;
font-size: 18px;
font-weight: 600;
line-height: 25px;
color: rgba(0, 0, 0, 1);
}
.home-article-vertical-card{position: relative;overflow: hidden}
.home-article-vertical-img {
width: 100%;
height: 0;
padding-bottom: 130%;
overflow: hidden;
position: relative;
background: #ccc;
border-radius: 5px;
transition: all 0.3s ease;
}
.home-article-vertical-name {
position: absolute;
bottom: 0;
padding: 10px;
font-size: 16px;
font-weight: 600;
line-height: 22px;
color: #fff;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%);
border-radius: 8px;
}
.home-article-border-img {
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
border-radius: 50%;
transition: all 0.3s ease;
}
.home-article-border-name {
margin-top: 10px;
font-size: 18px;
font-weight: 600;
line-height: 25px;
color: rgba(0, 0, 0, 1);
}
.article-quiz-title {
margin: 20px 0;
font-size: 26px;
line-height: 35px;
font-weight: 700;
color: #000;
border-bottom: 2px solid;
border-image: linear-gradient(to right, #FFE600, #00FF4C) 1;
}
.book-image{display: flex;width: 100%;height: 310px;}
.book-image img {width: 100%;height: 100%;object-fit: contain;border-radius: 8px;}
.book-title {
text-align: center;
color: #000;
font-size: 14px;
line-height: 20px;
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
}