@charset "utf-8";

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 웹폰트  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;700&display=swap');*/ /*영문폰트*/
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap'); /*한글폰트*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;700&display=swap');*/ /*명조*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	reset css  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
* { box-sizing:border-box; }
html, body { /*height:100%;*/ }
html { font-size:10px; letter-spacing:0px; font-family:'Roboto', 'Noto Sans KR', sans-serif,“Apple SD Gothic Neo”,"맑은 고딕",“Malgun Gothic”,"돋움",dotum,sans-serif; }
body{min-width:320px; word-break: keep-all; overflow-x:hidden; line-height:1.5rem; letter-spacing:-0.1rem; margin:0 auto; font-size:1.4rem; }
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,a,button,select
{margin:0;padding:0;box-sizing:border-box; word-break:keep-all;}
body,input,textarea,select,button,table,label
{color:#333;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none; text-size-adjust:none; font-weight:400; }
h1,h2,h3,h4,h5,h6 {}
a {color:#333;text-decoration:none;}
a:link {color:#333;text-decoration:none;}
a:visited {color:#333;text-decoration:none;}
a:active {color:#333;text-decoration:none;}
a:hover {color:#333;text-decoration:none;}
a:focus {outline:none;}
span, a, em, button {display:inline-block;}
img,fieldset,iframe{border:0;}
img {max-width:100%;vertical-align:top;}
ul, li{list-style:none;}
em,address{font-style:normal;}
input,select,button{vertical-align:middle;}
input[type="checkbox"]{padding:1px;}
caption,legend,.blind{overflow:hidden;position:absolute;top:0;left:-9999px;width:0;height:0;font-size:0;line-height:0;text-align:left;}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button]
{width:100%;height:3.8rem;padding:0 10px;border:1px solid #ccc;color:#333;vertical-align:middle;-webkit-appearance:none; }
input[type=password],input[type=email]{ime-mode:disabled;}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
select:focus,
textarea:focus{border:1px solid #999;}
input[type=file]{width:99.5%;height:38px;border:1px solid #ccc;background:#fff;}
select{height:38px;padding-left:5px;border:1px solid #ccc;font-size:1.5rem;color:#333;vertical-align:middle;}
textarea{width:100%;padding:10px;border:1px solid #ccc;font-size:1.5rem;color:#333;resize:none;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
table th {font-weight:normal;}
hr{display:none;}
label {cursor:pointer;}
button[type='button'] {cursor:pointer;}
button:focus,
input:focus  { outline: 0; }

:root {
  --main:#47423e;
}


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	공통  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.hidden { position:absolute; font-size:0; line-height:0; left:-10000px; padding:0 !important; margin:0; height:0;}
.f-left {float:left !important;}
.f-right {float:right !important;}
.dis-block {display:block !important;}
.dis-none {display:none !important;}
.text-c {text-align:center !important;}
.text-l {text-align:left !important;}
.text-r {text-align:right !important;}
.vt-t {vertical-align:top !important;}
.vt-m {vertical-align:middle !important;}
.vt-b {vertical-align:bottom !important;}
.bg-none {background:none !important;}
.border-none {border:none !important;}
.clearfix:after {content:"";display:block;clear:both;}
.en {font-family:'Roboto', sans-serif !important; }
/* ios */
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration:none !important;
  font-size:inherit !important;
  font-family:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  white-space:nowrap;
}
.mt0 { margin-top:0rem !important; }
.mt5 { margin-top:0.5rem !important; }
.mt10 { margin-top:1rem !important; }
.mt20 { margin-top:2rem !important; }
.mt30 { margin-top:3rem !important; }
.mt40 { margin-top:4rem !important; }
.mt50 { margin-top:5rem !important; }
.mt60 { margin-top:6rem !important; }
.mt70 { margin-top:7rem !important; }
.mt80 { margin-top:8rem !important; }
.mt90 { margin-top:9rem !important; }
.mt100 { margin-top:10rem !important; }


/* 말줄임 */
.line1-text-eps { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display:block; }
.line2-text-eps { display:block; line-height:1.5em; max-height:3em; display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }
.line3-text-eps { display:block; line-height:1.5em; max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }
.line4-text-eps { display:block; line-height:1.5em; max-height:6em; display:-webkit-box; -webkit-line-clamp:4; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }

/* 폰트 */
.bold { font-weight:700 !important; }
.semiBold { font-weight:500 !important; }
.red { color:#ed1c24 !important; }
.org_text { color:#d66603 !important; }

/* 리스트 */
ul.list_bullet { }
ul.list_bullet li { background:url(../images/common/list_bullet_3x3.png)0.1rem 0.5rem no-repeat; padding-left:0.8rem; line-height:1.2; }
ul.list_bullet li + li { margin-top:1rem; }

/* check, radio 타입 */
span.check_type { position:relative; padding-left:15px; cursor:pointer; }
span.check_type input[type="checkbox"],
span.check_type input[type="radio"] { display:none; }
span.check_type input + label { font-size:1.5rem; }
span.check_type input + label:before { width:12px; height:12px; content:''; display:block; position:absolute; top:50%; left:0; background:url(../images/common/check_type.png); background-size:100%; background-position:0 -100%; transform:translateY(-50%); }
span.check_type input:checked + label:before { background-position:0 0; }

/* /////////////// Skip Navigation ////////////////////// */
.skip_navi {position:absolute;left:0;top:0;width:100%;text-align:center;z-index:999999;}
.skip_navi li a {position:absolute;top:0; left:0; margin-top:-100px; display:block;}
.skip_navi li a:focus,
.skip_navi li a:hover,
.skip_navi li a:active {width:100%; height:40px; margin:0; font-size:1.2em; line-height:40px;color:#fff;text-align:center; background-color:#23314a; }


/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) { 

}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) { 
	html { font-size:9.5px; }
	
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 766px) { 
	html { font-size:9px; }
	.not_scroll{  position:fixed; overflow:hidden; width:100%; }
	
	
	/* 작은해상도 가로스크롤 */
	.overflow-wrap { position:relative; }
	.overflow-x { overflow-x :auto; position:relative; }	
	.overflow-wrap:before { position:absolute; width:30px; height:100%; top:0; bottom:0; right:0; content:''; background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3)); z-index:2;}
}

 
 

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// layout  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/

/* header */
.nav_wrapper { z-index:100; position:fixed; left:0; top:0; width:100%; transition:all .5s ease-out; background:#fff; height:9rem; box-shadow:0 1px 5px rgba(0,0,0,0.2); }
.nav_wrapper .inner { width:100%; max-width:1800px; margin:0 auto; position:relative; height:9rem; }
.nav_wrapper h1.logo { position:absolute; left:0; top:50%; width:21rem; height:4.6rem; transform:translateY(-50%); z-index:100; }
.nav_wrapper h1.logo a { display:block; }
.nav_wrapper h1.logo a img { width:100%; }
.nav_wrapper.no-scroll { top: 0; z-index: 9999; }
.nav_wrapper.hover { background:#fff; }
.nav_wrapper.scroll { top:-5px; background:#fff; }
.nav_wrapper .tel_wrap { position:absolute; top:0; right:0; /*width:23rem;*/ width:25rem; text-align:center; background:#113f7d; height:100%; color:#8cddff; font-size:2.0rem; line-height:2.8rem; padding-top:1.5rem;}
.nav_wrapper .tel_wrap .tel { color:#fff; /*font-size:1.7rem; line-height:9rem;*/ font-size:1.9rem; }
.nav_wrapper .tel_wrap .tel a { cursor:text; /*font-size:1.9rem;*/ color:#fff; font-weight:500; letter-spacing:-0.05rem;}
.spinner-master { display:none; }
.mobile_menu { position:relative; height:9rem; width:100%; padding-right:230px; }
.mobile_menu:after { display:block; clear:both; content:''; }
.mobile_menu .gnb_menu { position:relative; float:right; margin-right:1.5rem; }
.mobile_menu .gnb_menu .m_nav {  }
.mobile_menu .gnb_menu .m_nav:after { display:block; clear:both; content:''; }
.mobile_menu .gnb_menu .m_nav li { display:block; float:left; }
.mobile_menu .gnb_menu .m_nav li a { color:#000; font-size:1.7rem; padding:0 2.5rem; line-height:9rem; font-weight:500; position:relative; color:#000; padding:0 3.5rem; }
.mobile_menu .gnb_menu .m_nav li a:hover,
.mobile_menu .gnb_menu .m_nav li.active a { color:#15356e; }
.mobile_menu .gnb_menu .m_nav li + li a:before { width:3px; height:3px; background:#333; border-radius:50%; display:block; content:''; position:absolute; left:0; top:50%; transform:translate(-50%,-50%); }
.mobile_menu .gnb_menu .m_nav li a:after  { width:0; position:absolute; bottom:0; left:50%; height:3px; background:#15356e; display:block; content:''; transform:translateX(-50%); transition:all 0.3s; }
.mobile_menu .gnb_menu .m_nav li a:hover:after,
.mobile_menu .gnb_menu .m_nav li.active a:after {  width:90%; transition:all 0.3s; }


/* footer */
.section.footer { height:auto !important; letter-spacing:0; color:#555; font-size:1.4rem; background:#f1f1f1; }
.section.footer .fp-tableCell { height:auto !important; }
.section.footer .inner { width:100%; max-width:1220px; padding:4rem 1.5rem 10rem !important; margin:0 auto; height:auto !important; }
.section.footer .inner:after { display:block; clear:both; content:''; }
.footer .left { width:48%; float:left; }
.footer .right { width:48%; float:right; }
.footer .left .contact { padding-bottom:2rem; border-bottom:1px solid #ccc; }
.footer .left .contact h2 { color:#111; font-size:1.8rem; line-height:1.2; margin-bottom:1.5rem; font-weight:200; }
.footer .left .contact h2 strong { font-weight:500; font-size:1.9rem; }
.footer .left .contact .contact_num { font-size:2rem; font-weight:600; }
.footer .left .contact .contact_num .tel { color:#7d6a53; font-size:3rem; font-weight:600; }
.footer .left .contact .contact_num span + span { margin-left:1rem; padding-left:1rem; position:relative; }
.footer .left .contact .contact_num span + span:before { width:1px; height:10px; background:#ccc; content:''; display:block; position:absolute; top:0; left:0; }
.footer .left .copyright_wrap { margin-top:2rem; }
.footer .left .copyright_wrap p { line-height:2.2rem; font-size:1.4rem; color:#555; }
.footer .left .copyright_wrap p span { display:inline-block;  position:relative; }
.footer .left .copyright_wrap p span + span { margin-left:0.6rem; padding-left:0.7rem; }
.footer .left .copyright_wrap p span + span:before { width:1px; height:10px; background:#ccc; content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); }
.footer .left .copyright_wrap .copyright { margin-top:0.5rem; }
.footer .right .officeinfo_wrap {}
.footer .right .officeinfo_wrap h2 { font-size:1.6rem; text-transform:uppercase; font-weight:700; line-height:1.2; margin-bottom:1.5rem; color:#111; }
.footer .right .officeinfo_wrap li { position:relative; padding-left:0.8rem; }
.footer .right .officeinfo_wrap li:before { display:block; width:3px; height:3px; border-radius:50%; background:#555; content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); }
.footer .right .officeinfo_wrap li + li { margin-top:0.7rem;  }
#sub_footer { background:#f1f1f1; }
#sub_footer .inner { width:100%; max-width:1220px; padding:4rem 1.5rem 10rem; margin:0 auto;  }
#sub_footer .inner:after {  display:block; clear:both; content:''; }

.foot-nav { display:none; height:55px; background: #15356e; font-size: 0; position: fixed; left:0; right: 0; bottom:0; z-index: 66}
.foot-nav li { height:55px; text-align: center; display: inline-block;  width: 33.333%;  font-size: 15px; border: 1px solid rgba(256, 256, 256, 0.1); display: block; float: left; box-sizing: border-box;}
.foot-nav li a {padding: /* 15px */10px 0; color: #fff; display: inline-block; background-repeat: no-repeat; background-position: 0 50%;}
.foot-nav .call a {line-height: 30px; padding-left: 30px; background-image: url(../../images/common/ico_foot1.png); background-size: 24px 24px; }
.foot-nav .mobile a {line-height: 30px; padding-left: 18px; background-image: url(../../images/common/ico_foot2.png); background-size: 13px 20px;}
/* .foot-nav .talk {border-right: 0;} */
.foot-nav .talk a {line-height: 30px; padding-left: 28px; background-image: url(../../images/common/ico_foot3.png); background-size: 23px 20px;}

/* center */
#center { padding-top:9rem; }

/* snb */
.snb_wrap { text-align:center; margin-bottom:3rem; margin-top:-3rem; }
.snb_wrap ul.sub_nav {  }
.snb_wrap ul.sub_nav:after { display:block; clear:both; content:''; }
.snb_wrap ul.sub_nav li { margin:0; float:left; width:16.6666%; padding:1px; width:14.2857%; }
.snb_wrap ul.sub_nav li a {  line-height:5rem; width:100%;  text-align:center; display:block; font-size:1.7rem; color:#333; border:1px solid #333; cursor:pointer; }
.snb_wrap ul.sub_nav li.on a { background:#9e8c71; color:#fff; border:1px solid #705b3b; }
.snb_wrap ul.sub_nav { display:flex; justify-content:space-between; }
.snb_wrap ul.sub_nav li {flex-grow:1; }

@media all and (max-width: 766px) {
	.snb_wrap ul.sub_nav { flex-wrap:wrap; justify-content:center; }
	.snb_wrap ul.sub_nav li a span { font-size:9px; }
}

/* 20210715 오른쪽 고객상담신청 배너*/
.consult-page .pc-page { display:inline-block !important; }
.consult-page .mobile-page { display:none !important; }
.quick-wrap { position:fixed; right:0; top:0; width:60px; height:100%; overflow:hidden; cursor:pointer; transition:0.5s; z-index:99999; font-size:1.4rem; color:#fff; }
.quick-wrap .quick-btn-wrap {position:absolute; left:0; top:0; width:60px;  height:100%; background:url(../images/quick_btn_bg.gif); transition:0.5s; z-index:100; }
.quick-wrap:hover, .quick-wrap:hover .quick-btn-wrap {transition:0.5s;}
.quick-wrap .quick-btn-wrap .quick-btn { font-size:1.6rem; color:#ccac4b; position:absolute; display:block; left:50%; top:45%; transform:translate(-50%, -50%) rotate(90deg); text-align:center; width:18rem; letter-spacing:0;
line-height:2.4rem; }
.quick-wrap .quick-btn-wrap .quick-btn:after { content:''; display:inline-block; width:2.4rem; height:2.4rem; background:url(../images/quick_btn_arw.png)no-repeat; background-size:contain; margin-left:1.5rem; 
transform:rotate(-90deg); vertical-align:middle; }
.consult-wrap{ position:absolute; min-height:100%; left:60px; top:0px; background:#3b3835; transition:0.5s; padding:4rem 3.9rem 0; z-index:10; width:450px; overflow-y:auto; cursor:default; }
.consult-wrap .consult-title { font-size:2.6rem; color:#b5aea4; margin-bottom:0.5rem; line-height:3.6rem; }
.consult-wrap .consult-title-text { line-height:1.6rem; font-size:1.4rem; color:#fff; margin-bottom:1.5rem; font-weight:200; }
.consult-wrap .step-wrap { margin-bottom:1.5rem;  }
.consult-wrap .step-wrap img { width:366px; }
.consult-wrap .step-list li { font-size:1.3rem; color:rgba(255,255,255,0.7); font-weight:200; line-height:1.6rem; padding-left:2.2rem; position:relative; }
.consult-wrap .step-list li:before { line-height:1.6rem; position:absolute; top:0; left:0; text-align:left; font-weight:500; color:#fff; font-size:1.3rem; }
.consult-wrap .step-list li.o_1:before { content:'01.'; }
.consult-wrap .step-list li.o_2:before { content:'02.'; }
.consult-wrap .step-list li.o_3:before { content:'03.'; }
.consult-wrap .step-list li.o_4:before { content:'04.'; }
.consult-wrap .step-list li.o_5:before { content:'05.'; }
.consult-wrap .step-list li + li { margin-top:0.8rem; }
.consult-wrap .consult-form { margin-top:1.5rem; }
.consult-wrap .consult-form .consult-input + .consult-input { margin-top:0.5rem; }
.consult-wrap .consult-form .consult-input input,
.consult-wrap .consult-form .consult-input select,
.consult-wrap .consult-form .consult-input textarea 
{ border:1px solid rgba(255,255,255,.2); line-height:2rem; padding:1rem; background:transparent; color:#fff; width:100%; font-size:1.4rem; font-weight:300; 
font-family:'Roboto', 'Noto Sans KR', sans-serif,“Apple SD Gothic Neo”,"맑은 고딕",“Malgun Gothic”,"돋움",dotum,sans-serif;}
.consult-wrap .consult-form .consult-input input::placeholder,
.consult-wrap .consult-form .consult-input textarea::placeholder { color:#fff; font-size:1.4rem; font-weight:300; }
.consult-wrap .consult-form .consult-input textarea { height:8rem;  }
.consult-wrap .consult-form .consult-input select option { background:#3b3835; color:#fff; }
.consult-wrap .consult-agree { margin-top:1rem; }
.consult-wrap .consult-agree label { color:#fff; }
.consult-wrap .consult-agree-text { font-size:1.3rem; color:rgba(255,255,255,0.5); font-weight:200; margin-top:0.5rem; }
.consult-wrap .consult-btn-wrap { margin-top:2rem; }
.consult-wrap .consult-btn-wrap .consult-btn { width:100%; line-height:5rem; background:#7c7358; text-align:center; display:block; font-size:1.8rem; color:#fff; border:1px solid #9e9373; position:relative; }
.consult-wrap .consult-btn-wrap .consult-btn:before { position:absolute; bottom:-1rem; left:0; width:100%; height:100%; content:''; background:url(../images/btn_shadow.png); background-size:100% 100%; 
z-index:-1; }
.consult-wrap .consult-form .captchaWrap { display:flex; justify-content:space-between; align-items:center; gap:5px; }
.consult-wrap .consult-form .captchaWrap span { }
.consult-wrap .consult-form .captchaWrap .captchaDiv { flex-grow:1; display:flex; gap:1px; align-items:center; }
.consult-wrap .consult-form .captchaWrap .captchaDiv img { height:38px; }

@media all and (max-width: 1919px) { 
	.nav_wrapper .inner.new { margin-right:60px; width:calc(100% - 60px); }
}

/*고객상담신청 서브 페이지 */
.consult-wrap.m_sub { position:relative; min-height:auto; height:auto; left:0px; top:0px; width:100%; padding:5rem 2rem;  }
.consult-wrap.m_sub .consult-btn-wrap { margin-top:5rem; }
#center .sub_08 + .sub_containter .inner { padding:0; max-width:initial; background:#3b3835; }
#center .sub_08 + .sub_containter .inner .consult-wrap.m_sub { max-width:800px; margin-left:auto; margin-right:auto; }



/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) { 
	/* header */
	.nav_wrapper .tel_wrap { width:21rem; }
	.mobile_menu { padding-right:21rem; }
	.mobile_menu .gnb_menu { margin-right:0; }
	.mobile_menu .gnb_menu .m_nav li a { padding:0 1.5rem; font-size:1.6rem; }
	


	
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) { 
	/* header */
	.nav_wrapper {  height:7.6rem; }
	.nav_wrapper .inner { height:7.6rem; }
	.nav_wrapper h1.logo { position:absolute; left:10px; top:50%; width:21rem; height:4.6rem; transform:translateY(-50%);  }
	.nav_wrapper .tel_wrap { right:7.6rem; font-size:1.8rem; }
	.nav_wrapper .tel_wrap .tel { /*line-height:7.6rem;*/ font-size:1.8rem; }	
	.spinner-master { width:7.6rem; height:7.6rem; background:#0f2855; z-index:999; position:absolute; top:0; right:0px; text-align:center; display:block; }
	.spinner-master input[type=checkbox] { display:none; }
	.spinner-master * { transition:all 0.3s; box-sizing:border-box; }
	.spinner-master label { cursor:pointer; position:absolute; z-index:101; height:100%; width:100%; top:0; left:0; padding:1.6rem 2rem; }
	.spinner-master .spinner { position:absolute; height:3px; width:100%; padding:0; background-color:#fff; border-radius:2px; }
	.nav_wrapper.hover .spinner-master .spinner,
	.nav_wrapper.scroll .spinner-master .spinner  { background-color:#fff; transition:all 0.3s ease; }
	.spinner-master .diagonal.part-1 { position:relative; float:left; margin-top:0.8rem; }
	.spinner-master .horizontal { position:relative; float:left; margin-top:0.8rem; }
	.spinner-master .diagonal.part-2 { position:relative; float:left; margin-top:0.8rem; }
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity: 0; }
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { transform:rotate(135deg); -webkit-transform:rotate(135deg); margin-top:1.8rem;	background-color:#fff; }
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 { transform: rotate(-135deg);  -webkit-transform:rotate(-135deg);  margin-top:-1.3rem; background-color:#fff; } 
	
	.mobile_menu { display:block; position:fixed; height:100%;
	right:0;
	top: 0;
	visibility: hidden;
	z-index: 1;
	width: 100%;
	padding:0;
	overflow-y: auto;
	z-index:100;
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;  
	-moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
	transition: transform .4s 0s, visibility 0s .4s;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
	}
	.mobile_menu.active {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
	visibility: visible;
	-webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
	-moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
	transition: transform .4s 0s, visibility 0s 0s;
	/* smooth the scrolling on touch devices - webkit browsers */
	-webkit-overflow-scrolling: touch;
	} 
	
	.mobile_menu {  width:100%; padding-right:0px; background:#0f2855; margin-top:7.6rem;}
	.mobile_menu .gnb_menu { float:none; margin:0; display:block; width:100%; }
	.mobile_menu .gnb_menu .m_nav { width:100%;}
	.mobile_menu .gnb_menu .m_nav li { display:block; float:none; width:100%; border-bottom:1px solid rgba(255,255,255,0.2);  }	
	.mobile_menu .gnb_menu .m_nav li a { color:#fff; font-size:1.7rem; padding:2rem; line-height:2rem; width:100%; display:block; text-align:center;}	
	.mobile_menu .gnb_menu .m_nav li a:hover,
	.mobile_menu .gnb_menu .m_nav li.active a { color:#fff; }
	.mobile_menu .gnb_menu .m_nav li + li a:before { display:none; }
	.mobile_menu .gnb_menu .m_nav li a:after  { display:none; }
	
	/* center */
	#center { padding-top:7.6rem; }
	
	/*20210714 오른쪽 고객상담 추가 */
	.consult-page .pc-page { display:none !important; }
	.consult-page .mobile-page { display:block !important; }
	.nav_wrapper .inner.new { margin-right:0px; width:100%; }
	.quick-wrap { display:none; }
	.quick-wrap .consult-wrap.pc-form form { display:none !important; }

}



/* ================================== Mobile css ================================== */

@media all and (max-width: 767px) {
	/* header */
	.nav_wrapper {  height:6rem; }
	.nav_wrapper .inner { height:6rem; }	
	.nav_wrapper h1.logo { position:absolute; left:10px; top:50%; width:160px; height:36px; transform:translateY(-50%);  }
	.nav_wrapper .tel_wrap { right:6rem; width:6rem; height:6rem; background-color:transparent; padding-top:0; }
	.nav_wrapper .tel_wrap .tel { line-height:0; font-size:0; width:6rem; height:6rem; }
	.nav_wrapper .tel_wrap .tel_1 { display:none; }
	.nav_wrapper .tel_wrap .tel span { display:none; }
	.nav_wrapper .tel_wrap .tel a { line-height:0; font-size:0; display:block; width:6rem; height:6rem; background:url(../images/common/tel_icon.png)center center no-repeat; background-size:70%; }	
	.spinner-master { width:6rem; height:6rem; }
	.spinner-master label { padding:0.8rem 1em; }
	.spinner-master .spinner { height:2px; }	
	.mobile_menu { margin-top:6rem;}
	
	/* center */
	#center { padding-top:6rem; }	
	
	/* footer */
	.section.footer {  height:auto !important; font-size:1.2rem; }
	.section.footer .fp-tableCell { height:auto !important; }
	.section.footer .inner { height:auto !important; }
	.footer .left { width:100%; float:none; }
	.footer .right { width:100%; float:none; margin-top:2rem; }
	.footer .left .contact { padding-bottom:2rem; border-bottom:1px solid #ccc; }
	.footer .left .contact h2 { color:#111; font-size:1.8rem; line-height:1.2; margin-bottom:1.5rem; font-weight:200; }
	.footer .left .contact h2 strong { font-weight:500; font-size:1.9rem; }
	.footer .left .contact .contact_num { font-size:2rem; font-weight:600; }
	.footer .left .contact .contact_num .tel { color:#7d6a53; font-size:3rem; font-weight:600; }
	.footer .left .contact .contact_num span + span { margin-left:1rem; padding-left:1rem; position:relative; }
	.footer .left .contact .contact_num span + span:before { width:1px; height:10px; background:#ccc; content:''; display:block; position:absolute; top:0; left:0; }
	.footer .left .copyright_wrap { margin-top:2rem; }
	.footer .left .copyright_wrap p { line-height:2.2rem; font-size:1.2rem; color:#555; }
	.footer .left .copyright_wrap p span { display:inline-block;  position:relative; }
	.footer .left .copyright_wrap p span + span { margin-left:0.4rem; padding-left:0.5rem; }
	.footer .left .copyright_wrap p span + span:before { width:1px; height:10px; background:#ccc; content:''; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); }
	.footer .left .copyright_wrap .copyright { margin-top:0.5rem; }
	.footer .right .officeinfo_wrap {}
	.footer .right .officeinfo_wrap h2 { font-size:1.5rem; text-transform:uppercase; font-weight:700; line-height:1.2; margin-bottom:1rem; color:#111; }
	.footer .right .officeinfo_wrap li { position:relative; padding-left:0.8rem; }
	.footer .right .officeinfo_wrap li:before { display:block; width:3px; height:3px; border-radius:50%; background:#555; content:''; position:absolute; top:5px; left:0; transform:translateY(0); }
	.footer .right .officeinfo_wrap li + li { margin-top:0.7rem;  }

	.foot-nav { display:block; }
	
	/* snb */
	.snb_wrap { text-align:center; margin-bottom:3rem; margin-top:-3rem; }
	.snb_wrap ul.sub_nav li a { line-height:3.2rem; font-size:1.3rem; padding:0.1rem; }

	
	
	

}/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
@charset "utf-8";

/* ========== 공통 ========== */
#main { margin-top:90px; }
.section { }
@media all and (max-width: 1080px) {
	#main { margin-top:7.6rem; }
}	

@media all and (max-width: 767px) {
	#main { margin-top:6rem; }
}


/* =========================
   메인이미지 (scoped)
   ========================= */
#mainHero{
  position:relative;
  width:100%;
  height:calc(100vh - 173px);
  overflow:hidden;
  background:#111;
}

/* ✅ YouTube 레이어 */
#mainHero .hero_yt{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}

/* 16:9 유지하면서 화면 꽉 채우기 (cover) */
#mainHero .hero_yt_iframe{
  position:absolute;
  top:50%;
  left:50%;
  width: max(100%, calc(100 * 16 / 9 * 1%));   /* fallback용 */
  height: max(100%, calc(100 * 9 / 16 * 1%));  /* fallback용 */

  /* 핵심: 부모 기준으로 가로/세로 중 큰 값으로 늘려 덮기 */
  width: max(100vw, calc(var(--heroH, 100vh) * 16 / 9));
  height: max(var(--heroH, 100vh), calc(100vw * 9 / 16));

  transform: translate(-50%, -50%) scale(1.02);
  pointer-events:none;
}


/* 어두운 오버레이 */
#mainHero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(0,0,0,.45);
  pointer-events:none;
}

/* 가운데 텍스트 */
#mainHero .hero_center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  text-align:center;
  color:#fff;
  padding:0 16px;
  width:min(920px, 92%);
}

/* ✅ 최초 1회 등장 애니메이션 */
#mainHero .hero_center .hero_sub,
#mainHero .hero_center .hero_title,
#mainHero .hero_center .hero_en{
  opacity:0;
  transform: translateY(10px);
}
#mainHero .hero_center.is-animate .hero_sub{  animation: heroIn .8s ease forwards; }
#mainHero .hero_center.is-animate .hero_title{animation: heroIn .8s ease .08s forwards; }
#mainHero .hero_center.is-animate .hero_en{   animation: heroIn .8s ease .16s forwards; }

@keyframes heroIn{
  to{ opacity:1; transform: translateY(0); }
}

#mainHero .hero_sub{ margin:0 0 30px; font-size:52px; font-weight:300; letter-spacing:-0.4px; }
#mainHero .hero_title{ margin:0; font-size:52px; font-weight:900; letter-spacing:-1px; line-height:1.05; }
#mainHero .hero_en{ margin:50px 0 0; font-size:16px; letter-spacing:1px; opacity:.9; }

@media (max-width: 1200px){
  #mainHero .hero_sub{ font-size:46px; }
  #mainHero .hero_title{ font-size:46px; }
}
@media (max-width: 768px){
  #mainHero{
    height: calc(var(--vh, 1vh) * 100); /* JS가 넣어주는 실제 vh */
    min-height: 560px; /* 너무 낮아지는 기기 방지(원하면 조절) */
  }
  #mainHero .hero_sub{ font-size:28px; margin-bottom:15px; }
  #mainHero .hero_title{ font-size:28px; }
  #mainHero .hero_en{ font-size:12px; letter-spacing:1.6px; margin-top:25px; }
}



/* =========================
   STATS SECTION
   ========================= */
#statsSection{
  padding: 180px 0 380px;
  background: url('/images/202601/main/stat_bg.jpg') center/cover no-repeat;
}

#statsSection .stats_inner{
  max-width: 1480px;
  margin:0 auto;
  padding: 0 24px;

  display:grid;
  grid-template-columns: 1fr 2fr; /* 왼쪽 타이틀 / 오른쪽 카드 */
  gap: 48px;
  align-items:start;
}

/* 타이틀 */
#statsSection .stats_title{
  margin:0;
  font-size:56px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.8px;
  color:#111;
}

/* 카드 영역 */
#statsSection .stats_grid{
  display:grid;
  grid-template-columns: repeat(2, 400px); /* ✅ 카드 배경 400 고정 */
  justify-content:end;
  gap: 190px 90px;

  /* 스크롤로 더 보이게: 기본은 아래로 늘어남(문서 스크롤) */
}

/* 카드 */
#statsSection .stat_card{
  width:400px;             /* ✅ 400 x 450 */
  height:450px;
  position:relative;
  display:block;
  text-decoration:none;
  color:#fff;

  background-image: var(--bg);
  background-size: cover;
  background-position:center;
  border-radius: 0;        /* 첨부처럼 각진 느낌 */
  overflow:hidden;

  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* 내부 텍스트 패딩 */
#statsSection .stat_overlay{
  position:relative;
  z-index:1;
  padding: 60px 34px 30px;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* 라벨/숫자/설명 */
#statsSection .stat_label{
  font-size:32px;
  font-weight:700;
  letter-spacing:-0.3px;
  opacity:.95;
}

#statsSection .stat_num{
  margin-top: 18px;
  font-size:72px;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1;
  display:flex;
  align-items:flex-end;
  gap:6px;
}

#statsSection .stat_num .plus{
  font-size:34px;
  font-weight:800;
  opacity:.95;
  transform: translateY(-6px);
}

#statsSection .stat_desc{
  margin-top:70px;
  font-size:18px;
  line-height:1.6;
  opacity:.9;
  word-break:keep-all;
  letter-spacing:-0.2px;
}

/* ✅ PC 어긋나게 (스태거) */
#statsSection .stat_card.is-up{ transform: translateY(-34px); }
#statsSection .stat_card.is-down{ transform: translateY(250px); }

/* Hover (PC에서만) */
@media (hover:hover) and (pointer:fine){
  #statsSection .stat_card{
    border-radius: 0; /* 기본은 각진 상태 */
    transition:
      border-radius .25s ease,
      box-shadow .25s ease;
  }

  #statsSection .stat_card:hover{
    border-radius: 30px; /* ✅ hover 시만 라운드 */
    box-shadow: 0 22px 56px rgba(0,0,0,.18);
  }
}

/* 반응형 */
@media (max-width: 1200px){
  #statsSection{ padding: 90px 0 380px; }
  #statsSection .stats_inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  #statsSection .stats_title{ font-size:40px; margin-bottom:50px; }

  /* 화면이 좁아지면 카드 폭도 유연하게 */
  #statsSection .stats_grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content:stretch;
  }
  #statsSection .stat_card{
    width:100%;
    height:420px;
  }
}

/* ✅ 모바일: 어긋나지 않고 2x2 */
@media (max-width: 768px){
  #statsSection{ padding: 70px 0 80px; }
  #statsSection .stats_inner{ padding:0 14px; }
  #statsSection .stats_title{ font-size:30px; margin-bottom:10px; }

  #statsSection .stats_grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #statsSection .stat_card{
    width:100%;
    height:220px;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
  }

  /* ✅ 모바일에서는 스태거 제거 */
  #statsSection .stat_card.is-up,
  #statsSection .stat_card.is-down{
    transform:none;
  }

  #statsSection .stat_overlay{
    padding: 18px 16px 16px;
  }
  
  #statsSection .stat_label{ font-size:14px; }
  #statsSection .stat_num{ font-size:38px; margin-top:10px; }
  #statsSection .stat_num .plus{ font-size:18px; transform: translateY(-3px); }
  #statsSection .stat_desc{ margin-top:30px; font-size:12px; line-height:1.45; }
}



/* =========================
   변호사 Grid Section
   ========================= */

#lawyerGridSection{
  padding:180px 0 200px;
  background:#fff;
}

/* ✅ 상단 타이틀(좌/우) */
#lawyerGridSection .lawyer_head{
  max-width:1400px;
  margin:0 auto 55px;
  padding:0 24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

#lawyerGridSection .lawyer_head_left{
  flex:0 0 auto;
}

#lawyerGridSection .lawyer_head_title{
  margin:0;
  font-size:56px;
  line-height:1.12;
  letter-spacing:-0.8px;
  font-weight:900;
  color:#111;
}

#lawyerGridSection .lawyer_head_right{
  flex:1 1 auto;
  display:flex;
  justify-content:flex-end;
}

#lawyerGridSection .lawyer_head_desc{
  margin:10px 0 0;
  max-width:560px;
  font-size:14px;
  line-height:1.75;
  color:#666;
  text-align:right;
  letter-spacing:-0.2px;
}

/* ✅ 그리드 */
#lawyerGridSection .lawyer_grid{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px;

  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:28px;
}

/* 카드 */
#lawyerGridSection .lawyer_card{
  position:relative;
  display:block;
  text-decoration:none;
  color:#111;

  border-radius:14px;
  overflow:hidden;
  background:#f5f5f5;

  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transform:translateY(0);
  transition:transform .25s ease, box-shadow .25s ease;
}

#lawyerGridSection .lawyer_pic{
  position:relative;
  aspect-ratio:3 / 4;
  background:#eee;
}
#lawyerGridSection .lawyer_pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .35s ease;
}

/* ✅ 하단 오버레이(배경 강화 버전) */
#lawyerGridSection .lawyerInfo{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  padding:16px 16px 14px;
  color:#fff;

  background:
    linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35), rgba(0,0,0,0)),
    rgba(0,0,0,.35);

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}

#lawyerGridSection .lawyerInfo .info01{
  font-size:16px;
  font-weight:900;
  letter-spacing:-0.3px;
  margin-bottom:6px;
  line-height:1.25;
}
#lawyerGridSection .lawyerInfo .info02{
  font-size:14px;
  font-weight:600;
  opacity:.92;
  margin-bottom:10px;
  line-height:1.3;
}
#lawyerGridSection .lawyerInfo .lawyername{
  font-size:18px;
  font-weight:900;
  letter-spacing:-0.3px;
  line-height:1.2;
}

/* hover (PC만) */
@media (hover:hover) and (pointer:fine){
  #lawyerGridSection .lawyer_card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(0,0,0,.10);
  }
  #lawyerGridSection .lawyer_card:hover .lawyer_pic img{
    transform:scale(1.06);
  }
}

/* =========================
   Responsive
   ========================= */
@media (max-width:1200px){
  #lawyerGridSection{ padding:80px 0 90px; }

  #lawyerGridSection .lawyer_head{
    margin-bottom:40px;
	align-items:flex-start;
  }
  #lawyerGridSection .lawyer_head_title{
    font-size:42px;
  }

  #lawyerGridSection .lawyer_grid{
    gap:18px;
  }
}

@media (max-width:768px){
  /* 헤더는 세로로 */
  #lawyerGridSection .lawyer_head{
    flex-direction:column;
    gap:14px;
    margin-bottom:26px;
    padding:0 14px;
  }

  #lawyerGridSection .lawyer_head_title{
    font-size:30px;
    line-height:1.18;
  }

  #lawyerGridSection .lawyer_head_right{
    justify-content:flex-start;
  }
  #lawyerGridSection .lawyer_head_desc{
    text-align:left;
    max-width:100%;
    font-size:13px;
    margin:0;
  }

  /* ✅ 모바일 3열 */
  #lawyerGridSection .lawyer_grid{
    padding:0 14px;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
  }

  #lawyerGridSection .lawyerInfo{
    padding:12px 10px 10px;
  }
  #lawyerGridSection .lawyerInfo .info01{ font-size:13px; margin-bottom:4px; }
  #lawyerGridSection .lawyerInfo .info02{ font-size:12px; margin-bottom:6px; }
  #lawyerGridSection .lawyerInfo .lawyername{ font-size:13px; }
}

/* 아주 작은 폰(선택) */
@media (max-width:390px){
  #lawyerGridSection .lawyer_grid{ gap:10px; }
  #lawyerGridSection .lawyerInfo .info02{ display:none; }
}



/* =========================
   4분할 배경 메뉴 (scoped)
   ========================= */
#mainQuadMenu{
  display:flex;
  gap:0;                 /* 딱 붙이기(여백 주려면 10px 등) */
  width:100%;
  overflow:hidden;
}

/********
4Depth 
***********/
/* =========================
   4분할 배경 메뉴 (scoped)
   ========================= */
#mainQuadMenu{
  display:flex;
  gap:0;
  width:100%;
  overflow:hidden;
}

/* ✅ PC는 항상 25%씩 4등분 */
#mainQuadMenu .qm_item{
  position:relative;
  flex: 0 0 25%;
  width:25%;
  height:1000px;

  min-width:0;
  text-decoration:none;
  color:#fff;

  background-image: var(--bg);
  background-size:cover;
  background-position:center;

  isolation:isolate;
}

#mainQuadMenu .qm_item::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:0;
}

#mainQuadMenu .qm_title{
  position:absolute;
  top:70px;
  left:60px;
  z-index:1;

  font-size:48px;
  font-weight:800;
  letter-spacing:-0.5px;
  line-height:1.1;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* 서브문구 */
#mainQuadMenu .qm_desc{
  position:absolute;
  top:140px;          /* 타이틀 아래 위치(필요시 조정) */
  left:60px;
  z-index:1;

  max-width:70%;
  font-size:18px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:-0.2px;

  color:rgba(255,255,255,.85);
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* 중간 화면 조정 */
@media (max-width: 1200px){
  #mainQuadMenu .qm_item{ height:720px; }
  #mainQuadMenu .qm_title{
    top:40px;
    left:28px;
    font-size:34px;
  }
  
  #mainQuadMenu .qm_desc{
    top:100px;
    left:28px;
    font-size:15px;
    max-width:78%;
  }
}

/* 모바일: 세로 스택 */
@media (max-width: 768px){
  #mainQuadMenu{ flex-direction:column; }

  #mainQuadMenu .qm_item{
    flex:0 0 auto;
    width:100%;
    height:200px;
  }

  #mainQuadMenu .qm_title{
    top:44px;
    left:20px;
    font-size:28px;
  }
  
  #mainQuadMenu .qm_desc{
    top:90px;
    left:20px;
    font-size:14px;
    max-width:88%;
  }
}

