@charset "utf-8";

/********************************************************
	layout
********************************************************/
.subVisual:before {background:url(../img/common/img_sub_visual06.png) no-repeat 100% 0 #000;}


/* 안동시립합창단 - 합창단소개 */
.chorus-wrap {position:relative; background:url(../img/content/sub07/img0701_bg.png) no-repeat; padding:2em 3em 5em 2em; text-align:center;}
.chorus-wrap .top,
.chorus-wrap .mid {position:relative; display:inline-block; margin:0 auto 3.3333em; }
.chorus-wrap .mid {border-radius:1.5em; box-shadow:.7em .7em .9em rgba(0, 0, 0, 0.35); line-height:0;}
.chorus-wrap .mid:before {content:''; display:block; position:absolute; left:50%; top:0; margin-top:-1em; height:2.223em; width:1px; border-right:1px solid rgba(255,255,255,0.4);}
.chorus-wrap .top .tit {text-align:center;}
.chorus-wrap .top .tit em {font-size:1.333333em; color:#fff; font-style:normal; font-weight:600;}
.chorus-wrap .top .tit p {font-family:'STUNNING'; color:#FEDC92; font-size:3em; letter-spacing:-.025em; }

.chorus-wrap .bottom {}
.chorus-wrap .bottom p {color:#fff; text-align:center; word-break:keep-all;}
.chorus-wrap .bottom p + p {margin-top:1.5em;}
.chorus-wrap .bottom p.point {color:#FFF2C6; font-size:1.25em; font-weight:800;}
.chorus-wrap .bottom p.call {display:inline-block; padding:.5em 1em; border:1px solid #fff; border-radius:2em;}

@media all and (max-width:1024px) {
	.chorus-wrap .top .tit em {font-size:1em;}
	.chorus-wrap .top .tit p {font-size:2.5em;}
}

@media all and (max-width:960px) {
	.chorus-wrap .top .tit p {font-size:2em;}
}

/* 안동시립합창단 - 연혁 */
.history-chorus  {position:relative; padding:15em 8em 0 0; background:url(../img/content/sub07/img0702_bg.png) no-repeat 0 0; overflow:hidden;}
.history-chorus .history {padding:3em 3em 3em 0; border-radius:0 2.5em 0 0; background:#fff;}
.history-chorus .name {position:absolute; top:12em; left:0; text-align:left; width:100%;}
.history-chorus .history dl {display:table; width:100%;}
.history-chorus .history dl + dl {margin-top:2.5em; padding-top:2.5em; border-top:1px dashed #ddd;}
.history-chorus .history dl >* {display:table-cell; vertical-align:top;}
.history-chorus .history dt {width:11.295em; position:relative; color:#D90170; font-size:1.333334em; font-weight:800; text-align:center;}
.history-chorus .history .hisCon > li {position:relative; display:table; width:100%; padding-left:1.5em;}
.history-chorus .history .hisCon > li + li {padding-top:0.5555em;}
.history-chorus .history .hisCon > li:before {content:''; position:absolute; top:0; left:0; bottom:0; width:1px; background:rgba(0,105,182,.3);}
.history-chorus .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-chorus .history .hisCon > li:first-child:after {top:0.45em;}
.history-chorus .history .hisCon > li:first-child:before{top:0.6em;}
.history-chorus .history .hisCon > li:last-child:before {height:1.6em;}
.history-chorus .history .hisCon .date {display:table-cell; width:12em;}
.history-chorus .history .hisCon .con {display:table-cell;}
.history-chorus .history .hisCon .con > li {position:relative; padding-left:.667em;}
.history-chorus .history .hisCon .con > li:before{content:''; display:block; position:absolute; width:.278em; height:.278em; left:0; top:.65em; background:#000000;}
.history-chorus .history .hisCon .con > li > span {font-size:0.944445em;}
.history-chorus .history .hisCon .con > li li span {color:#666;}
.history-chorus .history .hisCon .con ul {margin:0.2em 0;}


@media (max-width: 1024px){
	.history-chorus {padding:10em 2em 0 0; background-position:50% -2em;}
	.history-chorus .name {top:6.5em; padding:0 1em;}
	
}
@media (max-width:820px){
	.history-chorus .history dl > * {display:block; padding-left:1em;}
	.history-chorus .history dt {margin-bottom:1em; text-align:left;}
}
@media (max-width: 640px){
	.history-chorus {padding-left:0;}
	.history-chorus .history .hisCon .date {width:13em;}
}
@media (max-width: 540px){
	.history-chorus .hisCon .date,
	.history-chorus .hisCon .con {display:block;}
}
@media (max-width:450px){
	.history-chorus .history {padding:1.5em;}
}


/* 안동시립합창단 - 지휘자소개 */
.leader-wrap {position:relative;display: flex;margin-top:10em;background:url(../img/content/sub03/img0303_chief_bg.png) right / 35% no-repeat, linear-gradient(120deg, #221C1C, #4A3531);padding-bottom: 4em;flex-direction: column;align-items: center;}
.leader-wrap .top {display:flex; width:calc(100% - 15em); margin-bottom:3em; align-items:flex-end; margin-top: -7em; }
.leader-wrap .top .txt {margin-left:3em;}
.leader-wrap .top .txt em {font-style:normal; color:#fff;}
.leader-wrap .top .txt p.tit:before {content:'';display:block;border-bottom:2px solid #fff;position:absolute;margin-top: .15em;top: 0;left: 0;right: 0;}
.leader-wrap .top .txt p.tit {position:relative; padding:.3em 0 .25em 0; font-family:'STUNNING'; color:#FEDC92; font-size:2.777777em; letter-spacing:-.025em;}
.leader-wrap .top .txt p.name {display:inline-block; padding:.5em 1.2em; background:#FFF2C6; border-radius:1.5em; font-weight:600; margin-bottom:1em;}

.leader-wrap .bottom {display: flex;width:calc(100% - 15em); flex-direction:row; justify-content:space-between;}
.leader-wrap .bottom ul {width:50%;}
.leader-wrap .bottom ul li {position:relative; padding-left:.667em; color:#fff;}
.leader-wrap .bottom ul li:before {content:''; display:block; position:absolute; width:.278em; height:.278em; background:#fff; left:0; top:.65em; }
.leader-wrap .bottom ul li + li {margin-top:.5555em;}


@media all and (max-width:1024px) {
	.leader-wrap .top,
	.leader-wrap .bottom {width:calc(100% - 4em);}
	.leader-wrap .top .txt p.tit{font-size:2em;}
}

@media all and (max-width:960px) {
 	.leader-wrap .top,
	.leader-wrap .bottom {flex-direction:column; align-items:center;}
	.leader-wrap .top .txt {margin-left:0; margin-top:1em; text-align:center;}
	.leader-wrap .bottom ul {width:100%;}
	.leader-wrap .bottom ul + ul {margin-top:.5em;}
}


/* 안동시립합창단 - 합창단원소개 */
.chorus-box {}
.chorus-box > div:nth-of-type(1) {padding-bottom:3em;}
.chorus-box div + div {padding:2em 0; border-top:1px dashed #d9d9d9;}
.chorus-box ul {display:flex; flex-direction:row; align-content:center; flex-wrap:wrap; align-items:center; margin: -.8em;}
.chorus-box ul li {width:calc(100% / 7); padding: 0.8em;}
.chorus-box ul li div {border-radius:1.25em; border: 1px solid #d9d9d9; overflow: hidden; line-height: 0;}
.chorus-box ul li p.name {margin-top:.35em; text-align: center;}
.chorus-box .col2 > div {padding:0; border-top:0;}
.chorus-box .col1 ul li,
.chorus-box .col2 ul li {width:auto;}

@media all and (max-width:960px) {
 .chorus-box ul li {width:calc(100% / 5);}
}

@media all and (max-width:640px) {
 .chorus-box ul li {width:calc(100% / 3);}
}