@font-face{
    font-family: 'Ria';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face{
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

:root{
  --primary: #0048ff;
  --primary-dark: #152c54;
  --primary-light: #e1ebff;
  --accent: #4865ff;
  --accent-light: #eceeff;
  --ink: #1a1a1a;
  --ink2: #333;
  --muted: #111;
  --light-gray: #f7f8fa;
  --border: #e2e5ea;
  --white: #fff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --radius: 12px;
  --mi_tit:clamp(18px, 3vw, 25px); 
  --mi_s_tit:clamp(17px, 3vw, 20px); 
}


html{
  overflow-x: clip;
}

body{
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}
html{scroll-behavior: smooth; word-break:keep-all}

::-webkit-scrollbar{width: 5px; }
::-webkit-scrollbar-track{background: var(--light-gray); }
::-webkit-scrollbar-thumb{background: var(--border); border-radius: 99px; }


/* ─── animation ─── */
.hero-title-wrap{
    position:relative;
    display:inline-block;
}

/* 작은 빛 */

.hero-dot{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:#fff;
    opacity:.25;
    filter:blur(.3px);
    box-shadow:
        0 0 6px rgba(255,255,255,.9),
        0 0 18px rgba(255,255,255,.45);
    animation:float 2s ease-in-out infinite;
}

/* 위치 */

.d1{top:10px;left:40px;animation-delay:0s;}
.d2{top:35px;right:25px;animation-delay:1.5s;}
.d3{left:-10px;top:50%;animation-delay:2.8s;}
.d4{right:-15px;top:60%;animation-delay:4s;}
.d5{left:90px;bottom:0;animation-delay:5.5s;}
.d6{right:90px;bottom:15px;animation-delay:3.2s;}

/* 움직임 */

@keyframes float{

    0%{
        transform:translate(0,0) scale(.8);
        opacity:.15;
    }

    20%{
        opacity:.7;
    }

    50%{
        transform:translate(0,-14px) scale(1.35);
        opacity:1;
    }

    80%{
        opacity:.5;
    }

    100%{
        transform:translate(0,0) scale(.8);
        opacity:.15;
    }

}
.hero-star{
    position:absolute;
    right:-20px;
    top:0;
    color:#fffd4c;
    font-size:15px;
    animation:twinkle 3.5s ease-in-out infinite;
    text-shadow:0 0 12px rgba(255,255,120,.8);
}

@keyframes twinkle{
    0%,100%{
        transform:scale(.9) rotate(0deg);
        opacity:.4;
    }
    50%{
        transform:scale(1.4) rotate(25deg);
        opacity:1;
    }
}

.hero-title .char{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  animation:charUp .45s ease forwards;
}

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


/* ─── NAV ─── */


.nav-cta{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size:1.1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.nav-cta:hover{background: #d04e0a; }

/* ─── TABS ─── */
.sticky-tabs{text-align:center;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top:0;
  z-index: 190;

  padding: 0 32px;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
  scrollbar-width: none;
}



.sticky-tabs::-webkit-scrollbar{display: none; }

.sticky-tabs a{
  display:inline-block;
  padding:13px 15px;
  font-size:1.1rem;
  font-weight:600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: .15s;
}
.sticky-tabs a.active{
  color: var(--primary);
  border-bottom-color: var(--primary);
}
@media (min-width: 480px){
  .sticky-tabs a:hover{
    color: var(--primary);
    border-bottom-color: var(--primary);
  }
}

/* ─── HERO ─── */
.hero{
  text-align: center;
  padding: 40px 0;
  color:#fff;

    position:relative;
    overflow:hidden;



}

.hero::before{
    content:"";
    position:absolute;
    inset:-5%;   /* 확대 시 가장자리 안 보이게 */
    background:url(./img/hero.jpg) center/cover no-repeat;

    transform:scale(1);
    animation: heroZoom 10s linear infinite alternate;

    will-change: transform;


    z-index:-1;
}

@keyframes heroZoom{
    from{
        transform:scale(1);  
    }
    to{
        transform:scale(1.08);
    }
}


.hero-content{margin: 0 auto; }

.hero-kicker{
  display:block;
  color:#fff;
  font-size:1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px;
}
/*.hero-title .line{
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;}*/
.hero-title .ch{  display: inline-block;
  will-change: transform, opacity;
  }


.hero h1{font-family: 'Ria', sans-serif;font-weight:900;word-break:keep-all;

  font-size:clamp(2.5rem, 8vw, 90px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-0.5px;
  margin-bottom:16px;
}
.hero #line1{background: #0008ffb8; line-height: 1;    padding: 6px;display: inline-block; }
.hero #line2 > span{background: #0008ffb8;    line-height: 1;    padding: 6px;    display: inline-block;}
.hero #line2 .sp{background:none;display:inline;padding:0;}


.hero-subtitle{
  display: block;letter-spacing:-1px;
  font-size:clamp(.8rem, 4vw, 1.1rem);
  font-weight: 400;
  color:#333;
  margin-top: 8px;
}

.hero-desc{
  margin-bottom:20px;
  font-size: 1rem;
  color: #000;
  line-height: 1.2;
  font-weight: 300;
}

.hero-cta-row{display: none; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-primary{
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  padding: 13px 32px;
  border-radius: 8px;
  
  font-weight: 700;
  text-decoration: none;
  transition: .2s;
}
.btn-primary:hover{background: #d04e0a; }

.btn-ghost{
  display: inline-block;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.9);

  padding: 13px 28px;
  border-radius: 8px;
  
  font-weight: 500;
  text-decoration: none;
  transition: .2s;
}
.btn-ghost:hover{border-color: rgba(255,255,255,.8); color: #fff; }

/* ─── HIGHLIGHT BAR ─── */
.highlight-bar{
  background:#2900b9;
  border-top: 1px solid #725cff94;
  padding: 0 32px;
}
.highlight-inner{
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hl-item{
  padding: 24px 20px;
  text-align: center;
  border-right: 1px solid #725cff94;
}
.hl-item:last-child{border-right: none; }
.hl-icon{font-size: 1.6rem; margin-bottom: 8px; color:var(--accent)}
.hl-title{font-size: var(--mi_s_tit);font-weight: 700; color: var(--white); margin-bottom: 2px; }
.hl-sub{font-size: 1rem; color: #ccc; }

/* ─── SECTION COMMON ─── */
.section{
  padding: 60px 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.section-label{
  font-size:1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

.section-title{
font-family: 'Ria', sans-serif;
font-weight:900;
  font-size: clamp(1.25rem, 3vw, 32px);
  letter-spacing: -0.5px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 6px;
}
.section-title em{color: var(--primary); font-style: normal; }

.section-rule{
  width:30px;
  height:3px;
  background:var(--primary);
  border-radius:2px;
  margin:10px 0 15px;
}

.section-sub{
  color: var(--muted);
  margin-bottom:clamp(15px, 3vw, 28px);
  line-height: 1.3;
}

.section-divider{
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 32px;
}

/* ─── QUICK NAV ─── */
.quick-wrap{
  padding: 56px 32px;
  max-width:1080px;
  margin: 0 auto;
}

.quick-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.quick-card{
  display: block;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  border-right: 1px solid var(--border);
  transition: background .2s;
}
.quick-card:last-child{border-right: none; }
.quick-card:hover{background: var(--light-gray); }

.quick-card-num{
  font-size:clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800;
  color: var(--border);
  line-height: 1;
  margin-bottom:5px;
}
.quick-card:hover .quick-card-num{color: var(--primary); }

.quick-card-label{
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 900;
  color: var(--ink2);
  line-height: 1.2;
}
.quick-card-sub{
  font-size: clamp(.9rem, 3vw, .99rem);
  color: var(--muted);
  margin-top:4px;
}

/* ─── TIMELINE ─── */
.timing_img img{width:100%;height:auto;border-radius:15px;overflow:hidden}
.timeline-wrap{margin-top: 8px; }

.tl-item{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}
.tl-item:last-child{border-bottom: none; }

.tl-left{text-align: right; padding-top: 2px; }

.tl-period{
  font-size:  clamp(.9rem, 3vw, 1.2rem);
  font-weight: 700;
  color:#545454;
  line-height:1.3;
}

.tl-tag{
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 6px;
}
.tl-tag.peak{background:#e8e9dd;color:#8e7b08; }
.tl-tag.normal{background:#e8f0f7;color:var(--primary); }
.tl-tag.ok{background:#e8f3ec;color:#1e7e34; }
.tl-tag.danger{background:#fde8e2;color: #b91c1c; }

.tl-right{position: relative; padding-left:15px; }
.tl-right::before{
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: var(--white);
}

.tl-title{font-size: var(--mi_tit); font-weight:900; color: var(--ink); margin-bottom: 6px; }
.tl-desc{ color: var(--muted);margin:10px 0 5px;}
.tl-desc li{margin-bottom:5px; line-height: 1}
.tl-desc li::before {
  content:'\f00c';
  font-family:"Font Awesome 5 Free";  font-weight:600;font-size:.8rem;margin-right:5px;
}


.tip-callout{
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin-top: 28px;
  
  color: var(--ink2);
  line-height: 1.4;
}
.mtip{margin:10px 0;font-size:.95rem;line-height:1.3;color:#0028ff;background:#fff;padding:10px;border-radius:5px;}
.tip-callout strong{color: var(--primary);display:block;font-size:var(--mi_s_tit);font-weight:800;}

/* ─── TYPE TABS ─── */
.type-tabs{
  display: flex;
  gap: 0;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--white);
  box-shadow: 0 0 15px #aaaaaa61;
}

.type-tab{
  flex: 1;
  padding: 20px 10px;
  text-align: center;
  border: none;
  border-right: 1px solid var(--primary);
  background: var(--white);
  
 font-size: var(--mi_s_tit);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: .15s;
}
.type-tab:last-child{border-right: none; }
.type-tab.active, .type-tab:hover{
  background: var(--primary);
  color: var(--white);
}
.type-tab.active{font-weight:900;}

.type-content{display: none; }
.type-content.active{display: block; }
.type-content .alink{gap: 10px;margin-top:15px;display: flex;flex-wrap: wrap;justify-content: center;}
.type-content .alink a{display:inline-block;background:var(--accent);color:var(--white);padding:9px 10px;font-size:1.01rem;border-radius:50px;}
.type-content .alink a::after{content:"";display:inline-block;width:9px;height:9px; border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(-45deg);transition:.4s}
.type-content .alink a:hover{background:var(--ink2);}

.type-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
}

.type-card-header{
font-size:1.05rem;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.type-img{border-radius:10px;overflow:hidden;margin-bottom:20px;}
.type-img img{width:100%;height:auto;}
.type-badge{
  display: inline-block;
  
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-light);
  padding: 4px 12px;
  border-radius: 6px;
}

.type-card h3{
font-size: var(--mi_tit);
  font-weight: 700;
  color: var(--ink);
  margin: 10px 0 8px;
  line-height: 1.4;
}
.type-card p{font-size:1rem;}
.type-card .talk{font-weight:bold;
  color: var(--accent);
  line-height: 1.5;font-size: var(--mi_s_tit);
}

.type-tip .talk::before{content:"\f075";font-family:"Font Awesome 5 Free";  font-weight:600;margin-right:5px;}

.cmmm{padding-top:15px;}
.cmmm .ti{font-weight:bold; background: linear-gradient(to top, #0ff 50%, transparent 50%);font-size: var(--mi_s_tit);}
.cmmm ul{}
.cmmm li{margin-bottom:5px;color:#333;}
.cmmm li::before{
  content:'\2726'; color:#0ff;margin-right:5px;
}

.type-rec-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.type-rec{
  padding: 14px 18px;
  background: var(--light-gray);
  border-radius: 8px;
}
.type-rec-label{
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}
.type-rec-val{line-height:1.5;
  
  font-weight: 600;
  color: var(--ink2);
}

.type-tip{
  margin-top: 16px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--accent-light);
  border-radius: 0 8px 8px 0;
 
  color: var(--ink2);
  line-height: 1.5;
}


/* ─── WHY ─── */
.why-wrap{
  background:#00117e;
  color: var(--white);
  padding: 72px 32px;
}
.why-inner{max-width: 960px; margin: 0 auto; }
.why-wrap .section-label{color:#bbdaff}
.why-wrap .section-title{color: #fff; }
.why-wrap .section-title em{color: #00ffff; }
.why-wrap .section-rule{background: #00ffff; }

.why-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid #0c1fff36;
  border-radius: var(--radius);
  overflow: hidden;
}

.why-card{
background:#fff;
  padding: 28px 25px;
  border-right: 1px solid #0c1fff36;
  border-bottom: 1px solid #0c1fff36;
  transition: background .2s;
}

.why-num{
  font-size: 32px;
  font-weight: 800;
  color:#00117e;
  line-height: 1;
  margin-bottom: 12px;
}
.why-ttl{font-size: var(--mi_s_tit);font-weight: 700; color: #000; margin-bottom: 8px; }
.why-desc{font-size:1.05rem; color: #000; line-height: 1.6; }

/* ─── COST ─── */
.cost-wrap{
  background: var(--light-gray);
  padding: 72px 32px;
}
.cost-inner{max-width: 960px; margin: 0 auto; }

.cost-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.cost_a{    display: block;
    margin: 15px auto 0;
    background: var(--primary);
    color: var(--white);
    font-size:clamp(16px, 0.3vw + 15px, 18px);
    border-radius: 50px;
    max-width: 280px;
    padding: clamp(10px, 3vw, 18px) 15px;
    font-weight: 600;text-align:center;}
.cost_a::after{content:"";display:inline-block;width:10px;height:10px; border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);}
.cost_a:hover{background:#333;transition:.4s;}
table{
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size:1.05rem;

}

thead tr{background: var(--primary); color: var(--white); }
thead th{
  padding: 14px 20px;
  font-size:1.1rem;
  font-weight: 700;
  text-align: center;
}
thead th:first-child{text-align: left; }

tbody td{
  padding: 14px 20px;
  
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--ink2);
}
tbody td:first-child{text-align: left; font-weight: 600; color: var(--ink); }
tbody tr:last-child td{
  border-bottom: none;
  background: var(--primary-light);
  font-weight: 700;
  color: var(--primary);
  font-size:1.2rem;
}
tbody tr:hover td{background: var(--light-gray); }
tbody tr:last-child:hover td{background: var(--primary-light); }

.cost-note{
  font-size: .9rem;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.8;
}

/* ─── CITY ─── */
.city-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.city-card{background: var(--white); transition: background .2s; }


.city-head{
  padding: 15px 22px 18px;
  color: var(--white);
}

.city-head{
    position:relative;
    overflow:hidden;
}

.city-head::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:45%;
    height:100%;

    background-image:var(--bg);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:auto 100%;

    opacity:.35;

    -webkit-mask-image:linear-gradient(to left, #000 65%, transparent 100%);
            mask-image:linear-gradient(to left, #000 65%, transparent 100%);
}

.city-head > *{
    position:relative;
    z-index:1;
}

.city-head.cebu{background:#0013ff; --bg:url(./img/cebu.jpg); }
.city-head.baguio{background:#00756b; --bg:url(./img/baguio.jpg); }
.city-head.clark{background:#244410; --bg:url(./img/clark.jpg); }
.city-head.iloilo{background:#eeaf00; --bg:url(./img/iloilo.jpg); }
.city-head.tarlac{background:#f55656; --bg:url(./img/tarlac.jpg); }
.city-head.boracay{background:#ff6f9c; --bg:url(./img/boracay.jpg); }




.city-tag{
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.city-name{font-size: var(--mi_tit); font-weight: 800; line-height: 1.3; }
.city-eng{ opacity: .6; font-weight: 400; }
.city-slogan{ opacity: .75; margin-top: 2px; }

.city-body{padding: 18px 22px 22px; }
.city-pt{
 
  color: var(--ink2);
  margin-bottom: 7px;
  padding-left: 14px;
  position: relative;
  line-height: 1.6;
}
.city-pt::before{
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  background: #96e2e8;
}

.city-fit{
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  
  font-weight: 600;
  line-height: 1.5;
}
.city-fit.cebu {background: var(--primary-light); color: var(--primary); }
.city-fit.baguio{background: #ecf7f5;   color: #00736e;}
.city-fit.clark{background:#f0f5e6; color: #195f0a; }
.city-fit.iloilo{background:#f7efe8; color: #957224; }
.city-fit.tarlac{background:#fff1f1; color: #550d0d; }
.city-fit.boracay{background:#ffeff7; color: #dc187e; }
.city_a{border-radius:50px;padding:8px;background:var(--primary);margin:10px 0 0;display:block;color:#fff;text-align:center;transition:.4s;}
.city_a::after{content:"";display:inline-block;width:10px;height:10px; border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(-45deg);}
.city-card .city_a:hover{background:#333;}
.baguio.city_a{background:#00736e}
.clark.city_a{background:#195f0a}
.iloilo.city_a{background:#957224}
.tarlac.city_a{background:#550d0d}
.boracay.city_a{background:#dc187e}

.select-tip{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 20px;
}
.select-tip h4{
  margin-bottom: 18px;
  color: var(--ink);
}
.select-tip h4 .bic{
  font-weight: 900;font-size:1.3rem;}
.select-tip h4 .sm{font-size:.8rem}
.tip-row span{background:#eee;padding:5px 8px;border-radius:50px;}
.tip-row .ce{background: var(--primary-light); }
.tip-row .ba{ background:#ecf7f5;}
.tip-row .cl{background:#e2fbd4;}
.tip-row .il{background:#f7efe8;}
.tip-row .ta{background:#ffeff7;}

.tip-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  
  color: var(--ink2);
  line-height: 1.6;
}
.tip-arrow{color: var(--accent); font-weight: 700; flex-shrink: 0; font-size:1.1rem; }
.tip-row strong{font-size:1.2rem;}

/* ─── VISA ─── */
.visa-wrap{
    background: linear-gradient(rgb(12 12 12 / 34%), rgb(255 255 255)), url(./img/visa-wrap.jpg);
    background-size:cover;
    background-position:top center;
  background-color: var(--primary-dark);
  padding: 72px 32px;
}
.visa-inner{max-width: 960px; margin: 0 auto; }
.visa-wrap .section-label{color:#00ffff; }
.visa-wrap .section-title{color:#fff;text-shadow:0 0 15px #000000ab;}
.visa-wrap .section-title em{color: #00ffff; }
.visa-wrap .section-sub{color:#fff;text-shadow:0 0 10px #000000ab;}
.visa-wrap .section-rule{background: #00ffff; }

.visa-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: var(--radius);
	overflow: hidden;
	background: #fffffffa;
	margin-top:10px;
}

.visa-card{color:#000;
  padding: 28px 24px;
  transition: background .2s;
border-right:1px solid #ddd;
}
.visa-card:last-child{border-right: none; }


.visa-period{
  font-size:.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color:#0033ff;
  margin-bottom:5px;
}
.visa-type{
  font-size: var(--mi_tit);
  font-weight: 700;
  color: #000;
  margin-bottom: 16px;
  line-height: 1.3;
}
.visa-pt{
  font-size:1.1rem;

  margin-bottom: 7px;
  padding-left: 14px;
  position: relative;
  line-height: 1.6;
}
.visa-pt::before{
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 5px;
  background: #4692ff;
}

.visa-notice{
  background:rgb(102 216 255 / 8%);
  border:1px solid rgb(102 203 255 / 20%);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-top: 20px;
 
  color: #000;
}
.visa-notice strong{color: #005eff; }

/* ─── PROCESS ─── */
.process-wrap{
  background: var(--light-gray);
  padding: 72px 32px 50px;
}
.process-inner{max-width: 960px; margin: 0 auto; }

.steps-list{margin-top: 12px; }

.step-item{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.step-item:last-child{border-bottom: none; }

.step-num-col{text-align: right; padding-top: 2px; }

.step-num{
  font-size: 36px;
  font-weight: 800;
  color: var(--border);
  line-height: 1;
}

.step-label{
  
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.step-title{
font-size: var(--mi_tit);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.1;
}

.step-list{
  list-style: none;
  margin-top: 6px;
}
.step-list li{
 
  color: var(--muted);
  margin-bottom: 5px;
  padding-left: 16px;
  position: relative;
  line-height: 1.65;
}
.step-list li::before{
  content: '-';
  position: absolute;
  left: 0;
  color: var(--border);
  
}

.step-highlight{
  display: inline;
  color: var(--accent);
  font-weight: 600;
}

.step-callout{
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
  font-size:1.1rem;
  color: var(--ink2);
  line-height: 1.65;
}

.step-badge-special{
  display: inline-block;
  background: var(--accent-light);
  border: 1px solid rgba(232,89,12,.2);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.step-services{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.step-svc{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.step-svc-title{font-size:1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.step-svc-sub{ color: var(--muted); }
.step-svc span{color:var(--primary);line-height:1;border:1px solid var(--primary);padding:3px 7px; border-radius:50px;display:inline-block;font-size:.9rem;margin-top:8px;}
.step-svc span::after{content:"";display:inline-block;width:8px;height:8px; border-right:1px solid var(--primary);border-bottom:1px solid var(--primary);transform:rotate(-45deg);}
.step-svc:hover{background:#ddd;}
.step-svc:hover span{border-color:#000;color:#000;}
.step-svc:hover span::after{border-color:#000;}
.process-cta{
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.process-cta-title{
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}
.btn-accent{
  display: inline-block;
  background: var(--primary);
  color: var(--white);
  padding: 14px 40px;
  border-radius: 8px;
  
  font-weight: 700;
  text-decoration: none;
  transition: .2s;
}
.btn-accent:hover{background: #d04e0a; }
.process-cta-note{
  
  color: var(--muted);
  margin-top: 10px;
}

/* ─── FAQ ─── */
.faq-list{list-style: none; }

.faq-item{border-bottom: 1px solid var(--border); }
.faq-item:first-child{border-top: 1px solid var(--border); }

.faq-q{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size:clamp(1.1rem, 2.6vw, 1.2rem);
  padding:clamp(12px, 3vw, 15px) 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
  transition: color .15s;
}
.faq-q:hover{color: var(--primary); }

.faq-q-text{flex: 1; line-height: 1.5; }

.faq-badge{
  border-radius: 6px;
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  padding:5px 8px;
  font-weight: 800;
  flex-shrink: 0;
}

.faq-arrow{
  width:10px;height:10px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);

  transition: transform .25s;
  flex-shrink: 0;
}
.faq-item.open .faq-arrow{transform: rotate(-135deg); }

.faq-a{
  display: none;
  padding: 0 0 20px 40px;
  color: var(--muted);
  line-height: 1.85;
  max-width: 800px;
}
.faq-item.open .faq-a{display: block; }

/* ─── CTA ─── */
.cta-wrap{
  background: var(--accent);
  padding: 72px 32px;
  text-align: center;
  color: var(--white);
}
.cta-inner{max-width: 680px; margin: 0 auto; }

.cta-badge{
  display: inline-block;
  background: rgba(255,255,255,.2);
  padding: 5px 16px;
  border-radius: 20px;
  
  font-weight: 600;
  margin-bottom: 20px;
}

.cta-title{
  font-size: clamp(1.5rem, 4vw, 38px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.cta-title .color{color:#faff53;}
.cta-sub{
  font-size:1rem;
  opacity: .9;
  margin-bottom: clamp(20px, 3vw, 40px);
  line-height: 1.75;
  font-weight: 300;
}

.cta-trust{
  display: flex;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
}
.cta-trust-item{
  flex: 1;
  padding: 18px 16px;
  border-right: 1px solid rgba(255,255,255,.25);
  text-align: center;
}
.cta-trust-item:last-child{border-right: none; }
.cta-trust-num{font-size: 20px; font-weight: 800; display: block; margin-bottom: 2px; }
.cta-trust-label{opacity: .8; }



.cta-btn-p{
  background: var(--ink);
  color: var(--white);
  padding: 14px 32px;
  border-radius: 8px;
  
  font-weight: 700;
  text-decoration: none;
  transition: .2s;
}
.cta-btn-p:hover{background: #333; }

.cta-btn-s{
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.5);
  padding: 14px 32px;
  border-radius: 8px;
  
  font-weight: 600;
  text-decoration: none;
  transition: .2s;
}
.cta-btn-s:hover{border-color: var(--white); background: rgba(255,255,255,.1); }


/* ─── RESPONSIVE ─── */
@media (max-width: 768px){
  .std_nav{padding:0 20px; }
  .sticky-tabs{text-align: center; padding:0; }

  .highlight-inner{grid-template-columns: repeat(2, 1fr); }
  .hl-item:nth-child(2){border-right: none; }
  .hl-item:nth-child(1), .hl-item:nth-child(2){border-bottom: 1px solid var(--border); }
  .quick-grid{grid-template-columns: repeat(3, 1fr); }
  .quick-card{ border-bottom: 1px solid var(--border); }
  .why-grid{grid-template-columns: 1fr 1fr; }

  .visa-grid{grid-template-columns: 1fr; }

  .visa-card:last-child{border-bottom: none; }
  .tl-item{grid-template-columns: 1fr; gap: 4px; padding:10px 0;}
  .tl-left{text-align: left; }
  .type-rec-grid{grid-template-columns: 1fr; }
  .type-card{padding: 24px 20px; }
  .step-item{grid-template-columns: 48px 1fr; gap: 0 16px; }
  .step-num{font-size: 28px; }
  .cta-trust{flex-direction: column; }
  .cta-trust-item{border-right: none; border-bottom: 1px solid rgba(255,255,255,.25); }
  .cta-trust-item:last-child{border-bottom: none; }
  .section, .quick-wrap{padding:1.2rem 20px; }
  .why-wrap, .cost-wrap, .visa-wrap, .process-wrap, .cta-wrap{padding:48px 20px 35px; }
  .step-services{grid-template-columns: 1fr; }

	.type-tabs{flex-wrap: wrap;}
	.type-tab{
    flex: 0 0 33.333%;
    max-width: 33.333%;
border-right: 1px solid #fff;  border-bottom: 1px solid #fff;background: #f6f6ff;    font-size: 1.05rem; padding:15px;}
  .highlight-bar{padding: 0 20px; }
.sticky-tabs a{padding:11px;font-size:1.02rem;}
}

@media (max-width: 480px){

@media (max-width: 480px) {
  #start,
  #timing,
  #type,
  #why,
  #cost,
  #city,
  #visa,
  #faq {
    scroll-margin-top:44px;
  }
}

.quick-card{padding:15px;}
.quick-card:nth-child(2n){border-right:0;}
.hero::before{background-position:right}
.hero-content{    text-shadow: 4px 3px 10px #00000029;}
.hero{padding:5px 20px 10px}
  .quick-grid{grid-template-columns: repeat(2, 1fr); }
  .why-ttl{margin:5px 0;}
  .why-grid{grid-template-columns: 1fr; }
  .why-card{border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.12) !important;padding:10px;}
  .why-num{margin-bottom:0;font-size:1.2rem;}
  .why-card:last-child{border-bottom: none !important; }
  .why-desc{    font-size:1rem;
    color: #545454;
    line-height: 1.3;}
  .highlight-inner{grid-template-columns: 1fr 1fr; }
.hero-subtitle{color:#fff;text-shadow:0 0 10px #00000099;}
  .hero-desc{font-size:14px;color: #fff;margin-bottom:0;text-shadow:0 0 10px #000;}
  .hero{background-position:left;}
.tl-right{padding-left:0;}
.tl-right::before{display:none}
.section-label{font-size:.85rem;margin:0;}
 .type-card-header{    margin-bottom: 10px;
    padding-bottom: 14px;}
 .type-card{padding: 20px 15px;    }
 	.type-tab{padding:8px 15px;font-size:1.02rem;}
.cmmm .ti{margin-bottom: 5px;
        display: inline-block;}
 .cmmm li{font-size:.98rem;}
.tip-callout{margin-top:0;}
.type-rec{padding:10px;}
.why-wrap, .cost-wrap, .visa-wrap, .process-wrap, .cta-wrap, .section, .quick-wrap{padding:20px 17px;}
.cost-table-wrap thead th{padding:10px;font-size: 15px;}
.cost-table-wrap tbody td{font-size:15px;padding: 5px 10px;}
.cost-table-wrap tbody tr:last-child td{font-size: 1rem;}
.cost-note{font-size: .9rem;line-height: 1.4;word-break:keep-all}
.city-head, .city-body{padding:10px 15px 15px;}
.city-tag{margin-bottom:0;}
.city-pt{margin-bottom:0;}
.city-fit{margin-top:5px;padding:10px;line-height:1.2;}

.select-tip{padding:15px;}
.tip-row{margin-bottom:5px;}
.tip-row strong{font-size: 1.05rem;display:block}
.tip-row span{font-size:14px;padding:5px;}
.select-tip h4{margin-bottom:10px;}
.tl-period{font-weight:400;}

.visa-card{padding:15px;border-right:none;border-bottom:1px solid #eee}
.visa-type{margin-bottom:5px;}
.visa-pt{
    font-size: 1.03rem;
    margin-bottom: 3px;
    padding-left: 10px;
    position: relative;
    line-height: 1.5;
}
.philja_only{width:100%;}
.steps-list{margin-top:0}
.step-item{padding:10px 0;display: flex;flex-direction: column;}
.step-list li{padding-left:10px;line-height: 1.3;}
.step-list li::before{color: #0060ff;}
.process-cta{margin:0;padding:0;border:0}
.step-callout{margin:10px 0 15px;font-size:14px;line-height:1.2;}

.highlight-bar{padding:0;}
.hl-item{padding:15px 10px;}
.hl-title{font-size:1.1rem;}
.hl-sub{font-size:.95rem;}

.faq-q-text{line-height: 1.2;font-size:1.05rem;}
.faq-a{line-height:1.5; padding:15px;background: #eee;border-radius: 8px;margin-bottom: 14px;}

.cta-badge{font-size:13px;margin-bottom:5px;}
.cta-sub{font-size: .95rem;line-height: 1.3;margin-bottom:10px;word-break:keep-all}
.cta-trust-item{padding:12px;}
.cta-trust-num{font-size:18px}
.cta-trust{margin-bottom:0;}
.cta-inner .btn-accent{display:none}

}


/**/
.alink_bnn{display:block;padding:30px 15px 25px;max-width:1010px;margin:30px auto 0;border-radius:10px;}
.alink_bnn.philbn{background:#0a144f;}
.alink_bnn.ctfbn{background:#f13469;margin:0 auto 30px;}
.alink_bnn:hover{background:#000;}
.alink_bnn:hover .tx3{border-color:#00ffff;color:#00ffff;}
.alink_bnn.ctfbn:hover .tx3{border-color:#ff00f0;color:#ff00f0;}
.bnntx{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;}
.bnntx div{white-space:nowrap;font-family:'SBAggro',sans-serif;font-weight:bold;line-height:1;}
.bnntx .tx1{color:#ebeaef;font-size:30px;}
.ctfbn .bnntx .tx1{color:#fff}
.bnntx .tx2{color:#fff;font-size:42px;display:flex;align-items:center;}
.bnntx .tx3{color:#fff;font-size:18px;margin-left:5px;border-radius:50px;border:1px solid #fff;display:flex;align-items:center;font-weight:400;padding:5px 9px 1px;}
.bnntx .skyblue{color:#00ffff;}
.bnntx .red{
    color: #f00;
    background: #fff;
    border-radius: 50%;
    line-height: 1;
    display: inline-block;margin-right:5px;
    padding:11px 2px 3px;margin-top:-10px;}

@media (max-width:945px){   
.alink_bnn{padding:20px 20px 15px;width: 100%;display: flex;}
.bnntx{flex-direction:column;align-items:flex-start;gap:4px;padding-right:20px;width:100%;}
.bnntx .tx1{font-size:20px;}
.bnntx .tx2{font-size:35px;letter-spacing:-0.05em;}
.bnntx .tx3{position:absolute;right:0px;top:50%;transform:translateY(-50%);padding: 3px 5px;}
}

@media (max-width:680px){
.bnntx .tx1{font-size:15px;}
.bnntx .tx2{font-size:21px;letter-spacing:-0.05em;}
.bnntx .tx3{font-size:12px;}
.bnntx .tx3 .momo{display:none}
.bnntx .red {padding-top:5px;}
}
/**/