*{box-sizing: border-box}

body{height: 7057px;}
.wrapbg{position: fixed;z-index: 1;width: 100%;height: 100vh;background: url(../03_15/img/bg1_0.jpg);background-size: cover;transition: all .5s ease}

.logo{position: fixed;left: 2%;top: 25%;width: 160px;z-index: 10;}
.logo img{width: 100%;}
.logobg{position: fixed;left: 0;top: 24%;width: 220px;height: 170px;background: #fff;border-top-right-radius: 100px;border-bottom-right-radius: 100px;z-index: 5;}

.nav{position: fixed;left: 10px;top: 50%;transform: translateY(-50%);
width: 200px;z-index: 100;}
.nav ul li{position: relative;margin: 20px;font-size: 14px;height: 30px;cursor: pointer;line-height: 27px}
.nav ul li p{position: absolute;width: 100%;height: 100%;z-index: 10;padding-left: 16px;transition: all .2s linear;color: #fff}
.nav ul li span{position: absolute;width: 10px;height: 100%;display: block;transform: skew(-10deg);transition: all .2s linear}
.nav ul li:nth-child(1) span{background: #fcb131}
.nav ul li:nth-child(2) span{background: #0081c9}
.nav ul li:nth-child(3) span{background: #ee2e4e}
.nav ul li:nth-child(4) span{background: #00a651}

.nav ul li:hover span{width: 50%;}

.nav ul li.on span{width: 100%;}

section{position: fixed;width: 1200px;height: 700px;transform: translate(-50%,-50%);
left: 50%;top: 50%;perspective: 800px;z-index: 10;}

section article{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 10;opacity: .7}
section article .abvata{position: absolute;transform: translate(-50%,-50%);left: 50%;top: 50%}
section article .tit{position: absolute;transform: translate(-50%,-50%);left: 50%;top: 50%;text-align: center;color: #fff;width: 100%;text-shadow: 1px 1px rgba(0,0,0,.5)}
section article:nth-child(odd) .tit h2{font-size: 40px;color: #0081c9}
section article:nth-child(even) .tit h2{font-size: 40px;color: #ee2e4e}
section article .tit p{font-size: 16px;position: absolute;transform: translateX(-50%);width: 100%;}
section article:nth-child(odd) .tit p{color: #00a651}
section article:nth-child(even) .tit p{color: #fcb131}
section article img{width: 100%;}
section article .abvata1{width: 100%}
section article .abvata2{width: 80%}
section article .abvata3{width: 90%}
section article .abvata4{width: 100%}

section article:nth-child(1){transform: translateZ(-100px)}
section article:nth-child(2){transform: translateZ(-1900px);z-index: 9}
section article:nth-child(3){transform: translateZ(-3900px);z-index: 8}
section article:nth-child(4){transform: translateZ(-5900px);z-index: 7}

section article.on{z-index: 20;opacity: 1}


section article:nth-child(1) .tit{transform: translateZ(-100px) translate(-50%,-50%)}
section article:nth-child(2) .tit{transform: translateZ(-1900px) translate(-50%,-50%)}
section article:nth-child(3) .tit{transform: translateZ(-3900px) translate(-50%,-50%)}
section article:nth-child(4) .tit{transform: translateZ(-5900px) translate(-50%,-50%)}

section article:nth-child(1) p{left: 50%;top: 330%}
section article:nth-child(2) p{left: 50%;top: 380%}
section article:nth-child(3) p{left: 65%;top: 120%}
section article:nth-child(4) p{left: 50%;top: 180%}

/*translateZ 란 3D 기능을 주는것*/