/* =========================
   Hover effect (PC only)
   ========================= */
@media (hover:hover) and (pointer:fine){

  /* 애니메이션 준비 */
  #mainQuadMenu .qm_item{
    transition: transform .35s ease;
    overflow:hidden; /* 확대 시 밖으로 튀는거 방지 */
  }

  /* 배경을 확대시키기 위한 가상 레이어 */
  #mainQuadMenu .qm_item::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1; /* 배경 레이어로 */
    background-image: var(--bg);
    background-size:cover;
    background-position:center;
    transform: scale(1);
    transition: transform .55s ease;
  }

  /* 기존 배경은 after로 옮겼으니, 본체 배경 제거 */
  #mainQuadMenu .qm_item{
    background-image:none;
  }

  /* 오버레이도 부드럽게 */
  #mainQuadMenu .qm_item::before{
    transition: background .35s ease;
  }

  /* 타이틀 효과 */
  #mainQuadMenu .qm_title{
    transition: transform .35s ease, opacity .35s ease;
  }

  /* ✅ hover */
  #mainQuadMenu .qm_item:hover::after{
    transform: scale(1.08);
  }
  #mainQuadMenu .qm_item:hover::before{
    background:rgba(0,0,0,.48);
  }
  #mainQuadMenu .qm_item:hover .qm_title{
    transform: translateY(-6px);
  }

  /* 키보드 포커스도 동일 */
  #mainQuadMenu .qm_item:focus-visible::after{
    transform: scale(1.08);
  }
  #mainQuadMenu .qm_item:focus-visible::before{
    background:rgba(0,0,0,.48);
  }
  #mainQuadMenu .qm_item:focus-visible .qm_title{
    transform: translateY(-6px);
  }
}



