/** 공통 CSS **/
div.container {width: 100%; max-width: 1300px; margin:0 auto; box-sizing: border-box; padding-bottom:2rem; ;}
h3 {font-size: 2.6rem;  display: inline-block;    margin-bottom: 4rem; font-family: 'Pretendard'; font-weight: 700; letter-spacing: -2px; ;}
h3:after {width: 100px; height:4px; display: block; content:'' ;background:#4f4f4f; margin: 20px auto;   }
input[type=text], input[type=password] {width: 100%; padding: 0.5rem; font-size: 1rem; box-sizing: border-box; ;}
textarea.textarea {width: 100%; padding: 0.5rem; font-size: 1rem; box-sizing: border-box;  resize: none;;}
h3.white {color:#fff; }
.box_img img {width: 100%; ;}
p.txt.bar {padding-left: 20px; position: relative; }
p.txt.bar:before {content: '-'; position: absolute; padding-left: -20px; left: 0;   }
.mb0 {margin-bottom: 0 !important; ;}
.row-layout {display: flex; gap : 4rem;}
.con_wrap p {color:#555; line-height: 1.5rem; ;} 
.box_gray {padding:5rem; background:#f9f9f9; border:1px solid #eeeeee ; margin:0 auto;   }
.flex {display: flex; justify-content: center

    ;}
div.btn_wrap {display: flex; justify-content: center;  ; }
button.basic {padding: 1rem 2rem; border-radius: 5px; background:#555; color:#fff; font-size: 1rem; cursor: pointer;  ; ;}
button.h40btn {margin-left:0.5rem; height:40px; line-height:40px; background:#555;border-radius: 5px;  color:#fff; font-size: 1rem; cursor: pointer; padding: 0 1rem;  }


/**푸터**/
footer {background:#000; color:#fff; padding: 2.5rem 0 ;  }
footer div.contents {display: flex; gap: 6.875rem ;}
footer div.contents p {line-height: 160%; ;}

/**메인 롤링 배너**/
section.main_visual_wrap {height: 50rem;   }
div.main_visual {height: 50rem;
    color: #fff;
    text-align: center;
    word-break: keep-all;
    background-size: contain;
    opacity: 0;
    transition: transform 2s ease, opacity 2s ease;
    transform: scale(1); } 
div.main_visual div.txt_box {letter-spacing: -2px; font-family: 'GmarketSans';}
div.main_visual div.txt_box h2 {font-size: 4.375rem; line-height:1.2; font-weight: bold; padding-top: 19rem; letter-spacing: -0.5px; }
div.main_visual div.txt_box p {font-size: 3.125rem; padding-top: 4.375rem; }

div.main_visual.visual_01 {background: url(../img/main_visual01.png) no-repeat center top; }
div.main_visual.visual_02 {background: url(../img/main_visual02.jpg) no-repeat center top;}
div.main_visual.on {
    transform: scale(1.2);
    opacity: 1;
}


/**대표변호사 소개**/
section.introduce {padding: 5rem 0 0 0; text-align: center; position: relative;} 
section.introduce:after {width: 100%; height: 290px; background:#202020; content:''; display: block; position: absolute; bottom: 0; z-index: -99; ; }
section.introduce div.container {padding-bottom: 0; }
section.introduce div.container div.wrap {display: flex; justify-content: center; gap:5rem; align-items: flex-end}
section.introduce div.container div.wrap div.box_txt {text-align: left; margin-bottom: 3.125rem;;}
section.introduce div.container div.wrap div.box_txt strong {font-size: 2rem; color:#d3a73e; font-weight: bold; text-decoration: underline ;margin-bottom: 3.125rem; display: block; line-height: 3rem; font-family: 'pretendard'; font-weight: 900; ;; ;}
section.introduce div.container div.wrap div.box_txt p.name {font-size: 1.375rem; color:#0068b7 ; margin-bottom: 2.875rem;}
section.introduce div.container div.wrap div.box_txt div.txt_wrap {display: flex;  gap:3.125rem; color:#fff; }
section.introduce div.container div.wrap div.box_txt div.txt_wrap div.left p,
section.introduce div.container div.wrap div.box_txt div.txt_wrap div.right p
 {line-height: 1.75rem; ; }

/**무료상담문의**/
section.inquiry {padding: 5rem 0 0 0; background: url(../img/inquiry_bg.png) no-repeat ;background-size:cover ; text-align: center;  } 
section.inquiry div.form {background: rgba(0, 0, 0, 0.6); padding: 3.125rem 6.25rem; box-sizing: border-box;  display: flex; gap: 6.25rem; text-align: left; color:#fff; font-size: 1.25rem; font-weight: 100; }
section.inquiry div.form div.left,
section.inquiry div.form div.right {width: calc(50% - 3.125rem)} 
section.inquiry div.form div.left div.agreement {font-size: 1rem; height: 350px; background:#fff; overflow-y: scroll; padding: 2rem; box-sizing: border-box; color:#666 ;} 
section.inquiry div.form div.right > div {margin-bottom: 1rem; } 
section.inquiry div.form div.right > div > p {margin-bottom:1rem; } 
section.inquiry div.form div.right a {width: 100%; background: #f4b800; text-align: center; color:#fff; display: block; padding: 1.5rem 0;  } 
section.inquiry div.form div.right button {width: 100%; font-size: 15pt; background: #f4b800; text-align: center; color:#fff; display: block; padding: 1.5rem 0;  }
section.inquiry div.contact_info {background:#0068b7; border-radius: 50px; color:#fff; transform: translateY(45px);  }
section.inquiry div.contact_info div.info {display: flex; align-items: center ; overflow: hidden;   }  
section.inquiry div.contact_info div.item {display: flex; align-items: center; width: calc(100% / 4) ; padding:20px 0 20px 80px; box-sizing: border-box;   }  
section.inquiry div.contact_info div.item div.icon {font-size: 50px; margin-right: 30px; }
section.inquiry div.contact_info div.item div.icon i {display: block; }
section.inquiry div.contact_info div.item div.txt {text-align: left; } 
section.inquiry div.contact_info div.item div.txt p.tit {color:rgba(255, 255, 255, 0.6); font-size: 16px; margin-bottom: 10px;;}
section.inquiry div.contact_info div.item div.txt p {font-size:22px ; color:#fff}
section.inquiry div.contact_info div.item.btn {padding: 20px 0 ; background: #f4b800; border-radius: 50px; ;}
section.inquiry div.contact_info div.item.btn a {width: 100%; padding : 20px 0;  ; }

/******/
section.field {padding:6rem 0 0 0 ; background: url(../img/field.png) no-repeat center bottom ; background-size: cover; background-attachment: fixed; ; text-align: center;   letter-spacing: -0.2px; background-position: fixed;} 
section.field div.icon_wrap {display: flex; ;} 
section.field div.icon_wrap a.item {padding:3rem 1rem; color:#fff; box-sizing: border-box; ; }
section.field div.icon_wrap a.item:hover {background:rgba(0, 0, 0, 0.5); transition: 0.6s; }
section.field div.icon_wrap a.item img {display:inline-block;margin-bottom:2rem;} 
section.field div.icon_wrap a.item strong {font-size: 1.375rem; margin-bottom: 1rem;display: block; ; ;}
section.field div.icon_wrap a.item p {color:rgba(255, 255, 255, 0.8); line-height: 1.8rem; word-break: keep-all;}

/**성공사례**/
section.victory {padding: 5rem 0 ; text-align: center; background: url(../img/victory_bg.png) no-repeat  center top;  ;}
section.victory div.example {display: flex; flex-wrap: wrap ; gap:10px; justify-content: space-between ; text-align: left;}
section.victory div.example a {background:#fff; padding: 3.125rem 1.875rem; box-sizing:border-box;  ; filter: drop-shadow(0px 0px 10px rgba(0, 0, 20, 0.1)); font-size: 1.125rem; font-weight: normal; width: calc( (100% / 4) - 10px);}
section.victory div.example a:hover {background:#0068b7; color:#fff; transition: 0.2s; } 
section.victory div.example a p.catagory {color:#0068b7; margin-bottom: 2rem; ;}
section.victory div.example a p.desk {line-height: 1.8;margin-bottom: 2rem; min-height:72px ;} 
section.victory div.example a:hover p.catagory {color:#fff; }
.victory_more {padding: 1rem; margin-top: 2rem; font-size: 1.2rem; display: inline-block; border-bottom:2px solid transparent; ;;}
.victory_more i {margin-left: 10px; }
.victory_more:hover {border-bottom:2px solid #000; transition: 0.5s ;}

/**찾아오시는 길 **/
section.address {padding: 5rem 0; background: #f8f8f8; text-align: center;;} 
section.address p.add {margin-bottom: 2rem; font-size: 1.25rem ;;}
section.address p.helf {text-align: right; color:#a23f3f; margin-top: 1.5rem; }

/**푸터***/
section.ftinfo {display: flex; text-align: center;   color:#fff;  ;}
section.ftinfo > div {width: 50%; min-height: 400px;  }
section.ftinfo > div h4 {font-size: 1.75rem; margin-bottom: 4.375rem;;}
section.ftinfo > div.ftinfo01 {background: url(../img/ft_img01.png) no-repeat  center; background-size: cover; padding: 5.625rem 0 ; box-sizing: border-box; }
section.ftinfo > div.ftinfo02 {background: url(../img/ft_img02.png) no-repeat  center; background-size: cover; padding: 5.625rem 0 ; box-sizing: border-box; }
section.ftinfo > div.ftinfo01 p {font-size: 1.375rem; margin-bottom: 1.5rem; line-height: 180%; ;}
section.ftinfo > div.ftinfo01 p.txt {font-size: 1.125rem; color:rgba(255, 255, 255, 0.8); }
ul.process {display: flex;align-items: flex-start; justify-content: space-evenly; }
ul.process li { width:30%}
ul.process li.arrow {padding-top:2rem; width:3%;    }
ul.process li span {width: 70px; height: 70px; text-align: center; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; ; justify-content: center ;border-radius: 35px;  margin: 0 auto; margin-bottom: 1.5rem; ; ;}
ul.process li p {line-height: 170%; word-break: keep-all; } 

/**서브**/
div.sub_con .sub_visual { background: url(../img/main_visual01.png) no-repeat ; background-size: cover; ; padding: 10rem 0 5rem 0 ;  ; text-align: center; color:#fff; font-size: 2rem;; margin-bottom: 2rem; ;;}
div.sub_con .sub_visual.visual02 {background: url(../img/main_visual02.jpg) no-repeat;background-size: cover;}
div.sub_con .sub_visual.visual03 {background: url(../img/main_visual03.jpg) no-repeat;background-size: cover;}
div.sub_con div.con_wrap div.con_wrap:last-child {margin-bottom: 0; ;}
div.sub_con div.con_wrap {margin-bottom: 4rem; word-break: keep-all; letter-spacing: -0.5px }
div.sub_con div.con_wrap h3 { margin: 2rem 0 ; ;}
div.sub_con div.con_wrap h3:after {width: 100%; height:5px; display: block; content:'' ;background:#000; margin-top: 0; ;    }
div.sub_con div.con_wrap div.deskcription_box {padding: 4rem; background:#f8f8f8; border:1px solid #efefef; }
div.sub_con div.con_wrap div.deskcription_box p { line-height: 2rem; margin-bottom: 1rem; font-size: 1.125rem;; ;}
div.sub_con div.con_wrap div.deskcription_box p:last-child {margin-bottom: 0; ;} 
div.sub_con div.con_wrap h4 {margin-bottom: 1rem ; font-weight: bold; position: relative; padding-left: 20px;  font-size: 1.4rem; color:#0068b7 ;}
div.sub_con div.con_wrap h4:before {display: block; position: absolute; left: 0; top: 2px; width: 15px ; height: 15px; background: #0068b7; content: ''; border-radius: 50%; ;}
div.sub_con div.con_wrap div.text_box p {line-height: 1.5rem; margin-bottom: 1rem; font-size: 1.125rem;;color:#555 ; letter-spacing: -1px  }
div.sub_con div.con_wrap div.text_box p:last-child {margin-bottom: 0; ;}
div.sub_con div.con_wrap div.text_box strong {font-weight: bold; color:#000; font-size: 1.2rem; margin-bottom:0.4rem; display: block;   ;}
div.sub_con div.con_wrap div.text_box div.inner {margin-bottom: 2rem; ;}
div.sub_con div.con_wrap div.text_box ol li {line-height: 1.5rem;   color:#555 ; letter-spacing: -1px  }

ul.step_box_top {
    box-sizing: border-box;
    display: flex;
flex-wrap: wrap;
    width: 100%;
    border: 1px solid #e0e0e0;
    background: #fbfbfb;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.1);
    margin: 0 auto ;
    background: #f8f8f8; 
}

ul.step_box_top li {
    width: calc(100% / 5); 
    text-align: center;
    border-right: 1px solid #e0e0e0;
    ; box-sizing: border-box;
}

ul.step_box_top li:last-child {
    border-right: none;
}

ul.step_box_top li div.title span {
    font-weight: bold;
    ;}

ul.step_box_top li div.title p {
    font-size: 19px;
    font-weight: bold;
    ;} 
ul.step_box_top li div.title {
    position: relative;
    color: #fff;
    padding: 20px 0 ;
    display: block;
    background:#0fa4dc; 
}

ul.step_box_top li div.cnts {
    line-height: 2;
    word-break: keep-all;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 137px;
    ;}

ul.step_box_top li div.title::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    margin-top: -10px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    z-index: 99;
}
ul.step_box_top li:nth-child(5) div.title::after,
ul.step_box_top li:nth-child(9) div.title::after {
    display: none;
}

@media screen and (max-width:1600px){ 
    section.main_visual {background-size: cover;}
}

@media screen and (max-width:1280px){
    section.inquiry div.contact_info div.item div.txt p {font-size: 1.125rem;}
    section.inquiry div.contact_info div.item {padding: 1.25rem 0 1.25rem 2rem}
    section.inquiry div.form {justify-content: space-between; gap :unset; padding: 2rem;  }
    section.inquiry div.form div.left div.agreement {height:306px}
    section.inquiry div.form div.left, section.inquiry div.form div.right {width: calc(50% - 1rem)  }
    section.introduce div.container div.wrap div.box_txt div.txt_wrap {gap : 1rem; }
   
}
@media screen and (max-width:1280px){ 
    section.introduce div.container {padding: 0 2rem; }


}

@media screen and (max-width:1024px){
    footer div.contents {flex-direction: column; gap : 2rem; ;}
    section.ftinfo {flex-direction: column; }
    section.ftinfo > div {width: 100% ;}
    section.inquiry div.contact_info {transform: unset; border-radius: unset; ;}
    section.inquiry div.contact_info div.info {flex-wrap: wrap; ;}
    section.inquiry div.contact_info div.item div.icon {font-size: 1.875rem; margin-right: 1rem}
    section.introduce div.container div.wrap {flex-wrap: wrap; justify-content: flex-end ;}
    section.introduce div.container div.wrap div.box_txt {order:1; width: 100%; ;}
    section.introduce div.container div.wrap div.box_img {order:2}
    section.introduce div.container div.wrap div.box_txt div.txt_wrap {flex-direction: column; color:#555;}

    section.main_visual h2 {padding-top:18.125rem }
    
}
@media screen and (max-width:768px){
    div.sub_con div.con_wrap div.deskcription_box {padding:2rem; }
    ul.step_box_top li {width: calc(100% / 3)}
    ul.step_box_top li:nth-child(5) div.title::after,
    ul.step_box_top li:nth-child(9) div.title::after {display: block;}
    ul.step_box_top li:nth-child(3n) div.title::after{display: none;} 
    section.victory div.example a {width: calc( 50% - 5px); padding: 2rem; }
    section.field div.icon_wrap {flex-wrap: wrap;  ;}
    section.field div.icon_wrap a.item {width: 50%; }
    section.field div.icon_wrap a.item p {display: none; ;}  
    section.inquiry div.contact_info div.item {width: calc(100% / 3)}
    section.inquiry div.contact_info div.item.btn {width: 100%; padding: 1rem 0 ; border-radius: unset; ; }

    div.main_visual div.txt_box h2 {padding-top:15rem; font-size: 3rem; line-height: 1.5;; } 
    div.main_visual div.txt_box p {font-size: 2rem; line-height: 1.5;;} 

}
@media screen and (max-width:555px){
    section.inquiry div.contact_info div.item {width: 100%; }
    section.inquiry div.form {flex-direction: column; ;}
    section.inquiry div.form div.left, section.inquiry div.form div.right {width:100%; }
    section.inquiry div.form div.left div.agreement {height: 100px; margin-bottom: 2rem; ;}
    section.main_visual {height:42rem; }
    section.main_visual h2 {padding-top:15.125rem ; font-size: 3rem;} 
    section.main_visual p {font-size: 2rem;}
    div.info.box_gray {padding:2rem; }

}
@media screen and (max-width:479px){
    div.sub_con div.con_wrap div.deskcription_box {padding:2rem; }
    ul.step_box_top li {width: calc(100% / 2)} 
    ul.step_box_top li:nth-child(3) div.title::after {display: block;}
    ul.step_box_top li:nth-child(2n) div.title::after{display: none;}
    section.inquiry div.contact_info div.item {width: 100%; }
    div.main_visual div.txt_box h2 {font-size: 2.3rem; ;}
    div.main_visual div.txt_box p {font-size: 1.8rem; ;}
}

@media screen and (max-width:360px){
 
}

/************인사말***********/
 
 
.intro.greeting div.text_wrap {
    letter-spacing: -0.5px;
    display: flex; ;
    border: 1px solid #e6e6e6;
    padding: 2rem 5rem 0 5rem; 
    align-items: center; 
    gap:4rem; 
}

.intro.greeting div.text_wrap img.cys {}


.intro.greeting div.ttop > p {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 1.5rem;
    line-height: 2.5rem;
}   

.intro.greeting div.text_wrap div.bot > p {
    color: #666;
    line-height: 1.8; 
    word-break: keep-all;
    margin-bottom: 1.25rem;
}

.intro.greeting div.text_wrap div.bot > p.sign {
    color: #3f3f3f;
    font-weight: 600;
    letter-spacing: 1px;
}

.intro.greeting div.text_wrap div.bot > p.sign > span {
    margin-left: 8px;
    font-size: 30px;
}
 

div.info p {color:#555; }


@media screen and (max-width:1024px){ 
    .intro.greeting div.text_wrap {flex-direction: column; padding-top:5rem; ;}
    

}

@media screen and (max-width:555px){ 
    .intro.greeting div.text_wrap {padding: 2rem  2rem 0 2rem; }
    .intro.greeting div.text_wrap img.cys   {width: 100%; ;}

}