@charset "utf-8";

body.on .mask{height:calc(100% - 300px);}

#covid19{padding:0 0 10px; background:#4e8bdc url(../../images/kr/common/bg_covid19.jpg) no-repeat; font-family:'score'; color:#fff; text-align:center;}
#covid19 .tit{padding:6px 0; font-size:24px; font-weight:700;}
#covid19 .tit span:not(.date){color:#ffe169;}
#covid19 .tit span:not(.date):before{content:''; display:inline-block; width:33px; height:27px; margin:-4px 8px 0 0; background:url(../../images/kr/common/ico_covid19.png) no-repeat center left; vertical-align:middle;}
#covid19 .tit .date{font-weight:500; font-size:16px;}
#covid19 .tit + a{position:absolute; top:8px; right:0; height:30px; line-height:30px; border-radius:25px; padding:0px 24px; background:#386bad; font-size:12px; font-weight:500; color:#fff;}
#covid19 .con{display:flex; justify-content:space-around; box-sizing:border-box; padding:10px; border-radius:8px; background:#fff;}
#covid19 .con li:after{content:''; display:block; clear:both;}
#covid19 .con li{float:left; box-sizing:border-box; padding:5px; border-radius:8px; background:#eff4fc; font-size:14px; font-weight:500;}
#covid19 .con li *{float:left; display:block; box-sizing:border-box;}
#covid19 .con li em{padding:6px 13px; border-radius:5px; background:#224c91;}
#covid19 .con li span{padding:6px 20px; color:#222;}
#covid19 .con li:nth-child(4){background:#eee;}
#covid19 .con li:nth-child(4) em{background:#413f3c;}
#covid19 .con li:nth-child(5), #covid19 .con li:nth-child(6){background:#eceffd;}
#covid19 .con li:nth-child(5) em, #covid19 .con li:nth-child(6) em{background:#4457a9;}
#covid19 .con li:nth-child(7){background:#eef9f6;}
#covid19 .con li:nth-child(7) em{background:#38947b;}
#covid19 .con li:nth-child(8){background:#ebfafc;}
#covid19 .con li:nth-child(8) em{background:#388894;}

#topmenu{padding-right:50px;}
#topmenu > li{width:14.28%;}
#topmenu > li > a{font-size:20px; text-align:center;}
#topmenu li .menu{height:550px;}

#header .logo strong, .m_menu .logo strong{padding:2px 0 3px;}
#header .logo span > span, .m_menu .logo span > span{padding:0 0 0 2px; letter-spacing:0.3px; font-family:'Noto Sans KR'; font-size:11px; text-transform:uppercase;}
#footer{padding:40px 0 50px;}
#footer .logo {top:54px;}

.btn_menu{top:38px; width:30px; height:22px; border-radius:0; background:url(../../images/kr/common/btn_menu.png) no-repeat;}
.btn_menu .bar{display:none;}

#btn_top{top:-82px;}

#container_sub{background:url(../../images/kr/common/bg_content.png) no-repeat bottom center;}
#subVisual{background:none;}
#subVisual .img{overflow:hidden; position:relative; height:290px;}
#subVisual .img img{position:absolute; top:0; left:50%; margin:0 0 0 -960px;}
#subContent{padding-bottom:11.3em;}

#pageInfo{float:none; width:100%; height:auto; padding:0; margin:-6px 0 0; color:#222; background:url(../../images/kr/common/bg_pageInfo.gif) repeat-x bottom left;}
#pageInfo h3{padding:0 0 38px;}
.location{position:absolute; top:6px; right:0; color:#555;}
.location a{color:#295daa;}
.location span:before{border-color:#999;}

#sub_default{padding:40px 0 0;}


@media all and (max-width:1680px) {
    #btn_top {top:105px;}
}

@media all and (max-width:1430px) {
    #covid19 .tit + a{right:15px;}
    #covid19 .con li span{padding:6px 15px;}
}

@media all and (max-width:1280px) {
    #covid19 .con li *{padding:6px !important;}
    #subVisual .img img{left:auto; right:-300px; margin:0;}
}

@media all and (max-width:1024px) {
    #covid19 .tit{font-size:20px;}
    #covid19 .tit .date{font-size:14px;}
    #covid19 .tit + a{top:5px;}
    #covid19 .con li{width:calc((100% - 265px)/6);}
    #covid19 .con li:nth-child(2), #covid19 .con li:nth-child(3){width:115px;}
    #covid19 .con li *{float:none;}
    #covid19 .con li + li{margin:0 0 0 5px;}
    
    #top .global{width:80%;}
    #top .global > li:not(.list3){width:25%;}
    #top .global > li:nth-child(2) {border-right: 1px solid #ddd;}
    #top .global li.current{display:none;}
    #header .logo span > span, .m_menu .logo span > span{letter-spacing:-0.5px;}
    .btn_menu{top:24px;}
    
    .util_wrap{width:20%;}
    
    #subVisual .img{height:auto;}
    #subVisual .img img{position:static; width:140%; max-width:140%; margin:0 0 0 -20%;}
    
    #pageInfo{margin:0;}
    #pageInfo h3{padding:20px 0;}
    .location{top:50%; transform:translateY(-50%);}
}

@media all and (max-width:768px) {
    #covid19 .tit{font-size:18px; text-align:left;}
    #covid19 .tit span:not(.date):before{margin:-7px 0 0; background-size:23px;}
    #covid19 .tit + a{top:4px; padding:0 15px;}
    #covid19 .con{flex-wrap:wrap; padding:10px 10px 5px;}
    #covid19 .con li{width:33% !important; margin:0 0 5px !important;}
    #covid19 .con li:nth-child(n + 7){width:49.7% !important;}
    #covid19 .con li *{float:left;}
    #covid19 .con li em{width:100px;}
    #covid19 .con li span{float:right;}
    
    #top{height:34px;}
	#top .global > li:nth-child(3){border-right:none !important;}
    .util_wrap{margin:0;}
    .util_wrap .sns{top:47px;}
    .btn_menu {top:16px;}
    
    #footer{padding:20px 0;}
    #footer .logo{margin:20px auto 0;}
    #footer .link {padding:20px 0 10px;}
    #footer .link li{padding:0 10px;}
    
    #container_sub{background-size:contain;}
}

@media all and (max-width:568px) {
    #covid19 .tit{font-size:15px;}
    #covid19 .tit .date{display:block; box-sizing:border-box; padding:0 0 0 33px; font-size:12px;}
    #covid19 .tit + a {top:20px;}
    #covid19 .con{padding:5px 5px 0;}
    #covid19 .con li{width:49.7% !important; padding:3px; font-size:13px;}
    
    #top{height:69px;}
    #top .global{width:100%;}
    #top .global > li:not(.list3){width:50%;}
    #top .global .list2{border-right:none !important;}
    #top .global > li:nth-child(3){border-right:1px solid #ddd !important;}
    
    .util_wrap{width:100%;}
    .util_wrap .sns{top:82px;}
    
    #header .logo strong, .m_menu .logo strong{padding:3px 0;}
    #btn_top {top:95px;}
    
    #pageInfo h3{padding:15px 0;}
    .location{position:static;}
}

@media all and (max-width:380px) {
    #covid19 .tit + a{height:25px; line-height:25px; padding:0 10px; font-size:11px;}
    #covid19 .con li *{padding:3px !important;}
    #covid19 .con li em{width:90px;}
    
    #btn_top {top:90px;}
    
    #top{height:67px;}
    .util_wrap{margin:-34px 0 0;}
}