/* BG Image */
.full-bg-image {
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: repeat;
background-size: cover;

}
.no-touch .full-bg-image { 
/*background-attachment: fixed;
background-size: cover;*/
}
.touch .full-bg-image { background-size: cover; }
.parallax-bg-1 .full-bg-image { background-image: url(../../img/main01.jpg) ;}
.parallax-bg-2 .full-bg-image { background-image: url(../../img/main02.jpg) ;}
.parallax-bg-3 .full-bg-image { background-image: url(../../img/main03.jpg); }
.parallax-bg-4 .full-bg-image { background-image: url(../../img/main04.jpg); }

.bg-black-color .full-bg-image { opacity:1; }


.sequence-theme { background-color: transparent; height:750px !important}

/* main -------------------------------------------------- */
.section { padding-top:91px}
.sequence {margin: 0 auto; position: relative; overflow: hidden; width: 100%; height: 750px !important; }
#sequence {/*height: 600px;*/ }
.sequence > .sequence-canvas {
height: 100%;
width: 100%; 
}

.sequence > .sequence-canvas > li {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
display: block;
list-style: none;
opacity: 1 !important;
}
.sequence > .sequence-canvas > li img { height: 100%; }

.sequence li > .sequence-entry {
position: absolute;
top: 0;
left: 0;
z-index: 11;
padding: 0px;
width: 100%;
height: 100%;
}

/* Next Prev Buttons -------------------------------------------------- */ 
.sequence-theme .sequence-prev,
.sequence-theme .sequence-next {
position: absolute;
top: 50%;
z-index: 999;
display: block;
margin-top: -25px;
width: 48px;
height: 80px;
font-size: 0;
cursor: pointer;
text-align: center;

-webkit-transition: all .30s ease-in-out;
transition: all .30s ease-in-out;
/* border:1px solid #fff;
-webkit-border-radius: 50%; border-radius: 50%;*/
}
.no-touch .sequence-theme .sequence-prev { left: -60px; }
.no-touch .sequence-theme .sequence-next { right: -60px; }
.touch .sequence-theme .sequence-prev { left: 40px; }
.touch .sequence-theme .sequence-next { right: 40px; }
.sequence-theme:hover .sequence-prev { left: 40px; }
.sequence-theme:hover .sequence-next { right: 40px; }
.sequence-theme .sequence-prev:after,
.sequence-theme .sequence-next:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
font-size: 52px;
font-family: 'fontello';
line-height: 1em;
}
.sequence-theme .sequence-next{background: url(../../img/btn_roll_right.png) no-repeat center center; background-size: contain}
.sequence-theme .sequence-prev{background: url(../../img/btn_roll_left.png) no-repeat center center; background-size: contain}

.sequence-pause {
bottom: 0;
cursor: pointer;
position: absolute;
z-index: 1000; 
}
.sequence-paused { opacity: 0.3; }
#sequence-preloader { background-color: #d9d9d9; }

/* Pagination -------------------------------------------------- */

.sequence-pagination { position: absolute; bottom: 15.5%; z-index: 10; display: none; width: 100%; text-align: center; margin:0 auto; font-size: 0;
-webkit-transition-duration: .5s;
transition-duration: .5s; 
}
.sequence-pagination .page { display: inline-block; width: 17px; height: 17px; margin: 0 1px; /*cursor: pointer;
-webkit-border-radius: 50%; border-radius: 50%;*/ background: url(../../img/bullet-out.png) no-repeat center center;}

.sequence-pagination .page span { display: inline-block; margin: 0px 3px; padding: 0px;
width: 17px; height: 17px;/* border-width: 1px; border-style: solid; border-color: transparent;
background-color: rgba(255,255,255,1); cursor: pointer; vertical-align: middle;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-webkit-border-radius: 50%;
border-radius: 50%;*/
}
.sequence-pagination .page.current,
.sequence-pagination .page:hover {background: url(../../img/bullet-over.png) no-repeat center center; }

.sequence-pagination .page.current span,
.sequence-pagination .page:hover span {
/* border-color: transparent;
background-color: #fff;
-webkit-transform: scale(1.4);
transform: scale(1.4);*/
}


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

.sequence-pagination { position: absolute; bottom: 18%; z-index: 10; display: none; width: 100%; text-align: center; font-size: 0;
-webkit-transition-duration: .5s;
transition-duration: .5s; }

}



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

.sequence-pagination { position: absolute; bottom: 20%; z-index: 10; display: none; width: 100%; text-align: center; font-size: 0;
-webkit-transition-duration: .5s;
transition-duration: .5s; }

}

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

.sequence-pagination { position: absolute; bottom: 22%; z-index: 10; display: none; width: 100%; text-align: center; font-size: 0;
-webkit-transition-duration: .5s;
transition-duration: .5s; }


}


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

