@charset "utf-8";
/* CSS Document */

/**********************************************************************

 							con_basic

**********************************************************************/

.mt1em{margin-top:1em;}
.ml1em{margin-left:1em;}

/*-- h --*/
.con_basic h4{font-size: 1.6em;font-weight:600;letter-spacing:-1px;margin: 1em 0 .3em;}
.con_basic h4:first-child{margin-top:0;}

.con_basic h5{font-size: 1.4em;font-weight:600;letter-spacing:-1px;position:relative;padding-left: .6em;margin: .8em 0;}
.con_basic h5:before,
.con_basic h5:after{content:""; display:block; width:6px; height:6px; position:absolute; left:0; top:.6em; background:#006341}
.con_basic h5:after{top:calc(.6em + 4px); left:4px; background:#000}
.con_basic h5::first-letter{color:#006341}
.con_basic h5:has(+ .txt_right){margin-bottom: -.5em;}
@media all and (max-width:460px) {
  .con_basic h4{font-size:1.7em; margin:1em 0 .3em;}
  .con_basic h5{font-size:1.4em; margin:.8em 0;}
  .con_basic h5:has(+ .txt_right){margin-bottom: -1.25em;}
}

/*-- list --*/
.con_basic h4 + .list,
.con_basic h5 + .list{margin-top:0;}
.con_basic .list{margin: 2em 0;}
.con_basic .list li{position:relative;}
.con_basic .list>li{padding-left:1em; font-size:1.05em;}
.con_basic .list li:not(:first-child){margin-top:.4em}
.con_basic .list>li:before{content:""; display:block; width:6px; height:6px; background:#000; position:absolute; top:.55em; left:.3em;}

.con_basic .list>li ul{margin:.25em 0}
.con_basic .list>li>ul li{padding-left:.2em; font-size:.95em}
.con_basic .list>li>ul>li:before,
.con_basic .list>li>ul>li:after{content:""; display:block; position:absolute; left:0;}
.con_basic .list>li>ul>li:before{width:5px; height:5px; border:1px solid #000; top:.6em; left:-.3em}
.con_basic .list>li>ul>li:after{width:.4em; height:1px; background:#000; top:calc(.6em + 2px); left:-.7em}

.con_basic .list>li>ul>li>ul>li{font-size:.95em}
.con_basic .list>li>ul>li>ul>li:before{content:""; display:block; width:3px; height:3px; background:#000; transform:rotate(45deg); position:absolute; top:.6em; left:-.3em}

.con_basic .list>li>ul>li>ul>li>ul>li{font-size:.92em; color:#444}
.con_basic .list>li>ul>li>ul>li>ul>li:before{content:""; display:block; width:4px; height:1px; background:#000; position:absolute; top:.7em; left:-.4em}

.con_basic .list02{padding:1em 1.5em; background:#f4f4f4;}
.con_basic .list02>li{font-size:1.1em; border-bottom:1px dashed #ddd; padding-bottom:.5em;}
.con_basic .list02 li:not(:first-child){margin-top:.4em}

/*-- step --*/
.con_basic .step{position:relative; display:flex; justify-content:space-between; flex-wrap:wrap; margin:3em 0;}
.con_basic .step:before{content:""; display:block; width:100%; height:1px; background:#444; position:absolute; top:0; left:0; bottom:0; margin:auto; z-index:-1}

.con_basic .step li{background:#fff; box-shadow:5px 5px 10px rgba(0, 0, 0, .05);  border-radius:50px; width:12%; position:relative; padding:2em 1em; text-align:center; line-height:1.2em}
.con_basic .step li:not(:last-child):before,
.con_basic .step li:not(:last-child):after{content:""; display:block; width:7px; height:7px; background:#006341; position:absolute; top:0; bottom:0; right:-27%; margin:auto; transform:rotate(45deg);}
.con_basic .step li:not(:last-child):after{background:#fff; right:-26%}

.con_basic .step span{position:absolute; top:0; left:0; background:#006341; color:#fff; padding:.5em .8em; border-radius:30px; line-height:1em}
.con_basic .step li:nth-child(2n) span{background:#006313}

.con_basic .step i{display:block; width:60px; height:50px;  position:relative; margin:0 auto .8em auto;}
.con_basic .step i:before{content:""; display:block; position:absolute; bottom:-5px; left:-5px; width:25px; height:25px; background:#53ffd7; opacity:.1; border-radius:50%;}
.con_basic .step i.red:before{background:#ea0f6c;}
.con_basic .step i.green:before{background:#3ddc84;}
.con_basic .step i.purple:before{background:#b691ff;}
.con_basic .step i.blue:before{background:#8fbaff;}
.con_basic .step i.ygreen:before{background:#94d722;}

.con_basic .step strong{display:inline-flex; justify-content:center;}
@media all and (max-width:768px) {
  .con_basic .step{justify-content:flex-start; gap:2.5em}
  .con_basic .step:before{display:none;}
  .con_basic .step li{width:27%}
  .con_basic .step li:not(:last-child):before{right:-1.3em}
  .con_basic .step li:not(:last-child):after{right:-1.15em}
}
@media all and (max-width:460px) {
  .con_basic .step li{width:26%; padding:1.5em .5em 1em}
}

/*-- alarm --*/
.con_basic .alarm{margin:4em auto 0; width:max-content; max-width:100%; background:#f4f4f4; padding:1.3em 2em 1em; border-radius:2em; position:relative;}
.con_basic .alarm:first-child{margin-top:1em;}
.con_basic .alarm:before{content:"!"; display:flex; justify-content:center; align-items:center; font-weight:bold; font-size:1.2em; border-radius:50%; background:#006341; color:#fff; width:1.5em; height:1.5em; position:absolute; top:-.8em; left:0; right:0; margin:auto; line-height:1em} 
.con_basic .alarm:after{content:""; display:block; width:7em; height:3px; background:#006341; position:absolute; top:0; left:0; right:0; margin:auto;}
.con_basic .alarm .i_search{display:inline-block; width:20px; height:20px; background:url(/resource/www/images/contents/i_search.svg) no-repeat; vertical-align:middle; margin-right:.5em}

/*-- box --*/
.con_basic .box{padding:1em 1.5em 1.5em; position:relative; text-align:center; background:rgba(0, 0, 0, .02); font-size:1.1em; margin:2em 0}
.con_basic .box:before{content:""; display:block; width:100%; height:100%; border:1px solid #f4f4f4; position:absolute; top:-.5em; left:-.5em; z-index:-1}
.con_basic .box p:before,
.con_basic .box p:after{content:""; display:block; width:7px; height:7px; background:#006313; position:absolute;}
.con_basic .box p:before{top:-3px; left:-3px;}
.con_basic .box p:after{bottom:-3px; right:-3px;}
.con_basic .box:has(.list){text-align:left}
.con_basic .box:has(.list) .list{margin:1em 0 0}
.con_basic .box:has(.list) .list li{font-size:1em;}

/*-- txt --*/

.con_basic .txt_red{color:#d41111}
.con_basic .txt_blue{color:#0e1f9d}
.con_basic .txt_green{color:#006341}
.con_basic strong{font-weight:700}
.con_basic .txt_left{text-align:left;}
.con_basic .txt_center{text-align:center;}
.con_basic .txt_right{text-align:right;}

/*-- button --*/
.con_basic .btn_wrap{display:flex; gap:1em; flex-wrap:wrap;}
.con_basic .btn_wrap.center{justify-content:center}
.con_basic .btn{background:#fff; border:1px solid #f0f0f0; box-shadow:20px 0 15px rgba(0, 0, 0, .05); padding:.99em 1.5em; border-radius:10px; position:relative; display:inline-flex; align-items:center; gap:.8em}
.con_basic .btn:not(:has(i)){padding:1.2em 1.5em;}
.con_basic .btn.small{padding:.5em 1em}
.con_basic .btn:before{content:""; display:block; width:100%; height:100%; position:absolute; bottom:-.3em; right:-.3em; background:#ddd; z-index:-1; border-radius:10px; opacity:.8;}
.con_basic .btn:hover:before{right:.3em; bottom:.3em; transition:all .5s}
.con_basic .btn.red{background:#d41111; color:#fff;}
.con_basic .btn.blue{background:#0e1f9d; color:#fff;}
.con_basic .btn.green{background:#006341; color:#fff;}

.con_basic .btn i{display:inline-block; width:2em; height:2em; border-radius:.5em; background:#f4f4f4; overflow:hidden; text-indent:-9999px; line-height:5000; position:relative;}
.con_basic .btn.red i,
.con_basic .btn.blue i,
.con_basic .btn.green i{background:rgba(0, 0, 0, .2);}
.con_basic .btn i:before{content:""; display:block; width:1em; height:1em; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
.con_basic .btn:hover i:before,
.con_basic .btn:focus i:before{animation:arrMove 2s linear infinite;}
@keyframes arrMove      {0%{transform:translateY(0);} 20%{transform:translateY(.1em);} 30%{transform:translateY(0);}}
.con_basic .btn .i_go:before{background-image:url(/resource/www/images/contents/i_go.svg);}
.con_basic .btn .i_view:before{background-image:url(/resource/www/images/contents/i_view.svg);}
.con_basic .btn .i_newW:before{background-image:url(/resource/www/images/contents/i_newW.svg);}
.con_basic .btn .i_down:before{background-image:url(/resource/www/images/contents/i_down.svg);}
.con_basic .btn.red i:before,
.con_basic .btn.blue i:before,
.con_basic .btn.green i:before{filter: brightness(100);}


/*-- table --*/
.con_basic table{margin:3em 0; border-spacing:0; border-collapse:collapse; width:100%; border-top:1px solid #006341;}
.con_basic h4 + table,
.con_basic h5 + table,
.con_basic .txt_right + table{margin-top:0}
.con_basic table thead th{padding:18px 10px; background:#f8fcfb; border:1px solid #ddd; font-weight:600;  font-size:1.06em}
.con_basic table thead tr:nth-of-type(1) th{border-top-width:0px; }
.con_basic table thead tr.none th{border-bottom-width:0px;}
.con_basic table thead tr.none + tr th{border-top:1px solid #ddd;}
.con_basic table thead th[rowspan]{border-right:1px solid #ddd;}
.con_basic table tbody th{background-color:#f8f9fa; border:1px solid #ddd; }
.con_basic table th,
.con_basic table td{padding:15px 10px; letter-spacing:-0.5px; line-height:1.4; word-break:keep-all; }
.con_basic table td small{font-size:.75em; }
.con_basic table th{text-align:center; }
.con_basic .scrollTable{width:100%;}
.con_basic .scrollTable table{margin:0}
.con_basic .mob_info{display:none; position:relative; width:100%; box-sizing:border-box; margin-top:10px; padding:5px 0 5px 22px; font-size:.9rem;}
.con_basic .mob_info:before{content:''; display:block; position:absolute; top:8px; left:0px; width:15.5px; height:15px; background:url(/resource/common/images/common/img_drag.svg) no-repeat 50% 0; background-size:100%; opacity:.64}
@media all and (max-width:1024px) {
    .con_basic .scrollTable{overflow:auto;}
    .con_basic .scrollTable .basic_table{width:1024px; margin-top:0px;}
    .con_basic .mob_info{display:block; margin-bottom:5px;}
}
@media all and (max-width:460px) {
  .con_basic table{margin:1.5em 0}
}

/* tbody */
.con_basic table thead + tbody tr td{text-align:center;}
.con_basic table tbody td{background:#fff; border:1px solid #ddd;text-align:left; border-top:none}
.con_basic table tbody tr td:nth-of-type(1),
.con_basic table tbody tr th:nth-of-type(1),
.con_basic table thead tr th:nth-of-type(1){border-top-width:0px; border-left-width:0;}
.con_basic table tbody tr td:nth-last-of-type(1),
.con_basic table tbody tr th:nth-last-of-type(1),
.con_basic table thead tr th:nth-last-of-type(1){border-right-width:0;}
.con_basic table tbody th{background:#fafafa; font-weight:400 }
.con_basic table tbody tr th:nth-of-type(1){border-right-width:1px; }
.con_basic table tbody:not(:has(td)) th{border-top-width:0;}

/* table list */
.con_basic table td:has(ul){text-align:left !important; word-break:auto-phrase;}
.con_basic table td>ul{padding:1em;}
.con_basic table td li{position:relative; padding-left:.2em}
.con_basic table td li:not(:first-child){margin-top:.4em}
.con_basic table td li:before{content:""; display:block; width:3px; height:3px; background:#000; transform:rotate(45deg); position:absolute; top:.5em; left:-.3em}
.con_basic table td li ul{padding:.5em;}
.con_basic table td li li:before{content:""; display:block; width:4px; height:1px; background:#000; position:absolute; top:.6em; left:-.3em}

/*-- img --*/
.con_basic .img_wrap img{width:100%;}
.con_basic .img_wrap.w1200{max-width:1200px;margin:0 auto;}

/*-- --*/
.map_area{background:#f3f3f3; text-align:center;}

/*-- con_lr --*/
.con_lr{display:flex; justify-content:space-between; flex-wrap:wrap}
.con_lr div{width:50%;}
@media all and (max-width:768px){
    .con_lr{display:block;}
    .con_lr div{width:100%;}
}

/*-- .photo_wrap : slide --*/
.photo_wrap,
.photo_wrap02{padding:0 2em; position:relative; margin:3em 0 5em;}
.photo_wrap:last-child,
.photo_wrap02:last-child{margin-bottom:3em;}

.photo_wrap .photo_slide img,
.photo_wrap02 .photo_slide02 img{width:100%;}

.photo_wrap .btn_prev,
.photo_wrap .btn_next,
.photo_wrap02 .btn_prev,
.photo_wrap02 .btn_next{position:absolute; top:0; bottom:0; margin:auto; display:block; width:5em; height:5em; background:rgba(0, 0, 0, .85); box-shadow:10px 10px 10px rgba(0, 0, 0, .2); overflow:hidden; line-height:5000; z-index:55}
.photo_wrap .btn_next,
.photo_wrap02 .btn_next{right:0;}
.photo_wrap .btn_prev,
.photo_wrap02 .btn_prev{left:0;}
.photo_wrap .btn_prev:before,
.photo_wrap .btn_prev:after,
.photo_wrap .btn_next:before,
.photo_wrap .btn_next:after,
.photo_wrap02 .btn_prev:before,
.photo_wrap02 .btn_prev:after,
.photo_wrap02 .btn_next:before,
.photo_wrap02 .btn_next:after{content:""; display:block; width:1.2em; height:3px; background:#fff; position:absolute;}
.photo_wrap .btn_prev:before,
.photo_wrap02 .btn_prev:before{transform:rotate(-45deg); top:calc(50% - .5em); left:calc(50% - .8em)}
.photo_wrap .btn_prev:after,
.photo_wrap02 .btn_prev:after{transform:rotate(45deg); bottom:calc(50% - .5em); left:calc(50% - .8em)}
.photo_wrap .btn_next:before,
.photo_wrap02 .btn_next:before{transform:rotate(45deg); top:calc(50% - .5em); right:calc(50% - .8em)}
.photo_wrap .btn_next:after,
.photo_wrap02 .btn_next:after{transform:rotate(-45deg); bottom:calc(50% - .5em); right:calc(50% - .8em)}

.photo_wrap .paging_wrap,
.photo_wrap02 .paging_wrap{position:absolute; bottom:-3em; left:0; right:0; display:flex; align-content:center; justify-content:center; flex-wrap:wrap}
.photo_wrap .slide_paging,
.photo_wrap02 .slide_paging{width:max-content;height: max-content;}
.photo_wrap .slide_paging span,
.photo_wrap02 .slide_paging span{border-radius:0;width: 3em; margin: 0 !important;}

.photo_wrap .btn_auto,
.photo_wrap02 .btn_auto{display:block;width: 1.9em;height: 1.65em;overflow:hidden;line-height:5000;text-indent:-5000px; position:relative;}
.photo_wrap .btn_auto:before,
.photo_wrap .btn_auto:after,
.photo_wrap02 .btn_auto:before,
.photo_wrap02 .btn_auto:after{content:""; display:block; width:2px; height:.7em; background:#000; position:absolute; top:0; bottom:0; margin:auto;}
.photo_wrap .btn_auto:before,
.photo_wrap02 .btn_auto:before{left:.7em;}
.photo_wrap .btn_auto:after,
.photo_wrap02 .btn_auto:after{right:.7em;}
.photo_wrap .btn_auto.paused:before,
.photo_wrap02 .btn_auto.paused:before{width:0; height:0; border-style:solid; border-width:5px 0px 5px 7px; border-color:transparent transparent transparent #000; background:none; top:-1px; left:0; right:0;}
.photo_wrap .btn_auto.paused:after,
.photo_wrap02 .btn_auto.paused:after{display:none;}
@media all and (max-width:768px){
    .photo_wrap,
    .photo_wrap02{padding:0 1em;}
    
    .photo_wrap .btn_prev,
    .photo_wrap .btn_next,
    .photo_wrap02 .btn_prev,
    .photo_wrap02 .btn_next{width:3.5em; height:3.5em;}
    .photo_wrap .btn_prev:before,
    .photo_wrap .btn_prev:after,
    .photo_wrap .btn_next:before,
    .photo_wrap .btn_next:after,
    .photo_wrap02 .btn_prev:before,
    .photo_wrap02 .btn_prev:after,
    .photo_wrap02 .btn_next:before,
    .photo_wrap02 .btn_next:after{width:1em; height:2px;}
    .photo_wrap .btn_prev:before,
    .photo_wrap02 .btn_prev:before{top:calc(50% - .4em); left:calc(50% - .4em)}
    .photo_wrap .btn_prev:after,
    .photo_wrap02 .btn_prev:after{bottom:calc(50% - .4em); left:calc(50% - .4em)}
    .photo_wrap .btn_next:before,
    .photo_wrap02 .btn_next:before{top:calc(50% - .4em); right:calc(50% - .4em)}
    .photo_wrap .btn_next:after,
    .photo_wrap02 .btn_next:after{bottom:calc(50% - .4em); right:calc(50% - .4em)}
    
    .photo_wrap .slide_paging span,
    .photo_wrap02 .slide_paging span{width:2em;}
}

/**********************************************************************

 							전당 소개

**********************************************************************/
[data-subarea="introduce"] > .con_inner								{position:relative;z-index:2;}
[data-subarea="introduce"] .img_box									{background:url('/resource/www/images/contents/img_introduce.jpg') no-repeat center center / cover;width:100%;height:0;padding-top: 36.25%;min-height:200px}
#content .text_wrap								{margin-top:2.5em;}
#content .text_wrap p								{font-size:1.125em;letter-spacing:-.025em;line-height:1.6;}
#content .text_wrap p + p						{margin-top:1.875em;}
[data-subarea="introduce"] .text_wrap .name						{text-align:right;font-weight:500;color:var(--color-black);}
[data-subarea="introduce"] .text_wrap .name	strong				{font-weight:800;margin-left:.88em;font-size:1.22em;}




@media all and (max-width:1468px){
    .text_wrap p							{font-size:1.063em;}
    .text_wrap p + p						{margin-top:1.5em;}
    [data-subarea="introduce"] .text_wrap .name strong			{margin-left:.5em;}
}



@media all and (max-width:768px){
    .text_wrap							{margin-top:2em;}
}


@media all and (max-width:468px){
    .text_wrap							{margin-top:1.5em;}
    .text_wrap p							{font-size:1em;}
    .text_wrap p + p						{margin-top:1.25em;}
    .text_wrap .name strong			{margin-left:.25em;}
}
/**********************************************************************

 							예술 감독

**********************************************************************/
.direction h4{font-size:1.7em; text-align:center; font-weight:normal; line-height:1.4; letter-spacing:-1px; margin:2em 0; position:relative;}
.direction h4:before{content:""; display:block; width:100%; height:1px; background:#000; position:absolute; top:0; bottom:0; left:0; margin:auto; z-index:-1}
.direction h4 strong,
.direction h4 span{display:block; background:#fff; width:max-content; margin:auto; padding:0 1em; position:relative;}
.direction h4 strong{font-size:1.6em; font-weight:bold}
.direction h4 strong:before,
.direction h4 strong:after{content:""; display:block; width:7px; height:7px; background:#000; position:absolute; top:.18em; left:0; transform:rotate(45deg);}
.direction h4 strong:after{left:auto; right:0;}
.direction .direc_img{float:left; margin:0 2em 2em 0; max-width:200px;}
.direction .direc_txt{font-size:1.1em;}
.direction .direc_txt p:not(:first-child){margin-top:2em;}
.direction .direc_txt .txt_point{font-size:1.2em; font-weight:bold}
.direction:after{content:""; display:block; clear:both;}
.direction:has(.list) .list{float:left; width:50%;}
@media all and (max-width:1024px) {
  .direction h4{font-size:1.4em}
}
@media all and (max-width:640px) {
  .direction:has(.list) .direc_img{margin:auto; float:inherit; max-width:80%;width:auto;}
  .direction:has(.list) .list{float:left; width:100%;}
}
/**********************************************************************

 							단원 소개

**********************************************************************/
.unit_list ul{display:flex; flex-wrap:wrap; justify-content:center; /*gap:2em 6.65%;*/;gap:2em;}
.unit_list li{/*width:20%;*/width: calc((100% - 12em) / 7); text-align:center;}
.unit_list span{display:block; width:100%; height:80%; overflow:hidden; margin-bottom:.8em}
.unit_list span img{width:100%; height:100%;}
.unit_list strong{display:block; border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:.8em 0 .7em; width:100%; position:relative;}
.unit_list strong:before{content:""; display:block; width:11px; height:11px; background:#fff; border:1px solid rgba(0, 0, 0, .2); transform:rotate(45deg); position:absolute; top:-6px; left:0; right:0; margin:auto;}
.unit_list strong:after{content:""; display:block; width:5px; height:5px; background:#fff; background:#000; transform:rotate(45deg); position:absolute; top:-3px; left:0; right:0; margin:auto;}

.unit_list h4{font-size:2.2em; text-align:center; margin:1.5em 0 1em; position:relative;}
.unit_list h4::first-letter{color:#006341;}
.unit_list h4:before{content:""; display:inline-block; width:1em; height:3px; background:#000; position:absolute; top:-10px; left:0; right:0; margin:auto;}
.unit_list h4:after{content:""; display:block; width:7px; height:7px; background:#006341; transform:rotate(45deg); position:absolute; top:-12px; left:0; right:0; margin:auto;}

@media all and (max-width:1368px) {
  .unit_list li{width: calc((100% - 8em) / 5);}
}

@media all and (max-width:1024px) {
  .unit_list li{width: calc((100% - 6em) / 4);}
}

@media all and (max-width:768px) {
  .unit_list ul{/* gap:3em 4%;*/ gap:2em 1em;}
  .unit_list li{/*width:22%;*/width: calc((100% - 3em) / 4);}
  .unit_list span{height:75%;}

  .unit_list h4{font-size:1.8em}
}
@media all and (max-width:640px) {
  .unit_list ul{/*gap:2em 4%;*/gap:1em .5em;}
  .unit_list li{/*width:30.5%;*/width: calc((100% - 1em) / 3);}
  .unit_list span{height:70%;}
}

/**********************************************************************

 							연혁

**********************************************************************/
.history{position:relative; padding:15px 0}
.history:before,
.history:after{content:""; display:block; width:7px; height:7px; background:#fff; border:1px solid #000; position:absolute; left:0; right:0; margin:auto; z-index:1; transform:rotate(45deg);}
.history ol{position:relative;}
.history ol:before{content:""; display:block; width:1px; height:100%; background:#ddd; position:absolute; top:0; left:0; right:0; margin:auto;}

.history li{position:relative;}
.history li:before,
.history li:after{content:""; display:block; position:absolute; top:0; bottom:0; margin:auto;}
.history li:before{width:50%; height:1px; background:#ddd; left:0}
.history li:nth-child(2n):before{left:auto; right:0;}
.history li:after{width:11px; height:11px; border-radius:50%; border:0; /*background:#006341;*/background:var(--color-base); right:calc(50% - 5px);}
/*.history li:nth-child(2n):after{background:#3a6300}*/

.history dl{background:#fff; /*border:1px solid rgba(0, 0, 0, .2)*/ border:1px solid #ddd; padding:2em 2.5em 4em; position:relative; width:40%;}
.history li:nth-child(2n) dl{margin-left:60%;}
.history dl:before{content:""; display:block; width:1.5em; height:1.5em; border-top:4px solid #000; border-right:4px solid #000; position:absolute; top:-2px; right:-2px;}
.history li:nth-child(2n) dl:before{right:auto; left:-2px; border-right:0; border-left:4px solid #000;}
/*.history dl:after{content:""; display:block; width:100%; height:100%; background:rgba(0, 0, 0, .05); position:absolute; top:1em; left:1em; z-index:-1;}*/

.history dt{font-size:4em; font-weight:bold; color:#888; margin-bottom:.4em; letter-spacing:-3px;}
.history dt:first-letter{/*color:#006341*/color:var(--color-base);}
/*.history li:nth-child(2n) dt:first-letter{color:#3a6300}*/
.history dd{position:relative; padding-left:90px;}
.history dd:not(:first-child){margin-top:1.5em}
.history dd strong{font-size:1.1em; font-weight:600; background:#f4f4f4; padding:.3em 0 0; display:block; position:absolute; left:0; top:0; bottom:0; margin:auto; width:80px; height:2.2em; text-align:center;}
@media all and (max-width:1024px) {
  .history dl{width:45%; padding:1.5em 2em 2.5em}
  .history li:nth-child(2n) dl{margin-left:55%;}

  .history dt{font-size:3em; margin-bottom:.2em}
  .history dd{padding-left:0;}
  .history dd strong{position:relative; margin:0 0 .5em; padding:.2em; height:2em;}
}
@media all and (max-width:640px) {
  .history:before,
  .history:after{right:auto; left:0}

  .history ol{padding:0 .8em 0 2em;}
  .history ol:before{left:3px; right:auto;}

  .history li:before,
  .history li:nth-child(2n):before{right:auto; left:calc(-2em + 3px)}
  .history li:not(:first-child){margin-top:2em}
  .history li:after{right:auto; left:calc(-2em + -2px)}

  .history dl{width:100%; padding:1em 1.5em 1.8em;}
  .history li:nth-child(2n) dl{margin-left:0;}
  .history dl:after{top:.8em; left:.8em}

  .history dt{font-size:2.8em; margin-bottom:0;}
  .history dd:not(:first-child){margin-top:.5em;}
}

/**********************************************************************

 							org

**********************************************************************/
.org{position:relative; margin-bottom:5em;}
.org:before{content:""; display:block; width:1px; height:12em; background:#ddd; position:absolute; top:0; left:0; right:0; margin:auto;}
.org:after{content:""; display:block; width:64.2%; height:1px; background:#ddd; position:absolute; top:12em; left:0; right:0; margin:auto;}

.org>li:first-child{font-size:2em; font-weight:bold; max-width:300px; margin:0 auto 3em; background:#006341; text-align:center; color:#fff; padding:1.3em 0 0; position:relative; box-shadow:10px 10px 10px rgba(0, 0, 0, .1); height:4.2em;}
.org>li:first-child:before{content:""; display:block; width:2em; height:4px; border-top:4px solid rgba(0, 0, 0, .3); position:absolute; bottom:0; left:0; right:0; margin:auto;}

.org li ul{display:flex; justify-content:space-between; width:80%; margin:auto;}
.org li li{font-size:1.2em; text-align:center; width:20%; border:1px solid #777; padding:1.5em .5em; position:relative; line-height:1.2; display:flex; justify-content:center; flex-wrap:wrap; align-items:center;}
.org li li:before,
.org li li:after{content:""; display:block; position:absolute; left:0; right:0; margin:auto;}
.org li li:before{width:1px; height:2em; top:-2em; background:#ddd; z-index:-1}
.org li li:after{width:2em; height:3px; position:absolute; top:0; background:#f4f4f4;}

.org li li span{display:block; width:100%;}
.org li li br{display:none;}

@media all and (max-width:1024px) {
  .org:after{width:76%;}

  .org li ul{width:100%;}
  .org li li{width:24%}
}
@media all and (max-width:640px) {
  .org{margin-bottom:3em}
  .org:before{height:8.5em}
  .org:after{top:8.5em}

  .org>li:first-child{font-size:1.6em; margin-bottom:2em}

  .org li li{font-size:1em;}
  .org li li:before{height:1.5em; top:-1.5em}

  .org li li br{display:inherit;}
}

@media all and (max-width:768px) {
  .root_daum_roughmap_landing{height:310px}
}



/**********************************************************************

 							modal_pop

**********************************************************************/
body:has(.modal_pop.active){overflow-y:hidden;}

.modal_pop{opacity:0; height:0; overflow:hidden; clip: rect(0, 0, 0, 0); position:absolute; top:-100vh;}
.modal_pop.active{display:block; opacity:1; position:fixed; top:0; left:0; width:100%; height:100%; z-index:5000; transition:all .5s; clip:auto;}
.modal_pop:before{content:""; position:fixed; top:0; left:0; width:100%; height:100%; background:rgb(0, 0, 0, .5);}
.modal_wrap{width:50%; height:max-content; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background:#fff; background:#fff; border-radius:1.5em; padding:2.5em;}
.modal_cont{overflow-y:auto; max-height:80vh;}
.modal_img img{width:100%;}
.modal_close{position:absolute; top:1em; right:1em; border-radius:50%; background:rgb(0, 0, 0, .8); width:3em; height:3em; overflow:hidden; box-shadow:5px 5px 10px rgba(255, 255, 255, .3); z-index:555; display:block; transition:1s}
.modal_close:hover,
.modal_close:focus{transform:rotate(360deg);}
.modal_close span{font-size:0; line-height:5000; width:0; height:0; overflow:hidden; display:block;}
.modal_close:before,
.modal_close:after{content:""; position:absolute; transform:translate(-50%, -50%); width:1.3em; height:1px; background:#fff;}
.modal_close:before{transform:translate(-50%, -50%) rotate(45deg);}
.modal_close:after{transform:translate(-50%, -50%) rotate(-45deg);}
.modal_pop .list02 i{ font-size:.75rem; flex:auto; min-width:3em; text-align:center; color:#fff; margin-right:5px; padding:3px 6px; line-height:1; border-radius:3px; vertical-align:middle;}
.modal_pop .list02 i.cate1{ background:#e0233b;}
.modal_pop .list02 i.cate2{ background:#664d8e;}
.modal_pop .list02 i.cate3{ background:#d37a11;}
.modal_pop .list02 i.cate4{ background:#3e5e8f;}
.modal_pop .list02 i.cate5{ background:#288e7b;}
.modal_pop .list02 i.point01{color:var(--color-point);}
.modal_pop .list02 i.point02{color:var(--color-point2);}
.modal_pop .list02 i.point03{color:#008a7f}
.modal_pop .list02 i.point04{color:#008a3a;}
@media all and (max-width:768px) {
  .modal_wrap{width:80%; border-radius:1em; padding:1.5em;}
  .modal_close{top:.5em; right:.5em;}
}
@media all and (max-width:640px) {
  .modal_wrap{width:90%;}
}

.root_daum_roughmap .wrap_btn_zoom{z-index:1 !important;}

/* 대관절차 */
.flex{display:flex;flex-wrap:wrap;}
.process{width:calc(100% - 320px);}
.coronation{display:flex;justify-content: space-between;flex-wrap:wrap;align-items: stretch;border:1px solid #ddd; border-top:0; padding:1em; min-height:7em}
.coronation:first-child{border-top:1px solid #ddd;}
.coronation h4{display:flex; flex-wrap:wrap; width:320px; justify-content:space-between; align-items:center; margin:0 0 0 1em;}
.coronation i{display:block; width:1.4em; height:1.4em; filter:grayscale(100%); background-size:contain; background-repeat:no-repeat; background-positin:center;}
.i_coronation01{background-image:url(/resource/www/images/contents/i_coronation01.png);}
.i_coronation02{background-image:url(/resource/www/images/contents/i_coronation02.png);}
.i_coronation03{background-image:url(/resource/www/images/contents/i_coronation03.png);}
.i_coronation04{background-image:url(/resource/www/images/contents/i_coronation04.png);}
.i_coronation05{background-image:url(/resource/www/images/contents/i_coronation05.png);}
.i_coronation06{background-image:url(/resource/www/images/contents/i_coronation06.png);}
.i_coronation07{background-image:url(/resource/www/images/contents/i_coronation07.png);}
.i_coronation08{background-image:url(/resource/www/images/contents/i_coronation08.png);}
.coronation_wrap{width:calc(100% - 440px); display:flex; flex-wrap:wrap; align-items:center;}
.coronation_wrap>*{width:100%;}
.coronation .list{margin:0}
.coronation_wrap:has(h5){margin-bottom:2em;}

.form{width:320px;border:1px solid #ddd;border-left-color:transparent;}
.form .coronation {border:none;}
.form .coronation h4{margin-left:0;margin-bottom:.5em;}
.form .coronation .btn_wrap{border-top: 2px solid #444;gap:0;}
.form .coronation .btn{border-radius:0;box-shadow:none;width:100%;border-top:none;border-color:#ddd;justify-content: space-between;}
.form .coronation .btn:first-child{border-top:1px solid #ddd;}
.form .coronation .btn:before{display:none !important;}
.form .coronation .btn i{min-width:2em;}

@media all and (max-width:1268px) {
  .process,
  .form{width:100%}
  .coronation h4{margin-left:0;}
  .form{border-left-color:#ddd;border-top:none;}
}

@media all and (max-width:1024px) {
  .coronation h4{width:240px;}
  .coronation_wrap{width:calc(100% - 340px);}
}

@media all and (max-width:768px) {
  .coronation{padding:0; min-height:5em; display:block;}
  .coronation h4{width:100%; background:#f4f4f4; margin:0; padding:1em; font-size:1.4em}
  .coronation h5{font-size:1.3em; padding-left:.8em}
  .coronation h5:before{top:.5em}
  .coronation h5:after{top:.7em}
  .coronation_wrap{width:100%; padding:1em 1.5em;}
  .form .coronation h4{margin-bottom:0;}
  .form .coronation .btn_wrap{padding: 1em 1.5em;}
}