@charset "utf-8";

/* *******************************************************
 * filename : common.css
 * description : 스타일 CSS
 * date : 2023-09
******************************************************** */

/* #wrap {overflow: hidden;} */
.main #header {position: fixed;}
#wrap {background:#fff;}
#header {position: sticky; top: 0; left: 0; right: 0; height: 120px; background: #fff; z-index: 100; overflow: hidden; transition: all .3s ease-in-out;}
#header h1 {position: absolute; top: 43px; z-index: 6; left: 50px;}
#header h1 a {display: block;}
#header h1 a img {display: block;}
#header .menu-wrap {width: 100%; max-width: 100%; padding: 0px 20px; display: flex; align-items: flex-start; justify-content: space-between; margin: 0 auto; position: relative;}
#header .search-wrap {position: fixed; top: 100px; left: 0; right: 0; height: 440px; background: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 101;}
#header .search-wrap.active {opacity: 1; visibility: visible;}
#header .search-wrap .form-group {width: 760px; margin: 0 auto; border: 3px solid #002674; padding-right: 70px; position: relative; max-width: 90%;}
#header .search-wrap .form-group input {width: 100%; padding: 20px; font-size: 20px; border: 0;}
#header .search-wrap .form-group button {cursor: pointer; width: 70px; top: 0; bottom: 0; position: absolute; right: 0; border: 0; font-size: 0; text-indent: -99999%; background: url( '../images/ico-search-black.png') no-repeat center; background-size: 30px;}
#header .search-wrap .close {width: 40px; height: 40px; display: block; position: relative; font-size: 0; text-indent: -99999%; position: absolute; right: 30px; top: 30px;}
#header .search-wrap .close::before,
#header .search-wrap .close::after {content: ''; display: block; width: 2px; height: 30px; background: #333; position: absolute; left: 50%; top: 5px;}
#header .search-wrap .close::before {transform: rotate(45deg);}
#header .search-wrap .close::after {transform: rotate(-45deg);}
#header .nav {width: 1100px; margin: 50px auto 0;}
#header .nav > ul {display: flex; height: 100%; width: 1920px; max-width: 100%; margin: 0 auto; position: relative; z-index: 5; justify-content: space-between;}
#header .nav > ul > li {flex: 1; height: 100%; padding: 0 0px;}
#header .nav > ul > li > a {display: flex; height: 70px; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; text-transform: uppercase; transition: all 0.2s; position: relative; color: #002674; text-align: center; z-index: 1;}
#header .nav > ul > li > a:hover,
#header .nav > ul > li > a.active {color: #ee7609;}
/* #header .nav > ul > li:nth-child(1) a {left: calc(50% - 370px);}
#header .nav > ul > li:nth-child(2) a {left: calc(50% - 196px);}
#header .nav > ul > li:nth-child(3) a {left: calc(50% - 9px);}
#header .nav > ul > li:nth-child(4) a {right: calc(50% - 209px);}
#header .nav > ul > li:nth-child(5) a {right: calc(50% - 370px);} */
#header .nav .depth2-wrap {padding-top: 20px; position: relative; min-height: 257px;}
#header .nav .depth2-wrap::after {content: ''; display: block; position: absolute; top: 20px; bottom: 20px; border-right: 1px solid #d9d9d9; min-height: 256px;}
#header .nav > ul > li:first-child .depth2-wrap::after {display: none;}
#header .nav .depth2-wrap .h3 {text-align: center; font-weight: 600; display: none;}
#header .nav .depth2-wrap.active .h3 {color: #ee7609;}
#header .nav .depth2-wrap.fix .h3 {color: #ee7609;}
#header .nav .depth-2 {padding: 0px 0 20px; opacity: 0; visibility: hidden; transition: all 0.2s;}
#header .nav .depth-2 a {display: block; transition: all 0.2s; font-size: 16px; color: #6b6b6b; padding: 6px 0; text-align: center; white-space: nowrap; font-weight: 600;}
#header .nav .depth-2 a:hover,
#header .nav .depth-2 a.active {color: #ee7609;}
#header .menu-wrap .items {display: flex; align-items: center; position: absolute; right: 50px; top: 70px; z-index: 6;}
#header .menu-wrap .items a {display: block;}
#header .menu-wrap .items .search-btn {display: block; width: 25px; height: 25px; background: url('../images/ico-search-black.png') no-repeat center; background-size: 21px; font-size: 0; text-indent: -99999%;}
#header .menu-wrap .items .lang {height: 25px; margin-right: 10px; background: url('../images/ico-lang.png') no-repeat left center; background-size: 21px; padding-left: 25px;}
#header .inner-menu {position: absolute; top: 90px; left: 0; right: 0; background: rgba(255, 255, 255, 0.9); display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; visibility: hidden; transition: all 0.2s;}
#header .inner-menu .list {padding: 38px 24px; position: relative; opacity: 1;}
#header .inner-menu .list::before {content: ''; display: block; position: absolute; top: 48px; bottom: 48px; left: 0; width: 1px; border-left: 1px solid #333;}
#header .inner-menu .list li a {display: block; padding: 10px 0; font-size: 16px; transition: all 0.2s;}
#header .inner-menu .list li a:hover {color: #ee7609;}
#header.active {height: auto; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); position: fixed;}
#header.active::before {content: ''; display: block; position: absolute; left: 0; right: 0; top: 120px; border-top: 1px solid #e9e9e9;}
#header.active .nav .depth-2,
#header.active .inner-menu {opacity: 1; visibility: visible;}
#header .m-nav {opacity: 0; visibility: hidden;}
#header .m-nav .open {font-size: 0; text-indent: -99999%; width: 45px; height: 24px; border-top: 2px solid #333; border-bottom: 2px solid #333; position: relative; display: block; position: absolute; right: 30px; top: 10px; top: 50%; transform: translateY(-50%);}
#header .m-nav .open::before {content: ''; display: block; height: 2px; background:#333; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);}
#header .m-nav .m-nav-wrap {right: 0; width: 100%; top: 0; bottom: 0; position: fixed; background: #fff; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 10;}
#header .m-nav.active .m-nav-wrap {opacity: 1; visibility: visible;}
#header .m-nav-wrap .top-area {display: flex; align-items: center; justify-content: space-between; position: absolute; top: 19px; left: 30px; right: 30px;}
#header .m-nav-wrap .top-area .col {display: flex; align-items: center;}
#header .m-nav-wrap .top-area .col a + a {margin-left: 15px;}
#header .m-nav-wrap .top-area .search-btn {display: block; width: 25px; height: 25px; background: url('../images/ico-search-black.png') no-repeat center; background-size: 21px; font-size: 0; text-indent: -99999%;}
#header .m-nav-wrap .top-area .lang {font-size: 15px; font-weight:500;}
#header .m-nav-wrap .top-area .close {width: 40px; height: 40px; display: block; position: relative; font-size: 0; text-indent: -99999%;}
#header .m-nav-wrap .top-area .close::before,
#header .m-nav-wrap .top-area .close::after {content: ''; display: block; width: 2px; height: 30px; background: #333; position: absolute; left: 50%; top: 5px;}
#header .m-nav-wrap .top-area .close::before {transform: rotate(45deg);}
#header .m-nav-wrap .top-area .close::after {transform: rotate(-45deg);}
#header .m-nav-wrap .menu-list {position: absolute; top: 90px; left: 0; right: 0; bottom: 0; overflow: auto; padding: 30px; border-top: 1px solid #ddd;}
#header .m-nav-wrap .menu-list > li > a {font-size: 22px; font-weight: 500; padding: 20px 15px; border-bottom: 1px solid #ddd; display: block; position: relative;}
#header .m-nav-wrap .menu-list > li > a.active {color: #ee7609;}
#header .m-nav-wrap .menu-list > li > a::after {content: ''; display: block; width: 8px; height: 8px; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg); position: absolute; right: 15px; top: 27px; transition: all 0.2s;}
#header .m-nav-wrap .menu-list > li > a.active::after {border-right: 2px solid #ee7609; border-bottom: 2px solid #ee7609; transform: rotate(-135deg);}
#header .m-nav-wrap .menu-list .depth-2 {padding: 20px; display: none;}
#header .m-nav-wrap .menu-list .depth-2 li a {font-size: 18px; padding: 10px 0; color: #6b6b6b; display: block; padding-left: 15px; position: relative;}
#header .m-nav-wrap .menu-list .depth-2 li a::before {content: '-'; display: block; position: absolute; left: 0; top: 8px;}
#header.hidden {top: -120px;}
@media(max-width: 1500px) {
    #header .inner-menu .list {opacity: 0;}
}

