@charset "utf-8";

/* common */
#container h2 {margin-bottom:15px; font-size:1.35em; font-weight:500;}
#container h2 > span {font-weight:600;}
a.btn {display:inline-block; padding:7px 15px; text-align:center; font-size:0.9em; font-weight:300;}
a.btn.type1 {border:2px solid #131313; border-radius:40px;}
a.btn.type2 {border:2px solid #fff; color:#fff; border-radius:40px;}

/* visual */
.visMain {overflow:hidden; position:relative;}
.visMain .visImg {overflow:hidden; z-index:-1;}
.visMain .visImg li {width:100%;}
.visMain .visImg li.vis01 {background:url('/design/rainfall2019/img/main/visual_01.jpg') no-repeat center top; height:720px;}
.visMain .visImg li.vis02 {background:url('/design/rainfall2019/img/main/visual_02.jpg') no-repeat center top; height:720px;}
.visMain .visBtn {position:absolute; width:1200px; bottom:12px; left:50%; margin-left:-600px; text-align:right;}
.visMain .visBtn .visStop img {display:inline-block; margin-top:1px;}
.visMain .visPager a {display:inline-block; background:#fff; width:85px; height:8px; margin-right:10px; text-indent:9999px; opacity:0.5; cursor:pointer;}
.visMain .visPager a.cycle-pager-active {opacity:1;}
.visMain .visCtn {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); -moz-transform:translateY(-50%); -webkit-transform:translateY(-50%);}
@media all and (max-width:1365px) {
	.visMain .visBtn {width:980px; margin-left:-490px;}
}
@media all and (max-width:1023px) {
	.visMain .visImg,
	.visMain .visBtn {display:none;}
	.visMain .visCtn {position:static; top:0;  background:url('/design/rainfall2019/img/main/visual_01.jpg') no-repeat center top; padding:20px 0; background-size:cover; transform:translateY(0); -moz-transform:translateY(0); -webkit-transform:translateY(0);}
}

/* content */
.visMain .ctnTop {overflow:hidden;}
.visMain .ctnTop section {float:left; min-height:465px; padding:20px 22px; box-sizing:border-box;}
.visMain .ctnTop section.weather {width:25%; background:#fff;}
section.weather h2 {text-align:center;}
section.weather .today {border-top:2px solid #ccc; box-sizing:border-box;}
section.weather .today > div {overflow:hidden; padding:15px 10px;}
section.weather .today > div span {float:left;}
section.weather .today > div dl {padding:5px 0; text-align:center;}
section.weather .today > div dl dt {font-size:0.88em; margin-bottom:3px;}
section.weather .today > div dl dd {font-size:1.07em;}
section.weather .today > div dl dd b {display:inline-block; margin-right:10px; font-weight:600;}
section.weather .today > div dl dd b:last-child {margin-right:0;}
section.weather .today > ul {border-top:1px solid #ccc; font-size:0.9em;}
section.weather .today > ul li {border-bottom:1px solid #ccc; }
section.weather .today > ul li span:first-child {display:inline-block; width:45%; padding:3px 0; background:#f0f0f0; text-align:center;}
section.weather .today > ul li span:last-child {margin-left:10px;}
section.weather .tomorrow ul {overflow:hidden; margin:19px 0; font-size:0.9em;}
section.weather .tomorrow ul li {float:left; width:50%; text-align:center; box-sizing:border-box;}
section.weather .tomorrow ul li:first-child {border-right:1px solid #ededed;}
section.weather .tomorrow ul li span {display:block; margin-bottom:5px;}
section.weather .link a {display:block; width:100%; margin-top:5px; padding:10px 7px; background:#1d7fca; text-align:center; color:#fff; box-sizing:border-box;}
.visMain .ctnTop section.rainfall {position:relative; width:50%; min-height:465px; padding:28px 50px; background:rgba(0, 45, 104, 0.45); color:#fff;}
section.rainfall .now {width:35%;}
section.rainfall .now h2 {margin-bottom:0 !important; padding-top:100px; background:url('/design/rainfall2019/img/main/rainfall_bg.png') no-repeat;}
section.rainfall .now span.unit,
section.rainfall .now span.date {display:block; font-weight:300; font-size:0.9em;}
section.rainfall .now span.date {margin-top:10px; letter-spacing:0.5px}
section.rainfall .now a {display:inline-block; background:#1d7fca; border-radius:100px; padding:5px 15px; margin-top:15px; color:#fff;}
section.rainfall .village {position:absolute; top:50px; right:30px; width:64.333%; height:385px; background:url('/design/rainfall2019/img/main/rainfall_map.png') no-repeat; background-size:100% 100%;}
section.rainfall .village > div {position:absolute; color:#56575b; text-align:center; font-size:0.9em; text-shadow:-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;}
section.rainfall .village > div.seo {top:33%; left:8%;}
section.rainfall .village > div.angang {top:18%; left:32%;}
section.rainfall .village > div.gangdong {top:15%; left:52%;}
section.rainfall .village > div.sannae {top:68%; left:6%;}
section.rainfall .village > div.geoncheon {top:51%; left:16%;}
section.rainfall .village > div.hyeongok {top:38%; left:30%;}
section.rainfall .village > div.cheonbuk {top:35%; left:50%;}
section.rainfall .village > div.naenam {top:68%; left:33%;}
section.rainfall .village > div.jungbu {top:51%; left:38%;}
section.rainfall .village > div.bulguk {top:55%; left:55%;}
section.rainfall .village > div.oedong {top:78%; left:57%;}
section.rainfall .village > div.yangbuk {top:58%; left:71%;}
section.rainfall .village > div.gampo {top:54%; left:90%;}
section.rainfall .village > div.yangnam {top:78%; left:77%;}
section.rainfall .village > div span {display:block; margin-top:2px; padding:1px 15px; background:#56575b; color:#fff; font-size:0.9em; border-radius:40px; text-shadow:none;}
.visMain .ctnTop section.air {width:25%; background:url('/design/rainfall2019/img/main/air_pattern.gif') repeat left top; text-align:center;}
section.air dl {overflow:hidden;}
section.air dl dt {float:left; width:60%; font-weight:500; box-sizing:border-box;}
section.air dl dd {float:left; width:40%; box-sizing:border-box;}
section.air .quality {padding-top:166px; background:url('/design/rainfall2019/img/main/air_bg.png') no-repeat center 10px;}
section.air .quality dt {background:#1d7fca; padding:10px 5px; color:#fff;}
section.air .quality dd {background:#fff; padding:10px 5px;}
section.air .dust {overflow:hidden; margin-bottom:20px;}
section.air .dust dl {border-bottom:1px solid #a0b9c5; font-size:0.9em;}
section.air .dust dt {padding:5px;}
section.air .dust dt span {font-size:0.8em;}
section.air .dust dd {padding:5px; text-align:left;}
@media all and (max-width:1365px) {
	section.weather .today > div dl dt,
	section.weather .today > div dl dd,
	section.air .quality dt {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
}
@media all and (max-width:1023px) {
	.visMain .ctnTop section.weather {width:30%;}
	.visMain .ctnTop section.rainfall {width:70%}
	.visMain .ctnTop section.air {width:100%; min-height:100%;}
	section.weather .today > div {padding:15px 5px}
	section.air .quality {padding-top:0; background:none;}
}
@media all and (max-width:768px) {
	.visMain .ctnTop section {float:none; min-height:100%;}
	.visMain .ctnTop section.weather {overflow:hidden; width:100%;}
	section.weather .today,
	section.weather .tomorrow,
	section.weather .link {float:left; width:31%; min-height:149px;}
	section.weather .tomorrow,
	section.weather .link {display:table}
	section.weather .tomorrow {margin:0 3.5%;}
	section.weather .tomorrow ul {margin:0;}
	section.weather .tomorrow ul,
	section.weather .link ul {display:table-cell; vertical-align:middle;}
	.visMain .ctnTop section.rainfall {width:100%; /*padding:20px 22px;*/}
}
@media all and (max-width:599px) {
	section.weather .today,
	section.weather .tomorrow {width:48%;}
	section.weather .tomorrow {float:right; margin:0;}
	section.weather .link {display:block; width:100%; margin-top:10px; min-height:100%;}
	section.weather .link ul {display:block;}
	.visMain .ctnTop section.rainfall {padding:20px 22px;}
	section.rainfall .now {width:100%; text-align:center;}
	section.rainfall .now h2 {padding-top:0; background:none;}
	section.rainfall .village {position:relative; top:0; left:0; width:100%; margin-top:20px}
}
@media all and (max-width:399px) {
	section.weather .today,
	section.weather .tomorrow,
	section.weather .link {float:none; width:100%; min-height:100%;}
	section.weather .tomorrow,
	section.weather .tomorrow ul {display:block}
	section.weather .tomorrow ul {margin-top:10px;}
	section.weather .today > div {padding:5px 30px;}
}


.visMain .visCtn .ctnBottom {overflow:hidden; max-height:171px}
.visMain .visCtn .ctnBottom section {float:left;}
.visMain .visCtn .ctnBottom section.earthquake {overflow:hidden; width:75%; padding:0 22px; background:#124ea2; color:#fff; box-sizing:border-box;}
section.earthquake .info {float:left; width:48.5%; padding:44px 0 44px 25px; background:url('/design/rainfall2019/img/main/earthquake_bg.jpg') no-repeat center right; box-sizing:border-box;}
section.earthquake .info h2 {margin:0 0 10px 10px !important;}
section.earthquake .detail {float:right; width:45%;}
section.earthquake .detail p {margin:20px 0; padding-left:17px; background:url('/design/rainfall2019/img/main/earthquake_dot.gif') no-repeat left 10px; font-weight:300;}
section.earthquake .detail dl {overflow:hidden; font-size:0.9em;}
section.earthquake .detail dt {float:left; width:20%; padding:3px 3% 3px 0; box-sizing:border-box;}
section.earthquake .detail dd {float:left; width:80%; padding:3px 0 3px 6%; background:url('/design/rainfall2019/img/main/earthquake_bar.png') no-repeat left center; box-sizing:border-box;}
.visMain .visCtn .ctnBottom section.situation {width:25%; background:#002d68;}
section.situation a {display:block; position:relative; background:#002d68; padding:30.5px 50px; color:#fff; text-align:center;}
section.situation a.media {border-bottom:1px solid #4a6a94;}
section.situation a.media:before {content:''; position:absolute; top:24px; left:50px; width:48px; height:40px; background:url('/design/rainfall2019/img/main/situation_icon01.gif') no-repeat left center;}
section.situation a.special:before {content:''; position:absolute; top:21px; left:46px; width:58px; height:44px; background:url('/design/rainfall2019/img/main/situation_icon02.gif') no-repeat left center;}
section.situation a span {display:block; background:url('/design/rainfall2019/img/main/situation_icon03.gif') no-repeat right center;}
@media all and (max-width:1365px) {
	section.earthquake .detail p,
	section.earthquake .detail dt,
	section.earthquake .detail dd {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
	section.situation a {padding:30px 22px;}
	section.situation a.media:before {left:22px;}
	section.situation a.special:before {left:17px;}
}
@media all and (max-width:1023px) {
	.visMain .visCtn .ctnBottom section.earthquake {width:70%;}
	section.earthquake .info {padding:44px 0; background:none; width:30%; text-align:center;}
	section.earthquake .info h2 {margin:0 0 10px 0 !important;}
	section.earthquake .detail {background:none; width:65%;}
	.visMain .visCtn .ctnBottom section.situation {width:30%;}
}
@media all and (max-width:768px) {
	.visMain .visCtn .ctnBottom {max-height:100%;}
	.visMain .visCtn .ctnBottom section {float:none;}
	.visMain .visCtn .ctnBottom section.earthquake,
	.visMain .visCtn .ctnBottom section.situation {width:100%;}
}
@media all and (max-width:599px) {
	section.earthquake .info {width:30%;}
	section.earthquake .detail {width:60%;}
}

/* layout */
.sectionWrap {overflow:hidden; margin-top:40px;}
.sectionWrap section,
#container > section {margin-bottom:40px;}
@media all and (max-width:1023px) {
	.sectionWrap {margin-top:25px;}
	.sectionWrap section,
	#container > section {margin-bottom:25px;}
}

/* notice */
.notice {position:relative; float:left; width:63.334%; box-sizing:border-box;}
.notice .noticeList {min-height:215px; padding:20px 28px; background:#f5f5f5; border:1px solid #ddd; box-sizing:border-box;}
.notice .noticeList dl {border-bottom:1px solid #ddd;}
.notice .noticeList dt {font-size:1.07em; font-weight:500;}
.notice .noticeList dt > img {display:inline-block; margin:-5px 0 0 10px}
.notice .noticeList dd {overflow:hidden; height:44px; margin:12px 0 13px; color:#6e6e6e; font-weight:300; font-size:0.9em;}
.notice .noticeList ul li { background:url('/design/rainfall2019/img/main/notice_dot.gif') no-repeat 15px 20px; border-bottom:1px dashed #ddd; }
.notice .noticeList ul li:last-child {border-bottom:0;}
.notice .noticeList ul li a {display:block; padding:10px 0 10px 31px; font-size:0.9em;}
.notice .noticeList ul li:last-child a {padding-bottom:0;}
.notice .noticeList span.date {float:right; color:#333; font-weight:300;}
.notice .noticeList dt span.date {font-size:0.84em;}
.notice .noticeList ul li span.date {font-size:1em;}
.notice .noticeList a.noticeMore {display:block; position:absolute; top:7px; right:0;}
.notice .noticeList a.noticeMore span {display:inline-block; padding-right:17px; background:url('/design/rainfall2019/img/main/notice_more.gif') no-repeat right center;}
@media all and (max-width:1365px) {
	.notice .noticeList {min-height:212px;}
}
@media all and (max-width:1023px) {
	.notice {float:none; width:100%;}
	.notice .noticeList {min-height:100%;}
}
@media all and (max-width:599px) {
	.notice .noticeList span.date {display:none;}
}

/* pop */
.pop {position:relative; float:right; width:34.167%;}
.pop .popSlide {border:1px solid #ddd;}
.pop .popBtn {overflow:hidden; position:absolute; top:4px; right:0;}
.pop .popBtn li {float:left; margin-left:8px;}
.pop .slick-slide img {width:100%; height:215px;}
@media all and (max-width:1365px) {
	.pop .popSlide li a img {height:210px;}
}
@media all and (max-width:1023px) {
	.pop {float:none; width:100%;}
	.pop .popSlide {border:0; margin:0 -10px;}
	.pop .popSlide li a {display:block; margin:0 10px;}
	.pop .popSlide li a img {width:100%; border:1px solid #ddd;}
	.pop .popBtn li {float:left; margin-left:8px;}
}

/* tips */
.tips {overflow:hidden;}
.tips > div > div {float:left; width:16%;}
.tips > div > div h2 {background:url('/design/rainfall2019/img/main/tips_arrow.gif') no-repeat 143px center;}
.tips > div > div span {display:block; color:#646464;}
.tips .tipsList {float:right; width:80%;}
.tips .tipsList {overflow:hidden;}
.tips .tipsList li {float:left; width:12.5%;}
.tips .tipsList li a {display:block; padding-top:90px; text-align:center; font-size:0.9em;}
.tips .tipsList li.tipsList01 a {background:url('/design/rainfall2019/img/main/tips_icon01.jpg') no-repeat center top;}
.tips .tipsList li.tipsList02 a {background:url('/design/rainfall2019/img/main/tips_icon02.jpg') no-repeat center top;}
.tips .tipsList li.tipsList03 a {background:url('/design/rainfall2019/img/main/tips_icon03.jpg') no-repeat center top;}
.tips .tipsList li.tipsList04 a {background:url('/design/rainfall2019/img/main/tips_icon04.jpg') no-repeat center top;}
.tips .tipsList li.tipsList05 a {background:url('/design/rainfall2019/img/main/tips_icon05.jpg') no-repeat center top;}
.tips .tipsList li.tipsList06 a {background:url('/design/rainfall2019/img/main/tips_icon06.jpg') no-repeat center top;}
.tips .tipsList li.tipsList07 a {background:url('/design/rainfall2019/img/main/tips_icon07.jpg') no-repeat center top;}
.tips .tipsList li.tipsList08 a {background:url('/design/rainfall2019/img/main/tips_icon08.jpg') no-repeat center top;}
@media all and (max-width:1365px) {
	.tips > div > div {width:20%;}
	.tips .tipsList {width:76%;}
}
@media all and (max-width:1023px) {
	.tips > div > div {overflow:hidden; float:none; width:100%;}
	.tips > div > div h2 {margin-bottom:5px !important;}
	.tips .tipsList {float:none; width:100%; margin-top:25px;}
}

/* ban */
.ban > div {overflow:hidden; padding:20px 30px; border:1px solid #ddd; box-sizing:border-box;}
.ban .banBtn {/*overflow:hidden;*/ float:left; width:12%;}
.ban .banBtn li {float:left; margin-right:8px;}
.ban .banBtn li img {display:block;}
.ban .banList {overflow:hidden; float:left; width:88%;}
.ban .banList li {float:left;}
.ban .banList li a {display:block; margin:0 0 0 45px; font-size:0.9em;}
@media all and (max-width:1023px) {
	.ban .banBtn {display:none;}
	.ban .banList {float:none; width:100%;}
	.ban .banList li a {margin:0 45px 0 0;}
}