@charset "utf-8";
/* CSS Document */

/* 주요 변수 정의 (color / size) */
:root {
  --color-point: rgba(255, 149, 0, 1);

}


/* Web Font */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('../font/PretendardVariable.woff2') format('woff2-variations');
}


/* 사이트 기본 설정 */
html {font-size: 16px;}     /* rem 단위의 기준이 되는 곳은 html 태그(문서)의 font-size임 */
body {font-family: 'Pretendard Variable', sans-serif; color: #333333; font-weight: 400; background-color: #ffffff;}
i[class^="fa"] {position: relative; display: inline-block; vertical-align: middle;}

#wrapper {min-height: 100vh; overflow: hidden; padding-top: 60px;}
#skip-nav {position: fixed; left: 0; top: -35px; width: 100%; line-height: 34px; text-align: center; font-size: 16px; background-color: rgba(0, 0, 0, 0.7); color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.5); transition: top 0.3s; z-index: 100000;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-color: #ffffff; border-bottom: 1px solid #e0e0e0;}
#header div.head {display: none;}
#header div.body h1 {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 200px;}

#gnb {display: none;}

/* footer */
#footer {position: relative; background-color: #f5f5f5; border-top: 1px solid #e0e0e0; min-height: 200px; padding-bottom: 50px;}
#footer h2 {position: absolute; left: 20px; top: 10px; width: 140px;}
#footer h2 img {filter: grayscale(100%) opacity(0.5);}



/* main */
#main-visual {position: relative; height: 600px; background-color: pink;}

#main-content {position: relative; background-color: yellow; display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 100px; padding-top: 50px; padding-left: 20px; padding-right: 20px;}
#main-content > section {position: relative; height: 200px; background-color: #f9f9f9;}



/* sub common */
#sub-visual {position: relative; height: 100px; background-color: yellow;}
body.sub #main {position: relative; min-height: 300px; background-color: #ffffff; padding-top: 40px; padding-bottom: 100px; outline: 1px solid #f9f9f9; padding-left: 20px; padding-right: 20px;}
body.sub #main h2.title {position: relative; font-size: 30px; font-weight: 400; text-align: center; margin-bottom: 60px;}
body.sub #main h2.title::before {content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); top: -3px; width: 40px; height: 3px; background-color: var(--color-point);}
body.sub #main section.content {position: relative; margin: 60px 0; font-size: 16px;}
body.sub #main h3.title {position: relative; font-size: 24px; font-weight: 400; margin-bottom: 30px;}
body.sub #main h3.title::before {content: ''; position: absolute; left: 0; bottom: -3px; width: 30px; height: 3px; background-color: var(--color-point);}




/* module */
ul.content-list {position: relative;}
ul.content-list > li {position: relative; padding-left: 20px;}
ul.content-list > li + li {margin-top: 10px;}
ul.content-list > li::before {content: ''; position: absolute; width: 10px; height: 10px; border: 2px solid  var(--color-point); border-radius: 50%; left: 0; top: 8px;}

table.content {width: 100%; border-top: 2px solid #000000; border-bottom: 2px solid #000000; font-size: 14px; table-layout: fixed;}
table.content th,
table.content td {border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; text-align: center; padding: 10px 15px;}
table.content th {background-color: #f9f9f9;}
table.content tr :last-child {border-right: none;}
table.content col.col1 {width: 80px;}
table.content col.col2 {width: 80px;}


ul.card-list {display: grid; grid-template-columns: 1fr 1fr; gap: 20px 10px;}
ul.card-list > li > a {display: block; height: 270px; position: relative; overflow: hidden; border: 1px solid #e0e0e0; border-radius: 10px; transition: all 0.3s; background-color: #ffffff;}
ul.card-list > li > a:hover {border-color: #cccccc; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);}
ul.card-list > li span.thumb {display: block; position: relative; height: 140px;}
ul.card-list > li span.thumb img {width: 100%; height: 100%; object-fit: cover;}
ul.card-list > li span.thumb::after {content: '\f144'; font-family: 'Font Awesome 7 Free'; font-weight: 500; font-size: 60px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffff; opacity: 0.4; transition: opacity 0.3s;}
ul.card-list > li a:hover span.thumb::after {opacity: 0.8;}
ul.card-list > li em {display: block; font-style: normal; font-size: 16px; font-weight: 700; line-height: 1.5em; height: 3em; overflow: hidden; margin: 8px 0; padding: 0 10px; transition: color 0.3s;}
ul.card-list > li > a:hover em {color: var(--color-point);}
ul.card-list > li span.writer {margin-left: 10px; font-size: 14px;}
ul.card-list > li span.date {position: absolute; left: 10px; bottom: 10px; font-size: 14px; color: #999999;}
ul.card-list > li span.view {position: absolute; right: 10px; bottom: 10px; font-size: 14px; color: #999999;}
ul.card-list > li span.view::before {content: '\f06e'; font-family: 'Font Awesome 7 Free'; font-weight: 500; margin-right: 4px;}
ul.card-list + div.pagination {margin-top: 30px;}

table.board-list {font-size: 13px; display: block;}
table.board-list * {display: block;}
table.board-list :where(colgroup, thead) {display: none;}
table.board-list tbody tr :where(td:nth-child(1), td:nth-child(3),td:nth-child(6)) {display: none;}
table.board-list tbody tr {position: relative;}
table.board-list tbody tr + tr {margin-top: 10px;}
table.board-list tbody tr a {font-size: 16px; font-weight: 700; padding: 10px 10px 30px 10px; border: 1px solid #e0e0e0; border-radius: 10px;}
table.board-list tbody tr td:nth-child(4) {position: absolute; left: 10px; bottom: 10px; font-size: 13px; color: #999999;}
table.board-list tbody tr td:nth-child(5) {position: absolute; right: 10px; bottom: 10px; font-size: 13px; color: #999999;}
table.board-list + div.pagination {margin-top: 30px;}



div.pagination {display: flex; justify-content: center; gap: 0 1px; color: #666666; font-size: 13px;}
div.pagination a {display: block; position: relative; min-width: 28px; height: 28px; padding: 0 6px; line-height: 26px; text-align: center; border: 1px solid #e0e0e0; border-radius: 50px; transition: all 0.3s;}
div.pagination a:hover {border-color: var(--color-point); background-color: #f9f9f9;}
div.pagination a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.pagination > ol {display: flex; gap: 0 1px; margin: 0 4px;}
div.pagination > ol > li.on > a {background-color: var(--color-point); color: #ffffff; border-color: var(--color-point);}


div.image-slide {position: relative; height: 60vw;}
div.image-slide div.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.image-slide div.slide > ul {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.image-slide div.slide > ul > li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; display: none;}
div.image-slide div.slide > ul > li.on {display: block;}
div.image-slide div.slide > ul > li img {width: 100%; height: 100%; object-fit: cover;}
div.image-slide div.indicator {position: absolute; left: 0; bottom: 20px; width: 100%;}
div.image-slide div.indicator > ul {display: flex; justify-content: center; gap: 0 10px;}
div.image-slide div.indicator > ul > li > a {display: block; width: 10px; height: 10px; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 100px; text-indent: -999px; overflow: hidden;}
div.image-slide div.indicator > ul > li.on > a {width: 80px; background-color: rgba(255, 255, 255, 0.8);}
div.image-slide div.control :where(a.prev, a.next) {position: absolute; top: 0; width: 6%; height: 100%; transition: background-color 0.3s;}
div.image-slide div.control :where(a.prev, a.next):hover {background-color: rgba(0, 0, 0, 0.1);}
div.image-slide div.control :where(a.prev, a.next) img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; transition: all 0.1s;}
div.image-slide div.control a.prev {left: 0;}
div.image-slide div.control a.next {right: 0;}
div.image-slide div.control a.prev:active img {left: 40%;}
div.image-slide div.control a.next:active img {left: 60%;}
div.image-slide div.control :where(a.play, a.pause) {position: absolute; right: 20px; bottom: 20px; color: #ffffff; font-size: 20px; display: none;}
div.image-slide.play div.control a.pause {display: block;}
div.image-slide.pause div.control a.play {display: block;}


div.tab-content {position: relative; height: 300px; font-size: 14px;}
div.tab-content > dl {display: flex;}
div.tab-content > dl > dt > a {display: block; width: 80px; line-height: 39px; text-align: center; font-size: 18px; border-top: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-top-left-radius: 10px; border-top-right-radius: 10px;}
div.tab-content > dl > dt:first-child > a {border-left: 1px solid #e0e0e0;}
div.tab-content > dl > dt.on > a {background-color: var(--color-point); color: #ffffff;}
div.tab-content > dl > dd {position: absolute; top: 40px; border: 1px solid #e0e0e0; padding: 20px; display: none;}
div.tab-content > dl > dt.on + dd {display: block;}






/* media query */
@media screen and (min-width: 700px) {
  #main-content {grid-template-columns: 1fr 1fr; gap: 10px 30px;}
  ul.card-list {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px 10px;}
}
