@keyframes txtWrap { 
  0% { transform: translateY(30px); opacity: 0 ;} 
  100% { transform: translateY(0px);  opacity: 1;} 
}

@keyframes imgWrap { 
  0% { transform: scaleY(0); opacity: 0 ;} 
  100% { transform: scaleY(1);  opacity: 1;} 
}

@keyframes rotateBeforeAni-pc { 
  0% { transform: rotate(0deg) translate(-410px) rotate(0deg);}

  100% { transform: rotate(360deg) translate(-410px) rotate(-360deg)} 
}

@keyframes rotateBeforeAni-pc-02{ 
  0% { transform: translate(-0px)}

  100% { transform:translate(-410px) } 
}
 
@keyframes rotateAfterAni-pc { 
 0% { transform: rotate(0deg) translate(410px) rotate(0deg); }

 100% { transform: rotate(360deg) translate(410px) rotate(-360deg)} 
 }

@keyframes rotateAfterAni-pc-02{ 
  0% { transform: translate(-0px)}

  100% { transform:translate(410px) } 
}

@keyframes rotateThirdAni-pc { 
  0% { transform: rotate(0deg) translateY(410px) rotate(0deg); }
  
  100% { transform: rotate(360deg) translateY(410px) rotate(-360deg)} 
}
   
@keyframes rotateThirdAni-pc-02{ 
  0% { transform: translate(-0px)}

  100% { transform:translate(410px) } 
}

.fp-viewing-0 #hd.main ~ #gnb {background-color: transparent; transition: 0s;}
.fp-viewing-0 #hd.main.hd_zindex ~ #gnb {background: #F6F7F9;  transition: 0s;}

.fp-viewing-2 #fp-nav > ul > li:first-child > a > span {background-image: url(../img/ico/ico_fp_nav_home_white.svg);}
.fp-viewing-2 #fp-nav > ul > li > a > span {background-image: url(../img/ico/ico_fp_nav_white.svg);}
.fp-viewing-2 #fp-nav > ul > li > a.active > span {background-image: url(../img/ico/ico_fp_nav_white_active.svg);}
.fp-viewing-2 #fp-nav > ul > li:first-child:hover > a > span {background-image: url(../img/ico/ico_fp_nav_home_white_active.svg);}
.fp-viewing-2 #fp-nav > ul > li:hover > a > span {background-image: url(../img/ico/ico_fp_nav_white_active.svg);}

.fp-viewing-4 #fp-nav.right {display: none;}

#fp-nav {right: 80px !important;}
#fp-nav > ul {}
#fp-nav > ul > li{margin: 0;width: 16px;height: 16px;}
#fp-nav > ul > li + li {margin-top: 30px;}

#fp-nav > ul > li > a{}
#fp-nav > ul > li > a > span {border-radius: 0 !important; margin: 0 !important; width: 16px !important; height: 16px !important; background: url(../img/ico/ico_fp_nav.svg) no-repeat center/cover; }
#fp-nav > ul > li:hover > a > span{background-image: url(../img/ico/ico_fp_nav_active.svg) ;}
#fp-nav > ul > li > a.active > span {background-image: url(../img/ico/ico_fp_nav_active.svg) ;}
#fp-nav > ul > li:first-child  > a > span {background-image: url(../img/ico/ico_fp_nav_home.svg); background-size: 14px; width: 14px !important;height: 14px !important;}
#fp-nav > ul > li:first-child  > a.active  > span {background-image: url(../img/ico/ico_fp_nav_home_active.svg);}
#fp-nav > ul > li:first-child:hover > a > span {background-image: url(../img/ico/ico_fp_nav_home_active.svg);}
#fp-nav > ul > li > a.active {}
#fp-nav > ul > li > a.active > span{}
#fp-nav > ul > li:last-child {display: none;}

