/*------------------------------------------------/
              Variables
--------------------------------------------------*/
:root {
  --thumbnail-height: ;
}

/*------------------------------------------------/
              Main Rules
--------------------------------------------------*/
.whatsnew-content{
  font-size: 15px;
  line-height: 1.2em;
  font-weight: 400;
	max-width: 1200px;
  margin: 0 auto;
}

.whatsnew-content .title{
	font-size:2.0em;
	line-height: 1.2em;
	font-weight: 400;
	color:#079bcc;
	text-align: center;
	padding: 25px 20px 0 20px;
}

.whatsnew-content .page_des{
	font-size: 1.0em;
  text-align: left;
  line-height: 1.6em;
  padding: 25px 20px;
}

.whatsnew-content img {
  max-width: 100%;
}

.whatsnew_box{
	position: relative;
  background: linear-gradient(90deg,#c2c2c2,#c2c2c2) 4.10rem 0 repeat-y;
  background-size: .25em .25em;
  margin: 0 auto;
	padding: 0 10px;
}

.whatsnew_feature{
	padding-left: 7rem;
}

.whatsnew_filter{
	display: block;
	margin: 10px 0 30px 0;
	text-align: center;
}

.whatsnew_filter .filter_item{
  display: inline-block;
  border-radius: 4px;
  padding: 5px 20px;
  margin: 5px;
  line-height: 30px;
  font-size: 16px;
  border: 1px solid #ccc;
  color: #222;
}

.filter_on {
	color:#fff !important;
	background: #0098d8;
}

.whatsnew_filter .filter_off:hover{
	background: #eee;
	/*color:#fff;*/
	cursor:pointer;
}

.whatsnew_feature .feature_box{
	width: 100%;
	display: flex;
 	flex-flow: row wrap;
 	justify-content: flex-start;
	margin: 1em 0 2em 0;
}

.whatsnew_feature .feature_item{
	width: 25%;
	float: left;
 	flex-flow: column nowrap;
	box-sizing: border-box;
	padding: 0.8em;
}

.whatsnew_feature .feature_item h5{
	font-size: 16px;
	line-height: 24px;
	padding: 0.5em 0;
	font-weight: 600;
}

.whatsnew_feature .feature_item p{
	font-size: 14px;
	line-height: 20px;
	text-align: left;
}

.feature_item .p_tag{
  border-radius: 2px;
  display: inline-block;
  color: #fff;
	font-weight: 600;
  padding: 0px 12px;
  font-size: 11px;
  margin-bottom: 2px;
	line-height: 16px;
}

.feature_item a{
	color:#0687d5;
}

.feature_item a:hover{
	color:#46caf5;
}

.tag_pdr{background: #0161ba}
.tag_phd{background: #ba017e}
.tag_cdr{background: #ff8600}
.tag_adr{background: #438f01}
.tag_pc{background: #333}

.txt_pdr{color: #0161ba;}
.txt_phd{color: #ba017e}
.txt_cdr{color: #ff8600}
.txt_adr{color: #438f01}
.txt_pc{color: #333}

/* --------- Calendar date --------- */
.calendar-item-date {
  display: block;
  position: absolute;
  top: 0rem;
  width: 3em;
  padding: .5em 0;
  border-radius: 8px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: 2.25em;
  font-weight: 300;
  background-color: #c2c2c2;
  color: #fff;
  text-shadow: 0 1px 1px rgba(255,255,255,.5);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  box-shadow: 0 0 0 0.25em #fff;
}

.calendar-item-date .date-year {
  font-size: .8em;
}

.whatsnew-content .arrow {
  position: relative;
}

.whatsnew-content .arrow::after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 395.09 88.71'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m368.33,20.11c-6.26.21-12.53.58-18.79.58-7.56,0-14.43-2.16-20.1-7.44-2.93-2.72-4.26-6.01-3.14-9.86.39-1.33,1.71-3.01,2.92-3.32,1.17-.3,3.19.58,4.04,1.6,4.07,4.89,9.52,6.86,15.48,7.73,11.63,1.7,23.08-.43,34.55-1.93,1.12-.15,2.25-.88,3.19-1.58,2.25-1.69,5.31-1.71,6.92.12,2.11,2.39,2.37,6.21.13,7.93-10.25,7.86-13.73,19.39-17.18,30.98-1.83,6.17-3.11,12.37-2.43,18.89.22,2.12.92,4.99-2.58,5.6-3.51.61-5.97-1.86-6.81-4.61-.41-1.34-.16-2.98.13-4.41.91-4.49,2-8.94,2.97-13.42.91-4.21,1.77-8.43,2.76-13.17-3.68,2.34-7.01,4.5-10.37,6.6-18.73,11.71-38.58,21.06-59.39,28.48-15.46,5.51-31.24,9.8-47.29,13.04-14.85,3-29.82,5.46-44.99,6-14.1.5-28.24,1.13-42.32.6-13.22-.5-26.41-2.18-39.56-3.84-15.59-1.96-30.79-5.83-45.79-10.49-20.83-6.47-40.7-15.13-59.4-26.37-6.11-3.67-11.97-7.76-17.85-11.8C-.06,33.62-1,28.3,1.14,24.61c1.18-2.03,3.79-2.25,6.42-.43,4.17,2.88,8.24,5.9,12.47,8.7,20.28,13.45,42.18,23.55,65.44,30.53,11.75,3.53,23.71,6.59,35.76,8.84,11.51,2.15,23.24,3.5,34.93,4.22,13.13.81,26.34.93,39.49.64,19.61-.43,38.98-3.22,58.16-7.32,21.51-4.6,42.41-11.13,62.54-19.97,18.02-7.91,35.23-17.36,51.37-28.68.31-.22.67-.36,1.01-.53-.13-.17-.27-.34-.4-.5Z'/%3E%3C/svg%3E");
  position: absolute;
  width: 34%;
  filter: drop-shadow(#000000b0 2px 3px 3px);
  opacity: 0;
  padding: 0;
  align-self: center;
  padding: 0 calc(var(--thumbnail-height) / 1.86);
  top: calc(var(--thumbnail-height) / 1.16);
  animation: 2s ease-in-out 0.6s forwards fadeInEffect;
}

@keyframes fadeInEffect {
  0% {opacity: 0;}
  100% {opacity: 0.85;}
}

@media screen and (max-width: 900px) {
	.whatsnew_feature .feature_item {
    	width: 50%;
	}
}

@media screen and (max-width: 768px) {
	.calendar-item-date {
		position: relative;
		margin: 0 auto;
		width: 7em;
		font-size: 2em;
		padding: .3em 0;
	}
	.whatsnew_feature{
		padding-left: 0;
	}
	.whatsnew_box{
		padding: 0;
		background: none
	}

	.whatsnew-content .title {
		font-size: 1.6em;
		line-height: 1.3em;
		padding-top: 0.5em;
	}

}

@media screen and (max-width: 500px) {
	.whatsnew_feature .feature_item {
    	width: 100%;
	}

}

select#soflow {
    appearance: button;
   -webkit-appearance: button;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   user-select: none;
   -webkit-user-select: none;
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 90%;
   background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(85, 85, 85, 0.2637429971988795) 100%) !important;
}

.whatsnew-content .page_des {
  display: none;
}