@charset "UTF-8";

/* paging--------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
.paging { margin-top:95rem; }
.paging a, .paging strong { font-family:'a2z' !important; border:none ;  }
.paging a { color:#818894 ; }
.paging strong { position:relative; color:#fff; background:none;  }
.paging strong:before { position:absolute; content:''; width:16px; height:2px; background:#fff; bottom:0; left:50%; transform:translateX(-50%); }

.paging a:hover { background:none; border:none; color:#fff; }


/* none --------------------------------------- */
.none { background:#041129;position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.none img { width:auto !important; height:auto !important; }

/* border--------------------------------------- */
/* --------------------------------------- */
/* --------------------------------------- */
.border-top { display:flex; justify-content:space-between; margin-bottom: 110rem; flex-wrap:wrap;}
.border-top .lft { font-size:15rem; display:flex; }
.border-top .lft span { display:flex; align-items:center; }
.border-top .lft span:after { position:relative; content:''; display:block; width:2px; height:15rem; background:#303A4E; margin:0 10rem; }
.border-top .lft span:last-of-type:after { display:none; }


@media all and (max-width:1024px) {
	.border-top { margin-bottom:80rem; }
}
@media all and (max-width:910px) {
	.border-top { flex-direction: column-reverse; align-items: end; gap: 40rem; }
}


/* 캘린더 */
.ui-datepicker-title select{ color:#041129;}
.board_search .datepicker { background:url(/design2026/apec/img/sub/datepicker.svg)  no-repeat right 10px center; }

.board_search * { border:none; height:56rem; line-height:56rem; }
.board_search .datepicker {border-bottom:1px solid rgb(255 255 255 / 30%); }

.board_search select ,
.board_search #srchKeyword {  background:transparent; border-bottom:1px solid #fff; }
.board_search select option { color:#020710; }

.board_search .keyword_area { display: flex; gap: 10rem; }
.btn_sch { flex: 0 0 70rem;; background:#020710; text-indent: inherit; position:relative; }

@media all and (max-width:375px) {
	.board_search .keyword_area { width:100%; }
	.board_search input[type="text"]{ width:100%; }
}


/* 자료실 > 현장기록 view ----------------------------- */
.gallery-view { position:relative; margin-bottom:140rem;}
.gallery-view > .txt { position:absolute; top:0; left:50rem; max-width:200rem; display:flex; flex-direction:column; gap:20rem; }
.gallery-view > .txt strong { font-size:30rem; font-weight: 400; }
.gallery-view > .txt span { font-size:18rem; color:#8896B1; }

/* view slide */
.gallery-container {display: flex; gap: 20rem; justify-content: space-between; align-items: end; border-left:2px solid #fff; padding-left:50rem; }

.thumb-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rem; width: 310rem; align-content: start;}
.thumb-btn { position:relative; background: none; padding: 0; cursor: pointer; overflow: hidden; transition: border-color 0.2s ease;}
.thumb-btn:before { position:absolute; content:''; width:100%; height:100%; background:rgb(0 0 0 /50%); top:0; left:0; transition:.3s; }
.thumb-btn img { width: 10 0%; height: 70rem;object-fit: cover; display: block; transition:.3s; }

/* 활성화 상태 및 호버 스타일 */
.thumb-btn:hover:before,
.thumb-btn.active:before { opacity:0; }
.thumb-btn:hover img,
.thumb-btn.active img{ transform:scale(1.1); }

/* 메인 이미지 영역 */
.main-display { position: relative;flex: 0 0 70%; height: 570px; overflow: hidden; background-color: #000;}  
.main-display img { width: 100%; height: 100%; object-fit: cover;}

/* 좌우 화살표 버튼 */
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.4); width: 60rem; height: 60rem; font-size: 0; cursor: pointer; display: flex;  align-items: center; justify-content: center; transition: background-color 0.2s ease;}
.nav-btn:before { position:relative; content:''; display:block; width:17rem; height:12rem; background:url(/design2026/apec/img/common/arrow-long-b.svg)  no-repeat center/contain;  }
.nav-btn.prev-btn:before { transform:rotate(180deg); }


.nav-btn:hover {background: rgba(255, 255, 255, 0.7);}
.prev-btn { left: 0;}
.next-btn { right: 0;}

/* 자료실 > 현장기록 / 영상자료실 view vod ----------------------------- */
.gallery-list.vod .pic{ position:relative; }
.gallery-list.vod .pic:before,
.gallery-list.vod .pic:after { position:absolute; content:'';  z-index:1;}
.gallery-list.vod .pic:before { width:100%; height:100%; background:rgb(0 0 0 / 30%); }
.gallery-list.vod .pic:after { width:40rem; height:40rem; background:url(/design2026/apec/img/sub/vod-icon.png) no-repeat center/contain; top: 50%;
    left: 50%; transform: translate(-50%, -50%);}

@media all and (max-width:1110px) {
	.gallery-container { flex-direction: column-reverse; padding-left:0; border-left:none;}

	.gallery-view .txt { position:relative; max-width:100%; flex-direction: row; align-items: center; margin-bottom: 30rem; flex-wrap: wrap; left:0; }
	.gallery-view .txt span br { display:none; }
	
	.main-display { flex:0 0 100%; width: 100%;}
	.thumb-list { width:100%; grid-template-columns: repeat(4, 1fr); }
	.thumb-btn img { height:190rem; }
	
}

@media all and (max-width:768px) {
    .thumb-btn img { height: 120rem; }
}
@media all and (max-width:530px) {
    .thumb-list {display: grid; grid-template-columns: repeat(3, 1fr); }
	.gallery-view .txt { flex-direction: column; }
	.gallery-view .txt strong,
	.gallery-view .txt span { text-align:center; }
}
@media all and (max-width:375px) {
    .thumb-list {display: grid; grid-template-columns: repeat(2, 1fr); }
}


/* 자료실 > 현장기록 view 밑의 list ----------------------------- */
.gallery-view.list > ul { position:relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20rem; }

.gallery-view.list > ul li a {display: block;position: relative;overflow: hidden; width: 100%;}
.gallery-view.list .pic img {display: block; width: 100%; height: auto;}
.gallery-view.list .txt { position: absolute; bottom: 0;  left: 0; width: 100%; height: 0;background-color: rgba(0, 0, 0, 0.4); overflow: hidden;transition: height 0.35s ease-in-out; display: flex;align-items: flex-end;
  justify-content: flex-start; padding: 0 20px; box-sizing: border-box;}

.gallery-view.list > ul li a:hover .txt {height: 100%;}
.gallery-view.list .txt strong { color: #fff; font-size: 16px; font-weight: 500; margin-bottom: 20rem;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-overflow: ellipsis; max-width:50%; font-size:20rem; }


@media all and (max-width:768px) {
    .gallery-view.list > ul { grid-template-columns: repeat(3, 1fr); }
}
@media all and (max-width:520px) {
    .gallery-view.list > ul { grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width:375px) {
    .gallery-view.list > ul  { grid-template-columns: repeat(1, 1fr); }
}


/* 자료실 > 현장기록 list ----------------------------- */
.gallery-list { display:grid; grid-template-columns: repeat(3, 1fr); gap:70rem; }
.gallery-list .pic { width:100%; height:260rem; overflow:hidden; margin-bottom:20rem; }
.gallery-list .pic img { width:100%; height:100%; object-fit:cover; transition:.3s; }

.gallery-list .txt { display:flex; flex-direction:column; justify-content:center; align-items:center; }
.gallery-list .txt strong { text-align:center; font-size:26rem; transition:.3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.gallery-list .txt span { font-size:14rem; }

.gallery-list li:hover .pic img { transform:scale(1.1); }
.gallery-list li:hover .txt strong { color:#F1EEFE; text-decoration:underline; }

@media all and (max-width:1440px) {
	.gallery-list .pic {  height:230rem;}
	.gallery-list .txt strong { font-size:22rem; }
}
@media all and (max-width:1280px) {
	.gallery-list { gap:40rem; }
}
@media all and (max-width:980px) {
	.gallery-list { gap:20rem; }
	.gallery-list .pic {  height:210rem;}
	.gallery-list .txt strong { font-size:20rem; }
}
@media all and (max-width:768px) {
	.gallery-list .pic {  height:180rem;}
}
@media all and (max-width:640px) {
	.gallery-list { grid-template-columns: repeat(2, 1fr);}
	.gallery-list .pic {  height:180rem;}
}
@media all and (max-width:375px) {
	.gallery-list { grid-template-columns: repeat(1, 1fr);}
}




/* 자료실 > 홍보자료 list ----------------------------- */
.ebook_skin { display:grid; grid-template-columns: repeat(4, 1fr); gap:56rem; }
.ebook_skin .pic { width:100%; height:380rem; overflow:hidden; margin-bottom:20rem; }
.ebook_skin .pic img { width:100%; height:100%; object-fit:cover; transition:.3s; }

.ebook_skin .txt { display:flex; flex-direction:column; justify-content:center; align-items:center; }
.ebook_skin .txt strong { text-align:center; font-size:26rem; transition:.3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;}
.ebook_skin .txt span { font-size:14rem; }

.ebook_skin li:hover .pic img { transform:scale(1.1); }
.ebook_skin li:hover .txt strong { color:#F1EEFE; text-decoration:underline; }

@media all and (max-width:1550px) {
	.ebook_skin .pic { height:320rem;}
}
@media all and (max-width:1440px) {
	.ebook_skin { grid-template-columns: repeat(3, 1fr); }
	.ebook_skin .pic { height:380rem;}
}
@media all and (max-width:860px) {
	.ebook_skin { gap:30rem; }
	.ebook_skin .pic { height:320rem;}
}
@media all and (max-width:700px) {
	.ebook_skin .pic { height:260rem;}
}
@media all and (max-width:550px) {
	.ebook_skin { grid-template-columns: repeat(2, 1fr); }
	.ebook_skin .pic { height:320rem;}
}
@media all and (max-width:425px) {
	.ebook_skin .pic { height:260rem;}
}
@media all and (max-width:320px) {
	.ebook_skin .pic { height:220rem;}
}


/* 자료실 > 보도자료 list ----------------------------- */
.news { display:flex; flex-direction:column; border-top:1px solid #FFFFFF; }
.news li { border-bottom:1px solid #1E2B42; padding:40rem 0; display:flex; justify-content:space-between; }

.news li .txt { width:calc(100% - 180rem); display:flex; flex-direction:column; justify-content:space-between; gap:10rem; }
.news li .txt strong { font-size:22rem;}
.news li .txt span { font-size:15rem; color:#B4B8BF; }


.news li .download { display:flex; align-items:center; justify-content:center; gap:20rem; padding:0rem 23rem; width:150rem; height:70rem; background:#fff; color:#000; }
.news li .download:after { position:relative; content:''; display:block; flex:0 0 14rem; height:20rem; background:url(/design2026/apec/img/common/download.svg) no-repeat center/contain; } 

@media all and (max-width:500px) {
	.news li .download {width:110rem; gap:10rem;}
	
	.news li .txt { width:calc(100% - 130rem); }
}
@media all and (max-width:375px) {
	.news li { flex-direction:column; gap: 20rem;}
	.news li .txt { width:100%; }
	.news li .download {width:140rem;}
}


/* 자료실 > 보도자료 view ----------------------------- */
.view_tle { background:none !important; font-weight: 300; font-size:26rem !important; padding:35rem 0 !important;}
.view_name,
.view_file { border-bottom:1px solid #1E2B42; padding: 20rem 0; display: flex; gap: 30rem; flex-wrap:wrap; float: none;}

.view_name span { color:#8A98B2; }
.view_file .file { display:flex; gap:10rem; }
.view_file .file:before { position:relative; content:''; display:block; width:12rem; height:16rem; background:url(/design2026/apec/img/common/file.svg) no-repeat center/contain; margin-top:6rem; }

.view_body { width:100%; border-bottom:1px solid #1E2B42; padding:60rem 0; float: none; }
.view_body img { margin:0 auto; display: block; margin-bottom:10rem;}
.view_body img:last-of-type{ margin-bottom:60rem; }

.board_btn { margin:40rem auto 60rem; text-align:center; }
.board_btn .btn-black { padding:20rem 40rem; background:#020710; }

.view_prev { border-top:1px solid #fff; border-bottom:1px solid #1E2B42; display:flex; }
.view_next { border-bottom:1px solid #1E2B42 !important; display:flex; }


.view_next dt,
.view_prev dt { text-align:left; font-weight: 400; color: #8A98B2; flex: 0 0 8%; display:flex; align-items:center; justify-content:space-between; padding: 20rem 0;}
.view_next dt:after { position:relative; content:''; display:block; flex:0 0 10rem; height:9rem; background:url(/design2026/apec/img/common/arrow-w.svg) no-repeat center/contain; transform: rotate(90deg); } 
.view_prev dt:after { position:relative; content:''; display:block; flex:0 0 10rem; height:9rem; background:url(/design2026/apec/img/common/arrow-w.svg) no-repeat center/contain; transform: rotate(-90deg);} 

.img_down,
.img_up { background: none;}

.view_prev dd,
.view_next dd { padding:20rem 0 20rem  5%; }

@media all and (max-width:580px) {
	.view_next dt, .view_prev dt { gap: 10rem; }
}