/* ================================
   전체 레이아웃
================================ */
body {background: #000; word-break: keep-all; letter-spacing: -.5px;}
#media {position: relative; width: 100%; background: #000;}
#media main {padding: 20px;}
body.menu-open {overflow-y: hidden;}

/* header */
header {position: absolute; width: 100%; padding: 60px 80px 0; z-index: 505;}
header .in {width: 100%; display: flex;}
header .logo a {display: flex; gap: 0 40px; align-items: center;}
header .logo img {height: 58px; width: auto;}
header .logo p {display: flex; flex-direction: column; color: #fff;}
header .logo p b {font-size: 24px; font-weight: 600;}
header .logo p span {font-size: 20px; font-weight: 500;}
header .m-logo a {display: none; flex-direction: column; justify-content: center; align-items: center; gap: 7px;}
header .m-logo img {height: 24px; width: auto;}
header .m-logo span {display: block; font-size :13px; font-weight: 500; color: #fff;}
header .right {margin-left: auto; display: flex; gap: 70px;}
header nav {display: flex; align-items: center; gap: 0 50px;}
header nav a {font-size: 22px; color: #fff; letter-spacing: 1px;}
header aside {display: flex; gap: 0 5px; align-items: center;}
header aside a.insta, header aside a.youtube {width: 50px; height: 50px; border-radius: 10px; background-color: rgba(255,255,255,.12); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center;}
header aside .insta img {height: 24px; width: auto;}
header aside .youtube img {height: 20px; width: auto;}
header aside .call {display: flex; align-items: center; gap: 0 7px; font-size: 15px; color: #fff; height: 50px; padding: 0 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); letter-spacing: 0.5px;}
header aside .call a {position: relative;}
header aside .call .tel {padding-right: 7px;}
header aside .call .tel:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: rgba(255,255,255,.4); display: block; content: '';}
header aside .m-nav {display: none; width: 40px; height: 40px; padding: 10px; border-radius: 4px; background-color: rgba(255,255,255,.12); backdrop-filter: blur(10px); align-items: center; justify-content: center; flex-direction: column; gap: 6px;}
header aside .m-nav span {display: block; width: 100%; height: 2px; background-color: #fff;}
@media (max-width :1800px) {
	header {padding: 50px 60px 0;}
	header .logo img {height: 45px;}
	header .logo p b {font-size: 20px;}
	header .logo p span {font-size: 16px;}
	header nav a {font-size: 20px;}
}
@media (max-width :1600px) {
	header .logo {gap: 30px;}
	header .right {gap: 30px;}
	header nav {gap: 0 30px;}
	header aside .call {height: 46px; border-radius: 7px; gap: 10px;}
	header aside a.insta, header aside a.youtube {width: 46px; height: 46px; border-radius: 7px;}
	header aside .insta img {height: 22px;}
	header aside .youtube img {height: 18px;}
}
@media (max-width: 1200px) {
	#media main {padding: 0;}
	header {padding: 30px 40px 0;}
	header .logo a {gap: 20px;}
	header .logo img {height: 40px;}
	header .logo p b {font-size: 18px;}
	header .logo p span {font-size: 13px;}
	header .right {gap: 40px;}
	header nav {gap: 0 25px;}
	header nav a {font-size: 16px;}
	header aside .call {height: 40px; border-radius: 4px; font-size: 14px; padding: 0 15px;}
	header aside a.insta, header aside a.youtube {display: none;}
	header aside .insta img {height: 20px;}
	header aside .youtube img {height: 16px;}
}
@media (max-width: 991px) {
	header {padding: 20px 30px 0;}
	header nav {display: none;}
	header aside .call {display :none;}
	header aside .m-nav {display: flex;}
}
@media (max-width: 767px) {
	header .logo img {height: 36px;}
	header .logo p span {font-size: 14px;}
}
@media (max-width: 640px) {
	header {padding: 20px;}
}
@media (max-width: 480px) {
	header .logo {display: none;}
	header .m-logo a {display: flex;}
	header aside {gap: 0;}
	header aside .m-nav {gap: 7px;}
	header aside a.insta, header aside a.youtube, header aside .m-nav {background: none; backdrop-filter: none;}
}
.mobile-menu, .menu-backdrop {display: none;}
.mobile-menu .menu-close {position: absolute; top: 20px; right: 20px; font-size: 24px; color: #fff; background: none; border: none; cursor: pointer; z-index: 9999;}
.mobile-menu .mbTop {padding: 30px;}
.mobile-menu .mNav-logo a {display: flex; gap: 0 30px; align-items: center;}
.mobile-menu .mNav-logo img {height: 36px; width: auto;}
.mobile-menu .mNav-logo p {display: flex; flex-direction: column; color: #fff;}
.mobile-menu .mNav-logo p b {font-size: 18px;}
.mobile-menu .mNav-logo p span {font-size: 14px;}
.mobile-menu .mNav {padding: 30px;}
.mobile-menu .mNav ul li {width: 100%; height: 70px; margin-bottom: 10px; border-radius: 10px; background-color: rgba(255,255,255,.08);}
.mobile-menu .mNav ul li a {display: block; width: 100%; height: 100%; font-size: 24px; color: #fff; font-weight: 500; display: flex; align-items: center; padding-left: 25px;}
.mobile-menu .sns-link {padding: 30px;}
.mobile-menu .sns-link p {font-size: 24px; font-weight: 600; color: #fff; margin-bottom: 25px;}
.mobile-menu .sns-link .bt {display: flex; align-items: center; gap: 0 20px;}
.mobile-menu .sns-link .bt a {font-size: 22px; font-weight: 500;}
.mobile-menu .sns-link .bt a.insta {margin-left: 5px;}
.mobile-menu .sns-link .bt a.insta img {height: 24px; width: auto;}
.mobile-menu .sns-link .bt a.youtube img {height: 20px; width: auto;}
@media (max-width: 991px) {
  .mobile-menu {display: flex; flex-direction: column; justify-content: space-between; position: fixed; top: 0; right: -100%; width: 100%; height: 100dvh; background: url(/assets/service/img/media/bg-mb.png) no-repeat 50% 100% #000; background-size: cover;color: #fff; z-index: 1002; transition: right 0.3s ease; overflow-y: auto;}
  .mobile-menu.active {right: 0;}
  .menu-backdrop {display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease;}
	.menu-backdrop.active {opacity: 1; visibility: visible;}
	.mobile-menu .mNav {display: block; margin-bottom: auto;}
  .mobile-menu .mNav ul {display: flex; flex-direction: column;}
	.mobile-menu .btns {display: flex; align-items: center; gap: 0 5px; margin-top: 10px;}
	.mobile-menu .btns a {display: inline-block; padding: 4px 15px; border: 1px solid rgba(255,255,255,.6); font-size: 1rem;}
}
@media (max-width: 767px) {
	.mobile-menu .sns-link .bt {gap: 10px;}
	.mobile-menu .sns-link .bt a {font-size: 18px;}
}
@media (max-width: 480px) {
	.mobile-menu .mbTop, .mobile-menu .mNav, .mobile-menu .sns-link {padding: 15px 20px;}
	.mobile-menu .mNav ul li {height: 50px;}
	.mobile-menu .mNav ul li a, .mobile-menu .sns-link .bt a {font-size: 18px;}
	.mobile-menu .sns-link p {font-size: 20px;}
	.mobile-menu .sns-link .bt {display: grid; grid-template-columns: 1fr auto auto; gap: 5px;}
	.bt a:nth-child(1), .bt a:nth-child(2) {grid-column: 1 / -1}
	.bt a:nth-child(3) {grid-column: 2; margin-right: 5px;}
	.bt a:nth-child(4) {grid-column: 3;}
	.bt a:nth-child(3), .bt a:nth-child(4) {width: auto; display: inline-block;}
}

/* footer */
footer {position: relative; width: 100%; padding: 20px;}
footer .in {position: relative; padding: 70px 140px; background-color: rgba(255,255,255,.08); border-radius: 20px;}
footer .top-bg {position: absolute; left: 0; top: 0; width: 100%; height: 70px; z-index: 999;}
footer .top-bg .triangle {display: block; position: relative; width: 100%; height: 100%;}
footer .top-bg .triangle:before {display: block; content: ''; position: absolute; left: 0; width: 0; height: 0; border-right: 70px solid transparent; border-top: 70px solid #000;}
footer .top-bg .triangle:after {display: block; content: ''; position: absolute; right: 0; width: 0; height: 0; border-left: 70px solid transparent; border-top: 70px solid #000;}
footer .wrap {display: flex;}
footer .left {width: 50%; display: flex; flex-direction: column; gap: 50px;}
footer .bt-logo {display: flex; align-items: flex-end; gap: 30px;}	
footer .bt-logo img {height: 43px; width: auto;}
footer .bt-logo p {font-size: 20px; font-weight: 600; color: rgba(255,255,255,.66); letter-spacing: -0.7px;}
footer address p {margin: 4px 0; font-size: 20px; color: #fff;}
footer address p.copy {font-size: 18px;}
footer .right {display: flex; flex-direction: column; gap: 25px;}
footer .right > b {font-size: 28px; color: #fff; font-weight: 600;}
footer .right p {font-size 20px; color: rgba(255,255,255,.44);}
footer .link {display: flex; align-items: center;}
footer .link a, footer .link b {display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600;}
footer .link a img {height: 12px; width: auto;}
footer .tel, footer b.mail {position: relative; padding-right: 20px; margin-right: 20px; font-size: 18px; font-weight: 700; font-family: 'Pretendard';}
footer .tel:after, footer b.mail:after {position: absolute; right: 0; top: 7px; width: 1px; height: 12px; background: rgba(255,255,255,.6); display: block; content: '';}
footer .link .tel img {height: 18px; width: auto;}
footer .link .mail img {height: 15px; width: auto;}
@media (max-width: 1600px) {
	footer .in {padding: 70px;}
	footer .left {gap: 30px;}
	footer .bt-logo img {height: 30px;}
	footer .bt-logo p, footer address p {font-size: 18px;}
	footer address p.copy {font-size: 16px;}
	footer .right {gap: 15px;}
	footer .right > b {font-size: 22px;}
	footer .tel, footer b.mail {font-size: 15px; padding-right: 10px; margin-right: 10px;}
}
@media (max-width: 1200px) {
	footer {padding: 0; border-top: 1px solid rgba(255,255,255,.1);}
	footer .top-bg {display: none;}
	footer .in {border-radius: 0; padding: 60px 40px; background-color: #000;}
	footer .left {width: 42%;}
	footer .right {width: 58%;}
	footer .right > b {font-size: 20px;}
	footer .right p {font-size: 15px;}
}
@media (max-width: 991px) {
	footer .in {padding: 50px 40px;}
	footer .wrap {gap: 30px;}
	footer .bt-logo {flex-direction: column; align-items: flex-start; gap: 10px;}
	footer .bt-logo p {font-size: 15px;}
	footer address p {font-size: 16px;}
	footer address p.copy {font-size: 14px;}
	footer .link {flex-direction: column; gap: 5px 0; align-items: flex-start;}
	footer .right > b {font-size: 18px;}
	footer .right p {font-size: 15px;}
	footer .tel:after, footer b.mail:after {display: none;}
	footer .right {width: auto;} 
}
@media (max-width: 767px) {
	footer .in {padding: 40px 30px;}
	footer .wrap {justify-content: space-between;}
	footer .right {flex-direction: column;}
	footer .right > b, footer .right p {display: none;}
	footer .link {flex-direction: column; gap: 5px;}
	footer .link a, footer .link b {padding: 8px 15px; background-color: #242424; color: #fff; width: 100%; justify-content: space-between; gap: 0 20px;}
	footer .link a.tel, footer .link b {flex-direction: row-reverse;}
	footer .tel, footer b.mail {padding-right: 0; margin-right: 0; font-size: 16px;}
	footer .tel:after, footer b.mail:after {display: none;}
	footer .mail img {height: 13px;}
}
@media (max-width: 640px) {
	footer .in {padding: 30px 20px;}
	footer .left {width: 100%; padding-top: 10px;}
	footer .bt-logo img {height: 20px;}
	footer .tel, footer b.mail {font-size: 14px;}
	footer .link a, footer .link b {font-size: 14px; padding: 5px 12px;}
	footer .link .tel img {height: 15px;}
	footer .link .mail img {height: 13px;}
	footer .right {position: absolute; right: 20px;}
}
@media (max-width: 480px) {
	footer .wrap {flex-direction: column; gap: 15px;}
	footer .in {text-align: center; padding: 30px 20px;}
	footer .left {align-items: center; gap: 10px;}
	footer .bt-logo {align-items: center;}
	footer .right {position: relative; right: auto;}
	footer .link a, footer .link b {padding: 8px 10px; max-width: 240px; margin: 0 auto; text-align: center; justify-content: center;}
	footer .link a img, footer .link b img {display: none;}
}

/* ================================
   메인
================================ */
/* visual */
.vs {position: relative; width: 100%; height: calc(100vh - 40px); overflow: hidden;}
.vs .bg-gra {position: absolute; left: 0; top: 0; width: 100%; height: 330px; background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0)); z-index: 50;}
.vs .bt-bg {position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; z-index: 999;}
.vs .bt-bg .triangle {display: block; position: relative; width: 100%; height: 100%;}
.vs .bt-bg .triangle:before {display: block; content: ''; position: absolute; left: 0; width: 0; height: 0; border-right: 70px solid transparent; border-bottom: 70px solid #000; border-radius: 0;}
.vs .bt-bg .triangle:after {display: block; content: ''; position: absolute; right: 0; width: 0; height: 0; border-left: 70px solid transparent; border-bottom: 70px solid #000;}
.vs .slick-slider {border-radius: 20px; overflow: hidden;}
.vs .slick-slider, .vs .slick-slider div {height: 100%;}
.vs .slick-slider a {width: 100%; height: 100%;}
.vs .vsImg {display: flex; height: 100%; justify-content: center; align-items: center;}
.vs .vsImg img {width: 100%; height: 100%; object-fit: cover; opacity: 1; transform: scale(1); transition: none;}
.vs .vsImg.slick-current img {animation: fadeScale 3s ease forwards;}
@keyframes mymove {from{transform: scale(1.06);} to{transform: scale(1);}}
@keyframes fadeScale {0% {opacity: 1; transform: scale(1.06);} 100% {opacity: 1; transform: scale(1);}}
.vs .slogan {position: absolute; left: 70px; bottom: 60px; width: 100%; max-width: 1500px; display: flex; align-items: flex-start; gap: 0 30px; flex-direction: column; gap: 15px 0;}
#media .state {height: 100%;}
#media .state p {position: relative; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px;}
#media .state .end {background: #000; color: #fff;}
#media .state .on, #media .state .up {background: #fff; color: #000;}
#media .mask {clip-path: polygon(0% 0%, 100% 0%,100% calc(100% - 15px),calc(100% - 15px) 100%,0% 100%);}
.vs .slogan .title {font-size: 22px; color: #fff; font-weight: 500; max-width: 100%; align-items: center;}
.vs .slogan .period {font-size: 18px; color: rgba(255,255,255,.6); display: flex; align-items: center;}
.vs .in {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(100% - 130px);}
.vs .main_bar {position: relative;}
.vs .main_bar:after {background-color: rgba(255,255,255,.15); backdrop-filter: blur(10px); width: 100%; height: 5px; display: block; content: '';}
.vs .main_bar .pro-bar {position: absolute; width: 100%; height: 5px; background: rgba(255,255,255,.5); display: inline-block; z-index: 999;}
.vs .main_bar .pro-ani {animation: proBar 7s 1; width: 100%;}
@keyframes proBar {0%{width:0px;} 100%{width:100%;}}
.vs .arrow_wrap {position: absolute; right: 70px; bottom: 50px; display: flex; align-items: center; gap: 0 10px; z-index: 500;}
.vs .arrow_wrap div {width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); backdrop-filter: blur(10px); border-radius: 50%; cursor: pointer;}
.vs .arrow_wrap img {height: 14px; width: auto;}
@media (max-width: 1800px) {
	.vs .slogan {left: 40px; width: calc(100% - 220px);}
	.vs .arrow_wrap {gap: 5px; bottom: 55px; right: 40px;}
	.vs .arrow_wrap div {width: 50px; height: 50px;}
}
@media (max-width: 1600px) {
	.vs .slogan .title {font-size: 20px;}
}
@media (max-width: 1200px) {
	.vs {height: 700px; border-radius: 0;}
	.vs .slick-slider {border-radius: 0;}
	.vs .bt-bg {display: none;}
	.vs .slogan {bottom: 30px;}
	.vs .slogan .title {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word;}
	.vs .arrow_wrap {bottom: 30px;}
	.vs .arrow_wrap div {width: 40px; height: 40px;}
	.vs .in {width: 100%;}
}
@media (max-width: 991px) {
	.vs {height: 550px;} 
	.vs .slogan {left: 30px; flex-direction: column; height: auto !important; align-items: flex-start; width: calc(100% - 150px);}
	.vs .slogan .title {width: 100%;}
	#media .state p {height: 32px; padding: 0 15px; margin-bottom: 10px;}
	.vs .arrow_wrap {right: 30px;}
}
@media (max-width: 767px) {
	.vs .bg-gra {height: 150px;}
	#media .state p {font-size: 15px;}
	.vs .slogan .title {font-size: 18px;}
	.vs .slogan .period {font-size: 16px;}
}
@media (max-width: 640px) {
	.vs .slogan {left: 20px; bottom: 50px; width: calc(100% - 40px);}
	.vs .arrow_wrap {right: 20px;}
}
@media (max-width: 480px) {
	.vs {height: 480px;}
}

/* 전시리스트 */
.gallList {padding: 50px;}
.gallList .grid-box {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 20px;}
.gallList .item a {display: flex; flex-direction: column; gap: 40px;}
.gallList .imgWrap {position: relative; display: block; width: 100%; height: 380px; overflow: hidden;}
.gallList .imgWrap .box {position: absolute; left: 10px; bottom: 10px; height: 40px !important; z-index: 200;}
.gallList .imgWrap img {width: 100%; height: 100%; object-fit: cover; transition: all .5s;}
.gallList .imgWrap:hover img {transform: scale(1.08);}
.gallList .gallInfo {display: flex; flex-direction: column; gap: 7px; margin-bottom: 40px;}
.gallList .tit {font-size: 22px; color: #fff; line-height: 1.3;}
.gallList .date {font-family: 'Pretendard'; font-size: 18px; color: rgba(255,255,255,.6);}
.gallList .btn-wrap {text-align: center; margin-top: 30px;}
.gallList .moreBtn {text-align: center; display: inline-flex; align-items: center; height: 50px; padding: 0 50px; border: 1px solid rgba(255,255,255,.4); font-size: 16px; color: #fff; letter-spacing: 0;}
.gallList .wave-effect div {display: flex; overflow: hidden; text-shadow: 0 20px 0 #fff;}
.gallList .wave-effect span {display: block; -webkit-backface-visibility : hidden; backface-visibility: hidden; transition: transform .44s ease; letter-spacing: 1.5px;}
.gallList .wave-effect span:nth-child(1) {transition-delay: 0.05s;}
.gallList .wave-effect span:nth-child(2) {transition-delay: 0.1s;}
.gallList .wave-effect span:nth-child(3) {transition-delay: 0.15s;}
.gallList .wave-effect span:nth-child(4) {transition-delay: 0.2s; margin-right: 5px;}
.gallList .wave-effect span:nth-child(5) {transition-delay: 0.25s;}
.gallList .wave-effect span:nth-child(6) {transition-delay: 0.3s;}
.gallList .wave-effect span:nth-child(7) {transition-delay: 0.35s;}
.gallList .wave-effect span:nth-child(8) {transition-delay: 0.4s;}
.gallList .wave-effect a:hover span {transform: translateY(calc(20px * -1)) translateZ(0);}
@media (max-width: 1800px) {
	.gallList .imgWrap {height: 320px;}
	.gallList .tit {font-size: 20px;}
}
@media (max-width: 1600px) {
	.gallList .imgWrap {height: 300px;}
	.gallList .grid-box {gap: 30px;}
	.gallList .gallInfo {margin-bottom: 20px;}
	.gallList .imgWrap .box {height: 36px !important;}
	#media .state p {font-size: 15px; padding: 0 15px;}
}
@media (max-width: 1400px) {
	.gallList .imgWrap .box {height: 30px !important;}
	#media .state p {font-size: 14px;}
	.gallList .item a {gap: 25px;}
	.gallList .tit {font-size: 18px;}
	.gallList .date {font-size: 15px;}
}
@media (max-width: 1200px) {
	.gallList {padding: 40px;}
	.gallList .grid-box {grid-template-columns: repeat(2, 1fr); padding: 0;}
	.gallList .btn-wrap {margin: 10px 0 30px;}
}
@media (max-width: 991px) {
	.gallList {padding: 20px;}
	.gallList .grid-box {padding: 10px;}
	.gallList .imgWrap .box {height :32px !important;}
}
@media (max-width: 767px) {
	.gallList {padding: 0;}
	.gallList .grid-box {gap: 2px; padding: 0;}
	.gallList .imgWrap {height: 260px;}
	.gallList .item a {gap: 20px;}
	.gallList .tit {font-size: 16px;}
	.gallList .moreBtn {height: 40px; padding: 0 30px; font-size: 14px;}
	.gallList .gallInfo {margin-bottom: 0; padding: 0 20px 20px;}
}
@media (max-width: 640px) {
	.gallList .imgWrap .box {height: 26px !important; left: 5px; bottom: 5px;}
	.gallList .imgWrap .box p {height: 26px !important; font-size: 13px !important;}
	.gallList .tit {font-size: 14px;}
	.gallList .date {font-size: 13px;}
	.gallList .gallInfo {margin-bottom: 10px;}
}
@media (max-width: 480px) {
	.gallList {padding: 0 0 30px;}
	.gallList .grid-box {grid-template-columns: 1fr;}
	.gallList .imgWrap {height: 240px;}
	.gallList .imgWrap .box {left: 20px; bottom: 20px;}
	.gallList .gallInfo {padding: 0 20px;}
} 
@media (max-width: 360px) {
	.gallList .imgWrap {height: 180px;}
	.gallList .imgWrap .box {left: 15px; bottom: 15px;}
	.gallList .gallInfo {padding: 0 15px;}
}

/* ================================
   ABOUT
================================ */
.about {width: 100%; overflow-x: hidden;}
.about .sv {position: relative; width: 100%; height: 900px; overflow: hidden;}
.about .bg-gra {position: absolute; left: 0; top: 0; width: 100%; height: 330px; background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0)); z-index: 50;}
.about .bt-gra {position: absolute; left: 0; bottom: 0; width: 100%; height: 330px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); z-index: 50;}
.about .sv-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.about .sv-img img {width: 100%; height: 100%; object-fit: cover;}
.about .sv-img.active {animation: mymove 7s;}
.about .sv-slogan {position: relative; max-width: 1600px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; z-index: 500; color: #fff;}
.about .sv-slogan b {font-size: 80px; letter-spacing: 3px;}
.about .sv-slogan p {text-align: right; font-weight: 600; font-size: 48px;}
.about .con {position: relative; width: 100%; max-width: 1600px; margin: 0 auto;}
.about .summary {position: relative; width: 100%; padding: 150px 0; display: flex; justify-content: space-between;}
.about .summary .left{width: calc(100% - 1100px); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.about .summary .about-logo {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.about .summary .about-logo img {height: 60px; width: auto;}
.about .summary .about-logo span {display: block; font-size: 40px; color: #fff;}
.about .summary .left p {font-size: 30px; font-weight: 300; color: rgba(255,255,255,.3);}
.about .summary .right {width: 1100px; border-top: 2px solid #fff;}
.about .summary .row-data {padding: 30px 70px; color: #fff; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.4);}
.about .summary .row-data b {font-size: 24px; font-weight: 600; color: #fff; width: 20%;}
.about .summary .row-data p {font-size: 24px; color: #fff; font-weight: 300;}
.about .summary .row-data ul li {font-size: 24px; color: #fff; font-weight: 300; margin: 5px 0; font-family: "Pretendard";}
.about .business {position: relative; width: 100%; display: flex; gap: 50px;}
.about .lBox, .about .rBox {padding: 300px 70px 70px; font-family: "Pretendard";}
.about .lBox {width: calc(100% - 600px); background: url(/assets/service/img/media/bg-lBox.jpg) no-repeat 50%; background-size: cover;}
.about .rBox {width: 550px; background: url(/assets/service/img/media/bg-rBox.jpg) no-repeat 50%; background-size: cover;}
.about .business b {display: block; margin-bottom: 80px; font-size: 48px; font-weight: 600; color: #fff;}
.about .lBox ul li {font-size: 24px; color: #9CBBE3; margin: 10px 0;}
.about .rBox ul li {font-size: 24px; color: #D9B5AA; margin: 10px 0;}
.about .tech {width: 100%; padding: 150px 0; display: flex; justify-content: space-between;}
.about .tech .left {width: calc(100% - 1100px); font-size: 40px; color: #fff;}
.about .tech .right {width: 1100px;}
.about .tech .grid-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px;}
.about .tech .item {border-top: 1px solid #fff; padding: 50px 0;}
.about .tech .item b {display: block; margin-bottom: 10px; font-size: 32px; color: #fff; font-weight: 500;}
.about .tech .item p {font-size: 24px; color: rgba(255,255,255,.7);}
@media (max-width: 1800px) {
	.about .sv-slogan, .about .con  {max-width: 100%; padding: 0 60px;}
}
@media (max-width: 1600px) {
	.about .sv-slogan b {font-size: 60px;}
	.about .sv-slogan p, .about .tech .left {font-size: 36px;}
	.about .summary, .about .tech {padding: 120px 0;}
	.about .summary .left, .about .tech .left {width: calc(100% - 900px);}
	.about .summary .right, .about .tech .right {width: 900px;}
	.about .summary .about-logo img {height: 50px;}
	.about .summary .about-logo span {font-size: 32px;}
	.about .summary .left p {font-size: 26px;}
	.about .summary .row-data {padding: 22px 50px;}
	.about .summary .row-data b, .about .summary .row-data p, .about .summary .row-data ul li, .about .lBox ul li, .about .rBox ul li, .about .tech .item p {font-size: 22px;}
	.about .lBox, .about .rBox {padding: 200px 70px 70px;}
	.about .business {gap: 40px;}
	.about .business b {font-size: 40px;}
	.about .lBox {width: calc(100% - 590px);}
	.about .tech .item b {font-size: 30px;}
}
@media (max-width: 1400px) {
	.about .sv {height: 750px;}
	.about .sv-slogan b {font-size: 48px;}
	.about .sv-slogan p {font-size: 32px;}
	.about .summary .left, .about .tech .left {width: calc(100% - 750px);}
	.about .summary .right, .about .tech .right {width: 750px;}
	.about .summary .about-logo img {height: 44px;}
	.about .summary .about-logo span {font-size: 28px;}
	.about .summary .left p {font-size: 24px;}
	.about .business {gap: 30px;}
	.about .lBox, .about .rBox {padding: 150px 50px 50px;}
	.about .lBox {width: calc(100% - 380px);}
	.about .rBox {width: 350px;}
	.about .business b {font-size: 36px; margin-bottom: 50px;}
	.about .lBox ul li, .about .rBox ul li {margin: 7px 0;}
	.about .tech .item b {font-size: 24px;}
	.about .tech .item p {font-size: 20px;}
}
@media (max-width: 1200px) {
	.about .sv {height: 700px;}
	.about .sv-slogan, .about .con  {max-width: 100%; padding: 0 40px;}
	.about .summary .left, .about .tech .left {width: calc(100% - 650px);}
	.about .summary .right, .about .tech .right {width: 650px;}
	.about .summary .about-logo img {height: 40px;}
	.about .summary .about-logo span {font-size: 24px;}
	.about .summary .left p {font-size: 20px;}
	.about .summary .row-data {padding: 18px 30px;}
	.about .summary .row-data b, .about .summary .row-data p, .about .summary .row-data ul li, .about .lBox ul li, .about .rBox ul li, .about .tech .item p {font-size: 18px;}
	.about .business {gap: 10px;}
	.about .lBox {width: calc(100% - 360px);}
	.about .rBox {width: 350px;}
	.about .lBox, .about .rBox {padding: 120px 30px 30px;}
	.about .business b {font-size: 32px;}
	.about .tech .grid-list {grid-template-columns: repeat(1, 1fr); gap: 0;}
	.about .tech .item {padding: 30px;}
	.about .tech .item b {font-size: 22px; margin-bottom: 5px;}
}
@media (max-width: 991px) {
	.about .sv {height: 550px;}
	.about .bg-gra, .about .bt-gra {height: 150px}
	.about .sv-slogan, .about .con  {padding: 0 30px;}
	.about .sv-slogan {flex-direction: column; gap: 30px; justify-content: center; align-items: flex-start;}
	.about .sv-slogan p {text-align: left; font-size: 26px; font-weight: 400;}
	.about .summary, .about .tech {padding: 70px 0;}
	.about .summary .left {display: none;}
	.about .summary .right, .about .tech .right {width: 100%;}
	.about .lBox, .about .rBox {width: 50%;}
	.about .tech {flex-direction: column; gap: 15px;}
	.about .tech .left {width: 100%; font-size: 22px;}
	.about .tech .grid-list {grid-template-columns: repeat(2, 1fr); gap: 15px;}
	.about .tech .item {padding: 30px 0;}
}	
@media (max-width: 767px) {
	.about .sv-slogan b {font-size: 40px;}
	.about .sv-slogan p {font-size: 22px;}
	.about .business {flex-direction: column; gap: 10px;}
	.about .lBox, .about .rBox {width: 100%; padding: 70px 30px 50px;}
	.about .business b {margin-bottom: 30px;}
	.about .tech .item b {font-size: 20px;}
}
@media (max-width: 640px) {
	.about .sv-slogan {padding: 0 40px 40px; justify-content: flex-end; gap: 20px;}
	.about .con  {padding: 0 20px;}
	.about .sv-slogan b {font-size: 32px;}
	.about .sv-slogan p {font-size: 18px;}
	.about .summary .row-data {padding: 15px 10px;}
	.about .summary .row-data b {width: 20%;}
	.about .summary .row-data p, .about .summary .row-data ul {width: 80%;}
	.about .summary .row-data b, .about .summary .row-data p, .about .summary .row-data ul li, .about .lBox ul li, .about .rBox ul li, .about .tech .item p {font-size: 16px;}
	.about .lBox, .about .rBox {padding: 40px 20px;}
	.about .business b {font-size: 24px; margin-bottom: 20px;}
	.about .lBox ul li, .about .rBox ul li {margin: 3px 0;}
	.about .tech .grid-list {grid-template-columns: repeat(1, 1fr); gap: 0;}
	.about .tech .item {padding: 20px 0; border-top: 1px solid rgba(255,255,255,.4);}
}	
@media (max-width: 480px) {
	.about .sv {height: 480px;}
	.about .sv-slogan {padding: 0 30px 70px;}
	.about .sv-slogan p {font-size: 16px;}
	.about .summary .row-data {flex-direction: column; gap: 5px; align-items: flex-start; padding: 20px 10px;}
	.about .summary .row-data b, .about .summary .row-data p, .about .summary .row-data ul {width: 100%;}
	.about .summary .row-data p, .about .summary .row-data ul li, .about .lBox ul li, .about .rBox ul li, .about .tech .item p {font-size: 14px;}
	.about .summary .row-data b, .about .tech .item b {font-size: 16px;}
	.about .summary .row-data ul li {margin: 3px 0;}
	.about .business b, .about .tech .left {font-size: 20px;}
	.about .tech .item {padding: 20px 10px;}
}
@media (max-width: 360px) {
	.about .sv-slogan {padding: 0 20px 50px;}
}

/* ================================
   EXHIBITIONS
================================ */
.exhibitions .list-tit {padding: 220px 0 60px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff;}
.exhibitions .gall-list {padding: 0 90px;}
.exhibitions .gall-list .gallList {padding: 50px 0;}
.exhibitions .gall-list .gallList .grid-box {padding: 0;}
.exhibitions .tab {width: 100%; border-bottom: 1px solid rgba(255,255,255,.15);}
.exhibitions .tab ul {display: flex; align-items: center;}
.exhibitions .tab ul li a {margin-right: 40px; display: block; padding: 10px 0; color: #fff; font-size: 20px; font-family: "Poppins-Regular";}
.exhibitions .tab ul li a.active {margin-bottom: -1px; border-bottom: 1px solid #fff;}
@media (max-width: 1200px) {
	.exhibitions .list-tit {padding: 150px 0 40px; font-size: 32px;}
	.exhibitions .gall-list {padding: 0 40px;}
	.exhibitions .gall-list .gallList {padding: 40px 0;}
	.exhibitions .tab ul li a {margin-right: 30px; font-size: 18px;}
}
@media (max-width: 991px) {
	.exhibitions .list-tit {padding: 120px 0 30px;}
	.exhibitions .gall-list {padding: 0 30px;}
}
@media (max-width: 767px) {
	.exhibitions .list-tit {padding: 100px 0 20px; font-size: 30px;}
	.exhibitions .gall-list {padding: 0;}
	.exhibitions .tab ul {padding: 0 20px;}
	.exhibitions .tab ul li a {font-size: 16px; margin-right: 20px;}
}
@media (max-width: 480px) {
	.exhibitions .list-tit {font-size: 24px;}
	.exhibitions .gall-list {padding: 0;}
	.exhibitions .gall-list .gallList {padding: 20px 0;}
	
}
@media (max-width: 480px) {
	.exhibitions .list-tit {font-size: 20px;}
	.exhibitions .tab ul li a {font-size: 15px;}
}

/* ================================
   EXHIBITIONS - VIEW
================================ */
.view {width: 100%; overflow-x: hidden;}
.view .sv {position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden;}
.view .bg-gra {position: absolute; left: 0; top: 0; width: 100%; height: 330px; background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0)); z-index: 50;}
.view .bt-gra {position: absolute; left: 0; bottom: 0; width: 100%; height: 330px; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); z-index: 50;}
.view .video {position: relative; width: 100%;	height: 0; padding-bottom: 56.25%; overflow: hidden;}
.view .video iframe, .view .video #player {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; min-height: calc(300px + 100vh); min-width: 177.77vh; pointer-events: none;}
.view .slogan {position: absolute; left: 70px; bottom: 60px; width: 100%; height: 40px !important; max-width: 1500px; display: flex; align-items: center; gap: 0 30px; z-index: 800;}
#media .state {height: 100%;}
#media .state p {position: relative; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 16px;}
#media .state .end {background: #000; color: #fff;}
#media .state .on, #media .state .up {background: #fff; color: #000;}
#media .mask {clip-path: polygon(0% 0%, 100% 0%,100% calc(100% - 15px),calc(100% - 15px) 100%,0% 100%);}
.view .slogan .title {font-size: 22px; color: #fff; font-weight: 500; white-space: nowrap; max-width: 70%; text-overflow: ellipsis; overflow: hidden; align-items: center;}
.view .slogan .period {font-size: 18px; color: rgba(255,255,255,.6); display: flex; align-items: center;}
.view .editer-viewer {width: 100%; padding: 0px 90px;}
.view .editer-viewer .text-con {position: relative; width: 100%; max-width: 1400px; margin: 100px auto; color: #fff; word-break: break-all;}
.view .editer-viewer .title {margin-bottom: 50px; text-align: center; font-size: 32px;}
.view .editer-viewer p {margin: 20px 0; font-size: 22px; line-height: 1.4; font-family: 'Poppins-Regular', 'Pretendard';}
.view .video-box {position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.view .video-box iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0;}
.view .photo-box {width: 100%; margin-top: 10px; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 395px 395px; gap: 10px; height: 800px; overflow: hidden; cursor: pointer;}
.view .box {display: flex; align-items: center; justify-content: center; height: 100%;}
.view .box img {width: 100%; height: 100%; object-fit: cover;}
.view .box1 {grid-row: 1 / span 2; grid-column: 1 / 2;}
.view .box2 {grid-row: 1 / 2; grid-column: 2 / 3;}
.view .box3 {grid-row: 1 / 2; grid-column: 3 / 4;}
.view .box4 {grid-row: 2 / 3; grid-column: 2 / 3;}
.view .box5 {grid-row: 2 / 3; grid-column: 3 / 4;}
@media (max-width: 1800px) {
	.view .slogan {left: 40px;}
	.view .slogan .title {width: 70%;}
}
@media (max-width: 1600px) {
	.view .slogan .title {font-size: 20px;}
	.view .photo-box  {height: 600px; grid-template-rows: 295px 295px;}
}
@media (max-width: 1400px) {
	.view .slogan .title {width: 65%;}
	.view .editer-viewer {padding: 80px 60px;}
	.view .editer-viewer .title {font-size: 28px;}
	.view .editer-viewer p {font-size: 20px;}
}
@media (max-width: 1200px) {
	.view .slogan {bottom: 30px;}
	.view .editer-viewer {padding: 60px 40px;}
	.view .editer-viewer p {font-size: 18px;}
	.view .photo-box  {height: 460px; grid-template-rows: 225px 225px;}
}
@media (max-width: 991px) {
	.view .slogan {left: 30px; flex-direction: column; height: auto !important; align-items: flex-start;}
	.view .slogan .title {width: calc(100% - 170px);}
	#media .state p {height: 32px; padding: 0 15px; margin-bottom: 10px;}
	.view .slogan .title {width: calc(100% - 60px);}
	.view .editer-viewer {padding: 50px 0 0;}
	.view .editer-viewer .text-con {margin: 50px auto; padding: 0 30px;}
	.view .editer-viewer .title {font-size: 24px;}
	.view .photo-box {height: auto; margin-top: 2px; gap: 2px; grid-template-columns: 1fr 1fr; grid-template-rows: auto;}
	.view .box1 {grid-column: 1 / -1; grid-row: auto; height: 350px;}
	.view .box2, .view .box3, .view .box4, .view .box5 {height: 250px;}
	.view .box2 { grid-column: 1; }
	.view .box3 { grid-column: 2; }
	.view .box4 { grid-column: 1; }
	.view .box5 { grid-column: 2; }
}
@media (max-width: 767px) {
	#media .mask {clip-path: polygon(0% 0%, 100% 0%,100% calc(100% - 10px),calc(100% - 10px) 100%,0% 100%);}
	#media .state p {font-size: 15px; padding: 0 10px;}
	.view .slogan .title {font-size: 18px;}
	.view .slogan .period {font-size: 16px;}
}
@media (max-width: 640px) {
	.view .sv, .view .video {height: 480px; padding-bottom: 0;}
	.view .slogan {left: 20px;}
	.view .slogan .title {width: calc(100% - 40px);}
	.view .editer-viewer {padding: 40px 0 0;}
	.view .editer-viewer .text-con {margin: 30px auto; padding: 0 20px;}
	.view .editer-viewer .title {text-align: left; font-size: 20px; margin-bottom: 30px;}
	.view .editer-viewer p {font-size: 16px;}
	.view .box1 {grid-column: 1 / -1; grid-row: auto; height: 240px;}
	.view .box2, .view .box3, .view .box4, .view .box5 {height: 180px;}
}
@media (max-width: 480px) {
	.view .editer-viewer {padding: 0;}
	.view .editer-viewer .title {font-size: 16px;}
	.view .editer-viewer p {font-size: 14px; margin: 10px 0;}
	.view .box1 {grid-column: 1 / -1; grid-row: auto; height: 200px;}
	.view .box2, .view .box3, .view .box4, .view .box5 {height: 160px;}
}

.modal {position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 999;}
.modal.show {display: flex;}
.modal .modal-bg {position: absolute; inset: 0; background: rgba(0,0,0,0.75);}
.modal .modal-content {position: relative; z-index: 2; animation: zoomIn .3s ease;}
.modal .modal-img {max-width: 90vw; max-height: 90vh; border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);}
.modal .modal-close {position: absolute; right: -10px; top: -10px; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; cursor: pointer; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,0.3); padding: 0; backdrop-filter: blur(10px);}
@keyframes zoomIn {0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; }}
body.no-scroll {overflow: hidden;}