@charset "utf-8";

/*subnav*/
.header-inner {position: relative; }

#gnav{height:80px; max-width:1360px; margin:0 auto;}
#gnav .gnav-list{display:flex; height:100%; justify-content: center;}
#gnav .gnav-list > li:first-child{margin-left:-24px; }
#gnav .gnav-list > li a{ height:100%; font-size:16px; font-weight:500; padding:0 24px; display:flex; align-items:center; position:relative; white-space:nowrap; color:#fff;}
#gnav .gnav-list > li a span {position: relative;}
#gnav .gnav-list > li > a:hover span:after,
#gnav .gnav-list li.active > a span:after {content:''; width: 100%; display: inline-block; height: 2px; position: absolute; bottom: -4px; left: 0; background: #fff;}
#gnav .gnav-list li.active .sub-lnav {opacity:1; visibility:visible;}

.sub-lnav {position: absolute; left:0; width: 100%; z-index: -1; opacity:0; visibility:hidden; background-color: rgba(0,0,0,.5);}
/* .sub-lnav:hover {background-color: #171717;} */
.sub-lnav a:not('.nav-home'):hover {text-decoration: underline;}
.sub-lnav a:after {background-color: #fff;}


/*메인*/
.main-section { overflow: hidden; background-color: #fff; z-index: 0;}
.main-visual-title {position:absolute; top:50%; left:50%; z-index: 999; transform: translate(-50%, -50%); opacity:0.5; }
.sec-visual {height: 100vh;}
.main-visual { position: absolute; left: 0; right: 0; top: 0; height: 100%; overflow: hidden; z-index: 10; background-color: var(--color-gray1);}
.main-visual .swiper-slide { width: 100%; height: 100%; position: relative; display: flex; align-items: center; background-color: var(--color-gray1);}
.main-visual .swiper-slide video { position: absolute; left: -10%; top: 0; right: 0; bottom: 0; width: 120%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.5;}
.main-visual .swiper-slide iframe { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.5;}

.visual-swiper-control { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); color: #fff; display: flex; align-items: center; z-index: 100;}
.visual-progressbar { width: 180px; height: 2px; position: relative; background-color: #363636; transition: .3s opacity; text-align: center; position: relative; overflow: hidden; margin: 0 14px;}
.visual-progressbar .bar { display: block; background-color: #fff; position: absolute; left: 0; top: 0; width: 0; height: 100%;}
.visual-progressbar.play .bar { animation: barMotion 5s forwards linear;}
@keyframes barMotion {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}


.visual-swiper-control .swiper-pagination {
  display: flex;
  align-items: center;
  margin:0 30px;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}

.visual-swiper-control .swiper-pagination .current-page,
.visual-swiper-control .swiper-pagination .total-page {
  width: 24px;
  text-align: center;
}

.visual-swiper-control .btn-swiper-prev,
.visual-swiper-control .btn-swiper-next,
.visual-swiper-control .btn-swiper-stop {
  width: 20px;
  height: 20px;
  text-align: left;
  text-indent: -9999px;
  overflow: hidden;
  margin: 0 5px;
}

.visual-swiper-control .btn-swiper-prev { background: url(../img/i_slider_prev_next.svg) 0 0 no-repeat;}
.visual-swiper-control .btn-swiper-next { background: url(../img/i_slider_prev_next.svg) -30px 0 no-repeat;}
.visual-swiper-control .btn-swiper-stop { background: url(../img/i_slider_stop.svg) center 0 no-repeat;}

.visual-swiper-control .btn-swiper-stop.on { opacity: 0.3;}


.main-section .main-inner { max-width: 1360px; margin: 0 auto; padding: 120px 0; }
.main-title { font-size: 48px; line-height: 1.3em; font-weight: 100; letter-spacing: -0.02em;}
.main-title-sub { font-size: 18px; line-height: 1.44em; margin-top: 20px; line-height:1.8; color: #111;}
.main-section .go-more { display: inline-flex; align-items: center; font-size: 16px; line-height: 1.45em; font-weight: 600; border: 1px solid #000; border-radius: 30px; padding: 12px 26px 12px 30px; flex-flow: wrap;}
.main-section .go-more i {font-size: .75em; padding-left: 46px;}

.intro-title { position: relative; margin: 0 auto 42px auto; max-width: 1360px;}
.intro-title .go-more { position: absolute; right: 0; top: 0;}


.main-visual {position: relative;}

#section00 {background-color: #000;}
.sec-yoyoma .flex {align-items: center; justify-content: center; flex-flow: column; height: 100%; padding: 152px 0;}
.yoyoma-txt-wrap {}
.yoyoma-txt {border: 1px solid rgba(255,255,255,.2); padding: 56px; width: 100%; box-sizing: border-box;}
.yoyoma-txt p {color: #fff; text-align: center; font-size: 22px; padding-bottom: 32px;}
.yoyoma-txt p.last {padding-bottom: 0;}
.garamond {font-family: "adobe-garamond-pro", serif;font-weight: 400;font-style: italic;}
.yoyoma-txt i.garamond {display: block;}
.about-img img {max-width: 100%;}	

@media (max-width: 1099.99px){
	.sec-yoyoma .flex {padding: 80px 0;}		
	.yoyoma-txt p {font-size: 18px;}
}

@media all and (max-width:769.99px){	
	.yoyoma-txt {margin-bottom: 58px;}
	.yoyoma-txt p {word-break: keep-all;}
	.about-img {width: 36%;}
}

@media all and (max-width: 430px) {
	.yoyoma-txt p {font-size: 16px;}
	.language-btn {padding-left: 0; justify-content: end;}
	.language-btn svg {width: 68%; aspect-ratio:1;}
	.yoyoma-txt br {display: none;}
	.yoyoma-txt p.last br {display: block;}
}

/*about*/
.sec-about:after {content:''; display: block; width: 100%; height: 0; padding-bottom: 40%; background: url(../img/main_banner.png) no-repeat bottom center; background-size: cover; }
.sec-about.main-section .main-inner {padding-top: 220px; position: relative;}
.sec-about.main-section .main-inner:after {content:''; position: absolute; top:0; left: 50%; transform: translateX(-50%); width: 1px; height: 80px; background: #000;}
.sec-about .intro-title {text-align: center;}
.sec-about .intro-title-txt {text-align: center;}
.sec-about .intro-title-txt h2.main-title {position: relative; display: inline-block; margin-left: 52px;}
.sec-about .intro-title-txt h2.main-title span.tit-top {position: absolute;top:-56px; left: -52px; font-size: 1.5em;}
.sec-about .main-title-sub  {font-size: 20px;}
.sec-about .intro-title .go-more {position: relative; margin-top: 60px;}

/*performances*/
.main-performances-list ul {border-top: 1px solid #000;}
.main-performances-list li.active .list-li-wrap {gap: 3%; padding: 36px 0; transition: all .4s ease;} 
.main-performances-list li.active .photo {position: relative; max-width: 550px; width: 40%; height: auto; visibility: visible; opacity: 1; transition: all .4s ease;}
.main-performances-list li.active .photo img {max-width: 100%;}
.main-performances-list li.active .list-text-group {width: 60%; }
.main-performances-list li.active .date-group {flex-flow: column; margin-bottom: 50px; font-size: 20px; }
.main-performances-list li.active .category {position: relative; top:0; right: auto; margin-bottom: 50px; }
.main-performances-list li.active .go-link a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main-performances-list li.active .go-link-btn {margin-top: auto;width: 100%;display: flex; align-items: center; justify-content: space-between; transition: all .4s ease;}
.main-performances-list li.active .go-link-arrow {display: block;}
.btn-circle {width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #111; border-radius: 50%;}

.main-performances-list li .photo {position: absolute; visibility: hidden; opacity: 0; transition: all .3s ease;}
.main-performances-list li .flex {display: flex;}
.main-performances-list li .list-li-wrap {position: relative; padding: 36px 20px; border-bottom: 1px solid #000;}
.main-performances-list li .list-text-group {flex-flow: column;}
.main-performances-list li .category {position: absolute; top: 16px; right: 16px; }
.main-performances-list li .category span.caslon {display: inline-block; padding: 3px 6px; background: #000; color: #fff;font-style:italic; font-size: 14px;}
.main-performances-list li .date-group {color: #111; font-size: 16px;}
.main-performances-list li .date-group .date {padding-right: 16px;}
.main-performances-list li .title {font-size: 20px; padding-top: 6px; font-weight: 600;}
.main-performances-list li .go-link-btn {padding-top: 10px;}
.main-performances-list li .go-link-arrow {display: none;}
.main-performances-list li .go-link {width: 80%; font-size: .9em; text-align: left;}
.main-performances-list li .go-link a {color: var(--color-gray6); display: block;}
.main-performances-list li .go-link a:hover {color: #111;}


/*watch&listen*/
.sec-watch {background: #111;}
.sec-watch .main-title {color: #fff;}
.sec-watch .go-more {color: #fff; border-color: #fff;}
.main-watch-list ul {display: flex; margin: 0 -12px;}

.main-watch-list ul li { width: 384px; margin: 0 12px;}
.main-watch-list a { display: flex; flex-direction: column;}

.main-watch-list .photo { position: relative; height: 0; padding-top: 70%; overflow: hidden;}
.main-watch-list .photo.video:after,
.main-watch-list .photo.video:before {content:''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1;}
.main-watch-list .photo.video:before {width: 50px; height: 50px; background: rgba(255,255,255,.5); border-radius: 50%; }
.main-watch-list .photo.video:after {background: url("data:image/svg+xml,%3Csvg fill='%23fff' width='20px' height='20px' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eplay-solid%3C/title%3E%3Cpath class='clr-i-solid clr-i-solid-path-1' d='M32.16,16.08,8.94,4.47A2.07,2.07,0,0,0,6,6.32V29.53a2.06,2.06,0,0,0,3,1.85L32.16,19.77a2.07,2.07,0,0,0,0-3.7Z'/%3E%3Crect x='0' y='0' width='36' height='36' fill-opacity='0'/%3E%3C/svg%3E%0A") no-repeat center center; background-size: cover; width: 20px; height: 20px;}

.main-watch-list .photo img { width: 100%; height: auto; position: absolute; left: 0; top: 0; transition: all 0.3s;}
.main-watch-list .category {padding: 20px 0;}
.main-watch-list .category span{ font-style: italic; color: #fff; text-transform:capitalize;}
.main-watch-list .title { font-size: 16px; line-height: 1.4em; font-weight: 700; word-break: keep-all;color: #fff; padding-bottom: 20px; min-height: 65px;}

.main-watch-list .date { margin-bottom: 16px; font-size: 16px; line-height: 1.5em; color: var(--color-gray5); font-weight: 500; margin-bottom: auto;}

.main-watch-list a:hover .photo img { transform: scale(1.03); transition: all 0.3s;}




/* mobile ******************************************************************* */

@media all and (max-width: 1360px) {
	.main-section .main-inner {width: calc(100% - 160px);}


}

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

  html:not(.no-js) [data-aos=fade-up] {
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
  }

  .main-section [data-aos][data-aos-delay="300"].aos-animate,
  .main-section [data-aos][data-aos-delay="400"].aos-animate,
  .main-section [data-aos][data-aos-delay="500"].aos-animate { transition-delay: 0s;}
  .main-section [data-aos][data-aos-delay="600"].aos-animate { transition-delay: 0.1s;}
  .main-section [data-aos][data-aos-delay="700"].aos-animate { transition-delay: 0.2s;}
  .main-section [data-aos][data-aos-delay="800"].aos-animate { transition-delay: 0.3s;}

  .main-section { height: auto !important;}
  .main-section .main-inner { padding: 55px 0; width: calc(100% - 40px);}

/*visual*/
  .main-visual {position: relative;}

  .sec-visual,
  .sec-visual .fp-tableCell,
  .sec-visual .main-visual {
    height: 580px !important;
  }
  .visual-swiper-control {bottom: 40px;}

  .main-title {font-size: 40px;}
  .main-section .go-more {font-size: 14px;}
  .intro-title {margin: 0 auto 20px auto}
/*about*/
  .sec-about .main-title-sub {font-size: 16px; line-height: 1.5}  

/*performance*/
  .main-performances-list li.active .photo {width: 50%;}
  .main-performances-list li.active .list-text-group {width: 50%;}


}
@media all and (max-width: 770px){
	.main-title {text-align: center; font-size: 34px;margin-bottom: 40px;}
	.main-section .go-more {font-size: 12px; padding: 12px 20px 12px 22px;}
	/*about*/
	.sec-about:after {padding-bottom: 62%;}
	.sec-about.main-section .main-inner {padding-top: 140px;}
	.sec-about .intro-title-txt h2.main-title span.tit-top {top: -34px;}
	.sec-about .main-title-sub {margin: 0;}
	.sec-about .intro-title .go-more {margin-top: 40px;}
	/*performance*/	
	.main-performances-list li.active .photo {width: 45%;}
	.main-performances-list li.active .list-text-group {width: 55%;}
	.main-performances-list li.active .list-li-wrap {gap: 20px; padding: 16px 0;}
	.main-performances-list li.active .category {margin-bottom: 20px;}
	.main-performances-list li.active .date-group {margin-bottom: 16px; font-size: 14px;}
	.main-performances-list li .title {font-size: 16px; line-height: 1.4;}
	.btn-circle {width: 40px; height: 40px; font-size: 12px;}
	
	.main-performances-list li .category {position: relative; top:0; left:0; margin-bottom: 16px;}
	.main-performances-list li .date-group {font-size: 14px;}
	.main-performances-list li .list-li-wrap {padding: 16px 0;}
	.main-performances-list li .go-link {font-size: 0.8em;}
	.main-performances-list .mo-only,
	.main-watch-list .mo-only {margin-top: 60px; text-align: center;}
	/*watch*/
	.main-watch-list ul {flex-flow: column; margin: 0;}
	.main-watch-list ul li {margin: 12px 0; width: 100%;}
	.main-watch-list a {flex-direction: row; gap: 20px;}
	.main-watch-list .photo {width: 45%; padding-top: 0%; height: auto;}
	.main-watch-list .photo img {position: unset;}
	.watch-text-list {width: 60%;}
	.main-watch-list .title {min-height: auto;}
	.main-watch-list .category {padding-top: 0;}

}
@media all and (max-width: 532px) {
	.visual-progressbar {width: 120px;}

	.sec-about .main-title-sub {width: 96%; margin: 0 auto;}
	.sec-about .main-title-sub br {display: none;}

	.main-performances-list li .list-li-wrap {flex-flow: column;}
	.main-performances-list li .category span.caslon {font-size: 12px;}
	.main-performances-list li .title {font-size: 15px;}
	.main-performances-list li .date-group {flex-wrap: wrap;}

	.main-performances-list li.active .photo {width: 100%;}
	.main-performances-list li.active .list-text-group {width: 100%;}
	.main-performances-list li.active .list-li-wrap {gap: 12px;}
	.main-performances-list li.active .category {margin-bottom: 12px;}
	.main-performances-list li.active .date-group {margin-bottom: 8px; }	
	.main-performances-list li.active .go-link-arrow {display: none;}

	
	
	.main-watch-list .category {font-size: 13px; padding-bottom: 12px;}
	.main-watch-list .title {font-size: 15px;}
	.main-watch-list .date {font-size: 13px;}
}

@media all and (max-width: 430px) {
	.visual-progressbar {width: 100px;}
	
}