.sequence-pagination { position: absolute; bottom: 25%; z-index: 10; display: none; width: 100%; text-align: center; font-size: 0;
-webkit-transition-duration: .5s;
transition-duration: .5s; }
.sequence-pagination .page { display: inline-block; width: 17px; height: 17px; margin: 0 2px; /*cursor: pointer;
-webkit-border-radius: 50%; border-radius: 50%;*/ background: url(../../img/bullet-out.png) no-repeat center center;}

}


@media screen and (max-width: 480px) {
.sequence-pagination .page{display:none;}
}


/* Fullscreen Image -------------------------------------------------- */
.sequence-canvas .parallax-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 100%;
height: 100%;
background-image: url(overlay-pattern.png);
background-repeat: repeat;
}
#sequence-fullscreen .animate-in .parallax-overlay {
z-index: 1;
background-color:transparent;/* rgba(0,0,0, .2) */
}
.animated-element {
position: relative;
opacity: 0;

-webkit-transition-duration: 1s;
transition-duration: 1s;
}
.animate-out .animated-element { opacity: 0; }
.animate-in .animated-element { opacity: 1; }

.full-bg-image.animated-element {
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-delay: 0;
transition-delay: 0;
background-position:center center !important
}


/* Elements -------------------------------------------------- */

.sequence-extra {display: table; width: 100%; max-width: 1200px; margin: 0 auto; height: 50%; padding-top:15%; vertical-align: middle; text-align:center; } /* ¸ÞÀÎÅؽºÆ® Àüü»çÀÌÁî, À§Ä¡, Á¤·Ä */
.sequence-content { width: auto; height: 100%; vertical-align: middle; border-top:0px solid #fff; }
.sequence-content { /*display: table-cell;*/ display: inline-block; color:#fff; }
.sequence-content .sequence-slogan,
.sequence-content .sequence-text,
.sequence-content .sequence-add { margin-bottom: 0px; opacity: 0; }

.sequence-content .sequence-slogan { font-size:60px; font-weight:600; line-height: 60px; letter-spacing: -2px; text-shadow:1px 1px 1px #444; }
.sequence-content .sequence-text { font-size:30px; font-weight:600; line-height: 30px; margin-top: 8%; text-shadow:1px 1px 1px #444;}
.sequence-content .sequence-add { font-size:18px; font-weight:600; margin-top: 4%; line-height: 30px; }
.sequence-slogan img { height: auto !important; margin: 0 auto; }
.sequence-content .sequence-slogan,
.sequence-content .sequence-text,
.sequence-content .sequence-add, .sequence-content .sequence-add1, .sequence-content .sequence-sign{
-webkit-transform: translateY(50px);
transform: translateY(50px);

-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-transition-duration: .7s;
transition-duration: .7s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.sequence-content .sequence-button {opacity: 0;

-webkit-transform: translateY(50px);
transform: translateY(50px);

-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
-webkit-transition-duration: .7s;
transition-duration: 1.7s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}

/* Animation -------------------------------------------------- */

/* Sequence Fullscreen */
.animate-out .sequence-slogan {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);

}
.animate-in .sequence-slogan {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);

-webkit-transition-delay: .6s;
transition-delay: .6s;
}

.animate-out .sequence-text {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
.animate-in .sequence-text {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);

-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}


.animate-out .sequence-add {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
.animate-in .sequence-add {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);

-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}

.animate-out .sequence-add1 {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
.animate-in .sequence-add1 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);

-webkit-transition-delay: 2.4s;
transition-delay: 2.4s;
}




.animate-out .sequence-button {
opacity: 0;
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
.animate-in .sequence-button {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);

-webkit-transition-delay: 1.6s;
transition-delay: 1.6s;
}




/* Sequence with Extra Radius */

.sequence-canvas .extra-radius {
opacity: 0;

-webkit-transition: -webkit-transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
transition: transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
-webkit-transform: scale(0);
transform: scale(0);
}

.animate-out .extra-radius {
opacity: 0;

-webkit-transform: scale(0);
transform: scale(0);
} 

.animate-in .extra-radius {
opacity: 1;

-webkit-transform: scale(1);
transform: scale(1);
}

.sequence-canvas .inner-content h2 {
opacity: 0;
-webkit-transition-duration: 0;
transition-duration: 0;
-webkit-transition-property: opacity, transform;
transition-property: opacity, transform;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.sequence-canvas .inner-content > h2:nth-child(1) {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
.sequence-canvas .inner-content > h2:nth-child(2) {
-webkit-transform: translateX(15px);
transform: translateX(15px);
}
.sequence-canvas .inner-content > h2:nth-child(3) {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
.sequence-canvas .inner-content > h2:nth-child(4) {
-webkit-transform: translateX(15px);
transform: translateX(15px);
}
.sequence-canvas .inner-content > h2:nth-child(5) {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
.animate-in .inner-content > h2:nth-child(1) { 
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
-webkit-transition-duration: .6s; 
transition-duration: .6s; 
}
.animate-in .inner-content > h2:nth-child(2) { 
-webkit-transition-delay: 1.8s;
transition-delay: 1.8s;
-webkit-transition-duration: .6s; 
transition-duration: .6s; 
}
.animate-in .inner-content > h2:nth-child(3) { 
-webkit-transition-delay: 2.4s;
transition-delay: 2.4s;
-webkit-transition-duration: .6s; 
transition-duration: .6s; 
}
.animate-in .inner-content > h2:nth-child(4) { 
-webkit-transition-delay: 3s;
transition-delay: 3s;
-webkit-transition-duration: .6s; 
transition-duration: .6s; 
}
.animate-in .inner-content > h2:nth-child(5) { 
-webkit-transition-delay: 3.6s;
transition-delay: 3.6s;
-webkit-transition-duration: .6s; 
transition-duration: .6s; 
}

.sequence-canvas .animate-in .inner-content > h2 { 
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
} 





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

.sequence-theme { height:700px !important}
.sequence {height:700px !important}
.sequence-content { padding-top: 6%; }
.sequence-extra { width:100% !important; text-align:center; }
/* .sequence-add1 img { width: 30%; }*/
}

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

.sequence-theme { height:650px !important}
.sequence {height:650px !important}
.sequence-content { padding-top: 7%; }
}


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

.section { padding-top: 65px; }
.sequence-theme { height:65vw !important}
.sequence { height:65vw !important}

.no-touch .full-bg-image { }


.sequence-content { padding-top: 10%; }
.sequence-content { padding-left: 0%; }
.sequence-content .sequence-slogan { font-size:35px; font-weight:600; line-height: 60px; }
.sequence-content .sequence-text { font-size:25px; font-weight:600; line-height: 30px; margin-top: 5%; letter-spacing: -1px; }
.sequence-content .sequence-add { font-size:14px; margin-top: 3%; line-height: 20px; }

/*.sequence-slogan img { width: 80%; max-width: 748px; }*/



}

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

.sequence-content { padding-top: 6%; }

}

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


.sequence li > .sequence-entry { } 

.touch .sequence-theme .sequence-prev { left: 10px; }
.touch .sequence-theme .sequence-next { right: 10px; }
.sequence-theme:hover .sequence-prev { left: 10px; }
.sequence-theme:hover .sequence-next { right: 10px; }


.sequence-theme .sequence-prev, .sequence-theme .sequence-next { width:40px; height:40px;}

.sequence-content {}
.sequence > .sequence-canvas > li img { }
.sequence-content { padding-top: 4%; }


}

@media only screen and (max-width: 767px) and (orientation: portrait) {



#sequence li > .sequence-entry { /*padding: 25px;*/ } 


.sequence-content .sequence-slogan { font-size:30px; font-weight:600; line-height: 40px; }
.sequence-content .sequence-text { font-size:20px; font-weight:600; line-height: 30px; margin-top: 5%; letter-spacing: -1px; }
.sequence-content .sequence-add { font-size:13px; margin-top: 3%; line-height: 20px; }

} 

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



#sequence li > .sequence-entry { padding: 0; } 




} 


