.mo {display: block;}
/* .en {font-family: 'Exo 2', sans-serif;} */
.en { font-family: 'S-CoreDream-8Heavy'; }


/* thku! for À¥Á¢±Ù¼º*/
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; background: #a4d965; color: #fff; text-align: center; border-bottom: #ff0000; transition: all 0.5s; z-index: 201;}
#skip-nav:focus {top: 0;}


header {position: fixed; top:0; left: 0; width: 100%; height: 15rem /*11.5rem*/; line-height: 11.5rem;  
    background:/*  rgba(0,0,0,0.5)  rgba(255,255,255,0.5)*/ rgba(255,255,255,1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
    z-index: 200;}
.header-spr { height: 15rem /*11.5rem*/; }

.header-content{
    width: 100%; margin: 0 auto; box-sizing: border-box;  
    /* thuk! ÀÚ½Ä¿ä¼Ò¿¡ float°¡ ÀÖ´Â °æ¿ì¿¡´Â overflow:hidden Ãß°¡ */
    overflow: hidden;}

.header-content .logo {float: left; /*padding-top: 1.5rem;*/}
.header-content .logo  a { display: inline-block;}
.header-content .logo img { width:27rem; /*height: 10.7rem;*/ vertical-align: middle;}

.header-content .gnbMo {display: none;}

.header-content .tnb {float: right; }
.header-content .tnb li {float: left; margin-right: 2.5rem;}
.header-content .tnb li:last-child {margin-right: 0;}
.header-content .tnb li a{
    display:block; width: 100%; height: 100%; /* thku! */
    text-align: center; font-size: 1.6rem; color: /* #fff thku! */#333;}
.header-content .tnb li:nth-child(1) a i,.header-content .tnb li:nth-child(2) a i {font-size: 2rem; margin-right: 0.8rem;}

.header-content .tnb li:last-child a {display: block; width: 12.5rem; 
    line-height: 2; /* thku! */
    border: 1px solid #a4d965/* #fff  */; border-radius: 3rem; margin-top: 4.5rem; background: #a4d965; color:#fff;}
.header-content .tnb li:last-child a i {margin-left: 0.5rem;}
.header-content .tnb li:last-child a:hover {
	background: #fff; color:#a4d965; 
    	/* hover transition */
    	transition: all 0.3s; }





.forehead { position:relative; width:100%; line-height:30rem; text-align:center; margin-bottom: 30px; background-position: 50% 50%; background-size: cover;}
.forehead p {font-size:4.5rem;color:#ffffff;font-family:/*'S-CoreDream-8Heavy'*/'NanumSquare'; }



/*section*/
section {margin-bottom: 3rem; padding: 0px 0;}
section#main-contact {margin-bottom: 0; }
section .title {font-size: 5.0rem; color: #000; text-align: center; margin-bottom: 30px;}
section .title .more { display:inline-block; margin-left: 0.5rem; border-bottom: 1px solid #a4d965; padding-bottom: 0.1rem; font-size: 1.8rem; color:#a4d965;  }

section .title h1 { margin-bottom: 0.5rem; font-family: 'S-CoreDream-8Heavy'; font-size: 4.0rem; color: /*#a4d965*/ #737373; }
section .title p {font-size: 2.0rem; color: #555;}

section .desc {width: 100%; margin: 50px auto; border-top: 2px solid #000; border-bottom: 2px solid #000; padding: 30px 0;}
section .desc h1 {position: relative; margin-bottom: 20px; font-size: 2.5rem;}
section .desc p { margin-bottom: 1.8rem; text-align:justify; font-size: 1.8rem; }

section button {display: block; width: 280px; background:#a4d965; border:none; padding: 10px 0; font-weight: bold; text-align: center; margin: auto; border-radius: 50px; color: #fff;}


/*
section .left {float: left; width: 47%;}
section .right {float: right; width: 47%; }
*/
section p {font-size: 1.6rem; margin-bottom: 1.6rem; text-align: justify;}
section img {width: 100%;}
section .right .title {text-align:left; font-size: 2.0rem;}

@media screen and (max-width:768px) {
	section .desc { margin: 30px auto; }
	section .desc h1 {font-size:2.0rem; }
	section .desc p { margin-bottom: 1.4rem; font-size: 1.4rem;}
}



/*section.main*/
section.main {width: 100%; 
    height: 60vh; /* tkhu! */
    background: url(../images/v-main_04.jpg)no-repeat center/cover; position: relative; 
    /* background-attachment: fixed; */
}

section.main .mainTitle {position: absolute; 
    
    top:55%; left:50%; transform: translate(-50%, -50%); 
    
    color: #fff; text-align: center; 
    
    text-shadow: 0 0 5px rgba(8, 8, 8, 0.5); 
    animation-name: mainTitle; animation-duration: 1s;
}
@keyframes mainTitle {
    0%{opacity: 0; top: 65%;}
    30%{opacity: 0; top: 65%;}
    100%{opacity: 1; top: 55%;}    
}



section.main .mainTitle h2{ font-size: 5.5rem; margin-bottom: 2rem;}
section.main .mainTitle p {font-size: 2.5rem; margin-bottom: 3rem;}


section.main .mainTitle .view {
    display: block; width: 18rem; margin: 0 auto; 
    padding: 0.8rem 0;font-size:1.5rem; text-transform: uppercase; letter-spacing: 0.1rem; border: 0.1rem solid #fff; border-radius: 4rem; 

    position: relative; overflow: hidden;}

section.main .mainTitle .view:after {
    content: ''; width:0; height: 100%; background: rgba(255, 255, 255, 0.4); 
    position: absolute; left: 0; top: 0;}
section.main .mainTitle .view:hover:after {width: 100%; transition: all 0.3s;}








/*section.works*/
section.works {background: #fff; padding: 8rem 0;}
section.works ul { margin: 3rem auto; 
    /* width: 140rem */ ; border-bottom: 0.1rem solid #ddd; 
    /* thuk! ÀÚ½Ä¿ä¼Ò¿¡ float°¡ ÀÖ´Â °æ¿ì¿¡´Â overflow:hidden Ãß°¡ */
    overflow: hidden; 
}

section.works ul li {float:left; width: 24%; margin-right: 1.33333%; }
section.works ul li:last-child { margin-right: 0%; }
section.works ul li a{ display: block; width: 100%; height: 100%;}


	section.works ul li a p.img { position:relative; width: 100%; height: /*266px*/auto; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain;}
	section.works ul li a p.img img {width: 100%; height: auto; transition: all .8s;}
	
	/* tabÀ¸·Î focusÇÑ °æ¿ì¿¡µµ  */
	section.works ul li a:hover p.img img,
	section.works ul li a:focus p.img img {
	    transform: scale(1.2); transition: all 1s;}
	

section.works ul li a div.thumb {
        position: relative;
        padding-top: 65%;
        overflow: hidden
}
section.works ul li a div.thumb .thumb-centered{
        position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
        -webkit-transform: translate(50%,50%); 
        -ms-transform: translate(50%,50%); 
        transform: translate(50%,50%); 
}
section.works ul li a div.thumb img{
        position: absolute;
        top:0;
        left:0;
        //max-width: 100%;
        width: 100%;
        height: auto;

        -webkit-transform: translate(-50%,-50%); 
        -ms-transform: translate(-50%,-50%); 
        transform: translate(-50%,-50%);
	transition: all .8s;
}

/* tabÀ¸·Î focusÇÑ °æ¿ì¿¡µµ  */
section.works ul li a:hover div.thumb img,
section.works ul li a:focus div.thumb img {
        transform: translate(-50%,-50%) scale(1.2); transition: all 1s;
}


section.works ul li a .text {padding: 20px;}
section.works ul li a .text h3 {font-size: 2rem; margin-bottom: 1rem;}
section.works ul li a .text p {font-size: 1.6rem; margin-bottom: 1rem;}
section.works ul li a .text p.more {text-transform: uppercase; font-weight: bold; padding-left: 4rem; position: relative;}


section.works ul li a .text p.more:before {
    content: ' '; font-family:FontAwesome; font-size: 1.5rem; width: 3rem; height: 3rem; line-height: 3rem; background:#a4d965; position: absolute; left: 0;display: block;  border-radius: 50%;}





/*section.innovations*/
section.innovations {margin-bottom: 150px;}
section.innovations .imgBox {width: 1400px; height: 540px; margin: 50px auto 0; 
    
    background: url(../images/product_1.jpg) no-repeat center/cover; 
    position: relative;}

section.innovations .imgBox .inner {background: #3a3c4e; 
    width: 80%; 
    position: absolute; left: 50%; transform: translateX(-50%); bottom: -50px;}
section.innovations .imgBox .inner h3 {background: #fff; padding: 25px 45px; box-sizing: border-box; font-size: 18px;}
section.innovations .imgBox .inner h3 span {color:#a4d965;}


section.innovations .imgBox .inner .bottom {padding: 35px 85px; box-sizing: border-box; color: #fff; 
     /* thuk! ÀÚ½Ä¿ä¼Ò¿¡ float°¡ ÀÖ´Â °æ¿ì¿¡´Â overflow:hidden Ãß°¡ */
    overflow: hidden; line-height: 1.6;}
section.innovations .imgBox .inner .bottom p {float: left;}
section.innovations .imgBox .inner .bottom a {float: right; 
    padding: 7px 30px; background: #a4d965; border-radius: 50px;}


section.innovations .imgBox .inner .bottom a:hover,
section.innovations .imgBox .inner .bottom a:focus {background: #f86010;}





/*section.me*/
section.me {margin-bottom: 150px; padding: 80px 0; background: url(../images/me.jpg?tmp=012)no-repeat center/cover;}
section.me ul.list {width: 100%; margin: 50px auto; 
    border-top: 2px solid #000; border-bottom: 2px solid #000;}
section.me ul.list > li {padding: 30px 0px; box-sizing: border-box;}
section.me ul.list > li:nth-child(1) {border-bottom: 1px solid #ddd;}
section.me ul.list li h3 {font-size: 2.0rem; margin-bottom: 20px; position: relative;}
section.me ul.list li h3 span {position: absolute; left: -35px; color:#a4d965; }
section.me ul.list li > p {line-height: 1.6; margin-bottom: 20px; text-align:justify; font-size: 1.8rem;}
section.me ul.list li > a {display:inline-block; font-weight: bold; font-size: 16px;line-height: 1.6; }
section.me ul.list li > a span {color:#a4d965; font-weight: bold; margin-left: 3px; font-size: 14px; }
section.me ul.in {margin-bottom: 30px;}
section.me ul.in li {margin-bottom: 10px; overflow: hidden;}
section.me ul.in li em {float: left; width: 12%;  font-weight: bold;}
section.me ul.in li p {float: left; width: 88%; position: relative;}
section.me ul.in li p:before { content:''; position: absolute; left: -40px; top:10px; width: 4px; height: 4px; border-radius: 50%; background:#a4d965; }


section.me button {display: block; width: 280px; background:#a4d965; border:none; padding: 10px 0; font-weight: bold; text-align: center; margin: auto; border-radius: 50px; color: #fff;}












/*section.gallery*/
section.gallery {margin-bottom: 60px;}
section.gallery ul { /*width: 1400px;*/ margin: 50px auto; overflow: hidden;}

section.gallery ul li {float: left; width: 24%; margin-right: 1.33333%;}
section.gallery ul li:last-child {margin-right: 0;}

section.gallery ul li a {display: block; width: 100%; height: 100%;}

	section.gallery ul li a p.img {height: 251px; overflow: hidden; position: relative;}
	
	section.gallery ul li a p.img:before {content: ''; width: 0%; height: 100%; position: absolute; left: 0; top:0; background: rgba(116, 185, 34, 0.9); transition: all 0.5s;}
	section.gallery ul li a p.img img {width: 100%;}
	section.gallery ul li a:hover p.img:before,
	section.gallery ul li a:focus p.img:before {width: 100%; transition: all 0.6s;}
	
	
	section.gallery 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; border-radius: 40px; padding: 5px 30px; opacity: 0; transition: all 0.5s;}
	section.gallery ul li a:hover p.img:after,
	section.gallery ul li a:focus p.img:after {opacity: 1; transition: all 0.5s;}
	



section.gallery ul li a div.thumb {
        position: relative;
        padding-top: 65%;
        overflow: hidden
}

	section.gallery ul li a div.thumb:before {content: ''; z-index:10; width: 0%; height: 100%; position: absolute; left: 0; top:0; background: rgba(116, 185, 34, 0.9); transition: all 0.5s;}
	section.gallery ul li a div.thumb img {width: 100%;}
	section.gallery ul li a:hover div.thumb:before,
	section.gallery ul li a:focus div.thumb:before {width: 100%; transition: all 0.6s;}
	
	section.gallery ul li a div.thumb:after {content: 'VIEW MORE'; z-index:11; 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; border-radius: 40px; padding: 5px 30px; opacity: 0; transition: all 0.5s;}
	section.gallery ul li a:hover div.thumb:after,
	section.gallery ul li a:focus div.thumb:after {opacity: 1; transition: all 0.5s;}
	
section.gallery ul li a div.thumb .thumb-centered{
        position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
        -webkit-transform: translate(50%,50%); 
        -ms-transform: translate(50%,50%); 
        transform: translate(50%,50%); 
}
section.gallery ul li a div.thumb img{
        position: absolute;
        top:0;
        left:0;
        //max-width: 100%;
        width: 100%;
        height: auto;

        -webkit-transform: translate(-50%,-50%); 
        -ms-transform: translate(-50%,-50%); 
        transform: translate(-50%,-50%);
	transition: all .8s;
}



section.gallery ul li a .desc {width: 100%; padding: 20px 0 20px 20px; box-sizing: border-box;}
section.gallery ul li a .desc div {font-size: 1.6rem; font-weight: /*bold*/normal;}
	section.gallery ul li a .desc p {font-size: 18px; font-weight: bold;}
section.gallery ul li a .desc p.color {color: #a4d965; font-size: 1.6rem; font-weight: normal;}
section.gallery ul li a .desc p.time {color: #999; font-size: 1.4rem; font-weight: normal; padding-left: 0px; margin-top: 0px; position: relative;}
	//section.gallery ul li a .desc p.time:before { content:' \f017'; font-family: FontAwesome; font-size: 15px; line-height: 30px; position: absolute; left: 0; top:-3px;}



/*footer*/
footer {clear: both; display: inline-block; width: 100%; height:100%; border-top:0px solid #a3a3a3 /*#f47531*/; background:#f3f3f3; color:#333333}
footer .left-r {float: left; width: 220px;}
footer .left-r img { max-width: 200px; }
footer .right-r {float: right; width: calc( 100% - 250px); text-align: right; font-size: 1.3rem;}

footer .footer-top { display: block; height: 5rem; text-align: center; border-bottom: 1px solid #d3d3d3; }
footer .footer-top ul { display: inline-block; }
footer .footer-top ul li { float: left; padding: 0 5rem; }
footer .footer-top ul li.spr { width: 1px; height: 15px; background: #d3d3d3; padding: 0px; margin-top: 20px; }
footer .footer-top ul li a { line-height: 5rem; }

footer .inner {width: /* 1600px */ 120rem; 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; font-family: 'Exo 2', sans-serif; margin-top: 10px;}
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:after {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #ccc; position: absolute; right: -50px; top:10px;  }
footer .inner .list li a:hover,footer .inner .list li a:focus {color: #a4d965; text-decoration: underline;}
footer .inner .list li:last-child a {font-weight: bold; font-family: 'Exo 2',sans-serif;}






.sub-content {width:100%; margin-bottom: 3rem;}
.sub-content .title {padding:1rem; background:#f3f3f3;
        border-top:1px dashed #c3c3c3;
        border-bottom:1px dashed #c3c3c3;
        font-size:2rem;
}
.sub-content .desc {padding:1.5rem; text-align: justify; font-size: 1.6rem; }
.sub-content .desc ul {}
.sub-content .desc ul li {padding:0.5rem 0; text-align:left; list-style-type:circle !important; margin-left: 2rem;}



.visual {
	position:relative;width:100%;line-height:30rem; margin-bottom: 30px; background-size:cover; text-align:center;
}
.visual-pr {
	font-size:4.5rem;color:#ffffff;font-family:/*'S-CoreDream-8Heavy'*/'NanumSquare';
}
.ImageBy { position:absolute; bottom:1rem; right:1rem;  line-height:normal; color:#ffffff; font-size:0.8rem; font-style:italic;  text-shadow: 0 0 5px rgba(8, 8, 8, 0.5);}
