﻿.cms-main-content:before {  content:"";  background: url("../images/index/title-left.png") no-repeat 0 0; background-size:432px auto;  width: 432px; height:490px; position: absolute; z-index: 99; left: -120px;  top:0px; animation-delay:2s; animation:style1 4s ease 1 both;}
@keyframes style1 {
0% {  margin-left: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-left: 0px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}
@-webkit-keyframes style1 {
0% {  margin-left: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-left: 0px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}


.cms-main-content:after {  content:"";  background: url("../images/index/title-right.png") no-repeat 0 0; background-size:470px auto;  width: 432px; height:456px; position: absolute; z-index: 9; right: -80px;  top:0px; animation-delay:300s; animation:style2 6s ease 1 both;}
@keyframes style2 {
0% {  margin-right: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-right: 0px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}
@-webkit-keyframes style2 {
0% {  margin-left: -100px; margin-top: -100px; -webkit-transform: scale(0.5); transform: scale(0.5);  }
100% { margin-right: 0px;  margin-top:0px;  -webkit-transform: scale(0.8); transform: scale(0.8);}
}

@media (max-width: 1440px) {
.cms-main-content:before { left: -80px;  background-size:280px auto;  width: 280px; height:318px; }
.cms-main-content:after {  background-size:270px auto;  width: 270px; height:259px;  right: -80px; top:100px;}

}
@media (max-width: 1199.98px) {
.cms-main-content:before { left: -80px; top:80px; background-size:230px auto;  width: 230px; height:260px; }
.cms-main-content:after {  background-size:270px auto;  width: 270px; height:259px;  right: -80px; top:60px;}
}
@media (max-width: 767.98px) {
.cms-main-content:before { left: -80px;  background-size:180px auto;  width: 180px; height:204px; }
.cms-main-content:after {  background-size:180px auto;  width: 180px; height:173px;  right: -80px; top:60px;}
}
#cms-main .cms-main-content li{list-style: none;}
.cms-news { width:100%; margin: 0 auto;  padding: 0px 15px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: flex-start;  }
.cms-news li{ position: relative; display: flex;flex-wrap: wrap; justify-content: flex-start; align-items: center;  width: calc(100%/3 - 40px);  padding: 0px; margin:50px 20px; transition: all 0.5s ease 0s; list-style: none; }
.cms-news li:hover{ transform: translateY(-10px);   transition: transform .5s .1s, opacity .5s .1s;} 
.cms-news h3{font-size: 1.25rem; min-height:54px;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.cms-news h3 a{ color:#32315d; }
#cms-main .cms-news p{   font-size: .95rem;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical;}
.cms-news-item { width:100%;  margin: auto;  padding:25px 15px;   position: relative;box-sizing: border-box; transition: all ease .8s;  background: #fff; }
.cms-news-item figure{ position: relative;   display: block; top:0px; opacity:1; margin: auto;  overflow: hidden;}
.cms-news-item figure img{ width:auto; max-width: 100%;  min-height: 150px;  max-height:150px; display: block; margin: auto; overflow: hidden; }

.cms-news-item:hover figure { opacity: 1;  transform: translateY(0);  transition-duration: 1s; transition-delay: .2s; }
.cms-news .cms-news-icon { display: inline-block; padding:0px 10px; margin-bottom: 10px; font-size: 13px; line-height: 20px;color:#fff; background:#9888c9;}
.cms-news .cms-news-btn {display: inline-block; padding:8px 15px;  position: absolute;  bottom: 0;  left: 50%;  -webkit-transform: translate(-50%, 10px);  -ms-transform: translate(-50%, 10px);  transform: translate(-50%, 10px); border-radius: 20px; background-color:#31315e;transition: all ease .8s;}
.cms-news-btn a{color: #FFF;}
#cms-main .cms-news .cms-news-btn a { font-size: 0.875rem; font-weight: 700; color: #fff;}
.cms-news .t {position: absolute; top: 0;  left: 10px;  right: 10px; height: 10px;  background: url("../images/index/line-1.png") repeat-x left top;}
.cms-news .l {position: absolute; top: 0; left: 0; width: 10px;  height: 100%;  background: url("../images/index/line-2.png") repeat-y left top;}
.cms-news .r {position: absolute; top: 0;right: -1px;width: 10px; height: 100%;background: url("../images/index/line-2.png") repeat-y left top;}
.cms-news .b { position: absolute; left: 10px; right: 10px; bottom: 0; height: 10px;  background: url("../images/index/line-1.png") repeat-x left top;}
.cms-news time {position: absolute; padding:5px 15px;top: 0;left: 50%; -webkit-transform: translate(-50%, calc(-50% + 5px));  -ms-transform: translate(-50%, calc(-50% + 5px));  transform: translate(-50%, calc(-50% + 5px));color:#fff;background:#31315e; text-align: center;}
.cms-news time .day { font-size: 16px; text-transform: uppercase; font-family: 'Roboto', sans-serif; line-height: 110%; }
.cms-news time .year { font-size: 12px;  }

 
@media (max-width: 767.98px) {
 .cms-news li{ width: calc(100% - 10px); margin:50px 5px;  }
 .cms-news-item { padding:25px 8px; }
 iframe#video_iframe{   position: fixed; margin:25% auto!important; top:5%!important; left: 5%!important; bottom: 0; width:90%;  height:50%;}
 }
.cms-main-post{ display: flex; flex-wrap: wrap; justify-content: center; word-break: break-all; }

.cms-main-post h1{margin:20px 0;text-align: left; font-size: 1.75rem; line-height: 1.2; font-weight:400;color: #000; }
.cms-main-post h3{margin: 0;text-align: left; font-size: 1.75rem; line-height: 1.2; font-weight:400;color: #000; }
.cms-main-post-time p time{color:#5359a0; font-size: 0.875rem; font-weight:400;}
.cms-main-post-time p time b{  display: block; font-size:2rem; font-weight: 700; }

.cms-main-post-pagination{ padding: 45px 0;  display: flex;}
.cms-main-post-pagination h2 {  font-size: 1.125rem; font-weight: 400; max-width: 280px; color: #000000;}
.cms-main-post-pagination>div { cursor: pointer; width: 100%; position: relative;  display: flex; align-items: center;}
.cms-main-post-pagination .cms-prev { padding-right: 12px;} 
.cms-prev:after { content: ''; width: 1px;  height: 50px;  background-color: #cccccc; position: absolute; right: 0; top: 6; display: block;}
.cms-prev h2 { margin-left: 24px; margin-right: 12px;}
.cms-prev .cms-btn {  margin-left: auto;}
.cms-prev .cms-btn:before {  order: 1;}
.cms-prev .cms-btn:after {  border-width: 5px 5px 5px 0;}
.cms-next { padding-left: 12px; justify-content: flex-end;}
.cms-next h2 { margin-left: 12px;  margin-right: 24px;}
.cms-next .cms-btn { order: 0; margin-right: auto;}
.cms-next h2 { order: 1;}
.cms-next .cms-main-post-time {order: 2;}
.cms-btn { cursor: pointer; width: 35px;  height: 20px; position: relative; display: flex; align-items: center;}
.cms-btn:before { content: ''; width: 30px; height: 1px; background-color: #31315e; display: block;}
.cms-btn:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 5px; border-color: transparent #31315e; display: block;}

 

@media (max-width:767px) {
 .cms-main-post-pagination h2 {display: none;}

}

 
