*{ box-sizing: border-box; }
figure{ display: inline-block; margin: 0; }
select::-ms-expand { display: none; }
select { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none;
	outline: none;
}
input{ outline: none; border: none; }
input[type="submit"],input[type="button"], input[type="file"],
input[type="text"], button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0;-webkit-border-radius: 0; -moz-border-radius: 0; }
input[type="checkbox"]{ padding: 0 !important; }


/* paging */
.paging{ display: flex; justify-content: center; align-items: center; margin-top: 100px; }
.paging a{ display: flex; background: none !important; border: none !important; font-size: 18px; font-weight: 500; color: #999; letter-spacing: -0.02em; padding: 15px; }
.paging ul{ display: flex; margin: 0 3px; }
.paging ul li.on a{ color: #222; }

.paging .arr{ display: flex; align-items: center; }
.paging .arr a{ padding: 12px; }
.paging .arr a i{ transform: translate(0, 0) !important; }
.paging .arr a i:not(:last-of-type){ margin-right: -1px; }
.paging .arr a i::before{ content: ""; display: inline-block; width: 8px; height: 13px; }
.paging .arr a i.xi-angle-left-min::before{ background: url("/img/board/paging_prev.svg") no-repeat center center / contain; }
.paging .arr a i.xi-angle-right-min::before{ background: url("/img/board/paging_next.svg") no-repeat center center / contain; }

@media screen and (max-width: 1700px){
	.paging{ margin-top: 70px; }
	.paging a{ padding: 12px; }
}

@media screen and (max-width: 1280px){
	.paging{ margin-top: 50px; }
	.paging a{ font-size: 17px; padding: 10px; }
	.paging ul{ margin: 0; }

	.paging .arr{ transform: translateY(-2px); }
	.paging .arr a{ padding: 10px; }
	.paging .arr a i::before{ width: 7px; }
}


/* PROJECT - list */
#project{ padding-top: 20px; }
#project .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -9px -5px; }
#project .grid-box > *{ margin: 9px 5px; }

#project .item .img{ position: relative; padding-bottom: 75%; }
#project .item figure{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
#project .item figure::after{ content: ""; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.15); position: absolute; top: 0; left: 0; z-index: 10; opacity: 0; transition: opacity 0.4s; }
#project .item figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); filter: grayscale(1); -webkit-filter: grayscale(1); transition: transform 0.4s, filter 0.4s; }
#project .item h6{ font-size: 14px; font-weight: 500; color: #111; letter-spacing: -0.02em; text-align: right; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 2px; }

@media screen and (hover: hover) and (pointer: fine){
	#project .item:hover figure::after{ opacity: 1; }
	#project .item:hover figure img{ transform: translate(-50%, -50%) scale(1.05); filter: grayscale(0); -webkit-filter: grayscale(0); }
}

@media screen and (max-width: 1000px){
	#project .grid-box{ grid-template-columns: repeat(2, 50%); }
}


/* PROJECT - detail */
#detail{
	--side: 100px;	
	--small: 85px;
}
#detail{ padding-top: 80px; overflow: hidden; }
#detail .inner{ max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 var(--side); }
#detail .relative{ position: relative; }
#detail .btns{ width: calc(100% + (var(--side) * 2)); display: flex; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#detail .btns button{ width: 60px; height: 60px; background: #FFF; border: 1px solid #444; border-radius: 50%; padding: 0; }

#detail .tit{ position: relative; margin-bottom: 20px; }
#detail .tit h2{ font-family: var(--korFont); font-size: 21px; font-weight: 700; color: #222; letter-spacing: -0.02em; }
#detail .tit .btns{ display: none; }

#detail .big{ display: flex; justify-content: center; align-items: center; }
#detail .big figure, 
#detail .big figure img{ width: 100%; }

#detail .bottom{ margin-top: 10px; }
#detail .small-wrapper{ width: 100%; display: flex; }
#detail .small-wrapper .slick-list{ margin-right: -10px; }
#detail .small{ min-width: var(--small); width: var(--small); margin-right: 10px; cursor: pointer; }
#detail .small figure, 
#detail .small figure img{ height: var(--small); }
#detail .small figure{ height: var(--small); display: block; position: relative; overflow: hidden; }
#detail .small figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 0; left: 0; opacity: 1; }
#detail .small figure img{ max-width: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#detail .small.on figure::after{ opacity: 0; }

#detail .listBtn{ margin-top: 60px; }

@media screen and (max-width: 1700px){
	#detail{
		--side: 80px;	
		--small: 75px;
	}

	#detail .btns button{ width: 55px; height: 55px; }
}

