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

/* web font */

/* reset */
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
body {margin: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle; max-width: 100%;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0; text-indent: -9999px;}
i.fas, i.far, i.fab {vertical-align: middle; display: inline-block;}
i.fas span, i.far span, i.fab span {position: absolute; left: -9999px;}
iframe.hidden {position: absolute; left: -9999px;}
.pc {display: none !important;}
br.only-pc {content: '';}
br.only-pc: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: 12px; color: #3b3b3d; background: #ffffff;}
#wrapper {position: relative; overflow: hidden; max-width: 850px; margin: 0 auto; box-sizing: border-box; min-width: 320px; min-height: 100vh;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; font-size: 16px; text-align: center; background: rgba(0, 0, 0, 0.4); color: #ffffff; border-bottom: rgba(255, 255, 255, 0.8); z-index: 100000; transition: top 0.3s;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: #ffffff; z-index: 10000; transition: all 0.3s; box-sizing: border-box; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);}
#header h1 {position: absolute; left: 15px; top: 50%; width: 90px; line-height: 1em; transform: translate(0, -50%);}
#header h1 a {display: block;}
#header h1 img {width: 100%; transition: opacity 0.3s;}
@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);}
}

#header a.menu {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); width: 40px; height: 40px; border-radius: 50px; background: #ff7f00; color: #ffffff; z-index: 1200; transition: color 0.3s ease-out 0s;}
#header a.menu:before {content: ''; position: absolute; left: 10px; top: 14px; width: 20px; height: 2px; background: #ffffff; transition: transform 0.3s ease-out 0s;}
#header a.menu span {position: absolute; left: 10px; top: 19px; width: 20px; height: 2px; background: #ffffff; overflow: hidden; text-indent: -999px; transition: opacity 0.3s ease-out 0s;}
#header a.menu:after {content: ''; position: absolute; left: 10px; top: 24px; width: 20px; height: 2px; background: #ffffff; transition: transform 0.3s ease-out 0s;}
#header a.menu.open {background: #ff2e63;}
#header a.menu.open:before {transform: rotate(45deg) translate(4px, 3px);}
#header a.menu.open span {opacity: 0;}
#header a.menu.open:after {transform: rotate(-45deg) translate(4px, -3px);}

#gnb {position: fixed; right: -100%; top: 60px; width: 100%; height: calc(100% - 100px); box-sizing: border-box; background: #2a3033; color: #ffffff; font-size: 14px; padding: 30px 30px 100px 30px; overflow: auto; z-index: 10000; transition: right 0.5s;}
#gnb.open {right: 0;}
#gnb > ul > li > a {display: block; position: relative; font-size: 16px; font-weight: 700; line-height: 44px; border-bottom: 2px solid #77777d;}
#gnb > ul > li.on > a {border-bottom-color: #ff7f00; color: #ff7f00;}
#gnb > ul > li > a i {position: absolute; right: 5px; top: 50%; transform: translate(0, -50%);}
#gnb > ul > li > ul {overflow: hidden; height: 0; transition: height 0.3s;}
#gnb > ul > li > ul > li {padding-left: 20px;}
#gnb > ul > li > ul > li:last-child {border-bottom: 2px solid #77777d;}
#gnb > ul > li > ul > li + li a {border-top: 1px solid #67676e;}
#gnb > ul > li > ul > li > a {position: relative; display: block; line-height: 40px;}
#gnb > ul > li > ul > li.on > a {color: #ff7f00;}
#gnb > ul > li > ul > li.on > a:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ff7f00;}
#gnb > ul > li > ul > li > a i {position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); opacity: 0.5;}

#footer {background: #2a3033; position: relative; padding: 70px 15px 50px 15px; font-size: 12px; color: #999999; border-top: 1px solid #eeeeee;}
#footer h2 {position: absolute; left: 15px; top: 15px; width: 100px; margin-bottom: 20px;}
#footer ul.regulation {text-align: center; margin-bottom: 10px;}
#footer ul.regulation li {display: inline-block; font-size: 12px;}
#footer ul.regulation li + li {margin-left: 10px;}
#footer ul.regulation li a {display: block; border: 1px solid #999999; padding: 2px 5px;}
#footer address {overflow: hidden; text-align: center;}
#footer address span {display: block;}
#footer address span.float {display: inline-block;}
#footer address span.float + span.float {margin-left: 20px;}
#footer p.copyright {margin-top: 8px; text-align: center;}
#footer p.copyright em {font-weight: 700; color: #ffffff;}


