/*
del by R2 man 20211118

  */
html {
	scroll-behavior: smooth;
	}

.mainContent {
    line-height: normal;
}

.border_blank {
    padding: 0px;
}

em{
font-style: normal;
font-family: "PingFang-SC-Bold";
}

/*---------------------------------------------------------------------------
	SHARE_BUTTON
------------------------------------------------------------------------------

.social a {
  padding: 0 .5em;
}

--------------------------------------------------------------------------------
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	CAROUSEL
------------------------------------------------------------------------------

	.container-carousel { margin: 150px auto; }

	@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(50%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-50%);
    }
}

/* large - display 3 */
@media (min-width: 992px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
  left: 0;
  -webkit-transform: translate3d(33%, 0, 0);
  -ms-transform: translate3d(33%, 0, 0);
  -o-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
        
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
  left: 0;
  -webkit-transform: translate3d(-33%, 0, 0);
  -ms-transform: translate3d(-33%, 0, 0);
  -o-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
        
    }
}

@media (max-width: 768px) {
    .carousel-inner .carousel-item>div {
        display: none;
    }

    .carousel-inner .carousel-item>div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

--------------------------------------------------------------------------------
-----------------------------------------------------------------------------*/

/* ---------------------------------------------------
    SCROLLBAR STYLE
----------------------------------------------------- */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
.scrollbar_infoGraphic{
	width: 30vw;
	height: 40vw;
	overflow-y: scroll;
	box-shadow: 1px 1px 5px grey inset;
}
/* ---------------------------------------------------
----------------------------------------------------- */
.gradient_line {
  height: 5px;
  width: 90
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #8C8CB4 , #ABF0EC); /* Standard syntax (must be last) */
}
 .infographic_title {
  font-family:PingFang-SC-Regular;
  color:#000470;
  font-size:3.5vw;
padding-right:0.5vw;
} 
 .infographic_description {
	font-family:PingFang-SC-Regular;
	color:#0A0A0A;
	font-size:1.4vw;
} 
p.description{
	font-family:PingFang-SC-Regular;
	color:#636363;
	padding-left:8px;
	padding-right:8px;
	padding-top:5px;
	padding-bottom:8px;
	margin:0;
	font-size:1.5vw;
}
.article_title{
	color:#0600A2;
	font-family:PingFang-SC-Regular;
	font-size:2vw;
	padding:5%;
}
.container-related_article{
	background-color:white;
	padding:0;
	height:18vw;
	overflow:auto;
	border-style:groove;
	border-width: 1px;
	box-shadow: 1px 1px 10px #C7CAD1 inset;

}
.carousel-title{
	font-family:PingFang-SC-Regular;
	color:#000470;
	font-size:2.5vw;
	padding:2%;
}
.container-video{
	background-color:white;
	padding:0;	

}
.video-iframe{
	width:100%;
}
.title-icon{
	width:7vw;
}

/*------------------------------------------------------------
	MOBILE SIZE
-------------------------------------------------------------*/
@media (max-width: 768px) {

p.description{

	font-size:3vw;
}

.article_title{
	font-size:4vw;
}

.container-related_article{
	background-color:white;
	padding:0;
	height:30vw;
	overflow:auto;
}

 .infographic_title {

  font-size:5vw;
}

 .infographic_description {
	font-size:3vw;
} 

.carousel-title{
	font-size:5vw;
}

.container-video{
	height:55vw;

}
.video-iframe{
	height:80%;

}
.title-icon{
	width:10vw;
}


}
/*------------------------------------------------------------
	ENLARGE SIZE
-------------------------------------------------------------*/
@media (min-width: 1200px) {
p.description {
    font-size: 18px;
}
.article_title {
    font-size: 24px;
}

.container-related_article {
    height: 220px;
}
.carousel-title {
    font-size: 30px;
}
.infographic_description {
    font-size: 17.2px;
}
.infographic_title {
    font-size: 43px;
padding-right:6px;
}
.title-icon {
    width: 86.2px;
}

}


.xxlarge{
	margin-left: 0.3em;
    display: inline;
    vertical-align: middle;
	font-size: 32px;
}

.xxh1{
    text-align: left;
    margin-top: 12px;
    margin-bottom: 8px;
    font-weight: 100;
    font-size: 2.5em;
    line-height: 1.2em;
}	

.article-meta{
    line-height: 2em;
    color: #444444;
}