@charset "utf-8"; 


div[class^="I04"]{box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; ; }

/* container */
#container {position:relative; width:100%; padding-top:155px; overflow:hidden; z-index:0;}
#container:after {display:block; content:""; clear:both; }

/* ------------------------------------------------------------ */
/* ------------------ * 부속기관 F-06 Style * ------------------ */
/* ------------------------------------------------------------ */

h2{position: relative; display: inline-block; font-size: 36px; font-family: 'NotoM'; font-weight: 600; text-align: center; color: #111;}
.btn_more{position: absolute; top: 24px; right: 0;}
.btn_more::before{position:absolute; top: 50%; right: 0; width: 35px; height: 35px; border: 1px solid #dedede; border-radius: 50%; content: ""; transform: translateY(-50%); z-index: 0;}
.btn_more img{position: relative; margin-right: 20px; z-index: 1; -webkit-transition:transform .3s; transition:transform .3s; }
.btn_more:hover img,
.btn_more:focus img{-webkit-transform:translateX(4px); transform:translateX(4px); }

/* 메인비주얼 */
.I05_m_visual {position:relative; box-sizing: border-box; }
.I05_m_visual:before{position:absolute; left:0; bottom: -630px; width: calc(50% - 620px); height:1px; background:#fff; content:""; z-index: 1; }
.I05_m_visual::after{position:absolute; left:0; bottom: -630px; width: calc(100% - 845px); height:1px; background:rgba(255,255,255,0.3); content:""; z-index: 1; }
.I05_m_visual h2{position:absolute; width:1px; height:1px; top:-999999em; left:-999999em; }  
.I05_m_visual .visual{position:relative; width: calc(100% - 501px); height:100%; float: left;}
.I05_m_visual .visual .slide{position: relative;}
.I05_m_visual .visual .slide .img {position: relative; overflow: hidden; height: 730px;}
.I05_m_visual .visual .slide .img img{position: relative; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.I05_m_visual .visual .slide .slogan{position: absolute; bottom: 175px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); color: #fff; margin-left: -200px; word-break: keep-all; font-weight: 100; }
.I05_m_visual .visual .slide .slogan .txt1{position: relative; display: inline-block; font-size: 30px; letter-spacing: 2px; font-family: 'NotoL';}
.I05_m_visual .visual .slide .slogan .txt2{font-size: 65px; font-family: 'NotoL'; font-weight: 100; text-shadow: 3px 0 7px rgba(0,0,0,0.33); letter-spacing: 3px; line-height: 1;}
.I05_m_visual .visual .slide .slogan .txt2 strong{font-family: 'NotoB'; }
.I05_m_visual .control{position:absolute; bottom: -612px; right: 837px; } 
.I05_m_visual .control a{position:absolute; display: inline-block; margin: 0 3px; width: 24px; height: 24px; line-height: 24px;  font-size: 20px; text-align: center; vertical-align: middle; color: #fff;}
.I05_m_visual .control a.btn_play{display:none;}
.I05_m_visual .slick-dots{position:absolute; right: 174px; bottom: 90px;}
.I05_m_visual .slick-dots li{float: left; vertical-align: middle;}
.I05_m_visual .slick-dots button{position: relative; display: inline-block; vertical-align: middle; margin: 0 9px; font-size: 22px; padding: 0; box-sizing: border-box; cursor: pointer; color: #fff;}
.I05_m_visual .slick-dots .slick-active button{font-weight: 800; text-shadow: 2px 0 4px rgba(0,0,0,0.59);}

/* 바로가기 */
.I05_link01 {position: relative;}
.I05_link01 ul{width:100%; height: auto; overflow: hidden; }
.I05_link01 ul li{position: relative;}
.I05_link01 ul li:first-child{background:#000;}
.I05_link01 ul li:last-child{background:#f3f3f3;}
.I05_link01 ul li a{display: block; padding: 45px; font-family: 'NotoB'; }
.I05_link01 ul li a .img{position: absolute; bottom: 40px; right: 52px; -webkit-transition:transform .3s; transition:transform .3s; }
.I05_link01 ul li:first-child a{color: #fff;}
.I05_link01 ul li a h3{height: 42px; font-size: 28px; font-weight: 800; color: #000; overflow: hidden; }
.I05_link01 ul li:first-child a h3{color: #fff;}
.I05_link01 ul li a .txt{height: 41px; margin: 10px 0 38.4px; color: #333; overflow: hidden; font-family: 'NotoM'; }
.I05_link01 ul li:first-child a .txt{color: #fff;}
.I05_link01 ul li a .view{display: inline-block; border-bottom: 1px solid #797979 ; color: #000; font-family: 'NotoM'; }
.I05_link01 ul li:first-child a .view{color: #fff; border-color: rgba(255,255,255,0.6);}
.I05_link01 ul li:nth-child(2) a .view{border-color: #333;}
/* 바로가기:active */
.I05_link01 ul li a:hover .img,
.I05_link01 ul li a:focus .img{-webkit-transform:translateY(-4px); transform:translateY(-4px); }

/* 공지사항 */
.I05_notice{position: relative; text-align: center;}
.I05_notice ul{position: relative; display: block; width: 100%; height: auto; overflow: hidden; border: 1px solid #c7c7c7; margin-top: 70px; }
.I05_notice ul::before{position: absolute; bottom: 0; left: 0; background: url('/images/common/G_05_main/notice_bg.png') no-repeat center / cover; width: 239px; height: 221px; content: ""; }
.I05_notice ul li{position: relative; width: 33.333%; float: left; text-align: left; }
.I05_notice ul li.new::before{position: absolute; top: 56px; right: 42px; width: 60px; height: 30px; line-height: 30px; border-radius: 5px; background: #f1f1f1; content: "NEW"; font-family: 'Noto'; font-size: 15px; color: #000; font-weight: 600; text-align: center;}
.I05_notice ul li a{display: block; padding: 57px 40px; color: #000; }
.I05_notice ul li a .tit{font-size: 20px; font-weight: 800;}
.I05_notice ul li a h4{font-size: 20px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; margin: 57px 0 32px; overflow: hidden;}
.I05_notice ul li a .txt{height: 72px; font-size: 16px; color: #666; margin: 0 0 50px; overflow: hidden;}
.I05_notice ul li a .date{width: 100%; font-size: 15px; color: #555; font-weight: 600; border-top: 1px solid #e5e5e5; padding-top: 38px; }
.I05_notice ul li a .arraw{position: absolute; right: 35px; bottom: 55px; width: 27px; height: 27px; display: block; border-radius: 50%; background: #f4f4f4; color: #222; text-align: center; line-height: 27px; -webkit-transition:all .3s; transition:all .3s; }
/* 공지사항:active */
.I05_notice ul li a:hover .arraw,
.I05_notice ul li a:focus .arraw{color: #f4f4f4; background: #222; }
.I05_notice ul li a:hover .txt,
.I05_notice ul li a:focus .txt{text-decoration: underline; }

/* 갤러리 */
.I05_gal01{position: relative; text-align: center;}
.I05_gal01 .gal_slide{position: relative;width: calc(100% + 30rem);left: -13.5rem; padding: 30px 0 128px;}
.I05_gal01 .gal_slide .slide{position: relative; margin:40px 40px 40px 0; }
.I05_gal01 .gal_slide .slide a{display: block; width: 100%; height: 100%; }
.I05_gal01 .gal_slide .slide a .img{width: 100%; height: 416px; position: relative; overflow: hidden; background: #f1f1f1;} 
.I05_gal01 .gal_slide .slide a .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transition: transform 0.3s; -webkit-transition: transform 0.3s;}
.I05_gal01 .gal_slide .slide .txt_on{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0,0,0,0.6); color: #fff; text-align: center; opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; }
.I05_gal01 .gal_slide .slide .txt_on span{display: block;}
.I05_gal01 .gal_slide .slide .txt_on .date{font-size: 18px; margin-top: 100px;}
.I05_gal01 .gal_slide .slide .txt_on .txt{font-size: 22px; font-weight: 600; margin: 23px 0 125px;}
.I05_gal01 .gal_slide .slide .txt_on .view{font-size: 16px; display: inline-block; border-bottom: 1px solid #fff; }
.I05_gal01 .control{position:absolute; bottom: 92px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.I05_gal01 .control .count{color: #6d6d6d !important; font-size: 15px; padding: 0 25px;}
.I05_gal01 .control .count em{color: #6d6d6d;}
.I05_gal01 .control .count .current{color: #222; font-size: 18px;}
.I05_gal01 .btn_more{right: 50%; margin-right: -682px; transform: translateX(50%); -webkit-transform: translateX(50%); }
/* 갤러리 : active */
.I05_gal01 .gal_slide .slide a:hover .txt_on,
.I05_gal01 .gal_slide .slide a:focus .txt_on{opacity: 1; }
.I05_gal01 .gal_slide .slide:hover,
.I05_gal01 .gal_slide .slide:focus{box-shadow: 5px 5px 7px rgba(0,0,0,0.35); }

/* 배너 */
/* .bn_wrap{width:100%; border-top:1px solid #ddd;}
.bn_wrap .bn_box{position:relative; width:100%; max-width:1400px; margin:0 auto;}
.bn_wrap h2{position: absolute; left:0; top:50%; margin-top:-10px; line-height:20px; font-size:16px; font-family: 'NotoM';}
.bn_wrap ul{margin:20px 0 20px 230px; overflow:hidden;}
.bn_wrap ul li{float:left;}
.bn_wrap ul li a{display:block; margin:0 2px; text-align:center;}
.bn_wrap ul li a img{max-width:100%; height:35px;}
.bn_wrap .slick-arrow{position:absolute; top:50%; width:34px; height:35px; margin-top:-17px; display:block; text-indent:-99999%; overflow:hidden; cursor:pointer; }
.bn_wrap .slick-next{left:149px; background:url('/images/common/G_05_main/btn_b_next.png') no-repeat center; }
.bn_wrap .slick-prev{left:80px; background:url('/images/common/G_05_main/btn_b_prev.png') no-repeat center; }
.bn_wrap .slick-arrow:hover{background-color:rgba(0, 0, 0, 0.2); border-color:#156386; }
.bn_wrap .btn_box a{display:block; position:absolute; top:50%; width:34px; height:35px; margin-top:-17px; text-indent:-99999%; overflow:hidden;}
.bn_wrap .btn_box .control a{left:114px; width:35px; }
.bn_wrap .btn_box a.btn_stop{background:url('/images/common/G_05_main/btn_b_stop.png') no-repeat center; }
.bn_wrap .btn_box a.btn_play{display:none; background:url('/images/common/G_05_main/btn_b_play.png') no-repeat center; }
.bn_wrap .btn_box a.btn_list{left:183px; background:url('/images/common/G_05_main/btn_b_list.png') no-repeat center; } */


@media screen and (max-width:1920px){
	/* 메인비주얼 */
	.I05_m_visual .visual .slide .img img{width: auto; height: 100%; }
}

@media screen and (max-width:1680px){
	/* 메인비주얼 */
	.I05_m_visual:before{width: calc(50% - 400px); }
	.I05_m_visual::after{width: calc(100% - 716px); }
	.I05_m_visual .visual .slide .slogan{left: 20px; margin-left: 0; transform: translateX(0); }
	.I05_m_visual .slick-dots{left: auto; right: 47px; transform: translateX(0); }
	.I05_m_visual .control{left: auto; right: 710px; transform: translateX(0); }
	
}

@media screen and (max-width:1420px) { 
	/* 메인비주얼 */
	.I05_m_visual::after{width: calc(100% - 618px); }
	.I05_m_visual .visual{width: calc(100% - 401px); }
	.I05_m_visual .visual .slide .slogan .txt2{font-size: 58px; }
	.I05_m_visual .control{right: 611px; }

	/* 갤러리 */
	.I05_gal01 .btn_more{right: 2%; margin-right: 0; transform: translateX(0);}

	/* 배너 */
	.bn_wrap .bn_box{width:95%; }
}

@media screen and (max-width:1200px) { 
	#container{padding-top: 0; }
	
	/* 메인비주얼 */
	.I05_m_visual:before{bottom: -500px; width: calc(50% - 270px); }
	.I05_m_visual::after{bottom: -500px; width: calc(100% - 226px); }
	.I05_m_visual .visual{width: 100%; }
	.I05_m_visual .visual .slide .img{height: 600px; }
	.I05_m_visual .control{right: 210px; bottom: -482px; }

	/* 바로가기 */
	.I05_link01 ul li{width: 33.333%; float: left; }
	.I05_link01 ul li:nth-child(2){border-bottom: 1px solid #f1f1f1;}
	.I05_link01 ul li a{border-bottom: none; }
	.I05_link01 ul li a .img{right: 32px; }
	.I05_link01 ul li a .img img{width: 65px; }

	/* 공지사항 */
	.I05_notice ul{margin-top: 40px; }

}

@media screen and (max-width:1024px) { 
	/* 바로가기 */
	.I05_link01 ul li a{padding: 35px; }
	.I05_link01 ul li a .img{bottom: 30px; }

	/* 공지사항 */
	.I05_notice ul li{width: 50%; }
	.I05_notice ul li.new::before{top: 40px; right: 33px; }
	.I05_notice ul li:last-child{display: none; }
	.I05_notice ul li a{padding: 37px 32px; }
	.I05_notice ul li a .arraw{bottom: 35px; }
	

	/* 갤러리 */
	.I05_gal01 .gal_slide .slide a .img{height: 360px; }
	.I05_gal01 .control{bottom: 98px; }
}


@media screen and (max-width:860px) {	
	h2{font-size: 33px; }
	.btn_more{top: 15px; }

	/* 바로가기 */
	.I05_link01 ul li a h3{font-size: 24px; }
	.I05_link01 ul li a .img img{width: 55px; }
}

@media screen and (max-width:800px) {
	/* 바로가기:active */
	.I05_link01 ul li a:hover .img,
	.I05_link01 ul li a:focus .img{transform:translateY(0); }

	/* 공지사항:active */
	.I05_notice ul li a:hover .arraw,
	.I05_notice ul li a:focus .arraw{color: #222; background: #f4f4f4; }
	.I05_notice ul li a:hover .txt,
	.I05_notice ul li a:focus .txt{text-decoration: none; }

	/* 갤러리 : active */
	.I05_gal01 .gal_slide .slide:hover,
	.I05_gal01 .gal_slide .slide:focus{box-shadow: none;}
}

@media screen and (max-width:768px) {
	/* 메인비주얼 */
	.I05_m_visual:before{bottom: -380px; }
	.I05_m_visual::after{bottom: -380px; }
	.I05_m_visual .visual .slide .img{height: 480px; }
	.I05_m_visual .visual .slide .slogan{bottom: 170px; }
	.I05_m_visual .visual .slide .slogan .txt2{font-size: 42px; }
	.I05_m_visual .control{bottom: -362px; }

	/* 바로가기 */
	.I05_link01 ul li{width: 100%; }
	.I05_link01 ul li:nth-child(2){border-bottom: none;}
	.I05_link01 ul li a .txt{margin: 10px 0 30px; }

}

@media screen and (max-width:680px) {
	h2{font-size: 30px; }
	.btn_more img{margin-right: 14px; }
	.btn_more::before{width: 30px; height: 30px; }


}

@media screen and (max-width:600px) {
	h2{white-space: nowrap; }
	.btn_more{top: 410px; }

	/* 메인비주얼 */
	.I05_m_visual:before{width: calc(50% - 110px); bottom: -280px; }
	.I05_m_visual::after{bottom: -280px; }
	.I05_m_visual .visual .slide .img{height: 380px; }
	.I05_m_visual .visual .slide .slogan{bottom: 156px; }
	.I05_m_visual .visual .slide .slogan .txt2{font-size: 35px;}
	.I05_m_visual .control{bottom: -261px; }
	.I05_m_visual .slick-dots button{font-size: 20px; }

	/* 공지사항 */
	.I05_notice ul::before{bottom: -50px; left: -50px;}
	.I05_notice ul li{width: 100%; }
	.I05_notice ul li:nth-child(2){display: none; }
	.I05_notice ul li a{padding: 28px 30px; }
	.I05_notice ul li.new::before{top: 29px; right: 30px; }
	.I05_notice ul li a .arraw{right: 30px; bottom: 26px; }
	.I05_notice ul li a h4{margin: 25px 0 15px; font-size: 18px; }
	.I05_notice ul li a .txt{height: 65px; margin: 0 0 30px; font-size: 15px; }
	.I05_notice ul li a .date{padding-top: 30px; }

	/* 갤러리 */
	.I05_gal01 .gal_slide{width: 96%; left: 0; padding: 20px 0 120px; margin: 0 auto; }
	.I05_gal01 .gal_slide .slide{margin-right: 0; }
	.I05_gal01 .control{bottom: 96px; }
	.I05_gal01 .btn_more{top: auto; bottom: 96px; }
}

@media screen and (max-width:580px){
	/* 메인비주얼 */
	.I05_m_visual .visual .slide .slogan .txt2{letter-spacing: 2px;}
}

@media screen and (max-width:480px) {
	h2{font-size: 26px; }

	/* 메인비주얼 */
	.I05_m_visual .visual .slide .slogan .txt1{font-size: 24px; }
	.I05_m_visual .visual .slide .slogan .txt2{font-size: 30px; }

	/* 바로가기 */
	.I05_link01 ul li a{padding: 29px; }
	.I05_link01 ul li a .img img{width: 50px; }

	/* 갤러리 */
	.I05_gal01 .gal_slide .slide a .img{height: 300px; }
	
}
 

/* ------------------------------------------------------------ */
/* --------------- * 위젯관리 화면 전용 (관리자) * --------------- */
/* /apple/tm/sysWidg/selectWidgManageDisp.do 에서만 쓰이는 .widgOption
   (위젯 수정/추가 검정 레이어) 위치 보정.
   G-05 메인은 위젯 내용이 전부 float 이라 .widgDiv 높이가 0 으로 잡히고,
   그 결과 검정 레이어가 위젯 영역이 아니라 상단에 일자로 4개가 쌓여 보임.
   → 위젯별 실제 영역에 맞춰 레이어 위치/크기를 지정한다.
   .widgOption 은 위젯관리 화면에서만 생성되는 요소라, 아래 레이어 위치/크기
   지정은 실제 홈페이지에 영향이 없다.
   ※ 단, 아래 #widgDiv2~4::after 와 max-width:1200px 의 #widgDiv2{clear:both}
     두 군데는 .widgOption 과 무관한 선택자라 실제 홈페이지에도 적용된다.
     (1920/1280/1100/760/580px 에서 각 영역 위치 변화 없음을 확인함) */
/* ------------------------------------------------------------ */

/* 2~4번 위젯 : 내부 float 을 감싸도록 clear 처리
   (overflow:hidden / flow-root 로 BFC 를 만들면 앞선 메인비주얼 float 을 피해가면서
    레이아웃이 틀어지므로 반드시 clear 방식으로 처리할 것)
   ※ 이 3줄은 실제 홈페이지에도 적용됨. 다만 .I05_1/.I05_2/.I05_3 는 이미
     앞선 float 을 모두 지나친 위치에 놓이고 .bn_wrap / #container 는
     overflow:hidden(BFC) 이므로, 감싸기만 할 뿐 각 영역의 최종 위치는 기존과 동일. */
#widgDiv2::after,
#widgDiv3::after,
#widgDiv4::after {display:block; content:""; clear:both; }

/* 1번 위젯 : 메인비주얼(.I05_m_visual .visual) 영역 */
#widgDiv1:not(.noneWidgBg) > .widgOption {top:0; left:0; right:auto; bottom:auto; width:calc(100% - 501px); height:730px; }
/* 2번 위젯 : 우측 바로가기(.I05_1) 영역 */
#widgDiv2:not(.noneWidgBg) > .widgOption {top:0; left:auto; right:0; bottom:auto; width:501px; height:100%; }
/* 3번 위젯 : 공지사항(.I05_2 - margin-top:90px) 영역 */
#widgDiv3:not(.noneWidgBg) > .widgOption {top:90px; left:0; right:auto; bottom:auto; width:100%; height:calc(100% - 90px); }
/* 4번 위젯 : 갤러리(.I05_3 - margin-top:90px) 영역 */
#widgDiv4:not(.noneWidgBg) > .widgOption {top:90px; left:0; right:auto; bottom:auto; width:100%; height:calc(100% - 90px); }

/* 위젯삭제 버튼이 레이어 밖으로 흘러나오지 않도록 레이어 우측하단에 고정 */
#widgDiv1 > .widgOptionMod .widgetDelete,
#widgDiv2 > .widgOptionMod .widgetDelete,
#widgDiv3 > .widgOptionMod .widgetDelete,
#widgDiv4 > .widgOptionMod .widgetDelete {position:absolute; right:20px; bottom:20px; margin:0; z-index:1; }

@media screen and (max-width:1420px) {
	#widgDiv1:not(.noneWidgBg) > .widgOption {width:calc(100% - 401px); }
	#widgDiv2:not(.noneWidgBg) > .widgOption {width:401px; }
}

@media screen and (max-width:1200px) {
	/* 이 폭부터는 메인비주얼이 100% 라 바로가기(.I05_1)가 비주얼 아래로 내려간다.
	   → #widgDiv2 자체를 clear 시켜 레이어 기준을 .I05_1 위치에 맞춘다.
	     (.I05_1 은 어차피 앞선 float 아래에 놓이므로 실제 홈페이지 레이아웃은 동일) */
	#widgDiv2 {clear:both; }
	#widgDiv1:not(.noneWidgBg) > .widgOption {width:100%; height:600px; }
	#widgDiv2:not(.noneWidgBg) > .widgOption {top:0; width:100%; height:100%; }
}

@media screen and (max-width:768px) {
	#widgDiv1:not(.noneWidgBg) > .widgOption {height:480px; }
}

@media screen and (max-width:600px) {
	#widgDiv1:not(.noneWidgBg) > .widgOption {height:380px; }
	/* .I05_2 만 margin-top 이 50px 로 줄어든다 (.I05_3 는 90px 유지) */
	#widgDiv3:not(.noneWidgBg) > .widgOption {top:50px; height:calc(100% - 50px); }
}