:root{
  --main-color:#43b2db;
  --main-color-white:#fff;
  --main-color-black:#000;
  --main-color-navy:#191877;
  --main-color-green:#93c756;
}


body{width:100%; font-size:18px; position:relative;}
.fc01{color:var(--main-color);}
.conTit2{font-size:2.7em; color:var(--main-color-black);}
.mob_br{display:none;}
.layout{width:100%; max-width:1400px; margin:0 auto;}

.section{min-height:100vh; width:100%;}
.guide{position:relative;}


/************** header ****************/
#header{padding:10px 0;z-index: 9999; position: fixed; top:0; left:50%; transform: translateX(-50%); width:100%; background:var(--main-color);}
#header .layout{position:relative; display:flex; justify-content: space-between;     align-items: center;}
#header .layout #nav{display:flex;}
#header .layout #nav > li{position:relative; margin:0 10px;}
#header .layout #nav > li > a{font-size:1.2em; font-weight:bold; padding:30px 40px;}
#header .layout #nav > li > .submenu{display: none; position:absolute; width:100%; top: 100%; left: 50%; transform: translateX(-50%); background:var(--main-color-navy); padding:10px; border-radius: 15px;}
#header .layout #nav > li > .submenu li{}
#header .layout #nav > li > .submenu li a{text-align: center; padding:10px 15px; width:100%; transition: all .3s;}
#header .layout #nav > li > .submenu li a:hover{color:var(--main-color-green);}
#header .layout #nav li a{color:#fff;}
.mobBtn {
    display: none;
    width: 30px;
    height: 24px;
    position: relative;
    cursor: pointer;
    z-index: 10000;
}

.mobBtn span {
    position: absolute;
    left: 0;
    height: 3px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.mobBtn span:nth-child(1) {
    top: 0;
}

.mobBtn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.mobBtn span:nth-child(3) {
    bottom: 0;
}

/* Active 상태: X 표시로 변형 */
.mobBtn.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 50%;
}

.mobBtn.active span:nth-child(2) {
    opacity: 0;
}

.mobBtn.active span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: auto;
    top: 50%;
}
.mobBtn:hover{cursor: pointer;}

/************** footer ****************/
#footer{background:#211212; padding:50px 0; position: relative; z-index: 0; margin-top:80px;}
#footer:before{content:''; position:absolute; top:-100px; height:100px; width:100%; left:0; background:url(../img/ft_bg.png) repeat-x; background-size: contain}
#footer .layout{display:flex; flex-direction: column; align-items: center;}
#footer .layout .ft_top{width:100%; margin-bottom:50px; display:flex; justify-content: space-between; align-items: center;}
#footer .layout .ft_top .ft_l ul,
#footer .layout .ft_top .ft_l ul li,
#footer .layout .ft_top .ft_l ul li .ft_cont{display:flex; align-items: center; }
#footer .layout .ft_top .ft_l ul li .ft_cont img{margin-right:20px;}
#footer .layout .ft_top .ft_l ul li .ft_tit{color:var(--main-color-white); padding:5px 15px; border:1px solid rgba(255,255,255, 0.3); margin-right:20px;}
#footer .layout .ft_top .ft_l ul li:first-child{margin-right:50px;}
#footer .layout .ft_top .ft_r{display:flex; flex-direction: column;}
#footer .layout .ft_top .ft_r p{color:var(--main-color-white);}
#footer .layout .ft_top .ft_r p span:first-child{padding-right:15px; margin-right:15px; position: relative;}
#footer .layout .ft_top .ft_r p span:first-child:after{position: absolute; right:0; top:50%; width:1px; height:90%; background:rgba(255,255,255, 0.3); transform: translateY(-50%); content:'';}
#footer .layout .ft_top .ft_r p span a{display:inline-block; color:#fff;}
#footer .layout .copy{color:#817272;}
#fullpage #footer{margin-top:0;}

.quick_fixed{position:fixed; bottom:50px; right:50px;display:flex; flex-direction: column; z-index: 100;}
.quick_fixed a,
.quick_fixed .topBtn{width:70px; height:70px; border-radius: 50%; transition: all 0.3s;}
.quick_fixed .topBtn{background:var(--main-color-navy); margin-top:10px; display:flex; align-items: center; justify-content: center;}
.quick_fixed .topBtn:hover{cursor: pointer;}
.quick_fixed a:hover,
.quick_fixed .topBtn:hover{box-shadow:0 10px 0 rgba(25,24,119,0.2); transform: translateY(-10px);}
.quick_fixed a img{width:100%; height:100%;}


/************** sec01 ****************/
.sec_01{background:var(--main-color) url(../img/sec01_bg.png) repeat-x bottom left;}
.sec_01 .main_layout{margin-top:50px; width:100%; display:flex; align-items: center; justify-content: center; overflow:hidden;}
.sec_01 .top_slogan{width:100%; margin-bottom:-20px;}
.main_mid .on-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

/* on이 붙으면 등장 */
.main_mid .on-trigger.on {
    opacity: 1;
    transform: translateY(0);
}
/* 순차 딜레이 */
/* 내부 애니메이션 (ts_01 ~ mm_bot) */
.ts_01.on { transition-delay: 0s; }
.ts_02.on { transition-delay: 0.15s; }
.ts_03.on { transition-delay: 0.3s; }
.mm_top.on { transition-delay: 0.45s; }
.mm_bot.on { transition-delay: 0.6s; }