/* =========================
   CASE SECTION (scoped)
   ========================= */
#caseSection.case{
  position:relative;
  background:url(/images/main_section01_bg.jpg) no-repeat center/cover;
}
#caseSection .case_inner{
  display:flex;
  background-color:rgba(255,255,255,0.85);
}

/* =========================================================
   LEFT 사건분류 (공통)
   ========================================================= */
#caseLeftMenu{
  background:#243B56;
  color:#fff;
  box-sizing:border-box;
}
#caseLeftMenu .case_menu{ box-sizing:border-box; }

#caseLeftMenu .case_left_title{
  margin:0;
  font-weight:800;
  letter-spacing:-0.4px;
  color:#fff;
}

#caseLeftMenu .case_cat_btn{
  border:0;
  background:transparent;
  cursor:pointer;
  color:inherit;
  outline:none;
}

/* dot */
#caseLeftMenu .case_cat_dot{
  width:12px;
  height:12px;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  transform: scale(.6);
  box-shadow: 0 0 0 rgba(255,255,255,0);
  opacity:0;
  background:transparent;
  box-sizing:border-box;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
}
#caseLeftMenu .menu_box > li.click .case_cat_dot{
  opacity:1;
  transform:scale(1);
  background:rgba(255,255,255,.25);
  border-color:rgba(255,255,255,.6);
  box-shadow:0 0 0 6px rgba(255,255,255,.08);
}

