/*포토갤러리 스킨*/
.galleryList{display:flex; flex-flow:row wrap; margin:-1%}
.galleryList > div{
	width: 98%; 
	margin:1%;
	/*flex: 1 1 auto; 
	margin: 0 0 2% 0;*/ 
	padding: 0; 
	border:1px solid #ddd; 
	position: relative; 
	transition:0.5s ease-in-out;
}
.galleryList > div:hover {border-color:#999;box-shadow:0 10px 20px rgba(0,0,0,0.15); cursor:pointer}
.galleryList > div >.pic {
	position:relative;
	background-color:var(--color-f5);
	padding-bottom:50%; 
	height:0; 
	overflow:hidden
}
.galleryList > div >.pic > img {
	width:120%;
	max-width:120%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.galleryList > div >.cont {padding:1rem}
.galleryList > div >.cont > p:first-child {font-family:var(--sub-font-M); font-size:var(--text-sm); margin-bottom:var(--margin-m)}
.galleryList > div >.cont > p.date {color:var(--color-9); font-size:var(--text-xs); font-weight:var(--fw-3); text-align:right}


@media all and (min-width:780px) {
.galleryList > div{width: 48%;}
}

@media all and (min-width:1000px) {
.galleryList > div{width: 31.333%;}
}

@media all and (min-width:1200px) {
.galleryList > div{width: 23%;}
}

@media all and (min-width:1600px) {
.galleryList > div{width: 18%;}
}
.topSCH {display:flex; justify-content:flex-end}
.bbsschW {position:relative; width:340px; max-width:100%; margin:0 1rem 2rem 0; height:50px; border:2px solid rgba(0,0,0,0.6); border-radius:10px; padding:10px 1em}
.bbsschW input {height:30px; width:calc(100% - 50px); border:0}
.bbsschW input:focus{outline:0}
.bbsschW .sbtn {position:absolute; right:1em; top:50%; transform: translateY(-50%); color:#333;}
/*포토갤러리 스킨*/
.galleryList{display:flex; flex-flow:row wrap; margin:-1%}
.galleryList > div{
	width: 98%; 
	margin:1%;
	/*flex: 1 1 auto; 
	margin: 0 0 2% 0;*/ 
	padding: 0; 
	border:1px solid #ddd; 
	position: relative; 
	transition:0.5s ease-in-out;
}
.galleryList > div:hover {border-color:#999;box-shadow:0 10px 20px rgba(0,0,0,0.15); cursor:pointer}
.galleryList > div >.pic {
	position:relative;
	background-color:var(--color-f5);
	padding-bottom:50%; 
	height:0; 
	overflow:hidden
}
.galleryList > div >.pic > img {
	width:120%;
	max-width:120%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.galleryList > div >.cont {padding:1rem}
.galleryList > div >.cont > p:first-child {font-family:var(--sub-font-M); font-size:var(--text-sm); margin-bottom:var(--margin-m)}
.galleryList > div >.cont > p.date {color:var(--color-9); font-size:var(--text-xs); font-weight:var(--fw-3); text-align:right}


@media all and (min-width:780px) {
.galleryList > div{width: 48%;}
}

@media all and (min-width:1000px) {
.galleryList > div{width: 31.333%;}
}

@media all and (min-width:1200px) {
.galleryList > div{width: 23%;}
}

@media all and (min-width:1600px) {
.galleryList > div{width: 18%;}
}
.topSCH {display:flex; justify-content:flex-end}
.bbsschW {position:relative; width:340px; max-width:100%; margin:0 1rem 2rem 0; height:50px; border:2px solid rgba(0,0,0,0.6); border-radius:10px; padding:10px 1em}
.bbsschW input {height:30px; width:calc(100% - 50px); border:0}
.bbsschW input:focus{outline:0}
.bbsschW .sbtn {position:absolute; right:1em; top:50%; transform: translateY(-50%); color:#333;}

.moreBtn {display:flex; justify-content:center; margin-bottom:var(--secgap)}
.moreBtn a {display:block; padding:1rem;}
.moreBtn a p {display:block; margin-top:var(--padding-s)}
.moreBtn a p span {color:var(--color-9); font-size:var(--text-xs)}
.moreBtn a:before {
	content:""; 
	width:48px;
	height:48px;
	margin:0 auto;
	background-image:url("/dgyouth/images/common/chevrons-down.svg");
	background-repeat:no-repeat;
	background-size:cover;
	display:block; 
	transition:.2s ease-out; 
	-webkit-animation:balloon1 1.2s ease-in-out infinite; 
	-moz-animation:balloon1 1.2s ease-in-out infinite; 
	-o-animation:balloon1 1.2s ease-in-out infinite; 
	animation:balloon1 1.2s ease-in-out infinite; 

}
.moreBtn a:hover {border-color:#333}

/*뷰페이지*/
.view_head {
	position:relative;
	background:#fff;
	/*border-top:2px solid #333; 
	border-bottom:1px solid #ccc*/
	border-radius: 60px 10px;
    box-shadow: 0px 30px 40px 0px rgba(179,191,203,0.2);
	padding:var(--boxpd2);
}

.view_head:before {
    content: "";
    width: calc(100% - 1px);
    height: 100px;
    background: #333;
    position: absolute;
    left: 1px;
    top: -4px;
    z-index: -1;
    border-radius: 60px 10px;
}

.view_head h3 {
	display:flex;
	flex-flow:row wrap;  
	font-family:var(--sub-font-B); 
	font-size:var(--text-xl);
	margin-bottom:var(--margin-m);
	color:var(--color-3)
}
.view_head h3 label1 {display:inline-block}
.date {
	width:100%;
	height:auto; 
	padding:0; 
	color:var(--color-9);
	font-size:var(--text-s);
	margin-bottom:var(--margin-m);
	border:none !important 
}
.date ul {display:flex; flex-flow:row wrap}
.date ul li {margin-right:1rem}
.view_head .file_wrap {padding:2px 4px 0 0; text-align:right; font-size:0.725em; color:#999; font-weight:300}
.view_head .file_wrap li {margin-bottom:0.333rem}
.view_head .file_wrap dt,.view_head .file_wrap dd {display:inline-block;}
.view_head .file_wrap a {/*margin-right:15px;*/ word-break:keep-all; white-space:normal;}
.view_head .file_wrap a:before {content:""; display:inline-block; content:"\ea8b"; font-family:'xeicon' !important; font-size:14px; color:#004f9f;animation:icon_ani 0.5s infinite linear alternate;}
.view_head .file a{display:inline-block; background:url('/dgyouth/images/bbs/ico_file.png') left 3px no-repeat; padding-left:20px; color:#ff9900 !important}
.view_body {padding:4% 3%; margin-top:10px; border-bottom:1px solid #999;}

/* 내용 이미지,플래시 */
.view_body div {text-align:center}
.view_body div img { display: inline-block; margin: 1.8em auto 1.8em; padding: 1rem; border: 1px solid #eee; }
.view_body div.flash { display: block; width: 320px; height: auto; margin: 1.8em auto 1.8em; padding: 0; border: 4px solid #e4e4e4; }
@keyframes icon_ani {
  0%   {transform:translate(0, 0px);}
  50%   {transform:translate(0, 5px);}
  100% {transform:translate(0, -5px);}
}


/* 게시판 댓글 */
.reply_box {
	position:relative;
	border-radius:10px 60px;
    box-shadow: 0px 5px 30px 0px rgba(179,191,203,0.2);
	padding:1.5rem 2rem 2rem 60px;
	margin-top:2rem;
	overflow:hidden;
	border:1px solid #eee;
	margin-bottom:var(--secgap)
}

.reply_box:before {
	content: "";
	display:block;
	background-color:var(--theme-color);
	width:40px;
	height:60px;
	position:absolute;
	left:0;
	top:0;
	border-radius:10px 10px 30px 0;
}


.reply_head h3 {
	display:flex;
	flex-flow:row wrap;  
	font-family:var(--sub-font-B); 
	font-size:var(--text-lg);
	margin-bottom:var(--margin-m);
	color:var(--theme-color)
}


.reply_box:after {
	display:flex;
	align-items:center;
	justify-content:center;
	content: "";
	background-color:var(--color-w);
	-webkit-mask-image:url(/dgyouth/images/common/corner-down-right.svg);
	mask-image:url(/dgyouth/images/common/corner-down-right.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-size: 60%;
	mask-size: 60%;
	transition: 0.3s;
	display:block;
	width:40px;
	height:60px;
	position:absolute;
	left:0;
	top:0;
	border-radius:10px 10px 30px 0;
}