.sec_01 .top_slogan .guide {display:flex; justify-content: center;}
.sec_01 .top_slogan .guide img{margin-right:20px;}
.sec_01 .top_slogan .guide img:last-child{margin-right:0;}
.sec_01 .main_layout .main_left{position:absolute; right:62%;}
.sec_01 .main_layout .main_left .illust_human1{margin-bottom:70px;}
.sec_01 .main_layout .main_left .illust_human1 .guide{margin-right:80px;}
.sec_01 .main_layout .main_left .illust_human1 .top{position:absolute; top:0; left:0;}
.sec_01 .main_layout .main_left .illust_human1 .top.on{animation:rotateInfinite 3s ease-in-out infinite;}
.sec_01 .main_layout .main_left .illust_human1 .bot{padding-top:275px;}
.sec_01 .main_layout .main_left .illust_paint{} 
.sec_01 .main_layout .main_left .illust_paint .guide{margin-left:180px;} 
.sec_01 .main_layout .main_left .illust_paint .top{position:absolute; top:0; left:0;}
.sec_01 .main_layout .main_left .illust_paint .top.on{animation: floatY 2s ease-in-out infinite;}
.sec_01 .main_layout .main_left .illust_paint .bot{padding-top:60px;}
.sec_01 .main_layout .main_mid{display:flex; flex-direction: column; align-items: center;}
.sec_01 .main_layout .main_mid .mm_top{margin-bottom:10px;}
.sec_01 .main_layout .main_right{position:absolute; left:59%;}
.sec_01 .main_layout .main_right .illust_driver .top,
.sec_01 .main_layout .main_right .illust_robot .top,
.sec_01 .main_layout .main_right .illust_human2 .top{position:absolute; top:0; left:0;}
.sec_01 .main_layout .main_right .illust_driver .top.on{animation:rotateInfinite 2s ease-in-out infinite;}
.sec_01 .main_layout .main_right .illust_robot .top.on{animation:bounce 1s ease-in-out infinite;}
.sec_01 .main_layout .main_right .illust_driver .guide{margin-top:60px;}
.sec_01 .main_layout .main_right .illust_driver .bot{margin-left:50px; padding-top:110px;}
.sec_01 .main_layout .main_right .illust_robot{margin-top:-50px;}
.sec_01 .main_layout .main_right .illust_robot .guide{margin-left:350px;}
.sec_01 .main_layout .main_right .illust_robot .bot{padding-top:152px;}
.sec_01 .main_layout .main_right .illust_human2{margin-top:-20px;}
.sec_01 .main_layout .main_right .illust_human2 .guide{margin-left:80px;}
.sec_01 .main_layout .main_right .illust_human2 .bot{padding-top:300px;}
.sec_01 .main_layout .main_right .illust_human2 .top.on{animation: moveLeftRight 2s ease-in-out infinite;}


.main_left,
.main_mid,
.main_right {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease;
}

.main_left.show,
.main_mid.show,
.main_right.show {
    opacity: 1;
    transform: translateY(0);
}

/* on-trigger는 이미 이렇게 돼있을 가능성 높음 */
.on-trigger {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s ease;
}

.on-trigger.on {
    opacity: 1;
    transform: scale(1);
}


/************** sec02 ****************/
.sec_02{padding:80px 0;background:var(--main-color) url(../img/sec02_bg.jpg) repeat-x bottom left;}
.sec_02 .layout{position:relative; max-width:1200px;}
.sec_02 .layout .videoWrap {position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: #000; box-shadow:0 10px 0 rgba(25,24,119,0.2); border-radius: 30px; margin-bottom:10px;}
.videoWrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
.sec_02 .left_illust{position:absolute;left:-230px; top:30%;}
.sec_02 .left_illust .guide .bot{padding-top:320px;}
.sec_02 .left_illust .guide .top{position: absolute; top: 0; left: 0;}
.sec_02 .left_illust .guide .top.on{animation:rotateInfinite 2s ease-in-out infinite;}

.sec_02 .right_illust{position:absolute; right:-192px; top:5%;}
.sec_02 .right_illust .guide .bot{margin-left:6px; padding-top:150px;}
.sec_02 .right_illust .guide .top{position: absolute; top: 0; left: 0;}
.sec_02 .right_illust .guide .top.on{animation: floatY 2s ease-in-out infinite;}


/* 위아래 반복 애니메이션 */
@keyframes floatY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 흔들흔들 반복 애니메이션 */
@keyframes rotateInfinite {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0);
  }
}
/* 통통 튀는 점프 애니메이션 */
@keyframes bounce {
  0%, 100% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 40px;
    animation-timing-function: ease-out;
  }
}