/* =========================================================
   RIGHT (공통)
   ========================================================= */
#caseRightArea{
  display:flex;
  justify-content:center;
  position:relative;
  width:100%;
  min-height:auto;
  overflow:hidden;
  background:url('/images/202601/main/case_bg.jpg') center/cover no-repeat;
}
#caseRightArea .case_right_inner{
  position:relative;
  z-index:1;
  max-width:980px;
  width:100%;
  padding:150px 0;
}
#caseRightArea .case_right_top{ margin-bottom:50px; }
#caseRightArea .case_right_title h2.title{
  margin:0;
  font-size:54px;
  line-height:1.1;
  font-weight:800;
  color:#111;
  word-break:keep-all;
}

/* 리스트 */
#caseRightArea .case_list{ margin-top:18px; }
#caseRightArea .case_list_body ul{ list-style:none; margin:0; padding:0; }
#caseRightArea .case_list_body li{
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid rgba(0,0,0,.12);
}
#caseRightArea .case_list_body li:first-child{
  border-top:1px solid rgba(0,0,0,.12);
}
#caseRightArea .case_list_body .tag{
  min-width:78px;
  height:34px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  font-size:16px;
  font-weight:700;
  color:#111;
  flex:0 0 auto;
  border:1px solid rgba(0,0,0,.08);
  background:#f3f4f6;
}

