/* Common ======================================== */
.about header{padding-bottom:var(--unit-4x)}
.dark :is(.page-title, .section-title) .desc{font-size:var(--typo-paragraph-1); font-weight:300}

@media (min-width:1070px){
  .about header{padding-bottom:var(--unit-10x)}
}

/* About Us ======================================== */
.about-us header{padding-top:var(--unit-5x); padding-bottom:var(--unit-6x)}
.about-us .logo-write{width:100%; max-width:400px}
.about-us .page-title > *:not(:first-child){margin-top:24px}

.introduction,
.vision,
.journey{padding-top:var(--unit-10x)}

@media (min-width:1070px){
  .about-us .logo-write{max-width:584px}
  .introduction,
  .vision,
  .journey{padding-top:var(--unit-20x)}
}

/* our-mission ======================================== */
.mission{min-height:700px; max-height:1400px; position:relative; overflow:hidden; padding-bottom:70%; background-image:url('../images/about/about_visual.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center; box-sizing:border-box}
.mission .text-wrap{width:100%; padding-top:var(--unit-6x); padding-bottom:var(--unit-6x); background:linear-gradient(180deg, rgba(49, 28, 16, 0) 0%, rgba(49, 28, 16, 1) 50%); position:absolute; z-index:1; bottom:0}
.mission .section-title.center *{margin-left:auto; margin-right:auto; text-align:center}
.mission .section-title .title:not([class*="display-"]){font-size:var(--typo-display-4)}
.mission .section-title .btn-txt{margin-left:auto; margin-right:auto}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .about-us .mission{background-image:url('../images/about/about_visual@2x.jpg')}
}

@media (min-width:1070px){
  .about-us header{padding-top:56px; padding-bottom:72px}
  .about-us .page-title{margin:0 auto; text-align:center}
  .about-us .page-title > *:not(:first-child){margin-top:32px}
  .about-us .mission .text-wrap{padding-top:100px; padding-bottom:100px}
}


/* introduction ======================================== */
.intro-media{margin-top:var(--unit-5x); width:calc(100% + (100vw - 100%) / 2); max-width:none; aspect-ratio:16/9;  overflow:hidden}
.intro-media img{width:100%; height:100%; object-fit:cover; display:block}

@media (min-width:1070px){
  .intro-media{margin-top:var(--unit-9x)}
}

/* vision ======================================== */
.vision .vision-list{width:100%; margin-top:var(--unit-4x); overflow:hidden}
.vision .vision-carousel{width:100%; padding-left:5vw; box-sizing:border-box; position:relative}
.vision .vision-carousel .owl-stage-outer{overflow:visible}
.vision .vision-carousel .owl-stage{display:flex}
.vision .vision-carousel .item{width:320px; height:100%; padding:var(--unit-4x); background-color:#F9F7F3; display:flex; flex-direction:column; gap:var(--unit-4x); align-items:flex-end; justify-content:space-between}
.vision .vision-carousel .item .text{width:100%; display:flex; flex-direction:column; gap:var(--unit-2x)}
.vision .vision-carousel .item::after{content:''; width:80px; height:120px; background-repeat:no-repeat; background-size:auto 100%; background-position:center; flex-shrink:0}
.vision .vision-carousel .item.learning::after{background-image:url('../images/about/about_vision_item_01.png')}
.vision .vision-carousel .item.sharing::after{background-image:url('../images/about/about_vision_item_02.png')}
.vision .vision-carousel .item.solidarity::after{background-image:url('../images/about/about_vision_item_03.png')}
.vision .vision-carousel .item .item-title{font-size:var(--typo-display-4); font-family:'NotoSerifKR', serif; color:var(--secondary); line-height:1.4}
.vision .vision-carousel .item .item-desc{font-size:var(--typo-paragraph-1); color:var(--text-gray-brown); line-height:1.6}
.vision .vision-carousel.owl-theme .owl-nav.disabled + .owl-dots{margin-top:var(--unit-3x)}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .vision .vision-carousel .item.learning::after{background-image:url('../images/about/about_vision_item_01@2x.png')}
  .vision .vision-carousel .item.sharing::after{background-image:url('../images/about/about_vision_item_02@2x.png')}
  .vision .vision-carousel .item.solidarity::after{background-image:url('../images/about/about_vision_item_03@2x.png')}
}
@media (min-width:768px){
  .vision .vision-carousel{max-width:var(--container-xxl); padding-left:var(--container-w-pd); padding-right:var(--container-w-pd); margin-left:auto; margin-right:auto}
  .vision .vision-carousel .owl-stage-outer{overflow:hidden}
  .vision .vision-carousel .item{width:auto; max-width:inherit; padding:52px}
}
@media (min-width:1070px){
  .vision .vision-list{margin-top:var(--unit-9x)}
  .vision .vision-carousel{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--unit-4x)}
  .vision .vision-carousel .item{width:100%; padding:52px}
}


