@charset "utf-8";

/* 
* content CSS Document
* KOWEB
*/

/* sub visual */
.subVisual{ overflow: hidden; position:relative; display: flex; align-items: center; justify-content: center; height:350rem; padding-bottom: 0.6%; background: var(--black); text-align:center; color: #fff; z-index: 9; }
.subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.subVisual.about::before{ background-image:url('/images/content/visual1.jpg'); }
.subVisual.instrument::before{ background-image:url('/images/content/visual2.jpg'); }
.subVisual.lecturers::before{ background-image:url('/images/content/visual3.jpg'); }
.subVisual.board_notice::before{ background-image:url('/images/content/visual4.jpg'); }
.subVisual.direction::before{ background-image:url('/images/content/visual5.jpg'); }
.subVisual.common::before{ background-image:url('/images/content/visual5.jpg'); }
.subVisual__h2{ margin-bottom: 0.44em; font-size: var(--fs50); }
@media(prefers-reduced-motion:no-preference){
	.subVisual::before{ animation: subVisual_bg 1.8s both; }
	@keyframes subVisual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.subVisual .inr *{ opacity: 0; animation: subVisualText .6s .3s both; }
	.subVisual .inr *:nth-child(2){ animation-delay: .6s; }
	@keyframes subVisualText {
		0%{ transform: translateY(40rem); opacity: 0; }
		100%{ transform: translateY(0); opacity: 1; }
	}
}

/* common content */
#content{ min-height:300px; padding:120rem 0; overflow:hidden;}
.sub_title{ margin-bottom:100rem;}
.sub_title h2{ text-align:center; font-size:var(--fs35); }
.cont+.cont{margin-top:100rem;}
h2.sub_tit02{position:relative; margin-bottom:35rem; padding-left:20rem; font-size:var(--fs30); color:#111;}
h2.sub_tit02:before{content:''; display:block; position:absolute; top:7rem; left:0; width:8rem; height:31rem; background:var(--primary);}
@media(max-width:1279px){
    #content{padding:80rem 0;}
    .sub_title{margin-bottom:80rem;}
    .cont+.cont{margin-top:80rem;}
    h2.sub_tit02{margin-bottom:30rem; padding-left:16rem; font-size:26rem;}
    h2.sub_tit02:before{width:6rem; height:24rem;}
}
@media(max-width:767px){
    #content{padding:60rem 0;}
    .sub_title{margin-bottom:60rem;}
    .cont+.cont{margin-top:60rem;}
}


/* 창작소 소개 */
.area_about p{font-size:18rem; color:#444;}
.area_about .box em{display:block; margin-bottom:10rem; font-size:var(--fs30); color:#444;}
.area_about .box em b{color:#111;}
.area_about .box p+p{margin-top:25rem;}
.area_about .box01{display:flex; justify-content:space-between;}
.area_about .box01 .img{display:block; width:50%;}
.area_about .box01 .img img{display:block; width:100%;}
.area_about .box01 .txt{padding-top:80rem; width:calc(50% - 80rem);}
.area_about .box02{display:flex; justify-content:space-between; position:relative; margin-top:-50rem; padding-bottom:120rem; background:#fbf9f4; z-index:-1;}
.area_about .box02:before,
.area_about .box02:after{content:''; display:block; position:absolute; top:0; width:100vw; height:100%; background:#fbf9f4; z-index:-1;}
.area_about .box02:before{right:0;}
.area_about .box02:after{left:0;}
.area_about .box02 .txt{padding-top:170rem; width:50%;}
.area_about .box02 .txt span {color:#ccc; font-size:12pt; display:inline-block; margin:0 15px}
.area_about .box02 .img{display:block; margin-top:-50rem; width:calc(50% - 80rem); height:540rem;}
.area_about .box02 .img img{display:block; width:100%; height:100%; object-fit:cover;}
.area_about .box03{margin-top:80rem;}
.area_about .box03 .img{display:block; margin-bottom:60rem; width:100%;}
.area_about .box03 .img img{display:block; width:100%;}
.area_about .box03 .txt{padding-left:400rem;}
@media(max-width:1279px){
    .area_about .box p > br.hide_mo{display:none;}
    .area_about .box01 .txt{padding-top:0; width:calc(50% - 60rem);}
    .area_about .box01 .img{height:320rem;}
    .area_about .box01 .img img{height:100%; object-fit:cover;}
    .area_about .box02{padding-bottom:80rem;}
    .area_about .box02 .txt{padding-top:120rem;}
    .area_about .box02 .img{width:calc(50% - 60rem);}
    .area_about .box03{margin-top:60rem;}
    .area_about .box03 .img{margin-bottom:50rem;}
    .area_about .box03 .txt{padding-left:100rem;}
}
@media(max-width:767px){
    .area_about .box p+p{margin-top:22rem;}
    .area_about .box01{display:block;}
    .area_about .box01 .img{margin-bottom:30rem; width:100%; height:auto;}
    .area_about .box01 .txt{width:100%;}
    .area_about .box02{flex-direction:column-reverse; margin-top:60rem; padding:60rem 0;}
    .area_about .box02 .img{margin:0; width:100%; height:280rem;}
    .area_about .box02 .txt{padding-top:30rem; width:100%;}
	.area_about .box02 .txt span {margin:0 5px}
    .area_about .box03 .img{margin-bottom:30rem;}
    .area_about .box03 .txt{padding-left:0;}
}


/* 악기&클래스 */
.area_instrument .cont01 ul{display:flex; margin-left:-40rem; flex-wrap:wrap;}
.area_instrument .cont01 ul li{padding-left:40rem; width:calc(100% / 4);}
.area_instrument .cont01 ul li:nth-child(-n+4){margin-bottom:40rem;}
.area_instrument .cont01 ul li div img{display:block; width:100%;}
.area_instrument .cont01 ul li div em{display:block; margin-top:15rem; text-align:center; font-size:20rem;}
.area_instrument .cont02 .table01 table.table{margin-top:0 !important;}
.area_instrument .cont02 table.table thead th{background:#f3f0e5 !important;}
.area_instrument .cont02 table.table th,
.area_instrument .cont02 table.table td{padding:14rem 10rem !important; font-size:18rem !important;}
.area_instrument .cont02 .table02 th{border-bottom:1px solid #cecece;}
.area_instrument .cont02 .table02 td{border-bottom:1px solid #e0e0e0;}
.area_instrument .cont02 .table02 td span {color:#ccc; font-size:12pt; display:inline-block; margin:0 15px}
.area_instrument .cont02 .table02 tr:last-child td{border-bottom:1px solid #868686}
@media(max-width:1279px){
    .area_instrument .cont01 ul{margin-left:-30rem;}
    .area_instrument .cont01 ul li{padding-left:30rem; width:calc(100% / 3);}
    .area_instrument .cont01 ul li:nth-child(-n+6){margin-bottom:30rem;}
}
@media(max-width:767px){
    .area_instrument .cont01 ul{margin-left:-15rem;}
    .area_instrument .cont01 ul li{padding-left:15rem; width:calc(100% / 2);}
    .area_instrument .cont01 ul li div em{margin-top:12rem;}
	.area_instrument .cont02 .table02 td span {margin:0 5px}
}


/* 강사진 */
.area_lecturers .cont_inr{display:flex; justify-content:space-between; margin:auto; padding-top:30rem; max-width:1000rem; width:100%; border-top:3px solid var(--primary);}
.area_lecturers .profile{width:400rem;}
.area_lecturers .profile .img{display:block; width:100%;}
.area_lecturers .profile .img img{display:block; width:100%; height:100%; object-fit:cover;}
.area_lecturers .profile em{display:block; margin-top:20rem; font-size:20rem; font-weight:500;}
.area_lecturers .career{padding-left:40rem; width:calc(100% - 440rem); border-left:1px solid #ddd;}
.area_lecturers .career .box+.box{margin-top:40rem; padding-top:40rem; border-top:1px dashed #ddd;}
.area_lecturers .career .box ul+ul{margin-top:40rem;}
.area_lecturers .career .box ul li{position:relative; padding-left:12rem; font-size:18rem; color:#444;}
.area_lecturers .career .box ul li:before{content:'-'; display:block; position:absolute; top:0; left:0; font-size:18rem; color:#888;}
.area_lecturers .career .box ul li+li{margin-top:8rem;}
@media(max-width:1279px){
    .area_lecturers .profile{width:350rem;}
    .area_lecturers .career{width:calc(100% - 390rem);}
}
@media(max-width:767px){
    .area_lecturers .cont_inr{display:block; padding-top:25rem;}
    .area_lecturers .profile{width:100%;}
    .area_lecturers .profile .img{margin:auto; width:80%;}
    .area_lecturers .profile em{text-align:center; margin-top:15rem;}
    .area_lecturers .career{padding-left:0; margin-top:25rem; padding-top:25rem; width:100%; border-top:1px solid #ddd; border-left:0;}
    .area_lecturers .career .box+.box{margin-top:25rem; padding-top:25rem;}
    .area_lecturers .career .box ul+ul{margin-top:25rem;}
}


/* 오시는 길 */
.area_contact{display:flex; align-items:center; flex-direction:row-reverse;}
#wrap .root_daum_roughmap{width:800rem;}
#wrap .root_daum_roughmap .wrap_map{ height: 500rem; }
.root_daum_roughmap svg{ pointer-events: none; }
.map_border,
.wrap_controllers{ display: none }
.area_contact .info{padding-right:100rem; width:calc(100% - 800rem);}
.area_contact .address{font-size: 18rem; color: #444; }
.area_contact .address li{ position: relative; padding-left: 25rem; }
.area_contact .address li+li{ margin-top: 8rem; }
.area_contact .address li::before{ content: ''; position: absolute; top: 3rem; left: 1px; width: 15rem; height: 20rem; background: url('/images/main/location.svg') no-repeat 50% / contain; }
.area_contact .tel{ margin-top:20rem; display: inline-block; font-size:30rem; font-weight: 900; letter-spacing: -.03em; }
.area_contact .sns{margin-top:80rem;}
.area_contact .sns li+li{margin-top:10rem;}
.area_contact .sns li a{display:block; position:relative; overflow:hidden; padding:6rem; height:50rem; width:400rem; border-radius:25rem; border:1px solid var(--primary); background:#fff;}
.area_contact .sns li a img{float:left; display:block; height:100%;}
.area_contact .sns li a em{float:left; padding:0 20rem; font-size:20rem; line-height:35rem; font-weight:500; color:#222;}
.area_contact .sns li a svg{float:right; margin-top:5rem; margin-right:15rem; display:block; height:70%;}
.area_contact .sns li a svg .cls-1{fill:var(--primary);}
/*
.area_contact .sns li.kakao a{border:2px solid #fae100;}
.area_contact .sns li.kakao a svg .cls-1{fill:#fae100;}
.area_contact .sns li.insta a{border:2px solid #ac3aca;}
.area_contact .sns li.insta a svg .cls-1{fill:#ac3aca;}
.area_contact .sns li.blog a{border:2px solid #2cb24a;}
.area_contact .sns li.blog a svg .cls-1{fill:#2cb24a;}
.area_contact .sns li.youtube a{border:2px solid #ff0000;}
.area_contact .sns li.youtube a svg .cls-1{fill:#ff0000;}
*/
@media(max-width:1279px){
    #wrap .root_daum_roughmap{width:50%;}
    #wrap .root_daum_roughmap .wrap_map{height:450rem;}
    .area_contact .info{padding-right:50rem; width:50%;}
    .area_contact .sns{margin-top:50rem;}
}
@media(max-width:767px){
    .area_contact{display:block;}
    #wrap .root_daum_roughmap{width:100%;}
    #wrap .root_daum_roughmap .wrap_map{height:300rem;}
    .area_contact .info{margin-top:30rem; padding-right:0; width:100%;}
    .area_contact .sns{margin-top:30rem;}
    .area_contact .sns li a{width:350rem;}
}