﻿@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
  font-family: 'NanumBarunGothic';
  src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
  src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'),
       url(webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format('woff'),
       url(webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format('truetype');
}

@font-face {
  font-family: 'NanumSquare';
  src: url(webfont/NanumSquare/NanumSquareR.eot);
  src: url(webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'),
       url(webfont/NanumSquare/NanumSquareR.woff) format('woff'),
       url(webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}

@font-face {
  font-family: 'PlayfairDisplay-Variable';
  src: url('webfont/PlayfairDisplay/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'pretendard-variable';
  src: url('webfont/Pretendard/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'pretendard-light';
  src: url('webfont/Pretendard/Pretendard-Light.woff2') format('woff2'),
       url('webfont/Pretendard/Pretendard-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'pretendard-regular';
  src: url('webfont/Pretendard/Pretendard-Rebular.woff2') format('woff2'),
       url('webfont/Pretendard/Pretendard-Rebular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'pretendard-bold';
  src: url('webfont/Pretendard/Pretendard-Bold.woff2') format('woff2'),
       url('webfont/Pretendard/Pretendard-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'pretendard-extrabold';
  src: url('webfont/Pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
       url('webfont/Pretendard/Pretendard-ExtraBold.woff') format('woff');
  font-display: swap;
}

@-webkit-keyframes zoomin {0% {-webkit-transform: scale(1.2);} 100% {-webkit-transform: scale(1);}}

  #bandMessage {bottom: 50% !important;}
  #findForm {padding: 145px 0 !important;}
  #unit3561 #daumRoughmapContainer1605512905563 {width: 100% !important;}
  .subgnbnav {display: flex;width: 1340px;font-size: 22px;justify-content: space-around;}
  .subgnbnav a {text-align: center;width: 100%;height: 60px;display: flex;justify-content: center;align-items: center;}
  .subgnbnav li {text-align: center;width: 100%;}
  .activemenu {background: #ccc;}

/* font select */
  body * {font-family: pretendard, sans-serif;letter-spacing: -0.5px;}
  a:focus {outline: none;}

/* header */
  #gnb-login #header {display: inline-block;right: 2%;top: 50%;text-align: right;position: absolute;transform: translateY(-50%);}
  #gnb-login #header .header-box-right a {font-size: 17px;color: #fff;text-decoration: none;padding: 10px 15px;display: inline-block;}

/* gnb */
  #gnb-wrap {background-color: transparent !important;height: 130px;position: fixed;width: 100%;z-index: 999;transition: all 0.6s;float: left;}
  #gnb-wrap .container {position: relative;}
  #gnb-wrap .gnbM {display: grid;width: 100%;height: 100%;}
  #gnb-wrap .gnbM #gnbT {position: relative;background-color: transparent;display: flex;align-items: center;}
  #gnb-wrap .gnbM #gnbB {position: relative;}
  #gnb {margin: 0 auto;text-align: center;border: none;width: 50%;height: 125px;display: flex;align-items: flex-end;justify-content: space-between;padding: 0 0 40px;position: relative;}
  #gnb > li.depth1 {float: left;text-align: center;padding: 0;font-weight: bold;transition: all 0.2s ease-in-out;outline: none;position: relative;}
  #gnb > li.more {display: inline-flex;align-items: center;justify-content: center;}
  #gnb > li.more span {font-size: 20px;color: #fff;}
  #gnb > li.more:last-child {display: none;}
  #gnb > li.login {float: left;text-align: center;line-height: 100px;padding: 0;height: 100px;font-weight: bold;transition: all 0.2s ease-in-out;outline: none;width: 80px;}
  #gnb > li.start {margin-left: 70px;}
  #gnb > li.bar {width: 30px;}
  #gnb > li > a {font-size: 20px;color: #fff;text-decoration: none;font-weight: bold !important;padding: 45px 0;transition: color 0.3s;}
  #gnb > li > a:before {content: "";width: 7px;height: 7px;background-color: #fff;position: absolute;display: inline-block;border-radius: 50%;top: 75%;transform: translate(50%, -50%);right: 50%;opacity: 0;transition: 0.3s all;display: none;}
  #gnb > li > a:hover:before {opacity: 1;transition: 0.3s all;}
  #gnb > li.active > a:before {opacity: 1;transition: 0.3s all;}
  #gnb > li.login > a:hover,
  #gnb > li.login > a.active {text-decoration: none;border: none;}
.gnbBTN.toggle {display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff;transition:color .3s, transform .3s;}
.gnbBTN.toggle .hamburger_icon {width:28px;height:28px;}
.gnbBTN.toggle:hover {transform:scale(1.08);}
/* 스크롤 시 헤더가 흰색으로 바뀌는 경우 */
#header.on .gnbBTN.toggle,
#header.white .gnbBTN.toggle {color:#1f4fa3;}

/* === GNB 드롭다운 (코나비즈 스타일) === */
  .subal {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);min-width: 160px;padding: 16px 0;background: #fff;border-radius: 12px;box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);list-style: none;margin: 14px 0 0;visibility: hidden;opacity: 0;transition: opacity 0.25s ease, margin-top 0.25s ease, visibility 0s 0.25s;z-index: 9999;}
  .subal::before {content: "";position: absolute;top: -18px;left: 0;right: 0;height: 18px;}
  #gnb > li.depth1:hover .subal,
  #gnb > li.depth1:focus-within .subal {visibility: visible;opacity: 1;margin-top: 8px;transition: opacity 0.25s ease, margin-top 0.25s ease, visibility 0s 0s;}
  .subal > li {display: block;width: 100%;text-align: center;height: auto;}
  .subal > li > a {display: block;padding: 10px 24px;font-size: 16px;font-weight: 500;color: #333;text-decoration: none;white-space: nowrap;transition: color 0.2s, background 0.2s;}
  .subal > li > a:hover,
  .subal > li > a:focus {color: #1f4fa3;background: #f5f7fb;}
  .subal .depth3 {display: none;}

/* sub-bottom */
  .sub-bottom li {text-align: center;}
  .sub-bottom .container {display: flex;justify-content: space-around;padding: 0 0 2%;}
  .sub-bottom .container .row {width: 50%;}
  .sub-bottom li {display: inline-block;}
  .sub-bottom li a {display: inline-block;padding: 40px 20px 20px;position: relative;text-decoration: none;float: left;color: black;font-size: 19px;white-space: nowrap;overflow: hidden;width: 100%;float: left;}
  .sub-bottom li a .btn-plus {transform: translate(-50%, -50%);width: 10px;height: 10px;left: 50%;display: inline-block;position: absolute;top: 25%;border-radius: 50%;background-color: #6e7abe;opacity: 0;}
  .sub-bottom ul {display: flex;justify-content: space-evenly;}
  .sub-bottom li:hover a .btn-plus,
  .sub-bottom li.active a .btn-plus {opacity: 1;transition: 0.3s all;}

  .sub-top-ul2 {justify-content: center;align-items: stretch;border-bottom: 1px solid #eee;}
  .sub-top-ul2 li {display: inline-block;word-break: keep-all;margin: 0 0.5em;}
  .sub-top-ul2 li a {padding: 20px;font-size: 1.8rem;display: block;width: 100%;}
  .sub-top-ul2 li:hover {border-bottom: 1px solid S;transition: 0.3s all;}
  .sub-top-ul2 li:hover a {color: #2B5DA4;transition: 0.3s all;}
  .sub-top-ul2 li.active {border-bottom: 1px solid #fe7c74;font-weight: bold;}
  .sub-top-ul2 li.active a {color: #2B5DA4;}
  .sub-top-ul2 li a {color: #333;text-decoration: none;}

  .sub-cont {position: relative;}
  .sub-cont .subtop-bottom {background-color: rgba(255, 255, 255, 1);position: relative;bottom: 0;padding: 2% 0 0%;width: 100%;}
  .sub-cont .subtop-bottom .subtop-menu ul {text-align: center;display: flex;flex-wrap: wrap;justify-content: center;}
  .sub-cont .subtop-bottom .subtop-menu ul li {display: inline-block;}
  .sub-cont .subtop-bottom .subtop-menu ul li a {display: inline-block;padding: 52px 13px 25px;font-size: 17px;font-weight: 700;text-decoration: none;color: #343434;position: relative;}
  .sub-cont .subtop-bottom .subtop-menu ul li p {display: inline-block;padding: 52px 0px 25px;font-size: 17px;font-weight: 700;text-decoration: none;color: #343434;position: relative;}
  .sub-cont .subtop-bottom .subtop-menu ul li a .btn-plus {position: absolute;top: 40%;left: 45%;background: #f1592a;width: 6px;height: 6px;border-radius: 50%;text-align: center;opacity: 0;transition: all 0.3s linear;}
  .sub-cont .subtop-bottom .subtop-menu ul li a:hover .btn-plus,
  .sub-cont .subtop-bottom .subtop-menu ul li.active a .btn-plus,
  .sub-cont .subtop-bottom .subtop-menu ul li a:focus .btn-plus {opacity: 1;}

  .flex {display: flex;}
  .point {position: absolute;bottom: -91px;left: 46%;margin-left: -9px;display: none;opacity: 1;}

/* all-menu */
  .gnb-all {display: none;position: fixed;z-index: 9999;background: rgba(0, 0, 0, 0.7);top: 0;left: 0;width: 100%;height: 100%;text-align: center;}
  .gnb-all a {color: #fff;text-decoration: none;}
  .gnb-all img {margin: 80px 0px 50px;max-width: 185px;}
  .gnb-all .all-wrapper .all-close {color: #fff;cursor: pointer;font-weight: 600;font-size: 5em;float: right;}
  .gnb-all .all-wrapper .container a {display: block;color: #fff;}
  .gnb-all .all-wrapper .container > ul > li {display: inline-block;vertical-align: top;padding: 0px 25px;}
  .gnb-all .all-wrapper .container > ul > li > a {margin: 0px 0px 18px;font-size: 25px;font-weight: 600;text-decoration: none;}
  .gnb-all .all-wrapper .container > ul > li:first-child {display: none;}
  .gnb-all .all-wrapper .container > ul > li > ul > li > a {color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 20px;padding: 6px 0px;}
  .gnb-all .all-wrapper .container > ul > li > ul > li > a:hover {font-weight: bold;transition: 0.2s all ease;}
  .gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a {color: #fff;display: block;margin-bottom: 9px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 16px;}

/* gnb2 (사용 안 함 - 숨김) */
  .gnb2 {display: none !important;}

/* logo */
  .logo-wrap {position: absolute;top: 50%;left: 0;transform: translateY(-50%);}

  #footer-map {background-color: #DADADA;}
  #footer-map #sitemap-wrap {background-color: #FFF;padding: 80px 0;display: none;}
  #footer-map #sitemap {margin: 70px 0;text-align: center;margin-top: 40px;}
  #footer-map #sitemap a {text-decoration: none;}
  #footer-map #sitemap a:hover {font-weight: bold;transition: 0.2s all;}
  #footer-map #sitemap > li {display: inline-block;vertical-align: top;padding: 0px 30px;text-align: left;width: 15%;}
  #footer-map #sitemap > li > a {color: #708da2;font-size: 19px;font-weight: 600;}
  #footer-map #sitemap > li > ul {margin-top: 15px;}
  #footer-map #sitemap > li > ul > li {padding: 3px 0px;}
  #footer-map #sitemap > li > ul > li > a {color: #555555;font-size: 15px;}
  #footer-map #sitemap > li > ul > li > a:hover {color: #30318B;transition: all ease 0.3s;}
  #footer-map #sitemap > li > ul > li > ul > li {padding-left: 10px;}
  #footer-map #sitemap > li > ul > li > ul > li > a {color: #777;font-size: 14px;}
  #footer-map #sitemap .depth3 {margin: 3px 0 0;}
  #footer-map #sitemap .depth3 li {font-size: 17px;padding: 3px 0;}

/* footer */
  #footer {background-color: #000;display: inline-block;width: 100%;}
  #footer .footM {display: inline-flex;padding: 70px 0 75px;width: 100%;align-items: flex-end;justify-content: space-between;}
  #footer .footM ul {font-size: 17px;line-height: 1.5;letter-spacing: 0;}
  #footer .footM ul li {color: #fff;line-height: 2;font-size: 16px;}
  #footer .footM .footL {width: 60%;}
  #footer .footM .footL ul {text-align: right;}
  #footer .footM ul li hr {width: 8%;border: 2px solid #fff;margin: 10px auto 15px 0;}
  #footer .footM ul li a {color: #fff;text-decoration: none;font-size: 16px;}

/* mobile gnb */
  .header-gnb {position: absolute;top: 50%;right: 0%;transform: translateY(-50%);word-spacing: 10px;display: inline-flex;align-items: center;gap: 25px;height: 100%;}
  .header-gnb .gnbBTN {font-size: 16px;color: #fff;text-decoration: none;}
  .header-gnb .gnbMORE {font-size: 17px;color: #fff;}
  .header-gnb .toggle {color: #fff !important;font-size: 30px;}
  .header-gnb .mmymenu {padding: 55px;height: 103%;position: relative;}
  .header-gnb .mmymenu img {position: absolute;transform: translate(-50%, -50%);top: 50%;}

  #my-menu {background-color: rgba(0, 0, 0, 0.3);max-width: 240px;z-index: 4;}
  #mm-0:before {height: 0 !important;}
  #mm-1 > ul > li:hover > a.mma1 {color: #34b4c7 !important;}
  .mm-navbar.mm-hasbtns .mm-close .mm-sronly {display: none;}
  .mm-navbars-top {background-color: rgba(0, 0, 0, 0.75);}
  .mm-btn {top: unset !important;}
  .mm-menu .mm-listview > li .mm-next:after {border-color: #fff;}
  .mm-panels > .mm-panel > .mm-listview {margin: 0px !important;}
  .mm-panels > .mm-panel.mm-hasnavbar {padding-top: 0 !important;}
  .mm-panels > .mm-panel {padding: 0;}
  .mm-panels,
  .mm-panels > .mm-panel {z-index: 9999;}
  .mm-listview {margin: 0;}
  .mm-listview > li > a,
  .mm-listview > li > span {padding: 10px 10px 10px 20px;margin: 0;}
  .mm-listview .mm-vertical .mm-panel,
  .mm-vertical .mm-listview .mm-panel {padding: 0 0 0 10px;}
  .mm-listview > li > a,
  .mm-listview > li > span {padding: 10px 20px !important;font-size: 17px;}
  .closeMenu {color: #fff !important;text-decoration: none !important;cursor: pointer;font-size: 40px;position: absolute;right: 0;top: 5%;}
  .mob-login {overflow: hidden;padding: 15px 0;border-bottom: 1px solid #808080;margin-bottom: 10px;}
  .mob-login li {float: right;overflow: hidden;}
  .mob-login a {display: inline-block !important;font-size: 17px !important;border: 0px !important;box-shadow: none !important;color: #aaa !important;padding: 0px 10px !important;}
  .mob-login a .fa {font-size: 20px !important;}
  .mmenu-depth1 > a {color: #fff !important;}
  .mmenu-depth2 > a {color: #E4E3B9 !important;}
  .mmenu-depth3 > a {color: #B4EBF1 !important;}
  a.mm-next {width: 100% !important;}
  .subul {text-align: center;}

/* 실시간생방송 */
  .latest-special {margin-bottom: 30px;margin-left: 18px;}
  .latest-special .p4 {font-size: 30px;padding-left: 15px;position: relative;color: #000000;top: 15px;}
  .latest-special .white-bar {background: #7c8789;width: 1px;height: 22px;display: inline-block;margin: -20px 13px;}
  .jubowrapper {display: inline-block;position: relative;top: 13px;font-size: 13px;opacity: 0.8;}
  .latest-special .p4 span {color: #948e8f;}

/* sub */
  .subTitle {position: absolute;top: 55%;text-align: center;width: 100%;border: none;display: block;transform: translate(0, -50%);}
  .sub-rel {width: 100%;position: relative;overflow: hidden;}
  .subtopM {overflow: hidden;}
  #subtop {position: relative;height: inherit;width: 100%;top: 0;z-index: 0;background-size: cover !important;background-position: 50% 50% !important;opacity: 0.8;height: 300px;-webkit-animation: zoomin 9s 1;animation: zoomin 9s 1;}
  #subtop img {width: 100%;}
  .subgnb-home {position: absolute;top: 70%;text-align: center;width: 100%;border: none;display: block;transform: translate(0, -50%);text-align: center;font-weight: bold;color: #ffd4d4;}
  .subgnb-home a {text-decoration: none;color: #ffd4d4;}
  #subgnb .container > div {margin: 10px 0;display: inline-block;}
  #subgnb span,
  #subgnb a {font-size: 16px;color: #777;position: relative;top: 3px;text-decoration: none;text-align: center;}
  #subgnb a.active {color: #6599CB;font-weight: bold;}
  #subgnb .dropdown {display: inline-block;border-right: 1px solid #CCCCCC;float: left;}
  #subgnb .dropdown:last-child {border: none;}
  #subgnb .dropdown .btn {padding: 10px 20px;font-size: 17px;font-weight: bold;}
  #subgnb .dropdown .btn-default {border: none;}
  #subgnb .dropdown .btn:hover {background-color: transparent !important;transition: 0.3s all ease;}
  #subgnb .dropdown .btn,
  #subgnb .dropdown .btn .active {background-color: transparent !important;}
  #subgnb .dropdown-menu > li > a {padding: 10px 20px;transition: 0.3s all ease;font-size: 17px;}
  #subgnb .caret {border-top: 6px solid #000;border-bottom: 6px solid transparent;border-right: 6px solid transparent;border-left: 6px solid #000;position: relative;margin: 0;height: 8px;width: 8px;transform: rotate(225deg);transition: all 0.6s;margin-top: -15px;margin-left: 20px;}

  #content {padding: 120px 0px;}
  #content .third-menus {margin: 10px 0 42px 0;text-align: center;}
  #content .third-menus ul {display: inline-block;}
  #content .third-menus ul li {border: 1px solid #dedede;float: left;margin-left: -1px;}
  #content .third-menus ul li a {color: #333;text-decoration: none;padding: 8px 17px;font-size: 12px;min-width: 160px;display: inline-block;text-align: center;}
  #content .third-menus ul li.active a {color: #fff;}
  #sub_title {font-size: 40px;font-weight: bold;margin: 0;display: inline-block;padding: 0px 0px 20px;width: 100%;float: left;color: #fff;}

  .lnb {padding: 0px 30px;}
  .lnb_title {font-size: 30px;border-bottom: 1px solid #000;padding: 40px 0px;font-weight: 600;text-align: center;position: relative;}
  .sub-left-triangle {position: absolute;right: 0px;top: 0;width: 0;height: 0;border-left: 30px solid transparent;border-top-width: 30px;border-top-style: solid;border-top-color: #6599CB;}
  .sub_depth2 {margin-top: 0px;padding-top: 0px;}
  .sub_depth2 li {padding: 20px 25px;border-bottom: 1px solid #ddd;transition: all ease 0.3s;}
  .sub_depth2 li.active,
  .sub_depth2 > li:hover {background: #d9d3f2;}
  .sub_depth2 > li > a {color: #777;font-weight: 600;font-size: 17px;text-decoration: none;}
  .sub_depth2 li a {color: #777;font-weight: 600;font-size: 16px;text-decoration: none;}
  .sub_depth2 li i {position: relative;margin: 3px 15px 0px 0px;cursor: pointer;float: right;font-size: 16px;}
  .sub_depth2 li i.fa-minus {display: none;}
  .sub_depth2 li:last-child {border-color: #000;}
  .sub_depth3 {padding: 0px 15px;margin-top: 15px;display: none;}
  .sub_depth3.active {display: block;}
  .sub_depth3 li {padding: 10px 20px;border-bottom: 1px solid #999;background-color: #f4c9ff;}
  .sub_depth3 li a {color: #999;font-size: 15px;text-decoration: none;transition: all ease 0.3s;}
  .sub_depth3 li a:hover {color: #739AB9;}
  .sub_depth3.a_96 li a:hover {color: #4E5397;}
  .sub_depth3.a_98 li a:hover {color: #E4C640;}

  #gnb-wrap.white {background-color: rgba(0, 0, 0, 0.3) !important;}

@media (min-width: 1620px) {
  #gnb-wrap .container {width: 1620px;}
}

@media (min-width: 1340px) {
  .container {width: 1340px;}
}

@media (max-width: 1699px) {
  #gnb {width: 50%;}
}

@media (max-width: 1499px) {
  .logo-wrap {width: 190px;}
  #gnb {width: 50%;}
  .header-gnb {gap: 10px;}
}

@media (max-width: 1199px) {
  .logo-wrap {left: 3%;}
  #gnb {right: 55%;}
  #gnb > li > a {font-size: 17px;}
  .header-gnb .mmymenu {padding: 40px;}
  #footer .footerM {grid-template-columns: 1fr;padding: 20px 0;}
  #footer .footerM .footerR {order: 2;padding: 0;}
  #footer .footerM .footerL {order: 1;padding-bottom: 20px;}
}

@media (max-width: 992px) {
  .sub-rel {padding-top: 90px;}
  .sub-top-ul2 li a {padding: 12px;}
  #gnb-wrap {height: 90px;}
  #footer .footM .footL {width: 50%;}
  #footer .footerM ul li {font-size: 15px;}
}

@media (max-width: 991px) {
  .subal {display: none;}
}

@media (max-width: 767px) {
  .row {margin: 0;}
  #gnb-wrap .container {width: 100%;}
  .header-gnb .toggle {padding: 15px;}
  .sub-rel {padding-top: 60px;}
  #sub_title {font-size: 24px;}
  #subgnb span,
  #subgnb a {padding: 10px !important;font-size: 15px !important;}
  #subtop {height: 160px !important;}
  .subTitle {top: 55% !important;}
  #gnb-wrap {height: 60px;}
  .logo-wrap {width: 120px;}
  .sub-top-ul2 {flex-wrap: wrap;}
  .sub-cont .subtop-bottom .subtop-menu ul li a {padding: 25px 5px 5px;}
  .sub-cont .subtop-bottom .subtop-menu ul li a .btn-plus {top: 20%;}
  #content {padding: 30px 0px;}
  #footer .footM {flex-direction: column;align-items: flex-start;}
  #footer .footM .footL {width: 100%;}
  #footer .footerM {flex-wrap: wrap;}
  #footer .footerM .footerL ul {padding: 20px 0 0;}
  #footer .footerM .footerL a h1 {font-size: 13px;}
  #footer .footerM .footerR ul {padding: 20px 0 20px;}
  #footer .footerM .footerR ul li {flex-direction: column-reverse;align-items: flex-start;}
  #footer .footM ul li {text-align: left;}
}

@media (max-width: 340px) {
}

@media (max-width: 320px) {
}
