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

.main .ygap4 {--y-gap:4rem;}

.mainTit {font-family: var(--pointfont); overflow:hidden;}
.mainTit span {display:block;}

.Title {font-size: 1.625rem; font-family: var(--pointfont); font-weight: 600;}

.zum {position: relative; padding-left: 1.3rem;}
.zum:after {content:'·'; font-weight: 700; position: absolute; left: 0; top: 0;}

.boardTit {font-family: var(--pointfont); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.boardDesc {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #2e2e2e; min-height: 4.6rem;}

@media (max-width:768px) {
    .font-20 {font-size: 17px;}
    .font-18 {font-size: 15px;}
}


/* chungyouBtn */
.chungyouBtn  {--point:.6rem; --size:3; --height:3.125rem; position: relative; display: flex; width: fit-content; cursor: pointer;}
.chungyouBtn:before {content:''; background: transparent; border: 1px solid var(--pointcolor); width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: calc(var(--height)/2); box-sizing: border-box;}
.chungyouBtn:after {content:''; width: var(--point); height: var(--point); border-radius: 50%; background: var(--pointcolor); position: absolute; left:0; top: 50%; transform: translate(calc(var(--point)*var(--size)), -50%); transition: 0.4s;}
.chungyouBtn .text-wrap {height: var(--height); color: var(--black); border-radius: calc(var(--height)/2); display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; padding: 0 calc(var(--point)*var(--size)); padding-left: calc(var(--point)*var(--size) + var(--point)*2);  }
.chungyouBtn span {display: block; line-height: 1; transition: 0.3s;}

.chungyouBtn:hover::after {width: 100%; height: 100%; border-radius: calc(var(--height)/2); transform: translate(0px, -50%);}
.chungyouBtn:hover .text-wrap span {transform: translateX(calc(var(--point)*-1));}

.btn-textbg span:hover {background-position-y: 100%;}


.chungyouBtn.Reverse {background-color: #2C5753; border-radius: calc(var(--height)/2); border:1px solid #2C5753;}
.chungyouBtn.Reverse:before {border: none;}
.chungyouBtn.Reverse:after {background-color: var(--white);}
.chungyouBtn.Reverse .text-wrap {color: var(--white); border:none}
.chungyouBtn.Reverse:hover .text-wrap span {color: var(--black);}

.chungyouBtn.Bl:before {border-color: var(--black);}
.chungyouBtn.Bl:after {background: var(--black);}

.chungyouBtn.Bl:hover .text-wrap span {color: var(--white);}


/* intro */
#intro .videoBox {overflow:hidden; position: relative; max-width: 1820px; width: 95%;  aspect-ratio: 12 / 5; margin-left: auto; margin-right: auto; border-radius: var(--radius); transform-origin:center center;}
#intro .videoBox:after {content:''; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); position: absolute; left: 0; top: 0;}
#intro .visualPlayer {display: block; width: 100%; height: 100%; object-fit: cover;}
#intro .TxtBox {position: absolute; width: 100%; height: fit-content; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 3;}
#intro .mainTit {font-size: 2.5rem;}
@media(max-width:990px) {
    #intro .videoBox {aspect-ratio: 12 / 7;}
    #intro .mainTit {font-size: 2rem;}
}
@media(max-width:500px) {
    #intro .videoBox {aspect-ratio: 7 / 8;}
}



/* message */
#message .TxtBox {padding: 3rem 0;}
#message .LogoImg {width: 3.125rem;}


/* center */
#center .Inner {background: no-repeat center / cover url('/img/main/centerBg.jpg'); border-radius: var(--radius); max-width: 1820px; width: 95%; margin: auto; padding: 5.9375rem 0;}

#center .box {/* background-color: var(--white); */ backdrop-filter: blur(0px); padding: 1.875rem; display: flex; flex-direction: column; gap:8rem; background: no-repeat center / cover;}
#center .box:hover {backdrop-filter: blur(30px); transition: all ease 1.5s;}
#center .box .ImgBox {display: flex; justify-content: space-between;}

#center .box .Desc {transform: translateY(0); transition: .3s;}
#center .box:hover .Desc {transform: translateY(-1rem); transition: .3s;}

/* #center .box .Img {overflow: hidden; width: 8.4375rem;}
#center .box .Img img {object-fit: cover; transform: scale(1); transition: all ease 1.5s;} */


#center .box .DotBtn {width: 2.75rem; height: 2.75rem; border-radius: 50%; background-color: var(--pointcolor_half); display: flex; align-items: center; justify-content: center; transition: .3s;}
#center .box .DotBtn img {width: .75rem; transform: rotate(0); transition: .3s;}
#center .box:hover .DotBtn {background-color: var(--black); transition: .3s;}
#center .box:hover .DotBtn img {width: .75rem; transform: rotate(45deg); transition: .3s;}
@media(max-width:500px) {
    #center .box {gap: 5rem;}
}



/* with */
#with .NumBox {display: flex; align-items: baseline; gap:3rem}
#with .Number span {display:inline-block; min-width:3ch; text-align:right; font-variant-numeric: tabular-nums;}

#with .Desc {padding: 4rem 2rem;}
#with .Desc > div {width: fit-content; margin: auto;}

#with .withSwiper {width:100%;height:100%;transition:all 2s var(--ani); overflow: hidden;}
#with .withSwiper .swiper-slide {height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s}
#with .withSwiper .swiper-slide-active {transform:skew(0)}
#with .bg {position:absolute;left:0;top:0;width:100%;height:100%;background:center no-repeat;background-size:cover}
#with .bg.bg-1 {background-image:url('/img/main/with01.jpg')}
#with .bg.bg-2 {background-image:url('/img/main/with02.jpg')}
#with .bg.bg-3 {background-image:url('/img/main/with03.jpg')}

@media(max-width:768px) {
    #with .Desc {order:-1; padding:0 0 4rem;}
    #with .Desc > div {margin-left: 0;}
    #with .withSwiper {aspect-ratio: 12 / 7;}
}



/* avocat */
#avocat {background: no-repeat center / cover url('/img/main/avocatBg.jpg');}
#avocat .Img {width: fit-content; height: fit-content;}
#avocat .LawMark {position: absolute; right: 2rem; bottom: 2rem; width: 6.6875rem;}
#avocat .LawMark.SM {width: 4rem;}
#avocat .Line {width: 100%; height: 1px; background-color: var(--black); margin: .7rem auto 1rem;}

#avocat .Desc {padding: 0 2rem;}
#avocat .ListBox {max-width: 714px; line-height: 1.8;}
#avocat .avocatName {display: flex; align-items: baseline; flex-direction: row; gap:.3rem 1rem;}
#avocat .BtnBox {display: flex; flex-direction: column; justify-content: space-between; gap:3rem; align-self: stretch;}
@media(max-width:1540px) {
    #avocat .avocatName {flex-direction: column;}
}
@media(max-width:990px) {
    #avocat .Desc  {padding: 0 0 2rem;}
    #avocat .Desc > div {max-width: 714px;}
}
@media(max-width:500px) {
    #avocat .avocatName {flex-direction: column; gap:.3rem;}
}


#Modal.modalLarge .Img {width: 90%; max-width: 340px; height: fit-content;}
#Modal.modalLarge .LawMark {position: absolute; right: 2rem; bottom: 1rem; width: 4rem;}
#Modal.modalLarge .avocatName {display: flex; align-items: baseline; gap: 1rem;}
#Modal.modalLarge .modalInner {width:min(900px,80%); height: 70vh; padding: 4rem 2rem 5rem;}
#Modal.modalLarge .scollBox {height: 30vh; padding-right: 1rem; overflow-y: scroll;}
#Modal.modalLarge .scollBox::-webkit-scrollbar {width: 1px;}
@media(max-width:768px) {
    #Modal.modalLarge .modalInner {height: auto;}
    #Modal.modalLarge .scollBox {height: 15vh;}
    #Modal.modalLarge .Img {margin: 0 auto;}
}
@media(max-width:550px) {
    /* #Modal.modalLarge .scollBox {height: 10vh; padding-right: 1rem; overflow-y: scroll;} */
}



/* step */
#step {padding-top: 3.125rem;}
#step .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;}

#step .flexList {--y-gap:0;}
#step .box {display: flex; align-items: center; gap: 4rem; border-bottom: 1px solid var(--pointcolor); padding: 1.6rem .3rem;}
#step .TitBox {display: flex; gap:.7rem; font-family: var(--pointfont); white-space: nowrap;}
#step .box .Num {padding-left: 1rem; position: relative;}
#step .box .Num:after {content:''; width: .4375rem; height: .4375rem; border-radius: 50%; background-color: transparent; transition: .3s; position: absolute; left: 0; top: .25rem; margin: auto;}
#step .box.on .Num:after {background-color: var(--pointcolor);}

#step .box1, #step .box2 {border-top: 1px solid var(--pointcolor);}
@media(max-width:768px) {
    #step .box2 {border-top: none;}
}




/* why */
#why .Img {position: relative; align-self: stretch; overflow: hidden; visibility: hidden; border-radius: 0; background: none;}
#why .Img::before {content: ''; position: absolute; inset: 0; background: no-repeat center / cover url('/img/main/whyImg.jpg'); transform: translateX(var(--bg-x, 0%)); transform-origin: center center; will-change: transform;}

#why .whyList {display: flex; flex-direction: column; gap: 3.5rem; position: relative;}
#why .whyList:after {content:''; width: 1px; height: 87%; background-color: var(--pointcolor); position: absolute; top: .7rem; left: .19rem;}
#why .whyList .Tit, #why .whyList p {position: relative; padding-left: 1.5rem;}
#why .whyList .Tit:after {content:''; width: .4375rem; height: .4375rem; border-radius: 50%; background-color: var(--pointcolor); transition: .3s; position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}

#why .Desc {padding: 3rem 0;}
#why .Desc > div {width: fit-content; margin-left: 5rem;}

@media(max-width:768px) {
    #why .Desc > div {margin-left: 2rem;}
    #why .Img {aspect-ratio: 1 / .6; order:2;}  
}



/* case */
#case .TitBox {display: flex; align-items: flex-end; justify-content: space-between;}
#case .boardDesc {min-height: 4.1rem;}

#case .swiper-slide {border-radius: var(--radius); padding: 2.5rem 1.875rem 1.875rem; border:1px solid var(--pointcolor)}
#case .slideTit {display: flex; align-items: center; gap:.3rem .7rem;}
#case .slideTit li {border-radius: 1.25rem; font-size: .875rem; padding: .2rem .625rem .1rem;}
#case .slideTit li:nth-child(1) {background-color: var(--pointcolor_half);}
#case .slideTit li:nth-child(2) {background-color: #2C5753; color: var(--white);}

#case .Line {width: 100%; height: 1px; background-color: var(--pointcolor); margin: 1.5rem auto;}

#case .swiper-pagination {position: relative; background-color: rgba(176,202,196,.3); margin-top: 2.5rem; height: .25rem;}
#case .swiper-pagination-progressbar-fill {background-color: var(--pointcolor_half);}

@media(max-width:768px) {
    #case .TitBox {flex-direction: column; align-items: flex-start; gap:2rem;}
    #case .chungyouBtn {align-self: flex-end;}
}
@media(max-width:500px) {
    #case .slideTit {flex-direction: column; align-items: flex-start;}
}



/* column */
#column .flexList {--y-gap:0;}
#column .flexBox {display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem;}
#column .box {padding: 2.5rem 1.875rem 3.75rem; border: 1px solid var(--black);}
#column .box:nth-child(1), #column .box:nth-child(2), #column .box:nth-child(3) {border-right: none;}
#column .box .Info {border-radius: 1.25rem; line-height: 1; font-size: .875rem; padding: .3rem .625rem; border:1px solid var(--black); transition: .3s;}
#column .box:hover .Info {background-color: var(--black); color: var(--white); transition: .3s;}

#column .thumb, #column .no_image {aspect-ratio: 12 / 9;}
#column .thumb > img {object-fit: cover; aspect-ratio: 12 / 9;}
#column .no_image {background-color: var(--pointcolor_half); display: flex; align-items: center; justify-content: center; padding: 2rem;}
#column .no_image > img {/* filter: invert(1) brightness(7); opacity: .7; */ height: 2.8125rem;}


@media(max-width:990px) {
    #column .box:nth-child(1) {border-bottom: none;}
    #column .box:nth-child(2) {border-right: 1px solid var(--black); border-bottom: none;}
}
@media(max-width:500px) {
    #column .box {padding: 1.25rem 1rem 2.5rem;}
    #column .box:nth-child(1), #column .box:nth-child(2), #column .box:nth-child(3) {border-right: 1px solid var(--black);}
     #column .box:nth-child(4) {border-top: none;}
}



/* review */
#review .swiper-wrapper {transition-timing-function: linear;}
#review .swiper-slide {border-radius: var(--radius); background-color: rgba(224,220,209,.6); padding: 1.25rem 1.875rem;}
#review .info {text-align: right; color: var(--gray);}



/* start */
#start {background: no-repeat center / cover url('/img/main/startBg.jpg'); padding: 7.5rem 0;}
#start #map {max-width: 683px; position: relative; width: 100%; aspect-ratio: 12 / 7; border-radius: var(--radius); overflow: hidden; margin-left: auto;}
#start #map .mapCover {position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,0); left: 0; top: 0; z-index: 3;}
#start .BtnBox {display: flex; align-items: center; justify-content: flex-end; gap:.5rem;}

#start .BtnBox a {display: flex; align-items: center; gap:.5rem; border-radius: .375rem; text-transform: uppercase; font-size: .75rem; font-weight: 600; padding: .3rem 1rem;}
#start .BtnBox a img {width: .875rem;}
#start .BtnBox .kakao {background-color: #FAE000; color: var(--black);}
#start .BtnBox .naver {background-color: #03CF5D; color: var(--white);}

#start .infoBox .box {border-radius: var(--radius); background-color: rgba(242,240,234,22%); padding: 1.25rem 1.25rem 1.875rem;}
#start .infoBox .Line {width: 100%; height: 1px; background-color: var(--white); margin: 1rem auto;}
@media(max-width:990px) {
    #start #map {margin-right: auto; max-width: 100%;}
    #start .Desc {padding: 4rem 0;}
}



/* footer */
footer {background-color: #0D1716; padding: 6.25rem 0; position: relative;}
footer .footerLogo {width: 14.75rem;}

footer .TopBtn {position: absolute; left: 50%; top: -1.8rem; transform: translateX(-50%); width: 4.0625rem; height: 4.0625rem; border-radius: 50%; background-color: var(--pointcolor); display: flex; align-items: center; justify-content: center;}
footer .TopBtn img {width: .75rem;}

footer .box.Left {display: flex; align-items: flex-start; gap:4vw;}
footer .InfoTit {color:#72A9A4}
footer .Desc {color: var(--white); line-height: 2;}
footer a {color: var(--white);}

footer .LinkList {display: flex; align-items: center; justify-content: flex-end; gap:1rem;}
footer .LinkList a {color:rgba(255,255,255,.5); cursor: pointer;}
footer .LinkList a:hover {color:var(--white)}

footer .box.Right {text-align: right;}
@media(max-width:500px) {
    footer .box.Left {flex-direction: column;}
    footer .box.Right {text-align: center;}
    footer .LinkList {justify-content: center; margin-top: 3rem;}
}


#Modal {position:fixed; inset:0; display:none; z-index:9999;}
#Modal.active {display:block;}
#Modal .modalBg {position:absolute; inset:0; background:rgba(0,0,0,.65);}
#Modal .modalInner {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(43.75rem,90%); height:auto; background:#EEEBE4; padding:4rem 2rem 5rem; border-radius:var(--radius);}
/* #Modal.modalForm .modalInner {height: auto;} */
#Modal .modalClose {width: 4.0625rem; height: 4.0625rem; border-radius: 50%; background-color: var(--pointcolor); position:absolute; right:0; left: 0; margin: auto; bottom: -1.8rem; display: flex; align-items: center; justify-content: center; cursor:pointer; color: var(--white); font-size:1.5rem;}
#Modal h4 {font-family: var(--pointfont); font-weight: 600; text-align: center;}
#Modal .modalContent {max-width: 85%; margin: auto;}
#Modal .scrollBox {height: 40vh; overflow-y: scroll; padding-right: 1rem;}
#Modal .scrollBox::-webkit-scrollbar {width: .125rem;}
@media(max-width:500px) {
    #Modal .modalInner {padding: 3rem 1rem 4rem;}
}


/* Form */
#Form .checkList {--x-gap:1rem; --y-gap:.5rem}

#Form .inputTit {position: relative; padding-left: 1rem; font-family: var(--pointfont); width: 40%;}
#Form .inputTit:after  {content:''; width: .4375rem; height: .4375rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; top: 0; bottom:0; left: 0; margin: auto;}

#Form .input_box.flex {align-items: center; border-bottom:1px solid var(--pointcolor)}
#Form .inputBox  {width: 60%;}

#Form .input_box input[type='text'], #Form .input_box select {background-color: transparent; padding: .7rem .3rem 1rem; width: 100%; border: none;}

#Form .checkbox {cursor: pointer;}
#Form .checkbox input[type="checkbox"] {display: none;}
#Form .checkbox label {position: relative; padding-left: 1.75rem; cursor: pointer; display: inline-block; line-height: 1rem;}

#Form .checkbox label::before {content: ''; position: absolute; left: 0; bottom: 0; width: 1rem; height: 1rem; border: 1px solid var(--black); border-radius: 0; background: var(--white);}
#Form .checkbox input:checked + label::before {border-color: var(--black); background: var(--subcolor);}
#Form .checkbox input:checked + label::after {content: ''; position: absolute; left: .375rem; bottom: .3125rem; width: .3125rem; height: .625rem; border: .125rem solid var(--black); border-top: none; border-left: none; transform: rotate(45deg);}

#Form .agreeTxt {max-height: 0; overflow: hidden; padding: 0; opacity: 0; transition: max-height .4s cubic-bezier(.22, 1, .36, 1),     padding .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;}
#Form .agreeTxt.on {max-height: 5rem; padding: 1rem 0;opacity: 1; overflow-y: auto;}

@media (max-width: 768px) {
    #Form input,
    #Form textarea {
        font-size: 16px;
    }

    #Form input::placeholder,
    #Form textarea::placeholder {
        font-size: 16px;
    }
}

input[type=text]:focus, input[type=password]:focus, input[type='email'], textarea:focus, select:focus {box-shadow: none; border:none !important; background-color: #fff;}