/* 공통 */
#contents > .inner  {display: flex; justify-content: flex-start; gap: 55px; margin-top: 70px; padding: 0 18px;}
#contentsWrap {flex:1; width:calc(100% - 268px - 70px);}
#contentsWrap .subcontent {min-height: 200px; margin-bottom: 10rem; line-height: 1.7;}

.subcontent > div div {overflow: hidden;}
.subcontent > div div:first-child .conH3 {margin: 0 0 10px 0;}

.conH3 {position: relative; font-size: 1.6em; padding: 5px 0 0 0; font-weight: 700; color: #f1116e; margin: 80px 0 10px 0; letter-spacing: -1px;}
.conH3:after {content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 3px; background-image: linear-gradient(to right, #ed156b, #fda228);}
.conH4 {position: relative; margin: 40px 0 10px 0; font-weight: 700; padding: 0 0 0 25px; font-size: 1.42rem; color: #000;}
.conH4:after {content: ""; display: inline-block; position: absolute; left: 0; top: 9px; width: 15px; height: 20px; background: url("../../images/sub/orchestra/sub_title_icon.png") no-repeat 50% 50%;}
.conP {font-size: 1.1rem; padding: 5px 0 10px 10px; color: #343434; line-height: 1.7; word-break: keep-all;}
.conSTxt {display: block; font-size: 1rem; color: #5e5e5e; padding-top: 5px;}

.conList,
.addComt,
.conListNDot {position: relative; margin-top: 10px;}
.conList li,
.addComt dl dt {position: relative; padding: 0 0 7px 25px; color: #343434; line-height: 1.7; font-size: 1.1rem; word-break: keep-all;}
.conList li:after,
.addComt dl dt:after {content: ""; position: absolute; left: 10px; top: 12px;  width: 4px; height: 4px; background: #f1116e;}

.conListNDot li {padding: 0 0 7px 0 !important;}
.conListNDot li:after {display: none;}

.addComt dl dt {font-weight: 700; color: #f1116e;}
.addComt dl dd {font-size: 1.1rem; padding: 0 0 0 25px; color: #5e5e5e; line-height: 1.7;}

.conBoxSt01 {padding: 1.5rem 1.5rem; border-radius: 15px; margin-top: 10px; border: 1px solid #dfdfdf;}
.conBoxSt02 {position: relative; padding: 3.7rem 8rem; margin: 0 0 40px 0;}
.conBoxSt02:before,
.conBoxSt02:after {content: ""; position: absolute; left: 0; top: 0; width: 5rem; height: 100%; border-top: 1.3rem solid #F1F1F1; border-left: 1.3rem solid #F1F1F1; border-bottom: 1.3rem solid #F1F1F1;}
.conBoxSt02:after {right: 0; left: auto; border-left: 0 none !important; border-right: 1.3rem solid #F1F1F1;}
.conBoxSt02 p {font-size: 1.2rem; color: #343434; line-height: 1.7; word-break: keep-all; font-weight: 600;}

.w100 {width: 100%;}
.colOr {color: #ff6c00;}
.colpK {color: #f1116e;}



/* 사이드메뉴*/
#lnb {display: none;}

/* 서브이미지*/
#subVis .subVisWrap {position: relative; width: 100%; height: 480px; background-image: url("../../images/sub/orchestra/sub_img.jpg"); background-size: cover; background-position: 50% 6%;}
#subVis .subVisWrap .subVisTit {position: absolute; width: 100%; top: 57%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 0 30px;}
#subVis .subVisWrap .subVisTit p {position: relative; display: inline-block; font-size: 34px; font-weight: 600; color: #fff;}
#subVis .subVisWrap .subVisTit p:after {content: ""; display: inline-block; vertical-align: top; width: 2px; height: 20px; background: #fff; margin: 12px 16px 0 20px; transform: rotate(30deg);}
#subVis .subVisWrap .subVisTit p:nth-child(2):after {display: none;}
#subVis .subVisWrap .subVisTit span {display: block; color: #fff; font-size: 17px; padding-top: 15px;}

/* 로케이션*/
#contentsWrap .location {display: block; margin-top: 10px;}
#contentsWrap .location ul {overflow: hidden;}
#contentsWrap .location ul li {float: left; position: relative;}
#contentsWrap .location ul li.home a {width: 16px; height: 16px; margin: 5px 0 0; background-image: url("../../images/sub/orchestra/home_icon.png"); background-repeat: no-repeat; font-size: 0;}
#contentsWrap .location ul li:not(:last-child):after {display: inline-block; content: ""; margin: 11px 12px 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid #c5c5c5; vertical-align: top; letter-spacing: -0.4px;}
#contentsWrap .location ul li a {display: inline-block; position: relative; line-height: 25px; vertical-align: top; color: #555; font-weight: 400;}
#contentsWrap .location ul li.on a {color: #333333;}
#contentsWrap .pageTitle {font-size: 38px; color: #000; line-height: 38px; font-weight: 800; padding: 22px 0 25px; margin-bottom: 40px; word-break: keep-all; letter-spacing: 0; background: url("../../images/sub/orchestra/pattern.png")repeat-x left bottom;}


/* 비전및미션*/
.visonMission .arrow {margin-bottom: 20px; text-align: center; background: url("../../images/sub/orchestra/arrow.png") no-repeat center top; padding: 15px 0 15px 0; opacity: .3;}
.visonMission .plan ul {flex-wrap: wrap;}
.visonMission .plan li {position: relative; width: calc(100% / 4); height: 200px; text-align: center; padding: 0 10px;}
.visonMission .plan li .img {display: flex; justify-content: center; align-items: center; width: 120px; height: 100px; margin: 0 auto;}
.visonMission .plan li strong {display: block; width: fit-content; margin: 0 auto; font-size: 1.1rem; font-weight: 700; color: #f1116e; word-break: keep-all;}
.visonMission .plan li .txt {width: fit-content; display: block; margin: 7px auto 0; color: #343434; word-break: keep-all;}


/* 운영구조*/
.operation .arrow {letter-spacing: -2.1px; font-size: .98rem; display: inline-block; padding: 0 5px; color: #979797;}


/* 연혁*/
.history .historyGr {position: relative; margin: 0; padding: 0;}
.history .historyGr:before {display: block; content: ''; position: absolute; top: 166px; left: 50%; height: 550px; margin-left: -.5px; bottom: 0; border-right: 1px solid #ddd;}
.history .historyGr .year {position: relative; display: block; padding: 55px 44px; color: #fff; text-align: center; font-size: 2.2rem; font-weight: bold; }
.history .historyGr .year.yearCol01 {background: url("../../images/sub/orchestra/yearCol01.png") no-repeat 50% 50%;}
.history .historyGr .year.yearCol02 {background: url("../../images/sub/orchestra/yearCol02.png") no-repeat 50% 50%;}
.history .historyGr .year.yearCol03 {background: url("../../images/sub/orchestra/yearCol03.png") no-repeat 50% 50%;}

.history .historyGr .historyList {clear: both; position: relative; margin: 40px 0; width: 50%; box-sizing: border-box;}
.history .historyGr .historyList.left {float:left; padding-right:32px; text-align:right;}
.history .historyGr .historyList.right {float: right; padding-left: 32px; text-align: left;}
.history .historyGr .historyList .conList li {padding: 0 0 19px 25px;}
.history .historyGr .historyList.left .conList li:after {right: 10px !important; left: inherit;}
.history .historyGr .historyList.left .conList li {padding: 0 25px 19px 0;}
.history .historyGr .historyList .conListNDot li {font-size: 1rem; color: #5e5e5e;}


/* bi 및 브로슈어*/
.bi .conBoxSt01 {padding: 0 0;}
.bi .conBoxSt01 .img {background: url("../../images/sub/orchestra/bi_Bg.jpg") no-repeat 50% 50%; text-align: center; padding: 1.5rem 1.5rem;}
.bi .biColor {margin: .7rem 0;}
.bi .biColor:after {display: block; content: ""; clear: both;}
.bi .biColor > li {width: calc((100% - 25px) / 2); float: left; margin-right: 25px; padding: 130px 0 0;}
.bi .biColor > li:nth-child(1) {background-color: #e81f76;}
.bi .biColor > li:nth-child(2) {background-color: #ff8300;}
.bi .biColor > li:last-child {margin: 0 0;}
.bi .biColor > li .conList li {background-color: #fff; display: block; margin: 0;}
.bi .biColor > li .conList li:first-child {padding-top: 15px;}
.bi .biColor > li .conList li:first-child:after {top: 27px}


/* 거점기관이란*/
.organ .img {display: flex; justify-content: center; margin: 0 auto;}

/* 거점기관 현황*/
.organSituation .mapTit > span {display: block;	font-size: 1.1rem; font-weight: 400; margin: -10px 0 0 6px;}
.organSituation .conSTxt {text-align: right;}


/* ENGLISH*/
.businessInfo .conH4 {margin: 25px 0 10px 0;}
.businessInfo .hTit {font-size: 1.32rem; color: #f1116e; font-weight: 600; margin-top: 30px; text-decoration: underline;}
.businessInfo .conBoxSt01 {padding: 2rem 1.5rem;}
.businessInfo .plan ul {flex-wrap: wrap;}
.businessInfo .plan li {position: relative; width: calc(100% / 4); height: 100%; text-align: center; padding: 0 10px;}
.businessInfo .plan li .img {display: flex; justify-content: center; align-items: center; width: 120px; height: 100px; margin: 0 auto;}
.businessInfo .plan li .img img {width: 100px;}
.businessInfo .plan li strong {display: block; width: fit-content; margin: 0 auto; font-size: 1.1rem; font-weight: 700; color: #f1116e; word-break: keep-all;}
.businessInfo .plan li .txt {width: fit-content; display: block; margin: 7px auto 0; color: #343434; word-break: keep-all;}


/* ---------- 반응형 ---------- */
/* 1024이상 PC*/
@media only screen and (min-width: 1024px) {
	/* 공통 */
	#contentsWrap {flex:1; width:calc(100% - 268px - 70px);}


	/* 사이드메뉴*/
	#lnb {display: block; position: relative; width: 268px; min-height: auto;}
	#lnb .lnbTitle {min-height: 120px; padding: 33px 10px; background-image: linear-gradient(to right, #ed156b, #fda228); border-radius: 15px 15px 0 0; text-align: center;}
	#lnb .lnbTitle:before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 179px; height: 110px; background: url("../../images/sub/lnb_bg.png") no-repeat 50% 50%; opacity: .2;}
	#lnb .lnbTitle strong {display: block; line-height: 1.3; color: #fff; font-size: 30px; font-weight: bold;}
	#lnb .lnbList {margin: -15px 0 40px; padding: 25px 25px; border: 1px solid #e0e0e0; border-radius: 15px; background: #fff;}
	#lnb .lnbList > li {position: relative; border-top: 1px solid #e0e0e0;}
	#lnb .lnbList > li:first-child {border-top: none;}
	#lnb .lnbList > li > a {position: relative; display: block; line-height: 1.2; padding: 16px 25px 14px 7px; color: #000;}
	#lnb .lnbList > li > a.hoverUnderline .hoverItem {background-image: linear-gradient(to right, #f1116e 50%, transparent 50%);}
	#lnb .lnbList > li > a:before {display: block; position: absolute; z-index: 1; right: 7px; top: 24px; content: ""; width: 5px; height: 5px; border: solid #585c62; border-width: 1px 1px 0 0; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
	#lnb .lnbList > li > a:after {display: block; position: absolute; right: 0; top: 17px; content: ""; width: 19px; height: 19px; border: 1px solid #cacaca; border-radius: 50%;}
	#lnb .lnbList > li > a:hover:before,
	#lnb .lnbList > li > a.on:before {border: solid #fff; border-width: 1px 1px 0 0;}
	#lnb .lnbList > li > a:hover:after,
	#lnb .lnbList > li > a.on:after {background-color: #f1116e; border: 1px solid #f1116e; }
	#lnb .lnbList > li > a > span {position: relative; display: inline-block; line-height: 1.2; word-wrap: break-word; word-break: keep-all; font-size: 17px; font-weight: 500; color: #4d4d4d;}
	#lnb .lnbList > li > a:hover > span,
	#lnb .lnbList > li > a.on > span {color: #f1116e;}
	{border-bottom: 1px solid #f1116e}


	/* 서브이미지*/
	#subVis .subVisWrap .subVisTit {width: 100%; top: 57%; left: 50%; transform: translate(-50%, -50%);}
	#subVis .subVisWrap .subVisTit p {font-size: 46px; font-weight: 600;}
	#subVis .subVisWrap .subVisTit p:after {width: 3px; height: 28px; margin: 14px 25px 0 32px;}
	#subVis .subVisWrap .subVisTit span {font-size: 19px; padding-top: 20px;}
}

/* 768이상 PC*/
@media only screen and (max-width: 768px) {
	/* 공통 */
	#contentsWrap {width: 100%;}
	#contents > .inner {margin-top: 40px;}
	#contentsWrap .pageTitle{font-size: 2rem; padding: 15px 0 17px;}

	.conH3 {font-size: 1.4rem;}
	.conH4 {font-size: 1.3rem;}
	.conH4:after {top: 8px; background-size: 80%;}
	.conP {padding: 5px 0 10px 0;}
	.conP,
	.conList li,
	.addComt dl dt,
	.addComt dl dd {font-size: 1rem;}
	.addComt dl dd {padding: 0;}
	.conList li,
	.addComt dl dt {padding: 0 0 7px 15px;}
	.conList li:after,
	.addComt dl dt:after {left: 0;}
	.conBoxSt02 {padding: 3rem 4rem;}
	.conBoxSt02:before,
	.conBoxSt02:after {width: 3rem; border-top: 1.1rem solid #F1F1F1; border-left: 1.1rem solid #F1F1F1; border-bottom: 1.1rem solid #F1F1F1;}
	.conBoxSt02:after {border-right: 1.1rem solid #F1F1F1;}
	.conBoxSt02 p  {font-size: 1.1rem;}

	/* 서브이미지*/
	#subVis .subVisWrap {height: 400px;}
	#subVis .subVisWrap .subVisTit {text-align: left; }
	#subVis .subVisWrap .subVisTit p {font-size: 2rem; transition: 0.5s ease-in-out;}


	/* 비전및미션*/
	.visonMission .board .title:before {display: block; content: '핵심가치 '; padding: 0 10px 5px 10px; color: #222; text-align: left; font-weight: 700;}
	.visonMission .plan ul {flex-flow: column;}
	.visonMission .plan li {width: 100%;}


	/* 연혁*/
	.history .historyGr:before {top: 128px;}
	.history .historyGr .year {background-size: 120px !important; padding: 35px 25px; font-size: 2rem;}
	.history .historyGr .historyList {margin: 15px 0;}
	.history .historyGr .historyList .conList li,
	.history .historyGr .historyList.left .conList li {padding: 0 0 10px 15px;}


	/* bi 및 브로슈어*/
	.bi .conBoxSt01 .img img {width: 198px; height: auto;}
	.bi .biColor > li {width: 100%; padding: 110px 0 0;}

	/* 거점기관이란*/
	.organ .img {width: 100%;}


	/* 거점기관 현황*/
	.organSituation .conSTxt {text-align: left;}
	.mapWrap .mapTit img {width: 320px;}


	/* ENGLISH*/
	.businessInfo .plan ul {flex-flow: column;}
	.businessInfo .plan li {width: 100%; height: 100%; padding: 0 0 20px;}

}


/* 640이상 PC*/
@media only screen and (max-width: 640px) {
	/* 운영구조*/
	.operation .board {width: 580px;}
	/* 연혁*/
	.history .historyGr .year {font-size: 1.6rem; background-size: 105px !important; padding: 31px 23px;}
	.history .historyGr:before {display: none;}
	.history .historyGr .historyList.left {padding-left: 32px; text-align: left; padding-right: 0;}
	.history .historyGr .historyList.left,
	.history .historyGr .historyList.right {float: none; margin: 40px 0; width: 100%; padding-left: 10px;}
	.history .historyGr .historyList.left .conList li:after {right: 0 !important; left: 0;}


	/* 거점기관 현황*/
	.mapWrap .mapTit img {width: 280px;}
}