@media screen and (max-width: 560px) {
.sequence-content { padding-top: 4vw; }
.sequence > .sequence-canvas > li img { }


} 


@media screen and (max-width: 460px) {
.section { padding-top:65px}
.sequence-theme { height:70vw !important}
.sequence { height:70vw !important}
.sequence-content .sequence-slogan { font-size:25px; font-weight:600; line-height: 40px; letter-spacing: -1px; }
.sequence-content .sequence-text { font-size:15px; font-weight:600; line-height: 30px; margin-top: 3%; letter-spacing: -1px; }
.sequence-content .sequence-add { font-size:13px; margin-top: 2%; line-height: 20px; letter-spacing: -1px; }
}






#sbtom{ position:absolute; bottom:3%; width:100%; margin: 0 auto; text-align:center; z-index:111; -webkit-transition-duration: .5s; transition-duration: .5s; }
#sbtom img{width:82px; height:92px;}



@media all and (max-width:860px) {

#sbtom img{width:69.7px; height:78.2px;}

}



@media all and (max-width:640px) {

#sbtom img{width:61.5px; height:69px;}

}



@media all and (max-width:420px) {
#sbtom{display:none;}
}










/* ************************************************** */
/* === mv2 Banner: fully namespaced =================================== */
#itple-mv2{
  --mv2-w:1270px; --mv2-h:500px;
  --mv2-acc:#3ddcff; --mv2-acc2:#7ef7a7; --mv2-txt:#eef6ff; --mv2-muted:#a8b3c7;
  --mv2-btn1:#131a2e; --mv2-btn2:#0b1530; --mv2-btnH:#1d2b4d; --mv2-ring:#49e6ff66;
}




/* ½½¶óÀÌµå ¿µ¿ª¿¡¼­ Áß¾Ó Á¤·Ä ¹× À߸² ¹æÁö (mv2 ½½¶óÀ̵å ÇÑÁ¤) */
#sequence-fullscreen .sequence-canvas > li.mv2{ position:relative; min-height:700px !important; overflow:visible !important; }
#sequence-fullscreen .sequence-canvas > li.mv2 .full-bg-image{ position:absolute; inset:0; z-index:0; }
#sequence-fullscreen .sequence-canvas > li.mv2 .parallax-overlay{ display:none !important; }
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-entry,
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-extra,
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-content{
  position:relative; z-index:5; overflow:visible !important; min-height:400px;
  display:flex; align-items:center; justify-content:center;
}




