/* gallery */
.hi_blue {background:url('../images/sub/intro1_field.png') 0 0 repeat; padding:5px 25px; box-sizing:border-box; font-size:20px; font-weight:600;/* text-align:center;*/ line-height:32px; color:#333; border:2px solid #9dd0ea; margin:0 10px 10px;}
.hi_story {*zoom:1; position:relative;}
.hi_story:after {content:" "; display:block; clear:both;}
.hi_story > div {float:left; width:50%; cursor:pointer;}
.hi_story > div .hi_cont {margin:10px; overflow:hidden; position:relative; width: 575px;height: 300px; background-repeat:no-repeat; background-position:0 0;background-size: 100%; }
.hi_cont .con_box {width:100%; height:100%; display:table; text-align:center; padding:20px; box-sizing:border-box; position:relative; 
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
}

.hi_cont .con_box:hover {background-color:rgba(0,0,0,0.5);}
.hi_cont .con_box p {position:absolute; left:0; bottom:0; font-size:24px; background:rgba(44,90,175,0.8); text-align:center; width:100%; color:#fff; padding:6px 2px; box-sizing:border-box; letter-spacing:-0.04em;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
}
.hi_cont .con_box p span {}


.hi_cont .con_box .box_ver {vertical-align:middle; display:table-cell; position:relative;}

.hi_story > div:hover .box_ver {
	background-repeat: no-repeat;
    background-image:   linear-gradient(to right, #fff 100%, #fff 100%),
                        linear-gradient(to bottom, #fff 100%, #fff 100%),
                        linear-gradient(to right, #fff 100%, #fff 100%),
                        linear-gradient(to bottom, #fff 100%, #fff 100%);
    background-size:    100% 1px,
                        1px 100%,
                        100% 1px,
                        1px 100%;
    background-position:    0 0,
                            100% 0,
                            100% 100%,
                            0 100%;
    animation: bg 1.25s ;
}
@keyframes bg {
	0% {
		background-size:0 1px,
						1px 0,
						0 1px,
						1px 0;
	}
	25% {
		background-size:100% 1px,
						1px 0,
						0 1px,
						1px 0;
	}
	50% {
		background-size:100% 1px,
						1px 100%,
						0 1px,
						1px 0;
	}
	75% {
		background-size:100% 1px,
						1px 100%,
						100% 1px,
						1px 0;
	}
	100% {
		background-size:100% 1px,
						1px 100%,
						100% 1px,
						1px 100%;
	}

}
/*.hi_cont .con_box .box_ver p {font-size:28px; font-weight:600; color:#fff; letter-spacing:-0.03em;}*/
.hi_cont .con_box .box_ver > span {display:inline-block; /*display:table-cell;*/ line-height:48px; border:1px solid #fff; font-size:15px; font-weight:400; color:#fff; letter-spacing:-0.03em; min-width:248px; display:none; 
	margin:0 0 0;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
}
.hi_story > div:hover .hi_cont .con_box .box_ver > span {display:inline-block; background:#fff; color:#000;}
.hi_story > div:hover .con_box p {display:none;}

/* etc1 */
.hi_story .hi_etc {background:#fff; padding:20px; float:none; width:315px; height:315px; box-sizing:content-box; 
	position:absolute;
	top:20%; left:50%;
	z-index:10;
	margin-left:-175px;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
}
.hi_story .hi_etc .etc_box {
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	background-color: #e50f0a; 
	width:100%; 
	height:100%;
	background-image: url('../images/sub/snow1-1.png'), url('../images/gallery/snow2.png'), url('../images/gallery/snow3.png');
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
	box-shadow:inset 0 5px 10px #8c0a07;
	-webkit-box-shadow:inset 0 5px 10px #8c0a07;
	-moz-box-shadow:inset 0 5px 10px #8c0a07;
	-ms-box-shadow:inset 0 5px 10px #8c0a07;
	-o-box-shadow:inset 0 5px 10px #8c0a07;
}
.charc {position:relative; width:100%; height:100%;}
.charc .head{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -80px;
  z-index:2;
  animation:music-move 1.3s 1s infinite alternate ease-in-out;
  -webkit-animation:music-move 1.3s 1s infinite alternate ease-in-out;
}
.charc .body {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top:35px;
	margin-left:-28px;
	z-index:1;
}
.charc .etc_btn {
	text-align:center;
	position:absolute; 
	bottom:59px;
	left:50%;
	margin-left:-75px;
}
.charc .etc_btn a {
	display:inline-block;
	padding:0 25px;
	line-height:42px;
	font-size:20px; 
	font-weight:800;
	color:#000;
	background:#fff727;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	-ms-border-radius:20px;
	-o-border-radius:20px;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
}
.charc .etc_btn a:hover {
	background:#ffde27;
}
.charc .etc_btn a span {
	display:inline-block; 
	margin:0 0 0 30px; 
	vertical-align:middle;
}
.charc .etc_btn a span img {
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	position:relative;
	right:0;
}
.charc .etc_btn a:hover span img {
	right:-5px;
}
@keyframes music-move{
	0% { 
	  -webkit-transform: rotate(0deg) translateZ(0);
	  transform: rotate(0deg) translateZ(0);
	} 
	33% {  
	  -webkit-transform: rotate(-5deg) translateZ(0);
	  transform: rotate(-5deg) translateZ(0);
	}
	66% {  
	  -webkit-transform: rotate(5deg) translateZ(0);
	  transform: rotate(5deg) translateZ(0);
	}
	100% {  
	  -webkit-transform: rotate(0deg) translateZ(0);
	  transform: rotate(0deg) translateZ(0);
	}
}

@-webkit-keyframes music-move /* Safari and Chrome */{
	0% { 
	  -webkit-transform: rotate(0deg) translateZ(0);
	  transform: rotate(0deg) translateZ(0);
	}
	33% {  
	  -webkit-transform: rotate(-5deg) translateZ(0);
	  transform: rotate(-5deg) translateZ(0);
	}
	66% {  
	  -webkit-transform: rotate(5deg) translateZ(0);
	  transform: rotate(5deg) translateZ(0);
	}
	100% {  
	  -webkit-transform: rotate(0deg) translateZ(0);
	  transform: rotate(0deg) translateZ(0);
	}
}

.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#e50f0a;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

/* etc2 */
.hi_story .hi_etc2 {float:none; box-sizing:content-box; padding:20px;
width:316px; height:316px;
	position:absolute;
	top:20%; left:50%;
	z-index:10;
	margin-left:-175px;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
}
.hi_story .hi_etc2 .etc_box2 {
	width:100%; 
	height:100%;
	background-image: url('../images/gallery/flower4-2.png'), url('../images/gallery/flower4-3.png');
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	overflow:hidden;
}
.hi_story .hi_etc2 .etc_box2 > img {position:absolute; z-index:-1;}
.charc2 {position:relative; width:100%; height:100%;}
.charc2 .etc_btn2 {
	position:absolute; 
	bottom:38px;
	left:50%;
	margin-left:-61px;
}
.charc2 .etc_btn2 a {
	text-align:center;
	line-height:52px;
	font-size:16px;
	font-weight:600;
	color:#fff;
	letter-spacing:-0.03em;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	display:block;
}

.charc2 .etc_btn2 a span {
	display:inline-block; 
	margin:-5px  0 0 10px; 
	vertical-align:middle;
}
.charc2 .etc_btn2 a span img {
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	position:relative;
	right:0;
}
.charc2 .etc_btn2 a:hover span img {
	right:-5px;
}

/* 하이스토리 view1 (cate별 분류) */
.hi_story2 h3 {*zoom:1; font-size:40px; font-weight:800; color:#111; letter-spacing:-0.03em; margin:0 0 25px 0; text-align:center;}
.hi_story2 h3:after {content:" "; display:block; clear:both;}
.hi_story2 h3 a {display:inline-block;}
.hi_story2 h3 a, .hi_story2 h3 .listTitle {display:inline-block; vertical-align:middle;}
.hi_story2 h3 .listTitle {text-align:center; width:70%; float:left; word-break:keep-all;}
.hi_story2 h3 a.Listprev {float:left; width:15%; text-align:left;}
.hi_story2 h3 a.Listnext {float:right; width:15%; text-align:right;}
.hi_story2 h3 .listDate{display:block;clear:both;text-align:center;font-weight:400;font-size:15px;letter-spacing:0;color:#aaa;padding:10px 0 0 0;}
.hi_story2 h3 .listDate img{margin:0px 5px 0 0;vertical-align:middle;}
.hi_story2 h3 .listDate .imbar{color:#ddd;}
.hi_story2  .icons {width:100%; text-align:center;margin:0 0 50px 0;}


.hi_story2 .btnCenter {text-align:center; margin:50px 0 0;}
.hi_story2 .btnCenter a.black {display:inline-block; padding:0 80px; line-height:55px; background:#111; font-size:18px; font-weight:600; color:#fff; letter-spacing:-0.03em;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	-ms-border-radius:50px;
	-o-border-radius:50px;
}
.hi_story2 .btnCenter a.black:hover {background:#4f4f4f;}
.hi_storyView {padding:60px 50px; background:#f3f3f3; float:none; width:100%; box-sizing:border-box;}
.hi_storyView h4 {text-align:center; font-size:30px; font-weight:600; color:#111; letter-spacing:-0.03em; line-height:30px; margin:0 0 50px 0;}
.hi_storyView .fileBox {text-align:right;}
.hi_storyView .fileBox a{ display:block;font-size:16px; color:#629ddb;transition:all .3;-webkit-transition:all .3;-ms-transition:all .3;-moz-transition:all .3;-o-transition:all .3;}
.hi_storyView .fileBox a:hover, .hi_storyView .fileBox a:focus{color:#3f8ad9;}
.hi_storyView .fileBox a img{margin:0 5px 0 0;}
.normal p {font-size:20px; color:#111; line-height:32px; letter-spacing:-0.03em;}
.normal p img {max-width:100%; height:auto;}
.hi_storyCate {*zoom:1;}
.hi_storyCate:after {content:" "; display:block; clear:both;}
.hi_storyCate .cateBox {float:left; cursor:pointer; width:25%;}
.hi_storyCate .cateBox div {margin:0 10px 20px;}
.hi_storyCate .cateBox div .thumb {display:block; height:260px; overflow:hidden;}
.hi_storyCate .cateBox div .thumb img {max-width:100%; height:100%; obeject-fit:cover;
	-webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
.hi_storyCate .cateBox div:hover .thumb img {transform:scale(1.1);}
.hi_storyCate .cateBox div p {*zoom:1; padding:20px 25px; background:#fff; overflow:hidden; box-sizing:border-box; height:90px;}
.hi_storyCate .cateBox div p:after {content:" "; display:block; clear:both;}
.hi_storyCate .cateBox div p .txt {float:left; display:block; width:70%; font-size:16px; font-weight:600; color:#111; line-height:24px; letter-spacing:-0.03em; height:46px; overflow:hidden; word-break:keep-all;}
.hi_storyCate .cateBox div p .decoimg {float:right; display:block; width:40px; height:40px;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	background-image:url('../images/gallery/gray_go.png');
	background-repeat:no-repeat;
	background-position:0 0;
}
.hi_storyCate .cateBox div:hover p .decoimg {background-image:url('../images/gallery/gray_go_ov.png');}
.dragCenter {text-align:center; margin:0 0 25px 0;}
.dragCenter span {display:inline-block; vertical-align:middle;}
.dragCenter .dragL, .dragCenter .dragR {position:relative;}
.rotate_btn{text-align:center;margin:0 0 20px 0;}
.rotate_btn a{display:inline-block; margin:0 5px;}
.rotate_btn a img{vertical-align:middle;}



/* 이전글, 다음글 */
.titlelist {margin:20px 0; border-top:1px solid #bbb; border-bottom:1px solid #bbb;}
.titlelist tr:first-child {border-bottom:1px solid #ddd;}
.titlelist tr th {font-size:15px; background:#f3f3f3; padding:20px 0;}
.titlelist tr td {font-size:15px; padding:0 30px;}


/* 하이스토리 detail view */
#detailStory .sp-thumbnail {
	width: 100%;
	background-color: #F0F0F0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#detailStory .sp-thumbnail-title {
	margin-bottom: 5px;
	text-transform: uppercase;
	color: #333;
}

#detailStory .sp-thumbnail-description {
	font-size: 14px;
	color: #333;
}

@media (max-width: 860px) {
	#detailStory .hide-medium-screen {
		display: none;
	}
}

@media (max-width: 640px) {
	#detailStory .sp-layer {
		font-size: 12px;
	}

	#detailStory .hide-small-screen {
		display: none;
	}
}

@media (max-width: 500px) {
	#detailStory .sp-thumbnail {
		text-align: center;
		height:100% !important;
	}
	#detailStory .sp-thumbnail-title {
		font-size: 12px;
		text-transform: uppercase;
	}

	#detailStory .sp-thumbnail-description {
		display: none;
	}
}



/* --------------------------------------------- */

@media screen and (max-width:640px) {

	/* gallery */
	.hi_blue {padding:15px; font-size:16px; line-height:25px; margin:0 0 20px 0;}

	.hi_story > div {float:none; width:100%; margin:0 0 5px 0;}
	.hi_story > div .hi_cont {margin:0; width:100%; height:300px; background-size:cover; background-position:center;}
	.hi_cont .con_box p {font-size:16px; word-break:keep-all;}


	.hi_cont .con_box .box_ver {vertical-align:middle; display:table-cell; position:relative;}
	.hi_cont .con_box .box_ver > span {display:inline-block; /*display:table-cell;*/ line-height:48px; border:1px solid #fff; font-size:15px; font-weight:400; color:#fff; letter-spacing:-0.03em; min-width:248px; display:none; margin:0 0 0;}
	.hi_story > div:hover .hi_cont .con_box .box_ver > span {display:inline-block; background:#fff; color:#000;}
	.hi_story > div:hover .con_box p {display:none;}

	.hi_storyView {padding:10px;}
}
@media screen and (max-width:320px) {


}



/* ---------------------------------- 바둑판식 갤러리로 수정요청 20.11.03 ------------------------------------------------------- */
.hi_story3 {padding:0 0 100px 0;}
.hi_story3 h3 {*zoom:1; font-size:40px; font-weight:800; color:#111; letter-spacing:-0.03em; margin:0 0 50px 0; text-align:center;}
.hi_story3 h3:after {content:" "; display:block; clear:both;}
.hi_story3 > div {*zoom:1;}
.hi_story3 > div:after {content:""; display:block; clear:both;}
.hi_story3 > div .picture {float:left; width:23%; height:180px; margin:0 1% 25px; overflow:hidden;}
.hi_story3 > div .picture a {display:block; width:100%; height:100%; text-align:center;}
.hi_story3 > div .picture a img { obeject-fit:cover;
	-webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
.hi_story3 > div .picture:hover a img {transform:scale(1.02);}
.hi_story3 .page_btn {text-align:center; margin:40px 0 0 0;}
.hi_story3 .page_btn a {display:inline-block; width:30px; height:30px; line-height:30px; border:1px solid #ddd; margin:0 2px; font-size:14px; font-weight:500; color:#999;}
.hi_story3 .page_btn a:hover, .hi_story3 .page_btn a.on {background:#333; color:#fff;}
.hi_story3 .btnCenter {text-align:center; margin:40px 0 0;}
.hi_story3 .btnCenter a.black {display:inline-block; padding:0 80px; line-height:55px; background:#111; font-size:18px; font-weight:600; color:#fff; letter-spacing:-0.03em;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	-ms-border-radius:50px;
	-o-border-radius:50px;
}
.hi_story3 .btnCenter a.black:hover {background:#4f4f4f;}

@media screen and (max-width:640px) {

	/* ---------------------------------- 바둑판식 갤러리로 수정요청 20.11.03 ------------------------------------------------------- */
	.hi_story3 h3 {font-size:30px; margin:0 0 30px 0;}
	.hi_story3 > div .picture {width:48%; height:100px; margin:0 1% 10px;}
	.hi_story3 .page_btn {text-align:center; margin:40px 0 0 0;}
	.hi_story3 .page_btn a {width:20px; height:20px; line-height:20px; font-size:12px;}



}