section.banner { position: relative; padding: 0; }
.banner .container { padding: 0 10%; height: 600px; z-index: 3; display: flex; align-items: center; justify-content: center; color: white; }
.banner > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; z-index: 1; }
.banner:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); z-index: 2; }
.banner .info-wrapper { position: absolute; bottom: -60px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.banner .info-wrapper > div { flex: 1; background: white; height: 120px; color: black; border: 1px solid #ccc; border-radius: 16px; font-weight: 600; }
.banner .info-wrapper > div > div { gap: 20px; max-width: 70%; text-align: left; }
.banner .contents { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; }

.description .contents { text-align: left; }
.description .contents:nth-child(1) { padding-right: 100px; }
.description .contents:nth-child(2) { padding-left: 100px; }
.description img { margin: 50px 0; width: 620px; height: 620px; background: rgba(0,0,0,0.1); object-fit: cover; object-position: center center; border-radius: 20px; }

@media (max-width: 1440px) { 
.banner .container { height: 500px; }
.banner .info-wrapper { width: calc(100% - 120px); left: 60px; bottom: -55px; }
.banner .info-wrapper > div { height: 110px; }
.description img { margin: 40px 0; width: 540px; height: 540px; }
}

@media (max-width: 1280px) { 
.banner .container { height: 400px; }
.description img { margin: 60px 0; width: 440px; height: 440px; }
.banner .info-wrapper { width: calc(100% - 80px); left: 40px; }
.banner .info-wrapper > div > div { max-width: 80%; }
}

@media (max-width: 1024px) { 
section.banner { padding: 40px 0; }
.banner .info-wrapper { flex-wrap: wrap; justify-content: center; position: relative; bottom: initial; padding-top: 40px; }
.banner .info-wrapper > div { min-width: 260px; max-width: 360px; flex: 1; height: 80px; }
.banner .container { height: initial; display: block; }
.banner .info-wrapper > div { justify-content: flex-start; padding-left: 20px; }
.banner .info-wrapper > div > div { max-width: 90%; }
.description .contents { text-align: center; }
.description .contents:nth-child(1) { padding-right: 0px; }
.description .contents:nth-child(2) { padding-left: 0px; }
.description .wrapper { flex-direction: column; gap: 20px; }
.description img { margin: auto; width: 100%; height: initial; }
.description .contents:nth-child(2) { order: 1; }
.description img:nth-child(1) { order: 2; }
}