@charset "utf-8";

/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0;padding:0}
body,h1,h2,h3,h4,input,button,select,textarea{font-family:'Noto Sans KR',"맑은 고딕","Malgun Gothic",Sans-serif;font-size:12px;color:#000}
body{text-align:left; word-break:break-word;}
img,fieldset,iframe{border:0 none}
li{list-style:none}
input,select,button{vertical-align:top}
img{vertical-align:top; max-width:100%;}
i,em,address{font-style:normal}
label,button{cursor:pointer}
a{color:#000;text-decoration:none}
a:hover{text-decoration:none}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
caption{font-size:0; line-height:0; height:0}
* {box-sizing:border-box;}

/* Placeholder */
::-webkit-input-placeholder { color: #999; font-weight: normal; font-size: 15px; }
:-moz-placeholder { color: #999; opacity: 1; font-weight: normal; font-size: 15px; }
::-moz-placeholder { color: #999; opacity: 1; font-weight: normal; font-size: 15px; }
:-ms-input-placeholder { color: #999; font-weight: normal; font-size: 15px; }

/* Skip */
#skipnavigation{z-index:9999;position:absolute;left:0;top:0;width:100%;text-align:center}
#skipnavigation *{list-style:none;margin:0;padding:0;}
#skipnavigation a{display:block;width:100%;height:0;overflow:hidden;white-space:nowrap;}
#skipnavigation a:focus,
#skipnavigation a:active{display:block;width:100%;height:36px;color:#fff;background:#000;line-height:36px;text-decoration:underline !important;font-size:14px;}

#viewport{min-width:1280px; overflow-x:hidden; }
.navList {position: fixed; left:59px; top:50%; margin-top:-35px; z-index: 100;}
.navList ul li:first-child {margin-top:0;}
.navList ul li {margin-top:5px;}
.navList ul li a{display: block; padding:5px 0; }
.navList ul li a span{display: block; text-indent:-999em; width:14px; background: #707070; height: 1px;}
.navList ul li.active a span {background: #222222; width:25px;}

.sec01 {position: relative; height:100vh; min-height:760px;}
.sec01 .in{position:absolute; left:0; top:50%; margin-top:-270px; width: 100%;}
.sec01 .in .pop{position: relative;  width:1525px; margin:0 auto;}
.sec01 .in .pop .title {transition:1s all; opacity:0; transform:translate(100px,0);}
.sec01 .in .pop .title .tit01 {margin-bottom:74px;}
.sec01 .in .pop .imgWrap {position: absolute; right:-130px; top:-100px; width:891px; transition:1s all; opacity:0; transform:translate(-100px,0);}
.sec01 .in .pop .imgWrap ul li {position: absolute;  animation-name:ico; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; }
.sec01 .in .pop .imgWrap ul li.no1 {left:185px; top:148px; animation-delay: .4s;}
.sec01 .in .pop .imgWrap ul li.no2 {left:269px; top:66px; animation-delay: .7s;}
.sec01 .in .pop .imgWrap ul li.no3 {left:633px; top:123px; animation-delay: .5s;}
.sec01 .in .pop .imgWrap ul li.no4 {left:403px; top:319px; animation-delay: .3s; animation-name:ico2; animation-timing-function: linear;}
@keyframes ico {
  from { transform:translate(0,0); }
  to { transform:translate(0,20px);}
}
@keyframes ico2 {
  from { transform:translate(0,0); }
  to { transform:translate(0,10px);}
}

.sec01 .btnScroll {position: absolute; left:0; bottom:40px; width: 100%; text-align: center; transition:1s all; opacity:0; transform:translate(0,50px);}
.sec01 .btnScroll a {display: inline-block; vertical-align: top;}
.sec01 .btnScroll a .tit {margin-bottom:16px; display: block;}
.sec01 .btnScroll .arrow {position: relative; animation-name: arrow; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes arrow {
 from { bottom:0; }
 to { bottom:-20px;}
}

.sec01.animated .in .pop .title {opacity:1; transform:translate(0,0);}
.sec01.animated .in .pop .imgWrap {opacity:1; transform:translate(0,0); transition-delay:300ms;}
.sec01.animated .btnScroll {opacity:1; transform:translate(0,0); transition-delay:500ms;}



.sec02 {  padding-bottom:140px; padding-top: 280px;}
.sec02 .in { width:1525px; margin:0 auto;}
.sec02 .in:after {content:''; display:block; clear:both;}
.sec02 .in .img {position: relative; float:left; padding:63px 0 0 90px;}
.sec02 .in .img img {position: relative; z-index: 10; transition:1s all; opacity:0; transform:translate(-100px,0);}
.sec02 .in .img .bg {position: absolute; top:0; width: 2000px; height:620px; right:-435px; background: #f9f9f9; transition:1s all;  transform:translate(-100%,0);}
.sec02 .in .text {position: relative; float:right; padding-top:194px; z-index: 10; transition:1s all; opacity:0; transform:translate(100px,0);}

.sec02.animated .in .img .bg {transform:translate(0,0);}
.sec02.animated .in .img img {opacity:1; transform:translate(0,0); transition-delay:400ms;}
.sec02.animated .in .text  {opacity:1; transform:translate(0,0); transition-delay:500ms;}

.sec03  {  padding:140px 0;}
.sec03 .in { width:1525px; margin:0 auto;}
.sec03 .in:after {content:''; display:block; clear:both;}
.sec03 .in .text {position: relative; float:left; padding-top:154px; z-index: 10; transition:1s all; opacity:0; transform:translate(-100px,0);}
.sec03 .in .img {position: relative; float:right; padding:72px 0 0 0;}
.sec03 .in .img img {position: relative; z-index: 10; transition:1s all; opacity:0; transform:translate(100px,0);}
.sec03 .in .img .bg {position: absolute; top:0; width: 2000px; height:620px; left:-294px; background: #f9f9f9; transition:1s all; transform:translate(100%,0);}

.sec03.animated .in .img .bg { transform:translate(0,0);}
.sec03.animated .in .img img {opacity:1; transform:translate(0,0); transition-delay:400ms;}
.sec03.animated .in .text  {opacity:1; transform:translate(0,0); transition-delay:500ms;}

.sec04 {padding:140px 0 280px 0;}
.sec04 .in {position: relative; margin:0 auto; width:1525px; margin:0 auto; text-align: center;}
.sec04 .in .leftArea {position: absolute; left:0; top:90px; text-align: left; transition:1s all; opacity:0; transform:translate(100px,0); }
.sec04 .in .tit {margin-bottom:68px;}
.sec04 .in .link ul li {margin-bottom:44px;}
.sec04 .in .link ul li a {display: block; position: relative; width:243px;}
.sec04 .in .link ul li a span{position: absolute; right:0; bottom:5px; width:31px; height: 31px; background:url('../images/link.png') no-repeat; transition:.3s all;}
.sec04 .in .link ul li a:hover span{background:url('../images/linkOn.png') no-repeat;}
.sec04 .in .link ul li a span:after {content:''; position: absolute; left:31px; top:50%; width: 350px; height: 1px; background: #c4c4c4;}
.sec04 .in .rightArea {position: absolute; right:0; top:90px; text-align: right; transition:1s all; opacity:0; transform:translate(-100px,0); }
.sec04 .in .rightArea .tit {padding-top: 7px;}
.sec04 .in .rightArea .link ul li a {width: 235px;}
.sec04 .in .rightArea .link ul li a span {right:auto; left:0;}
.sec04 .in .rightArea .link ul li a span:after {left:auto; right:31px;}
.sec04 .in .rightArea .tit {margin-bottom:65px;}
.sec04 .in .rightArea .link ul li:nth-child(1) {margin-bottom: 42px;}
.sec04 .in .rightArea .link ul li:nth-child(2) {margin-bottom: 49px;}
.sec04 .in .center {position: relative; z-index: 10; display: inline-block;}

.sec04.animated .in .leftArea {opacity:1; transform:translate(0,0);}
.sec04.animated .in .rightArea {opacity:1; transform:translate(0,0); transition-delay:300ms;}

.footer {background: #7a7a7a;}
.footer .in{position: relative; width:1525px; margin:0 auto;}
.footer .in .copy {padding:43px 0 41px 0;}
.footer .in .btnFamily {position: absolute; right:0; top:49px; width:132px; height: 39px; background:url('/images/btnFamily.png') no-repeat;}
.footer .in .btnFamily select{opacity:0; width:132px; height: 39px; vertical-align: top; cursor:pointer;}
.footer .in .btnTop {position: absolute; right:-75px; top:-130px}

@media all and (max-height:770px) {
    .sec01 .in {transform:scale(.8)}
    .sec02 .in {transform:scale(.8)}
    .sec03 .in {transform:scale(.8)}
    .sec04 .in {transform:scale(.8)}
    .footer .in {transform:scale(.8)}
    .sec02 { padding-bottom:70px; padding-top: 140px;}
    .sec03 { padding:70px 0;}
    .sec04 {padding:70px 0 140px 0;}
}

@media all and (max-width:1700px) {
    .sec01 .in {transform:scale(.8)}
    .sec02 .in {transform:scale(.8)}
    .sec03 .in {transform:scale(.8)}
    .sec04 .in {transform:scale(.8)}
    .footer .in {transform:scale(.8)}
    .sec02 { padding-bottom:50px; padding-top: 80px;}
    .sec03 { padding:50px 0;}
    .sec04 {padding:50px 0 70px 0;}
}

@media all and (max-width:1400px) {
    .sec01 .in {transform:scale(.7); transform-origin:30% center}
    .sec02 .in {transform:scale(.7); transform-origin:30% center}
    .sec03 .in {transform:scale(.7); transform-origin:30% center}
    .sec04 .in {transform:scale(.7); transform-origin:30% center}
    .footer .in {transform:scale(.7); transform-origin:30% center}
    
    .sec02 { padding-bottom:20px; padding-top:40px;}
    .sec03 { padding:25px 0;}
    .sec04 {padding:25px 0 35px 0;}
    
}