@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);/* 20210311 */

@font-face {
  font-family: "NanumSquare";
  font-style: normal;
  font-weight: 400;
  src: local("../font/NanumSquareR"), /* computer */
    url("../font/NanumSquareR.eot"), /* IE9 Compat Modes */
    url("../font/NanumSquareR.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/NanumSquareR.woff2") format("woff2"), /* Modern Browsers */
    url("../font/NanumSquareR.woff") format("woff"), /* Modern Browsers */
    url("../font/NanumSquareR.ttf") format("truetype"); /* Safari, Android, iOS */
}

@font-face {
  font-family: "ynsjg";
  font-style: normal;
  font-weight: 300;
  src: local("../font/ynsjg3"), /* computer */
    url("../font/ynsjg3.eot"), /* IE9 Compat Modes */
    url("../font/ynsjg3.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/ynsjg3.woff2") format("woff2"), /* Modern Browsers */
    url("../font/ynsjg3.woff") format("woff"), /* Modern Browsers */
    url("../font/ynsjg3.ttf") format("truetype"); /* Safari, Android, iOS */
}

@font-face {
  font-family: "ynsjg";
  font-style: normal;
  font-weight: 500;
  src: local("../font/ynsjg5"), /* computer */
    url("../font/ynsjg5.eot"), /* IE9 Compat Modes */
    url("../font/ynsjg5.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../font/ynsjg5.woff2") format("woff2"), /* Modern Browsers */
    url("../font/ynsjg5.woff") format("woff"), /* Modern Browsers */
    url("../font/ynsjg5.ttf") format("truetype"); /* Safari, Android, iOS */
}

body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,fieldset,caption,label,input,textarea,button,select,iframe,object,header,footer,nav,hgroup,section,article,aside{margin: 0;padding: 0;}
img,a,span,abbr,address,pre,code,del,em,strong,sub,sup{margin: 0;padding: 0;}
h1,h2,h3,h4,h5,h6{font-weight: 800;}
*{font-family: 'NanumSquare', sans-serif;font-weight: 400;word-break: keep-all;}
i{font-style: normal;}

