@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');


html {position: relative; height: 100%; min-height: 100%; margin: 0; font-size: 62.5%; -webkit-text-size-adjust:none;}
@media screen and (min-width: 0\0) {
   /* IE 9, IE 10, IE 11 */
   :root,
   html {font-size: 10px;}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE 10, IE 11 */
   :root,
   html {font-size: 10px;}
}
body {position: relative; width: 100%; height: auto; min-height: 100%; font-family: '맑은 고딕', 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo', 'sans-serif'; overflow-y: auto; overflow-x: hidden; letter-spacing: -0.5px;  background-color: #f1f1f1 !important;}
*, *::before, *::after {padding:0; margin:0; box-sizing: border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;font-family: '맑은 고딕', 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo', 'sans-serif';  letter-spacing: -0.5px;}
input,button,textarea,select{font-family: '맑은 고딕', 'Malgun Gothic', 'Noto Sans KR', 'Apple SD Gothic Neo', 'sans-serif'; letter-spacing: -0.5px;}
ul {list-style-type: none; padding-inline-start: 0;}
a {text-decoration: none;}
img {width: 100%; display: block;}
table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;}
th, td{padding:0;}
button {border: none; background:none; cursor: pointer;}
input:focus, select:focus, option:focus, textarea:focus, button:focus{outline: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type="text"], input[type="number"] {width: 100%; min-width: 50px; height: 40px; border-radius: 8px; border: 1px solid #ccc; color: #222; font-size: 14px; font-weight: 700; text-align: center;}
input[type="text"]::placeholder, input[type="number"]::placeholder {color:#222;}
input.unit {width: calc(100% - 20px); margin-right: 3px;}
.unit_txt {display: inline-block;}
textarea:focus {outline:none;}
select {width: 100%; min-width: 70px; height: 40px; border-radius: 8px; border: 1px solid #ccc; background: url('../images/select_arrow_x3.png') no-repeat 88% 50% / 12px 8px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; padding-left: 15px; color: #222; font-size: 14px; font-weight: 700;}


.select .hide{display: none;} 
.select .show{display: block;}
.select {position: relative; padding-left: 15px; width: 100%; height: 40px; border-radius: 8px; border:1px solid #ccc; background-color: #fff; background: url('../images/select_arrow_x3.png') no-repeat 88% 50% / 12px 8px; cursor: pointer; font-size: 14px; font-weight: 700; color:#222; display: flex; align-items: center;}
.select.active {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border:1px solid #1ebfc2; background-color: #eaf7f7;}
.select ul{ position: absolute; top: 38px; left: -1px; width: calc(100% - -2px); border:1px solid #1ebfc2; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #fff; cursor: pointer; overflow: hidden; z-index: 9;}
.select ul li{padding: 10px; font-size: 14px; font-weight: 700; color:#222; white-space:nowrap;}
.select ul li:hover{background-color: #1ebfc2; color:#fff;}
.top_info_select {width: 100%; min-width: 70px; max-width: 290px; height: 50px; border-radius: 8px; border: 1px solid #2cb671; background: url('../images/select_arrow2_x3.png') #fff no-repeat 93% 50% / 12px 8px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; padding-left: 18px; color: #2cb671; font-size: 14px; font-weight: 700; box-shadow: 2px 4px 10px rgb(0 0 0 / 10%);  background-color: #fff}
.top_info_select.active {border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-color: #f3f9f6; border: 1px solid #2cb671;}
.top_info_select ul {top: 48px; border:1px solid #2cb671;}
.top_info_select ul li:hover{background-color: #2cb671; color:#fff;}

.select.active.gray {border:1px solid #aaa; background-color: #fafafa;}
.select.gray ul {border:1px solid #aaa;}
.select.gray ul li:hover {background-color: #aaa;}



.radio_wrap {display: flex;}
.radio_wrap .title {padding: 0 !important; margin-right: 20px; font-weight: 700;}
.radio_box {display: inline-block; margin-right: 34px; }
.radio_box:last-child {margin: 0;}
.radio_box input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.radio_box input[type="radio"] + label {display: inline-block;  position: relative; padding-left: 30px; cursor: pointer; font-weight: 700; -webkit-user-select: none;  -moz-user-select: none; -ms-user-select: none; }
.radio_box input[type="radio"] + label h4 {font-weight: 700; white-space: nowrap;}
.radio_box input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: -3px; width: 24px; height: 24px; text-align: center; background: #d3d3d3; border-radius: 100%; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);}
.radio_box input[type="radio"] + label:after {content: ''; position: absolute; top: 4px; left: 7px; width: 10px; height: 10px; background: #fff; border-radius: 100%;}
.radio_box input[type="radio"] + label:active:before,
.radio_box input[type="radio"]:checked + label:active:before  {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.radio_box input[type="radio"]:checked + label:before {background: #2cb671;}
.radio_box input[type="radio"]:checked + label:after {content: ''; position: absolute; top: 4px; left: 7px; width: 10px; height: 10px; background: #fff; border-radius: 100%;}

input[type="date"] {border: 1px solid #ccc; font-size: 14px; color:#222; font-weight: 700; padding: 9px 14px; border-radius: 8px;}


.option_check_wrap {width: 100%; max-width: 260px; border: 1px solid #ddd; padding: 14px;}
.option_check {margin-bottom: 6px; display: flex;}
.option_check input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; cursor: pointer; width: 14px; height: 14px; outline: 0; border: 1px solid #000; vertical-align: middle; margin-right: 6px; display: inline-block;}
.option_check input[type="checkbox"]::after {border: solid #000; border-width: 0 1px 1px 0; content: ''; display: none; width: 4px; height: 8px; top: 1px;   left: 4px; position: relative; transform: rotate(45deg);}
.option_check input[type="checkbox"]:checked {background: #fff;}
.option_check input[type="checkbox"]:checked::after {display: block;}
.option_check input[type="checkbox"] + label {vertical-align: middle; cursor: pointer; display: inline-block;}
.option_check input[type="checkbox"] + label h5 {}
.option_check_wrap .option_check:nth-child(1) input[type="checkbox"], .option_check_wrap .option_check:nth-child(1) input[type="checkbox"]::after {border-color: #8dc63f;}
.option_check_wrap .option_check:nth-child(2) input[type="checkbox"], .option_check_wrap .option_check:nth-child(2) input[type="checkbox"]::after {border-color: #e71c1c;}
.option_check_wrap .option_check:nth-child(3) input[type="checkbox"], .option_check_wrap .option_check:nth-child(3) input[type="checkbox"]::after {border-color: #0080c8;}
.option_check_wrap .option_check:nth-child(4) input[type="checkbox"], .option_check_wrap .option_check:nth-child(4) input[type="checkbox"]::after {border-color: #329ced;}
.option_check_wrap .option_check:nth-child(5) input[type="checkbox"], .option_check_wrap .option_check:nth-child(5) input[type="checkbox"]::after {border-color: #7e28ff;}
.option_check_wrap .option_check:nth-child(6) input[type="checkbox"], .option_check_wrap .option_check:nth-child(6) input[type="checkbox"]::after {border-color: #ffcc00;}
.option_check_wrap .option_check:nth-child(7) input[type="checkbox"], .option_check_wrap .option_check:nth-child(7) input[type="checkbox"]::after {border-color: #c4b36d;}
.option_check_wrap .option_check:nth-child(8) input[type="checkbox"], .option_check_wrap .option_check:nth-child(8) input[type="checkbox"]::after {border-color: #e26c1e;}
.option_check_wrap .option_check:nth-child(9) input[type="checkbox"], .option_check_wrap .option_check:nth-child(9) input[type="checkbox"]::after {border-color: #ffad0f;}
.option_check_wrap .option_check:nth-child(10) input[type="checkbox"], .option_check_wrap .option_check:nth-child(10) input[type="checkbox"]::after {border-color: #43df82;}
.option_check_wrap .option_check:nth-child(11) input[type="checkbox"], .option_check_wrap .option_check:nth-child(11) input[type="checkbox"]::after {border-color: #43dfcb;}
.option_check_wrap .option_check:nth-child(12) input[type="checkbox"], .option_check_wrap .option_check:nth-child(12) input[type="checkbox"]::after {border-color: #46bff7;}


input[type="date"]{position: relative;}
input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button {display: none;} 
input[type="date"]::-webkit-calendar-picker-indicator {background: transparent; z-index: 1;} 
input[type="date"]:after{position: absolute; top:50%; right:10px; content: ''; width: 16px; height:17px; background: url('../images/calendar_x3.png') no-repeat center / cover; transform: translateY(-50%); z-index: 0;}





form .hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
button.save_btn {height: 50px; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 290px; border-radius: 10px; margin: 20px auto 5px;}
button.save_btn h4 {color:#fff; font-weight: 700;}
button.save_btn.color1 {background-color: #2cb671;}
button.save_btn.color2 {background-color: #45c8cb;}
button.save_btn.color3 {background-color: #fab232;}
button.save_btn.color4 {background-color: #ff891a;}
button.save_btn.color5 {background-color: #ababab;}

button.small_btn {background-color: #2cb671; border-radius: 8px; padding: 11px 16px; margin: 0 !important; height: 40px; vertical-align: middle; display: flex; align-items: center; flex-shrink: 0;}

button.small_btn h4 {color:#fff; font-weight: 700; display: inline-block; vertical-align: middle;}
button.small_line_btn {border: 1px solid #ccc; border-radius: 8px; padding: 7px 16px; margin: 0 0 0 10px !important; height: 40px; display: flex; align-items: center;}
button.small_line_btn h4 {font-weight: 700; display: inline-block; vertical-align: middle; word-break: keep-all;}
button.small_line_btn2.on {background-color: #000; border: 1px solid #000; } 
button.small_line_btn2.on h4 {color:#fff;}


button.small_line_btn2 span.arrow {width: 6px; height: 6px; position: relative; display: inline-block; transform: translate(-50%, -50%); background: none; transform: rotate(-225deg);
margin-left: 14px; top: -1px;}
button.small_line_btn2 span.arrow::before {content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #222; border-right: 0; border-bottom: 0;}
button.small_line_btn2.on span.arrow::before {border: 1px solid #fff; border-right: 0; border-bottom: 0;}




.container {overflow: hidden;}
.contents {padding: 20px 40px 25px;}
.sub_contents {width: 100%; max-width: 1248px; padding: 20px 14px; margin: 0 auto;}
.section {position: relative;}
.m {display: none;}
.roboto {font-family:'Roboto', 'sans-serif';}

ul::-webkit-scrollbar, div::-webkit-scrollbar, form::-webkit-scrollbar {width: 5px; height: 5px;}
ul::-webkit-scrollbar-thumb, div::-webkit-scrollbar-thumb, form::-webkit-scrollbar-thumb {background-color: #aaa; border-radius: 50px; border-radius: 10px; }
ul::-webkit-scrollbar-track, div::-webkit-scrollbar-track, form::-webkit-scrollbar-track {background:none;}

.group {display: flex; justify-content: space-between; margin-right: 20px; width: 100%;}
.group:last-child {margin-right: 0;}
.column {display: flex; flex-flow: column; width: 100%;}
.inner {display: flex; flex-flow: column; justify-content: space-between; height: 100%;}
.inner .top {}
.inner .bottom {display: flex; justify-content: space-between; margin-top: 18px;}
.brick {background-color: #fff; box-shadow: 2px 4px 10px rgb(0 0 0 / 10%); padding: 20px; border-radius: 10px; margin-bottom: 20px; margin-right: 20px; width: 100%; position: relative;}
.brick:last-child {margin-right: 0;}
.brick .title {padding: 2px 0 20px;}
.brick .title .arrow {display: inline-block; position: relative; border: 1px solid #ccc; border-radius: 50%; width: 23px; height: 23px; transform: rotate(-225deg); vertical-align: middle; margin-left: 2px;}
.brick .title .arrow span {width: 6px; height: 6px; position: absolute; display: inline-block; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.brick .title .arrow span::before {content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #b0b0b0; border-right: 0; border-bottom: 0;}
.sub_contents .top_info .row_wrap {flex-flow: column;}
.row_wrap {display: flex; justify-content: space-between;}
.row_wrap .column {margin-right: 10px;}
.row_wrap .column:last-child {margin-right: 0;}
.brick .half_wrap {display: flex;}
.brick .half {width: 50%; margin-right: 30px;}
.brick .half:last-child {margin-right: 0;}

.row1 .row_wrap, .row2 .row_wrap, .row3 .row_wrap {flex-wrap: wrap; justify-content: flex-start;}
.row1 button, .row2 button, .row3 button {margin: 5px auto 5px;}
.row1 .box3 {flex: 0 1 calc(33.3% - 14px);  margin-left: 7px; margin-right: 7px; margin-bottom: 15px;}
.row1 .box3:nth-child(3n) {flex: 0 1 calc(33.3% - 7px); margin-right: 0;}
.row1 .box3:nth-child(3n+1), .row1 .box3:nth-child(1) {flex: 0 1 calc(33.3% - 7px); margin-left: 0;}
.row2 .box3 {flex: 0 1 calc(25% - 14px); margin-left: 7px; margin-right: 7px; margin-bottom: 15px;}
.row2 .box3:nth-child(4n) {flex: 0 1 calc(25% - 7px); margin-right: 0;}
.row2 .box3:nth-child(4n+1), .row2 .box3:nth-child(1) {flex: 0 1 calc(25% - 7px); margin-left: 0;}

.row3 .box3 {flex: 0 1 calc(20% - 14px); margin-left: 7px; margin-right: 7px; margin-bottom: 15px;}
.row3 .box3:nth-child(5n) {flex: 0 1 calc(20% - 7px); margin-right: 0;}
.row3 .box3:nth-child(5n+1), .row3 .box3:nth-child(1) {flex: 0 1 calc(20% - 7px); margin-left: 0;}



.box1 {background-color: #f0faf6; border: 1px solid #e1f0ea; border-radius: 10px; padding: 10px; text-align: center;}
.box2 {background-color: #f8f8f8; border: 1px solid #f0f0f0; border-radius: 10px; padding: 10px; text-align: center; height: 160px;}
.box3 {border-radius: 10px; text-align: center; overflow: hidden; width: 100%; margin-right: 5px;}
.box3:last-child {margin-right: 0;}
.box3 p { color:#fff; font-weight: 700; padding: 6px 0;}
.box3 h3 {padding: 15px 0; height: calc(100% - 30px);}
.box3 h1 {padding: 15px 0; height: calc(100% - 30px);}
.box3 .field {padding: 12px 20px !important;}
.box3 .field span {margin-left: 2px;}


.box3.color1 {border: 1px solid #2cb671; }
.box3.color1 p {background-color: #2cb671;}
.box3.color2 {border: 1px solid #45c8cb; }
.box3.color2 p {background-color: #45c8cb;}
.box3.color3 {border: 1px solid #d8e4df; }
.box3.color3 p {background-color: #fff; border-bottom: 1px solid #d8e4df; color:#222;}
.box3.color3 h1 {background-color: #f0faf6;}
.box3.color4 {border: 1px solid #eae6df; }
.box3.color4 p {background-color: #fff; border-bottom: 1px solid #eae6df; color:#222;}
.box3.color4 h1 {background-color: #fffbf4;}
.box3.color5 {border: 1px solid #d5e6df;}
.box3.color5 h4 {background-color: #daf6eb; border-bottom: 1px solid #d5e6df; font-weight: 700; padding: 8px 0;}
.box3.color5 h4:nth-child(2) {background-color: #fff; border-bottom: 0;}
.box3.color5 .txt {background-color: #f6fdfa; font-size: 2.2rem; font-weight: 700; color:#222; padding: 15px 0; height: calc(100% - 30px);}
.box3.color6 {border: 1px solid #eee6da;}
.box3.color6 h4 {background-color: #fff6e9; border-bottom: 1px solid #eee6da; font-weight: 700; padding: 8px 0;}
.box3.color6 h4:nth-child(2) {background-color: #fff; border-bottom: 0;}
.box3.color7 {border: 1px solid #d6ebeb;}
.box3.color7 h4 {background-color: #e3f6f6; border-bottom: 1px solid #d6ebeb; font-weight: 700; padding: 8px 0;}
.box3.color7 h4:nth-child(2) {background-color: #fff; border-bottom: 0;}
.box3.color8 {border: 1px solid #eee6da;}
.box3.color8 h4 {background-color: #ffeddd; border-bottom: 1px solid #eae0d8; font-weight: 700; padding: 8px 0;}
.box3.color8 h4:nth-child(2) {background-color: #fff; border-bottom: 0;}
.box3.color9 {border: 1px solid #e8e8e8;}
.box3.color9 h4 {background-color: #fafafa; border-bottom: 1px solid #e8e8e8; font-weight: 700; padding: 8px 0;}
.box3.color9 h4:nth-child(2) {background-color: #fff; border-bottom: 0;}





.brick.list {padding: 20px 20px 13px;}
.brick.list table {border-collapse: separate; border-spacing: 0 7px; width: 100%; margin-top: -6px;}
.brick.list table th {padding-bottom: 8px;}
.brick.list table th p, .brick.list table th h4 {font-weight: 700; color:#888;}
.brick.list table tbody tr {border-radius: 10px; box-shadow: 0 0 0 1px #e8e8e8; -moz-box-shadow: 0 0 0 1px #e8e8e8; -webkit-box-shadow: 0 0 0 1px #e8e8e8;}
.brick.list table tbody td {padding: 10px 5px; text-align: center; vertical-align: middle;}
.brick.list table tbody td.row_title p, .brick.list table tbody td.row_title h4 {font-weight: 700; display: inline-block; vertical-align: middle;}
.brick.list table tbody td.row_title span.light {display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 9px; background-color: #2cb671; cursor: pointer; flex-shrink: 0;}
.brick.list table tbody td.row_title span.arrow {width: 6px; height: 6px; position: relative; display: inline-block; transform: rotate(-225deg); margin-left: 5px;}
.brick.list table tbody td.row_title span.arrow::before {content: ''; position: absolute; width: 100%; height: 100%; border: 1px solid #b0b0b0; border-right: 0; border-bottom: 0;}
.brick.list table tbody td.state p {border-radius: 50px; color:#fff; padding: 7px 0; text-align: center; max-width: 70px; margin: 0 auto;}
.brick.list table tbody td.state h4 {border-radius: 50px; color:#fff; padding: 6px 0; text-align: center; max-width: 70px; margin: 0 auto;}
.brick.list table tbody td.state .color1 {background-color: #45c8cb;}
.brick.list table tbody td.state .color2 {background-color: #fab232;}
.brick.list table tbody td.state .color3 {background-color: #2cb671;}
.brick.list table tbody td.state .color4 {background-color: #ff891a;}
.brick.list table tbody td.state .color5 {background-color: #c5c5c5;}
.tb2 {width: 100%; border: 1px solid #eee; border-radius: 10px; overflow: hidden;}
.tb2 table {width: 100%;}
.tb2 table th {background-color: #fafafa; border-bottom: 1px solid #eee; padding: 6px 8px; vertical-align: middle;}
.tb2 table th h4 {font-weight: 700;}
.tb2 table td {padding: 10px 8px;}

.tb3 {border: 1px solid #d5e6df;}
.tb3 table th {background-color: #daf6eb; border-bottom: 1px solid #d5e6df;}
.tb4 {border: 1px solid #e5e9e9;}
.tb4 table th {background-color: #eaf7f7; border-bottom: 1px solid #d6ebeb; vertical-align: middle; padding: 9px 2px;}
.tb4 table h4 {font-weight: 700; text-align: center;}
.tb4 table td {border-bottom: 1px solid #eee; padding: 10px 5px; vertical-align: middle;}
.tb4 table tr:last-child td {border: 0;}
.tb4 table th:first-child, .tb4 table td:first-child {padding: 10px 5px 10px 20px; border-top-left-radius: 10px;}
.tb4 table th:last-child, .tb4 table td:last-child {padding: 10px 20px 10px 5px; border-top-right-radius: 10px;}
.tb5 {border: 1px solid #ddd; margin-top: 0; margin-right: 10px !important;}
.tb5:last-child {margin-right: 0 !important;}
.tb5 table {height: 50px;}
.tb5 table td {padding: 3px 10px; text-align: center; vertical-align: middle;}
.tb5 table tr:last-child td:last-child {border-top: 1px solid #ddd;}
.tb5 table td.left_t {background-color: #fafafa; border-right: 1px solid #ddd; vertical-align: middle; text-align: left; padding: 0 18px;}
.tb5 table td h4 {font-weight: 700; word-break: keep-all;}
.tb5 table td.use, .tb5 table td.unused {cursor: pointer;}
.tb5 table td.use:hover, .tb5 table td.use.on {background-color: #ff891a;}
.tb5 table td.unused:hover, .tb5 table td.unused.on {background-color: #2cb671;}
.tb5 table td.use:hover h4, .tb5 table td.use.on h4, .tb5 table td.unused:hover h4, .tb5 table td.unused.on h4 {color:#fff;}

.data_table table {font-size: 14px; font-weight: 700; width: 100%; text-align: center; border-top: 1px solid #2cb671; color:#222; margin-bottom: 5px;}
.data_table table th {background-color: #fafafa; border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 11px 4px;}
.data_table table td {border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 11px 4px; vertical-align: middle;}
.data_table table th:last-child, .data_table td:last-child {border-right: 0;}



/** font **/
h1 {font-size: 18px; font-weight: 700; line-height: 22px; color:#222;}
h2 {font-size: 16px; font-weight: 700; line-height: 20px; color:#222;}
h3 {font-size: 15px; font-weight: 700; line-height: 19px; color:#222;}
h4 {font-size: 14px; font-weight: 400; line-height: 18px; color:#222;}
p {font-size:13px; font-weight: 400; line-height: 17px; color:#222;}
h5 {font-size: 12px; font-weight: 400; line-height: 16px; color:#222;}
h6 {font-size: 11px; font-weight: 400; line-height: 15px; color:#222;}


/** Pagination**/
.pagination {text-align: center; margin-top: 28px; margin-bottom: 40px;}
.pagination span {margin: 0 10px;}
.pagination a {font-size: 14px; color:#222; font-weight: 700; width: 10px; margin: 0 7px; line-height: 22px; display: inline-block; vertical-align: top; vertical-align: middle;}
.pagination a:hover {color:#2cb671;}
.pagination a.on {color:#fff; background-color: #2cb671; border-radius: 3px; width: 30px; height: 30px;  line-height: 30px; vertical-align: middle; margin: 0;}
.pagination a.first {background: url('../images/pagination_first.png') no-repeat center / 12px 11px;}
.pagination a.prev {background: url('../images/pagination_prev.png') no-repeat center / 6px 11px;}
.pagination a.next {background: url('../images/pagination_next.png') no-repeat center / 6px 11px;}
.pagination a.last {background: url('../images/pagination_last.png') no-repeat center / 12px 11px;}
.pagination a.first, .pagination a.prev, .pagination a.next, .pagination a.last {font-size: 0;}
.pagination a.move {width: 12px; margin: 0 6px;}
.pagination a.move:hover {border: none;}


/** header **/
.header {width: 100%;}
.header_con {width:100%; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; background-color: #2cb671;}
.header_con .logo a {display: inline-block; background: url('../images/magma_logo_x3.png') no-repeat center / 152px 44px; width: 152px; height: 44px;}
.header_con .logo a img {width: 100%; max-width: 69px;}
.header_con .navigator .header-menu {display: inline-block; vertical-align: middle;}
.header_con .navigator .header-menu li {display: inline-block; padding: 34.5px 25px; vertical-align: top; position: relative; cursor: pointer;}
.header_con .navigator .header-menu li a {font-size: 16px; font-weight: 700; color:#fff;}
.header_con .navigator .header-menu li.on {overflow: hidden;}
.header_con .navigator .header-menu li.on:hover {overflow:visible;}
.header_con .navigator .header-menu li.on:hover a {color:#ffe5ad;}
.header_con .navigator .header-menu li.on:hover .sub_menu {opacity: 1; visibility: visible; top: 75px; transition: opacity 300ms ease, top 600ms ease;}
.header_con .navigator .header-menu li.on .sub_menu {opacity: 0; background-color: #fff; border: 1px solid #2cb671; padding:0; width: 200px; position: absolute; left: 0; top: 60px; box-shadow: 6px 4px 17px rgb(0 0 0 / 15%); text-align: center; z-index: 10;}
.header_con .navigator .header-menu li.on .sub_menu li {display: block; padding: 15px 0px;}
.header_con .navigator .header-menu li.on .sub_menu li:hover {background-color: #2cb671;}
.header_con .navigator .header-menu li.on .sub_menu li a {font-size: 15px; font-weight: 700; color:#222;}
.header_con .navigator .header-menu li.on .sub_menu li:hover a{color:#fff;}
.header_con .navigator .header-menu li.on .sub_menu li .depth {display: none; width: 100%; position: absolute; top: 0; right: -198px; background-color: #fff;; border: 1px solid #2cb671; box-shadow: 6px 4px 17px rgb(0 0 0 / 15%);}
.header_con .navigator .header-menu li.on .sub_menu li.cate1:hover .depth1 {display: inline-block;}
.header_con .navigator .header-menu li.on .sub_menu li.cate2:hover .depth2 {display: inline-block;}
.header_con .navigator .header-menu li.on .sub_menu li .depth {text-align: left; padding: 15px 22px;}
.header_con .navigator .header-menu li.on .sub_menu li .depth li {background-color: #fff; padding: 6px 0;}
.header_con .navigator .header-menu li.on .sub_menu li .depth li a {font-size: 14px; color:#222;}
.header_con .navigator .header-menu li.on .sub_menu li .depth li a:hover {color:#2cb671;}
.header_con .right_menu {display: flex; align-items: center;}
.header_con .right_menu .logout {background-color: #139152; padding: 11px 15px; border-radius: 50px; height: 40px;}
.header_con .right_menu .logout p {color:#b6e4cd;}

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


.header .m_menu_btn {display: inline-block; cursor: pointer; display: none;}
.header .m_menu_btn .menu-trigger {position: relative; width: 16px; height: 15px;  margin-top: -2px;}
.header .m_menu_btn .menu-trigger span {position: absolute; right: 0; width: 100%; height: 2px; background-color: #fff; border-radius: 100px;}
.header .m_menu_btn .menu-trigger span:nth-child(1) {top: 0;}
.header .m_menu_btn .menu-trigger span:nth-child(2) {top: 6px; width: 80%;}
.header .m_menu_btn .menu-trigger span:nth-child(3) {bottom: 0;}
.header .modal {display: none; position: fixed; width: 100%; height: 100vh; top: 0; right: 0; bottom: 0; z-index: 999; background:#2cb671;}
.header .modal .header_close_btn {display: inline-block; width: 24px; height: 24px;  position: absolute;  right: 20px;  top: 24px; cursor: pointer; z-index: 1;}
.header .modal .header_close_btn span { display: inline-block; background: #fff; height: 24px;  position: relative; width: 1px; transform: rotate( 135deg); left: 10px;}
.header .modal .header_close_btn span:after {content: ""; background: #fff; height: 1px; position: absolute; top: 12px;  left: -11px; width: 24px;}
.header .modal .container {height: 100vh; overflow-y: auto;}
.header .modal ul#myMenu {position: relative; top: 50%; transform: translateY(-52%); text-align: center;}
.header .modal li {white-space: nowrap;}
.header .modal li.category {margin-bottom: 12px; cursor: pointer; line-height: 30px;}
.header .modal li.category a.cate_txt {font-size: 16px; font-weight: 600; color: #fff;} 
.header .modal ul.sub_menu {margin-top: 6px; display: none;}
.header .modal ul.sub_menu li {padding:0;}
.header .modal ul.sub_menu li a {font-size: 14px; font-weight: 700; color:#fff; line-height: 24px; display: inline-block; position: relative;}
.header .modal li a span {display: inline-block;  z-index: 1;  height: 3px; width: 0%;  background-color: #fff; position: absolute; bottom: 1px; left: 0;}
.header .modal li a:hover {color:#fff; transition: all 0.8s;} 
.header .modal li a:hover span { width: 100%; transition: all 0.8s;} 
.header .modal li a .circle {display: inline-block;  width: 12px; height: 12px; background-color: #ec6617; border-radius: 50%; position: absolute; right: -30px; top: 0; opacity: 0; }
.header .modal li a:hover .circle {opacity: 1; transition: all 0.8s;}
.header .modal ul.sub_menu .m_depth {display: none;}
.header .modal ul.sub_menu .m_depth li a {color:#bcddcd; font-weight: 400;}


/** footer **/
.footer_wrap {background-color: #3f3f3f;}
.footer_wrap .contents {padding-top: 35px; padding-bottom: 32px; display: flex; align-items: flex-start;}
.footer_wrap .ft_logo {background: url('../images/ft_logo_x3.png') no-repeat center / 152px 44px; width: 152px; height: 44px;}
.footer_wrap .txt {margin-left: 80px;}
.footer_wrap .txt li {padding-bottom: 4px;}
.footer_wrap .txt li p {color:#888; display: inline-block;}
.footer_wrap .txt li p strong {color:#bbb; font-weight: 400;}
.footer_wrap .txt li p span {color:#555; margin: 0 14px;}


/** Sub Page - TAB **/
.sub_tab {background-color: #fff; border-radius: 10px; overflow: hidden; box-shadow: 2px 4px 10px rgb(0 0 0 / 10%); margin-bottom: 20px;}
.sub_tab ul {display: flex; justify-content: space-around; height: 58px;}
.sub_tab ul li { text-align: center; padding: 0 10px; width: 100%; border-right: 1px solid #eee;}
.sub_tab ul li:hover, .sub_tab ul li.active {background-color: #2cb671;}
.sub_tab ul li:hover h4, .sub_tab ul li.active h4 {color:#fff;}
.sub_tab ul li:first-child, .sub_tab ul li:last-child {border-right: 0;}
.sub_tab ul li a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.sub_tab ul li a h4 {font-weight: 700; word-break: keep-all;}
.sub_tab ul li.emphasis {background-color: #373f3b;}
.sub_tab ul li.emphasis h4 {color:#fff;}
.sub_tab ul li.first {border-right: 1px solid #eee;}

.brick_tab {display: flex;}
.brick_tab li {background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 10px; padding: 0 10px; margin-right: 10px; text-align: center; width: 100%; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.brick_tab li:last-child {margin-right: 0;}
.brick_tab li:hover, .brick_tab li.active {background-color: #2cb671; border: 1px solid #2cb671;}
.brick_tab li:hover h4, .brick_tab li.active h4 {color:#fff;}
.brick_tab li h4 {font-weight: 700;}
.brick_tab li.emphasis {background-color: #daf6eb; border: 1px solid #d5e6df;}
.brick_tab li.emphasis:hover, .brick_tab li.emphasis.active {background-color: #2cb671; border: 1px solid #2cb671;}
.brick_tab li.emphasis:hover h4, .brick_tab li.emphasis.active h4 {color:#fff;}
.brick_tab li.emphasis h4 {color:#222;}



/** Sub Page - sub title **/
.brick .ic_title {display: flex; align-items: center; margin-bottom: 20px;}
.brick .ic_title .icon {width: 41px; height: 41px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 11px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.brick .ic_title .icon.col1 {background-color: #2cb671;}
.brick .ic_title .icon.col2 {background-color: #45c8cb;}
.brick .ic_title .icon.col3 {background-color: #fab232;}
.brick .ic_title .icon.col4 {background-color: #ff891a;}
.brick .ic_title .icon.col5 {background-color: #aaa;}
.brick .ic_title .icon span {display: inline-block; width: 25px; height: 22px;}
.brick .ic_title .icon span.ic1 {background: url('../images/brick_title_ic1_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title .icon span.ic2 {background: url('../images/brick_title_ic2_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title .icon span.ic3 {background: url('../images/brick_title_ic3_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title .icon span.ic4 {background: url('../images/brick_title_ic4_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title .icon span.ic5 {background: url('../images/brick_title_ic5_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title .icon span.ic6 {background: url('../images/brick_title_ic6_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title .icon span.ic7 {background: url('../images/brick_title_ic7_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title .icon span.ic8 {background: url('../images/brick_title_ic8_x3.png') no-repeat center / 25px 22px;}
.brick .ic_title h2 {display: inline-block; vertical-align: middle; word-break: keep-all;}








@media (max-width: 1860px) {
   .row_wrap .column {margin-right: 6px;}
   .header_con .navigator .header-menu li {padding: 34.5px 20px;}
}



@media (max-width: 1600px) {
   .header_con .navigator .header-menu li {padding: 34.5px 9px;}
}



@media (max-width: 1440px) { 
   .header_con .navigator .header-menu {display: none;}
   .header .m_menu_btn {display: inline-block; margin-left: 20px;}
   .header_con {padding: 12px 40px;}
   .header_con .logo a {background: url('../images/magma_logo_x3.png') no-repeat center / 104px 30px; width: 104px; height: 30px;}




}

@media (max-width: 1199px) { 
   .radio_box {margin-right: 20px;}
   .option_check_wrap {width: 210px; flex-shrink: 0;}

}


@media (max-width: 1199px) { 
   html {font-size: 46.5%;}
   .contents {padding: 20px 14px 25px;}
   .brick {margin-bottom: 14px; margin-right: 14px;}


   .header_con {padding: 12px 14px;}
   .header_con .right_menu .logout {padding: 8px 15px; height: 34px;}
   .header_con .right_menu .global .language {padding: 6px 8px; margin-left: 6px; height: 34px;}
   .header_con .right_menu .global .language span {background: url('../images/language_x3.png') no-repeat center / 18px 18px; width: 18px; height: 18px;}

   .tb5 table td.left_t {padding: 0 10px;}
   .header_con .right_menu .global .language .global_menu {width: 77px;}



}



@media (max-width: 1024px) { 
   .pc {display: none;}
   .m {display: inline-block;}




}

@media (max-width: 959px) { 
   .footer_wrap .txt {margin-left: 40px;}
   .footer_wrap .txt li p span {margin: 0 8px;}
   .select.top_info_select {max-width: 100%; background: url('../images/select_arrow2_x3.png') #fff no-repeat 97% 50% / 12px 8px;}

}



@media (max-width: 767px) {
   .footer_wrap .contents {flex-flow: column;}
   .footer_wrap .txt {margin-left: 0; margin-top: 20px;}

   .brick .ic_title .icon {width: 35px; height: 35px; margin-right: 6px;}
   .brick .ic_title {margin-bottom: 14px;}

   .brick_tab li {height: 42px; padding: 0 6px;}

   .box3 .field {padding: 8px 10px !important;}

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

   .option_check_wrap {order: 1; width: 100%; min-width: 100%; display: flex; flex-flow: wrap; margin-bottom: 15px;}
   .option_check {margin-right: 20px;}

   .pagination a.mo {display: none;}

}



@media (max-width: 640px) {
   html {font-size: 40.5%;}
   .footer_wrap .txt li {margin-bottom: 8px;}
   .footer_wrap .txt li p {display: block; line-height: 20px;}
   .footer_wrap .txt li p span {display: none;}

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

   h1 {font-size: 16px; line-height: 20px;}
   h4, input[type="text"], input[type="number"], select {font-size: 13px; line-height: 17px;}

   .box3 h1 {padding: 10px 0;}

   .select.top_info_select {max-width: 100%; background: url('../images/select_arrow2_x3.png') #fff no-repeat 96% 50% / 12px 8px;}

}





@media (max-width: 479px) {
   
   select {padding-left: 10px;}
   
   .tb4 table td {padding: 10px 2px;}
   .tb2 table th {padding: 6px 2px;}
   
   .select.top_info_select {max-width: 100%; background: url('../images/select_arrow2_x3.png') #fff no-repeat 94% 50% / 12px 8px;}

   .option_check_wrap {padding: 10px;}

   .radio_box input[type="radio"] + label {padding-left: 27px;}


   .pagination a.move {margin: 0 3px;}
}



@media (max-width: 374px) {
   .header_con .right_menu .logout {padding: 8px 6px;}
   .header_con .right_menu .global .language {margin-left: 4px;}
   .header_con .right_menu .global .language h4 {padding: 0 4px;}
   .header_con .right_menu .global .language .global_menu {width: 67px;}
   .header .m_menu_btn {margin-left: 8px;}
   .brick.list table th p, .brick.list table th h4 {font-size: 13px;}
   .brick.list table th {padding-bottom: 2px;}
   .brick.list table tbody td {padding: 10px 1px;}
   .brick.list table tbody td.row_title span.light {margin-right: 4px; width: 16px; height: 16px;}
   .brick.list table tbody td.row_title h4, .brick.list table tbody td.state h4 {font-size: 13px; line-height: 16px;}
   .brick.list table tbody td.row_title span.arrow {margin-left: 2px;}

   .box3.color5 h4 {font-size: 13px;}
   .box3 .field {padding: 8px 5px !important;}

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

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

   .radio_box {margin-right: 14px;}

   .pagination span { margin: 0 4px;}
   .pagination a.move {margin: 0 2px;}

}