@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;}
.onT2.hasBtmLine { border-bottom: 1px dashed #C6C6C6; padding-bottom: 24px; margin-bottom: 24px; }
.showMobile {display: none !important;}
.skip{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.breakWord {word-break: break-word;}

*:focus {outline: none !important;}
*:focus-visible {outline: 2px solid #e66318 !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: 3100; } 
    .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%;}
    .onTotalTab + .onSubLayoutIn {margin-top: 30px;}

.onLeftMenuLayout { width: 220px; background: url(/template/template1/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; justify-content: flex-start; padding-top: 45px; margin-bottom: 40px; 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.7%; 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/template1/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;}
    /* .mainObg01.mainBanner01.on {animation: fall 5.5s 0.5s ease-in-out forwards, sway 5.5s 0.5s ease-in-out forwards; transform-origin: bottom;}
    .onMainBannerTop .mainObg02.mainBanner01.on {animation: leaf02 3s 3s ease forwards;}
    .onMainBannerTop .mainObg03.mainBanner01.on {animation: fallR 6s ease-in-out forwards, swayR 6s ease-in-out forwards; transform-origin: bottom;} */
    .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 .mainBanner03.mainObg01 {opacity: 0; top: auto; bottom: 10%; left: 50%;}
    .onMainBannerTop .mainBanner03.mainObg02 {opacity: 0; top: 10%; left: 30%;}
    .onMainBannerTop .mainBanner03.mainObg03 {opacity: 0; top: auto; bottom: -10%; left: 53%;}
    .onMainBannerTop .mainBanner03.mainObg01.on {animation: cloud02 6s linear forwards;}
    .onMainBannerTop .mainBanner03.mainObg02.on {animation: cloud01 7s ease forwards;}
    .onMainBannerTop .mainBanner03.mainObg03.on {animation: cloud02 7s linear forwards;}

    .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;}

    /* 메인 첫 번째 슬라이드 오브젝트 */
    @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 { height:470px; position: relative; width: 100%; max-width: 1040px; border-radius: 137px 30px 30px 30px; overflow: hidden; border: 0px; } 
    .onMainBannerL > div { position: relative; width: 100%; border: 0px; } 
    .onMainBannerL > div img { width: 100%;}
    .onMainBannerL .swiper-slide {opacity:0}
    .onMainBannerL .swiper-slide img {transition: all 8s ease;}
    .onMainBannerL .swiper-slide.on img {transform: scale(1.3);}
    .onMainBannerL .swiper-slide .mainBannerTxt {opacity: 0;}
    .onMainBannerL .swiper-slide.on .mainBannerTxt {opacity: 1;}
    .onMainBannerL .onNoData {background: #F7F8F9;}
    .onMainBannerL .onNoData img {width: 70px;}
    .onMainBannerL .onNoData p {font-size: 17px; margin-top: 15px;}
        .mainBannerTxt { position: absolute; left: 94px; top: 20%; width: 50%; max-width: 350px; 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: 54px; 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: 428px; margin-left: -84px; z-index: 10; } 
        .onMainSns { width: 100%; max-width: 230px; margin: 14px auto 35px; } 
        .onMainSns > p { margin: 0 0 22px 13px; font-size: 18px; color: #333; font-weight: 500; } 
        .mainSnsList { display: flex; column-gap: 18px; margin-left: 13px; } 
        .mainSnsList > li a { position: relative; display: block; width: 41px; height: 41px; } 
        .mainSnsList > li a img { display: inline-block; width: 100%; position: absolute; left: 0; bottom: 0;transform: translateY(0px); transition: all 0.3s ease; box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); border-radius: 10px; } 
        .mainSnsList > li a img.snsOn { opacity: 0; } 
        .mainSnsList > li a:hover img,
        .mainSnsList > li a:focus img { opacity: 0; } 
        .mainSnsList > li a:hover img.snsOn,
        .mainSnsList > li a:focus img.snsOn { opacity: 1; display: inline-block; transform: translateY(-6px); border-radius: 13px 13px 16px 0; } 

        .onMainSearch { padding: 25px 20px 20px 20px; box-sizing: border-box; border-radius: 50px 50px 0 0; background: linear-gradient(to right, rgba(255,255,255,0), #CDDEFF); } 
        .mainSearchBox { display: flex; margin-bottom: 12px; } 
        .mainSearchBox div {width: 100%; margin-right: 12px; position: relative;}
        .mainSearchBox div > input { position: absolute; right: 0; height: 100%; font-size: 16px; padding-left: 24px; border: 2px solid #0F53D3; border-radius: 26px; width: 100%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-sizing: border-box; transition: width 0.3s ease;} 
        .mainSearchBox div > input::placeholder { color: #a1a1a1; } 
        .mainSearchBox div > input:focus {width: 480px; max-width: none;}
            .mainSearchBtn { transition: all 0.3s; width: 52px; height: 52px; background: #0F53D3; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); color: #fff; font-size: 20px; } 
            .mainSearchBtn:hover {background: #333;}
        .keywordBox { display: flex; justify-content: center; align-items: center; } 
        .keywordBox > span { display: inline-block; margin-right: 15px; font-size: 13px; color: #fff; background: #14A8A8; width: 52px; height: 26px; line-height: 26px; border-radius: 13px; text-align: center; } 
        .keywordList { display: flex; column-gap: 13px; font-size: 15px; font-weight: 500; } 
        .keywordList li { transition: all 0.3s; color: #666; } 
        .keywordList li:hover { color: #000; } 

        .onMainIssue { position: relative; background: #0F53D3; border-radius: 0px 0px 50px 50px; display: flex; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); } 
        .onMainIssue .swiper-navigation {position: absolute; bottom: -15px; right: 50px;}
            .issueL { position: relative; text-align: center; font-size: 14px; color: #fff; font-weight: 400; padding: 30px 16px 35px 26px; box-sizing: border-box; max-width: 88px; } 
            .issueL::after { position: absolute; content: ""; display: block; width: 0; height: 93px; border-right: 1px dashed #fff; opacity: 0.3; top: 50%; right: 0; transform: translateY(-50%); } 
            .issueL > .issueImgBox { margin-bottom: 15px; position: relative; }
            .issueL > .issueImgBox::after {content: ""; display: block; width: 51px; height: 13px; background: rgba(255, 255, 255, 0.1); position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-radius: 50%;}
            .issueL > .issueImgBox img {position: relative; z-index: 10;}
            .issueL > span { opacity: 0.8; } 
            .issueR { margin: 30px 30px 34px 16px; overflow: hidden; max-height: 96px; width: 100%;}
            .issueR .onNoData {color: #fff;}
            .issueR .swiper-slide {display: flex; flex-direction: column; justify-content: space-between;}
            .issueTxt { display: inline-block; color: #fff; font-size: 20px; line-height: 30px; margin-bottom: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 
            .issueBtm { display: flex; justify-content: space-between; font-size: 14px; color: #CBD0F0; } 
            .issueBtm a > i { font-size: 8px; vertical-align: 1px; margin-left: 3px; } 
            .issueMoreBtn { transition: all 0.3s; position: relative; margin-right: 15px; } 
            .issueMoreBtn > i { transition: all 0.3s; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); } 
            .issueR .swiper-slide:hover .issueMoreBtn { color: #fff; } 
            .issueR .swiper-slide:hover .issueMoreBtn > i { transform: translate(5px, -50%); } 
 
.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; } 
    .onMainBtmL .onToggle li:not(.on) a:hover {color: #0F53D3; border-color: #0F53D3;}

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

        /* 국립환경과학원은? */
        .mainBtmIcon { display: flex; justify-content: flex-start; flex-wrap: wrap; width: calc(100% - 450px); height: 100%; row-gap: 24px; column-gap: 28px; margin-right: 40px; position: relative;} 
        .mainBtmIcon::after {content: ""; display: block; position: absolute; width: 0; height: 226px; border: 1px solid #E9E9E9; right: -40px; top: 50%; transform: translateY(-50%);}
        .mainBtmIcon > li { width: calc(50% - 14px); transform: translateY(50px); opacity: 0; } 
        .mainBtmIcon > li a { display: flex; flex-direction: row; align-items: center; position: relative; background: rgba(255, 255, 255, 0.6); border: 1px solid #F2F5FB; border-radius: 20px; padding: 18px 20px; transition: all 0.3s; } 
        .mainBtmIcon > li a:hover {background: #fff; border-color: #E2EAF9; 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 { margin-right: 12px; z-index: 10; }
        .mainBtmIcon > li a .linkIcon {width: 57px; position: relative; padding-left: 0; margin-right: 12px; }
        .mainBtmIcon > li a .linkIcon::before {content: ""; display: block; width: 20px; height: 20px; background: url(/template/template1/assets/img/main/mainBtmLinkIcon.png) no-repeat center center; position: absolute; right: 0px; bottom: 0px;}
        .mainBtmIcon > li a .linkIcon::after {display: none;}
        .mainBtmIcon > li a div {position: relative; padding-left: 18px; width: 100%;}
        .mainBtmIcon > li a div::after {content: ""; display: block; width: 0; height: 60px; border-right: 1px dashed rgba(0,0,0,0.1); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
        .mainBtmIcon > li a div > span { font-size: 17px; text-align: center; color: #2C2C2C; font-weight: 500; display: inline-block; margin-bottom: 8px; transition: all 0.3s;} 
        .mainBtmIcon > li a div > p {font-size: 14px; color: #666;}
        .mainBtmIcon > li a div > i {position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #333; font-weight: bold;}
        .mainBtmIcon > li a:hover div > span {color: #0F53D3;} 
        .mainBtmIcon > li a:hover div > p {color: #0F53D3;} 
        .mainBtmIcon > li a:hover::before,
        .mainBtmIcon > li a:focus::before { content: ""; opacity: 0.2; } 
        .mainBtmIcon > li a:hover > span { font-weight: 500; } 
        .mainBtmIcon > li.on:nth-of-type(1) {animation: up 0.6s ease forwards;}
        .mainBtmIcon > li.on:nth-of-type(2) {animation: up 0.6s 0.6s ease forwards;}
        .mainBtmIcon > li.on:nth-of-type(3) {animation: up 0.6s 1.2s ease forwards;}
        .mainBtmIcon > li.on:nth-of-type(4) {animation: up 0.6s 1.8s ease forwards;}

        @keyframes up {
            0% {opacity: 0; transform: translateY(50px);}
            100% {opacity: 1; transform: translateY(0px)}
        }

        .mainBtmEarth {position: relative; margin-left: 36px; width: 457px;}
            .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 > .pcHidden {display: none;}
            .earthInfo > a {display: inline-flex; align-items: center; justify-content: center; transition: all 0.3s; width: 109px; 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: 55%; transform: translateY(-50%); right: 0;}
                .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;}
        .mainReportL .mainReportTxt strong {min-height: 52px;}
            .reportSwiper {overflow: hidden;}
                .mainReportTop {margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
                .mainReportTop h3 {font-size: 20px; color: #333; line-height: 26px; font-weight: 600;}
                    .reportTopR {display: flex;align-items: center;}
                        .reportMoreBtn {transition: all 0.3s; border: 1px solid #D7D7D7;box-sizing: border-box; border-radius: 30px; line-height: 26px; padding: 0 10px; font-size: 14px; color: #666;}
                        .reportMoreBtn i {transition: all 0.3s; color: #888; font-size: 11px; margin-right: 6px;}
                        .reportMoreBtn:hover {color: #0F53D3; border-color: #0F53D3;}
                        .reportMoreBtn:hover i {color: #0F53D3;}
                .mainReportBtm.onNoData {min-height: 176px;}       
                    .mainReportBox {background: #fff; border-radius: 30px 20px 20px 20px; border: 1px solid #E0E8F4; transition: all 0.3s; box-sizing: border-box;}
                    .mainReportBox:hover {border-radius: 30px 20px 10px 20px; background: #E8F8FB; border-color: #1D95B7;}
                    .mainReportBox:hover .mainReportBtn span {background: #333333;}
                        .mainReportTxt {padding: 22px 24px 21px; 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; transition: all 0.3s; }
                        .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;}
                        .mainReportBtn:hover p,
                        .mainReportBtn:focus p {color: #000;}
                        .mainReportBtn:hover span,
                        .mainReportBtn:focus span {background: #000;}
        .mainReportR {width: 440px; margin-left: 40px; flex: 1 0 auto; height: 222px; 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: 4px 0 10px; 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;margin-right: 30px;} 
            .onTab.system > li a { padding: 0 2px; position: relative; cursor:pointer;}  
            .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:first-child.on a { color: #199A90; } 
            .onTab.system > li:nth-child(2).on a { color: #2553C9; } 
            .onTab.system > li:nth-child(3).on a { color: #0584D3; } 
            .onTab.system > li:nth-child(4).on a { color: #21986E; } 
            .onTab.system > li:nth-child(5).on a { color: #48A7CF; } 
            .onTab.system > li.on a::before { opacity: 0.2; } 

            .systemComponent {position: absolute; right: 4px; top: 4px; z-index: 2;}

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

                .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 10px 20px;}
                .mainSystemBox.swiper-slide-active .swiper-wrapperIn:hover {background: #E8FBF4; background-image: none; border-color: #00776A; border-radius: 30px 20px 10px 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;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

                .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: #199A90;}
                .mainSystemBox.system02 .systemName {background: #F0F7F9; color: #2553C9;}
                .mainSystemBox.system03 .systemName {background: #F0F7F9; color: #0584D3;}
                .mainSystemBox.system04 .systemName {background: #F0F7F9; color: #21986E;}
                .mainSystemBox.system05 .systemName {background: #F0F7F9; color: #48A7CF;}
                .mainSystemBox.system01.swiper-slide-active .systemName {background: #199A90; color: #fff;}
                .mainSystemBox.system02.swiper-slide-active .systemName {background: #2553C9; color: #fff;}
                .mainSystemBox.system03.swiper-slide-active .systemName {background: #0584D3; color: #fff;}
                .mainSystemBox.system04.swiper-slide-active .systemName {background: #21986E; color: #fff;}
                .mainSystemBox.system05.swiper-slide-active .systemName {background: #48A7CF; color: #fff;}
                .mainSystemBox .mainReportTxt strong {margin-bottom: 10px;}

                .systemComponent {display: flex; column-gap: 6px;}
                .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 > a:hover {background: #000;}
                .systemComponent > a:hover i {color: #fff;}
                .systemComponent > .prevBtn i {margin-left: -2px;}
                .systemComponent > .nextBtn i {margin-right: -2px;}
                .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: 40%; 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: 20px; font-weight: 600; margin-right: 6%; height: 26px; } 
        .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: 57%; display: flex; flex-shrink: 0; } 
        .mainPromoData { width: 492px; } 
        .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: 22px 116px 0 5%; height: 248px; box-sizing: border-box; overflow: hidden; min-width: 340px; } 
            .promoDataList > ul { position: relative; height: 100%; display: flex; flex-direction: column; row-gap: 17px; overflow-y: auto; scroll-behavior: smooth; padding-top: 8px; margin-top: -8px; } 
            .promoDataList > ul::-webkit-scrollbar {-ms-overflow-style: none; display: none;}
            .promoDataList > ul > li { width: 100%; } 
            .promoDataList > ul > li:last-of-type {margin-bottom: 22px;}
            .promoDataList > ul > li > button { opacity: 0; transition: all 0.3s; font-size: 14px; color: #666; padding: 0 14px; height: 48px; line-height: 48px; border-radius: 20px 20px 20px 0; background: #DBE7FF; border: 1px solid #DBE7FF; box-sizing: border-box; } 
            .promoDataList > ul > li > button:hover,
            .promoDataList > ul > li.on > button { background: #fff; border: 1px solid #0F53D3; }
            .promoDataList > ul > li.show > button {animation: show 0.6s forwards; }
                .bubble01 {text-align: left;}
                .bubble02 {text-align: right;}
                .bubble03 {text-align: center;}
                .bubble04 {text-align: right;}
                .bubble05 {text-align: left;}
                .bubble01 .bubbleTxt img { vertical-align: -1px; } 
                    .bubbleTxt img { vertical-align: -3px; margin-left: 5px; } 
            .dataBubble { position: relative; margin: -32px 0 0 -92px; background: #0F53D3; width: 100%; height: calc(100% - 5px); flex-shrink: 0; max-width: 163px; border-radius: 20px 20px 20px 0;} 
            .dataBubble > div { position: absolute; left: 0; width: 100%; top: 0; bottom: 0; margin: auto 0; opacity: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; box-sizing: border-box; padding: 27px 15px 24px;}
            .dataBubble > div.on { opacity: 1; pointer-events: visible;}
            .dataBubble span {display: block; text-align: center; font-size: 14px; color: #fff; line-height: 21px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
            .dataBubble strong { text-align: center; font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 20px; line-height: 21px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
                .bubbleIconBox {margin-bottom: 20px; position: relative; text-align: center;}
                .bubbleIconBox::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%);}
                .bubbleIconBox img {z-index: 10; position: relative; width: 103px; height: 103px; object-fit: contain;}
                .bubbleIconBox img.on { animation: up 1s forwards ease; }
            .dataBubble a {font-size: 13px; color: #fff; position: relative; padding-right: 4px;}
            .dataBubble a i {font-size: 9px; position: absolute; top: 3px; left: 100%; transition: all 0.3s;}
            .dataBubble a:hover i { left: calc(100% + 4px);}

            @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; } 
            .swiperComponent.alarm { width: 100%; height: 27px; position: relative; display: flex; align-items: center; justify-content: space-between; }
            .swiperComponent.alarm .swiper-pagination-lock {display: inline-block; opacity: 0;}
            .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 > div a:focus {outline-offset: -4px; border-radius: 20px;}
            .alarmSlideBox .swiper-slide > img,
            .alarmSlideBox .swiper-slide a > img {width: 100%; height: 100%; object-fit: cover;}

    .swiperComponent .swiper-pagination { position: relative; top: 0; line-height: 27px; width: 40px; font-size: 14px; color: #666; } 
    .swiperComponent .swiper-navigation,
    .swiperComponent .swiper-navigation { width: 100px; height: 27px; display: flex; align-items: center; column-gap: 6px; justify-content: flex-end; } 
    .swiperComponent .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;} 
    .swiperComponent .swiper-navigation > .swiper-button-stop {font-size: 12px;}
    .swiperComponent .swiper-navigation > div:hover,
    .swiperComponent .swiper-navigation > div:hover { background: #333333; border-color: #fff; color: #fff; } 
    .swiperComponent .swiper-navigation .swiper-button-prev::after,
    .swiperComponent .swiper-navigation .swiper-button-next::after,
    .swiperComponent .swiper-navigation .swiper-button-prev::after,
    .swiperComponent .swiper-navigation .swiper-button-next::after { display: none; } 
    .swiperComponent .swiper-navigation .swiper-button-prev i,
    .swiperComponent .swiper-navigation .swiper-button-prev i { margin-right: 1px; font-weight: 600; } 
    .swiperComponent .swiper-navigation .swiper-button-next i,
    .swiperComponent .swiper-navigation .swiper-button-next i { margin-left: 2px; font-weight: 600; } 
    .swiperComponent .swiper-navigation .swiper-button-stop button,
    .swiperComponent .swiper-navigation .swiper-button-stop button { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } 
    .swiperComponent .swiper-navigation .swiper-button-stop svg,
    .swiperComponent .swiper-navigation .swiper-button-stop svg { margin: 1px 0 0 1px; } 
    .swiperComponent .swiper-navigation .swiper-button-stop:hover path,
    .swiperComponent .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: 50%; bottom: 33px; width: fit-content; display: flex; transform: translateX(-50%); z-index: 10;}
        .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: 3px;}



/* 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; } 

.onSection.border .onT3 {margin-bottom: 8px;}

/* 문단 */
.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: center; }
.onListBox > li> span { color: #717B90; font-size: 16px; font-weight: 700; margin-right: 12px; }
.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/template1/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/template1/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; flex: 0 0 auto;} 
.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; transition: color 0.3s;} 
dl.onBoardUploaded > dd a:hover {color: #333;}

/* 탭 */
.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/template1/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_red3 { color: #ED1C24; } 
.text_grey { color: #464c53; } 

/* 콘텐츠 박스 */
.onSection {margin-bottom: 64px;}
.onSection.border {border: 1px solid #d7d7d7;padding: 38px 40px;border-radius: 10px;}
.onSection.border .onP:last-child {margin-bottom: 0;}

.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;}
.onList.small li{font-size: 15px;}


.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: 760px;border-radius: 12px;overflow: hidden;box-sizing: border-box;border: 1px solid #B1B8BE;}
    .onModalHeader {padding: 0;box-sizing: border-box;padding-top: 48px;padding-inline: 40px;background: #fff;}
    .onModalHeader > h3 {font-size: 24px;color: #1E2124;letter-spacing: normal;}
    .onModalClose {position: absolute;right: 24px;top: 24px;font-size: 24px;color: #33363D;width: 24px;height: 24px;/* border: 1px solid red; */display: flex;align-items: center;justify-content: center;}
    .onModalContent {font-size: 17px;color: #464C53;letter-spacing: normal;max-height: 496px;width: calc(100% - 48px);padding-top: 8px;display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;padding: 0px 8px 0 16px;margin: 56px auto 0;box-sizing: border-box;overflow-x: hidden;}
    .onModalContent br {display: none;}
    .onModalContent .onTabContents {width: 100%;}
    .onModalContent .onModalTitle { color: #1E2124; font-size: 24px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
    .onModalContent h2 { color: #464c53; font-size: 19px; font-weight: 700; line-height: 29px; margin: 16px 0; }
    .onModalContent .onModalTitle + h2 {margin-top: 0;}
    .onModalIn *::-webkit-scrollbar { width: 0.8rem; height: 0.8rem; }
    .onModalIn *::-webkit-scrollbar-thumb { background-color: var(--krds-light-color-element-secondary-light); border-radius: 0.8rem; }
    .onModalIn *::-webkit-scrollbar-track { background-color: var(--krds-light-color-element-secondary-lighter); }
    .onModalIn *::-webkit-scrollbar:horizontal { height: 0.8rem; }
    .onModalContent .krds-table-wrap {overflow-x: auto;}
    .onModalContent .krds-table-wrap table.tbl {min-width: 500px; width: 100%;}
    .onModalContent .krds-table-wrap .tbl.data {border-top: 1px solid #D7D7D7;}
    .onModalContent .krds-table-wrap .tbl.data tbody th {background: #EEF2F7;color: #131416;font-weight: 700;letter-spacing: 0;font-size: 15px;padding: 6px 16px;height: 39px;box-sizing: border-box;}
    .onModalContent .krds-table-wrap .tbl.data tbody td {padding: 6px 16px;color: #464c53;font-size: 17px;line-height: 1.5;height: 39px;box-sizing: border-box;}
    .onModalFooter  { width: 100%; padding: 16px 40px 40px; margin: 0 auto; box-sizing:border-box;}
    .onModalFooter button.krds-btn {padding: 0 24px;box-sizing: border-box;min-width: 78px;}
    #rschPrps span, #rptpCn span {display: block;}


/* 메인 팝업 */
.onMainPopup {  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; border-radius: 10px; overflow: hidden; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);}
.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%; height: calc(100vh - 150px); max-height: 520px;}
    .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: 420px; 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 0px; 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/template1/assets/img/krds/ico_angle.svg); mask-image: url(/template/template1/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; } 
    .resultViewOption .pcHidden {display: none;}
    .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/template1/assets/img/common/icon_clip.svg); mask-image: url(/template/template1/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 {margin-top: -10px;}
.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/template1/assets/img/krds/ico_more.svg); mask-image: url(/template/template1/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;}

/* INF - 정보공개 */
/* 정보공개 제도 */
.grayBgBox {display: flex;}
.grayBgBox > li {background: #f5f5f5; border-radius: 12px; margin-right: 20px; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 24px 20px; box-sizing: border-box;}
.grayBgBox > li:last-of-type {margin-right: 0;}
.grayBgBox > li span {color: #000; font-size: 17px; margin: 0 0 12px 0; font-weight: 500;}
.grayBgBox > li img {margin-bottom: 20px;}
.grayBgBox > li .onText {font-size: 15px; text-align: center; color: #464C53;}

/* 정보 공개처리절차 */
.claimProcessList {padding-left: 56px; margin-bottom: 48px;}
.claimProcessList > li {margin-bottom: 34px; position: relative;}
.claimProcessList > li::before {content: ""; display: block; width: 0; height: calc(100% + 35px); border-right: 1px solid #D7D7D7; position: absolute; left: -38px; top: 15px;}
.claimProcessList > li:last-of-type::before {display: none;}
.claimProcessList > li .claimTitle {font-size: 19px; color: #464C53; margin-bottom: 10px; font-weight: 700; position: relative;}
.claimProcessList > li .claimTitle::before {content: "01"; display: block; width: 36px; height: 36px; background: #0F53D3; color: #fff; font-size: 15px; font-weight: 600; text-align: center; line-height: 36px; border-radius: 50%; position: absolute; left: -56px; top: -5px;}
.claimProcessList > li:nth-of-type(2) .claimTitle::before {content: "02";}
.claimProcessList > li:nth-of-type(3) .claimTitle::before {content: "03";}
.claimProcessList > li:nth-of-type(4) .claimTitle::before {content: "04";}
.claimProcessList > li:nth-of-type(5) .claimTitle::before {content: "05";}
.claimProcessList > li .claimProcessText > strong span {display: none; width: 42px; height: 43px; background: url(/template/template1/assets/img/sub/claimIcon01.png) no-repeat center center / 43px; margin-right: 8px;}
.claimProcessList > li:nth-of-type(2) .claimProcessText > strong span {width: 42px; height: 43px; background: url(/template/template1/assets/img/sub/claimIcon02.png) no-repeat center center / 43px; margin-right: 8px;}
.claimProcessList > li:nth-of-type(3) .claimProcessText > strong span {width: 42px; height: 43px; background: url(/template/template1/assets/img/sub/claimIcon03.png) no-repeat center center / 43px; margin-right: 8px;}
.claimProcessList > li:nth-of-type(4) .claimProcessText > strong span {width: 42px; height: 43px; background: url(/template/template1/assets/img/sub/claimIcon04.png) no-repeat center center / 43px; margin-right: 8px;}
.claimProcessList > li:nth-of-type(5) .claimProcessText > strong span {width: 42px; height: 43px; background: url(/template/template1/assets/img/sub/claimIcon05.png) no-repeat center center / 43px; margin-right: 8px;}
    .claimBox {border-radius: 10px; background: #F5F7FD; min-height: 179px; padding: 30px 0; box-sizing: border-box; display: flex;}
        .claimIconBox {display: flex; justify-content: center; align-items: center; width: 20%; max-width: 144px; padding: 0 15px; box-sizing: border-box; flex: 1 0 auto;}
            .claimIconCirlce {width: 85px; height: 85px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
        .claimProcessText {position: relative; padding: 0 30px 0 40px; display: flex; align-items: flex-start; flex-direction: column; justify-content: center;}
        .claimProcessText::before {content: ""; display: block; width: 0; height: calc(100% - 34px); border-right: 1px dashed #CCD2E5; position: absolute; left: 0; top: 0; bottom: 0; margin: auto 0;}
        .claimProcessText > strong {font-size: 17px; font-weight: 700; margin-bottom: 8px; display: inline-flex; align-items: center;}
        .claimProcessText > p {font-size: 15px; color: #303030; line-height: 150%;}
        .claimProcessText .onDotList {margin-top: 16px;}
        .claimProcessText .onDotList li {font-size: 15px; line-height: 150%;}

.onImgBox.claim {padding: 5%; box-sizing: border-box; overflow-x: auto;}

/* 수수료 */
.onLineBox {display: flex; column-gap: 30px;}
.onLineBox > li {font-size: 15px; color: #464C53; line-height: 150%; padding: 30px 32px; border: 1px solid #D7D7D7; border-radius: 10px; width: calc(50% - 15px); box-sizing: border-box;}
.onLineBox .onDotList {margin-left: 7px;}
.onLineBox .onDotList > li {font-size: 15px;}
    .blueTitleBadge {background: #ECF2FE; padding: 3px 12px; box-sizing: border-box; min-width: 76px; border-radius: 12px; color: #0F53D3; font-size: 15px; font-weight: 600; display: inline-block; margin-bottom: 17px; border-radius: 15px;}
    .chargeInfo {margin-left: 12px;}
    
/* 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; 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:last-child {padding-bottom: 0;}
.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; 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; 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: 0px;}
.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); }
.waterChartPrimaryLists .swiper-button-prev.defaultStyle.shadow,
.waterChartPrimaryLists .swiper-button-next.defaultStyle.shadow {display: none;}

/* 예산현황 */
.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%;max-width: 490px;margin: 0 auto;display: block;}

.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;}

/* 역대 원장 */
.directorList {display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 30px;}
.directorList > li {width: calc(50% - 15px); border-radius: 15px; border: 1px solid #D7D7D7; box-sizing: border-box;}
    .directorBox {background: url(/template/template1/assets/img/sub/directorBg.svg) no-repeat right bottom; min-height: 231px; transition: border-color 0.3s;}
    .directorBox:hover {border-color: #0F53D3;}
        .diretorBadge {position: absolute; right: -1px; top: -1px; display: inline-block; padding: 9px 18px; box-sizing: border-box; background: #717B90; color: #fff; font-size: 17px; font-weight: bold; line-height: 26px; border-radius: 0 15px 0 15px;}
        .directorInfo {position: relative; display: flex; padding: 30px 30px 0; box-sizing: border-box; display: flex; column-gap: 18px; margin-bottom: 15px;}
            .directorImg {width: 76px; height: 87px; border-radius: 5px; overflow: hidden;}
            .directorImg > img {width: 100%; object-fit: cover;}
            .directorName {display: flex; flex-direction: column; justify-content: center;}
            .directorName > strong {font-size: 24px; font-weight: bold; line-height: 36px; margin-bottom: 20px;}
            .directorName > span {font-size: 17px; color: #464C53; line-height: 26px;}
        .directorCareer {padding: 0 30px 30px;}
        .directorCareer > ul > li {font-size: 15px; color: #464C53; line-height: 150%; position: relative; padding-left: 18px;}
        .directorCareer > ul > li::before {content: ""; display: block; position: absolute; left: 6px; top: 9px; width: 3px; height: 3px; background: #464C53; border-radius: 50%;}
    .directorBox.nowDirector {border-color: #0F53D3; background: url(/template/template1/assets/img/sub/directorBg.svg) no-repeat right bottom, linear-gradient(140deg, #F0F9FF 0%, #FFFFFF 80%);}
    .directorBox.nowDirector .diretorBadge {background: #0F53D3;}

/* 찾아오시는 길 */
.onT2.transport {margin-bottom: 16px;}

.onTab.defaultStyle {width: 100%;border: 1px solid #CDD9E7;border-radius: 12px;margin-bottom: 40px;box-sizing: border-box;}
.onTab.defaultStyle.oneLine {white-space: nowrap;}
.onTab.defaultStyle > li {width: 100%; max-width: none; border: none; border-radius: 12px; background: none; font-size: 19px; font-weight: 600; height: 56px; padding: 4px; box-sizing: border-box; position: relative; min-width: auto;}
.onTab.defaultStyle > li::after { content: ""; width: 0; height: calc(100% - 20px); border-right: 1px dashed #C6D2DF; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.onTab.defaultStyle > li:first-child::after {display: none;}
.onTab.defaultStyle > li.on {border-radius: 0 12px 12px 12px; background: #2D3D8F;}
.onTab.defaultStyle > li.on::before {display: none;}
.onTab.defaultStyle > li a {justify-content: center;}
.onTab.defaultStyle > li.on a {color: #fff;}
.onTab.defaultStyle > li.on > a:hover, .onTab.AdresList > li.on > a:focus {color: #fff;}

.mapACon.conBox {margin-bottom: 24px; background-color: #F8F8F9; padding: 20px;}
.mapACon .conDan2 {display: flex; column-gap: 18px;}
.mapACon .conDan2 > div {width: 50%;}
.mapACon .onT3 {font-weight: 500;}
.mapATxt {overflow:hidden;border-bottom:1px solid #E1E1E1;margin-bottom:40px; display: flex;}
.mapATxt p{color:#666; width:50%; font-size:16px; margin: 16px 0;}
.mapATxt .txt_right {text-align:right;}
.mapATxt p .txt_black {color: #333; font-weight: 500;}
.mapACon ol li {font-size:16px; line-height:25px; position:relative; }
.mapACon ol li span.number {position:absolute;}
.mapACon ol li span.txt {display:block; margin-left:20px}

.routeList > div {display: none;}
.routeList > div.on {display: block;}

.busStatilonArea {display: flex; border: 1px solid #D7D7D7; border-radius: 10px; overflow: hidden; margin-bottom: 20px;}
    .busTabBox {width: 25%; max-width: 218px;}
    .busTabSwiper .swiper-button-prev, .busTabSwiper .swiper-button-next {display: none;}

.onTab.AdresList {flex-direction: column; padding: 8px 0; border-bottom: none; overflow-y: auto; box-sizing: border-box; max-height: 646px;}
.onTab.AdresList > li {border: none; background: #fff; height: auto; min-height: 36px; max-width: none; padding: 4px; flex: 0 0 auto; width: calc(100% - 8px);}
.onTab.AdresList > li.on::before {border-color: #0F53D3; width: calc(100% - 44px); left: 19px; bottom: 0px;}
.onTab.AdresList > li a {font-size: 17px; line-height: 26px; text-align: left; padding: 0 21px; font-weight: 600; display: flex; justify-content: space-between; align-items: center;}
.onTab.AdresList > li a:hover {color:#0F53D3;}
.onTab.AdresList > li.on > a:hover, .onTab.AdresList > li.on > a:focus {color: #0F53D3;}
.onTab.AdresList > li a > i {font-size: 14px; opacity: 0; transition: all 0.3s ease;}
.onTab.AdresList > li.on a > i {opacity: 1;}

.stationBox {width: 75%; flex: 1 1 auto; border-left: 1px dashed #D7D7D7;}
    .commuterBox {overflow: hidden; display: none;}
    .commuterBox.on {display: block;}
    .commuterBox .conT3 {position: relative; font-size: 16px; font-weight: 600; margin-bottom: 12px;}
    .commuterBox .conT3 > span {position: absolute; bottom: 0; display: block; font-size: 14px; font-weight: 500;}
    .commuterBox .conT3 > span:first-child {left: 177px;}
    .commuterBox .conT3 > span:last-child {left: 400px;}

.busTimeLineTop {padding: 20px 20px 0; box-sizing: border-box; border-bottom: 1px dashed #D7D7D7; height: 550px; overflow-y: auto;}
    .commuterButTimeLine {position:relative; overflow: hidden;}
    .commuterButTimeLine:before {width:3px; height:100%; background-color:#D7D7D7; display:block; content:''; position:absolute; top:-24px; left:10px;}
    .commuterButTimeLine li {display:block; margin-top:45px; position:relative; min-height:45px;}
    .commuterButTimeLine li:first-child {margin-top:0;}
    .commuterButTimeLine li.nonstop {margin-top:30px;}
    .conBox {margin-bottom:0;}
    .commuterButTimeLine li:before {line-height:20px; text-align:center; font-size:12px; font-family: 'onFont' !important;width:18px; height:18px; border:2px solid #666; background-color:#fff; border-radius:50%;display:block; content:"\e900";position:absolute;}
    .commuterButTimeLine li.nonstop:before{width:13px; height:13px; background-color:#D7D7D7; border:none; content:''; left: 5px;}
    .commuterButTimeLine li.nonstop .commuterButTime {color:#d7d7d7;}
        .commuterButTime {padding: 0 0 0 38px; position:relative;}
            .comBTime {position:absolute; top: -2px; font-size: 16px;}
            .comBTime .txt_blue {color: #0F53D3;}
            .comBTime > div {width: 160px;}
            .comBTime > div > .txt_black {color: #000;}
            .comBTime a {position: absolute; right: 0; bottom: 0; margin-left:8px; vertical-align:bottom;}
            .comBTimeInfo {margin-left:190px; padding-top:20px; font-size: 15px;}
            .comBTimeInfo2 {padding-top:0;}
            .comBTimeInfo .txt {line-height:25px; color: #666;}

.busTimeLineBtm {padding: 17px 20px;}       
.busTimeLineBtm > p {font-size: 16px; color: #333; font-weight: 500;}  

.busInfoTxt {font-size: 16px; color: #464C53; display: flex; align-items: center; line-height: 26px; margin-bottom: 8px;}
.busInfoTxt:last-of-type {margin-bottom: 0;}
.busInfoTxt > strong {font-size: 17px; margin-right: 12px;}

.busStaionImg {border: 1px solid #E5E5E5; text-align: center; overflow-x: auto;}
.busStaionImg > img {min-width: 600px;}

/* 셔틀버스 */
.stationLayout .conDan2 {}
.stationLayout .conDan2 .conDanBox {display: flex; column-gap: 18px;}
.stationLayout .conBox {margin-bottom: 24px; background-color: #F8F8F9; padding: 20px;}
.stationLayout .stationIn {width: 50%;}
.stationLayout .stationIn .imgBox img {width:100%; border-radius: 10px;}
.stationLayout .stationIn .onT4 {font-size: 18px; margin-bottom: 10px; font-weight: 600;}
.stationLayout .stationIn > p {font-size: 16px; color: #333; margin: 16px 0;}
.stationLayout .stationIn > p > strong {display: block; font-weight: 500;}

.busTimeTable .krds-table-wrap {margin-bottom: 40px;}
.busInfoTxt.text_red {color: #FF0000; margin-top: 6px;}

/* 주요업무계획 */
.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;}
.yearMBIn div.on {overflow-x:auto;}
.yearMBIn div.on img { min-width: 600px; width: 100%;}
.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;}

/* 조직안내 */
.organiChart {overflow:hidden; margin-bottom:80px;}
.orginBox.blue { max-width:220px; color:#fff; font-size:24px; font-weight: 700; text-align:center; padding:19px 0; margin: 10px auto 30px; position:relative; border-radius: 59px; background: #0F53D3 url(/template/template1/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;}

.orginLineLayout {}
    .olineLIn {padding:38px 0px 0; overflow:hidden;}
    .olineLIn:before {display:block; content:'';height:1px; background-color:#D7D7D7; width: calc(80% + 8px); margin:0 auto; }
    .olineLIn > li{float:left; width:20%; min-width: 178px; text-align:center;}
    .olineLIn > li:first-of-type .olineBox {margin: 0 16px 0 8px;}
    .olineLIn > li:nth-of-type(2) .olineBox {margin: 0 0px 0 24px;}
    .olineLIn > li:nth-of-type(3) .olineBox {margin: 0 16px;}
    .olineLIn > li:nth-of-type(4) .olineBox {margin: 0 24px 0 0px;}
    .olineLIn > li:last-of-type .olineBox {margin: 0 8px 0 16px;}
        .olineBox{margin:0 8px; max-width:100%; }
            .divisionBox {background: #0078C3; border-radius: 0px 10px 10px 10px; text-align:center; display:block; padding:13px 0; color:#fff; font-size:18px; font-weight: 700; 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;}
            .divisionBox:hover {background: #0F53D3;}
            /* .divisionBox:after {width:10px; height:10px; background-color:#2D3B9C; position:absolute; left:0; top:0; display:block; content:'';} */
            .divisionBox + ul {margin-top: 14px; border: 1px solid #DBDBDB; border-radius: 10px; box-sizing: border-box;}
            .divisionSection {font-size:16px; border-top: 1px dashed #D7D7D7; margin:0 13px;}
            .divisionSection:first-child {border:none;}
            .divisionSection a {display:block; padding:12px 0; transition:all .3s; font-size:15px; color: #464C53; line-height: 150%;}
            
            .divisionBox:hover {background-color:#0F53D3; color:#fff;}
            .divisionSection a:hover {color:#0F53D3;}
               
.orginNolineBox {}          
.noLineIn {float:left;width: 50%;}
.noLineIn li {margin-left: 20%; margin-right: 38%; position:relative;}
.noLineIn li:before {display:block; content:''; width:0px ; height:402px; border-right: 1px solid #D7D7D7;position:absolute;}      
.noLineIn.right {text-align: right;}
.noLineIn.right li{margin-left: 38%; margin-right: 20%;}
.noLineIn li a{transition:all .3s; position:relative; max-width:220px; border:1px solid #178FFF; border-radius: 0 10px 10px 10px; color:#0078C3; font-weight: 700; background-color:#fff; display:block; padding:13px 0; text-align:center;margin-top:20px; font-size:18px; box-sizing: border-box;}

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

/* .noLineIn li a:after {width:10px; height:10px; background-color:#2D3B9C; position:absolute; left:0; top:0; display:block; content:'';} */

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

.noLineIn li a:hover, .noLineIn li.on a {background-color:#0F53D3; border-color: #0F53D3; color:#fff;}

.originListLayout {margin-bottom:40px;}
.originLTitle {position:relative; display: flex; justify-content: space-between; align-items: center;}
.originTBox .table_normal tbody tr td:first-child {color:#272787;}
.originLTitle .conT2 {font-size: 24px; font-weight: 700; color: #1E1E1E;}
.originLTitle .bu_l_blue {position:absolute; right:0; top:0;}
.originLTitle .conT2 .txt_gray {font-size:17px; color: #464C53; vertical-align:middle; margin-left: 8px;}

.originListLayout .onAccordionHeader {background: #fff;}
.originListLayout .onAccordionHeader .txt {font-weight: 700;}
.originListLayout .onAccordionItem {border: none; background: none;}
.originListLayout .onAccordionContent::-webkit-scrollbar {display:none;}
.originListLayout .accoCon {padding: 32px 26px 26px 30px; background: #F8F9FB; box-sizing: border-box; line-height: 150%; font-size: 17px; color: #131416;}
.originListLayout .accoCon .conP > div {margin-top:10px}
.originListLayout .accoCon .conP > div:first-child {margin-top:0;}
.originListLayout .accoCon .conBox {background-color:#F8F9FB; overflow:hidden;}
.originListLayout .accoCon .onDotList {display: flex; flex-wrap: wrap;}
.originListLayout .accoCon .onDotList li {flex: 0 0 50%; box-sizing: border-box; color: #464C53;}
.originListLayout .arrowBtnBox{color:#D7D7D7; font-size:18px; display:block; transition:all .3s; transform: rotate(90deg);}
.originListLayout .onAccordionItem .accoTableTitle {transition: all 0.3s; margin-bottom: 0; background: #fff; height: 73px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px 0 2px;}

.visionLayout {text-align:center; background-color: #F8F8F9;}
.visionLayout > img {width: 100% !important; height: auto !important; min-width: 640px;}

    .accoTable ul li:first-chlid .accoTableTitle {border-top:none;}
    .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;}
        
    /* .accoTable .arrowBtnBox {position:absolute; top:22px; right:20px; transition: all .3s; font-size:18px;} 
    .accoTable .arrowBtnBox a {display: inline-block; width: 20px; height: 20px; color:#D7D7D7;}
    .accoTableCon .conT4 {position:relative;}
    .accoTableCon .conT4 a {position:absolute; right:0; bottom:0;} */

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

/* 원장인사말 */
.onHelloMessage { position: relative; margin-bottom: 40px; }
.onHelloMessage > p { color: #090909; font-size: 40px; font-weight: 700; left: 0; bottom: 118px; }
.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: wrap; width: 100%; row-gap:10px;}
    .applyFilterTitle {flex-shrink: 0;}
    .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/template1/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 #f0f0f0; max-height: 187px; min-height: 187px; width: 100%; height: 100%; box-sizing: border-box; border-radius: 5px; overflow: hidden;}
.galleryThumb img {width: 100%; height: 100%; object-fit: contain;}
.galleryThumb.noImage img {object-fit: cover;}

/* RES - 연구분야 */
/* 환경연구정보서비스 */
.directorList.environment > li {padding: 30px 40px 32px 38px; box-sizing: border-box;}

/* 연구분야 각 분야별 페이지 */
.departmentIntro {display: flex;}
    .departmentIntroL .onT2 {margin: 0;}     
    .departmentIntroR {flex: 1 1 370px;}
    .departmentIntroIcon {border: 1px solid #EEEEEE; border-radius: 20px; display: flex; justify-content: center; padding: 24px 0;}
    .departmentIntroIcon > li {display: flex; flex-direction: column; width: 100%; align-items: center;}
    .departmentIntroIcon.oneRowType > li {flex:1; padding: 0;}
    .departmentIntroIcon > li > div {margin-bottom: 18px;}
    .departmentIntroIcon > li > p {font-size: 15px; line-height: 130%; color: #464C53; text-align: center; width: 140px;}
        .introCircle > div {width: 60px; height: 60px; border-radius: 50%;}
        /* .introCircle.navy > div {background: #4661BC;}
        .introCircle.green > div {background: #119A73;}
        .introCircle.blue > div {background: #267FD2;}
        .introCircle.purple > div {background: #8968CC;}
        .introCircle.clay > div {background: #D4A44B;} */
        
.departmentTabBox { border: 1px solid #D7D7D7; margin-bottom: 12px; border-radius: 50px; overflow: hidden; position: relative; margin-bottom: 40px; box-sizing: border-box; padding: 4px;}
.onTab.department { padding: 4px; border: none; box-sizing: border-box;} 
.onTab.department > li { width: 100%; flex: 1 1 auto; max-width: none; background: none; border: none; font-size: 16px; font-weight: 600; height: 55px; text-align: center; border-radius: 50px; border: 1px solid #fff;} 
.onTab.department > li a { position: relative; justify-content: center; padding: 13px 16px; box-sizing: border-box; border-radius: 50px; } 
.onTab.department > li.on {border: 1px solid #d7d7d7;background: #0F53D3;} 
.onTab.department > li.on::before {display: none;}
.onTab.department > li.on a { color: #fff; } 
.onTab.department > li.on a::before { opacity: 0.2; }

.departmentTabBox.swiper .onTab.department {padding: 0;}
.departmentTabBox.swiper .onTab.department > li {width: auto !important;flex: 1 1 auto;min-width: max-content;box-sizing: border-box;} 
.departmentTabBox.swiper .swiper-button-prev,
.departmentTabBox.swiper .swiper-button-next {width: 32px; height: 32px; border: 1px solid #CDD1D5; border-radius: 50%; background: #fff; color: #33363D; margin-top: 0; transform: translateY(-50%);}
.departmentTabBox.swiper .swiper-button-prev {left: 22px;}
.departmentTabBox.swiper .swiper-button-next {right: 22px;}
.departmentTabBox.swiper .swiper-button-next:after, 
.departmentTabBox.swiper .swiper-button-prev:after {font-size: 15px; font-weight: 600;}
.departmentTabBox.swiper .swiper-button-next:after {margin-left: 2px;}
.departmentTabBox.swiper .swiper-button-prev:after {margin-right: 2px;}
.departmentTabBox.swiper .swiper-button-next.swiper-button-disabled, 
.departmentTabBox.swiper .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.departmentTabBox.swiper .swiper-button-prev + .swiper-button-prevBg {z-index: 1; position: absolute; top: 0; left: 0; display: block; width: 64px; height: 67px; background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));}
.departmentTabBox.swiper .swiper-button-next + .swiper-button-nextBg {z-index: 1; position: absolute; top: 0; right: 0; display: block; width: 64px; height: 67px; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));}
.departmentTabBox.swiper .swiper-button-prev.swiper-button-disabled + .swiper-button-prevBg {display: none;}        
.departmentTabBox.swiper .swiper-button-next.swiper-button-disabled + .swiper-button-nextBg {display: none;}

.departConTitle {padding-bottom: 24px; border-bottom: 1px dashed #C6C6C6; margin-bottom: 24px; color: #464C53;}
.departConTitle .onSubText {font-size: 15px;}
.departDetailInfo {display: flex; gap: 30px; margin-bottom: 30px;}
.departDetailInfo li {display: flex; align-items: center;}
.departDetailInfo li > div {width: 33px; height: 33px; border-radius: 50%; margin-right: 9px;}
.departAdres {background: #DEEBFF url(/template/template1/assets/img/sub/departAdres.svg) no-repeat center center;}
.departFax {background: #DEEBFF url(/template/template1/assets/img/sub/departFax.svg) no-repeat center center;}
.departDetailInfo li > p {font-size: 15px; color: #49454F;}
.departP {margin-bottom: 18px; color: #464C53; font-size: 17px; line-height: 150%;}
.departP + .onBtmS {color: #464C53; font-size: 17px; line-height: 150%;}
.departImg {display: flex; gap: 38px; margin-bottom: 25px;}
.departImg > div {border-radius: 10px; overflow: hidden; width: calc((100% - 38px) / 2); box-sizing: border-box; background:#F4F4F4;}
.departImg > div.longImgType {width: 100%; overflow-x: auto;}
.departImg > div.longImgType img {min-width: 450px;}
.departImg > div > img {width: 100%;}
.departImg > div.bordered {border: 1px solid #d7d7d7;}
.departImg > div.bordered.swiper-slide {position: relative; border:none}
.departImg > div.bordered.swiper-slide:after { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid #d7d7d7; content: ""; border-radius: 10px; left:1px; right: 1px; }

.departImg.swiper-wrapper {gap:0px;flex-wrap: nowrap;}
.departMoreBox {background: #F5F6FA; border-radius: 12px; padding: 24px; box-sizing: border-box; height: auto; position: relative; overflow-y: hidden;}
.departMoreBox .onDotList {display: flex; flex-wrap: wrap; gap: 8px;}
.departMoreBox .onDotList > li {flex: 0 0 calc(50% - 4px); box-sizing: border-box;}
.departMoreBtn {background: #ECEFFB; font-size: 15px; border-radius: 0 0 12px 12px; text-align: center; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 42px; display: none;}
.departMoreBtn > i {vertical-align: 0px; font-size: 12px; margin-right: 8px;}

.onConHead.department {margin-bottom: 24px;}
.onConHead.department > a {font-size: 15px; color: #464C53; transition: all 0.3s;}
.onConHead.department > a:hover {color: #0F53D3;}
.onConHead.department > a > i {font-size: 13px;}
.departReport {display: flex;gap: 35px;flex-wrap: wrap;}
.departReport > li {border: 1px solid #B1B8BE;border-radius: 12px;padding: 24px;width: calc((100% - 70px) / 3);box-sizing: border-box;transition: 0.3s border-color;}
.departReport > li .blueTitleBadge {border-radius: 4px; min-width: auto; padding: 0 8px; font-weight: 400; line-height: 24px;}
.departReport > li:hover {border-color: #0F53D3;}
.blueTitleBadge.water { color: #0584D3; }
.blueTitleBadge.air {color: #2553C9;}
.blueTitleBadge.weather {color: #199A90;}
.blueTitleBadge.env {color: #21986E;}
.blueTitleBadge.resource {color: #48A7CF;}
.departReportTitle {font-size: 19px; font-weight: 700; color: #1E2124; min-height: 58px; line-height: 150%; margin-bottom: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.departReportDate {font-size: 17px; color: #464C53; margin-bottom: 24px;}
.departReportBtn {display: flex;gap: 10px; width: 100%;}
.departReportBtn a.krds-btn {box-sizing: border-box;gap: 4px;flex: 1 1 50%;}
.departReportBtn a.krds-btn .btnTxt {flex: 1;text-align: center;}
.departReportBtn a > i {width: 16px;height: 16px;margin-left: auto;}
.departReportBtn a > i:before {content:"";}
.departReportBtn a > i.icon-next { background: url(/template/template1/assets/img/common/icon_arrow_blue.svg);}
.departReportBtn a > i.icon-link2 { background: url(/template/template1/assets/img/common/icon_newlink_blue.svg);}

.departImgSwiperWrap {position: relative; padding: 0 30px;}
.researchSwiperWrap {position: relative;}
.researchSwiperWrap .researchSwiper {padding-left: 1px; padding-right: 1px; margin: 0 -1px;}
.researchSwiperWrap .swiper-pagination-bullets {display: flex;justify-content: center;bottom: -40px;}
.researchSwiperWrap .swiper-pagination-bullet {width: 10px; height: 10px; background: #ddd; opacity: 1;} 
.researchSwiperWrap .swiper-pagination-bullet-active {background-color: #666; }
.researchSwiperWrap .departReport{ gap:0px; flex-wrap: nowrap; }
.researchSwiperWrap .swiper-button-next,
.departImgSwiperWrap .swiper-button-next { color: #999; display: block; width: 13px; height: 24px; right: -43px; transition: color 0.3s;}
.researchSwiperWrap .swiper-button-prev,
.departImgSwiperWrap .swiper-button-prev{ color: #999; display: block; width: 13px; height: 24px; left: -43px; transition: color 0.3s;}
.researchSwiperWrap .swiper-button-next:after,
.researchSwiperWrap .swiper-button-prev:after,
.departImgSwiperWrap .swiper-button-next:after,
.departImgSwiperWrap .swiper-button-prev:after {font-size: 24px; font-weight: 600;}
.researchSwiperWrap .departReport > li {width: 327px !important;}
.researchSwiperWrap .swiper-button-disabled {display: none;}
.researchSwiperWrap .swiper-pagination-progressbar { top: auto; bottom: -32px; background: #ccc; }
.researchSwiperWrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #000;}

.departImgSwiperWrap .swiper-button-next {right: 0;}
.departImgSwiperWrap .swiper-button-prev {left: 0;}

.researchSwiperWrap .swiper-button-next:hover,
.departImgSwiperWrap .swiper-button-next:hover {color: #000;}
.researchSwiperWrap .swiper-button-prev:hover,
.departImgSwiperWrap .swiper-button-prev:hover {color: #000;}


.departVisual {border-radius: 100px 20px 20px 20px; height: 509px; position: relative; padding: 5% 6%; box-sizing: border-box;}  
.departCon {width: 500px;}
.departCon h2 {font-size: 40px; font-weight: 700; line-height: 150%; margin-bottom: 23px;}
.departSystem {max-width: 410px; margin: 0; background: rgba(255, 255, 255, 0.4); border: 1px solid #fff; border-radius: 20px; overflow: hidden; position: relative;}
.departSystem .swiperComponent {position: absolute; top: 30px; right: 24px; width: fit-content; height: 12px; display: flex; align-items: center;}
.departSystem .swiperComponent .swiper-pagination {position: relative;top: auto;bottom: auto;width: auto;}
.departSystem .swiperComponent .swiper-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 3px; background: #B9B9B9; opacity: 1;}
.departSystem .swiperComponent .swiper-pagination .swiper-pagination-bullet-active {width: 22px; background: #2D3D8F; border-radius: 5px;}
.departSystem .swiperComponent .swiper-autoplay-btn {position: relative; z-index: 100; width: 12px; height: 16px; margin-right: 3px; line-height: 18px; color: #666;}
.departSystem .swiper-slide {padding: 24px;box-sizing: border-box;}    
    .departSystemTop > span {font-size: 15px; line-height: 150%; color: #464C53;}
    .departSystemBtn {display: flex; gap: 10px;} 
    .departSystemBtn > a {border-radius: 50px; height: 38px; color: #fff; font-size: 15px; line-height: 150%; line-height: 38px; padding: 0 16px;}
    .departSystemBtn > .btnL {background: #2D3D8F;}
    .departSystemBtn > .btnL > i {font-size: 12px;}
    .departSystemBtn > .btnR {background: #3F4751 url(/template/template1/assets/img/sub/departMoreIcon.svg) no-repeat 17px center; padding-left: 39px; box-sizing: border-box;}
    .departSystemBtm h3 {margin: 13px 0 3px;font-size: 22px;}
    .departSystemBtm span {color: #464C53;font-size: 17px;line-height: 150%;margin-bottom: 24px;display: block;}
    /* .departSystemBtm h3, .departSystemBtm span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} */
.departVisualImg {position: absolute; right: -50px; bottom: -37px; width: 65%; max-width: 820px; height: 436px; border-radius: 20px 100px 100px 100px; overflow: hidden;}
.departVisualImg > a {color: rgba(255, 255, 255, 0.8);font-size: 22px;transition: color 0.3s;}
.departVisualImg > a:hover {color: #fff}
    .departVisual01 {width: 270px;height: 270px;position: absolute;left: 0;top: 0;}
    .leftText {position: absolute;left: 51px;bottom: 107px;/* font-size: 22px; *//* color: #fff; */font-weight: 700;}
    .departVisual02 {width: 500px;height: 500px;position: absolute;left: 50%;bottom: -130px;transform: translateX(-50%);}
    .midText01 {position: absolute;top: 90px;right: 380px;transform: translateX(-50%);font-size: 19px;font-weight: 700;}
    .midText02 {position: absolute;top: 240px;right: 46px;transform: translateX(-50%);/* font-size: 32px; */font-weight: 700;}
    .midText03 {position: absolute;bottom: 36px;right: 100px;transform: translateX(-50%);font-size: 19px;font-weight: 700;}
    .departVisual03 {position: absolute;right: 40px;top: 36px;height: 228px;width: 200px;height: 200px;}
    .rightText {position: absolute;top: 45px;right: 200px;transform: translateX(-50%);font-size: 19px;font-weight: 700;}
.departVisual.water {background: #DDF1FE;}
.departVisual.water .departVisualImg {background: #0584D3;}
.departVisual.air {background: #DEE5F3;}
.departVisual.air .departVisualImg {background: #2553C9;}
.midText02.air {right: 0%;}
.midText03.air {right: 0%}
.departVisual.weather {background: #D9F3F1;}
.departVisual.weather .departVisualImg {background: #199A90;}
.departVisual.env {background: #DEF2E2;}
.departVisual.env .departVisualImg {background: #21986E;}
.departVisual.resource {background: #D3EDF8;}
.departVisual.resource .departVisualImg {background: #48A7CF;}

.visual02.other .midText01 {left: 45%;}
.visual02.other .midText02 {right: -10%;}
.visual02.other .midText03 {right: -7%;}
.visual03.other .rightText {top: 0%;}

.departVisual .midText01 {right: 215px;}
.departVisual .midText02 {right: 0;}
.departVisual .midText03 {right: -50px;}
.departVisual.water .midText03 {right:40px;}
.departVisual .rightText {top:30px;}
.departVisual.weather .midText03 {right: -18px;}
.departVisual.env .midText01 {top: 70px;}
.departVisual.env .midText03 {right: -18px;}
.departVisual.resource .midText01 {top: 70px;}
.departVisual.resource .midText03 {right: -15px;}

.pebbleBack01 {transform: translate(-11px, -49px) rotate(-140deg);transform-origin: center;}
.pebbleBack02 {transform: translate(-75px, 0px) rotate(-232deg);transform-origin: center;}
.pebbleBack03 {transform: translate(-24px, 1px) rotate(145deg);transform-origin: center;}

/* 환경종합정보 */
.sectionBox + .onT2 {margin-top: 64px;}
.bgEnv {height: 174px;background: #edf4ff url(/template/template1/assets/img/sub/bg_envData.png) right center no-repeat;border-radius: 12px;display: flex;flex-direction: column;line-height: 1.5;padding-left: 50px;justify-content: center;background-size: cover;margin-bottom: 64px;}
.bgEnv > p { color: #131416; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.bgEnv > span { color: #464C53; font-size: 17px; }
.sectionBox  {border: 1px solid #d7d7d7;border-radius: 12px;background: #fff;}
.sectionBox.main {padding: 35px 40px; flex:1;}
.sectionBox.main2 {padding: 35px 0px;}
.sectionBox.sub { border: 1px solid #CCD5E3; padding: 24px 30px; max-height: 192px; box-sizing: border-box;}
.waterSwiper {position: relative;padding: 0 20px;margin-bottom: 24px;}
.waterSwiper .swiper {padding: 0 20px;}
.waterSwiper .sectionBox > p { display: flex; justify-content: space-between; margin-bottom: 10px; }
.waterSwiper .sectionBox > p > span { color: #464C53; font-size: 19px; font-weight: 700; }
.waterSwiper .sectionBox .unit { display: block; font-size: 12px; font-weight: 400; color: #888888; }
/* .waterSwiper .sectionBox > p > a { background: #256EF4; color: #fff; font-size: 15px; border-radius: 6px; width: 76px; height: 32px; transition: background 0.3s; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.waterSwiper .sectionBox > p > a:hover {background: #004EDB;} */
.waterSwiper .sectionBox > p > a { color: #464C53; background-color: #fff !important; transition: color 0.3s;}
.waterSwiper .sectionBox > p > a i.svg-icon {background-color:#464C53 !important;  transition: all 0.3s;}
.waterSwiper .sectionBox > p > a:hover {color: #0F53D3;}
.waterSwiper .sectionBox > p > a:hover .svg-icon {background-color:#0F53D3 !important; }
.waterSwiper .sectionBox > p > a:hover { }
.waterSwiper .swiper-button-prev { width: 40px; height: 40px; left: 20px; }
.waterSwiper .swiper-button-next { width: 40px; height: 40px; right: 20px; }
.waterSwiper .swiper-button-disabled {display: block;}
.waterChartBox {height: 100px;}
.waterChartPrimaryListsTit { width: calc(100% - 80px); color: #1e1e1e; font-size: 19px; font-weight: 700; }
.waterChartPrimaryLists { width: calc(100% - 80px); margin: 0 auto; position: relative;}
.waterChartPrimaryLists li { border-radius: 12px; overflow: hidden; height: 175px; transition: 0.3s; position: relative; flex:1 1 auto;}
.waterChartPrimaryLists li:last-child {margin-right: 0 !important;}
.waterChartPrimaryLists li > .frontContent { background: #F5F6FA; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }
.waterChartPrimaryLists li > .frontContent > p { color: #464C53; font-size: 17px; font-weight: 700; text-align: center; width: calc(100% - 20px); line-height: 1.5; }
.waterChartPrimaryLists li > .hoverContent { position: absolute; width: 100%; line-height: 1.5; height: 100%; top: 150%; opacity: 0; background: #ECEFFB; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.3s; z-index: 1; }
.waterChartPrimaryLists li > .hoverContent > * {opacity:0; transition: opacity 0.3s; transition-delay: 0.2s;}
.waterChartPrimaryLists li:hover > .hoverContent { opacity: 1; top: 0; z-index: 4; }
.waterChartPrimaryLists li:hover > .hoverContent > * {opacity:1;}
.waterChartPrimaryLists li > .hoverContent > p { color: #464C53; font-size: 17px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.waterChartPrimaryLists li > .hoverContent > span { color: #464C53; font-size: 15px; text-align: center; width: 80%; margin-bottom: 10px; }
.waterChartPrimaryLists li:first-child .hoverContent span {font-size: 14px;} 
.waterChartPrimaryLists li > .hoverContent > a { color: #464C53; transition: 0.3s;}
.waterChartPrimaryLists li > .hoverContent > a:hover {color: #0F53D3 ;}
.waterChartPrimaryLists li > .hoverContent > a:hover i {background-color: #0F53D3 !important;}
.waterChartPrimaryLists .swiper-button-prev {left:-15px;}
.waterChartPrimaryLists .swiper-button-next {right: -15px;}

/* 환경데이터 전용 테이블 */
.onSearchBox.environmentSearchBox {padding: 34px 0; }
.onSearchBox.environmentSearchBox select {font-size: 16px;}
.onSearchBox.environmentSearchBox .form-group {gap: 5px;}
.selectValOption02 option {display: none;} 
.selectValOption02 option.on, 
.selectValOption02 option.default {display: block;}
.selectValOption02Wrap {min-width: 500px;}
.selectYearWrap {max-width: 105px;}
.selectMonthWrap {max-width: 90px;}
 .twoPartTableContainer { position: relative; width: 100%; overflow: hidden; }
 .twoPartTable {display: none;}
 .twoPartTable.on {display: block;}
.twoPartTableWrapper { display: flex; }
.leftFixedColumns { flex-shrink: 0; width: auto; overflow: hidden; }
.fixedTable { width: 100%; border-collapse: collapse; }
.fixedTable th, .fixedTable td { text-align: left; white-space: nowrap; }
.fixedTable th { position: sticky; top: 0; z-index: 10; }
.rightScrollColums { flex: 1; overflow-x: auto; overflow-y: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.scrollableTable { width: 100%; border-collapse: collapse; }
.scrollableTable th, .scrollableTable td { text-align: left; white-space: nowrap; }
.scrollableTable th { position: sticky; top: 0; z-index: 5; }

/* 국가시료은행 시료보관 현황 */
.sectionBoxWrapper {display: flex;gap: 34px;margin-top: 34px;margin-bottom: 64px;}
.envdataSatellite { flex: 1 1 auto; max-width: 623px; width: 100%; display: flex; flex-direction: column; }
.envdataSpecimen { flex: 1; }
.envdataSpecimen ul.sectionBox.main {padding: 0 15px;}
.envdataSpecimen > ul > li{position: relative;border-bottom: 1px dashed #d7d7d7;padding: 24px 14px 20px;}
.envdataSpecimen > ul > li:last-child {border: none;}
.envdataSpecimen > ul > li > p { color: #464C53; font-size: 19px; font-weight: 700; position: absolute; }
.envdataSpecimen ul > li > p > span.subTxt { color: #666; font-size: 13px; font-weight: 400; display: block; }
.envdataSpecimen ul > li > .specimenChartBox{height: 120px;}
.envdataSpecimen ul > li > .specimenChartBox canvas {position: absolute;right: 14px;top: 24px;z-index:10;}
.envdataSpecimen .legendList {left: 14px;bottom: 20px;}
.envdataSpecimen .legendTotal {right: 14px;width: 120px;height: 120px;top: 24px;}
.envdataSpecimen .legendTotalIn .unit {display: none;}

/* 환경종합정보(AS_IS) start */
/* 환경종합정보 */
.pollutionTab.departmentTabBox.swiper .onTab.department > li{min-width: auto;}
.envdataBox {position: relative; padding: 65px 0 24px; background-color: #F7F8FA;}
.envdataBox .swiper-button-next {right: auto; left: calc(100% + 20px); transform: translateY(-50%); width: 17px; margin-top: 0; background-size: 17px; z-index: 0;}
.envdataBox .swiper-button-prev {left: auto; right: calc(100% + 20px); transform: translateY(-50%); width: 17px; margin-top: 0; background-size: 17px; z-index: 0;}
.envdataBoxIn {padding: 0 65px 65px 65px; overflow: hidden;}

.envDataHead {position: relative;}
.envDataHead h3 {margin: 0 0 15px 0; font-size: 20px; font-weight: 500; color: #000000;}
.envDataHead h3 img {margin-right: 12px; vertical-align: -14px;}
.envDataHead .selectric-wrapper {display: inline-block;}
.envDataHead .selectric .button {display: block;}
.envDataHeadR {display: none; position: absolute; right: 0; bottom: 0;}

/* 환경위성 */
.envdataSatelliteBox {position: relative;display: flex;flex-wrap: wrap;}
.envdataSatelliteBoxIn {display: flex;align-items: flex-start;}
.envdataSatelliteBox h3 {margin: 0 0 22px 0; font-size: 20px; font-weight: 500; color: #000000;}
.envdataSatelliteBox h3 img {margin-right: 15px;}
.envdataSatelliteBox p {margin-bottom: 23px;font-size: 17px;font-weight: 400;color: #464C53;margin-right: 43px;}
.envdataSatelliteBox a {    margin: 0 8px 0 0; padding: 3px 8px;font-size: 13px;font-weight: 400;border: 1px solid #DBDBDB;color: #666666;background-color: #ffffff;transition: all 0.3s;}
.envdataSatelliteBox a:hover {background-color: #003CC8;}
.envdataSatelliteBox a:last-child {margin-right: 0;}

.envdataSatelliteBox > img {margin-left: 55px;}

.envdataSatelliteBtns {margin-top: auto;}
.envdataSatelliteBtns a {margin-bottom: 8px;}

.waterSwiper .waterChartBox canvas {position: absolute;right: 30px;bottom: 20px;z-index: 10;}

/* 물환경 데이터 정보 */
.envDataWaterStatus {position: relative; margin-bottom: 106px;}
.envDataWaterStatusSwiper {position: relative; overflow: hidden;}
.envDataWaterStatusSwiper > ul > li {position: relative; float: left; width: calc(16.66% - 20px); height: 170px; margin-right: 24px; padding: 18px 14px; text-align: center; border-radius: 10px; border: 1px solid #E8E8E8; background-color: #ffffff; box-sizing: border-box; overflow: hidden;}
.envDataWaterStatusSwiper > ul > li:last-child {margin-right: 0;}
.envDataWaterStatusSwiper > ul > li > strong {display: block; margin-bottom: 16px; font-size: 16px; font-weight: 500; color: #000000;}
.envDataWaterStatusSwiper > ul > li > img {margin-bottom: 12px;} 
.envDataWaterStatusSwiper > ul > li > a {position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: block; width: 63px; line-height: 26px; font-size: 13px; font-weight: 400; color: #666666; border-radius: 13px; border: 1px solid #DBDBDB; background-color: #ffffff; box-sizing: border-box; z-index: 1;}
.envDataWaterStatusSwiper > ul > li:hover .envDataWaterStatusIn {opacity: 1; transition: all 0.3s 0.3s;}
.envDataWaterStatusSwiper > ul > li:hover .envDataWaterStatusBox > span:after {transform: translate(-50%, -50%) scale(1); transition: all 0.3s 0.2s;}
.envDataWaterStatusSwiper > ul > li:hover .envDataWaterStatusBox > span:before {transform: translate(-50%, -50%) scale(1);}
.envDataWaterStatusSwiper > ul > li:hover > a {border-color: #ffffff;}

.envDataWaterStatusBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 12px; border-radius: 24px; box-sizing: border-box; color: #fff; z-index: 0;}
.envDataWaterStatusIn {position: relative; height: 100%; padding: 0 8px; opacity: 0; transition: 0.3s;}
.envDataWaterStatusIn > strong {position: relative; display: block; margin-bottom: 4px; font-size: 16px; font-weight: 400;} 
.envDataWaterStatusIn > p {margin: 0; font-size: 14px; font-weight: 400; opacity: 80%;}
.envDataWaterStatusIn > a {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: inline-block; width: 142px; font-size: 14px; font-weight: 500; line-height: 32px; border-radius: 16px; color: #003CC8; background-color: #fff;}
.envDataWaterStatusIn > a > img {vertical-align: -1px;}
.envDataWaterStatusBox > span:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%;  transition: all 0.3s; background-color: #003CC8;}
.envDataWaterStatusBox > span:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%; transition: all 0.3s; background-color: #F7F8FA;}

/* 공기질 데이터 */
.envDataAir > ul > li {position: relative;width: 100%;height: auto;border-radius: 10px;background-color: #ffffff;box-sizing: border-box;}

/* 데이터 차트 탭 */
.envDataChartTab {width: 90px;}
.envDataChartTab > li > a {display: inline-block; width: 80px; padding-left: 10px; line-height: 30px; border-radius: 16px; font-size: 14px; font-weight: 500; color: #666666;}
.envDataChartTab > li > a > i {display: inline-block; margin-left: 2px; font-size: 12px; vertical-align: 0; color: #fff;}
.envDataChartTab > li > a:focus {outline: 2px dashed #ff0000;}
.envDataChartTab > li.on > a {color: #ffffff; background-color: #002E83;}
.envDataChartTab > li.on > div {display: block;}
.envDataChartTab > li.on > span {display: block;}

.envDataChartList > li > span { display: none; font-size: 12px;float: right;margin-bottom: 10px;margin-right: 24px;}
.envDataChartList > li > div {display: none;}
.envDataChartList > li.on > div {display: block;}
.envDataChartList > li.on > span {display: block; }

.envDataLegend { left: 20px;bottom: -15px;width:100%;text-align: center;margin-top: 15px;}
.envDataLegend > ul {display: inline-flex;padding: 4px 10px;border: 1px solid #E8E8E8;border-radius: 13px;flex-wrap: wrap;gap: 4px;}
.envDataLegend > ul > li {display: inline-flex;margin: 0 4px;}
.envDataLegend > ul > li .checkbox {cursor: context-menu;align-items: center;justify-content: center;gap: 3px;}
.envDataLegend > ul > li .checkbox > .checkBoxText {font-size: 13px;vertical-align: middle;}
#tab1 .envDataLegend > ul > li:nth-of-type(1) .checkbox > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 0; border-bottom: 2px solid #5B8A29; margin: 0 3px 0 4px; vertical-align: 3px;}
#tab1 .envDataLegend > ul > li:nth-of-type(2) .checkbox > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 0; border-bottom: 2px dashed #C5285E; margin: 0 3px 0 4px; vertical-align: 3px;}
#tab1 .envDataLegend > ul > li:nth-of-type(3) .checkbox > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 2px; background-image: url(/template/template1/assets/img/sub/chartLineBg.png); margin: 0 3px 0 4px; vertical-align: 3px;}
#tab1 .envDataLegend > ul > li:nth-of-type(4) .checkbox > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 0; border-bottom: 2px dotted #428CE1; margin: 0 3px 0 4px; vertical-align: 3px;}
#tab1 .envDataLegend > ul > li:nth-of-type(5) .checkbox > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 2px; background-image: url(/template/template1/assets/img/sub/chartLineBg05.png); margin: 0 3px 0 4px; vertical-align: 3px;}

#tab2 .envDataLegend > ul > li .checkbox.checked-style-0 > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 0; border-bottom: 2px solid #5B8A29; margin: 0 3px 0 4px; vertical-align: 3px;}
#tab2 .envDataLegend > ul > li .checkbox.checked-style-1 > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 0; border-bottom: 2px dashed #C5285E; margin: 0 3px 0 4px; vertical-align: 3px;}
#tab2 .envDataLegend > ul > li .checkbox.checked-style-2 > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 2px; background-image: url(/template/template1/assets/img/sub/chartLineBg.png); margin: 0 3px 0 4px; vertical-align: 3px;}
#tab2 .envDataLegend > ul > li .checkbox.checked-style-3 > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 0; border-bottom: 2px dotted #428CE1; margin: 0 3px 0 4px; vertical-align: 3px;}
#tab2 .envDataLegend > ul > li .checkbox.checked-style-4 > .checkBoxText:before {display: inline-block; content: ""; width: 30px; height: 2px; background-image: url(/template/template1/assets/img/sub/chartLineBg05.png); margin: 0 3px 0 4px; vertical-align: 3px;}

input[type="checkbox"] + .marker {display:inline-block; width:14px; height:14px; border:1px solid #888888; border-radius:2px; cursor:pointer; box-sizing:border-box; background-color: #fff;}
    input[type="checkbox"]:checked + .marker {position:relative; background-color:#003CC8;}
    input[type="checkbox"]:checked + .marker:after {position:absolute;top:0;left:50%;display:inline-block;content:"";width:4px;height:8px;border-bottom:2px solid #fff;border-right:2px solid #fff;transform:translateX(-50%) rotate(45deg);}
.envDataLegend > ul > li input[type="checkbox"] + .marker {width: 14px;height: 14px;vertical-align: middle;}
.envDataLegend > ul > li input[type="checkbox"]:focus + .marker {outline: 1px solid;}
.envDataLegend > ul > li input[type="checkbox"]:checked + .marker:after {width: 2px;height: 6px;}


/* 미세먼지 차트 */
.envDataDustBox { left: 10px;bottom: 30px;width: 100%;height: 210px;padding-top: 26px;}
.envDataDustBox > canvas {width: 100%; height: 100%;}

/* 대기정보 예보 */
.envDataMapRightTableBox {overflow: auto;}
.envDataMap {position: relative;display: flex;}
.envDataMap .table_normal thead tr th {padding: 4px 0; font-size: 12px; border-right: 1px solid #e8e8e8;}
.envDataMap .table_normal thead tr:first-child th:last-child {border-right: 0;}
.envDataMap .table_normal tbody tr th {font-size: 12px; background-color: #fff;}
.envDataMap .table_normal tbody tr td {font-size: 12px; padding: 4px 0; text-align: center;}
.envDataMap .table_normal tbody tr:first-child th,
.envDataMap .table_normal tbody tr:first-child td {background-color: #c9e0ff;}

.envDataMapRight {display: inline-block; width: calc(100% - 200px);}
.envDataMapRight h4 {margin-bottom: 10px;font-size: 19px;font-weight: 500;color: #464C53;font-weight: 700;}
.envDataMapRight p {margin: 0 0 24px 0;font-size: 17px;font-weight: 400;color: #464C53;}
.envDataMapRight p strong {color: #003CC8;}
.dustMapR {margin-top: 10px;}
.envDataMapDate {display: block;font-size: 12px;color: #666;}
.envDataToday {position: absolute;top: -54px;left: 50%;transform: translateX(-50%);text-align: center;white-space: nowrap;}
.envDataToday > strong {display: inline-block;margin-bottom: 4px;padding: 0 10px;font-weight: 500;line-height: 30px;border-radius: 16px;color: #fff;background-color: #002E83;font-size: 14px;}
.envSource {display: block; color: #464C53;font-size: 13px;text-align: right; margin-top: 12px;}
.zidoSvg {width: 170px; height: auto;}

.envDataMapError {height: 335px; border: none; text-align: center; box-sizing: border-box; background-color: #EDF0F5;}
.envDataMapError .envDataMapErrorIn {display: block;}
.envDataMapErrorIn {display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.envDataMapErrorIn > img {margin-bottom: 10px;}
.envDataMapErrorIn > strong {display: block; font-size: 15px; font-weight: 500; color: #002E83;}

/* 생활환경 데이터 */
.envDataLife {margin-bottom: 60px;}
.envDataLife > ul {overflow: hidden;}
.envDataLife > ul > li {position: relative; float: left; height: 286px; box-sizing: border-box;}

.envDataHeavyMetal {width: calc(65% - 20px); margin-right: 20px; padding: 14px; border-radius: 10px; border: 1px solid #E8E8E8; background-color: #ffffff;}
.envDataHeavyMetal > strong {display: block; margin-bottom: 14px; font-size: 17px; font-weight: 500; color: #000000;}


.envDataGas {width: 35%;}
.envDataGas > strong {display: block; font-size: 18px; font-weight: 500; text-align: left; color: #000;}
.envDataGas > strong > span {display: inline-block; margin-left: 5px; font-size: 12px; font-weight: 400; color: #666;}
.envDataGasBox {position: relative; height: 235px; padding-top: 10px;}
.envDataGasBox > canvas {width: 100%; height: 100%;}

.envdataList > li.gasData {width: calc(50% - 30px); padding-top: 0; border-radius: 0; background-color: transparent;}
.gasDataTitle {display: block; font-size: 18px; font-weight: 500; text-align: left; color: #000;}
.gasDataTitle span {display: inline-block; margin-left: 5px; font-size: 12px; font-weight: 400; color: #666;}
.gasDataChartBox {position: relative; height: 190px; padding-top: 10px;}
.gasDataChartBox canvas {width: 100%; height: 100%;}

/* 정보시스템 안내 */
.envDataSystem {position: relative;}
.envDataSystemSwiper {overflow: hidden;}
.envDataSystemSwiper > ul > li {position: relative; float: left; height: 200px; padding-top: 20px; text-align: center; border-radius: 20px; overflow: hidden; box-sizing: border-box; background-color: #fff;} 
.envDataSystemSwiper > ul > li > img {width: 80px; height: 80px; margin-bottom: 8px;}
.envDataSystemSwiper > ul > li > strong {display: block; font-size: 16px; font-weight: 500; color: #444444;}
.envDataSystemSwiper > ul > li:hover .envDataSystemIn {opacity: 1; transition: all 0.3s 0.3s;}
.envDataSystemSwiper > ul > li:hover .envDataSystemBox > span:after {transform: translate(-50%, -50%) scale(1); transition: all 0.3s 0.2s;}
.envDataSystemSwiper > ul > li:hover .envDataSystemBox > span:before {transform: translate(-50%, -50%) scale(1);}

.envDataSystemSwiper > ul > li.on .envDataSystemIn {opacity: 1; transition: all 0.3s 0.3s;}
.envDataSystemSwiper > ul > li.on .envDataSystemBox > span:after {transform: translate(-50%, -50%) scale(1); transition: all 0.3s 0.2s;}
.envDataSystemSwiper > ul > li.on .envDataSystemBox > span:before {transform: translate(-50%, -50%) scale(1);}

.envDataSystemLine {position: absolute; left: 50%; transform: translate(-50%, -45px); width: 100%; border-top: 10px solid #ffffff;}

.envDataSystemBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 16px; border-radius: 24px; box-sizing: border-box; color: #fff; z-index: 0;}
.envDataSystemIn {position: relative; height: 100%; opacity: 0; transition: 0.3s;}
.envDataSystemIn > strong {position: relative; display: block; margin-bottom: 8px; font-size: 20px; font-weight: 400;} 
.envDataSystemIn > p {margin: 0; font-size: 16px; font-weight: 400; opacity: 80%;}
.envDataSystemIn > a {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: inline-block; width: 142px; font-size: 14px; font-weight: 500; line-height: 32px; border-radius: 16px; color: #003CC8; background-color: #fff;}
.envDataSystemIn > a > img {margin-left: 4px; vertical-align: -1px;}
.envDataSystemBox > span:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%;  transition: all 0.3s; background-color: #003CC8;}
.envDataSystemBox > span:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%; transition: all 0.3s; background-color: #F7F8FA;}

.envdataListHover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 36px; border-radius: 24px; box-sizing: border-box; color: #fff; z-index: 0;}
        .envdataListHover div {position: relative; height: 100%; opacity: 0; transition: 0.3s;}
        .envdataListHover strong {position: relative; display: block; margin-bottom: 8px; font-size: 20px; font-weight: 400;} 
        .envdataListHover p {margin: 0; font-size: 16px; font-weight: 400; opacity: 80%;}
        .envdataListHover a {position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: inline-block; width: 142px; font-size: 14px; font-weight: 500; line-height: 32px; border-radius: 16px; color: #003CC8; background-color: #fff;}
        .envdataListHover a img {vertical-align: baseline;}
        .envdataListHover span:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%;  transition: all 0.3s; background-color: #003CC8;}
        .envdataListHover span:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%; transition: all 0.3s; background-color: #F7F8FA;}
.envdataList > li {position: relative; float: left; width: calc(25% - 30px); height: 237px; margin: 15px 15px; padding-top: 30px; text-align: center; border-radius: 24px; overflow: hidden; box-sizing: border-box; background-color: #fff;} 
.envdataList > li:hover .envdataListHover div {opacity: 1; transition: all 0.3s 0.3s;}
.envdataList > li:hover .envdataListHover span:after {transform: translate(-50%, -50%) scale(1); transition: all 0.3s 0.2s;}
.envdataList > li:hover .envdataListHover span:before {transform: translate(-50%, -50%) scale(1);}
    .envdataListIcon {width: 100px; height: 100px;}
    .envdataListTitle {display: block; margin: 14px 0 6px 0; font-size: 20px; font-weight: 500; color: #000;}

.envdataTitleBox {position: relative; margin-bottom: 66px; margin-left: 65px;}
.envdataTitleBox > span {font-size: 20px; font-weight: 400; color: #8D8D8D;}
    .envdataTitle {margin: 0; margin-bottom: 12px; font-size: 36px; font-weight: 500; line-height: 140%; color: #000;}

.envdataListBox {margin: -15px 0;}
    .envdataListBoxIn {position: relative; padding: 0 65px;}
    .envdataListBoxIn {margin-bottom: 100px;}
    .envdataListBoxIn:last-child {margin-bottom: 0;}
    .envdataList:after {display: block; content: ""; clear: both;}
    .envdataList > li {position: relative; float: left; width: calc(25% - 30px); height: 237px; margin: 15px 15px; padding-top: 30px; text-align: center; border-radius: 24px; overflow: hidden; box-sizing: border-box; background-color: #fff;} 
    .envdataList > li:hover .envdataListHover div {opacity: 1; transition: all 0.3s 0.3s;}
    .envdataList > li:hover .envdataListHover span:after {transform: translate(-50%, -50%) scale(1); transition: all 0.3s 0.2s;}
    .envdataList > li:hover .envdataListHover span:before {transform: translate(-50%, -50%) scale(1);}
        .envdataListIcon {width: 100px; height: 100px;}
        .envdataListTitle {display: block; margin: 14px 0 6px 0; font-size: 20px; font-weight: 500; color: #000;}

        .envdataListHover {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 36px; border-radius: 24px; box-sizing: border-box; color: #fff; z-index: 0;}
        .envdataListHover div {position: relative; height: 100%; opacity: 0; transition: 0.3s;}
        .envdataListHover strong {position: relative; display: block; margin-bottom: 8px; font-size: 20px; font-weight: 400;} 
        .envdataListHover p {margin: 0; font-size: 16px; font-weight: 400; opacity: 80%;}
        .envdataListHover a {position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: inline-block; width: 142px; font-size: 14px; font-weight: 500; line-height: 32px; border-radius: 16px; color: #003CC8; background-color: #fff;}
        .envdataListHover a img {vertical-align: baseline;}
        .envdataListHover span:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%;  transition: all 0.3s; background-color: #003CC8;}
        .envdataListHover span:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); display: block; content: ""; width: 320px; height: 320px; border-radius: 50%; transition: all 0.3s; background-color: #F7F8FA;}
    .envdataList > li.envdataListMain {background-color: transparent;}
        .envdataListMainIn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}

    .envdataList > li.envdataListMain a {display: block; margin-top: 12px; font-size: 14px; font-weight: 500; color: #003CC8;}
    .envdataList > li.envdataListMain span {font-size: 16px; font-weight: 400;}
    .envdataList > li.climateData {background-color: transparent;}
        .climateDataIn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
        .climateDataIn .cloud1 {position: absolute; right: 10px; animation: move-leftRight 3.3s infinite alternate-reverse ease-in-out;}
        .climateDataIn .cloud2 {display: inline-block; margin: 0;}
        .climateDataIn svg ellipse {transition: all 0.3s;}
        .climateDataIn svg ellipse.good {fill: #CEEBFF}
        .climateDataIn svg ellipse.moderate {fill: #D2EDB8}
        .climateDataIn svg ellipse.bad {fill: #FFE4BB}
        .climateDataIn svg ellipse.veryBad {fill: #FFDBDB}
            .climateDataLocal {display: block; padding-left: 14px; font-size: 15px; font-weight: 400; text-align: left; color: #000;}
            .climateDataLocal img {margin-left: 5px; vertical-align: top;}
            .climateDataList {position: relative; max-width: 206px; margin: 0 auto; overflow: hidden;}
            .climateDataList .swiper-button-prev {top: 40px; left: 35%; transform: translateX(0); width: auto; font-size: 20px; background-image: none;}
            .climateDataList .swiper-button-next {top: 58px; left: 35%; transform: translateX(0); width: auto; font-size: 20px; background-image: none;}
            .climateDataList > ul {position: absolute; top: 0; width: 100%; height: auto;}
            .climateDataList > ul > li {position: relative; font-size: 15px; font-weight: 500; color: #000;}
            .climateDataList > ul > li > span {position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; width: 40%; padding-right: 14px; text-align: right; box-sizing: border-box;}
            .climateDataList > ul > li > strong {position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: inline-block; width: 76%; padding-left: 14px; font-size: 24px; font-weight: 500; box-sizing: border-box;}

            .climateDataList .good {color: #008DEE;}
            .climateDataList .moderate {color: #53AD24;}
            .climateDataList .bad {color: #FF9319;}
            .climateDataList .veryBad {color: #FF5050;}
            
    .envdataList > li.waterData {width: calc(75% - 30px); padding: 0; border-radius: 0; background-color: transparent; overflow: hidden;}
    .waterDataBox {position: relative; float: left; width: 100%; height: 100%; text-align: left; overflow: hidden; box-sizing: border-box;}
    .waterDataBox canvas {float: right;}
    .waterDataBox > ul > li {margin-left: 1px; padding-right: 30px; border-right: 1px dashed #B5B5B5; box-sizing: border-box;}
        .waterDataHead {position: absolute; top: 0; right: 0; width: 100%; height: 20px; font-size: 18px; font-weight: 500; text-align: left; color: #000; z-index: 10;}
        .waterDataTitle {display: block; font-size: 16px; font-weight: 500; color: #000;}
        .waterDataTitle span {display: block; font-size: 12px; font-weight: 400; color: #888888;}

        .waterDataBtn {position: absolute; top: 14px; right: 16px; display: block; width: 40px; font-size: 13px; line-height: 24px; text-align: center; color: #666666; border: 1px solid #DBDBDB; border-radius: 13px; transition: all 0.3s; box-sizing: border-box;}

        .waterDataBtn:hover {border-color: #003CC8; color: #fff; background-color: #003CC8;}
        .waterDataVisualBox p {font-size: 15px;font-weight: 400;color: #333;}
        .waterDataVisualBox strong {display: block; font-weight: 500; color: #003CC8;}

        .waterDataVisualText {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 14px; font-weight: 500; text-align: center; color: #000;}
        .waterDataVisualText strong {font-size: 17px; font-weight: 500; color: #006BC8;}
        .waterDataVisualText span {font-size: 13px; font-weight: 400; color: #666;}

        .waterDataVisual {position: absolute; top: 50%; left: 50%;}
        .waterDataVisual.drop {left: auto;top: auto;bottom: 20px;right: 30px;}
        .waterDataVisual.drop .dropL {position: absolute; top: 0; right: -15px; animation: drop 3s linear infinite;}
        .waterDataVisual.drop .dropS {position: absolute; bottom: 60%; left: -30px; animation: drop 3.5s linear infinite;} 

        @keyframes drop {
            0% {opacity: 0; transform: translateY(0);}
            30% { opacity: 1; transform: translateY(30px);}
            100% { opacity: 0; transform: translateY(100px)}
        }

        .waterDataVisual.pollution {top: 58%; transform: translate(-50%, -50%); pointer-events: none;}
        .waterDataVisual.pollution svg {transform: scale(0.7);}
        .waterDataVisual.pollution .waterDataVisualText {font-size: 13px; font-weight: 400; color: #333;}
        .waterDataVisual.pollution .waterDataVisualText strong {font-size: 15px;}
        .waterDataVisual.pollution .waterDataVisualText strong:nth-of-type(2) {margin-top: 10px;}
        .waterDataVisual.pollution .pollutionS {position: absolute; bottom: 36px; right: 0; transform: scale(0.3); transform-origin: right bottom;}

        .waterDataVisual.fish .waterDataVisualText {top: auto; top: -55px; transform: translate(-50%, 0);}
        .waterDataVisual.fish .fishS1 {position: absolute; bottom: 50%; right: 10%; opacity: 0; animation: fish1 10s infinite;}
        .waterDataVisual.fish .fishS2 {position: absolute; bottom: 60%; left: 20%; opacity: 0; animation: fish2 8s 3s infinite;}
        .waterDataVisual.fish .fishS3 {position: absolute; bottom: 30%; right: 15%; opacity: 0; animation: fish3 8s 6s infinite;}

        @keyframes fish1 {
            0% {transform: rotate(0) translate(0, 0); opacity: 0;}
            30% {transform: rotate(20deg) translate(-10px, -10px); opacity: 1;}
            40% {transform: rotate(-20deg) translate(-10px, -10px); opacity: 1;}
            60% {transform: rotate(0) translate(-100px, 15px); opacity: 1;}
            100% {transform: rotate(0) translate(-150px, 0px); opacity: 0;}
        }
        @keyframes fish2 {
            0% {transform: rotate(180deg) translate(0, 0); opacity: 0;}
            10% {transform: rotate(160deg) translate(-10px, 10px); opacity: 1;}
            30% {transform: rotate(200deg) translate(-10px, 10px); opacity: 1;}
            80% {transform: rotate(180deg) translate(-100px, -15px); opacity: 1;}
            100% {transform: rotate(180deg) translate(-150px, 0px); opacity: 0;}
        }
        @keyframes fish3 {
            0% {transform: rotate(0) translate(0, 0); opacity: 0;}
            30% {transform: rotate(-20deg) translate(-10px, -10px); opacity: 1;}
            40% {transform: rotate(20deg) translate(-10px, -10px); opacity: 1;}
            60% {transform: rotate(0) translate(-100px, -15px); opacity: 1;}
            100% {transform: rotate(0) translate(-150px, 0px); opacity: 0;}
        }

        .waterDataVisual.algae .waterDataVisualText {top: auto; bottom: 18px; transform: translate(-50%, 0);}
        .waterDataVisual.algae .waterDataVisualText strong {font-size: 15px;}
        .waterDataVisual.algae .algaeS {position: absolute; top: 20px; right: 14px; transform-origin: center right; animation: algae 5s linear alternate infinite;} 

        @keyframes algae {
            0% {transform: scale(1);}
            100% {transform: scale(2.8);}
        }
        


    .envdataList > li.gasData {width: calc(50% - 30px); padding-top: 0; border-radius: 0; background-color: transparent;}
        .gasDataTitle {display: block; font-size: 18px; font-weight: 500; text-align: left; color: #000;}
        .gasDataTitle span {display: inline-block; margin-left: 5px; font-size: 12px; font-weight: 400; color: #666;}
        .gasDataChartBox {position: relative; height: 190px; padding-top: 10px;}
        .gasDataChartBox canvas {width: 100%; height: 100%;}

    .envdataList > li.satelliteData {width: calc(25% - 30px); padding-top: 0; text-align: left; overflow: visible; background-color: transparent;}
    .envdataList > li.satelliteData > strong {display: block; margin-bottom: 10px; padding-left: 8px; font-size: 18px; font-weight: 500; white-space: nowrap; color: #000;}
    .envdataList > li.satelliteData > strong > a {color: #000;}
    .envdataList > li.satelliteData > strong > a i {font-size: 14px;}
    .envdataList > li.satelliteData > a {position: relative; display: block; width: 100%; height: 215px; border-radius: 10px; border: 1px solid #B5B5B5;}
    .envdataList > li.satelliteData  img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
    
    .envdataList > li.airData {width: calc(75% - 30px); padding-top: 0; text-align: left; border-radius: 0; overflow: visible; background-color: transparent;}
    .envdataList > li.airData > strong {position: relative; display: block; margin-bottom: 10px; font-size: 18px; font-weight: 500; color: #000;}
    .envdataList > li.airData > strong > span {position: absolute; bottom: 0; right: 0; font-size: 14px; font-weight: 400; color: #666666;}
    .envdataList > li.airData .airDataIn {width: 100%; height: 215px; padding: 12px 10px 14px 10px; border-radius: 10px; box-sizing: border-box; background-color: #DFE9FF;}
    .envdataList > li.airData .airDataTab {float: left; width: 85px;}
    .envdataList > li.airData .airDataTab > li {width: 100%; margin-bottom: 6px; padding-left: 8px; border-radius: 14px; line-height: 27px; box-sizing: border-box; transition: all 0.3s;}
    .envdataList > li.airData .airDataTab > li a {display: block; font-size: 13px; font-weight: 400; color: #333333;}
    .envdataList > li.airData .airDataTab > li svg {opacity: 0;}
    .envdataList > li.airData .airDataTab > li:hover {background-color: #fff;}
    .envdataList > li.airData .airDataTab > li:hover a {color: #002E83;}
    .envdataList > li.airData .airDataTab > li.on {position: relative; background-color: #002E83;}
    .envdataList > li.airData .airDataTab > li.on a {color: #fff;}
    .envdataList > li.airData .airDataTab > li.on svg {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 1;}


    .envdataList > li.airData .airDataContents {float: right; width: calc(100% - 95px); height: 100%; border-radius: 5px; text-align: center; background-color: #fff;}
    .envdataList > li.airData .airDataContents li {display: none;}
    .envdataList > li.airData .airDataContents li.on {display: block; overflow-x: auto;}
    .envdataList > li.airData .airDataContents table {width: 100%; min-width: 400px;}
    .envdataList > li.airData .airDataContents thead th {height: 35px; font-size: 12px; font-weight: 500; color: #333; border-bottom: 1px solid #E8E8E8;}
    .envdataList > li.airData .airDataContents thead th:nth-child(3) {border-right: 1px solid #E8E8E8;}
    .envdataList > li.airData .airDataContents tbody {font-size: 13px; color: #333;}
    .envdataList > li.airData .airDataContents tbody tr {height: 25px;}
    .envdataList > li.airData .airDataContents tbody tr th {font-weight: 500; color: #333;}

    .envdataList > li.airData .airDataContents tbody tr td.good {color: #003CC8;}
    .envdataList > li.airData .airDataContents tbody tr td.usually {color: #53AD24;}
    .envdataList > li.airData .airDataContents tbody tr td.bad {color: #FF9319;}
    .envdataList > li.airData .airDataContents tbody tr td.veryBad {color: #FF5050;}
    

    

    .envImg1 {position: absolute; bottom: 0; left: 0; width: 100%;}
    .envImg2 {position: absolute; bottom: -20%; left: 0; width: 70%;}
    .envImg3 {position: absolute; bottom: 34%; right: 0; width: 20%;}
    .envImg4 {position: absolute; top: 65px; right: 88px; width: 45%;}

    /* 위성영상 */
    

    .legendList {position: absolute;bottom: 30px;left: 30px;}
    .legendBullet {display: inline-block; width: 5px; height: 5px; margin-top: 7px; vertical-align: top;}
    .legendText {display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 400;}

    .legendList.bottom {top: auto; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; text-align: center;}
    .legendList.bottom > li {display: inline-block; margin-right: 8px;}
    .legendList.bottom > li:last-child {margin-right: 0;}

    .legendTotal {position: absolute;right: 30px;bottom: 20px;width: 100px;height: 100px;}
    .legendTotalIn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
    .legendTotalIn span {font-size: 14px; font-weight: 500; color: #000;}
    .legendTotalIn strong {display: block; font-size: 14px; font-weight: 400; color: #666;}
    .legendTotalIn strong span {color: inherit; font-weight: 400;}

    

.dustGuideBox {background-color:#F6F6F6; height:50px; overflow:hidden; margin:0 0px 60px;}
.dustGuideBox ul li {float:left; width:20%; position:relative; padding-top:20px;}
.dustGuideBox ul li:before {content:"";position:absolute;left:0px;top:0px;right:-10px;height:15px;}
.dustGuideBox ul li p {width:100%; text-align:center; position:absolute; margin-top:-70px;}
.dustGuideBox ul li strong {float:left; padding-left:10px; font-weight:normal;}
.dustGuideBox ul li span {float:right; padding-right:10px;}
    .dustGBC01 {color:#0477a7}
    .dustGBC01:before {background-color:#56b4e9}
    .dustGBC02 {color:#0e7305}
    .dustGBC02:before {background-color:#009e73}
    .dustGBC03 {color:#9a6703}
    .dustGBC03:before {background-color:#e69f00}
    .dustGBC04 {color:#ca3300}
    .dustGBC04:before {background-color:#d55e00}
    .dustGBC05 {color:#6f6f6f}
    .dustGBC05:before {background-color:#a8a8a8}



.dustMapLayout {background-color:#fff; padding:14px;}


.dustMapL {width:338px; position:absolute;} 
    .measureDay {margin-bottom:40px; font-size:14px; font-weight:400;}
    .dustMapLWrapper {
    
    width: 282px;
    height: 381px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(217,217,217,0.2);
    margin-right: 32px;
    border-radius: 12px;
    flex: 0 0 auto;
}
    .dustMapLIn {position: relative;bottom: -20px;width:160px;}
        .zidoSvg {width:100%;}
    .warterQuMap {background-color: #EFF8FF;}
    .warterQuMap img {width:100%;}
    .dustMapName {position:absolute; color:#fff; width:30px; text-align:center; line-height:18px; font-size:10px;}
    .dustMapName:before {content:""; position:absolute; left:0px; top:0px; right:0px; bottom:0px; background-color:#000; opacity:0.6;  border-radius:11px;}
    .dustMapName span {position:relative;}
        .map_SEJONG {top:35%; left:25%;}
        .map_JEJU {top: 91%; left: 7%;}
        .map_GYEONGNAM {top: 64%; left: 50%;}
        .map_GYEONGBUK {top: 42%; left: 68%;}
        .map_JEONNAM {top: 70%; left: 16%;}
        .map_JEONBUK {top: 53%; left: 23%;}
        .map_CHUNGNAM {top: 40%; left: 8%;}
        .map_CHUNGBUK {top: 31%; left: 41%;}
        .map_GANGWON {top: 14%; left: 58%;}
        .map_GYEONGGI {top: 22%; left: 29%;}
        .map_ULSAN {top: 60%; left: 86%;}
        .map_DAEJEON {top: 42%; left: 35%;}
        .map_GWANGJU {top: 62%; left: 7%;}
        .map_INCHEON {top: 15%; left: 4%;}
        .map_DAEGU {top: 54%; left: 62%;}
        .map_BUSAN {top: 68%; left: 80%;}
        .map_SEOUL {top: 14%; left: 26%;}
    .zidoSvg path {transition:all 3s ease; fill:#bebebe;}
    .zidoSvg .duCN1 {fill: #0000FF;}
    .zidoSvg .duCN2 {fill: url(#mapPattern1); stroke-width: 2px; stroke: #fff;}
    .zidoSvg .duCN3 {fill: url(#mapPattern2); stroke-width: 2px; stroke: #fff;}
    .zidoSvg .duCN4 {fill: url(#mapPattern3); stroke-width: 2px; stroke: #fff;}
    .zidoSvg .duCN5 {fill: url(#mapPattern4); stroke-width: 2px; stroke: #fff;}
    
    .duCNList {position: absolute;text-align: right;white-space: nowrap;left: 50%;transform: translateX(-50%);bottom: -18px;}
    .duCNList > li {display: inline-block; margin: 0 4px;}
    .duCNList > li > span {display: inline-block; width: 8px; height: 8px; margin-right: 4px;}
    .duCNList > li > strong {font-size: 12px; font-weight: 400;}
    .duCNList .duCN1 {background-color: #56b4e9;}
    .duCNList .duCN2 {background-color: #0000FF; background-image: url("/template/design/assets/img/sub/stripe_blue.png");}
    .duCNList .duCN3 {background-color: #00FF00; background-image: url("/template/design/assets/img/sub/stripe_green.png");}
    .duCNList .duCN4 {background-color: #FFFF00; background-image: url("/template/design/assets/img/sub/stripe_yellow.png");}
    .duCNList .duCN5 {background-color: #FF0000; background-image: url("/template/design/assets/img/sub/dot_red.png");}
                            
    .spotBtnName{position:absolute; text-align:center; line-height:21px; font-size:13px; color:#000; z-index:11;}
    .spotBtnName img {width:25px;}
    .spotBtnName span {background-color:#fff; color:#000; font-size:13px; border:1px solid #E1E1E1; border-radius:11px; padding:2px 12px; margin-left: -5px;}
    .spotBtn {width:9px; height:9px; border-radius:50%; background-color:#fff; border:1px solid #000; position:absolute; transition:all 0.3s ease;}
    .spotBtn:hover {transform:scale(1.6); z-index:10;}
    .spotBtn.on {background-color:#F6A90E; transform:scale(1.6); z-index:10;}
    .spotBtn span {display:block; overflow:hidden; width:0px; height:0px; text-indent:10px;}
    .spBtn01 {left:47%; top:14%;}
    .spBtn02 {left:47%; top:17%;}
    .spBtn03 {left:41%; top:22%;}
    .spBtn04 {left:35%; top:16%;}
    .spBtn05 {left:44%; top:23%;}
    .spBtn06 {left:48%; top:26%;}
    .spBtn07 {left:58%; top:25%;}
    .spBtn08 {left:37%; top:7%;}
    .spBtn09 {left:41%; top:51%;}
    .spBtn10 {left:45%; top:25%;}
    .spBtn11 {left:50%; top:13%;}
    .spBtn12 {left:32%; top:10%;}
    .spBtn13 {left:50%; top:29%;}
    .spBtn14 {left:62%; top:13%;}   
    .spBtn15 {left:25%; top:45%;}
    .spBtn16 {left:34%; top:9%;}
    .spBtn17 {left:59%; top:27%;}
    .spBtn18 {left:51%; top:8%;}
    .spBtn19 {left:0%; top:0%;}
    .spBtn20 {left:45%; top:34%;}
    .spBtn21 {left:38%; top:23%;}
    .spBtn22 {left:43%; top:28%;}
    .spBtn23 {left:63%; top:50%;}
    .spBtn24 {left:62%; top:52%;}
    .spBtn25 {left:56%; top:47%;}
    .spBtn26 {left:60%; top:40%;}
    .spBtn27 {left:58%; top:55%;}
    .spBtn28 {left:46%; top:58%;}
    .spBtn29 {left:60%; top:58%;}
    .spBtn30 {left:0%; top:0%;}
    .spBtn31 {left:0%; top:0%;}
    .spBtn32 {left:29%; top:59%;}
    .spBtn33 {left:69%; top:34%;}
    .spBtn34 {left:27%; top:64%;}
    .spBtn35 {left:49%; top:60%;}
    .spBtn36 {left:0%; top:0%;}
    .spBtn37 {left:60%; top:48%;}
    .spBtn38 {left:20%; top:50%;}
    .spBtn39 {left:78%; top:30%;}
    .spBtn40 {left:55%; top:45%;}
    .spBtn41 {left:35%; top:50%;}
    .spBtn42 {left:0%; top:0%;}
    .spBtn43 {left:0%; top:0%;}
    .spBtn44 {left:73%; top:33%;}
    .spBtn45 {left:50%; top:58%;}
    .spBtn46 {left:51%; top:44%;}
    .spBtn47 {left:36%; top:37%;}
    .spBtn48 {left:41%; top:38%;}
    .spBtn49 {left:28%; top:35%;}
    .spBtn50 {left:26%; top:38%;}
    .spBtn51 {left:42%; top:31%;}
    .spBtn52 {left:47%; top:54%;}
    .spBtn53 {left:36%; top:41%;}
    .spBtn54 {left:38%; top:34%;}
    .spBtn55 {left:41%; top:41%;}
    .spBtn56 {left:45%; top:42%;}
    .spBtn57 {left:39%; top:45%;}
    .spBtn58 {left:0%; top:0%;}
    .spBtn59 {left:25%; top:33%;}
    .spBtn60 {left:29%; top:32%;}
    .spBtn61 {left:19%; top:58%;}
    .spBtn62 {left:0%; top:0%;}
    .spBtn63 {left:26%; top:52%;}
    .spBtn64 {left:21%; top:30%;}
    .spBtn65 {left:34%; top:55%;}
    .spBtn66 {left:31%; top:57%;}
    .spBtn67 {left:29%; top:61%;}
    .spBtn68 {left:25%; top:55%;}
    .spBtn69 {left:23%; top:60%;}

    .river .table_normal tbody tr td {padding:5px 0px;}
        .iconList p {position: relative;}
        .iconList .icon {position: absolute;top: 0px;left: 0px;}
        .iconList .list {display: inline-block;margin-left: 15px;}
/* 환경종합정보(AS_IS) end */


/* 생태관 소개 */
.onTab.defaultStyle.pcHidden {display: none;}

.bigFont { font-size: 40px; font-weight: 700; line-height: 1.5; }
.bigFont > strong { font-weight: 700; display: block; }
.ecologyLists {margin-top: 48px;gap: 20px;display: flex;margin-bottom: 64px;}
.ecologyLists > li {border-radius: 12px;border: 1px solid #dbdbdb;overflow: hidden;flex: 1;box-sizing: border-box;}
.ecologyLists > li > .top { height: 205px; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.ecologyLists > li > .top .ico { display: inline-block; width: 78px; height: 78px; }
.ecologyLists > li > .top > p { font-size: 24px; color: #090909; font-weight: 700; text-align: center; margin-top: 5px; padding: 0 65px; }
.ecologyLists > li > .btm {padding: 25px 24px 0;min-height: 178px;box-sizing: border-box;}
.ecologyLists > li > .btm p { color: #464C53; font-size: 17px; line-height: 1.5; }
.ecologyLists > li.list01 > .top { background: #E4F4FF; }
.ecologyLists > li.list01 > .top .ico { background: url(/template/template1/assets/img/sub/ico_ecology01.svg) no-repeat; background-size: cover; }
.ecologyLists > li.list02 > .top { background: #E7FBF0; }
.ecologyLists > li.list02 > .top .ico { background: url(/template/template1/assets/img/sub/ico_ecology02.svg) no-repeat; background-size: cover; }
.ecologyLists > li.list03 > .top { background: #DDE7FF; }
.ecologyLists > li.list03 > .top .ico { background: url(/template/template1/assets/img/sub/ico_ecology03.svg) no-repeat; background-size: cover; }
.yearLists { margin-top: 30px; }
.yearLists > li { display: flex; margin-bottom: 20px; }
.yearLists > li > p { width: 140px; margin-right: 18px; font-size: 17px; font-weight: 700; color: #0F53D3; }
.yearLists > li > span { color: #464C53; font-size: 16px; }
.onArticleGallery { margin-top: 40px; display: flex; gap: 42px; overflow-x: auto;}
.onArticleGallery > div {border-radius:10px; overflow: hidden;}
.onArticleGallery > div img{min-width: 320px; width: 100%;}

/* 전시안내 */
.galleryInfoBox { padding: 40px; }
.galleryInfoBox h3.onT2 { margin-top: 0px; display: flex; align-items: center; gap: 4px; }
i.icon-checkList { width: 32px; height: 32px; background: url(/template/template1/assets/img/common/icon_checklist.svg) no-repeat center; }
.galleryInfoBox .onTxtBox { display: flex; flex-direction: column; gap: 14px; }
.galleryInfoBox .onTxt { color: #0B50D0; display: flex; align-items: center; gap: 8px; }
i.icon-checkInCircle {width: 24px;height: 24px;background: url(/template/template1/assets/img/common/icon_checkInCircle.svg) no-repeat center;flex-shrink: 0;align-self: flex-start;}
.recommendedRoute { padding: 60px 98px 56px; margin-bottom: 40px; }
.routeBox { overflow-x: auto; }
.routeBox > img {width: 100%;max-width: fit-content;margin: 0 auto;display: block;padding-bottom: 50px;min-width: 500px;}
.routeGuideLists { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.routeGuideLists > div { display: flex; justify-content: center; align-items: center; gap: 9px; }
.routeGuide { display: flex; gap: 8px; align-items: center; }
.routeGuide .circle { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.routeGuide .circle.route01 { background: #003393; }
.routeGuide .circle.route02 { background: #F25781; }
.routeGuide .circle.route03 { background: #00BCD1; }
.routeGuide .circle.route04 { background: #B4009F; }
.routeGuide .circle.route05 { background: #52BD00; }
.routeGuide .circle.route06 { background: #5642BA; }
.routeGuide .circle.route07 { background: #008CEF; }
.routeGuide > p { color: #464C53; font-size: 17px; font-weight: 700; white-space: nowrap; }
.routeArrow { width: 13px; height: 12px; background: url(/template/template1/assets/img/sub/icon_route_arrow.svg) no-repeat center; }
.routeRecommendedDetail > li > div:not(.routeGuide) { display: flex; margin-top: 23px; margin-bottom: 40px; align-items: center; gap: 32px; }
.routeRecommendedDetail > li > div:not(.routeGuide) > img { border-radius: 10px; }
.routeRecommendedDetail > li > div:not(.routeGuide) > p { font-size: 17px; }
.routeRecommendedDetail > li > div:not(.routeGuide) > p em { display: block; color: #464C53; font-weight: 700; margin-bottom: 8px; }
.routeRecommendedDetail > li > div:not(.routeGuide) > p span { color: #464C53; }
.routeRecommendedDetail > li:last-child { margin-bottom: 65px;}
.routeRecommendedDetail > li:last-child > div:not(.routeGuide) {margin-bottom: 0;}

.exhibitionInfo { display: flex; }
.exhibitionInfo > .departmentTabBox { width: 200px; border: none; border-radius: 0; overflow: visible; display: flex; flex-direction: column; margin: 0; padding: 0; flex: 0 0 200px; }
#exhibitionInfo > .departmentTabBox .swiper-buttons {display: none ;}
.exhibitionInfo > .onTabContents { width: auto; width: calc(100% - 240px); height: auto; margin-left: 40px; }
.exhibitionInfo .onTab { flex-direction: column; gap: 20px; }
.exhibitionInfo .onTab > li {height: 50px;max-height: 50px;border-radius: 25px;background: #F4F4F4;transition: 0.3s;}
.exhibitionInfo .onTab > li > a { padding: 10px 20px 10px 10px; justify-content: normal; position: relative; }
.exhibitionInfo .onTab > li > a .numbering {margin: 0;width: 30px;height: 30px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.2);color: #F3F3F3;font-size: 13px;font-weight: 700;margin-right: 12px;transition: 0.3s;}
.exhibitionInfo .onTab > li > a .name {color: #464C53;font-size: 19px;font-weight: 700;margin: 0;transition: 0.3s;}
.exhibitionInfo .onTab > li > a .icon-next { font-weight: 900; color: #999; margin-left: auto; font-size: 11px; transition: 0.3s; position: absolute; right:20px; }
.exhibitionInfo .onTab > li.on > a .numbering { color: #fff; }
.exhibitionInfo .onTab > li.on > a .name { color: #fff; }
.exhibitionInfo .onTab > li.on > a .icon-next { color: #fff; }
.exhibitionBox .title {line-height: 1.5;font-size: 20px;align-items: center;font-weight: 700;margin-bottom: 8px;display: flex;color: #222;}
.exhibitionBox .title span { color: #666; margin-left: 10px; }
.exhibitionBox .contents { color: #464C53; font-size: 17px; line-height: 1.5; margin-bottom: 20px; }
.exhibitionBox .exhibitionImg {width: 100%;height: 376px;border-radius: 10px;overflow: hidden;}
.exhibitionBox .exhibitionImg img { width: 100%; height: 100%; display: block; object-fit: cover; }
.exhibitionBox .exhibitionImgBox {border-radius: 10px; overflow: hidden;}
.exhibitionBox .exhibitionImgBox .swiper-slide { height: 376px;}
.exhibitionBox .exhibitionImgBox .swiper-slide img { object-fit: cover; object-position: center; }
.exhibitionBox .exhibitionImgBox .swiper-slide img.top { object-position: center top; }
.exhibitionBox .exhibitionImgBox .swiper-slide img.btm { object-position: center bottom; }
.exhibitionBox .exhibitionImgBox .swiper-pagination {background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);height: 37px;display: flex;justify-content: center;top: auto;bottom: 0; border-radius: 0 0 10px 10px;box-sizing: border-box; align-items: flex-end;padding-bottom: 18px;}
.exhibitionBox .exhibitionImgBox .swiper-pagination-bullet { margin: 0 2.5px; background: rgba(255, 255, 255, 0.7); opacity: 1; }
.exhibitionBox .exhibitionImgBox .swiper-pagination-bullet-active { background: #0F53D3; }

.wayInfo01 { display: flex; flex-wrap:wrap; gap: 30px; line-height: 1; margin-bottom: 30px; }
.wayInfo01 > li { display: flex; align-items: center; color: #49454F; font-size: 15px; gap: 10px; line-height: 1.5; }
.wayInfo01 > li:first-child:before { content: url(/template/template1/assets/img/sub/icon_way_01.svg); width: 33px; height: 33px; }
.wayInfo01 > li:nth-child(2):before { content: url(/template/template1/assets/img/sub/icon_way_02.svg); width: 33px; height: 33px; }
.wayInfo01 > li:last-child:before { content: url(/template/template1/assets/img/sub/icon_way_03.svg); width: 33px; height: 33px; }
.wayInfo02 { display: flex; flex-direction: column; flex-direction: column; gap: 25px; }
.wayInfo02 > li { background: #F5F7FD; border-radius: 10px; padding: 35px 30px 30px; }
.wayInfo02 > li > p.title { display: flex; align-items: center; color: #0F53D3; gap: 9px; font-weight: 700; font-size: 19px; margin-bottom: 20px; }
.wayInfo02 > li > p.title.wayBus:before { content: url(/template/template1/assets/img/sub/icon_transport_bus.svg); height: 26px; }
.wayInfo02 > li > p.title.waySubway:before { content: url(/template/template1/assets/img/sub/icon_transport_subway.svg); height: 27px; }
.wayInfo02 > li > p.title.wayCar:before { content: url(/template/template1/assets/img/sub/icon_transport_car.svg); height: 20px; }
.wayInfo02 > li > p.title.wayBus2:before { content: url(/template/template1/assets/img/sub/icon_transport_bus02.svg); height: 20px; }
.wayInfo02 > li > div { display: flex; }
.wayInfo02 > li > div > .wayMethod {flex: 50%;box-sizing: border-box;}
.wayInfo02 > li > div > .wayMethod:nth-child(2) {padding-left: 36px; border-left: 1px dashed #d7d7d7;} 
.wayInfo02 > li > div > .wayMethod > .title { font-size: 17px; margin-bottom: 14px; font-weight: 700; }
.wayInfo02 > li > div > .wayMethod > .subTitle {color: #464C53;font-size: 17px;font-weight: 700;margin-bottom: 8px;}
.wayInfo02 > li > div > .wayMethod > .subTitle02 {margin-top: 30px;}
.wayInfo02 > li > div > .wayMethod > .info { display: block; line-height: 1.5; font-size: 15px; color: #464C53; }
.wayInfo02 > li > div > .wayMethod > .info + .subTitle {margin-top: 14px;}
.wayInfo02 > li > div > .wayMethod > .info strong { color: #245399; }
.wayInfo02 > li > div > .wayMethod > ul.wayTimeline { display: flex; flex-direction: column; gap: 10px; }
.wayInfo02 > li > div > .wayMethod > ul.wayTimeline > li { display: flex; color: #464C53; font-size: 15px; line-height: 1.5; }
.wayInfo02 > li > div > .wayMethod > ul.wayTimeline > li p { width: 80px; font-weight: 700; }


/* 연구결과 */
.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;}
    .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/template1/assets/img/privacy/picto_privacy_sm_01.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(2) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_02.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(3) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_03.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(4) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_04.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(5) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_05.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(6) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_06.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(7) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_07.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(8) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_08.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(9) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_09.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(10) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_10.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(11) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_11.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(12) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_12.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(13) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_13.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(14) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_14.png)no-repeat 0 0;}
.personal_table .cnt_list li:nth-child(15) a{background: url(/template/template1/assets/img/privacy/picto_privacy_sm_15.png)no-repeat 0 0;}
.personal_table .cnt_list li:last-child a{background: url(/template/template1/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/template1/assets/img/privacy/picto_privacy_md_01.png)no-repeat 0 0;}
.conP.privacy.p02 .conT3:before{background: url(/template/template1/assets/img/privacy/picto_privacy_md_02.png)no-repeat 0 0;}
.conP.privacy.p03 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_03.png)no-repeat 0 0;}  
.conP.privacy.p04 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_04.png)no-repeat 0 0;}  
.conP.privacy.p05 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_05.png)no-repeat 0 0;}    
.conP.privacy.p06 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_06.png)no-repeat 0 0;}  
.conP.privacy.p07 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_07.png)no-repeat 0 0;}    
.conP.privacy.p08 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_08.png)no-repeat 0 0;}   
.conP.privacy.p09 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_09.png)no-repeat 0 0;} 
.conP.privacy.p10 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_10.png)no-repeat 0 0;} 
.conP.privacy.p11 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_11.png)no-repeat 0 0;} 
.conP.privacy.p12 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_12.png)no-repeat 0 0;}
.conP.privacy.p13 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_13.png)no-repeat 0 0;}
.conP.privacy.p14 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_14.png)no-repeat 0 0;}
.conP.privacy.p15 .conT3:before {background: url(/template/template1/assets/img/privacy/picto_privacy_md_15.png)no-repeat 0 0;}
.conP.privacy.p16 .conT3:before {background: url(/template/template1/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%;}

/* 게시판 상세 이미지 슬라이더 */
.tbSlide {position: relative;}
.tbSlide .cycle-slideshow {margin:0 auto; max-width:540px; z-index:1;}
.tbSlide .center a {position: absolute; top:50%; width:auto;}
.tbSlide .center a#prev {left:10px;}
.tbSlide .center a#next {right:10px;}
.tbSlide .center button {margin-left:5px; margin-bottom:10px;}
.tbSlide .center button:first-child {margin-left:0;}       

/* etc. Responsive */
@media (max-width: 1280px) and (min-width: 769px) {
    /* 1. Layout ----------------------------------------------------------------------------------- */
    /* 1.1. Header --------------------------------------------------------------------------------- */
    #krds-header .header-container .header-branding > .onContainer {padding: 0 30px;}
    #krds-footer > .onContainer {padding: 2.4rem 30px;}

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

    /* 2. Main ------------------------------------------------------------------------------------- */
    .onMainBanner {padding: 0 30px; margin-bottom: 40px;}
    .onMainBannerTop {padding-top: 30px}
        .waterBubble01, .waterBubble02, .waterBubble03 {display: none;}
        .mainObg01 {left: -8%;}
        .mainObg03 {left: 93%;}

        .onMainBannerTop > .mainBanner01 img {transform: scale(0.8); pointer-events: none;}
        .onMainBannerTop > .mainBanner01.on .mainObg01 {left: 5px; bottom: -20px; width: 80px;}
        .onMainBannerTop > .mainBanner01.on .mainObg02 {left: 13px; bottom: -22px; width: 67px;}
        .onMainBannerTop > .mainBanner01.on .mainObg03 {left: -20px; bottom: -30px; width: 55px;}
        .onMainBannerTop > .mainBanner01.on .mainObgBg {left: 18px; bottom: -25px; width: 55px; height: 12px;}
        .onMainBannerTop > .mainBanner01.on .bubbles {bottom: -20px; left: -60px; transform: scale(0.8); pointer-events: none;}
        
        .onMainBannerTop .satellite.mainBanner02 .obgRing {opacity: 0.7;}

        .onMainBannerTop .mainBanner03.mainObg01 {bottom: 280px; left: 62%;}
        .onMainBannerTop .mainBanner03.mainObg02 {top: 5%;}
        .onMainBannerTop .mainBanner03.mainObg03 {bottom: 200px; left: 70%;}
        
        @keyframes flaskIn {
            0% {
                transform: rotate(20deg) translateX(-9px);
            }
            50% {
                transform: rotate(-20deg) translateX(6px);
            }
            100% {
                transform: rotate(20deg) translateX(-9px);
            }
        }

        @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: 1160px; border-radius: 100px 30px 30px 30px; height: 470px;}
        .onMainBannerL > .bannerComponent {bottom: auto; top: 63px; left: 8%; transform: translateX(0);}
            .mainBannerTxt {left: 8%;}
            .mainBannerTxt > h2 {font-size: 36px; line-height: 50px;}

        .onMainBannerR {position: absolute; right: 0; bottom: -25px; max-width: 385px;}
            .onMainSns {display: none;}
            .onMainIssue .swiper-navigation {right: 22px;}
            .issueL {padding: 20px 13px 23px 20px; font-size: 13px;}
            .issueR {width: 100%; margin: 20px 25px 28px 16px;}
            .issueR .swiper-slide {justify-content: center;}
                .issueTxt {font-size: 18px; line-height: 28px; margin-bottom: 11px; min-height: 56px;}
                .issueMoreBtn {position: absolute; right: 0; bottom: -2px;}
    .onMainBannerBtm {flex-direction: column; height: auto;}   
        .onMainBtmL {display: flex; flex-direction: column; width: 100%; margin: 0 0 20px 0;}
        .onMainBtmL .onT2 {margin: 0 0 18px 0; line-height: 30px;}
        .onMainBtmL p {display: none;}
        /* .onMainBtmL .onToggle {flex-direction: row; width: 100%; column-gap: 3%;}
        .onMainBtmL .onToggle > li { width: calc(94% / 3);}
        .onMainBtmL .onToggle .moText {display: none;} */
        .onToggle {width: 100%; background: #fff; border-radius: 20px; font-size: 16px; 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:not(.systemComponent) {flex-direction: column;}
        .onMainBtmR > li > div.systemSliderTab {flex-direction: row;}
            .mainBtmIcon {width: 100%; column-gap: 2%; position: relative; margin: 0 0 30px 0;}
            .mainBtmIcon::after {display: none;} 
            .mainBtmIcon > li {width: calc(98% / 2);}
            .mainBtmEarth {width: 100%; margin: 0; border-top: 1px solid #E9E9E9; padding-top: 40px;}
                .earthInfo > img {display: none;}
                .earthInfo > .pcHidden {display: inline-block; width: 364px;}
                .earthImg {right: 20px; transform: scale(0.8);}
            .mainReportL {width: 100%; margin: 0 0 30px 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; border-top: 1px solid #E9E9E9; padding-top: 30px;}
            .reportChartInfo {top: 30px;}
    .mainSearchBox div > input:focus {width: 100%;}

    .onMainBoard {padding: 0 30px;}
        .onMainBoardIn {flex-direction: column;}
            .mainDataBox {width: 100%; column-gap: 40px;}
            .mainPromoData {width: 100%;}
            .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: 22px 116px 0 5%; height: 248px; box-sizing: border-box; overflow: hidden; min-width: 340px; } 
                .promoDataList > ul { position: relative; height: 100%; display: flex; flex-direction: column; row-gap: 16px; overflow-y: auto; scroll-behavior: smooth; padding-top: 8px; margin-top: -8px; } 
                .promoDataList > ul::-webkit-scrollbar {-ms-overflow-style: none; display: none;}
                .promoDataList > ul > li { width: 100%; } 
                .promoDataList > ul > li:last-of-type {margin-bottom: 22px;}
                .promoDataList > ul > li > button { opacity: 0; transition: all 0.3s; font-size: 14px; color: #666; padding: 0 10%; height: 40px; line-height: 40px; border-radius: 20px 20px 20px 0; background: #DBE7FF; border: 1px solid #DBE7FF; box-sizing: border-box; } 
                .promoDataList > ul > li > button:hover,
                .promoDataList > ul > li.on > button { background: #fff; border: 1px solid #0F53D3; }
                .promoDataList > ul > li.show > button {animation: show 0.6s forwards; }
                    .bubble01 {text-align: left;}
                    /* .bubble01 button {margin-left: 3%;} */
                    .bubble01 .bubbleTxt img { vertical-align: -1px; } 
                    .bubble02 {text-align: right;}
                    .bubble02 button {margin-right: 7%;}
                    .bubble03 {text-align: center;}
                    .bubble03 button {margin-right: 10%;}
                    .bubble04 {text-align: right;}
                    .bubble04 button {margin-right: 5%;}
                    .bubble05 {text-align: left;}
                        .bubbleTxt img { vertical-align: -3px; margin-left: 5px; } 
                .dataBubble { margin: -32px 0 0 -92px; display: flex; flex-direction: column; align-items: center; background: #0F53D3; width: 100%; height: calc(100% - 5px); flex-shrink: 0; max-width: 190px; border-radius: 20px 20px 20px 0; box-sizing: border-box; padding: 27px 0 24px;} 
                .dataBubble span {font-size: 14px; color: #fff; line-height: 21px;}
                .dataBubble strong {font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 20px; line-height: 21px;}
                    .bubbleIconBox {margin-bottom: 20px; position: relative; text-align: center;}
                    .bubbleIconBox::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%);}
                    .bubbleIconBox img.on {z-index: 10; position: relative; animation: up 1s forwards ease; }
                .dataBubble a {font-size: 13px; color: #fff;}
                .dataBubble a i {font-size: 9px;}
            .mainBoardBox {width: 100%; max-width: none; padding-bottom: 50px; margin-bottom: 30px;}  
            .mainBoardBox::after {content: ""; display: block; width: 100vw; height: 0; border-top: 9px solid #F2F2F2; left: -30px; bottom: 0px; position: absolute;}
            .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%;}

    /* SiteMapLists - 사이트맵 페이지 */
    .onSiteMapLists > ul > li {width: 25%;}
    
    /* 원장인사말 */
    .onHelloMessage > p {font-size: 30px; top: 0; bottom: auto;}
    .onHelloMessage > div .director {margin-top: 86px;}

    /* 생태관 소개 */
    .onTab.defaultStyle.pcHidden {display: flex;}

    .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);}
    .wayInfo01 {gap:10px;}
    .wayInfo01 > li {width: 100%;}

    /* INT - 과학원소개 */
    /* 조직안내 */
    .orginBox.blue {margin: 10px auto 15px;}
    
    .olineLIn {padding: 0;}
    .olineLIn:before {display: none;}
    .olineLIn > li {min-width: auto;}
    .olineLIn > li:first-of-type .olineBox {margin: 0 6px;}
    .olineLIn > li:nth-of-type(2) .olineBox {margin: 0 6px;}
    .olineLIn > li:nth-of-type(3) .olineBox {margin: 0 6px;}
    .olineLIn > li:nth-of-type(4) .olineBox {margin: 0 6px;}
    .olineLIn > li:last-of-type .olineBox {margin: 0 6px;}
    .orginBox:before {display: none;}
    .divisionBox:before {display: none;}
    
    .noLineIn li {width: 100%; margin: 0;}
    .noLineIn li:before {display: none;}
    .noLineIn.right li {margin: 0; padding: 0 10px; box-sizing: border-box;}
    .noLineIn li a {width: 100%; max-width: none;}

    .divisionBox {font-weight: 600;}
    .divisionSection {margin: 0 5px;}
    .divisionSection a {font-size: 14px; max-width: auto;}

    /* 국립환경과학원 연대기 */
    .onHistoryLists > li {height: auto; padding: 38px 32px 38px;}
    .onHistoryLists > li > div > span {padding-right: 0; margin-bottom: 15px;}
    .onHistoryLists > li .title {font-size: 22px;}
    .waterChartPrimaryLists .swiper-button-prev.defaultStyle.shadow,
    .waterChartPrimaryLists .swiper-button-next.defaultStyle.shadow {display: block;}

    /* 환경데이터 전용 테이블 */
    .onSearchBox.environmentSearchBox{padding: 34px;}

    /* RES - 연구분야 */
    /* 물환경연구부 */
    .departVisual {padding: 60px 6%; width: 98%; margin-bottom: 130px;}
    .departCon {display: flex; width: 100%; justify-content: space-between; column-gap: 20px;}
    .departCon h2 {max-width: 500px; font-size: clamp(32px, 3vw, 40px)}
        .departSystem .swiperComponent {top: 20px;}
        .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);}
        .departVisualImg > a {font-size: 18px;}
        .departVisualImg .departVisual01 { left: 0; }
        .departVisualImg .departVisual02 { transform: scale(0.8) translateX(-62%); bottom: -175px; }
        .departVisualImg .leftText {bottom: 70px;left: 91px;}

        .departVisualImg .midText01 { right: auto; top: 11%; left: 32%; }
        .departVisualImg .midText02 { right: 7%; }
        .departVisualImg .midText03 { right: 17%; }
        .departVisualImg .rightText { top: 80px; }

        .departVisual.air .midText01 {left: 340px;top: 80px;}
        .departVisual.air .midText02 {right: 30px;}
        .departVisual.air .midText03 {right: -11px;}
        .departVisual.air .rightText {top:30px;}

        .departVisual.weather .midText01 {left: 320px;top: 66px;}
        .departVisual.weather .midText02 {right: 30px;}
        .departVisual.weather .midText03 {right: 30px;}
        .departVisual.weather .rightText {top:30px;}

        .departVisual.env .midText01 {left: 320px;top: 66px;}
        .departVisual.env .midText02 {right: 30px;}
        .departVisual.env .midText03 {right: 30px;}
        .departVisual.env .rightText {top:30px;}

        .departVisual.resource .midText01 {left: 320px;top: 66px;}
        .departVisual.resource .midText02 {right: 30px;}
        .departVisual.resource .midText03 {right: 30px;}
        .departVisual.resource .rightText {top:30px;}
            
    .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 > li {/* width: calc(92% / 3); */}

    .departReport.board > li { width: calc((100% - 35px) / 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;}

     /* 환경종합정보 */
    .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;}

    .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;}

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

    .departReportBtn a.krds-btn .btnTxt {flex: none;}
    .departReportBtn a > i {margin-left: 0;}

    /* 환경데이터 전용 테이블 */
    .twoPartTableWrapper { overflow-x: auto; overflow-y: visible; height: auto; }
    .twoPartTableContainer .twoPartTableWrapper table.tbl { min-width: 100%; }
    .rightScrollColums { overflow-x: visible; overflow-y: visible; box-shadow: none; }
    .scrollableTable th:first-child, .scrollableTable td:first-child { border-left: none; }
}


@media (max-width: 1023px) and (min-width: 769px) {
    /* 2. Main ------------------------------------------------------------------------------------- */
    .onMainBoardIn {flex-direction: column;}
        .dataBubble {max-width: 160px;}
        .mainBoardBox {width: 100%; max-width: none; margin-bottom: 40px;}

    /* 국가시료은행 시료보관 현황 */
    .sectionBoxWrapper {flex-wrap:wrap;}
    .envdataSatellite {max-width: 100%;}
    .envdataSpecimen ul.sectionBox.main {display: flex;}
    .envdataSpecimen > ul > li {flex:1; border-bottom: none; border-right: 1px dashed #d7d7d7;}

}

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

   /* 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: 20px; margin-bottom: 185px;}
        .mainObg01 {left: -70px;}
        .mainObg03 {left: calc(100% - 50px);}
        .waterBubble01, .waterBubble02, .waterBubble03 {display: none;}

        .onMainBannerTop > .mainBanner01 img {pointer-events: none;}
        .onMainBannerTop > .mainBanner01.on img {transform: scale(0.7); }
        .onMainBannerTop > .mainBanner01.on .mainObg01 {left: auto; right: 5px; bottom: 162px; width: 80px;}
        .onMainBannerTop > .mainBanner01.on .mainObg02 {left: auto; right: 10px; bottom: 160px; width: 66px;}
        .onMainBannerTop > .mainBanner01.on .mainObg03 {left: auto; right: 52px; bottom: 145px; width: 60px;}
        .onMainBannerTop > .mainBanner01.on .mainObgBg {left: auto; right: 12px; bottom: 156px; width: 64px; height: 14px;}
        .onMainBannerTop > .mainBanner01.on .bubbles {bottom: 125px; 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: 180px; left: 62%;}
        .onMainBannerTop .mainObg02.mainBanner03 {top: 5%;}
        .onMainBannerTop .mainObg03.mainBanner03 {bottom: 100px; left: 70%;}

        @keyframes flaskIn {
            0% {
                transform: rotate(20deg) translateX(-10px);
            }
            50% {
                transform: rotate(-20deg) translateX(6px);
            }
            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: 100px 30px 30px 30px; height: 540px;}
        .onMainBannerL > .bannerComponent {bottom: auto; top: 63px; left: 32px; transform: translateX(0);}
            .bannerComponent .swiper-button-stop{margin-right: 3px; display: flex; align-items: center;}
            .bannerComponent .swiper-button-stop button {height: 12px;}
            .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; width: 7px; height: 7px;}
            .mainBannerTxt {left: 32px; top: 90px; height: 135px; max-width: none; width: auto;}
            .mainBannerTxt > span {font-size: 17px; line-height: 20px; color: #D4ECFF; margin-bottom: 10px;}
            .mainBannerTxt > h2 {font-size: 32px; font-weight: 600; line-height: 42px; margin-bottom: 20px;}
            .mainTxtList {margin-bottom: 30px;}
            .mainTxtList > li {font-size: 15px;}
            .mainDetailBtn {position: relative;}

        .onMainBannerR {max-width: none; width: calc( 100% - 30px); bottom: -127px; left: 50%; transform: translateX(-50%); margin: 0; position: absolute;}
            .onMainSns {display: none;}
                .mainSearchBtn {width: 48px; height: 48px;}
                .mainSearchBox div > input:focus {width: 100%;}
                .keywordBox {justify-content: flex-start;}
            .onMainSearch {padding: 23px 20px 17px 20px; background: linear-gradient(to right, rgba(233, 241, 255, 0.8), #CDDEFF);}
            .mainSearchBox div {margin-right: 7px;}
            .mainSearchBox div > input {padding-left: 20px;}
            .onMainIssue {height: 141px;}
            .onMainIssue .swiper-navigation {right: 32px;}
            .onMainIssue .swiper-navigation > div {width: 30px; height: 30px;}
            .onMainSns {position: absolute; right: 22px; top: -60px; margin: 0;}
            .onMainSns > p {display: none;}
            .mainSnsList {margin-left: 0; justify-content: flex-end; column-gap: 10px;}
            .mainSnsList > li a {width: 35px; height: 35px;}
            .issueL {padding: 24px 16px 24px 20px;}
            .issueL::after {height: 93px;}
            .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: 20px 24px 26px 16px;}
            .issueR .swiper-slide {justify-content: center;}
                .issueTxt {font-size: 18px; line-height: 28px; margin-bottom: 11px; min-height: 56px;}
                .issueMoreBtn {position: absolute; right: 0; bottom: -2px;}
    .onMainBannerBtm {flex-direction: column; height: auto;}   
        .onMainBtmL {display: flex; flex-direction: column; width: 100%; margin: 0 0 24px 0;}
        .onMainBtmL .onT2 {line-height: 26px;}
        .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:not(.systemComponent) {flex-direction: column;}
        .onMainBtmR > li > div.systemSliderTab {flex-direction: row;}
        .systemComponent .systemTabSliderPrev, .systemComponent .systemTabSliderNext {display: none;}
        .onTab.system {overflow-x:auto; width:80%;}
        .onTab.system > li {margin-right: 12px; font-size: 14px;}
            .mainBtmIcon {width: 100%; margin: 0 0 30px 0; column-gap: 16px;}
            .mainBtmIcon > li {width: calc((100% - 48px) / 4);}
            .mainBtmIcon > li a {flex-direction: column; background: none; border: none; align-items: center; padding: 0;}
            .mainBtmIcon > li a:hover {background: none; border: none; box-shadow: none;}
            .mainBtmIcon > li a > img {margin: 0;}
            .mainBtmIcon > li a div {padding: 0; text-align: center; height: 20px;}
            .mainBtmIcon > li a div::after {display: none}
            .mainBtmIcon > li a div > span {font-size: 13px; margin: 4px 0 0 0; }
            .mainBtmIcon > li a div > p {display: none}
            .mainBtmIcon > li a div > i {display: none;}
            .mainBtmIcon > li a .linkIcon {height: 57px; margin-right: 0;}
            .mainBtmEarth {width: 100%; margin: 0; border-top: 1px solid #E9E9E9; padding-top: 32px;}
                .earthImg {right: 20px; transform: scale(0.7);}
                .earthInfo > img {width: 172px;}
            .mainReportL {width: 100%; margin: 0 0 30px 0; border-bottom: 1px solid #E9E9E9; padding-bottom: 30px;}
                .mainReportTop .swiperComponent.report {display: none;}
                .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;}
                .reportChartInfo {top: 0;}
            .onTab.system {margin: 4px 0 15px;}    
            .systemTabBox {width: calc(100% - 38px); overflow-x: hidden; margin: 0; padding-right: 10px; box-sizing: border-box;}
                .systemComponent {top: 5px;}
                .systemComponent .prevBtn, .systemComponent .nextBtn {display: none;}
            .mainSystemBox {height: 196px;}
            .mainSystemBox.swiper-slide-active {width: 243px;}
            .mainSystemBox.swiper-slide-active .mainReportTxt strong {font-size: 18px; line-height: 21px; margin-bottom: 8px;}
            .mainSystemBox.swiper-slide-active .mainReportTxt p {font-size: 14px; line-height: 20px; width: 100%;}
            .mainReportBtn {height: 40px;}
        
        .onMainBoard {padding: 0 15px;}
            .onMainBoardIn {flex-direction: column;}
            .mainBoardBox {width: 100%; max-width: none; margin: 0 0 30px 0; height: 225px; padding-bottom: 30px;} 
            .mainBoardBox::after {content: ""; display: block; width: 100vw; height: 0; border-top: 9px solid #F2F2F2; left: -15px; bottom: 0px; position: absolute;}
            .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 {width: 100%; padding-bottom: 30px; margin-bottom: 30px; position: relative;}
                .mainPromoData::after {content: ""; display: block; width: 100vw; height: 0; border-top: 9px solid #F2F2F2; left: -15px; top: 100%; position: absolute;} 
                .mainPromoData .onT2 {margin-bottom: 20px;}
                .promoDataList { min-width: auto; padding: 20px 110px 0 20px; } 
                .promoDataList > ul { position: relative; height: 100%; display: flex; flex-direction: column; row-gap: 15px; overflow-y: auto; scroll-behavior: smooth; padding: 8px 1px 0; margin-top: -8px; } 
                .promoDataList > ul::-webkit-scrollbar {-ms-overflow-style: none; display: none;}
                .promoDataList > ul > li { width: 100%; } 
                .promoDataList > ul > li:last-of-type {margin-bottom: 22px;}
                .promoDataList > ul > li > button { font-size: 14px; color: #666; padding: 0 10%; height: 35px; line-height: 35px; border-radius: 13px 13px 13px 0; width: auto; min-width: 140px; }
                .promoDataList > ul > li > button p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; max-width: 180px;}
                .promoDataList > ul > li > button:hover,
                .promoDataList > ul > li.on > button { background: #fff; border: 1px solid #0F53D3; }
                .promoDataList > ul > li.show > button {animation: show 0.6s forwards; }
                    .bubble01 {text-align: left;}
                    .bubble02 {text-align: right;}
                    .bubble03 {text-align: center;}
                    .bubble04 {text-align: right;}
                    .bubble05 {text-align: left;}
                    .bubble01 .bubbleTxt img { vertical-align: -1px; } 
                        .bubbleTxt img { vertical-align: -3px; margin-left: 5px; } 
                .dataBubble { margin: -23px 0 0 -92px; } 
                .dataBubble span {font-size: 14px; color: #fff; line-height: 21px;}
                .dataBubble strong {font-size: 16px; margin-bottom: 20px; }
                    .bubbleIconBox {margin-bottom: 20px; text-align: center;}
                    .bubbleIconBox::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%);}
                    .bubbleIconBox img.on {z-index: 10; position: relative; animation: up 1s forwards ease; }
                .dataBubble a {font-size: 13px; color: #fff;}
                .dataBubble a i {font-size: 9px;}
                .mainAlarmZone {margin-left: 0; width: 100%;}
                    .alarmTitle .onT2 {margin-bottom: 15px;}
                    .alarmSlideBox {height: auto; aspect-ratio: auto;}
                    .alarmSlideBox > div {width: 225px; height: 225px;}


    /* 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;}
    .onSection.border {padding: 24px;}

    /* search */
    .onSearchBox, .onSearchBox.environmentSearchBox {padding: 12px;}
    .onSearchBox .krds-form-select.medium,
    .onSearchBox .krds-input.medium {height:40px; font-size: 15px; border-radius: 5px;} 
    .onSearchBox .form-group {gap:1rem;} 
    .onSearchBox .krds-btn.medium.icon {width: 20px; height: 20px;} 

    .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;}

    /* table 게시판 */
    .krds-table-wrap .tbl.data thead th {padding: 12px 10px;}
    .krds-table-wrap .tbl.data tbody th, .krds-table-wrap .tbl.data tbody td {font-size: 16px; padding: 12px 10px;}

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

    .krds-table-wrap.board table tbody td .link {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -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;padding: 1;}
    .onTab.defaultStyle > li {/* min-height: 46px; */font-size: 17px;height: auto;padding: 7px 0;min-height: 46px;}
    .onTab.defaultStyle > li::after {display: none;}

    .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;}

    /* 메인 팝업 */
    .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;}
    
    /* 팝업 */
    .onModalClose {right: 12px; top: 12px;}
    .onModalContent {width: calc(100% - 24px); padding: 0 8px;}
    .onModalContent .onModalTitle {font-size: 20px; margin-bottom: 10px;}
    .onModalFooter {padding: 16px 20px 20px;}
    .onModalFooter button.krds-btn { min-width: auto; padding: 0 16px; height: 40px; font-size: 15px; }

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

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

    .onAlert + .onSearchResult, .onSearchBox + .onSearchResult {margin-top: 24px; flex-direction: column-reverse;}
    .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; } 
    .resultViewOption > div:first-child {display: none;}
    .resultViewOption .pcHidden {display: block;}
    .resultViewOption .mobileHidden {display: none;}
    
    .onLayout .onMobFlexDirCol { flex-direction: column; gap: 1rem;} 
    .onLayout .form-group .onMobFullWidth { width: 100%; max-width: 100%; } 

    .galleryThumb {max-height: 250px; min-height: 250px;}

    /* INF - 정보공개 */
    /* 정보공개 제도 */
    .grayBgBox {flex-wrap: wrap; row-gap: 20px;}
    .grayBgBox > li {width: 100%; margin-right: 0}

    /* 정보공개 처리절차 */
    .claimProcessList > li .claimTitle::before {width: 31px; height: 31px; line-height: 31px; font-size: 14px; left: -48px; top: -3px;}

    .claimBox {flex-direction: column; justify-content: center; padding: 24px 0;}
    .claimIconBox {display: none;}
    .claimProcessText {padding: 0 24px; font-size: 15px;}
    .claimProcessText::before {display: none;}
    .claimProcessText > strong {margin-bottom: 16px;}
    .claimProcessList {padding-left: 49px;}
    .claimProcessList > li::before {left: -33px;}
    .claimProcessList > li .claimProcessText > strong span {display: inline-block; flex: 0 0 auto;}

    /* 수수료 */
    .onInfoBox {padding: 24px 20px; margin-bottom: 32px;}
    .onLineBox {flex-wrap: wrap; row-gap: 16px;}
    .onLineBox > li {width: 100%; padding: 24px;}

    /* INT - 과학원소개 */
    /* 조직안내 */
    .organiChart {margin-bottom: 40px;}
    .orginBox.blue {margin: 10px auto 0;}
    
    .olineLIn {padding: 0;}
    .olineLIn:before {display: none;}
    .olineLIn > li {width: 100%;}
    .olineLIn > li:first-of-type .olineBox {margin: 0 6px;}
    .olineLIn > li:nth-of-type(2) .olineBox {margin: 0 6px;}
    .olineLIn > li:nth-of-type(3) .olineBox {margin: 0 6px;}
    .olineLIn > li:nth-of-type(4) .olineBox {margin: 0 6px;}
    .olineLIn > li:last-of-type .olineBox {margin: 0 6px;}
    .orginBox:before {display: none;}
    .divisionBox:before {display: none;}
    
    .noLineIn {width: 100%;}
    .noLineIn li {width: 100%; margin: 0; padding: 12px 0;}
    .noLineIn li:before {display: none;}
    .noLineIn.right li {margin: 0; box-sizing: border-box;}
    .noLineIn li a {width: 100%; max-width: none;}

    .divisionBox {font-weight: 600;}
    .divisionSection {margin: 0 5px;}
    .divisionSection a {font-size: 16px; max-width: none;}

    /* 역대원장 */
    .directorList {flex-wrap: wrap; row-gap: 16px;}
    .directorList > li {width: 100%; min-height: auto;}
        .directorName {justify-content: space-between;}
        .directorName > strong {font-size: 20px;}
        .directorName > span {font-size: 15px;}
        .directorInfo {padding: 24px 20px 0;}
        .directorCareer {padding: 0 20px 24px;}


    /* 찾아오시는길 */
    .mapACon .onT3 {margin: 0 auto 12px;}
    .mapACon .conDan2 {flex-wrap: wrap; row-gap: 20px;}
    .mapACon .conDan2 > div {width: 100%;}

    .commuterButTime {display: flex; flex-direction: column;}
        .commuterBox .conT3 {margin-bottom: 5px; line-height: 26px;}
        .commuterBox .conT3 > span:first-child,
        .commuterBox .conT3 > span:last-child {display: none;}
        .comBTime {position: relative; display: flex; flex-direction: column;}
        .comBTime a {position: relative; margin-left: 4px;}
        .comBTimeInfo {margin-left: 0; padding-top: 0;}
        .busTimeLineBtm > p {font-size: 15px; font-weight: 400;}

    .busInfoTxt {flex-direction: column; align-items: flex-start; font-size: 15px;}
    .busInfoTxt > strong {margin: 0 0 8px;}

    .busStatilonArea {flex-direction: column;}
        .busTabBox {width: 100%; position: relative; max-width: none; padding: 0 16px; box-sizing: border-box;}

        .onTab.AdresList {flex-direction: row; width: 100%; max-width: none; column-gap: 0; overflow-y: visible; padding: 0;}
        .onTab.AdresList > li {min-width: auto; height: 50px; box-sizing: border-box; width: fit-content;}
        .onTab.AdresList > li.on::before {width: 100%; left: 0; bottom: -1px;}
        .onTab.AdresList > li a {padding: 0;}
        .onTab.AdresList > li a > i {display: none;}

        .busTabSwiper .swiper-button-prev,
        .busTabSwiper .swiper-button-next {display: inline-flex; width: 32px; height: 32px; border: 1px solid #CDD1D5; border-radius: 50%; background: #fff; color: #33363D; margin-top: 0; transform: translateY(-50%);}
        .busTabSwiper .swiper-button-next:after, 
        .busTabSwiper .swiper-button-prev:after {font-size: 15px; font-weight: 600;}
        .busTabSwiper .swiper-button-next:after {margin-left: 2px;}
        .busTabSwiper .swiper-button-prev:after {margin-right: 2px;}
        .busTabSwiper .swiper-button-next.swiper-button-disabled, 
        .busTabSwiper .swiper-button-prev.swiper-button-disabled {opacity: 0;}
        .busTabSwiper .swiper-button-prev + .swiper-button-prevBg {z-index: 1; position: absolute; top: 0; left: 0; display: block; width: 64px; height: 50px; background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));}
        .busTabSwiper .swiper-button-next + .swiper-button-nextBg {z-index: 1; position: absolute; top: 0; right: 0; display: block; width: 64px; height: 50px; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));}
        .busTabSwiper .swiper-button-prev.swiper-button-disabled + .swiper-button-prevBg {display: none;}        
        .busTabSwiper .swiper-button-next.swiper-button-disabled + .swiper-button-nextBg {display: none;}

        .stationBox {width: 100%; border-top: 1px solid #d7d7d7; border-left:none;}

    .stationLayout .conDan2 .conDanBox {flex-wrap: wrap;}
    .stationLayout .stationIn {width: 100%;}

    /* RES - 연구분야 */
    .departVisual {padding: 24px 15px; width: 100vw; height: 375px; border-radius: 0px; margin: 0 0 120px -15px;}
    .departCon {display: flex; flex-direction: column; width: 100%; justify-content: space-between; column-gap: 20px;}
    .departCon h2 {max-width: 300px; font-size: 24px; margin-bottom: 16px;}
        .departSystem .swiper-slide {padding: 15px 6% 22px 5%;}
    .departVisualImg { width: calc(100% - 30px); height: 160px; max-width: none; bottom: auto; left: 15px; margin-top: 24px; border-radius:10px 40px 40px 40px;}
    .departVisualImg a {font-size: 14px;}
    .departVisualImg .mobileHidden {display: none;}
        .departVisualImg .departVisual01 {width: 140px;height: 140px;/* top: 0; */}
        .departVisualImg .departVisual02 {transform: scale(0.6);bottom: -223px;right: -12vw;left: auto;}
        .departVisualImg .leftText {bottom: 10px;}

        .departVisualImg .midText01 {right: auto;top: 11%;left: 47%;}
        .departVisualImg .midText02 {right: 7%;top: 15%;right: 4%;transform: none;}
        .departVisualImg .midText03 { right: 17%; }
        .departVisualImg .rightText { top: 80px; }

        .departVisual.air .midText01 {right: auto;left: 230px;width: auto;top: 15px;}
        .departVisual.air .midText02 {right: 10px;top: 87px;}
        .departVisual.air .midText03 {right: -11px;}
        .departVisual.air .rightText {top:30px;}

        .departVisual.weather .midText01 {right: auto;left: 230px;width: auto;top: 15px;}
        .departVisual.weather .midText02 {right: 30px;}
        .departVisual.weather .midText03 {right: 30px;}
        .departVisual.weather .rightText {top:30px;}

        .departVisual.env .midText01 {right: auto;left: 38%;top: 20px;}
        .departVisual.env .midText02 {right: 30px;}
        .departVisual.env .midText03 {right: 30px;}
        .departVisual.env .rightText {top:30px;}

        .departVisual.resource .midText01 {right: auto;left: 38%;top: 20px;}
        .departVisual.resource .midText02 {right: 30px;}
        .departVisual.resource .midText03 {right: 30px;}
        .departVisual.resource .rightText {top:30px;}
    
    .departSystem {max-width: none; width: 100%;}
    .departSystem .swiperComponent {top: 20px;}
        .departSystemBtm h3 {font-size: 19px; line-height: 150%; margin: 4px 0;}
        .departSystemBtm span {font-size: 15px; margin-bottom: 12px;}
        .departSystemBtn > a {font-size: 13px; width: 50%; line-height: 30px; height: 30px; padding: 0 10px 0 12px; text-align: center;}
        .departSystemBtn > .btnL > i {font-size: 10px;}
        .departSystemBtn > .btnR {background: #3F4751 url(/template/template1/assets/img/sub/departMoreIcon.svg) no-repeat 14px center / 12px; padding-left: 30px;}
        .departSystemBtn > .btnR .mobileHidden {display: none;}

    .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; box-sizing: border-box; justify-content: center;}
    .departmentIntroIcon > li > div {margin-bottom: 12px;}
    .departmentIntroIcon > li > p {width: 70%; font-size: 15px;}

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

    .departReport.board > li {width: 100%;}

    .departmentIntro {flex-direction: column-reverse; position: relative;}
        .departmentIntroL .onSubText {font-size: 13px; margin: 4px 0 0;}
        .departmentIntroR {position: absolute; right: 0; top: -70px; width: 100px;}
        .departmentIntroR > img {width: 100%;}

    .departmentIntroIcon {flex-wrap: wrap; padding: 20px; row-gap: 16px;}
    .departmentIntroIcon > li {flex-direction: row; align-items: center; width: 100%;}
    .departmentIntroIcon.oneRowType > li {flex:none;}
    .departmentIntroIcon > li br {display: none;}
    .departmentIntroIcon > li > div {margin: 0 10px 0 0; flex-shrink: 0;}
    .departmentIntroIcon > li > p {font-size: 13px; width: 100%; text-align: left;}
        .introCircle > div {width: 34px; height: 34px;}
        .introCircle > div img {width: 100%;}

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

    .departMoreBox {padding: 20px 20px 60px; height: 210px;}
    .departMoreBox .onDotList {gap: 6px;}
    .departMoreBox .onDotList > li {flex: 1 1 100%; font-size: 15px;}
    .departMoreBtn {display: block;}

    .departmentTabBox {border: none; margin-top: -5px; margin-bottom: 27px;}
    .departmentTabBox.swiper .swiper-button-prev {left: 0;}
    .departmentTabBox.swiper .swiper-button-next {right: 0;}
    .onTab.department > li {height: 36px; font-size: 17px; line-height: 36px;}

    .departConTitle {padding-bottom: 12px; margin-bottom: 15px;}
    .departConTitle .onSubText {font-size: 13px; margin: 4px 0 0;}
    .departDetailInfo {flex-direction: column; row-gap: 10px; margin-bottom: 20px;}
    .departDetailInfo li > p {font-size: 13px;}
    .departP {font-size: 15px;}
    .departP + .onBtmS {font-size: 15px;}

    .departReport {flex-wrap: wrap;}
    .departReport > li {width: 100%; padding: 20px;}
        .departReportDate {margin-bottom: 20px;}
        .departReportBtn {row-gap: 12px; flex-wrap: wrap;}
        .departReportBtn .krds-btn.medium {font-size: 15px; height: 40px;}
        .departReportBtn a.krds-btn {width: 100%;}
        .departReportBtn a > i {font-size: 12px; margin-left: 0;}
        .departReportBtn a.krds-btn .btnTxt {flex: none;}

    /* 연구결과 */
    .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;}
    .waterChartPrimaryLists .swiper-button-prev.defaultStyle.shadow,
    .waterChartPrimaryLists .swiper-button-next.defaultStyle.shadow {display: block;}

    /* 예산현황 */
    .costChartImgBox {flex-wrap: wrap; gap:20px;}
    .costChartImgBox > div {width: 100%; padding: 20px;}
    .costChartImgBox > div p {margin-bottom: 25px;}

     /* 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;}

    /* 생태관 소개 */
    .onTab.defaultStyle.pcHidden {display: flex;}

    .bigFont {font-size: 24px;}
    .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; padding-bottom: 24px;}
    .yearLists > li {flex-direction: column;}
    .onArticleGallery {flex-direction: column; gap:16px;}

    /* 전시안내 */  
    .recommendedRoute {padding: 30px;}
    .routeGuide > p {font-size:16px;}
    .routeRecommendedDetail > li > div:not(.routeGuide) {flex-wrap: wrap; gap: 20px;}
     .routeGuideLists > div {flex-wrap: wrap;}
    .routeArrow {flex-basis: 100%; transform: rotate(90deg);}

    .exhibitionInfo {display: block;}
    .exhibitionInfo > .departmentTabBox {width: 100%; display: block;}
    .exhibitionInfo .onTab {flex-direction: row; gap:0px;}
    .exhibitionInfo .onTab > li {background: none;}
    .exhibitionInfo .onTab > li > a { padding: 13px 16px; justify-content: center; border-radius: 50px; }
    .exhibitionInfo .onTab > li > a .numbering,
    .exhibitionInfo .onTab > li > a .icon-next {display: none;}
    .exhibitionInfo .onTab > li > a .name { color: #999; font-size: 17px; font-weight: 600; }
    #exhibitionInfo > .departmentTabBox .swiper-buttons {display: flex;}
    #exhibitionInfo > .departmentTabBox.swiper .swiper-button-prev.swiper-button-disabled + .swiper-button-prevBg, 
    #exhibitionInfo > .departmentTabBox.swiper .swiper-button-next.swiper-button-disabled + .swiper-button-nextBg {display: none;}
    .exhibitionInfo > .onTabContents {width: 100%; margin-left: 0; margin-top:24px;}
    .exhibitionBox .title {flex-direction: column; align-items: flex-start;}
    .exhibitionBox .title span {margin-left: 0;}
    .exhibitionBox .contents{margin-top: 14px; margin-bottom: 24px; font-size: 15px;}
    .exhibitionBox .exhibitionImgBox {border-radius: 5px;}
    .exhibitionBox .exhibitionImgBox .swiper-slide,
    .exhibitionBox .exhibitionImg {height: auto;}
    .exhibitionBox .exhibitionImg {border-radius: 5px;}
    .exhibitionBox .exhibitionImgBox .swiper-pagination-bullet {width: 6px; height: 6px;}

    .wayInfo01 {gap:10px;}
    .wayInfo01 > li {width: 100%; }
    .wayInfo02 {gap: 18px;}
    .wayInfo02 > li {padding: 20px;}
    .wayInfo02 > li > div {flex-direction: column; gap: 20px;}
    .wayInfo02 > li > div > .wayMethod:nth-child(2) {padding-left: 0; border-top: 1px dashed #d7d7d7; border-left: none; padding-top: 20px;}
    .wayInfo02 > li > div > .wayMethod > .subTitle {font-size: 16px;}
    .wayInfo02 > li > div > .wayMethod > ul.wayTimeline > li {flex-direction: column;}

    .onTotalTab {margin-bottom: 24px;}
    .onTotalTab .onTab.defaultStyle {margin-bottom: 0;}
    .onTotalTab > div {border:1px solid #CDD9E7;border-radius: 12px;}
    .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;}

    .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); padding: 0;}
    .waterChartPrimaryListsTit,
    .waterChartPrimaryLists {width: calc(100% - 40px);}
    .envdataSatelliteBoxIn > img {display: none;}

    /* 국가시료은행 시료보관 현황 */
    .sectionBoxWrapper {flex-wrap:wrap;}
    .envdataSatellite {max-width: 100%;}
    .envdataSpecimen ul > li > p > span {font-size: 17px;}
    .envdataSpecimen ul > li > .specimenChartBox {height: 140px;}
    .envdataSpecimen ul > li > .specimenChartBox canvas {top:40px; right:0;}
    .envdataSpecimen .legendTotal {top:40px; right:0;}

    /* 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;}

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

    .researchSwiperWrap .departReport > li {width: 291px !important;}

    /* 환경데이터 전용 테이블 */
    .twoPartTableWrapper { overflow-x: auto; overflow-y: visible; height: auto; }
    .twoPartTableContainer .twoPartTableWrapper table.tbl { min-width: 100%; }
    .rightScrollColums { overflow-x: visible; overflow-y: visible; box-shadow: none; }
    .scrollableTable th:first-child, .scrollableTable td:first-child { border-left: none; }
    .selectValOption02Wrap {min-width: 100%;}

    /* 게시판 상세 이미지 슬라이더 */
    .tbSlide .center a {width: 33px; top:5px;}
    .tbSlide .center a img {width: 100%;}
}

@media (max-width: 510px) {
    .departVisualImg .leftText {left:29px;}
    .departVisualImg .midText01 {display: none;}
    .departVisualImg .departVisual02 {transform: scale(0.5); right:-150px;}
    .departVisual.air .midText02 {top:10px; right: 50px;}
    .departVisual.env .midText02 {top:20px;}

    .promoDataList {padding: 15px 110px 0 15px;}
    .promoDataList > ul > li > button {width: 100%; max-width: fit-content;}
    .promoDataList > ul > li > button p {}
    .dataBubble { width: 134px;}
    .bubble01 {text-align: left;}
    .bubble02 {text-align: left;}
    .bubble03 {text-align: left;}
    .bubble04 {text-align: left;}
    .bubble05 {text-align: left;}
}

/* 환경종합정보 반응형 예외처리 */
 @media (max-width: 440px) { 
    #informOverall{padding-right: 0;}
    .dustMapLWrapper {bottom: 280px; top:auto;}
    .envDataMapRightTableBox {margin-top: 100px;}
 }

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