@charset "UTF-8";

/* reset for pc version */
.mobile {display: none !important;}
br.only-m {content: ''; display: none;}
br.only-m:after {content: '\00a0';}


/* common */
html {font-family: 'Pretendard Variable', sans-serif; font-weight: 300; font-size: 14px; color: var(--color-text); background: #ffffff; color: #333333;}
#wrapper {overflow: hidden; min-height: 100vh; padding-top: 80px; transition: all 0.3s;}
#wrapper.scroll {padding-top: 60px; box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.1);}
#skip-nav {position: fixed; left: 0; top: -40px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.7); transition: top 0.3s; z-index: 100000;}
#skip-nav:focus {top: 0;}
#main-before {position: fixed; left: -160px; top: 100px; width: 160px; line-height: 30px; text-align: center; font-size: 14px; color: #ffffff; background-color: rgba(0, 0, 0, 0.5); transition: left 0.3s; z-index: 100000;}
#main-before:focus {left: 0;}


#header {position: fixed; left: 0; top: 0; width: 100%; height: 80px; background-color: #ffffff; border-bottom: 1px solid #e0e0e0; z-index: 10000; transition: all 0.3s;}
#header > div.container {position: relative; max-width: 1200px; height: 100%; margin: 0 auto;}
#header h1 {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 140px;}
#header h1 a {display: block;}
#wrapper.scroll #header {height: 60px; background-color: rgba(255, 255, 255, 0.9);}

#gnb {position: absolute; left: 220px; top: 50%; transform: translate(0, -50%); font-size: 16px;}
#gnb > ul > li {float: left;}
#gnb > ul > li + li {margin-left: 30px;}
#gnb > ul > li > a {transition: all 0.3s;}
#gnb > ul > li.on > a,
#gnb > ul > li > a:hover {color: #17a0fb; font-weight: 500;}
#header-menu {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); font-size: 14px;}
#header-menu > li {float: left;}
#header-menu > li + li {margin-left: 20px;}
#header-menu > li.btn + li.btn {margin-left: 10px;}
#header-menu > li > a:not(.btn) {display: block; line-height: 30px;}
#header-menu > li > a {transition: all 0.3s;}
#header-menu > li > a:hover:not(.btn) {font-weight: 500;}

@media screen and (max-width: 1260px) {
  #header h1 {left: 30px;}
  #header-menu {right: 30px;}
}



#main-visual {position: relative; height: 600px; overflow: hidden;}
#main-visual div.slide > ul > li div.image {position: absolute; left: 0; top: 0; width: 65%; height: 100%;}
#main-visual div.slide > ul > li div.image img {display: block; width: 100%; height: 100%; object-fit: cover;}
#main-visual div.slide > ul > li div.slogan {position: absolute; right: 0; width: 35%; height: 100%; background-color: #f9f9f9;}
#main-visual div.slide > ul > li div.slogan > p {position: absolute; left: 50%; top: 50%; width: 90%; transform: translate(-50%, -50%); font-size: 16px;}
#main-visual div.slide > ul > li div.slogan > p > * {display: block;}
#main-visual div.slide > ul > li div.slogan > p > em {font-size: 24px; font-weight: 700; margin-bottom: 20px;}
#main-visual div.slide > ul > li.video div.image::after {content: '\f144'; font-family: 'Font Awesome 6 Free'; font-weight: 500; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 140px; color: #ffffff; opacity: 0.6; transition: opacity 0.5s;}
#main-visual div.slide > ul > li.video a:hover div.image::after {opacity: 0.9;}


#main-article {position: relative; max-width: 1200px; min-height: 600px; margin: 0 auto; padding-bottom: 50px;}
#main-article div.search {padding: 40px 0; text-align: center;}
#main-article div.search > div {display: inline-block; position: relative; width: 60%;}
#main-article div.search input {font: inherit; font-size: 20px; border: none; width: 100%; height: 50px; border-bottom: 2px solid #e0e0e0; padding-left: 20px; padding-right: 80px; outline: none; transition: all 0.3s;}
#main-article div.search input:focus {border-bottom-color: #17a0fb;}
#main-article div.search button {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); background-color: #ffffff; border: none; font-size: 24px; color: #999999; transition: color 0.3s;}
#main-article div.search input:focus + button {color: #17a0fb;}
#main-article div.search ::placeholder {color: #e0e0e0;}
#main-article div.dino-pagination {margin-top: 30px;}



#main-banner > div.container {position: relative; height: 150px; max-width: 1200px; margin: 0 auto; background-color: yellow;}


#footer {background-color: #ffffff; font-size: 13px;}
#footer > div.container {position: relative; max-width: 1200px; margin: 0 auto; padding: 50px 0 100px 0;}
#footer ul.link {display: flex; gap: 0 50px; margin-bottom: 20px; font-size: 14px; font-weight: 400;}
#footer ul.link > li em {font-weight: 500;}
#footer ul.link > li > a {transition: color 0.3s;}
#footer ul.link > li > a:hover {color: #17a0fb;}
#footer div.sns {position: absolute; right: 0; top: 45px; font-size: 10px;}
#footer div.sns > * {vertical-align: middle;}
#footer div.sns em {position: relative; top: 2px; margin-right: 10px;}
#footer div.sns a {font-size: 26px; margin-left: 6px; transition: color 0.3s;}
#footer div.sns a:hover {color: #17a0fb;}
#footer address {display: flex; gap: 0 10px; border-top: 1px solid #aaaaaa; padding-top: 20px;}
#footer address span + span::before {content: '|'; margin-right: 10px; font-size: 10px; color: #aaaaaa;}
#footer p.copyright {margin-top: 5px;}

@media screen and (max-width: 1260px) {
  #footer > div.container {padding: 50px 30px 100px 30px;}
  #footer div.sns {right: 30px;}
  #footer address {font-size: 12px;}
  #footer p.copyright {font-size: 12px;}
}



/* 이미지 슬라이드 */
div.image-slide {position: relative; height: 100%; overflow: hidden;}
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 > a {display: block; width: 100%; height: 100%;}
div.image-slide div.indicator {position: absolute; left: 0; bottom: 20px; width: 100%; text-align: center; font-size: 0; z-index: 10;}
div.image-slide div.indicator > ul {display: inline-flex; gap: 0 10px; vertical-align: top;}
div.image-slide div.indicator > ul > li > a {display: block; width: 14px; height: 14px; border-radius: 100px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.8); transition: all 0.3s;}
div.image-slide div.indicator > ul > li.on > a {width: 60px; background-color: rgba(255, 255, 255, 0.6);}
div.image-slide div.control {display: none;}


