@charset "utf-8";

/********************************************************
	layout
********************************************************/
.subVisual:before {background:url(../img/common/img_sub_visual03.png) no-repeat 100% 0 #000;}
#body #left h2 {position:relative; display:flex; width:100%; height:9em; align-items:center; justify-content:center; padding:1em; background:url(../img/common/snb_bg03.png) no-repeat;}

/* 문화예술교육 - 공통 css */
.culture-top {position:relative; margin-bottom:3em;}
.culture-top > .box {position:relative; width:calc(100% - 8em);display:block; margin-top:-10em; background:linear-gradient(120deg, #221C1C, #4A3531); border-radius:0 3.5em 3.5em 0; padding:2.5em; border:0; box-shadow:.5em .5em .80em rgba(0, 0, 0, 0.09); word-break:keep-all; z-index:10;}
.culture-top > .box em {font-style:normal; font-size:1.2em; color:#fff;}
.culture-top > .box .tit {font-weight:800; font-size:2.25em; margin:.05em 0; color:#FEDC92; font-family:'STUNNING';}
.culture-top > .box .txt {color:#fff;}
.culture-top > .box:after {content:''; display:block; position:absolute; width:5.5555555em; height:5.723em; top:0; right:0; margin-top:-1.5em; margin-right:-1.5em; background:url(../img/content/sub03/img0303_top_obj.svg) no-repeat 50% 100%; }

.chief-wrap {position:relative; display:flex; flex-direction:row; align-items:flex-start; padding:2em; background:url(../img/content/sub03/img0303_chief_bg.png) right / 35% no-repeat, linear-gradient(120deg, #221C1C, #4A3531); justify-content:flex-start;}
.chief-wrap .img {width:14.445em;}
.chief-wrap .cont {width: calc(100% - 14.445em);margin-left:3em;}
.chief-wrap .cont .name {display: inline-block; padding: .5em 1.2em; background: #FFF2C6; border-radius: 1.5em; font-weight: 600; margin-bottom: 1em;}
.chief-wrap .cont .list {}
.chief-wrap .cont .list li {position:relative; padding-left:.667em; color:#fff; text-align:left;}
.chief-wrap .cont .list li + li {margin-top:.5555em;}
.chief-wrap .cont .list li:before {content:''; display:block; position:absolute; width:.278em; height:.278em; background:#fff; left:0; top:.65em; }

.chief-wrap .cont .list ul.col2 {display:flex; flex-direction:row; flex-wrap:wrap; align-items:center;}
.chief-wrap .cont .list ul.col2 li {width:50%;}

.art-top {}
.art-top > .box {margin-top:0; width:100%;}
.art-top > .box:after {margin-top:1em; margin-right:1em;}

/* 문화예술교육 아래 프로그램별 연혁 */
.history-culture {position:relative; padding:2em; background:#F8F9FD; overflow:hidden;}
.history-culture .history {padding:1.5em; background:#fff;}
.history-culture .history dl {display:table; width:100%;}
.history-culture .history dl + dl {margin-top:2.5em; padding-top:2.5em; border-top:1px dashed #ddd;}
.history-culture .history dl >* {display:table-cell; vertical-align:top;}
.history-culture .history dt {width:11.295em; position:relative; color:#D90170; font-size:1.333334em; font-weight:800; text-align:center;}
.history-culture .history .hisCon > li {position:relative; display:table; width:100%; padding-left:1.5em;}
.history-culture .history .hisCon > li + li {padding-top:0.5555em;}
.history-culture .history .hisCon > li:before {content:''; position:absolute; top:0; left:0; bottom:0; width:1px; background:rgba(0,105,182,.3);}
.history-culture .history .hisCon > li:after {content:''; width:.5em; height:.5em; background:#0069B6; outline:5px solid rgba(0,105,182,.1); border-radius:50%; box-sizing:content-box; position:absolute; top:1.1em; left:-.2em;}
.history-culture .history .hisCon > li:first-child:after {top:0.45em;}
.history-culture .history .hisCon > li:first-child:before{top:0.6em;}
.history-culture .history .hisCon > li:last-child:before {height:1.6em;}
.history-culture .history .hisCon .date {display:table-cell; width:12em;}
.history-culture .history .hisCon .con {display:table-cell;}
.history-culture .history .hisCon .con > li {position:relative; padding-left:.667em;}
.history-culture .history .hisCon .con > li:before{content:''; display:block; position:absolute; width:.278em; height:.278em; left:0; top:.65em; background:#000000;}
.history-culture .history .hisCon .con > li > span {font-size:0.944445em;}
.history-culture .history .hisCon .con > li li span {color:#666;}
.history-culture .history .hisCon .con ul {margin:0.2em 0;}

@media all and (max-width:960px) {
	.culture-top > .box {width:calc(100%);}
	.culture-top > .box:after {display:none;}
	.chief-wrap {background:linear-gradient(120deg, #221C1C, #4A3531);}
	.chief-wrap .cont .list ul.col2 li {width:100%;}
	.chief-wrap .img {margin:auto;}
	.history dl > * {display:block;}
	.history dt {margin-bottom:1em; text-align:left;}
	.history-wrap {padding-left:0;}
	.history .hisCon .date {width:13em;}
	.history .hisCon .date,
	.history .hisCon .con {display:block;}
}

@media all and (max-width:640px) {
	.culture-top {padding-bottom:0;}
	.chief-wrap .cont {width:calc(100%); margin-left:0; margin-top:1em; text-align:center;}
	.culture-top > .box {margin-top:-1em; border-radius:0;}
	.culture-top > .box .tit {font-size:2em;}
	.chief-wrap {margin-bottom:1.5em; flex-direction:column; align-content:center; margin-top:2em;}
}