@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-width: 1000px; min-height: 100vh; overflow: hidden; padding-top: 100px; transition: padding-top 0.3s;}
#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 */
#header {position: fixed; left: 0; top: 0; width: 100%; min-width: 1000px; background-color: #ffffff; z-index: 10000;}
#header div.head {height: 28px; overflow: hidden; transition: height 0.3s;}
#header div.head div.container {position: relative; height: 100%; max-width: 1200px; margin: 0 auto;}
#header div.head ul.top-menu {display: flex; position: absolute; right: 0; top: 0; font-size: 12px;}
#header div.head ul.top-menu > li {border-right: 1px solid #e0e0e0;}
#header div.head ul.top-menu > li:first-child {border-left: 1px solid #e0e0e0;}
#header div.head ul.top-menu > li > a {display: block; line-height: 28px; padding: 0 10px; color: rgba(0, 0, 0, 0.6); transition: color 0.3s;}
#header div.head ul.top-menu > li > a:hover {color: rgba(0, 0, 0, 1);}
#header div.head ul.top-menu > li > a i {margin-right: 6px; position: relative; top: -1px;}
#header div.body {height: 72px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; transition: height 0.3s;}
#header div.body div.container {position: relative; height: 100%; max-width: 1200px; margin: 0 auto;}
#header div.body h1 {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 280px; transition: width 0.3s;}
#header::before {content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 200px; background-color: #ffffff; height: 0; transition: height 0.3s;}

#gnb {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); text-align: center; font-size: 15px;}
#gnb > ul {display: flex; gap: 0 20px;}
#gnb > ul > li {position: relative;}
#gnb > ul > li > a {display: block; width: 130px; font-size: 18px; line-height: 40px; transition: color 0.3s;}
#gnb > ul > li > a:hover {color: var(--color-point);}
#gnb > ul > li.on > a {color: var(--color-point); font-weight: 700;}
#gnb > ul > li > ul {position: absolute; width: 100%; top: calc(100% + 30px); height: 0; overflow: hidden; transition: height 0.3s;}
#gnb > ul > li > ul > li + li {margin-top: 4px;}
#gnb > ul > li > ul > li > a {display: block; white-space: nowrap; transition: color 0.3s;}
#gnb > ul > li > ul > li > a:hover {color: var(--color-point);}
#gnb > ul > li > ul > li.on > a {color: var(--color-point); font-weight: 700;}

#wrapper.gnb-open #header::before {height: 200px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);}
#wrapper.gnb-open #gnb > ul > li > ul {height: 180px;}
#wrapper.fold {padding-top: 60px;}
#wrapper.fold #header div.head {height: 0;}
#wrapper.fold #header div.body {height: 60px;}
#wrapper.fold #header div.body h1 {width: 200px;}


/* footer */
#footer {background-color: #f5f5f5; border-top: 1px solid #e0e0e0;}
#footer div.container {position: relative; max-width: 1200px; margin: 0 auto; height: 200px;}
#footer h2 {position: absolute; left: 0; top: 30px; width: 180px;}
#footer h2 img {filter: grayscale(100%) opacity(0.5);}





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

#main-content {position: relative; max-width: 1200px; margin: 0 auto; min-height: 600px; background-color: yellow; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding-top: 50px; padding-bottom: 100px;}
#main-content > section {position: relative; height: 200px; background-color: #f9f9f9;}





/* sub common */
#sub-visual {position: relative; height: 120px; background-color: yellow;}
body.sub #main {position: relative; max-width: 1200px; margin: 0 auto; min-height: 500px; background-color: #ffffff; padding-top: 50px; padding-bottom: 100px; outline: 1px solid #f9f9f9;}
body.sub #main h2.title {position: relative; font-size: 40px; 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: 80px 0; font-size: 18px;}
body.sub #main h3.title {position: relative; font-size: 30px; 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);}




/* sub pages */









/* module */
ul.content-list {position: relative;}
ul.content-list > li {position: relative; padding-left: 24px;}
ul.content-list > li + li {margin-top: 10px;}
ul.content-list > li::before {content: ''; position: absolute; width: 12px; height: 12px; 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: 140px;}
table.content col.col2 {width: 140px;}

ul.card-list {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px 30px;}
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: 16px; border-top: 2px solid #000000; border-bottom: 2px solid #000000; width: 100%; table-layout: fixed;}
table.board-list th {background-color: #f9f9f9; padding: 8px 0;}
table.board-list td {border-top: 1px solid #e0e0e0; padding: 12px 0; text-align: center;}
table.board-list col.no {width: 80px;}
table.board-list col.file {width: 60px;}
table.board-list col.writer {width: 140px;}
table.board-list col.date {width: 120px;}
table.board-list col.view {width: 100px;}
table.board-list tbody td > a {display: block; text-align: left; padding-left: 20px; padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s;}
table.board-list tbody td > a:hover {color: var(--color-point);}
table.board-list tbody img {display: inline;}
table.board-list + div.pagination {margin-top: 30px;}

div.pagination {display: flex; justify-content: center; gap: 0 4px; color: #666666; font-size: 15px;}
div.pagination a {display: block; position: relative; min-width: 36px; height: 36px; padding: 0 8px; line-height: 34px; 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 4px; margin: 0 8px;}
div.pagination > ol > li.on > a {background-color: var(--color-point); color: #ffffff; border-color: var(--color-point);}



div.image-slide {position: relative; height: 500px; max-width: 1000px; margin: 0 auto;}
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: 14px; height: 14px; 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: 18px;}
div.tab-content > dl {display: flex;}
div.tab-content > dl > dt > a {display: block; width: 140px; line-height: 39px; text-align: center; font-size: 20px; 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 (max-width: 1260px) {
  #header div.body h1 {left: 30px;}
  #gnb > ul {gap: 0 5px;}
  #main-content {padding-left: 30px; padding-right: 30px;}
  #footer div.container {padding-left: 30px; padding-right: 30px;}
  #footer h2 {left: 30px;}
  body.sub #main {padding-left: 30px; padding-right: 30px;}
}






