@charset "utf-8";

/* 서브페이지 기본 세팅 s */
.contents * {line-height:140%;}

ol.basic { margin-top:20px;}
ol.basic > li {list-style-type:decimal; margin-left:17px;  border-bottom: 1px dashed #ddd; padding:7px 0 7px 10px;}
ol.basic > li:last-child {margin-bottom: 8px;}
ol.basic > li > ul { margin-top:5px; color:#000; margin-bottom:5px;}
ol.basic > li > ul li {  padding:0 0 0 10px;}
.finish { margin-top:70px; margin-bottom:120px;}


ul.basic {font-family: 'Noto Sans KR', sans-serif;}
ul.basic li{padding-left: 19px; position: relative; margin-bottom: 5px; line-height: 150%; word-break: keep-all;}
ul.basic li:last-child {margin-bottom: 0;}
ul.basic li:before {width: 9px; height: 3px; position: absolute; background-color: #4f4c55; content: ""; top: 11px; left: 0;}

h3, .h3 { word-break: keep-all; margin-top:50px; color:#4f4c55; font-size:30px; font-weight: 300; vertical-align: middle; letter-spacing: -1px; position: relative; padding-left: 34px; line-height: 140%;}
h3::before, .h3::before { content:''; display: inline-block; width:25px; height:25px;  background: url(/resources/img/sub/sub_ico.png)no-repeat 0px -76px; vertical-align: middle; position: absolute; left:0; top:8px;}

h4, .h4 { word-break: keep-all; margin-top:30px;  font-size:25px; border-bottom: 1px solid #bc8f00; padding-bottom: 3px; display: inline-block; font-weight: 300; line-height: 140%; color: #bc8f00; position: relative;}

.c0 { margin-top: 0;}
.h3box { position: relative; margin-top:55px;}
.h3box h3, .h3box h4 { display: inline-block; margin-top: 0;}
.h3box::after {clear: both;  content: ''; display: block;}
p.basic { margin-top: 10px;}
p.basic.c0 {margin-top: 0;}


select { border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ }
button {/* width: 100%; height: 100%; */ background: none; border: none; cursor: pointer;}

table.basic thead th {background-color: #ececec;}
table.basic tbody th {background-color: #f6f6f6;}
table.basic tbody th.th {background-color: #ececec;}
table.basic tbody td.th {background-color: #f6f6f6;}

/* flicking */
.f_wrapper { border-radius:10px; width:100%; margin-top: 40px;}
.f_wrapper .f_wrapper_inner {overflow:auto; -webkit-overflow-scrolling: touch; overflow-y: hidden;}
.f_wrapper .touch { display:none; background:url("/resources/img/common/ico_flicking.png") left 3px top -2px no-repeat; height:27px; background-size:contain; padding:0 0 0 36px; line-height:27px; margin-bottom:10px;}
.f_scroller {display:block; height:100%; padding:0; width:100%; text-align:left;}
.f_wrapper .list_table,.f_wrapper .colum_table { margin-top:20px;}

.line_dot { border-bottom: 1px dotted #ddd; display: block; margin: 20px 0 10px;}

.c_box { word-break: keep-all; margin-top:20px; width:100%; height: 100%; padding:20px 30px; box-sizing: border-box; border:3px solid #ddd; position: relative;} 


/* 서브페이지 기본 세팅 e */
.contents {padding: 100px 0 170px;}
.part {margin-top: 20px;}
.contents .txt {font-size: 16px; color: #333;}
.box {border: 1px solid #ddd; width: 100%; padding: 25px; box-sizing: border-box;}
.serif {font-family: 'Noto Serif KR';}
/* contents s */

/*인사말 s */
.greet .img_wrap, .greet .img_wrap img {width: 100%;}
.greet .sec {margin-top: 70px;}
.greet .inner .part:first-child {margin-top: 0;}
.greet .txt { line-height: 170%; margin-top: 10px;}
.greet .txt:first-child {margin-top: 0;}
.greet .part .tit {font-weight: 500;color: #bc8f00;}
.greet .part .txt {margin-top: 4px;}
.greet .sec1 {margin-top: 0; position: relative; padding-top: 56px;}
.greet .sec1 .txt_box {width: 425px; height: 300px; background: #bc8f00; color: #fff; box-sizing: border-box; top: 0; position: absolute; left: 76px; padding: 30px 45px;transition: all .2s ease-in-out;}
.greet .sec1 .txt_box .txt1 {font-size: 15px; padding-bottom: 90px;}
.greet .sec1 .txt_box .txt2 {font-size: 30px; transition: all .2s ease-in-out;}
.greet .sec2 .gr_tit {font-size: 30px; color: #4f4c55; font-weight: 500;}
.greet .sec3 {background: url("/resources/img/sub/sub_greet02.jpg") center/cover no-repeat; background-attachment: fixed; width: 100%; height: 200px; position: relative;}
.greet .sec3 .bg_txt {position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 25px;width: 100%; text-align: center}
.greet .gr_name {margin-top: 50px; text-align: right; width: 100%;}
/*인사말 e */
/*오시는길 s */
.loca .map {position: relative;}
.loca .map iframe {width: 100%; height: 450px;}
.map .other {position: absolute; width: 100%; text-align: right; right: 65px; bottom: 25px;}
.map .other a {display: inline-block; width: 80px; height: 80px; background-color: #bc8f00; transition: all .3s ease-in-out; margin: 0 4px; padding-top: 10px; box-sizing: border-box;}
.map .other a:hover {opacity: .8;}
.map .other a span {display: block; color: #fff;}
.map .other a span.ico {width: 28px; height: 39px; background:url("/resources/img/sub/sub_ico.png")no-repeat; background-position: 0px -131px; margin: 0 auto;}
.map .other a span.txt {margin-top: 5px; text-align: center; font-size: 12px;}
.map .other a.naver .ico {background-position: 0 -186px;}
.loca .cont_wrap {margin-top: 50px; border-top: 5px solid #bc8f00; border-bottom: 3px solid #ddd;}
.loca .cont_wrap .cont_box {display: inline-block; width: 50%;  float: left; padding: 0 30px 0 0; box-sizing: border-box;}
.loca .cont_wrap .cont_box .con {border-bottom: 1px dashed #ddd;  padding: 30px 0;}
.loca .cont_wrap .cont_box .tit {font-size: 20px; font-weight: 600;  color: #4f4c55; display: inline-block; width: 115px;}
.loca .cont_wrap .cont_box .txt {display: inline-block; width: 80%;margin-top: 0;}

/*오시는길 e */
/*업무분야 s */
.work .txt { line-height: 170%; margin-top: 10px;}
.work .txt:first-child {margin-top: 0;}
.work .line_dot {margin: 50px 0 0;}
.work .img_wrap {overflow: hidden; width: 100%; height: 300px; position: relative;}
/* .work .img_wrap img {width: 100%;position: absolute;transform: translateY(-50%); top: 50%;} */
.work.work01 .img_wrap { background: url("/resources/img/sub/sub_work01.jpg?ver=200914") no-repeat center/cover;}
.work.work02 .img_wrap { background: url("/resources/img/sub/sub_work02.jpg?ver=200914") no-repeat center/cover;}
.work.work03 .img_wrap { background: url("/resources/img/sub/sub_work03.jpg?ver=200914") no-repeat center/cover;}
.work.work04 .img_wrap { background: url("/resources/img/sub/sub_work04.jpg?ver=200914") no-repeat center/cover;}
.work.work05 .img_wrap { background: url("/resources/img/sub/sub_work05.jpg?ver=200914") no-repeat center/cover;}
.work.work06 .img_wrap { background: url("/resources/img/sub/sub_work06.jpg?ver=200914") no-repeat center/cover;}
.work.work07 .img_wrap { background: url("/resources/img/sub/sub_work07.jpg?ver=200914") no-repeat center/cover;}
.work.work08 .img_wrap { background: url("/resources/img/sub/sub_work08.jpg?ver=200914") no-repeat center/cover;}
.work.work09 .img_wrap { background: url("/resources/img/sub/sub_work09.jpg?ver=200914") no-repeat center/cover;}
.work.work10 .img_wrap { background: url("/resources/img/sub/sub_work10.jpg?ver=200914") no-repeat center/cover;}
.work .img_wrap h3 { display: inline-block; background: rgba(188, 143, 0, .8);color: #fff; margin-top: 0; width: 230px;padding: 50px 20px; box-sizing:border-box; border-radius: 20px 0 20px 0; text-align: center; margin: 30px 0 0 30px; border:4px solid #fff;}
.work .img_wrap h3::before {display: none; }
.work .prt_tit {font-weight: 600; color: #bc8f00;}
.work10 .box {padding: 25px 87px;}
.work .ul3 {display: inline-block; width: 23.33%; float: left; margin: 0 5%; box-sizing: border-box;}
.work .ul3 li {margin-bottom: 15px;}
/*업무분야 e */
/*구성원 s */
.mem .prf_wrap {width: 50%; display: inline-block; float: left; box-sizing: border-box; padding: 0 15px 30px 0;}
.mem .prf_wrap:nth-child(2n) {padding: 0 0 30px 15px;}
.mem .prf_wrap .prf_box {display: inline-block; width: 100%; float: left; height: 210px;position: relative;}
.mem .prf_wrap .prf_box .img {width: 180px; height: 210px; overflow: hidden; position: relative;  margin-right: 10px; display: inline-block; float: left;}
.mem .prf_wrap .prf_box .img img {width: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.mem .prf_wrap .prf_box .info_box {display: inline-block; float: left; border: 2px solid #ddd; width: calc(100% - 190px); box-sizing: border-box; height: 100%; padding: 30px;}
.mem .prf_wrap .prf_box .info_box .name_box {margin-bottom: 12px;}
.mem .prf_wrap .prf_box .info_box .name { font-size: 20px; font-weight: 600; color: #4f4c55; display: inline-block; float: left;  vertical-align: top;}
.mem .prf_wrap .prf_box .info_box .dt { padding-left: 10px; font-size: 13px; vertical-align: sub; color: #bc8f00;}
.mem .prf_wrap .prf_box .info_box .if {padding-top: 10px;}
.mem .prf_wrap .prf_box .info_box .if .tit {    width: 70px; vertical-align: top; float: left; color: #999; font-weight: 400;position: relative;padding-left: 10px; box-sizing: border-box;}
.mem .prf_wrap .prf_box .info_box .if .tit::before {content: "";  position: absolute; height: 13px;width: 2px; background: #999;left: 0;top: 50%; transform: translateY(-50%);}
.mem .prf_wrap .prf_box .info_box .if .txt {display: inline-block;  width: calc(100% - 70px); margin-top: 0; line-height: 140%; color:#555; word-break: break-all;}
.mem .prf_wrap .prf_box .more {position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; background: #bc8f00; transition: all .2s ease-in-out;}
.mem .prf_wrap .prf_box .more:hover {opacity: .7;}
.mem .prf_wrap .prf_box .more span {width: 15px; height: 2px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mem .prf_wrap .prf_box .more span:first-child {transform: translate(-50%, -50%) rotate(90deg);}

.mem .prf_popup {display: none;}
.mem .prf_popup {position: fixed; width: 100%;height: 100%;top: 0;  left: 0; z-index: 100;}
.mem .prf_popup .bg { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);}
.mem .prf_popup .pop_wrap {max-height: 70vh;top: 45%;height: 100%;transform: translateX(-50%) translateY(-50%);left: 50%;position: absolute;background: #fff;width: 900px;box-sizing: border-box;border: 3px solid #bc8f00;overflow: hidden;}
.mem .prf_popup .pop_wrap .cont {overflow-y: auto;padding: 40px;box-sizing: border-box;height: 100%;padding: 40px;}
.mem .prf_popup .pop_wrap .close {width: 50px; height: 50px; background: #bc8f00; display: inline-block;float: right;text-indent: -99999px; position: absolute;transition: all .2s ease-in-out; top: 0; right: 0; z-index: 2;}
.mem .prf_popup .pop_wrap .close:hover {opacity: .7;}
.mem .prf_popup .pop_wrap .close span {position: absolute; height: 17px; width: 2px; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.mem .prf_popup .pop_wrap .close span:first-child {transform: translate(-50%, -50%) rotate(-45deg);}


.mem .prf_popup .sec1 {display: inline-block; width: 30%; float: left; height: 280px;position: relative;}
.mem .prf_popup .sec1 .img {width: 100%; height: 100%; overflow: hidden; position: relative; display: inline-block; float: left; margin-right: 10px;}
.mem .prf_popup .sec1 .img img {width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.mem .prf_popup .sec2 {display: inline-block; float: left; width: 70%; box-sizing: border-box; padding: 0 30px;}
.mem .prf_popup .sec2 .name_box {margin-bottom: 12px;}
.mem .prf_popup .sec2 .name { font-size: 20px; font-weight: 600; color: #4f4c55; display: inline-block; float: left;  vertical-align: top;}
.mem .prf_popup .sec2 .dt { padding-left: 10px; font-size: 13px; vertical-align: sub; color: #bc8f00;}
.mem .prf_popup .sec2 .if {padding-top: 10px;}
.mem .prf_popup .sec2 .if .tit {width: 110px; vertical-align: top; float: left; color: #999; font-weight: 400;position: relative;padding-left: 10px; box-sizing: border-box;}
.mem .prf_popup .sec2 .if .tit::before {content: "";  position: absolute; height: 13px;width: 2px; background: #999;left: 0;top: 50%; transform: translateY(-50%);}
.mem .prf_popup .sec2 .if .txt {display: inline-block;  width: calc(100% - 110px); margin-top: 0; line-height: 140%; color:#555;}

.mem .prf_popup .sec3 {float: left;width: 100%;margin-top: 30px;}
/*구성원 e */

/*법률연구소 s */
.lab .con {width: 32%; height: 270px; display: inline-block; float: left; background: url(/resources/img/sub/lab1.jpg) center/cover no-repeat; margin-left: 2%; border-radius: 10px;position: relative;}
.lab .con1 {margin-left: 0;}
.lab .con2 {background-image: url(/resources/img/sub/lab2.jpg);}
.lab .con3 {background-image: url(/resources/img/sub/lab3.jpg);}
.lab .con_wrap .con .txt {color: #fff; min-width: 160px; display: inline-block; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);font-size: 18px;font-weight: 500;}
.lab .con_wrap .con .txt::before {content: ""; width: 200px; position: absolute; height: 200px; background: #4f4c55; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;opacity: .8;transition: all .2s ease-in-out;}
.lab .con_wrap .con .btn {position: absolute; left: 56%; bottom: 50px; color: #fff;transition: all .2s ease-in-out; font-size: 14px;}
.lab .con_wrap .con .btn::before {content: "";position: absolute;width: 6px; height: 10px; top: 50%; right: 0; transform: translateY(-50%); opacity: 0; transition: all .2s ease-in-out;background: url(/resources/img/sub/sub_ico.png) 0 -256px no-repeat;}
.lab .con_wrap .con:hover .txt::before {background: #bc8f00;width: 240px;}
.lab .con_wrap .con:hover .btn {left: 54%;}
.lab .con_wrap .con:hover .btn::before {opacity: 1; right: -10px;}
/*법률연구소 e */

/* contents e */
@media screen and (max-width:1500px){
    /*오시는길*/
    .map .other {text-align: center; right: 0;}
}
@media screen and (max-width:1200px){
    /*구성원*/
    .mem .prf_wrap .prf_box {height: 190px;}
    .mem .prf_wrap .prf_box .img {height: 190px; width: 130px;}
    .mem .prf_wrap .prf_box .img img {width: 120%;}
    .mem .prf_wrap .prf_box .info_box {padding: 15px; width: calc(100% - 140px);}
    .mem .prf_wrap .prf_box .info_box .if {padding-top: 6px;}
    /*업무분야*/
    .work10 .box {padding: 25px;}
    /*법률연구소*/
    .lab .con_wrap .con .txt {font-size: 16px;}
}
@media screen and (max-width:1024px){
    /*업무분야*/
    .work .img_wrap {height: 300px;}
    .work .ul3 {width: 33.33%; margin: 0;}
    /*구성원*/
    .mem .prf_wrap {width: 100%; padding: 0 0 30px 0;}
    .mem .prf_wrap:nth-child(2n) {padding: 0 0 30px 0;}
    .mem .prf_wrap .prf_box {height: 210px;}
    .mem .prf_wrap .prf_box .img {height: 100%;  width: 20%;}
    .mem .prf_wrap .prf_box .info_box {width: calc(80% - 10px);}
    
    .mem .prf_popup .pop_wrap { width: 85%;}
    .mem .prf_popup .cont {padding: 25px;} 
    .mem .prf_popup .pop_wrap .close {width: 40px; height: 40px;}
    .mem .prf_popup .sec1 .img img {width: 120%;}
    .mem .prf_popup .sec1 {height: 235px;}
    /*오시는길*/
    .loca .cont_wrap .cont_box {width: 100%; padding: 0;}
    .loca .cont_wrap .cont_box .con {padding: 20px 0;}
    /*인사말*/
    .greet .sec1 {padding-top: 43px;}
    .greet .sec1 .txt_box {width: 365px; left: 45px; height: 228px;}
    .greet .sec1 .txt_box .txt1 {padding-bottom: 40px;}
    .greet .sec1 .txt_box .txt2 {font-size: 25px;}
    .greet .img_wrap {height: 350px; overflow: hidden;}
    .greet .img_wrap img {width: auto; height: 100%;}
}

@media screen and (max-width:768px){
    .contents { padding: 50px 0 30px}
    .box {padding: 18px;}
    ul.basic li {padding-left: 14px;}
    ul.basic li:before {width: 7px; height: 2px;}
    /*업무분야*/
    .work .img_wrap {height: 300px;}
    .work10 .box {padding: 18px;}
     .work .ul3 {width: 100%; margin-top: 15px;}
    .work .ul3:first-child {margin-top: 0;}
    /*구성원*/
    .mem .prf_wrap .prf_box .img {width: 30%;}
    .mem .prf_wrap .prf_box .info_box {width: calc(70% - 10px);}
    
    .mem .prf_popup .sec1 {width: 100%; height: 330px; margin-bottom: 20px;}
    .mem .prf_popup .sec1 .img {width: 280px; float: none; display: block; margin: 0 auto;}
    .mem .prf_popup .sec2 {width: 100%;}
    .mem .prf_popup .sec2 .name_box {width: 100%;text-align: center;}
    .mem .prf_popup .sec2 .name{float: none;}
    /*오시는길*/
    .loca .cont_wrap .cont_box .tit {width: 115px;}
    .loca .cont_wrap .cont_box .txt {width: 74%;}
    /*인사말*/
    .greet .sec {margin-top: 50px;}
    .greet .sec1 {padding-top: 0; margin-top: 0;}
    .greet .sec1 .txt_box {padding: 30px; width: 100%; position: relative; left: auto; top: auto; height: auto;}
    .greet .sec1 .txt_box .txt1 {padding-bottom: 20px;}
    .greet .sec1 .txt_box .txt2 {font-size: 24px;}
    .greet .img_wrap {height: 200px;}
    .greet .img_wrap img {height: 110%;}
    .greet .sec2 .gr_tit {font-size: 24px;}
    .greet .sec3 {height: 150px; background-attachment: initial;}
    .greet .sec3 .bg_txt {font-size: 20px;}
    /*법률연구소*/
    .lab .con {width: 100%; margin: 20px 0 0;}
    .lab .con:first-child {margin-top: 0;}
    .lab .con_wrap .con .btn {transform: translateX(-50%);
    left: 50%; bottom:80px;}
    .lab .con_wrap .con:hover .btn {left: 48.5%;}
    .lab .con_wrap .con:hover .btn::before {right: -15px;}
}

@media screen and (max-width:500px){
    /*업무분야*/
    .work .img_wrap {height: 200px;}
    .work .img_wrap img {height: 100%; width: auto;}
    /*구성원*/
    .mem .prf_wrap .prf_box{height: 160px;}
    .mem .prf_wrap .prf_box .img {margin-right: 0;}
    .mem .prf_wrap .prf_box .img img {width: 140%;}
    .mem .prf_wrap .prf_box .info_box {padding: 14px;
    width: 70%;}
    .mem .prf_wrap .prf_box .info_box .name_box {margin-bottom: 8px;}
    .mem .prf_wrap .prf_box .info_box .name {font-size: 16px;}
    .mem .prf_wrap .prf_box .info_box .dt {font-size: 12px;
    vertical-align: middle;}
    .mem .prf_wrap .prf_box .info_box .if .tit {font-size: 14px;
    padding-left: 7px;}
    .mem .prf_wrap .prf_box .info_box .if {padding-top: 0;}
    .mem .prf_wrap .prf_box .info_box .if .txt {font-size: 14px;}
    .mem .prf_wrap .prf_box .more {width: 40px; height: 40px;}
    
    .mem .prf_popup .pop_wrap {max-height: 80vh; width: 95%;}
    .mem .prf_popup .pop_wrap .cont{padding: 25px 10px;}
    .mem .prf_popup .sec2 {padding: 0;}
    /*오시는길*/
    .loca .cont_wrap .cont_box .con {padding: 15px 0;}
    .loca .cont_wrap .cont_box .tit, .loca .cont_wrap .cont_box .txt {width: 100%;}
    .loca .cont_wrap .cont_box .txt {padding-top: 5px;}
    /*인사말*/
    .greet .img_wrap {height: 100px;}
    .greet .img_wrap img {height: auto; width: 100%;}
}