.award-wrap{padding:var(--gap-140) 0; width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width); margin:0 auto;}
.award-wrap > h1{font-size:var(--font-size-xxxxxlarge); font-weight: 600; line-height: 150%; text-align: center; width:calc(100% - var(--layout-flax-margin)); margin:0 auto;}
.award-wrap > .stlt{color:var(--color-font); font-size:var(--font-size-medium); text-align: center;}
.award-wrap > h1 > br{display:none;}
.award-wrap > .archive{margin:var(--gap-30) auto 0 auto; width:113px; height: 46px; background-color:#000; display:flex; border-radius: 23px; align-items: center; justify-content: center; color:#fff; font-weight: 500;}
.award-wrap > .head-image-wrap{width:100%; height:471px; position:relative; display:flex; align-items: center; justify-content: center; margin-top:var(--gap-80); background:url("/project/templates/image/thisyear/head_image.png") center; background-size: cover;}
.award-wrap > .head-image-wrap > p > br{display:none;}
.award-wrap > .head-image-wrap > p{color:#fff; font-size:var(--font-size-large); text-align: center; position:relative; z-index: 1; width:calc(100% - var(--layout-flax-margin))}
.award-wrap > .head-image-wrap > div{position:absolute; top:0; width:25%; background-color:#fff;}
.award-wrap > .head-image-wrap > .left{left:0; height: inherit; z-index: 2;}
.award-wrap > .head-image-wrap > .right{right:0; height: inherit; z-index: 2;}

.award-wrap .head-wrap{display:flex; flex-wrap: wrap;  align-items: center; justify-content: space-between;}
.award-wrap .head-wrap > p{color:var(--color-font); font-size:var(--font-size-normal);}
.award-wrap .head-wrap > p > span{color:var(--color-primary); font-weight: 600;}
.award-wrap .head-wrap > .thumbnail-search-wrap{width:236px; display:flex; align-items: center; border-bottom:1px solid var(--color-border); padding:5px 0; background-color:transparent;}
.award-wrap .head-wrap > .thumbnail-search-wrap > input{border:none; background-color:transparent; width:calc(100% - 26px); height: 25px;}

.sort-wrap{display:flex; margin-top:var(--gap-140); align-items: center; justify-content: flex-end;}
.sort-wrap > a{font-size:var(--font-size-medium); color:var(--color-font); margin-right:var(--gap-20); font-weight: 500;}
.sort-wrap > a:last-child{margin-right:0;}
.sort-wrap > a.on{color:#000; font-weight: 600;}
.hr{margin:var(--gap-40) 0; height: 1px; width:100%; }

#read-content{z-index: 10; position:fixed; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); top:0; left:0;}
#read-content.on{width:100%; height: 100%;}
#read-content .contents-wrap{width:100%; height: 100%; display:flex;  position:fixed; top:0; left:0; z-index: 10; overflow-y:scroll; scrollbar-width: none; /* Firefox에서 세로 스크롤바 숨기기 */
    -ms-overflow-style: none; /* IE 10+에서 세로 스크롤바 숨기기 */}
#read-content .closeBtn{position:absolute; right:var(--layout-side-margin); top:var(--layout-side-margin); cursor:pointer; padding:10px;}
#read-content .contents-wrap .inner-wrap{width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width); margin:0 auto; padding:var(--gap-40) 0; display: grid; grid-template-columns: calc(74% - 30px) 26%; grid-gap:0 30px;  height: auto; max-height: none;}
#read-content .contents-wrap::-webkit-scrollbar {
    display: none; /* 웹킷 기반 브라우저에서 세로 스크롤바 숨기기 */
}
#board-grid-wrap .box-wrap{position:relative;}
#board-grid-wrap .box-wrap > .prize-wrap{position:absolute; left:15px; top:-20px; background-color:rgba(0,0,0,0.8); padding:15px 10px; box-sizing: border-box; text-align: center; display:flex; flex-wrap: wrap; flex-direction: column-reverse; min-height: 120px; z-index: 3; max-width:65px;}
#board-grid-wrap .box-wrap > .prize-wrap > .year{color:#AEAEAE; font-size:var(--font-size-xsmall); width:100%; line-height: 127%;}
#board-grid-wrap .box-wrap > .prize-wrap > .hr{width:27px; height: 1px; background-color:#4D4D4D; margin:10px auto;}
#board-grid-wrap .box-wrap > .prize-wrap > .prize{color:#fff; font-size:var(--font-size-xsmall); font-weight: 500; width:100%; line-height: 127%;}

#read-content .contents-wrap .inner-wrap .box-wrap > .tlt{color:#fff; text-align:center; margin-bottom:var(--gap-40); font-size:var(--font-size-large);}
#read-content .contents-wrap .inner-wrap .box-wrap > .image-wrap { position: relative; overflow: hidden; width: 100%; height: calc(100% - 42px); display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0,0.5); border:1px solid #404040;}
#read-content .contents-wrap .inner-wrap .box-wrap:nth-child(3){max-height:597px;}

#read-content .contents-wrap .inner-wrap .box-wrap > .image-wrap img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; opacity: 1; transition: clip-path 0.5s ease-in-out, opacity 0.5s ease-in-out; clip-path: inset(0% 0% 0% 0%); }

#read-content .contents-wrap .inner-wrap .box-wrap > .image-wrap img.hidden { clip-path: inset(50% 50% 50% 50%); opacity: 0; }

#read-content .contents-wrap .inner-wrap .box-wrap > .image-wrap img.visible { clip-path: inset(0% 0% 0% 0%); opacity: 1; }

#read-content .contents-wrap .source{font-size:var(--font-size-small); color:#fff; margin:5px 0;}

/*#read-content .contents-wrap .inner-wrap > .box-wrap > .image-wrap:after{content:""; display:block; clear:both; padding-top:69%;}*/
#read-content .contents-wrap .inner-wrap .box-wrap > .controll-wrap{display:flex; align-items: center; justify-content: space-between; }
#read-content .contents-wrap .inner-wrap .box-wrap > .controll-wrap .page-location{display:flex; align-items: center;}
#read-content .contents-wrap .inner-wrap .box-wrap > .controll-wrap .page-location > p{font-size:var(--font-size-large); color:var(--color-font);}
#read-content .contents-wrap .inner-wrap .box-wrap > .controll-wrap .page-location > p:nth-child(2){margin:0 5px;}
#read-content .contents-wrap .inner-wrap .box-wrap > .controll-wrap .page-location > p.on{color:#fff; font-weight:600;}
#read-content .contents-wrap .inner-wrap .box-wrap > .controll-wrap > .arrow-wrap{display:flex; align-items: center; justify-content: space-between; width:60px;}
#read-content .contents-wrap .inner-wrap .box-wrap > .controll-wrap > .arrow-wrap > a{padding:10px;}

#read-content .contents-wrap .inner-wrap .box-wrap > ul{border-bottom:1px solid #545454; padding-bottom:var(--gap-15); margin-bottom:var(--gap-15);}
#read-content .contents-wrap .inner-wrap .box-wrap > ul:last-child{margin-bottom:0; border-bottom:none;}
#read-content .contents-wrap .inner-wrap .box-wrap > ul > li.tlt{color:var(--color-font); font-size:var(--font-size-normal); margin-bottom:5px;}
#read-content .contents-wrap .inner-wrap .box-wrap > ul > li.cont{color:#fff; white-space: pre-line;}
#read-content .contents-wrap .inner-wrap .box-wrap > ul:last-child > li.cont{padding-bottom:var(--gap-40);}

/* 로딩 스피너 스타일 */
#loader > p{color:#fff; position:absolute; left:50%; top:calc(50% + 70px); transform: translate(-50%,-50%); font-size:var(--font-size-normal); text-align: center;}
.spinner {
    border: 3px solid #838383; /* Light grey */
    border-top: 3px solid #fff; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: calc(50% - 23px);
    transform: translate(-50%, -50%);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shrink {
    0% { transform: scale(1); }
    50% { transform: scale(0); }
    100% { transform: scale(1); }
}

@media only screen and (max-width:1000px){
	#read-content .contents-wrap .inner-wrap{grid-template-columns: repeat(1,1fr)}
	#read-content .contents-wrap{align-items: flex-start; padding:var(--gap-140) 0;}
	#read-content .contents-wrap .inner-wrap .box-wrap:nth-child(3){min-height: 350px;}
	#read-content .contents-wrap .inner-wrap .box-wrap:nth-child(4){margin-top:var(--gap-40);}
	
}


@media only screen and (max-width:853px){
	.sort-wrap{overflow-x:scroll; width:100%; justify-content: flex-start; flex-shrink: 0; -ms-overflow-style: none;  /* IE와 Edge에서 스크롤바를 숨김 */
    scrollbar-width: none;  /* Firefox에서 스크롤바를 숨김 */ }
	.sort-wrap::-webkit-scrollbar {
    display: none; /* 웹킷 브라우저에서 스크롤바를 숨김 */
}
	.sort-wrap > a:first-child{min-width:73px !important;}
	.sort-wrap > a:nth-child(5){min-width:115px;}
}


@media only screen and (max-width:640px){
	.award-wrap > .head-image-wrap{height: 350px;}
	#board-grid-wrap .box-wrap > .prize-wrap{min-height: 100px; top:-10px;}
}

@media only screen and (max-width:540px){
	.award-wrap > h1 > br{display:block;}
}

@media only screen and (max-width:425px){
	.award-wrap > .head-image-wrap > p > br{display:block;}
}