/*----------------------------
# html body
# --main-font: _header.in.script.php
----------------------------*/
/* CSS 파일 상단 */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--black) !important;
  color: var(--white) !important;
}

/* 트랜지션 제거 (중요!) */
/* 처음 로딩될 때 transition이 있으면 색이 변하는 과정이 눈에 보여서 깜빡임처럼 느껴집니다. */
html {
  transition: none !important; 
  background: var(--white);
}
html[data-theme="dark"] {
  background: var(--black)!important;;
}
/* JS로 넣은 인라인 스타일을 초기화하고 싶다면 (선택사항) */
body {
  transition: none !important; 
  background: inherit;
}
body {
  display: block;
  overflow-x:hidden;
  font-size: 16px;
  line-height: 1.6;
  font-family: var(--main-font);
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}
body::after{
  position:absolute; 
  overflow:hidden; 
  width:0; 
  height:0; 
  z-index:-1;
}
/* capture mode element hide */
body.hide-ui-for-capture #goto_btn,
body.hide-ui-for-capture #news_progress_bar,
body.hide-ui-for-capture .gnb3 {
    display: none !important;
}
/*----------------------------
#Skip Navigation [all the same]
----------------------------*/
#goto_skip {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 0;
    padding: 0;
    background: red;
    z-index: 100;
    overflow: hidden;
    text-align: center
}
#goto_skip.on {
    padding: 10px;
    overflow: auto
}
#goto_skip.on a {
    color: var(--white);
    padding: 5px
}
#skiptocontent a {
    padding: 6px;
    color: var(--white);
    border-right: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    border-bottom-right-radius: 8px;
    background: transparent;
    z-index: 100
}
#skiptocontent a {
    -webkit-transition: top 1s ease-out,background 1s linear;
    transition: top 1s ease-out,background 1s linear
}
#skiptocontent a:focus {
    position: absolute;
    left: 0;
    top: 0;
    background: #bf1722;
}
#skiptocontent a:focus {
    -webkit-transition: top .1s ease-in,background .5s linear;
    transition: top .1s ease-in,background .5s linear
}
/*----------------------------
#wrap & header
----------------------------*/
#wrap{
  width:100%;
  position: relative;
  margin:0 auto;
  padding:0;
}
.wrap_panel{
  position: relative;
  display: block;
  margin:0 auto;
  padding:0 var(--wrap_panel-padding-full);
  background:none;
  width:100%;
  max-width:1300px;
}

/*----------------------------
#header > gnb_topbar
----------------------------*/
#header {
  position: relative;
}
/* 상단바 컨테이너 */
#header .gnb_topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: var(--bg-image-blue);
  position: relative;
  min-height:60px;
  padding: 15px 20px;
  z-index: 1000; /* 다른 요소보다 위에 오도록 설정 */
}

/* 문구 및 버튼 컨테이너 */
#header .gnb_topbar .go-container {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
  flex: 1; /* 중앙 정렬을 돕기 위해 확장 */
  justify-content: center;
}

/* 링크 및 버튼 공통 스타일 */
#header .gnb_topbar .go-container a {
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.4s ease; /* 전환 효과 부드럽게 */
  opacity: 1;
}

/* [추가] 슬라이드 전환 시 숨김 상태 (스크립트와 연동) */
#header .gnb_topbar .go-container a.hide {
  opacity: 0;
}

/* 바로가기 버튼 전용 (필요 시 여백 등 추가) */
#header .gnb_topbar .go-container .go-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-eee);
  border-radius: 3.125rem; /* 50px */
  color: var(--white);
  font-size: 0.75rem;      /* 12px */
  padding: 0.125rem 0.875rem; /* 2px 14px */
  white-space: nowrap;
  line-height: 1.25rem;    /* 20px */
}
/* 닫기 버튼 */
#header .gnb_topbar #topbox-close {
  position:absolute;
  top:15px;
  right:35px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  padding: 0;
  font-size: 24px; /* X 아이콘 크기 조정 */
  color: var(--white);
  border: 1px solid transparent; /* translate -> transparent 오타 수정 */
  cursor: pointer;
  line-height: 1;
  transition: transform 0.2s;
}

#header .gnb_topbar #topbox-close:hover {
  transform: scale(1.2); /* 호버 시 살짝 커지는 효과 */
}
/*----------------------------
#header > gnb1
----------------------------*/
#header .gnb1{
   position: relative;
   padding-top: 10px;
    margin: 0 auto;
}
#header .gnb1 .panel{
	display: flex;
    justify-content: space-between;

}
#header .gnb1 .panel .gnb1-left{
   display:flex;
   align-items: center;
   font-size:14px;
   font-weight:400;
   color:#333;
}
#header .gnb1 .panel .gnb1-left .slogan1{
   font-size:13px;
   color:#333;
   font-weight:400;
}
#header .gnb1 .panel .gnb1-left .slogan2{
   font-size:13px;
   color:#333;
   font-weight:400;
}
#header .gnb1 .panel .gnb1-left .slogan2::before{
   content:"-";
   margin-left:5px;
   margin-right:5px;
}
#header .gnb1 .panel .gnb1-right{
   display: flex;
   justify-content: row;
}
#header .gnb1 .panel .gnb1-right .item{
   margin-left:15px;
   font-size:13px;
   color:#333;
   font-weight:400;
}
#header .gnb1 .panel .gnb1-right .item:first-child{
   margin-left:0;
}
#header .gnb1 .panel .gnb1-right .item a{
   color:#333;
}
#header .gnb1 .panel .gnb1-right .item.on a{
   color:#003766;
   font-weight:500;
}
#header .gnb1 .panel .gnb1-right .item a:hover{
   text-decoration: underline;
}
/*----------------------------
#header > gnb2
----------------------------*/
#header .gnb2{
  display:block;
  margin:0 auto;
}
#header .gnb2 .panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  margin:0 auto;
  padding:30px 0;
  width:100%
}
/* 로고 중앙 고정 */
#header .gnb2 .panel .gnb-logo {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

#header .gnb2 .panel .gnb-logo .logo h1 {
  margin: 0;
  line-height: 1;
  font-size: 0;
}

#header .gnb2 .panel .gnb-logo .logo a {
  display: flex;
  align-items: center;
  justify-content: center;
}

#header .gnb2 .panel .gnb-logo .logo .logo-svg {
  display: block;
  width: 150px;
  height: auto;
  max-width: 100%;
}
/* 좌측 */
#header .gnb2 .panel .gnb-left{
  width:35%;
  height:50px;
  flex:1;
}
/* 우측 */
#header .gnb2 .panel .gnb-right{
  width:35%;
  height:50px;
  flex:1;
  text-align:right;
}

#header .gnb2 .panel .gnb-left .nsp-catchphrase1 {
  position:relative;
  display:flex;
  flex-direction: column;
}
#header .gnb2 .panel .gnb-left .nsp-catchphrase1 .line1, 
#header .gnb2 .panel .gnb-left .nsp-catchphrase1 .line2 {
  color: var(--gray-666);
  font-size:16px;
  font-weight:700;
  line-height: 1.3;
  font-family: "Noto serif KR";
 }
#header .gnb2 .panel .gnb-left .nsp-catchphrase1 .line1{
  padding-left:0;
}
#header .gnb2 .panel .gnb-left .nsp-catchphrase1 .line2{
  padding-left:0;
}

#header .gnb2 .panel .gnb-left .nsp-catchphrase1 .line1::before{
  content:"??;
  position:absolute;
  margin-top:-10px;
  left:0;
  font-size:36px;
  color:var(--gray-ccc);
}

#header .gnb2 .panel .gnb-left .nsp-catchphrase1 .line2::after{
  content:"??;
  position:absolute;
  margin-top:-10px;
  right:0;
  font-size:36px;
  color:var(--gray-ccc);
}
#header .gnb2 .panel .gnb-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 1;
  font-size: 17px;
  font-weight: 500;
  gap:20px;
}
#header .gnb2 .panel .gnb-right .item {
  padding: 0;
  position: relative;
  flex-wrap: nowrap;
}
#header .gnb2 .panel .gnb-right .item:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0;
  right:-10px;
  width:1px;
  height:100%;
  background:var(--gray-ccc);
}
}
/*----------------------------
#header > gnb_menu
----------------------------*/
.gnb_menu {
   position: relative;
   display:flex;
   align-items: center
}
.gnb_menu a {
   position: relative;
   display: flex;
   align-items: center;
}
.gnb_menu a i {
   border:1px solid var(--white);
}
.gnb_menu .cssbtn_menu_info{
   color:var(--gray-666);
}
/*----------------------------
#header > gnb3
----------------------------*/
#header .gnb3 {
  display: none;
  width: 100%;
  z-index: 999990;
  margin: 0 auto;
  padding: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-ddd);
}
#header .gnb3:after {
    content: "";
    display: block;
    clear: both
}
#header .gnb3 .panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px
}
#header .gnb3 .panel .logo {
  position: absolute;
  left: 0;
  display:flex;
  align-items: center;
}
#header .gnb3 .panel .logo .gnb3-logo span{
  margin-top:7px;
}
#header .gnb3 .panel .logo .gnb3-title{
  margin-left:10px;
  font-size:18px;
  font-weight:700;
}
#header .gnb3 .panel .gnb3-menu {
   position: absolute;
   right: 0;
   line-height: 1
}
#header .gnb3 .panel .gnb3-menu .material-icons{
  font-size:32px;
  font-weight:400;
}
#header .gnb3 .panel .gnb3-subject {
   display:block;
   overflow:hidden;
   width:100%;
   height:26px;
   max-width:800px;
   text-align:center;
   font-size:18px;
   font-weight:500;
}
/*----------------------------
#gnb_nav topmenu
----------------------------*/
.gnb_nav{
  margin:0 auto;
  padding-top:0px;
  border-top: 1px solid var(--gray-ddd);
  border-bottom:1px solid var(--gray-ddd);
  height:50px;
}
.gnb_nav .panel {
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.gnb_nav .panel .topmenu {
  display:block;
  position: relative;
  width:100%;
}
.gnb_nav .panel .topmenu ul {
  display: flex;
  align-items: center;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:25px;
  margin:0 auto;
  padding:0;
}
.gnb_nav .panel .topmenu ul li i{
  font-size:16px;
  color: var(--gray-999);
  line-height:1;
}
.gnb_nav .panel .topmenu ul.lang-en{gap:20px;}
.gnb_nav .panel .topmenu ul.lang-cn{gap:20px;}
.gnb_nav .panel .topmenu ul.lang-jp{gap:20px;}
.gnb_nav .panel .topmenu ul.lang-ru{gap:15px;}
.gnb_nav .panel .topmenu ul.lang-vn{gap:15px;}
.gnb_nav .panel .topmenu ul li{
   display: flex;
   align-items: center;
   padding:12px 0;
}
.gnb_nav .panel .topmenu ul li a{
  font-size:17px;
  font-weight:500;
}
.gnb_nav .panel .topmenu ul li.on a{
   color:var(--nsp-blue);
  font-weight:700;
}
.gnb_nav .panel .topmenu ul li a.ru{
  font-size:16px;
}
.gnb_nav .panel .topmenu ul li.on a.ru{
  color:var(--nsp-blue);
}
.gnb_nav .panel .topmenu .submenu-news,
.gnb_nav .panel .topmenu .submenu-country,
.gnb_nav .panel .topmenu .submenu-report,
.gnb_nav .panel .topmenu .submenu-kfme,
.gnb_nav .panel .topmenu .submenu-news_issue ,
.gnb_nav .panel .topmenu .submenu-tv  {
  display: none;
  position: absolute;
  top: 49px;
  margin-left: -10px;
  padding:0;
  z-index: 100;
  min-width: 160px;
  background-color: var(--white);
  border:1px solid var(--gray-ddd);
}
.gnb_nav .panel .topmenu .dropdown-news:hover .submenu-news,
.gnb_nav .panel .topmenu .dropdown-country:hover .submenu-country,
.gnb_nav .panel .topmenu .dropdown-report:hover .submenu-report,
.gnb_nav .panel .topmenu .dropdown-kfme:hover .submenu-kfme,
.gnb_nav .panel .topmenu .dropdown-news_issue:hover .submenu-news_issue ,
.gnb_nav .panel .topmenu .dropdown-tv:hover .submenu-tv {
   display: block;
}
.gnb_nav .panel .topmenu ul li .submenu{
  padding:15px 15px;
}
.gnb_nav .panel .topmenu ul li .submenu ul{
  display: flex;
  flex-direction: column;
  gap:10px;
}
.gnb_nav .panel .topmenu ul li .submenu ul li {
  display: block;
  position: relative;
  margin: 0 auto;
  padding:0;
  width:100%;
}
.gnb_nav .panel .topmenu ul li .submenu ul li a{
   font-size:15px;
   font-weight:400;
   color:var(--gray-333);
}
.gnb_nav .panel .topmenu ul li .submenu ul li a:hover {
   color:var(--nsp-blue);
   text-decoration: underline;
}

/*----------------------------
#gnb_nav > topmenu > swipe
----------------------------*/
/* 1. sidemenu 간격 제거 */
.gnb_nav .panel .sidemenu {
	width:none;
	flex: 0 0 auto;
	margin-left: 10px;
	background-color: var(--white); /* 메뉴 글자와 겹칠 때를 대비하려면 #fff */
	z-index: 5;
}
/* 3. 상단 메뉴: 가로 스와이프 핵심 설정 */
.gnb_nav .panel .topmenu {
	overflow-x: auto; /* 가로 스크롤 허용 */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
}
/* 4. 메뉴 리스트 한 줄 정렬 */
.gnb_nav .panel .topmenu ul {
	display: flex;
	flex-wrap: nowrap; /* 줄바꿈 절대 방지 */
	padding-right: 20px; /* 마지막 메뉴 뒤 여백 */
}
/* 5. 메뉴 항목 디자인 보정 */
.gnb_nav .panel .topmenu ul li {
	padding: 0; /* a 태그에서 높이 조절 */
	flex: 0 0 auto; /* 글자 길이에 따라 너비 자동 유지 */
}
.gnb_nav .panel .topmenu ul li a {
	display: block;
	line-height: 50px; /* gnb_nav 높이에 맞춰 수직 중앙 정렬 */
}
/* 모바일에서 불필요한 아이콘(화살표 등) 숨김 */
.gnb_nav .panel .topmenu ul li i {
	display: none !important;
}
/* 스크롤바 숨기기 (선택 사항) */
.gnb_nav .panel .topmenu::-webkit-scrollbar {
	display: none;
}
.gnb_nav .panel .topmenu {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
/* 기존 스크롤바 숨김 코드를 제거하거나 아래 코드로 덮어쓰기 */
.gnb_nav .panel .topmenu::-webkit-scrollbar {
	display: block !important; /* 스크롤바 강제 노출 */
	height: 3px; /* 아주 얇게 */
}
.gnb_nav .panel .topmenu::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.1); /* 아주 연한 회색 */
	border-radius: 3px;
}
.gnb_nav .panel .topmenu::-webkit-scrollbar-track {
	background-color: transparent;
}


