@charset "UTF-8";

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


/* common */
html {font-family: 'NotoSansKR', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 500; font-size: 15px; color: #333333; background: #ffffff; line-height: 1.4;}
#wrapper {min-width: 1000px; overflow: hidden; min-height: 100vh;}
#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;}

#header {position: relative; background: #ffffff; border-bottom: 1px solid #e4e8eb; z-index: 10000;}
#header-top {border-bottom: 1px solid #e4e8eb;}
#header-top div.box {position: relative; max-width: 1000px; margin: 0 auto; line-height: 30px; height: 30px;}
#header-top a.user {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); font-size: 12px; padding-left: 26px; color: #666666;}
#header-top a.user span.face {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 20px; height: 20px; border: 1px solid #e0e0e0; border-radius: 100px; background: #ffffff url(/img/common/icon_face.png) center center no-repeat; background-size: cover;}
#header-top a.user span.message em {font-weight: 700; color: #146e6e;}
#header-top a.user span.message span {font-weight: 400; color: #146e6e; font-size: 11px;}
#top-menu {position: absolute; right: 20px; top: 0; font-size: 15px;}
#top-menu li {float: left; position: relative;}
#top-menu li + li:before {content: '|'; margin: 0 20px; font-size: 5px; color: #e0e0e0; position: relative; top: -1px;}
#top-menu li a {transition: color 0.3s;}
#top-menu li a:hover {color: #146e6e;}
#top-menu li.search input {border: 1px solid #146e6e; width: 180px; height: 24px; border-radius: 100px; padding: 0 30px 0 15px; vertical-align: middle;}
#top-menu li.search button {position: absolute; right: 5px; top: 50%; transform: translate(0, -50%); color: #999999; border: none; background-color: transparent;}
#top-menu li.search button:hover {color: #146e6e;}
#header-bottom div.box {position: relative; max-width: 1000px; margin: 0 auto; height: 70px;}
#header h1 {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 160px;}
#header h1 > a {display: block;}
#header h1 > a img {width: 100%;}
#gnb {position: absolute; right: 0; top: 0; height: 70px; font-size: 16px; text-align: center; overflow: hidden; transition: height 0.3s;}
#gnb > ul > li {float: left; position: relative; width: 130px;}
#gnb > ul > li + li {margin-left: 10px;}
#gnb > ul > li + li::before {content: ''; position: absolute; top: 70px; left: -1px; width: 1px; height: 220px; background-color: #e4e8eb;}
#gnb > ul > li > a {font-size: 18px; line-height: 70px; display: block;}
#gnb > ul > li > ul {height: 180px; padding-top: 20px;}
#gnb > ul > li > ul > li + li {margin-top: 10px;}
#gnb > ul > li > ul > li > a {display: block; line-height: 26px;}
#gnb a {transition: color 0.3s;}
#gnb li.on > a,
#gnb a:hover {color: #146e6e;}
#header::before {content: ''; position: absolute; left: 0; top: calc(100% + 1px); width: 100%; height: 0; box-shadow: none; transition: all 0.3s; background: url(/img/gnb-bg-01.png) calc(50% - 333px) bottom no-repeat, #ffffff url(/img/gnb-bg-02.png) calc(50% + 600px) top no-repeat; background-color: #ffffff; background-size: auto 200px, auto 130px;}
#header.on::before {height: 220px; box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);}
#header.on::after {height: 220px; opacity: 1;}
#header.on #gnb {height: 280px;}
#main-before {position: fixed; width: 200px; left: -200px; text-align: center; line-height: 40px; color: #ffffff; background-color: rgba(0, 0, 0, 0.6); z-index: 10000; transition: left 0.3s;}
#main-before:focus {left: 0;}

#footer {background: #fafbfc; color: #777777; font-size: 13px; border-top: 1px solid #e4e8eb;}
#footer > div.box {position: relative; max-width: 1000px; margin: 0 auto; padding: 40px 0 50px 180px;}
#footer h2 {position: absolute; left: 0; top: 40px; width: 140px;}
#footer ul.link {overflow: hidden; margin-bottom: 20px;}
#footer ul.link li {float: left;}
#footer ul.link li + li:before {content: '|'; margin: 0 12px; font-size: 2px; color: #e4e8eb; position: relative; top: -1px;}
#footer ul.link em {color: #146e6e; font-weight: 700;}
#footer address span.info > span + span::before {content: '|'; position: relative; top: -2px; margin: 0 15px; font-size: 0.9em; color: #e4e8eb;}
#footer address span.address {display: block; margin-bottom: 5px; margin-top: 5px;}
#footer address span.phone {display: block; margin-bottom: 5px;}
#footer address span.fax + span:before {content: '|'; margin: 0 12px; font-size: 2px; color: #e4e8eb; position: relative; top: -1px;}
#footer address span em {color: #146e6e; font-weight: 700; margin-right: 10px;}
#footer p.support {margin-top: 10px;}
#footer p.support em {color: #146e6e; font-weight: 700;}
#footer p.support a {color: #146e6e;}
#footer p.support a:hover {text-decoration: underline;}
#footer p.support > span {font-weight: 400;}
#footer p.support > span + span {margin-left: 10px;}
#footer p.support > span.new-line::before {content: ''; display: block;}
#footer p.copyright {font-size: 12px; margin-top: 15px; color: #999999;}
#footer ul.rel-logo {position: absolute; right: 0; top: 30px;}
#footer ul.rel-logo li {display: inline-block; vertical-align: middle;}
#footer ul.rel-logo li + li {margin-left: 15px;}
#footer ul.rel-logo li a {display: block;}
#footer ul.rel-logo li a img {height: 30px;}
#footer ul.rel-logo li.wa a img {height: 45px;}
#footer p.rel-org {position: absolute; right: 0; top: 70px;}
#footer p.rel-org select {height: 24px; font-size: 12px;}


/* main */
#main-visual {position: relative; background: #ffffff; overflow: hidden;}
#main-visual div.image-slide ul.slide > li {background: #ffffff url(/img/main-visual-01.jpg) center center no-repeat; background-size: cover; text-indent: -9999px;}
#main-visual div.image-slide div.slogan {position: absolute; left: calc(50% - 230px); top: 50%; transform: translate(-50%, -50%); color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); transition: color 0.3s;}
#main-visual div.image-slide div.slogan.black {color: #000000; text-shadow: none;}
#main-visual div.image-slide div.slogan span.eng {display: block; font-size: 20px; margin-bottom: 20px;}
#main-visual div.image-slide div.slogan p.title {font-size: 36px; letter-spacing: -2px;}
#main-visual div.image-slide div.slogan p.title em.yellow {color: #fcf876; font-size: 40px;}
#main-visual div.image-slide div.slogan.black p.title em.yellow {color: #444444;}
#main-visual div.image-slide div.slogan p.title em.title {display: block; font-size: 50px; font-weight: 700; margin-top: -5px;}

#main-content > div.box {max-width: 1000px; margin: 0 auto; padding: 60px 0; overflow: hidden;}
#main-content > div.box > div {float: left; width: 30%; position: relative;}
#main-content > div.box > div + div {margin-left: 5%;}
#main-content h3 {position: relative; font-size: 22px; font-weight: 700; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px solid #e4e8eb;}
#main-content div.board ul.list li {position: relative; padding-right: 80px;}
#main-content div.board ul.list li + li {margin-top: 12px;}
#main-content div.board ul.list li a {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color 0.3s;}
#main-content div.board ul.list li a:hover {color: #146e6e;}
#main-content div.board ul.list li span {position: absolute; right: 0; top: 0; font-size: 13px; color: #999999;}
#main-content div.board ul.list li.no-data {position: relative; border: 1px solid #e0e0e0; border-radius: 4px; color: #999999; height: 40px; overflow: hidden;}
#main-content div.board ul.list li.no-data > p {position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
#main-content div.board ul.list li.no-data i {color: #ffcc00; margin-right: 10px;}
#main-content div.board ul.thumb li + li {margin-top: 10px;}
#main-content div.board ul.thumb li > a {display: block; position: relative; height: 70px; overflow: hidden; padding-left: 120px;}
#main-content div.board ul.thumb li > a span.thumb {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100px; height: 100%; border-radius: 4px; overflow: hidden; border: 1px solid #f5f5f5; background: #ffffff url(/img/logo-cover.png) center center no-repeat; background-size: cover; text-indent: -9999px;}
#main-content div.board ul.thumb li > a em.title {display: block; line-height: 20px; height: 40px; overflow: hidden; transition: color 0.3s;}
#main-content div.board ul.thumb li > a:hover em.title {color: #146e6e;}
#main-content div.board ul.thumb li > a span.date {position: absolute; left: 120px; bottom: 5px; font-size: 12px; color: #999999;}
#main-content div.board ul.thumb li.no-data {position: relative; border: 1px solid #e0e0e0; border-radius: 4px; color: #999999; height: 70px; overflow: hidden;}
#main-content div.board ul.thumb li.no-data > p {position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
#main-content div.board ul.thumb li.no-data i {color: #ffcc00; margin-right: 10px;}
#main-content div.board a.more {position: absolute; right: 0; top: 2px; font-size: 20px; transition: color 0.3s; color: #146e6e;}
#main-content div.board a.more i {transition: transform 0.3s;}
#main-content div.board a.more:hover i {transform: rotate(180deg);}


#main-content div.image-slide {height: 150px; font-size: 10px;}
#main-content div.image-slide ul.slide > li > a {display: block; padding-left: 140px;}
#main-content div.image-slide ul.slide > li > a > * {display: block;}
div.image-slide ul.slide > li span.cover {position: absolute; left: 0; top: 0; width: 120px; height: 100%; border: 1px solid #f5f5f5; background: #ffffff url(/img/logo-cover.png) center center no-repeat; background-size: cover; text-indent: -9999px;}
#main-content div.image-slide ul.slide > li em.title {font-size: 16px; font-weight: 700; margin-bottom: 10px; transition: color 0.3s; line-height: 20px; max-height: 60px; overflow: hidden;}
#main-content div.image-slide ul.slide > li > a:hover em.title {color: #146e6e;}
#main-content div.image-slide ul.slide > li span.author {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#main-content div.image-slide ul.slide > li span.date {font-size: 12px; color: #999999; margin-top: 5px;}
#main-content div.image-slide ul.slide > li.no-data {position: relative; border: 1px solid #e0e0e0; border-radius: 4px; color: #999999; height: 150px; overflow: hidden;}
#main-content div.image-slide ul.slide > li.no-data > p {position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
#main-content div.image-slide ul.slide > li.no-data i {color: #ffcc00; margin-bottom: 10px; display: block; font-size: 40px;}
#main-content div.image-slide .indicator {bottom: 5px; width: auto; left: initial; right: 10px;}
#main-content div.image-slide a.prev {left: 5px;}
#main-content div.image-slide a.next {right: 5px;}

#main-banner {position: relative; max-width: 1000px; margin: 40px auto;}
#main-banner div.banner-slide ul.banner > li > a img {max-width: 150px;}



/* main popup */
#main-popup {position: fixed; left: 0; top: 0; z-index: 11000; box-shadow: 2px 2px 15px 0 rgba(0, 0, 0, 0.5); display: none;}
#main-popup div.header {height: 45px; background: #45a569; position: relative;}
#main-popup div.header h2 {position: absolute; left: 10px; top: 8px;}
#main-popup div.header a.close {position: absolute; right: 0; top: 0; width: 45px; height: 45px; display: block; text-indent: -9999px; overflow: hidden; background: #278f4e url(/img/popup_btn_close.png) center center no-repeat;}
#main-popup div.footer {line-height: 30px; background: #45a569; color: #ffffff; padding: 0 20px; text-align: right;}
#main-popup div.footer input {margin-right: 3px;}



/* sub (common) */
#content-body {overflow: hidden; padding-bottom: 100px; min-height: calc(100vh - 271px);}
#lnb {position: relative; background-color: #f9f9f9; border-bottom: 1px solid #e0e0e0;}
#lnb::before {content: ''; position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-color: #146e6e;}
#lnb > div.title {position: relative; height: 140px; background: #ffffff url(/img/sub-visual.jpg) center center no-repeat; background-size: cover;}
#lnb > div.title h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 38px; font-weight: 400;}
#lnb > nav {position: relative; max-width: 1000px; margin: 0 auto; height: 60px; overflow: hidden; background-color: #f9f9f9;}
#lnb > nav h2 {height: 100%; width: 160px; font-size: 20px; font-weight: 400; background-color: #146e6e; color: #ffffff; line-height: 60px; text-align: center;}
#lnb > nav > ul {position: absolute; left: 200px; top: 50%; transform: translate(0, -50%);}
#lnb > nav > ul > li {float: left;}
#lnb > nav > ul > li + li {margin-left: 20px;}
#lnb > nav > ul > li > a {display: block; font-size: 16px; padding: 6px 18px; border: 1px solid #e0e0e0; border-radius: 100px; min-width: 120px; text-align: center; background-color: #ffffff; transition: border-color 0.3s;}
#lnb > nav > ul > li > a:hover {border-color: #146e6e;}
#lnb > nav > ul > li.on > a {border-color: #146e6e; font-weight: 700; color: #146e6e;}

body.sub #main {position: relative; max-width: 1000px; margin: 0 auto;}

section.main-header {position: relative; height: 120px; background: url(/img/gnb-bg-02.png) right 200px top no-repeat; background-size: auto 100%; margin-bottom: 50px;}
section.main-header h2 {position: absolute; left: 0; bottom: 20px; font-size: 36px;}
section.main-header:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-image: linear-gradient(to right, #146e6e, #eeeeee);}
#bread-crumb {position: absolute; right: 0; bottom: 15px; font-size: 14px; color: #777777;}
#bread-crumb li {float: left;}
#bread-crumb li + li:before {content: "\f054"; font-family: "Font Awesome 5 Free"; font-weight: 700; margin: 0 12px; font-size: 10px; color: #aaaaaa;}
#bread-crumb li a {transition: color 0.3s;}
#bread-crumb li a:hover {color: #146e6e; text-decoration: underline;}
#bread-crumb li em {color: #146e6e;}

body.sub #main section.content + section.content {margin-top: 60px;}
section.content {font-size: 20px; line-height: 1.6;}
section.content h3.title {background-color: #ddeff0; color: #146e6e; font-size: 24px; font-weight: 500; padding: 15px 30px; margin: 50px 0 25px 0;}
section.content p.title {font-size: 24px; font-weight: 700;}
section.content p.paragraph {margin: 10px 0; padding: 0 30px;}
section.content h4.title {position: relative; margin: 25px 0 10px 0; padding-left: 30px; font-size: 22px; font-weight: 500;}
section.content h4.title::before {content: '\f654'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); color: #146e6e;}
section.content ul.circle {text-align: center; font-size: 20px;}
section.content ul.circle > li {border: 1px solid #146e6e; padding: 16px 30px; border-radius: 100px;}
section.content ul.circle > li + li {margin-top: 20px;}

div.history {position: relative; font-size: 20px; color: #666666;}
div.history::before {content: ''; position: absolute; left: 22px; top: 20px; width: 2px; height: calc(100% - 40px); background-color: #ddeff0;}
div.history h4.year {position: relative; font-size: 36px; color: #146e6e; padding-left: 60px;}
div.history h4.year::before {content: ''; position: absolute; left: 10px; top: 50%; transform: translate(0, -50%); width: 20px; height: 20px; border: 2px solid #146e6e; background-color: #ffffff;}
div.history h4.year::after {content: ''; position: absolute; left: 16px; top: 50%; transform: translate(0, -50%); width: 12px; height: 12px; background-color: #146e6e;}
div.history ul + h4.year {margin-top: 40px;}
div.history ul {margin-left: 80px; margin-top: 10px;}
div.history ul > li {padding-left: 44px; text-indent: -44px; position: relative;}
div.history ul > li::before {content: ''; position: absolute; left: -62px; top: 11px; width: 10px; height: 10px; background-color: #cccccc; border-radius: 100px;}
div.history ul > li + li {margin-top: 5px;}
div.history ul > li em.month {font-size: 20px; font-weight: 700; color: #146e6e; margin-right: 20px;}

ul.support {margin: 30px 0; font-size: 20px;}
ul.support > li {position: relative; padding: 20px 0 20px 40px;}
ul.support > li + li {margin-top: 2px; border-top: 1px solid #ddeff0;}
ul.support > li::before {content: '\f654'; font-family: 'Font Awesome 6 Free'; font-weight: 700; font-size: 1.2em; position: absolute; left: 0; top: 20px; color: #146e6e;}
ul.support > li > p span {font-size: 18px; color: #777777; display: block;}
ul.support > li > p a {font-size: 18px; color: #146e6e;}


/* sub */
body.login #login-box {position: relative; max-width: 600px; margin: 0 auto; padding: 40px 20px; border-top: 2px solid #e4e8eb; border-bottom: 2px solid #e4e8eb; padding-left: 300px; overflow: hidden;}
body.login #login-box::before {content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 700; font-size: 100px; position: absolute; left: 80px; top: 50%; transform: translate(0, -50%); color: #146e6e;}
body.login #login-box::after {content: ''; position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 200px; height: 200px; border: 2px solid #e0e0e0; border-radius: 300px;}
body.login #login-box ul.form li + li {margin-top: 10px;}
body.login #login-box ul.form input.text {height: 36px; font-size: 18px; padding: 0 20px;}
body.login #login-box ul.form input[type="checkbox"] + label {padding-left: 6px;}
body.login #login-box ul.form li.button {text-align: center;}

div.sitemap {text-align: center;}
div.sitemap > ul > li {display: inline-block; width: 25%; margin: 0 50px 80px 0; vertical-align: top; text-align: left;}
div.sitemap > ul > li:nth-child(3n) {margin-right: 0;}
div.sitemap > ul > li > a {display: block; line-height: 50px; background-image: linear-gradient(to right, #146e6e, #a6ac1a); color: #ffffff; padding-left: 10px; font-size: 18px; border-top-right-radius: 30px;}
div.sitemap > ul > li > ul > li {border-bottom: 1px solid #e4e8eb;}
div.sitemap > ul > li > ul > li > a {display: block; line-height: 36px; padding-left: 20px; transition: all 0.3s;}
div.sitemap > ul > li > ul > li > a:hover {color: #146e6e; background-color: #fafbfc;}

ul.advisor {position: relative; overflow: hidden; margin-bottom: 50px;}
ul.advisor > li {position: relative; float: left; width: 50%; line-height: 30px; padding-left: 30px; line-height: 40px;}
ul.advisor > li::before {content: '\f654'; font-family: 'Font Awesome 6 Free'; font-weight: 700; font-size: 0.8em; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); color: #146e6e;}
ul.advisor > li > span.job {font-size: 16px; color: #666666;}
ul.advisor > li > span.job.long {letter-spacing: -1px;}

ul.ambassador {position: relative; display: flex; gap: 30px; flex-wrap: wrap;}
ul.ambassador > li {position: relative; width: 48%; height: 100px; padding-left: 140px; box-sizing: border-box;}
ul.ambassador > li span.photo {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100px; height: 100px; border-radius: 100px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1);}
ul.ambassador > li span.photo img {object-fit: cover;}
ul.ambassador > li p.profile {font-size: 16px; font-weight: 400; position: relative; top: 50%; transform: translate(0, -50%);}
ul.ambassador > li p.profile em {display: block; font-size: 24px;}

div.volunteer-contact {position: relative; border: 2px solid #e0e0e0; border-radius: 20px; padding: 20px; font-size: 18px; text-align: center;}
div.volunteer-contact > p {margin-bottom: 20px;}
div.volunteer-contact ul.contact {display: inline-flex; gap: 100px;}
div.volunteer-contact ul.contact > li i {color: #146e6e; font-size: 30px; margin-right: 10px;}


/* library (book) */
div.book-search {text-align: center; margin-bottom: 20px;}
div.book-search > * {display: inline-block; vertical-align: top; font-size: 20px;}
div.book-search > * + * {margin-left: 5px;}
div.book-search > input.text {width: 50%; height: 50px; border: 2px solid #e0e0e0; border-radius: 100px; padding: 0 30px; color: #146e6e; background-color: #ffffff; font-size: 24px; transition: border-color 0.3s;}
div.book-search > input.text:focus {border-color: #146e6e;}
div.book-search > input.text::placeholder {font-size: 16px;}
div.book-search > button {width: 140px; height: 50px; background-color: #146e6e; border: none; border-radius: 100px; color: #ffffff; cursor: pointer;}
div.book-search > a {min-width: 120px; height: 50px; background-color: #ffffff; border: 2px solid #e0e0e0; border-radius: 100px; padding: 0 10px; line-height: 46px; font-size: 16px;}
div.book-search > a > i {font-size: 14px; margin-left: 10px; color: #999999;}
div.book-search > a.on > i {transform: rotate(180deg);}

div.form-search {overflow: hidden; height: auto; display: none;}
div.form-search.on {display: block;}
div.form-search > ul {overflow: hidden; border: 2px solid #e0e0e0; border-radius: 10px; padding: 20px 30px 10px 30px;}
div.form-search > ul > li {float: left; width: calc(50% - 10px); margin-bottom: 10px;}
div.form-search > ul > li.full {width: 100%;}
div.form-search > ul > li:not(.full):nth-child(2n + 1) {margin-left: 20px;}
div.form-search > ul > li > label {display: inline-block; min-width: 100px; text-align: center; background-color: #f9f9f9; border-radius: 5px; line-height: 26px; padding: 0 10px; font-size: 14px; border: 1px solid #e0e0e0; vertical-align: top;}
div.form-search > ul > li button {width: 140px; height: 30px; background-color: #146e6e; border: none; border-radius: 100px; color: #ffffff; cursor: pointer; font-size: 13px; vertical-align: top;}
div.form-search > ul > li button i {margin-right: 8px;}

div.book-list {position: relative;}
div.book-list > p.no-list {font-size: 13px; margin-bottom: 10px;}
div.book-list > p.no-list em {color: #e2161c; font-weight: 700;}
div.book-list > ul {overflow: hidden;}
div.book-list > ul > li {float: left; width: calc(50% - 25px); margin-bottom: 30px;}
div.book-list > ul > li:nth-child(2n) {margin-left: 50px;}
div.book-list > ul > li > a {display: block; position: relative; height: 200px; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background-color: #ffffff; padding: 15px 15px 15px 165px; transition: all 0.3s;}
div.book-list > ul > li > a > * {display: block;}
div.book-list > ul > li span.cover {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 120px; height: 170px; border: 1px solid #e0e0e0; overflow: hidden; background-color: #ffffff;}
div.book-list > ul > li span.cover img {display: block; max-width: 100%; max-height: 100%; margin: 0 auto;}
div.book-list > ul > li em.title {font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; transition: all 0.3s;}
div.book-list > ul > li span.sub-title {font-size: 12px; color: #999999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.book-list > ul > li ul.info {font-size: 13px; color: #999999; margin-top: 20px;}
div.book-list > ul > li ul.info > li + li {margin-top: 3px;}
div.book-list > ul > li ul.info > li em {color: #000000; font-weight: 700;}
div.book-list > ul > li > a:hover {border-color: #146e6e;}
div.book-list > ul > li > a:hover em.title {color: #146e6e;}
div.book-list > ul > li.no-data {position: relative; border: 1px solid #e0e0e0; border-radius: 4px; color: #999999; height: 70px; overflow: hidden; width: 100%; font-size: 20px;}
div.book-list > ul > li.no-data > p {position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
div.book-list > ul > li.no-data i {color: #ffcc00; margin-right: 10px;}

section.content h3.book-title {position: relative; font-size: 24px; margin-bottom: 40px; padding-left: 30px;}
section.content h3.book-title::before {content: ''; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; border: 2px solid #146e6e; border-radius: 50px;}
div.book-detail {position: relative; overflow: hidden; margin-bottom: 40px;}
div.book-detail > div.cover {position: absolute; left: 0; top: 0; width: 40%; height: 100%;}
div.book-detail > div.detail {margin-left: 40%;}
div.book-detail div.cover img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-height: 80%; max-width: 80%; padding: 5px; border: 1px solid #e0e0e0; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);}

ul.book-category {position: relative; overflow: hidden;}
ul.book-category > li {float: left;}
ul.book-category > li + li::before {content: '>'; margin: 0 10px; color: #999999;}



/* module */
div.image-slide {position: relative; height: 600px; font-size: 20px;}
div.image-slide > div.container {position: relative; overflow: hidden; height: 100%;}
div.image-slide > div.container p.bg {position: relative; opacity: 0.1;}
div.image-slide ul.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.image-slide ul.slide > li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
div.image-slide ul.slide > li.on {display: block;}
div.image-slide span.bar {position: absolute; left: 0; bottom: 0; width: 0%; height: 0.3em; z-index: 100; background-color: rgba(0, 0, 0, 0.2);}
div.image-slide span.bar.on {animation: image-slide-bar 3s linear 0s 1 normal forwards;}
div.image-slide .indicator {position: absolute; bottom: 1em; left: 0; width: 100%; text-align: center;}
div.image-slide .indicator ul {display: inline-block; vertical-align: middle;}
div.image-slide .indicator ul > li {float: left;}
div.image-slide .indicator ul > li + li {margin-left: 0.8em;}
div.image-slide .indicator ul > li > a {display: block; width: 0.8em; height: 0.8em; background-color: rgba(255, 255, 255, 0.8); border-radius: 100px; overflow: hidden; text-indent: -999px; transition: width 0.3s; border: 1px solid #146e6e;}
div.image-slide .indicator ul > li.on > a {background-color: #146e6e; width: 4em;}
div.image-slide .indicator a.play {display: inline-block; vertical-align: middle; font-size: 1em; overflow: hidden; transition: all 0.3s; border-radius: 2px; color: #146e6e; margin-left: 1em;}
div.image-slide .indicator a.play::before {content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 700;}
div.image-slide .indicator a.play span {position: absolute; left: -999px;}
div.image-slide .indicator a.play span:nth-of-type(1) {display: block;}
div.image-slide .indicator a.play span:nth-of-type(2) {display: none;}
div.image-slide .indicator a.play.on::before {content: '\f04c';}
div.image-slide .indicator a.play.on span + span {display: block;}
div.image-slide .indicator a.play.on span:nth-of-type(1) {display: none;}
div.image-slide .indicator a.play.on span:nth-of-type(2) {display: block;}
div.image-slide .control a.prev,
div.image-slide .control a.next {position: absolute; top: 50%; transform: translate(0, -50%); width: 2em; height: 4em; transition: all 0.3s;}
div.image-slide .control a.prev {left: 2em;}
div.image-slide .control a.next {right: 2em;}
div.image-slide .control a.prev:hover,
div.image-slide .control a.next:hover {background-color: rgba(0, 0, 0, 0.1);}
div.image-slide .control a.prev img,
div.image-slide .control a.next img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; transition: all 0.1s;}
div.image-slide .control a.prev:active img {left: calc(50% - 0.3em);}
div.image-slide .control a.next:active img {left: calc(50% + 0.3em);}
@keyframes image-slide-bar {
    0% {width: 0%;}
    100% {width: 100%;}
}

div.banner-slide {position: relative; height: 70px; margin: 0 auto; border: 1px solid #e0e0e0; padding: 0 30px; background-color: #ffffff;}
div.banner-slide > .container {position: relative; height: 100%; overflow: hidden;}
div.banner-slide ul.banner {position: absolute; left: 0; top: 0; width: 5000px; height: 100%;}
div.banner-slide ul.banner > li {float: left; height: 100%; padding: 10px 15px; min-width: 100px;}
div.banner-slide ul.banner > li + li {margin-left: 10px;}
div.banner-slide ul.banner > li > a {position: relative; display: block; height: 100%;}
div.banner-slide ul.banner > li > a img {position: relative; max-height: 40px; top: 50%; transform: translate(0, -50%);}
div.banner-slide a.prev,
div.banner-slide a.next {position: absolute; top: 0; width: 30px; height: 100%; background-color: #ffffff;}
div.banner-slide a.prev {left: 0; border-right: 1px solid #e0e0e0;}
div.banner-slide a.next {right: 0; border-left: 1px solid #e0e0e0;}
div.banner-slide a.prev img,
div.banner-slide a.next img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50%; transition: all 0.1s;}
div.banner-slide a.prev:active img {left: calc(50% - 5px);}
div.banner-slide a.next:active img {left: calc(50% + 5px);}
div.banner-slide a.play {position: absolute; padding: 1px 5px 1px 6px; bottom: 4px; right: 40px; border: 1px solid #e0e0e0; background-color: rgba(255, 255, 255, 0.6); font-size: 12px; overflow: hidden; transition: all 0.3s; border-radius: 2px; color: #146e6e;}
div.banner-slide a.play:hover {background-color: #146e6e; color: #ffffff;}
div.banner-slide a.play::before {content: '\f04b'; font-family: 'Font Awesome 6 Free'; font-weight: 700;}
div.banner-slide a.play span {position: absolute; left: -999px;}
div.banner-slide a.play span:nth-of-type(1) {display: block;}
div.banner-slide a.play span:nth-of-type(2) {display: none;}
div.banner-slide a.play.on::before {content: '\f04c';}
div.banner-slide a.play.on span + span {display: block;}
div.banner-slide a.play.on span:nth-of-type(1) {display: none;}
div.banner-slide a.play.on span:nth-of-type(2) {display: block;}




table.content {width: 100%; font-size: 18px; text-align: center; border-top: 2px solid #ddeff0;}
table.content.left {text-align: left;}
table.content.fixed {table-layout: fixed;}
table.content thead {background: #fafbfc;}
table.content th,
table.content td {border-bottom: 1px solid #ddeff0; border-left: 1px solid #ddeff0; padding: 14px 20px;}
table.content th,
table.content td.th {background: #ddeff0; font-weight: 700; text-align: center; color: #146e6e; border-bottom-color: #ffffff; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;}
table.content.single th,
table.content.single td.th {width: 260px;}
table.content tr:last-child th,
table.content tr:last-child td.th {border-bottom-color: #ddeff0;}
table.content th:first-child,
table.content td:first-child {border-left: none;}
table.content .left {text-align: left;}
table.content tbody + tbody {border-top: 2px solid #146e6e;}
table.content + p.desc {margin-top: 20px; font-size: 18px; color: #666666;}

table.list {width: 100%; font-size: 13px; text-align: center; border-top: 2px solid #ddeff0; border-bottom: 2px solid #e4e8eb;}
table.list thead {background: #fafbfc;}
table.list th,
table.list td {border-bottom: 1px solid #e4e8eb; padding: 5px 5px; line-height: 28px; max-width: 1px;}
table.list a:not(.btn) {transition: all 0.3s; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.list a:not(.btn):hover {color: #146e6e;}
table p.no-data {color: #8da0aa;}
table p.no-data i {color: #ffcc00; margin-right: 5px;}

table.cell-table {width: 100%; font-size: 13px; text-align: center;}
table.cell-table th,
table.cell-table td {border: 1px solid #e4e8eb; padding: 5px 10px; line-height: 1.4em !important;}
table.cell-table th {background-color: #f9f9f9;}
table.cell-table td.left {text-align: left;}

div.search-box {border: 2px solid #e4e8eb; padding: 15px; background: #fafbfc; text-align: center;}
div.search-box * {vertical-align: middle;}
div.search-box > ul {overflow: hidden; margin-bottom: 10px;}
div.search-box > ul > li {display: inline-block;}
/* div.search-box select {font-size: 18px; height: 30px; padding-left: 10px;} */
div.search-box a {display: inline-block; height: 30px; line-height: 30px; padding: 0 20px; background: #146e6e; color: #ffffff; font-size: 16px;}
div.search-box a i {margin-right: 5px;}

div.board-info {overflow: hidden; margin-top: 30px;}
div.board-info > p:first-child {float: left; font-size: 16px;}
div.board-info > p:first-child em {color: #e2161c; font-weight: 700;}
div.board-info > p:nth-of-type(2) {float: right;}

div.board-info +  div.mobile-scroll {margin-top: 10px;}
table.board-list {width: 100%; font-size: 16px; text-align: center; border-top: 2px solid #ddeff0; border-bottom: 2px solid #ddeff0; margin-top: 10px;}
table.board-list thead {background: #fafbfc;}
table.board-list th,
table.board-list td {border-bottom: 1px solid #ddeff0; padding: 12px 10px; max-width: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.board-list .title {text-align: left; max-width: 1px;}
table.board-list .title a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; transition: color 0.3s;}
table.board-list .title a:hover {color: #146e6e;}
table.board-list .title a i.lock {color: #146e6e; margin-right: 6px;}
table.board-list .title a span {display: block; font-size: 13px; color: #999999;}
table.board-list span.image {display: block; border: 1px solid #f5f5f5; background: #ffffff url(/img/common/icon-no-image.png) center center no-repeat; background-size: cover; overflow: hidden; height: 80px; text-indent: -9999px;}
table.board-list td em.red {color: #e2161c; font-weight: 700;}

table.board-list span.book-cover {display: block; border: 1px solid #f5f5f5; background: #ffffff url(/img/common/icon-no-image.png) center center no-repeat; background-size: cover; overflow: hidden; height: 100px; text-indent: -9999px;}
table.board-list .book-title > a {display: block; text-align: left; padding-left: 20px; transition: color 0.3s;}
table.board-list .book-title > a > * {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
table.board-list .book-title > a > em {font-size: 1.2em; font-weight: 700;}
table.board-list .book-title > a > span.sub {color: #666666; margin: 2px 0 10px 0;}
table.board-list .book-title > a:hover {color: #146e6e;}
table.board-list .book-title > a ul.book-category {font-size: 0.9em; color: #146e6e;}

div.mobile-scroll + div.pagination {margin-top: 20px;}
div.pagination {text-align: center;}
div.pagination > a {position: relative; display: inline-block; vertical-align: top;}
div.pagination > a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.pagination ol {display: inline-block; vertical-align: top; margin: 0 10px;}
div.pagination ol li {display: inline-block;}
div.pagination ol li a {display: block;}
div.pagination a {position: relative; width: 40px; height: 40px; line-height: 38px; font-size: 16px; border: 1px solid #e4e8eb; border-radius: 100%; color: #999999; transition: all 0.3s; vertical-align: top;}
div.pagination a:hover {background-color: #fafbfc;}
div.pagination ol li.on a {border-color: #146e6e; color: #146e6e; font-weight: 700;}


#mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100000; display: none;}

table.view {width: 100%; font-size: 15px; border-top: 2px solid #ddeff0; border-bottom: 2px solid #ddeff0; table-layout: fixed;}
table.view td {border-bottom: 1px solid #ddeff0; padding: 8px 10px; position: relative;}
table.view td.title {font-size: 16px; font-weight: 700; padding: 10px;}
table.view td.th {font-weight: 700; text-align: center; background-color: #fafbfc; width: 140px;}
table.view div.editor-content {min-height: 200px; padding: 20px 0; line-height: 1.3;}
table.view div.long {line-height: 1.3; white-space: pre-line;}
table.view tr.prev-next a {display: block; transition: color 0.3s; width: calc(100% - 200px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
table.view tr.prev-next a:hover {color: #146e6e;}
table.view tr.prev-next span.date {font-size: 12px; color: #999999; position: absolute; right: 19px; top: 50%; transform: translate(0, -50%);}

ul.board-sub {font-size: 16px; margin: 20px 0;}
ul.board-sub > li {position: relative; border: 1px solid #ddeff0; line-height: 50px; padding: 0 30px;}
ul.board-sub > li + li {border-top: none;}
ul.board-sub > li > a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s;}
ul.board-sub > li > a:hover {color: #146e6e;}
ul.board-sub > li > a > em {color: #146e6e; font-weight: bold; margin-right: 10px;}


div.comment-info {font-size: 14px; margin: 20px 0;}
div.comment-info ul.comment > li {position: relative; overflow: hidden; border: 1px solid #e0e0e0; border-radius: 5px;}
div.comment-info ul.comment > li + li {margin-top: 10px;}
div.comment-info ul.comment > li p.no-data {font-size: 16px; color: #999999; text-align: center; line-height: 60px;}
div.comment-info ul.comment > li p.no-data i {color: #ffcc00; margin-right: 10px;}
div.comment-info ul.comment > li p.info {position: relative; line-height: 30px; font-size: 13px; padding: 0 20px; background-color: #f9f9f9;}
div.comment-info ul.comment > li p.info span.datetime {position: absolute; right: 20px;}
div.comment-info ul.comment > li p.content {padding: 10px 20px; white-space: pre-line;}

ul.result {font-size: 20px; padding-left: 30px;}
ul.result > li {text-indent: -30px;}
ul.result > li em {margin-right: 10px; font-size: 24px; color: #146e6e;}
ul.result > li + li {margin-top: 10px;}
ul.result + p {margin-top: 20px; font-size: 18px; color: #666666;}



/* form */
table.form {width: 100%; font-size: 14px; border-top: 2px solid #146e6e; border-bottom: 2px solid #e4e8eb;}
table.form td {border-bottom: 1px solid #e4e8eb; padding: 6px 10px; line-height: 28px;}
table.form td.th {font-weight: 700; text-align: right; background-color: #fafbfc; width: 160px; padding: 8px 20px;}
table.form td.th.long {letter-spacing: -0.1em;}
table.form div.editor-content {min-height: 400px; padding: 20px;}
table.form div.editor-content img {max-width: 100%;}
table.form label em {color: #e2161c; margin-right: 5px;}
table.form td p.line + p.line {margin-top: 5px;}
table.form .multi-line {line-height: 1.3em;}
table.form p.desc {color: #e2161c; font-size: 12px; line-height: 1.6;}
table.form span.desc {color: #e2161c; font-size: 12px; margin-left: 30px;}
table.form textarea.editor {height: 400px;}
table.form div.long {line-height: 1.5; white-space: pre-line;}
table.form div.regulation {border: 1px solid #e0e0e0; padding: 20px; height: 120px; overflow: auto; white-space: pre-wrap; line-height: 1.3em; font-size: 12px;}
table.form div.regulation + input {margin-right: 5px;}
table.form td.editor {padding: 0;}
table.form td > p + p {margin-top: 5px;}

input.text,
select,
textarea {position: relative; font-family: inherit; border: 1px solid #e4e8eb; border-radius: 3px; margin: 0; height: 28px; font-size: 14px; vertical-align: top; outline: none; color: #666666; background-color: #ffffff; transition: all 0.3s; appearance: none;}
input.text {padding: 0 8px; width: 180px;}
input.text:focus,
select:focus,
textarea:focus {border-color: #146e6e; box-shadow: 0 0 5px 0 rgba(4, 207, 92, 0.5);}
select {padding: 0 28px 0 8px; background: #ffffff url(/img/common/icon_select.png) calc(100% - 8px) center no-repeat; background-size: 8px auto;}
textarea {padding: 8px; min-height: 100px; width: 100%;}
input[type="radio"],
input[type="checkbox"] {position: relative; top: -1px; margin: 0; vertical-align: middle;}
input.text.short {width: 80px;}
input.text.half {width: 49%;}
input.text.full {width: 100%;}
input.half + input.half {margin-left: 2px;}
input.count {width: 50px; text-align: center;}
input.money {width: 90px; text-align: right;}
input.money-big {width: 120px; text-align: right;}
input.digit {width: 80px; text-align: right;}
input.year,
input.month,
input.date {width: 100px;}
input.datetime-hour,
input.datetime-min {width: 140px;}
textarea.editor {min-height: 500px;}
[data-type="int"], [data-type="int-plus"], [data-type="real"], [data-type="real-plus"] {text-align: right;}
#main [readonly] {background: #fcfcfc;}
#main [disabled] {background: #f9f9f9;}
::placeholder {color: #65a6ff; opacity: 0.5;}



[readonly="readonly"] {background-color: #fafbfc !important;}
[disabled="disabled"] {background-color: #e4e8eb !important; cursor: no-drop !important;}
::placeholder {color: #cccccc;}

ul.input-list {display: inline-block;}
* + ul.input-list {margin-left: 30px;}
ul.input-list > li {display: inline-block; margin-right: 25px; line-height: 28px; vertical-align: top;}
ul.input-list > li > label {padding-left: 5px;}

div.input-group {position: relative; display: inline-block; vertical-align: middle;}
div.input-group > * {float: left;}
div.input-group > i {position: relative; z-index: 5; width: 30px; height: 100%; line-height: 26px; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999;}
div.input-group > label {position: relative; z-index: 5; height: 100%; line-height: 26px; padding: 0 8px; background: #fafcfe; text-align: center; border: 1px solid #dfe8f1; border-radius: 3px; color: #999999; font-size: 12px;}
div.input-group.left > *:first-child {border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;}
div.input-group.left > *:last-child {border-top-left-radius: 0; border-bottom-left-radius: 0;}
div.input-group.left > a.btn {border-right: 1px solid rgba(0, 0, 0, 0.2);}
div.input-group.right > *:first-child {border-top-right-radius: 0; border-bottom-right-radius: 0;}
div.input-group.right > *:last-child {border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none;}
div.input-group.right > a.btn {border-left: 1px solid rgba(0, 0, 0, 0.2);}
div.input-group.full {width: 100%;}
div.input-group.full > input,
div.input-group.full > select {width: calc(100% - 30px);}


/* button */
div.button-box {text-align: center;}
div.button-box.left {text-align: left;}
div.button-box.right {text-align: right;}
table + div.button-box {margin-top: 20px;}
div.mobile-scroll + div.button-box {margin-top: 20px;}
div.pagination + div.button-box {margin-top: 20px;}
div.button-box a.btn + a.btn {margin-left: 3px;}

.btn {position: relative; display: inline-block; min-width: 80px; height: 28px; line-height: 26px; text-align: center; font-size: 13px; font-family: inherit; padding: 0 0.8em; margin: 0; border: 1px solid transparent; border-radius: 3px; background-color: #ffffff; color: #666666; vertical-align: top; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); transition: all 0.2s; appearance: none;}
.btn i {position: relative; top: -2px; margin-right: 0.5em;}
.btn:hover {box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.1);}
.btn:active {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);}

.btn.small {min-width: 60px; height: 24px; line-height: 22px; font-size: 12px;}
.btn.medium {min-width: 80px; height: 28px; line-height: 26px; font-size: 13px;}
.btn.large {min-width: 100px; height: 34px; line-height: 32px; font-size: 14px;}
.btn.larger {min-width: 140px; height: 42px; line-height: 40px; font-size: 18px;}
.btn.full {width: 100%; min-width: initial;}
.btn.small.icon {min-width: 24px; padding: 0;}
.btn.medium.icon {min-width: 28px; padding: 0;}
.btn.large.icon {min-width: 36px; padding: 0;}
.btn.larger.icon {min-width: 44px; padding: 0;}

.btn.icon i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1em; z-index: 5;}
.btn.icon > span {position: absolute; left: -999px;}
.btn.full {width: 100%; min-width: inherit;}
.btn.round {border-radius: 100px;}
.btn.left {float: left; margin-right: 3px;}
.btn.disabled {cursor: no-drop; opacity: 0.5;}

.btn.white {background-color: #ffffff; color: #666666; border-color: #e4e8eb;}
.btn.gray {background-color: #fafbfc; color: #666666; border-color: #e4e8eb;}
.btn.green {background-color: #146e6e; color: #ffffff;}
.btn.lime {background-color: #146e6e; color: #ffffff;}
.btn.yellow {background-color: #777777; color: #ffffff;}
.btn.red {background-color: #e2161c; color: #ffffff;}
.btn.gradient {background-image: linear-gradient(to right, #146e6e, #777777); color: #ffffff;}
.btn.disabled {background-color: #fafbfc; color: #cccccc; cursor: no-drop;}

.btn.icon-left {padding-left: 3em;}
.btn.icon-left:after {content: ''; position: absolute; left: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; background: rgba(255, 255, 255, 0.4); z-index: 5;}
.btn.icon-left i {position: absolute; left: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; z-index: 5; border-right: 1px solid rgba(0, 0, 0, 0.05);}
.btn.icon-right {padding-right: 3em;}
.btn.icon-right:after {content: ''; position: absolute; right: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; background: rgba(255, 255, 255, 0.4); z-index: 5;}
.btn.icon-right i {position: absolute; right: 0; top: 0; width: 2.2em; height: 100%; line-height: inherit; z-index: 5; border-left: 1px solid rgba(0, 0, 0, 0.05);}


/* file-list */
div.dino-file-list {font-size: 12px;}
div.dino-file-list > ul > li {position: relative; border: 1px solid #dfe8f1; border-radius: 3px; height: 28px; line-height: 26px; font-size: 12px; color: #666666; transition: all 0.2s; overflow: hidden;}
div.dino-file-list > ul > li:hover {box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.05);}
div.dino-file-list > ul > li + li {margin-top: 3px;}
div.dino-file-list > ul > li > i {color: #146e6e; margin: 0 12px;}
div.dino-file-list > ul > li > .filename {display: block; width: calc(100% - 160px); padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
div.dino-file-list > ul > li > .filename > img {margin-right: 8px; width: 16px; max-height: 16px;}
div.dino-file-list > ul > li > a.filename {width: calc(100% - 120px); transition: color 0.3s;}
div.dino-file-list > ul > li > a.filename > i {position: absolute; right: 100px; top: -10px; font-size: 16px; color: #65a6ff; opacity: 0;}
div.dino-file-list > ul > li > a.filename:hover {color: #00bca4;}
div.dino-file-list > ul > li > a.filename:hover > i {animation: download-file 0.5s ease-out 0s infinite normal forwards;}
div.dino-file-list > ul > li span.size {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); font-size: 10px; padding: 4px 5px; background: #146e6e; color: #ffffff; line-height: 1em; border-radius: 3px; margin-left: 20px;}
div.dino-file-list > ul > li p.function {position: absolute; right: 80px; top: 50%; transform: translate(0, -50%);}
div.dino-file-list > ul > li p.function a {position: relative; float: left; width: 22px; height: 22px; border-radius: 100px; color: #ffffff; background: #65a6ff; opacity: 0.9; transition: all 0.3s; transform: scale(1);}
div.dino-file-list > ul > li:hover p.function a {transform: scale(1);}
div.dino-file-list > ul > li p.function a:hover {opacity: 1;}
div.dino-file-list > ul > li p.function a + a {margin-left: 3px;}
div.dino-file-list > ul > li p.function a.del {background: #e74c3c;}
div.dino-file-list > ul > li p.function a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.dino-file-list p.down-all {margin-top: 5px;}
div.dino-file-list p.down-all a {display: inline-block; border: 1px solid #dfe8f1; border-radius: 3px; padding: 0 15px; line-height: 26px; transition: all 0.3s;}
div.dino-file-list p.down-all a:hover {border-color: #65a6ff; color: #65a6ff;}
div.dino-file-list p.down-all a i {color: #65a6ff; font-size: 16px; margin-right: 10px;}
div.dino-file-list input[type=file] {margin-top: 5px;}
div.dino-file-list a.preview {position: absolute; right: 180px; top: 50%; transform: translate(0, -50%);}
div.dino-file-list a.listen {position: absolute; right: 100px; top: 50%; transform: translate(0, -50%);}
div.dino-file-list a.preview img,
div.dino-file-list a.listen img {height: 24px;}

div.dino-file-list > ul > li.listen-only {border-color: transparent;}
div.dino-file-list > ul > li.listen-only a.listen {right: initial; left: 0;}


@keyframes download-file {
    0% {opacity: 0; top: -10px;}
    100% {opacity: 1; top: 30px;}
}


/* newsletter-list */
ul.newsletter-list {margin: 20px 0; font-size: 13px;}
ul.newsletter-list li {position: relative; border: 1px solid #e0e0ee; border-radius: 10px; padding: 20px; overflow: hidden;}
ul.newsletter-list li + li {margin-top: 10px;}
ul.newsletter-list li > * {display: block;}
ul.newsletter-list li > * + * {margin-left: 160px;}
ul.newsletter-list li span.image {float: left; width: 120px;}
ul.newsletter-list li span.image img {width: 100%;}
ul.newsletter-list li span.title {font-size: 18px; margin-bottom: 5px; font-weight: 700; color: #4b9e4c;}
ul.newsletter-list li span.issue {color: #999999;}
ul.newsletter-list li span.issue em {display: inline-block; padding: 2px 15px; border-radius: 30px; background-color: #4b9e4c; color: #ffffff; margin-left: 10px; vertical-align: middle;}
ul.newsletter-list li span.content-title {font-weight: 700; margin-top: 10px; margin-bottom: 5px; font-size: 14px;}
ul.newsletter-list li span.content {margin-bottom: 10px;}
ul.newsletter-list li a.btn img {margin-right: 6px; position: relative; top: -2px;}


/* 장비예약현황 리스트 */
ul.reserve-list {font-size: 12px; text-align: left; line-height: 1.3;}
ul.reserve-list > li {display: inline-block; position: relative; margin: 2px 0; width: 49%;}
ul.reserve-list > li > a {display: block; border: 1px solid #65a6ff; border-radius: 3px; padding: 3px 10px;}
ul.reserve-list > li > a span + span {margin-left: 8px;}
ul.reserve-list > li > a span.eq-name {display: inline-block; width: calc(100% - 120px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: top;}
ul.reserve-list span.status.wait {color: #e74c3c;}
ul.reserve-list span.status.approve {color: #3498db;}
ul.reserve-list > li > ul {position: absolute; width: 280px; padding: 10px 30px 10px 10px; left: 0; top: 130%; border: 2px solid #e0e0e0; background-color: #f9f9f9; border-radius: 5px; z-index: 10; display: none;}
ul.reserve-list > li > ul::before {content: ''; position: absolute; left: 20px; top: -21px; border: 10px solid transparent; border-bottom-color: #e0e0e0;}
ul.reserve-list > li > ul::after {content: ''; position: absolute; left: 20px; top: -19px; border: 10px solid transparent; border-bottom-color: #f9f9f9;}
ul.reserve-list > li > ul > li {position: relative; padding-left: 80px;}
ul.reserve-list > li > ul > li + li {margin-top: 6px;}
ul.reserve-list > li > ul > li::before {content: ''; position: absolute; left: 0; top: 6px; width: 3px; height: 3px; border-radius: 10px; background-color: #00bca4;}
ul.reserve-list > li > ul > li:last-child {position: static;}
ul.reserve-list > li > ul > li:last-child::before {display: none;}
ul.reserve-list > li > ul > li span.label {position: absolute; left: 15px; top: 0; width: 60px; font-weight: 700;}
ul.reserve-list > li > ul > li a.btn {position: relative; left: -65px;}
ul.reserve-list > li > ul > li a.close {position: absolute; right: 10px; top: 5px; font-size: 16px; color: #e74c3c;}

#original-image-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10000;}
#original-image-mask a.close {font-size: 50px; color: #ffffff; text-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.6); position: absolute; right: 3%; top: 3%;}
#original-image {position: fixed; left: 50%; top: 50%; max-width: 80%; max-height: 80%; transform: translate(-50%, -50%); background: #ffffff; overflow: auto; z-index: 10001;}
#original-image img {max-width: none;}

#loading-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); z-index: 10000;}
#loading-mask span {position: absolute; left: 50%; top: 50%; width: 150px; line-height: 150px; font-size: 60px; transform: translate(-50%, -50%); color: #ffffff; background: rgba(0, 0, 0, 0.4); border-radius: 10px; text-align: center;}


/* popup */
#popup-wrapper {height: 100vh; padding: 60px 0 30px 0; overflow: hidden; background: #ffffff;}
#popup-header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background-image: linear-gradient(to right, #146e6e, #a6ac1a); z-index: 10000; color: #ffffff;}
#popup-header h1 {position: absolute; left: 30px; top: 50%; transform: translate(0, -50%); font-size: 24px;}
#popup-header a.close {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); font-size: 30px;}
#popup-main {height: 100%; overflow: auto; padding: 20px 20px 50px 20px;}
#popup-main > section + section {margin-top: 50px;}
#popup-main .title {position: relative; font-size: 20px; padding-left: 25px; margin-bottom: 15px;}
#popup-main .title::before {content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border: 3px solid #146e6e; border-radius: 50px;}
#popup-main .title em {color: #146e6e;}
#popup-footer {position: fixed; left: 0; bottom: 0; width: 100%; height: 30px; background-image: linear-gradient(to right, #146e6e, #777777); z-index: 10000; color: #ffffff; font-size: 11px;}
#popup-footer p.copyright{line-height: 30px; margin-left: 20px;}
#popup-footer img.logo {height: 18px; position: absolute; right: 20px; top: 50%; transform: translate(0, -50%);}

div.regulation-form {border: 2px solid #e0e0e0; padding: 40px 30px; font: 14px;}
div.regulation-form h2 {font-size: 24px; text-align: center; margin-bottom: 40px;}
div.regulation-form h3 {font-size: 24px; text-align: center; margin-top: 50px; margin-bottom: 30px;}
div.regulation-form h3:first-child {margin-top: 0;}
div.regulation-form h4 {font-size: 16px; margin: 20px 0 15px 0;}
div.regulation-form p {font-size: 14px; margin: 8px 0;}
div.regulation-form p.num {padding-left: 18px; text-indent: -18px;}
div.regulation-form p.num span {margin-right: 10px;}
div.regulation-form p.desc {font-size: 13px; padding-left: 15px; text-indent: -15px;}
div.regulation-form ul.list {margin: 5px 0 5px 20px; font-size: 13px;}
div.regulation-form ul.sub {margin: 5px 0 5px 10px; font-size: 13px;}
div.regulation-form ul.sub ul {padding-left: 10px;}

div.regulation-email {border: 2px solid #e0e0e0; padding: 20px;}
div.regulation-email p + p {margin-top: 20px;}

div.wa img {width: 100%;}


#section-error {margin: 100px auto; max-width: 800px; padding: 50px; border: 3px solid #e0e0e0; text-align: center;}
#section-error h2 {color: #146e6e; font-size: 40px;}
#section-error h2 i {font-size: 80px; display: block;}
#section-error p.message {font-size: 20px; margin: 30px 0;}
#section-error p.link a {display: inline-block; border: 2px solid #146e6e; background-color: #146e6e; color: #ffffff; padding: 10px 50px; font-size: 24px; border-radius: 4px;}

div.youtube {text-align: center; margin: 30px 0;}


/* EOF */