* {box-sizing:border-box; margin:0; padding:0;}
html,body {width:100%; min-height:100%;}
body {background:#eceae5; color:#111; font-family:Arial,Helvetica,sans-serif; overflow-x:hidden;}
img {max-width:100%; height:auto; display:block;}
button,input,textarea,select {font:inherit;}

.city-layout {display:flex; width:100%; min-height:100vh;}
.city-left {position:relative; width:51%; min-height:100vh; background:url('images/bg/bg.jpg') center center/cover no-repeat; overflow:hidden;}
.city-left-overlay {position:absolute; inset:0; background:linear-gradient(180deg,rgba(65,94,125,0.44) 0%,rgba(45,71,99,0.40) 50%,rgba(16,27,39,0.48) 100%);}
.city-left-content {position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:70px 70px 60px 70px;}
.city-brand {width:100%; max-width:430px; margin-bottom:42px;}
.city-logo {width:100%; max-width:430px; margin:0 auto; filter:drop-shadow(0 8px 24px rgba(0,0,0,0.12));}
.city-intro {max-width:760px; color:#f4f6f8; font-size:20px; line-height:1.45; letter-spacing:2px; font-weight:500; text-shadow:0 2px 14px rgba(0,0,0,0.30);}
.city-intro p {margin:0;}
.city-intro ul {list-style:none; margin:0; padding:0;}
.city-intro li {margin:0;}

.city-right {width:49%; min-height:100vh; background:#eceae5; border-left:1px solid rgba(0,0,0,0.20);}
.city-right-inner {width:100%; max-width:920px; min-height:100vh; margin:0 auto; padding:80px 56px 40px 56px; display:flex; flex-direction:column; justify-content:center;}
.city-right-topline {width:100%; height:1px; background:rgba(0,0,0,0.14); margin-bottom:66px;}
.city-list {width:100%;}
.city-form {display:block; width:100%;}
.city-item {width:100%; display:grid; grid-template-columns:52px 1fr 40px; gap:24px; align-items:center; text-align:left; border:0; border-top:1px solid rgba(0,0,0,0.12); background:transparent; padding:26px 0 24px 0; cursor:pointer; transition:all 0.24s ease;}
.city-form:last-child .city-item {border-bottom:1px solid rgba(0,0,0,0.12);}
.city-item:hover {background:rgba(255,255,255,0.34); padding-left:14px; padding-right:10px;}
.city-no {font-size:14px; color:#8a8a85; letter-spacing:2px; font-weight:500;}
.city-info {display:block;}
.city-title {display:block; font-size:34px; line-height:1.05; font-weight:700; color:#111; margin-bottom:10px; transition:color 0.22s ease;}
.city-services {display:flex; flex-direction:column; gap:2px;}
.city-service {display:block; position:relative; padding-left:17px; font-size:13px; line-height:1.28; letter-spacing:2px; text-transform:uppercase; color:#77756f; font-weight:700;}
.city-service::before {content:"✓"; position:absolute; left:0; top:0; color:#1d9a35; font-size:13px; font-weight:700;}
.city-arrow {display:flex; align-items:center; justify-content:flex-end; font-size:28px; color:#1a1a1a; transition:transform 0.22s ease,color 0.22s ease;}
.city-item:hover .city-title {color:#143f69;}
.city-item:hover .city-arrow {transform:translateX(7px); color:#143f69;}

@media (max-width:1200px) {
.city-left-content {padding:54px 40px 50px 40px;}
.city-right-inner {padding:56px 34px 36px 34px;}
.city-title {font-size:30px;}
.city-intro {font-size:18px;}
}

@media (max-width:900px) {
.city-layout {flex-direction:column;}
.city-left {width:100%; min-height:54vh;}
.city-right {width:100%; min-height:auto; border-left:0;}
.city-left-content {min-height:54vh; padding:40px 24px 36px 24px;}
.city-brand {max-width:320px; margin-bottom:26px;}
.city-intro {font-size:16px; line-height:1.4; letter-spacing:1.4px;}
.city-right-inner {min-height:auto; padding:30px 20px 36px 20px;}
.city-right-topline {margin-bottom:24px;}
.city-item {grid-template-columns:40px 1fr 28px; gap:16px; padding:22px 0 20px 0;}
.city-title {font-size:26px;}
.city-service {font-size:12px; letter-spacing:1.5px;}
}

@media (max-width:560px) {
.city-left {min-height:46vh;}
.city-left-content {padding:30px 16px 28px 16px;}
.city-right-inner {padding:22px 14px 28px 14px;}
.city-title {font-size:22px;}
.city-no {font-size:12px;}
.city-arrow {font-size:22px;}
.city-intro {font-size:14px; letter-spacing:1px;}
}