/* ✅ idx별 컬러 */
#caseRightArea .case_list_body .tag.tag-cat-1{  background:#eef2ff; color:#3730a3; border-color:rgba(55,48,163,.18); }
#caseRightArea .case_list_body .tag.tag-cat-2{  background:#ecfeff; color:#155e75; border-color:rgba(21,94,117,.18); }
#caseRightArea .case_list_body .tag.tag-cat-3{  background:#f0fdf4; color:#166534; border-color:rgba(22,101,52,.18); }
#caseRightArea .case_list_body .tag.tag-cat-4{  background:#fff7ed; color:#9a3412; border-color:rgba(154,52,18,.18); }
#caseRightArea .case_list_body .tag.tag-cat-5{  background:#fdf2f8; color:#9d174d; border-color:rgba(157,23,77,.18); }
#caseRightArea .case_list_body .tag.tag-cat-6{  background:#f1f5f9; color:#0f172a; border-color:rgba(15,23,42,.18); }
#caseRightArea .case_list_body .tag.tag-cat-7{  background:#fef2f2; color:#991b1b; border-color:rgba(153,27,27,.18); }
#caseRightArea .case_list_body .tag.tag-cat-13{ background:#f5f3ff; color:#5b21b6; border-color:rgba(91,33,182,.18); }
#caseRightArea .case_list_body .tag.tag-cat-14{ background:#fff1f2; color:#9f1239; border-color:rgba(159,18,57,.18); }
#caseRightArea .case_list_body .tag.tag-cat-15{ background:#f0f9ff; color:#075985; border-color:rgba(7,89,133,.18); }
#caseRightArea .case_list_body .tag.tag-cat-16{ background:#fffbeb; color:#92400e; border-color:rgba(146,64,14,.18); }

#caseRightArea .case_list_body .txt a{
  display:block;
  text-decoration:none;
  color:#111;
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.3px;
  line-height:1.35;
}
#caseRightArea .case_list_body .txt a:hover{ text-decoration:underline; }

#caseRightArea .case_list_loading{
  padding:18px 0;
  font-weight:700;
  color:#111;
}

/* =========================================================
   1200px 이하 (중간 반응형)
   ========================================================= */
@media (max-width: 1200px){
  #caseLeftMenu{ padding:90px 0 0; }

  #caseRightArea .case_right_inner{ padding:70px 50px 60px; }
  #caseRightArea .case_right_title h2.title{ font-size:42px; }
}

/* =========================================================
   PC (1001px~)
   ========================================================= */
@media (min-width: 1001px){
  #caseSection.case{ height:100%; }
  #caseSection .case_inner{
    height:auto; 
    overflow:visible;
  }

  #caseLeftMenu{
    width:36%;
    max-width:520px;
    min-width:380px;
    height:auto;
    display:flex;
	padding:140px 0;
    justify-content:center;
  }
  #caseLeftMenu .case_menu{
    width:100%;
    max-width:200px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
  }
  #caseLeftMenu .case_left_title{
    text-align:left;
    font-size:28px;
    margin-bottom:30px;
  }

  /* swiper는 PC에서 고정(세로) */
  #caseLeftMenu .case_menu_swiper{
    width:100%;
    height:auto;
    overflow:visible;
  }
  #caseLeftMenu .menu_box.swiper-wrapper{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    transform:none; 
  }
  #caseLeftMenu .menu_box > li{
    position:relative;
    width:100%;
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  #caseLeftMenu .menu_box > li::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:100%;
    height:1px;
    background:rgba(255,255,255,.22);
  }
  #caseLeftMenu .case_cat_btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 10px;
    font-size:18px;
    font-weight:500;
    letter-spacing:-0.3px;
    color:rgba(255,255,255,.85);
  }
  #caseLeftMenu .case_cat_dot{ opacity:0; } /* PC는 선택시에만 */
}

/* =========================================================
   ✅ MOBILE (1000px 이하) - 최종 우선 적용
   ========================================================= */
@media (max-width: 1000px){

  /* 섹션/내부: 잘림 방지 + 상하 구조 */
  #caseSection.case{
    height:auto;
    min-height:0;
  }
  #caseSection .case_inner{
    flex-direction:column;
    height:auto;
    overflow:visible;
  }

  /* LEFT: 얇게(칩만) */
  #caseLeftMenu{
    width:100%;
    height:auto;
    padding:14px 0 12px;
  }
  #caseLeftMenu .case_left_title{ display:none; }
  #caseLeftMenu .line.line_sec2{ display:none; }

  #caseLeftMenu .case_menu_swiper{
    width:100%;
    overflow:hidden;
    padding:0 14px;
    box-sizing:border-box;
    position:relative;
    z-index:5;
    touch-action:pan-x;
  }

  #caseLeftMenu .menu_box.swiper-wrapper{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
  }

  #caseLeftMenu .menu_box > li{
    width:auto !important;
    padding:0 !important;
    display:flex;
    align-items:center;
    margin-right:10px;
  }
  #caseLeftMenu .menu_box > li::after{ display:none; }

  #caseLeftMenu .case_cat_btn{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    font-size:15px;
    font-weight:600;
    color:rgba(255,255,255,.9);
    white-space:nowrap;
  }
  #caseLeftMenu .menu_box > li.click .case_cat_btn{
    border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.10);
  }
  #caseLeftMenu .case_cat_dot{ opacity:1; }

  /* RIGHT: 아래로 내려오게 + 여백 */
  #caseRightArea{
    width:100%;
    min-height:auto;
    overflow:visible;
    margin-top:14px;
  }
  #caseRightArea .case_right_inner{
    padding:30px 18px 100px;
  }
  #caseRightArea .case_right_title h2.title{
    font-size:26px;
  }
}

/* (선택) 더 작은 폰 */
@media (max-width: 480px){
  #caseLeftMenu .case_cat_btn{
    padding:9px 12px;
    font-size:14px;
  }
  #caseRightArea .case_list_body .tag{ font-size:14px; }
  #caseRightArea .case_list_body .txt a{ font-size:14px; }
}



/* 법률정보 / 지식인  */
.info-cards{
  padding: 200px 0;
  background: url('/images/202601/main/law_info_bg.jpg') center/cover no-repeat;
}

.info-cards__inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* PC 2열 */
  gap: 36px;
}

/* 카드 */
.info-card{
  display: block;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 42px 46px 34px;
  text-decoration: none;
  color: #111;

  transition: transform .18s ease, box-shadow .18s ease;
}

