@charset "UTF-8"; #wrap { position: relative; overflow: hidden; } .layout { position: relative; max-width: 1200px; /* contents 영역 width 값 */ width: 100%; margin: 0 auto; } section > .layout::after { display: block; clear: both; content: ""; } #container .sub.layout { margin: 50px auto; } #content_wrap { overflow: hidden; margin-top: 20px; margin-left: 30rem; margin-bottom: 120px; padding-top: 38px; } .wide #content_wrap { overflow: hidden; margin-top: 46px; margin-left: 30rem; margin-bottom: 120px; padding-top: 0; } section.wide #content_wrap { overflow: inherit; margin-left: 0; } .news-lnb + .wide #content_wrap{ margin-top: 290px; } body { height: auto; } html.on, body.on { overflow: hidden; } /* 검정배경 */ .blind { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 2; } body.on .blind { display: block; opacity: 0.5; } /*헤더*/ #header { position: fixed; width: 100%; height: 144px; background: #fff; z-index: 99; border-bottom: 1px solid #ddd; margin: 0 auto; } #header > .layout { width: 100%; max-width: 100%; height: 100%; } #header #gnb_wrap { position: relative; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; } #header .logo_wrap { position: absolute; top: 50%; left: 52px; transform: translateY(-50%); z-index: 3; } #header .logo_wrap > * { display: inline-block; vertical-align: middle; } #header .logo_wrap .logo { margin-right: 16px; } #header .logo_wrap .logo a { display: block; width: 7rem; height: 3.2rem; /* background: url("/html1/images/layout/txt_logo-v1.png") no-repeat center center/100%; */ background: url("/html1/images/main/txt_logo_white.png") no-repeat center center; background-size: contain; } #header.scrolled .logo_wrap .logo a , #wrap:has(.mobile_wrap.on) #header .logo_wrap .logo a, body.on #header .logo_wrap .logo a, #wrap.sub #header .logo_wrap .logo a{ /* background: url("/html1/images/layout/txt_logo-v2.png") no-repeat center center/100%; */ background: url("/html1/images/main/txt_logo.png") no-repeat center center; background-size: contain; } #header #gnb_wrap #gnb { z-index: 2; } #header #gnb_wrap #gnb > ul { width: 100%; height: 100%; } #header #gnb_wrap #gnb > ul::after { display: block; clear: both; content: ""; } #header #gnb_wrap #gnb > ul > li { float: left; position: relative; margin-right: 40px; height: 100%; } #header #gnb_wrap #gnb > ul > li:last-child { margin-right: 0; } #header #gnb_wrap #gnb > ul > li > a { display: block; position: relative; text-align: center; height: 102px; line-height: 102px; font-size: 20px; font-weight: 500; } #header #gnb_wrap #gnb > ul > li > a > span { text-transform: uppercase; } #header #gnb_wrap #gnb > ul > li > a.on:before { content: ""; display: block; width: 10px; height: 10px; bottom: 17px !important; left: 50%; position: absolute; background: #e50019; transform: translateX(-50%); z-index: 1; } #header #gnb_wrap #gnb > ul > li > .sub { position: absolute; top: 100%; width: 100%; } #header #gnb_wrap #gnb > ul > li > .sub > ul { display: none; text-align: center; width: 100%; height: auto; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li:first-of-type { padding-top: 1rem; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li:last-of-type { padding-bottom: 1rem; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li > a { display: block; padding: 1rem; } #header .login > a { position: relative; font-size: 14px; font-weight: 500; margin-right: 2px; color: #666; padding-right: 2.8rem; } #header .login > a:last-of-type{ padding-right: 0; } #header .login > a::after { position: absolute; width: 1px; height: 10px; background: #ddd; top: 5px; right: 12px; content: ""; } #header .login > a:last-of-type::after { content: none; } .nav_bg { display: none; position: absolute; top: 102px; left: 0; width: 100%; height: 100%; background: #fff; z-index: -1; } /* 헤더를 고정한다 */ #header.scrolled { position: fixed; } /* ios에서 애니메이션 이슈 있을 수 있음 */ @keyframes slide-down { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } /*서브비주얼*/ #container:has(.sub_visual){ padding-top: 144px; } .sub_visual { position: relative; height: 246px; height: 300px; overflow: hidden; } .sub_visual.news1 { position: relative; /*height: 246px;*/ height: 300px; overflow: hidden; } [class*="sub_visual0"] { height: 300px; } .sub_visual .bg { height: 100%; } .sub_visual .bg .title { padding-top: 90px; color: #fff; } .sub_visual .bg .title strong { display: block; font-size: 50px; } .sub_visual .bg .title strong span { color: #ed1c23; } .sub_visual .bg .title p { font-size: 24px; letter-spacing: -0.72px; margin-left: 116px; } .sub_visual08 .bg { background: url(/html1/images/layout/sub_visual08.jpg) no-repeat center center/cover; } .sub_visual .layout h2 { color: #fff; } .sub_visual .news_group { width: 100%; height: 100%; } .sub_visual .news_group .slick-slide:nth-child(3) { background-image: url(/html1/images/layout/news_visual03_a1.jpg); height: 300px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .sub_visual .news_group .slick-slide:nth-child(1) { background-image: url(/html1/images/layout/news_visual01_a1.jpg); height: 300px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .sub_visual .news_group .slick-slide:nth-child(2) { background-image: url(/html1/images/layout/news_visual02_a1.jpg); height: 300px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .sub_visual .news_group.news1 .slick-slide:nth-child(3) { background-image: url(/html1/images/layout/news_visual03_b1.jpg); height: 300px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .sub_visual .news_group.news1 .slick-slide:nth-child(1) { background-image: url(/html1/images/layout/news_visual01_b1.jpg); height: 300px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .sub_visual .news_group.news1 .slick-slide:nth-child(2) { background-image: url(/html1/images/layout/news_visual02_b1.jpg); height: 300px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .sub_visual .news_group.news1 .slick-slide { background-image: url(/html1/images/layout/news_visual01_b1.jpg); height: 300px; background-position: center center; background-size: cover; background-repeat: no-repeat; } .sub_visual .news_group .slick-slide:nth-child(2) .title, .sub_visual .news_group .slick-slide:nth-child(2) .title h2 { color: #111; } .sub_visual .news_group .title { color: #fff; margin-top: 60px; } .sub_visual .news_group .title .news_logo { display: inline-block; vertical-align: middle; } .sub_visual .news_group .title .item { display: inline-block; vertical-align: middle; padding : 30px 60px; } .sub_visual .title h2 { font-size: 60px; letter-spacing: -1.8px; line-height: 74px; margin-bottom: 0; } .sub_visual .news_group .title .news_logo { margin-right: 44px; } .sub_visual .news_group .title .item p { font-size: 35px; letter-spacing: -1.05px; } .sub_visual .slick-arrow { z-index: 1; } .sub_visual .slick-prev { left: 60px; } .sub_visual .slick-next { right: 60px; } .sub_visual .slick-prev::before, .sub_visual .slick-next::before { position: absolute; width: 32px; height: 55px; background: url("/html1/images/icon/visual_arrow.svg") no-repeat center center/cover; opacity: 0.5; top: 0; left: 0; content: ""; } .sub_visual .slick-prev, .sub_visual .slick-next { width: 32px; height: 55px; } .sub_visual .slick-next::before { transform: rotate(180deg); } .snb { background: #2e3192; margin-bottom: 46px; } .snb ul { position: relative; float: left; height: 54px; line-height: 54px; } .snb ul.other { float: right; line-height: 47px; background: #1c1f65; padding-left: 66px; } .snb ul.other::before { position: absolute; width: 0; height: 0; border-top: 54px solid transparent; border-bottom: 54px solid none; /* border-right: 54px solid transparent; */ border-left: 54px solid #2e3192; left: 0; content: ""; } .snb ul.other::after { position: absolute; width: 1000%; height: 54px; left: 100%; background: #1c1f65; content: ""; } .snb ul li { position: relative; float: left; font-size: 18px; color: #fff; margin-right: 15px; } .snb ul.other li { font-size: 16px; } .snb ul li:last-child { margin-right: 0; } .snb ul li a > * { display: inline-block; vertical-align: middle; } .snb ul li a > i { margin-right: 4px; } .snb ul li a:focus, .snb ul li a:hover { text-decoration: underline; text-underline-position: under; } .snb ul li a.on { font-weight: 700; text-decoration: underline; text-underline-position: under; } .snb ul.other li { padding-right: 10px; margin-right: 10px; } .snb ul.other li::after { position: absolute; width: 1px; height: 18px; background: #91949c; top: 18px; right: 0; content: ""; } .snb ul.other li:nth-child(1) a i { margin-bottom: 2px; } .snb ul.other li:nth-child(3) a i { margin-right: 4px; margin-bottom: 2px; } .snb ul.other li:last-child:after { content: none; } /*모바일/전체메뉴 버튼*/ #header .all_menu { width: 26px; height: 23px; } #header .all_menu p { } #header .all_menu p i { font-size: 3rem; vertical-align: middle; transition: all 1s; display: none; } #header .all_menu p i.hamburger { width: 26px; height: 23px; background: url("../images/layout/hamburger.svg") no-repeat center center/cover; } #header.scrolled .all_menu p i.hamburger { background: url("../images/layout/hamburger_white.svg") no-repeat center center/cover; } #header .all_menu .open { display: block; font-size: 3rem; } #header .all_menu.on .open { display: none; } #header .all_menu .close { display: none; font-size: 2.6rem; } #header .all_menu.on .close { display: block; } /*서브바*/ .snb .layout .snb_wrap { position: relative; margin-top: -6rem; } .snb .layout .snb_wrap:after { content: ""; display: block; clear: both; } .snb .layout .snb_wrap:before { display: block; position: absolute; left: 0; top: 0; content: ""; background: #e50019; opacity: 0.5; width: 100%; height: 100%; } .snb .layout .snb_wrap .home { width: 6rem; height: 6rem; display: block; position: relative; float: left; } .snb .layout .snb_wrap .home i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 2rem; } .snb .layout .snb_wrap .snb_select { float: left; border-left: 1px solid #fff; position: relative; } .snb .layout .snb_wrap .snb_select:last-of-type { border-right: 1px solid #fff; } .snb .layout .snb_wrap .snb_select .select_active { width: 30rem; height: 6rem; line-height: 6rem; position: relative; padding-right: 4.25rem; } .snb .layout .snb_wrap .snb_select .select_active i { color: #fff; font-size: 2.25rem; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); } .snb .layout .snb_wrap .snb_select .select_active.on { background: #e50019; } .snb .layout .snb_wrap .snb_select .select_active.on i { transform: translateY(-50%) rotate(180deg); } .snb .layout .snb_wrap .snb_select .select_active span { position: relative; color: #fff; } .snb .layout .snb_wrap .snb_select .select_list { display: none; position: absolute; left: 0; top: 100%; width: 100%; z-index: 1; } .snb .layout .snb_wrap .snb_select .select_list:before { display: block; position: absolute; content: ""; top: 0; left: 0; background: #e50019; opacity: 0.5; width: 100%; height: 100%; } .snb .layout .snb_wrap .snb_select .select_list li { border-top: 1px solid #fff; position: relative; } .snb .layout .snb_wrap .snb_select .select_list li a { padding: 1.25rem 2rem; display: block; position: relative; color: #fff; } .snb .layout .snb_wrap .snb_select .select_list li a:hover { background: #e50019; } .snb .layout .snb_wrap .snb_select .select_list li a span { text-align: center; } /*서브 제목*/ #sub_tit { position: relative; padding: 0 0 5rem 0; border-bottom: 1px solid #ddd; } #sub_tit .layout h3 { font-size: 3rem; color: #000; text-align: center; } /*좌측메뉴*/ #lnb { width: 25rem; height: 100%; float: left; margin-bottom: 100px; } #lnb .lnb_title { background: #3352a8; color: #fff; padding: 32px 28px; margin-bottom: 6px; } #lnb .lnb_title strong { font-size: 38px; letter-spacing: -1.14px; } #lnb .lnb_title p { font-size: 16px; letter-spacing: -0.48px; color: rgba(255, 255, 255, 0.4); display: none; } #lnb .lnb_menu > li > a { display: block; position: relative; padding: 12.5px 20px; color: #3f3f3f; border-top: 1px solid #e0e0e0; background: #fff; letter-spacing: -0.05em; transition: none; } #lnb .lnb_menu > li:last-of-type > a { border-bottom: 1px solid #e0e0e0; } #lnb .lnb_menu > li > a:hover { color: #222; } #lnb .lnb_menu > li > a.on.sub { background: #8a94af; color: #fff; } #lnb .lnb_menu > li > a.on.sub:after { transform: translateY(-50%) rotate(90deg); } #lnb .lnb_menu > li > a.sub::after { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-family: "xeicon"; font-size: 13px; content: "\e93e"; transition: all 0.3s; } #lnb .lnb_menu > li > a[target="_blank"]:after { display: block; position: absolute; font-family: "xeicon"; font-size: 13px; top: 50%; right: 10px; transform: translateY(-50%); content: "\e980"; } #lnb .lnb_menu > li > ul { display: none; padding: 1.15rem 1.65rem; background: #f5f5f5; } #lnb .lnb_menu > li > ul > li > a { position: relative; display: block; color: #313131; padding-left: 1rem; } #lnb .lnb_menu > li > ul > li { margin-bottom: 0.5rem; } #lnb .lnb_menu > li > ul > li:first-of-type { margin-top: 0; } #lnb .lnb_menu > li > ul > li > a:hover { text-decoration: underline; } #lnb .lnb_menu > li > ul > li > a.on { color: #288bcc; } #lnb .lnb_menu > li > ul > li > a:before { content: ""; display: block; width: 4px; height: 4px; position: absolute; left: 0; top: 1.15rem; background: #888888; } #lnb .lnb_menu > li > ul > li > a:hover:before { background: #888888 !important; } #lnb .lnb_menu > li > ul > li > a.on:before { background: #288bcc; } /*콘텐츠영역*/ #txt { margin: 4rem 0; } /*검색*/ #header .search { width: 28px; height: 28px; margin-right: 1.4rem; color: #fff; } #header.scrolled .search, #wrap:has(.mobile_wrap.on) #header .search, body.on #header .search, #wrap.sub #header .search{ color: #242424; } #header .all_menu{ color: #fff; } #header.scrolled .all_menu, #wrap:has(.mobile_wrap.on) #header .all_menu, body.on #header .all_menu, #wrap.sub #header .all_menu{ color: #242424; } #header .search p i { font-size: 25px; vertical-align: middle; transition: all 1s; display: none; } #header .search p .open { display: block; } #header .search.on p .open { display: none; } #header .search p .close { display: none; } #header .search.on p .close { display: block; } #header .search_box:before { display: block; width: 1000%; background: #fff; position: absolute; top: 0; left: 50%; content: ""; height: 100%; transform: translateX(-50%); z-index: 2; } #header .search_box { display: none; position: fixed; top: 144px; left: 0; background: #fff; width: 100%; padding: 4.7rem 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } #header .search_box .search_wrap { position: relative; width: 600px; margin: 0 auto; z-index: 3; } #header .search_box .search_wrap strong { display: block; position: absolute; top: 50%; left: 0; font-size: 2.5rem; color: #e50019; transform: translateY(-50%); line-height: 100%; display: none; } #header .search_box .search_wrap .search_bar input { height: 5rem; width: 100%; border: 0; border-bottom: 2px solid #000; color: #000 !important; } #header .search_box .search_wrap .search_bar .submit { position: absolute; top: 6px; right: 0; width: 4rem; height: 4rem; } #header .search_box .search_wrap .search_bar .submit i { font-size: 3.2rem; color: #000; } /*전체메뉴*/ #wrap:has(.mobile_wrap.on) #header #gnb_wrap{ justify-content: flex-end; } .mobile_wrap { position: fixed; top: 102px; width: 100%; right: -100%; height: calc(100% - 102px); opacity: 0; transition: all 0.2s; z-index: 1; visibility: hidden; overflow: hidden; } .mobile_wrap .layout { height: 100%; } .mobile_menu { position: relative; height: 100%; } .mobile_menu:before { width: 20rem; background: #f6f7f9; position: absolute; left: 0; top: 0; content: ""; display: block; height: 100%; } .mobile_menu > ul { height: 100%; position: relative; } .mobile_menu > ul > li > a { width: 20rem; height: 102px; display: block; display: table; background: #f6f7f9; padding: 0 2rem; } .mobile_menu > ul > li > a.on { background: #e50019; } .mobile_menu > ul > li > a.on > span { color: #fff; } .mobile_menu > ul > li > a > span { display: table-cell; vertical-align: middle; text-align: center; font-size: 2rem; } .mobile_menu > ul > li > .sub { display: none; position: absolute; width: calc(100% - 20rem); left: 20rem; height: 100%; top: 0; padding: 2rem; background: #fff; } .mobile_menu > ul > li.on .sub { display: block; padding: 2rem; } .mobile_menu > ul > li.on > a { background: #353541; color: #fff; } .mobile_menu > ul > li > .sub > ul > li > a { display: block; padding: 2rem; position: relative; } .mobile_menu > ul > li > .sub > ul > li > a > span { font-size: 1.8rem; display: block; } .mobile_menu > ul > li > .sub > ul > li { border-top: 1px solid #ddd; } .mobile_menu > ul > li > .sub > ul > li:first-of-type { border-top: 0; } .mobile_menu > ul > li > .sub > ul > li > a.on { border-bottom: 1px solid #e50019; } .mobile_menu > ul > li > .sub > ul > li > .depth { padding: 2rem; display: none; } .mobile_menu > ul > li > .sub > ul > li > .depth > ul > li { margin-top: 1rem; } .mobile_menu > ul > li > .sub > ul > li > .depth > ul > li:first-of-type { margin-top: 0; } .mobile_menu > ul > li > .sub > ul > li > a:before { display: block; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); content: ""; background: url(../../images/layout/mobile_menu_arr.png) no-repeat center center/cover; width: 1.3rem; height: 0.8rem; } .mobile_menu > ul > li > .sub > ul > li > a.on:before { transform: translateY(-50%) rotate(-180deg); } .mobile_menu > ul > li > a.on + .sub { display: block; } .mobile_menu > ul > li > .sub > ul > li > a.empty:before { display: none; } .mobile_menu ul li a span { position: relative; } .mobile_menu ul li a[target="_blank"] span:after { width: 13px; height: 10px; display: block; content: ""; background: url(../../images/layout/blank.png) center center no-repeat; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .mobile_menu > ul > li > .sub > ul > li > a[target="_blank"] span:after { width: 13px; height: 10px; display: block; content: ""; background: url(../../images/layout/blank.png) center center no-repeat; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .mobile_wrap.on { opacity: 1; right: 0; transition: all 0.2s; visibility: visible; overflow: visible; z-index: 3; } /*전체메뉴 스크롤바*/ .mobile_wrap .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: #e50019; } .mobile_wrap .mCSB_scrollTools .mCSB_draggerRail { background: #ddd; } .mobile_wrap .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mobile_wrap .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mobile_wrap .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background: #e50019; } /*상단 탑 이동*/ .page_topBtn { position: fixed; bottom: 20rem; z-index: 1; right: 10rem; } .page_topBtn a { width: 6.1rem; height: 5.7rem; display: block; } /*푸터*/ #footer .footer_links{ background: #2F2F2F; } #footer .footer_links .layout{ display: flex; align-items: center; justify-content: space-between; } #footer .footer_links .layout > a{ display: none; } #footer .footer_links .layout > div{ display: flex; align-items: center; } #footer .footer_links .anchor-wrap{ gap: 42px; } #footer .footer_links .anchor-wrap a{ color: rgba(153, 153, 153, .7); font-size: 14px; } #footer .footer_links .anchor-wrap a:first-of-type{ color: #fff; } #footer .select_wrap .select_box > button:before{ position: relative; top: unset; transform: none; font-family: 'remixicon'; content: '\ea4e'; order: 2; right: 0; font-size: 12px; font-weight: 600; color: #fff; } #footer .select_wrap .select_box > button.on:before{ transform: rotate(180deg); } #footer .select_wrap .select_box > button{ width: auto; display: flex; align-items: center; justify-content: space-between; gap: 11px; background: none; color: rgba(153, 153, 153, 0.7); font-size: 14px; } #footer .select_wrap .select_box ul{ width: 100%; } #footer .select_wrap .select_box ul{ bottom: unset; border: none; padding: 21px 32px 25px 32px; background: #515151; } #footer .select_wrap .select_box ul li + li{ margin-top: 9px; } #footer .select_wrap .select_box ul li a{ height: auto; color: rgba(178, 178, 178, 1); font-size: 14px; line-height: 1.25; background: unset; text-align: center; border: none; } #footer .select_wrap .select_box ul li a:hover{ color: #fff; } #footer .footer_bottom{ background: #1E1E1E; } #footer .footer_bottom .layout{ display: flex; padding: 91px 0 110px 0; gap: 54px; } #footer .footer-info{ display: flex; flex-direction: column; justify-content: space-between; } #footer .footer-info img{ width: 94px; } #footer .footer-info address{ color: #8F8F8F; font-size: 15px; display: flex; flex-direction: column; } #footer .footer-info address span + span{ padding-top: 12px; } #footer .footer-info address span.copyright{ padding-top: 22px; font-size: 16px; } #footer .footer-anchor ul{ display: flex; text-align: left; } #footer .footer-anchor > ul > li{ padding: 0 58px 0 20px; position: relative; } #footer .footer-anchor > ul > li::before{ display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: #2C2C2C; content: ''; } #footer .footer-anchor > ul > li:first-of-type{ padding: 0 58px 0 40px; } #footer .footer-anchor > ul > li > p > a{ color: rgba(255, 255, 255, .7); font-size: 15px; font-weight: 600; } #footer .footer-anchor ul li ul{ flex-direction: column; margin-top: 20px; gap: 20px; } #footer .footer-anchor ul li ul li a{ color: #8F8F8F; font-size: 15px; font-weight: 400; } #footer .footer-report{ display: flex; flex-direction: column; justify-content: space-between; flex: 1; text-align: right; } #footer .footer-report > div p{ color: rgba(255, 255, 255, .7); font-size: 15px; font-weight: 600; } #footer .footer-report > div span{ display: inline-block; padding-top: 15px; font-size: 16px; font-weight: 400; line-height: 1.875; color: #8F8F8F; } #footer .footer-report ul{ display: flex; align-items: center; justify-content: flex-end; gap: 6.9px; } #footer .footer-report ul li a{ display: inline-block; width: 40.86px; height:40.86px; font-size: 0; line-height: 0; border-radius: 50%; } #footer .footer-report ul li a.kakao{ background: #4E4E4E url(/html1/images/layout/kakao.svg) no-repeat center center; } #footer .footer-report ul li a.insta{ background: #4E4E4E url(/html1/images/layout/insta.svg) no-repeat center center; } #footer .footer-report ul li a.youtube{ background: #4E4E4E url(/html1/images/layout/youtube.svg) no-repeat center center; } #footer .footer-report ul li a.facebook{ background: #4E4E4E url(/html1/images/layout/facebook.svg) no-repeat center center; } /*전체메뉴 1000px 이상*/ @media (min-width: 1px) { #wrap.main .mobile_wrap .layout{ padding: 4rem 2rem; } .mobile_wrap .layout { padding: 14rem 2rem; height: calc(100% - 102px); } .mobile_menu > ul { max-width: 1400px; margin: 0 auto; } .mobile_menu:before { display: none; } .mobile_menu > ul > li > .sub { width: 100%; position: relative; left: auto; top: auto; display: block !important; padding: 2rem 0; } .mobile_menu > ul > li > .sub > ul > li { float: left; width: 20%; border-top: 0; } .mobile_menu > ul > li > .sub > ul { overflow: hidden; } .mobile_menu > ul > li > .sub > ul > li > a:before { display: none; padding: 0; } .mobile_menu > ul > li > .sub > ul > li > .depth { display: block !important; } .mobile_menu > ul > li > a { width: 100%; height: auto; background: none; border-bottom: 2px solid #707070; padding: 0; } .mobile_menu > ul > li > a > span { display: inline-block; position: relative; font-size: 40px; font-weight: 700; padding: 1rem; } .mobile_menu > ul > li > a > span:before { content: ""; display: block; width: 10px; height: 10px; top: 15px; right: -6px; background: #e50019; position: absolute; } .mobile_wrap { background: #fff; top: -200%; right: auto; height: 100%; } .mobile_wrap.on { opacity: 1; top: 144px; } .mobile_wrap.on .mobile_menu > ul { overflow-y: auto; height: calc(100% - 90px); } .mobile_menu ul li a[target="_blank"] span:after { position: relative; display: inline-block; top: auto; right: auto; transform: none; margin-left: 1rem; vertical-align: middle; } .mobile_menu > ul > li > .sub > ul > li > a[target="_blank"] span:after { position: relative; display: inline-block; top: auto; right: auto; transform: none; margin-left: 1rem; vertical-align: middle; } .mobile_menu > ul > li > .sub > ul > li > a.on { border: 0; } .mobile_menu > ul > li > a.on { background: none; } .mobile_menu > ul > li > a.on span { color: #555; } .mobile_menu > ul > li > .sub > ul > li > a { font-size: 18px; font-weight: 500; color: #515151; padding: 5px 5px 5px 24px; } .mobile_menu > ul > li > .sub > ul > li > a:hover, .mobile_menu > ul > li > .sub > ul > li > a:focus { text-decoration: underline; text-underline-position: under; } .mobile_menu > ul > li > .sub > ul > li > a::after { position: absolute; width: 8px; height: 2px; background: #c6bfbf; top: 18px; left: 10px; content: ""; } } /* 콘텐츠 탭 */ .content_tab { position: relative; padding-top: 8rem; overflow: hidden; } .content_tab a.tab_tit { padding: 2rem 1rem; text-align: center; display: block; position: relative; border: 1px solid #d2d2d2; color: #646464; float: left; position: absolute; top: 0; background: #fff; border-left: 0; } .content_tab a.tab_tit.on { background: #009fdc; color: #fff; } .content_tab a.tab_tit:first-of-type { border-left: 1px solid #d2d2d2; } .content_tab.tab_col_2 a.tab_tit:nth-of-type(1) { left: 0; } .content_tab.tab_col_2 a.tab_tit:nth-of-type(2) { left: 50%; } .content_tab.tab_col_3 a.tab_tit:nth-of-type(1) { left: 0; } .content_tab.tab_col_3 a.tab_tit:nth-of-type(2) { left: 33.333%; } .content_tab.tab_col_3 a.tab_tit:nth-of-type(3) { left: 66.666%; } .content_tab.tab_col_4 a.tab_tit:nth-of-type(1) { left: 0; } .content_tab.tab_col_4 a.tab_tit:nth-of-type(2) { left: 25%; } .content_tab.tab_col_4 a.tab_tit:nth-of-type(3) { left: 50%; } .content_tab.tab_col_4 a.tab_tit:nth-of-type(4) { left: 75%; } .content_tab.tab_col_5 a.tab_tit:nth-of-type(1) { left: 0; } .content_tab.tab_col_5 a.tab_tit:nth-of-type(2) { left: 20%; } .content_tab.tab_col_5 a.tab_tit:nth-of-type(3) { left: 40%; } .content_tab.tab_col_5 a.tab_tit:nth-of-type(4) { left: 60%; } .content_tab.tab_col_5 a.tab_tit:nth-of-type(5) { left: 80%; } .content_tab.tab_col_2 a.tab_tit { width: 50%; } .content_tab.tab_col_3 a.tab_tit { width: 33.333%; } .content_tab.tab_col_4 a.tab_tit { width: 25%; } .content_tab.tab_col_5 a.tab_tit { width: 20%; } .content_tab .tab_txt { display: none; padding: 4rem 2rem; border: 1px solid #d2d2d2; background: #f8f8f8; } .content_tab .tab_txt:first-of-type { display: block; } /* //콘텐츠 탭 */ /*셀렉트 박스*/ .select_box { position: relative; } .select_box > button { display: block; background: #9b9b9b; position: relative; height: 5rem; line-height: 5rem; width: 262px; text-align: left; padding: 0 2rem; color: #fff; font-size: 16px; } .select_box > button:before { position: absolute; top: 50%; transform: translateY(-50%); font-family: "xeicon"; font-size: 11px; content: "\e935"; right: 2rem; transition: all 0.2s; } .select_box > button.on:before { transform: translateY(-50%) rotate(180deg); } .select_box ul { display: none; } .select_box ul li a { display: block; color: #fff; font-weight: 300; background: #fff; position: relative; height: 5rem; line-height: 5rem; width: 100%; text-align: left; padding: 0 1rem; border-top: 1px solid #9b9b9b; color: #555; } .select_box ul li a:hover { background: #9b9b9b; color: #fff; } .select_box ul li:first-of-type a { border-top: 0; } .select_box ul { position: absolute; bottom: 50px; border: 1px solid #9b9b9b; overflow: hidden; width: 262px; z-index: 100; } /*//셀렉트 박스*/ a.more_link { position: absolute; top: 20px; right: 0; font-size: 16px; } a.more_link:focus, a.more_link:hover { text-decoration: underline; text-underline-position: under; } .group { position: relative; } body:has(.news-main) .quick_nav_wrap main{ top:5%; } .quick_nav_wrap.main { position: absolute; top: 10%; -webkit-transition: all 1s; transition: all 1s; z-index: 2; } .quick_nav_wrap.main.fixed { position: fixed; top: 28%; } .quick_nav_wrap.main:has(.fixed) { position: fixed; top: 28%; } #quick_nav{ border: 1.389px solid #EFEFEF; width: 95px; border-radius: 5px 0 0 5px; text-align: center; overflow: hidden; } #quick_nav > p{ background: #E7280E; font-size: 16px; font-weight: 600; color: #fff; padding: 12px 3px; } #quick_nav ul{ background: #fff; } #quick_nav ul li a{ display: flex; flex-direction: column; gap: 5px; padding: 12px 5px 15px 5px; align-items: center; } #quick_nav ul li a + a{ border-top: 1px solid #EFEFEF; } #quick_nav ul li a span{ color: #444; font-size: 14px; font-weight: 500; position: relative; } #quick_nav ul li a span::before{ display: block; position: absolute; right: -5px; bottom: -3px; z-index: -1; width: 0; height: 10px; border-radius: 5px; background-color: #f9ece2; transition-property: left, right, width; transition-duration: .25s; transition-timing-function: ease-in-out; content: ''; } #quick_nav ul li a:hover span::before{ left: -5px; right: auto; width: calc(100% + 10px); z-index: 1; opacity: .5; } #quick_nav ul li a i{ display: inline-block; width: 26.57px; height: 26.57px; transition-property: transform; transition-duration: 0s; transition-timing-function: ease-in-out; } #quick_nav ul li a:hover i{ transform: rotateY(360deg); transition-duration: .4s; } #quick_nav ul li a.n01 i{ background: url(/html1/images/layout/quick-icon01.svg)no-repeat center center; } #quick_nav ul li a.n02 i{ background: url(/html1/images/layout/quick-icon02.svg)no-repeat center center; } #quick_nav ul li a.n03 i{ background: url(/html1/images/layout/quick-icon03.svg)no-repeat center center; } #quick_nav ul li a.n04 i{ background: url(/html1/images/layout/quick-icon04.svg)no-repeat center center; } #quick_nav button{ background: #333333; font-size: 16px; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; gap: 5.4px; padding: 12px 5px 14px 5px; width: 100%; } #quick_nav button i{ align-self: flex-end; } /* #quick_nav { position: absolute; width: 90px; top: 0; right: -100px; background: #ffc601; border-radius: 100px; text-align: center; padding: 32px 0; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.09); -webkit-transition: all 1s; transition: all 1s; } #quick_nav a { display: block; position: relative; } #quick_nav a::after { display: block; width: 73px; height: 1px; background: #f1f0ee; margin: 8px auto; content: ""; } #quick_nav a:last-child::after { content: none; } #quick_nav a i { display: block; } #quick_nav a i[class*="xi-"] { font-size: 38px; color: #fff; } #quick_nav a i img { height: 30px; } #quick_nav a > img { height: 40px; } #quick_nav a p { font-size: 14px; font-weight: 500; letter-spacing: -0.8px; margin-top: 5px; line-height: 16px; } #quick_nav.fixed { position: fixed; top: 28%; } #quick_nav a:focus, #quick_nav a:hover { text-decoration: none; } */ /* on air */ /* #header .on_air { position: absolute; height: 29px; text-align: left; font-weight: 700; z-index: 2; } #header .on_air::after { display: block; clear: both; content: ""; } .on_air > .title { float: left; width: 76px; height: 29px; color: #000; background: #e9e9e9; border-radius: 0 0 0 20px; text-align: center; } .on_air > .title > .red { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #ed1c23; } .on_air > ul { float: left; width: 119px; height: 29px; background: #2e3192; border-radius: 0 0 20px 0; padding-right: 4px; text-align: center; } #header.scrolled .on_air > ul { background: #fff; } .on_air > ul li { display: inline-block; width: 40px; width: auto; text-align: center; } .on_air > ul li a { display: block; position: relative; color: #fff; } .on_air > ul li a:focus, .on_air > ul li a:hover { color: #ed1c23; } #header.scrolled .on_air > ul li a { color: #292929; } .on_air > ul li:first-child a { padding-right: 10px; margin-right: 5px; } .on_air > ul li:first-child a::after { position: absolute; width: 1px; height: 13px; background: #888; top: 7px; right: 0; content: ""; } #header.scrolled .on_air > ul li:first-child a::after { background: #292929; } */ /* .on_air > ul li a { display: block; width: 29px; height: 18px; font-size: 10px; font-weight: 700; background: url('/html1/images/layout/on_air_btn_bg.svg') no-repeat center center/100%; color: #fff; } */ /* //on air */ @media (min-width: 1px) { /* 210602 헤더 소규모 사이트 스타일로 변경 */ #header #gnb_wrap #gnb > ul { /* display: table; table-layout: fixed; */ width: 100%; } #header #gnb_wrap #gnb > ul > li { /* display: table-cell; vertical-align: middle; */ width: auto; position: static; margin-right: 8%; } #header #gnb_wrap #gnb > ul > li > a { display: block; text-align: center; height: auto; line-height: normal; position: relative; padding: 40px 0 29px; } #header #gnb_wrap #gnb > ul > li > a > span { /* display: inline-block; vertical-align: middle; line-height: 100%; */ } #header #gnb_wrap #gnb > ul > li > a.on:before { content: ""; display: block; width: 10px; height: 10px; bottom: -14px; left: 50%; transform: translateX(-50%); position: absolute; background: #ed1c23; } #header #gnb_wrap #gnb > ul > li > .sub { display: none; position: absolute; width: 116rem; top: 100%; left: 50%; transform: translateX(-50%); text-align: center; padding-top: 1.1rem; padding-left: 29rem; } #header #gnb_wrap #gnb > ul > li > .sub::before { position: absolute; width: 1000vw; height: 23.5rem; top: 0; left: -500%; background: #fff; border: 1px solid #bcbcbc; z-index: -1; content: ""; border-top: none; } #header #gnb_wrap #gnb > ul > li > .sub > ul { display: block; width: 100%; height: 7rem; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li { float: left; width: 23.3%; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li > .depth_01 { display: none; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li:first-of-type { padding-top: inherit; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li:last-of-type { padding-bottom: inherit; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li { margin: 4px; } #header #gnb_wrap #gnb > ul > li > .sub .sub_left { position: absolute; top: 3.2rem; left: 0; text-align: center; } #header #gnb_wrap #gnb > ul > li > .sub .sub_left strong { display: block; font-size: 4rem; } #header #gnb_wrap #gnb > ul > li > .sub .sub_left p { font-size: 1.6rem; line-height: 2.4rem; text-align: left; color: #7e7e7e; margin: 1.6rem auto 2rem; } #header #gnb_wrap #gnb > ul > li > .sub .sub_left .bottom { display: none; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li > a { position: relative; text-align: left; border: 1px solid #ccc; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: 16px; padding: 0.4rem 1rem; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li > a > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 85%; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li > a::after { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); font-family: "xeicon"; font-size: 14px; content: "\e93e"; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li > a:focus, #header #gnb_wrap #gnb > ul > li > .sub > ul > li > a:hover { border-color: #2d3091; } } .blinking { -webkit-animation: blink 1.5s ease-in-out infinite alternate; -moz-animation: blink 1.5s ease-in-out infinite alternate; animation: blink 1.5s ease-in-out infinite alternate; } @-webkit-keyframes blink { 0% { opacity: 0.2; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 0.2; } 100% { opacity: 1; } } @keyframes blink { 0% { opacity: 0.2; } 100% { opacity: 1; } } .wide #content_wrap .top .sub_nav { text-align: right; margin-top: 14px; margin-right: 128px; } #content_wrap .top .sub_nav { display: block; margin-top: 0; margin-right: 0; } #content_wrap .top .sub_nav a { position: relative; color: #9b9b9b; } #content_wrap .top .sub_nav a:last-child { color: #000; font-weight: 500; } #content_wrap .top .sub_nav a span { font-size: 1.7rem; color: #292929; vertical-align: middle; } #content_wrap .top .sub_nav a::after { display: inline-block; position: relative; vertical-align: middle; font-family: "xeicon"; font-size: 1.7rem; content: "\e93f"; margin: 0 0.4rem 0 0.6rem; } #content_wrap .top .sub_nav a:last-child:after { content: none; } #content_wrap .top .sub_nav a i { font-size: 1.7rem; color: #7b766d; } .wide #content_wrap .top .utill { float: left; } .wide #content_wrap .top { position: absolute; width: 100%; border-bottom: 1px solid #676767; padding: 10px 0; top: 0; } #content_wrap .top { position: relative; top: inherit; border-bottom: 1px solid #676767; padding: 10px 0 20px; margin-bottom: 20px; } #content_wrap .top .utill { position: absolute; top: 50%; right: 0; transform: translateY(-50%); float: none; } #content_wrap .top .utill button { display: inline-block; float: none; position: relative; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 1px solid #bcbcbc; vertical-align: top; margin-right: 0.6rem; color: #545454; -webkit-transition: all 0.3s; transition: all 0.3s; } #content_wrap .top .utill button:focus, #content_wrap .top .utill button:hover { background: #333; } #content_wrap .top .utill button:focus > i, #content_wrap .top .utill button:hover > i { color: #fff; } #content_wrap .top .utill button:last-child { margin-right: 0; } #content_wrap .top .utill .share .list { visibility: hidden; overflow: hidden; position: absolute; top: 4rem; left: 50%; height: 0; margin-top: 0; padding: 0; border: 1px solid #ddd; background-color: #fff; opacity: 0; transform: translate(-50%, 0); transition: margin-top 0.3s, opacity 0.3s; } #content_wrap .top .utill .share .list::before { position: absolute; left: 50%; top: -0.5rem; width: 0.8rem; height: 0.8rem; margin-left: -0.4rem; border-top: 1px solid #ddd; border-left: 1px solid #ddd; background-color: #fff; content: ""; transform: rotate(45deg); } #content_wrap .top .utill .share .list a { display: block; } #content_wrap .top .utill .share .list a > i { font-size: 2rem; margin: 0.4rem 0; } #content_wrap .top .utill .share.active .list { visibility: visible; overflow: visible; height: auto; margin-top: 0.6rem; padding: 1rem 2rem; opacity: 1; z-index: 1; } input[type="text"]::-ms-clear { display: none; } #header .utill { position: absolute; top: 60px; right: 5.7rem; height: 88px; display: flex; align-items: center; } /* #header .utill > .on_air, */ #header .utill > .login, #header .utill > button { display: flex; align-items: center; justify-content: center; } #header .utill > .login { margin-right: 19px; } #header .member_btns { display: flex; top: 4px; align-items: center; padding: 3px 0; position: absolute; background: #e9e9e9; border-radius: 5px; } #header .member_btns a { display: inline-block; position: relative; padding: 0 17px !important; vertical-align: middle; text-align: center; font-size: 14px; font-weight: 500; } #header .member_btns a::after { position: absolute; width: 1px; height: 15px; background: #b1b1cf; top: 3px; right: 0; content: ""; } #header .member_btns a:last-child:after { content: none; } #header.scrolled .member_btns a { color: #292929; } #header .login a:last-child { padding-right: 0; margin-right: 0; } .snb ul.other li:nth-child(4) { font-weight: 500; color: #ffc924; } #quick_nav.news { top: 0; right: -100px; background: transparent; border-radius: 0; padding: 0; box-shadow: none; } #quick_nav.news a i { font-size: 51px; color: #442c19; line-height: 0.8; } #quick_nav.news a p { margin-top: 0; } #quick_nav.news ul li { margin-bottom: 10px; } #quick_nav.news ul li a { background: #ffeb01; border-radius: 20px; padding: 16px 0; box-shadow: 10px 10px 10px rgb(0 0 0 / 3%); } #quick_nav.news ul li a:focus p, #quick_nav.news ul li a:hover p { text-decoration: underline; text-underline-position: under; } #quick_nav.news ul li.allnews a { border-radius: 20px; padding: 6px 0; background: #0a93fa; box-shadow: 10px 10px 10px rgb(0 0 0 / 3%); color: #fff; } #quick_nav.news ul li.allnews a i { display: block; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: #2c62da; margin: 0 auto 0.4rem; font-size: 2.6rem; color: #fff; } #quick_nav.news ul li.dataroom a { border-radius: 20px; padding: 9px 0; background: #60d4ff; box-shadow: 10px 10px 10px rgb(0 0 0 / 3%); color: #311f1d; } #quick_nav.news ul li.dataroom a i { display: block; margin: 0 auto 0.4rem; font-size: 4rem; color: #15286e; } #quick_nav.news ul li.allnews a i img { height: auto; } .quick_nav_wrap.fixed { position: fixed; top: 28%; } #footer.news .footer_links { line-height: 50px; } .quick_nav_wrap { position: absolute; top: 10%; right: 0; -webkit-transition: all 1s; transition: all 1s; z-index: 1; } .quick_nav_wrap.sub { top: 21%; } .quick_nav_wrap.sub.fixed { top: 28%; } #quick_nav.news.sub { padding: 6px 0; background: #0a93fa; } #quick_nav.news.sub a i { font-size: 0; line-height: normal; margin-bottom: 4px; } #quick_nav.news.sub a i img { height: auto; } #quick_nav.news.sub a p { color: #fff; font-size: 15px; line-height: 1.4; } #quick_nav.news.sub a:nth-child(1) i { display: block; width: 3.8rem; height: 3.8rem; border-radius: 50%; background: #2c62da; margin: 0 auto 0.4rem; font-size: 2.6rem; color: #fff; } #quick_nav.news.sub a:nth-child(1) i::before { position: relative; top: 0.5rem; } .main .sub_visual { margin-bottom: 20px; } .section03 .half > div:first-child a.more_link { top: -32px; } #content_wrap .tb_style02 { table-layout: fixed; } #footer a.pop-link { display: inline-block; height: 15px; line-height: 14px; padding: 0 4px; border: 1px solid #ccc; background-color: #fff; color: #949494; font-size: 11px; margin-left: 5px; } /* 2025 메인개편 */ #header{ background: rgba(0, 0, 0,0); border-bottom: none; height: 144px; } #header.scrolled, #wrap:has(.mobile_wrap.on) #header, body.on #header, #wrap.sub #header{ background: #fff; border-bottom: 1px solid #ddd; } #header .logo_wrap{ left: 59px; margin-top: 0; top: 88px; transform: translateY(0); } #header .logo_wrap .logo a{ width: 17.8rem; height: 3.1rem; } #header #gnb_wrap #gnb > ul > li{ margin-right: 4.5rem; } #header #gnb_wrap #gnb > ul > li > a{ color: #fff; font-family: 'Inter'; font-size: 2rem; display: flex; height: 100%; align-items: center; padding: unset; } #header.scrolled #gnb_wrap #gnb > ul > li > a, #wrap:has(.mobile_wrap.on) #header #gnb_wrap #gnb > ul > li > a, body.on #header #gnb_wrap #gnb > ul > li > a, #wrap.sub #header #gnb_wrap #gnb > ul > li > a{ color: #212121; } #header #gnb_wrap #gnb > ul > li a.news span{ display: flex; align-items: center; justify-content: center; width: 125px; height: 43px; font-size: 19px; font-weight: 700; font-family: 'Inter'; border-radius: 900px; color: #fff; padding: 2px; transition: all .2s linear; border: 1px solid #c8c8c8; position: relative; } #header.scrolled #gnb_wrap #gnb > ul > li a.news span, #wrap:has(.mobile_wrap.on) #header #gnb_wrap #gnb > ul > li a.news span, body.on #gnb_wrap #gnb > ul > li a.news span, #wrap.sub #gnb_wrap #gnb > ul > li a.news span{ background: linear-gradient(112deg, #E7280E 6.88%, #1D2088 93.18%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #header #gnb_wrap #gnb > ul > li a.news span::before{ display: block; position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); background: url('/html1/images/main02/menu-bg.png')no-repeat center center; background-size: contain; content: ''; opacity: 0; visibility: hidden; transition: all 0.2s linear; } #header #gnb_wrap #gnb > ul > li a.on.news span{ border: none; } #header #gnb_wrap #gnb > ul > li a.on.news span::before{ opacity: 1; visibility: visible; } #header #gnb_wrap #gnb > ul > li > a.on.news:before{ display: none; } #header #gnb_wrap{ display: flex; align-items: center; justify-content: space-between; height: 80px; } #header #gnb_wrap #gnb{ width: 72rem; height: 100%; } #header .login > a{ color: #fff; } #header.scrolled .login > a, #wrap:has(.mobile_wrap.on) #header .login > a, body.on #header .login > a, #wrap.sub #header .login > a{ color: #666; } .on_air{ display: flex; align-items: center; } .on_air > .title { display: flex; align-items: center; } .on_air > .title > .red { width: .6rem; height: .6rem; border-radius: 50%; background: #ed1c23; display: inline-block; vertical-align: middle; } .on_air > ul{ margin-left: .6rem; position: relative; } .on_air > ul > li p{ color: #fff; font-size: 1.7rem; font-weight: 700; font-family: 'Inter'; cursor: pointer; } #header.scrolled .on_air > ul > li p, #wrap:has(.mobile_wrap.on) #header .on_air > ul > li p, body.on .on_air > ul > li p,#wrap.sub .on_air > ul > li p{ color: #32383E; } .on_air ul .live{ position: absolute; bottom: -40px; left: 50%; width: 129px; height: 40px; background: #2E2F47; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); transform: translateX(-50%); opacity: 0; visibility: hidden; transition: all .2s linear; z-index: 2; } .on_air ul .live.hover{ opacity: 1; visibility: visible; } .on_air ul .live ul{ width: 100%; display: flex; align-items: center; justify-content: center; gap: 33px; height: 100%; } .on_air ul .live ul li a{ color: #fff; font-size: 13px; font-weight: 500; } .on_air ul .live ul li + li a{ position: relative; } .on_air ul .live ul li + li a::before{ display: block; position: absolute; top: 50%; left: -16.5px; width: 1px; height: 14px; background: rgba(217, 217, 217, 0.20); content: ''; transform: translateY(-50%); } .on_air .report{ margin-left: 1.4rem; } .on_air .report a{ display: flex; align-items: center; justify-content: center; width: 7rem; height: 3.2rem; background: #fff; border-radius: 10rem; font-size: 1.6rem; font-weight: 600; color: #3F71A2; } #header.scrolled .on_air .report a, #wrap:has(.mobile_wrap.on) #header .on_air .report a, body.on .on_air .report a, #wrap.sub .on_air .report a{ background: #f2f2f2; } /* 관리자 로그인 시 보이는 화면 */ #header.admin #gnb_wrap{ max-width: 1120px; } #header.admin .utill > .login{ flex-wrap: wrap; width: 230px; height: 100%; align-items: flex-start; } #header.admin .login > a{ order: 2; } #header.admin .member_btns{ position: relative; top: 4px; width: 100%; order: 1; } @media (max-width: 1920px) and (min-width:1681px){ #header #gnb_wrap{ max-width: 960px; } #header.admin #gnb_wrap{ max-width: 880px; } } @media (max-width: 1820px) { #header #gnb_wrap{ padding: unset !important; } } @media (max-width: 1680px) and (min-width:1201px){ #header .on_air{ padding-right: 20px; } #header #gnb_wrap{ justify-content: flex-start; gap: 40px; } #header #gnb_wrap #gnb{ padding-left: 130px; width: 80rem; } #header.admin #gnb_wrap{ margin-left: 90px; gap: 20px; padding-left: 1rem; justify-content: flex-start; } #header .logo_wrap .logo a{ width: 16rem; } #header #gnb_wrap #gnb > ul > li > .sub > ul > li{ width: 22%; } #header .logo_wrap{ left: 30px; } #header .utill{ right: 30px; } } @media (max-width: 1420px) and (min-width:1201px){ #header #gnb_wrap #gnb{ padding-left: 210px; width: 70rem; } #header.admin #gnb_wrap #gnb{ padding-left: 0; } #header #gnb_wrap #gnb > ul > li a.news span{ width: 100px; height: 35px; } } @media (max-width: 1420px){ #header #gnb_wrap #gnb > ul > li a.news span{ font-size: 16px; width: 110px; height: 37px; } #header.admin #gnb_wrap{ margin-left: 200px; } #header.admin #gnb_wrap #gnb{ width: 49rem; } #header.admin .utill > .login{ margin-right: 5px; } } @media (max-width: 1200px){ #header #gnb_wrap #gnb{ display: none; } #header .logo_wrap{ left: 20px; } #header .utill{ right: 20px; } .on_air{ position: relative; left: 0; margin-left: 251px; } .news-lnb .wrap{ padding: 0 20px; } #header.admin #gnb_wrap{ width: 100%; margin-left: 0; } .banner-wrap{ display: none; } } #container.main:has(.visual){ padding-top: 64px; } .quick_nav_wrap{ display: none !important; } .replay .content_tab .tab_txt ul li a.active{ background-color: rgba(255, 255, 255, .1); } #container:has(.news-lnb) .wide #content_wrap .top .sub_nav{ margin-right: 60px; } /* 헤더 띠배너 추가 */ #header .header-banner{ background: linear-gradient(0deg, #253352 0%, #253352 100%), linear-gradient(90deg, #DAF1CC 0%, #E0F5F1 50%, #D0F4F8 75%, #88F1DD 100%); height: 64px; } #header .header-banner a{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* 광고배너 */ .banner-wrap{ position: fixed; width: 1200px; margin: 0 auto; top: 230px; left: 50%; transform: translateX(-50%); -webkit-transition: all 1s; transition: all 1s; z-index: 1; opacity: 0; visibility: hidden; } .banner-wrap.active{ opacity: 1; visibility: visible; } .sub .banner-wrap{ opacity: 1; visibility: visible; top: 40%; } body:has(#header.scrolled) .sub .banner-wrap{ top: 30%; } .banner-wrap .banner-list{ position: absolute; top: 0; display: flex; flex-direction: column; } .banner-wrap .banner-list.left{ left: -191px; } .banner-wrap .banner-list.right{ right: -191px; } .banner-wrap .banner-list a{ position: relative; width: 136px; height: 192px; } .banner-wrap .banner-list a img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* 배너사이즈조정 */ .banner-wrap .banner-list{ gap: 20px; } .banner-wrap .banner-list a{ width: 300px; } .banner-wrap .banner-list.left{ left: -330px; } .banner-wrap .banner-list.right{ right: -330px; } @media (max-width: 1870px){ .banner-wrap .banner-list.left{ left: -310px; } .banner-wrap .banner-list.right{ right: -310px; } } @media (max-width: 1820px){ .banner-wrap{ width: 100%; } .banner-wrap .banner-list.left{ left: 0; } .banner-wrap .banner-list.right{ right: 0; } .banner-wrap .banner-list a{ width: 250px; } } /* 배너닫기버튼추가 */ .banner-wrap .exit{ width: 40px; height: 40px; border-radius: 50%; background: #2F2F2F; margin: 0 auto; position: relative; } .banner-wrap .exit i { display: inline-block; width: 100%; height: 100%; background: url(/html1/images/layout/exit.svg)no-repeat center center; }