@media screen and (max-width: 1280px){
	#detail{
		--side: 70px;	
		--small: 65px;
	}
	#detail .btns button{ width: 50px; height: 50px; }

	#detail .tit h2{ font-size: 19px; }

	#detail .listBtn{ margin-top: 40px; }
}

@media screen and (max-width: 900px){
	#detail .inner{ padding: 0; }

	#detail .tit h2{ min-height: 55px; display: flex; align-items: center; padding: 0 var(--side); }
	#detail .tit .btns{ width: 100%; display: flex; }

	#detail .relative .btns{ display: none; }
}


/* 이미지 게시판 */
.img-board{ 
	--gapB: 80px; 
	--gapR: 30px; 
	--line: 3;
}
.img-board{ display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gapB) * -1); }
.img-board .item{ width: calc((100% - calc(var(--gapR) * (var(--line) - 1))) / var(--line)); margin-right: var(--gapR); margin-bottom: var(--gapB); }
.img-board .item:nth-of-type(3n){ margin-right: 0; }
.img-board .item .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 57.537%; margin-bottom: -5px; }
.img-board .item .figure figure::after{ content: ""; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s; }
.img-board .item .figure figure img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: filter 0.4s; }

.img-board .item .txt{ margin-top: 20px; }
.img-board .item .txt h6{ height: 3em; display: -webkit-box; font-size: 20px; font-weight: 500; color: #222; letter-spacing: -0.02em; line-height: 1.5; word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.img-board .item .txt p{ font-size: 14px; font-weight: 300; color: #999; letter-spacing: -0.02em; margin-top: 10px; }

@media screen and (hover: hover) and (pointer: fine){
	.img-board .item:hover .figure figure::after{ opacity: 1; }
	.img-board .item:hover .figure figure img{ filter: unset; -webkit-filter: unset; }
}

@media screen and (max-width: 1700px){
	.img-board{ 
		--gapB: 60px; 
	}
	.img-board .item .txt{ margin-top: 15px; }
	.img-board .item .txt h6{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	.img-board{ 
		--gapB: 40px; 
		--gapR: 20px; 
	}

	.img-board .item .txt{ margin-top: 10px; }
	.img-board .item .txt h6{ font-size: 17px; }
}

@media screen and (max-width: 900px){
	.img-board{ 
		--line: 2;
	}
	.img-board .item:nth-of-type(3n){ margin-right: var(--gapR); }
	.img-board .item:nth-of-type(2n){ margin-right: 0; }
}



/* 상세 페이지 */
.view-ctn{
	--gap: 40px;
	--border: 1px solid #DDD;
}

.view-ctn .tit{ border-bottom: var(--border); padding-bottom: var(--gap); }
.view-ctn .tit h2{ font-size: 4.4rem; font-weight: 600; color: #111; letter-spacing: -0.02em; margin-bottom: 20px; }
.view-ctn .tit ul{ display: flex; flex-wrap: wrap; margin: -5px -15px; }
.view-ctn .tit ul li{ font-size: 18px; font-weight: 300; color: #666; letter-spacing: -0.02em; margin: 5px 15px; }
.view-ctn .tit ul li span{ font-weight: 500; margin-right: 10px; }

.view-ctn .edit-content{ font-size: 18px; padding: var(--gap) 0; }

.view-ctn .file-box{ border-top: var(--border); border-bottom: var(--border); padding: 10px 0; margin-bottom: var(--gap); }
.view-ctn .file-box ul li a{ display: block; font-size: 18px; font-weight: 300; color: #666; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 10px 0; padding-left: 27px; position: relative; }
.view-ctn .file-box ul li a::before{ content: ""; width: 20px; height: 20px; background: url("/img/board/view_file.svg") no-repeat center center / contain; position: absolute; top: 45%; left: 0; transform: translateY(-50%); }

.view-ctn .page-box{ position: relative; }
.view-ctn .page-box div{ display: flex; justify-content: space-between; }
.view-ctn .page-box dl{ width: calc((100% - var(--btnW) - (var(--gap) * 2)) / 2); display: flex; align-items: center; font-size: 19px; letter-spacing: -0.02em; }
.view-ctn .page-box dl dt{ width: 150px; font-weight: 600; color: #111; position: relative; padding: 0 40px; }
.view-ctn .page-box dl dt i{ width: 19px; height: 15px; position: absolute; top: 50%; transform: translateY(-55%); }
.view-ctn .page-box dl dd{ width: calc(100% - 150px); height: var(--btnH); display: flex; align-items: center; }
.view-ctn .page-box dl dd a{ width: 100%; display: block; font-weight: 300; color: #555; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.view-ctn .page-box dl:first-of-type dt{ padding-right: 0; }
.view-ctn .page-box dl:first-of-type dt i{ background: url("/img/board/view_prev.svg") no-repeat center left / contain; left: 0; }

.view-ctn .page-box dl:last-of-type{ flex-direction: row-reverse; text-align: right; }
.view-ctn .page-box dl:last-of-type dt{ padding-left: 0; }
.view-ctn .page-box dl:last-of-type dt i{ background: url("/img/board/view_next.svg") no-repeat center right / contain; right: 0; }

.view-ctn .page-box .listBtn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (max-width: 1700px){
	.view-ctn .tit ul{ margin: -5px -10px; }
	.view-ctn .tit ul li{ font-size: 17px; margin: 5px 10px; }

	.view-ctn .file-box ul li a{ font-size: 17px; padding-left: 25px; }
	.view-ctn .file-box ul li a::before{ width: 18px; height: 18px; }

	.view-ctn .page-box dl{ font-size: 18px; }
	.view-ctn .page-box dl dt{ width: 120px; padding: 0 35px; }
	.view-ctn .page-box dl dt i{ width: 17px; transform: translateY(-50%); }
	.view-ctn .page-box dl dd{ width: calc(100% - 120px); }
}

@media screen and (max-width: 1280px){
	.view-ctn{
		--gap: 30px;
	}
	.view-ctn .tit h2{ margin-bottom: 15px; }
	.view-ctn .tit ul{ margin: -5px -8px; }
	.view-ctn .tit ul li{ font-size: 16px; margin: 5px 8px; }
	.view-ctn .tit ul li span{ margin-right: 7px; }

	.view-ctn .edit-content{ font-size: 17px; }

	.view-ctn .file-box{ padding: 8px 0; }
	.view-ctn .file-box ul li a{ font-size: 16px; padding: 8px 0; padding-left: 21px; }
	.view-ctn .file-box ul li a::before{ width: 16px; height: 16px; }

	.view-ctn .page-box dl{ font-size: 17px; }
	.view-ctn .page-box dl dt{ width: 100px; }
	.view-ctn .page-box dl dd{ width: calc(100% - 100px); }	
}

@media screen and (max-width: 1000px){
	.view-ctn .page-box div{ flex-direction: column; border-top: var(--border); border-bottom: var(--border); padding: 7px 0; }
	.view-ctn .page-box dl{ width: 100%; }
	.view-ctn .page-box dl dd{ height: auto; }
	.view-ctn .page-box dl dd a{ padding: 10px 0; }

	.view-ctn .page-box dl:last-of-type{ flex-direction: row; text-align: left; }
	.view-ctn .page-box dl:last-of-type dt{ padding-right: 0; padding-left: 35px; }
	.view-ctn .page-box dl:last-of-type dt i{ left: 0; right: unset; }

	.view-ctn .page-box .listBtn{ position: static; transform: unset; margin-top: 30px; }
}

@media screen and (max-width: 900px){
	.view-ctn{
		--gap: 20px;
	}

	.view-ctn .tit h2{ font-size: 5rem; }

	.view-ctn .page-box dl{ font-size: 16px; }
	.view-ctn .page-box dl dt{ padding-left: 30px !important; }
	.view-ctn .page-box dl dt i{ width: 15px; top: 45%; }
}