@charset "utf-8";

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:300;
    src:url(/_font/NotoSansKR-Light-Hestia.eot),
    url(/_font/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/_font/NotoSansKR-Light-Hestia.woff) format('woff'),
    url(/_font/NotoSansKR-Light-Hestia.otf) format('opentype');
}
@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:350;
    src:url(/_font/NotoSansKR-DemiLight-Hestia.eot),
    url(/_font/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/_font/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(/_font/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:400;
    src:url(/_font/NotoSansKR-Regular-Hestia.eot),
    url(/_font/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/_font/NotoSansKR-Regular-Hestia.woff) format('woff'),
    url(/_font/NotoSansKR-Regular-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:500;
    src:url(/_font/NotoSansKR-Medium-Hestia.eot),
    url(/_font/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/_font/NotoSansKR-Medium-Hestia.woff) format('woff'),
    url(/_font/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

@font-face{
    font-family:'Noto Sans Korean';
    font-style:normal;
    font-weight:700;
    src:url(/_font/NotoSansKR-Bold-Hestia.eot),
    url(/_font/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
    url(/_font/NotoSansKR-Bold-Hestia.woff) format('woff'),
    url(/_font/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

/* Default Setting */
html, body{height:100%;}
html, body, section, header, nav, footer, article, address, h1, h2, h3, h4, h5, h6, p, dt, dd, dl, ul, li, span, strong, div, table, td, input, fieldset, textarea, select, button, a, img{padding:0; margin:0; font-family:'Noto Sans Korean', 'Malgun Gothic', Dotum, '돋움',Helvetica,AppleSDGothicNeo,sans-serif; font-weight:400; box-sizing:border-box;}
body{font-size:14px; color:#333; overflow-x:hidden; overflow-y:auto; letter-spacing:-1px;}
li{list-style:none;}
img{vertical-align:top; border:none; max-width:100%;}
button{border:none; background-color:transparent; cursor:pointer;}
a{color:#333; text-decoration:none;}
table{border-collapse:collapse;}
.hidden{width:1px; height:1px; margin:-1px; overflow:hidden; position:absolute; clip:rect(0 0 0 0);}
.ir{display:block; width:100%; height:100%; z-index:-1; font-size:0; overflow:hidden; position:relative;}
caption{width:0; height:0; overflow:hidden; font-size:0; text-indent:-9999px;}
img.mobile{display:none;}

#skip_navigation{display:none;}

/* Mobile GNB Dummy */
#wrap:after{display:none; content:""; width:100%; height:100%; background-color:rgba(0,0,0,0.7); position:fixed; top:0; left:0; z-index:98;}
#wrap.active:after{display:block;}

/* Common header */
header{width:100%; position:absolute; top:0; left:0; z-index:99; border-bottom:1px solid rgba(255,255,255,0.2); background-color:#fff; transition:all 0.3s;}
header section{width:100%; max-width:1200px; height:115px; margin:0 auto; position:relative; transition:all 0.3s;}
#tnb{border-bottom:1px solid #d7d7d7;}
#tnb > div{width:100%; max-width:1200px; margin:0 auto; position:relative; overflow:hidden;}
#tnb > div ul{float:right; overflow:hidden;}
#tnb > div ul:first-child{float:left;}
#tnb > div ul li{margin-left:25px; float:left;}
#tnb > div ul:first-child li{margin-right:25px; margin-left:0;}
#tnb > div ul li a{height:50px; line-height:50px; font-size:14px; color:#8d8d8d; letter-spacing:0;}
#logo h1{margin-top:-30px; position:absolute; top:50%; left:0;}
#logo h1 a{display:block; width:300px; height:60px; background:url(/_res/ppm/img/logo.png) no-repeat; background-size:contain; text-indent:-9999px;}
#gnb{padding-top:30px;}
#gnb nav{float:right;}
#gnb nav > ul{float:right;}
#gnb nav > ul > li{float:left; position:relative;}
#gnb nav > ul > li > a{display:block; padding:0 40px; height:80px; line-height:80px; letter-spacing:0; font-size:19px; color:#000;}
#gnb nav > ul > li:last-child > a{padding-right:0;}
#gnb nav > ul > li > ul{visibility:hidden; min-width:220px; max-height:0; overflow:hidden; position:absolute; top:85px; left:50%; background-color:#f7f7f7; transition:max-height 0.2s; transform:translateX(-50%);}
#gnb nav > ul > li.active > ul{display:block; visibility:visible; max-height:400px; border-top:4px solid #027d98;}
#gnb nav > ul > li > ul li a{display:block; height:50px; line-height:50px; font-size:18px; font-weight:350; color:#333; letter-spacing:0; text-align:center;}
#gnb nav > ul > li > ul li:focus a{visibility:visible; display:block;}
#gnb nav > ul > li > ul li a:hover, #gnb nav > ul > li > ul li a:focus{color:#fff; background-color:#027d98;}
#gnb nav > ul > li > ul li a:focus{visibility:visible; display:block;}
#gnb nav.active{visibility:visible; max-height:500px; opacity:1;}
#gnb_control{display:none; width:40px; height:40px; margin-top:-20px; position:absolute; top:50%; right:16px; border:none; background-color:#fff; transition:all 0.3s;}
#gnb_control span{width:22px; height:3px; background-color:#333; position:absolute; top:50%; left:50%; margin-top:-1.5px; margin-left:-11px; text-indent:-9999px; transition:all 0.3s;}
#gnb_control:before, #gnb_control:after{content:""; width:22px; height:3px; background-color:#333; position:absolute; left:50%; margin-left:-11px; transition:all 0.3s;}
#gnb_control:before{top:10px;}
#gnb_control:after{bottom:9px;}
#gnb_control.active span{opacity:0;}
#gnb_control.active:before{width:15px; height:2px; margin-left:-8px; top:19px; transform:rotate(45deg);}
#gnb_control.active:after{width:15px; height:2px; margin-left:-8px; bottom:19px; transform:rotate(-45deg);}

/* Header Active Design */
header.fixed{position:fixed; border-bottom:1px solid #d7d7d7;}

/* Sub header */
#wrap.sub header{position:static; background-color:#fff;}

#quick_menu{position:relative; border-top:1px solid #484848; border-bottom:1px solid #484848; background-color:#1a1a1a; z-index:1;}
#qnb{width:100%; max-width:1200px; margin:0 auto;}
#qnb > ul{height:50px; border-left:1px solid #484848; border-right:1px solid #484848;}
#qnb > ul > li{width:25%; float:left; position:relative;}
#qnb > ul > li > a{display:block; height:50px; line-height:50px; padding-left:25px; font-size:16px; color:#c8c8c8; border-left:1px solid #484848; position:relative;}
#qnb > ul > li > a:after{content:''; width:10px; height:7px; position:absolute; top:50%; right:20px; margin-top:-3.5px; background:url(/_res/bigdata/img/bg_qnb_arrow.png) no-repeat 0 0; transition:all 0.3s;}
#qnb > ul > li.active > a:after{transform:rotate(180deg);}
#qnb > ul > li:first-child > a{border-left:none;}
#qnb > ul > li > ul{visibility:hidden; width:100%; max-height:0; overflow-y:auto; position:absolute; bottom:50px; left:0; z-index:2; border:1px solid #444; transition:all 0.3s;}
#qnb > ul > li.active > ul{visibility:visible; max-height:400px;}
#qnb > ul > li > ul > li > a{display:block; height:40px; line-height:40px; padding:0 20px; font-size:16px; color:#c8c8c8; background-color:#1a1a1a;}
#qnb > ul > li > ul > li > a:hover, #qnb > ul > li > ul > li > a:focus{background-color:#3c3c3c; color:#fff;}

#sub_contents div.jwxe_board table.type_board{border-top:2px solid #333;}

footer{position:relative; background-color:#1a1a1a; z-index:1;}
#footer{width:100%; max-width:1200px; margin:0 auto; padding:35px 0; position:relative;}
#footer > ul{overflow:hidden; padding-bottom:10px;}
#footer > ul li{float:left; padding:0 10px;}
#footer > ul li:first-child{padding-left:0;}
#footer > ul li:first-child a{color:#2aaec6;}
#footer > ul li a{font-size:16px; color:#a7a7a7;}
#footer > ul li a:hover, #footer > ul li a:focus{text-decoration:underline;}
#footer > address p.contact{padding-bottom:2px;}
#footer > address p span{font-size:16px; color:#909090; font-style:normal;}
#footer > address p span:first-child{display:block;}
#footer > address p span:nth-child(3), #footer > address p span:nth-child(4){margin-left:20px;} 

#contents.main h3{padding:0 0 50px 0; font-size:50px; font-weight:700; color:#000; letter-spacing:-3px; line-height:100%; text-align:left;}
#contents.main h3 span{font-weight:700;}

/* Sub Layout */
#sub_visual{background:url(/_res/ppm/img/bg_sub_visual_01.jpg) no-repeat 50% 100%; margin-top:150px;}
#sub_visual div{width:100%; max-width:1200px; margin:0 auto; padding:95px 0;}
#sub_visual div h2{display:inline-block; font-size:34px; font-weight:700; color:#fff;}
#sub_visual div p{display:inline-block; float:right; margin-top:23px; font-size:22px; font-weight:300; color:rgba(255, 255, 255, .5);}

#snb{margin-top:-40px;}
#snb div{width:100%; max-width:1200px; margin:0 auto; position:relative; background-color:#fff;}
#snb div > ul{display:table; width:100%; table-layout:fixed; border:1px solid #d7d7d7;}
#snb div > ul > li{display:table-cell; position:relative; vertical-align:top;}
#snb div > ul > li:before{content:""; width:1px; height:20px; position:absolute; top:50%; left:0; background-color:#b7b7b7; transform:translateY(-50%);}
#snb div > ul > li:first-child:before{display:none;}
#snb div > ul > li > a{display:block; height:80px; line-height:80px; font-size:20px; letter-spacing:0; font-weight:500; color:#333; text-align:center;}
#snb div > ul > li > a.active{font-weight:700; color:#027d98;}
#snb div > ul > li ul{min-width:170%; max-width:1000px; position:absolute; top:100px; left:50%; text-align:center; transform:translateX(-50%);}
#snb div > ul > li ul li{display:inline-block; margin:0 15px; position:relative;}
#snb div > ul > li ul li a{font-size:20px; color:#333;}
#snb div > ul > li ul li a.active{color:#027d98;}

#sub_title{width:100%; max-width:1200px; margin:112px auto 92px; position:relative;}
#sub_title h3{font-size:35px; font-weight:700; color:#333; text-align:center; line-height:48px; letter-spacing:-0.25px;}
#sub_title h3 span{display:block; width:42px; height:14px; margin:0 auto 15px; position:relative; background-color:#25539b;}
#sub_title h3 span:before{content:""; width:14px; height:14px; position:absolute; top:0; left:0; background-color:#25539b;}
#sub_title h3 span:after{content:""; width:14px; height:14px; position:absolute; top:0; right:0; background-color:#25539b;}

#sub_contents{width:100%; max-width:1200px; margin:0 auto; padding-bottom:67px; position:relative;}
#sub_contents div.jwxe_board div.board_view div.board_title{border-top:2px solid #000;}
#sub_contents div.lang{height:60px; position:absolute; top:-140px; right:0; border:1px solid #acacac;}
#sub_contents div.lang a, #sub_contents div.lang span{display:block; width:100px; float:left; font-size:20px; font-weight:350; color:#8d8d8d; line-height:58px; text-align:center;}
#sub_contents div.lang span{position:relative; color:#027d98;}
#sub_contents div.lang span:before{content:""; width:100%; height:100%; position:absolute; top:-1px; left:-1px; border:1px solid #027d98; z-index:1;}

/* 메인_공지 */
#main_notice > div{width:100%; max-width:1500px; margin:0 auto; padding:90px 0;}
#main_notice > div h3 span{color:#0255a9;}
#main_notice ul.tab{display:flex; margin-bottom:50px; overflow:hidden; justify-content:space-between;}
#main_notice ul.tab li{width:calc((100% - 50px)/1); position:relative;}
#main_notice ul.tab li button{display:block; width:100%; height:70px; line-height:70px; position:relative; font-size:32px; font-weight:500; color:#323232; text-align:left; border:none; background-color:transparent; cursor:pointer;}
#main_notice ul.tab li button:before{content:""; width:100%; height:1px; position:absolute; bottom:0; left:0; background-color:#e1e1e1; transition:all 0.3s;}
#main_notice ul.tab li button:hover:before, #main_notice ul.tab li button:focus:before, #main_notice ul.tab li.active button:before{height:3px; background-color:#333;}
#main_notice ul.tab li a{width:50px; height:50px; position:absolute; top:10px; right:10px; text-indent:-9999px;}
#main_notice ul.tab li a:before, #main_notice ul.tab li a:after{content:""; position:absolute; top:50%; left:50%; background-color:#b2b2b2; transform:translate(-50%, -50%);}
#main_notice ul.tab li a:before{width:37px; height:1px;}
#main_notice ul.tab li a:after{width:1px; height:37px;}
#main_notice div.tab_contents{display:none;}
#main_notice div.tab_contents.active{display:block;}
#main_notice div ul{overflow:hidden;}
#main_notice div ul li{width:420px; float:left; margin:0 0 0 70px;}
#main_notice div ul li:nth-child(n+4){margin-top:50px;}
#main_notice div ul li:nth-child(3n+1){margin-left:0; clear:both;}
#main_notice div.notice ul li a{display:block; height:250px; padding:40px; position:relative; background-color:#f9f9f9; border:1px solid #e6e6e6; transition:all 0.3s;}
#main_notice div.notice ul li a:after{content:""; width:27px; height:24px; position:absolute; bottom:-1px; right:-1px; background:url(/_res/sch/img/bg_main_recent_board_edge.png) no-repeat 100% 100%;}
#main_notice div.notice ul li a span{display:block; font-size:16px; font-weight:700; color:#0255a9; text-transform:uppercase; letter-spacing:0;}
#main_notice div.notice ul li a span strong{padding-right:5px; font-size:36px; font-weight:700; letter-spacing:-2px;}
#main_notice div.notice ul li a h6{max-height:60px; min-height:30px; line-height:30px; margin:15px 0; font-size:24px; font-weight:500; color:#333; overflow:hidden; word-break:keep-all;}
#main_notice div.notice ul li.latest h6:after{content:"N"; display:inline-block; width:23px; height:23px; line-height:23px; margin-left:5px; font-size:12px; font-weight:700; color:#fff; text-align:center; vertical-align:3px; border-radius:50%; background-color:#88c12f;}
#main_notice div.notice ul li a p{height:78px; line-height:26px; font-size:16px; color:#5e5e5e; overflow:hidden;}
#main_notice div.notice ul li a:hover, #main_notice div.notice ul li a:focus{background-color:#ebebeb; border:1px solid #dadada;}

/* 메인 재활용*/
#main_recycle > div{width:100%; max-width:1100px; margin:0 auto; padding:40px 0;}
#main_recycle > div h3 span{color:#0255a9;}
#main_recycle ul.tab{display:flex; margin-bottom:20px; overflow:hidden; justify-content:space-between;}
#main_recycle ul.tab li{width:calc((100% - 50px)/1); position:relative;}
#main_recycle ul.tab li button{display:block; width:100%; height:70px; line-height:70px; position:relative; font-size:32px; font-weight:500; color:#323232; text-align:left; border:none; background-color:transparent; cursor:pointer;}
#main_recycle ul.tab li button:before{content:""; width:100%; height:1px; position:absolute; bottom:0; left:0; background-color:#e1e1e1; transition:all 0.3s;}
#main_recycle ul.tab li button:hover:before, #main_notice ul.tab li button:focus:before, #main_notice ul.tab li.active button:before{height:3px; background-color:#333;}
#main_recycle ul.tab li a{width:50px; height:50px; position:absolute; top:10px; right:10px; text-indent:-9999px;}
#main_recycle ul.tab li a:before, #main_recycle ul.tab li a:after{content:""; position:absolute; top:50%; left:50%; background-color:#b2b2b2; transform:translate(-50%, -50%);}
#main_recycle ul.tab li a:before{width:37px; height:1px;}
#main_recycle ul.tab li a:after{width:1px; height:37px;}
#main_recycle div.tab_contents{display:none;}
#main_recycle div.tab_contents.active{display:block;}
#main_recycle div.board ul.gallery_slide{display:flex; justify-content:space-between; overflow:hidden}
#main_recycle div.board ul.gallery_slide li{max-height:275px; margin-left:24px; position:relative; float:left;}
#main_recycle div.board ul.gallery_slide li:first-child{margin-left:0;}
#main_recycle div.board ul.gallery_slide li a{display:block; width:250px; border:1px solid #ddd; box-sizing:border-box; background-position:50% 0; background-repeat:no-repeat; background-size:250px 215px; position:relative; border:none;}
#main_recycle div.board ul.gallery_slide li a div.info{width:100%; padding-top:230px;}
#main_recycle div.board ul.gallery_slide li a div.info span{display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#main_recycle div.board ul.gallery_slide li a div.info span.title{font-size:18px;}
#main_recycle div.board ul.gallery_slide li a div.info span.date{font-size:14px; color:#7d7d7d;}

/* PC Mini & Tablet */
@media all and (min-width:768px) and (max-width:1399px){
    body{-webkit-text-size-adjust:100%; overflow-x:hidden;}

    #wrap.active #main_visual, #wrap.active #contents, #wrap.active #sub_contents, #wrap.active #quick_menu, #wrap.active footer{display:none;}

    /* Common header */
    header{overflow:hidden;}
    header section{height:auto; padding:0;}
    #logo{height:70px; position:relative; background-color:#fff; z-index:999;}
    #logo h1{left:20px; margin-top:-18px;}
    #gnb_control{display:block;}
    #tnb{padding:0 20px;}
    #tnb > div{max-width:100%; position:absolute; padding:0 25px; top:71px; left:0; width:100%; height:50px; z-index:10; border-top:1px solid #ddd; background-color:#fff;}
    #gnb{width:100%; height:100vh; padding:0; position:absolute; top:0; left:0; background-color:#027d98; transition:all 0.3s;}
    #gnb.active{max-height:inherit; top:0;}
    #gnb nav{width:100%; padding-top:150px; float:none;}
    #gnb nav > div{width:100%; top:inherit; bottom:30px; text-align:center;}
    #gnb nav > div a{font-weight:400; color:#fff;}
    #gnb nav > div a:before{background-color:#ddd;}
    #gnb nav > div p{display:none;}
    #gnb nav > ul{display:table; width:100%; float:none;}
    #gnb nav > ul > li{display:table-cell; float:none;}
    #gnb nav > ul > li > a{height:50px; line-height:50px; padding:0; font-size:18px; color:#fff; text-align:center; background-color:#027d98;}
    #gnb nav > ul > li > ul{visibility:visible; min-width:100%; max-height:inherit; overflow:hidden; position:static; border-top:none; background-color:transparent; transform:translateX(0);}
    #gnb nav > ul > li > ul li{margin:15px 0; text-align:center;}
    #gnb nav > ul > li > ul li a{padding:0; font-size:16px; color:#fff;}
    #gnb nav > ul > li > ul li a:before{display:none;}
    #gnb nav > ul > li > ul li a:hover, header section nav > ul > li > ul li a:focus{color:#fff;}
    #gnb nav > ul > li > ul li a.active{font-weight:700; text-decoration:underline;}
    #wrap.active header{padding:0; overflow:visible; position:absolute; border-bottom:none;}
    #wrap.active header section{height:auto;}
    #wrap.active header #logo{background-color:#fff; z-index:999;}

    /* Header Fixed Design */
    header.active{padding:0 30px; position:fixed; border-bottom:1px solid #d7d7d7; background-color:#fff;}
    header.active section{max-width:100%; height:80px;}
    header.active #gnb{padding-top:0;}
    header.active #gnb nav > div{position:static; float:right; padding-top:27px; margin-left:60px;}
    header.active #gnb nav > ul > li > a{padding:0 30px; font-size:18px;}
    header.active #gnb nav > ul > li:last-child > a{padding-right:0;}
    header.active #gnb nav > ul > li > ul{border-top:1px solid #d7d7d7;}

    #footer{padding:25px 20px; max-width:100%;}
    #footer > ul li a{font-size:14px;}
    #footer > address p span{font-size:14px;}
    #footer > address p.copyright span{display:block;}
    #footer > div.sns{position:static; margin-top:20px;}
    #footer > div.sns ul li a{height:35px; line-height:35px; font-size:14px;}
    #footer > div.sns ul li a img{width:35px; height:35px; margin-right:7px;}
    #footer > div.sns ul li + li{margin-left:15px;}

    #qnb > ul > li > a{font-size:13px; padding:0 15px;}
    #qnb > ul > li > a:after{right:15px;}
    #qnb > ul > li > ul > li > a{font-size:13px; padding:0 15px;}

    /* #main_visual */
    #contents.main h3{padding:0 0 20px 0; font-size:38px; letter-spacing:-2px;}

    /* #main_faculty */
    #main_faculty{padding:60px 20px;}

    /* #main_notice */
    #main_notice{padding:60px 20px;}
    #main_notice > div ul.tabs{right:45px;}
    #main_notice > div ul.tabs li{padding:0 20px;}
    #main_notice > div ul.tabs li button{font-size:20px;}
    #main_notice > div ul.tabs li button:after{height:16px;}
    #main_notice div > div ul{margin-top:25px;}
    #main_notice div > div ul li{width:30%; margin:36px 0 0 0;}
    #main_notice div > div ul li:nth-child(-n+3){margin-top:0;}
    #main_notice div > div ul li:nth-child(3n+1){margin-left:15px;}
    #main_notice div > div.notice ul li.empty{padding:140px 0;}
    #main_notice div > div.notice ul li a:before{display:none;}
    #main_notice div > div.notice ul li + li{margin-left:36px;}
    #main_notice div > div.notice ul li a span{font-size:20px;}
    #main_notice div > div.notice ul li a span.title{height:52px; line-height:26px;}
    #main_notice div > div.notice ul li a span.date{font-size:16px;}
    #main_notice div > div.notice ul li a p{height:78px; line-height:26px; font-size:16px;}

    a.more{width:40px; height:40px;}
    a.more:before, a.more:after{width:40px;}


    /* Sub Layout */
    #sub_visual{margin-top:71px; background-size:cover;}
    #sub_visual div{padding:80px 30px;}
    #sub_visual div h2{font-size:30px; letter-spacing:0;}
    #sub_visual div p{margin-top:10px; font-size:22px; letter-spacing:0;}

    #snb{margin-top:0;}
    #snb div > ul{display:block; height:60px; position:relative; text-align:center; border-left:none; border-right:none;}
    #snb div > ul > li{display:inline-block; position:static;}
    #snb div > ul > li:before{display:none;}
    #snb div > ul > li > a{height:60px; line-height:60px; padding:0 20px; position:relative; font-size:16px; letter-spacing:0;}
    #snb div > ul > li > a:before{content:""; width:1px; height:16px; position:absolute; top:50%; left:0; background-color:#b7b7b7; transform:translateY(-50%);}
    #snb div > ul > li > a:first-child:before{display:none;}
    #snb div > ul > li ul{top:70px; min-width:100vw; left:0; transform:translateX(0);}
    #snb div > ul > li ul li{margin:0 10px;}
    #snb div > ul > li ul li a{font-size:15px;}
    #snb div > ul > li ul li a.active:before{bottom:-8px;}
    
    #snb.active div > ul{height:auto;}
    #snb.active div > ul > li > a{display:block;}
    #snb.active div > ul > li ul{display:none;}
    
    #sub_title{margin:80px auto 55px;}
    #sub_title h3{font-size:40px; line-height:40px;}
    #sub_title h3 span{width:39px; height:13px; margin:0 auto 30px;}
    #sub_title h3 span:before, #sub_title h3 span:after{width:13px; height:13px;}

    #sub_contents{padding:0 20px 50px; max-width:100%;}
    #sub_contents div.lang{height:50px; top:-105px; right:26px;}
    #sub_contents div.lang a, #sub_contents div.lang span{width:80px; font-size:17px; line-height:48px;}

}

/* Mobile */
@media all and (max-width:767px){
    body{-webkit-text-size-adjust:100%; overflow-x:hidden;}
    img.mobile{display:inline;}
    img.web{display:none;}
    
    #wrap.active #main_visual, #wrap.active #contents, #wrap.active #snb, #wrap.active #sub_visual, #wrap.active #quick_menu, #wrap.active footer{display:none;}

    header{overflow:hidden;}
    header section{height:auto; padding:0;}
    #tnb{display:none;}
    #logo{height:70px; position:relative; background-color:#fff; z-index:999;}
    #logo h1{margin-top:-12px; left:25px;}
    #logo h1 a{width:300px; height:37px;}
    #gnb_control{display:block;}
    #gnb{width:75vw; height:100vh; padding:0; position:absolute; top:0; right:-100%; background-color:#027d98; transition:all 0.3s;}
    #gnb.active{max-height:inherit; right:0;}
    #gnb nav{width:100%; padding-top:70px; float:none;}
    #gnb nav > div{padding:15px 0; position:static; text-align:center;}
    #gnb nav > div a{position:relative; font-weight:400; color:#fff;}
    #gnb nav > div a:before{content:""; width:1px; height:12px; margin-top:-6px; position:absolute; top:50%; left:0; background-color:#ddd;}
    #gnb nav > div a:first-child:before{display:none;}
    #gnb nav > div p{display:none;}
    #gnb nav > ul{padding:0; float:none;}
    #gnb nav > ul > li{float:none;}
    #gnb nav > ul > li > a{height:55px; line-height:55px; padding:0 20px; font-size:15px; font-weight:400; color:#fff; background-color:#027d98;}
    #gnb nav > ul > li > a:after{width:13px; height:9px; background:url(/_res/bigdata/img/bg_gnb_mobile_arrow.png) no-repeat 50% 50%/13px auto; position:absolute; top:27px; right:20px; margin-top:-4.5px; content:""; transform:rotate(-90deg); transition:all 0.5s;}
    #gnb nav > ul > li:hover > ul{border-top:none;}
    #gnb nav > ul > li > ul{width:100%; padding:0; margin:0; position:static; background-color:#fff; transition:all 0.2s; transform:translateX(0);}
    #gnb nav > ul > li > ul li{margin-top:0;}
    #gnb nav > ul > li > ul li a{padding:0 20px 0 30px; height:45px; line-height:45px; font-size:13px; color:#027d98; letter-spacing:0; text-align:left; position:relative; background-color:#fff;}
    #gnb nav > ul > li > ul li a:before{display:none;}
    #gnb nav > ul > li > ul li a.active{font-weight:700; background-color:#f7f7f7;}
    #gnb nav > ul > li > a.active:after{transform:rotate(0deg);}
    #gnb nav > ul > li > a.active + ul{visibility:visible; max-height:500px; padding:0; transition:all 1s;}
    #wrap.active header{padding:0; overflow:visible; position:absolute; border-bottom:none;}
    #wrap.active header #logo{border-bottom:1px solid #d7d7d7;}
    #wrap.active header #gnb nav > ul{margin:0;}

    #qnb{max-width:100%;}
    #qnb > ul{height:inherit; border-left:none; border-right:none;}
    #qnb > ul > li{width:100%; float:none; border-bottom:1px solid #444; background-position:95% 50%; background-size:7px auto;}
    #qnb > ul > li > a{height:40px; line-height:40px; padding:0 20px; font-size:14px; color:#d0d0d0;}
    #qnb > ul > li > ul{position:static; border:none; -webkit-overflow-scrolling:touch;}
    #qnb > ul > li > ul > li > a{height:30px; line-height:30px; font-size:13px;}

    #footer{padding:20px 15px; max-width:100%; }
    #footer > ul{padding-bottom:15px;}
    #footer > ul li{display:inline-block; float:none;}
    #footer > ul li a{font-size:13px;}
    #footer > address p span{font-size:13px;}
    #footer > address p.contact{padding-bottom:5px;}
    #footer > address p.contact span:first-child{word-break:keep-all;}
    #footer > address p.contact span:nth-child(2):before{display:none;}
    #footer > div.sns{position:static; margin-top:20px;}
    #footer > div.sns ul li{display:block;}
    #footer > div.sns ul li a{height:30px; line-height:30px; font-size:13px;}
    #footer > div.sns ul li a img{width:30px; height:30px; margin-right:5px;}
    #footer > div.sns ul li + li{margin-left:0; margin-top:6px;}


    /* #main_notice */
    #contents.main #main_notice > div h3{padding-top:0;}
    #main_notice{padding:55px 25px;}
    #main_notice > div{max-width:100%;}
    #main_notice > div ul.tabs{position:static; width:100%; justify-content:space-around; margin-bottom:30px;}
    #main_notice > div ul.tabs li{width:50%; padding:0; text-align:center;}
    #main_notice > div ul.tabs li:before{width:1px; height:15px; left:0;}
    #main_notice > div ul.tabs li button{padding:10px; font-size:18px;}
    #main_notice > div ul.tabs li button:after{height:15px;}
    #main_notice a.more{width:22px; height:22px;}
    #main_notice a.more:before, #main_notice a.more:after{width:22px;}
    #main_notice div > div ul li{width:100%; float:none; margin:0;}
    #main_notice div > div.notice ul li.empty{padding:70px 0; font-size:14px;}
    #main_notice div > div.notice ul li + li{margin-left:0;}
    #main_notice div > div.notice ul li a{height:auto;}
    #main_notice div > div.notice ul li a:before{display:none;}
    #main_notice div > div.notice ul li a span{font-size:18px; letter-spacing:0;}
    #main_notice div > div.notice ul li a span.title{height:auto; margin-bottom:10px; line-height:24px; word-break:keep-all;}
    #main_notice div > div.notice ul li a span.date{font-size:13px;}
    #main_notice div > div.notice ul li a p{height:78px; line-height:26px; font-size:16px;}
  

    /* 사이트 바로가기 */
    #main_link > div{padding:55px 25px;}
    #contents.main #main_link > div h3{position:static; transform:translateY(0);}
    #main_link > div ul{display:block; padding-left:0;}
    #main_link > div ul li{flex:none; margin-top:20px;}
    #main_link > div ul li a{display:flex; flex-wrap:wrap; align-content:center; justify-content:center; height:80px; border:1px solid #b7b7b7;}

    /* Sub Layout */
    #sub_visual{margin-top:71px; background-size:cover; background:url(/_res/bigdata/img/bg_sub_visual_01_m.jpg) no-repeat 0 0;}
    #sub_visual div{padding:30px 20px;}
    #sub_visual div h2{font-size:20px; letter-spacing:0;}
    #sub_visual div p{display:block; font-size:14px; margin-top:0; letter-spacing:0; float:none;}
    #snb{padding:0 20px; position:relative; margin-top:-30px; z-index:2;}
    #snb div{height:0;}
    #snb div > ul{display:block; height:62px; padding-top:60px; position:absolute; top:0; left:0; background-color:#fff; transition:0.3s all;}
    #snb div > ul > li{display:block; position:static;}
    #snb div > ul > li:before{display:none;}
    #snb div > ul > li > a{display:none; width:100%; height:60px; line-height:60px; padding:0 20px; position:relative; font-size:17px; letter-spacing:0; text-align:left;}
    #snb div > ul > li > a.active{display:block; position:absolute; top:0; left:0;}
    #snb div > ul > li > a.active:after{content:""; width:12px; height:7px; position:absolute; top:50%; right:20px; background:url(/_res/bigdata/img/bg_snb_arrow.png) no-repeat 50% 50%/12px 7px; transform:translateY(-50%);}
    #snb div > ul > li ul{top:75px;}
    #snb div > ul > li ul li{margin:0 7px;}
    #snb div > ul > li ul li a{font-size:15px;}
    #snb div > ul > li ul li a.active:before{bottom:-7px;}
      
    #snb.active div > ul{height:auto;}
    #snb.active div > ul > li > a{display:block;}
    #snb.active div > ul > li ul{display:none;}
      
    #sub_title{margin:62px auto 45px; max-width:100%;}
    #sub_title h3{font-size:30px; line-height:30px; padding-top:65px;}
    #sub_title h3 span{width:30px; height:10px; margin:0 auto 20px;}
    #sub_title h3 span:before, #sub_title h3 span:after{width:10px; height:10px;}

    #sub_contents{max-width:100%; padding:0 20px 50px;}
    #sub_contents div.lang{width:140px; height:40px; margin:0 auto; position:static; border:1px solid #acacac;}
    #sub_contents div.lang a, #sub_contents div.lang span{width:50%; font-size:14px; line-height:38px;}

}