@charset 'utf-8';
/* CSS Document */

/* reset */
body {margin: 0;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
header, main, footer, section, article, aside, nav {display: block;}
a {color: inherit; text-decoration: inherit;}
a img {border: none;}
img {vertical-align: middle;}
li {list-style: none;}
address, em, i, cite {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0;}
i.fas, i.far, i.fab {vertical-align: middle; display: inline-block;}
.mobile {display: none !important;}
br.only-m {content: '';}
br.only-m:after {content: '\00a0';}
div.hidden {position: absolute; left: -9999px;}


/* common */
body {font-family: 'Noto Sans KR', '나눔고딕', '맑은 고딕', 'malgun gothic', '돋움', 'Dotum', 'Apple SD Gothic Neo', 'Helvetica', sans-serif; font-weight: 400; font-size: 13px; color: #333333; background: #ffffff;}
#wrapper {min-width: 1024px; overflow: hidden;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.6); border-bottom: 1px solid #ffffff; z-index: 100000; transition: top 0.3s;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; height: 100px; min-width: 1024px; background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)); color: #ffffff; z-index: 10000; transition: all 0.3s; box-sizing: border-box;}
#header:after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; animation: header-line 3s linear 0.5s 1 normal forwards;}
#header.white {height: 80px; background: #ffffff; color: #333333; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1); border-bottom: 1px solid #e0e0e0;}
#header h1 {position: absolute; left: 50px; top: 50%; transform: translate(0, -50%); width: 120px;}
#header h1 img {width: 100%; transition: opacity 0.3s;}
#header h1 img + img {position: absolute; left: 0; top: 0; opacity: 0;}
#header.white h1 img {opacity: 0;}
#header.white h1 img + img {opacity: 1;}
#header.open:before {content: ''; position: absolute; left: 0; bottom: -80px; width: 100%; height: 80px; background: #5f5f6b;}
@keyframes header-line {
    0% {width: 0; background: rgba(255, 255, 255, 0.1);}
    50% {width: 50%; background: rgba(255, 255, 255, 0.8);}
    100% {width: 100%; background: rgba(255, 255, 255, 0.3);}
}

#gnb {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 18px;}
#gnb > ul > li {float: left;}
#gnb > ul > li + li {margin-left: 100px;}
#gnb > ul > li > ul {position: absolute; top: 90px; color: #ffffff; font-size: 16px; display: none;}
#header.white #gnb > ul > li > ul {top: 80px;}
#gnb > ul > li.sub1 > ul {left: 0; width: 800px;}
#gnb > ul > li.sub2 > ul {left: -200px; width: 1200px;}
#gnb > ul > li.sub4 > ul {right: 0;}
#gnb > ul > li > ul > li {float: left;}
#gnb > ul > li > ul > li + li:before {content: '|'; margin: 0 30px; font-size: 10px; color: #80808d; position: relative; top: -3px;}
#gnb > ul > li > ul > li > a {transition: color 0.3s;}
#gnb > ul > li > ul > li.on > a,
#gnb > ul > li > ul > li > a:hover {color: #ed1c24;}
#gnb span.bar {position: absolute; left: 0; bottom: -36px; width: 0; height: 4px; background: #ed1c24; transition: all 0.3s;}
#header.white #gnb span.bar {bottom: -26px;}
@media screen and (max-width: 1350px) {
    #header h1 {width: 180px;}
    #gnb {font-size: 16px;}
    #gnb > ul > li + li {margin-left: 70px;}
    #gnb > ul > li > ul {font-size: 14px;}
    #gnb > ul > li > ul > li + li:before {margin: 0 20px;}
}

#top-menu {position: absolute; right: 50px; top: 50%; transform: translate(0, -50%);}
#top-menu > li {float: left;}
#top-menu > li + li {margin-left: 30px;}
#top-menu > li i {margin-right: 8px; position: relative; top: -1px;}
#top-menu a {transition: color 0.3s;}
#top-menu a:hover {color: #ed1c24;}

#footer {background: #ffffff;}
#footer section.sitemap {background: #f6f6f6;}
#footer section.sitemap div.content-box {position: relative; max-width: 1200px; margin: 0 auto; padding: 50px 0; box-sizing: border-box;}
#footer-gnb > ul {overflow: hidden; font-size: 14px; color: #888888;}
#footer-gnb > ul > li {float: left;}
#footer-gnb > ul > li + li {margin-left: 13%;}
#footer-gnb > ul > li > a {font-size: 16px; font-weight: 700; color: #333333; transition: color 0.3s;}
#footer-gnb > ul > li > a:hover {color: #ed1c24;}
#footer-gnb > ul > li > ul {margin-top: 20px;}
#footer-gnb > ul > li > ul > li + li {margin-top: 5px;}
#footer-gnb > ul > li > ul > li > a {transition: color 0.3s;}
#footer-gnb > ul > li > ul > li > a:hover {color: #333333;}
#footer section.sitemap ul.footer-link {position: absolute; right: 0; top: 50px; font-size: 14px; font-weight: 700;}
#footer section.sitemap ul.footer-link li + li {margin-top: 20px;}
#footer section.sitemap ul.footer-link li a {display: block; width: 200px; line-height: 40px; background: #ffffff; text-align: center; border: 1px solid #ed1c24; transition: all 0.3s;}
#footer section.sitemap ul.footer-link li a:hover {color: #ffffff; background: #ed1c24;}
#footer section.footer {background: #ffffff;}
#footer section.footer div.content-box {position: relative; max-width: 1200px; margin: 0 auto; padding: 30px 0 50px 250px; font-size: 13px; color: #666666; box-sizing: border-box;}
#footer section.footer h2 {position: absolute; left: 0; top: 30px; width: 100px;}
#footer section.footer h2 img {width: 100%;}
#footer address span + span:before {content: '|'; margin: 0 10px; font-size: 9px; position: relative; top: -2px; color: #aaaaaa;}
#footer address span.cs:before {content: ''; display: block;}
#footer p.copyright {margin-top: 5px;}
#footer p.copyright em {font-weight: 700; color: #333333;}
#footer ul.sns-link {position: absolute; right: 0; top: 30px;}
#footer ul.sns-link li {float: left;}
#footer ul.sns-link li + li {margin-left: 10px;}
#footer ul.sns-link li a {display: block; width: 40px;}
#footer ul.sns-link li a img {width: 100%;}
@media screen and (max-width: 1300px) {
    #footer-gnb > ul > li + li {margin-left: 10%;}
    #footer section.sitemap div.content-box {padding: 50px 30px;}
    #footer section.sitemap ul.footer-link {right: 30px;}
    #footer section.sitemap ul.footer-link li a {width: 160px;}
    #footer section.footer div.content-box {padding: 30px 30px 50px 30px;}
    #footer section.footer h2 {left: 30px;}
    #footer address {text-align: center;}
    #footer p.copyright {text-align: center;}
    #footer ul.sns-link {right: 30px;}
}


/* main */
#main-popup > div {position: fixed; left: 0; top: 100px; z-index: 100000; background: #ffffff; border: 1px solid #e0e0e0; padding: 10px; box-sizing: border-box; box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3); display: none;}
#main-popup > div p.function {font-size: 13px; text-align: right; padding-bottom: 10px; line-height: 30px;}
#main-popup > div p.function input {margin: 0; vertical-align: middle; margin-right: 5px;}
#main-popup > div p.function a.close {display: inline-block; vertical-align: middle; padding: 0 20px; border: 1px solid #e0e0e0; margin-left: 30px; transition: all 0.3s; box-sizing: border-box; height: 30px; line-height: 28px;}
#main-popup > div p.function a.close:hover {color: #ffffff; background: #ed1c24;}
#main-popup > div p.image a {display: block; text-align: center;}
#main-popup > div p.image a img {max-width: 100%;}


section.scroll-page {position: relative; height: 100vh; overflow: hidden;}
section.scroll-page div.content-box {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 1200px; width: 100%; box-sizing: border-box;}
section.scroll-page h2 {font-size: 40px; margin-bottom: 50px;}
section.scroll-page h2.center {text-align: center;}
section.scroll-page h2 span {display: block; color: #ed1c24; font-size: 20px; font-weight: 400;}
section.scroll-page h2 span em {font-weight: 700;}
@media screen and (max-width: 1300px) {
    section.scroll-page div.content-box {padding: 0 30px;}
}

#main-visual ul.slide li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; perspective: 1000px; perspective-origin: center center;}
/*#main-visual ul.slide li:first-child {display: block;}*/
#main-visual ul.slide li div.visual {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#main-visual ul.slide li.video:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.05);}
#main-visual ul.slide li.video div.visual:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 15%; background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
#main-visual ul.slide li.video div.visual:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 15%; background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));}
#main-visual ul.slide li.video iframe {position: absolute; width: 100%; height: 100vh; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#main-visual ul.slide li.image div.visual span {float: left; width: 25%; height: 100vh; overflow: hidden; position: relative;}
#main-visual ul.slide li.image div.visual span img {position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); min-height: 100%;}
#main-visual ul.slide li.image div.visual span:nth-child(1) img {left: 200%;}
#main-visual ul.slide li.image div.visual span:nth-child(2) img {left: 100%;}
#main-visual ul.slide li.image div.visual span:nth-child(3) img {left: 0;}
#main-visual ul.slide li.image div.visual span:nth-child(4) img {left: -100%;}
#main-visual ul.slide li div.slogan {position: absolute; left: 50%; top: 50%; width: 1024px; transform: translate(-50%, -50%); color: #ffffff; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6); z-index: 10; box-sizing: border-box;}
#main-visual ul.slide li div.slogan span {display: block; font-size: 24px; opacity: 0;}
#main-visual ul.slide li div.slogan p {font-size: 60px; font-weight: 700; line-height: 1.4em; opacity: 0;}
#main-visual ul.slide li div.slogan p em {font-size: 70px; color: #ed1c24;}
#main-visual div.indicator {position: absolute; left: 0; bottom: 50px; width: 100%; text-align: center; z-index: 100;}
#main-visual div.indicator ul {display: inline-block; vertical-align: top;}
#main-visual div.indicator ul li {display: inline-block; position: relative;}
#main-visual div.indicator ul li + li {margin-left: 15px;}
#main-visual div.indicator ul li a {display: block; width: 12px; height: 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.4); text-indent: -999px; overflow: hidden; box-sizing: border-box; position: relative;}
#main-visual div.indicator ul li.on a {width: 50px; border: 2px solid #ffffff; background: none;}
#main-visual div.indicator ul li a span.bar {position: absolute; left: 0; top: 0; width: 0; height: 100%; border-radius: 20px; box-sizing: border-box; background: #ed1c24;}
#main-visual div.indicator a.play {color: #ffffff; margin-left: 20px; vertical-align: top; position: relative; top: -2px; font-size: 16px;}
#main-visual div.indicator a.play i {display: none;}
#main-visual div.indicator a.play i:first-child {display: inline;}
#main-visual div.indicator a.play.on i {display: none;}
#main-visual div.indicator a.play.on i + i {display: inline;}

#main-visual ul.slide li.show {display: block; animation: main-slide-show 1s ease-out 0s 1 normal forwards;}
#main-visual ul.slide li.show div.slogan span {animation: main-text-show1 1s ease-out 0s 1 normal forwards;}
#main-visual ul.slide li.show div.slogan p {animation: main-text-show2 1s ease-out 0.5s 1 normal forwards;}
#main-visual ul.slide li.hide {display: block; z-index: 10;}
#main-visual ul.slide li.video.hide {animation: main-video-hide 1s ease-out 0s 1 normal forwards;}
#main-visual ul.slide li.image.hide div.visual span:nth-child(2n-1) {animation: main-image-hide1 1s ease-out 0s 1 normal forwards;}
#main-visual ul.slide li.image.hide div.visual span:nth-child(2n) {animation: main-image-hide2 1s ease-out 0s 1 normal forwards;}
#main-visual ul.slide li.hide div.slogan span {animation: main-text-hide1 1s ease-out 0s 1 normal forwards;}
#main-visual ul.slide li.hide div.slogan p {animation: main-text-hide2 1s ease-out 0s 1 normal forwards;}

@media screen and (max-width: 1300px) {
    #main-visual ul.slide li div.slogan {text-align: center;}
    #main-visual ul.slide li div.slogan p {font-size: 54px;}
}

/* animation */
@keyframes main-slide-show {
    0% {opacity: 0.2; transform: scale(1.1);}
    100% {opacity: 1; transform: scale(1);}
}
@keyframes main-video-hide {
    0% {opacity: 1; transform: translate(0, 0);}
    100% {opacity: 0; transform: translate(-100%, 0);}
}
@keyframes main-image-hide1 {
    0% {opacity: 1; transform: rotateY(0);}
    100% {opacity: 0; transform: rotateY(-70deg);}
}
@keyframes main-image-hide2 {
    0% {opacity: 1; transform: rotateY(0);}
    100% {opacity: 0; transform: rotateY(70deg);}
}
@keyframes main-text-hide1 {
    0% {opacity: 1; transform: translate(0, 0);}
    100% {opacity: 0; transform: translate(-100px, 0);}
}
@keyframes  main-text-hide2 {
    0% {opacity: 1; transform: translate(0, 0);}
    100% {opacity: 0; transform: translate(100px, 0);}
}
@keyframes main-text-show1 {
    0% {opacity: 0; transform: translate(0, -50px);}
    100% {opacity: 1; transform: translate(0, 0);}
}
@keyframes main-text-show2 {
    0% {opacity: 0; transform: translate(0, 50px);}
    100% {opacity: 1; transform: translate(0, 0);}
}

#main-visual p.control a.prev,
#main-visual p.control a.next {position: absolute; top: 50%; transform: translate(0, -50%); z-index: 100; opacity: 0.5; transition: opacity 0.3s;}
#main-visual p.control a.prev:hover,
#main-visual p.control a.next:hover {opacity: 1;}
#main-visual p.control a.prev {left: 50px;}
#main-visual p.control a.next {right: 50px;}

#main-product div.product-banner {position: relative;}
#main-product ul.product-list {position: relative;}
#main-product ul.product-list:after {content: ''; display: block; clear: both;}
#main-product ul.product-list li {float: left; width: 18%; position: relative; perspective: 1000px; perspective-origin: right center; margin-right: 2.5%;}
#main-product ul.product-list li:last-child {margin-right: 0;}
#main-product ul.product-list li > a {display: block; text-align: center;}
#main-product ul.product-list li > a > * {display: block; position: relative;}
#main-product ul.product-list li > a span.image {height: 350px; overflow: hidden; transition: transform 0.3s;}
#main-product ul.product-list li > a:hover span.image {transform: rotateY(20deg);}
#main-product ul.product-list li > a span.image:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(237, 28, 36, 0.4); opacity: 0; transition: opacity 0.3s;}
#main-product ul.product-list li > a:hover span.image:after {opacity: 1;}
#main-product ul.product-list li > a span.image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%;}
#main-product ul.product-list li > a em.title {font-size: 16px; font-weight: 700; margin: 20px 0 5px 0;}
#main-product ul.product-list li > a span.desc {font-size: 12px; color: #666666; margin-bottom: 10px;}
#main-product ul.product-list li > a span.button {display: inline-block; border: 1px solid #ed1c24; color: #ed1c24; font-size: 14px; width: 120px; line-height: 30px; transition: all 0.3s;}
#main-product ul.product-list li > a:hover span.button {background: #ed1c24; color: #ffffff;}
#main-product ul.product-list li > a span.button i {margin-left: 8px;}

#main-portfolio {background: url(/img/main_portfolio_bg.jpg) center center no-repeat; background-size: cover;}
#main-portfolio div.banner-slide {position: relative; margin-top: 80px;}
#main-portfolio div.banner-slide ul.banner {position: relative; overflow: hidden; width: 10000px;}
#main-portfolio div.banner-slide ul.banner li {float: left; width: 400px; position: relative; margin-right: 50px;}
#main-portfolio div.banner-slide ul.banner li:last-child {margin-right: 0;}
#main-portfolio div.banner-slide ul.banner li a {display: block; transition: all 0.3s;}
#main-portfolio div.banner-slide ul.banner li a:hover {transform: scale(1.1); box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.5);}
#main-portfolio div.banner-slide ul.banner li a img {width: 100%; position: relative;}
#main-portfolio div.banner-slide ul.banner li a em {position: absolute; left: 30px; bottom: 30px; font-size: 28px; color: #ffffff; text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8); z-index: 20;}
#main-portfolio div.banner-slide ul.banner li a:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(237, 28, 36, 0.4); opacity: 0; transition: opacity 0.3s; z-index: 10;}
#main-portfolio div.banner-slide ul.banner li a:hover:before {opacity: 1;}
#main-portfolio div.banner-slide ul.banner li a:after {content: ''; position: absolute; right: 40px; bottom: 40px; width: 82px; height: 18px; background: url(/img/icon_go.png) 0 0 no-repeat; opacity: 0; transition: opacity 0.3s; z-index: 30;}
#main-portfolio div.banner-slide ul.banner li a:hover:after {opacity: 1; animation: arrow-effect 0.8s ease-out 0s infinite normal forwards;}
#main-portfolio div.banner-slide p.control a.prev,
#main-portfolio div.banner-slide p.control a.next {position: absolute; top: 50%; transform: translate(0, -50%); z-index: 100;}
#main-portfolio div.banner-slide p.control a.prev {left: -60px;}
#main-portfolio div.banner-slide p.control a.next {right: -60px;}
#main-portfolio div.banner-slide p.control a img {position: relative;}
@keyframes arrow-effect {
    0% {transform: translate(0, 0);}
    30% {transform: translate(10px, 0);}
    100% {transform: translate(0, 0);}
}
@media screen and (max-width: 1300px) {
    #main-portfolio div.banner-slide p.control a.prev {left: 0;}
    #main-portfolio div.banner-slide p.control a.next {right: 0;}
}
#main-customer h2 {margin-bottom: 30px;}
#main-customer div.image {text-align: center;}
#main-customer div.image img {height: 65vh;}
#main-inquiry {background: url(/img/main_inquiry_bg.jpg) center center no-repeat; background-size: cover;}
#main-inquiry ul.inquiry {text-align: center; margin-top: 60px;}
#main-inquiry ul.inquiry li {display: inline-block; width: 360px; height: 280px; background: #ffffff; border: 2px solid #ed1c24; box-sizing: border-box; vertical-align: top; position: relative;}
#main-inquiry ul.inquiry li + li {margin-left: 40px;}
#main-inquiry ul.inquiry li a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 60px 30px 0 30px; transition: all 0.3s; overflow: hidden;}
#main-inquiry ul.inquiry li a > * {display: block; position: relative;}
#main-inquiry ul.inquiry li a span.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#main-inquiry ul.inquiry li a span.bg img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s;}
#main-inquiry ul.inquiry li a span.icon img {transition: all 0.3s;}
#main-inquiry ul.inquiry li a span.icon img + img {position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); opacity: 0;}
#main-inquiry ul.inquiry li em.title {font-size: 24px; font-weight: 700; margin: 25px 0 8px 0;}
#main-inquiry ul.inquiry li span.desc {font-size: 14px; color: #666666; transition: all 0.3s;}
#main-inquiry ul.inquiry li a:hover {color: #ffffff;}
#main-inquiry ul.inquiry li a:hover span.bg img {opacity: 1; transform: translate(-50%, -50%) rotate(5deg) scale(1.1);}
#main-inquiry ul.inquiry li a:hover span.icon img:first-child {opacity: 0;}
#main-inquiry ul.inquiry li a:hover span.icon img + img {opacity: 1;}
#main-inquiry ul.inquiry li a:hover span.desc {color: #ffffff;}
#main-inquiry p.inquiry {text-align: center; font-size: 24px; margin-top: 60px;}
#main-inquiry p.inquiry span {display: inline-block; border-bottom: 2px solid #333333; padding-bottom: 5px;}
@media screen and (max-width: 1300px) {
    #main-inquiry ul.inquiry li {width: 280px; height: 260px;}
    #main-inquiry ul.inquiry li a {padding-top: 50px;}
    #main-inquiry ul.inquiry li em.title {font-size: 20px;}
    #main-inquiry ul.inquiry li span.desc {font-size: 13px;}
}


/* sub(common) */
#sub-visual {position: relative; height: 400px; overflow: hidden;}
#sub-visual p.bg img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 100%; min-width: 100%;}
#sub-visual div.slogan {position: absolute; left: 50%; bottom: 120px; width: 100%; max-width: 1200px; transform: translate(-50%, 0); color: #ffffff; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6); box-sizing: border-box;}
#sub-visual div.slogan span {display: block; font-size: 20px; opacity: 0; animation: sub-text-show1 2s ease-out 0s 1 normal forwards;}
#sub-visual div.slogan p {font-size: 46px; font-weight: 700; line-height: 1.4em; opacity: 0; animation: sub-text-show2 2s ease-out 0.3s 1 normal forwards;}
#sub-visual div.slogan p em {font-size: 54px; color: #ed1c24;}
@keyframes sub-text-show1 {
    0% {opacity: 0; transform: translate(0, -50px);}
    100% {opacity: 1; transform: translate(0, 0);}
}
@keyframes sub-text-show2 {
    0% {opacity: 0; transform: translate(0, 50px);}
    100% {opacity: 1; transform: translate(0, 0);}
}
body.sub #main {position: relative; min-height: 500px;}
#bread-crumb {position: absolute; left: 50%; width: 100%; max-width: 1200px; transform: translate(-50%, -100%); background: #ffffff; z-index: 10; color: #aaaaaa; box-sizing: border-box;}
#bread-crumb ul {border: 1px solid #e0e0e0; overflow: hidden; font-size: 16px;}
#bread-crumb ul li {float: left; position: relative;}
#bread-crumb ul li:first-child {border-right: 1px solid #e0e0e0; font-size: 18px; width: 120px; box-sizing: border-box; text-align: center;}
#bread-crumb ul li a,
#bread-crumb ul li em {display: block; line-height: 50px; padding: 0 25px; transition: all 0.3s;}
#bread-crumb ul li em {color: #666666;}
#bread-crumb ul li + li {margin-right: 10px;}
#bread-crumb ul li + li i {position: absolute; right: -10px; top: 50%; transform: translate(0, -50%); color: #aaaaaa;}
#bread-crumb ul li a:hover {color: #333333;}
#bread-crumb ul li:first-child a:hover {color: #ffffff; background: #ed1c24;}

body.sub #main > section.content {max-width: 1200px; min-height: 600px; margin: 0 auto; padding: 50px 0 100px 0;}
body.sub #main h2 {font-size: 32px; margin-bottom: 40px;}
body.sub #main h2 span {display: block; font-weight: 400; font-size: 16px; color: #999999;}
body.sub section.content p.center {text-align: center;}

#lnb {overflow: hidden; margin-bottom: 50px;}
#lnb li {float: left; width: 180px; box-sizing: border-box; border: 1px solid #e0e0e0; text-align: center; font-size: 16px; border-right: none;}
#lnb.full li {width: 12.5%;}
#lnb li:last-child {border-right: 1px solid #e0e0e0;}
#lnb li a {display: block; text-align: center; line-height: 50px; position: relative; transition: all 0.3s;}
#lnb li a:after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); width: 0; height: 3px; background: #ed1c24; transition: width 0.3s;}
#lnb li a:hover:after {width: 100%;}
#lnb li.on {font-size: 18px; color: #ffffff; background: #ed1c24; border-right: 1px solid #e0e0e0;}
#lnb li.on + li {border-left: none;}

@media screen and (max-width: 1300px) {
    #sub-visual div.slogan {padding: 0 30px;}
    body.sub #main > section.content {padding: 50px 30px 100px 30px;}
}
body.sub #main div.image.full {margin: 60px 0;}
body.sub #main div.image.full img {width: 100%;}
body.sub #main p.paragraph {font-size: 16px; margin: 20px 0;}
body.sub #main p.paragraph em {font-weight: 700; font-size: 18px;}


/* folzen korea */
body.history div.title {position: relative; height: 400px; background: url(/img/folzen_history_img_01.jpg) center center no-repeat; background-size: 100% auto;}
body.history div.title div.text {position:text-align: center; font-size: 20px;}
body.history div.title div.text p.title {font-size: 32px; margin-bottom: 30px; font-weight: 0;}
body.history div.title div.text p.text {line-height: 1.8em;}

div.history {position: relative; overflow: hidden; overflow: hidden; padding: 50px 20px; font-size: 14px;}
div.history:before {content: ''; position: absolute; left: 50%; top: 0; width: 2px; transform: translate(-50%, 0); height: 100%; background: #aaaaaa;}
div.history:after {content: ''; position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; transform: translate(-50%, 0); border-radius: 20px; background: #aaaaaa;}
div.history > div.year {width: 50%; clear: both; margin-bottom: 30px;}
div.history > div.year.left {text-align: right;}
div.history > div.year.right {width: 50%; float: right; text-align: left;}
div.history > div.year h3 {position: relative; font-size: 32px; color: #fbc40d; padding: 0 60px; margin-bottom: 30px;}
div.history > div.year.left h3:before {content: ''; position: absolute; top: 16px; right: -8px; width: 16px; height: 16px; border-radius: 40px; background: #aaaaaa;}
div.history > div.year.left h3:after {content: ''; position: absolute; top: 11px; right: -13px; width: 26px; height: 26px; border-radius: 40px; border: 1px solid #aaaaaa; box-sizing: border-box;}
div.history > div.year.right h3:before {content: ''; position: absolute; top: 16px; left: -8px; width: 16px; height: 16px; border-radius: 40px; background: #aaaaaa;}
div.history > div.year.right h3:after {content: ''; position: absolute; top: 11px; left: -13px; width: 26px; height: 26px; border-radius: 40px; border: 1px solid #aaaaaa; box-sizing: border-box;}
div.history > div.year.now h3:before {background: #fbc40d;}
div.history > div.year.now h3:after {border-color: #fbc40d;}
div.history > div.year ul li {position: relative; line-height: 1.6em;}
div.history > div.year ul li + li {margin-top: 15px;}
div.history > div.year ul li em {font-weight: 700; font-size: 18px;}
div.history > div.year.left ul {padding-right: 60px;}
div.history > div.year.left ul li {padding-right: 120px;}
div.history > div.year.left ul li:after {content: ''; position: absolute; right: 0; top: 11px; width: 5px; height: 5px; background: #fbc40d;}
div.history > div.year.left ul li em {position: absolute; right: 15px; top: 0;}
div.history > div.year.right ul {padding-left: 60px;}
div.history > div.year.right ul li {padding-left: 120px;}
div.history > div.year.right ul li:after {content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; background: #fbc40d;}
div.history > div.year.right ul li em {position: absolute; left: 15px; top: 0;}
div.history > div.year ul li p span.desc {display: block; color: #999999; padding-left: 8px; text-indent: -8px; font-size: 13px;}

body.zenfolding.cert h3 {font-size: 24px; padding-bottom: 5px; border-bottom: 2px solid #656565; margin-bottom: 30px;}
ul.cert:after {content: ''; display: block; clear: both;}
ul.cert li {float: left; width: 30%; margin-right: 5%; margin-bottom: 50px; position: relative;}
ul.cert li:nth-child(3n) {margin-right: 0;}
ul.cert li > a {display: block;}
ul.cert li span.image {display: block; width: calc(100% - 180px); margin-right: 30px; box-sizing: border-box; border: 1px solid #eeeeee; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);}
ul.cert li span.image img {width: 100%;}
ul.cert li em.title {position: absolute; right: 0; top: 0; width: 150px; font-size: 20px; padding-top: 18px;}
ul.cert li em.title:before {content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 3px; background: #000000;}
ul.cert li p {position: absolute; right: 0; bottom: 0; width: 150px; font-size: 15px; color: #999999;}
ul.cert li p span {display: block;}
ul.cert li p span:first-child {margin-bottom: 5px;}
ul.cert > li.no-info {text-align: center; border: 1px solid #e0e0e0; width: 100%; padding: 30px 0;}
ul.cert > li.no-info i {display: block; font-size: 60px; color: #ed1c24; margin-bottom: 20px;}

body.view div.zenfolding-view {padding: 0 100px;}
body.view p.text {margin-top: 50px;}
body.view p.text img {width: 100%;}

body.way p.title {font-size: 22px; margin-bottom: 20px;}
body.way #google-map {height: 500px; overflow: hidden;}
body.way h3 {font-size: 28px; line-height: 46px; margin-top: 50px; margin-bottom: 20px; width: 220px; border-bottom: 2px solid #000000; background: url(/img/folzen_way_bg.png) right center no-repeat;}
body.way ul.contact {overflow: hidden; font-size: 14px; color: #999999;}
body.way ul.contact li {float: left; width: 25%; position: relative; padding-left: 80px; padding-right: 30px; box-sizing: border-box;}
body.way ul.contact li span.icon {position: absolute; left: 0; top: 0;}
body.way ul.contact li em.title {display: block; color: #333333; font-size: 20px; font-weight: 700; margin-bottom: 5px;}
body.way ul.contact li p span {display: block;}
@media screen and (max-width: 1200px) {
    body.way ul.contact li em.title {font-size: 18px;}
    body.way ul.contact li p {font-size: 13px;}
}


/* product */
section.image {overflow: hidden; border-bottom: 1px solid #e0e0e0; padding-bottom: 50px;}
section.image > div.left {float: left; width: 65%; margin-right: 5%;}
section.image > div.right {float: left; width: 30%; position: relative;}
section.image > div.right h3 {font-size: 26px; margin-bottom: 30px;}
section.image > div.right p.desc {font-size: 16px; margin-bottom: 50px; line-height: 1.8em;}
section.image > div.right ul.link li + li {margin-top: 10px;}
section.image > div.right ul.link li a {display: block; line-height: 50px; text-align: center; font-size: 16px; background: #ffffff; border: 1px solid #999999; transition: all 0.3s; color: #999999; border-radius: 3px;}
section.image > div.right ul.link li a:hover {color: #ed1c24; border-color: #ed1c24;}
section.detail {padding: 50px 0; border-bottom: 1px solid #e0e0e0;}
section.detail h3 {font-size: 34px; text-align: center; margin-bottom: 40px;}
section.drawing {padding: 50px 0;}
section.drawing h3 {font-size: 34px; text-align: center; margin-bottom: 40px;}
section.drawing div.drawing {text-align: center; border: 5px solid #e0e0e0;}
section.drawing div.drawing img {max-width: 100%;}


/* pr */
body.pr.video div.youtube-container + div.youtube-container {display: none;}
body.pr.customer p.center + p.center {margin-top: 80px;}


/* portfolio */
div.multi-image {overflow: hidden;}
div.multi-image > div.left {float: left; width: 65%; margin-right: 5%;}
div.multi-image > div.right {float: left; width: 30%; position: relative;}
div.multi-image > div.right p {font-size: 15px; line-height: 1.5em; margin-bottom: 20px;}


/* data */
body.data.open h3 {font-size: 24px; padding-bottom: 5px; border-bottom: 2px solid #656565; margin-bottom: 30px;}
body.data.open ul.door + h3 {margin-top: 40px;}
body.data.open ul.door {overflow: hidden;}
body.data.open ul.door li {float: left; margin-right: 30px; margin-bottom: 30px;}
body.data.open ul.door li span img {height: 200px;}
body.data.open ul.door li em {display: block; font-size: 16px; font-weight: 700; text-align: center; margin-top: 10px;}

body.color h3 {font-size: 24px; margin-bottom: 20px;}
body.color p.title {font-size: 16px; margin-bottom: 20px; color: #ff0000;}
ul.color-list {overflow: hidden; font-size: 15px; color: #999999; display: none;}
p.title + ul.color-list {display: block;}
ul.color-list li {float: left; width: 25%; height: 60px; position: relative; box-sizing: border-box; margin-bottom: 30px; padding-left: 85px; padding-right: 10px;}
ul.color-list li:before {content: ''; position: absolute; left: 0; top: 10%; width: 1px; height: 80%; background: #eeeeee;}
ul.color-list li span.image {position: absolute; left: 10px; top: 0;}
ul.color-list li span.code {display: block; margin-bottom: 10px;}
ul.color-list li span.code span:first-child {margin-right: 20px;}
ul.color-list li em.name {display: block; font-weight: 700; color: #333333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
@media screen and (max-width: 1200px) {
    ul.color-list {font-size: 13px;}
    ul.color-list li span.code {padding-top: 5px;}
}
body.color p.caution {font-size: 16px; margin-top: 20px; color: #ff0000;}
table.list {width: 100%; font-size: 14px; border-top: 3px solid #4c4c4c; border-bottom: 2px solid #4c4c4c; margin: 20px 0;}
table.list th,
table.list td {padding: 8px 15px; text-align: center;}
table.list thead {background: #f6f6f6;}
table.list tbody td {border-top: 1px solid #eeeeee;}
table.list tbody td.title {text-align: left; max-width: 1px;}
table.list tbody td a {font-size: 20px; transition: color 0.3s;}
table.list tbody td a:hover {color: #ed1c24;}

body.data ul.spec {text-align: center; margin-top: 60px;}
body.data ul.spec li {display: inline-block; width: 360px; height: 280px; background: #ffffff; border: 2px solid #ed1c24; box-sizing: border-box; vertical-align: top; position: relative;}
body.data ul.spec li + li {margin-left: 40px;}
body.data ul.spec li a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 30px 30px 0 30px; transition: all 0.3s; overflow: hidden;}
body.data ul.spec li a > * {display: block; position: relative;}
body.data ul.spec li a span.bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
body.data ul.spec li a span.bg img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s;}
body.data ul.spec li a span.icon {font-size: 80px; color: #999999;}
body.data ul.spec li em.title {font-size: 24px; font-weight: 700; margin: 25px 0 8px 0;}
body.data ul.spec li a:hover {color: #ffffff;}
body.data ul.spec li a:hover span.bg img {opacity: 1; transform: translate(-50%, -50%) rotate(5deg) scale(1.1);}
body.data ul.spec li a:hover span.icon {color: #ffffff;}
body.data ul.spec li a:hover span.desc {color: #ffffff;}




/* test (시험성적서) */
body.test h3 {font-size: 24px; padding-bottom: 5px; border-bottom: 2px solid #656565; margin-bottom: 30px;}




/* common, etc */
body.support #main {background: url(/img/common_support_bg.jpg) center center no-repeat; background-size: cover;}
body.support p.title {font-size: 22px; margin-bottom: 30px;}
body.support div.support {overflow: hidden;}
body.support div.support > div {float: left;}
body.support div.support > div.left {width: 65%; margin-right: 8%;}
body.support div.support > div.right {width: 27%;}
body.support h3 {font-size: 30px; margin-bottom: 30px;}
body.support ul.contact {font-size: 14px;}
body.support ul.contact li + li {margin-top: 30px;}
body.support ul.contact li em {display: block; font-size: 20px; font-weight: 700;}
@media screen and (max-width: 1200px) {
    body.support ul.input-list li {margin-right: 20px;}
}



/* module */
div.image-slide {position: relative; padding-right: 120px; background: #ffffff;}
div.image-slide div.slide {position: relative; overflow: hidden;}
div.image-slide div.slide p.dummy {opacity: 0;}
div.image-slide div.slide p.dummy img {width: 100%;}
div.image-slide div.slide ul.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.image-slide div.slide ul.slide li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; display: none;}
div.image-slide div.slide ul.slide li:first-child {display: block;}
div.image-slide div.slide ul.slide li img {max-width: 100%; max-height: 100%;}
div.image-slide div.slide p.control a {position: absolute; top: 0; width: 60px; height: 100%; color: rgba(255, 255, 255, 0.6); font-size: 30px; transition: all 0.3s;}
div.image-slide div.slide p.control a:hover {background: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.9);}
div.image-slide div.slide p.control a.prev {left: 0;}
div.image-slide div.slide p.control a.next {right: 0;}
div.image-slide div.slide p.control a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
div.image-slide div.slide p.control span.page {position: absolute; right: 20px; bottom: 15px; font-size: 16px; color: #ffffff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);}
div.image-slide div.slide p.control span.page em.now {color: #ed1c24; font-size: 20px; font-weight: 700;}
div.image-slide div.thumb {position: absolute; right: 0; top: 0; width: 116px; height: 100%; box-sizing: border-box; overflow: hidden; padding: 30px 0; box-sizing: border-box; border: 1px solid #e0e0e0;}
div.image-slide div.thumb div.box {height: 100%; position: relative; overflow: hidden;}
div.image-slide div.thumb ul.thumb {position: absolute; left: 0; top: 0; width: 100%;}
div.image-slide div.thumb ul.thumb li {position: relative;}
div.image-slide div.thumb ul.thumb li + li {margin-top: 2px;}
div.image-slide div.thumb ul.thumb li a {display: block; overflow: hidden; max-height: 100px; position: relative;}
div.image-slide div.thumb ul.thumb li a img {transition: transform 0.3s; width: 100%;}
div.image-slide div.thumb ul.thumb li a:hover img {transform: scale(1.1);}
div.image-slide div.thumb ul.thumb li a:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); transition: all 0.3s;}
div.image-slide div.thumb ul.thumb li a:hover:after {background: none;}
div.image-slide div.thumb ul.thumb li.on a:after {border: 3px solid #ed1c24; background: none;}
div.image-slide div.thumb p.control a {position: absolute; left: 0; width: 100%; height: 30px; box-sizing: border-box; background: #ffffff; color: #cccccc; font-size: 20px; transition: color 0.3s;}
div.image-slide div.thumb p.control a:hover {color: #666666;}
div.image-slide div.thumb p.control a.prev {top: 0;}
div.image-slide div.thumb p.control a.next {bottom: 0;}
div.image-slide div.thumb p.control a i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

table.detail {width: 100%; font-size: 14px; border-top: 3px solid #524d53; color: #707070; margin-bottom: 40px;}
table.detail td {padding: 15px 10px; border: 1px solid #eeeeee;}
table.detail td.th {background: #f6f6f6; text-align: center; font-weight: 700; color: #333333; width: 140px;}

ul.product-detail {overflow: hidden;}
ul.product-detail li {float: left; width: 23.5%; height: 420px; box-sizing: border-box; border: 1px solid #eeeeee; overflow: hidden;}
ul.product-detail li + li {margin-left: 2%;}
ul.product-detail li > * {display: block; text-align: center;}
ul.product-detail li span.image img {width: 100%;}
ul.product-detail li em.title {margin: 20px 0; font-size: 20px; font-weight: 700;}
ul.product-detail li p.desc {padding: 0 20px; color: #707070;}

ul.product-detail.center {text-align: center;}
ul.product-detail.center li {float: none; display: inline-block; height: 320px;}
body.wood ul.product-detail.center li {width: 345px; height: 380px;}

div.board-search {text-align: right; font-size: 14px;}
div.board-search select {display: inline-block; vertical-align: middle; font: inherit; border: 1px solid #e0e0e0; height: 34px; box-sizing: border-box; padding-left: 12px; min-width:100px;}
div.board-search input[type=text] {display: inline-block; vertical-align: middle; font: inherit; border: 1px solid #e0e0e0; width: 240px; height: 34px; box-sizing: border-box; padding: 0 12px;}
div.board-search button[type=submit] {display: inline-block; vertical-align: middle; font: inherit; width: 100px; height: 34px; line-height: 34px; text-align: center; border: none; background: #ed1c24; color: #ffffff; cursor: pointer; box-sizing: border-box;}
div.board-search a {display: inline-block; vertical-align: middle; font: inherit; width: 100px; height: 34px; line-height: 34px; text-align: center; border: 1px solid #e0e0e0; cursor: pointer; box-sizing: border-box;}
::placeholder {color: #999999;}

table.board-list {width: 100%; font-size: 14px; border-top: 3px solid #4c4c4c; border-bottom: 2px solid #4c4c4c; margin: 20px 0;}
table.board-list th,
table.board-list td {padding: 12px 15px; text-align: center;}
table.board-list thead {background: #f6f6f6;}
table.board-list tbody td {border-top: 1px solid #eeeeee;}
table.board-list tbody td.title {text-align: left; max-width: 1px;}
table.board-list tbody td.title a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s;}
table.board-list tbody td.title a:hover {color: #ed1c24;}
table.board-list p.no-info i {color: #ffcc00; margin-right: 8px;}

div.board-view {font-size: 14px; border-top: 3px solid #4c4c4c; border-bottom: 1px solid #4c4c4c; margin: 30px 0;}
div.board-view p.title {font-size: 22px; padding: 20px 30px; font-weight: 700;}
div.board-view ul.info {color: #999999; font-size: 14px; padding: 10px 30px; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;}
div.board-view ul.info li {display: inline-block;}
div.board-view ul.info li + li:before {content: '/'; margin: 0 40px;}
div.board-view ul.file-list {padding: 15px 30px;}
div.board-view div.content {border-top: 1px solid #4c4c4c; border-bottom: 1px solid #4c4c4c; padding: 40px 30px;}
div.board-view div.content img {max-width: 100%;}
div.board-view ul.siblings li {position: relative; padding: 0 160px 0 100px; line-height: 50px; color: #999999;}
div.board-view ul.siblings li + li {border-top: 1px solid #eeeeee;}
div.board-view ul.siblings li span.tag {position: absolute; left: 0; top: 0; width: 100px; text-align: center; color: #333333; background: #f6f6f6;}
div.board-view ul.siblings li span.tag i {margin-right: 6px;}
div.board-view ul.siblings li a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;transition: color 0.3s; padding-left: 30px;}
div.board-view ul.siblings li a:hover {color: #000000;}
div.board-view ul.siblings li span.date {position: absolute; right: 0; top: 0; width: 160px; text-align: center;}

ul.file-list {font-size: 14px;}
ul.file-list li {position: relative; padding-right: 120px;}
ul.file-list li + li {margin-top: 6px;}
ul.file-list li a {display: block; transition: color 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.file-list li a:hover {color: #ed1c24;}
ul.file-list li a * {vertical-align: middle;}
ul.file-list li a img {margin-right: 10px;}
ul.file-list li a span.size {position: absolute; right: 0; top: 50%; transform: translate(0, -50%); box-sizing: border-box; line-height: 20px; border: 1px solid #ed1c24; padding: 0 10px; border-radius: 3px; font-size: 13px; margin-left: 30px; color: #999999;}

div.pagination {text-align: center; font-size: 14px; color: #999999;}
div.pagination a {display: inline-block; vertical-align: top; box-sizing: border-box; min-width: 34px; height: 34px; line-height: 32px; text-align: center; padding: 0 5px; border: 1px solid #e0e0e0; transition: all 0.3s;}
div.pagination a:hover {color: #333333; border-color: #ed1c24;}
div.pagination > a {background: #f9f9f9;}
div.pagination ol {display: inline-block; overflow: hidden; vertical-align: top; margin: 0 10px;}
div.pagination ol li {float: left;}
div.pagination ol li + li {margin-left: 5px;}
div.pagination ol li.on a {color: #ffffff; background: #ed1c24;}

table.form {width: 100%; font-size: 14px; border-top: 3px solid #4c4c4c; border-bottom: 2px solid #4c4c4c; margin-bottom: 30px; background: rgba(255, 255, 255, 0.6);}
table.form td {padding: 8px 15px; border-top: 1px solid #eeeeee;}
table.form td.th {width: 100px; background: #f9f9f9; padding-left: 30px; font-weight: 700;}
table.form td.th span.required {color: #ff0000; margin-left: 8px;}
.form input.text {display: inline-block; box-sizing: border-box; width: 200px; height: 34px; border: 1px solid #e0e0e0; padding: 0 10px; font: inherit; color: #666666;}
.form input.phone {width: 80px;}
.form input.full {width: 100%;}
.form textarea {display: block; box-sizing: border-box; width: 100%; height: 150px; border: 1px solid #e0e0e0; padding: 10px; font: inherit; color: #666666;}
.form input[type=radio],
.form input[type=checkbox] {margin: 0; vertical-align: middle;}
ul.input-list {overflow: hidden;}
ul.input-list li {float: left; margin-right: 50px; line-height: 34px;}
ul.input-list li label {margin-left: 10px;}

ul.card-list {overflow: hidden; font-size: 13px; margin: 20px 0;}
ul.card-list > li {overflow: hidden; width: 23%; height: 300px; background: #f9f9f9; box-sizing: border-box; float: left; margin-right: 2.66%; margin-bottom: 30px;}
ul.card-list > li:nth-child(4n) {margin-right: 0;}
ul.card-list > li > a {display: block; height: 100%; border-bottom: 2px solid #e8e8e8; box-sizing: border-box; transition: all 0.3s;}
ul.card-list > li > a > * {display: block;}
ul.card-list > li span.image {position: relative; height: 200px; overflow: hidden; background: #ffffff; border: 1px solid #f9f9f9; box-sizing: border-box;}
ul.card-list > li span.image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 100%; max-width: 300px; transition: all 0.5s;}
ul.card-list > li span.category {margin: 20px 0 0 15px; color: #999999;}
ul.card-list > li em.title {font-size: 15px; font-weight: 700; margin: 10px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
ul.card-list > li > a:hover {border-bottom-color: #ed1c24;}
ul.card-list > li > a:hover span.image img {transform: translate(-50%, -50%) scale(1.1) rotate(2deg);}
ul.card-list > li.no-info {text-align: center;}
ul.card-list > li.no-info i {display: block; font-size: 80px; color: #ed1c24; margin-bottom: 20px; margin-top: 80px;}

div.button-box {text-align: center;}
div.button-box.right {text-align: right;}
.btn {display: inline-block; vertical-align: middle; text-align: center; border: 1px solid #eeeeee; box-sizing: border-box; transition: all 0.3s; cursor: pointer;}
.btn.full {width: 100%;}
.btn.large {min-width: 200px; height: 50px; line-height: 48px; font-size: 20px; padding: 0 15px;}
.btn.white {border: 1px solid #ed1c24; background: #ffffff; color: #666666;}
.btn.white:hover {background: #ed1c24; color: #ffffff;}
.btn.yellow {border: 1px solid #ed1c24; background: #ed1c24; color: #eeeeee;}
.btn.yellow:hover {background: #ed1c24; color: #ffffff;}
.btn.gray {border: 1px solid #aaaaaa; background: #ffffff; color: #aaaaaa;}
.btn.gray:hover {background: #aaaaaa; color: #ffffff;}

div.youtube-container {position: relative; overflow: hidden;}
div.youtube-container iframe {width: 100%;}

p.no-content {text-align: center; border: 2px solid #e0e0e0; font-size: 30px; padding: 20px 0; margin-top: 100px; color: #ff0000;}
p.no-content i {color: #ed1c24; margin-right: 20px; font-size: 40px;}


/* file attachment list */
div.dino-file-upload {position: relative; padding: 10px 30px;}
div.dino-file-upload > ul > {font-size: 13px; line-height: 1.2em; margin-bottom: 5px;}
div.dino-file-upload > ul > li {border: 1px solid #dfe8f1; border-radius: 3px; line-height: 28px; height: 30px; box-sizing: border-box; padding: 0 180px 0 10px; position: relative; transition: box-shadow 0.3s; overflow: hidden;}
div.dino-file-upload > ul > li:hover {box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);}
div.dino-file-upload > ul > li + li {margin-top: 5px;}
div.dino-file-upload > ul > li > .filename {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative;}
div.dino-file-upload > ul > li > a.filename:hover {color: #00bca4;}
div.dino-file-upload > ul > li > .filename i {vertical-align: middle;}
div.dino-file-upload > ul > li > .filename img {vertical-align: middle; margin-right: 8px;}
div.dino-file-upload > ul > li p.function {position: absolute; right: 10px; top: 0;}
div.dino-file-upload > ul > li p.function > * {margin-left: 5px; display: inline-block; vertical-align: middle;}
div.dino-file-upload > ul > li a.prev,
div.dino-file-upload > ul > li a.next {width: 22px; height: 22px; font-size: 16px; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.3); border-radius: 50%; text-align: center; line-height: 20px; opacity: 0; transition: all 0.3s;}
div.dino-file-upload > ul > li:hover a.prev,
div.dino-file-upload > ul > li:hover a.next {opacity: 1;}
div.dino-file-upload > ul > li:hover a.prev i,
div.dino-file-upload > ul > li:hover a.next i {font-size: 16px;}
div.dino-file-upload > ul > li a.prev:hover,
div.dino-file-upload > ul > li a.next:hover {color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.5); opacity: 1;}
div.dino-file-upload > ul > li a.delete {width: 22px; height: 22px; font-size: 16px; color: #e74c3c; border-radius: 50%; text-align: center; line-height: 20px; transition: all 0.3s;}
div.dino-file-upload > ul > li a.delete:hover {color: #ffffff; background: #e74c3c;}
div.dino-file-upload > ul > li span.size {font-size: 11px; line-height: 1em; padding: 5px 5px; background: #00bca4; color: #ffffff; border-radius: 3px;}
div.dino-file-upload > ul > li.uploading > span.filename i {color: #ffcc00; margin-right: 8px;}
div.dino-file-upload > ul > li.no-file > span.filename i {color: #ffcc00; margin-right: 8px;}
div.dino-file-upload input[type=file] {margin-top: 10px;}
div.dino-file-upload input[type=file].hidden {display: none;}


#layer-mask {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10000;}
#test-popup {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 480px; padding: 10px; background: #ffffff; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8); display: none; z-index: 10010;}
#test-popup img {width: 100%;}
#test-popup a.close {position: absolute; right: 0; top: -50px; font-size: 30px; color: #ffffff; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);}

/*
animation 축약 표현
animation: main-bg-animation 3s ease-out 0.1s 1 normal forwards running;
animation: name duration timing-function delay iteration-count direction fill-mode play-state
duration: 0(default), time, initial, inherit
timing-function: ease(default), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit
deley: 0s(default), time, initial, inherit
direction: normal(default), reverse, alternate, alternate-reverse, initial, inherit
iteration-count: 1(default), number, infinite, initial, inherit
fill-mode: none(default), forwards, backwards, both, initial, inherit
play-state: running(default), paused, initial, inherit  (IE에서는 축약표현에 포함시 동작하지 않음, 별도로 사용)

[최종 사용 예시]
animation: main-bg-animation 3s ease-out 0s 1 normal forwards;
animation-play-state: running;
*/