:root {
  --light: #222;
  --dark: rgba(0,0,0,0);
  --dark2: rgba(0,0,0,0);
}

.block_07 {  overflow: clip;  position: relative;  display: flex;  justify-content: center;  align-items: center;
  padding: 0rem;  width: calc(100% - 0px); margin:0 auto; padding:130px 50px 220px 50px; background:#fff}
.block_07 .contBox {width:100%;}
.block_07 .head  {font-size:45px; line-height:60px; font-weight:600; }
.block_07  .head_txt {font-size:18px; line-height:28px;  margin:15px 0 50px 0; }
.block_07 .head span{position: relative; padding:0 13px; }
.block_07 .head span:before { content: "";  width: 8px; height: 8px; background-color:#ff4500 ;  position: absolute; 
right: 0; bottom: 12px;   border-radius: 50%;}

.block_07 .category_container {  --gap:0px;  display: flex;  justify-content: space-between;  flex-wrap: nowrap;
  gap:40px /*calc(var(--gap) * 2)*/;  width: 100%;  height: 100%; padding-top:50px;}
.block_07 .content {  --active: 0;  cursor: pointer;  /*overflow: clip;*/  position: relative;  z-index: 10; text-align:center;
  display: flex;  flex-direction: column;  gap: 1.5rem;  padding: 2.5rem; border-radius: 30px;
  width: calc((100% / 4) - var(--gap));  height: 500px;  transition: width 0.5s ease-in-out;}
.block_07 .content:hover {  --active: 1;  width: calc(50% - var(--gap));}
.block_07 .content:hover::before { background-color: var(--dark2); transition: all 0.3s}
.block_07 .content::before {  content: "";  position: absolute;  z-index: -10;  top: 0;  left: 0;  width: 100%;  height: 100%;
  background-color: var(--dark);  }
.block_07 .content::after {display:none;  content: "";  position: absolute;  z-index: -10;  bottom: 30px;  left: 0;  width: 100%;
height:50px; background:url(../img/arrow.png)no-repeat center; transition: 0.8s all  } 
.block_07 .content a { position: absolute;  z-index: 0;  bottom: 0px;  left: 0;  width: 100%;height:100%;   }  
.block_07 .content:hover::after { background:url(../img/arrow.png)no-repeat 90%; transition: 0.8s all  }  
.block_07 .content img {  position: absolute;  z-index: -20;  top: 0;  left: 0;  width: 100%;  height: 100%;
  -o-object-fit: cover;  object-fit: cover; -o-object-position: center;   object-position: center; border-radius: 30px;}
.block_07 .content .profile_image {  opacity: calc(1 - var(--active));  transition: opacity 0.5s ease-in-out;}

.block_07 .profile_detail {  display: flex;  flex-direction: column;  gap: 0.5rem;  /*width: 12rem;*/
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s; position:absolute; bottom:-70px; left:50%;
  transform:translate(-50%,0%) }
.block_07 .profile_detail span {  font-size: 20px;     text-transform: uppercase;  font-weight: 600;  color: var(--light);  text-wrap: nowrap;}
.block_07 .profile_detail span.txt {font-size:14px; font-weight:400;}
.block_07 .profile_detail p {  font-size: 1rem;  font-weight: 400;  color: var(--light);}
.block_07 .profile_quote {  width: 100%;  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem)));}
.block_07 .profile_quote p {  font-size: 16px; line-height:1.5em;  color: var(--light);
  transform: translate(0, calc((1 - var(--active)) * (100% + 2.5rem))); 
  transition: transform 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.1s;}

.block_07 .wrapper {  display: grid;  grid-template-rows: 0fr;  overflow: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;
  transition: grid-template-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s, -ms-grid-rows 0.5s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}
.block_07 .profile_quote {  min-height: 0;  transform: translateY(50%);  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s cubic-bezier(0.23, 0.93, 0.77, 1) 0.01s;}
.block_07 .content:hover .wrapper {  grid-template-rows: 1fr;}
.block_07 .content:hover .profile_quote {  transform: none;  opacity: 1;}




/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.block_07 {  width: calc(100% - 0px); margin:0 auto; padding:50px 0 50px 0}
.block_07 .head  {font-size:25px; line-height:35px}
.block_07  .head_txt {font-size:15px; line-height:22px;  margin:10px 0 20px 0;}
.block_07 .head span{ padding:0 12px;}
.block_07 .head span:before { content: "";  width: 6px; height: 6px;   position: absolute; 
right: 0; bottom: 7px;   border-radius: 50%;}
	
.block_07 .category_container {  --gap: 0rem; display:flex; flex-wrap: wrap;  justify-content: space-between; gap: 0;
  width:calc(100% - 0px);  height: 100%; padding:10px 20px 0 20px; }
.block_07 .content  {  --active: 0;  cursor: pointer;   position: relative;  z-index: 10; 
  display: flex;  flex-direction: column;   padding: .5rem 1.5rem; margin-bottom:6px; text-align:center;
  width: 49%;  height: 180px;  border-radius: 1rem;  transition: width 0.5s ease-in-out; margin-bottom:80px}	
.block_07 .profile_detail {   width: auto; bottom:-50px; gap:0.2rem }
.block_07 .profile_detail span {  font-size: 16px;  }
.block_07 .content:hover {  --active: 1;  width: 49%;  transition: 0.5s all  }
.block_07 .profile_quote p { display:none;  font-size: 1rem;  }
.block_07 .content::before {   background-color: var(--dark2);  }
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}