/* ¹è³Ê ¹Ú½º(ÇÁ·¹ÀÓ) — Àý´ë Å©±â À¯Áö */
#itple-mv2 .mv2-frame{ width:var(--mv2-w); height:var(--mv2-h); margin:0 auto; border-radius:24px; outline:2px dashed #ffffff1f; outline-offset:10px; }




/* ¹è³Ê ÄÁÅ×ÀÌ³Ê */
#itple-mv2 .mv2-banner{
  width:var(--mv2-w); height:var(--mv2-h);
  position:relative; overflow:hidden; border-radius:24px;
  box-shadow:0 10px 40px #0008, inset 0 0 0 1px #ffffff12;
  /* ¹è°æÀº ½½¶óÀ̵å full-bg-image°¡ ´ã´çÇϹǷΠtransparent */
  background:transparent;
}




/* ³»ºÎ ·¹À̾ƿô */
#itple-mv2 .mv2-inner{
  position:relative; z-index:2; display:flex; flex-direction:column;
align-items:center;            /* °¡·Î Áß¾Ó */
justify-content:center;        /* ¼¼·Î Áß¾Ó(ÇÊ¿ä ½Ã) */
  height:100%; box-sizing:border-box;
  /* 👉 padding ¿øÇÏ´Â °ªÀ¸·Î Á¶Àý (Ãæµ¹ ¹æÁö¿ë °íÀ¯ Ŭ·¡½º) */
  padding:60px 48px 0px;
  color:var(--mv2-txt);
}




/* ÅؽºÆ® */
#itple-mv2 .mv2-kicker{ margin-top:20px ;letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--mv2-acc); font-size:14px; text-shadow:0 0 20px #49e6ff44; }
#itple-mv2 .mv2-title{ margin:10px 0 8px; font-size:56px; line-height:1.04; font-weight:800; letter-spacing:-.02em; color:var(--mv2-txt); }
#itple-mv2 .mv2-grad{ background:linear-gradient(90deg, var(--mv2-acc), var(--mv2-acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#itple-mv2 .mv2-subtitle{ margin:20px auto; color:var(--mv2-muted); font-size:18px; max-width:820px; }




/* Ĩ */
#itple-mv2 .mv2-chips{ display:flex; gap:10px; flex-wrap:wrap; margin:20px auto; }
#itple-mv2 .mv2-chip{ border:1px solid #ffffff22; color:#cfe3ff; padding:8px 12px; border-radius:999px; font-size:13px; backdrop-filter:blur(6px); background:#0c132480; }




/* ¹öÆ° 4°³ (Á¤»ç°¢Çü) */
#itple-mv2 .mv2-grid{ margin: 14px auto; display:grid; grid-template-columns:repeat(4, 200px); gap:16px;
 place-content: center; /* °¡·Î+¼¼·Î ¸ðµÎ Áß¾Ó */
 width:auto; align-self:flex-start;   
/* 👉 Áß¾Ó Á¤·Ä Ãß°¡ */
justify-content: center; /* °¡·ÎÃà Áß¾Ó */
align-items: center;     /* ¼¼·ÎÃà Áß¾Ó */}
#itple-mv2 .mv2-btn{
  --o:0;
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
   height:auto;  aspect-ratio: 1 / 1;   /* Á¤»ç°¢Çü À¯Áö */
  min-width:200px; min-height:200px; border-radius:16px; text-decoration:none;
  /* 👉 ¹àÀº ±×¶óµ¥ÀÌ¼Ç ¹è°æ */
 background: linear-gradient(
    135deg,
    rgba(61, 220, 255, 0.2),
    rgba(126, 247, 167, 0.2)
  );
  border:1px solid #ffffff22;
  color:#ffffff; box-sizing:border-box;
}
#itple-mv2 .mv2-btn:hover{ background:linear-gradient(180deg, var(--mv2-btnH), #0e1c3a);  opacity:0.3; border-color:#5adfff55;}
#itple-mv2 .mv2-btn::before{ content:""; position:absolute; inset:-2px; border-radius:18px; box-shadow:0 0 0 calc(6px * var(--o)) var(--mv2-ring); transition:box-shadow .25s ease; pointer-events:none; }
#itple-mv2 .mv2-btn:hover{ --o:1; }
#itple-mv2 .mv2-ico{ width:140px; height:140px; display:grid; place-items:center; border-radius:12px;
background: linear-gradient(
     135deg,
     rgba(61, 220, 255, 0),
     rgba(126, 247, 167, 0)
  ); 
font-size:24px; 
overflow:hidden;
}
#itple-mv2 .mv2-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
   object-position:center; /* ¿øº» ºñÀ² À¯Áö */
  display: block;
}




