@charset "utf-8";



/********************************************************

    공통

********************************************************/

#content {width:calc(100% - 300px); margin-left:300px;}

/* top title */
#content .top_tit {margin:0 0 30px;}
#content .top_tit h3 {font-size:26px; font-weight:700; color:#222; margin-bottom:4px;}
#content .top_tit p {font-size:18px; font-weight:500; color:#666;}

#content .com_box {background:#fff; border-radius:10px; padding:40px;}

/* box title */
#content h4 {display:flex; align-items:center; color:#222; font-weight:700; font-size:22px; margin-bottom:30px;}
#content h4 img {margin-right:12px;}

/* btn */
.btn_analysis {display:flex; justify-content:center; gap:10px; margin-top:33px;}
.btn_analysis button {width:220px; padding:15px 10px; font-size:18px; font-weight:600; color:#fff; background:#666; border:none; border-radius:8px;}
.btn_analysis button:first-child {background:#006d80;}

/* right title - sub */
.stit {font-size:18px; font-weight:500; color:#444;}

/* color - background */
.bg_col01 {background:#253cad !important;}
.bg_col02 {background:#34a334 !important;}
.bg_col03 {background:#ff7800 !important;}
.bg_col04 {background:#c70000 !important;}

.txt_col01 {color:#253cad !important;}
.txt_col02 {color:#34a334 !important;}
.txt_col03 {color:#ff7800 !important;}
.txt_col04 {color:#c70000 !important;}


@media screen and (max-width:1400px) {
    .btn_analysis {margin-bottom:50px;}
}

@media screen and (max-width:1280px) {
    #content {width:calc(100% - 250px); margin-left:250px;}

    /* top title */
    #content .top_tit {margin:0 0 20px;}
    #content .top_tit h3 {font-size:24px;}
    #content .top_tit p {font-size:17px;}

    #content .com_box {padding:30px;}

    /* box title */
    #content h4 {font-size:20px; margin-bottom:20px;}

    /* btn */
    .btn_analysis {margin-top:30px;}
    .btn_analysis button {padding:12px 10px; font-size:16px;}

    /* right title - sub */
    .stit {font-size:16px;}
}

@media screen and (max-width:1000px) {
    #content {width:100%; margin-left:0; padding:30px;}

    /* top title */
    #content .top_tit h3 {font-size:20px;}
    #content .top_tit p {font-size:16px;}

    #content .com_box {padding:30px;}

    /* box title */
    #content h4 {font-size:18px;}
    #content h4 img {margin-right:10px; width:18px;}

    /* btn */
    .btn_analysis button {width:100%; font-size:15px;}

    /* right title - sub */
    .stit {font-size:16px;}
}

@media screen and (max-width:760px) {
}

@media screen and (max-width:680px) {
    #content {padding:30px 20px;}

    /* top title */
    #content .top_tit h3 {font-size:18px;}
    #content .top_tit p {font-size:15px;}

    /* box title */
    #content h4 {font-size:17px;}
    #content h4 img {width:17px;}

    /* btn */
    .btn_analysis button {font-size:14px;}

    /* right title - sub */
    .stit {font-size:15px;}
}

@media screen and (max-width:480px) {
    #content {padding:20px;}
}

@media screen and (max-width:360px) {
    /* btn */
    .btn_analysis {width:100%; display:grid; grid-template-columns: repeat(auto-fill, minmax(100%, auto));}
}
















/********************************************************

    환경 및 기상 정보입력

********************************************************/

.infor_input {display:grid; grid-template-columns:1fr 1.5fr; gap:20px;}
.infor_input .ii_data {}
.infor_input .ii_data .ii_div {width:100%;}

.infor_input .ii_data .id_weather {margin-bottom:20px;}
.infor_input .ii_data .id_weather .wea_input {display:grid; grid-template-columns:repeat(auto-fill, minmax(30%, auto)); gap:15px 10px;}
.infor_input .ii_data .id_weather .wea_input li {display:block; width:100%;}
.infor_input .ii_data .id_weather .wea_input li p {margin-bottom:6px; font-size:16px; font-weight:500; color:#444;}
.infor_input .ii_data .id_weather .wea_input li input {width:100%;}
.infor_input .ii_data .id_weather .wea_input li select {width:100%; color:#444 !important;}
.infor_input .ii_data .id_weather .wea_input li input::placeholder, .infor_input .ii_data .id_weather .wea_input li select {font-size:15px; color:#888; font-weight:400;}

/* 토큰 */
.infor_input .ii_data .id_user {}
.infor_input .ii_data .id_user .du_token {display:flex; justify-content:space-between; align-items:center;}
.infor_input .ii_data .id_user .du_token p {font-size:18px; font-weight:500; color:#444;}

.infor_input .ii_data .id_user .du_token .switch {position:relative; display:inline-block; width:100px; height:34px; vertical-align:middle;}
.infor_input .ii_data .id_user .du_token .switch input {display:none;}
.infor_input .ii_data .id_user .du_token .slider {position:absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background:#ccc; -webkit-transition: .4s; transition: .4s;}
.infor_input .ii_data .id_user .du_token .slider:before {position:absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background:#fff; -webkit-transition: .4s; transition: .4s;}
.infor_input .ii_data .id_user .du_token input:checked + .slider {background: #006d80;}
.infor_input .ii_data .id_user .du_token input:focus + .slider {box-shadow: 0 0 1px #006d80;}
.infor_input .ii_data .id_user .du_token input:checked + .slider:before {-webkit-transform: translateX(65px); -ms-transform: translateX(65px); transform: translateX(65px);}
.infor_input .ii_data .id_user .du_token .slider.round {border-radius: 34px;}
.infor_input .ii_data .id_user .du_token .slider.round:before {border-radius: 50%;}

.infor_input .ii_data .id_user .du_file {display:none; margin-top:15px;}
.infor_input .ii_data .id_user .du_file .df_group {display:grid; grid-template-columns:2fr 1fr; gap:10px;}
.infor_input .ii_data .id_user .du_file .file_wrap {display:flex; align-items:center; gap:10px;}
.infor_input .ii_data .id_user .du_file .file_btn {padding:15px 25px; width:100%; text-align:center; background:#eff6f7; font-weight:500; border:2px dashed #006d80; color:#006d80; border-radius:10px; cursor:pointer; font-size:16px;}
.infor_input .ii_data .id_user .du_file .file_btn label {display:flex; align-items:center;}
.infor_input .ii_data .id_user .du_file .file_btn img {margin-right:10px;}
.infor_input .ii_data .id_user .du_file .file_ex {text-align:center; display:flex; align-items:center; justify-content:center; border:2px solid #aaa; background:#f8f8f8; border-radius:10px;}
.infor_input .ii_data .id_user .du_file .file_ex button {font-size:16px; font-weight:500; color:#888;}



@media screen and (max-width:1400px) {
    .infor_input {grid-template-columns: repeat(auto-fill, minmax(50%, auto));}

    .infor_input .ii_data .id_weather .wea_input {grid-template-columns:repeat(auto-fill, minmax(20%, auto));}
}

@media screen and (max-width:1280px) {
    .infor_input .ii_data .id_weather .wea_input li p {font-size:15px;}
    .infor_input .ii_data .id_weather .wea_input li input::placeholder, .infor_input .ii_data .id_weather .wea_input li select {font-size:14px;}

    /* 토큰 */
    .infor_input .ii_data .id_user .du_token p {font-size:17px;}

    .infor_input .ii_data .id_user .du_file .file_btn {padding:15px 20px; font-size:15px;}
    .infor_input .ii_data .id_user .du_file .file_ex button {font-size:15px;}
}

@media screen and (max-width:1000px) {
    .infor_input .ii_data .id_weather .wea_input li p {font-size:14px;}
    .infor_input .ii_data .id_weather .wea_input li input::placeholder, .infor_input .ii_data .id_weather .wea_input li select {font-size:13px;}

    /* 토큰 */
    .infor_input .ii_data .id_user .du_token p {font-size:16px;}

    .infor_input .ii_data .id_user .du_file .file_btn {font-size:14px;}
    .infor_input .ii_data .id_user .du_file .file_btn img {width:18px;}
    .infor_input .ii_data .id_user .du_file .file_ex button {font-size:14px;}
}

@media screen and (max-width:760px) {
    .infor_input .ii_data .id_weather .wea_input {grid-template-columns:repeat(auto-fill, minmax(30%, auto));}
}

@media screen and (max-width:680px) {
    .infor_input .ii_data .id_user .du_file .df_group {grid-template-columns:repeat(auto-fill, minmax(50%, auto));}

    .infor_input .ii_data .id_user .du_file .file_ex {border:1px solid #aaa;}
    .infor_input .ii_data .id_user .du_file .file_btn img {width:16px;}
}

@media screen and (max-width:480px) {
    .infor_input .ii_data .id_weather .wea_input {grid-template-columns:repeat(auto-fill, minmax(40%, auto));}

    /* 토큰 */
    .infor_input .ii_data .id_user .du_token .switch {width:80px;}
    .infor_input .ii_data .id_user .du_token input:checked + .slider:before {-webkit-transform: translateX(45px); -ms-transform: translateX(45px); transform: translateX(45px);}
}

@media screen and (max-width:360px) {
    .infor_input .ii_data .id_weather .wea_input {grid-template-columns:repeat(auto-fill, minmax(50%, auto));}

    /* 토큰 */
    .infor_input .ii_data .id_user .du_token .switch {width:60px;}
    .infor_input .ii_data .id_user .du_token input:checked + .slider:before {-webkit-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px);}
}














/********************************************************

    관수 의사결정 지원 정보

********************************************************/

.infor_input .ii_express {}

/* 필요도 */
.infor_input .ii_express .necessity {display:flex; align-items:center; justify-content:space-between; width:100%;}
.infor_input .ii_express .necessity ul {display:flex;}
.infor_input .ii_express .necessity ul li {}
.infor_input .ii_express .necessity ul li:first-child {display:flex; align-items:center; justify-content:space-between; background:#f9f9f9; border:1px solid #ddd; width:360px; padding:12px 30px;}
.infor_input .ii_express .necessity ul li:first-child span {font-size:18px; font-weight:500;}
.infor_input .ii_express .necessity ul li:first-child span:last-child {display:block; border-radius:50%; width:20px; height:20px;}
.infor_input .ii_express .necessity ul li:last-child {font-size:18px; font-weight:500; margin-left:45px;}
.infor_input .ii_express .necessity ul li:last-child span {font-size:48px; font-weight:800; margin-right:10px;}

/* 제어로그 */
.infor_input .ii_express .control {border-top:1px solid #eee; margin-top:30px; padding-top:30px;}
.infor_input .ii_express .control .table_dg01 {margin-top:20px; height:422px; overflow-y:auto;}
.infor_input .ii_express .control .table_dg01 table {}

.infor_input .ii_express .control .table_dg01 table thead {}
.infor_input .ii_express .control .table_dg01 table tbody {}


@media screen and (max-width:1500px) {
    .infor_input .ii_express .necessity ul li:first-child {width:260PX;}
}

@media screen and (max-width:1400px) {
}

@media screen and (max-width:1280px) {
    /* 필요도 */
    .infor_input .ii_express .necessity ul li:first-child {padding:10px 30px;}
    .infor_input .ii_express .necessity ul li:first-child span {font-size:16px;}
    .infor_input .ii_express .necessity ul li:first-child span:last-child {width:18px; height:18px;}
    .infor_input .ii_express .necessity ul li:last-child {font-size:16px; margin-left:35px;}
    .infor_input .ii_express .necessity ul li:last-child span {font-size:42px;}

    /* 제어로그 */
    .infor_input .ii_express .control {margin-top:25px; padding-top:25px;}
    .infor_input .ii_express .control .table_dg01 {margin-top:10px; height:400px;}
}

@media screen and (max-width:1000px) {
    /* 필요도 */
    .infor_input .ii_express .necessity ul li:first-child {padding:6px 20px;}
    .infor_input .ii_express .necessity ul li:first-child span {font-size:15px;}
    .infor_input .ii_express .necessity ul li:first-child span:last-child {width:17px; height:17px;}
    .infor_input .ii_express .necessity ul li:last-child {font-size:15px; margin-left:30px;}
    .infor_input .ii_express .necessity ul li:last-child span {font-size:40px;}

    /* 제어로그 */
    .infor_input .ii_express .control {margin-top:20px; padding-top:20px;}
    .infor_input .ii_express .control .table_dg01 {height:auto;}
}

@media screen and (max-width:760px) {
}

@media screen and (max-width:680px) {
    /* 필요도 */
    .infor_input .ii_express .necessity ul li:first-child {padding:6px 20px; width:240px;}
    .infor_input .ii_express .necessity ul li:first-child span {font-size:14px;}
    .infor_input .ii_express .necessity ul li:first-child span:last-child {width:16px; height:16px;}
    .infor_input .ii_express .necessity ul li:last-child {font-size:14px; margin-left:25px;}
    .infor_input .ii_express .necessity ul li:last-child span {font-size:35px; margin-right:5px;}
}

@media screen and (max-width:480px) {
    .infor_input .ii_express .necessity {display:grid; grid-template-columns: repeat(auto-fill, minmax(100%, auto)); gap:10px;}
    .infor_input .ii_express .necessity ul {justify-content:space-between;}
}

@media screen and (max-width:360px) {
    .infor_input .ii_express .necessity ul {background:#f9f9f9; border:1px solid #ddd; padding:10px 0;}
    .infor_input .ii_express .necessity ul li:first-child {justify-content:flex-start; width:auto; background:none; border:none;}
    .infor_input .ii_express .necessity ul li:first-child span:last-child {margin-left:10px; width:14px; height:14px;}
    .infor_input .ii_express .necessity ul li:last-child {margin-right:15px;}
    .infor_input .ii_express .necessity ul li:last-child span {font-size:30px;}
}