@keyframes moveLeftRight {
  0%, 100% {
    left: 0;
  }
  50% {
    left: 50px; /* 이동 거리 조절 */
  }
}
/************** sec03 ****************/
.sec_03{background:#2aaada;}
.sec_03 .sec_03_wrap{padding-top:150px; width:100%; background:#2aaada url(../img/sec03_bg.png) repeat-x bottom left; overflow: hidden;}
.sec_03 .sec_03_wrap .layout{display:flex; flex-direction: column; align-items: center;  position: relative; z-index: 10;}
.sec03_lst{width:100%; display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px; margin-bottom:20px;}
.sec03_lst li{background: var(--main-color-white); border:2px solid var(--main-color-navy); padding:25px; transition:all 0.3s;}
.sec03_lst li:nth-of-type(1){border-radius: 30px 0 0 0;}
.sec03_lst li:nth-of-type(3){border-radius: 0 30px 0 0;}
.sec03_lst li:nth-of-type(4){border-radius: 0 0 0 30px;}
.sec03_lst li:nth-of-type(6){border-radius: 0 0 30px 0;}
.sec03_lst li a{display:flex; flex-direction: column; align-items: center;}
.sec03_lst li a .imgBx{margin-bottom:20px; width:145px; height:145px; display:flex; align-items:center; justify-content:center; background:#deedf3; border-radius:50%;  }
.sec03_lst li a strong{font-size:1.2em; color:var(--main-color-navy);}

.sec03_lst li:hover{transform: translateY(-10px); background: var(--main-color-navy);  box-shadow:0 10px 0 rgba(25,24,119,0.2); }
.sec03_lst li:hover a .imgBx{background:var(--main-color-white);}
.sec03_lst li:hover a strong{color:var(--main-color-white);}

.sec03_bot{margin-bottom:42px; position:relative;}
.sec03_bot .bot_illust2 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(0);
  transition: none;
}

/* .on 붙었을 때 등장 + 깜빡이기 제어 */
.sec03_bot .bot_illust2.on {
  animation: fadeInGrow 1s ease-out forwards, flicker 2s ease-in-out 1s infinite;
}

/* 등장 (fadeInGrow) */
@keyframes fadeInGrow {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 깜빡임 (flicker) */
@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  40% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.4;
  }
  70% {
    opacity: 1;
  }
  85% {
    opacity: 0.8;
  }
}

.fire_wrap{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.fire_wrap .fire_left{position:absolute; top:31%; left:0;}
.fire_wrap .fire_left .top{margin-left:35%;}
.fire_wrap .fire_left .bot{margin-left:-26%;}
.fire_wrap .fire_right{position:absolute; top:22%; right:1%;}
.fire_wrap .guide img {
  opacity: 0;
  transform: scale(0);
}
.fire_wrap .guide .on{
  animation: firePop 5s ease-in-out infinite;
  /* 기본 delay는 따로 지정해줄 예정 */}

/* 폭죽 팡! → 살짝 커졌다가 → 유지 → 작아지면서 사라짐 */
@keyframes firePop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1); /* 팡! */
  }
  30% {
    transform: scale(0.9); /* 원래 크기 */
  }
  70% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

/* 이미지별로 어긋나게 delay 설정 */
.fire_left .top.on {
  animation-delay: 0s;
}
.fire_right .on {
  animation-delay: 0.4s;
}
.fire_left .bot.on {
  animation-delay: 0.8s;
}



/**********************************************************/
/*******************      서브     ************************/
/*********************************************************/
.sub{min-height:100vh; width:100%; padding-top:100px;}
/* 준비중 이미지 */
.preBx{display:flex; align-items: center; justify-content: center; flex-direction: column; padding:10% 0;}
.preBx p{text-align: center; color:var(--main-color-white); margin-top:50px; font-size:1.2em;}
/*.preBx .on{animation:fadeInGrow 2s ease-in-out forwards;}*/
.preBx img,
.preBx p {
  animation: none; /* 초기 상태에서 애니메이션 없음 */
}

.preBx img.on {
  animation: floatY 2s ease-in-out infinite;
  animation-delay: 0s;
}

.preBx p.on {
  animation: floatY 2s ease-in-out infinite;
  animation-delay: 0.3s;
}

.sub .fp-overflow{min-height:100vh;}
.sub .section .layout{height:100%; box-sizing:border-box;}

/* 01-메이커란 */
.sub_tit{position:relative; background:var(--main-color-green); border:2px solid var(--main-color-navy); font-size:2em; color:var(--main-color-navy); font-weight:bold; box-shadow:0 10px 0 rgba(25,24,119,0.4); padding:15px 80px; margin-bottom:50px;}
.sub_tit:before{position:absolute; bottom:-2px; right:-2px; background:url(../img/sub/sub_tit_border.jpg); width:20px; height:20px; content:'';}


.sub_maker{}
.sub01_sec01 .layout{display:flex; justify-content: space-between; align-items: center;}
.sub01_sec01 .layout .maker01_left{display:flex; flex-direction: column; max-width:50%;}
.sub01_sec01 .layout .maker01_left .title{margin-bottom:60px;}
.sub01_sec01 .layout .maker01_left .title .top{margin-bottom:20px;}
.sub01_sec01 .layout .maker01_left .desc{color:var(--main-color-navy); font-size:1.5em; letter-spacing: -0.05em;}
.sub01_sec01 .layout .maker01_right{position:relative; width:50%;}
.sub01_sec01 .layout .maker01_right .maker_bg{position:absolute; top:13%; left:0; width:100%; height:100%; z-index: -1;}
.sub01_sec01 .layout .maker01_right .maker_bg .light01{ position:absolute; top:0; }
.sub01_sec01 .layout .maker01_right .maker_bg .light02{position:absolute; top:0;}
.sub01_sec01 .layout .maker01_right .maker_bg .light03{position:absolute;top:0; }

