/* 공통 */
.sub_visual_wrap{position:relative;}
.sub_visual{height: 600px; position:relative; display: flex; align-items: center; background-size: cover; background-position: center;}
.sub_visual .bg{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; overflow: hidden;}
.sub_visual .bg .img{width: 100%; height: 100%; background:url("/img/sub/sub_visual.jpg") no-repeat center / cover; animation: vis-ani 2s ease-in-out both;}
.sub_visual.bg02 .bg .img{background-image:url("/img/sub/공연.jpg");}
.sub_visual.bg03 .bg .img{background-image:url("/img/sub/전시.jpg");}
.sub_visual.bg04 .bg .img{background-image:url("/img/sub/미디어아트.jpg");}
.sub_visual.bg05 .bg .img{background-image:url("/img/sub/예술지식재산.jpg");}
.sub_visual.bg06 .bg .img{background-image:url("/img/sub/커뮤니티.jpg");}
.sub_visual.bg07 .bg .img{background-image:url("/img/sub/문의하기.jpg");}
.sub_visual.bg08 .bg .img{background-image:url("/img/sub/아티스트.jpg");}
.sub_visual .sub_inner{width: 100%;}
.sub_vis_txt{color:#fff;}
.sub_vis_txt em{font-size: 20px; letter-spacing: -0.5px; font-weight: 600; display: block;}
.sub_vis_txt h2{font-size: 55px; margin-top:15px; letter-spacing: -1px;}

.sub_menu{margin-top: 60px; display: flex; align-items: center; gap: 20px;}
.sub_menu .home{width: 60px; height: 60px; border-radius:50%; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center;}
.sub_menu .home img{width: 25px;}
.sub_menu .arrow{width: 20px; height: 20px; background: url("/img/sub/sub_menu_arrow.svg") no-repeat center / 100%; opacity: 0.5;}
.sub_menu .menu_btn{width: 200px; height: 65px; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
.sub_menu .menu_btn::before{content: ''; display: block; width: 15px; height: 15px; background: url("/img/sub/sub_menu_arrow2.svg") no-repeat center / 100%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: all 0.3s;}
.sub_menu .menu_btn > a{font-size: 20px; letter-spacing: -0.8px; color: #FFF; font-weight: 500; display: flex; align-items: center; width: 100%; height: 100%;}
.sub_menu .menu_btn.on::before{transform: translateY(-50%) rotate(-180deg);}
.sub_menu_txt {display: none; position: absolute; left: 0; top: 65px; width: 100%; background: #fff; z-index:1000; padding: 30px 25px;}
.sub_menu_txt li + li{margin-top: 15px;}
.sub_menu_txt li a{font-size: 16px; color: #6D6D6D; display: block;}
.sub_menu_txt li a:hover{color: #E72116; text-decoration: underline; text-underline-offset: 3px;}
.sub_menu_txt li:last-child{border-bottom:none;}
#sub_content{padding:130px 0;}
#sub_content *{color: #fff;}
.sub_inner{max-width:1600px; margin:0 auto;}
.sub_title{margin-bottom:100px; text-align:center;}
.sub_title h3{font-size: 50px;}
.s_section + .s_section{margin-top: 110px;}
.s_section.has_bg{padding: 110px 0;}
.sub_txt{display: flex; flex-direction: column; gap: 30px;}
.sub_txt.center{align-items: center; text-align: center;}
.sub_txt.board{margin-bottom: 95px; position: relative;}
.sub_txt.board::before{content: 'JK ART COMPANY'; font-size: 120px; letter-spacing: -1px; font-weight: 600; -webkit-text-stroke: 1px #ffffff25; position: absolute; left: 50%; transform:translateX(-50%); bottom: -47px; color: transparent !important; white-space: nowrap; line-height: 0.7; font-family: 'Poppins'; z-index: -1;}
.sub_txt h4{font-size: 35px; letter-spacing: -0.8px; line-height: 1.37;}
.sub_txt p{font-size: 18px; letter-spacing: -0.5px; line-height: 1.55; color: #E7E7E7 !important;}
.sub_txt.board br{display: none;}

/* 소개 */
.int_sec1 .inner{display: flex; justify-content: space-between; align-items: center;}
.int_sec1 .logo{width: 400px;}
.int_sec1 .logo img{width: 100%;}
.int_sec2 .img{margin-bottom: 90px;}
.int_sec3{background: #141A1D; position: relative;}
.int_sec3::before{content: ''; display: block; width: 102px; height: 777px; background: url(/img/sub/int3_txt.svg) no-repeat center / contain; position: absolute; right: 85px; top: 50%; transform:translateY(-50%);}
.int_sec3 .inner{display: flex; align-items: center; gap:150px;}
.int_sec3 .img{width: 600px;}
.int_sec3 .img img{width: 100%;}
.int_sec3 .txt .name{display: flex; align-items: flex-end; gap:15px;}
.int_sec3 .txt .name strong{font-size: 35px; letter-spacing: -0.5px;}
.int_sec3 .txt .name span{font-size: 25px; letter-spacing: -0.5px; font-weight: 500; color: #BEBEBE !important;}
.int_sec3 .txt .list{margin-top: 40px;}
.int_sec3 .txt .list dt{font-size: 20px; letter-spacing: -0.5px; font-weight: 600; line-height: 1.5; padding-left: 18px; margin-bottom: 10px; position: relative;}
.int_sec3 .txt .list dt::before{content: ''; display: block; width: 8px; height: 8px; background: #E72116; border-radius:50%; position: absolute; left: 0; top: 11px;}
.int_sec3 .txt .list dd{font-size: 18px; letter-spacing: -0.5px; line-height: 1.55; color: #E7E7E7 !important;}
.int_sec3 .txt .list dd + dd{margin-top: 5px;}

/* 연혁 */
.history .tabnav{display: flex; justify-content: center;}
.history .tabnav a{font-size: 24px; font-weight: 700; line-height: 1.25; display: inline-block; width: 200px; line-height: 70px; text-align: center;}
.history .tabnav a.on{border-bottom: 2px solid #FFF;}
.history .tabcont{margin-top: 100px;}
.history .tabcont > div{display: flex; align-items: flex-start;}
.history .img{width: 50%; height: calc(100vh - 80px); position: sticky; left: 0; top: 80px;}
.history .img img{height: 100%; object-fit: cover; object-position: left;}
.history .txt{width: 50%;}
.history .txt .item + .item{margin-top: 80px;}
.history .txt .item h4{margin-bottom: 30px; font-size: 50px; letter-spacing: -2px; font-weight: 800;}
.history .txt .item ul li{display: flex;}
.history .txt .item ul li + li{margin-top: 40px;}
.history .txt .item ul li strong{font-size: 20px; letter-spacing: -0.4px; width: 45px; display: block;}
.history .txt .item ul li .cont{width: calc(100% - 45px); font-size: 18px; letter-spacing: -0.4px; line-height: 1.3;}
.history #tab02 .txt .item ul li .cont{width: 100% !important;}
.history .txt .item ul li .cont p + p{margin-top: 10px;}
.history .txt .item ul li .cont p span{font-size: 15px; font-weight: 500; color: #D9D9D9 !important;}

/* 오시는 길 */
.location .map{height: 860px;}
.location .loc_bt{padding: 70px 70px 0; display: flex; justify-content: space-between;}
.location .loc_bt .logo{width: 232px;}
.location .loc_bt .logo img{width: 100%;}
.location .loc_bt .line{width: 1px; height: 90px; background: #FFF;}
.location .loc_bt .txt{display: flex; gap:175px;}
.location .loc_bt .txt .info li{display: flex; gap:40px;}
.location .loc_bt .txt .info li + li{margin-top: 12px;}
.location .loc_bt .txt .info li p{display: flex; gap:20px;}
.location .loc_bt .txt .info li p img{width: 24px;}
.location .loc_bt .txt .info li p strong{font-size: 26px; font-weight: 600; line-height: 1.2;}
.location .loc_bt .txt .info li p span{font-size: 20px; color: #F5F5F5 !important; line-height: 1.2;}
.location .loc_bt .txt .loc_btn{display: flex; gap:10px;}
.location .loc_bt .txt .loc_btn a img{width: 57px;}




@media screen and (max-width:1620px){

	/* 공통 */
	.sub_visual{height: 37.04vw;}
	.sub_vis_txt em{font-size: 1.23vw; letter-spacing: -0.03vw;}
	.sub_vis_txt h2{font-size: 3.40vw; margin-top:0.93vw; letter-spacing: -0.06vw;}

	.sub_menu{margin-top: 3.70vw; gap: 1.23vw;}
	.sub_menu .home{width: 3.70vw; height: 3.70vw;}
	.sub_menu .home img{width: 1.54vw;}
	.sub_menu .arrow{width: 1.23vw; height: 1.23vw;}
	.sub_menu .menu_btn{width: 12.35vw; height: 4.01vw;}
	.sub_menu .menu_btn::before{width: 0.93vw; height: 0.93vw;}
	.sub_menu .menu_btn > a{font-size: 1.23vw; letter-spacing: -0.05vw;}
	.sub_menu_txt {top: 4.01vw; padding: 1.85vw 1.54vw;}
	.sub_menu_txt li + li{margin-top: 0.93vw;}
	.sub_menu_txt li a{font-size: 0.99vw;}
	#sub_content{padding:8.02vw 0;}
	.sub_inner{max-width:100%; padding: 0 2.47vw;}
	.sub_title{margin-bottom:6.17vw;}
	.sub_title h3{font-size: 3.09vw;}
	.s_section + .s_section{margin-top: 6.79vw;}
	.s_section.has_bg{padding: 6.79vw 0;}
	.sub_txt{gap: 1.85vw;}
	.sub_txt.board{margin-bottom: 5.86vw;}
	.sub_txt.board::before{font-size: 7.41vw; letter-spacing: -0.06vw; bottom: -2.90vw;}
	.sub_txt h4{font-size: 2.16vw; letter-spacing: -0.05vw;}
	.sub_txt p{font-size: 1.11vw; letter-spacing: -0.03vw;}

	/* 소개 */
	.int_sec1 .logo{width: 24.69vw;}
	.int_sec2 .img{margin-bottom: 5.56vw;}
	.int_sec3::before{width: 6.30vw; height: 47.96vw; right: 2.47vw;}
	.int_sec3 .inner{gap:6.26vw;}
	.int_sec3 .img{width: 37.04vw;}
	.int_sec3 .txt .name{gap:0.93vw;}
	.int_sec3 .txt .name strong{font-size: 2.16vw; letter-spacing: -0.03vw;}
	.int_sec3 .txt .name span{font-size: 1.54vw; letter-spacing: -0.03vw;}
	.int_sec3 .txt .list{margin-top: 2.47vw;}
	.int_sec3 .txt .list dt{font-size: 1.23vw; letter-spacing: -0.03vw; padding-left: 1.11vw; margin-bottom: 0.62vw;}
	.int_sec3 .txt .list dt::before{width: 0.49vw; height: 0.49vw; top: 0.62vw;}
	.int_sec3 .txt .list dd{font-size: 1.11vw; letter-spacing: -0.03vw;}
	.int_sec3 .txt .list dd + dd{margin-top: 0.31vw;}

	/* 연혁 */
	.history .tabnav a{font-size: 1.48vw; width: 12.35vw; line-height: 4.32vw;}
	.history .tabcont{margin-top: 6.17vw;}
	.history .tabcont > div{justify-content: space-between;}
	.history .img{height: calc(100vh - 4.94vw); top: 4.94vw;}
	.history .txt{width: 45%; padding-right: 2.47vw;}
	.history .txt .item + .item{margin-top: 4.94vw;}
	.history .txt .item h4{margin-bottom: 1.85vw; font-size: 3.09vw; letter-spacing: -0.12vw;}
	.history .txt .item ul li + li{margin-top: 2.47vw;}
	.history .txt .item ul li strong{font-size: 1.23vw; letter-spacing: -0.02vw; width: 2.78vw;}
	.history .txt .item ul li .cont{width: calc(100% - 2.78vw); font-size: 1.11vw; letter-spacing: -0.02vw;}
	.history .txt .item ul li .cont p + p{margin-top: 0.62vw;}
	.history .txt .item ul li .cont p span{font-size: 0.93vw;}

	/* 오시는 길 */
	.location .map{height: 53.09vw;}
	.location .loc_bt{padding: 4.32vw 4.32vw 0;}
	.location .loc_bt .logo{width: 14.32vw;}
	.location .loc_bt .line{height: 5.56vw;}
	.location .loc_bt .txt{gap:10.80vw;}
	.location .loc_bt .txt .info li{gap:2.47vw;}
	.location .loc_bt .txt .info li + li{margin-top: 0.74vw;}
	.location .loc_bt .txt .info li p{gap:1.23vw;}
	.location .loc_bt .txt .info li p img{width: 1.48vw;}
	.location .loc_bt .txt .info li p strong{font-size: 1.60vw;}
	.location .loc_bt .txt .info li p span{font-size: 1.23vw;}
	.location .loc_bt .txt .loc_btn{gap:0.62vw;}
	.location .loc_bt .txt .loc_btn a img{width: 3.52vw;}

}



@media screen and (max-width:1280px){

	/* 공통 */
	.sub_visual{height: 37.03vw;}
	.sub_vis_txt em{font-size: 1.25vw; letter-spacing: -0.00vw;}
	.sub_vis_txt h2{font-size: 3.44vw; margin-top:0.94vw; letter-spacing: -0.08vw;}

	.sub_menu{margin-top: 3.67vw; gap: 1.25vw;}
	.sub_menu .home{width: 3.67vw; height: 3.67vw;}
	.sub_menu .home img{width: 1.56vw;}
	.sub_menu .arrow{width: 1.25vw; height: 1.25vw;}
	.sub_menu .menu_btn{width: 13.34vw; height: 3.98vw;}
	.sub_menu .menu_btn::before{width: 0.94vw; height: 0.94vw;}
	.sub_menu .menu_btn > a{font-size: 1.35vw; letter-spacing: -0.08vw;}
	.sub_menu_txt {top: 3.98vw; padding: 1.88vw 1.56vw;}
	.sub_menu_txt li + li{margin-top: 0.94vw;}
	.sub_menu_txt li a{font-size: 1.22vw;}
	#sub_content{padding:8.05vw 0;}
	.sub_inner{padding: 0 3.13vw;}
	.sub_title{margin-bottom:6.17vw;}
	.sub_title h3{font-size: 3.13vw;}
	.s_section + .s_section{margin-top: 6.80vw;}
	.s_section.has_bg{padding: 6.80vw 0;}
	.sub_txt{gap: 1.88vw;}
	.sub_txt.board{margin-bottom: 5.86vw;}
	.sub_txt.board::before{font-size: 7.42vw; letter-spacing: -0.08vw; bottom: -2.89vw;}
	.sub_txt h4{font-size: 2.29vw; letter-spacing: -0.08vw;}
	.sub_txt p{font-size: 1.29vw; letter-spacing: -0.02vw;}

	/* 소개 */
	.int_sec1 .logo{width: 24.69vw;}
	.int_sec2 .img{margin-bottom: 5.55vw;}
	.int_sec3::before{width: 5.33vw; height: 42.97vw; right: 3.13vw;}
	.int_sec3 .inner{gap:4.25vw;}
	.int_sec3 .img{width: 34.03vw;}
	.int_sec3 .txt .name{gap:0.94vw;}
	.int_sec3 .txt .name strong{font-size: 2.29vw; letter-spacing: -0.00vw;}
	.int_sec3 .txt .name span{font-size: 1.56vw; letter-spacing: -0.00vw;}
	.int_sec3 .txt .list{margin-top: 2.50vw;}
	.int_sec3 .txt .list dt{font-size: 1.35vw; letter-spacing: -0.00vw; padding-left: 1.09vw; margin-bottom: 0.63vw;}
	.int_sec3 .txt .list dt::before{width: 0.47vw; height: 0.47vw; top: 0.68vw;}
	.int_sec3 .txt .list dd{font-size: 1.29vw; letter-spacing: -0.00vw;}
	.int_sec3 .txt .list dd + dd{margin-top: 0.31vw;}

	/* 연혁 */
	.history .tabnav a{font-size: 1.48vw; width: 12.34vw; line-height: 4.30vw;}
	.history .tabcont{margin-top: 6.17vw;}
	.history .img{height: calc(100vh - 5.42vw); top: 5.42vw;}
	.history .txt{width: 44%; padding-right: 2.50vw;}
	.history .txt .item + .item{margin-top: 4.92vw;}
	.history .txt .item h4{margin-bottom: 1.88vw; font-size: 3.13vw; letter-spacing: -0.16vw;}
	.history .txt .item ul li + li{margin-top: 2.50vw;}
	.history .txt .item ul li strong{font-size: 1.38vw; letter-spacing: -0.02vw; width: 2.81vw;}
	.history .txt .item ul li .cont{width: calc(100% - 2.81vw); font-size: 1.31vw; letter-spacing: -0.00vw;}
	.history .txt .item ul li .cont p + p{margin-top: 0.63vw;}
	.history .txt .item ul li .cont p span{font-size: 1.14vw;}

	/* 오시는 길 */
	.location .map{height: 53.13vw;}
	.location .loc_bt{padding: 4.30vw 4.30vw 0;}
	.location .loc_bt .logo{width: 14.30vw;}
	.location .loc_bt .line{height: 5.55vw;}
	.location .loc_bt .txt{gap:10.78vw;}
	.location .loc_bt .txt .info li{gap:2.50vw;}
	.location .loc_bt .txt .info li + li{margin-top: 0.70vw;}
	.location .loc_bt .txt .info li p{gap:1.25vw;}
	.location .loc_bt .txt .info li p img{width: 1.48vw;}
	.location .loc_bt .txt .info li p strong{font-size: 1.56vw;}
	.location .loc_bt .txt .info li p span{font-size: 1.25vw;}
	.location .loc_bt .txt .loc_btn{gap:0.63vw;}
	.location .loc_bt .txt .loc_btn a img{width: 3.52vw;}

}



@media screen and (max-width:768px){

	/* 공통 */
	.sub_visual{height: 104.17vw;}
	.sub_visual .bg .img{background-image: url(/img/sub/sub_visual_m.jpg);}
    .sub_visual.bg02 .bg .img{background-image:url("/img/sub/m_공연.jpg");}
    .sub_visual.bg03 .bg .img{background-image:url("/img/sub/m_전시.jpg");}
	.sub_visual.bg04 .bg .img{background-image:url("/img/sub/m_미디어아트.jpg");}
	.sub_visual.bg05 .bg .img{background-image:url("/img/sub/m_예술지식재산.jpg");}
	.sub_visual.bg06 .bg .img{background-image:url("/img/sub/m_커뮤니티.jpg");}
	.sub_visual.bg07 .bg .img{background-image:url("/img/sub/m_문의하기.jpg");}
	.sub_visual.bg08 .bg .img{background-image:url("/img/sub/m_아티스트.jpg");}
	.sub_vis_txt em{font-size: 3.65vw; letter-spacing: -0.07vw;}
	.sub_vis_txt h2{font-size: 8.33vw; margin-top: 2.60vw; letter-spacing: -0.13vw;}

	.sub_menu{margin-top: 11.72vw; gap: 3.7vw;}
	.sub_menu .home{width: auto; height: auto; background: none; backdrop-filter: none;}
	.sub_menu .home img{width: 3.91vw;}
	.sub_menu .arrow{width: 0.26vw; height: 2.60vw; background: #ffffff60;}
	.sub_menu .menu_btn{width: 35.16vw; height: 11.72vw;}
	.sub_menu .menu_btn::before{width: 3.26vw; height: 3.26vw;}
	.sub_menu .menu_btn > a{font-size: 3.65vw; letter-spacing: -0.10vw;}
	.sub_menu_txt {top: 11.72vw; padding: 4.95vw 3.91vw;}
	.sub_menu_txt li + li{margin-top: 2.60vw;}
	.sub_menu_txt li a{font-size: 3.26vw;}
	#sub_content{padding: 18.23vw 0;}
	.sub_inner{padding: 0 5.21vw;}
	.sub_title{margin-bottom: 15.63vw;}
	.sub_title h3{font-size: 7.81vw;}
	.s_section + .s_section{margin-top: 18.23vw;}
	.s_section.has_bg{padding: 18.23vw 0;}
	.sub_txt{gap: 5.21vw;}
	.sub_txt.board{margin-bottom: 18.23vw;}
	.sub_txt.board::before{display: none;}
	.sub_txt.board br{display: block;}
	.sub_txt h4{font-size: 6.51vw; letter-spacing: -0.10vw;}
	.sub_txt p{font-size: 3.65vw; letter-spacing: -0.07vw;}

	/* 소개 */
	.int_sec1 .logo{display: none;}
	.int_sec2 .img{margin-bottom: 15.63vw;}
	.int_sec3::before{display: none;}
	.int_sec3 .inner{gap:13.02vw; flex-direction: column; align-items: flex-start;}
	.int_sec3 .img{width: 100%;}
	.int_sec3 .txt .name{gap:1.95vw;}
	.int_sec3 .txt .name strong{font-size: 6.51vw; letter-spacing: -0.07vw;}
	.int_sec3 .txt .name span{font-size: 4.69vw; letter-spacing: -0.07vw;}
	.int_sec3 .txt .list{margin-top: 6.51vw;}
	.int_sec3 .txt .list dt{font-size: 4.17vw; letter-spacing: -0.07vw; padding-left: 3.65vw; margin-bottom: 2.60vw;}
	.int_sec3 .txt .list dt::before{width: 1.56vw; height: 1.56vw; top: 2vw;}
	.int_sec3 .txt .list dd{font-size: 3.65vw; letter-spacing: -0.07vw;}
	.int_sec3 .txt .list dd + dd{margin-top: 1.30vw;}

	/* 연혁 */
	.history .tabnav a{font-size: 4.17vw; width: 36.04vw; line-height: 11.11vw;}
	.history .tabcont{margin-top: 13.02vw;}
	.history .tabcont > div{gap:12.37vw; flex-direction: column;}
	.history .img{width: 100%; height: auto; position: initial;}
	.history .txt{width: 100%; padding: 0 5.21vw;}
	.history .txt .item + .item{margin-top: 15.42vw;}
	.history .txt .item h4{margin-bottom: 4.17vw; font-size: 7.81vw; letter-spacing: -0.26vw;}
	.history .txt .item ul li + li{margin-top: 6.51vw;}
	.history .txt .item ul li strong{font-size: 3.91vw; letter-spacing: -0.05vw; width: 8.86vw;}
	.history .txt .item ul li .cont{width: calc(100% - 8.86vw); font-size: 3.65vw; letter-spacing: -0.05vw;}
	.history .txt .item ul li .cont p + p{margin-top: 2.60vw;}
	.history .txt .item ul li .cont p span{font-size: 3.26vw;}

	/* 오시는 길 */
	.location .map{height: 100.98vw;}
	.location .loc_bt{padding: 11.11vw 0 0; flex-direction: column; gap:9.11vw;}
	.location .loc_bt .logo{width: 30.21vw;}
	.location .loc_bt .line{height: 1px; width: 100%; opacity: 0.5;}
	.location .loc_bt .txt{gap:7.79vw; flex-direction: column; position: relative;}
	.location .loc_bt .txt .info li{gap:3.13vw; flex-direction: column;}
	.location .loc_bt .txt .info li + li{margin-top: 3.13vw;}
	.location .loc_bt .txt .info li p{gap:2.60vw; align-items: flex-start;}
	.location .loc_bt .txt .info li p img{width: 4.13vw; margin-top: 0.7vw;}
	.location .loc_bt .txt .info li p strong{font-size: 4.17vw; line-height: 1.4;}
	.location .loc_bt .txt .info li p span{font-size: 3.65vw; line-height: 1.4;}
	.location .loc_bt .txt .loc_btn{gap:2.60vw; position: absolute; right: 0; top: -28.24vw;}
	.location .loc_bt .txt .loc_btn a img{width: 10.42vw;}

}