@charset "UTF-8";
@import url('https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css');
/* color-1 : #004097; / color-2 : #f4f5f8 */
main {min-height:775px}
html{height: 100%;}
body{font-family: "Noto Sans Korean", "Noto Sans KR", sans-serif; height: 100%; color: #333333; overflow-x: hidden}
/*body{font-family: "Noto Sans Korean", "Noto Sans KR", sans-serif; color: #333333;}*/
#app{max-width: 1920px; margin: 0 auto;}
main{min-height: 1000px;}
.ellipsis-3{overflow: hidden; text-overflow: ellipsis; line-height: 1.8rem; height: calc(1.8rem * 3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.ctt_admin{display: none;}
.font-color-blue{color: #004097;}
.font-size-20{font-size: 1.25rem;}
.font-size-24{font-size: 1.5rem;}
.font-weight-500{font-weight: 500;}
.background-color-blue{background-color: #004097;}
.cke_sc{display: none;} /* 에디터 단축키 설명 */
.hd_pops_con{height: auto !important;}
.hd_pops_con > p{margin: 0;}
/*HEADER--------------------------------------------------------------------------------------------------------------*/
#app .container-lg {    max-width: 1920px;
    width: 100%;
    display: flex;
    position: fixed;
    z-index: 9999;
    justify-content: center;
    transition: all 0.5s;
    /*border-bottom: 0.15px solid #ffffff50;*/
}
.container-lg .row {flex-wrap: nowrap;width: 100%; padding: 0 11%; justify-content: space-between;}
#topAdminBtn{position: absolute; top: 0; right: 0; color: #004097;}
#menu #mainMenu > li{position: relative; width: calc(100% / 4);}
#menu #mainMenu > li > a{color: #034EA2;font-weight: 500; font-size: 18px; transition: all 0.5s;font-family: SCoreDream}
#menu .sub-menu{position: absolute; z-index: 99999; width: 100%; display: none;}
#menu .sub-menu > li > a{font-family: SCoreDream; color: #333333; background-color: #fff; padding: 12px 0;}
#menu .sub-menu > li > a:hover{background-color: #004097; color: #ffffff;}
#menuBack{position: absolute; top: 120px; width: 100%; height: 160px; z-index: 9999; display: none;}

.delaysec {animation-delay: 6s}
.slogan {  animation: outer-left 1s 1s ease both;   animation-delay: 6s;}
.slogan-box {     display: flex;flex-direction: column;    gap: 20px;   animation: inner-left 1s 1s ease both;  animation-delay: 6s;}
.slogan-top {    display: inline-block;  animation: inner-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both; font-size: 20px;font-weight: 500;  animation-delay: 7s;}
.slogan-top span {  display: inline-block;    animation:  text-clip 1.0s 0s cubic-bezier(0.5, 0, 0.1, 1) both;  animation-delay: 6s;}
.slogan-bottom {    display: inline-block;  animation: outer-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both; font-size: 50px;font-weight: 600;line-height:60px;  animation-delay: 7s;}
.slogan-bottom span {    display: inline-block; animation: text-clip 0.75s 0s cubic-bezier(0.5, 0, 0.1, 1) both;  animation-delay: 6s;}
.s_text {color: #FFF;text-align: center;font-family: S-Core Dream;font-style: normal;    text-transform: uppercase;}
@keyframes text-clip {from {clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);}
    to {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}}
@keyframes outer-left {from {transform: translateX(50%);}
    to {transform: none;}}
@keyframes inner-left {from {transform: translateX(-50%);}
    to {transform: none;}}

@media (max-width: 1280px) {
}
/*BODY--------------------------------------------------------------------------------------------------------------*/
/*TOP CSS*/
.main-container {position: relative; display: flex;flex-direction: column;  max-width: 1920px; width: 100%;}
.main-container .pre-img-box {width: 100%; height: 866px;background-color:#034EA2;  overflow: hidden;position: absolute; animation-name: emblem-bg; animation-duration: 1s;animation-fill-mode: forwards; animation-timing-function: ease-in-out; }
.main-container .img-box {display: flex;align-items: center;justify-content: center;width: 100%; height: 866px;overflow: hidden;position: absolute; z-index: -1}
.main-container .img-box img {object-fit:cover; position: absolute;top: 0%;min-width: 100%;min-height: 100%;width: auto;height: auto;}
.main-container .img-box img.active {opacity: 1;transform: scale(1);}
.main-container .box1 {width: 100%; height: 866px; overflow: hidden}
.main-container .flex1 {position:relative;z-index:11;padding-top: 340px;display: flex; flex-direction: column; align-items:center; gap: 20px}

.emblem {height: 192px;width: 186px;opacity: 1;animation-name:emblem-bg;animation-duration: 0.8s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;animation-delay: 5s}
.emblem-item {position: absolute;opacity: 0;animation-name: emblem;animation-duration: 1s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;}
.emblem-item-last {position: absolute;opacity: 0;scale: 1.15;transform: rotate(-100deg); animation-name: emblem-last;animation-duration: 1.25s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;}
/* 애니메이션을 조절할 클래스 */
.delay1 {animation-delay: 0.8s;}
.delay2 {animation-delay: 1.25s;}
.delay3 {animation-delay: 1.70s;}
.delay4 {animation-delay: 2.15s;}
.delay5 {animation-delay: 3.00s;}
/* 엠블럼 애니메이션 키 프레임 */
@keyframes emblem { to {opacity: 1; } }
@keyframes emblem-last { to {transform: rotate(0deg);scale: 1;opacity: 1; } }
@keyframes emblem-bg {to {opacity: 0;} }
/*.main-container .line-container {width: 1px;overflow: hidden;position: relative;}*/
/*2 CSS*/
.main-container .box2 {display: inline-flex;width: 100%;height: 390px;overflow: hidden;align-items: center;justify-content: center; padding: 0 11%}
.main-container .flex2 {    gap: clamp(0rem, -16.429rem + 25.67vw, 14.375rem);position: relative;z-index: 11;display: flex;align-items: flex-start;justify-content: flex-start;width: 100%;}
.main-container .notice-main {    padding-right: 30px;margin-bottom: 24px;display: flex; flex-direction: column;align-items: flex-start;justify-content: center;}
.main-container b1 {white-space: nowrap; font-size: clamp(2.188rem, 0.402rem + 2.79vw, 3.75rem);color: #034EA2;font-family: 'SCoreDream';font-style: normal;font-weight: 500;line-height: normal;}
.main-container b2{font-size: clamp(2.188rem, 0.402rem + 2.79vw, 3.75rem);  margin-top: -10px; color: #034EA2;font-family: 'SCoreDream';font-style: normal;font-weight: 600;line-height: normal;}

.main-container .flex2-1 {display: flex;align-items: center;justify-content: center; gap:clamp(1.875rem, -0.268rem + 3.348vw, 3.75rem)}
.main-container .notice-box {height: fit-content; display: flex; flex-direction: column;align-items: flex-start; gap: 20px}
/*.main-container .notice-head {width: 100%; display: flex; align-items: center; justify-content: space-between;}*/
/*.main-container .notice-cont {color: #FFF;width:100%;display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px}*/
.main-container .holding {width:clamp(15.625rem, 7.054rem + 13.393vw, 23.125rem); padding: unset}
.main-container b3,.main-container .holding h2 a {color: #000;font-family: 'SCoreDream';font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;}
.main-container b4,.main-container .holding li a {    line-height: 25px;width: 100%; white-space:nowrap;overflow: hidden;text-overflow: ellipsis;color: #000;font-family: 'SCoreDream';font-size: 16px;font-style: normal;font-weight: 400;}
.text-white {color: white}

/*3 CSS*/
.main-container .box2-2 {display: inline-flex;width: 100%;height: 345px;overflow: hidden;align-items: center;justify-content: center;padding: 0 11%}
.main-container .bgcolor {position: absolute;height: 345px;background-color: #a6c2e1a8; width: 100%}
.main-container .linkbanner {display: flex; flex-direction: column;justify-content: center;}
.main-container .link-banner-fixed-div {display: flex;flex-direction: row;align-items:center; width: 100%; white-space: nowrap}
.main-container .link-banner-div {height:50px;width:100%; padding: 78px 0}
/*.main-container .blue-box {position: absolute;z-index: 2;top: 601px;width: 100%;border-bottom: 1920px;FONT-WEIGHT: 100;border-bottom: 200px solid #004097;border-left: 120rem solid transparent;}*/
/*.main-container .flex3 {position:relative;z-index:11;margin-top: 66px;margin-bottom: 50px; padding-right:clamp(1.5rem, -19.643rem + 33.036vw, 20rem); gap:85px; display: flex;     align-items: center;justify-content: flex-end; }*/
/*.main-container .line {width: 100%;height: 100%;background-color: #fff;}*/
/*.main-container .p-box { display: flex; align-items: center; gap:6px}*/
/*.main-container .point {transition:all 0.4s; border-radius: 11px;border: 1px solid #FFF;width: 10px;height: 10px;}*/
/*.main-container .point.active {transition:all 0.4s; width: 30px;height: 10px;border-radius: 11px;background: #FFF;}*/
/*.main-container a0 {color: #FFF;font-size: 50px;font-style: normal;font-weight: 700;line-height: normal;text-transform: uppercase;}*/
/*.main-container a1 {text-align: center; color: #FFF ;font-size: 45px;font-style: normal;font-weight: 100;line-height: 100%;text-transform: uppercase;}*/
/*.main-container a2 {color: #FFF ;font-size: 45px;font-style: normal;font-weight: 100;line-height: normal;text-transform: uppercase;}*/
/*.main-container a3 {color: #004097;font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;}*/
/*.main-container a4 {padding-bottom:1.5px;color: #CED4DA;font-size: 12px;font-style: normal;font-weight: 700;line-height: normal;}*/
/*.main-container .aboutUs {margin-top: 30px;width: 204px;height: 54px;flex-shrink: 0;border-radius: 2px;background: #F8F9FA;display: inline-flex; align-items: center; justify-content: center;}*/
/*.main-container .aboutUs .box {display: flex; justify-content: center; align-items: flex-end; gap: 5px}*/
/*애니메이션용 css*/
.flex2, .flex1 .p-box, .flex1 a0, .flex1 a1 {opacity: 0;transform: translateY(20px); transition: transform 2s ease-in-out, opacity 2s ease-in-out; }
.flex1 .p-box {animation: fadeInUp 1s ease-in-out; animation-delay: 0.75s; animation-fill-mode: forwards;}
.flex1 a0 {animation: fadeInUp 1s ease-in-out; animation-delay: 0.75s; animation-fill-mode: forwards;}
.flex1 a1 {animation: fadeInUp 1s ease-in-out; animation-delay: 1s; animation-fill-mode: forwards;}
.main-container .line-container {animation: slideDown 1s ease-in; animation-delay: 2s; animation-fill-mode: forwards;}
.flex2 {animation: fadeInUp 1s ease-in-out; animation-delay: 3s; animation-fill-mode: forwards;}

.main-container .img-box img {transform: scale(1.2);opacity: 0; transition: opacity 2s ease, transform 4s ease; }

@keyframes fadeInUp { from {     opacity: 0; transform: translateY(20px); } to {opacity: 1; transform: translateY(0);} }
@keyframes slideDown { 0% {     height: 0px; } 100% {height: 253px;} }

/*MOBILE MENU---------------------------------------------------------------------------------------------------------*/
#mobileMenu{background-color: #FFFFFF;position: absolute; z-index: 99999; top: 60px; display: none;position: fixed;font-family: SCoreDream }
#mobileMenu #mainMenu > li > span{color: #333333; padding: 0 15px; font-weight: 500; }
#mobileMenu #mainMenu > li > span.active{background-color: #004097; color: #ffffff;}
#mobileMenu .sub-menu{display: none;}
#mobileMenu #mainMenu > li > span.active + .sub-menu{display: block;}
/*BANNER--------------------------------------------------------------------------------------------------------------*/
#mainBanner{position: relative; overflow: hidden;}
.banner-box{position: relative;}
.banner-box > .banner-title{position: absolute; display: inline-block; width: 100%; top: 55%; left: 50%; transform: translate(-50%, -50%); webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.banner-box > .banner-title > div{text-shadow: 0 0 3px #17202A;}
.banner-box > .banner-title > div:nth-child(1){font-size: 30px; font-weight: 500;}
.banner-box > .banner-title > div:nth-child(2){font-size: 40px; font-weight: 700;}
.banner-btn{position: absolute; top: 50%; transform: translateY(-50%); webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 999;}
.no-image{height: 586px;}
.banner-btn{font-size: 3rem;}
#prevBanner{left: 15px;}
#nextBanner{right: 15px;}
#mouseScroll{position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 999;}
/*SUBPAGEIMAGE--------------------------------------------------------------------------------------------------------*/
#subPageImg{position: relative;}
#subPageImg > div{font-size: 50px; font-weight: 500; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 0 0 3px #17202A;}
#subPageImg {max-width: unset}
/*ICONLINK------------------------------------------------------------------------------------------------------------*/
#iconLink{background-image: url('//jejutake2.cafe24.com/theme/jejuholdings/img/blue-dot-pattern.jpg'); background-repeat: repeat;}
.iconLinkBoxes > .iconLinkImg{width: 94px; height: 94px;}
/*LATESTBOARD---------------------------------------------------------------------------------------------------------*/
#latestBoard{background-color: #f9f8f8;}
#latestBoardBanner{margin-bottom: 0;}
.board-box{height: 370px; position: relative;}
.board-box-badge{background-color: #004097;}
.board-box-link:hover{text-decoration: none;}
.board-box-title{color: #222222; font-weight: 500; font-size: 22px;}
.board-box-date > p{color: #004097; font-weight: 700;}
.more-btn{background-color: #004097;}
#latestBoard .latest-board-dots{padding: 0; margin: 0; text-align: center; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 100%;}
#latestBoard .latest-board-dots > li{list-style: none; display: inline-block;}
#latestBoard .latest-board-dots > li > .dot-btn{color: #575757; border: 1px solid #575757; width: 100px;}
#latestBoard .latest-board-dots > li.slick-active > .dot-btn{color: #ffffff; border: 1px solid transparent; background-color: #004097;}
/*LINKBANNER----------------------------------------------------------------------------------------------------------*/
#linkBanner{width: 800px;}
.link-banner-no-image{height: 39px;}
.link-banner-fixed-div{width: 350px;}
.link-banner-div{width: calc(100% - 350px);}
.link-banner-links{height: fit-content;width: fit-content}
.slick-track {height:50px !important;display: flex;align-items: center}
@media (max-width: 1903px) {
    #linkBanner{width: clamp(33.125rem, 13.839rem + 30.134vw, 50rem)}
}

/*FOOTER--------------------------------------------------------------------------------------------------------------*/
footer {
    background-color: #202020;
    color: #c2c2c2;
}

.footer-box {
    margin: 0 auto;
    max-width: 1920px;
    border-top: 1px solid #DEE2E6;
    background: #F8F9FA;
    padding: 28px 11%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.line-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.line-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.line1, .line2, .line3 {
    flex-wrap: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    row-gap: 8px;
    column-gap: 20px;
    padding-left: 18px;
}

.icon-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px
}

.line1 a {
    color: #004097;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.line1 span, .line2 span, .line3 span {
    color: #868E96;
    font-family: 'SCoreDream';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    white-space: nowrap;
}

.line-right span {
    text-align: right;
    color: #868E96;
    font-family: 'SCoreDream';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

@media (max-width: 1280px) {
    .line1 span, .line2 span, .line3 span, .line-right span {
        font-size: 10px;
    }
}

/*ROUTE---------------------------------------------------------------------------------------------------------------*/
#route{background-color: transparent;    position: absolute;
    width: 100%;
    bottom: 0;}
#route > div > div{ position: relative;}
#route > div > div:last-child{}
#route > div > div span{cursor: pointer; color: rgba(255,255,255,0.5);}
#route > div > div ul{display: none;}
#route > div > div a{     height: 60px;width: 100%;color: #fff;font-family: Pretendard;font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;display: inline-flex;align-items: center;justify-content: center;
}
#route .route-home{font-size: 1.25rem; color: rgba(255,255,255,0.5);}
#route .route-main-menu, #route .route-sub-menu{width: 216px;}
#route .route-main-menu > ul,
#route .route-sub-menu > ul{position: absolute; top: 46px; z-index: 9999; width: 100%;}
#route .route-main-menu > ul a:hover,
#route .route-sub-menu > ul a:hover{background-color: #004097; color: #ffffff;}
#route .route-main-menu > ul > li > a.active,
#route .route-sub-menu > ul > li > a.active{background-color: #004097; color: #ffffff;}

.resetheight {min-height: 340px}

.imgcover {width: 100%;height: 100%;object-fit: cover;}
.headbutton2 {width: 50%; display: inline-flex; justify-content: center; align-items: center;}
.headbutton3 {width: 33.33333333333%; display: inline-flex; justify-content: center; align-items: center;}
.headbutton4 {width: 25%; display: inline-flex; justify-content: center; align-items: center;}
.headbutton5 {width: 20%; display: inline-flex; justify-content: center; align-items: center;}

.headbutton2:nth-child(2) {border-left: 1px solid rgba(255, 255, 255, 0.60);}
.headbutton3:nth-child(2) {border-right: 1px solid rgba(255, 255, 255, 0.60);border-left: 1px solid rgba(255, 255, 255, 0.60);}
.headbutton4:nth-child(2),
.headbutton4:nth-child(3) {border-right: 1px solid rgba(255, 255, 255, 0.60);border-left: 1px solid rgba(255, 255, 255, 0.60);}
.light-on {background-color: #fff; color: #004097 !important;}
/*TITLE AND ROUTE-----------------------------------------------------------------------------------------------------*/
#nowRoute{position: absolute; bottom: 0; right: 0; color: #004097;}
/*CONTENT-------------------------------------------------------------------------------------------------------------*/
#contentAdmin{position: absolute; top: 5px; right: 15px;}
#ctt .title{border-left: 3px solid #004097; padding-left: 5px; font-size: 20px; font-weight: 500; margin-bottom: 30px;}
.ctt_overview .overview-purpose .purpose-circle{width: 250px; height: 250px; border: 10px solid #a8cef4;}
.ctt_overview .overview-purpose .purpose-circle > div{padding: 30px;}
.ctt_overview .overview-purpose .purpose-circle img{margin-bottom: 25px;}
.ctt_overview .overview-purpose-table{border-top: 2px solid #004097;}
.ctt_overview .overview-purpose-table th{text-align: center; font-weight: 500; background-color: #f4f5f8;}
.ctt_overview .overview-purpose-table td{font-size: 14px;}
.ctt_tips .overview-purpose .purpose-circle{width: 250px; height: 250px; border: 10px solid #a8cef4;}
.ctt_tips .overview-purpose .purpose-circle > div{padding: 30px;}
.ctt_tips .overview-purpose .purpose-circle img{margin-bottom: 25px;}
.ctt_tips .overview-purpose-table{border-top: 2px solid #004097;}
.ctt_tips .overview-purpose-table th{text-align: center; font-weight: 500; background-color: #f4f5f8;border-right: 1px solid #dee2e6;     line-height: normal;}
.ctt_tips .overview-purpose-table td{font-size: 14px; text-align: center;border-right: 1px solid #dee2e6;    line-height: normal; }
.ctt_tips .overview-purpose-table td:last-child,
.ctt_tips .overview-purpose-table th:last-child{    border-right: none;}
.nobr {border-right: 1px solid #dee2e6 !important; }
.ctt_overview .overview-history-1 > div.col{position: relative; padding-bottom: 70px;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n-1){border-right: 1px solid #dddddd; text-align: right;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n){text-align: left;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n-1):before{content: ''; display: inline-block; width: 6px; height: 6px; background-color: #ffffff; position: absolute; top: 3px; right: -4px; border-radius: 50%; z-index: 9;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n-1):after{content: ''; display: inline-block; width: 12px; height: 12px; background-color: #004097; position: absolute; top: 0; right: -7px; border-radius: 50%;}
.ctt_overview .overview-history-1 > div.col > div{position: relative;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n-1) > div{padding-right: 70px;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n) > div{padding-left: 70px;}
.ctt_overview .overview-history-1 > div.col span{color: #004097; position: absolute; top: 0;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n-1) span{right: 0;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n) span{left: 0;}
.ctt_overview .overview-history-1 > div.col > p{margin: 0; font-size: 32px; font-weight: 500; position: absolute; top: -20px; color: #004097;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n-1) > p{right: 30px;}
.ctt_overview .overview-history-1 > div.col:nth-child(2n) > p{left: 30px;}
.ctt_overview .overview-history-2{display: none;}
.ctt_overview .overview-history-2 div.col:nth-child(2n){margin-bottom: 30px;}
.ctt_overview .overview-history-2 div.col > div{margin-bottom: 10px;}
.ctt_overview .overview-history-2 p{font-size: 32px; font-weight: 500; color: #004097; margin: 0;}
.ctt_overview .overview-history-2 span{color: #004097;}
.ctt_inventor .list > li::marker{color: #004097;}
.ctt_cooperativeNetworks .img-list > div{height: 70px;}
.ctt_cooperativeNetworks .img-list > div > div > a > img{height: 39px;}
.ctt_cooperativeNetworks .main-cooperative{border: 2px solid #d2d2d2; margin-bottom: 50px; position: relative; border-radius: 10px; padding: 20px 10px;}
.ctt_cooperativeNetworks .main-cooperative .title{position: absolute; top: -14px; left: 20px; background-color: #ffffff; border-left: none !important; padding: 0 10px !important}
.ctt_cooperativeNetworks .sub-cooperative:not(:last-child){margin-bottom: 25px;}
.ctt_cooperativeNetworks .sub-cooperative .sub-title{color: #ffffff; background-color: #8fa2bc; font-size: 15px; width: 132px; height: 40px; line-height: 40px; text-align: center; margin-bottom: 15px; margin-left: 15px;}
/*BOARD---------------------------------------------------------------------------------------------------------------*/
#boardAdmin{position: absolute; top: 5px; right: 15px;}
.board-btns > li{margin-right: 5px;}
.board-btns > li:last-child{margin-right: 0;}
.basic-board .table-header{font-weight: 500; font-size: 1.25rem; background-color: #f4f5f8; border-top: 2px solid #004097;}
.basic-board .table-body a{color: #333333;}
.basic-board .table-body:hover{background-color: #f4f5f8;}
#boardSearchBar > fieldset{width: 50%;}
#subsidiaryBoard a{text-decoration: none;}
#subsidiaryBoard .subsidiary-box{margin-bottom: 30px;}
#subsidiaryBoard .subsidiary-logo{height: 200px;}
#subsidiaryBoard .subsidiary-logo > img{width: 75%;}
#subsidiaryBoard .subsidiary-logo .no-logo{font-size: 22px; font-weight: 500;}
#subsidiaryBoardView{border-top: 2px solid #004097;}
#subsidiaryBoardView > div.row{border: 1px solid #dee2e6;}
#subsidiaryBoardView #subsidiaryLogo{border-right: 1px solid #dee2e6;}
#subsidiaryBoardView #subsidiaryLogo .no-logo{font-size: 22px; font-weight: 500;}
#subsidiaryBoardView #subsidiaryTitle{border-bottom: 1px solid #dee2e6;}
#subsidiaryBoardView #subsidiaryTitle i{color: #004097;}
#subsidiaryBoardView #subsidiaryText{position: relative;}
#subsidiaryBoardView #subsidiaryText > div > div:not(:last-child){margin-bottom: 20px;}
#subsidiaryBoardView #subsidiaryText .brochure-btn{position: absolute; bottom: 15px; right: 15px;}
#contactBoardView .view-group{margin-bottom: 30px;}
#contactBoardView .view-group .view-group-title{font-size: 20px; font-weight: 500; color: #004097;}
#contactBoardView .view-group .view-group-text{}
.board-view-image-link{max-width: 500px; width: 100%; height: auto; display: block; margin: 0 auto;}
.board-view-image{max-width: 500px; width: 100%; height: auto; display: block; margin: 0 auto;}
/*POPUP---------------------------------------------------------------------------------------------------------------*/
.popup-section{position: absolute; top: 120px; left: 10px; z-index: 99999999; max-width: 500px; width: 100%; height: auto;}
/*MEDIA<=1200px-------------------------------------------------------------------------------------------------------*/
@media (max-width: 1250px) {
    #topLogo {scale: 0.8}#menu #mainMenu > li {width: 115px!important;}    #menu #mainMenu > li > a {white-space: nowrap; font-size: 16px}#menu .sub-menu > li > a{font-size: 14px}
    .banner-box > .banner-title > div:nth-child(1){font-size: 20px;}
    .banner-box > .banner-title > div:nth-child(2){font-size: 30px;}
    .banner-btn{font-size: 2rem;}    .container-lg .row {padding: 0 3%}
    #mouseScroll > img{height: 50px;}
}
/*MEDIA<=992px--------------------------------------------------------------------------------------------------------*/
@media (max-width: 1024px) {

    .main-container .notice-main {padding-right: unset}

    .main-container .flex2 {    align-items: center;        justify-content: flex-start;flex-direction: column;}
    .main-container .notice-main {    align-items: center;}
    .main-container b1, .main-container b2 {font-size: 32px}
    .main-container b3, .main-container .holding h2 a {font-size: 20px}
    .main-container b4, .main-container .holding li a {font-size: 16px}
    #linkBanner {width: 600px}
    .resetheight {min-height: 280px}

    #subsidiaryBoardView > div.row > div.col-3,
    #subsidiaryBoardView > div.row > div.col-9{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;}
    #subsidiaryBoardView #subsidiaryLogo{border-right: none; border-bottom: 1px solid #dee2e6;}
    #subPageImg > div{font-size: 35px;}
    #route > div > div a {height: 55px}
    #route > .container-md {max-width: unset; width:100%; margin-left:unset; margin-right: unset; padding-left: unset; padding-right: unset}
}
/*MEDIA<=768px--------------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
    .main-container .holding {width:clamp(14.625rem, 0.531rem + 75.167vw, 36.611rem)}
    .logoimg.a1{display: none}.logoimg.a2{display: block!important;position: fixed;left:50px;}
    .container-lg .row {padding: unset; height: 60px}
    .slick-initialized .slick-slide {width: 160px}.line1 span, .line2 span, .line3 span {white-space: unset;}
    .line3 {flex-direction: column; align-items: flex-start;margin-top: 10px}.line-left, .line-right {width: 100%}
    .main-container .link-banner-fixed-div {align-items: flex-start}.img-fluid {float:left}.main-container .notice-main.w768 {align-items: unset!important;width: 100%!important;}
    .footer-box {flex-direction: column;align-items: center;gap: 10px;}.main-container .flex2-1 {flex-direction: column; align-items: center;}
    .main-container .box2 {height: 675px;}#linkBanner {width: 100%;}.main-container b1, .main-container b2 {font-size: 35px}
    .main-container b3, .main-container .holding h2 a {font-size: 18px}.slogan-top {font-size: 16px} .slogan-bottom{font-size: 28px; line-height: 32px}
    .main-container b4, .main-container .holding li a {font-size: 14px}.main-container .box2-2, .main-container .bgcolor {height: 500px}
    .main-container .link-banner-fixed-div {flex-direction: column; gap: 20px}.link-banner-links {height: 42px;width: 236px;}
    /*.main-container .holding {width:unset}*/
    main{min-height: auto;}
    #route > div > div a {height: 50px; font-size: 16px}
    .resetheight {min-height: 219px}
    #subPageImg > div{font-size: 28px;}
    .banner-box > .banner-title{top: 50%;}
    .banner-box > .banner-title > div:nth-child(1){font-size: 15px;}
    .banner-box > .banner-title > div:nth-child(2){font-size: 17px;}
    #mouseScroll{display: none;}
    .iconLinkBoxes > .iconLinkImg{width: 80px; height: 80px;}
    .iconLinkBoxes > .iconLinkImg > img{width: 30px;}
    #noticeBoard .table-header{font-size: 1rem;}
    #boardSearchBar > fieldset{width: 100%;}
    .link-banner-fixed-div{text-align: center;}
    .link-banner-fixed-div, .link-banner-div{width: 100%;}
    #subPageImg > div{font-size: 28px;}
}
/*MEDIA<=576px--------------------------------------------------------------------------------------------------------*/
@media (max-width: 576px) {
    header .container-lg .row{height: 80px; transition: all 0.5s}
    .banner-btn{font-size: 1.25rem;}
    #route .route-home{display: none !important;}
    #nowRoute{position: relative;}
    .board-btns > li{margin-right: 0; width: 100%; margin-bottom: 5px;}
    .board-btns > li:last-child{margin-bottom: 0;}
    .board-btns > li > *{width: 100%;}
    .ctt_overview .overview-history-1{display: none;}
    .ctt_overview .overview-history-2{display: block;}
    .ctt_overview .overview-history-2 span{color: #004097; margin-right: 10px;}
    .ctt_cooperativeNetworks .img-list > div:not(:last-child){margin-bottom: 15px;}
    #subsidiaryBoard .subsidiary-logo{height: 150px;}
    #subsidiaryBoard .subsidiary-logo > img{width: auto; height: 50%;}
    .ctt_overview .overview-purpose .purpose-circle{width: auto; height: 150px; border: 1px solid #a8cef4; font-size: 12px; border-radius: .25rem !important;}
    .ctt_overview .overview-purpose .purpose-circle > div{padding: 5px 10px;}
    .ctt_overview .overview-purpose .purpose-circle img{margin-bottom: 15px;}
    #latestBoard .latest-board-dots > li > .dot-btn{width: 85px;}
    .hd_pops{position: static;}
    .hd_pops_con{height: auto !important; width: 100% !important;}
    .hd_pops_con img{width: 100%;}
}