.sub01_sec01 .layout .maker01_right .maker_bg .light01.on{animation-delay: 0s;}
.sub01_sec01 .layout .maker01_right .maker_bg .light02.on{animation-delay: 0.3s;}
.sub01_sec01 .layout .maker01_right .maker_bg .light03.on{animation-delay: 0.6s;}
.sub01_sec01 .layout .maker01_right .word{position:absolute; padding:15px 25px; border-radius: 50px; background: var(--main-color-white);}
.sub01_sec01 .layout .maker01_right .word.letter_play{right:0; top:158px;}
.sub01_sec01 .layout .maker01_right .word.letter_make{left:0; top:316px;}
.sub01_sec01 .layout .maker01_right .word.letter_fun{right:40px; top:512px;}


.sub01_sec02{} 
.sub01_sec02 .layout{display:flex; align-items: center; justify-content: center; position:relative;overflow:hidden;} 
.sub01_sec02 .layout .star_top{position:absolute; left:0; top:12%;}
.sub01_sec02 .layout .star_bot{position:absolute; right:0; bottom:7%;}
.big_word{font-size:7.2em; font-weight:bold; padding:30px 100px; border-radius: 130px; box-shadow:0 10px 0 rgba(25,24,119,0.4);}
.big_word.white{background:var(--main-color-white);}
.big_word.green{background:var(--main-color-green);}
.big_word.navy{background:var(--main-color-navy); color:var(--main-color-white);}
.sub01_sec02 .layout .maker_cont.before ul{display:flex; align-items: center;  justify-content: center;}
.sub01_sec02 .layout .maker_cont.before ul li{display:flex; flex-direction: column; align-items: center;}
.sub01_sec02 .layout .maker_cont.before ul li .small{color:var(--main-color-white); font-size:1.8em; margin-top:50px;}
.sub01_sec02 .layout .maker_cont.before ul li .plus{border-radius: 50%; margin:0 30px 50px; font-size:5em; font-weight:bold; background:#008bbf; color:#43b2db; width:135px; height:135px; display:flex; align-items: center; justify-content: center;}
.sub01_sec02 .layout .maker_cont.after{display:flex; align-items: center; flex-direction: column;}
.sub01_sec02 .layout .maker_cont.after .mid{margin:50px auto ;}
.sub01_sec02 .layout .maker_cont.after .mid strong,
.sub01_sec03 .layout .move_cont .left strong{font-size:3.2em;}
.sub01_sec02 .layout .maker_cont.after .mid span,
.sub01_sec03 .layout .move_cont .left span{font-size:2.2em;}
.sub01_sec02 .layout .maker_cont.after .mid,
.sub01_sec02 .layout .maker_cont.after .bot{color:#040429;text-align: center;}
.sub01_sec02 .layout .maker_cont.after .bot,
.sub01_sec03 .layout .move_cont .right{font-size:1.3em;}

.star_top,
.star_bot {
  opacity: 0;
  transform: scale(0.8);
  transition: none;
  z-index: -1;
}

/* on 클래스가 붙었을 때 애니메이션 실행 */
@keyframes starPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.0);
  }
}

.star_top {
  animation: starPulse 2s ease-in-out 0s infinite;
}

