@charset "utf-8";
/* CSS Document */
@import url("../font/SUIT.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
	font-family: 'spo';
	src: url('../font/spo.eot?92467710');
	src: url('../font/spo.eot?92467710#iefix') format('embedded-opentype'),
	url('../font/spo.woff2?92467710') format('woff2'),
	url('../font/spo.woff?92467710') format('woff'),
	url('../font/spo.ttf?92467710') format('truetype'),
	url('../font/spo.svg?92467710#spo') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* root 정의
-------------------------------------------------------------- */
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;overflow-wrap:break-word;word-break:break-word;tab-size:4}
:root {
	--area-width: 1440px;
	--font-family:'Roboto','SUIT',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕', sans-serif;
	--main-color: #F59B15; --sub-color-amber: #EF6F38; --sub-color-brown: #8B6252; --sub-color-purple: #B360E2; --black-color: #000; --gray-900-color: #222222; --gray-800-color: #424242; --gray-700-color: #616161; --gray-600-color: #757575; --gray-500-color: #949494; --gray-400-color: #BDBDBD; --gray-300-color: #E0E0E0; --gray-200-color: #EEEEEE; --gray-100-color: #F5F5F5; --gray-50-color: #FAFAFA; --white-color: #fff;
	--radius-SS:2px;--radius-S:4px;
}
/*  RESET
-------------------------------------------------------------- */
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;vertical-align:baseline;font-size:inherit;box-sizing:border-box; line-height: 1.447}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main{display:block}
*, *:after, *:before{ box-sizing: border-box; border: none; list-style: none;font-style:normal;}
a, a:hover, a:visited, a:active{ text-decoration:none; color: var(--black-color)}
a, button, select, input, textarea,label {-webkit-tap-highlight-color:rgba(0,0,0,.1)}
img{vertical-align:top}
table{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0}
table caption{overflow:hidden;position:absolute;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px)}
input, select, textarea, button,optgroup{vertical-align:middle;margin:0;padding:0;font-family:inherit;box-sizing:border-box;border-radius:0; font-size: 1rem }
button{border:0 none;background-color:transparent;cursor:pointer;box-sizing:border-box; color: var(--black-color)}
button, select{-webkit-appearance:none;appearance:none;text-transform:none}
select::-ms-expand{display:none}
input:disabled, textarea:disabled{opacity:1;-webkit-text-fill-color:inherit}
input[type="number"]{-webkit-appearance:none;appearance:none;box-shadow:none}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0; height: auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input::-ms-clear, input::-ms-reveal{display:none;width:0;height:0}
input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration{display:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
button, [type="button"], [type="reset"], [type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:not([disabled]):-webkit-autofill, input:not([disabled]):-webkit-autofill:hover, input:not([disabled]):-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:not([disabled]):-webkit-autofill, textarea:not([disabled]):-webkit-autofill:hover, textarea:not([disabled]):-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:not([disabled]):-webkit-autofill, select:not([disabled]):-webkit-autofill:hover, select:not([disabled]):-webkit-autofill:focus {-webkit-box-shadow: 0 0 0 1000px white inset !important;transition: background-color 5000s ease-in-out 0s;}
input[disabled]:-internal-autofill-selected, input[disabled]:-webkit-autofill, input[disabled]:-webkit-autofill:hover, input[disabled]:-webkit-autofill:focus, input[readonly]:-internal-autofill-selected, input[readonly]:-webkit-autofill, input[readonly]:-webkit-autofill:hover, input[readonly]:-webkit-autofill:focus, textarea[disabled]:-internal-autofill-selected, textarea[disabled]:-webkit-autofill, textarea[disabled]:-webkit-autofill:hover, textarea[disabled]:-webkit-autofill:focus, textarea[readonly]:-internal-autofill-selected, textarea[readonly]:-webkit-autofill, textarea[readonly]:-webkit-autofill:hover, textarea[readonly]:-webkit-autofill:focus, select[disabled]:-internal-autofill-selected, select[disabled]:-webkit-autofill, select[disabled]:-webkit-autofill:hover, select[disabled]:-webkit-autofill:focus, select[readonly]:-internal-autofill-selected, select[readonly]:-webkit-autofill, select[readonly]:-webkit-autofill:hover, select[readonly]:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0 1000px #f8f8f8 inset !important;}
input:-internal-autofill-selected {	background-color: transparent;}
textarea{overflow:auto; line-height: 1.447}
abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
progress{vertical-align:baseline}
[hidden], template, hr{display:none !important}

::-webkit-input-placeholder {color: var(--gray-300-color);}
:-moz-placeholder {color:var(--gray-300-color);}
::-moz-placeholder {color: var(--gray-300-color);}
:-ms-input-placeholder {color:var(--gray-300-color);}
::-ms-input-placeholder {color:var(--gray-300-color);}
::placeholder {color: var(--gray-300-color);}


/* old
-------------------------------------------------------------- */
.blind, .hidden,.soundOnly,*:not(html) .sr,.sr-only{visibility:hidden;overflow:hidden;position:absolute;width:0px;height:0px;font-size:0;line-height:0 !important; margin: 0 !important; padding: 0 !important;clip: rect(1px 1px 1px 1px); left: 0; top: 0; z-index: -1; }
.flex{ display: flex}
.cmt {font-size: 0.95rem;font-weight: 400;display: inline-block;white-space: nowrap;}
.al{text-align:left !important;}
.ar{text-align:right !important;}
.ac{text-align:center !important;}
.vat{vertical-align:top !important;}
.vam{vertical-align:middle !important;}
.db{display:block !important;}
.dib{display:inline-block !important;}
.clearfix:after{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:block;}
.dotdot{ display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.fl{float: left !important}
.fr{float: right !important}
.web_only{ display: block}
.mobile_only{display: none}
@media only screen and (max-width: 767px){
	.web_only{ display: none}
	.mobile_only{display: block}
}
/* width,height */
.h50{height: 50px}.h100{height: 100px}.h150{height: 150px}.h200{height: 200px}.h300{height: 300px}
.max{width:100%;}.half{width:50%;}
.w40{width:40px !important; min-width: auto !important; } .w50{width:50px;} .w70{width:70px;} .w100{width:100px;} .w138{width:138px;} .w140{width:140px !important;} .w150{width:150px;} .w200{width:200px !important;} .w240{width:240px;} .w270{width:270px;} .w300{width:300px;} .w350{width:350px;} .w400{width:400px;}.w520{width:520px;}

/* padding */
.pdt0{padding-top:0px !important;}.pdt5{padding-top:5px !important;}.pdt10{padding-top:10px !important;}.pdt15{padding-top:15px !important;}.pdt20{padding-top:20px !important;}.pdb0{padding-bottom:0px !important;}.pdb5{padding-bottom:5px !important;}.pdb10{padding-bottom:10px !important;}.pdb15{padding-bottom:15px !important;}.pdb20{padding-bottom:20px !important;}.pdr40{padding-right:40px !important;}.pdl20{padding-left:20px !important;}

/* margin */
.mgt0{margin-top:0px !important;}.mgt5{margin-top:5px !important;}.mgt10{margin-top:10px !important;}.mgt15{margin-top:15px !important;}.mgt20{margin-top:20px !important;}.mgt30{margin-top:30px !important;}.mgt40{margin-top:40px !important;}.mgt45{margin-top:45px !important;}.mgt50{margin-top:50px !important;}.mgb0{margin-bottom:0px !important;}.mgb5{margin-bottom:5px !important;}.mgb10{margin-bottom:10px !important;}.mgb15{margin-bottom:15px !important;}.mgb20{margin-bottom:20px !important;}.mgl0{margin-left:0px !important;}.mgl5{margin-left:5px !important;}.mgl10{margin-left:10px !important;}.mgl15{margin-left:15px !important;}.mgl20{margin-left:20px !important;}.mgl40{margin-left:40px !important;}.mgl70{margin-left:70px !important;}.mgr0{margin-right:0px !important;}.mgr5{margin-right:5px !important;}.mgr10{margin-right:10px !important;}.mgr15{margin-right:15px !important;}.mgr20{margin-right:20px !important;}.mgb10{margin-bottom:10px;}

/* table */
table{width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;letter-spacing:-0.16px;text-align:center;}
table:not(.rowtable){border-right:1px solid var(--gray-300-color);border-top:1px solid var(--gray-300-color);}
table:not(.rowtable) th, table:not(.rowtable) td{padding:12px 16px;border-bottom:1px solid var(--gray-300-color);vertical-align:middle;border-left:1px solid var(--gray-300-color);}
table th{font-weight:600;text-align:center; vertical-align: middle}
table td{text-align:left; vertical-align: middle}
*:focus{ box-sizing:border-box; outline: dashed 1px #EF6F38 !important;   outline-offset: 1px;}

h1.blind{ display: none}

@media only screen and (max-width: 1023px){
	table{ table-layout: auto}
	colgroup{ display: none}
}


/*@media screen and (-webkit-min-device-pixel-ratio:0) { .mobile select,  .mobile textarea,  .mobile input {font-size: 16px !important;}
    .mobile input::-webkit-input-placeholder {font-size:1rem !important;}
}*/

/* brand
-------------------------------------------------------------- */

@media only screen and (min-width: 1024px){
	html,body{ font-size:16px;}
	*{font-family:'Roboto','SUIT',AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕', sans-serif;}
	::-webkit-scrollbar {width:12px;height:12px}
	::-webkit-scrollbar-thumb {background:#888; border-radius: 12px}
	::-webkit-scrollbar-track {background:#ddd}
	html{ overflow: hidden; overflow-y: auto}
}
@media only screen and (max-width: 1023px){
	*{/*font-family: 'Roboto', ,AppleSDGothicNeo-Regular,"Noto Sans","Noto Sans KR","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;*/
		/*font-family: Arial,sans-serif,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo";*/
		font-variant-ligatures: none;
		-webkit-font-variant-ligatures: none;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-size: 16px;}
}
@media (min-width: 768px) and (max-width: 1023px) {html, body{ } }
@media only screen and (max-width: 767px){html,body{  } }
@media only screen and (max-width: 340px){html,body{font-size: 14px  } }

html,body{ margin: 0; padding: 0; width: 100%; height: 100%; color: #000;}
.wrap{ position: relative;}

#allContent {width: 100%; height: 100%; }
#content {clear: both; float: none; min-height: calc(100vh - 323px); background: var(--white-color); margin: 0 auto;max-width: 1520px; margin: 0 auto; padding: 0 40px; width: 100%}
/***************
* icon
***************/

.seoul-logo {background: url("../img/logo/seoul_logo.svg") no-repeat 50% 50%;display: block;}
.sns-insta, .insta{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'%3E%3Cpath fill='%23757575' d='M14.008 2.522c3.743 0 4.186.016 5.658.082 1.368.06 2.107.29 2.6.481a4.332 4.332 0 0 1 1.608 1.045c.493.492.794.957 1.045 1.608.192.492.422 1.236.482 2.598.066 1.477.082 1.92.082 5.656 0 3.741-.017 4.184-.082 5.656-.06 1.367-.29 2.105-.482 2.598a4.33 4.33 0 0 1-1.045 1.608 4.307 4.307 0 0 1-1.609 1.045c-.492.191-1.236.42-2.599.481-1.477.066-1.92.082-5.658.082-3.743 0-4.186-.016-5.658-.082-1.368-.06-2.106-.29-2.599-.481a4.332 4.332 0 0 1-1.609-1.045 4.307 4.307 0 0 1-1.045-1.608c-.191-.492-.421-1.236-.481-2.598-.066-1.477-.082-1.92-.082-5.656 0-3.742.016-4.185.082-5.656.06-1.367.29-2.106.481-2.598A4.33 4.33 0 0 1 4.142 4.13a4.309 4.309 0 0 1 1.609-1.045c.492-.191 1.237-.421 2.6-.481 1.471-.066 1.914-.082 5.657-.082Zm0-2.522C10.205 0 9.73.016 8.235.082 6.747.148 5.724.388 4.837.733a6.837 6.837 0 0 0-2.484 1.619A6.86 6.86 0 0 0 .733 4.83C.39 5.72.148 6.739.083 8.227.015 9.725 0 10.2 0 14.003c0 3.801.016 4.277.082 5.77.066 1.488.307 2.511.651 3.397a6.834 6.834 0 0 0 1.62 2.483 6.846 6.846 0 0 0 2.479 1.614c.892.345 1.91.585 3.398.651 1.494.066 1.97.082 5.773.082s4.279-.016 5.773-.082c1.488-.066 2.511-.306 3.398-.651a6.846 6.846 0 0 0 2.479-1.614 6.844 6.844 0 0 0 1.614-2.477c.345-.892.585-1.91.65-3.397.067-1.493.083-1.97.083-5.77 0-3.802-.016-4.278-.082-5.771-.066-1.488-.306-2.511-.651-3.397a6.56 6.56 0 0 0-1.604-2.489A6.847 6.847 0 0 0 23.185.738c-.892-.344-1.91-.585-3.398-.65C18.287.016 17.81 0 14.008 0Z'/%3E%3Cpath fill='%23757575' d='M14.01 6.809A7.196 7.196 0 0 0 6.816 14a7.196 7.196 0 0 0 14.391 0 7.196 7.196 0 0 0-7.195-7.192Zm0 11.858a4.667 4.667 0 0 1-4.667-4.666 4.667 4.667 0 0 1 9.335 0 4.667 4.667 0 0 1-4.667 4.666ZM23.168 6.523a1.68 1.68 0 1 1-3.36-.002 1.68 1.68 0 0 1 3.36.002Z'/%3E%3C/svg%3E") no-repeat 50% 50%;display: block;}
.sns-facebook, .facebook{	background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_65_5390)'%3E%3Cpath d='M28 14C28 6.26801 21.732 0 14 0C6.26801 0 0 6.26801 0 14C0 20.9877 5.11957 26.7797 11.8125 27.8299V18.0469H8.25781V14H11.8125V10.9156C11.8125 7.40688 13.9027 5.46875 17.1005 5.46875C18.6318 5.46875 20.2344 5.74219 20.2344 5.74219V9.1875H18.4691C16.73 9.1875 16.1875 10.2668 16.1875 11.375V14H20.0703L19.4496 18.0469H16.1875V27.8299C22.8804 26.7797 28 20.9877 28 14Z' fill='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_65_5390'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
.sns-youtude, .youtude{	background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.7222 8.40384C27.7222 8.40384 27.4488 6.47411 26.607 5.62678C25.541 4.51158 24.3492 4.50612 23.8026 4.44052C19.8885 4.15625 14.0118 4.15625 14.0118 4.15625H14.0009C14.0009 4.15625 8.12422 4.15625 4.2101 4.44052C3.66344 4.50612 2.47171 4.51158 1.40571 5.62678C0.56385 6.47411 0.295984 8.40384 0.295984 8.40384C0.295984 8.40384 0.0117188 10.6725 0.0117188 12.9357V15.0567C0.0117188 17.3199 0.290518 19.5886 0.290518 19.5886C0.290518 19.5886 0.56385 21.5183 1.40025 22.3657C2.46624 23.4809 3.86571 23.4426 4.4889 23.5628C6.73023 23.776 14.0063 23.8416 14.0063 23.8416C14.0063 23.8416 19.8885 23.8307 23.8026 23.5519C24.3492 23.4863 25.541 23.4809 26.607 22.3657C27.4488 21.5183 27.7222 19.5886 27.7222 19.5886C27.7222 19.5886 28.001 17.3254 28.001 15.0567V12.9357C28.001 10.6725 27.7222 8.40384 27.7222 8.40384ZM11.1145 17.6315V9.76503L18.6749 13.7119L11.1145 17.6315Z' fill='%23757575'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;	display: block;}
.sns-kakao, .kakao {background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0C6.27628 0 0 5.38462 0 12.0175C0.133797 16.2885 2.56646 20.1556 6.36142 22.0892L5.04779 28L11.3606 23.8269C12.2363 23.9738 13.1121 24.0472 14 24.0472C21.7237 24.0472 28 18.6626 28 12.0297C28 5.39685 21.7359 0.012238 14 0.012238' fill='%23757575'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
	display: block;}
.sns-x, .x {background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5325 15.2269L0.532126 26.6418H4.96219L12.6168 17.8813L19.3618 26.6436L28 26.5965L17.048 12.114L26.3942 1.40812L22.0353 1.35938L14.9755 9.40514L8.93533 1.37251L0 1.36282L10.5325 15.2269ZM22.7684 24.0142L20.5328 24.0072L5.17394 3.89977H7.57861L22.7684 24.0142Z' fill='%23757575'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
.sns-blog, .blog {	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='28' fill='none'%3E%3Cpath fill='%23757575' fill-rule='evenodd' d='M24.203 1.578H5.71a4.762 4.762 0 0 0-4.75 4.75v11.494c0 2.618 2.142 4.75 4.75 4.75h6.53l1.124 1.942 1.107 1.916c.198.35.701.35.908 0l1.106-1.916 1.125-1.943h6.602c2.617 0 4.749-2.14 4.749-4.749V6.336a4.772 4.772 0 0 0-4.758-4.758Zm-7.956 8.418c-1.43 0-2.59 1.142-2.59 2.554 0 1.413 1.16 2.555 2.59 2.555s2.59-1.142 2.59-2.555c0-1.412-1.151-2.554-2.59-2.554Zm0 3.778a1.234 1.234 0 0 1-1.242-1.223c0-.675.558-1.224 1.242-1.224.683 0 1.24.549 1.24 1.223 0 .675-.548 1.224-1.24 1.224Zm-9.671-3.195a2.2 2.2 0 0 1 1.484-.585c1.295 0 2.33 1.151 2.33 2.563 0 1.412-1.044 2.555-2.33 2.555-.567 0-1.08-.225-1.484-.585v.459h-1.44V8.465h1.44v2.114Zm.009 2.473c.198.459.656.774 1.187.774a1.28 1.28 0 0 0 1.295-1.278 1.28 1.28 0 0 0-1.295-1.277c-.53 0-.99.315-1.187.774a1.178 1.178 0 0 0-.108.503c0 .18.045.351.108.504Zm16.74-2.953v.405A2.357 2.357 0 0 0 21.877 10c-1.322 0-2.393 1.106-2.393 2.464 0 1.359 1.07 2.465 2.393 2.465.549 0 1.052-.189 1.448-.504v.684s-.144.675-1.151.675v1.268s1.088.126 2.06-.846c0 0 .45-.476.548-1.106v-5.001h-1.457Zm-1.178 3.616c-.729 0-1.313-.567-1.313-1.26 0-.692.593-1.259 1.313-1.259.512 0 .962.288 1.178.702.09.17.135.36.135.558 0 .197-.054.395-.135.557a1.313 1.313 0 0 1-1.178.702Zm-11.6-4.066V8.345s.953-.126 1.799.872c0 0 .386.486.476 1.134v4.641h-1.484v-4.605c-.125-.648-.791-.738-.791-.738Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat 50% 50%;	display: block;}
.kakao_s{background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.3583 13.8027C20.3583 13.8251 20.3471 13.8475 20.3429 13.8713C20.2155 20.1069 17.4071 25.3975 13.4661 27.5871L9.05609 22.7067C11.4305 20.9959 13.2981 18.1063 14.2641 14.5937H8.34489C7.95569 14.5937 7.64209 14.2395 7.64209 13.8013V1.20549C7.64209 0.768686 7.95569 0.413086 8.34489 0.413086H19.6555C20.0447 0.413086 20.3583 0.768686 20.3583 1.20549V13.8027Z' fill='%23757575'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;	display: block;}
.band{background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_974_14168)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9999 5.9006C13.0933 5.9006 12.2133 6.01793 11.3733 6.23927V4.3686V4.1446C11.3733 4.0966 11.3679 4.0486 11.3586 4.00193C11.1919 1.70193 9.4626 -0.000732422 7.3546 -0.000732422C5.24527 -0.000732422 3.51727 1.70193 3.3506 4.00193C3.34127 4.0486 3.33594 11.8646 3.33594 11.8646V16.9513C3.33594 16.9873 3.33727 17.0219 3.33727 17.0579C3.39194 23.1113 8.14394 28.0006 13.9999 28.0006C19.8893 28.0006 24.6639 23.0539 24.6639 16.9513C24.6639 10.8473 19.8893 5.9006 13.9999 5.9006ZM13.9999 26.3033C9.0146 26.3033 4.9746 22.1153 4.9746 16.9513V4.2246C4.9746 2.84993 6.03994 1.7366 7.3546 1.7366C8.66927 1.7366 9.7346 2.84993 9.7346 4.2246L9.7306 16.8393C9.7306 19.2846 11.6386 21.3806 13.9999 21.3806C16.3599 21.3806 18.2733 19.3966 18.2733 16.9513C18.2733 14.5046 16.3599 12.5219 13.9999 12.5219C13.0093 12.5219 12.0986 12.8713 11.3733 13.4579V11.5619C12.1626 11.1486 13.0546 10.9139 13.9999 10.9139C17.2173 10.9139 19.8253 13.6166 19.8253 16.9513C19.8253 20.2846 17.2173 22.9873 13.9999 22.9873C10.7813 22.9873 8.1746 20.2846 8.1746 16.9513V4.1446C8.1746 3.7286 7.8066 3.33393 7.3546 3.33393C6.9026 3.33393 6.53594 3.7286 6.53594 4.1446V16.9513C6.53594 17.1446 6.54527 17.3366 6.5586 17.5273C6.84394 21.5286 10.0653 24.6859 13.9999 24.6859C18.1213 24.6859 21.4639 21.2219 21.4639 16.9513C21.4639 12.6793 18.1213 9.2166 13.9999 9.2166C13.0759 9.2166 12.1906 9.39127 11.3733 9.70993V8.0006C12.2053 7.73927 13.0866 7.59793 13.9999 7.59793C18.9839 7.59793 23.0253 11.7846 23.0253 16.9513C23.0253 22.1153 18.9839 26.3033 13.9999 26.3033ZM11.3733 16.9513C11.3733 15.4473 12.5493 14.2286 13.9999 14.2286C15.4493 14.2286 16.6253 15.4473 16.6253 16.9513C16.6253 18.4539 15.4493 19.6713 13.9999 19.6713C12.5493 19.6713 11.3733 18.4539 11.3733 16.9513Z' fill='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_974_14168'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") no-repeat 50% 50%;	display: block;}

.ico-search,.btn_search,.btn_sch {background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22.6668C18.7865 22.6668 22.6667 18.7866 22.6667 14.0002C22.6667 9.21369 18.7865 5.3335 14 5.3335C9.21357 5.3335 5.33337 9.21369 5.33337 14.0002C5.33337 18.7866 9.21357 22.6668 14 22.6668Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M25.9596 27.3738C26.3501 27.7643 26.9832 27.7643 27.3738 27.3738C27.7643 26.9832 27.7643 26.3501 27.3738 25.9596L25.9596 27.3738ZM19.2929 20.7071L25.9596 27.3738L27.3738 25.9596L20.7071 19.2929L19.2929 20.7071Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;	display: block;}
.ico-login {background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='16' cy='9.3335' rx='4' ry='4' stroke='black' stroke-width='2'/%3E%3Cpath d='M5.33337 22.6667C5.33337 20.4576 7.12424 18.6667 9.33337 18.6667H22.6667C24.8758 18.6667 26.6667 20.4576 26.6667 22.6667V26.6667H5.33337V22.6667Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
	display: block;}
.ico-calendar {	background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.6667 9.3335H5.33337V26.6668H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26.6667 9.3335H5.33337V16.0002H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.33337 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6666 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;	display: block;}
.ico-menu {	background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 7V5H4V7H20ZM20 11V13H4V11H20ZM20 17V19H4V17H20Z' fill='%23424242'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
	display: block;}
.ico-home {	background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12L13 5L21 12' stroke='%23949494' stroke-width='1.5'/%3E%3Cpath d='M7 10V19H19V10' stroke='%23949494' stroke-width='1.5'/%3E%3Cpath d='M13 19L13 14' stroke='%23949494' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
.ico-reserve {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 6.55556H6V19H18.4444V12M12.6111 12.3889L20 5M20 5H15.3333M20 5V9.66667' stroke='%23949494' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
	display: block;}
.ico-heart {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4934 20C12.3746 19.8931 12.2413 19.7729 12.0956 19.6409C11.4708 19.0753 10.6189 18.2964 9.7099 17.4428C7.86762 15.7127 5.86782 13.7465 4.99514 12.6079C3.45019 10.5922 3.71749 7.74403 5.70394 6.02316C7.60566 4.37569 10.1654 4.79954 11.7757 6.70834L12.4934 7.55907L13.2111 6.70834C14.8143 4.80798 17.3406 4.38651 19.2927 6.03156C21.2974 7.72093 21.5449 10.5813 19.9916 12.6079C19.119 13.7465 17.1192 15.7127 15.2769 17.4428C14.3679 18.2964 13.516 19.0753 12.8912 19.6409C12.7455 19.7729 12.6121 19.8931 12.4934 20Z' stroke='%23949494' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;	display: block;}
.ico-share {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.5' cy='12.5' r='2.5' stroke='%23949494' stroke-width='1.5'/%3E%3Ccircle cx='17.5' cy='6.5' r='2.5' stroke='%23949494' stroke-width='1.5'/%3E%3Ccircle cx='17.5' cy='18.5' r='2.5' stroke='%23949494' stroke-width='1.5'/%3E%3Cpath d='M9.5 13.5L15 17' stroke='%23949494' stroke-width='1.5'/%3E%3Cpath d='M9.5 11.5L15 8' stroke='%23949494' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
.ico-go {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6L20 12L14 18' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M20 12H5' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;	display: block;}
.ico-ticket {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.25 9.0625H21.1364C19.5205 9.0625 18.2273 10.3869 18.2273 12C18.2273 13.6131 19.5205 14.9375 21.1364 14.9375H21.25V18.25H3.75V14.9375H3.86364C5.4795 14.9375 6.77273 13.6131 6.77273 12C6.77273 10.3869 5.4795 9.0625 3.86364 9.0625H3.75V5.75H21.25V9.0625Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5V8' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M15 10V13' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M15 15V18' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
.ico-more {
	background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12.5H6' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M12.5 19L12.5 6' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
	display: block;}
.ico-arrowleft-small { background: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.82157 3.17868L10.1787 8.0001L4.82157 12.8215' stroke='%23757575' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
.ico-arrowdown-small { background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9L12.5 15L18 9' stroke='%23949494' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
.ico-arrowright { background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L19 14L9 23' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
.ico-arrowleft { background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5L9 14L19 23' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
.ico-arrowdown { background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L14 19L23 9' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
.ico-arrowup { background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19L14 9L23 19' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}
.ico-stop { background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5V23' stroke='black' stroke-width='2'/%3E%3Cpath d='M19 5V23' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; display: block;}

/*클래스명 : *-wh -> 흰색 아이콘*/
.logo-wh {background: url("../img/logo/logo-wh.svg") no-repeat 50% 50%;display: block;}
.ico-reserve-wh {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 6.55556H6V19H18.4444V12M12.6111 12.3889L20 5M20 5H15.3333M20 5V9.66667' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
.ico-go-wh {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6L20 12L14 18' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M20 12H5' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
.ico-ticket-wh {background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.25 9.0625H21.1364C19.5205 9.0625 18.2273 10.3869 18.2273 12C18.2273 13.6131 19.5205 14.9375 21.1364 14.9375H21.25V18.25H3.75V14.9375H3.86364C5.4795 14.9375 6.77273 13.6131 6.77273 12C6.77273 10.3869 5.4795 9.0625 3.86364 9.0625H3.75V5.75H21.25V9.0625Z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 5V8' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M15 10V13' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M15 15V18' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}


@media only screen and (max-width: 1023px){
	.ico-search, .btn_search, .btn_sch{ background-size: 24px}
}


/***************
* FONT SIZE
***************/
.font-H1-rg {font-size: 70px; font-weight: 400; line-height: 90px; letter-spacing: -1.4px;}
.font-H1-bd {font-size: 70px; font-weight: 700; line-height: 90px; letter-spacing: -1.4px;}
.font-H2 {font-size: 42px; font-weight: 700; line-height: 52px; letter-spacing: -0.84px;}
.font-H3 {font-size: 38px; font-weight: 600; line-height: 48px; letter-spacing: -0.76px;}
.font-H4 {font-size: 28px; font-weight: 600; line-height: 36px; letter-spacing: -0.56px;}
.font-H5 {font-size: 24px; font-weight: 600; line-height: 32px; letter-spacing: -0.48px;}
.font-subTitle {font-size: 18px; font-weight: 400; line-height: 26px; letter-spacing: -0.42px;}
.font-b1 {font-size: 18px; font-weight: 700; letter-spacing: -0.36px;}
.font-b2 {font-size: 18px; font-weight: 400; letter-spacing: -0.36px;}
.font-b3 {font-size: 16px; font-weight: 600; letter-spacing: -0.32px;}
.font-b4 {font-size: 16px; font-weight: 400; letter-spacing: -0.32px;}
.font-b5 {font-size: 14px; font-weight: 400; letter-spacing: -0.28px;}


@media only screen and (max-width: 1300px){
	.font-H1-rg, .font-H1-bd { font-size: 3.6rem; line-height: 1.35}
	.font-H2 {font-size: 42px;line-height: 52px;}
	.font-H3 {font-size: 38px; line-height: 1.4; letter-spacing:0;}
	.font-H4 {font-size: 28px; line-height: 1.4; letter-spacing: 0;}
	.font-H5 {font-size: 20px;  line-height: 1.4; letter-spacing:0;}
	.font-subTitle{font-size: 18px;  line-height: 1.4; letter-spacing:0;}
}

@media only screen and (max-width: 1023px){
	.font-H1-rg, .font-H1-bd { font-size: 2rem; line-height: 1.35; letter-spacing: 0}
	.font-H2 {font-size: 1.5rem;line-height: 42px;}
	.font-H3 {font-size: 1.3rem; line-height: 1.4; letter-spacing:0;}
	.font-H4 {font-size: 1.125rem; line-height: 1.4; letter-spacing: 0;}
	.font-H5 {font-size: 1rem;  line-height: 1.4; letter-spacing:0;}
	.font-subTitle{font-size:13px;  line-height: 1.4; letter-spacing:0;}
	.font-b1 {font-size: 14px; font-weight: 500; letter-spacing: -0.28px;}
	.font-b4 {font-size: 13px;}
}


/* --------------------------------------------------------------
 element - 변경예정
-------------------------------------------------------------- */

/*top으로 이동
-------------------------------------------------------------- */
.topbtn{ position: fixed; right:15px; bottom:80px;  z-index: 60; display: none;width:40px;  height:40px;text-align: center;padding-top: 0px;background:#fff;cursor: pointer;text-decoration: none;border-radius: 100%; transition: all 0.3s; background: #CBCFD3; padding: 0 !important; overflow: hidden }
.topbtn a,.topbtn button{  display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background:#CBCFD3 url("../img/arrow_top.svg") no-repeat 50% 50%}

.topbtn a span, .topbtn button span{ display: none}
.topbtn.fixed{ display: block; position: fixed; }
.topbtn.fixed.noFix{position: absolute;top: -106px; bottom: auto}

/* 데이터없음
--------------------------------------------------------------*/
[class^="nodata"]{ height: 100%;  position: relative; min-height:70px; text-align: center }
[class^="nodata"] > div{ display: flex; width: 100%; align-items: center; justify-content: center;font-size:1rem; color: var(--gray-b1); height: 100%; flex: none; flex-direction: column; border-radius: var(--radius-S);}
[class^="nodata"],[class^="nodata"] > p{ font-size:1rem; color: var(--gray-b1)}
.nodata_bg >div{ min-height: 70px; background:#F4F6F8 }

/* 필수입력
-------------------------------------------------------------- */
span.need, span.must{font-size: 0; position: relative; display:inline-flex; height: 6px;width: 6px; color: var(--error)  }
span.need:before{ font-size: 1.2rem; font-weight: 700; content: "*"; }
span.must:before{ font-size: 1.2rem; font-weight: 700; content: "*";}

/* 탭
-------------------------------------------------------------- */
/* 탭  - 기본 */
.nav-tabs {display: flex !important;width: 100%;overflow-x: auto; flex-wrap: nowrap !important;-ms-overflow-style: none; overflow: -moz-scrollbars-none; justify-content: center }
.nav-tabs li{ flex-basis: auto !important; margin: 0 !important;}
.nav-tabs li + li a{ margin-left: -1px}
.nav-tabs>li>a.active,.nav-tabs>li>a.active:focus,.nav-tabs>li>a.active:hover {}
.nav-tabs>li>a {color: #7f4c95; padding: 0 30px; display: block; position: relative; height: 100%; line-height: 45px; font-size: 1rem; border: 1px solid #7f4c95}
.nav-tabs>li>a.active,.nav-tabs>li>a:hover {color: #fff !important;background:#7f4c95;}
.tab-pane {padding: 15px 0; display: none}
.tab-pane.active{ display: block}
.tab-content {padding: 20px}
.nav-tabs::-webkit-scrollbar {display: none;}
.tab_contents:focus{ outline: none !important}

/* 탭 */
[class^="tab_menu_"]{
	ul{ display: flex;-ms-overflow-style: none; overflow: hidden; padding: 0; height: 60px; background: #F4F6F8; gap:16px; position: relative}
	ul::-webkit-scrollbar { display: none;}
	ul li{ width: 100%    }
	ul li > button{ width:100%; height: 100%; word-break: keep-all; color: var(--gray1)     }
	ul li > button>span{ display: block    }
	li.marker {display:block;position: absolute;height: 3px;padding: 0;background: var(--secondary);-webkit-transition: ease-in 0.3s;transition: ease-in 0.3s;top: calc(100% - 3px);left: 16px;width: auto; flex: none}
	li.anim {-webkit-animation: 0.4s shake ease-in;animation: 0.4s shake ease-in;}
	li.active button{ font-weight: 700;  color: var(--secondary)}
	&[class*="slide"]{ overflow: visible  }
	&[class*="slide"] ul{ gap:4px; background: none; height: 44px;overflow: hidden; overflow-x: scroll}
	&[class*="slide"] li{ white-space: nowrap;}
	&[class*="slide"] li button{ padding: 0 12px; transition: .3s; letter-spacing: 0.25px }
	&[class*="slide"] li.marker{ height: 100%; top: 0; z-index: -1; border-radius: 40px}
	&[class*="slide"] li.active{ z-index: 2; position: relative}
	&[class*="slide"] li.active button{ color: #fff; font-weight: 500}
}
.tab_contents {
	[class^="pannel"]{ display: none}
	[class^="pannel"].curr{ display: block}
}


/* input
-------------------------------------------------------------- */
/*  Input */
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="time"]{height:50px;padding:0 10px;border:1px solid var(--gray-300-color);background-color:#fff;box-sizing:border-box;font-size: 1rem;color:var(--black-color); border-radius: 0px;width: 100%}
input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder,  input[type="time"]:-ms-input-placeholder{color:rgba(78,78,78,0.5)}
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, input[type="time"]::placeholder{color:rgba(78,78,78,0.5);}


label{ font-size:1rem;color:var(--black-color)}
label.essential::before{content:'*';display:inline-block;margin-right:4px;vertical-align:middle}
input[type="text"]:not(.dates):read-only,input[type="text"]:not(.datetime):read-only, input[type="password"]:read-only, input[type="number"]:read-only, input[type="email"]:read-only, input[type="text"]:disabled, input[type="password"]:disabled, input[type="number"]:disabled, input[type="email"]:disabled, input[type="tel"]:disabled,input[type="time"]:disabled, select:disabled{background-color:var(--gray-300-color);color:rgba(78,78,78,0.5)}
textarea{resize:none;width:100%;height:100px;padding:8px 15px 25px 15px;border:1px solid var(--gray-300-color);background-color:#fff;box-sizing:border-box;font-size: 1rem;line-height:24px;color:var(--black-color)}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="time"],
select,
input[type="text"]:read-only,
input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="number"]:read-only,
input[type="email"]:read-only
textarea{  border-radius: 0; font-size: 1rem; padding-left:15px; color: var(--black-color); background: #fff; }

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="time"]::placeholder,
select::placeholder,
textarea::placeholder{color:rgba(78,78,78,0.5); font-weight: 400 }

input[type="text"]:valid,
input[type="password"]:valid,
input[type="number"]:valid,
input[type="email"]:valid,
input[type="tel"]:valid,
input[type="time"]:valid,
select:valid,
.sort > button.bt_sel.valiad{ border-color: var(--gray-300-color); padding-right: 40px }

input[type="text"]:not(:disabled):focus,
input[type="password"]:not(:disabled):focus,
input[type="number"]:not(:disabled):focus,
input[type="email"]:not(:disabled):focus,
input[type="tel"]:not(:disabled):focus,
input[type="time"]:not(:disabled):focus,
select:not(:disabled):focus,
textarea:not(:disabled):focus,
.sort > button.bt_sel:not(:disabled):focus{ border-color: var(--black-color); outline: none !important  }

input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="number"]:read-only,
input[type="email"]:read-only,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
select:disabled{border-color: var(--gray-300-color) !important;color:rgba(78,78,78,0.5); opacity: 1}

input:placeholder-shown{border-color:var(--gray-300-color) !important;}
input:placeholder-shown:focus{ border-color: var(--black-color) !important}
/*.form_bx .error, .error:placeholder-shown{ border-color: var(--red) !important; color:var(--red) !important; } */

/* bt_clear */
.bt_clear:before {width: 100%;height: 100%;content: "";background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0967 17.0962L7.9043 7.90381' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7.90332 17.0962L17.0957 7.90381' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block;}
input[type="text"]:valid:focus + .bt_clear, .-hasvalue:focus + .bt_clear, .input_g.error .bt_clear {opacity: 1;z-index: 2;display: block;width: 30px;height: 40px; visibility: visible}
input:placeholder-shown + .bt_clear { display: none !important}


/* select */
select{width:100%;height:50px;line-height:46px;padding:0 40px 0 15px;border:1px solid var(--gray-300-color);font-size:1rem;border-radius:0;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='rgba(0,0,0,0.8)'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E") no-repeat right 10px top 50% ;box-sizing:border-box;}
select:disabled{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='rgba(0,0,0,0.2)'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E")}
.sort{position:relative;color:var(--black-color);font-size:1rem;text-align:left; z-index:3;width:100%;
	.dimmed{background: rgba(0,0,0,0.5); position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: none;  }
	button.bt_sel{position:relative;width:100%;height:50px;padding:0 40px 0 15px ;border:1px solid var(--gray-300-color);text-align:left;  box-sizing:border-box; border-radius:0; font-size: 1rem;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='rgba(0,0,0,0.8)'%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z'%3E%3C/path%3E%3C/svg%3E") no-repeat right 10px top 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--black-color)  }
	button.bt_sel .plhold{ color:rgba(78,78,78,0.5);}
	.content{width:93%;max-height:80dvh;left:50%;box-sizing:border-box; transition: .3s; height: 0; z-index: -1; opacity: 0; visibility: hidden;   position: fixed; bottom: -100vh; top: auto; overflow: hidden; background: #fff; border: none; padding:30px 0; border-radius:16px; transform: translate(-50%,0)}

	.content ul{ display: flex; flex-direction: column; gap:5px; justify-content:center; padding:20px 0 0 0}
	.content li{overflow: hidden; min-height: 40px}
	.content li a{height: 100%;display: flex; align-items: center;text-decoration:none; padding:5px 40px 5px 0; font-size: 1rem; width: 100%; min-height: 40px}
	.content li.on a{ color:var(--secondary);background:#fff url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5007 1.16357L5.72931 9.16357L1.26074 3.96357' stroke='%231D68C7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 100% 50%;}
	.content li:hover a{ background-color:  rgba(236, 236, 236, 0.51);color:var(--secondary);}
	.content h4.tit{ padding: 0; font-size: 1.142rem; width: calc(100% - 60px); font-weight: 700; display: block;}
	.content h4{ display: none}
	.bt_closed{ position: absolute;left: auto; right: 10px; top: 10px; width: 40px; height: 40px; background: url("../img/btn_close.svg") no-repeat 50% 50%; z-index: 2; display: block}
	.content h4.tit + .bt_closed{ top:20px}
	.content .overf_y{ overflow: hidden; width: 100%;overflow-y: auto; height: 100% }
	.content h4.tit ~ .overf_y{ height: calc(100% - 30px) }
}
.sort.on{z-index: 15;
	.dimmed{ display: block; }
	.content{ opacity: 1; height: auto; visibility: visible; z-index: 16; bottom: 20px; display: flex; flex-direction: column; gap:10px; padding: 30px 20px 20px 20px; transform: translate(-50%,0)}
}


/*check*/
.chk{ position: relative;min-height:40px; display: flex; align-items: center;-webkit-tap-highlight-color:rgba(0,0,0,0) }
.chk input{position:absolute;top:3px;left:2px;width:10px;height:10px;background:none;border:none;z-index:1;; opacity: 0; visibility: hidden}
.chk input + span{position:relative;vertical-align:middle;cursor:pointer;z-index:2; background: rgba(0,0,0,0); text-align: left;  color: var(--black-color); height: 100%; display: flex; align-items: center; gap:10px;min-height:40px;-webkit-tap-highlight-color:rgba(0,0,0,0)   }
.chk input + span:before{content:"";display:block;background:#fff;cursor:pointer; border: 1.5px solid var(--gray-500-color);width:20px; height:20px; box-sizing: border-box; border-radius: 100%; flex: none   }
.chk input + span:after{content:"";position: absolute; left:5px; top:50%; width: 9.5px; height: 9.5px; display: block; background: var(--main-color); transform: translate(0,-50%); border-radius: 100%;}
.chk input[type="checkbox"] + span:before{ border-radius:var(--radius-SS) }
.chk input[type="checkbox"] + span:after{ opacity: 0}
.chk input:checked + span{ }
.chk input:checked + span:before{background:var(--main-color); border: none}
.chk input:checked + span:after{ background: #fff; opacity: 1}
.chk input[type="checkbox"]:checked + span:after{background:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5007 1.16357L5.72931 9.16357L1.26074 3.96357' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; opacity: 1; width: 20px; height: 20px; left: 0}
.chk input:disabled + span{ opacity: 0.4}

.chk input[type="radio"] + span:after{ display: none}
.chk input[type="radio"]:checked + span:after{ display: block}

/* 토글 체크*/
.tgl{ position: relative; width: 44px; height: 40px; display: flex; align-items: center;}
.tgl .tgl-flip{ position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; opacity: 0; z-index: -1; visibility: hidden}
.tgl-flip + .tgl-btn { padding:0;  transition: all 0.2s ease;  background: var(--gray-300-color);  border-radius: 12px; margin: 0; vertical-align: middle;width: 44px; position: relative; display: flex; height: 24px}
.tgl-flip + .tgl-btn:hover{ background:var(--gray3)}
.tgl-flip + .tgl-btn:after { transition: all 0.2s ease;  content: ""; border-radius: 100%; position: absolute; left:0;  background: #fff; top:50%; width:17px; height:17px; display: block; transform:  translate(3px,-50%)}
.tgl-flip:checked + .tgl-btn {  background: var(--secondary)}
.tgl-flip:checked + .tgl-btn:hover{ background: var(--main-color)}
.tgl-flip:checked + .tgl-btn:after {transform:translate(24px,-50%) }
.tgl-flip:disabled + .tgl-btn{ opacity: 0.4}

/* Badge */
[class^="badge-"] {padding: 0 10px; text-align: center; border-radius: 2px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap; font-weight: 600}
.badge-bl {background-color: var(--black-color); color: var(--white-color);}/*블랙*/
.badge-wh {background-color: var(--white-color); color: var(--black-color);}/*화이트*/
.badge-pu {background-color: var(--main-color); color: var(--black-color);}/*시민공연*/
.badge-su {background-color: var(--sub-color-amber); color: var(--black-color);}/*정기공연*/
.badge-ov {background-color: var(--sub-color-brown); color: var(--white-color);}/*순회공연*/
.badge-co {background-color: var(--sub-color-purple); color: var(--black-color);}/*외부공연*/
.badge-ed {background-color: var(--gray-400-color); color: var(--black-color);}/*교육공연*/
.badge-ou {background-color: var(--white-color); box-shadow: 0 0 0 1px var(--gray-300-color) inset; color: var(--gray-900-color);}/*찾아가는 음악회*/
@media only screen and (max-width: 1023px){
	[class^="badge-"]{ font-size: 13px}
}


/* Button */
button:disabled{-webkit-tap-highlight-color:transparent}
.primary_btn{ background: var(--main-color); color: #fff;
	&:hover, &:active, &:focus{background: var(--main-color-bg)}
	&:disabled{ background: var(--gray4) !important}
}
.negative_btn{ background:var(--gray4); min-width: auto;
	&:hover, &:active, &:focus{background:#c6c6c6}
	&:disabled{ background: var(--gray4) !important; color: #fff}

}
[class*="text_btn"]{ color: var(--font-light); font-size:0.857rem; height: 40px; border-radius: var(--radius-S); text-decoration: underline; position: relative;
	&:hover, &:active, &:focus{color: var(--gray1)}
	&:disabled{color: var(--font-light) !important; opacity: 0.5}
}


.btn-box {text-align: left; display: flex; gap: 8px;
	&> * {text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 2px; white-space: nowrap}
}

[class^="ico-"] {width: 24px; height: 24px;}
[class$="-small"] {width: 16px; height: 16px;}
/*----fill형 버튼----*/
.button-fill-type01 {width: 100%; box-shadow: 0 0 0 1px var(--gray-300-color) inset; background: var(--white-color); height: 50px;}
.button-fill-type02 {width: 100%; background: var(--gray-900-color); height: 50px; color: var(--white-color);}
/*----너비 고정형 버튼----*/
.button-type01 {width: 168px; height: 50px; box-shadow: 0 0 0 1px var(--gray-300-color) inset; background: var(--white-color);}
.button-type02 {width: 168px; height: 50px; background: var(--gray-900-color); color: var(--white-color);}
/*----텍스트 버튼----*/
.button-text-type01 {position: relative; padding: 0 2px; height: 44px;}
.button-text-type01::before {content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--black-color);}
.button-text-type02 {gap: 4px; height: 20px;}

/* Filter */
.filter {display: flex; flex-wrap: wrap; gap: 8px;
	*.on {box-shadow: 0 0 0 1px var(--black-color) inset !important;}
	.filter-list {padding: 8px 20px; box-shadow: 0 0 0 1px var(--gray-300-color) inset; border-radius: 100px;align-content: center;
		&:hover,&:focus,&.on,&.active{ background: var(--gray-900-color); color: #fff; box-shadow: 0 0 0 1px var(--gray-900-color) inset;  }

	}
	button {height: 40px;}
}

[class^="btn_"]{
	&:disabled{ opacity: 0.57}
}


@media only screen and (max-width: 1023px){
	.filter button {height: 32px;}
	.filter {
		.filter-list {padding: 0 20px;}
	}
}


/* breadcrumb */
.breadcrumb{ height:50px; z-index:4; position: relative; display: flex; justify-content: flex-end;
	a{ white-space: nowrap; flex:none}
	.bx_cont { height:50px;}
	.bx_menus {
		&> ul{ display: flex; align-items: center; gap:14px; height: 50px}
		&> ul > li{  position:relative;display: flex; align-items: center; gap:14px; height: 100%   }
		&> ul > li:before{content:""; display: block; width: 4px ;height: 4px; border-radius: 100%; background:var(--gray-300-color); flex: none }
		&> ul > li:after{ position: absolute; right: 0px; top: 50%; border-top: 5px solid var(--gray-600-color); border-left: 3px solid transparent;   border-right: 3px solid transparent; content:""; flex: none; transform: translate(0,-50%)}
		ul > li > a { color: var(--black-color); font-size:1rem; display:block;box-sizing: border-box; text-align: left; font-weight:400; min-width: 100px; padding-right: 20px; height: 100%; align-content: center }
		ul > li.home{ width:32px; min-width: auto; justify-content: center}
		ul > li.home a{ padding:0; text-align:center; min-width: auto}
		ul > li.home:after,  ul > li.home:before{ display:none}
		ul > li .depth2{ position: absolute;background-color: #fff;padding: 0; z-index: -12; width:fit-content; top:49px; left: 14px; opacity:0; height:0; overflow:hidden; transition:.3s; visibility: hidden; border: 1px solid var(--gray-300-color); border-radius: var(--radius-SS)}
		ul > li:last-of-type .depth2{left: auto; right: 0}
		ul > li.home a:before{font-family: 'spo'; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content:"\e69b"; font-size:14px}
		ul > li .depth2 > li > a{ line-height:1; padding:10px 14px; border-left:none; height:auto; font-weight:normal}
		ul > li .depth2 > li.on a{ color:rgb(199, 81, 11); font-weight:600}
		ul > li:hover .depth2,ul > li:focus-within .depth2{ opacity:1; height:auto;padding: 10px 0; z-index: 12; visibility: visible}
	}
}
/*.breadcrumb + .hgroup{ height:auto; padding-top:0; position:absolute; left:0; right:0; top:0; z-index:1; min-height:150px; width:100%}
.breadcrumb + .hgroup .inner{ height:auto;  padding-bottom:30px}*/




/* --------------------------------------------------------------
layout
-------------------------------------------------------------- */
/* top
--------------*/
.btn_skip{ position: relative; text-align: center}
.btn_skip a{position: absolute; left: 0; top:-80px; background:#F59B15; color: #000; padding: 1rem; font-size: 1rem; font-weight: 700   }
.btn_skip a:focus{top: 0; width: 100%; text-decoration: underline; z-index: 40}

/* header */
header.top {--sbheight:350px; height: 90px;    width: 100%;    border-bottom: 1px solid rgba(0,0,0,0.1);    background: var(--white-color);z-index: 20;position: -webkit-sticky;position: sticky; top: 0; transition: top 0.4s ease-in-out,background 0.4s ease-in-out;
	&:before{ content: ""; display: block; width: 100vw; height: 0; position: absolute; left: 50%; top: 89px; transform: translate(-50%,0); background: #fff; transition: .3s; overflow: hidden; visibility: hidden; opacity: 0; z-index: -99; border: 1px solid #E0E0E0; border-width: 1px 0}
	.header_inner{display: flex; align-items: center; justify-content: space-between;  max-width: 1520px; padding: 0 40px; margin: 0 auto; height: 100%; ;gap:70px }
	[class^="hd-list-"] {display: flex; align-items: center; gap: 24px; height: 100%;}
	[class^="ico-"] {width: 32px; height: 32px;}
	.hg_btn{ display: none}
	h1 {
		a{ display: flex; align-items: center; gap:12px}
		/*이전 시향로고 div, a>span{ display: flex; align-items: center; justify-content: flex-start; height:38px; flex: none; background: url("../img/logo_spo.svg") no-repeat 0 50%; width:91px; background-size: auto 28px; } */
		div, a>span{ display: flex; align-items: center; justify-content: flex-start; height:60px; flex: none; background: url("../img/logo_spo2.svg") no-repeat 0 50%; width:91px; background-size: auto 52px; }
		.spo_logo{ filter: contrast(0) brightness(0); }
		.special_logo{ background-image: url("../img/logo_20th.svg"); background-size: auto 37px; width: 90px; background-position: 12px 50%;}
		.special_logo:before{content: ""; display: block; width: 1px; height:52px;background:#000; }
	}
	.h_gnb, .hg_wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; margin: 0 auto; }
	.gnb_bx{ display: flex; align-items: center; height: 100%; gap:0px;
		&>*{ display: flex; align-items: center}
	}
	.hg_main{ gap: 0px; height: 100%; padding: 0 20px 0 0; position: relative;
		a{ letter-spacing: -0.6px; flex: none; white-space: nowrap}
		&>li{ min-width: 100px; text-align: center; padding: 0 20px; display: flex; flex-direction: column; align-items: center}
		&>li>a, &>li>a>strong{ font-size: 1.125rem; font-weight: 600; color: #000}
		&>li>a:hover>strong, &>li.focusing>a>strong{ font-weight: 700}
		&>li, &>li>*:not(.hg_sub){display: block; position: relative; height: 100%; align-content: center; }
		&>li>a::after {content: ''; display: block; position: absolute; width: 0; bottom: 0; height: 3px; background: var(--main-color); transition:0.6s;}
		&>li>a:hover::after, &>li.focusing>a::after, &>li.on>a::after  {width: 100%;}
	}

	.hg_main2{ padding: 0 0 0 12px;
		&:before{ content: ""; display: block; width: 1px; height:16px;background: var(--gray-900-color); position: absolute; left: 0; top: 37px}
		&>li>a, &>li>a>strong{ font-weight: 400; color: #000}
		&>li>a:hover>strong, &>li.focusing>a>strong{ font-weight:500}
	}

	.hg_sub{ position: absolute; left: 0; top: 89px; transition: .3s; visibility: hidden; opacity: 0; z-index: -99; padding: 30px 0; height : var(--sbheight); text-align: center; width: 100%;gap:10px; display: flex; flex-direction: column;align-items: center;
		a{ white-space: nowrap; font-size: 1rem;}
		.dep3{ opacity: 0; height: 0; visibility: hidden; overflow: hidden; z-index: -1; transition:.3s; transform: translateY(-20px); gap:5px; display: flex; flex-direction: column; padding: 0}
		.dep3 a{ font-size: 0.875rem; color: var(--gray-600-color); padding:5px 0; overflow: visible}
		.dep3 a:hover, .dep3 a:focus{ color: #000}
		.dep3 a:focus{  outline-offset: -1px;}
		.dep4{ display: none}
		li.focusing>a, li.on>a{ text-decoration: underline; color: #000}
		li.focusing .dep3{visibility: visible; height: auto; z-index: auto; opacity: 1;transform: translateY(0px);transition: .3s; padding: 10px 0}
	}
}

header.sb_on{
	&:before{height: var(--sbheight);  visibility: visible; opacity: 1; z-index: auto}
	.hg_sub{ opacity: 1; z-index: auto; visibility: visible; }
}

/* fixed */
/* .wrap.fixed header.top{ position:fixed; top: 0;border-bottom: 1px solid rgba(0,0,0,0.1); } */
header.top.scrolled-down {top: -167px;}

/* utility */
.utility_bx, .h_utility, .btn_lang{display: flex; align-items: center; gap:0.4rem;
	button, a{ border: none; white-space: nowrap; flex: none; height: 36px}
}
.h_utility{
	button{border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: .3s; background-image: none;
		&:hover,&:focus{ outline: none; background:var(--black-color);}
		&:hover:before,&:focus:before{ filter:contrast(0) brightness(30)}
	}
	button:before{ content: ""; display: block; width: 32px; height: 32px;background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22.6668C18.7865 22.6668 22.6667 18.7866 22.6667 14.0002C22.6667 9.21369 18.7865 5.3335 14 5.3335C9.21357 5.3335 5.33337 9.21369 5.33337 14.0002C5.33337 18.7866 9.21357 22.6668 14 22.6668Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M25.9596 27.3738C26.3501 27.7643 26.9832 27.7643 27.3738 27.3738C27.7643 26.9832 27.7643 26.3501 27.3738 25.9596L25.9596 27.3738ZM19.2929 20.7071L25.9596 27.3738L27.3738 25.9596L20.7071 19.2929L19.2929 20.7071Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; background-size: 26px;transition: .3s;}
	button.btn_login:before{background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='16' cy='9.3335' rx='4' ry='4' stroke='black' stroke-width='2'/%3E%3Cpath d='M5.33337 22.6667C5.33337 20.4576 7.12424 18.6667 9.33337 18.6667H22.6667C24.8758 18.6667 26.6667 20.4576 26.6667 22.6667V26.6667H5.33337V22.6667Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
	button.btn_mypage:before{background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='16' cy='9.33325' rx='4' ry='4' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.3335 17.6667C6.57207 17.6667 4.3335 19.9053 4.3335 22.6667V26.6667C4.3335 27.219 4.78121 27.6667 5.3335 27.6667H18.8288C18.8129 27.6632 18.7971 27.6598 18.7812 27.6564C19.9037 27.6564 20.0062 25.9021 18.8731 25.6667H6.3335V22.6667C6.3335 21.0099 7.67664 19.6667 9.3335 19.6667H22.6668C24.0676 19.6667 25.2442 20.6268 25.5744 21.9249C25.5829 21.9413 25.5888 21.9649 25.5917 21.9965C25.6113 22.0824 25.6272 22.1698 25.6393 22.2583C25.9518 22.954 27.7609 23.0341 27.4856 21.3281C26.9003 19.2167 24.9646 17.6667 22.6668 17.6667H9.3335Z' fill='black'/%3E%3Cpath d='M22.25 26.1229L24.9253 29.3074L29.3841 24' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
	.btn_monthly:before{background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.6667 9.3335H5.33337V26.6668H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M26.6667 9.3335H5.33337V16.0002H26.6667V9.3335Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.33337 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6666 5.3335V9.3335' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
	}
	.login{ position: relative}
	.my_layer{ position: absolute; left: 0; top:40px; display: none; background: #fff; border: 1px; padding: 1rem; border: 1px solid #222; border-radius: 1rem;box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.05);
		a{ display: flex; width: 100%; align-items: center;}
	}
	.guiding_login, .guiding_login_after{display: none}
}
.btn_lang{display: flex; background: rgba(0,0,0,0.1); box-sizing: border-box; border-radius: 50px;  height: 36px; align-items: center; gap:0;
	button{ border-radius: 50px; font-weight: 400; font-size: 14px; color: #000; height: 100%; line-height: 36px; padding: 0 10px;}
	.lang_on{ background:var(--main-color); font-weight: 600; }
}



button.close{margin:0; padding:0;background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0967 17.0962L7.9043 7.90381' stroke='rgba(0,0,0,1)' stroke-linecap='round' stroke-width='1'/%3E%3Cpath d='M7.90332 17.0962L17.0957 7.90381' stroke='rgba(0,0,0,1)' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block; background-size: 34px; width: 36px; height: 36px}


/* 통합검색 창*/
.totalsch_wrap{ visibility: hidden; position: fixed; left:0;  width:100%; height: 100vh; z-index:6; opacity:0; top:-100%; transition:.3s; z-index: -1; background: rgba(0, 0, 0, 0.6);
	&.active{ visibility: visible; opacity:1; top:0; z-index: 30}
	.container{position: unset; display: flex; flex-direction: column; gap:30px; color: #fff; align-items: center; padding: 100px 60px; background:var(--white-color);}
	.container> h2{ position: absolute; left: 40px; top: 40px; background: url("../img/logo_spo_w.svg") no-repeat 0 0; width: 140px; height: 60px; background-size: 140px; filter: contrast(0) brightness(0)}
	h3{ color: var(--black-color); font-size: 3rem}
	legend{ font-size:0; line-height:0; text-indent:-999px; overflow:hidden; display:block; width:0; height:0; position: absolute; left: 0; top: 0 }
	.cscenter{ clear: both; float: none; max-width: 1000px;margin: 0 auto;;
		*{ color:rgba(255,255,255,0.8); display: inline-block; vertical-align: middle; margin: 0;    padding: 0;  }
		h2{font-size: 2rem;   margin: 0;    padding: 0;  font-weight: 400; color:rgb(219, 93, 19); }
		p{font-size: 2.42rem;  font-weight: 600; color: var(--black-color); padding-right: 30px}
		a{ text-decoration: underline; font-size: 1.12rem; font-weight: 600; position: relative; display: inline-flex; align-items: center; margin: 0 16px; color: var(--black-color);}
		a + a:before{ content: ""; display: block; width: 1px ; height: 13px; background: var(--black-color); margin: 0; position: absolute; left:-17px; top: 50%; transform: translate(0,-50%)}
	}
	.search_content{ max-width:960px; margin:0 auto; width: 100%; position: relative}
	.searchform_cancel{  width: 40px; height: 40px; position: absolute; right: 80px; top:50%; transform: translate(0,-50%); flex: none}

	.searchform_submit{ position: absolute; right: 0; top:50%; transform: translate(0,-50%);width: 80px; height: 60px;background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22.6668C18.7865 22.6668 22.6667 18.7866 22.6667 14.0002C22.6667 9.21369 18.7865 5.3335 14 5.3335C9.21357 5.3335 5.33337 9.21369 5.33337 14.0002C5.33337 18.7866 9.21357 22.6668 14 22.6668Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M25.9596 27.3738C26.3501 27.7643 26.9832 27.7643 27.3738 27.3738C27.7643 26.9832 27.7643 26.3501 27.3738 25.9596L25.9596 27.3738ZM19.2929 20.7071L25.9596 27.3738L27.3738 25.9596L20.7071 19.2929L19.2929 20.7071Z' fill='black'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; background-size: 36px;transition: .3s;  flex: none}

	button.close{ position:absolute; right:40px; top:40px; width: 50px; height: 50px; background-size: 70px;}
	.input_box{ border:1px solid #111; text-align:left; height:80px; background:#fff}
	.input_box input[type="text"]{ height:100%;  font-size:2rem; margin:0; padding:0; padding-left:1rem;border: 0; font-weight:bold; width:calc(100% - 150px); color:#db5d13}
	input[type="text"]:focus ~ .searchform_submit{ background-size:44px }

	.searchform_cancel:before {width: 100%;height: 100%;content: "";background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0967 17.0962L7.9043 7.90381' stroke='rgba(0,0,0,0.6)' stroke-width='1.5'/%3E%3Cpath d='M7.90332 17.0962L17.0957 7.90381' stroke='rgba(0,0,0,0.6)' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: block; background-size: 34px}
	input[type="text"]:valid:focus + .searchform_cancel, .-hasvalue:focus + .searchform_cancel {opacity: 1;z-index: 2;display: block;width: 30px;height: 40px; visibility: visible}

	input:placeholder-shown + .searchform_cancel { display: none !important}
}


@media only screen and (max-width: 1460px){
	header.top {
		.header_inner { gap:30px; padding: 0 1rem}
		.hg_main>li { padding: 0 12px}
		.hg_main{padding: 0 12px 0 0;}
	}
}
@media only screen and (max-width: 1290px){
	header.top {
		.header_inner { gap:1rem;}
		h1 a{ gap:6px}
		h1 div, h1 .special_logo {width:70px;  background-size: 61px auto; background-position: 8px 50%;}
		h1 a>span.spo_logo{ width: 80px;background-size: auto 45px;} 
		.hg_main{ padding-right: 0}
		.hg_main>li { min-width: auto; padding: 0 10px}
		.hg_main2>li>a>strong{ font-size: 1.1rem}
	}
	.topbanner_wrap img{ max-width: 100%}
	.utility_bx, .h_utility{ gap:10px}
}

@media only screen and (max-width: 1120px){
	header.top {
		.header_inner{gap:5px}
		.hg_main2{ padding-right: 0}
		.hg_main2>li{ padding: 0 5px}
		.hg_main2>li>a>strong{ font-size: 1rem}
		h1 a{ gap:8px}
		h1 div, h1 .special_logo {width:60px;  background-size: 50px auto;}
		h1 a>span.spo_logo{ width:58px;background-size: auto 35px;} 
	}
	.utility_bx{ gap:4px}
	.h_utility{ gap:4px}
	.h_utility button{ width: 32px; height: 32px}
	.h_utility button:before{ background-size: 28px}
	.btn_lang button{padding: 0 6px; font-size: 0.95rem}
}

@media only screen and (max-width: 1023px){
	.fix{height: 100vh; overflow: hidden}
	.fix .wrap{ position: fixed; left: 0; top: 0; transition: .3s; height: 100%; width: 100%; overflow: hidden}
	.fix .wrap:before{ content: ""; display: block; width: 100%; height: 100%; background: #fff; position: absolute; left: 0; top:0; background: #fff; z-index: 20}

	.fix .topbanner_wrap{ z-index: -1}
	.topbanner_wrap .play_pause{ display: none}
	header.top { height: 54px; background:#FFF; border: none ;
		&:before{top:54px; display: none}
		.hg_wrap{ display: none}
		.header_inner{ border-bottom: 1px solid #E0E0E0}

		h1 a{ gap:12px}
		h1 div, h1 .special_logo {width:70px;  background-size: 70px auto;}
		h1 .special_logo{ background-size: auto 38px; }
		h1 a>span.spo_logo{ width:58px;background-size: auto 40px; height: 50px;} 
		h1 .special_logo:before{ height: 38px}
		& .hg_main2:before{ display: none}
	}
	header.top.scrolled-up{ position: fixed;} 

	.h_gnb.on{
		.hg_wrap{ display:flex; }
		.hg_wrap .utility_bx{ width: 100%; height: 100%; justify-content: flex-end; padding-right: 40px}
		.h_utility .login,.h_utility .monthly {display: none}
		.btn_lang{background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 12H22' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z' stroke='%23222222' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 32px; height: 32px; flex: none; background-size: 24px;position: relative;
			&:hover, &:focus-within {
				outline: none;
				background: var(--black-color) url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 12H22' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
			}


		}
		.btn_lang .lang_on{ display: none}
		.btn_lang button{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; padding: 0;		}
		.btn_lang button>span{ font-size: 0; line-height: 0; text-indent: -999px; overflow: hidden;; visibility: hidden}
		.header_inner{ position: relative; z-index: 21}
		.gnb_bx { position: absolute; left: 0; top: 245px; display: flex; flex-direction: column; height: calc(100vh - 250px); overflow: hidden; overflow-y: auto; width: 100%; padding-bottom: 70px}
		.gnb_bx ul{display: flex; flex-direction: column; height: auto !important; width: 100%; align-items: flex-start}
		.gnb_bx .hg_sub, .gnb_bx .hg_sub .dep3{ position: relative; left: auto; top: auto; transform: none; padding: 0; background: var(--gray-100-color); gap:0; opacity: 0; height: 0 !important; overflow: hidden; transition:height .3s, opacity .3s; z-index: -1; min-height: auto}

		.hg_main>li.on {}

		.hg_main2>li>a, .hg_main2>li>a>strong{font-size: 1.125rem;font-weight: 600 !important;color: #000;}

		.gnb_bx .hg_main>li.on .hg_sub, .gnb_bx .hg_main>li.on .hg_sub .dep3{opacity: 1; visibility: visible; z-index: auto;padding: 10px 0; height: auto !important  }


		.hg_main>li, .hg_main>li>*{ height: auto !important; min-height: 68px; width: 100%; text-align: left; padding: 0}
		.hg_main>li>a{padding: 0 24px}

		.hg_main2>li>a:not([target="_blank"]):after, .hg_main>li>a:not([target="_blank"]):after{ background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 5.83336L10 14.1667L17.5 5.83336' stroke='%23BDBDBD' stroke-width='1.66667'/%3E%3C/svg%3E%0A") no-repeat 100% 50%; width: 20px; height: 20px; display: block; position: absolute; right: 24px; top: 50%; transform: translate(0,-50%); transition: none}

		.hg_main2>li.on>a:not([target="_blank"]):after, .hg_main>li.on>a:not([target="_blank"]):after{background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 14.1667L10 5.83337L17.5 14.1667' stroke='black' stroke-width='1.66667'/%3E%3C/svg%3E%0A");}

		.hg_main2>li>a[target="_blank"]:after, .hg_main>li>a[target="_blank"]:after{ display: none}

		.gnb_bx .hg_sub li{ width: 100%; height: 52px; flex-direction: column}
		.gnb_bx .hg_sub li, .gnb_bx .hg_sub li a{ display: flex; align-items: center; width: 100%; height: 100%; min-height: 52px; font-size: 1.125rem; font-weight: 600; text-decoration: none}
		.gnb_bx .hg_sub li>span,  .gnb_bx .hg_sub li a>span{ display: block; width: 100%; height: 100%;padding:0 24px}

		.gnb_bx .hg_sub .dep3{ padding: 0 12px}
		.gnb_bx .hg_sub .dep3 li>span, .gnb_bx .hg_sub .dep3 li a>span{ font-size: 1rem; color: var(--gray-900-color); font-weight: 400}
		.gnb_bx .hg_sub .dep3 a{padding: 0}

		.h_utility .login{ display: flex; position: fixed; left: 0; top:55px; width: 100%}
		.h_utility .login >.btn_mypage, .h_utility .login> .btn_login{ display: none}
		.h_utility .my_layer{ position: relative; left: auto; top: auto; box-shadow: none; border-radius: 0; display: flex!important; border: none; padding: 0; width: 100%; flex-wrap: wrap; padding: 40px 24px; gap:24px 8px; border-bottom: 1px solid var(--gray-300-color)}
		.h_utility .guiding_login, .h_utility .guiding_login_after{ display: block; font-weight: 600; font-size:1.5rem }
		.h_utility .my_layer li{ width:calc(50% - 4px) }
		.h_utility .my_layer li.guiding_login, .h_utility .my_layer li.guiding_login_after{ width: 100%; display: flex; align-items: center; gap:8px}
		.h_utility .my_layer li > a{ border: 1px solid var(--gray-300-color); height: 46px; font-weight: 600; width: 100%; text-align: center; justify-content: center; color:var(--gray-900-color) }
		.h_utility .my_layer li.guiding_login_after:before{background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='14' cy='8.1665' rx='3.5' ry='3.5' stroke='%23757575' stroke-width='2'/%3E%3Cpath d='M4.66675 20.3335C4.66675 18.1244 6.45761 16.3335 8.66675 16.3335H19.3334C21.5426 16.3335 23.3334 18.1244 23.3334 20.3335V23.3335H4.66675V20.3335Z' stroke='%23757575' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; width: 28px; height: 28px; content: ""; display: block; flex: none;}

	}


	header.top .h_gnb .hg_btn{ display:block; position:absolute; right:15px; top:12px; line-height:80px; border:none; background:none; width:30px; height:30px;
		.open_line{display: block; position: absolute; left: 4px; width: 22px; height: 2px; background-color: #000;}
		.open_line.line01{ top:4px}
		.open_line.line02{ top:12px}
		.open_line.line03{ top:20px}
	}

	header.top .h_gnb.on .hg_btn{ z-index:11; position:absolute;right: 15px; top:12px; width:30px; height:30px;
		.open_line{ background:#000}
		.open_line.line03{ display:none}
		.open_line.line01{transform: rotate(405deg);    top: 13px;}
		.open_line.line02{transform: rotate(315deg);    top: 13px;}
	}


	.totalsch_wrap {
		.container{ padding: 150px 30px 100px 30px}
		h3 { font-size: 2rem}
		.cscenter p{ font-size: 1.5rem;}
		.input_box input[type="text"]{ height: 60px; font-size: 1.15rem}
		.input_box{ height: 62px}
		.searchform_submit{ width: 60px; background-size: 36px !important}
		.searchform_cancel{ right: 65px}
		.container:after{ display: none}
	}


}















/* 일정 */
.shedule_wrap{position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index:-999;background: rgba(0,0,0,0.79); width:100vw; height:100vh; line-height:1.5; visibility: hidden;will-change: transform ;}
.shedule_wrap.active{  display:block;z-index: 999; visibility: visible;}


.shedule_wrap .container{padding:40px 0px 0 0; background:#fff; position:absolute; right:-100vw; top:30px; bottom:30px; max-height:calc(100vh - 60px); border-radius:30px; transition: .3s;  visibility: hidden; opacity: 0; overflow: hidden;will-change: transform; box-shadow: 10px 10px 10px rgba(0,0,0,0.49);}
.shedule_wrap.active .container{right:30px; visibility: visible; opacity: 1;} 
.shedule_wrap .container h2{ font-weight:700; letter-spacing:0; color:#000; font-size:2rem; border-bottom:1px solid #ccc; padding:0 0 1rem; text-align: center;}
.shedule_wrap button.close{ position:absolute; right:10px; top:10px; }

.shedule_wrap .container_inner{ position: relative; max-width: 400px; display: flex;flex-direction: column;height: 100%;
	
	.shedule{ position: sticky; top: 0; background: #fff; z-index: 3;} 
	.labelinfo{display: flex; align-items: center; justify-content: center; gap:1rem; padding:0.5rem 0 1rem 0;}
	.play1 a, .play1 i{ background:rgba(239, 111, 56, 0.48) !important; color: #000 !important; outline:2px dashed var(--sub-color-amber);outline-offset:1px}
	.play2 a, .play2 i{ background:rgba(245,155,21,1) !important; color: #000 !important; outline: 2px solid var(--main-color);outline-offset:1px}
	.play3 a, .play3 i{ background:rgba(139,98,82,.25) !important; color: #000 !important; outline: 2px dotted var(--sub-color-brown);}
	.play4 a, .play4 i{ background:rgba(179, 96, 226, .25) !important;; color: #000 !important; outline: 3px double var(--sub-color-purple);}
	.play5 a, .play5 i{ background:var(--gray-400-color) !important; color: #000 !important; outline:3px dashed var(--gray-400-color)}
	.play6 a, .play6 i{ background:var(--white-color) !important; border: 1px solid var(--gray-500-color) !important; color: var(--gray-900-color) !important; }
	span[class^="play"]{ display: flex; align-items: center; color:var(--gray-700-color) !important; gap:3px; border: none !important; outline: none !important; background: none !important; font-size: 14px; }
	[class^="play"] i{ width: 12px; height: 12px; border-radius: 100%; }
	td[class*="play"] a{ width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 100%; flex: none;} 
	table{ width:calc(100% - 60px); margin: 1rem auto; border: none; table-layout: fixed;;} 
	table th, table td{ padding: 0; border: none;  height: 40px; font-size: 14px; text-align: center;} 
	
	.list { padding:40px 0 30px 0px; background: var(--sub-color-brown); overflow-y: auto;flex-shrink: 1; border-radius: 30px 30px 0 0;}
	.list .inner{ height: calc(100% - 80px);overflow-y: auto; display: flex; flex-direction: column; gap:30px; padding: 0 20px 0 30px;

		dl{text-align:left; color: #fff; position: relative; padding-left: 50px; z-index: 2; font-size: 0.9rem; gap:0.4rem; display: flex; flex-direction: column; padding-right: 10px;}
		dl:before{ position: absolute; left: 0; top:2px; width: 30px; height: 30px; content:attr(data-date); background: #fff; border-radius:100%; font-size: 12px; display: flex; align-items: center; justify-content: center; color: #000; font-weight:700;} 
		dl.old:before{ background:#f7f3f3 ;} 
		dl.play1:before, dl.play1 dd>.cate{color:#bf4800} 
		dl.play2:before, dl.play2 dd>.cate{color:#976300;;} 
		dl.play3:before, dl.play3 dd>.cate{color: var(--sub-color-brown);} 
		dl.play4:before, dl.play4 dd>.cate{color: #9a46c9;} 
		dl.play5:before, dl.play5 dd>.cate{color: var(--gray-700-color);} 
		dl.play6:before, dl.play6 dd>.cate{color: var(--gray-900-color);}
		
		&::-webkit-scrollbar-track{ background: rgba(0,0,0,0);} 
		&::-webkit-scrollbar-thumb{ background-color:#493128}
		div.nodata{ color: #fff; font-size: 1rem; opacity: 0.8;} 
		&>a{ position: relative;} 
		&>a:not(:last-of-type):before{ width: 4px; height: calc(100% + 30px); left: 14px; top: 5px;content: ""; background: rgba(0,0,0,0); border-left: 1px dashed #fff; position: absolute;  z-index: 1;} 
		dt{ font-weight: 600; letter-spacing: -1px; font-size: 1.02rem; word-break: keep-all;} 
		dd{ display: flex; flex-wrap: wrap; gap:0px 1rem} 
		dd>*{ flex: none; width: fit-content;} 
		dt>.cate{ font-size: 11px;  font-weight: 500; opacity: 0.8; letter-spacing: 0; } 




	} 
	.ui-datepicker-header{ display: flex; justify-content: center; align-items: center; gap:6px} 
	.ui-datepicker-title{ font-size: 1.6rem; font-weight: 700; letter-spacing: -1px;} 
	.ui-datepicker-prev{ transform: rotate(180deg);} 
	.ui-datepicker-prev>span, .ui-datepicker-next>span{ font-size: 0; line-height: 0; text-indent: -999px; display: block; width: 40px; height: 40px;background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L19 14L9 23' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; background-size: 20px; }
	.ui-datepicker-month{ color: var(--sub-color-brown);} 
	.ui-datepicker-prev, .ui-datepicker-next{ border-radius: var(--radius-S);cursor: pointer;
		&:hover, &:focus{ outline: none; background-color: var(--gray-200-color);  }
	}
	.list button.more{font-size: 1.1rem;padding: 13px 30px;cursor: pointer;box-sizing: border-box; margin: 0 auto;display: block;margin-top:30px; background:#493128; color:#fff; transition: .3s; width: 100%; max-width: 340px;;}
	.list button.more:hover{ background:#000;} 
	.list button.more:focus{outline-offset:3px}

	
	
} 


/* .shedule_wrap{}
.shedule_wrap .list .inner{ }


.datepicker .table-condensed td.active a{ color:#fff}
.shedule_wrap .list dl:hover{ z-index:2; border-color:#333}
.shedule_wrap .list a{display:block; }
.shedule_wrap .list dl dt{ width:0; height:0; font-size:0; line-height:0; display:block; overflow:hidden; text-indent:-999px}
.shedule_wrap .list .date{ font-size:1.35rem; font-weight:700; color:#709531}
.shedule_wrap .list .play2 .date{color: #961783}
.shedule_wrap .list .play3 .date{color: #39C}
.shedule_wrap .list .play4 .date{color: #C60}
.shedule_wrap .list .play5 .date{color: #cb2f63}

.shedule_wrap .list h3{font-size:1.08rem; font-weight:700; margin:0; padding:0; color:#565656; word-break:keep-all}
.shedule_wrap .list .loca{ font-size:14px; color:#333}
 */



/*
.shedule .header, .top .shedule_wrap .ui-datepicker-header{ position:relative;text-align: center;margin-bottom: 0px; color:#000;padding: 20px 0; overflow:hidden}
.shedule .header .title, .top .shedule_wrap .ui-datepicker-title {display: inline-block;font-size: 1.533rem;font-weight: 700; position:relative; z-index:1; line-height:1; height:auto; border:none}
.shedule .header button, .shedule .header a{background: none;width: 32px;height: 32px;border-radius: 100%;font-size: 0.933rem; color:#333; display:inline-block; border:none; cursor:pointer}
.shedule .header .prev, .shedule .header .next, .top .shedule_wrap .ui-datepicker-prev, .top .shedule_wrap .ui-datepicker-next {position: absolute;top: 20px;left: 0px;font-size: 0;width: 35px;height: 35px;background: none; z-index:12; cursor:pointer}
.shedule .header .next, .top .shedule_wrap .ui-datepicker-next {left: auto;right: 0px}

.shedule .header button:before, .shedule .header a:before, .top .shedule_wrap .ui-datepicker-prev:before, .top .shedule_wrap .ui-datepicker-next:before{font-family: 'spo'; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content:"\e65e"; font-size:1.75rem; line-height:30px; text-indent:0; color:#ddd; position:relative; top:auto; left:auto; width:100%; height:100%; border-radius:0; background:none }
.shedule .header .next:before, .top .shedule_wrap .ui-datepicker-next:before{content:"\e65d";position:relative; top:auto; left:auto; width:100%; height:100%; border-radius:0; background:none}
.shedule .calendar, .top .shedule_wrap  .ui-datepicker{ padding:0 50px; width:100%}

.top .shedule_wrap .ui-datepicker{ border:none; box-shadow:none; margin:0 auto}

.top .shedule_wrap .ui-datepicker-next:before{font-family: 'spo'; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content:"\e65e"; font-size:1.75rem; line-height:30px; text-indent:0; color:#ddd; }
.shedule .header .next:before, .top .shedule_wrap .ui-datepicker-next:before{content:"\e65d";}

.top .shedule_wrap .ui-datepicker .ui-datepicker-prev:after,.top .shedule_wrap .ui-datepicker .ui-datepicker-next:after{ display:none}


.shedule table {text-align: center;width: 92%; padding:0; max-width: 400px;  }
.shedule_wrap .shedule table th,.shedule_wrap .shedule table thead, .shedule_wrap .shedule table tbody, .shedule_wrap .shedule table td{ border:none; vertical-align:middle; padding: 0; border: none;}

.top .shedule_wrap .shedule table{ font-size:1rem;  margin:0 auto; padding:0}

.shedule abbr {text-decoration: none}
.top .shedule_wrap .ui-datepicker-calendar th {height: 40px; color:#333}
.top .shedule_wrap .ui-datepicker-calendar td {height: 43px; color:#333}
.shedule table thead tr th:nth-child(6) {}
.shedule table tbody tr td:nth-child(7) button,.shedule table tbody tr td:nth-child(7) a, .shedule table thead tr th:nth-child(7) {color: #1F7CFB}
.shedule table tbody tr td:nth-child(1) button, .shedule table tbody tr td:nth-child(1) a, .shedule table thead tr th:nth-child(1) {color: #C40529}
.shedule table tbody tr td button, .shedule table tbody tr td a{border: none; background: none; width: 32px;height: 32px;border-radius: 100%;
	font-size: 0.933rem; color: #333; display:inline-block; line-height:32px}
.shedule table tbody tr td.today button, .shedule table tbody tr td.today a {color: #fff;background: #999;font-weight: 700}
.shedule_wrap .labelinfo {padding-top:10px;text-align: right;margin:0 50px 1rem 50px; padding-bottom:1.5rem; border-bottom:1px solid #ddd}
.shedule_wrap .labelinfo span {position: relative;margin-left: 0;display: inline-block;font-size: 12px;color: #777;}
.shedule_wrap .labelinfo span+span {}
.shedule_wrap .labelinfo i {display: inline-block;width: 12px;height: 12px;box-sizing: border-box;border-radius: 0;background: rgba(0,0,0,0);vertical-align: middle;margin-right: 5px}
*/


/*
.ui-datepicker .ui-datepicker-calendar td a{width: 32px; height: 32px;display: inline-block;  line-height: 32px;  border-radius: 100%;  font-size: 0.933rem; color:#333}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a{color: #fff; background: #999; font-weight: 700;}
.ui-datepicker .ui-datepicker-calendar td.play1 a{ border:1px solid #94c83d}
.ui-datepicker .ui-datepicker-calendar td.play1 .ui-state-active{ background:#94c83d; color:#fff}
.ui-datepicker .ui-datepicker-calendar td.play2 a{ border:1px solid #961783}
.ui-datepicker .ui-datepicker-calendar td.play2 .ui-state-active{ background:#961783; color:#fff}
.ui-datepicker .ui-datepicker-calendar td.play3 a{ border:1px solid #39C}
.ui-datepicker .ui-datepicker-calendar td.play3 .ui-state-active{ background:#39C; color:#fff}
.ui-datepicker .ui-datepicker-calendar td.play4 a{ border:1px solid #C60}
.ui-datepicker .ui-datepicker-calendar td.play4 .ui-state-active{ background:#C60; color:#fff}
.ui-datepicker .ui-datepicker-calendar td.play5 a{ border:1px solid #F69}
.ui-datepicker .ui-datepicker-calendar td.play5 .ui-state-active{ background:#F69; color:#fff}

*/






@media only screen and (max-width: 767px){
	.shedule .calendar, .shedule_wrap .list, .top .shedule_wrap .ui-datepicker{ padding:0 20px}
	.shedule_wrap .labelinfo,.shedule_wrap .container h2{ margin-left:20px; margin-right:20px}
	.shedule table.calendar,.shedule_wrap .list .inner{ width:100%}
	.shedule table tbody tr td button, .shedule table tbody tr td a{ font-size:1.1rem}
	.shedule_wrap button.close{ transform:scale(.8); right:20px}
	.shedule table{ width:100%}
	.shedule_wrap .container{ max-width:400px}
	.top .shedule_wrap .labelinfo span{ margin:0 5px}
	.top .shedule_wrap .labelinfo{}
}



/**************
content
**************/
#content{ clear: both; float: none; min-height:70vh; background:#fff; padding-bottom:150px; display: flex; flex-direction: column; position: relative }
@media only screen and (max-width: 1023px){
	#content{padding: 0 20px}
}
@media only screen and (max-width: 767px){
	#content{ min-height:300px; padding-bottom:50px; position:relative}
}
/**************
footer
**************/
footer { border-top: 1px solid var(--gray-300-color); padding: 40px; padding-bottom: 60px;
	&>p{border-top: 1px solid var(--gray-300-color); padding-top: 40px; font-size: 12px; color:var(--gray-600-color) }
	&>*{ width: 100%; max-width:var(--area-width); margin: 0 auto }
	.sns_box, .sns_box ul{ display: flex; gap:1.5rem; align-items: center}
	.sns_box a{ width: 40px; height: 40px; display: block}
	.sns_w{ display: flex; align-items: center; justify-content: space-between; gap:3rem; margin-bottom:38px}

	.n_letter .form, .n_letter{ display: flex; align-items: center; gap:24px; width: 100%;
		&>*{ width: 100%}
		h3,  button{ flex: none; width: auto}
		h3{ font-size: 1.75rem; font-weight: 600}
	}
	.n_letter .form{ gap:0;
		[type="text"]{ border: 1px solid var(--gray-300-color); height: 60px; width: 100%; max-width: 400px}
		button{ background:var(--gray-300-color); display: flex; align-items: center; justify-content: center; padding: 0 1rem; color: var(--black-color); font-size: 1rem; height: 60px  }
	}

	.seoul_w{border-top: 1px solid var(--gray-300-color); height: 72px; display: flex; align-items: center;
		div#seoul-common-gnb {position: relative !important; background: none !important;}
		div#seoul-gnb-plugin {background: none !important; border: none !important;}
		div.seoul-gnb-holder {max-width: 100% !important;}
		p.seoul-gnb-link a {background: url(//www.seoul.go.kr/seoulgnb/images/icon_set_common.png) no-repeat -2px -165px !important;}
		#seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-icon-notice {background: url(//www.seoul.go.kr/seoulgnb/images/ico-sprite-common-gnb.png?ver1) 1px -45px no-repeat !important;}
		#seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-news dd a, #seoul-gnb-plugin .seoul-gnb-menu > dd > a, #seoul-gnb-plugin .seoul-gnb-menu > dd .seoul-gnb-icon-menu4 {color: var(--gray-800-color) !important;}

	}
	.spo_w{border-top: 1px solid var(--gray-300-color); display: flex; justify-content: space-between;
		&>*{ padding: 40px 0; width: 100%; display: flex; flex-direction: column; gap:24px; }
		h3{ font-size: 1rem; font-weight: 600}
		.etc_box{ width: 255px; flex: none; padding: 40px 0 40px 40px; display: flex; flex-direction: column; gap:1rem;
			.w3c{ width: 100px}
			img{ max-width: 100%; height: auto !important;}
			.banner_seoul_s h4{background: url("../img/seoul_logo.svg") no-repeat 0% 50%; height: 20px; width: 100%; background-size: contain; filter: grayscale(1); margin-bottom: 1rem}
		}
		.orginfo_box{ width: 45%; padding: 40px; gap:24px; border-right: 1px solid var(--gray-300-color);
			ul{ display: flex; flex-direction: column; gap:12px}
			a{ color: var(--gray-800-color); font-size:0.875rem }
			a:hover{color: var(--gray-900-color); }
		}
		.adress_box{border-right: 1px solid var(--gray-300-color);
			ul{color: var(--gray-800-color);display: flex; flex-direction: column; gap:12px; padding-right: 40px; }
			select{ width: auto; color: var(--gray-600-color); height: 48px}
			button{ border: 1px solid var(--gray-300-color); height: 48px; padding: 0 1rem; margin-left: -1px; color: var(--gray-600-color)}
			.out_link{ display: flex; align-items: center}
			.out_link>*:focus, .out_link>*:hover{z-index: 2; border-color: var(--black-color); color: var(--black-color)}
		}

	}
}

@media only screen and (max-width: 1023px){
	footer {font-size: 14px; padding: 40px 20px;
		.n_letter .form, .n_letter, .sns_box, .sns_box ul {gap:1rem}
		.sns_box ul {gap:0.5rem}
		.n_letter .form, & .n_letter {
			h3{font-size: 1.4rem}
		}

		.spo_w {
			.orginfo_box {padding: 40px 1rem}
			& .adress_box {
				ul { padding-right: 1rem}
			}
			.etc_box{ padding-left: 1rem}
		}
	}
}

.move-top{ position: fixed; right:30px; bottom:60px;border:1px solid rgba(30,30,30,0.15); width:56px; height:56px; background:rgba(0,0,0,0.05); line-height:1; text-align:center; opacity:0; transition:.3s; z-index:-1; visibility:hidden; border-radius: 100%;
	&.show{ z-index:5; opacity:1; visibility:visible }
	a{ display:block; width:100%; height:100%;background: url("data:image/svg+xml,%3Csvg width='24' height='15' viewBox='0 0 24 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.71422 13.7142L11.9999 2.28564L22.2856 13.7142' stroke='%23222222' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;}
	a > span{display: block;overflow: hidden;position: absolute !important;left: -9999px;width: 1px;height: 1px;font-size: 0;line-height: 0;text-indent: -9999px;}
}


@media only screen and (max-width: 767px){
	.move-top{ right:10px; width: 40px; height: 40px; bottom: 40px}
	.move-top a{ background-size: 16px}
	footer {
		&>p{ padding-top: 24px; margin-top: 24px}
		.sns_w, .spo_w{ flex-direction: column; gap:0}
		.sns_w{gap:24px; align-items: flex-start}
		.sns_box a{ width: 30px; height: 30px; background-size: 20px}
		.n_letter{ flex-direction: column; align-items: flex-start}
		.n_letter .form, & .n_letter {gap:8px 0;
			h3{font-size: 1.25rem}
			[type="text"],button{ height: 48px}
		}
		.spo_w{flex-direction: row; flex-wrap: wrap; gap:24px}
		.spo_w .adress_box {padding: 24px 0; border: none; width: 100%; border-bottom: 1px solid var(--gray-300-color);
			ul{gap:8px}
		}
		.spo_w .orginfo_box, .spo_w .etc_box{padding: 0; border-right: 0; width: auto}
		.orginfo_box .sitemap {display: none;}
		.spo_w .etc_box{ max-width: 150px}
	}


}




/**************
팝업
**************/
.modal{ position: fixed; left:0; top:0; z-index:190; display:none; background: rgba(30,26,16,0.7); width:100%; height:100%;  }
.modal.active{ display:block}
.modal .popup{ background:#fff; overflow:hidden; padding:0px;left:50%; top:50%; overflow-y:auto; border-radius:0px;  box-shadow:10px 10px 12px rgba(30,30,30,0.2) ; transform:translate(-50%,-52%); position:absolute; width:620px; max-height:90vh; }
.modal .popup2{ background:#fff; overflow:hidden; padding:0px; left:50%; top:50%; overflow-y:auto; border-radius:0px;  box-shadow:10px 10px 12px rgba(30,30,30,0.2) ; transform:translate(-50%,-52%); position:absolute; width:800px; max-height:90vh; }
.modal h2{ color:var(--white-color); font-size:1.5rem; font-weight:500; margin:0; padding:20px;position: relative; background:var(--black-color); text-align: left;}
.modal h2 strong{ font-weight:300; }
.modal .popfoot{text-align:right; padding:30px;background: rgba(30,30,30,0.105);}
.modal .popfoot .close{ font-size:13px; line-height:30px; padding:0 15px; border:none; background:#ed4043; color:#fff; font-weight:500}
.modal .popfoot label{ color:#000; font-weight:400; font-size:1rem; padding-right:10px }
.modal .popup > .close{ position:absolute; right:20px; top:20px; border:none; background:none}
.modal .popup > .close:before{font-family: 'spo'; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content:"\e646";font-size:1.25rem ; color:#fff}
.modal p{font-weight:400; letter-spacing: 0; font-size: 1.125rem; word-break: keep-all;}
.modal p strong{font-weight: 700; color:#01aeb2 }
.modal div.txt p strong{ color: #000; font-size: 1.15rem}
.modal .popup .con{ padding: 30px}
.modal .popup .con h3{ color:  #01aeb2; font-size: 1.42rem; border-bottom: 1px solid  #01aeb2; margin: 0; padding: 10px 0 10px 0; margin-bottom: 20px}
.modal .popup .find {margin-top: 20px; text-align: center;}
.modal .popup .find input {width: 64%; padding-right: 15px; margin-left: 8px;}
.modal .btn_box {margin-top: 40px; text-align: center;}
.modal .btn_box button {display: inline-block; min-width: 200px; line-height: 50px; height: 50px; overflow: hidden; color: var(--gray-900-color); font-size: 1.125rem; font-weight: 700; padding: 0 20px; text-align: center; background: var(--gray-100-color);}
.modal .btn_box button.key {background: var(--main-color); margin-left: 20px;}
/* 팝업달력 */
.modal [type="text"].date-picker{background: #fff;border: 1px solid #cdcdcd;height: 40px; box-sizing: border-box; padding: 0 5px;  vertical-align: middle;transition: all .3s; width:90px }
.modal button.ui-datepicker-trigger{ vertical-align:middle; padding:0; height:40px; width:30px;transition: all .3s; border:none; outline:none; background:none; font-size:0; position:relative }
.modal button.ui-datepicker-trigger:before{content:"\e6b6"; vertical-align:middle;; font-size:16px; font-weight:normal;font-family: "spo";    font-style: normal;speak: none;display: inline-block;text-decoration: inherit;font-variant: normal;text-transform: none;    -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #000;line-height: 36px;text-indent: 0;width: 100%;  position: absolute;left: 0;top: 0;}
.modal .ui-datepicker {width:320px;background-color:white;box-shadow:1px 1px 0px rgba(70,70,70,0.1); display:none; border:1px solid #ddd; position:relative}
.modal .ui-datepicker-header{}
.modal .ui-datepicker a{ text-decoration:none}
.modal .ui-datepicker .ui-datepicker-title {height:58px;border-bottom:1px solid #ddd;line-height:58px;font-weight:700;font-size:1.25rem;text-align:center}
.modal .ui-datepicker-year{ margin-right:0px;}
.modal .ui-datepicker-month{ margin-left:5px; }
.modal select.ui-datepicker-month{ margin-left:10px}
.modal select.ui-datepicker-year{ margin-right:5px}
.modal .ui-datepicker .ui-datepicker-title option{ font-size:1rem}
.modal .ui-datepicker .ui-datepicker-prev, .modal .ui-datepicker .ui-datepicker-next {display:block;position:absolute;top:15px;width:25px;height:25px;text-indent:-999em;line-height:0;cursor:pointer}
.modal .ui-datepicker .ui-datepicker-prev:before, .modal .ui-datepicker .ui-datepicker-next:before {position:absolute;top:11px;left:0;width:11px;height:2px;margin:auto 0;border-radius:50px;background-color:#222;-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right;cursor:pointer;content:''}
.modal .ui-datepicker .ui-datepicker-prev:after,.modal  .ui-datepicker .ui-datepicker-next:after {position:absolute;top:11px;left:0;width:11px;height:2px;margin:auto 0;border-radius:50px;background-color:#222;-webkit-transform-origin:right;-ms-transform-origin:right;transform-origin:right;cursor:pointer;content:''}
.modal .ui-datepicker .ui-datepicker-prev {left:11px}
.modal .ui-datepicker .ui-datepicker-prev:before {transform:rotate(135deg)}
.modal .ui-datepicker .ui-datepicker-prev:after {transform:rotate(-135deg)}
.modal .ui-datepicker .ui-datepicker-next {right:11px}
.modal .ui-datepicker .ui-datepicker-next:before {transform:rotate(45deg)}
.modal .ui-datepicker .ui-datepicker-next:after {transform:rotate(-45deg)}
.modal .ui-datepicker .ui-datepicker-calendar {width:94%;margin:10px;text-align:center;}
.modal .ui-datepicker .ui-datepicker-calendar th {width:14.28%;height:30px;font-size:1rem;color:#222;font-weight:600}
.modal .ui-datepicker .ui-datepicker-calendar td {position:relative;height:33px;font-size:1rem;color:#444; border:none !important}
.modal .ui-datepicker .ui-datepicker-calendar td .ui-state-active {position:relative;font-weight:bold; color:#fff; background:#94c83d}
.modal .ui-datepicker .ui-datepicker-calendar td .ui-state-active:after {position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;background-color:#0195df;border-radius:100px;z-index:-1;content:""}
.modal .ui-datepicker .ui-datepicker-calendar td.ui-state-disabled {color:#999}
.modal .ui-datepicker .ui-datepicker-calendar td .ui-state-highlight{ font-weight:bold; color:#1e55af}
.modal .picker{ display:inline-block}
.modal .picker + .picker:before{ content:"~"}
.modal .picker label span{ font-size:0; width:0; height:0; overflow:hidden; position:absolute; left:-999px }
.modal .year + span.month:before, .modal .month + span.day:before, .modal .day + span.week:before, .modal .year + span.month:before, .modal .month + span.day:before, .modal .day + span.week:before{ content:"."}

/* 새창 */
.pop_wrap .modal{ display:block; position:relative}
.pop_wrap .modal .popup{ border:none; position:relative; left:auto; top:auto; transform:none; width:100%; height:auto; max-height:none; box-shadow:none; max-width:none; font-size:14px !important }
html.pop,.pop body{font-size:14px;}
.pop_wrap .modal .popup .con{ padding:30px 20px}
html.fixed{ height: 100vh; overflow-y: hidden}

@media only screen and (max-width: 767px){
	.modal .popup{ width:auto; min-width:96%}
	.modal .popup .con{ padding:30px 10px}
	.modal .btn_box{padding-top:30px;}
}


div.nodata{ text-align: center; font-size: 1.2rem; color: #888; padding: 10px 0; width: 100%; align-content: center;}
div.nodata + .footer_box .pagination{ border-top: 0}
div.nodata.big{ background: #fff !important; padding: 60px !important; border: none !important}
div.nodata.big:before{font-family: 'spo'; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content:"\e720"; display: block; margin-bottom: 30px ; font-size: 3rem}

/* 사이트맵 */
#SiteMap .popup{ width: 100%; min-width: 1100px; max-width: 1400px;  background: none; overflow: inherit}
#SiteMap .popup h2{ visibility: hidden; height: 0; overflow: hidden; }
#SiteMap .popup > .close{ top:0}
#SiteMap .popup .con{ background: #fff; overflow: hidden; overflow-y: auto;height: 830px; max-height: 85vh; padding: 0; border-radius: 1rem}
#SiteMap .popup ul.hg_main > li + li{ border-top: 1px solid rgba(200,200,200,0.85)}
#SiteMap .popup ul.hg_main > li{display: flex; width: 100%;}
#SiteMap .popup ul.hg_main{ display: flex; flex-direction: column;  }
#SiteMap .popup ul li strong{ display: flex; align-items: center; width: 240px;font-weight: 600; font-size: 1.5rem; height: 100%; padding: 30px;background:rgba(200,200,200,0.25);  flex: none; transition: .3s  }
#SiteMap .popup ul li .hg_sub{  width: calc(100% - 240px); padding: 30px; background: #fff; height: 100%; font-size: 1rem; display: flex; gap:30px; flex-wrap: wrap}
#SiteMap .popup ul li{ clear: both; float: none; overflow: hidden}
#SiteMap .popup ul li .hg_sub > li{  width: calc(20% - 24px); margin: 5px 0;font-weight: 700; font-size: 1.2rem}
#SiteMap .popup ul li .hg_sub > li ul { margin-top: 10px}
#SiteMap .popup ul li .hg_sub > li ul li{ font-weight: 500; font-size:1rem; line-height: 1.7}
#SiteMap .popup ul li .hg_sub a{ color: rgba(50,50,50,0.8)}
#SiteMap .popup ul li .hg_sub > li:hover > a{ color:rgb(219, 93, 19);}
#SiteMap .popup ul li .hg_sub > li ul li:hover a{ color:#000}
#SiteMap .popup ul.hg_main > li:hover strong{ background:var(--main-color); }
#SiteMap .popup .hg_main2{border-top: 1px solid rgba(200, 200, 200, 0.85)}
.pad #SiteMap .popup{ width: 100%; min-width: auto; max-width: none }
@media only screen and (max-width: 767px){
	.gb_footer_bottom .policy li.sitemap{ display: none}
}



/**20200810광고배너 추가
.ad_banner{ width: 100%; text-align: center; line-height: 0}
.ad_banner img{ max-width: 100%}
.ad_banner02{ max-width: 1140px; margin: 40px auto -40px auto; border-top:1px solid #ddd; padding:40px 0 0 0}
.ad_banner03{ max-width: 300px}
.m_ad_banner{ display: none}
.mobile .ad_banner{ display: none}
.mobile .m_ad_banner{ display: block; }
.mobile .ad_banner01 img{ min-height:60px}
.m_ad_banner.ad_banner03{ padding: 0 10px; max-width: 100%}
.m_ad_banner.ad_banner02{ border: none; padding: 0 10px; margin: 30px auto -80px auto}
 */


@media (max-width: 1023px) {
	.footer-banner {margin-top: 1em;margin-bottom: 1em; text-align: center; float: none;  width: 100%;}
	#SiteMap .popup { min-width: inherit; padding: 0 40px;}
	#SiteMap .popup .con {height: auto;}
	#SiteMap .popup ul li strong {padding: 20px; width: 140px; font-size: 1.125rem;}
	#SiteMap .popup ul li .hg_sub {padding: 20px; width: calc(100% - 140px); gap: 20px;}
	#SiteMap .popup ul li .hg_sub > li {width: auto; margin: 0; font-size: 1rem;}
	#SiteMap .popup ul li .hg_sub > li ul li {font-size: 14px;}
	div.nodata {font-size: 1.125rem;}
}


/* swiper */
.swiper-button-next,  .swiper-button-prev, .swiper-button-pause, .swiper-button-play{ width: 28px !important; height: 28px !important; display: block;  margin: 0 !important; top: 0 !important; border: none !important; border: none }
.swiper-button-next:after,  .swiper-button-prev:after{font-family: 'spo' !important; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;content: "\e64a" !important; display: block;  box-sizing: border-box; color:#000; font-size: 1.35rem !important }
.swiper-button-next:after{content: "\e649" !important; }
.swiper-button-play {background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L21 14L9 23' fill='%23000000'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;display: none; opacity: 0.8 }
.swiper-button-pause {background: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5V23' stroke='black' stroke-width='2'/%3E%3Cpath d='M19 5V23' stroke='black' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; opacity: 0.8}
.swiper-button-pause:hover,.swiper-button-play:hover{ opacity: 1}

.swiper-button-next, .swiper-button-prev, .swiper-pagination{ position: relative !important; left: auto !important; right: auto !important; backgrounda: none !important; margin: 0 !important; top: auto !important; bottom: auto !important; }

.swiper-pagination{ align-items: center; justify-content: center; display: flex}

.swiper-pagination-bullet{width: 20px !important;height: 20px !important;}
.swiper-pagination-bullet-active {width:34px !important;  height:20px !important; border-radius:100px !important;}
.swiper-button-play{ display: none}



/* 공연검색 : 메인과 공연예매 메뉴에 동시 사용 */
.concert_w> h2 { text-align: center; font-size: 42px; font-weight: 700; line-height: 52px; letter-spacing: -0.84px;}
.concert_bx{ display: flex; flex-direction: column;
	img{ max-width: 100%}
}

.search-box {background-color: var(--white-color); width: 100%; max-width: 680px; height: 60px; padding: 0; border-radius: 2px; border: 1px solid var(--gray-300-color); margin: 0 auto; position: relative; display: flex; align-items: center;
	&:focus-within{border-color:  var(--gray-800-color) }
	input::placeholder {color: var(--gray-600-color);}
	input.search-txt { padding: 0; background: none; border: none; outline: none !important; font-size: 18px; font-weight: 400; letter-spacing: -0.36px; height: 100%; width:100%; transition: 0.5s; line-height: 40px; padding-left: 24px}
	.btn_search { height: 100%; align-items: center; border: 0;  width: 56px; flex: none}
	.bt_clear{ width: 32px; height: 100%; flex: none}
}

.c-header {display: inline-flex; align-items: center; justify-content: center; gap: 40px; width: 100%; padding: 0; margin-bottom: 28px;
	.tabs {border: 0; padding: 12px 0; color: var(--gray-600-color); position: relative;transition: .3s}
	.tabs::before {content: ''; position: absolute; left: 50%; bottom: 0; height: 2px; width: 0%; background: var(--black-color); transition: .3s;transform: translate(0%,0)}
	.tabs.on {color: var(--black-color);}
	.tabs.on::before {width: 100%; transform: translate(-50%,0)}
}

article#listPerf .concert_bx {margin-top: 28px;}

.sch_option{
	&>div:not(.blank){ display: none; margin-bottom: 28px}
	.blank{ margin: 0; padding: 0; position: absolute; left: 0; top: 0; visibility: hidden; opacity: 0; z-index: -1}
	.opt_month{ position: relative; margin-top: -1rem;;
		dl {display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 2; background: #fff}
		dt { min-width: 192px;flex: none; display: flex; flex-direction: column; gap:14px; padding-top:2px; padding-right: 20px;}
		dt .tit { font-weight: 700; font-size: 2rem;letter-spacing: -0.32px;}
		dt .btn-box a { color:var(--gray-800-color) }
		dd {display: flex; width: calc(100% - 192px); position: relative; padding-left: 24px; padding-right: 50px; }
		dd:before, dd:after{background: linear-gradient(to left, rgb(255 255 255) 0%, rgb(255 255 255 / 0%) 100%); width: 60px; height: 100%; position: absolute; right: 0; z-index: 3; content: ""; display: block}
		dd:before{background: linear-gradient(to left, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 100%) 100%); right: auto; left: 0; width: 30px }


		ul > li {position: relative; text-align: center;font-size: 1.312rem; flex: none; width: 52px}
		.day {height:40px;width: 100%; align-content: center; font-size: 1rem; color: var(--gray-700-color);}
		.date {height:52px; width: 52px; margin: 0 auto; position: relative; align-content: center; padding: 3px}
		.date > button {font-weight: 600; border: 0;font-size: 1.2rem;border-radius: 50%; background: var(--main-color); color: var(--black-color); width: 96%; height: 96%;}
		.date > button:disabled{ background: rgba(0,0,0,0); font-weight: 400; opacity: 1;  cursor: auto}
		.date > button.active{background: #000 !important; color: #fff !important;outline: 2px dashed #000 !important;}

		.date.today > button::before {content:''; width: 5px; height: 5px; background: var(--black-color); border-radius: 50%; position: absolute; left: 45%; top: 10px;}


		.labelinfo{ position: absolute; right:120px; bottom: 15px; opacity: 0; z-index: 1 }
		&.on .labelinfo{ opacity: 1}
		.arrow-box button{ width: 36px !important; height: 36px !important;} 
		.arrow-box{ position: absolute; right: 0; top: 0px; transition: .3s .3s; opacity: 0; } 
	}
	.on .arrow-box{ opacity: 1;top: -40px;transition: .3s .3s;  } 
}
section.concert .sch_option .opt_month .labelinfo{ position: relative; right: auto; bottom: auto; padding-top: 10px;}

.arrow-box { display:flex; align-items: center; justify-content: flex-end; gap: 0px; }
.arrow-box button{ width: 56px !important; height: 56px !important}

@media only screen and (max-width: 1023px){
	.concert_w> h2{ font-size: 1.5rem; line-height: 42px}
	.search-box{ height: 46px}
	.search-box input.search-txt{ font-size: 1rem}
	.c-header {margin:12px 0 24px 0;
		.tabs { padding: 9px 0}
	}

	.sch_option {
		&>div:not(.blank){ margin-bottom: 24px}
		dt .btn-box a { font-size: 14px; position: absolute; right: 0; top: 50%; transform: translate(0,-50%)}
		.opt_month {
			dl{ flex-direction: column; gap:12px}
			dt{ flex-direction: row; justify-content: center; width: 100%; align-items: center; position: relative}
			dd{ width: 100%; padding-left: 0}
			dd:before, dd:after{ display: none}
			dt .tit {font-size: 1.125rem; letter-spacing: -0.16px;}
			ul > li{font-size: 1rem}
			.day{ height: 44px}
			.date{ width: 44px; height: 44px}
			.date > button{font-size: 1rem}
			.arrow-box{ display: none}
			.date.today > button::before {top: 4px;}
		}
	}


}



/* 공연리스트 */
.c-wrap{}
.thum_w .list_box{display: flex; align-items:stretch; justify-content: flex-start; gap:80px 20px; flex-wrap: wrap;
	.list{ width: calc(25% - 15px) ; flex: none; display: flex; flex-direction: column; gap:20px; min-width: 205px;}
	.list>a{ width: 100%;display: flex; flex-direction: column; gap:20px; height: 100% }
	.badge-box{ padding: 0} ;

	.list-img, .thumnail,.img{ object-fit: cover; border-radius: var(--radius-S); overflow: hidden; display: block; background: #ddd;
		img{ width: 100%; height: 100%; aspect-ratio: 3/4.5;  object-fit: cover;  object-position: center;}
	}
	.noImg:before{ content: ""; display: block; width: 100%; height: 100%; position: relative; aspect-ratio: 3/4.5;  object-fit: cover;  object-position: center;background: url("../img/logo_spo.svg") no-repeat 50% 50%;background-size: 50%;}

	.list-con, .list-txt{ display: flex; flex-direction: column; gap:8px; text-align: left;
		h3{letter-spacing: -0.56px; overflow: hidden; text-overflow: ellipsis; margin-bottom: -6px; text-align: left; font-size: 1.25rem; font-weight: 600; padding-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.32;}
		.font-subTitle{ color:var(--gray-800-color) }
		.font-b4{ color:var(--gray-600-color)}
	}
	.badge-box{ height: auto; display: flex; gap:6px; justify-content: flex-start;
		[class^="badge-"]{height: 34px}
	}
	.list-con.clone {display: none}
}
.thum_w .list_box:has(.list-con:not(.clone) .btn_box)
.list-con:not(.clone),
.thum_w .list_box:has(.list-con:not(.clone) .btn_box)
.list-con:not(.clone) .list-txt {
	height: 100%;
}

@media only screen and (max-width: 1023px){

	.thum_w .list_box{gap:40px 20px;
		.list{ min-width:auto}
		.list>a{gap:12px}
		.badge-box{ flex-wrap: wrap;
			[class^="badge-"]{height: 24px}
		}
		.list-con, .list-txt{gap:8px;
			h3{font-size: 1.125rem; letter-spacing: 0; white-space: normal;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;margin-bottom: 6px}
			.font-b4{ font-size: 12px}
		}
	}
	.thum_w .list_box:has(.btn_box) {
		.list-con, .list-con .list-txt {height: auto;}
	}
}
@media only screen and (max-width: 767px){
	.thum_w .list_box{
		.list{width: calc(50% - 10px) ;}
	}

}


/* 공연예매 메뉴에서의 공연리스트 */
section.concert .concert_w{ display: flex; flex-direction: column; gap:40px; width: 100%; margin-top: 0px;
	.concert_bx{ gap:10px}
	.search-box{ height: 52px}
	.thum_w .btn_box{flex-wrap: nowrap}

}

@media only screen and (max-width: 1023px){
	section.concert .concert_w .thum_w li{ position: relative}
	section.concert .concert_w .thum_w .btn_box button:not(.detail){ display: none}
	section.concert .concert_w .thum_w .btn_box{ position: absolute; left: 0; top: 0; background:none; width: 100%; height: 100%}
	section.concert .concert_w .thum_w .btn_box button{ font-size: 0; line-height: 0; text-indent: -999px; overflow: hidden; width: 100%; height: 100%; background: none; border: none}



	section.concert .concert_w{
		.sch_option .opt_month dt{ justify-content: flex-start; padding-top: 0 }
		.sch_option .opt_month dt .tit{gap:1rem}
		.sch_option .opt_month dt .tit select, .monthtit select{font-size: 1.125rem !important; letter-spacing: -0.16px !important;}
		.sch_option .opt_month dt .tit select.sel_year, .monthtit select.sel_year{ min-width: 100px !important}
		.c-header{ margin-top: 0}
	}

	section.concert{
		.hgroup .inner h2{}
		.hgroup .btn_box{top: 80px;
			button, a{height: 40px; line-height: 40px;}
		}
	}

}


.thum_w .btn_box{ display: flex; gap:10px; justify-content: space-between; padding-top: 0;flex-wrap: nowrap;
	button,a{ display: flex; white-space: nowrap; align-items: center; justify-content: center; border: 1px solid var(--gray-300-color); background: #fff; height: 50px; width: 100%; font-size:1.125rem; font-weight: 700; color: var(--gray-900-color); gap:8px; padding: 0;
		&.ticket:after{ display: block; flex: none; background: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 6.55556H6V19H18.4444V12M12.6111 12.3889L20 5M20 5H15.3333M20 5V9.66667' stroke='%23949494' stroke-width='1.5'/%3E%3C/svg%3E%0A") no-repeat 50% 50%; content: ""; width: 25px; height: 25px;}
		&:not(:disabled):hover,&:not(:disabled):focus{ background: var(--gray-900-color); border-color:var(--gray-900-color); color: #fff; }
		&.ticket:hover:after,&.ticket:focus:after{  }
		&:disabled{ cursor: auto; color: var(--gray-600-color); border-color: var(--gray-200-color)  }

	}
}

.opt_month{
	.labelinfo{display: flex; align-items: center; justify-content: flex-end; gap:1rem;}
	.play1, .play1 i{ background:rgba(239, 111, 56, 0.48) !important; color: #000 !important; outline:2px dashed var(--sub-color-amber);outline-offset:1px}
	.play2, .play2 i{ background:rgba(245,155,21,1) !important; color: #000 !important; outline: 2px solid var(--main-color);outline-offset:1px}
	.play3, .play3 i{ background:rgba(139,98,82,.25) !important; color: #000 !important; outline: 2px dotted var(--sub-color-brown);}
	.play4, .play4 i{ background:rgba(179, 96, 226, .25) !important;; color: #000 !important; outline: 3px double var(--sub-color-purple);}
	.play5, .play5 i{ background:var(--gray-400-color) !important; color: #000 !important; outline:3px dashed var(--gray-400-color)}
	.play6, .play6 i{ background:var(--white-color) !important; border: 1px solid var(--gray-500-color) !important; color: var(--gray-900-color) !important; }
	.labelinfo [class^="play"]{ display: flex; align-items: center; color:var(--gray-600-color) !important; gap:4px; border: none !important; outline: none !important; background: none !important; font-size: 13px; }
	.labelinfo [class^="play"] i{ width: 14px; height: 14px; border-radius: 100%; }
}






/**************
에러페이지
**************/

body.error{ background: #f3f6fa}
body.error .error_bx{text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)}
body.error h2{font-size: 200px;color: rgb(219, 93, 19);; margin-bottom:-0.1em; line-height: 1 }
body.error p{font-size:50px;color: #555;}
body.error p.dec{font-size:20px;}
body.error a{ padding-top: 20px; display: inline-block; font-size: 18px; text-decoration: underline; color: #1429a0}


/* 포토뷰어 */

.photoviewer-modal {position: absolute; z-index: 1090; color: #333;  outline: none; }
.photoviewer-modal:focus-visible {outline: thick solid rgba(247, 99, 0, 0.507); }
.photoviewer-inner {position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.photoviewer-maximized {position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; }
.photoviewer-maximized.photoviewer-modal {border-width: 0; border-radius: 0; }
.photoviewer-maximized .photoviewer-header {border-radius: 0; }
.photoviewer-maximized .photoviewer-resizable-handle {display: none; }
.photoviewer-button {display: inline-block; min-width: 40px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 1; background: none; border-width: 0; color: inherit; cursor: pointer; outline: none; }
.photoviewer-button:hover {color: #111; }
.photoviewer-button:focus {background-color: rgba(0, 0, 0, 0.1); }
.photoviewer-button svg {display: inline-block; font-size: inherit; width: 1em; height: 1em; overflow: visible; vertical-align: -0.125em; width: 30px; height: 30px; }
.photoviewer-button svg path{fill:#fff}
.photoviewer-header {position: relative; z-index: 2; min-height: 30px; border-radius: 5px 5px 0 0; overflow: hidden;padding:8px 0; opacity: 0; }
.photoviewer-header .photoviewer-toolbar {float: right; }
[dir=rtl] .photoviewer-header .photoviewer-toolbar {float: left; }
.photoviewer-header .photoviewer-button {height: 30px; }
.photoviewer-header .photoviewer-button:hover {background-color: rgba(0, 0, 0, 0.1); }
.photoviewer-header .photoviewer-button-close:hover {color: #fff; }
.photoviewer-title {padding: 8px 10px; font-size: 14px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; }
.photoviewer-stage {position: absolute; top: 30px; right: 0; bottom: 40px; left: 0; z-index: 1; border-top: 1px solid rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.6); background-color: #fff; overflow: hidden; }
.photoviewer-image {position: absolute; display: inline-block; min-width: auto; max-width: none; }
.photoviewer-footer {position: absolute; bottom: 0; z-index: 2; width: 100%; height: 40px; text-align: center; }
.photoviewer-align-center {text-align: center; }
.photoviewer-align-center::before {content: ""; display: inline-block; height: 100%; vertical-align: middle; overflow: hidden; }
.photoviewer-align-center .photoviewer-image {position: static; max-width: 100%; max-height: 100%; vertical-align: middle; }
.photoviewer-image-error {display: none; }
.photoviewer-error-msg {vertical-align: middle; }
[dir=rtl] .photoviewer-button-prev,[dir=rtl] .photoviewer-button-next {-ms-transform: rotate(180deg); transform: rotate(180deg); }
.photoviewer-resizable-handle {position: absolute; z-index: 10; }
.photoviewer-resizable-handle-e {top: 0; right: -5px; bottom: 0; left: auto; width: 10px; cursor: e-resize; }
.photoviewer-resizable-handle-s {top: auto; right: 0; bottom: -5px; left: 0; height: 10px; cursor: s-resize; }
.photoviewer-resizable-handle-w {top: 0; right: auto; bottom: 0; left: -5px; width: 10px; cursor: w-resize; }
.photoviewer-resizable-handle-n {top: -5px; right: 0; bottom: auto; left: 0; height: 10px; cursor: n-resize; }
.photoviewer-resizable-handle-se {top: auto; right: -5px; bottom: -5px; left: auto; width: 10px; height: 10px; cursor: se-resize; }
.photoviewer-resizable-handle-sw {top: auto; right: auto; bottom: -5px; left: -5px; width: 10px; height: 10px; cursor: sw-resize; }
.photoviewer-resizable-handle-nw {top: -5px; right: auto; bottom: auto; left: -5px; width: 10px; height: 10px; cursor: nw-resize; }
.photoviewer-resizable-handle-ne {top: -5px; right: -5px; bottom: auto; left: auto; width: 10px; height: 10px; cursor: ne-resize; }
.photoviewer-modal:-ms-fullscreen {top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: black; border-width: 0; border-radius: 0; }
.photoviewer-modal:fullscreen {top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-color: black; border-width: 0; border-radius: 0; }
.photoviewer-modal:-ms-fullscreen .photoviewer-header, .photoviewer-modal:-ms-fullscreen .photoviewer-footer, .photoviewer-modal:-ms-fullscreen .photoviewer-resizable-handle {display: none; }
.photoviewer-modal:fullscreen .photoviewer-header,
.photoviewer-modal:fullscreen .photoviewer-footer,
.photoviewer-modal:fullscreen .photoviewer-resizable-handle {display: none; }
.photoviewer-modal:-ms-fullscreen .photoviewer-stage {top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: transparent; }
.photoviewer-modal:fullscreen .photoviewer-stage {top: 0; right: 0; bottom: 0; left: 0; border-width: 0; background-color: transparent; }
.is-grab {cursor: move; cursor: grab; }
.is-grabbing {cursor: move; cursor: grabbing; }
.photoviewer-loader {position: absolute; top: 30px; left: 0; right: 0; bottom: 40px; z-index: 2; text-align: center; color: #333; }
.photoviewer-loader::before {content: ""; position: relative; display: inline-block; width: 36px; height: 36px; box-sizing: border-box; border-width: 5px; border-style: solid; border-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5); border-radius: 100%; vertical-align: middle; animation: photoviewerLoading 1s infinite linear; }
.photoviewer-loader::after {content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; overflow: hidden; }
@keyframes photoviewerLoading {0% {transform: rotateZ(0deg) translate3d(0, 0, 0); }
	100% {transform: rotateZ(360deg) translate3d(0, 0, 0); }
}

.photoviewer-stage {top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(25,25,25,0.89); border: none;backdrop-filter: blur(2.5px); }
.photoviewer-footer { bottom: 50px;opacity: 0;}
.photoviewer-footer .photoviewer-toolbar { display: inline-flex; background-color: rgba(0, 0, 0, .5); border-radius: 5px; border-radius:30px; align-items: center; justify-content: center; gap:10px; padding:8px 16px; }
.photoviewer-header, .photoviewer-footer { pointer-events: none;}
.photoviewer-title { color: #fff;}
.photoviewer-button { color: #ccc; pointer-events: auto; }
.photoviewer-footer .photoviewer-button:hover { color: white;}
.photoviewer-modal:hover .photoviewer-header, .photoviewer-modal:hover .photoviewer-footer, .photoviewer-modal:focus-within .photoviewer-header, .photoviewer-modal:focus-within .photoviewer-footer {opacity: 1; }


.noImg{background: url("../img/logo_spo.svg") no-repeat 50% 50%;background-size: 50%; position: relative; display: flex;width: 100%; height: 100%; filter: grayscale(1) opacity(0.5); max-height: 518px; height: 100 !important;%;}
.noImg:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0}
.noImg img{ position: absolute; z-index: -1; opacity: 0;left: 0; top: 0}