@charset "utf-8";

html, body {
    font-family: 'Noto Sans KR';
    /* font-family: 'Noto Sans KR', "Apple SD Gothic Neo", "Malgun Gothic", Sans-serif; */
    height: 100%;
    margin: 0;
    min-height: 720px; 
    display: flex;
    flex-direction: column; /* Stack children vertically */
    overflow-y: hidden; /* Prevent scrolling on the main window */
}



/* ******************************************************* */
/* ******************************************************* */
/*                        로그인 화면                         */
/* ******************************************************* */
/* ******************************************************* */

.bg {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.login-box {
    position: absolute;
    top: 50%; /* 화면 상단 50%에 위치 */
    transform: translateY(-80%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 로그인 Input */
.login-box input {
    width: 250px;
    padding: 20px;
    margin: 10px 0;
    border: none;
    border-radius: 35px;
    background-color: #e0e0e0;
    font-size: 15px;
}


/* 로그인 Button */
.login-box button {
    width: 150px;
    padding: 15px;
    margin: 10px 0;
    border: none;
    border-radius: 35px;
    background-color: #666666;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.login-box button:hover {
    background-color: #4c4c4c;
}


/* 로그인 타이틀 */
.login-title {
    margin: 0;
    line-height: 100%;
    /* font-size: max(8vh, 100px);  */
    font-size: 100px; 
    color: #24aae1;
    user-select: none; /* 드래그 비활성화 */
}

.login-sub-title {
    margin-top: 0px;
    margin-bottom: 5vh;
    font-size: 25px; 
    /* font-size: max(2vh, 25px);  */
    color: #666666;
    user-select: none; /* 드래그 비활성화 */
}

/* 로그인 푸터 */
.footer {
    position: absolute;
    bottom: 2vh;
    width: 90%;
    transform: translateX(5%);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 1.3;
    color: gray;
}

.footer .left, .footer .right {
    display: flex;
    align-items: center;
}

.footer .left {
    justify-content: center;
    width: 100%; /* 가운데 정렬을 위해 전체 너비 사용 */
    /* text-align: center; */
}


.footer .left .bot-logo {
    background-image: url('/lsm/_Img/bot-logo.png'); 
    width: 170px;   
    height: 60px;   
    background-size: cover;  
    background-position: center;  
    display: inline-block; 
    margin-right: 15px;
}

.footer p {
    margin: 0;
}

.footer i {
    font-size: 48px;
    margin-right: 15px;
}
.footer a {
    color: gray;
    text-decoration: none;
}

.footer a:hover {
    color: black;
}

.footer .qr-code {
    background-image: url('/lsm/_Img/qr-code.png'); 
    width: 60px;   
    height: 60px;   
    background-size: cover;  
    background-position: center;  
    display: inline-block; 
}


/* ******************************************************* */
/* ******************************************************* */
/*                         팝업 화면                         */
/* ******************************************************* */
/* ******************************************************* */

/* 로그인 설정 팝업 */

.layer-wrap{border:1px solid #fff; border-radius:0.6vw; background:#fff; width:40%; max-width:720px; min-width:480px;overflow:hidden;left:50%; top:50%;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}
.layer-wrap .is-top{padding:2vw 5vw; position:relative;background:#24aae1;}
.layer-wrap .is-top h2{font-size:3vw; font-weight:400; color:#fff; line-height:2.8vw; letter-spacing:-0.03em;}
.layer-wrap .is-top h2 span{font-weight:700;margin-right:5px;}
.layer-wrap .is-top .close{width:4vw;height:4vw; position:absolute;right:1.5vw; top:50%;margin-top:-2vw;filter: invert(1);background:url(/lsm/_Img/close.png) no-repeat center center; background-size:50% auto;}
	@media only screen and (max-width:860px){
		.layer-wrap{border-radius:8px;}
		.layer-wrap .is-top{padding:20px 25px;}
		.layer-wrap .is-top h2{font-size:24px;line-height:30px; }
		.layer-wrap .is-top .close{width:40px;height:40px;right:15px ;margin-top:-20px;}
	}	
	@media only screen and (min-width:1200px){
		.layer-wrap{border-radius:15px;}
		.layer-wrap .is-top{padding:30px 70px;}
		.layer-wrap .is-top h2{font-size:40px;line-height:35px; }
		.layer-wrap .is-top .close{width:48px;height:48px;right:15px ;margin-top:-24px;}
	}

.layer-wrap .is-con{padding:3vw 5vw;}
.layer-wrap .is-con .vimg{font-size:0;}
.layer-wrap .is-con .vimg img{width:47.5%;}
.layer-wrap .is-con .vimg img:nth-child(n+2){margin-left:5%;}

.layer-wrap .is-con .v-list01{margin-top:3.5vw; padding:0.5vw;}
.layer-wrap .is-con .v-list01 ul:after{display:block; content:"";clear:both;}
.layer-wrap .is-con .v-list01 li{position:relative; font-size:0; float:left;}
.layer-wrap .is-con .v-list01 li:nth-child(n+2){margin-left:2vw;}
.layer-wrap .is-con .v-list01 li .btxt{padding:0 1.5vw;height:3vw; line-height:3vw; border-radius:3vw; text-align:center;background:#666; color:#fff; font-size:1.2vw; margin-right:10px;letter-spacing:-0.03em; display:inline-block;vertical-align:top;margin-right:1vw;}
.layer-wrap .is-con .v-list01 li .stxt{line-height:3vw;color:#666; font-size:1.4vw; font-weight:500; letter-spacing:-0.03em; display:inline-block;vertical-align:top;}


@media only screen and (max-width:860px){
    .layer-wrap .is-con{padding:30px 50px;}
    .layer-wrap .is-con .v-list01{margin-top:35px; padding:5px;}
    .layer-wrap .is-con .v-list01 li:nth-child(n+2){margin-left:20px;}
    .layer-wrap .is-con .v-list01 li .btxt{padding:0 15px;height:32px; line-height:32px; border-radius:32px;font-size:13px;margin-right:10px; }
    .layer-wrap .is-con .v-list01 li .stxt{line-height:32px; font-size:15px;}
}
@media only screen and (min-width:1200px){
    .layer-wrap .is-con{padding:45px 70px;}
    .layer-wrap .is-con .v-list01{margin-top:40px; padding:10px;}
    .layer-wrap .is-con .v-list01 li:nth-child(n+2){margin-left:30px;}
    .layer-wrap .is-con .v-list01 li .btxt{padding:0 20px;height:30px; line-height:30px; border-radius:32px;font-size:18px;}
    .layer-wrap .is-con .v-list01 li .stxt{line-height:30px; font-size:19px;}
}


.layer-wrap .is-con .v-list02{margin-top:2.5vw; padding:0.5vw;}
.layer-wrap .is-con .v-list02 ul:after{display:block; content:"";clear:both;}
.layer-wrap .is-con .v-list02 li{position:relative; padding-left:10.5vw;}
.layer-wrap .is-con .v-list02 li:nth-child(n+2){margin-top:2.5vw;}
.layer-wrap .is-con .v-list02 li .btxt{width:9.2vw;height:3vw; line-height:3vw; border-radius:3vw; text-align:center;background:#666; color:#fff; font-size:1.3vw; letter-spacing:-0.03em; position:absolute;left:0; top:0;}
.layer-wrap .is-con .v-list02 li .stxt{line-height:3vw;color:#666; font-size:1.4vw; font-weight:500; letter-spacing:-0.03em; display:inline-block;vertical-align:top;word-break: keep-all;}
.layer-wrap .is-con .v-list02 li .itxt{width:100%;height:3vw; line-height:3vw;  border-radius:3vw; padding:0px 1.5vw;background:#e0e0e0;color:#000;font-size:1.3vw;border:none;color:#666;box-sizing:border-box;}
.layer-wrap .is-con .v-list02 li select.itxt { padding:0vw 1.5vw;}
.layer-wrap .is-con .v-list02 button{width: 40%; line-height: 100%; height:3vw; border-radius:3vw; background: #666; color: white; font-size: 1.2vw; border: none; cursor: pointer;}
.layer-wrap .is-con .v-list02 button.login-apply{background: #24aae1;}

@media only screen and (max-width:860px){
    .layer-wrap .is-con .v-list02{margin-top:25px; padding:5px;}
    .layer-wrap .is-con .v-list02 li{position:relative; padding-left:105px;}
    .layer-wrap .is-con .v-list02 li:nth-child(n+2){margin-top:12px;}
    .layer-wrap .is-con .v-list02 li .btxt{width:92px;height:32px; line-height:32px; border-radius:32px;font-size:13px;}
    .layer-wrap .is-con .v-list02 li .stxt{line-height:32px; font-size:15px;}
    .layer-wrap .is-con .v-list02 li .itxt{height:32px; line-height:32px; border-radius:32px; font-size:13px;}
    .layer-wrap .is-con .v-list02 button{width:130px;height:32px; border-radius:32px;font-size:13px;}
}
@media only screen and (min-width:1200px){
    .layer-wrap .is-con .v-list02{margin-top:30px; padding:10px;}
    .layer-wrap .is-con .v-list02 li{position:relative; padding-left:150px;}
    .layer-wrap .is-con .v-list02 li:nth-child(n+2){margin-top:16px;}
    .layer-wrap .is-con .v-list02 li .btxt{width:130px; height:42px; line-height:42px; border-radius:42px;font-size:18px;}
    .layer-wrap .is-con .v-list02 li .stxt{line-height:42px; font-size:19px;}
    .layer-wrap .is-con .v-list02 li .itxt{height:42px; line-height:42px; border-radius:42px; font-size:18px;}
    .layer-wrap .is-con .v-list02 button{width:180px; height:42px; border-radius:42px;font-size:18px;}

}


/* 팝업 사이드 버튼 */

.layer-wrap .side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layer-wrap .side-arrow::before {
    content: '';
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(100%);
}

.layer-wrap .side-arrow.left {
    left: 0;
}

.layer-wrap .side-arrow.right {
    right: 0;
}

.layer-wrap .side-arrow.left::before {
    background-image: url('/lsm/_Img/arrow/left-arrow.png');
}

.layer-wrap .side-arrow.right::before {
    background-image: url('/lsm/_Img/arrow/right-arrow.png');
}


/* 농장 알람 팝업 */
.layer-wrap.alert{width: 80%;}
.layer-wrap.alert .is-con .v-list02 li .itxt.area {height: auto; max-height: 20vh; line-height: 20px; border-radius: 1vw; padding-top: 15px;}


/* 로딩 화면 */

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ******************************************************* */
/* ******************************************************* */
/*                         메인 헤더                         */
/* ******************************************************* */
/* ******************************************************* */
header {
    background-color: #fff;
    padding: 2vh 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-logo{
    height: 50px;
    width: 300px;
    object-fit: contain;
    object-position: left center;
}

.logo {
    font-size: min(70px, 8vw) !important;
    line-height: 100%;
    color: #24aae1; /* Adjust the color to match your brand */
}
.logo .bold {
    font-weight: bold;
}
.logo .normal {
    font-weight: normal;
}
.logo .lighter {
    font-weight: lighter;
}
.info-bar {
    width: 100%;
    display: flex;
    align-items: center;
    /* align-items: end; */
    /* flex-direction: row; */
    justify-content: flex-end;
    /* background-color: red; */
}
.info-bar .logout {
    background-color: #999; /* Dark gray background */
    color: white;
    border: none;
    padding: 5px 10px;
    /* font-size: min(20px, 2vw); */
    font-size: 12px;
    border-radius: 15px; /* Rounded corners */
    cursor: pointer; /* Hand cursor on hover */
    margin-right: 10px;
    /* font-weight: 600; */

}
.info-bar .farm-name {
    line-height: 100%;
    /* font-size: min(20px, 2.5vw); */
    font-size: 15px;
    padding-top: 2px;
    margin-right: 20px;
}
.info-bar .router-icon {
    background-image: url('/lsm/_Img/router.png'); /* Specific path for Wi-Fi icon */
    width: 25px;
    height: 25px;
    background-size: contain; /* Ensures the entire image is fit within the content box without cropping */
    background-position: center; /* Centers the background image within the element */
    background-repeat: no-repeat; /* Prevents the image from repeating */            
    /* margin-right: 10px; */
}

.right-header{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
    /* background-color: blue; */
}

.right-header .info-bar{
    /* top right bottom left */
    padding: 0px 0px 10px 0px;
    float: right;
}

.right-header .data-title{
    padding: 0px;
}


@media only screen and (min-height: 1800px) {
    .info-bar .router-icon {
        width: min(35px, 3.5vw);
        height: min(35px, 3.5vw);
    }

    .top-logo{
        height: 80px;
        width: 450px;
    }
    .info-bar .farm-name {
        font-size: min(20px, 2.5vw);
    }
}



/* ******************************************************* */
/* ******************************************************* */
/*                         메인 푸터                         */
/* ******************************************************* */
/* ******************************************************* */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #393a34;
    color: white;
    /* position: absolute; 
    bottom: 0; 
    width: 100%;  */
}
.footer-left {
    /* padding: 30px 0; */
    line-height: 100%;
    padding-left: 2vw;
    font-size: 30px;
    display: flex;
    align-items: center;
}

.time-part {
    font-weight: normal;
}
.date-part {
    font-weight: lighter;
}
.separator {
    margin: 0 15px;
    height: 30px; 
    border-left: 1px solid #999; 
}
.day-part {
    background-color: #999;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 15px;
    line-height: 100%;
    display: flex;
    align-items: center;
    margin-left: 15px;
    color: white;
}

.footer-right {
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 100%;
}
.footer-right .weather-details {
    display: flex;
    align-items: center;
    font-size: 15px;
    line-height: 130%;
}
.footer-right .weather-details .bold {
    font-weight: bold;
}
.footer-right .weather-icon {
    margin-right: 2vw;
    width: 35px;
    height: 35px;
    filter: invert(1); 
}
.footer-right .temperature {
    display:none;
    margin-right: 2vw;
    font-size: 30px;
}
.footer-right .dust {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-right: 2vw;
}
.footer-right .qr-code {
    background-image: url('/lsm/_Img/qr-code.png'); 
    margin-right: 2vw;
    width: 35px;   
    height: 35px;   
    background-size: cover;  
    background-position: center;  
    display: inline-block; 
    filter: invert(1); /* Inverts the colors */
}
.footer-right .menu-icon {
    background-color: #666;
    width: 65px;
    height: 65px;
    cursor: pointer;
    color: white;
    display: flex;        /* Enables flexbox */
    justify-content: center; /* Centers horizontally */
    align-items: center;  /* Centers vertically */
}
.footer-right .menu-icon div {
    width: 35px;   
    height: 35px;   
    background-size: cover;  
    background-position: center;  
    display: inline-block; 
    filter: invert(1); /* Inverts the colors */
}
.footer-right .menu-icon .menu {
    background-image: url('/lsm/_Img/menu.png'); 
}
.footer-right .menu-icon .close {
    background-image: url('/lsm/_Img/close.png'); 
}


@media only screen and (min-height: 1800px) {
    .footer-left {
        font-size: 45px;
    }
    .footer-right .weather-details {
        font-size: 20px;
    }
    .day-part {
        font-size: 20px;
    }
    .footer-right .temperature {
        font-size: 45px;
    }

    .footer-right .menu-icon {
        width: 100px;
        height: 100px;   
    }

    .footer-right .menu-icon div {
        width: 50px;
        height: 50px;
    }
    .footer-right .weather-icon {
        width: 50px;
        height: 50px;
    }
    .footer-right .qr-code{
        width: 50px;
        height: 50px;
    }

    /* .footer-right .qr-code {
        width: 65px;
        height: 65px;
    } */

}

/* ******************************************************* */
/* ******************************************************* */
/*                         메인 블럭                         */
/* ******************************************************* */
/* ******************************************************* */


.content {
    flex: 1; 
    display: flex;
    flex-direction: column;
}

.first-content, .second-content, .bottom-content {
    position: relative;
    margin: 0 2.5vw 0 2.5vw;
}

.top-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.first-content {
    flex: 1;
}
.second-content {
    flex: 1; 
}

.first-content, .second-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chart-container {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    flex: 1; 
    /* height: 160px; */
    width: 100%;
}

.gauge-chart {
    width: 30%;
    height: 100%;
    margin-left: 5px;
}

.lineChart {
    flex: 1.5; 
    width: 100%;
}
@media only screen and (max-height: 1000px) {
    .gauge-chart {width: 28%;}
    .lineChart {
        flex: 2.0; 
        width: auto;
    }

    .top-content {
        flex-direction: row;
    }

    .first-content, .second-content, .bottom-content {
        margin: 0 1vw 0 1vw;
    }
}

.farm-info {
    flex: 1; 
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    height: 160px;
}

.farm-header {
    background-color: #999;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 10px 20px;
}

.location-title {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.settings-btn {
    color: white;
    font-weight: bold;
    background-color: #666;
    border: none;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.farm-details {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;            
}

.farm-details .left {
    width: 35%;
    font-size: 12px;
    font-weight: bold;
}

.farm-details .value {
    color: #999;
    margin-left: 0.5vw; 
    font-size: 10px;
    font-weight: normal;
}

.farm-details .unit {
    color: #999;
    margin-left: 1px; 
    font-size: 10px;
    font-weight: normal;
}

.farm-details .right {
    flex: 1;
    display: flex;
    align-items: center;
}

.progress-container {
    flex: 1;
    background-color: #ccc; 
    height: 15px;
    border-radius: 0; 
    overflow: hidden; 
}

.progress {
    height: 15px;
    border-radius: 0; 
    transition: width 0.5s ease-in-out;
}

.stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.stats .average, .stats .maximum {
    flex: 1;
    display: flex;
    align-items: center;
}

.stats .label {
    color: white;
    background-color: #999;
    border: none;
    font-size: 10px;
    padding: 1px 1vw;
    border-radius: 5px; 
}

.stats .value {
    color: #666;
    flex: 1;
    text-align: center;
    margin: 0px;
    font-size: 11px;
}

@media only screen and (max-height: 1000px) {
    .farm-details .left {
        width: min(35%, 100px);
        font-size: max(1.1vw, 10px);
    }
    .farm-details .value {
        font-size: max(0.9vw, 9px);
    }
    .farm-details .unit {
        font-size: max(0.8vw, 8px);
    }
    .stats .label {
        font-size: max(0.9vw, 9px);
        padding: 0px 0.5vw;
    }
    .stats .value {
        font-size: max(0.9vw, 9px);
    }
}

@media only screen and (min-height: 1800px) {  
    .farm-details .left {
        font-size: 1.2rem;
    }
    .farm-info {
        padding: 10px;
        height: calc(100% - 20px);
        min-width: 200px;
    }
    
    .farm-header{
        margin-bottom: 10px;
        padding: 15px 20px;
    }
    .farm-details .value {
        font-size: 1rem;
    }
    .farm-details .unit {
        font-size: 1rem;
        
    }
    .stats .label {
        font-size: 1rem;
        padding: 3px 1vw;
    }
    .stats .value {
        font-size: 1rem;
    }
}

/* ******************************************************* */
/* ******************************************************* */
/*                         상세 블럭                         */
/* ******************************************************* */
/* ******************************************************* */

.detail-container {
    display: flex; 
    height: 100%;
}

.radar-container {
    padding: 20px 0px;
    flex: 1.5; 
}

.line-container {
    flex: 1; 
    /* width: 40%; */
    display: flex;
    flex-direction: column;
}

.temp-chart, .humid-chart {
    padding: 5px;
    flex: 1; 
}

@media only screen and (max-height: 1000px) {
    .temp-chart, .humid-chart {
        width: 20vw;
    }
}


/* ******************************************************* */
/* ******************************************************* */
/*                         하단 광고                         */
/* ******************************************************* */
/* ******************************************************* */

.bottom-content {
    margin: 0;
    display: flex;
    height: 150px; 
    z-index: 100;
}

.bottom-content .left-content, .bottom-content .right-content {
    margin: 10px 0px;
}
.bottom-content .left-content {
    margin-left: 2.5vw;
    margin-right: 10px;
}

.bottom-content .right-content {
    margin-left: 0px;
    margin-right: 2.5vw;
}

.bottom-content .left-content {
    flex: 3;
    color: white;
    overflow: hidden;
    position: relative;
}

/* 강제 마진제거 */
.bottom-content .left-content, .bottom-content .right-content {
    margin: 0px;
}

.list-slide .item {
    /* padding: 0 5px; */
}

.slider-item {
    min-width: 100%;
    padding: 20px;
    height: 150px;
    box-sizing: border-box;
    background-color: #3f6dbe;
    /* border-radius: 10px; */
}

.slider-item.bottom-ad-item {
    padding: 0;
}


@media only screen and (max-height: 1000px) {
    .bottom-content {
        display: none;
    }
    .slider-item {
        height: 30vh;
    }
    .bottom-ad-item {
        height: 30vh;
    }
}


.notice-tag {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.notice-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notice-content {
    font-size: 12px;
    display: -webkit-box;
    margin-left: 10px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slide-number {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 12px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 3px;
    z-index: 100;
}

.bottom-content .right-content {
    /* flex: 2; */
    width: 270px;
    margin-left: 0px;
    position: relative;
    overflow: hidden;
}

.bottom-ad-item {
    background-color: transparent;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    width: 100%;
    height: 150px;
    overflow: hidden;
}



@media only screen and (max-height: 1000px) {
    .bottom-content .right-content {
        height: 30vh;
    }
}

@media only screen and (min-height: 1800px) {
    .bottom-content {
        height: 250px;
    }
    .slider-item {
        /* padding: 30px; */
        height: 250px;
    }
    .bottom-ad-item {
        height: 250px;
    }
    .bottom-content .right-content {
        flex:none;
        width: 450px;
    }
    .notice-category {
        font-size: 20px;
        margin-bottom: 25px;
    }
    .notice-title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .notice-content {
        font-size: 14px;
    }
}


/* ******************************************************* */
/* ******************************************************* */
/*                         하단 메뉴                         */
/* ******************************************************* */
/* ******************************************************* */



.menu-content {
    margin : 0;
    background-color: #666666; 
    height: 200px; 
    z-index: 1000;
    display: none;
    justify-content: space-between;
    align-items: stretch; 
    flex-wrap: wrap;

    position: absolute;
    /* bottom: -100%; */
    bottom: 100px;
    width: 100%;
    margin: 0px; 
}

@media only screen and (max-height: 1000px) {
    .menu-content {
        height: calc(100% - 100px);
    }
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
}

/* Keyframes for sliding animation */
/* @keyframes slideUp {
    0% { bottom: -100%; }
    100% { bottom: 100px; }
}

@keyframes slideDown {
    0% { bottom: 100px; }
    100% { bottom: -100%; }
} */

@keyframes slideUp {
    0% { bottom: 65px; }
    100% { bottom: 65px; }
}

@keyframes slideDown {
    0% { bottom: 65px; }
    100% { bottom: 65px; }
}

@media only screen and (min-height: 1800px) {

    @keyframes slideUp {
        0% { bottom: 100px; }
        100% { bottom: 100px; }
    }
    
    @keyframes slideDown {
        0% { bottom: 100px; }
        100% { bottom: 100px; }
    }
    
}

.slide-up {
    animation: slideUp 0s forwards;
}

.slide-down {
    animation: slideDown 0s forwards;
}


.menu-content .section {
    flex: 1;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    padding: 20px 0px;
    color: white;
}

.menu-content .section .content-area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    /* justify-content: center; */
}

.menu-content .section .title-side {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: end; 
    align-items: center; 
    padding: 0px 25px;
    line-height: 110%;
}

@media only screen and (max-height: 1000px) {
    .menu-content .section .title-side {
        height: 40vh;
    }
}


.menu-content .section .icon-side {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
}

.menu-content .section .button-side {
    padding: 15px 25px 5px 25px;
    display: flex;
    flex-direction: column;
}

.menu-content .section .detail, .section .diffusion {
    border-right: 2px solid #ccc; 
}

.menu-content .section:last-child {
    border-right: none; /* Remove border for the last section */
}

.menu-content .icon-circle {
    width: 3vw;
    margin-left: -10px;
    min-width: 40px;
}

.menu-content .icon-circle circle {
    cx: 50;
    cy: 50;
    r: 1.5vw;
    fill: none;
    stroke-width: 1vw;
}


.menu-content h2 {
    font-size: 2vw;
}

.menu-content p {
    font-size: 12px;
    word-break: keep-all;
    height: 40px;
}

@media only screen and (max-height: 1000px) {
    .menu-content p {
        font-size: max(1vw, 12px);
    }
}

.menu-content .rounded-button {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 16px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 8px;    
    line-height: 100%;
}

.rounded-button.blue {
    background-color: #67e0e3;
    color: #006191;
}

.rounded-button.yellow {
    background-color: #fdcb00;
    color: #9e0000;
}

.rounded-button.gray {
    background-color: #999999;
}

.menu-content .image-section {
    flex: none; 
    width: 160px; 
    display: flex;
    justify-content: center; 
    align-items: center; 
}

.menu-content .image-section img{
    width: 120px;
    max-height: 200px;
    border-radius: 15px;
}

@media only screen and (max-height: 1000px) {
    .menu-content .image-section {
        width: 20%; 
    }
    
    .menu-content .image-section img{
        width: 80%;
    }
}


@media only screen and (min-height: 1800px) {
    .menu-content {
        height: 300px;
    }
    .menu-content .section .title-side {
        height: 110px;
        padding: 0px 35px;
    }
    .menu-content .section .icon-side {
        margin-bottom: 20px;
        }
        
    .menu-content .section .button-side {
        padding: 20px 35px;
    }
    .menu-content p {
        font-size: max(1vw, 15px);
    }
    .menu-content .rounded-button {
        padding: 10px 30px;
        font-size: 20px;
        border-radius: 20px;
        margin-bottom: 10px;
    }
    .menu-content .image-section {
        width: 300px;
    }
    .menu-content .image-section img{
        width: 230px;
        max-height: 300px;
    }
}



/* ******************************************************* */
/* ******************************************************* */
/*                        데이터 리스트                        */
/* ******************************************************* */
/* ******************************************************* */


.data-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 30px;
}

.data-title .farm-header {
    width: min(200px, 15vw);
}


/* 날짜 선택 */

.date-span{
    display: none;
    width: 70px;
    color: white;
    background-color: #999;
    padding: 3px 10px;
    font-size: 15px;
}

.ctxt{
    line-height: 35px;
    font-size: 14px;
    color: #666;
    display: inline-block;
    padding: 0 10px;
}

.dateSelect{
    display: flex;
    align-items: center;
}

.field.date{
    position: relative;
    margin: 0px 10px;
    display: inline-block;
    vertical-align: top;
}

.calendar {
    width:120px;
    height: 30px;
    border: 1px solid #e0e0e0;
    background: #f4f4f4;
    font-size: 15px;
    border-radius: 0;
    padding: 0 10px;
    
    display: inline-block;
    vertical-align: top;
    position: relative;
    box-sizing: border-box;
}
.calendar:after{
    width: 30px;
    height: 30px;
    position: absolute;
    right: 3px;
    top: 0;
    background: url(/lsm/_Img/Sub/ico-calendar.png) no-repeat center center;
    background-size: 16px auto;
    display: block;
    content: "";
    opacity: 0.6;
}
.calendar input{
    background: none;
    height: 100%;
    border: none;
    color: #666;
    font-size: 15px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    font-weight: 400;
    position: relative;
    letter-spacing: -0.03em;
    outline: none;
}

.dateSelect .dateBtn {
    width: auto;
    height: 30px;
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background-color: #24aae1;
    color: white;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dateSelect .dateBtn.search {
    margin-right: 10px;
}

.dateSelect .dateBtn.search:hover {
    background-color: #1d8ab3;
}

.dateSelect .dateBtn.reset {
    background-color: #999;
}

.dateSelect .dateBtn.reset:hover {
    background-color: #666;
}

/* @media only screen and (min-height: 1800px) {
    .dateSelect .dateBtn {
        width: 55px;
    }
} */



/*=======================================================
    Data-Table
=========================================================*/
.dataBody {
    position: relative;
    overflow: auto;
    height: 100%;
    padding: 10px 30px;
    display: flex;
    flex-direction: column;
}

.dataTable {
    border-spacing: 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    table-layout: fixed;
    width: 100%;
}

.dataTable th{
    background-color: #eee;
    border-bottom: 1px solid #999;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 0;
}

.dataTable td{
    padding: 8px 0px;
    text-align: center;
    font-size: 12px;
    color: #666;
    letter-spacing: -0.03em;
    border-top: 1px solid #ddd;
}

.dataTable td.left{
    font-size: 12px;
}

.dataTable td.black{
    color: #000;
    /* font-weight: bold; */
}

.dataTable td.red{
    color: #fc4032;
    font-weight: bold;
}

.dataTable td.yellow{
    color: #FFBA3E;
    font-weight: bold;
}
/* 기본적으로 커서를 포인터로 설정 */
.dataTable td.clickable { cursor: pointer; transition: background-color 0.3s ease; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 마우스를 올렸을 때 배경색과 텍스트 색 변경 */
.dataTable td.clickable:hover {
    background-color: #f0f0f0;
    color: #333;
}

@media screen and (min-height: 1800px) {
        
    .dataTable th{
        font-size: 15px;
        padding: 15px 0;
    }

    .dataTable td{
        padding: 12px 0px;
        font-size: 14px;
    }

    .dataTable td.left{
        font-size: 14px;
    }
}

/*=======================================================
    paging-wrap
=========================================================*/

.paging-wrap {
    /* flex: 1; */
    font-size: 0;
    padding: 20px;
    /* height: 50px; */
    text-align: center;
    display: block;
    position: relative;
}

.paging-wrap a.ctrl {
    display: inline-block;
    vertical-align: top;
    text-decoration: none;
    width: 40px;
    height: 40px;
    border: 1px solid #dfdfdf;
    border-radius: 100%;
    box-sizing: border-box;
    margin: 0 3px;
}

.paging-wrap li, .paging-wrap ul {
    display: inline-block;
    vertical-align: top;
}

.paging-wrap ul {
    padding: 0 10px
}

.paging-wrap li {
    margin: 0 1px;
}

.paging-wrap li a {
    display: block;
    position: relative;
    text-decoration: none;
    min-width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 3px;
    border-radius: 100%;
    font-size: 15px;
    color: #999;
    text-align: center;
    line-height: 40px;
    font-weight: 400;
    box-sizing: border-box;
}

.paging-wrap li a.active, .paging-wrap li a.active:hover {
    color: #000;
    font-weight: 700
}

.paging-wrap a.first {
    background: url(/lsm/_Img/Sub/page-first.jpg) no-repeat center center;
}

.paging-wrap a.prev {
    background: url(/lsm/_Img/Sub/page-prev.jpg) no-repeat center center;
}

.paging-wrap a.next {
    background: url(/lsm/_Img/Sub/page-next.jpg) no-repeat center center;
}

.paging-wrap a.last {
    background: url(/lsm/_Img/Sub/page-last.jpg) no-repeat center center;
}