@charset "UTF-8";
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');*/
body {letter-spacing: -0.05rem; line-height: 1.3; font-size: 1.6rem;}
a:focus, a:hover, a:active {text-decoration: underline;}
html {--scrollbarBG: #f5f5f5;}

/* =============================================================
    sub : layout
============================================================= */
.container.sub {padding-top: 120px;}
.sub-header {position: relative; padding-top: 100px; z-index: 2;}
.sub-inner {width: 1400px; margin: 0 auto;}

.img-auto {display: block; width: auto; margin: 0 auto;}
.img-full {display: block; width: 100%;}
.img-pc {display: block; width: auto; margin: 0 auto;}
.img-mo {display: none;}
.iframe-cover {position: relative; width: 100%; height: 320px;}
.iframe-cover iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
@media screen and (max-width:1399px){
    .img-auto {width: 100%;}
}
@media screen and (max-width:1279px){
    .img-pc {width: 100%;}
    .container.sub {padding-top: 80px;}
}
@media screen and (max-width: 767px){
    .img-pc {display: none !important;}
    .img-mo {display: block !important; width: 100%;}
}
@media screen and (max-width:499px){
    .iframe-cover {height: 200px;}
}

.sub-h1 {margin-bottom: 35px; font-family: 'Godo', sans-serif; font-weight: 700; font-size: 4.4rem; text-align: center;}
.sub-h2 {font-weight: 700; font-size: 3.0rem; text-align: center; line-height: 1.6;}
.sub-h3 {font-weight: 700; font-size: 2.4rem; text-align: center; line-height: 1.6;}
.sub-h4 {font-weight: 400; font-size: 2.2rem; text-align: center; line-height: 1.6;}
.sub-h5 {font-weight: 400; font-size: 2.0rem; text-align: center; line-height: 1.6;}
.sub-h6 {font-weight: 400; font-size: 1.8rem; text-align: center; line-height: 1.6;}

.sub-p1 {position: relative; font-size: 2.0rem; line-height: 1.7;}
.sub-p2 {position: relative; font-size: 1.8rem; line-height: 1.7;}
.sub-p3 {position: relative; font-size: 1.6rem; line-height: 1.6;}
.sub-p4 {position: relative; font-size: 1.4rem; line-height: 1.6;}
.sub-p5 {position: relative; font-size: 1.2rem; line-height: 1.6;}

.bullet01 {position: relative; padding-left: 10px;}
.bullet01:before {content: ""; position: absolute; top: 1.3rem; left: 0; width: 3px; height: 3px; background: #000; border-radius: 50%;}
.sub-p3.bullet01:before {top: 1.0rem;}

@media screen and (max-width:1279px){
    .sub-h1 {font-size: 3.4rem; line-height: 1.4;}
    .sub-h2 {font-size: 2.8rem; line-height: 1.4;}
    .sub-h3 {font-size: 2.2rem; line-height: 1.4;}
    .sub-h4 {font-size: 2.0rem; line-height: 1.4;}
    .sub-h5 {font-size: 1.8rem; line-height: 1.4;}
    .sub-h6 {font-size: 1.6rem; line-height: 1.4;}

    .sub-p1 {font-size: 1.8rem; line-height: 1.4;}
    .sub-p2 {font-size: 1.6rem; line-height: 1.4;}
    .sub-p3 {font-size: 1.4rem; line-height: 1.4;}
    .sub-p4 {font-size: 1.2rem; line-height: 1.4;}
    .sub-p5 {font-size: 1.2rem; line-height: 1.4;}

    .bullet01:before {top: 1.0rem;}
}
@media screen and (max-width:767px){
    .sub-h1 {font-size: 2.8rem;}
    .sub-h2 {font-size: 2.2rem;}
    .sub-h3 {font-size: 2.0rem;}
    .sub-h4 {font-size: 1.8rem;}
    .sub-h5 {font-size: 1.6rem;}
    .sub-h6 {font-size: 1.4rem;}

    .sub-p1 {font-size: 1.6rem;}
    .sub-p2 {font-size: 1.4rem;}
    .sub-p3 {font-size: 1.2rem;}
}
@media screen and (max-width: 499px){
    .sub-h1 {font-size: 2.4rem;}
    .sub-h2 {font-size: 1.8rem;}
    .sub-h3 {font-size: 1.6rem;}
    .sub-h4 {font-size: 1.4rem;}
    .sub-h5 {font-size: 1.4rem;}
    .sub-h6 {font-size: 1.4rem;}
}

.icon {position: relative; display: inline-block; vertical-align: middle;}
.icon:after {content: ""; position: absolute; top:50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%);}
.icon-group {position: absolute; top:50%; right: 10px; transform: translateY(-50%);}
.icon-group li {display: inline-block; width: 80px; height: 80px;}
.icon-group li a {display: block; width: 100%; height: 100%;}
.icon-group li a:before {content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 22px; background: #dcdcdc; transform: translateY(-50%);}
.icon-group li:last-child a:before {content: none;}
.icon-share {position: relative;}
.icon-share:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: url(/portal/img/sub/icon-share.png) no-repeat center;}
.icon-print {position: relative;}
.icon-print:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: url(/portal/img/sub/icon-print.png) no-repeat center;}
.icon-notice {width: 20px; height: 16px;}
.icon-notice:after {width: 20px; height: 16px; background: url(/portal/img/sub/icon-notice.png) no-repeat center;}
.icon-pdf {width: 26px; height: 27px;}
.icon-pdf:after {width: 26px; height: 27px; background: url(/portal/img/sub/icon-pdf.png) no-repeat center;}
.icon-hwp {width: 26px; height: 27px;}
.icon-hwp:after {width: 26px; height: 27px; background: url(/portal/img/sub/icon-hwp.png) no-repeat center;}
.icon-xls {width: 26px; height: 27px;}
.icon-xls:after {width: 26px; height: 27px; background: url(/portal/img/sub/icon-xls.png) no-repeat center;}
.icon-img {width: 26px; height: 27px;}
.icon-img:after {width: 26px; height: 27px; background: url(/portal/img/sub/icon-img.png) no-repeat center;}

.icon-arrow-right:after {width: 26px; height: 27px; background: url(/portal/img/sub/arrow-right.png) no-repeat center;}
.icon-arrow-left:after {width: 26px; height: 27px; background: url(/portal/img/sub/arrow-left.png) no-repeat center;}
.icon-req {padding-left: 24px;}
.icon-req:after {width: 5px; height: 5px; background: #f05022; border-radius: 50%;}
.icon-noreq {padding-left: 24px;}
.icon-noreq:after {width: 5px; height: 5px; background: transparent; border-radius: 50%;}
.icon-download {position: relative;}
.icon-download:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: url(/portal/img/sub/icon-down-w.png) no-repeat center;}
.icon-download-blue {position: relative;}
.icon-download-blue:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: url(/portal/img/sub/icon-down-blue.png) no-repeat center;}
.icon-link {position: relative;}
.icon-link:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: url(/portal/img/main/icon-link.svg) no-repeat center;}
.icon-link-grey {position: relative;}
.icon-link-grey:after {content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); background: url(/portal/img/sub/icon-link-grey.png) no-repeat center;}

