/*공통*/
.un-style {list-style: none; margin:0; padding:0;}
.clearfix:after {content:" "; display: table; clear:both;}

.fnl {font-weight: 300 !important;}
.fnr {font-weight: 400 !important;}
.fnm {font-weight: 500 !important;}
.fnsb {font-weight: 600 !important;}
.fnb {font-weight: 700 !important;}
.fneb {font-weight: 800 !important;}

table {table-layout: fixed;}

@font-face {
	font-family: 'SeoulHangangM';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulHangangM.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'KimjungchulMyungjo-Bold';
	src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2302_01@1.0/KimjungchulMyungjo-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

.ffp {font-family: Pretendard-Regular;}
.ffn {font-family: Noto Sans KR !important;}

.line-15 {line-height: 1.5;}
.line-18 {line-height: 1.8;}
.line-2 {line-height: 2;}

h5.title {font-size: 2rem !important;}
h4.title {font-size: 3rem !important;}
h3.title {font-size: 3.6rem !important;}
h2.title {font-size: 4rem !important;}
h1.title {font-size: 4.4rem !important;}

p.content {font-size: 1.7rem !important;}

.ptitle {font-size: 2.5rem;}
.btitle {font-size: 4.2rem;}
.mtitle {font-size: 3rem;}
.bbtitle {font-size: 6.2rem;}

.cs-title {font-size: 2.4rem !important;}
.cm-title {font-size: 2.8rem !important;}
.cl-title {font-size: 3.2rem !important;}
.cx-title {font-size: 3.4rem !important;}

.bb-content {font-size: 2.2rem !important;}
.pp-content {font-size: 2rem !important;}
.cs-content {font-size: 1.8rem !important;}
.ss-content {font-size: 1.6rem !important;}

.mb05 {margin-bottom: 5px !important;}
.mb2 {margin-bottom: 2rem !important;}
.mb4 {margin-bottom: 4rem !important;}
.mb5 {margin-bottom: 5rem !important;}
.mb6 {margin-bottom: 6rem !important;}
.mb7 {margin-bottom: 7rem !important;}
.mb8 {margin-bottom: 8rem !important;}
.mb9 {margin-bottom: 9rem !important;}
.mb10 {margin-bottom: 10rem !important;}

.mt2 {margin-top: 2rem !important;}
.mt4 {margin-top: 4rem !important;}
.mt10 {margin-top: 10rem !important;}

.ml2 {margin-left: 20px !important;}

.pt4 {padding-top: 4rem !important;}
.pt5 {padding-top: 5rem !important;}
.pt6 {padding-top: 6rem !important;}
.pt7 {padding-top: 7rem !important;}
.pt8 {padding-top: 8rem !important;}
.pt9 {padding-top: 9rem !important;}
.pt10 {padding-top: 10rem !important;}

.pb6 {padding-bottom: 6rem !important;}
.pb7 {padding-bottom: 7rem !important;}
.pb8 {padding-bottom: 8rem !important;}
.pb9 {padding-bottom: 9rem !important;}
.pb10 {padding-bottom: 10rem !important;}

.co66 {color: #666666 !important;}
.co00 {color: #000000 !important;}
.coff {color: #FFFFFF !important;}
.coeff {color: #90EFFF !important;}
.co8b7 {color: #4568B7 !important;}
.co2f9 {color: #5082F9 !important;}

.bkff {background-color: #FFFFFF !important;}

.bbd8 {border-bottom: 1px solid #D8D8D8;}

.list-dot > li {position: relative; padding-left: 10px; }
.list-dot > li:after {position: absolute; content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; top: 14px; left: 0; transform: translateY(-50%); background-color: #000000;}
.list-dot.co66 > li:after {background-color: #666666;}

.list-flex > li {display: flex;}
.list-flex  >li span:nth-child(1) {flex: none;}

.list-back > li {background-color: #FFFFFF; border-radius: 73px; padding: 1.5rem 2.8rem;}

.rowm-10 {margin-left: -10px; margin-right: -10px;}
.rowm-10 > div {padding-left: 10px; padding-right: 10px;}

.rowm-20 {margin-left: -20px; margin-right: -20px;}
.rowm-20 > div {padding-left: 20px; padding-right: 20px;}

.btn.btn-l {font-size: 2rem; padding: 20px 0;}
.btn.btn-m {font-size: 1.8rem; font-weight: 500; padding: 1rem 6.4rem;}
.btn.btn-s {font-size: 1.6rem; padding: 7px 2.3rem;}

.btn.bk-4e {background-color: #F15D4E; color: #FFFFFF;}

.btn.btn-pdf {font-size: 3.2rem; color: #FFFFFF; background: #E61E2B; padding: 1rem 9rem; border-radius: 7rem; transition: all 0.3s;}
.btn.btn-pdf:hover {background-color: #AA0D17;}

.btn.btn-regist {font-size: 3.2rem; padding: 1rem 14rem; border-radius: 7.2rem;}

.toast-message {font-size: 1.8rem;}

#footer {padding: 5rem 0 4.7rem; width: 100%; background-color: rgba(5, 22, 64, 0.9);}

#header {position: absolute; width: 100%; left: 0; z-index: 100; top: 0;}
#header .menus {background: transparent;}
#header.whel {box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.20); background: #FFFFFF;}
#header.active {background: #FFFFFF;}

.header-mobile {position: absolute; z-index: 5; background: #ffffff; width: 310px; right: 0; top: 0; height: 100vh; overflow-y: scroll; display: none;}
.header-mobile.active {display: block;}
.mheader {background-color: #F15D4E; padding: 10px 20px;}

#header .header-mobile .hm-menu > li {padding: 0; text-align: left; border-bottom: 1px solid #DBDBDB;}
#header .hm-menu > li > a {color: #000000; padding-top: 20px; padding-bottom: 20px; padding-left: 32px; font-size: 18px; font-weight: 600; display: block;}
#header .hm-menu .header-sub-menu {padding-top: 4px; padding-bottom: 4px; position: relative; width: 100%; left: 0; display: none;}
#header .hm-menu .on .header-sub-menu {display: block;}
#header .hm-menu > li.on .header-sub-menu {border-top: 1px solid #DBDBDB;}
#header .hm-menu .header-sub-menu > li > a {color: #000000; text-align: left; padding: 15px 50px; font-size: 16px;  display: block;}
.header-logo {max-width: 22.8rem; margin: 3rem 0;}

.menu input {display: none;}
.menu input + label {display: block; width: 3.3rem; height: 2.6rem; position: relative;}
.menu label span {display: block; width: 3.3rem; height: 2px; position: absolute; transition: all 0.5s; margin: 0; background: #FFFFFF;}
.whel .menu label span {background: #000000;}
.active .menu label span {background: #FFFFFF;}
.menu label span:nth-child(1) {top: 0;}
.menu label span:nth-child(2) {top: 50%; transform: translateY(-50%);}
.menu label span:nth-child(3) {bottom: 0;}
.menu input[type=checkbox]:checked + label span:nth-child(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
.menu input[type=checkbox]:checked + label span:nth-child(2) {opacity: 0;}
.menu input[type=checkbox]:checked + label span:nth-child(3) {top: 50%; transform: translateY(-50%) rotate(-45deg);}

.header-menu {z-index: 10; position: relative;}
.header-menu > li {position: relative; }
.header-menu > li > a {font-size: 2rem; font-weight: 600; display: block; position: relative; transition: color 0.1s; color: #FFFFFF;}
.whel .header-menu > li > a {color: #000000;}
.active .header-menu > li > a {color: #000000;}
.header-sub-menu {position: absolute; width: 100%; display: none; height: 32.4rem; border-right: 1px solid #E6E6E6; padding: 1rem 0;}
.header-menu > li:nth-child(1) .header-sub-menu {border-left: 1px solid #E6E6E6;}
.active .header-sub-menu {display: block;}
.header-sub-menu li a {font-size: 2rem; color: #6A6A6A; display: block; padding: 1rem 0; text-align: center;}
.header-menu-back {
	height: 32.4rem; background-color: #FFFFFF; position: absolute; width: 100%; left: 0; border-top: 1px solid #EDEDED; display: block; border-top: 1px solid #EDEDED;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.20); display: none;
}
.active .header-menu-back {display: block;}

.header-mobile .header-sub-menu {height: auto;}
/*공통*/

.wrap-loading{ /*화면 전체를 어둡게 합니다.*/
	display: block;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background: rgba(0,0,0,0.2); /*not in ie */
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
	z-index: 2000;
}

.wrap-loading div{ /*로딩 이미지*/
	position: fixed;
	top:50%;
	left:50%;
	margin-left: -21px;
	margin-top: -21px;
}

.btnApply {
	width: 14.6rem; height: 14.6rem; border-radius: 100%; background-color: #5082F9;
	font-size: 2.8rem; display: flex; align-items: center; justify-content: center; position: fixed; right: 5rem; bottom: 10rem;
	color: #FFFFFF; font-weight: 900;
}

.background-video {padding-bottom: 47.25%;}
.background-video video {position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover;}

.section2 {padding: 19.8rem 0 24rem; background-repeat: no-repeat; background-position: center bottom; background-image: url('/css/egovframework/img/userpage/main/section2-back.png');}

.program-tab {max-width: 117.9rem; margin: 0 auto; background-color: rgba(255, 255, 255, 0.8); border-radius: 59px; margin-bottom: 13.6rem;}
.program-tab table {border-spacing: 0 7px;}
.program-tab table thead th {font-size: 2.8rem; color: #FFFFFF; font-weight: 800; background-color: #5082F9; padding: 1.1rem 0;}
.program-tab table tbody td {font-size: 2.8rem; color: #000000; font-weight: 700; background-color: #FFFFFF; padding: 1.1rem 0;}

.talk-tab {border: 2px solid #4568B7; border-radius: 59px;}
.talk-info {position: relative;}
.talk-info ul li div {color: #FFFFFF; font-weight: 800;}
.talk-info ul li div:nth-child(1) pre {color: #FFFFFF; font-family: Pretendard Variable; text-shadow: 0 10px 10px rgba(0, 0, 0, 0.30);}
.talk-info ul li div:nth-child(2) p {color: #5082F9; margin-bottom: 0; text-shadow: 0 10px 10px rgba(0, 0, 0, 0.30);}
.talk-info ul li div:nth-child(2) p a {color: #5082F9;}

img[class^=talk-icon] {position: absolute; max-width: 100%;}
.talk-icon1 {top: 20.3%; right: 0; width: 8.6%; animation: talk-icon1 0.8s 0s infinite alternate;}
.talk-icon2 {top: 28.68%; left: 0; width: 9%; animation: talk-icon2 0.8s 0s infinite alternate;}
.talk-icon3 {top: 34.5%; right: 13.86%; width: 14.06%; animation: talk-icon3 0.8s 0s infinite alternate;}
.talk-icon4 {bottom: 12.22%; left: 3.26%; width: 11.8%; animation: talk-icon4 0.8s 0s infinite alternate;}

@keyframes talk-icon1 { 0% {top:20.3%;} to {top:19.3%;} }
@keyframes talk-icon2 { 0% {top:28.68%;} to {top:27.68%;} }
@keyframes talk-icon3 { 0% {top:34.5%;} to {top:33.5%;} }
@keyframes talk-icon4 { 0% {bottom: 12.22%;} to {bottom: 13.22%;} }

.video-tab {padding: 16rem 0 23.7rem;}

#modalRequest .modal-dialog {max-width: 69.7rem;}
#modalRequest .close {opacity: 1; position: absolute; right: 4rem; top: 4rem;}
#modalRequest .modal-content {background-color: rgba(255, 255, 255, 0.98); box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.30); border-radius: 59px; border: 0;}
#modalRequest h6 {font-size: 3.6rem; font-weight: 800;}
#modalRequest #btnApplySave {font-size: 2.8rem; font-weight: 800; padding: 1.5rem 0; width: 100%; text-align: center; background-color: #5082F9; color: #FFFFFF;}
#modalRequest table th {font-size: 2.8rem; padding: 1rem 0; text-align: center;}
#modalRequest table td {padding: 1rem 0;}
#modalRequest table td input {width: 100%; border: 1px solid #C3C3C3; font-size: 2.8rem; padding: 1rem 0.5rem;}
.agree label {font-size: 2.2rem; color: #4F4F4F; display: flex; align-items: center; justify-content: end;}
.agree input[type=checkbox] {width: 2.9rem; height: 2.9rem; margin-left: 1rem;}

.modal-open .modal {display: flex !important; align-items: center;}