@charset "utf-8"; 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, 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%; font: inherit;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } html{font-size: 10px;} body { font-family:'Pretendard','맑은고딕',Arial,Helvetica,sans-serif; font-size: 1.4rem; color:#111; line-height:1; position:relative; letter-spacing: -0.5px; font-weight: 500; min-width: 1220px; } 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; background: transparent; font: inherit;padding:0;box-shadow:none;} 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:none; color: #666; } input{padding: 0; border: none;border-radius: 0; box-sizing: border-box; font-family: inherit; outline: none; } .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; } .inner { max-width: 1220px; margin:0 auto; display:flex; } .inner.inner2 { display: block; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 90; } .overlay.active { display: block; } body.blocking { overflow: hidden; } .thumb { position: relative; height: auto; box-sizing: border-box; overflow: hidden; display: block; } .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; } .thumb img { width: 100%; height: 100%; position: absolute; top: 0; left: 50%; bottom: 0; transform: translate(-50%, 0px); transition: 0.5s; object-fit: cover; } .thumb:hover img { transition: all 0.5s; transform: translate(-50%, 0px) scale(1.1); } .badge { display: inline-block; width: 40px; height: 22px; line-height: 22px; font-size: 13px; color: #fff; text-align: center; font-weight: 400; vertical-align: text-bottom; box-sizing: border-box; margin-right: 8px; } .badge.badge1 { background-color: #f93939; } .badge.badge2 { background-color: #20d0cc; } .badge.badge3 { color: #20d0cc; background-color: #fff; border: 1px solid #20d0cc; } .tit { display: block; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .s_tit { display: block; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .desc { display: block; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .date { display: block; font-size: 13px; color: #aaa; font-family: Roboto; } .secw h3 { font-size: 19px; font-weight: 500; } .secw h3 i { display: inline-block; width: 9px; height: 18px; margin-left: 7px; vertical-align: middle; overflow: hidden; text-indent: -99999px; background: url(../img/btn_more.png) no-repeat; background-size: 100% auto; } .secw .h3 { font-size: 19px; font-weight: 500; } .secw .h3 i { display: inline-block; width: 9px; height: 18px; margin-left: 7px; vertical-align: middle; overflow: hidden; text-indent: -99999px; background: url(../img/btn_more.png) no-repeat; background-size: 100% auto; } .tooltip { position: absolute; right: 0; top: 0; width: 16px; height: 16px; background: url(../img/ico_tooltip.png) no-repeat; overflow: hidden; text-indent: -99999px; } .ly_tooltip { position: absolute; right: 0; top: 26px; width: 270px; height: auto; font-size: 13px; font-weight: 500; line-height: 19px; box-sizing: border-box; padding: 14px 20px; background-color: #fff; border: 1px solid #20d0cc; box-shadow: 0px 0px 10px 5px rgb(0, 0, 0,.05); z-index: 1; display: none; } .ly_tooltip.on { display: block; } .header { position: relative; z-index: 93; background-color: #fff; border-bottom: 1px solid #ddd; } .header .inner { position: relative; height:60px; justify-content: space-between; } .header .logo { width: 105px; height: 23px; display:flex; align-self: center; } .header .logo a { display: block; width: 100%; height: 100%; background: url(../img/logo/logo.png) no-repeat; background-size: 100% auto; } .header .hd_nav { display:flex; align-self: center; justify-content: space-between; flex-grow: 1; margin-left: 50px; } .header .hd_nav .nav_lst { display:flex; justify-content: space-between; width: 674px; } .header .hd_nav .nav_lst li a { height: 36px; line-height: 36px; font-size: 17px; } .header .hd_nav .family_site { display:flex; align-self: center; margin-left: auto; } .header .hd_nav .family_site li { position: relative; } .header .hd_nav .family_site li::before { content: ''; display: inline-block; width: 1px; height: 11px; background-color: #eaeff5; margin-right: 7px; } .header .hd_nav .family_site li:first-child::before { display: none; } .header .hd_nav .family_site li + li { margin-left: 7px; } .header .hd_nav .family_site li a { color: #888; font-size: 13px; letter-spacing: -0.3px; } .header .hd_nav .btn_area { width:115px; margin-left: 20px; display:flex; } .header .hd_nav .btn_area .btn_search { width: 36px; height: 36px; background: url(../img/btn_search.png) center center no-repeat; background-size: 50% auto; } .header .hd_nav .btn_area .btn_menu_all { width: 36px; height: 36px; background: url(../img/btn_menuall.png) center center no-repeat; background-size: 50% auto; } .header .hd_nav .btn_area .link_login { width: 36px; height: 36px; margin-left: 7px; background: url(../img/ico_login.png) no-repeat; background-size: 36px auto; } .header .hd_nav .btn_area .link_login.on { background: url(../img/ico_login_2.png) no-repeat; background-size: 36px auto; } .header .hd_nav .btn_area .btn_search.on { background: url(../img/btn_close.png) center center no-repeat; background-size: 50% auto; } .header .hd_nav .btn_area .btn_menu_all.on { background: url(../img/btn_close.png) center center no-repeat; background-size: 50% auto; } .header .hd_nav .h1 { display: none; } .header_view { position: sticky; top: -10px; transition: all 0.5s;} .header_view.fixed2 { top: -1px; } .header_view.fixed2 .hd_nav .nav_lst { display: none; } .header_view.fixed2 .hd_nav .family_site { display: none; } .header_view.fixed2 .hd_nav .btn_area { margin-left: auto; } .header_view.fixed2 .hd_nav .h1 { display: block; width: 800px; font-size: 17px; line-height: 36px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .layer_search { position: fixed; left:0; top: 58px; width: 100%; height: 550px; background-color: #fff; z-index: 1; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); z-index: 92; display: none; } .layer_search.active { display: block; } .layer_search .inner { width: 750px; max-width: 750px; height: auto; flex-direction: column; } .layer_search .search_box { width: 100%; height: 78px; border:4px solid #20d0cc; border-radius: 40px; margin-top: 80px; box-sizing: border-box; display:flex; justify-content: center; align-items: center; } .layer_search .search_box .form_sch { width: 90%; display: flex; align-items: center; } .layer_search .search_box .search_text { width:100%; height: 50px; font-size: 20px; flex-grow: 1; } .layer_search .search_box .btn_search { width: 32px; height: 32px; background: url(../img/btn_search_2.png) no-repeat; flex-shrink: 0; margin-left: 20px; } .layer_search .news_box { width: 100%; border-top: 1px solid #ddd; margin-top: 50px; padding-top: 40px; } .layer_search .news_box h3 { font-size: 19px; } .layer_search .news_box .h3 { font-size: 19px; } .layer_search .news_box ol { display: flex; flex-direction: column; flex-wrap: wrap; height: 240px; margin-top: 18px; } .layer_search .news_box li { width: 50%; margin-bottom: 10px; } .layer_search .news_box li a { display:flex; align-items: center; } .layer_search .news_box li a .num { width: 26px; font-size: 20px; } .layer_search .news_box li:nth-child(1) a .num, .layer_search .news_box li:nth-child(2) a .num, .layer_search .news_box li:nth-child(3) a .num { color: #20d0cc; } .layer_search .news_box li a .thumb { width: 100px; height: 65px; margin-right: 15px; } .layer_search .news_box li a .tit { width:55%; font-size: 16px; line-height: 25px; } .layer_search .news_box li:nth-child(4) a:hover .num, .layer_search .news_box li:nth-child(5) a:hover .num { color: #111; } .layer_nav_all { position: fixed; left:0; top: 58px; width: 100%; padding-bottom:36px; background-color: #fff; z-index: 1; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); z-index: 92; display: none; } .layer_nav_all.active { display: block; } .layer_nav_all .inner { height: auto; width: 1220px; } .layer_nav_all .nav_01 { width: 75%; display: flex; margin-top: 40px; } .layer_nav_all .nav_02 { width: 12.5%; margin-top: 40px; } .layer_nav_all .nav_03 { width: 12.5%; margin-top: 40px; } .layer_nav_all .nav_01 .group_1 { width: 83.33333%; display: flex; flex-wrap: wrap; } .layer_nav_all .nav_01 .group_2 { width: 16.66666%; } .layer_nav_all .nav_01 .group_1 ul { width: 20%; height: auto; } .layer_nav_all .nav_01 .group_1 ul:nth-child(-n+5) { margin-bottom: 40px; } .layer_nav_all .nav_01 .group ul { box-sizing: border-box; border-right: 1px solid #eee; padding-left: 14px; } .layer_nav_all .nav_01 .group.group_1 ul:nth-child(1), .layer_nav_all .nav_01 .group.group_1 ul:nth-child(6) { padding-left: 0; } .layer_nav_all .nav_01 .group ul li + li { margin-top: 16px; } .layer_nav_all .nav_01 .group ul li a { font-size: 14px; font-weight: 400; letter-spacing:0; } .layer_nav_all .nav_01 .group ul li a strong { font-size: 17px; font-weight: 700; } .layer_nav_all .nav_01 .group_2 ul { height: 100%; } .layer_nav_all .nav_02 ul, .layer_nav_all .nav_03 ul { box-sizing: border-box; padding-left: 14px; } .layer_nav_all .nav_02 ul { border-right: 1px solid #eee; height: 100%; } .layer_nav_all .nav_02 ul li a, .layer_nav_all .nav_03 ul li a { font-size: 15px; } .layer_nav_all .nav_02 ul li + li { margin-top: 24px; } .layer_nav_all .nav_03 ul li + li { margin-top: 24px; } .layer_nav_all .nav_03 { display: flex; flex-direction: column; justify-content: space-between; } .layer_nav_all .nav_03 ul:nth-child(2) li a { font-size: 13px; color: #888; font-weight: 400; } .layer_nav_all .nav_03 ul:nth-child(2) li + li { margin-top: 14px; } .layer_nav_all .nav_01_m { display: none; } .layer_nav_all .nav_04_m { display: none; } .header.fixed { position: fixed; left: 0; top: 0; width: 100%; background: #fff; z-index: 99; border-bottom: 1px solid #eee; } .header.fixed .inner { height: 68px; } .header.fixed .hd_nav .family_site { display: none; } .header.fixed .logo { width: 126px; height: 28px; } .header.fixed .logo a { background-size: 100% auto; } .header.fixed .layer_search { top: 69px; } .header.fixed .layer_nav_all { top: 69px; } .header.fixed .layer_nav_all .inner { height: auto; } .layer_search.ty2 { top: 71px;} .layer_nav_all.ty2 { top: 71px;} #footer { margin-top: 200px; } .f_menu { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #ccc; } .f_menu .lst { display: flex; width: 100%; justify-content: space-between; } .f_menu .lst li a { display: block; width: 100%; height: 50px; line-height: 50px; } .f_menu .lst li.rss a i { content: ''; background: url(../img/ico_rss.png) no-repeat; width: 15px; height: 15px; display: inline-block; margin-left: 5px; vertical-align: text-bottom; } .f_menu .lst li.inec { align-content: center; } .f_menu .lst li.inec a { display: block; width: 133px; height: 25px; background: url(../img/inec.png) no-repeat; } .f_menu .lst_m { display: none; } .address_w { padding: 40px 0 30px; width: 100%; } .address_w .f_logo { width: 120px; height: 26px; margin-right: 40px; flex-shrink: 0; background: url(../img/logo/logo.png) no-repeat; background-size: 100% auto; } .address_w .address { flex-grow: 1; } .address_w .address ul { width: 100%; display: flex; flex-wrap: wrap; } .address_w .address ul li { position: relative; font-size: 14px; margin-bottom: 17px; } .address_w .address ul li::after { content: ''; display: inline-block; width: 1px; height: 11px; background-color: #eaeff5; margin: 0 15px; } .address_w .address ul li:last-child::after { display: none; } .address_w .address .info { display: block; } .address_w .address .copyright { display: block; margin-top: 30px; } .secw .inner { display: flex; position: relative; justify-content: space-between; } .secw .list_article { width: 840px; padding-top: 40px; } .secw .list_article h3 { font-weight:500; } .secw .list_article .h3 { font-weight:500; } .secw .view_article { width: 840px; padding-top: 40px; } .secw article { width: 100%; } .secw aside { width: 320px; padding-top: 40px; } .secw aside .sticky { position: sticky; top: 50px; } .secw .sc_stit { font-size: 20px; border-bottom: 1px solid #ddd; padding: 0 0 30px; } .section_con_photo article { padding-top: 40px; } .secw_nav + .secw aside .sticky { top:100px; } .view_hd + .secw aside .sticky { top:100px; } .ranking_news { position: relative; } .ranking_news .tooltip { position: unset; margin-left: 7px; } .ranking_news ol { margin-top: 13px; } .ranking_news ol li + li { margin-top: 15px; } .ranking_news ol li a { display: flex; justify-content: space-between; align-items: center; } .ranking_news ol li .txt_area { width: calc(100% - 80px); display: flex; align-items: center; } .ranking_news ol li .txt_area .num { width: 25px; flex-shrink: 0; font-size: 20px; color: #20d0cc; } .ranking_news ol li .txt_area .tit { font-size: 16px; line-height: 22px; } .ranking_news ol li .thumb { width: 65px; height: 65px; } .digitallab_news { position: relative; margin-top: 70px; } .digitallab_news ul { margin-top: 20px; } .digitallab_news ul li + li { margin-top: 20px; } .digitallab_news ul li { display: flex; justify-content: space-between; align-items: center; } .digitallab_news ul li .txt_area { width: calc(100% - 145px); } .digitallab_news ul li .txt_area .ctg { display: inline-block; height: 25px; line-height: 25px; font-size: 13px; color: #fff; background-color: #20d0cc; padding: 0 12px; border-radius: 13px; margin-bottom: 6px; } .digitallab_news ul li .thumb { width: 130px; height: 85px; } .digitallab_news ul li .tit { font-size: 16px; line-height: 22px; } .trend_news { position: relative; } .trend_news .ly_tooltip { height: auto; } .trend_news ol { margin-top: 15px; } .trend_news ol li + li { margin-top: 15px; } .trend_news ol li a { display: flex; justify-content: space-between; align-items: center; } .trend_news ol li .t_area { width: calc(100% - 115px); display: flex; align-items: center; } .trend_news ol li .t_area .num { width: 25px; flex-shrink: 0; font-size: 20px; } .trend_news ol li:nth-child(-n+3) .t_area .num { color: #20d0cc; } .trend_news ol li .t_area .tit { font-size: 16px; line-height: 22px; } .trend_news ol li .thumb { width: 100px; height: 65px; } .atc_ad_aside { width: 100%; margin-top: 70px; } .atc_ad_aside.first { margin-top: 0; } .atc_ad_aside .tit { display: block; font-size: 13px; color: #999; font-weight: 300; } .atc_ad_aside .ad_lst { width: 100%; margin-bottom: 70px; } .atc_ad_aside li { width: 100%; margin-top: 10px; } .atc_ad_aside + .trend_news { margin-top: 70px; } .trend_news + .ranking_news { margin-top: 80px; }