@charset "UTF-8";

@import url(reset.css);
@import url(font.css);


.centerbox1200 {width: 1200px;margin: 0 auto;}
body.fix{overflow: hidden;} 

header h1 {position: fixed; z-index: 2; left: 50%; top: 0%; transform: translateX(-50%);z-index: 2;}



header {position: fixed;left:50%;top:0%;transform: translateX(-50%);z-index: 22222;}


header nav .gnb {display: flex; gap: 100px; justify-content:space-between;margin-top: 80px; flex-grow: 1;}

header nav .gnb li:nth-child(2){}
header nav .gnb li:nth-child(3){}
header nav .gnb li.on a {color: red;}

header nav .gnb li {height: 50px;line-height: 50px;font-weight: bold;font-size: 50px;}

header nav .gnb li a {color: #fff;font-size: 22px;}

#section1 {background: url(../images/bg1.jpg) ;background-size: cover;width: 100%;height: 100vh;position:relative;color: #fff;}

#section2 {background: url(../images/bg2png.png) ;background-size: cover;width: 100%;height: 100vh;position:relative;color: #fff;}

#section3 {background: url(../images/12.png) ;background-size: cover;width: 100%;height: 100vh;position:relative;color: #fff;}

#section4 {background: url(../images/bg4.jpg) ;background-size: cover;width: 100%;height: 100vh;position:relative;color: #fff;}

#section5 {background:#000 ;background-size: cover;width: 100%;height: 100vh;color: #fff;}


#section1 article {position: absolute; left: 50%;top:30%;transform: translateX(-50%);display: flex; }

#section1 article h2 {font-size: 400px;margin-bottom: 200px; font-family: 'goorm-sans-bold';}

#section1 article .hide_box {margin-top:100px;display: flex;flex-direction: column;width: 0;height: 0;overflow: hidden;transition: 1s;/* animation: moVe 2s forwards */;}
/* @keyframes moVe {
    0% {left:-300px}
    50%{left:-500px}
    100%{left:-1000px}
} */


#section1 article:hover .hide_box {width: 400px;height: 400px;}


#section1 article .hide_box p {font-size: 60px;color: #c4c4c4;border-bottom: 1px solid #fff;;}

#section1 article .hide_box span {color: #dfbda5;font-size: 60px;}

#section1 article .hide_box em {color: #94b970;font-size: 24px;font-style: normal;}






#section2 article {position: absolute; left: 50%;top:20%;transform: translateX(-50%); display: flex; transition: 1s;width: 350px;}

#section2 article h2 {font-size: 400px;margin-bottom: 200px;color: #c06a00;;}

#section2 article .hide_box {margin-top:100px;display: flex;flex-direction: column; transition: 1s; position: absolute; right: 0; top: 0;opacity:0; visibility: hidden;}
/* @keyframes moVe {
    0% {left:-300px}
    50%{left:-500px}
    100%{left:-1000px}
} */

#section2 article:hover {width: 650px;}
#section2 article:hover .hide_box {opacity: 1;visibility: visible;}


#section2 article .hide_box p {font-size: 60px;color: #c06a00;;border-bottom: 1px solid #fff;;}

#section2 article .hide_box span {color: #dfbda5;font-size: 60px;}

#section2 article .hide_box em {color: #94b970;font-size: 32px;font-style: normal;}





#section3 figure {position: absolute;left: 50%;top:30%;cursor: pointer; transform: translateX(-50%);}

#section3 figure:hover {animation:section3Ani 0.3s forwards}
@keyframes section3Ani {
    0% { transform:translateX(-50%) scale(1.1);}
    20% { transform:translateX(-50%) scale(1);}
    40% { transform:translateX(-50%) scale(1.2);}
    60% { transform:translateX(-50%) scale(1);}
}

#section3 >div  {height: 100%;}
#section3 .click {}

 #section3 .img_box {width: 100%;height: 100%;display: flex;justify-content: center; align-content: center; flex-wrap: wrap;flex-grow: 1; gap:30px; display: none;} 

/* #section3 .img_box {width: 300px;height: 300px;} */
#section3 .img_box li {width: 20%;height: 300px;border: 1px solid #000;background: #333;font-size: 100px;text-align: center;line-height: 300px;transition: 0.3s;}
#section3 .img_box li img {width: 100%;height: 100%;object-fit: cover;}
#section3 .img_box li:hover {transform: scale(1.3);} 

#section3 .close {width: 20%;position: absolute;right:50px;top:50px;z-index: 99;cursor: pointer;display: none; width: 100px;z-index: 3;}

#section3 .close img {width: 100%;}

#section3 .close:hover {transform: scale(1.3);}


#section4 .mySwiper {position: absolute;width: 50%;top: 30%;left:25%;height: 500px;}
.swiper-slide {background: #fff;color: #000;font-size: 100px;text-align: center;line-height: 500px;}

.swiper-slide img {width: 100%;height: 100%;}


#section4 h2 {font-size: 100px; text-align: center;padding-top: 150px;}



#section5 .text {font-size: 200px;margin: 0 auto;text-align: center;line-height: 200px;}

#section5 .text a {color: #fff; }

.gallery_modal {position: fixed;width: 100%;height: 100vh; z-index: 300;background: rgba(0,0,0,0.9);left:0;top:0;display: flex;justify-content: center;align-items: center;display: none;}

.gallery_modal figure {position: absolute; left:50%;top:50%}

.gallery_modal2 {position: fixed;width: 100%;height: 100vh; z-index: 300;background: rgba(0,0,0,0.9);left:0;top:0;display: flex;justify-content: center;align-items: center;display: none;}

.gallery_modal2 figure {position: absolute; left:50%;top:50%;}

.page_progress {position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 10;}
.page_progress .bar {position: absolute; width: 0; height: 100%; background: linear-gradient(to right,red, blue);}


.page_progress2 {position: fixed; width: 15px; height: 200px; left: 50px; top: 50%; transform: translateY(-50%); border-radius: 50px; background: #fff; overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.1); border: 1px solid #ddd; }
.page_progress2 .bar2 {position: absolute; width: 100%; height: 0%; background: linear-gradient(to top,#000, blue   ); bottom: 0;animation: prog2 0.5s infinite alternate;}
@keyframes prog2 {
  0% {bottom: 0;}
  100% {bottom: -15px}
}
.page_progress2 .bar2:before {content: ""; width: 100%; height: 20px; position: absolute; top: 0; left: 0; background: url('../images/wave.png'); background-repeat: repeat-x; top: -10px; animation: wave 0.5s infinite linear;}
.page_progress2 .bar2:after {content: ""; width: 100%; height: 20px; position: absolute; top: 0; left: 0; background: url('../images/wave.png'); background-repeat: repeat-x; top: -8px; animation: wave 0.5s infinite linear; opacity: 0.5; animation-delay: 0.25s;}

@keyframes wave {
    0% {background-position: 0 0;}
    100% {background-position: -37px 0;}
}


footer {padding: 100px;background: red;color: #fff;}