/**
* OLYM Cascading Style Sheets
* File Name : sub.css
* Description : 서브 스타일시트
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2016.08.09
* Update : 2016.08.09
* Copyright(c) 2015 OLYM Communications. All Rights Reserved.
*/
#header { background: #fff; min-height: 120px;}
#container { margin-top: 120px;}
#spot { margin-left: 130px; height:360px; display: flex; align-items: center; border-left: 5px solid #bb9558; animation:bg_mo 2s ease;}
#spot h2 { font-weight: 700; color:#fff; font-size:48px; text-align: center; margin-bottom: 10px;}
.spot  { background:url(/project/design/com/bg_spot1.jpg) no-repeat center / 100%  100%; }
.spot1 { background:url(/project/design/com/bg_spot1.jpg) no-repeat center / 100%  100%; }
.spot2 { background:url(/project/design/com/bg_spot2.jpg) no-repeat center / 100%  100%; }
.spot3 { background:url(/project/design/com/bg_spot3.jpg) no-repeat center / 100%  100%; }
.spot4 { background:url(/project/design/com/bg_spot4.jpg) no-repeat center / 100%  100%; }
.spot5 { background:url(/project/design/com/bg_spot5.jpg) no-repeat center / 100%  100%; }
.spot6 { background:url(/project/design/com/bg_spot6.jpg) no-repeat center / 100%  100%; }
.spot7 { background:url(/project/design/com/bg_spot1.jpg) no-repeat center / 100%  100%; }

@keyframes bg_mo {
    from { background-size: 110% 110%;}
    to { background-size: 100% 100%;}
}

.location > ul { display: flex; justify-content: center; align-items: center; gap: 10px; padding-left: 5px;}
.location > ul > li { position: relative; color: rgba(255, 255, 255, 0.7); padding-left: 22px;}
.location > ul > li:before { content: '\e93f'; position: absolute; font-family: xeicon; top: 0; left: 0; width: 15px;}
.location > ul > li:first-child { color: #fff; padding-left: 0;}
.location > ul > li:first-child::before { display: none;}

#contents_box { width:1400px; margin:0 auto; }
#contents_box:after { clear:both; display:block; content:"";}

.snb_box { display: flex; justify-content:flex-end;}
.snb_group { margin-top: -40px; background-color: #0f1935; display: flex; padding-left:100px; width: 80%;} 
/* .snb_group > li { width: 100%;} */
.snb_group > li > a { display:flex; position: relative; align-items: center; text-align: center; color:#fff; height: 80px; font-size:19px; font-weight: 700; padding: 0 42px;}
/* .snb_group > li > a:hover, .snb_group > li > a.over { color: #bb9558;} */
.snb_group > li > a:after { position: absolute; left: 0; bottom: 0; display:block; content:""; width: 100%; height:4px; background:#bb9558; transform:scale(0, 1); transition:all .3s ease;}
.snb_group > li > a:hover::after, .snb_group > li > a.over:after {transform:scale(1, 1);}


.snb_group > li > ul { display: none;}
/* .snb_group > li > ul > li > a { display:block; padding:5px 20px 5px 33px; color:#666; background:url(/project/design/com/bg_snb_2d.gif) no-repeat 24px 17px; }
.snb_group > li > ul > li > a:hover, .snb_group > li > ul > li > a.over { color:#dd2424;} */


h3.stle { font-size:2.5rem; font-weight:700; padding-top:80px; text-align: center; }
.p_stle { text-align: center; margin-top: 10px; font-size: 1.125em; }

#contents { padding:80px 0; color:#666; font-size:1em; }
.img_ready { text-align: center;}

/* top 버튼 */
#back-top { z-index:1000; position:fixed; bottom:20px; right:20px;}
#back-top a { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; font-weight: 600; width:50px; height:80px; background-color: rgb(18, 25, 52, 0.95); transition: all 0.7s ease;}
#back-top a i { font-size: 20px; margin-bottom: 5px;}


@media all and (max-width:1680px) {
    #spot { margin-left: 5%; height:300px;}
    #spot h2 { font-size:36px;}
    #contents_box { width:90%;}
}

@media all and (max-width:1460px) {
    #header { min-height: 80px;}
    #container { margin-top: 80px;}
    .snb_group > li > a { padding: 0 40px;}
    .location > ul > li {  font-size: 15px;}
}

@media all and (max-width:1400px) {
    #contents img { max-width:100%;}
}

@media all and (max-width:1260px) {
    #spot { height:200px;}
    #spot h2 { font-size:28px; margin-bottom: 3px;}
    .snb_group { margin-top: -30px; padding-left:40px; width: 85%;} 
    .snb_group > li > a { height: 60px; padding: 0 30px; font-size: 16px;}
    #contents_box { width:100%; }
    #contents { float:none; width:90%; margin:0 auto; padding:30px 0; }
}

@media all and (max-width:1024px) {
    h3.stle {font-size:2.1rem;}
}

@media all and (max-width:800px) {
    #spot { height:150px;border-left: none;}
    .snb_group { margin-top: -25px; padding-left:10px; width: 90%;} 
    .snb_group > li > a { height: 50px; padding: 0 20px; font-size: 14px;}

    .location > ul { gap: 4px; padding-left: 2px;}
    .location > ul > li { font-size: 13px; padding-left: 14px;}
    .location > ul > li:before { top: 2px;}

    #spot h2 {font-size:1.625rem;}
    h3.stle {font-size:1.5rem;padding:30px 20px 0 20px;}
    .p_stle { font-size: 1em; }
}

@media all and (max-width:440px) {
    #spot h2 { font-size:22px; margin-bottom: 0;}
    .snb_group { margin-top: -20px; justify-content: space-around; width: auto;} 
    .snb_group > li > a { height:40px; padding: 0 7px; font-size: 12px; line-height: 1.1em; font-weight: 400;}
}