.star_bot{
  animation: starPulse 2s ease-in-out 1s infinite; /* 1초 딜레이로 교차 */
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.sub01_sec02 .layout .maker_cont.before ul li {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

.sub01_sec02 .layout .maker_cont.before ul li:nth-child(1) {
  animation-delay: 0.2s;
}
.sub01_sec02 .layout .maker_cont.before ul li:nth-child(2) {
  animation-delay: 0.6s;
}
.sub01_sec02 .layout .maker_cont.before ul li:nth-child(3) {
  animation-delay: 1s;
}

@keyframes fadeUpSeq {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sub01_sec02 .maker_cont.after > * {
  opacity: 0;
  transform: translateY(20px);
  animation-fill-mode: forwards;
  animation-name: none;
}

/* .top 안 이미지 width 늘었다 줄었다 반복 */
.move_tit .top img {
    width: 0;
    overflow: hidden;
    animation: revealImg 3s ease-in-out infinite;
    display: inline-block;
}

@keyframes revealImg {
    0% { width: 0; opacity: 0; }
    30% { width: 220px; opacity: 1; } /* 원하는 최대 너비로 조절 */
    70% { width: 220px; opacity: 1; }
    100% { width: 0; opacity: 0; }
}


/* .img_change 안의 이미지 기본 숨김 */
.img_change img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out;
}

.img_change img.active {
    display: block;
    opacity: 1;
    z-index: 1;
}

.maker_cont_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height:100%;
}

.maker_cont {
  position: absolute;
  top:50%;
  left: 50%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease;
  text-align: center;
   transform:translate(-50%, -50%);
}

.maker_cont.active {
  opacity: 1;
  visibility: visible;
}
.sub01_sec03 .layout{display:flex; flex-direction: column;     justify-content: center}
.sub01_sec03 .layout .move_tit{margin-bottom:50px; margin-top:30px;}
.sub01_sec03 .layout .move_tit p{font-size:9em; color:#040429; font-weight: bold; line-height:1.2em;}
.sub01_sec03 .layout .move_tit .top,
.sub01_sec03 .layout .move_tit .bot{display:flex; align-items: center;}
.sub01_sec03 .layout .move_cont{width:100%; display:flex; justify-content: space-between;}
.img_change{position:relative; width: 120px; height:120px; margin:40px 10px 0;}
.img_change img[class*='.img_']{position:absolute; top:0; left:0; width:100%; height:100%;}
.sub01_sec03 .layout .move_cont .right{margin-top:30px; color:var(--main-color-white)}
.sub01_sec03 .layout .move_cont .left{color:var(--main-color-navy)}

.sub01_sec04 .layout,
.sub01_sec05 .layout{display:flex; flex-direction: column; align-items: center;  justify-content: center}


.sub01_sec04 .layout .his_sliderWrap{position:relative; width:100%;}
.sub01_sec04 .layout .his_sliderWrap .btn_prev,
.sub01_sec04 .layout .his_sliderWrap .btn_next,
.sub01_sec05 .space_sliderWrap .btn_prev,
.sub01_sec05 .space_sliderWrap .btn_next{position:absolute; top:50%; transform: translateY(-50%);}
.sub01_sec04 .layout .his_sliderWrap .btn_prev,
.sub01_sec05 .space_sliderWrap .btn_prev{left:0;}
.sub01_sec04 .layout .his_sliderWrap .btn_next,
.sub01_sec05 .space_sliderWrap .btn_next{right:0;}
.btn_prev,
.btn_next{background:var(--main-color-white); transition: all 0.3s; border-radius: 50%; width: 60px;  height: 60px; display:flex; justify-content:center; align-items:center;  }
.btn_prev:hover,
.btn_next:hover{box-shadow:0 10px 0 rgba(25,24,119,0.4); cursor: pointer;}
.his_sliderWrap .his_slider,
.space_sliderWrap .space_slider{width:calc(100% - 150px); margin:0 auto;}
.his_sliderWrap .his_slider ul,
.space_sliderWrap .space_slider ul{width:100%;}

.sub01_sec04 .layout .his_sliderWrap ul li p{color:#040429; text-align: center; font-size:1.2em; margin-top:20px;}

.his_sliderWrap .slick-track {
    display: flex;
    align-items: stretch;
}

.his_sliderWrap ul li .posterBx{ margin-bottom:30px; overflow: hidden;}
.his_sliderWrap ul li .posterBx img{height:100%; height:100%; object-fit: cover;}



.sub01_sec05 .space_sliderWrap{position:relative; width:100%;}
.sub01_sec05 .space_sliderWrap .space_slider ul{width:100%;}
.sub01_sec05 .space_sliderWrap ul img{margin:0 auto;}
.sub01_sec05 .space_sliderWrap ul li{border-radius: 15px; background: var(--main-color-white); padding:15px;}
.sub01_sec05 .space_sliderWrap ul li p{background:#c3e2ee; text-align: center; width:100%; border-radius: 15px; color:var(--main-color-navy); padding:15px 0; margin-top:20px; white-space: nowrap;}

@media screen and (max-width: 1750px) {
  .sec_01 .main_layout .main_mid .mm_top{max-height:55vh;}
  .preBx{padding:5% 0;}
}

@media screen and (max-width: 1600px) {
    /************** sec01 ****************/
    .sec_01 .main_layout .main_right{left:62%;}
    .sec_01 .main_layout .main_left{right:64%;}


    /************** sec02 ****************/
    .sec_02{background-size: contain;}
    .sec_02 .layout{max-width:1100px;}
    .sec_02 .left_illust,
    .sec_02 .right_illust{transform: scale(0.8);}
    .sec_02 .right_illust{right:-140px;}
    .sec_02 .left_illust{left:-210px;}



/**********************************************************/
/*******************      서브     ************************/
/*********************************************************/
.big_word{font-size:7em; padding:30px 80px; }
.sub01_sec02 .layout .maker_cont.after .mid strong, .sub01_sec03 .layout .move_cont .left strong{font-size:2.8em;}
.sub01_sec02 .layout .maker_cont.after .mid span, .sub01_sec03 .layout .move_cont .left span{font-size:1.8em;}

.sub01_sec02 .layout .maker_cont.after .bot, .sub01_sec03 .layout .move_cont .right{font-size:1em;}
.sub01_sec01 .layout .maker01_left .desc{font-size:1.2em;}

}


@media screen and (max-width: 1440px) {
  .layout{max-width:calc(100% - 60px);}

    #header .layout #nav li a{white-space: nowrap;}
    #header .layout #nav > li > a{font-size:1.1em; padding:30px;}
    #header .layout #nav > li > .submenu li a{padding:10px;}

    #footer .layout .ft_top{flex-direction: column;}
    #footer .layout .ft_top .ft_r{align-items: center; margin-top:30px;}


    /************** sec01 ****************/
    .sec_01{background-size:contain;}
    .sec_01 .main_layout .main_right{left:65%;}
    .sec_01 .main_layout .main_left{right:70%;}
    .sec_01 .main_layout .main_mid .mm_top{width:90%;}
    .sec_01 .main_layout .main_right .illust_robot .guide{margin-left:250px;}
    .sec_01 .main_layout .main_right .illust_robot .bot{padding-top:160px;}

    /************** sec02 ****************/
    .sec_02 .layout{max-width:950px;}
    .sec_02 .left_illust,
    .sec_02 .right_illust{transform: scale(0.6);}
    .sec_02 .left_illust{left:-185px;}
    .sec_02 .right_illust{right:-114px; top:3%;}

    /************** sec03 ****************/
    .sec03_lst li a strong{font-size:1.1em;}
    .sec03_lst li a .imgBx{width:130px; height:130px;}
    .sec03_lst li a .imgBx img{transform: scale(0.9);}
    .fire_wrap .fire_left,
    .fire_wrap .fire_right{transform: scale(0.7);}
    .fire_wrap .fire_right{top:50%;}
    .fire_wrap .fire_left{top:36%;}

    .quick_fixed{bottom:30px; right:30px;}


/**********************************************************/
/*******************      서브     ************************/
/*********************************************************/
.sub_tit{font-size:1.8em; padding:15px 60px; margin-bottom:40px;}
#footer:before{background-size:cover; height:80px; top:-80px;}
.section,
.sub{min-height: auto;}
.sub01_sec01 .layout .maker01_right .word{ transform:scale(0.8); padding:12px 20px;}
.sub01_sec01 .layout .maker01_left {max-width:45%;}
.sub01_sec01 .layout .maker01_right .word.letter_play{top:26%;}
.sub01_sec01 .layout .maker01_right .word.letter_make{top:46%;}
.sub01_sec01 .layout .maker01_right .word.letter_fun{top:80%; right:4%;}

.sub01_sec02 .layout{max-width:100%;}


}


@media screen and (max-width:1200px) {
        /************** sec02 ****************/
        .sec_02 {height:100vh!important; padding:0;}
        .sec_02 .layout{max-width:calc(100% - 50px); height:100vh; display:flex; justify-content: center; align-items: center;}
        .fp-is-overflow>.fp-overflow{overflow-y:visible;}
        .sec_02 .left_illust{left:-40px; top:auto; bottom:-40px;}
        .sec_02 .right_illust{right:10px; top:80px;}


/**********************************************************/
/*******************      서브     ************************/
/*********************************************************/
.sub01_sec01 .layout .maker01_left{max-width:40%;}
.sub01_sec01 .layout .maker01_right{width:54%;}

.big_word{font-size:6em; padding:20px 60px;}
.sub01_sec02 .layout .maker_cont.before ul li .plus{width:100px; height:100px; font-size:4em;}
.sub01_sec02 .layout .maker_cont.after .mid strong, .sub01_sec03 .layout .move_cont .left strong{font-size:2.2em;}
.sub01_sec02 .layout .maker_cont.after .mid span, .sub01_sec03 .layout .move_cont .left span{font-size:1.3em;}
.sub01_sec02 .layout .maker_cont.before ul li .small{font-size:1.2em; margin-top:30px;}
.sub01_sec02 .layout .maker_cont.after .mid{margin:30px auto;}


.sub01_sec03 .layout .move_tit p{font-size:7em;}
.move_tit .top img{max-height:130px;}
.img_change{width:88px; height:88px; margin: 40px 5px 0;}
.sub01_sec03 .layout .move_cont .right{margin-top:10px; word-break: keep-all;}

@keyframes revealImg {
    0% { width: 0; opacity: 0; }
    30% { width: 150px; opacity: 1; } /* 원하는 최대 너비로 조절 */
    70% { width: 150px; opacity: 1; }
    100% { width: 0; opacity: 0; }
}

.sub01_sec04 .layout .his_sliderWrap ul li p,
.sub01_sec05 .space_sliderWrap ul li p{font-size:1em;}

}

@media screen and (max-width:1024px) {
  body{font-size:16px;}
  .layout{max-width:calc(100% - 40px);}
    #header{padding:0;}
  #header h1{display:flex; justify-content: space-between; align-items: center; width:100%; padding:15px 0; left:0; transform:none;  backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;}
  #header h1 .logo{max-width:250px;}

      #header .layout {
        flex-direction: column;
        align-items: flex-start;
    }

    #header .layout #nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--main-color-navy);
    }


    #header .layout #nav > li {
        width: 100%;
        margin:0;
    }

    #header .layout #nav > li > a {
        padding: 15px 20px;
        display: block;
    }

    #header .layout #nav > li > .submenu {
      position: static;
        transform: none;
        background: #1b2b43;
        border-radius: 0;
        padding: 0;
    }

    #header .layout #nav > li.active > .submenu {
        display: block;
    }

    .mobBtn {
        display: block;
    }



    #footer .layout .ft_top .ft_l ul{flex-direction: column;}
    #footer .layout .ft_top .ft_l ul li:first-child{margin:0 0 20px 0;}

