@charset "utf-8";
/*-----------------------------------------------------------
Author : Juyeon Jang
Create date : 2022. 11. 23
-----------------------------------------------------------*/
/* common */
h2 { position:relative; font-size:18px; font-weight:700; color:#000; margin-bottom:18px; overflow:hidden; white-space:nowrap; margin-right:2rem; }
.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; height:100%; z-index:1;}
#m_visual div{ width:100%; height:100%; border-radius:0 100px 0 0; overflow: hidden;}
.main_visual img{ position:relative; width:790px; height:auto; left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.main_visual .control{ position:absolute; right:335px; bottom:430px; }
.main_visual .control > a{ display:inline-block; width:35px; height:35px; line-height:35px; text-align:center; color:#000; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.main_visual .control > a.play{ display:none;}
.main_visual .control .page { display:inline-block; vertical-align:middle; margin-left:20px; letter-spacing:2px; font-size: 16px; font-weight: 400; color:#444; }
.main_visual .control .page strong { position:relative; font-weight:800; color:#22964d; margin-right: 30px;}
.main_visual .control .page strong::before { position: absolute; right:-15px; top:calc(50% - 3px); width: 6px; height: 6px; background: #999; border-radius: 50%; content:'';}

/* 바로가기 */
.m_link{ position:relative; display: flex; width:100%; flex-wrap: wrap;}
.m_link ul{ display:flex; width:100%; flex-wrap: wrap; justify-content: space-between;}
.m_link li{ width:31%; margin:10px 0;}
.m_link li:nth-child(1) {margin-left: 69%;}
.m_link li:nth-child(2) {margin-left: 34.5%;}
.m_link li a{ position: relative; display:block; align-items: center; background: #fff; font-weight: 600; border:4px solid transparent; border-radius:10px; overflow: hidden; box-shadow:0 0 10px rgba(0,0,0,0.2); z-index: 0; transition: all .15s; -webkit-transition: all .15s; -ms-transition: all .15s; }
.m_link li a::before { position: absolute; top:155px; left:185px; width:170px; height:170px; background: #f4f8e9; border-radius: 50%; z-index: -1; content: ''; transition: all .15s; -webkit-transition: all .15s; -ms-transition: all .15s; }
.m_link li a div { display:block; padding:24px 10px 21px; text-align: center;}
.m_link li a span { position: relative; text-align: center; transition: all .15s; -webkit-transition: all .15s; -ms-transition: all .15s; }
.m_link li a .img{ display: block; }
.m_link li a .txt{ display: inline-block; font-size: 18px; color:#000; overflow:hidden; margin: 20px auto 0; padding: 0 5px 4px; word-break: keep-all;}
.m_link li a .txt::before { position: absolute; bottom:0; left:50%; width: 100%; height: 13px; background: #daebdb; border-radius: 7px; opacity: 0; z-index: -1; content: ''; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: all .15s; -webkit-transition: all .15s; -ms-transition: all .15s; }
.m_link li a:hover,
.m_link li a:focus{ color:#0e6e27; font-weight:700; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #015710, #638c00); background-origin: border-box; background-clip: content-box, border-box;}
.m_link li a:hover::before,
.m_link li a:focus::before { top:47px; left:75px; }
.m_link li a:hover .txt::before,
.m_link li a:focus .txt::before { opacity: 1; }

/* 홍보동영상 */
.box_movie{ position:relative; height:100%; border-radius:10px; padding:20px; overflow:hidden; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.box_movie .movie {background: #a5a5a5;}
.box_movie .movie a {position: relative; display:flex; height:100%; align-items: center; justify-content: center;}
.box_movie .movie a::before {position:absolute; left:50%; top:50%; width: 68px; height:68px; background-image: url('/images/org/web/gnchild/main/movie_play.png'); background-repeat: no-repeat; z-index: 1; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); content: '';  transition: all .15s; -webkit-transition: all .15s; -ms-transition: all .15s;}
.box_movie .movie a img {height:100%; width:auto; max-width:100%; }
.box_movie .movie a:focus::before,
.box_movie .movie a:hover::before {background-image: url('/images/org/web/gnchild/main/movie_play_over.png');}

/* 팝업존 */
.box_popup{ position:relative; height:100%; border-radius:10px; padding:20px; overflow:hidden; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2); }
.box_popup .pop,
.box_popup .pop div{ height:auto;}
.box_popup .pop { background: #eee;}
.box_popup .pop a{ position:relative; display:flex; height:100%; align-items: center; justify-content: center;}
.box_popup .pop img{ max-height:100%; max-width:100%; }
.box_popup .control{ position:absolute; right:20px; top:20px; display:flex; align-items:center;}
.box_popup .control > a{ display:inline-block; font-size:24px; color:#000; line-height:0; width:22px; height:15px; margin:0 3px;}
.box_popup .control > a.stop, .box_popup .control > a.play { color:#21954e; }

/* 배너존 */
.bannerZone{ position:relative; color:#333; background:#f1f1f1; border-top:1px solid #ddd;}
.bannerZone .container{ display:flex; align-items:center; }
.bannerZone h2{ font-size:15px; font-weight:600;}
.bannerZone .control{ margin:0 10px;}
.bannerZone .control > a{ display:inline-block; width:29px; height:29px; background-repeat: no-repeat; background-position: center; background-size:cover; font-size:0; line-height:0; vertical-align:top;}
.bannerZone .control > a.prev{ background-image: url('/images/org/web/gnchild/common/ico_bn_prev.png');}
.bannerZone .control > a.next{ background-image: url('/images/org/web/gnchild/common/ico_bn_next.png');}
.bannerZone .control > a.play{ background-image: url('/images/org/web/gnchild/common/ico_bn_play.png');}
.bannerZone .control > a.stop{ background-image: url('/images/org/web/gnchild/common/ico_bn_stop.png');}
.bannerZone .control > a.list{ background-image: url('/images/org/web/gnchild/common/ico_bn_list.png');}
.bannerZone .obj { display:flex; flex:1; overflow:hidden;}
.bannerZone .obj li { display:flex; flex:1; align-items:center; height:50px; padding:0 10px; word-break: keep-all; font-size:13px;}
.bannerZone .obj li a{ display:block; width:100%; text-align:center; }
.bannerZone .obj li a:hover{text-decoration: underline;}

/* responsive */
@media (min-width:2400px){
	.main_visual img{ width:1088px; }
	.main_visual .control{ right:49.5%; }
}

@media (min-width:2100px) and (max-width:2399px){
	.main_visual img{ width:960px; }
	.main_visual .control{ right:47%; }
}

@media (min-width:2100px) {
	.main_visual .control{ bottom:72%; }
}

@media (max-width:1880px){
	.box_movie .movie { height:auto; }
}

@media (max-width:1240px){
	/* 메인비주얼 */
	.main_visual img{ width:85%; height:auto; left:5%; transform: none; -webkit-transform: none;}
	.main_visual .control { width:100%; text-align: center; border-radius: 0 0 10px 10px; padding:10px 0; background: rgba(0, 0, 0, 0.4); bottom: 0; right:50%;  transform: translateX(50%); -webkit-transform: translateX(50%); }
	.main_visual .control .page { color:#fff; }
	.main_visual .control .page strong { color:#b2ff58; }

	/* 바로가기 */
	.m_link ul{ flex-wrap: no-wrap; justify-content: space-between;}
	.m_link li{ width:15.3%; margin:0;}
	.m_link li:nth-child(1) {margin-left: 0;}
	.m_link li:nth-child(2) {margin-left: 0;}

	/* 팝업존 */
	.box_popup{ border-radius:20px; overflow:hidden;}

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

}

@media (min-width:961px) and (max-width:1060px){
	/* 바로가기 */
	.m_link li a div { padding:15px 10px 10px; }
	.m_link li a .txt{ margin: 10px auto 0; padding: 0 5px; height:45px; line-height: 1.3; }
}

@media (max-width:1024px){

}
@media (max-width:960px){
	/* 바로가기 */
	.m_link li{ width:calc(33.33% - 10px); margin-top: 15px;}
	.m_link li:nth-child(-n+3){ margin-top: 0;}

}

@media (max-width:768px){

}

@media (max-width:650px){
	.box_movie .movie { height:auto; }
}

@media (max-width:580px){

	/* 메인 비주얼 */
	#m_visual div{ border-radius:0 30px 0 0;}
	.main_visual:before{ display:none;}
	.main_visual .control { padding:7px 0; }
	.main_visual .control > a{ width:30px; height:30px; line-height:30px;}

	/* 바로가기 */
	.m_link li{ width:calc(50% - 10px);}
	.m_link li:nth-child(3){ margin-top:15px; }
	.m_link li a .txt { font-size:16px;}
}

@media (max-width:480px){
	/* 메인 비주얼 */
	.main_visual img { width:100%; left:-5%; }

	/* 바로가기 */
	.m_link li a div { padding:15px 5px 12px; }
}

@media (max-width:380px){
		/* 바로가기 */
		.m_link li { width:calc(50% - 6px); margin-top:12px !important;}
		.m_link li:nth-child(-n+2) { margin-top:0 !important;}
		.m_link li a .txt { letter-spacing: -1px;}
}

@media (max-width:320px){
		/* 바로가기 */
		.m_link li{ width:100%; }
		.m_link li:nth-child(2) { margin-top:12px !important;}
}