@charset "UTF-8";

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


/* common */
html {font-family: 'Pretendard Variable', sans-serif; font-weight: 300; font-size: 13px; color: var(--color-text); background: #ffffff; color: #333333;}
#wrapper {overflow: hidden; min-height: 100vh; padding-top: 60px;}
#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: 90px; 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: 60px; background-color: #ffffff; border-bottom: 1px solid #e0e0e0; z-index: 10000;}
#header h1 {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 110px;}
#header h1 a {display: block;}
#header a.menu {position: absolute; width: 32px; height: 24px; right: 20px; top: 50%; transform: translate(0, -50%);}
#header a.menu::before{content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 9px)); width: 100%; height: 2px; border-radius: 10px; background-color: #666666; transition: all 0.3s;}
#header a.menu span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 2px; border-radius: 10px; background-color: #666666; overflow: hidden; text-indent: -999px; transition: all 0.3s;}
#header a.menu::after{content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 9px)); width: 100%; height: 2px; border-radius: 10px; background-color: #666666; transition: all 0.3s;}
#header a.menu.close::before {transform: translate(-50%, -50%) rotate(36deg);}
#header a.menu.close span{opacity: 0;}
#header a.menu.close::after {transform: translate(-50%, -50%) rotate(-36deg);}

#gnb {position: fixed; right: -100%; top: 60px; width: 100%; height: calc(100vh - 60px); background-color: #ffffff; padding: 40px 30px; font-size: 24px; transition: right 0.3s;}
#gnb.open {right: 0;}
#gnb > ul > li + li {margin-top: 30px;}
#gnb > ul > li.on > a {color: #17a0fb; font-weight: 500;}
#gnb > ul > li > a {display: block; padding-left: 20px; position: relative;}
#gnb > ul > li > a::before {content: ''; position: absolute; left: 0; top: -8px; width: 8px; height: 8px; border: 8px solid #ff34a7; border-radius: 100px; z-index: -1; opacity: 0.5;}

#header-menu {position: fixed; right: -100%; bottom: 100px; width: 100%; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; transition: right 0.3s;}
#header-menu.open {right: 0;}
#header-menu > li {flex: 1 1 0; text-align: center;}
#header-menu > li > a {display: block; line-height: 30px; font-size: 13px; border: 1px solid #17a0fb; color: #17a0fb; border-radius: 3px;}
#header-menu > li > a.blue {background-color: #17a0fb; color: #ffffff;}

#main-visual {position: relative; height: 500px; overflow: hidden; background-color: pink;}
#main-visual div.slide > ul > li div.image {position: relative; height: 70%;}
#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: relative; height: 30%; 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: 14px; text-align: center;}
#main-visual div.slide > ul > li div.slogan > p > * {display: block;}
#main-visual div.slide > ul > li div.slogan > p > em {font-size: 20px; font-weight: 700; margin-bottom: 10px;}
#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: 100px; color: #ffffff; opacity: 0.6; transition: opacity 0.7s;}

#main-article {position: relative; padding: 20px 20px 100px 20px;}
#main-article div.search {padding: 40px 0; text-align: center;}
#main-article div.search > div {position: relative;}
#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: 80px; margin: 0 auto; background-color: yellow;}


#footer {position: relative; background-color: #ffffff; font-size: 13px; padding: 30px 20px; background-color: #f9f9f9;}
#footer ul.link {font-size: 15px; font-weight: 400; margin-bottom: 30px;}
#footer ul.link > li + li {margin-top: 6px;}
#footer ul.link > li em {font-weight: 700;}

#footer div.sns {position: absolute; right: 20px; top: 20px; font-size: 10px;}
#footer div.sns > * {vertical-align: middle;}
#footer div.sns em {position: relative; top: 2px; margin-right: 6px;}
#footer div.sns a {font-size: 26px; margin-left: 3px; transition: color 0.3s;}

#footer address > * {display: block; line-height: 1.5em;}
#footer p.copyright {margin-top: 20px; font-size: 11px;}



/* 기사목록 */
ul.article {position: relative;}
ul.article > li {position: relative; font-size: 13px; overflow: hidden; background-color: #ffffff; border-bottom: 1px solid #e0e0e0;}
ul.article > li + li {margin-top: 30px;}
ul.article > li span.image {position: relative; display: block; height: 50vw; 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 0;}
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 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;}
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; text-align: center; font-size: 16px; padding: 16px 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 (min-width: 600px) {
  ul.article {display: grid; grid-template-columns: 1fr 1fr; gap: 30px 20px;}
  ul.article > li {border-bottom: none;}
  ul.article > li + li {margin-top: 0;}
}



/* 버튼 */
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;}



/* 이미지 슬라이드 */
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: 10px; height: 10px; border-radius: 100px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.8); transition: all 0.3s; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);}
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;}


/* pagination */
div.dino-pagination {position: relative; text-align: center; line-height: 28px; font-size: 14px; color: #999999;}
div.dino-pagination a {display: inline-block; min-width: 30px; height: 30px; border: 1px solid #eeeeee; border-radius: 4px; vertical-align: top; padding: 0 8px; transition: border-color 0.3s;}
div.dino-pagination a:hover {border-color: #999999;}
div.dino-pagination > ol {display: inline-flex; vertical-align: top; gap: 5px; margin: 0 10px; max-width: calc(100% - 200px); overflow: auto;}
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: 30px 20px 100px 20px;}

.sns-share {position: absolute; right: 20px; top: 30px; display: flex; gap: 0 6px; font-size: 13px;}
.sns-share > li > a {display: block; position: relative; width: 28px; height: 28px; 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: 15px; margin-bottom: 50px;}
.post-content div.category {font-size: 14px;}
.post-content div.category em {font-weight: 700; font-size: 16px; display: block; margin-bottom: 3px;}
.post-content div.category ul {display: inline-flex;}
.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: 24px; font-weight: 700; margin: 40px 0 30px 0;}
.post-content p.summary {position: relative; padding-left: 16px; font-size: 15px; margin-bottom: 40px;}
.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: 10px;}
.author-info div.profile {position: relative; min-height: 140px; padding-left: 100px; margin-bottom: 2%; margin-bottom: 20px;}
.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 > li + li {margin-top: 10px;}
.author-info div.recent-post > ul > li > a {display: block; overflow: hidden; position: relative;}
.author-info div.recent-post > ul > li span.thumb {float: left; width: 150px; height: 100px; overflow: hidden; margin-right: 15px;}
.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: center;}
.btn-container a.btn {width: 140px; line-height: 34px; font-size: 16px;}