@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700');


 /* 사이트 공통 CSS */
/* default font-family */
body,
div.wrapper,
div.popupWrap,
input[type='text'],
input[type='password'],
input[type='file'],
input[type='submit'],
input[type='button'],
input[type='reset'],
select,
a,
textarea,
button {font-family: 'NotoSansKR Regular', sans-serif;}






/* ========================================================================================================== */
/* ================================================== 레이아웃 ================================================== */
/* ========================================================================================================== */


div.wrapper {overflow: hidden; position: relative; font-family: 'NotoSansKR Regular', sans-serif; min-width: 320px;}
div.wrapper ul li, div.wrapper ol li{list-style:none;}
div.wrapper a {text-decoration: none; font-family: 'NotoSansKR Regular', sans-serif;}





div#headerWrap {z-index: 5; position: absolute; top:0; left:0; width: 100%;}
div#headerWrap > div{margin: 0 auto;}
div#headerWrap > div {position: relative;}
div#headerWrap > div h1 {float: left;}

div.gnbWrap {z-index: 3;position: fixed; top:0; background-color: rgba(0,0,0, 0.5); height: 100%; text-align: right; overflow-y: auto;}
	ul#gnb {position: absolute; top:0; right:0; font-size: 0; background-color: #fff;}
	ul#gnb > li {position: relative; text-align: left; border-bottom: 1px solid #dedede; background-color: #fff;}
	ul#gnb > li :before {content:""; display:block; position: absolute; background-color: #3b3b3b; border-radius: 50%;}
	ul#gnb > li > a {display:block; color: #282828; font-weight: 500;}

