@charset "utf-8";

main { width: 100%; height: 45vh; }
main .main-slide { background: url('../img/main/image8.jpg') no-repeat center/cover; }

.travels .titles { text-align: center; margin: 40px 0 80px; }
.travels .titles p { margin-bottom: 10px; }
.travels ul { width: 1600px; margin: 0 auto; }
.travels ul li { display: flex; align-items: center; }
.travels ul> :not(:last-child) { margin-bottom: 60px; }
.travels ul li> div { width: 50%; }
.travels ul li .imgbox { height: 550px; border-top-left-radius: 100px; border-bottom-left-radius: 100px; }
.travels ul li .img1 { background: url('../img/sub5/image1.jpg') no-repeat center/cover; }
.travels ul li .img2 { background: url('../img/sub5/image2.jpg') no-repeat center/cover; }
.travels ul li .img3 { background: url('../img/sub5/image3.jpg') no-repeat center/cover; }
.travels ul li .img4 { background: url('../img/sub5/image4.jpg') no-repeat center/cover; }
.travels ul li .img5 { background: url('../img/sub5/image5.jpg') no-repeat center/cover; }
.travels ul li .img6 { background: url('../img/sub5/image6.jpg') no-repeat center/cover; }
.travels ul li .img7 { background: url('../img/sub5/image7.jpg') no-repeat center/cover; }
.travels ul li .img8 { background: url('../img/sub5/image8.jpg') no-repeat center/cover; }
.travels ul li .img9 { background: url('../img/sub5/image9.jpg') no-repeat center/cover; }
.travels ul li .img10 { background: url('../img/sub5/image10.jpg') no-repeat center/cover; }
.travels ul li .img11 { background: url('../img/sub5/image11.jpg') no-repeat center/cover; }
.travels ul li .img12 { background: url('../img/sub5/image12.jpg') no-repeat center/cover; }

.travels ul li> :last-child { position: relative; display: flex; flex-direction: column; background: #fff; border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding: 80px; height: 550px; }
.travels ul li> :last-child h2 { font-size: 24px; margin-bottom: 10px; line-height: 1.3em; }
.travels ul li> :last-child> :nth-child(2) { margin-bottom: 40px; } 
.travels ul li> :last-child div { position: absolute; bottom: 80px; right: 80px; font-size: 60px; color: #ededed; font-family: 'BookkMyungjo-Lt'; }
.travels ul li> :last-child div::after { position: absolute; top: 50%; left: -20px; transform: translate(-100%, -50%); content: ""; width: 120px; height: 2px; background: #ededed; }

footer .imgbox { background-image: url('../img/sub1/image1.jpg'); }

@media screen and (max-width: 1600px){ 
    .travels ul { width: 100%; padding: 0 40px; }
}

@media screen and (max-width: 1024px){ 
    .travels ul li .imgbox { border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
    .travels ul li> :last-child { border-top-right-radius: 50px; border-bottom-right-radius: 50px; padding: 40px; height: 550px; }
    .travels ul li> :last-child div { bottom: 60px; right: 40px; font-size: 45px; }
    .travels ul li> :last-child div::after { width: 60px; }
}

@media screen and (max-width: 768px){ 
    .travels .titles { margin: 40px 0; }
    .travels .titles p { margin-bottom: 0; }
    .travels ul { padding: 0 20px; }
    .travels ul li { display: block; }
    .travels ul li> div { width: 100%; }
    .travels ul li .imgbox { aspect-ratio: 4/3; height: auto; border-radius: 0; border-top-left-radius: 50px; border-top-right-radius: 50px; }
    .travels ul li> :last-child { border-radius: 0; height: auto; }
    .travels ul li> :last-child div { position: relative; text-align: right; margin-top: 40px; line-height: 1em; width: fit-content; bottom: auto; right: auto; align-self: end; }
}

@media screen and (max-width: 600px) { 
    footer .imgbox div { display: none; }
}

@media screen and (max-width: 540px) { 
    .travels ul li .imgbox { border-top-left-radius: 25px; border-top-right-radius: 25px; }
    .travels ul li> :last-child { padding: 40px 20px; }
    .travels ul li> :last-child div { font-size: 32px; }
    .travels ul li> :last-child div::after { left: -10px; width: 40px; }
    .travels ul li> :last-child h2 { font-size: 20px; margin-bottom: 5px; }
}