/* 기사목록 */
ul.article {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px 20px;}
ul.article > li {position: relative; font-size: 13px; overflow: hidden; background-color: #ffffff;}
ul.article > li span.image {position: relative; display: block; height: 180px; overflow: hidden;}
ul.article > li span.image img {display: block; width: 100%; height: 100%; object-fit: cover; transition: all 0.6s;}
ul.article > li.video span.image::after {content: '\f144'; font-family: 'Font Awesome 6 Free'; font-weight: 500; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 60px; color: #ffffff; opacity: 0.6; transition: opacity 0.5s;}
ul.article > li a:hover span.image img {transform: scale(1.1);}
ul.article > li.video a:hover span.image::after {opacity: 0.9; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);}
ul.article > li div.content {padding: 20px 15px;}
ul.article > li div.content > * {display: block;}
ul.article > li em.title {font-size: 18px; line-height: 1.3em; height: 2.6em; font-weight: 500; overflow: hidden; margin: 5px 0 10px 0; transition: color 0.3s;}
ul.article > li a:hover em.title {color: #17a0fb;}
ul.article > li p.summary {font-size: 14px; line-height: 1.3em; height: 2.6em; overflow: hidden; margin-bottom: 10px;}
ul.article > li span.date {font-size: 12px;}
ul.article > li ul.tag {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; margin-bottom: 20px; padding-left: 20px;}
ul.article > li ul.tag > li {display: inline-block; vertical-align: top; margin-right: 6px;}
ul.article > li ul.tag > li > a {transition: all 0.3s;}
ul.article > li ul.tag > li > a:hover {color: #17a0fb;}
ul.article > li ul.tag > li > a::before {content: '#'; margin-right: 3px;}
ul.article > li.no-info {border: 1px solid #e0e0e0; grid-column: 1/5; text-align: center; font-size: 20px; padding: 20px 0; color: #999999;}
ul.article > li.no-info p::before {content: '\f071'; font-family: "Font Awesome 6 Free"; font-weight: 700; color: #ffcc02; font-size: 1.3em; vertical-align: middle; margin-right: 10px;}
@media screen and (max-width: 1260px) {
  ul.article {padding: 0 20px;}
}
@media screen and (max-width: 1100px) {
  ul.article {grid-template-columns: 1fr 1fr 1fr; gap: 40px 20px;}
}




/* 버튼 */
a.btn {position: relative; display: inline-block; border: 1px solid #17a0fb; color: #17a0fb; background-color: #ffffff; border-radius: 3px; line-height: 28px; font-size: 13px; min-width: 100px; padding: 0 10px; text-align: center; vertical-align: top;}
a.btn > span {position: relative;}
a.btn::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.05); opacity: 0; transition: opacity 0.3s;}
a.btn:hover::before {opacity: 1;}

a.btn.blue {background-color: #17a0fb; color: #ffffff;}


/* 폼 */




/* pagination */
div.dino-pagination {position: relative; text-align: center; line-height: 32px; font-size: 14px; color: #999999;}
div.dino-pagination a {display: inline-block; min-width: 34px; height: 34px; border: 1px solid #eeeeee; border-radius: 4px; vertical-align: top; padding: 0 8px; transition: border-color 0.3s; overflow: hidden;}
div.dino-pagination a:hover {border-color: #999999;}
div.dino-pagination > ol {display: inline-flex; vertical-align: top; gap: 2px; margin: 0 10px;}
div.dino-pagination > ol > li.on > a {background-color: #17a0fb; color: #ffffff; border-color: transparent;}
div.dino-pagination.circle a {border-radius: 100px;}
div.dino-pagination a span {position: absolute; left: -999px;}


/* 기사 상세 보기 */
.post-container {position: relative; max-width: 820px; margin: 0 auto; padding: 50px 0 100px 0;}

.sns-share {position: absolute; right: 0; top: 40px; display: flex; gap: 0 6px; font-size: 14px;}
.sns-share > li > a {display: block; position: relative; width: 34px; height: 34px; border: 1px solid #e0e0e0; background-color: #f9f9f9; border-radius: 100px; transition: all 0.3s;}
.sns-share > li > a:hover {border-color: #17a0fb; background-color: #f9f9f9;}
.sns-share > li > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.post-content {font-size: 16px; margin-bottom: 50px;}
.post-content div.category {font-size: 15px;}
.post-content div.category em {font-weight: 700;}
.post-content div.category ul {display: inline-flex;}
.post-content div.category ul::before {content: '|'; margin: 0 10px;}
.post-content div.category ul.tag > li::before {content: '#'; margin-right: 5px;}
.post-content div.category ul.tag > li + li {margin-left: 10px;}
.post-content h3.title {font-size: 28px; font-weight: 700; margin: 50px 0 30px 0;}
.post-content p.summary {position: relative; padding-left: 20px; font-size: 16px; margin-bottom: 50px;}
.post-content p.summary::before {content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: #17a0fb;}
.post-content .youtube-content {text-align: center; margin: 30px 0;}
.post-content .youtube-content iframe {max-width: 100%;}
.post-content .editor-content {margin: 30px 0; line-height: 1.6em;}
.post-content .editor-content p {margin: 10px 0;}

.author-info {background-color: #edf3fe; padding: 30px;}
.author-info div.profile {position: relative; min-height: 140px; padding-left: 110px; margin-bottom: 2%;}
.author-info div.profile span.photo {position: absolute; left: 0; top: 0; width: 80px; height: 100px;}
.author-info div.profile span.name {display: block; font-size: 18px; font-weight: 500; line-height: 24px; margin-bottom: 10px;}
.author-info div.profile span.name span {display: inline-block; font-size: 14px; font-weight: 300; padding: 0 10px; background-color: #2f4a8c; color: #ffffff; border-radius: 100px; margin-right: 5px;}
.author-info div.recent-post {position: relative;}
.author-info div.recent-post > em {display: block; font-size: 16px; font-weight: 500; margin-bottom: 10px;}
.author-info div.recent-post > ul {display: flex; gap: 0 30px;}
.author-info div.recent-post > ul > li {flex: 1 1 0; max-width: calc(33.33% -  20px);}
.author-info div.recent-post > ul > li > a {display: block;}
.author-info div.recent-post > ul > li span.thumb {display: block; height: 150px; overflow: hidden;}
.author-info div.recent-post > ul > li span.thumb img {width: 100%; height: 100%; object-fit: cover;}
.author-info div.recent-post > ul > li span.title {display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 10px 0;}
.author-info div.recent-post > ul > li span.date {font-size: 13px;}

.btn-container {margin: 50px 0; text-align: right;}
.btn-container a.btn {width: 160px; line-height: 40px; font-size: 18px;}