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

/* ---------- spot ---------- */
#spot { position: relative; height: 450px; display: flex; gap: 5px; align-items: flex-start; justify-content: flex-end; flex-direction: column; animation:bg_mo 2s ease; background-position: center; background-repeat: no-repeat; background-size: cover; }
#spot .spot_box { width: 100%; height: 100%; }
#spot h2 { position: absolute; left: 300px; top: 140px; font-weight: 700; color:#fff; font-size: 3.4375rem; }

.spot { background:url('/project/design/com/spot1.webp?ver=1') no-repeat center / cover; }
.spot1 { background:url('/project/design/com/spot1.webp?ver=1') no-repeat center / cover; }
.spot2 { background:url('/project/design/com/spot2.webp?ver=2') no-repeat center / cover; }
.spot3 { background:url('/project/design/com/spot3.webp?ver=2') no-repeat center / cover; }
.spot4 { background:url('/project/design/com/spot4.webp?ver=2') no-repeat center / cover; }

/* ---------- location ---------- */
.location { position: absolute; left: 300px; top: 240px; }
.location > ul.stle_ul { display: flex; flex-direction: row; gap: 60px; }
.location > ul.stle_ul > li { position: relative; font-size: 1.0714rem; color: #fff; }
.location > ul > li:before { content: ''; width: 1px; height: 10px; position: absolute; top: 50%; left: -30px; transform: translate(0, -50%); background: #ccc; }
.location > ul > li:nth-child(1)::before { display: none; }
.location > ul.stle_ul > li > i.xi-angle-right-min { display: none; }
.location > ul.stle_ul > li > i.ri-home-5-fill { font-size: 20px !important; }

/* ---------- contents ---------- */
#contents { width: 1400px; color:#666; font-size:1em; }
#contents_box { width:1400px; margin:0 auto; padding-bottom: 10em; }
#contents_box:after { clear:both; display:block; content:""; }
#contents .img_ready { text-align: center; }

.stle_ul > li > ul { display:none; z-index:10000; }
h3.stle { font-size:2.25em; letter-spacing:-0.05em; font-weight:700; padding: 100px 0 60px 0; text-align:center;} 

/* ---------- snb ---------- */
#snb { position: relative; display: flex; justify-content: right; }
.snb_group { margin-top: -50px; background-color: #fff; display: flex; justify-content: right; align-items: center; width: 100%; height: 100px; box-sizing: border-box; box-shadow: 0px 0px 45px rgba(0, 0, 0, .1); padding-right: 100px; } 
.snb_group > li { width: auto; height: 100%; position: relative; }
.snb_group > li::after { content: ''; position: absolute; width: 1px; height: 15px; background-color: #ddd; top: 50%; right: 0; transform: translateY(-50%); }
.snb_group > li:last-child::after { content: none;}
.snb_group > li > a { height: 100%; padding: 0 70px; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 800; color: #ccc; box-sizing: border-box; }
.snb_group > li > a:hover, .snb_group > li > a.over { color: #3974bd; font-weight: 800; }
.snb_group > li > ul { display: none; }



@media all and (max-width: 1600px) {
    .snb_group { padding-right: 60px; } 
    .snb_group > li > a { padding: 0 55px; font-size: 1rem; }
}
@media all and (max-width: 1440px) {
    #spot h2 { left: 180px; top: 140px; }
    .location { left: 180px; top: 240px; }

    #contents_box {width:95%;}
    #contents {width:100%;}
    #contents img { max-width:100%;}
}
@media all and (max-width: 1260px) {
    .snb_group { height: 70px; padding-right: 25px; margin-top: -30px; }
    .snb_group > li > a { padding: 0 25px; }
}
@media all and (max-width: 1024px) {
    #spot, #spot:after { height: 350px; }
    #spot h2 { left: 120px; top: 100px; font-size: 2.6rem; }
    .location { left: 120px; top: 180px; }
    .location > ul.stle_ul > li { font-size: 1rem; }

    h3.stle { font-size: 1.8em; padding: 60px 0 30px 0; } 
    #contents { float:none; width: 90%; margin:0 auto; }
    #contents_box { width:100%; padding-bottom: 5em; }
}
@media all and (max-width: 800px) {
    #snb { display:none; }
    #spot, #spot:after { height: 180px; }
    #spot h2 { left: 50%; top: 60px; transform: translate(-50%, 0); font-size: 1.65rem; letter-spacing: -0.5px; }

    .location { width: max-content; left: 50%; top: 110px; transform: translate(-50%, 0); }
    .location > ul.stle_ul { gap: 30px; }
    .location > ul.stle_ul > li { font-size: 0.85rem; }
    .location > ul > li:before { height: 8px; left: -18px; }

    #container { min-height:500px; }
    h3.stle { font-size: 1.5em; padding: 50px 0 30px 0; } 
}