@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
body { font-family: 'Noto Sans KR','Apple SD Gothic Neo', Tahoma, Times New Roman, Arial, Helvetica, sans-serif; font-size:14px; color:#111; line-height:1; letter-spacing:0; min-width:1100px; position:relative; }
ol, ul { list-style:none; }
blockquote, q {	quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content:none; }
table {	border-collapse:collapse; border-spacing:0; }
legend { display:none; }
em, address { font-style:normal; font-weight:normal; }
button { cursor:pointer; border:0; }
img { vertical-align:top; border:0; }
a { color:#111; text-decoration:none; }
a:active, a:focus, a:link, a:visited { text-decoration:none; }
a:hover { text-decoration:underline; }
a:hover,a:active:hover, a:focus:hover, a:link:hover, a:visited:hover { text-decoration:underline; }
.hide { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }
.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 89; }
.overlay.active { display: block; }
body.blocking { overflow: hidden; }

#wrap { background-color: #eee; }

.inner { width: 1250px; margin:0 auto; }

.header { position: relative; height: 177px; background-color: #fff; border-bottom: 1px solid #e9e9e9; z-index: 90; }
.header .logo_area { height: 125px; border-bottom: 3px solid #1b8c00; }
.header .logo_area .inner { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
.header .logo_area .family_site { position: absolute; left: 0; top: 35px; display: flex; font-family: 'Noto Serif KR', serif; }
.header .logo_area .family_site li a { display: block; text-align: center; }
.header .logo_area .family_site li .tit { display: block; font-size: 14px; font-weight: 800; letter-spacing: -0.17px; }
.header .logo_area .family_site li:nth-child(1) .tit { margin-bottom: 5px; }
.header .logo_area .family_site li:nth-child(2) .tit { margin-bottom: 8px; }
.header .logo_area .family_site li:nth-child(1) .fs_logo { display: block; margin-top: 8px; }
.header .logo_area .family_site li:nth-child(1) .fs_logo img { margin-left: -7px; }
.header .logo_area .family_site li:nth-child(2) .fs_logo { display: block; margin-top: 12px; }
.header .logo_area .family_site li + li { position: relative; padding-left: 20px; margin-left: 19px; }
.header .logo_area .family_site li + li::before { content: ""; clear: both; position: absolute; left: 0; top: 8px; display: block; width: 1px; height: 40px; background-color: #ddd; }
.header .logo_area .logo { text-align: center; margin-top: 3px; }
.header .logo_area .logo a { display: block; }
.header .logo_area .logo span { display: block; font-size: 13px; font-weight: 500; color: #1b8c00; letter-spacing: -0.12px; margin-top: 12px; }
.header .logo_area .sns_area { position: absolute; right: 0; bottom: 15px; display: flex; }
.header .logo_area .sns_area li { width: 44px; height: 44px; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 50%; }
.header .logo_area .sns_area li a { display: block; width: 100%; height: 100%; }
.header .logo_area .sns_area li.facebook a { background: url(../img/icon_facebook.png) no-repeat; background-position: center; }
.header .logo_area .sns_area li.youtube { margin-left: 5px; }
.header .logo_area .sns_area li.youtube a { background: url(../img/icon_youtube.png) no-repeat; background-position: center; }
.header .logo_area .date { position: absolute; right: 0; top: 15px; font-size: 13px; color: #333; letter-spacing: -0.05px; }
.header .nav_area { width: 1250px; margin:0 auto; display: flex; justify-content: space-between; }
.header .nav_area nav { width: 1150px; flex-shrink: 0; }
.header .nav_area nav ul { display: flex; justify-content: space-between; }
.header .nav_area nav ul li a { font-size: 17px; line-height: 49px; font-weight: 600; }
.header .nav_area nav ul li a:hover { text-decoration: none; color: #1b8c00; }
.header .nav_area nav ul li.on a { color: #1b8c00; }
.header .nav_area nav ul li.aipick a { color: #ff2002; }
.header .nav_area .btn_sch { width: 49px; background: url(../img/icon_search.png) no-repeat; background-position: center; }
.header .nav_area .btn_sch.on { background: url(../img/icon_close.png) no-repeat; background-position: center; }
.header .lay_sch { position: absolute; bottom: -201px; width: 100%; height: 199px; background-color: #fff; border-bottom: 1px solid #e9e9e9; z-index: 91; text-align: center; display: none; }
.header .lay_sch.active { display: block; }
.header .lay_sch.active2 { display: block; position: fixed; bottom: unset; top:79px; }
.header .lay_sch .form_sch { width: 600px; height: 60px; margin: 50px auto 0; }
.header .lay_sch .form_sch form { display: flex; }
.header .lay_sch .form_sch .search_text { width: 470px; height: 60px; font-size: 20px; border:01px solid #ccc; border-right: 0; box-sizing: border-box; border-radius: 10px 0 0 10px; padding:0 0 0 20px; }
.header .lay_sch .form_sch .search_text:focus { outline: none; }
.header .lay_sch .form_sch .search_text::placeholder { color: #aaa; }
.header .lay_sch .form_sch .btn_search { width: 130px; height: 60px; background-color: #1b8c00; font-size: 18px; color: #fff; border-radius: 0 10px 10px 0; }
.header .lay_sch .tag_lst { margin-top: 30px; display: flex; justify-content: center; }
.header .lay_sch .tag_lst a { font-size: 16px; color: #1b8c00; }
.header .lay_sch .tag_lst a + a { margin-left: 30px; }

.footer { text-align: center; border-top: 1px solid #e0e0e0; background-color: #fff; margin-top: 150px; padding: 29px 0 28px; }
.footer .address { font-size: 14px; letter-spacing: -0.1px; }
.footer .mail { font-size: 14px; margin-top: 16px; }
.footer .logo { margin-top: 22px; }
.footer .copyright { font-size: 13px; color: #999; margin-top: 24px; letter-spacing: -0.12px; }
.footer .copyright strong { color: #111; }

.thumb { position: relative; height: auto; box-sizing: border-box; overflow: hidden; display: block; width: 100%; border-radius: 5px; }
.thumb img { width: 100%; height: 100%; position: absolute; top: 0; left: 50%; bottom: 0; transform: translate(-50%, 0); transition: 0.5s; object-fit: cover; }
.thumb:after { clear: both; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #000; opacity: 0.1; box-sizing: border-box; border-radius: 5px; }
.tit { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #111; font-weight: 500; }
.desc { overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; line-height: 22px; color: #444; letter-spacing: -0.2px; }
.box_st { background-color: #fff; border-radius: 10px; box-sizing: border-box; padding: 30px; }