/* .wrap{display: none;} */
/* body{background:#ccc;} */
*{margin: 0;padding: 0;box-sizing: border-box;}

/*자바스크립트 호출  */
/* .nav ul.ullist li.bg{background: yellow;color:red} */

.btn{position:absolute;top:50px;left:50px;display:inline-block;z-index:999;}
.btn i.material-icons{color:#fff;font-size:40px;animation:btnAni 1s infinite alternate linear;cursor:pointer;}

.nav.on{transform:rotateY(30deg);opacity:1;width:250px;}
.nav{position:absolute;left:0;z-index:900;
width:150px;height:100%;background:#000;overflow:hidden;
/* display:none; */
opacity:0;transition:all .5s;
transform-origin:left center;
}

.nav>*{position:absolute;cursor:pointer;width:100%;text-align:center;}
.nav h1{top:11%;background:#8b0d0e;padding:20px 0; }
/* 질문!! 클릭했을때 첫 페이지 이동하는 방법은? j쿼리에서 했으나 안됨. */
.nav h1:hover{opacity:.5;}
.nav ul{top:40%;}
.nav ul li{padding:20px 10px;font-size:20px;color:#fff;border-bottom: 1px dotted #fff;}
.nav ul li:hover{background:rgba(255,255, 255, 0.3);font-weight:bold;color:#fff;}
.nav ul li:nth-child(2):hover{background:rgba(208, 112, 0, 0.3);color:#fab34a;}
.nav ul li:nth-child(3):hover{background:rgba(4, 29, 159, 0.3);color:#4a6bfa;}
.nav h1 img,.nav ul img{vertical-align:top;width:30%;margin-bottom:10px}

@keyframes btnAni {
  0%{transform:scale(1);opacity:1;color:#fff;}
  100%{transform:scale(1.5);opacity:.8;color:#000;}
}

.wrap{position:absolute;
  width:100%;min-width:1024px;
  height:100%;min-height:768px;
  perspective:900px;
  background:#111;
}
section{width:100%;height:100%;transition:all .5s;
  transform-origin:right center;z-index: 5;position:fixed;}
section.on{z-index:10;transform:rotateY(-20deg)}

/* 전체  */
section div{width:100%;height:100%;opacity:0;position:absolute;perspective:900px;}
section div.on{opacity:1;}

/* on 바로잡음 */
section div.on>p{transform:rotateY(0deg);}
section div p{
float:left;color:#fff;
background-size:cover;
transform:rotateY(180deg);
transition:all 3s;
position:relative;overflow:hidden;
}

/*
section div p span{position: absolute;}
질문1!3.. 동영상이 플레이가 되지 않음. 이유가 뭔지 포지션을 전체에 주면
동영상을 감싸고 있는 스판도 포:앨솔임.. 그 안도 앨솔이고.. 동영상 자체가 플레이가 되지않음
답: 상위에 위드값을 높이값을 주지 않아서 그랬음.
*/

/* p{border: 1px solid #000;} */
section p strong{position:absolute;z-index:120;width:100%;}

/*--------------- 1번째 이미지 */
section .box1 p:nth-child(1){width:50%;height:25%;background-image:url(img/japan_01.jpg);}
section .box1 p:nth-child(2){width:20%;height:25%;background-image:url(img/japan_02.jpg);}
section .box1 p:nth-child(3){width:30%;height:25%;background-color:#000;}
section .box1 p:nth-child(3) img{position:absolute;right:11px;bottom:60px;}
section .box1 p:nth-child(4){width:25%;height:25%;background-image:url(img/japan_04.jpg);}
section .box1 p:nth-child(4) code{position:absolute;z-index:240;left:50%;bottom:5%;
  transform:translateX(-50%);font-size: 20px;color:#cdec17;font-weight:bold;}
section .box1 p:nth-child(4) strong{background:rgba(0, 0, 0, 0.8);height:60px;left:0;bottom:0;}
section .box1 p:nth-child(5){width:50%;height:80%;float:right;background-image:url(img/japan_06.jpg);}
section .box1 p:nth-child(6){width:25%;height:50%;float:right;overflow:hidden;}
span.video_wrap:before{position:absolute;background:rgba(166, 3, 3, 0.3);width:100%;height:100%;content:'';z-index:2;}
span.video_wrap video{width:200%;height:200%;position:absolute;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);}
section .box1 p:nth-child(7){width:25%;height:25%;background-image:url(img/japan_07.jpg);}
section .box1 p:nth-child(8){width:25%;height:25%;background-image:url(img/japan_08.jpg);}
section .box1 p:nth-child(8) strong{width:100%;height:100%;
letter-spacing:-.3px;font-size:45px;font-weight:normal;text-align:center;
background:rgba(0, 0, 0, 0.8);padding-top:20%;}
section .box1 p:nth-child(8) strong b{color:#b53f3b;font-weight:normal;}
section .box1 p:nth-child(9){width:25%;height:25%;background-image:url(img/japan_09.jpg);}

/* 1-5 비디오 -----------------------------------------*/
/* 질문!!_2/ 호버했을때 이 효과를 주고 싶다.
답:동영상의 루프 영역때문에 z-index:-1; 값을 낮추어도 안된다.
-방법-
1.영상을 사이즈 만큼 편집을한다.
2.영상의 영역을 낮춘다.위드 값200% 가닌 100% left:0; 한다.
*/
p span.video_a{width:100%;height:100%;position:absolute;z-index:-1;}
p span.video_a video{width:200%;height:200%;position:absolute;z-index:0;top:50%;left:50%;transform: translate(-50%,-50%);}

/*--------------------- 2번째 이미지 */
section .box2 p:nth-child(1){width:25%;height:25%;background-image:url(img/india_01.jpg);}
section .box2 p:nth-child(2){width:25%;height:25%;background-image:url(img/india_02.jpg);}
section .box2 p:nth-child(3){width:25%;height:25%;background-image:url(img/india_03.jpg);}
section .box2 p:nth-child(4){width:25%;height:25%;background-color:#000;}
section .box2 p:nth-child(4) img{position:absolute;right:11px;bottom:14px;}
section .box2 p:nth-child(5){width:25%;height:50%;background-image:url(img/india_05.jpg);}
section .box2 p:nth-child(6){width:50%;height:50%;overflow:hidden;}
section .box2 p:nth-child(6) strong{border:20px solid #fff;width:96%;height:90%;margin:20px;z-index: 9999;opacity:.5;}
section .box2 p:nth-child(6) img{position:absolute;z-index:9999;right:5%;bottom:11%;}
section .box2 p:nth-child(6) video{width:200%;height:200%;}
section .box2 p:nth-child(7){width:25%;height:25%;background-image:url(img/india_07.jpg);}
section .box2 p:nth-child(8){width:25%;height:25%;background-image:url(img/india_08.jpg);}
section .box2 p:nth-child(9){width:25%;height:25%;background-image:url(img/india_09.jpg);}
section .box2 p:nth-child(10){width:25%;height:25%;background-image:url(img/india_10.jpg);}
section .box2 p:nth-child(11){width:25%;height:25%;background-image:url(img/india_11.jpg);}
section .box2 p:nth-child(12){width:25%;height:25%;background-image:url(img/india_12.jpg);}

/*-------------------- 3번재 이미지  */
section .box3 p:nth-child(1){width:50%;height:100%;overflow:hidden;}
section .box3 p:nth-child(1) video{width:200%;height:200%;}
section .box3 p:nth-child(2){width:25%;height:25%;background-image:url(img/usa_01.jpg);}
section .box3 p:nth-child(3){width:25%;height:25%;background-color:#000;}
section .box3 p:nth-child(3) img{position:absolute;right:11px;bottom:50px;}
section .box3 p:nth-child(4){width:50%;height:25%;background-image:url(img/usa_03.jpg);}
section .box3 p:nth-child(5){width:25%;height:50%;background-image:url(img/usa_04.jpg);}
section .box3 p:nth-child(6){width:25%;height:25%;float:right;background-image:url(img/usa_05.jpg);}
section .box3 p:nth-child(7){width:25%;height:25%;float:right;background-image:url(img/usa_06.jpg);}