@charset "utf-8"; /* style.css 1.0.0(작업중)
===========================================

1. Layout
 1.1 Header
 1.2 Footer
 1.3 Sub
2. Main
3. Component
4. Contents
etc. Responsive
===========================================
*/

/* 1. Layout ----------------------------------------------------------------------------------- */
* { letter-spacing: -0.06em; } 
body, button, input, select, table, textarea { font-family: 'Pretendard', 'Noto Sans Korean'; font-weight: 400;} 
html { font-size: 62.5%; } 
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } 
caption { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border:0 !important; } 
html.noScroll { overflow: hidden; } 
.noMargin {margin: 0 !important;}
.noPadding {padding: 0 !important;}
.showMobile {display: none !important;}

a:focus, button:focus, select:focus { outline: 2px solid #e66318; outline-offset: 2px; transition: none !important; box-shadow: none !important; } 
.innerFocus:focus {outline-offset: -4px;}

.onLayout {overflow-x: hidden;} 
    .onContainer {width: 100%; max-width: 1424px; padding: 0 20px; box-sizing: border-box; margin: 0 auto;}
    .layoutBg { background: linear-gradient(to bottom, #FFFFFF, #EFF4FB); } 

.gap-8 {gap:8px;}
.multilineBtn {white-space: normal; height: auto !important; min-height: 50px;}
.multilineBtn i {flex: 0 0 auto;}

/* 1.1 Header --------------------------------------------------------------------------------- */
.onHeaderLayout { display: flex; justify-content: center; position: relative; z-index: 2000; } 
    .onHeaderLayoutIn { width: 100%; } 
    .onHeaderLogo img { display: block; } 
    .onHeaderR { display: flex; flex-direction: row; justify-content: space-between; height: 100%; width: 100%; } 
    .onWebMenu { display: flex; height: 100%; align-items: center; column-gap: 40px; font-size: 16px; } 
    .onHeaderBtns { display: flex; justify-content: center; align-items: center; height: 100%; } 
    .onHeaderBtns > div { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } 
    .onHeaderLogin { line-height: 26px; padding: 0 14px; font-size: 16px; font-weight: 600; letter-spacing: -0.06em; border: 1px solid #003283; border-radius: 19px; color: #003283; box-sizing: border-box; transition: all 0.3s; margin-right: 12px; } 

.onLayout.parallax .onHeaderIn { box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.10); border-bottom: none; } 

/* 1.2 Footer ------------------------------------------------------------------------------------ */
.onFooterLayout { margin-top: 80px; font-size: 17px; position: relative; z-index: 2000;} 

/* 1.3 Sub ------------------------------------------------------------------------------------ */
.onSubLayout {display: flex;flex-direction: column;width: 100%;max-width: 1424px;padding: 0 20px;box-sizing: border-box;margin: 0 auto;margin-bottom: 130px;line-height: 1.35;} 
.onSubLayout * {letter-spacing: 0;}
    .onSubLayoutIn {display: flex; margin-top: 67px; column-gap: 6%;}

.onLeftMenuLayout { width: 220px; background: url(/template/template2/assets/img/common/leftMenuLine.svg) no-repeat 100% top; } 
    .onLeftHeadLine { line-height: 59px; color: #083891; font-size: 20px; font-weight: 700; letter-spacing: -1.2px; border-bottom: 1px solid #E1E1E1; } 
.onLeftMenuIn > ul > li { border-bottom-color: #E1E1E1; } 
.onLeftMenuIn > ul > li > a { display: block; position: relative; padding: 12px 20px 12px 13px; transition: all 0.3s; color: #888; font-size: 17px; font-weight: 600; letter-spacing: -1.02px; } 
.onLeftMenuIn > ul > li > a > i { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); font-size: 11px; opacity: 0; transition: all 0.3s; } 
.onLeftMenuIn > ul > li.on > a,
.onLeftMenuIn > ul > li > a:hover { border-radius: 0px 10px 0px 0px; background: #083891; color: #fff; } 
.onLeftMenuIn > ul > li.on > a > i,
.onLeftMenuIn > ul > li > a:hover > i { right: 8px; opacity: 1; } 

.onLeftMenuBtn { position: relative; width: 15px; height: 15px; display: inline-block; float: right; margin-top: 3px; } 
.onLeftMenuBtn::before { content: ""; display: inline-block; position: absolute; width: 15px; height: 0; border-bottom: 1px solid #999999; top: 50%; transform: translateY(-50%); } 
.onLeftMenuBtn::after { content: ""; display: inline-block; position: absolute; width: 0; height: 15px; border-right: 1px solid #999999; top: 0; left: 50%; transform: translateX(-50%); transition: all 0.3s; } 
.onLeftMenuIn > ul > li.on .onLeftMenuBtn::before { border-color: #fff; } 
.onLeftMenuIn > ul > li.on .onLeftMenuBtn::after { border-color: #fff; transform: translateX(-50%) rotate(90deg); } 
.onLeftMenuIn > ul > li > a:hover .onLeftMenuBtn::before, .onLeftMenuIn > ul > li > a:hover .onLeftMenuBtn::after { border-color: #fff; } 


.onLeftSubMenu { border: 1px solid #083891; display: none; } 
.onLeftSubMenu.on { display: block; } 
.onLeftSubMenu li { padding: 0 10px 0 13px; position: relative; } 
.onLeftSubMenu li::after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 23px); height: 0; border-bottom: 1px dashed #D7D7D7; } 
.onLeftSubMenu li:last-of-type::after { display: none; } 
.onLeftSubMenu li a { line-height: 46px; display: block; color: #666; font-size: 15px; font-weight: 500; } 
.onLeftSubMenu li a:hover { color: #2D308F; } 
 

/* 2. Main ------------------------------------------------------------------------------------- */
.onMainBanner { display: flex; justify-content: center; margin-bottom: 60px; padding: 0 20px; } 
    .onMainBannerIn { width: 100%; max-width: 1384px; } 
    .onMainBannerTop {display: flex; padding-top: 45px;margin-bottom: 80px;position: relative;} 
        .mainObg01 {position: absolute; left: -5%; bottom: -4%; z-index: 11; opacity: 0; pointer-events: none;}
        .mainObg02 {position: absolute; left: -4.1%; bottom: -5.2%; z-index: 12; opacity: 0; transform: rotate(15deg); pointer-events: none;}
        .mainObg03 {position: absolute; left: -7.5%; bottom: 1%; z-index: 10; opacity: 0; pointer-events: none;}
        .mainObgBg {position: absolute; left: -2.8%; bottom: -5%; z-index: 10; opacity: 0; transition: 0.3s; pointer-events: none;}
        .waterBubble01,
        .waterBubble02,
        .waterBubble03 {position: absolute; opacity: 0; z-index: 12;}
        
    .onMainBannerTop > .mainBanner01.on .mainObg01 {width: 130px; opacity: 1; animation: flask 6s ease-in-out infinite, flaskShow 6s linear forwards; transform-origin: bottom;}
    .onMainBannerTop > .mainBanner01.on .mainObg02 {width: 110px; opacity: 1; animation: flaskIn 6s ease-in-out infinite, flaskShow 6s linear forwards; transform-origin: bottom;}
    .onMainBannerTop > .mainBanner01.on .mainObg03 {opacity: 1; width: 77px; padding-bottom: 10px; background: url(/template/template2/assets/img/main/mainObgBg01.png) no-repeat bottom center / 80px; animation: flaskShow 6s linear forwards;}
    .onMainBannerTop > .mainBanner01.on .mainObgBg {opacity: 1; width: 70px; height: 10px; animation: flaskShow02 6s linear forwards;}
    .onMainBannerTop > .mainBanner01.on .waterBubble01 {width: 7px;bottom: 2%; left: 1%; opacity: 0.6; animation: waterBubble 0.9s 0.3s linear infinite, flaskShow02 5s linear forwards;}
    .onMainBannerTop > .mainBanner01.on .waterBubble02 {width: 10px; bottom: -0.5%; left: -1%; opacity: 0.6; animation: waterBubble 1.2s 1.2s linear infinite, flaskShow02 5s linear forwards;}
    .onMainBannerTop > .mainBanner01.on .waterBubble03 {width: 12px; bottom: 2.5%; left: -2.5%; opacity: 0.6; animation: waterBubble 1.2s 0.9s linear infinite, flaskShow02 5s linear forwards;}
    .onMainBannerTop > .mainBanner01.on .bubbles {position:absolute; width: 200px; height: 300px; overflow:hidden; bottom:0; left:-120px; z-index: 10;}
    .onMainBannerTop > .mainBanner01.on .bubble {position: absolute; bottom:-100px; width:20px; height: 20px; background: radial-gradient(#EDF9FF, #C2E2F2); border-radius:50%; opacity:0;}
    .onMainBannerTop > .mainBanner01.on .bubble:nth-child(1){width:15px; height:15px; left:10%; animation: rise01 5s forwards ease-in;}
    .onMainBannerTop > .mainBanner01.on .bubble:nth-child(2){width:20px; height:20px; left:20%; animation: rise01 4s forwards ease-in; animation-delay:0.5s;}
    .onMainBannerTop > .mainBanner01.on .bubble:nth-child(3){width:20px; height:20px; left:55%; animation: rise02 4s forwards ease-in; animation-delay:1s;}
    .onMainBannerTop > .mainBanner01.on .bubble:nth-child(4){width:15px; height:15px; left:0%; animation: rise01 4s forwards ease-in; animation-delay:0s;}
    .onMainBannerTop > .mainBanner01.on .bubble:nth-child(5){width:15px; height:15px; left:35%; animation: rise02 3s forwards ease-in; animation-delay:0.5s;}
    .onMainBannerTop > .mainBanner01.on .bubble:nth-child(6){width:25px; height:25px; left:15%; animation: rise02 3s forwards ease-in;; animation-delay:1s;}

    .onMainBannerTop > .satellite {position: absolute; left: 45%; top: -5%; z-index: 10; opacity: 0; transition: all 0.3s linear;}
    .onMainBannerTop > .satellite.mainBanner02 > img {animation: doong 3s ease infinite; will-change: transform; transform: translateZ(0);}
    .onMainBannerTop > .satellite.mainBanner02 .obgRing {position: absolute; left: -35%; bottom: -30%; width: 280px; height: 280px; opacity: 0; display: none;}
    .onMainBannerTop > .satellite.mainBanner02.on {opacity: 1;}
    .onMainBannerTop > .satellite.mainBanner02.on .obgRing {opacity: 1; display: block;}
    .onMainBannerTop > .satellite.mainBanner02.on .obgRing > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: left;}
    .onMainBannerTop > .satellite.mainBanner02.on .ring01 {animation: ring01 linear 6s forwards; opacity: 0;}
    .onMainBannerTop > .satellite.mainBanner02.on .ring02 {animation: ring02 linear 6s forwards; opacity: 0;}
    .onMainBannerTop > .satellite.mainBanner02.on .ring03 {animation: ring03 linear 6s forwards; opacity: 0;}
    .onMainBannerTop > .satellite.mainBanner02.on .ring04 {animation: ring04 linear 6s forwards; opacity: 0;}
    .onMainBannerTop > .satellite.mainBanner02.on .ring05 {animation: ring05 linear 6s forwards; opacity: 0;}

    .onMainBannerTop > .mainObg01.mainBanner03 {opacity: 0; top: auto; bottom: 10%; left: 50%;}
    .onMainBannerTop > .mainObg02.mainBanner03 {opacity: 0; top: 10%; left: 30%;}
    .onMainBannerTop > .mainObg03.mainBanner03 {opacity: 0; top: auto; bottom: -10%; left: 53%;}
    .onMainBannerTop > .mainObg01.mainBanner03.on {animation: cloud02 6s linear forwards;}
    .onMainBannerTop > .mainObg02.mainBanner03.on {animation: cloud01 7s ease forwards;}
    .onMainBannerTop > .mainObg03.mainBanner03.on {animation: cloud02 7s linear forwards;}

    /* 메인 첫 번째 슬라이드 오브젝트 */
    @keyframes flask {
        0% {
            transform: rotate(7deg);
        }
        50% {
            transform: rotate(-7deg);
        }
        100% {
            transform: rotate(7deg);
        }
    }
    @keyframes flaskIn {
        0% {
            transform: rotate(20deg) translateX(-16px);
        }
        50% {
            transform: rotate(-20deg) translateX(10px);
        }
        100% {
            transform: rotate(20deg) translateX(-16px);
        }
    }
    @keyframes flaskShow {
        0% {opacity: 0;}
        10% {opacity: 1;}
        90% {opacity: 1;}
        100% {opacity: 0;}
    }
    @keyframes flaskShow02 {
        0% {opacity: 0;}
        10% {opacity: 0.6;}
        90% {opacity: 0.6;}
        100% {opacity: 0;}
    }
    @keyframes waterBubble {
        0% {transform: scale(0.5); opacity: 0;}
        100% {transform: scale(1); opacity: 0.6;}
    }

    @keyframes rise01{
        0%{
            opacity: 0;
            bottom:-80px;
            transform:translateX(0);
        }
        50%{
            opacity: 0.8;
            transform:translate(60px);
        }
        100%{
            opacity: 0;
            bottom: 300px;
            transform:translateX(10px);
        }
    }
    @keyframes rise02{
        0%{
            opacity: 0;
            bottom:-80px;
            transform:translateX(0);
        }
        50%{
            opacity: 0.8;
            transform:translate(30px);
        }
        100%{
            opacity: 0;
            bottom: 300px;
            transform:translateX(70px);
        }
    }

    /* 메인 두 번째 슬라이드 오브젝트 */
    @keyframes doong {
        0% {transform: translateY(0);}
        50% {transform: translateY(15px);}
        100% {transform: translateY(0);}
    }
    @keyframes hide {
        0% {opacity: 0;}
        90% {opacity: 1;}
        100% {opacity: 1;}
    }
    @keyframes ring01 {
        0% {transform: scale(0.8) translate(-50%, -50%); opacity: 0;}
        15% {transform: scale(1.1) translate(-50%, -50%); opacity: 1;}
        30% {transform: scale(1.1) translate(-50%, -50%); opacity: 1;}
        45% {transform: scale(1.1) translate(-50%, -50%); opacity: 1;}
        60% {transform: scale(1.1) translate(-50%, -50%); opacity: 1;}
        75% {transform: scale(1.1) translate(-50%, -50%); opacity: 1;}
        90% {transform: scale(1.1) translate(-50%, -50%); opacity: 1;}
        100% {transform: scale(1.2) translate(-50%, -50%); opacity: 0;}
    }
    @keyframes ring02 {
        0% {transform: scale(0.8) translate(-50%, calc(-50% + 1px)); opacity: 0;}
        15% {transform: scale(0.8) translate(-50%, calc(-50% + 1px)); opacity: 0;}
        30% {transform: scale(1.1) translate(-50%, calc(-50% + 1px)); opacity: 1;}
        45% {transform: scale(1.1) translate(-50%, calc(-50% + 1px)); opacity: 1;}
        60% {transform: scale(1.1) translate(-50%, calc(-50% + 1px)); opacity: 1;}
        75% {transform: scale(1.1) translate(-50%, calc(-50% + 1px)); opacity: 1;}
        90% {transform: scale(1.1) translate(-50%, calc(-50% + 1px)); opacity: 1;}
        100% {transform: scale(1.2) translate(-50%, calc(-50% + 1px)); opacity: 0;}
    }
    @keyframes ring03 {
        0% {transform: scale(0.8) translate(-50%, calc(-50% + 3px)); opacity: 0;}
        15% {transform: scale(0.8) translate(-50%, calc(-50% + 3px)); opacity: 0;}
        30% {transform: scale(0.8) translate(-50%, calc(-50% + 3px)); opacity: 0;}
        45% {transform: scale(1.1) translate(-50%, calc(-50% + 3px)); opacity: 1;}
        60% {transform: scale(1.1) translate(-50%, calc(-50% + 3px)); opacity: 1;}
        75% {transform: scale(1.1) translate(-50%, calc(-50% + 3px)); opacity: 1;}
        90% {transform: scale(1.1) translate(-50%, calc(-50% + 3px)); opacity: 1;}
        100% {transform: scale(1.2) translate(-50%, calc(-50% + 3px)); opacity: 0;}
    }
    @keyframes ring04 {
        0% {transform: scale(0.8) translate(-50%, calc(-50% + 5px)); opacity: 0;}
        15% {transform: scale(0.8) translate(-50%, calc(-50% + 5px)); opacity: 0;}
        30% {transform: scale(0.8) translate(-50%, calc(-50% + 5px)); opacity: 0;}
        45% {transform: scale(0.8) translate(-50%, calc(-50% + 5px)); opacity: 0;}
        60% {transform: scale(1.1) translate(-50%, calc(-50% + 5px)); opacity: 1;}
        75% {transform: scale(1.1) translate(-50%, calc(-50% + 5px)); opacity: 1;}
        90% {transform: scale(1.1) translate(-50%, calc(-50% + 5px)); opacity: 1;}
        100% {transform: scale(1.2) translate(-50%, calc(-50% + 5px)); opacity: 0;}
    }
    @keyframes ring05 {
        0% {transform: scale(0.8) translate(-50%, calc(-50% + 10px)); opacity: 0;}
        15% {transform: scale(0.8) translate(-50%, calc(-50% + 10px)); opacity: 0;}
        30% {transform: scale(0.8) translate(-50%, calc(-50% + 10px)); opacity: 0;}
        45% {transform: scale(0.8) translate(-50%, calc(-50% + 10px)); opacity: 0;}
        60% {transform: scale(1.1) translate(-50%, calc(-50% + 10px)); opacity: 0;}
        75% {transform: scale(1.1) translate(-50%, calc(-50% + 10px)); opacity: 1;}
        90% {transform: scale(1.1) translate(-50%, calc(-50% + 10px)); opacity: 1;}
        100% {transform: scale(1.2) translate(-50%, calc(-50% + 10px)); opacity: 0;}
    }

    /* 메인 세 번째 슬라이드 오브젝트 */
    @keyframes cloud01 { 
        0% { transform: translateX(0px); opacity: 0; } 
        10% { transform: translateX(0px); opacity: 1; } 
        70% { opacity: 1; }
        100% { transform: translateX(80px); opacity: 0; }  
    }
    @keyframes cloud02 { 
        0% { transform: translateX(0px); opacity: 0; } 
        10% { transform: translateX(0px); opacity: 1; } 
        90% { transform: translateX(-70px); opacity: 1; }
        100% { transform: translateX(-80px); opacity: 0; }  
    }

    .mainBanner01 .mainBannerTxt {color: #333333;}
    .mainBanner01 .mainBannerTxt > span {color: #0F53D3;}
    .mainBanner01 .mainTxtList > li::before { background: #333333; } 

    .onMainBannerL { position: relative; width: 100%; max-width: 1040px; border-radius: 137px 30px 30px 30px; overflow: hidden; margin-right: 48px; } 
    .onMainBannerL > div { position: relative; width: 100%; } 
    .onMainBannerL > div img { width: 100%;}
    .onMainBannerL .swiper-slide img {transition: all 8s ease;}
    .onMainBannerL .swiper-slide.on img {transform: scale(1.3);}
        .mainBannerTxt { position: absolute; left: 94px; top: 20%; width: 50%; max-width: 470px; color: #FEFEFE; height: 295px; } 
        .mainBannerTxt > span { display: inline-block; color: #fff; font-weight: 500; font-size: 20px; line-height: 28px; margin-bottom: 1px; } 
        .mainBannerTxt > h2 { font-weight: 600; font-size: 42px; line-height: 50px; margin-bottom: 14px; } 
        .mainTxtList { margin-bottom: 35px; } 
        .mainTxtList > li { font-weight: 300; font-size: 16px; line-height: 24px; position: relative; padding-left: 11px; } 
        .mainTxtList > li::before { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #fff; left: 0; position: absolute; top: 50%; transform: translateY(-50%); } 
        .mainDetailBtn { display: inline-block; width: 105px; height: 34px; border-radius: 17px; background: #000; color: #FEFEFE; font-size: 14px; text-align: center; position: absolute; bottom: 0; z-index: 100; } 
        .mainDetailBtn > i { font-size: 8px; margin-left: 3px; vertical-align: 1px; } 

.onMainBannerR { width: 100%; max-width: 296px; z-index: 10; } 
    .mainBtmIcon { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; row-gap: 16px; column-gap: 16px; position: relative; margin-bottom: 25px;} 
    .mainBtmIcon > li { width: calc((100% - 16px) / 2); } 
    .mainBtmIcon > li a { display: flex; flex-direction: column; justify-content: space-between; position: relative; background: rgba(255, 255, 255, 0.6); border: 1px solid #F2F5FB; border-radius: 20px; padding: 18px 20px; transition: all 0.3s; height: 140px; box-sizing: border-box; } 
    .mainBtmIcon > li a:hover {background: #fff; border-color: #0F53D3; box-shadow: 0 0 20px #E0E9FB;}
    /* .mainBtmIcon > li a::before { content: ""; transition: all 0.3s; display: block; width: 64px; height: 64px; border-radius: 50%; background: #4D9FFF; opacity: 0; position: absolute; left: 30px; top: -10px; }  */
    .mainBtmIcon > li a > img { width: 57px; margin-left: auto; z-index: 10; }
    .mainBtmIcon > li a span { font-size: 17px; color: #2C2C2C; font-weight: 500; display: inline-block; margin-bottom: 8px; transition: all 0.3s;} 
    .mainBtmIcon > li a p {font-size: 14px; color: #666;}
    .mainBtmIcon > li a i {position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #333; font-weight: bold;}
    .mainBtmIcon > li a:hover span {color: #0F53D3;} 
    .mainBtmIcon > li a:hover p {color: #0F53D3;} 
    .mainBtmIcon > li a:hover > span { font-weight: 500; } 
 
.onMainBannerBtm { display: flex; align-items: center; margin-bottom: 33px; height: 230px;} 
    .onMainBtmL { width: 200px; margin-right: 40px; flex-shrink: 0; } 
    .onMainBtmL .onT2 { margin: 0 0 4px 0; font-size: 22px; } 
    .onMainBtmL p { color: #666; font-size: 14px; line-height: 24px; margin-bottom: 20px; } 

    .onMainBtmR { width: calc(100% - 240px);} 
    .onMainBtmR > li {display: none; width: 100%;}
    .onMainBtmR > li.on {display: block;}
    .onMainBtmR > li > div {display: flex; align-items: center;}


        .mainBtmEarth {position: relative; width: 100%;}
            .earthInfo {display: flex; flex-direction: column;}
            .earthInfo > span {font-size: 20px; font-weight: 500; margin-bottom: 19px; line-height: 30px;}
            .earthInfo > img {width: 219px; margin-bottom: 24px;}
            .earthInfo > a {display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; width: 79px; line-height: 28px; color: #666; font-weight: 500; border-radius: 30px; border: 1px solid #D7D7D7; font-size: 14px;}
            .earthInfo > a > i {font-size: 12px; color: #888888; margin-right: 6px; transition: all 0.3s;} 
            .earthInfo > a:hover {border-color: #0F53D3; color: #0F53D3;}
            .earthInfo > a:hover > i {color: #0F53D3;}
            .earthImg {position: absolute; top: 79%; transform: scale(0.4); right: 40px;}
                .people {position: absolute; right: -24px; top: -135px;}
                .earth {position: absolute; right: 0; top: -84px; animation: earthRotate 25s linear infinite;}

                @keyframes earthRotate {
                    0% {transform: rotate(0deg);}
                    100% {transform: rotate(360deg);}
                }
        
        /* 우리의 환경 연구 */        
        .mainReportL {width: calc(100% - 540px); flex: 0 0 auto; margin-right: 50px;}
            .reportSwiper {overflow: hidden;}
                .mainReportTop {margin-bottom: 14px;}
                .mainReportTop h3 {font-size: 20px; color: #333; line-height: 26px; font-weight: 600;}
                    .mainReportBox {background: #fff; border-radius: 20px; border: 1px solid #E0E8F4; transition: all 0.3s; box-sizing: border-box;}
                    .mainReportBox:hover {border-radius: 30px 20px 20px 20px; background: #E8F8FB; border-color: #1D95B7;}
                    .mainReportBox:hover .mainReportBtn span {background: #333333;}
                        .mainReportTxt {padding: 24px; box-sizing: border-box;}
                        .mainReportTxt strong {font-size: 18px; line-height: 26px; font-weight: 600; color: #333; margin-bottom: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
                        .mainReportTxt p {font-size: 14px; line-height: 20px; color: #666;}
                        .mainReportBtn {height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 24px; border-top: 1px solid rgba(0, 0, 0, 0.1);}
                        .mainReportBtn p {font-size: 14px; color: #666; }
                        .mainReportBtn span {display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #979797; color: #fff; line-height: 20px; text-align: center; transition: all 0.3s;}
                        .mainReportBtn span > i {font-size: 9px; margin-left: 1px;}
        .mainReportR {width: 440px; margin-left: 40px; flex: 1 0 auto; height: 230px; position: relative;}
        .mainReportR::after {content: ""; display: block; position: absolute; width: 0; height: 226px; border: 1px solid #E9E9E9; left: -40px; top: 50%; transform: translateY(-50%);}
            .reportChartInfo {position: absolute; left: 0; top: 3px;}
            .reportChartInfo > p {font-size: 20px ; color: #333; font-weight: 600; line-height: 30px; margin-bottom: 8px;}
            .reportChartInfo > span {font-size: 13px; color: #666; line-height: 15px;}
            .totalTxt {position: absolute; right: 14%; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center;}
            .totalTxt span {font-size: 14px; color: #666; line-height: 20px; display: inline-block; margin-bottom: 4px; font-weight: 500;}
            .totalTxt strong {font-size: 36px; line-height: 36px; color: #222;margin-bottom: 4px;}
            .totalTxt span:last-of-type {font-size: 13px;}

        /* 분야별 운영시스템 */
        .onMainBtmR > li > .systemTabWrap {display: flex; flex-direction: column; overflow: hidden; align-items: flex-start; position: relative;}
        .systemTabBox {margin: 0;}
            .onTab.system { margin-bottom: 12px; border: none; padding-left: 10px;} 
            .onTab.system > li { background: none; border: none; min-width: auto; font-size: 16px; font-weight: 600; height: 26px; width: fit-content; } 
            .onTab.system > li a { padding: 0 2px; position: relative; } 
            .onTab.system > li a::before { content: ""; transition: all 0.3s; display: block; width: 18px; height: 18px; background: #4D9FFF; border-radius: 50%; opacity: 0; position: absolute; left: -5px; top: 0px; } 
            .onTab.system > li.on { border: none; background: none; } 
            .onTab.system > li.on::before {display: none;}
            .onTab.system > li.on a { color: #0F53D3; } 
            .onTab.system > li.on a::before { opacity: 0.2; } 

            .systemComponent {position: absolute; right: 4px; top: 4px;}

            .systemTabCon {width: 100%;}
            .systemTabCon > div {display: none;}
            .systemTabCon > div.on {display: block;}
                .systemTabSlider > div {display: flex; flex-direction: row; width: fit-content;}
                .mainSystemBox {width: 220px; height: 181px; box-sizing: border-box; flex: 0 0 auto; transition: width 0.3s;}
                .mainSystemBox .swiper-wrapperIn { position: relative; width:calc(100% - 20px); height: 100%; background: #fff; border-radius: 20px; border: 1px solid #E0E8F4; transition: all 0.3s; box-sizing: border-box;}

                /* .mainSystemBox:hover {background: #fff; border-color: #E0E8F4; border-radius: 20px;} */
                .mainSystemBox img {position: absolute; right: 10%; bottom: 10%; display: block; width: auto; height: auto; object-fit: none;}
                .mainSystemBox .mainReportTxt {padding: 16px 24px 12px;}
                .mainSystemBox .mainReportBtn {opacity: 0; position: absolute; width: 100%; box-sizing: border-box; left: 0; bottom: 0;}
                .mainSystemBox .mainReportBtn:focus {opacity: 1;}
                .mainSystemBox .mainReportBtn:focus + img {display: none;}
                .mainSystemBox .mainReportTxt p {opacity: 0; width: 70%; transition: all 0.2s 0.1s;}
                
                .mainSystemBox.swiper-slide-active {width:330px;}
                .mainSystemBox.swiper-slide-active .swiper-wrapperIn {background: #E8FBF4; background-image: none; border-color: #00776A; border-radius: 30px 20px 20px 20px;}

                .mainSystemBox.swiper-slide-active:hover {background: #E8FBF4; background-image: none; border-color: #00776A; border-radius: 30px 20px 20px 20px;}
                .mainSystemBox.swiper-slide-active img {display: none;}
                .mainSystemBox.swiper-slide-active .mainReportBtn {opacity: 1; display: flex; line-height: 47px;}
                .mainSystemBox.swiper-slide-active .mainReportTxt strong {line-height: 24px; font-size: 20px;}
                .mainSystemBox.swiper-slide-active .mainReportTxt p {opacity: 1; line-height: 20px; font-size: 15px;}

                .mainSystemBox .systemName {display: inline-block; line-height: 24px; margin-bottom: 7px; padding: 0 8px; border-radius: 20px; font-size: 13px;} 

                .mainSystemBox.system01 .systemName {background: #F0F7F9; color: #00776A;}
                .mainSystemBox.system02 .systemName {background: #F0F7F9; color: #1D95B7;}
                .mainSystemBox.system03 .systemName {background: #F0F7F9; color: #3B5FD5;}
                .mainSystemBox.system04 .systemName {background: #F0F7F9; color: #28A452;}
                .mainSystemBox.system05 .systemName {background: #F0F7F9; color: #AD6C12;}
                .mainSystemBox.system01.swiper-slide-active .systemName {background: #00776A; color: #fff;}
                .mainSystemBox.system02.swiper-slide-active .systemName {background: #1D95B7; color: #fff;}
                .mainSystemBox.system03.swiper-slide-active .systemName {background: #3B5FD5; color: #fff;}
                .mainSystemBox.system04.swiper-slide-active .systemName {background: #28A452; color: #fff;}
                .mainSystemBox.system05.swiper-slide-active .systemName {background: #AD6C12; color: #fff;}
                .mainSystemBox .mainReportTxt strong {margin-bottom: 10px;}

                .systemComponent > a { position: relative; background: #fff; color: #787878; font-size: 11px; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #E1E1E1; left: auto; right: auto; top: auto; bottom: auto; margin-top: 0; transition: all 0.3s; box-sizing: border-box; display: flex; justify-content: center; align-items: center;} 
                .systemComponent > .swiper-button-stop {font-size: 12px;}
                

.onMainBoard { display: flex; justify-content: center; padding: 0 20px;} 
    .onMainBoardIn { width: 100%; max-width: 1384px; display: flex; justify-content: space-between; } 
        .mainBoardBox { width: 34%; max-width: 555px; position: relative; height: 286px; flex: 1 1 auto; margin-right: 3%;} 
        .mainBoardBox > .onTab { border-bottom: 2px solid #E6E6E6; margin-bottom: 10px; padding-bottom: 13px; } 
        .mainBoardBox > .onTab > li { background: none; border: none; min-width: auto; font-size: 22px; font-weight: 600; margin-right: 6%; height: 26px; max-width: none; } 
        .mainBoardBox > .onTab > li a { padding: 0 2px; position: relative; } 
        .mainBoardBox > .onTab > li a::before { content: ""; transition: all 0.3s; display: block; width: 36px; height: 36px; background: #4D9FFF; border-radius: 50%; opacity: 0; position: absolute; left: -15px; top: -10px; } 
        .mainBoardBox > .onTab > li.on { border: none; } 
        .mainBoardBox > .onTab > li.on::before { border-bottom: 2px solid #0F53D3; bottom: -15px; } 
        .mainBoardBox > .onTab > li.on a { color: #0F53D3; } 
        .mainBoardBox > .onTab > li.on a::before { opacity: 0.2; } 
        .boardMoreBtn { position: absolute; right: 0; top: 3px; font-size: 20px; } 
        .boardMoreBtn svg path { transition: all 0.3s; } 
        .boardMoreBtn:hover svg path,
        .boardMoreBtn:focus svg path { stroke: #0F53D3; } 
        .onTabContents { height: calc(100% - 51px); } 
        .onTabContents > div { height: 100%; display: none; } 
        .onTabContents > div.on { display: block; } 
        .boardLink { display: flex; align-items: center; justify-content: space-between; color: #666; height: 20%; transition: all 0.3s; } 
        .boardLink > p { width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 500; } 
        .boardLink > p > span { display: inline-block; margin-right: 15px; font-size: 16px; vertical-align: 1px; font-weight: 400; } 
        .boardLink > i { font-size: 12px; font-weight: 600; } 
        .boardLink:hover > p,
        .boardLink:hover > i { color: #333; } 
        .boardLink:hover > p > span { color: #666; } 

        .mainDataBox { width: 63%; display: flex; flex: 1 0 auto; } 
        .mainPromoData { width: 100%; } 
        .mainPromoData .onT2 { font-size: 22px; margin: 0 auto 11px; line-height: 27px; } 
            .promoDataBox { display: flex; justify-content: space-between; height: calc(100% - 37px); position: relative; } 
            .promoDataList { background: #F4F4F4; border: 1px solid #E7E7E7; border-radius: 10px; width: 90%; padding: 20px 116px 20px 8%; height: 248px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; min-width: 400px; } 
                .annualReportBox {}
                .annualReportBox::after {content: ""; display: block; width: 164px; height: 164px; border-radius: 50%; background: #4D9FFF; opacity: 0.1; position: absolute; right: 142px; top: 40px; z-index: 1;}
                .annualReportBox p {font-size: 24px; line-height: 30px; color: #353535; width: 160px; margin-bottom: 20px; font-weight: 500; position: relative;}
                .annualReportBox p::after {content: ""; display: block; width: 49px; height: 49px; border-radius: 50%; background: #4D9FFF; opacity: 0.1; position: absolute; left: -10px; top: -20px;}
                .annualReportBox > a {display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; width: 79px; line-height: 28px; color: #666; font-weight: 500; border-radius: 30px; border: 1px solid #D7D7D7; font-size: 14px;}
                .annualReportBox > a > i {font-size: 12px; color: #888888; margin-right: 6px; transition: all 0.3s;} 
                .annualReportBox > a:hover {border-color: #0F53D3; color: #0F53D3;}
                .annualReportBox > a:hover > i {color: #0F53D3;}
            .dataBubble {position: relative; margin: -32px 0 0 -142px; display: flex; flex-direction: column; align-items: center; background: #0F53D3; width: 100%; height: calc(100% - 5px); flex-shrink: 0; max-width: 222px; border-radius: 20px 20px 20px 0; box-sizing: border-box; padding: 27px 0 24px; z-index: 1; } 
            .dataBubble > div {width: 140px; height: 190px; border-radius: 6px; overflow: hidden;}
            .dataBubble > div img {width: 100%; height: 100%; object-fit: cover;}
            .dataBubble button {font-size: 13px; color: #fff;}
            .dataBubble button i {font-size: 9px;}

            @keyframes show {
                0% {opacity: 0; transform: translateY(0) scale(0);}
                50% {transform: translateY(6px);}
                65% {opacity: 1; transform:  translateY(-1px) scale(1);}
                85% {opacity: 1; transform:  translateY(1px) scale(1);}
                100% {opacity: 1; transform:  translateY(0) scale(1);}
            }
            @keyframes up {
                0% {opacity: 0; transform: translateY(30px);}
                100% {opacity: 1; transform: translateY(0px)}
            }

        .mainAlarmZone { width: 256px; flex: 1 0 auto; overflow: hidden; position: relative; margin-left: 5%; } 
            .alarmTitle { display: flex; } 
            .alarmTitle .onT2 { margin: 0 0 10px; font-size: 22px; line-height: 27px; } 
            .alarmComponent { width: 100%; height: 27px; position: relative; display: flex; align-items: center; justify-content: flex-end; } 
            .alarmComponent .swiper-pagination {margin-right: auto;}
            .alarmSlideBox { height: calc(100% - 45px); aspect-ratio: auto 1 / 1; } 
            .alarmSlideBox > div { border-radius: 10px; overflow: hidden; border: 1px solid #E7E7E7; box-sizing: border-box; } 
            .alarmSlideBox .swiper-slide > img,
            .alarmSlideBox .swiper-slide a > img {width: 100%; height: 100%; object-fit: cover;}


/* 3. Component -------------------------------------------------------------------------------- */
.flexBox {display: flex; }
.noIcon:before, .noIcon:after {display: none !important;}

/* 제목 */
.onT1 { color: #1e1e1e; margin-bottom: 20px; font-size: 30px; } 
.onT2 { color: #1e1e1e; margin: 30px 0 20px 0; font-size: 24px; font-weight: 700; line-height: 1.5; } 
.onT3 { color: #1e1e1e; font-size: 19px; margin: 0 auto 16px;  font-weight: 700; line-height: 29px; } 
.onT4 { color: #1e1e1e; font-size: 17px; margin: 0 0 8px; font-weight: 700; line-height: 26px; } 

/* 문단 */
.onP { margin-bottom: 30px; font-size: 17px; font-weight: 400; line-height: 150%; color: #464C53;} 
.onP strong { font-size: 17px; font-weight: 600; color: #175EC7; } 

.onText {font-size: 17px; line-height: 150%;}
.onText img {vertical-align: middle;}
.onSubText {font-size: 17px; margin: 6px 0 0;}

.onTxtBox { margin-bottom: 20px; }
.onTxtBox:last-child {margin-bottom: 0;}
.onTxtBox .onTxt { color: #464C53; font-size: 19px; line-height: 1.5; }
.onListBox { background: #F5F7FD; border-radius: 10px; display: flex; flex-direction: column; padding: 30px; gap: 12px; margin-bottom: 20px; }
.onListBox > li { display: flex; align-items: flex-start; }
.onListBox > li> span { color: #717B90; font-size: 16px; font-weight: 700; margin-right: 12px; line-height: 27px; }
.onListBox > li> p { font-size: 19px; font-weight: 700; color: #1E1E1E; }
.onListBox > li> p > strong { font-weight: 700; color: #0F53D3; }

/* input */
input[type="text"], input[type="password"],
.onField input[type="text"], .onField input[type="password"] {border: 1px solid #58616A; border-radius: 6px; box-sizing: border-box;}
input[type="text"]::placeholder {font-size: 15px;}

/* loading */
.onLoading {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: rgba(240, 240, 240, 0.5)
        url(/template/template2/assets/img/common/loading.svg) no-repeat center center / 4%;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.w100 {width: 100%;}

/* 공백 */
.onBtmNo {margin-bottom: 0 !important;}
.onBtmXs {margin-bottom: 10px !important;}
.onBtmS {margin-bottom: 20px !important;}
.onBtmM {margin-bottom: 30px !important;}
.onBtmL {margin-bottom: 48px !important;}

/* 콘텐츠 설명 */
.onInfoBox {background: #EEF2F7; border-radius: 12px; padding: 24px; box-sizing: border-box; margin-bottom: 48px;}
.onInfoBox .onDotList li {font-size: 15px; line-height: 150%; color: #464C53;}

/* who 설명페이지 */
.torBox  { display: flex; align-items: center; gap: 20px; }
.torBox > p {width: 100px;height: 100px;background: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;color: #0F53D3;line-height: 1;flex: 0 0 auto;font-size: 20px;font-weight: 600;gap: 3px;}
.torBox > p > span { color: #7D84AA; }
.torTxt > p { color: #1E1E1E; font-weight: 500; font-size: 18px; }
.torTxt > ul {margin-top: 10px;}
.torTxt > ul li { display: flex; }
.torTxt .activityTit { font-weight: 500; margin-right: 10px; flex: 0 0 auto; }

/* 검색 & 셀렉트 */
.onSearchBox { background: #EEF2F7; border-radius: 8px; padding: 34px 34px; margin-bottom: 40px; } 

.onSearchBox.select {padding: 30px 40px;}
.onSearchBox.select .form-group {flex-direction: row; align-items: center; gap: 12px;}
.onSearchBox.select .form-group .form-conts {width: auto;}
.onSearchBox.select .form-group .form-conts strong {font-size: 17px;}
.onSearchBox.select .form-group .form-conts.onSearchSm {width: 100%; max-width: 317px;}

/* 기본 게시판 */
.onTable { table-layout: fixed; } 

.onConHead { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 0px; font-size: 15px; margin-bottom: 20px; } 
.onConHead.title { margin-bottom: 30px; padding-bottom: 21px; border-bottom: 1px solid #D7D7D7; } 
.onConHead.titleBtn { margin-bottom: 0; padding-bottom: 14px; } 
    .onConHead .onT1 { margin: 0; } 
    .onConHead .onT2 { margin: 0; } 
    .onConHead_left span strong { color: #265EB7; } 
    .onConHead_left .onField select { border: 1px solid #ccc; height: 36px; margin-left: 10px; } 
    .onTotal { display: flex; align-items: center; color: #515151; font-weight: 600; } 
    .onTotal .onField select { border: 1px solid #ccc; height: 36px; margin-left: 10px; } 
 
    .onConHead_left { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } 
    .onConHead_left > .onT2 { margin: 0; line-height: 24px; font-weight: 700; } 
    .onConHead_left > .onT3 { margin: 0; line-height: 24px; font-weight: 700; color: #000; } 
    .titleNextBtn { display: inline-block; position: relative; padding: 5px 16px 5px 32px; margin-left: 11px; border-radius: 50px; background: #777890; color: #FFF; font-size: 15px; font-weight: 500; line-height: 20px; transition: all 0.3s; } 
    .titleNextBtn:hover { box-shadow: inset 0 -2em 0 0 #636E81; background: #777890; } 
    .titleNextBtn::before { content: ""; display: block; position: absolute; width: 18px; height: 18px; top: 50%; left: 10px; transform: translateY(-50%); background: url(/template/template2/assets/img/common/titleBtn_info.svg) no-repeat 100%; } 
    
    .onTitleBtns { display: flex; flex-direction: row; justify-content: flex-start; } 
    .onTitleBtns > li { margin-left: 10px; } 
    .onTitleBtns > li:first-of-type { margin-left: 0; } 
    .onTitleBtns > li a.btnS_blackLine { border: 1px solid #000000; color: #333; background-color: #fff; } 

.onTable > thead > tr > th { font-size: 16px; padding: 5px 13px 5px; font-weight: 600; line-height: 19px; height: 48px; box-sizing: border-box; background-color: #F3F3F8; } 
.onTable > tbody > tr > th { padding: 12px 16px; line-height: normal; height: 47px; box-sizing: border-box; font-weight: 600; background-color: #F3F3F8; } 
.onTable > tbody > tr > td { font-size: 16px; padding: 5px 16px; height: 47px; box-sizing: border-box; color: #555; } 

.onTable.noHover > tbody > tr:hover { background-color: unset; } 

.onTable.input > tbody > tr > td > [class ^= "btnS_"] { height: 32px; } 
.onTable.input > tbody > tr > td .onField { display: flex; } 
.onTable.input > tbody > tr > td .onField input[type="text"], .onField input[type="password"] { height: 32px; width: 100%; max-width: 200px; } 
.onTable.input > tbody > tr > td select { height: 32px; width: 100%; } 

.onTable > tbody > tr.notice > td { font-weight: 600; } 
.onTable > tbody > tr > td > [class ^= "btnS_"] { min-width: 80px; font-weight: 500; } 
.onTable > tbody > tr > td > .btnS_sky:hover { color: #488EEF; } 
.onTable > tbody > tr > td > .btnS_gray:hover { color: #fff; } 
.onTable > tbody > tr > td > .btnS_blue:hover, .onTable > tbody > tr > td > .btnS_blue:focus { color: #fff } 

.onTable.plan > thead > tr > th { padding: 15px; font-size: 16px; background-color: #F3F3F8; font-weight: 600; } 
.onTable.plan > thead > tr > th:after { height: calc(100% - 16px); border-right: 1px dashed #D7D7D7; } 
.onTable.plan > tbody > tr > td { padding: 16px 25px; font-size: 16px; color: #444; } 
.onTable.plan > tbody > tr.total { background-color: #F3F3F8; border: none; } 
.onTable.plan > tbody > tr.total > td { border: none; } 

.onCheckText { position: relative; padding-left: 12px; color: #083891; font-size: 17px; } 
.onCheckText::before { content: "√"; display: inline-block; position: absolute; left: 0; top: 0; } 

.krds-table-wrap table tbody tr td pre {font-family: 'Pretendard', 'Noto Sans KR', sans-serif; white-space: pre-wrap; margin: 0;}


/* 페이징 */
.onPagingNext {border-top: 1px solid #e8e8e8;} 
.onPagingNext a {display: flex;align-items: center;color: #474c53; border-bottom: 1px solid #e8e8e8;} 
.onPagingNext a > i.ico-angle {background: #777;width: 14px;height: 14px;display: inline-flex;} 
.onPagingNext a span {color: #757575;} 
.onPagingNext a:hover,
.onPagingNext a:hover span {color: #2f3f8a;} 

/* onBoardBox (게시글 상세) */
.onBoardTitle { font-size: 24px; color: #303030; margin-bottom: 20px; } 
.onBoardInfoLists { display: flex; font-size: 15px; color: #474c53; padding-bottom: 16px; flex-wrap: wrap; gap:10px 0;} 
.onBoardInfoLists > li { margin-right: 32px; display: flex; } 
.onBoardInfoLists > li > p { margin-right: 12px; } 
.mainArticle { border-top: 1px dashed #E1E1E1; border-bottom: 1px solid #E1E1E1; padding-top: 24px; padding-bottom: 28px; margin-bottom: 24px; } 
.onAlert { border-radius: 8px; display: flex; color: #1f2124; font-size: 17px; padding: 16px; gap: 6px; background: #EEF2F7; align-items: center;} 
.onAlert .icon { align-self: flex-start;}
.onAlert.themeBlue { border: 1px solid #d7ebfb; background: #e9f4fd; } 
.onAlert.large { border-radius: 12px; padding: 20px 24px; font-weight: 700; min-height: 66px; box-sizing:border-box;}
.onBoardContents { margin-top: 28px; font-size: 17px; } 
.onBoardContents .onBoardSubTitle { color: #1f2124; font-size: 19px; font-weight: 700; margin-bottom: 14px; } 
.onBoardContents > div { border: 1px solid #b2b8be; border-radius: 12px; padding: 32px; color: #131416; font-size: 17px; } 
.onBoardContents > div > p { margin: 14px 0 10px; } 
.onBoardContents > div > p:first-child { margin-top: 0; } 
dl.onBoardUploaded { margin-top: 30px; } 
dl.onBoardUploaded > dt { border: 1px solid #DFE6ED; border-bottom: none; box-sizing: border-box; max-width: 117px; border-radius: 10px 10px 0 0; background: #F5F5F5; display: flex; align-items: center; justify-content: center; height: 38px; position: relative; transform: translateY(1px); } 
dl.onBoardUploaded > dt > .icon-clip2 { background: #4E4E4E; } 
dl.onBoardUploaded > dt > p { color: #333; font-size: 15px; font-weight: 600; margin-left: 7px; } 
dl.onBoardUploaded > dd { border: 1px solid #DFE6ED; box-sizing: border-box; border-radius: 0 0 5px 5px; background: #F5F5F5; padding: 19px 22px 18px; } 
dl.onBoardUploaded > dd a { color: #474c53; font-size: 15px; line-height: 1.7; } 

/* 탭 */
.onTab { display: flex; border-bottom:1px solid #2C66E4 } 
.onTab > li { background: #F3F3F3; height: 32px; min-height: auto; min-width: 104px; text-align:center; border-radius: 5px 5px 0px 0px; border: 1px solid #D7D7D7; border-bottom: none; } 
.onTab > li > a { display: block; height: 100%; color: #999; transition:all 0.6s; display: flex; align-items: center; padding:0px 12px; } 
.onTab > li > a:hover, .onTab > li > a:focus { color: #2C66E4; } 
.onTab > li > a > span { margin: 0 auto; font-size: 14px; line-height: 16px; } 
.onTab > li.on { background-color: #fff; border: 1px solid #2C66E4; border-bottom: none; position: relative; } 
.onTab > li.on a { color: #2C66E4; } 
.onTab > li.on::before { content: ""; display: block; height: 0; width: 100%; border-bottom: 1px solid #fff; bottom: -1px; left: 0; position: absolute; } 

/* onTab 스타일 초기화 */
.onTab.resetStyle {border-bottom: none; } 
.onTab.resetStyle > li { background: none; height: auto; border-radius: 0; border: none; max-width: 100%;} 
.onTab.resetStyle > li.on::before { display: none; } 

/* 탭 콘텐츠 */
.onTabContents > div {display: none;}
.onTabContents > div.on {display: block;}

/* FAQ 게시판 */
.onFaq { border-top: 1px solid #333; } 
.onFaq > li { border-bottom: 1px solid #E1E1E1; } 
.onFaq > li > a { display: flex; align-items: center; padding: 18px 16px; font-size: 17px; font-weight: 600; color: #666; } 
.onFaq > li > a > span { margin: 0 12px 2px 0; } 
.onFaq > li > a > strong { width: 85px; margin-right: 10px; line-height: 28px; font-size: 15px; text-align: center; border: 1px solid #E5D6D6; border-radius: 30px; transition: all 0.3s; box-sizing: border-box; } 
.onFaq > li > a > i { margin-left: auto; font-size: 14px; } 
    .onFaqIn { display: flex; padding: 18px 16px; border-top: 1px solid #E1E1E1; background-color: #F8F8F8; } 
    .onFaqIn > span { margin-right: 12px; } 
    .onFaqIn p { font-size: 16px; font-weight: 400; color: #444; } 
    .onFaqIn p > strong { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 600; color: #000; } 

.onFaq > li.on > a > strong,
.onFaq > li > a:hover > strong { border-color: #175EC7; } 

.onFaq > li.on > a,
.onFaq > li > a:hover { color: #175EC7; } 
.onFaq > li.on > a > i { transform: rotateX(180deg); } 
 
.onTableCount { font-size: 15px; font-weight: 400; color: #444; } 
.onTableCount > strong { display: inline-block; margin-left: 4px; font-weight: 400; color: #E13D49; } 

.onPostTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 


/* 갤러리형 게시판 */
.onGallery > ul { display: flex; flex-wrap: wrap; justify-content: space-between; } 
.onGallery > ul > li { width: calc((100% / 4) - 10px); margin-bottom: 30px; padding-bottom: 8px; overflow: hidden; box-shadow: none; } 
.onGallery > ul > li > a { position: relative; display: block; max-height: 147px; margin-bottom: 8px; overflow: hidden; background-color: #f1f1f1; background: url(/template/template2/assets/img/common/noImg.png); background-size: 100%; background-position: center center; border-radius: 5px; } 

.onGallery > ul > li > h4 { margin: 0; } 
.onGallery > ul > li > h4 > a { display: block; color: #333; font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.onGallery > ul > li > h4 > a:hover,
.onGallery > ul > li > h4 > a:focus { color: #00459E; } 

.onGallery > ul > li > strong { display: inline-block; color: #008849; font-size: 15px; font-weight: 500; margin: 0 6px 6px 0; } 

/* 버튼 */
[class ^= "btnS_"] { min-width: 74px; height: 30px; line-height: 28px; padding: 0 10px; font-size: 15px; border-radius: 5px; box-sizing: border-box; transition: all 0.3s; } 
[class ^= "btnM_"] { min-width: 74px; height: 36px; line-height: 34px; padding: 0 16px; font-size: 15px; border-radius: 5px; box-sizing: border-box; transition: all 0.3s; } 
[class ^= "btnL_"] { min-width: 160px; height: 50px; padding: 0 30px; font-size: 18px; border-radius: 10px; box-sizing: border-box; transition: all 0.3s; } 

.btnS_blue:hover, .btnM_blue:hover, .btnL_blue:hover { color: #fff; box-shadow: inset 0 -2.8em 0 0 #488EEF; background-color: #488EEF; } 
.btnS_gray:hover, .btnM_gray:hover, .btnL_gray:hover { color: #fff; box-shadow: inset 0 -2.8em 0 0 #555774; background-color: #898A9E; } 
.btnS_red:hover, .btnM_red:hover, .btnL_red:hover { color: #fff; box-shadow: inset 0 -2.8em 0 0 #FF5B5B; background-color: #EA4040; } 
.btnS_green:hover, .btnM_green:hover, .btnL_green:hover { color: #fff; box-shadow: inset 0 -2.8em 0 0 #74CC1E; border: 1px solid #74CC1E; background-color: #008B61; } 

.btnBox.ac > a { margin-right: 20px; } 
.btnBox.ac > a:last-of-type { margin-right: 0; } 

.onBtnGroup .krds-btn{padding: 0 19px; min-width: 64px; box-sizing: border-box;}

.onToggle { width: 174px; font-size: 16px; line-height: 36px;  display: flex; flex-direction: column; box-sizing: border-box; border: none; row-gap: 12px; } 
.onToggle li { width: 100%; } 
.onToggle li a { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 30px; border: 1px solid #E0E0E0; color: #6A6A6A; padding: 0 20px; box-sizing: border-box;} 
.onToggle li a > i {font-size: 11px;}
.onToggle > li > a, .onToggle > li > button { line-height: 36px; text-align: left; } 
.onToggle li.on a, .onToggle > li.on > button { background-color: #0F53D3; color: #fff; border-color: #0F53D3; } 
.onToggle .moText {display: none;}

/* 반응형 */
/* .onToggle { width: 223px; font-size: 16px; background: #fff; line-height: 36px; border-radius: 30px; border: 1px solid #E0E0E0; color: #6A6A6A; display: flex; flex-direction: row; justify-content: space-between; box-sizing: border-box; align-items: center; } 
.onToggle li { text-align: center; border-radius: 20px; min-width: 33.33%; } 
.onToggle li a { display: block; } 
.onToggle > li > a, .onToggle > li > button { line-height: 36px; } 
.onToggle li.on a, .onToggle > li.on > button { background-color: #0F53D3; color: #fff; }  */

.btn_accordion { border: 1px solid #000; border-radius: 5px; width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; } 
.btn_accordion > i { font-weight: bold; transition: all 0.3s; } 
.btn_accordion.on > i { transform: rotate(180deg); } 

/* 컬러 */
.text_blue { color: #175EC7; } 
.text_blue2 { color: #0F53D3; } 
.text_blue3 { color: #0B50D0; } 
.text_red { color: #FF0000; } 
.text_red2 { color: #f62a09; } 
.text_grey { color: #464c53; } 

/* 콘텐츠 박스 */
.onSection {margin-bottom: 64px;}

.onConBox { margin-bottom: 40px; } 

/* 이미지 박스 */
.onImgBox { margin: 0; padding: 0; border: 1px solid #CCCCCC; text-align: center; box-sizing: border-box;} 
.onImgBox img { min-width: 600px; max-width: 100%; } 

.onBigImg {overflow-x: auto;}
.onBigImg > img {min-width: 600px; width: 100%; margin: 0 auto; display: block;}
.onBigImg.fitContent > img {max-width:fit-content }

/* 주석 */
.onComment { margin-bottom: 20px; } 
.onComment > li { display: flex; font-size: 15px; font-weight: 400; } 
.onComment > li > span { display: block; margin-right: 4px; white-space: nowrap; color: #175EC7; } 
.onComment > li > p { color: #666; } 

.onComment > strong { position: absolute; top: 0; left: 0; padding-left: 6px; font-size: 14px; font-weight: 500; color: #00459E; } 
.onComment > strong::before { position: absolute; top: 5px; left: 0; content: ""; display: inline-block; width: 2px; height: 12px; background-color: #00459E; } 
.onComment > ul { margin-left: 40px; font-size: 14px; color: #666666; } 
.onComment > ul > li { display: flex; } 
.onComment > ul > li > .marker { display: block; margin-right: 2px; } 

/* 리스트 */
.onList li {display: flex; align-items: flex-start; font-size: 17px; color: #464C53; line-height: 150%;}
.onList li > span {margin-right: 6px;}
.onList li.withBtnList {align-items: center;}
.onList li.withBtnList p {display: flex; gap: 4px;}
.onList li.withBtnList .krds-btn{margin-left: 8px; align-self: flex-start;}

.onDotList > li { position: relative; padding-left: 14px; font-size: 17px; color: #464C53; } 
.onDotList > li::before { content: "•"; display: block; position: absolute; top: 0; left: 0; } 

/* 팝업 */
.onModal {background-color: rgba(0, 0, 0, 0.65);}
.onModalIn {max-width: 964px;}
    .onModalHeader {padding: 30px 55px 30px 40px;}
    .onModalHeader > h3 {font-size: 24px; color: #464C53; letter-spacing: normal;}
    .onModalContent {padding: 30px; font-size: 17px; color: #464C53; letter-spacing: normal; max-height: 464px;}
    .onModalClose {position: absolute; right: 24px; top: 24px; font-size: 24px; color: #33363D;}

/* swiper */
.onMainBoard .swiper-pagination { position: relative; top: 0; line-height: 27px; width: 40px; font-size: 14px; color: #666; } 
.onMainBanner .swiper-navigation,
.onMainBoard .swiper-navigation { width: fit-content; height: 27px; display: flex; align-items: center; column-gap: 6px; } 
.onMainBoard .swiper-navigation > div { position: relative; background: #fff; color: #787878; font-size: 11px; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #E1E1E1; left: auto; right: auto; top: auto; bottom: auto; margin-top: 0; transition: all 0.3s; box-sizing: border-box; display: flex; justify-content: center; align-items: center;} 
.onMainBoard .swiper-navigation > .swiper-button-stop {font-size: 12px;}
.onMainBanner .swiper-navigation > div:hover,
.onMainBoard .swiper-navigation > div:hover { background: #333333; border-color: #fff; color: #fff; } 
.onMainBanner .swiper-navigation .swiper-button-prev::after,
.onMainBanner .swiper-navigation .swiper-button-next::after,
.onMainBoard .swiper-navigation .swiper-button-prev::after,
.onMainBoard .swiper-navigation .swiper-button-next::after { display: none; } 
.onMainBanner .swiper-navigation .swiper-button-prev i,
.onMainBoard .swiper-navigation .swiper-button-prev i { margin-right: 1px; font-weight: 600; } 
.onMainBanner .swiper-navigation .swiper-button-next i,
.onMainBoard .swiper-navigation .swiper-button-next i { margin-left: 2px; font-weight: 600; } 
.onMainBanner .swiper-navigation .swiper-button-stop button,
.onMainBoard .swiper-navigation .swiper-button-stop button { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } 
.onMainBanner .swiper-navigation .swiper-button-stop svg,
.onMainBoard .swiper-navigation .swiper-button-stop svg { margin: 1px 0 0 1px; } 
.onMainBanner .swiper-navigation .swiper-button-stop:hover path,
.onMainBoard .swiper-navigation .swiper-button-stop:hover path { stroke: #fff; } 

.onMainIssue .swiper-navigation > div {position: relative; background: #fff; color: #787878; font-size: 11px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #E1E1E1; left: auto; right: auto; top: auto; bottom: auto; margin-top: 0; transition: all 0.3s; box-sizing: border-box; flex: 1 0 auto; display: flex; justify-content: center; align-items: center;}
.onMainIssue .swiper-navigation > .swiper-button-stop {font-size: 14px;}

.onMainBannerL > .bannerComponent {position: absolute; left: calc(50% - 24px); bottom: 33px; width: 92px; display: flex;}
    .bannerComponent .swiper-pagination {position: relative; top: unset; bottom: unset; line-height: 15px;}
    .bannerComponent .swiper-pagination span {transition: all 0.3s; background: #E5E5E5; opacity: 1; width: 9px; height: 9px;}
    .bannerComponent .swiper-pagination .swiper-pagination-bullet-active {width: 33px; background: #FFFFFF; border-radius: 5px;}
    .bannerComponent .swiper-button-stop {color: #fff; z-index: 10; font-size: 14px; margin-right: 2px;}

/* 메인 팝업 */
.onMainPopup {  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; border-radius: 10px; overflow: hidden;}
.onMainPopup > ul > li {border-radius: 10px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.16) 0 0 20px; box-sizing: border-box;}
    .onMainPopupHead {display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 20px; font-size: 14px; font-weight: 500; color: #ffffff; background-color: #022222; box-sizing: border-box;}
    .onMainPopupBody {width: 100%; height: 100%; background: #F2F5FB url(../img/common/icon_noData.svg) no-repeat center center;}
    .onMainPopupBody img {display: block; width: 100%; max-height: calc(100vh - 150px);}
    .onMainPopupBody a {display: block;}
    .onMainPopupFooter {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 50px; padding: 0 14px 0 20px; font-size: 14px; font-weight: 500; color: #ffffff; background-color: #022222; box-sizing: border-box;}
        .onMainPopupClose {padding: 6px;}

.mainPopSwiper {width: 480px; overflow: hidden; border-radius: 10px;}
    .mainPopBtns {position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 10; height: 33px; min-width: 94px; text-align: center; border-radius: 20px; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center;}
    .mainPopBtns .swiper-button-stop {margin: 0 0 0 7px; width: 18px; font-size: 13px;}
    .mainPopBtns .swiper-button-stop i {vertical-align: 0px; color: #fff;}
    .mainPopBtns .swiper-pagination {width: fit-content; color: #fff; padding: 0; font-size: 15px; font-weight: 200; left: 43px; top: 7px;}
    .mainPopBtns .swiper-button-prev { width: 12px; height: 12px; margin: 0; left: 25px; top: 9px; bottom: 0;}
    .mainPopBtns .swiper-button-prev::after {position: absolute; font-size: 13px; width: 6px; height: 10px; margin: auto 0; opacity: 1;}
    .mainPopBtns .swiper-button-next {width: 12px; height: 12px; margin: 0; top: 9px; right: 9px; bottom: 0;}
    .mainPopBtns .swiper-button-next::after {position: absolute; font-size: 13px; width: 6px; height: 10px; margin: auto 0; opacity: 1;}
    .mainPopBtns .swiper-button-prev.swiper-button-disabled,
    .mainPopBtns .swiper-button-next.swiper-button-disabled {opacity: 0.5;}
    .onMainPopupFooter > a { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center;}
    .onMainPopupFooter > a::before { content: ""; display: block; width: 0; height: calc(100% - 38px); position: absolute; border-right: 1px solid rgba(255, 255, 255, 0.2); right: 0; top: 0; bottom: 0; margin: auto 0;}
    .onMainPopupFooter > a:last-of-type::before {display: none;}


/* onRightStickyBar */
/* .onRightStickyBar {display: none;}  */
.stickyBarIn {position: absolute;top: 0;width: 102px;right: 0;transition: transform 0.3s;z-index: 1000;} 
.stickyBarIn > ul { border: 1px solid #E6E6E6; background: #fff; border-bottom: none; border-radius: 8px 0px 0px 8px; width: 100%; box-sizing: border-box; } 
.stickyBarIn > ul > li > a { display: flex; text-align: center; flex-direction: column; align-items: center; padding: 20px 0 16px; position: relative; } 
.stickyBarIn > ul > li > a:after { content: ""; position: absolute; width: calc(100% - 18px); height: 0; border-bottom: 1px dashed #c8c8c8; bottom: 0; } 
.stickyBarIn > ul > li:last-child > a:after { display: none; } 
.stickyBarIn > ul > li > a > .hoverIconBox { position: relative; width: 34px; height: 34px; } 
.stickyBarIn > ul > li > a > .hoverIconBox > img { position: absolute; top: 0; left: 0; transition: opacity 0.3s; } 
.stickyBarIn > ul > li > a > .hoverIconBox > img.on { opacity: 0; } 
.stickyBarIn > ul > li > a > span { font-size: 14px; color: #464c53; line-height: 1.5; margin-top: 4px; transition: 0.3s color; } 
.stickyBarIn > ul > li > a:hover > span { color: #2b3d8e; font-weight: 600; } 
.stickyBarIn > ul > li > a:hover > .hoverIconBox > img.off { opacity: 0; } 
.stickyBarIn > ul > li > a:hover > .hoverIconBox > img.on { opacity: 1; } 
.stickyBarIn > button.moveTop { background: #2b3d8e; width: 102px; border: 1px solid #2b3d8e; color: #fff; border-radius: 0 0 0 8px; font-weight: 600; padding: 14px 0 13px; font-size: 14px; display: flex; align-items: center; justify-content: center; } 
.stickyBarIn > button.moveTop > i { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/template/template2/assets/img/krds/ico_angle.svg); mask-image: url(/template/template2/assets/img/krds/ico_angle.svg); background: #fff; width: 20px; height: 16px; display: inline-flex; transform: rotate(180deg); }     
    
/* iframe */
.iframeScroll {width: 100%; overflow-x: auto;}
.iframeScroll .wrapper {position:relative; width:100%; height:100%; margin:0; padding:0;}
.iframeScroll .container {min-height:100%;margin:-120px 0 -340px 0;padding:200px 0 380px 0;}

/* noData */
.onNoData {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; font-size: 14px; text-align: center; color: #878787; font-weight: 400;}
.onNoData > img {margin-bottom: 7px;}

/* 4. Contents -------------------------------------------------------------------------------- */
.centerPosition { flex-direction: row; justify-content: center; } 
.flexWrap {flex-wrap: wrap;}
.flexStretch {justify-content: space-between; align-items: center;}
.onSubContentBox {width: calc(94% - 248px)}
    .onSubTitle { font-size: 32px; font-weight:700; margin-bottom: 50px; color: #1E2124;} 
    .onSubTitle.onHasLine { padding-bottom: 38px; border-bottom: 1px solid #e1e1e1; margin-bottom: 20px; } 
    .onSubTitle2 { color: #131416; font-size: 24px; font-weight: 700; margin-bottom: 24px; }
    .onSearchResult { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: #1e2124;} 
    .onAlert + .onSearchResult, .onSearchBox + .onSearchResult {margin-top: 40px;}
    .onSearchResult {margin-top: 50px;}
    .onSearchResult.hasLine { border-bottom: 1px solid #8a949e; padding-bottom: 24px; margin-bottom: 33px; }
    .resultCount { font-size: 19px; font-weight: 700; } 
    .resultCount.md {font-size: 24px;}
    .resultCount > span { color: #0b50d0; margin: 0 2px; } 
    .resultViewOption { display: flex; font-size: 17px; align-items: center; } 
    .resultViewOption > div { display: flex; align-items: center; position: relative; padding-right: 25px; } 
    .resultViewOption > div:last-child { padding-right: 0; } 
    .resultViewOption > div:after { content: ""; position: absolute; width: 1px; height: 16px; background: #8a949e; top: 50%; transform: translateY(-50%); right: 13px; } 
    .resultViewOption > div:last-child:after { display: none; } 
    .resultViewOption > div > p { font-weight: 700; margin-right: 12px; } 
    .onButtonBar button:not(:last-child) { margin-right: 6px; } 

 .icon-clip2 { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/template/template2/assets/img/common/icon_clip.svg); mask-image: url(/template/template2/assets/img/common/icon_clip.svg); width: 16px; height: 16px; display: block; background: #000; } 

 /* sitemap - 브레드크럼 */
.onSiteMap { position: relative; min-height: 67px; display: flex; align-items: center; justify-content:space-between; } 
.onSiteMap:after { content: ""; position: absolute; width: 100vw; height: 100%; left: 50%; top: 0; transform: translateX(-50%); background: #F3F7FF; background: linear-gradient(180deg, rgba(243, 247, 255, 1) 0%, rgba(243, 247, 255, 0) 100%); z-index: -1; } 
.onUtilityIcon {display: flex;}
.onUtilityIcon > button { width: 32px; height: 32px; background: #26272B; border-radius: 50%; margin-left: 6px; transition: background 0.3s;} 
.onUtilityIcon > button:hover,
.onUtilityIcon > button.on {background: #2D3D8F}
.onUtilityIcon > .toggleSnsChannelWrap {position: relative; z-index:100;}
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists { display: none; position:absolute; left: -32px; top: 42px; }
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists > * { width: 32px; height: 32px; display: block; position: relative; margin-bottom: 10px; }
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists > * img {position: absolute; left: 0; top:0;  transition: opacity 0.3s;}
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists > * img.off {opacity: 1;}
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists > * img.on {opacity: 0;}
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists > *:hover img.off {opacity: 0;}
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists > *:hover img.on { opacity: 1; }
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists .copyurl { background: #26272B; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s;}
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists .copyurl > img {position: relative;}
.onUtilityIcon > .toggleSnsChannelWrap .snsChannelLists .copyurl:hover {background: #2D3D8F;}
 
 /* SiteMapLists - 사이트맵 페이지 */
.onSiteMapLists > h3 { color: #0F53D3; font-size: 24px; line-height: 1.5; margin-bottom: 40px; }
.onSiteMapLists > ul { padding-bottom: 60px; border-bottom: 1px solid #D9D9D9; margin-bottom: 60px; display: flex; flex-wrap: wrap; gap: 38px 0; }
.onSiteMapLists > ul:last-child { border-bottom: none; margin-bottom: 0px; padding-bottom: 0px; }
.onSiteMapLists > ul > li { width: 20%; }
.onSiteMapLists > ul > li > h4 > a { color: #1E1E1E; font-size: 17px; transition: 0.3s; display: inline-flex; align-items: center;}
.onSiteMapLists > ul > li > h4 > a:hover { color: #0F53D3; }
.onSiteMapLists > ul > li > ul { margin-top: 18px; }
.onSiteMapLists > ul > li > ul > li > h5 { margin-bottom: 8px; }
.onSiteMapLists > ul > li > ul > li:last-child > h5 { margin-bottom: 0; }
.onSiteMapLists > ul > li > ul > li > h5 > a { color: #464C53; font-size: 15px; line-height: 1.5; font-weight: 400; position: relative; padding-left: 9px; transition: 0.3s; display: flex; align-items: center;}
.onSiteMapLists > ul > li > ul > li > h5 > a:before { content: ""; width: 3px; height: 3px; position: absolute; border-radius: 50%; background-color: #666666; left: 0; top: 50%; transform: translateY(-50%); transition: none; }
.onSiteMapLists > ul > li > ul > li > h5 > a:hover { text-shadow: 0 0 .65px #0F53D3, 0 0 .65px #0F53D3; padding-left: 22px; color: #0F53D3; }
.onSiteMapLists > ul > li > ul > li > h5 > a:hover:before { width: 18px; height: 18px; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/template/template2/assets/img/krds/ico_more.svg); mask-image: url(/template/template2/assets/img/krds/ico_more.svg); background-color: #0F53D3; transition: 0.3s; }
.onSiteMapLists > ul > li i.svg-icon {background-color: #777; width: 15px; height: 15px; display: inline-block; margin-left: 4px;}

/* INT - 과학원소개 */
/* 국립환경과학원 연대기 */
.onHistoryLists { display: flex; flex-wrap: wrap; }
.onHistoryLists > li {width: 50%;padding: 46px 40px 46px;box-sizing: border-box;height: 528px;position: relative;display: flex;flex-direction: column;color: #464C53;font-weight: 700;justify-content: space-between;}
.onHistoryLists > li:first-child, .onHistoryLists > li:last-child { background: #F5F7FD; }
.onHistoryLists > li .year { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.onHistoryLists > li .year span { background: #0F53D3; color: #F3F3F3; border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.onHistoryLists > li .title { font-size: 24px; font-weight: 700; }
.onHistoryLists > li .subTit { margin-top: 32px; font-size: 17px; font-weight: 700; }
.onHistoryLists > li > div > span {margin-top: 32px;display: block;font-weight: 400;font-size: 15px;padding-right: 50px;}
.onHistoryLists > li .subTit + span { margin-top: 12px; }
.onHistoryLists > li > img { max-width: fit-content; margin-left: auto; }

.historyYearContents > div { display: flex; padding-left: 110px; position: relative; } 
.historyYearContents ul.yearBtn { display: flex; flex-direction: column; align-items: flex-end; position: absolute; left: 55px; top: -4px; transition: 0.3s; } 
.historyYearContents ul.yearBtn > li { width: 50px; text-align: right; height: 36px; display: flex; align-items: center; padding-bottom: 10px; justify-content: flex-end; } 
.historyYearContents ul.yearBtn > li:first-child { margin-top: -8px; } 
.historyYearContents ul.yearBtn > li > button { color: #B3B3B3; font-size: 19px; font-weight: 700; transition: 0.3s; } 
.historyYearContents ul.yearBtn > li.on > button { color: #0F53D3; font-size: 24px; } 
.historyYearContents .lineBar { width: 1px; background: #E4E9F2; margin-left: 60px; position: relative; overflow: hidden; } 
.historyYearContents .lineBar > p{ width: 100%; background: #0F53D3; transition: 0.3s; }
.historyYearContents ul.yearContents {position: relative;margin-left: 60px;} 
.historyYearContents ul.yearContents > li {padding-bottom: 60px;position: relative; padding-right: 100px;} 
.historyYearContents ul.yearContents > li:before {content:"";position: absolute;width: 1px;transition: 0.3s;top: 5px;left: -1px;background-color: #E4E9F2;height: 100%;}
.historyYearContents ul.yearContents > li:after  {content:"";position: absolute;width: 1px;transition: 0.3s;top: 5px;left: -1px;background-color: #0F53D3;height: 0;}
.historyYearContents ul.yearContents > li.on:after, .historyYearContents ul.yearContents > li.past:after  {height: 100%;}
.historyYearContents ul.yearContents > li > div {display: flex;align-items: center;color: #464C53;margin-bottom: 18px;position: relative;padding-left: 60px;} 
.historyYearContents ul.yearContents > li > div:first-child:before {content: "";position: absolute;background: #E4E9F2;width: 9px;height: 9px;border-radius: 50%;left: -5px;top: 5px;/* transform: translateY(-50%); */z-index: 50;transition: 0.3s;} 
.historyYearContents ul.yearContents > li > div:first-child:after {content: "";position: absolute;background: transparent;width: 17px;height: 17px;border-radius: 50%;left: -9px;top: 1px;/* transform: translateY(-50%); */z-index: 49;transition: 0.3s;} 
.historyYearContents ul.yearContents > li.on > div:first-child:before,
.historyYearContents ul.yearContents > li.past > div:first-child:before { background: #0F53D3; } 
.historyYearContents ul.yearContents > li.on > div:first-child:after { background: #E4E9F2; } 
.historyYearContents ul.yearContents > li > div:last-child { margin-bottom: 10px;}
.historyYearContents ul.yearContents > li > div > p.eventDate { font-size: 17px; font-weight: 700; margin-right: 35px; width: 45px; } 
.historyYearContents ul.yearContents > li > div > p.eventInfo { font-size: 16px; } 
.historyYearContents > div {display: none;}
.historyYearContents > div.on {display: flex;}

.swiper-button-prev.defaultStyle,
.swiper-button-next.defaultStyle {border: 1px solid #CDD1D5;background: #fff;border-radius: 50%;width: 32px;height: 32px;color: #33363D;top: 50%;transform: translateY(-50%);/* z-index: 10; */margin: 0;}
.swiper-button-prev.defaultStyle:after,
.swiper-button-next.defaultStyle:after {display: none;}
.swiper-button-prev.defaultStyle.swiper-button-disabled,
.swiper-button-next.defaultStyle.swiper-button-disabled {display: none;}
.swiper-button-prev.alwaysShow.swiper-button-disabled,
.swiper-button-next.alwaysShow.swiper-button-disabled {display: block;}
.swiper-button-prev.defaultStyle.shadow,
.swiper-button-next.defaultStyle.shadow { border: none; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15); }


/* 예산현황 */
.costChartImgBox {display: flex; column-gap: 34px; margin-bottom: 65px;}
.costChartImgBox > div {border: 1px solid #DBDBDB; border-radius: 10px; width: 50%; padding: 30px; box-sizing: border-box;} 
.costChartImgBox > div .onT3 {margin-bottom: 0;}
.costChartImgBox > div p {font-size: 15px; color: #49454F; line-height: 23px; margin-bottom: 44px;}
    .costChartImg {overflow-x: auto;}
    .costChartImg > img {width: 100%; min-width: 320px;}

.onConHead_left .costUnit {margin-left: 10px; color: #49454F;}

.allCostListWrap {overflow-x: auto;}  
.allCostList {display: flex; border: 1px solid #DBDBDB; border-radius: 10px; overflow: hidden; min-width: 450px;}
.allCostList > li {width: 20%; text-align: center; position: relative;}
.allCostList > li::before {content: ""; display: block; width: 0; height: calc(100% - 24px); border-right: 1px dashed rgba(0, 0, 0, 0.2); position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.allCostList > li:last-child::before {display: none;}
    .allCostYear {height: 66px; background: #F5F7FD; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 16px; color: #1E2124; line-height: 150%; font-weight: 500;}
    .allCostYear > span {font-size: 14px; color: #717B90; font-weight: 400;}
    .allCostNum {height: 76px; display: flex; justify-content: center; align-items: center; font-size: 19px; font-weight: 700; color: #464C53;}
        .triangleIconL {display: inline-block; width: 13px; height: 13px; margin-right: 7px;}
        .triangleIconL > img {vertical-align: 9px;}
        .triangleIconS {display: inline-block; width: 11px; height: 11px; margin-right: 7px;}
        .triangleIconS > img {width: 11px; vertical-align: 1px;}
  
.krds-table-wrap .tbl.data thead .twoLineTitle > p {font-size: 14px; color: #131416; font-weight: 400;}


/* 주요업무계획 */
.yearMainBusiness {}
.yearMainBusiness button {margin-left:10px; height: 47px;}
    .yearMainBusinessL {float:left; width:300px; margin-bottom:28px; display:inline-block;}
    .yearMainBusinessL .selectric {background-color:#fff; color:#000; border:1px solid #E1E1E1;}
    .yearMainBusinessL .selectric .label {font-size:20px; color:#000;}
    .yearMainBusinessL .selectric .button {font-family: 'wvIcon' !important; background-color:#272787; color:#fff; width:46px; height:46px;}
    .yearMainBusinessL .selectric .button:after {border-top-color:#fff;}
    .yearMainBusinessL .selectric-items ul, .yearMainBusiness .selectric-items li {line-height:28px; font-size:16px;}
    .yearMainBusinessL .selectric .button:after { color:#fff; top:0; width:45px; height:45px; line-height:45px;}
    .yearMainBusinessL select {border:1px solid #E1E1E1; font-size:20px; color:#000; padding:8px 12px; height:46px; background: url('/NIER/assets/kor/images/common/selectArrow4.png') no-repeat right center; min-width:300px; margin:0;}
    .yearMainBusinessL select option {font-size:16px;}

.yearMainBusinessImgBox {clear:both; text-align:center; display:none; position:relative; margin-bottom:40px;overflow: hidden;}
.yearMainBusinessImgBox.on {display:block;}
    .conImgBox > div {display:none;}
    .conImgBox > div.on {display:block;}
    .conImgBox area {cursor:pointer;}
    .conImgBox2018 > div {display:none;}
    .conImgBox2018 > div.on {display:block;}
    .conMenUL2018 {position:absolute; top: 293px; left: 14px;}
    .conMenUL2018 li {margin-bottom:6px;}
.yearMBIn {margin:30px auto; border: 1px solid #dbdbdb; overflow-x: scroll;}
.yearImgIn {margin:30px auto;}
.downloadBox {margin:20px 0;}
.explanIn {width:740px; background-color:#e8e8ea; margin:30px auto; padding-bottom:17px;}
.conToplayout {padding-top:32px;  height:202px; position:relative; width:100%; margin:0 auto;}
#contents .conToplayout h3 {padding-left:0; text-align:center; background:none;}
.conMenuUL {position:absolute; top:130px; left:17px;}
.conMenuUL > li {float:left; margin-left:3px;}
.conMenuUL > li:first-child {margin-left:0px;}
.conMenuUL > li > a {display:block;}

/* 국립환경과학원 MI */
.onImgBox.mi {min-height: 260px; display: flex; justify-content: center; align-items: center; position: relative; padding: 5%;}
.onImgBox.mi > img {min-width: auto;}
    .mi_download {position: absolute; top: 20px; right: 20px;}

/* 조직안내 About NIER >Organization */
.organiChart {overflow:hidden; margin-bottom:80px;}
.organiChart {overflow:hidden; margin-bottom:80px;}
.orginBox.blue { max-width: 280px; color:#fff; font-size:24px; font-weight: 700; text-align:center; padding: 19px 0 19px 20px; margin: 10px auto 30px; position:relative; border-radius: 59px; background: #0F53D3 url(/template/template2/assets/img/sub/directorIcon.png) no-repeat 75px center;}
.orginBox.blue::after {content: ""; z-index: -1; width: calc(100% + 14px); height: calc(100% + 14px); position: absolute; background: #E7EEFB; border-radius: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* .orginBox.blue span {padding-left: 25px;}*/
.orginBox:before {width:1px; height:120px; background-color:#D7D7D7; position:absolute; left:50%; display:block; content:'';z-index:-1;}
/* 
.orginBox.blue { max-width:327px; color:#fff; background-color:#2D3B9C; font-size:26px; text-align:center; padding:18px 0; margin:0 auto 30px; font-weight:300; position:relative;}*/
.orginBox:before {width:1px; height:124px; background-color:#D7D7D7; position:absolute; left:50%; display:block; content:'';z-index:-1;}

.orginLineLayout {border: 1px solid #D7D7D7; border-bottom:0; }
	.olineLIn {display: flex; padding:38px 20px 0 20px; overflow:hidden; margin: 0 -9px 0 -9px; position: relative;}
	.olineLIn:before {display:block; content:''; top: 37px; left: 50%; transform: translateX(-50%); position: absolute; height:1px; background-color:#D7D7D7; width: 64%; margin:0 auto; }
	.olineLIn > li{display: flex; justify-content: center; width:33.3%; text-align:center; flex: 1 0 auto;}
		.olineBox {margin:0 13px; max-width:280px; }
		.olineBox > ul {margin: 14px auto 0; border: 1px solid #DBDBDB; border-radius: 10px; box-sizing: border-box;}
			.divisionBox {background: #0078C3; border-radius: 0px 10px 10px 10px; text-align:center; display:block; padding:13px 0; color:#fff; font-size:17px; position:relative; margin-top:30px; transition:all .3s; }
			.divisionBox:before {width:1px; height:54px; position:absolute; left:50%; display:block; content:''; background-color:#D7D7D7; top:-30px; z-index:-1;}
			.divisionSection {font-size:16px; border-top: 1px dashed #D7D7D7; margin:0 3px; text-align: center;}
			.divisionSection:first-child {border:none;}
			.divisionSection {display:block; padding:20px 10px; transition:all .3s; font-size:15px;}
			
	.seconolineLIn {margin: 0 155px;}
	.seconolineLIn:after {display:block; content:''; clear:both;}
	.seconolineLIn > li {float:left; width:50%; display: flex; justify-content: center;}
	
	.seconolineLIn .divisionBox:before {height: 650px; top:-615px;}
	.seconolineLIn li:first-child .divisionBox:before {left:50%;}
			
.orginNolineBox {}
.orginNolineBox:after {display:block; content:''; clear:both;}			
.noLineIn {float:left;width: 50%; position:relative;}
.noLineIn.left:before {display:block; content:''; width:1px; height:100%; border-left:1px solid #D7D7D7; position:absolute; left:0; bottom:25px}
.noLineIn.right:before {display:block; content:'';width:1px; height:100%; border-right:1px solid #D7D7D7; position:absolute; right:0; bottom:25px}
.noLineIn li {margin-left:20px; position:relative;}
.noLineIn li:before {display:block; content:''; width:1px ; height:100px; background-color:#D7D7D7;position:absolute;}		
.noLineIn.right li{width: 100%; float: right; margin-left:118px; margin-right:20px; }
.noLineIn li {transition:all .3s; position:relative; max-width:349px; border:1px solid #178FFF; color:#0078C3; border-radius: 0 10px 10px 10px; background-color:#fff; display:block; padding:13px 0; text-align:center;margin-top:20px; font-size:18px;}

.noLineIn li:first-child a{margin-top:70px;}
.noLineIn li:before {z-index:-1; width:24px; height:1px; background-color:#D7D7D7; position:absolute; display:block; content:'';}

.noLineIn.left li:before {left:-21px; top:50%;}
.noLineIn.right li:before {right:-21px; top:50%;}


 /*About NIER manPower*/
 .conDan2 .conDanBox {width:50%; float:left;}
.manpower .conBox_white {position:relative;}
.manpower .conBox_white .imgBox {position:absolute; left:0; top:0;}
.manpower .conBox_white .textBox {margin-left: 480px;}
.manpower .conBox_white .textBox .conT2 {font-size: 24px; font-weight: 500;}
.manpower .conBox_white .textBox .table_normal {border-top:0; border-bottom:0; font-size:15px;}
.manpower .conBox_white .textBox .table_normal tbody tr td {border-top: 1px dashed #dadada}
.manpower .conBox_white .textBox .table_normal tbody tr:first-child td {border-top:0;}
.manpower .conBox_white .textBox .table_normal tbody tr td.last {padding-bottom:30px;}
.manpower .conBox_white .textBox .table_normal tbody tr td.num {font-size:20px;}
.manpower .conBox_white .textBox .table_normal tbody tr td.total, .manpower .conBox_white .textBox .table_normal tbody tr td.totalnum{font-weight:400;border-top: 1px dashed #dadada;}
.manpower .conBox_white .textBox .table_normal tbody tr td.totalnum div{color:#2D3B9C; font-weight:400; }

.budgeLayout {padding:0; }
.budgeLayout .conT3 {position:relative; text-align: left;}
.budgeLayout .conT3 span {font-size:15px; color:#666;position:absolute; right:0; font-weight:400;}
.budgeLayout .table_normal tbody tr td {text-align:center; }
.budgeLayout .table_normal tbody tr th {text-align:left; padding:10px 20px; font-weight:400;}
.budgeLayout .table_normal tbody tr th.txtR {text-align:right; font-weight:500;}
.budgeLayout .table_normal tbody tr th.innerM {padding:10px 30px; color:#666;}
    .budgeBox {padding:44px; border:1px solid #D7D7D7; border-left:none; text-align: center;}
    .conDanBox:first-child .budgeBox {border-left: 1px solid  #D7D7D7;}

.onAccordionHeader {padding: 0px;position:relative; font-size:16px; border-top:1px solid #D7D7D7; transition: all .3s; color:#666; margin:0 ; font-weight:400; width: 100%; display: block; box-sizing: border-box;}
.onAccordionHeader .txt {position: relative; width:100%; display: inline-block;}

/* 원장인사말 */
.onHelloMessage { position: relative; margin-bottom: 40px; }
.onHelloMessage > p { color: #090909; font-size: 40px; font-weight: 700; }
.onHelloMessage > p > span { display: block; line-height: 1.5; }
.onHelloMessage > p > span > strong { color: #0F53D3; font-weight: 700; }
.onHelloMessage > div { position: relative; overflow: hidden; }
.onHelloMessage > div .director { margin-left: auto; display: block; margin-right: 217px; position: relative; z-index: 5;}
.onHelloMessage > div .portrait { position: absolute; bottom: 0; width: 100%; height: 65px; background: #0F53D3; z-index: -1; border-radius: 0 20px 20px 20px; display: flex; align-items: center; justify-content: flex-end; padding-right: 40px; box-sizing: border-box; }
.onHelloMessage > div > span { border-radius: 50%; background: #C3D8FF; opacity: 0.3; position: absolute; }
.onHelloMessage > div > span.circleObj01 { width: 472px; height: 472px; right: 86px; top: 40px; z-index: -2; }
.onHelloMessage > div > span.circleObj02 { width: 145px; height: 145px; top: 36px; right: 60px; }
.directorList.environment > li {padding: 30px 40px 32px 38px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: space-between;}
.directorList.environment > li .blueTitleBadge {border: 1px solid #007AFF; color: #007AFF; margin-bottom: 10px; background: none; font-size: 15px; padding: 2px 8px; min-width: auto; font-weight: 400; display: inline-block; width: fit-content;}
.directorList.environment > li strong {display: block; font-size: 24px; color: #464C53; font-weight: 700; line-height: 150%; margin-bottom: 12px;}
.directorList.environment > li p {font-size: 17px; color: #464C53; line-height: 150%; width: 70%; margin-bottom: 16px;}
.directorList.environment > li a {width: fit-content;}
    .envOraganImg {width: 76px; height: 76px; position: absolute; right: 40px; bottom: 32px;}

/* RAW - 법령정보 */
/* 분석기관지정 */
.onTableBox {margin-bottom: 40px;}

.organList > li {display: none;}
.organList > li.on {display: block;}

.organFileList {margin: -5px 0 40px; background: #F7F8F9; border-radius: 5px; border: 1px solid #D7D7D7; padding: 25px 30px; display: flex; flex-wrap: wrap; column-gap: 4%; row-gap: 20px;}
.organFileList > li {width: 48%; display: flex; align-items: flex-start; justify-content: space-between;}
.organFileList > li p {font-size: 17px; color: #464C53; display: flex; width: 70%;}
.organFileList > li p > span {display: inline-block; width: 20px; flex-shrink: 0;}

/* 통합검색  */
.onTotalSearchFilter .tab.full.separated li.on .btn-tab {background: #256EF4; color: #fff; border: 1px solid #256EF4 !important;}
.onTotalSearchFilter .tab.full.separated .dataSelect > li.on > a {background: #ECF2FE; border-color: #256EF4; color: #0B50D0;}

.lnb-btn .selectNum {background: #256EF4; border-radius: 15px; color: #fff; font-size: 15px; display: inline-block; width: 26px; text-align: center; font-weight: 400; height: 20px; line-height: 20px; margin-left: -2px;}

.tab.full.separated > ul + .dateInputGroup {margin-top: 24px;}
.dateInputGroup {display: flex; column-gap: 16px;}
.dateInputGroup > .onField {width: 100%; min-width: 0; row-gap: 8px; position: relative;}
.dateInputGroup > .onField:first-of-type::after {content: "-"; display: inline-block; position: absolute; right: -11px; bottom: 13px;}
.dateInputGroup > .onField span {font-size: 15px;}

.filterBtnGroup {margin-top: 24px;}

.applyFilterBox {display: flex; align-items: center; margin-bottom: 20px; flex-wrap: nowrap; width: 100%;}
    .applyFilterTitle > span {font-size: 17px; font-weight: 700; margin-right: 16px; flex-shrink: 0;}
    .applyFilterTitle > span strong {color: #0B50D0; margin-left: 6px;}
.applyFilterList {display: flex; column-gap: 8px; flex-wrap: nowrap; overflow-x: auto; min-width: fit-content;}
.applyFilterList li {flex-shrink: 0;}
.applyFilterList button,
.applyFilterBox .recycle {position: relative; transition: all 0.3s; width: fit-content; min-width: 40px; height: 40px; border: 1px solid #CDD1D5; border-radius: 50px; font-size: 17px; padding: 0px 30px 0 12px; box-sizing: border-box;}
.applyFilterList button::after {content: ""; position: absolute; top: 0; bottom: 0; margin: auto 0; right: 10px; width: 16px; height: 16px; background: url(/template/template2/assets/img/krds/ico_delete_fill.svg) no-repeat center center / contain;}
.applyFilterList button:hover,
.applyFilterBox .recycle:hover {border-color: #0B50D0; color: #0B50D0;}
.applyFilterBox .recycle {padding: 0; margin-right: 8px;}
.applyFilterBox .recycle::after {display: none;}
.applyFilterBox .recycle > i {vertical-align: -1px;}

.onTotalSearchBar {position: relative;box-sizing: border-box;padding: 70px 0 94px;display: flex;gap: 160px; margin-bottom: 50px; align-items: center;}
    .onTotalSearchBar:after { content: ""; background: #FBFDFF; background: linear-gradient(180deg, rgba(251, 253, 255, 1) 0%, rgba(235, 243, 255, 1) 98%); content: ""; position: absolute; width: 100vw; height: 100%; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; }
    .onTotalSearchBar > h2 { color: #1e1e1e; font-size: 40px;}
    .onTotalSearchBar > div {width: 100%;}
    .onTotalSearchBar .sch-input {width: 100%; max-width: 792px;}
    .onTotalSearchBar .sch-input .krds-input.xlarge::placeholder {font-size: 24px;}
    /* .onTotalSearchBar .detailSearchBtn {margin-top: 17px; color: #5a5a5a;} */

    .popularSearchLists { margin-top: 24px; padding-left: 12px; }
    .popularSearchLists li {justify-content: start; white-space: normal;}
.onFound {background:#d8e5fd;} 


/* 웹진YES, 홍보자료 (갤러리형 리스트) */
.galleryThumb { border: 1px solid #dadada; max-height: 187px; width: 100%; height: 100%; box-sizing: border-box;}
.galleryThumb img {width: 100%; height: 100%; object-fit: contain;} 
.galleryThumb.noImage img {object-fit: cover;}

/* RES - 연구분야 */
.onT2.resTitle {margin-bottom: 30px; font-size: 30px; color: #0f53d3;}

.departImg {display: flex; gap: 38px; margin-bottom: 35px;}
.departImg > div {border-radius: 10px; overflow: hidden; width: calc((100% - 38px) / 2);}
.departImg > div > img {width: 100%;}

.resKeyword {background: #F7F8F9; border-radius: 5px; border: 1px solid #D7D7D7; padding: 20px 24px; box-sizing: border-box; display: flex; column-gap: 15px; flex-wrap: wrap;}
.resKeyword > li {font-size: 15px; line-height: 150%; color: #464C53;}

.resKeyword + .onList {margin-top: 30px;}

/* 연구결과 */
.onAccordion > ul {border-bottom: 1px solid #CDD1D5;}
.onAccordionHeader {background: #fff;}
.onAccordionItem {border: none; background: none; margin-bottom: 0;}
.onAccordionItem .accoTableTitle {transition: all 0.3s; padding: 20px 30px; margin-bottom: 0; background: #fff; height: auto; display: flex; column-gap: 15px; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box;}
    .scieReportImg {flex: 0 0 120px;}
    .scieReportImg > img {width: 100%; height: 100%; object-fit: contain;}
    .scieReportTitle {display: flex; align-items: stretch; column-gap: 30px; }
    .scieReportTxt {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
    .scieReportTxt div {display: flex; flex-direction: column; justify-content: space-between;}
    .scieReportTxt p {font-size: 19px; font-weight: 700; color: #1E1E1E; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .scieReportTxt span {color: #464C53; font-size: 17px; display: block; line-height: 26px; margin-bottom: 20px;}
    .scieBtn {box-sizing: border-box;}
    .scieBtn > i {margin-left: 5px; font-size: 11px;}

.scieReport .accoCon {padding: 0px 30px 50px; background: #F8F9FB; box-sizing: border-box; line-height: 150%; font-size: 17px; color: #131416;}
.scieReport .accoCon p {margin-top:0;}
.scieReport .accoCon img {width:100%;}
.scieReport .accoCon td {padding:0 0 10px 0; font-size:16px; vertical-align: top; font-weight:300; line-height:26px;}
.scieReport .accoCon td.txt_black {min-width:100px; font-weight:400;}
.scieReport .accoCon p strong {color:#000; font-weight:400;}
/* .accoCon .conP > div {margin-top:10px}
.accoCon .conP > div:first-child {margin-top:0;}
.accoCon .conBox {background-color:#F8F9FB; overflow:hidden;}
.accoCon .onDotList {display: flex; flex-wrap: wrap;}
.accoCon .onDotList li {flex: 0 0 50%; box-sizing: border-box; color: #464C53;}
    .scieBold {font-weight: 700; color: #1E1E1E; margin-bottom: 16px;}
    .scieP {margin-bottom: 16px;}
    .scieP + .indentP {padding-left: 10px;} */
.arrowBtnBox{color:#000; font-size:18px; display:block; transition:all .3s; transform: rotate(90deg);}

.onAccordionItem.on .accoTableTitle {background: #F8F9FB; color:#010000;}
.onAccordionItem.on .accoTableTitle a, .accodian li .accoTitle.on .accoTableTitle .arrowBtnBox a {color:#000;}
.onAccordionItem.on .accoTableTitle .arrowBtnBox {transform:rotate(-90deg); }
.onAccordionItem.on .accoTableTitle .arrowBtnBox a {color:#000; }    


/* 개인정보처리방침(AS_IS 스타일 코드 그대로) */
.txt_black {color: #000;}
.table_normal , .table_t1{width: 100%; border-top: 2px solid #000; border-bottom: 1px solid #d7d7d7; border-spacing:0px;}
.table_normal thead tr th {position:relative; background-color: #f7f7f7; border-top: 1px solid #dadada;color: #333; padding: 13px 0px; text-align: center; font-size:14px}
.table_normal thead tr th:before {content:""; height:23px; position:absolute; left:0px; border-left:1px dotted #D7D7D7;}
.table_normal thead tr th:first-child::before {border:0px;} 
.table_normal tfoot tr th {background-color: #f7f7f7; border-top: 1px solid #dadada; color: #333; padding: 10px 0px; text-align: center; font-size:13px}
.table_normal tbody tr th {background-color: #f7f7f7; border-top: 1px solid #dadada;color: #333; padding: 10px 0px; text-align: center; font-size:14px}
.table_normal tbody tr td {color: #666; border-top: 1px solid #dadada; padding: 13px 5px; transition: 0.3s all; font-size:15px; background-color:#fff;}
.table_normal tbody tr td.subject a{display:block; height:20px; overflow:hidden;}
.table_normal tbody tr td.subject .notification {display:block; height:20px; overflow:hidden;}
.table_normal tbody tr td.txt_red {color: #f62a09;}
.table_normal tbody tr td.txt_blue {color: #2D3B9C;}
.table_normal tbody tr td.txt_purple {color: #d93289;}
.table_normal tbody tr td.txt_yellow {color: #fca532;}
.table_normal tbody tr td.txt_red {color: #f62a09;}
.table_normal tbody tr td.txt_black {color: #000;}
.table_normal tbody tr td.txt_white {color: #fff;}
.table_normal tbody tr td.ac {text-align:center;}
.table_normal tbody tr td a {color:#000;}
.table_normal tbody tr td a:hover {color: #2D3B9C}
.table_normal tbody tr td.titlEellipsis a{ text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.table_normal tbody tr td.stxt {font-size:14px;}
.table_normal tbody tr td.sstxt {font-size:13px;}
.table_normal .icon-files-empty:hover {color:#324DAE;}
.table_normal .icon-files-empty {font-size:0px;}
.table_normal .icon-files-empty:before {font-size: 15px;}
    .tableHover:hover td {background-color: #dfecf8;}
.table_line {border-left:0; border-right:1px solid #dadada}
.table_line th, .table_line td {border-left: 1px solid #dadada;}
    .line0 {border-left: 0px !important}
    .line_padding0 {padding: 0 !important; border: 0 !important;}

.bu_l_blue {display: inline-block; padding: 0 6px; font-size: 15px; font-weight: 400; line-height: 30px; text-align: center; line-height: 30px; border: 1px solid #1B4DC3; border-radius: 7px; box-sizing: border-box; color: #003CC8; transition: all 0.3s;}
.bu_l_blue:hover {color: #fff; background-color: #003CC8;}
.personalInfoTxt .conBox {margin-bottom:24px; background-color:#F8F8F9; padding:20px;}
.personalInfoTxt {font-size:16px; color: #666;}
.personalInfoTxt .conT4 {color:#666;  font-size:18px; font-weight: 500;}
.personalInfoTxt .conT4.txt_black {color:#000}
.personalInfoTxt .conBox .conT4 {font-size:16px; color:#666;line-height:24px;}
.personalInfoTxt .conP {line-height:24px; }
.personalInfoTxt .txtBox {margin:0 0 12px 0; color:#666;}
.personalInfoTxt .bu_l_blue {margin-left:10px;}
.personalInfoTxt .conT3 {margin:0 0 12px 0;} 
.personalInfoTxt .conT4 {margin:0 0 8px 0;}

.table_normal {border-top:1px solid #000; width: 100%; border-spacing: 0px;}
.table_normal thead tr th {padding:15px 0px; font-size:15px; font-weight:500; color:#000; background-color:#F8F8F8;}
.table_normal thead tr th:before {display:none;}
.table_normal tbody tr td {padding:15px 5px; font-size:16px; font-weight:400; color:#555555;}
.table_normal tbody tr td.subject a {height:21px;}
.table_normal tbody tr td.subject a > .icon_new {vertical-align:text-top;}
.table_normal tbody tr td pre {font-family: 'Noto Sans KR', sans-serif; white-space: pre-wrap; margin: 0;}

.table_normal tbody tr.notice td {font-weight: 500; color: #000;}
.table_normal tbody tr.notice td a {font-weight:500; color:#000;}
.table_normal tbody tr.notice td span {font-weight: 500; color: #000;}
.table_normal tbody tr.notice i {font-size:19px; font-weight:bold;}

.tableInfo { padding: 20px 0 0; }
.text_red { color: #D80000; }
.tableInfo .text_red { color: #D80000 }
.tableInfo .text_blue { color: #092aa2 }
.newTableTitle { margin: 20px 0 12px; }
.personalGrayBox { background-color: #F8F8F8; border: 1px solid #dadada; padding: 16px; box-sizing: border-box; margin-bottom: 12px; }
.personalGrayBox>.txtBox:last-of-type { margin-bottom: 0; }
.pastPolicyList li { margin-bottom: 6px; color: #666;}
.pastPolicyList li:last-of-type { margin-bottom: 0; }

.personalInfoTxt .personal_table {margin-bottom: 66px;}
.personalInfoTxt .personal_table tbody tr .tableTitle {font-weight: 500; color: #000; font-size: 15px;}
.personalInfoTxt .personal_table tbody tr .tableInfo {line-height: 21px; font-size: 14px; color: #000;}
.personalInfoTxt .personal_table tbody tr .tablePlus {font-size: 13px; padding-top: 8px;}
.personalInfoTxt .personal_table tbody tr td {text-align: center; height: 265px; padding: 0;}
.personalInfoTxt .personal_table tbody tr td p{margin: 0;}
.personalInfoTxt .personal_table tbody tr td img {display: block; margin: 0 auto; margin-top: 16px;}
.personalInfoTxt .personal_table tbody tr td > div {margin-top: 20px;}

.personal_table .cnt_list {width: 95%; margin: 0 auto; padding: 27px 0;}
.personal_table .cnt_list::after {content: ""; display: block; clear: both;}
.personal_table .cnt_list > li {width: 50%; float: left; text-align: left; padding: 10px 5px; position: relative; box-sizing: border-box;}
.personal_table .cnt_list li a{color: #444; font-weight: 400; box-sizing: border-box; padding-left: 30px; display: block;} 
.personal_table .cnt_list li:first-child a{ background: url(/template/template2/assets/img/privacy/picto_privacy_sm_01.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(2) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_02.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(3) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_03.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(4) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_04.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(5) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_05.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(6) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_06.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(7) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_07.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(8) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_08.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(9) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_09.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(10) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_10.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(11) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_11.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(12) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_12.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(13) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_13.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(14) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_14.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(15) a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_15.png)no-repeat 0 0;}
.personal_table .cnt_list li:last-child a{background: url(/template/template2/assets/img/privacy/picto_privacy_sm_16.png)no-repeat 0 0;}

.conP.privacy {margin-bottom: 30px;}
.conP.privacy .conT3 {margin: 0 0 10px 0; padding-left: 40px; position: relative; font-size: 20px; font-weight: 500; color: #000; }
.conP.privacy .conT3::before {content: ""; display: inline-block; width: 32px; height: 36px; vertical-align: middle; position: absolute; left: 0; top: -4px;}
.conP.privacy.p01 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_01.png)no-repeat 0 0;}
.conP.privacy.p02 .conT3:before{background: url(/template/template2/assets/img/privacy/picto_privacy_md_02.png)no-repeat 0 0;}
.conP.privacy.p03 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_03.png)no-repeat 0 0;}  
.conP.privacy.p04 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_04.png)no-repeat 0 0;}  
.conP.privacy.p05 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_05.png)no-repeat 0 0;}    
.conP.privacy.p06 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_06.png)no-repeat 0 0;}  
.conP.privacy.p07 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_07.png)no-repeat 0 0;}    
.conP.privacy.p08 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_08.png)no-repeat 0 0;}   
.conP.privacy.p09 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_09.png)no-repeat 0 0;} 
.conP.privacy.p10 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_10.png)no-repeat 0 0;} 
.conP.privacy.p11 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_11.png)no-repeat 0 0;} 
.conP.privacy.p12 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_12.png)no-repeat 0 0;}
.conP.privacy.p13 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_13.png)no-repeat 0 0;}
.conP.privacy.p14 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_14.png)no-repeat 0 0;}
.conP.privacy.p15 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_15.png)no-repeat 0 0;}
.conP.privacy.p16 .conT3:before {background: url(/template/template2/assets/img/privacy/picto_privacy_md_16.png)no-repeat 0 0;} 
    
.onPrivacyPopup {display: none; position: fixed; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; z-index: 9999; top: 0; left: 0;} 
.onPrivacyPopup.on {display: block;}
    .privacyPopupIn {width: 80%; max-width: 600px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 16px 20px 24px 20px; border-radius: 8px;}
        .privacyPopupHead {text-align: right; margin-bottom: 10px;}
        .privacyPopupHead span {float: left; font-size: 18px; color: #000; font-weight: 500;}
        .privacyPopupHead > a > i {font-size: 24px;}
        .privacyPopupCon .table_normal tbody tr td img {width: 100%;}

/* etc. Responsive */
@media (max-width: 1280px) and (min-width: 769px) {
    /* 1. Layout ----------------------------------------------------------------------------------- */
    /* 1.1. Header --------------------------------------------------------------------------------- */

    /* 1.3. Sub --------------------------------------------------------------------------------- */
   .onSubLayout {padding: 0 15px;}

    /* 2. Main ------------------------------------------------------------------------------------- */
    .onMainBanner {padding: 0 15px;}
    .onMainBannerTop {flex-direction: column; padding-top: 30px; gap:0px;}
    .onMainBannerTop > .mainBanner01.on img {transform: scale(0.8); pointer-events: none;}
    .onMainBannerTop > .mainBanner01.on .mainObg01 {left: 5px; bottom: 360px; width: 110px;}
    .onMainBannerTop > .mainBanner01.on .mainObg02 {left: 13px; bottom: 357px; width: 93px;}
    .onMainBannerTop > .mainBanner01.on .mainObg03 {left: -20px; bottom: 370px;}
    .onMainBannerTop > .mainBanner01.on .mainObgBg {left: 18px; bottom: 355px; width: 86px; height: 14px;}
    .onMainBannerTop > .mainBanner01.on .bubbles {bottom: 370px; left: -40px; transform: scale(0.8); pointer-events: none;}
    .onMainBannerTop > .mainBanner02.satellite .obgRing {opacity: 0.7;}
    .onMainBannerTop > .mainBanner03.mainObg01 {bottom: 480px; left: 62%;}
    .onMainBannerTop > .mainBanner03.mainObg02 {top: 5%;}
    .onMainBannerTop > .mainBanner03.mainObg03 {bottom: 400px; left: 70%;}
    .onMainBannerTop .waterBubble01, .waterBubble02, .waterBubble03 {display: none;}

    @keyframes flaskIn {
        0% {
            transform: rotate(20deg) translateX(-10px);
        }
        50% {
            transform: rotate(-20deg) translateX(10px);
        }
        100% {
            transform: rotate(20deg) translateX(-10px);
        }
    }

    @keyframes doong {
        0% {transform: translateY(0);}
        50% {transform: translateY(15px);}
        100% {transform: translateY(0);}
    }
    @keyframes hide {
        0% {opacity: 0;}
        90% {opacity: 1;}
        100% {opacity: 1;}
    }

    @keyframes cloud01 { 
        0% { transform: translateX(0px); opacity: 0; } 
        10% { transform: translateX(0px); opacity: 1; } 
        70% { opacity: 1; }
        100% { transform: translateX(80px); opacity: 0; }  
    }
    @keyframes cloud02 { 
        0% { transform: translateX(0px); opacity: 0; } 
        10% { transform: translateX(0px); opacity: 1; } 
        90% { transform: translateX(-70px); opacity: 1; }
        100% { transform: translateX(-80px); opacity: 0; }  
    }

        .onMainBannerL {max-width: none; height: 470px;}
            .mainBannerTxt > h2 {font-size: 36px; line-height: 42px;}

        .onMainBannerR {max-width: none; margin: 40px 0 0 0; position: relative;}
            .onMainSns {position: absolute; right: 30px; top: -62px; margin: 0;}
            .onMainSns > p {display: none;}
            .issueR {width: 100%;}
    
            .mainBtmIcon {width: 100%; column-gap: 25px; margin: 0 0 40px 0;}
            .mainBtmIcon > li {width: calc((100% - 75px) / 4);}
            .mainBtmEarth {width: 100%; margin: 0;}
                .earthImg {right: 20px; transform: scale(0.6); top: 85px;}
            .mainReportL {width: 100%; margin: 0 0 40px 0;}
                .mainReportBox {height: 185px; display: flex; flex-direction: column;}
                .mainReportBox .mainReportTxt {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
                .mainReportBox .mainReportBtn {flex: 1 0 auto;}
            .mainReportR {width: 100%; margin-left: 0;}

    .onMainBoardIn {flex-direction: column;}
        .mainBoardBox {width: 100%; max-width: none; margin-bottom: 40px;} 
        .mainDataBox {width: 100%; column-gap: 40px;}
            .promoDataList {min-width: 330px;}
            .dataBubble {max-width: 210px;}
        .mainAlarmZone {margin-left: 0}

    /* 4. Contents -------------------------------------------------------------------------------- */
    .onSubContentBox {width: 100%;}

    .onTotalSearchBar { flex-direction: column; gap: 20px; padding: 0 0 30px; }
    .onTotalSearchBar .sch-input {max-width: 100%;}

    /* sitemap - 브레드크럼 */
    .onUtilityIcon > button.printBtn {display: none;}

    /* SiteMapLists - 사이트맵 페이지 */
    .onSiteMapLists > ul > li {width: 25%;}

    /* 원장인사말 */
    .onHelloMessage > p {font-size: 30px; top: 0; bottom: auto;}
    .onHelloMessage > div .director {margin-top: 86px;}

    /* 생태관 소개 */
    .bigFont {font-size: 35px;}
    .ecologyLists > li > .top > p {font-size: 20px; padding: 0 20px;}
    .ecologyLists > li > .btm {min-height: 150px;padding: 20px;}
    .ecologyLists > li > .btm p {font-size: 15px;}

    /* 전시안내 */
    .recommendedRoute {padding: 50px 70px 56px;}
    .routeGuide > p {font-size:16px;}
    .routeGuideLists > div {flex-wrap: wrap;}
    .routeArrow {flex-basis: 100%; transform: rotate(90deg);}


    /* INT - 과학원소개 */
    /* 조직안내 */
    .orginBox.blue {margin: 10px auto 30px;}
    
    .orginLineLayout {border:0px;}
	.olineLIn {padding:0px; margin-bottom: 30px;}
	.olineBox {max-width: none; margin: 0 13px;}
	.olineBox > ul {max-width: none;}
	.olineLIn:before {display:none;}
	.orginBox:before {display:none;}
	.divisionBox:before {display:none;}
	.divisionBox {margin-top:0px; font-size:15px; padding: 13px 10px;}
	.seconolineLIn {margin:0 0 30px;}
	.noLineIn li:before {display:none;}
	.noLineIn li a {margin:4px; max-width:auto; font-size:15px;}
	.noLineIn li a:before  {display:none;}
	.divisionSection {padding:10px 0px; font-size:13px;}
	.divisionSection a {font-size:13px;}
	.noLineIn li:first-child a {margin-top:20px;}
	.noLineIn li {margin:0px 5px 5px 0px; max-width: none; font-size: 15px;}
	.noLineIn.left:before {display:none;}
	.noLineIn.right li {margin:0px 0px 5px 5px;}
	.noLineIn.right:before {display:none;}
	.organiChart  {margin-bottom: 40px;}

    /* 국립환경과학원 연대기 */
    .onHistoryLists > li {height: auto; padding: 38px 32px 38px;}
    .onHistoryLists > li > div > span {padding-right: 0; margin-bottom: 15px;}
    .onHistoryLists > li .title {font-size: 22px;}

    /* RES - 연구분야 */
    /* 물환경연구부 */
    .departVisual {padding: 60px 6%; width: 98%;}
    .departCon {display: flex; width: 100%; justify-content: space-between; column-gap: 20px;}
    .departCon h2 {max-width: 500px; font-size: clamp(32px, 3vw, 40px)}
        .departSystem .swiper-slide {padding: 15px 24px 23px 24px;}
        .departSystemBtn > a {padding: 0 15px;}
        .departSystemBtn > .btnR .mobileHidden {display: none;}
    .departVisualImg {width: 95%; height: 360px; max-width: none; bottom: auto; top: 60%; right: -15px;}
    .departVisualImg div {transform: scale(0.9)}
        .departVisual03 {width: 18%;}
        .midText01 {left: 30%;}
    
    .departSystem {max-width: 345px;}

    .departmentIntroIcon { padding: 24px 20px; align-items: flex-start; row-gap: 16px; flex-wrap: wrap;}
    .departmentIntroIcon > li {justify-content: center; width: calc(100% / 3); flex-shrink: 0; padding: 0 4%; box-sizing: border-box; justify-content: center;}
    .departmentIntroIcon > li > div {margin-bottom: 12px;}
    .departmentIntroIcon > li > p {width: 70%; font-size: 15px;}

    .departReport {column-gap: 4%;}
    .departReport > li {width: calc(92% / 3);}

    .departReport.board > li {width: calc(96% / 2);}

    /* 연구결과 */
    .scieReportTxt p {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
    .scieReportTxt span {margin-bottom: 20px;}
        
    
    /* onRightStickyBar -------------------------------------------------------------------------------- */
    .onRightStickyBar { display: none; } 

    /* 개인정보처리방침 */
    .personalInfoTxt .personal_table tbody tr td { height: 290px; }
	.personalInfoTxt .personal_table tbody tr .tablePlus { padding: 8px; word-break: keep-all; }

    .tableWrap {width:100%; overflow-x:scroll; max-width:720px;}
    .tableWrap .table_normal {width:720px;}

     /* 환경데이터 */
    .bgEnv { height: 150px; padding-left: 35px; background-size: contain; background-position:bottom; margin-bottom: 40px;}
    .waterSwiper .sectionBox > p > span {font-size: 17px;}
    .waterChartPrimaryLists > li {min-width: 140px;}
    .waterChartPrimaryLists > li > .frontContent > p, 
    .waterChartPrimaryLists > li > .hoverContent > p {font-size: 15px;}
    .waterChartPrimaryLists > li > .hoverContent > span, 
    .waterChartPrimaryLists > li > .hoverContent > a {font-size: 14px;}
    .sectionBox + .onT2 {margin-top: 40px;}
    .sectionBox.main {padding: 30px;}
    .envDataLegend {left:50%; transform: translateX(-50%);}

    .dustMapLIn {width: 80px;}
    .dustMapName span {display: none;}
    .dustMapLWrapper {width: 220px; height: auto; margin-right: 20px;}
    .envDataMapRight h4 {font-size: 18px;}
    .envDataMapRight p {font-size: 16px;}
    .waterChartPrimaryLists li {flex: none;}

      /*About NIER manPower*/
	.manpower .conBox_white .imgBox {position:static;}
	.manpower .conBox_white .textBox {margin-left:0;}
	.manpower .conBox_white .textBox .table_normal tbody tr td.num {font-size:16px;}
	.manpower .conBox_white .textBox .table_normal tbody tr td .conT2 {font-size:18px; text-align:center;}
    .manpower .conBox_white .textBox .table_normal tbody tr td .conT2.ar {text-align: right;}
	.manpower .conBox_white .textBox .table_normal tbody tr td.total .conT2{text-align:left;} 
}


@media (max-width: 768px) { 
    .showMobile {display: block !important;}
    .hideMobile {display: none;}
    /* 1. Layout ----------------------------------------------------------------------------------- */
    /* 1.1. Header --------------------------------------------------------------------------------- */
   .onHeaderLogo img { width: 160px; } 

   /* 1.3. Sub --------------------------------------------------------------------------------- */
   .onSubLayout {padding: 0 15px;}
        .onSubLayoutIn {margin-top: 8px;}
            .onSubContentBox {width: 100%;}

    /* 2. Main ------------------------------------------------------------------------------------- */
    .onMainBanner {padding: 0 15px; margin-bottom: 30px;}
    .onMainBannerTop {flex-direction: column; padding-top: 30px; gap: 0px; margin-bottom: 40px;}
        .mainObg01 {left: -70px;}
        .mainObg03 {left: calc(100% - 50px);}
    .onMainBannerTop .waterBubble01, .waterBubble02, .waterBubble03 {display: none;}
    .onMainBannerTop > .mainBanner01.on img {transform: scale(0.7); pointer-events: none;}
    .onMainBannerTop > .mainBanner01.on .mainObg01 {left: auto; right: -21px; bottom: 500px; width: 100px;}
    .onMainBannerTop > .mainBanner01.on .mainObg02 {left: auto; right: -14px; bottom: 497px; width: 84px;}
    .onMainBannerTop > .mainBanner01.on .mainObg03 {left: auto; right: 30px; bottom: 500px;}
    .onMainBannerTop > .mainBanner01.on .mainObgBg {left: auto; right: -14px; bottom: 494px; width: 86px; height: 14px;}
    .onMainBannerTop > .mainBanner01.on .bubbles {bottom: 510px; left: auto; right: -50px; transform: scale(0.6); pointer-events: none;}
    .onMainBannerTop > .satellite {transform: scale(0.7); left: 25%; top: -10%;}
    .onMainBannerTop > .mainObg01.mainBanner03 {bottom: 480px; left: 62%;}
    .onMainBannerTop > .mainObg02.mainBanner03 {top: 5%;}
    .onMainBannerTop > .mainObg03.mainBanner03 {bottom: 400px; left: 70%;}

        @keyframes flaskIn {
            0% {
                transform: rotate(20deg) translateX(-10px);
            }
            50% {
                transform: rotate(-20deg) translateX(8px);
            }
            100% {
                transform: rotate(20deg) translateX(-10px);
            }
        }

        @keyframes doong {
            0% {transform: translateY(0);}
            50% {transform: translateY(15px);}
            100% {transform: translateY(0);}
        }
        @keyframes hide {
            0% {opacity: 0;}
            90% {opacity: 1;}
            100% {opacity: 1;}
        }
        
        @keyframes cloud01 { 
            0% { transform: translateX(0px) scale(0.8); opacity: 0; } 
            10% { transform: translateX(0px) scale(0.8); opacity: 1; } 
            70% { opacity: 1; }
            100% { transform: translateX(80px) scale(0.8); opacity: 0; }  
        }
        @keyframes cloud02 { 
            0% { transform: translateX(0px) scale(0.8); opacity: 0; } 
            10% { transform: translateX(0px) scale(0.8); opacity: 1; } 
            90% { transform: translateX(-70px) scale(0.8); opacity: 1; }
            100% { transform: translateX(-80px) scale(0.8); opacity: 0; }  
        }

        .onMainBannerL {max-width: none; border-radius: 70px 15px 15px 15px; height: 373px;}
        .onMainBannerL > .bannerComponent {left: 34px; bottom: 34px; z-index: 100;}
            .bannerComponent .swiper-button-stop {margin-right: 3px;}
            .bannerComponent .swiper-pagination {line-height: 16px; text-align: left;}
            .bannerComponent .swiper-pagination .swiper-pagination-bullet-active {width: 26px;}
            .bannerComponent .swiper-pagination .swiper-pagination-bullet {margin: 0 3px;}
            .mainBannerTxt {left: 32px; top: 67px; height: 150px; max-width: none; width: 80%;}
            .mainBannerTxt > span {font-size: 14px;}
            .mainBannerTxt > h2 {font-size: 24px; font-weight: 500; line-height: 30px;}
            .mainDetailBtn {bottom: -50px}

        .onMainBannerR {max-width: none; margin: 40px 0 0 0; position: relative;}
            .onMainSearch {background: none; padding: 0; margin-bottom: 20px;}
                .mainSearchBtn {width: 48px; height: 48px;}
                .mainSearchBox input:focus {width: 100%;}
            .onMainIssue {height: 128px; border-radius: 0px 24px 24px 24px;}
            .onMainIssue .swiper-navigation {right: 32px;}
            .onMainIssue .swiper-navigation > div {width: 30px; height: 30px;}
            .onMainSns {position: absolute; right: 22px; top: -62px; margin: 0;}
            .onMainSns > p {display: none;}
            .mainSnsList {margin-left: 0; justify-content: flex-end; column-gap: 10px;}
            .mainSnsList > li a {width: 30px; height: 30px;}
            .issueL {padding: 24px 16px 24px 16px;}
            .issueL::after {height: 74px;}
            .issueL > span {font-size: 14px; line-height: 18px;}
            .issueL > .issueImgBox {margin-bottom: 10px;}
            .issueL > .issueImgBox::after {width: 36px; height: 10px;}
            .issueL > .issueImgBox img {width: 30px;}
            .issueR {width: 100%; margin: 24px 24px 24px 16px;}
            .issueTxt {font-size: 16px; line-height: 22px; margin-bottom: 0;}
    .onMainBannerBtm {flex-direction: column; height: auto;}   
        .onMainBtmL {display: flex; flex-direction: column; width: 100%; margin: 0 0 20px 0;}
        .onToggle {width: 100%; background: #fff; border-radius: 20px; font-size: 14px; border: 1px solid #E0E0E0; color: #6A6A6A; display: flex; flex-direction: row; justify-content: space-between; box-sizing: border-box; align-items: center;}
        .onToggle > li {text-align: center; border-radius: 20px; min-width: 70px; position: relative;}
        .onToggle > li::after {content: ""; display: block; width: 0; height: calc(100% - 16px); right: 0; top: 0; bottom: 0; margin: auto 0; border-right: 1px dashed #D7D7D7; position: absolute;}
        .onToggle > li:last-of-type:after {display: none;}
        .onToggle > li > a, .onToggle > li > button {display: block; text-align: center; width: 100%; line-height: 34px; color: #333; transition: all 0.3s; border-radius: 20px; border: none; background: none;}
        .onToggle > li.on > a, .onToggle > li.on > button {background-color: #0F53D3; color: #fff;}
        .onToggle .webText {display: none;}
        .onToggle .moText {display: flex; justify-content: center;}

        .onMainBtmR {width: 100%;}     

        .onMainBtmR > li > div {flex-direction: column;}
            .mainBtmIcon {width: 100%; margin: 0 0 40px 0; column-gap: 16px;}
            .mainBtmIcon > li {width: calc((100% - 16px) / 2);}
            .mainBtmIcon > li a {flex-direction: column; background: rgba(255, 255, 255, 0.6); border: none; align-items: center; padding: 15px; height: auto;}
            .mainBtmIcon > li a > img {margin: 0;}
            .mainBtmIcon > li a span {font-size: 15px;}
            .mainBtmEarth {width: 100%; margin: 0;}
                .earthImg {right: 20px; transform: scale(0.5); top: 80px;}
                .earthInfo > img {width: 172px;}
            .mainReportL {width: 100%; margin: 0 0 40px 0;}
                .mainReportBox {height: 185px; display: flex; flex-direction: column;}
                .mainReportBox .mainReportTxt {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
                .mainReportBox .mainReportBtn {flex: 1 0 auto;}
            .mainReportR {width: 100%; margin-left: 0;}
            .systemTabBox {width: calc(100% - 45px); overflow-x: hidden; margin: 0; padding-right: 10px; box-sizing: border-box;}
                .systemComponent {top: 1px;}
        
        .onMainBoard {padding: 0 15px;}
            .onMainBoardIn {flex-direction: column;}
            .mainBoardBox {width: 100%; max-width: none; margin: 0 0 40px 0; height: 225px;} 
            .mainBoardBox > .onTab {padding-bottom: 8px; margin-bottom: 8px;}
            .mainBoardBox > .onTab > li {font-size: 16px;} 
            .mainBoardBox > .onTab > li.on::before {bottom: -10px;}
            .mainBoardBox > .onTab > li a::before {width: 16px; height: 16px; left: -5px; top: 0px;}
                .boardMoreBtn > svg {width: 16px;}
                .boardLink > p {font-size: 14px;}
                .boardLink > p > span {font-size: 13px;}
            .mainDataBox {width: 100%; flex-direction: column;}
            .mainPromoData {  margin-bottom: 40px; } 
            .mainPromoData .onT2 {margin-bottom: 20px;}
            .promoDataList { min-width: auto; padding: 20px 105px 0 15px; } 
                .annualReportBox::after {display: none;}
                .annualReportBox p {font-size: 20px; width: 140px; line-height: 26px;}
            .dataBubble { margin: -15px 0 0 -92px; max-width: 160px; height: calc(100% - 45px); } 
            .dataBubble > div {width: 110px; height: 156px; position: relative; text-align: center;}
            .dataBubble > div::before {content: ""; display: block; width: 90px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);}
            .dataBubble > div img.on {z-index: 10; position: relative; animation: up 1s forwards ease; }
            .dataBubble button {font-size: 13px; color: #fff;}
            .dataBubble button i {font-size: 9px;}
            .mainAlarmZone {margin-left: 0; width: 100%;}

    /* 메인 팝업 */
    .onMainPopup > ul > li {max-width: calc(100vw - 40px);}
    .onMainPopupBody {min-width: unset; min-height: unset;}
    .onMainPopupBody > img {width: 100%;}
    .onMainPopupFooter {padding: 0;}
    .onMainPopupFooter > a {font-size: 14px;}        


    /* 3. Component -------------------------------------------------------------------------------- */
    /* 제목 */
    .onT2 {line-height: 36px; margin: 30px 0 24px 0;}

    /* 문단 */
    .onP {font-size: 15px; margin-bottom: 20px;}
    .onP .onT3 {margin: 0 0 12px;}

    /* 콘텐츠 박스 */
    .onSection {margin-bottom: 40px;}

    /* search */
    .onSearchBox.select {padding: 24px 14px;}
    .onSearchBox.select .form-group {flex-direction: column; align-items: flex-start;}
    .onSearchBox.select .form-group .form-conts.onSearchSm {max-width: none;}

    .onSearchBox .krds-form-select.medium, .onSearchBox .krds-input.medium {height: 40px; font-size: 15px; border-radius: 5px;}
    .onSearchBox, .onSearchBox.environmentSearchBox {padding: 12px;}

    /* table 게시판 */
    .krds-table-wrap .tbl.data tbody th, .krds-table-wrap .tbl.data tbody td {font-size: 15px;}

    .krds-table-wrap.board {width: 100%;}
    .krds-table-wrap.board table {min-width: auto; width: 100%;}

    .krds-table-wrap.board table tbody td .link {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

    .krds-table-wrap.board .tbl.data colgroup .mobileHidden {display: none;}
    .krds-table-wrap.board .tbl.data thead .mobileHidden {display: none;}
    .krds-table-wrap.board .tbl.data tbody .mobileHidden {display: none;}

    /* 탭 */
    .onTab.defaultStyle {margin-bottom: 24px;}
    .onTab.defaultStyle > li {height: 46px; font-size: 17px;}

    .onTab.defaultStyle.overflowX {overflow-x:auto; border: none; border-radius: 0;}

    /* 리스트 */
    .onList li.withBtnList {flex-wrap: wrap;}
    .onList li.withBtnList button {margin-left: 0; margin-top: 8px;}

    /* onRightStickyBar -------------------------------------------------------------------------------- */
    .onRightStickyBar { display: none; } 

    /* 4. Contents -------------------------------------------------------------------------------- */

    .onAlert + .onSearchResult, .onSearchBox + .onSearchResult {margin-top: 24px;}
    .onSubTitle {font-size: 28px; margin-bottom: 32px;}
    
    .onSearchResult { flex-direction: column; align-items: flex-start; gap: 15px; } 
    .onSearchResult.hasLine {margin-bottom: 24px;}
    .resultViewOption { flex-direction: column; align-items: flex-end; gap: 10px; width: 100%; } 
    .resultViewOption > div { padding-right: 0; } 
    .resultViewOption > div:after { display: none; } 
    
    .onLayout .onMobFlexDirCol { flex-direction: column; gap: 1rem;} 
    .onLayout .form-group .onMobFullWidth { width: 100%; max-width: 100%; } 

    .galleryThumb {max-height: fit-content;}


    /* INT - 과학원소개 */
    /* 조직안내 */
    .orginLineLayout {border:0px;}
	.orginBox.blue {font-size:23px; padding:8px 0px; background: #0F53D3;}
	.olineLIn {padding:0px; margin: 0; display: block;}
	.olineLIn > li {width:100%; margin: 0 0 30px; display: block; flex: auto;}
	.olineBox {max-width: none; margin: 0px 0px 30px;}
	.olineBox > ul {max-width: none;}
	.olineLIn:before {display:none;}
	.orginBox:before {display:none;}
	.divisionBox:before {display:none;}
	.divisionBox:after {display:none;}
	.divisionBox {margin-top:0px; font-size:15px; border-radius: 0px 10px 10px 10px;}
	.seconolineLIn {margin:0;}
	.seconolineLIn > li {width:100%; display: block;}
	.noLineIn {width:100%;}
	.noLineIn li:before {display:none;}
	.noLineIn li a {margin:4px; max-width:auto; font-size:15px;}
	.noLineIn li a:before  {display:none;}
	.divisionSection {padding:10px 0px; font-size:13px;}
	.divisionSection a {font-size:13px;}
	.noLineIn li:first-child a {margin-top:20px;}
	.noLineIn li {margin:0px 0px 5px 0px; max-width: none; font-size: 15px;}
	.noLineIn.left:before {display:none;}
	.noLineIn.right li {margin:0px 0px 5px 0px; box-sizing: border-box;}
	.noLineIn.right:before {display:none;}
	.organiChart  {display: block; margin-bottom: 40px;}
    
    /* RES - 연구분야 */
    .onT2.resTitle {font-size: 26px;}
    .resKeyword > li {word-break: break-all;}

    .departImg {flex-wrap: wrap; gap: 16px;}
    .departImg > div {width: 100%;}

    /* 연구결과 */
    .onAccordionItem .accoTableTitle {padding: 20px;}
        .arrowBtnBox {margin-left: 10px;}

    .scieReportImg {display: none;}
    .scieReportTxt span {font-size: 13px; line-height: 150%; display: inline-block; margin-bottom: 20px;}

    .scieReport .accoCon {padding: 10px 20px 28px;}


    /* onBoardBox (게시글 상세) -------------------------------------------------------------------------------- */
    .onBoardInfoLists {flex-direction: column; gap: 5px;}
    .onBoardInfoLists > li {margin-right: 0;}

    /* 분석기관 상세 */
    .organFileList > li {width: 100%;}

    /* 국립환경과학원 연대기 */
    .onHistoryLists > li {height: auto;}
    .onHistoryLists > li:last-child {background-color: #fff;}
    .onHistoryLists > li:nth-child(3) {background-color: #F5F7FD;}
    .onHistoryLists > li {width: 100%; padding: 28px 20px 32px;}
    .onHistoryLists > li .year {font-size: 17px;}
    .onHistoryLists > li .year span {width: 30px; height: 30px; font-size: 14px;}
    .onHistoryLists > li .subTit {margin-top: 16px; font-size: 19px;}
    .onHistoryLists > li > div > span {margin-top: 16px; margin-bottom: 24px;}
    .onHistoryLists > li .subTit + span {margin-top: 8px;}
    .onHistoryLists > li > img { width: 76px;}

    /* sitemap - 브레드크럼 */
    .onUtilityIcon >button.printBtn { display: none; }

     /* SiteMapLists - 사이트맵 페이지 */
     .onSiteMapLists > h3 {margin-bottom: 20px;}
     .onSiteMapLists > ul {gap: 20px 0; padding-bottom: 40px; margin-bottom: 40px;}
    .onSiteMapLists > ul > li {width: 50%;}
    .onSiteMapLists > ul > li > h4 > a {font-size: 16px;}
    .onSiteMapLists > ul > li > ul {margin-top: 16px;}

    .onTxtBox .onTxt {font-size: 17px;}
    .onListBox > li> p {font-size: 17px;}

    /* 원장인사말 */
    .onHelloMessage > p {font-size: 26px; top: 0; bottom: auto; position: relative;}
    .onHelloMessage > div > span.circleObj01 {width: 300px; height: 300px; right: 20px; top: 180px;}
    .onHelloMessage > div > span.circleObj02 {width: 100px; height: 100px; top: 130px;}
    .onHelloMessage > div .director{ width: 180px; margin: 10px auto 65px; }

    .historyYearContents > div {padding-left: 0;}
    .historyYearContents ul.yearBtn {left:0;}
    .historyYearContents ul.yearContents {margin-left: 90px;}
    .historyYearContents ul.yearContents > li {padding-right: 0; }
    .historyYearContents ul.yearContents > li > div {flex-wrap: wrap; padding-left: 38px;}
    .historyYearContents ul.yearContents > li > div > p.eventDate{width: 100%; margin-bottom: 8px;}

    /* 생태관 소개 */
    .bigFont {font-size: 32px;}
    .ecologyLists {flex-direction: column;}
    .ecologyLists > li > .top {height: auto; padding: 15px 0;}
    .ecologyLists > li > .top > p {font-size: 17px;}
    .ecologyLists > li > .btm {height: auto; min-height: auto;}
    .yearLists > li {flex-direction: column;}

    /* 전시안내 */
    .recommendedRoute {padding-left: 30px; padding-right: 30px;}
    .routeRecommendedDetail > li > div:not(.routeGuide) {flex-wrap: wrap; gap: 20px;}

    /* 통합검색  */
    .onTotalTab {margin-bottom: 24px;}
    .onTotalSearchBar { flex-direction: column; gap: 20px; padding: 0 0 28px; }
    .onTotalSearchBar .sch-input {max-width: 100%;}
    .onTotalSearchBar > h2 {font-size: 32px;}
    .onTotalSearchBar .krds-input.xlarge{height: 56px; font-size: 19px; }
    .onTotalSearchBar .krds-input.xlarge::placeholder {font-size: 19px;}
    .onTotalSearchBar .krds-btn.icon.xlarge {width: 30px; height: 30px;}

    .applyFilterBox {flex-direction: column; row-gap: 8px; align-items: flex-start;}
    .applyFilterBox .recycle {width: 28px; height: 28px; min-width: auto;}
    .applyFilterBox .recycle i {font-size: 14px; vertical-align: 0;}

    /* 개인정보처리방침 */
    .personal_table, .personal_table thead, .personal_table tbody, .personal_table tr, .personal_table td, .personal_table th { display: block; width: 100%; }
	.personalInfoTxt .personal_table tbody tr td { height: auto; padding: 20px 0; }
	.personalInfoTxt .personal_table tbody tr .none { display: none; }
	.tableInfo { padding: 5px 0 5px; }

    .tableWrap {width:100%; overflow-x:scroll; max-width:720px;}
    .tableWrap .table_normal {width:720px;}

    .personal_table, .personal_table thead, .personal_table tbody, .personal_table tr, .personal_table td, .personal_table th {display: block; width: 100%;}
    .personalInfoTxt .personal_table tbody tr td {height: auto; padding: 20px 0;}
    .personalInfoTxt .personal_table tbody tr .none {display: none;}
    .personal_table .cnt_list {padding: 0;}
    .personal_table .cnt_list > li {width: 100%;}

     /* 환경데이터 */
    .bgEnv { height: 150px; padding-left: 35px; background-size: contain; background-position:bottom; margin-bottom: 40px;}
    .waterSwiper .sectionBox > p > span {font-size: 17px;}
    .waterChartPrimaryLists > li {min-width: 140px;}
    .waterChartPrimaryLists > li > .frontContent > p, 
    .waterChartPrimaryLists > li > .hoverContent > p {font-size: 15px;}
    .waterChartPrimaryLists > li > .hoverContent > span, 
    .waterChartPrimaryLists > li > .hoverContent > a {font-size: 14px;}
    .sectionBox + .onT2 {margin-top: 40px;}
    .sectionBox.main {padding: 30px;}
    .envDataLegend {left:50%; transform: translateX(-50%);}

    .dustMapLIn {width: 80px;}
    .dustMapName span {display: none;}
    .dustMapLWrapper {width: 220px; height: auto; margin-right: 20px;}
    .envDataMapRight h4 {font-size: 18px;}
    .envDataMapRight p {font-size: 16px;}
    .waterChartPrimaryLists li {flex: none;}
    .onText {font-size: 15px;}
    .departmentTabBox.pollutionTab {margin-bottom: 0;}
    .pollutionTab.departmentTabBox.swiper .onTab.department > li {min-width: 100px;}
    .sectionBox.main {padding: 20px 15px;}
    .envDataLegend > ul {display: inline-flex; flex-wrap: wrap; justify-content: center;}
    .dustMapLWrapper { background: none; position: absolute; right: 25px; top: 30px; margin-right: 0; text-align: right; justify-content:flex-end;}
    .envDataToday > strong { font-size: 12px; line-height:23px;}
    .zidoSvg {margin-top: -12px;}
    .duCNList { left: auto; right: -27px; transform: none;}
    .envDataMapRight {width: 100%;}
    .envDataMapRight h4 {font-size: 16px;padding-right: 160px;}
    .envDataMapRight p {font-size: 14px; padding-right: 160px;}
    .envDataMapRightTableBox {margin-top: 80px;}
    .waterSwiper {padding: 0 10px;}
    .waterSwiper .swiper-button-next {right: 3px}
    .waterSwiper .swiper-button-prev {left:3px;}
    .waterSwiper .swiper {width: calc(100% - 20px);}
    .waterChartPrimaryListsTit,
    .waterChartPrimaryLists {width: calc(100% - 40px);}
    .envdataSatelliteBox > img {display: none;}

    /* sitemap - 브레드크럼 */
    .onUtilityIcon > button.printBtn {display: none;}

    /* who 설명페이지 */
    .torBox { flex-direction: column; align-items: flex-start; gap: 15px; }
    .torBox > p { border-radius: 5px; border: 1px solid #E7E8EF; flex-direction: row; justify-content: flex-start; padding: 12px; box-sizing: border-box; height: auto; font-size: 17px; width: auto; }
    .torTxt > p { font-size: 16px; }
    .torTxt > ul li  {display: block; margin-top: 5px;}

     /*About NIER manPower*/
	.manpower .conBox_white {padding: 0;}
	.manpower .conBox_white .imgBox {position:static;}
	.manpower .conBox_white .imgBox img {max-width: 100%;}
	.manpower .conBox_white .textBox {margin-left:0;}
	.manpower .conBox_white .textBox .table_normal tbody tr td.num {font-size:16px;}
	.manpower .conBox_white .textBox .table_normal tbody tr td .conT2 {font-size:18px; text-align:center;}
    .manpower .conBox_white .textBox .table_normal tbody tr td .conT2.ar {text-align: right;}
    .manpower .conBox_white .textBox .table_normal tbody tr td.total .conT2{text-align:left;} 

    .budgeLayout {overflow-x:scroll;}
        .budgeLayout img {width:100%;} 
        .budgeLayout .conDan2 .conDanBox {width:100%; float:none; margin-bottom:20px;}
        .budgeBox {border: 1px solid #D7D7D7;padding:20px;overflow-x: auto;}
 }


 /* 환경데이터 반응형 예외처리 */
 @media (max-width: 440px) { 
    #informOverall{padding-right: 0;}
    .dustMapLWrapper {bottom: 254px; top:auto;}
 }

 @media (min-width: 1281px) { 
    .waterChartPrimaryLists li:hover {width: 30% !important;}
 }