@charset "utf-8";
/*
	부천시립예술단 COMMON STYLE
    WRITER : Choi Byeo-ri
    Write Date : 2020. 07. 23.
	Last Modify Date : 2020. 09. 21.
*/

/* Layout */
body { padding-top:110px; }
#wrap { width:100%; max-width:1920px; min-width:320px; margin:0 auto; padding-right:80px; box-sizing:border-box; }

@media all and (max-width:960px) {
    body { padding-top:70px; }
}

/* gnb */
#header { overflow:hidden; position:fixed; top:0; width:100%; max-width:1920px; min-height:110px; box-sizing:border-box; z-index:8; }
/*#header.on,
#header.active { border-bottom:1px solid #eee; }*/
.headWrap { background-color:#fff; -webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out; }
.headWrap .logo { position:absolute; left:0; top:0; padding:39px 0 0 2.7%; }
.gnbWrap .gnb { margin:0 270px; }
.gnb .gnbList { font-size:0; letter-spacing:-4px; text-align:center; white-space:nowrap; -webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out; }
#header.on .gnbList:after { content:''; position:absolute; top:109px; left:0; width:100%; height:1px; background-color:#eee; }
#header.active .gnbList:after { content:''; position:absolute; top:110px; left:0; width:100%; height:1px; background-color:#eee; }
#header.active .gnbList:before { content:''; position:absolute; top:111px; left:0; width:100%; height:100%; background-color:#fff; }
.gnb .gnbList>li { position:relative; display:inline-block; min-height:110px; /*min-width:7em; padding:0 2.3%;*/ padding:0 3.7%; font-size:18px; vertical-align:top; letter-spacing:normal; white-space:normal; }
.gnb .gnbList>li>a { position:relative; display:block; /*padding:43px 50px 46px;*/ padding:43px 0 46px; color:#000; text-decoration:none; }
#header.active .gnb .gnbList>li.active>a { color:#5000bd; }
.gnb .gnbList>li>div { /*position:relative;*/ position:absolute; left:0; display:none; width:100%; padding:47px 0 73px; font-size:16px; z-index:1; }
/*.gnb .gnbList>li>div>ul { position:absolute; width:100%; }*/
.gnb .gnbList>li>div>ul>li { padding-top:15px; line-height:1.4; }
.gnb .gnbList>li>div>ul>li:first-child { padding-top:0; }
.gnb .gnbList>li>div>ul>li>a { display:block; color:#000; text-decoration:none; }
.gnb .gnbList>li>div>ul>li>a:hover,
.gnb .gnbList>li>div>ul>li>a:focus,
.gnb .gnbList>li>div>ul>li>a:active { font-weight:400; color:#5000bd; }
.gnb .gnbList>li>div>ul>li>a span { position:relative; display:inline-block; padding:0 2px 3px; }
.gnb .gnbList>li>div>ul>li>a:hover span:before,
.gnb .gnbList>li>div>ul>li>a:focus span:before,
.gnb .gnbList>li>div>ul>li>a:active span:before { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#5000bd; }
.headWrap .headUtil { position:absolute; right:0; top:0; padding:46px 2.8% 0 0; }
.headUtil>ul { font-size:0; letter-spacing:-4px; }
.headUtil>ul>li { display:inline-block; margin-left:20px; font-size:14px; font-weight:300; vertical-align:middle; letter-spacing:normal; }
.headUtil a { color:#333; }
.headUtil .btnMem>span>a { position:relative; display:inline-block; margin-left:8px; padding-left:11px; }
.headUtil .btnMem>span>a:before { content:''; position:absolute; top:2px; left:0; width:1px; height:13px; background-color:rgba(0,0,0,0.3); }
.headUtil .btnMem>span:first-child a { margin-left:0; padding-left:0; }
.headUtil .btnMem>span:first-child a:before { display:none; }

.headUtil .btnSiteMap { display:none; } /* 200918 - 사이트맵 버튼 삭제 */
.headUtil .btnSiteMap { width:80px; min-height:110px; background-color:#2a2c38; }
#header.active .headUtil .btnSiteMap { background-color:transparent; }
.headUtil .btnSiteMap a { position:relative; overflow:hidden; display:block; width:22px; height:16px; margin:47px auto; font-size:16px; text-indent:-999px; }
.headUtil .btnSiteMap a:before,
.headUtil .btnSiteMap a:after { content:''; position:absolute; width:100%; height:2px; background-color:#fff; }
.headUtil .btnSiteMap a:before { left:0; top:0; }
.headUtil .btnSiteMap a:after { right:0; bottom:0; }
.headUtil .btnSiteMap a span { display:block; position:absolute; top:50%; right:0; width:100%; height:2px; margin-top:-1px; background-color:#fff; visibility:visible; overflow:visible; }
#header.active .headUtil .btnSiteMap a:before,
#header.active .headUtil .btnSiteMap a:after { background-color:#000; }
#header.active .headUtil .btnSiteMap a span { background-color:#000; }
.headWrap .moMem,
.headWrap .moUtil,
.headWrap .moGnbClose { display:none; }
.headWrap .btnMoGnb { display:none; position:absolute; right:0; top:0; padding:24px 2.8% 0 0; }
.headWrap .btnMoGnb button { position:relative; overflow:hidden; width:24px; height:18px; font-size:16px; text-indent:-999px; }
.headWrap .btnMoGnb button:before,
.headWrap .btnMoGnb button:after { content:''; position:absolute; width:100%; height:2px; background-color:#000; }
.headWrap .btnMoGnb button:before { left:0; top:0; }
.headWrap .btnMoGnb button:after { right:0; bottom:0; }
.headWrap .btnMoGnb button span { display:block; position:absolute; top:50%; right:0; width:100%; height:2px; margin-top:-1px; visibility:visible; overflow:visible; background-color:#000; }

/* Quick Menu */
.sideNav { position:fixed; top:110px; right:50%; max-width:1920px; height:100%; margin-right:-960px; background-color:#000; z-index:8; }
#header.active + .sideNav { z-index:7; }
.sideNav>div { width:80px; text-align:center; }
.sideNav .quickMenu { margin-top:35px; }
.sideNav .quickMenu>li  }
.sideNav .quickMenu>li:first-child { }
.sideNav .quickMenu>li>a { display:block; padding-top:26px; font-size:14px; color:#d3d5d9; letter-spacing:-0.02em; }
.sideNav .quickMenu>li>a>span { display:block; padding-top:40px; background-position:top center; background-repeat:no-repeat; }
.sideNav .quickMenu>li.quick01>a>span { background-image:url(../images/common/icon_quick_menu01.png); }
.sideNav .quickMenu>li.quick02>a>span { background-image:url(../images/common/icon_quick_menu02.png); }
.sideNav .quickMenu>li.quick03>a>span { background-image:url(../images/common/icon_quick_menu03.png); }
.sideNav .quickMenu>li.quick04>a>span { background-image:url(../images/common/icon_quick_menu04.png); }
.sideNav .quickMenu>li.quick05>a>span { background-image:url(../images/common/icon_quick_menu05.png); }
.sideNav .snsList { margin:37px 0 5px; }
.sideNav .snsList>li { margin-top:1px; }
.sideNav .snsList>li>a { display:block; padding:16px 0; }
.sideNav .snsList>li>a img { max-width:24px; }
.sideNav .btnTop { margin-top:74px; }
.sideNav .btnTop button { width:100%; padding:11px 0; border-top:1px solid #262626; border-bottom:1px solid #262626; font-size:14px; color:#d3d5d9; }
.sideNav .btnTop button span { display:inline-block; padding:0 0 2px 20px; background:url(../images/common/btn_quick_top.png) left center no-repeat; }

/* footer */
#footer {  padding:55px 15px 100px; background-color:#2f2e46; color:#b5b5ba; }
#footer .footerWrap { position:relative; max-width:1200px; margin:0 auto; padding:0 220px 0 225px; box-sizing:border-box; }
.footerWrap a { color:#b5b5ba; }
.footerWrap .logo { position:absolute; top:5px; left:13px; }
.footerWrap .footMid { padding-left:11%; }
.footerWrap .linkList { margin-bottom:13px; font-size:0; letter-spacing:-4px; }
.footerWrap .linkList>li { position:relative; display:inline-block; margin-right:14px; padding-right:15px; font-size:16px; vertical-align:top; line-height:1.5; letter-spacing:normal; }
.footerWrap .linkList>li.last { margin-right:0; padding-right:0; }
.footerWrap .linkList>li:before { content:''; position:absolute; top:6px; right:0; width:1px; height:14px; background-color:#59586b; }
.footerWrap .linkList>li.last:before { display:none; }
.footerWrap .linkList>li>a { color:#fff; }
.footerWrap address { font-weight:300; font-size:14px; line-height:1.5; }
.footerWrap address>ul>li { position:relative; display:inline-block; margin-left:6px; }
.footerWrap address>ul>li:first-child { margin-left:0; }
.footerWrap .copyright { margin-top:4px; font-weight:300; font-size:14px; }
.footerWrap .familySite { position:absolute; top:5px; right:0; width:210px; font-weight:300; }
.familySite .siteBtn>a { position:relative; display:block; padding:14px 43px 15px 18px; border:1px solid #787787; text-decoration:none; }
.familySite .siteBtn>a:before { content:''; position:absolute; top:50%; right:18px; width:15px; height:9px; margin-top:-5px; background:url(../images/common/btn_family_site.png) center no-repeat; -webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out; }
.familySite .siteBtn.active>a:before { -webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg); }
.familySite .siteList { display:none; position:absolute; bottom:51px; left:0; width:100%; background-color:#fff; z-index:10; }
.familySite .siteList ul { border:1px solid #dedede; }
.familySite .siteList ul li { border-top:1px solid #dedede; }
.familySite .siteList ul li:first-child { margin-top:-1px; }
.familySite .siteList ul li a { display:block; padding:13px 18px; color:#777; }
.familySite .siteList ul li a:hover,
.familySite .siteList ul li a:focus {  }

@media all and (max-width:1940px) {
    .sideNav { right:0; margin-right:0; }
}
@media all and (max-width:1400px) {
    #wrap { padding-right:0; }
    .sideNav { display:none; }
    .headWrap .headUtil { padding-right:2.8%; }
    .headUtil .btnSiteMap { width:auto; background-color:transparent; }
    #header .headUtil .btnSiteMap a:before,
    #header .headUtil .btnSiteMap a:after { background-color:#000; }
    #header .headUtil .btnSiteMap a span { background-color:#000; }
}
@media all and (max-width:1240px) {
    .headWrap .logo { padding:37px 0 0 10px; }
    .gnbWrap .gnb { margin:0 150px 0 200px; }
    .gnb .gnbList>li { padding:0 3.5%; font-size:17px; }
    .gnb .gnbList>li>div { font-size:15px; }
    .headWrap .headUtil { padding-right:10px; }
    .headUtil>ul>li { font-size:13px; }
    /*.headUtil .btnMem { position:absolute; top:15px; right:10px; width:13em; text-align:right; }*/
    .headUtil .btnMem>span>a { margin-left:6px; padding-left:7px; }
    .headUtil .btnLang a { padding:6px 13px 7px; }
    .headUtil .btnSiteMap { margin-left:15px; }
}
@media all and (max-width:960px) {
    /* gnb */
    #header { position:absolute; min-height:auto; }
    .headWrap { min-height:70px; }
    body.gnbOpen #header { overflow:visible; }
    body.gnbOpen { overflow:hidden; }
    body.gnbOpen .headWrap:before { content:''; position:absolute; top:0; left:0; width:100%; height:10000%; background-color:#000; background-color:rgba(0,0,0,0.6); z-index:9; }
    .gnbWrap { overflow-y:auto; display:none; position:fixed; top:0; right:0; width:90%; max-width:260px; height:100%; background-color:#2f2e46; z-index:10; }
    .headWrap .logo { position:static; top:auto; left:auto; padding:18px 50px 0; text-align:center; }
    .gnb h2.blind { position:static; left:auto; width:auto; height:auto; overflow:visible; background-color:#5000bd; padding:21px 30px; font-size:18px; font-weight:400; color:#fff; }
    .gnbWrap .gnb { margin:0; padding-bottom:40px; background-color:#fff; }
    .gnb .gnbList>li { display:block; width:auto; min-height:auto; padding:0; border-bottom:1px solid #dedede; font-size:16px; text-align:left; }
    .gnb .gnbList>li>a { padding:16px 50px 16px 30px; color:#000; }
    .gnb .gnbList>li.sNav.navOpen>a { font-weight:500; color:#5000bd; }
    .gnb .gnbList>li.sNav>a:before { content:'메뉴 펼치기'; position:absolute; right:25px; top:50%; width:17px; height:9px; margin-top:-5px; background:url(../images/common/arrow_mo_gnb.png) center no-repeat; background-size:100% auto; text-indent:-999px; -webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out; }
    .gnb .gnbList>li.sNav.navOpen>a:before{ -webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg); }
    .gnb .gnbList>li>div { position:relative; padding:14px 35px 16px; background-color:#f7f7f7; border-top:1px solid #dedede; font-size:15px; }
    .gnb .gnbList>li>div>ul { position:static; width:auto; }
    .gnb .gnbList>li>div>ul>li { position:relative; padding:1px 0; }
    .gnb .gnbList>li>div>ul>li:before { content:''; position:absolute; top:15px; left:0; width:2px; height:2px; background-color:#333; }
    .gnb .gnbList>li>div>ul>li>a { position:relative; padding:6px 0 6px 10px; color:#333; }
    .gnb .gnbList>li>div>ul>li>a:hover,
    .gnb .gnbList>li>div>ul>li>a:focus,
    .gnb .gnbList>li>div>ul>li>a:active { letter-spacing:normal; }
    .gnb .gnbList>li>div>ul>li>a span { padding:0; }
    .headWrap .headUtil { display:none; }
    .headWrap .moMem { display:block; background-color:#3e028f; }
    .headWrap .moMem>ul { font-size:0; text-align:center; letter-spacing:-4px; }
    .headWrap .moMem>ul>li { position:relative; display:inline-block; width:33.33333%; font-size:14px; font-weight:300; vertical-align:top; letter-spacing:normal; }
    .headWrap .moMem>ul>li:before { content:''; position:absolute; top:50%; left:0; width:1px; height:12px; margin-top:-5px; background:#784eb1; }
    .headWrap .moMem>ul>li:first-child:before { display:none; }
    .headWrap .moMem>ul>li>a { display:block; padding:13px 0; color:#fff; }
    
    .headWrap .moUtil { display:block; max-width:280px; margin:0 auto; padding:30px 15px; color:#fff; }
    .headWrap .moUtil>div>p { margin-bottom:13px; font-size:15px; font-weight:300; }
    .headWrap .familySite { margin-bottom:25px; }
    .headWrap .familySite .siteBtn { position:relative; }
    .headWrap .familySite .siteBtn>a { padding:14px 40px 15px 13px; font-size:14px; font-weight:300; color:#fff; }
    .headWrap .familySite .siteBtn>a:before { right:16px; width:10px; height:5px; margin-top:-3px; background-image:url(../images/common/btn_family_site_mo.png); background-size:100% auto; }
    .headWrap .familySite .siteList { bottom:47px; }
    .headWrap .familySite .siteList ul li a { padding:10px 13px; font-size:14px; }
    .headWrap .sns>ul { margin-bottom:25px; font-size:0; letter-spacing:-4px; }
    .headWrap .sns>ul>li { display:inline-block; padding:2px; font-size:16px; vertical-align:top; letter-spacing:normal; box-sizing:border-box; }
    .headWrap .sns>ul>li>a { display:block; width:44px; height:44px; line-height:42px; margin:0 auto; background-color:#262538; border-radius:50%; text-align:center; }
    .headWrap .sns>ul>li>a>img { max-height:23px; margin-top:-4px; vertical-align:middle; }
    .headWrap .moGnbClose { display:block; position:absolute; top:22px; right:22px; }
    .headWrap .moGnbClose button { overflow:hidden; width:20px; height:20px; font-size:16px; text-indent:-999px; }
    .headWrap .moGnbClose button span { display:block; position:relative; left:0; top:50%; right:0; width:100%; height:1px; visibility:visible; overflow:visible; }
    .headWrap .moGnbClose button span:before,
    .headWrap .moGnbClose button span:after { content:''; position:absolute; width:100%; height:1px; background:#fff; }
    .headWrap .moGnbClose button span:before { left:0; top:0; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}
    .headWrap .moGnbClose button span:after { right:0; bottom:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg); }
    .headWrap .btnMoGnb { display:block; }
    
    /* footer */
    #footer {  padding:35px 10px 55px; }
    #footer .footerWrap { padding:0; text-align:center; }
    /*.footerWrap .logo { position:static; top:auto; left:auto; margin-bottom:18px; }
    .footerWrap .logo img { max-width:50%; }*/
    .footerWrap .logo { display:none; }
    .footerWrap .footMid { padding-left:0; }
    /*.footerWrap .linkList { display:none; }*/
    .footerWrap .linkList>li { font-size:15px; }
    .footerWrap address { font-size:13px; }
    .footerWrap .copyright { font-size:13px; }
    .footerWrap .familySite { display:none; }
}
@media all and (max-width:640px) {
    .footerWrap .linkList>li { font-size:13px; }
    .footerWrap address { font-size:12px; }
    .footerWrap .copyright { font-size:12px; }
}

/* 팝업 */
.popupWrap { display:none; position:fixed; top:0; width:100%; height:100%; z-index:80; }
.popupWrap.viewWrap { display:table; }
.popupWrap .popupArea { position:relative; display:table-cell; width:100%; text-align:center; vertical-align:middle; }
.popupArea .popup { display:none; max-width:400px; margin:0 auto; border:1px solid #462e2e; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.popupArea .popup.viewPop { display:inline-block; vertical-align:top; }
.popupWrap .popupBtm { line-height:22px; padding:6px; background:#444; color:#fff; font-size:14px; }
.popupWrap .popupBtm label { vertical-align:middle; }
.popupWrap .popupBtm input { -webkit-appearance:revert;-moz-appearance:revert; }
.popupWrap .popupBtm button { width:35px; height:21px; border:1px solid #dcdcdc; vertical-align:middle; color:#fff; }
@media all and (max-width:960px) {
    .popupWrap { position:absolute; left:0; top:0; padding-top:160px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
    .popupWrap.viewWrap,
    .popupWrap .popupArea { display:block; }
}