@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(300px, calc( 600 / var(--inner) * 100vw ), 600px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(300px, calc( 600 / var(--inner) * 100vw ), 600px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"서울 강남구 테헤란로 518"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:8px; margin-top:7px; line-height:1.3; color: #454545; font-size:clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:2px; height:2px; border-radius: 50%; background:#454545;}

.bg-gray {background:#fafafa;}
.secpd {padding: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px) 0;}
.sectitbx {text-align: center;}
.sectitbx .subtit {font-size:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);}
.sectitbx .maintit {font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: 400;}
.sectitbx .maintit2 {font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 400;}
.sectitbx .subtit + .maintit {padding-top: 5px;}
.sectitbx .subtit + .maintit2 {padding-top: 5px;}


.topgreetbx {position: relative; margin-top: clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px);}
.topgreetbx:after {position: absolute; content: ''; right: 50%; top: -40px; transform: translateX(-50%); width: 1px; height: 80px; background:url(../images/sub/about-line.png) no-repeat; background-size: contain;}
.topgreetbx .inner { padding: clamp(50px, calc( 72 / var(--inner) * 100vw ), 72px) 15px;  border-radius: clamp(50px, calc( 113 / var(--inner) * 100vw ), 113px); background:var(--color-3) url(../images/sub/toptextbg.png) no-repeat bottom center; background-size: clamp(340px, calc( 1124 / var(--inner) * 100vw ), 1124px) auto; color: #fff; text-align: center; overflow: hidden;}
.topgreetbx .inner .intext {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 1.5;}
.strengthwrap {margin-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); border-top: 1px solid #ddd;}
.strengthwrap .sectitbx {padding-bottom: clamp(50px, calc( 84 / var(--inner) * 100vw ), 84px);}
.strenitem {display: flex; flex-wrap: wrap; justify-content: center; margin:-32px -20px;}
.strenlist {flex: 1 0 33.33%; max-width: 33.33%; padding: 32px 20px;}
.strenlist .inner {padding: clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px) clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px); position: relative; border: 1px solid #ddd; text-align: center; height: 100%;}
.strenlist .num {display: flex; align-items: center; justify-content: center; position: absolute; content: ''; left: 50%; top: -24px; transform: translateX(-50%); border-radius: 50%; width: clamp(34px, calc( 48 / var(--inner) * 100vw ), 48px); height: clamp(34px, calc( 48 / var(--inner) * 100vw ), 48px); background:var(--color-1); color: #fff; line-height: 1; }
.strenlist .name {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold;}
.strenlist .desc {padding-top: 10px; line-height: 1.5; font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px); font-weight: #454545;}
.bottomicnbx {overflow: hidden;}
.bottomicnbx .sectitbx {padding-bottom: clamp(30px, calc( 58 / var(--inner) * 100vw ), 58px);}
.promitem {display: flex; flex-wrap: wrap; margin: -10px;}
.promlist {flex: 1 0 16.66%; max-width: 16.66%; padding: 10px; text-align: center; }
.promlist .icn img {width: clamp(90px, calc( 168 / var(--inner) * 100vw ), 168px);}
.promlist .text {padding-top: clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px); font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px); color: #454545; line-height: 1.6;}
.ablasttext {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); text-align: center; line-height: 1.45;}
.ablasttext .txt1 {font-size: clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px);}
.ablasttext .txt2 {font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px);}
.ablasttext .txt2 .big {font-size:clamp(18px, calc( 32 / var(--inner) * 100vw ), 32px) ;}
.ablasttext .line {padding: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px) 0;}
.ablasttext .line img {height: clamp(30px, calc( 58 / var(--inner) * 100vw ), 58px);}
.directions {padding-top:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.directions .left {flex: 1 0 59%; max-width: 59%; padding-right: 20px;}
.directions .right {flex: 1 0 auto; width: 1%;}
.directions .addrcom {font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px); font-weight: 600; color:var(--color-1);}
.directions .addrname {padding-top:clamp(10px, calc( 14 / var(--inner) * 100vw ), 14px); font-size: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px);font-weight: bold;} 
.directions .addrlist {display: flex; align-items: center; flex-wrap: wrap; }
.directions .addrlist  + .addrlist {padding-top: 8px;}
.directions .nameicn {flex: 1 0 clamp(100px, calc( 160 / var(--inner) * 100vw ), 160px); max-width: clamp(100px, calc( 160 / var(--inner) * 100vw ), 160px); display: flex; align-items: center;}
.directions .nameicn img {width: clamp(26px, calc( 45 / var(--inner) * 100vw ), 45px);}
.directions .name {padding-left: clamp(12px, calc( 22 / var(--inner) * 100vw ), 22px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}
.directions .desc {flex: 1 0 auto; width: 1%; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500;}

/*.busibgtext {margin-top: clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px);}*/
.busibg .inner {display: flex; align-items: center; justify-content: center; padding: 40px clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);position: relative; height: 300px; text-align: center; color: #fff;}
/*.busibg .inner:after {position: absolute; content: ''; right: 50%; top: -40px; transform: translateX(-50%); width: 1px; height: 80px; background:url(../images/sub/about-line.png) no-repeat; background-size: contain;}*/
.busibg .text {line-height: 1.55; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}
.busibg.bg1 {background: url(../images/sub/busi-bg1.jpg) no-repeat center center; background-size: cover;}
.busibg.bg2 {background: url(../images/sub/busi-bg2.jpg) no-repeat center center; background-size: cover;}
.busibg.bg3 {background: url(../images/sub/busi-bg3.jpg) no-repeat center center; background-size: cover;}
.busibg.bg4 {background: url(../images/sub/busi-bg4.jpg) no-repeat center center; background-size: cover;}
.busibg.bg5 {background: url(../images/sub/busi-bg5.jpg) no-repeat center center; background-size: cover;}
.busibg.bg6 {background: url(../images/sub/busi-bg6.jpg) no-repeat center center; background-size: cover;}
.busibg.bg7 {background: url(../images/sub/busi-bg7.jpg) no-repeat center center; background-size: cover;}
.busibg.bg8 {background: url(../images/sub/busi-bg8.jpg) no-repeat center center; background-size: cover;}

.detailfield {padding-top: clamp(50px, calc( 95 / var(--inner) * 100vw ), 95px); }
.detailfield .sectitbx {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.fielditem {display: flex; flex-wrap: wrap;  margin: -20px;}
.fieldlist {flex: 1 0 25%; max-width: 25%; padding: 20px;}
.fieldlist .finner { padding:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(12px, calc( 25 / var(--inner) * 100vw ), 25px) clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative; border-radius: 24px; border: 1px solid #ddd; text-align: center; height: 100%; letter-spacing: -0.5px;}
.fieldlist .badge {display: flex; align-items: center; justify-content: center; position: absolute; left: 50%; top: -20px; transform: translateX(-50%); min-width: clamp(90px, calc( 100 / var(--inner) * 100vw ), 100px); height: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); background:var(--color-1); border-radius: 20px; color: #fff; line-height: 1; font-weight: 500;}
.fieldlist .tit {margin:0 -15px;font-size:clamp(16px, calc( 19 / var(--inner) * 100vw ), 19px); font-weight: bold;height:62px;}
.fieldlist .text {margin-top: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px); padding-left:10px; position:relative; color: #454545; line-height: 1.5; text-align:left;}
.fieldlist .text::before {position:absolute; content:''; left:0; top:9px; width:3px; height:3px; border-radius: 50%; background:#454545;}

.lawyerwrap {overflow: hidden;}
.lawyeritem {display: flex; flex-wrap: wrap; margin: -20px;}
.lawyerlist {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.lawyerlist.list1 .person img {height: clamp(200px, calc( 385 / var(--inner) * 100vw ), 385px);}
.lawyerlist.list2 .person img {height: clamp(200px, calc( 382 / var(--inner) * 100vw ), 382px);}
.lawyerlist.list3 .person img {height: clamp(200px, calc( 360 / var(--inner) * 100vw ), 360px);}
.lawyerlist .linner {display: block; padding:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative; background: url(../images/sub/lawyer-bg.png) no-repeat; background-size: cover; border-radius: 24px; letter-spacing: -0.5px;}
.lawyerlist .person {position: absolute; right: 0; bottom: 0;}
.lawyerlist .textbx {width: 55%;}
.lawyerlist .badge {display: inline-flex; align-items: center; justify-content: center; width: clamp(80px, calc( 100 / var(--inner) * 100vw ), 100px); height: clamp(22px, calc( 30 / var(--inner) * 100vw ), 30px); border-radius: 15px; background:var(--color-1); color: #fff; line-height: 1; font-size: clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px);}
.lawyerlist .name {padding-top: 10px; font-size: clamp(18px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight: bold;}
.lawyerlist .text {padding-top: clamp(25px, calc( 52 / var(--inner) * 100vw ), 52px); }
.lawyerlist .dec {display: block; line-height: 1.55; color: #454545; font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px);}
.lawyerlist .btn-more {display: flex; align-items: center; padding-top: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.lawyerlist .btn-more span {display: inline-block; padding-right: clamp(5px, calc( 12 / var(--inner) * 100vw ), 12px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; }
.lawyerlist .btn-more img {width: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); vertical-align: middle;}


.tabwrap {margin-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.tabitem {display: flex; align-items: center; justify-content: center; margin:0 -10px;}
.tablist {padding: 0 10px;}
.tablist .link {display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 25px; color: #333333; font-size: clamp(13px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; height: clamp(38px, calc( 50 / var(--inner) * 100vw ), 50px); width: clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px);}
.tablist.active .link {background:var(--color-1); border-color:var(--color-1); color: #fff;}

.viewwrap .imgbx {flex: 1 0 550px; max-width: 550px; margin-right: clamp(10px, calc( 50 / var(--inner) * 100vw ), 50px);}
.viewwrap .image {box-shadow: rgba(0,0, 0, 0.35) 0 0 clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border-radius: 24px; overflow: hidden;}
.viewwrap .textbx {flex: 1 0 auto; width: 1%; padding-top: 30px; letter-spacing: -0.5px;}
.viewwrap .kor {font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold; line-height: 1.2;}
.viewwrap .eng {padding-top: 10px; font-size: clamp(13px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 500; color: #aaaaaa; letter-spacing: 0.3px; text-transform: uppercase;}
.viewwrap .decbx {padding-top: clamp(20px, calc( 68 / var(--inner) * 100vw ), 68px);}
.viewwrap .dec {font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px); color: #454545; line-height: 1.5;}
.viewwrap .dec + .dec {padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.viewwrap .hisbx {padding-top: clamp(25px, calc( 68 / var(--inner) * 100vw ), 68px);}
.viewwrap .boxtit {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #454545;}
.viewwrap .bullet-item {padding-top: 10px;}
.viewwrap .lastbx {padding-top: clamp(25px, calc( 68 / var(--inner) * 100vw ), 68px);}
.viewwrap .latext {font-size: clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px); color: #454545; line-height: 1.5;}

.case-list {padding:clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px) 0 clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0; border-bottom:1px solid #ddd; border-top:2px solid #868686;}
.caseitem {display: flex; flex-wrap: wrap; margin: -20px;}
.caselist {flex: 1 0 33.33%; max-width: 33.33%; padding: 20px;}
.caselist .ginner {display: block; padding:clamp(15px, calc( 27 / var(--inner) * 100vw ), 27px) clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); border: 1px solid #ddd; height: 100%;}
.caselist .badge {display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; height: clamp(28px, calc( 30 / var(--inner) * 100vw ), 30px); min-width: clamp(50px, calc( 60 / var(--inner) * 100vw ), 60px); background:var(--color-1); border-radius: 15px; color: #fff; font-size: clamp(10px, calc( 13 / var(--inner) * 100vw ), 13px); font-weight: 800; line-height: 1;}
.caselist .title {margin-top: clamp(10px, calc( 26 / var(--inner) * 100vw ), 26px); font-size:clamp(16px, calc( 26 / var(--inner) * 100vw ), 26px); font-weight:bold; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:2; color: #333; height: clamp(45px, calc( 68 / var(--inner) * 100vw ), 68px);}
.caselist .desc {margin-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(14px, calc( 17 / var(--inner) * 100vw ), 17px); color:#555555; line-height: 1.5; display:-webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp:5; color: #333;}
.caselist .secright {margin-top: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px); text-align: right;}