.info-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

/* 타이틀/서브 */
.info-card__title{
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
}
.info-card__desc{
  margin-top: 20px;
  font-size: 16px;
  color: #666;
  letter-spacing: -0.3px;
}

/* 썸네일: 비율 고정 + 꽉 채우기 */
.info-card__thumb{
  margin-top: 30px;
  border-radius: 4px;
  overflow: hidden;
  background: #ddd;

  aspect-ratio: 16 / 9;      /* 최신 브라우저 */
}
.info-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 태블릿 */
@media (max-width: 1024px){
  .info-cards{ padding: 60px 0; }
  .info-cards__inner{ gap: 22px; }
  .info-card{ padding: 34px 30px 26px; }
  .info-card__title{ font-size: 40px; }
}

/* 모바일: 1열 */
@media (max-width: 768px){
  .info-cards__inner{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .info-card{ padding: 26px 20px 18px; }
  .info-card__title{ font-size: 34px; }
  .info-card__desc{ font-size: 15px; }
  .info-card__thumb{ margin-top: 18px; }
}


/* =========================
✅ 지도
========================= */
/* =========================
   첨부 디자인 스타일
========================= */
.office_new{
  background:#fff;
  padding:150px 0 180px;
  color:#111;
}
.office_new .inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* 헤더 */
.office_head{ margin-bottom:50px; }
.office_title{
  margin:0;
  font-size:48px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-1px;
}
.office_title .count{
  color:#1f5aa6; /* 첨부처럼 파란 숫자 */
  font-size:68px;
}
.office_desc{
  margin:14px 0 0;
  color:#666;
  font-size:16px;
  line-height:1.5;
}

/* 탭: 상/하 라인 + 가운데 */
.office_tabs_wrap{
  margin-top:26px;
  border-top:1px solid #e7e7e7;
  border-bottom:1px solid #e7e7e7;
}
.office_tabs{
  list-style:none;
  margin:0;
  padding:12px 0;
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
}
.office_tabs .tab{
  cursor:pointer;
  font-size:16px;
  color:#777;
  padding:6px 10px;
  position:relative;
  user-select:none;
}
.office_tabs .tab span{ font-size:12px; margin-left:2px; }
.office_tabs .tab.on{
  color:#111;
  font-weight:700;
}
.office_tabs .tab.on:after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-13px;
  height:2px;
  background:#111;
}

/* 본문 2컬럼 */
.office_body{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:60px;
  padding-top:46px;
  align-items:start;
}

/* 좌측 지도 */
.office_map .map_bg{
  position:relative;
  width:373px;          /* PC: 원본 고정 */
  height:523px;         /* PC: 원본 고정 */
  margin:0 auto;
}

/* 지도 이미지: 영역에 맞게 */
.office_map .map_bg > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  pointer-events:none;
}

/* 핀(퍼센트 좌표로 배치할거라 absolute) */
.office_map .map_pin{
  position:absolute;
  transform:translate(-50%, -50%);
  z-index:5;

  width:18px;
  height:18px;
}
.office_map .map_pin.seoul{ /* 서울만 좀 더 크게 쓰고 싶으면 */
  width:30px;
  height:30px;
}

.office_map .map_pin.seoul{ left:34.0482%; top:20.0764%; }
.office_map .map_pin.inchon{ left:24.1286%; top:19.6760%; }
.office_map .map_pin.gwangju{ left:23.3243%; top:68.6424%; }
.office_map .map_pin.busan{ left:77.2117%; top:70.7456%; }
.office_map .map_pin.daegu{ left:65.1474%; top:57.9349%; }
.office_map .map_pin.daejeon{ left:39.1420%; top:45.5066%; }
.office_map .map_pin.suwon{ left:33.5120%; top:25.4302%; }
.office_map .map_pin.uijeongbu{ left:35.9249%; top:16.25239%; }
.office_map .map_pin.seongnam{ left:38.0697%; top:23.51816%; }
.office_map .map_pin.changwon{ left:66.7560%; top:71.7017%; }
.office_map .map_pin.pyeongtaek{ left:34.1894%; top:29.7396%; }
.office_map .map_pin.cheonan{ left:34.1894%; top:35.7396%; }
.office_map .map_pin.ilsan{ left:29.1894%; top:17.7396%; }
.office_map .map_pin.jeonju{ left:32.8894%; top:54.2896%; }
.office_map .map_pin.ulsan{ left:82.7117%; top:64.1456%; }

.office_map .map_pin.seoul{ width:28px; height:28px; } /* 서울만 좀 더 크게 */
.office_map .map_pin.inchon{ width:20px; height:20px; }
.office_map .map_pin.gwangju{ width:24px; height:24px; }
.office_map .map_pin.busan{ width:22px; height:22px; }
.office_map .map_pin.daegu,
.office_map .map_pin.daejeon{ width:22px; height:22px; }

/* 파동 원 */
.office_map .map_pin .cc{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:rgba(255,167,15,.22);
  border:1px solid rgba(255,167,15,.45);
  animation:map_circle 1.2s infinite alternate;
}
/*
.office_map .map_pin .cc1{ width:50%;  height:50%;  background:rgba(255,167,15,1); border-color:rgba(255,167,15,1); }
*/
.office_map .map_pin .cc2{ width:200%; height:200%; animation-delay:.2s; }
.office_map .map_pin .cc3{ width:350%; height:350%; animation-delay:.4s; }
.office_map .map_pin .cc4{ width:550%; height:550%; animation-delay:.6s; }
.office_map .map_pin .cc5{ width:750%; height:750%; animation-delay:.8s; }

@keyframes map_circle{ 0%{opacity:0} 100%{opacity:1} }


/* 우측 */
.office_right{ width:100%; }

.office_photo{
  width:100%;
  overflow:hidden;
  background:#f3f3f3;
}
.office_photo img{
  width:100%;
  height:auto;
  display:block;
}

/* 사진 아래 라인 */
.office_rule{
  height:1px;
  background:#000;
  margin:35px 0 30px;
}

/* 정보 영역: pill + 텍스트 */
.office_info{
  display:grid;
  grid-template-columns: 80px 1fr;
  gap:18px;
  align-items:start;
  padding:0 15px;
}

.office_badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 26px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:14px;
  font-weight:700;
  width:max-content;
}

.office_name{
  font-size:22px;
  font-weight:800;
  margin-bottom:10px;
}
.office_addr{
  font-size:16px;
  color:#444;
  line-height:1.5;
}
.office_trans{
  font-size:14px;
  color:#444;
  margin-top:4px;
}

.office_tel{
  margin-top:12px;
  display:flex;
  gap:10px;
  align-items:baseline;
}
.office_tel .tel_label{
  font-size:12px;
  color:#666;
}
.office_tel .tel_num{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.3px;
}

.office_link{
  display:none;
}

/* =========================
   반응형
========================= */
@media (max-width: 1024px){

	.office_new{
		padding:100px 0 120px;
	}

  .office_title{ font-size:38px; }
  .office_body{
    grid-template-columns: 1fr;
    gap:28px;
    padding-top:30px;
  }
  .office_tabs{ justify-content:flex-start; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; padding:12px 6px; }
  .office_tabs .tab{ white-space:nowrap; }
  
  .office_map .map_bg{
    width:min(373px, 100%);
    height:auto;
    aspect-ratio:373 / 523; /* 지원 브라우저면 최고 */
  }
  .office_map .map_bg > img{
    height:auto;
  }
}

/* 기본: PC에서는 숨김 */
.office_link{
  display:none;
}

/* 모바일에서만 노출 + 버튼 스타일 */
@media (max-width: 768px){
  .office_link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:100%;
    margin-top:30px;
    padding:14px 16px;

    font-size:15px;
    font-weight:700;
    letter-spacing:-.2px;
    text-decoration:none;

    color:#fff !important;
    background:#111;
    border:1px solid rgba(0,0,0,.15);
    border-radius:14px;

    box-shadow:0 10px 22px rgba(0,0,0,.18);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  }

  .office_link:active{
    transform:translateY(1px);
    box-shadow:0 7px 16px rgba(0,0,0,.16);
  }

  .office_link:hover{
    background:#000;
  }

  /* 아이콘(폰트아이콘 쓰는 경우) */
  .office_link i{
    font-size:18px;
    line-height:1;
  }
}


@media (max-width: 480px){
  .office_new{ padding:50px 0 60px; }
  .office_title{ font-size:30px; }
  .office_info{ grid-template-columns: 1fr; gap:10px; }
  .office_badge{ height:24px; }
}



/* ===== 유튜브 미디어 ===== */
.yt-media {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.yt-media .section_inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ✅ YouTube BG */
.yt-media .yt-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* 유튜브는 cover가 없어서 "확대"로 cover 구현 */
.yt-media .yt-bg iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;  /* 16:9 비율 cover용 */
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none; /* 배경용: 클릭 막기 */
}

/* 화면이 넓으면 반대로 계산 */
@media (min-aspect-ratio: 16/9){
  .yt-media .yt-bg iframe{
    width: 100vw;
    height: 56.25vw; /* 16:9 */
  }
}

/* ✅ 기존 filter/컨텐츠는 위로 */
.yt-media .filter {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}

/* 기존 그대로 */
.yt-media .media_inner {
  float: right;
  padding-top: 160px;
  padding-right: 160px;
}


.yt-media .filter {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}

.yt-media .media_inner {
    float: right;
    padding-top: 160px;
    padding-right: 160px;
}


/* changing-title 영역 */
.changing-title{
  width: 400px;
  position: relative;
  z-index: 2;
}

/* 글자 스타일 */
.changing-title .copy{
  font-size: 100px;
  font-weight: 600;
  color: #fff;
  line-height: 1;        /* ✅ 과한 라인박스 제거 */
  letter-spacing: -1px;
}

/* ✅ 단어가 보이는 창(높이 넉넉하게) */
.changing-title .outer-word{
  position: relative;
  overflow: hidden;
  display: block;

  height: 1.35em;        /* ✅ 1.2em -> 1.35em (잘림 방지) */
  padding: .12em 0;      /* ✅ 위/아래 여유 */
}

/* 움직이는 단어 */
.changing-title .inner-word{
  position: absolute;
  left: 0;
  top: 50%;              /* ✅ 가운데 정렬 */
  transform: translateY(-50%);  /* ✅ 가운데 정렬 */
  width: 100%;
  will-change: transform, opacity;
}