@media(max-width: 1320px) {
    #header h1 {top: 33px;}
    #header .nav,
    #header .menu-wrap .items .lang {display: none;}
    #header .m-nav {opacity: 1; visibility: visible;}
    #header .menu-wrap .items {top: 36px; right: 78px;}
    #header .menu-wrap .items .search-btn {width: 50px; height: 50px;background-size: 30px;}
}
@media(max-width: 1024px) {
    #header {height: 63px;}
    #header .menu-wrap {padding: 0 20px;}
    #header .search-wrap.active {top: 60px; height: 256px;}
    #header .search-wrap .form-group {width: 90%;}
    #header .search-wrap .close {top: 13px; right: 20px;}
    #header h1 {top: 11px; left: 20px;}
    #header h1 a img {width: 90px;}
    #header .menu-wrap .items {top: 9px; right: 59px;}
    #header .menu-wrap .items .search-btn { background-size: 26px;}
    #header .m-nav .open {width: 36px; height: 21px; right: 20px;}
    #header .m-nav-wrap .top-area {top: 10px; left: 20px; right: 10px;}
    #header .m-nav-wrap .top-area img {width: 90px;}
    #header .m-nav-wrap .top-area .col a + a {margin-left: 10px;}
    #header .m-nav-wrap .menu-list {top: 63px;}
}

