/* 메인 */ .skip-nav { position: relative; z-index: 3000; } .skip-nav a { display: block; position: absolute; top: -9999em; left: 0; z-index: 1000; padding: 16px 24px; background-color: #6db9d0; color: #fff; text-decoration: none; outline: none; } .skip-nav a:focus { top: 0; z-index: 1000; } /* 메인 */ .skip-nav { position: relative; z-index: 3000; } .skip-nav a { display: block; position: absolute; top: -9999em; left: 0; z-index: 1000; padding: 16px 24px; background-color: #6db9d0; color: #fff; text-decoration: none; outline: none; } .skip-nav a:focus { top: 0; z-index: 1000; } /* 메인 - 영역 */ #wrap { width: 100%; } #wrap #container { padding-bottom: 0; background: none; } #wrap #container * { font-family: pretendard; font-size: 16px; font-weight: 400; color: #333; } /* 헤더 */ #wrap #header { display: flex; justify-content: center; align-items: center; position: relative; padding: 0 24px; height: 80px; border-bottom: 1px solid #ececec; background: #fff; } /* 헤더 - 로고 */ #wrap #header h1 { margin-right: auto; width: auto; height: 40px; } /* 헤더 - GNB */ #wrap #header #gnb { display: flex; position: absolute; align-items: center; height: 100%; } #wrap #header #gnb li { margin-right: 0; padding: 0; width: 160px; height: 100%; text-align: center; } #wrap #header #gnb li:last-child { margin-right: 0; } #wrap #header #gnb li a { display: block; height: 100%; font-size: 20px; line-height: 80px; font-weight: 500; text-align: center; } #wrap #header #gnb li a:hover, #wrap #header #gnb li a:active, #wrap #header #gnb li a:focus { color:#500778; } #wrap #header #gnb li.drop_down { position: relative; } #wrap #header #gnb li.drop_down .inner_menu01 { position: absolute; top: 80px; left: 0; z-index: 99; min-width: 160px; width:100%; border-top:2px solid #500778; border-left:1px solid #ececec; border-right:1px solid #ececec; border-bottom:1px solid #ececec; background: #fff; } #wrap #header #gnb li.drop_down .inner_menu01 li:first-child { padding: 16px 16px 8px 16px; } #wrap #header #gnb li.drop_down .inner_menu01 li { margin-right: 0; padding: 0 16px 16px 16px; text-align: center; } #wrap #header #gnb li.drop_down .inner_menu01 li a { font-size: 16px; line-height: 26px; color:#555; letter-spacing: -0.5px;} #wrap #header #gnb li.drop_down .inner_menu01 li a:hover, #wrap #header #gnb li.drop_down .inner_menu01 li a:active, #wrap #header #gnb li.drop_down .inner_menu01 li a:focus { color:#500778; } #wrap #header #gnb li.drop_down .inner_menu02 { position: absolute; top: 80px; left: 0; z-index: 99; min-width: 160px; width:100%; border-top:2px solid #500778; border-left:1px solid #ececec; border-right:1px solid #ececec; border-bottom:1px solid #ececec; background: #fff; } #wrap #header #gnb li.drop_down .inner_menu02 li:first-child { padding: 16px 16px 8px 16px; } #wrap #header #gnb li.drop_down .inner_menu02 li { margin-right: 0; padding: 0 16px 16px 16px; text-align: center; } #wrap #header #gnb li.drop_down .inner_menu02 li a { font-size: 16px; line-height: 26px; color:#555; letter-spacing: -0.5px; } #wrap #header #gnb li.drop_down .inner_menu02 li a:hover, #wrap #header #gnb li.drop_down .inner_menu02 li a:active, #wrap #header #gnb li.drop_down .inner_menu02 li a:focus { color:#500778; } /* 헤더 - GNB 오픈 */ #wrap #header .menu_open { display: flex; justify-content: center; align-items: center; position: absolute; top: 80px; left: 0; z-index: 999; padding: 24px; width: 100%; height: auto; border-top: 2px solid #500778; border-bottom: 1px solid #ececec; background: #fff; } #wrap #header .menu_open .menu { display: flex; flex-direction: row; } #wrap #header .menu_open .menu li { display: flex; flex-direction: column; align-items: center; width: 160px; } #wrap #header .menu_open .menu li a:first-child { margin-top: 0; font-size: 16px; font-weight: 700; color:#555; letter-spacing: -0.5px; } #wrap #header .menu_open .menu li a { margin-top: 20px; font-size: 16px; font-weight: 400; color:#555; } #wrap #header .menu_open .menu li a:hover, #wrap #header .menu_open .menu li a:active, #wrap #header .menu_open .menu li a:focus { color:#500778; } /* 헤더 - 전체메뉴 오픈 */ #wrap #header #all_btn { margin-left: auto; width: 24px; height: 24px; cursor: pointer; } #wrap #header .line1, #wrap #header .line2, #wrap #header .line3 { margin: 4px 0; width: 24px; height: 2px; background-color: #000; transition: 0.4s; } #wrap #header .change .line1 { transform: translate(0, 6px) rotate(-45deg); } #wrap #header .change .line2 {opacity: 0;} #wrap #header .change .line3 { transform: translate(0, -6px) rotate(45deg); } @media (max-width : 1024px) { #wrap #header #gnb { display: none; } #wrap #header .menu_open .menu { margin-left: 0; } } @media (max-width : 768px) { #wrap #header .menu_open .menu { flex-wrap: wrap; width: 100%; } #wrap #header .menu_open .menu li { width: 20%; } } @media (max-width : 640px) { #wrap #header { padding: 20px 16px; } #wrap #header .menu_open .menu { flex-direction: column; gap: 24px; width: auto; } #wrap #header .menu_open .menu li { width: auto; } } /* 푸터 */ /* 푸터 - 메뉴 */ #wrap #footer { /*margin-top: 120px;*/ background: #212121; color: #fff; } #wrap #footer .footer_menu { padding: 24px; background: #212121; border-bottom: 1px solid #3b3b3e; } #wrap #footer .footer_menu ul { display: flex; gap: 24px; } #wrap #footer .footer_menu ul li { } #wrap #footer .footer_menu ul li a { font-size: 16px; font-weight: 400; color: #fff; } #wrap #footer .footer_menu ul li:first-child a { color: #aed0ee; } #wrap #footer .footer_menu ul li a:hover, #wrap #footer .footer_menu ul li a:active, #wrap #footer .footer_menu ul li a:focus { color:#fff; } /* 푸터 - 정보 */ #wrap #footer .footer_bottom { display: flex; flex-direction: column; padding: 40px 24px; width: 100%; } #wrap #footer .footer_bottom .footer_info { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 28px; } #wrap #footer .footer_bottom .footer_info .footer_addr { display: flex; gap: 40px; } #wrap #footer .footer_bottom .footer_info .footer_addr .addr_info { color: #fff; } #wrap #footer .footer_bottom .footer_info .footer_addr .call_info { color: #fff; } #wrap #footer .footer_bottom .footer_info .footer_addr .call_info span { margin-right: 16px; color: #999; } #wrap #footer .footer_bottom .footer_info .footer_addr .checkup_info { color: #fff; } #wrap #footer .footer_bottom .footer_info .footer_addr .checkup_info span { margin-right: 16px; color: #999; } /* 푸터 - 셀렉트 */ #wrap #footer .footer_bottom .footer_site { display: flex; gap: 16px; } #wrap #footer .footer_bottom .footer_site .select { display: flex; justify-content: space-between; position: relative; padding: 16px; width: 292px; border-bottom: 1px solid #3b3b3e; } #wrap #footer .footer_bottom .footer_site .select a { font-size: 16px; } #wrap #footer .footer_bottom .footer_site .select a, #wrap #footer .footer_bottom .footer_site .select a:active, #wrap #footer .footer_bottom .footer_site .select a:focus { color:#fff; } #wrap #footer .footer_bottom .footer_site .select ul { position: absolute; left: 0; bottom: 48px; padding: 16px; min-width: 292px; border: 1px solid #3b3b3e; background: #fff; } #wrap #footer .footer_bottom .footer_site .select ul li { padding: 8px 0; } #wrap #footer .footer_bottom .footer_site .select ul li a { color: #333; } #wrap #footer .footer_bottom .footer_site .select ul li a, #wrap #footer .footer_bottom .footer_site .select ul li a:active, #wrap #footer .footer_bottom .footer_site .select ul li a:focus { color:#333; } /* 푸터 - 카피 */ #wrap #footer .footer_bottom .copyright_info { color: #666; } #wrap #footer .footer_bottom .copyright_info span { color: #666; } /* 푸터 - 마크 */ #wrap #footer .footer_bottom .markwrap { display: flex; justify-content: flex-end; gap: 24px; } #wrap #footer .footer_bottom .markwrap .healthcarequality img { width: 64px; } #wrap #footer .footer_bottom .markwrap .webaccess img { width: auto; height: 64px; } @media (max-width : 1280px) { #wrap #footer .footer_bottom .footer_info { flex-direction: column; justify-content: flex-start; align-items: flex-start; } #wrap #footer .footer_bottom .footer_site .select { margin-top: 24px; } } @media (max-width : 768px) { #wrap #footer .footer_bottom .footer_info .footer_addr { flex-direction: column; gap: 24px; } #wrap #footer .footer_bottom .footer_site { width: 100%; } #wrap #footer .footer_bottom .footer_site .select { width: 50%; } #wrap #footer .footer_bottom .footer_site .select ul { width: 100%; } } @media (max-width : 640px) { #wrap #footer .footer_menu { padding: 16px; } #wrap #footer .footer_bottom { padding: 24px 16px; } #wrap #footer .footer_menu ul { flex-wrap: wrap; gap: 0; } #wrap #footer .footer_menu ul li { margin: 8px 0; width: 49%; } #wrap #footer .footer_bottom .footer_site { flex-direction: column; gap: 8px; } #wrap #footer .footer_bottom .footer_site .select { padding: 16px 0; width: 100%; } #wrap #footer .footer_bottom .footer_site .select:last-child { margin-top: 8px; } #wrap #footer .footer_bottom .copyright_info { margin-bottom: 40px; } #wrap #footer .footer_bottom .copyright_info span { display: block; padding: 8px 0; } #wrap #footer .footer_bottom .markwrap { justify-content: flex-start; } } /* 컨텐츠(공통) - 타이틀 */ #wrap #container h2 { font-size: 64px; line-height: 74px; font-weight: 200; letter-spacing: -0.5px; } #wrap #container h3 { padding: 80px 0; font-size: 48px; line-height: 58px; font-weight: 200; text-align: center; letter-spacing: -0.5px; } #wrap #container h3 span { font-size: 48px; line-height: 58px; font-weight: 500; letter-spacing: -0.5px; } #wrap #container h4 { font-size: 40px; line-height: 50px; font-weight: 700; letter-spacing: -0.5px; } #wrap #container h5 { font-size: 32px; line-height: 42px; font-weight: 600; letter-spacing: -0.5px; word-break: keep-all; } #wrap #container h6 { font-size: 24px; line-height: 34px; font-weight: 600; letter-spacing: -0.5px; word-break: keep-all; } #wrap #container .tl { font-size: 96px; line-height: 106px; font-weight: 700; letter-spacing: -0.5px; } #wrap #container .txt01 { font-size: 20px; line-height: 30px; font-weight: 300; letter-spacing: -0.5px; } #wrap #container .txt02 { font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: -0.5px; } #wrap #container .txt03 { font-size: 16px; line-height: 26px; font-weight: 400; letter-spacing: -0.5px; } #wrap #container .txt03l { font-size: 16px; line-height: 26px; font-weight: 200; letter-spacing: -0.5px; } #wrap #container .txt04 { font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: -0.5px; } #wrap #container p { word-break: keep-all; } @media (max-width : 1280px) { #wrap #container h2 { font-size: 56px; line-height: 66px; } #wrap #container h3, #wrap #container h3 span, #wrap #container h3 span strong { font-size: 40px; line-height: 50px; } #wrap #container h5 { font-size: 28px; line-height: 38px; } #wrap #container h6 { font-size: 22px; line-height: 32px; } } @media (max-width : 768px) { #wrap #container h2 { font-size: 36px; line-height: 46px; } #wrap #container h3 { padding: 40px 0; font-size: 32px; line-height: 42px; } #wrap #container h3 span { font-size: 32px; line-height: 42px; } #wrap #container h4 { font-size: 30px; line-height: 40px; } #wrap #container h5 { font-size: 24px; line-height: 34px; } #wrap #container h6 { font-size: 20px; line-height: 30px; } #wrap #container .tl { font-size: 54px; line-height: 64px; } #wrap #container .txt01 { font-size: 19px; line-height: 29px; } #wrap #container .txt02 { font-size: 17px; line-height: 27px; } } @media (max-width : 640px) { #wrap #container h2 { font-size: 32px; line-height: 42px; } #wrap #container h3 { font-size: 30px; line-height: 40px; } #wrap #container h4 { font-size: 28px; line-height: 38px; } #wrap #container h5 { font-size: 20px; line-height: 30px; } #wrap #container h6 { font-size: 18px; line-height: 28px; } #wrap #container .tl { font-size: 40px; line-height: 50px; } #wrap #container .txt01 { font-size: 16px; line-height: 26px; } #wrap #container .txt02 { font-size: 16px; line-height: 26px; } #wrap #container .txt03 { font-size: 15px; line-height: 25px; } #wrap #container .txt04 { font-size: 14px; line-height: 24px; } } /* 컨텐츠(공통) - 페이지네이션 - 간행물/사진관 */ #wrap #container .pagination { display: flex; justify-content: center; align-items: center; margin-top: 40px; margin-bottom: 120px; } #wrap #container .pagination a { padding: 12px 16px; border-left:0; border: 1px solid #ececec; text-decoration: none; transition: background-color .3s; color: #555; } #wrap #container .pagination a:first-child { border-left: 1px solid #ececec; } #wrap #container .pagination a.active { border: 1px solid #333; background-color: #fff; font-weight: 700; color: #333; } #wrap #container .pagination a:hover:not(.active) { border: 1px solid #333; } /* 컨텐츠(공통) - 더보기 - 영상관 */ #wrap #container .more { display: flex; justify-content: center; align-items: center; margin-top: 40px; margin-bottom: 120px; } #wrap #container .more a { padding: 12px 32px; border-left:0; border: 1px solid #ececec; text-decoration: none; transition: background-color .3s; color: #555; } #wrap #container .more a:hover:not(.active) { border: 1px solid #333; } /* 컨텐츠(공통) - 검색바 - 간행물/사진관/영상관 */ #wrap #container #sub .search { display: flex; justify-content: space-between; align-items: center; margin: 0 auto 80px; max-width:924px; border-bottom: 1px solid #ececec; } #wrap #container #sub .search label { display: none; } #wrap #container #sub .search .select { display: flex; justify-content: space-between; position: relative; padding: 16px; width: 160px; border: 0 } #wrap #container #sub .search .select a { font-size: 16px; } #wrap #container #sub .search .select a, #wrap #container #sub .search .select a:active, #wrap #container #sub .search .select a:focus { color:#333; } #wrap #container #sub .search .search_input { display:flex; align-items: center; width: 100%; } #wrap #container #sub .search .search_input input { padding: 0 16px; width: 100%; height: 48px; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #wrap #container #sub .search .search_input .search_btn { display: block; margin: 0 16px; width: 24px; height: auto; border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } /* 컨텐츠(공통) - 검색바 - 간행물/사진관/영상관 - 오픈메뉴 */ #wrap #container #sub .search .select ul { position: absolute; top: 48px; left: 0; z-index: 1; padding: 16px; min-width: 100%; border: 1px solid #3b3b3e; background: #fff; } #wrap #container #sub .search .select ul li { padding: 8px 0; } #wrap #container #sub .search .select ul li a { color: #333; } #wrap #container #sub .search .select ul li a, #wrap #container #sub .search .select ul li a:active, #wrap #container #sub .search .select ul li a:focus { color: #333; } @media (max-width : 768px) { #wrap #container #sub .search { margin: 0 auto 40px; width: 100%; } } @media (max-width : 640px) { #wrap #container #sub .search { flex-direction: column; } #wrap #container #sub .search .select { width: 100%; border: 1px solid #ececec; } #wrap #container #sub.sub_65th_memorialhall .img_area .thum_list { padding-top: 40px; } } /* 컨텐츠 - 디지털 사진관 */ #wrap #container #sub.sub_digital_photo { margin: 0 auto; width: 1558px; } #wrap #container #sub.sub_digital_photo .tab { display: flex; margin: 0 auto 80px; width:924px; } #wrap #container #sub.sub_digital_photo .tab a { padding: 16px; min-width: 115px; border: 1px solid #ececec; border-left: 0; font-size: 18px; font-weight: 400; text-align: center; } #wrap #container #sub.sub_digital_photo .tab a:first-child { border-left: 1px solid #ececec; } #wrap #container #sub.sub_digital_photo .tab a.on { border: 0; background: #500778; font-weight: 700; color: #fff; } @media (max-width : 768px) { #wrap #container #sub.sub_digital_photo .tab { margin: 0 auto 40px; } } #wrap #container #sub.sub_digital_photo .list { width: 100%; } #wrap #container #sub.sub_digital_photo .list ul { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 40px; } #wrap #container #sub.sub_digital_photo .list ul li {} #wrap #container #sub.sub_digital_photo .list ul li a { display: block; position: relative; } #wrap #container #sub.sub_digital_photo .list ul li a img { max-width: 503px; width: 100%; height: auto; } #wrap #container #sub.sub_digital_photo .list ul li a .title { display: flex; justify-content: space-between; position: absolute; left: 0; bottom: 0; padding: 16px; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,1)); } #wrap #container #sub.sub_digital_photo .list ul li a .title span, #wrap #container #sub.sub_digital_photo .list ul li a:active .title span, #wrap #container #sub.sub_digital_photo .list ul li a:focus .title span { color: #fff; } @media (max-width : 1440px) { #wrap #container #sub.sub_digital_photo { padding: 24px; width: 100%; } #wrap #container #sub.sub_digital_photo .list ul { column-gap: normal; } #wrap #container #sub.sub_digital_photo .list ul li { margin-right: 1.5%; width: 32.33%; } #wrap #container #sub.sub_digital_photo .list ul li:nth-child(3n) { margin-right: 0; width: 32.33%; } #wrap #container #sub.sub_digital_photo .list ul li a img { width: 100%; height: auto; } } @media (max-width : 768px) { #wrap #container #sub.sub_digital_photo .tab { flex-wrap: wrap; width: 100%; } #wrap #container #sub.sub_digital_photo .tab a:nth-child(1), #wrap #container #sub.sub_digital_photo .tab a:nth-child(2), #wrap #container #sub.sub_digital_photo .tab a:nth-child(3), #wrap #container #sub.sub_digital_photo .tab a:nth-child(4), #wrap #container #sub.sub_digital_photo .tab a:nth-child(5), #wrap #container #sub.sub_digital_photo .tab a:nth-child(6) { border-bottom: 0; } #wrap #container #sub.sub_digital_photo .tab a:nth-child(2), #wrap #container #sub.sub_digital_photo .tab a:nth-child(4), #wrap #container #sub.sub_digital_photo .tab a:nth-child(6), #wrap #container #sub.sub_digital_photo .tab a:nth-child(8) { border-left: 0; } #wrap #container #sub.sub_digital_photo .tab a { min-width: 50%; border-left: 1px solid #ececec; } #wrap #container #sub.sub_digital_photo .list ul li { margin-right: 1%; width: 49.5%; } #wrap #container #sub.sub_digital_photo .list ul li:nth-child(2n) { margin-right: 0; width: 49.5%; } #wrap #container #sub.sub_digital_photo .list ul li:nth-child(3n) { margin-right: 1%; width: 49.5%; } #wrap #container #sub.sub_digital_photo .list ul li:nth-child(6n) { margin-right: 0; width: 49.5%; } } @media (max-width : 640px) { #wrap #container #sub.sub_digital_photo h3 span { display: inline-block; } #wrap #container #sub.sub_digital_photo .list ul { row-gap: 20px; } #wrap #container #sub.sub_digital_photo .list ul li, #wrap #container #sub.sub_digital_photo .list ul li:nth-child(2n), #wrap #container #sub.sub_digital_photo .list ul li:nth-child(3n), #wrap #container #sub.sub_digital_photo .list ul li:nth-child(6n) { margin-right: 0; width: 100%; } #wrap #container #sub.sub_digital_photo .list ul li a img { max-width: 100%; } #wrap #container #sub.sub_digital_photo { padding: 24px 16px 40px; } } /* 컨텐츠 - 디지털 영상관 */ #wrap #container #sub.sub_digital_video { margin: 0 auto; width: 1558px; } #wrap #container #sub.sub_digital_video .tab { display: flex; margin: 0 auto 80px; max-width: 924px; } #wrap #container #sub.sub_digital_video .tab a { padding: 16px; flex: 1 1 100px; border: 1px solid #ececec; border-left: 0; font-size: 18px; font-weight: 400; text-align: center; } #wrap #container #sub.sub_digital_video .tab a:first-child { border-left: 1px solid #ececec; } #wrap #container #sub.sub_digital_video .tab a.on { border: 0; background: #500778; font-weight: 700; color: #fff; } @media (max-width : 768px) { #wrap #container #sub.sub_digital_video .tab { margin: 0 auto 40px; } } #wrap #container #sub.sub_digital_video .list { width: 100%; } #wrap #container #sub.sub_digital_video .list ul { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 40px; } #wrap #container #sub.sub_digital_video .list ul li { width: 33.333%; padding: .7%; } #wrap #container #sub.sub_digital_video .list ul li a { display: block; } #wrap #container #sub.sub_digital_video .list ul li a img { max-width: 503px; width: 100%; height: auto; } #wrap #container #sub.sub_digital_video .list ul li a .title { display: flex; justify-content: space-between; position: normal; padding: 16px 0; width: 100%; } #wrap #container #sub.sub_digital_video .list ul li a .title span, #wrap #container #sub.sub_digital_video .list ul li a:active .title span, #wrap #container #sub.sub_digital_video .list ul li a:focus .title span { color: #333; } @media (max-width : 1440px) { #wrap #container #sub.sub_digital_video { padding: 24px; width: 100%; } #wrap #container #sub.sub_digital_video .list ul { column-gap: normal; } #wrap #container #sub.sub_digital_video .list ul li a img { width: 100%; height: auto; } } @media (max-width : 768px) { #wrap #container #sub.sub_digital_video .tab { flex-wrap: wrap; width: 100%; } #wrap #container #sub.sub_digital_video .tab a:nth-child(1), #wrap #container #sub.sub_digital_video .tab a:nth-child(2) { border-bottom: 0; } #wrap #container #sub.sub_digital_video .tab a:nth-child(2), #wrap #container #sub.sub_digital_video .tab a:nth-child(4) { border-left: 0; } #wrap #container #sub.sub_digital_video .tab a { min-width: 50%; border-left: 1px solid #ececec; } #wrap #container #sub.sub_digital_video .list ul li { width: 50%; } } @media (max-width : 640px) { #wrap #container #sub.sub_digital_video h3 span { display: inline-block; } #wrap #container #sub.sub_digital_video .list ul { row-gap: 20px; } #wrap #container #sub.sub_digital_video .list ul li { width: 100%; } #wrap #container #sub.sub_digital_video .list ul li a img { max-width: 100%; } #wrap #container #sub.sub_digital_video { padding: 24px 16px 40px; } } /* 컨텐츠 - 디지털 간행물 */ #wrap #container #sub.sub_digital_publication { margin: 0 auto; width: 1240px; } #wrap #container #sub.sub_digital_publication .tab { display: flex; margin: 0 auto 80px; width:924px; } #wrap #container #sub.sub_digital_publication .tab a { padding: 16px; min-width: 231px; border: 1px solid #ececec; border-left: 0; font-size: 18px; font-weight: 400; text-align: center; } #wrap #container #sub.sub_digital_publication .tab a:first-child { border-left: 1px solid #ececec; } #wrap #container #sub.sub_digital_publication .tab a.on { border: 0; background: #500778; font-weight: 700; color: #fff; } @media (max-width : 768px) { #wrap #container #sub.sub_digital_publication .tab { margin: 0 auto 40px; } } #wrap #container #sub.sub_digital_publication .list { width: 100%; } #wrap #container #sub.sub_digital_publication .list ul { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 40px; } #wrap #container #sub.sub_digital_publication .list ul li {} #wrap #container #sub.sub_digital_publication .list ul li a { display: block; width: 292px; } #wrap #container #sub.sub_digital_publication .list ul li a img { width: 292px; max-width: 100%; height: auto; } #wrap #container #sub.sub_digital_publication .list ul li a .title { display: flex; justify-content: space-between; position: normal; padding: 16px 0; width: 100%; } #wrap #container #sub.sub_digital_publication .list ul li a .title span, #wrap #container #sub.sub_digital_publication .list ul li a:active .title span, #wrap #container #sub.sub_digital_publication .list ul li a:focus .title span { color: #333; } @media (max-width : 1440px) { #wrap #container #sub.sub_digital_publication .list ul li a { width: 100%; } #wrap #container #sub.sub_digital_publication { padding: 24px; width: 100%; } #wrap #container #sub.sub_digital_publication .list ul { column-gap: normal; } #wrap #container #sub.sub_digital_publication .list ul li { margin-right: 1%; width: calc( ( 97% ) / 4 ); } #wrap #container #sub.sub_digital_publication .list ul li:nth-child(4n) { margin-right: 0; } #wrap #container #sub.sub_digital_publication .list ul li a img { width: 100%; } } @media (max-width : 1280px) { #wrap #container #sub.sub_digital_publication .list ul li a img { height: auto; } } @media (max-width : 1024px) { #wrap #container #sub.sub_digital_publication .list ul li { margin-right: 1%; width: calc((100% - 2%) / 3); } #wrap #container #sub.sub_digital_publication .list ul li:nth-child(3n) { margin-right: 0; } #wrap #container #sub.sub_digital_publication .list ul li:nth-child(4n) { margin-right: 1%; } } @media (max-width : 768px) { #wrap #container #sub.sub_digital_publication .tab { flex-wrap: wrap; width: 100%; } #wrap #container #sub.sub_digital_publication .tab a:nth-child(1), #wrap #container #sub.sub_digital_publication .tab a:nth-child(2) { border-bottom: 0; } #wrap #container #sub.sub_digital_publication .tab a:nth-child(2), #wrap #container #sub.sub_digital_publication .tab a:nth-child(4) { border-left: 0; } #wrap #container #sub.sub_digital_publication .tab a { min-width: 50%; border-left: 1px solid #ececec; } #wrap #container #sub.sub_digital_publication .list ul li { margin-right: 1%; width: 49.5%; } #wrap #container #sub.sub_digital_publication .list ul li:nth-child(2n) { margin-right: 0; width: 49.5%; } #wrap #container #sub.sub_digital_publication .list ul li:nth-child(3n) { margin-right: 1%; width: 49.5%; } #wrap #container #sub.sub_digital_publication .list ul li:nth-child(6n) { margin-right: 0; width: 49.5%; } } @media (max-width : 640px) { #wrap #container #sub.sub_digital_publication h3 span { display: inline-block; } #wrap #container #sub.sub_digital_publication { padding: 24px 16px 40px; } #wrap #container #sub.sub_digital_publication .list ul { row-gap: 20px; } #wrap #container #sub.sub_digital_publication .list ul li, #wrap #container #sub.sub_digital_publication .list ul li:nth-child(2n), #wrap #container #sub.sub_digital_publication .list ul li:nth-child(3n), #wrap #container #sub.sub_digital_publication .list ul li:nth-child(6n) { margin-right: 0; width: 100%; } } /* 컨텐츠 - 디지털 간행물 - 상세 */ #wrap #container #sub.sub_digital_publication { margin: 0 auto; width: 1240px; } #wrap #container #sub.sub_digital_publication .detail_view { display: flex; flex-direction: column; margin: 0 auto; width:100%; border-top: 1px solid #333; border-bottom: 1px solid #333; } #wrap #container #sub.sub_digital_publication .detail_view .title { padding: 20px 0; width: 100%; border-bottom: 1px solid #ececec; font-weight: 500; word-break: keep-all; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info { display: flex; justify-content: space-between; border-bottom: 1px solid #ececec; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .writing { display: flex; gap: 16px; padding: 20px 0; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .writing .write { font-weight: 600; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .writing .team { font-weight: 400; } #wrap #container #sub.sub_digital_publication .detail_view .detail_txt { display: flex; align-items: center; gap: 40px; padding: 20px 0; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .data { display: flex; gap: 16px; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .data .date { font-weight: 600; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .data .day { font-weight: 400; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .count { display: flex; gap: 16px; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .count .inquiry { font-weight: 600; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .count .num { font-weight: 400; } #wrap #container #sub.sub_digital_publication .detail_view .con { padding: 40px 0; border-bottom: 1px solid #ececec; } #wrap #container #sub.sub_digital_publication .detail_view .con p { padding: 16px 0; word-break: keep-all; } #wrap #container #sub.sub_digital_publication .detail_view .con img { margin-bottom: 24px; width: 100%; height: auto; } #wrap #container #sub.sub_digital_publication .detail_view .con p.tit { font-weight: 600; } #wrap #container #sub.sub_digital_publication .detail_view .con p a { text-decoration: underline; } #wrap #container #sub.sub_digital_publication .detail_view .download { display: flex; gap: 40px; padding: 20px 0; } #wrap #container #sub.sub_digital_publication .detail_view .download .tit { font-weight: 600; } #wrap #container #sub.sub_digital_publication .detail_view .download .file_add { display: flex; flex-direction: column; gap: 16px; } #wrap #container #sub.sub_digital_publication .detail_view .download .file_add .file { display: flex; gap: 8px; } #wrap #container #sub.sub_digital_publication .detail_view .download .file_add .file img { } #wrap #container #sub.sub_digital_publication .detail_view .download .file_add .file p { font-weight: 400; } #wrap #container #sub.sub_digital_publication .list { margin-top: 40px; } #wrap #container #sub.sub_digital_publication .list { display: flex; justify-content: center; align-items: center; margin-top: 40px; margin-bottom: 80px; } #wrap #container #sub.sub_digital_publication .list a { padding: 12px 64px; border-left:0; border: 1px solid #ececec; text-decoration: none; transition: background-color .3s; color: #555; } #wrap #container #sub.sub_digital_publication .list a:hover:not(.active) { border: 1px solid #333; } #wrap #container #sub.sub_digital_publication .view_list { margin-bottom: 120px; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; } #wrap #container #sub.sub_digital_publication .view_list .pre { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid #ececec; } #wrap #container #sub.sub_digital_publication .view_list .pre a.img {} #wrap #container #sub.sub_digital_publication .view_list .pre span { font-weight: 600; } #wrap #container #sub.sub_digital_publication .view_list .pre p { font-weight: 400; } #wrap #container #sub.sub_digital_publication .view_list .next { display: flex; align-items: center; gap: 16px; padding: 20px 0; } #wrap #container #sub.sub_digital_publication .view_list .next a.img {} #wrap #container #sub.sub_digital_publication .view_list .next span { font-weight: 600; } #wrap #container #sub.sub_digital_publication .view_list .next p { font-weight: 400; } @media (max-width : 1280px) { #wrap #container #sub.sub_digital_publication { padding: 24px; width: 100%; } } @media (max-width : 1024px) { } @media (max-width : 768px) { #wrap #container #sub.sub_digital_publication .detail_view .con img { margin-bottom: 16px; } } @media (max-width : 640px) { #wrap #container #sub.sub_digital_publication { padding: 16px; width: 100%; } #wrap #container #sub.sub_digital_publication .detail_view .detail_txt { justify-content: space-between; gap: 24px; padding: 0 0 20px 0; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info .writing { padding: 20px 0 0 0; } #wrap #container #sub.sub_digital_publication .detail_view .detail_info { flex-direction: column; gap: 16px; } #wrap #container #sub.sub_digital_publication .detail_view .download { flex-direction: column; gap: 16px; } #wrap #container #sub.sub_digital_publication .detail_view .con img { margin-bottom: 8px; } } #header h1{ display: flex; align-items: center; height: 36px;} #header h1 a.nmc_sub_name{ position: relative; margin-left: 31px; font-size: 18px; font-weight: 600; font-family: 'Noto Sans KR' !important; word-break: keep-all; } #header h1 a.nmc_sub_name:before{ content: ""; position: absolute; top: 0; left: -15px; width: 1px; height: 100%; background-color: #333; z-index: 0; } @media ( max-width: 640px ) { #wrap #container #sub.sub_65th_memorialhall .img_area .thum_list .swiper .swiper-slide a { margin: 0 auto; } #wrap #container #sub.sub_65th_memorialhall .img_area .thum_list .swiper .swiper-slide a img { text-align: center; } }