@charset "utf-8";

/* -------------- 0p css -------------------*/
@font-face {
    font-family: 'GowunDodum-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;    
}
@font-face {
    font-family: 'CallifontSamulnori-Medium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2505@1.0/CallifontSamulnori-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* @import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Instrument+Serif:ital@0;1&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Mr+Bedfort&display=swap');

/*.mr-bedfort-regular {
  font-family: "Mr Bedfort", cursive;
  font-weight: 400;
  font-style: normal;
}
 */


/* -------------- reset -------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: black;
}

body {
    /* border: 1px solid red; */
    line-height: 200%; 
    min-height: 100vh; /*임시*/
    /* background-color: #18574e; */
    /* background-color: black; */
    background-image: url(images/bg2.png) ;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100vw;
    
}
   /* 스크롤바 색상 변경 */
body::-webkit-scrollbar {
    width: 2px; /* 스크롤바 너비 */
    }
body::-webkit-scrollbar-track {
    background: rgba(20,110,114); /* 스크롤바 트랙 색상 */
    border-radius: 10px;
    }
body::-webkit-scrollbar-thumb {
    background-color: white; /* 스크롤바 손잡이 색상 */
    border-radius: 10px;
    /* border: 2px solid #bbb; 손잡이 테두리 */
    }
body::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 마우스 오버 시 색상 */
    }



 /* ---------------- header --------------- */
header {
    position: absolute;   /* 바디는 기본이 relative라 그냥 두어도 됨     */
    left: 50%;
    transform: translateX(-50%);
    top: 0px;     /* padding: 20px auto; */ 
    z-index: 9998;
    width: 100%; 
}

header > h1 {
    /* border: 1px solid red;       */
    padding-top: 7% ; 
    animation: wave 1.5s infinite alternate cubic-bezier(.87,.24,.72,.53);   
         }

header > h1 > a {
    /* border: 1px solid red;     */
    display: block;
    max-width: 300px; 
    margin: 0 auto;   
}

header > h1 > a > img {
    width: 100%;
}

/* header:hover + #navbar {
    top:0px !important;
} */

/* header:hover {
    top: -500px ;
}  */

@keyframes wave {
      0%, 100% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(25px);
      }   
    }






.topnav {
    /* border: 1px solid rebeccapurple; */
    width: 100vw;
    overflow: hidden;    
    z-index: 9999;
    display: flex;
    justify-content: center;
    /* gap: 30px;      */
    position: fixed;
    top: -200px ;
    left : 50%;
    transform: translateX(-50%);
    height: auto;
    padding-top: 50px;
    /* background-color: #ffa955; */
}


.topnav a {    
    /* border: 5px 1px solid red; */
    /* float: left; */
    display: block;          
    color: #f2f2f2;
    text-align: center;        
    padding : 15px 0px 5px 0px ;
    font-size: 110%;
    width: 150px;
    font-weight: 150;
}
.icon {
    display: none !important;
}
 

.topnav a.logo {
    width: 130px;
    /* border: 1px solid red; */
    padding: 0;
}

.topnav a.logo > img {
    width: 100%;
    /* border: 1px solid red; */
}

.topnav a:hover,
.topnav a.active { 
    /* background-color: white; */    
    text-transform: uppercase !important;
    /* text-shadow: 2px 2px 1px #ffa955; */
    color: white !important;
    font-weight: normal !important;    
}








/* ------ Fullscreen Video Start ------- */
.vbox { 
    position: relative;
    min-width: 100%;
    min-height: 100vh;  
    overflow: hidden;     
    
    }

#myVideo {
    position: absolute;
    top : 0;
    left: 0;
    /* transform: rotate(180deg);     */
    width: 100%;
    height: 100%; /* 높이는 100%로 유지 */    
    object-fit: cover; /* 영상의 크기를 맞추되 잘리지 않도록 */
    object-position: center;
    pointer-events: none;
    z-index: -1;        
}
#myVideo > source {}

.button {
    /* border: 10px solid blue; */    
    position: absolute;
    top: 65vh;
    left: 50vw;
    transform: translateX(-50%);
    text-align: center;
    border: 1px solid white;
    border-radius: 20px;
    padding: 10px 20px;
    color: white; 
    cursor: pointer;
    z-index: 2;   
}

