.viewHead li.right a>span{position: relative;}
.viewHead li.right a>span:nth-child(1){transform:rotate(45deg);}
.viewHead li.right a>span:nth-child(2){transform:rotate(-45deg); top:-2px;}
.right .menu{cursor: default;}
.left{cursor: pointer;}


 header span.leftBox{display:none; width:8%; _position: absolute;}
 header span.leftBox a{width:8%; color:#ddd; padding:1rem 0; display:block; border-bottom:1px dotted #ddd; font-family: 'Josefin Sans', sans-serif; }
 header span.leftBox a:hover, header span.leftBox a.active{color:#111; border-bottom:1px dotted #111;}



.wrap{overflow: hidden;}
section{width:100%; height:100vh; background:#fff; position: relative;}
.view{position: relative; width:100%; height:100%;}
.screen{ width:90%; margin:auto; height:100%;}
.screenBox{width:100%; height:100%;  padding:7rem 0 2.5rem 0; box-sizing: border-box; display:block;}
section .headInfo{width: 100%; position: absolute;top: 5rem; display: flex; justify-content: center;}

/* WEB  */
.screenBox.web{_display:none;}
.view.monitor{background:url(../img/imac.png)no-repeat center center; background-size: contain; width:100%; height:100%; position: relative;}
.view.monitor iframe{position: absolute; top:50%; left:50%; transform: translate(-50%, -62.5%) scale(0.51); width: 100%; height:101vh; _zoom:0.8; background:#fff;}

/* TABLET  */
.screenBox.tablet{display:none;}
.view.pad{background:url(../img/ipad.png)no-repeat center center; background-size: contain; width:100%; height:100%; position: relative;}
/* .view.pad iframe{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) scale(0.5); width: 100vw; height:276vh; zoom:0.51;} */
.view.pad iframe{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%) scale(0.65); width: 100vw; height:266vh; zoom:0.4; background:#fff;}

/* MOBILE  */
.screenBox.mobile{display:none;}
.view.phone{background:url(../img/iphone.png)no-repeat center center; background-size: contain; width:100%; height:100%; }
.view.phone iframe{position: absolute; top:50%; left:50%;     transform: translate(-50%, -50.6%) scale(0.9);
    width: 100vw;
    height: 385vh;
    zoom: 0.2; background:#fff;}

/* BUTTON  */
.button{width:11.5rem; position: absolute; top:50%; transform:translateY(-50%); right:0; cursor: pointer; display:block; transition:all 0.3s;}
button{width:10rem; display:flex; align-items: center; justify-content: space-around; box-sizing: border-box; padding:0.4rem;   background:#fff; border:0; outline:0;  cursor: pointer; position: relative; transition:all 0.3s; right:0; opacity:0.15;}
button::after{content:''; width:143%; height: 1px; background:#111; position: absolute; left:1.2rem; bottom:0;}
button img{width:3rem; cursor: pointer;}
button span{display: block; font-family: 'Raleway', sans-serif; cursor: pointer; font-weight: 800;}
/* .button:hover{right:4rem;}
.button:hover::after{width:140%;} */
button.on, button:hover{right:4rem; opacity:1;}


/* UIUX  RENEWAL */
.onepage .screenBox.web{_display:none;}
.onepage .view.monitor{background:url(../img/imacBlack.png)no-repeat center center; background-size: contain; width:100%; height:100%; position: relative;}
/* .pop2 .viewBack{background:#666; width:100%; height:100%; position: absolute;} */
.onepage .view.monitor iframe{position: absolute; top:50%; left:50%; transform: translate(-50%, -62.5%) scale(0.432); width: 100vw; height:105vh; _zoom:0.8;}

.onepage .screenBox.mobile{display:none;}
.onepage .view.phone{background:url(../img/iphone.png)no-repeat center center; background-size: contain; width:100%; height:100%; }
.onepage2 .view.phone iframe{position: absolute; top:50%; left:50%; transform: translate(-50%, -50.6%) scale(0.874); width: 100vw; height:391vh; zoom:0.2;}