@charset "utf-8";

#pageCont{padding-bottom: 80px;}
@media all and (max-width:1280px){
	#pageCont{padding-bottom: 60px;}
}


#intro1 .top{display: flex;}
#intro1 .top > div{width: 50%;}
#intro1 .top .img{padding-right: 55px;}
#intro1 .top .img div{display: inline-block; width: auto; height: auto; position: relative;;}
#intro1 .top .img div:before{content: ''; width: 100%; height: 100%; position: absolute; left: 40px; top: 40px; background-color: #014099; z-index: -1;}
#intro1 .top .img div img{max-width: 100%;}
#intro1 .top .txt{padding-top: 3%;}
#intro1 .top .txt h3{font-size: 4.0rem; color: #000;}
#intro1 .top .txt p.t1{margin: 5% 0; line-height: 1.5em; font-size: 2.4rem; font-weight: 600; color: #000;}
#intro1 .top .txt p.t2{font-size: 2.0rem; font-weight: 500; color: #444444; line-height: 1.8; word-break: keep-all;}
@media all and (max-width:1400px){
    #intro1 .top .txt h3{font-size: 3.0rem;}
    #intro1 .top .txt p.t1{font-size: 1.8rem;}
    #intro1 .top .txt p.t2{font-size: 1.6rem;}
}
@media all and (max-width:767px){
    #intro1 .top{display: block;}
    #intro1 .top .img{width: 100%; text-align: center; padding-right: 40px;}
    #intro1 .top .img div{max-width: 350px;}
    #intro1 .top .txt{padding-top: 10%; width: 100%;}
}
@media all and (max-width:568px){
    #intro1 .top .txt{padding-top: 60px;}
}

#intro1 .btm{padding: 160px 0; margin-top: 150px; background:url('/images/sub/intro1_bg.webp')no-repeat center center/cover;}
#intro1 .btm .in{width: 90%; max-width: 1020px; margin: 0 auto;}
#intro1 .btm h3{text-align: center; color: #fff; font-size: 4.0rem;}
#intro1 .btm ul{margin-top: 5%; display: flex; gap: 35px; justify-content: space-between;}
#intro1 .btm ul li{ border:1px solid #595959; width: 100%; height: 200px;}
#intro1 .btm ul li a{position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 40px; color: #fff;}
#intro1 .btm ul li .s1{ display: block; font-size: 3.0rem; font-weight: 700;;}
#intro1 .btm ul li .arrow{position: absolute; right: 40px; top: 40px; color: #fbca4d; font-weight: 700; font-size: 3.0rem; transition: all .5s;}
#intro1 .btm ul li a:hover .arrow{transform: translateY(-10px);}
@media all and (max-width:1280px){
    #intro1 .btm{margin-top: 90px;}
    #intro1 .btm ul{gap: 20px;}
}
@media all and (max-width:976px){
    #intro1 .btm{margin-top: 70px;}
    #intro1 .btm{padding: 90px 0;}
    #intro1 .btm h3{font-size: 3.0rem;}
    #intro1 .btm ul{flex-wrap: wrap;}
    #intro1 .btm ul li:nth-child(1){width: calc(50% - 10px);}
    #intro1 .btm ul li:nth-child(2){width: calc(50% - 10px);}
    #intro1 .btm ul li:nth-child(3){width: 100%;}
}
@media all and (max-width:568px){
    #intro1 .btm{margin-top: 60px;}
    #intro1 .btm{padding: 60px 0;}
    #intro1 .btm ul li{height: 140px;}
    #intro1 .btm ul li:nth-child(1){width: 100%;}
    #intro1 .btm ul li:nth-child(2){width: 100%;}
    #intro1 .btm ul li a{padding: 25px;}
    #intro1 .btm ul li .s1{font-size: 2.0rem;}
}



