/* 로그인 */
#login-page{}
#login-page .title-sub{}
#login-page .login-header{display: flex;align-items: center;justify-content: space-between;padding: 17rem 0;}
#login-page .login-title{margin: 120rem 0 30rem;text-align: center;}
#login-page .login-title h3{font-size: 24rem;font-weight: 600;margin-bottom: 10rem;}
#login-page .form-login{}
#login-page .form-login input[type="text"],
#login-page .form-login input[type="password"]{display: block;width: 100%;height: 50rem;font-size: 14rem;background: whitesmoke;border: 1rem solid transparent;transition: border 0.4s;border-radius: 4rem;margin-bottom: 10rem;}
#login-page .form-login input[type="text"]:focus,
#login-page .form-login input[type="password"]:focus { border: 1rem solid #555; } 

#login-page .form-block__checkbox{display: flex;align-items: center;justify-content: end;}
#login-page .form-block__checkbox .security{margin: 15rem 0; font-size: 11rem; color: #aaa;}
#login-page .form-block__checkbox .security::before { content: ''; width: 13rem; height: 13rem; display: inline-block; background: url("../images/icon/lock.svg") no-repeat center center / 100% auto; vertical-align: middle; margin-top: -2rem; opacity: 0.4; } 

#login-page .form-block__login{}
#login-page .form-block__login button{background: #222;}

#login-page .login__util { margin: 25rem 0; } 
#login-page .login__util > ul { display: flex; align-items: center; justify-content: center; font-size: 14rem; } 
#login-page .login__util > ul > li { color: #555; } 
#login-page .login__util > ul > li::after { content: ''; width: 1rem; height: 8rem; background: #ccc; display: inline-block; margin: 0 8rem; } 
#login-page .login__util > ul > li:last-child { font-weight: 600; color: #000; } 
#login-page .login__util > ul > li:last-child::after { display: none; } 

/* common */
.resize-img{position: relative;font-size: 0;}
.resize-img .pc{display: block;}
.resize-img .mo{display: none;}

@media all and (max-width:660px) {
    .resize-img .pc{display: none;}
    .resize-img .mo{display: block;}
}

br.pc{display: block;}
br.mo{display: none;}

@media all and (max-width:660px) {
    br.pc{display: none;}
    br.mo{display: block;}
}

.text-pointer{background: var(--color-primary);color: #fff;min-width: 120rem;text-align: center;;padding: 5rem 20rem;border-radius: 10rem;display: inline-block;font-size: 24rem;font-weight: 600;}

@media all and (max-width:660px) {
    .text-pointer{min-width: 104rem;font-size: 20rem;}
}

.article-title{text-align: center;margin: 80rem 0 50rem;font-size: 30rem;font-weight: 600;margin-bottom: 30rem;line-height: 1.4;}
.article-title > span{color: var(--color-primary);}

@media all and (max-width:880px) {
    .article-title{font-size: 24rem;}
    .article-title{margin: 50rem 0 30rem;}
}
@media all and (max-width:660px) {
    .article-title{font-size: 28rem;text-align: left;}
}

.guide-wrap{margin-bottom: 50rem;}
.guide-wrap:last-child{margin-bottom: 0;}
.guide-wrap .guide-title{font-size: 28rem;font-weight: 600;margin-bottom: 16rem;position: relative;padding-left: 26rem;}
.guide-wrap .guide-title::before{content: '';width: 20rem;height: 20rem;box-shadow: inset 0 0 0 4rem var(--color-sub-1);border-radius: 50%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);}

@media all and (max-width:660px) {
    .guide-wrap .guide-title{font-size: 26rem;}
    .guide-wrap .guide-title::before{width: 18rem;height: 18rem;}
}

