.sec_inner {max-width:1320px;margin: 0 auto;}



.block07_cont {display:flex;justify-content: space-between;}
.block07_cont .block07_txt {width:530px;font-size:var(--cw-size-8);font-weight:500;line-height:66px;}
.block_07 {  overflow: clip;  position: relative;  display: flex;  justify-content: center;  align-items: center; padding: 0rem;  width: calc(100% - 0px); margin:0 auto; padding:90px 0px 150px 0px; background:#fff}
.block_07 .head  {font-size:45px; line-height:60px; font-weight:600; }
.block_07  .head_txt {font-size:22px; line-height:45px;  margin:5px 0 50px 0; }
.block_07  .head_txt span {}
.block_07 .category_container {  --gap:0px;  display: flex;  justify-content:flex-start;  flex-wrap: nowrap;  gap:10px /*calc(var(--gap) * 2)*/;width:610px;height: 100%; padding-top:0px;margin-left:180px;}
.block_07 .content {  background-color:var(--cw-Blue1000-color);--active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10;display: flex;  flex-direction: column;  gap: 1.5rem;  padding:42px 40px; border-radius: 20px;  width: 72px/*calc((100% / 3) - var(--gap))*/;  height: 297px;  transition: width 0.5s ease-in-out;}
.block_07 .content:hover {  --active: 1;  width: calc(100% - var(--gap));height:333px;}
.block_07 .content:hover::before { background-color: var(--cw-Blue1000-color); transition: all 0.5s;}
.block_07 .content::before {  content: "";  position: absolute;  z-index: -10;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: var(--cw-Blue1000-color);  }
.block_07 .content::after {  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;*/}
.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;}
.block_07 .profile_detail span {  font-size: 1.5rem;  font-weight: 500;  color: var(--light);  text-wrap: nowrap;}
.block_07 .content .profile_detail p {font-size:var(--cw-size-7);  font-weight: 500;  color: var(--cw-Blue1000-color);}
.block_07 .content.is-active .profile_detail p{ color: var(--cw-point-color);}
.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(--cw-gray000-color);  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 .content .arrow {position:absolute;right:40px;bottom:40px;display:block; opacity: 0;}
.block_07 .content.is-active .arrow {opacity: 1;}
.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.is-active .wrapper {  grid-template-rows: 1fr;}
.block_07 .content.is-active .profile_quote {  transform: none;  opacity: 1;}
.block_07 .content.is-active  { --active: 1; width: calc(100% - var(--gap)); height: 333px;}


