@charset "utf-8";
/* CSS Document */color
body:before{content:'';display:block;width:100vw;height:100vh;position:fixed;left:0px;top:0px;background:rgba(0,0,0,0.8);z-index:100;transition:all .3s ease-out;opacity:0;visibility:hidden;transition-delay:.35s;}
body.mask:before{opacity:1;visibility:visible;transition-delay:0s;}
/*------pop up panel------*/
.popBox{position:fixed;z-index:101;float:left;width:50vw;max-height:95vh;background:#fff;opacity:0;visibility:hidden;margin-top:-30px;transition: all .3s ease-out;transition-property:opacity,margin-top,visibility;transition-delay:0s;}
.popBox>figure{display:block;position:absolute;z-index:101;width:30px;height:30px;color:white;line-height:30px;text-align:center;cursor:pointer;top:-15px;right:-15px;font-size:1.2em;background:#222;border-radius:50%}
.popBox>figure strong{display:block;position:absolute;width:30px;height:30px;transition:transform .25s ease-out;}
.popBox>figure:hover strong{-ms-transform:rotate(90deg);-webkit-transform:rotate(90deg);transform:rotate(90deg);}
.popBox.center{left:50%;top:50%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.popBox.small{width:30vw;}
.popBox.large{width:80vw;}
.popBox.active{opacity:1;visibility:visible;margin-top:0px;transition-delay:.3s;}
/*------ends pop up panel------*/

@media screen and (min-width:1400px) {
.popBox{width:40vw;}
}

@media (max-width: 820px) {  /*IPad, IPad mini and Tablet horizontal*/
.popBox{width:100vw;max-height:100%;}
.popBox>figure{width:40px;height:40px;line-height:40px;top:0px;right:0px;border-radius:0%}
.popBox>figure strong{width:40px;height:40px;}
}


@media (max-width:480px) {  /*IPad, IPad mini and Tablet horizontal*/
.popBox{width:100vw !important;height:100% !important;-ms-transform:none !important;-webkit-transform:none !important;transform:none !important;left:0px !important;top:0px !important;}
}