#itple-mv2 .mv2-label{ font-family:"NanumSquareAc", sans-serif; font-weight:800; letter-spacing:.02em; font-size:15px; color:#f5f5f5 }




/* ÄÚ³Ê ¶óº§ */
#itple-mv2 .mv2-corner{ position:absolute; right:22px; bottom:22px; color:#bfeeff; font-size:12px; opacity:.75; display:flex; align-items:center; gap:8px; }
#itple-mv2 .mv2-dot{ width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, #8af2ff); box-shadow:0 0 14px #49e6ff88; }




/* ÁøÀÔ ¾Ö´Ï¸ÞÀÌ¼Ç (Àü¿ë À̸§) */
#itple-mv2 .mv2-title{ animation:mv2FadeUp .8s ease .05s both; }
#itple-mv2 .mv2-subtitle{ animation:mv2FadeUp .8s ease .05s both; }
#itple-mv2 .mv2-chips{ animation:mv2FadeUp .8s ease .25s both; }
#itple-mv2 .mv2-grid .mv2-btn{ opacity:0; transform:translateY(18px); }
#itple-mv2 .mv2-grid .mv2-btn{ animation:mv2FadeUp .55s ease var(--d, 0s) both; }
@keyframes mv2FadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
/* ================================================================= */






/* mv2 ¼­ºêŸÀÌƲ: ±âº»°ª(ºñÈ°¼º ½½¶óÀ̵å) */
#sequence-fullscreen .sequence-canvas > li.mv2 .mv2-subtitle {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}




/* mv2 ½½¶óÀ̵尡 È°¼º(.animate-in)ÀÏ ¶§ ¾Ö´Ï¸ÞÀ̼ÇÀ¸·Î µîÀå */
#sequence-fullscreen .sequence-canvas > li.mv2.animate-in .mv2-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .25s; /* ŸÀÌ¹Ö ¿øÇϸé Á¶Á¤ */
}








/* --- mv2 Àü¿ë: Å׸¶ÀÇ ±âº» ¿©¹é/³ôÀÌ ÃʱâÈ­ & Áß¾ÓÁ¤·Ä ------------------ */




/* 1) Å׸¶°¡ ÀâÀº 50% ³ôÀÌ + 15% padding-top Á¦°Å */
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-extra{
  height: auto !important;
  padding-top: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* 2) Å׸¶°¡ ¹Ìµð¾îÄõ¸®¿¡¼­ ÁÖ´Â padding-topµµ ¹«·ÂÈ­ */
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-content{
  padding-top: 0 !important;
}




/* 3) ½½¶óÀÌµå ¿µ¿ª ÀÚü´Â À߸² ¹æÁö (ÀÌ¹Ì ÀÖÀ¸³ª ÀçÈ®ÀÎ) */
#sequence-fullscreen .sequence-canvas > li.mv2{
  position: relative;
  min-height: 750px !important;   /* ½½¶óÀÌµå °íÁ¤ ³ôÀÌ¿Í µ¿ÀÏ */
  overflow: visible !important;
}




/* 4) mv2 ¹è³Ê ³ôÀÌ/Æеù(¿øÇÏ´Â °ªÀ¸·Î) — È­¸é¿¡ ´õ À§·Î ºÙÀÌ°í ½ÍÀ¸¸é padding-top ÁÙÀ̱â */
#itple-mv2 .mv2-inner{
  padding: 24px 48px 24px !important;   /* À§/¾Æ·¡¸¦ ÁÙ¿©¼­ ¹öÆ° ¿©À¯ È®º¸ */
}




/* 5) ¹è³Ê ÀÚü ³ôÀÌ º¯¼ö (Áö±Ý 500px·Î µÇ¾î ÀÖÀ½ ¡æ ¿©À¯ ÁÖ·Á¸é 560~620px ±ÇÀå) */
#itple-mv2{
  --mv2-w: 1270px;
  --mv2-h: 600px;   /* ¡ç ÇÊ¿ä¿¡ ¸Â°Ô: 560~620 »çÀÌ·Î Á¶Á¤Çغ¸¼¼¿ä */
}
#itple-mv2 .mv2-frame,
#itple-mv2 .mv2-banner{
  width: var(--mv2-w);
  height: var(--mv2-h);
}










/* mv2 ½½¶óÀ̵忡¼­ Å׸¶ ±âº» ¾Ö´Ï¸ÞÀ̼Ç/¿©¹éÀ» ¸®¼Â */
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-extra{
  height:auto !important; padding-top:0 !important;
  display:flex; align-items:center; justify-content:center;
}
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-content{ padding-top:0 !important; }
#sequence-fullscreen .sequence-canvas > li.mv2{ overflow:visible !important; }




/* === mv2 ¹è³Ê Àü¿ë ¾Ö´Ï¸ÞÀÌ¼Ç ÈÅ ===================== */