.quick_fixed{right:15px; bottom:15px;}
.quick_fixed a,
.quick_fixed .topBtn{width:55px; height:55px; border-radius: 50%; transition: all 0.3s;}

.quick_fixed a:hover,
.quick_fixed .topBtn:hover{box-shadow:0 5px 0 rgba(25,24,119,0.2);transform: none;}


    /************** sec01 ****************/
    .sec_01 .main_layout .main_left{right:68%;}
    .sec_01 .main_layout .main_right{left:62%;}
    .sec_01 .main_layout .main_left .illust_human1,
    .sec_01 .main_layout .main_left .illust_paint,
    .sec_01 .main_layout .main_right .illust_driver,
    .sec_01 .main_layout .main_right .illust_robot,
    .sec_01 .main_layout .main_right .illust_human2{transform: scale(0.6);}
    .sec_01 .main_layout .main_mid{transform: scale(0.9);}
    .sec_01 .main_layout .main_right .illust_robot .guide{margin-left:200px;}

    .sec_01 .main_layout .main_right .illust_human2 .bot{padding-top:116%;}



    /************** sec03 ****************/
    .sec_03 .sec_03_wrap{background-size:140%; background-position:50% 101%;}
    .sec03_bot{margin-bottom:30px;}
    .sec03_lst li a .imgBx{width:120px; height:120px;}
    .fire_wrap .fire_left{top:0;}
    .fire_wrap .fire_right{top:20%;}


