.modular1 { padding: 0; padding: 20% 0; position: relative; } #map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .info { position: absolute; z-index: 2; top: 50%; left: 0; width: 100%; transform: translateY(-50%); } .info .text_box { display: inline-block; padding: 4% 3%; padding-right: 5%; background: url(../images/join/contact/01.jpg) no-repeat center center; background-size: cover; } .info .title { line-height: 1.2; margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #cacaca; position: relative; } .info .title::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 5.5em; border-bottom: 4px solid #b8120d; } .info li i { position: absolute; left: 0; color: #b3b2b2; } .info li { position: relative; padding-left: 2em; margin-bottom: 1em; } @media screen and (max-width: 1024px) { .modular1 { padding: 0; } #map, .info { position: static; transform: none; width: auto; } .info { background: url(../images/join/contact/01.jpg) no-repeat center center; background-size: cover; } .info .text_box { display: block; background: none; padding: 10% 5%; } #map { height: 320px; } }