@charset "UTF-8";
@font-face {
    font-family: 'KIMM_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'TheJamsil1Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'TheJamsil5Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/TheJamsil5Bold.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'NEXON Lv1 Gothic OTF';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@keyframes fadeInUp{
  from{
   top:80%;
   opacity: 0; 
  }
  to{
	top:50%;
	opacity: 1; 
  }
}
*{transition: all 1s; font-family: 'NEXON Lv1 Gothic OTF';}




::-webkit-scrollbar {
  width: 5px;  /* 세로축 스크롤바 길이 */
  height: 20px;  /* 가로축 스크롤바 길이 */
}

::-webkit-scrollbar-track-piece {
  background-color: #efefef;
}
::-webkit-scrollbar-thumb {
  background-color: gray;
}
::-webkit-scrollbar-button {
  background-color: darkblue;
  width: 20px;
  height: 10px;
}
::-webkit-scrollbar-button:start {
  background-color:gray; /* Top, Left 방향의 이동버튼 */
}
::-webkit-scrollbar-button:end {
  background-color: gray; /* Bottom, Right 방향의 이동버튼 */
}
::-webkit-scrollbar-button:vertical:increment {
}
::-webkit-scrollbar-button:vertical:decrement {
}
::-webkit-scrollbar-corner {
  background-color: violet; /* 우측 하단의 코너 부분 */
}