/**********************************************************/
/*******************      서브     ************************/
/*********************************************************/
.sub_tit{font-size:1.5em; padding:10px 60px; margin-bottom:30px;     box-shadow: 0 5px 0 rgba(25, 24, 119, 0.4);}
.sub01_sec01 .layout .maker01_left .title{margin-bottom:40px;}
.sub01_sec01 .layout .maker01_left .title .top{max-width:150px;}
.sub01_sec01 .layout .maker01_left{max-width:calc(46% - 30px);}
.sub01_sec01 .layout .maker01_right .word{transform: scale(0.7); padding:12px 15px;}
.sub01_sec01 .layout .maker01_right .word.letter_fun{right:0;}
.sub01_sec01 .layout .maker01_left .desc{word-break: keep-all;}


.big_word{font-size:5em; padding:10px 50px;}
.sub01_sec02 .layout .maker_cont.before ul li .plus{width:80px; height:80px; font-size:3em;}
.sub01_sec02 .layout .maker_cont.after .mid strong, .sub01_sec03 .layout .move_cont .left strong{font-size:2em;}
.sub01_sec02 .layout .maker_cont.after .mid span, .sub01_sec03 .layout .move_cont .left span{font-size:1.125em;}
.sub01_sec02 .layout .maker_cont.before ul li .small{font-size:1.125em; margin-top:20px;}
.sub01_sec02 .layout .maker_cont.after .mid{margin:20px auto;}

}






@media screen and (max-width: 768px) {
    .layout,
    .sec_02 .layout{max-width:calc(100% - 30px);}
    
.sec_01 .main_layout .main_mid .mm_top{max-height:none;}
  body{font-size:14px;}
    #footer{padding:40px 0;}
    #footer .layout .ft_top{margin-bottom:30px;}
    #footer .layout .ft_top .ft_l ul li .ft_tit{padding:5px 10px; margin-right:10px;}
    #footer .layout .ft_top .ft_l ul li .ft_cont img{margin-right:10px; max-width:100px;}
    #footer .layout .ft_top .ft_r p{display:flex; flex-direction: column; align-items: center;}
    #footer .layout .ft_top .ft_r p span:first-child{padding-right:0; margin-right:0;}
    #footer .layout .ft_top .ft_r p span:first-child:after{display:none;}
    #footer .layout .copy{text-align: center;}

    /************** sec01 ****************/
    .sec_01{background:none; position:relative;}
    .sec_01:before{position:absolute; content:''; width:100%; height:100%; background:url(../img/mob_sec01_bg_top.png) no-repeat 100% 10%; background-size:35%; z-index:-1;}
    .sec_01:after{position:absolute; content:''; width:100%; height:100%; background:url(../img/mob_sec01_bg_bot.png) no-repeat 10% 95%; background-size:30%; z-index:-1;}
    .sec_01 .top_slogan{transform: scale(0.8);}
    .sec_01 .main_layout .main_left .illust_paint .guide{margin-left:100px;}
    .sec_01 .main_layout .main_left{right:65%;}
    .sec_01 .main_layout .main_mid{transform: scale(0.7);}
    .sec_01 .main_layout .main_right .illust_robot,
    .sec_01 .main_layout .main_left .illust_paint{display:none;}
    .sec_01 .main_layout .main_left .illust_human1 .guide{margin-right:20px;}
    .sec_01 .main_layout .main_right .illust_human2 .guide{margin-left:20px;}
    .sec_01 .main_layout .main_right .illust_robot .bot{padding-top:210%;}
    .sec_01 .main_layout .main_right{left:68%;}
    .sec_01 .main_layout .main_left{right:72%;}
    .sec_01 .main_layout .main_left .illust_human1 .bot{padding-top:138%;}

    /************** sec02 ****************/
    .sec_02 .layout .videoWrap{border-radius: 15px; z-index:10;}
    .sec_02{position:relative; background: linear-gradient(180deg,rgba(67, 178, 219, 1) 0%, rgba(42, 170, 218, 1) 100%);}
    .sec_02:before{position:absolute; content:''; background:url(../img/mob_sec02_bg_top.png) no-repeat 0 25%; width:100%; height:100%; background-size: 30%;}
    .sec_02:after{position:absolute; content:''; background:url(../img/mob_sec02_bg_bot.png) no-repeat right bottom ; width:100%; height:100%; background-size: 30%;}

    /************** sec03 ****************/
    .sec_03 .sec_03_wrap{padding-top:80px;}
    .sec03_lst{grid-template-columns: 1fr 1fr;}
    .sec03_lst li{padding:20px;}
    .sec03_lst li:nth-of-type(2){border-radius: 0 30px 0 0;}
    .sec03_lst li:nth-of-type(3),
    .sec03_lst li:nth-of-type(4){border-radius: 0 0 0 0;}
    .sec03_lst li:nth-of-type(5){border-radius: 0 0 0 30px;}
    .sec03_lst li a .imgBx{width:100px; height:100px; margin-bottom:10px;}

    .sec03_bot{max-width:60%; padding-top:20px;}

    .sec_03 .sec_03_wrap{background-size:180%; background-position:bottom center;}
    .sec03_bot{margin-bottom:7%;}
    .fire_wrap{display:none;}
    .sec03_lst li:hover{transform: translateY(0); }


/**********************************************************/
/*******************      서브     ************************/
/*********************************************************/
.preBx{padding:35% 0;}
.preBx img{max-width:70%;}
.preBx p{font-size:1em;}
.sub_tit{font-size:1.2em; padding:10px 40px; margin-bottom:20px;}
.sub01_sec01 .fp-overflow{    overflow-y: visible!important ;}

.sub01_sec01 .layout{flex-direction: column;}
.sub01_sec01 .layout .maker01_left{max-width:100%; margin-bottom:50px;}
.sub01_sec01 .layout .maker01_right{width:100%;}
.sub01_sec01 .layout .maker01_left .title{display:flex; flex-direction: column; align-items: center; margin-bottom:20px;}
.sub01_sec01 .layout .maker01_left .title .top{width:30%;}
.sub01_sec01 .layout .maker01_left .title .bot{width:70%;}
.sub01_sec01 .layout .maker01_left .desc{text-align: center;}
.sub01_sec01 .layout .maker01_left .title .top{max-width: none;}
.sub01_sec01 .layout .maker01_right .word{transform: scale(0.6);}
.sub01_sec02 .layout {
    min-height: 100vh;
  }
  .big_word{font-size:4em; padding:0 35px;}
  .sub01_sec02 .layout .maker_cont.before ul li .plus{width:50px; height:50px; margin:0 10px 40px;}
  .sub01_sec02 .layout .maker_cont.after .bot{width:80%; margin:0 auto; word-break: keep-all;}
  .sub01_sec02 .layout .maker_cont.after .bot br{display:none;}

  .star_top,
.star_bot {
  transform: scale(0.6);
}

/* on 클래스가 붙었을 때 애니메이션 실행 */
@keyframes starPulse {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.8);
    opacity: 1;
  }
}
.sub01_sec03 .layout{padding:100px 0;}
.sub01_sec03 .layout .move_cont{flex-direction: column;}
.sub01_sec03 .layout .move_cont .right br{display:none;}
.move_tit .top img{max-height:80px;}
.sub01_sec03 .layout .move_tit p{font-size:5em;}
.img_change{width:45px; height:45px; margin:21px 3px 0;}
.sub01_sec03 .layout{align-items: center;}
.sub01_sec03 .layout .move_tit .top, .sub01_sec03 .layout .move_tit .bot{    justify-content: center;}
.sub01_sec03 .layout .move_cont p{text-align: center;}