ul.innerGnb {font-size: 0; overflow-y: auto; background-color: #fff; border-top: 1px solid #dedede; background-color: #f7f7f7; display:none;}
	ul.innerGnb > li {border-bottom: 1px solid #dedede;}
	ul.innerGnb > li:last-child {border-bottom: 0 none;}
	ul.innerGnb > li a {display:block; color: #282828;}

p.closeGnb {position: absolute; top:0; right:0; background-color: #4a669e; text-align: right;}
	p.closeGnb * {display:inline-block;}

ul.headerUtil {z-index: 1; font-size: 0;}
	ul.headerUtil li {font-size: 12px; display:inline-block;}
	ul.headerUtil li:first-child {margin-left: 0;}
	ul.headerUtil li a {display:block;}
	ul.headerUtil li a img {display:block;}


div.titArea {text-align: center;background-color: #fff;}
	div.titArea h2 {padding: 105px 0 83px;}
	div.titArea h2 a {display:block;}
	div.titArea h2 img {display:block; margin:  0 auto;}

	div.titArea div.pubInfo {;margin: 0;padding: 19px 0 18px;background-color: #4a669e;}
	div.titArea div.pubInfo img{display: block;margin: 0 auto;}


div#footerWrap {position: relative;}
	div#footerWrap > div {margin: 0 auto; background-color: #46484c; color: #b9b9b9; font-weight: 400;}
	div#footerWrap > div ul.contact {font-size: 0; overflow: hidden;}
	div#footerWrap > div ul.contact li {display:inline-block;}
	div#footerWrap > div ul.contact li::after {content:"/"; display:inline-block; margin: 0 5px;}
	div#footerWrap > div ul.contact li:last-child::after {display:none;}

div#container {position: relative;background-color: #e9ecf1;}
	div#container::after {content:""; display:block; clear: both;}
	div#container div.contents {background-color: #fff; border-radius: 5px; min-height: 300px;}
	div#container div.contents *:first-child {margin-top: 0;}


@media all and (min-width: 721px) {
	
div#headerWrap > div{width: 960px;}
div#headerWrap > div h1 {padding: 35px 0 0 25px;}

div.gnbWrap {left:-200%; width: 960px; padding-top: 85px;}
div.gnbWrap.open {left:50%; margin: 0 0 0 -480px;}
	ul#gnb {width: calc(100% - 120px); height: calc(100% - 85px); padding-top: 85px;}	
	ul#gnb > li :before {top:33px; left:11px; width: 8px; height: 8px;}
	ul#gnb > li > a {font-size: 15px; padding: 23px 0 24px 30px; font-size: 18px;}

	ul.innerGnb > li a {font-size: 18px; padding: 23px 0 24px 30px;}

p.closeGnb {width: calc(100% - 120px); padding: 28px 0 28px;}
p.closeGnb a{margin-right: 25px;}

ul.headerUtil {position: absolute; top:35px; right:25px;}
ul.headerUtil li {margin-left: 10px;}

div#footerWrap > div {width: 910px; margin: 0 auto; padding: 15px 25px;}
	div#footerWrap > div ul.contact {margin: 2px 0;}
	div#footerWrap > div ul.contact li {display:inline-block;}

div#container {padding-bottom: 40px; width: 960px; margin: 0 auto; }
	div#container div.contents {margin: 40px 40px 0 40px; padding: 40px 40px 80px;}



}

@media all and (max-width: 720px) {
div#headerWrap > div {overflow: hidden; width: 100%;}
div#headerWrap > div h1 {padding: 10px 0 10px 10px; width: 150px;}

div.gnbWrap {width: 100%; left:-100%; padding-top: 50px;}
div.gnbWrap.open {left:0;}
	ul#gnb {width: calc(100% - 60px); height: calc(100% - 50px); padding-top: 50px;}	
	ul#gnb > li :before {top:23px; left:10px; width: 5px; height: 5px;}
	ul#gnb > li > a {padding: 15px 0 16px 25px; font-size: 13px;}

	ul.innerGnb > li a {font-size: 13px; padding: 12px 0 13px 20px;}

p.closeGnb {width: calc(100% - 60px); padding: 15px 0 16px; text-align: right;}
div#headerWrap p.closeGnb a {margin-right: 20px; width: 19px; display:inline-block;}
p.closeGnb a img {display:inline-block; width: 100%;}

ul.headerUtil {float: right; padding: 15px 10px 16px;}
ul.headerUtil li {margin-left: 5px;}
ul.headerUtil li a img {width: auto; height: 19px;}

div.titArea {background-color: #fff;}
	div.titArea h2 {padding: 60px 0 30px;font-size: 14px;}
	div.titArea h2 img {display:block; width: 85%;}
	div.titArea div.pubInfo {padding: 8px 0 7px;}
	div.titArea div.pubInfo img {width: 85%;}

 
div#footerWrap > div {font-size: 13px; padding: 10px;}
	div#footerWrap > div ul.contact {margin: 2px 0;}
	div#footerWrap > div ul.contact li {display:inline-block; font-size: 13px;}


div#container {position: relative;padding-bottom: 10px; background-image: none;}
	div#container div.contents {position: relative; margin: 10px 10px 0 10px; padding: 10px 10px 10px;}


}


.subTit {background: url(/webzine/image/sub/subTit02.png) no-repeat left center; font-size: 24px; font-family: 'notosanskr medium',sans-serif; color: #252525; margin: 50px 0 30px; font-weight: 400; padding-left: 40px;}
.subTit span {font-weight:300 !important;font-size:20px;color:#252525;}

ul.mainQuick li a {display:block;}
ul.mainQuick li a img {display:block;}


@media all and (min-width: 721px) {
div#container.main {background-color: #e9ecf1;}
div#container.main div.contents {background-color: transparent; position: relative;}

div.main {}
div#container.main div.contents {padding: 0;}
div.main ul {position: relative; font-size: 0; overflow: hidden;}
ul.mainQuick:after {display: block;clear: both;height: 0;line-height: 0;font-size: 0;content: '';}
ul.mainQuick li {float: left;}

ul.mainQuick li:nth-child(3),
ul.mainQuick li:nth-child(5),
ul.mainQuick li:nth-child(6){margin-top: -30px;}

ul.mainQuick li:nth-child(7),
ul.mainQuick li:nth-child(8) {margin-top: -76px;}
ul.mainQuick li:nth-child(9) {margin-top: -34px;}

ul.mainQuick li:nth-child(10),
ul.mainQuick li:nth-child(11) {margin-top: -50px;}
ul.mainQuick li:nth-child(12) {margin-top: -33px;} 

ul.mainQuick li:nth-child(2),
ul.mainQuick li:nth-child(5),
ul.mainQuick li:nth-child(6),
ul.mainQuick li:nth-child(8),
ul.mainQuick li:nth-child(9),
ul.mainQuick li:nth-child(11),
ul.mainQuick li:nth-child(12){margin-left: 14px;}

ul.bnrZone {margin-top: 14px;}
ul.bnrZone li {display: inline-block;vertical-align: top;width: 431px;min-height: 73px;border: 1px solid #dedede;background-color: #fff;}
ul.bnrZone li a, ul.bnrZone li img {display: block;}
ul.bnrZone li:first-child {border: 0 none;margin-right: 14px;}

	.pcOnly {display:block !important;}
	.mobileOnly {display:none !important;}
}
@media all and (max-width: 720px) {
div#container.main div.contents {background-color: transparent; position: relative;}
div.main ul {font-size: 0; overflow: hidden; margin-bottom: 20px;}
ul.mainQuick:after {display: block;clear: both;height: 0;line-height: 0;font-size: 0;content: '';}
ul.mainQuick li {float: left;width: calc(50% - 5px);}
ul.mainQuick li:nth-child(2) ~ li {margin-top: 10px;}

ul.mainQuick li:nth-child(5),
ul.mainQuick li:nth-child(7),
ul.mainQuick li:nth-child(10) {width: 100%;}

ul.mainQuick li:nth-child(2),
ul.mainQuick li:nth-child(4),
ul.mainQuick li:nth-child(9),
ul.mainQuick li:nth-child(12) {float: right;}


ul.bnrZone {display: none;}
/* ul.bnrZone li {display: inline-block;vertical-align: top;width: calc(50% - 7px);min-height: 50px;border: 1px solid #dedede;background-color: #fff;box-sizing:border-box;}
ul.bnrZone li a, ul.bnrZone li img {display: block;}
ul.bnrZone li img {height: 50px;}
ul.bnrZone li:first-child {border: 0 none;margin-right: 14px;} */
	
	.pcOnly {display:none !important;}
	.mobileOnly {display:block !important;}
}



/* 컨텐츠 */
div.contents p {margin-bottom: 15px;color: #3d3d3d;font-size: 15px;line-height: 26px;font-weight: normal;font-family: 'NotoSansKR Regular', sans-serif;}

div.intro {position: relative; padding: 45px 0 0 155px; margin-bottom: 20px;}
	div.intro strong {display:block; font-size: 28px; color: #4a669e; font-family: 'notosanskr medium', sans-serif; font-weight: 200; margin-bottom: 5px;}
	div.intro span {font-size: 20px; color: #898989;}
	div.intro img {display:block; position: absolute; top:0; left:0;}

div.intro + div {color: #3d3d3d; line-height: 26px; text-align: justify; font-weight: 400;}
div.intro + div > p{margin-bottom: 10px;}

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

div.intro {padding: 45px 0 0 155px; margin-bottom: 20px;}
	div.intro strong {font-size: 28px; color: #4a669e; margin-bottom: 5px;}
	div.intro span {font-size: 20px;}

div.intro + div {font-size: 16px;}

}

@media all and (max-width: 720px) {

div.contents p {margin-bottom: 5px;color: #3d3d3d;font-size: 14px;line-height: 23px;font-weight: normal;font-family: 'NotoSansKR Regular', sans-serif;}

div.intro {padding: 32px 0 0 90px; margin-bottom: 15px;}
	div.intro strong {font-size: 13px; margin-bottom: 5px;}
	div.intro span {font-size: 13px;}
	div.intro img {width: 80px;}

div.intro + div {font-size: 14px;}

}


/* 메인페이지 버튼추가 */
p.eduBtn {text-align: right; position: absolute;}
p.eduBtn a {display:block;}
p.eduBtn a img {display:block;}

@media all and (min-width: 721px) {
	p.eduBtn {top:280px; right:20px;}
}

@media all and (max-width: 720px) {
	p.eduBtn {top:190px; right:10px;}
	p.eduBtn img {height: 34px;}
}