oqpo-view/src/main/webapp/mobile/css/style.css

@font-face { font-family: 'NanumBarunGothic';src: url('../fonts/NanumBarunGothic.eot');src: url('../fonts/NanumBarunGothic.eot') format('embedded-opentype'),url('../fonts/NanumBarunGothic.woff') format('woff');}
* {margin: 0; padding: 0; box-sizing: border-box; text-align: center; font-family: 'NanumBarunGothic', 'serif'; list-style: none;}
section {}
body{background: #fff; position: relative; width: 100%; height: auto;}
.color-gray {color:#aaa;}
/* 팝업 */
section .popup { position: fixed; width: 100%; height: 100%; background: transparent; z-index: 11;}
section .popup .pop { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 70%; height: 250px; padding-top: 30px; background: #fff; border: 2px solid #000; border-top-left-radius: 10px; border-top-right-radius: 10px;}
section .popup .pop label.pop_label {position:relative; top:10px; font-size: 1.2rem;}
section .popup .pop .pop_line { width: 100%; height: 30px;}
section .popup .pop .pop_line label { font-size: 1.2rem; margin-left: 20px; float: left; width: auto; text-align: left;}
section .popup .pop .pop_line div {text-align: right; float: right; font-size: 1.2rem; margin-right: 20px; width: auto;}
section .popup .pop .popup_btn { position: absolute; background-color: #ccc; bottom: 0; width: 100%; height: 51px; border-top: 2px solid #000;}
section .popup .pop .popup_btn button { position: relative; float: left; width: 100%; height: 50px; font-size: 1rem; font-weight: 700; border-radius: 0px; border: none;}
section .popup .pop .popup_btn button.ok { width: 64%; border-left: 2px solid #000;}
section .popup .pop .popup_btn button.cancel {width: 36%;}


section .popup2 {position: fixed; width: 100%; height: 100%; background: rgba(200, 200,200, 0.8); z-index: 11;}
section .popup2 .content {position: fixed; z-index: 10; width:100%; background: #fff;}
section .popup2 .barcode {width: 100%;}
section .popup2 .barcode_area {width: 300px; height: 300px; margin: auto; background: #fff; border: 1px solid #000; margin-top: 10%;}
section .popup2 .barcode h1{text-align: left; width: 85%; font-size: 1.1rem; margin:auto; margin-top: 20%;}
section .popup2 .btn_barcode {margin-top: 20%;}
section .popup2 .btn_barcode button {width: 35%; height: 50px; font-size: 1rem;}
section .popup2 .pop { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 95%; height: 85%; background: #fff; border: 2px solid #000;}
section .popup2 .pop .header {position: relative; height: 50px; background: rgb(204, 225, 240); border-bottom: 1px solid #000;}
section .popup2 .pop .header .header_left {float: left; padding-top: 5px; padding-left: 15px;}
section .popup2 .pop .header .header_left label {font-size: 1.4rem;} 
section .popup2 .pop .header .header_right {float: right; padding-right: 10px;}
section .popup2 .pop .header .header_right button {border: none; background: transparent;}
section .popup2 .pop .header .header_right button img {width:30px; height:30px;}
section .popup2 .pop .search_bar {width: 100%; height: 50px; padding: 10px;}
section .popup2 .pop .search_bar input {width: 80%; height: 40px; float: left;}
section .popup2 .pop .search_bar button {float: right; border: none; padding-top:3px;}
section .popup2 .pop .search_bar button img {width: 30px; height: 30px;}
section .popup2 .pop .search_bar button.search {float: none; width: 50%; height: 35px; background:rgb(46, 46, 248); color: #fff; font-size: 1rem; padding: 0; border: 1px solid #000; margin: 0 auto;}
section .popup2 .pop .search_bar button.btn_blue {float: right; width: 100px; height: 35px; background:rgb(46, 46, 248); color: #fff; font-size: 1rem; padding: 0; border: 1px solid #000;}

section .popup2 .pop .popup_scroll {position: relative; width: 100%;height: 720px; overflow: auto;}
section .popup2 .pop .popup_scroll li {list-style: none; width: 99%; height: 50px; border: 1px solid #000; margin: 0 auto;}
section .popup2 .pop .popup_scroll li.row_2 {height: 80px;}
section .popup2 .pop .popup_scroll li .left {position: relative; float: left;}
section .popup2 .pop .popup_scroll li .left .check_box {width:30px; float:left; height:80px; padding-left:5px; padding-top:20px;}
section .popup2 .pop .popup_scroll li .left div {display: inline-block;}
section .popup2 .pop .popup_scroll li .left label{font-size: 2.5rem;}
section .popup2 .pop .popup_scroll li .left .thick {float: left; margin: 12px 0 0 10px; font-size: 1rem; text-align: left; width: 140px; font-weight: 600;}
section .popup2 .pop .popup_scroll li .left .nomal {float: left; margin: 15px 0px 0px 15px; font-size: 1.2rem; text-align: left; width: 100%;}
section .popup2 .pop .popup_scroll li .left .history {font-weight: 700; font-size: 2.4rem; margin-left: 20px;}
section .popup2 .pop .popup_scroll li .left .history input{width: 150px;}
section .popup2 .pop .popup_scroll li .scroll_left {float: left;}
section .popup2 .pop .popup_scroll li .scroll_left div {float: left; font-size: 0.8rem; font-weight: 700; width: auto; margin: 15px 10px;}
section .popup2 .pop .popup_scroll li .scroll_right {float: right;}
section .popup2 .pop .popup_scroll li .scroll_right button {width: 60px; height: 40px; padding: 0; background: rgb(198, 170, 250); border-radius: 10px; font-size: 0.8rem; margin:4px 10px;}
section .popup2 .pop .popup_scroll li .right {position: relative; display: flex; font-size: 1.6rem; font-weight: 700; float: left; top:20px;}
section .popup2 .pop .popup_scroll li .right .num {margin: 0 20px; width: auto;}
section .popup2 .pop .popup_scroll li .right button {padding: 5px; font-size: 1rem; border-radius: 0px;}
section .popup2 .pop .popup_scroll li .add button{float: right; width: 60px; height: 55px; margin: 12px 9px; border-radius: 10px; font-size: 1rem; background: rgb(198, 170, 250);}
section .popup2 .pop .content .line button {width: 40%; height: 35px;font-size: 1rem; padding: 0; margin: 0 10px;}
section .popup2	.list_line {width:98%; float:left; height:50px;display: inline-flex; margin:0 1%; font-size:12px;}
section .popup2 .border {border-bottom: 1px solid #000 !important;}
section .popup2 .list_line .list_label {width:30%;border:1px solid #000; height:50px; padding-top:17px; border-bottom:none; background:#eee;}
section .popup2 .list_line .list_info {width:70%;height:50px; border:1px solid #000; padding-top:17px; border-left:none; border-bottom:none;}
section .popup2 .list_line .list_info input{width:90%;}
section .popup2 .list_line .mail input {width:30%;}
section .popup2 .list_line .mail select {width:30%;}
section .popup2 .list_line .list_info .pay_info {text-align:left; padding-left:17px;}

section .popup2 .list_line .line_right {float:right; width:70%;}
section .popup2 .list_line .line_right select {width:200px; float:right;}
section .popup2 .list_line .line_right input {width:200px; float:right;}
section .popup2 .list_line .info{width:30%; padding-top:10px; padding-left:20px; text-align:left;}

section .popup2 .search .left {width:20%; float:left; margin-left:20px;}
section .popup2 .search .right {width:20%; float:right; margin-right:20px;}

section .popup2 .search .left button,
section .popup2 .search .right button {width:100%;}

section .popup3 { position: fixed; width: 100%; height: 100%; background: transparent; z-index: 11;}
section .popup3 .content {position: fixed; z-index: 10; width:100%; height:596px; background: #fff;}
section .popup3 .content label{width:120px; margin-top:7px;}
section .popup3 .content div{font-weight:100;}
section .popup3 .pop { position: absolute; top: 37%; left: 50%; transform: translate(-50%,-40%); width: 90%; height: 85%; background: #fff; border: 2px solid #000;}
section .popup3 .pop .header {position: relative; height: 50px; background: rgb(204, 225, 240); border-bottom: 1px solid #000;}
section .popup3 .pop .header .header_left {float: left; padding-top: 5px; padding-left: 20px;}
section .popup3 .pop .header .header_left label {font-size: 1.4rem;} 
section .popup3 .pop .header .header_right {float: right; padding-right: 10px;}
section .popup3 .pop .header .header_right button {border: none; background: transparent;}
section .popup3 .pop .header .header_right button img {width:30px; height:30px;}
/* 버튼 */
button {background-color: #fff; padding: 10px;}
button.btn-primary  {color: #fff; background-color: #337ab7; border: 1px solid #000;font-weight: 700;}
button.btn-yellow   {color: #fff; background-color: rgb(255, 183, 0); border: 1px solid #000;font-weight: 700;}
button.btn-gray     {color: #fff; background-color: gray; border: 1px solid #000;font-weight: 700;}
button.btn-danger   {color: #fff; background-color: rgb(247, 76, 76); border: 1px solid #000;font-weight: 700;}
button:hover {background: rgb(229, 248, 202); color: #000;}

/* 실행,로딩 */
body.eee {height: 700px; background: #eee;}
.app_run {background: #ccc; width: 100%; height: 100%;}
.app_run .loding .start {position: absolute; width: 100%; top: 20%;}
.app_run .loding .start h2 {font-size: 1rem;}
.app_run .loding .start h1 {font-size: 2rem;}
.app_run .loding .cap {position: absolute; width: 100%; top: 50%; transform: translateY(50%);}
.app_run .loding .cap h3 {font-size: 1rem; color: #666;}
.brand_name {position: absolute; width: 100%; bottom: 0%; font-size: 1.6rem;}

/* 업그레이드 , */
.upgrade { padding-top: 50%;}
.upgrade .info { position: relative; background-color: #fff; margin: 0 auto; width: 70%; height: 150px; padding: 20px; border: 1px solid #000; border-bottom: none; border-top-left-radius: 10px; border-top-right-radius: 10px;}
.upgrade .info h1 { position: relative; font-size: 1rem; margin: 5px; top: 20%;}
.upgrade .info h2 { position: relative; font-size: 0.8rem; margin: 5px; top: 30%;}
.upgrade .btn { position: relative; display: block; background-color: #fff; margin: 0 auto; width: 70%; height: 50px;}
.upgrade .btn button {border-radius: 0px;position: relative;border: 1px solid #000; padding: 0; float: left;display: block;height: 50px;font-size: 1.2rem;}
.upgrade .btn .info_btn1 button{border-right: none;width: 35%;color: #000;background-color: #f5f5f5;}
.upgrade .btn .info_btn2 button {width: 65%;color: #ccc;background-color: blue;}

/* 로그인 */
#ITP_LOGIN {max-width: 500px; margin: 0 auto;}
#ITP_LOGIN .login_popup {position: relative; width: 100%; top: 80px; text-align: center;}
#ITP_LOGIN .login_popup h1 { font-size: 1.5rem; color: #333; font-weight: normal;}
#ITP_LOGIN .login_popup input { position: relative; height: 30px; font-size: 2.2rem;}
#ITP_LOGIN .login_popup .login_info { margin-bottom: 100px;}
#ITP_LOGIN .login_popup .num_area { position: relative; width: 100%;  margin-bottom: 40px;}
#ITP_LOGIN .login_popup .num_area .input_area {margin-bottom: 10px;}
#ITP_LOGIN .login_popup .num_area .input_area input {width:52%; font-size: 0.8rem; }
#ITP_LOGIN .login_popup .num_area .input_area button {font-weight: 700; margin-left: 0.1%; width: 16.5%; height: 40px; background-color: blue; color: #eee; font-size: 1rem; padding: 0;}
#ITP_LOGIN .login_popup .num_area .brand_list select {padding-left: 10px; width: 70%; height: 40px; font-size: 0.8rem; background: url(../img/down.png)no-repeat 100% 50%/40px auto; -webkit-appearance:none; appearance:none;}
#ITP_LOGIN .login_popup .num_area .brand_list select option {text-align: left; width: 70%; height: 50px; border: 1px solid #000; font-size: 20px;} 

#ITP_LOGIN .login_page {position: relative; width: 100%;  margin-bottom: 30px;}

#ITP_LOGIN .input_area {position: relative; width: 100%;  margin-bottom: 10px;}
#ITP_LOGIN .input_area input {width: 70%; height: 40px; position: relative; padding: 10px; text-align: left; border:1px solid #666; font-size: 0.7rem; color: #000; outline: none; margin:0;}
#ITP_LOGIN .input_area label {position: absolute; left: 18%; top: 12px; font-size: 1rem; transition: all .5s ease;}
#ITP_LOGIN .input_area input:focus + label,
#ITP_LOGIN .input_area input:valid + label {top: 2px; left: 16%; font-size: 0.6rem; color: blue;}
#ITP_LOGIN .error {margin: 0 auto; margin-top: 100px;}
#ITP_LOGIN .error label {font-size: 1rem;}
#ITP_LOGIN .login_btn {position: absolute; bottom: 0; left: 0;}
#ITP_LOGIN .login_btn button {
  font-weight: 700;
  position: fixed;
  background-color: #aaa;
  color: #eee;
  bottom: 0px;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  font-size: 1.2rem;
}

/* 메인화면 */


@media screen and (min-width:300px) and (max-width:430px) {
  .footer button {margin: 0 15px;}
}

.main {margin-top: 70px; height: 500px;}
.main .wicon label {font-size: 1.2rem;}
.main .wicon {width: 380px; margin: 0 auto;}
.main .wicon  button {border: 1px solid #333; margin: 8px 20px; background-color: #ccc; width: 150px; height:150px;border-radius: 30px;}
.main .wicon .icon_left {float: left;}


input {margin-top: 3px; border: 1px solid #000; margin-top: -2px; height: 36px; font-size: 0.8rem; text-align: left; padding:0 15px;}
select {border: 1px solid #000; height: 35px; font-size: 1rem; text-align: left; padding:0 15px;}
input .day {margin: 18%; width: 45%; height: 80px; float: right;}

/* 공통화면 */

#ITP_WRAPPER header {position: fixed;top: 0;width: 100%;height: 55px;background-color:#92c7f6;align-items: center;border-bottom: 1px solid #000;z-index: 11;}
#ITP_WRAPPER header .header_wrap {width: 100%; height: 55px; margin: 0 auto;}
#ITP_WRAPPER header .header_wrap .menu_logo button {width: 40px; height: 40px; float: left; padding: 0; background: transparent; border: none; margin-top: 7px; margin-left: 7px;}
#ITP_WRAPPER header .header_wrap .menu_logo button img {width: 35px; height: 35px; margin: 0; border-radius: 0; border: none;}
#ITP_WRAPPER header .header_wrap img.brand {float: right; height: 45px; margin: 5px; border-radius: 50%; border: 1px solid #666;}
#ITP_WRAPPER header .header_wrap label{ margin-top: 15px; width: 50px; height: 25px; font-size: 1rem;float: left; color: #fff;}
#ITP_WRAPPER header .header_wrap .name_info {width: auto; float: right;}
#ITP_WRAPPER header .header_wrap .name_info label {width: auto; font-size: 1.1rem; }
#ITP_WRAPPER header .header_wrap .logout {float: right; width: 60px;}
#ITP_WRAPPER header .header_wrap .logout button { margin: 3px 0px; padding: 0px; width: 50px; height: 50px; border-radius: 15px; font-size: 0.8rem;}

/* 메뉴바 */
#ITP_MENU .menu_area {position: fixed; width: 100%; height: 100%; top: 0; left: -0%; background: #000; opacity: 0.7; z-index: 12; transition: all 0.5s;}
#ITP_MENU .menu_area button {float: right; width: 20px; height: 20px; padding: 0; background: transparent; border: none;}
#ITP_MENU .menu_area button img {float: right; width: 40px; height: 40px; margin: 7px;}
#ITP_MENU .menu_bar {position: fixed; width: 80%; height: 100%; left: -0%; top: 0; background: #fff; opacity: 1; z-index: 13; transition: all 0.5s;}
#ITP_MENU .menu_bar .menu_header {width: 100%; height: 100px; border-bottom: 1px solid #000 ;}
#ITP_MENU .menu_bar .menu_header .brand_img {position: absolute; width: 50px; height: 50px; margin: 20px 0 0 20px;}
#ITP_MENU .menu_bar .menu_header .brand_img img {width: 50px; height: 50px; border: 1px solid #000; border-radius: 5px;}
#ITP_MENU .menu_bar .menu_header .user_info {position: absolute; width: 120px; margin-left: 70px; margin-top: 20px; float: left;}
#ITP_MENU .menu_bar .menu_header .user_info div {position: absolute; width: 70px; margin-right: 10px; font-weight: 700;}
#ITP_MENU .menu_bar .menu_header .user_info div.id {font-weight: normal; color: #666; margin-left: 10px; margin-top: 5px;}
#ITP_MENU .menu_bar .menu_header .user_info label {width: auto; margin-left: 58px;}
#ITP_MENU .menu_bar .menu_header .setting {float: right;}
#ITP_MENU .menu_bar .menu_header .setting button {width: 30px; height: 30px; padding: 0; background: #666; border-radius: 5px; margin: 30px 20px 0 0;}
#ITP_MENU .menu_bar .menu_header .setting button img {width: 20px; height: 20px;}
#ITP_MENU .menu_bar .menu_select {width: 100%; height: 100%;}
#ITP_MENU .menu_bar .menu_select ul {height: auto;}
#ITP_MENU .menu_bar .menu_select ul .panel_list .panel_heading {text-align: left; padding: 15px 0 15px 20px; background: #eee; font-weight: 700; border-bottom: 1px solid #000; font-size: 1.1rem;}
#ITP_MENU .menu_bar .menu_select ul .panel_list .panel_heading .ver {letter-spacing: 3px; margin-left: 10px; font-weight: normal; }
#ITP_MENU .menu_bar .menu_select ul .panel_list .panel_heading .show {float: right; margin-right: 20px; color: #337ab7; font-size: 0.9rem;}
#ITP_MENU .menu_bar .menu_select ul .panel_list .panel_body .itp_svg_in {padding: 10px 0 10px 30px; text-align: left; border-bottom: 1px solid #000;}
#ITP_MENU .menu_bar .menu_select ul .panel_list .panel_body .itp_svg_in i {width: 30px; height: 30px;}
#ITP_MENU .menu_bar .menu_select ul .panel_list .panel_body .itp_svg_in i img{width: 15px; height: 15px;}

/* 컨텐츠 화면 */


.fix {
  width: 100%;
  padding-top: 50px;
  font-size: 2rem;
}
.content {top: 55px; position: fixed; z-index: 10; width:100%; background: #fff;}
.content .line {position: relative; display: inline-block; width: 100%; height: 35px; margin-bottom: 0px;}
.content .line div {font-weight: 700;}
.content .line label {font-size: 1.2rem; margin-left: 10px; float: left; text-align: left; margin-top: 12px;}
.content .line label.pay_label {margin:38px 1%; width:98%;}
.content .line select.label {border: 1px solid #000; font-size: 0.9rem;margin:9px 0 0 5px; float: left; width: 120px; height: 30px; text-align: left;}
.content .line .search_nm {float: right; margin-right: 2%;}
.content .line .search_wrap {float:right; margin-right:10px;}
.content .line .float_left {float: left;}
.content .line .float_left.note {width: 100%; padding: 10px;}
.content .line .float_left.note textarea {width: 100%; height: 100px; border: 1px solid #000; text-align: left;}
.content .line .float_left div {font-size: 1rem; margin-top: 8px;}
.content .line .float_left_btn {float: left; margin-top: 5px; margin-left: 5px;}
.content .line .float_left_btn button {padding:0; width:36px; height:36px; border-radius:5px;}
.content .line .float_left_btn button img {width:20px; height:20px;}
.content .line .float_left select {float: left; width: 150px; height: 30px; margin-top: 7px; border: 1px solid #000; font-size: 1rem;}
.content .line .line_right {font-size: 2rem; float: right; margin-right: 0%;}
.content .line .line_right div {float: right; font-size: 1.2rem; margin-top: 12px; margin-right: 30px;}
.content .line .line_right input {position: relative; text-align: right; margin-right: 84px;}
.content .line .line_right input.m9 {margin-right:93px;}
.content .line .line_right input.left {text-align: left;}
.content .line .line_right input.mg0 {margin-right:10px;}
.content .line .line_right select.m9 {margin-right:83px;}
.content .line .line_right input.date{width:140px; margin-right:132px; height:35px;} 
.content .line .line_right select {float: right; width: 180px; height: 30px; margin-top: 7px; border: 1px solid #000; font-size: 1rem; margin-right:93px;}
.content .line input.date {width: 40%; margin: 10px; height: 40px; float: right; margin-right: 3%;}
.content .line input.date2 {width: 140px; height: 30px; margin-right:133px;}
.content .line div.date_to {float: right; margin-right:10px;}
.content .line div.date_to input.year {width: 120px; height: 30px;}
.content .line div.date_to div.at {width: 3%;  font-size: 1rem; float: right; display: contents;}
.content .line .search {width: 100%; height: 50px;}
.content .line .search button {width: 50%; height: 35px; font-size: 1rem; padding: 0;}
.content .line .search button.col_3 {width: 25%; margin:0 12px;}
.content .list_line {width:98%; float:left; height:50px;display: inline-flex; margin:0 1%; font-size:12px;}
.content .border {border-bottom: 1px solid #000 !important;}
.content .list_line .list_label {width:30%;border:1px solid #000; height:50px; padding-top:17px; border-bottom:none; background:#eee;}
.content .list_line .list_info {width:70%;height:50px; border:1px solid #000; padding-top:17px; border-left:none; border-bottom:none;}
.content .list_line .list_info input{width:90%;}
.content .list_line .mail input {width:30%;}
.content .list_line .mail select {width:30%;}
.content .list_line .list_info .pay_info {text-align:left; padding-left:17px;}
.content .table_header {margin: 0 auto; width: 100%; height: 50px; background-color: #92c7f6; position: fixed; z-index: 10; border-bottom: 1px solid #000; border-top: 1px solid #000;}
.content .table_header h1 {margin-top: 12px; margin-left: 10px; font-size: 1.2rem; float: left; color: #fff; font-weight: 100;}
.content .table_header button {float: right; width: 111px; font-size: 1rem; padding: 5px 20px; margin: 8px;}

.detail_content {top: 0px; position: fixed; z-index: 10; width:100%; background: #fff;}
.detail_content .detail_header {width: 100%; height: 80px; padding-top:65px}
.detail_content .detail_header .detail_logo {float: left;}
.detail_content .detail_header .detail_logo img {width: 70px; margin-left: 15px;}
.detail_content .detail_header .detail_ok {float: left;}
.detail_content .detail_header .detail_ok label {margin-left: 50px; font-size: 1.6rem; font-weight: 700;}
.detail_content .detail_confirmation {height: 260px; }
.detail_content .detail_confirmation .detail_col {float: left; width: 100%; display: inline-flex; margin-left: 15px; margin-bottom: 10px;}
.detail_content .detail_confirmation .detail_col label{font-size: 1rem; font-weight: 700; float: left; width: 100px; text-align: left;}
.detail_content .detail_confirmation .detail_col i{font-size: 1rem; font-style:normal; width: 1%; text-align: right; margin-right: 10px;}
.detail_content .detail_confirmation .detail_col div{font-size: 1rem; width: auto; text-align: left;}
.detail_content .detail_company_info {height:150px;}
.detail_content .detail_company_info label{font-size: 1rem; font-weight: 600;}
.detail_content .detail_company_info .weight {margin-bottom: 20px;}
.detail_content .detail_company_info .weight label{font-size: 1.2rem; font-weight: 700;}
.detail_content .detail_company_info div{font-size: 1rem;}
.detail_content .detail_company_info .info_left {width: 50%; height: 150px; float: left;}
.detail_content .detail_company_info .info_left .company_info {width: 100%; float: left; display: flex; margin-left: 15px; margin-top:3px;}
.detail_content .table_header {margin: 0% auto; width: 100%; height: 45px; background-color: skyblue; align-items: center; position: fixed; z-index: 10;}
.detail_content .table_header h1 {margin-top: 12px; margin-left: 15px; font-size: 1.2rem; float: left;}
.detail_content .table_header button {float: right; width: 200px; font-size: 2rem; padding: 5px 20px; margin: 20px;}

/* select.stcd {
  float: left;
  width: 300px;
  height: 60px;
  border: 1px solid #000;
  font-size: 1.8rem;
} */

.button_bar {width: 100%; height: 60px; background: #ccc; position: fixed; bottom: 0px; border-top: 1px solid #000; border-bottom: 1px solid #000; z-index: 10;}
.button_bar button.col_3{float: left; height: 60px; font-size: 1.4rem; margin: 0; width: 33.3%; font-weight: 700; border: 1px solid #000; border-radius: 0;}
.button_bar button.btn-gray {border-radius: 0px; background-color: #666; color: #eee;}
.button_bar button.btn {height: 120px;}
.button_bar button.btn_col_3 {width: 35%;}
.button_bar button.btn_col_6 {width: 65%;}
.button_bar button.btn_col_3,
.button_bar button.btn_col_6 {border: 1px solid #000; float: left; height: 60px; font-size: 1.4rem; font-weight: 700; border-radius: 0px;}
.button_bar button.col_12 {width: 100%; height: 60px; font-size: 1.2rem;}

/* scroll_area 조정 */
.scroll_area {position: absolute; width: 100%; height: 1090px; bottom: 30px; overflow: auto; background: #fff;}
.row-1{top: 240px;}
.row-1-1{top:288px;}
.row-2{top: 282px;}

.row-3{top: 333px;}
.row-4{top: 377px;}
.row-5{top: 418px;}
.row-6{top: 468px;}
.row-7{top: 533px;}

.col-4{width:40% !important;}
.col-6{width:60% !important;}


.scroll_area li {margin: 5px 3px; list-style: none; width: 99%; height: 85px; border: 1px solid #000; background-color: #fff;}
.scroll_area li .left_info {width:50%; float:left; font-size:1rem;}
.scroll_area li .left_info div {display: inline-block;}
.scroll_area li .left_info label{font-size: 1.1rem; font-weight:100; margin-left:10px;}
.scroll_area li .left_info .thick {float:left;  margin: 8px 0 0 10px; font-size: 1rem; text-align: left; width: 90%; font-weight: 600;}
.scroll_area li .left_info .history {font-weight: 700; font-size: 1.1rem; margin-top:-2px;}
.scroll_area li .left_info .history input{width: 150px;}
.scroll_area li.history_list {height: 140px; padding-top:8px;}
.scroll_area li.history_list4 .button_right {float: right; display: grid;}
.scroll_area li.history_list4 .button_right button {width: 65px; height: 75px; font-size: 1rem; margin: 0; border-radius: 0;}

.scroll_area li.history_list1 {height: 230px;}
.scroll_area li.history_list2 {height: 165px; padding-top:5px;}
.scroll_area li.history_list2 label{min-width:95px; display:inline-flex;}
.scroll_area li.history_list3 {height: 160px; padding-top:5px;}
.scroll_area li.history_list4 {height: 150px;}
.scroll_area li.history_list5 {height: 100px; padding-top:5px;}
.scroll_area li .history_info {width: auto;}
.scroll_area li .left {width:100%; height:30px; margin-top:0px;}
.scroll_area li .btn {width:calc(100% - 65px); padding-top:12px;}
.scroll_area li .left div {display: inline-block;}
.scroll_area li .left label{font-size: 1.1rem;}
.scroll_area li .left .thick {float:left;  margin: 8px 20px; font-size: 1rem; text-align: left; width: 50%; font-weight: 600;}
.scroll_area li .left .history {font-weight: 700; font-size: 1.1rem; margin-top:-2px;}
.scroll_area li .left .history input{width: 150px;}

.scroll_area li .detail_line {width: 100%; height:25px; display: inline-block;}
.scroll_area li .detail_left {float: left;}
.scroll_area li .detail_left .detail_info {margin: 5px 10px;}
.scroll_area li .detail_left .detail_info div {width: auto; font-size: 1rem; font-weight: 700;}
.scroll_area li .detail_left .detail_info i {width: auto; font-size: 1rem; margin: 0 20px;}
.scroll_area li .detail_left .detail_info label {position:absolute; width: auto;  font-size: 1rem;}
.scroll_area li .detail_right {float: right;}
.scroll_area li .detail_right .detail_info {margin: 5px 25px;}
.scroll_area li .detail_right .detail_info label {margin: 5px 30px; font-size: 2rem;}
.scroll_area li .detail_right .detail_info div {width: auto; font-size: 1rem; font-weight: 700;}
.scroll_area li .detail_right .detail_info i {width: auto; font-size: 1rem; margin: 0 20px;}
.scroll_area li .left .nomal  {width: 100%; float:left; text-align: left; font-size: 1.2rem;}
.scroll_area li .left .nomal .half {width:50%; float:left;}
.scroll_area li .left .nomal .half label {font-weight:100;}
.scroll_area li .left .nomal  input{width: 85px; height:30px;}
.scroll_area li .left .nomal .scroll_btn {margin-bottom: 10px; min-width: 0;}
.scroll_area li .left .nomal .scroll_btn button{top: 120px; position: absolute; width: 50px; height: 40px; font-size: 0.8rem; padding: 0; border-radius: 10px; background: rgb(198, 170, 250);}

.scroll_area li .left .nomal span {margin:0 10px;}

.scroll_area li .left .nomal .btn_bar{position: relative; width: auto; font-size: 2.2rem;}
.scroll_area li .left .nomal .btn_bar button{width: 25px; height: 30px; font-size: 1rem; padding: 0;}
.scroll_area li .left .nomal .btn_bar .col_0{min-width: auto; margin: 5px 20px;}

.scroll_area li .left .nomal label{position:relative; margin-left: 10px;}
.scroll_area li .left .nomal label.sub_info{min-width: 70px; display: inline-flex;}
.scroll_area li .left .nomal label.col_0{width: auto;}
.scroll_area li .left .nomal label.col_2{width: 95px;}
.scroll_area li .left .nomal i{width: 50px; text-align: center;}
.scroll_area li .left .nomal div{min-width:90px; display: inline-flex; font-weight: 700; font-size: 1.1rem;}
.scroll_area li .left .nomal .col_5{min-width:50px;}

.scroll_area li .right {margin: 30px 20px 0 0; position: relative; display: flex; font-size: 1.4rem; font-weight: 700; float: right;}
.scroll_area li .right .num {margin: 0 25px; width: auto;}
.scroll_area li .right button {margin: -6px; padding:0px 7px; font-size: 1.5rem; border-radius: 0px;}

/* ITP_FOOTER */
#ITP_FOOTER .itp_modal {z-index:10000;}
#ITP_FOOTER .itp_modal .modal-header {padding:12px 15px 12px 15px; background:#337ab7; cursor:move;}
#ITP_FOOTER .itp_modal .modal-header .close {color:#fff; opacity:1;}
#ITP_FOOTER .itp_modal .modal-title {font-size:16px; color:#fff;}
#ITP_FOOTER .itp_modal .itp_alert_txt {font-size:15px; padding:15px 0 10px 0;}
#ITP_FOOTER .itp_modal .itp_form .form-group {margin-bottom:10px;}
#ITP_FOOTER .itp_modal .itp_form .form-control {font-size:13px; color:#333;}
#ITP_FOOTER .itp_modal .itp_form .itp_lb {font-size:13px; padding-top:5px; padding-right:0; color:#333; position:relative;}
#ITP_FOOTER .itp_modal .itp_form .itp_ip {padding-left:0; padding-right:0;}
#ITP_FOOTER .itp_modal .itp_form .itp_ip_offset {padding-left:15px;}
#ITP_FOOTER .itp_modal .itp_form .itp_input {height:28px; padding:3px 9px;}
#ITP_FOOTER .itp_modal .itp_form .itp_check {margin-top:7px;}
#ITP_FOOTER .itp_modal .itp_form select.itp_input  {padding-left:4px;}
#ITP_FOOTER .itp_modal .itp_form .itp_btn {padding:4px 10px; background:#fff;}
#ITP_FOOTER .itp_modal .itp_form .input-daterange .input-group-addon {padding:3px 5px;}
#ITP_FOOTER .itp_modal .itp_form .itp_date_to {background:#fff;}
#ITP_FOOTER .itp_modal .itp_form .itp_lb.itp_required:before {content:'*'; color:#a94442; position:absolute; top:8px; left:8px;}
#ITP_FOOTER .modal.in .modal-dialog {
  -webkit-transform:translate(0, calc(50vh - 50%));
  -ms-transform:translate(0, 50vh) translate(0, -50%);
  -o-transform:translate(0, calc(50vh - 50%));
  transform:translate(0, 50vh) translate(0, -50%);
}