.guide-wrap .guide-table{width: 100%;border-collapse: collapse;border: 1rem solid var(--color-neutral-2);}
.guide-wrap .guide-table th,
.guide-wrap .guide-table td{border: 1rem solid var(--color-neutral-2);padding: 16rem;font-size: 18rem;font-weight: 400;color: var(--color-neutral-5);line-height: 1.6;}
.guide-wrap .guide-table.table-top-header th{background: var(--color-primary);color: #fff;}
.guide-wrap .guide-table.table-left-header td.title{background: var(--color-bg-2);font-weight: 500;}

@media all and (max-width:660px) {
    .guide-wrap .guide-table th, 
    .guide-wrap .guide-table td{font-size: 16rem;}
}

.guide-wrap .guide-table-2{width: 100%;border-collapse: collapse;border: 1rem solid var(--color-neutral-2);border-top: 2rem solid var(--color-primary);}
.guide-wrap .guide-table-2 th,
.guide-wrap .guide-table-2 td{border: 1rem solid var(--color-neutral-2);padding: 16rem;font-size: 18rem;font-weight: 400;color: var(--color-neutral-5);}
.guide-wrap .guide-table-2.table-top-header th{background: var(--color-bg-2);color: var(--color-primary);}
.guide-wrap .guide-table-2.table-left-header td.title{background: var(--color-bg-2);font-weight: 500;}

@media all and (max-width:660px) {
    .guide-wrap .guide-table-2 th,
    .guide-wrap .guide-table-2 td{font-size: 16rem;}
}

.guide-wrap .guide-table.pc{display: table;}
.guide-wrap .guide-table.mo{display: none;}

@media all and (max-width:660px) {
    .guide-wrap .guide-table.pc{display: none;}
    .guide-wrap .guide-table.mo{display: table;}
}

.guide-wrap .guide-text{color: var(--color-neutral-5);font-size: 18rem;line-height: 1.6;}

.guide-wrap .guide-list{}
.guide-wrap .guide-list > li{color: var(--color-neutral-5);line-height: 1.6;font-size: 18rem;margin-bottom: 5rem;position: relative;padding-left: 15rem;}
.guide-wrap .guide-list > li::before{content: '';width: 5rem;height: 5rem;border-radius: 50%;background: var(--color-neutral-3);position: absolute;top: 10rem;left: 0;}

.guide-wrap .guide-list-2{}
.guide-wrap .guide-list-2 > li{color: var(--color-neutral-5);line-height: 1.6;font-size: 18rem;margin-bottom: 20rem;}
.guide-wrap .guide-list-2 > li:last-child{margin-bottom: 0;}
.guide-wrap .guide-list-2 > li > p{font-size: 20rem;font-weight: 600;color: var(--color-sub-1);margin-bottom: 8rem;}

.guide-wrap .guide-img-list{}
.guide-wrap .guide-img-list > li{margin-bottom: 50rem;position: relative;padding-left: 130rem;display: flex;align-items: center;min-height: 110rem;}
.guide-wrap .guide-img-list > li:last-child{margin-bottom: 0;}
.guide-wrap .guide-img-list > li .img-box{font-size: 0;position: absolute;top:50%;left: 0;transform: translateY(-50%);}
.guide-wrap .guide-img-list > li .text-box{line-height: 1.6;}
.guide-wrap .guide-img-list > li .text-box > h4{font-size: 20rem;font-weight: 500;color: var(--color-primary);margin-bottom: 4rem;}
.guide-wrap .guide-img-list > li .text-box > p{font-size: 15rem;color: var(--color-neutral-5);}

@media all and (max-width:1050px) {
    .guide-wrap .guide-img-list > li{padding-left: 110rem;}
    .guide-wrap .guide-img-list > li .img-box img{width: 90rem;}
}

@media all and (max-width:660px) {
    .guide-wrap .guide-text{font-size: 16rem;}

    .guide-wrap .guide-list > li{font-size: 16rem;}
    .guide-wrap .guide-list > li::before{}

    .guide-wrap .guide-list-2 > li{font-size: 16rem;}
    .guide-wrap .guide-list-2 > li > p{font-size: 18rem;}

    .guide-wrap .guide-img-list{}
    .guide-wrap .guide-img-list > li{padding: 0;display: block;margin-bottom: 20rem;}
    .guide-wrap .guide-img-list > li .img-box{transform: none;top:auto;left: auto;}
    .guide-wrap .guide-img-list > li .img-box img{width: 60rem;}
    .guide-wrap .guide-img-list > li .text-box > h4{min-height: 60rem;padding-left: 70rem;display: flex;align-items: center;margin-bottom: 6rem;}
    .guide-wrap .guide-img-list > li .text-box > p{font-size: 16rem;}
}

.guide-process{display: flex;align-items: center;gap:0 16rem;margin-bottom: 16rem;}
.guide-process .process-title{background: var(--color-primary);color: #fff;text-align: center; min-width: 110rem;min-height: 100rem; border-radius: 10rem;font-size: 20rem;display: flex;align-items: center;justify-content: center;}
.guide-process.color-1 .process-title{background: var(--color-primary);}
.guide-process.color-2 .process-title{background: var(--color-sub-1);}
.guide-process .process-list{display: flex;align-items: center;gap:0 16rem;font-size: 0;}
.guide-process .process-list > div{background: var(--color-bg-2);min-width: 220rem;min-height: 100rem; border-radius: 10rem;font-size: 17rem;display: flex;align-items: center;justify-content: center;line-height: 1.6;text-align: center;color: var(--color-neutral-5);}

.guide-process.type-2{}
.guide-process.type-2 .process-title{min-height: 144rem;}
.guide-process.type-2 .process-list > div{display: block;overflow: hidden;min-height: 0;}
.guide-process.type-2 .process-list > div > .process-sub-title{font-weight: 500;padding: 8rem 0;}
.guide-process.type-2 .process-list > div > p{min-height: 100rem;display: flex;align-items: center;justify-content: center;padding: 0 15rem;}

.guide-process.type-2.color-1 .process-list > div > .process-sub-title{background: #D1DCFA;color: var(--color-primary);}
.guide-process.type-2.color-2 .process-list > div > .process-sub-title{background: #D4EFC0;color: #417818;}
.guide-process.type-2.color-1 .process-list > div:last-child > .process-sub-title{background: var(--color-primary);color: #fff;}
.guide-process.type-2.color-2 .process-list > div:last-child > .process-sub-title{background: var(--color-sub-1);color: #fff;}

@media all and (max-width:860px) {
    .guide-process{gap:0 10rem;margin-bottom: 10rem;}
    .guide-process .process-title{min-width: 80rem;min-height: 80rem;font-size: 16rem;}
    .guide-process .process-list{gap:0 10rem;}
    .guide-process .process-list > div{min-width: 170rem;min-height: 80rem;font-size: 14rem;}
}

@media all and (max-width:660px) {
    .guide-process{flex-direction: column;margin-bottom: 30rem;}
    .guide-process .process-title{width: 100%;margin-bottom: 10rem;min-height: 60rem;font-size: 18rem;}
    .guide-process .process-list{flex-direction: column;gap:10rem;width: 100%;gap:5rem}
    .guide-process .process-list > div{width: 100%;min-height: 0;padding: 22rem 0;font-size: 16rem;}
    .guide-process .process-list > svg{transform: rotate(90deg);}

    .guide-process.type-2 .process-title{min-height: 60rem;}
}

.guide-bar{width: 100%;height: 1rem;background: var(--color-neutral-2);margin: 30rem 0;}



/* ======================
    공통 레이아웃
======================= */
.section-visual{position: relative;}
.section-visual img{display: block;width: 100%;}
.section-visual .text-content{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;color: var(--color-neutral-1);}
.section-visual .text-content h3{font-weight: 600;font-size: 32rem;margin-bottom: 12rem;}
.section-visual .text-content p{font-size: 18rem;line-height: 1.4;}

@media all and (max-width:1440px) {
    .section-visual .text-content h3{font-size: 28rem;}
    .section-visual .text-content p{font-size: 16rem;}
}


/* 새곁소개 */
.company__wr{}
.company__wr .company-content{padding-top: 100rem;line-height: 1.6;}
.company__wr .company-content > p{font-size: 18rem;text-align: center;margin-bottom: 100rem;}
.company__wr .company-content > ul{display: flex;flex-direction: column;gap: 90rem;}
.company__wr .company-content > ul > li{text-align: center;}
.company__wr .company-content > ul > li .img-box{margin-bottom: 80rem;}
.company__wr .company-content > ul > li .img-box img{display: block;width: 100%;border-radius: 10rem;}
.company__wr .company-content > ul > li .txt-box{}
.company__wr .company-content > ul > li .txt-box h3{font-weight: 600;font-size: 26rem;margin-bottom: 12rem;}
.company__wr .company-content > ul > li .txt-box p{font-size: 18rem;}

@media all and (max-width:1440px) {
    .company__wr .company-content{padding-top: 75rem;}
    .company__wr .company-content > p{font-size: 16rem;}
    .company__wr .company-content > ul > li .txt-box h3{font-size: 22rem;}
    .company__wr .company-content > ul > li .txt-box p{font-size: 16rem;}
}

@media all and (max-width:1023px) {
    .company__wr .company-content > p{margin-bottom: 75rem;}
    .company__wr .company-content > ul > li .img-box{margin-bottom: 50rem;}
}

@media all and (max-width:767px) {
    .company__wr .company-content{padding-top: 50rem;}
    .company__wr .company-content > p{font-size: 14rem;margin-bottom: 50rem;}
    .company__wr .company-content > ul{gap: 65rem;}
    .company__wr .company-content > ul > li .img-box{margin-bottom: 25rem;}
    .company__wr .company-content > ul > li .txt-box h3{font-size: 20rem;margin-bottom: 7rem;}
    .company__wr .company-content > ul > li .txt-box p{font-size: 14rem;}
    .company__wr .company-content > ul > li .txt-box p br{display: none;}
}



/* 오시는 길 */
.map__wr{}
.map__wr .map-content{}
.map__wr .map-content .map-box{border-radius: 10rem;border: 1px solid var(--color-neutral-2);overflow: hidden;margin-bottom: 20rem;}
.map__wr .map-content .map-box .root_daum_roughmap{width: 100%;}
.map__wr .map-content .map-box .root_daum_roughmap .wrap_map{height: 620rem;}
.map__wr .map-content .map-box .root_daum_roughmap .wrap_controllers,
.map__wr .map-content .map-box .root_daum_roughmap .cont .section_address,
.map__wr .map-content .map-box .root_daum_roughmap .map_border{display: none;}
.map__wr .map-content .map-desc{}
.map__wr .map-content .map-desc ul{display: flex;flex-direction: column;gap: 20rem;}
.map__wr .map-content .map-desc ul li{display: grid;grid-template-columns: 110rem auto;}
.map__wr .map-content .map-desc ul li h3{font-weight: 600;color: var(--color-primary);display: flex;align-items: center;gap: 10rem;font-size: 16rem;}
.map__wr .map-content .map-desc ul li h3 svg{width: 18rem;height: 18rem;}
.map__wr .map-content .map-desc ul li p{font-size: 16rem;}

@media all and (max-width:767px) {
    .map__wr .map-content .map-box .root_daum_roughmap .wrap_map{height: 400rem;}
    .map__wr .map-content .map-desc ul li{grid-template-columns: 95rem auto;}
    .map__wr .map-content .map-desc ul li h3{font-size: 14rem;gap: 7rem;}
    .map__wr .map-content .map-desc ul li h3 svg{font-size: 14rem;height: 14rem;}
    .map__wr .map-content .map-desc ul li p{font-size: 14rem;}
}



/* 변호사 리스트 */
.member__wr{}
.member__wr .member-content{}
.member__wr .member-content > ul{gap: 60rem 15rem;}
.member__wr .member-content > ul > li{}
.member__wr .member-content > ul > li .img-box{}
.member__wr .member-content > ul > li .img-box img{display: block;width: 100%;border-radius: 10rem;}
.member__wr .member-content > ul > li .text-content{margin-top: 14rem;line-height: 1.4;}
.member__wr .member-content > ul > li .text-content p{font-weight: 600;font-size: 28rem;display: flex;align-items: center;gap: 12rem;margin-bottom: 20rem;}
.member__wr .member-content > ul > li .text-content p span{display: inline-block;font-size: 18rem;color: var(--color-primary);}
.member__wr .member-content > ul > li .text-content ul{display: flex;flex-direction: column;gap: 8rem;}
.member__wr .member-content > ul > li .text-content ul li{font-size: 16rem;}

@media all and (max-width:1440px) {
    .member__wr .member-content > ul > li .text-content p{font-size: 22rem;gap: 8rem;margin-bottom: 12rem;}
    .member__wr .member-content > ul > li .text-content p span{font-size: 15rem;}
    .member__wr .member-content > ul > li .text-content ul li{font-size: 14rem;}
}

@media all and (max-width:1023px) {
    .member__wr .member-content > ul{gap: 40rem 15rem;}
    .member__wr .member-content > ul > li .text-content ul{gap: 5rem;}
}

@media all and (max-width:767px) {
    .member__wr .member-content > ul{gap: 30rem 10rem;}
    .member__wr .member-content > ul > li .img-box img{border-radius: 5rem;}
    .member__wr .member-content > ul > li .text-content p{font-size: 18rem;margin-bottom: 7rem;}
    .member__wr .member-content > ul > li .text-content p span{font-size: 13rem;}
    .member__wr .member-content > ul > li .text-content ul li{font-size: 12rem;}
}



/* 변호사 매칭 */
.match__wr{}

.match__wr .match-content{padding-top: 120rem;}
.match__wr .match-content ul{display: flex;flex-direction: column;gap: 70rem;}
.match__wr .match-content li{display: flex;align-items: center;gap: 16rem;}
.match__wr .match-content li .img-box{text-align: center;color: var(--color-neutral-1);flex: 1;border-radius: 10rem;}
.match__wr .match-content li .img-box img{display: block;width: 100%;border-radius: 10rem;}
.match__wr .match-content li .txt-box{flex: 1;padding-left: 100rem;}
.match__wr .match-content li .txt-box span{display: block;font-weight: 600;font-size: 26rem;color: var(--color-primary);margin-bottom: 20rem;}
.match__wr .match-content li .txt-box h3{font-weight: 600;font-size: 26rem;margin-bottom: 20rem;}
.match__wr .match-content li .txt-box p{font-size: 17rem;line-height: 1.4;color: var(--color-neutral-9);}
.match__wr .match-content li:nth-child(even) .txt-box{padding-left: 0;}

@media all and (max-width:1440px) {
    .match__wr .match-content{padding-top: 85rem;}
    .match__wr .match-content li .txt-box{padding-left: 50rem;}
    .match__wr .match-content li .txt-box span{font-size: 22rem;}
}

@media all and (max-width:1023px) {
    .match__wr .match-content ul{gap: 50rem;}
    .match__wr .match-content li .txt-box{padding-left: 15rem;}
    .match__wr .match-content li .txt-box span{font-size: 18rem;margin-bottom: 15rem;}
    .match__wr .match-content li .txt-box h3{font-size: 22rem;margin-bottom: 15rem;}
    .match__wr .match-content li .txt-box p{font-size: 15rem;}
}

@media all and (max-width:767px) {
    .match__wr .match-content{padding-top: 50rem;}
    .match__wr .match-content ul{gap: 70rem;}
    .match__wr .match-content li{flex-direction: column;align-items: flex-start;gap: 25rem;}
    .match__wr .match-content li:nth-child(even){flex-direction: column-reverse;}
    .match__wr .match-content li .txt-box{padding-left: 0;}
}



/* 자주하는 질문 */
.faq__wr { }
.faq__wr .faq-list{border-top: 1px solid var(--color-neutral-2);}
.faq__wr .faq-list > li{line-height: 1.4;border-bottom: 1px solid var(--color-neutral-2);}
.faq__wr .faq-list > li > h3{font-weight: 500;font-size: 18rem;color: var(--color-neutral-8);display: flex;align-items: center;gap: 12rem;padding: 30rem 20rem;padding-right: 45rem; position: relative;cursor: pointer;}
.faq__wr .faq-list > li > h3::after{content: "";background: url(../images/icon/toggle_arrow.svg) no-repeat 100% 100% / contain;width: 24rem;height: 24rem;display: block;position: absolute;top: 50%;right: 20rem;transform: translateY(-50%);}
.faq__wr .faq-list > li.on > h3::after{transform: translateY(-50%) rotate(180deg);}
.faq__wr .faq-list > li > h3 span{color: var(--color-primary);font-weight: 500;font-size: 20rem;display: block;}
.faq__wr .faq-list > li > div{padding: 35rem 45rem;background: var(--color-bg-2);border-radius: 5rem;overflow: hidden;display: none;}
.faq__wr .faq-list > li > div > *{font-size: 16rem;color: var(--color-neutral-5);}
.faq__wr .faq-empty { padding: 80rem 0; text-align: center; color: var(--color-neutral-4); font-size: 15rem; }

@media all and (max-width:1023px) {
    .faq__wr .faq-list > li > h3{padding: 25rem 15rem;padding-right: 35rem; font-size: 16rem;}
    .faq__wr .faq-list > li > h3 span{font-size: 18rem;}
    .faq__wr .faq-list > li > h3::after{width: 20rem;height: 20rem;right: 15rem;}
    .faq__wr .faq-list > li > div{padding: 30rem 35rem;}
    .faq__wr .faq-list > li > div > *{font-size: 14rem;}
}

@media all and (max-width:767px) {
    .faq__wr .faq-list > li > h3{padding: 20rem 12rem;padding-right: 30rem; font-size: 15rem;gap: 8rem;}
    .faq__wr .faq-list > li > h3 span{font-size: 16rem;}
    .faq__wr .faq-list > li > h3::after{right: 12rem;width: 18rem;height: 18rem;}
    .faq__wr .faq-list > li > div{padding: 20rem 30rem;}
}