/* »ó´Ü ¿©¹é Á¦°Å + Áß¾Ó Á¤·Ä (mv2 ½½¶óÀ̵常) */
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-extra{
  height:auto !important;
  padding-top:0 !important;
  display:flex; align-items:center; justify-content:center;
}
#sequence-fullscreen .sequence-canvas > li.mv2 .sequence-content{
  padding-top:0 !important;
}
/* À߸² ¹æÁö */
#sequence-fullscreen .sequence-canvas > li.mv2{
  position:relative; overflow:visible !important;
}












/* ±âÁ¸ sequence-slogan ¾Ö´Ï¸ÞÀ̼ÇÀº ±×´ë·Î »ç¿ëµÊ */
.mv2-title {
  font-size: 56px; 
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #eef6ff; /* ¿øÇÏ´Â »ö»ó */
}




.mv2-grad {
  background: linear-gradient(90deg, #3ddcff, #7ef7a7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}




.mv2-subtitle {
  margin: 20px auto;
  color: #a8b3c7;
  font-size: 18px;
  max-width: 820px;
}














/* ÃʱⰪ: ¼û±è + ¾Æ·¡¿¡¼­ À§·Î */
#sequence-fullscreen .sequence-content .sequence-slogan,
#sequence-fullscreen .sequence-content .sequence-text,
#sequence-fullscreen .sequence-content .sequence-add {
  opacity: 0;
  transform: translateY(50px);
}




/* È°¼º ½½¶óÀ̵å(.animate-in)¿¡¼­´Â º¸¿©ÁÖ±â */
#sequence-fullscreen .animate-in .sequence-slogan,
#sequence-fullscreen .animate-in .sequence-text,
#sequence-fullscreen .animate-in .sequence-add {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: transform .7s ease, opacity .7s ease;
}




/* ±âÁ¸ ŸÀÌ¹Ö À¯Áö(¿øÇÏ½Ã¸é °ª¸¸ Á¶Á¤) */
#sequence-fullscreen .animate-in .sequence-slogan { transition-delay: .6s; }
#sequence-fullscreen .animate-in .sequence-text   { transition-delay: 1.5s; }
#sequence-fullscreen .animate-in .sequence-add    { transition-delay: 1.5s; }








/* ************************************************** */




/* === mv2: Responsive overrides =================================== */




/* °íÁ¤ px ´ë½Å °¡º¯ Æø + Á¾È¾ºñ »ç¿ë */
#itple-mv2{
  --mv2-maxW: 1270px;      /* µ¥½ºÅ©Åé ÃÖ´ë ³Êºñ */
  --mv2-ratio: 1270/600;   /* ¿ø·¡ ºñÀ²(°¡·Î/¼¼·Î) */
  --mv2-w: min(92vw, var(--mv2-maxW));
}




/* ÇÁ·¹ÀÓ/¹è³Ê´Â Æø¸¸ ÁöÁ¤ÇÏ°í ³ôÀÌ´Â ºñÀ²·Î ÀÚµ¿ */
#itple-mv2 .mv2-frame,
#itple-mv2 .mv2-banner{
  width: var(--mv2-w);
  aspect-ratio: auto;
  height: auto;
}




/* ³»ºÎ Æеù°ú ÅؽºÆ® Å©±â¸¦ À¯µ¿ÀûÀ¸·Î */
#itple-mv2 .mv2-inner{
  padding: clamp(16px, 3vw, 32px) clamp(16px, 4vw, 48px) 0;
}




#itple-mv2 .mv2-kicker{
  font-size: clamp(11px, 1.2vw, 14px);
}




#itple-mv2 .mv2-title{
  font-size: clamp(28px, 5vw, 56px);
  line-height: 1.06;
}




#itple-mv2 .mv2-subtitle{
  font-size: clamp(14px, 2vw, 18px);
  max-width: clamp(320px, 65vw, 820px);
}




/* Ĩ */
#itple-mv2 .mv2-chips{
  gap: clamp(8px, 1.2vw, 10px);
  margin: clamp(12px, 2vw, 20px) auto;
}
#itple-mv2 .mv2-chip{
  font-size: clamp(12px, 1.6vw, 13px);
  padding: 6px 12px;
}




/* ¹öÆ° ±×¸®µå: auto-fit + minmax ·Î °¡º¯ Ä®·³ */
#itple-mv2 .mv2-grid{
  display: inline-grid;
  width: 80%;
 /* margin: clamp(8px, 1.4vw, 14px) auto;*/
  gap: clamp(10px, 2vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 22vw, 200px), 1fr));
  justify-content: center;
  margin : 0 auto;
}




/* ¹öÆ°/¾ÆÀÌÄÜ Å©±â À¯µ¿È­ */
#itple-mv2 .mv2-btn{
  height: clamp(120px, 22vw, 200px);
}








/* ** ** */








/* ** ** */




/* ÀÛÀº È­¸é¿¡¼­ ¿Ü°û¼± ºÎ´ã ÁÙÀ̱â */
@media (max-width: 640px){
  #itple-mv2 .mv2-frame{ outline-offset:6px; }
}
@media (max-width: 480px){
  /* ÇÊ¿äÇϸé Á¡¼± Á¦°Å */
  #itple-mv2 .mv2-frame{ outline: none; }
}



