@charset "utf-8"; 

.wrapper{margin:auto; max-width:1200px; }
header h1{text-align:center; padding:50px 10px}
header h1 img{vertical-align:middle; max-width:203px}
header h1 span.logo{display:inline-block; position:relative; margin-right:7px; top:-5px}
header h1 span.txt{display:inline-block; vertical-align:middle; padding:15px 20px 10px; font-weight:normal; font-size:2.5em; border-radius:5px; background:#dc1616; color:#fff; line-height:100%}
header h2{display:none}
header p.go_ganghwa{position:absolute; left:20px; top:20px}
header p.go_ganghwa a{display:block; padding:7px 20px 3px; border:1px solid #333; border-radius:3px}
header nav{background:#493426}
header nav ul li a{display:block; position:relative; text-align:center; padding:20px 0px 18px; font-size:1.2em; color:#fff; letter-spacing:.5px;}
header nav ul li.on a{color:#ffc600}
header nav ul li.on a:after{display:block; content:''; position:absolute; bottom:0px; width:100%; height:3px; background:#ffc600; }
footer{text-align:center; /* margin-top:50px; border-top:1px solid #ddd;   */padding:30px 20px}
footer .copy{font-size:.95em}
#control{padding:20px 3px 0px; background:none; border-top:0px}
#control div.data_control *{font-size:1em !important; font-weight:normal !important}
#control div.data_control div.qrcode p.qr_txt,
#control div.data_control div.data div.satisfy,
#control div.reply{display:none;}
#control div.data_control{border-top:2px solid #333; border-bottom:0px}
#control div.data_control div.data{width:70%; }
#control div.data_control div.data div:first-child{margin-top:20px}
#control div.data_control div.data div p.tit{padding:4px 0px 0px}
#control div.data_control div.qrcode{width:26%}
#control div.data_control div.qrcode p.qr{font-size:0px; line-height:0px}
#control div.data_control div.qrcode p.openNuri{width:70%; text-align:right;}

/** contents.css **/
.stab{display:flex; }
.stab>li{position:relative; margin-right:5px; border-radius:5px; background:#f0f0f0; border:1px solid #ccc}
.stab>li.select{color:#fff; background:#333; border-color:#333}
.stab>li a{display:block; padding:18px 35px 15px}
.stab>li.select a{color:#fff}
.tabcon{display:none;}
.tabcon.select{display:block;}
.imgBox{max-width:1200px; overflow-x:scroll;}
.imgBox ul{width:150%; overflow:hidden;}
.imgBox li{float:left; margin-right:10px;}
.web_hide{display:none;}

/* 준비중 */
#detail_con{margin-top:50px; word-break:keep-all}
.ready{text-align:center; margin:100px 0px 50px}
.ready p.stit{display:inline-block; padding:10px 100px; color:#fff; background:#000;}
.ready p.con{position:relative; margin-top:30px; margin-bottom:200px; font-size:25px; ; line-height:140%; transform:rotate(0.032deg)}
.ready p.con:after{display:block; content:""; position:absolute; left:50%; top:160%; width:1px; height:125px; background:#a8a8a8;}
.ready .end{color:#4e4e4e; font-size:.9em; transform:rotate(0.032deg)}
/* 문단 */
h4, .bl01{position:relative; margin-top:90px; padding-left:30px; font-size:24px; font-weight:600; color:#d85d19}
h4:first-child, .bl01:first-child, .stab+h4, .stab+.bl01{margin-top:50px}
h4:before, .bl01:before{display:block; content:''; position:absolute; left:0px; top:4px; width:18px; height:18px; border-radius:50px; border:3px solid #d85d19; background:url('/open_content/main/images/contents/blet.gif') no-repeat center center}
.tbox+h4{margin-top:40px; }
.sbox{background:#f5f5f5; padding:25px}
.bl02{position:relative; margin-top:15px; margin-bottom:10px; padding-left:13px; font-size:1.325em; font-weight:600; color:#493426; }
.bl02:before{display:block; content:''; position:absolute; left:0px; top:3px; width:5px; height:20px; border-radius:2px; background:#493426}
ul.bl03,
ul.bl04{transform:rotate(-.2deg)}
p.bl03,
.bl03>li{margin:12px 0px 12px; padding-left:15px; background:url('/open_content/main/images/contents/ssblet.gif') no-repeat left 5px; }
li.bl03 .wfont, p.bl03  .wfont, .bl03>li>.wfont{color:#222}
p.bl04,
.bl04>li{margin:10px 0px; padding-left:10px; background:url('/open_content/main/images/contents/sssblet.gif') no-repeat left 6px; }
ul.bl04{margin-bottom:25px}
li.bl05, p.bl05,
.bl05>li{padding-left:11px; background:url('/open_content/main/images/contents/ssssblet.gif') no-repeat left 12px; }
.nobl{background:none !important;}
.nobl:before{display:none !important;}
.point{color:#dc1616}
.h4_con{margin-top:10px; padding:20px 25px; border:1px solid #ccc; background:#f9f9f9; }
.para01{margin-top:40px; }
.para02{margin-left:12px; margin-top:50px}
h4+.para02, .bl01+.para02{margin-top:40px}
.para03{margin-left:7px !important; margin-top:17px !important; }
.para04{margin-left:15px; margin-top:8px !important; }
table.data{width:100%; border-top:3px solid #86634c; }
table.data td, table.data th{word-break:break-all; }
table.data thead th{text-align:center; padding:10px; border-left:1px solid #835f47; border-right:1px solid #835f47; border-bottom:1px solid #835f47; color:#493426; background:#f0ebe8; }
table.data tbody th, table.data td, table.data tfoot th{text-align:center; padding:10px; border:1px solid #aaa; }
table.data tbody th, table.data tfoot th, table.data tfoot td, table.data td.gray{background:#f9f9f9; }
table.data tbody th.left, table.data tbody td.left{text-align:left; }
table.data tbody th.right, table.data tbody td.right{text-align:right; }
ol.step{display:flex; justify-content: space-between; counter-reset: step 0}
ol.step>li{flex-grow:1; width:16%; margin:0px .5%; padding:3.5% 4%; border-radius:10px; background:#f0f0f0}
ol.step>li dt{font-size:1.125em}
ol.step>li dt:before{content:counter(step)'. '; counter-increment: step;}
ol.step>li dd{margin-top:10px}
ol.step>li.conspic{border:2px solid #dc1616}
.poster{margin:20px 0px 40px; text-align:center;}
.poster img{width:100%; max-width:860px}
.bgtit{text-align:center; margin-bottom:30px; padding:7px 10px 5px; font-size:1.125em; background:#333; color:#fff; border-radius:3px}
.go_url{padding-left:18px; background:url(/covid-19/images/sub/ic_url.png) no-repeat left 1px/15px; text-decoration:underline; color:#222}
.go_urlbg{display:inline-block; padding:6px 17px 2px 20px; background:#333; color:#fff; border-radius:100px}
.go_urlbg:after{display:inline; content:' →';}
/* contents */
.state{position:relative; overflow:hidden}
.state .yellow {color:#ffef67;}
.state .today{text-align:center; padding:50px 20px 40px; background:url(/covid-19/images/header_bg.gif) no-repeat center top; border-radius:5px}
.state .today dt{display:inline-block; padding:12px 30px 7px; font-size:1.65em; color:#fff; background:#dc1616; border-radius:7px}
.state .today dt .date{font-size:.7em; font-weight:normal}
.state .today dd {margin-top:30px; font-size:1.35em; line-height:130%; color:#333; }
.state .today dd p.num{display:inline-block; font-size:3em; line-height:100%; font-weight:bold; color:#222; }
.state .total{overflow:hidden;  margin-top:30px; }
.state .total>p.tit{float:left; width:19.5%}
.state .total>p.tit{padding:2.5% 3%; min-height:145px; background:#333; color:#fff; font-size:1.35em; line-height:130%; border-radius:5px; box-sizing:border-box}
.state .total>p.tit .yellow{display:inline-block; position:relative; }
.state .total>p.tit .yellow:before,
.state .total>p.tit .yellow:after{display:block; content:''; position:absolute; right:-55px; bottom:8px; width:50px; height:1px; background:#fff}
.state .total>p.tit .yellow:after{width:7px; transform:rotate(45deg); bottom:11px}
.state .total>div{display:flex; justify-content:space-between; float:right; width:80%}
.state .total>div>dl{flex-basis:24.5%; padding:3%; min-height:145px; border:1px solid #333; border-radius:5px; box-sizing:border-box}
.state .total>div>dl{text-align:center; margin:0px .2%;}
.state .total>div>dl dt{font-size:1.125em; color:#484848; }
.state .total>div>dl dd{margin-top:25px}
.state .total>div>dl dd span{font-size:2em; color:#222; font-weight:bold}
.state .covid19_btn2 {display:flex; justify-content:space-between; margin-top:50px}
.state .covid19_btn2 li {flex-basis:33%; margin:0px .3%;}
.state .covid19_btn2 li a {display:block; text-align:left; padding:20px; font-size:1.2em;  border-radius:5px; background:#f2f2f2; border:1px solid #ddd}
.state .covid19_btn2 li.sns a img{vertical-align:middle; margin:0px 5px; }
.state .covid_banner{margin-top:10px; background:#dff5ff; border-radius:5px}
.state .bCon{text-align:center;  margin:10px 0px 0px; padding:50px 10px 60px;  background: #efefef;;border-radius:5px}
.state #covid19_con .date{margin:40px 0px 30px}
.qna{margin-top:10px; border-top:2px solid #333}
.qna dt{position:relative;padding:25px 55px; font-size:1.1rem;  border-bottom:1px solid  #cccccc; cursor:pointer}
.qna dt:before,
.qna dd:before{display:block; content:'Q'; position:absolute; left:10px; top:22px; text-align:center; padding-top:3px; width:30px; height:30px; background:#ddd;  border-radius:500px; font-size:.9em; font-weight:bold; box-sizing:border-box}
.qna dd{position:relative; display:none; padding:25px 55px 25px 75px; background:#f0f0f0; border-bottom:1px solid #ddd}
.qna dd:before{content:'A'; left:20px; background:#333; color:#fff}
.tableBox .dataScroll{display:none}

/** porgrma **/
#text_symd input[type="text"], #text_eymd input[type="text"]{text-align:center; width:150px}
div.search select{padding-left:5px}
div.search .btn,
div.search select,
div.search input[type="text"]{height:37px; line-height:37px}
.board_list table.general_board tbody th, 
.board_list table.general_board tbody td{padding:18px 0px 15px 0px}
.nocontens{padding:10% 0 10% 15px;}
.board_view .title{padding:40px 20px}
.board_gallery li{width:25%}


/******************************************************************************************************************************/


@media screen and (min-width:801px){
	header{position:relative; background:url(/covid-19/images/intro/intro_ic01.gif) no-repeat right -15px}
	header nav ul.wrapper{/* max-width:1330px;  background:rgba(0,0,0,0.2) */} 
	header nav ul{display:flex; justify-content: center; justify-content: space-between; font-size:0px}
	header nav ul li{position:relative; /* padding:0px 3.9% */}
	header nav ul li+li:before{display:block; content:''; position:absolute; left:-2.6vw; top:23px; width:1px; height:15px; background:rgba(255,255,255,.5);}
	#tab{margin:30px 0px; padding:3% 3% 3% 5%; border:4px solid #ffc600; border-radius:7px}
	#tab ul li{display:inline-block; margin-right:3%; padding:5px 0px; min-width:30%; font-size:1.125em}
	#tab ul.col4 li{min-width:21%}
	#tab ul li.on a{color:#493426; font-weight:bold; border-bottom:2px solid #493426; line-height:100%}
}

@media screen and (min-width:1200px){
header nav ul li+li:before{left:-40px}
}

@media screen and (max-width:800px){
	header h1{padding:70px 20px 30px}
	header h1 span.logo{display:block; margin:0px 0px 10px}
	header h1 span.logo img{width:170px}
	header nav{padding:0px 20px}
	header nav ul{white-space:nowrap; overflow-x:auto !important;}
	header nav ul::-webkit-scrollbar {height:0px;}
	header nav ul li{display:inline-block; padding:0px 10px; }	
	header nav ul li:first-child a{letter-spacing:-.7px}
	footer{margin-top:50px}
	#control div.data_control{padding:0px 20px 20px; }
	#control div.data_control div.data{width:100%}
	#control div.data_control div.qrcode{width:100%}
	#control div.data_control div.qrcode p.qr{display:none;}
	#control div.data_control div.qrcode p.openNuri{text-align:left; width:100%; padding:0px 0px 20px; border-top:0px}
	#tab{margin:30px 20px}
	#tab ul li a{display:block; position:relative; padding:11px 20px 8px; font-size:1.015em}
	#tab ul li a:before{display:block; content:''; position:absolute; left:9px; top:19px; width:6px; height:1px; background:#666;}
	#tab ul li:not(.on) a{display:none;}
	#tab ul li.on a{padding:23px 20px 20px; color:#493426; background:#ffc600; border-radius:7px; font-size:1.125em}
	#tab ul li.on a:before{display:none;}
	#tab ul li.on a:after{display:block; content:''; position:absolute; right:20px; top:50%; margin-top:-8px; width:7px; height:7px; border:0px solid #493426; border-right-width:3px; border-bottom-width:3px; transform:rotate(45deg); border-radius:1px}
	#tab.open{padding:10px; border:4px solid #ffc600; border-radius:7px }
	#tab.open ul li a{display:block !important;}
	#tab.open ul li.on a{padding:11px 20px 8px; font-size:1.015em}
	#tab.open ul li.on a:after{right:20px;  width:10px; border-width:0px 0px 3px 0px; transform:rotate(0deg); border-radius:1px}
	.stab{margin-top:-10px; justify-content: center}
	.stab>li{flex-grow:1; width:33%;}
	.stab>li a{padding:20px 20%}
	#detail_con{padding:0px 25px}
	h4, .bl01{margin-top:50px}
	.tableBox{position:relative; overflow-x:scroll}
	.tableBox table.data{width:700px}
	.tableBox .dataScroll{display:block; position:Absolute; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); top:20%; text-align:center; padding-top:70px; width:110px; height:110px; background:rgba(0,0,0,.8) url(/covid-19/images/sub/ic_scroll.png) no-repeat center 20px/40%; border-radius:100px; font-size:1rem; color:#fff; z-index:1; box-sizing:border-box}
	.state{margin-top:-20px}
	.state .today{padding:30px 10px 30px}
	.state .today dt{padding:15px 25px 12px; font-size:5vw}
	.state .today dd span{margin-top:10px; ont-size:2em}
	.state .total{text-align:center; flex-wrap: wrap;}
	.state .total>p.tit{float:none; display:inline-block; margin:auto; padding:15px 30px 12px; width:auto; min-height:auto}
	.state .total>p.tit span.yellow:After, 	.state .total>p.tit  span.yellow:before{display:none;}
	.state .total>div{float:none; flex-wrap: wrap; margin-top:10px;  width:100%}
	.state .total>div>dl{flex-basis:49.5%; margin:.5% 0px; padding:20px 10px; min-height:auto}
	.state .total>div>dl dd{margin-top:12px}
	.state .total>div>dl dd span{font-size:1.8em}
	.state .covid19_btn2{margin-top:20px}
	.state .covid19_btn2 li{margin-top:2px; }
	.state .covid19_btn2 li a{text-align:center;}
	.state .covid19_btn2 li span{display:block; margin-bottom:8px}
	.state .bCon{padding:30px 30px}
	.board_gallery li{width:50%}
}