@charset "UTF-8";

@import url('https://webfontworld.github.io/pretendard/Pretendard.css');

#bo_gall .gall_text_href a{white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

/*
	사용시 각 게시판 list.skin에 #bo_list에 해당 클레스 추가

	1. 공지사항 기본리스트 - 
	2. 좌측 이미지 갤러리 리스트 - notice_photo
*/
.gall_row .col-gn-2{width:33.33333%;}
.gall_row .box_clear { clear: none; }
.subgall01{width:100%;height: 500px;}
.subgall01_img{float: left;width: 50%;}
.subgall01_text{float: left;width: 50%;}
.subgall01_text_title{font-size: 3em; color: #fff;}
.subgall02{width:100%;}
/* set */
body {margin:0;padding:0;font-family:'Pretendard', dotum, sans-serif; background:#fff; overflow-x:hidden;}
body.active ,
body.fixed{position: fixed; width: 100%; height: 100%; overflow: hidden; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
em{font-style:normal;}
ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}
textarea,
select{font-size:15px;}
select{margin:0;}
p{margin:0; padding:0; word-break:keep-all;}
hr{display:none;}
pre{font-size:1.1em; overflow-x:scroll;}
a{color:#fff; text-decoration:none;}
*,
:after,
:before{box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; word-break: keep-all}
input[type=text],
input[type=password],
textarea{-webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; outline:none;}

::placeholder{font-family:'Pretendard', dotum, sans-serif; }


/* 전체화면 버튼 */ 
video::-webkit-media-controls-fullscreen-button {display: none !important; } 

/* 일시정지, 재생 버튼 */ 
video::-webkit-media-controls-play-button {display: none !important; } 

/* 재생 슬라이드..? */ 
video::-webkit-media-controls-timeline {display: none !important; } 

/* 현재 진행 시간 */ 
video::-webkit-media-controls-current-time-display{display: none !important; } 

/* 전체 시간 */ 
video::-webkit-media-controls-time-remaining-display {display: none !important; } 

/* 음소거 버튼 */ 
video::-webkit-media-controls-mute-button {display: none !important; } 

/* 볼륨 조절 슬라이드 */ 
video::-webkit-media-controls-volume-slider {display: none !important; } 

/* 괄호에 display: none !important; 를 추가하면된다. 
예 ) 전체화면 전환 버튼을 숨긴다. 다만 더블클릭으로 전체화면이 되는 기능등은 
그대로고 단지 버튼만 없앤다. */ 
video::-webkit-media-controls-fullscreen-button { display: none !important; }



/* pagenation */
.pg_wrap {clear:both;margin: 50rem 0 140rem;text-align:center}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {position:relative; color:#333;font-size: 16rem;height:30rem;line-height:28rem;  text-decoration:none;width: 50rem;height: 50rem;border-radius: 5rem;display: flex;align-items: center;justify-content: center;margin: 0 3rem;overflow: hidden;padding: 0;font-family: 'Pretendard', dotum, sans-serif;}
.pg_page:before{opacity:0; content:''; position:absolute; left:0; right:0; bottom:0; width:100%; height:2rem; background:#2d52a7;}

.pg_start {text-indent:-999rem;background: url('../img/base/arr_end.png') no-repeat 50% 50%;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.pg_prev {text-indent:-999rem;background: url('../img/base/arr_next.png') no-repeat 50% 50%;-webkit-transform: rotate(180deg);transform: rotate(180deg);margin-right: 50rem;}
.pg_end {text-indent:-999rem;background: url('../img/base/arr_end.png') no-repeat 50% 50%;}
.pg_next {text-indent:-999rem;background: url('../img/base/arr_next.png') no-repeat 50% 50%;margin-left: 50rem;}

.pg_current {position:relative;font-size: 16rem;color: #ef404a;width: 43rem;height: 43rem;display: flex;border: 1px solid #ef404a;justify-content: center;align-items: center;border-radius: 35rem;font-weight: 400;}

span.pg{display:flex; justify-content:center; align-items:center;}

/* board set */
.gall_subject{margin-top:30px;}
.custom_btn{display:flex !important; justify-content:center; align-items:center; position:absolute; left:50%; width:220px; height:67px !important; background:#32a26c !important; font-size:18px; transform:translateX(-50%); border-radius:100px;}

#bo_v_title .bo_v_tit{display:block; line-height:1.3em; padding:10px 0; font-weight:bold; font-size:32px; color:#333; text-align:left; letter-spacing:-.05em; max-width:80%;}
#bo_v_top{padding-top:50px; border-top:1px solid; zoom:1;}

/* board-certify set */
.gallery_certify #bo_gall #gall_ul li > a{height:auto !important;}
.gallery_certify #bo_gall #gall_ul li:nth-child(4) ~ li{margin-top:10px;}
.gallery_certify #bo_gall #gall_ul li{margin:0;}
.gallery_certify #bo_gall .gall_img{display:block; position:relative; overflow:hidden; width:100%; height:100%; padding:24px; background:#fafafa;}

.colum4_board{gap:50px;}
.colum4_board > li{width:calc((100% / 4) - 38px); width:-webkit-calc((100% / 4) - 38px); margin-right:0 !important;}

/* board-gallery set */
.colum3_board{gap:40px;}
.colum3_board > li{width:-webkit-calc((100%/3) - 27px); width:calc((100%/3) - 27px);}
.colum3_board > li:nth-child(3) ~ li{margin-top:5% !important;}
.colum3_board .gall_info{overflow:hidden; margin-top:7px; font-weight:400; font-size:16px; color:#888; white-space:nowrap; text-overflow:ellipsis;}

/* notice photo left set */
/* 사용시 list스킨에 #bo_list에 클레스 notice_photo 추가 */
.notice_photo .notice_icon{position:absolute; top:0; right:0; padding:3px 10px; background:#ba1c22; font-weight:500; font-size:13px; color:#fff;}
.notice_photo .bo_list{margin: 0px 0 60px;}
.notice_photo .bo_list li{position:relative; display:block; width:100%;}
.notice_photo .bo_list li a{display: flex;align-items: center; width:100%;padding: 50px 0; box-sizing:border-box; border-bottom:1px solid #ddd;align-items: center;}
.notice_photo .bo_list li a .area_img{position:relative; overflow:hidden; overflow:Hidden; width:270px; height:190px; margin:0 50px 0 0;}
.notice_photo .bo_list li a .area_img img{position:absolute; top:50%; left:50%; width:100%; transition:all 0.3s ease; transform:translate(-50%, -50%) scale(1.0,1.0);}
.notice_photo .bo_list li:hover a .area_img img{transform:translate(-50%, -50%) scale(1.05,1.05);}
.notice_photo .bo_list li a .area_txt .area_bottom{display:block;}
.notice_photo .bo_list li a .subject{display:block; width:calc(100% - 350px); width:-webkit-calc(100% - 350px); box-sizing:border-box; text-align:left;}
.notice_photo .bo_list li a .subject h3{display:block; display:-webkit-box; overflow:hidden;line-height: 1.4;font-weight: 600; font-size:20px; color:#222; word-break:keep-all; text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;width: 90%;}
.notice_photo .bo_list li a .subject p{display:block; display:-webkit-box; overflow:hidden; margin-top:9px; font-weight:300;font-size: 16rem; color:#666;  text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.notice_photo .bo_list li a .subject .lt_date i{margin-left:15px; padding-left:15px; border-left:1px solid #eee; font-weight:500; color:#c3c3c3; font-style:normal;}
.notice_photo .bo_list li a .subject .lt_date{display:block;margin: 42px 0 0;font-weight: 600;font-size: 14px;color: #1777c1;font-family: 'Pretendard', dotum, sans-serif;}
.notice_photo .bo_list li a:after{content:""; display:block; visibility:hidden; clear:both;}
.notice_photo .bo_list li a:hover{text-decoration:none;}
.notice_photo .bo_list li a:hover .datetime h2{color:#ba1c22;}
.notice_photo .bo_list li a:hover .datetime span,
.notice_photo .bo_list li a:hover .datetime h2,
.notice_photo .bo_list li a:hover .subject h3{color: #1777c1 !important;}
.notice_photo .datetime{display:flex; justify-content:center; align-items:center; margin:0 50px; text-align:center; flex-direction:column;}
.notice_photo .datetime h2{line-height:0.8em; font-weight:bold; font-size:48px !important; color:#d9d9d9 !important; transition:all 0.3s ease;}
.notice_photo .datetime span{display:block; margin:10px 0 0; font-weight:bold; font-size:16px; color:#d9d9d9; transition:all 0.3s ease;}
.notice_photo .subject .bcont{display:block; display:-webkit-box; overflow:hidden; width:100%; line-height:1.4em; margin:19px 0 0; font-weight:400; font-size:16px; color:#666; white-space:nowrap; word-break:keep-all; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical;}

/* notice only tit */
/* 사용시 list스킨에 #bo_list에 클레스 .notice_photo.data 추가 */
.notice_photo.data .bo_list li a .subject .lt_date{margin:0; min-width:210px;color: #ccc;}
.notice_photo.data .bo_list li a .subject{display:flex; justify-content:space-between; width:100%;}
.notice_photo.data .bo_list li a .subject h3{font-size:18px;}
.notice_photo.data .bo_list{border-top:2px solid #222;}
.notice_photo.data .bo_list li a{padding: 40rem 0;}


@media (max-width:1400px){
	.colum3_board > li{width:-webkit-calc((100%/3) - 27px); width:calc((100%/3) - 27px);}
}

@media (max-width:1279px){
	.colum4_board{gap:30px;}
	.colum4_board > li{width:calc((100% / 4) - 23px); width:-webkit-calc((100% / 4) - 23px);}

	.colum3_board > li:nth-child(3) ~ li{margin-top:1% !important;}	
	.colum3_board .gall_subject{font-size:21px;}

	.gallery_certify .gall_subject{margin-top:25px;}
}

@media (max-width:1024px){
	.notice_photo .bo_list li a{padding:30px;}
	.notice_photo .bo_list li a .area_img{margin:0 30px 0 0; width:220px; height:150px;}
	.notice_photo .bo_list li a .subject{width:calc(100% - 250px);}
	.subgall01_img > img {width: 450px !important; height: 355px !important; }
	.subgall02 > li > img{ width: 160px !important; height: 150px !important;}
}

@media (max-width:1023px){
	#bo_gall #gall_ul{margin-top:43px;}

	.colum4_board > li{width:calc((100% / 3) - 20px); width:-webkit-calc((100% / 3) - 20px);}

	.colum3_board{gap:20px;}
	.colum3_board > li{width:-webkit-calc((100%/3) - 14px); width:calc((100%/3) - 14px);}
	.colum3_board .gall_subject{margin-top:22px; font-size:19px;}
}

@media (max-width:850px) {
		html{overflow-x: hidden}
	
	.notice_photo .bo_list li a{padding:30px 20px;}
	.notice_photo .bo_list li a .subject .lt_date{margin:10px 0 0;}
	.subgall01{width:100%;height: 500px;}
	.subgall01_img{width: 100%;}
	.subgall01_img > img {width: 100% !important; height: 100% !important; }
	.subgall01_text{width: 100%;}
	.subgall01_text_title {font-size: 2em !important;}
	.subgall02{display: none;}
}

@media (max-width:767px){
	.colum4_board{gap:18px;}
	.colum4_board > li{width:calc((100% / 2) - 9px); width:-webkit-calc((100% / 2) - 9px);}
	
	.gallery_certify .gall_subject{margin-top:19px;}
	.gallery_certify > article{padding-bottom:0 !important;}
	.gallery_certify #bo_gall .gall_img{padding:18px;}

	#bo_v_title .bo_v_tit{font-size: 25rem; max-width:100%;line-height: 1.4;}
	#bo_v_info .if_date{display:block; position:relative; top:0; font-size:11rem;}
	#bo_v_top{margin-bottom: 0; padding-top:20px;}
	
	.custom_btn{width:170px; height:63px !important; font-size:16px;}

	.colum3_board{gap:15px;}
	.colum3_board > li{width:-webkit-calc((100%/2) - 8px); width:calc((100%/2) - 8px);}
	.colum3_board li:nth-child(2) ~ li{margin-top:20px !important;}
	.colum3_board #gall_ul{margin-top:33px;}
	.colum3_board .gall_info{margin-top:2px; font-size:15px;}

	.notice_photo .bo_list li a .area_img{margin:0 20px 0 0; width:160px; height:110px;}
	.notice_photo .bo_list li a .subject{width:calc(100% - 180px);}  

	.pg_current{width:40rem; height:40rem; font-size:15rem;}
	.pg_page{width:40rem; height:40rem; font-size:15rem;}
	.pg_end,
	.pg_start,
	.pg_next,
	.pg_prev{background-size:12rem;}
	.pg_wrap{margin:30px 0 80rem;}
}

@media (max-width:650px) {

	.notice_photo .bo_list li a{padding: 20rem 0;}
	.notice_photo .bo_list li a .area_img{margin:0 18px 0 0;}
	.notice_photo .bo_list li a .subject h3{font-size:18px;}
	.notice_photo .bo_list li a .subject .lt_date{font-size: 15rem; margin:7px 0 0;}

	.notice_photo .bo_list li a .subject h3{height:31rem;}
	.notice_photo.data .bo_list li a .subject .lt_date{min-width: 229rem;display: flex;align-items: center;}
	
}

@media (max-width:540px) {
	.notice_photo .bo_list li a .area_img{margin:0 20px 0 0; width:140px; height:100px;}
	.notice_photo .bo_list li a .subject{width:calc(100% - 160px);}
	.notice_photo .bo_list li a .subject h3{font-size:17px;}
	.notice_photo .bo_list li a .subject .lt_date{font-size:14px; margin:5px 0 0;}
	.notice_photo .bo_list li a .subject h3{height:19rem;}
	.notice_photo.data .bo_list li a{padding:15rem 0;}
	.notice_photo .bo_list li a .subject .lt_date i{display:none;}
	.notice_photo.data .bo_list li a .subject .lt_date{display:flex; align-items:center; min-width:auto;}
	.notice_photo .bo_list li a .subject h3{width:81%;}
	.notice_photo.data .bo_list li a .subject h3{margin-right:10rem;font-size: 14rem; word-break:break-all;}
	
	.notice_photo_view #bo_v_info .if_date{margin-top:5rem;}		

	.pg_page{width:30rem; height:40rem; font-size:15rem;}
	.gall_row .col-gn-2{width:50%;}
	.gall_row .box_clear { clear: both; }
	.subgall01{width:100%;height: 400px;}
	.subgall01_img{width: 100%;}
	.subgall01_img > img {width: 100% !important; height: 100% !important; }
	.subgall01_text{width: 100%;}
	.subgall01_text_title {font-size: 2em !important;}
	.subgall02{display: none;}
}

@media (max-width:450px) {
	.notice_photo:not(.data) .bo_list li a{padding: 0rem 0;display: flex;flex-direction: column;border: none;}
	.notice_photo .bo_list li a .area_img{min-width: auto;width: 100%;height: 179rem;margin: 0;}
	.notice_photo:not(.data) .bo_list li a .subject{width:100%;margin-top: 21rem;}
	.notice_photo .bo_list li a .subject h3{font-size: 17rem;width: 90%;word-break: break-all;height: 21rem;}
	.notice_photo .bo_list li a .subject .lt_date{font-size:13px;margin: 15px 0 0;}
	.notice_photo .bo_list li a .subject p{font-size:15rem;}
	.notice_photo:not(.data) .bo_list li:not(:first-child){margin-top: 37rem;}
}

@media (max-width:359px){
	.colum3_board > li{width:100%;}
	.colum3_board li:nth-child(1) ~ li{margin-top:20px;}
}

@media (max-width:320px){
	.colum4_board > li{width:100%;}
}