/** 메인 **/
.main .contents {background-color: #2cb671; height: 100vh; padding: 0 40px;}
.main .main_header {display: flex; justify-content: space-between; align-items: center; padding: 18px 10px;}
.main .main_header .main_logo {background: url('../images/green_cs_logo.png') no-repeat center / 172px 55px; width: 172px; height: 55px; flex-shrink: 0;}
.main .main_header .right {display:flex; justify-content: flex-end; align-items: center;}
.main .main_header .right a {display: flex; align-items: center; border: 2px solid #fff; border-radius: 50px; padding: 5px 12px; margin-left: 10px;}
.main .main_header .right a h4 {color:#fff; display: inline-block; }
.main .main_header .right a h4 strong {font-weight: 700;}
.main .main_header .right a .icon {display: inline-block; width: 26px; height: 26px;}
.main .main_header .right a.greencs_shortcut .icon {background: url('../images/greencs_shortcut.png') no-repeat center / 26px 26px;}


.main .main_header .right .language {border: 2px solid #fff; border-radius: 50px; height: 40px; padding: 5px 8px; margin-left: 10px; position: relative; cursor: pointer;}
.main .main_header .right .language span {display: inline-block; background:url('../images/language_x3.png') no-repeat center / 26px 26px; width: 26px; height: 26px; vertical-align: middle;}
.main .main_header .right .language h4 {color:#fff; font-weight: 700; display: inline-block; vertical-align: middle; padding: 0 8px;}
.main .main_header .right .language .global_menu {opacity: 1; visibility: hidden; background-color: #fff; padding: 8px 10px;  text-align: center; border-radius: 8px; width: 85px; position: absolute; left: 0; box-shadow: 3px 4px 10px rgb(0 0 0 / 12%); transform: translateY(15px); z-index: 9;}
.main .main_header .right .language:hover .global_menu {opacity: 1; visibility: visible; transform: translateY(5px); transition: opacity 300ms ease, transform 600ms ease;}
.main .main_header .right .language .global_menu a {font-size: 13px; font-weight: 600; color:#333; display: block; padding: 4px 0; letter-spacing: 0; margin: 0;}
.main .main_header .right .language .global_menu a:hover {color: #2cb671;}


.main .section {width: 100%; max-width: 1700px; height: 100%; margin: 0 auto; display: flex; align-items: center;}
.main .section .bg {position: absolute; right: 120px; top: calc(50% - 91px); transform: translateY(-50%);}
.main .section .bg img {max-width: 921px;}
.main .section .text {margin-bottom: 200px; z-index: 1;}
.main .section .text .main_title {font-size: 7.5rem; font-weight: 900; line-height: 8.5rem; color:#fff; letter-spacing: 0; word-break: keep-all;}
.main .section .text .main_magma_logo {background: url('../images/main_magma_logo.png') no-repeat center / 305px 87px; width: 305px; height: 87px; margin-top: 18px;}
.main .section .text .loginform {width: 100%; max-width: 400px; margin-top: 50px;}
.main .section .text .loginform input {background-color: #fff; padding: 21px 30px; width: 100%; border: none; border-radius: 50px; margin-bottom: 15px; font-size: 15px; font-weight: 400; color:#000; height: 62px; text-align: left;}
.main .section .text .loginform input::placeholder {font-size: 15px; font-weight: 700; color:#222;}
.main .section .text .loginform button {background-color: #222; width: 100%; border: none; border-radius: 50px; padding: 21px 30px;}
.main .section .text .loginform button h2 {color:#fff;}
.main .catalog_down {position: absolute; top: 150px; right: 40px;}
.main .circle_text {position: relative; display: inline-block;}
.main .circle_text .txt {background: url('../images/circle_text.png') no-repeat center / 159px 159px; width: 159px; height: 159px; animation: txt_rotate 10s linear infinite;}
@keyframes txt_rotate {
    from {-webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);}
}
.main .circle_text .arrow {background: url('../images/circle_arrow_x3.png') no-repeat center / 29px 34px; width: 29px; height: 34px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}



/** 상단 정보 **/
.sub_contents .top_info_wrap {margin-bottom: 20px;}
.top_info .weather .top .icon {width: 60px; height: 60px; background-color: #c7eddc; display: inline-block; vertical-align: middle; border-radius: 50%;}
.icon.cloudy {background: url('../images/weather_cloudy_x3.png') no-repeat center / 44px 37px; }
.icon.rain {background: url('../images/weather_rain_x3.png') no-repeat center / 44px 37px; }
.icon.sunny {background: url('../images/weather_sunny_x3.png') no-repeat center / 44px 37px; }
.icon.thunder {background: url('../images/weather_thunder_x3.png') no-repeat center / 44px 37px; }
.icon.drizzle {background: url('../images/weather_drizzle_x3.png') no-repeat center / 44px 37px; }

.top_info .weather.inner {flex-flow: row; align-items: center;}
.top_info .weather .top { flex-shrink: 0;}
.top_info .weather .top .txt {display: inline-block; vertical-align: middle; margin-left: 10px;}
.top_info .weather .top .txt h2 {margin-bottom: 8px;}

.top_info .weather .right a.download {border-radius: 8px; display: inline-block; padding: 8px 15px; border: 1px solid #222; position: relative; margin-left: 20px;}
.top_info .weather .right a.download span {display: inline-block; background: url('../images/download_icon_x3.png') no-repeat center / 11px 14px; width: 11px; height: 14px; vertical-align: middle; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);}
.top_info .weather .right a.download p {display: inline-block; vertical-align: middle; font-weight: 700; margin-right: 22px; word-break: keep-all;}


.top_info .weather .bottom p {border: 1px solid #eee; font-weight: 700; border-radius: 10px; margin-right: 8px; display: flex; justify-content: center; align-items: center; padding: 10px 4px; height: 40px; flex: 1 1 33.3%; text-align: center;}
.top_info .weather .bottom select {flex: 1 1 33.3%; font-size: 13px; border: 1px solid #aaa; height: 42px;}
.top_info .emergency_info .title {padding: 2px 0 8px;}
.top_info .emergency_info .top {display: flex;}
.top_info .emergency_info .top .box {background-color: #f6f6f6; border-radius: 50px; padding: 7px; box-shadow: 1px 1px 1px rgb(0 0 0 / 15%) inset; margin-right: 18px; width: 100%;}
.top_info .emergency_info .top .box:last-child {margin-right: 0;}
.top_info .emergency_info .top .box .light {display: inline-block; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin-right: 6px;}
.top_info .emergency_info .top .box .light.green {background-color: #2cb671;}
.top_info .emergency_info .top .box .light.red {background-color: #e02e2e;}
.top_info .emergency_info .top .box p {display: inline-block; vertical-align: middle;}
.top_info .emergency_info .bottom a {border-radius: 8px; display: inline-block; height: 35px; padding: 8px 15px;}
/*.top_info .emergency_info .bottom a.download {border: 1px solid #222;}
.top_info .emergency_info .bottom a.download span {display: inline-block; background: url('../images/download_icon_x3.png') no-repeat center / 11px 14px; width: 11px; height: 14px; vertical-align: middle;} */
.top_info .emergency_info .bottom a p {display: inline-block; vertical-align: middle; font-weight: 700; margin-right: 10px;}
.top_info .emergency_info .bottom a.help {border: 1px solid #ccc;}
.top_info .emergency_info .bottom a.help h5 {color:#888;}
.top_info .time_notice .top {display: flex;}
.top_info .time_notice .top .brick {padding: 18px 16px 15px 25px;}
.top_info .time_notice .top .brick.present {background-color: #2cb671;}
.top_info .time_notice .top .brick.sunrise {background-color: #fab232;}
.top_info .time_notice .top .brick.sunset {background-color: #ff891a;}
.top_info .time_notice .top .brick.receive_data {background-color: #1ebfc2;}
.top_info .time_notice .top .brick h4 {color:#fff;}
.top_info .time_notice .top .brick .time {display: flex; justify-content: space-between; align-items: flex-end;}
.top_info .time_notice .top .brick .time .num {font-size: 2.8rem; color:#fff; font-weight: 700;}
.top_info .time_notice .top .brick.present .time .icon {background: url('../images/present_x3.png') no-repeat center / cover; width: 75px; height: 44px;}
.top_info .time_notice .top .brick.sunrise .time .icon {background: url('../images/sunrise_x3.png') no-repeat center / cover; width: 75px; height: 44px;}
.top_info .time_notice .top .brick.sunset .time .icon {background: url('../images/sunset_x3.png') no-repeat center / cover; width: 75px; height: 44px;}
.top_info .time_notice .top .brick.receive_data .time .icon {background: url('../images/receive_data_x3.png') no-repeat center / cover; width: 75px; height: 44px;}
.top_info .time_notice .bottom .notice .brick {padding: 8px;}
.top_info .time_notice .bottom .notice .icon {display: inline-block; background: url('../images/notice_x3.png') no-repeat center / 30px 30px; width: 30px; height: 30px; vertical-align: middle; margin-right: 10px;}
.top_info .time_notice .bottom .notice p {display: inline-block; font-weight: 700; vertical-align: middle;}


/** 모달팝업 **/
.modal_popup {background: rgb(0 0 0 / 60%); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 99;}
.modal_popup .popup {background-color: #f6f6f6; border-radius: 10px; width: calc(100% - 28px); max-width: 510px; height: calc(100vh - 100px); position: relative; top: 50%; left: calc(50% - 14px); transform: translate(-50%, -50%); padding: 25px 30px 30px; margin: 0 14px; overflow-y: auto;}

.modal_popup .popup .title {font-size: 20px; font-weight: 700; color:#222; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;}
.modal_popup .popup .title .pop_close_btn {width: 18px; height: 18px; cursor: pointer; position: relative;}
.modal_popup .popup .title .pop_close_btn span {display: inline-block; background: #898989; height: 19px;  width: 1px; transform: rotate( 135deg); position: absolute; right: 9px;}
.modal_popup .popup .title .pop_close_btn span::after {content: ""; background: #898989; height: 1px; position: absolute; top: 9px; left: -9px; width: 19px;}
.modal_popup .popup .box {background-color: #fff; border-radius: 10px; padding: 18px 20px 20px; box-shadow: 2px 3px 6px rgb(0 0 0 / 6%); margin-bottom: 10px;}
.modal_popup .popup .box.fix select {height: 35px;}
.modal_popup .popup .box.fix input[type="text"] {height: 35px; min-width: auto;}
.modal_popup .popup .box h1 {padding-bottom: 15px; display: inline-block;}
.modal_popup .popup .acco_title {display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.modal_popup .popup .acco_title h1 {padding: 0;}
.modal_popup .popup .acco_title .btn {width: 18px;}
.modal_popup .popup .acco_title .btn .open {width: 12px; height: 12px; position: relative; display: inline-block; transform: rotate(225deg); margin-left: 2px;}
.modal_popup .popup .acco_title .btn .open::before {content: '';position: absolute; width: 100%; height: 100%; border: 1px solid #959595; border-right: 0; border-bottom: 0;}
.modal_popup .popup .acco_title .btn .close {width: 12px; height: 12px; position: relative; display: inline-block; transform: rotate(45deg); margin-left: 5px;     margin-top: 10px;}
.modal_popup .popup .acco_title .btn .close::before {content: '';position: absolute; width: 100%; height: 100%; border: 1px solid #959595; border-right: 0; border-bottom: 0;}
.modal_popup .popup .acco_con {margin-top: 16px;}
.modal_popup .popup .tb2 {margin-bottom: 10px;}
.modal_popup .popup .tb2:last-child {margin-bottom: 0;}

.modal_popup .popup button {background-color: #2cb671; width: 100%; border-radius: 10px; height: 50px; margin-top: 10px;}
.modal_popup .popup button h2 {color:#fff;}
.modal_popup.pop1 .popup {max-height: 788px;}
.modal_popup.pop2 .popup {background-color: #fff; max-width: 400px; max-height: 691px;}
.modal_popup.pop2 .popup .line_box {display: flex; justify-content: space-between; align-items: center; border: 1px solid #e8e8e8; border-radius: 10px; padding: 14px 20px; margin-bottom: 10px;}
.modal_popup.pop2 .popup .line_box h4 {font-weight: 700;}
.modal_popup.pop2 .popup .line_box .toggle_wrap {display: flex; align-items: center;}
.modal_popup.pop2 .popup .line_box .toggle_wrap h4 {padding: 0 10px;}
.toggle_switch {width: 64px; height: 30px; display: block; position: relative; border-radius: 50px; background: #2cb671; box-shadow: 1px 1px 1px rgb(0 0 0 / 15%) inset; cursor: pointer;}
.toggle_switch .toggle_btn {width: 22px; height: 22px; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); border-radius: 50%; background: linear-gradient(to right, #fefefe, #ececec); box-shadow: 1px 2px 6px rgb(0 0 0 / 15%);}
#toggle:checked ~ .toggle_switch {background: #2cb671;}
#toggle:checked ~ .toggle_switch .toggle_btn {left: calc(100% - 26px);}
#toggle2:checked ~ .toggle_switch {background: #2cb671;}
#toggle2:checked ~ .toggle_switch .toggle_btn {left: calc(100% - 26px);}
.toggle_switch, .toggle_btn {transition: all 0.2s ease-in;}
.modal_popup.pop2 .popup .tb2 table th {background-color: #fafafa;}
.modal_popup.pop2 .popup .tb2 table td {font-size: 20px; font-weight: 700; color:#ff891a; text-align: center;}
.modal_popup.pop2 .popup .tb2 table td.color2 {color:#2cb671;}
.modal_popup.pop2 .popup .tb2 input[type="text"] {max-width: 70px;}
.modal_popup.pop2 .popup .tb2 select {max-width: 90px;}
.modal_popup.pop2 .popup .tb2 table td button {background-color: #2cb671; height: 40px; border-radius: 8px; margin: 0;}
.modal_popup.pop2 .popup .tb2 table td button h4 {color:#fff; font-weight: 700;}


/** 대시보드 **/
.dashboard .top_info .time_notice .top .brick {padding: 24px 16px 22px 25px;}

.dashboard .row_wrap .box1 p {background-color: #fff; border: 1px solid #e1f0ea; border-radius: 5px; padding: 2px;}
.dashboard .row_wrap .box1 .icon {width: 44px; height: 37px; display: inline-block; margin: 14px 0 3px;}
.dashboard .row_wrap .box1 h5 {color:#707f78; margin-bottom: 10px; letter-spacing: -1px;}
.dashboard .section2 .brick {width: 50%; overflow: hidden;}
.dashboard .swiper-scrollbar {position: absolute; left: 0; bottom: 10px; z-index: 50; height: 4px;     width: calc(100% - 40px);
    margin: 0 20px;}
.dashboard .swiper-scrollbar-drag {height: 100%; width: 100%; position: relative; background: #888; border-radius: 20px; left: 0; top: 0;}
.dashboard .weather_time .row_wrap ul {text-align: center; margin-top: 10px;}
.dashboard .weather_time .row_wrap ul li {border-bottom: 1px solid #f2f2f2; padding: 3px 0;}
.dashboard .weather_time .row_wrap ul li:last-child {border: none;}
.dashboard .weather_time .row_wrap ul li h5 {display: inline-block; color:#999; margin-right: 2px;}
.dashboard .weather_time .row_wrap ul li p {display: inline-block;}
.dashboard .row_wrap .box2 p {border: 1px solid #f0f0f0;}
.dashboard .row_wrap .box2 .icon {margin: 24px 0 10px;}
.dashboard .row_wrap .box2 h5 {color:#222; margin: 0;}
.dashboard .row_wrap .box2 h5.wt {padding-top: 6px;}
.dashboard .weekly_forecast .row_wrap ul {text-align: center; margin-top: 20px;}
.dashboard .weekly_forecast .row_wrap ul li {border-right: 1px solid #f2f2f2; border-bottom: 0; display: inline-block; width: calc(50% - 2px); padding: 0;}
.dashboard .weekly_forecast .row_wrap ul li:last-child {border: 0;}
.dashboard .weekly_forecast .row_wrap ul li h5 {display: block; color:#222; letter-spacing: 0; margin-right: 0;}
.dashboard .weekly_forecast .row_wrap ul li h5 .lowest {color:#1875df;}
.dashboard .weekly_forecast .row_wrap ul li h5 .highest {color:#e02e2e;}
.dashboard .section3 .row_wrap .brick {flex-basis: 100px;}
.dashboard .section3 .row_wrap .group:nth-child(1) {width: 41.5%;}
.dashboard .section3 .row_wrap .group:nth-child(2) {width: 58.5%;}
.dashboard .section3 .row_wrap .group:nth-child(1) .brick:nth-child(1) {flex-grow: 1;}
.dashboard .section3 .row_wrap .group:nth-child(1) .brick:nth-child(2) {flex-grow: 2;}
.dashboard .section3 .row_wrap .group:nth-child(2) .brick:nth-child(1) {flex-grow: 1;}
.dashboard .section3 .row_wrap .group:nth-child(2) .brick:nth-child(2) {flex-grow: 1;}
.dashboard .section3 .row_wrap .group:nth-child(2) .brick:nth-child(3) {flex-grow: 2;}
.dashboard .external_environment ul li {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f2f2f2; padding: 9px 0;}
.dashboard .external_environment ul li:first-child {padding: 0 0 9px;}
.dashboard .external_environment ul li:last-child {padding: 9px 0 0; border: none;}
.dashboard .external_environment ul li .icon {width: 35px; height: 35px; display: inline-block; vertical-align: middle;}
.dashboard .external_environment ul li .icon.outside_temperature {background: url('../images/outside_temperature_x3.png') no-repeat center / 35px 35px; }
.dashboard .external_environment ul li .icon.rain_detection {background: url('../images/rain_detection_x3.png') no-repeat center / 35px 35px; }
.dashboard .external_environment ul li .icon.wind_direction {background: url('../images/wind_direction_x3.png') no-repeat center / 35px 35px; }
.dashboard .external_environment ul li .icon.wind_speed {background: url('../images/wind_speed_x3.png') no-repeat center / 35px 35px; }
.dashboard .external_environment ul li .icon.external_solar_radiation {background: url('../images/external_solar_radiation_x3.png') no-repeat center / 35px 35px; }
.dashboard .external_environment ul li .icon.cumulative_solar {background: url('../images/cumulative_solar_x3.png') no-repeat center / 35px 35px; }
.dashboard .external_environment ul li p {display: inline-block; vertical-align: middle; margin-left: 12px; font-weight: 700;}
.dashboard .external_environment ul li h4 {font-weight: 700;}
.dashboard .graph_wrap {padding: 0;}
.dashboard .graph_wrap .tab {margin-bottom: 22px; display: flex;}
.dashboard .graph_wrap .tab p {display: inline-block; border: 1px solid #ddd; border-radius: 50px; padding: 8px 4px; width: 100%; max-width: 80px; margin-right: 3px; text-align: center; cursor: pointer;}
.dashboard .graph_wrap .tab p:last-child {margin-right: 0;}
.dashboard .graph_wrap .tab p:hover, .dashboard .graph_wrap .tab p.active {background-color: #2cb671; border: 1px solid #2cb671; font-weight: 700; color:#fff;}
.dashboard .internal_environment .top {margin-top: 10px;}
.dashboard .internal_environment .bottom {margin-top: 38px;}
.dashboard .internal_environment h3.box_title {margin-bottom: 7px;}
.dashboard .internal_environment .box_wrap {display: flex; justify-content: space-between;}
.dashboard .internal_environment {margin-top: 10px;}
.dashboard .internal_environment ul li {display: flex; justify-content: space-between; align-items: center; box-shadow: 2px 2px 8px rgb(0 0 0 / 20%); border-radius: 10px; padding: 11px 20px 13px 12px; margin-bottom: 13px;}
.dashboard .internal_environment ul li:last-child {margin-bottom: 0;}
.dashboard .internal_environment ul li .left .icon {display: inline-block; width: 35px; height: 29px; vertical-align: middle; margin-right: 10px;}
.dashboard .internal_environment ul li .left .icon.co2 {background: url('../images/co2_x3.png') no-repeat center / 35px 29px;}
.dashboard .internal_environment ul li .left .icon.moisture_content {background: url('../images/moisture_content_x3.png') no-repeat center / 35px 29px;}
.dashboard .internal_environment ul li .left .icon.saturated_moisture {background: url('../images/saturated_moisture_x3.png') no-repeat center / 35px 29px;}
.dashboard .internal_environment ul li .left .icon.lack_moisture {background: url('../images/lack_moisture_x3.png') no-repeat center / 35px 29px;}
.dashboard .internal_environment ul li .left .icon.dew_point {background: url('../images/dew_point_x3.png') no-repeat center / 35px 29px;}
.dashboard .internal_environment ul li .left h4 {display: inline-block; vertical-align: middle;}
.dashboard .section4 .brick .cam_wrap {width: 100%; height: 100%; max-height: 374px; overflow: hidden; border-radius: 10px; position: relative; display: flex; justify-content: center; align-items: center;}
.dashboard .section4 .brick .cam_wrap h5 {background: rgb(0 0 0 / 70%); padding: 5px 13px; color:#fff; position: absolute; border-radius: 50px; top: 10px; left: 10px;} 





/** 구동기제어 - 환경제어 **/
.environment .section2 h1 {padding-bottom: 15px;}
.environment .section5 .brick .half:nth-child(1) {padding-right: 15px;}
.environment .section5 .brick .half:nth-child(2) {padding-left: 15px;}
.environment .brick.list table tbody td.row_title {text-align: left; padding-left: 20px; display: flex; align-items: center; height: 50px;}


/** 구동기제어 - 양액기 - 양액기 **/
.machine .section3 .row_wrap {flex-wrap: wrap;}
.machine .section3 .row_wrap .box3 {flex: 1 1 calc(12% - 12px); margin-bottom: 12px; margin-right: 12px;}
.machine .section3 .row_wrap .box3:nth-child(8n) {margin-right: 0;}
.machine .section3 .row_wrap .box3:nth-child(8n+1) {margin-left: 0;}
.machine .section4 .brick .half:nth-child(1) {padding-right: 15px;}
.machine .section4 .brick .half:nth-child(2) {padding-left: 15px;}
.machine .section4 .brick.list {padding: 20px;}
.machine .section4 .brick.list table {border-spacing: 0 10px;}
.machine .section4 .brick.list table th {padding-bottom: 4px;}
.machine .section4 .brick.list table tbody tr:nth-child(odd) {background-color: #eaf7f7; box-shadow: 0 0 0 1px #d6ebeb; -moz-box-shadow: 0 0 0 1px #d6ebeb; -webkit-box-shadow: 0 0 0 1px #d6ebeb;}
.machine .section4 .brick.list table tbody tr:nth-child(even) {background-color: #fff8ed; box-shadow: 0 0 0 1px #f3ece0; -moz-box-shadow: 0 0 0 1px #f3ece0; -webkit-box-shadow: 0 0 0 1px #f3ece0;}
.machine .section4 .brick.list table tbody tr td:first-child {border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.machine .section4 .brick.list table tbody tr td:last-child {border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.machine .section4 .brick.list table tbody td {padding: 16px 5px;}
.machine .section4 .brick.list table tbody td h4 {font-weight: 700; letter-spacing: 0;}


/** 구동기제어 - 양액기 - 관수량설정 **/
.irrigation_amount .section3 .tb3 table th {padding: 8px 2px;}
.irrigation_amount .section3 .tb3 table td {padding: 15px 10px;}
.irrigation_amount .section3 .half:first-child .tb3 table th:nth-child(1) {padding: 8px 10px 8px 80px;}
.irrigation_amount .section3 .half:first-child .tb3 table th:nth-child(2) {padding: 8px 80px 8px 10px;}
.irrigation_amount .section3 .half:first-child .tb3 table td:nth-child(1) {padding: 15px 10px 15px 80px;}
.irrigation_amount .section3 .half:first-child .tb3 table td:nth-child(2) {padding: 15px 80px 15px 10px;}
.irrigation_amount .section3 .half:last-child .tb3 table td {padding: 15px 20px;}
.irrigation_amount .section3 input[type="text" ] {text-align: right; padding-right: 20px;}
.irrigation_amount .section3 input.unit {width: calc(100% - 50px); margin-right: 6px;}
.irrigation_amount .section3 .unit_txt {font-weight: 700;}
.irrigation_amount .section4 .brick .half {margin-right: 10px;}
.irrigation_amount .section4 .brick .half td h4 {text-align: left;}


/** 구동기제어 - 양액기 - 시간별 관수설정 **/
.hourly_irrigation .section4 ul {border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden;}
.hourly_irrigation .section4 ul li {display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee;}
.hourly_irrigation .section4 ul li:last-child {border-bottom: 0;}
.hourly_irrigation .section4 ul li:nth-child(odd) {background-color: #fafafa;}
.hourly_irrigation .section4 ul li span {display: flex; align-items: center; justify-content: center; flex: 1 1 20%; padding: 0 10px;}
.hourly_irrigation .section4 ul li span h4 {display: inline-block; flex-shrink: 0; font-weight: 700; margin-right: 25px;}
.hourly_irrigation .section4 ul li span input {display: inline-block; max-width: 110px;}



/** 구동기제어 - 양액기 - 일시비례 관수설정 **/
.proportion_irrigation .section3 .half_wrap.mj {margin-top: 20px; margin-bottom: 20px;}
.proportion_irrigation .section4 .column h3 {margin-bottom: 10px;}
.proportion_irrigation .section4 .column {margin-bottom: 20px;}
.proportion_irrigation .section4 .column .tb4 {margin-right: 15px;}
.proportion_irrigation .section4 .column .tb4:last-child {margin-right: 0;}



/** 구동기제어 - 양액기 - 일시누적 관수량,EC조절 **/
.accumulation_irrigation .section4 .tb4 table td h4 {text-align: left;}
.accumulation_irrigation .section4 .tb4 table td input[type="text"] {text-align: right; padding: 0 14px;}
.accumulation_irrigation .section4 .half_wrap {margin-top: 30px;}
.accumulation_irrigation .section4 .half_wrap.mj {margin-top: 0;}
.accumulation_irrigation .section4 .half_wrap .half h3 {margin-bottom: 10px;}



/** 구동기제어 - 양액기 - 스케줄 설정 **/
.schedule .section3 .tb2 table th {padding: 6px 16px; vertical-align: middle;}
.schedule .section3 .tb2 table td {padding: 10px 16px; border-bottom: 1px solid #eee;}
.schedule .section3 .tb2 table td:first-child, .schedule .section3 .tb2 table th:first-child {padding-left: 30px;}
.schedule .section3 .tb2 table td:last-child, .schedule .section3 .tb2 table th:last-child {padding-right: 30px;}
.schedule .section3 .tb2 table tr:nth-child(even) td {background: #fafafa;}
.schedule .section3 .tb2 table tr:last-child td {border-bottom: 0;}
.schedule .section3 .tb2 table td h4 {font-weight: 700; text-align: center; word-break: keep-all;}
.schedule .section3 .tb2 table td span {display: flex;}
.schedule .section3 .tb2 table td span input:nth-child(2) {margin-left: 10px;}



/** 구동기제어 - 배액재활용 - 배액재활용 **/
.recycling .section4 .brick .half:nth-child(1) {margin-right: 25px;}
.recycling .section4 .brick .half:nth-child(2) {margin-left: 25px;}
.recycling .field_box {border: 1px solid #e6e6e6; border-radius: 10px; display: flex; margin-bottom: 10px; overflow: hidden;}
.recycling .field_box:last-child {margin-bottom: 0;}
.recycling .field_box li h4 {font-weight: 700; word-break: keep-all;}
.recycling .field_box .title_box {background-color: #fafafa; padding: 0 20px; width : 193px; min-width: 90px; display: flex; justify-content: flex-start; align-items: center; flex-shrink: 0;}
.recycling .field_box .title_box li.title {padding: 0;}
.recycling .field_box .con_box {display: flex; width: 100%;}
.recycling .field_box .con_box li {display: inline-block; flex: 1 1 12.5%; height: 45px; border-left: 1px solid #e6e6e6; background-color: #fff; display: flex; justify-content: center; align-items: center;}
.recycling .field_box .con_box li .check {width: 100%; height: 100%;}
.recycling .field_box .con_box li .check span {background-color: #1ebfc2; width: calc(100% - 10px); height: calc(100% - 10px); margin: 5px; border-radius: 3px; display: flex; justify-content: center; align-items: center;}
.recycling .field_box .con_box li .check span::after {content: ''; display: inline-block; background: url('../images/field_check_x3.png') no-repeat center / 16px 11px; width: 16px; height: 11px;}
.recycling .field_box.fb2 .con_box li {background-color: #fafafa;}
.recycling .field_box.fb3 .title_box {background-color: #e3f6f6;}
.recycling .section4 .row_wrap {width: 33.3%; max-width: 385px; margin-bottom: 15px;} 
.recycling .section5 .tb4 {border: 1px solid #eee6da;}
.recycling .section5 .tb4 table th {background-color: #fff6e9; border-bottom: 1px solid #eee6da;}
.recycling .section5 .tb4 table td:first-child h4 {    text-align: left;}
.recycling .section5 .tb4 table td h4.red {color :#e02e2e;}
.recycling .section5 .tb4 table td input {text-align: right; padding: 0 20px;}




/** 구동기제어 - 배액재활용 - 믹싱밸브설정 **/
.mixing_valve .section4 .brick .half {margin-right: 10px;}
.mixing_valve .section4 .brick .half .tb4 table td input {text-align: right; padding: 0 20px;}
.mixing_valve .select.top_info_select {background-color: #fff;}
.mixing_valve .select {background-color: #f4f4f4;}
.mixing_valve .tb4 table td:first-child h4 {text-align: left;}


/** 구동기제어 - 마그마플러스 사용설명 **/
.magma_plus .top_img {border-radius: 10px; overflow: hidden;}
.magma_plus .text {text-align: center; margin: 60px 0 40px;}
.magma_plus .text .title {font-size: 32px; font-weight: 700; color:#222; padding: 0 0 6px;}
.magma_plus .text h1 {font-weight: 400;}
.magma_plus .search_wrap {margin-bottom: 40px;}
.magma_plus .search_wrap .search_bar {display: flex; background-color: #f6f6f6; padding: 20px 320px; border-radius: 10px;}
.magma_plus .search_wrap .search_bar form {display: flex; width: 100%;}
.magma_plus .search_wrap .search_bar .select {max-width: 160px; background-color: #fff;} 
.magma_plus .search_wrap .search_bar input {text-align: left; padding: 0 10px; margin: 0 10px;}
.magma_plus .list {}
.magma_plus .list ul {display: flex; flex-wrap: wrap;}
.magma_plus .list ul li {flex: 0 1 calc(33.3% - 15px); border-radius: 10px; overflow: hidden; margin: 0 11px 22px; position: relative; cursor: pointer;}
.magma_plus .list ul li:nth-child(3n) {margin-right: 0;}
.magma_plus .list ul li:nth-child(3n+1) {margin-left: 0;}
.magma_plus .list ul li .thum_btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.magma_plus .list ul li .thum_btn span {display: inline-block; background: url('../images/list_thum_btn_x3.png') no-repeat center / cover; width: 57px; height: 39px;}
.magma_plus .list ul li:hover .thum_btn span {background: url('../images/list_thum_btn_on_x3.png') no-repeat center / cover;}





/** 데이터조회 - 데이터조회 **/
.data_lookup .brick_tab {width: 100%;}
.data_lookup .brick_tab li {border-radius: 6px; margin-right: 5px; background-color: #fff; padding: 0 2px;}
.data_lookup .brick_tab li h4 {color:#666; word-break: keep-all;}
.option_box {background-color: #fafafa; border: 1px solid #eee; border-radius: 10px; margin-top: 20px; margin-bottom: 20px; padding: 14px 0; display: flex; align-items: center; justify-content: center;}
.option_box form { display: flex; align-items: center; justify-content: center; }
.option_box form .radio_wrap {margin-right: 60px; padding: 4px 0;}
.option_box form .radio_wrap label {}
.option_box form .radio_wrap label input {}
.option_box form .radio_wrap label h4 {}

.option_box form .date_wrap {} 
.option_box form .date_wrap ul {display: inline-block; margin-right: 20px;} 
.option_box form .date_wrap ul:nth-child(2) {margin-right: 10px;} 
.option_box form .date_wrap ul li {display: inline-block;} 
.option_box form .date_wrap ul li h4 {font-weight: 700; margin-right: 14px;} 
.option_box form .date_wrap ul li input {} 

.option_box button.small_line_btn span {display: inline-block; background: url('../images/excel_icon_x3.png') no-repeat center / 22px 22px; width: 22px; height: 22px; vertical-align: middle; margin-right: 6px;}


/** 데이터조회 - 그래프출력 **/
.graph_wrap {padding: 0 35px; margin-bottom: 40px;}
.graph_wrap .graph_btn {text-align: right; margin-bottom: 5px;}
.graph_wrap .graph_btn button.expansion {border: 1px solid #ccc; border-radius: 5px; padding: 4px 9px 6px;}
.graph_wrap .graph_btn button.expansion span {display: inline-block; background: url('../images/search_icon.png') no-repeat center / cover; width: 15px; height: 15px; margin-right: 6px; vertical-align: middle;}
.graph_wrap button.expansion h5 {display: inline-block; vertical-align: middle;}
.graph_wrap .graph_box {display: flex; justify-content: space-between; align-items: flex-start; }
.graph_wrap .graph_box .graph { margin-right: 10px; flex-shrink: 0;}
.graph_output .data_table th {width: 16.6%;}
.graph_output .data_table td {text-align: left; padding: 11px  20px;}



/** 데이터조회 - 종합데이터분석 **/
.data_analysis .date_wrap {margin-left: 50px;}
.data_analysis .option_box .option_box_btn {display: flex;}
.data_analysis .graph_wrap {padding: 0;}
.data_analysis .data_table h2 {margin-bottom: 15px;}
.data_analysis .data_table table th {padding: 11px 0px; width: 7%;}
.data_analysis .data_table table th h4 {font-weight: 700; width: 100%; max-width: 80px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.data_analysis .data_table table td {text-align: right; padding: 11px 6px; }
.data_analysis .data_table table th:nth-child(1) {width: 1%;}
.data_analysis .data_table table th:nth-child(2) {width: 8%;}
.data_analysis .data_table table td:nth-child(1) {text-align: center;}
.data_analysis .data_table table td:nth-child(2) {text-align: center;  white-space:nowrap;} 
.data_analysis .data_table table td .mark {display: inline-block; width: 0; height: 0; border-left: 6px solid #666; border-top: 4px solid transparent; border-bottom: 4px solid transparent;}

.data_analysis button.small_line_btn {padding: 7px 8px 7px 12px; }
.data_analysis button.small_btn.col2 {width: 100%; max-width: 100px;}



/** 전문가진단시스템 - 주차 농장 재배환경분석 **/
.farm .brick .half .bottom {margin-top: 40px;}
.farm .field_box {margin-bottom: 5px;}
.recycling .field_box .title_box, .recycling .field_box .con_box {width: 50%; max-width: 50%;}



/** 전문가진단시스템 - 우수농장환경 데이터비교 **/
.brick.option {display: flex; align-items: flex-end;}
.brick.option .left {width: 54%;}
.brick.option .left .top {display: flex; justify-content: space-between; margin-bottom: 15px;}
.brick.option .left .top .box {display: flex; width: 50%;}
.brick.option .left .top .box:nth-child(2) {width: calc(50% - 44px); margin-left: 44px;}
.brick.option .left .bottom {display: flex; justify-content: space-between;}
.brick.option .left .bottom .box:first-child {margin-right: 8px;}
.brick.option .left .bottom .box .select {max-width: 70px; background-position-x: 82%;}
.brick.option .left .bottom .box .select.sw {max-width: 100%;}
.brick.option .left .bottom .box .select.hour {width: 90px; max-width: 90px;}
.brick.option .left .bottom input[type="date"] {margin-right: 5px; width: 145px;}
.brick.option .left .bottom input[type="date"]:after {background: none; width: 0;}
.brick.option .left .bottom input[type="date"]::-webkit-calendar-picker-indicator {display: none;}
.brick.option .left .box {display: flex; align-items: center;}
.brick.option .left .box h4 {font-weight: 700; white-space: nowrap; flex-shrink: 0; margin-right: 14px;}
.brick.option .left .box:first-child h4 {width: 65px;}
.brick.option .left .box .select {background-position-x: 92%;}
.brick.option .box h4.divider {margin-left:10px; margin-right:10px;}
.brick.option .right {display: flex; align-items: center; margin-left: 10px; width: 46%;}
.brick.option .right .title {white-space: nowrap;}
.brick.option .radio_wrap {align-items: center; justify-content: flex-end; margin-left: 10px; width: 100%;}
.brick.option .radio_box {margin-right: 20px; }
.brick.option .radio_box:last-child {margin-right: 0;}
.ground_environment .graph_wrap {padding: 0;}
.ground_environment .graph_wrap .graph_box {align-items: normal;}
.ground_environment .option_check_wrap {margin-bottom: 21px;}
.ground_environment .data_table h2 {margin-bottom: 15px;}
.ground_environment .data_table table th {width: 11.5%; vertical-align: middle; word-break: keep-all;}
.ground_environment .data_table table th:nth-child(1) {width: 8%;}
.ground_environment .data_table table td {text-align: right; padding: 11px 15px;}
.ground_environment .data_table table td:nth-child(1) {text-align: center; padding: 11px 4px; white-space: nowrap;}



/** 정보등록관리 **/
.register .data_table {margin-bottom: 25px;}
.register .data_table .title {display: flex; justify-content: space-between; align-items: center; padding: 2px 0 15px;}
.register .data_table .title h2 {}
.register .data_table .title button.small_line_btn  {border: 1px solid #2cb671;}
.register .data_table .title button.small_line_btn h4 {color:#2cb671;}
.register .data_table table th {white-space: nowrap;}
.register .data_table table th, .register .data_table table td {border-right: 0;}
.register .data_table table th:first-child, .register .data_table table td:first-child {padding-left: 15px;}
.register .data_table table th:last-child, .register .data_table table td:last-child {padding-right: 15px;}
.register .data_table table td input[type="text"], .register .data_table table td input[type="number"] {text-align: left; padding: 0 10px;}
.register .data_table table td input[type="date"] {width: 100%;}
.register .data_table table td .address {display: flex;}
.register .data_table table td .address input[type="text"] {margin-right: 6px;}
.register .data_table table td .address .small_btn {padding: 11px 14px;}
.register .data_table table td .address .small_btn p {font-weight: 700; color:#fff;}













@media (max-width: 1750px) {
    .main .main_header {padding: 18px 0;}
    .main .section .bg {right: 160px;}
    .main .catalog_down {top: 100px;}
    .main .section .text {width: 50%;}
    .main .section .bg img {max-width: 50vw;}

    .dashboard .top_info .weather .right a.download {padding: 8px 6px; margin-left: 10px;}
    .dashboard .top_info .weather .right a.download span {display: none;}
    .dashboard .top_info .weather .right a.download p {margin-right: 0; text-align: center;}
    .top_info .time_notice .top .brick .time .icon {width: 60px !important; height: 34px !important; }

}


@media (max-width: 1650px) {
    

}

@media (max-width: 1600px) {
    .main .section .text {margin-bottom: 160px;}
    .dashboard .section1 .row_wrap {flex-flow: column;}
    .dashboard .section3 .row_wrap {flex-flow: column;}
    .dashboard .section3 .row_wrap .group {width: 100% !important;}
    .dashboard .section3 .row_wrap .group:nth-child(1) .brick:nth-child(2) {flex-grow: 1;}
    .dashboard .top_info .time_notice .top .brick {padding: 18px 16px 15px 25px;}

    .dashboard .top_info .weather .right a.download {padding: 8px 15px;}
    .dashboard .top_info .weather .right a.download p {margin-right: 22px; text-align: left;}
    .dashboard .top_info .weather .right a.download span {display: inline-block;}
    
    .top_info .time_notice .top .brick .time .icon {width: 75px !important; height: 44px !important; }
}



@media (max-width: 1440px) { 
    .dashboard .section4 .row_wrap {flex-flow: column;}
    .main .section .bg img {max-width: 55vw;}
    
    .irrigation_amount .section4 .brick .half .tb4 table th, .irrigation_amount .section4 .brick .half .tb4 table td {padding: 10px 2px;}
    .irrigation_amount .section4 .brick .half .tb4 table th:first-child, .irrigation_amount .section4 .brick .half .tb4 table td:first-child {padding: 10px 5px 10px 10px;}
    .irrigation_amount .section4 .brick .half .tb4 table th:last-child, .irrigation_amount .section4 .brick .half .tb4 table td:last-child {padding: 10px 10px 10px 5px;}

    .accumulation_irrigation .section4 .brick .half .tb4 table th:first-child, .accumulation_irrigation .section4 .brick .half .tb4 table td:first-child {padding: 10px 5px 10px 10px;}
    .accumulation_irrigation .section4 .brick .half .tb4 table th:last-child, .accumulation_irrigation .section4 .brick .half .tb4 table td:last-child {padding: 10px 10px 10px 5px;}


    .radio_wrap .title {margin-right: 10px;}


}




@media (max-width: 1199px) { 
    .main .main_header {padding: 11px 0;}
    .main .circle_text .txt {background: url('../images/circle_text_x3.png') no-repeat center / 100px 100px; width: 100px; height: 100px;}
    .main .contents {height: auto; padding: 0 14px;}
    .main .section {flex-flow: column;}
    .main .section .bg {position: static; transform: none; margin-bottom: 20px;}

    .main .section .text {width: 100%; text-align: center; display: flex; flex-flow: column; justify-content: center; align-items: center; margin-bottom: 80px;}

    .main .main_header .main_logo {background: url('../images/green_cs_logo_x3.png') no-repeat center / 150px 48px; width: 150px; height: 48px; flex-shrink: 0;}
    .main .main_header .right a.greencs_shortcut .icon {background: url('../images/greencs_shortcut_x3.png') no-repeat center / 26px 26px;}
    .main .main_header .right a.language .icon {background: url('../images/language_x3.png') no-repeat center / 26px 26px; margin-right: 6px;}

    .environment .brick.list table colgroup col:nth-child(1) {width: 31%;}
    .environment .brick.list table colgroup col:nth-child(2) {width: 23%;}
    .environment .brick.list table colgroup col:nth-child(3) {width: 23%;}
    .environment .brick.list table colgroup col:nth-child(4) {width: 23%;}

    .machine .section3 .row_wrap {justify-content: flex-start;}
    .machine .section3 .row_wrap .box3 {flex: 0 1 calc(16.8% - 12px);}
    .machine .section3 .row_wrap .box3:nth-child(6n) {margin-right: 0;}
    .machine .section3 .row_wrap .box3:nth-child(8n) {margin-right: 12px;}

    .irrigation_amount .section4 .brick .half_wrap {flex-flow: column;}
    .irrigation_amount .section4 .brick .half {width: 100%; margin-bottom: 15px;}
    .irrigation_amount .section4 .brick .half:last-child {margin-bottom: 0;}
    .irrigation_amount .section4 .brick .half .tb4 table th:first-child, .irrigation_amount .section4 .brick .half .tb4 table td:first-child {padding: 10px 5px 10px 20px;}

    .accumulation_irrigation .section4 .half_wrap {flex-flow: column; margin-top: 20px;}
    .accumulation_irrigation .section4 .half {width: 100%; margin-bottom: 20px;}
    .accumulation_irrigation .section4 .half:last-child {margin-bottom: 0;}
    .accumulation_irrigation .section4 button.save_btn {margin: 0 auto 5px;}

    .recycling .field_box li.title {padding: 0 10px;}
    .recycling .section4 .brick .half:nth-child(1) {margin-right: 8px;}
    .recycling .section4 .brick .half:nth-child(2) {margin-left: 8px;}

    .option_box form .radio_wrap {margin-right: 30px;}
    .option_box form .date_wrap ul {margin-right: 10px;}
    .option_box form .date_wrap ul:nth-child(2) {margin-right: 4px;}
    .option_box form .date_wrap ul li h4 {margin-right: 6px;}

    .graph_wrap {padding: 0;}
    .graph_wrap .graph_box .graph {overflow-x: auto; flex-shrink: 1; width: 100%;}
    .graph_wrap .graph_box .graph .graph_inner { min-width: 824px;}
    
    .data_analysis .data_table {overflow-x: auto;}

    .brick.option {flex-flow: column;  align-items: center;}
    
    .brick.option .right {margin-top: 10px; width: 100%;}
    .brick.option .left {width: 100%;}
    .brick.option .left .bottom {justify-content: center;}
    .brick.option .right {justify-content: center;}
    .brick.option .radio_wrap {width: auto;}

    .register .data_table table th:first-child, .register .data_table table td:first-child {padding-left: 4px;}
    .register .data_table table th:last-child, .register .data_table table td:last-child {padding-right: 4px;}

    .magma_plus .search_wrap .search_bar {padding: 20px 20vw;}

}



@media (max-width: 1024px) { 
    .main .catalog_down.m {position: static; margin-left: 20px; }
    .main .section .text span {display: flex; align-items: flex-end; margin-top: 18px;}
    .main .section .text .main_magma_logo {margin-top: 0; margin-bottom: 4px;}
    .environment .section3 .row_wrap, .environment .section4 .row_wrap {flex-flow: column;}
    .environment .brick.list table colgroup col:nth-child(1) {width: 25%;}
    .environment .brick.list table colgroup col:nth-child(2) {width: 25%;}
    .environment .brick.list table colgroup col:nth-child(3) {width: 25%;}
    .environment .brick.list table colgroup col:nth-child(4) {width: 25%;}
    .environment .section5 .brick .half_wrap {flex-flow: column;}
    .environment .section5 .brick .half_wrap .half {margin-right: 0; padding: 0; width: 100%; margin-bottom: 15px;}
    .environment .section5 .brick .half_wrap .half:last-child {margin-bottom: 0;}

    .proportion_irrigation .section4 ul li span h4 {margin-right: 10px;}
    .proportion_irrigation .section4 .column .tb4 {margin-right: 10px;}
    .proportion_irrigation .section4 .tb4 table th:first-child, .proportion_irrigation .section4 .tb4 table td:first-child {padding: 10px 2px 10px 10px;}
    .proportion_irrigation .section4 .tb4 table th:last-child, .proportion_irrigation .section4 .tb4 table td:last-child {padding: 10px 10px 10px 2px;}

    .recycling .section4 .brick .half_wrap {flex-flow: column;}
    .recycling .section4 .brick .half {width: 100%; margin-bottom: 20px }
    .recycling .section4 .brick .half:nth-child(1) {margin-right: 0;}
    .recycling .section4 .brick .half:nth-child(2) {margin-left: 0;}

    .schedule .section3 .tb2 table col:nth-child(2) {width: 13%;}
    .schedule .section3 .tb2 table col:nth-child(3) {width: 11%;}

}

@media (max-width: 959px) { 

    .top_info .weather .right a.download, .dashboard .top_info .weather .right a.download {padding: 8px 6px; margin-left: 10px;}
    .top_info .weather .right a.download span, .dashboard .top_info .weather .right a.download span {display: none;}
    .top_info .weather .right a.download p, .dashboard .top_info .weather .right a.download p {margin-right: 0; text-align: center;}

    .main .section .bg img {max-width: 640px;}
    .main .section .text .main_title {font-size: 6rem; line-height: 7rem;}
    .main .section .text .main_magma_logo {background: url('../images/main_magma_logo_x3.png') no-repeat center / 200px 57px; width: 200px; height: 57px; margin-bottom: 8px;}
    .main .section .text .loginform {margin-top: 30px;}
    .main .section .text .loginform input {margin-bottom: 10px; padding: 17px 30px; height: 54px;}
    .main .catalog_down.m .circle_text .txt {background: url('../images/circle_text_x3.png') no-repeat center / 60px 60px; width: 60px; height: 60px;}
    
    .dashboard .section2 .group {flex-flow: column;}
    .dashboard .section2 .group .brick {width: 100%;}
    .dashboard .section3 .row_wrap .group:nth-child(1) {flex-flow: column;}
    .dashboard .section3 .row_wrap .group:nth-child(2) {flex-wrap: wrap;}
    .dashboard .section3 .row_wrap .group:nth-child(2) .brick {flex: 1 1 calc(50% - 14px);}
    .dashboard .section3 .row_wrap .group:nth-child(2) .brick:nth-child(2) {margin-right: 0;}

    .environment .section2 .group {flex-flow: column;}
    .environment .section2 .group .brick {margin-right: 0;}
    .environment .section2 .group .brick .row_wrap {flex-wrap: wrap;}
    .environment .section2 .group .brick .row_wrap .box3 {flex: 1 1 30%;}
    .environment .section2 .group .brick .row_wrap .box3:nth-child(3) {margin-right: 0;}
    .environment .section2 .group .brick .row_wrap .box3:nth-child(n+4):nth-child(-n+5) {margin-top: 5px;}

    .machine .section3 .row_wrap .box3 {flex: 0 1 calc(25% - 6px); margin-bottom: 6px; margin-right: 6px;}
    .machine .section3 .row_wrap .box3:nth-child(4n) {margin-right: 0;}
    .machine .section3 .row_wrap .box3:nth-child(6n) {margin-right: 6px;}

    .irrigation_amount .section3 .half:first-child .tb3 table td:nth-child(n+1):nth-child(-n+2) {padding: 15px 10px 15px;}
    .irrigation_amount .section3 .half:first-child .tb3 table th:nth-child(n+1):nth-child(-n+2) {padding: 8px 4px 8px;}
    .irrigation_amount .section3 .half:last-child .tb3 table td {padding: 15px 10px;}
    .proportion_irrigation .section4 .column .row_wrap {flex-flow:column;}
    .proportion_irrigation .section4 .column .tb4 {width: 100%; margin-right: 0; margin-bottom: 10px;}
    .proportion_irrigation .section4 .column .tb4:last-child {margin-bottom: 0;}

    .mixing_valve .brick .half_wrap {flex-flow: column;}
    .mixing_valve .section4 .brick .half {width: 100%; margin-bottom: 20px; margin-right: 0;}
    .mixing_valve .section4 .brick .half:last-child {margin-bottom: 0;}

    .schedule .section3 .tb2 table th {padding: 6px 6px;}
    .schedule .section3 .tb2 table td {padding: 10px 6px;}
    .schedule .section3 .tb2 table td span input:nth-child(2) {margin-left: 4px;}
    .schedule .section3 .tb2 table td:first-child, .schedule .section3 .tb2 table th:first-child {padding-left: 10px;}
    .schedule .section3 .tb2 table td:last-child, .schedule .section3 .tb2 table th:last-child {padding-right: 10px;}

    .recycling .section5 .brick .half_wrap {flex-flow: column;}

    .recycling .section5 .brick .half_wrap .half {width: 100%; margin-right: 0; margin-bottom: 20px;}
    .recycling .section5 .brick .half_wrap .half:last-child {margin-bottom: 0;}


    .option_box {flex-flow: wrap;}
    .option_box form {width: 100%; margin-bottom: 10px;}

    .data_analysis .date_wrap {margin-left: 20px;}
    .ground_environment .data_table table td {padding: 11px 6px;}

    .magma_plus .top_img img {height: 220px; object-fit: cover;}
    .magma_plus .search_wrap .search_bar {padding: 20px 10vw;}
    
    
}



@media (max-width: 767px) {
    .main .main_header .main_logo {background: url('../images/green_cs_logo_x3.png') no-repeat center / 140px 45px; width: 140px; height: 45px; flex-shrink: 0;}

    .top_info .row_wrap .group {flex-flow: column;}
    .top_info .row_wrap .group .brick {width: 100%;}

    .sub_contents .top_info_wrap {display: flex; flex-flow: column;}
    .sub_contents .top_info_wrap #top_info {order: 2;}
    .sub_contents .top_info_wrap .top_info_select {order: 1; margin-bottom: 15px;}
    .sub_contents .top_info .row_wrap .group:first-child {display: none;}
    .sub_contents .top_info .row_wrap .group .time_notice .bottom {display: none;}
    .sub_contents .top_info .time_notice .top .brick {margin-bottom: 0;}
    .sub_contents .top_info .time_notice .top .brick.receive_data {display: none;}
    .sub_contents .top_info .time_notice .top .brick.sunset {margin-right: 0;}


    .dashboard .top_info .time_notice .top .brick {margin-bottom: 10px; padding: 12px 10px 10px 10px;}
    .dashboard .top_info .time_notice .top {flex-wrap: wrap;}
    .dashboard .top_info .time_notice .top .brick {flex: 1 1 45%;}
    .dashboard .top_info .time_notice .top .brick.sunrise, .dashboard .top_info .time_notice .top .brick.receive_data {margin-right: 0;}
    


    .dashboard .section4 .row_wrap .half_wrap {flex-flow: column;}
    .dashboard .section4 .row_wrap .half_wrap .half {width: 100%; margin-bottom: 18px;}

    .machine .section4 .brick .half_wrap {flex-flow: column;}
    .machine .section4 .brick .half {width: 100%; margin-bottom: 20px;}
    .machine .section4 .brick .half:last-child {margin-bottom: 0;}
    .machine .section4 .brick .half:nth-child(1) {padding-right: 0;}
    .machine .section4 .brick .half:nth-child(2) {padding-left: 0;}


    .irrigation_amount .section3 .half:nth-child(1) {width: 40%; margin-right: 10px;}
    .irrigation_amount .section3 .half:nth-child(2) {width: 60%;}

    .proportion_irrigation .section3 .half_wrap {flex-flow: column;}
    .proportion_irrigation .section3 .half_wrap.mj {margin: 10px 0;}
    .proportion_irrigation .section3 .half_wrap .half {width: 100%; margin: 0;}

    .modal_popup .popup .title {font-size: 17px;}
    .proportion_irrigation .section3 .half_wrap .tb5 {margin-top: 10px;}


    .accumulation_irrigation .row2 button {margin: 10px auto 5px;}
    .accumulation_irrigation .row2 .box3, .accumulation_irrigation .row2 .box3:nth-child(4n), .accumulation_irrigation .row2 .box3:nth-child(4n+1), .accumulation_irrigation .row2 .box3:nth-child(1),  .accumulation_irrigation .row2 .box3:nth-child(3n), .accumulation_irrigation .row2 .box3:nth-child(3n+1) {flex: 0 1 calc(50% - 4px); margin-left: 4px; margin-right: 4px; margin-bottom: 8px;}

    .accumulation_irrigation .row2 .box3:nth-child(odd), .accumulation_irrigation .row2 .box3:nth-child(odd) {margin-left: 0; }
    .accumulation_irrigation .row2 .box3:nth-child(even) {margin-right: 0;}

    .dashboard .top_info .weather .right a.download {padding: 8px 15px;}
    .dashboard .top_info .weather .right a.download p {margin-right: 22px; text-align: left;}
    .dashboard .top_info .weather .right a.download span {display: inline-block;}

    .recycling  .section4 .row_wrap {width: 100%; max-width: 100%;}

    .data_lookup .brick_tab {flex-flow: wrap;}
    .data_lookup .brick_tab li {flex: 0 1 calc(20% - 4px);}
    .data_lookup .brick_tab li:nth-child(n+1):nth-child(-n+5) {margin-bottom: 5px;}
    .data_lookup .brick_tab li:nth-child(5n) {margin-right: 0;}
    .option_box form {flex-flow: column;}
    .option_box form .radio_wrap {margin-bottom: 10px; margin-right: 0;}
    
    .data_lookup .data_table {overflow-x: auto;}
    .data_lookup .data_table table {min-width: 680px;}

    .graph_wrap .graph_box {flex-flow: column;}
    .graph_wrap .graph_box .graph {order: 2;}


    .data_analysis .option_box .option_box_btn {margin-bottom: 8px;}

    .farm .brick .half_wrap {flex-flow: column;}
    .farm .brick .half {width: 100%;}
    .farm .brick .half:nth-child(1) {margin-bottom: 30px;}
    .farm .brick .half .bottom {margin-top: 30px;}
    

    .ground_environment .data_table {overflow-x: auto;}
    .ground_environment .data_table table {min-width: 670px;}

    .brick.option .left .bottom {flex-flow: column;}
    .brick.option .left .box {justify-content: center;}
    .brick.option .left .bottom .box:first-child {margin-right: 0; margin-bottom: 8px;}

    .register .data_table .info_table {overflow-x: auto;}
    .register .data_table:nth-child(1) table {min-width: 650px;}
    
    .magma_plus .text {margin: 40px 0 30px;}
    .magma_plus .search_wrap {margin-bottom: 20px;}
    .magma_plus .text .title {font-size: 26px;}
    .magma_plus .search_wrap .search_bar {padding: 20px 20px;}
    .magma_plus .search_wrap .search_bar .select {max-width: 90px;}
    .magma_plus .list ul li {flex: 0 1 calc(33.3% - 7px); margin: 0 5px 10px;}
    .magma_plus .list ul li .thum_btn span {width: 40px; height: 27px;}
    


}




@media (max-width: 640px) {

    .top_info .time_notice .top .brick {padding: 12px 14px 10px 14px; margin-right: 8px;}
    .top_info .time_notice .top .brick .time {justify-content: center;}
    .top_info .time_notice .top .brick h4 {text-align: center; margin-bottom: 2px;}
    .top_info .time_notice .top .brick .time .icon {display: none;}

    .main .section .bg img {max-width: 100%; max-width: 540px;}
    .main .section .text .main_magma_logo {background: url('../images/main_magma_logo_x3.png') no-repeat center / 170px 48px; width: 170px; height: 48px;}
    .dashboard .section3 .row_wrap .group:nth-child(2) {flex-flow: column;}
    .dashboard .internal_environment, .dashboard .internal_environment .top {margin-top: 0;}
    .dashboard .internal_environment .bottom {margin-top: 20px;}
    
    .environment .brick.list table colgroup col:nth-child(1) {width: 31%;}
    .environment .brick.list table colgroup col:nth-child(2) {width: 23%;}
    .environment .brick.list table colgroup col:nth-child(3) {width: 23%;}
    .environment .brick.list table colgroup col:nth-child(4) {width: 23%;}

    .modal_popup .popup {padding: 25px 12px 30px;}

    .machine .section3 .row_wrap .box3 {flex: 0 1 calc(33.3% - 6px);}
    .machine .section3 .row_wrap .box3:nth-child(3n) {margin-right: 0;}
    .machine .section3 .row_wrap .box3:nth-child(4n) {margin-right: 6px;}

    .irrigation_amount .section3 .half_wrap {flex-flow: column;}
    .irrigation_amount .section3 .half_wrap .half {width: 100%; margin-right: 0; margin-bottom: 10px;}
    .irrigation_amount .section3 .half_wrap .half:last-child {margin-bottom: 0;}
    .irrigation_amount .section4 .brick .half .tb4 table th:first-child, .irrigation_amount .section4 .brick .half .tb4 table td:first-child {padding: 10px 5px 10px 10px;}
    .irrigation_amount .section4 .brick .half .tb4 {overflow-x: auto;}

    .irrigation_amount .section4 .brick .half .tb4 table {min-width: 500px; overflow-x: auto;}

    .proportion_irrigation .section4 ul li span h4 {margin-right: 6px;}

    .proportion_irrigation .section4 ul {overflow-x: auto;}
    .proportion_irrigation .section4 ul li {min-width: 500px;}
    
    .recycling .field_box {flex-flow: column; border: none; border-radius: 0; margin-bottom: 15px;}
    .recycling .field_box .title_box, .recycling .field_box.fb3 .title_box {width: 100%; background-color:#fff; padding: 0 0 6px;}
    .recycling .field_box .con_box {border: 1px solid #e6e6e6; border-radius: 10px; overflow: hidden;}
    .recycling .field_box .con_box li:first-child {border-left: 0;}
    


    .schedule .section3 .tb2 table col:nth-child(1) {width: 10%;}
    .schedule .section3 .tb2 table col:nth-child(2) {width: 38%;}
    .schedule .section3 .tb2 table col:nth-child(3) {width: 10%;}
    .schedule .section3 .tb2 table col:nth-child(4) {width: 14%;}
    .schedule .section3 .tb2 table col:nth-child(5) {width: 14%;}
    .schedule .section3 .tb2 table col:nth-child(6) {width: 14%;}


    .schedule .section3 .tb2 {overflow-x: auto;}
    .schedule .section3 .tb2 table {min-width: 530px;}

    .farm .field_box .con_box li {flex: 1 1 100%;}
    .farm .field_box .title_box, .farm .field_box .con_box {width: 100%; max-width: 100%;}
    

    .brick.option .left .top {flex-flow: column;}
    .brick.option .left .box {justify-content: flex-start;}
    .brick.option .left .top .box {width: 100%;}
    .brick.option .left .top .box:nth-child(2) {width: 100%; margin-left: 0; margin-top: 8px;}
    
    .brick.option .right {flex-flow: column; margin-left: 0;}
    .brick.option .radio_wrap {margin-top: 16px; margin-left: 0;}
    .brick.option .radio_box {margin-right: 10px;}
    

    .brick.option .left .bottom .box .select {max-width: 50px; padding-left: 8px;}

    .register .data_table:nth-child(2) table {min-width: 500px;}

    .magma_plus .list ul li {flex: 0 1 calc(50% - 5px);}
    
    .magma_plus .list ul li:nth-child(3n) {margin-right: 5px;}
    .magma_plus .list ul li:nth-child(3n+1) {margin-left: 5px;}
    .magma_plus .list ul li:nth-child(odd) {margin-left: 0;}
    .magma_plus .list ul li:nth-child(even) {margin-right: 0;}

    .recycling .field_box .title_box, .recycling .field_box .con_box {width: 100%; max-width: 100%;}
    



    
}





@media (max-width: 479px) {
    .main .catalog_down.m {margin-left: 12px;}
    .top_info .emergency_info .top .box .light {width: 18px; height: 18px;}
    .dashboard .graph_wrap .tab {display: flex;}
    .dashboard .graph_wrap .tab p {max-width: 100%;}

    .main .main_header .right a h4 {display: none;}
    .main .main_header .right a {padding: 5px; margin-left: 8px;}
    .main .main_header .right a.language .icon {margin-right: 0;}
    .environment .brick.list table tbody td.row_title {padding-left: 5px;}

    
    .modal_popup .popup .box {padding: 14px 10px;}
    .modal_popup .popup .box h1 {font-size: 15px;}
    .modal_popup .popup .box .tb2 table td {padding: 10px 2px;}
    .modal_popup .popup .box.fix input.unit {margin-right: 0;}
    .modal_popup .popup .box.fix select, .modal_popup .popup .box input, .unit_txt[type="text"] {font-size: 13px; min-width: auto;}

    .machine .section3 .row_wrap .box3 {flex: 0 1 calc(50% - 6px);}
    .machine .section3 .row_wrap .box3:nth-child(2n) {margin-right: 0;}
    .machine .section3 .row_wrap .box3:nth-child(3n) {margin-right: 6px;}
    .irrigation_amount .section3 input[type="text" ] {padding-right: 10px;}


    .accumulation_irrigation .section4 .brick .half .tb4 {overflow-x: auto;}
    .accumulation_irrigation .section4 .brick .half .tb4 table {min-width: 390px;}

    .recycling .field_box .con_box li {height: 40px;}


    .mixing_valve .section4 .brick .half .tb4 {overflow-x: auto;}
    .mixing_valve .section4 .brick .half .tb4 table {min-width: 360px;}
    .mixing_valve .tb4 table th:first-child, .mixing_valve .tb4 table td:first-child {padding: 10px 5px 10px 10px;}
    .mixing_valve .tb4 table th:last-child, .mixing_valve .tb4 table td:last-child {padding: 10px 10px 10px 5px;}

    .mixing_valve .section4 .brick .half .tb4 table col:nth-child(2) {width: 24%;}
    .mixing_valve .section4 .brick .half .tb4 table col:nth-child(3) {width: 24%;}
    .mixing_valve .section4 .brick .half .tb4 table col:nth-child(4) {width: 32%;}
    .mixing_valve .section4 .brick .half .tb4 table td input {padding: 0 10px;}
    .mixing_valve .select {padding-left: 10px;}
    

    .top_info .weather.inner {flex-flow: column; align-items: start;}
    .top_info .weather .top {margin-bottom: 15px;}
    .top_info .weather .right {width: 100%;}
    .dashboard .top_info .weather .right a.download {margin-left: 0; width: 100%;}


    .recycling .section5 .tb4 table th:first-child, .recycling .section5 .tb4 table td:first-child {padding: 10px 5px 10px 10px;}
    .recycling .section5 .brick .half .tb4 table td input {padding: 0 10px;}


    .data_lookup .brick_tab li {flex: 0 1 calc(33.3% - 4px);}
    .data_lookup .brick_tab li:nth-child(n+1):nth-child(-n+6) {margin-bottom: 5px;}
    .data_lookup .brick_tab li:nth-child(5n) {margin-right: 5px;}
    .data_lookup .brick_tab li:nth-child(3n) {margin-right: 0;}

    .option_box form .date_wrap {display: flex; flex-flow: column;}
    .option_box form .date_wrap ul {margin-right: 0;}
    .option_box form .date_wrap ul:nth-child(1) {margin-bottom: 6px;}
    .data_analysis button.small_line_btn {margin: 0 3px !important;}

    .farm .sub_tab ul li {flex: 1 1 50%; padding: 10px 6px; height: 50px;}
    .farm .sub_tab ul li:nth-child(n+1):nth-child(-n+3) {border-bottom: 1px solid #eee;}


    .brick.option .radio_wrap {flex-flow: column; align-items: flex-start;}
    .brick.option .left .bottom input[type="date"] {padding: 9px 6px;}
    .brick.option .radio_wrap .in {display: flex; flex-flow: wrap;}
    .brick.option .radio_wrap .in .radio_box {flex: 0 1 calc(50% - 10px); margin-top: 12px;}

    
    .magma_plus .search_wrap .search_bar {padding: 14px; flex-flow: column;}
    .magma_plus .search_wrap .search_bar input {margin-right: 0; margin-left: 5px;}
    
    .magma_plus .search_wrap .search_bar button.small_btn {margin-top: 8px !important; text-align: center; justify-content: center;}
    .magma_plus .text .title {font-size: 19px; letter-spacing: -1px;}

    .recycling .section5 .brick .half_wrap .half .tb4 {overflow-x: auto;}
    .recycling .section5 .brick .half_wrap .half .tb4 table {min-width: 390px;}

    
    

}



@media (max-width: 374px) {
    .main .section .text .main_title {font-size: 5rem; line-height: 6rem;}
    .top_info .emergency_info .top .box .light {margin-right: 2px;}
    .top_info .time_notice .top .brick {margin-right: 6px;}

    .irrigation_amount .section3 .half:nth-child(2) colgroup col {width: 100%;}
    .irrigation_amount .section3 .tb3 table tr.responsive {display: flex; flex-flow: column;}
    .irrigation_amount .section3 .half:last-child .tb3 table td {padding: 10px 10px;}
    .irrigation_amount .section3 .half:last-child .tb3 table td:last-child {padding-top: 0;}


    .proportion_irrigation .row1 .box3, .proportion_irrigation .row1 .box3:nth-child(even), .proportion_irrigation .row2 .box3:nth-child(even), .proportion_irrigation .row2 .box3:nth-child(even), .proportion_irrigation .row1 .box3:nth-child(odd), .proportion_irrigation .row2 .box3:nth-child(odd), .proportion_irrigation .row2 .box3:nth-child(odd) {flex: 0 1 calc(33.3% - 8px);  margin-left: 4px; margin-right: 4px; margin-bottom: 8px;}
    .proportion_irrigation .row1 .box3:nth-child(3n) {flex: 0 1 calc(33.3% - 4px); margin-right: 0;}
    .proportion_irrigation .row1 .box3:nth-child(3n+1), .proportion_irrigation .row1 .box3:nth-child(1) {flex: 0 1 calc(33.3% - 4px); margin-left: 0;}

    .sterilization .row1 .box3, .sterilization .row1 .box3:nth-child(even), .sterilization .row2 .box3:nth-child(even), .sterilization .row2 .box3:nth-child(even), .sterilization .row1 .box3:nth-child(odd), .sterilization .row2 .box3:nth-child(odd), .sterilization .row2 .box3:nth-child(odd) {flex: 0 1 calc(33.3% - 8px);  margin-left: 4px; margin-right: 4px; margin-bottom: 8px;}
    .sterilization .row1 .box3:nth-child(3n) {flex: 0 1 calc(33.3% - 4px); margin-right: 0;}
    .sterilization .row1 .box3:nth-child(3n+1), .sterilization .row1 .box3:nth-child(1) {flex: 0 1 calc(33.3% - 4px); margin-left: 0;}
    
    .recycling .field_box .con_box li {height: 35px;}

    .mixing_valve .section4 .brick .half .tb4 table col:nth-child(2) {width: 21%;}
    .mixing_valve .section4 .brick .half .tb4 table col:nth-child(3) {width: 23%;}
    .mixing_valve .section4 .brick .half .tb4 table col:nth-child(4) {width: 36%;}
    .mixing_valve .section4 .brick .half .tb4 table td input {padding: 0 5px;}

    .data_lookup .brick_tab li h4 {word-break: normal;}

    
}