/*----------------------------
# 드롭다운메뉴 일단 보류 =====> 개발에서 재검토2026-03-20
----------------------------*/
.gnb_nav .panel .topmenu ul li i {
	display: none !important;
}
.gnb_nav .panel .topmenu .dropdown-news:hover .submenu-news,
.gnb_nav .panel .topmenu .dropdown-country:hover .submenu-country,
.gnb_nav .panel .topmenu .dropdown-report:hover .submenu-report,
.gnb_nav .panel .topmenu .dropdown-kfme:hover .submenu-kfme,
.gnb_nav .panel .topmenu .dropdown-news_issue:hover .submenu-news_issue ,
.gnb_nav .panel .topmenu .dropdown-tv:hover .submenu-tv {
	display: none !important;
}

/*----------------------------
#gnb_nav > topmenu > sidemenu
----------------------------*/
.gnb_nav .panel .sidemenu{
  display:flex;
  align-items: center;
  left:0;
  line-height:1;
  font-size:16px;
  font-weight:500;
}
/* default label 보정 */
.gnb_nav .panel .sidemenu label {
    padding: 0;
}
.gnb_nav .panel .sidemenu .side_menu a{
  margin-left:15px;
}
.gnb_nav .panel .sidemenu .side_menu a .special-link{
  color: var(--indigo);
}
.gnb_nav .panel .sidemenu .side_menu a .special-link:hover{
  color: var(--cyan);
}
.gnb_nav .panel .sidemenu .gnb_menu i{
   margin-left:10px;
   margin-right:0;
   font-size:36px;
   font-weight:400;
}
/*----------------------------
#header gnb_side_bg
#(www=m) side gnb_menu_box (AD z-index: 2147483645 < gnb_search_bg < gnb_search)
----------------------------*/
#gnb_side_bg {
    display: none;
    position: fixed;
    z-index: 100000000;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    background: var(--black);
    opacity: .7
}
#gnb_side {
    display: none;
    position: fixed;
    z-index: 100000001;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 90%;
	max-width:640px;
    height: 100%;
    background: var(--white)
}
#gnb_side .gnb_panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-y: scroll;
  margin-bottom:200px; /* footer fixed 대응*/
}
#gnb_side .gnb_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 20px 40px;
}
#gnb_side .gnb_header .gnb_header_title{
    display: flex;
    flex-direction: column;
}
#gnb_side .gnb_header .gnb_close a i{
    border:1px solid var(--white);
    font-size:36px;
	color: var(--gray-666);
}
#gnb_side .gnb_header .gnb_close a:hover i{
    border:1px solid var(--gray-eee);
}
#gnb_side .gnb_header .gnb_title {
    font-size: 22px;
    color: #333;
    font-weight: 700
}
#gnb_side .gnb_header .gnb_title2 {
    font-size: 13px;
    color: var(--gray-666);
    font-weight: 400
}

#gnb_side .gnb_search {
    display: block;
    margin: 0;
    padding:0 40px 20px 40px;
}
#gnb_side .gnb_wrap {
   position: relative;
   padding: 0px 40px;
}
#gnb_side .gnb_wrap ul.menu li.mitem {
    position: relative;
    padding: 10px 0;
    border-top: 1px solid var(--gray-ddd)
}
#gnb_side .gnb_wrap ul.menu li.mitem:last-child {
    border-bottom: 1px solid var(--gray-ddd)
}

#gnb_side .gnb_wrap ul.menu li.mitem:after {
    content: "";
    display: block;
    clear: both
}
#gnb_side .gnb_wrap ul.menu li.mitem .subtitle a {
    display: block;
    font-size: 17px;
    color: var(--black);
    font-weight: 500
}
#gnb_side .gnb_wrap ul.menu li.mitem .subtitle a:hover {
    color: var(--blue);
}
#gnb_side .gnb_wrap ul.menu li.mitem .subtitle a.on {
    color: var(--blue);
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu {
    border-top: 1px solid var(--gray-eee);
    margin-top: 10px;
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 10px 0;
    grid-auto-rows: minmax(auto,auto)
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu li:nth-child(3n+1) {
    grid-column: 1 / span 1
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu li:nth-child(3n+2) {
    grid-column: 2 / span 1
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu li:nth-child(3n+3) {
    grid-column: 3 / span 1
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu li a {
    display: block;
    color: var(--gray-666);
    margin-top: 5px;
    font-size: 16px;
    font-weight: 400;
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu li a:hover {
    color: var(--blue);
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu li.on a {
    color: var(--blue);
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu1 {
    ;border-top: 1px solid var(--gray-eee);
    margin-top: 10px;
    padding-top: 10px;
    display: block
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu1 li a {
    display: block;
    color: var(--gray-666);
    margin-top: 5px;
    font-size: 16px;
    font-weight: 400;
}
#gnb_side .gnb_wrap ul.menu li.mitem ul.submenu1 li a:hover {
    color: var(--blue);
}
.accordion-container .accordion-icon {
  position: absolute;
  right:0;top:0;
  margin:0 auto;
  padding: 0px 40px;
  font-size: 30px;
  font-weight: 700;
  color: var(--gray-666);
  cursor: pointer;
  border:0px solid red;
}
.accordion-icon.open {
  color: #00aaa7;
}
.accordion-container .accordion-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 15px;
  height: 2px;
  transform: rotate(90deg);
  background: var(--gray-666);
  transition: all .1s ease-in-out;
}
.accordion-container .accordion-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 15px;
  height: 2px;
  background: var(--gray-666);
  transition: all .1s ease-in-out;
}
.accordion-container .accordion-icon.open::before {
  transform: rotate(180deg);
}
.accordion-container .accordion-icon.open::after {
  opacity: 0;
}

#gnb_side .gnb_footer {
  position: fixed;
  width:100%;
  bottom:0;
  z-index: 100000000;
  display:flex;
  flex-direction: column;
  padding: 0 40px;
  background: var(--gray-fa)
}
#gnb_side .gnb_footer .global{
  margin-top: 20px;
  display:flex;
}
#gnb_side .gnb_footer .global .item{
  padding: 0 5px;
  border-left: 0 solid var(--gray-ccc)
}
#gnb_side .gnb_footer .global .item:first-child {
  padding-left: 0;
  border-left: 0
}
#gnb_side .gnb_footer .global .item a {
  font-size: 14px
  color: var(--gray-666);
}
#gnb_side .gnb_footer .global .item a:hover {
  text-decoration: underline;
}
#gnb_side .gnb_footer .sns{
  margin-top: 20px;
  margin-bottom: 50px;
}

/*----------------------------
#sns: gnb_side & footer
----------------------------*/
.sns ul {
   display:flex;
   gap:15px;
}
.sns ul li a {
   display:flex;
   align-items: center;
}

.sns ul li a .sns-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--gray-f0);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.sns li a:hover .sns-icon-wrap {
  color: var(--blue);
}

#gnb_search {
   display: none;
   position: absolute;
   z-index: 9999999991;
   top: 0;
   width: 100%;
   margin-top: 115px;
   padding: 0;
   background: var(--gray-fa);
   border-bottom: 1px solid var(--gray-ddd)
}
#gnb_search:after {
   content: "";
   display: block;
   clear: both
}
/*----------------------------
#container
----------------------------*/
#container {
    position: relative;
    margin: 0 auto;
    padding: 0
}
#container:after {
    content: "";
    display: block;
    clear: both
}
#container .panel {
    position: relative
}
#container .panel:after {
    content: "";
    display: block;
    clear: both
}
/*----------------------------
#footer
----------------------------*/
#footer {
  position:relative;
  border-top: 1px solid var(--gray-ddd);
  padding:40px 0;
}
#footer .menubar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#footer .menubar .menu ul{
  display:flex;
  align-items: center;
  padding:10px 0;
}

#footer .menubar .menu ul li{
  font-size: 15px;
  line-height: 15px;
  font-weight:400;
}
#footer .menubar .menu ul li + li{
  position:relative;
  font-size: 15px;
  line-height: 15px;
  font-weight:400;
  margin-left:10px;
  padding-left:10px
}
#footer .menubar .menu ul li + li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:13px;
  background: var(--gray-ccc);
}
#footer .menubar .menu ul li.bold {
  font-weight: 500;
}
#footer .menubar .menu ul li a {
  color: var(--black)
}
/*
#footer .menubar .sns ul {
   position: relative;
   display: inline
}
#footer .menubar .sns ul li {
   float: left;
   margin-left: 15px
}
#footer .menubar .sns ul li a {
   display:flex;
   align-items: center;
}

#footer .menubar .sns ul li a .sns-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--gray-f0);
    border-radius: 50%;
    transition: all 0.3s ease;
}
*/
#footer .copyright {
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top:20px;
  padding:0;
}
#footer .copyright .company-name {
  font-size: 16px;
  font-weight:700;
  color: var(--gray-666);
}
#footer .copyright .company-info {
  font-size: 14px;
  font-weight:400;
  color: var(--gray-333);
  margin: 0;
  padding: 2px 0;
}

#footer .copyright .company-info span{
  word-break: keep-all;
}
#footer .copyright .company-info span + span{
  position:relative;
  margin-left:7px;
  padding-left:7px;
  word-break: keep-all;
}
#footer .copyright .company-info span + span::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
/*  top:50%;*/
/*  transform:translateY(-50%);*/
  width:1px;
  height:13px;
  background: var(--gray-ccc);
}
#footer .copyright .company-info .com_youth .privacy-child{
  display:inline-flex;
}
#footer .copyright .company-info .com_youth .privacy-child i.material-icons-outlined{
  font-size:14px;
  color: var(--gray-999);
  margin-left:3px;
  margin-top:4px;
}

#footer .copyright .global-info{
   display:flex;
   flex-direction: column;
   margin-top:25px;
}
#footer .copyright .global-info .factiva{
   font-size: 14px;
   font-weight: normal;
   color: var(--indigo);
   margin-right:20px;
   margin-bottom:7px;
   word-break: keep-all;
}
#footer .copyright .global-info .global{
   display:flex;
   align-items: center;
}
#footer .copyright .global-info .global .item a{
   font-size: 15px;
   margin-right: 10px;
   color: #333;
}
#footer .copyright .global-info .global .item  a:hover{
   text-decoration: underline;
}

