/*=========================
/////// 2022/09/28 ///////
=========================*/


/* 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{ font-family: 'Poppins', sans-serif;}
/* //폰트 */
.dn{ display: none !important;}
html,body,.pc,.mo {position: relative; height: 100%;}
video::-webkit-media-controls{
  display: none !important;
}

.swiper { width: 100%; height: 100%;}
.swiper-slide { text-align: center;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);
}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0 auto;}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{ right: 15px;}
.swiper-pagination-bullet{ width: 10px; height: 10px; margin: 12px 5px !important; background: none; border: 1px solid #fff; opacity: 1;}
.swiper-pagination-bullet-active{ background: #fff;}


/* PC (해상도 1024px)*/ 
@media all and (min-width:992px) {

  .logo{ position: fixed; top: 0; left: 0; width: 100%; padding: 35px 0; background: none; z-index: 10; text-align: center;}
  .logo .img_box{ display: inline-block;}
  .logo .img_box img{ max-width: 100%;}

  #fullpage .section{ position: relative;}
  #fullpage .section .section_bg{ width: 100vw; height: calc(var(--vh, 1vh) * 100);}
  #fullpage .section video{ width: 100%; max-width: 100%; height: 100%; object-fit: cover;}

  #fullpage .section .text_box:not(.page_9 .text_box){ position: absolute; top: 53%; left: 0; width: 100%; transform: translateY(-50%); color: #fff; font-size: 20px; text-align: center;}
  #fullpage .section .text_box img{ width: 480px;}

  #fullpage .page_1 .text_box{ color: rgb(231, 231, 231);}
  #fullpage .page_1 .text_box p{ padding: 10px 0 0 0; font-size: 20px;}


  #fullpage .page_2.section .inner_wrap .text_box{ top: auto; bottom: 13%; transform: none;}
  #fullpage .page_2 .text_box .text_cont{ width: 90%; margin: 0 auto; color: #fff; font-size: 0; text-align: left;}
  #fullpage .page_2 .text_box .text_cont div{ width: 50%; display: inline-block; padding: 0 0 0 10px; width: 50%; vertical-align: middle;}
  #fullpage .page_2 .text_box .text_cont .text_tit h2:first-child{ margin: 0 0 10px 0;}
  #fullpage .page_2 .text_box .text_cont .text_tit h2{ font-size: 64px; letter-spacing: -2px; line-height: 1.1;}
  #fullpage .page_2 .text_box .text_cont .text_tit h2 span{ color: #99ff00;}
  #fullpage .page_2 .text_box .text_cont .text_desc p{ font-size: 19px; font-weight: 400; letter-spacing: 0; line-height: 1.5;}


  #fullpage .page_3 .section_bg{ background: url(/img/page_3__bg.png) no-repeat 0 center; background-size: cover; background-position: 50% 50%; background-color: #99ff00;}
  #fullpage .page_3 .text_box{ top: 50%; display: flex; flex-direction: column; justify-content: space-between; padding: 150px 0 100px 0; height: 100%; color: #191919;}
  #fullpage .page_3 .text_box .text_top h2{ color: #191919; font-size: 64px; font-weight: 700; line-height: 1.3;}
  #fullpage .page_3 .text_box .text_middle{ color: #191919; font-size: 100px; font-weight: 700;}
  #fullpage .page_3 .text_box .text_middle span:first-child{ color: #99ff00;}

  #fullpage .page_3 .text_box .text_bottom{width: 60%; margin: 0 auto; font-size: 0;}
  #fullpage .page_3 .text_box .text_bottom div{display: inline-block; width: 50%; vertical-align: middle;}
  #fullpage .page_3 .text_box .text_bottom .bottom_img{ text-align: right;}
  #fullpage .page_3 .text_box .text_bottom .bottom_img img{ margin: 0 0 0 auto; width:55%;}
  #fullpage .page_3 .text_box .text_bottom .bottom_list{ padding: 0 0 0 20px; color: #191919; font-size: 18px; font-weight: 400; line-height: 1.2; text-align: left; }
  #fullpage .page_3 .text_box .text_bottom .bottom_list ul li span:first-child{ font-size: 24px; vertical-align: middle;}


  #fullpage .page_4 .text_box h2{ margin: 0 0 30px 0; font-size: 64px; font-weight: 700; line-height: 1.3; letter-spacing: -1.5px;} 
  #fullpage .page_4 .text_box h2 span:last-child{ color: #99ff00;}
  #fullpage .page_4 .text_box p{ font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: -.2px;}


  #fullpage .section.page_5 .inner_wrap .text_box{ top: auto; transform: none; bottom: 16%;}
  #fullpage .page_5 .text_box .text_cont{ width: 80%; margin: 0 auto; font-size: 0;}
  #fullpage .page_5 .text_box .text_cont div{ display: inline-block; vertical-align: top; text-align: left;}
  #fullpage .page_5 .text_box .text_cont .text_tit{ width: 55%;}
  #fullpage .page_5 .text_box .text_cont .text_tit h2{ font-size: 64px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.1;}
  #fullpage .page_5 .text_box .text_cont .text_tit h2 span{ color: #99ff00;}
  #fullpage .page_5 .text_box .text_cont .text_list{ width: 45%; padding: 10px 0 0 80px;}
  #fullpage .page_5 .text_box .text_cont .text_list ul{ font-size: 18px; font-weight: 400; line-height: 1.1;}
  #fullpage .page_5 .text_box .text_cont .text_list ul li span:first-child{ padding: 0 5px 0 0; color: #99ff00; font-size: 24px; vertical-align: middle; }


  #fullpage .page_6 .text_box .text_cont,
  #fullpage .page_7 .text_box .text_cont{ width: 72%; margin: 0 auto;}
  #fullpage .page_6 .text_box .text_cont div,
  #fullpage .page_7 .text_box .text_cont div{ text-align: left;}
  #fullpage .page_6 .text_box .text_cont .text_tit,
  #fullpage .page_7 .text_box .text_cont .text_tit{ padding: 10px 10px 60px; border-bottom: 1px solid;}
  #fullpage .page_6 .text_box .text_cont .text_tit h2,
  #fullpage .page_7 .text_box .text_cont .text_tit h2{ font-size: 62px; font-weight: 300; line-height: 1.1; letter-spacing: -1.5px; vertical-align: top;}
  #fullpage .page_6 .text_box .text_cont .text_tit h2 span,
  #fullpage .page_7 .text_box .text_cont .text_tit h2 span{ color: #99ff00; font-weight: 700;}
  #fullpage .page_6 .text_box .text_cont .text_list,
  #fullpage .page_7 .text_box .text_cont .text_list{ padding: 60px 10px 10px; font-size: 18px; font-weight: 400; line-height: 1.1; letter-spacing: 0;}
  #fullpage .page_6 .text_box .text_cont .text_list ul li span:first-child,
  #fullpage .page_7 .text_box .text_cont .text_list ul li span:first-child{ color: #99ff00; font-size: 24px; vertical-align: middle;}

  #fullpage .page_7 .text_box .text_cont .text_tit h2{ font-size: 64px; line-height: 1.15;}


  #fullpage .page_8 .text_box .text_cont{ width: 100%; display: flex;}
  #fullpage .page_8 .text_box .text_cont .text_list{ width: calc(100% / 3); padding: 0 0 0 80px; text-align: left;}
  #fullpage .page_8 .text_box .text_cont .text_list .list_tit{ margin: 0 0 20px 0; color: #99ff00; font-size: 42px; font-weight: 600; line-height: 2; letter-spacing: -1px;}
  #fullpage .page_8 .text_box .text_cont .text_list ul{ font-size: 18px; font-weight: 400; line-height: 1.1; letter-spacing: 0;}
  #fullpage .page_8 .text_box .text_cont .text_list ul li span:first-child{ color: #99ff00; font-size: 24px; vertical-align: middle;}


  #fullpage .page_9 .inner_wrap{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 100px 0 0 0; box-sizing: border-box; }
  #fullpage .page_9 .text_box{ width: 18%; color: #6e6e6e; text-align: left;}
  #fullpage .page_9 .text_box h3{ margin: 0 0 20px 0; color: #99ff00; font-size: 42px; font-weight: 600; line-height: 2; letter-spacing: -2px;}

  #fullpage .page_9 .text_box .text_top,
  #fullpage .page_9 .text_box .text_middle,
  #fullpage .page_9 .text_box .text_bottom{ padding: 0 15px 35px 0; font-size: 18px; font-weight: 300; line-height: 1.5; letter-spacing: .3px;}

  #fullpage .page_9 .text_box .text_top{ border-bottom: .5px solid #6e6e6e;}
  #fullpage .page_9 .text_box .text_top strong{ font-weight: 600;}
  #fullpage .page_9 .text_box .text_middle{ padding-top: 25px;}
  #fullpage .page_9 .text_box .text_bottom strong{ font-weight: 600; }
  #fullpage .page_9 .img_box{ width: 72%; margin: 0 0 0 40px;}
  #fullpage .page_9 .img_box img{ width: 100%;}


  #fullpage .page_10 .section_bg{ background: url(/img/page_10__bg.png) no-repeat 0 center; background-size: cover; background-color: #696868;}
  #fullpage .page_10 .section_bg::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.1);}
  #fullpage .page_10.section .inner_wrap .text_box{ top: auto; bottom: 50px; transform: none; font-size: 14px; font-weight: 300; letter-spacing: -.2px;}
  #fullpage .page_10 .text_box h2 img{ width: 400px;}
  #fullpage .page_10 .text_box .text_bottom{ padding: 200px 0 0 0;}
  #fullpage .page_10 .text_box .text_bottom .img img{ width: 120px;}
  #fullpage .page_10 .text_box .text_bottom .contact{ padding: 50px 0 0 0; line-height: 2;}
  #fullpage .page_10 .text_box .text_bottom .contact p:first-child{ font-size: 16px;}
  #fullpage .page_10 .text_box .text_bottom .address{ padding: 35px 0 0 0;}


}
@media all and (max-width:991px) {
  .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{ display: none;}

  .logo{ position: fixed; top: 0; left: 0; width: 100%; padding: 25px 0; background: none; z-index: 10; text-align: center;}
  .logo .img_box{ display: inline-block;}
  .logo .img_box img{ max-width: 25vw;}

  #fullpage .section{ position: relative; width: 100vw; height: calc(var(--vh, 1vh) * 100);}
  #fullpage .section .section_bg{}
  #fullpage .section video{ width: 100%; max-width: 100%; height: 100%; object-fit: cover;}

  #fullpage .section .text_box{ position: absolute; top: 50%; left: 0; width: 100%; padding: 0 20px; transform: translateY(-50%); color: #fff; font-size: 20px; text-align: center;}
  #fullpage .section .text_box img{ width: 260px;}
  

  #fullpage .page_1{ background: url(/whistling_gif/intro.gif) no-repeat center; background-size: cover;}
  #fullpage .page_1 .text_box{ color: rgb(231, 231, 231);}
  #fullpage .page_1 .text_box p{ padding: 0; font-size: 12px;}


  #fullpage .page_2{ background: url(/whistling_gif/page_2.gif) no-repeat center; background-size: cover;}
  #fullpage .page_2.section .inner_wrap .text_box{ margin: 40% 0 0 0; text-align: left;}
  #fullpage .page_2 .text_box .text_cont .text_tit{ font-size: 30px; line-height: 1.2; letter-spacing: -.3px;}
  #fullpage .page_2 .text_box .text_cont .text_tit h2{ font-weight: 600; }
  #fullpage .page_2 .text_box .text_cont .text_tit h2:first-child{ color: #99ff00;}
  #fullpage .page_2 .text_box .text_cont .text_tit h2 span{ color: #99ff00;}
  #fullpage .page_2 .text_box .text_cont .text_desc{ width: 95%; padding: 10px 0 0 0; font-size: 11.7px; font-weight: 300; line-height: 1.4;}


  #fullpage .page_3{ background:#99ff00;}
  #fullpage .page_3.section .inner_wrap .text_box{ top: 53%; display: flex; flex-direction: column; justify-content: center; height: 100%; color: #191919;}
  #fullpage .page_3 .text_box .text_top{ padding: 5% 0;}
  #fullpage .page_3 .text_box .text_top h2{ color: #191919; font-size: 27px; font-weight: 600; line-height: 1.3; letter-spacing: -.7px;}
  #fullpage .page_3 .text_box .text_middle{ padding: 5% 0; color: #191919; font-size: 72px; font-weight: 700;}
  #fullpage .page_3 .text_box .text_middle span:first-child{ font-size: 0;}

  #fullpage .page_3 .text_box .text_bottom{ display: flex; flex-direction: column-reverse; width: 100%; margin: 0 auto; padding: 15% 0 0 0; color: #191919; font-size: 0;}
  #fullpage .page_3 .text_box .text_bottom div{display: inline-block; width: 100%; vertical-align: middle;}
  #fullpage .page_3 .text_box .text_bottom .bottom_img{ width: 80%; margin: 0 auto; padding: 10px 0 0 0; text-align: center;}
  #fullpage .page_3 .text_box .text_bottom .bottom_img img{ width:100%; padding: 2%;}
  #fullpage .page_3 .text_box .text_bottom .bottom_list{ width: 56%; margin: 0 auto; padding: 20px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: 12px; font-weight: 400; line-height: 19px; text-align: left; letter-spacing: -.3px; white-space: nowrap;}
  #fullpage .page_3 .text_box .text_bottom .bottom_list ul li span:first-child{ font-size: 12px; vertical-align: middle;}

  
  #fullpage .page_4{  background: url(/whistling_gif/page_4.gif) no-repeat center; background-size: cover;}
  #fullpage .page_4.section .inner_wrap .text_box{ display: flex; flex-direction: column; justify-content: center; text-align: left;}
  #fullpage .page_4 .text_box h2{margin: 0 0 65% 0; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -1px;} 
  #fullpage .page_4 .text_box h2 span{ font-weight: 400; letter-spacing: -1.5px;}
  #fullpage .page_4 .text_box h2 span:last-child{ color: #99ff00; font-weight: 600;}
  #fullpage .page_4 .text_box p{ padding: 35px 0 0 0; margin: 0 5% 0 0; border-top:1px solid ; font-size: 12px; font-weight: 400; line-height: 1.7; letter-spacing: -.1px; white-space: nowrap;}


  #fullpage .page_5{ background: url(/whistling_gif/page_5.gif) no-repeat center; background-size: cover;}
  #fullpage .section.page_5 .inner_wrap .text_box{ display: flex; align-items: flex-end; width: 100%; height: 58%; text-align: left;}
  #fullpage .page_5 .text_box .text_cont .text_tit{ padding: 0 0 10px 0;}
  #fullpage .page_5 .text_box .text_cont .text_tit h2{ font-size: 30px; font-weight: 600; letter-spacing: -.5px;}
  #fullpage .page_5 .text_box .text_cont .text_tit h2 span{ color: #99ff00;}
  #fullpage .page_5 .text_box .text_cont .text_list{ font-size: 12px; font-weight: 300; line-height: 1.5;}
  #fullpage .page_5 .text_box .text_cont .text_list ul{ font-size: 18px; font-weight: 400; line-height: 1.1;}
  #fullpage .page_5 .text_box .text_cont .text_list ul li span{ font-size: 12px;}
  #fullpage .page_5 .text_box .text_cont .text_list ul li span:first-child{ padding:0; color: #99ff00; font-size: 18px; vertical-align: middle; }


  #fullpage .page_6.section .inner_wrap .text_box,
  #fullpage .page_7.section .inner_wrap .text_box{ display: flex; flex-direction: column; justify-content: center; text-align: left;}
  #fullpage .page_6 .text_box .text_tit{ margin: 0 0 45% 0;}
  #fullpage .page_6 .text_box .text_tit,
  #fullpage .page_7 .text_box .text_tit{ margin: 0 0 35% 0; width: ; font-size: 32px; line-height: 1.2; letter-spacing: -1.5px;}

  #fullpage .page_6 .text_box .text_tit h2,
  #fullpage .page_7 .text_box .text_tit h2{ font-weight: 400; line-height: 1.2;}

  #fullpage .page_6 .text_box .text_tit h2 span,
  #fullpage .page_7 .text_box .text_tit h2 span{ color: #99ff00; font-weight: 600;}

  #fullpage .page_6 .text_box .text_list,
  #fullpage .page_7 .text_box .text_list{ padding: 35px 0 0 0; margin: 0 5% 0 0; border-top: 1px solid; font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: -.1px;}
  
  #fullpage .page_6 .text_box .text_list ul li span,
  #fullpage .page_7 .text_box .text_list ul li span{ font-size: 12px;}
  #fullpage .page_6 .text_box .text_list ul li span:first-child,
  #fullpage .page_7 .text_box .text_list ul li span:first-child{ color: #99ff00; font-size: 18px; vertical-align: middle; }

  #fullpage .page_6{ background: url(/whistling_gif/page_6.gif) no-repeat center; background-size: cover;}
  #fullpage .page_7{ background: url(/whistling_gif/page_7.gif) no-repeat center; background-size: cover;}

  #fullpage .page_7 .text_box .text_tit{ width: 100%; letter-spacing: -1.6px;}
  #fullpage .page_7 .text_box .text_list{ line-height: 1.1;}

  #fullpage .page_8_1{ background: url(/whistling_gif/page_8.gif) no-repeat center; background-size: cover;}
  #fullpage .page_8_2{ background: url(/whistling_gif/page_9.gif) no-repeat center; background-size: cover;}
  #fullpage .page_8_3{ background: url(/whistling_gif/page_10.gif) no-repeat center; background-size: cover;}

  #fullpage .page_8_mo .text_box{ top: 40%; text-align: left;}
  #fullpage .page_8_mo .text_box .text_tit h2{padding: 10px 0 0 0; color: #99ff00; font-size: 30px; font-weight: 600; line-height: 2; letter-spacing: -1px; }
  #fullpage .page_8_mo .text_box .text_list li{ font-size: 12px; font-weight: 400; line-height:1.5; letter-spacing: -.2px;}
  #fullpage .page_8_mo .text_box .text_list li span:first-child{ padding: 0 2px 0 0; color: #99ff00; font-size: 15px; vertical-align: middle;}


  #fullpage .page_9 .section_bg::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.1);}
  #fullpage .page_9 .inner_wrap{ display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; width: 100%; height: 100%;}
  #fullpage .page_9 .text_box{ top: auto; transform: none; bottom: 5%; width:100%; color: #6e6e6e; font-size: 12px; text-align: left; z-index: 10;}
  #fullpage .page_9 .text_box h3{ color: #99ff00; font-size: 26px; font-weight: 600; line-height: 1.7; letter-spacing: -.8px;}
  #fullpage .page_9 .text_box p{ padding: 0 25px 0 0; line-height: 1.5; letter-spacing: -.2px;}


  #fullpage .page_10{ background: url(/img/page_10__bg.png) no-repeat 0 center; background-size: cover; background-color: #696868;}
  #fullpage .page_10 .section_bg::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.1);}
  #fullpage .page_10 .text_box{ top: 59%;}
  #fullpage .page_10 .text_box h2 img{ width: 240px;}
  #fullpage .page_10 .text_box h2 + p{ color: #e7e7e7; font-size: 12px; font-weight: 300;}
  #fullpage .page_10 .text_box .text_bottom{ margin: 32% 0 0 0;}
  #fullpage .page_10 .text_box .text_bottom .img img{ width: 90px;}
  #fullpage .page_10 .text_box .text_bottom .contact{ padding: 50px 0 0 0; font-size: 14px; font-weight: 300; line-height: 2;}
  #fullpage .page_10 .text_box .text_bottom .contact p:last-child{ font-size: 12px;}
  #fullpage .page_10 .text_box .text_bottom .address{ display: none;}
}