	@charset "utf-8";
	:root {
		--key-color:#130e6c;
	}
	
	/*common*/
	body,h1,h2,h3,h4,h5,h6,li,a,textarea,div,p,span,td,input,select {font-family: 'Pretendard', sans-serif;}
.container {max-width:1700px; width:90%; margin:0 auto; position: relative; }
img {display:block; width:100%}

	/*header*/
.full_container{ position: fixed;   top: 0;   left: 0;   width: 100%;  background:var(--key-color);z-index: 199;}
.full_container .inner_container{max-width:1700px; width:90%; margin:0 auto; position: relative; display: flex;  justify-content: center;  align-items: center;}
	header .logo {position: absolute;   left: 0;  top: 50%;  transform: translateY(-50%);}
	header .logo img {display:block; width:320px;}
	header .header_inner{min-height: 90px; align-items: center; gap: 0 20px}
	header .header_inner .main_menu_wrap .main_menu{display: flex; justify-content: center; gap: 0 90px}
	header .header_inner .main_menu_wrap .main_menu li a{display: block; /*min-height: 85px; line-height: 85px;*/ position: relative; transition: color .2s}
	header .header_inner .main_menu_wrap .main_menu li a.on{color: #6c84ff}
	header .header_inner .main_menu_wrap .main_menu li a:hover {color: #6c84ff}
	header .header_inner .main_menu_wrap .main_menu>li.depth-1>a::after{content: ''; transition: opacity .1s; opacity: 0; display: block; width: 15px; height: 5px; background: #6c84ff; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
	header .header_inner .main_menu_wrap .main_menu li a.on::after{opacity: 1}
	header .header_inner .header_right{display: flex; gap:0 30px; position: absolute;   right: 0;  top: 50%;  transform: translateY(-50%);}
	header .header_inner .header_right ul{display: flex; gap:0 20px}
	header .header_inner .header_right ul li{position: relative} 
	header .header_inner .header_right ul li::after{content:''; display:block; width:1px; height:10px; background: #999; position: absolute; right:-10px; top:50%; transform: translateY(-50%)}
	header .header_inner .header_right ul li:last-child::after{display: none}
	header .header_inner .header_right ul li a{color: #fff;   transition: .2s all;   font-size: 20px;}
	header .header_inner .header_right ul li a:hover{color: #6c84ff}
	header .header_inner .header_right .mega_menu_btn{width:30px; height:16px; position: relative; cursor: pointer}
	header .header_inner .header_right .mega_menu_btn span{position: absolute; display: block; width: 100%; height: 2px; background: #000; transition: .3s all}
	header .header_inner .header_right .mega_menu_btn span:nth-child(1){left:0; top:0}
	header .header_inner .header_right .mega_menu_btn span:nth-child(2){left: 0; top:50%; transform: translateY(-50%)}
	header .header_inner .header_right .mega_menu_btn span:nth-child(3){left: 0; bottom: 0}
	header .header_inner .header_right .mega_menu_btn.on span:nth-child(2){opacity: 0}

	#menu_dept{box-shadow: 0px 6px 5px -3px rgba(0,0,0,0.06); position: absolute; width: 100%; z-index: 2; background: #fff; border-top: 1px solid #ddd}
	#menu_dept .menu_dept_ul{display: flex; justify-content: center}
	#menu_dept .menu_dept_ul > li > ul{width:calc(100% - 30px)}
	#menu_dept .menu_dept_ul > li > ul li{position: relative}
	#menu_dept .menu_dept_ul > li > ul li a{transition: color .2s}
	#menu_dept .menu_dept_ul > li > ul li a:hover{color: #6c84ff}
	#menu_dept .menu_dept_ul > li > ul .tit a{color: #6c84ff; padding-bottom: 15px; display: block}
	#menu_dept .menu_dept_ul > li > ul .tit::after{content: ''; display: block; width: 100%; height: 2px; background: #6c84ff}
	#menu_dept .menu_dept_ul > li > ul li + li{padding-top: 20px}

	.full_page_menu{display: none}
	.full_page_menu.open{display: block}
	.full_page_menu .full_page_menu_inner{position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; background-color: #ffffff; z-index: 10000}
	.full_page_menu .full_page_menu_inner > ul > li{float:left; margin-right: 30px; position: relative; min-height: 200px;  opacity: 0; left: 100px}
	.full_page_menu .full_page_menu_inner > ul > li::after{content:''; position: absolute; width: 1px; height: 100%; background: #ddd; right: 0; top: 0}
	.full_page_menu .full_page_menu_inner > ul > li:last-child{margin-right: 0}
	.full_page_menu .full_page_menu_inner > ul > li:last-child::after{display: none}
	.full_page_menu .full_page_menu_inner > ul > li ul li + li{padding-top: 20px}
	.full_page_menu .full_page_menu_inner > ul > li ul .tit a{font-size: 24px; transition: color .2s}
	.full_page_menu .full_page_menu_inner > ul > li ul li + li a{font-size: 18px; color: #666; transition: color .2s}
	.full_page_menu .full_page_menu_inner > ul > li ul li a:hover{color: #6c84ff}
	.full_page_menu .full_page_menu_inner .full_menu_close{position: absolute; right: 50px; top: 50px;}
	.full_page_menu .full_page_menu_inner .full_menu_close .close_inner{display: block; position: relative; width:30px; height:30px; cursor: pointer}
	.full_page_menu .full_page_menu_inner .full_menu_close .close_inner span{position: absolute; top: 50%; display: block; width: 100%; height: 2px; background: #000; transition: .3s all}
	.full_page_menu .full_page_menu_inner .full_menu_close .close_inner span:nth-child(1){left: 0; transform: rotate(90deg); transform: translateY(-50%) rotate(45deg)}
	.full_page_menu .full_page_menu_inner .full_menu_close .close_inner span:nth-child(2){right: 0; transform: translateY(-50%) rotate(-45deg)}
	.full_page_menu.open .full_page_menu_inner > ul > li{animation-name: menu_appear; animation-delay: .2s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.21, 0.34, 0.39, 1.03)}
	.full_page_menu.open .full_page_menu_inner > ul > li:nth-child(1){animation-duration: .25s}
	.full_page_menu.open .full_page_menu_inner > ul > li:nth-child(2){animation-duration: .5s}
	.full_page_menu.open .full_page_menu_inner > ul > li:nth-child(3){animation-duration: .75s}
	.full_page_menu.open .full_page_menu_inner > ul > li:nth-child(4){animation-duration: 1s}
	.full_page_menu.open .full_page_menu_inner > ul > li:nth-child(5){animation-duration: 1.25s}

	@keyframes menu_appear{
		0% {
			opacity: 0;
			left: 100px;
		}
		50% {
			opacity: 0;
			left: 50px;
		}
		100% {
			opacity: 1;
			left: 0;
		}
	}


	.not_scroll{overflow: hidden}

	.mobile_btn{display: none; width:20px; height:16px; position: relative}
	.mobile_btn span{position: absolute; display: block; width: 100%; height: 2px; background: #fff; transition: all .3s}
	.mobile_btn span:nth-child(1){left:0; top:0}
	.mobile_btn span:nth-child(2){left: 0; top:50%; transform: translateY(-50%)}
	.mobile_btn span:nth-child(3){left: 0; bottom: 0}
	.mobile_btn.open span:nth-child(1){top:50%; transform: translateY(-50%) rotate(45deg)}
	.mobile_btn.open span:nth-child(2){/*transform:translateX(50px);*/ opacity: 0;}
	.mobile_btn.open span:nth-child(3){top:50%; transform: translateY(-50%) rotate(-45deg)}

	.mobile_lnb{width: 100%; max-width: calc(100% - 100px); max-height: none; height: calc(100% - 85px); right: -100%; top:85px; position: fixed; z-index: 999; background: #f5f5f5; transition: all .5s; padding: 20px}
	.mobile_lnb.open{right: 0}

	#lnb{height: 100%; position: relative}
	#lnb > ul{padding: 0 20px; height: calc(100% - 60px); overflow-y: auto}
	
	/* 모바일 메뉴 - 새로운 구조 */
	#lnb .depth-1 > a {display: block; padding: 15px 0; color: inherit; font-size: 16px; position: relative; border-bottom: 1px solid #ddd;}
	#lnb .depth-1 > a::after {content: "▼"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 12px; transition: transform 0.3s;}
	#lnb .depth-1.on > a::after {transform: translateY(-50%) rotate(180deg);}
	/* 하위 메뉴가 없는 항목은 화살표 숨김 */
	#lnb .depth-1.no-submenu > a::after {display: none;}
	
	#lnb .depth-item {display: none; background: #f8f8f8; margin: 0 -20px; padding: 0 20px;}
	#lnb .gnb-depth-2 {padding: 10px 0;}
	#lnb .gnb-depth-2 li {margin-bottom: 5px;}
	#lnb .gnb-depth-2 a {display: block; padding: 8px 15px; font-size: 14px; color: #666; text-decoration: none; border-radius: 4px; transition: background-color 0.2s;}
	#lnb .gnb-depth-2 a:hover {background-color: #e0e0e0; color: #333;}
	
	/* 기존 스타일 유지 (호환성) */
	#lnb > ul > li > a {display: block;padding: 15px 0; color: inherit; font-size: 16px; position: relative}
	#lnb > ul > li.one_link > a::after{display: none}
	#lnb > ul > li.on > a::after{transform: rotate(180deg); top:40%;}
	#lnb > ul > li ul { padding-left:15px}
	#lnb > ul > li > ul > li > a {display: block;padding: 0 0 15px 0; font-size: 14px; color: #666}
	#lnb > ul li.noDepth a {background-image: none !important}

	.mobile_lnb .m_login_btn_wrap{position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; padding: 0 20px; display: flex; justify-content: center; align-items: center; gap: 10px}
	.mobile_lnb .m_login_btn_wrap .btn{display: block; border: 1px solid #ddd; text-align: center; padding: 8px 0; font-size: 14px; border-radius: 15px; margin: 0; height:unset; line-height:unset;}
	.mobile_lnb .m_login_btn_wrap .btn:first-child{background: #6c84ff; color: #fff}
	.mobile_lnb .m_login_btn_wrap .btn:last-child{background: #eee; color: #666}

	/*header pc 수정 2024-04-26*/
	.main_menu_wrap .main_menu .depth-1 {position: relative;}
	.main_menu_wrap .main_menu .depth-1.mo {display: none;}
	.main_menu_wrap .main_menu .depth-1 > .depth-1-link {display: flex; align-items: center; height: 90px; font-size: 20px; font-weight: 400; color:#fff}
	.main_menu_wrap .main_menu .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal}
	.main_menu_wrap .main_menu .depth-1.current > a > span {color:#6c84ff}
	.main_menu_wrap .main_menu .depth-1 .depth-item {background-color: #fff; position: absolute; top: 100%; left: 50%; width: 160px; transform:translateX(-50%); height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: height 0.25s ease, opacity 0.25s ease, visibility 0.25s ease; z-index: 10; box-shadow: 0px 3px 15px rgba(0,0,0,.15); border-top: 3px solid #6c84ff}
	.main_menu_wrap .main_menu .depth-1.current .depth-item {visibility: visible; opacity: 1;}
	.main_menu_wrap .main_menu .depth-1 .depth-item .gnb-depth-2 {visibility: hidden; opacity: 0; transition: opacity 0.15s ease 0.1s; padding: 10px}
	.main_menu_wrap .main_menu .depth-1 .depth-item .gnb-depth-2 li a {padding: 15px 10px; font-size: 16px; transition: .2s ease; border-radius:5px}
	.main_menu_wrap .main_menu .depth-1 .depth-item .gnb-depth-2 li a:hover{background:#f3f3f3; color: #417bff}
	.main_menu_wrap .main_menu .depth-1.current .depth-item .gnb-depth-2 {visibility: visible; opacity: 1;}
	.main_menu_wrap .main_menu .depth-2 > .depth-2-link {display: block; padding: 8px 0; font-size: 17px; color: #ddd; transition: color 0.1s}
	.main_menu_wrap .main_menu .depth-2 > .depth-2-link:hover,
	.main_menu_wrap .main_menu .depth-2 > .depth-2-link:focus {color: #007ea5; font-weight: 500}
	
	
	@media only screen and (max-width: 1600px) {
		/*header*/
		.main_menu_wrap .main_menu .depth-1 > .depth-1-link,
		header .header_inner .header_right ul li a {font-size: 1.3vw;}
		.main_menu_wrap .main_menu .depth-1 .depth-item .gnb-depth-2 li a {font-size: 1.1vw;}
		header .header_inner .main_menu_wrap .main_menu {gap: 0 5vw;}
		header .logo img {width: 20vw;}
		
		
	}


	@media only screen and (max-width: 1024px) {
	/**  Mobile Break **/
	
		/*header*/
		header.roll{border-bottom: 1px solid #eee}
		header .header_inner .main_menu_wrap .main_menu {display: none}
		header .logo img {  width: 180px; }
		header .header_inner .header_right {right: 50px;}
		header .header_inner .header_right ul li a {font-size: 2vw;}
		.main_menu_wrap .main_menu .depth-1.mo {display: block;}

		.mobile_btn{display: block; position: absolute;       right: 0;       top: 50%;      transform: translateY(-50%);}
	}

	@media only screen and (max-width: 767px) {
		/*main*/
		.main_content .inner_container{flex-direction: column; height: auto; align-items: center; gap: 5vw; justify-content: space-between}
		.main_content .inner_container > div{width: 100%; max-width: 375px; margin-bottom: 0}
		.main_content .inner_container .main_cont_banner .swiper_control{left: 2.65vw}
		.main_content .inner_container > div:nth-child(2){height: 40.09vw}
		.main_content .inner_container > div:nth-child(2) > div a h2{font-size: 2.8vw}
		.main_content .inner_container > div:nth-child(2) > div a span.info_bg{width: 11vw}
		.main_content .inner_container > div:nth-child(2) > div:nth-child(1)::after{width: 4vw; height: 4vw; top: -2vw}
		.main_content .inner_container > div:nth-child(2) > div:nth-child(2) a span.info_bg{top: 3.5vw; width: 15vw}
		.main_content .inner_container > div:nth-child(3) .latest_tit{height: 10vw; font-size: 3vw}
		.main_content .inner_container > div:nth-child(3) .latest_tit a{font-size: 2.2vw}
		.main_content .inner_container > div:nth-child(3) .latest_tit a span{font-size: 2.7vw}
		.main_content .inner_container > div:nth-child(3) .latest_inner{height: auto; padding-bottom: 3vw}
		.main_content .inner_container > div:nth-child(3) .latest_inner li{padding: 3vw 0}
		.main_content .inner_container > div:nth-child(3) .latest_inner li a span:first-child{font-size: 2.4vw}
		.main_content .inner_container > div:nth-child(3) .latest_inner li a span + span{font-size: 2.2vw}

		.main_partners .partners_tit p:first-child{font-size: 4.4vw}
		.main_partners .partners_tit p:last-child{font-size: 2.8vw}
		header .header_inner .header_right ul li a {font-size: 3vw;}
	}

	@media only screen and (max-width: 480px) {
		/*header*/
		header .header_inner{height: 60px; min-height: auto}
		header .header_inner .logo{width: 108px}
		header .header_inner .header_right {right: 40px;}
		header .header_inner .header_right ul li a {font-size: 4.2vw;}

		.mobile_btn span{height: 1px}
		.mobile_lnb{top: 60px; padding: 20px 10px; max-width: calc(100% - 60px); height: calc(100% - 60px)}
		.mobile_lnb .m_login_btn_wrap{padding: 0 15px}

		#lnb > ul{padding: 0 15px}
		
	}
	
	
	
	/* MAIN */
.main_viz_head {position: relative;   background-image: url(../img/main_viz_bg.jpg);  background-size: cover;background-position: center;}
.main_title_area {height: 960px; position: relative;   display: flex;  flex-direction: column;   justify-content: flex-start;   align-items: center;   padding-top: 200px;  text-align: center;}
.main_title_area .heading_tit {margin-bottom: 50px;}
.main_title_area h2 {font-size: 36px;  color: #fff;   margin-bottom: 160px;}
.main_title_area  p {font-size: 20px;   color: #fff;   line-height: 1.8em;}


@media (min-width:2000px) {
	.main_title_area {height:calc(100vh - 175px); padding-top: 10vw;}
}

@media only screen and (max-width: 767px){
	.main_title_area {height: 920px;}
}

@media only screen and (max-width: 480px){
	.main_title_area {height: 210vw; padding-top: 60vw;}
	.main_title_area h2 {font-size: 7.2vw; margin-bottom: 30vw;}
	.main_title_area p {font-size: 4.1vw;}
}

@media only screen and (max-width: 380px){
	.main_title_area {padding-top: 50vw;}
	.main_title_area h2 {margin-bottom: 40vw;}
}



/*FOOTER */
#ft {background:#fff; border-top: 1px solid #eee;}
.footer_content {padding: 40px 0;display: flex;  justify-content: flex-start;  align-items: center; text-align: left; gap: 70px;}
.footer_info p {color: #666;   font-size: 16px;   line-height: 1.6em;}
.footer_info .company {font-size: 18px;  margin-bottom: 0.5em;}

@media only screen and (max-width: 1024px){
	.footer_content {align-items: start;}
	.footer_content .footer_logo {padding-top: 20px;}
}

@media only screen and (max-width: 767px){
	.footer_content {flex-direction: column; gap: 40px;}
}




/* SUB */
.sub_page {/*padding-top:90px;*/padding-top:270px}
.sub_viz_head {height:180px;  background-image: url(../img/sub_viz_bg.jpg);  background-size: cover;background-position: center; position: fixed; top: 90px; left: 0; width: 100%; z-index: 9;}
.sub_viz_head .container {display: flex;   justify-content: center;   align-items: center;   height: 100%;}
.sub_viz_head h2 {font-size: 42px;  color: #d4d4d4;}

.regi_container {width: 90%;   max-width: 1000px;   margin: 0 auto; padding:30px 0 60px}
.regi_container p {font-size: 16px; color:#222; margin-bottom: 0.5em;}
.regi_container p.comment { color:#666; margin-bottom: 50px;}
.require {color: #ff0000 ! IMPORTANT;display: inline-block;  font-size: 16px;}
.regi_container .regi_tit {font-size: 28px;   color: var(--key-color);  font-weight: 500;  margin-bottom: 1em;display: inline-block;  position: relative;}
.regi_container .regi_tit .require {position: absolute;  right: -10px;  top: 0;}
.regi_container label {display: block; margin-bottom: 12px; cursor:pointer}
.regi_container label input {position:absolute; left:0; visibility: hidden;}
.regi_container label input + span {font-size: 16px;   color: #222;   display: block;   position: relative;   padding-left: 45px; }
.regi_container label input + span:before {content: "";   position: absolute;   left: 10px;   top: -1px;   width: 20px;   height: 20px;   border: 2px solid #ddd;}
.regi_container label input:checked + span:before {border: 2px solid var(--key-color) !important;}
.regi_container label input:checked + span:after {content: "";  position: absolute;   left: 16px;   top: 1px;   width: 9px;   height: 15px;   border-right: 3px solid var(--key-color);  border-bottom: 3px solid var(--key-color);  transform: rotate(45deg);}
.regi_container .regi_input { margin-bottom: 50px; z-index: 1; position: relative;}
.regi_input input[type="text"] {border: 1px solid #666;   width: 100%;  height: 40px;  font-size: 16px;  padding: 10px; margin-bottom: 15px;}
.regi_input .handphone .regi_input .handphone {display: flex;  align-items: center;  margin-bottom: 15px; gap: 5px}
input {margin-bottom:0; /*max-width: 90px;*/}

.regi_input .sub_check {padding-left: 32px;}
.regi_container label.blue input + span:before {border: 2px solid #a5bedc;}
.regi_container label input + span em {font-style: normal;  color: #666; display:inline-block; padding-left:10px}
.regi_container p.gray {color: #666;}
.privacy_agree_wrap {padding: 50px 0 0;   margin-bottom: 40px;   border-top: 2px solid #ddd;   border-bottom: 2px solid #ddd;}
.privacy_agree_wrap h4 {font-size: 18px;   font-weight: 500;   margin-bottom: 1.8em;}
.privacy_agree_wrap ul {margin-bottom: 30px;}
.privacy_agree_wrap ul.last {margin-bottom: 15px;}
.privacy_agree_wrap ul li {font-size: 16px;     padding-left: 0.8em;    margin-left: 0.8em;    line-height: 1.8em;    position: relative;}
.privacy_agree_wrap ul li:before {content: "-";   position: absolute;   left: 0;   top: 0;}
.submit_area {display: flex; gap: 8px;  justify-content: center;   align-items: center;margin-bottom: 30px;}
.submit_area .btn {display: flex;   justify-content: center;   align-items: center;   width: 240px;   height: 60px;  border: none;   background: var(--key-color);  font-size: 16px;   color: #fff;   transition: all 0.12s;}
.submit_area .btn:hover {background:#6c84ff}
.submit_area:not(.register) .btn {width: 170px;}

.regi_container .regi_tit {margin-top: 60px;}
.result .regi_container dl {display: flex; flex-wrap: wrap;}
.result .regi_container dl dt {width: 145px; border-top: 1px solid #bdbcbc;}
.result .regi_container dl dd {width: calc(100% - 145px); border-top: 1px solid #bdbcbc;}
.result .regi_container dl:not(:first-child) {border-bottom: 1px solid #bdbcbc;}


.sub_page.search .sub_tit {font-size: 40px; font-weight: 700; margin-bottom: 45px; text-align: center; padding-top: 80px;}
.sub_page.search input {max-width: none;}
.sub_page.search .regi_input {background-color: #e5f1f8; padding: 40px 50px; margin-bottom: 100px;}
.sub_page.search .regi_input .input {display: flex; align-items: center;}
.sub_page.search .regi_input .input + .input {margin-top: 30px;}
.sub_page.search .regi_input .input p {font-size: 18px; font-weight: 500; padding-right: 10px; width: 115px; text-align: right; margin-bottom: 0;}
.sub_page.search .regi_input .input input {border: 0; background-color: #fff; width: calc(100% - 115px); margin-bottom: 0; height: 48px;}


	@media only screen and (max-width: 480px) {
		.sub_viz_head {top: 60px;}
		.sub_page {padding-top: 240px;}
	}

/* ===================================================================
   GNPC 브랜딩 오버라이드 (강릉 NP·BIO) — 헤더 흰배경 / 청록 메뉴·푸터
   =================================================================== */
:root{ --gnpc-deep:#12655b; --gnpc:#2a8b79; --gnpc-mint:#43b394; --gnpc-navy:#16305a; }

/* 헤더: 흰 배경 + 다크 로고/메뉴 + 청록 액센트 */
.full_container{ background:#fff !important; border-bottom:1px solid #ececec; }
header .main_menu_wrap .main_menu .depth-1 > .depth-1-link{ color:var(--gnpc-navy) !important; }
header .main_menu_wrap .main_menu .depth-1 > .depth-1-link.on,
header .main_menu_wrap .main_menu .depth-1 > .depth-1-link:hover{ color:var(--gnpc) !important; }
header .main_menu_wrap .main_menu .depth-1.current > a > span{ color:var(--gnpc) !important; }
header .header_inner .main_menu_wrap .main_menu>li.depth-1>a::after{ background:var(--gnpc) !important; }
/* 드롭다운 액센트 청록화 */
.main_menu_wrap .main_menu .depth-1 .depth-item{ border-top-color:var(--gnpc) !important; }
.main_menu_wrap .main_menu .depth-1 .depth-item .gnb-depth-2 li a:hover{ color:var(--gnpc) !important; }
header .header_inner .header_right ul li a{ color:var(--gnpc-navy); }
header .header_inner .header_right ul li a:hover{ color:var(--gnpc) !important; }
header .mobile_btn span{ background:var(--gnpc-navy) !important; }

/* 메인: 한 화면 안에 [헤더 + 이미지 + 푸터] 모두, 이미지가 가운데를 꽉 채움 (푸터높이 자동적응) */
body:has(.main_slide){ display:flex; flex-direction:column; min-height:100vh; }
body:has(.main_slide) #wrapper,
body:has(.main_slide) #container_wr,
body:has(.main_slide) #container{ display:contents; }
.main_slide{ flex:1 1 auto; min-height:0; box-sizing:border-box; padding-top:90px; position:relative; overflow:hidden; background:#126668; }
.main_slide a{ display:block; width:100%; height:100%; position:relative; }
/* 배경 레이어: 화면을 꽉 채움(cover, 좌측 기준으로 우측 그래픽만 크롭) */
.main_slide .main_bg{ display:block; width:100%; height:100%; }
.main_slide .main_bg img{ width:100%; height:100%; object-fit:cover; object-position:left center; display:block; }
/* 텍스트/로고 레이어: 배경 위에 좌측 배치, 항상 온전히 보이도록(contain) — 하단 후원로고 안 잘림 */
.main_slide .main_txt{ position:absolute; left:9.6%; top:12.5%; height:80.6%; width:auto; object-fit:contain; display:block; pointer-events:none; }
body:has(.main_slide) #ft{ flex:0 0 auto; align-self:stretch; }

/* 푸터: 청록 그라데이션 + 흰 텍스트 (헤더처럼 하단 가로 꽉 차게) */
/* default.css의 #ft{margin:0 auto}가 flex(메인) 레이아웃에서 가로 auto마진으로 밴드를 좁히는 것을 무력화 */
#ft{ background:linear-gradient(120deg,var(--gnpc-deep) 0%,var(--gnpc) 55%,var(--gnpc-mint) 100%) !important; border-top:0 !important; width:100%; margin:0 !important; text-align:left; }
#ft .footer_logo img{ width:auto; height:78px; }
#ft .footer_info p{ color:rgba(255,255,255,.9) !important; }
#ft .footer_info .company{ color:#fff !important; }
#ft .footer_info .copy{ color:rgba(255,255,255,.65) !important; margin-top:.4em; }
#ft .footer_info .ft_bar{ display:inline-block; width:1px; height:11px; background:rgba(255,255,255,.5); margin:0 12px; vertical-align:middle; }

@media only screen and (max-width:768px){
  body:has(.main_slide){ display:block; min-height:0; }
  body:has(.main_slide) #wrapper,
  body:has(.main_slide) #container_wr,
  body:has(.main_slide) #container{ display:block; }
  .main_slide{ flex:none; height:auto; padding-top:60px; overflow:visible; }
  .main_slide a{ height:auto; }
  .main_slide .main_bg,
  .main_slide .main_bg img{ height:auto; object-fit:initial; }
  .main_slide .main_txt{ display:none; } /* 모바일은 배경(main_bg_mobile)에 텍스트 포함 */
}

/* ===== GNPC 모바일 폴리시 ===== */
html,body{ overflow-x:hidden; }
#ft .footer_info p{ word-break:keep-all; }
@media only screen and (max-width:1024px){
  header .header_inner .header_right{ display:none; }           /* 빈 우측영역 숨김 */
  header .mobile_btn{ right:0; }
  header .mobile_btn span{ background:var(--gnpc-navy) !important; }
}
@media only screen and (max-width:768px){
  .footer_content{ flex-direction:column; align-items:flex-start !important; gap:24px; text-align:left; }
  #ft .footer_logo img{ height:64px; }
  #ft .footer_info p{ font-size:14px; }
  #ft .footer_info .addr{ line-height:1.7em; }
  /* 모바일 슬라이드 메뉴 청록 액센트 */
  #lnb .depth-1.on > a{ color:var(--gnpc); }
  #lnb .gnb-depth-2 a:hover{ color:var(--gnpc); }
  .mobile_lnb .m_login_btn_wrap .btn:first-child{ background:var(--gnpc) !important; }
}
/* 햄버거 확실히 노출 (모바일) */
@media only screen and (max-width:1024px){
  header .header_inner .mobile_btn{ display:block !important; position:absolute; right:0; top:50%; transform:translateY(-50%); width:26px; height:19px; z-index:200; }
  header .header_inner .mobile_btn span{ background:var(--gnpc-navy) !important; height:2px; }
}

/* ===== 메인 공지사항 (notice 게시판 DB 연동) ===== */
.main_notice{ padding:70px 0; background:#fff; }
.main_notice_head{ display:flex; align-items:flex-end; justify-content:space-between; border-bottom:2px solid var(--gnpc); padding-bottom:16px; margin-bottom:6px; }
.main_notice_head h2{ font-size:30px; font-weight:700; color:var(--gnpc-navy); }
.main_notice_head h2 span{ font-size:15px; color:var(--gnpc); font-weight:600; margin-left:8px; letter-spacing:1px; }
.main_notice_head .more{ font-size:15px; color:#888; }
.main_notice_head .more:hover{ color:var(--gnpc); }
.main_notice .notice h2{ display:none; }                 /* 스킨 기본 제목 숨김 (자체 헤더 사용) */
.main_notice .notice li{ border-bottom:1px solid #eee; }
.main_notice .notice li a{ display:flex; align-items:center; gap:10px; padding:16px 4px; font-size:17px; color:#333; transition:color .15s; }
.main_notice .notice li a:hover{ color:var(--gnpc); }
.main_notice .notice li a strong{ font-weight:600; }
.main_notice .notice .new_icon{ display:inline-block; background:var(--gnpc); color:#fff; font-size:11px; font-weight:700; min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:50%; flex:none; }
.main_notice .notice .empty_li{ padding:40px 0; text-align:center; color:#999; border:0; }
@media (max-width:768px){
  .main_notice{ padding:40px 0; }
  .main_notice_head h2{ font-size:22px; }
  .main_notice .notice li a{ font-size:15px; padding:14px 2px; }
}

/* ===== 참가안내(사전접수) 마감 페이지 ===== */
/* 배너를 헤더(메뉴) 바로 아래에 밀착 — 헤더 높이(90px)만큼만 여백 */
.reg_closed_wrap{ padding-top:90px; }
.reg_closed_wrap img{ width:100%; height:auto; display:block; }
/* 마감 팝업 (상시 표시, 닫기 없음) — 헤더 아래부터 덮어 메뉴는 계속 클릭 가능 */
.reg_closed_dim{ position:fixed; top:90px; left:0; right:0; bottom:0; z-index:190; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,40,36,.55); }
.reg_closed_pop{ width:100%; max-width:440px; background:#fff; border-radius:16px; padding:44px 34px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3); border-top:5px solid var(--gnpc); }
.reg_closed_pop .rc_tit{ font-size:22px; font-weight:700; color:var(--gnpc-deep); margin-bottom:14px; }
.reg_closed_pop .rc_msg{ font-size:17px; line-height:1.65; color:#444; }
@media only screen and (max-width:480px){
  .reg_closed_wrap{ padding-top:60px; } /* 모바일 헤더 높이 60px */
  .reg_closed_dim{ top:60px; }
  .reg_closed_pop{ padding:34px 24px; }
  .reg_closed_pop .rc_tit{ font-size:19px; }
  .reg_closed_pop .rc_msg{ font-size:15px; }
}

/* ===== 상단 .img 배너로 시작하는 서브페이지: 배너를 헤더(메뉴)에 밀착 ===== */
/* 기존 .sub_page{padding-top:270px}(헤더90+옛 고정비주얼180)를 배너 페이지에서만 헤더 높이로 축소 */
/* :first-of-type 사용 → 앞에 <p class="mobile_hint"> 가 와도 첫 배너 이미지에 정상 적용 */
.sub_page:has(> .img:first-of-type){ padding-top:90px; }
/* 모바일 인라인 스크립트(margin-top:-177px)까지 무력화하여 항상 밀착 */
.sub_page:has(> .img:first-of-type) > .img:first-of-type{ margin-top:0 !important; }
@media only screen and (max-width:480px){
  .sub_page:has(> .img:first-of-type){ padding-top:60px; } /* 모바일 헤더 높이 60px */
}

/* ===== 메뉴 한/영 병기 ===== */
/* 영문 병기로 항목 폭이 늘어 간격 축소(가변) */
header .header_inner .main_menu_wrap .main_menu{ gap:0 clamp(26px,3.6vw,64px); }
.main_menu .depth-1-link{ text-align:center; line-height:1.15; }
.main_menu .depth-1-link .menu_en{ display:block; font-style:normal; font-weight:500; font-size:12px; letter-spacing:.2px; color:#8ba0ab; margin-top:3px; white-space:nowrap; }
.main_menu .depth-1-link.on .menu_en,
.main_menu .depth-1-link:hover .menu_en{ color:var(--gnpc); }
/* 드롭다운 하위 영문 */
.gnb-depth-2 a .menu_en{ font-style:normal; font-size:12px; color:#9aa7ae; }
/* 모바일 슬라이드 메뉴(lnb): 영문은 한 줄 옆에 작게 */
@media only screen and (max-width:1024px){
  #lnb .depth-1-link .menu_en{ display:inline; font-size:13px; margin-left:6px; margin-top:0; }
}

/* ===== 언어 전환 KR/EN ===== */
.lang_switch{ display:flex; align-items:center; gap:8px; }
.lang_switch a{ font-size:15px; font-weight:600; color:#9aa7ae; letter-spacing:.5px; transition:color .15s; }
.lang_switch a.on{ color:var(--gnpc-navy); }
.lang_switch a:hover{ color:var(--gnpc); }
.lang_switch .lang_bar{ width:1px; height:12px; background:#cfd6da; }
/* 모바일: 헤더 우측영역을 숨김 처리에서 되살려 햄버거 왼쪽에 표시 */
@media only screen and (max-width:1024px){
  header .header_inner .header_right{ display:flex !important; right:46px; }
  .lang_switch a{ font-size:14px; }
}
@media only screen and (max-width:480px){
  header .header_inner .header_right{ right:40px; }
  .lang_switch{ gap:6px; }
  .lang_switch a{ font-size:13px; }
}

/* ============================================================
   게시판(공지사항 등) — 사이트(GNPC) 톤에 맞춘 반응형 리스트/뷰
   세 스킨(basic/notice_b/notice_board_d) 공통 마크업(#bo_list / #bo_v)에 적용
   ============================================================ */
/* 고정 헤더(90px)에 가리지 않도록 게시판 페이지 상단 여백 확보 */
#container:has(#bo_list),
#container:has(#bo_v){ padding-top:120px; padding-bottom:80px; }
#bo_list, #bo_v{ max-width:1200px; margin:0 auto; }

/* --- 리스트 상단 (총 게시물수 / 글쓰기 버튼 등) --- */
#bo_list #bo_list_total{ color:#667; font-size:14px; }
#bo_list .btn_b01, #bo_list .btn_bo_user .btn, #bo_list .btn_admin{ background:var(--gnpc); color:#fff; border:0; border-radius:6px; padding:8px 12px; transition:background .15s; }
#bo_list .btn_b01:hover, #bo_list .btn_bo_user .btn:hover{ background:var(--gnpc-deep); }

/* --- 리스트 테이블 --- */
#bo_list .tbl_head01 table{ border-top:2px solid var(--gnpc); border-collapse:collapse; width:100%; }
#bo_list thead th{ background:#f2f8f5; color:var(--gnpc-navy); font-weight:600; font-size:15px; padding:16px 10px; border-bottom:1px solid #dce7e3; }
#bo_list tbody td{ padding:16px 10px; border-bottom:1px solid #eef2f1; font-size:15px; color:#4a4f55; vertical-align:middle; }
#bo_list tbody tr{ border-left:0 !important; transition:background .12s; }
#bo_list tbody tr:hover td{ background:#f7fbfa; }
#bo_list tbody .even td{ background:transparent; }
#bo_list .td_subject{ text-align:left; }
#bo_list .td_subject .bo_tit{ font-size:15.5px; }
#bo_list .td_subject .bo_tit a{ color:#333; transition:color .12s; }
#bo_list .td_subject .bo_tit a:hover{ color:var(--gnpc); }
#bo_list .cnt_cmt{ background:#e7f3ee; color:var(--gnpc-deep); }
#bo_list .bo_tit .new_icon{ background:var(--gnpc) !important; color:#fff !important; }

/* --- 공지글 강조(사이트 청록으로) --- */
#bo_list .bo_notice td{ background:#f1f8f5 !important; border-bottom:1px solid #e0efe8 !important; }
#bo_list .bo_notice .td_subject .bo_tit a{ font-weight:700; color:var(--gnpc-navy); }
#bo_list .notice_icon{ display:inline-block; color:#fff !important; background:var(--gnpc); padding:3px 10px; border-radius:4px; font-size:12px; font-weight:700; line-height:1.4; }

/* --- 빈 목록 --- */
#bo_list .empty_table, #bo_list .empty_list{ padding:60px 0; text-align:center; color:#98a2a8; }

/* --- 검색창 --- */
#bo_list .bo_sch_wrap .bo_sch, #bo_list .bo_sch_wrap fieldset{ border:0; }
#bo_list .sch_btn, #bo_list .bo_sch button[type=submit]{ background:var(--gnpc); color:#fff; border:0; border-radius:6px; }

/* --- 페이지네이션(사이트 청록) --- */
.pg_wrap{ margin-top:30px; text-align:center; }
.pg_wrap .pg a, .pg_wrap .pg strong{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; margin:0 2px; border:1px solid #e2e8e6; border-radius:6px; color:#667; font-size:14px; vertical-align:middle; }
.pg_wrap .pg a:hover{ border-color:var(--gnpc); color:var(--gnpc); }
.pg_wrap .pg strong.pg_current{ background:var(--gnpc) !important; border-color:var(--gnpc) !important; color:#fff !important; }

/* --- 글 보기(view) --- */
#bo_v{ position:relative; }
#bo_v_title, #bo_v .bo_v_tit, #bo_v h2#bo_v_title{ font-size:24px; font-weight:700; color:var(--gnpc-navy); line-height:1.4; padding:0 0 18px; border-bottom:2px solid var(--gnpc); margin-bottom:0; }
#bo_v .bo_v_info, #bo_v_info{ font-size:13.5px; color:#8a939a; padding:14px 2px; border-bottom:1px solid #eef2f1; }
#bo_v #bo_v_atc, #bo_v .bo_v_atc, #bo_v_con{ padding:32px 4px; font-size:16px; line-height:1.75; color:#333; word-break:keep-all; }
#bo_v #bo_v_con img{ max-width:100%; height:auto; }
#bo_v .btn_b01, #bo_v .btn_v_atc .btn, #bo_v .bo_v_com .btn{ background:var(--gnpc); color:#fff; border:0; border-radius:6px; }
#bo_v .btn_b02{ background:#eef2f1; color:#556; border:0; border-radius:6px; }

/* --- 모바일: 리스트를 카드형으로 --- */
@media only screen and (max-width:768px){
  #container:has(#bo_list), #container:has(#bo_v){ padding-top:84px; padding-bottom:50px; }
  #bo_list .tbl_head01 table, #bo_list thead, #bo_list tbody, #bo_list th, #bo_list td, #bo_list tr{ display:block; width:auto; }
  #bo_list thead{ display:none; }
  #bo_list .tbl_head01 table{ border-top:0; }
  #bo_list tbody tr{ border:1px solid #e6ebee !important; border-radius:10px; padding:14px 16px; margin-bottom:12px; background:#fff; }
  #bo_list tbody tr:hover td{ background:transparent; }
  #bo_list tbody td{ border:0; padding:0; }
  #bo_list .td_chk, #bo_list .td_num, #bo_list .td_num2{ display:none; }        /* 체크·번호·조회 숨김 */
  #bo_list .bo_notice .td_num2{ display:block; margin-bottom:6px; }             /* 공지 배지는 노출 */
  #bo_list .td_subject{ padding:0 !important; }
  #bo_list .td_subject .bo_tit{ font-size:16px; font-weight:600; line-height:1.45; }
  #bo_list .td_name, #bo_list .td_datetime{ display:inline-block; width:auto; font-size:13px; color:#98a2a8; padding:8px 0 0; }
  #bo_list .td_name{ padding-right:0; }
  #bo_list .td_name:after{ content:'·'; margin:0 7px; color:#cdd5d9; }
  #bo_list .bo_notice td{ background:#f1f8f5 !important; }
  #bo_v_title, #bo_v h2#bo_v_title{ font-size:20px; }
  #bo_v #bo_v_atc, #bo_v_con{ font-size:15.5px; padding:24px 2px; }
}

/* ============================================================
   이미지 콘텐츠 페이지(행사개요/프로그램/연사소개) — 모바일 가독성
   가로형 데스크톱 이미지를 모바일에서 좌우 스크롤로 크게 볼 수 있게
   ============================================================ */
.mobile_hint{ display:none; }
@media only screen and (max-width:768px){
  .mobile_hint{ display:block; text-align:center; font-size:12.5px; color:#8a939a; padding:12px 12px 4px; letter-spacing:.2px; }
  /* 스크롤 컨테이너 */
  .content_img{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px; }
  .content_img::-webkit-scrollbar{ height:4px; }
  .content_img::-webkit-scrollbar-thumb{ background:rgba(42,139,121,.4); border-radius:4px; }
  .content_img > img{ width:auto !important; max-width:none !important; min-width:800px; height:auto !important; display:block; }
  /* 연사 약력 카드: 가로 스크롤 + 카드 간격 */
  .speaker_bios .bio_item.content_img{ margin-bottom:14px; }
}

/* ============================================================
   메인 레이어 팝업 (img/popup.jpg)
   ============================================================ */
.main_popup[hidden]{ display:none; }
.main_popup{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.main_popup .mp_dim{ position:absolute; inset:0; background:rgba(8,30,40,.62); }
.main_popup .mp_box{ position:relative; width:100%; max-width:480px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.35); }
/* 이미지: 가로/세로 모두 넘치지 않게(정사각 이미지 대응) */
.main_popup .mp_img img{ display:block; width:auto; max-width:100%; max-height:calc(92vh - 62px); margin:0 auto; }
.main_popup .mp_x{ position:absolute; top:10px; right:12px; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.35); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background .15s; }
.main_popup .mp_x:hover{ background:rgba(0,0,0,.6); }
.main_popup .mp_foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; background:var(--gnpc-navy); }
.main_popup .mp_foot label{ display:flex; align-items:center; gap:7px; color:#fff; font-size:14px; cursor:pointer; }
.main_popup .mp_foot input{ width:16px; height:16px; accent-color:var(--gnpc); cursor:pointer; }
.main_popup .mp_close{ background:transparent; border:1px solid rgba(255,255,255,.55); color:#fff; padding:7px 16px; border-radius:6px; font-size:14px; cursor:pointer; transition:background .15s; }
.main_popup .mp_close:hover{ background:rgba(255,255,255,.16); }
@media only screen and (max-width:480px){
  .main_popup{ padding:14px; }
  .main_popup .mp_box{ max-width:92vw; }
  .main_popup .mp_img img{ max-height:calc(90vh - 58px); }
  .main_popup .mp_foot{ padding:10px 12px; }
  .main_popup .mp_foot label{ font-size:13px; }
  .main_popup .mp_close{ padding:6px 13px; font-size:13px; }
}
