/**
* 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.
*/
#spot { width:100%; height:140px;position:relative;z-index:10;}
.spot_box {display:flex;align-items:center;justify-content:space-between;height:100%;}
#spot h2 { color:#fff; font-size:40px; text-align:right; font-weight:700;z-index:1000;order:2;}
.spot  { background:rgba(60,179,202,1); }
.spot1 { background:rgba(60,179,202,1); }
.spot2 { background:rgba(60,179,202,1); }
.spot3 { background:rgba(60,179,202,1); }
.spot4 { background:rgba(60,179,202,1); }
.spot5 { background:rgba(60,179,202,1); }
.spot6 { background:rgba(60,179,202,1); }
.spot7 { background:rgba(60,179,202,1); }
#spot:after {position:absolute;content:"";display:inline-block;background:url("/project/design/com/bg_spot.jpg") no-repeat center;width:830px;height:140px;left:40%;top:0;z-index:-1;}

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

.location { position:relative; height:50px;order:1;}
.location > ul:after { clear:both; display:block; content:"";}
.location > ul > li { position:relative; float:left; }
.location > ul > li > a { border-right:1px solid rgba(255,255,255,0.3); line-height:50px; display:block; color:#fff; min-width:150px; padding:0 30px 0 20px; background:url(/project/design/com/bg_stle_arrow.png) no-repeat 90% center;}
.location > ul > li.home {text-align:center;}
.location > ul > li.home > a { min-width:50px; padding:0;background:none;border-left:1px solid rgba(255,255,255,0.3);}
.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 { min-width:150px; display:block; color:#666; padding:8px 30px 8px 20px; 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 { display:none; z-index:10000; }
h3.stle { font-size:2.25em; letter-spacing:-0.05em; font-weight:700; padding-top:40px;text-align:center;}

#snb { float:left; width:270px;}
.snb_group { width:220px; margin-top:50px; border-top:2px solid #333;display: none}
.snb_group > li > a { display:block; color:#444; padding:10px 24px; border-bottom:1px solid #e1e1e1; }
.snb_group > li > a:hover, .snb_group > li > a.over { background:#f3f3f3;}
.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 { float:left; width:1400px; padding:40px 0; color:#666; font-size:1em; }





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




@media all and (max-width:1024px) {
#spot, #spot:after { height:130px;}
#snb { display:none;}
#contents_box { width:100%; }
h3.stle {width:90%; margin:10px auto 0 auto;font-size:1.8em; line-height:60px;font-weight:400;padding-top:0;}
#contents { float:none; width:90%; margin:0 auto; padding:20px 0; }
#spot h2 {font-size:30px;}
}





@media all and (max-width:767px) {
#spot, #spot:after { height:100px;}
#container { min-height:500px; }
#spot h2 {font-size:24px;order:1;}
h3.stle {font-size:1.5em;}
.spot_box {flex-direction:column;justify-content:center;align-items:flex-start;padding:0 5%;}
.location { height:auto; padding:3px;order:2;}
.location:after { clear:both; display:block; content:"";}
.location > ul > li { padding:5px 0;}
.location > ul > li > a { line-height:20px;  min-width:10px; padding:0 30px 0 15px; font-size:13px;}
.location > ul > li > ul { position:absolute; top:30px; left:0; background:#fff;}
.location > ul > li > ul > li > a { min-width:100px; }
}