@charset "utf-8";

@media screen and (max-width:1024px) {
    /* snb */
    #snb{float:none; width:100%; transition:all .3s; position:sticky; top:0; left:0; z-index:99;}
    #snb h2.title {font-size:1.5rem; padding:30px 0 20px; position:relative; cursor:pointer}
    #snb h2.title:before {top:15px; background-size:600%}
    #snb h2.title:after {content:'\e906'; font-family:'icomoon' !important; font-size:22px; display:inline-block; margin-left:3px; vertical-align:0; transform:rotate(90deg)}
    #snb .list > ul > li > a {font-size:1.2rem}
    #snb .list > ul > li > a:after {content:none}
    #snb .list > ul > li > a {text-align:center}

    /* content */	
    #contents {float:none; width:100%; padding:0 15px}

    /* snb 특정위치 고정 */
    .snbFixed {position:fixed !important; top:0 !important; z-index:9999}

    ul.dep01 > li > ul > li, h3.dep02, ul.dep02 > li{padding:3px 0 3px 33px}

    .codeView img {max-width:50%}
	.codeView img, .codeView span {display:block}
}
@media screen and (max-width:768px){
    /* 사이트 맵 */
    .sitemap dl {padding:30px 0; text-align:center}
    .sitemap dl dd {padding:20px 0 0}
    .sitemap dl dd > ul > li {display:block; margin:0 0 10px 0}
    .sitemap ul.sub-menu {margin-bottom:10px}

    /*최근업데이트*/
    div.duty-wrap div.duty_date {clear:both; float:left}

    /* 콘텐츠 만족도 */ 
    .contents_info {padding:15px;}
    .contents_info #s_form .list {float:none; width:100%;}
    .contents_info #s_form p.form {float:none; width:100%; margin-top:5px;}

    /* 하단 QR */
    .qr-wrap {display:none}

    /* 테이블 공통 */
    .table {overflow-x:scroll; min-width:265px; position:relative; margin-top:0; padding:20px 0 0 0}
    .table:before{content:'좌우 스크롤 하시면 내용을 보실 수 있습니다.'; color:#999; position:absolute; left:0; top:0}
    .table > table  {width:200%}
    .table table:before  {width:100%}

    .codeView img {max-width:50%}
	.codeView img, .codeView span {display:block}


    /*콘텐츠 포토 슬라이더*/
    /*작은사진*/
    .photo-article #bx-pager {grid-template-columns:repeat(4, minmax(0, 1fr));}
    .photo-article .bx-controls-direction a {width:40px; height:40px;}
}