/* ================================================== */
/* === ±âÁ¸ mv2 ÄÚµå´Â ±×´ë·Î À¯Áö + ¸ð¹ÙÀÏ ÃÖÀûÈ­ Ãß°¡ === */
/* ================================================== */


/* ±âÁ¸ ÄÚµå´Â ¸ðµÎ ±×´ë·Î µÎ°í, ¾Æ·¡¿¡ ¸ð¹ÙÀÏ º¸¿Ï»çÇ׸¸ Ãß°¡ */


/* ¸ð¹ÙÀÏ¿¡¼­µµ ¹öÆ° 4°³¸¦ °¡·Î 1ÁÙ·Î À¯Áö */
@media (max-width: 768px) {
  #itple-mv2 .mv2-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 95vw;
    gap: clamp(8px, 2vw, 12px);


  }
  
  #itple-mv2 .mv2-btn {
    min-width: clamp(70px, 20vw, 120px) !important;
    min-height: clamp(70px, 20vw, 120px) !important;
    /* ¿øº»ÀÇ 200px °íÁ¤°ªÀ» override */
    width: clamp(70px, 20vw, 100px) !important;
    height: clamp(70px, 20vw, 100px) !important;
    padding: clamp(3px, 1vw, 5px) !important;
    margin-bottom:  clamp(15px, 3vw, 20px) !important;
  }
  
  #itple-mv2 .mv2-ico {
    width: clamp(40px, 10vw, 70px) !important;
    height: clamp(40px, 10vw, 70px) !important;
  }
  
  #itple-mv2 .mv2-label {
    font-size: clamp(10px, 2.5vw, 12px) !important;
  }
}


/* ÀÛÀº È­¸é¿¡¼­µµ °¡·Î 1ÁÙ À¯Áö */
@media (max-width: 480px) {
  #itple-mv2 .mv2-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 98vw;
    gap: clamp(4px, 1.5vw, 8px);
    margin: 0 auto !important; /* margin Á¦°Å */
  }
  
  #itple-mv2 .mv2-btn {
    min-width: clamp(60px, 18vw, 80px) !important;
    min-height: clamp(60px, 18vw, 80px) !important;
    width: clamp(60px, 18vw, 80px) !important;
    height: clamp(60px, 18vw, 80px) !important;
  }
  
  #itple-mv2 .mv2-ico {
    width: clamp(30px, 10vw, 50px) !important;
    height: clamp(30px, 10vw, 50px) !important;
  }
  
  #itple-mv2 .mv2-label {
    font-size: clamp(8px, 2vw, 10px) !important;
  }
}


/* ÃʼÒÇü È­¸é¿¡¼­µµ °¡·Î 1ÁÙ */
@media (max-width: 360px) {
  #itple-mv2 .mv2-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 100vw;
    gap: 2px;
    margin: 0 auto !important; /* margin Á¦°Å */
  }
  
  #itple-mv2 .mv2-btn {
    min-width: 55px !important;
    min-height: 55px !important;
    width: 55px !important;
    height: 55px !important;
  }
  
  #itple-mv2 .mv2-ico {
    width: 28px !important;
    height: 28px !important;
  }
  
  #itple-mv2 .mv2-label {
    font-size: 7px !important;
  }
}


/* ÅؽºÆ® Å©±â ¸ð¹ÙÀÏ ÃÖÀûÈ­ - title°ú subtitle ´õ ÀÛ°Ô */
@media (max-width: 768px) {
  #itple-mv2 .mv2-title {
    font-size: clamp(20px, 3vw, 25px) !important;
    margin: 0 !important; /* margin Á¦°Å */
  }
  
  #itple-mv2 .mv2-subtitle {
    font-size: clamp(5px, 1.5vw, 10px) !important;
    max-width: 90% !important;
    margin: 0 auto !important; /* margin Á¦°Å */
  }
  
  #itple-mv2 .mv2-kicker {
    font-size: clamp(5px, 1.5vw, 10px) !important;
    margin-top: 0 !important; /* margin-top Á¦°Å */
  }
}


/* ¹è³Ê ³ôÀÌ ¸ð¹ÙÀÏ Á¶Á¤ */
@media (max-width: 768px) {
  #itple-mv2 {
    --mv2-h: clamp(500px, 70vh, 700px) !important;
  }
  
  #sequence-fullscreen .sequence-canvas > li.mv2 {
    min-height: clamp(500px, 70vh, 600px) !important;
  }
  
  /* ¸ð¹ÙÀÏ¿¡¼­ ½½¶óÀ̵å ÄÁÅ×À̳ÊÀÇ ¸ðµç Áß¾Ó Á¤·ÄÀ» »ó´Ü Á¤·Ä·Î °­Á¦ º¯°æ */
  #sequence-fullscreen .sequence-canvas > li.mv2 .sequence-entry {
    display: flex !important;


    align-items: flex-start !important;
    justify-content: center !important;
    padding-top:  clamp(15px, 10vw, 20px) !important;
    min-height: auto !important;
  }
  
  #sequence-fullscreen .sequence-canvas > li.mv2 .sequence-extra {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 0 !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  #sequence-fullscreen .sequence-canvas > li.mv2 .sequence-content {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 0 !important;
    min-height: auto !important;
  }
  
  /* ¸ð¹ÙÀÏ¿¡¼­ ¹è³Ê °ü·Ã ¸ðµç »ó´Ü ¿©¹é Á¦°Å */
  #itple-mv2 .mv2-frame {


    margin: 5px auto 0 !important;
  }
  
  #itple-mv2 .mv2-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  #itple-mv2 .mv2-inner {
    padding-top: 0 !important;
    justify-content: flex-start !important;
    padding: 0 clamp(16px, 4vw, 32px) 0 !important;
  }
}


