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

.main .xgap2 {--x-gap:2rem;}
.main .ygap2 {--y-gap:2rem;}
.main .ygap6 {--y-gap:6rem;}

.main .material-symbols-outlined {font-size: 1.5rem;}
.main a {text-decoration: none;}

.enTit {color: rgba(3,110,184,.3); font-family: var(--enfont); white-space: nowrap; font-weight: 700; font-size: 12.5rem; line-height: .7;}
.Title {font-size: 3.75rem; font-weight: 600; line-height: 1.2;}
.pointEn {font-family: var(--pointfont); color: var(--pointcolor); font-weight: 600;}
.split > span {display: inline-block;} 


.LL_Btn {padding: 1rem 2rem; border-top:1px solid #000; border-bottom:1px solid #000; display: flex; align-items: center; justify-content: space-between; font-weight: 500; letter-spacing: .3125rem; animation: fade-up 2.5s both;}
.LL_Btn  {position: relative; white-space: nowrap;  background-color:transparent; color: transparent; transition-property: all; transition-duration: 0.6s; z-index: 9; overflow: hidden; text-shadow: -50px 0 0 transparent, 0 0 0 #000; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);}

.LL_Btn:before {width: 100%; height: 100%; top: 0; left: 0; background-color: #000; transform: translate(-101%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.LL_Btn:hover {text-shadow: 0 0 0 var(--pointcolor), 50px 0 0 transparent;}
.LL_Btn:hover:before {transform: translate(0, 0);}


.LL_Btn.Bl {border-top:1px solid #000; border-bottom:1px solid #000;}
.LL_Btn.Bl  {text-shadow: -50px 0 0 transparent, 0 0 0 #000;}

.LL_Btn.Bl:before {width: 100%; height: 100%; top: 0; left: 0;  background-color: var(--pointcolor); transform: translate(-101%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.LL_Btn.Bl:hover {text-shadow: 0 0 0 #000, 50px 0 0 transparent; }
.LL_Btn.Bl:hover:before {transform: translate(0, 0);}


.LL_Btn.Bk {border-top:1px solid #000; border-bottom:1px solid #000;}
.LL_Btn.Bk  {text-shadow: -50px 0 0 transparent, 0 0 0 #000;}

.LL_Btn.Bk:before {width: 100%; height: 100%; top: 0; left: 0;  background-color: #000; transform: translate(-101%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.LL_Btn.Bk:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent; }
.LL_Btn.Bk:hover:before {transform: translate(0, 0);}

@media(max-width:550px) {
    .enTit {font-size: 10rem;}
}
@media(max-width:430px) {
    .enTit {font-size: 8rem;}
}


/* mainSlide */
#mainSlide {overflow:hidden;position:relative;width:100%; /* aspect-ratio: 12/5.4; */  height: 100vh; transition:transform .6s var(--ani)}

#mainSlide .mainSwiper {opacity:0;transform:scale(1.05); width:100%;height:100%;transition:all 5s var(--ani)}
#mainSlide .mainSwiper.on {opacity:1;transform:scale(1)}
#mainSlide .mainSwiper .swiper-slide {height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s}
#mainSlide .mainSwiper .swiper-slide-active {transform:skew(0)}
#mainSlide .bg {position:absolute;left:0;top:0;width:100%;height:100%;background: no-repeat center;background-size:cover}

#mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide01.jpg')}
#mainSlide .bg.bg-2 {background-image:url('/img/main/mainSlide02.jpg')}
#mainSlide .bg.bg-3 {background-image:url('/img/main/mainSlide03.jpg')}

#mainSlide .TxtBox {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); width:var(--layoutwidth); max-width: 90%; z-index: 9; color: #fff;}
#mainSlide .Tit {margin-bottom: 2.5rem;}
#mainSlide .Desc {font-family: var(--pointfont); letter-spacing: 0;} 

#mainSlide .swiper-pagination {font-family: var(--enfont); color:#fff; font-size: 1.875rem; font-weight: 300; bottom: 5rem; left: auto; right:5rem; width: fit-content;}
#mainSlide .swiper-pagination-current {font-size: 4.375rem;}

@media(max-width:500px) {
    #mainSlide .swiper-pagination {bottom:2rem; right:2rem;}
}


/* Txt_Effect */
#Txt_Effect .Txt_Inner {position: relative; font-weight: 700; color: rgba(0, 0, 0, .4)}
#Txt_Effect .Txt_Inner .Txt {position: relative; word-break: keep-all; background: linear-gradient(to right, #000, #000) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;}



/* Number */
#Number .flexBox {display: flex; gap:2.5rem; position: relative; height: auto;}
#Number .pointEn {text-align: right;}
#Number .box2 {transform: translateY(25rem);}

#Number .TitBox {position: sticky; top: 0; height: 100%;}
#Number .DescBox {padding-top: 8rem; position: relative; z-index: 3;}
@media(max-width:990px) {
    #Number .TitBox {position: relative;}
    #Number .DescBox {padding-top: 0;}
}


/* Group */
/* #Group {background: no-repeat center / cover url('/img/main/GroupBg.jpg');} */
#Group {background: #fff;}
#Group .enTit {margin-left: -8rem;}
#Group .flexBox {display: flex; flex-direction: column;}
@media(max-width:768px) {
    #Group .enTit {margin-left: -4rem;}
}
@media(max-width:500px) {
    #Group .enTit {margin-left: -2rem;}
}


/* Cases */
#Cases {background: #F5F5F5; overflow: hidden;}
#Cases .swiper-slide {background-color: rgba(255,255,255,.95); padding: 2rem 2rem 3rem; transition: .3s;}
#Cases .swiper-slide:hover {background-color: rgba(255, 255, 255, 1); box-shadow: 4px 8px 20px rgba(0, 0, 0, .15); transition: .3s;}
#Cases .Line {width: 100%; height: 1px; background-color: #000; margin: 1.5rem auto;}
#Cases .Tit {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; line-height: 1.4; max-height: calc(1.4em * 2);}
#Cases .Desc {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; line-height: 1.5; max-height: calc(1.5em * 4);}

#Cases .swiper-pagination {position: relative; margin-top: 3rem; background-color: #fff;}
#Cases .swiper-pagination-progressbar-fill {background-color: var(--subcolor);}


/* Offices */
#Offices {background: url(/img/main/offices_bg.jpg) no-repeat center / cover; overflow: hidden; position: relative; z-index: 3;}
#Offices .Img {position: relative; width: 30.8125rem; margin: auto;}
#Offices .Img .mapImg {width: 30.8125rem; margin: auto; filter: brightness(10);}

#Offices .LL_Btn {padding: .7rem 2rem; width: 100%;}
#Offices .BtnList {--x-gap:1rem; --y-gap:1rem;}

#Offices .DescBox {padding: 1rem 2rem; background: #fff;}
#Offices .Titflex {display: flex; align-items: flex-start; flex-direction: column; gap:.5rem;}
#Offices .round {border-radius: 3.75rem; width: fit-content; background-color: #99582A; color:#fff; padding: .2rem 1rem .1rem; font-size: .875rem; white-space: nowrap;}

#Offices .marker {display: flex; flex-direction: column; justify-content: center; gap:.3rem; align-items: center; position: absolute;}




/* hours */
#hours {background-color: #EFEFEF; margin-top: -3.125rem; overflow: hidden;}
#hours .image-wrap {transition: 1s ease-out; transition-delay: 0.2s; position: relative; width: 100%; height: 57rem; overflow: hidden; visibility: hidden;}
#hours .image-wrap.LR {clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}

#hours .Img {width: 100%; height: 57rem; transform: scale(1.3);transition: 2s ease-out; background: no-repeat center / cover url('/img/main/hours.jpg');} 
#hours .animating .image-wrap {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; transform: skewY(0);}  
#hours .animating .Img {transform: scale(1); transition: 4s ease-out;}  

#hours .Logo {position: absolute; top:2rem; left: 2rem; z-index: 3; opacity: .5;}
#hours .LogoImg {width: 9.1875rem;}

#hours .enTit {margin-right: -13vw;}

#hours .Inner {margin: 0 auto; max-width: 565px; width: 100%;}
#hours form {display: flex; flex-direction: column; gap:1rem}
#hours input[type="text"], #hours select {border: none; box-shadow: none; border-radius: 0; background-color: #fff; padding: 1.2rem; width: 100%;}
#hours input[type=text]:focus { border:none !important; box-shadow: none !important;}
#hours select {-webkit-appearance: none; appearance: none; display: inline-block; border:none; color: var(--gray); appearance:none; background:url('/img/main/select_arrow.png') no-repeat right 14px center #fff;}
#hours select option {color: var(--gray);}

#hours input.agree_checkbox { width: 0; height: 0; visibility: hidden; }
#hours input.agree_checkbox + label { position: relative; padding-left: 1.5rem; }
#hours input.agree_checkbox + label::before { position: absolute; content: ''; display: inline-block; width: 1.2rem; height: 1.2rem; cursor: pointer; border: 1px solid var(--gray); top: 2px; left: 0; }
#hours input.agree_checkbox:checked + label::before { background: var(--gray) url(/img/sub/chk.png) no-repeat center / contain; background-size: 100%; }

#hours .confirm_submit {background-color: var(--pointcolor); color:#fff; text-align: center; width: 100%; padding: 1rem;}
#hours .confirm_submit:hover {background-color: #0d619c;}

@media(max-width:1240px) {
    #hours .enTit {margin-right: -7vw;}
}
@media(max-width:768px) {
    #hours .enTit {margin-right: -13vw;}
    #hours .image-wrap, #hours .Img {height: 30rem;}
}
@media(max-width:500px) {
    #hours .enTit {margin-right: -3rem;}
}



/* partner */
#partner {padding: 1rem 0; background-color: #EFEFEF;}
#partner .partnerSwiper .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
#partner .partnerSwiper img {width: 3.5rem;}

/* footer */
footer {background-color: #191919; padding: 6.25rem 0; letter-spacing: 0; color:#ebebeb;}
footer a {color:#ebebeb; font-weight: 300; text-decoration: none;}
footer .footerMenu {display: flex; align-items: center; gap: 0 3rem; justify-content: flex-end;}
footer .footerMenu a {opacity: .8;}
footer .footerMenu a:hover {opacity: 1;}
footer .Line {width: 100%; height: .5px; background-color: rgba(255,255,255,.5); margin: 2rem auto;}

@media(max-width:500px) {
    footer .footerMenu {gap:0 2rem;}
}

/* 변호사 */
#lawyer .top-box{display:flex;margin-bottom:4.5rem;justify-content:space-between;align-items:flex-end;}
#lawyer .top-box .tit-box{margin:0;}
.go-btn{display:flex;align-items:center;gap:.5rem;}
.go-btn::after{content:"";display:block;width:1.5rem;height:1.5rem;background:url(/img/icon/arrow_up.svg) no-repeat center/cover;transition:var(--transition);}
.go-btn:hover::after{transform:rotate(45deg);}
#lawyer .swiper-slide figure {background: #bb945740; padding: 1.5rem 1.5rem 0;}
#lawyer .swiper-slide .text-box{margin-top:1rem; text-align: center;}
#lawyer .swiper-slide:hover .portfolio-img img{transform:scale(1.1);}
#lawyer .swiper-slide .portfolio-img{position:relative;overflow:hidden;aspect-ratio:4/3;}
#lawyer .swiper-slide .portfolio-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:var(--transition);}
.board-header span{display:inline-block;padding:.25rem .75rem;font-size:1rem;font-weight:500;color:#444;background-color:rgba(141,198,63,.1);}
.board-subject{width:100%;margin-top:.5rem;font-size:1.25rem;font-weight:500;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
@media(max-width:1024px){
#lawyer .top-box{margin-bottom:3.5rem;}
}
@media(max-width:768px){
#lawyer .top-box{flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom:3rem;}
}


/* 카운팅 */
#counting{position:relative; background:url(/img/main/counting_bg.jpg) no-repeat center/cover;}
#counting .container{position:relative; z-index:1;}
#counting::after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000060;z-index:0;}
#counting .cont_box{display:flex;width:100%;}
#counting .cont_box li{position:relative;display:flex;flex-direction:column;align-items:center;width:calc(100% / 3);padding:1.5rem;text-align:center;}
#counting .cont_box li:not(:last-child)::after{position:absolute;top:0;right:0;display:block;width:1px;height:100%;content:'';background-color:#ffffff40;}
#counting .cont_box li figure{display: flex;align-items: center;justify-content: center;width: 11.25rem;height: 11.25rem;background: #ffffff10;border-radius: 1000px; margin-bottom: 2.5rem;}
#counting .cont_box li figure svg {width: 5rem;fill: var(--pointcolor);}
#counting .cont_box li .text-box p{font-size: 1.375rem;font-weight:600;}
#counting .cont_box li .text-box .counting{display:block;margin:1rem 0;font-size: 3.75rem; font-weight:700; color: var(--pointcolor);}
#counting .cont_box li span{display: block;font-size:1.125rem;}
@media (max-width:1024px){
#counting .cont_box{flex-direction: column;}
#counting .cont_box li{flex-direction: row; justify-content: space-between;width:100%;}
#counting .cont_box li figure {margin:0;}
#counting .cont_box li::after{display:none;}
#counting .cont_box li .text-box .counting{margin:0;}
#counting .cont_box li:not(:last-child)::after {top: auto;bottom: 0;width: 100%;height: 1px;}
}
@media (max-width:768px){
#counting .cont_box li{gap:1rem;}
#counting .cont_box li figure{width: 10rem;height: 10rem;}
}

@media (max-width:520px){
#counting .cont_box li {flex-direction: column;}
#counting .cont_box li figure svg {width: 4.5rem;}
}