/**
* 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.
*/
@keyframes animation {
  0% {
    background-position-y:0
  }
  100% {
    background-position-y:95%
  }
}


#spot { overflow: hidden;height: 330px;margin-left: 17.5%;}

#text {position: absolute; left: 2%; top: 110px;}
#text ul li {color: #b2b2b2;font-family: 'Black Ops One',cursive;font-size: 80px;line-height: 1.1em}

.spot  { background:url("/project/design/com/sub_img1.jpg") no-repeat center;background-size: cover;animation: animation 3s ease-in;background-position-y:95%;}
.spot1 { background:url("/project/design/com/sub_img1.jpg") no-repeat center;background-size: cover;animation: animation 3s ease-in;background-position-y:95%;}
.spot2 {background:url("/project/design/com/sub_img2.jpg") no-repeat center;background-size: cover; animation: animation 3s ease-in;background-position-y:95%;}
.spot3 {background:url("/project/design/com/sub_img3.jpg") no-repeat center;background-size: cover; animation: animation 3s ease-out;background-position-y:95%;}
.spot4 {background:url("/project/design/com/sub_img4.jpg") no-repeat center;background-size: cover; animation: animation 3s ease-out;background-position-y:95%;}
.spot5 {background:url("/project/design/com/sub_img1.jpg") no-repeat center;background-size: cover; animation: animation 3s ease-out;background-position-y:95%;}


#contents_box:after { clear:both; display:block; content:"";}
/*#subbox:after { clear:both; display:block; content:"";}*/

.location { position:absolute; height:70px; background:#00a53c; margin-top:-40px;right: 0;padding: 0 25px;z-index: 99}
.location > ul:after { clear:both; display:block; content:"";}
.location > ul > li { position:relative; float:left; }
.location > ul > li > a {line-height:70px; display:block; color:#fff;  padding:0 27px;font-weight: 700;font-size: 17px}
.location > ul > li > a::after{display: block;content: "";width: 3px;height: 18px;bottom: 0;left: 50%; transform:translate(-50%, 0);background: #fff;position: absolute;transition:all .5s ease;opacity: 0}
.location > ul > li > a.over:after{opacity: 1}
.location > ul > li:hover > a::after{opacity: 1}
.location > ul > li > ul { display:none;}
/*.location > ul > li.home > a { background:url(/project/design/com/bg_home.png) no-repeat center;  min-width:50px; padding:0; text-indent:-9999px;}
.location > ul > li.stle_over > a { font-weight:600; }
.location > ul > li > ul { position:absolute; top:50px; left:0; background:#fff;}
.location > ul > li > ul > li > a {  display:block; color:#666; line-height:1.2em; font-size:0.95em; border:1px solid #ddd; border-top:none;}
.location > ul > li > ul > li > a:hover { background:#f8f8f8;}
.stle_ul > li > ul { z-index:10000; }*/

.stle_box { position: relative;  padding:60px 0 0 10%;color: #00a53c; line-height:1em; letter-spacing:-0.01em; }
.stle_box .stle { font-size:40px; font-family:"S-CoreDream-7ExtraBold"; display:inline-block; vertical-align:top;}
.stle_box  span{font-size: 16px; font-family:"S-CoreDream-5Medium"; border-bottom: 4px solid #00a53c;padding:20px 10px 10px 45px;display: inline-block; vertical-align:top;}

/*
#snb { float:left; width:270px;}
.snb_group > li > ul { border-bottom:1px solid #e1e1e1; padding:10px 0;}
.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;}*/

#contents {padding:60px 0; color:#666; font-size:1em; max-width:1200px; margin:0 auto;}

@media all and (max-width:1440px) {
.location > ul > li > a {padding: 0 15px; font-size:16px;}
#text ul li {font-size: 70px;}
.stle_box { padding:30px 0 0 12%;}
.stle_box .stle { font-size:30px;}
.stle_box  span{padding:10px 10px 10px 35px;}

#contents {width:90%; margin:0 auto;}
#contents img { max-width:100%;}
}
@media all and (max-width:1100px) {
#spot {height: 250px;}
.location{ height:50px; padding: 0 10px}
.location > ul > li > a {line-height:50px; font-size: 14px;}
.location > ul > li > a::after{height: 12px;}
.location > ul > li > a.over:after{height: 12px;}
#text {left: 0; top:95px;}
#text ul li {font-size:55px;}
.stle_box { padding:36px 0 0 10%;}
.stle_box .stle { font-size:26px;}
.stle_box  span{font-size:14px; padding:7px 10px 7px 35px;}

#contents {padding:40px 0;}
}
/* 모바일 가로 */
@media all and (max-width:820px) {
  #spot{width: 100%;margin-left:0;height: 180px;}
.location > ul > li > a {padding: 0 10px; }
  #text{display: none}
.stle_box { padding:40px 0 0 0; text-align:center;}
.stle_box .stle { font-size:24px;}
.stle_box  span{ position:relative; display:block; border:none; font-size:13px; padding:7px 10px;}
}
/* 모바일 세로 */
@media all and (max-width:440px) {
.location{ position:relative; padding: 0; width:100%;margin-top:0; height:40px;}
.location > ul { margin:0 auto; display:table;}
.location > ul > li { display:table-cell;}
.location > ul > li > a {line-height:40px; font-size: 13px; letter-spacing:-0.05em; padding: 0 7px; }
.location > ul > li > a::after{width:2px; height: 8px;}
.location > ul > li > a.over:after{width:2px; height: 8px;}
.stle_box { padding:20px 0 0 0; text-align:center;}
  #contents {padding:20px 0;}
}