@charset "utf-8";
/* reset */
* { font-size: 14px; font-weight: 500; color: #707070; letter-spacing: -0.5px;}
body { line-height: 1.6; margin:0; padding:0; font-family:'Pretendard', sans-serif; color:#4f4e4f;}
h1, h2, h3, h4, h5, h6 { font-size:1em;}
h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, ul, ol, li, form, fieldset, blockquote, address, table, thead, tbody, tfoot, tr, td, caption, input { margin:0; padding:0;}
ul, ol { list-style:none;}
img { border:0;}
table { width:100%; border-collapse: collapse; font-size:1em;}
table caption {display:none;}
a:link, a:visited { color: #9b9b9b; text-decoration: none;}
a:hover { color: #fff; text-decoration: underline;}
fieldset { border:0;}
legend { display:none;}
select, input, textitem_list { font:normal 1em 'Pretendard', "애플고딕", AppleGothic, "굴림", gulim, Arial, Verdana, sans-serif; color:#797b80; vertical-align:middle;}
em { font-style: normal;}
hr { overflow:hidden; display: none; clear:both; visibility:hidden; height:0;}

/* content */
body   { background-color:#191919;}
.wrap  { width:1200px;margin:0 auto;padding: 50px 0 130px 0;-webkit-box-sizing:border-box;box-sizing:border-box}
iframe { width: 100%;}
.hide  { opacity: 0; text-indent: -999em; overflow: hidden; position: absolute; top: 0; left: 0; width: 0; height: 0; font-size: 0; line-height: 0;}
.cw    { color: #fff !important;}
.mt5   { margin-top: 5px;}
.unuse { text-decoration: line-through;}
.inner {width:1200px;margin:0 auto;-webkit-box-sizing:border-box;box-sizing:border-box}
main .inner .is_active {display: -webkit-box; display: -ms-flexbox; display: flex;}

/* header */
.visual 	 { position: relative; width: 100%; height: 650px;}
.visual_hide { position: absolute; bottom: 0; right: 0; width: 100%; height: 80px; background-color: #191919;}

/* footer */
footer 		  { border-top: 1px solid #383838;}
footer .inner { display: flex; justify-content: space-between; align-items:center; padding: 30px 20px;}

/* main */
main{margin-bottom: 80px;}

/* reveal */
.reveal 		   { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out; transition-delay: calc(var(--i, 0) * 0.2s);}
.reveal.is-visible { opacity: 1; transform: translateY(0);}

/* item_list */
.item_list	 	 { overflow: hidden; flex-direction: row; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; width: 100%;}
.item_list > li  {
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	flex-direction: column;
	width: calc((100% - 120px) / 3); margin: 10px; padding: 10px;
	background: linear-gradient(145deg, #1c1c1c 0%, #1d1d1d 100%); border: 1px solid #333333; border-radius: 10px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.15); vertical-align: top;
}
.item_list > li:nth-of-type(3) img { width: 250px;}
.item_list > li:nth-of-type(3):hover img { width: 250px;}
.item_list > li:nth-of-type(4) img { width: 250px;}
.item_list > li:nth-of-type(4):hover img { width: 250px;}

.item_list .thumb{
    position: relative; width: 100%; height: 265px; 
    display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    border-radius: 10px; -webkit-transition: all 0.15s; transition: all 0.15s;
}
.item_list .thumb:hover     { box-shadow:13px 19px 15px rgb(17 17 17 / 25%);-webkit-transform:rotate(-4deg) translateY(-5px);transform:rotate(-4deg) translateY(-5px)}
.item_list .thumb a 		{ display: block; width: 100%; text-align: center;}
.item_list .thumb img       { width: 300px; -webkit-transition: all 0.1s; transition: all 0.1s;}
.item_list .thumb:hover img { width: 340px;}
.item_list .thumb p         { position: absolute; bottom: 10px; display: block; width: 100%; padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; font-size: 12px; color: #898989;}

/* inbox_wrap */
.item_list .inbox_wrap  {
    display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column;
	height: calc(100% - 265px); min-height: 320px; padding:35px 30px;
	-webkit-box-sizing:border-box; box-sizing:border-box;
}
.inbox_wrap .tit   { margin-bottom: 5px; font-size: 25px; font-weight: 600; line-height: 1.3; color: #fff}
.inbox_wrap .tit p { font-size: 20px;}

.inbox_wrap .link 		{ padding-bottom: 20px;}
.inbox_wrap .link li    { display: block; line-height: 1.8;}
.item_list > li:hover .inbox_wrap .link li a { font-weight: 600; color: #fff;}
.inbox_wrap .sub         { display:block;/*width:calc(100% - 60px);*/ width: 100%; margin-top: auto;}
.inbox_wrap .sub .info   { display: block; width: 100%; color: #969696;}
.inbox_wrap .sub em 	 { display: inline-block; min-width: 30px; margin-top: 8px; padding: 0 8px; border-radius: 15px; line-height: 23px; font-weight: 500; text-align: center; vertical-align: top;}
.inbox_wrap .sub em + em { margin-right: 5px;}
.inbox_wrap .sub .tag1 	 { background-color: #303030; color: #b7b7b7;}
.inbox_wrap .sub .tag2 	 { background-color: #505050; color: #fff;}
.inbox_wrap .sub .tag3 	 { background-color: #fea32d; color: #fff;}

/* .dstrict */
.dstrict header	    { margin: 110px 0 90px; padding: 0 10px; text-align: center;}
.dstrict header *   { color: #fff;}
.dstrict header h1  { font-size: 50px;}
.dstrict header div { font-size: 16px; margin-top: 15px;}
.dstrict .item_list > li{width: calc((100% - 45px) / 2);}

@media screen and (max-width: 1200px) {
	.inner 			        { width: 800px; max-width: 90%;}
	.item_list > li         { width: calc((100% - 85px) / 2);}
	.dstrict .inner         { width: calc(100% - 10px); max-width: 100%;}
	.dstrict .item_list > li{ width: calc((100% - 45px) / 2);}
}
@media screen and (max-width: 768px) {
	.inner  				 { width: 100%; max-width: none;}
	.visual 				 { height: 440px;}
	.item_list > li 		 { width: calc(100% - 40px);}
	.dstrict .item_list > li { width: calc(100% - 40px);}
	.item_list .thumb img.trk{ width: 95%;}
	.item_list .inbox_wrap 	 { min-height: auto;}
	.inbox_wrap .tit 	 	 { font-size: 24px;}
	.inbox_wrap .link li 	 { font-size: 14px;}
}
@media screen and (max-width: 360px) {
	.item_list .thumb img  { width: 100%;}
	.item_list .inbox_wrap { padding: 25px 20px;}
}