.his_sliderWrap ul li .posterBx{margin-bottom:20px; display:flex; justify-content: center;}

.btn_prev, .btn_next{width:50px; height:50px;}
.his_sliderWrap .his_slider, .space_sliderWrap .space_slider{width:calc(100% - 120px);}
.sub01_sec05 .space_sliderWrap{margin-bottom:150px;}
}


@media screen and (max-width:425px) {
    /************** sec01 ****************/
    .sec_01:before{background: url(../img/mob_sec01_bg_top.png) no-repeat 96% 15%; background-size:30%;}
    .sec_01:after{background: url(../img/mob_sec01_bg_bot.png) no-repeat 5% 99%; background-size:26%;}
    .sec_01 .main_layout .main_right .illust_human2 .bot{margin-left:20px;}
    .sec_01 .main_layout .main_left .illust_human1{margin-bottom:150px;}
    .sec_01 .main_layout .main_left{right:68%;}


    /************** sec02 ****************/
    .sec_02 .left_illust, .sec_02 .right_illust{transform: scale(0.5);}
    .sec_02 .left_illust{bottom:auto; top:52%}
     .fp-is-overflow>.fp-overflow{overflow-y: visible!important;}
     .sec_02 .layout{height:auto; min-height:100vh;}
     .right_illust {top:60px;}



    /************** sec03 ****************/
    .sec03_lst{grid-gap:10px;}
    .sec03_lst li{padding:10px;}
    .sec03_lst li a .imgBx{width:90px; height:90px; margin-bottom:10px;}
    .sec03_lst li a .imgBx img{width:90%;}
    .sec03_lst li a strong{font-size:1em;}
    .sec03_bot{max-width: 75%;}
    .sec03_bot .bot_illust2{width: 20%;}
    .sec03_lst li:nth-of-type(1){border-radius: 15px 0 0 0;}
    .sec03_lst li:nth-of-type(2){border-radius: 0 15px 0 0;}
    .sec03_lst li:nth-of-type(5){border-radius: 0 0 0 15px;}
    .sec03_lst li:nth-of-type(6){border-radius: 0 0 15px 0;}
    .sec_03 .sec_03_wrap{padding-top:100px;}


    .sub01_sec03 .layout .move_tit p{font-size:3.8em;}
    .move_tit .top img{max-height:58px;}

@keyframes revealImg {
    0% { width: 0; opacity: 0; }
    30% { width: 100px; opacity: 1; } /* 원하는 최대 너비로 조절 */
    70% { width: 100px; opacity: 1; }
    100% { width: 0; opacity: 0; }
}

.img_change{width:36px; height:36px;}
.big_word{font-size:3em; padding:0 25px;}
}