/* main */
#main-visual-mobile {position: relative; height: 500px;}
#main-visual-mobile ul.slide {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#main-visual-mobile ul.slide li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
#main-visual-mobile ul.slide li div.visual {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
#main-visual-mobile ul.slide li div.visual img {position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); max-width: none; height: 100%;}
#main-visual-mobile ul.slide li div.slogan {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100%; box-sizing: border-box; padding: 0 50px; font-size: 30px; color: #ffffff; font-weight: 700; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);}
#main-visual-mobile ul.slide li div.slogan p.up {display: block; font-size: 24px; margin-bottom: 10px; opacity: 0;}
#main-visual-mobile ul.slide li div.slogan p.down {line-height: 1.4em; opacity: 0; font-size: 20px; font-weight: 400;}
#main-visual-mobile ul.slide li div.slogan p em {font-size: 30px; color: #ff7f00;}
#main-visual-mobile div.indicator {position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; z-index: 100;}
#main-visual-mobile div.indicator ul {display: inline-block; vertical-align: top;}
#main-visual-mobile div.indicator ul li {display: inline-block; position: relative;}
#main-visual-mobile div.indicator ul li + li {margin-left: 10px;}
#main-visual-mobile 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-mobile div.indicator ul li.on a {width: 50px; border: 1px solid #ffffff; background: none;}
#main-visual-mobile 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: #ff7f00;}
#main-visual-mobile div.indicator a.play {color: #ffffff; margin-left: 20px; vertical-align: top; position: relative; top: -2px; font-size: 16px;}
#main-visual-mobile div.indicator a.play i {display: none;}
#main-visual-mobile div.indicator a.play i:first-child {display: inline;}
#main-visual-mobile div.indicator a.play.on i {display: none;}
#main-visual-mobile div.indicator a.play.on i + i {display: inline;}

#main-visual-mobile ul.slide li.show div.slogan p.up {animation: main-text-show1 1s ease-out 0s 1 normal forwards;}
#main-visual-mobile ul.slide li.show div.slogan p.down {animation: main-text-show2 1s ease-out 0.5s 1 normal forwards;}
#main-visual-mobile ul.slide li.hide div.slogan p.up {animation: main-text-hide1 1s ease-out 0s 1 normal forwards;}
#main-visual-mobile ul.slide li.hide div.slogan p.donw {animation: main-text-hide2 1s ease-out 0s 1 normal forwards;}

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

/* animation */
@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);}
}


body.main #main > section.scroll-page {padding: 50px 15px 60px 15px; position: relative;}
body.main #main > section.scroll-page h2 {font-size: 30px; font-weight: 700; margin-bottom: 30px;}
body.main #main > section.scroll-page h2.center {text-align: center;}
body.main #main > section.scroll-page h2 span {display: block; font-size: 14px; color: #1d6d92; font-weight: 400;}
body.main #main > section.scroll-page h2 span em {font-weight: 700;}

#main-product {background: url(/img/main_bg_01.jpg) center center no-repeat; background-size: cover;}
#main-product h2 {margin-bottom: 100px;}
#main-product div.product-list ul.banner {width: inherit !important; overflow: hidden;}
#main-product div.product-list ul.banner > li {float: left; width: 48%; height: 120px; margin: 0 4% 20px 0;}
#main-product div.product-list ul.banner > li:nth-child(2n) {margin-right: 0;}
#main-product div.product-list ul.banner > li > a {position: relative; display: block; height: 100%; overflow: hidden;}
#main-product div.product-list ul.banner > li > a span.image img {min-width: 100%; min-height: 100%; transition: transform 0.5s;}
#main-product div.product-list ul.banner > li > a:hover span.image img {transform: scale(1.1) rotate(3deg);}
#main-product div.product-list ul.banner > li > a span.title {position: absolute; left: 0; bottom: 0; height: 40px; line-height: 40px; width: 100%; background: rgba(0, 88, 145, 0.7); color: #ffffff; box-sizing: border-box; padding-left: 20px; font-size: 13px; transition: all 0.3s;}
#main-product div.product-list ul.banner > li > a span.title span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -20%); width: 130px; line-height: 40px; text-align: center; border: 1px solid #ffffff; opacity: 0; transition: all 0.3;}
#main-product div.product-list ul.banner > li > a span.title em {font-size: 16px; font-weight: 700; margin-right: 10px; transition: all 0.3s;}
#main-product div.product-list p.control a {display: none;}

