@charset "utf-8";
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/
/*@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
@import url(NotoSansKR-Hestia.css);

html, body {width:100%; height:100%}
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin: 0; padding: 0; font-size: 12px;font-family:'Noto Sans', Noto Sans, sans-serif, MalgunGothic, gulim; color: #333; line-height: 1.6; }
#header {width:100%; background:#1a1a1a;}
.ie7 #header,.ie8 #header {width:100%; background-color:#1a1a1a;}
#nav {position: relative; width: 100%; height: 57px; margin:0 auto;}
#nav .tit{font-size:24px; color:#fff; padding:10px 0 0 10px; letter-spacing:-1px; font-weight:600}
#nav .logo{position :absolute; right: 10px; top: 10px;}

#container {width: 100%}
.contHeaderBg {width: 100%; background: #575754;}
.contHeader {position: relative; text-align: left; width: 970px; margin: 0 auto;}
.contHeader .contit {padding: 20px; font-size: 30px; color:#fff;}
.contHeader .contit p {color:#e7e6e6; font-size:15px; font-weight:300}

.content {position:relative; text-align: left; width:970px; margin: 0 auto;}
.content .noti {font-size: 15px; color: #666; text-align: center; padding: 20px 0 0}
.content .photoBox {position: relative; margin-top:30px}
.content .photoBox img {width:100%; cursor:pointer;}
.content .photoBox img.before {position:relative; top:0; left:0;}
.content .photoBox img.after {position:absolute; top:0; left:0;}
.content .photoBox span{ font-size:13px; display:block; padding:10px 0 20px; color:#333;  }  
 
@media screen and (max-width: 480px){
    #nav .tit{font-size:15px; color:#fff; padding:15px 0 0 10px; letter-spacing:-1px;}
    #nav .logo{position :absolute; right: 8px; top: 10px;}
    #nav .logo img {width:80px}

    .contHeader,.content {width:100%;}
    .contHeader .contit p{font-size:13px;}
    .content .photoBox span { font-size:12px; display:block; padding: 0 10px;  }
    .content .noti { font-size:12px;}
}

@media (min-width: 481px) and (max-width: 767px){
    #nav .tit{ font-size:20px;  color:#fff;}
    .contHeader,.content {width:100%;}
    .contHeader .contit p{font-size:13px;}
    .content .photoBox span { font-size:12px; display:block; padding: 0 10px;  }
}

@media (min-width: 768px) and (max-width: 1024px){
    .contHeader,.content {width:100%;}
}