﻿/*** slide_popup ***/
.spopup_wrap {top:10.75rem !important;}
#wrap.scroll .spopup_wrap {top: 0 !important;}
.spopup_wrap {transition: margin-top 0.3s ease, left 0.3s !important;}
#wrap.openPop.scroll .spopup_wrap {top: -7rem !important;}
@media (max-width: 1540px) {
	.spopup_wrap {top:10.75rem !important;}
}
@media (max-width: 1200px) {
	.spopup_wrap {top:10.75rem !important;}
	#wrap.scroll .spopup_wrap {top: 0 !important;}
	#wrap.openPop.scroll .spopup_wrap {top: -7rem !important;}
}
@media (max-width: 1024px) {
	.spopup_wrap {top:6.5rem !important;}
	#wrap.scroll .spopup_wrap {top: 6.5rem !important;}
	#wrap.openPop.scroll .spopup_wrap,
    #wrap.openPop.scroll .up_pop + .spopup_wrap {top: 6.5rem !important;}
}
@media (max-width: 768px) {
	.spopup_wrap {top:3rem !important;}
	#wrap.scroll .spopup_wrap {top: 3rem !important;}
	#wrap.openPop.scroll .spopup_wrap,
    #wrap.openPop.scroll .up_pop + .spopup_wrap {top: 3rem !important;}
}
@media (max-width: 480px) {
	.spopup_wrap {top:3rem !important;}
	#wrap.scroll .spopup_wrap {top: 3rem !important;}
}
@media (max-width: 340px) {
   /* 좌측 팝업 : openPop */
   #wrap.openPop.scroll .up_pop + .spopup_wrap {top: 3rem !important;}
}

/* 상단팝업 */
.popBtn {
    top: 10px !important;
}

