@charset "utf-8";
@import url('font/NanumSquare.css');
@import url('NotoSansKR.css');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');
@import url('font-awesome.css');
@import url('simple-line-icons.css');

body,
input[type='text'],
input[type='password'],
input[type='cancel'],
input[type='file'],
input[type='submit'],
input[type='button'],
input[type='reset'],
select,
textarea,
button {font-family: 'NotoSansKR Regular', sans-serif; color:#333; font-size:14px; line-height:1.5; font-weight:normal; text-align:justify; word-break:normal;}

div.wrapper{min-width:320px;}
div#headerWrap{background: #fff url(/newsletter/202201/image/main/headerTopLine.png) repeat-x left top;}
	div#headerWrap div::after{content:""; display:block; clear:both;}
	div#headerWrap div h1{float:left;}
	div#headerWrap ul.viewMore{float:right;}
	div#headerWrap ul.viewMore li{float:left; margin-left: 10px;}
	div#headerWrap ul.viewMore li:first-child{margin-left: 0;}
div#container{width: 100%; background-color: #ede9e7;}

div.topVisual span{height: 1px; display:inline-block; text-indent: -100000px;}	
div.topVisual img{width: 100%; display: block;}	

div.main div.article span.thumb {text-align: center;}


/* Mobile */
@media all and (max-width: 720px) {
div.wrapper{width: 100%; font-size: 14px;}
div#headerWrap{position:relative; background-size: 100% 35px;}
div#headerWrap div{padding: 35px 0 0; position: relative; height: 50px;}
div#headerWrap div h1{margin: 12px 0 0 10px;}
div#headerWrap div h1 img{height: 26px;}
div#headerWrap ul.viewMore{margin: 6px 10px 0 0;}
div#headerWrap ul.viewMore li img{height: 38px;}
div#container{width: auto; padding: 10px;}

	li.news{}
	li.news span{display:block; font-size: 13px; text-align: right;}
	li.news a{position: absolute; top: 7px; right: 0;font-size: 14px;display:block; vertical-align: bottom; color: #fff; font-weight: 400; text-decoration: none; background: url(/newsletter/202201/image/main/newsArr.png) no-repeat right center; padding-right: 30px;}

	ul#gnb{z-index: 100; display: none; position: absolute; top: 90px; right: 0;}
	ul#gnb::before{content:""; display: block; position: absolute; top: -10px;  right: 20px; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 10px solid #004860;}
	ul#gnb li{width: 250px;}
	ul#gnb li a{display: block;color: #fff; background-color: #004860; border-bottom: 1px solid #2d7086; text-decoration: none; padding: 10px 10px 10px 10px; font-size: 14px; font-weight: 400;}
	ul#gnb li:first-child a{padding-top: 15px;}



	div.main div.contents{width: 100%; margin: 0; background: #fff url(/newsletter/202201/image/main/news_Conbg.png) no-repeat bottom right; background-size: 76px 68px;}
	div.main div.contents::after{content:""; display:block; clear:both;}

	div.main div.contents div.colCon {}
	div.main div.contents div.article {border-bottom: 1px solid #ccc;position: relative;}	
	div.main div.contents div.article .pointTit{padding-right: 30px; margin: 10px 0;}
	div.main div.contents div.article .pointTit:first-child{margin-top: 0;}
	div.main div.contents div.article1 {border-bottom: 1px solid #ccc;position: relative;}	
	div.main div.contents div.article1 .pointTit{padding-right: 30px; margin: 10px 0;}
	div.main div.contents div.article1 .pointTit:first-child{margin-top: 0;}

	div.main div.article a {display: block;text-decoration: none; padding: 20px 10px;color: #333;background: url('/newsletter/202201/image/main/news_moreBt.png') right top no-repeat;}
	div.main div.article.noLink { padding: 20px 10px;}

	div.main div.article span {display: block;font-size: 15px; text-align: left; line-height: 1.5em;margin-top: 10px;}
	div.main div.article span:first-child{margin-top: 0;}
	div.main div.article span.thumb img {width: 100%;}

	div.main div.article1 a {display: block;text-decoration: none; padding: 20px 10px;color: #333;}
	div.main div.article1.noLink { padding: 20px 10px;}

	div.main div.article1 span {display: block;font-size: 15px; text-align: left; line-height: 1.5em;margin-top: 10px;}
	div.main div.article1 span:first-child{margin-top: 0;}
	div.main div.article1 span.thumb img {width: 100%;}

	div.main div.soundGraphy a {overflow: hidden;}
	div.main div.soundGraphy span.thumb{margin-right: 20px;}
	div.main div.soundGraphy span.thumb,
	div.main div.soundGraphy span.con {float: left;}
	div.main div.soundGraphy span.thumb {width: 40%;}
	div.main div.soundGraphy span.con {width: 50%; }
	div.main div.soundGraphy span.clear {width: 100%;}
	div.main div.soundGraphy span.con.clear {padding: 0;line-height: 1.7em; text-align: justify; margin-top:15px;}



#footerWrap{background-color: #4f4f4f; padding: 10px; font-size: 14px; text-align: left;}
#footerWrap div{overflow: hidden; color: #d3d3d3;}
#footerWrap div ul{float:left; margin-top: 10px;}
#footerWrap div ul li{margin-bottom: 5px;}

.pcOnly{display:none !important;}
.mobileOnly{display:block !important;}
}






/* PC */
@media all and (min-width: 721px) {	


	div#headerWrap div{padding: 5px 0 0 0; height: 125px; width: 960px;  margin: 0 auto; box-sizing: border-box; position: relative;}
	div#headerWrap div h1{margin-top: 35px;}
	ul#gnb{z-index: 100; display: none; position: absolute; top: 137px; right: 0;}
	ul#gnb::before{content:""; display: block; position: absolute; top: -20px;  right: 20px; border-right: 12px solid transparent; border-left: 12px solid transparent; border-bottom: 20px solid #004860;}
	ul#gnb li{width: 320px;}
	ul#gnb li a{display: block;color: #fff; background-color: #004860; border-bottom: 1px solid #2d7086; text-decoration: none; padding: 20px 20px 20px 20px; font-size: 16px; font-weight: 400;}
	ul#gnb li:first-child a{padding-top: 30px;}


	div#container{padding: 10px 0 40px;}
	div.topVisual{width: 100%; height: 400px; background: url(/newsletter/202201/image/main/mainTop_img.png) no-repeat left top;}
	div#headerWrap ul.viewMore{margin: 27px 0 0;}
		li.news{width: 170px;}
		li.news span{display:block; vertical-align: top; font-size: 14px;}
		li.news a{font-size: 14px;display:block; vertical-align: bottom; padding: 7px 25px; color: #fff; font-weight: 400; border-radius: 20px; text-decoration: none; margin-top: 9px; 
		background: #0e799d url(/newsletter/202201/image/main/newsArr.png) no-repeat right center;}


	div.main div.contents{width: 960px; margin: 0 auto; padding: 0; background: #fff url(/newsletter/202201/image/main/news_Conbg.png) no-repeat bottom right;}
	div.main div.contents::after{content:""; display:block; clear:both;}
	div.main div.contents div.colCon{width: 320px; height: 1600px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; float:left; box-sizing: border-box; overflow: hidden;}
	div.main div.contents div.colCon:nth-child(2){border-left: 1px solid #ccc;}

	div.main div.article {border-bottom: 1px solid #ccc;color: #333;}
	div.main div.article1 {border-bottom: 1px solid #ccc;color: #333;}
	div.main div.article.noLink {padding: 45px 15px 25px;background: none;}
	div.main div.article:last-child{border-bottom: 0 none; padding-bottom: 50px;}
	div.main div.article1:last-child{border-bottom: 0 none; padding-bottom: 50px;}

	div.main div.article a {display: block;text-decoration: none; padding: 45px 15px 25px;color: #333;background: url('/newsletter/202201/image/main/news_moreBt.png') right top no-repeat;}
	div.main div.article span {display: block;font-size: 14px; text-align: left; line-height: 1.5em;margin-top: 10px;}

	div.main div.article1 a {display: block;text-decoration: none; padding: 45px 15px 25px;color: #333;}
	div.main div.article1 span {display: block;font-size: 14px; text-align: left; line-height: 1.5em;margin-top: 10px;}

	div.main .pointTit{font-size: 16px !important; margin: 30px 0 20px 0;}
	div.main .pointTit:first-child{margin-top: 0;}



#footerWrap{width: 100%; background-color: #4f4f4f; height: 65px; padding: 30px 0;}
#footerWrap div{width: 960px; margin: 0 auto; color: #d3d3d3;}
#footerWrap div ul{overflow: hidden;float:left; margin-left: 65px;}

.pcOnly{display:block !important;}
.mobileOnly{display:none !important;}
}

ul.unlistNum li{margin-left: 20px; text-indent: -13px; margin-bottom: 5px;}
.more{position:absolute; top: 0; right: 0; margin: 0 !important; padding: 0;}
.more a{display:inline-block;}
.pointTit{color: #ff9800; font-weight: bold !important; font-size: 18px;}




/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 메인페이지 및 콘텐츠 기본 틀 관련 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */