@charset "utf-8";

:root {
	--header-pc-height: 120px;
	--footer-pc-height: 200px;
	--header-mobile-height: 80px;
	--footer-mobile-height: 100px;
}

#wrap {position: relative; overflow: hidden; width: 100%; min-width: 360px; min-height: 100vh; padding: var(--header-pc-height) 0 var(--footer-pc-height); background: #ffffff;}
#wrap.ov_v {overflow: visible;}

@media screen and (max-width: 768px) {
	#wrap {padding-top: var(--header-mobile-height); padding-bottom: 0;}
}

#header {position: fixed; right: 0; top: 0; left: 0; z-index: 101; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /*mix-blend-mode: difference;*/ background: rgba(255, 255, 255, 0.8);}
#header .inner {position: relative; max-width: 1638px; height: var(--header-pc-height); margin: 0 auto;}
#header .logo {position: absolute; top: 49px; left: 20px;}
#header .logo a {display: block;}
#header .btn_gnb {display: none; position: absolute; top: 31px; right: 20px; z-index: 1; width: 27px; height: 17px;}
#header .btn_gnb:before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #000000; transition: all 300ms;}
#header .btn_gnb span {display: block; text-indent: -9999em; position: absolute; top: 7px; left: 0; width: 100%; height: 3px; background: #000000; transition: all 300ms;}
#header .btn_gnb:after {display: block; content: ''; position: absolute; top: 14px; left: 0; width: 100%; height: 3px; background: #000000; transition: all 300ms;}
#header .menu {position: absolute; top: 30px; right: 40px;}
#header .menu .gnb {float: left;}
#header .menu .gnb > li {float: left; position: relative;}
#header .menu .gnb > li:not(:first-child) {margin-left: 66px;}
#header .menu .gnb > li > a {display: block; font-size: 15px; line-height: 60px; color: #000000;}
#header .menu .gnb > li > a:hover,
#header .menu .gnb > li > a:focus {text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);}
#header .menu .gnb > li > ul {position: absolute; top: -9999px; left: 50%; transform: translateX(-50%) translateY(15px); padding: 0 8px; border: 1px solid #1a1f40; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.07); background: #ffffff; opacity: 0; transition: transform 300ms, opacity 300ms;}
#header .menu .gnb > li:hover > ul {top: 60px; transform: translateX(-50%) translateY(0); opacity: 1;}
#header .menu .gnb > li > ul > li {}
#header .menu .gnb > li > ul > li:not(:first-child) {border-top: 2px solid #e0e3e5;}
#header .menu .gnb > li > ul > li > a {display: block; width: calc(100% + 14px); margin: 0 -7px; padding: 15px; text-align: center; font-size: 14px; color: #1a1f40; white-space: nowrap;}
#header .menu .gnb > li > ul > li > a:hover {background: #f7f7f7;}

@media screen and (max-width: 768px) {
	#header .inner {height: var(--header-mobile-height);}
	#header .logo {top: 30px;}
	#header .btn_gnb {display: block;}
	#header .menu {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; top: -9999px; right: -9999px; width: 100vw; height: 100vh; opacity: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: rgba(249, 249, 249, 0.7); transition: opacity 300ms;}
	#header .menu .gnb {float: none; width: 100%;}
	#header .menu .gnb > li {float: none;}
	#header .menu .gnb > li:not(:first-child) {margin-top: 30px; margin-left: 0;}
	#header .menu .gnb > li > a {font-size: 24px; line-height: 2;}
	#header .menu .gnb > li > ul {margin-top: 5px; position: relative; top: 0; left: 0; transform: none; opacity: 1; border: none; background: none; box-shadow: none;}
	#header .menu .gnb > li:hover > ul {top: 0; transform: none;}
	#header .menu .gnb > li > ul > li:not(:first-child ) {border-top: none;}
	#header .menu .gnb > li > ul > li > a {width: 100%; margin: 0; padding: 5px 0; color: #666666;}
	#header .menu .gnb > li > ul > li > a:hover {background: none;}

	html.open_gnb {}
	html.open_gnb #header {background: none; backdrop-filter: none;}
	html.open_gnb #header .inner {height: 100vh;}
	html.open_gnb #header .menu {top: 0; right: 0; opacity: 1;}
	html.open_gnb #header .btn_gnb:before {top: 7px; background: #514444; transform: rotate(45deg);}
	html.open_gnb #header .btn_gnb span {opacity: 0;}
	html.open_gnb #header .btn_gnb:after {top: 7px; background: #514444; transform: rotate(-45deg);}
}

#footer {position: absolute; right: 0; bottom: 0; left: 0; z-index: 100; background: #1a1f40;}
#footer .inner {overflow: hidden; max-width: 1404px; padding: 59px 20px 0; height: var(--footer-pc-height); margin: 0 auto; color: #ffffff;}
#footer .right {float: right;}
#footer .right .ft_left {float: left;}
#footer .right .ft_left .company {font-size: 14px; line-height: 22px; margin-bottom: 22px;}
#footer .right .ft_left .address {font-size: 12px; line-height: 22px;}
#footer .right .ft_right {float: left; margin-left: 25px;}
#footer .right .ft_right .ft_menu {font-weight: 500; font-size: 14px; margin-bottom: 49px;}
#footer .right .ft_right .copyright {font-size: 12px;}

@media screen and (max-width: 768px) {
	#footer {position: relative;}
	#footer .inner {height: auto; padding: 30px 20px;}
	#footer .right {float: none;}
	#footer .right .ft_left {float: none;}
	#footer .right .ft_left .company {margin-bottom: 12px;}
	#footer .right .ft_right {float: none; margin-top: 20px; margin-left: 0;}
	#footer .right .ft_right .ft_menu {margin-bottom: 12px;}
}

#container {}

#auth_container {display: flex; justify-content: center; align-items: center; min-height: calc(100vh - var(--header-pc-height) - var(--footer-pc-height));}

#contents {max-width: 940px; margin: 0 auto;}

/* 비밀번호 재설정 : /auth/reset_password */
.reset_password_area {max-width: 350px; width: 350px; padding: 50px 0;}
.reset_password_area .head {text-align: center;}
.reset_password_area .head h2 {font-weight: 700; font-size: 30px;}
.reset_password_area .head p {font-size: 16px; margin-top: 60px;}

/* 회원가입 약관 동의 : /auth/popup_join_agree */
.join_agree {margin-top: 60px;}
.join_agree dt {margin-bottom: 10px; font-weight: 700; font-size: 16px;}
.join_agree dd {position: relative;}
.join_agree dd .checkbox {margin-left: -10px;}
.join_agree dd .term_scroll {display: none; overflow-y: scroll; height: 160px; border: 1px solid #f3f3f3;}
.join_agree dd .term_wrap {padding: 10px;}
.join_agree dd button {position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 10px;}
.join_agree dd button .material-icons {font-size: 20px; color: #707070;}
.join_agree dd.term_open .term_scroll {display: block;}
.join_agree dd.term_open button .material-icons {transform: rotate(180deg);}

#main {}
#main .btn_more {display: inline-block; border-radius: 15px; padding: 0 13px; line-height: 30px; background: #1a1f40; font-weight: 700; font-size: 15px; color: #ffffff;}

#main .main_section_1 {position: relative; max-width: 1364px; margin: 0 auto; text-align: center;}
#main .main_section_1 .inner {margin: 0 -278px;}
#main .main_section_1 .inner .swiper-slide {height: 0; padding-top: 39.0625%;}
#main .main_section_1 .inner .swiper-slide img {position: absolute; top: 0; left: 0; width: 100%;}
#main .main_section_1 .swiper-wrapper img {width: 100%;}
#main .main_section_1 .swiper-button-prev {left: 50%; margin-left: -48vw; color: #000000;}
#main .main_section_1 .swiper-button-next {right: 50%; margin-right: -48vw; color: #000000;}

@media screen and (max-width: 1364px) {
	#main .main_section_1 .inner {margin: 0 -14.479166%;}
}

@media screen and (max-width: 768px) {
	#main .head h2 {font-size: 24px !important; line-height: 1.5 !important;}
	#main .btn_more {font-size: 12px; line-height: 24px; border-radius: 12px; padding: 0 8px;}
}

#main .main_section_2 {padding: 150px 0 200px;}
#main .main_section_2 .inner {position: relative; max-width: 1128px; margin: 0 auto; padding: 0 20px;}
#main .main_section_2 .head {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 25px;}
#main .main_section_2 .head h2 {font-weight: 900; font-size: 42px; line-height: 57px; color: #1a1f40;}
#main .main_section_2 .body {}
#main .main_section_2 .body ul {display: flex; justify-content: space-between;}
#main .main_section_2 .body ul li {width: 31.25%;}
#main .main_section_2 .body ul li a {display: block; overflow: hidden; position: relative; padding: 20px; border: 1px solid #1a1f40;}
#main .main_section_2 .body ul li a:after {display: block; content: ''; position: absolute; top: -100%; left: -70%; width: 50px; height: 300%; transform: rotate(30deg); background: rgba(255, 255, 255, 0.4);}
#main .main_section_2 .body ul li a:hover:after {left: 120%; transition: left 300ms, top 300ms;}
#main .main_section_2 .body ul li .img {position: relative; padding-top: 100%;}
#main .main_section_2 .body ul li .img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main .main_section_2 .body ul li .tit {margin-top: 20px; height: 56px; font-weight: 700; font-size: 18px; line-height: 28px; color: #1a1f40; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#main .main_section_2 .body ul li .txt {margin-top: 10px; height: 108px; border-top: 2px solid #8c8f9f; padding-top: 10px; font-size: 15px; line-height: 24px; color: #1a1f40; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}
#main .main_section_2 .body ul li .date {margin-top: 20px; font-size: 15px; color: #1a1f40;}

@media screen and (max-width: 768px) {
	#main .main_section_2 {padding: 10vw 0 15vw;}
	#main .main_section_2 .body ul {flex-wrap: wrap;}
	#main .main_section_2 .body ul li {width: 100%;}
	#main .main_section_2 .body ul li:not(:first-child) {margin-top: 10px;}
	#main .main_section_2 .body ul li .tit {height: auto;}
	#main .main_section_2 .body ul li .txt {height: auto;}
}

#main .main_section_3 {padding: 150px 0 200px; background: #1a1f40;}
#main .main_section_3 .inner {position: relative; max-width: 1168px; margin: 0 auto; padding: 0 40px;}
#main .main_section_3 .head {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px;}
#main .main_section_3 .head h2 {font-weight: 900; font-size: 42px; line-height: 57px; color: #efc245;}
#main .main_section_3 .body {}
#main .main_section_3 .body .viewport {position: relative; width: 100%; height: 0; padding-top: 45.955882%;}
#main .main_section_3 .body .viewport img {width: 100%;}
#main .main_section_3 .body .viewport iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main .main_section_3 .body .viewport .loading-spinner-outer {position: absolute; background: rgba(255, 255, 255, 0.5);}
#main .main_section_3 .body .viewport .tit {position: absolute; bottom: 30px; left: 0; width: 100%; padding: 0 30px; z-index: 1; font-weight: 700; font-size: 18px; color: #ffffff; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis;}
/*#main .main_section_3 .body .viewport:after {display: block; content: ''; position: absolute; right: 0 ;bottom: 0; left: 0; height: 200px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}*/

#main .main_section_3 .body .swiper-container-outer {position: relative; margin: 20px -40px 0; padding: 0 40px;}
#main .main_section_3 .body .swiper-slide button {overflow: hidden; display: block; position: relative; width: 100%;}
#main .main_section_3 .body .swiper-slide button:after {display: block; content: ''; position: absolute; top: -50%; left: -100%; width: 100px; height: 200%; transform: rotate(30deg); background: rgba(255, 255, 255, 0.3);}
#main .main_section_3 .body .swiper-slide button:hover:after {left: 150%; transition: left 300ms;}
#main .main_section_3 .body .swiper-slide img {width: 100%;}
#main .main_section_3 .body .swiper-button-next {right: 0; color: #ffc011;}
#main .main_section_3 .body .swiper-button-prev {left: 0; color: #ffc011;}

@media screen and (max-width: 768px) {
	#main .main_section_3 {padding: 10vw 0 15vw;}
	#main .main_section_3 .inner {padding: 0 20px;}
	#main .main_section_3 .body .swiper-container-outer {margin: 20px 0 0; padding: 0;}
}

#main .main_section_4 {padding: 150px 0 200px; background: #efc245;}
#main .main_section_4 .inner {position: relative; max-width: 1404px; margin: 0 auto; padding: 0 20px;}
#main .main_section_4 .head {margin-bottom: 56px;}
#main .main_section_4 .head h2 {font-weight: 900; font-size: 42px; line-height: 57px; color: #1a1f40;}

#main .main_section_4 .body {display: inline-block; width: 100%;}
#main .main_section_4 .body .body_head {display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px;}
#main .main_section_4 .body .body_head h3 {font-weight: 900; font-size: 30px; line-height: 41px; color: #1a1f40;}
#main .main_section_4 .body .naver {width: calc(100% - 552px); float: left;}
#main .main_section_4 .body .naver ul {}
#main .main_section_4 .body .naver ul li {}
#main .main_section_4 .body .naver ul li:not(:first-child) {margin-top: 10px;}
#main .main_section_4 .body .naver ul li a {display: block; overflow: hidden; position: relative; padding: 8px 8px 7px; border: 1px solid #1a1f40; background: #ffffff;}
#main .main_section_4 .body .naver ul li a .img {overflow: hidden; position: relative; float: left;}
#main .main_section_4 .body .naver ul li a .img:after {display: block; content: ''; position: absolute; top: -50%; left: -100%; width: 100px; height: 200%; transform: rotate(30deg); background: rgba(255, 255, 255, 0.3);}
#main .main_section_4 .body .naver ul li a:hover .img:after {left: 150%; transition: left 300ms;}
#main .main_section_4 .body .naver ul li a .img img {width: 148px; height: 148px;}
#main .main_section_4 .body .naver ul li a .desc {float: right; width: calc(100% - 178px); padding-top: 20px; overflow: hidden;}
#main .main_section_4 .body .naver ul li a .desc .tit {margin-bottom: 18px; font-weight: 700; font-size: 20px; color: #000000; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis;}
#main .main_section_4 .body .naver ul li a .desc .txt {font-size: 16px; color: #8e929a; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#main .main_section_4 .body .insta {width: 515px; float: right;}
#main .main_section_4 .body .insta ul {margin: 0 -10px -10px 0;}
#main .main_section_4 .body .insta ul:after {display: block; content: ''; clear: both;}
#main .main_section_4 .body .insta ul li {float: left; width: calc(33.333333% - 10px); margin: 0 10px 10px 0;}
#main .main_section_4 .body .insta ul li a {display: block; overflow: hidden; position: relative; width: 100%; padding-top: calc(100% - 2px); border: 1px solid #1a1f40;}
#main .main_section_4 .body .insta ul li a:after {display: block; content: ''; position: absolute; top: -50%; left: -100%; width: 100px; height: 200%; transform: rotate(30deg); background: rgba(255, 255, 255, 0.3);}
#main .main_section_4 .body .insta ul li a:hover:after {left: 150%; transition: left 300ms;}
#main .main_section_4 .body .insta ul li a img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 1124px) {
	#main .main_section_4 {padding: 10vw 0 15vw;}
	#main .main_section_4 .body .body_head h3 {font-size: 18px; line-height: 1.5;}
	#main .main_section_4 .body .naver {width: 48.220973%;}
	#main .main_section_4 .body .naver ul li a .img {position: relative; width: calc(33.333333% - 18px); padding-top: calc(33.333333% - 18px);}
	#main .main_section_4 .body .naver ul li a .img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	#main .main_section_4 .body .naver ul li a .desc {width: 64%; padding-top: 12px;}
	#main .main_section_4 .body .naver ul li a .desc .tit {margin-bottom: 12px; font-size: 16px;}
	#main .main_section_4 .body .naver ul li a .desc .txt {font-size: 14px;}
	#main .main_section_4 .body .insta {width: 48.220973%;}
}

@media screen and (max-width: 768px) {
	#main .main_section_4 {padding: 80px 0 120px;}
	#main .main_section_4 .body .naver {width: 100%; margin-bottom: 56px;}
	#main .main_section_4 .body .insta {width: 100%;}
}

#main .main_section_5 {background: #282246;}
#main .main_section_5 .inner {max-width: 1404px; margin: 0 auto;}
#main .main_section_5 .inner .visual {margin: 0 -8%;}
#main .main_section_5 .inner .visual a {display: block;}
#main .main_section_5 .inner .visual img {width: 100%;}

.company_wrap {position: relative;}
.company_wrap:before {display: block; content: ''; position: absolute; top: 0; left: 50%; bottom: 0; width: 100%; transform: translateX(-363px); background: #1a1f40;}
.company_wrap:after {}
.company_wrap .inner {position: relative; max-width: 1638px; margin: 0 auto;}
.company_wrap .inner:after {display: block; content: ''; clear: both;}
.company_wrap .visual {position: absolute; top: 60px; right: 1064px; width: 574px; height: 772px; opacity: 1; transform: translate(0);}
.company_wrap .visual:before {display: block; content: ''; position: absolute; top: 0; left: 102px; z-index: 1; width: 2px; height: 0; background: #efc245; opacity: 0.7; transition: height 300ms 900ms ease-in-out;}
.company_wrap .visual:after {display: block; content: ''; position: absolute; top: 840px; left: -12px; z-index: 1; width: 12px; height: 126px; background: #efc245;}
.company_wrap .visual._loaded:before {height: 616px;}
.company_wrap .visual .img1 {position: absolute; top: 0; left: 0;}
.company_wrap .visual .img2 {position: absolute; top: 441px; left: 118px;}
.company_wrap .visual .img3 {position: absolute; top: 441px; left: 354px;}
.company_wrap .contents {position: relative; float: right; width: 974px; min-height: calc(100vh - var(--header-pc-height) - var(--footer-pc-height)); padding: 215px 40px 40px; color: #ffffff;}
.company_wrap .contents .company {margin-bottom: 150px; font-weight: 700; font-size: 15px;}
.company_wrap .contents .tit {margin-bottom: 65px; font-size: 24px; line-height: 38px;}
.company_wrap .contents .tit strong {font-weight: 700;}
.company_wrap .contents .txt {margin-bottom: 150px; font-size: 16px; line-height: 30px;}
.company_wrap .contents .foot {display: flex; float: right; align-items: center;}
.company_wrap .contents .foot .address {margin-left: 30px; font-size: 13px; color: #8d9195; white-space: nowrap;}

@media screen and (max-width: 1638px) {
	.company_wrap:before {width: 1182px; left: auto; right: 0; transform: none;}
}

@media screen and (max-width: 1024px) {
	.company_wrap .visual {position: relative; top: auto; right: auto; margin: 0 auto; width: 56.054687%; padding-top: 75.390625%; height: 0;}
	.company_wrap .visual .img1 {width: 100%;}
	.company_wrap .visual .img2 {top: 57.124352%; left: 20.557491%; width: 38.327526%;}
	.company_wrap .visual .img3 {top: 57.124352%; left: 61.672473%; width: 38.327526%;}
	.company_wrap .visual._loaded:before {left: 17.770034%; height: 79.792746%;}
	.company_wrap .visual:after {display: none;}
	.company_wrap .contents {float: none; width: 100%; padding: 50px 40px 100px;}
	.company_wrap .contents .company {margin-bottom: 20px; transition-delay: 0ms;}
	.company_wrap .contents .tit {margin-bottom: 20px; transition-delay: 0ms;}
	.company_wrap .contents .txt {margin-bottom: 60px; transition-delay: 0ms;}
	.company_wrap .contents .foot {float: none;}
}

@media screen and (max-width: 768px) {
	.company_wrap .contents {padding: 50px 20px 100px;}
	.company_wrap .contents .tit {font-size: 18px; line-height: 1.8;}
	.company_wrap .contents .txt {font-size: 14px; line-height: 1.8;}
	.company_wrap .contents .txt br {display: none;}
	.company_wrap .contents .foot {display: block;}
	.company_wrap .contents .foot .address {margin-left: 0; margin-top: 20px;}
}

.artist_main_wrap {position: relative; padding: 100px 0 205px;}
.artist_main_wrap:before {display: block; content: ''; position: absolute; top: 580px; right: 0; bottom: 0; left: 0; background: #1a1f40;}
.artist_main_wrap .artist_main_list {position: relative; max-width: 1328px; margin: 0 auto; padding: 0 20px;}
.artist_main_wrap .artist_main_list .head {margin-bottom: 173px; padding-left: 32.298136%;}
.artist_main_wrap .artist_main_list .head h2 {font-weight: 700; font-size: 15px; color: #30475e;}
.artist_main_wrap .artist_main_list ul {display: flex; flex-wrap: wrap; margin-bottom: -12.42236%;}
.artist_main_wrap .artist_main_list ul li {width: 31.0559%; margin: 0 3.41615% 12.42236% 0;}
.artist_main_wrap .artist_main_list ul li:nth-child(3n) {margin-right: 0;}
.artist_main_wrap .artist_main_list ul li a {display: block; position: relative; width: 100%;}
.artist_main_wrap .artist_main_list ul li a:before {display: block; content: ''; right: 0; bottom: 0; left: 0; width: 100%; padding-top: 112.5%; border-radius: 80px 0 0 0; background: #f6f8f9;}
.artist_main_wrap .artist_main_list ul li a .visual {position: absolute; bottom: -1px; left: 0; width: 100%;}
.artist_main_wrap .artist_main_list ul li a .visual img {width: 100%; transform: scale(0.9); filter: grayscale(100%); transition: all 300ms ease-in-out; transform-origin: center bottom;}
.artist_main_wrap .artist_main_list ul li a:hover .visual img {transform: scale(1); filter: grayscale(0);}
.artist_main_wrap .artist_main_list ul li a .desc {overflow: hidden; position: absolute; right: 0; bottom: 0; left: 0; width: 0; transition: width 300ms ease-in-out;}
.artist_main_wrap .artist_main_list ul li a:hover .desc {width: 100%;}
.artist_main_wrap .artist_main_list ul li a .desc .inner {position: relative; padding: 24px 30px; backdrop-filter: blur(17px); background: rgba(0, 0, 0, 0.3); color: #ffffff; border-bottom: 10px solid #efc245; white-space: nowrap;}
.artist_main_wrap .artist_main_list ul li a .desc .inner .kor {font-size: 22px;}
.artist_main_wrap .artist_main_list ul li a .desc .inner .eng {font-weight: 900; font-size: 36px; line-height: 1.2;}
.artist_main_wrap .artist_main_list .obj1 {position: absolute; top: 92px; right: -44px; width: 118px; height: 118px; border-radius: 50%; border: 1px solid #efc245;}
.artist_main_wrap .artist_main_list .obj2 {position: absolute; top: 622px; left: -59px; width: 24px; height: 24px; border-radius: 50%; background: #efc245;}
.artist_main_wrap .artist_main_list .obj3 {position: absolute; top: 694px; right: 74px; width: 61px; height: 61px; border-radius: 50%; background: #efc245;}

@media screen and (max-width: 1328px) {
	.artist_main_wrap:before {top: 43.674698vw;}
	.artist_main_wrap .artist_main_list .head {margin-bottom: 13.431677vw;}
	.artist_main_wrap .artist_main_list ul li a .desc .inner {padding: 12px;}
	.artist_main_wrap .artist_main_list ul li a .desc .inner .kor {font-size: 2.1vw;}
	.artist_main_wrap .artist_main_list ul li a .desc .inner .eng {font-size: 2.7vw;}
}

@media screen and (max-width: 768px) {
	.artist_main_wrap:before {top: calc(100px + 43.674698vw);}
	.artist_main_wrap .artist_main_list .head {margin-bottom: 12vw; padding: 0 30px;}
	.artist_main_wrap .artist_main_list ul li {width: 48%; margin-right: 4%; margin-bottom: 15%;}
	.artist_main_wrap .artist_main_list ul li:nth-child(3n) {margin-right: 4%;}
	.artist_main_wrap .artist_main_list ul li:nth-child(2n) {margin-right: 0;}
	.artist_main_wrap .artist_main_list ul li a .desc .inner .kor {font-size: 3.1vw;}
	.artist_main_wrap .artist_main_list ul li a .desc .inner .eng {font-size: 3.5vw;}
}

.artist_detail_wrap {max-width: 1470px; margin: 0 auto; padding: 0 20px;}
.artist_detail_wrap .artist_detail_head {position: sticky; top: 120px; padding-left: 136px; margin-bottom: 40px; font-weight: 700; font-size: 22px; color: #1a1f40;}
.artist_detail_wrap.archive .artist_detail_head {position: static;}
.artist_detail_wrap .artist_detail_body {display: inline-block; width: 100%;}
.artist_detail_wrap .artist_detail_body .artist_side_nav {float: left; width: 136px; position: sticky; top: 200px;}
.artist_detail_wrap .artist_detail_body .artist_side_nav a {display: block; position: relative; font-size: 15px; line-height: 38px; color: #30475e;}
.artist_detail_wrap .artist_detail_body .artist_side_nav a.on {font-weight: 700; color: #efc245;}
.artist_detail_wrap .artist_detail_body .artist_side_nav a.on:before {display: block; content: ''; position: absolute; top: 50%; margin-top: -1px; right: calc(100% + 16px); width: 50vw; height: 2px; background: #f7e0a2;}
.artist_detail_wrap .artist_detail_body .artist_profile {float: left; width: calc(100% - 136px);}
.artist_detail_wrap .artist_detail_body .artist_archive {float: left; width: calc(100% - 136px);}

.artist_profile {display: inline-block; position: relative; width: 100%; padding-bottom: 150px;}
.artist_profile .visual {float: left; position: sticky; top: 200px; width: 45.363214%; background: #ffffff;}
.artist_profile .visual img {width: 100%;}
.artist_profile .history {position: relative; z-index: 1; float: right; width: 45.363214%; margin-top: -50px;}
.artist_profile .history section {display: inline-block; position: relative; width: 100%; padding: 50px 0;}
.artist_profile .history section h3 {position: sticky; top: 120px; float: left; width: 118px; font-weight: 700; font-size: 22px; color: #1a1f40;}
.artist_profile .history section ol {float: left; width: calc(100% - 118px); overflow: hidden;}
.artist_profile .history section ol li {font-size: 15px; color: #30475e;}
.artist_profile .history section ol li:not(:first-child) {margin-top: 5px;}
.artist_profile .history section:not(:first-child) {border-top: 2px solid #f4f4f5;}

.artist_profile .obj1 {position: absolute; top: 500px; right: 5%; width: 118px; height: 118px; border-radius: 50%; border: 1px solid #efc245; transform: scale(0);}
.artist_profile .obj1._loaded {transform: scale(1);}
.artist_profile .obj2 {position: absolute; top: 1500px; left: -5%; width: 24px; height: 24px; border-radius: 50%; background: #efc245; transform: scale(0);}
.artist_profile .obj2._loaded {transform: scale(1);}
.artist_profile .obj3 {position: absolute; top: 2500px; right: 10%; width: 61px; height: 61px; border-radius: 50%; background: #efc245; transform: scale(0);}
.artist_profile .obj3._loaded {transform: scale(1);}

.artist_archive {padding-bottom: 100px;}
.artist_archive ul {display: flex; flex-wrap: wrap;}
.artist_archive ul li {position: relative; width: 31.25%; height: 0; padding-top: 26.5625%; margin-right: 3.125%; margin-bottom: 3.125%;}
.artist_archive ul li:nth-child(3n) {margin-right: 0;}
.artist_archive ul li button {display: block; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.artist_archive ul li button:after {display: block; content: ''; position: absolute; top: -50%; left: -100%; width: 100px; height: 200%; transform: rotate(30deg); background: rgba(255, 255, 255, 0.3);}
.artist_archive ul li button:hover:after {left: 150%; transition: left 300ms;}
.artist_archive ul li button img {max-width: 100%; max-height: 100%;}

@media screen and (max-width: 1024px) {
	.artist_detail_wrap .artist_detail_head {position: static; top: 0; margin-bottom: 20px; padding-left: 116px;}
	.artist_detail_wrap .artist_detail_body .artist_side_nav {top: 120px; width: 116px;}
	.artist_detail_wrap .artist_detail_body .artist_side_nav a.on:before {display: none;}
	.artist_detail_wrap .artist_detail_body .artist_profile {width: calc(100% - 116px);}
	.artist_detail_wrap .artist_detail_body .artist_archive {width: calc(100% - 116px);}

	.artist_profile .visual {float: none; width: 100%; position: static; top: 0; width: 100%; margin-bottom: 100px;}
	.artist_profile .visual img {}
	.artist_profile .history {float: none; width: 100%;}

	.artist_archive ul li {width: 48.046875%; padding-top: 40.839843%; margin-right: 3.90625%; margin-bottom: 3.90625%;}
	.artist_archive ul li:nth-child(3n) {margin-right: 3.90625%;}
	.artist_archive ul li:nth-child(2n) {margin-right: 0;}
}

@media screen and (max-width: 768px) {
	.artist_detail_wrap.profile .artist_detail_body .artist_side_nav {position: static;}

	.artist_profile .visual {margin-bottom: 50px;}
	.artist_profile .history {margin-left: -116px; width: auto; padding-right: 20px;}
	.artist_profile .history section h3 {top: 100px;}

	.artist_archive ul li {width: 100%; padding-top: 85%; margin-right: 0 !important; margin-bottom: 5.208333%;}
}

.board_wrap {max-width: 1470px; margin: 0 auto; padding: 0 20px 150px;}
.board_wrap .board_head {padding-left: 136px; margin-bottom: 40px;}
.board_wrap .board_head h2 {font-weight: 700; font-size: 22px; color: #1a1f40;}

.board_wrap .schedule_title {display: flex; align-items: center; justify-content: space-between; padding-left: 136px; margin-bottom: 40px;}
.board_wrap .schedule_title h2 {font-weight: 700; font-size: 22px; color: #1a1f40;}
.board_wrap .schedule_title .year_month {display: flex; align-items: center;}
.board_wrap .schedule_title .year_month .year {font-size: 16px; color: #000000;}
.board_wrap .schedule_title .year_month .month {display: flex; margin-left: 50px;}
.board_wrap .schedule_title .year_month .month .val {padding: 0 30px; font-weight: 700; font-size: 36px; color: #1a1f40;}
.board_wrap .schedule_title .year_month .month button {font-size: 30px; line-height: 1; color: #1a1f40;}

.board_wrap .board_body {display: inline-block; width: 100%;}
.board_wrap .board_body .board_side_nav {float: left; width: 136px; position: sticky; top: 160px;}
.board_wrap .board_body .board_side_nav a {display: block; position: relative; font-size: 15px; line-height: 38px; color: #30475e;}
.board_wrap .board_body .board_side_nav a.on {font-weight: 700; color: #efc245;}
.board_wrap .board_body .board_side_nav a.on:before {display: block; content: ''; position: absolute; top: 50%; margin-top: -1px; right: calc(100% + 16px); width: 50vw; height: 2px; background: #f7e0a2;}
.board_wrap .board_body .board_container {float: left; width: calc(100% - 136px);}

@media screen and (max-width: 768px) {
	.board_wrap {padding-top: 50px;}
	.board_wrap .board_head {padding-left: 0;}
	.board_wrap .board_body .board_side_nav {display: none;}
	.board_wrap .board_body .board_container {width: 100%; float: none;}

	.board_wrap .schedule_title {padding-left: 0;}
	.board_wrap .schedule_title .year_month .month {margin-left: 20px;}
	.board_wrap .schedule_title .year_month .month .val {padding: 0 15px; font-size: 20px;}
}

.schedule_area .schedule_head {display: flex; border-top: 2px solid #8c8f9f; border-bottom: 2px solid #8c8f9f;}
.schedule_area .schedule_head .day {flex: 1 1 100%; padding: 20px 12px; font-weight: 700; color: #1a1f40;}
.schedule_area .schedule_head .day:first-child {color: #ff5656;}
.schedule_area .schedule_head .day:last-child {color: #70c1ff;}

.schedule_area .schedule_body {border-bottom: 2px solid #8c8f9f;}
.schedule_area .schedule_body .week {display: flex;}
.schedule_area .schedule_body .week:not(:first-child) {border-top: 2px solid #e0e3e5;}

.schedule_area .schedule_body .date {position: relative; min-height: 135px; flex: 1 1 100%; padding: 5px 8px;}
.schedule_area .schedule_body .date .date_val {line-height: 30px; padding: 0 4px;}
.schedule_area .schedule_body .date:first-child .date_val {color: #ff5656;}
.schedule_area .schedule_body .date:last-child .date_val {color: #70c1ff;}
.schedule_area .schedule_body .date.today {border: 1px solid #1a1f40;}
.schedule_area .schedule_body .date.today .date_val {width: 30px; height: 30px; padding: 0; border-radius: 50%; text-align: center; background: #1a1f40; color: #ffffff;}
.schedule_area .schedule_body .date.prev .date_val,
.schedule_area .schedule_body .date.next .date_val {display: none;}
.schedule_area .schedule_body .date .schedule_list {padding: 5px 7px;}
.schedule_area .schedule_body .date .schedule_list .schedule {font-size: 14px; color: #1a1f40;}
.schedule_area .schedule_body .date .schedule_list .schedule:not(:first-child) {margin-top: 3px;}

@media screen and (max-width: 768px) {
	.schedule_area {margin: 0 -20px;}
	.schedule_area .schedule_head .day {padding: 10px 3px; font-size: 12px;}
	.schedule_area .schedule_body .date {padding: 5px 1px; min-height: 80px;}
	.schedule_area .schedule_body .date .date_val {font-size: 11px; line-height: 16px;}
	.schedule_area .schedule_body .date.today {border: none;}
	.schedule_area .schedule_body .date.today .date_val {width: 16px; height: 16px;}
	.schedule_area .schedule_body .date .schedule_list {padding: 3px 0;}
	.schedule_area .schedule_body .date .schedule_list .schedule {font-size: 10px;}
}

.audition_wrap {}
.audition_wrap .visual {margin-bottom: 20px;}
.audition_wrap .visual img {width: 100%;}
.audition_wrap .contents {max-width: 1050px; margin: 0 auto; padding: 0 20px;}
.audition_wrap .contents section {position: relative; padding: 45px 0 45px 200px;}
.audition_wrap .contents section h3 {position: absolute; top: 45px; left: 0; font-weight: 700; font-size: 18px;}
.audition_wrap .contents .body {font-size: 16px; color: #c2c7cc;}
.audition_wrap .contents .body dl {display: flex;}
.audition_wrap .contents .body dl:not(:first-child) {margin-top: 15px;}
.audition_wrap .contents .body dl dt {color: #30475e; white-space: nowrap; flex: 0 0 118px;}
.audition_wrap .contents .body dl dd {color: #afb8c1; flex: 1 1 100%;}
.audition_wrap .contents .body .flow {display: flex; justify-content: space-between;}
.audition_wrap .contents .body .flow li {width: 22.222222%; height: 108px; border-radius: 54px; position: relative; display: flex; justify-content: center; align-items: center; text-align: center; border: 1px solid #30475e;}
.audition_wrap .contents .body .flow li:not(:first-child):before {display: block; content: ''; font-family: 'Material Icons'; position: absolute; top: 50%; left: calc(-16.666666% - 1px); margin-top: -12px; width: 16.666666%; font-size: 24px; line-height: 1; color: #30475e; text-align: center;}
.audition_wrap .contents .body .flow li .inner {}
.audition_wrap .contents .body .flow li .tit {font-weight: 500; color: #30475e;}
.audition_wrap .contents .body .flow li .txt {margin-top: 5px; font-size: 14px; color: #afb8c1;}
.audition_wrap .contents .body ul li {color: #afb8c1;}
.audition_wrap .contents .body ul li:not(:first-child) {margin-top: 8px;}
.audition_wrap .contents .body .red {color: #ff5656;}

@media screen and (max-width: 1024px) {
	.audition_wrap .contents section {padding-left: 0;}
	.audition_wrap .contents section h3 {margin-bottom: 30px; position: static;}
	.audition_wrap .contents .body {font-size: 14px;}
	.audition_wrap .contents .body .flow li:not(:first-child):before {font-size: 20px; margin-top: -10px;}
	.audition_wrap .contents .body .flow li .txt {margin-top: 3px; font-size: 12px;}
}

@media screen and (max-width: 768px) {
	.audition_wrap .visual {margin: 0 calc(-10vw);}
	.audition_wrap .contents .body dl:not(:first-child) {margin-top: 10px;}
	.audition_wrap .contents .body .flow {flex-wrap: wrap; margin-bottom: -4%;}
	.audition_wrap .contents .body .flow li {width: 46%; margin-bottom: 4%;}
	.audition_wrap .contents .body .flow li:not(:first-child):before {width: 17.391304%; left: calc(-17.391304% - 1px);}
}