@font-face {
    font-family: 'YeolIl';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_06@1.0/Hardworking.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

:root{--ani:cubic-bezier(.32,.94,.6,1)}

.sub .xgap30 {--x-gap:1.875rem;}
.sub .ygap50 {--y-gap:3.125rem;}
.sub .ygap4 {--y-gap:4rem;}

/* sub Top */
.subTop {aspect-ratio: 12 / 4; position:Relative; max-width: 1820px; width: 95%; margin-left: auto; margin-right: auto; border-radius: var(--radius); left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.1); transition:transform 5s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}

.subTop .inner {position: absolute; max-width: var(--layoutwidth); width: 90%; top:50%; left: 50%; transform: translate(-50%, -65%);}

.subTop .sub_menu {padding: .375rem .625rem; border-radius: 1.875rem; background-color: rgba(255,255,255,12%); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; gap: 1vw; width: max-content; margin: auto; position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);}
.subTop .sub_menu li {position: relative; z-index: 2;}
.subTop .sub_menu li a {display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--white); padding: .625rem 1.875rem; position: relative; z-index: 2; cursor: pointer;}


.subTop .sub_menu .active-pill {position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 1.25rem; background-color: rgba(255,255,255,20%); z-index: 1; pointer-events: none; transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1), height .45s cubic-bezier(.22, 1, .36, 1),opacity .3s ease;}
.subTop .sub_menu li.on a {color: var(--white);}

@media(max-width:990px) {
    .subTop {aspect-ratio: 12 / 7;}
}
@media(max-width:500px) {
    .subTop {aspect-ratio: 7 / 8;}
}



/* way */
.sub .way .Inner {background-image: linear-gradient(135deg, rgba(176,202,196,15%), rgba(176,202,196,45%)); border-radius: var(--radius); max-width: 1820px; width: 95%; margin: auto; padding: 12rem 0;}
.sub .way .box > img {filter: grayscale(.55);}
@media(max-width:768px) {
    .sub .way .Inner {padding: 7rem 0;}
    .sub .way .flexList {--x-gap:1rem;}
}


/* squarely */
.sub .squarely .box {position: relative;}
.sub .squarely .box.Left {left: 3rem;}
.sub .squarely .box.Right {right: 3rem;}

.sub .squarely .Dot {aspect-ratio: 1 / 1; width: 100%; padding: 5vw; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pointcolor);}
.sub .squarely .Dot1 {background-color: var(--pointcolor);}
.sub .squarely .Dot2 {background-color: var(--pointcolor_half);}
.sub .squarely .Dot3 {background-color: var(--white);}
@media(max-width:1100px) {
    .sub .squarely .box.Left {left: 2rem;}
    .sub .squarely .box.Right {right: 2rem;}
}
@media(max-width:768px) {
    .sub .squarely .flexList {justify-content: center; --y-gap:0;}
    .sub .squarely .box.Left {left: 0rem; margin-right: -1rem;}
    .sub .squarely .box.Right {right: 0; margin-top: -4rem;}
}
@media(max-width:500px) {
    .sub .squarely .box.Center {margin-top: -4rem;}
}


/* point */
.sub .point .flexList {--x-gap:1.25rem; --y-gap:1.875rem;}
.sub .point .box {background-color: #FCFBF8; padding: 1.875rem 2.5rem 3.125rem; border-top: .1875rem solid var(--pointcolor);}

.sub .point .pointImg {width: 1.5rem; margin-left: auto; margin-bottom: .625rem;}



/* step */
.sub .step .TitBox {display: flex; flex-direction: column; justify-content: space-between; gap: 5rem;}
.sub .step .ImgBox {gap: .625rem; width: fit-content;}


.sub .step .DescList li {padding: 2rem 0; border-bottom: 1px solid var(--pointcolor);}

.sub .step li .DescTit {font-family: var(--pointfont); position: relative; padding-left: 1rem; font-weight: 600;}
.sub .step li .DescTit:after {content:''; width: .4375rem; height: .4375rem; border-radius: 50%; background-color: transparent; transition: .3s; position: absolute; top: 0; bottom:0; left: 0; margin: auto;}
.sub .step li:hover .DescTit:after {background-color: var(--pointcolor); transition: .3s;}
.sub .step li .DescTit > span {margin-right: .5rem;}

.sub .step .Txt {padding-left: 1rem;}

@media(max-width:768px) {
    .sub .step .TitBox {gap:3rem;}
}



/* primary */
.sub .primary .container {background-color: var(--pointcolor_half); border-radius: var(--radius); margin: auto; padding: 10rem 0;}
.sub .primary .Inner {max-width: 1400px; width: 90%; margin: auto;}
.sub .primary .flexList {--x-gap:1.875rem; --y-gap:1.875rem;}
.sub .primary .box {background-color: var(--white); border-radius: var(--radius); padding: 2.5rem;}

@media(max-width:768px) {
    .sub .primary .container {padding: 6rem 0;}
}


/* avocat */
.sub .avocat .sign {font-family: 'YeolIl'; font-size: 2.25rem;}



/* FaQ */
.sub .FaQ .accordion {max-width: 1100px;}

.sub .FaQ .accordionTitle {display: flex; align-items: baseline; border-bottom: 1px solid var(--pointcolor); padding: 1rem; cursor: pointer; font-family: var(--pointfont); font-weight: 600;}

.sub .FaQ .accordionTitle:before, .accordionTitle:after {content:''; position: absolute; height: 2px; border-radius: 50px; transition: ease-in-out 0.6s all; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center;}
.sub .FaQ .accordionTitle:hover::after {width: 100%;}

.sub .FaQ .accordionTitle.on {background-color: var(--pointcolor_half);}

.sub .FaQ .accordion .item:last-child{margin-bottom: 0;}
.sub .FaQ .accordion .item .text {opacity: 0; height: 0; padding: 0px 2.5rem; position: relative; transition: all 0.6s cubic-bezier(.42,.2,.08,1); overflow: hidden; line-height: 1.5;}
.sub .FaQ .accordion .item .text.show {opacity: 1; height: auto; padding: 1.5625rem 2.5rem; position: relative; z-index: 0; background: var(--white); border-bottom: 1px solid var(--pointcolor);}



/* start */
.sub .start .container {padding: 3.5rem 0;}



/* space */
.sub .space .spaceSwiper {padding: 0 1rem;}
.sub .space .spaceSwiper .swiper-slide {width: auto !important; border-radius: var(--radius); overflow: hidden;}
.sub .space .spaceSwiper .swiper-slide img {object-fit: cover;}

@media(max-width:768px) {
	.sub .space .spaceSwiper .swiper-slide img {height:27rem;}
}
@media(max-width:500px) {
	.sub .space .spaceSwiper .swiper-slide img {height:18rem;}
}


/* team */
.sub .team .Title {font-size: 1.875rem;}