@charset 'utf-8';
@import url(/css/nanumBarunGothic.css);

html, body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt, img, a, form, fieldset { font-family:'Nanum Barun Gothic', san-serif; }

input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0px 9999px white; }

header { width:1000px; margin:0 auto; border-top:2px solid #1da1f2; background:#fff; margin-bottom:15px; }
header > [h-area] > div { width:100%; height:100%; margin:0 auto; }

/* 헤더 - (상단) 상단메뉴 */
header > [h-area=top] { border-bottom:1px solid #eee; height:44px; width:100%; margin:0 auto;}
header > [h-area=top] > div > ul { overflow:hidden; height:44px;} 
header > [h-area=top] > div > ul.left{width:78%; float:left; margin-left:2%;}
/* header > [h-area=top] > div > ul.right{width:18%; float:right; margin-left:2%;}  태그 창에 스타일 넣음 */
header > [h-area=top] > div > ul > li {float:left; text-align:center; margin:0 1%; height:44px; line-height:44px; }
header > [h-area=top] > div > ul > li[token] { width:1px; background:#ddd; margin:0 9px; }
header > [h-area=top] > div > ul > li > a { font-size:12px; color:#333; }
header > [h-area=top] > div > ul[align=right] > li > b {text-decoration: underline; color: #006a9a;}

/* 헤더 - (중간) 검색 */
header > [h-area=mid] { width:100%; margin:0 auto; height:180px; padding-top:5%;}
header > [h-area=mid] > div { width:100%; margin:0 auto; height:180px; /* padding-top:2%; justify-content:center; */ }
header > [h-area=mid] > div > a[logo] { display:block; width:18%; height:44px; background:url(/img/logo.png) no-repeat 0 0; margin:0 4%; float:left;}
header > [h-area=mid] > div > div[search] { width:50%; height:50px; position:relative; float:left;}

header > [h-area=mid] div[search] > form { position:relative; height:100%; border:5px solid #1da1f2; border-radius:50px; box-sizing:border-box; overflow:hidden; }
header > [h-area=mid] div[search] > form > input[name=stx] { width:100%; height:100%; border:0; padding:0 10px 0 15px; outline:none; box-sizing:border-box; }
header > [h-area=mid] div[search] > form > input[type=image] { position:absolute; top:0; bottom:0; right:10px; margin:auto 0; cursor:pointer; }
/* .currunt_air{position: relative; top:32%; right:6%; width:200px;}  */

/* 헤더 - (중간) 날씨 아이콘 */
.weather { width:22%; float:left; text-align:center;  }
.weather .currunt_air { padding-top:4%; }

/* 헤더 - (중간) 추천검색어 */
header > [h-area=mid] > div > div[search] > [recomm] { text-align:center; position:absolute; top:100%; left:0; right:0; margin-top:5%; padding-left:10%; }
header > [h-area=mid] [recomm] > strong { float:left; font-size:12px; color:#88aac1; font-weight:normal; margin-right:10px; }
header > [h-area=mid] [recomm] > ul { float:left; /* display:flex; justify-content:center; align-items:center; */ }
header > [h-area=mid] [recomm] > ul > li {float:left;}
header > [h-area=mid] [recomm] > ul > li[token] { width:1px; height:10px; background:#aaa; margin:0 8px; }
header > [h-area=mid] [recomm] > ul > li > a { color:#333; }


/* 헤더 - (중간) 간편검색 */
header > [h-area=mid] > div > div[search] > [btn=sSearch] { position:absolute; top:0; left:8px; bottom:0; margin:auto; display:flex; justify-content:center; align-items:center; background:#1da1f2; padding:0 8px; color:#fff; border-radius:50px; font-size:14px; font-weight:bold; height:34px; line-height:1; cursor:pointer; }

/* 헤더 - (하단) 메인메뉴 */
header > [h-area=bot] { width:100%; height:49px; border-top:1px solid #eee; border-bottom:1px solid #ccc; }
header > [h-area=bot] > div { /* justify-content:space-between; */ }
header > [h-area=bot] > div > ul { height:47px; float:left; }
header > [h-area=bot] > div > ul[align=left] { width:75%; position:relative; z-index:1000;}
header > [h-area=bot] > div > ul[align=right] { width:25%; }
header > [h-area=bot] > div > ul > li {float:left;}

header > [h-area=bot] > div > ul[align=left] > li { width:14%; height:47px; line-height:47px; padding:0 1%; text-align:center; position:relative; }
header > [h-area=bot] > div > ul[align=left] > li::before { content:''; display:block; position:absolute; left:0; bottom:0; right:0; height:0px; background:#fff; transition:height 0.1s ease-in-out; }
header > [h-area=bot] > div > ul[align=left] > li > a { font-size:1.1em; color:#333; letter-spacing:-0.07em; font-weight:bold; width:100%; height:100%; display:block; }

header > [h-area=bot] > div > ul[align=left] > li > ol { display:none; z-index:999; position:absolute; top:100%; left:0; width:140px; background:#fff; padding:10% 0; border:1px solid #e1e1e1; box-shadow:0 3px 3px rgba(0,0,0,0.2); }
header > [h-area=bot] > div > ul[align=left] > li > ol > li {  }
header > [h-area=bot] > div > ul[align=left] > li > ol > li > a { display:block; padding:4% 2%; font-size:1.1em; letter-spacing:-0.05em; color:#666; line-height:1.4; transition:color 0.1s ease-in-out; }
header > [h-area=bot] > div > ul[align=left] > li > ol > li > a:hover { color:#1da1f2; background:#eee; }

header > [h-area=bot] > div > ul[align=left] > li:hover > a { color:#1da1f2; }
header > [h-area=bot] > div > ul[align=left] > li:hover::before { height:3px; background:#1da1f2; }
header > [h-area=bot] > div > ul[align=left] > li:hover > ol { display:block; }

header > [h-area=bot] > div > ul[align=right] > li[type=title] { width:22%; height:47px; line-height:47px; padding-top:2px; font-size:12px; color:#1da1f2; letter-spacing:-0.05em; text-align:center; }
header > [h-area=bot] > div > ul[align=right] > li[type=list] { width:78%; height:100%; overflow:hidden; position:relative; }

header > [h-area=bot] > div > ul[align=right] > li[type=list] .bx-wrapper { height:100%; }
header > [h-area=bot] > div > ul[align=right] > li[type=list] .bx-wrapper > .bx-viewport { height:100%; }
header > [h-area=bot] > div > ul[align=right] > li[type=list] ol { width:100%; height:100%; position:absolute; left:0; top:0; right:0; }
header > [h-area=bot] > div > ul[align=right] > li[type=list] ol > li { width:100%; height:100%; }
header > [h-area=bot] > div > ul[align=right] > li[type=list] ol > li > a { height:100%; line-height:49px; display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; word-wrap:normal; position:relative; text-align:left; }
header > [h-area=bot] > div > ul[align=right] > li[type=list] ol > li > a::before { content:''; display:block; position:absolute; left:0; bottom:0; right:0; height:0px; background:#1da1f2; transition:height 0.1s ease-in-out; }
header > [h-area=bot] > div > ul[align=right] > li[type=list] ol > li > a:hover::before { height:3px; }

.m_header {display:none;}
.m_header > [time] {display:none;}
/* ie10 hack */
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	header > [h-area=bot] > div > ul[align=left] > li { width:14.2857%; }
}*/

	/*태블릿 분기점, 해상도가 1024px이하이면*/
	@media screen and (max-width:1024px) {
		/* header > [h-area] > div {width:auto; } */
		header {width:100%;}

		header > [h-area] > div { width:100%; height:100%; padding:0 20px; margin:0 auto; }
		
		header > [h-area=top] > div > ul.left{ width:68%; }

		header > [h-area=bot] > div > ul[align=right] { display:none; }
		
		header > [h-area=mid] { padding-top:5%;}
		header > [h-area=mid] > div > a[logo] { width:22%; /* margin-right:0 2%; */}
		header > [h-area=mid] > div > div[search] { width:45%; }
		.weather { width:25%; margin-left:0; }

		.m_header {display:none;}
		.m_header > [time] {display:none;}

		header > [h-area=bot] > div > ul[align=left] { width:100%; }
		header > [h-area=bot] > div > ul[align=left] > li { width:14.28%; }
	}

	/*모바일 분기점, 해상도가 767px이하이면*/
	@media screen and (max-width:767px) {
		header {display:none;}

		.m_header {display:block; overflow:hidden; background:#fff;}
		.m_header >  [inner] {padding:20px 20px 0; }
		.m_header >  [inner] > [top] {overflow:hidden;}
		.m_header >  [inner] > [top] > h1 {float:left;}
		.m_header >  [inner] > [top] > h1::after {content:''; display:block; clear:both;}
		.m_header >  [inner] > [top] > h1 > a {display:block; width:110px; height:32px; background:url(/img/logo.png) no-repeat 0 0; background-size:110px;}
		.m_header >  [inner] > [top] > ul {float:right;}
		.m_header >  [inner] > [top] > ul::after {content:''; display:block; clear:both;}
		.m_header >  [inner] > [top] > ul > li {float:left; margin-left:10px; line-height:32px;}
		.m_header >  [inner] > [top] > ul > li[off] {line-height:}
		.m_header >  [inner] > [top] > ul > li > a {font-size:12px; font-weight:bold;}
		.m_header >  [inner] > [top] > ul > li > b {text-decoration:underline; color:#006a9a;}

		.m_header > [inner] > [mid] {position:relative; padding:15px 0 5px;}
		.m_header > [inner] > [mid] > form > #m_stx_auto { width:100%; height:35px; padding-left:10px; border:1px solid #5daed7; -webkit-appearance:none; -webkit-border-radius:0;}
		.m_header > [inner] > [mid] > form > button {position:absolute; right:7px; bottom:12px; width:22px; height:22px; background:#fff url(../img/btn_sch.png) no-repeat; outline:none; border:none;}
		.m_header > [inner] > [bot] { /* width:600px; */ }
		.m_header > [inner] > [bot] > ul {width:100%; padding-bottom:1%; overflow:hidden; line-height:30px;}
		.m_header > [inner] > [bot] > ul > li { /* width:14.28%; */ padding:1% 2%; text-align:center; float:left; font-size:1em; font-weight:bold; color:#333; position:relative;}
		.m_header > [inner] > [bot] > ul > li.on::after {content:''; display:block; width:100%; height:2px; background:#42abe1; position:absolute; bottom:0;}
		.m_header > [inner] > [bot] > ul::after {content:''; display:block; clear:both;}
		.m_header > [inner] > [bot] > ul > li > a {width:100%; height:100%; display:block;}

		.m_header > [time] {display:block; border-top:1px solid #ccc; background:#f1f0f0; height:35px; padding:10px 20px;}
		.m_header > [time] > h2 {font-size:13px; font-weight:bold; color:#ed1d2c; float:left;}
		.m_header > [time] > ul {float:left;}
		.m_header > [time] > ul > li {float:left; padding-left:20px;}
		.m_header > [time] > ul > li::after {content:''; display:block; clear:both;}
		.m_header > [time] > ul > li > a {font-size:13px; color:#333;} 
		.m_header > [time] > ul > li > a > b {padding-right:3px; color:#429cd6;} 
	}

	/*모바일 분기점, 해상도가 650px이하이면*/
	@media screen and (max-width:650px) {
		.m_header > [inner] > [bot] > ul > li { /* width:30%; */ }
	}

	/*모바일 분기점, 해상도가 420px이하이면*/
	@media screen and (max-width:420px) {
		.m_header > [top] [inner] > h1 > a {width:120px; height:35px; background-size:120px;}
		.m_header > [top] [inner] > ul > li {line-height: 1.6; max-width:90px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal;}
		.m_header > [top] [inner] > ul > li[after_login] {float:none;}

	/* 	20181116 text-overflow 수정
		.m_header > [time] > ul > li:last-child {max-width:90px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal;} */
	}

	@media screen and (max-width:360px) {
		.m_header > [time] {height:30px;}
		.m_header > [time] > ul > li {padding:0px 10px 0 0;padding-left:10px;}
	}