/* 메인 */
.main .section {position: relative; width: 100%; min-height: 100vh; overflow: hidden; padding: 0 30px;}
.main .section-1 .video-area {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;}
.main .section-1 .video-area video {display: block; margin: 0 auto;}
.main .section-1 .txt-area {margin-top: 300px;}
.main .section-1 .txt-area p {text-align: center; color: #fff; line-height: 1.1;}
.main .section-1 .txt-area .txt-1 {font-size: 67px; font-weight: 600; text-transform: uppercase;}
.main .section-1 .txt-area .txt-2 {font-size: 30px; font-weight: 600; margin-top: 30px;}
.main .section-1 .btn-area {width: 1200px; max-width: 100%; margin: 190px auto 0; overflow: hidden; position: relative;}
.main .section-1 .btn-area .bg {display: block; position: absolute; left: 0; top: 0; bottom: 0; height: 62px; border-radius: 50px; background: #fff; width: 399.33px; transition: all 0.7s;}
.main .section-1 .btn-area ul {width: 100%; border: 1px solid #fff; display: flex; height: 62px; border-radius: 50px;}
.main .section-1 .btn-area li {flex: 1;}
.main .section-1 .btn-area .btn {display: flex; color: #fff; width: 100%; text-align: center; font-size: 18px; font-weight: 600; padding-left: 50px; background-repeat: no-repeat; background-position: left 85px center; height: 100%; align-items: center; justify-content: center; position: relative; z-index: 1; transition: all 0.7s;}
.main .section-1 .btn-area .btn.active,
.main .section-1 .btn-area .btn:hover {color: #002674;}
.main .section-1 .btn-area .btn-1 {background-image: url(../images/main-ico01.png);}
.main .section-1 .btn-area .btn-2 {background-image: url(../images/main-ico02.png);}
.main .section-1 .btn-area .btn-3 {background-image: url(../images/main-ico03.png);}
.main .section-1 .btn-area .btn-4 {background-image: url(../images/main-ico04.png);}
.main .section-1 .btn-area .btn-1.active,
.main .section-1 .btn-area .btn-1:hover {background-image: url(../images/main-ico01-over.png);}
.main .section-1 .btn-area .btn-2.active,
.main .section-1 .btn-area .btn-2:hover {background-image: url(../images/main-ico02-over.png);}
.main .section-1 .btn-area .btn-3.active,
.main .section-1 .btn-area .btn-3:hover {background-image: url(../images/main-ico03-over.png);}
.main .section-1 .btn-area .btn-4.active,
.main .section-1 .btn-area .btn-4:hover {background-image: url(../images/main-ico04-over.png);}
.main .section-1 .scroll-txt {position: absolute; transform: rotate(-90deg); right: 40px; bottom: 140px; text-transform: uppercase; color: #fff; font-size: 12px;}
.main .section-1 .scroll-txt::before {content: ''; display: block; width: 50px; height: 50px; border-radius: 50%; background: #fff url('../images/ico-arrow-down.png') no-repeat center; position: absolute; left: -62px; top: -14px; transform: rotate(90deg);}
.main .section-1.active-section .txt-area .txt-1 {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;}
.main .section-1.active-section .txt-area .txt-2 {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 1s both;}
.main .section-1.active-section .btn-area {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;}
.main .section-2 {background: #e0eaf4;}
.main .section-2 .ctn {margin-top: 120px;}
.main .section-2 .ctn .txt-area {text-align: center;}
.main .section-2 .ctn .txt-area .h2 {text-transform: uppercase; font-size: 50px; color: #002674; font-weight: 500;}
.main .section-2 .ctn .txt-area .txt {color: #535353; font-size: 22px; font-weight: 500; text-align: center;}
.main .section-2 .ctn .list-area {display: flex; align-items: center; justify-content: space-between; margin: 90px auto 0; width: 1200px; max-width: 100%;}
.main .section-2 .ctn .list-area .list {width: calc(33.3333% - 49px);}
.main .section-2 .ctn .list-area .list a {display: block; height: 420px; position: relative; overflow: hidden; transition: all 0.2s; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 30px;}
.main .section-2 .ctn .list-area .list-1 a {background-image: url('../images/main-thum01.jpg');}
.main .section-2 .ctn .list-area .list-2 a {background-image: url('../images/main-thum02.jpg');}
.main .section-2 .ctn .list-area .list-3 a {background-image: url('../images/main-thum03.jpg');}
.main .section-2 .ctn .list-area .list a::after {content: ''; display: block; width: 40px; height: 40px; background: #002674 url('../images/ico-arrow-white.png') no-repeat center; border-radius: 50%; position: absolute; right: 10px; bottom: 10px; transition: all 0.2s;}
.main .section-2 .ctn .list-area .list .cover {height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; transition: all 0.2s;}
.main .section-2 .ctn .list-area .list .cover p {text-align: center; padding: 10px; color: #fff; font-size: 28px; font-weight: 500; line-height: 1.2;}
.main .section-2 .ctn .list-area .list .inner {position: absolute; transition: all 0.2s; height: 190px; background: rgba(0, 0, 0, 0.5); padding: 30px; left: 0; right: 0; bottom: -190px;}
.main .section-2 .ctn .list-area .list .inner p {color: #fff; font-size: 17px; text-align: left; line-height: 1.5;}
.main .section-2 .ctn .list-area .list a:hover .cover {height: calc(100% - 190px);}
.main .section-2 .ctn .list-area .list a:hover .inner {bottom: 0;}
.main .section-2 .ctn .list-area .list a:hover::after {background: #fff url('../images/ico-arrow-down.png') no-repeat center; transform: rotate(-90deg); background-size: 12px;}
.main .section-2.active-section .ctn .txt-area .h2 {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;}
.main .section-2.active-section .ctn .txt-area .txt {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 1s both;}
.main .section-2.active-section .ctn .list-area {animation: fadeUp 2s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;}
.main .section-2 .banner-area {background: #fff; position: absolute; left: 0; right: 0; bottom: 0; height: 170px;}
.main .section-2 .banner-area ul {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; height: 170px;}
.main .section-2 .banner-area .banner a {display: block; margin: 0 44px;}
.main .section-2 .banner-area .banner-1 img {width: 56px;}
.main .section-2 .banner-area .banner-2 img {width: 126px;}
.main .section-2 .banner-area .banner-3 img {width: 102px;}
.main .section-2 .banner-area .banner-4 img {width: 180px;}
.main .section-2 .banner-area .banner-5 img {width: 75px;}
.main .top {position: absolute; bottom: 144px; right: 25px; display: none; font-size: 0; text-indent: -99999%; width: 50px; height: 50px; border: 1px solid #002674; border-radius: 50%; background: #fff url('../images/ico-arrow-down.png') no-repeat center; transform: rotate(180deg);}
@media(max-width: 1024px) {
    /* .main .top {display: block;} */
    .main .section-2 .ctn .list-area .list {width: calc(33.3333% - 20px);}
}
@media(max-width: 768px) {
    .main .section-1 .txt-area {margin-top: 37px;}
    .main .section-1 .txt-area .txt-1 {font-size: 30px;}
    .main .section-1 .txt-area .txt-2 {font-size: 18px; margin-top: 15px;}
    .main .section-1 .btn-area {margin-top: 100px;}
    .main .section-1 .btn-area ul {display: block; height: auto; border: 0;}
    .main .section-1 .btn-area ul li + li {margin-top: 5px;}
    .main .section-1 .btn-area .btn {height: 50px; border: 1px solid #fff; border-radius: 50px; font-size: 15px; background-size: 17px;}
    .main .section-1 .btn-area .btn.active,
    .main .section-1 .btn-area .btn:hover {color: #fff;}
    .main .section-1 .btn-area .btn-1.active,
    .main .section-1 .btn-area .btn-1:hover {background-image: url(../images/main-ico01.png);}
    .main .section-1 .btn-area .btn-2.active,
    .main .section-1 .btn-area .btn-2:hover {background-image: url(../images/main-ico02.png);}
    .main .section-1 .btn-area .btn-3.active,
    .main .section-1 .btn-area .btn-3:hover {background-image: url(../images/main-ico03.png);}
    .main .section-1 .btn-area .btn-4.active,
    .main .section-1 .btn-area .btn-4:hover {background-image: url(../images/main-ico04.png);}
    .main .section-1 .btn-area .bg {display: none;}
    .main .section-1 .scroll-txt {transform: rotate(0); left: 50%; transform: translateX(-50%); bottom: 30px; right: auto; margin-left: 30px;}
    .main .section-1 .scroll-txt::before {transform: rotate(0); width: 30px; height: 30px; background-size: 9px; left: -42px; top: -4px;}
    .main .section-2 {padding: 50px 30px 50px;}
    .main .section-2 .ctn {margin-top: 0;}
    .main .section-2 .ctn .txt-area .h2 {font-size: 30px; line-height: 1.1;}
    .main .section-2 .ctn .txt-area .txt {font-size: 18px; line-height: 1.1; margin-top: 15px;}
    .main .section-2 .ctn .list-area {display: block; margin: 40px auto 0;}
    .main .section-2 .ctn .list-area .list {width: 100%; margin-bottom:10px;}
    .main .section-2 .ctn .list-area .list a {height: 280px;}
    .main .section-2 .ctn .list-area .list .cover p {font-size: 22px;}
    .main .section-2 .ctn .list-area .list .inner p {font-size: 14px;}
    .main .section-2 .banner-area {position: static; margin-top: 50px; height: auto; width: calc(100% + 60px); margin-left: -30px; padding: 30px;}
    .main .section-2 .banner-area ul {height: auto;}
    .main .section-2 .banner-area .banner a {margin: 10px 15px;}
    .main .section-2 .banner-area .banner-1 img {width: 36px;}
    .main .section-2 .banner-area .banner-2 img {width: 106px;}
    .main .section-2 .banner-area .banner-3 img {width: 82px;}
    .main .section-2 .banner-area .banner-4 img {width: 160px;}
    .main .section-2 .banner-area .banner-5 img {width: 55px;}
    .main .top {bottom: 242px;}
}

/* 푸터 */
#footer {height: auto !important; min-height: auto !important; background: #231815; padding: 25px 170px; overflow: visible;}
#footer .inner {display: flex; justify-content: space-between; align-items: flex-end;}
#footer .info ul {margin-top: 20px;}
#footer .info ul li {color: #fff; font-size: 14px; display: flex;}
#footer .info ul li p + p {margin-left: 10px; padding-left: 10px; position: relative;}
#footer .info ul li p + p::before {content: ''; display: block; width: 1px; height: 15px; background: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#footer .link-area {display: flex;}
#footer .link-area a.link {display: flex; width: 232px; height: 48px; border: 1px solid #fff; padding: 10px 20px; align-items: center; position: relative; color: #fff; font-size: 17px; margin-left: 5px; background-image: none; background-color: #231815; margin-right: 0;}
#footer .link-area a.link::after {content: ''; display: block; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); position: absolute; right: 15px; top: 18px;}
#footer .link-area a.link::before {content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 0; transition: all 0.2s; background: #ee7609; border-radius: 50px;}
#footer .link-area a.link:hover::before {width: 100%;}
#footer .link-area a span {position: relative;}
#footer .familysite {position: relative;}
#footer .familysite a.link::after {transform: rotate(-45deg); top: 21px;}
#footer .familysite ul {padding: 10px; background: #505050; border: 1px solid #fff; position: absolute; left: 5px; right: 0px; display: none; bottom: 53px;}
#footer .familysite ul.active {display: block;}
#footer .familysite ul li a {padding: 10px 3px; background: none; color: #fff; transition: all 0.2s; border: 1px solid #fff;}
#footer .familysite ul li a:hover,
#footer .familysite ul li a:focus {color: #fff;}

@media(max-width: 1024px) {
    #footer {padding: 30px 50px;}
    #footer .inner {display: block;}
    #footer .link-area {margin-top: 20px;}
}
@media(max-width: 768px) {
    .main .main-section {height: auto !important; min-height: 92vh; padding: 30px;}
    .main .main-section .h2 {font-size: 30px;}
    .main .main-section p {font-size: 18px;}
    #footer {padding: 30px;}
    #footer p {font-size: 13px;}
    #footer .info ul li {display: block;}
    #footer .info ul li p + p {margin-left: 0; padding-left: 0;}
    #footer .info ul li p + p::before {content: none;}
    #footer .link-area {display: block;}
    #footer .link-area a.link {width: 100%; margin-top: 5px; font-size: 15px; height: 44px; margin-left: 0;}
}

/* 서브비쥬얼 */
.sub-visual-wrap {display: flex; justify-content: flex-end;}
.sub-visual {width: calc(100% - 55px); height: 280px; display: flex; align-items: center; justify-content: flex-end; text-align: center; position: relative; overflow: hidden; border-top-left-radius: 235px; border-bottom-left-radius: 235px; padding-right: calc(50% - 608px);}
.sub-visual .h3 {font-size: 40px; font-weight: 600; color: #fff;}
.sub-visual .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover; transform: scale(1.2,1.2); transition: all 2s; overflow: hidden;}
.sub-visual.active .bg {transform: scale(1,1)}
.sub-approach .sub-visual .bg {background-image: url('../images/bg-approach.jpg');}
.sub-governance .sub-visual .bg {background-image: url('../images/bg-governance.jpg');}
.sub-environmental .sub-visual .bg {background-image: url('../images/bg-environmental.jpg');}
.sub-social .sub-visual .bg {background-image: url('../images/bg-social.jpg');}
.sub-data .sub-visual .bg {background-image: url('../images/bg-data.jpg');}
.sub-data-hub .sub-visual .bg {background-image: url('../images/bg-data.jpg');}
.sub-search .sub-visual .bg {background-image: url('../images/bg-search.jpg');}
.sub-report .sub-visual .bg {background-image: url('../images/bg-report.jpg');}
@media(max-width: 1024px) {
    .sub-visual {height: 300px; width: 100%; padding-right: 30px; border-top-left-radius: 5px; border-bottom-left-radius: 50px;}
    .sub-visual .h3 {font-size: 50px;}
}
@media(max-width: 768px){
    .sub-visual {height: 135px; border-bottom-left-radius: 35px;}
    .sub-visual .h3 {font-size: 26px;}
    .sub-visual-wrap {padding-left: 20px;}
}

/* 서브네비게이션 */
#sub-navigation {width: 23%; padding-right: 40px;}
#sub-navigation .inner {position: -webkit-sticky; position: sticky; top: 150px;}
#sub-navigation .h4 {font-size: 23px; margin-bottom: 30px; font-weight: 600; color: #002674;}
#sub-navigation .mobile-hand {display: none;}
#sub-navigation .menu-list a {display: block; position: relative;}
#sub-navigation .menu-list > li > a {padding: 5px 0;}
#sub-navigation .menu-list > li > a.active {color: #fff !important;}
#sub-navigation .menu-list > li > a.active::before {content: ''; display: block; position: absolute; left: -15px; top: 0; bottom: 0; right: 0; border-radius: 50px; background: #002674; z-index: -1;}
#sub-navigation .menu-list > li + li {margin-top: 25px;}
#sub-navigation .menu-list > li > a {font-size: 18px; color: #565656; font-weight: 600;}
#sub-navigation .menu-list .depth-2 a {color: #7a7a7a; margin-top: 5px;}
#sub-navigation .menu-list .depth-2 a.active {color: #002674; font-weight: 600; text-decoration: underline;}
#tab-nav {position: sticky; top: 0; z-index: 3; background: #fff;}
#tab-nav::before {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid #dee2e6;}
#tab-nav > ul {display: flex; align-items: center; width: 1330px; max-width: 100%; margin: 0 auto; flex-wrap: wrap;}
#tab-nav > ul li a {display: block; font-size: 19px; font-weight: 600; color: #ccc; padding: 15px;}
#tab-nav > ul li a.active {color: #ee7609;}
@media(max-width: 1024px) {
    #tab-nav::before {left: 0; right: 0;}
}
@media(max-width: 768px) {
    #sub-navigation {position: fixed; top: 63px; left: 0; right: 0; width: auto; padding-right: 0; background: #fff; border-top: 1px solid #ddd; height: 50px; overflow: hidden; z-index: 9; border-bottom: 1px solid #ddd;}
    #sub-navigation .h4 {display: none;}
    #sub-navigation .mobile-hand {border: 0; cursor: pointer; background: none; width: 100%; height: 50px; display: flex; align-items: center; padding: 0 50px 0 20px; font-size: 15px; position: relative;}
    #sub-navigation .mobile-hand::after {content: ''; width: 8px; height: 8px; border-top: 2px solid #000; border-right: 2px solid #000; position: absolute; right: 20px; transform: rotate(135deg); top: 17px; transition: all 0.2s;}
    #sub-navigation .menu-list {padding-left: 0;}
    #sub-navigation .menu-list::before {content: none;}
    #sub-navigation.active {height: auto;}
    #sub-navigation.active .mobile-hand::after {transform: rotate(-45deg); top: 21px;}
    #sub-navigation.active .menu-list {padding: 0 20px 20px;}
    #sub-navigation.active .menu-list > li > a.active::after {content: none;}
    #tab-nav > ul li a {font-size: 14px;}
    .sub-data #sub-navigation {position: sticky; margin-top: -51px; margin-bottom:50px; top: 50px; width: calc(100% + 40px); margin-left: -20px;}
}

/* 서브컨텐츠 */
#container {position: relative;}
#container.active {padding-top: 120px;}
#container.sub-data {padding-top: 0;}
#container.sub-data.active {padding-top: 120px;}
.header-wrap.sub-data .policy-guideline.active + .sub-visual-wrap {margin-top: 120px;}
#container .h2 {font-weight: 200; position: absolute; left: calc(50% - 640px); top: 200px;font-size: 40px; color: #002674; display: none;}
.content-wrap {padding: 150px 0; width: 1300px; margin: 0 auto; max-width: 100%; display: flex; min-height: 50vh;}
#content {width: calc(100% - 23%);}
#content.wd-100 {width: 100%;}
@media(max-width: 1024px) {
    #container {padding-right: 20px; padding-left: 20px;}
    #container .h2 {top: 60px; left: 160px; font-size: 30px; left: 20px;}
    .content-wrap {padding: 50px 20px;}
}
@media(max-width: 768px){
    #container {padding-right: 0px; padding-left: 0px; padding-top: 50px;}
    #container.sub-data {padding-top: 0px;}
    #container.ceo {padding-top: 0;}
    #container .h2 {top: 120px;}
    .content-wrap {padding: 50px 20px;}
    #content {width: 100%;}
}

/* 서브공통 */
#container .sub-inner {width: 100%; margin: 0 auto; max-width: 100%; overflow: hidden;}
.sub-ctn .h4 {font-size: 38px; margin-bottom: 50px; padding-bottom: 20px; border-bottom: 1px solid #928e8d; font-weight: 400; padding-left: 20px; position: relative; font-weight: 600;}
.sub-ctn .h4::before {content: ''; display: block; width: 5px; height: 35px; background: #002674; position: absolute; left: 0; top: 12px;}
.sub-ctn .h5 {font-size: 30px; color: #002674; font-weight: 600; margin-bottom: 30px; position: relative;}
.sub-ctn .h6 {font-size: 24px; margin-bottom: 15px; font-weight: 600;}
.sub-ctn .h7 {font-size: 20px; font-weight: 600; padding-left: 10px; padding-right: 10px; display: inline-block; position: relative; margin-bottom: 20px; line-height: 1.5;}
.sub-ctn .h7::before,
.sub-ctn .h7::after {content: ''; display: block; width: 1px; height: 17px; border-left: 1px solid #000; position: absolute; top: 7px;}
.sub-ctn .h7::before {left: 0;}
.sub-ctn .h7::after {right: 0;}
.sub-ctn .ctn-wrap + .ctn-wrap {margin-top: 100px;}
.sub-ctn p + .section {margin-top: 100px;}
.sub-ctn .section + .section {margin-top: 100px;}
.section p {line-height: 2; text-align: justify;}
.paragraph > p {line-height: 2; text-align: justify;}
.paragraph p + p {margin-top: 10px;}
.paragraph + .paragraph {margin-top: 50px;}
p + .paragraph {margin-top: 50px;}
.paragraph .row {margin-left: -15px; margin-right: -15px;}
.paragraph-part {margin-top: 40px;}
.row {display: flex;}
.row .col-1 {flex: 0 0 10%;}
.row .col-2 {flex: 0 0 20%;}
.row .col-25 {flex: 0 0 25%;}
.row .col-3 {flex: 0 0 30%;}
.row .col-33 {flex: 0 0 33.333%;}
.row .col-4 {flex: 0 0 40%;}
.row .col-5 {flex: 0 0 45%;}
.row .col-6 {flex: 0 0 50%;}
.row .col-7 {flex: 0 0 55%;}
.row .col-8 {flex: 0 0 60%;}
.row .col-9 {flex: 0 0 70%;}
.row .col-10 {flex: 0 0 80%;}
.row .col-11 {flex: 0 0 90%;}
.row .col-12 {flex: 0 0 100%;}
.row .col {padding-left: 15px; padding-right: 15px;}
.d-flex {display: flex;}
.align-items-c {align-items: center;}
.align-items-s {align-items: start;}
.align-items-e {align-items: end;}
.justify-content-c {justify-content: center;}
.justify-content-s {justify-content: start;}
.justify-content-e {justify-content: end;}
.justify-content-b {justify-content: space-between;}
@media(max-width: 768px) {
    .row.m-block {display: block;}
    .row.m-block .col {width: 100%;}
    .row.m-block .col + .col {margin-top: 20px;}
    .sub-ctn .section + .section {margin-top: 50px;}
    .sub-ctn .h7::before, .sub-ctn .h7::after {top: 2px;}
}


.list-num > li + li {margin-top: 5px;}
.list-num li {padding-left: 20px; position: relative;}
.list-num li .num {position: absolute; left: 0; top: 0;}
.list-num ol {margin-top: 5px;}
ol.circle-num > li {padding-left: 30px !important; position: relative;}
.circle-num > li + li {margin-top: 10px;}
ol.circle-num .num {width: 20px; height: 20px; border-radius: 50%; background: #002574; display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; left: 0; top: 1px; text-align: center; font-size: 13px;}
li .list-dash {margin-top: 5px;}
p + .list-dash {margin-top: 5px;}
.list-dash > li {padding-left: 10px; position: relative;}
.list-dash > li::before {content: '-'; position: absolute; left: 0; top: 0;}
.list-dash > li + li {margin-top: 5px;}
.list-dash p {line-height: 1.5; text-align: left !important;}
.list-dot > li {padding-left: 10px; position: relative;}
.list-dot > li::before {content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #000; position: absolute; left: 0; top: 9px;}
.list-dot > li + li {margin-top: 5px;}
.list-dot p {line-height: 1.5; text-align: left !important;}
.list-arrow > li {padding-left: 16px; position: relative;}
.list-arrow > li::before {content: '→'; display: block; position: absolute; left: 0; top: -1.5px; font-size: 18px;}
.list-arrow li + li {margin-top: 5px;}

/* 이미지 */
.img-scroll-wrap {width: 100%; overflow-x: auto; overflow-y: hidden;}
.img-scroll-wrap img {display: block; margin: 0 auto; max-width: 100%;}
.img-wrap img {display: block; margin: 0 auto; max-width: 100%;}
.img-wrap .img-m {display: none;}
.img-wrap img + img {margin-top: 10px;}
.img-wrap.wrap-hand {position: relative;}
.img-wrap.wrap-hand::before {content: '좌우로 움직여주세요'; display: block; padding-left: 26px; background: url('../images/ico-swipe.png') no-repeat left 0; background-size: 18px; position: absolute; left: 0; top: 0; font-size: 13px; display: none;}
.img-wrap.wrap-hand .inner {max-width: 100%; overflow-x: auto;}
.img-wrap .caption {position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; margin-top: 15px;}
.img-wrap .caption::before,
.img-wrap .caption::after {content: ''; display: block; width: 1px; height: 15px; border-left: 1px solid #000; position: absolute; top: 7px;}
.img-wrap .caption::before {left: 0;}
.img-wrap .caption::after {right: 0;}
@media(max-width: 768px) {
    .img-wrap .img-m {display: block;}
    .img-wrap .img-pc {display: none;}
    .img-wrap .caption {}
}

/* 타이틀-텍스트-라인스타일 */
.info-line-type .row {display: flex; margin: 0;}
.info-line-type .row + .row {margin-top: 30px;}
.info-line-type .title {border-top: 3px solid #002574; padding-top: 15px; color: #002574;}
.info-line-type .ctn {width: calc(100% - 40px); margin-left: 40px; border-top: 1px solid #a9a9a9; padding-top: 15px;}
.info-line-type img {max-width: 100%;}
.info-line-type .img-m {display: none;}
@media(max-width: 768px) {
    .info-line-type .row {display: block;}
    .info-line-type .title {width: 100%; padding-top: 10px;}
    .info-line-type .ctn {width: 100%; margin-left: 0; border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;}
    .info-line-type .img-pc {display: none;}
    .info-line-type .img-m {display: block;}
}

/* 탭 */
.sub-tab {width: 100%; margin-bottom: 70px; border-bottom: 1px solid #ccc;}
.sub-tab ul {display: flex; width: 100%;}
.sub-tab ul li a {display: flex; position: relative; font-size: 24px; color: #333; padding: 15px; width: 100%; transition: all 0.2s; text-align: center; border-bottom: 1px solid #fff; font-weight: 500; align-items: center; justify-content: center;}
.sub-tab ul li a.active {color: #ee7609; font-weight: 600; border: 1px solid #ccc;}
.sub-tab ul li a.active::before {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: auto; top: 0; height: 3px; background: #ee7609;}
.sub-tab ul li a.active::after {content: ''; display: block; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: #fff;}
.ctn-tab-area .ctn-tab {margin-bottom: 30px;}
.ctn-tab-area .ctn-tab ul {display: flex; width: 100%; margin: 0 auto; max-width: 100%; padding-left: 1px;}
.ctn-tab-area .ctn-tab ul li {flex: 1; margin-left: -1px;}
.ctn-tab-area .ctn-tab ul li a {width: 100%; height: 50px; display: flex; justify-content: center; text-align: center; align-items: center; font-size: 15px; transition: all 0.2s; position: relative; background: #fff; border: 1px solid #ddd;}
.ctn-tab-area .ctn-tab ul li a:hover{color: #333; background: #eaeef6;}
.ctn-tab-area .ctn-tab ul li a.active {color: #ee7609; background: #fff;}
.ctn-tab-area .ctn-tab ul li a:hover::before,
.ctn-tab-area .ctn-tab ul li a.active::before {content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: -1px; border: 1px solid #002674;}
.ctn-tab-area .tab-ctn {display: none;}
.ctn-tab-area .tab-ctn.active {display: block;}

@media(max-width: 1200px) {
}

@media(max-width: 768px) {
    .sub-tab {margin-bottom: 30px;}
    .sub-tab ul {flex-wrap: wrap;}
    .sub-tab ul li {flex: none; width: 50%;}
    .sub-tab ul li a {font-size: 15px; padding-bottom: 7px; padding-top: 7px; height: 100%;}
    .sub-tab ul li a.active::before {height: 2px;}
    .sub-ctn .h4 {font-size: 22px; margin-bottom: 15px;}
    .sub-ctn .h4::before {height: 24px; top: 5px;}
    .sub-ctn * {font-size: 14px;}
    /* .sub-ctn * + .ctn-area {margin: 30px 0 0;} */
    .sub-ctn .ctn-area {margin: 40px 0;}
    .sub-ctn .h5 {font-size: 20px;}
    .sub-ctn .h6 span {font-size: 20px;}
    .sub-ctn .h6 {font-size: 16px;}
    .sub-ctn .h7 {font-size: 14px; margin-bottom: 15px;}
    .ctn-tab-area {margin-top: 20px !important;}    
    .ctn-tab-area .ctn-tab ul {flex-wrap: wrap;}
    .ctn-tab-area .ctn-tab ul li {margin-top: -1px; flex: none; width: 50%;}
    .ctn-tab-area .ctn-tab ul li a {height: 100%; padding: 10px; font-size: 14px;}
    .ctn-tab-area .ctn-tab {margin-bottom: 30px;}
}

/* 테이블스타일 */
.table-area .top-area {display: flex; justify-content: space-between; margin-bottom: 10px;}
.table-area .top-area .h5 {margin-bottom: 0;}
.table-area .top-area .title {display: flex;}
.table-area .top-area .title p {font-size: 15px; font-weight: 600; padding-left: 10px; padding-right: 10px; display: inline-block; position: relative;}
.table-area .top-area .title p::before,
.table-area .top-area .title p::after {content: ''; display: block; width: 1px; height: 15px; border-left: 1px solid #000; position: absolute; top: 7px;}
.table-area .top-area .title p::before {left: 0;}
.table-area .top-area .title p::after {right: 0;}
.table-wrap {width: 100%; overflow-y: hidden; overflow-x: auto;}
.table-wrap table {width: 100%; border-bottom: 2px solid #231815; border-top: 2px solid #231815;}
.table-wrap table thead th {background: #fff; font-weight: 600; padding: 10px 5px; color: #fff; border-right: 1px solid #c8c5c4; border-bottom: 2px solid #012674; color: #012674;}
.table-wrap table thead tr th:last-child {border-right: 0;}
.table-wrap table tbody th {border-bottom: 1px solid #c8c5c4; font-weight: 600; padding: 15px; border-right: 1px solid #c8c5c4;}
.table-wrap table tbody td {border-bottom: 1px solid #c8c5c4; background: #fff;padding: 10px; text-align: center; border-right: 1px solid #c8c5c4;}
.table-wrap table tbody tr td:last-child {border-right: 0;}
.table-wrap table tbody td p {line-height: 1.5; text-align: inherit;}
.table-wrap table td.bg-orange,
.table-wrap table th.bg-orange {background: #ffefe3;}
.table-wrap table td.bg-blue,
.table-wrap table th.bg-blue {background: #f2f7ff;}
.table-wrap table td.bg-green,
.table-wrap table th.bg-green {background: #eaf6f3;}
.table-wrap table td.bg-yellow,
.table-wrap table th.bg-yellow {background:#fffdea;}
.table-wrap table td.border-b,
.table-wrap table th.border-b {border-bottom: 1px solid #012674;}
.table-wrap table th.border-r {border-right: 1px solid #c8c5c4 !important;}
.table-wrap table tbody tr td.border-r {border-right: 1px solid #c8c5c4;}
.table-wrap table tbody tr .border-r-0 {border-right: 0;}
.table-wrap table tbody td dl + dl {margin-top: 15px;}
.table-wrap table tbody td dl dt strong {font-weight: 600;}
.table-wrap table table {border-top: 1px solid #828282;}
.table-area .bt-txt {margin-top: 10px; font-size: 14px; color: #656464;}
.table-wrap .img {max-width: 100%; display: block; margin: 0 auto;}
.table-wrap table td.arrow,
.table-wrap table th.arrow {position: relative;}
.table-wrap table span.arrow {position: absolute; top: 50%; transform: translateY(-50%); height: 20px; right: 18px; left: 0; background: rgb(246,249,255); background: linear-gradient(90deg, rgba(246,249,255,1) 0%, rgba(220,230,251,1) 100%);}
.table-wrap table span.arrow.top {top: 9px; transform: none;}
.table-wrap table span.arrow.top + p {margin-top: 30px;}
.table-wrap table span.arrow-body {position: absolute; top: 50%; transform: translateY(-50%); height: 20px; right: 0px; left: 0; background: #f2f6fe;}
.table-wrap table span.arrow::after {content: ''; display: block; width: 0; height: 0; border-bottom: 17px solid transparent; border-top: 17px solid transparent; border-left: 17px solid #dce6fb; position: absolute; right: -16px; top: 50%; transform: translateY(-50%);}
.table-wrap table td.arrow p {position: relative; z-index: 1;}
.table-wrap table .list-dot .list-dash {padding-left: 0;}

@media(max-width: 768px) {
    .table-area + p {margin-top: 10px;}
    .table-area .top-area .title p {font-size: 16px;}
    .table-wrap table th,
    .table-wrap table td {padding: 7px !important;}
}


/* 아코디언컨텐츠 */
.accordion {width: 100%;}
.accordion + .accordion {margin-top: 15px;}
.accordion .accordion-header {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 175px; background-color: #e6e6e6; background-repeat: no-repeat; background-image: url('../images/accordion-bg1.png'); background-position: right -140px center; padding: 10px 70px; border-radius: 15px; transition: all 0.2s; border: 1px solid #e6e6e6;}
.accordion .accordion-header .title-area {display: flex; align-items: center;}
.accordion .accordion-header .title-area .num {font-size: 45px; font-weight: 300; color: #333; margin-right: 40px;}
.accordion .accordion-header .title-area .title {font-size: 23px; font-weight: 500; color: #333;}
.accordion .accordion-header .title-area .title span {font-size: 20px;}
.accordion .accordion-header .btn-area .btn {display: block; width: 50px; height: 50px; transition: all 0.2s; border-radius: 50%; border: 1px solid #333; position: relative;}
.accordion .accordion-header .btn-area .btn::before,
.accordion .accordion-header .btn-area .btn::after {content: ''; display: block; width: 16px; height: 1px; background: #333; position: absolute;}
.accordion .accordion-header .btn-area .btn::before {top: 50%; left: 50%; transform: translateX(-50%);}
.accordion .accordion-header .btn-area .btn::after {left: 16px; top: 24px; transform: rotate(90deg);}
.accordion .accordion-body {padding: 60px 30px; display: none;}
.accordion.active .accordion-header {background-color: #fff; border: 1px solid #e9002c; background-image: url('../images/accordion-bg2.png');}
.accordion.active .accordion-header .title-area .num,
.accordion.active .accordion-header .title-area .title {color: #e9002c;}
.accordion.active .accordion-header .btn-area .btn {border: 1px solid #e9002c;}
.accordion.active .accordion-header .btn-area .btn::before {background: #e9002c;}
.accordion.active .accordion-header .btn-area .btn::after {top: 50%; left: 50%; transform: translateX(-50%); background: #e9002c;}
.accordion .accordion-body.active {display: block;}
@media(max-width: 768px) {
    .accordion .accordion-header {height: 100px; padding: 10px 20px; background-size: 200px; background-position: right -81px top -50px; border-radius: 5px;}
    .accordion .accordion-header .title-area .num {font-size: 25px; margin-right: 10px;}
    .accordion .accordion-header .title-area .title {font-size: 16px;}
    .accordion .accordion-header .title-area .title span {font-size: 14px;}
    .accordion .accordion-header .btn-area .btn {width: 30px; height: 30px;}
    .accordion .accordion-header .btn-area .btn::before,
    .accordion .accordion-header .btn-area .btn::after {width: 11px;}
    .accordion .accordion-header .btn-area .btn::after {left: 9px; top: 14px;}
    .accordion .accordion-body {padding: 30px 10px;}
}

/* 링크 */
* + .link-area {margin-top: 20px;}
.link-area {display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; justify-content: center;}
.link-area a {display: flex; color: #012674; border-radius: 50px; border: 1px solid #012674; text-align: center; align-items: center; justify-content: center; max-width: 100%; padding: 7px 40px; transition: all 0.2s; font-weight: 500; min-width: calc(33.3333% - 20px); margin: 5px 10px; background-repeat: no-repeat; background-position: left 15px center; background-image: url('../images/ico-link.png'); background-size: 18px;}
.link-area a:hover, .link-area a:active, .link-area a:focus {color: #fff; background-color: #012674; background-image: url('../images/ico-link-over.png');}
.link-area a.popup {background-image: url('../images/ico-popup.png'); background-size: 14px;}
.link-area a.download {background-image: url('../images/ico-download.png'); background-size: 14px;}
.link-area a.popup:hover {background-image: url('../images/ico-popup-over.png'); background-size: 14px;}
.link-area a.download:hover {background-image: url('../images/ico-download-over.png'); background-size: 14px;}
.link-area + * {margin-top: 20px;}
@media(max-width: 768px) {
    .link-area a {font-size: 14px;}
}

/* 인포박스 */
.info-box {padding: 24px; background: #fef3e7;}
.info-box.img-box {padding: 50px 20px;}
.info-box.img-box img {display: block; margin: 0 auto; max-width: 100%;}
.info-box.img-box .img-pc {display: block;}
.info-box.img-box .img-m {display: none !important;}
@media(max-width: 768px) {
    .info-box.img-box {padding: 30px 20px;}
    .info-box.img-box .img-pc {display: none;}
    .info-box.img-box .img-m {display: block !important;}
}

/* sup */
.sup {font-size: 13px; margin-top: 20px;}
sup {font-size: 11px;}
sub {font-size: 11px;}

/* 다이어그램 이미지 */
.diagram {max-width: 100%;}
.diagram img {max-width: 100%; display: block; margin: 0 auto;}
.diagram .img-pc {display: block;}
.diagram .img-m {display: none !important;}
.diagram-hidden {position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0; clip: rect(0,0,0,0);}
@media(max-width: 768px) {
    .diagram .img-pc {display: none;}
    .diagram .img-m {display: block !important; max-width: 100%; width: 370px;}
}
@media(max-width: 539px) {
    .diagram .img-m {max-width: 100%;}
}

/* 다이어그램 박스타입 */
.diagram-area {margin: 0 auto; max-width: 100%;}
.diagram-area > .title {text-align: center; font-size: 16px; font-weight: 500; color: #333; margin-bottom: 20px; padding: 30px; background: #f0f0f0;}
.diagram-area .box-wrap + .box-wrap {margin: 10px -5px 0 !important;}
.diagram-area .box-wrap .box {background: #fff; border: 1px solid #a9a9a9; padding: 5px; border-radius: 5px;}
.diagram-area .box-wrap .box p {text-align: center;}
.diagram-area .box-wrap .box .label {width: 100%; background: #002574; text-align: center; min-height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 5px;}
.diagram-area .box-wrap .box .label p {font-weight: 600; color: #fff; line-height: 1.2;}
.diagram-area .box-wrap .box .label p + .list-dot {margin-top: 5px;}
.diagram-area .box-wrap .box .ctn .icon {padding: 30px 0; margin-bottom: 15px; border-bottom: 1px solid #ddd;}
.diagram-area .box-wrap .box .ctn .icon img {display: block; margin: 0 auto; height: 40px;}
.diagram-area .box-wrap .box .ctn {width: 100%; height: calc(100% - 50px); padding: 10px;}
.diagram-area .box-wrap .box.only-label .label {height: 100%; padding: 10px;}
.diagram-area .box-wrap.row {display: flex; justify-content: space-between; margin-left: 0; margin-right: 0;}
.diagram-area .box-wrap.row-1 {justify-content: center;}
.diagram-area .box-wrap.row-1 > .box {width: 100%;}
.diagram-area .box-wrap.row-1 > .box {width: calc(50% - 10px);}
.diagram-area .box-wrap.row-2 > .box {width: calc(50% - 10px);}
.diagram-area .box-wrap.row-3 > .box {width: calc(33.333% - 10px);}
.diagram-area .box-wrap.row-4 > .box {width: calc(25% - 10px);}
.diagram-area .box-wrap.row-5 > .box {flex: 1; margin: 0 5px;}
.diagram-area .box-wrap.block {flex-wrap: wrap; justify-content: flex-start; margin: -5px;}
.diagram-area .box-wrap.block .box {margin: 5px;}
.diagram-area.arrow .box-wrap .box {position: relative;}
.diagram-area.arrow .box-wrap .box::before,
.diagram-area.arrow .box-wrap .box::after {content: ''; display: block; position: absolute; z-index: -1;}
.diagram-area.arrow .box-wrap .box::after {width: 0; height: 0;}
.diagram-area.arrow .box-wrap .box.top::after {border-bottom: 7px solid #000; border-top: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid transparent; left: 50%; margin-left: -7px;}
.diagram-area.arrow .box-wrap .box.bottom::after {border-bottom: 7px solid transparent; border-top: 7px solid #000; border-left: 7px solid transparent; border-right: 7px solid transparent; left: 50%; margin-left: -7px;}
.diagram-area.arrow .box-wrap .box.right::after {border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 7px solid #000; border-right: 7px solid transparent; top: 50%; margin-top: -7px;}
.diagram-area.arrow .box-wrap .box.left::after {border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 7px solid transparent; border-right: 7px solid #000; top: 50%; margin-top: -7px;}
.diagram-area .box-wrap .box .label:lang(en) {min-height: 70px;}
.diagram-area .box-wrap .box .label.h-90:lang(en) {min-height: 90px;}
@media(max-width: 768px){
    .diagram-area .box-wrap.block {margin: 0;}
    .diagram-area .box-wrap + .box-wrap {margin: 10px 0 !important;}
    .diagram-area .box-wrap .box {max-width: 100%;}
    .diagram-area .box-wrap .box .label {min-height: 40px;}
    .diagram-area .box-wrap.row {display: flex; justify-content: space-between; flex-wrap: wrap;}
    .diagram-area .box-wrap.row.row-3,
    .diagram-area .box-wrap.row.row-4,
    .diagram-area .box-wrap.row.row-5,
    .diagram-area .box-wrap.row.row-6 {display: block;}
    .diagram-area .box-wrap.row > .box {width: calc(50% - 5px); margin: 5px 0;}
    .diagram-area .box-wrap.row.row-3 > .box,
    .diagram-area .box-wrap.row.row-4 > .box,
    .diagram-area .box-wrap.row.row-5 > .box,
    .diagram-area .box-wrap.row.row-6 > .box {width: 100%;}
    .diagram-area.arrow .box-wrap .box.right::after {transform: rotate(90deg); right: auto; left: 50%; top: auto; bottom: -23px; margin-left: -7px;}
}

/* 회색박스 */
.info-ctn-box {width: 100%; padding: 30px; border-radius: 5px; background: #eaeef6;}
.info-ctn-box .title {text-align: center; margin-bottom: 15px; font-weight: 600;}
.info-ctn-box .inner {background: #fff; padding: 20px; border-radius: 5px;}
.info-ctn-box .list-dot > li::before {background: #002574;}
@media(max-width: 768px) {
    .info-ctn-box {padding: 30px;}
    .info-ctn-box .inner {padding: 20px;}
}

/* 레이어팝업 */
body.modal-open {overflow: hidden;}
body.modal-close {overflow-y: auto;}
.layer-popup-wrap {position: absolute; z-index: 101; opacity: 0; visibility: hidden; transition: all 0.3s;}
.layer-popup-area {position: fixed; top: 0; left: 0; z-index: 100; background: rgba(1, 37, 116, 0.9); overflow-y: auto; overflow-x: hidden; width: 100%; height: 100%;}
.layer-popup {width: 1000px; max-width: 100%; margin: 0px auto; min-height: calc(100vh - 50px); display: flex; align-items: center; padding: 50px 30px; margin-top: 50px;}
.layer-popup > .inner {background-color: #fff; border-radius: 30px; width: 100%; padding: 50px 50px 30px; background-image: url('../images/popup-bg.png'); background-repeat: no-repeat; background-position: right -184px bottom -200px; transition: all 0.3s;}
.layer-popup .popup-header .title {display: block; font-size: 22px; font-weight: 600;  margin-bottom: 30px; padding-bottom: 15px; color: #012674; border-bottom: 1px solid #012674; line-height: 1.2;}
.layer-popup .popup-footer {margin-top: 30px; display: flex; justify-content: flex-end;}
.layer-popup .popup-footer a {display: block; padding: 5px 20px; border-radius: 50px; border: 1px solid #012674; color: #012674; background: #fff; transition: all 0.2s; font-weight: 500; min-width: auto;}
.layer-popup .popup-footer a + a {margin-left: 5px;}
.layer-popup .popup-footer a:hover {background: #012674; color: #fff;}
.layer-popup-wrap.active {opacity: 1; visibility: visible;}
.layer-popup-wrap.active > .inner {transform: translateY(-25px);}
@media(max-width: 768px) {
    .layer-popup {margin-top: 25px; min-height: 100vh;}
    .layer-popup > .inner {padding: 30px; background-size: 300px; background-position: right -54px bottom -17px;}
    .layer-popup .popup-header .title {font-size: 18px;}
    .layer-popup .img-wrap img {width: 100% !important;}
}

/* 영문 */
html:lang(en) .policy-guideline .nav > ul {width: 1200px;}
html:lang(en) .policy-guideline .nav > ul > li {flex: 1;}
html:lang(en) .policy-guideline .nav > ul > li > a {font-size: 15px;}
html:lang(en) .policy-guideline .nav .depth-2 {padding: 30px 0;}
html:lang(en) .policy-guideline .nav .depth-2 a {font-size: 14px; white-space: normal;}
html:lang(en) .sub-tab ul li a {font-size: 19px;}
html:lang(en) #footer .link-area a.link {padding: 10px;}
html:lang(en) #footer .link-area a span {font-size: 13px;}
html:lang(en) .diagram-area .box-wrap .box .label {min-height: 80px; padding: 10px;}
html:lang(en) .diagram-area .box-wrap .box .ctn {height: calc(100% - 80px);}

@media(max-width: 768px){
    html:lang(en) .sub-tab ul li {width: 100%;}
    html:lang(en) .sub-tab ul li a {font-size: 14px;}
}




/* pdf */
@media print {
    @page {
        margin: 25mm 6mm 15mm 8mm;
        size: A4 portrait
    }
    * {-webkit-print-color-adjust: exact;print-color-adjust: exact;}
    #footer {display: none;}
    #header {display: none;}
    #tab-nav {display: none;}
    #sub-navigation {display: none;}
    #container {padding-top: 0;}
    #content {width: 100%;}
    .sub-visual {height: 150px;}    
    .sub-ctn .ctn-wrap {break-before: page;}
    .sub-ctn .ctn-wrap:first-child {break-before: avoid;}
    .sub-ctn .ctn-wrap + .ctn-wrap {margin-top: 0;}
    .sub-ctn .section {margin-bottom: 100px;}
    .sub-ctn .section + .section {margin-top: 0; break-inside: avoid-page;}
    .sub-ctn .ctn-wrap section:first-child {break-before: auto !important;}
    .paragraph + .paragraph {break-inside: avoid-page;}
    .sub-ctn * {font-size: 11px;}
    .diagram .img-pc {display: block; width: 600px;}
    .diagram .img-m {display: none !important;}
    .diagram-area .box-wrap.row {display: flex !important;}
    .diagram-area .box-wrap.row-1 > .box {width: 100% !important;}
    .diagram-area .box-wrap.row-1 > .box {width: calc(50% - 10px) !important;}
    .diagram-area .box-wrap.row-2 > .box {width: calc(50% - 10px) !important;}
    .diagram-area .box-wrap.row-3 > .box {width: calc(33.333% - 10px) !important;}
    .diagram-area .box-wrap.row-4 > .box {width: calc(25% - 10px) !important;}
    .diagram-area .box-wrap.row-5 > .box {flex: 1; margin: 0 5px !important;}
    sup {font-size: 9px !important;}
    sub {font-size: 9px !important;}
    .sup * {font-size: 9px !important;}
    .info-box.img-box img.wd-300 {width: 180px;}
    .row.m-block {display: flex;}
    .row.m-block .col + .col {margin-top: 0;}
    .img-wrap .caption::before,
    .img-wrap .caption::after {height: 10px;}
    .btn-wrap {display: none !important;}
    .link-area {display: none !important;}
    .info-line-type .row {display: flex;}
    .info-line-type .row .wd-20 {width: 20% !important;}
    .info-line-type .row .wd-30 {width: 30% !important;}
    .info-line-type .row .wd-40 {width: 40% !important;}
    .info-line-type .row .wd-50 {width: 50% !important;}
    .info-line-type .row .wd-60 {width: 60% !important;}
    .info-line-type .row .wd-70 {width: 70% !important;}
    .info-line-type .row .wd-80 {width: 80% !important;}
    .info-line-type .ctn {margin-left: 40px !important; margin-top: 0 !important;}
    .list-dot > li::before {top: 5px !important;}
    ol.circle-num .num {width: 17px !important; height: 17px !important; font-size: 9px !important}
    .info-line-type .img-pc {display: block !important;}
    .info-line-type .img-m {display: none !important;}
    .img-wrap .img-pc {display: block !important;}
    .img-wrap .img-m {display: none !important;}



}
/*  */