/* 나가는 애니메이션: 위로 사라짐 */
@keyframes slideUpOut{
  0%   { transform: translateY(-50%); opacity: 1; }
  100% { transform: translateY(calc(-50% - 120px)); opacity: 0; }
}

/* 들어오는 애니메이션: 아래에서 올라옴 */
@keyframes slideUpIn{
  0%   { transform: translateY(calc(-50% + 120px)); opacity: 0; }
  100% { transform: translateY(-50%); opacity: 1; }
}


/* ===== 텍스트 영역 전체 ===== */
.yt-media .text_box{
  position: relative;
  z-index: 3;          /* 유튜브/필터 위 */
  color: #fff;
}

/* 기존 flex 정렬 깨짐 수정 */
.yt-media .text_inner{
  display: block;      /* ❌ flex 제거 */
  margin-top: 24px;
}

/* 실제 텍스트 */
.yt-media .text{
  max-width: 420px;
}

.yt-media .text p{
  font-size: 18px;
  line-height: 1.5;
  color: #eee;
  margin: 0 0 6px;
}

/* more 버튼 */
.yt-media .more{
  margin-top: 18px;
}

.yt-media .more a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.yt-media .more p{
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

/* + 버튼 */
.yt-media .add_btn{
  display: flex;
  align-items: center;
  justify-content: center;
}

.yt-media .add_btn i{
  font-size: 18px;   /* xi 아이콘 크기 */
  color: #fff;
  line-height: 1;
}



/* 모바일 대응(원래 없으면 추천) */
@media (max-width: 768px){
  .yt-media .media_inner{
    float: none;
    padding: 120px 20px 0;
  }
  .changing-title{
    width: auto;
  }
  .changing-title .copy{ font-size: 52px; }
  .changing-title .outer-word{ height: 1.4em; padding: .14em 0; }
}


/* ===== 업부 그룹 / 센터 ===== */
.biz-center-wrap{
  padding: 150px 0;
  background: url('/images/202601/main/biz_center_bg.jpg') center bottom/cover no-repeat;
}

.biz-center-inner{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;

  display: flex;               /* PC: 좌/우 */
  gap: 60px;
}

/* ===== LEFT ===== */
.biz-left{
  flex: 0 0 50%;               /* 좌측 너비 */
  color: #fff;
  padding-top:100px;
}

.biz-kicker{
  font-size: 54px;
  font-weight: 300;
  letter-spacing: -0.3px;
}

.biz-title{
  margin: 30px 0 40px;
  font-size: 54px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -1px;
}

.biz-desc{
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: -0.2px;
}

/* ===== RIGHT ===== */
.biz-right{
  flex: 1;                     /* 우측이 남는 공간 */
  min-width: 0;
}

/* 우측 그리드: 2열 */
.center-list{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

/* 타일 기본: 도로교통/경제범죄처럼(텍스트만) */
.center-item{
  position: relative;
  height: 92px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10, 20, 35, .55);
  overflow: hidden;
}

.center-link{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 22px;
  text-decoration: none;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.center-title{ font-size: 18px; }

/* + 버튼은 오버 시만 */
.center-plus{
  position: absolute;
  top: 50%;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  background: rgba(255,255,255,.92);
  color: #111;

  opacity: 0;
  transform:translateY(-50%);
  transition: opacity .18s ease;
}

/* 오버 시: 형사센터처럼 배경 이미지 + 오버레이 */
.center-item::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .25s ease, transform .35s ease;
}

.center-item::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  opacity: 0;
  transition: opacity .25s ease;
}

.center-item:hover { border:1px solid #fff; }

.center-item:hover::before,
.center-item:focus-within::before{
  opacity: 1;
  transform: scale(1);
}
.center-item:hover::after,
.center-item:focus-within::after{
  opacity: 1;
}
.center-item:hover .center-plus,
.center-item:focus-within .center-plus{
  opacity: 1;
}

/* 키보드 접근성 */
.center-link:focus{ outline: none; }
.center-item:focus-within{
  box-shadow: 0 0 0 2px rgba(255,255,255,.22) inset;
}

/* ===== 반응형 ===== */
/* 태블릿: 좌/우 간격 줄이고 글자/높이 조금 다운 */
@media (max-width: 980px){
  .biz-center-inner{ gap: 32px; }
  .biz-title{ font-size: 44px; }
  .center-item{ height: 86px; }
}

/* 모바일: 좌측 상단, 우측 하단(세로 스택) */
@media (max-width: 768px){
   .biz-center-wrap{ padding:80px 0; }
  .biz-center-inner{
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }
  
  .biz-left{ flex: none; padding-top:0px; }
  .biz-title{ font-size: 34px; }

  .center-list{
    gap: 12px;
  }
  .center-item{ height: 74px; }
  .center-title{ font-size: 17px; }
}


/* ============================ 실시간 상담접수  ============================ */
.request_wrap{
  background:#0b173a url('../images/main/request_bg.jpg') center/cover no-repeat;
  color:#fff;
  padding:150px 0;
}
#sec_request{
  width:96%;
  max-width:1810px;
  margin:0 auto;
  padding: clamp(80px, 9vw, 130px) clamp(24px, 7.5vw, 140px);
  transition: all .8s ease;
  display:flex;
  justify-content:space-between;
  gap: clamp(24px, 3.5vw, 60px);
  position: relative;
  overflow: visible; /* 말풍선/라인 잘림 방지 */
}

/* ========== 좌측 영역 ========== */
#sec_request .left{ width: 56%; min-width: 520px; }
#sec_request .left .sec_tit{
  position: relative;
  z-index: 5;
  /* 타이틀-스텝 간 여백 더 넉넉히(겹침 방지) */
  margin-bottom: clamp(90px, 10vw, 150px);
}
#sec_request .left .sec_tit h2{ color:#fff; }
#sec_request .left .sec_tit p{ color:#fff; font-weight:300; }

/* ========== 스텝 ========== */
#sec_request .left .step{
  display:flex;
  align-items:center;
  gap: clamp(40px, 7.5vw, 140px);
  position: relative;
  z-index: 4; /* 타이틀보다 아래 */
  overflow: visible;
  /* 만약 상단이 붙는 해상도에서도 안전하게 */
  margin-top: clamp(6px, 1vw, 16px);
}
#sec_request .left .step > div{
  display:flex; flex-direction:column; align-items:center; position:relative; overflow:visible;
}
#sec_request .left .step > div p{ 
  font-size: clamp(16px, .94vw, 18px);
  color: rgba(255,255,255,.6);
  margin-top: clamp(12px, 1vw, 18px);
}

/* 원 아이콘(중앙정렬) */
#sec_request .left .step > div > span{
  width: clamp(80px, 5.21vw, 100px);
  height: clamp(80px, 5.21vw, 100px);
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  position: relative;
  z-index:1; /* 라인보다 위 */
  box-shadow: 0 0 0 rgba(26, 73, 219, 0.2);
}

/* 브랜드 active 컬러(#baa387 계열) + 펄스 */
#sec_request .left .step .active > span{
  background-image: linear-gradient(0deg, #a89373 0%, #baa387 100%);
  color:#111;
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(186,163,135,.45);}
  70%{box-shadow:0 0 0 20px rgba(186,163,135,0);}
  100%{box-shadow:0 0 0 0 rgba(186,163,135,0);}
}

/* 원 안의 아이콘 SVG (중앙 배치) */
#sec_request .left .step > div > span::after{
  content:"";
  display:block;
  width: clamp(22px, 1.6vw, 30px);
  height: clamp(22px, 1.6vw, 30px);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
#sec_request .left .step .step1 > span::after{
  background-image: url(../images/main/icon/step_icon1_w.svg);
  width: clamp(23px, 1.9vw, 27px); height: clamp(23px, 1.9vw, 26px);
}
#sec_request .left .step .step2 > span::after{
  background-image: url(../images/main/icon/step_icon2.svg);
  width: clamp(20px, 1.7vw, 23px); height: clamp(26px, 2.1vw, 30px);
}
#sec_request .left .step .step3 > span::after{
  background-image: url(../images/main/icon/step_icon3.svg);
  width: clamp(26px, 2vw, 30px); height: clamp(22px, 1.7vw, 25px);
}

/* 원 사이 연결 라인 (항상 보이도록 복구/유지) */
#sec_request .left .step > div > span::before{
  content:"";
  position:absolute;
  top:50%; transform:translateY(-50%);
  height:1px;
  background-color: rgba(217,217,217,.2);
  display:block; z-index:0; /* 아이콘 뒤 */
  width: clamp(60px, 4.17vw, 80px);
  right: calc(clamp(163px, 11.46vw, 220px) / 2 * -1);
}
#sec_request .left .step > div:last-child > span::before{ display:none; }

/* 말풍선(아래 방향) */
#sec_request .left .step .step_txt{
  position:absolute;
  top: calc(100% + 16px); /* 원 아래쪽으로 */
  left:50%; transform: translateX(-50%);
  width: clamp(240px, 20vw, 300px);
  background:#baa387; color:#111;
  border-radius:10px; font-weight:600;
  font-size: clamp(12px, .95vw, 14px); line-height:1.55;
  padding: clamp(10px, 1.1vw, 16px) clamp(14px, 1.4vw, 22px);
  opacity:0; visibility:hidden; transition:.25s ease;
  pointer-events:none; white-space: normal; z-index:2;
}
#sec_request .left .step .step_txt span{ position:relative; display:block; }
#sec_request .left .step .step_txt span::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:-14px; /* 아래로 향하는 꼬리 */
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:14px solid #baa387;
}
#sec_request .left .step .active .step_txt{ opacity:1; visibility:visible; }

/* ========== 우측 폼 영역 ========== */
#sec_request .right{ width: 37.3%; min-width: 420px; }
#sec_request .right #mainQform{ width:100%; }

/* 인풋/셀렉트 공통: 높이 상향 (PC/모바일 공통) */
#sec_request .right #mainQform .input_wrapper{ position:relative; margin-bottom: 20px; }
#sec_request .right #mainQform .input_wrapper input{
  width:100%;
  font-size: clamp(16px, 1.04vw, 20px);
  padding: 0 clamp(40px, 3.13vw, 60px);
  height: clamp(54px, 4.2vw, 72px); /* ↑ 높이 상향 */
  border:none; border-radius: 6px;
}
#sec_request .right #mainQform .input_wrapper input::placeholder{ color:#999; }