/* journey ======================================== */
.journey .status{margin-top:var(--unit-3x); display:flex; row-gap:var(--unit-1x); column-gap:var(--unit-2x); flex-wrap:wrap}
.journey .status .item{align-items:baseline; font-size:var(--typo-display-6); color:var(--secondary)}
.journey .status .item .num{margin-right:2px; font-size:var(--typo-display-2)}

.journey .concert-list{margin-top:var(--unit-5x)}
.journey .concert-item:nth-child(1){background-color:#3F5B80}
.journey .concert-item:nth-child(2){background-color:#513F2F}
.journey .concert-item:nth-child(3){background-color:#713C54}
.journey .concert-item:nth-child(4){background-color:#4C7C6C}
.journey .concert-item .concert-media{width:100%; aspect-ratio:16/9; overflow:hidden}
.journey .concert-item .concert-media img{width:100%; height:100%; display:block; object-fit:cover}
.journey .concert-info .text-wrap{padding:var(--unit-5x) var(--unit-4x) var(--unit-6x)}
.journey .concert-info .text-wrap *{max-width:480px}
.journey .concert-info .sub-title{font-size:var(--typo-paragraph-2); color:var(--white-50)}
.journey .concert-info .title{margin-top:var(--unit-1x); font-size:var(--typo-display-4); line-height:1.4; font-family:'NotoSerifKR',serif; letter-spacing:-0.8px}
.journey .concert-info .desc{margin-top:var(--unit-2x); font-size:var(--typo-paragraph-3); color:var(--white-70); line-height:1.6; font-weight:300}
.journey .concert-info .link-wrap{margin-top:var(--unit-4x); display:flex; flex-direction:column; gap:10px}
.journey .concert-info .link-wrap li{font-weight:300; opacity:.9}

@media(min-width:1070px){
  .journey .status{margin-top:44px; justify-content:center}
  .journey .status .item .num{font-size:60px; line-height:96px}
  .journey .concert-list{margin-top:var(--unit-9x)}
  .journey .journey-sticky-layout{display:flex; align-items:stretch}
  .journey .journey-sticky-media{width:60%; position:sticky; top:0; height:100vh; overflow:hidden}
  .journey .journey-scroll-text{width:40%}
  .journey .journey-step{min-height:100vh; display:flex; align-items:center}
  .journey .journey-scroll-text .concert-info{width:100%}
  .journey .journey-scroll-text .concert-info .text-wrap{padding:var(--unit-8x)}
  .journey .journey-slot{position:relative; width:100%; height:100%}
  .journey .journey-slot .journey-slot-item{position:absolute; inset:0; opacity:0; z-index:0; transform:scale(1.02); clip-path:inset(100% 0% 0% 0%)}
  .journey .journey-slot .journey-slot-item.is-active{opacity:1; z-index:1}
  .journey .journey-slot .journey-slot-item.is-prev{opacity:1; z-index:0; clip-path:inset(0% 0% 0% 0%); transform:scale(1)}
  .journey .journey-slot .journey-slot-item img{width:100%; height:100%; display:block; object-fit:cover}
}

@media(min-width:1600px){
  .journey .journey-scroll-text .concert-info .text-wrap{padding:100px}
  .journey .concert-info .title{margin-top:var(--unit-2x)}
  .journey .concert-info .desc{margin-top:var(--unit-4x)}
  .journey .concert-info .link-wrap{margin-top:var(--unit-5x)}
}



/* banner ======================================== */
.banner{overflow-x:hidden}
.banner-wrap{margin-left:auto; margin-right:auto}

@media(min-width:1070px){
  .banner-wrap{ max-width:var(--container-xxl); padding-left:var(--container-w-pd); padding-right:var(--container-w-pd); padding-top:var(--unit-20x); padding-bottom:var(--unit-20x); display:flex; flex-direction:column; gap:40px}
}


/* Greetings ======================================== */
.greetings .page-title{padding-top:var(--unit-5x)}
.greetings .greetings-content{display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:var(--unit-10x)}
.greetings .greetings-visual{overflow:hidden}
.greetings .greetings-visual picture{display:block; width:100%; height:100%}
.greetings .greetings-visual img{width:100%; height:100%; object-fit:cover; display:block}
.greetings .greetings-visual img.kenburns{--speed:2s}
.greetings .greetings-text .desc{text-indent:-13px}
.greetings .greetings-text > *:not(:last-child){margin-bottom:32px}
.greetings .greetings-text .text-block p{font-size:var(--typo-paragraph-2); line-height:1.75}
.greetings .greetings-text .text-block p:not(:last-child){margin-bottom:16px}

@media (min-width:1070px){
  .greetings .page-title{padding-top:100px}
  .greetings .greetings-content{max-width:var(--container-xxl); grid-template-columns:1fr 1fr; margin:0 auto; padding:0 40px 200px}
  .greetings .greetings-visual img{width:100%; min-height:710px; height:100%; object-fit:cover}
  .greetings .greetings-wrap{max-width:none; padding:0; display:flex; justify-content:flex-end}
  .greetings .greetings-text > *:not(:last-child){margin-bottom:48px}
  .greetings .greetings-text .text-block p:not(:last-child){margin-bottom:24px}
}


/* History ======================================== */
.history .year-item .period{position:relative; padding-right:var(--unit-5x); font-family:'NotoSerifKR', serif; font-size:32px; color:var(--primary); letter-spacing:-0.8px; cursor:pointer}
.history .year-item .period::after{content:''; position:absolute; right:0; top:50%; width:24px; height:24px; background:url('../images/ui/ico_chevron_right.svg') no-repeat center / 20px; transform:translateY(-50%) rotate(-90deg); transition:transform .5s ease}
.history .year-item .timeline{padding-top:24px; padding-bottom:24px; overflow:hidden; /*max-height:1200px;*/ transition:max-height .3s ease, padding .3s ease; will-change:max-height}
.history .year-item .timeline .month-wrap{display:grid; grid-template-columns:80px 1fr; gap:var(--unit-1x)}
.history .year-item .timeline .month-wrap:not(:first-child){margin-top:24px}
.history .year-item .timeline .month{font-size:var(--typo-paragraph-2); font-weight:500; color:var(--secondary)}
.history .year-item .history-item:not(:first-child){margin-top:var(--unit-1x)}
.history .year-item .history-item .event-title{font-size:var(--typo-paragraph-2); font-weight:400; margin:0}
.history .year-item .history-item .event-title .event-link{display:inline-block; line-height:1.4; transition:transform .3s ease}
.history .year-item .history-item .event-title .event-link::before{display:none}
.history .year-item .history-item .event-title .event-link::after{content:''; display:inline-block; width:16px; height:16px; vertical-align:middle; margin-top:-3px; background-image:url('/wp-content/themes/watv/images/ui/ico_external_link_black.svg'); background-position:center; background-repeat:no-repeat; background-size:100%; margin-left:2px; transition:transform .3s ease;}
.history .event-title .event-link{display:inline-flex}
@media (hover:hover) and (pointer:fine){
  .history .event-title .event-link:hover{transform:translateX(12px)}
  .history .event-title .event-link:hover::after{transform:translateY(-2px)}
}

.history .year-item .history-item .event-meta{margin-top:var(--unit-05x); font-size:var(--typo-paragraph-5); font-weight:300; color:var(--text-gray-brown)}
/* 열림 상태 */
.history .year-item.is-close .timeline{max-height:0; padding-top:0; padding-bottom:0}
.history .year-item.is-close .period::after{transform:translateY(-50%) rotate(-270deg)}

@media (min-width:1070px){
  .page-history .history-section{margin:0 auto}
  .history-content{margin-top:54px}
  .history .year-item .period{font-size:40px; cursor:inherit; position:sticky; top:140px; z-index:20}
  .history .year-item .period::after{content:""; position:absolute; right:-6.5px; top:28px; width:12px; height:12px; border-radius:50%; background:var(--primary); z-index:10}
  .history .year-item > .wp-block-group__inner-container{display:grid; grid-template-columns:270px 1fr; align-items:start}
  .history .year-item .timeline{position:relative; padding-top:16px; padding-bottom:48px; padding-left:40px}
  .history .year-item .timeline::before{content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:#ECECEC}
  .history .year-item:first-of-type .timeline::before{top:28px}
  .history .year-item:last-of-type .timeline::before{content:""; background:linear-gradient(180deg,#ECECEC 0%,#ECECEC 90%,rgba(236,236,236,0) 100%)}
  .history .year-item .timeline .month-wrap{gap:var(--unit-3x); margin-top:0}
  .history .year-item .timeline .month-wrap:not(:first-child){margin-top:28px}
  .history .year-item .history-item:not(:last-child){margin-bottom:var(--unit-2x)}
}


/* History animation */
.page-history .page-title .slide-Fade-In-Up{
  -webkit-animation-duration:1s;
          animation-duration:1s;
}
.page-history .page-title.sm-set > .sm-item:nth-child(2){animation-delay:0.25s}
.page-history .page-title.sm-set > .sm-item:nth-child(3){animation-delay:0.6s}


/* organization ======================================== */
.organization-section{padding-top:var(--unit-5x); padding-bottom:var(--unit-10x)}
.organization .organization-visual{overflow:hidden}
.organization .organization-visual picture{display:block; width:100%; height:100%}
.organization .organization-visual img{width:100%; min-height:260px; max-height:800px; object-fit:cover; object-position:center;
  --speed:3.5s;
  animation:kenburns-move var(--speed) cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
  transform:translateZ(0) scale(1) rotate(0deg);
}

/* org-main */
.organization .org-main{display:grid; gap:var(--unit-1x)}
.organization .org-main .org-title{display:flex; align-items:center; justify-content:center;grid-column:1 / -1; padding:8px; font-weight:200; color:var(--white); text-align:center}
.organization .org-main .org-part{min-height:62px; display:flex; flex-direction:column; justify-content:center; background-color:var(--bg-brown-2); padding:var(--unit-1x) var(--unit-2x); position:relative; font-size:18px; font-weight:500; line-height:1.6}
.organization .org-main .org-part::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background-color:var(--secondary)}
.organization .org-main .org-part .part-txt{font-size:16px; line-height:1.5}
.organization .org-main .org-part .en{font-size:13px; font-weight:400; color:var(--black-40); line-height:1.5}
.organization .org-main .org-part.leader{grid-column:1 / -1; color:var(--primary)}
.organization .org-main .org-part.leader::before{background:var(--primary)}
.organization .org-main .org-part.vice{grid-column:1 / -1; color:var(--secondary)}
.organization .org-main .org-roles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.organization .org-main .org-part.leader{animation-delay:0s}
.organization .org-main .org-part.vice{animation-delay:0.15s}
.organization .org-main .org-roles .org-part.role:nth-child(1){animation-delay:0.3s}
.organization .org-main .org-roles .org-part.role:nth-child(2){animation-delay:0.45s}
.organization .org-main .org-roles .org-part.role:nth-child(3){animation-delay:0.6s}
.organization .org-main .org-roles .org-part.role:nth-child(4){animation-delay:0.75s}
.organization .org-main .org-roles .org-part.role:nth-child(5){animation-delay:0.9s}
.organization .org-main .org-roles .org-part.role:nth-child(6){animation-delay:1.05s}
@media (min-width:1070px){
  .organization .org-main{grid-template-columns:repeat(12,1fr); gap:32px; grid-auto-rows:minmax(86px,auto); align-items:stretch}
  .organization .org-main .org-title{grid-column:6 / span 2}
  .organization .org-main .org-part{padding:var(--unit-2x) var(--unit-3x); gap:4px}
  .organization .org-main .org-part .part-txt{font-size:17px}
  .organization .org-main .org-part .en{font-size:var(--typo-paragraph-4)}
  .organization .org-main .org-part.leader{grid-column:6 / span 2}
  .organization .org-main .org-part.vice{grid-column:6 / span 2}
  .organization .org-main .org-roles{display:contents}
  .organization .org-main .org-part.role:nth-child(1){grid-column:1 / span 2}
  .organization .org-main .org-part.role:nth-child(2){grid-column:3 / span 2}
  .organization .org-main .org-part.role:nth-child(3){grid-column:5 / span 2}
  .organization .org-main .org-part.role:nth-child(4){grid-column:7 / span 2}
  .organization .org-main .org-part.role:nth-child(5){grid-column:9 / span 2}
  .organization .org-main .org-part.role:nth-child(6){grid-column:11 / span 2}
}

/* org-instrument */
/* .organization .org-instrument{margin-top:48px} */
.organization .org-instrument .instrument-wrap{margin-top:24px; display:grid; gap:var(--unit-2x)}
.organization .part-body{overflow:hidden; max-height:1200px; transition:max-height .35s ease}
.organization .part-body .part-inner{margin-top:var(--unit-1x); display:flex; flex-direction:column; gap:8px}
.organization .instrument-part{min-height:60px; display:flex; flex-direction:column; justify-content:center; padding:var(--unit-1x) var(--unit-2x); background-color:rgba(249, 248, 246, .7)}
.organization .instrument-part .part-txt{font-size:var(--typo-paragraph-3)}
.organization .instrument-part .en{font-size:var(--typo-paragraph-6); color:var(--black-50)}
.organization .instrument-part.part-head{position:relative; padding-right:calc(var(--unit-5x)); background:var(--primary); color:var(--white); border-top:none; cursor:pointer}
.organization .instrument-part.part-head .part-txt{font-size:var(--typo-paragraph-2)}
.organization .part-group .instrument-part.part-head::after{content:''; position:absolute; right:var(--unit-2x); top:50%; width:16px; height:16px; background:url('../images/ui/ico_chevron_right_w.svg') no-repeat center / 100%; transform:translateY(-50%) rotate(-90deg); transition:transform .5s ease}
.organization .instrument-part.part-head .en{color:var(--white-50)}
.organization .org-instrument .instrument-wrap > .part-group:nth-child(2) .part-body .part-inner{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px}
.organization .part-inner.sm-set > .sm-item:nth-child(1){animation-delay:0s}
.organization .part-inner.sm-set > .sm-item:nth-child(2){animation-delay:0.15s}
.organization .part-inner.sm-set > .sm-item:nth-child(3){animation-delay:0.3s}
.organization .part-inner.sm-set > .sm-item:nth-child(4){animation-delay:0.45s}
.organization .part-inner.sm-set > .sm-item:nth-child(5){animation-delay:0.6s}
.organization .part-inner.sm-set > .sm-item:nth-child(6){animation-delay:0.75s}
.organization .part-inner.sm-set > .sm-item:nth-child(7){animation-delay:0.9s}
.organization .part-inner.sm-set > .sm-item:nth-child(8){animation-delay:1.05s}
.organization .part-inner.sm-set > .sm-item:nth-child(9){animation-delay:1.2s}
.organization .part-inner.sm-set > .sm-item:nth-child(10){animation-delay:1.35s}
.organization .part-inner.sm-set > .sm-item:nth-child(11){animation-delay:1.5s}
.organization .part-inner.sm-set > .sm-item:nth-child(12){animation-delay:1.65s}
.organization .part-group.is-close .part-body{max-height:0}
.organization .part-group.is-close .instrument-part.part-head::after{transform:translateY(-50%) rotate(-270deg)}
@media (min-width:1070px){
  /* .organization .org-instrument{margin-top:94px} */
  .organization .org-instrument .instrument-wrap{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--unit-4x)}
  .organization .org-instrument .instrument-wrap > .part-group:nth-child(1){grid-column:1 / span 3}
  .organization .org-instrument .instrument-wrap > .part-group:nth-child(2){grid-column:4 / span 6}
  .organization .org-instrument .instrument-wrap > .part-group:nth-child(3){grid-column:10 / span 3}
  .organization .instrument-part{min-height:70px; padding:12px var(--unit-3x)}
  .organization .instrument-part.part-head{cursor:inherit}
  .organization .part-group .instrument-part.part-head::after{display:none}
}