#main-notice div.board ul {font-size: 14px; border-top: 2px solid #ff7f00;}
#main-notice div.board ul > li {position: relative; border-bottom: 1px solid #e0e0e0; transition: background 0.3s;}
#main-notice div.board ul > li > a {display: block; line-height: 44px; padding-left: 10px; width: calc(100% - 120px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#main-notice div.board ul > li > a:hover {color: #ff7f00;}
#main-notice div.board ul > li span.date {position: absolute; right: 10px;; top: 50%; transform: translate(0, -50%); font-size: 12px; color: #888888;}
#main-notice div.board p.more {font-size: 16px; margin-top: 10px; text-align: right; padding-right: 10px;}
#main-notice div.board p.more a {transition: color 0.3s;}
#main-notice div.board p.more a:hover {color: #1d6d92;}
#main-notice ul.link {margin-top: 50px; overflow: hidden;}
#main-notice ul.link li {float: left; width: 48%; height: 140px; margin: 0 4% 20px 0; overflow: hidden;}
#main-notice ul.link li:nth-child(2n) {margin-right: 0;}
#main-notice ul.link li a {position: relative; display: block; border: 2px solid #ff7f00; background: #ffffff; box-sizing: border-box; height: 100%; color: #888888; transition: all 0.3s;}
#main-notice ul.link li a span.icon {position: absolute; left: 50%; top: 20px; width: 70px; height: 70px; transform: translate(-50%, 0);}
#main-notice ul.link li a span.icon img {position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transition: all 0.3s;}
#main-notice ul.link li a span.icon img:first-child {opacity: 1;}
#main-notice ul.link li a em {position: absolute; left: 0; bottom: 0; width: 100%; line-height: 40px; font-size: 16px; text-align: center;}




/* sub(common) */
#sub-visual {position: relative; height: 200px; overflow: hidden;}
#sub-visual p.bg img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; min-width: 100%; height: 100%;}
#sub-visual div.slogan {position: absolute; left: 18px; bottom: 40px; color: #ffffff; text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6); box-sizing: border-box;}
#sub-visual div.slogan p.up {display: block; opacity: 0; font-size: 18px; font-weight: 700; animation: sub-text-show1 2s ease-out 0s 1 normal forwards;}
#sub-visual div.slogan p.down {font-size: 16px; 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: 22px; color: #ff7f00;}
@keyframes sub-text-show1 {
    0% {opacity: 0; transform: translate(0, -30px);}
    100% {opacity: 1; transform: translate(0, 0);}
}
@keyframes sub-text-show2 {
    0% {opacity: 0; transform: translate(0, 30px);}
    100% {opacity: 1; transform: translate(0, 0);}
}
#bread-crumb {position: relative; background: #ffffff; color: #aaaaaa; box-sizing: border-box;}
#bread-crumb ul {border-bottom: 1px solid #e0e0e0; overflow: hidden; font-size: 13px;}
#bread-crumb ul li {float: left; position: relative;}
#bread-crumb ul li:first-child {border-right: 1px solid #e0e0e0; font-size: 14px; width: 50px; text-align: center;}
#bread-crumb ul li a,
#bread-crumb ul li em {display: block; line-height: 36px; padding: 0 10px; transition: all 0.3s;}
#bread-crumb ul li em {color: #333333;}
#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: #ffc20f;}

body.sub #main > section.content {padding: 50px 15px 50px 15px; min-height: 300px;}
body.sub #main h2 {position: relative; font-size: 24px; margin-bottom: 30px; padding-left: 20px; line-height: 1.1em;}
body.sub #main h2:before {content: ''; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: #ff7f00;}
body.sub #main h2 span {font-weight: 400; font-size: 12px; color: #999999; margin-left: 15px;}
body.sub #main h3.title {position: relative; font-size: 20px; padding-left: 25px; color: #888888;}
body.sub #main h3.title:before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 8px; height: 8px; border: 2px solid #1d6d92; border-radius: 240px;}
body.sub section.content p.center {text-align: center;}