/* sec01 */
section.order_01 {   
  height: 100vh;

} 
section.order_01 .video-wrap {
  position: absolrute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
} 
section.order_01 .video-wrap img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
} 
.clipped-video {
  -webkit-clip-path: url(#video-overlay);
  clip-path: url(#video-overlay);
}
svg.vodeo-cont {display: block;position: absolute;left: 0;bottom: 0;width: 100%;}

section.order_01 .video-wrap img.order-01 {z-index:2 }
section.order_01 .video-wrap img.order-02 {z-index:3; }
section.order_01 .video-wrap img.order-03 {z-index:4; position: relative;}
section.order_01 .video-wrap img.pc {}
section.order_01 .video-wrap img.mo {display: none;}


section.order_01 .video-wrap .video {width: 100%;height: 100%;margin-top: -3.5vw;}
section.order_01 .video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  position: relative;
  z-index: 1;}


.height-auto {height: auto !important;}

/* sec02 */
body {
  /* cursor: url('./cursor.svg') 30 30 , default; */
  cursor: none;
}
.fp-scrollable .fp-scroller{height:100%;}
section.order_02 {overflow: hidden; position: relative; display: flex; align-items: center; justify-content: space-between; } 
section.order_02 >.bg {transform: scale(1.3) translateY(150px);transition: transform 4s ease; background: url(../img/bg/bg_main_sec_02.png) no-repeat center/ cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
section.order_02.show >.bg{transform: scale(1) translateY(0);}

.header-sec {color: #27405A; width: 100%; max-width: 330px; text-align: left; padding-left: 7.6%;  white-space:nowrap;} 
.header-sec .tit {font-size: 50px; font-weight: 700; margin-bottom: 10px;}
.header-sec .tit-en {font-size: 30px; font-weight: 500;}

.list-ani-cricle { width: 100%; height: 100%; position: relative; } 
.list-ani-cricle ul { width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% - -120px), -50%); border-radius: 50%; } 
.list-ani-cricle ul li { position: absolute; width: 100%; height: 100%; background-color: rgba(225,233,248,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto; } 
.list-ani-cricle ul li .bg { animation: animate 21s linear infinite; position: absolute; width: calc(100% + 35px); display: none; } 
.list-ani-cricle ul li .bg img { } 
.list-ani-cricle ul li .cont { z-index: 5; position: relative; } 
.list-ani-cricle ul li .cont .img-wrap { } 
.list-ani-cricle ul li.main .cont .img-wrap { }
.list-ani-cricle ul li .cont .img-wrap img { margin: 0 auto;} 
.list-ani-cricle ul li.main .cont .img-wrap img {  margin: 0 auto; margin-bottom: 5px; transform: scaleY(0); animation: imgWrap .65s .35s linear forwards; transform-origin: top;} 

.list-ani-cricle ul li.main .cont .img-wrap.fist img{width: 290px; max-width: initial; } 
.list-ani-cricle ul li .cont .img-wrap.fist img{ max-width: 80px; margin: 0 auto; } 

.list-ani-cricle ul li.main .cont .img-wrap.second img{width: 460px;  max-width: initial; } 
.list-ani-cricle ul li .cont .img-wrap.second img{max-width: 110px;} 

.list-ani-cricle ul li.main .cont .img-wrap.thred img{width: 290px; max-width: initial; } 
.list-ani-cricle ul li .cont .img-wrap.thred img{max-width: 85px; margin: 0 auto; } 

.list-ani-cricle ul li .cont .txt-wrap { height: 0; overflow: hidden; opacity: 0;} 
.list-ani-cricle ul li .cont .txt-wrap .tit { font-size: 28px; font-weight: 800; color: #27405A; margin-bottom: 15px; } 
.list-ani-cricle ul li .cont .txt-wrap .txt { font-size: 18px; font-weight: 500; color: #27405A; line-height: 28px; margin-bottom: 20px; } 
.list-ani-cricle ul li .cont .txt-wrap .txt02 { font-size: 16px; font-weight: 400; color:#292929; line-height: 24px; } 

.list-ani-cricle ul li .hover{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 10;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: 800;color: #27405A;background-color: #FFFFFF90;inset: 10px 10px;border-radius: 50%;opacity: 0;}
.list-ani-cricle ul li.before:hover .hover, .list-ani-cricle ul li.after:hover .hover, .list-ani-cricle ul li.third:hover .hover{opacity: 1; transition: .65s;}


.list-ani-cricle ul li::before { content: ""; opacity: 0; animation: animate 8s ease-in-out infinite ; border-radius: 50%; position: absolute; inset: 50% 50%; background: rgb(8,74,151);background: linear-gradient(72deg,  rgb(142 185 236) 0%, rgba(225,233,248,0.5) 100%); z-index: 1; }
.list-ani-cricle ul li::after { content: ""; background-color: #ffffff65; position: absolute; left: 0; top: 0; inset: 10px; border-radius: 65%; z-index: 2; } 

.list-ani-cricle ul li.main {z-index: 9; transition: 1s; width: 600px; height: 600px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} 
.list-ani-cricle ul li.main .bg { display: block; } 
.list-ani-cricle ul li.main .cont .txt-wrap { height: auto; animation: txtWrap .7s .8s linear forwards; } 
.list-ani-cricle ul li.main::before {display: none;} 
.list-ani-cricle ul li.before, .list-ani-cricle ul li.after, .list-ani-cricle ul li.third {
  overflow: hidden;}

.list-ani-cricle ul li.before:hover::before, .list-ani-cricle ul li.after:hover::before, .list-ani-cricle ul li.third:hover::before {inset: 0px 0px; transition: .8s ease-in-out; opacity: 1;}

.list-ani-cricle ul li.before { animation: rotateBeforeAni-pc 35s 1s  infinite linear, rotateBeforeAni-pc-02 1s; } 
.list-ani-cricle ul li.before .cont .img-wrap img {margin: 0 auto;} 

.list-ani-cricle ul li.after { animation: rotateAfterAni-pc 35s 1s infinite linear, rotateAfterAni-pc-02 1s; } 
.list-ani-cricle ul li.third { animation: rotateThirdAni-pc 35s 1s  infinite linear, rotateThirdAni-pc-02 1s; } 


.swiper { width: 100%; height: 100%; } 
.swiper-slide { text-align: center; font-size: 18px; background: #fff;
 /* 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; } 
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } 



/* sec03 */
section {height: 100%; text-align: center;}
section.order_03 {position: relative;  display: flex; align-items: center; justify-content: space-between; overflow: hidden;}
section.order_03.show .bg{transform: scale(1) translateY(0);}
section.order_03 .bg {transform: scale(1.2) translateY(30px);transition: transform 5s ease;background:url(../img/bg/bg_main_sec_03.png) no-repeat top /cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
section.order_03 .bg::before {content: ""; opacity: 0;  transition: 1s ease-in-out; background-color: #27405A50; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
section.order_03.show .bg::before {opacity: 1;}
section.order_03 .header-sec {position: relative; color: #fff;margin-right: 20px;width: auto;white-space: nowrap;}

.list-card-05 {width: 100%; padding-right: 9.8%; text-align: center;}
.list-card-05 ul {display: flex;align-items: center;justify-content: flex-end;margin: 0 auto; max-width: 1500px;}
.list-card-05 ul li {box-shadow: 0 0 1rem 0 rgb(0 0 0 / 5%); border-radius: 10px;background-color: rgba(255, 255, 255, -0.05);backdrop-filter: blur(20px);border: 1px solid #ffffff40;flex: 1;max-width: 400px;height: 570px;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 0 20px;opacity: 0;transform: translateY(30px);transition: transform 1.65s, opacity 1.65s ;}
.list-card-05 ul li .img-wrap {margin-bottom: 55px;}
.list-card-05 ul li + li {margin-left: 3.4%;}
.list-card-05 ul li .img-wrap img {width: auto;margin: 0 auto;}
.list-card-05 ul li .txt-wrap { color: #fff;}
.list-card-05 ul li .txt-wrap .tit {font-size: 24px;font-weight: 700;margin-bottom: 30px;}
.list-card-05 ul li .txt-wrap .tit-sub {font-size: 18px;font-weight: 800;margin-bottom: 25px;}
.list-card-05 ul li .txt-wrap .desc {font-size: 18px;font-weight: 300;line-height: 34px;}

.list-card-05.io ul li {opacity: 0;transform: translateY(30px); transition: transform 1.65s, opacity 1.65s ;}
.list-card-05.io.show ul li {transform: translateY(0); opacity: 1;}
.list-card-05.io.show ul li:nth-of-type(1){}
.list-card-05.io.show ul li:nth-of-type(2){transition-delay: .4s;}
.list-card-05.io.show ul li:nth-of-type(3){transition-delay: .8s;}



/* sec04 */ 
section.order_04 {overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column;}
section.order_04 .header-sec {text-align: center; padding: 0; max-width: 100%;}
.header-sec .desc {font-size: 30px; font-weight: 500; margin-top: 65px; line-height: 48px;}


@media(max-width: 1550px) { 
  /* section.order_03 */
  section.order_03 {flex-direction: column; justify-content: center;}
  section.order_03 .header-sec {margin-right: 0;padding: 0;text-align: center; margin-bottom: 40px;}
  .header-sec .tit {margin-bottom: 15px;}
  .list-card-05 {padding:0 20px;}
  .list-card-05 ul {justify-content: center;}
}

@media(max-width: 1200px) { 
  section.order_01 {height: auto;}
  section.order_01 .video-wrap {position: relative; height: auto;}
  section.order_01 .video-wrap .video {height: auto;}
  .fp-tableCell {height: auto !important;}
  .fp-scrollable {height: auto !important;}
  /* section.order_02 */
  section.order_02 {flex-direction: column;align-items: center; padding: 80px 0;}
  .header-sec {padding-left: 0; text-align: center; max-width:100%; margin-bottom: 80px; }
  .list-ani-cricle {display: flex;align-items: center;justify-content: center;}
  .list-ani-cricle ul {position: relative;left: 0;top: 0;transform: none;width: 100%;height: 100%;display: flex;flex-wrap: wrap;justify-content:center;}
  .list-ani-cricle ul li {width: 50%;display: flex;align-items: center;justify-content: center;max-width: 355px; max-height: 355px; min-height: 355px; margin: 0 10px;}
  .list-ani-cricle ul li.main {width: 100%;height: 100%;position: relative;left: 0;top: 0;transform: none;order: 3;max-width: 728px;max-height: 728px;min-height: 728px;transition: none;}
  .list-ani-cricle ul li.before {animation: none;position: relative;top: 0;order: 1;}
  .list-ani-cricle ul li.after {animation:none; position: relative;order: 2;}
  .list-ani-cricle ul li .cont .img-wrap.fist img {max-width: 246px;}
  .list-ani-cricle ul li .cont .img-wrap.thred img {max-width: 235px;}
  .list-ani-cricle ul li .cont .img-wrap.second img {max-width: 290px;}
  .header-sec .tit {font-size: 40px;} 
  .list-ani-cricle ul li .cont .txt-wrap .tit {font-size: 24px;}
  .list-ani-cricle ul li .cont .txt-wrap .txt {margin-bottom: 25px;}
  .list-ani-cricle ul li.main .cont .img-wrap.second img {width: 502px;margin-bottom: 0;}


  /* section.order_03 */
  section.order_03 {padding: 65px 20px 30px;justify-content: flex-start;}
  .list-card-05 {padding: 0;}
  .list-card-05 ul {flex-direction: column; }
  .list-card-05 ul li {overflow: hidden; width: 100%; padding: 45px 25px; max-width: 100%; flex-direction: row-reverse; justify-content: flex-end;text-align: left;}
  .list-card-05 ul li + li { margin-left: 0;margin-top: 20px;}
  .list-card-05 ul li .img-wrap {margin-bottom: 0;width: auto;opacity: .15;height: 100%;position: absolute;right: 50px;top: 40px;}
  .list-card-05 ul li:nth-of-type(2) .img-wrap {top: 25px;}
  .list-card-05 ul li:nth-of-type(3) .img-wrap {top: -1px; right: 15px;}
  .list-card-05 ul li .txt-wrap .tit {margin-bottom: 10px;}
  .list-card-05 ul li .txt-wrap .desc {font-size: 16px;font-weight: 500;line-height: 26px;}

  /* section.order_04 */
  .fp-section.fp-table{height: 100% !important;}
  .fp-tableCell{height: 100% !important;}
  section.order_04 {padding: 100px 20px 80px;}
  .header-sec .desc {font-size: 22px;margin-top: 60px;line-height: 36px;}
  .header-sec .tit-en {font-size: 24px;}




}

@media(max-width: 1024px) {
  
}

@media(max-width: 768px) { 
  section.order_01 {height: 100%;}
  section.order_01 .video-wrap .video {width: 100%;height: auto;margin-top: -2vh;}

  section.order_01 .video-wrap {height: auto;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  section.order_01 .video-wrap img.order-03 {position: relative;}
    /* section.order_02 */
  section.order_02 {padding: 50px 0 315px;}
  .header-sec {margin-bottom: 25px;}
  .header-sec .tit {font-size: 24px;margin-bottom: 5px;}
  .header-sec .tit-en {font-size: 16px;}
  .list-ani-cricle {align-items: flex-start;}
  .list-ani-cricle ul {}
  .list-ani-cricle ul li {margin: 0px 23px; max-width: 150px;max-height: 150px; min-height: 150px; margin: 0px 20px;}
  .list-ani-cricle ul li.main {max-width: 320px;max-height: 320px;min-height: 320px; margin-top: 25px;}
  .list-ani-cricle ul li.main .cont .img-wrap.second img {width: 320px;}
  .list-ani-cricle ul li.main .cont .txt-wrap {position: absolute;top: calc(100% + 95px);    white-space: nowrap;}
  .list-ani-cricle ul li .cont {display: flex;flex-direction: column;align-items: center;}
  .list-ani-cricle ul li .cont .img-wrap.fist img {max-width: 100px;}
  .list-ani-cricle ul li .cont .img-wrap.thred img {max-width: 103px;}
  .list-ani-cricle ul li .cont .txt-wrap .tit {font-size: 18px;}
  .list-ani-cricle ul li .cont .txt-wrap .txt {margin-bottom: 15px;font-size: 14px;line-height: 24px;}
  .list-ani-cricle ul li .cont .txt-wrap .txt02 {font-size: 14px;}

  /* section.order_03 */
  section.order_03 {height: auto; padding: 45px 20px 50px;justify-content: flex-start;}
  section.order_03 .header-sec {margin-bottom: 30px;}
  .list-card-05 ul li {padding:30px 25px;}
  .list-card-05 ul li .txt-wrap .tit {font-size: 20px;margin-bottom: 5px;}
  .list-card-05 ul li .txt-wrap .tit-sub {font-size: 16px;}
  .list-card-05 ul li .txt-wrap .desc {font-size: 14px;line-height: 24px;}
  .list-card-05 ul li .img-wrap {right: 11px;top: 27px;}
  .fp-section.fp-table {height: auto !important;}
  .fp-tableCell {height: auto !important;}


  /* section.order_04 */
  section.order_04 {padding: 50px 20px 60px;}
  .header-sec .desc {font-size: 13px;margin-top: 25px;line-height: 22px;}
  section.order_04 .header-sec {margin-bottom: 50px;}










}


@media(max-width: 600px) { 

}
@media(max-width: 500px) { 
  .list-ani-cricle ul li {margin: 0px 10px;}
  section.order_01 .video-wrap img.pc {display: none;}
  section.order_01 .video-wrap img.mo {display: block;}
  section.order_01 .video-wrap .video {margin-top: 0vh;}
}