.button:hover {
    background-color: rgba(255,255,255);
    color: black;
    font-weight: lighter;
}


/* ------ 영상 하단 텍스트 부분 ------ */
.content {
    position: absolute;
    bottom: 0;
    background-color: rgba(0,0,0,0.2);
    color: #f1f1f1;
    padding: 20px;
    width: 100%;   /*fix 사용하면 쪼그러든다*/
}
.content > h1 {}
.content > p {}
/* .content #myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    background-color: black;
    color: whitesmoke;
    border: none;
    cursor: pointer;
}
.content #myBtn:hover {
    background-color: #ddd;
    color: black; */

  


/* ------ 영상 끝나고 자세히 보기 인트로 부분 ------ */

.sec {
    display: flex;
    flex-direction: column;    
    margin:0px auto ;
    width: 60%;
    min-height: 100vh ;
    /* color: white;     */
    padding-bottom: 110px;

    }
   

.art {
    /* border: 1px solid red; */
    text-align: center;
    margin-top: 150px;
}

.art1 {
    margin-top: 150px;
}
.art3 {
    padding-bottom: 200px;    
}


.art > h1 {
    /* border: 1px solid red; */
    margin: 5px auto;
    /* text-align: left; */
    border-bottom:5px solid #ffd63a;
    border-radius: 50%;
    /* color: #ffa955; */
    color: black;    
    width: 170px;
    /* font-family: '행복고흥L'; */
    font-family: 'CallifontSamulnori-Medium';
    font-size: 200%;    
    font-weight: normal;
    padding-bottom: 5px;
    font-style: italic;
}
.art1 > h1 {
     font-family: 'Times New Roman', Times, serif;
}


.art > p {
    font-family: 'GowunDodum-Regular';
}




/* ------ 푸터분 ------ */
footer {
    background-color:  rgba(20,110,114,0.7);
    color: white ;
    font-size: 80%;
    text-align: center;
}








/* ------------------------------ 미디어 쿼리 ------------------------ */
/* 우선순위 이슈로, 랜드스케이프 대응을 아래로 옮김! */

@media screen and (max-width: 900px) {
    body {
        background-size: 160%;
        background-position: left bottom;
    }
    header {
        /* display: none; */
        width: 50%;
        padding-top: 20%;
    }
    .topnav {
        /* border: 1px solid red;  */
        flex-wrap: wrap;
        padding-top: 30px;              
    }

    .topnav a:nth-child(2) {
        display: none;
    }

     .topnav a:nth-child(1) {
        /* border: 1px solid red;  */
        width: 100%;
    }
    .topnav a:nth-child(1) > img {
        width: 30%;
    }
    
    .topnav a {
        /* border: 1px solid red;   */
        padding: 10px 0px ;
        width: 22%;
        font-size: 90%;
        font-weight: bold;
        text-transform: capitalize;
        line-height: 100%;
        align-self: center;
    }    

     .topnav a:nth-child(6){
        width: 34%;
    }
    .button {
    position: absolute;
    top : 45vh
  }
     .sec {
        padding-bottom: 50px;
     }
    .art {
        margin-top: 25%;
    }

    .art1 {
        margin-top: 150px;
    }

    .art3 {
        padding-bottom: 130px;
    }        
}


@media screen and (max-width: 900px) and (orientation :landscape) {
     header {
        /* display: none; */
        width: 50%;
        padding-top: 0;
     }
     
    .vbox {   
    position: relative;      
    width: 100%;
    min-height: 110vh;
    overflow :hidden
    }
    #myVideo {
    width: 100%;
    height: 100%; /* 높이는 100%로 유지 */    
    object-fit: cover; /* 영상의 크기를 맞추되 잘리지 않도록 */
    }
    
    .content {
        position: absolute;
        bottom: 0;
    padding: 5px 10px;
    }
    .content >  h1, .content > p {
    font-size: 60%;
    padding: 0;
  } 
  .button {
    position: absolute;
    top :65vh
  }

}




@media screen and (max-width: 400px) {
   .topnav a {
    font-size: 80%;
    width: 24%;
   }

 .topnav a:nth-child(3){
        width: 18%;
        padding: 10px 0;
    }
}