/* 회사소개 */
/* 인사말 */
body.greeting div.header {position: relative; margin-bottom: 50px;}
body.greeting div.header h3 {position: absolute; left: 20px; top: 20px; width: 200px; height: 200px; background: rgba(254, 152, 51, 0.8); color: #ffffff; font-size: 28px; line-height: 1em; box-sizing: border-box; padding: 120px 0 0 20px; z-index: 10;}
body.greeting div.header h3 span {display: block; font-size: 15px; font-weight: 400;}
body.greeting div.header p.image {height: 300px; overflow: hidden;}
body.greeting div.header p.image img {position: absolute; left: 50%; transform: translate(-50%, 0); height: 100%; max-width: none;}
body.greeting div.text {font-size: 15px; text-align: center;}
body.greeting div.text p {margin: 20px 0;}
body.greeting div.text p em {font-weight: 700; color: #fe9833;}
body.greeting div.text p.strong {background: #fe9833; color: #ffffff; padding: 15px; margin: 0 auto; font-weight: 700;}


/* Contact */
body.way #naver-map {height: 400px; overflow: hidden;}
body.way h3 {font-size: 20px; line-height: 40px; margin-top: 40px; margin-bottom: 30px; width: 140px; border-bottom: 2px solid #000000; background: url(/img/logo_icon.png) right center no-repeat; background-size: 24px auto;}
body.way ul.contact {overflow: hidden; font-size: 13px; color: #999999;}
body.way ul.contact li {position: relative; padding-left: 70px; box-sizing: border-box; min-height: 50px; margin-bottom: 20px;}
body.way ul.contact li span.icon {position: absolute; left: 0; top: 0; width: 50px;}
body.way ul.contact li em.title {display: block; color: #333333; font-size: 16px; font-weight: 700;}
body.way ul.contact li p span {display: block;}
@media screen and (min-width: 600px) {
    body.way ul.contact li {float: left; width: 48%; height: 65px;}
    body.way ul.contact li:nth-child(2n) {margin-left: 4%;}
}

/* 판매제품 */
section div.image {position: relative; border: 1px solid #e0e0e0; margin-bottom: 50px;}
section div.image p.image img {width: 100%;}
section div.image p.image + p.image {margin-top: 20px;}
section div.image p.info {position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.6); color: #ffffff; box-sizing: border-box; padding: 10px 20px 10px 20px; font-size: 13px;}
section div.image p.info em {display: block; font-size: 18px; font-weight: 700;}
section h3 {font-size: 24px; margin-bottom: 20px;}

table.spec {width: 100%; border-top: 2px solid #ff7f00; border-bottom: 2px solid #e0e0e0; font-size: 12px; margin-bottom: 20px;}
table.spec thead {background: #f9f9f9;}
table.spec tr.title {font-size: 15px;}
table.spec th,
table.spec td {border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; text-align: center; padding: 8px 10px;}
table.spec th:last-child,
table.spec td:last-child {border-right: none;}
table.spec tbody th {background: #f9f9f9;}


/* 철강가공센터 */
body.processing #main h3 {margin-top: 60px; border-bottom: 1px solid #e0e0e0;}
body.processing #main h2 + h3 {margin-top: 0;}body.processing section.content {position: relative;}
body.processing a.link {position: absolute; right: 15px; top: 50px; font-size: 16px; background: #ff7f00; color: #ffffff; padding: 5px 20px;}
body.processing div.spec {overflow: hidden;}
body.processing div.spec ul.image {overflow: hidden;}
body.processing div.spec ul.image li {float: left; width: 49%; overflow: hidden;}
body.processing div.spec ul.image li + li {margin-left: 2%;}
body.processing div.spec ul.image li img {width: 100%;}
body.processing div.spec table.spec {margin-top: 20px;}
body.processing p.desc {font-size: 15px;}
body.processing ul.process {overflow: hidden;}
body.processing ul.process li {float: left; width: 48%; position: relative; margin-bottom: 30px;}
body.processing ul.process li:nth-child(2n) {margin-left: 4%;}
body.processing ul.process li img {width: 100%;}
body.processing ul.process li em {position: absolute; left: 5px; top: 5px; width: 30px; line-height: 30px; border: 2px solid #ffffff; color: #ffffff; text-align: center; border-radius: 100px; background: rgba(0, 0, 0, 0.6); font-size: 16px;}
body.processing ul.process li span.desc {position: absolute; left: 0; bottom: 0; width: 100%; line-height: 40px; color: #ffffff; text-align: center; background: rgba(0, 88, 145, 0.7); font-size: 15px;}





/* 견적시스템 */
body.estimates h3 {margin-top: 50px;}
body.estimates table.estimates {margin-bottom: 10px;}
body.estimates p.desc {color: #ff0000; font-size: 13px; position: relative; top: -30px; width: 50%; padding-left: 15px; text-indent: -15px;}

/* 사이트맵 */
nav.sitemap > ul {font-size: 13px;}
nav.sitemap > ul > li {position: relative; padding-left: 90px; margin-bottom: 20px; min-height: 36px;}
nav.sitemap > ul > li:before {content: ''; position: absolute; left: 0; top: 0; width: 80px; height: 100%; background: #ff7f00;}
nav.sitemap > ul > li > a {position: absolute; left: 0; top: 50%; width: 80px; transform: translate(0, -50%); text-align: center; background: #ff7f00; color: #ffffff;}
nav.sitemap > ul > li > ul {overflow: hidden; height: 100%; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 0 10px;}
nav.sitemap > ul > li > ul > li {float: left; width: 50%;}
nav.sitemap > ul > li > ul > li > a {position: relative; display: block; line-height: 36px; padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
nav.sitemap > ul > li > ul > li > a:before {content: ''; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 3px; height: 3px; background: #ff7f00;}

/*
nav.sitemap > ul > li {float: left; width: calc(33% - 8px); border-top: 1px solid #333333;}
nav.sitemap > ul > li + li {margin-left: 10px;}
nav.sitemap > ul > li > a {display: block; font-size: 15px; font-weight: 700; color: #000000; text-align: center; line-height: 50px; border-bottom: 2px solid #ff7f00; transition: all 0.3s;}
nav.sitemap > ul > li > a:hover {background: #ff7f00; color: #ffffff;}
nav.sitemap > ul > li > ul {margin-top: 2px;}
nav.sitemap > ul > li > ul > li {border-bottom: 1px solid #e0e0e0;}
nav.sitemap > ul > li > ul > li > a {display: block; line-height: 40px; padding-left: 15px; transition: all 0.3s;}
nav.sitemap > ul > li > ul > li > a:hover {background: #f9f9f9;}
*/






/* module */
ul.tab {overflow: hidden; margin-bottom: 50px; padding-bottom: 2px;}
ul.tab li {float: left; width: 33%; box-sizing: border-box; border: 1px solid #e0e0e0; margin: 0 -1px -1px 0;}
ul.tab li a {display: block; text-align: center; line-height: 36px; font-size: 14px;}
ul.tab li.on a {background: #ff7f00; color: #ffffff;}




ul.product-list {overflow: hidden; text-align: center;}
ul.product-list li {position: relative; float: left; width: 48%; text-align: center; margin-bottom: 20px;}
ul.product-list li:nth-child(2n) {margin-left: 4%;}
ul.product-list li > a {display: block; position: relative; overflow: hidden;}
ul.product-list li > a span.image img {width: 100%; transition: all 0.5s;}
ul.product-list li > a span.info {position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 0; background: rgba(29, 109, 146, 0.8); color: #ffffff; font-size: 16px; transition: all 0.3s; box-sizing: border-box; box-sizing: border-box;}
ul.product-list li > a span.info span {display: block; transition: all 0.3s;}















div.board-search {display: none;}
table.board-list {display: block; border-top: 2px solid #4c4c4c; font-size: 13px; margin: 20px 0;}
table.board-list thead {display: none;}
table.board-list * {display: block;}
table.board-list tr {border-bottom: 1px solid #eeeeee; position: relative; height: 70px;}
table.board-list tr td:nth-child(1), table.board-list tr td:nth-child(3), table.board-list tr td:nth-child(5) {display: none;}
table.board-list td.title a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px;}
table.board-list tr td:nth-child(4) {position: absolute; left: 10px; bottom: 8px; font-size: 13px; color: #999999;}
table.board-list tr td:nth-child(6) {position: absolute; right: 10px; bottom: 8px; font-size: 13px; color: #999999;}
table.board-list p.no-info i {color: #ffcc00; margin-right: 8px;}

div.pagination {text-align: center; margin-top: 15px;}
div.pagination > div.box {display: inline-block;}
div.pagination a {display: inline-block; min-width: 32px; height: 32px; padding: 0 5px; box-sizing: border-box; text-align: center; line-height: 30px; 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: #ff7f00; color: #ffffff; border-right: 1px solid rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2); cursor: default;}

div.board-view {font-size: 14px; border-top: 2px solid #4c4c4c; border-bottom: 1px solid #4c4c4c; margin: 30px 0;}
div.board-view p.title {font-size: 16px; padding: 10px 5px; font-weight: 700;}
div.board-view ul.info {color: #999999; font-size: 12px; padding: 0 0 10px 5px;}
div.board-view ul.info li {display: inline-block;}
div.board-view ul.info li + li:before {content: '/'; margin: 0 10px;}
div.board-view ul.file-list {padding: 10px 5px;}
div.board-view div.content {border-top: 1px solid #4c4c4c; border-bottom: 1px solid #4c4c4c; padding: 20px 5px;}
div.board-view div.content img {max-width: 100%;}
div.board-view ul.siblings li {position: relative; padding: 0 0 0 60px; line-height: 32px; color: #999999; font-size: 13px;}
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: 60px; 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: 0 10px;}
div.board-view ul.siblings li a:hover {color: #000000;}
div.board-view ul.siblings li span.date {display: none;}

table.form {width: 100%; font-size: 12px; border-top: 3px solid #4c4c4c; border-bottom: 2px solid #4c4c4c; margin-bottom: 30px; background: rgba(255, 255, 255, 0.6);}
table.form thead {background: #f9f9f9;}
table.form thead th {line-height: 26px;}
table.form tfoot {background: #f9f9f9; font-size: 20px; color: #ff7f00;}
table.form td {padding: 3px 5px; border-top: 1px solid #eeeeee; position: relative;}
table.form td.th {width: 70px; background: #f9f9f9; font-weight: 700; padding-left: 10px;}
table.form td.th span.required,
table.form td.th em {color: #ff0000; margin-left: 8px;}
table.form tr.no-info i {color: #ffcc00;}
table.form p.desc {font-size: 13px; color: #ff0000;}

.form input.text {display: inline-block; box-sizing: border-box; width: 100%; height: 34px; border: 1px solid #e0e0e0; padding: 0 10px; font: inherit; color: #666666; font-size: 16px; -webkit-appearance: none; border-radius: 0;}
.form select {display: inline-block; box-sizing: border-box; height: 34px; border: 1px solid #e0e0e0; padding-left: 10px; font: inherit; color: #666666; font-size: 16px;}
.form input.phone {width: 65px;}
.form textarea {display: block; box-sizing: border-box; width: 100%; height: 150px; border: 1px solid #e0e0e0; padding: 10px; font: inherit; color: #666666; -webkit-appearance: none; border-radius: 0; font-size: 16px;}
.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: 20px; line-height: 20px;}
ul.input-list li label {margin-left: 10px;}
ul.input-list li a {font-size: 12px; color: #999999; margin-left: 10px;}
p.input label {margin-left: 10px;}

table.form.estimates {text-align: center; font-size: 12px; margin-bottom: 10px;}
table.form.estimates tfoot {font-size: 13px; border-top: 1px solid #e0e0e0;}
table.form.estimates input {text-align: right;}
table.form.estimates * {display: block; box-sizing: border-box;}
table.form.estimates tr {position: relative; overflow: hidden; line-height: 40px;}
table.form.estimates tr + tr {border-top: 1px solid #e0e0e0;}
table.form.estimates thead {border-bottom: 1px solid #e0e0e0;}
table.form.estimates thead th {float: left;}
table.form.estimates thead th:nth-child(1) {display: none;}
table.form.estimates thead th:nth-child(2),
table.form.estimates thead th:nth-child(3) {width: 50%; border-bottom: 1px solid #e0e0e0;}
table.form.estimates thead th:nth-child(4),
table.form.estimates thead th:nth-child(5) {width: 20%;}
table.form.estimates thead th:nth-child(6) {width: 25%;}
table.form.estimates thead th:nth-child(7) {width: 35%;}
table.form.estimates thead th:nth-child(8) {display: none;}
table.form.estimates tbody td,
table.form.estimates tfoot td {float: left; border: none; padding: 2px;}
table.form.estimates tbody tr:not(.no-info) td:nth-child(1) {display: none;}
table.form.estimates tbody tr.no-info {padding-left: 0;}
table.form.estimates tbody tr.no-info td {float: none;}
table.form.estimates tbody tr.no-info td * {display: inline-block;}
table.form.estimates tbody tr.no-info td i {margin-right: 5px;}
table.form.estimates tbody td:nth-child(2),
table.form.estimates tbody td:nth-child(3) {width: 50%;}
table.form.estimates tbody td:nth-child(4),
table.form.estimates tbody td:nth-child(5) {width: 15%;}
table.form.estimates tbody td:nth-child(6) {width: 25%;}
table.form.estimates tbody td:nth-child(7) {width: 45%;}
table.form.estimates tbody td:nth-child(8) {position: absolute; right: 0; top: 5px;}
table.form.estimates tfoot tr > * {float: left; width: 50%;}
table.form.estimates tfoot tr > *:nth-child(3) {display: none;}
table.form.estimates input.text {padding: 0 2px; line-height: 34px;}

p.estimates-desc {font-size: 12px; text-indent: -10px; border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 10px 10px 20px; margin-bottom: 20px;}



div.button-box {text-align: center;}
div.button-box.right {text-align: right;}
.btn {position: relative; display: inline-block; vertical-align: middle; text-align: center; border: 1px solid #eeeeee; box-sizing: border-box; transition: all 0.3s; cursor: pointer; -webkit-appearance: none; appearance: none;}
.btn.full {width: 100%;}
.btn.medium {min-width: 60px; height: 34px; line-height: 32px; font-size: 14px; padding: 0 10px;}
.btn.large {min-width: 200px; height: 50px; line-height: 48px; font-size: 20px; padding: 0 15px;}
.btn.white {border: 1px solid #ffc20f; background: #ffffff; color: #666666;}
.btn.white:hover {background: #ffc20f; color: #ffffff;}
.btn.green {border: 1px solid #ff7f00; background: #ff7f00; color: #ffffff;}
.btn.green:hover {background: #ff7f00; color: #ffffff;}
.btn.gray {border: 1px solid #aaaaaa; background: #ffffff; color: #aaaaaa;}
.btn.gray:hover {background: #aaaaaa; color: #ffffff;}
.btn.del {border-radius: 100%; width: 24px; height: 24px; min-width: 0; font-size: 12px;}
.btn.del i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.btn.add {width: 150px;}
.btn.add i {margin-right: 10px;}
input + a.btn {position: absolute; right: 0; width: 34px; height: 34px; line-height: 30px; font-size: 20px; border: none;}


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


#popup-wrapper {height: 100vh; padding: 60px 0 30px 0; box-sizing: border-box; overflow: hidden; background: #ffffff;}
#popup-header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; background: #ff7f00; z-index: 10000; color: #ffffff;}
#popup-header h1 {position: absolute; left: 15px; top: 50%; transform: translate(0, -50%); font-size: 20px;}
#popup-header a.close {position: absolute; right: 15px; top: 50%; transform: translate(0, -50%); font-size: 24px;}
#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: #ff7f00; z-index: 10000; color: #ffffff; font-size: 12px;}
#popup-footer p.copyright{line-height: 30px; margin-left: 30px;}
#popup-footer img.logo {height: 24px; position: absolute; right: 30px; top: 50%; transform: translate(0, -50%);}

div.regulation {font-size: 13px;}
div.regulation h2 {font-size: 20px; margin: 40px 0 10px 0;}
div.regulation h2:nth-child(1) {margin-top: 0;}
div.regulation h3 {font-size: 18px; margin: 25px 0 10px 0;}
div.regulation ul.list li {padding-left: 20px; text-indent: -20px;}
div.regulation ul.list ul li {padding-left: 20px; text-indent: -20px;}


/*
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;
*/