@charset "utf-8";
/*
	국립심포니오케스트라 COMMON STYLE
    WRITER : Kim Cheonhyun
	Last Modify Date : 2022. 11. 10.
*/

@import url('./base.css');

::placeholder { color:inherit; }
#wrap { position:relative; width:100%; padding-top:6.25em; }

/* headerWrap */
#headerWrap { position:fixed; left:0; right:0; top:0; width:100%; background:#fff; font-family:'Pretendard'; z-index:10; }
#headerWrap.active { height:580px; }
#headerWrap:after { content:''; position:absolute; left:0; top:6.250em; width:100%; height:1px; margin-top:-1px; background:#dcdcdc; }
#headerWrap .header { position:relative; max-width:1920px; margin:0 auto; z-index:9; }
.header .logo { position:absolute; left:3.125%; top:2rem; z-index:2; font-size: 1rem; }
.header .logo a { display:block; overflow:hidden; width:12.313rem; height:2.25rem; background:url(../images/common/logo.png) center no-repeat; background-size:contain; text-indent:-999px; }
.header .utilWrap { position:absolute; right:3.541666%; top:1.125em; z-index:2; }
.header .utilWrap>.util>li { display:inline-block; position:relative; margin:0 -2px; padding:1em; vertical-align:top; }
.header .utilWrap>.util>li.member { padding-left:1.25em; background:url(../images/common/icon_member.png) left center no-repeat; }
.header .utilWrap>.util button,
.header .utilWrap>.util a { color:#333; font-weight:400; }
.header .utilWrap>.util a:hover,
.header .utilWrap>.util a:focus { text-decoration:underline; }
.header .utilWrap>.util button { position:relative; height:2em; padding-right:.875em; }
.header .utilWrap>.util button:after { content:''; position:absolute; right:0; top:50%; width:0; height:0; border-top:.25em solid #333; border-left:.25em solid transparent; border-right:.25em solid transparent; }
.header .utilWrap>.util a { display:inline-block; line-height:2.1875em; }
.header .utilWrap .langList { display:none; position:absolute; right:0; top:2.8em; width:100%; padding:.25em 1em; border-radius:2em; background:#fff; border:1px solid #777; box-sizing:border-box; }
.header .utilWrap .langList a { display:block; }
.header .btnMoGnb { display:none; width:13.88888%; height:100%;}
.header .btnMoGnb button { overflow:hidden; width:100%; height:100%; text-indent:-999px; }
.header .btnMoGnb button i { display:block; position:absolute; left:50%; top:50%; width:1.75rem; height:2px; margin-left:-.875rem; background:#000; }
.header .btnMoGnb button i.top { margin-top:-.625rem; }
.header .btnMoGnb button i.mid { margin-top:-.0625rem; }
.header .btnMoGnb button i.btm { margin-top:.625rem; }
.header .gnb .util,
.header .gnb .moGnbClose { display:none; }
.header .gnbList { display:flex; justify-content:center; margin:0 auto; }
.header .gnbList>li { position: relative; padding-right:5.20834%; }
.header .gnbList>li>a { display:inline-block; position:relative; padding-top:2.222em; padding-bottom:2.222em; text-align:center; color:#010101; line-height:1.1; font-size:1.125em; font-weight:600; }
.header .gnbList>li>a:hover,
.header .gnbList>li>a:focus,
.header .gnbList>li>a:active { text-decoration:none; }
.header .gnbList>li>a:after { content:''; display:inline-block; position:absolute; left:0; bottom:0; width:0; height:2px; background:#1c3f37; transition:0.4s; }
.header .gnbList>li.hover>a:after { left:0; width:100%; }
.header .gnbList li .subMenu { display: none; position:absolute; left: 0; width: 100%; padding:2em 0 3em; box-sizing:border-box; }
.header .gnbList li .subMenu>ul { width:100%; letter-spacing:-.05em; }
.header .gnbList li .subMenu>ul>li { vertical-align:top; white-space:nowrap; }
.header .gnbList li .subMenu>ul>li>a { display:inline-block; padding:.5em 0 0.222em; color:#14503c; font-weight:500; font-size:1.125em; }
.header .gnbList li .subMenu ul ul li { margin:5px 0; }
.header .gnbList>li .subMenu>ul>li>a:hover,
.header .gnbList>li .subMenu>ul>li>a:focus { z-index:1; position:relative; color:#14503c; font-weight:600; }
.header .gnbList>li .subMenu>ul>li>a:hover::before,
.header .gnbList>li .subMenu>ul>li>a:focus::before { content:''; position:absolute; left:0; top:22px; width:100%; height:.375rem; background:#f5e1e1; z-index:-1; }
.header .gnbList li .subMenu div ul li a { display:inline-block; padding-left:0.5em; background:url(../images/common/bu_4x1.svg) no-repeat 0 10px; letter-spacing:-0.05em; }
.header .gnbList li .subMenu div ul li a:hover,
.header .gnbList li .subMenu div ul li a:focus { font-weight:600; }

.overlayBg {position: fixed; top: 0; left: 0; width: 100%; height: 0; background-color: rgba(000,000,000,0.6); z-index:7; font-size: 0; opacity: 0;}
.overlayBg.active {height: 100%; opacity: 1; -webkit-transition:opacity 0.4s; -o-transition:opacity 0.4s; -moz-transition:opacity 0.4s; transition:opacity 0.4s;}
.header .overlayBg { display:none; }

/* footerWrap */
#footerWrap { position:relative; clear:both; padding:0 1em 4.25em 1em; background:#152f29 url(../images/common/bg_footer.png) center top repeat-x; font-family:'Pretendard'; letter-spacing:-.025em; }
.footer { position:relative; max-width:1280px; margin:0 auto; text-align:center; z-index:5; }
.footer .fLogo { display:inline-block; padding:5.3125% 2rem 2rem; background:#152f29; }
.footer .footUtil { overflow:hidden; display:inline-block; }
.footer .footUtil li { display:inline-block; position:relative; margin:0 -2px; }
.footer .footUtil li::after { content:''; position:absolute; left:0; top:50%; width:1px; height:1rem; margin-top:-.5rem; background:#4e5d54; }
.footer .footUtil li:first-child::after { display:none; }
.footer .footUtil li a { display:block; padding:.5rem .75rem; color:#d3c6b6; font-size:1.125rem; }
.footer .footUtil li a:focus { outline-offset:-3px; }
.footer .addressInfo { display:inline-block; line-height:1.5333; color:#8a887c; font-size:.9375rem; }
.footer .addressInfo span { display:inline-block; margin:0 0.375em; }
.footer .snsList { display:block; max-width:15rem; margin:0 auto; padding-top:5.3125%; background:#152f29; }
.footer .snsList li { display:inline-block; }
.footer .snsList li a { display:block; overflow:hidden; width:1.4375rem; height:1.25rem; padding:.4em; background:center no-repeat; background-size:auto 1.4375rem; text-indent:-999px; }
.footer .snsList .sns1 a { background-image:url(../images/common/icon_sns1.png); }
.footer .snsList .sns2 a { background-image:url(../images/common/icon_sns2.png); }
.footer .snsList .sns3 a { background-image:url(../images/common/icon_sns3.png); }
.footer .snsList .sns4 a { background-image:url(../images/common/icon_sns4.png); }
.footer .snsList .sns5 a { background-image:url(../images/common/icon_sns5.png); }
.footer .snsList .sns6 a { background-image:url(../images/common/icon_sns6.png); }

@media only screen and (max-width:1500px) {
	.header .logo { left:1%; }
	.header .utilWrap { right:1%; }
	.header .utilWrap>.util>li { margin:0; padding:1em 0.250em; }
	.header .utilWrap .langList { width:fit-content; }
	.header .gnbWrap { padding-left: 6%; }
}
@media only screen and (max-width:1200px) {
    html { font-size:13px; }
	body { overflow-y:auto; min-width:320px; }
	#wrap { padding-top:0; }
    /* headerWrap */
    #headerWrap:after,
	.header .utilWrap>.util>li.member,
    .header .gnbWrap { display:none; }
    #wrap #headerWrap { overflow:visible; font-size:14px; font-size:clamp(11px, 3.0555vw, 14px); }
    #headerWrap { position:sticky; background:#fff; border-bottom:1px solid #000; }
	#headerWrap.active { height: auto; border-bottom:none; background:transparent; }
    #headerWrap .header { min-height:0; height:auto !important; }
    #headerWrap:after { display:none; }
    .header .logo { position:static; padding:1.636em 5.5% 1.273em; }
    #headerWrap .header .logo a { display:block; width:11.818em; height:2.818em; }
	.header .utilWrap { top:11px; right:calc(3.5% + 40px); font-size:1.182em; }
	.header .utilWrap>.util>li { margin:0; padding:0; }
	.header .utilWrap>.util button { height:auto; padding:1em; }
	.header .utilWrap .langList { width: 100%; }
    .header .btnMoGnb { display:block; position:absolute; right:3.5%; top:0; width:38px; }
    .header .btnMoGnb button { overflow:hidden; width:100%; height:100%; }
    .header .gnbWrap { overflow-y:auto; position:fixed; right:0; top:0; width:320px; height:100%; padding-right:0; padding:0; background:#fff; z-index:15; }
    .header .gnbList { display:block; padding:0;/*66/720*/ }
    .header .gnbList>li { display:block; margin-right:0; padding:0; border-top:1px solid #ededed; }
    .header .gnbList>li:first-child { border:none; }
    #headerWrap .header .gnbList>li>a { display:block; position:relative; padding:.25em 2.273rem; text-align:left; color:#000; line-height:3.385em; font-size:1.273em; font-weight:500; }
    #headerWrap .header .gnbList>li.open>a { color:#2558ff; font-weight:600; }
    .header .gnbList>li.opNav>a:after { content:''; position:absolute; left:auto; right:5.5%; top:50%; width:.5em; height:.5em; margin-top:-.5em; border-right:2px solid #7d7d7d; border-bottom:2px solid #7d7d7d; background:none; box-sizing:border-box; transform:rotate(45deg); transition:all .4s; }
    .header .gnbList>li.opNav.open>a:after { margin-top:0; transform:rotate(225deg); }
    .header .gnbList li .subMenu { display:none; position:static; width:100%; padding:0; border-top:1px solid #eee; background:#fafafa; text-align:left; font-size:1.182em; }
    .header .gnbList li .subMenu>ul>li { display:block; margin:0; }
    .header .gnbList li .subMenu>ul>li>a { display:block; padding:1em 1.923em; }
	.header .gnbList>li .subMenu>ul>li>a:hover,
	.header .gnbList>li .subMenu>ul>li>a:focus { color:#000; font-weight:normal; }
	.header .gnbList>li .subMenu>ul>li>a:hover::before,
	.header .gnbList>li .subMenu>ul>li>a:focus::before { content:none; transition:none; }
    .header .gnbList li .subMenu div { padding:0 2.273rem; }
	.header .gnbList li .subMenu ul ul { margin-top:-.5em; }
    .header .gnbList li .subMenu ul ul li { margin:0; }
    .header .gnbList li .subMenu ul ul li a { display:block; padding:0.385em 0 0.385em 10px; background:url(../images/sub/bu_6x1.svg) no-repeat 0 50%; background-size:4px auto; color:#000; }
    .header .gnb .util { display:block; padding:0 12px; background:#1c3f37; }
    .header .gnb .util li { display:inline-block; position:relative; }
    .header .gnb .util li::after { content:''; position:absolute; left:0; top:50%; width:1px; height:0.909em; margin-top:-0.455em; background:#fff; }
    .header .gnb .util li:first-child::after { display:none; }
    .header .gnb .util li a { display:block; padding:1.2rem; color:#fff; font-size:1.091em; }
    .header .gnb .moGnbClose { display:block; position:absolute; right:0; top:0; margin:3.4% 3%; }
    .header .gnb .moGnbClose button { overflow:hidden; position:relative; width:1.5em; height:1.5em; margin-top:-.25em; font-size:1.375em; text-indent:-999px; }
    .header .gnb .moGnbClose button::before,
    .header .gnb .moGnbClose button::after { content:''; position:absolute; left:50%; top:50%; width:1em; height:2px; margin-top:-1px; margin-left:-.5em; background:#fff; margin-top:-1px; }
    .header .gnb .moGnbClose button::before { transform:rotate(45deg); }
    .header .gnb .moGnbClose button::after { transform:rotate(135deg); }
    /* footerWrap */
    #footerWrap { position:relative; clear:both; padding:3.455em 6%; }
	.footer .fLogo { margin-bottom:0.727em; padding:0; }
	.footer .fLogo img { max-width:16.000em; }
	.footer .footUtil li a { font-size:0.909em; }
	.footer .addressInfo address span:nth-of-type(1) { display:block; }
	.footer .copyright { margin-top:1em; }
}
@media only screen and (max-width:720px) {
    html { font-size:12px; }
}
@media only screen and (max-width:480px) {
    html { font-size:11px; }
}
/* 프린트 설정 */
@media print {
	#headerWrap,
	#footerWrap {display: none;}
}

#lblAreaLoding {position:fixed;top:0px;left:0px;z-index:100;width:100%;height:100%;background: rgba(49, 49, 49, 0.7) url(/resourceCms/images/common/loading.gif) center no-repeat;background-size: 110px auto;}