@charset "UTF-8";@import url("/resources/css/fnc_css/font/font.css");
.sub-top-wrap { width: 100%; height: 300px; display: flex; flex-direction: column; justify-content: center; position: relative; } 
.subbanner1 { background: url("/resources/images/fnc_images/sub/subbanner1.jpg") no-repeat center/cover; }
.subbanner2 { background: url("/resources/images/fnc_images/sub/subbanner2.jpg") no-repeat center/cover; }
.subbanner3 { background: url("/resources/images/fnc_images/sub/subbanner3.jpg") no-repeat center/cover; }
.subbanner4 { background: url("/resources/images/fnc_images/sub/subbanner4.jpg") no-repeat center/cover; } 
.sub-top-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1; } 
.sub-top {  padding: 0px 30px; max-width: 1260px; width: 100%; margin: 0 auto; z-index: 2; } 
.sub-title { display: flex; justify-content: space-between; align-items: start; margin-bottom: 50px; } 
.sub-title > h1 { font-size: 34px; line-height: 44px; position: relative; font-weight: bold; color: #fff; } 
.sub-title > h1::before { content: ""; position: absolute; top: 0; left: -10px; width: 20px; height: 20px; border-radius: 50%; background-color: #2f83f7; z-index: -1; } 
.sub-title > div { display: flex; align-items: center; gap: 20px; color: #fff; } 
.sub-title > div img { filter: invert(1); } 
.sub-menu { padding: 0 10px; width: fit-content; height: 60px; border-radius: 40px; display: flex; align-items: center; gap: 10px; background-color: #eee; } 
.sub-menu > a { display: flex; align-items: center; justify-content: center; padding: 0 40px; height: 40px; width: auto; font-size: 20px; line-height: 28px; font-weight: 500; color: #707070; border-radius: 20px; transition: all 0.2s;} 
.sub-menu > a.active,
.sub-menu > a:hover { background-color: #2f83f7; color: #fff; }
 
.sub-wrap { padding: 0 30px 100px; max-width: 1260px; margin: 0 auto; } 
.sub-wrap-title { font-size: 34px; line-height: 44px; font-weight: bold; text-align: center; position: relative; width: fit-content; margin: 80px auto; } 
.sub-wrap-title::before { content: ""; position: absolute; bottom:-5px; left: 50%;transform:translateX(-50%); width: calc(100% + 130px);max-width:1200px; height: 20px; border-radius: 10px; background-color: #2f83f7; z-index: -1;opacity:0.2; }
.sub-wrap-title::after{ content: ""; position: absolute; top:-30px; left: 50%;transform:translateX(-50%);  width: 60px; height: 60px;background: url("/resources/images/fnc_images/sub/sub_title_bg.png") no-repeat center/contain;z-index:-1;opacity:0.2;} 
/* */
.main05-title { font-size: 20px; line-height: 28px; margin-bottom: 10px; font-weight: bold; } 
.main05-grid { width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-bottom: 50px; } 
.main05-grid > a {text-align:center; width: 100%; height: 70px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; padding: 10px 20px; box-shadow: 3px 3px 10px #00000033; transition: all 0.2s;  font-size:18px;line-height:26px;font-weight:500;} 
.main05-grid > a:hover { scale: 1.1; box-shadow: 3px 3px 10px #00000099; } 

/* g테크 소개 */
.hello { display: flex; gap: 40px; padding-top: 50px; } 
.hello-left { width: 40%; } 
.hello-left > div { width: 100%; height: 100%; border-radius: 50px 0 50px 0;  overflow: hidden; box-shadow:3px 3px 10px #00000033;} 
.hello-left > div > img { width: 100%; height: 100%; object-fit: cover; } 
.hello-right { width: 60%; background: url("/resources/images/fnc_images/sub/hello_bg.png") no-repeat top 30% right 30%; } 
.hello-right > div { position: relative; width: 100%; padding: 20px; color: #4a63cc; margin-bottom: 80px; } 
.hello-right > div::before { content: ""; position: absolute; right: 0; top: -25%; width: 150%; height: 150%; background-color: #ecf4ff; z-index: -1; border-radius: 0 40px 0 40px; } 
.hello-right > div > p { font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 20px; } 
.hello-right > div > h3 { font-size: 28px; line-height: 38px; font-weight: bold; } 
.hello-right > p { font-size: 18px; line-height: 26px; margin-bottom: 30px; font-weight: 500; } 
.hello-right > h4 { font-size: 20px; line-height: 28px; margin-top: 50px; } 
.hello-right > h4 > span { font-size: 32px; line-height: 40px; font-weight: bold; margin-left: 10px; } 
/* */
.patent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } 
.patent-grid > div { width: 100%; border: 1px solid #707070; } 
.patent-grid > div > div { width: 100%; aspect-ratio: 3/4; border-bottom: 1px solid #707070; display: flex; align-items: center; justify-content: center; } 
.patent-grid > div > p { display: flex; align-items: center; justify-content: center; text-align: center; height: 40px; font-size: 18px; line-height: 26px; font-weight: 500; } 
/* 장비안내 */
form:has(.eq-search) { display: flex; justify-content: end; }
.eq-search { width: 100%; max-width: 500px; height: 50px; border-radius: 30px; margin-bottom: 30px; position: relative; overflow: hidden; border: 1px solid #ddd; } 
.eq-search > input { width: 100%; height: 100%; padding-left: 20px; padding-right: 80px; font-size: 16px; line-height: 24px; font-weight: 500; } 
.eq-search > button { position: absolute; right: 0px; top: 0; width: 60px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #2f83f7; } 
.eq-search > button > img { filter: invert(1); width: 25px; transition: all 0.2s; } 
.eq-search > button:hover > img { scale: 1.1; } 
.eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 50px; } 
.eq-box { width: 100%; padding: 20px; border-radius: 20px; border: 1px solid #ddd; box-shadow: 2px 2px 6px #00000030; } 
.eq-box > div { width: 100%; border-radius: 20px; aspect-ratio: 16/9; border: 1px solid #ddd; margin-bottom: 20px; overflow: hidden; } 
.eq-box > div > img { transition: all 0.2s; width: 100%; height: 100%; object-fit: cover; } 
.eq-box:hover > div > img { scale: 1.1; } 
.eq-box > h3 { font-size: 20px; line-height: 28px; height: 56px; font-weight: bold; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; overflow: hidden; text-overflow: ellipsis; } 
.eq-box > p { font-size: 16px; line-height: 24px; height: 48px; margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; overflow: hidden; text-overflow: ellipsis; } 
.eq-box > span { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; background-color: #2f83f7; color: #fff; border-radius: 10px; border: 2px solid #2f83f7; transition: all 0.2s; font-size: 18px; line-height: 26px; font-weight: 500; } 
.eq-box:hover > span { background-color: #fff; color: #2f83f7; font-weight: bold; }

.sub-wrap form:has(.board_fl) { display: flex; justify-content: space-between; }
#user_board_control .board_fl select{
	height:50px;
	
 -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background: url("/resources/images/fnc_images/common/select_arrow.svg") no-repeat;
  background-position: right 15px top 50%;
  border-radius:30px;
  padding-left: 20px;
  padding-right: 40px;}
#user_board_control .eq-search{display:flex;align-items:center;margin:0;}
#user_board_control .eq-search select{border:none;height:100%;padding:0 20px;

 -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background: url("/resources/images/fnc_images/common/select_arrow.svg") no-repeat;
  background-position: right 10px top 50%;
  border-radius:0;
  padding-left: 20px;
  padding-right: 40px;}
#user_board_control .eq-search > input[type="text"]{width: 100%; height: 100%; padding-left: 10px; padding-right: 80px; font-size: 16px; line-height: 24px; font-weight: 500; border:none;}
#user_board_control .eq-search > button{border:none;border-radius:0;height:50px;}
/* 장비목록 상세 */
.eq-detail-top { display: flex; gap: 50px; width: 100%; } 
.eq-detail-top-img { width: 45%; aspect-ratio: 1/1; border: 1px solid #ddd; border-radius: 20px; overflow: hidden; } 
.eq-detail-top-img > img { width: 100%; height: 100%; object-fit: contain; } 
.eq-detail-top-text { width: 55%; } 
.eq-detail-top-text > h3 { width: 100%; font-size: 24px; line-height: 32px; font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 10px; } 

.eq-detail-top-text > h4 { font-size: 20px; line-height: 28px; font-weight: 500; margin-bottom: 10px; margin-top: 40px; } 
.eq-detail-top-text > p,
.eq-detail-top-text > pre { font-size: 16px; line-height: 24px; }
.eq-detail-top-text > pre{ white-space: pre-wrap; } 
.eq-detail-back { width: 200px; height: 60px; border-radius: 30px; display: flex; align-items: center; justify-content: center; background-color: #2f83f7; border: 2px solid #2f83f7; font-size: 18px; line-height: 26px; font-weight: 500; color: #fff; margin: 100px auto 0; transition: all 0.2s; } 
.eq-detail-back:hover { background: #fff; color: #2f83f7; } 
/* ========================================================================== */
/* ========================================================================== */
/* 마이페이지 */
.mypage-title { font-size: 24px; line-height: 32px; text-align: center; margin: 80px auto 20px; font-weight: bold; } 

.mypage-base { width: 100%; border: 1px solid #aaa; padding: 30px; max-width:800px;margin:0 auto; border-radius:20px; box-shadow:3px 3px 10px #00000033;} 
.mypage-base > h1 { font-size: 24px; line-height: 32px; font-weight: bold; margin-bottom: 30px; text-align: center; } 
/* .mypage-base > div { display: grid; grid-template-columns: repeat(2, 1fr); } */
.mypage-base > div {border-top:1px solid #ddd; border-left:1px solid #ddd;} 
.mypage-base > div > div { width: 100%; display: flex; } 
.mypage-base > div > div > h3 { width: 200px; min-height: 60px; background-color: #eee; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 26px; padding: 10px 0;font-weight: bold; flex-shrink: 0; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } 
.mypage-base > div > div > p { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 10px 20px; font-size:16px;line-height:24px;} 
.mypage-base .eq-detail-back { margin: 50px auto 0px; }

.mypage-simsa-top { display: flex; align-items: center; gap: 30px; margin-bottom:30px;} 
.mypage-simsa-top > div { width: 100%; height: 120px; padding: 20px; border-radius: 20px; box-shadow: 3px 3px 10px #00000033; background-color: #fff; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: all 0.2s; position: relative; border:1px solid #aaa;} 
.mypage-simsa-top > div:hover,.mypage-simsa-top > div.active { background-color: #2f83f7; border:none;} 
.mypage-simsa-top > div:hover > h3,.mypage-simsa-top > div.active > h3 { color: #fff; } 
.mypage-simsa-top > div:hover > p,.mypage-simsa-top > div.active > p { color: #fff; } 
.mypage-simsa-top > div > h3 { font-size: 20px; line-height: 30px; font-weight: bold; transition: all 0.2s; } 
.mypage-simsa-top > div > p { font-size: 24px; line-height: 32px; font-weight: bold; text-align: right; color: #2f83f7; transition: all 0.2s; } 
.mypage-simsa-top > div.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 30px solid #2f83f7; } 

.mypage-simsa-top-count{width:100%;display:flex;align-items:end;justify-content:space-between;margin-bottom:20px;}
.mypage-simsa-top-count > h3{font-size:20px;line-height:28px;font-weight:600;}
.mypage-simsa-top-count > input{height:40px;padding:0 20px;width:fit-content;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#7855e7;color:#fff;font-weight:500;transition:all 0.2s; border:1px solid #7855e7;}
.mypage-simsa-top-count > input:hover{background:#fff;color:#7855e7;}

.mypage-simsalist { width: 100%;  margin-bottom: 50px; border-radius: 20px 20px 0 0; overflow: hidden; }
.mypage-simsalist-title { width: 100%; border-bottom: 1px solid #2f83f7; height: 50px; display: flex; align-items: center; justify-content: center; gap: 20px; background: #2f83f7; } 
.mypage-simsalist-title > h3 { font-size: 18px; line-height: 26px; font-weight: bold; color: #fff; } 
.mypage-simsalist-title > input { padding: 0 20px; background-color: #000; color: #fff; } 
 .mypage-simsalist-contents table { border: 1px solid #2f83f7; } 
.mypage-simsalist-contents table tr:hover td { background: #eee; } 
.mypage-simsalist-contents table th {height:50px; border: 1px solid #2f83f7; text-align: center; padding: 10px; font-size: 16px; line-height: 24px; font-weight: bold; background: #2f83f7; color:#fff;}
.mypage-simsalist-contents table td {height:50px; border: 1px solid #ccc; text-align: center; padding: 10px; font-size: 16px; line-height: 24px; } 

.perf-write { display: flex; gap: 30px; } 
.perf-write > div { width: 50%; } 

.perf-write p { font-size: 22px; line-height: 30px; font-weight: bold; margin-bottom:30px; text-align: center; } 
.perf-write caption { display: none; } 
/*  .perf-write table { border: 1px solid #ddd; } 
 .perf-write table th { border: 1px solid #ddd; text-align: center; padding: 10px; font-size: 16px; line-height: 24px; font-weight: bold; background: #eee; } 
 .perf-write table td { border: 1px solid #ddd; text-align: center; padding: 10px; font-size: 16px; line-height: 24px; } 
.perf-write-table{padding:30px 20px;border-radius:20px;box-shadow:3px 3px 10px #00000033;border:1px solid #aaa;}*/ 
.perf-write-left .perf-write-table{height:100%;}
.perf-write-right {display:flex;flex-direction:column;justify-content:space-between;}
.perf-write-right-top{margin-bottom:30px;}


.perf-write-link{width:100%; display:flex;align-items:center;margin-bottom:70px;gap:20px;}
.perf-write-link > a{width:100%;height:50px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:26px;transition:all 0.2s;border-radius:30px;background:#eee;box-shadow: 3px 3px 10px #00000033;color:#444;font-weight:500;text-align:center;}
.perf-write-link > a.active,.perf-write-link > a:hover{background:#2f83f7; color:#fff;font-weight:500;}

.perf-write-btn{min-width:85px;width:100%;height:30px;border-radius:20px;background:#2f83f7;color:#fff;padding:0;display: flex; align-items: center; justify-content: center;border:2px solid #2f83f7; transition:all 0.2s; }
.perf-write-btn:hover{background:#fff;color:#2f83f7;font-weight:500;}

.perf-write-plus{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.perf-write-plus > span{width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center;background:#e95f51;transition:all 0.2s; border:2px solid #e95f51}
.perf-write-plus:hover > span{background:#fff;}
.perf-write-plus > span > img{filter:brightness(10);transition:all 0.2s; }
.perf-write-plus:hover > span > img{filter:brightness(1);}
.perf-write-table tr:has(td .perf-write-plus:hover){background:#eee;}


.view-btns { width: 100%; display: flex; gap: 10px; align-items: center; justify-content: end; margin-bottom:20px;} 
.view-btns > button { height: 40px; padding: 0 20px; width: fit-content; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition:all 0.2s;}
.view-btns > button:hover{font-weight:600;} 
.view-btns > button.btn_blue { background: #2f83f7; color: #fff; border:2px solid #2f83f7}
.view-btns > button.btn_blue:hover{color:#2f83f7;background:#fff;} 
.view-btns > button.btn_red { background:#e95f51; color: #fff; border:2px solid #e95f51}
.view-btns > button.btn_red:hover{color:#e95f51;background:#fff;} 
.view-btns > button.btn_gray { background: #eee; }
.view-btns > button.btn_gray:hover{background:#ccc;} 

.view-card{width:100%; padding:30px; border:1px solid #aaa; box-shadow:3px 3px 10px #00000033;border-radius:20px;}
.view-title { font-size: 24px; line-height: 32px; text-align: center; font-weight: bold; } 
.view-table table {border-top: 1px solid #ddd;  } 
.view-table table th {height:50px; border-bottom: 1px solid #ddd; text-align: center; padding: 10px; font-size: 18px; line-height: 26px; font-weight: bold; background: #E9EDF5; } 
.view-table table td {height:50px; border-bottom: 1px solid #ddd; padding: 10px 20px; font-size: 16px; line-height: 24px; }
.view-table table tr td:first-child,.view-table table tr th:first-child{border-left:none;}
.view-table table tr td:last-child,.view-table table tr th:last-child{border-right:none;}

.view-table-down{display:flex; width:100%;align-items:center;justify-content:space-between;padding:5px 0; border-bottom:1px dashed #ddd;}
.view-table-down:hover{background:#eee;}
.view-table-down > div{display:flex;align-items:center;gap:5px;}
.view-table-down > div > img {width:15px;}
.view-table-down > div > span{font-size:14px;color:#444;}

.preview-images iframe{width:100%;height:500px;}
.preview-images object{width:100%;height:700px;}

.type-wrap {width:100%;height:100%;display:flex;gap:10px;align-items:center;}
.type-wrap > span { display:flex;align-items:center; padding: 0 20px; height: 40px;line-height:24px; border-radius: 30px;  color: #fff; font-weight: 500; font-size: 16px; width:fit-content;}
/* */
.stat-write-box { width: 100%; padding: 30px 20px; box-shadow: 3px 3px 10px #00000033; border-radius: 20px; border: 1px solid #aaa; } 
.stat-write-box > h3 { font-size: 18px; line-height: 26px; font-weight: bold; margin-bottom: 20px; } 
.stat-write { width: 100%; border-top: 1px solid #ccc; } 
.stat-write-tr { width: 100%; display: flex; } 
.stat-write-double { display: flex; align-items: center; } 
.stat-write-th { width: 200px; height: 60px; background-color: #eee; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 26px; font-weight: bold; flex-shrink: 0;  border-bottom: 1px solid #ccc; text-align:center;} 
.stat-write-td { width: 100%; height: 60px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ccc;  padding: 0 20px; font-size:16px;line-height:24px;} 
.stat-write-td > span { display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 40px; border-radius: 30px;  color: #fff; font-weight: 500; font-size: 16px; line-height: 24px; }

.perf-write-link2 > a:nth-child(1).active,.perf-write-link2 > a:nth-child(1):hover{background:#7855e7;}
.perf-write-link2 > a:nth-child(2).active,.perf-write-link2 > a:nth-child(2):hover{background:#2f83f7;}
.perf-write-link2 > a:nth-child(3).active,.perf-write-link2 > a:nth-child(3):hover{background:#e95f51;}

span.type1{background-color: #2f83f7;}
span.type2{background-color:#7855e7;}
span.type3{background-color:#e95f51;}

.stat-write-td ul li{margin-bottom:5px;}
.pi{padding:3px 10px;border-radius:5px;font-size:14px;line-height:22px;color:#fff;transition:all 0.2s;}
.pi:hover{background:#fff; color:#000;}
.pi-down{background:#7855e7; border:1px solid #7855e7;}
.pi-delete{background:#e95f51;border:1px solid #e95f51;}
 
 
.stat-write-td > select,
.stat-write-td > input { height: 40px; border: 1px solid #aaa; padding: 0 16px; width: 100%; border-radius: 20px; } 
.stat-write-td > input[type="file"] { padding: 4px 16px; } 
.stat-write-td > textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #aaa; resize: none; border-radius: 20px; } 
.stat-write-tr:has(textarea) > div { height: auto !important; padding-top: 10px; padding-bottom: 10px; } 
.stat-write-tr.free > div { height: auto !important; padding-top: 10px; padding-bottom: 10px; min-height: 50px; }  
/* 로그인 */
.login-box { width: 100%; max-width: 600px; margin: 0 auto; border: 1px solid #ddd; padding: 30px; } 
.login-box > h1 { text-align: center; font-size: 30px; line-height: 40px; font-weight: bold; margin-bottom: 20px; } 
.login-box > label { display: block; width: 100%; margin-bottom: 30px; } 
.login-box > label > p { font-size: 18px; line-height: 26px; font-weight: bold; margin-bottom: 10px; } 
.login-box > label > input { width: 100%; height: 50px; padding: 0 20px; border: 1px solid #ddd; border-radius: 30px; } 
.login-box > button { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; background-color: #2f83f7; color: #fff; font-size: 18px; line-height: 26px; border-radius: 30px; font-weight: 500; } 
/* 개인정보 수정 */
.modify { width: 100%; max-width: 800px; margin: 0 auto; border: 1px solid #ddd; padding: 30px; border-radius:20px; box-shadow:3px 3px 10px #00000033;} 
.modify > label { display: block; width: 100%; margin-bottom: 30px; } 
.modify > label > span { font-size: 16px; line-height: 24px; color: red; display: block; margin-top: 5px; } 
.modify > label > p { font-size: 18px; line-height: 26px; font-weight: 600; margin-bottom: 10px; } 
.modify > label > h3 { font-size: 18px; line-height: 26px; font-weight:500; margin-bottom: 10px; } 
.modify > label input,.modify > label select { width: 100%; height: 50px; padding-left:15px; border: 1px solid #ddd; border-radius: 30px; min-width:150px;} 
.modify > label > div { display: flex; align-items: center; gap: 10px; } 
.modify-btns { display: flex; align-items: center; gap: 20px; } 
.modify-btns > a { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 30px; } 
.modify-btns > a:first-child { background-color: #eee; } 
.modify-btns > a:last-child { background-color: #2f83f7; color: #fff; } 
/* 성과통계 */
.stat-top { display: flex; width:100%;gap:40px;max-width:1000px;margin:0 auto;}
.stat-top-left > p {text-align:center; font-size:20px;line-height:28px;font-weight:bold;}
.stat-top-right{width:100%;display:flex;flex-direction:column;gap:10px;} 
.sub-wrap #liquidChart1 { width: 300px; height: 300px; }

.click-td{cursor:pointer; transition:all 0.2s;}
.click-td1:hover{background:#7855e7;color:#fff;}
.click-td2:hover{background:#2f83f7;color:#fff;}
.click-td3:hover{background:#e95f51;color:#fff;}

/* 바 차트 래퍼 */
.sub-wrap .bar-chart { width: 100%; height: 20px; background: #e6ecf5; border-radius: 10px; overflow: hidden; transition: all 0.2s; } 
.stat-top-right > div { padding: 20px; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; } 
.stat-top-right > div:hover { background: #fafafa; transform: scale(1.05); } 
.stat-top-right > div.active { background: #fff; border: 1px solid #aaa; transform: scale(1); } 
.sub-wrap .bar-chart span { display: block; height: 100%; width: 0; border-radius: 10px; transition: width 1.6s ease-out; } 
.sub-wrap .bar-chart-text { display: flex; align-items: center; justify-content: space-between; font-size: 18px; line-height: 26px; margin-bottom: 5px; font-weight: 500; } 
.sub-wrap .bar-chart-mini-wrap { padding: 0 20px; margin-bottom: 0; /* display 제거 */
 max-height: 0; overflow: hidden; /* 슬라이드 느낌 */
 opacity: 0; transform: translateY(-8px); transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.3s ease, padding 0.3s ease; } 
.stat-top-right > div.active .bar-chart-mini-wrap { /* max-height 값은 JS에서 설정 */
 padding: 20px; opacity: 1; transform: translateY(0); } 
.sub-wrap .bar-chart-mini .bar-chart { margin-bottom: 10px; height: 10px; } 
.sub-wrap .bar-chart-mini .bar-chart-text { font-size: 16px; line-height: 24px; } 

.stat-title{display:flex;align-items:center;justify-content:space-between; height:60px;width:100%;border-radius:20px 20px 0 0; padding: 0 30px;  margin-top: 50px; color:#fff;}

.perf-write .stat-title{margin:0;}
.stat-title > h3 { font-size: 20px; line-height: 28px;font-weight: bold;}
.stat-title > img {height:12px;transition:all 0.2s;display:none;}
.stat-title.active > img{transform:rotate(180deg);}

.stat-table{padding:30px; transition:all 0.2s;border-top:none;}
/* .stat-table.active{padding:30px;} */ 
.stat-table table { word-break: break-all; width: 100%;  font-size: 16px; line-height: 24px; }
.stat-table table tr:nth-child(2n+1){background:#F6F8FC;} 
.stat-table table th {  padding: 10px; font-weight: bold; background-color: #E9EDF5; } 
.stat-table table td { border-bottom: 1px solid #ddd; padding: 10px; text-align: center; position:relative;}
.stat-table table tr td:first-child{border-left:none;}
.stat-table table tr td:last-child{border-right:none;}
.stat-table table td:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%); height:24px;border-right:1px dashed #ddd;}
.sub-wrap td .bar-chart-mini .bar-chart-text{width:45px;justify-content:end;}

.stat-table table td .check{width:100%;height:40px;border-radius:10px;display: flex; align-items: center; justify-content: center;gap:10px;font-size:14px;line-height:22px;color:#fff;}
.stat-table table td .check.ok{background:#48bb78;}
.stat-table table td .check.no{background:#ecc94b;} 
/* 성과등록 */
.stat-write-form-table{margin-bottom:50px;}
.stat-write-form-table table { word-break: break-all; width: 100%; border: 1px solid #ddd; font-size: 16px; line-height: 24px; } 
.stat-write-form-table table th { border: 1px solid #ddd; padding: 10px; font-weight: bold; background-color: #eee; } 
.stat-write-form-table table td { border: 1px solid #ddd; padding: 10px; }
.stat-write-form-table table td textarea{width:100%;height:100px;border:1px solid #ddd; padding:10px;resize:none; }
.stat-write-form-table table td label{display:unset;}

.stat-write-btns  { width: 100%; display: flex; gap: 20px; align-items: center; justify-content: center; margin-top:50px;}
.stat-write-btns input{ height: 60px; width: 180px; border-radius: 30px; display: flex; align-items: center; justify-content: center; transition:all 0.2s;box-shadow:3px 3px 10px #00000033;font-size:18px;line-height:26px;font-weight:500;}
.stat-write-btns input.btn_red { background: #2f83f7; color: #fff; border:2px solid #2f83f7;}
.stat-write-btns input.btn_red:hover{background:#fff;color:#2f83f7;} 
.stat-write-btns input.btn_darkgray{ background: #eee; }
.stat-write-btns input.btn_darkgray:hover{background:#ddd;}
 
 .badge{padding:0 15px;height:30px;border-radius:20px;display: flex; align-items: center; justify-content: center;color:#fff;}
 .badge-approve{background:#48bb78;}
 .badge-wait{background:#e3b200;}
 .badge-reject{background:#f56565;}
 
 .menual-grid{display:grid; gap:20px;}
 .menual-btn{width:100%;display:flex;justify-content:end;margin-bottom:20px;}
 .menual-btn > a {height: 50px; width: 200px; background: #2f83f7; color: #fff; border:2px solid #2f83f7;border-radius: 30px; display: flex; align-items: center; justify-content: center; transition:all 0.2s;box-shadow:3px 3px 10px #00000033;font-size:18px;line-height:26px;font-weight:500;}
 .menual-btn > a:hover{background:#fff;color:#2f83f7;}
/* ========================================================================== */
/* ========================================================================== */
/* 반응형 */
/* @media (max-width: 1439px) { } */
@media (max-width: 1279px){
 .sub-menu > a { padding: 0 20px; font-size: 16px; line-height: 24px; } 
 .sub-title > h1 { font-size: 30px; line-height: 40px; } 
 .sub-wrap-title::before{max-width:calc(100vw - 32px);}
 }
@media (max-width: 1023px){
 .sub-top { padding: 0px 16px; } 
 .sub-wrap { padding: 0 16px 50px; }
 .sub-top-wrap{height:auto;padding: 30px 0;} 
 .sub-menu { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); padding: 10px; width: 100%; border-radius: 20px; } 
 .company-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } 
 .company-grid > a { height: 60px; } 
 .patent-grid { grid-template-columns: repeat(3, 1fr); column-gap: 16px; row-gap: 30px; } 
 .main05-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } 
 .main05-grid > a { height: 60px; } 
 .eq-grid { grid-template-columns: repeat(2, 1fr); } 
 .eq-detail-top { gap: 30px; flex-direction: column; } 
 .eq-detail-top-img { width: 100%; max-height: 300px; } 
 .eq-detail-top-text { width: 100%; } 
 .eq-detail-top-text > h3 { font-size: 22px; line-height: 30px; } 
 .eq-detail-top-text > h4 { font-size: 18px; line-height: 26px; }
 
 .sub-title > h1 { font-size: 28px; line-height: 36px; } 
 
 .hello{flex-direction:column;padding:0;}
 .hello-left{width:100%;}
 .hello-right{width:100%;background-position:center center;}
 .hello-right > div::before{width:100%;height:100%;top:50%;transform:translateY(-50%);}
 .hello-right > div{margin-bottom:50px;padding:30px 20px;}
 .hello-right > p{font-size:16px;line-height:24px;}
 .hello-right > h4{font-size:16px;line-height:24px;}
 .hello-right > h4 > span{font-size:24px;line-height:32px;}
 .hello-right > div > h3{font-size:24px; line-height:32px;}
 .hello-right > div > h3 br{display:none;}
 .hello-right > div > p{font-size:18px;line-height:26px;}
 
 .stat-top{gap:0px;}
 .stat-table{padding:0;}
 .stat-title{height:50px;padding:0 16px;}
 .stat-title > h3{font-size:18px;line-height:26px;}
 
 .user-stat .stat-table table tr{display:flex;flex-wrap:wrap;border-bottom:1px solid #ddd;}
 .user-stat .stat-table table tr th{width:15%;padding:15px 10px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:22px;}
 .user-stat .stat-table table tr th:first-child{width:40%;}
 .user-stat .stat-table table tr th:last-child{display:none;}
 .user-stat .stat-table table tr td{width:15%;border-bottom:none;padding:15px 10px;}
 .user-stat .stat-table table tr td:first-child{width:40%;}
 .user-stat .stat-table table tr td:not(:last-child){border-bottom:1px dashed #ddd;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:22px;}
 .user-stat .stat-table table tr td:last-child{width:100%;}
 .user-stat .stat-table colgroup{display:none;}
 .perf-write-link > a{height:40px;font-size:16px;line-height:24px;}
 .perf-write-link2 > a:nth-child(2){line-height:18px;}
 
 .sub-wrap form:has(.board_fl){flex-direction:column;gap:20px;}

.perf-write{flex-direction:column;}
.perf-write > div{width:100%;}
.perf-write .stat-table table th{min-width:105px;}

.stat-write-th{height:auto;padding:10px;font-size:16px;line-height:24px;}
.stat-write-td{height:auto;padding:10px;}
.stat-write-double{flex-direction:column;}

.mypage-simsa-top{flex-direction:column;gap:15px;}
.mypage-simsa-top > div{height:auto;flex-direction:row;padding:16px;}
.mypage-simsa-top > div > h3{font-size:16px;line-height:24px;}
.mypage-simsa-top > div > p{font-size:18px;line-height:26px;}
.mypage-base{border:0;padding:0;border-radius:0;box-shadow:none;word-break:break-all;}

.view-card{padding:0;border:0;box-shadow:none;border-radius:0;}
.view-card table colgroup{display:none}
.view-card table tr{display:block;}
.view-card table td{width:100%;display:block;font-size:16px;line-height:24px;height:auto;padding: 10px;min-height:40px;text-align:center;}
.view-card table th{width:100%;display:block;padding: 10px;}
.view-card table td .type-wrap{justify-content:center;}
.view-table-down{flex-direction:column;gap:10px;padding:10px 0;align-items: flex-end;text-align:left;}
.view-table-down > div{width:100%;}
.view-table-down > div > span{display:none;}

.mypage-simsalist{border-radius:0;overflow:unset;}
.mypage-simsalist-contents{padding:0;border:0;box-shadow:none;border-radius:0;}
.mypage-simsalist-contents table{padding:10px;}
.mypage-simsalist-contents table colgroup{display:none}
.mypage-simsalist-contents table tbody{display:grid; grid-template-columns:1fr 1fr; gap:20px;padding:20px;}
.mypage-simsalist-contents table tr{display:block;border:1px solid #aaa;}
.mypage-simsalist-contents table td{width:100%;display:flex;height:auto;border:none;gap:10px;border-bottom:1px dashed #ddd;padding:0;min-height:40px;line-height:40px;}
.mypage-simsalist-contents table tr:first-child{display:none;}
.mypage-simsalist-contents table td::before {    content: attr(data-label); font-size:16px;line-height:24px; font-weight:500; width:100px;background:#eee;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mypage-simsalist-contents table td:has(span){border:none;padding:10px;}
.mypage-simsalist-contents table td:has(span)::before{display:none;}
.mypage-simsalist-contents table td:has(span) .badge{width:100%;}

.preview-images object{width:100%;height:600px;}

 }
@media (max-width: 767px){
.mypage-simsalist-contents table tbody{grid-template-columns:1fr; }
 .sub-menu { grid-template-columns: 1fr; } 
 .sub-title { flex-direction: column; gap: 16px; margin-bottom: 16px; } 
 .sub-title > div { width: 100%; justify-content: end; font-size: 14px; line-height: 22px; gap: 10px; } 
 .sub-title > div img { height: 12px; } 
 .sub-title > h1 { font-size: 24px; line-height: 32px; } 
 .sub-title > h1::before { width: 15px; height: 15px; left: -5px; } 
 .sub-wrap-title { font-size: 24px; line-height: 32px; margin: 50px auto; } 
  
 .patent-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 16px; } 
 .patent-grid > div > p { font-size: 16px; line-height: 24px; } 
 .main05-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } 
 .main05-grid > a { padding: 10px; } 
 .eq-grid { column-gap: 16px; } 
 .eq-box { padding: 16px; } 
 .eq-box > h3 { font-size: 18px; line-height: 26px; height: 52px; }
 .eq-detail-top-text > h3{font-size:20px;line-height:28px;}
 .eq-detail-back{margin-top:50px;height:45px;font-size:16px;line-height:24px;}
 
  .perf-write-link{display:grid;grid-template-columns:1fr 1fr;}
  .stat-top{flex-direction:column;align-items:center;gap:20px;}
  .sub-wrap #liquidChart1{width:250px;height:250px;}
  
   .user-stat .stat-table table tr th{padding:15px 5px; }
   .user-stat .stat-table table tr td{padding:15px 5px; }
   .user-stat .stat-table table tr td:last-child{padding:15px 10px;}
   
   .stat-write-tr{flex-direction:column;}
   .stat-write-th{width:100%;border-bottom:none;}
   .stat-write-box{padding:0;box-shadow:none;border-radius:0;border:none;}

	.mypage-base > div > div{flex-direction:column;}
   .mypage-base > div > div > h3{width:100%;height:auto;min-height:unset;padding:10px;font-size:16px;line-height:24px;border-bottom:none;}
   .mypage-base > div > div > p{width:100%;min-height:unset;height:auto;}
   
   .login-box{padding:16px;}
   .login-box > h1{font-size:24px;line-height:32px;}
   .login-box > button{heighT:50px;font-size:16px;line-height:24px;}
   
   .modify{padding:16px;}
   .modify > label > div{flex-direction:column;}
   
 
   
 }
@media (max-width: 479px){
 .eq-grid { grid-template-columns: 1fr; row-gap: 30px; } 
 .company-grid { grid-template-columns: repeat(2, 1fr); } 
 .stat-top-right > div.active .bar-chart-mini-wrap{padding:20px 0;}
 .main05-grid > a{font-size:16px;line-height:24px;word-break:break-all;}
  .main05-title{font-size:18px;line-height:26px;}
  .preview-images object{width:100%;height:500px;}
 }