@charset "UTF-8";

/*?로그인*/
#login{display:flex; flex-direction:column; gap:40px;}
#login .topTit{position:relative; padding-right:180px;}
#login .topTit .txt{padding-left:32px;margin-top:16px; color:#676767;}
#login .topTit .logImg{position:absolute; right:0; top:50%; transform:translateY(-50%); width:180px;}
#login .loginBox{display:flex; flex-direction:column; border:1px solid #ccc; border-radius:24px; overflow:hidden;}
#login .loginBox .top{display:flex; align-items:center; padding:40px; }
#login .loginBox .top .left,
#login .loginBox .top .right{flex:1; }
#login .loginBox .top .left{display:flex; flex-direction:column; gap:16px;padding-right:40px; border-right:1px dashed #ccc;}
#login .loginBox .top .left .log{display:flex; flex-direction:column; gap:8px;}
#login .loginBox .top .left .log label{display:flex; gap:4px; align-items:center;}
#login .loginBox .top .left .log label span{width:70px; font-weight: 600;}
#login .loginBox .top .left .log label input{flex:1;}
#login .loginBox .top .left .snsLog{display:flex; align-items:center; gap:16px; margin-top: 16px;}
#login .loginBox .top .left .snsLog > a{flex:1; width:100%;}
#login .loginBox .top .left .snsLog > a.kakao{color:#000; background:#FEDC00; border:0;}
#login .loginBox .top .left .snsLog > a.naver{background:#00af4e; border:0;}
#login .loginBox .top .right{padding-left:40px;}
#login .loginBox .top .right .goPage{display:inline-flex; flex-direction:column; gap:8px; padding:24px; border-radius:16px; width:100%; transition:.3s; text-decoration: none;}
#login .loginBox .top .right .goPage:hover{background-color:#f5f5f5;}
#login .loginBox .top .right .tit{display:inline-flex; align-items:center; gap:8px;font-weight: 600; }
#login .loginBox .top .right .txt{color:#676767;}
#login .loginBox .bottom{padding:24px 40px; border-top:1px solid #ccc; background:#f9f9f9;}
#login .loginBox .bottom .tit{font-weight:600; }
#login .loginBox .bottom .list{margin-top:16px; }
#login .loginBox .bottom .list > li{position:relative; padding-left:16px;}
#login .loginBox .bottom .list > li::before{position:absolute; content:''; left:0; top:11px; width:5px; height:2px; background:var(--color-main); border-radius:100px; }
.nonmem{display:flex; gap:40px;}
.nonmem > div{display:inline-flex; flex:1; flex-direction:column; gap:8px; padding:40px; border-radius:24px; border:1px solid #ccc; }
.nonmem .tit{font-weight: 600;}
.nonmem .txt{font-size: 1.5rem; color:#676767; }
.nonmem .btn{margin-top:auto; width:100%;}
@media all and (max-width:768px){
 #login{gap:16px;}
 #login .loginBox{border-radius:16px;}
 #login .topTit{padding-right:0;}
 #login .topTit .logImg{width:130px; opacity:.1;}
 #login .topTit .txt{padding-left:26px; margin-top:8px; font-size: 1.5rem;}
 #login .loginBox .top{flex-direction:column; padding:24px;}
 #login .loginBox .top .left{padding-right:0; border-right:0; width:100%;}
 #login .loginBox .top .right{display:flex; flex-direction:column; gap:16px; margin-top:16px; padding-left:0; width:100%;}
 #login .loginBox .top .right .tit{font-size: 1.5rem;}
 #login .loginBox .top .right .txt{font-size: 1.5rem;}
 #login .loginBox .top .right .goPage{padding:0; gap:4px;}
 #login .loginBox .top .right .goPage:hover{background-color:transparent;}
 #login .loginBox .bottom{padding:24px;}
 #login .loginBox .bottom .list{margin-top:8px; font-size: 1.5rem;}
 .nonmem{flex-direction:column; gap:16px;}
 .nonmem > div{padding:24px; border-radius:16px;}
}
@media all and (max-width:425px){
 #login .loginBox .top .left .log label span{font-size: 1.3rem;}
}


/*? 회원가입 */
#join{ margin:0 auto; width: 650px; }
.joinPro { display:flex; justify-content: space-between; align-items: center; margin:0 auto; margin-bottom:40px; font-weight: 500; width: 100%; }
.joinPro > li { position:relative; }
.joinPro > li::before { content:""; position:absolute; left:-90%; top:24%; width: 4px; height: 4px; background: #111; border-radius: 100%; background-color:#ccc; }
.joinPro > li::after { content:""; position:absolute; left:-76%; top:24%; width: 4px; height: 4px; background: #111; border-radius: 100%; background-color:#ccc; }
.joinPro > li:first-child::before,
.joinPro > li:first-child::after { content:none; }
.joinPro > li > ol { display:flex; flex-direction: column; align-items: center; gap: 16px; }
.joinPro .joinNum { background-color:#f5f5f5; width: 40px; height: 40px; line-height: 40px; color:var(--color-main); text-align: center; border-radius:10rem; }
.joinPro .joinNum.on { position:relative; background-color:var(--color-main); color:#fff; }
.joinPro .joinNum.on::before { content: ""; position: absolute; top: 18px; left: -8px; width: 56px; height: 5px; border-radius:10rem; background-color: var(--color-main); transform: rotate(-35deg); z-index: -1; }

#join .regi { display:flex; justify-content: space-between; margin:0 auto; width: 100%; }
#join .regi .radioBtn { width: calc(50% - 16px); text-align: center; }
#join .regi .radioBtn a { position:relative; display:flex; align-items: center; flex-direction:column; gap:8px; padding: 160px 40px 32px 40px; font-weight: 600; font-size: 2.1rem; border:1px solid #ccc; background-repeat: no-repeat;  border-radius: 24px; transition: 0.15s ease; height:100%; }
#join .regi .radioBtn a span { font-weight: normal; font-size: 1.7rem;}
#join .regi .radioBtn .radio01{ background-position: left 50% top 34px; background-image: url(../img/sub/adult.svg); background-size:90px;}
#join .regi .radioBtn .radio02{ background-position: left 50% top 70px; background-image: url(../img/sub/child.svg); background-size:80px;}
#join .regi .radioBtn a:hover { background-color:#fff; box-shadow:0 0 15px rgba(0, 0, 0, 0.2); text-decoration: none; color:var(--color-main);}
#join .regi .radioBtn a:hover span{color:#111; }
#join .regi .radioBtn a:hover::before { position: absolute; content: ''; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: 3px solid var(--color-sub2); border-radius: 24px; transition:.3s;}

@media all and (max-width:768px){
	#join { width: 100%; }	
 .joinPro{margin:0 auto 40px auto; width:320px;}
	.joinPro > li::before { left:-24%; }
	.joinPro > li::after { left:-10%; }
 #join .regi{width:100%;}
	#join .regi .radioBtn { width: calc(50% - 8px); }
 #join .regi .radioBtn a{padding:120px 24px 24px 24px;}
 #join .regi .radioBtn .radio01{ background-position: left 50% top 24px; background-size:70px;}
 #join .regi .radioBtn .radio02{ background-position: left 50% top 56px; background-size:60px;}
}

@media (max-width: 425px){
 #join .regi{flex-direction:column; gap:16px;}
 .joinPro{width:100%;}
	.joinPro > li { width: 100%; }
	.joinPro > li::before { left:-4%;  transform: translateX(-4%); }
	.joinPro > li::after { left:4%;  transform: translateX(4%); }
 	#join .regi { margin: 24px 0 16px 0; } 
	#join .regi .radioBtn { width: 100%; }
 #join .regi .radioBtn a{font-size: 1.9rem;}
 #join .regi .radioBtn a span{font-size: 1.5rem;}
}

/* ?회원가입 - 약관동의 */
.agreeBox{display:flex; flex-direction:column; padding:24px; width:100%; height:300px; overflow-y:auto; border:1px solid #ccc; border-radius:16px;}
.agreeBox.textBox{height:auto;}
.agreeBox h4, 
.agreeBox .h4{font-size: 2.1rem; color:#111;}
.agreeBox h5, 
.agreeBox .h5{font-size: 1.9rem;}
.agreeBox .paraList{font-size: 1.7rem;}
.agreeBox .paraList > li > ul > li{font-size: 1.5rem;}
.agreeBox h4::before, 
.agreeBox .h4::before{width:20px; height:20px; top:5px;}
.agreeBox .paraList{gap:8px;}

#join .agreeChk{display:flex; align-items:center; justify-content:flex-end; margin-top:24px; text-align:right;}
#join .agrBox{margin-bottom:40px;}
#join .agrBox .h4{margin-bottom:8px;}
.agrOk{display:inline-flex; align-items:center; justify-content:center; width:100%; margin-top:8px; padding:12px; border-radius:8px; background:#f5f5f5; }

@media all and (max-width:768px){
 .agreeBox h4, .agreeBox .h4{padding-left:26px; font-size: 1.9rem;}
 .agreeBox h4::before, .agreeBox .h4::before{width:18px; height:18px; top:4px;}
 .agreeBox h5, .agreeBox .h5{margin-top:8px; font-size: 1.7rem;}
 .agreeBox .paraList{font-size: 1.5rem;}
 .agreeBox .paraList > li{padding-left:14px; font-weight: 500;}
 .agreeBox .paraList > li::before{width:10px; height:8px; top:6px;}
 .agreeBox .paraList > li > ul{margin-top:0;}
 .agreeBox .paraList > li > ul > li{padding-left:10px; font-size: 1.5rem;}
 .agreeBox .paraList > li > ul > li::before{top:9px; width:3px; height:3px;}
}

/** 회원가입 - 정보입력 + */
.userF .list { display:flex; flex-direction: column; gap:32px; }
.userF .list .tit { font-weight: 600; }
.userF .form.disabled { background:var(--color-gray-10); cursor:no-drop;}
.userF input[type=text], 
.userF input[type=password],
.userF select { width: 100%; height:48px;}
.userF input[type=text], 
.userF input[type=password]{padding-left:16px;}
.userF input.form.userN { flex:1; min-width: auto; }
.userF div.dpf { display:flex; justify-content: space-between; gap:4px; }
.userF input.form.userI, 
.userF input.form.addr,
.userF input.form.userPhchk {flex:1; min-width: auto;}
.userF .radio-list,
.userF .chk-list{ display:flex; gap:24px; }
.userF .emailF { width: calc(100% - 184px); position: relative; display: inline-flex; align-items: center; padding: 4px 16px; min-width: 200px; border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #111; height:48px;}
.userF .emailF input { padding:0 8px; border:none; height: 39px; min-width: auto; }
.userF .emailF input:first-child { padding:0; }
.userF .emailF input:focus { border:none; outline:none; box-shadow:none; }
.userF .emailC { width: 180px; }
.userF .infoM { margin-bottom: 16px; font-size: 1.2rem; color:#777; }
.userF .chk-list { margin-bottom: 40px; }
.userF .btn{height:48px; border-radius:8px;}
.policyPw{display:flex; flex-direction:column; margin-top:16px;}
.policyPw li{position:relative; padding-left:24px; font-size: 1.5rem;}
.policyPw li .micon{position:absolute; left:0; top:2px; width:18px; height:18px; font-size: 18px; color:#dbdbdb;}
.policyPw li.ok .micon{color:var(--color-blue);}
.policyPw li.no{color:var(--color-red);}
.policyPw li.no .micon{color:var(--color-red);}
.policyPw li.info .micon { color:var(--color-green); }
.alarm { display: flex; align-items: center; justify-content: center; margin-top: 8px; border-radius: 100px; font-size: 1.5rem; min-height: 32px; font-weight: 500; }
.alarm.ok { color: var(--color-blue); background: #E7F6FF; }
.alarm.no { color: var(--color-red); background: #FFE8E8; }
@media all and (max-width:768px){
}
@media all and (max-width:425px){
 .alarm{font-size: 1.3rem;}
 .userF .emailC{width:auto; min-width:120px;}
 .userF .emailF{width:auto; min-width: auto;}
}
/**회원가입 - 가입완료*/
.compFind{margin:32px auto; text-align:center;}
.compFind .tit{font-weight:600; font-size: 2.8rem; font-family: var(--style-font);}
.compFind .tit .logNm{color:var(--color-main);}
.compFind .txt{margin-top:24px; }
.compFind img{margin-bottom:40px;}
.compFind .infoid{margin-top:24px; background:#f5f5f5; border-radius:16px; padding:40px; font-size: 1.9rem; color:var(--color-point); font-weight: 600; width:100%;}
.compFind .infoid li{display:flex; flex-wrap:wrap; justify-content: center; align-items: center;}
.compFind .infoid li:last-child{margin-top:8px;}
.compFind .infoid li .infoTxt{ font-weight:normal; color:#222; margin-right:16px;}
.compFind .logList{margin:0 auto; margin-top:40px; padding-right:0;}
.compFind .infopw{margin-top:24px;}
/*아이디비밀번호 찾기*/
.compFind .repW{display:flex; flex-direction:column; gap:8px; margin:24px 0 0 0; width:480px;}
.compFind .repW label{display:flex; align-items:center; gap:8px; width:100%; flex:1;}
.compFind .repW label span{width:120px; text-align:left;}
.compFind .repW label input{flex:1;}
.compFind .repW .stxt{text-align:left;}
@media all and (max-width:768px){ 
 .compFind{margin:0 auto;}
 .compFind img{width:130px;}
 .compFind .tit{font-size: 2.1rem;}
 .compFind .infoid{padding:24px; font-size:1.7rem; }

 .compFind .repW{width:100%;}
 .compFind .repW label span{width:auto;}
 .compFind .repW label{gap:0; flex-direction:column; align-items:flex-start;}
 .compFind .repW label input{flex:none; width:100%;}
}

/*? 마이페이지 */
#mypage{margin:0 auto; width:650px;}
.pwInp{display:flex; flex-direction: column; margin-bottom:160px;}
.pwInp .txt{margin-bottom:40px; text-align: center; font-weight: 500; font-size: 2.1rem;}
.pwInp .list{display:flex; flex-direction: column; gap:8px;}
.pwInp .list label{display:flex; flex-direction: column; }
.pwInp .list label .tit{font-weight: 600;}
@media all and (max-width:768px){
 #mypage{width:100%;}
 .pwInp .txt{margin-bottom:24px; font-size: 1.7rem;}
}


/*? 하단메뉴 */
#agree .topTxt{margin:24px auto; font-size: 1.9rem;}
#agree .topTxt .em{text-decoration: underline;}
#agree .textBox .tit{margin-bottom:24px; font-weight:600; font-size: 1.9rem;}
@media all and (max-width:768px){
 #agree .topTxt,
 #agree .textBox .tit{font-size: 1.7rem;}
}
/**개인정보처리방침*/
#agree .personal{display:flex; flex-direction:column; gap:40px;}
#agree h4 img{position:absolute; top:50%; transform:translateY(-50%); margin-left:8px; height:40px;}

#agree .personal .labeling {border-bottom: 1px solid #ccc;}
#agree .personal .labeling>.tit { text-align: center; padding: 16px 0; color: #333; font-weight: 600; border-top: 2px solid #000; border-bottom: 1px solid #ccc;
 background: #fafafa;}
#agree .personal .labeling>ul {position:relative; display: flex; flex-wrap: wrap; border-bottom:1px dashed #ccc;}
#agree .personal .labeling>ul>li {text-align: center; flex: 0 0 33.33%; padding: 15px 0; border: dashed #ccc;
 border-width: 0;}
#agree .personal .labeling>ul>li:nth-child(n+4){border-top-width: 1px;}
#agree .personal .labeling>ul>li:not(:nth-child(3n-2)) { border-left-width: 1px;}
#agree .personal .labeling>ul>li>a { display: block;}
#agree .personal .labeling>ul>li img {height: 90px;}
#agree .personal .labeling>ul>li .detailLayer img{height:40px;}
#agree .personal .labeling>ul>li span.txt {display: block; margin-top: 10px; font-weight: 600; font-size: 1.5rem;}

#agree .personal .index { border-bottom: 1px solid #ccc;}
#agree .personal .index>.tit { text-align: center; padding: 16px 0; color: #333; font-weight: 600; border-top: 2px solid #000; border-bottom: 1px solid #ccc; background: #fafafa;}
#agree .personal .index>ul { display: flex; flex-wrap: wrap; border-bottom:1px dashed #ccc;}
#agree .personal .index>ul>li { flex: 0 0 48.5%; padding: 12px 10px;
 border: dashed #ccc; border-width: 0;}
#agree .personal .index>ul>li:nth-child(n+3) { border-top-width: 1px;}
#agree .personal .index>ul>li:nth-child(2n) { flex: 0 0 51.5%; border-left-width: 1px;}
#agree .personal .index>ul>li a { position: relative; display: block;
 padding-right: 40px;}
#agree .personal .index>ul>li a img { position: absolute; right: 0; top: 50%; width: 30px; transform: translateY(-50%);}

#agree .personal .ps {padding:16px 0; font-size: 1.5rem; font-weight: 600;}

#agree .personal .detailLayer { display: none; text-align: left; position: absolute; left: 0; top: 0; padding: 24px; width: 100%; max-height: 360px; background: #fff; border: 1px solid #333; box-shadow: 5px 0 12px rgba(0,0,0,.2); z-index: 100; overflow-y: auto;}
#agree .personal .detailLayer a.close { display: block; position: absolute; right: 0; top: 4px; width: 42px; height: 42px; overflow: hidden; text-indent: -5000px; font-size: 0;}
#agree .personal .detailLayer a.close:before { position: absolute; content: ""; width: 1px; height: 32px; left: 20px; top: 6px; background: #333; transform: rotate(45deg);}
#agree .personal .detailLayer a.close:after { position: absolute; content: ""; width: 1px; height: 32px; left: 20px; top: 6px; background: #333; transform: rotate(-45deg);}

@media all and (max-width:768px){
 #agree h4 img{position:relative; margin-left:4px; top:auto; transform:none; height:24px; }
#agree .personal .labeling>ul>li img {height: 40px;}
#agree .personal .index>ul{flex-direction:column;}
#agree .personal .index>ul>li:nth-child(2n){border-left-width: 0;}
#agree .personal .index>ul>li:nth-child(n+3){border-top-width: 0;}
#agree .personal .index>ul>li{border-bottom:1px dashed #ccc;}
#agree .personal .index>ul>li a img{width:24px;}
#agree .personal .labeling>ul>li .detailLayer img{height:24px;}
}


/*? 사이트맵 */
#sitemap{display:flex; flex-direction:column; gap:40px;}
#sitemap .list{display:flex; flex-wrap:wrap; gap:24px; margin-top: 24px;}
#sitemap .list > li{width:calc(100% / 5 - 20px);}
#sitemap .list > li > a{display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:8px; padding:12px 16px; border:1px solid #ccc; border-radius:12px; width:100%; text-decoration: none;}
#sitemap .list > li > a i{font-size: 2.0rem;}
#sitemap .list > li:hover > a{border:1px solid var(--color-sub2); color:var(--color-main); font-weight: 600;}
#sitemap .listDep{display:flex; flex-direction:column; flex-wrap:wrap; gap:8px; padding:16px 8px;}
#sitemap .listDep > li{width:100%;}
#sitemap .listDep > li a{position:relative; display:inline-flex; align-items:center; gap:4px; padding:8px; padding-left:24px; width:100%; border-radius:8px; text-decoration: none;}
#sitemap .listDep > li a::before{position:absolute; content:''; left:8px; top:16px; width:5px; height:5px; border-radius:50%; border:3px solid #ccc; }
#sitemap .listDep > li a i{font-size: 1.8rem;}
#sitemap .listDep > li a:hover{background:#f5f5f5;}
#sitemap .listDep > li a:hover::before{border:3px solid var(--color-main);}
@media all and (max-width:1024px){
 #sitemap .list > li{width:calc(100% / 3 - 16px);}
}
@media all and (max-width:768px){
 #sitemap .list{gap:8px;}
 #sitemap .list > li{width:calc(100% / 2 - 4px);}
}
@media all and (max-width:425px){
 #sitemap .list{margin-top:8px;}
 #sitemap .list > li{width:100%;}
 #sitemap .list > li > a{justify-content:flex-start;}
 #sitemap .list > li > a i{margin-left:auto; font-size: 1.7rem;}
 #sitemap .listDep{gap:0; padding:8px;}
 #sitemap .listDep > li a i{font-size: 1.6rem;}
 #sitemap .listDep > li a::before{top:14px; border:2px solid #ccc;}
 #sitemap .listDep > li a:hover::before{border:2px solid var(--color-main);}
}


/*?시설사업*/
.root_daum_roughmap {margin-top:16px; width:100% !important;}
.root_daum_roughmap .cont {display:none;}
.root_daum_roughmap .wrap_btn_zoom button:focus{outline: 2px dashed var(--color-point) !important;}

.imgList{display:grid; gap:24px; margin-top:16px;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25%), 1fr));}
.imgList > li img{width:100%; height:100%; min-height:200px; max-height:300px; object-fit: cover; border-radius:16px; border:5px solid #fff; box-shadow:3px 5px 15px rgba(0,0,0,0.2);}
.imgList > li:has(.txt) img{height:calc(100% - 40px);}
.imgList > li .txt{margin-top:8px; text-align:center; font-weight:600;}

.imgBlog{display:flex; flex-direction:column; margin-top:24px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.imgBlog > li{display:flex; align-items:center; gap:40px; padding:24px 0; border-bottom:1px dashed #ccc; }
.imgBlog > li:last-child{border-bottom:0;}
.imgBlog img{width:250px;  min-height:250px; border-radius:8px; border:5px solid #fff; box-shadow:3px 5px 7px rgba(0,0,0,0.2);}
.imgBlog .right{flex:1;}
.imgBlog > li h5,
.imgBlog > li .h5{margin-top:0;}

.sImgList{display:flex; align-items:center; flex-wrap:wrap; gap:24px;}
.sImgList img{border-radius:8px; border:5px solid #fff; box-shadow:3px 5px 7px rgba(0,0,0,0.2); min-width:250px; min-height:250px;}

#fac .tbl{margin-top:24px;}

.colStep{display:flex; flex-wrap:wrap; gap: 16px 40px;  margin-top: 16px; }
.colStep > li{position:relative; display:inline-flex; align-items:center; justify-content:center; width:calc(100% / 3 - 27px); height:80px; border:1px solid #ccc; border-radius:8px; padding:16px; background:#f5f5f5; text-align:center; }
.colStep > li::before{position:absolute; content:''; width:16px; height:16px; border-top:3px solid #676767; border-right:3px solid #676767; right:-16px; top:50%; transform:rotate(45deg) translateY(-50%); }
.colStep > li.col{flex-direction:column; gap:2px; }
.colStep > li.col p{display:flex; align-items:center; justify-content:center; width:100%; height:calc(100% / 2 - 1px);}
.colStep > li:first-child { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.colStep > li:last-child { background: none; height: auto; padding: 0; border: none; }
.colStep > li:last-child::before{display:none;}
.colStep > li:last-child p {background: var(--color-sub); border-radius: 8px; border: 1px solid #1a3ba7;  color:#fff;}
.colStep > li:last-child p:first-child {border-color: #a60c24; background: #d62c54; }
.colStep.colStep2 > li{flex-direction:column; height:auto; padding:16px; font-weight: 600; font-size: 1.9rem;}
.colStep.colStep2 > li span{margin-top:16px; padding-top:16px; border-top:1px dashed #ccc; font-weight: 400; font-size: inherit; width:100%;}
.colStep.colStep2 > li:last-child{background:#676767; color:#fff;}

.tbl.stxt{font-size:1.5rem; min-width:1180px;}
.tbl.stxt th,
.tbl.stxt td{padding:6px 4px;}

.resultFilt.naechonOnly .srhSort{padding:24px; justify-content:center; border-radius:8px; background:#f5f5f5; width:100%;  }

@media all and (max-width:768px){
 .imgList{margin-top:8px; gap:16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 47%), 1fr));}
 .imgList > li img{min-height:100px; border:3px solid #fff; box-shadow:3px 5px 7px rgba(0,0,0,0.2); border-radius:8px;}
 .sImgList{flex-wrap:wrap; gap:8px;}
 .sImgList > li{flex:1 0 calc(100% / 2 - 4px);}
 .sImgList > li img{width:100%;}
 .imgBlog{border-top:0; border-bottom:0;}
 .imgBlog > li{flex-direction:column; align-items:flex-start; gap:8px;padding:16px 0;}
 .imgBlog img{width:100%;}
 .imgList > li .txt{font-weight: 500; font-size: 1.5rem;}
 #fac .tbl{margin-top:16px;}
.tbl.stxt{font-size:1.3rem;}
 .colStep{gap:16px 24px;}
 .colStep > li::before{width:12px; height:12px; border-top:2px solid #676767; border-right:2px solid #676767; right:-11px;}
 .colStep.colStep2 > li{font-size: 1.7rem;}
 .colStep.colStep2 > li span{font-size: 1.5rem;}
}
@media all and (max-width:425px){
 .imgList{margin-top:24px; gap:8px;}
 .imgList > li{width:100%; }
 .colStep.colStep2 > li{padding:8px; font-size: 1.5rem; width:calc(100% / 2 - 12px);}
 .colStep.colStep2 > li span{margin-top:8px; padding-top:8px; font-size: 1.3rem;}
 .resultFilt.naechonOnly .srhSort{padding:0; background:none;}
}

/*찾아오시는 길*/
.addInfo .tit{position:relative; display:inline-flex; padding-left:32px; margin-top:40px; font-size: 1.9rem; font-weight: 600; font-family: var(--style-font);}
.addInfo .tit i{position:absolute; left:0; top:2px; color:var(--color-main) }
.addInfo .road{margin-top:8px;}
.addInfo .road > li{margin-top:4px;}
.addInfo .road > li .num{display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; margin-right:8px; border-radius:100px; border:1px solid var(--color-sub); color:var(--color-sub); font-weight: 600; font-size: 1.5rem; min-width:60px;}
.addInfo .mg{margin-left:32px;}
@media all and (max-width:768px){
    .addInfo .tit{margin-top:24px; font-size: 1.7rem;}
    .addInfo .road > li .num{padding:2px 8px; min-width:50px;}
}


/*?참여알림*/
.mobWrt{display:flex; flex-wrap:wrap; gap:24px 80px; align-items:center; padding:40px; border-radius:24px; background:#f5f5f5;}
.mobWrt .right{width:35%;}
.mobWrt .left{flex:1;}
.mobWrt .left .tit{font-size: 4.0rem; font-weight: 600;}
.mobWrt .left .numBox{position:relative; margin:24px 0; padding:24px 40px; padding-left:120px; background:var(--color-sub) url(../img/sub/message.svg) no-repeat 24px 50%; border-radius:16px; width:fit-content;}
.mobWrt .left .numBox .txt{font-size: 2.8rem; font-weight: 600; color:#fff;}
.mobWrt .left .numBox .num{font-size: 4.0rem; font-weight: 600; color:yellow; font-family: var(--style-font);}
.mobWrt .list{width:100%;}
.mobWrt .note{position:relative; padding-left:24px; width:100%;}
.mobWrt .note::before{position:absolute; content:'※'; left:0; top:0;}
@media all and (max-width:1024px){
 .mobWrt{gap:16px 40px;}
 .mobWrt .left .tit{font-size: 2.8rem;}
 .mobWrt .left .numBox .txt{font-size: 2.1rem;}
 .mobWrt .left .numBox .num{font-size: 2.8rem;}
 .mobWrt .left .numBox{padding-left:100px; background-size:50px;}
}
@media all and (max-width:768px){
 .mobWrt{flex-direction:column; align-items:flex-start; padding:24px; border-radius:16px;}
 .mobWrt .left{margin:0 auto;}
 .mobWrt .left .tit{font-size: 1.9rem;}
 .mobWrt .left .numBox{margin:0 auto; margin-top:16px; padding:24px; padding-left:80px; background-size:40px;}
 .mobWrt .left .numBox .txt{font-size: 1.7rem;}
 .mobWrt .left .numBox .num{font-size: 2.1rem;}
 .mobWrt .right{margin:0 auto; width:100%; max-width:400px;}
}

/*고객서비스 헌장*/
.certBox{position:relative; padding:100px; background:url(../img/sub/grayLogo.svg) no-repeat 50% 50%; background-size:50%; min-height:600px;}
.certBox::before,
.certBox::after{position:absolute; content:''; width:100%; min-height:210px; background:url(../img/sub/certificate.svg) no-repeat 50% 0; background-size:contain;}
.certBox::before{left:0; top:0;}
.certBox::after{left:0; bottom:0; transform:rotate(180deg);}
.certBox .top{text-align: center;}
.certBox .top .tit{font-size: 4.0rem; font-weight: 600; font-family: var(--style-font);}
.certBox .top .txt{margin-top: 24px; font-size: 2.1rem; font-weight: 600;}
.certBox .txtBox{display:flex; flex-direction:column; gap:24px; padding:40px 0;}
.certBox .txtBox > li{display:inline-flex; flex-direction:column; gap:8px;}
.certBox .txtBox .bgP{display:inline-flex; align-items:center; padding:8px 12px; background:var(--color-sub); color:#fff; font-weight: 600; border-radius:8px 16px; width:fit-content;}
.certBox .txtBox .txt{font-size: 1.9rem;}
@media all and (max-width:1440px){
    .certBox .top .tit{font-size: 3.2rem;}
}
@media all and (max-width:768px){
 .certBox{padding:24px;}
 .certBox .top .tit{font-size: 2.8rem;}
 .certBox .top .txt{font-size: 1.9rem;}
 .certBox .txtBox{padding:24px 0;}
 .certBox .txtBox .txt{font-size: 1.7rem;}
}
@media all and (max-width:425px){
 .certBox .top .tit{font-size: 2.5rem;}
 .certBox .top .txt{font-size: 1.7rem;}
 .certBox .txtBox{gap:16px;}
 .certBox .txtBox .txt{font-size: 1.5rem;}
}

/*비전 및 전략*/
.contribute2025 dl { position: relative; text-align: center; display: flex; justify-content: space-between; padding-left: 130px; margin-top: 30px;}
.contribute2025 dl:before { position: absolute; left: 108px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #d3d3d3; content: ""; box-shadow: -10px 0 0 #d3d3d3, 10px 0 0 #d3d3d3; transform: translateY(-50%);}
.contribute2025 dl>dt { position: absolute; left: 0; top: 50%; width: 90px; padding: 8px 0; font-size: 1.5rem; font-weight: 600; color: #fff; transform: translateY(-50%); border-radius: 24px; background: #33354e;}
.contribute2025 dl>dd { width: 100%; word-break: keep-all; border-radius: 16px;}
.contribute2025 dl.vision>dd { padding: 16px; font-size: 2.5rem; color: #111; border: 5px solid #eee; font-family: var(--style-font);}
.contribute2025 dl.vision>dd span { font-weight: 600; color: var(--color-point);}
.contribute2025 dl.vision>dd span:nth-child(2) { color: var(--color-sub);}
.contribute2025 dl.slogan>dd { padding: 16px; font-size: 2.5rem; color: #fff; background: var(--color-sub);}
.contribute2025 dl.slogan>dd span { font-weight: 600;}
.contribute2025 dl.objectives>dd { flex: 0 0 calc(25% - 7px); display:inline-flex; align-items:center; justify-content:center; padding: 16px; color: #111;  border: 2px solid; }
.contribute2025 dl.objectives>dd:nth-of-type(1) { border-color: #CF357A;}
.contribute2025 dl.objectives>dd:nth-of-type(2) { border-color: #8E52C2;}
.contribute2025 dl.objectives>dd:nth-of-type(3) { border-color: #00857D;}
.contribute2025 dl.objectives>dd:nth-of-type(4) { border-color: #D04200;}
.contribute2025 dl.task>dd { flex: 0 0 calc(25% - 7px); display: flex; justify-content: center; align-items: center; ; padding: 16px; border: 1px solid #ccc; background: #f9f9f9;}
@media all and (max-width:768px){
    .contribute2025 dl{margin-top:16px; padding-left:0; flex-direction:column; gap:8px;}
    .contribute2025 dl:before{display: none;}
    .contribute2025 dl>dt{position:relative; left:auto; top:auto; transform:none;}
    .contribute2025 dl.vision>dd,
    .contribute2025 dl.slogan>dd{font-size: 1.9rem;}
    .contribute2025 dl>dd{border-radius:8px;}
}
@media all and (max-width:425px){
    .contribute2025 dl.vision>dd, 
    .contribute2025 dl.slogan>dd{font-size: 1.7rem;}
    .contribute2025 dl>dt{padding:4px 0;}
}

.contribute_org2025 { text-align: center;}
.contribute_org2025 * {word-break: keep-all;}
.contribute_org2025 *:before, 
.contribute_org2025 *:after { z-index: -1;}
.contribute_org2025 ul:not(.depth4)>li>dl { position: relative; width: 300px; margin: 0 auto 20px;}
.contribute_org2025 ul:not(.depth4)>li>dl>dt { padding: 8px; color: #fff;  font-weight: 600; border-radius: 16px 16px 0 0; font-family: var(--style-font);}
.contribute_org2025 ul:not(.depth4)>li>dl>dd { padding: 8px; border-radius: 0 0 16px 16px; border: 1px solid #ccc; border-top: 0;}
.contribute_org2025 .d1>dt { background-color: var(--color-main);}
.contribute_org2025 .d2>dt { background-color: var(--color-sub2);}
.contribute_org2025 .d3>dt { background-color: var(--color-sub);}
.contribute_org2025 ul.depth4 { display: flex; gap: 5px;}
.contribute_org2025 ul.depth4>li { position: relative; margin-top: 20px; display: flex; flex: 1 0 13%;}
.contribute_org2025 ul.depth4>li dl { display: flex; flex-direction: column; border: 1px solid #ccc; border-radius: 8px; width:100%; overflow: hidden;}
.contribute_org2025 ul.depth4>li dl dt { flex: 0 0 auto; padding: 8px 0; color: #111;  font-weight: 600; font-family: var(--style-font); border-bottom: 1px solid #ccc; background: #fff;}
.contribute_org2025 ul.depth4>li dl dd { flex: 1 1 auto; display:inline-flex; align-items:center; justify-content:center; padding: 8px; letter-spacing: -0.5px; background: #f9f9f9;}
.contribute_org2025 ul:not(.depth4)>li>dl:before { position: absolute; left: 50%; top: 100%; height: 20px; width: 1px; background: #ddd; content: "";}
.contribute_org2025 ul.depth4>li:before { position: absolute; left: 50%; bottom: 100%; height: 20px; width: 1px; background: #ddd; content: "";}
.contribute_org2025 ul.depth4>li:after { position: absolute; left: -2.5px; right: -2.5px; bottom: calc(100% + 20px); height: 1px; background: #ddd; content: "";}
.contribute_org2025 ul.depth4>li:first-child:after { left: 50%;}
.contribute_org2025 ul.depth4>li:last-child:after { right: 50%;}
@media all and (max-width:768px){
    .contribute_org2025 ul.depth4{flex-wrap:wrap;}
    .contribute_org2025 ul.depth4>li{flex:1 0 calc(100% / 5 - 3px); margin-top:0;}
    .contribute_org2025 ul.depth4>li:before,
    .contribute_org2025 ul.depth4>li:after{display:none;}
}
@media all and (max-width:425px){
    .contribute_org2025 ul:not(.depth4)>li>dl{width:100%;}
    .contribute_org2025 ul:not(.depth4)>li>dl>dt{border-radius:8px 8px 0 0;}
    .contribute_org2025 ul:not(.depth4)>li>dl>dd{border-radius:0 0 8px 8px;}
}

/*ESG 경영체제*/
.esg2023 > p { text-align: center; font-size: 4.0rem; font-weight: 600; font-family: var(--style-font);}
.esg2023 > div { position: relative; margin-top: 80px; }
.esg2023 > div > dl { position: relative; text-align: center; display: flex; justify-content: space-between; padding-left: 180px; margin-top: 20px; }
.esg2023 > div > dl:before { position: absolute; left: 158px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #d3d3d3; content: ""; box-shadow: -10px 0 0 #d3d3d3, 10px 0 0 #d3d3d3; transform: translateY(-50%); }
.esg2023 > div > dl > dt { position: absolute; left: 0; top: 50%; width: 140px; padding: 8px 0;  color: #fff; transform: translateY(-50%); border-radius: 20px; background: #33354e; }
.esg2023 > div > dl > dd { width: calc(33.33% - 5px); border-radius: 10px; }
.esg2023 > div:nth-of-type(1) { margin-top: 30px; }
.esg2023 > div:nth-of-type(1) > dl > dt { background: #33354e; }
.esg2023 > div:nth-of-type(1) > dl:nth-of-type(1) > dd { width: 100%; padding: 16px; font-size:2.5rem; font-family:var(--style-font); color: #111; border: 5px solid #eee; }
.esg2023 > div:nth-of-type(1) > dl:nth-of-type(1) > dd span { font-weight: 600; color: var(--color-point); }
.esg2023 > div:nth-of-type(1) > dl:nth-of-type(1) > dd span:nth-child(2) { color: var(--color-sub); }
.esg2023 > div:nth-of-type(1) > dl:nth-of-type(2) > dd { width: 100%; padding: 16px; font-size:2.5rem; font-family:var(--style-font); color: #fff; background: var(--color-sub); }
.esg2023 > div:nth-of-type(1) > dl:nth-of-type(2) > dd span { font-weight: 600; }
.esg2023 > div:nth-of-type(1) > dl:nth-of-type(3) > dd { width: calc(25% - 5px); padding: 16px 8px;  border: 1px solid #ccc; background: #f9f9f9; }
.esg2023 > div:nth-of-type(2) > dl > dt { background: #c33c62; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(1) > dd { width: 100%; padding: 16px; font-size:2.5rem; font-family:var(--style-font); color: #111; border: 5px solid #eee; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(1) > dd span { font-weight: 600; color: var(--color-sub2); }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(1) > dd span:nth-child(2) { color: var(--color-sub); }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(2) > dd { width: 100%; padding: 16px; letter-spacing: -0.5px; border: 1px solid #ccc; background: #f9f9f9; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd .tit { position: relative; width: 120px; height: 120px; margin: 0 auto; padding-top: 70px;  color: #fff; border-radius: 50%; background: no-repeat center 17px; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd .tit span { font-weight: 600; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd .txt { position: relative; margin-top: 8px;  font-weight: 600; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd:nth-of-type(1) .tit { background: var(--color-sub2) url('../img/sub/esg_ic01.svg') no-repeat 50% 16px; background-size:40px;}
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd:nth-of-type(2) .tit { background: #007DB7 url('../img/sub/esg_ic02.svg') no-repeat 50% 24px;  background-size:44px;}
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd:nth-of-type(3) .tit { background: var(--color-main-90) url('../img/sub/esg_ic03.svg') no-repeat 50% 24px;  background-size:44px;}
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd:nth-of-type(1) .txt { color: #00837a; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd:nth-of-type(2) .txt { color: #007DB7; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(3) > dd:nth-of-type(3) .txt { color: var(--color-main-90); }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(4) > dd { display: flex; flex-direction: column; justify-content: center; text-align: left; padding: 16px; border: 2px solid; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(4) > dd:nth-of-type(1) { border-color: var(--color-sub2); }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(4) > dd:nth-of-type(2) { border-color: #007DB7; }
.esg2023 > div:nth-of-type(2) > dl:nth-of-type(4) > dd:nth-of-type(3) { border-color: var(--color-main-90); }
.esg2023 > div:nth-of-type(3) > dl > dt { background: var(--color-main-90); }
.esg2023 > div:nth-of-type(3) > dl > dd { border: 1px solid #333; overflow: hidden; }
.esg2023 > div:nth-of-type(3) > dl > dd > p { padding: 16px 8px; color: #fff;  background: #333; }
.esg2023 > div:nth-of-type(3) > dl > dd > ul { padding: 16px; }
.esg2023 > div:nth-of-type(3) > dl > dd > ul > li { margin-top: 7px; }
.esg2023 > div:nth-of-type(3) > dl > dd > ul > li:first-child { margin-top: 0; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(1) > dd > ul { text-align: left; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(1) > dd:nth-of-type(1) { border-color: #767676; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(1) > dd:nth-of-type(1) > p { background: #767676; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(1) > dd:nth-of-type(2) { border-color: #555; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(1) > dd:nth-of-type(2) > p { background: #555; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(2) > dd:nth-of-type(1) { border-color: var(--color-sub2); }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(2) > dd:nth-of-type(1) > p { background: var(--color-sub2); }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(2) > dd:nth-of-type(2) { border-color: #007DB7; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(2) > dd:nth-of-type(2) > p { background: #007DB7; }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(2) > dd:nth-of-type(3) { border-color: var(--color-main-90); }
.esg2023 > div:nth-of-type(3) > dl:nth-of-type(2) > dd:nth-of-type(3) > p { background: var(--color-main-90); }

.esg2023 > div:nth-of-type(1):before, .esg2023 > div:nth-of-type(2):before, .esg2023 > div:nth-of-type(3):before { position: absolute; left: 50%; top: -73px; width: 352px; height: 70px; background: url('../img/sub/esg_bg.gif') no-repeat; transform: translateX(-50%); content: ""; z-index: -1; }
.esg2023 > div:nth-of-type(3):before { transform: translateX(-50%) rotate(180deg); }

@media all and (max-width:1440px){
    .esg2023 > div{margin-top:40px;}
    .esg2023 > p{font-size:3.2rem;}
}
@media all and (max-width:768px){
    .esg2023 > p,
    .esg2023 > div:nth-of-type(2) > dl:nth-of-type(1) > dd{font-size: 2.8rem;}
    .esg2023 > div > dl{flex-wrap:wrap;flex-direction:column; gap:8px; padding-left:0; }
    .esg2023 > div > dl.flexRow{flex-direction:row; }
    .esg2023 > div > dl.flexRow dd,
    .esg2023 > div:nth-of-type(1) > dl:nth-of-type(3) > dd{width:100%;}
    .esg2023 > div:nth-of-type(3) > dl > dd > p{padding:8px;}
    .esg2023 > div:nth-of-type(2) > dl:nth-of-type(4) > dd{padding:8px 16px;}
    .esg2023 > div > dl:before{display:none;}
    .esg2023 > div > dl > dt{position:relative; left:auto; top:auto; transform:none;}
    .esg2023 > div:nth-of-type(1) > dl:nth-of-type(1) > dd,
    .esg2023 > div:nth-of-type(1) > dl:nth-of-type(2) > dd,
    .esg2023 > div:nth-of-type(2) > dl:nth-of-type(1) > dd{font-size: 1.9rem;}
}
@media all and (max-width:425px){
    .esg2023 > p{font-size: 2.5rem;}
    .esg2023 > div:nth-of-type(1) > dl:nth-of-type(1) > dd,
    .esg2023 > div:nth-of-type(1) > dl:nth-of-type(2) > dd,
    .esg2023 > div:nth-of-type(2) > dl:nth-of-type(1) > dd{font-size: 1.7rem;}
}

/*임직원 행동강령*/
#ntEthicsCode .topTit{font-size: 3.2rem; font-weight: 600; font-family: var(--style-font); text-align: center;}
@media all and (max-width:1440px){
    #ntEthicsCode .topTit{font-size: 2.8rem;}
}
@media all and (max-width:768px){
    #ntEthicsCode .topTit{font-size: 2.5rem;}
}
@media all and (max-width:425px){
    #ntEthicsCode .topTit{font-size: 1.9rem;}
}

/*인권상담센터*/
#humanHelp{margin-top:100px; border-top:1px dashed #444;}
.humStep{display:flex; gap:8px 24px;  margin:16px 0; flex-wrap:wrap;}
.humStep > li{position:relative; width:calc(100% / 4 - 18px); display:inline-flex; align-items:center; justify-content:center; padding:16px; border-radius:16px; border:1px solid #ccc; background:#f5f5f5; text-align: center;}
.humStep > li:first-child{background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.humStep > li:not(:last-child)::before{position:absolute; content:''; width:8px; height:8px; border-top:3px solid var(--color-main); border-right:3px solid var(--color-main); box-sizing: border-box; right:-11px; top:50%; transform:rotate(45deg) translateY(-50%); }
.humStep .em{background:#444; color:#fff;}
@media all and (max-width:768px){
    .humStep{flex-wrap:wrap;}
    .humStep > li{width:calc(100% / 3 - 16px);}
}
@media all and (max-width:425px){
    .humStep > li{width:calc(100% / 2 - 12px); padding:8px; border-radius:8px;}
}


/*? 정보공개 */
.graphtbl tbody tr *:nth-child(1) {width: 25%; text-align: left;}
.graphtbl tbody tr *:nth-child(2) {width: 13%;}
.graphtbl tbody tr td p.graph { position: relative; height: 25px; text-align: left; background: #aaa; border-radius: 0 5px 5px 0; box-sizing: border-box;}
.graphtbl tbody tr td span { position: absolute; top: 2px; left: 100%; margin-left: 10px; font-weight: normal; color: #484848;}
.graphtbl tbody tr:nth-child(6n-5) td p.graph {background-image: url('../img/sub/graph_pattern01.svg'); background-color: #416CEC;}
.graphtbl tbody tr:nth-child(6n-4) td p.graph {background-image: url('../img/sub/graph_pattern02.svg'); background-color: #D72D88;}
.graphtbl tbody tr:nth-child(6n-3) td p.graph {background-image: url('../img/sub/graph_pattern03.svg'); background-color: #068938;}
.graphtbl tbody tr:nth-child(6n-2) td p.graph {background-image: url('../img/sub/graph_pattern01.svg'); background-color: #8459E8;}
.graphtbl tbody tr:nth-child(6n-1) td p.graph {background-image: url('../img/sub/graph_pattern02.svg'); background-color: #DD3636;}
.graphtbl tbody tr:nth-child(6n) td p.graph {background-image: url('../img/sub/graph_pattern03.svg'); background-color: #0A7AB2;}

.odBox{display:flex; gap:40px; margin-top: 24px;}
.odBox > li{flex:1; display:flex; flex-direction:column; padding:16px;  border:1px solid #ccc; border-radius:16px; overflow:hidden;}
.odBox > li .tit{padding:0 16px 16px; text-align:center; font-size: 2.1rem; font-weight: 600; font-family: var(--style-font);}
.odBox > li .box{flex:1; display:flex; flex-direction:column; border-radius:8px; width:100%; height:100%; overflow:hidden;}
.odBox > li .box .txt{display:inline-flex; align-items:center; flex:1; padding:16px; color:#fff; background:var(--color-sub);}
.odBox > li .box .wt{display:inline-flex; align-items:center; flex:1; background:#f5f5f5; padding:16px; color:#444;}
@media all and (max-width:1280px){
    .odBox{gap:24px;}
}
@media all and (max-width:768px){
    .odBox{flex-direction:column; gap:16px;}
    .odBox > li .tit{font-size: 1.9rem;}
}
@media all and (max-width:425px){
    .odBox{margin-top:4px;}
    .odBox > li{padding:0px; border:0; border-radius:0;}
    .odBox > li .tit{font-size: 1.7rem; padding:0 16px 4px;}
}

/*토지수용 및 보상 - 보상절차*/
.vertiStep{display:flex; flex-direction:column; gap:40px; margin-top: 24px;}
.vertiStep > li{display:flex; gap:24px; }
.vertiStep > li .tit{position:relative; font-size: 1.9rem; font-weight: 600; width:35%; display:inline-flex; align-items:center; justify-content:center; text-align: center; padding:16px; border-radius:16px; border:1px solid #ccc; background:#f5f5f5;}
.vertiStep > li .tit::before{position:absolute; content:''; left:50%; bottom:-24px; transform:translateX(-50%) rotate(45deg); width:16px; height:16px; border-right:3px solid #676767; border-bottom:3px solid #676767;}
.vertiStep > li:first-child .tit{background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.1);}
.vertiStep > li:last-child .tit{background:#676767; color:#fff;}
.vertiStep > li:last-child .tit::before{display:none;}
.vertiStep > li .txt{position:relative; display:inline-flex; flex:1;align-items:center; padding:16px; background:#e5e5e5;  border:1px solid #ccc; }
@media all and (max-width:768px){
    .vertiStep{gap:24px;}
    .vertiStep > li{gap:8px;}
    .vertiStep > li .tit::before{width:12px; height:12px; border-right:2px solid #676767; border-bottom:2px solid #676767; bottom:-16px;}
    .vertiStep > li .tit{font-size: 1.7rem;}
}
@media all and (max-width:425px){
    .vertiStep > li .tit{font-size: 1.5rem; padding:8px;}
    .vertiStep > li .txt{padding:8px;}
}

/*도시개발사업*/
.typeVerticalStep {margin-top:24px; text-align: center; }
.typeVerticalStep *:before, 
.typeVerticalStep *:after { position: absolute;  content: ""; }

.typeVerticalStep > ol > li { position: relative; }
.typeVerticalStep dl { position: relative; display:flex; flex-direction:column; gap:24px;}
.typeVerticalStep dl > dt {position: relative; padding:16px; width: 100%; border-radius: 16px; background: #ccc; color: #fff; font-size: 1.9rem; font-family: var(--style-font); font-weight: 600; }

.typeVerticalStep dl > dd { display:flex; gap:40px; flex:1;}
.typeVerticalStep dl > dd > ol{width:100%;}
.typeVerticalStep dl > dd > ol > li { position: relative; padding: 16px;  border: 1px solid #ccc; border-radius: 8px; background: #f5f5f5; word-break: keep-all; }
.typeVerticalStep dl > dd > ol > li.noRead{background:transparent; border:none;}
.typeVerticalStep dl > dd > ol > li:not(:first-child) { margin-top: 30px; }
.typeVerticalStep > ol > li:not(:first-child) { margin-top: 40px; }
.typeVerticalStep dl > dd > ol > li.noRead::before{display:none;}

.typeVerticalStep dl > dd > ol > li:before, .typeVerticalStep .useArr:before { bottom: -20px; left: 50%; margin-left: -8px; width: 12px; height: 12px; border-right: 3px solid #676767; border-bottom: 3px solid #676767; transform: rotate(45deg); }
.typeVerticalStep dl > dd > ol > li.noBefore:before{display:none;}

.typeVerticalStep > ol > li:nth-child(3n-2) > dl > dt { border: 1px solid var(--color-sub); background: var(--color-sub); }
.typeVerticalStep > ol > li:nth-child(3n-1) > dl > dt { border: 1px solid var(--color-sub2); background:var(--color-sub2); }
.typeVerticalStep > ol > li:nth-child(3n) > dl > dt { border: 1px solid var(--color-purple); background: var(--color-purple); }

.typeVerticalStep > ol > li > p { position: relative; display: flex; align-items:center; justify-content:center; padding:16px; width:100%; color: #fff; font-size: 1.9rem; font-weight: 600; border: 1px solid #37383c; background: #4e4f52; border-radius:16px; font-family: var(--style-font);}

.typeVerticalStep dl > dd > ol > li > ul {margin-top:16px; padding: 8px 16px; background: #fff; border-radius:8px; }
.typeVerticalStep dl > dd > ol > li > ul > li { position: relative; color:#676767;}
.typeVerticalStep dl > dd > ol > li > ul > li:not(:first-child) { margin-top: 4px; }

.typeVerticalStep li.depth1 > ul {position:relative; margin-top:10px; padding: 8px 16px; background: #fff; border-radius:8px; border:1px solid #ccc; }
.typeVerticalStep li.depth1 > ul::before{bottom: -20px; left: 50%; margin-left: -8px; width: 12px; height: 12px; border-right: 3px solid #676767; border-bottom: 3px solid #676767; transform: rotate(45deg); }
.typeVerticalStep li.depth1 > ul > li { position: relative;  color:#676767; }
.typeVerticalStep li.depth1 > ul > li:not(:first-child) { margin-top: 4px; }
.typeVerticalStep li.depth1 > p{margin-top:30px; font-family: 'Freesentation'; font-size: inherit; font-weight: normal; background:#e9e9e9; border-radius:8px; border:1px solid #ccc; padding:16px; color:#111;}

.typeVerticalStep.type1 > ol > li:nth-child(2) { margin-top: 40px; }

.typeVerticalStep.type2 > ol > li:nth-child(3) { margin-top: 30px; }

.typeVerticalStep.type4 > ol > li:not(:first-child) { margin-top: 40px; }
.typeVerticalStep.type4 > ol > li:nth-child(4) { margin-top: 70px; }
.typeVerticalStep.type4 > ol > li:nth-child(4) > dl > dt { border: 1px solid #b8254e; background: #CF357A; }
@media all and (max-width:768px){
    .typeVerticalStep dl > dt,
    .typeVerticalStep > ol > li > p{font-size: 1.7rem;}
    .typeVerticalStep dl > dd{gap:24px;}
}
@media all and (max-width:425px){
    .typeVerticalStep{margin-top:8px;}
    .typeVerticalStep dl > dd{gap:8px;}
    .typeVerticalStep dl{gap:8px;}
}

/*도시정비사업*/
.verticalStep {margin:16px auto;}
.verticalStep *:before, .verticalStep *:after { position: absolute;  content: ""; }
.verticalStep > li { position: relative; text-align: center; padding: 16px;  border: 1px solid #ccc; border-radius: 8px; background: #f5f5f5; word-break: keep-all; }
.verticalStep > li:first-child { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.verticalStep > li:last-child { color: #fff;  background: var(--color-sub);  font-weight: 600; }
.verticalStep > li:not(:first-child) { margin-top: 30px; }
.verticalStep > li:not(:last-child):before { bottom: -20px; left: 50%; margin-left: -8px; width: 12px; height: 12px; border-right: 3px solid #676767; border-bottom: 3px solid #676767; transform: rotate(45deg);}
.verticalStep > li > ul { position:relative; margin-top:10px; padding: 8px 16px; background: #fff; border-radius:8px; }
.verticalStep > li:first-child > ul{background:#f9f9f9;}
.verticalStep > li > ul > li { position: relative; color:#676767;}
.verticalStep > li > ul > li:not(:first-child) { margin-top: 5px; }
.verticalStep.rewardStep { padding-right: 65%; }
.verticalStep.rewardStep > li > ul { right: -475px; width: 455px; }

/*관광지 조성사업*/
.tourStep{display:flex; flex-direction:column; gap:24px;}
.tourStep > li{display:flex; gap:8px 16px;}
.tourStep > li > p{display:flex; align-items:center; justify-content:center; padding:16px; width:30%; border-radius:16px; color:#fff; font-weight: 600; font-size: 1.9rem; font-family: var(--style-font); text-align: center;}
.tourStep > li:nth-child(1) > p{background:#007DB7;}
.tourStep > li:nth-child(2) > p{background:#D04200;}
.tourStep > li:nth-child(3) > p{background:#00857D;}
.tourStep > li:nth-child(4) > p{background:#CF357A;}
.tourStep > li:nth-child(5) > p{background:#8E52C2;}
.tourStep > li > ul{flex:1; display:flex; flex-direction:column; gap:16px;}
.tourStep > li > ul > li{display:inline-flex; align-items:center; justify-content:center; padding:16px; border-radius:8px; background:#f5f5f5; border:1px solid #ccc; width:100%; text-align:center;}
.tourStep > li:nth-child(1) > ul > li{border:1px solid #007DB7;}
.tourStep > li:nth-child(2) > ul > li{border:1px solid #D04200;}
.tourStep > li:nth-child(3) > ul > li{border:1px solid #00857D;}
.tourStep > li:nth-child(4) > ul > li{border:1px solid #CF357A;}
.tourStep > li:nth-child(5) > ul > li{border:1px solid #8E52C2;}
@media all and (max-width:768px){
    .tourStep > li > p{font-size: 1.7rem;}
}
@media all and (max-width:425px){
    .tourStep > li{flex-direction:column; }
    .tourStep > li > p{width:100%; font-size: 1.5rem;}
    .tourStep > li > ul{gap:4px;}
    .tourStep > li > ul > li{padding:8px;}
}


/*?공사소개*/
/*전화번호안내*/
.phoneInfo{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 40px; padding:16px; margin-bottom:40px; border-radius:8px; background:var(--color-sub-80); color:#fff; font-weight: 600; }
.phoneInfo > p{display:inline-flex; align-items:center; gap:8px;}
.phoneInfo > p .num{font-size: 2.5rem; color:#fbff58;}
@media all and (max-width:768px){
    .phoneInfo{margin-bottom:24px;}
    .phoneInfo > p .num{font-size: 1.9rem;}
}
@media all and (max-width:425px){
    .phoneInfo{padding:8px; gap:4px 16px; margin-bottom:16px;}
    .phoneInfo > p .num{font-size: 1.7rem;}
    .phoneInfo > p i{font-size: 1.7rem;}
}

/*경영목표 전략*/
.strategy2024 > p { text-align: center; font-size: 4.0rem; font-weight: 600; font-family: var(--style-font); }

.strategy2024 > dl { position: relative; text-align: center; display: flex; justify-content: space-around; padding-left: 180px; margin-top: 20px; }
.strategy2024 > dl:before { position: absolute; left: 158px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #d3d3d3; content: ""; box-shadow: -10px 0 0 #d3d3d3, 10px 0 0 #d3d3d3; transform: translateY(-50%); }

.strategy2024 > dl > dt { position: absolute; left: 0; top: 50%; width: 140px; padding: 8px 0;  color: #fff; transform: translateY(-50%); border-radius: 20px; background: #33354e; }
.strategy2024 > dl > dd { width: calc(20% - 5px); word-break: keep-all; border-radius: 10px;  }

.strategy2024 > dl.mission > dd { width: 100%; padding: 15px; font-size: 2.5rem; color: #111; border: 5px solid #eee;  font-family: var(--style-font);}
.strategy2024 > dl.mission > dd span { font-weight: 600; color: var(--color-point); }
.strategy2024 > dl.mission > dd span:nth-child(2) { color: var(--color-sub); }

.strategy2024 > dl.vision > dd { width: 100%; padding: 15px; font-size: 2.5rem; font-weight: 300; color: #fff; background: var(--color-sub); font-family: var(--style-font);}
.strategy2024 > dl.vision > dd span { font-weight: 500; }

.strategy2024 > dl.slogan > dd { width: 100%; padding: 13px; font-size: 1.9rem; font-weight: 400; color: #333; border: 1px solid #ccc; background: #f9f9f9; }

.strategy2024 > dl.value > dd { height: 120px; width:120px; padding-top: 75px;  color: #fff; border-radius: 50%; background: no-repeat center 23px; }
.strategy2024 > dl.value > dd:nth-of-type(1) { background: #007DB7 url(../img/sub/stra_ic01.svg) no-repeat 50% 24px; background-size:45px;}
.strategy2024 > dl.value > dd:nth-of-type(2) { background: #8E52C2 url(../img/sub/stra_ic02.svg) no-repeat 50% 24px; background-size:45px;}
.strategy2024 > dl.value > dd:nth-of-type(3) { background: #00857D url(../img/sub/stra_ic03.svg) no-repeat 50% 24px; background-size:45px;}
.strategy2024 > dl.value > dd:nth-of-type(4) { background: #D04200 url(../img/sub/stra_ic04.svg) no-repeat 50% 24px; background-size:45px;}
.strategy2024 > dl.value > dd:nth-of-type(5) { background: #CF357A url(../img/sub/stra_ic05.svg) no-repeat 50% 24px; background-size:45px;}

.strategy2024 > dl.direction > dd { display: flex; flex-direction: column; justify-content: center; padding: 16px; color: #fff; }
.strategy2024 > dl.direction > dd:nth-of-type(1) { background-color: #007DB7; }
.strategy2024 > dl.direction > dd:nth-of-type(2) { background-color: #8E52C2; }
.strategy2024 > dl.direction > dd:nth-of-type(3) { background-color: #00857D; }
.strategy2024 > dl.direction > dd:nth-of-type(4) { background-color: #D04200; }
.strategy2024 > dl.direction > dd:nth-of-type(5) { background-color: #CF357A; }

.strategy2024 > dl.objectives > dd { display: flex; flex-direction: column; justify-content: center; padding: 16px; border: solid 2px; }
.strategy2024 > dl.objectives > dd:nth-of-type(1) { border-color: #007DB7; }
.strategy2024 > dl.objectives > dd:nth-of-type(2) { border-color: #8E52C2; }
.strategy2024 > dl.objectives > dd:nth-of-type(3) { border-color: #00857D; }
.strategy2024 > dl.objectives > dd:nth-of-type(4) { border-color: #D04200; }
.strategy2024 > dl.objectives > dd:nth-of-type(5) { border-color: #CF357A; }

.strategy2024 > dl.task > dd { text-align: left; padding:16px; border: 1px solid #ccc; background: #e9e9e9; }
.strategy2024 > dl.task > dd li { position: relative; padding-left: 8px; letter-spacing: -1px; }
.strategy2024 > dl.task > dd li:not(:first-child) { margin-top: 4px; }
.strategy2024 > dl.task > dd li:before { position: absolute; left: 0; top: 10px; width: 3px; height: 3px; background: #444; content: ""; }

.strategy2024 > dl.manage > dd { width: 32%; padding: 10px; font-size: 1.9rem; border: 1px solid #ccc; background: #f5f5f5; }
@media all and (max-width:1440px){
    .strategy2024 > p{font-size: 3.2rem;}
}
@media all and (max-width:1280px){
    .strategy2024 > p{font-size: 2.8rem;}
    .strategy2024 > dl.mission > dd,
    .strategy2024 > dl.vision > dd{font-size: 1.9rem;}
    .strategy2024 > dl{padding-left: 90px;}
    .strategy2024 > dl > dt{width:70px; font-size: 1.5rem;}
    .strategy2024 > dl:before{left:72px;}
}
@media all and (max-width:768px){
    .strategy2024 > p{font-size: 2.5rem;}
    .strategy2024 > dl.mission > dd,
    .strategy2024 > dl.vision > dd{font-size: 1.7rem;}
    .strategy2024 > dl{padding-left:0; flex-wrap:wrap; gap:8px;}
    .strategy2024 > dl > dt{position:relative; left:auto; top:auto; transform:none; flex:0 0 100%; background:transparent; padding:0; text-align: left;}
    .strategy2024 > dl > dt span{display:inline-flex; align-items:center; justify-content:center; width:140px; height:100%; background:#33354e; color:#fff; border-radius:100px; padding:8px; }
    .strategy2024 > dl:before{display: none;}
    .strategy2024 > dl > dd{flex:1; }
    .strategy2024 > dl.slogan > dd,
    .strategy2024 > dl.manage > dd{font-size: inherit;}
    .strategy2024 > dl.direction > dd,
    .strategy2024 > dl.objectives > dd,
    .strategy2024 > dl.task > dd{padding:8px;}
}
@media all and (max-width:425px){
    .strategy2024 > dl{flex-direction:column;}
    .strategy2024 > dl > dd{width:100%;}
    .strategy2024 > dl.value{flex-direction:initial;}
    .strategy2024 > dl.value > dd{flex:none;}
    .strategy2024 > dl.manage{flex-direction:initial;}
}


/*인사말*/
.greeting{display:flex; flex-direction:column; gap:40px;}
.greeting .topBg{position:relative; display:flex; flex-direction:column; gap:32px; padding:40px 80px; height:300px; justify-content:center; border-radius:16px; overflow: hidden; background:#000; z-index: 0;}
.greeting .topBg::before{position:absolute; content:''; min-width:100%; min-height:100%; background:url(../img/sub/greeting_img.jpg) no-repeat 50% 50%; left:50%; top:50%; transform:translate(-50%, -50%); object-fit: cover; opacity: .3; z-index: 0;}
.greeting .topBg .tit,
.greeting .topBg .txt{z-index:1; color:#fff; font-size: 2.8rem; font-family: var(--style-font); text-shadow: 2px 2px 5px rgba(0,0,0,1);}
.greeting .topBg .txt{font-size: 1.9rem;}
.greeting .botxt{font-size: 1.9rem;}
@media all and (max-width:768px){
    .greeting .topBg{padding:40px; height:240px; gap:16px;}
    .greeting .topBg .tit{font-size: 2.1rem;}
    .greeting .topBg .txt{font-size: inherit;}
    .greeting .botxt{font-size: inherit;}
}

/*설립경과연혁*/
.hisTit{font-size: 1.9rem; font-family: var(--style-font); font-weight: 600; text-align: center; }
.hisTit .stxt{margin-top:24px; font-size: 1.5rem; font-weight: normal; font-family: initial; }
.rangList{display:flex; gap:16px; flex-wrap: wrap;}
.rangList > li{display:inline-flex; align-items:center; justify-content:center; padding:16px; border-radius:8px; border:1px solid #ccc; background:#f5f5f5; width:calc(100% / 4 - 12px); text-align: center;}
@media all and (max-width:1024px){
    .rangList{gap:8px;}
    .rangList > li{padding:12px; width:calc(100% / 3 - 6px);}
}
@media all and (max-width:768px){
    .hisTit{font-size: inherit;}
    .hisTit .stxt{font-size: 1.3rem;}
    .rangList > li{padding:8px; width:calc(100% / 2 - 4px);}
}

.talent.mob{display:none;}
@media all and (max-width:425px){
    .talent.mob{display:block;}
    .talent.web{display:none;}
}

/*CI*/
.logoBox{display:flex; gap:80px; padding:40px; justify-content:center; align-items:center; border-radius:16px; border:1px solid #ccc; background:url(../img/common/plusLine.svg) repeat;}
.logoBox .rightImg{display:flex; flex-direction:column; gap:24px;}
.ciTxt{margin-top:16px; font-size: 1.9rem; }
.colorList{display:flex; gap:24px; margin-bottom:60px;}
.colorList > li{flex:1; position:relative; padding-top:80px; display:inline-flex; flex-direction:column; gap:8px;}
.colorList > li::before{position:absolute; content:''; left:0; top:0; width:100%; height:60px; border-radius:8px; }
.colorList > li:nth-child(1)::before{background:#2672B4;}
.colorList > li:nth-child(2)::before{background:#E5A748;}
.colorList > li:nth-child(3)::before{background:#B2D234;}
.colorList > li:nth-child(4)::before{background:#6D6E71;}
.colorList > li span{display:inline-block; min-width:60px;}
@media all and (max-width:768px){
    .logoBox{flex-direction:column; gap:40px;}
    .ciTxt{font-size: inherit;}
    .colorList{flex-direction:column; margin-bottom:20px;}
    .colorList > li{padding-top:68px;}
}

/* 조직 및 정원*/
.organ.mob{display:none;}
@media all and (max-width:768px){
    .organ.mob{display:block;}
    .organ.web{display:none;}
}


/*!통합검색*/
#comSrh{position:relative; min-height:80vh; }
#comSrh .head{display:flex; flex-direction:column; align-items:center; gap:32px; padding:100px 40px; background:#f5f5f5 url(../img/common/subBg.svg) no-repeat top center; background-size:contain;}
#comSrh .head .tit{font-family: var(--style-font); font-size:4rem ; font-weight: 600;}
#comSrh .head .srhBox{display:flex; align-items:center; padding:8px; border:3px solid var(--color-main); background:#fff; border-radius:100px; width:100%; max-width:1100px;}
#comSrh .head .srhBox label{flex:1; border-radius:100px; width:100%; height:100%;}
#comSrh .head .srhBox label input{border:0; border-radius:100px; font-size: 2.1rem; width:100%;}
#comSrh .head .srhBox label input::placeholder{font-size: 2.1rem;}
#comSrh .head .srhBox .srhBtn{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; background:var(--color-main); border-radius:100%; color:#fff;}
#comSrh .head .total{text-align: center; font-size:2.8rem ; font-weight: 600; font-family: var(--style-font);}
#comSrh .head .total .em{color:var(--color-sub);}
#comSrh .comDiv{display:flex; flex-direction:column; gap:80px; transform:translateY(-40px);}
#comSrh .comDiv .comTab{display:flex; align-items:center; width:100%; max-width:1600px; margin:0 auto; background:#fff; border-radius:16px 32px; box-shadow:3px 7px 15px rgba(0,0,0,0.2);}
#comSrh .comDiv .comTab > li{flex:1;}
#comSrh .comDiv .comTab a{display:inline-flex; align-items:center; justify-content:center; padding:24px 16px; width:100%; font-size: 2.1rem; font-family: var(--style-font); font-weight: 600; color:#444; text-align:center; border-radius:16px 32px; text-decoration: none;}
#comSrh .comDiv .comTab a br{display:none;}
#comSrh .comDiv .comTab a .num{color:var(--color-point);}
#comSrh .comDiv .comTab a.on{background:var(--color-sub2); color:#fff;}
#comSrh .comDiv .comTab a.on .num{color:#fff;}

#comSrh .totalList{display:flex; flex-direction:column; gap:56px;}
#comSrh .totalList > li{display:flex; flex-direction:column; gap:16px;}
#comSrh .totalList .title{display:flex; align-items:center; justify-content:space-between; }
#comSrh .totalList .title .h4 .em{font-size: 2.1rem; font-weight:500; color:var(--color-point);}
#comSrh .totalList .title .detail{display:inline-flex; align-items:center; text-decoration:none;}
#comSrh .totalList .title .detail .micon{width:18px; height:18px; font-size: 20px;}
#comSrh .totalList .list{border-radius:16px; box-shadow:0 0 15px rgba(0,0,0,0.1); overflow:hidden; width:100%;}
#comSrh .totalList .list > li{position:relative; width:100%;}
#comSrh .totalList .list > li a{position:relative; display:inline-flex; justify-content:center; flex-direction:column; gap:8px; padding:32px; border-bottom:1px solid #dbdbdb; width:100%; text-decoration: none;}
#comSrh .totalList .list > li:last-child a{border-bottom:0;}
#comSrh .totalList .list > li a .tit{font-size:1.9rem; font-weight:600; width:100%; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;} 
#comSrh .totalList .list > li a .txt {display: -webkit-box; width:100%; overflow:hidden; max-height: 5.1em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all; text-overflow: ellipsis; white-space:normal;}
#comSrh .totalList .list > li a .txt em {font-weight: 600; color: var(--color-point); background:#ffface;}
#comSrh .totalList .list > li a .etc{display:inline-flex; flex-wrap:wrap; gap:0px 16px;}
#comSrh .totalList .list > li a .etc li{position:relative; color:#676767; }
#comSrh .totalList .list > li a .etc li:not(:last-of-type)::before{position:absolute; content:''; right:-9px; top:4px; width:1px; height:15px; background:#dbdbdb;}
#comSrh .totalList .list > li a:hover .tit{color:var(--color-main);}
#comSrh .totalList .list > li .favorite{display:inline-flex; align-items:center; justify-content:center; position:absolute; right:32px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:1px solid #dbdbdb; border-radius:100%; color:#dbdbdb;}
#comSrh .totalList .list > li .favorite:hover{color:#999; border:1px solid #dbdbdb;}
#comSrh .totalList .list > li .favorite.on{border:1px solid var(--color-main); color:var(--color-main);}
#comSrh .totalList .list > li .favorite.on:hover{opacity:.8;}
#comSrh .totalList .list .noList{padding:32px; text-align:center; color:#676767;}

#comSrh .totalList .location {display: flex; gap:2px 8px; flex-wrap:wrap;}
#comSrh .totalList .location .micon {font-size: 1.2rem;}
#comSrh .totalList .location > li {display: flex; align-items: center; position:relative; gap: 8px; color:#676767; font-size: 1.3rem;}
#comSrh .totalList .location > li:first-child {gap: 4px;}
#comSrh .totalList .location > li + li::before {position:relative; content:''; width:6px; height:6px; border-right:1px solid #999; border-bottom:1px solid #999; transform:rotate(315deg);}


@media all and (max-width:1440px){
    #comSrh .head .tit{font-size: 3.2rem;}
    #comSrh .head .total{font-size:2.5rem ;}

    #comSrh .comDiv .comTab a{flex-direction:column; gap:2px; font-size: 1.9rem;}
}
@media all and (max-width:1024px){
    #comSrh .head{padding:80px 30px 100px 30px;}

    #comSrh .totalList{gap:40px;}
    #comSrh .totalList > li{gap:8px;}
    #comSrh .totalList .list > li a{padding:24px 80px 24px 24px;}
    #comSrh .totalList .list > li .favorite{right:24px;}
    #comSrh .totalList .title .h4{font-size: 2.0rem;}
    #comSrh .comDiv .comTab a{padding:16px 8px; font-size: 1.7rem;}
}
@media all and (max-width:768px){
    #comSrh .head{padding:60px 30px 120px 30px;}
    #comSrh .head .tit{font-size: 2.8rem;}
    #comSrh .head .total{font-size:2.1rem ;}
    #comSrh .comDiv{gap:60px; transform:translateY(-75px);}
    #comSrh .comDiv .comTab{flex-wrap:wrap; padding:16px; border-radius:8px 24px;}
    #comSrh .comDiv .comTab > li{flex:none;}
    #comSrh .comDiv .comTab a{flex-direction:column; padding:8px 20px; font-size: 1.5rem; border-radius:8px 24px;}
    #comSrh .head .srhBox label input{font-size: 2.1rem;}
}
@media all and (max-width:480px){
    #comSrh .head{padding:40px 20px 100px 20px; gap:24px;}
    #comSrh .head .tit{font-size: 2.5rem;}
    #comSrh .head .total{font-size:1.7rem ;}
    #comSrh .head .srhBox{padding:4px;}
    #comSrh .head .srhBox label input{font-size: 1.9rem;}

    #comSrh .comDiv{gap:40px;}
    #comSrh .comDiv .comTab{padding:0;}
    #comSrh .comDiv .comTab{border-radius:8px 16px;}
    #comSrh .comDiv .comTab a{flex-direction:row; border-radius:8px 16px; font-weight: 500;}

    #comSrh .totalList{gap:24px;}
    #comSrh .totalList .title .h4,
    #comSrh .totalList .title .h4 .em{font-size:1.7rem;}
    #comSrh .totalList .list{border-radius:8px;}
    #comSrh .totalList > li{gap:0;}
    #comSrh .totalList .list > li a{padding:16px; gap:4px;}
    #comSrh .totalList .list > li a .tit{padding-right:40px; font-size:1.7rem;}
    #comSrh .totalList .list > li a .etc li{font-size: 1.5rem;}
    #comSrh .totalList .list > li .favorite{width:32px; height:32px; right:16px; top:16px; transform:none;}
    #comSrh .totalList .list > li .favorite .micon{font-size:20px;}
    #comSrh .totalList .list .noList{padding:16px;}
}