/* 공통 */ #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: #008FBE; 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,#008FBE, #8bcd1b);} .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: 8px; width: 15px; height: 20px; background: url("../../images/sub/dreamdance/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: #008FBE;} .conListNDot li {padding: 0 0 7px 0 !important;} .conListNDot li:after {display: none;} .addComt dl dt {font-weight: 700; color: #008FBE;} .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; background-color: #f7fafa;} .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%;} .colGr {color: #8bcd1b;} .colBl {color: #008FBE;} .colR {color: #d81313;} /* 사이드메뉴*/ #lnb {display: none;} /* 서브이미지*/ #subVis .subVisWrap {position: relative; width: 100%; height: 480px; background-image: url("../../images/sub/dreamdance/sub_img02.jpg"); background-size: cover; background-position: 50% 9%;} #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/dreamdance/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/dreamdance/pattern.png")repeat-x left bottom;} /* 링크복사*/ .copyLink {position: absolute; bottom: 25px; right: 0; padding-top: 30px; font-size: .9rem;} .copyLink:before {content: ""; display: inline-block; position: absolute; left: 50%; top: 0; width: 20px; height: 20px; background: url("../../images/common/dreamdance/copy_icon02.png") no-repeat 50% 50%; transform: translate(-50%, 0);} /* 꿈의무용단이란*/ .visonMission .arrow {margin-bottom: 20px; text-align: center; background: url("../../images/sub/dreamdance/arrow.png") no-repeat center top; padding: 15px 0 15px 0; opacity: .3;} .visonMission .vTxt {display: inline-block;font-weight: 700; padding: 20px 0 0; margin-bottom: 5px; font-size: 1.1rem; color: #83b909; border-bottom: 2px dotted #93D500;} .visonMission .plan ul {flex-wrap: wrap;} .visonMission .plan li {position: relative; width: calc(100% / 3); height: 240px; text-align: center; padding: 0 40px;} .visonMission .plan li .img {display: flex; justify-content: center; align-items: center; width: 148px; 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: #008FBE; word-break: keep-all; padding: 10px 0;} .visonMission .plan li .txt {width: fit-content; display: block; margin: 7px auto 0; color: #343434; word-break: keep-all;} .visonMission .Society li {position: relative; width: calc(100% / 4); height: 100%; text-align: center; padding: 0 15px;} .visonMission .Society li > span > span {display: inline; padding: 0 2px;} .visonMission .withImg {display: flex;} .visonMission .withImg img {margin: 35px auto; width: 65%; object-fit: cover;} .visonMission .strongTit {font-weight: 700; color: #008FBE; padding-bottom: 5px;} .visonMission .mT30 ul.conList li {padding: 0 0 35px 25px;} /* bi 및 브로슈어*/ .bi .conBoxSt01 {padding: 0 0;} .bi .conBoxSt01 .img {background: url("../../images/sub/dreamdance/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: #008FBE;} .bi .biColor > li:nth-child(2) {background-color: #93D500;} .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} /* 사업 연혁*/ .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/dreamdance/yearcol01.png") no-repeat 50% 50%;} .history .historyGr .year.yearCol02 {background: url("../../images/sub/dreamdance/yearcol02.png") no-repeat 50% 50%;} .history .historyGr .year.yearCol03 {background: url("../../images/sub/dreamdance/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;} /* ENGLISH*/ .english .plan ul {flex-wrap: wrap;} .english .plan li {position: relative; width: calc(100% / 3); height: 100%; text-align: center; padding: 0 20px;} .english .plan li .img {display: flex; justify-content: center; align-items: center; width: 148px; height: 100px; margin: 0 auto;} .english .plan li strong {display: block; width: fit-content; margin: 0 auto; font-size: 1.1rem; font-weight: 700; color: #008FBE; word-break: keep-all; padding: 10px 0;} .english .plan li .txt {width: fit-content; display: block; margin: 7px auto 0; color: #343434; word-break: keep-all;} .english .Society li {position: relative; width: calc(100% / 4); height: 100%; text-align: center; padding: 0 15px;} .english .Society li > span > span {display: inline; padding: 0 2px;} /* 거점기관 현황*/ .organSituation table td a > span {color: #008FBE; border-bottom: 1px solid #008FBE;} .organSituation .mapBox {position: relative; overflow: inherit;} .organSituation .mapBox .mapWrap {position: relative; width: 100%; min-width: 320px; height: 900px; padding: 4.5rem 3rem 2rem 3rem; background-color: #a1d4e7;} .organSituation .mapBox .mapImg {position: relative; left: 0; top: 0; width: 100%; height: 100%; max-width: 547px; max-height: 739px; background: url("../../images/sub/dreamdance/map_img.png") no-repeat center;} .organSituation .mapBox .mapImg p {position: absolute; width: 100%; max-width: 64px; height: 62px; background-image: url("../../images/sub/dreamdance/map_point.png"); background-size: 100%; background-repeat: no-repeat;} .organSituation .mapBox .mapImg p:hover, .organSituation .mapBox .mapImg p:focus, .organSituation .mapBox .mapImg p.on {background-image: url("../../images/sub/dreamdance/map_point_on.png"); } .organSituation .mapBox .mapImg p a {display: block; width: 100%; height: 100%;color: #fff; font-weight: 400; font-size: 1rem;} .organSituation .mapBox .mapImg p a:hover, .organSituation .mapBox .mapImg p a:focus, .organSituation .mapBox .mapImg p.on a {color: #000;} .organSituation .mapBox .mapImg p span {display: inline-block; padding: 7px 6px;} .organSituation .mapBox .mapImg .seoul {top: 12.58%; left: 28.57%;} .organSituation .mapBox .mapImg .gyeonggi {top: 18.72%; left: 34.72%;} .organSituation .mapBox .mapImg .incheon {top: 13.28%; left: 21.17%;} .organSituation .mapBox .mapImg .gangwon {top: 11.35%; left: 58.5%;} .organSituation .mapBox .mapImg .chungnam {top: 36%; left: 23.29%;} .organSituation .mapBox .mapImg .chungbuk {top: 30.9%; left: 43.36%;} .organSituation .mapBox .mapImg .jeonbuk {top: 51%; left: 28.18%;} .organSituation .mapBox .mapImg .jeonnam {top: 66%; left: 26.18%;} .organSituation .mapBox .mapImg .gwangju {top: 62%; left: 19.18%;} .organSituation .mapBox .mapImg .ulsan {top: 57.78%; left: 76.15%;} .organSituation .mapBox .mapImg .gyeongnam {top: 60.78%; left: 53.79%;} .organSituation .mapBox .mapImg .gyeongbuk {top: 38.64%; left: 67%;} .organSituation .mapBox .mapImg .daegu {top: 50.2%; left: 61%;} .organSituation .mapBox .mapStatus {position: absolute;} .organSituation .mapBox .mapStatus > div {width: 100%; min-width: 270px; padding: 1.3rem 1.5rem; background-color: #fff; border-radius: 15px; border-radius: 15px; border-top: 5px solid #008FBE; border-bottom: 5px solid #008FBE;} .organSituation .mapBox .mapStatus > div .title {text-align: center; width: 100%; height: 40px; border: 1px solid transparent; border-image-slice: 1; border-radius: 100px; background-image: linear-gradient(50deg, #008FBE, #93D500); background-origin: border-box; background-clip: content-box, border-box; position: relative; margin-top: -1px;} .organSituation .mapBox .mapStatus > div .title span {width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 100px; display: block; position: absolute; left: 2px; top: 2px; background: #fff; font-size: 15px; color: #008FBE; font-weight: 900; display: flex; align-items: center; justify-content: center;} .organSituation .mapBox .mapStatus > div .desc {padding: 5px 0 0 5px;} .organSituation .mapBox .mapStatus > div .desc li {font-size: 1rem;} .organSituation .mapBox .mapStatus > div .desc li:last-child {padding: 0 0 0 25px;} .organSituation .mapBox .mapStatus > div .desc li a img {padding-left: 8px;} .organSituation .mapBox .mapStatus .on {display: block;} .organSituation .mapBox .mapStatus .off {display: none;} /* 연간캘린더*/ .calendaryear .caly_y {background:url("../../images/sub/dreamdance/calendaryearbg.png") repeat; background-size:100%; color:#ffffff; position:relative; padding:0 40px; border-bottom:1px solid #008FBE; display:flex; justify-content:space-between;} .calendaryear .caly_y>* {float:left;} .calendaryear .caly_y a {width:10%; font-size:16px; padding:31px 0; color: #fff;} .calendaryear .caly_y a span {background-repeat:no-repeat;} .calendaryear .caly_y a.prev_y span {background-image:url("../../images/sub/dreamdance/btn_arr_prev.png"); background-position:left center; padding-left:32px;float:left;} .calendaryear .caly_y a.next_y span {background-image:url("../../images/sub/dreamdance/btn_arr_next.png"); background-position:right center; padding-right:32px; float:right;} .calendaryear .caly_y span:hover { opacity:0.35} .calendaryear .caly_y h5 { width:80%; text-align:center; font-size:36px; line-height:100%; padding:25px 0;} .caly_m {padding:0 13px;/* background-color:#4b4d56; */ background-color: #000000; color:#ffffff; font-size:15px; text-align:center;} .caly_m>ul {position:relative;/* 241204 웹접근성 보완 조치 */ display:flex; flex-wrap:wrap;width:100%;} .caly_m>ul>li {float:left; width:7.69%; letter-spacing:-0.04em;} .caly_m>ul>li>a {display:block; background:url("../../images/sub/dreamdance/bar.gif") no-repeat left center; padding:16px 0; color: #fff;} .caly_m>ul>li:first-child>a, .caly_m>ul>li:first-child+li>a {background:none;} .caly_m>ul>li:hover, .caly_m>ul>li.on {background-color:#008FBE;} .caly_m>ul>li:hover>a, .caly_m>ul>li:hover+li>a, .caly_m>ul>li.on>a, .caly_m>ul>li.on+li>a {background:none;} .caly_m>ul>li.all {background:none;} .caly_m>ul>li.all span {border:2px solid #ffffff; padding:5px 9px; border-radius:20px; padding:1px 9px;} .caly_m>ul>li.all:hover span, .caly_m>ul>li.all.on span {border-color:#008FBE; color:#008FBE;} .caly_mdetail {padding:0 35px 0 27px; background:#f7f8fa;} .caly_mdetail>ul>li {overflow:hidden;} .caly_mdetail>ul>li>div {float:left;} .caly_mdetail>ul>li:first-child>div {padding-top:49px;} .caly_mdetail>ul>li:last-child>div {padding-bottom:72px;} .caly_mdetail .mdetail_month {padding-right:46px;} .caly_mdetail .mdetail_month p {background:#ffffff; border-radius:100%; width:100px; font-size:10px; color:#121212; letter-spacing:0; padding:20px 10px 21px 10px; word-break:keep-all; text-align:center; margin:27px 0;} .caly_mdetail .mdetail_month p .font_m {font-size:44px; letter-spacing:-0.054em; line-height:100%;} .caly_mdetail .mdetail_list {border-left:1px solid #dddfe1; width:calc(100% - 146px); min-height: 290px;} .caly_mdetail .mdetail_list.no_mdetail_list {display: table; padding-bottom: 72px; height: 290px;} .caly_mdetail .mdetail_list.no_mdetail_list p {display: table-cell; vertical-align: middle; text-align: center; font-size: .99rem; letter-spacing: -0.09em;} .caly_mdetail .mdetail_list.no_mdetail_list p > span {display: inline-block; font-weight: 400; background-image: url("../../images/common/dreamdance/footer_logo.png"); padding: 75px 25px 0 30px; color: #444; background-repeat: no-repeat; background-size: 100%;} .caly_mdetail .mdetail_list dl {margin-bottom:13px; overflow:hidden;} .caly_mdetail .mdetail_list dt,.caly_mdetail .mdetail_list dd {float:left; min-height:155px;} .caly_mdetail .mdetail_list dt {width:47px; height:47px; text-indent:-9999px; position:absolute; margin-left:-24px;} .caly_mdetail .mdetail_list dd {background:#ffffff; border:1px solid #c8c9cb; padding:30px 40px; width:calc(100% - 47px); word-break:keep-all; line-height:22px; float:right; position: relative;} .caly_mdetail .mdetail_list dd:hover {border-color:#575757;} .caly_mdetail .mdetail_list dd strong {font-size:18px; color:#121212; letter-spacing:-0.04em; display:block; margin-bottom:5px;} .caly_mdetail .mdetail_list dd:before {content: ''; display: inline-block; position: absolute; left: -12px; top: 70px; background: url("../../images/sub/dreamdance/box_arr.png") no-repeat; width: 12px; height: 15px;} .caly_mdetail .mdetail_list dd:hover:before { background-position: -12px 0;} .caly_mdetail .mdetail_list p {letter-spacing:0; color:#777777;} .caly_mdetail .mdetail_list dt.caly_type1 {background:url('https://www.arte.or.kr/images/comm/icon/ic_caly_type1.gif') no-repeat center;} .caly_mdetail .mdetail_list dt.caly_type2 {background:url('https://www.arte.or.kr/images/comm/icon/ic_caly_type2.gif') no-repeat center;} .caly_mdetail .mdetail_list dt.caly_type3 {background:url('https://www.arte.or.kr/images/comm/icon/ic_caly_type3.gif') no-repeat center;} .caly_mdetail .mdetail_list dt.caly_type4 {background: url('https://www.arte.or.kr/images/comm/icon/ic_caly_type4.gif') no-repeat center;} /* ---------- 반응형 ---------- */ /* 1400이상 PC*/ @media only screen and (min-width: 1400px) { /* 거점기관 현황*/ .organSituation .mapBox .mapWrap {padding: 4.5rem 3rem !important;} .organSituation .mapBox .mapImg {max-width: 547px;} .organSituation .mapBox .mapStatus {right: 7% !important;} } /* 1240이하 PC ~ 200이상 모바일*/ @media only screen and (max-width: 1240px) and (min-width: 200px) { /* 거점기관 현황*/ .organSituation .mapBox .mapWrap {height: 850px !important; padding: 3.5rem 3rem 3rem 3rem !important;} .organSituation .mapBox .mapImg {left: 50%; transform: translate(-50%, 0);} .organSituation .mapBox .mapStatus {position: inherit; top: 20px !important; right: 0 !important;} .organSituation .mapBox .mapStatus > div {border-bottom: none; border: 1px solid #c8c8c8;} .organSituation .mapBox .mapStatus > div .desc {display: flex; justify-content: space-between; flex-wrap: wrap;} .organSituation .mapBox .mapStatus > div .desc li+li {width: calc(100% / 2);} } /* 1024이하 PC*/ @media only all and (max-width: 1024px) { /*** 연간캘린더 ****/ .caly_mdetail {padding:0 35px 14px 27px;} .calendaryear .caly_y h5 {font-size:25px; padding:30px 0;} .caly_m>ul>li {width:25%;} .caly_m>ul>li>a {background:none; padding:9px 0;} .caly_mdetail .mdetail_month {width:100%; padding:0;} .caly_mdetail .mdetail_month p {margin:27px auto;} .caly_mdetail .mdetail_list {width:100%; border-left:0; min-height: 170px;} .caly_mdetail>ul>li:first-child>div {padding-top:0;} .caly_mdetail>ul>li:last-child>div {padding-bottom:0;} .caly_mdetail .mdetail_list dt {position:static; margin: 0; padding-right: 10px; background-position: left center !important; background-color: #f7f8fa !important;} .caly_mdetail .mdetail_list dd {width: calc(100% - 57px);} .caly_mdetail .mdetail_list dd:before {content: none;} .caly_mdetail .mdetail_list.no_mdetail_list {height: auto;} } /* 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, #008FBE, #93D500); border-radius: 15px 15px 0 0; text-align: center;} #lnb .lnbTitle:before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 121px; height: 108px; background: url("../../images/sub/dreamdance/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 35px 14px 5px; color: #000;} #lnb .lnbList > li > a.hoverUnderline .hoverItem {background-image: linear-gradient(to right, #008FBE 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: #008FBE; border: 1px solid #008FBE;} #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: #008FBE;} /* 노션링크*/ .notionLink {margin: -20px 0 0; border-radius: 0 10px 10px 10px; background: #5aba4a;} .notionLink a {color: #fff; display: block; text-align: center; padding: 25px 0;} .notionLink a span {padding-bottom: 3px; background-image: linear-gradient(to right, #fff 50%, transparent 50%) !important;} /* 서브이미지*/ #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;} /* 꿈의무용단이란*/ .visonMission .vTxt {font-size: 1.15rem;} /* ENGLISH*/ .english .conBoxSt01 {padding: 2rem 1.5rem;} /* 거점기관 현황*/ .organSituation .conBoxSt02 {padding: 3.7rem 7rem;} .organSituation .mapBox .mapStatus {right: 3%; top: 240px;} .organSituation .mapBox .mapImg .seoul {top: 12.58%; left: 28.57%;} .organSituation .mapBox .mapImg .gyeonggi {top: 18.72%; left: 34.72%;} .organSituation .mapBox .mapImg .incheon {top: 13.28%; left: 21.17%;} .organSituation .mapBox .mapImg .gangwon {top: 11.35%; left: 58.5%;} .organSituation .mapBox .mapImg .chungnam {top: 36%; left: 23.29%;} .organSituation .mapBox .mapImg .chungbuk {top: 30.9%; left: 43.36%;} .organSituation .mapBox .mapImg .jeonbuk {top: 51%; left: 28.18%;} .organSituation .mapBox .mapImg .jeonnam {top: 66%; left: 26.18%;} .organSituation .mapBox .mapImg .gwangju {top: 62%; left: 19.18%;} .organSituation .mapBox .mapImg .ulsan {top: 57.78%; left: 76.15%;} .organSituation .mapBox .mapImg .gyeongnam {top: 60.78%; left: 53.79%;} .organSituation .mapBox .mapImg .gyeongbuk {top: 38.64%; left: 67%;} .organSituation .mapBox .mapImg .daegu {top: 50.2%; left: 61%;} } /* 768이상 PC*/ @media only screen and (max-width: 768px) { /* 공통 */ #contentsWrap {width: 100%;} #contents > .inner {margin-top: 40px;} #contentsWrap .pageTitle{font-size: 2rem; padding: 12px 0 20px;} .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%; height: 100%; padding: 0 10px 20px;} .visonMission .withImg img {width: 100%; margin: 5px auto;} .visonMission .mT30 ul.conList li {padding: 0 0 20px 15px;} /* bi 및 브로슈어*/ .bi .conBoxSt01 .img img {width: 198px; height: auto;} .bi .biColor > li {width: 100%; padding: 110px 0 0;} /* 사업 연혁*/ .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;} /* ENGLISH*/ .english .plan ul {flex-flow: column;} .english .plan li {width: 100%; height: 100%; padding: 0 0 20px;} /* 거점기관 현황*/ .organSituation .mapBox {overflow: inherit;} .organSituation .mapBox .mapWrap {height: 640px !important; padding: 3rem 1.5rem 2rem 1.5rem !important; border-radius: 0;} .organSituation .mapBox .mapImg {width: 400px; max-height: 560px; margin: 0 auto; background-size: contain; left: 0; transform: none;} .organSituation .mapBox .mapImg p {background-size: 78%;} .organSituation .mapBox .mapImg p a {font-size: .8rem;} .organSituation .mapBox .mapImg p span {padding: 6px 4px;} .organSituation .mapBox .mapStatus > div .desc li {font-size: .9rem;} .organSituation .mapBox .mapStatus > div .desc li:last-child {padding: 0 0 0 15px;} } /* 640이상 PC*/ @media only screen and (max-width: 640px) { /* 공통*/ #contentsWrap .subcontent {margin-bottom: 5rem;} /* 사업 연혁*/ .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;} }