@charset "utf-8";

#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 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 a span {position: relative;}
#gnav .gnav-list a:hover span:after,
#gnav .gnav-list .active a span:after {content:''; width: 100%; display: inline-block; height: 2px; position: absolute; bottom: -4px; left: 0; background: #fff;}


/*about*/
.about-container {position: relative; background-color:  #030303;}
.about-bg {position: relative; padding-bottom: 45%; width: 100%; background: #030303 url(../img/about-bg.png) no-repeat center center; background-size: 100% auto;}
.about-wrap {padding: 80px 0 0px;}
.about-title-img {text-align: center; padding-top: 80px;}
.about-txt-wrap {position: relative;padding: 200px 0 0px; margin-top: 100px;text-align: center; color: #fff; display: flex; flex-flow: column; align-items: center;}
.about-txt-wrap:after {content:''; display: block; width: 1px; height: 80px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.4);}

.sub_title {position: relative; font-size: 82px; padding-bottom: 26px; }
.about-txt-wrap .sub_title { display: inline-block; font-size: 65px; margin-left: 50px; }
.about-txt-wrap .sub_title .tit-top {position: absolute; bottom:94px; left:-50px; font-size: 1.4em;}

.sub-txt {font-size: 20px; text-align: left; display: inline-block; color: #111;}
.sub-txt p {padding-bottom: 30px; line-height: 1.6; }
.about-txt { padding: 80px 0 0; }
.about-txt p {color: #fff; line-height: 2;}
.about-txt p:last-of-type {padding-bottom: 0;}

/*greeting*/
.greeting-container {position: relative; }
.greeting-container:after {content:''; display: block; width: 100%; height: 100%; background: #9e9681 url(../img/greeting-bg.png) no-repeat bottom right; background-size: cover; position: absolute; top:0; left:0; z-index: -1;}
.greeting-wrap {padding: 180px 0 180px;}
.greeting-wrap .flex {display: flex; justify-content: flex-end;}
.greeting-txt-wrap {width: 50%;}
.greeting-txt-wrap .sub_title {text-align: left;}
.greeting-txt-wrap .sub-txt {padding-left: 20px;}
.sign span {font-weight: 600;}
.sign-img {display: flex; align-items: flex-start; gap: 16px; padding-top: 16px;}
.sign-img span {font-size: 16px; }

/*contact*/
.contact-wrap { padding: 120px 0;}
.contact-wrap .contact-txt-wrap {align-items: center; }
.contact-wrap .contact-txt-wrap p {margin: 5px 0;}
.contact-wrap .contact-txt-wrap p.email {padding-top: 10px;}
.contact-wrap .contact-txt-wrap .cera {font-size: 30px;}
.contact-wrap .contact-txt-wrap p.email span {letter-spacing: 1px; display: inline-block; }
.contact-sns-wrap {padding: 50px 0;}
.contact-sns-wrap a {display: inline-block; height: 35px; padding:0 20px; text-align: center; position: relative;}
.contact-sns-wrap a.instagram {height: 44px;}
.contact-sns-wrap a img {height: 100%; width: auto;}
.contact-sns-wrap a:first-child:after {content:''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%); display: block; width: 4px; height: 4px; border-radius: 50%; background: #111; }


/*member*/
.member-wrap {padding: 120px 0;}
.member-wrap h3.sub_title p.sub-title-bottom {font-size: .4em; line-height: 1.5;}
.member-board-list {padding: 50px 0;}
.member-board-list ul.flex {flex-wrap: wrap; width: calc(100% + 10px); margin-left: -5px;}
.member-board-list ul.flex li {padding: 26px 5px; width: calc(100% / 6); box-sizing: border-box;}
.member-board-list ul.flex li a {display: flex; flex-flow: column;}
.member-board-list ul.flex li a .member-list-img {position: relative; width: 100%; overflow: hidden; padding-bottom: 150%;}
.member-board-list ul.flex li a .member-list-img img {position: absolute; top:0; left: 0; width: 100%; transition: transform .4s ease;}
.member-board-list ul.flex li a:hover .member-list-img img {transform: scale(1.05); transition: transform .4s ease;}
.member-board-list ul.flex li a .member-nm {font-size: 20px; padding: 10px 5px 5px; font-weight: 800;}
.member-board-list ul.flex li a .member-info {padding: 0 5px;}

.btn-modify {border: 1px solid #111; padding: 2px 10px; border-radius: 20px; text-align: center;}

.btn_bo_user > li > button,
.btn_bo_user > li > a {width: 100%;}

/*member modal*/
#modal {position: fixed; top:0; left:0; right:0; bottom:0; display: flex; align-items: center; justify-content: center;  z-index: 99; opacity: 0; transition: all .3s ease; z-index: -1}
#modal.open {opacity:1; height: auto; transition: all .3s ease; z-index: 99;}
.modal-inner { position: relative;padding: 80px; box-sizing: border-box; background: #fff; width: 1360px; border: 1px solid #111; max-height: 94vh; overflow-y: auto;}
.modal-inner .flex {gap: 80px;}
.modal-member-img {height: 650px; }
.modal-member-img img {height: 100%;}
.modal-member-info {font-size: 20px; padding: 50px 0;}
.modal-member-title {padding-bottom: 50px;}
.modal-member-title .member-nm {font-size: 1.6em; font-weight: 800;}
.modal-member-history {line-height: 1.7;}
.modal-close-btn {position: absolute; top: 40px; right: 40px; font-size: 40px;}

/*performance*/
.performance-wrap {padding: 120px 0;}

.board-list-category.flex { align-items: center; justify-content:center; font-size: 18px; margin-bottom: 40px;}
.board-list-category a {padding: 0 10px; margin: 0 10px; display: inline-block;}
.board-list-category li {position: relative;}
.board-list-category li:after {content:''; display: block; width: 1px; height: 16px; background: #111; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.board-list-category li:last-child:after {width: 0;}
.board-list-category #bo_cate_on span {background: #111; color: #fff; border-radius: 20px; padding: 4px 16px; display: inline-block;}

.performance-board-list {padding: 40px 0;}
.performance-board-list .board-list li {border-bottom: 1px solid #ccc;}
.performance-board-list .board-list li:first-child {border-top: 1px solid #111;}
.performance-board-list .board-list li:last-child {border-bottom-color: #111;}
.performance-board-list .board-list li .flex {display: flex;}
.performance-board-list .board-list li > .flex {gap: 40px; padding: 36px 0; }
.performance-board-list .board-list li .photo {width: 550px;}
.performance-board-list .board-list li .list-text-group {width: calc(100% - 550px); flex-flow: column;}
.performance-board-list .board-list li .category span.caslon {display: inline-block; padding: 3px 6px; background: #000; color: #fff;font-style:italic; font-size: 16px;}
.performance-board-list .board-list li .date-group {color: #111; flex-flow: column; margin-bottom: 30px; font-size: 20px; margin-top: 50px;}
.performance-board-list .board-list li .title {font-size: 26px; padding-top: 6px; font-weight: 700;}
.performance-board-list .board-list li .go-link {margin-top: auto;}
.performance-board-list .board-list li .go-link a { color: var(--color-gray6); display: block; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.performance-board-list .board-list li .go-link a:hover {color: #111;}

/*watch*/
.watch-wrap {padding: 120px 0;}

.watch-board-list ul.board-list {display: flex; width: calc(100% + 20px); margin-left: -10px; flex-wrap: wrap; border-top: 1px solid #111; border-bottom: 1px solid #111;}
.watch-board-list ul.board-list li { width: calc(100% / 4); padding: 36px 10px; box-sizing: border-box; border-bottom: 1px solid #ccc; margin-bottom: 20px;}
.watch-board-list ul.board-list li.border-none {border: 0;}

.watch-board-list a { display: flex; flex-direction: column;}

.watch-board-list .photo { position: relative; height: 0; padding-top: 70%; overflow: hidden;}
.watch-board-list .photo.Video:after,
.watch-board-list .photo.Video:before {content:''; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1;}
.watch-board-list .photo.Video:before {width: 50px; height: 50px; background: rgba(255,255,255,.5); border-radius: 50%; }
.watch-board-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;}

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

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

.watch-board-list a:hover .photo img { transform: scale(1.03); transition: all 0.3s;}
.btn-wrap {text-align: center;}
.list-btn {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;}

/*history*/
.history-wrap {padding: 120px 0;}
.category-select { margin: 0 auto 45px; width: 140px;}
.history-category-btn { position: relative; border-radius: 20px; border: 1px solid #111; display: inline-block; text-align: center; padding: 8px 10px; font-weight: 700; width: 100%; cursor: pointer; /*background: url(../img/icon-form-select-arrow.png) no-repeat right 10px center;*/}
.history-category-btn i {display: inline-block; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 13px; transition: all .3s ease;}
.history-category-btn.open i {transform: rotate(-180deg); top: 30%;}

.history-list-category-wrap {position: relative;}
.history-list-category {position: absolute; top:0; left:0; width: 100%; border: 1px solid #111; border-top: 0; text-align: center; padding: 8px 10px;border-radius: 20px; z-index: 8; background: #fff; display: none;}
.history-list-category li a {display: inline-block; padding: 10px; }
.history-year {text-align: center; position: relative;}
.history-year:after {content:''; display: block; width: 100%; height: 1px; position: absolute; top: 50%; left:0; transform: translateY(-50%); z-index: -1; background: #000;}
.history-year span {display: inline-flex; background: #111; border-radius: 50%; color: #fff; width: 100px; height: 100px; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;font-size: 40px; word-break: break-word; line-height: .7;}
.history-wrap .performance-board-list li:first-child {border-top: 0;}
.history-wrap .performance-board-list li .photo {width: 400px;}
.history-wrap .performance-board-list li .list-text-group {width: calc(100% - 400px);}
.history-wrap .performance-board-list li .title {padding-bottom: 16px;}
.history-wrap .performance-board-list li .content {font-size: 18px; width: 90%; word-break: keep-all; line-height: 1.6;}


/* mobile ******************************************************************* */
@media all and (max-width:1360px){
	/*greeting*/
	.greeting-wrap {padding: 100px 0 60px;}
}
@media all and (max-width:1099.99px){
	/*about*/
	.about-wrap {padding: 56px 0 0px;}

	/*greeting*/
	.sub_title {font-size: 56px;}
	.greeting-txt-wrap {width: 58%;}
	.greeting-txt-wrap .sub-txt {font-size: 18px; padding-right: 20px;}
	.greeting-txt-wrap .sub-txt .pc-only {display: none;}

	/*member*/
	.member-board-list ul.flex li {width: calc(100% / 4)}
	.modal-inner {width: calc(100% - 40px); padding: 50px; max-height: 90vh; overflow: hidden auto;}
	.modal-inner .flex {gap: 40px;}
	.modal-member-img {width: 45%; height: auto;}
	.modal-member-img img {width: 100%; height: auto;}
	.modal-member-info {padding: 16px 0 0;}

	/*performance*/
	.performance-board-list .board-list li > .flex {gap: 20px;}
	.performance-board-list .board-list li .photo {width: 45%;}
	.performance-board-list .board-list li .photo img {width: 100%;}
	.performance-board-list .board-list li .list-text-group {width: 55%;}
	.performance-board-list .board-list li .date-group {font-size: 18px; margin: 30px 0 15px;}
	.performance-board-list .board-list li .title {font-size: 22px; line-height: 1.3;}

	/*watch*/
	.watch-board-list ul.board-list li {width: calc(100% / 2)}
	.watch-board-list ul.board-list li.border-none:nth-child(-n+2) {border-bottom: 1px solid #ccc;}
	/*view*/

	
}

@media all and (max-width:769.99px){
	
	.sub_title {font-size: 46px;}
	/*about*/
	/* .about-wrap {padding: 56px 0 758px;} */
	.about-bg {background: #030303 url(../img/m-about-bg.png) no-repeat center center; padding-bottom: 140%; background-size: cover;}
	.about-title-img {width: 36%; margin: 0 auto;}
	.about-title-img img {max-width: 100%;}
	.about-txt-wrap {padding-top: 180px; margin-top: 60px;}
	.about-txt-wrap .sub_title {font-size: 46px;}
	.about-txt-wrap .sub_title .tit-top {bottom: 70px;}
	.about-txt {width: 80%; word-break: keep-all; padding: 55px 0 0; }

	/*greeting*/ 
	.greeting-container:after {background: #9e9681 url(../img/m-greeting-bg.png) no-repeat bottom center; background-size: cover; }
	.greeting-wrap {padding: 120px 0 750px;}
	.greeting-txt-wrap .sub_title {text-align: center; padding-bottom: 60px;}
	.greeting-wrap .flex {justify-content: center;}
	.greeting-txt-wrap {width: 90%; }
	.greeting-txt-wrap .sub-txt .pc-only {display: block;}

	.watch-wrap {padding: 80px 0;}
	/*member*/
	.member-wrap {padding: 80px 0;}
	.member-board-list ul.flex li {width: calc(100% / 3)}
	.modal-inner {padding: 50px 30px;}
	.modal-inner .flex {gap: 20px;}
	.modal-member-info {font-size: 16px;}
	.modal-member-title {padding-bottom: 20px;}
	.modal-member-history {line-height: 1.5;}
	.modal-close-btn {top: 25px; right: 25px; font-size: 28px;}

	/*performance*/
	.performance-wrap {padding: 80px 0;}
	
	.board-list-category.flex {margin-bottom: 0; font-size: 15px;}
	.board-list-category.flex a {}
	.performance-board-list {padding: 0;}
	.performance-board-list .board-list li:first-child {border-top: 0;}
	.performance-board-list .board-list li > .flex {flex-flow: column; padding: 16px 0;}
	.performance-board-list .board-list li .photo {width: 100%;}
	.performance-board-list .board-list li .list-text-group {width: 100%;}
	.performance-board-list .board-list li .date-group {font-size: 16px;}
	.performance-board-list .board-list li .title {font-size: 18px;}
	.performance-board-list .board-list li .go-link {margin-top: 30px; font-size: 14px;}

	/*history*/
	.history-wrap {padding: 80px 0;}
	.history-wrap .performance-board-list li .content {font-size: 16px; width: 100%;}

	/*watch : view*/
	.watch-txt-wrap #bo_v_title .bo_v_tit {font-size: 22px;}
	.if_date {font-size: 14px;}
	.bo_v_nb {width: 100%;}
	.bo_v_nb li {font-size: 12px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.btn-wrap .btn {font-size: 12px;}
	
}

@media all and (max-width: 532px) {
	.sub-txt {font-size: 16px;}

	/*about*/
	.about-wrap {padding: 0;}
	.greeting-container:after { background-size: 100%; }
	.about-txt-wrap .sub_title {font-size: 36px;}
	

	/*greeting*/ 
	.greeting-wrap {padding: 80px 0 470px}
	.greeting-txt-wrap .sub_title {font-size: 36px; padding-bottom: 30px;}
	.greeting-txt-wrap .sub-txt {font-size: 16px;}

	/*member*/
	.member-board-list {padding: 0;}
	.member-board-list ul.flex li {width: calc(100% / 2)}
	.modal-inner .flex {flex-flow: column;}
	
	/*performance*/
	.board-list-category.flex {font-size: 16px; white-space: nowrap; max-width: 100%; justify-content: flex-start; overflow: auto hidden;}

	/*history*/
	.history-year span {font-size: 30px; width: 80px; height: 80px;}

	/*watch : view*/
	.watch-txt-wrap .v_header.flex {flex-flow: column; align-items: flex-start;}
	.bo_v_nb li .nb_date {display: none;}
	#bo_v_info {width: 100%;}


}

@media all and (max-width: 430px) {
	.greeting-wrap {padding: 60px 0 420px}
	.greeting-txt-wrap .sub-txt .pc-only {display: none;}

	/*greeting*/
	.greeting-txt-wrap .sub-txt {padding: 0;}

	/*watch*/
	.watch-board-list ul.board-list li {padding: 20px 5px;}
	.watch-board-list .title {font-size: 16px; padding-bottom: 26px;}
	/*member*/
	.modal-member-img {width: 70%;}

}