#intro2{display: flex; gap: 50px; flex-wrap: wrap;}
#intro2 li{width: calc((100% - 50px*2)/3);}
#intro2 li > a > img{width: 100%;}
#intro2 li dl{color: #6b4d00;}
#intro2 li dl dt{padding: 20px 30px; font-size: 2.2rem; font-weight: 500;; position: relative; background-color: #fbca4d;}
#intro2 li dl dt a{color: #fff;display: flex; justify-content: center; align-items: center;  width: 100%; height: 100%;}
#intro2 li dl dt b{font-size: 3.0rem; padding-right: 4px;}
#intro2 li dl dt span.arr{position: absolute; right: 30px; top: -40px; width: 80px; height: 80px; background-color: #6b4d00; font-size: 3.6rem; transition: all .5s;}
#intro2 li:hover dl dt span.arr{transform: translateY(-10px);}
#intro2 li dl dd{padding: 20px 30px; background-color: #052d66;}
#intro2 li dl dd p{font-size: 1.8rem; display: flex; align-items: center;}
#intro2 li dl dd p img{padding-right: 0.7rem;}
#intro2 li dl dd p + p{margin-top: .5em;}
@media all and (max-width:1280px){
    #intro2{gap: 40px;}
    #intro2 li{width: calc((100% - 40px*1)/2);}
}
@media all and (max-width:976px){
    #intro2 li dl dt span.arr{top: -80px; right: 0;}
}
@media all and (max-width:568px){
    #intro2 li{width: 100%;}
    #intro2 li dl dt span.arr{top: -40px; right: 30px;;}
}