/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
.sec_inner {margin:0 4%;}
.sec_inner img {max-width:100%;}
.block07_cont {display:block;}
.block07_cont .block07_txt {width:auto;font-size:var(--cw-size-6);margin:0 0 35px;line-height:32px;}
.block_07 {  width: calc(100% - 0px); margin:0 auto; padding:50px 0 50px 0;display:block;}
.block_07 .head  {font-size:25px; line-height:35px}
.block_07  .head_txt{font-size:16px; line-height:25px;  margin:10px 0 20px 0;}
.block_07 .category_container {  --gap: 0rem; display:flex;  justify-content: space-between; gap: 2%;  width:calc(100% - 0px);  height: 100%; padding:10px 0%;margin-left:0;}
.block_07 .content  {  --active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10; display: flex;  flex-direction: column;   padding: 2.5rem 1.5rem; margin-bottom:6px; text-align:center; width:calc(33% -  2%); height:187px;  border-radius: 1rem;  transition: width 0.5s ease-in-out;}
.block_07 .profile_detail {   width: auto;}
.block_07 .profile_detail span {  font-size: 18px;  }
.block_07 .content:hover {  --active: 1;  width: 79%;  transition: 0.5s all ;height:187px; }
.block_07 .profile_quote p { font-size: var(--cw-size-2);  text-align:left; }
.block_07 .content::before {   background-color: var(--dark2);  }
.block_07 .content .profile_detail p {font-size:var(--cw-size-4);text-align:left;}
.block_07 .content.is-active {height:187px; }
.content.is-dim{  width:10%;}
.block_07 .content .arrow {display:none;}
}
@media (max-width: 768px) {


.sec_inner {margin:0 4%;}
.sec_inner img {max-width:100%;}
.block07_cont {display:block;}
.block07_cont .block07_txt {width:auto;font-size:var(--cw-size-6);margin:0 0 35px;line-height:32px;}
.block_07 {  width: calc(100% - 0px); margin:0 auto; padding:50px 0 50px 0;display:block;}
.block_07 .head  {font-size:25px; line-height:35px}
.block_07  .head_txt{font-size:16px; line-height:25px;  margin:10px 0 20px 0;}
.block_07 .category_container {  --gap: 0rem; display:flex;  justify-content: space-between; gap: 2%;  width:calc(100% - 0px);  height: 100%; padding:10px 0%;margin-left:0;}
.block_07 .content  {  --active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10; display: flex;  flex-direction: column;   padding: 2.5rem 1.5rem; margin-bottom:6px; text-align:center; width:calc(33% -  2%); height:187px;  border-radius: 1rem;  transition: width 0.5s ease-in-out;}
.block_07 .profile_detail {   width: auto;}
.block_07 .profile_detail span {  font-size: 18px;  }
.block_07 .content:hover {  --active: 1;  width: 79%;  transition: 0.5s all ;height:187px; }
.block_07 .profile_quote p { font-size: var(--cw-size-2);  text-align:left; }
.block_07 .content::before {   background-color: var(--dark2);  }
.block_07 .content .profile_detail p {font-size:var(--cw-size-4);text-align:left;}
.block_07 .content.is-active {height:187px; }
.content.is-dim{  width:10%;}
.block_07 .content .arrow {display:none;}

}
@media (max-width: 640px) {




.sec_inner {margin:0 4%;}
.sec_inner img {max-width:100%;}
.block07_cont {display:block;}
.block07_cont .block07_txt {width:auto;font-size:var(--cw-size-6);margin:0 0 35px;line-height:32px;}
.block_07 {  width: calc(100% - 0px); margin:0 auto; padding:50px 0 50px 0;display:block;}
.block_07 .head  {font-size:25px; line-height:35px}
.block_07  .head_txt{font-size:16px; line-height:25px;  margin:10px 0 20px 0;}
.block_07 .category_container {  --gap: 0rem; display:flex;  justify-content: space-between; gap: 2%;  width:calc(100% - 0px);  height: 100%; padding:10px 0%;margin-left:0;}
.block_07 .content  {  --active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10; display: flex;  flex-direction: column;   padding: 2.5rem 1.5rem; margin-bottom:6px; text-align:center; width:calc(33% -  2%); height:187px;  border-radius: 1rem;  transition: width 0.5s ease-in-out;}
.block_07 .profile_detail {   width: auto;}
.block_07 .profile_detail span {  font-size: 18px;  }
.block_07 .content:hover {  --active: 1;  width: 79%;  transition: 0.5s all ;height:187px; }
.block_07 .profile_quote p { font-size: var(--cw-size-2);  text-align:left; }
.block_07 .content::before {   background-color: var(--dark2);  }
.block_07 .content .profile_detail p {font-size:var(--cw-size-4);text-align:left;}
.block_07 .content.is-active {height:187px; }
.content.is-dim{  width:10%;}
.block_07 .content .arrow {display:none;}

}
@media (max-width: 480px) {
.sec_inner {margin:0 4%;}
.sec_inner img {max-width:100%;}
.block07_cont {display:block;}
.block07_cont .block07_txt {width:auto;font-size:var(--cw-size-6);margin:0 0 35px;line-height:32px;}
.block_07 {  width: calc(100% - 0px); margin:0 auto; padding:50px 0 50px 0;display:block;}
.block_07 .head  {font-size:25px; line-height:35px}
.block_07  .head_txt{font-size:16px; line-height:25px;  margin:10px 0 20px 0;}
.block_07 .category_container {  --gap: 0rem; display:flex;  justify-content: space-between; gap: 2%;  width:calc(100% - 0px);  height: 100%; padding:10px 0%;margin-left:0;}
.block_07 .content  {  --active: 0;  cursor: pointer;  overflow: clip;  position: relative;  z-index: 10; display: flex;  flex-direction: column;   padding: 2.5rem 1.5rem; margin-bottom:6px; text-align:center; width:calc(33% -  2%); height:187px;  border-radius: 1rem;  transition: width 0.5s ease-in-out;}
.block_07 .profile_detail {   width: auto;}
.block_07 .profile_detail span {  font-size: 18px;  }
.block_07 .content:hover {  --active: 1;  width: 79%;  transition: 0.5s all ;height:187px; }
.block_07 .profile_quote p { font-size: var(--cw-size-2);  text-align:left; }
.block_07 .content::before {   background-color: var(--dark2);  }
.block_07 .content .profile_detail p {font-size:var(--cw-size-4);text-align:left;}
.block_07 .content.is-active {height:187px; }
.content.is-dim{  width:10%;}
.block_07 .content .arrow {display:none;}



}
@media (max-width: 320px) {
}