@charset 'utf-8';
.page-content {padding: 0 0 100px;}
.page-content p { word-break: keep-all;}
.page-content h4.h4 { padding: 0 0 50px; font-size: 35px; font-weight: 500;}
.page-content h4.h4 b { color: #8b8075;  }

@media (max-width:991px){
    .page-content h4.h4 { padding: 0 0 40px; font-size: 32px;}
}
@media (max-width:768px){
    .page-content h4.h4 {  font-size: 29px;}
}
@media (max-width:576px){
    .page-content h4.h4 { padding: 0 0 35px; font-size: 25px;}
}
@media (max-width:440px){
    .page-content h4.h4 { font-size: 22px;}
}


.greeting { background: url('/img/hk/bg_greeting.jpg') no-repeat right top;}
.greeting article { max-width: 780px; }
.greeting .con1 { padding: 0 0 50px; margin: 0 0 50px;  border-bottom: 1px solid #e1e1e1;}
.greeting .con2 p { padding: 0 0 15px;}
.greeting p { line-height: 1.777;}
.greeting .p1 { font-size: 42px; font-weight: 500; line-height: 1.3;}
.greeting .p1 b { color: #8b8075; }
.greeting .p2 { padding: 40px 0 0; color: #999; line-height: 1; letter-spacing: .8em; }
.greeting .p3 { font-size: 24px; }
.greeting .sign img { padding: 20px 0 0; }

@media (max-width:1199px){
    .greeting { background-size: 300px auto;}
    .greeting article { max-width: 650px; }
    .greeting .con1 { padding: 0 0 45px; margin: 0 0 45px; }
    .greeting .con2 p br { display: none;}
    .greeting .p1 { font-size: 36px; }
    .greeting .p2 { padding: 35px 0 0; }
}
@media (max-width:991px){
    .greeting { background:none }
    .greeting article { max-width: 100%;}
    .greeting .con1 { padding: 0 0 40px; margin: 0 0 40px; }
    .greeting .p1 { font-size: 32px; }
    .greeting .p2 { padding: 30px 0 0; }
}
@media (max-width:768px){
    .greeting .con1 { padding: 0 0 35px; margin: 0 0 35px; }
    .greeting .con2 p { padding: 0 0 10px; }
    .greeting .p1 { font-size: 28px; }
    .greeting .p2 { padding: 25px 0 0; letter-spacing: 0.6em;}
    .greeting .p3 { font-size: 22px; }
}
@media (max-width:576px){
    .greeting .con1 { padding: 0 0 30px; margin: 0 0 30px; }
    .greeting .p1 { font-size: 24px; line-height: 1.5; }
    .greeting .p2 { padding: 20px 0 0; letter-spacing: .4em;}
    .greeting .p3 { font-size: 20px; }
}
@media (max-width:440px){
    .greeting .con1 { padding: 0 0 25px; margin: 0 0 25px; }
    .greeting .p1 { font-size: 22px; }
    .greeting .p2 { padding: 15px 0 0; letter-spacing: .4em;}
    .greeting .p3 { font-size: 18px; }
}


.lawyer {}
.lawyer article { padding:70px 0 0; border-bottom: 1px solid #e1e1e1;}
.lawyer article:first-of-type { padding-top: 0 !important;}
.lawyer #profile-wrap { overflow:auto; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 10000; display: none; padding: 10px; background: rgba(0,0,0,.5);     cursor: pointer;}
.lawyer #profile-wrap.on { display: block; }
.lawyer #profile-wrap > div { display: flex; justify-content: center; align-items: center; }
.lawyer #profile-wrap .pc { height: 100%; }
.lawyer #profile-wrap .mobile { display: none; }

.lawyer ul { display: flex; margin: 0 -40px; flex-wrap: wrap;}
.lawyer ul li { margin: 0 40px; width: calc(33.33% - 80px); padding: 0 0 70px;}
.lawyer ul li a { display: block; width: 100%; height: 100%; text-align: center;}
.lawyer ul li a .img { overflow:hidden; position: relative; }
/* .lawyer ul li a .img img {width: 100%;} */
.lawyer ul li a .img .tail { position: absolute; left: 0; right: 0; bottom: -50px; z-index: 10; height: 50px; line-height: 50px; font-weight: 500; color: #fff; background: rgba(0,62,102,.9); transition: .2s;}
.lawyer ul li a .img:after { content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; backdrop-filter: grayscale(1); transition: .2s;}
.lawyer ul li a .name { padding: 10px 0 3px; font-size: 18px; color: #8b8075; }
.lawyer ul li a .name b { display: inline-block; padding: 0 30px 0 0; font-weight: 500; font-size: 25px; color: #111;}
.lawyer ul li a .title { font-size: 16px; color: #8b8075;  }
.lawyer ul li a .title span { position: relative; display: inline-block; padding: 0 0 0 30px; text-align: left;}
.lawyer ul li a .title span:before { content:''; display: block; position: absolute; left: 0; top: 3px; width: 22px; height: 21px; background: url('/img/hk/marker1.png') no-repeat top center / contain;}
.lawyer ul li a:hover .img .tail { bottom: 0; }
.lawyer ul li a:hover .img:after { top: -100%; }



@media (max-width:1199px){
    .lawyer ul {margin: 0 -20px; }
    .lawyer ul li {margin: 0 20px; width: calc(33.33% - 40px);}
    .lawyer ul li a .name { padding: 15px 0 0px; }
    .lawyer ul li a .name b { padding: 0 20px 0 0; font-size: 23px;}
}
@media (max-width:991px){
    .lawyer article { padding: 60px 0 ;}
    /* .lawyer ul { flex-wrap:wrap; margin: 0 -10px -40px; }
    .lawyer ul li { width: calc(50% - 20px); margin: 0 10px 40px; }  */
    .lawyer ul {margin: 0 -10px;}
    .lawyer ul li { margin: 0 10px}

    .lawyer ul li a .img .tail { left: inherit; bottom: 0; padding: 0 40px ; height: 40px; font-size: 15px; line-height: 40px; }
    .lawyer ul li a .img:after {display: none; }
    .lawyer ul li a .title { font-size: 15px;}
    .lawyer ul li a .title span:before { top: 2px; }
}
@media (max-width:768px){
    .lawyer article { padding: 50px 0 ;}
    .lawyer #profile-wrap .pc { display: none; }
    .lawyer #profile-wrap .mobile { display: flex; }
    .lawyer ul { flex-wrap:wrap; margin: 0 -10px -40px; }
    .lawyer ul li { width: calc(50% - 20px); margin: 0 10px 40px; }
    .lawyer ul li a .name { padding: 15px 0 2px; }
    .lawyer ul li a .name b { padding: 0 15px 0 0; font-size: 21px; }


}
@media (max-width:576px){
    .lawyer article { padding: 40px 0 ;}
    .lawyer ul { flex-wrap:wrap; margin: 0 -5px -40px; }
    .lawyer ul li { width: calc(50% - 10px); margin: 0 5px 40px; }
    .lawyer ul li a .img img { width: 100%;}
    .lawyer ul li a .name { padding: 15px 0 0; font-size: 15px;  }
    .lawyer ul li a .name b { padding: 0 10px 0 0; }
    .lawyer ul li a .title span { padding: 0 0 0 22px; font-size: 13px; line-height: 1.4; font-weight: 300;}
    .lawyer ul li a .title span:before { top: 2px; width: 15px;}
}
@media (max-width:420px){
    .lawyer ul { margin: 0 0 -30px;}
    .lawyer ul li { margin: 0 0 30px; width: 100%; }
}

.lawsuit {}
.lawsuit article { padding: 47px 30px 40px; margin-bottom: 50px; border: 1px solid #e1e1e1; border-top: 3px solid #8b8075;}
.lawsuit article:nth-of-type(odd) { background: #fafafa;}
.lawsuit article h4 { position: relative; padding: 0 0 30px 50px; margin: 0 0 40px; font-size: 25px; font-weight: 700; border-bottom: 1px solid #e1e1e1;}
.lawsuit article h4:before { content:''; display: block; position: absolute; left: 0; top: -3px; width: 30px; height: 30px; background:url('/img/hk/marker2.png') no-repeat center / contain;}
.lawsuit article p {line-height: 1.5;}
.lawsuit .con6 {}
.lawsuit .con6 .wrap  { position: relative;}
.lawsuit .con6 .wrap p {position: absolute;    right: 6%; bottom: 66px;}
@media (max-width:1199px){
    .lawsuit .con6 .wrap p { right: 0; bottom: 55px; font-size: 16px; }
}
@media (max-width:991px){
    .lawsuit article { padding: 40px 25px 35px; }
    .lawsuit article h4  { font-size: 23px;}
    .lawsuit article h4:before { top: -5px;}
    .lawsuit .con6 .wrap p { position: static; padding: 30px 0 0;   }
}
@media (max-width:768px){
    .lawsuit article { margin-bottom: 40px;}
    .lawsuit article h4  { padding: 0px 0 25px 45px; margin: 0 0 30px; font-size: 20px;}
    .lawsuit article h4:before { width: 25px;}
    .lawsuit article p { font-size: 16px; line-height: 1.6;}
}
@media (max-width:576px){
    .lawsuit article { padding: 25px 15px; margin-bottom: 30px; }
    .lawsuit article h4  { padding: 0px 0 20px 40px; margin: 0 0 20px; font-size: 18px;}
    .lawsuit article h4:before { top: -6px; width: 23px;}
    .lawsuit article p { font-size: 15px; line-height: 1.6;}
}
@media (max-width:440px){
    .lawsuit article h4  { padding: 0px 0 20px 30px; }
    .lawsuit article h4:before { top: -6px; width: 21px;}
}

.faq {}
.faq ul.con1 { border-top: 3px solid #8b8075;}
.faq ul.con1 li { border-bottom: 1px solid #e1e1e1;}
.faq ul.con1 li .question { position: relative; padding: 35px 0; cursor:pointer}
.faq ul.con1 li .question h4 { padding: 12px 70px; font-size: 18px; font-weight: 500;  line-height: 1.5; background: url(/img/hk/ico_faq_q.png) no-repeat left center / 50px; }
.faq ul.con1 li .question .plus { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: block; width: 26px; height: 3px; }
.faq ul.con1 li .question .plus:before,
.faq ul.con1 li .question .plus:after { content:''; display: block; position: absolute; width: 100%; height: 100%; background: #8b8075;  transition: .3s linear; }
.faq ul.con1 li .question .plus:before { }
.faq ul.con1 li .question .plus:after {transform:  rotate(90deg); }
.faq ul.con1 li .answer { display: none; padding: 60px 50px; background: #f8f8f8; border-top: 1px solid #e1e1e1; }
.faq ul.con1 li .answer p { word-break: keep-all;}
.faq ul.con1 li .question.on h4 { background-image: url(/img/hk/ico_faq_q_on.png) }
.faq ul.con1 li .question.on .plus:before  { opacity: 0; transform:  rotate(90deg);  }
.faq ul.con1 li .question.on .plus:after { transform:  rotate(180deg); background: #003e66;}

@media (max-width:991px){
    .faq ul.con1 li .answer{ padding: 50px 40px; }
}
@media (max-width:768px){
    .faq ul.con1 li .question { padding: 25px 0; }
    .faq ul.con1 li .answer{ padding: 35px 25px; }
}
@media (max-width:576px){
    .faq ul.con1 li .question { padding: 15px 0; }
    .faq ul.con1 li .question h4 { padding: 10px 50px 10px 60px; font-size: 15px; background-size: 40px;}
    .faq ul.con1 li .answer{ padding: 30px 20px; }
    .faq ul.con1 li .question .plus { width: 21px; height: 2px;}
}
@media (max-width:440px){
    .faq ul.con1 li .question h4 { padding: 10px 45px 10px 10px; background-size: 30px; background-position: right 10px;}
    .faq ul.con1 li .question .plus { display: none}
    .faq ul.con1 li .answer{ padding: 20px; }
}


.location1 {}
.location1 .tab-btns { display: flex; margin: 0 auto 50px; width: 100%; max-width: 600px; }
.location1 .tab-btns li { flex:1;}
.location1 .tab-btns li a { display: block; width: 100%; height: 60px; line-height: 60px; text-align: center; color: #111; background: #f2f2f2;}
.location1 .tab-btns li:first-of-type a { color: #fff; background: #003057; }
.location1 .con1 { padding: 0 0 100px;}
.location1 .map-box { height: 450px;}
.location1 .map-box .root_daum_roughmap { width: 100%;}
.location1 .info { padding: 50px 30px; margin-top: 30px; background: #f9f9f9; }
.location1 .info > li { position: relative; padding: 0 0 50px 25px;}
.location1 .info li h5 { position: relative; margin: 0 0 30px; font-size: 20px; font-weight: 500; }
.location1 .info li h5:before { content:''; display: block; position: absolute; left: -25px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; background: #f97221; border-radius: 50%; }
.location1 .info li .add { padding: 0 0 0 40px; line-height: 1.2; background: url(/img/hk/ico_add.png) no-repeat left center;}
.location1 .info li .traffic { display: flex; flex-wrap:wrap; padding: 0 0 0 85px;  background:  no-repeat left top; }
.location1 .con1 .info li .traffic { background-image: url(/img/hk/ico_subway.png);}
.location1 .con2 .info li .traffic { background-image: url(/img/hk/ico_bus.png);}
.location1 .info li .traffic dt { padding: 0 0 20px; width: 100%; line-height: 1; font-weight: 400;}
.location1 .info li .traffic dd { padding: 0 30px 5px 0; font-size: 14px; }
.location1 .info li .traffic dd span { display: inline-block;  font-size: 16px; font-weight: 500; color: #003e66;  }
.location1 .info li .traffic dd em { display: inline-block; margin: 0 20px; width: 20px; height: 20px; line-height: 20px; font-weight: 300; text-align: center; font-style: normal;  color: #fff; border-radius: 50%; }
.location1 .info li .traffic dd em.orange { background: #f96b08;  }
.location1 .info li .traffic dd em.green { background: #20b02d;}
.location1 .info li .traffic dd em.green2 { width: 45px; background: #20b02d; border-radius: 10px;}
.location1 .info li .traffic dd em.brown { background: #cea43a; }
.location1 .info li .traffic dd em.dark-brown { background: #697215; }
.location1 .info li .traffic dd b { padding:0 0 0 5px; font-weight: 400; color: #f97221; }
.location1 .info li .tel { display: flex; flex-wrap:wrap; }
.location1 .info li .tel li { padding: 0 30px 0 0 ; font-size: 14px;  line-height: 1;}
.location1 .info li .tel li b { padding: 0 20px 0 0; font-weight: 500;  font-size: 16px;  }

@media (max-width:991px){
    .location1 .con1 { padding: 0 0 90px;}
    .location1 .info { padding: 40px 20px; }
}

@media (max-width:768px){
    .location1 .tab-btns li a { height: 50px; line-height: 50px;}
    .location1 .con1 { padding: 0 0 70px;}
    .location1 .info > li { padding: 0 0 40px 20px;}
    .location1 .info li h5 {  }
    .location1 .info li h5:before { left: -20px;}
    .location1 .info li .tel li { padding: 0 30px 5px 0;}
}

@media (max-width:576px){
    .location1 .tab-btns { margin: 0 auto 40px;}
    .location1 .tab-btns li a { height: 45px; line-height: 45px; }
    .location1 .con1 { padding: 0 0 60px;}
    .location1 .info { margin-top: 20px;}
    .location1 .info > li { padding: 0 0 30px 15px;}
    .location1 .info li h5 { margin: 0 0 20px; font-size: 18px;  }
    .location1 .info li h5:before { left: -20px;}
    .location1 .info li .tel li { padding: 0 30px 5px 0;}
    .location1 .info li .add { padding: 0 40px 0 0; background-position:  right center;}
    .location1 .info li .traffic { padding: 0 85px 0 0; background-position:  right center;}
    .location1 .info li .traffic dd { font-size: 13px; word-break: keep-all; }
    .location1 .info li .traffic dd span { font-size: 14px;}
    .location1 .info li .traffic dd em { margin: 0 10px; width: 18px; height: 18px; line-height: 18px;}
}
@media (max-width:440px){
    .location1 .con1 { padding: 0 0 50px;}
    .location1 .info { padding: 30px 15px; }
    .location1 .info > li { padding: 0 0 30px 0; }
    .location1 .info li h5 { font-size: 17px;}
    .location1 .info li h5:before { display: none;}
    .location1 .info li .add { padding: 0; background: none;}
    .location1 .info li .traffic { padding: 0; background: none !important;}
    .location1 .info li .traffic dt { padding: 0 0 10px; }
}

.cert { padding: 187px 0 100px ; min-height:100vh; background: url('/img/hk/bg_cert.jpg') no-repeat center / cover ; text-align: center;}
.cert .con1 {max-width: 1500px; }
.cert h3 { display: inline-block; position: relative; padding-left: 88px; font-size: 35px; font-weight: 500; color: #fff; }
.cert h3:before { content:''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 70px; height: 67px; background: url('/img/hk/marker3.png') no-repeat center/ contain;}
.cert h3+p { padding: 40px 0 70px; font-size: 60px; font-weight: 500; line-height: 1; color: #fff; }
.cert .wrap { position: relative; margin: 0 -30px;}
.cert .wrap li { flex:1;  margin: 0 30px;}
.cert .wrap:before,
.cert .wrap:after { content:''; display: block; position: absolute; top: -17.858%; width: 15.845%; height: 319px; background: no-repeat top center / contain;}
.cert .wrap:before {left:-1.949%; background-image: url('/img/hk/cert_left.png');}
.cert .wrap:after {right: -1.949%; background-image: url('/img/hk/cert_right.png');}



@media (max-width:1199px){
    .cert h3+p { font-size: 56px;}
    .cert .wrap { margin: 0 20px;}
    .cert .wrap li {  margin: 0 20px;}
}


@media (max-width:991px){
    .cert h3 { padding-left: 78px; font-size: 32px; }
    .cert h3:before { width: 60px;}
    .cert h3+p { font-size: 49px;}
    .cert .wrap { margin: 0 -10px;}
    .cert .wrap li {  margin: 0 10px;}
    .cert .wrap:before {left:-1%; }
    .cert .wrap:after {right: -1%;
}
@media(max-width:768px){
    .cert h3 {padding: 90px 0 70px; font-size: 38px; }
    .cert h3:before { top: 0; left: 50%; transform: translateX(-50%);  width: 88px;}
    .cert h3+p { display: none; }
    .cert .wrap { margin: 0 -5px;}
    .cert .wrap li { margin: 0 5px; }
}
@media(max-width:600px){
    .cert { padding: 140px 0 100px; }
    .cert h3 { padding: 85px 0 70px; font-size: 37px; line-height: 1.3;}
    .cert h3:before { width: 60px;}
    .cert .wrap {flex-wrap:wrap; padding: 0 10px; margin: 0 0 -20px;}
    .cert .wrap li { flex:inherit; width: calc(50% - 40px); margin: 0 20px 20px;}
    .cert .wrap:before, .cert .wrap:after { display: none;}
}
@media(max-width:576px){
    .cert { padding: 140px 0 100px; }
    .cert h3 { padding: 80px 0 50px; font-size: 28px; }
    .cert h3:before { width: 56px;}
    .cert .wrap {flex-wrap:wrap; padding:0; margin: 0 0 -10px;}
    .cert .wrap li { flex:inherit; width: calc(50% - 20px); margin: 0 10px 20px;}
}
@media(max-width:440px){
    .cert { padding: 140px 0 100px; }
    .cert h3 { padding: 80px 0 50px; font-size: 28px; }
    .cert h3:before { width: 50px;}
    .cert .wrap {flex-wrap:wrap; padding:0; margin: 0 -5px -20px;}
    .cert .wrap li { flex:inherit; width: calc(50% - 10px); margin: 0 5px 20px;}
}