@charset "utf-8";

body, html, .wrap {height: 100%;}

#header {position: fixed;}

#header.colorb {border-bottom: 1px solid #E6E6E6;}
#header.colorb .logo a {background-image: url(/images/user/logo_b.png);}
#header.colorb .gnb .dep1 > a {color: #002C8A;}
#header.colorb .app > a {background-image: url(/images/user/app_down_b.svg);}
#header.colorb .lang {background-image: url(/images/user/icon_lang_b.svg);}
#header.colorb .sitemap-btn span {background: #002C8A;}


.main-wrapper {width: 100%; height: 100%; overflow: hidden;}

.main-wrapper .pagination {position: fixed; left: 80px; right: unset; z-index: 100; } 
.main-wrapper .pagination .swiper-pagination-bullet {width: 8px; height: 8px; background: #fff; opacity: 0.15; margin: 20px auto;}
.main-wrapper .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 12px; height: 12px; opacity: 1;}

.main-wrapper.colorb .pagination .swiper-pagination-bullet {background: #000; }
.main-wrapper.colorb .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: #1E6DC9;}

section {width: 100%; height: 100%; min-height:700px; background-color: #ccc; padding-top: 104px; box-sizing: border-box;}
.sec .inner {display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0;}
.sec .text {width: 50%;}
.sec .text.left {padding-left: 100px;}
.sec .text.right {max-width:680px; padding-right: 100px;}
.sec .text.colorw .tit, .sec .text.colorw p {color: #fff;}
.sec .btn-box {margin-top: 60px; gap: 12px;}
.sec .tit {font-size: var(--maintit); font-weight: bold; margin-bottom: 48px; line-height: 1.4; white-space: pre-wrap;}
.sec .img {width: 45%; max-width: 682px; position: relative;}
.sec .img .bg {width: 100%; position: relative; padding-top: 100%; display: block; transition: transform 0.5s 0.2s; transform: scale(0);}
.sec .img .bg img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.sec .img .bg2 {width: 100%; height: 100%; display: block; opacity: 0; transition: 0.4s 0.6s;}
.sec .img .bg2 img {width: 100%; height: 100%; object-fit: cover; vertical-align: top;}
.sec .img .ob {opacity: 0; }
.sec .img .ob img {width: 100%; height: 100%; object-fit: cover; vertical-align: top;}
.sec .img .poa {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.sec p {font-size: var(--maintxt); line-height: 1.5; white-space: pre-wrap;}
.sec .tag {font-size: 15px; color: #919191; background: #fff; /*border: 1px solid #A1A1A1;*/ display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; height: 40px; border-radius: 20px;}
.sec .tag.line {border: 1px solid #A1A1A1;}

.sec.ani .bg { transform: scale(1);}
.sec.ani .bg2 {opacity: 1;}
.sec.ani .img .ob {opacity: 1; transition: opacity 0.4s 0.8s;}

.sec.visual {background: linear-gradient(to bottom, #005FCE, #00EFFB);}
/* .sec.visual .tit {font-size: 62px;} */
/* .sec.visual p {font-size: var(--fz01);} */
.sec.visual .btn-box {gap: 16px;}
.sec.visual .btn-box .appbtn {color: #000 !important; background: #fff;}
.sec.visual .btn-box .appbtn.aps::before {background-image: url(/images/user/logo_apple.png);}
.sec.visual .mainimg {position: relative; max-width: 820px; width: 55%; margin-top: 13%;}
.sec.visual .mainimg span {display: block;}
.sec.visual .mainimg span img {width: 100%;}
.sec.visual .mainimg span.poa {position: absolute; left: 50%; top: 50%; }
.sec.visual .mainimg span.bg2 {transform: translate(-50%,-124%); width: 77.1%; height: 54%;}
.sec.visual .mainimg span.bg2 img {width: 100%; height: 100%; object-fit: cover; vertical-align: top;}
.sec.visual .mainimg span.ob {transform: translate(-49%,-72%); width: 77.7%; height: 88.9%;}
.sec.visual .mainimg span.ob img {width: 100%; height: 100%; object-fit: cover; vertical-align: top;}

@keyframes upDown1 {
  0% {transform: translateY(0%);}
  50% {transform: translateY(-10%);}
  100% {transform: translateY(0%);}
}

@keyframes rightmove {
  0% {transform: translateX(0%);}
  50% {transform: translateX(10%);}
  100% {transform: translateX(0%);}
}

@keyframes leftmove {
  0% {transform: translateX(0%);}
  50% {transform: translateX(-10%);}
  100% {transform: translateX(0%);}
}

@keyframes bounce {
  0% {transform: translateY(-150%);}
  15% {transform: translateY(0%);}
  30% {transform: translateY(-60%);}
  40% {transform: translateY(0%);}
  55% {transform: translateY(-30%);}
  65% {transform: translateY(0%);}
  100% {transform: translateY(0%);}
}


.sec.sec2 {background-color: #6B6FE5;}
.sec.sec2 .img .ob {transform: translate(-50%, -50%) scale(0.7);}
.sec.sec2 .ob1 {left: 17%; top: 48%; width: 22%; height: 28%; }
.sec.sec2 .ob2 {left: 75%; top: 18%; width: 25%; height: 20%; }
.sec.sec2 .ob3 {left: 82%; width: 15%; height: 14%; }
.sec.sec2 .ob4 {top: 14%; width: 11%; height: 22%; }
.sec.sec2 .ob5 {left: 26%; top: 18%; width: 21%; height: 21%; }

.sec.sec2.ani .img .ob {transform: translate(-50%, -50%) scale(1); transition: opacity 0.4s, transform 0.4s;}
.sec.sec2.ani .img .ob1 {transition-delay: 0.8s;}
.sec.sec2.ani .img .ob2 {transition-delay: 1.4s;}
.sec.sec2.ani .img .ob3 {transition-delay: 1.6s;}
.sec.sec2.ani .img .ob4 {transition-delay: 1.2s;}
.sec.sec2.ani .img .ob5 {transition-delay: 1s;}

.sec.sec2.ani .ob2 img, .sec.sec2.ani .ob5 img {animation: upDown1 3s linear 1s infinite;}
.sec.sec2.ani .ob1 img, .sec.sec2.ani .ob3 img,.sec.sec2.ani .ob4 img {animation: upDown1 2.5s linear 1.2s infinite;}


.sec.sec3 {background-color: #fff;}
.sec.sec3 .tag {border: 1px solid #A1A1A1;}
.sec.sec3 .ob4 {left: 30%; top: 8%; width: 20%; height: 27%;}
.sec.sec3 .ob3 {left: 15%; top: 33%; width: 17%; height: 15.5%;}
.sec.sec3 .ob2 {left: 72%; top: 14%; width: 20%; height: 19%;}
.sec.sec3 .ob1 {left: 87%; top: 40%; width: 22%; height: 20%;}

.sec.sec3 .ob3 img {animation: upDown1 3s linear 1.3s infinite;}
.sec.sec3 .ob2 img {animation: upDown1 3.2s linear 1.3s infinite;}
.sec.sec3 .ob1 img, .sec.sec3 .ob4 img {animation: upDown1 3s linear 1.5s infinite;}

.sec.sec3 .tag {border: 1px solid #A1A1A1;}

.sec.sec4 {background-color: #FFC620;}
.sec.sec4.ani .ob {transition: left 0.4s 0.9s, top 0.4s 0.9s, opacity 0.4s 0.8s;}
.sec.sec4 .ob img {}
.sec.sec4 .ob1 {/*left: 21%; top: 14%;*/ width: 16%; height: 18%; }
.sec.sec4 .ob2 {/*top: 1%;*/ width: 14.5%; height: 16%; }
.sec.sec4 .ob5 {/*left: 76%; top: 16%;*/ width: 9%; height: 10%; }

.sec.sec4.ani .ob1 {left: 21%; top: 14%;}
.sec.sec4.ani .ob2 {top: 1%;}
.sec.sec4.ani .ob5 {left: 76%; top: 16%;}

/* .sec.sec4.ani .ob1 img {animation: bounce 1s linear 1s forwards;}
.sec.sec4.ani .ob2 img {animation: bounce 1.1s linear 1s forwards;}
.sec.sec4.ani .ob5 img {animation: bounce 0.7s linear 1s forwards;} */


.sec.sec5 {background-color: #0291B1;}

.sec.sec5 .ob1 {left: 40%; top: 18%; width: 32.6%; height: 25%;}
.sec.sec5 .ob2 {left: 70%; top: 45%; width: 32.6%; height: 25%;}

.sec.sec5 .ob img {transform: scale(0.3); opacity: 0;}
.sec.sec5 .ob1 img { transform-origin: 0% 100%; transition: 0.3s 0.9s;}
.sec.sec5 .ob2 img { transform-origin: 100% 100%; transition: 0.3s 1.2s;}
/* .sec.sec5.ani .ob1 img {animation: rightmove 3s linear 1.3s infinite;}
.sec.sec5.ani .ob2 img {animation: leftmove 3s linear 1.3s infinite;} */
.sec.sec5.ani .ob img {transform:scale(1); opacity: 1;}


.sec.sec6 {background-color: #48B9EF;}
.sec.sec6 .bg2 img {margin-top: 2px; margin-left: 1px;}
.sec.sec6.ani .ob {transition: opacity 0.3s 0.8s, left 0.3s 0.9s, top 0.3s 0.9s; }
.sec.sec6 .ob img {transform: scale(0.5); transition: 0.3s 0.9s;}
/* .sec.sec6 .ob1 { width: 29.8%; height: 29.8%;}
.sec.sec6 .ob2 { width: 35.8%; height: 35.8%;}
.sec.sec6 .ob3 { width: 35%; height: 35%;} */
.sec.sec6 .ob1 {width: 45%; height: 45%;}
.sec.sec6 .ob2 {width: 37%; height: 37%;}

.sec.sec6.ani .ob img {transform: scale(1);}
.sec.sec6.ani .ob1 {left: 16%; top: 35%;}
.sec.sec6.ani .ob2 {left: 57%; top: 17%;}
/* .sec.sec6.ani .ob3 {left: 20%;} */

/* footer */
#footer {height: 100%;}
#footer .f-top {display: flex; align-items: center;  height: calc(100% - 87px); padding-top: 104px;}
#footer .left address {max-width: 520px;}
#footer .left address li {display: inline; margin-right: 8px;}


/* main popup */
.main-pop {width: 480px; position: relative;}
.main-pop .swiper-container {width: 100%; overflow: hidden;}
.main-pop .swiper-wrapper {align-items: center;}
/* .main-pop .swiper-slide {min-height: 250px; } */
.main-pop .swiper-slide a {display: block;}
.main-pop .swiper-slide a img {vertical-align: top; max-width: 100%;}
.main-pop .btn-box {width: 100%;}
.main-pop .btn-box button {width: 50%; background: #616161; color: #fff; font-size: var(--fz03); height: 60px; position: relative;}
.main-pop .btn-box button.day::before {content:""; width: 2px; height: 65%; background: #FFF; opacity: 0.2; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); z-index: 1;}
.main-pop .swiper-btn button {position: absolute; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.23); } 
.main-pop .swiper-btn .prev-btn {left: -80px;}
.main-pop .swiper-btn .next-btn {right: -80px;}
.main-pop .swiper-ctrl {position: absolute; bottom: -10px; left: 50%; border-radius: 19px; width: 110px; height: 35px; display: flex; background: rgba(0,0,0,0.3); padding: 8px 0; justify-content: center; transform: translate(-50%, 100%); gap: 10px; align-items: center;}  
.main-pop .swiper-ctrl .paging {font-size: var(--fz); color: #fff; width: fit-content;}
.main-pop .swiper-ctrl .paging span {font-size: inherit; color: inherit;}
.main-pop .swiper-ctrl .control {width: 15px; height: 15px; background-repeat: no-repeat; background-position: center; opacity: 0.6; transition: 0.3s;}
.main-pop .swiper-ctrl .control.stop { background-image: url(/images/user/icon_play.png);}
.main-pop .swiper-ctrl .control.play { background-image: url(/images/user/icon_stop.png);}
.main-pop .swiper-ctrl .control:hover {opacity: 1;}

.main-pop.noSlide .swiper-btn {display: none;}
.main-pop.noSlide .swiper-ctrl {display: none;}


@media screen and (max-width:1480px) {
  .inner {padding: 0 3%;}

  .sec .text.left {padding-left: 5%;}
  .sec .text.right {padding-right: 5%;}
  .main-wrapper .pagination {left: 2.5%;}

  /* .sec.visual .tit {font-size: 54px;} */

}

@media screen and (max-width:1260px) {

  .sec .tit {margin-bottom: 28px;}
  .sec .btn-box {margin-top: 40px;}
  .sec .tag {font-size: 14px; padding: 0 14px; height: 36px;}

  /* .sec.visual .tit {font-size: 48px;} */
  
  
}

@media screen and (max-width:1024px) {
  section {padding-top: 80px;}

  .sec .inner {flex-direction: column; padding: 5%; gap: 5%; justify-content: center;}

  .sec.visual .btn-box {display: none;}

  .sec .text {width: 100%; padding: 5%;}
  .sec .text.right {max-width: unset;}
  .sec .img {width: 55%;}

  /* .sec.visual .tit {font-size: 40px;} */
  .sec.visual .mainimg {width: 60%;}

  .sec.sec3 .inner,.sec.sec5 .inner {flex-direction: column-reverse;}
  
}

@media screen and (max-width:780px) {

  section {min-height: 500px;}

  .main-wrapper .pagination {display: none;}

  .sec .img {width: 100%; max-width: 45vh;}
  .sec .tag {font-size: 12px; height: 32px;}

  /* .sec.visual .tit {font-size: 32px;} */
  .sec.visual .mainimg {width: 100%; max-width: 45vh;}

  #footer .f-top {height: calc(100% - 75px); padding-top: 60px; padding-bottom: 10px; }
  #footer .right ul li {width: 100%;}
  #footer .right ul li:nth-child(2) {margin-top: 10px;}

  #footer .left address {margin: auto;}


  /* popup */
  .main-pop {width: 70%; max-width: 480px; }
  .main-pop .swiper-btn button {width: 32px; height: 32px;}
  .main-pop .swiper-btn button img {height: 16px; vertical-align: middle;}
  .main-pop .swiper-btn .next-btn {right: -42px;}
  .main-pop .swiper-btn .prev-btn {left: -42px;}
  .main-pop .btn-box button {height: 42px;}
  
}

@media screen and (max-width:480px) {

  /* .sec .inner {gap: 10%;} */
  .sec .text {padding: 0 !important;}
  .sec .tit {margin-bottom: 10px;}
  .sec .tag {height: 28px; padding: 0 10px;}
  .sec .btn-box {margin-top: 10px; gap: 6px; flex-wrap: wrap;}

  /* footer */
  /* #footer .f-top {height: calc(100% - 48px);} */

  /* .sec.visual .tit {font-size: 26px;} */
  
}