:root {
  /* #1 primitive */
  --color-brand-30:#F5F2F0;
  --color-brand-50:#E1DFDE;
  --color-brand-100:#DCD1CC;
  --color-brand-200:#C1B9B5;
  --color-brand-300:#B39D90;
  --color-brand-400:#997C6F;
  --color-brand-500:#8D6C5A;
  --color-brand-700:#644D40;
  --color-brand-alpha-50:rgba(141, 107, 90, 0.05);
  --color-brand-alpha-100:rgba(141, 107, 90, 0.10);
  --color-brand-alpha-150:rgba(141, 107, 90, 0.15);
  --color-brand-alpha-300:rgba(141, 107, 90, 0.30);
  --color-brand-alpha-500:rgba(141, 107, 90, 0.40);
  --color-brand-alpha-700:rgba(141, 107, 90, 0.50);
  --color-brand-alpha-900:rgba(141, 107, 90, 0.60);
  --color-support-press-blue-100:#E6F7F9;
  --color-support-press-blue-300:#54CBD8;
  --color-support-press-blue-500:#00B1C5;
  --color-support-press-blue-700:#00A1B3;
  --color-support-press-blue-900:#004A53;
  --color-support-award-blue-100:#E9F2FF;
  --color-support-award-blue-300:#6CA5FD;
  --color-support-award-blue-500:#2379FC;
  --color-support-award-blue-600:#0062E5;
  --color-support-award-blue-700:#1956B3;
  --color-support-award-blue-900:#0F336A;
  --color-neutral-gray-white:#FFFFFF;
  --color-neutral-gray-50:#FAFAFA;
  --color-neutral-gray-100:#F7F7F7;
  --color-neutral-gray-150:#F0F0F0;
  --color-neutral-gray-200:#E6E7E9;
  --color-neutral-gray-250:#D8D8D8;
  --color-neutral-gray-300:#999999;
  --color-neutral-gray-500:#808080;
  --color-neutral-gray-600:#565656;
  --color-neutral-gray-700:#222222;
  --color-neutral-gray-black:#000000;
  --color-neutral-white-alpha-90:rgba(255, 255, 255, 0.9);
  --color-neutral-white-alpha-80:rgba(255, 255, 255, 0.8);
  --color-neutral-white-alpha-70:rgba(255, 255, 255, 0.7);
  --color-neutral-white-alpha-60:rgba(255, 255, 255, 0.6);
  --color-neutral-white-alpha-50:rgba(255, 255, 255, 0.5);
  --color-neutral-white-alpha-40:rgba(255, 255, 255, 0.4);
  --color-neutral-white-alpha-30:rgba(255, 255, 255, 0.3);
  --color-neutral-white-alpha-20:rgba(255, 255, 255, 0.2);
  --color-neutral-white-alpha-10:rgba(255, 255, 255, 0.1);
  --color-neutral-black-alpha-90:rgba(0, 0, 0, 0.9);
  --color-neutral-black-alpha-80:rgba(0, 0, 0, 0.8);
  --color-neutral-black-alpha-70:rgba(0, 0, 0, 0.7);
  --color-neutral-black-alpha-60:rgba(0, 0, 0, 0.6);
  --color-neutral-black-alpha-50:rgba(0, 0, 0, 0.5);
  --color-neutral-black-alpha-40:rgba(0, 0, 0, 0.4);
  --color-neutral-black-alpha-30:rgba(0, 0, 0, 0.3);
  --color-neutral-black-alpha-20:rgba(0, 0, 0, 0.2);
  --color-neutral-black-alpha-10:rgba(0, 0, 0, 0.1);
  --color-neutral-black-alpha-05:rgba(0, 0, 0, 0.05);

  /* #2 Sementic */
  --bg-white:var(--color-neutral-gray-white);
  --color-bg-gray:var(--color-neutral-gray-50);
  --color-bg-warm:#F9F8F7;
  --bg-cool:var(--color-accent-blue-50);
  --bg-cool-light:var(--color-accent-blue-30);
  --bg-brand:var(--color-brand-100);
  --bg-blue:var(--color-accent-blue-500);
  --bg-black:var(--color-neutral-gray-700);
  --text-primary:var(--color-neutral-gray-700);
  --text-primary-muted:var(--color-neutral-black-alpha-50);
  --text-secondary:var(--color-brand-500);
  --text-point:var(--color-brand-500);
  --text-muted:var(--color-neutral-gray-500);
  --text-point-light:var(--color-neutral-gray-300);
  --text-inverse:var(--color-neutral-gray-white);
  --text-inverse-muted:var(--color-neutral-white-alpha-70);
  --text-inverse-subtle:var(--color-neutral-white-alpha-50);
  --button-outline-gray:var(--color-neutral-gray-500);
  --button-outline-light-gray:var(--color-neutral-black-alpha-10);
  --button-outline-brand:var(--color-brand-500);
  --button-solid-brand:var(--color-brand-500);
  --button-solid-white:var(--bg-white);
  --button-solid-cool:var(--bg-cool);
  --button-solid-point:var(--color-brand-500);
  /* --button-solid-point:var(--bg-blue); */
  --button-solid-press:var(--color-support-press-blue-500);
  --button-solid-award:var(--color-support-award-blue-500);
  --button-label-black:var(--color-neutral-gray-700);
  --button-label-brand:var(--color-brand-500);
  --button-label-white:var(--color-neutral-gray-white);
  --button-icon-white:var(--text-inverse);
  --button-icon-brand:var(--color-brand-500);
  --button-icon-gray:var(--color-neutral-gray-500);
  --button-icon-black:var(--text-primary);
  --button-tab-brown:var(--color-brand-500);
  --button-tab-blue:var(--color-support-award-blue-500);

  /* #3 Component */
  --container-brand:var(--text-secondary);
  --container-brand-light:var(--color-brand-30);
  --container-black:var(--text-primary);
  --container-default:var(--text-inverse);
  --card-eyebrow:var(--text-point);
  --card-title-dark:var(--text-primary);
  --card-title-light:var(--text-inverse);
  --card-date-white:var(--text-inverse-muted);
  --card-date-black:var(--text-muted);
  --card-desc:var(--text-muted);
  --card-active-gray:var(--color-bg-gray);
  --card-icon-point:var(--text-point);
  --card-icon-point-mute:var(--color-accent-brown-300);
  --card-icon-white:var(--text-inverse);
  --card-icon-black:var(--text-primary);
  --card-video-label:var(--color-neutral-white-alpha-90);
  --card-video-bg:var(--color-neutral-black-alpha-60);
  --card-badge-navigation:var(--text-primary);
  --card-badge-navigation-label:var(--text-inverse);
  --card-bg-warm:var(--color-bg-warm);
  --card-bg-white:var(--bg-white);
  --card-bg-brown:var(--color-accent-brown-50);
  --card-bg-green:var(--color-accent-green-50);
  --card-bg-red:var(--color-accent-red-50);
  --card-button-award:var(--color-button-solid-award);
  --card-button-press:var(--button-solid-press);
  --card-thum-stroke:#FFFFFF;
  --card-press-stroke:var(--color-brand-50);
  --list-award-thum:var(--bg-cool);
  --list-award-category:var( --color-support-award-blue-500);
  --list-award-title:var(--text-primary);
  --list-award-date:var(--text-muted);
  --list-info-eyebrow:var(--text-point);
  --list-info-title:var(--text-primary);
  --list-info-date:var(--text-muted);
  --list-info-desc:var(--text-muted);
  --list-info-tag:#3071DA;
  --logo-white:var(--text-inverse);
  --logo-white-alpha:var(--text-inverse-muted);
  --logo-black:var(--text-primary);
  --logo-dark-alpha:var(--color-neutral-white-alpha-20);
  --logo-light-alpha:var(--color-neutral-black-alpha-20);
  --logo-light-alpha-2:var(--color-neutral-black-alpha-20);
  --button-home-bg:var(--button-solid-cool);
  --button-home-label:var(--color-brand-700);
  --button-toggle-stroke:var(--color-neutral-gray-250);
  --button-toggle-icon:var(--button-icon-gray);
  --button-toggle-bg:var(--button-solid-white);
  --ui-menu-more:#FFFFFF;
  --ui-press-icon:var(--button-icon-black);
  --ui-swiper-bar:var(--bg-brand);
  --ui-swiper-loading:var(--color-brand-500);
  --ui-search-icon-ico-search:var(--button-icon-gray);
  --ui-search-home-input:var(--color-neutral-white-alpha-70);
  --ui-search-home-input-stroke:var(--color-brand-500);
  --ui-search-home-placeholder:var(--color-brand-200);
  --ui-search-home-icon:var(--button-icon-brand);
  --ui-search-home-tag:var(--text-secondary);
  --ui-search-page-input:var(--text-inverse);
  --ui-search-page-input-stroke:var(--color-neutral-gray-200);
  --ui-search-page-placeholder:var(--color-neutral-gray-300);
  --ui-search-page-result-text:var(--text-primary);
  --ui-search-page-result-strong:var(--text-point);
  --ui-search-active-page-input:var(--text-inverse);
  --ui-search-active-page-input-stroke:var(--color-neutral-gray-200);
  --ui-search-active-page-placeholder:var(--color-neutral-gray-300);
  --ui-search-active-page-icon:var(--color-neutral-gray-500);
  --ui-select-bx-icon:var(--button-icon-gray);
  --ui-select-bx-option:var(--text-primary);
  --ui-select-bx-stroke:var(--color-neutral-gray-200);
  --tab-video-default-text:var(--text-primary);
  --tab-video-default-stroke:var(--button-outline-light-gray);
  --tab-video-default-badge:var(--color-neutral-gray-150);
  --tab-video-default-label:var(--color-neutral-gray-600);
  --tab-video-active-text:var(--button-solid-point);
  --tab-video-active-badge:var(--button-solid-point);
  --tab-video-active-stroke:var(--color-brand-alpha-150);
  --tab-video-active-label:var(--text-inverse);
  --tab-video-active-bg:var(--color-brand-alpha-50);
  --tab-activity-active:var(--button-solid-cool);
  --tab-activity-text:var(--button-label-black);
  --tab-button-church:var(--button-tab-brown);
  --tab-button-awards:var(--button-tab-blue);
  --tab-button-press:var(--button-tab-blue);
  --tab-button-default:var(--text-primary);
  --page-head-eyebrow:var(--text-point);
  --page-head-title-black:var(--text-primary);
  --page-head-desc:var(--text-muted);
  --page-head-date:var(--text-point-light);
  --page-head-title-white:var(--text-inverse);
  --page-head-desc-white-alpha:var(--text-inverse-muted);
  --page-head-single-category:var(--text-point);
  --page-head-single-title:var(--text-primary);
  --page-head-single-desc:var(--text-muted);
  --page-head-single-date:var(--text-point-light);
  --page-head-award-category:var(--color-support-award-blue-600);
  --page-head-award-title:var(--text-primary);
  --page-head-award-desc:var(--text-primary);
  --page-head-award-presenter:var(--text-primary);
  --page-head-award-date:var(--text-point);
  --page-press-text:var(--text-primary);
  --page-press-name:var(--color-accent-blue-500);
  --page-press-info:var(--text-point);
  --page-press-icon:var(--text-primary-muted);
  --page-press-stroke:var(--color-neutral-gray-200);
  --page-press-sub-text:var(--text-point);
  --page-press-tabel-head:var(--text-point);
  --page-press-tabel-headline:var(--text-primary);
  --bg-white:var(--color-neutral-gray-white);
  --bg-gray:var(--color-neutral-gray-50);
  --bg-warm:#F9F8F7;
  --bg-cool:#F5F5F7;
  --bg-cool-light:#F8F8FA;
  --bg-brand:var(--color-brand-100);
  --bg-black:var(--color-neutral-gray-700);
  --banner-title:var(--text-inverse);
  --banner-desc:var(--text-inverse-muted);
  --banner-award-eyebrow:var(--text-point);
  --banner-award-title:var(--text-primary);
  --banner-award-desc:var(--text-muted);
  --banner-press-eyebrow:var(--color-support-press-blue-500);
  --banner-press-title:var(--text-primary);
  --banner-press-desc:var(--text-point);
  --header-fill-white:var(--bg-white);
  --header-fill-white-alpha:var(--text-inverse-muted);
  --header-fill-black:var(--bg-black);
  --footer-fill-black:var(--bg-black);
  --footer-fill-white:rgba(255, 255, 255, .06);
  --footer-text-gray:var(--text-muted);
  --footer-text-white:var(--text-inverse);
  --footer-stroke:var(--text-inverse-subtle);
  --footer-sns:var(--color-neutral-white-alpha-60);
  --pagination-current:var(--button-solid-cool);
  --pagination-active-txt:var(--button-label-black);
  --pagination-default:var(--button-label-black);
  --pagination-disabled:var(--button-icon-gray);
  --pagination-active:var(--button-label-black);

  /* padding */
  /* #1 Primitive */
  --padding-12:12px;
  --padding-16:16px;
  --padding-20:20px;
  --padding-24:24px;
  --padding-30:30px;
  --padding-40:40px;
  --padding-60:60px;
  --padding-80:80px;
  --padding-120:120px;
  --padding-160:160px;
  --padding-240:240px;
  --radius-4:4px;
  --radius-8:8px;
  --radius-16:16px;
  --radius-999:999px;

  /* #2 Sementic */
  --spacing-xxs:var(--padding-12);
  --spacing-xs:var(--padding-16);
  --spacing-sm:var(--padding-20);
  --spacing-md:var(--padding-24);
  --spacing-lg:var(--padding-30);
  --spacing-xl:var(--padding-40);
  --spacing-2xl:var(--padding-60);
  --spacing-3xl:var(--padding-80);
  --spacing-4xl:var(--padding-120);
  --spacing-5xl:var(--padding-160);
  --spacing-6xl:var(--padding-240);

  /* container */
  --container-sm:760px;
  --container-md:1020px;
  --container-xl:1400px;
  --container-xxl:1520px;
  --container-single:960px;

  /* radius */
  --radius-sm:var(--radius-4);
  --radius-md:var(--radius-8);
  --radius-lg:var(--radius-16);
  --radius-circle:var(--radius-999);

  /* header-lift */
  --header-height-mobile:60px;
  --header-height-desktop:80px;
}


