@charset "UTF-8";
:root {
    --gaphalf: 6px;
    --gap: 12px;
    --gap2: 24px;
    --gap3: 36px;
    --navy: #3243a9;
    --darknavy: #142272;
    --darkblue: #003d75;
    --blue: #0062bd;
    --grey-33: #333333;
    --grey-66:#666666;
    --grey-dd:#dddddd;

    --blue-1:#e8f4ff;
    --blue-2:#d9edff;
    --blue-3:#c9e5ff;
    --blue-4:#b9ddff;

    --blue-5:#a9d4ff;
    --blue-6:#98ccff;
    --blue-7:#87c3ff;
    --blue-8:#75bbff;

    --blue-9:#63b2ff;
    --blue-10:#51a9ff;
    --blue-11:#3fa0ff;
    --blue-12:#2d97ff;

    --blue-13:#1c8eff;
    --blue-14:#0b84ff;
    --blue-15:#0079f0;
    --blue-16:#006bd4;

}




@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-9Black.woff) format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-8Heavy.woff) format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-7ExtraBold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-6Bold.woff) format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-5Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-4Regular.woff) format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'S-CoreDream';
    src: url(../fonts/S-CoreDream-3Light.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Jalnan';
    src: url('../fonts/Jalnan2.woff2') format('woff2'),
        url('../fonts/Jalnan2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ---------------font-------------------- */

html, body {margin: 0 auto;color:var(--grey-33);font-size: 16px; font-family: 'Pretendard Variable';letter-spacing: -0.5px;word-wrap: break-word;word-break: keep-all;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-family: 'S-CoreDream';font-size: 16px;font-weight: normal;letter-spacing: -1px;}
p {line-height: 1.25;font-size: 17px;}
* {box-sizing: border-box;transition:  all .2s ease}
*:focus-visible {outline: dotted 2px red;outline-offset: 1px;}
a {text-decoration: none;}
a:hover, a:focus-visible {text-decoration: underline;}
a:hover > *, button:hover > * {font-weight: 600;text-decoration: underline;}

.text-center {text-align: center!important}

.banner {display: flex;flex-direction:column;gap:var(--gap);align-items: center;justify-content: center;padding:var(--gap2);padding-top:0;background: #EBF2FC url('../images/bg_top_area.jpg'); background-repeat: no-repeat;text-align: center;}

.banner h1 {padding: var(--gap2) var(--gap);background: #fff;border-radius: 0 0 var(--gap2) var(--gap2);box-shadow: 10px 10px 10px rgba(0,0,0,.05)}
.banner h2 {font-family: 'Jalnan';font-weight: normal;color: var(--darkblue);font-size:40px;padding-top:var(--gap2);}
.banner h2 span {color: var(--grey-33)}

.tabs { display:flex; flex-wrap:wrap; gap:var(--gap); padding: var(--gap);}

.tabs button { font-family: 'S-CoreDream'; padding:var(--gap); border:1px solid #ddd; background:#fff; cursor:pointer; border-radius:var(--gap);display: flex;align-items: center;justify-content: center;flex-direction: column}
.main-tabs button > * {font-size:18px;font-weight: 500;}
.main-tabs button.active > * {font-weight: 600;}

.tabs button img {flex-grow: 0;flex-shrink: 0}
.main-tabs button { border: solid 3px; border-color:var(--blue); color:var(--blue); border-color:var(--blue);}

.main-tabs button.active { background:var(--darkblue); border-color:var(--darkblue); color: #fff;}

.main-tabs button.active img {  filter:invert(1) grayscale(1) brightness(3);}

.sub-tabs button > * {font-size:16px;font-weight: 400;}
.sub-tabs button.active > * {font-weight: 500;}
.sub-tabs button.active {background: #f1f1f1}
.sub-tabs { display:none; }
.sub-tabs[data-sub-group="region"]{flex-direction: column;align-items: center;justify-content: center;}
.sub-tabs[data-sub-group="region"] button {max-width:50%}
.sub-tabs button img {height:50px;margin-bottom: 10px}

.program-list { display:flex; flex-wrap:wrap; gap:var(--gap); margin: 40px 0 40px var(--gap)}
.program-item { width:calc(25% - var(--gap)); border:3px solid var(--grey-dd); border-radius: var(--gap);display: flex;flex-direction: column;align-items:center;transition: none;}
.program-item:not([data-main*="guro"]) .program-status { display: none; }
.program-item:hover {outline: solid 3px var(--blue);outline-offset: -3px;}
.program-item-header {display: flex;align-items: center;justify-content: start;flex-direction: column;width:100%;border-bottom:solid 1px var(--grey-dd);text-align: center;padding: 20px 10px;height:100%;align-items: stretch;align-self: stretch;}
.program-status {display: flex;flex-direction: row;gap:var(--gaphalf);padding-bottom: 10px;align-items: center;justify-content: center;width: 100%;}
.program-title {display: flex;align-items: start;justify-content: center;height: 100%;}
.program-item h5 {font-size: var(--gap2);font-weight: 600; text-overflow: ellipsis;overflow: hidden; word-break:keep-all;display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;}
.load-more { margin:40px auto; display:block; cursor:pointer;position: relative;width:200px}
.load-more::before {position: absolute;content: '＋';right:5px;top:0;color:#fff;font-size: 35px;font-weight: 400;}
.region-map {padding-right:20px;width:100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.region-map-zone {width:70%}
.m-br, .t-br {display: none;}
/* 반응형 */


@media(min-width:1201px) {.main-tabs button {flex: 1 1 0} .sub-tabs {justify-content: center;gap:5px}.sub-tabs button {padding-left: 40px; padding-right: 40px; width:160px}.sub-tabs[data-sub-group="region"] button {width:auto}}
@media(min-width:1600px) {.sub-tabs.long button {width:160px} }
@media(min-width:1201px) and (max-width:1599px) {.sub-tabs.long button {width:120px;}.t-br{display:block}}
@media(max-width:1200px){ .program-item, .tabs button {width:calc(33.333% - var(--gap));} .tabs { padding-right:0}.region-map-zone {width:100%}.sub-tabs[data-sub-group="region"] button {width:auto}}
@media(max-width:1024px){ .program-item {width:calc(50% - var(--gap));}.tabs button img {height:50px} }
@media(max-width:640px) {.tabs button{width:calc(50% - var(--gap));} .program-item {width: 100%;}.program-list { margin-right: var(--gap)} .tabs button{flex-direction: row;position: relative;}.tabs button img {height: 40px;position: absolute;left:10px;top:5px}.tabs button h3, .tabs button h4 {text-indent: 10px} .sub-tabs[data-sub-group="region"] h4 {text-indent: 0}.sub-tabs button img {height:30px;top:8px}}


/*260326수정*/
@media(max-width:480px){
    .m-br{display: block;}
    .program-item-bottom div dl dt {width:120px!important}
    .program-item-bottom div dl dd {width:calc(100% - 120px)!important}
}
@media(max-width:400px){.tabs{padding-right:var(--gap)} .tabs button{width:100%;}.tabs button h3, .tabs button h4 {text-indent: 0}}
/*260326*/


.btn {padding: var(--gaphalf) var(--gap2);display:flex;align-items: center;justify-content: center;color:#fff;border:0;flex-grow:0;border-radius:var(--gaphalf);white-space:nowrap}
.btn.go {font-family: "S-CoreDream";font-weight: 500}
.btn.mini {font-size: 15px;line-height: 15px;border-radius: var(--gap2);}
.btn.available {background: var(--darkblue)}
.btn.ongoing {background: var(--blue)}
.btn.prior {background:salmon}
.btn.waiting {background: var(--grey-66)}
.btn.waitPar {background: mediumslateblue}
.btn.waitStudy {background: blueviolet;}
.btn.expired, .btn.finished {background:lightgrey;color:#000}


.program-item-bottom{ box-sizing: border-box;padding:20px; width:100% }
.program-item-bottom.conimg { padding:0; width:100%; overflow: hidden; }
.program-item-bottom.conimg img { width:100%; }
.program-item-bottom div dl{ margin-bottom: 10px; display:flex; align-items:flex-start}
.program-item-bottom div dl:last-of-type{ margin-bottom: 24px; }

/*260326수정*/
.program-item-bottom div dl dt{ width: 30%; white-space: nowrap ;font-weight: 600 }
.program-item-bottom div dl dd{ width:calc(100% - 30%); font-weight: 400; text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
/*260326*/

.program-item-bottom div.lc-time-list { display:none; z-index:10; position: absolute; top: 260px; left: 90px; font-size: 10pt; padding: 3px; border: 1px solid #ccc; background-color:#f9f9f9;}
.program-item-bottom div.lc-time-list.on {display:block;}

.load-more {padding: var(--gap) var(--gap3); background: var(--darkblue); color: #fff;border:0;border-radius: var(--gap);font-size: 20px;font-family: 'S-CoreDream';font-weight: 500}

svg * {font-family: 'S-CoreDream'!important;font-weight: 500}

.st1{display:inline;}
.st4{font-size:71.4255px;}
.st7{font-size:90px;}
.st10{font-size:130px;}
.st11{display:inline;fill:#333333;}
.st12{font-size:70px;}
.st14{font-size:103.0039px;}
.st16{font-size:40px;}
.st17{font-size:45px;}
.st20{font-size:100px;}
.st21{enable-background:new;}
.st22{display:inline;enable-background:new;}
text {pointer-events: none;letter-spacing: -5px;fill:var(--darkblue)}

.map-outline{
    fill:white;
    stroke:var(--darkblue);
    stroke-width:8;

    filter: drop-shadow(30px 30px 0px rgba(0,0,0,0.15))
      /* drop-shadow(0 3px 6px rgba(0,0,0,0.15))
      drop-shadow(0 10px 20px rgba(0,0,0,0.12)); */
  }

   text.active, tspan.active{
    font-weight:700;
    fill:#fff
   }

   .region{
    fill:var(--c);

    stroke:var(--blue);
    stroke-width:2;

    cursor:pointer;

    transition:
      filter .2s ease,
      transform .15s ease;
  }


  [data-sub="sugung-dong"] { --c:#d8eaf3; }
  [data-sub="hang-dong"] { --c:#b7c2e4; }
  [data-sub="oryu-1-dong"] { --c:#d1deee; }
  [data-sub="oryu-2-dong"] { --c:#94cef5; }

  [data-sub="gaebong-1-dong"] { --c:#d2f7ff; }
  [data-sub="gaebong-2-dong"] { --c:#bbd1ea; }
  [data-sub="gaebong-3-dong"] { --c:#a1c6ea; }

  [data-sub="gocheok-1-dong"] { --c:#e9f0ff; }
  [data-sub="gocheok-2-dong"] { --c:#c8e0ff; }

  [data-sub="sindorim-dong"] { --c:#e8e8ff; }

  [data-sub="guro-1-dong"] { --c:#d4e8ed; }
  [data-sub="guro-2-dong"] { --c:#b2cae6; }
  [data-sub="guro-3-dong"] { --c:#92aadd; }
  [data-sub="guro-4-dong"] { --c:#bbfaff; }
  [data-sub="guro-5-dong"] { --c:#dfe1ff; }


  [data-sub="garibong-dong"] { --c:#e3e5fd; }


  .region:hover, .region:focus {
    filter:brightness(0.92) saturate(1.1);
    /* transform:translateY(-1px); */
  }

  .region.active{

    stroke:#000;
    stroke-width:3;

    filter:brightness(0.85);
    fill:var(--blue)

    /* transform:translateY(-1px); */
  }

  .no-content{
    display:none;
    text-align:center;
    padding:40px 0;
    color:#666;
    font-size:18px;
   }


   /* 레이어팝업 260327 */
.temp_popup {/* display: none; */position:fixed;top:0;left:0;z-index:110;width:100%;height:100%;}
.temp_popup.active {display:block;}
.temp_popup .bg {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7);}
.temp_popup .layer_box {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width: 570px;border-radius:5px;background-color:#fff;box-shadow:4px 0 15px rgba(0, 0, 0, 0.15);}
.temp_popup .layer_box a {color:var(--blue)}
.temp_popup .layer_box .close_btn {position:absolute; top:45%; right:-20px; width:40px; height:40px; border-radius:50%; background:var(--blue) url('../images/popup_close.png') no-repeat center; font-size:0;border:solid 3px #fff}
.temp_popup .layer_box .close_1day {position:absolute;top:96.5%;left: 25px;width: calc(100% - 25px);background-color: #ffffff;}
.temp_popup .layer_box .title_cts {padding:21px 30px; background-color:#f2f4f7;}
.temp_popup .layer_box .title_cts .title {font-size:20px; font-weight:600; color:#000;}
.temp_popup .layer_box .text_cts {padding: 25px;max-height: 820px;overflow-y: auto;overflow-x:hidden;box-sizing: border-box;background-color: #ffffff;}
.temp_popup .layer_box .text_cts img {max-width: 100%;height:auto}
.temp_popup .layer_box .text_cts .bot_cts {margin-top:30px; padding-top:30px; border-top:1px solid #c2c5d2;}
.temp_popup .layer_box .text_cts .btn_cts {text-align:right;}

@media only screen and (max-width:1000px){
	.temp_popup .layer_box .close_1day {position:absolute;top:95%;left: 25px;}
    .temp_popup .layer_box {width:80%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
}
@media only screen and (max-width:640px){
	.temp_popup .layer_box .close_1day {position:absolute; top:98%; left:10px; }
    .temp_popup .layer_box {width:90%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) ;border:solid 5px #fff; border-bottom:solid 25px #fff;}
    .temp_popup .layer_box .text_cts {padding:15px;max-height: 680px;overflow-y: hidden;}
}

@media (max-width:1000px) and (orientation: landscape) {
	.temp_popup .layer_box {width:60%;top:5px;transform:translate(-50%, 0);}
    .temp_popup .layer_box .text_cts {padding:10px;text-align: center;overflow-y: hidden;/* max-height: 100%; */}
    .temp_popup .layer_box .text_cts img { width:100%; max-height:max-content; }
    .temp_popup .layer_box .close_1day { position:static; padding:10px; }
    .temp_popup .layer_box .close_btn { top:40%; }
}
   /* 260327 */