/** 서브 비쥬얼 **/
.visual {z-index: 1;}
.visual .title-area {padding: 35rem 0 11.5rem}
.visual .title-area .sub-tit {opacity: 0.7; gap: 0.5rem;}
.visual .title-area .sub-tit span {}
.visual .title-area .tit {padding-top: 1rem}
.visual .menu-area {backdrop-filter: brightness(1.2) blur(7px); border-top: 1px solid #E5E5E5;}
.visual .menu-area .inner {max-width: 128rem;}
.visual .menu-area .home-area {width: 7rem; height: 7rem; border-right: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5;}
.visual .menu-area .home-area img {width: 3.3rem; transition: 0.2s;}
.visual .menu-area .toggle-area {width: 30rem; transition: 0.2s;}
.visual .menu-area .gnb-area {}
.visual .menu-area .lnb-area {border-right: 1px solid #E5E5E5; border-left: 1px solid #E5E5E5;}
.visual .menu-area .view-area {height: 7rem; padding: 0 2.5rem;}
.visual .menu-area .view-area span {}
.visual .menu-area .view-area img {width: 1.4rem; transform: rotate(180deg); transition: 0.2s;}
.visual .menu-area .slide-area {border: 1px solid #E5E5E5; border-top: 0; display: none;}
.visual .menu-area .slide-area li + li {border-top: 1px solid #E5E5E5;}
.visual .menu-area .slide-area li a {background: #fff; height: 7rem; line-height: 7rem; padding: 0 2.5rem;}
.visual .menu-area .slide-area li a:hover {background: #F5F6F7; color: #3F8BD6}

.visual .menu-area .home-area:hover img {transform: scale(1.1);}
.visual .menu-area .toggle-area.on {background: #3F8BD6;}
.visual .menu-area .toggle-area.on .view-area img {transform: rotate(0deg);}

.visual-1 {background: url('../img/sub/sub-visual-1.jpg') no-repeat; background-size: cover; background-position: center;}
.visual-2 {background: url('../img/sub/sub-visual-2.jpg') no-repeat; background-size: cover; background-position: center;}
.visual-3 {background: url('../img/sub/sub-visual-3.jpg') no-repeat; background-size: cover; background-position: center;}

@media all and (max-width: 800px){
    .visual .menu-area .inner {max-width: 100%}
    .visual .title-area {padding: 32rem 0 14rem;}
    .visual .title-area .sub-tit {font-size: 2.8rem}
    .visual .title-area .tit {font-size: 4.8rem}
    .visual .menu-area .home-area {width: 14%; height: 10rem;}
    .visual .menu-area .toggle-area {width: 43%;}
    .visual .menu-area .view-area {height: 10rem}
    .visual .menu-area .view-area span {font-size: 2.4rem}
    .visual .menu-area .slide-area li a {height: 10rem; font-size: 2.4rem; line-height: 10rem}

    .visual-1 {background: url('../img/sub/sub-visual-1-mo.jpg') no-repeat; background-size: cover; background-position: center;}
    .visual-2 {background: url('../img/sub/sub-visual-2-mo.jpg') no-repeat; background-size: cover; background-position: center;}
    .visual-3 {background: url('../img/sub/sub-visual-3-mo.jpg') no-repeat; background-size: cover; background-position: center;}
}


/** 서브 공통 **/
.sub-inner {padding: 15rem 0;}

.sub-title {padding-left: 1.6rem; margin-bottom: 7rem}
.sub-title::before {content: ''; display: block; position: absolute; left: 0; height: 100%; width: 6px; top: 0; background: #3F8BD6; border-radius: 0 5px 5px 0;}

.sub-subTitle {margin-bottom: 4rem}
.sub-subTitle .num {padding: 0.7rem 1.3rem}
.sub-subTitle .tit {margin: 0 4rem 0 1rem}
.sub-subTitle .line {background: #DDDDDD; height: 1px; flex: 1;}

.sub-table {border: 1px solid #DDDDDD; border-collapse: collapse; background: #fff}
.sub-table th,
.sub-table td {border: 1px solid #DDDDDD;}
.sub-table th {padding: 2rem 0;}
.sub-table td {padding: 2rem 1.5rem; height: 8rem;}

.sub-table-2 {border: 1px solid #DDDDDD; border-collapse: collapse;}
.sub-table-2 td {border: 1px solid #DDDDDD;}
.sub-table-2 td.td1 {padding: 0 4.5rem}
.sub-table-2 td.td2 {padding: 3rem; width: 100%;}
.sub-table-2 td.td2 .name {padding: 0.5rem 0 3.6rem;}
.sub-table-2 td.td2 .mail {gap: 2rem}
.sub-table-2 td.td2 .mail img {max-width: 3rem}

.hover-mail:hover {color: #3F8BD6}

.sub-3 .sub-table-2 td.td2 .name {padding: 0.5rem 0;}
.sub-3 .sub-table-2 td.td2 .task {margin-bottom: 3.5rem}

@media all and (max-width: 800px){
    .sub-subTitle .num {font-size: 2.4rem;}
    .sub-subTitle .tit {font-size: 2.8rem; margin: 0 2rem}
}


/** sub - 1 **/
.sub-1 .sub-cont {}
.sub-1 .sub-cont .img {}
.sub-1 .sub-cont .txt-cont {margin-top: -27%;}
.sub-1 .sub-cont .txt-cont .tit {padding: 0 7rem; margin-bottom: 5rem}
.sub-1 .sub-cont .txt-cont .wrt {padding: 5rem 7rem; background: #fff; line-height: 2rem; width: 74%; border-radius: 0 50px 0 0;}

@media all and (max-width: 800px){
    .sub-1 .sub-cont .img {width: 112%; left: -6%;}
    .sub-1 .sub-cont .txt-cont {text-align: center; margin-top: -86%;}
    .sub-1 .sub-cont .txt-cont .tit {font-size: 2.8rem; padding: 0;}
    .sub-1 .sub-cont .txt-cont .tit span {font-size: 3.4rem}
    .sub-1 .sub-cont .txt-cont .tit div {padding-bottom: 2rem}
    .sub-1 .sub-cont .txt-cont .wrt {width: 100%; background: rgba(255,255,255,0.8); backdrop-filter: brightness(1.2) blur(11px); padding: 5rem; font-size: 2.8rem; line-height: 3.4rem; text-align: left;}
    .sub-1 .sub-cont .txt-cont .wrt div {font-size: 2.8rem; line-height: 3.6rem}
}


/** sub - 2 **/
.sub-2 .sub-inner {padding-bottom: 0}
.sub-2 .content {margin-bottom: 10rem}
.sub-2 .content-1 {padding: 3rem}
.sub-2 .content-2 .txt-area {padding: 5rem 3.5rem; border-radius: 0 50px 0 0;}
.sub-2 .content-3 {gap: 2.5rem}
.sub-2 .content-3 .txt-area {padding: 0 2rem; top: 33%;}
.sub-2 .content-3 .txt-area img {margin-bottom: 5rem}
.sub-2 .content-4 {}
.sub-2 .content-4 .box {}
.sub-2 .content-4 .box + .box {padding-top: 5rem; margin-top: 5rem; border-top: 1px solid #DDDDDD;}
.sub-2 .content-4 .box-tit {}
.sub-2 .content-4 .box-list {width: 75%}
.sub-2 .content-4 .box-list li {gap: 2rem; padding: 2.7rem 2rem;}
.sub-2 .content-4 .box-list li + li {margin-top: 1rem}
.sub-2 .sub-cont-2 {background: url('../img/sub/sub-2-bg.jpg') no-repeat; background-size: cover; background-position: center; padding: 10rem 0 5rem}

@media all and (max-width: 800px){
    .sub-2 .content-1 {font-size: 2.8rem}
    .sub-2 .content-2 .img {width: 112%; left: -6%;}
    .sub-2 .content-2 .txt-area {font-size: 2.8rem; }
    .sub-2 .content-3 {flex-direction: column;}
    .sub-2 .content-3 .txt-area {top: 28%;}
    .sub-2 .content-3 .txt-area img {margin-bottom: 3rem}
    .sub-2 .content-3 .txt-area .txt {font-size: 2.8rem}
    .sub-2 .content-4 .box {flex-direction: column; gap: 2rem}
    .sub-2 .content-4 .box-list {width: 100%;}
    .sub-2 .content-4 .box-list li {font-size: 2.8rem}
    .sub-2 .content-4 .box-list li span {font-size: 3.4rem}
    .sub-2 .sub-cont-2 {background: url('../img/sub/sub-2-bg-mo.jpg') no-repeat; background-size: cover; background-position: center; padding: 8rem 0 5rem}
}

@media all and (max-width: 420px){
    .sub-2 .content-3 .txt-area img {width: 16%;}
}


/** sub - 3 **/
.sub-3 .content {margin-bottom: 10rem}
.sub-3 .content-1 .txt-area {background: #fff; width: 87.5%; padding: 5rem 4.8rem; border-radius: 0 50px 0 0; line-height: 2.2rem;}
.sub-3 .content-1 .txt-area b {padding-bottom: 1rem; display: block;}

.sub-3 .content-2 .sub-subTitle {margin-bottom: 2rem}
.sub-3 .content-2 .txt-area {margin-bottom: 4rem}

@media all and (max-width: 800px){
    .sub-3 .content-1 .img {width: 112%; left: -6%;}
    .sub-3 .content-1 .txt-area {font-size: 2.8rem; line-height: 3.4rem; width: 100%; border-radius: 0; text-align: center; padding: 5rem 4rem;}
    .sub-3 .content-1 .txt-area b {font-size: 2.8rem; padding-bottom: 0}

    .sub-3 .content-2 .txt-area {font-size: 2.8rem}
}


/** sub - 4 **/
.sub-4 .content {}
.sub-4 .field-list {gap: 2rem}
.sub-4 .field-list li {border: 1px solid #DDDDDD; overflow: hidden; flex: 1; height: 35rem}
.sub-4 .field-list li .icon-area {flex: 1;}
.sub-4 .field-list li .icon-area img {}
.sub-4 .field-list li .txt-area {height: 15rem; border-top: 1px solid #DDDDDD;}
.sub-4 .field-list li .txt-area .num {width: 5rem; height: 5rem; top: -2.5rem; border-radius: 100%}
.sub-4 .field-list li .txt-area .txt {width: 81%}

.sub-4 .field-list li:nth-child(1) .icon-area img {width: 7.8rem;}
.sub-4 .field-list li:nth-child(2) .icon-area img {width: 6.1rem;}
.sub-4 .field-list li:nth-child(3) .icon-area img {width: 5.8rem;}
.sub-4 .field-list li:nth-child(4) .icon-area img {width: 8.4rem}

@media all and (max-width: 800px){
    .sub-4 .field-list {flex-wrap: wrap;}
    .sub-4 .field-list li {flex: auto; height: auto; width: calc((100% - 2rem) / 2);}
    .sub-4 .field-list li .icon-area {height: 20rem; flex: auto;}
    .sub-4 .field-list li .txt-area {height: 27rem}
    .sub-4 .field-list li .txt-area .num {width: 7rem; height: 7rem; top: -3.5rem}
    .sub-4 .field-list li .txt-area .txt {font-size: 2.8rem}

    .sub-4 .field-list li:nth-child(1) .icon-area img {width: 9.8rem;}
    .sub-4 .field-list li:nth-child(2) .icon-area img {width: 8.1rem;}
    .sub-4 .field-list li:nth-child(3) .icon-area img {width: 7.2rem;}
    .sub-4 .field-list li:nth-child(4) .icon-area img {width: 11.3rem}
}

/** sub - 5 **/
.sub-5 .sub-inner {padding-bottom: 0}
.sub-5 .content-1 {margin-bottom: 7rem;}

.sub-5 .tab-list {}
.sub-5 .tab-list li {width: calc((100% - 6rem) / 4); border: 1px solid #ccc; padding: 2rem 2rem 0; height: 15rem; cursor: pointer;}
.sub-5 .tab-list li .num {margin-bottom: 1.1rem}
.sub-5 .tab-list li .txt {}
.sub-5 .tab-list li img {top: 2rem; right: 2rem;}

.sub-5 .tab-list li:nth-child(1) img {width: 11rem}
.sub-5 .tab-list li:nth-child(2) img {width: 10rem}
.sub-5 .tab-list li:nth-child(3) img {width: 10rem}
.sub-5 .tab-list li:nth-child(4) img {width: 7rem}

.sub-5 .tab-list li.on {background: #3F8BD6; border: 1px solid #3F8BD6}
.sub-5 .tab-list li.on .num {color: #fff}
.sub-5 .tab-list li.on .txt {color: #fff; opacity: 0.7}
.sub-5 .tab-list li.on img {filter: brightness(30);}

.sub-5 .content-2 {padding: 7rem 0 10rem}

.sub-5 .tab-cont {display: none;}
.sub-5 .tab-cont.on {display: block;}

.sub-5 .comp-sub-title {margin-bottom: 5rem}
.sub-5 .comp-sub-title .tit {padding-left: 1.5rem; margin-bottom: 0.5rem}
.sub-5 .comp-sub-title .tit::before {content: ''; display: block; position: absolute; left: 0; width: 0.5rem; height: 100%; top: 0; background: #3F8BD6; border-radius: 0 5px 5px 0;}
.sub-5 .comp-sub-title .wrt {padding-left: 1.5rem; line-height: 2.6rem}

.sub-5 .table-area {margin-bottom: 5rem}

.sub-5 .comp-sub-title-2 {gap: 1rem; margin-bottom: 1.5rem}
.sub-5 .comp-sub-title-2 img {width: 1rem}



@media all and (max-width: 800px){
    .sub-5 .tab-list {flex-wrap: wrap; gap: 2rem}
    .sub-5 .tab-list li {width: calc((100% - 2rem) / 2); height: auto; padding-bottom: 2rem;}
    .sub-5 .tab-list li .txt {font-size: 2.4rem}

    .sub-5 .comp-sub-title .tit {font-size: 3.4rem; margin-bottom: 2rem}
    .sub-5 .comp-sub-title .tit::before {max-height: 4rem}
    .sub-5 .comp-sub-title .wrt {font-size: 2.8rem; line-height: 3.6rem}

    .sub-5 .comp-sub-title-2 {font-size: 2.8rem}
    .sub-5 .comp-sub-title-2 img {width: 2rem}

    .sub-5 .comp-table-box {}
    .sub-5 .comp-table-box .box {border: 1px solid #ddd; background: #fff; padding: 4rem}
    .sub-5 .comp-table-box .box + .box {margin-top: 2rem}
    .sub-5 .comp-table-box .box div + div {padding-top: 4rem}
    .sub-5 .comp-table-box .box b {padding-bottom: 1rem; display: block;}
}




.sub-6 .content {padding-top: 1rem}
.sub-6 .search-area {margin-bottom: 2rem; align-items: end;}
.sub-6 .search-area .total {gap: 0.5rem}
.sub-6 .search-area .search-cont {gap: 1rem}
.sub-6 .search-area .search-option {border: 1px solid #797979; border-radius: 100px; padding: 2rem 3rem; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: url('../img/sub/search-arr.png') no-repeat; background-size: 1.2rem; background-position: center right 20%; font-family: inherit;}
.sub-6 .search-area .search-input {border: 1px solid #797979; border-radius: 100px; padding: 1.3rem 3rem}
.sub-6 .search-area .search-input input {border: 0; padding: 0; min-width: 41.5rem}
.sub-6 .search-area .search-input input:focus {outline: none;}
.sub-6 .search-area .search-input button {max-width: 2.7rem}
.sub-6 .table-area {border-top: 2px solid #353535}
.sub-6 .table-area thead {}
.sub-6 .table-area tbody {}
.sub-6 .table-area thead tr {}
.sub-6 .table-area tbody tr {}
.sub-6 .table-area tr {border-bottom: 1px solid #DDDDDD}
.sub-6 .table-area th {padding: 2rem 0;}
.sub-6 .table-area td {padding: 1.5rem 0}

.sub-6 .table-area tr.nt-list {background-color: #F5F6F7}
.sub-6 .table-area tr.nt-list .subj {font-weight: bold}

.sub-6 .table-area tbody tr td:nth-child(1):before {content: ''; display: block; position: absolute; width: 3px; height: 100%; left: 0; top: 50%; transform: translateY(-50%); background: #3F8BD6; opacity: 0}
.sub-6 .table-area tbody tr:hover td:nth-child(1):before {opacity: 1;}

@media all and (max-width: 800px){
    .sub-6 .content {padding-top: 0}

    .sub-6 .search-area .total {font-size: 2.8rem; gap: 1rem}
    .sub-6 .search-area {flex-direction: column-reverse; align-items: baseline; gap: 5rem;}
    .sub-6 .search-area .search-cont {width: 100%}
    .sub-6 .search-area .search-option {font-size: 2.8rem; padding: 2.4rem 3rem;}
    .sub-6 .search-area .search-input {padding: 1.7rem 3rem; flex: 1; justify-content: space-between;}
    .sub-6 .search-area .search-input input {min-width: auto}

    .sub-6 .table-area-mo {border-top: 2px solid #353535}
    .sub-6 .table-area-mo ul {}
    .sub-6 .table-area-mo li {padding: 2rem 0; border-bottom: 1px solid #DDDDDD}
    .sub-6 .table-area-mo li .num {min-width: 8rem}
    .sub-6 .table-area-mo li .num img {width: 2.4rem}
    .sub-6 .table-area-mo li .num + div {gap: 1.6rem; flex: 0.95;}
    .sub-6 .table-area-mo li .subj {}
    .sub-6 .table-area-mo li .order {}
    .sub-6 .table-area-mo li .order div + div {padding-left: 0.8rem; margin-left: 0.8rem;}
    .sub-6 .table-area-mo li .order div + div::before {content: ''; display: block; position: absolute; height: 60%; width: 1px; left: 0; top: 50%; transform: translateY(-50%); background: #ccc}

    .sub-6 .table-area-mo li.nt-list {background-color: #F5F6F7}
}


.sub-6 .view-content {}
.sub-6 .view-content .title {padding: 3.8rem 0; border-top: 2px solid #353535;}
.sub-6 .view-content .info {margin-top: 2rem; justify-content: flex-end;}
.sub-6 .view-content .info div + div {padding-left: 0.8rem; margin-left: 0.8rem; border-left: 1px solid #ccc}
.sub-6 .view-content .cont {padding: 7rem 0}
.sub-6 .view-content .files {border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; max-width: 128rem; margin: 0 auto}
.sub-6 .view-content .files li {padding: 2rem 0;}
.sub-6 .view-content .files li + li {border-top: 1px solid #ccc}
.sub-6 .view-content .files li .tit {padding: 0 2rem;}
.sub-6 .view-content .files li img {}
.sub-6 .view-content .files li .file-name {padding-left: 2rem}
.sub-6 .view-content .files li:hover img {filter: invert(59%) sepia(10%) saturate(3168%) hue-rotate(172deg) brightness(84%) contrast(100%);}
.sub-6 .view-content .files li:hover .file-name {color: #3F8BD6;}
.sub-6 .view-content .prev-next {border-top: 1px solid #353535; max-width: 128rem; margin: 7rem auto 0}
.sub-6 .view-content .prev-next li {border-bottom: 1px solid #CCCCCC}
.sub-6 .view-content .prev-next li .tit {gap: 1.5rem; padding: 2rem 2.7rem; min-width: 15rem}
.sub-6 .view-content .prev-next li .subj {padding-left: 3rem}
.sub-6 .view-content .prev-next li .date {margin-left: auto}

@media all and (max-width: 800px){
    .sub-6 .view-content .title {font-size: 2.8rem}
    .sub-6 .view-content .info {font-size: 2rem}
    .sub-6 .view-content .cont {font-size: 2.8rem}
    .sub-6 .view-content .files li {padding: 3.5rem 0}
    .sub-6 .view-content .files li .tit {font-size: 2.8rem}
    .sub-6 .view-content .files li img {width: 3.3rem}
    .sub-6 .view-content .files li .file-name {font-size: 2.8rem}
    .sub-6 .view-content .prev-next li .tit {min-width: 34%; font-size: 2.8rem}
    .sub-6 .view-content .prev-next li .tit img {width: 2rem}
    .sub-6 .view-content .prev-next li .subj {font-size: 2.8rem}
}



.sub-7 .content {}
.sub-7 .map-area {height: 40rem}
.sub-7 .map-area iframe {width: 100%; height: 100%}
.sub-7 .info-area {border-top: 1px solid #3F8BD6; margin-top: 4rem}
.sub-7 .info-area .info-list {border-bottom: 1px solid #DDDDDD}
.sub-7 .info-area .info-list .title {padding: 2rem; min-width: 15rem; text-align: center}
.sub-7 .info-area .info-list .cont {padding: 2rem}
.sub-7 .info-area .info-list .cont.mail {}
.sub-7 .info-area .info-list .cont.mail a {gap: 1rem}
.sub-7 .info-area .info-list .cont.mail a img {width: 2.2rem}

@media all and (max-width: 800px){
    .sub-7 .info-area .info-list {font-size: 2.8rem}
    .sub-7 .info-area .info-list .title {display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 18rem}
}