#footer .logo-partner{
   display:flex;
   align-items: center;
   margin-top:15px;
}
#footer .logo-partner .logo_kina{
   width:180px;
   margin-left:10px;
}
/*----------------------------
# goto_btn
#999990 - header gnb3 fix
#999991 - goto-top
#999992 - image-modal
----------------------------*/
#goto_btn a {
  position: fixed;
  display:flex;
  justify-content: center;
  align-items: center;
  z-index: 999991;
  text-align: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--gray-ddd);
  background: var(--white);
}
#goto_btn a:hover {
   background: var(--white);
   color: var(--blue);
   text-decoration: none;
}
#goto_btn #goto_top a {
   bottom: 20px;
   right: 10px;
   border-radius:50%;
}
/*
#goto_btn #goto_home a {
   bottom: 137px;
   right: 10px;
   border-top-left-radius:5px;
   border-top-right-radius:5px;
}
#goto_btn #goto_menu a {
   bottom: 98px;
   right: 10px;
}

#goto_btn #goto_top a {
   bottom: 59px;
   right: 10px;
   border-radius:50%;
}
#goto_btn #goto_dark a {
   bottom: 20px;
   right: 10px;
   color: var(--blue);
   border-bottom-left-radius:5px;
   border-bottom-right-radius:5px;
}
[data-theme="dark"] #goto_btn #goto_dark a {
  background: var(--black);
  color: var(--blue);
}
[data-theme="dark"] #goto_btn a {
  background: var(--black);
}*/
/*----------------------------
# wrap_popup
----------------------------*/
#wrap_popup {
   margin: 0 auto;
   padding: 0;
}
#wrap_popup:after {
   content: "";
   display: block;
   clear: both
}
#header_popup {
   display: block;
   position: fixed;
   z-index: 9990;
   width: 100%;
   height: 45px;
   margin: 0 auto;
   padding: 0;
   background: #248;
   border-bottom: 5px solid #56b205;
}
#header_popup .gnb {
   display: block;
   margin: 0 auto;
   padding: 0;
}
#header_popup .gnb h3.popup_title {
   padding: 10px;
   color: var(--white);
   font-weight:700;
}
#header_popup .gnb .close a {
   position: absolute;
   right: 0;
   top: 0;
   width: 45px;
   height: 45px;
   box-sizing: border-box;
   padding: 15px;
   background: var(--nsp-blue);
}
#header_popup:after {
   content: "";
   display: block;
   clear: both;
}
#container_popup {
   display: block;
   box-sizing: border-box;
   padding: 50px 20px 20px 20px;
   margin-top: 0 auto;
}
#container_popup2 {
   padding-left: 220px;
   border: 0 solid var(--red);
}
#container_popup2:after {
   content: "";
   display: block;
   clear: both
}
#container_popup2 .snb {
   position: fixed;
   z-index: 9990;
   top: 50px;
   left: 0;
   width: 200px;
   padding: 20px;
   margin: 0
}
#container_popup2 .content {
   position: relative;
   top: 50px;
   text-align: left;
   margin: 0;
   box-sizing: border-box;
   padding: 20px;
}
/*----------------------------*/
/* wrap_print */
#wrap_print {
   margin:0 auto;
   padding:0;
}
#wrap_print .print_container {
   padding:0;
   margin:0 auto;
}
/*
#wrap_popup{margin:0 auto;padding:0;top:0}
#wrap_popup .popup_header{position:fixed;z-index:99999;width:100%;top:0}
#wrap_popup .popup_header{margin:0 auto;padding:0;background-color:var(--gray-eee);border-bottom:1px solid var(--gray-ccc);}
#wrap_popup .popup_header h3.popup_title{font-size:15px;padding:10px;background-color:var(--blue);color:var(--white);font-weight:bold}
#wrap_popup .popup_header .close a{position:absolute;right:10px;top:10px;width:20px;height:20px;}
#wrap_popup .popup_container{padding:30px 10px 10px 10px; margin:0 auto;}
*/
/*=====================================================================
# default config [all the different ] 
=====================================================================*/
a{
  color:var(--text-alink);
  text-decoration:none;
  background:transparent;
}
a:visited{
  color:var(--text-alink-visited);
}
a:hover,
a:active,
a:focus{
  color:var(--text-alink-hover);
  text-decoration:none;
}
/*a:hover .u{color:#0068ff;text-decoration:underline;} */
/*a:hover{display:inline;border-bottom:1px solid var(--gray-666);padding-bottom:3px;}*/

/*=====================================================================
# noimg box
=====================================================================*/
.noimg{
  display:flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;

  padding:0 20px;
  width:100%;
  height:100%;
  border-radius:7px;
  background-image: var(--bg-image-gray);
}
.noimg .keyword1{font-size:18px;font-weight:700; color:var(--indigo);}
.noimg .stockcode{font-size:15px;font-weight:400; color:var(--gray-666);}

/*=====================================================================
# news_list
=====================================================================*/
.news-list ul{
  display:flex;
  flex-direction: column;
  margin-bottom:10px;
}
.news-list ul  li{
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  padding-top:25px;
  border-bottom:1px solid var(--gray-ddd);
  flex-wrap: wrap;
  position:relative;
}
.news-list ul li:first-child { padding-top:0;}
.news-list ul li:last-child { margin-bottom:20px}
.news-list ul  li .image{
  position:relative;
  width:250px;
  min-width:250px;
  aspect-ratio: auto 16 / 9;
  margin-left:30px;
  margin-bottom:25px;
}
.news-list ul li .text {width:100%;flex:1;margin-bottom:25px;}
.news-list ul li .text .subject {font-size:20px;font-weight:500; }
.news-list ul li .text .category{margin-top:10px;font-size:14px;font-weight:400;color:var(--gray-666);}
.news-list ul li .text .content {margin-top:5px;font-size:16px;font-weight:400;color:var(--gray-666);}
.news-list ul li .newslink {margin-bottom:25px;}
.news-more {
   display:flex;
   align-items: center;
   justify-content: center;
   margin-top:30px;
}
.news-more > span,
.news-more > a span {
   display:flex;
   align-items: center;
   justify-content: center;
   font-size:18px;
   font-weight:700;
   border:1px solid var(--nsp-blue);
   background:var(--nsp-blue);
   color:var(--white);
   border-radius:30px;
   padding:15px 75px;
   cursor:pointer;
}
.news-more > span:hover,
.news-more > a span:hover{
   border:1px solid var(--nsp-blue);
   background:var(--nsp-blue);
}
.recently .news-list > ul{padding-top:0;border-top:0}
.recently .news-list > ul > li:last-child {padding-bottom:0;border-bottom:0}

.news-list .scrollAD {
  display:block;
  margin-top:30px;
}

/*=====================================================================
# summary
=====================================================================*/
.summary {
  position: relative;
  overflow:hidden;
  margin-bottom:10px;
  padding-left:15px;
}
.summary p{
  line-height: 1.4;
  font-weight: 500;
  color: var(--gray-666);
  margin-bottom:10px;
  word-break: keep-all;
}
.summary p:before {
  position: absolute;
  content: "•";
  color: var(--gray-666);
  left: 0px;
  margin-top: -3px;
  padding: 0px;
}

/*----------------------------*/
/*  newslink
/*----------------------------*/
.newslink {
   position:relative;
   width: 100%;
   display: flex;
   flex-direction: column;
}
.newslink > p {
   margin-top: 7px;
   display: flex;
   align-items: center;
   margin-inline-start: 0;
  position: relative;
  padding-left:20px;
}
.newslink > p::before {
  content: "┗";
  position: absolute;
  top: 3px;
  left: 0px;
  font-size: 12px;
  color: var(--gray-333);
}
}
/*
.newslink > p{
  position: relative;
  padding-left:5px;
  
}
.newslink > p::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gray-333);
}
*/
/*----------------------------
# nsp-best-news  23A8E0/007aff
----------------------------*/
.newsbox-best{
  margin-top:5px;
}

.newsbox-best .navigation{
  display:flex;
  justify-content: space-between;
  margin-top:20px;
}
 .newsbox-best .navigation .button{
   display:flex;
   gap:5px;
}
.newsbox-best .navigation .pagination {
   font-size:15px;
   font-weight:400;
   padding:0 5px;
}
.newsbox-best .navigation i.material-symbols-outlined {
   display:flex;
   font-variation-settings:
   'FILL' 0,
   'wght' 100,
   'GRAD' 0,
   'opsz' 24
}
.newsbox-best .navigation i.material-symbols-outlined:hover {
   color:var(--cyan);
}

ul.nsp-best-news > li {
   margin: 0 auto;
   padding-top:15px;
}
ul.nsp-best-news > li:first-child {
   border-top: 0;
   padding-top: 0
}
ul.nsp-best-news > li {
   display: flex;
   justify-content: space-between;
  /*align-content: flex-start*/
}
ul.nsp-best-news > li .image {
  position: relative;
  overflow: hidden;
  width: 68px;
}
ul.nsp-best-news > li .image .photo_resize{
  position: relative;
  overflow: hidden;
  width: 68px;
  height: 68px;
  border-radius: 50%;
}
ul.nsp-best-news > li .text {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
ul.nsp-best-news > li .text .num {
   margin-top: 0;
   font-size: 18px;
   font-weight:700;
   margin-right: 15px;
   color: var(--nsp-blue);
}
ul.nsp-best-news > li .text .subject {
   margin-top: 0;
   font-size: 16px;
   font-weight: 500;
   color: var(--gray-333);
   
}
ul.nsp-best-news > li .text .on {
   font-size: 18px;
   font-weight: 500;
}
/*=====================================================================
# home main
=====================================================================*/
.main {
  display:flex;
  flex-direction: column;
  width:100%;
  position: relative;
  margin:0 auto;
  padding: 0;
}
.main .main-panel {width:100%;margin:0 auto;padding: 50px 0;}
.main .main-panel:nth-child(1n) {background:transparent;}
.main .main-panel:nth-child(2n) {background:var(--gray-f9);border-top:1px solid var(--gray-eee);border-bottom:1px solid var(--gray-eee);}

/*----------------------------*/
/*top1-A*/
/* 18.75rem = 300px */
/*----------------------------*/
.main .grid1 .top1-A {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 18.75rem);
  grid-template-rows: auto auto;
  gap:0 3.125rem; /* 50px */
}
.main .grid1 .top1-A .top1-1 { grid-column: 1; grid-row: 1;}
.main .grid1 .top1-A .top1-2 { grid-column: 1; grid-row: 2;}
.main .grid1 .top1-A .top1-3 { grid-column: 2; grid-row: 1 / span 2;}
.main .grid1 .top1-A .top1-3 {position:relative;}
.main .grid1 .top1-A .top1-3:before {
  content:"";
  position:absolute;
  top:0;
  left:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid1 .top1-A .top1-1 ul li {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 60%);
  grid-template-rows: auto auto;
  gap: 30px;
}
.main .grid1 .top1-A .top1-1 ul li .toptitle { grid-column: 1 / span 2; grid-row: 1;}
.main .grid1 .top1-A .top1-1 ul li .text { grid-column: 1; grid-row: 2;}
.main .grid1 .top1-A .top1-1 ul li .image { grid-column: 2; grid-row: 2;}

.main .grid1 .top1-A .top1-1 ul li .toptitle .subject{
  font-size:36px;
  font-weight:700;
  line-height:1.4;
  margin:0;
  padding:0 10%;
  text-align:center;
  
}
.main .grid1 .top1-A .top1-1 ul li .image {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto 16/9;
}
/* default is style_nsp_default.css */
.main .grid1 .top1-A .top1-1 ul li .text .summary p{
  font-size: 18px;
  font-weight: 500;
}

