@charset "UTF-8";

/* header */
header {}
.header {}
header h1 { position: fixed; top:40px; left: 50px; z-index: 20; }
header h1 a { color:#fff; text-shadow: 0 0 2px rgba(0,0,0,1); }
header h1 a span { display: block; text-align: center; }

.menu_btn {
  position: fixed; top:40px; right:50px;
  width: 40px; height: 40px; z-index: 20; }
.menu_btn span { display: block; width: 40px; height: 3px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,1); margin:5px 0; }
.menu_btn span:nth-child(1) { }
.menu_btn span:nth-child(2) { position: relative; width: 20px; float: right; transition: 0.3s ease-in; }
.menu_btn span:nth-child(2):after { 
  position: absolute; content: 'MENU'; right:0; bottom: -15px; font-size: 10px; opacity: 0;  transition: 0.3s ease-in; color:#fff; }

.menu_btn:hover span:nth-child(2):after { opacity: 1; }
.menu_btn:hover span:nth-child(2) { width: 40px; }


.menu_btn.open span { position: absolute; width: 40px; transition: 0.2s ease-in;}
.menu_btn.open span:nth-child(1) { transform: rotate(45deg); }
.menu_btn.open span:nth-child(2) { transform: rotate(-45deg); }
.menu_btn.open span:nth-child(2):after { display: none; }

.menu_bg { position: fixed; top:0; left: -100%; width: 100%; height: 100%; background:rgba(0,0,0,0.9); z-index: 19; transition: 0.3s ease-in; }

.menu_bg_inner { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
nav {  }
nav ul {}
nav li { padding: 20px 0; }
nav a { font-size: 16px; color:#b8b8b8; transition: 0.2s ease-in; }

nav a span { display: inline-block; position: relative; font-size: 30px; color:#fff; margin-top: 10px; text-indent: 20px;}
nav a span:after { position: absolute; bottom: -10px; left: 0; content: ""; width: 0%; height: 3px; background: #fff; transition: 0.3s ease-in;}
nav a:hover span:after { width: 100%; }


.menu_btn.open + .menu_bg { left: 0;}







/* swiper 슬라이더 부분 */
.swiper { height: 100vh; }
.swiper-wrapper { }
.swiper-slide { position: relative; overflow: hidden; }


.bg { width: 100%; height: 100vh; opacity:0; transform: scale(1.1) rotate(3deg); 
  transition: opacity 300ms ease-in, transform 1000ms ease-in; }
.swiper-slide-active .bg { opacity:1; transform: scale(1) rotate(0); }

.bg video { width: 100%; height: 100%; object-fit: cover; }
.bg_opacity { position: absolute; top:0; left: 0; width: 100%; height: 100%; 
  background-image: radial-gradient(rgba(0,0,0,0) 17%, rgba(0,0,0,0.8)100%);
  opacity: 1; transition: 1000ms ease-in }
.swiper-slide-active .bg_opacity {  opacity: 0.3; }
 
.section1 { background: #113c50; }
.section2 { background: #CF9E57; }
.section3 { background: #000; }
.section4 { background: #93ADCC; }
.section5 { background: #752c24; }
.section6 { background: #58E6FD; }

.section2 .bg { background:url(../media/hotel.jpg) no-repeat center center / cover; }
.section4 .bg { background:url(../media/hamburger.jpg) no-repeat center center / cover; }
.section6 .bg { background:url(../media/hospital.jpg) no-repeat center center / cover; }

.intro {  color: #fff;
  position: absolute; top:30vh;  width:900px; left:50%; transform: translateX(-50%); z-index: 9; }
.intro.right { text-align: right;}

.section1 .intro { width: 700px; }

@media (max-width:920px ){
  .intro { width: 95%;}
}
  .cate { display: inline-block; font-size: 18px; transform:translate(0,-100px); opacity:0; transition: .3s  ease-in; }
  .cate strong { font-weight: bold; }

  .title { font-size: 50px; font-weight: bold; padding: 30px 0; 
    transform: translate(150px,0); opacity:0; transition: .5s .4s ease-in;}
  .intro.right .title { transform: translate(-150px,0); }
   .title strong { font-size: 60px; }
  .desc { font-size: 18px; line-height: 1.7; padding-bottom: 20px; opacity:0; transition: .5s .4s ease-in; }
  
  .section1 .desc { text-align: right; font-size: 15px; line-height: 1.7;  }

  .swiper-slide-active .cate { transform: translate(0, 0); opacity: 1;}
  .swiper-slide-active .title { transform: translate(0, 0); opacity: 1; }
  .swiper-slide-active .intro.right  .title { transform: translate(0, 0); opacity: 1;}
  .swiper-slide-active .desc { opacity: 1;}
  .swiper-slide-active .btn_wrap { transform: translate(0, 0); opacity: 1; }

  .btn_wrap { transform: translate(0, 50px); opacity: 0; transition: .3s .8s ease-in;  }
  .btn_wrap a { position: relative; display: inline-block; padding: 20px 10px; }

 .btn_wrap a:before, .btn_wrap a:after { position: absolute; content: "";  height: 4px;  bottom: 0;   }  


  .btn_wrap a:before { right:0; width: 100%; background:#fff; transition:width 0.3s 0.3s ease-in; }
  .btn_wrap a:after { left: 0; width: 0; background: red; transition: 0.3s ease-in; }
  
  .btn_wrap a:hover::before { width: 0%; transition-delay: 0ms; }
  .btn_wrap a:hover:after { width: 100%; transition-delay: 300ms; }



  .section2 .intro, .section5 .intro, .section6 .intro { color: #000; }

  .page_control { display: flex; align-items: center; gap:10px;
  position: fixed; bottom: 20px; right: 20px; z-index: 10; }
  .page_control > div { display: inline-block; color: #fff; cursor: pointer; }
  .page_control i { order:1; position: relative; display: inline-block; width: 80px; height: 2px;  background: red; }
  .page_control i:before, .page_control i:after { position: absolute;  content: "";  height: 2px; right:0;}
  .page_control i:before { width: 80px;  background: #fff; transition: 200ms ease-in; }
  .page_control i:after { width: 0;  background: red; transition: 200ms ease-in;}

  .nextBtn { order:2; }
  .prevBtn:hover, .nextBtn:hover { color:red; }
  .prevBtn:hover ~ i:before { width: 0; }
  .nextBtn:hover ~ i:after { width: 80px }

  .swiper-pagination { color:#fff; }
  .swiper-pagination-total { opacity: .5;}