#sec_request .right #mainQform .select_wrapper{ width:100%; }
#sec_request .right #mainQform .select_wrapper select{
  width:100%;
  font-size: clamp(16px, 1.04vw, 20px);
  padding: 0 clamp(20px, 1.56vw, 30px);
  height: clamp(54px, 4.2vw, 72px); /* ↑ 높이 상향 */
  background:#fff url(../images/main/icon/form_arrow.svg) right 20px center no-repeat;
  background-size: clamp(18px, 1.4vw, 22px) auto;
  border:none; color:#000; appearance:none; border-radius: 6px;
}

/* 인풋 좌측 아이콘 */
#sec_request .right #mainQform .input_wrapper::before{
  content:"";
  position:absolute;
  left: clamp(15px, 1.56vw, 30px);
  top:50%; transform:translateY(-50%);
  width: clamp(16px, 1.25vw, 20px);
  height: clamp(16px, 1.25vw, 20px);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

#sec_request .right #mainQform .input_wrapper.icon-name::before{
  background-image:url(../images/main/icon/form_icon1.svg);
}
#sec_request .right #mainQform .input_wrapper.icon-tel::before{
  background-image:url(../images/main/icon/form_icon2.svg);
}

/* 동의 체크 */
#sec_request .right #mainQform .agree_wrapper{ margin-top: 28px; margin-bottom: 36px; display:flex; align-items:center; }
/* label 전체 클릭 가능하게 */
#sec_request .right #mainQform .agree_wrapper .agree_label{
  display:flex;
  align-items:center;
  cursor:pointer;
  color:#fff; font-weight:300; margin-right:10px; font-size: clamp(16px, .94vw, 18px);
}

#sec_request .right #mainQform .agree_wrapper input[type=checkbox] + span.d_ib{
  width:24px;
  height:24px;
  margin-right:10px;
  background:#fff;
  border-radius:4px;
}

/* 체크됐을 때 네모 박스 */
#sec_request .right #mainQform .agree_wrapper input[type=checkbox]:checked + span.d_ib{
  background-image:url(../images/main/icon/check_icon_b.svg);
  background-position:center;
  background-repeat:no-repeat;
  background-size:18px 15px;
}


#sec_request .right #mainQform .agree_wrapper .detail_btn{
  font-weight:600; color:rgba(255,255,255,.65);
  font-size: clamp(14px, .9vw, 16px);
  background:transparent; border:none; cursor:pointer;
}

/* 제출 버튼 (브랜드톤 #baa387) */
#sec_request .right #mainQform .quickCounsel_btn{
  width:100%;
  background-image: linear-gradient(0deg, #a89373 0%, #baa387 100%);
  color:#111;
  font-size: clamp(18px, 1.04vw, 20px);
  font-weight:700;
  height: clamp(54px, 4.2vw, 68px);   /* PC 기본 높이 */
  border-radius: 8px;
  border: none; cursor: pointer;
  transition: transform .1s ease, filter .2s ease;
}
#sec_request .right #mainQform .quickCounsel_btn:hover{ filter: brightness(1.03); }
#sec_request .right #mainQform .quickCounsel_btn:active{ transform: translateY(1px); }

/* ========== 반응형 ========== */

/* 1500px 아래: 말풍선 텍스트 카드 숨김(선택) */
@media (max-width:1500px){
/*
  #sec_request .left .step .step_txt{ display:none; }
  */
}

/* 1100px ~ : 스택 정렬 전환 */
@media (max-width:1100px){
  #sec_request .left .step{ display:none !important; }
  #sec_request{ flex-direction: column; align-items: center; }
  #sec_request .left{ width:100%; min-width: 0; }
  #sec_request .right{ width:100%; min-width: 0; margin-top: clamp(40px, 6vw, 80px); }
  /* 타이틀 여백 재조정(모바일로 가까워질수록 약간 줄임) */
  #sec_request .left .sec_tit{ margin-bottom: clamp(44px, 6.5vw, 80px); }
}

/* 980px 아래: 스텝 숨김 + 버튼 높이 축소 */
@media (max-width:980px){

  #sec_request .left .sec_tit{ margin-bottom: clamp(20px, 5vw, 32px) !important; }

  /* 모바일 버튼: 높이 축소 */
  #sec_request .right #mainQform .quickCounsel_btn{
    height: clamp(48px, 13.5vw, 56px);
  }
}

/* 750px 아래: 폼 타이포/패딩 보정 */
@media (max-width:750px){
  #sec_request{
    width: 100%;
    padding: clamp(80px, 18.67vw, 140px) clamp(17px, 5.33vw, 40px);
    align-items: flex-start;
    background-position: center;
  }
  #sec_request .right #mainQform .input_wrapper input{
    font-size: clamp(16px, 4vw, 20px);
    height: clamp(56px, 15vw, 66px); /* 모바일에서도 넉넉 */
    padding-left: clamp(60px, 14.67vw, 110px);
  }
  #sec_request .right #mainQform .select_wrapper select{
    font-size: clamp(16px, 4vw, 20px);
    height: clamp(56px, 15vw, 66px);
    padding-left: clamp(20px, 8vw, 60px);
    background-position: right clamp(20px, 8vw, 60px) center;
    background-size: clamp(16px, 3.2vw, 24px) clamp(10px, 1.87vw, 14px);
  }
  #sec_request .right #mainQform .input_wrapper:nth-child(3)::before,
  #sec_request .right #mainQform .input_wrapper:nth-child(4)::before{
    left: clamp(20px, 8vw, 60px);
    width: clamp(16px, 3.6vw, 24px); height: clamp(16px, 3.6vw, 24px);
  }

  #sec_request .right #mainQform .agree_wrapper{
    margin-top: clamp(8px, 2vw, 16px);
    margin-bottom: clamp(16px, 4vw, 24px);
  }
  #sec_request .right #mainQform .agree_wrapper input[type=checkbox] + span{
    width: clamp(20px, 4vw, 28px);
    height: clamp(20px, 4vw, 28px);
    margin-right: clamp(8px, 2.67vw, 14px);
  }
  #sec_request .right #mainQform .agree_wrapper input[type=checkbox]:checked + span{
    background-size: clamp(14px, 3.2vw, 22px) clamp(12px, 2.8vw, 18px);
  }
  #sec_request .right #mainQform .agree_wrapper label{
    font-size: clamp(14px, 3.73vw, 18px);
    margin-right: clamp(8px, 2.67vw, 14px);
  }
  #sec_request .right #mainQform .agree_wrapper .detail_btn{
    font-size: clamp(12px, 3.33vw, 16px);
  }
}

/* 500px 아래: 필요 시 추가 보정 */
@media (max-width:500px){
  /* 추가 보정 포인트가 생기면 여기에 */
}


/* ===== 타이틀 가독성/간격 강화 ===== */
#sec_request .left .sec_tit h2{
  font-size: clamp(28px, 3vw, 46px);   /* 글자 더 크게 */
  line-height: 1.15;
}
#sec_request .left .sec_tit p{
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.6;
  opacity: .95;
}

/* 타이틀과 스텝 사이 여백을 확실히(겹침 방지) */
#sec_request .left .sec_tit{
  margin-bottom: clamp(110px, 11vw, 170px);  /* 기존보다 더 넉넉히 */
}

/* ===== 스텝 말풍선을 '원 위'로 이동 ===== */
#sec_request .left .step{
  margin-top: clamp(6px, 1vw, 16px);
}

/* 원 위쪽 말풍선(기본은 아래였던 것을 위로 변경) */
#sec_request .left .step .step_txt{
  position: absolute;
  /* top 대신 bottom 사용하여 '원 위'에 배치 */
  bottom: calc(100% + 34px);
  top: auto;
  left:0;
  transform: translateX(0%);
  width: clamp(240px, 20vw, 300px);
  background: #baa387;
  color: #111;
  border-radius: 10px;
  font-weight: 600;
  font-size: clamp(13px, .95vw, 15px); /* 살짝 키움 */
  line-height: 1.55;
  padding: clamp(10px, 1.1vw, 16px) clamp(14px, 1.4vw, 22px);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
  pointer-events: none;
  white-space: normal;
  z-index: 10 !important;          /* 타이틀/아이콘/라인보다 위 */
  overflow: visible !important;     /* 꼬리 잘림 방지 */
}


#sec_request .left .step .step_txt::after{
  content: "";
  position: absolute;
  left: 14%;
  transform: translateX(0);
  bottom: -14px;                    /* 말풍선 하단 중심에서 아래로 */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #baa387;   /* 말풍선과 동일색 */
  /* 안전하게 위로 */
  z-index: -1;                      /* 말풍선 아래쪽에 살짝 깔아 자연스럽게 */
}

/* 기존 span::after 꼬리는 비활성화(충돌 방지) */
#sec_request .left .step .step_txt span::after{
  content: none !important;
}

#sec_request .left .step .step_txt span{ position: relative; display: block; }

/* 꼬리를 아래로 뒤집어서 위 말풍선 모양 완성 */
#sec_request .left .step .step_txt span::after{
  content: "";
  position: absolute;
  left: 0;
  transform: translateX(0);
  bottom: -14px;              /* 아래를 향해 뾰족 */
  top: auto;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #baa387;  /* 위 말풍선이라 top을 채움 */
  border-bottom: 0;
}

/* 활성 시 노출 */
#sec_request .left .step .active .step_txt{
  opacity: 1;
  visibility: visible;
}

/* ===== 연결 라인은 유지(사라짐 방지) ===== */
#sec_request .left .step > div > span::before{
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background-color: rgba(217,217,217,.2);
  display: block;
  z-index: 0;   /* 아이콘 뒤 */
  width: clamp(60px, 4.17vw, 80px);
  right: calc(clamp(163px, 11.46vw, 220px) / 2 * -1);
}
#sec_request .left .step > div:last-child > span::before{ display: none; }

/* ===== 모바일에서는 여전히 스텝 숨김 ===== */
@media (max-width:980px){

	.request_wrap{
	padding:60px 0;
	}
  #sec_request .left .step{ display: none !important; }
  #sec_request .left .sec_tit{ margin-bottom: clamp(20px, 5vw, 32px) !important; }
}