@media screen{
/**** inside animation ****/
#content .timeline-wrap .timeline-item {
  transform: translateY(50px);
}

#content .timeline-wrap .timeline-item.done {
  opacity: 1;
  transform: translateY(0) !important;
}

#content .fullwidth.highlight-sec .img {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: clip-path 0.5s ease-out;
}

#content .fullwidth.highlight-sec .content {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.5s ease-out;
}

#content .fullwidth.highlight-sec:not(.quote) .content>div {
  opacity: 0;
  transition: opacity 0.4s ease-out 0.6s;
}

#content .fullwidth.highlight-sec.quote .content>div>* {
  opacity: 0;
  transition: opacity 0.4s ease-out 0.6s;
}

#content .fullwidth.highlight-sec.quote .content>div:before {
  transform: translateX(-50px);
  transition: opacity 0.3s ease-out 0.45s, transform 0.4s ease-out 0.45s;
}

#content .fullwidth.highlight-sec.quote .content>div:after {
  transform: translateX(50px);
  transition: opacity 0.3s ease-out 0.45s, transform 0.4s ease-out 0.45s;
}

#content .fullwidth.highlight-sec.done :is(.img, .content) {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

#content .fullwidth.highlight-sec:not(.quote).done .content>div,
#content .fullwidth.highlight-sec.quote.done .content>div>* {
  opacity: 1;
}

#content .fullwidth.highlight-sec.quote.done .content>div:before,
#content .fullwidth.highlight-sec.quote.done .content>div:after {
  transform: translateX(0);
  opacity: 1;
}

#content .images-group .image-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

#content .images-group .image-item.done {
  opacity: 1;
  transform: translateY(0);
}

#content .fullwidth.img-wrap,
#content .flexbox.type-url>div {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#content .fullwidth.img-wrap.done,
#content .flexbox.type-url>div.done,
#content .subsecImg.normal-content.done img {
  opacity: 1;
}

#content .subsecImg img {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.5s ease-in-out;
}

#content .subsecImg.normal-content img {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#content .subsecImg.normal-content .content {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.4s ease-in-out 0.45s, transform 0.4s ease-in-out 0.45s;
}

#content .subsecImg.normal-content .content .btn-wrap.absolute {
  opacity: 0;
  transition: opacity 0.4s ease-in-out 0.8s;
}

#content .subsecImg:before {
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0.5s;
}

#content .subsecImg .subsecTitle, #content .core-bubble .c-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-in-out 0.55s, transform 0.4s ease-in-out 0.55s;
}

#content .subsecImg.done img {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

#content .subsecImg.done:before,
#content .fullwidth.with-outside-img.done>div.highlight-box,
#content .fullwidth.highlight-sec.only-img.done .img:before,
#content .subsecImg.normal-content.done .content .btn-wrap.absolute,
#content .masonry-grid>div.done,
#content .layer-title.subsecImg+div.done {
  opacity: 1;
}

#content .subsecImg.done .subsecTitle,
#content .fixed-width-box.done,
#content .fullwidth.highlight-sec.only-img.done .title,
#content .event-list .event-item.done,
#content .subsecImg.normal-content.done .content,
#content .flexbox.logo-list .logo-item.done,
#content .flexbox.graduate>div.done,
#content .flexbox.album-list .album-item.done,
#content .core-bubble .c-item.done,
#content .card-container>.card.done {
  opacity: 1;
  transform: translateY(0);
}

#content .fullwidth.with-outside-img>div.highlight-box {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

#content .fullwidth.with-outside-img>div.outside-img {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.4s ease-in-out 0.25s, transform 0.6s ease-in-out 0.25s;
}

#content .fullwidth.with-outside-img.done>div.outside-img,
#content .highlight-box.with-quote.done:before,
#content .highlight-box.with-quote.done:after {
  opacity: 1;
  transform: translateX(0);
}

#content .fixed-width-box {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#content .highlight-box.with-quote:before {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#content .highlight-box.with-quote:after {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#content .highlight-box.with-quote :is(.f-right-img, .f-left-img) img {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1s ease-out;
}

#content .highlight-box.with-quote.done :is(.f-right-img, .f-left-img) img {
  clip-path: circle(100% at 50% 50%);
}

#content .fullwidth.highlight-sec.only-img .img:before {
  opacity: 0;
  transition: opacity 0.3s ease-in-out 0.5s;
}

#content .fullwidth.highlight-sec.only-img .title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out 0.55s, transform 0.4s ease-out 0.55s;
}

#content .event-list .event-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, padding-inline-start 0.3s ease 0s;
}

#content .flexbox.logo-list .logo-item,
#content .flexbox.album-list .album-item,
#content .card-container>.card {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#content .masonry-grid>div {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

#content .layer-title.subsecImg .subsecTitle {
  transform: translate(-50%, 30px);
}

#content .layer-title.subsecImg.done .subsecTitle {
  transform: translate(-50%, 0);
}

#content .layer-title.subsecImg+div {
  opacity: 0;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#content .flexbox.graduate>div {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/**** inside animation end ****/
}