/**
* A-Marketing Cascading Style Sheets
* File Name : layout.css
* Description : 메인,서브 공통 스타일시트
* Author : Web business Team / White
* Email : yan@amarketing.co.kr
* Date : 2015.02.16
* Update : 2015.02.16
* Copyright(c) 2015 A-Marketing. All Rights Reserved.
*/

/* Layout Selector */
body { height:100%; overflow-x:hidden;}
#wrap { position:relative; max-width:640px; margin:0 auto;}
#container { z-index:10; width:100%; clear:both;}
#container:after { display:block; clear:both; content:'';}
#content:after { display:block; clear:both; content:'';}
.sitemap { position:absolute; width:50%; height:100%; top:0; left:100%; background:#3f434c url("image/bg_sitemap.jpg") repeat-y left top; z-index:9999; overflow-y:auto; display:none;}

.main_content { padding:0 5% 5% 5%; background:url("image/bg_main.jpg") no-repeat center top; background-size:cover;}
.sub_content { background:url("image/bg_sub.jpg") repeat-x center bottom;}
.sub_content #content { padding:7% 3% 10% 3%;}

/* sitemap */
.sitemap { position:absolute; width:50%; height:100%; top:0; left:100%; background:#3f434c url("image/bg_sitemap.jpg") repeat-y left top; z-index:9999; overflow-y:auto; display:none;}
.sitemap .snb_nav_dep1 { width:100%; text-align:left; letter-spacing:-0.05em; border-bottom:solid 1px #74777e; overflow:hidden;}
.sitemap .snb_nav_dep1 a { display:block; padding:19px 0 20px 20px; font-size:22px; font-weight:bold; color:#fff; background:#52565f url("image/bg_sitemap2.jpg") repeat-y left top;}
.sitemap .snb_dep2 { padding:10px 0; width:100%; text-align:left; display:none; background:#343842 url("image/bg_sitemap3.jpg") repeat-y left top;}
.sitemap .snb_dep2 a { display:block; padding:6px 0 7px 25px; font-size:18px; color:#b9babd; background:none;}
.sitemap .snb_dep2 a:hover,
.sitemap .snb_dep2 .on { border:0; padding:6px 0 7px 25px; font-weight:bold; color:#fff;}
.sitemap .snb_dep3 { padding:5px 0; width:100%; text-align:left;}
.sitemap .snb_dep3 a { display:block; padding:3px 0 4px 25px; font-size:16px; font-weight:normal; color:#9a9b9f;}
.sitemap .snb_dep3 a:hover,
.sitemap .snb_dep3 .on { border:0; padding:3px 0 4px 25px; background:none; font-weight:normal; color:#fff; text-decoration:underline;}

.main_content #content .main_top:after { display:block; clear:both; content:'';}
.main_content #content .main_top ul:first-child { display:block; clear:both; content:'';}
.main_content #content .btn_quick .btn_quick1 { background:url("image/btn_main_quick1.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick2 { background:url("image/btn_main_quick2.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick3 { background:url("image/btn_main_quick3.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick4 { background:url("image/btn_main_quick4.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick5 { background:url("image/btn_main_quick5.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick6 { background:url("image/btn_main_quick6.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick7 { background:url("image/btn_main_quick7.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick8 { background:url("image/btn_main_quick8.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick9 { background:url("image/btn_main_quick9.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick10 { background:url("image/btn_main_quick10.png") no-repeat center 30%;}
.main_content #content .btn_quick .btn_quick11 { background:url("image/btn_main_quick11.png") no-repeat center 30%;}



/* ↓↓↓ media query ↓↓↓ */
@media only screen and (min-width:320px) {
/* header */
#header { height:60px; background:url("image/bg_header.jpg") repeat-x left top; background-size:30px; clear:both;}
#header h1 { width:60px; margin:0 auto;}
.header_home { float:left; width:60px;}
.header_sitemap { float:right; width:60px;}

.search { padding:9px 20px 10px 20px; height:30px; background:#004483;}
.search i { display:block; float:left; padding:4px 5px 0 0; width:15px;}
.search span { display:block; float:left; padding:5px 0; font-size:12px; color:#fff;}
.search strong { font-size:15px; color:#fff;}
.search .btn_logout { display:block; float:right; width:70px; height:22px; padding-top:5px; font-size:13px; font-weight:bold; background:#fff; color:#004483; text-align:center;}

/* stle */
#stle { position:relative; width:auto; padding:15px; border-bottom:2px solid #000;}
#stle h2 { padding-left:15px; color:#000; font-size:15px; font-weight:bold; letter-spacing:-0.075em; background:url('image/ico_sub_title.jpg') no-repeat 0 50%; background-size:10px 10px;}
#stle ul { position:absolute; top:17px; right:10px;}
#stle li { float:left; font-size:12px; color:#5e5e5e;}
#stle li span { padding:0 5px;}
#stle li strong { color:#004483; font-weight:bold;}

.main_content #content .btn_quick { float:left; width:25%; height:100%; background:url("image/bg_main_btn.png") no-repeat center top; background-size:90%; margin-top:20px;}
.main_content #content .btn_quick a { display:block; padding-top:100%; font-size:13px; font-weight:bold; color:#363636; text-align:center; background-size:50% !important;}

.main_content #content .bdr_notice { clear:both; width:100%; margin-top:30px; letter-spacing:-0.05em;}
.main_content #content .bdr_notice thead th { padding:14px 20px; text-align:left; font-weight:normal; font-size:15px; color:#fff; background:#54575d;}
.main_content #content .bdr_notice thead a { font-size:12px; color:#b7b8ba;}
.main_content #content .bdr_notice thead .right { padding:14px 10px;}
.main_content #content .bdr_notice tbody td { padding:5px 10px; background:#fff;}
.main_content #content .bdr_notice tbody td a { font-size:13px; color:#434343;}
.main_content #content .bdr_notice tbody td span { font-size:11px; color:#5e5e5e;}
.main_content #content .bdr_notice thead a { font-size:12px; color:#b7b8ba;}
.main_content #content .bdr_notice tbody .right { padding:5px 5px;}

/* sitemap */
.sitemap .btn_close { padding:10px;}
.sitemap .btn_close a { display:block; width:100%; height:100%; padding:10px 0 9px 0; font-size:15px; color:#fff; font-weight:bold; background:#252a35; text-align:center;}
.sitemap .snb_nav_dep1 a { padding:13px 0 14px 20px; font-size:14px;}
.sitemap .snb_dep2 a { padding:6px 0 7px 25px; font-size:13px;}
.sitemap .snb_dep3 a { padding:3px 0 4px 25px; font-size:12px;}

/* footer */
#footer { z-index:20; padding:10px 0; width:100%; font-size:12px; color:#535353; text-align:center; clear:both;}
#footer span { color:#1468be;}
}



/* ↓↓↓ media query ↓↓↓ */
@media only screen and (min-width:480px) {
/* header */
#header { z-index:30; width:100%; height:100px; background:url("image/bg_header.jpg") repeat-x center top; clear:both;}
#header h1 { width:100px; margin:0 auto;}
.header_home { float:left; width:100px;}
.header_sitemap { float:right; width:100px;}

.search { padding:12px 30px 13px 30px; height:45px; background:#004483;}
.search i { display:block; float:left; padding:8px 10px 0 0; width:23px;}
.search span { display:block; float:left; padding:10px 0; font-size:16px; color:#fff;}
.search strong { font-size:20px; color:#fff;}
.search .btn_logout { display:block; float:right; width:110px; height:32px; padding-top:10px; font-size:20px; font-weight:bold; background:#fff; color:#004483; text-align:center;}

/* stle */
#stle { position:relative; width:auto; padding:20px; border-bottom:2px solid #000;}
#stle h2 { padding-left:25px; color:#000; font-size:24px; font-weight:bold; letter-spacing:-0.075em; background:url('image/ico_sub_title.jpg') no-repeat 0 50%;}
#stle ul { position:absolute; top:25px; right:20px;}
#stle li { float:left; font-size:17px; color:#5e5e5e;}
#stle li span { padding:0 5px;}
#stle li strong { color:#004483; font-weight:bold;}

.main_content #content .btn_quick { float:left; width:25%; height:100%; background:url("image/bg_main_btn.png") no-repeat center top; background-size:90%; margin-top:40px;}
.main_content #content .btn_quick a { display:block; padding-top:100%; font-size:20px; font-weight:bold; color:#363636; text-align:center; background-size:60%;}

.main_content #content .bdr_notice { clear:both; width:100%; margin-top:50px; letter-spacing:-0.05em;}
.main_content #content .bdr_notice thead th { padding:23px 30px; text-align:left; font-weight:normal; font-size:22px; color:#fff; background:#54575d;}
.main_content #content .bdr_notice thead a { font-size:18px; color:#b7b8ba;}
.main_content #content .bdr_notice tbody td { padding:10px 30px; background:#fff;}
.main_content #content .bdr_notice tbody td a { font-size:18px; color:#434343;}
.main_content #content .bdr_notice tbody td span { font-size:16px; color:#5e5e5e;}

/* sitemap */
.sitemap .btn_close { padding:20px;}
.sitemap .btn_close a { display:block; width:100%; height:100%; padding:20px 0 19px 0; font-size:20px; color:#fff; font-weight:bold; background:#252a35; text-align:center;}
.sitemap .snb_nav_dep1 a { padding:17px 0 18px 20px; font-size:20px;}
.sitemap .snb_dep2 a { padding:6px 0 7px 25px; font-size:16px;}
.sitemap .snb_dep3 a { padding:3px 0 4px 25px; font-size:14px;}

/* footer */
#footer { z-index:20; padding:20px 0; width:100%; font-size:18px; color:#535353; text-align:center; clear:both;}
#footer span { color:#1468be;}
}