#container { min-height:1200px;}
#spot { height:450px; position:relative; margin-top:90px;}
#spot h2 { color:#fff; font-size:44px; font-weight:500; text-align:center; padding-top:160px; font-family:'Noto Sans KR', sans-serif;}
#spot p { color:#fff; font-size:18px; text-align:center; margin-top:10px; font-family:'Noto Sans KR', sans-serif; font-weight:300;}
.spot1 { background:url(https://www.masanmarathon.or.kr/marathon33/project/design/com/spot1.jpg) no-repeat center top;}
.spot2 { background:url(https://www.masanmarathon.or.kr/marathon33/project/design/com/spot2.jpg) no-repeat center top;}
.spot3 { background:url(https://www.masanmarathon.or.kr/marathon33/project/design/com/spot3.jpg) no-repeat center top;}
.spot4 { background:url(https://www.masanmarathon.or.kr/marathon33/project/design/com/spot4.jpg) no-repeat center top;}
.spot5 { background:url(https://www.masanmarathon.or.kr/marathon33/project/design/com/spot5.jpg) no-repeat center top;}

#snb { background:#0073cf;}
#snb .newwin img { vertical-align:top; margin-top:5px;}
.snb_group { width:100%; display:table;}
.snb_group > li { display:table-cell;}
.snb_group > li > a { display:block; color:#fff; font-size:16px; font-weight:400; padding-top:17px; height:35px; text-align:center; background:url(./project/design/com/bg_snb_div.png) no-repeat left center;}
.snb_group > li:first-of-type > a {background:none;}
.snb_group > li > a:hover, .snb_group > li > a.over { background:#fff; color:#0073cf;}
.snb_group > li > ul { padding:5px 0; border-bottom:1px solid #e3e3e3;}
.snb_group > li > ul > li > a { display:block; color:#676767; padding:5px 30px 6px 30px; font-size:14px; font-weight:300;}
.snb_group > li > ul > li > a:before { content:"- ";}
.snb_group > li > ul > li > a:hover, .snb_group > li > ul > li > a.over { color:#ea5406; text-decoration:underline;}
#sub_navi1 > li { width:20%; float:left;}
#sub_navi2 > li { width:25%; float:left;}
#sub_navi3 > li { width:20%; float:left;}

.stle { position:relative; padding:40px 0 25px 0; border-bottom:1px solid #000;}
.stle h3 { font-size:30px; color:#111; text-align:center;}
.stle ul { position:absolute; top:60px; right:0; }
.stle li { float:left; color:#666; font-weight:300; font-size:14px;}

.quick_menu {position:fixed; right:0; bottom:145px; width:140px; z-index:5000 !important; text-align:center;}
.quick_menu ul li.tit {background:#000; color:#fff; line-height:38px;}
.quick_menu ul li.part_btn {background:#f50202;}
.quick_menu ul li.part_btn a {padding:15px 0; width:140px; display:inline-block; color:#fff; font-size:18px; font-weight:600;}
.quick_menu ul li.part_btn1 {background:#025bf5;}/*20200103 생성 사이드퀵메뉴 버튼*/
.quick_menu ul li.part_btn1 a {padding:15px 0; width:140px; display:inline-block; color:#fff; font-size:18px; font-weight:600;}/*20200103 생성 사이드퀵메뉴 버튼*/
.quick_menu ul li.part_btn2 {background:#000000;}/*20200103 생성 사이드퀵메뉴 버튼*/
.quick_menu ul li.part_btn2 a {padding:15px 0; width:140px; display:inline-block; color:#fff; font-size:18px; font-weight:600;}/*20200103 생성 사이드퀵메뉴 버튼*/
.quick_menu ul li.part_btn3 {background:#fff;}/*20200103 생성 사이드퀵메뉴 버튼*/
.quick_menu ul li.part_btn3 a {padding:15px 0; width:140px; display:inline-block; color:#000000; font-size:18px; font-weight:600;}/*20200103 생성 사이드퀵메뉴 버튼*/
.quick_menu ul li.go_btn {background:#f7f6f5; border:1px solid #e5e5e5;}
.quick_menu ul li.go_btn .quick_go {border-bottom:1px solid #e5e5e5; }
.quick_menu ul li.go_btn .quick_go:last-of-type {border-bottom:none;}
.quick_menu ul li.go_btn .quick_go a {height:59px; width:140px; display:inline-block; padding-top:19px; box-sizing:border-box;}
.quick_menu ul li.go_btn .quick_go:nth-of-type(2) a { padding-top:12px;}

#contents_box { width:1100px; margin:0 auto;}
#contents { padding:50px 0; color:#666;}

/* 태블릿 가로 */
@media all and (max-width:1260px) {
#container .wrap_box { width:95%;}
#spot { height:360px; margin-top:90px;}
#spot h2 {font-size:30px; padding-top:140px;}
#spot p {font-size:16px; margin-top:10px;}
.spot1 { background-position:center center; background-size:cover;}
.spot2 { background-position:center center; background-size:cover;}
.spot3 { background-position:center center; background-size:cover;}
.stle {padding:30px 0 25px 0;}
.stle h3 {font-size:26px;}
.stle ul {top:50px;}
#contents img { max-width:100%;}
}

/* 태블릿 세로 */
@media all and (max-width:1000px) {
#container { min-height:750px !important; }
#spot { margin-top:70px; height:200px;}
#spot h2 {padding-top:60px;}

.stle {width:100%; padding:20px 0; margin:0 auto;}
.stle h3 { font-size:20px; text-align:center; padding-bottom:5px;}
.stle ul {  position:relative; top:auto; right:auto; display:table; margin:0 auto;}
.stle ul li { float:none; display:table-cell; color:#7e7e7e;}

.quick_menu {display:none;}

#contents { float:none; width:100%; padding:40px 0; margin:0 auto;}
}

/* 모바일 가로 */
@media all and (max-width:767px) {
#container { min-height:550px; }
#spot { height:80px;}
#spot h2 { font-size:22px; padding-top:24px;}
#spot p {display:none;}
.snb_group > li > a { font-size:14px; padding-top:13px; height:32px;}
.spot1 {background-size:cover;}
.spot2 {background-size:cover;}
.spot3 {background-size:cover;}

#contents {width:95%; padding:30px 0;}
}

/* 모바일 세로 */
@media all and (max-width:414px) {
#snb { display:none;}
}

/*개인정보보호 레이어팝*/
.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer .pop-layer {display:block;}

.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 550px; height:450px;  background-color:#fff; border: 5px solid #3571B5; z-index:999;}	
.pop-layer .pop-container {padding: 20px 25px;}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; text-align:center;}
.pop-layer .btn_m { display:inline-block; line-height:28px; padding:0 10px; border:1px solid; border-color:#d6d8dc #888c93 #888c93 #d6d8dc; background:#fff; color:#333 !important; font-weight:bold; }
.pop-layer .btn_m:hover { text-decoration:none !important; }

/*이용약관 레이어팝*/
.layer2 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;}
.layer2 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer2 .pop-layer {display:block;}

.pop-layer2 {display:none; position: absolute; top: 50%; left: 50%; width: 550px; height:450px;  background-color:#fff; border: 5px solid #3571B5; z-index:999;}	
.pop-layer2 .pop-container {padding: 20px 25px;}
.pop-layer2 p.ctxt {color: #666; line-height: 25px;}
.pop-layer2 .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; text-align:center;}
.pop-layer2 .btn_m { display:inline-block; line-height:28px; padding:0 10px; border:1px solid; border-color:#d6d8dc #888c93 #888c93 #d6d8dc; background:#fff; color:#333 !important; font-weight:bold; }
.pop-layer2 .btn_m:hover { text-decoration:none !important; }

/*이메일 거부 레이어팝*/
.layer3 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;}
.layer3 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}
.layer3 .pop-layer3 {display:block;}

.pop-layer3 {display:none; position: absolute; top: 50%; left: 50%; width: 450px; height:300px;  background-color:#fff; border: 5px solid #3571B5; z-index:999;}	
.pop-layer3 .pop-container {padding: 20px 25px;}
.pop-layer3 p.ctxt {color: #666; line-height: 25px;}
.pop-layer3 .btn-r {width: 100%; margin:10px 0 20px; padding-top: 10px; text-align:center;}
.pop-layer3 .btn_m { display:inline-block; line-height:28px; padding:0 10px; border:1px solid; border-color:#d6d8dc #888c93 #888c93 #d6d8dc; background:#fff; color:#333 !important; font-weight:bold; }
.pop-layer3 .btn_m:hover { text-decoration:none !important; }