/* 
font-thin	      font-weight: 100;
font-extralight	font-weight: 200;
font-light	    font-weight: 300;
font-normal	    font-weight: 400; || regular
font-medium	    font-weight: 500;
font-semibold	  font-weight: 600;
font-bold	      font-weight: 700;
font-extrabold	font-weight: 800;
font-black	    font-weight: 900; 
*/


/* 
text-xs	    font-size: 0.75rem;   12px
text-sm	    font-size: 0.875rem;  14px
text-base	  font-size: 1rem;      16px
text-lg	    font-size: 1.125rem;  18px
text-xl	    font-size: 1.25rem;   20px
text-2xl	  font-size: 1.5rem;    24px
text-3xl	  font-size: 1.875rem;  30px
text-4xl	  font-size: 2.25rem;   36px
text-5xl	  font-size: 3rem;      48px
*/

/* 
sm	  640px	  @media (min-width: 640px)
md	  768px	  @media (min-width: 768px)
lg	  1024px	@media (min-width: 1024px)
xl	  1280px	@media (min-width: 1280px)
2xl	  1536px	@media (min-width: 1536px) 
*/

body {
  min-width: 320px;
}

.text-22px {
  font-size: 22px;
}

.flex-1 {
  flex: 1;
}

.flex-4 {
  flex: 2;
}

.flex-5 {
  flex: 5;
}
.flex-7 {
  flex: 7;
}
.flex-2 {
  flex: 2;
}

.lh-2 {
  line-height: 2;
}

.mt-100px {
  margin-top: 100px;
}

.c-0-85 {
  color: rgba(0, 0, 0, 0.85);
}

.c-0-100 {
  color: rgba(0, 0, 0, 1);
}

.c-0-65 {
  color: rgba(0, 0, 0, 0.6500)
 }

.c-34-100 {
  color: rgba(34, 34, 34, 1);
}

.c-38-100 {
  color: rgba(38, 38, 38, 1);
}

.c-255-85 {
  color: rgba(255, 255, 255, 0.85);
}

.c-255-100 {
  color: rgba(255, 255, 255, 1);
}

.c-pink-100 {
  color: #003C7D;
}

.bb-230-100 {
  border-bottom: 1px solid rgba(230, 230, 230, 1);
}

.bb-0-100 {
  border-bottom: 2px solid rgba(0, 0, 0, 1);
}

.bb-179-100 {
  border-bottom: 1px solid rgba(179, 179, 179, 1);
}

.bb-2-0-95{
  border-bottom: 2px solid rgba(0,0,0,0.95);
}

.br-230-100 {
  border-right: 1px solid rgba(230, 230, 230, 1);
}

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

.hover-scale img {
  transition: all .75s;
}

.text-hover-animate {
  background-image: linear-gradient(#F787CF,#F787CF);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size .3s;
}

.text-hover-animate-2 {
  background-image: linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.85));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size .3s;
}

.text-hover:hover .text-hover-animate {
  background-size: 100% 1px;
}

.text-hover-2:hover .text-hover-animate-2 {
  background-size: 100% 1px;
  font-weight: bold;

}

.text-hover:not(.choosed):hover .text-hover-animate {
  color: #F787CF;
}

.text-hover:not(.choosed):hover .text-hover-color-3 {
  color: #F787CF;
}

.position-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-hover-color:hover {
  color: #FFFFFF;
  opacity: 1;
}

.text-hover-color-2:hover {
  color: #F787CF;
}

.pb-2-0 {
  padding-bottom: 2px;
}

.text-hover-bold:hover {
  font-weight: bold;
}

.span-line-5 {
  position: relative;
}

.span-line-5::after {
  content: "";
  width: 0;
  height: 1px;
  background: rgba(0,0,0,0.85);
  position: absolute;
  top: 100%;
  left: 0;
  transition: all .4s;
}

.span-line-5:hover::after {
  left: 0;
  width: 100%;
}

.span-line-2 {
  position: relative;
}

.span-line-2::after {
  content: "";
  width: 0;
  height: 2px;
  background: #0087FF;
  position: absolute;
  top: 100%;
  left: 0;
  transition: all .4s;
}

.span-line-2:hover::after {
  left: 0;
  width: 100%;
}

.span-line-3 {
  position: relative;
}

.span-line-3::after {
  content: "";
  width: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 100%;
  left: 0;
  transition: all .4s;
}

.span-line-3:hover::after {
  left: 0;
  width: 100%;
}

.text-hover-animate-1 {
  background-image: linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.85));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size .3s;
}

.sider-li:not(.choosed) .text-hover-1:hover .text-hover-animate-1 {
  background-size: 100% 1px;
}