/* 메인비주얼 */
.visual { position: relative; }
.visual .slider { height: 25rem; overflow: hidden; border-radius: 1.5rem; }
.visual .slider .slick-list,
.visual .slider .slick-track { height: 100%; }
.visual .slider .item { height: 100%; display: flex; justify-content: center; align-items: center; background: #ccc; }
.visual .slider .item img { max-width: 100%; }
.visual .control { margin-top: 2.1rem; display: flex; align-items: center; gap: 0.5rem; }
.visual .control a { color: #1D1D1D; font-size: 1rem; transition: 0.3s; }
.visual .control .play { display: none; }
.visual .control .progressbar { width: 4.5rem; height: 3px; border-radius: 3px; background: rgba(29, 29, 29, 0.2); overflow: hidden; }
.visual .control .progressbar .proBar { width: 0; height: 100%; background: #0160AE; border-radius: 3px; transition: 5s; }
.visual .control .page { font-size: 0.85rem; color: #1D1D1D; }
.visual .control .page strong { position: relative; color: #0160AE; padding-right: 1.2rem; font-weight: 700; }
.visual .control .page strong::before { position: absolute; top: 50%; right: 0.5rem; width: 3px; height: 3px; border-radius: 50%; background: #D9D9D9; transform: translateY(-50%); content: ""; }
.visual .control a:hover,
.visual .control a:focus { color: #0160AE; }

.callCta {position: absolute;bottom: -0.3rem;right: 0;box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);border-radius: 2rem;padding: 0.7rem 1.2rem;display: inline-flex;align-items: center;font-size: 20px;background: #fff;}
.callCta .call {display: flex; color: #1D1D1D;font-weight: 500;gap: 0.5rem; align-items: center;}
.callCta .call p { white-space: nowrap; }
.callCta .call strong {color: #0160AE;font-weight: 600;font-size: 18px;}
.callCta em {position: relative;color: #666;padding-left: 0.5rem;margin-left: 0.5rem; }
.callCta em::before {position: absolute;top: 50%;transform: translateY(-50%);left: 0;width: 1px;height: 1rem;background: #D9D9D9;content: "";}


/* 바로가기1 */
.M_link1 { position: relative; }
.M_link1 ul li + li { margin-top: 1rem; }
.M_link1 ul li a { position: relative; display: block; border-radius: 1.5rem; padding: 1.9rem 1.5rem; overflow: hidden; height: 100%; }
.M_link1 ul li:nth-child(1) a { background: linear-gradient(-90deg, #7EBE53, #088446); }
.M_link1 ul li:nth-child(2) a { background: linear-gradient(-90deg, #1C8CAA, #084657); }
.M_link1 ul li:nth-child(3) a { background: linear-gradient(-90deg, #049EEA, #0160AE); }
.M_link1 ul li a::before { position: absolute; top: 1.7rem; right: -3.85rem; width: 12.5rem; height: 12.5rem; border-radius: 50%; content: ""; transition: 0.3s; }
.M_link1 ul li:nth-child(1) a::before { background: linear-gradient(90deg, #7EBE53, #088446); }
.M_link1 ul li:nth-child(2) a::before { background: linear-gradient(90deg, #1C8CAA, #084657); }
.M_link1 ul li:nth-child(3) a::before { background: linear-gradient(90deg, #049EEA, #0160AE); }
.M_link1 ul li a .img { position: absolute; bottom: 1.5rem; right: 1.5rem; }
.M_link1 ul li a .tit { font-size: 1.3rem; color: #fff; font-weight: 600; }
.M_link1 ul li:nth-child(1) a .tit em { color: #C8FF7B; }
.M_link1 ul li:nth-child(2) a .tit em { color: #57FFD8; }
.M_link1 ul li:nth-child(3) a .tit em { color: #6DE9FF; }
.M_link1 ul li a .txt { position: relative; color: #fff; margin-top: 0.75rem; line-height: 1.38rem; z-index: 1; font-weight: 300; word-break: keep-all; }
.M_link1 ul li a:hover::before,
.M_link1 ul li a:focus::before { animation: linkHover 2s infinite linear; }

@keyframes linkHover {
	0% { transform: rotate(0); }
	100% { transform: rotate(360deg); }
}

/* 바로가기2 */
.M_link2 { position: relative; }
.M_link2 ul { display: flex; gap: 4rem; }
.M_link2 ul li { position: relative; flex: 1; }
.M_link2 ul li + li::before { position: absolute; top: 50%; left: -2rem; transform: translateY(-50%); width: 1px; height: 100%; background: #EEEEEE; content: ""; }
.M_link2 ul li a { position: relative; display: block; }
.M_link2 ul li a .icon { position: absolute; bottom: -0.5rem; right: 0; }
.M_link2 ul li a .tit { font-size: 1.1rem; font-weight: 700; color: #1D1D1D; }
.M_link2 ul li a .txt { font-size: 0.75rem; color: #666; margin: 0.8rem 0 2rem; line-height: 150%; word-break: keep-all; }
.M_link2 ul li a .baro { display: inline-flex; align-items: center; gap: 1rem; padding: 0.4rem 0.7rem; border-radius: 2rem; font-size: 0.75rem; font-weight: 600; border: 1px solid #CECECE; color: #1D1D1D; transition: 0.3s; }
.M_link2 ul li a:hover .baro { background: #0060AE; color: #fff; border-color: #0060AE; }

/* 공지사항 */
.M_notice { display: flex; gap: 1rem; height: 26.6rem; }
.M_notice .tit_wrap { width: 13rem; }
.M_notice .tit_wrap .heading { font-size: 1.3rem; font-weight: 600; color: #1D1D1D; margin-bottom: 1rem; }
.M_notice .tit_wrap p { font-size: 0.85rem; color: #666; line-height: 150%; word-break: keep-all; }
.M_notice .tit_wrap p em { font-weight: 600; }
.M_notice .titTab { margin-top: 2rem; }
.M_notice .titTab ul li + li { margin-top: 0.5rem; }
.M_notice .titTab ul li a { width: 11rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; border: 2px solid #F3F3F3; background: #F3F3F3; border-radius: 2.5rem; color: #666; transition: 0.3s; padding: 0.6rem 1.2rem; font-size: 1rem; }
.M_notice .titTab ul li a span { display: flex; gap: 0.5rem; align-items: center; }
.M_notice .titTab ul li a i { font-weight: 500; font-size: 0.85rem; }
.M_notice .tabWrap { position: relative; flex: 1; width: calc(100% - 14rem); }
.M_notice .tabWrap .list_box { display: none; }
.M_notice .tabWrap .list_box.on { display: flex; flex-direction: row-reverse; gap: 4rem; }
.M_notice .tabWrap .list_box ul { display: flex; flex-wrap: wrap; gap: 1rem; width: calc(100% - 6rem); flex: 1; }
.M_notice .tabWrap .list_box ul li { width: calc((100% - 1rem) / 2); }
.M_notice .tabWrap .list_box ul li a { position: relative; display: block; border-radius: 1.5rem; overflow: hidden; background: #F0F4FD; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
.M_notice .tabWrap .list_box ul li a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#0060AE, #002848); content: ""; opacity: 0; transition: 0.3s; }
.M_notice .tabWrap .list_box ul li a .txt_box { position: relative; padding: 2.5rem 2rem; z-index: 1; }
.M_notice .tabWrap .list_box ul li a .txt_box .tit { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1D1D1D; }
.M_notice .tabWrap .list_box ul li a .txt_box .txt { font-size: 0.75rem; color: #666; margin-top: 1rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 150%; }
.M_notice .tabWrap .list_box ul li a .date { position: relative; background: #fff; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 2rem; color: #1D1D1D; border-radius: 1.5rem 0 0 0; z-index: 1; }
.M_notice .tabWrap .list_box ul li a .date em { display: flex; align-items: center; gap: 0.4rem; }
.M_notice .tabWrap .list_box ul li a .date span { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.M_notice .btn_more { display: flex; justify-content: center; align-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #1D1D1D; color: #1D1D1D; font-size: 1rem; font-weight: 500; transition: 0.3s; }
.M_notice .btn_more i { transition: 0.3s; }
.M_notice .titTab ul li a:hover,
.M_notice .titTab ul li a:focus { color: #0060AE; font-weight: 600; }
.M_notice .titTab ul li a.current { border-color: #0060AE; background: #fff; color: #0060AE; font-weight: 700; }
.M_notice .tabWrap .list_box ul li a:hover::before,
.M_notice .tabWrap .list_box ul li a:focus::before { opacity: 1; }
.M_notice .tabWrap .list_box ul li a:hover .txt_box .tit,
.M_notice .tabWrap .list_box ul li a:focus .txt_box .tit,
.M_notice .tabWrap .list_box ul li a:hover .txt_box .txt,
.M_notice .tabWrap .list_box ul li a:focus .txt_box .txt { color: #fff; }
.M_notice .tabWrap .list_box ul li a:hover .date span strong,
.M_notice .tabWrap .list_box ul li a:focus .date span strong { text-decoration: underline; }
.M_notice .btn_more:hover,
.M_notice .btn_more:focus { border-color: #0060AE; background: #0060AE; color: #fff; } 
.M_notice .btn_more:hover i,
.M_notice .btn_more:focus i { transform: rotate(180deg); }

.M_notice .tabWrap .list_box ul li.no_data { display: flex; justify-content: center; align-items: center; width: 100%; height: 26.6rem; border-radius: 2rem; background: #F3F3F3; }


/* 배너존 */
/* .banner_zone {line-height: 1; border-top: 1px solid #d1d8e4;}
.banner_zone .container {position: relative; height: 4rem; overflow: hidden;}
.banner_zone h2 {float:left; margin-top: 1.5rem; width: 4rem; font-size: 0.8rem; font-weight: 600; color: #191919;}
.banner_zone .btn {float: left; margin-top: 1.1rem; overflow: hidden;}
.banner_zone .btn a {float: left; width: 1.8rem; height: 1.8rem; line-height:1.8rem; border-radius:50%; background:#f6f6f6; text-align:center; overflow: hidden;}
.banner_zone .btn a + a {margin-left:.25rem;}
.banner_zone .btn a.play{display:none;}
.banner_zone .bnWrap { width: calc(100% - 8rem); float:left; padding-top: 0.75rem; padding-left:1.75rem; overflow: hidden;}
.banner_zone .bnWrap a {display: block; height: 2.5rem; line-height: 2.3rem; text-align: center; margin:0 5px; overflow: hidden;}
.banner_zone .bnWrap a img {max-width: 100%; max-height: 100%; vertical-align: middle;} */

@media (max-width:1280px){
	/* 바로가기2 */
	.M_link2 ul { gap: 2rem; }
	.M_link2 ul li + li::before { left: -1rem; }

	/* 공지사항 */
	.M_notice .tabWrap .list_box.on { gap: 2rem; }
	.M_notice .tabWrap .list_box ul { width: calc(100% - 4rem); }
}

@media (max-width:1240px){
	/* 메인비주얼 */
	.visual .slider { height: auto; }
	.visual .control { margin-top: 0; position: absolute; bottom: 1rem; right: 1rem; background: rgba(0, 0, 0, 0.5); border-radius: 1rem; padding: 0.3rem 0.8rem; }
	.visual .control a { color: #fff; }
	.visual .control .page { color: #fff; }
	.visual .control .page strong { color: #6DE9FF; }
	.visual .control .progressbar { width: 3rem; background: #fff; }
	.visual .control .progressbar .proBar { background: #049EEA; }

	.callCta { position: relative; bottom: auto; right: auto; width: fit-content; font-size: 18px;}
	.callCta .call strong { font-size: 16px;}

	/* 바로가기1 */
	.M_link1 ul { display: flex; flex-wrap: wrap; gap: 1rem; }
	.M_link1 ul li { flex: 1; }
	.M_link1 ul li + li { margin-top: 0; }
	.M_link1 ul li a { padding: 1.4rem; }
	.M_link1 ul li a::before { display: none; }
	.M_link1 ul li a .img { bottom: auto; top: 1rem; right: 1.2rem; transition: 0.3s; }
	.M_link1 ul li a .img img { height: 1.6rem; }
	.M_link1 ul li a .tit { font-size: 1.1rem; }
	.M_link1 ul li a .txt br { display: none; }
	.M_link1 ul li a:hover .img,
	.M_link1 ul li a:focus .img { transform: translateY(-4px); }
}

@media (max-width:1024px){

	/* 바로가기2 */
	.M_link2 ul { flex-wrap: wrap; }
	.M_link2 ul li { flex: none; width: calc((100% - 2rem) / 2); }
	.M_link2 ul li a .tit { font-size: 1rem; }
	.M_link2 ul li a .txt { margin: 0.5rem 0 1rem; }
	.M_link2 ul li a .txt br { display: none; }

	/* 공지사항 */
	.M_notice { display: block; height: auto; }
	.M_notice .tit_wrap { width: 100%; }
	.M_notice .tit_wrap .heading { margin-bottom: 0.5rem; }
	.M_notice .titTab { margin-top: 1rem; }
	.M_notice .titTab ul { display: flex; flex-wrap: wrap; gap: 0.5rem; width: calc(100% - 2.5rem); }
	.M_notice .titTab ul li + li { margin-top: 0; }
	.M_notice .titTab ul li a { width: auto; }
	.M_notice .tabWrap { width: 100%; margin-top: 1rem; }
	.M_notice .tabWrap .list_box.on { display: block; }
	.M_notice .tabWrap .list_box ul { width: 100%; }
	.M_notice .tabWrap .list_box ul li a .txt_box { padding: 1.5rem; }
	.M_notice .tabWrap .list_box ul li a .date { padding: 1rem 1.5rem; }
	.M_notice .btn_more { position: absolute; top: -3.3rem; right: 0; }
	.M_notice .tabWrap .list_box ul li.no_data { height: 21.8rem; }
} 

@media (max-width:768px){
	/* 바로가기1 */
	.M_link1 ul { display: block; }
	.M_link1 ul li + li { margin-top: 1rem; }
	.M_link1 ul li a { border-radius: 0.8rem; padding: 1.2rem; }
	.M_link1 ul li a .img { top: auto; bottom: 1.2rem; }
	.M_link1 ul li a .tit { font-size: 1rem; }
	.M_link1 ul li a .txt { width: calc(100% - 2.5rem); font-size: 0.75rem; }

	/* 바로가기2 */
	.M_link2 ul li a .icon img { height: 2rem; }

	/* 공지사항 */
	.M_notice .tit_wrap .heading { font-size: 1.1rem; }
	.M_notice .tit_wrap p { font-size: 0.75rem; }
	.M_notice .titTab ul li a { font-size: 0.9rem; padding: 0.3rem 0.8rem; }
	.M_notice .titTab ul li a i { display: none; }
	.M_notice .tabWrap .list_box ul li a { padding: 1.2rem; background: #fff; border-radius: 0.8rem; }
	.M_notice .tabWrap .list_box ul li a .txt_box { padding: 0; }
	.M_notice .tabWrap .list_box ul li a .txt_box .tit { font-size: 0.9rem; }
	.M_notice .tabWrap .list_box ul li a .txt_box .txt { margin-top: 0.5rem; }
	.M_notice .tabWrap .list_box ul li a .date { background: none; padding: 0; margin-top: 0.8rem; color: #666; font-size: 0.75rem; }
	.M_notice .tabWrap .list_box ul li a .date span { display: none; }
	.M_notice .tabWrap .list_box ul li a:hover .date,
	.M_notice .tabWrap .list_box ul li a:focus .date { color: #fff; }
	.M_notice .btn_more { width: 1.8rem; height: 1.8rem; top: -2.8rem; }
	.M_notice .tabWrap .list_box ul li.no_data { height: 16.8rem; border-radius: 0.8rem; }
}

@media (max-width:580px){
	.M_link2 ul { gap: 1.5rem 2rem; }

	/* 공지사항 */
	.M_notice .tabWrap .list_box ul li { width: 100%; }
	.M_notice .tabWrap .list_box ul li:nth-child(n + 3) { display: none; }

	.callCta { display: block; }
	.callCta .call strong br {display: none;}
	.callCta em { padding-left: 0; margin-left: 0; }
	.callCta em:before { display: none; }
	
}

@media (max-width:540px){
	/* 메인비주얼 */
	.visual .slider { border-radius: 0.8rem; }
	.visual .control .progressbar { width: 2rem; }

	/* 바로가기2 */
	.M_link2 ul { gap: 2rem; }
	.M_link2 ul li { width: 100%; }
	.M_link2 ul li + li::before { top: -1rem; left: 0; transform: none; width: 100%; height: 1px; }
	.M_link2 ul li a .icon { bottom: 0; transition: 0.3s; }
	.M_link2 ul li a .txt { margin: 0.5rem 0 0; width: calc(100% - 3rem); }
	.M_link2 ul li a .baro { display: none; }
	.M_link2 ul li a:hover .icon,
	.M_link2 ul li a:focus .icon { bottom: 0.2rem; }

}

@media (max-width:480px){
	.callCta { display: inline-block; border-radius: 1rem; width: 100%; }
	.callCta p { font-size: 0.75rem; }
	.callCta p i { display: none; }
	.callCta em { display: block; flex: 100%; padding-left: 0; margin-left: 0; margin-top: 0.3rem; }
	.callCta em::before { display: none; }
}

@media (max-width:340px){
	/* 바로가기 */
	.M_link1 ul li a .img { display: none; }
	.M_link1 ul li a .txt { width: 100%; margin-top: 0.5rem; line-height: 1.1rem; }
}