/**
* OLYM Cascading Style Sheets
* File Name : sub.css
* Description : 서브 스타일시트
* Author : Web business Team / Kim min yi
* Email : odesign@olym.co.kr
* Date : 2024.11.15
* Update : 2024.11.15
* Copyright(c) 2024 OLYM Communications. All Rights Reserved.
*/


#container { width: 100%; min-height: 1000px;}
#spot { margin: 0 40px; padding-left: 10%; height: 380px; position: relative; border-radius: 30px; display: flex; flex-direction: column; justify-content: center; gap: 5px; animation: bg-animation 3s ease-in-out; }
#spot .wrap_box1 { display: flex; flex-direction: column; justify-content: space-between; gap: 5px;}
#spot h2 { color:#fff; font-size: 55px; font-weight: 800; }

@keyframes bg-animation { from { background-size: 110% auto; } to { background-size: 100% auto;} }

@media all and (max-width: 1900px) {
    @keyframes bg-animation { from { background-size: auto 110%; } to { background-size: auto 100%;} }
}

.spot1 { background:url('/project/design/common/spot1.jpg') no-repeat center top; background-size:cover;}
.spot2 { background:url('/project/design/common/spot2.jpg') no-repeat center top; background-size:cover;}
.spot3 { background:url('/project/design/common/spot3.jpg') no-repeat center top; background-size:cover;}
.spot4 { background:url('/project/design/common/spot4.jpg') no-repeat center top; background-size:cover;}
.spot5 { background:url('/project/design/common/spot5.jpg') no-repeat center top; background-size:cover;}

.location > ul { display: flex; align-items: center; gap: 30px; }
.location > ul > li { position: relative; color: rgba(255, 255, 255, .6); font-size: 19px; font-family: 'Montserrat'; font-weight: 300; letter-spacing: 0.5px; }
.location > ul > li::after { position: absolute; top: 50%; right: -15px; display: block; content: ""; width: 3px; height: 3px; background-color: rgba(255, 255, 255, .8); transform: translate(0, -50%); }
.location > ul > li:last-child:after { display: none; }
.location > ul > li:first-child { background: url('/project/design/common/icon_home.svg') no-repeat center center; filter: brightness(0) invert(1); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; opacity: .65; }
.location > ul > li:first-child::before { display: none; }

h3.page-title { display: flex; justify-content: center; align-items: center; padding: 90px 0 80px 0; font-size: 40px; font-weight: 800; color: #111; }

@media all and (max-width: 1024px) {
    #spot { height: 280px; }
    #spot h2 { font-size: 35px; }
    .location > ul > li { font-size: 15px; }
    h3.page-title { padding: 40px 0 30px 0; font-size: 35px; }
}
@media all and (max-width: 800px) {
    #contents { float:none; width:100%; padding:0 0 30px 0;}
    #container { min-height:550px; }

    #spot { height: 180px; margin: 0 20px; border-radius: 20px; padding-left: 0;}
    #spot .wrap_box1 { display: flex; align-items: center; gap: 0; }
    #spot h2 { font-size: 25px; }
    .location > ul { gap: 20px; }
    .location > ul > li { font-size: 13px; }
    .location > ul > li::after { right: -10px; }
    .location > ul > li:first-child { width: 15px; height: 15px;}

    .spot1 { background-position: 35%; }
    .spot2 { background-position: 60%; }
    .spot3 { background-position: 70%; }
    .spot4 { background-position: 60%; }

    h3.page-title { padding: 30px 0 20px 0; font-size: 25px; }
}