@charset "UTF-8";


/* reset */
html {-webkit-text-size-adjust: none; text-size-adjust: none;}
body {margin: 0;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
a {color: inherit; text-decoration: inherit;}
li {list-style: none;}
img {vertical-align: middle; max-width: 100%;}
address, em, i, cite {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0;}
i[class^="fa"] {position: relative; display: inline-block; vertical-align: middle; overflow: hidden;}
i[class^="fa"] span {position: absolute; left: -9999px;}
.ir-hidden {position: absolute; left: -9999px !important;}
.pc {display: none !important;}
br.only-pc {content: '';}
br.only-pc::after {content: '\00a0';}


/* common */
body {font-family: 'NotoSansKR', '맑은 고딕', 'malgun gothic', '돋움', Dotum, 'Apple SD Gothic Neo', Helvetica, sans-serif; font-weight: 400; font-size: 13px; color: #333333; background: #ffffff;}
body.no-scroll {overflow: hidden; height: 100vh;}
#wrapper {position:relative; min-width: 320px; max-width: 1024px; margin: 0 auto; min-height: 100vh; box-sizing: border-box; box-sizing: border-box; padding-bottom: 41px; overflow: hidden;}
#skip-nav {position: fixed; left: 0; top: -40px; width: 100%; line-height: 40px; text-align: center; background-color: rgba(0, 0, 0, 0.7); color: #ffffff; font-size: 16px; transition: top 0.3s; z-index: 100000;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; height: 50px; box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; z-index: 1000; transition: all 0.3s;}
#header h1 {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); line-height: 0.1em; width: 100px;}
#header h1 a {display: block;}
#header h1 a img {opacity: 0; transition: all 0.3s;}
#header h1 a img.white {position: absolute; left: 0; top: 0; opacity: 1;}

#header a.menu {position: absolute; width: 28px; height: 18px; right: 15px; top: 50%; transform: translate(0, -50%);}
#header a.menu span {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100%; height: 2px; background-color: #ffffff; overflow: hidden; text-indent: -999px; transition: all 0.3s;}
#header a.menu::before {content: ''; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: 100%; height: 2px; background-color: #ffffff; transition: all 0.3s;}
#header a.menu::after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 100%; height: 2px; background-color: #ffffff; transition: all 0.3s;}
#header a.menu.close span {opacity: 0;}
#header a.menu.close::before {transform: translate(-50%, -50%) rotate(36deg); top: 50%;}
#header a.menu.close::after {transform: translate(-50%, 50%) rotate(-36deg); bottom: 50%;}
#header a.search {position: absolute; right: 60px; top: 50%; transform: translate(0, -50%); font-size: 20px;}

#gnb {position: fixed; left: 100%; top: 50px; width: 100%; height: calc(100vh - 50px); background-color: #ffffff; padding: 10px 15px 100px 10px; box-sizing: border-box; z-index: 1000; overflow: auto; font-size: 14px; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2) inset; -webkit-transition: left 0.3s; transition: left 0.3s; color: #222222;}
#header.open #gnb {left: 0%;}
#gnb > ul.nav > li {border-bottom: 1px solid #e8e8e8; overflow: hidden; padding: 10px 0 15px 0;}
#gnb > ul.nav > li > a {position: relative; font-size: 18px; font-weight: 500; padding-left: 25px; line-height: 40px;}
#gnb > ul.nav > li > a::before {content: ''; position: absolute; left: 5px; top: 12px; width: 8px; height: 8px; border-radius: 10px; background-color: #f26353;}
#gnb > ul.nav > li > ul {display: block !important;}
#gnb > ul.nav > li > ul > li {margin-top: 5px;}
#gnb > ul.nav > li > ul > li > a {line-height: 2em; padding-left: 20px;}
#gnb > ul.nav > li > ul > li > ul {margin: 5px 0 10px 0; overflow: hidden;}
#gnb > ul.nav > li > ul > li > ul > li > a {line-height: 2em;}
#gnb > ul.nav a {display: block; padding-left: 10px;}
#gnb > ul.nav li.on > a {color: #f26353; font-weight: 500;}

#header div.function {position: absolute; top: 100%; width: 100%; overflow: hidden; text-align: center; height: 0; transition: height 0.3s;}
#header div.function.open {height: 50px;}
#header div.function p.search {position: relative; display: inline-block; vertical-align: middle; top: 50%; transform: translate(0, -50%);}
#header div.function p.search input {background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 100px; width: 250px; height: 36px; padding: 0 50px 0 25px; color: #ffffff; font-size: 15px; font-family: inherit; box-sizing: border-box; font-weight: 300; transition: all 0.3s;}
#header div.function p.search a {position: absolute; right: 12px; top: 50%; transform: translate(0, -50%);}
#header ::placeholder {color: #ffffff;}

#header.white {background-color: #ffffff; color: #222222; border-bottom-color: rgba(0, 0, 0, 0.1);}
#header.white h1 a img.white {opacity: 0;}
#header.white h1 a img.color {opacity: 1;}
#header.white a.menu span,
#header.white a.menu::before,
#header.white a.menu::after {background-color: #222222;}
#header.white div.function {background-color: #ffffff; border-bottom-color: rgba(0, 0, 0, 0.1);}
#header.white div.function p.search input {background-color: rgba(0, 0, 0, 0.1); color: #222222;}
#header.white ::placeholder {color: #ec6a0a;}

#gnb #top-menu {margin-top: 40px; overflow: hidden;}
#header #top-menu > li {float: left; font-size: 13px;}
#header #top-menu > li + li {margin-left: 10px;}
#header #top-menu > li > a {transition: all 0.3s; display: inline-block; padding: 8px 15px; border: 1px solid #e0e0e0; border-radius: 3px;}
#header #top-menu > li > a:hover {color: #ffeb00;}


#footer {background-color: #ffffff; border-top: 1px solid #dddddd;}
#footer > div.box {position: relative; padding: 100px 20px 30px 20px; box-sizing: border-box; color: #888888;}
#footer h2 {position: absolute; left: 20px; top: 20px; width: 100px;}
#footer ul.link {position: absolute; right: 20px; top: 20px;}
#footer ul.link > li {float: left;}
#footer ul.link > li + li {margin-left: 30px;}
#footer ul.link > li > a {font-size: 14px; font-weight: 700; color: #666666; transition: all 0.3s;}
#footer ul.link > li > a:hover {color: #222222;}
#footer ul.sns {position: absolute; right: 20px; top: 50px;}
#footer ul.sns > li {float: left;}
#footer ul.sns > li + li {margin-left: 5px;}
#footer ul.sns > li > a {display: block; width: 34px; height: 34px; border: 1px solid #dddddd; border-radius: 100px; text-align: center; line-height: 32px; font-size: 15px; box-sizing: border-box; transition: all 0.3s;}
#footer ul.sns > li > a:hover {color: #222222; border-color: #222222;}
#footer address {font-size: 13px;}
#footer address p + p {margin-top: 3px;}
#footer address p > span {display: block;}
#footer address p em {font-weight: 700;}
#footer p.copyright {margin-top: 15px; text-align: center; font-size: 12px;}




/* main */
#main-visual {background-image: linear-gradient(to top right, #627bab, #f26353); color: #ffffff;}
#main-visual > div.box {position: relative; height: 600px;}
#main-visual div.content {position: absolute; left: 0; top: 50%; transform: translate(0, -45%); width: 100%; text-align: center; padding: 0 20px; box-sizing: border-box; z-index: 10;}
#main-visual div.content h2 {font-size: 34px; line-height: 1.1em; margin-bottom: 30px; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);}
#main-visual div.content p.desc {font-weight: 300; font-size: 13px;}
#main-visual div.content p.project {font-size: 14px; margin: 30px 0 30px 0; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);}
/*#main-visual div.content p.project em {font-size: 48px; font-weight: 700; color: #ffeb00; display: block;}*/
#main-visual em.total {display: inline-block; position: relative; top: 10px; vertical-align: text-bottom; height: 60px; font-size: 48px; font-weight: 700; color: #ffeb00; overflow: hidden;}
#main-visual em.total > span.digit {float: left; height: 60px; position: relative; transition: transform 2s; line-height: 60px;}
#main-visual em.total > span.digit > span {display: block;}
#main-visual div.content p.project > span {display: block; margin-top: 20px;}
#main-visual div.content p.link a {display: inline-block; width: 160px; line-height: 42px; background: #ffffff url(../img/icon-right.png) right 16px center no-repeat; box-sizing: border-box; color: #222222; text-align: center; border-radius: 100px; font-size: 13px; font-weight: 700; background-size: 6px auto; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);}
#main-visual div.content p.link a + a {margin-left: 10px;}
#main-visual p.icon {position: absolute; right: 0; bottom: 30px; width: 90%;}

#main-comp {background-color: #f3f4f7;}
#main-comp > div.box {position: relative; padding: 40px 20px;}
#main-comp h2 {font-size: 22px; margin-bottom: 50px;}
#main-comp a.more {position: absolute; right: 20px; top: 60px;}
#main-comp a.more i {margin-left: 10px;}

#main-project {background-color: #ffffff;}
#main-project > div.box {position: relative; padding: 40px 20px;}
#main-project h2 {font-size: 28px; margin-bottom: 50px;}
#main-project a.more {position: absolute; right: 20px; top: 60px;}
#main-project a.more i {margin-left: 10px;}




/* sub (common) */
body.sub #main {padding: 80px 0 100px 0;}
body.sub #main > section.gray {background-color: #f3f4f7;}
body.sub #main > section > div.box {position: relative; padding: 40px 20px;}
body.sub #main > section > div.box.no-padding {padding: 0;}
body.sub #main > section > div.box.search {padding: 20px 20px;}
body.sub #main > section h2.title {font-size: 20px; padding-bottom: 10px; border-bottom: 1px solid #666666; margin-bottom: 30px;}
body.sub #main > section h3.title {font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #666666; margin-bottom: 30px; margin-top: 60px;}
body.sub #main > section h3.title:first-child {margin-top: 0;}

/* body.sub #main > section {position: relative; max-width: 1000px; margin: 0 auto; padding: 80px 0; box-sizing: border-box;}*/
body.sub #main > section h3.title {font-size: 20px; color: #ec6a0a;margin-bottom: 10px;}
body.sub #main > section h3.title + p {margin-bottom: 20px;}
body.sub #main > section h4.title {position: relative; font-size: 24px; margin-top: 50px; margin-bottom: 20px; padding-left: 20px;}
body.sub #main > section h4.title::before {content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; background-color: #ec6a0a;}
body.sub #main > section.full > div.box {position: relative; margin: 0 auto; max-width: 1000px; padding: 80px 0; box-sizing: border-box; overflow: hidden;}
body.sub #main > section p.no-info {font-size: 13px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 6px 15px; color: #999999;}
body.sub #main > section p.no-info i {color: #ffcc00; margin-right: 10px;}

body.sub #main > section ul.dot-list > li {position: relative; padding-left: 15px;}
body.sub #main > section ul.dot-list > li::before {content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 10px; background-color: #222222;}
body.sub #main > section ul.dot-list > li + li {margin-top: 6px;}
body.sub #main > section div.youtube {text-align: center;}
body.sub #main > section div.youtube iframe {width: 100%;}
body.sub #main > section p.title {font-size: 15px; font-weight: 700; color: #ec6a0a; margin: 20px 0;}

body.sub #main > #sub-title {border-bottom: 1px solid #e5e5e5;}
body.sub #main > #sub-title > div.box {height: 160px;}
body.sub #main > #sub-title h2 {position: absolute; left: 30px;  top: 40%; transform: translate(0, -50%); font-size: 30px; z-index: 10;}
body.sub #main > #sub-title h2 span {font-size: 15px; font-weight: 400; color: #666666; display: block;}
body.sub #main > #sub-title p.image {position: absolute; right: 0; bottom: 0; width: 220px;}
body.sub #main > #sub-title ul.section-tab {overflow: hidden; background-color: #f3f4f7; text-align: center;}
body.sub #main > #sub-title ul.section-tab > li {display: inline-block;}
body.sub #main > #sub-title ul.section-tab > li + li {margin-left: 40px;}
body.sub #main > #sub-title ul.section-tab > li > a {display: block; position: relative; line-height: 50px; font-size: 15px; font-weight: 700; transition: all 0.3s;}
body.sub #main > #sub-title ul.section-tab > li > a::after {content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 0; width: 0; height: 3px; background-color: #ec6a0a; transition: width 0.3s;}
body.sub #main > #sub-title ul.section-tab > li.on > a,
body.sub #main > #sub-title ul.section-tab > li > a:hover {color: #ec6a0a;}
body.sub #main > #sub-title ul.section-tab > li.on > a::after {width: 100%;}

/* project view */
div.project-summary {overflow: hidden;}
div.project-summary > div + div {margin-top: 30px;}
div.project-summary div.summary h3 {font-size: 20px;}
div.project-summary div.summary ul.user {margin: 10px 0 20px 0; position: relative;}
div.project-summary div.summary ul.user::after {content: ''; display: block; clear: both;}
div.project-summary div.summary ul.user > li {float: left;}
div.project-summary div.summary ul.user > li:first-child::after {content: '|'; margin: 0 10px;}
div.project-summary div.summary ul.user li.photo {position: absolute; right: 0; top: 0; width: 80px; height: 80px; border-radius: 100px; background: #ffffff url(/admin/img/common/icon_face.png) center center no-repeat; background-size: cover; overflow: hidden; border: 1px solid #e0e0e0;}
div.project-summary div.summary ul.info {border-top: 1px solid #dddddd; padding: 20px 0;}
div.project-summary div.summary ul.info > li {position: relative; padding-left: 140px;}
div.project-summary div.summary ul.info > li + li {margin-top: 10px;}
div.project-summary div.summary ul.info > li span.label {position: absolute; left: 0; top: 0; width: 120px;}
div.project-summary iframe {width: 100% !important;}
div.project-summary ul.popular {overflow: hidden; border-top: 1px solid #dddddd; padding-top: 10px; font-weight: 700; font-size: 15px;}
div.project-summary ul.popular > li {float: left;}
div.project-summary ul.popular > li + li {margin-left: 20px;}
div.project-summary ul.popular > li:last-child {float: right;}
div.project-summary ul.popular > li i {margin-right: 6px;}
div.project-summary div.button-box {margin-top: 30px;}
div.project-summary div.button-box a i.red {color: #f26353;}

body.project.view div.editor-content h4 {font-size: 16px; margin-bottom: 10px;}
body.project.view div.editor-content * + h4 {margin-top: 20px;}
body.project.view div.editor-content h4 + ul {font-size: 13px; margin-left: 10px;}
body.project.view div.editor-content h4 + ul > li {position: relative; padding-left: 12px;}
body.project.view div.editor-content h4 + ul > li + li {margin-top: 2px;}
body.project.view div.editor-content h4 + ul > li::before {content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 10px; background-color: #00bca4;}

/* content module */
ul.comp-list {position: relative;}
ul.comp-list::after {content: ''; display: block; clear: both;}
ul.comp-list > li + li {margin-top: 40px;}
ul.comp-list > li > a {display: block; position: relative;}
ul.comp-list > li span.thumb {display: block; height: 180px; background: #ffffff url(/main/img/logo-color.png) center center no-repeat; background-size: cover; border: 2px solid #e5e5e5; overflow: hidden; border-radius: 10px; transition: all 0.3s;}
ul.comp-list > li p.content {margin-top: 10px; font-size: 13px;}
ul.comp-list > li p.content > * {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.comp-list > li p.content em.title {font-size: 16px; font-weight: 700; margin-bottom: 6px; transition: all 0.3s;}
ul.comp-list > li p.content span.view {position: absolute; right: 0; bottom: 0;}
ul.comp-list > li p.content span i {margin-right: 5px;}
ul.comp-list > li > a:hover p.content em.title {color: #ec6a0a;}
ul.comp-list > li > a:hover span.thumb {border-color: #ec6a0a;}

ul.project-list {position: relative;}
ul.project-list::after {content: ''; display: block; clear: both;}
ul.project-list > li + li {margin-top: 40px;}
ul.project-list > li > a {display: block; position: relative;}
ul.project-list > li span.thumb {display: block; height: 180px; background: #ffffff url(/main/img/logo-color.png) center center no-repeat; background-size: cover; overflow: hidden; border-radius: 10px; border: 2px solid #e5e5e5; transition: all 0.3s;}
ul.project-list > li span.thumb em.close {position: absolute; right: 5px; top: 5px; padding: 3px 10px; border-radius: 4px; background-color: #ec6a0a; color: #ffffff; font-size: 12px;}
ul.project-list > li span.thumb em.close i {margin-right: 4px;}
ul.project-list > li p.content {margin-top: 10px; font-size: 14px; position: relative;}
ul.project-list > li p.content span.comp {display: block; font-size: 13px; color: #ec6a0a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.project-list > li p.content i {margin-right: 8px;}
ul.project-list > li p.content em.title {display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; margin: 5px 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
ul.project-list > li p.content span.user {display: block; color: #888888; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 50px);}
ul.project-list > li p.content span.award {position: absolute; right: 0; bottom: 0; font-size: 15px; font-weight: 700; color: #ec6a0a;}
ul.project-list > li ul.info {overflow: hidden; border-top: 1px solid #dddddd; margin-top: 10px; padding-top: 10px; font-weight: 700;}
ul.project-list > li ul.info > li {float: left;}
ul.project-list > li ul.info > li + li {margin-left: 20px;}
ul.project-list > li ul.info > li:last-child {float: right;}
ul.project-list > li ul.info i {margin-right: 8px;}
ul.project-list > li > a:hover span.thumb {border-color: #ec6a0a;}
ul.project-list > li > a:hover p.content em.title {color: #ec6a0a;}

ul.lecture-list {position: relative;}
ul.lecture-list::after {content: ''; display: block; clear: both;}
ul.lecture-list > li {margin-bottom: 40px;}
ul.lecture-list > li > a {display: block; position: relative;}
ul.lecture-list > li span.thumb {display: block; height: 200px; background-size: cover; border: 2px solid #e5e5e5; overflow: hidden; border-radius: 10px; transition: all 0.3s;}
ul.lecture-list > li p.content {margin-top: 10px; font-size: 14px;}
ul.lecture-list > li p.content > * {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.lecture-list > li p.content em.title {font-size: 18px; font-weight: 700; margin-bottom: 6px; transition: all 0.3s;}
ul.lecture-list > li p.content span + span {margin-top: 3px;}
ul.lecture-list > li > a:hover p.content em.title {color: #ec6a0a;}
ul.lecture-list > li > a:hover span.thumb {border-color: #ec6a0a;}

div.board-view div.title p.board-title {font-size: 24px; font-weight: 700; margin: 10px 0 20px 0;}
div.board-view + div.button-box {margin-top: 40px;}
table.board-view {font-size: 13px; border-top: 2px solid #000000; display: block;}
table.board-view tbody {display: block;}
table.board-view tr {display: block; position: relative;}
table.board-view td {border-bottom: 1px solid #dddddd; padding: 10px 12px; display: block;}
table.board-view td.th {padding-left: 10px; font-weight: 700; background-color: #f3f4f7; box-sizing: border-box;}
table.board-view td.th i {color: #818285; margin-right: 8px;}
table.board-view td div.content {min-height: 300px;}
table.board-view div.attend p.title {font-size: 20px; font-weight: 700; color: #ec6a0a; margin-bottom: 5px;}
table.board-view div.attend div.text {background-color: #fafafa; text-align: center; padding: 20px;}
table.board-view div.attend div.text p + p {margin-top: 10px;}
table.board-view tbody.answer {border-top: 2px solid #dddddd;}
table.board-view div.editor-content {min-height: 200px;}
table.board-view div.long {line-height: 1.5em; margin: 5px 0;}


table.board-list {font-size: 13px; border-top: 2px solid #888888; border-bottom: 1px solid #e5e5e5; display: block;}
table.board-list * {display: block;}
table.board-list thead {display: none;}
table.board-list tbody tr {transition: all 0.3s; position: relative;}
table.board-list tbody tr + tr {border-top: 1px solid #e0e0e0;}
table.board-list tbody > tr > *:first-child {display: none;}
table.board-list th,
table.board-list td {position: absolute;}
table.board-list td:nth-child(2) {position: relative;}
table.board-list td:nth-child(3) {display: none;}
table.board-list td:nth-child(4) {left: 10px; bottom: 5px;}
table.board-list td:nth-child(5) {right: 10px; bottom: 5px;}
table.board-list td:nth-child(6) {display: none;}
table.board-list tbody tr:hover {background-color: #f9f9f9;}
table.board-list tbody td a {text-align: left; transition: all 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 10px 30px 10px;}
table.board-list tbody td a em {display: inline-block;}
table.board-list tbody td a:hover {color: #ec6a0a;}
table.board-list tbody td a i {color: #999999; margin-right: 5px; display: inline-block;}
table.board-list tbody td a span.tag {margin-left: 10px;}
table.board-list span.tag {display: inline-block; font-size: 12px; padding: 0 5px; border-radius: 4px; background-color: #e0e0e0; line-height: 20px; color: #ffffff; text-align: center;}
table.board-list span.tag.gray {background-color: #999999;}
table.board-list span.tag.red {background-color: #ec6a0a;}
table.board-list span.tag.sky {background-color: #7dc6d7;}
table.board-list span.tag.yellow {background-color: #f3a420;}
table.board-list + div.pagination {margin-top: 40px;}
table.board-list p.no-info {font-size: 13px;}
table.board-list p.no-info i {color: #ffcc00; margin-right: 10px;}


div.content-col2 {overflow: hidden;}
div.content-col2 + div.content-col2 {margin-top: 40px;}
div.content-col2 > div.right {margin-top: 30px;}
div.content-col2 p.image {overflow: hidden; border-radius: 10px;}

p.search-box {position: relative; overflow: hidden;}
p.search-box > * {float: left; box-sizing: border-box;}
p.search-box select {height: 50px; border: 1px solid #dddddd; font-family: inherit; color: #666666; box-sizing: border-box; font-size: 16px; width: 120px; padding-left: 10px;}
p.search-box input {width: calc(100% - 80px); height: 50px; border: 1px solid #dddddd; font-family: inherit; color: #666666; box-sizing: border-box; padding: 0 80px 0 30px; font-size: 16px;}
p.search-box select + input {width: calc(100% - 200px);}
p.search-box a.search {position: absolute; right: 100px; top: 50%; transform: translate(0, -50%); font-size: 20px; color: #ec6a0a;}
p.search-box a.detail {position: absolute; right: 0; top: 0; height: 100%; width: 80px; text-align: center; border: 1px solid #dddddd; box-sizing: border-box; padding-top: 8px; background-color: #ec6a0a; color: #ffffff; font-size: 13px;}
p.search-box a.detail i {display: block; margin-bottom: 2px;}

div.list-info {overflow: hidden; border-bottom: 1px solid #dddddd; padding-bottom: 20px; margin-bottom: 60px;}
div.list-info p.num-list {font-weight: 700;}
div.list-info p.num-list em {color: #ec6a0a;}
div.list-info p.num-list > span + span {margin-left: 5px;}
div.list-info ul.sort {margin-top: 10px; overflow: hidden;}
div.list-info ul.sort > li {float: left;}
div.list-info ul.sort > li + li::before {content: '|'; margin: 0 10px; font-size: 8px; color: #dddddd;}
div.list-info ul.sort > li.on > a {color: #ec6a0a; font-weight: 700;}

div.table-info {margin-bottom: 10px;}
div.table-info p.num-list {font-weight: 700;}
div.table-info p.num-list em {color: #ec6a0a;}
div.table-info p.num-list > span + span {margin-left: 5px;}

div.pagination {text-align: center; margin-top: 40px;}
div.pagination > div.box {display: inline-block;}
div.pagination a {display: inline-block; min-width: 24px; height: 30px; padding: 0 5px; box-sizing: border-box; text-align: center; line-height: 28px; font-size: 13px; color: #8da0aa; vertical-align: middle; transition: all 0.2s; border: 1px solid #dfe8f1; border-right: none;}
div.pagination a:hover {background: rgba(0, 0, 0, 0.05); color: #000000;}
div.pagination a.disabled {color: #cccccc; cursor: default;}
div.pagination a.disabled:hover {background: inherit; color: #cccccc;}
div.pagination > div.box > a {float: left;}
div.pagination > div.box > a.first {border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
div.pagination > div.box > a.last {border-right: 1px solid #dfe8f1; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}
div.pagination ol {float: left;}
div.pagination ol > li {float: left;}
div.pagination ol > li.on > a {background: #222222; color: #ffffff; border-right: 1px solid rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2); cursor: default;}

div.image-slide {position: relative;}
div.image-slide div.slide-box {position: relative; overflow: hidden;}
div.image-slide div.slide-box p.dummy img {width: 100%; opacity: 0;}
div.image-slide div.slide-box ul.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.image-slide div.slide-box ul.slide > li {position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; display: none;}
div.image-slide div.slide-box ul.slide > li.on {display: block;}
div.image-slide div.slide-box ul.slide > li.show {display: block; z-index: 10; animation: image-slide-show 3s ease 0s 1 normal forwards;}
div.image-slide div.slide-box ul.slide > li.hide {display: block; z-index: 20; animation: image-slide-hide 3s ease 0s 1 normal forwards;}
div.image-slide div.slide-box ul.slide > li > img {width: 100%;}
div.image-slide div.slide-box ul.indicator {position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; line-height: 1px; z-index: 100;}
div.image-slide div.slide-box ul.indicator > li {display: inline-block; vertical-align: top;}
div.image-slide div.slide-box ul.indicator > li + li {margin-left: 3px;}
div.image-slide div.slide-box ul.indicator > li > a {display: inline-block; width: 8px; height: 8px; border-radius: 20px; border: 1px solid #ffffff; overflow: hidden; text-indent: -999px; box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);}
div.image-slide div.slide-box ul.indicator > li.on > a {background-color: #ffffff;}
div.image-slide div.slide-box p.control a {position: absolute; z-index: 100; color: #ffffff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);}
div.image-slide div.slide-box p.control a.prev {left: 20px; top: 50%; transform: translate(0, -50%);}
div.image-slide div.slide-box p.control a.next {right: 20px; top: 50%; transform: translate(0, -50%);}
div.image-slide div.slide-box p.control a img {position: relative; left: 0; transition: left 0.1s;}
div.image-slide div.slide-box p.control a.prev.on img {left: -10px;}
div.image-slide div.slide-box p.control a.next.on img {left: 10px;}
div.image-slide div.slide-box p.control a.timer {position: absolute; right: 20px; bottom: 20px; font-size: 20px;}
div.image-slide div.slide-box p.control a.timer .pause {display: none;}
div.image-slide div.slide-box p.control a.timer .play {display: block;}
div.image-slide div.slide-box p.control a.timer.on .pause {display: block;}
div.image-slide div.slide-box p.control a.timer.on .play {display: none;}
div.image-slide div.slide-box span.timerBar {position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #6065b2; opacity: 0.5;}
div.image-slide div.thumb-box {margin-top: 10px;}
div.image-slide div.thumb-box ul.thumb li {float: left; width: calc(20% - 8px); margin-right: 10px; margin-bottom: 6px; overflow: hidden;}
div.image-slide div.thumb-box ul.thumb li:nth-child(5n) {margin-right: 0;}
div.image-slide div.thumb-box ul.thumb li a {display: block; position: relative; height: 60px; overflow: hidden;}
div.image-slide div.thumb-box ul.thumb li a::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); border: 4px solid transparent; box-sizing: border-box; transition: all 0.3s;}
div.image-slide div.thumb-box ul.thumb li.on a::after {border-color: #e67e22; background-color: transparent;}
div.image-slide div.thumb-box ul.thumb > li > a em {position: absolute; left: -9999px;}
@keyframes image-slide-show {
  0% {opacity: 0; transform: rotate(-3deg) scale(0.9);}
  100% {opacity: 1; transform: rotate(0) scale(1);}
}
@keyframes image-slide-hide {
  0% {opacity: 1; transform: rotate(0) scale(1);}
  100% {opacity: 0; transform: rotate(3deg) scale(1.1);}
}

.custom-scroll {overflow: auto;}
.custom-scroll::-webkit-scrollbar {
  width: 10px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
  transition: background-color 0.3s;
}
.custom-scroll:hover::-webkit-scrollbar-thumb {
  background-color: #e8e8e8;body.sub #main > section.content {position: relative; max-width: 1000px; margin: 0 auto; padding: 80px 0; box-sizing: border-box;}
}
.custom-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}









/* login */
#login-box {position: relative; margin: 0 auto; border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1); padding: 30px 30px 40px 30px; overflow: hidden; font-size: 14px;}
#login-box h3 {font-size: 24px; padding: 40px 0 10px 0; border-bottom: 1px solid #e0e0e0; margin-bottom: 20px; background: url(../img/logo-color.png) right top no-repeat; background-size: 100px auto;}
#login-box ul {margin: 20px 0;}
#login-box ul > li {position: relative;}
#login-box ul > li + li {margin-top: 10px;}
#login-box ul > li > i {position: absolute; left: 1px; top: 1px; width: 40px; height: calc(100% - 2px); border-right: 1px solid #e0e0e0; background-color: #eeeeee; border-top-left-radius: 4px; border-bottom-left-radius: 4px; box-sizing: border-box; color: #666666; font-size: 14px;}
#login-box ul > li > i::before {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#login-box ul > li input.text {height: 38px; width: 100%; font-size: 16px; color: #ec6a0a; padding: 0 20px 0 60px;}
#login-box ul > li input[type="checkbox"] + label {padding-left: 6px;}
#login-box p.link {position: absolute; left: 0; bottom: 0; width: 100%; line-height: 40px; background-color: #f9f9f9; font-size: 12px; text-align: center;}
#login-box p.link a {transition: all 0.3s;}
#login-box p.link a:hover {color: #ec6a0a;}
#login-box p.link a i {margin-right: 5px;}
#login-box p.link a + a {margin-left: 30px;}

div.regulation {border: 2px solid #e0e0e0; height: 200px; padding: 20px; overflow: auto; white-space: pre-wrap; box-sizing: border-box;}
div.regulation + p.check {margin-top: 10px;}
body.signup p.check input {margin-right: 5px;}

div.regulations {padding: 0;}
div.regulations h4 {font-size: 16px; margin: 20px 0 15px 0;}
div.regulations h5 {font-size: 14px; margin: 15px 0 8px 0;}
div.regulations p {margin: 3px 0;}
div.regulations > ol > li {margin: 3px 0; text-indent: -15px; margin-left: 15px;}
div.regulations ol ol li {margin: 2px 0 3px 20px; text-indent: -15px; margin-left: 15px;}



/* Form */
/* button */
div.button-box {text-align: right; overflow: hidden; clear: both;}
div.button-box.left {text-align: left;}
div.button-box.center {text-align: center;}
div.button-box.right {text-align: right;}
div + div.button-box {margin-top: 40px;}
table + div.button-box {margin-top: 40px;}

.btn {position: relative; display: inline-block; box-sizing: border-box; min-width: 120px; height: 28px; line-height: 26px; padding: 0 0.8em; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; overflow: hidden; text-align: center; vertical-align: middle; background: #999999; color: #ffffff; font-family: inherit; font-size: 13px; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color 0.3s;}
.btn > span {position: relative; z-index: 10;}
.btn:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: background-color 0.3s, box-shadow 0.2s; z-index: 3;}
.btn:not(.disabled):hover {border-color: rgba(0, 0, 0, 0.4);}
.btn:not(.disabled):hover:before {background-color: rgba(255, 255, 255, 0.2);}
/* .btn:active:before {box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4) inset;} */

/* button size */
.btn.small {min-width: 70px; height: 24px; line-height: 22px; font-size: 11px;}
.btn.medium {min-width: 90px; height: 28px; line-height: 26px; font-size: 12px;}
.btn.large {min-width: 120px; height: 34px; line-height: 32px; font-size: 14px;}
.btn.x-large {min-width: 140px; height: 40px; line-height: 38px; font-size: 16px;}
.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.x-large.icon {min-width: 44px; padding: 0;}
.btn > i {margin-right: 10px;}

/* color */
.btn.default {background: #fefefe; color: #555a60;}
.btn.blue {background: #3498db; color: #ffffff;}
.btn.sky {background: #65a6ff; color: #ffffff;}
.btn.red {background: #e74c3c; color: #ffffff;}
.btn.orange {background: #e67e22; color: #ffffff;}
.btn.green {background: #00bca4; color: #ffffff;}
.btn.azure {background: #41e5c0; color: #ffffff;}
.btn.black {background: #2d2d2d; color: #ffffff;}
.btn.yellow {background: #ffcc00; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}
.btn.purple {background: #984dff; color: #ffffff;}

.btn.gray {background: #dfe8f1; color: #555a60;}
.btn.dark {background: #999999; color: #ffffff;}
.btn.main {background: #ec6a0a; color: #ffffff; border: 1px solid #ec6a0a;}
.btn.sub1 {background: #7dc6d7; color: #ffffff;}
.btn.sub2 {background: #939597; color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);}
.btn.caution {background: #e74c3c; color: #ffffff;}
/* button options */
.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;}

/* icon left/right */
.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); margin-right: 0;}
/* click 효과 */
.btn span.circle {position: absolute; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 200px; background: rgba(0, 0, 0, 0.2); animation: btn-circle-animation 0.6s ease-out 0s 1 normal forwards; z-index: 0;}
@keyframes btn-circle-animation {
    0% {opacity: 1; transform: translate(-50%, -50%) scale(0);}
    100% {opacity: 0; transform: translate(-50%, -50%) scale(1);}
}


/* form */
table.form-box {font-size: 13px; border-top: 2px solid #000000; border-bottom: 2px solid #000000; display: block;}
table.form-box > tbody {display: block;}
table.form-box > tbody > tr {position: relative; display: block;}
table.form-box > tbody > tr > td {border-bottom: 1px solid #e0e0e0; box-sizing: border-box; vertical-align: middle; display: block; padding: 3px 0;}
table.form-box > tbody > tr > td.th {color: #000000; font-weight: 700; max-width: none; background-color: #f9f9f9; line-height: 30px; box-sizing: border-box; padding-left: 10px;}
table.form-box > tbody > tr > td.th.long {line-height: 1.5em;}
table.form-box > tbody > tr > td.th label > em {color: #ec6a0a; margin-right: 6px;}
table.form-box > tbody > tr > td:last-child {border-right: none;}
table.form-box > tbody > tr > td > div.long {line-height: 1.5em; margin: 5px 0;}
table.form-box > tbody > tr > td > div.line + div.line {margin-top: 5px;}
table.form-box img {max-width: 100%;}
table.form-box td.editor {padding: 0;}
table.form-box td p.history {margin-bottom: 5px;}
table.form-box td p.history + span.time {margin-right: 30px;}
table.form-box td span.label {display: inline-block; min-width: 80px; height: 28px; line-height: 26px; padding: 0 8px; border: 1px solid #d1d9dd; background: #f9f9f9; box-sizing: border-box; text-align: center; border-radius: 3px; margin-left: 30px; margin-right: 5px; vertical-align: middle;}
table.form-box td span.label:first-child {margin-left: 0;}
table.form-box span.desc {font-size: 11px; color: #ec6a0a; display: block;}
table.form-box p.desc {font-size: 11px; color: #ec6a0a; line-height: 1.3em; margin-top: 5px; text-indent: -6px; padding-left: 10px;}
table.form-box td > p {overflow: hidden;}
table.form-box td > p + p {margin-top: 5px;}
table.form-box div.editor {min-height: 200px;}
table.form-box ul.text-list {line-height: 1.4em; border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px 15px;}
table.form-box ul.text-list > li {position: relative; padding-left: 15px;}
table.form-box ul.text-list > li::before {content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 10px; background-color: #70c1d2;}
table.form-box ul.text-list > li + li {margin-top: 5px;}
table.form-box ul.text-list > li em {color: #ec6a0a; font-weight: 700;}
table.form-box ul.text-list + p {margin: 10px 0;}


input.text,
select,
textarea {display: inline-block; box-sizing: border-box; background: #ffffff; border: 1px solid #dfe8f1; border-radius: 3px; vertical-align: middle; outline: none; font-family: inherit; font-size: inherit; transition: border-color ease-in-out 0.2s 0s, box-shadow ease-in-out 0.2s 0s; margin: 0; -webkit-appearance: none; appearance: none;}
input.text {width: 160px; height: 30px; padding: 0 8px;}
select {height: 30px; padding-left: 8px; padding-right: 25px; background: #ffffff url(../img/common/icon_select.png) right 5px center no-repeat; background-size: 8px auto;}
select::-ms-expand {display: none;}
textarea {width: 100%; min-height: 120px; padding: 8px;}
input.text:focus,
select:focus,
textarea:focus {border-color: #ec6a0a; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.075) inset, 0 0 5px 0 rgba(218, 27, 94, 0.4);}
input[type=radio],
input[type=checkbox] {vertical-align: middle; margin: 0; display: inline-block;}
input[type=file] {display: block; font-family: inherit; font-size: 12px;}
input.full {width: 100%;}
input.half {width: calc(45% - 2px);}
input.half + input.half {margin-left: 4px;}
input.count {width: 50px; text-align: center;}
input.money {width: 90px; text-align: right;}
input.money-big {width: 120px; text-align: right;}
input.short {width: 100px;}
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: #ec6a0a; opacity: 0.4;}

ul.input-list {overflow: hidden; display: inline-block; vertical-align: middle;}
ul.input-list > li {float: left; margin-right: 30px; height: 28px; line-height: 28px;}
ul.input-list > li > input {vertical-align: middle; margin: 0;}
ul.input-list > li > label {display: inline-block; vertical-align: middle; 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: 28px; box-sizing: border-box; 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: 28px; box-sizing: border-box; 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);}


/* 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; box-sizing: border-box; line-height: 26px; font-size: 12px; color: #8da0aa; 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: #ffcc00; 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; box-sizing: border-box;}
div.dino-file-list > ul > li > .filename > img {margin-right: 8px;}
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: #ffcc00; 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; box-sizing: border-box; color: #ffffff; background: #65a6ff; opacity: 0.9; transition: all 0.3s; transform: scale(0);}
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;}
@keyframes download-file {
    0% {opacity: 0; top: -10px;}
    100% {opacity: 1; top: 30px;}
}


/* image-list */
div.dino-image-list {font-size: 12px; line-height: 1.4em; margin: 5px 0;}
div.dino-image-list > ul {}
div.dino-image-list > ul > li {position: relative; display: inline-block; width: 180px; height: 170px; box-sizing: border-box; border-radius: 3px; padding: 5px; border: 1px solid #dfe8f1; vertical-align: top; margin-right: 3px; margin-bottom: 5px; overflow: hidden; background: #fafcfe; color: #8da0aa; transition: all 0.2s;}
div.dino-image-list > ul > li:hover {box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);}
div.dino-image-list > ul > li > * {display: block;}
div.dino-image-list > ul > li span.image {position: relative; display: block; height: 110px; background: #ffffff; overflow: hidden; text-align: center; line-height: 110px; border: 1px solid #dfe8f1; border-radius: 3px;}
div.dino-image-list > ul > li span.image > i {color: #ffcc00; font-size: 40px; opacity: 0.5;}
div.dino-image-list > ul > li span.image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%;}
div.dino-image-list > ul > li span.image span.dimension {position: absolute; left: 0; bottom: -22px; width: 100%; line-height: 22px; font-size: 12px; color: #ffffff; background: rgba(0, 0, 0, 0.6); transition: all 0.3s;}
div.dino-image-list > ul > li:hover span.image span.dimension {bottom: 0;}
div.dino-image-list > ul > li em.filename {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 5px 0;}
div.dino-image-list > ul > li em.filename i {margin-right: 8px; color: #ffcc00;}
div.dino-image-list > ul > li em.filename img {margin-right: 5px; vertical-align: top;}
div.dino-image-list > ul > li span.size {position: absolute; left: 5px; bottom: 5px; font-size: 10px; padding: 4px 5px; background: #ffcc00; color: #ffffff; line-height: 1em; border-radius: 3px;}
div.dino-image-list > ul > li p.function a {position: absolute; width: 22px; height: 22px; border-radius: 100px; border: 1px solid #e0e0e0; box-sizing: border-box; color: #999999; background: rgba(255, 255, 255, 0.8); transition: all 0.3s; transform: scale(0);}
div.dino-image-list > ul > li:hover p.function a {transform: scale(1);}
div.dino-image-list > ul > li p.function a:hover {background: #ffffff;}
div.dino-image-list > ul > li p.function a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.dino-image-list > ul > li p.function a.prev {left: 5px; top: 5px;}
div.dino-image-list > ul > li p.function a.next {right: 5px; top: 5px;}
div.dino-image-list > ul > li p.function a.rotate {right: 30px; bottom: 5px; background: #ffcc00; color: #ffffff;}
div.dino-image-list > ul > li p.function a.del {right: 5px; bottom: 5px; background: #e74c3c; color: #ffffff;}
div.dino-image-list > ul > li p.function a.enlarge {top: 40px; left: 50%; transform: translate(-50%, 0) scale(0); width: 40px; height: 40px; font-size: 20px;}
div.dino-image-list > ul > li:hover p.function a.enlarge {transform: translate(-50%, 0) scale(1);}


/* 댓글 */
ul.comment-list {position: relative; font-size: 13px;}
ul.comment-list > li {position: relative; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 12px 8px 80px; min-height: 80px; box-sizing: border-box;}
ul.comment-list > li + li {margin-top: 10px;}
ul.comment-list > li p.photo {position: absolute; left: 12px; top: 50%; transform: translate(0, -50%); width: 50px; height: 50px; border: 1px solid #e0e0e0; border-radius: 100px; overflow: hidden; background: #ffffff url(../img/common/icon_face.png) center center no-repeat; background-size: cover;}
ul.comment-list > li p.user {margin-bottom: 10px; position: relative; border-bottom: 1px solid #f3a420; padding-bottom: 6px;}
ul.comment-list > li p.user span.name {font-weight: 700; font-size: 15px;}
ul.comment-list > li p.user span.org {color: #777777;}
ul.comment-list > li p.user span.time {font-size: 11px; position: absolute; right: 0; top: 4px;}
ul.comment-list > li p.user span.star {color: #f3a420; font-size: 11px; display: block;}

ul.comment-list + form {margin-top: 20px;}
div.comment-input {position: relative; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; background-color: #f9f9f9; padding: 10px; font-size: 13px;}
div.comment-input ul.star {overflow: hidden; color: #f3a420; margin-bottom: 30px;}
div.comment-input ul.star > li {float: left; width: 50%;}
div.comment-input ul.star > li label {padding-left: 4px;}
div.comment-input #comment-submit {position: absolute; right: 10px; top: 60px;}
form + div.button-box {margin-top: 40px;}


/* 팝업 */
#popup-wrapper {height: 100vh; padding: 60px 0 30px 0; box-sizing: border-box; overflow: hidden; background: #fafcfe;}
#popup-header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); 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: 30px; top: 50%; transform: translate(0, -50%); font-size: 30px;}
#popup-main {height: 100%; box-sizing: border-box; overflow: auto; padding: 20px 20px 50px 20px;}
#popup-main section.layout {margin: 10px 0;}
#popup-footer {position: fixed; left: 0; bottom: 0; width: 100%; height: 30px; background: linear-gradient(154deg, #008fe2 0, #00b29c 100%); z-index: 10000; color: #ffffff; font-size: 12px;}
#popup-footer p.copyright{line-height: 30px; margin-left: 30px;}
#popup-footer img.logo {height: 14px; position: absolute; right: 30px; top: 50%; transform: translate(0, -50%);}


/* EOF */