/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1280px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;margin-right:calc(-1* var(--area-padding)); cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.cm-scroll-drag-guide {display:flex; justify-content:flex-end; margin-right:var(--area-padding); }
	.cm-scroll-drag-guide .cm-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.cm-scroll-drag-guide .cm-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:#ccc; content:""; border-radius:5px;}
	.cm-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:moveScrollAni 3s both infinite; }
	.cm-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color: rgba(0, 0, 0, 0.7); border-radius:5px; opacity:1; }
	.cm-scroll-drag-guide .drag-tail .hand-icon{ font-size:30px; color:#aaa }
	@keyframes moveScrollAni {
		0%, 10% {
			left: 0;
			margin-left: 0px;
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1280px){
	.sub-tab-list-style .area{padding:0}
	.cm-fixed-tab-container-JS .sub-tab-wrapper-style{width: calc(100% - (var(--area-padding) * 2)); margin-left: auto; margin-right: auto;}
	/* .sub-tab-list-style.top-fixed{width: calc(100% - (var(--area-padding) * 2)); left: var(--area-padding);} */
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:var(--header-height);}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:5.5rem;}
	.sub-tab-list-style ul li a em{font-size:13px}
	.sub-tab-list-style ul li a:before {display: none;}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 1.5rem; height:5.5rem; line-height:5.5rem; font-size: 1.7rem; background-color:#fff; box-sizing:border-box; border: 2px solid #0b1186; box-sizing: border-box;}
	.sub-drop-open-btn-style span{color:#0b1186; font-weight: 700;}
	.sub-drop-open-btn-style .arrow{color:#0b1186; position:absolute; top:50%; right:1rem; font-size: 2.4rem; margin-top:-1.2rem}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:2px solid #ddd; border-top-color:#fff; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:2px solid #dddddd; width:auto; background-color:transparent}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:1.5rem 1.5rem; border:0;}
	.sub-drop-menu-style ul li.selected a em,
	.sub-drop-menu-style ul li a em{font-size:1.6rem; letter-spacing: -0.05em; font-weight: 500; color: #333;}
	.sub-drop-menu-style ul li.selected a em{position: relative; padding-left: 1.4rem; color: #000; font-weight: 700;}
	.sub-drop-menu-style ul li.selected a em:before{position: absolute; top: -0.1rem; left: 0; content: '-';}
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:var(--header-height);}
}

/* ******************  01. 변호사소개 ********************** */
@media all and (max-width:1280px){
	.lawyer-list {padding: 6rem 0 0;}
}
@media all and (max-width:800px){
	.intro-con {padding: 7.5rem 0;}
	.intro-tit-box .tit {font-size: 4.2rem;}
	.intro-tit-box .tit-en {font-size: 6.6rem; font-size: 5rem;}
	.intro-tit-box .txt {padding-top: 5rem;}
	.intro-con .intro-tit-box {margin-bottom: 10rem;}
	.intro-list li {display: block; margin-bottom: 5rem;}
	.intro-list li:not(:first-child) { margin-top: 0;}
	.intro-list li .hexagon-con {width: 100% !important; height: 23.6rem; justify-content: start !important;}
	.intro-list li .hexagon-con .hexagon-box {width: 20.2rem;}
	.intro-list li .txt-con {width: 100% !important; padding-left: 0; padding-top: 3rem;}
	.intro-list li .hexagon-con .hexagon-box strong {font-size: 2.6rem;}
	.intro-list li .hexagon-con .hexagon-box.logo-box {display: none;}
	.lawyer-intro-wrap {padding: 10rem 0;}
	.lawyer-intro-con {padding: 10rem 0 0;}
	.lawyer-intro-con .lawyer-intro-tit {font-size: 3.8rem;}
	.representative-lawyer {height: auto;}
	.representative-lawyer .img-box {width: 100%; height: 30rem; border-radius: 0 5rem 0 0;}
	.representative-lawyer .img-box span {width: 100%; left: 0; margin-left: 0; height: 35rem;}
	.representative-lawyer .img-box span img {max-height: 100%;}
	.representative-lawyer .info-box {width: 100%; border-radius: 0 0 0 0;}
	.representative-lawyer .info-box {padding: 4rem 3rem 17rem;}
	.representative-lawyer .info-box .name {font-size: 2.6rem;}
	.representative-lawyer .info-box .name strong {font-size: 3.4rem;}
	.representative-lawyer .contact-list {width: 100%; padding-left: 3rem; bottom: 4rem;}

	.partner-lawyer-list li {width: calc(50% - 3rem);}
	.partner-lawyer-list li a {padding-top: 3.5rem; }
	.partner-lawyer-list li a span {height: 25rem;}
	.partner-lawyer-list li a dl dt {font-size: 2.6rem;}

	.lawyer-list {padding: 4rem 0 0 ;}
	.lawyer-list li {width: calc(50% - 2rem);}
	.lawyer-list li a .info dl dt {font-size: 2.6rem;}

	.intro-history-con {padding: 10rem 0;}
	.intro-history-img {height: 30rem; margin: 7rem 0;}
	.history-circle {margin: 0; width: 8rem;  height: 8rem;}
	.history-circle i {font-size: 2.8rem;}
	.history-circle img {height: 35px;}
	.history-style01 .history-year-item {padding-top: 5rem;}
	.history-style01 .history-year-item .history-back-line {left: 4rem;}
	.history-style01 .history-year-item .history-info-box {width: 100%; padding-left:8rem;}
	.history-style01 .history-year-item .history-year-tit {font-size: 5.5rem; margin-bottom: 3rem;}
	.history-style01 .history-year-item .history-year-tit .dot{left: -4.5rem;}
}
@media all and (max-width:640px){
	.partner-lawyer-list li {width: calc(100% - 3rem);}
	.lawyer-list li {width: calc(100% - 2rem);}
	.lawyer-list li a .img {width: 49%;}
	.lawyer-list li a .img span {height: 23rem; display: block;}
	.lawyer-list li a .img span img {max-width: none; width: 100%; height: 100%; object-fit: contain; object-position: bottom;}
	.lawyer-list li a .info {width: 51%;}
	.representative-lawyer .contact-list {padding-right: calc(3rem - 1%);}
	.representative-lawyer .contact-list li {width: 19%; margin-right: 1%;}
	.representative-lawyer .contact-list li a dl dt {max-width: 2.7rem; height: 2.2rem;}
}
/* ***** 변호사 소개 상세페이지 ***** */
@media all and (max-width:1280px){
	.lawyer-view-top .left-con {padding-right: 7rem;}
	.lawyer-view-top .lawyer-name-box {padding-bottom: 5rem;}
	.lawyer-view-top .lawyer-txt-box {padding: 6.5rem 0;}
	.lawyer-view-top .lawyer-txt-box:before {left: calc(-1*(var(--area-padding)));}
}
@media all and (max-width:800px){
	.lawyer-view-top {    flex-wrap: wrap-reverse;}
	.lawyer-view-top .right-con {width: 70%;}
	.lawyer-view-top .left-con {position: relative; width: 100%; padding-right: 0;}
	.lawyer-view-top .left-con:before {position: absolute; content: ''; width: 100vw; height: 100%;  bottom: 0;left: calc(-1*(var(--area-padding)));  background: var(--main-color);
    z-index: -1;}
	.lawyer-view-top .lawyer-name-box {padding: 5rem 0 0;}
	.lawyer-view-top .lawyer-name-box span {color: #fff;}
	.lawyer-view-top .lawyer-name-box .name {color: #fff; font-size: 6rem;}
	.lawyer-view-top .lawyer-name-box .job {color: #fff; opacity: 0.6;}
	.lawyer-view-top .lawyer-txt-box {padding: 3.5rem 0 6.5rem;}
	.lawyer-view-top .lawyer-txt-box:before {display: none;}
	.lawyer-view-top .right-con .lawyer-img {position: relative;}

	.lawyer-view-img-con {margin: 0 -0.7rem;}
	.lawyer-view-img-con .img {width: calc(50% - 1.4rem); margin: 0 0.7rem;}

	.lawyer-view-info-con dl {display: block; padding: 5rem 0 4.5rem;}
	.lawyer-view-info-con dl dt {width: 100%; margin-bottom: 2.5rem;}
	.lawyer-view-info-con dl dd {width: 100%;}
	.lawyer-view-tit {font-size: 3.1rem;}
	.lawyer-view-con .view-btn-con a {width:90%; height: 7.5rem; line-height: 7.3rem; font-size: 1.8rem;}
}
@media all and (max-width:480px){
	.lawyer-view-top .contact-box .contact-list {flex-wrap: wrap; margin: -0.5rem; padding-top: 5rem;}
	.lawyer-view-top .contact-box .contact-list li {width: calc(25% - 1rem); margin: 0.5rem;}
}

/* ******************  02. 업무사례 ********************** */
/* ***** 업무사례 상세페이지 ***** */
/* ***** 사건의뢰/법률상담 ***** */
@media all and (max-width:1280px){
	.business-view-page {padding: 5rem 0 15rem;}
}
@media all and (max-width:800px){
	.business-view-lawyer-con .lawyer-view-tit-box .lawyer-view-tit {font-size: 3.4rem;}
	.business-view-lawyer-con {padding: 10rem 0;}
	.business-view-cases-con {padding: 10rem 0;}
	.business-view-page .cm-btn-controls {margin-top: 7rem;}
	.business-view-page .cm-btn-controls a { width: 140px;height: 40px;}
}

/* ******************  03. 고객지원 ********************** */
/* ***** 사건의뢰/법률상담 ***** */
@media all and (max-width:1280px){
	.location-map-con .map {height: 60rem;}
}
@media all and (max-width:800px){
	.consult-top-con {margin-top: 5rem; padding: 7rem 0;}
	.consult-con {padding: 10rem 0 0; }
	.consult-list {margin: -1rem; padding-bottom: 10rem;}
	.consult-list li {width: calc(50% - 2rem); margin: 1rem;}
	.consult-list li a {padding: 5.4rem 2rem 5rem;}
	.consult-list li a,
	.consult-list li a.m-ver{display: flex; align-items: center; flex-direction:row-reverse; justify-content: space-between; text-align: left; padding: 2.5rem 3rem;}
	.consult-list li a.pc-ver{display: none;}
	.consult-list li a .txt-box {width: calc(100% - 7.5rem); margin-top: 0;}
	.consult-list li a .txt-box h4 {font-size: 2rem;}
	.consult-list li a .txt-box p {font-size: 1.6rem; padding-top: 0.5rem;}
	.consult-list li a .icon-box {max-height: 64px;display: flex;  justify-content: flex-end;   width: 7.5rem;height: 6.4rem;}
	.location-con {padding: 10rem 0 15rem;}
	.location-map-con .map {height: 40rem;}
	.location-qr-con {padding: 10rem 0;}
	.location-qr-con .qr-item .link-btn {font-size: 1.8rem;}
	.location-info-con {padding-bottom: 10rem;}
	.location-info-con dl {display: block; padding: 4.5rem 0;}
	.location-info-con dl dt {width: 100%;}
	.location-info-con dl dd {width: 100%; padding-top: 3rem;}
	.location-info-con dl dd p span {display: block; margin-left: 0; }
	.consult-list-con .cm-btn-controls a { width: 140px;height: 40px;}
}
@media all and (max-width:480px){
	.consult-list li {width: calc(100% - 2rem);}
	.location-qr-con {flex-wrap: wrap; margin: -1rem 0;}
	.location-qr-con .qr-item {display: flex; align-items: center; width: 100%; margin: 1rem 0;     max-width: none;}
	.location-qr-con .qr-item .qr-box {width: 45%; margin-bottom: 0; margin-right: 5%;}
	.location-qr-con .qr-item .link-btn {width: 50%;}
}

/* ******************  04. 문의하기 ********************** */
@media all and (max-width:800px){
	.consult-tit {font-size: 4.2rem; margin-bottom: 5rem;}
	.cm-name-fieldset-box .write-input {width: calc(100% - 10rem);}
	.cm-name-fieldset-box .custom-checkbox-item-box2 {width: 10rem;}
}