@charset "UTF-8";

#modal_wrapper{
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
    top:0;
    left:0;
    z-index:100;
}
#modal_wrapper .close-fld{
    position:relative;
    box-sizing:border-box;
    width:100%;
    height:100%;
    background:transparent;
    display:block;
    content:'';
    z-index:+1;
}
#modal_wrapper .modal_inner{
    content:'';
    width:92%;
    max-width:1280px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:block;
    box-sizing:border-box;
    z-index:+2;
}
#youtube_mov{
    position:absolute;
    top:0;
    left:0;
    z-index:+3;
}
.close-icon{
    content:'';
    display:block;
    right:0;
    top:-4rem;
    width:4rem;
    height:4rem;
    position:absolute;
}
.close-icon:before,.close-icon:after{
    content:'';
    display:block;
    width:4rem;
    height:1px;
    position:absolute;
    background:#ccc;
    top:50%;
    left:50%;
}
.close-icon:before{transform:translate(-50%,-50%) rotate(45deg);}
.close-icon:after{transform:translate(-50%,-50%) rotate(-45deg);}
.fadeIn{
    animation-name:fadeIn;
    animation-duration:.3s;
    animation-timing-function:ease-out;
}
.fadeIn1{
    animation-name:fadeIn;
    animation-duration:.5s;
    animation-timing-function:ease-out;
}
.fadeIn2{
    animation-name:fadeIn;
    animation-duration:.8s;
    animation-timing-function:ease-out;
}
@media screen and (max-width: 768px ) and (orientation: landscape ){
    #modal_wrapper .modal_inner{width:80%}
}
@keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}