.goint2btn{display: inline-block; margin-top: 5%; padding: 1em 3em; font-size: 2.0rem; font-weight: 700; background-color: #b5b5b5; color: #fff;}

#lawyer{position: relative; }
#lawyer:before{content: ''; position: absolute; width: 100%; height: 80%; background-color: #6b4d00;}
#lawyer .top{padding: 10% 0 0; font-size: 4.5rem; line-height: 1.3em; color: #fff;}
#lawyer .cont{display: flex; justify-content: space-between;}
#lawyer .cont .l_cont{padding-top: 3%; width: 50%;}
#lawyer .cont .l_cont h3{color: #fff; font-size: 7rem;;}
#lawyer .cont .l_cont h3 span{font-size: 3.5rem; font-weight: 600;}
#lawyer .cont .l_cont .contact{margin-top: 4%; display: flex; flex-wrap: wrap; gap: 10px 30px; color: #fff; font-size: 2.2rem; font-weight: 500;;}
#lawyer .cont .l_cont .contact b{opacity: 0.6;}
#lawyer .cont .l_cont .btns{margin-top: 10%; display: flex; width: 100%; max-width: 700px;}
#lawyer .cont .l_cont .btns a{width: 50%; line-height: 80px; color: #fff; text-align: center; font-weight: 700; font-size: 2.2rem; }
#lawyer .cont .l_cont .btns a:nth-child(1){background-color: #c58f07;}
#lawyer .cont .l_cont .btns a:nth-child(2){background-color: #e4a507;}
#lawyer .cont .l_cont .history{padding: 60px 50px; max-width: 700px;  width: 100%; background-color: #fff;}
#lawyer .cont .l_cont .history dl{display: flex; align-items: flex-start;}
#lawyer .cont .l_cont .history dl + dl{margin-top: 2em;}
#lawyer .cont .l_cont .history dl dt{width: 140px; flex:0 0 auto; font-size: 2.6rem;font-weight: 700; color: #b5b5b5;}
#lawyer .cont .l_cont .history dl dd p{font-size: 1.8rem; color: #333;}
#lawyer .cont .l_cont .history dl dd p + p{margin-top: 1em;}
#lawyer .cont .r_cont{width: 50%; text-align: right;}
#lawyer .cont .r_cont img{max-width: 100%;;}

@media all and (max-width:1280px){
    #lawyer .cont .l_cont .history{padding: 40px;}
    #lawyer .cont .l_cont .history dl{display: block;}
    #lawyer .cont .l_cont .history dl dt{width: 100%; margin-bottom: 1em;;}
    #lawyer .video iframe{height: 450px !important;}
}
@media all and (max-width:976px){
    #lawyer{}
    #lawyer:before{height: 100%;}
    #lawyer .top{font-size: 4.0rem; margin-bottom: 4%; text-align: center;}
    #lawyer .cont{flex-direction: column-reverse; align-items: center;}
    #lawyer .cont .l_cont{width: 100%;}
    #lawyer .cont .l_cont h3{text-align: center;}
    #lawyer .cont .l_cont .contact{justify-content: center;}
    #lawyer .cont .l_cont .btns{margin-top: 5%; max-width: 100%;}
    #lawyer .cont .l_cont .history{max-width: 100%;}
}
@media all and (max-width:568px){
    #lawyer .top{font-size: 3.0rem;}
    #lawyer .cont .l_cont h3{font-size: 5rem;}
    #lawyer .cont .l_cont h3 span{font-size: 2rem;}
    #lawyer .cont .l_cont .contact{font-size: 1.8rem;}
    #lawyer .cont .l_cont .btns a{line-height: 60px; font-size: 1.8rem;}
    #lawyer .cont .l_cont .history dl dt{font-size: 2.0rem;}
    #lawyer .cont .l_cont .history dl dd{font-size: 1.6rem;}
    #lawyer .video iframe{height: 350px !important;}
}
@media all and (max-width:480px){
    #lawyer .video iframe{height: 250px !important;}
}


#sMap .wrap_controllers {display: none;}
/* #sMap .root_daum_roughmap_landing .border2{display: block;} */
#sMap .map_info{padding: 60px; border:1px solid #ddd; color: #000;}
#sMap .map_info h3{font-size: 4.5rem; }
#sMap .map_info .t1{margin-top: 1em; font-size: 2.4rem; font-weight: 500; word-break: keep-all; }
#sMap .map_info .t2{margin-top: 0.5em; font-weight: 500; color: #9a9a9a;word-break: keep-all}
#sMap .map_info .tel{margin-top: 1em; display: inline-block; background-color: #c58f07; color: #fff; font-weight: 700; font-size: 1.8rem; padding: 0.7em 2em; border-radius: 40px;}
#sMap .map_info .tel.fax{background-color: #e4a507;}
@media all and (max-width:568px){
    #sMap .wrap_map{height: 320px !important;}
    #sMap .map_info{padding: 30px;}
    #sMap .map_info .tel{font-size: 1.5rem;}
    #sMap .map_info .tel.fax{margin-top: 0.5em;}
}


#sTop{position: relative; padding-bottom: 7%;}
#sTop:before{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; background-color: #fafafa; z-index: -1;}
#sTop .img{position: relative;}
#sTop .img img{width: 100%; max-width: 100%; object-fit: cover;}
#sTop .img dl{position: absolute; left: 60px; bottom: 60px; font-weight: 700;}
#sTop .img dl dt{color: #fbca4d; font-size: 1.8rem;}
#sTop .img dl dd{margin-top: 0.5em; color: #fff; font-size: 6rem;}
#sTop .txt{ margin-top: 60px; font-size: 1.8rem; line-height: 1.6em;}
#sTop .txt dl{}
#sTop .txt dl dt{font-size: 3.4rem; font-weight: 700; color: #222;}
#sTop .txt dl dd{margin-top: 0.8em; font-size: 2.2rem; line-height: 1.6em;}
@media all and (max-width:1280px){
    #sTop .img dl{bottom: 20px; left: 20px;}
    #sTop .img dl dt{font-size: 1.6rem;}
    #sTop .img dl dd{font-size: 4rem;}
    #sTop .txt{margin-top: 20px; font-size: 1.6rem;}
    #sTop .txt dl dt{font-size: 2.6rem;}
    #sTop .txt dl dd{font-size: 1.9rem;}
}
@media all and (max-width:480px){
    #sTop .img{height: 40vw;}
    #sTop .img img{width: auto; max-width: auto; height: 100%;}
    #sTop .img dl dt{color: #fff;}
    #sTop .img dl dd{font-size: 3rem;}
    #sTop .txt dl dt{font-size: 2.2rem;}
    #sTop .txt dl dd{font-size: 1.6rem;}
}


.halfcont{margin-top: 140px; display: flex; flex-wrap: wrap;}
.s_tit{width: 320px; flex:0 0 auto; padding-right: 2%;}
.s_tit h3{color: #000; font-size: 2.8rem; padding-top: 20px; position: relative; }
.s_tit h3:before{content: ''; position: absolute; left: 0; top: 0;;  width: 60px ;height: 4px; border-radius: 2px; background-color: #fbca4d;}
.halfcont .cont{width: calc(100% - 320px);}
.halfcont .cont .point{font-weight: 600; color: #000; font-size: 1.8rem;}
@media all and (max-width:1479px){
    .s_tit{width: 270px;}
    .halfcont .cont{width: calc(100% - 270px);}
}
@media all and (max-width:1280px){
    .halfcont{gap: 40px; margin-top: 90px;}
    .s_tit{width: 100%;}
    .halfcont .cont{width: 100%;}
}
@media all and (max-width:480px){
    .s_tit h3{padding-top: 12px;}
    .s_tit h3:before{width: 40px; height: 2px;}
    .halfcont{gap: 2em; margin-top: 60px;}
}

.s_tit2{margin-top: 140px; text-align: center;}
.s_tit2 h3{font-size: 3.5rem; color: #000;}
@media all and (max-width:1280px){
    .s_tit2{margin-top: 90px;}
}
@media all and (max-width:480px){
    .s_tit2{margin-top: 60px;}
}


.area_list{display: flex; flex-wrap: wrap; gap: 20px}
.area_list li{display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc((100% - 20px*3)/4); padding:60px 10px; box-shadow: 0 0 35px 0 rgba(0,0,0,0.05); text-align: center;}
.area_list li p{margin-top: 1em; font-size: 1.8rem; font-weight: 500; color: #000; line-height: 1.3em; word-break: keep-all;}
/* .area_list li:hover{box-shadow: 0 0 35px 0 rgba(0,0,0,0.12);} */
@media all and (max-width:1400px){
    .area_list li{width: calc((100% - 20px*2)/3); }
}
@media all and (max-width:976px){
    .area_list li{padding:30px 10px;}
}
@media all and (max-width:767px){
    .area_list li{width: calc((100% - 20px*1)/2);}
}
@media all and (max-width:480px){
    .area_list{gap: 10px;}
    .area_list li{width: calc((100% - 10px*1)/2); padding: 20px 10px;}
    .area_list li img{max-width: 40px; max-height: 40px;}
}

.dot-item{position: relative; padding-left: 15px; line-height: 1.4em;}
.dot-item:before{content: ''; position: absolute; left: 7px; top: 0.5em; width: 4px; height: 4px; background-color: #fbca4d; border-radius: 50%;}

.proc_list{display: flex; gap: 30px; flex-wrap: wrap;}
.proc_list li{padding: 6%; width: calc((100% - 30px)/2); border:1px solid #eee;}
.proc_list li dl dt{padding-bottom: 3%; margin-bottom: 3%; border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 2.0rem; font-weight: 700; color: #000;}
.proc_list li dl dd p + p{margin-top: 10px;}
@media all and (max-width:767px){
    .proc_list{gap: 20px;}
    .proc_list li{width: calc((100% - 20px)/2);}
}
@media all and (max-width:568px){
    .proc_list li{width: 100%}
}
@media all and (max-width:480px){
    .proc_list{gap: 10px;}
}


.dlbox{padding-left: 0.5em;}
.dlbox + .dlbox{border-top: 2px dotted #eee;}
.dlbox dt{display: inline-block; margin-top: 1.5em; padding: 1em 2em; background-color: #fcc029; border-radius: 40px; color: #fff; font-weight: 700; font-size: 1.8rem;}
.dlbox dd{padding-block:1.5em; padding-left:2em; font-weight: 500; color: #787878;}
.dlbox.ver2 dt{background-color: #e4a507;}
@media all and (max-width:1280px){
    .dlbox{padding-left: 0em;}
}

.dl_list{display: flex; flex-wrap: wrap; gap: 20px;}
.dl_list dl{width: calc((100% - 20px*2)/3); box-shadow: 0 0 60px 0 rgba(0,0,0,0.1);}
.dl_list dl dt{padding: 20px 30px; color: #fff; font-size: 1.8rem; font-weight: 700; background-color: #e4a507;}
.dl_list dl dd{padding: 20px 30px; color: #787878; line-height: 1.6em;}
.dl_list + h4.point{margin-top: 40px;}
h4.point + p{padding-left: 0.5em; margin-top: 0.4em; line-height: 1.4em; color: #787878; font-weight: 500;}
@media all and (max-width:767px){
    .dl_list dl{width: 100%;}
    .dl_list + h4.point{margin-top: 30px;}
}
@media all and (max-width:480px){
    .dl_list{gap: 10px;}
    .dl_list + h4.point{margin-top: 1.5em;}
}

.field_list{margin-top: 3%; display: flex; gap: 40px;}
.field_list li{border:1px solid #eee;  width: calc((100% - 40px*3)/4);}
.field_list a{padding: 40px; display: block;}
.field_list p{text-decoration: underline;}
.field_list h4{margin-top: 5%; color: #000;}
.field_list .s1{margin: 5% 0; background-color: #fcc029; width: 100%; display: block; line-height: 60px; color: #fff; transition: all .5s; text-align: center; font-weight: 700; font-size: 2.0rem;}
.field_list dl {}
.field_list dl dt{font-weight: 700; color: #000; opacity: 0.5;}
.field_list dl dd{margin-top: 0.4em; color: #787878; font-weight: 500; line-height: 1.4;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.field_list .logo{text-align: center; padding-top: 2em;}
.field_list li:hover .s1{background-color: #e4a507;}
@media all and (max-width:1280px){
    .field_list{gap: 20px; flex-wrap: wrap;}
    .field_list li{width: calc((100% - 20px)/2);}
}
@media all and (max-width:767px){
    .field_list a{padding: 20px;}
}
@media all and (max-width:480px){
    .field_list li{width: 100%}
    .field_list .s1{line-height: 45px;}
}


#sInquery{padding: 90px 0; background:url('/images/sub/sinquery_bg.webp')no-repeat center right/cover;}
#sInquery .top{display: flex; gap: 3%; align-items: center;}
#sInquery .top img{height: 60px;}
#sInquery h3{color: #fff; font-size: 2.0rem; line-height: 1.5; font-weight: 600;}
#sInquery .cont{margin-top: 2%; padding-top: 2%; border-top: 2px dotted #ffffff20;}
#sInquery .cont form{display: flex; flex-wrap: wrap; align-items: center; width: 100%;}
#sInquery .rad_box{width: 40%; display: flex; flex-wrap: wrap; gap: 10px 2em;}
#sInquery .rad_box input[type="radio"]{display: none;}
#sInquery .rad_box label{position: relative; color: #fff; font-size: 1.8rem; padding-left: 20px; cursor: pointer;}
#sInquery .rad_box label:before{content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border:1px solid #fff; border-radius: 50%;;}
#sInquery .rad_box input[type="radio"]:checked + label:after{content: ''; position: absolute; left: 4px; top: 5.5px; width: 8px; height: 8px; background-color: #fff; border-radius: 50%;;}
#sInquery .inp_box{width: 60%; display: flex; align-items: center; justify-content: space-between;}
#sInquery .inp_box input[type="text"],
#sInquery .inp_box input[type="tel"]{width: 30%; border:1px solid #ffffff90; background:transparent; line-height:60px; color: #fff; padding: 0 1em;font-size: 1.6rem;}
#sInquery .inp_box input::placeholder{color: #fff; padding: 1em; font-family: 'Pretendard'; opacity: 0.5; font-size: 1.6rem;} 
#sInquery .inp_box button{width: 38%; line-height: 60px; background-color: #e4a507 ;font-size: 2.0rem; font-weight: 700; font-family: 'Pretendard'; color: #fff;}
#sInquery .agr_box{margin-top: 10px; width: 100%; text-align: right;} 
#sInquery .agr_box input{display: inline-block; vertical-align: middle; margin-right: 4px;}
#sInquery .agr_box label{color: #fff; font-size: 1.4rem;}
#sInquery .agr_box a{color: #fff;}
@media all and (max-width:1280px){
    #sInquery .cont .rad_box{width: 100%; justify-content: center;}
    #sInquery .inp_box{margin-top: 2%; width: 100%;}
}
@media all and (max-width:767px){
    #sInquery{padding: 60px 0;}
    #sInquery .top{display: block; text-align: center;}
    #sInquery .top h3{margin-top: 2%;}
    #sInquery .inp_box{flex-wrap: wrap;}
    #sInquery .inp_box input[type="text"],
    #sInquery .inp_box input[type="tel"]{width: 49%;}
    #sInquery .inp_box button{margin-top: 2%; width: 100%;}
}
@media all and (max-width:480px){
    #sInquery .top img{height: 45px;}
    #sInquery .top h3{font-size: 1.6rem;}
    #sInquery .rad_box{gap: 10px;}
    #sInquery .inp_box {margin-top: 20px;}
    #sInquery .inp_box input[type="text"],
    #sInquery .inp_box input[type="tel"]{line-height: 40px;}
    #sInquery .inp_box button{line-height: 40px;}
}



#sSearch{}
#sSearch .in{display: flex; position: relative; width: 100%;}
#sSearch .in select{width: 300px; border:none; background: #f3f3f3 url('/images/sub/arrow_down2.png')no-repeat calc(100% - 2em) center; font-weight: 500; padding: 0 2em; -o-appearance: none;-webkit-appearance: none;-moz-appearance: none; appearance: none; font-size: 1.8rem; font-family: 'Pretendard'; color: #999;}
#sSearch .in input[type="text"]{padding: 0 40px; width: calc(100% - 300px); line-height: 75px; border:none;  outline:none;  background-color: #f3f3f3; font-family: 'Pretendard'; font-size: 1.8rem;}
#sSearch .in input[type="text"]::placeholder{opacity: 0.5; font-size: 1.8rem; font-family: 'Pretendard';}
#sSearch .in button{position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
#sSearch .in button span{ font-size: 3rem;}
@media all and (max-width:976px){
    #sSearch .in select{width: 140px;}
    #sSearch .in input[type="text"]{ width: calc(100% - 140px); line-height: 50px; }
}
@media all and (max-width:568px){
    #sSearch .in select{width: 110px;}
    #sSearch .in input[type="text"]{ width: calc(100% - 110px); line-height: 40px; padding: 0 10px; }
}

.ex_tabs{padding-top: 2%; display: flex; flex-wrap: wrap; gap: 0.5em;}
.ex_tabs li a{font-size: 1.6rem; display: block; width: 120px; padding: 20px 0; background-color: #f3f3f3;  text-align: center;}
.ex_tabs li.active a{background-color: #014099; color: #fff; font-weight: 700;}
.ex_tabs li a#bo_cate_on{background-color: #014099; color: #fff; font-weight: 700;}
.ex_tabs li.active a:before{content: '\e5ca'; display: inline-block; padding-right: 3px; vertical-align: middle; color: #fff; font-family: 'Material Symbols Outlined';}
.ex_tabs li a#bo_cate_on:before{content: '\e5ca'; display: inline-block; padding-right: 3px; vertical-align: middle; color: #fff; font-family: 'Material Symbols Outlined';}
@media all and (max-width:976px){
    .ex_tabs li a{font-size: 1.4rem; width: 90px; padding: 10px 0;;}
}
@media all and (max-width:568px){
    .ex_tabs li{width: calc((100% - 0.5em*4)/5);}
    .ex_tabs li a{width: 100%;}
    .ex_tabs li.active a:before{padding-right: 0;}
    .ex_tabs li a#bo_cate_on:before{padding-right: 0;}
}

.ex_list{margin-top: 2%; display: flex; flex-wrap: wrap; gap: 30px;}
.ex_list li{width: calc(50% - 15px);}
.ex_list li a{display: block; padding: 60px; border:1px solid #eee; transition: all .5s;}
.ex_list li a:hover{box-shadow: 0 0 60px 0 rgba(0,0,0,0.05);}
.ex_list li .tag{display: inline-block; padding:7px 30px; background-color: #014099; color: #fff; font-weight: 700;}
.ex_list li strong{display: block; margin-top: 10px; font-size: 3.4rem; color: #000;}
.ex_list li p{margin-top: 1em; font-size: 1.8rem ; color: #787878; line-height: 1.4em; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.ex_list li .date{margin-top: 1em; font-size: 1.4rem; color: #787878; opacity: 0.5;; font-weight: 700;}
@media all and (max-width:976px){
    .ex_list li{width: 100%}
    .ex_list li a{padding: 40px;}
}
@media all and (max-width:568px){
    .ex_list {gap: 20px;}
    .ex_list li a{padding: 30px;}
}
@media all and (max-width:480px){
    .ex_list {gap: 10px;}
    .ex_list li a{padding: 1em;}
    .ex_list li .tag{padding: 6px 15px;}
    .ex_list li strong{font-size: 2.6rem;}
}

.law_list{margin-top: 2%; display: flex; flex-wrap: wrap; gap: 30px;}
.law_list li{width: calc((100% - 30px*2)/3); border:1px solid #eee; transition: all .5s;}
.law_list li:hover{box-shadow: 0 0 60px 0 rgba(0,0,0,0.05);}
.law_list li a{display: block;}
.law_list li .img{overflow: hidden;}
.law_list li .img img{width: 100%;}
.law_list li dl{padding:34px 40px; border-top: 1px solid #eee;}
.law_list li dl dt{font-size: 2.6rem; font-weight: 700; color: #000; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.law_list li dl dd.c{margin-top: 8px; line-height: 1.4; font-size: 1.8rem; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.law_list li dl dd.d{opacity: 0.5; margin-top: 8px; font-size: 1.4rem; font-weight: 700;;}
@media all and (max-width:976px){
    .law_list{gap: 20px;}
    .law_list li{width: calc((100% - 20px*1)/2);}
    .law_list li dl{padding: 2em;}
}
@media all and (max-width:568px){
    .law_list{gap: 20px;}
    .law_list li{width: 100%;}
}
@media all and (max-width:480px){
    .law_list{gap: 10px;}
}



.apt2List{display: flex; justify-content: space-between;}
.apt2List li{width: 32%; box-shadow: 0 0 60px 0 rgba(0,0,0,0.1);}
.apt2List li .img img{width: 100%;}
.apt2List li dl{padding: 3em; text-align: center;}
.apt2List li dl dt{color: #222; font-size: 2.6rem; font-weight: 700;}
.apt2List li dl dd{margin-top: 10px;}
@media all and (max-width:976px){
    .apt2List {flex-wrap: wrap; gap: 2em;}
    .apt2List li{width: 100%;}

}


.apt3List{display: flex; gap: 2em; flex-wrap: wrap; justify-content: center;}
.apt3List li{width: clamp(130px, 13vw, 260px); height: clamp(130px, 13vw, 260px); background-color: #e4a507; border-radius: 50%;  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.apt3List li:nth-child(even){background: #fbca4d;}
.apt3List li > span{margin-bottom: 10px; color: #fff; font-family: 'Montserrat'; font-weight: 800; font-size: 1.9rem;}
.apt3List li p{color: #fff; font-weight: 600; font-size: 2rem;}



.apt3dl{text-align: center; margin-top: 4%;;}
.apt3dl dt{font-size: 2.4rem; font-weight: 700; color: #222;}
.apt3dl dd{font-size: 1.8rem; margin-top: 0.5em;;}