/* #3 Component */
:root {
  --padding-container-xs:var(--spacing-xs);
  --padding-container-sm:var(--spacing-md);
  --padding-container-md:var(--spacing-lg);
  --padding-container-lg:var(--spacing-2xl);
  --padding-container-xl:var(--spacing-4xl);
  --padding-container-2xl:var(--spacing-6xl);
  --padding-container-footer:var(--spacing-2xl);
}

@media(min-width:1070px){
  :root {
    --padding-container-xs:var(--spacing-md);
    --padding-container-sm:var(--spacing-lg);
    --padding-container-md:var(--spacing-2xl);
    --padding-container-lg:var(--spacing-4xl);
    --padding-container-xl:var(--spacing-5xl);
    --padding-container-footer:var(--spacing-3xl);
  }
}

strong{
   background: linear-gradient(180deg, transparent 60%, #faecd1 60%);
   font-weight: 700;
}

/*
Theme Name: 그리스
Author: 선교정보실
Author URI: https://watv.org
Version: 1.0
*/

/* about-church :video */
.section-video{padding-top:var(--padding-container-md)}
.section-video .section-head{width:auto; margin-left:0!important; margin-right:0!important}
.section-video .head-wrap .btn{display:none}
.section-video .intro-video{margin-top:24px}
.section-video .intro-video .intro{padding-bottom:24px}
.section-video .videoWrap{border-radius:var(--radius-md); overflow:hidden}
.section-video .intro-video .lists{display:flex; flex-direction:column; height:100%; margin-top:8px}
.section-video .intro-video .intro .video-link{width:100%; padding:16px; display:flex; flex:1; align-items:center; gap:8px; box-shadow:inset 0px 1px 0px 0px var(--tab-video-default-stroke); cursor:pointer}
.section-video .intro-video .intro .video-link:first-child{box-shadow:none}
.section-video .intro-video .intro .video-link:hover{background-color:var(--tab-video-active-bg)}
.section-video .intro-video .intro .video-link:hover .part{background-color:var(--color-brand-alpha-100)}
.section-video .intro-video .intro .video-link.active{border-radius:var(--radius-8); box-shadow:inset 0px 0px 1px 1px var(--tab-video-active-stroke, rgba(141, 108, 90, 0.15)); background-color:var(--tab-video-active-bg)}
.section-video .intro-video .intro .video-link.active .video-title{color:var(--button-label-brand)}
.section-video .intro-video .intro .video-link.active + .video-link{box-shadow:none}
.section-video .intro-video .intro .video-link.active .part{color:var(--tab-video-active-label); background-color:var(--button-solid-point); border-radius:var(--radius-sm)}
.section-video .intro-video .intro .video-link .part{font-size:11px; line-height:1.3; padding:3px 6px; background-color:var(--tab-video-default-badge); border-radius:var(--radius-sm)}
.section-video .intro-video .intro .video-title{font-size:15px; line-height:1.4; font-weight:500; color:var(--tab-video-default-text)}
@media(min-width:1070px){
.section-video{padding-bottom:var(--padding-container-md)}
.section-video .head-wrap{display:flex; justify-content:space-between; align-items:flex-end}
.section-video .head-wrap .btn{display:flex}
.section-video .videoWrap{border-radius:var(--radius-lg)}
.section-video .intro-video{margin-top:56px}
.section-video .intro-video .lists{margin-top:0}
.section-video .intro-video .intro .video-link{padding:16px 24px; gap:12px}
.section-video .intro-video .intro .video-link .part{font-size:12px; padding:6px 8px}
.section-video .intro-video .intro .video-title{font-size:17px; line-height:1.5}
}

/* ----- btn ----- */
.btn.style-outline{background-color:transparent; color:var(--button-label-brand); box-shadow:inset 0 0 0 1px var(--button-outline-brand)}
.btn.style-outline::after{background-color:var(--tab-video-active-bg)}

/* ----- active ----- */
.home .section-active{padding-top:30px; padding-bottom:30px;}
.home .section-active .section-head{width:90%; max-width:300px; margin-right:auto; margin-left:auto; padding-left:0; padding-right:0}
.home .section-active .section-head .title br{display:none}
.home .section-active .carousel{margin-top:24px}
.home .section-active .card{position:relative; display:flex; flex-direction:column; align-items:center; padding:40px; background-color:var(--card-active-gray); border-radius:var(--radius-md)}
.home .section-active .card .thum{overflow:hidden}
.home .section-active .card:has(.card-head[href*="environmental-cleanup"])::after,
.home .section-active .card-head[href*="environmental-cleanup"] ~ .latest-post .card-info{background-color:#869E6C!important;}
.home .section-active .card:has(.card-head[href*="neighbor-love"])::after,
.home .section-active .card-head[href*="neighbor-love"] + .latest-post .card-info{background-color:#D2737D}
.home .section-active .card:has(.card-head[href*="community-service"])::after,
.home .section-active .card-head[href*="community-service"] + .latest-post .card-info{background-color:#B09556}
.home .section-active .card:has(.card-head[href*="emergency-relief"])::after,
.home .section-active .card-head[href*="emergency-relief"] + .latest-post .card-info{background-color:#A2755F}
.home .section-active .card:has(.card-head[href*="church-events"])::after,
.home .section-active .card-head[href*="church-events"] + .latest-post .card-info{background-color:#946FA8}
.home .section-active .card-head{display:flex; flex-direction:column; align-items:center}
.home .section-active .card-head:hover::before{transform:translateX(4px);}
.home .section-active .card-head > *:not(:first-child){margin-top:8px}
.home .section-active .card-head::before{content:''; display:block; width:16px; height:16px; background-image:url('../images/ui/ico_arrow.svg'); margin-bottom:8px; transition:all .2s ease; background-size:contain; background-repeat:no-repeat; background-position:center; filter:invert(47%) sepia(62%) saturate(247%) hue-rotate(333deg) brightness(93%) contrast(85%)}
.home .section-active .card-head .title{font-size:22px; color:var(--card-title-dark)}
.home .section-active .card-head .desc{max-width:180px; font-size:14px; color:var(--card-desc); word-wrap: unset; word-break: break-word; }
.home .section-active .latest-post{width:100%; max-width:240px; margin-top:24px; border-radius:var(--radius-md); overflow:hidden; transition:all .3s ease}

/* special */
.section-video .special-container{width:90%; max-width:640px; margin-left:auto; margin-right:auto; padding-top:24px; padding-bottom:60px}
.section-video .special{display:flex; max-width:680px; margin-left:auto; margin-right:auto; flex-direction:column; gap:16px}
.section-video .video-link-wrap{display:flex; flex-direction:column}
.section-video .special .special-video-tit{width:100%; padding:20px; font-size:15px; font-weight:500; color:var(--card-title-dark); line-height:1.5}
.section-video .special .title{font-size:26px; line-height:1.3; letter-spacing:-1.9px}
.section-video .special .title br{display:none}
.section-video .special .desc{margin-top:8px}
.section-video .special .video-link{display:flex; align-items:center; overflow:hidden; cursor:pointer; padding:12px 0; border-bottom:1px solid rgba(0, 0, 0, 0.05)}
.section-video .special .video-link:last-child{border-bottom:none}
.section-video .special .video-link .thum{width:140px; flex-shrink:0; position:relative; border-radius:var(--radius-md); overflow:hidden}
.section-video .special .video-link .thum .time{position:absolute; right:8px; bottom:8px; padding:4px 5px; font-size:13px; line-height:1; border-radius:var(--radius-sm); color:var(--card-video-label); background-color:var(--card-video-bg)}
.section-video .special .video-link .thum-img{width:100%; padding-bottom:65%; background-size:contain; background-repeat:no-repeat; background-size:cover}
.section-video .intro-video .btn-wrap{margin-top:24px; text-align:center}
.section-video .special .video-link.video1 .thum-img{background-image:url('../Cambodia/assets/images/about-us/thum_7minutes.jpg')}
.section-video .special .video-link.video2 .thum-img{background-image:url('../Cambodia/assets/images/about-us/thum_whats_the_difference.jpg')}
.section-video .special .video-link.video3 .thum-img{background-image:url('../Cambodia/assets/images/about-us/churchofgod_korea.jpg')}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx) {
  .section-video .special .video-link.video1 .thum-img{background-image:url('../Cambodia/assets/images/about-us/thum_7minutes@2x.jpg')}
  .section-video .special .video-link.video2 .thum-img{background-image:url('../Cambodia/assets/images/about-us/thum_whats_the_difference@2x.jpg')}
  .section-video .special .video-link.video3 .thum-img{background-image:url('../Cambodia/assets/images/about-us/churchofgod_korea@2x.jpg')}
}
@media(min-width:768px){
  .section-video .special-container{width:100%; max-width:100%; padding-bottom:48px; margin-top:0}
  .section-video .special{gap:24px}
  .section-video .special .video-link{flex-direction:column; background-color:var(--card-bg-white); padding:0; border-radius:var(--radius-md); box-shadow:0px 2px 16px 0px rgba(0, 0, 0, 0.00), 0px 10px 16px 0px rgba(0, 0, 0, 0.04)}
  .section-video .special .video-link .thum{width:100%; border-radius:0}
  .section-video .video-link-wrap{flex-direction:row; gap:16px}
  .section-video .video-link-wrap > *{flex:1}
  .section-video .special .special-video-tit{padding:16px; font-size:15px; font-weight:500; color:var(--card-title-dark); line-height:1.5}
}
@media(min-width:1070px){
  .section-video .special-container{background-color:transparent; padding-left:var(--container-w-pd); padding-right:var(--container-w-pd)}
  .section-video .special{max-width:1440px; padding:60px; display:flex; flex-direction:row; gap:32px; border-radius:var(--radius-lg); background-color:var(--bg-gray)}
  .special .row .section-head{margin-bottom:0}
  .section-video .special .title{font-size:32px; line-height:1.3; letter-spacing:-1.9px}
  .section-video .special .title br{display:block}
  .section-video .special .desc{margin-top:16px}
  .section-video .special .video-link{border-radius:var(--radius-lg)}
  .section-video .special .special-video-tit{min-height:94px; padding:24px; font-size:15px; font-weight:500; color:var(--card-title-dark); line-height:1.5}
  .section-video .intro-video .btn-wrap{display:none}
  .section-video .video-link-wrap > div{transition:all .2s ease}
  .section-video .video-link-wrap > div:hover{transform:translate3D(0, -3%, 0); box-shadow:rgba(0, 0, 33, 0.07) 0px 16px 22.4px 4.8px, rgba(0, 0, 33, 0.05) 0px 3.2px 16px 0px, rgba(0, 0, 33, 0.07) 0px 0px 1px 0px}
}

/* ==================================================
   [최종 해결] 외부 CSS 간섭 차단 및 강제 레이아웃 고정
==================================================== */

/* 1. 모바일 및 기본 상태: 비디오 영역 강제 노출 및 16:9 비율 확보 */
.section-video .videoWrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 유튜브 16:9 비율 강제 부여 */
  height: 0;
  overflow: hidden;
  display: block; /* 숨겨지는 현상 방지 */
  border-radius: var(--radius-md);
}

.section-video .youtubePlayer,
.section-video .youtubePlayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 2. PC 데스크탑 환경 (1070px 이상): 무조건 가로로 나란히 배치 */
@media(min-width: 1070px) {
  
  /* 부트스트랩이 깨졌을 경우를 대비해 부모 박스를 강제로 Flexbox로 전환 */
  .section-video .intro-video .intro .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 30px;
  }

  /* 왼쪽 비디오 영역 너비 강제 고정 (전체의 약 66%) */
  .section-video .intro-video .intro .row .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    width: 66.666667%;
    padding: 0; /* 부트스트랩 패딩 간섭 제거 */
  }

  /* 오른쪽 리스트 영역 너비 강제 고정 (전체의 약 33%) */
  .section-video .intro-video .intro .row .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    width: 33.333333%;
    padding: 0;
  }

  .section-video .videoWrap {
    border-radius: var(--radius-lg);
  }

  /* 리스트가 비디오 높이에 맞춰 이쁘게 늘어나도록 설정 */
  .section-video .intro-video .lists {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: 0;
  }
  
  .section-video .intro-video .intro .video-link {
    flex: 1;
  }
}

/* ==================================================
   [너비 조절] 양옆으로 과도하게 늘어나는 현상 방지
==================================================== */

/* section-video 안의 모든 컨테이너 너비를 제한하고 가운데로 모음 */
.section-video .container-xxl {
  max-width: 1300px; /* 💡 원하는 너비로 조절 가능 (예: 1000px, 1200px) */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px; /* 브라우저 창을 줄였을 때 양옆에 딱 붙지 않도록 여백 줌 */
  padding-right: 20px;
}

/* 상단 타이틀 영역과 하단 비디오 영역이 동일한 라인에 맞도록 간격 조정 */
.section-video .head-wrap {
  width: 100%;
  box-sizing: border-box;
}

.section-video .intro-video {
  width: 100%;
}

/* section-head */
.section-head{width:100%; max-width:650px}
.section-head.center{text-align:center; margin-left:auto; margin-right:auto}
.section-head > *:not(:first-child){margin-top:12px}
.section-head .eyebrow{font-size:14px; line-height:1.2; color:var(--page-head-eyebrow)}
.section-head .title{font-size:26px; line-height:1.3; letter-spacing:-1.5px; color:var(--page-head-title-black)}
.section-head .title br{display:block}
.section-head .desc,
.section-head .desc p{font-size:15px; line-height:1.5; letter-spacing:-0.03px; color:var(--page-head-desc)}
@media(min-width:768px){
  .section-head{width:100%; max-width:540px}
  .section-head > *:not(:first-child){margin-top:16px}
  .section-head .eyebrow{font-size:16px; line-height:1.4}
  .section-head .title{font-size:32px; letter-spacing:-1.5px}
  .section-head .desc,
  .section-head .desc p{font-size:16px}
}
@media(min-width:1070px){
  .section-head{width:100%; max-width:650px}
  .section-head > *:not(:first-child){margin-top:24px}
  .section-head .eyebrow{font-size:20px}
  .section-head .title{font-size:48px; letter-spacing:-2.8px}
  .section-head .desc,
  .section-head .desc p{font-size:18px; line-height:1.6}
}