/* CSS Document */
html, body {margin:0; padding:0; border:0; outline:0; color:inherit; font-family:'Noto Sans KR','NanumSquare', '돋움', Dotum, sans-serif; font-size:14px; line-height:normal; vertical-align:baseline;}
body {width:100%; max-width:966px; min-width:320px; word-break:break-all; margin:0 auto;background:#f7fafd; background-image:url("https://www.chungho.co.kr/chlibrary/images/bg1.png"); 
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
@font-face { 
 font-family: SDSwaggerTTF;  
 src:  
	  url(../../font/SDSwaggerTTF.eot), 
	  url(../../font/SDSwaggerTTF.ttf), 
	  url(../../font/SDSwaggerTTF.woff), 
	  url(../../font/SDSwaggerTTF.woff2); 
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src:url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}


a {color:inherit;text-decoration: none;}
a:hover {text-decoration:underline;color:#3E7CE8;}

ul, li {list-style: none; padding:0;}

input{outline-width:0;}
	
table{padding:0;border:0;border-spacing:0px;border-collapse:collapse;}
th, td{padding:0;}
	
input[type="checkbox"] {display:none;}
input[type="checkbox"] + label {color:#666; margin-right:40px;}
input[type="checkbox"] + label span {display:inline-block; width:19px; height:19px; margin:-2px 5px 0 0; vertical-align:middle; background:url(http://www.single888.com/images/check.png) left top no-repeat; cursor:pointer;}
input[type="checkbox"]:checked + label span {background:url(http://www.single888.com/images/check.png) -19px top no-repeat;}
input[type="radio"] {display:none;}
input[type="radio"] + label {color:#666; margin-right:40px;}
input[type="radio"] + label span {display:inline-block; width:19px; height:19px; margin:-2px 5px 0 0; vertical-align:middle; background:url(http://www.single888.com/images/check.png) -38px top no-repeat; cursor:pointer;}
input[type="radio"]:checked + label span {background:url(http://www.single888.com/images/check.png) -57px top no-repeat;}
img {vertical-align:top;}
	
.paging_wrap {width:100%; text-align:center; margin:40px 0; position:relative;z-index:9;}
.paging {display:inline-block; }
.paging .bn {height:36px; float:left;}
.paging .bn a {display:inline-block; float:left; margin:0 2px; width:36px; height:36px; border:1px solid #dadada;color:#807e7e; font-size:14pt; line-height:36px; text-transform:uppercase;}
.paging .bn_left a {display:block; height:100%;text-align:center;}
.paging .bn_right a {display:block; height:100%;text-align:center;}
.paging ul {display:contents; float:left; ; height:36px;}
.paging ul li {float:left; width:36px; height:36px; margin:0 2px;}
.paging ul li a {display:block; width:36px; height:36px; border:1px solid #dadada; font-size:14px; color:#807e7e; text-align:center; line-height:36px;}
.paging ul li.on  {width:37px; height:37px; border:0; background:#666; font-weight:bold; color:#fff; line-height:36px;}
.paging ul li.on a {color:#fff;}


#top {width:100%; margin:0 auto; position:relative; display: table; height:70px; border-bottom:1px solid #eee;}
#top2 {width:100%; margin:0 auto; position:relative; display: table; height:70px;}
#top .ci{position:absolute; top:15px;left:15px;}
#top .menu{position:absolute; top:22px; right:15px;}
#top2 .menu{position:absolute; top:22px; right:15px;}
#container {width:100%; position:relative; margin:10px auto 50px;}
#bottom {width:100%; margin:0 auto; position:relative; display: table; border-top:1px solid #eee;padding:30px 0; text-align:center; color:#acadaf;}

#allMenu {position: fixed; top:0; left:0; width:100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,0.7); z-index: 1002; display:none;}
#allMenu .closeButton {width:84%; max-width:906px; margin:20px auto 0; padding: 0 15px; text-align:right;}
#allMenu .closeButton img {margin-right:-15px; width:40px; height:40px;}
#allMenu .contents {width:84%; max-width:906px; margin:5px auto 20px; background:#fff; border:1px solid #000; padding: 15px; color:#0d264e;}
#allMenu .contents .title {width:100%; height:70px; line-height:70px; background:#0065a4; font-size:20px;font-weight:700; color:#fff; margin-bottom:25px; text-align:center;}
#allMenu .contents .sub1 {font-size:17px; font-weight:700;padding-left:15px;margin-bottom:10px;}
#allMenu .contents .sub2 {padding-left:30px;margin-bottom:10px;}
#allMenu .contents hr {border:0; border-top:1px dashed #ccc; margin:15px 0;}

#chCatalog {position: fixed; top:0; left:0; width:100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,0.7); z-index: 1003; display:none;-webkit-overflow-scrolling:touch;}
#chCatalog .closeButton1 {width:96%; max-width:906px; margin:20px auto 0; text-align:right;}
#chCatalog .closeButton1 img {width:40px; height:40px;}
#chCatalog .contents {width:96%; height:calc(100% - 75px);max-width:906px; margin:5px auto; background:#fff; border:1px solid #000; color:#0d264e;}
#chCatalog .contents iframe {width:100%; height:100%; border:0; margin:0 auto; background:#fff;}

#leaflet {position: fixed; top:0; left:0; width:100%; height: 100%; overflow-y: auto; background: rgba(0,0,0,0.7); z-index: 101; display:none;}
#leaflet .closeButton2 {width:96%; max-width:906px; margin:20px auto 0; text-align:right;}
#leaflet .closeButton2 img {width:40px; height:40px;}
#leaflet .contents {width:96%; height:calc(100% - 75px);max-width:906px; margin:5px auto; background:#fff; border:1px solid #000; color:#0d264e;}
#leaflet .contents iframe {width:100%; height:100%; border:0;}
#topBar {width:1px; height:20px; background:#999; margin:0 auto 10px;}
#midBar {width:20px; height:1px; background:#eee; margin:40px auto 40px;}
#mainTitle {width:100%; text-align:center; font-size:25px; font-weight:700; line-height:1;}
#board {width:96%;border-top:2px solid #ddd;border-bottom:2px solid #bbb; margin:20px auto;}
#board ul{width:100%;border-bottom: 1px solid #ccc;}
#board ul:last-child {border-bottom: 0px;}
#board ul .contents{padding-bottom:15px; border-bottom: 1px dashed #f2f2f2;}
#board ul .startdate{padding:5px 0; font-size:12px; color:#aaa;}

#board1 {width:100%; margin:20px auto 30px; display:table;}
#board1 ul{width:calc((100% - 31px) / 3); display:inline-block; float:left; margin:0 5px 20px;}
#board1 ul .contents{padding-bottom:15px; border-bottom: 1px dashed #f2f2f2;}
#board1 ul .startdate{padding:5px 0; font-size:12px; color:#aaa;}

.topButton {margin-bottom:10px; width:100%; text-align:right;font-size:12px; color:#999;}
.button1 {background:#0c88ae;padding: 5px 0; border:1px solid #eee; border-radius:3px; text-align:center; width:120px; cursor: pointer; color:#fff; font-size:14px; font-weight:700; display:inline-block;}
.button2 {background:#0c88ae;padding: 5px 0; border:1px solid #eee; border-radius:3px; text-align:center; width:200px; cursor: pointer; color:#fff; font-size:14px; font-weight:700; display:inline-block;}

#imgDown {width:100%; margin:0 auto 30px; }
#imgDown > ul {width:100%; color:#fff;font-weight:500; border-top:2px solid #0065a4;}

.topUl01 {display:block;}
.topUl02 {display:none;}
.topUl03 {width:calc(100% - 30px) !important; background:#0065a4; padding:3px 15px; color:#fff;font-weight:500; margin-top:-14px; font-size:13px;}
.topUl04 {border-top:2px solid #333; height:40px; width:calc(100%) !important; padding:13px 0 0; margin-top:15px;}

.topUl01 .li01 {width:20%; display: inline-block; float:left; text-align:center; height:80px; line-height:80px;background:#f2f2f2;}
.topUl01 .li02 {width:60%; display: inline-block; float:left; text-align:center; font-size:32px; height:80px; line-height:80px; color:#0065a4; font-weight:700;;background:#dedede;}
.topUl01 .li03 {width:20%; display: inline-block; text-align:center; height:80px; line-height:80px;background:#f2f2f2;color:#555;}

.topUl02 .topLi01 {text-align:center; font-size:23px;  color:#0065a4; font-weight:700;background:#eee; padding:6px 0 10px;}
.topUl02 .topLi02 {text-align:center; color:#aaa; padding:7px 0; font-size:13px;background:#f9f9f9;}

.topUl04 .li01 {width:25%; display: inline-block; float:left}
.topUl04 .li02 {width:75%; display: inline-block;text-align:right; font-size:17px; font-weight:700; color:#333;}

.conBox {border:0; padding:7px 10px; text-align:center; font-weight:700; color:#fff;
	background: -webkit-linear-gradient(to right, #0062a7, #1ab4b6);
	background: -o-linear-gradient(to right, #0062a7, #1ab4b6);
	background: -moz-linear-gradient(to right, #0062a7, #1ab4b6);
	background: linear-gradient(to right, #0062a7, #1ab4b6);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0062a7', endColorstr='#1ab4b6',GradientType=1);
}
.title1 {}
.title11 {padding:4px 20px; color:#fff; font-size:18px; font-weight:500;
	background: -webkit-linear-gradient(to right, #0062a7, #0c89ae);
	background: -o-linear-gradient(to right, #0062a7, #0c89ae);
	background: -moz-linear-gradient(to right, #0062a7, #0c89ae);
	background: linear-gradient(to right, #0062a7, #0c89ae);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0062a7', endColorstr='#0c89ae',GradientType=1);
}
.title12 {padding:4px 10px; color:#fff; font-size:18px; font-weight:500;background: url(../../images/ggok.png);}
.title2 {margin-top:50px;}
.hr {border:1px solid #0c89ae;border-bottom:0; margin-top:-11px;}

.t1div {width:calc(100%);padding:10px 0;}
.t2div {display:table;width:100%;}
.t2div .t2div1 {width:calc(100% / 2 - 15px);padding:10px 0;display: inline-block; float:left; vertical-align: top;}

.t2div .t2div1:last-child {margin-left:30px;}

.tvDiv {width:100%;margin-top:30px;display: table;}
.tvDiv .tvlist {width:calc((100% - 30px) / 3); margin:0 4.9px;  display:inline-block; float:left;} 
.tvDiv .tvlist .bg {width:100%; height:175px; } 

@media only screen and (max-width:965px){
	.tvDiv .tvlist{width:calc((100% - 30px) / 3);}
	.tvDiv .tvlist .bg {width:100%; height:18vw; } 
}

@media only screen and (max-width:799px){
	.topUl01 {display:none;}
	.topUl02 {display:block;}
	.topUl03 {width:calc(100% - 16px) !important; background:#0065a4; padding:3px 8px; font-size:12px;}
	.t1div .edtior1 img {width:40% !important;height:auto !important;}
	#board1 ul{width:calc((100% - 12px) / 2); display:inline-block; float:left; margin:0 3px 20px;}
	.tvDiv .tvlist{width:calc((100% - 20px) / 2);}
	.tvDiv .tvlist .bg {width:100%; height:25vw; } 
}
@media only screen and (max-width:559px){
	.topUl01 {display:none;}
	.topUl02 {display:block;}
	.topUl03 {width:calc(100% - 16px) !important; background:#0065a4; padding:3px 8px; font-size:12px;}
	.t1div .edtior1 img {width:100% !important; height:auto !important;float:none !important; margin:0 0 10px 0 !important;  }
	.t2div .t2div1 {width:calc(100% - 50px);padding:10px 25px;display: inline-block; vertical-align: top;}
	.topUl04 .li02 {font-size:14px;margin-top:4px;}
	#board1 ul{width:calc((100% - 40px) / 1); display:inline-block; float:left; margin:0 20px 50px; }
	#board1 ul .contents {font-size:18px;}
	.tvDiv .tvlist{width:calc((100% - 20px) / 2);}

}