﻿ 
/*-----------------------------------------------------------
Author :JI, cohi
Creative date :2021. 09. 16
-----------------------------------------------------------*/
/*imgcut*/
div[class*="gallery"] .img { position: relative; }
div[class*="gallery"] .img > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; }
div[class*="gallery"] a { display: block; }

/* 메인비주얼 */
.MVisual3028{position:relative;height:23.5rem;overflow:hidden;border-radius: 0 0 0 3rem;}
.MVisual3028 #m_visual li{overflow:hidden;}
.MVisual3028 #m_visual li img{position:relative; width: 100%; right: 0;}
.MVisual3028 .bx-controls{position:absolute;bottom:1rem;left: 2rem;width:100%;height:1.3rem;text-align:left;}
.MVisual3028 .bx-controls-direction{display:none;}
.MVisual3028 .bx-controls a{display:inline-block; margin:0 3px; color:transparent; overflow:hidden; vertical-align:middle;}
.MVisual3028 .bx-controls-auto{font-size:0; vertical-align:middle;}  
.MVisual3028 .bx-controls-auto,
.MVisual3028 .bx-pager,
.MVisual3028 .bx-pager-item{display:inline-block;}
.MVisual3028 .bx-controls-auto a{width:1.3rem; height:1.3rem; background:no-repeat center / 100%;}
.MVisual3028 .bx-controls-auto a.bx-start{display:none; background-image:url('/00_common/images/con_com/btn_play.png');}
.MVisual3028 .bx-controls-auto a.bx-stop{display:inline-block; background-image:url('/00_common/images/con_com/btn_stop.png');}
.MVisual3028 .bx-pager{height:0.8rem; vertical-align:middle;}
.MVisual3028 .bx-pager-item{height:100%;}
.MVisual3028 .bx-pager a{width:0.8rem; height:100%; vertical-align:top; border:1px solid #4c9bf8; border-radius:50%;} /* 비주얼 버튼 색상 */
.MVisual3028 .bx-pager a.active{background-color:#4c9bf8;}/* 비주얼 버튼 색상 */

/* 팝업존 */
.pop3028{height:100%;color: #fff;padding-top: 1.5rem;}
.pop3028 h2{position:relative;line-height:3.5rem;width:calc(100% - 13rem);font-size:1.1rem;overflow:hidden;white-space:nowrap;}
.pop3028 .nss_pg{position:absolute;right: 1rem;top: 1.35rem;line-height: 3.5rem;}
.pop3028 .nss_pg span{display:inline-block;} 
.pop3028 .nss_pg span em{padding: 0 0.2rem; font-size: 0.9rem; font-weight: 100; text-align: center;}
.pop3028 .nss_pg span .now{font-weight:600; font-size: 1.1rem; color: #ffc63d; position: relative; }
.pop3028 .nss_pg a{display:inline-block;margin:0 0.2rem;width: 1.1rem;height: 1.75rem;line-height: 1.75rem;font-size: 1rem;border-radius: 50%;color: #fff;text-align:center;transition: color 0.3s;-webkit-transition: color 0.3s;} 
.pop3028 .nss_pg a:hover, .pop3028 .nss_pg a:focus{color: #ffc63d;}
.pop3028 .nss_pg .play{display:none;} 
.pop3028 .pop_img{position:relative; z-index: 1; overflow: hidden; height: 225px;  text-align:center;}
.pop3028 .pop_img li a { display: block; height: 11.3rem; }
.pop3028 .pop_img li img{position:absolute; max-width: 100%; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); transform:translate(-50%, -50%); }
/* 팝업리스트 레이어 추가 */
.pop3028 .pop_layer_box{position:absolute; top:0; right:0; display:none; width:100%; height:100%; background:#394b61; z-index: 1;}
.pop3028 .pop_layer_box .pop_layer{position:relative; padding:1rem;}
.pop3028 .pop_layer_box .pop_layer h3{font-size:0.9rem; color:#fff;}
.pop3028 .pop_layer_box .pop_layer ul{margin-top:0.75rem; padding:1rem 2rem; height:12rem; line-height:1.1rem; text-align:left; background:#576c85; overflow-y:auto;}
.pop3028 .pop_layer_box .pop_layer ul li{list-style-type:disc; color:#fff;}
.pop3028 .pop_layer_box .pop_layer ul li a:hover,
.pop3028 .pop_layer_box .pop_layer ul li a:focus{text-decoration:underline;}
.pop3028 .pop_layer_box .pop_layer a.pop_close{position:absolute; top:0.75rem; right:1.25rem; display:block; padding:0.25rem 0.5rem; color:#fff; background:#576c85; border-radius:5px;}


/* 게시판 */
.notice3028{position:relative; height:100%; }
.notice3028::before {width: 100%; height: 1px; background: #555; position: absolute; top: 2.9rem; left: 0; content: '';}
.notice3028 h2{display:inline-block; font-size: 1rem; max-width:calc((100% - 3.5rem) / 3); overflow:hidden; white-space:nowrap; line-height:1;}   
.notice3028 h2 ~ h2{margin-left:0.3rem;}
.notice3028 h2 a{position:relative; display:inline-block; width: 100%; color:#555; padding:0.5rem 0 0.8rem 0; line-height: 2rem; overflow:hidden; transition: color 0.3s; -webkit-transition: color 0.3s;}
.notice3028 h2:first-child a{padding-left: 0;}
.notice3028 h2 a:before{content:'';position:absolute;width: 0;height: 8px;background: #4c9bf8;border-radius: 2rem;position: absolute;bottom: 0.2rem;transition: width 0.3s;-webkit-transition: width 0.3s;content: '';}
.notice3028 .list_box{position:absolute; top:2.3rem; display:none; width:100%; height:calc(100% - 2.3rem); }
.notice3028 .list_box ul{overflow:hidden; margin-top: 1rem;} 
.notice3028 .list_box ul li{width: 28%; margin-right: 5%; float: left;}
.notice3028 .list_box ul > li > a{display: block; position: relative; padding-top: 3rem;}
.notice3028 .list_box ul > li.new h3::before {content:'N';display:inline-block;width:1.25rem;height:1.25rem;line-height:1.25rem;color:#fff;font-size:0.7rem;text-align:center;border-radius:50%;background: #4c9bf8;margin-right:0.2rem;} 
.notice3028 .list_box ul > li > a h3{height: 2.8rem;overflow: hidden;transition: color 0.3s;-webkit-transition: color 0.3s;color: #333;} 
.notice3028 .list_box .date{color: #555;} 
.notice3028 .list_box ul > li > a p{height: 3.6rem; overflow: hidden; color: #555; margin: 0.5rem 0 1.5rem;}
.notice3028 .list_box ul > li > a .date{overflow: hidden; white-space: nowrap; vertical-align: middle;}
.notice3028 .list_box ul > li > a .date i{vertical-align: middle; padding-right: 0.3rem;}
.notice3028 .btn_more{position:absolute;top:-1.9rem;right:0;width: 2rem;height: 2rem;line-height: 2rem;border-radius: 50%;text-align: center;background: #013c6c;box-shadow: 0 0 8px #bbb;}
.notice3028 .btn_more i{line-height: 2rem;color: #fff;font-size:1.2rem;transition:0.3s;-webkit-transition:0.3s;-o-transition:0.3s;-moz-transition:0.3s;}
/* active */
.notice3028 h2 a:hover,
.notice3028 h2 a:focus,
.notice3028 h2 a.current{color: #4c9bf8;}
.notice3028 h2 a.current::before{width: 100%;}
.notice3028 h2 a.current::after{display: block;}
.notice3028 .list_box.on{display:block;}
.notice3028 .list_box ul > li > a:hover h3{color: #4c9bf8;}
.notice3028 .list_box ul > li > a:hover p{text-decoration: underline;}
.notice3028 .btn_more:hover i, .notice3028 .btn_more:focus i{transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}

.notice3028 .list_box .NoData {display:table; width:100%; height:calc(100% - 3em); margin:1.5rem 0; text-align:center; font-size:.75rem; background:#f3f3f3;}
.notice3028 .list_box .NoData span {display:table-cell; vertical-align:middle;}

/* 바로가기01 */
.M_link3028{position:relative; overflow:hidden; background: #fff; padding-top: 1.75rem;}
.M_link3028 ul{display: table; table-layout: fixed; width: 100%;}
.M_link3028 ul li{display: table-cell;}  
.M_link3028 ul li a .ico{display:block; text-align:center;}
.M_link3028 ul li a .ico img{margin-top: 0.5rem; transition: 0.3s; -webkit-transition: 0.3s; width: 65px; height: 65px;}
.M_link3028 ul li a:hover .ico img, .M_link3028 ul li a:focus .ico img{transform: rotateY(180deg); -webkit-transform: rotateY(180deg);}
.M_link3028 ul li a em{display:block;margin-top: 0.5rem;height:2.4rem;font-size:0.85rem;line-height:1.2rem;padding: 0 0.5rem;text-align:center;overflow:hidden;color: #333;} 
.M_link3028 ul li a:hover em, .M_link3028 ul li a:focus em{text-decoration: underline;}

/* 행사일정 */
.pop_schedule3028{position:relative; height:100%;} 
.pop_schedule3028 h2{width:calc(100% - 2rem);margin-bottom: 1rem;font-size:1.1rem;overflow:hidden;white-space:nowrap;line-height:1;color: #333;} 
.pop_schedule3028 .sche_wrap{background: #013c6c;padding: 1rem 1.5rem 1rem 9rem;position: relative;}
.pop_schedule3028 .month{position: absolute; left: 1rem; top: 2rem; text-align: center;}
.pop_schedule3028 .month:before {content:"";display:block;position:absolute;width:2.3rem;height:2.3rem;top: -1.15rem;left: 50%;transform: translateX(-50%);background: #4c9bf8 url('/00_common/images/T3028_main/3028_img_sche.png') no-repeat center;border-radius:50%;}
.pop_schedule3028 .month p{display: block; width:6.75rem; height:6.75rem; background:#eef7ff; padding-top:1.2rem; font-size:1.75rem; color:#013c6c; margin-bottom:0.3rem; border-radius:0 0 0 1.5rem;}
.pop_schedule3028 .month p em{position: absolute;top: 4rem;left:calc(50% - 1rem);width:2rem;font-size: 0.9rem;border-top: 1px dashed #013c6c;line-height: 1.75rem;font-weight: 300;}
.pop_schedule3028 .month a{display: inline-block; font-size: 1.2rem;}
.pop_schedule3028 .month a.prev{padding-right: 0.75rem; position: relative;}
.pop_schedule3028 .month a.prev::before{width: 1px;height: 0.9rem;background: #fff;position: absolute;right: -1px;top: 0.5rem;content: '';}
.pop_schedule3028 .month a.next{padding-left: 0.75rem;}
.pop_schedule3028 .month a i{transition: 0.3s;-webkit-transition: 0.3s;color: #fff;}
.lst_schedule{width:100%; height:11rem; overflow-y:auto;}
.lst_schedule > li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color: #fff;}
.lst_schedule > li + li{border-top: 1px dotted #fff;}
.lst_schedule > li a{line-height: 2.75rem;}
.lst_schedule > li .date{display:inline-block;margin-right:8px;width:2rem;height:2rem;line-height:2rem;text-align:center;border-radius:50%;background: #497498;font-weight:400;transition: background 0.3s;-webkit-transition: background 0.3s;}
.lst_schedule > .no_Data{line-height:6rem; text-align:center;}
.pop_schedule3028 .btn_more{position: absolute; top: 0; right: 0;}
.pop_schedule3028 .btn_more i{color: #21325c; font-size: 1.2rem; transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s;}
/* active */
.pop_schedule3028 .month a:hover i,
.pop_schedule3028 .month a:focus i{color: #4c9bf8;}
.lst_schedule > li a:hover,
.lst_schedule > li a:focus{text-decoration:underline;} 
.lst_schedule > li a:hover .date,
.lst_schedule > li a:focus .date{background: #4c9bf8;}
.pop_schedule3028 .btn_more:hover i, .btn_more:focus i{transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}


/* 포토앨범 */
.gallery3028{position:relative; height:100%;}
.gallery3028 h2{width:calc(100% - 2rem);margin-bottom: 1rem;font-size:1.1rem;overflow:hidden;white-space:nowrap;line-height:1;color: #333;} 
.gallery3028 h2 span{font-size: 0.8rem; padding-left: 0.5rem;} 
.gallery3028 .gall_list li{display:block; width:47%; float:left; position: relative;; margin-left: 6%;}
.gallery3028 .gall_list li:first-child{margin-left: 0;}
.gallery3028 .gall_list li .img{position:relative; width:100%; height:13rem; overflow:hidden; background:#eee;}
.gallery3028 .gall_list li .img img{position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); transform:translate(-50%, -50%); -webkit-transition:transform 0.3s; -ms-transition:transform 0.3s; -moz-transition:transform 0.3s; transition:transform 0.3s;}
.gallery3028 .gall_list li .txt{position: absolute;width: 90%;bottom: 0;right: 0;overflow:hidden;white-space:nowrap;background: #fff;padding: 0.5rem 1rem;border-radius: 1.5rem 0 0;}
.gallery3028 .gall_list li .txt p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9rem; }
.gallery3028 .gall_list li .txt .date{vertical-align: middle; color: #555; font-size: 0.75rem;}
.gallery3028 .gall_list li .txt .date i{vertical-align: middle; vertical-align: middle; padding-right: 0.3rem;}
.gallery3028 .btn_more{position: absolute; top: 0; right: 0;}
.gallery3028 .btn_more i{color: #21325c; font-size: 1.2rem; transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: 0.3s;}
/* active */
.gallery3028 .gall_list li:hover .img img,
.gallery3028 .gall_list li:focus .img img{transform:translate(-50%, -50%) scale(1.2); -webkit-transform:translate(-50%, -50%) scale(1.2); -ms-transform:translate(-50%, -50%) scale(1.2); -moz-transform:translate(-50%, -50%) scale(1.2);}
.gallery3028 .gall_list li:hover .txt p,
.gallery3028 .gall_list li:focus .txt p{text-decoration: underline;}
.gallery3028 .btn_more:hover i, .btn_more:focus i{transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}

.gallery3028 .NoData {display:table; width:100%; height:13rem; text-align:center; font-size:.75rem; background:#f3f3f3;}
.gallery3028 .NoData span {display:table-cell; vertical-align:middle;}

/* 오늘의식단 */
.meal_menu3028{position:relative; height:100%;}
.meal_menu3028::after{display: block; content: ''; clear: both;}
.meal_menu3028 h2{width:13rem; float:left; background:#4c9bf8; text-align:center; height:4.5rem; line-height:4.5rem; color:#fff; font-size:1.1rem; overflow:hidden; white-space:nowrap;border-radius: 0 1.5rem 0 0;}
.meal_menu3028 h2:before {content:"";display:block;position:absolute;width:3rem;height:100%;background:#f4f5f7;left: 10rem;z-index: -1;}
.meal_menu3028 h2 .imgBox{display: inline-block; padding-right: 0.5rem;}
.meal_menu3028 .imgBox img{vertical-align: middle; max-width: 100%;}
.meal_menu3028 .meal_wrap{width:calc(100% - 13rem);height: 4.5rem;float: left;background: #f4f5f7;border-radius: 0 1.5rem 0 0;}
.meal_menu3028 ul{ height:3.5rem; overflow-y:auto; padding-top: 1rem; padding:1rem 1rem 0 2rem}
.meal_menu3028 ul li + li{margin-top:1rem;}
.meal_menu3028 ul li.no_Data{text-align:center; line-height:2.5rem;}
.meal_menu3028 dl::after{display: block; content: ''; clear: both;}
.meal_menu3028 dl dt.kcal{color: #4c9bf8;position: relative;font-weight: 500;font-size: 0.9rem;text-align: center;width: 7.5rem;float: left;margin-top: 0.5rem;} 
.meal_menu3028 dl dd.meal_list{width: calc(100% - 8rem);float: right;}
.meal_menu3028 .btn_more{position:absolute;width: 2rem;height: 2rem;line-height: 2rem;text-align: center;background: #013c6c;border-radius: 50%;right: auto;left: 12rem;top: 1.25rem;box-shadow: 0 0 10px #bbb;}
.meal_menu3028 .btn_more i{line-height:2rem;color: #fff;font-size:1.2rem;transition:0.3s;-webkit-transition:0.3s;-o-transition:0.3s;-moz-transition:0.3s;}
.meal_menu3028 .btn_more:hover i, .meal_menu3028 .btn_more:focus i{transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}




/* 배너존 */
.banner_zone {line-height: 1; border-top: 1px solid #d1d8e4;}
.banner_zone .container {position: relative; height: 4rem; overflow: hidden;}
.banner_zone h2 {float: left; display:block; margin-top: 1.5rem; width: 4rem; font-size: 0.85rem; font-weight: 400; color: #191919;}
.banner_zone .btn {float: left; margin-top: 1.35rem; overflow: hidden;}
.banner_zone .btn a {float: left; width: 27px; height: 28px; color: transparent; background: no-repeat center / 100%; overflow: hidden;}
.banner_zone .btn a.prev {background-image: url('/00_common/images/common/btn_b_prev.png');}
.banner_zone .btn a.stop {background-image: url('/00_common/images/common/btn_b_stop.png');}
.banner_zone .btn a.play {display:none; background-image: url('/00_common/images/common/btn_b_play.png');}
.banner_zone .btn a.next {background-image: url('/00_common/images/common/btn_b_next.png');}
.banner_zone .btn a.list {background-image: url('/00_common/images/common/btn_b_list.png');}
.banner_zone .bx-wrapper {float: left; display:block; padding-top: 0.75rem; padding-left:1.5rem; width: calc(100% - 10rem); overflow: hidden;}
.banner_zone ul li { display: inline-block; margin-bottom: 0.75rem; padding: 0 0.25rem; width: 20%;}
.banner_zone ul li a {display: block; height: 2.5rem; line-height: 2.3rem; text-align: center; border: 1px solid #c8d1db; overflow: hidden;}
.banner_zone ul li a img {width: 100%; height: 100%; }
 
@media (max-width:1920px){
	.MVisual3028 #m_visual li img{width: auto; height: 100%;}
}

@media (max-width:1240px){
	/* 메인비주얼 */
	.MVisual3028{height: auto;}
	.MVisual3028 #m_visual li img{width: 130%; height: auto;}

	/* 팝업존 */
	.pop3028 .pop_layer_box{width: calc(100% + 1rem);}
	.pop3028 .pop_layer_box .pop_layer ul{height: 12.6rem;}

	/* 공지사항 */
	.notice3028 .list_box ul li{width: 32%; margin-right: 0; margin-left: 2%;}
	.notice3028 .list_box ul li:first-child{margin-left: 0;}

	/* 포토갤러리 */
	.gallery3028 .gall_list li{width: 100%;}
	.gallery3028 .gall_list li + li{display: none;}
}
@media (max-width:1024px){
	h2{font-size:1rem;}

	/* 공지사항 */
	.notice3028 .list_box ul li{width: 49%;}
	.notice3028 .list_box ul li + li + li {display: none;}

	/* 배너존 */
	.banner_zone h2 {position: absolute; top: 0; left: 0; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; clip: rect(0, 0, 0, 0); overflow: hidden;}
	.banner_zone .btn {position: absolute; top: 50%; left: 0; margin-top: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
	.banner_zone .bx-wrapper {margin-left: 6rem; width: calc(100% - 6rem);}
}
@media (max-width:800px){  

	/* 바로가기 */
	.M_link3028{padding-top: 1rem;}
	.M_link3028 ul{display: block;}
	.M_link3028 ul::after{display: block; content: ''; clear: both;}
	.M_link3028 ul li{display: block; width: 25%; float: left;}

	/* 포토갤러리 */
	.gallery3028 .gall_list li{width: 49%; margin-left: 2%;}
	.gallery3028 .gall_list li + li + li {display: block;}
}

@media (max-width:600px){
	/* 바로가기 */
	.M_link3028 ul li a .ico img{width: 55px; height: auto;}	 

	/* 오늘의식단 */
	.meal_menu3028 h2{width: 100%; height: 3.5rem; line-height: 3.5rem;}
	.meal_menu3028 .meal_wrap{width: 100%;padding:1.75rem 1rem 1rem;height: auto;border-radius: 0;}
	.meal_menu3028 .btn_more{left: calc(50% - 1rem); top: 2.8rem; }
	.meal_menu3028 ul{padding: 0; height: 2.6rem;}
}  
@media (max-width:480px){
	/* 공지사항 */
	.notice3028 h2{font-size: 0.9rem;}
	.notice3028 .list_box ul > li{width: 100%; margin: 0;}
	.notice3028 .list_box ul > li > a{padding-top: 2.3rem;}
	.notice3028 .list_box ul > li.new a::before{top: 0.5rem;}
	.notice3028 .list_box ul > li > a h3{white-space: nowrap; text-overflow: ellipsis; height: auto;}
	.notice3028 .list_box ul > li > a p{height: 2.4rem;}
	
	/* 포토갤러리 */
	.gallery3028 .gall_list li{width: 100%;}
	.gallery3028 .gall_list li + li + li {display: none;}
}
@media (max-width:380px){ 
	/* 팝업존 */
	.pop3028 .nss_pg{right: 0;}
	.pop3028 .nss_pg a{width: 1.5rem; height: 1.5rem; line-height: 1.5rem;}
	.pop3028 h2{width: calc(100% - 11rem);}

	/* 바로가기 */
	.M_link3028 ul li{width: 33%;}
	.M_link3028 ul li a .ico img{width: 50px;}

	/* 행사일정 */
	.pop_schedule3028 .sche_wrap{padding: 2rem 1rem 1rem;}
	.pop_schedule3028 .month{position: relative; top: auto; left: auto;}
	.pop_schedule3028 .month p{margin: 0 auto;}

	/* 오늘의식단 */
	.meal_menu3028 h2{height: 3rem; line-height: 3rem;}
	.meal_menu3028 h2 .imgBox{display: none;}
	.meal_menu3028 dl dt.kcal{width: 100%;}
	.meal_menu3028 dl dd.meal_list{width: 100%;}
	.meal_menu3028 .btn_more{top: 2.5rem;}
	.meal_menu3028 ul{height: 3.9rem;}
}

