@charset "utf-8";
/*-----------------------------------------------------------
Author : Juyeon Jang
Create date : 2022. 11. 23
-----------------------------------------------------------*/
/* common */
h2 { position:relative; font-size:22px; font-weight:700; margin-top: -2px; color:#222; margin-bottom:20px; overflow:hidden; white-space:nowrap; letter-spacing: -1px;}
.btn_more { position:absolute; display:block; right:20px; top: 18px; width:1.7rem; height:1.7rem; font-size: 24px; line-height:1.7rem; text-align:center; color:#000;}

/* 메인비주얼 */
.main_visual{position:relative; z-index:1;}
.visual_slogan {height: 160px; font-size: 26px; color: #444; letter-spacing: -2px;}
.visual_slogan strong {font-size: 36px; font-weight: 800; line-height: 1.3;}
.visual_slogan .color1 {color: #006ad7;}
.visual_slogan .color2 {color: #538136; position:relative;}
.visual_slogan .color2::before {content: ''; position: absolute; top:-17px; right:-22px; width:44px; height:44px; border-radius: 50%; background: #fff6e5; z-index: -1;}
.visual_slogan span {display: block; margin-top: 18px;}
#m_visual {position: relative;}
#m_visual::before {content: ''; position: absolute; left:-10px; bottom:-10px; width:100%; height: 100%; border-radius:50px 50px 50px 0; background: #ddf1d6; z-index: -1;}
#m_visual div{width:100%; height:100%; border-radius:50px 50px 50px 0; overflow: hidden; isolation: isolate;}
.main_visual img{ position:relative; width:100%; height:auto; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.main_visual .control{ position:absolute; top:105px; right:45px; display: flex; align-items: center;}
.main_visual .control > a{ display:inline-block; width:25px; height:30px; line-height:30px; font-size: 26px; text-align:center; color:#000; }
.main_visual .control > a.play,
.main_visual .control > a.stop {font-size: 20px;}
.main_visual .control > a.play{ display:none;}
.main_visual .control .page { display:inline-block; vertical-align:middle; margin-right:5px; letter-spacing:2px; font-size: 16px; font-weight: 400; color:#444; }
.main_visual .control .page strong { position:relative; font-weight:700; color:#22964c; margin-right: 30px;}
.main_visual .control .page strong::before { position: absolute; right:-17px; top:calc(50% - 3px); width: 6px; height: 6px; background: #999; border-radius: 50%; content:'';}

/* 공지사항 */ 
.notice ul {background: #f5f5f5; border-radius: 20px; padding: 24px 25px;}
.notice ul li a { position: relative; display: flex; height: 36px; align-items: center; padding-left: 16px;}
.notice ul li a::before {content: ''; position: absolute; left:2px; top:calc(50% - 3px); width:5px; height:5px; border-radius: 50%; background: #fe9d01;}
.notice ul li a p { flex:1; font-size: 16px; color: #222; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-right: 50px;} /* 240125 수정*/
.notice ul li a span { font-size: 16px; color: #666; }
.notice .btn_more {position:absolute; display:block; right:0; top: 0; width:auto; height:33px; font-size: 16px; line-height:33px; color:#000022;}
.notice .btn_more::before {content: ''; mix-blend-mode: difference; position: absolute; top:4px; left:-6px; width: 28px; height: 28px; border-radius: 8px; background: #01b839; transform: rotate(45deg); z-index: -1;}
.notice .btn_more em {color: #fff;}
.notice .btn_more i {font-size: 18px; vertical-align: middle; margin-left:5px; transition: all 0.15s;}
/* 공지사항:active */ 
.notice ul li a:hover p,
.notice ul li a:focus p { font-weight: 600; text-decoration: underline;}
.notice .btn_more:hover i,
.notice .btn_more:focus i {transform: translateX(5px);}

/* 행사일정 */
.schedule {position:relative; height:100%; padding:0 0 20px 20px;}
.schedule::before {content: ''; position: absolute; left:0; right:-20px; bottom:0; width:auto; height: 170%; background: #ffefdd; border-radius: 0 0 20px 20px; z-index: -1;}
.schedule h2 {margin-bottom: 15px;}
.schedule .tit_wrap {display: flex; justify-content: space-between; align-items: start;}
.schedule .month {display: flex; align-items: center; justify-content: space-between; width: fit-content; color: #222;}
.schedule .month p {font-size: 18px; font-weight: 600; margin: 0 15px; letter-spacing: -1px;}
/* .schedule .month a {font-size:24px;} */
.schedule .inner {position:relative; display: flex; flex-direction: column; border-radius:14px 14px 30px 30px; background: #fff; box-shadow: 2px 2px 10px rgba(255,151,40,0.2);}
.schedule .inner::before {content:''; position: absolute; top:0; left:0; width: 100%; height: 40px; border-radius: 14px 14px 0 0; background: #fabd00;}
.schedule .sche_table {width: 85%; margin: 0 auto; overflow: hidden; z-index:1;}
.schedule .sche_table table thead th {line-height: 38px; font-size: 14px; color: #111; font-weight: 700; padding-bottom: 7px;}
.schedule .sche_table table .sun {color: #d81e1d;}
.schedule .sche_table table .sat {color: #0967cc;}
.schedule .sche_table table tbody {height:140px;}
.schedule .sche_table table tbody td {text-align:center;}
.schedule .sche_table table tbody td span,
.schedule .sche_table table tbody td a {display: inline-block; width: 22px; line-height: 22px; font-size:14px; border-radius: 50%; color: #222; font-weight: 600; text-align: center;}
.schedule .sche_table table tbody td .event {background: #ffe6b3;}
.schedule .sche_table table tbody td .today {box-shadow: inset 0 0 0 2px #59ba35;}
.schedule .lst {display: flex; flex-direction: column; justify-content:center; margin:5px 20px 7px; padding-top: 10px; position: relative; border-top: 1px solid #dadada;}
.schedule .lst ul {height: 40px; overflow-y: auto; padding-right:0.25rem; z-index:1;}
.schedule .lst ul li ~ li {margin-top: 6px;}
.schedule .lst ul li a {display: block; font-size:14px; color: #666; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.schedule .lst ul li a::before {content: "\e92b"; font-family: 'xeicon'; font-size: 12px; color:#ff9728; margin: 0 5px 0 10px; vertical-align: bottom;}
.schedule .lst ul li a span {display: inline-block; font-weight: 600; color: #222; margin-right:5px}
.schedule .lst ul li.no_data {display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.schedule .lst .btn_more {top: 0.5rem;}
/* 행사일정 : active */
.schedule .lst .month a {transition: 0.15s;}
.schedule .sche_table table tbody td a:hover,
.schedule .sche_table table tbody td a:focus {text-decoration: underline;}
.schedule .month a:hover,
.schedule .month a:focus {color: #fabd00;}
.schedule .lst ul li a:hover,
.schedule .lst ul li a:focus {color: #ff9728;}

/* 갤러리 */
.gallery { position:relative;}
.gallery h2 {text-align: center; margin-bottom: 24px;}
.gallery .thum,
.gallery .movie {position:relative; display: block; width:100%; height:170px; border-radius: 20px; overflow: hidden;}
.gallery .thum::before {content:''; position: absolute; left: 0; top:0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 19px; border: 2px solid #fabd00; z-index: 2; opacity: 0; transition: all 0.2s;}
.gallery .thum .img {width: 100%; height: 100%; background: #eee;}
.gallery .thum .img::before,
.gallery .thum .img::after {position: absolute; bottom:37px; right:50px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; opacity: 0; transition: all 0.2s;}
.gallery .thum .img::before {content:'\e907'; font-family: 'xeicon'; font-size: 18px; color: #fff; z-index: 4;}
.gallery .thum .img::after {content:''; border-radius: 8px; background: #01b839; transform: rotate(45deg); z-index: 3;}
.gallery .thum .img img {width: 100%; height:100%; object-fit: cover;}
.gallery .thum span {position: absolute; left:0; bottom:0; display: block; line-height: 50px; width:87%; padding:0 17px; border-radius: 0 20px; background: rgba(0,0,0,0.5); font-size: 17px; color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; letter-spacing: -1px;}
.gallery .thum:hover::before,
.gallery .thum:focus::before {opacity: 1;} 
/* 갤러리 : active */
.gallery .thum:hover .img::before,
.gallery .thum:focus .img::before,
.gallery .thum:hover .img::after,
.gallery .thum:focus .img::after {right:40px; opacity: 1;}

/* 홍보동영상 */
.gallery .movie {background: #f5f5f5;}
.gallery .movie a {position: relative; display:flex; height:100%; align-items: center; justify-content: center;}
.gallery .movie a::before {content:''; position: absolute; left: 0; top:0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55);}
.gallery .movie a::after {position:absolute; left:50%; top:50%; width: 50px; height:50px; background-image: url('/images/org/web/gnmatbom/main/movie_play.png'); background-repeat: no-repeat; background-size: contain; z-index: 1; transform: translate(-50%, -50%); content: '';  transition: all 0.15s;}
.gallery .movie a img {height:auto; width:auto; max-width:85%; }
/* 홍보동영상 : active */
.gallery .movie a:focus::after,
.gallery .movie a:hover::after {background-image: url('/images/org/web/gnmatbom/main/movie_play_over.png');}

/* 팝업존 */
.popup{ position:relative;}
.popup .pop,
.popup .pop div{ height:auto;}
.popup .pop { background: #eee; width:100%; height:170px; border-radius: 20px; overflow: hidden; isolation: isolate;}
.popup .pop a{ position:relative; display:flex; height:100%; align-items: center; justify-content: center;}
.popup .pop img{ height:180px; width:100%; }
.popup .control{ position:absolute; right:0; top:5px; display:flex; align-items:center;}
.popup .control > a{ display:inline-block; font-size:24px; color:#000; line-height:0; width:22px; height:15px; margin:0 3px;}
.popup .control > a.stop, .popup .control > a.play { color:#21954e; }
/* 팝업존 : active */
.popup .control > a:hover,
.popup .control > a:focus {color:#f1a400;}

/* responsive */
@media (max-width:1540px){
	h2 { margin-bottom:15px;}

	/* 행사일정 */
	.schedule {display:flex; justify-content: space-between; padding:20px; border-radius: 20px; background: #ffefdd;}
	.schedule::before {display: none;}
	.schedule .month p {margin: 0 5px;}
	.schedule .tit_wrap {flex-direction: column; justify-content: start;}
	.schedule .inner {flex-direction: row; width: calc(100% - 140px); border-radius: 14px;}
	.schedule .inner::before {width:50%; border-radius: 14px 0 0;}
	.schedule .sche_table {width:50%; padding:0 10px;}
	.schedule .lst {width:50%; margin:0; border-top: none; border-left: 1px solid #dadada; padding:0 20px 0 10px;}
	.schedule .lst ul {height:135px;}

	/* 갤러리 */
	.gallery h2 {margin-bottom: 15px;}
}

@media (max-width:1240px){
	/* 메인비주얼 */
	.visual_slogan {height: auto; margin-bottom: 40px;}
	.main_visual .control {top:70px;}

	/* 공지사항 */ 
	.notice ul li a p {margin-right:20px;}

	/* 행사일정 */
	.schedule {flex-direction: column; justify-content: start;}
	.schedule .tit_wrap {flex-direction: row; justify-content: space-between;}
	.schedule .inner {width:100%; height: 100%;}
	.schedule .sche_table {padding:0;}
	.schedule .sche_table table tbody td span, 
	.schedule .sche_table table tbody td a {width:26px; line-height:26px;}

	/* 배너존 */
	.bannerZone .obj li{ width:25%;}
	.bannerZone .obj li:nth-child(n+5){ display:none;}

}

@media (max-width:1024px){
	h2 { font-size: 20px; margin-bottom: 10px; }

	/* 메인비주얼 */
	.visual_slogan {font-size: 18px; margin-bottom: 20px;}
	.visual_slogan strong {font-size:30px;}
	.visual_slogan span {margin-top:10px;}
	.main_visual .control {top:45px; right:0;}

	/* 공지사항 */ 
	.notice .btn_more {top:-8px;}

	/* 팝업존 */
	.popup h2 {margin-bottom: 15px;}
}
@media (max-width:960px){

}

@media (max-width:768px){

}

@media (max-width:580px){

	/* 행사일정 */
	.schedule .inner {flex-direction: column;}
	.schedule .inner::before {width:100%; border-radius: 14px 14px 0 0;}
	.schedule .sche_table {width:100%; padding:0 10px;}
	.schedule .lst {width:auto; margin:10px 20px 15px; border-top: 1px solid #dadada; border-left: none; padding:10px 0 0;}
	.schedule .lst ul {height:40px;}
}

@media (max-width:480px){

	/* 메인비주얼 */
	.visual_slogan {font-size: 18px; margin-bottom:40px;}
	.visual_slogan strong {font-size:25px;}
	.visual_slogan span {margin-top:7px;}
	.main_visual .control {top:65px;}

	/* 공지사항 */ 
	.notice ul {padding:10px 20px;}
	.notice ul li a {height: 32px;}
	.notice ul li a p {font-size: 15px; margin-right: 10px;}
	.notice ul li a span {font-size: 15px;}

	/* 갤러리 */
	.gallery .thum, .gallery .movie {height:200px;}

	/* 팝업존 */
	.popup .pop {height: auto;}
	.popup .pop img {width:100%; height:auto;}
}

@media (max-width:380px){
	/* 메인비주얼 */
	#m_visual div {border-radius:  30px 30px 30px 0;}
	.visual_slogan {font-size: 16px;}
	.visual_slogan strong {font-size:22px;}
	.main_visual .control {top:58px;}

	/* 공지사항 */ 
	.notice ul li a p {margin-right: 0;}
	.notice ul li a span {display: none;}
}

@media (max-width:340px){
	.visual_slogan strong {display: block;}
	.main_visual .control {top:85px;}

	.schedule {padding: 15px;}
	.schedule h2 {margin-bottom: 0;}
	.schedule .tit_wrap {flex-direction: column;}
	.schedule .month {margin-left: auto; margin-bottom: 10px;}
	.schedule .sche_table {padding:0;}
	.schedule .sche_table table tbody td span, 
	.schedule .sche_table table tbody td a {width:22px; line-height:22px;}
	.schedule .lst {margin:5px 10px 15px;}
}