@charset "utf-8";
/* animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; */

.main .visual-section .bg-box{ animation: backgroundScale 2s ease-in-out 0s 1 forwards running; }
.main .result-section .background{ transform: scale(1.2); }
.main .result-section.on .background{ animation: backgroundScale 2s ease-in-out 0s 1 forwards running; }

.sub .sub-banner .background{ animation: backgroundScale 2s ease-in-out 0s 1 forwards running; }
.sub .sub-banner h2 .text{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

@keyframes backgroundScale {
    0% {transform: scale(1.2); }
    100% { transform: scale(1); }
} 

.main .visual-section .title-wrap .text-wrap .text{ opacity: 0; }
.main .visual-section.on .title-wrap .text-wrap .text{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .visual-section.on .title-wrap .text-wrap.t2 .text{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }

.main .visual-section .start-end-box{ opacity: 0; }
.main .visual-section.on .start-end-box{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

.main .visual-section .scroll .icon{ animation: blink-soft 1s ease-in-out infinite; }

.main .main-title-div .en .text{ opacity: 0; }
.main .on .main-title-div .en .text{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.main .main-title-div h2 .text{ opacity: 0; }
.main .on .main-title-div h2 .text{ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }

.main .main-content-div{ opacity: 0; }
.main .on .main-content-div{ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

/* 
.main .about-section .bg-wrap{ transform: scale(1.2); }
.main .about-section.on .bg-wrap{ animation: backgroundScale 5s ease-in-out 0s 1 forwards running; }

*/

.main .lawfirm-section .lawyer-list > li{ transition: filter .5s; }
.main .lawfirm-section .lawyer-list:hover > li{  filter: grayscale(100%) }
.main .lawfirm-section .lawyer-list > li:hover{ filter:grayscale(0%) }

@media screen and (max-width: 650px) { 
    .main .lawfirm-section .lawyer-list:hover > li{  filter: grayscale(0%) }
}

.sub .sub-title-div .title .text{ opacity: 0; }
.sub .on .sub-title-div .title .text{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.sub .sub-content-div .text{ opacity: 0; }
.sub .on .sub-content-div .text{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }


.main .service-section .item-list > li{ opacity: 0; }
.main .service-section.on .item-list > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.main .service-section.on .item-list > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.main .service-section.on .item-list > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.main .service-section.on .item-list > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }


.sub2 .section1 .img-box{ opacity: 0; }
.sub2 .section1.on .img-box{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.sub2 .section1 .item-list > li{ opacity: 0; }
.sub2 .section1 .item-list > li.on{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }

.sub2 .section2 .item-list > li{ opacity: 0; }
.sub2 .section2.on .item-list > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.sub2 .section2.on .item-list > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.sub2 .section2.on .item-list > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }
.sub2 .section2.on .item-list > li:nth-child(4){ animation: fadeIn 0.5s ease-in-out 0.3s 1 forwards running; }

.sub3 .section1 .item-list > li{ opacity: 0; }
.sub3 .section1.on .item-list > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.sub3 .section1.on .item-list > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; }
.sub3 .section1.on .item-list > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; }

.apply .section1 .item-list > li{ opacity: 0; }
.apply .section1.on .item-list > li:nth-child(1){ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; } 
.apply .section1.on .item-list > li:nth-child(2){ animation: fadeIn 0.5s ease-in-out 0.1s 1 forwards running; } 
.apply .section1.on .item-list > li:nth-child(3){ animation: fadeIn 0.5s ease-in-out 0.2s 1 forwards running; } 

@keyframes fadeIn {
    0% {transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInDown {
    0% {transform: translate3d(0px, -30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}

@keyframes blink-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }