@charset "utf-8";

#top_main { width: 100%; height: 100%; position: relative; }
#top_main:after { content: ''; display: block; clear: both; }

#visual { float: right; width: 55.15%; height: 465px; overflow: hidden; }

/* 슬로건 */
#slogan { float: right; width: 44.85%; height: 465px; overflow: hidden; background: url("/images/member/main/bg_slogan.jpg") right top no-repeat; background-size: cover; }
#slogan .wrapper { float: right; height: 100%; }
#slogan .wrapper .txt { text-align: right; box-sizing: border-box; padding-top: 95px; padding-right: 50px; letter-spacing: -1px; }
#slogan .wrapper .txt h3 { font-size: 30px; font-weight: 400; color: #fff; line-height: normal; margin-bottom: 20px; }
#slogan .wrapper .txt h3 span { display: block; margin-bottom: 10px; }
#slogan .wrapper .txt h3 .orange { color: #eb8a0c; }
#slogan .wrapper .txt h3 .mj { font-family: 'Nanum Myeongjo'; font-size: 35px; }
#slogan .wrapper .txt p { font-size: 18px; font-weight: 100; color: #fff; }
#slogan .wrapper .btnWrap ul { position: absolute; bottom: 76px; left: 0; padding: 25px 0; padding-left: calc(50% - 600px); background-color: #001426; }
#slogan .wrapper .btnWrap ul:after { content: ''; display: block; clear: both; } 
#slogan .wrapper .btnWrap li { float: left; position: relative; margin-right: 20px; }
#slogan .wrapper .btnWrap li:after { content: ''; display: block; width: 1px; height: 27px; background-color: rgba(255, 255, 255, .3); position: absolute; right: 0; top: 8px; }
#slogan .wrapper .btnWrap li:last-child { margin-right: 0; } 
#slogan .wrapper .btnWrap li:last-child:after { display: none; }
#slogan .wrapper .btnWrap li a { display: block; color: #fff; font-size: 18px; padding-left: 52px; margin-right: 20px; line-height: 42px;  }
#slogan .wrapper .btnWrap li a:before { content: ''; display: block; width: 42px; height: 42px; background: url("/images/member/main/icon_slogan.png") 0px 0px no-repeat; position: absolute; left: 0; top: 0; }
#slogan .wrapper .btnWrap li a.profile:before { background-position: -42px 0px; }

/* 바로가기 */
#quick { position: relative; }
#quick:before { content: ''; display: block; width: calc(50% - 600px); height: 277px; background-color: #f1f1f1; position: absolute; left: 0; top: 0; }
#quick .inner { padding: 50px 0; }
#quick .inner:before { content: ''; display: block; width: calc(100% - 108px); height: 277px; background-color: #f1f1f1; position: absolute; left: 0; top: 0; }
#quick h3 { font-size: 25px; font-weight: 500; color: #353535; margin-bottom: 40px; position: relative; }
#quick h3 span { font-size: 23px; font-weight: 400; color: #9e9e9e; text-transform: uppercase; letter-spacing: .4px; }
#quick .list { position: relative; }
#quick .list ul { margin-left: -15px; margin-right: -15px; }
#quick .list ul:after { content: ''; display: block; clear: both; }
/* #quick .list ul li { float: left; width: 16.666%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } */
#quick .list ul li {float: left;width: 14.286%;box-sizing: border-box;padding-left: 15px;padding-right: 15px;}
#quick .list ul li a { display: block; text-align: center; box-shadow: 1px 1px 1px rgba(0, 0, 0, .15); box-sizing: border-box; padding: 35px 0; background-color: #fff; }
#quick .list ul li a:before { content: ''; display: block; width: 70px; height: 72px; margin: 0 auto; background-position: center; background-repeat: no-repeat; margin-bottom: 20px; }
#quick .list ul li a:after { content: ''; display: block; width: 100%; height: 11px; background: url("/images/member/main/icon_quick_arrow.png") center no-repeat; }
#quick .list ul li.item1 a:before { background-image: url("/images/member/main/icon_quick1.png"); }
#quick .list ul li.item2 a:before { background-image: url("/images/member/main/icon_quick2.png"); }
#quick .list ul li.item3 a:before { background-image: url("/images/member/main/icon_quick3.png"); }
#quick .list ul li.item4 a:before { background-image: url("/images/member/main/icon_quick4.png"); }
#quick .list ul li.item5 a:before { background-image: url("/images/member/main/icon_quick5.png"); }
#quick .list ul li.item6 a:before { background-image: url("/images/member/main/icon_quick6.png"); }
#quick .list ul li a:focus,
#quick .list ul li a:hover { box-shadow: 2px 2px 2px rgba(0, 0, 0, .3); }
#quick .list ul li a:focus:after,
#quick .list ul li a:hover:after { background-image: url("/images/member/main/icon_quick_arrow_active.png"); }
#quick .list ul li a span { display: block; margin-bottom: 20px; font-size: 19px; font-weight: 400; color: #373737; }

/* 게시판 - 공통 */
#board { position: relative; }
#board:before { content: ''; display: block; width: calc(50% - 600px); height: 325px; background-color: #f1f1f1; position: absolute; right: 0; top: 0; }
#board:after { content: ''; display: block; clear: both; } 
#board .list ul li { margin-bottom: 10px; }
#board .list ul li a { display: block; box-sizing: border-box;  }
#board .list ul li a:after { content: ''; display: block; clear: both; }
#board .list ul li span { float: left; font-weight: 100; line-height: normal; }
#board .list ul li .tit { width: 75%; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #292929; }
#board .list ul li .date { width: 25%; font-size: 16px; text-align: right; color: #585858; }

/* 영상회의록 */
#board1 { float: left; width: 50%; padding-top: 35px; position: relative; z-index: 2; }
#board1 h3 { font-size: 23px; font-weight: 400; color: #fff; line-height: normal; float: left; background: #16436e; padding: 5px 20px; margin-left: 50px; }
#board1 .list { clear: both; height: 319px; background: url("/images/member/main/bg_board1.jpg") center no-repeat; background-size: cover; box-sizing: border-box; padding: 47px 50px; }
#board1 .list ul li { margin-bottom: 15px; }
#board1 .list ul li.none { color: #fff; }
#board1 .list ul li a { padding: 10px 30px; background-color: rgba(0, 0, 0, .55); }
#board1 .list ul li a:focus,
#board1 .list ul li a:hover { background-color: rgba(0, 0, 0, .8); border: 1px solid rgba(141, 195, 247, .8); }
#board1 .list ul li .tit { color: #fff; }
#board1 .list ul li .date { color: #b9b9b9 }
/* 발언회의록 */
#board2 { width: calc(50% + 185px); box-sizing: border-box; padding-top: 35px; padding-left: 260px; background-color: #f1f1f1; height: 325px; position: absolute; right: 0; top: 0; z-index: 1; }
#board2 h3 { font-size: 25px; font-weight: 400; color: #292929; line-height: normal; margin-bottom: 30px; }
#board2 h3:after { content: ''; display: block; width: 54px; height: 3px; background-color: #eb9019; margin-top: 15px; }
#board2 .list ul li a:hover .tit { text-decoration: underline; }
#board2 > .more { position: absolute; right: 0; top: 35px; }
#board2 > .more a { display: block; font-size: 16px; font-weight: 400; color: #5f5f5f; position: relative; padding: 7px 0; padding-left: 15px; }
#board2 > .more a:before { content: ''; display: block; width: 1px; height: 14px; background-color: #ababab; position: absolute; left: 0; top: 12px; }
#board2 > .more a:after { content: url('/images/member/main/icon_board_arrow.png'); margin-left: 10px; }

/* 갤러리 */
#gallery { clear: both; position: relative; padding: 80px 0; }
#gallery:before { content: ''; display: block; width: 100%; height: 309px; background-color: #16436f; position: absolute; left: 0; bottom: 0; }
/* #gallery h3 { font-size: 25px; font-weight: 500; color: #212121; text-align: center; position: relative; margin-bottom: 45px; } */
#gallery h3 { font-size: 22px; font-weight: 400; color: #333; text-align: center; line-height: normal; margin-bottom: 30px; }
#gallery h3 strong { font-weight: 700; color: #1a366f; }
#gallery h3 a { font-size: 0; display: inline-block; width: 15px; height: 22px; vertical-align: middle; position: relative; margin-left: 10px; }
#gallery h3 a:before { content: ''; display: block; width: 15px; height: 1px; background-color: #444; position: absolute; right: 0; top: 7px; }
#gallery h3 a:after { content: ''; display: block; width: 1px; height: 15px; background-color: #444; position: absolute; right: 7px; top: 0; }

#gallery .list { padding: 0 10.8%; position: relative; max-width: 1570px; margin: 0 auto; }
#gallery .list ul { margin-left: -20px; margin-right: -20px; }
#gallery .list ul:after { content: ''; display: block; clear: both; }
#gallery .list ul li { float: left; width: 25%; box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
#gallery .list ul li a { display: block; position: relative; }
#gallery .list ul li a:focus:before,
#gallery .list ul li a:hover:before { content: ''; display: block; width: 100%; height: 100%; border: 2px solid #eb8a0c; position: absolute; right: 20px; top: 20px; z-index: 2; }
#gallery .list ul li .img { height: auto; text-align: center; overflow: hidden; margin-bottom: 15px; position: relative; padding-top: 70%; }
#gallery .list ul li .img img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
#gallery .list ul li .txt { box-sizing: border-box; padding: 0 45px; }
#gallery .list ul li .txt span { display: block; text-align: right; font-weight: 100; color: #fff; }
#gallery .list ul li .txt .tit { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


@media all and (max-width: 1200px) {
	
	#container.main .inner { width: 100%; }
	
	#visual img { transform: translate(-20%, 0); }

	#slogan .wrapper .txt { padding-right: 30px; }
	#slogan .wrapper .txt h3 { font-size: 27px; }
	#slogan .wrapper .txt h3 .mj { font-size: 32px; letter-spacing: -2px; }
	#slogan .wrapper .btnWrap li:first-child { margin-left: 20px; }

	#quick .inner { padding: 50px 20px; box-sizing: border-box; }

	#board2 { padding-right: 20px; }
	#board2 > .more { right: 20px; }

	#gallery:before { height: 220px; }
	#gallery .list { padding: 0 20px; }
	/* #gallery .list ul li .img { height: 155px; } */
	#gallery .list ul li .txt { padding: 0 25px; }
}


@media all and (max-width: 1024px) {
	
	#visual { width: 50%; }
	#visual img { max-width: none; transform: translate(-27%, 0); }

	#slogan { width: 50%; }
	#slogan .wrapper .txt { padding-right: 25px; }
	#slogan .wrapper .txt h3 { font-size: 22px; }
	#slogan .wrapper .txt h3 .mj { font-size: 28px; }
	#slogan .wrapper .btnWrap ul { padding: 15px 0; }

	#board1 .list { padding: 47px 20px; }
	#board2 { padding-left: 220px; }

	#gallery:before { height: 200px; }
	#gallery .list ul li a:focus:before, 
	#gallery .list ul li a:hover:before { display: none; }
	/* #gallery .list ul li .img { height: 110px; } */

}


@media all and (max-width: 768px) {
	
	#visual,
	#slogan { float: none; width: 100%; height: auto; }
	#visual img { max-width: 100%; transform: translate(0, 0); }
	#slogan { padding-bottom: 118px; }
	#slogan .wrapper .txt { padding-top: 26px; }
	#slogan .wrapper .txt h3 { font-size: 26px; margin-bottom: 10px; }
	#slogan .wrapper .txt h3 span { margin-bottom: 3px; }
	#slogan .wrapper .txt h3 .mj { font-size: 35px; }
	#slogan .wrapper .btnWrap ul { bottom: 26px; }
	
	#quick { background-color: #f1f1f1; }
	#quick .inner { padding: 40px 20px; }
	#quick .inner:before { display: none; }
	#quick h3 { text-align: center; }
	#quick h3 span { font-size: 16px; }
	#quick .list ul { text-align: center; }
	#quick .list ul li { float: none; display: inline-block; width: 200px; margin-bottom: 20px; }
	#quick .list ul li a:before,
	#quick .list ul li a span { font-size: 16px; margin-bottom: 10px; }

	#board .list ul li .tit { font-size: 16px; }
	#board .list ul li .date { font-size: 14px; }

	#board1 { float: none; width: 100%; }
	#board1 h3 { margin-left: 20px; }
	#board2 { position: relative; width: 100%; padding-left: 20px; }
	
	#gallery { padding: 40px 0px; }
	#gallery .list ul { margin-left: 0px; margin-right: 0px; }
	#gallery .list ul li { padding-left: 5px; padding-right: 5px; }
	#gallery .list ul li .txt { padding: 0 10px; }

}
@media all and (max-width: 615px) {

	#quick .list ul li { width: 150px; }
	#quick .list ul li a { padding: 20px 0; }
	#quick .list ul li a:before { background-size: auto 80%; }

}
@media all and (max-width: 465px) {

	#slogan .wrapper .txt h3 { font-size: 22px; }
	#slogan .wrapper .txt h3 .mj { font-size: 26px; }

	#quick .list ul li { width: 110px; padding-left: 5px; padding-right: 5px; }
	
	#gallery:before { height: 67%; }
	#gallery .list ul li { width: 50%; margin-bottom: 20px; }

}
@media all and (min-width: 459px) and (max-width: 465px) {
	
	#quick .list ul li { width: 120px; padding-left: 10px; padding-right: 10px; }
}
@media all and (max-width: 360px) {
	
	#gallery .list { padding: 0 10px; }

}
@media all and (max-width: 360px) {
	
	#quick .list ul li { width: 130px; }

}
@media all and (max-width: 330px) {
	
	#slogan .wrapper .txt h3 { font-size: 18px; }
	#slogan .wrapper .txt h3 .mj { font-size: 23px; }
	#slogan .wrapper .txt p { font-size: 16px; }

}