@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Exo+2|Noto+Sans+KR&display=swap');
/*reset*/
* {margin: 0;padding: 0;}
body {margin: 0;}
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; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}


/*layout*/
.mo {display: none;}
.en {font-family: 'Exo 2', sans-serif;}
body {font-family: 'Noto Sans KR', sans-serif; font-size: 14px;}
.wrap {width: 100%; margin: 0 auto;}
header {position: fixed; top:0; left: 0; width: 100%; background: rgba(2, 2, 2, 0.19); height: 100px;line-height: 100px; z-index: 200;}
.innerHeader {width: 1600px; margin: auto;overflow: hidden;}
.innerHeader .logo {float: left; }
.innerHeader .logo img {width: 100%;}
.innerHeader .gnb {float: left; margin-left: 80px;}
.innerHeader .gnb li {float: left; margin-right: 80px;}
.innerHeader .gnb li a {display: block; width: 100%; height: 100%; font-size: 16px; color:#fff; text-align: center;}
.innerHeader .gnb li a:hover,.innerHeader .gnb li a:focus {color:#ff8342;}


.innerHeader .tnb {float: right;}
.innerHeader .tnb li {float: left; margin-right: 25px;}
.innerHeader .tnb li a {display: block; width: 100%; height: 100%; text-align: center; font-size: 16px; color:#fff;}
.innerHeader .tnb li:nth-child(1) a i,.innerHeader .tnb li:nth-child(2) a i {font-size: 20px; margin-right: 8px;}
.innerHeader .tnb li:last-child a {display: block; width: 105px;  line-height: 2; border:1px solid #fff;border-radius: 30px; margin-top: 35px; }
.innerHeader .tnb li:last-child a:hover {background: #fff; color:#ff8342; transition: all 0.5s; }
.innerHeader .gnbMo {display: none;}

/*section.visual*/
.visual {width: 100%; height: 100vh;background: url(../img/vis_4.jpg)no-repeat center/cover; position: relative; background-attachment: fixed;}
.visual .mainTitle {position: absolute; top:50%; left: 50%; color:#fff;  transform: translate(-50%, -50%); text-align: center; text-shadow: 0 0 5px rgba(8, 8, 8, 0.5); animation-name: mainTitle; animation-duration: 1s;}
/*mainTitle animation*/
@keyframes mainTitle {
    0% {opacity: 0; top:60%;}
    30% {opacity: 0; top:60%;}   
}
.visual .mainTitle h2 {font-size: 55px; margin-bottom: 20px; line-height: 1.2;}
.visual .mainTitle p {font-size: 25px; margin-bottom: 30px;}
.visual .mainTitle .view {font-size: 15px;display: block; width: 180px; margin:0 auto;text-transform: uppercase; padding: 8px 0; border:1px solid #fff; border-radius: 40px;}

/*공통요소*/
.inner {width: 1400px; margin: auto;}
section .title  { color:#000; text-align: center;}
section .title h2 {font-size: 42px; margin-bottom: 5px; font-weight: normal;}
section .title h2 span {color: #ff8342;}
section .title p {font-size: 18px; color:#555;}

/*section.about*/
.about {width: 100%; background: #fff; padding: 80px 0;}

.about .inner ul {width: 100%; overflow:hidden; border-bottom:1px solid #ddd; margin: 30px 0;}
.about .inner ul li {float: left; width: 33.3333%;}
.about .inner ul li a {display: block; width: 100%; height: 100%;}
.about .inner ul li a p.img {width: 100%; overflow: hidden;}
.about .inner ul li a p.img img {width: 100%; transition: all 0.3s;}
.about .inner ul li a:hover p.img img,.about .inner ul li a:focus p.img img {transform: scale(1.2); transition: all 0.5s;}
.about .inner ul li a .text {padding: 30px; box-sizing: border-box;}
.about .inner ul li a .text h3 {font-size: 20px; margin-bottom: 10px;}
.about .inner ul li a .text p {font-size: 16px; margin-bottom: 10px;}
.about .inner ul li a .text p.more {text-transform: uppercase; font-weight: bold; padding-left: 40px;  padding-top: 5px; width: 150px; position:relative;}
.about .inner ul li a .text p.more:before {content:'\f178'; font-family: fontAwesome; font-size: 15px; width: 30px; height: 30px; background: #ff8342; display: block;line-height: 30px; border-radius: 50%; position: absolute; left: 0; top:20%; }

/*secttion.innovation*/
.innovations {margin-bottom: 150px; }
.innovations .imgBox {width: 100%; height: 540px; margin: 50px auto 0; background: url(
../img/product_1.jpg)no-repeat center/cover; position: relative;}
.innovations .imgBox .innerBox {width: 80%;background: #3a3c4e; position: absolute; left: 50%; transform: translateX(-50%); bottom:-50px;}
.innovations .imgBox .innerBox h3 {background: #fff;  padding:25px 45px; box-sizing: border-box; font-size: 18px;}
.innovations .imgBox .innerBox h3 span {color:#ff8342;}
.innovations .imgBox .innerBox .bottom {padding: 35px 85px; box-sizing: border-box;  color:#fff; overflow: hidden; line-height: 1.6;}
.innovations .imgBox .innerBox .bottom p{float: left;}
.innovations .imgBox .innerBox .bottom a{float: right; background: #ff8342; display: block; padding: 7px 30px; border-radius: 50px;}
.innovations .imgBox .innerBox .bottom a:hover , .innovations .imgBox .innerBox .bottom a:focus {background: #f86010;}

/*section.me*/
.me { width:100%; margin-bottom: 150px; padding: 80px 0;background: url(../img/me.jpg)no-repeat center/cover;}
.me .inner ul.list {width:100%; border-top: 2px solid #000; border-bottom: 2px solid #000;  box-sizing: border-box; margin:50px auto;}
.me .inner ul.list > li {padding: 30px 60px;box-sizing: border-box;}
.me .inner ul.list > li:nth-child(1){border-bottom: 1px solid #ddd;}
.me .inner ul.list li h3 {font-size: 18px; margin-bottom: 20px; }
.me .inner ul.list li h3 span {margin-right: 15px; color:#ff8342; }
.me .inner ul.list li > p {line-height: 1.6; margin-bottom: 20px;padding-left: 33px;}
.me .inner ul.list li a {display: inline-block; font-weight: bold; margin-left: 3px; font-size: 14px; }
/*li.in*/
.me .inner ul.list li a span { color:#ff8342; margin-left: 10px;}
.me .inner ul.list li ul.in {margin-bottom: 30px;}
.me .inner ul.list li ul.in li {margin-bottom: 10px; overflow: hidden;}
.me .inner ul.list li ul.in li em {float: left; width: 12%; font-weight: bold;}
.me .inner ul.list li ul.in li p {float:left; padding-left: 0; position: relative;}
.me .inner ul.list li ul.in li p:before {content:''; width: 4px; height: 4px; background: #ff8342; position: absolute; left: -40px; top:10px;}
.me .inner button {display: block; width: 280px; margin:auto; background: #ff8342; border:none; padding: 10px; text-align: center; border-radius: 50px; color:#fff;}


/*section.sns*/
.sns {margin-bottom: 60px;}
.sns ul {width: 100%;  overflow: hidden;}
.sns ul li {float: left; width: 32.66559%; margin-right: 1%;}
.sns ul li:last-child {margin-right: 0;}
.sns ul li a {display: block; width: 100%; height: 100%;}
.sns ul li a p.img {width: 100%; position: relative;}
.sns ul li a p.img:before {content: ''; width: 0%; height: 100%; position: absolute; background:rgba(255, 131, 66, 0.9);transition: all 0.5;}
.sns ul li a:hover p.img:before,.sns ul li a:focus p.img:before {width: 100%; transition: all 0.5s;}
.sns ul li a p.img:after {content: 'BLOG'; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); font-family: 'Exo 2', sans-serif; font-size: 15px; color: #fff; border: 1px solid #fff; padding: 5px 30px; border-radius: 40px; opacity: 0;transition: all 0.5;}
.sns ul li a:hover p.img:after, .sns ul li a:focus p.img:after{opacity: 1; transition: all 0.5;}
.sns ul li a p.img img {width: 100%; }
.sns ul li a .bottom {width: 100%; padding: 20px 0 20px 30px; box-sizing: border-box;}
.sns ul li a .bottom p {font-size: 18px; font-weight: bold;}
.sns ul li a .bottom p.color {color:#ff8342; font-size: 15px; font-weight: normal;}
.sns ul li a .bottom p.time {color:#999; font-size: 15px; font-weight: normal; padding-left: 20px; margin-top: 30px; position: relative;}
.sns ul li a .bottom p.time :before {content:'\f017'; font-family: FontAwesome; font-size: 15px; line-height: 30px; position: absolute;left: 0;top:-3px;}


/*footer*/
footer {clear: both; border-top: 1px solid #999;padding: 30px 0 50px;}
footer .inner {width: 1600px; margin:0 auto; overflow: hidden;}
footer .inner .ftLogo {float: left;}
footer .inner .address {float:left; margin-left: 100px; margin-top: 10px;}
footer .inner .address li:first-child {font-weight: bold; margin-bottom: 10px;}
footer .inner .address li:last-child {color:#999; }
footer .inner .list {float: right; margin-left: 80px;}
footer .inner .list li {float: left; margin-left: 80px;}
footer .inner .list li a {display: block; width: 100%; height: 100%; position: relative;}
footer .inner .list li a:hover, footer .inner .list li a:focus {color:#ff8342; text-decoration: underline;}
footer .inner .list li a:after {content: ''; width: 4px; height: 4px; border-radius: 50%;  background: #ccc; position: absolute; right: -50px; top:10px;} 




/*반응형*/
/*1599_1024*/
@media screen and (max-width:1599px) {
    .innerHeader {width: 95%; min-width: 1024px;} 
    .innerHeader .gnb {margin-left : 50px;}
    .innerHeader .gnb li { margin-right: 40px;}
    .innerHeader .gnb li:last-child {margin-right: 0;}
    .innerHeader .tnb li {margin-right: 10px;}
    .inner {width: 95%;}
     footer .inner{width: 95%; min-width: 90%;}
    .me .inner ul.list li ul.in {padding-left: 32px; }
    .me .inner ul.list li a {margin-left: 29px; }
}
/*1024 ~ min-width: 90%;*/
@media screen and (max-width:1024px) {
    .innerHeader {width: 95%; min-width: 90%;}
    .innerHeader .gnb, .innerHeader .tnb {display: none;}
    .innerHeader .gnbMo {display: block; color:#fff; font-size: 40px; float:right;}
    .me .inner ul.list li a {margin-left: 30px;}
    .sns ul li {width: 32%;}
    footer .inner {width:95% }
    footer .inner .list {display: none;}
}

/*테블릿 768*/
@media screen and (max-width:768px) {
    .visual .mainTitle h2 {font-size: 48px;}
    .visual .mainTitle p {font-size: 23px;}
    .about {padding: 50px 0;}
    .about .inner ul li {width: 100%;}
    .me .inner ul.list li ul.in li em {display: block; font-size:18px;  width: 100%; }
    .sns ul {margin: 50px 0;}
    .sns ul li {width: 100%;}
    footer .inner .ftLogo {float: none; width: 100%; text-align: center;}
    footer .inner .address {float: none; width: 100%; margin-left: 32%; }
    footer .inner .address li:nth-child(2){margin-left: 12%;}
}

/*테블릿 414*/
@media screen and (max-width:414px) {
    .visual .mainTitle h2 {font-size: 37px;}
    section .title h2 {font-size: 44px;}
    .me {padding: 50px 0;}
    footer .inner .address {margin-left: 12%;}
}