.titleBox{overflow:hidden;clear:both;box-sizing:border-box;margin-bottom:30px;}
.titleBox b{width:calc(50% - 75px);display:block;float:left;background:#666;height:1px;margin-top:30px;box-sizing:border-box;}
.titleBox p{font-size:25px;text-align:center;width:100%;float:left;font-weight:bolder;line-height:60px;color:#666;}
.comentBox{text-align:center;overflow:hidden;clear:both;box-sizing:border-box;margin-bottom:50px;}
.comentBox p{line-height:30px;font-size:15px;}


.fade-in {
  opacity: 0;
  transition: opacity 0.5s;
}

.fade-in.playing {
  opacity: 1;
}
body{height:auto;}
body.on{height:100%;overflow:hidden;}


/*메인비주얼:s*/
.visual{position:relative; overflow:hidden;}
.visual video{width:100vw;display: block;height: 56.25vw;}
.visual .visualBg{position:absolute;left:0px;right:0px;top:0px;bottom:0px;background:rgba(0,0,0,0.1);}
.visual .centerCopy{position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);opacity:1;animation: fadeInUp 3s;}
.visual .centerCopy p{color:#FFF;font-size:40px;text-align:center;font-weight:bolder;}
.visual .centerCopy .copy01{font-size:31px;}
.visual .centerCopy .visualSearchBox{position:relative;padding-top:30px;}
.visual .centerCopy .visualSearchBox input{font-size:20px;box-sizing:border-box;overflow:hidden;border:1px solid #ddd;width:100%;outline:none;line-height:50px;padding:0px 75px 0px 20px;background:rgba(255,255,255,0.5);color:#333;}
.visual .centerCopy .visualSearchBox i{position:absolute;right:0px;font-size:40px;cursor:pointer;line-height:50px;color:#333;}
.visual .moveBar{position:absolute;bottom:0px;height:5px;background:#00a0e9;width:0%;transition: width 8s ease-in-out;}

@media(max-width: 900px) {
.wrap{overflow:hidden;}
.visual{margin-top:80px;}
.visual .centerCopy .copy01{font-size:20px;}
.visual .centerCopy .copy02{font-size:25px;}
.visual .centerCopy .visualSearchBox input{line-height:35px;}
.visual .centerCopy .visualSearchBox i{line-height: 35px;font-size:30px;}
}

@media(max-width: 500px) {
.visual video{width:150%;height:auto;}
.visual .centerCopy .copy01{font-size:13px;}
.visual .centerCopy .copy02{font-size:15px;}
.visual .centerCopy .visualSearchBox input{line-height:35px;}
.visual .centerCopy .visualSearchBox i{line-height: 35px;font-size:20px;right:5px;}

}




/*메인비주얼:e*/

/*메인서비스 & 베너 :s*/
.mainService{background:#f0f0f0;padding:100px 0px;box-sizing:border-box;position:relative;    transform: translate(0, 20vh);opacity:0;}
.mainService.on{opacity:1;transform: translate(0, 0);}
.mainService .serviceBox{width:1280px;margin:0 auto;}
.mainService .serviceBox .con ul{overflow:hidden;clear:both;box-sizing:border-box;list-style:none;}
.mainService .serviceBox .con ul li{float:left;width:calc((100% - 10px) / 3);float:left;box-sizing:border-box;padding:10px;}
.mainService .serviceBox .con ul li .sBox{border:1px solid #ddd;text-align:center;background:#FFF;width:100%;height:200px;border-radius:10px;margin:0 auto;overflow:hidden;margin-bottom:20px;cursor:pointer;}
.mainService .serviceBox .con ul li .title{text-align:center;font-weight:bolder;}

.mainBanner {min-height:420px;overflow:hidden;position:relative;}
.mainBanner img{width:100%;position:fixed;top:0px;left:0px;right:0px;z-index:-1;}
.mainBanner .bannerBG{background:rgba(0,0,0,0.5);position:absolute;left:0px;right:0px;top:0px;bottom:0px;}
.mainBanner .bannerBG .bannerText{position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);color:#FFF;text-align:center;opacity:0;}
.mainBanner .bannerBG .bannerText.on{opacity:1;}
.mainBanner .bannerBG .bannerText p{line-height:30px;font-size:15px;font-weight:bolder;}
.mainBanner .bannerBG .bannerText p:nth-child(1){line-height:30px;font-size:20px;}
.mainmember{background:#fff;padding:100px 0px;box-sizing:border-box;position:relative;}
.mainmember .memberBox{max-width:1280px;margin:0 auto; transform: translate(0, 20vh);opacity:0;}
.mainmember .memberBox.on{opacity:1;transform: translate(0, 0);}

@media(max-width: 1280px) {
.mainService .serviceBox{padding:0px 20px;box-sizing:border-box;width:100%;}
.mainService .serviceBox .con ul li{width:calc(100% / 3);}
.mainService .serviceBox .con ul li .sBox{width:250px;height:250px;}
.mainService .serviceBox .con ul li .sBox img{width:100%;height:100%;}
}
@media(max-width: 700px) {

.mainService{padding-top:50px;}
.titleBox{margin-bottom:0px;}
.titleBox p{font-size:20px;}
.comentBox p{font-size:13px;}
.comentBox p br{display:block !important;}
.mainService .serviceBox .con ul li .title{font-size:13px;}
.mainService .serviceBox .con ul li .sBox{width:100%;height:150px;}
.mainService .serviceBox .con ul li{width:calc(100% / 2);}
.mainBanner img{position:unset;}
.mainBanner{min-height:auto;display: flex;    max-height: 350px;}

.mainBanner .bannerBG .bannerText p:nth-child(1){font-size:15px;}
.mainBanner .bannerBG .bannerText p{font-size:13px;}
}

@media (max-width: 370px){
.mainBanner .bannerBG .bannerText p{font-size:12px;}
}
/*메인서비스 & 베너 :e*/

/*메인 변호사:s*/
.mainmember .con{position:relative;}
.mainmember ul {overflow:hidden;clear:both;}
.mainmember ul li{list-style:none;float:left;width:calc(100% / 5);}
.mainmember ul li .sBox {overflow:hidden;position:relative;margin:0px 15px 10px 15px;padding:40px 30px;border-radius:5px;    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);transition: border 0.5s, background 0.5s;text-align:center;border:1px solid #ddd;cursor:pointer;}
.mainmember ul li .sBox img{width:100%;border-radius:5px; transition: transform 1s;} 
.mainmember ul li .sBox:hover{background:#f0f0f0;}
.mainmember ul li .sBox:hover img{ transform:scale(1.1);}
.mainmember ul li .sBox p{line-height:30px;text-align:left;font-size:13px;line-height:20px;}
.mainmember ul li .sBox p.title{margin-top:50px;line-height:30px;}
.mainmember ul li .sBox p font{font-weight:bolder;font-size:14px;}
.mainmember .slick-btnBox{width:1280px;margin:0 auto;display:block;position:absolute;top:50%;z-index:555;}
.mainmember .slick-btnBox button{ top:calc(50% + 30px); margin:-30px 0 0 0; width:60px; height:60px; display:block;font-size:40px;color:#000;line-height:40px;background:#35302c !important; transition:background 0.5s;}
.slick-prev:before{display:none;}
.slick-next:before{display:none;}
.slick-btnBox i{color:#FFF;}

@media(max-width: 1300px) {
.mainmember{padding-top:50px;}
.mainmember .memberBox{padding:0px 20px;box-sizing:border-box;width:100%;}
.mainmember .slick-btnBox{position:relative;max-width:100% !important;}
.mainmember .slick-btnBox button{top: -100px;width:40px;height:40px;font-size:25px;}
    
}
@media(max-width: 700px) {
.mainmember{padding-bottom:50px;}
}
/*메인 변호사:e*/

/*서브페이지 헤더:s*/
.subVisual{max-height:350px;overflow:hidden;position:relative;}
.subVisual div{}
.subVisual div img{width:100%;transform:scale(1) ;transition: transform 5s;}
.subVisual div img.on{width:100%;transform:scale(1.1) ;}
.subVisual div p{color:#FFF;position:absolute;top:calc(50% - 26px);text-align:center;display:block;font-size:40px;font-weight:bolder;width: 100%;}
.subVisual div span{color:#FFF;position:absolute;top:calc((50% - 26px) + 46px);text-align:center;display:block;font-size:20px;font-weight:bolder;width: 100%;}

.subCon{width:100%;}
.subConBar {border-bottom:1px solid #ddd;}
.subConBar .scbar {max-width:1280px;margin:0 auto;}
.subConBar .scbar ul{list-style:none;border-left:1px solid #ddd;overflow:hidden;clear:both;}
.subConBar .scbar ul li{line-height:60px;box-sizing:border-box;padding:0px 10px;float:left;border-right:1px solid #ddd;}
.subConBar .scbar ul li:nth-child(2){width:200px;text-align:center;}
.subConBar .scbar ul li a{cursor:pointer;font-weight:bolder;color:#333;}
.subConBar .scbar ul li i{font-size:30px;display:block;line-height: 60px;}

/*서브페이지 헤더:e*/

/*서브페이지 내용:s*/
.subConSec01{padding:100px 0px 30px 0px;text-align:center;}
.subConSec01 img.imgLogo{margin-bottom:30px;}
.subConSec01 img.bannerLogo{max-width:1200px;margin-top:30px;margin-bottom:30px;border-radius:30px;}
.subConSec01 > p{font-size:15px;text-align:center;display:block;width:100%;box-sizing:border-box;line-height:25px;color:#333;}
.subConSec01 p b{font-size:18px;line-height:40px;}
.subConSec01 .cellBox{max-width:1200px;margin:0 auto;}
.subConSec01 .cellBox ul{overflow:hidden;clear:both;list-style:none;}
.subConSec01 .cellBox ul li{float:left;box-sizing:border-box;padding:10px;width:calc(100% / 2);}
.subConSec01 .cellBox ul li div{border:1px solid #ddd;border-radius:10px;box-sizing:border-box;padding:10px;background:#f0f0f0;box-shadow: 0 1px 5px 0 rgb(0 0 0 / 20%);}
.subConSec01 .cellBox ul li div p{padding:10px;color:#333;}
.subConSec01 .cellBox ul li div p:first-child{font-size:15px;font-weight:bolder;}
.subConSec01 .cellBox ul li div p:last-child{font-size:13px;line-height:25px;}

.subConSec02{background:#efefef;}
.subConSec02 p{font-size:15px;text-align:center;display:block;width:100%;padding:100px 0px;box-sizing:border-box;line-height:25px;color:#333;}
.subConSec02 p b{font-size:18px;line-height:40px;}


@media (max-width: 900px){
.subVisual div p{font-size:25px;top:calc(60% - 26px);}
.subVisual div span{font-size:15px;top:calc((55% - 26px) + 46px)}
.subConBar .scbar ul li{line-height:40px !important;}
.subConBar .scbar ul li:nth-child(2){width:100px;}
.subConBar .scbar ul li i{line-height:40px !important;}
.subConSec01{padding-top:50px !important;}
.subConSec01 img.bannerLogo{width:calc(100% - 20px);border-radius: 10px !important;}
.subConSec01 .cellBox ul li{width:100% !important;}
.subConBar .scbar ul li a{font-size:13px;}

}

.searchBox{background:#fafafa;box-sizing:border-box;padding:60px 0px;max-width:1200px;margin:50px auto;border:1px solid #ddd;}
.searchBox > div{max-width:380px;margin:0 auto;overflow:hidden;clear:both;}
.searchBox .searchCopy{margin-top:50px;color:#333;font-size:13px;}
.searchBox .searchInput{width:300px;padding:5px;line-height:30px;outline:none;border-radius:5px 0px 0px 5px;border:1px solid #ddd;box-sizing:border-box;float:left;border-right: 0px;}
.searchBox .searchBtns{display:block;width:70px;background:#142355;color:#FFF;text-align:center;float:left;padding:5px;line-height:32px;border-radius:0px 5px 5px 0px;cursor:pointer;}

@media (max-width: 900px){
	.searchBox{width:calc(100% - 20px) !important;padding: 20px 0px;margin-bottom:20px;}
	.searchBox .searchCopy{margin-top:10px;}
	.subConSecMember .subMemberBox > ul li{width:calc(100% / 2) !important;}
}

/* 서비스:s */
.sTebs{max-width:1200px;margin:0px auto;margin-bottom:50px;}
.sTebs ul{overflow:hidden;clear:both;list-style:none;}
.sTebs ul li{float:left;box-sizing:border-box;width:calc(100% / 6);padding:10px;box-sizing:border-box;}
.sTebs ul li p{font-size:13px;font-weight:bolder;border:1px solid #ddd;line-height:30px;box-sizing:border-box;padding:10px 0px;line-height:30px;cursor:pointer;border-radius:5px;background:#f0f0f0;}
.sTebs ul li p.on{background:#142355;color:#FFF;}


.banenr img{max-width:1200px;margin:50px auto;display:block;border-radius:10px;}

/*구성원:s*/
.subConSecMember{background:#FFF;}
.subConSecMember .subMemberBox{max-width:1200px;margin:0 auto;}
.subConSecMember .subMemberBox > p{margin-left:10px;font-size:25px;font-weight:bolder;margin-bottom:20px;color:#333;}
.subConSecMember .subMemberBox > ul{overflow:hidden;clear:both;box-sizing:border-box;list-style:none;}
.subConSecMember .subMemberBox > ul li{float:left;width:calc(calc(100% ) / 4);box-sizing:border-box;padding:10px;}
.subConSecMember .subMemberBox > ul li a{overflow:hidden;cursor:pointer;}
.subConSecMember .subMemberBox > ul li a > div{overflow:hidden;display: flex;box-sizing:border-box;}
.subConSecMember .subMemberBox > ul li a img{width:100%;display:block;border-radius:5px;}
.subConSecMember .subMemberBox > ul li a img:hover{width:100%;transform:scale(1.2) ;transition: all ease 2s;}
.subConSecMember .subMemberBox > ul li a .name{font-size:18px;font-weight:bolder;color:#333;margin-bottom:5px;margin-top:20px;}
.subConSecMember .subMemberBox > ul li a .level{font-size:14px;color:#666;margin-bottom:10px;}
.subConSecMember .subMemberBox > ul li a .tel{font-size:13px;color:#222;margin-bottom:5px;}
.subConSecMember .subMemberBox > ul li a .email{font-size:13px;color:#222;}
/*구성원:e*/

@media (max-width: 900px){
.sTebs ul li{width:calc(100% / 3);}
.sTebs ul li p{font-size:13px;    line-height: 20px;}
.banenr img{width:calc(100% - 20px);}
}


.sec01 > div{max-width:1200px;margin:0 auto;margin-bottom:50px;}
.sec01 > div > p{text-align:left;font-weight:bolder;font-size:20px;margin-bottom:10px;box-sizing:border-box;padding:10px;}
.sec01 > div > ul{overflow:hidden;clear:both;box-sizing:border-box;}
.sec01 > div > ul li{float:left;width:calc(100% / 4);list-style:none;padding:10px;box-sizing:border-box;}
.sec01 > div > ul li div{border:1px solid #ddd;line-height:100px;box-sizing:border-box;padding:10px;text-align:center;background:#f0f0f0;border-radius:10px;font-size:13px;font-weight:bolder;}
@media (max-width: 900px){
.sec01 > div > ul li{width:calc(100% / 2);}
}
/* 서비스:e */

/* 오시는길:s */
.banenr .root_daum_roughmap{max-width:calc(1200px - 20px) !important;margin:50px auto;display:block;border-radius:10px;margin-top:0px;    margin-bottom: 100px;}
.root_daum_roughmap .wrap_controllers{display:none;}
@media (max-width: 900px){
	.banenr .root_daum_roughmap{max-width:calc(100% - 20px) !important;}
}
/* 오시는길:e*/

/*문의하기:s*/
.maincontact{position:relative;max-height:800px;overflow:hidden;}
.maincontact img{display:block;}
.maincontact .contactBox {position:absolute;top:0px;left:0px;right:0px;bottom:0px;}
.maincontact .contactBox .con{margin-bottom:64px;}
.maincontact .contactBox .bgBox{position:absolute;top:0px;left:0px;right:0px;bottom:0px;overflow:hidden;}
.maincontact .bakBg{position:absolute;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0,0.5);}
.maincontact .contactBox .titleBox {padding-top:100px;}
.maincontact .contactBox .titleBox p{text-align:center;color:#FFF;width:100%;}
.maincontact .contactBox .comentBox{color:#FFF;}
.maincontact .contactBox .contactformBox{max-width:600px;margin:0 auto;}
.maincontact .contactBox .contactformBox .line{margin-bottom:20px;overflow:hidden;clear:both;}

.maincontact .contactBox .contactformBox .line p{color:#FFF;margin-bottom:5px;}
.maincontact .contactBox .contactformBox .line i{color:#F00;}
.maincontact .contactBox .contactformBox .line .chk{float:left;width:20px;height:20px;outline:none;}
.maincontact .contactBox .contactformBox .line div{color:#FFF;margin-bottom:5px;line-height:23px;font-size:13px;}
.maincontact .contactBox .contactformBox .line input{width:100%;box-sizing:border-box;padding:10px;outline:none;float:left;border-radius:5px;border: 0px;height:50px;background: rgba(255,255,255,0.5);}
.maincontact .contactBox .contactformBox .line textarea{width:100%;box-sizing:border-box;padding:10px;outline:none;float:left;border-radius:5px;border: 0px;height:100px;background: rgba(255,255,255,0.5);color:#FFF;    line-height: 20px;}
.maincontact .contactBox .contactformBox .line div a{color:#FFF;margin-left:5px;cursor:pointer;}
.maincontact .contactBox .contactformBox .line a.btns{width:100%;background:#142355;color:#FFF;display:block;text-align:center;line-height:50px;font-size:13px;cursor:pointer;}
@media (max-width: 700px){
.maincontact {max-height:650px;}
.maincontact .contactBox .titleBox{padding-top:50px;}
.maincontact .contactBox .con{box-sizing:border-box;padding:0px 20px;}
.maincontact .contactBox .contactformBox .line p{font-size:13px;}
.maincontact .contactBox .contactformBox .line input{height:auto;}
}
/*문의하기:e*/
/*서브페이지 내용:e*/

/*페이지:s*/
.pageing{overflow:hidden;clear:both;box-sizing:border-box;display:flex;    justify-content: center;margin-bottom:100px;}
.pageing li{list-style:none;}
.pageing li a{border:1px solid #ddd;height:40px;display:block;line-height:45px;width:40px;text-align:center;font-size:13px;cursor:pointer;border-left:0px;color:#666;}
.pageing li:first-child a{border-left:1px solid #ddd;}
.pageing li a.on{background:#142355;color:#FFF;}
/*페이지:e*/