*{box-sizing: border-box}

body{font-family: 'Oswald', sans-serif;
font-family: 'Noto Sans KR', sans-serif;overflow: hidden;
background: linear-gradient(to bottom, #f8db85 0%, #f8db85 50%,#f8db85 100%)}

.wrap{perspective: 1200px;width: 100%;height: 100vh}

i.material-icons{position: fixed;left: 10px;top: 10px;cursor: pointer;
animation: menubar 2s linear infinite;z-index: 300;}

@keyframes menubar {
    0%{transform: scale(1);opacity: 1;}
    50%{transform: scale(.6);opacity: .6;}
    100%{transform: scale(1);opacity: 1;}
}

.nav{position: fixed;height: 100vh;width: 200px;color: #fff;
transform: rotatey(120deg);transform-origin: left center;
transition: all .5s ease;opacity: 0;z-index: 200;
background: linear-gradient(to bottom, #fff 0%, #ffc100 50%,#ffc100 100%)}

.nav.on{transform: rotatey(15deg);opacity: 1;}

.nav .logo{position: absolute;top: 10%;left: 0;padding: 0 10px;}
.nav .logo img{width: 100%;}
.nav ul{position: absolute;top: 30%;left: 0;line-height: 3;width: 100%;text-align: center}
.nav li{font-size: 20px;cursor: pointer;}
.nav li.on{color: #000;background: #fff;}

section{position: fixed;width: 100%;height: 100vh;right:0;top:0;
transform-origin: right center;transition: all .5s ease;}
section.on{transform: rotatey(-5deg);width: 90%;}

section div{position: absolute;width: 100%;height: 100%;opacity: 0;
perspective: 1200px;}
section div.on{z-index: 100;opacity: 1;}
section div p{width: 25%;height: 25%;float: left;text-align: center;font-size: 72px;line-height: 3.5;
transform: rotateY(180deg);transition: all 1s ease;}
section div.on p{transform: rotateY(0)}


.box1 p{background: linear-gradient(to bottom, #fff 0%, #ffc100 50%,#ffc100 100%);color: #fff}
.box1 p:nth-child(1){width: 50%;}
.box1 p:nth-child(2){overflow: hidden;}
.video1{width: 100%;height: 102%}
.box1 p:nth-child(3){height: 50%;float: right;background: url(../02_08/img/page1_1.jpg)no-repeat 42% 82%;}
.box1 p:nth-child(4){height: 50%;background: #000 url(../02_08/img/page1_2.png)no-repeat 34% 50%;background-size: 440%}
.box1 p:nth-child(5){width: 50%;background: url(../02_08/img/page1_3.jpg)no-repeat 50% 50%;background-size: 120%}
.box1 p:nth-child(7){width: 50%;height: 50%;float: right;background: url(../02_08/img/page1_4.png)no-repeat 29% 50%;}
.box1 p:nth-child(8){width: 50%;background: url(../02_08/img/page1_5.png)no-repeat 60% 18%;}

.box2 p{background: #4d4a51;color: #fff}
.box2 p:nth-child(1){height: 75%;background: #f6f6f6 url(../02_08/img/page2_1.jpg)no-repeat 72% 48%;}
.box2 p:nth-child(3){height:75%;;background: #f6f6f6 url(../02_08/img/page2_3.jpg)no-repeat 72% 48%;}
.box2 p:nth-child(5){height: 75%;float: right;;background: #f6f6f6 url(../02_08/img/page2_4.jpg)no-repeat 72% 48%;}
.box2 p:nth-child(7){position: absolute;height: 75%;left: 25%;top: 25%;;background: #f6f6f6 url(../02_08/img/page2_2.jpg)no-repeat 62% 48%;}
.box2 p:nth-child(8){float: right;}

.box3 p{background: #000;color: #fff}
.box3 p:nth-child(1){height: 50%;background: #000 url(../02_08/img/page3_1.png)no-repeat 50% 50%;}
.box3 p:nth-child(2){width: 50%;background: #000 url(../02_08/img/page3_3.png)no-repeat 50% 50%;}
.box3 p:nth-child(3){height: 50%;background: #000 url(../02_08/img/page3_5.jpg)no-repeat 43% 50%;}
.box3 p:nth-child(4){height: 50%;background: #000 url(../02_08/img/page3_2.jpg)no-repeat 39.5% 50%;}
.box3 p:nth-child(5){height: 75%;width: 50%;position: absolute;left: 25%;top: 25%;background: #000 url(../02_08/img/page3_4.jpg)no-repeat 31% 100%;}
.box3 p:nth-child(6){height: 50%;float: right;;background: #000 url(../02_08/img/page3_6.png)no-repeat 50% 50%;}

p:nth-child(even){transition-delay: .1s}