@import url('https://fonts.googleapis.com/css2?family=Galada&family=Manrope:wght@200..800&display=swap');

/*    Reset CSS  */
* { margin:0;  padding:0; }
ol,ul { list-style: none; }
a { text-decoration:none; color:#bbb;}
body { position:fixed;  width:100%; height:100%; background:#111;}

/* -- 동영상/Background ----------------------------------------*/
.video {
    position: fixed;      
    inset: 0;             
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1; 
}

.video iframe {
    width: 100%;
    height: 100%;
    border: none;
}/*-- /동영상/Background --*/

/* -- Logo ----------------------------------------*/
#logo{ /* h1 */
    position: fixed;
    left: 25px;
    color: white;

    opacity: .8;
    z-index: 10;
}

#logo img{ /* h1 */
    width: 100px;
    height: 100px;
}/* -- /Logo --*/

/* -- Header (Global Navigation Bar, GNB) ----------------------------------------*/
header{
    width: 210px;
    height: 100%;
    position: fixed;
    background: linear-gradient(to right,#00bd7d, #00704A );
}   

/* 1 depth */
#gnb{
    width: 200px;
    position: absolute;
    top: 150px;
    right: 0px;
}

#gnb>li{
    position: relative;
}
#gnb>li>a{
    display:block;
    width: 200px; 
    height: 50px;
    font: bold 18px/3 "Manrope"; 
    color: #222; 
    box-sizing: border-box;
    padding-right: 40px;
    text-align: right;
}

#gnb>li:hover>a{
    background: #111;
    color: #fff;
}

#gnb em{
    display: inline-block;
}

#gnb em i{
    margin-right: 20px;
}

/* 2nd depth */
/* within gnb(ul) look at internal ul */
/* when hover over li (menu item), change ul opacity  */
#gnb ul{
    position: absolute; /*자식은 absolute하여 다른 아이들에게 효과가 없게 */
    left: 0px;
    top: 0px;
    visibility: hidden;
    opacity: 0; /*invisible */
    /* animation is coded into before state. */
    /* we apply transition to all properties that are changing for 0.4 seconds */
    transition: 10ms; 
}

#gnb>li:hover ul{
    opacity: 0.8; /* now visible */
    left: 200px; /*move left to make it not show up on top of menu*/
    visibility: visible;
}

/* changing anchor to a box to give form/size */
#gnb ul a{
    display: block;
    width: 200px;
    height: 40px;
    background-color: #000;
    text-align: center;
    border-bottom: 3px solid #00704A;
    font: bold 16px/2.5 arial;
    color: #fff;
    box-sizing: border-box;
    /* padding-left: 50px; */
    transition: 1s;
}

/* when hovering over anchor */
#gnb ul a:hover{
    /* color: #000; */
    background-color:#00704A;
}

/* SNS button location */
#sns{
    position: fixed;
    top: 60px;
    right: 50px;
}
#sns li{
    float: left;
    margin-right: 30px;
}
#sns .fa-brands{
    font-size: 30px ;
    opacity: 0.3;
    transform: scale(1);
    transition: 1s;
}
#sns .fa-brands:hover{
    opacity: 1;
    transform: scale(1.8);
}



/* 텍스트 박스 */
.txtBox { 
    width:200px; 
    height:100px; 
    position:fixed; 
    bottom:100px; 
    right:0px; 
    z-index: 10; 
    transition: 0.5s;
}
.txt { 
    position:absolute;  
    font-size:40px; 
    font-family:play; 
    color:black; 
    letter-spacing:-2px;
}
.txt b { 
    font: 80px arial; 
    color:white;
    font-family:'Galada';
}
#side:hover .txtBox{
    opacity: 0;
    /* Move the textbox out of the way */
    transform: translatex(200px); 
}


/* contents 레이아웃 */
#side { 
    width:300px; 
    height:400px; 
    position:fixed; 
    bottom:-200px; 
    right:-100px; 
    background:#00704b6e; 
    opacity:0.5; 
    transition:all 1s;
    border-radius: 30px;
}
#side:hover { 
    right:0px;
    bottom:0; 
    opacity:1;
}
#side .con{
    width: 200px;
    height: 100%;
    position: absolute;
    left: 150px;
    bottom: 0px;
    box-sizing: border-box;
    padding: 10px;
}
#side:hover .con{
    left: 50px;
}

/* Thumbnails 레이아웃 */
#side .con p{
    width: 300px;
    height: 100px;
    position: absolute;
    left: 50px;
}
#side .con p em{
    display: block;
    font: bold 16px/1.7 arial;
    color: #00bd7d;
}

#side .con p img{
    width: 200px;
    height: 125px;
    opacity: 0.3;
    transition: 0.5s; 
}

#side .con p img:hover{
    opacity: 1;
}

#side .con p:nth-child(1){
    bottom: 250px;
    transform: translatex(100px);
    transition: 1s;
}

#side .con p:nth-child(2){
    bottom: 100px;
    transform: translatex(200px);
    transition: 2s;
}

#side:hover .con p { 
    transform:translateX(-50px) translateY(-25px);
}