/* ¿Ü°û¼± À¯Áö - ¸ð¹ÙÀÏ¿¡¼­µµ º¸À̵µ·Ï */
@media (max-width: 640px) {
  #itple-mv2 .mv2-frame { 
    outline: 1px dashed #ffffff1f !important;
    outline-offset: 6px !important;
  }
}


/* 480px ÀÌÇÏ¿¡¼­´Â ¿Ü°û¼± Å©±â¸¸ Á¶Á¤ (¿ÏÀü Á¦°ÅÇÏÁö ¾ÊÀ½) */
@media (max-width: 480px) {
  #itple-mv2 .mv2-frame { 
    outline: 1px dashed #ffffff15 !important;
    outline-offset: 4px !important;
  }
}


/* Ĩ ¸ð¹ÙÀÏ ÃÖÀûÈ­ - margin-top ÁÙÀÓ */
@media (max-width: 768px) {
  #itple-mv2 .mv2-chips {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(6px, 2vw, 8px);
    margin: 0 auto !important; /* margin Á¦°Å */


  }
  
  #itple-mv2 .mv2-chip {
    font-size: clamp(5px, 1vw, 7px) !important;
    padding: clamp(1px, 0.1vw, 2px) clamp(1px, 0.1vw, 2px) !important;
    border-radius:10px; !important;
  }
}


/* ³»ºÎ Æеù ¸ð¹ÙÀÏ Á¶Á¤ */
@media (max-width: 768px) {
  #itple-mv2 .mv2-inner {
    padding: 0 clamp(16px, 4vw, 32px) 0 !important; /* »óÇÏ Æеù Á¦°Å */
  }
}


/* ÄÚ³Ê ¶óº§ ¸ð¹ÙÀÏ Á¶Á¤ */
@media (max-width: 768px) {
  #itple-mv2 .mv2-corner {
    right: clamp(16px, 4vw, 22px) !important;
    bottom: clamp(16px, 4vw, 22px) !important;
    font-size: clamp(10px, 2.5vw, 12px) !important;
  }
}


/* =============================================== */
/* === ¸ð¹ÙÀÏ(768px ÀÌÇÏ) À̹ÌÁö À߸² ¹æÁö ÃÖÁ¾ ¼öÁ¤ === */
/* =============================================== */
/* ¸ð¹ÙÀÏ ¹öÆ° Á¤»ç°¢Çü À¯Áö + °£°Ý Á¼È÷±â (ÃÖÁ¾_v2) */
@media (max-width: 768px) {


  /* 1. ±×¸®µå ¼³Á¤ (À¯Áö) */
  #itple-mv2 .mv2-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
  }


  /* 2. ¹öÆ° ¹Ú½º: °£°Ý(gap) Ãß°¡ */
  #itple-mv2 .mv2-btn {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    
    /* [¼öÁ¤] ¾ÆÀÌÄÜ°ú ±ÛÀÚ »çÀÌÀÇ °£°ÝÀ» ¿©±â¼­ Á¶Àý (2px) */
    gap: 2px !important; 
  }


  /* 3. ¾ÆÀÌÄÜ ¿µ¿ª: ¸¶Áø Á¦°Å ¹× ³ôÀÌ ¹Ì¼¼ Á¶Á¤ */
  #itple-mv2 .mv2-ico {
    width: 100% !important;
    height: 55% !important;        /* [¼öÁ¤] 60% -> 55%·Î ÁÙ¿©¼­ ±ÛÀÚ¸¦ À§·Î ´ç±è */
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important;
    
    /* [¼öÁ¤] ±âÁ¸ÀÇ 5px ¿©¹éÀ» Á¦°Å */
    margin-bottom: 0 !important;   
    
    overflow: visible !important;
  }


  /* 4. À̹ÌÁö (À¯Áö) */
  #itple-mv2 .mv2-ico img {
    max-width: 85% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }


  /* 5. ÅؽºÆ® (À¯Áö) */
  #itple-mv2 .mv2-label {
    font-size: clamp(9px, 3vw, 12px) !important;
    margin: 0 !important;
    line-height: 1.1 !important; /* ÁÙ °£°Ýµµ »ì¦ ŸÀÌÆ®ÇÏ°Ô */
  }
}




/* ³¡ */