@charset "utf-8";
/* CSS Document */

.banner-wrapper {background: url("../images/article/article-bg.svg")repeat #918ad9;
  /*background-color: rgb(160, 154, 221);*/ display: flex; align-items:flex-end; justify-content: center;
  background-size: contain !important;
}
.boy{width:250px;
  margin:0 auto; 
  text-align: center; 
  position:absolute; z-index:5; 
  bottom:70px; left: 0; right:0;
}

.banner-items{
	position: relative;
	width: 100%;
	height: 100%;
}
.banner-items div{	
  position: absolute;
	z-index: 2;
  -webkit-animation: tilt 1s linear 0s infinite alternate;
  animation: tilt 1s linear 0s infinite alternate;}

  @keyframes tilt {
    0% {
      transform: rotate(0deg) translate3d(0, 0, 0);
    }
    100% {
      transform: rotate(10deg) translate3d(0, 0, 0);
    }
  }

.banner-items div:nth-child(1) { left: 42%; top: 18%; animation-delay: 1s;}
.banner-items div:nth-child(2) { left: 55%; top: 32%; animation-delay: 1.5s;}
.banner-items div:nth-child(3) { left: 28%; top:40%; animation-delay: 2s;}
.banner-items div:nth-child(4) { left: 60%; top: 55%; animation-delay: 2.5s;}
.banner-items div:nth-child(5) { left: 28%; top: 65%; animation-delay: 3s;}


.text a{background: url("../images/article/text-bubble.svg")no-repeat; 
  width: 150px; height: 85px; display: flex; align-items: center; 
  justify-content: center;
font-size: 22px; 
color: #fff; margin: 10px;
font-weight: 500;
}



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



.box{ margin: 0 auto 40px; width:100%;  border-radius: 15px; cursor: pointer;}   
.box .box-img{display: block; height: auto; width: 100%; margin: 0px auto 10px; border-radius: 15px; border:1px #c8c8c8 solid;
  transition-duration: 1s;}  

.box .title-wrapper{padding: 0 10px; display: flex; justify-content: space-between; align-items: center;} 

.box .title{font-size: 18px; line-height: 30px; font-weight: 500;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.box a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 85%; color: var(--secondry-color);}

.box .title-wrapper .share{width:15px; border: none;}
.box .title-wrapper .share img{vertical-align: middle; cursor: pointer;}

.box .box-img:hover {transform: scale(0.97);}


/* -----------------responsive-------------------- */

@media (max-width: 1400px){

  .boy{width:200px;}
  .banner-items div:nth-child(1) { left: 42%; top: 18%;}
  .banner-items div:nth-child(2) { left: 56%; top: 30%;}
  .banner-items div:nth-child(3) { left: 25%; top:30%;}
  .banner-items div:nth-child(4) { left: 59%; top: 55%;}
  .banner-items div:nth-child(5) { left: 25%; top: 62%;}

}


@media (max-width:1024px){
  .text a{ width: 140px; height: 79px; font-size:20px;}
  .boy{width:180px;}
  .banner-items div:nth-child(1) { left: 42%; top: 18%;}
  .banner-items div:nth-child(2) { left: 60%; top: 33%;}
  .banner-items div:nth-child(3) { left: 22%; top:30%;}
  .banner-items div:nth-child(4) { left: 62%; top: 58%;}
  .banner-items div:nth-child(5) { left: 20%; top: 62%;}

}


@media (max-width:830px){

  .banner-items div:nth-child(1) { left: 42%; top: 18%;}
  .banner-items div:nth-child(2) { left: 65%; top: 33%;}
  .banner-items div:nth-child(3) { left: 12%; top:30%;}
  .banner-items div:nth-child(4) { left: 68%; top: 58%;}
  .banner-items div:nth-child(5) { left: 10%; top: 62%;}

}


@media (max-width:640px){
  .text a{ width: 100px; height: 57px; font-size:16px;}

  .boy{width:170px;}
  .banner-items div:nth-child(1) { left: 38%; top: 25%;}
  .banner-items div:nth-child(2) { left: 64%; top: 35%;}
  .banner-items div:nth-child(3) { left: 12%; top:36%;}
  .banner-items div:nth-child(4) { left: 70%; top: 58%;}
  .banner-items div:nth-child(5) { left: 8%; top: 62%;}

}


@media (max-width:480px){
  .text a{ width:80px; height:45px; font-size:15px;}
  .banner-items div:nth-child(1) a { width:95px; height: 54px; }
  .boy{width:140px; bottom: 120px;}
  .banner-items div:nth-child(1) { left: 35%; top: 20%;}
  .banner-items div:nth-child(2) { left: 70%; top: 35%;}
  .banner-items div:nth-child(3) { left: 5%; top:36%;}
  .banner-items div:nth-child(4) { left: 75%; top: 58%;}
  .banner-items div:nth-child(5) { left: 5%; top: 62%;}

}

@media (max-width:375px){
  .boy{width:130px; bottom: 130px;}
  .banner-items div:nth-child(1) { left: 35%; top: 23%;}
  .banner-items div:nth-child(2) { left: 66%; top: 38%;}
  .banner-items div:nth-child(3) { left: 3%; top:36%;}
  .banner-items div:nth-child(4) { left: 70%; top:55%;}
  .banner-items div:nth-child(5) { left: 3%; top: 62%;}

}