.img-btn {padding: 20px; border-radius: 10px; border: 1px solid #d5d5d5;background: linear-gradient(180deg, #f5f5f5, #fff);}

/* =============================================================
    sub : sub-header
============================================================= */
.lnb-topbar {position: relative; height: 80px; background: #f5f5f5; border-radius: 15px;}
.lnb-1depth a {display: block; padding-left: 30px; font-size: 1.8rem; font-weight: 600; line-height: 80px;}
.lnb-1depth > li {display: inline-block; position: relative; width: 205px;}
.lnb-1depth > li > a:before {content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 22px; background: #dcdcdc; transform: translateY(-50%);}
.lnb-1depth > li > a:after {content: ""; position: absolute; right: 30px; top: 50%; width: 14px; height: 8px; background: url(/portal/img/sub/lnb_arrow_down.png) no-repeat center; transform: translateY(-50%);}
.lnb-1depth > li:first-child {width: 150px;}
.lnb-1depth > li:first-child > a {padding-left: 70px;}
.lnb-1depth > li:first-child > a:after {left: 40px; right: auto; width: 18px;height: 18px; background: url(/portal/img/sub/home.svg) no-repeat center/contain;}
.lnb-1depth > li:nth-child(2) {width: 200px;}
.lnb-1depth > li:nth-child(3) {width: 285px;}
.lnb-1depth > li:nth-child(4) {width: 285px;}
.lnb-2depth {display: none; position: absolute; top: 80px; left: 0; width: 100%; background: #fff;}
.lnb-2depth.on {display: block;}
.lnb-2depth > li > a {margin-top: 1px; background: #f5f5f5;}
.lnb-2depth > li:hover > a {background: #ddd;} 

.lnb-3depth-group {padding-top: 100px; border-bottom: 1px solid #e5e5e5;} /* d7d7d7 */
.lnb-3depth {text-align: center;}
.lnb-3depth li {display: inline-block;}
.lnb-3depth li a {position: relative; display: block; padding: 20px 35px; font-size: 1.8rem; font-weight: 500; color: #888; transition: 0.4s;}
.lnb-3depth li.on a, .lnb-3depth li:hover a, .lnb-3depth li:active a, .lnb-3depth li:focus a {color: #000;}
.lnb-3depth li a:after {content: ""; position: absolute; top:50%; right: 0; height: 15px; width: 1px; background: #d7d7d7; transform: translateY(-50%);}
.lnb-3depth li:last-child a:after {content: none;}
.lnb-3depth li a span {position: relative; display: inline-block; height: 100%;} 
.lnb-3depth li a span:after {content: ""; position: absolute; bottom: calc(-100% + 2px); left: 0; width: 100%; height: 4px; background: #f8b922; opacity: 0; transition: 0.4s;}
.lnb-3depth li.on a span:after, .lnb-3depth li:hover a span:after, .lnb-3depth li.focus a span:after, .lnb-3depth li:active a span:after {opacity: 1;}

.lnb-4depth-group {padding: 10px 0 100px;}
.lnb-4depth:after {content: ""; display: block; clear: both;}
.lnb-4depth li {display: block; float: left; height: 42px; margin-bottom: 3px;}
.lnb-4depth.list2 li {width: 50%;}
.lnb-4depth.list3 li {width: 33.333%;}
.lnb-4depth.list4 li {width: 25%;}
.lnb-4depth.list5 li {width: 20%;}
.lnb-4depth.list6 li {width: 16.666%;}
.lnb-4depth.list7 li {width: 14.285%;}
.lnb-4depth li a {display: block; width: calc(100% - 0.3rem); margin: 0 0.15rem; padding: 10px; background: #f7f7f7; text-align: center; line-height: 1.4; transition: 0.4s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.lnb-4depth li.on a, .lnb-4depth li a.on , .lnb-4depth li:hover a, .lnb-4depth li:active a, .lnb-4depth li:focus a {border: 1px solid #118ad9; background: #fff; box-shadow: 1px 1px 5px 1px rgba(17,138,217,0.5); color: #118ad9; font-weight: 600; text-decoration: none;}
.sub-cont .lnb-3depth-group {padding-top: 0; margin-bottom: 50px;}
.lnb-4depth .txt01 {display: block;}

@media screen and (max-width: 1023px){
    .lnb-4depth.list4 li {width: 50%;}
    .lnb-4depth.list5 li {width: 33.333%;}
    .lnb-4depth.list5 li:nth-last-child(1) {width: 50%;}
    .lnb-4depth.list5 li:nth-last-child(2) {width: 50%;}
    .lnb-4depth.list6 li {width: 33.333%;}
}
@media screen and (max-width: 767px){
    .lnb-3depth-group {padding-top: 0; padding-bottom: 40px; border-bottom: none;}
    .lnb-3depth li a {padding: 10px 10px; font-size: 1.5rem; font-weight: 400;}
    .lnb-3depth li a span:after {bottom: -7px;}
    .lnb-3depth li a:after {right: -3px; background: #f1f1f1;}
    .lnb-4depth-group {padding: 10px 0 30px;}
    .lnb-4depth.list3 li {width: 100%; height: 60px;}
    .lnb-4depth.list5 li {width: 50%;}
    .lnb-4depth.list5 li:nth-last-child(1) {width: 100%;}
    .lnb-4depth.list6 li {width: 50%;}
}

.manage-group {position: relative; display: flex; flex-wrap: wrap;}
.manage-group .manage-list {flex: 0 0 33.333%; max-width: 33.333%;}
.manage-group .depth01 {width: 97%; padding-top: 0; margin: 0 auto 40px;}
.manage-group .depth01-link {display: block; border-radius: 20px 20px 0 0; background: #00397f; box-shadow: 5px 5px 10px 1px rgba(0,0,0,.4); line-height: 75px; font-size: 2.0rem; color: #fff; text-align: center;}
.manage-group .depth01-link:after {content: none;}
.manage-group .depth02 {width:100%; padding-bottom: 10px; margin-left: 0; margin-top: 12px; border-radius: 0 0 20px 20px; background: #f5f5f5;}
.manage-group .depth02-list {float: none; width: 100%; padding: 10px 0; margin-top: 0;}
.manage-group .depth02-link {padding: 5px 30px; background: url(/portal/img/sub/icon-link-skyblue.png) no-repeat 90%; color: #000;}
.manage-group .depth03-list {padding-top: 17px; background: #fff;}
.manage-group .depth03-list:last-child {padding-bottom: 17px;}
.manage-group .depth03-link {padding: 0 30px; border: none; background: url(/portal/img/sub/icon-link-blue.png) no-repeat 90%; line-height: 1;}
.manage-group .depth03-link:after {left: 20px;}
@media screen and (max-width: 1023px){
    .manage-group .manage-list {flex: 0 0 50%; max-width: 50%;}
}
@media screen and (max-width: 767px){
    .manage-group .manage-list {flex: 0 0 100%; max-width: 100%;}
    .manage-group .depth01-link {font-size: 1.8rem;}
    .manage-group .depth02-list {padding: 0 10px;}
    .manage-group .depth02-link {padding: 0 20px;}
    .manage-group .depth03-list {margin: 0;}
}
/* =============================================================
    sub : sub-footer
============================================================= */
.sub-footer {padding: 120px 0;}
.rating-group {width: 100%; border: 1px solid #e5e5e5; border-top: 1px solid #000;}
.rating-header {height: 50px; background: #f7f7f7;}
.rating-title {padding-left: 40px;}
.rating-title li {position: relative; display: inline-block; padding: 0 40px 0 15px; line-height: 50px; font-weight: 500;}
.rating-title li:before {content: ""; position: absolute; top: 50%; left: 0; width: 4px;height: 4px; background: #fdb813; transform: translateY(-50%);}
.rating-title li span {padding-left: 13px; color: #777; font-weight: 400;}
.rating-cont {position: relative; padding: 30px 40px;}
.rating-subtitle {padding-bottom: 15px;}
.rating-list li {display: inline-block; padding-right: 25px;}
.rating-dd {position: absolute; top: 50%; right: 30px; width: 660px; height: 50px; transform: translateY(-50%);}
.rating-dd:after {content: ""; display: block; clear: both;}
.rating-input-text {float: left; width: 86.3%;}
.rating-input-btn {float: right; width: 13.3%;} 
/* =============================================================
    sub : sub-cont
============================================================= */
.sub-cont {padding-top: 100px; padding-bottom: 50px;}
.sub-text {display: flex; padding-bottom: 100px; word-break: keep-all;}
.text-header {flex: 0 0 20%; max-width: 20%;}
.text-cont {flex: 0 0 80%; max-width: 80%;}
.sub-text .sub-h2 {position: relative; height: 72px; border-bottom: 1px solid #000; text-align: left; line-height: 1.4; letter-spacing: -0.15rem;}
.sub-text .sub-h2 .line02 {position: absolute; bottom: 10px; left: 0; width: 100%;}
.sub-text .sub-h3 {position: relative; display: inline-block; margin-bottom: 20px; text-align: left;}
.sub-text .sub-h3:after {content: ""; position: absolute; top: 5px; right: -13px; width: 5px;height: 5px;border-radius: 50%; background: #118ad9;}
.sub-text .sub-h4 {font-weight: 500; text-align: left;}
.text-cont-inner {width: 95%; margin-left: 5%; padding-top: 72px;}
.text-cont-detail {margin-bottom: 80px;}
.sub-heading {width: 100%; height: 1px; margin-bottom: 50px; background: #d5d5d5;}

@media screen and (max-width:1399px){
    .sub-inner {width: 90%;}
    .lnb-topbar {display: none;}
    .rating-dd {display: none;}
}
@media screen and (max-width:1279px){
    body {font-size: 1.4rem;}
    .sub-header {padding-top: 120px;}
    .img-auto {width: 98%; margin: 0 auto;}
    .sub-cont {padding-top: 60px;}

    .sub-text {display: block;}
    .sub-text .sub-h3:after {content: none;}
    .text-header {max-width: 100%;}
    .sub-heading {background: none;}
    .text-cont {max-width: 100%;}
    .text-cont-inner {width: 100%; margin: 0; padding: 0;}
}
@media screen and (max-width:767px){
    .container.sub {padding-bottom: 50px;}
    .tablet-none {display: none !important;}
    .sub-header {padding-top: 120px;}
    .sub-cont {padding-top: 0;}  
    .sub-text {padding-bottom: 50px;}
    .text-cont-detail {margin-bottom: 40px;}
    .sub-footer {display: none;} 
}
@media screen and (max-width: 499px){
    .container.sub {padding-bottom: 30px;}
    .mobile-none {display: none !important;}
    .sub-header {padding-top: 80px;}
    .sub-cont {padding-top: 0;}
    .sub-text {padding-bottom: 30px;}
}
/* =============================================================
    sub : sub-board
============================================================= */
.sub-board {padding-bottom: 100px;}
.board-topbar {position: relative; width: 100%; height: 50px; margin-bottom: 20px;}
.board-info {position: absolute; top:50%; left: 0; transform: translateY(-50%);}
.board-info-group li {display: inline-block; padding-right: 30px;}
.board-info-group li span {padding-left: 10px; font-weight: 600;}
.board-search {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; justify-content: flex-end; width: 485px;}
.search-select {flex: 0 0 19.8%; max-width: 19.8%; margin-right: 1.2%;}
.search-text {flex: 0 0 58%; max-width: 58%; margin-right: 1.2%;}
.search-submit {flex: 0 0 19.8%; max-width: 19.8%;}
.file-group li {display: inline-block; width: 26px; height: 27px;}
.board-pagi {position: relative; padding-top: 40px;}
.board-pagi .pagination {position: absolute; left: 50%; transform: translateX(-50%); width: 100%; text-align: center;}
.board-pagi .pagination li {display: inline-block; vertical-align: middle;}
.board-pagi .pagination a {display: block; width: 40px; height: 40px; border: 1px solid #ddd; line-height: 40px; text-align: center; transition: 0.4s;}
.board-pagi .pagination li.on a, .board-pagi .pagination li:hover a, .board-pagi .pagination li:focus a, .board-pagi .pagination li:active a {background-color: #2f5993; color: #fff;}
.board-pagi .pagination li a.pn-to-first {background: url(/portal/img/sub/double-arrow-left.png) no-repeat center;}
.board-pagi .pagination li a.pn-to-prev {background: url(/portal/img/sub/arrow-left.png) no-repeat center;}
.board-pagi .pagination li a.pn-to-next {background: url(/portal/img/sub/double-arrow-right.png) no-repeat center;}
.board-pagi .pagination li a.pn-to-last {background: url(/portal/img/sub/arrow-right.png) no-repeat center;}

.board-pagi .btn-group {position: absolute; top: 40px; right: 0;}
.board-pagi .btn-group .btn {width: auto; height: auto; padding: 10px 20px;}

.board-accordion {border-top: 2px solid #2f5993;}
.ac-list {border-top: 1px solid #e5e5e5;}
.ac-title {position: relative; padding: 20px 30px; border-bottom: 1px solid #e5e5e5;}
.ac-header li {display: inline-block; padding-right: 5px;}
.ac-header .keyword {color: #118ad9;}
.ac-title .icon-arrow {position: absolute; top: 50%; right: 40px; width: 12px; height: 9px; background: url(/portal/img/sub/select_arrow.png) no-repeat center; transform: translateY(-50%);}
.ac-detail {padding: 40px; background: #f2f5f8;}
.ac-content {display: flex; margin-bottom: 40px;}
.ac-content:last-child {margin-bottom: 0;}
.ac-title .ac-content {align-items: center;}
.ac-cont01 {margin-right: 25px;}

@media screen and (max-width:1023px){
    .topbar02 .board-info {display: none;}
    .topbar02 .search-select {flex: 0 0 18%; max-width: 18%;}
    .topbar02 .search-text {flex: 0 0 40%; max-width: 40%;}
    .topbar02 .search-submit {flex: 0 0 19.8%; max-width: 19.8%;}
    .board-pagi .pagination {top: 80px;}
    .board-pagi .btn-group {position: absolute; top: 15px; right: auto; left:50%; transform: translateX(-50%);}
}
@media screen and (max-width:767px){
    .search-select {flex: 0 0 27.8%; max-width: 27.8%;}
    .search-text {flex: 0 0 50%; max-width: 50%;}
    
}
@media screen and (max-width:499px){
    .topbar02 .board-search {flex-wrap: wrap;}
    .topbar02 .search-select {flex: 0 0 48.8%; max-width: 48.8%; margin-bottom: 3px;}
    .topbar02 .search-text {flex: 0 0 67.5%; max-width: 67.5%;}
    .topbar02 .search-submit {flex: 0 0 30%; max-width: 30%; margin-right: 1.2%;}
   
}
/* =============================================================
    sub : sub-view
============================================================= */
.view-title {text-align: center;}
.view-title span {padding-right: 35px;  color: #f05022; font-weight: 500;}
.view-info {padding: 40px 0; text-align: center;}
.view-info li {position: relative; display: inline-block; padding: 0 20px; font-weight: 500;}
.view-info li:after {content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 20px; background: #e5e5e5; transform: translateY(-50%);}
.view-info li:last-child:after {content: none;}
.view-info li span {padding-left: 10px; color: #777;}
.view-cont {padding-top: 50px; border-top: 1px solid #e5e5e5;}
.view-cont img {display: block; margin: 40px auto;}
.view-h1 {margin-bottom: 80px; font-weight: 500; text-align: center;}
.view-p {line-height: 2; white-space: pre-wrap;}
.view-file {display: flex; margin: 100px 0; padding: 40px 40px 40px 0; background: #f5f5f5; border-radius: 20px;}
.view-file .file-title {flex: 0 0 10%; max-width: 10%; text-align: center; font-weight: 500;}
.view-file .file-detail {flex: 0 0 90%; max-width: 90%;}
.view-file .file-list li {margin-bottom: 15px;}
.view-file .file-list a {display: inline-block; padding-left: 20px; color: #999;}
.view-footer {position: relative; padding: 0 40px; margin-bottom: 50px; height: 100px; border-top: 1px solid #2f5993; border-bottom: 1px solid #e5e5e5;}
.view-footer:after {content: ""; display: block; clear: both;}
.view-footer .list:after {content: ""; display: block; clear: both;}
.view-footer .list li {position: relative; padding: 0 20px; line-height: 100px;}
.view-footer .list li:nth-child(2):after {content: ""; position: absolute; top:50%;width: 1px; height: 17px; background: #c5c5c5; transform: translateY(-50%);}
.view-footer .list.left li {float:left;}
.view-footer .list.right li {float:right;}
.view-footer .list.left li:nth-child(2):after { right: 0; }
.view-footer .list.right li:nth-child(2):after { left: 0; }
.view-footer .submit {position: absolute; bottom: -125px; left: 50%; width: 150px; height: 60px; transform: translateX(-50%);}
.view-footer .btn-submit {background: #118ad9;border-radius: 10px;  color: #fff;}
@media screen and (max-width: 1023px){
    .view-file {padding: 20px 20px 0 20px;}
    .view-file .file-title {display: none;}
    .view-file .file-detail {flex: 0 0 100%; max-width: 100%;}
    .view-footer {height: auto; padding: 0;}
    .view-footer .list {float: none !important;}
    .view-footer .list li {line-height: 4.0;}
    .view-footer .list li:last-child {width: 60%;}
    .view-footer .list li a {display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .view-footer .list.right li {float: left;}
    .view-footer .list.right .icon-arrow-right:after {background-image: url(/portal/img/sub/arrow-left.png);}
    .view-footer .list.right li:nth-child(2):after {left: auto; right: 0;}
}
/* =============================================================
    sub : sub-form
============================================================= */
.sub-form {margin-bottom: 120px; word-break: keep-all;}
.sub-form .btn {word-break: keep-all;}
.form-table .tr {display: flex; align-items: center; padding: 40px 0 15px 0; border-bottom: 1px solid #e5e5e5;}
.form-table .tr:last-child {border-bottom: none;}
.form-table .th {flex: 0 0 12%; max-width: 12%; line-height: 50px;}
.form-table .th .sub-p2 {line-height: 50px;}
.form-table .td {flex: 0 0 88%; max-width: 88%;}
.form-container {display: flex; height: 50px;}
.form-container .form-box {flex: 0 0 15%; max-width: 15%; height: 100%;}
.form01 .form-box.list01 {flex: 0 0 74%; max-width: 74%;}
.form01 .form-box.list02 {flex: 0 0 10%; max-width: 10%;}
.form02 .form-box.list01 {flex: 0 0 84%; max-width: 84%;}
.form03 .form-box.list01 {flex: 0 0 15%; max-width: 15%;}
.form03 .form-box.list02 {flex: 0 0 5%; max-width: 5%;}
.form03 .form-box.list02 span {position: relative; display: block; width: 100%; height: 100%; text-indent: -9999px;}
.form03 .form-box.list02 span:after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: #999; transform: translate(-50%, -50%);}
.form04 .form-box.list01 {flex: 0 0 45%; max-width: 45%;}
.form04 .form-box.list02 {flex: 0 0 5%; max-width: 5%;}
.form04 .form-box.list02 span {position: relative; display: block; width: 100%; height: 100%; text-indent: -9999px;}
.form04 .form-box.list02 span:after {content: "@"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: 0;}
.form04 .form-box.list03 {flex: 0 0 24%; max-width: 24%;}
.form04 .form-box.list04 {flex: 0 0 24%; max-width: 24%; margin-left: 2%;}
.form05 .form-box.list01 {flex: 0 0 30%; max-width: 30%;}
.form05 .form-box.list02 {flex: 0 0 10%; max-width: 10%;}
.form05 .form-box.list03 {flex: 0 0 58%; max-width: 58%; margin-left: 2%;}
.form06 .form-box.list01 {flex: 0 0 8%; max-width: 8%; margin-right: 1%;}
.form06 [type="radio"]:checked + label, .form06 [type="radio"]:not(:checked) + label {top: 50%; transform: translateY(-50%);}
.form07 .form-box.list01 {flex: 0 0 auto; max-width: 8%; margin-right: 2%;}
.form07 .form-box.list01 label {position: relative; top: 25%; transform: translateY(-50%);}
.form07 .form-box.list02 {flex: 0 0 8%; max-width: 8%; margin-right: 3%;}
.form-container.form08 {height: 150px;}
.form08 .form-box.list01 {flex: 0 0 112%; max-width: 112%;}
.form-box textarea {width: 100%; height: 150px; padding: 20px;}

.sub-textinfo {padding: 100px 0; margin-bottom: 50px;}

.linebox {margin-top: 20px; padding: 40px 60px 20px; border: 1px solid #d5d5d5; border-radius: 20px;}
.linebox02 {margin-top: 20px; padding: 20px 60px 20px; border: 1px solid #f05022; border-radius: 20px;}
.text-box {margin: 30px 0;}
.text-box [type="checkbox"] + label {margin-left: 10px;}
.btn-submit-group {margin-bottom: 100px; text-align: center;}
.btn-submit-group .btn {display: inline-block; width: 150px; height: 60px;border-radius: 10px;  }
.btn-submit-group .btn-submit {background: #118ad9; color: #fff;}
.btn-submit-group .btn-cancel {background: #777; color: #fff;}
@media screen and (max-width: 1399px){
    .form-table .th {flex: 0 0 20%; max-width: 20%;}
    .form-table .td {flex: 0 0 80%; max-width: 80%;}
}
@media screen and (max-width: 767px){  
    .sub-form {margin-bottom: 20px;}
    .sub-textinfo {padding: 30px 0;}
    .form-table .tr {padding: 15px 0;}
    .form-table .th {flex: 0 0 30%; max-width: 30%;}
    .form-table .td {flex: 0 0 70%; max-width: 70%;}
    .form-table .th .sub-p2 {line-height: 1.4;}
    .form03 .form-box.list01 {flex: 0 0 30%; max-width: 30%;}
    .form03 .form-box.list02 {flex: 0 0 5%; max-width: 5%;}
    .form03 .form-box.list02 span:after {width: 5px;}
    .form04 .form-box.list01 {flex: 0 0 60%; max-width: 60%;}
    .form04 .form-box.list03 {display: none;}
    .form04 .form-box.list04 {flex: 0 0 35%; max-width: 35%;}
    .btn-submit-group .btn {display: inline-block; width: auto; height: auto; padding: 0.375rem 2rem; border-radius: 4px;}
    .linebox, .linebox02 {padding: 25px;}
    .text-box {margin: 10px 0 0 0;}
}
@media screen and (max-width: 499px){
    .form-table .th {flex: 0 0 37%; max-width: 37%;}
    .form-table .td {flex: 0 0 63%; max-width: 63%;}
}
/* =============================================================
    sub : sub-table
============================================================= */
.table-01 {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-01 th, .table-01 td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-01 thead th {background: #f5f5f5;  font-weight: 500;}
.table-01 th:last-child, .table-01 td:last-child {border-right: none;}
.table-01 tbody th {background: #f5f5f5;font-weight: 500;}
.table-01 tbody td {color: #555; font-weight: 400; line-height: 1.7;}
.table-01 tbody p {display:block;}

.table-board {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-board th, .table-board td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-board thead th {background: #f5f5f5;  font-weight: 500;}
.table-board th:last-child, .table-board td:last-child {border-right: none;}
.table-board tbody th {background: #f5f5f5;font-weight: 500;}
.table-board tbody td {color: #555; font-weight: 400; line-height: 1.7; min-height: 40px;}
.table-board tbody p {display:block;}
.table-board .textover {width: 600px;}
.table-board .item-seq01 {display: inline-block; width: 80px; padding: 0; border: 1px solid #118ad9; color: #118ad9; text-align: center;}
.table-board .item-seq02 {display: inline-block; width: 80px; padding: 0; border: 1px solid #00397f; color: #00397f; text-align: center;}
.table-board .item-seq03 {display: inline-block; width: 80px; padding: 0; border: 1px solid #f05022; color: #f05022; text-align: center;}

.scroll-table {width: 100%; padding-bottom: 20px; overflow-x: auto;}
.table-scroll {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-scroll th, .table-scroll td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-scroll thead th {background: #f5f5f5;  font-weight: 500;}
.table-scroll th:last-child, .table-scroll td:last-child {border-right: none;}
.table-scroll tbody th {background: #f5f5f5;font-weight: 500;}
.table-scroll tbody td {color: #555; font-weight: 400; line-height: 1.7;}
.table-scroll tbody p {display:block;}
.table .border-right {border-right: 1px solid #d5d5d5 !important;}

.table-board02 {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; color: #000;}
.table-board02 th, .table-board02 td {padding: 20px;border-right: 1px solid #d5d5d5; vertical-align: middle; text-align: center;}
.table-board02 thead th {background: #f5f5f5;  font-weight: 500;}
.table-board02 th:last-child, .table-board02 td:last-child {border-right: none;}
.table-board02 tbody th {background: #f5f5f5;font-weight: 500;}
.table-board02 tbody td {color: #555; font-weight: 400; line-height: 1.7;}
.table-board02 tbody p {display:block;}
.table-board02 .textover {width: 600px;}
.table-board02 .icon-notice {position: relative; display: block;}
.table-board02 .icon-notice:after {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
@media screen and (max-width: 1279px){
    .table-board02 .textover {width: 500px;}
    .table-board02 th, .table-board02 td {padding: 10px;}
}
@media screen and (max-width: 1023px){
    .table-board02 colgroup {display: none;}
    .table-board02 thead {display: none;}
    .table-board02 .icon-notice {width: 45px; height: 40px;}
    .table-board02 tbody tr {position: relative; display: block; height: 65px; border-bottom: 1px solid #ddd;}
    .table-board02 tbody tr:last-child {border-bottom: none;}
    .table-board02 tbody tr:after {content: ""; display: block; clear: both;}
    .table-board02 tbody th {position: absolute; display: block; background: none; border: none; text-align: left;}
    .table-board02 tbody td {position: absolute; display: block; border: none; line-height: 20px; text-align: left;}
    .table-board02 tbody .list_num {top: 0; width: 60px; height: 60px; line-height: 40px; text-align: center;}
    .table-board02 tbody .w13 {display: none;}
    .table-board02 tbody .list_tit {top: 0; left: 60px; width: calc(100% - 88px); height: 30px;}
    .table-board02 tbody .list_file {display: none;}
    .table-board02 tbody .list_write {top: 28px; left: 60px; width: 150px; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
    .table-board02 tbody .list_write:before {content: "작성자 : ";}
    .table-board02 tbody .list_date {top: 28px; left: 200px; width: 150px; height: 30px;}
    .table-board02 tbody .list_date:before {content: "작성일 : ";}
    .table-board02 tbody .list_hit {display: none;}
    .table-board02 tbody td .textover {width: 100%;}

}
@media screen and (max-width: 499px){
    .table-board02 tbody .list_tit {width: calc(100% - 80px);}
    .table-board02 tbody .list_write {display: none;}
    .table-board02 tbody .list_date {top: 28px; left: 60px; width: 150px; height: 30px;}
    .table-board02 tbody .list_date:before {content: none;}
}

ol.list-depth01 > li {position: relative; padding-left: 25px;}
ol.list-depth01 > li:before {position: absolute; top: 0; left: 0;}
ol.list-depth01 > li:nth-child(1):before {content: "가. ";}
ol.list-depth01 > li:nth-child(2):before {content: "나. ";}
ol.list-depth01 > li:nth-child(3):before {content: "다. ";}
ol.list-depth01 > li:nth-child(4):before {content: "라. ";}
ol.list-depth01 > li:nth-child(5):before {content: "마. ";}
ol.list-depth01 > li:nth-child(6):before {content: "바. ";}
ol.list-depth01 > li:nth-child(7):before {content: "사. ";}
ol.list-depth01 > li:nth-child(8):before {content: "아. ";}
ol.list-depth01 > li:nth-child(9):before {content: "자. ";}
ol.list-depth02 {margin-left: 15px;}
ol.list-depth02 > li {list-style-type:decimal;}
ol.list-depth03 > li {position: relative; padding-left: 25px;}
ol.list-depth03 > li:before {position: absolute; top: 0; left: 0;}
ol.list-depth03 > li:nth-child(1):before {content: "가) ";}
ol.list-depth03 > li:nth-child(2):before {content: "나) ";}
ol.list-depth03 > li:nth-child(3):before {content: "다) ";}
ol.list-depth03 > li:nth-child(4):before {content: "라) ";}
ol.list-depth03 > li:nth-child(5):before {content: "마) ";}
ol.list-depth03 > li:nth-child(6):before {content: "바) ";}
ol.list-depth03 > li:nth-child(7):before {content: "사) ";}
ol.list-depth03 > li:nth-child(8):before {content: "아) ";}
ol.list-depth03 > li:nth-child(9):before {content: "자) ";}

.num-st01 {position: relative; padding-left: 25px;}
.num-st01:before {position: absolute; top: -1px; left: 0;}
.num-st01.num01:before {content: "(1)";}
.num-st01.num02:before {content: "(2)";}
.num-st01.num03:before {content: "(3)";}
.num-st01.num04:before {content: "(4)";}
.num-st01.num05:before {content: "(5)";}
.num-st01.num06:before {content: "(6)";}
.num-st01.num07:before {content: "(7)";}
.num-st01.num08:before {content: "(8)";}
.num-st01.num09:before {content: "(9)";}

.num-st02 {position: relative; padding-left: 40px;}
.num-st02:before {position: absolute; top: 0; left: 17px;}
.num-st02.num01:before {content: "①";}
.num-st02.num02:before {content: "②";}
.num-st02.num03:before {content: "③";}
.num-st02.num04:before {content: "④";}
.num-st02.num05:before {content: "⑤";}
.num-st02.num06:before {content: "⑥";}
.num-st02.num07:before {content: "⑦";}
.num-st02.num08:before {content: "⑧";}
.num-st02.num09:before {content: "⑨";}
.num-st02.num10:before {content: "⑩";}
@media screen and (max-width: 1279px){
    .table-board .textover {width: 400px;}
    
}
@media screen and (max-width: 1023px){
    .table-01 th, .table-01 td {padding: 10px 15px;}

    .table-board th, .table-board td {padding: 10px 15px;}
    .table-board .textover {width: 300px;}
}
@media screen and (max-width: 767px){
    .table-01, .table-01 tbody, .table-01 tr, .table-01 th, .table-01 td {display: block;}
    .table-01 {border-bottom: none;}
    .table-01 thead {display: none;}
    .table-01 tr {margin-bottom: 15px; border-bottom: 1px solid #d5d5d5;}
    .table-01 th, .table-01 td {border-left: 1px solid #d5d5d5; text-align: left;}
    .table-01 tbody th {background: none;}
    .table-01 th:first-child, .table-01 td:first-child {border-top: 1px solid #d5d5d5;}
    .table-01 tr:first-child th:first-child, .table-01 tr:first-child td:first-child {border-top: none;}
    .table-01 th:last-child, .table-01 td:last-child {border-right: 1px solid #d5d5d5;}
    .table-01 th, .table-01 td {position: relative; padding-left: 120px;}
    .table-01 th:before, .table-01 td:before {content: attr(title); display: inline-flex; position: absolute; top: 0; left: 0; width: 100px; height: 100%; background: #f1f1f1;align-items: center; justify-content: center;}
    
    .table-board, .table-board tbody, .table-board tr, .table-board th, .table-board td {display: block;}
    .table-board {border-bottom: none;}
    .table-board thead {display: none;}
    .table-board tr {margin-bottom: 15px; border-bottom: 1px solid #d5d5d5;}
    .table-board th, .table-board td {border-left: 1px solid #d5d5d5; text-align: left;}
    .table-board tbody th {background: none;}
    .table-board th:first-child, .table-board td:first-child {border-top: 1px solid #d5d5d5;}
    .table-board tr:first-child th:first-child, .table-board tr:first-child td:first-child {border-top: none;}
    .table-board th:last-child, .table-board td:last-child {border-right: 1px solid #d5d5d5;}
    .table-board th, .table-board td {position: relative; padding-left: 120px;}
    .table-board th:before, .table-board td:before {content: attr(title); display: inline-flex; position: absolute; top: 0; left: 0; width: 100px; height: 100%; background: #f1f1f1;align-items: center; justify-content: center;}
    
    .table-board .textover {width: 100%; white-space: inherit;}

    .board-info-group {display: none;}
    .board-search {width: 100%;}
    .board-pagi .pagination a {width: 20px; height: 20px; border-radius: 50%; border: none; line-height: 20px; font-size: 1.2rem;}
    
    .table-scroll {width: 680px;}
}
/* =============================================================
    sub : intro
============================================================= */
.sub-intro01 {height: 520px; padding-top: 100px; margin-bottom: 200px;}
.intro-cont {padding-bottom: 80px; background: #f5f5f5; word-break: keep-all;}
.intro-cont .sub-inner:after {content: ""; display: block; clear: both;}
.intro-cont .intro-img {float: left; width: 550px; height: 550px; margin-top: -100px; border-radius: 30px; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2); overflow: hidden;}
.intro-cont .intro-text {float: right; width: calc(100% - 650px); padding-top: 100px; }
.intro-cont .sub-h2 {position: relative; padding-bottom: 90px; text-align: left;}
.intro-cont .sub-h2:after {content: ""; position: absolute; bottom: 45px; left: 0; width: 50px;height: 3px;background: #118ad9;}
.intro-cont .sub-h2 span {display: block;}
.intro-list01 {width: 85%; margin: 80px auto; padding-top: 80px;}
.intro-list01 ul:after {content:""; display: block; clear: both;}
.intro-list01 li {position: relative; float: left; width: 25%; height: 390px;}
.intro-list01 li:before {content: ""; position: absolute; top: 100px;right:0; width: 8px; height: 8px; background: #118ad9; transform: rotate(45deg);}
.intro-list01 li:nth-child(4n):before, .intro-list01 li:nth-child(4n):after {content: none;}
.intro-list01 .list-icon {position: relative; width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 50%; background: #f9f9f9;}
.intro-list01 .list-icon:before, .intro-list01 .list-icon:after {content: ""; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%);}
.intro-list01 .list-icon:before {width: 170px; height: 170px; background: #f1f1f1;}
.intro-list01 .list-icon:after {width: 140px; height: 140px; background: #fff;}
.intro-list01 .list-icon span {display: inline-block; position: absolute; top: 50%; left: 50%; width: 69px; height: 65px; transform: translate(-50%, -50%); background: url(/portal/img/sub/p07/e0101-01.png) no-repeat center/contain; z-index: 2;}
.intro-list01 .list-icon .icon-search {background-image: url(/portal/img/sub/p07/e0101-01.png);}
.intro-list01 .list-icon .icon-pie {background-image: url(/portal/img/sub/p07/e0101-02.png);}
.intro-list01 .list-icon .icon-bar {background-image: url(/portal/img/sub/p07/e0101-03.png);}
.intro-list01 .list-icon .icon-lamp {background-image: url(/portal/img/sub/p07/e0101-04.png);}
.intro-list01 .list-icon .icon-antenna {background-image: url(/portal/img/sub/p07/e0101-05.png);}
.intro-list01 .list-icon .icon-group {background-image: url(/portal/img/sub/p07/e0101-06.png);}
.intro-list01 .list-icon .icon-chart {background-image: url(/portal/img/sub/p07/e0101-07.png);}
.intro-list01 .list-icon .icon-badge {background-image: url(/portal/img/sub/p07/e0101-08.png);}
.intro-list01 .list-text {width: 80%; margin: 0 auto; text-align: center;}

.sub-intro02 .img-header {position: relative; height: 350px;}
.sub-intro02 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro02 {position: relative; word-break: keep-all;}
.sub-intro02 .intro-bg {position: absolute; top: 325px; left: 0; width: 100%; height: 695px; background: #f5f5f5; z-index: -1;}
.sub-intro02 .intro-cont {position: relative; background: none;}
.sub-intro02 .sub-h1 {font-size: 4.0rem; text-align: left;}
.sub-intro02 .sub-h1 span {display: block;}
.sub-intro02 .intro-img {float: none; width: 100%; height: 350px; margin-top: 0;}
.sub-intro02 .intro-text {width: 55%; height: auto;}
.sub-intro02 .intro-text.left {float: left; width: 40%;}
.sub-intro02 p.sub-h2:after {content: none;}
.sub-intro02 .sub-p1 {margin-bottom: 40px;}
.sign {text-align: right;}
.sign span {position: relative; padding-left: 10px;}
.sign span:before {content: ""; position: absolute; top: 50%; left: 0; width: 5px; height: 20px; background: #118ad9; transform: translateY(-50%);}
.sign img {padding-left: 10px;}
@media screen and (max-width: 501px){
	.sign img {width: 60px;}
}
.sub-intro03 {position: relative;}
.sub-intro03 .intro-bg {position: absolute; top: 360px; width: 100%; height: 350px; background: #f5f5f5;}
.sub-intro03 .intro-dd {position: relative; margin-top: 60px;}
.sub-intro03 .sub-h1 {position: relative; margin-bottom: 0;}
.sub-intro03 .sub-h1:after {content: ""; position: absolute; top: -65px; left: 50%; width: 380px;height: 355px; background: url(/portal/img/sub/p07/e0301-01.png) no-repeat center; transform: translateX(-50%); z-index: -1;}
.sub-intro03 .intro-top {width: 100%; height: 350px; margin-top: 95px; background: url(/portal/img/sub/p07/e0301-02.png) no-repeat center/cover;}
.sub-intro03 .intro-detail {position: relative; width: 1200px; height: 700px; margin: -70px auto 120px; border-radius: 20px; background: #fff; box-shadow: 10px 10px 20px 5px rgba(0,0,0,0.1); overflow: hidden;}
.sub-intro03 .intro-detail img {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);}

.sub-intro04 .img-header {width: 100%; height: 350px; margin-bottom: 100px;background: url(/portal/img/sub/p07/e0401-01.png) no-repeat center/cover; border-radius: 20px; box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro04 .img-header .sub-h2 {text-align: center; line-height: 350px;}
.sub-intro04 .intro-detail {width: 100%; margin: 100px auto 80px;}
.sub-intro04 .intro-detail img {display: block; width: auto; margin: 0 auto;}
.sub-intro04 .img-detail {padding: 60px 0; background: #f5f5f5;}
.sub-intro04 .img-detail img {display: block; width: auto; margin: 0 auto;}

.sub-intro05 {margin-bottom: 150px;}
.sub-intro05 .img-header {position: relative; height: 350px;}
.sub-intro05 .img-header:after {content: ""; position: absolute; bottom: -76px; right: 66px; width: 140px; height: 140px; background: url(/portal/img/main/logo-symbol.png) no-repeat center;}
.sub-intro05 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro05 .img-header-title {position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%);}
.sub-intro05 .img-header-title .sub-h2 {margin-bottom: 50px;}
.sub-intro05 .img-header-title .sub-h5 {width: 80%; margin: 0 auto;}
.intro-ul {width: 80%; margin: 100px auto 0;}
.intro-ul li {position: relative; width: 100%; height: 200px; margin-bottom: 45px; border-radius: 5px 30px 5px 30px; background: #f5f5f5;}
.list-dd {position: absolute; top: 50%; left: 60px; width: 84%; transform: translateY(-50%);}
.sub-intro05 .list-dd .sub-p1 {padding-left: 100px; background: url(/portal/img/sub/p07/e0501-i01.png) no-repeat 0 50%/contain;}
.list-dd .sub-p1 span {display: block;}
.sub-intro05 .list-dd .sub-p1.symbol01 {background-image: url(/portal/img/sub/p07/e0501-i01.png);}
.sub-intro05 .list-dd .sub-p1.symbol02 {background-image: url(/portal/img/sub/p07/e0501-i02.png);}
.sub-intro05 .list-dd .sub-p1.symbol03 {background-image: url(/portal/img/sub/p07/e0501-i03.png);}
.sub-intro05 .list-dd .sub-p1.symbol04 {background-image: url(/portal/img/sub/p07/e0501-i04.png);}
.sub-intro05 .list-dd .sub-p1.symbol05 {background-image: url(/portal/img/sub/p07/e0501-i05.png);}
.sub-intro05 .sign {text-align: center;}
.sub-intro05 .sign span:before {content: none;}

.sub-intro06 .img-header {position: relative; height: 350px;}
.sub-intro06 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro06 .img-header-title {position: absolute; top: 100px; right: 90px; width: 100%; height: 100px;}
.sub-intro06 .img-header-title .sub-h2 {text-align: right;}
.sub-intro06 .img-header-title .sub-h2 span {display: block;}
.sub-intro06 .sub-h3 {margin-top: 90px; font-weight: 600;}
.sub-intro06 .sub-h3 span {display: block;}
.sub-intro06 .tab-detail-group {margin-top: 50px;}

.sub-intro07 {position: relative; height: 600px; margin-bottom: 100px;}
.sub-intro07 .intro-bg {position: absolute; bottom: 0; left: 0; width: 100%; height: 400px; background: #f5f5f5; z-index: -1;}
.sub-intro07 .intro-cont {position: absolute; top: 0; width: 100%; background: none;}
.sub-intro07 .intro-cont .sub-inner {position: relative;}
.sub-intro07 .intro-cont img {width: 100%; border-radius: 30px; box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro07 .intro-title {width: 50%; margin: 70px auto 0; text-align: center;}
.sub-intro07 .intro-title:after {content: none;}

.sub-intro08 {margin-bottom: 100px;}
.sub-intro08 .img-header {position: relative; height: 350px;}
.sub-intro08 .img-header img {position: absolute; top: 50%; left: 50%; display: block; width: 100%; border-radius: 30px; transform: translate(-50%, -50%); box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2);}
.sub-intro08 .img-header-title {position: absolute; top: 50%; left: 50%; width: 80%; transform: translate(-50%, -50%);}
.sub-intro08 .img-header-title .sub-h2 {margin-bottom: 10px;}
.sub-intro08 .img-header-title .sub-h5 {width: 80%; margin: 0 auto;}

@media screen and (max-width:1279px){
    .sub-intro07 {height: auto; margin-bottom: 0;}
    .sub-intro07 .intro-bg {display: none;}
    .sub-intro07 .intro-cont {position: relative; padding-bottom: 0;}
    .sub-intro07 .intro-title  {width: 80%;}
}
.history-header {width: 20px; height: 20px; margin: 30px auto 15px; border-radius: 50%; border: 5px solid #f05022;}
.history-detail {position: relative; width: 100%; height: 1330px;}
.history-line {position: absolute; top: 0; left: 50%; width: 5px; height: 100%; background: #e5e5e5; transform: translateX(-50%); overflow: hidden; z-index: -1;}
.history-fill {position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: #f05022;}
.history-list {position: relative;}
.history-list:after {content: ""; position: absolute; top: 7px; left: -64px; width: 12px; height: 12px; background: #fff; border-radius: 50%; border: 2px solid #333;}
.history-list .sub-p1 {display: flex;}
.history-list .th {flex: 0 0 20%; max-width: 20%; font-weight: 700;}
.history-list .td {flex: 0 0 75%; max-width: 75%;}
.history-list .td-dd {position: relative;}
.history-list .td-dd span:nth-child(2) {display: block;}
.history-list .td-dd:before {content: "·"; padding-right: 10px;}
.history-wrap {width: 50%; height: 750px;}

.history-unit {width: 100%; padding: 50px 0; border-radius: 30px; background: #f5f5f5; text-align: center;}
.history-unit img {display: block; margin: 0 auto;}
.history-unit img.img-pc {display: block; width: auto; margin: 0 auto;}
.history-unit img.img-mo {display: none;}
@media screen and (max-width:1279px){
    .history-unit img.img-pc {width: 100%;}
}
@media screen and (max-width: 767px){
    .history-unit img.img-pc {display: none !important;}
    .history-unit img.img-mo {display: block !important; width: 100%;}
}

.history-unit .th {padding-right: 45px; font-weight: 700;}
.history .tab-detail {margin-top: 50px;}

.history01 .history-list {position: absolute; width: 50%;}

.history01 .history-list:nth-child(2n-1) {left:54%;}
.history01 .history-list:nth-child(2n) {left:-4%; text-align: right;}
.history01 .history-list:nth-child(2n):after {left: auto; right: -64px;}
.history01 .history-list:nth-child(2n) .sub-p1 {flex-direction: row-reverse;}

.history01 .history-list:nth-child(1) {top: 50px;}
.history01 .history-list:nth-child(2) {top: 225px;}
.history01 .history-list:nth-child(3) {top: 445px;}
.history01 .history-list:nth-child(4) {top: 680px;}
.history01 .history-list:nth-child(5) {top: 680px;}
.history01 .history-list:nth-child(6) {top: 800px;}

.history02 .wrap01, .history03 .wrap01, .history04 .wrap01 {position: absolute; left: 54%;}
.history02 .wrap02, .history03 .wrap02, .history04 .wrap02 {position: absolute; left: -4%;}
.history02 .history-list, .history03 .history-list, .history04 .history-list {position: absolute; width: 100%;}
.history02 .wrap02 .history-list, .history03 .wrap02 .history-list, .history04 .wrap02 .history-list {text-align: right; right: 0;}
.history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {left: auto; right: -64px;}
.history02 .wrap02 .history-list .sub-p1, .history03 .wrap02 .history-list .sub-p1, .history04 .wrap02 .history-list .sub-p1 {flex-direction: row-reverse;}
.history02 .wrap01 .sub-h5, .history03 .wrap01 .sub-h5, .history04 .wrap01 .sub-h5 {position: absolute; top: -42px; left: 100px;}
.history02 .wrap02 .sub-h5, .history03 .wrap02 .sub-h5, .history04 .wrap02 .sub-h5  {position: absolute; top: -42px; right: 100px;} 

.history02 .history-detail {height: 1600px;}
.history02 .wrap01 .history-list:nth-child(1) {top: 390px;}
.history02 .wrap01 .history-list:nth-child(2) {top: 550px;}
.history02 .wrap01 .history-list:nth-child(3) {top: 1050px;}
.history02 .wrap01 .history-list:nth-child(4) {top: 1500px;}

.history02 .wrap02 .history-list:nth-child(1) {top: 60px;}
.history02 .wrap02 .history-list:nth-child(2) {top: 230px;}
.history02 .wrap02 .history-list:nth-child(3) {top: 390px;}
.history02 .wrap02 .history-list:nth-child(4) {top: 550px;}
.history02 .wrap02 .history-list:nth-child(5) {top: 800px;}
.history02 .wrap02 .history-list:nth-child(6) {top: 950px;}
.history02 .wrap02 .history-list:nth-child(7) {top: 1200px;}
.history02 .wrap02 .history-list:nth-child(8) {top: 1300px;}
.history02 .wrap02 .history-list:nth-child(9) {top: 1400px;}

.history-dev {padding-top: 50px;}
.history-dev .history-detail {height: 1800px;}
.history-dev .history-fill {background: #118ad9;}
.history-dev .history-header {border-color: #118ad9;}
.history-dev .history-list .sub-p1 {display: block;}
.history-dev .step-title {font-size: 2.6rem; font-weight: 700; color: #118ad9;}
.history-dev .history-list .th {flex:auto; max-width: 100%;}
.history-dev .history-list .td {flex:auto; max-width: 100%;}
.history-dev .history01 .history-list:nth-child(2) {top: 335px;}
.history-dev .history01 .history-list:nth-child(3) {top: 695px;}
.history-dev .history01 .history-list:nth-child(4) {top: 955px;}
.history-dev .history01 .history-list:nth-child(5) {top: 1250px;}

@media screen and (max-width: 1399px){
    .sub-intro03 .intro-detail {width: 80%; height: 535px;}
    .sub-intro03 .intro-detail img {width: 100%;}
    .history .sub-inner {width: 1200px;}
    .history-list:after {left: -56px;}
    .history01 .history-list:nth-child(2n):after {right: -56px;}
    .history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {right: -56px;}
}
@media screen and (max-width: 1279px){
    .intro-list01 {width: 100%; padding-top: 0;}
    .intro-cont .intro-img {width: 450px; height: 450px;}
    .intro-cont .intro-img img {display: block; width: 120%;}
    .intro-cont .intro-text {width: calc(100% - 550px);}
    .sub-intro02 .intro-bg {display: none;}
    .sub-intro02 .sub-h1 {font-size: 3.0rem;}
    .sub-intro02 .intro-img {position: relative; width: 100%; height: 260px;}
    .sub-intro02 .intro-text {width: 55%; height: auto;}
    .sub-intro02 .intro-text.left {width: 40%;}
    .sub-intro03 .intro-bg {display: none;}
    .sub-intro03 .intro-top {height: 200px;}
    .sub-intro03 .intro-detail {height: auto; margin: 50px auto; border-radius: 0; box-shadow: none;}
    .sub-intro03 .intro-detail img {position: relative; transform: none; top: 0; left: 0;}
    .sub-intro04 .img-detail img {width: 100%;}
    .sub-intro05 {margin-bottom: 40px;}
    .sub-intro05 .img-header:after {bottom: 0; width: 100px; height: 100px; background-size: cover;}
    .img-header:after {content: none;}
    .intro-ul {margin: 0 auto;}
    .intro-ul li {height: 117px;}
    .history .sub-inner {width: 1000px;}
    .history-list:after {left: -48px;}
    .history01 .history-list:nth-child(2n):after {right: -48px;}
    .history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {right: -48px;}
}
@media screen and (max-width: 1023px){
    .sub-intro01 {height: auto; padding-top: 0; margin-bottom: 50px;}
    .intro-list01 { margin: 0 auto 40px;}
    .intro-list01 li {width: 50%; height: 310px;}
    .intro-list01 .list-text {width: 60%;}
    .intro-list01 li:nth-child(2n):before {content: none;}
    .intro-cont .intro-img {width: 350px; height: 350px; margin-top: -30px;}
    .intro-cont .intro-text {width: calc(100% - 400px);}
    .sub-intro02 .sub-h1 {font-size: 2.5rem;}
    .sub-intro02 .intro-img {width: 100%; height: 220px; margin-top: 0;}
    .sub-intro02 .intro-img img {position: absolute; top: 50%; left: 50%; min-height: 103%; transform: translate(-50%, -50%);}
    .sub-intro02 .img-header {height: 200px;}
    .sub-intro03 .intro-detail {width: 100%;}
    .sub-intro04 .intro-detail img {width: 100%;}
    .sub-intro04 .img-header {height: 200px;}
    .sub-intro04 .img-header .sub-h2 {line-height: 200px;}
    .sub-intro05 {margin-bottom: 20px;}
    .sub-intro05 .img-header {height: auto;}
    .sub-intro05 .img-header:after {/*bottom: -47px; width: 60px; height: 60px;*/content: none;}
    .sub-intro05 .img-header-title {position: static; margin: 0 auto; padding: 20px; transform: translate(0);}
    .sub-intro05 .img-header-title .sub-h2 {margin-bottom: 10px;}
    
    .intro-ul {width: 100%;}
    .img-header {height: 200px;}
    .img-header-title .sub-h2 {margin-bottom: 0;}
    .img-header-title .sub-h5 {display: none;}
    .intro-ul {margin: 50px auto 0;}

    .sub-intro06 .img-header {height: 200px;}
    .sub-intro06 .img-header-title {top: 50%; right: 5%; transform: translateY(-50%); height: auto;}
    .sub-intro06 .sub-h4 {margin-top: 50px;}

    .tab-detail {position: relative;}
    .history .sub-inner {width: 760px; margin: 0;}
    .history .sub-p1 {font-size: 1.4rem; line-height: 1.7;}
    .history .sub-h2 {width: 95%;margin: 0 auto 30px; text-align: left;} 
    .history-detail {height: auto !important; padding-top: 30px; padding-left: 30px;}
    .history-wrap {width: 90%; height: auto; margin: 0 auto 0; padding-left: 0;}
    .history-header {position: absolute; top: 20px; left: 22px; background: #fff ; z-index: 2;}
    .history-line {top: 0; left: 30px; transform: translateX(0);}
    .history-list {position: relative; left: 0; width: 100% !important; margin-bottom: 30px;}
    .history-list:after {top: 4px; left: -42px;}
    .history-list .td-dd:before {padding-right: 4px;}
    .history-unit {width: 90%; margin: 0 0 0 20px; padding: 30px 0 0;}
    .history-unit img {width: 90%;}

    .history01 .history-list {position: relative;}
    .history01 .history-list:nth-child(2n-1) {top: 0px; left: 0;}
    .history01 .history-list:nth-child(2n) {top: 0px; left: 0; text-align: left;}
    .history01 .history-list:nth-child(2n) .sub-p1 {flex-direction: row;}
    .history01 .history-list:nth-child(2n):after {left: -42px; right: auto;}

    .history02 .wrap01, .history03 .wrap01, .history04 .wrap01 {position: static;}
    .history02 .wrap02, .history03 .wrap02, .history04 .wrap02 {position: static;}
    .history02 .history-list, .history03 .history-list, .history04 .history-list {position: relative; top: 0 !important; left: 0;}
    .history02 .wrap02 .history-list, .history03 .wrap02 .history-list, .history04 .wrap02 .history-list {text-align: left; right: 0;}
    .history02 .wrap02 .history-list:after, .history03 .wrap02 .history-list:after, .history04 .wrap02 .history-list:after {left: -42px; right: auto;}
    .history02 .wrap02 .history-list .sub-p1, .history03 .wrap02 .history-list .sub-p1, .history04 .wrap02 .history-list .sub-p1 {flex-direction: row;}
    .history02 .wrap01 .sub-h5, .history03 .wrap01 .sub-h5, .history04 .wrap01 .sub-h5 {position: static; padding-bottom: 40px; font-size: 1.8rem; text-align: left;}
    .history02 .wrap02 .sub-h5, .history03 .wrap02 .sub-h5, .history04 .wrap02 .sub-h5  {position: static; padding-bottom: 40px; font-size: 1.8rem; text-align: left;} 
    
    .history-dev .history01 .history-list {position: static;}
    .history-dev .history01 .history-list:after {content: none;}
}
@media screen and (max-width: 767px){
    .intro-cont {background: none;}
    .intro-cont .intro-img {float: none; width: 100%;}
    .intro-cont .intro-text {float: none; width: 100%;}
    .sub-intro01 {margin-bottom: 0;}
    .intro-list01 .list-icon {width: 160px; height: 160px;}
    .intro-list01 .list-icon:before {width: 150px; height: 150px;}
    .intro-list01 .list-icon:after {width: 140px; height: 140px;}
    .intro-list01 li:before {top: 75px;}
    .sub-intro02 .sub-h1 {font-size: 2.2rem;}
    .sub-intro02 .intro-img {width: 100%; height: 150px; margin-bottom: 50px;}
    .sub-intro02 .intro-text {float: none; width: 100%; padding-top: 0;}
    .sub-intro02 .intro-text.left {float: none; width: 100%;}
    .sub-intro03 .intro-top {height: 150px; margin-top: 30px;}
    .sub-intro04 .img-header {height: 150px;}
    .sub-intro04 .img-header .sub-h2 {line-height: 150px;}
    .sub-intro05 .img-header {border-radius: 30px; overflow: hidden;}
    .sub-intro05 .img-header img {min-width: 100%; height: 100%; border-radius: 0;}
    .sub-intro08 {margin-bottom: 0px;}
    .sub-intro08 .img-header {height: 150px;}
    .sub-intro08 .img-header.eng01 {height: auto; border-radius: 20px; overflow: hidden;}
    .sub-intro08 .img-header.eng01 img {width: auto; height: 100%;}
    .sub-intro08 .eng01 .img-header-title {position: static; margin: 0 auto; padding: 20px; transform: translate(0);}
    
    .sub-intro08 .img-header img {border-radius: 20px;}
    .list-dd {position: static; transform: translateY(0);}
    .intro-ul {width: 90%;}
    .intro-ul li {height: auto; background: none;}
    .list-dd {width: 100%;}
    .list-dd .sub-p1 {background-size: 50px; background-position: 0 0;}
    
    .history .sub-inner {width: 500px; margin: 0;}
    .history-wrap {width: calc(100% - 37px); margin: 0 0 0 37px;}
}
@media screen and (max-width: 499px){
    .intro-cont {padding-bottom: 30px;}
    .intro-cont .intro-text {padding-top: 50px;}
    .intro-list01 li {height: 210px;}
    .intro-list01 .list-icon {width: 100px; height: 100px;}
    .intro-list01 .list-icon:before {width: 90px; height: 90px;}
    .intro-list01 .list-icon:after {width: 75px; height: 75px;}
    .intro-list01 .list-icon span {width: 30px; height: 30px;}
    .intro-list01 li:before {top: 45px; right: -4px;}
    .intro-list01 .list-text {width: 90%;}
    .intro-list01 .list-text .sub-p2 {font-size: 1.2rem;}
    .intro-cont .intro-img {height: 250px;}
    .sub-intro02 .sub-h1 {font-size: 1.8rem;}
    .sub-intro02 p.sub-h2 {padding-bottom: 0;}
    .sub-intro02 .intro-img {width: 100%; height: 100px; margin-bottom: 30px; border-radius: 15px;}
    .sub-intro03 .intro-dd {margin-top: 0;}
    .sub-intro03 .sub-h1:after {top: -30px; width: 150px; height: 150px; background-size: cover;}
    .sub-intro04 .img-header {height: 100px;}
    .sub-intro04 .img-header .sub-h2 {line-height: 100px;}
    .sub-intro05 .img-header img {min-width: auto; width: auto; height: 100%;}
    .sub-intro02 .img-header {height: 110px;}
    .sub-intro02 .img-header img, .sub-intro05 .img-header img {border-radius: 20px;}
    .sub-intro06 .img-header {height: 110px;}
    .sub-intro06 .img-header img {border-radius: 20px;}

    .history .sub-inner {width: 350px;}
    .history-wrap {width: calc(100% - 37px);; margin: 0 0 0 32px;}
    .history-header {left: 17px;}
    .history-line {left: 25px;}
}
@media screen and (max-width: 359px){
    .intro-list01 .list-text {width: 90%;}
    .history .sub-inner {width: 320px;}
    .history-wrap {width: calc(100% - 37px);; margin: 0 0 0 32px;}
}

/* =============================================================
    sub : sub-ci
============================================================= */
.ci-cont .img-auto {width: auto;}
.ci-cont img {display: block; width: 100%;}
.ci-dd {display: flex;} 
.ci-img {width: auto;}
.ci-img img {display: block; width: auto;}
.btn-group {text-align: right;}
.btn-group.align-left {text-align: left;}
.btn-group .btn {position: relative; width: 300px; height: 70px; padding: 0 40px; text-align: left;}
.btn-group .btn i {position: absolute; top: 50%; right: 50px; transform: translateY(-50%);}
.btn-group.btn-auto {text-align: center;}
.btn-group.btn-auto .btn {float: none; width: auto; padding-right: 100px; text-align: left;}
.btn-group a.btn {line-height: 68px;}
@media screen and (max-width: 1279px){
    .ci-cont .img-auto {width: 90%; margin: 0 auto;}
    .btn-group {text-align: center;}
    .btn-group.align-left {text-align: center;}
    .btn-group .btn {width: auto; height: auto; padding: 15px 80px 15px 30px;}
    .btn-group a.btn {line-height: 1.4;}
    .btn-group .btn i {right: 30px;}
}
@media screen and (max-width: 499px){
    .btn {padding: 0.375rem 0.38rem; font-size: 1.2rem;}
    .btn-group .btn {margin-top: 10px; padding: 10px 50px 10px 15px; font-size: 1.2rem;}
    .btn-group .btn i {right: 20px;}
}

/* =============================================================
    sub : sub-title
============================================================= */
.sub-title01 {width: 100%; margin-bottom: 90px;}
.sub-title01 .title-bg {display: flex; align-items: center; padding: 40px; background: #f5f5f5; border-radius: 20px;}
.sub-title01 .title-symbol {margin-right: 40px; border-radius: 10px; background: #fff;}
.sub-title02 {margin-bottom: 90px;}
.sub-title02 .title-bg {padding: 40px;background: #f5f5f5; border-radius: 20px;}
.sub-title02 .title-cover {display: flex; align-items: flex-start;}
.sub-title02 .sub-h4 {margin-bottom: 40px; font-weight: 600; text-align: left;} 
.sub-title02 .sub-p2 span {display: block;}
.sub-title02 .title-symbol {margin-right: 40px; border-radius: 10px; background: #fff;}
@media screen and (max-width: 767px){
    .sub-title01 .title-bg {align-items: flex-start;}
    .sub-title02 {margin-bottom: 50px;}
    .sub-title02 .title-bg {padding: 30px;}
    .sub-title02 .sub-p1 span {display: inline;}
}
@media screen and (max-width: 499px){
	.sub-title01 {margin-bottom: 20px;}
    .sub-title01 .title-bg {display: block;}
    .sub-title01 .title-symbol {float: left; margin-right: 20px;}
    .sub-title02 .title-cover {display: block;}
    .sub-title02 .title-symbol {float: left; margin-right: 20px;}
}

/* =============================================================
    sub : csr-cont
============================================================= */
.csr-cont .bg-line {height: 505px; padding: 60px 40px; border-width: 4px !important; text-align: center;}
.csr-cont .text-top {height: 100px;}
@media screen and (max-width: 767px){
    .csr-cont .bg-line {height: auto; margin-bottom: 20px;}
    .csr-cont .text-top {height: auto; margin-bottom: 20px;}
}

/* =============================================================
    sub : map-cont
============================================================= */
.map-cont {display: flex; margin-bottom: 50px;}
.map-cont .text {margin-left: 30px;}
.map-iframe {position: relative; width: 100%; height: 500px; margin-bottom: 50px; box-shadow: 5px 5px 20px 5px rgba(0,0,0,0.2); overflow: hidden;}
.map-iframe img {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
@media screen and (max-width: 1023px){
    .map-iframe {height: 250px;} 
}
@media screen and (max-width: 499px){
    .map-iframe {height: 150px;} 
    .map-cont .icon {display: none;}
    .map-cont .text {margin-left: 0;}
}
/* =============================================================
    sub : sub-popup
============================================================= */
.sub-popup {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 101;}
.sub-popup .popup-shadow {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.4);}
.sub-popup .popup-inner {position: absolute; top: 50%; left: 50%; width: 1200px; margin: 0 auto; transform: translate(-50%, -50%); z-index: 1;}
.sub-popup .popup-bg {width: 100%; padding: 80px; border-radius: 20px; background: #fff;}
.sub-popup .popup-header {position: relative; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #d5d5d5;}
.sub-popup .sub-h2 {text-align: left;}
.sub-popup .btn-close {position: absolute; top: 50%; right: 0; color: #999; text-transform: uppercase; transform: translateY(-50%);}
.sub-popup .cross {display: inline-block; position: relative; width: 18px; height: 18px; margin-left: 10px;}
.sub-popup .cross:before, .sub-popup .cross:after {content: ""; position: absolute; top: 70%; left: 50%; width: 100%; height: 2px; border-radius: 2px; background: #999;}
.sub-popup .cross:before {transform: translate(-50%, -50%) rotate(-45deg);}
.sub-popup .cross:after {transform: translate(-50%, -50%) rotate(45deg);}
.sub-popup .popup-cont {height: 350px; overflow-y: auto;}
.sub-popup .btn-submit-group {margin-bottom: 0; margin-top: 50px;}
@media screen and (max-width: 1279px){
    .sub-popup .popup-bg {width: 100%; padding: 50px;}
    .sub-popup .popup-inner {width: 80%;}
}
@media screen and (max-width: 767px){
    .sub-popup .popup-bg {padding: 30px;}
    .sub-popup .popup-inner {width: 85%;}
    .sub-popup .btn-submit-group {margin-top: 20px;}
}
/* =============================================================
    sub : ethics-cont
============================================================= */
.ethics-cont {position: relative; padding: 70px 10%; border: 4px solid #e2e2e2;}
.corner-group {position: absolute; width: 100%; height: 100%;}
.ethics-corner {position: absolute; width: 64px; height: 64px; background: url(/portal/img/sub//p07/ethics-i01.png) no-repeat center;}
.ethics-corner.corner01 {top: -74px; left: -144px; background-image: url(/portal/img/sub/p07/ethics-i01.png);}
.ethics-corner.corner02 {top: -74px; right: 136px; background-image: url(/portal/img/sub/p07/ethics-i02.png);}
.ethics-corner.corner03 {bottom: 66px; left: -144px; background-image: url(/portal/img/sub/p07/ethics-i03.png);}
.ethics-corner.corner04 {bottom: 66px; right: 136px; background-image: url(/portal/img/sub/p07/ethics-i04.png);}
.ethics-title {position: relative; width: 520px; height: 125px; margin: 0 auto 50px; text-align: center;}
.ethics02 .ethics-title {width: 730px;}
.ethics-title:before, .ethics-title:after {content: ""; position: absolute; top: 50%; left: 0; width: 60px; height: 116px; background: url(/portal/img/sub/p07/ethics-hi001.png) no-repeat center; transform: translateY(-50%);}
.ethics-title:after {left: auto; right: 0; background-image: url(/portal/img/sub/p07/ethics-hi002.png);}
.ethics-title .title {line-height: 125px;}
.ethics-subtitle .subtitle {margin-bottom: 40px;}
.ethics-subtitle .subtitle span {display: block;}
.ethics-list {width: 80%; margin: 0 auto; border-top: 2px solid #118ad9; border-bottom: 2px solid #118ad9;}
.ethics-dl {display: flex; align-items: center; padding: 40px 0 30px; border-bottom: 1px solid #d5d5d5;}
.ethics-dl:last-child {border-bottom: none;}
.ethics-dt {display: relative; flex: 0 0 15%; max-width: 15%; height: 65px;background: url(/portal/img/sub/icon-symbol.png) no-repeat center; text-align: center; line-height: 65px;}
.ethics-dt img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ethics-dd {flex: 0 0 85%; max-width: 85%;}
.ethics-date {margin: 60px auto 40px;}
.ethics-sign .sign {text-align: center;}
.link-group {width: 80%; margin: 0 auto;}
.ex-title {margin: 20px 0 10px 0; border-radius: 20px 20px 0 0; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.1); text-align: center;}
@media screen and (max-width: 1399px){
    .corner-group {display: none;}
}
@media screen and (max-width: 1023px){
    .ethics02 .ethics-title {width: 100%; margin-bottom: 0;}
    .ethics02 .ethics-title .title {line-height: 2.0; word-break: keep-all;}
    .ethics02 .ethics-title:before, .ethics02 .ethics-title:after {content: none;}
}
@media screen and (max-width: 767px){
    .ethics-cont {padding: 25px;}
    .ethics-list {width: 100%;}
    .ethics-title {width: auto;}
    .ethics-subtitle .subtitle span {display: inline;}
    .ethics-dl {align-items: flex-start; }
    .ethics-dd {flex: 0 0 75%; max-width: 75%; margin-left: 10%;}
    .ethics-dt {background-size: contain;}
}
@media screen and (max-width: 499px){
    .ethics-cont {padding: 10px; margin-top: -50px; border: none;}
    .corner-group {display: none;}
    .ethics-title {margin: auto;}
    .ethics-title:before, .ethics-title:after {width: 40px; height: 90px; background-size: contain;}
}
/* =============================================================
    sub : webzine-cont
============================================================= */
.webzine {position: relative; width: 100%; height: 260px; margin-bottom: 60px;}
.webzine .webzine-img {position: absolute; top: 0; left: 0; width: 330px; height: 240px; overflow: hidden; box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.2); z-index: 1;}
.webzine .webzine-text {position: absolute; bottom: 0; right: 0; width: calc(100% - 280px); height: 210px; padding: 40px 40px 40px 90px; background: #f5f5f5;}

.webzine01 {margin-bottom: 20px; overflow: hidden;}
.webzine01 .webzine-top {padding: 25px 0; border-top: 2px solid #00397f; background: #f5f5f5;}
.webzine01 .webzine-top p {text-align: center;}
.webzine01 .webzine-img {overflow: hidden;}
.webzine01 .webzine-text {padding: 30px 20px;}

.webzine02 {padding-top: 40px; border-top: 2px solid #000;}
.webzine-card {display: block; margin-bottom: 40px; border-radius: 10px; overflow: hidden; transition: 0.4s;}
.webzine-card .card-img {position: relative; height: 240px; border-radius: 10px; overflow: hidden; transition: 0.4s;}
.webzine-card .card-img:before {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.webzine-card .card-img:after {content: ""; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; background: url(/portal/img/main/youtube-play.png) no-repeat center; transform: translate(-50%, -50%);}
.webzine-card .card-title {padding: 25px; font-weight: 500; transition: 0.4s;}
.webzine-card .card-title .sub-p2 {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.webzine-card .card-date li {position: relative; display: inline-block; margin-top: 20px; padding-right: 20px;}
.webzine-card .card-date li:after {content: ""; position: absolute; top: 50%; right: 8px; width: 1px; height: 80%; background: #e5e5e5; transform: translateY(-50%);}
.webzine-card .card-date li:last-child:after {content: none;}

.webzine-card:hover {text-decoration: none;}
.webzine-card:hover .card-img {border-radius: 10px 10px 0 0;}
.webzine-card:hover .card-title {background: #061e2d; color: #fff;}

.wz-scroll {flex: 0 0 calc(100% - 40px); height: 225px; padding: 40px; margin: 20px; background: #f5f5f5; box-shadow: 15px 15px 10px 5px rgba(0,0,0,0.1); overflow: hidden;}
.wz-inner {flex: 0 0 calc(100% - 40px); height: 100%;overflow-y: auto;}

.iframe-board {margin-bottom: 100px;}
.iframe-board .iframe-cover {height: 440px;}
.iframe-board .iframe-date {position: relative; margin-left: 20px;}
.iframe-board .iframe-date:after {content: ""; position: absolute; left: 0; bottom: 0; width: 35px; height: 2px; background: #118ad9;}
.iframe-board .iframe-date .title {margin-bottom: 40px;}
.iframe-board .iframe-date .title p {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.iframe-board .iframe-date .subtitle {padding-bottom: 20px;}
.iframe-board .wz-scroll {height: 298px;}

.ht120 {padding: 30px 20px 0 20px; margin: 5px; height: 250px; box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.1);}
.ht120 p {padding-top: 20px;}
.st130 {position: relative;}
.st130:after {content:""; position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; background: url(/portal/img/main/eng/sub/p02/e0701-01.png) no-repeat center; transform: translate(-50%, -50%);}
.st130 > [class*="col"] > div {height: 400px; padding: 60px 20px 0 20px; margin: 20px 10px;}
.st130 img {margin-top: 20px;}
.st140 {position: relative; margin-top: 50px;}
.st140 > [class*="col"] > div {height: 520px; padding: 60px 20px 0 20px; margin: 20px 10px;}
.st140 img {margin-top: 20px;}

@media screen and (max-width: 1023px){
    .webzine {height: auto;}
    .webzine .webzine-text {height: auto;}
    .webzine .webzine-img {position: static; height: 150px; width: 100%;}
    .webzine .webzine-img img {display: block; width: 100%;}
    .webzine .webzine-text {position: static; width: 100%; height: auto; margin-top: 20px; padding: 40px;}
    .ht120 {height: auto;padding: 30px 20px 30px 20px; margin: 0 0 20px 0;}
    .st130:after{content: none;}
    .st130 > [class*="col"] > div {height: auto; padding: 50px 20px 20px 20px;}
    .st140 > [class*="col"] > div {height: auto; padding: 50px 20px 20px 20px;}
}
@media screen and (max-width: 767px){
    .webzine {height: auto;}
    .webzine .webzine-img {position: static; height: 150px; width: 100%;}
    .webzine .webzine-img img {display: block; width: 100%;}
    .webzine .webzine-text {position: static; width: 100%; height: auto; margin-top: 20px; padding: 40px;}
    .iframe-board .iframe-date {margin-top: 30px;}
    .iframe-board .wz-scroll {height: auto;}
}
/* =============================================================
    sub : cs-scroll 01
============================================================= */
.cs-scroll {direction: ltr;scrollbar-color: var(--scrollbarBG);scrollbar-width: thin;}
.cs-scroll::-webkit-scrollbar {width: 2px;}
.cs-scroll::-webkit-scrollbar-track {background-color: #e4e4e4;border-radius: 100px;}
.cs-scroll::-webkit-scrollbar-thumb {background-color: #333;border-radius: 100px;}

.vs-scroll {direction: ltr;scrollbar-color: var(--scrollbarBG);scrollbar-width: thin;}
.vs-scroll::-webkit-scrollbar {height: 2px;}
.vs-scroll::-webkit-scrollbar-track {background-color: #ddd;border-radius: 100px;}
.vs-scroll::-webkit-scrollbar-thumb {background-color: #00397f;border-radius: 100px;}

/* =============================================================
    sub : line-box
============================================================= */
.line-box {border:3px solid #f1f1f1; border-radius: 20px; text-align: center;}
.line-box .title {padding: 10px; background: #f5f5f5;}
.line-box .title p:before {content: "·"; padding-right: 5px; color: #f05022; font-size: 3.5rem; line-height: 0.5;}
.line-box .paragraph {padding: 20px;}

.line-box.line02 {display: flex; padding: 10px 30px; margin-bottom: 20px; border-radius: 10px; border: 1px solid #ddd; align-items: center; justify-content: space-between;}
.line-box.line02 .title {padding: 0; background: none; text-align: left;}
.line-box.line02 .title p:before {content: none;}
.line-box.line02 .btn-group .btn {width: 220px; height: auto; padding: 20px 0; border-radius: 10px; text-indent: 40px;}
.line-box.line02 .btn-group a.btn {line-height: 1;}

.line-box.line03 {border-top: 2px solid #2f5993; border-bottom: 1px solid #d5d5d5; border-left: none; border-right: none; border-radius: 0; text-align: left;}
.line-box.line03 .title {padding: 18px 40px;}
.line-box.line03 .title p:before {content: none;}
.line-box.line03 .content {padding: 20px 40px; border-top: 1px solid #d5d5d5;}

@media screen and (max-width:767px){
    .line-box.line02 {padding: 10px;}
    .line-box.line02 .btn-group {flex: 0 0 30%; max-width: 30%;}
    .line-box.line02 .btn-group .btn {width: auto; padding: 10px 60px 10px 10px; text-indent: 0;}
}
@media screen and (max-width:499px){
    .line-box.line02 {flex-wrap: wrap;}
    .line-box.line02 .btn-group {flex: 0 0 auto; max-width: 100%;}
}
/* =============================================================
    sub : chart.js
============================================================= */
.chart01 {position: relative; width: 100%; height: 600px;}
.chart01 canvas {position: absolute; width: auto !important; height: 500px !important;}
.chart01 .text-box {position: absolute; bottom: 20px; left: 0; width: 100%;}

.chart02 {margin-bottom: 80px;}

.bar-graph {display: flex; align-items: center; margin-bottom: 20px;}
.bar-graph .check-circle {position: relative; display: inline-block; width: 20px; height: 20px; margin-top: 6px; border-radius: 50%; background: #00397f;}
.bar-graph .check-circle:before, .bar-graph .check-circle:after {content: ""; position: absolute;height: 1px; background: #fff;}
.bar-graph .check-circle:before {width: 6px; top: 10px; left:9px; transform: rotate(-46deg);}
.bar-graph .check-circle:after {width: 7px; top: 10px; left: 4px; transform: rotate(46deg);}
.bar-graph .text {width: 200px; padding-left: 10px;}
.bar-graph .graph {position: relative; width: 100%; height: 50px; margin-left: 10px;}
.bar-graph .bar {position: absolute; width: 36.6%; height: 100%; background: #00397f; border-radius: 0 15px 15px 0;}
.bar-graph .percent {margin-left: 10px;}

.bar01 .check-circle, .bar01 .bar {background: #00397f;}
.bar02 .check-circle, .bar02 .bar {background: #0550d4;}
.bar03 .check-circle, .bar03 .bar {background: #0854fc;}
.bar04 .check-circle, .bar04 .bar {background: #1960fc;}
.bar05 .check-circle, .bar05 .bar {background: #2669fc;}
.bar06 .check-circle, .bar06 .bar {background: #3376ff;}
.bar07 .check-circle, .bar07 .bar {background: #3386ff;}
.bar08 .check-circle, .bar08 .bar {background: #3d98fd;}
.bar09 .check-circle, .bar09 .bar {background: #5eaafe;}
.bar10 .check-circle, .bar10 .bar {background: #84bdfc;}
.bar11 .check-circle, .bar11 .bar {background: #93ccfb;}
.bar12 .check-circle, .bar12 .bar {background: #aad7fc;}
.bar13 .check-circle, .bar13 .bar {background: #d5f0ff;}
@media screen and (max-width:1023px){
    .chart01 {display: none;}
}
/* =============================================================
    sub : search page
============================================================= */
.search-more-btn {position: relative;}
.search-more-btn:after {content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: #777;}
.search-more-btn:hover {text-decoration: none;}

/* =============================================================
    sub : mobile-lnb-group
============================================================= */

.mlg-group {display: none; position: absolute; top: 0; left: 0; width: 100%; padding: 15px; background: #eee;}
.mlg-list {position: relative; display: inline-block; padding-right: 20px;}
.mlg-list:after {content: ""; position: absolute; top: 50%; right: 2px; width: 8px; height: 8px; background: url(/portal/img/sub/arrow-right.png) no-repeat center/contain; transform: translateY(-50%);}
.mlg-link {color: #999;}
.mlg-list:last-child:after {content: none;}
.mlg-list:last-child .mlg-link {color: #117fc3;}
@media screen and (max-width: 1279px){
    .mlg-group {display: block;}
}

/* =============================================================
    sub : st01
============================================================= */
.st01 {position: relative; width: 1200px; height: auto; padding: 50px 30px; margin: -70px auto 120px; border-radius: 20px; background: #fff; box-shadow: 10px 10px 20px 5px rgba(0,0,0,0.1); overflow: hidden;}
.st01 .h1 {font-size: 3.6rem; text-align: center; font-weight: 600;}
.st01 .h2 {margin-top: 25px; font-size: 2.6rem; text-align: center;}
.st01 .h3 {height: 230px; text-align: center;}
.st01 .img-auto {margin: 40px auto 0; width: auto;}
.st01 .h4 {font-size: 2.6rem; font-weight: 600; text-align: center; color: #118ad9;}
.st01 .ex-title {font-size: 2.0rem; font-weight: 500;}
.st01 .bg-grey {position: relative; height: 130px; border-radius: 0 0 20px 20px;}
.st01 .bg-grey p {position: absolute; top: 50%; left: 50%; width: 60%; transform: translate(-50%, -50%); word-break: keep-all;}
@media screen and (max-width:1399px){
    .sub-intro03 .intro-bg {display: none;}
    .st01 {width: 100%; margin: 100px auto 0; padding: 0; box-shadow: none; border-radius: 0; background: none;}
    .st01 .h1 {font-size: 2.8rem;}
    .st01 .h2 {font-size: 2.2rem;}
}
@media screen and (max-width:1023px){
    .st01 {margin-top: 50px;}
    .st01 .h1 {font-size: 2.2rem;}
    .st01 .h2 {width: 60%; margin: 25px auto; font-size: 1.6rem; word-break: keep-all;}
    .st01 .h4 {font-size: 1.8rem;}
    .st01 .ex-title {font-size: 1.8rem; font-weight: 500;}
    .st01 .bg-grey {height: auto;}
    .st01 .bg-grey p {position: static; width: 100%; padding: 15px; text-align: center; transform: translate(0);}
}
@media screen and (max-width:499px){
    .st01 .h3 {height: 150px;}
    .st01 .img-auto {width: 200px;}
}
/* =============================================================
    sub : st02
============================================================= */
.st02 {width: 100%; height: 500px;}
.st02 iframe {width: 100%; height: 100%;}
@media screen and (max-width:1023px){
    .st02 {width: 100%; height: 350px;}
}
@media screen and (max-width:767px){
    .st02 {width: 100%; height: 200px;}
}
@media screen and (max-width:499px){
    .st02 {width: 100%; height: 150px;}
}
/* =============================================================
    sub : st03
============================================================= */
.st03 {display: flex; align-items: center; flex-wrap: wrap; padding: 10px 20px; margin-bottom: 20px; border: 1px solid #d5d5d5; border-radius: 10px;}
.st03 .st03-6 {flex: 0 0 50%; max-width: 50%;}
.st03 .st03-6:first-child {text-align: left;}
.st03 .st03-6:last-child {text-align: right;}
.st03 .btn {position: relative; width: 210px; height: 50px; border-radius: 10px; text-indent: 20px; text-align: left; line-height: 40px;}
.st03 .btn i {position: absolute; top:50%; right: 40px;}
@media screen and (max-width: 767px){
    .st03 {border: none; padding: 0;}
    .st03 .st03-6 {flex: 0 0 100%; max-width: 100%; margin-bottom: 10px;}
    .st03 .st03-6:last-child {text-align: left;}
    .st03 .btn {font-size: 1.4rem;}
}
/* =============================================================
    sub : ht
============================================================= */
.ht {display: flex; flex-wrap: wrap;}
.ht .card {position: relative; flex: 0 0 48.5%; max-width: 48.5%; height: 500px; padding: 0 15px; margin-bottom: 3%; border: 4px solid #f1f1f1; border-radius: 20px; background: url(/portal/img/sub/p03/history00.png) no-repeat bottom/cover; color: #444;}
.ht .card p {margin-bottom: 10px;}
.ht .card .title {margin: 40px 0 30px; text-align: center; color: #118ad9; font-weight: 600;}
.ht .card .img-title {position: absolute; bottom: 0; left: 50%; width: 100%; transform: translateX(-50%); text-align: center; color: #fff;}
.ht .card:after {position: absolute; width: 20px; height: 20px; background: url(/portal/img/sub/p03/ht-arrow.png) no-repeat center;}
.ht .arrow-right:after {content:""; top: 50%; right: -24px; transform: translateY(-50%);}
.ht .arrow-bottom:after {content:""; bottom:-24px; left: 50%; transform: translateX(-50%) rotate(90deg);}
.ht .arrow-left:after {content:""; top: 50%; left: -24px; transform: translateY(-50%) rotate(180deg);}

.ht .img01 {background-image: url(/portal/img/sub/p03/history01.png);}
.ht .img02 {background-image: url(/portal/img/sub/p03/history02.png);}
.ht .img03 {background-image: url(/portal/img/sub/p03/history03.png);}
.ht .img04 {background-image: url(/portal/img/sub/p03/history04.png);}
.ht .img05 {background-image: url(/portal/img/sub/p03/history05.png);}
.ht .img06 {background-image: url(/portal/img/sub/p03/history06.png);}
.ht .img07 {background-image: url(/portal/img/sub/p03/history07.png);}
.ht .img08 {background-image: url(/portal/img/sub/p03/history08.png);}
.ht .img09 {background-image: url(/portal/img/sub/p03/history09.png);}
.ht .img10 {background-image: url(/portal/img/sub/p03/history10.png);}
.ht .img11 {background-image: url(/portal/img/sub/p03/history11.png);}
.ht .img12 {background-image: url(/portal/img/sub/p03/history12.png);}
.ht .img13 {background-image: url(/portal/img/sub/p03/history13.png);}
.ht .img14 {background-image: url(/portal/img/sub/p03/history14.png);}
.ht .img15 {background-image: url(/portal/img/sub/p03/history15.png);}
.ht .img16 {background-image: url(/portal/img/sub/p03/history16.png);}
.ht .img17 {background-image: url(/portal/img/sub/p03/history17.png);}
.ht .img18 {background-image: url(/portal/img/sub/p03/history18.png);}

.ht.ht01 {flex-direction: row;}
.ht.ht01 .card:nth-child(2n-1) {margin-right: 3%;}
.ht.ht02 {flex-direction: row-reverse;}
.ht.ht02 .card:nth-child(2n) {margin-right: 3%;}

@media screen and (max-width:767px){
    .ht .card {flex: 0 0 100%; max-width: 100%; height: 420px;}
    .ht .card:after {content: none;}
    .ht.ht01 .card:nth-child(2n-1) {margin-right: 0;}
    .ht.ht02 .card:nth-child(2n) {margin-right: 0;}
}
/* =============================================================
    sub : img => square + round 
============================================================= */
.step:after {content: ""; display: block; clear: both;}
.step-list {position: relative; float: left; height: 85px; background: #f5f5f5; border-radius: 10px; text-align: center;}
.step-list:after {content: ""; position: absolute; top: 50%; right: -16px; width: 8px; height: 8px; background: url(/portal/img/sub/arrow-right.png) no-repeat center/contain; transform: translateY(-50%);}
.step-list:last-child:after {content: none;}
.step-list .mobile {display: none;}
.step-list.gray {background: #555; color: #fff;}
.step-text {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
.step-text span {display: block;}

.step.list5 .step-list {width: calc(20% - 23px); margin-right: 28px;}
.step.list5 .step-list:last-child {margin-right: 0;}

.st04 .step-list {height: 190px; margin-bottom: 20px; border-radius: 50%;}
.st04 .list3 {width: 626px; margin: 0 auto;}
.st04 .list3 .step-list {width: 190px; margin-right: 28px;}
.st04 .list3 .step-list:after {right: -21px; width: 10px; height: 10px;}
.st04 .list3 .step-list:last-child {margin-right: 0;}
.st04 .list5 .step-list {width: 190px;}
.st04 .step-list.skyblue {background: #118AD9; color: #fff;}
.st04 .step-list.skyblue .sub-p2 {color: #fff;}
.st04 .step-list.gray .sub-p2 {color: #fff;}
.st04 .step-list.line-skyblue {border: 2px solid #118AD9; background-color: transparent;}

@media screen and (max-width: 1023px){
    .st04 .step-list {position: static; float: none; height: auto; padding: 17px; margin-bottom: 10px; border-radius: 0; background-color: #f5f5f5; text-align: left;}
    .st04 .step-list:after {content: none;}
    .st04 .step-list.gray {background-color: #f1f1f1; color: #444;}
    .st04 .step-list .mobile {display: inline; padding-right: 10px; font-weight: 600; color: #118ad9;}
    .st04 .step-text {position: static; transform: translate(0);}
    .st04 .step-text span {display: inline;}
    .st04 .list3 {width: 100%;}
    .st04 .list3 .step-list {width: 100%;}
    .st04 .list5 .step-list {width: 100%;}
    .st04 .step-list.skyblue {background: #f1f1f1; color: #444;}
    .st04 .step-list.skyblue .sub-p2 {color: #444;}
    .st04 .step-list.gray .sub-p2 {color: #444;}
    .st04 .step-list.line-skyblue {border: none; background-color: #f1f1f1;}
}

@media screen and (max-width: 767px){
    .step-list {position: static; float: none; height: auto; padding: 17px; margin-bottom: 10px; border-radius: 0; background-color: #f5f5f5; text-align: left;}
    .step-list:after {content: none;}
    .step-list.gray {background-color: #f1f1f1; color: #444;}
    .step-list .mobile {display: inline; padding-right: 10px; font-weight: 600; color: #118ad9;}
    .step-text {position: static; transform: translate(0);}
    .step-text span {display: inline;}

    .step.list5 .step-list {width: 100%; margin-right: 0;}
}

/* =============================================================
    sub : img => square + round + icon-img
============================================================= */
.sp {display: flex; flex-direction: row; margin-bottom: 30px;}
.sp.reverse {flex-direction: row-reverse;}
.sp-list {position: relative; background: #f5f5f5; border-radius: 10px;}
.sp-list .sub-p2 {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2;}
.sp-text {padding: 30px; text-align: center;}
.sp-text span {display: block;}
.sp-text .mobile {display: none;}
.sp-text .title {padding: 20px 0 10px; font-weight: 600; color: #000;}

.sp-list.gray {background: #555;}
.sp-list.gray .sub-p2 {color: #fff;}
.sp-list.gray .title {color: #fff;}
.sp-list.darkblue .sub-p2 {color: #fff;}
.sp-list.darkblue .title {color: #fff;}

.sp-list:after {position: absolute; width: 10px; height: 10px; background: url(/portal/img/sub/arrow-right.png) no-repeat center/contain; }
.sp .arrow-right:after {content:""; top: 50%; right: -20px; transform: translateY(-50%);}
.sp .arrow-left:after {content:""; top: 50%; left: -20px; transform: translateY(-50%) rotate(180deg);}
.sp .arrow-bottom:after {content:""; bottom: -20px; left: 50%; transform: translateX(-50%) rotate(90deg);}

.sp.list3 .sp-list {flex: 0 0 31%; max-width: 31%; margin-right: 3.5%; padding: 20px 0; border-radius: 20px;}
.sp.list3 .arrow-right:after {right: -23px;}
.sp.list4 .sp-list {flex: 0 0 23%; max-width: 23%; margin-right: 2.666%;}
.sp.reverse.list4 .sp-list {margin-right: 0; margin-left: 2.666%;}
.sp.list5 .sp-list {flex: 0 0 19%; max-width: 19%; margin-right: 1.25%;}

.st05 .sp .sp-text {padding: 35px 0;}
.st05 .sp .title {padding: 0; margin-top: 20px; font-weight: 400; color: #111;}
.st05 .sp .sub-p2 {line-height: 1.3; color: #111;}
.st05 .gray .title {color: #fff;}
.st05 .gray .sub-p2 {color: #fff;}

.st-cont {margin-top: 80px; padding: 80px 0; background: #f5f5f5;}
.st06 {width: 86%; margin: 0 auto 40px;}
.st06 .sp .sp-list {background: #fff; border: 1px solid #ddd; border-radius: 20px;}
.st06 .sp.h01 .sp-list {height: 180px;}
.st06 .sp.h02 .sp-list {height: 125px;}
.st06 .sp.h03 .sp-list {height: 300px;}
.st06 .sp-text {padding: 30px 10px;}
.st06 .sub-p1 {width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 600; line-height: 1.3;}
.st06 .sp-list.darkblue {position: relative; background: #00397F; border: none;}
.st06 .sp-list.black {position: relative; background: #061E2D; border: none;}
.st06 .sp-list.black .title {color: #fff;}
.st06 .sp-list.skyblue {background: #118ad9;}
.st06 .sp-list.skyblue .sub-p2 {color: #fff;}
.st06 .sp-list.skyblue .title {color: #fff;}
.st06 .sp-list .sp-text {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
.st06 .sp-list .sp-text .moi {display: block;}
.st06 .sp-list .title {font-size: 2.4rem;}
.st06 .sp .arrow-right:after {right: -35px; width: 50px; height: 50px; border-radius: 50%; background: #fff url(/portal/img/sub/arrow-right.png) no-repeat center/10px; box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.1); z-index: 2;}

.st06 .tx01 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #25bcca;}
.st06 .tx02 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #339add;}
.st06 .tx03 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #255591;}
.st06 .tx04 {padding-top: 5px; font-weight: 600; font-size: 2.2rem; color: #f16941;}
.st06 .tx05 {padding-top: 5px; font-weight: 600; color: #25bcca;}
.st06 .tx06 {padding-top: 5px; font-weight: 600; color: #339add;}
.st06 .tx07 {padding-bottom: 5px; color: #255591;}
.st06 .tx08 {padding-top: 5px; font-weight: 600; color: #f16941;}

.st06 .sp .sp-list.circle {position: relative; flex: 0 0 170px; max-width: 170px; margin: 0 3.2%; border-radius: 50%;}
.st06 .sp .sp-list.circle:before, .st06 .sp .sp-list.circle:after {content: ""; position: absolute; top:50%; right: -26%; width: 15px; height: 2px; background: #999;}
.st06 .sp .sp-list.circle:after {transform: rotate(90deg);}
.st06 .sp .sp-list.circle:last-child:before, .st06 .sp .sp-list.circle:last-child:after {content: none;}
.st06 .sp .sp-list.circle .sp-text {position: absolute; top: 50%; left: 50%; width: 170px; height: 170px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); overflow: hidden;}
.st06 .sp .sp-list.circle .sp-text:before, .st06 .sp .sp-list.circle .sp-text:after {content: ""; position: absolute; left: 0; width: 100%; height: 50%;}
.st06 .sp .sp-list.circle .sp-text:before {top:0;}
.st06 .sp .sp-list.circle01 .sp-text:before {background-color: #25bcca;}
.st06 .sp .sp-list.circle02 .sp-text:before {background-color: #339add;}
.st06 .sp .sp-list.circle03 .sp-text:before {background-color: #255591;}
.st06 .sp .sp-list.circle04 .sp-text:before {background-color: #f16941;}
.st06 .sp .sp-list.circle .sp-text:after {bottom: 0; background: #e1e1e1;}
.st06 .sp .sp-list.circle .sp-text .sub-p1 {position: absolute; top: 50%; left: 50%;width: 145px; height: 145px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; font-weight: 600; line-height: 140px; z-index: 1;}
.st06 .sp .sp-list.circle01 .sp-text .sub-p1 {color: #25bcca;}
.st06 .sp .sp-list.circle02 .sp-text .sub-p1 {color: #339add;}
.st06 .sp .sp-list.circle03 .sp-text .sub-p1 {color: #255591;}
.st06 .sp .sp-list.circle04 .sp-text .sub-p1 {color: #f16941;}

.en-circle {position: relative; width: 300px; height: 300px; margin: 10px; border-radius: 50%; border: 4px solid #f1f1f1; text-align: center;}
.en-circle .title-box {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
.en-circle .title {margin-bottom: 20px; font-size: 2.4rem; font-weight: 700;}
.en-circle .title span {display: block;}
.en-circle .list {color: #666; font-size: 1.8rem; line-height: 1.6;}

@media screen and (max-width: 1399px){
    .st06 {width: 100%;}
    .st06 .sp.h01 {justify-content: space-between;}
    .st06 .sp .sp-list.circle:before, .st06 .sp .sp-list.circle:after {content: none;}
    .st06 .sp .sp-list.circle {margin: 0;}
    
}
@media screen and (max-width: 1023px){
    .sp {display: block; margin-bottom: 0;}
    .sp img {display: none;}
    .sp-list {margin-bottom: 10px; border-radius: 0;}
    .sp .sp-list:after {content: none;}
    .sp-text {padding: 15px; text-align: left;}
    .sp-text .pc {display: none;}
    .sp-text .mobile {display: inline; color: #2C97DD; font-weight: 600;}
    .sp-text .title {padding: 0 5px;}
    .sp-text span {display: inline;}
    .sp-text .paragraph {position: relative; display: block; padding-left: 10px;}
    .sp-text .paragraph:before {content: ""; position: absolute; top: 8px; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #666;}

    .sp-list.gray {background: #f5f5f5;}
    .sp-list.gray .sub-p2 {color: #444;}
    .sp-list.gray .title {color: #000;}
    .st05 .sp .sp-text {padding: 15px}
    .st05 .gray .title {color: #444;}
    .st05 .gray .sub-p2 {color: #444;}

    .sp.list3 .sp-list {flex: 0 0 100%; max-width: 100%; margin-right: 0; padding: 5px; border-radius: 0;}
    .sp.list4 .sp-list {flex: 0 0 100%; max-width: 100%; margin-right: 0;}
    .sp.reverse.list4 .sp-list {margin-right: 0; margin-left: 0;}
    .sp.list5 .sp-list {flex: 0 0 100%; max-width: 100%; margin-right: 0;}

    .st06 .sp .sp-list {background: #fff; border: 1px solid #ddd; border-radius: 0;}
    .st06 .sp.h01 .sp-list, .st06 .sp.h02 .sp-list, .st06 .sp.h03 .sp-list {height: auto;}
    .st06 .sp-list .title {font-size: 1.8rem;}
    .st06 .sp-list .sp-text {position: static; padding: 15px; transform: translate(0);}
    .st06 .sp-list .sp-text .moi {display: inline;}
    .st06 .sp-list .sub-p2 {padding-top: 0; padding-bottom: 0; font-weight: 400; font-size: 1.4rem; color: #666;}
    
    .st06 .sp-list.darkblue {background: #00397F;}
    .st06 .sp-list .title {font-size: 1.8rem;}
    .st06 .sp-list .sp-text {position: static; transform: translate(0);}
    
   	.st06 .sp-list.darkblue .title {color: #fff;}
    .st06 .sp-list.black {background: #061E2D;}
    .st06 .sp-list.black .title {color: #fff;}
    .st06 .sp-list.skyblue {background: #118ad9;}
    .st06 .sp-list.skyblue .sub-p2 {color: #fff;}
    .st06 .sp-list.skyblue .title {color: #fff;}
    .st06 .sp .sp-list.circle {flex: 0 0 100%; max-width: 100%; margin-bottom: 10px; border-radius: 0; border: 1px solid #ddd;}
    .st06 .sp .sp-list.circle .sp-text {position: static; width: auto; height: auto; border-radius: 0; transform: translate(0);}
    .st06 .sp .sp-list.circle .sp-text:before, .st06 .sp .sp-list.circle .sp-text:after {content: none;}
    .st06 .sp .sp-list.circle .sp-text .sub-p1 {position: static; width: auto; height: auto; transform: translate(0); line-height: 1;}
    .st06 .sp .sp-list.circle .sp-text .sub-p1 {color: #666; font-size: 1.4rem; font-weight: 400;}

    .en-circle  {width: 200px; height: 200px;}
    .en-circle .title {font-size: 1.6rem;}
    .en-circle .list {font-size: 1.2rem;}
    .st06 .sub-p1 {width: 88%; font-size: 1.4rem; font-weight: 400;}
    .st-cont {margin-top: 40px; padding: 40px 0;}
    
    
}

.search-form {margin-bottom: 10px; padding: 40px 100px; background: #f5f5f5; border-radius: 20px;}
.search-form-inner {display: flex; justify-content: center;}
.search-form-inner .search-text {width: 450px; margin-right: 0;}
.search-form .search-btn {width: 85px; margin-left: 5px;}
.search-form-inner .search-detail {width: 140px; margin-left: 5px;}
.search-form-inner .search-detail .btn .arrowup-w:after {transition: 0.4s;}
.search-form-inner .search-detail .btn.on .arrowup-w:after {transform: translate(-50%, -50%) rotate(0);}
.search-text .form-control {background: #fff;}
.search-keyword {display: flex; margin-top: 40px;}
.search-keyword .keyword-list {display: inline-block; line-height: 1.7;}
.search-form .search-th {width: 105px; color: #00397f; font-size: 1.7rem; font-weight: 600;}
.keyword-group {padding-left: 10px;}
.search-keyword .keyword-link {padding: 0 15px;}
.search-keyword .keyword-link:before {content: "#";}
.search-row {display: flex; align-items: center; padding: 10px 0;}
.search-row .search-list {display: inline-block; width: 100px;}
.search-row select.form-control {background: #fff; width: 150px;}

.search-form [type="radio"]:checked + label:after, .search-form [type="radio"]:not(:checked) + label:after {background: #118ad9;}
@media screen and (max-width: 1023px){
    .search-form {padding: 30px;}
    .search-form .search-th {width: 100px; font-size: 1.4rem;}
    .search-row .search-list {width: auto; padding-left: 10px;}
}
@media screen and (max-width: 767px){
    .search-form {padding: 20px;}
    .search-keyword {display: none;}
    .search-form-inner .search-detail {display: none;}
    .search-form.mid {display: none;}
    .search-form-inner .search-text {flex: 0 0 60%; max-width: 70%;}
    .search-form .search-btn {flex: 0 0 40%; max-width: 30%;}
}

/* 21-12-13 nanan */
.lnb-1depth a:hover, .lnb-1depth a:active, .lnb-1depth a:focus {text-decoration: none; color: #00397f;}
.lnb-1depth > li:nth-child(2) {width: 300px;}
.lnb-1depth > li:nth-child(3) {width: 380px;}
.lnb-2depth > li > a {background: #eaeaea; line-height: 55px;}
.lnb-2depth > li > a:hover, .lnb-2depth > li > a:active, .lnb-2depth > li > a:focus {text-decoration: none; background: #00397f; color: #fff;}

/* 21-12-16 nanan */
.history-list .td-dd:before {content: none;}
.history-list .th {flex: 0 0 15%; max-width:15%;}
.history-list .th span.white {color: #fff;}
.history-list .td-dd.etc {color: #0048a0;}
.history .sub-h5 {font-size: 2.2rem; font-weight: 600;}
.history-list .list .td-dd {position: relative; display: block; font-size: 1.8rem; padding-left: 10px; letter-spacing: -0.1rem;}
.history-list .list .td-dd span:first-child::before {content: ""; position: absolute; top: 1.3rem; left: 0; width: 3px; height: 3px; background: #ccc; border-radius: 50%; padding-right: 0;}
.history01 .history-list:nth-child(2n) .list .td-dd span:first-child::before,
.wrap02 .list .td-dd span:first-child::before {left: auto; margin-left: -10px;}
.history-list .td-dd span { display: inline-block; }
.history-list span.minus:first-child::before {left: auto; margin-left: 0px;}
.history-list .list .td-dd span.minus {margin-left: -10px; }
.wrap02 .list .td-dd span.minus:first-child::before {left: auto; margin-left: 0;}
@media screen and (max-width: 1023px){
    .history-list .th { flex: 0 0 20%; max-width: 20%;}
    .history-list .list .td-dd { font-size: 1.4rem; }
    .history-list .th span.white { color: #333; }
}

/* 20211224 sy */
.ebook {padding: 20px 0; border-top: 2px solid #000; border-bottom: 1px solid #000 ;}
.ebook .row {justify-content: flex-start;}
.ebook .row > [class*="col-"] {margin: 20px 0; padding: 40px 6px;}
.ebook .row > [class*="col-"]:nth-child(1) {border-top: none;}
.ebook .row > [class*="col-"]:nth-child(2) {border-top: none;}
.ebook .row > [class*="col-"]:nth-child(3) {border-top: none;}
.ebook .row > [class*="col-"]:nth-child(4) {border-top: none;}
.ebook .ebook-card {width: 340px; padding: 0 40px;}
.ebook .ebook-card .title {
	height:68px; margin-bottom: 20px; text-align: center;
 	overflow: hidden; text-overflow: ellipsis; word-break: break-word; 
 	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ebook .ebook-card .img {position: relative; width: 90%; height: 300px; margin: 0 auto; border-radius: 10px 0 10px 0; box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.03); overflow: hidden;}
.ebook .ebook-card .img:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0,0,0,0) 60%, rgba(0,0,0,0.2));}
.ebook .ebook-card .bookshelf {width: 100%; height: 16px; margin-bottom: 20px; background: linear-gradient(-180deg, #f5f5f5, #fff); box-shadow: 2px 2px 10px 5px rgba(0,0,0,0.1);}
.ebook .ebook-card .link .btn {padding: 10px 30px 10px 20px; border-radius: 13px; background: #061e2d; color: #fff;}
.ebook .ebook-card .link .btn .icon {margin-left: 20px;}

.ebook.ver01 .ebook-card .title {font-weight: 700;}
.ebook.ver01 .ebook-card .img {background: url(../../img/cyber/sub/elsafe.png) no-repeat center/cover; box-shadow: 0px 1px 5px 1px rgba(0,0,0,0.05);} 
.ebook.ver01 .ebook-card .img:after {content: none;}
.ebook.ver01 .ebook-card .link .btn {margin: 3px;}
.ebook .ebook-card .link .btn {padding: 10px 24px 10px 14px;}
.ebook .ebook-card .link .btn-gray {background: #71879b;}

@media screen and (max-width: 1399px){
    .ebook .row {justify-content: center;}
}
@media screen and (max-width: 1379px){
    .ebook .row > [class*="col-"] {margin: 0; border-top: none;}
}
@media screen and (max-width: 499px){
    .ebook.ver01 .ebook-card {padding-bottom: 30px; border-bottom: 1px solid #e5e5e5;}
    .ebook.ver01 .row > [class*="col-"] {padding-top: 0;}
    .ebook.ver01 .row > [class*="col-"]:last-child .ebook-card {border-bottom: none;}
}
@media screen and (max-width: 349px){
    .ebook .row > [class*="col-"] {padding: 15px 0;}
    .ebook .ebook-card {width: 100%;}
    .ebook .ebook-card .img {height: 255px;}
}

.sub-int09 {position: relative;padding-bottom: 100px;}
.sub-int09 .intro-bg {position: absolute; top: 175px; left: 0; width: 100%; height: 620px; background: #F5F5F5; z-index: -1;}
.sub-int09 .img-header {position: relative; margin-bottom: 70px; height: auto;}
.sub-int09 .img-header-title {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* z-index: 2; */}
.sub-int09 img {border-radius: 20px; box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.1);}  
/* .text-cont-detail {text-align: center;} */
@media screen and (max-width: 1399px){
    .sub-int09 .intro-bg {display: none;}
    .sub-int09 img {display: block; width: 100%;}
}
@media screen and (max-width: 767px){
    .sub-int09 {padding-bottom: 0;}
    .sub-int09 .img-header {margin-bottom: 30px;}
}
/* 20211225 sy */
.st06 .sp .sp-list.circle04 .sp-text:before {background-color: #f16941;}
.st06 .sp .sp-list.circle .sp-text:after {bottom: 0; background: #e1e1e1;}
.st06 .sp .sp-list.circle .sp-text .sub-p1 {position: absolute; top: 50%; left: 50%;width: 145px; height: 145px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; font-weight: 600; line-height: 140px; z-index: 1;}
.st06 .sp .sp-list.circle01 .sp-text .sub-p1 {color: #25bcca;}
.st06 .sp .sp-list.circle02 .sp-text .sub-p1 {color: #339add;}
.st06 .sp .sp-list.circle03 .sp-text .sub-p1 {color: #255591;}
.st06 .sp .sp-list.circle04 .sp-text .sub-p1 {color: #f16941;}

.en-circle {position: relative; width: 300px; height: 300px; margin: 10px; border-radius: 50%; border: 4px solid #f1f1f1; text-align: center;}
.en-circle .title-box {position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%);}
.en-circle .title {margin-bottom: 20px; font-size: 2.4rem; font-weight: 700;}
.en-circle .title span {display: block;}
.en-circle .list {color: #666; font-size: 1.8rem; line-height: 1.6;}

@media screen and (max-width: 1399px){
    .st06 {width: 100%;}
    .st06 .sp.h01 {justify-content: space-between;}
    .st06 .sp .sp-list.circle:before, .st06 .sp .sp-list.circle:after {content: none;}
    .st06 .sp .sp-list.circle {margin: 0;}
}
@media screen and (max-width: 1023px){
    .sp-text .mobile {display: inline; color: #2C97DD; font-weight: 600; vertical-align: top;}
    .st06 .sub-p1 {display: inline-block; width: 90%; padding-left: 10px;} .st06 .sp-list .title {font-size: 1.8rem;}
    .st06 .sp-list .sp-text {position: static; padding: 15px; transform: translate(0);}
    .st06 .sp-list .sp-text .moi {display: inline;}
    .st06 .sp-list .sub-p2 {padding-top: 0; padding-bottom: 0; font-weight: 400; font-size: 1.4rem; color: #666;}
    .st06 .sp-list.darkblue {background: #00397F;}
    .st06 .sp-list.darkblue .title {color: #fff;}
    .st06 .sp-list.black {background: #061E2D;}
    .st06 .sp-list.black .title {color: #fff;}
    .st06 .sp-list.skyblue {background: #118ad9;}
    .st06 .sp-list.skyblue .sub-p2 {color: #fff;}
    .st06 .sp-list.skyblue .title {color: #fff;}
    .st06 .sp .sp-list.circle {flex: 0 0 100%; max-width: 100%; margin-bottom: 10px; border-radius: 0; border: 1px solid #ddd;}
    .st06 .sp .sp-list.circle .sp-text {position: static; width: auto; height: auto; border-radius: 0; transform: translate(0);}
    .st06 .sp .sp-list.circle .sp-text:before, .st06 .sp .sp-list.circle .sp-text:after {content: none;}
    .st06 .sp .sp-list.circle .sp-text .sub-p1 {position: static; width: auto; height: auto; transform: translate(0); line-height: 1;}
    .st06 .sp .sp-list.circle .sp-text .sub-p1 {color: #666; font-size: 1.4rem; font-weight: 400;}
    .en-circle  {width: 200px; height: 200px;}
    .en-circle .title {font-size: 1.6rem;}
    .en-circle .list {font-size: 1.4rem;}
    .st06 .sub-p1 {width: 88%; font-size: 1.4rem; font-weight: 400;}
    .st-cont {margin-top: 40px; padding: 40px 0;}
}
@media screen and (max-width:767px){
    .st06-arrow {width: 180px;}
}

/* 220104 nanan */
.btn-group .btn:hover, .btn-group .btn:active, .btn-group .btn:focus { box-shadow: 3px 3px 10px 3px rgba(0,0,0,0.2); }

/* 220105 +add */
.sub-intro02.ver01 .sub-h1 {text-align: center; font-size: 3.7rem;}
.sub-intro02.ver01 .intro-img {position: relative; border-radius: 40px;}
.sub-intro02.ver01 .intro-img .tx {position: absolute; top: 50%; left: 45%; width: 100%; transform: translate(-50%, -50%);}
.sub-intro02.ver01 .intro-img .tx-db {display: block; font-size: 3.2rem; font-family: 'Godo', sans-serif; line-height: 1.7; text-align: center; color: #fff;}
.sub-intro02.ver01 .intro-bg {height: 590px;}
@media screen and (max-width:1399px){
    .sub-intro02.ver01 .sub-h1 {font-size: 3.2rem;}
    .sub-intro02.ver01 .intro-img img {position: absolute; right: 0;}
    .sub-intro02.ver01 .intro-img .tx-db {font-size: 2.8rem;}
}
@media screen and (max-width:1023px){
    .sub-intro02.ver01 .sub-h1 {font-size: 2.4rem;}
    .sub-intro02.ver01 .intro-img {height: 210px;}
    .sub-intro02.ver01 .intro-img img {position: absolute; top: auto; bottom: auto; left: auto; right: 0; transform: translate(0);}
    .sub-intro02.ver01 .intro-img .tx-db {font-size: 2.2rem;}
}
@media screen and (max-width:767px){
    .sub-intro02.ver01 .sub-h1 {font-size: 2.3rem;}
    .sub-intro02.ver01 .intro-img {height: 180px; border-radius: 30px;}
    .sub-intro02.ver01 .intro-img .tx {width: 60%;}
    .sub-intro02.ver01 .intro-img .tx-db {font-size: 1.8rem;}
}
@media screen and (max-width:501px){
    .sub-intro02.ver01 .sub-h1 {font-size: 2.0rem;}
    .sub-intro02.ver01 .intro-img {height: 100px;}
    .sub-intro02.ver01 .intro-img .tx {width: 50%;}
    .sub-intro02.ver01 .intro-img .tx-db {font-size: 1.4rem;}
}
/* 220108 +sy */
.map-cont {display: flex; margin-bottom: 50px;}
.map-cont .text {margin-left: 30px;}
@media screen and (max-width: 499px){
    .map-cont .icon {display: none;}
    .map-cont .text {margin-left: 0;}
}

.view-cont img {max-width: 100%; height: auto;}