body,textarea{}
body,input,textarea,select,button,table,th,td{font-style: normal; font-variant: normal;}
body{font-size: 15px;color: #666;}

input[type="file"], input[type="text"], input[type="password"], select{border: 1px solid #ced4da;color: #666;}
input,textarea,select,button {font-size: 15px;vertical-align: middle;}
legend {margin: 0;padding: 0;display: none;}
pre{white-space: pre;white-space: pre-wrap;word-wrap: break-word;}
textarea{height:initial;resize: none;}

img{border: 0 none;vertical-align: middle;}
ul,ol,li,dl,dt,dd{list-style: none;padding:0;}
a{text-decoration: none;color: #666;display: inline-block;transition: all 0.3s ease;}
a:link {color:#666; text-decoration:none; font-size:15px;}

table {border-collapse: separate;border-collapse: collapse;width: 100%;position: relative;}
table caption{width: 0;height: 0;font-size: 15px;overflow: hidden;text-indent: -999em;}

br{font-size:0;}/* 20210311 */

.hidden {
	overflow: hidden;
	position: absolute;
	width: 0;
	height: 0;
	top: -9999px;
	left: -9999px;
	line-height: 0;
	text-indent: -999em;
	margin: 0;
	padding: 0;
	background: none;
	line-height: 0;
	border: none;
}
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clear{clear: both;height: 0;}

.area{width: calc(100% - 40px);max-width: 1180px;margin: 0 auto;}

.header-top{padding: 23px 0 16px;}
#logo{float: left;margin-left: 2px;display: inline-block;}
#logo a{display: block;}
.ht-btn{margin-top: 15px;float: right;}
.ht-btn a{font-family: "Noto Sans KR", sans-serif;font-weight: 300;float: left;font-size: 14px;color: #515151;padding: 0 15px;background: #f1f1f1;border-radius: 13px;height: 35px;line-height: 35px;}
.ht-btn a:first-child{margin-right: 4px;}
.ht-btn a img{margin-right: -5px;margin-top: -5px;}
.header-bottom{background: #17414b;position: relative;}
.menu-area{float: left;width: calc(100% - 208px);}
.menu-area{float: left;width: calc(100% - 208px);}
.menu-beapth1 > li{width:calc(100% / 4);line-height:65px;position: relative;float: left;text-align:center;}
.menu-beapth1 > li > a{font-family: "Noto Sans KR", sans-serif;text-align: center;font-weight: 500;display:inline-block;color: #fff;padding: 0 15px;line-height: 1;font-size: 18px;vertical-align:middle;}
.menu-beapth1 > li:first-child > a{padding-left: 0;}
.menu-beapth1 > li:first-child > .menu-beapth2{padding-left: 0;}
.menu-beapth2{display: none;height: 270px;box-sizing: border-box;z-index: 6;position: absolute;left: 0;top: 100%;width: 100%;padding: 20px 10px 0;}
.menu-beapth2:after{position: absolute;content: '';width: 1px;left: 0;bottom: 0;height: calc(100% - 20px);background: #efefef;}
.menu-beapth1 > li:first-child .menu-beapth2:after{display: none;}
.menu-beapth2 li{margin-top: 10px;line-height:1;text-align:left;}
.menu-beapth2 li > a{line-height: 18px;position: relative;font-size: 14px;padding-left: 10px;}
.menu-beapth2 li > a:hover{color: #538490;font-weight: 700;}
.menu-beapth2 li > a:hover:after{position: absolute;content: '';width: 4px;height: 4px;background: #538490;left: 0;top: 6px;}
.menu-beapth2 li:first-child{margin-top: 0;}

#all-menu-btn{background: #102e34;float: right;width: 208px;height: 65px;text-align: center;line-height: 65px;color: #fff;font-size: 17px;display: inline-block;}
#all-menu-btn > span{display: inline-block;margin-left: 17px;font-family: "Noto Sans KR", sans-serif;font-weight: 500;color: #fff;}

.menu-bg{display: none;background: #fff;border-bottom: 2px solid #17414b;z-index: 5;width: 100%;position: absolute;left: 0;top: 100%;}
.menu-bg .area{background: url(../img/gnb_bg.png) no-repeat right bottom;height: 270px;}

.footer-top{background: #575b60;padding: 26px 0;color: #fff;font-size: 17px;}
.footer-bottom{padding: 26px 0;background: #404347;color: #fff;font-size: 15px;}
#footer > div > div > p{padding: 0 5px;color: #fff;}

.logos-banner{background: #fff;border-top: 1px solid #e6e6e6;}
.logos-banner .area{border-left: 1px solid #e6e6e6;padding: 20px 0;border-right: 1px solid #e6e6e6;}
.logos-banner .tit{height: 60px;line-height: 60px;float: left;width: 256px;font-size: 18px;text-align: center;color: #1f5f6d;font-family: "ynsjg";font-weight: 500;}
.logos-banner .lb-con{float: left;width: calc(100% - 396px);position: relative;}
.logos-banner .control-btns{margin-top: 15px;position: absolute;top: 0;width: 97px;left: 100%;margin-left: 18px;}
.logos-banner .swiper-button-next, .logos-banner .swiper-button-prev{position: static;margin: 0 !important;width: 29px;height: 29px;}
.logos-banner .swiper-button-next:after, .logos-banner .swiper-button-prev:after{display: none;}
.logos-banner .control-btns > *{margin-left: 5px !important;width: 29px;height: 29px;display: inline-block;float: left;}
.logos-banner .control-btns > a:first-child{margin-left: 0 !important;}
.logos-banner .swiper-slide img{max-width: 100%;}
.media-menu{display: none;}
.media-menu .mm-btns{border-bottom: 1px solid rgb(71, 81, 95);padding-left: 10px;display: table;width: 100%;height: 99px;background-color: rgba(13, 26, 44, 0.9);}
.media-menu .mm-btns p{display: table-cell;vertical-align: middle;}
.media-menu .mm-btns p a{height: 15px;line-height: 15px;display: inline-block;color: #fff;font-size: 13px;float: left;margin: 0 10px;position: relative;}
.media-menu .mm-btns p a:after{position: absolute;content: '';left: -10px;background: #fff;top: 1px;height: 13px;width: 1px;}
.media-menu .mm-btns p a:first-child:after{display: none;}
.media-menu .mm-con{overflow-y: auto;height: calc(100vh - 100px);background-color: rgba(13, 26, 44, 0.9);}
.media-menu .mm-deapth > li{width: 100%;border-bottom: 1px solid rgb(71, 81, 95);}
.media-menu .mm-deapth > li > a{display: block;color: #fff;font-size: 18px;position: relative;font-weight: 400;text-align: left;padding: 14px 20px;padding-left: 34px;}
.media-menu .mm-deapth > li > a:after{left: 20px;top: 19px;content: '';position: absolute;width: 4px;height: 16px;background-color: #4e94ea;}
.mm-deapth2, .mm-deapth3{display: none;}
.mm-deapth2 > li > a{display: block;color: #fff;font-size: 16px;font-weight: 300;background-color: rgba(43, 101, 170, 0.7);padding: 10px 5px 11px 35px;border-bottom: 1px solid rgba(65, 117, 179, 0.65);}
.mm-deapth2 > li > a.has-sub{padding-right: 45px;position: relative;}
.mm-deapth2 > li > a.has-sub:after, .mm-deapth2 > li > a.has-sub:before{content: '';display: block;background-color: #ffffff;position: absolute;}
.mm-deapth2 > li > a.has-sub:before{top: 22px;right: 22px;width: 16px;height: 2px;}
.mm-deapth2 > li > a.has-sub:after{top: 15px;right: 29px;width: 2px;height: 16px;transition: all 0.2s ease;}
.mm-deapth2 > li > a.has-sub.on:after{transform: rotate(90deg);}
.mm-deapth3{background-color: #d6e5ff;padding: 4px 38px;}
.mm-deapth3 > li{margin: 7px 0;}
.mm-deapth3 > li > a{color: #535353;position: relative;padding-left: 10px;font-weight: 400;}
.mm-deapth3 > li > a:after{position: absolute;content: '';width: 3px;left: 0;top: 9px;height: 3px;background: #535353;}
.mm-deapth4{padding: 3px 10px;}
.mm-deapth4 > li > a{position: relative;display: block;padding-left: 10px;}
.mm-deapth4 > li > a:before{content: '';position: absolute;width: 6px;height: 1px;left: 0;top: 10px;background: #535353;}
.mm-deapth4 > li > a:after{content: '';position: absolute;width: 1px;height: 6px;left: 0;top: 4px;background: #535353;}

#share > img{display: none;}
#share > img:first-child{display: inline-block;}
#share.on > img{display: none;}
#share.on > img:last-child{display: inline-block;}

.share-box{display: none;text-align: left;position: absolute;right: 0px;top: 100%;width: 320px;padding: 10px 15px;border: 1px solid #cecece;background: #fff;}
.share-box > p > a{position: absolute;display: inline-block;right: 10px;top: 10px;}
.share-box dl{display: table;width: 100%;}
.share-box dl:last-child{margin-top: 10px;}
.share-box dl > *{display: table-cell;vertical-align: middle;}
.share-box dt{width: 20%;font-size: 13px;font-weight: 700;color: #353535 !important;}
.share-box .btns a{display: inline-block;margin: 0 1px;}
.share-box .link > *{float: left;}
.share-box dd input{width: calc(80% - 10px);margin-right: 10px;box-sizing: border-box;height: 29px;line-height: 29px;border: 1px solid #cecece;text-indent: 5px;color: #666;background: #f6f6f6;}
.share-box .link a{font-weight: 700;display: block;width: 20%;height: 29px;padding: 0 5px;background: #707070;line-height: 29px;text-align: center;color: #fff;}
.share-box .link a:hover{color: #ffcc00;}

@media screen and (max-width: 1024px){
	.ht-btn, .menu-area{display: none;}
	#header{position: fixed;border-bottom: 2px solid #1f4c54;top: 0;width: 100%;background: #fff;z-index: 12;}
	#all-menu-btn{z-index: 20;width: 60px;height: 40px;right: 20px;top: calc(50% - 20px);position: absolute;line-height: 40px;border-radius: 18px;text-align: center;}
	#all-menu-btn.on{background: #226d7b;}
	#all-menu-btn > span{display: none;}
	.header-bottom{position: static;}

	.logos-banner .area{border: 0;position: relative;}
	.logos-banner .tit{width: 200px;padding-bottom: 40px;height: auto;line-height: normal;}
	.logos-banner .control-btns{left: 55px;top: inherit;bottom: 20px;margin: 0;}
	.logos-banner .lb-con{position: static;}
	.logos-banner .lb-con{width: calc(100% - 200px);}

	.footer-top, .footer-bottom{padding: 10px 0;}
	#footer > div > div > p{padding: 0;}
	#content{padding-top: 102px;}
	.media-menu{display: block;position: fixed;height: 100vh;width: 100%;max-width: 500px;top: 0;right: -500px;}
	
}
@media screen and (max-width: 768px){
	.logos-banner .tit{text-align: left;width: 100%;padding-bottom: 0;}
	.logos-banner .lb-con{width: 100%;margin-top: 20px;}
	.logos-banner .control-btns{left: inherit;right: 0;top: 15px;bottom: inherit;}
	.logos-banner .swiper-slide{text-align: center;}
	#logo img{width: 250px;}
	#content{padding-top: 80px;}
	.media-menu .mm-btns{height: 77px;}
	.media-menu .mm-con{height: calc(100vh - 78px);}
}
@media screen and (max-width: 500px){
	.media-menu .mm-deapth > li > a{padding: 14px 15px 14px 20px;}
	.media-menu .mm-deapth > li > a:after{left: 10px;}
	.mm-deapth2 > li > a{padding: 10px 5px 11px 20px;}
	.mm-deapth3{padding: 4px 20px;}
	.media-menu .mm-con{height: calc(100vh - 70px);}
	#logo{margin-left: -10px;height: 40px;line-height: 40px;}
	#all-menu-btn{right: 10px;}
}
@media screen and (max-width:  425px){
	.media-menu .mm-btns p a{float: none;display: block;}
	.media-menu .mm-btns p a:first-child:after{display: block;}
	.sub-title-area > .area{display: none !important;}
	#logo{max-width: calc(100% - 65px);}
	#logo img{max-width: 100%;}
}