.main .grid1 .top1-A .top1-1 ul li .text .content {margin-bottom:10px;font-size:15px;font-weight:400;color:var(--gray-666);}
.main .grid1 .top1-A .top1-1 ul li .text .category{margin-bottom:10px;font-size:14px;font-weight:400;color:#333;}
.main .grid1 .top1-A .top1-1 ul li .text .newslink{margin-bottom:10px;}

.main .grid1 .top1-A .top1-2{
  width:100%;
  margin-top:25px;
  padding-top:15px;
  border-top:1px solid var(--gray-ddd);
}
.main .grid1 .top1-A .top1-2 ul li{
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-top:15px;
  padding:0;
  flex-wrap: wrap;
}

.main .grid1 .top1-A .top1-2 ul li .image {
  position:relative;
  width:200px;
  min-width:200px;
  aspect-ratio: auto 16 / 9;
  margin-left:20px;
}
.main .grid1 .top1-A .top1-2 ul li .text {width:100%;flex:1;}
.main .grid1 .top1-A .top1-2 ul li .text .subject {font-size:20px;font-weight:500;}
.main .grid1 .top1-A .top1-2 ul li .text .content {margin-top:5px;font-size:15px;font-weight:400;color:var(--gray-666);}

.main .grid1 .top1-A .top1-3 ul li .text .subject {font-size:16px;font-weight:500;}
/*----------------------------*/
/*top1-B*/
/*----------------------------*/
.main .grid1 .top1-B {
  display: grid;
  grid-template-columns: minmax(auto, 18.75rem) 1fr minmax(auto, 18.75rem);
  gap:50px;
}
.main .grid1 .top1-B .top1-1 {order: 2;}
.main .grid1 .top1-B .top1-2 {order: 1;}
.main .grid1 .top1-B .top1-3 {order: 3;}

.main .grid1 .top1-B > div {
  position: relative;
}
.main .grid1 .top1-B > div:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0;
  right:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid1 .top1-B .top1-1 ul li {
  display: grid;
  grid-template-columns: 1fr;
  gap:0;
}
.main .grid1 .top1-B .top1-1 ul li .toptitle { order: 2; }
.main .grid1 .top1-B .top1-1 ul li .image { order: 1; }
.main .grid1 .top1-B .top1-1 ul li .text { order: 3;}
/*.main .grid1 .top1-B .top1-1 ul li dl { order: 4;}*/

.main .grid1 .top1-B .top1-1 ul li .toptitle {
  position:relative;
  font-size:30px;
  font-weight:700;
  line-height:1.5;
  margin-top:10px;
}
.main .grid1 .top1-B .top1-1 ul li .image {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: auto 16/9;
  margin-bottom:10px;
}

/* default is style_nsp_default.css */
.main .grid1 .top1-B .top1-1 ul li .text .summary{
  margin-top: 20px;
}
.main .grid1 .top1-B .top1-1 ul li .text .summary p{
  font-size: 18px;
  font-weight: 500;
  line-height:1.2;
}

.main .grid1 .top1-B .top1-1 ul li .text .content{
  display:block;
  margin-top:15px;
  color:var(--gray-666);
}
.main .grid1 .top1-B .top1-1 ul li .text .newslink{margin-top:10px;}
.main .grid1 .top1-B .top1-1 ul li dl {display:none;}

.main .grid1 .top1-B .top1-2 ul li{
  position:relative;
  padding:15px 0;
  border-top:1px solid var(--gray-ddd);
}
.main .grid1 .top1-B .top1-2 ul li:first-child {
  padding-top:0;
  border-top:0;
}
.main .grid1 .top1-B .top1-2 ul li {
  position:relative;
}
.main .grid1 .top1-B .top1-2 ul li .image {
  position: relative;
  width:100%;
  aspect-ratio: 16 / 9;
  margin-bottom:10px;
}
.main .grid1 .top1-B .top1-2 ul li .text {width:100%;flex:1;}
.main .grid1 .top1-B .top1-2 ul li .text .subject {font-size:18px;font-weight:500;}
.main .grid1 .top1-B .top1-2 ul li .text .content {display:none;margin-top:2px;font-size:15px;font-weight:400;color:#333;}
/*----------------------------*/
/*top1-C*/
/*----------------------------*/

.main .grid1 .top1-C {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap:50px;

}
.main .grid1 .top1-C .top1-1{
  position:relative;
  grid-column: 1 / span 2;
  grid-row: 1;
}
.main .grid1 .top1-C .top1-2 {
  position:relative;
  grid-column: 1;
  grid-row: 2;
}
.main .grid1 .top1-C .top1-3 {
  position:relative;
  grid-column: 2;
  grid-row: 2;
}

/*.main .grid1 .top1-C > div:not(:last-child)::after {*/
.main .grid1 .top1-C > .top1-2:after {
  content:"";
  position:absolute;
  top:0;
  right:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid1 .top1-C .top1-1 ul li {
  display:flex;
  flex-direction: column-reverse;
}
.main .grid1 .top1-C .top1-1 ul li .toptitle {
  text-align:center;
  margin-top:30px;
  padding:0 50px;
}
.main .grid1 .top1-C .top1-1 ul li .toptitle .subject {
  position:relative;
  font-size:36px;
  font-weight:700;
  padding-bottom:30px;
}
.main .grid1 .top1-C .top1-1 ul li .image {
  position:relative;
  width:100%;
  aspect-ratio: auto 16 / 9;
}
.main .grid1 .top1-C .top1-1 ul li .text .summary {display:none;}
.main .grid1 .top1-C .top1-1 ul li .text .content {display:none;}
.main .grid1 .top1-C .top1-1 ul li .text .category{display:none;}
.main .grid1 .top1-C .top1-1 ul li .newslink{display:none;}


.main .grid1 .top1-C .top1-2 ul{
  display:flex;
  flex-direction: column;
}
.main .grid1 .top1-C .top1-2 ul li{position:relative;padding:15px 0;border-top:1px solid var(--gray-ddd);}
.main .grid1 .top1-C .top1-2 ul li:first-child {padding-top:0;border-top:0;}
.main .grid1 .top1-C .top1-2 ul li:last-child {padding-bottom:0;}
.main .grid1 .top1-C .top1-2 ul li .image{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio: auto 16 / 9;
  margin-bottom:10px;
}
.main .grid1 .top1-C .top1-2 ul li .text {display:flex;flex-direction: column;}
.main .grid1 .top1-C .top1-2 ul li .text .subject {font-size:18px;font-weight:500;}
.main .grid1 .top1-C .top1-2 ul li .text .category{margin-top:3px;font-size:14px;font-weight:400;color:var(--gray-666);}
.main .grid1 .top1-C .top1-2 ul li .text .content {display:block;font-size:15px;font-weight:400;color:var(--gray-666);}

/*top1-3*/
.main .grid1 .top1-3 {
  display:flex;
  flex-direction: column;
  justify-content: space-between;
}
.main .grid1 .top1-3 ul{display:flex;flex-direction: column;}
.main .grid1 .top1-3 ul li{position:relative;padding:15px 0;border-top:1px solid var(--gray-ddd);}
.main .grid1 .top1-3 ul li:first-child {padding-top:0;border-top:0;}
.main .grid1 .top1-3 ul li:last-child {padding-bottom:0;}
.main .grid1 .top1-3 ul li{
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
}
.main .grid1 .top1-3 ul li .image{
  position:relative; 
  width:120px;
  min-width:120px;
  aspect-ratio: auto 16 / 9;
}
.main .grid1 .top1-3 ul li .text{flex:1;overflow:hidden;margin-right:20px;}
.main .grid1 .top1-3 ul li .text .subject {font-size:18px;font-weight:500;}
.main .grid1 .top1-3 ul li .text .category{margin-top:7px;font-size:14px;color:var(--gray-666)}
.main .grid1 .top1-3 ul li .text .content {display:none;margin-top:10px;font-size:15px;font-weight:400;color:#555;}
/*----------------------------*/
/* main panel3 : top3(雅뚯눘?귚펺??? + aside-right(bestnews) */
/*----------------------------*/
.main .grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /*grid-template-columns: 1fr 1fr minmax(auto, 300px); 7cut적용시*/
  gap: 50px;
}
.main .grid3 > div {
  padding: 0;
  position: relative;
}
.main .grid3 > div:not(:first-child)::before {
  content:"";
  position:absolute;
  top:0;
  left:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid3 .top3-1 ul{display:flex;flex-direction: column;}
.main .grid3 .top3-1 ul li{position:relative;padding:15px 0;border-top:1px solid var(--gray-ddd);}
.main .grid3 .top3-1 ul li:first-child {padding-top:0;border-top:0;}
.main .grid3 .top3-1 ul li:last-child {padding-bottom:0;}

.main .grid3 .top3-1 ul li{
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
}
.main .grid3 .top3-1 ul li .image{
  position:relative; 
  width:150px;
  min-width:150px;
  aspect-ratio: auto 16 / 9;
}
.main .grid3 .top3-1 ul li .text{flex:1;overflow:hidden; margin-right:20px;}
.main .grid3 .top3-1 ul li .text .subject {font-size:18px;font-weight:500;}
.main .grid3 .top3-1 ul li .text .category{margin-top:7px;font-size:14px;color:var(--gray-666)}


.main .grid3 .top3-2 {margin-top:52px;}
.main .grid3 .top3-2 ul{display:flex;flex-direction: column;}
.main .grid3 .top3-2 ul li{position:relative;padding:15px 0;border-top:1px solid var(--gray-ddd);}
.main .grid3 .top3-2 ul li:first-child {padding-top:0;border-top:0;}
.main .grid3 .top3-2 ul li:last-child {padding-bottom:0;}

.main .grid3 .top3-2 ul li{
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
}
.main .grid3 .top3-2 ul li .image{
  position:relative; 
  width:150px;
  min-width:150px;
  aspect-ratio: auto 16 / 9;
}
.main .grid3 .top3-2 ul li .text{flex:1;overflow:hidden;margin-right:20px;}
.main .grid3 .top3-2 ul li .text .subject{font-size:18px;font-weight:400;}
.main .grid3 .top3-2 ul li .text .category{margin-top:7px;font-size:14px;color:var(--gray-666)}


.main .grid3 .top3-3 ul{display:flex;flex-direction: column;}
.main .grid3 .top3-3 ul li{position:relative;padding:15px 0;border-top:1px solid var(--gray-ddd);}
.main .grid3 .top3-3 ul li:first-child {padding-top:0;border-top:0;}
.main .grid3 .top3-3 ul li:last-child {padding-bottom:0;}

.main .grid3 .top3-3 ul li{
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
}
.main .grid3 .top3-3 ul li .image{
  position:relative; 
  width:150px;
  min-width:150px;
  aspect-ratio: auto 16 / 9;
}
.main .grid3 .top3-3 ul li .text{flex:1;overflow:hidden;margin-right:20px;}
.main .grid3 .top3-3 ul li .text .spotkey {display:block;}
.main .grid3 .top3-3 ul li .text .subject{font-size:18px;font-weight:400;}
.main .grid3 .top3-3 ul li .text .category{margin-top:7px;font-size:14px;color:var(--gray-666)}

/*------------------- 7cut ----------------------------
.main .grid3 .top3-3 {
  position:relative;
  width:100%;
  overflow:hidden;
}
.main .grid3 .top3-3{
  position:relative;
}
.main .grid3 .top3-3 .aside-7cut .image img{
  width:100%;
  border-radius:0;
}
.main .grid3 .top3-3 .aside-7cut .navigation{
  display:flex;
  justify-content: space-between;
  margin-top:15px;
}
.main .grid3 .top3-3 .aside-7cut .navigation .button{
   display:flex;
   gap:5px;
}
.main .grid3 .top3-3 .aside-7cut .navigation .swiper-7cut-pagination {
   font-size:15px;
   font-weight:400;
   padding:0 5px;
}
.main .grid3 .top3-3 .aside-7cut .navigation i.material-symbols-outlined {
   display:flex;
   font-variation-settings:
   'FILL' 0,
   'wght' 100,
   'GRAD' 0,
   'opsz' 24
}
.main .grid3 .top3-3 .aside-7cut .navigation i.material-symbols-outlined:hover {
   color:#00aaea;
}
.main .grid3 .top3-3 .aside-7cut .image .nsp_vod_play_center{
  width: 40px;
  height: 40px;
  right:0px;
  bottom:0px;
  top: 70%;
  left: 50%;
  transform: translate(100%, 100%); 
  border:4px solid var(--white);
}
.main .grid3 .top3-3 .aside-7cut .image .nsp_vod_play_center:after {
  top: 6px;
  left: 11px;
  border-width: 10px 0 10px 16px;
}
*/
/*----------------------------*/
/* main panel4 : top4
/*----------------------------*/
.main .grid4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-wrap: nowrap;
  gap: 50px;
}
.main .grid4 > div {
  padding: 0;
  position: relative;
}
.main .grid4 > div:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0;
  right:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid4 ul{display:flex;flex-direction: column;}
.main .grid4 ul li{position:relative;padding:20px 0;border-top:1px solid var(--gray-ddd);}
.main .grid4 ul li:first-child {padding-top:0;border-top:0;}
.main .grid4 ul li:last-child {padding-bottom:0;}

.main .grid4 ul li {
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
}
.main .grid4 ul li .image{
  position:relative; 
  width:150px;
  min-width:150px;
  aspect-ratio: auto 16 / 9;
}
.main .grid4 ul li .text{flex:1;overflow:hidden;margin-right:20px;}
.main .grid4 ul li .text .spotkey {display:;}
.main .grid4 ul li .text .subject {position:relative;font-size:17px;}
.main .grid4 ul li .text .category{display:;margin-top:7px;font-size:14px;color:#333}
.main .grid4 ul li .text .content {margin-top:10px;font-size:15px;font-weight:400;color:#555;}

/*----------------------------*/
/* main panel5 : country  */
/*----------------------------*/
.main .grid5 .country {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-wrap: nowrap;
  gap: 50px;
}
.main .grid5 .country > div {
  padding: 0;
  position: relative;
}
.main .grid5 .country > div:not(:first-child)::before {
  content:"";
  position:absolute;
  top:0;
  left:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid5 .country1 ul{display:flex;flex-direction: column;}
.main .grid5 .country1 ul li {
  display:flex;
  flex-direction: column;
  padding:5px 0;
}
.main .grid5 .country1 ul li .image{
  position:relative;
  width: 100%;
  aspect-ratio: auto 16 / 9;
}
.main .grid5 .country1 ul li .text {flex:1;}
.main .grid5 .country1 ul li .text .subject {margin-top:15px;font-size:20px;font-weight:700;}
.main .grid5 .country1 ul li .text .spotkey{display:block}
.main .grid5 .country1 ul li .text .content{display:none}
.main .grid5 .country1 ul li .text .category {
    margin-top: 5px;
    font-size: 14px;
    font-weight:400;
    color: var(--gray-666);
}
.main .grid5 .country2 ul li {
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
  padding:15px 0;
  border-top:1px solid var(--gray-ddd);
}
.main .grid5 .country2 ul li:first-child {padding-top:0;border-top:0;}
.main .grid5 .country2 ul li:last-child {padding-bottom:0;}
.main .grid5 .country2 ul li .image {
  position:relative;
  width:150px;
  min-width:150px;
  aspect-ratio: auto 16 / 9;
  margin-left:20px;
}
.main .grid5 .country2 ul li .text{flex:1;}
.main .grid5 .country2 ul li .text .subject {margin-top:0;font-size:17px;}
.main .grid5 .country2 ul li .text .category {
    margin-top: 5px;
    font-size: 14px;
    font-weight:400;
    color: var(--gray-666);
}
/* =========================
   country3 network
========================= */
/*
.main .grid5 .country3 .network ul{
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-gap: 8px; 
}
.main .grid5 .country3 .network ul li{
  display: flex;
  justify-content: center;
  border:1px solid var(--gray-ddd);
  background:var(--white);
  cursor:pointer;
}
.main .grid5 .country3 .network ul li a{
  margin:0 auto;
  font-size:15px;
  color:#444;
  padding:5px 0;
  font-weight:400;
}
.main .grid5 .country3 .network ul li.on a{font-weight:700;}
.main .grid5 .country3 .network ul li:hover{background:var(--nsp-blue);text-decoration:none}
.main .grid5 .country3 .network ul li:hover a{color:var(--white);}
*/
.main .grid5 .country3 .network ul{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.main .grid5 .country3 .network ul li{
  list-style:none;
}

.main .grid5 .country3 .network ul li a{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:40px;
  padding:8px 8px;

  border:1px solid var(--gray-ddd);
  border-radius:6px;
  background:var(--white);

  font-size:14px;
  font-weight:400;
  color:var(--gray-333);
  text-decoration:none;
}

/* hover */
.main .grid5 .country3 .network ul li a:hover{
  border-color:var(--nsp-blue);
  color:var(--nsp-blue);
}

/* on = 기사 있음 or 활성 */
.main .grid5 .country3 .network ul li.on a{
  border-color:var(--nsp-blue);
  color:var(--nsp-blue);
  font-weight:600;
}

/* 현재 페이지용 (추후 active 추가 추천) */
.main .grid5 .country3 .network ul li.active a{
  background:var(--blue);
  border-color:var(--blue);
  color:var(--white);
  font-weight:700;
}

/* mobile */
@media (max-width:768px){
  .main .grid5 .country3 .network ul{
    grid-template-columns:repeat(2,1fr);
    gap:6px;
  }

  .main .grid5 .country3 .network ul li a{
    min-height:40px;
    font-size:13px;
    padding:8px 6px;
  }
}



.main .grid5 .country3 .ad_nsp_recrut{
   display: flex;
   justify-content: center;
   margin-top:30px;
   padding:10px;
   border-radius:5px;
   /*background:var(--nsp-blue);*/
   background-image: radial-gradient(circle at 85% 1%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 96%,transparent 96%, transparent 100%),radial-gradient(circle at 14% 15%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 1%,transparent 1%, transparent 100%),radial-gradient(circle at 60% 90%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 20%,transparent 20%, transparent 100%),radial-gradient(circle at 79% 7%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 78%,transparent 78%, transparent 100%),radial-gradient(circle at 55% 65%, hsla(190,0%,93%,0.05) 0%, hsla(190,0%,93%,0.05) 52%,transparent 52%, transparent 100%),linear-gradient(135deg, rgb(37, 56, 222),rgb(96, 189, 244));
}
.main .grid5 .country3 .ad_nsp_recrut a{
   display:block;
   font-size:18px;
   font-weight:500;
   color:var(--white);
}

/*----------------------------*/
/* main panel6 : kfme  */
/*----------------------------*/
.main .grid6 .kfme {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-wrap: nowrap;
  gap: 50px;
}
.main .grid6 .kfme > div {
  padding: 0;
  position: relative;
}

.main .grid6 .kfme > div:not(:first-child)::before {
  content:"";
  position:absolute;
  top:0;
  left:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid6 .kfme1 .BoxTitle2{
  margin-right:-416.66px;
}
.main .grid6 .kfme1 ul{
  display:flex;
  flex-direction: column;
}
.main .grid6 .kfme1 ul li {
  display:flex;
  flex-direction: column;
  padding:5px 0;
}
.main .grid6 .kfme1 ul li .image{
  position:relative;
  width: 100%;
  aspect-ratio: auto 16 / 9;
}
.main .grid6 .kfme1 ul li .text {flex:1;}
.main .grid6 .kfme1 ul li .text  .subject {margin-top:15px;font-size:20px;font-weight:700;}
.main .grid6 .kfme1 ul li .text .spotkey{display:none}
.main .grid6 .kfme1 ul li .text .content{display:none}
.main .grid6 .kfme1 ul li .text .category {
    margin-top: 5px;
    font-size: 14px;
    font-weight:400;
    color: var(--gray-666);
}
.main .grid6 .kfme2{
  margin-top:52px;
}
.main .grid6 .kfme2 ul li {
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
  padding:15px 0;
  border-top:1px solid var(--gray-ddd);
}
.main .grid6 .kfme2 ul li:first-child {padding-top:0;border-top:0;}
.main .grid6 .kfme2 ul li:last-child {padding-bottom:0;}
.main .grid6 .kfme2 ul li .image {
  position:relative;
  width:150px;
  min-width:150px;
  aspect-ratio: auto 16 / 9;
}
.main .grid6 .kfme2 ul li .text{margin-right:20px;}
.main .grid6 .kfme2 ul li .text .subject {margin-top:0;font-size:17px;}
.main .grid6 .kfme2 ul li .text .category {
    margin-top: 5px;
    font-size: 14px;
    font-weight:400;
    color: var(--gray-666);
}
.main .grid6 .kfme3{
  display: block;
  min-width:366.68px;
}
/*----------------------------*/
/* main panel7  */
/*----------------------------*/
.main .grid7 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 50px;
}
.main .grid7 > div {
  padding: 0;
  position: relative;
}
.main .grid7 > div:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0;
  right:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.main .grid7 ul{display:flex;flex-direction: column;}
.main .grid7 ul li {
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
  padding:20px 0;
  border-top:1px solid var(--gray-ddd);
}
.main .grid7 ul li:first-child {border-top:0;padding-top:0;}
.main .grid7 ul li:last-child {padding-bottom:0;}

.main .grid7 ul li .image {
  position:relative;
  width:150px;
  min-width:150px;
  aspect-ratio: auto 16 / 9;
}
.main .grid7 ul li .text{flex:1;overflow:hidden;margin-right:20px;}
.main .grid7 ul li .text .subject {margin-top:0;font-size:17px;}
.main .grid7 ul li .text .spotkey{display:none}
.main .grid7 ul li .text .category{display:none}
.main .grid7 ul li .text .content{display:none}

.main .grid7 ul li:first-child {
  display:flex;
  flex-direction: column;
}
.main .grid7 ul li:first-child .image{
  position:relative;
  width: 100%;
  aspect-ratio: auto 16 / 9;
}
.main .grid7 ul li:first-child .text {flex:1;margin-right:0;}
.main .grid7 ul li:first-child .text .subject {padding:20px 0;font-size:18px;font-weight:500;}
/*----------------------------*/
/* main panel9 */
/*----------------------------*/
.main .grid9 .news_box ul{list-style-type:disc;position:relative;margin:0 auto;padding-left:20px;border-top:0px solid var(--gray-eee);}
.main .grid9 .news_box ul li{position:relative;margin:0 auto;padding:5px 0;}
.main .grid9 .news_box ul li .text{
  display:flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.main .grid9 .news_box ul li .text .subject{font-size:18px; margin-right:15px;}
.main .grid9 .news_box ul li .text .date{font-size:14px;font-weight:400;color:var(--gray-666);}

/*=====================================================================*/
/* news main */
/*=====================================================================*/
.news_top_ad{background:var(--white);padding:10px 20px;margin-bottom:0px;border-bottom:1px solid var(--gray-ddd)}
.news .news_top_ad a{font-size:14px}

/*
.main_menu_box{
  margin-bottom:50px;
  padding:0;
  text-align:center;
}
.main_menu_box ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0; 
}
.main_menu_box ul li{
  margin-top:-1px;
  margin-left:-1px;
}
.main_menu_box ul li a{
  display:block;
  margin:0 auto;
  padding:7px 0;
  border:1px solid var(--gray-ddd);
  font-size:15px;
}
.main_menu_box ul li.chk a{background:#333;color:var(--white);}
.main_menu_box ul li.on a{font-weight:700}
*/
/* =========================
   Category Menu
========================= */
.main_menu_box{
  margin-bottom:50px;
}

.main_menu_box .wrap_panel{
  padding:0 var(--wrap_panel-padding-full);
}

.main_menu_box ul{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.main_menu_box li{
  list-style:none;
}

.main_menu_box li a{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:48px;
  padding:12px 10px;

  border:1px solid var(--gray-ddd);
  border-radius:12px;

  background:var(--white);
  color:var(--text-alink);

  font-size:15px;
  font-weight:500;
  text-decoration:none;

  transition:all .2s ease;
}

/* hover */
.main_menu_box li a:hover{
  border-color:var(--blue);
  color:var(--blue);

}

/* active */
.main_menu_box li.on a{
  background:var(--blue);
  color:var(--white);
  border-color:var(--blue);
  font-weight:700;
}

/* blank */
.main_menu_box li.blank{
  visibility:hidden;
  pointer-events:none;
}

.nsp7cut_main{position:relative;margin-top:30px;margin-bottom:30px;padding:0;}
.newsbox-best{position:relative;margin-bottom:0;padding:0;}
.newsbox_display{position:relative;margin-bottom:0;padding:0;}
.newsbox_multi{position:relative;margin-bottom:30px;padding:0;}
.newsbox_issue{position:relative;margin-bottom:30px;padding:0;}

/*=====================================================================
# news sub main...
=====================================================================*/
/*----------------------------
# submain  category
----------------------------*/
.submain .news{
  padding-bottom:50px;
}
.submain-category{
  padding-top:20px;
  margin-left:0;
  display:flex;
  justify-content: space-between;
}
.submain-category .sub-category{
  display:flex;
  align-items: center;
}
.submain-category .sub-category .sub-title {
  font-size:18px;
  line-height:18px;
  font-weight:700;
  margin-left:0;
  white-space : nowrap;
}
.submain-category .sub-category .sub-item ul {
  display:flex;
  align-items: center;
}
.submain-category .sub-category .sub-item ul li {
  margin-left:15px;
  font-size:15px;
  line-height:15px;
  font-weight:400;
  color:var(--black);
  white-space : nowrap;
}
.submain-category .sub-category .sub-item ul li.on a{
  font-weight:500;
  display:inline;
  border-bottom:1px solid var(--black);
  padding-bottom:1px
}
.submain-category .sub-category .sub-item ul li a:hover{
  display:inline;
  border-bottom:1px solid var(--black);
  padding-bottom:1px
}

.submain-category .search-form{position:relative;}
.submain-category .search-form input{box-sizing:border-box;width:150px;height:30px;padding:5px 10px 5px 35px;border-radius:30px;outline: none;}
.submain-category .search-form input:hover,
.submain-category .search-form input:focus{background:var(--white)}
.submain-category .search-form button{position:absolute;z-index:10px;top:5px;left:5px;background:none;border:none;}
.submain-category .search-form button:hover{position:absolute;z-index:10px;top:5px;left:5px;background:none;border:none;}
.submain-category .search-form button .icomoon16-search{-webkit-filter: invert(60%);filter: invert(60%);}
/*----------------------------
# submain  category issue
----------------------------*/
.submain-category-issue{
  padding-top:20px;
  margin-left:20px;
  background:var(--white);
  border-bottom:0px solid var(--gray-ddd);
}
.submain-category-issue .wrap_panel{
  display:flex;
  align-items: center;
}
.submain-category-issue .wrap_panel .subtitle {
   font-size:18px;
   line-height:18px;
   font-weight:700;
   margin-left:0;
}
.submain-category-issue .wrap_panel ul {
   display:flex;
   align-items: center;
}
.submain-category-issue .wrap_panel ul li {
   margin-left:10px;
}
.submain-category-issue .wrap_panel ul li:first-child {
   margin-left:0;
}
.submain-category-issue .wrap_panel ul li a{
   display:flex;
   align-items: center;
   font-size:15px;
   line-height:15px;
   font-weight:400;
   color:var(--black);
   height:30px;
   padding:0 15px;
   border:1px solid var(--gray-ccc);
   border-radius:25px;
}
.submain-category-issue .wrap_panel ul li.on a{
   background:#224488;
   color:var(--white);
}
.submain-category-issue .wrap_panel ul li a:hover{
   background:#224488;
   color:var(--white);
}
/*----------------------------
# submain  top news
----------------------------*/
.submain-top{
  display:block;
  padding:50px 0;
  border-bottom:5px solid #f9f9f9;
}
.submain-top .top {
  display: grid; 
  grid-template-columns: 300px 1fr 300px;
  grid-gap: 50px; 
  position:relative;
}
.submain-top .top .top1 {order: 2;}
.submain-top .top .top2 {order: 1;}
.submain-top .top .top3 {order: 3;}

.submain-top .top > div {
  position: relative;
  padding: 0;
}
.submain-top .top > div:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0;
  right:-25px; /* gap/2 */
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
.submain-top .top .top1 ul{display:flex;flex-direction: column;}
.submain-top .top .top1 > ul > li{
  display:flex;
  flex-direction: column;
}
.submain-top .top .top1 ul li .toptitle{order: 2;}
.submain-top .top .top1 ul li .image{order: 1;}
.submain-top .top .top1 ul li .text{order: 3;}

.submain-top .top .top1 ul li .toptitle .subject {
  font-size:30px;
  font-weight:700;
  margin-bottom: 15px;
  line-height: 1.5;
}
.submain-top .top .top1 ul li .image{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio: auto 16 / 9;
  margin-bottom:15px;
}
.submain-top .top .top1 ul li .text {
  display:flex;
  flex-direction: column;
}

/* default is style_nsp_default.css */
.submain-top .top .top1 ul li .text .summary p{
  font-size: 18px;
  font-weight: 500;
}

.submain-top .top .top1 ul li .text .category{margin-bottom:7px;font-size:14px;color:var(--gray-666);}
.submain-top .top .top1 ul li .text .content {font-size:15px;font-weight:400;color:var(--gray-666);}
.submain-top .top .top1 .newslink{
   margin-top:15px;
}

.submain-top .top .top2 ul{
  display:flex;
  flex-direction: column;
}
.submain-top .top .top2 ul li{
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  flex-wrap: wrap;
  position:relative;
  padding:15px 0;
  border-top:1px solid var(--gray-ddd);
}
.submain-top .top .top2 ul li:first-child {padding-top:0;border-top:0;}
.submain-top .top .top2 ul li:last-child {padding-bottom:0;}
.submain-top .top .top2 ul li .image {
  position:relative;
  width:100%;
  aspect-ratio: auto 16 / 9;
  margin-bottom: 15px;
}
.submain-top .top .top2 ul li .text {width:100%;flex:1;}
.submain-top .top .top2 ul li .text .subject {font-size:18px;font-weight:500;}
.submain-top .top .top2 ul li .text .category{margin-top:3px;font-size:14px;color:var(--gray-666)}
.submain-top .top .top2 ul li .text .content {margin-top:5px;font-size:15px;font-weight:400;color:var(--gray-666);}

.submain-top .top .top3 ul{display:flex;flex-direction: column;}
.submain-top .top .top3 ul li{position:relative;padding:15px 0;border-top:1px solid var(--gray-ddd);}
.submain-top .top .top3 ul li:first-child {padding-top:0;border-top:0;}
.submain-top .top .top3 ul li:last-child {padding-bottom:0;}
.submain-top .top .top3 ul li {
  display:flex;
  flex-direction: row-reverse;
  justify-content:space-between;
  align-items:flex-start;
}
.submain-top .top .top3 ul li .image{
  position:relative; 
  width:120px;
  min-width:120px;
  aspect-ratio: auto 16 / 9;
}
.submain-top .top .top3 ul li .text{flex:1;overflow:hidden;margin-right:20px;}
.submain-top .top .top3 ul li .text .subject {font-size:18px;font-weight:500;}
.submain-top .top .top3 ul li .text .category{margin-top:3px;font-size:14px;color:var(--gray-666)}
.submain-top .top .top3 ul li .text .content {display:none;}
/*----------------------------
# submain news view
----------------------------*/
.submain{
   position:relative;
   padding-top:50px;
   padding-bottom:0;
}
.submain .news {
  display: grid; 
  grid-template-columns: 1fr 300px;
  grid-gap: 50px; 
  position:relative;
}
.submain .news > div {
  position: relative;
  padding: 0;
}
.submain .news > div:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0;
  right:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ddd);
}
/*----------------------------
# submain aside element
----------------------------*/
.aside .aside_ad_first{display:block;}
.aside .aside_ad{width: 100%;overflow: hidden;}
.aside .aside_margin{margin-top:50px;}
.aside .aside_news{position:relative;}
.aside .aside_news ul{
  display:flex;
  flex-direction: column;
  margin-bottom:10px;
}
.aside  .aside_news ul li{
  display:flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  padding:15px 0;
  border-bottom:1px solid var(--gray-ddd);
}
.aside .aside_news ul li:first-child {
  padding-top:0;
}
.aside .aside_news ul li:last-child {
  border-bottom:0;
}
.aside .aside_news ul li .image{
  position:relative;
  overflow:hidden;
  right:0;
  width:120px;
  min-width:120px;
  aspect-ratio: auto 16 / 9;
  margin-left:20px;
}
.aside .aside_news ul li .text {width:100%;flex:1;}
.aside .aside_news ul li .text .subject {font-size:16px;font-weight:500;}
.aside .aside_news ul li .text .category{margin-top:3px;font-size:14px;font-weight:400;color:var(--gray-666)}
.aside .aside_news ul li .text .content {margin-top:10px;font-size:16px;font-weight:400;color:#555;}

.aside .aside_issue_42{position:relative;}
.aside .aside_issue_42 ul li .image{
  position:relative;
  width:100%;
  min-width:300px;
  aspect-ratio: auto 16 / 9;
  margin-bottom:10px;
}
.aside .aside_issue_42 ul li .text {width:100%;flex:1;}
.aside .aside_issue_42 ul li .text .spotkey {display:none;}
.aside .aside_issue_42 ul li .text .subject {font-size:16px;font-weight:500; }
.aside .aside_issue_42 ul li .text .category{margin-top:3px;font-size:14px;font-weight:400;color:var(--gray-666)}
/*=====================================================================
submain news_list
=====================================================================*/
/*----------------------------
# news_list empty (all the same)
----------------------------*/
.news-empty{
   position:relative;
   margin:0 auto;
   padding:50px 0;
   width:70%;
}
.news-empty h3{
   font-weight:500
}
.news-empty .lang{
   font-weight:400;
   font-size:16px;
   color:var(--gray-666);;
   margin-top:15px;
}
.news-empty .url{
   font-size:14px;
   color:var(--gray-666);
   margin-top:30px;
}
.news-empty .btn{
   display:flex;
   margin-top:50px;
}
.news-empty .btn a{
   display:flex;
   border:1px solid var(--gray-ccc);
   padding:7px 10px;
   margin-right:10px;;
}
.news-empty .btn a:hover {
    border:1px solid #224488;
}
/*----------------------------
#news_footer_headline
----------------------------*/
.news_footer{
  position:relative;
  margin-top:50px;
  margin-bottom:50px;
}
.news_footer .news {
  display: grid; 
  grid-template-columns: 1fr 300px;
  grid-gap: 50px; 
  position:relative;
  padding-top:50px;
  border-top:1px solid var(--gray-ddd);
}
.news_footer .news > div {
  position: relative;
  padding: 0;
}
.news_footer .news > div:not(:last-child)::after {
  content:"";
  position:absolute;
  top:0;
  right:-25px;
  width:1px;
  height:100%;
  background:var(--gray-ccc);
}

.news_footer_headline{
  position:relative;
  margin-bottom:50px;
}
.news_footer_headline ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.news_footer_headline ul li .image{
  position:relative;
  width:min(400px, 100%);
  aspect-ratio: auto 16 / 9;
  overflow:hidden;
  background:#f9f9f9;
}
.news_footer_headline ul li .image{box-sizing:border-box;}
.news_footer_headline ul li .text {padding:10px 0;}
.news_footer_headline ul li .text .subject{font-size:16px;font-weight:500;}
.news_footer_headline ul li .text .category{margin-top:7px;font-size:14px;color:var(--gray-666)}
/*----------------------------
# issue
----------------------------*/
.issue_top {position:relative;margin-bottom:30px;padding:0;}
.issue_top .issue_top_panel {border-bottom:0px solid #f9f9f9;padding-top:15px;padding-bottom:15px;margin-bottom: 20px;}
.issue_top .issue_top_panel:after{content:"";display:block;clear:both;}
.issue_top .issue_top_panel .issue_theme{float:left;font-size:16px;color:#1aa3cc;padding-right:15px}
.issue_top .issue_top_panel .issue_title{float:left;font-size:22px;font-weight:500;padding-left:15px;color:var(--nsp-blue);border-left:1px solid var(--gray-ddd)}
.issue_top .issue_top_panel .issue_period{font-size:13px;color:var(--gray-666);margin-top:10px;font-weight:normal;}
.issue_top .issue_top_panel .issue_menu{float:right}


.issue_main .issue-panel{
  border-top:1px solid var(--gray-ddd);
  padding:30px 0;
}
.issue_main .issue-panel:first-child{
  border-top:0;
  padding-top:0;
}
.issue_main .issue-top {
  display: grid; 
  grid-template-columns: 300px 1fr;
  grid-gap: 50px; 
}

.issue_main .issue-top .top1 .item_photo .image {
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio: auto 16 / 9;
  margin-bottom:10px;
}
.issue_main .issue-top .top1 .item_photo .title {display:block;font-size:20px;margin-bottom:10px;font-weight:500;}
.issue_main .issue-top .top1 .item_text .title {display:block;font-size:25px;margin-bottom:20px;font-weight:700;}
.issue_main .issue-top .top1 .content {font-size:15px;color:var(--gray-666);}
.issue_main .issue-top .top1 .category{margin-top:10px;font-size:13px;color:var(--gray-666);}

.issue_main .issue-top .top2 ul.item li{position:relative;padding:10px 0;margin:0;border-top:0 solid var(--gray-eee);}
.issue_main .issue-top .top2 ul.item li:first-child{border-top:0;padding-top:0;}
.issue_main .issue-top .top2 ul.item li:last-child{padding-bottom:0;}
.issue_main .issue-top .top2 ul.item li .text .subject{font-size:18px;font-weight:400;}
.issue_main .issue-top .top2 ul.item li .text .category{margin-top:3px;font-size:13px;color:var(--gray-666)}

/*----------------------------
# gallery_main
----------------------------*/
.main_gallery{margin-top:20px;padding-bottom:20px;}
.main_gallery .swiper-gallery{margin-bottom:20px}
.main_gallery .swiper-gallery:after{content:"";display:block;clear:both;}
.main_gallery .swiper-gallery .item{position:relative;margin:0 auto;padding:0;}
.main_gallery .swiper-gallery .item a .image {margin-bottom:15px;position:relative;overflow:hidden;width:378px;height:230px;border:1px solid var(--gray-eee);border-radius:10px;margin-bottom:10px;}
.main_gallery .swiper-gallery .item a .title {font-weight:500;font-size:18px;margin-top:5px;padding:0;}
.main_gallery .swiper-gallery .item a .category{font-size:13px;color:var(--gray-666);margin-top:5px;padding:0;}
.main_gallery .swiper-gallery .item .jaket{position:absolute;z-index:10;right:0;width:50px;height:24px;margin:20px;background:var(--black);opacity:0.5;border-radius:13px;}
.main_gallery .swiper-gallery .item .jaket_box {position:absolute;z-index:11;right:0;width:50px;padding-top:2px;margin:20px;color:var(--white);font-size:14px;font-weight:500;text-align:center;}
/*----------------------------
# tv main 
----------------------------*/
/*  main-7cut */
.main-7cut .swiper-7cut{
  position:relative;
  margin-bottom:50px;
}
.main-7cut .swiper-7cut .image {
  position:relative;
  width:100%;
  max-width:277.5px;
  aspect-ratio: auto 300 / 533;
  border-radius:15px;
  overflow:hidden;
}
.main-7cut .swiper-7cut .image img{
  width:100%;
  max-width:277.5px;
}
.main-7cut .swiper-7cut .text .subject {
  margin-top:15px;
  font-size:18px;
  font-weight:500;
}
.main-7cut .swiper-7cut .navigation{
  display:flex;
  justify-content: space-between;
  margin-top:15px;
}
.main-7cut .swiper-7cut .navigation .button{
   display:flex;
   gap:5px;
}
.main-7cut .swiper-7cut .navigation .swiper-7cut-pagination {
   font-size:15px;
   font-weight:400;
   padding:0 5px;
}
.main-7cut .swiper-7cut .navigation i.material-symbols-outlined {
   display:flex;
   font-variation-settings:
   'FILL' 0,
   'wght' 100,
   'GRAD' 0,
   'opsz' 24
}
.main-7cut .swiper-7cut .navigation i.material-symbols-outlined:hover {
   color:#00aaea;
}
/* nsptv */
.main-tv{
   position:relative;
   border-top:10px solid var(--gray-eee);
   padding-top:50px;
}
.main-tv .nsptv-title {
   display:flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
}
.main-tv .top-tv {
   display:flex;
   flex-direction: column;
   position:relative;
   margin:0 auto;
   padding:0;
}

.main-tv .top-tv .tv-list ul{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 30px; 
   margin-bottom:50px;
}
.main-tv .top-tv .tv-list ul li {display:flex; flex-direction: column;}
.main-tv .top-tv .tv-list ul li .image{
  position:relative;
  right:0;
  width:100%;
  aspect-ratio: auto 16 / 9;
}
.main-tv .top-tv .tv-list ul li .text {flex:1;display:flex;flex-direction: column;margin-top:15px;}
.main-tv .top-tv .tv-list ul li .text .subject {font-size:16px;font-weight:700;}
.main-tv .top-tv .tv-list ul li .text .category{margin-top:7px;font-size:14px;font-weight:400;color:var(--gray-666);}
.main-tv .top-tv .tv-list ul li .text .content {margin-top:10px;font-size:15px;font-weight:400;color:#555;}

.main-tv .top-tv .tv-more-btn {position:relative;margin:0 auto;padding-bottom:50px;}
.main-tv .top-tv .tv-more-btn a{
   display:flex;
   justify-content: center;
   align-items: center;
   padding:15px 30px;
   border:1px solid var(--gray-ccc);
   border-radius:30px;
   font-size:15x;
   margin-top:30px;
}
.main-tv .top-tv .tv-more-btn a:hover{
   background:var(--nsp-blue);
   color:var(--white)
}

.main-info {
   display:flex;
   flex-direction: column;
   margin-bottom:50px;
}
.main-info ul{
   display:flex;
   align-items: center;
   gap:20px;
   margin-top:10px
}
.main-info ul li a{
   display:flex;
   align-items: center;
   color:var(--gray-666);
}

/*----------------------------
# tv index list
----------------------------*/
.tv-list ul{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 30px; 
   margin-bottom:50px;
}
.tv-list ul li .image{
  position:relative;
  right:0;
  width:100%;
  aspect-ratio: auto 16 / 9;
}
.tv-list ul li .text {display:flex;flex-direction: column;margin-top:15px;}
.tv-list ul li .text .subject {font-size:16px;font-weight:700;}
.tv-list ul li .text .category{margin-top:7px;font-size:14px;font-weight:400;color:var(--gray-666);}
/*=====================================================================
news view
=====================================================================*/
/*----------------------------
Today's Headline news
news_view_in_headline
----------------------------*/
/*.news_view_in_headline{display:block;margin:30px 0;padding:20px;border:1px solid var(--gray-ccc)}*/
.news_view_in_headline{display:block;margin-bottom:30px;padding:0}
.news_view_in_headline .news_view_in_headline_title{display:block;font-size:16px;color:var(--black);margin-bottom:5px;}
.news_view_in_headline .news_view_in_headline_list ul li a{display:inline-block;font-size:16px;padding-top:7px;}
.news_view_in_headline .news_view_in_headline_list ul li a:hover{text-decoration:underline; }

/*----------------------------
news_footer
----------------------------*/
.news_footer .top1{position:relative;float:left;width:500px;min-height:500px;}
.news_footer .top1-2{position:relative;float:left;width:300px;min-height:500px;padding-left:24px;margin-left:25px;border-left:1px solid var(--gray-ddd);}
.news_footer .top2{position:relative;float:right;width:300px;min-height:500px;padding-left:24px;margin-left:25px;border-left:1px solid var(--gray-ddd);}

.news_footer .top1 .item_photo a .title {display:block;font-size:30px;margin-bottom:10px;font-weight:700;}
.news_footer .top1 .item_photo a .image {position:relative;overflow:hidden;width:500px;height:300px;margin-bottom:10px;}
.news_footer .top1 .item_photo a .content {font-size:14px;color:var(--gray-666);}
.news_footer .top1 .item_photo a .category{margin-top:5px;font-size:13px;color:var(--gray-666);}
.news_footer .top1 .item_text a .title {display:block;font-size:25px;margin-bottom:20px;font-weight:700;}
.news_footer .top1 .item_text a .content {font-size:15px;color:var(--gray-666);margin-bottom:0;}
.news_footer .top1 .item_text a .category{margin-top:10px;font-size:13px;color:var(--gray-666);}

.news_footer .top1 .item_photo a .title:after{content:"";display:block;clear:both;} 
.news_footer .top1 .item_photo a .image:after{content:"";display:block;clear:both;} 
.news_footer .top1 .item_photo a .content:after{content:"";display:block;clear:both;} 
.news_footer .top1 .item_photo a .category:after{content:"";display:block;clear:both;} 

.news_footer .top1-2 .item{position:relative;border-top:1px solid var(--gray-ddd);padding-top:15px;margin-top:15px;}
.news_footer .top1-2 .item:first-child {border-top:none;padding-top:0;margin-top:0}
.news_footer .top1-2 .item_photo{position:relative;}
.news_footer .top1-2 .item_photo a .title {font-size:18px;margin-bottom:5px;font-weight:700;}
.news_footer .top1-2 .item_photo a .image {position:relative;overflow:hidden;width:300px;height:150px;margin-bottom:10px;}
.news_footer .top1-2 .item_photo a .content {display:block;overflow:hidden;height:40px;font-size:14px;color:var(--gray-666);}
.news_footer .top1-2 .item_photo a .category{margin-top:5px;font-size:13px;color:var(--gray-666);}
.news_footer .top1-2 .item_text {position:relative;}
.news_footer .top1-2 .item_text a .title {display:block;font-size:18px;margin-bottom:5px;font-weight:700;}
.news_footer .top1-2 .item_text a .content {font-size:15px;color:var(--gray-666);margin-bottom:0;}
.news_footer .top1-2 .item_text a .category{margin-top:10px;font-size:13px;color:var(--gray-666);}

.news_footer .top2 ul.item li{display:block;padding-top:15px;margin:0;border-top:0px solid var(--gray-eee);}
.news_footer .top2 ul.item li:first-child{border-top:0;padding-top:0;}
.news_footer .top2 ul.item li a {min-height:70px;}
.news_footer .top2 ul.item li a .text .subject{;margin-top:0px;font-size:15px;font-weight:700;}

.news_footer .top2 ul.item li a .text .category{margin-top:3px;font-size:13px;color:var(--gray-666)}
.news_footer .top2 ul.item li-left a .image{position:absolute;overflow:hidden;width:100px;height:70px;}
.news_footer .top2 ul.item li-left a .text{position:relative;margin-left:120px;height:70px;}
.news_footer .top2 ul.item li a .image{position:absolute;overflow:hidden;right:0;width:100px;height:70px;}
.news_footer .top2 ul.item li a .text{display:block;margin-right:120px;min-height:70px;}
.news_footer .top2 ul.item li a .text{position:relative;margin-left:0;}
/*=====================================================================
# search
=====================================================================*/
#search_form{
   position:relative;
   width:100%;
   margin:0;
   padding: 50px 0;
   background:var(--gray-fa);
   border-bottom:1px solid var(--gray-ddd);
}
.search_box{
   position:relative;
   margin: 0 auto;
   padding:0;
}
.search_box input.search_text{display:block;outline: none;width:100%;box-sizing:border-box;height:50px;border:1px solid var(--gray-999); background:var(--white);padding-left:60px;padding-right:20px;font-size:18px;border-radius:100px}
.search_box button.btn_search{
  position:absolute;
  z-index:10;
  width:36px;
  height:36px;
  border:none;
  background:var(--gray-ccc);
  color:var(--white);
  left:7px;
  bottom:7px;
  border-radius:36px;
}
.search_box button.btn_search:hover{
  background:var(--nsp-blue);
}
.search_box button.btn_search i{
  font-weight:700;
}
.search_tag{display:block;position:relative;margin-top:10px;padding:010px;font-size:14px;font-weight:400;}
.search_tag .swiper-tag{
	position:relative;
	overflow:hidden;
	width: 100%;
	height: 22px;
	--swiper-pagination-color: var(--white);
}
.search_tag .swiper-tag .swiper-slide {
	width: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.search_tag .swiper-tag .swiper-button-prev{
	left:0;
	width:30px;
	padding-top:2px;
	background:var(--white);
	--swiper-navigation-color: var(--black); 
}
.search_tag .swiper-tag .swiper-button-next{
	width:30px;
	right:0;padding-left:5px;margin-right:-10px;padding-top:2px;
	background:var(--white);
	--swiper-navigation-color: var(--black); 
}
.search_tag .swiper-tag .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "";
  display:none;
  font-size:0;
  padding:0;
  margin:0;
}
.search_tag .swiper-tag .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "";
  display:none;
  font-size:0;
  padding:0;
  margin:0;
}
.search_tag .swiper-tag .swiper-button-next.swiper-button-disabled, .search_tag .swiper-tag .swiper-button-prev.swiper-button-disabled {
    opacity: .0;
    cursor: auto;
    pointer-events: none;
}

.search_tag .swiper-tag .swiper-button-next.swiper-button-disabled, .search_tag .swiper-tag .swiper-button-prev.swiper-button-disabled {
    opacity: .0;
    cursor: auto;
    pointer-events: none;
}

#container .search{position:relative;width:100%;margin:0;padding:50px 0;border-top:1px solid var(--gray-ddd);}
#container .search:after{content:"";display:block;clear:both;}
#container .search .contents {float:left;width:850px;}
#container .search .aside {float:right;width:300px;}

/*----------------------------
# bbs_search_result
----------------------------*/
.bbs_search_result{
   display:flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom:15px;
}

/*----------------------------
# privacy
----------------------------*/
.privacy {
  position:relative;
  max-width:860px;
  margin:0 auto;
  padding:50px 20px;
}
.privacy-tab-menu {
    display: flex;
    border-bottom: 1px solid var(--gray-ddd);
    gap: 4px;
	margin-bottom:50px;
}

.privacy-tab {
  display: inline-block;
  padding: 12px 24px;
  text-decoration: none;
  color: var(--gray-666);
  background: var(--gray-f9);
  border: 1px solid var(--gray-ddd);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-weight: 500;
}

.privacy-tab:hover {
    background: #eee;
}

.privacy-tab.active {
    background: var(--white);
    color: var(--black);
    font-weight: 700;
    position: relative;
    top: 1px;
}
.privacy .title {
  display:flex;
  justify-content: center;
  font-size:32px;
  margin-bottom:50px;
}
.privacy .subject{font-size:20px;font-weight:700;margin-top:15px;margin-bottom:20px;}
.privacy .subject2{font-size:18px;font-weight:500;margin-top:15px;margin-bottom:10px;margin-left:20px;}
.privacy > p{
  margin-bottom:30px;
}
.privacy > p.content{
  margin-left:15px
}
.privacy li{font-size:17px;font-weight:400;margin-left:10px;}

/*----------------------------
# BoxTitle
# 255D9E, #23A9E0 0076cb 38b7d5 ff6600
----------------------------*/
.BoxTitle1 {display:flex;justify-content: space-between;position:relative;margin-bottom:30px;padding:0;}
.BoxTitle1 .title{font-size:24px;color: var(--text-BoxTitle1);font-weight:700;}

.BoxTitle2 {display:flex;justify-content: space-between;position:relative;margin-bottom:20px;padding:0;}
.BoxTitle2 .title{font-size:20px;color: var(--text-BoxTitle2);font-weight:700;}
/*----------------------------
# post badge
----------------------------*/
.badge_post {
  display: inline;
  font-size:10px;
  font-weight:500;
  padding:1px 5px 2px 5px;
  margin-right:2px;
  margin-bottom:5px;
  word-break: keep-all;
}
.badge_post_factiva {
   background:var(--gray-999);
   color:var(--white);
   /*border:1px solid #06A0CF;
   color:#06A0CF;*/
}
.badge_post_stock {
  background:#aaa;
  color:var(--white);
  /*border:1px solid #26a300;
  color:#26a300;*/
}

/*=====================================================================
# popup, modal 
=====================================================================*/
/* modal layer ajax  : _modal.js */
#modal{
  display:none;
  position:fixed;
  z-index:999999;
  inset:0;
  width:100%;
  height:100%;
}
/* 배경 */
#modal .modal_bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-color:var(--black);
  opacity:.3;
}
/* 레이어 */
#modal .modal_layer{
  position:absolute;
  top:50%;
  left:50%;
  border-radius:20px;
  display:block;
  overflow:hidden;
  padding:0;
  width:auto;
  height:auto;
  background-color:var(--white);
  border:1px solid var(--gray-ccc);
  transform:translate(-50%,-50%);
}

/* 컨텐츠 구조 */
#modal .pop-container{margin:0 auto}
#modal .modal_title{
  background:var(--indigo);
  padding:10px 20px;
  margin:15px 20px 0;
  border-radius:25px;
  var(--white);
  font-size:14px;
  font-weight:700;
}
#modal .modal_close a{
  position:absolute;
  right:30px;
  top:15px;
  width:40px;
  height:40px;
  background:var(--nsp-blue);
  border-radius:50%;
  text-indent:-9999px;
}
/* X 아이콘 */
#modal .modal_close a::before,
#modal .modal_close a::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background:var(--white);
  transform-origin:center;
}
#modal .modal_close a::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
#modal .modal_close a::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
#modal .modal_content{
  padding:20px;
  background:var(--white);
  font-size:14px;
  line-height:1.5;
  color:var(--gray-ccc);
}

#modal .modal_button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
}

/* #modal_notice */
.modal_notice {
  border-radius: 10px;
  box-shadow: 0 5px 10px rgb(0 0 0 / 50%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
}
.modal_notice .header {
  display:block;
  overflow:hidden;
  background:#F3F9FD;
  height:80px;
  margin:0;
  padding:0 20px;
  border-bottom:1px solid #ccc;
}
.modal_notice .header .subject{
  display:block;
  overflow:hidden;
  background:#F3F9FD;
  height:50px;
  margin:0px;
  font-size:17px;
  font-weight:500;
}
.modal_notice .header .subject a{
  display:block;
  padding-top:15px;
  color:var(--black);
}
.modal_notice .header .info{
  height:30px;
  background:#F3F9FD;
  color:#666;
  font-size:13px;
  font-weight:400;
}
.modal_notice .content{
  padding:20px 20px;
  height:250px;
  overflow-y:auto;
  color:#333;
  font-size:15px;
  font-weight:400;
  line-height:1.5;
}
.modal_notice .footer {
  display:block;
  text-align:right;
  background:none;
  border-top:1px solid #ccc;
  padding:10px 20px 20px 0;
}
/*-------------------------------------------------------------------
* themeSwitch(dark mode/ light mode)
-------------------------------------------------------------------*/
.themeSwitch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.themeSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.themeSwitch .slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:var(--gray-ccc);
  border-radius:20px;
  transition:.25s ease;
}
.themeSwitch .slider:hover{
  background:var(--blue-1);
}
.themeSwitch .slider::before{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  left:3px;
  top:3px;
  background:var(--white);
  border-radius:50%;
  transition:.25s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.themeSwitch input:checked + .slider::before{
  transform:translateX(16px);
}
/* dark mode  */
[data-theme="dark"] .themeSwitch .slider{
  background:var(--gray-ccc);
}
[data-theme="dark"] .themeSwitch .slider:hover{
  background:var(--blue-1);
}
[data-theme="dark"] .themeSwitch .slider::before{
  background:var(--black);
}

/* =====================================================================
   jsprite
   ===================================================================== */
.nsp_sprite{display:inline-block;overflow:hidden;background:url(/_css/sprite/nsp_sprite_1.png) no-repeat;text-indent:-1000em;}
.nsp_logo_150{background-position: 0 0;width:150px;height:50px;}
.nsp_logo_120{background-position: 0 -50px ;width:120px;height:40px;}
.nsp_logo_100{background-position: 0 -90px ;width:100px;height:22px;}
.nsp_logo_80{background-position: 0 -120px ;width:80px;height:18px;}

.nsp_logo_icon_34{background-position: 0 -90px ;width:34px;height:22px;}
.nsp_logo_icon_25{background-position: 0 -120px ;width:27px;height:18px;}

.nsp_7cut_100{background-position: -150px 0;width:100px;height:60px;}
.nsp_7cut_50{background-position: -150px -60px;width:50px;height:30px;}
.nsp_7cut_40{background-position: -150px -90px;width:40px;height:20px;}

/* =====================================================================
   5. loading
   ===================================================================== */
/* ajax loading */
.ajax-loading{
  position:relative;
  left:50%;
  top:50%;
  width:100px;
  height:20px;
  margin-left:-50px;
  margin-top:-10px;
}

/* bars */
.ajax-loader-bars,
.ajax-loader-bars::before,
.ajax-loader-bars::after{
  background:var(--gold);
  animation:ajax-load .8s infinite ease-in-out;
  width:.5rem;
  height:1rem;
}

.ajax-loader-bars{
  position:absolute;
  right:calc(50% - .1rem);
  margin:auto;
  font-size:11px;
  text-indent:-9999em;
  animation-delay:.16s;
}

.ajax-loader-bars::before,
.ajax-loader-bars::after{
  content:"";
  position:absolute;
  top:0;
}

.ajax-loader-bars::before{ left:-.7rem; }

.ajax-loader-bars::after{
  left:.7rem;
  animation-delay:.32s;
}

/* text */
.ajax-loader-text{
  padding-top:2rem;
  text-align:center;
  font-size:11px;
  color:var(--gray-999);
}

/* animation */
@keyframes ajax-load{
  0%,100%,80%{
    opacity:.75;
    height:1rem;
    box-shadow:0 0 var(--gold);
  }
  40%{
    opacity:1;
    height:1.5rem;
    box-shadow:0 -.5rem var(--gold);
  }
}

/* loading */
.loading{
  position:fixed;
  z-index:9999;
  left:50%;
  top:50%;
  width:100px;
  margin-left:-50px;
  margin-top:-38px;
}

.loading img{
  width:76px;
  height:76px;
}

/* bar */
.loader-bars,
.loader-bars::before,
.loader-bars::after{
  background:var(--blue-1);
  animation:load .8s infinite ease-in-out;
  width:.8rem;
  height:2rem;
}

.loader-bars{
  position:absolute;
  right:calc(50% - .425rem);
  margin:auto;
  font-size:11px;
  text-indent:-9999em;
  animation-delay:.16s;
}

.loader-bars::before,
.loader-bars::after{
  content:"";
  position:absolute;
  top:0;
}

.loader-bars::before{ left:-1.1rem; }
.loader-bars::after{
  left:1.1rem;
  animation-delay:.32s;
}

/* text */
.loader-text{
  margin-top:2.5rem;
  text-align:center;
  font-size:12px;
  color:var(--gray-666);
}

/* animation */
@keyframes load{
  0%,100%,80%{
    opacity:.75;
    height:2rem;
    box-shadow:0 0 var(--blue-1);
  }
  40%{
    opacity:1;
    height:2.5rem;
    box-shadow:0 -.5rem var(--blue-1);
  }
}

/* =====================================================================
   5. TABLE
   blue ==> #7f9db9, #255D9E, #1aa3cc,#23a9e0,#38b7d5, #49c0d8, #e5f4f7, #e0f0ff, #f3f9fd, F3F9FD
   border-collapse:collapse - 테두리를 하나로 합치는 것
   border-collapse:separate - 테두리 따로 설정(기본값)
   ===================================================================== */
table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:10px;
  word-break:break-word;
}

table caption{display:none;}

/* THEAD */
table thead{
  background:var(--blue-4);
  text-align:center;
}

/* TFOOT */
table tfoot{
  background:var(--gray-fa);
}

/* BORDER */
table tr,
table th,
table td{
  border:1px solid var(--gray-ddd);
}

/* CELL */
table th,
table td{
  text-align:center;
  vertical-align:middle;
}
table tbody th{
  font-weight:400;
}
/* FORM ELEMENT INSIDE TABLE */
table td input,
table td select,
table td textarea{
  margin:3px 0;
}
/* ROW STATE */	
table tr.on,
table tr.top,
table td.top{
  background:var(--yellow-3);
}
table.hover tbody tr:hover{
  background:var(--yellow-4);
}
/* OPTION */
table.separate{
  border-collapse:separate;
  border-spacing:10px;
}

table.margin0{
  margin:0;
}

table.left td{
  text-align:left;
}
table.right td{
  text-align:right;
}
table th .oneline,
table td .oneline{
  display:block;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  height: 22px;
}

table.padding5 th, table.padding5 td{padding:5px;}
table.padding7 th, table.padding7 td{padding:7px;}
table.padding10 th, table.padding10 td{padding:10px;}
table.padding15 th, table.padding15 td{padding:15px;}
table.padding20 th, table.padding20 td{padding:20px;}
table.padding30 th, table.padding30 td{padding:30px;}

/* =====================================================================
   paging
   ===================================================================== */
.paging,
.paging_date{
  margin:50px 0;
  padding:0;
}

.paging ul,
.paging_date ul{
  display:flex;
  justify-content:center;
  align-items:center;
}

.paging ul li,
.paging_date ul li{
  background:var(--white);
  margin:0 3px;
}

.paging ul li a,
.paging_date ul li a{
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:500;
  font-size:15px;
  min-width:32px;
  height:32px;
  padding:3px 5px;
  text-decoration:none;

  color:var(--gray-333);
  border:1px solid var(--gray-ccc);
  background:var(--white);
}

.paging_date ul li a{
  border-radius:2px;
}

/* hover */
.paging ul li a:hover,
.paging_date ul li a:hover{
  color:var(--blue);
  border-color:var(--blue);
}

/* active */
.paging ul li a.on,
.paging_date ul li a.on{
  color:var(--white);
  background:var(--blue);
  border-color:var(--blue);
}

/* disabled */
.paging ul li a.off,
.paging_date ul li a.off{
  color:var(--gray-999);
}

@media (max-width: 400px) { 
	.paging ul li.first{display:none;}
	.paging ul li.prev-block{display:none;}
	.paging ul li.next-block{display:none;}
} 

/*----------------------------
#css diagram

center인 경우
right,bottom:미사용 + transform: translate(-50%, -50%);
----------------------------*/
/* play button diagram */
.nsp_vod_play{
  position: absolute;
  border-radius: 100%;
  margin: auto;
  z-index: 100;
  cursor: pointer;
  font-size: 10vh;
  opacity: 0.8;
  transition: opacity 0.4s;
  text-align: center;
  background: none;
  /*value change 40px~50px*/
  width: 30px;
  height: 30px;
  right:15px;
  bottom:15px;
  border:3px solid var(--white);
  /*background-color:var(--black);*/
  background-color: transparent;
}
.nsp_vod_play:after {
  content: '';
  display: block;
  position: relative;
  border-style: solid;
  border-color: transparent transparent transparent white;
  /*value change*/
  border-width: 8px 0 8px 12px;
  top: 4px;
  left: 8px;
}

.nsp_vod_play_center{
  position: absolute;
  border-radius: 100%;
  margin: auto;
  z-index: 100;
  cursor: pointer;
  font-size: 10vh;
  opacity: 0.8;
  transition: opacity 0.4s;
  text-align: center;
  background: none;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  border:5px solid var(--white);
  /*background-color:var(--black);*/
  border-color: transparent;
}
.nsp_vod_play_center:after {
  content: '';
  display: block;
  position: relative;
  border-style: solid;
  border-color: transparent transparent transparent white;
  /*value change*/
  border-width: 14px 0 14px 23px;
  top: 7px;
  left: 13px;
}