/***************************************************************************/ /***************************************************************************/ /***************************************************************************/ /* 공통 */ /***************************************************************************/ /* 여백 */ /* Blank */ .blank_hd {display: block;} .blank_side_10 {display: table-cell; width: 10px; height: 10px; min-width: 10px;} .blank_side_15 {display: table-cell; width: 15px; height: 15px; min-width: 15px;} .blank_side_20 {display: table-cell; width: 20px; height: 20px; min-width: 20px;} .blank_side_30 {display: table-cell; width: 30px; height: 30px; min-width: 30px;} .blank_box_10 {width: 10px; height: 10px;} .blank_box_15 {width: 15px; height: 15px;} .blank_box_40 {width: 40px; height: 40px;} .blank_box_30 {width: 30px; height: 30px;} .blank_box_60 {width: 60px; height: 60px;} /* Page */ .page_basic {width: 100%; height: auto;} .page {width: 100%; height: auto; padding: 30px;} .wrap_content {width: 100%; height: auto; padding-left: 80px;} /* Padding */ .pdAll_40 {padding: 40px ;} .pdAll_30 {padding: 30px ;} .pdAll_20 {padding: 20px ;} .pdAll_15 {padding: 15px ;} .pdAll_input {padding: 0 0 10px 0;} .pdBottom_5 {padding-bottom: 5px !important;} .pdBottom_10 {padding-bottom: 10px !important;} .pdBottom_15 {padding-bottom: 15px !important;} .pdBottom_20 {padding-bottom: 20px !important;} .pdBottom_30 {padding-bottom: 30px !important;} .pdBottom_40 {padding-bottom: 40px !important;} .pdTop_10 {padding-top: 10px;} .pdTop_15 {padding-top: 15px;} .pdTop_20 {padding-top: 20px;} .pdTop_30 {padding-top: 30px;} .pdTop_40 {padding-top: 40px;} .pdTop_50 {padding-top: 50px;} .pdRight_0 {padding-right: 0 !important;} .pdRight_5 {padding-right: 5px !important;} .pdRight_10 {padding-right: 10px !important;} .pdRight_15 {padding-right: 15px !important;} .pdRight_20 {padding-right: 20px !important;} .pdRight_30 {padding-right: 30px !important;} .pdLeft_0 {padding-left: 0 !important;} .pdLeft_5 {padding-left: 5px !important;} .pdLeft_10 {padding-left: 10px !important;} .pdLeft_15 {padding-left: 15px !important;} .pdLeft_22 {padding-left: 22px !important;} .pdLeft_45 {padding-left: 45px !important;} .pdLeft_68 {padding-left: 68px !important;} .pd_bottom_btn {padding: 0 40px 20px 0;} .pd_title_pd {padding: 15px 15px 30px 15px;} .pd_head {padding-top: 76px;} .padding_side_15 {padding-left: 15px; padding-right: 15px;} .padding_side_30 {padding-left: 30px; padding-right: 30px;} .padding_side_40 {padding-left: 40px; padding-right: 40px;} /* Margin */ .mgBottom_30 {margin-bottom: 30px;} .margin_left {margin-left: auto;} /* 여백 */ /***************************************************************************/ /***************************************************************************/ /* POP Style */ /* Long Height */ .pop_background {display: table; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100; padding: 50px;} .pop_background .long_height.layout_center {display: table-cell; width: 100%; height: 100%; vertical-align: middle;} .long_height .pop_white_box {display: block; margin: auto; height: auto; min-height: 500px; padding-top: 40px; padding-bottom: 40px; padding-left: 0; padding-right: 0; border-radius: 30px; box-shadow: 0 7px 17px 0 rgba(0, 0, 0, 0.1); background-color: #ffffff; } .long_height .pop_white_box .inner {position: relative; width: 100%; height: 100%;} .long_height .pop_white_box .title_part {display: block; position: absolute; top: 0; left: 0; background-color: white; width: 100%; height: auto; z-index: 3;} .long_height .pop_white_box .title_part .wrap_title {display: table; width: 100%; height: auto; position: relative; } .long_height .pop_white_box .title_part .wrap_title .title_txt_box {display: table-cell; width: auto; height: auto; vertical-align: middle;} .long_height .pop_white_box .title_part .wrap_title .title_cancel_img_box .ico {display: table-cell; width: 30px; height: 30px; float: right; vertical-align: middle; cursor: pointer;} .long_height .pop_white_box .content_part {width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .long_height .pop_white_box .content_part .inner {display: block; width: 100%; height: 100%;} .long_height .pop_white_box .wrap_bottom_btn {display: block; width: 100%; position: absolute; bottom: 0; left: 0; background-color: white; z-index: 3;} /* Height Control */ .height_group_control {height: 100% !important;} .height_message_control {height: 100% !important;} /* Short Height */ .pop_background {display: table; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 100;} .pop_background .layout_center {display: table-cell; width: 100%; height: auto; vertical-align: middle;} .pop_white_box {display: block; width: fit-content; height: fit-content; margin: auto; padding: 40px; border-radius: 30px; box-shadow: 0 7px 17px 0 rgba(0, 0, 0, 0.1); background-color: #ffffff;} .pop_white_box .wrap_title {display: table; width: 100%; height: auto; position: relative;} .pop_white_box .subtitle {text-align: left;} .pop_white_box .title_txt_box {display: table-cell; width: auto; height: auto; vertical-align: middle; text-align: left;} .pop_white_box .title_cancel_img_box .ico {display: table-cell; width: 30px; height: 30px; float: right; vertical-align: middle; cursor: pointer;} .pop_width_65 {width: 65%;} .pop_width_40 {width: 40%;} .pop_width_30 {width: 30%;} .align_center {text-align: center; text-align: -webkit-center; -ms-text-align-last: center;} .wrap_pop {width: 100%; height: auto; z-index: 1000; display: none;} /* POP Style */ /***************************************************************************/ /***************************************************************************/ /* iphone safearea */ .safe_top { padding-top: constant(safe-area-inset-top) !important; /*for iOS 11.2*/ padding-top: env(safe-area-inset-top) !important; /*for iOS 11.1*/ } .safe_bt { padding-bottom: constant(safe-area-inset-bottom) !important; /*for iOS 11.2*/ padding-bottom: env(safe-area-inset-bottom) !important; /*for iOS 11.1*/ } /* iphone safearea */ /***************************************************************************/ /***************************************************************************/ /* Text Style */ .txt {word-break: keep-all; letter-spacing: -0.5px;} span.txt {display: block;} /*콘텐츠 제목 스타일*/ .txt.con_tit {font-size: 20px; font-weight: 700; color: #1089ff;} .txt_login_1 {font-size: 56px; font-weight: 800; letter-spacing: -1.32px; color: #ffffff;} .txt_login_2 {font-size: 24px; font-weight: 500; letter-spacing: -0.57px; color: #ffffff;} .txt_login {font-size: 40px; font-weight: bold; letter-spacing: -0.94px; color: #000000;} /*기본 스타일*/ .txt_normal {font-size: 14px; font-weight: 400;} .txt_normal2 {font-size: 16px; font-weight: 400;} /*인풋 스타일*/ .txt_input {font-size: 14px; font-weight: 400; color: #4a4a4a;} .txt_input2 {font-size: 14px; font-weight: 500; color: #444444;} .txt_input2_bold {font-size: 14px; font-weight: bold; color: #444444;} /*페이지 타이틀*/ .txt.pg_tit {font-size: 26px; font-weight: 800; color: #444;} .txt.pop_title_txt {font-size: 26px; font-weight: bold; color: #000;} /*주석 스타일*/ .txt.descript {font-size: 14px; font-weight: 400; color: #9b9b9b;} .txt.small {font-size: 12px; font-weight: 500; color: #4a4a4a;} /* Line Height */ .line_h_131 {line-height: 1.31;} .line_h_157 {line-height: 1.57;} .line_h_18 {line-height: 1.18px;} .txt_l {font-weight: 300 ;} .txt_r {font-weight: 400 ;} .txt_m {font-weight: 500 ;} .txt_sb {font-weight: 600 ;} .txt_b {font-weight: 700 ;} .txt_eb {font-weight: 900 ;} .txt_14 {font-size: 14px ;} .txt_16 {font-size: 16px ;} .txt.underline {text-decoration: underline;} .txt_underline {text-decoration: underline; text-underline-position: under;} /* Overflow */ .text_overflow_left {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;} .text_overflow {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: auto;} .text_overflow2 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 22px;} /* text style */ /***************************************************************************/ /***************************************************************************/ /* color */ /* Background Color */ .bg_cmain {background-color: #1089ff;} .bg_cbasic_1 {background-color: #f7f7f7;} .bg_cbasic_2 {background-color: #fafafa;} .bg_cwhite {background-color: #fff;} .bg_cred {background-color: #ff4949;} .bg_cgrey {background-color: #dbdbdb;} .bg_cgrey2 {background-color: #fafafa;} .bg_table_choosed {background-color: rgba(16, 137, 255, 0.08);} /* Text Color */ .txt_cmain {color: #1089ff !important;} .txt_cwhite {color: #fff !important;} .txt_cgrey {color: #9b9b9b !important;} .txt_cgrey2 {color: #444444 !important;} .txt_cgrey3 {color: #4a4a4a !important;} .txt_c6f {color: #6f6f6f !important;} .txt_cblue {color: #1089ff !important;} .txt_cblue2 {color: #10b7ff !important;} .txt_cred {color: #ff4949 !important;} .txt_cgreen {color: #02ad7c !important;} .txt_cgreen2 {color: #0ec019 !important;} .txt_cgreen3 {color: #0ec05d !important;} .txt_corange {color: #fc7e2f !important;} .txt_corange2 {color: #ef9e1b !important;} .txt_cnavy {color: #1064b5 !important;} /* Border Color */ .border_cmain {border: 1px solid #1089ff;} .border_cgrey {border: 1px solid #dbdbdb !important;} .border_cred {border: 1px solid #ff4949;} .border_left {border-left: 2px solid #e8e8e8;} .border_left2 {border-left: 1px solid #dbdbdb;} .border_bottom_cgry {border-bottom: 1px solid #dbdbdb !important;} .border_bottom_table_cmain {border-bottom: 2px solid #1089ff !important;} .border_bottom_table {border-bottom: 2px solid #dbdbdb !important; } .border_bottom_dashed {border-bottom: 2px dashed #dbdbdb !important; } .border_table_frame {border: solid 1px #dbdbdb; border-radius: 10px; border-top: solid 1px #dbdbdb !important;} .border_table_frame_noTop {border: solid 1px #dbdbdb; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top:none;} .frame_border {border-radius: 4px; border: solid 1px #dbdbdb; background-color: #ffffff;} .frame_border_10 {display: block; width: 100%; height: auto; border-radius: 10px; border: solid 1px #dbdbdb; background-color: #ffffff;} /* color */ /***************************************************************************/ /***************************************************************************/ /* icon, img */ img {display: block; width: 100%; height: auto;} i.img {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center;} i.ico {display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain;} i.ico.dropdown{background-image: url('../images/btn/btn-dropdown.png'); background-size: 10px auto; background-repeat: no-repeat;} i.ico_search {background-image: url('../images/btn/btn-search-white.png');} i.ico_cancel {background-image: url('../images/btn/btn-cancel.png');} i.ico_excel {background-image: url('../images/btn/btn-excel.png');} i.ico.logo_white{background-image: url('../images/logo/logo-white.png');} i.ico.logo_color{background-image: url('../images/logo/logo-color.png');} i.add_color {background-image: url('../images/btn/btn-add.png');} i.excel {background-image: url('../images/btn/btn-excel.png');} i.write {background-image: url('../images/btn/btn-write.png');} i.delete {background-image: url('../images/btn/btn-delete.png');} i.color_down {background-image: url('../images/btn/btn-arrow-down-act.png');} i.grey_up {background-image: url('../images/btn/btn-arrow-down.png');} i.grey_dwon {background-image: url('../images/btn/btn-arrow-down.png'); transform: rotate(180deg);} i.star {background-image: url('../images/btn/btn-star.png');} i.ico.message {background-image: url('../images/btn/btn-message.png');} i.ico.calendar {background-image: url('../images/btn/btn-calendar.png');} i.ico.play {background-image: url('../images/btn/btn-play.png');} i.ico.modify {background-image: url('../images/btn/btn-modify.png');} i.ico.delete_grey {background-image: url('../images/btn/btn-del.png');} i.ico.dowload {background-image: url('../images/btn/btn-download.png');} i.ico.add_contact {background-image: url('../images/btn/btn-add-contact.png');} i.ico.upload {background-image: url('../images/btn/btn-upload.png');} i.ico.add_group {background-image: url('../images/btn/btn-add-group.png');} i.ico.move_group {background-image: url('../images/btn/btn-group-move.png');} i.ico.copy_address {background-image: url('../images/btn/btn-copy.png');} i.ico.setting {background-image: url('../images/btn/btn-setting.png');} i.ico.setting2 {background-image: url('../images/btn/btn-setting2.png');} i.ico.stop {background-image: url('../images/btn/btn-stop-blue.png');} i.ico.arrow {background-image: url('../images/icon/btn-add-arrow.png');} i.ico.folder {background-image: url('../images/icon/icon-folder.png');} i.ico.phone {background-image: url('../images/icon/img-phone.png');} i.ico.full_phone {background-image: url('../images/img/img_full_phone.png');} i.ico.drop_down {background-image: url('../images/btn/btn-dropdown.png');} i.ico.clear {background-image: url('../images/btn/btn-clear.png');} i.ico.tell {background-image: url('../images/btn/btn-tell.png');} i.ico.person {background-image: url('../images/btn/btn-person.png');} i.ico.person2 {background-image: url('../images/btn/btn-person2.png');} i.ico.full_mike {background-image: url('../images/img/img_full_mic.png');} .ico_frame.ico_size_18 {width: 18px; height: 18px;} .ico_frame.ico_size_16 {width: 16px; height: 16px;} .ico_frame.ico_size_12 {width: 12px; height: 12px;} .btn_img_frame.del_btn {width: 86px; min-width: 55px;} .btn_img_frame.add_btn {width: 120px; min-width: 85px;} .btn_img_frame.rewrite_btn {width: 120px; min-width: 85px;} .btn_img_frame.excel_up_btn {width: 117px; min-width: 80px;} .btn_img_frame.excel_down_btn {width: 127px; min-width: 89px;} .btn_img_frame.addContact_btn {width: 120px; min-width: 85px;} .btn_img_frame.addGroup_btn {width: 110px; min-width: 80px;} .btn_img_frame.del_btn {width: 86px; min-width: 55px;} .btn_img_frame.move_btn {width: 110px; min-width: 80px;} .btn_img_frame.copy_btn {width: 118px;} .btn_img_frame.excel_btn {width: 130px; min-width: 110px;} .btn_img_frame.write_btn {width: 110px; min-width: 80px;} .btn_img_frame.save_btn {width: 88px; min-width: 56px;} .btn_img_frame.add_group_btn {width: 110px; min-width: 80px;} .btn_img_frame.setting_btn {width: 110px; min-width: 80px;} .btn_img_frame.table_del_btn {width: 61px; min-width: 60px; height: 22px;} .btn_img_frame.send_btn {width: 110px; min-width: 110px;} /* icon, img */ /***************************************************************************/ /***************************************************************************/ /* Box Shadow */ .boxshadow_y {box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1);} .boxshadow_x {box-shadow: 8px 0 17px 0 rgba(0, 0, 0, 0.1);} .boxshadow_bold {box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.1);} /* Box Shadow */ /***************************************************************************/ /***************************************************************************/ /* Overflow */ .overflow_y {overflow-y: auto;} .overflow_x {overflow-x: auto;} .overflow_y_hidden {overflow-y: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */} .overflow_y_hidden::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/} /* Overflow */ /***************************************************************************/ /***************************************************************************/ /* Input */ :disabled {background: transparent;} input::placeholder {font-size: 14px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.33px; color: #9b9b9b;} textarea::placeholder {font-size: 14px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.33px; color: #9b9b9b;} textarea {border: 1px solid #dbdbdb; display: block; width: 100%; border-radius: 5px; resize: none;} /* Border Bottom Select */ .border_bottom_sel {display: table; width: 100%; height: auto; border-bottom: 1px solid #dbdbdb;} .border_bottom_sel select {display: table-cell; width: 100%; height: auto; vertical-align: middle; padding-bottom: 12px; border: none;} .border_bottom_sel .ico_frame {display: table-cell; width: 10px; height: 10px; vertical-align: middle; padding-bottom: 12px; cursor: pointer;} /* Input Search Part Style */ .wrap_input {width: 100%; height: auto; display: table;} .wrap_input .txt_frame {display: table-cell; width: fit-content; height: auto; vertical-align: middle;} .wrap_input .select_frame {display: table-cell; width: 30%; height: auto; vertical-align: top;} .wrap_input .inputTxt_frame {display: table-cell; width: 70%; vertical-align: top;} /* Input Text with Button Style */ .input_text_btn {display: block; width: 100%; height: 46px; border-radius: 5px; border: solid 1px #dbdbdb; background-color: #ffffff; position: relative;} .input_text_btn input[type='text'] {display: block; width: 100%; height: 100%; padding: 0 10px; border: none; min-width: 160px; } .input_text_btn .inputTxt_img_frame {display: block; width: 30px; height: 100%; position: absolute; top: 0; right: 0;} .input_text_btn .inputTxt_img_frame .inputTxt_img {width: 20px; height: 100%; background-repeat: no-repeat; background-size: contain; background-image: url('../images/btn/btn-search-black.png'); background-position-y: center; background-color: rgba(0, 0, 0, 0); cursor: pointer;} #sendPage .input_text_btn .inputTxt_img_frame .inputTxt_img {background-image: url('../images/btn/btn-write.png');} /* Input - Input */ .input_input_frame1 {display: table; width: 100%; height: auto;} .input_input_frame1 .input_input_frame2 {display: table-cell; height: auto; vertical-align: middle;} .input_input_frame1 .dash { width: 10px; height: 1px; border: solid 1px #dbdbdb; margin: auto;} .width_4per {width: 4%;} .width_24per {width: 24%;} .width_30per {width: 30% !important;} .width_48per {width: 48%;} .width_70per {width: 70% !important;} .width_80per {width: 80% !important;} .width_20per {width: 20% !important;} /* Basic Input */ .input_basic_2 {width: 100%; height: 46px; font-size: 14px; font-weight: 400; color: #4a4a4a; border: 1px solid #dbdbdb; border-radius: 5px; padding: 0 10px;} /* datepicker */ .input_basic_2.datepicker-js {padding-right: 46px; background-image: url('../images/btn/btn-calendar.png'); background-size: 16px auto; background-position: right 15px center; background-repeat: no-repeat; border: solid 1px #dbdbdb;} /* Select with Button Style */ select.input_basic_2 {padding-right: 45px;} select.input_basic_2 + i.ico {position: absolute; top: 0; right: 0; font-size: 14px; height: 46px; width: 45px; background-color: #fff; border: 1px solid #dbdbdb; border-left: 0; border-radius: 0 5px 5px 0;} .select_frame_btn {display: block; width: 100%; height: 46px; border-radius: 5px; border: solid 1px #dbdbdb; background-color: #ffffff;} .select_frame_btn select {display: block; width: 100%; height: 100%; padding: 0 10px; background-image: url('../images/btn/btn-dropdown.png'); border: none; background-repeat: no-repeat; background-position-y: center; background-position-x: 96%; background-size: 13px; cursor: pointer;} select {border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none;} select::-ms-expand {display: none;} /* Title with Buttons */ #title_with_btn {display: table; width: 100%; height: auto;} #title_with_btn .title_txt {display: table-cell; width: auto; height: auto; vertical-align: middle;} #title_with_btn .wrap_btns {display: table-cell; width: auto; height: auto; vertical-align: middle;} #title_with_btn .wrap_btns .wrap_btns2 {display: table; width: auto; height: auto;} #title_with_btn .wrap_btns .wrap_btns2 .btn_img_frame {display: table-cell; height: 40px; border-radius: 6px; border: solid 1px #dbdbdb; background-color: #ffffff; vertical-align: top;} #title_with_btns {display: table; width: 100%; height: auto;} #title_with_btns .title_txt {display: table; width: 100%; height: auto; } #title_with_btns .wrap_btns {display: block; width: 100%; height: auto; } #title_with_btns .wrap_btns .wrap_btns2 {display: table; width: auto; height: auto;} #title_with_btns .wrap_btns .wrap_btns2 .btn_img_frame {display: table-cell; height: 40px; border-radius: 6px; border: solid 1px #dbdbdb; background-color: #ffffff;} /* Button with Image */ .btn_img_frame1 {display: table; width: auto; height: auto;} .btn_img_frame1 .btn_img_frame2 {display: table-cell; vertical-align: top; } .btn_img_frame1 .btn_img_frame2 .btn_img_frame3 {display: block; border-radius: 25px; position: relative; cursor: pointer;} .btn_img_frame1 .btn_img_frame2 .btn_img_frame3 input {position: absolute; top: 0; left: 0; opacity: 0;} .btn_img_frame1 .btn_img_frame2 .btn_img_frame3 .inner {display: table; width: auto; height: 100%; margin: auto;} .btn_img_frame1 .btn_img_frame2 .btn_img_frame3 .inner .ico_frame {display: table-cell; vertical-align: middle;} .btn_img_frame1 .btn_img_frame2 .btn_img_frame3 .inner .txt_frame {display: table-cell; vertical-align: middle;} /* Input with Button */ .wrap_input_box {display: table; width: 100%; height: 40px;} .wrap_input_box .input_frame {width: 100%; height: auto; display: table-cell; vertical-align: bottom;} .wrap_input_box .input_frame .text_input_frame {width: 100%; height: auto;} .wrap_input_box .input_frame .text_input_frame .text_input {width: 100%; height: auto; border: none; border-bottom: solid 1px #dbdbdb; border-radius: 0;} .wrap_input_box .input_frame .text_input_frame.select_frame {width: 100%; height: auto; position: relative;} .wrap_input_box .btn_frame {display: table-cell; vertical-align: middle;} .wrap_input_box .btn_frame .btn_reg_type {border-radius: 4px;} /* Along Button with Image */ .along_btn_img {width: 100%; height: auto;} .along_btn_img .btn_img_frame {height: 40px; border: 1px solid #1089ff;} /* Button Size */ .button_size_120 {width: 120px; height: 50px;} .button_size {width: 146px; height: 50px;} /* Check Box */ .cb_frame_1 {width: 100%; height: 54px; display: table;} .cb_frame_1 .cb_frame_2 {width: auto; height: auto; display: table-cell; vertical-align: middle;} .cb_frame_1 .cb_frame_2 .cb_label_frame {width: auto; height: auto; display: block; position: relative;} /* Remove Arrow Button */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} /* Button Style */ .blue_btn {width: 150px; height: 47px; border-radius: 4px; border: solid 1px #1089ff; background-color: #ffffff;} /* Input File */ .input_file_frame {display: table-cell; width: auto; height: auto; position: relative;} .input_file_frame label {display: table; cursor: pointer;} .input_file_frame label .text_frame {display: table-cell; width: 100%; height: 100%; vertical-align: middle; margin: auto;} .input_file_frame input[type='file'] {display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;} .radius_4 {border-radius: 4px;} /* Input */ /***************************************************************************/ /***************************************************************************/ /* Audio Box */ .audiojs {width: 100%; height: auto; background-color: #fff; overflow: visible;} .audiojs .scrubber {position: relative; width: 100%; background: #fff; height: 5px; overflow: visible; cursor: pointer; border-radius:3px;} .audiojs .scrubber .progress {position: absolute; top: 0px; left: 0px; height: 100%; width: 0px; background: #1089ff; z-index: 3; border-radius:3px;} .audiojs .scrubber .progress .play_circle {position: relative; width: 16px; height: 16px; background-color: #1089ff; margin-left: auto; border-radius: 100%; border: solid 1px #1089ff; top: -5px; left: 0; z-index: 10;} .audiojs .scrubber .loaded {position: absolute; width: 100% !important; top: 0; left: 0; height: 100%; background: #dbdbdb; border-radius:3px;} .audiojs .play_btn_frame {display: table; width: auto; height: auto; margin: auto;} .audiojs .play-pause {display: table-cell; width: 46px; height: 46px; border: solid 1px #1089ff; background-color: #1194ff; border-radius: 100%; cursor: pointer; vertical-align: top;} .audiojs .play {display: none; width: 100%; height: 100%; background-repeat:no-repeat; content:""; background-image: url('../images/btn/btn-play-white.png'); background-position: center center; background-size: 16px auto;} .audiojs .pause {display: none; width: 100%; height: 100%; background-repeat:no-repeat; content:""; background-image: url('../images/btn/btn-pause.png'); background-position: center center; background-size: 16px auto;} .audiojs .play_btn_frame .stop_btn {display: table-cell; width: 46px; height: 46px; border: solid 1px #1089ff; background-color: #fff; border-radius: 100%; margin: auto; cursor: pointer; background-repeat:no-repeat; content:""; background-image: url('../images/btn/btn-stop-blue.png'); background-position: center center; background-size: 16px auto;} .audiojs audio { position: absolute; left: -1px; } .audiojs .play { display: block; } .audiojs .time { display: block; width: 100%; height: auto;} .audiojs .time .played { float: left; } .audiojs .time .duration { float: right; } .audiojs .time em { font-style: normal; } .audiojs .error-message { display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff; text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; } .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; } .playing .play, .playing .loading, .playing .error { display: none; } .playing .pause { display: block; } .loading .play, .loading .pause, .loading .error { display: none; } .loading .loading { display: block; } /* Audio Box */ /***************************************************************************/ /***************************************************************************/ /* Tab Part */ .tab_part {width: 100%; height: auto;} .tab_part .wrap_tab {width: 100%; height: auto; display: table;} .tab_part .wrap_tab .tab {width: 50%; height: 47px; display: table-cell; border-top-right-radius: 10px; border-top-left-radius: 10px; vertical-align: middle; text-align: center; border: solid 1px #dbdbdb; background-color: #fafafa; cursor: pointer;} .tab_part .wrap_tab .tab p {font-size: 14px; font-weight: 500; color: #444444;} .tab_part .wrap_tab .tab.on {border: solid 1px #dbdbdb; border-bottom: none; background-color: white; border-bottom: none;} .tab_part .wrap_tab .tab.on p {font-size: 16px; font-weight: 500; color: #1089ff;} .tab_part .wrap_tab .tab:hover p {color: #1089ff;} .tab_content {display: none;} .tab_content.on {display: block;} /* Tab Part */ /***************************************************************************/ /***************************************************************************/ /* Table */ table {width: 100%; height: auto;} table tr:hover {background-color: #fafafa;} table thead:hover {background-color: #fafafa;} .wrap_list th {padding: 13px 7.5px; text-align: -webkit-center; text-align: center; vertical-align: middle;} .wrap_list td {padding: 13px 7.5px; text-align: -webkit-center; text-align: center; vertical-align: middle;} .wrap_list tr {width: 100%; border-bottom: solid 1px #dbdbdb;} .wrap_list tr.none_line {border-bottom: none;} /* Table */ /***************************************************************************/ /***************************************************************************/ /*pagination button*/ .pagination {height: auto; display: table; margin: 0 auto; padding: 20px 0 10px;} .pagination .pagination_g {display: table;} .pagination .pagination_g li {display: table-cell; vertical-align: middle;} .pagination .pagination_g li a {display: table; width: 50px; height: 50px; border-radius: 8px;} .pagination .pagination_g li a .txt {display: table-cell; vertical-align: middle; text-align: center; font-size: 14px; font-weight: 400;} .pagination .pagination_g li a i.ico {display: table-cell; width: 100%; height: 100%; background-size: 9px auto;} i.ico.prevnext {background-image: url('../images/btn/btn-paging-off.png');} i.ico.prevnext.prev {transform: rotate(-180deg);} .pagination .pagination_g li.act i.ico.prevnext {background-image: url('../images/btn/btn-paging-on.png');} .pagination .pagination_g li:hover .txt {color: #1089ff; font-weight: 600;} .pagination .pagination_g li.act .txt {color: #1089ff; font-weight: 600;} .pagination .pagination_g li.act .txt {border-radius: 8px; background-color: #DBEEFF;} /*pagination button*/ /***************************************************************************/ /***************************************************************************/ /* Layout */ /* Clearfix */ .clearfix::after {content: ''; display:block; clear: both;} .clearfix:after {content: ''; display:block; clear: both;} /* Float ver */ .layout-1 {width: 100%; height: auto;} .layout-1_2 {width: 50%; float: left;} .layout-1_3 {width: 33.3333333333%; float: left;} /* Table ver */ .layout_1_2 {display: table; width: 100%; height: auto;} .layout_1_2 .inner {display: table-cell; width: 50%; vertical-align: top;} .layout_1_3 {display: table; width: 100%; height: auto;} .layout_1_3 .inner {display: table-cell; width: 33.3333333333%; vertical-align: top;} /* Table another ver */ .layout_1_2_s {display: table; width: 100%; height: auto;} .layout_1_2_s .inner_s {display: table-cell; width: 50%; height: auto; vertical-align: top;} /* Write Page Time layout */ .dat_set {display: table-cell; width: 50%; height: auto; vertical-align: top;} .hour_set {display: table-cell; width: 25%; height: auto; vertical-align: top;} .min_set {display: table-cell; width: 25%; height: auto; vertical-align: top;} /* Free ver */ .layout_free {display: table; width: 100%; height: auto;} .layout_free .inner {display: table-cell; height: auto; vertical-align: top;} /* Layout */ /***************************************************************************/ /***************************************************************************/ /* header (top.php) */ #header {width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 50;} #header .wrap {width: 100%; height: auto; padding: 20px 30px; background-color: #fff;} #header .inner {width: 100%; height: auto;} #header .txt {line-height: 1.4; padding-bottom: 6px;} #header .txt:last-child {padding-bottom: 0;} /* header (top.php) */ /***************************************************************************/ /***************************************************************************/ /* footer (footer.php, footer_btn.php) */ #footer {width: 100%; height: auto; } #footer .wrap {width: 100%; height: auto;} #footer .inner {width: 100%; height: auto; padding: 30px; padding-top: 0;} #footer #copyright {width: 100%; height: auto; text-align: right;} /* footer (footer.php, footer_btn.php) */ /***************************************************************************/ /***************************************************************************/ /* SideBar */ #sideNavBar {width: 60px; height: 100%; position: fixed; top: 0; left: 0; overflow: hidden; transition: 0.4s; z-index: 100;} #sideNavBar .inner {width: 100%; height: 100%;} #sideNavBar .wrapNavItems {width: 100%; height: 40px; display: block; cursor: pointer;} #sideNavBar .wrapNavItems.terminalNode {height: 60px;} #sideNavBar .wrapNavItems .navImgFrame {width: 60px; height: 100%; display: block;} #sideNavBar .wrapNavItems .navImgFrame .navImg {width: 18px; height: 100%; background-repeat: no-repeat; background-size: contain; margin: auto; background-position-y: center;} #sideNavBar .wrapNavItems .navTxtFrame {display: none;} #sideNavBar .logoImgFrame {display: none;} #sideNavBar .group {width: 100%; height:auto; display: none; } #sideNavBar.act {width: 260px;} #sideNavBar.act .wrapNavItems {display: table;} #sideNavBar.act .wrapNavItems .navImgFrame {display: table-cell; vertical-align: middle;} #sideNavBar.act .wrapNavItems .navTxtFrame {width: auto; height: 100%; display: table-cell; padding: 10px; vertical-align: middle;} #sideNavBar.act .logoImgFrame {width: 220px; height: 100%; padding-left: 27px; display: table-cell;} #sideNavBar.act .navOpenImgFrame {display: table-cell; width: 80px; height: 100%;} #sideNavBar.act .navLogoImg {width: 72px; height: 100%; background-repeat: no-repeat; background-size: contain; background-position-y: center;} #sideNavBar.act .navImg.navOpenImg {transform: scaleX(-1);} #sideNavBar .group.control {display: block;} #sideNavBar .blank_side_30 {width: 0; height:0; min-width: 0;} #sideNavBar.act .blank_side_30 {width: 70px; height:100%; min-width: 70px;} .menuImg_01 {background-image: url('../images/menu/off/btn-menu-1.png');} .menuImg_02 {background-image: url('../images/menu/off/btn-menu-2.png');} .menuImg_03 {background-image: url('../images/menu/off/btn-menu-3.png');} .menuImg_04 {background-image: url('../images/menu/off/btn-menu-4.png');} .menuImg_05 {background-image: url('../images/menu/off/btn-menu-5.png');} .menuImg_06 {background-image: url('../images/menu/off/btn-menu-6.png');} .menuImg_07 {background-image: url('../images/menu/off/btn-menu-7.png');} .menuImg_08 {background-image: url('../images/menu/off/btn-menu-8.png');} .menuImg_09 {background-image: url('../images/menu/off/btn-menu-9.png');} .menuImg_10 {background-image: url('../images/menu/off/btn-menu-10.png');} .menuImg_11 {background-image: url('../images/menu/off/btn-menu-11.png');} .menuImg_12 {background-image: url('../images/menu/off/btn-menu-12.png');} .menuImg_13 {background-image: url('../images/menu/off/btn-menu-13.png');} .menuImg_14 {background-image: url('../images/menu/off/btn-menu-14.png');} .menuImg_15 {background-image: url('../images/menu/off/btn-menu-15.png');} .menuImg_16 {background-image: url('../images/menu/off/btn-menu-16.png');} .menuImg_17 {background-image: url('../images/menu/off/btn-menu-17.png');} .menuImg_18 {background-image: url('../images/menu/off/btn-menu-18.png'); width: 13px !important;} .menuImg_19 {background-image: url('../images/menu/off/btn-menu-19.png');} .menuImg_mice {background-image: url('../images/menu/off/btn-menu-mic.png');} .menuImg_device {background-image: url('../images/menu/off/btn-menu-device.png');} .menuImg_logout {background-image: url('../images/menu/off/btn-logout.png'); width: 13px;} #sideNavBar .wrapNavItems:hover .menuImg_01 {background-image: url('../images/menu/on/btn-menu-1.png');} #sideNavBar .wrapNavItems:hover .menuImg_02 {background-image: url('../images/menu/on/btn-menu-2.png');} #sideNavBar .wrapNavItems:hover .menuImg_03 {background-image: url('../images/menu/on/btn-menu-3.png');} #sideNavBar .wrapNavItems:hover .menuImg_04 {background-image: url('../images/menu/on/btn-menu-4.png');} #sideNavBar .wrapNavItems:hover .menuImg_05 {background-image: url('../images/menu/on/btn-menu-5.png');} #sideNavBar .wrapNavItems:hover .menuImg_06 {background-image: url('../images/menu/on/btn-menu-6.png');} #sideNavBar .wrapNavItems:hover .menuImg_07 {background-image: url('../images/menu/on/btn-menu-7.png');} #sideNavBar .wrapNavItems:hover .menuImg_08 {background-image: url('../images/menu/on/btn-menu-8.png');} #sideNavBar .wrapNavItems:hover .menuImg_09 {background-image: url('../images/menu/on/btn-menu-9.png');} #sideNavBar .wrapNavItems:hover .menuImg_10 {background-image: url('../images/menu/on/btn-menu-10.png');} #sideNavBar .wrapNavItems:hover .menuImg_11 {background-image: url('../images/menu/on/btn-menu-11.png');} #sideNavBar .wrapNavItems:hover .menuImg_12 {background-image: url('../images/menu/on/btn-menu-12.png');} #sideNavBar .wrapNavItems:hover .menuImg_13 {background-image: url('../images/menu/on/btn-menu-13.png');} #sideNavBar .wrapNavItems:hover .menuImg_14 {background-image: url('../images/menu/on/btn-menu-14.png');} #sideNavBar .wrapNavItems:hover .menuImg_15 {background-image: url('../images/menu/on/btn-menu-15.png');} #sideNavBar .wrapNavItems:hover .menuImg_16 {background-image: url('../images/menu/on/btn-menu-16.png');} #sideNavBar .wrapNavItems:hover .menuImg_17 {background-image: url('../images/menu/on/btn-menu-17.png');} #sideNavBar .wrapNavItems:hover .menuImg_18 {background-image: url('../images/menu/on/btn-menu-18.png');} #sideNavBar .wrapNavItems:hover .menuImg_19 {background-image: url('../images/menu/on/btn-menu-19.png');} #sideNavBar .wrapNavItems:hover .menuImg_mice {background-image: url('../images/menu/on/btn-menu-mic-on.png');} #sideNavBar .wrapNavItems:hover .txt_input {font-weight: 700;} .logoImg {background-image: url('../images/logo/logo-white.png');} .navOpenImg {background-image: url('../images/btn/btn-menu-open.png');} .bg_cblue3 {background-color: #beebff;} /* SideBar */ /***************************************************************************/ /***************************************************************************/ /* newRegistration (newRegistration.php) */ #userRegistrationPage .reg_white_box {width: 100%; height: auto; padding: 10px; border-radius: 15px; background-color: #fff;} #userRegistrationPage .wrap_content_inner {width: 100%; height: auto; padding: 20px;} #userRegistrationPage .wrap_reg_items {width: auto; height: auto;} #position_select {width: 100%; height: 100%;} .wrap_input_box .input_frame .text_input_frame.select_frame .select_img_frame {width: 10px; height: 25px; position: absolute; top: 0; right: 0;} .wrap_input_box .input_frame .text_input_frame.select_frame .select_img_frame .select_img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-image: url('../images/btn/btn-dropdown.png'); background-position-y: center;} #userRegistrationPage .wrap_input_box .input_frame .text_input_frame.select_frame {width: 50%;} .wrap_bottom_btn {width: auto; height: auto;} .wrap_bottom_btn .btn_frame_1 {width: 100%; height: auto; display: table; float: right;} .wrap_bottom_btn .btn_frame_2 {width: 50%; height: auto; display: table-cell;} .wrap_bottom_btn .reg_btn_basic {width: 100%; height: 49px; border-radius: 24.5px; border: solid 1px #dbdbdb; cursor: pointer;} /* newRegistration (newRegistration.php) */ /***************************************************************************/ /***************************************************************************/ /* login_page (login.php) */ .wrap_login_page {width: 100%; height: 100%; display: table;} #wrap_login_content {width: 41%; height: 100%; display: table-cell; vertical-align: middle; padding: 30px 80px;} #wrap_login_content .table_row_frame {width: 100%; height: auto;} #wrap_login_content .table_row_frame2 {display: block; width: 100%; height: 100%;} #wrap_login_content .login_frame {width: 100%; height: 100%; display: block;} #wrap_login_content .login_frame .wrap_login_title {display: block; width: 100%; height: auto;} #wrap_login_content .login_frame .wrap_cb_btn {width: 100%; height: auto;} #wrap_login_content .login_frame .wrap_cb_btn .cb_label_frame {width: auto; height: auto; float: left;} #wrap_login_content .login_frame .search_btn {width: auto; height: auto; float: right;} #wrap_login_content .login_frame .btn_frame {width: 100%; height: 60px;} #wrap_login_content .login_frame .login_question_txt {width: 100%; height: auto;} #wrap_login_content .login_frame .wrap_login_question_txt {display: table; width: auto; height: auto; padding-top: 40px; margin: auto;} #wrap_login_content .login_frame .question_txt {display: table-cell;} #wrap_login_content .login_frame .question_a {display: table-cell;} #wrap_login_img {width:59%; height: 100%; display: table-cell; background-image: url('../images/img/img-login.png'); background-size: cover; background-position: center;} #wrap_login_img .login_color {display: block; width: 100%; height: 100%; background-color: rgba(16, 137, 255, 0.4);} #wrap_login_img .login_color .login_img_frame_1 {display: table; width: 100%; height: 100%; padding: 50px 80px;} #wrap_login_img .login_color .login_img_frame_1 .login_img_frame_2 {display: table-row; width: 100%; height: 100%;} #wrap_login_img .login_color .login_img_frame_1 .login_img_frame_2 .login_img_frame_3 {width: 100%; height: auto; display: table-cell; vertical-align: middle; text-align: right;} #wrap_login_img .login_color .login_img_frame_1 .wrap_login_logo_img {display: table-row; width: 100px; height: 30px;} #wrap_login_img .login_color .login_img_frame_1 .wrap_login_logo_img .ico {background-position: right;} /* login_page (login.php) */ /***************************************************************************/ /***************************************************************************/ /* Send Page */ #sendPage {display: table; width: 100%; height: auto;} #sendPage .layer_frame {display: table-cell; height: auto; vertical-align: top;} #sendPage .square_parts {width: 100%; height: auto; border-radius: 10px; border: solid 1px #dbdbdb; background-color: #ffffff;} #sendPage .textarea_frame {width: 100%; height: auto;} #sendPage .textarea_i {height: 604px; width: 289px; padding: 44px 22px; margin: auto;} #sendPage .textarea_i #senderNum {width: 100%; height: auto; border: none; border-bottom: solid 1px #dbdbdb; border-radius: 0;} #sendPage .textarea_i #subject {width: 100%; height: auto; border: none; border-bottom: solid 1px #dbdbdb; border-radius: 0;} #sendPage .textarea_i #msgContent {height: 300px; border: none;} #sendPage .textarea_i .bottom_txt_frame {width: 100%;} #sendPage .addselfFrame {display: table; width: 100%;} #sendPage .input_text_btn input[type='text'], #sendPage .input_text_btn input[type='number'] { display: block; width: 100%; height: 100%; padding: 0 10px; border: none;} #sendPage .table_height_btn {height: 458px;} #sendPage input[type='submit'] {width: 100%; height: 40px; border-radius: 8px; border: solid 1px #1089ff; background-color: #fff; cursor: pointer;} #sendPage #pre_listening_btn .ico_frame {width: 11px;} /* Rsdn */ #rsdnSendPage .how_selected_send {width: 100%; border-bottom: 1px solid #dbdbdb; padding-bottom: 5px;} #rsdnSendPage .wrap_cb_label_frame { width: fit-content; margin: auto;} #rsdnSendPage .cb_label_frame .cb_hidden + label {cursor: pointer;} #rsdnSendPage .wrap_cb_label_frame .cb_label_frame .cb_hidden:checked + label .label_inner_frame p {color: #1089ff; font-weight: 900;} #rsdnSendPage .textarea_i #msgContent {height: 303px;} #rsdnSendPage #choose_group {height: 562px;} /* POP */ #popSelectAddrbk .addrbkFrame {display: table; width: 100%;} #popSelectAddrbk .addrbkFrame .part {display: table-cell; height: 100%; border: solid 1px #dbdbdb; background-color: #ffffff; border-radius: 10px; vertical-align: top;} #popSelectAddrbk .addrbkFrame .group {width: 50%; min-width: 310px;} #popSelectAddrbk .addrbkFrame .list {width: 50%;} #popSelectAddrbk .wrap_list {height: 360px;} #popSelectAddrbk #choose_group {border: none; background-color: transparent;} .width_40per {width: 40% !important;} .width_20per {width: 20% !important;} #sendPage .layer_frame.width_70per {min-width: 650px;} .insert_btn {width: 60px; height: 46px !important;} /* / Send Page */ /***************************************************************************/ /***************************************************************************/ /* Rsdn Send Page */ /* Rsdn Send Page */ /***************************************************************************/ /***************************************************************************/ /* Send Text (sendText.php) */ #sendText {display: block; width: 100%; height: auto;} .media_table {display: table; width: 100%; height: auto;} .media_table .media_table_2{display: table-cell; width: 50%; height: auto; vertical-align: top;} .media_table .media_table_2 .media_table_3 {display: table; width: 100%; height: auto;} #sendText .white_box {display: table-cell; height: auto; vertical-align: top;} #sendText #people_list {width: 100%;} #sendText #done_page {width: 50%;} #sendText #write_page {width: 50%;} #done_page .square_parts {width: 100%; height: auto; border-radius: 10px; border: solid 1px #dbdbdb; background-color: #ffffff; vertical-align: top;} #people_list .title_txt_frame {width: 100%; height: auto;} #people_list .wrap_parts {display: table; width: 100%; height: auto; table-layout: fixed;} #people_list .wrap_parts .square_parts {display: table-cell; width: 50%; height: auto; border-radius: 10px; border: solid 1px #dbdbdb; background-color: #ffffff; vertical-align: top;} #people_list .wrap_parts .square_parts .inner {width: 100%; height: auto;} #people_list .wrap_parts .choose_part.square_parts {border: none;} /* Table Height */ .wrap_list {width: 100%; height: 600px;} .table_height_btn {width: 100%; height: 524px;} .table_height_btn2 {width: 100%; height: 489px;} /* Choose Group Part */ #choose_group {width: 100%; height: 700px; border: solid 1px #dbdbdb; border-top: none; background-color: #ffffff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} #choose_group .people_list {width: 100%; height: auto;} #choose_group .label_inner_frame {position: relative; margin-right: auto;} #choose_group table .cb_img {width: 20px; height: 20px;} #choose_group .open_img_frame {display: table-cell; width: 30px; height: 100%; vertical-align: middle; cursor: pointer;} #choose_group .open_img_frame .img_size {width: 15px; height: 10px;} /* Group Table Setting */ #choose_group .people_list table {width: 100%; height: auto; border-collapse: inherit;} #choose_group .people_list th {width: 100%; height: auto; padding: 0;} #choose_group .people_list td {width: 100%; height: auto; padding: 0;} #people_list .btn_part {display: table-cell; width: 10%; height: auto; text-align: center; vertical-align: middle;} #people_list .btn_part .btn_img_frame {width: 100px; height: 50px; border-radius: 4px; border: solid 1px #1089ff; background-color: #ffffff;} #people_list .btn_part .btn_img_frame .ico_frame {width: 15px; height: 15px;} #write_page .wrap_write_content {width: 100%; height: auto;} #write_page .textarea_frame {width: 100%; height: auto; margin: auto; } #write_page .textarea_frame .textarea_i {width: 242px; height: 258px; min-width: 240px; min-height: 250px; margin: auto; position: relative;} #write_page .textarea_frame textarea {width: 100%; height: 90%; resize: none; border: none !important; padding: 40px 20px 10px 20px;} .textarea_frame .textarea_p {font-size: 14px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: -0.33px; color: #9b9b9b; text-align: right;} #write_page .wrap_bottom_btn .btn_img_frame {width: 100%; height: 40px;} #write_page .select_frame {height: 46px;} /* POP Special Charater Setting */ #sendPage .pop_location {display: none; position: absolute; width: auto; height: auto; z-index: 100; top: 80; left: 283px;} #pop_special_character {width: 100%; height: auto;} #pop_special_character .pop_white_box td {padding: 15px; border: solid 1px #dbdbdb; cursor: pointer;} #pop_special_character .pop_white_box tr:hover {background-color: unset;} #pop_special_character .pop_white_box td:hover {background-color: #fafafa;} #pop_special_character .pop_white_box table {border: solid 3px #fff;} /* Send Text (sendText.php) */ /***************************************************************************/ /***************************************************************************/ /* Resident Administration Page (residentAdministration.php) */ #resident_administration {display: table;} #resident_administration .inner {display: block; width: 100%; height: auto; table-layout: fixed;} #resident_administration .wrap_choose_group {display: table-cell; width: 50%; height: auto; vertical-align: top;} #resident_administration .wrap_choose_group .frame_arrange {display: table; width: 100%; height: auto; table-layout: fixed; padding: 0 30px 30px 30px;} #resident_administration .wrap_choose_group .frame_arrange .wrap_list_1 {display: table-cell; width: 56%; height: auto; vertical-align: top;} #resident_administration .wrap_choose_group .frame_arrange .wrap_list_1 #choose_group {border: solid 1px #dbdbdb; border-radius: 10px;} #resident_administration .wrap_choose_group .frame_arrange .wrap_list_2 {display: table-cell; width: 44%; height: auto; border: solid 1px #dbdbdb; border-radius: 10px; vertical-align: top;} #device_village_setting #resident_administration .wrap_choose_group {width: 65%;} #device_village_setting #resident_administration .wrap_people_list {width: 35%;} #device_village_setting #resident_administration .wrap_choose_group .frame_arrange .wrap_list_1 {width: 50%;} #device_village_setting #resident_administration .wrap_choose_group .frame_arrange .wrap_list_2 {width: 50%;} #device_village_setting #resident_administration .wrap_choose_group .frame_arrange .wrap_list_2 {width: 50%;} /* Table Height */ #resident_administration #choose_group2 {max-height: 624px;} #device_village_setting .table_height_btn {height: 521px;} #device_village_setting #choose_group {height: 777px;} #resident_list .wrap_cb_label_frame {width: 100%;} #resident_list .frame_buttons {display: table-cell; vertical-align: middle;} #resident_list .frame_buttons .frame_buttons_2 {min-width: 60px; display: table;} #resident_list .frame_buttons .frame_buttons_2 .modify_img_frame {display: table-cell; width: 14px; height: 14px; cursor: pointer;} #resident_list .frame_buttons .frame_buttons_2 .vertical_line {display: table-cell; width: 1px; height: 17px; background-color: #c6f0e4;} #resident_list .frame_buttons .frame_buttons_2 .del_img_frame {display: table-cell; width: 11px; height: 14px; cursor: pointer;} #resident_administration #title_with_btn {height: auto;} #resident_administration #title_with_btn .wrap_btns {height: auto;} #resident_administration .wrap_people_list {display: table-cell; width: 50%; height: auto;} #resident_administration .wrap_list {max-height: 568px;} #resident_administration .wrap_list table {width: 100%; height: auto;} #resident_administration .wrap_list thead {border-bottom: solid 2px #1089ff;} #resident_administration .wrap_list thead:hover {background-color: #fafafa;} #resident_administration #resident_list .open_img_frame {display: table-cell; width: 90px; height: 100%; vertical-align: middle; padding: 15px;} #resident_administration #choose_group2 #jstree2 {height: 571px !important; overflow: auto;} #resident_administration #choose_group .jsonTreeBox {height: 647px !important;} /* Resident Administration Page (residentAdministration.php) */ /***************************************************************************/ /***************************************************************************/ /* Address Administration Page (addressAdministration.php) */ #address_administration {display: table; table-layout: fixed;} #address_administration .inner {display: table; width: 100%; height: auto; table-layout: fixed;} #address_administration .wrap_choose_group {display: table-cell; width:34%; height: auto; vertical-align: top;} #address_administration .wrap_choose_group .frame_arrange {padding: 0 30px 30px 30px;} #address_administration .wrap_people_list {display: table-cell; width: 66%; height: auto;} #address_administration .wrap_list {height: 600px;} /* Address Administration Page (addressAdministration.php) */ /***************************************************************************/ /***************************************************************************/ /* Usage Application Page (usage_application.php) */ #usage_applicaion_page {width: 100%; height: auto; background-color: white;} #usage_applicaion_page .page {width: 60%; height: auto; margin: auto;} #usage_applicaion_page .page .wrap_title {width: 100%; height: auto; text-align: center;} #usage_applicaion_page .page .frame_part {width: 100%; height: auto; padding: 40px; border-radius: 8px; border: solid 1px rgba(16, 137, 255, 0.5); background-color: white;} #usage_applicaion_page .page .frame_part .inner {width: 80%; height: auto; margin: auto;} #usage_applicaion_page .page .frame_part .inner .consent_frame {width: 100%; height: 151px; border-radius: 4px; border: solid 1px #dbdbdb; padding: 15px;} #usage_applicaion_page .page .frame_part .inner .consent_frame .inner {width: 100%; height: auto;} #usage_applicaion_page .wrap_bottom_btn {width: 100%; height: auto; padding: 40px 0;} .sign_frame {width: 100%; height: 110px; border-radius: 5px; border: solid 1px #dbdbdb; background-color: #ffffff;} .sign_frame .sign_img {width: 192px; height: 100%; margin: auto; border: none;} .consent_frame p {line-height: 18px;} /* Under Line */ .under_line {width: 100%; border: solid 1px #dbdbdb;} /* Usage Application Page (usage_application.php) */ /***************************************************************************/ /***************************************************************************/ /* POP Message Box */ #message_box .tab_part {width: 50%;} #message_box .wrap_content {display: table; width: 100%; height: auto; padding: 0; table-layout: fixed;} #message_box .wrap_content .wrap_content_1 {display: table-cell; width: 70%; height: auto; padding: 0; vertical-align: top;} #message_box .wrap_content .wrap_content_2 {display: table-cell; width: 30%; height: auto; padding: 0; vertical-align: top;} .wrap_bottom_btn {display: block; width: 100%; height: auto;} .wrap_bottom_btn .wrap_bottom_button {display: table; width: auto; height: 100%;} #message_box .textarea_frame textarea {height: 300px;} #message_box_latest #message_box .textarea_frame textarea {height: 288px;} #message_box .wrap_list {height: 100%;} #con_bottom_btn {position: inherit;} /* Table */ #message_box .wrap_list thead {border-bottom: solid 2px #1089ff;} /* POP Message Box */ /***************************************************************************/ /***************************************************************************/ /* button */ .btn {cursor: pointer; position: relative;} .btn_sec .btn_group {width: 100%; height: auto;} /* label style */ .input_input_frame2 .btn_label {width: auto;} .input_input_frame2 .btn_label label {display: table; position: relative; overflow: hidden; padding-right: 5px;} .input_input_frame2 .btn_label label .label_input_hidden {display: block; width: 1px; height: 1px; visibility: hidden; opacity: 0; position: absolute; top: -1px; left: -1px;} .input_input_frame2 .btn_label label .label_input_hidden + .txt_frame {padding: 0; text-align: center;} .input_input_frame2 .btn_label label .label_input_hidden + .txt_frame .txt {font-size: 14px; font-weight: 400; padding: 12px 18px; color: #9b9b9b; border: 1px solid #dbdbdb; border-radius: 20px; transition: 0.2s;} .input_input_frame2 .btn_label label .label_input_hidden:checked + .txt_frame .txt {border: 1px solid #1089ff; color: #1089ff; font-weight: 400;} /* checkbox_label style */ .cb_label_frame {width: auto; height: auto; position: relative;} .cb_label_frame label {display: block; width: auto; height: auto; cursor: default;} .cb_label_frame .cb_hidden {display: block; position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; opacity: 0;} .cb_label_frame .cb_hidden + label {display: block; width: auto; height: auto; cursor: default;} .cb_label_frame .cb_hidden + label .label_inner_frame {width: auto; height: auto; display: table;} .cb_label_frame .cb_hidden + label .label_inner_frame .cb_txt_frame {width: auto; height: auto; display: table-cell; vertical-align: middle;} .cb_label_frame .cb_hidden + label .label_inner_frame .cb_img {width: 22px; height: 22px; position: table-cell; background-image: url('../images/btn/btn-checkbox-off.png'); background-size: contain;} .cb_label_frame .cb_hidden:checked + label .label_inner_frame .cb_img {background-image: url('../images/btn/btn-checkbox-on.png'); background-size: contain; background-position: center;} /* checkbox_label onlyImg style */ .cb_label_onlyImg_frame {display: table; width: 100%; height: auto; position: relative; margin-right: auto; table-layout: fixed;} .cb_label_onlyImg_frame .cb_txt_frame {width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: left;} .cb_label_onlyImg_frame .cb_hidden {display: block; position: absolute; top: -1px; left: -1px; width: 1px; height: 1px; opacity: 0;} .cb_label_onlyImg_frame .cb_hidden + label {display: table-cell; width: 45px; height: auto; cursor: default; padding: 13px 8px 13px 13px; vertical-align: middle;} .cb_label_onlyImg_frame .cb_hidden + label .label_inner_frame {width: auto; height: 100%; display: table;} .cb_label_onlyImg_frame .cb_hidden + label .label_inner_frame .cb_img {width: 22px; height: 22px; ; background-image: url('../images/btn/btn-checkbox-off.png'); background-size: contain;} .cb_label_onlyImg_frame .cb_hidden:checked + label .label_inner_frame .cb_img {background-image: url('../images/btn/btn-checkbox-on.png'); background-size: contain; background-position: center;} /* radio_label style */ .wrap_cb_label_frame {width: auto; height: auto; display: table; } .wrap_cb_label_frame .cb_label_frame {height: auto; display: table-cell; vertical-align: middle; vertical-align: top;} .wrap_cb_label_frame .cb_label_frame .cb_hidden + label .label_inner_frame .rb_img {width: 22px; height: 22px; ; background-image: url('../images/btn/btn-radio-off.png'); background-size: contain;} .wrap_cb_label_frame .cb_label_frame .cb_hidden:checked + label .label_inner_frame .rb_img {background-image: url('../images/btn/btn-radio-on.png'); background-size: contain; background-position: center;} .cb_label_frame .cb_hidden + label .label_inner_frame .rb_img {width: 22px; height: 22px; ; background-image: url('../images/btn/btn-radio-off.png'); background-size: contain;} .cb_label_frame .cb_hidden:checked + label .label_inner_frame .rb_img {background-image: url('../images/btn/btn-radio-on.png'); background-size: contain; background-position: center;} #choose_sex_rd {display: table; width: 200px; height: auto;} #choose_sex_rd .btn_label {display: table-cell; width: 50%; height: 100%; vertical-align: top;} #choose_sex_rd .btn_label label {padding: 0 15px 0 0;} #choose_sex_rd .btn_label label .label_input_hidden {display: block; width: 1px; height: 1px; visibility: hidden; opacity: 0; position: absolute; top: -1px; left: -1px;} #choose_sex_rd .btn_label label .label_input_hidden + .txt_frame .txt {border-radius: 5px; border: solid 1px #dbdbdb; background-color: #ffffff; padding: 15px 40px; font-size: 14px; font-weight: 400; color: #dbdbdb; text-align: center;} #choose_sex_rd .btn_label label .label_input_hidden:checked + .txt_frame .txt {border: solid 1px #1089ff; color: #1089ff;} #how_send_rd {display: table; width: 100%; height: 100px;} #how_send_rd .btn_label {display: table-cell; width: 50%; height: 100%; vertical-align: top;} #how_send_rd .btn_label label {display: block; padding: 0; width: 100%; height: 100%;} #how_send_rd .btn_label label .label_input_hidden {display: block; width: 1px; height: 1px; visibility: hidden; opacity: 0; position: absolute; top: -1px; left: -1px;} #how_send_rd .btn_label label .label_input_hidden + .txt_frame {display:table; width:100%; height: 100%; border-radius: 5px; border: solid 1px #dbdbdb; background-color: #ffffff; text-align: center;} #how_send_rd .btn_label label .label_input_hidden + .txt_frame .txt {display:table-cell; vertical-align: middle; font-size: 14px; font-weight: 400; color: #dbdbdb; transition: 0.2s;} #how_send_rd .btn_label label .label_input_hidden:checked + .txt_frame {border: solid 1px #1089ff;} #how_send_rd .btn_label label .label_input_hidden:checked + .txt_frame .txt {color: #1089ff;} /* btn_img style */ .btn_img_frame {display: block; height: 100%; cursor: pointer; position: relative; margin: auto; border-radius: 6px; border: solid 1px #dbdbdb; background-color: white;} .btn_img_frame .btn {position: absolute; top: 0; left: 0; opacity: 0;} .btn_img_frame .btn_inner {width: auto; height: auto; margin: auto; display: table; height: 100%;} .ico_frame {width: 14px; height: 100%; display: table-cell; vertical-align: middle;} .btn_img_frame .btn_inner .txt_frame {display: table-cell; vertical-align: middle;} /* input submit | reset style */ .btn input[type='submit'], .btn input[type='reset'] {position: absolute; top: 0; left: 0; opacity: 0;} /* round button */ .btn_round {font-size: 14px; padding: 14px 40px; border-radius: 24px; min-width: 146px;} /* button color */ .btn_mainc {background-color: #1089ff;} .btn_mainc .txt {color: #fff;} .btn_mainborder {border: 1px solid #1089ff;} /*.btn_mainborder .txt {color: #1089ff;}*/ /*white box button*/ .btn_white {font-size: 12px; padding: 10px 15px; min-width: 130px; border: 1px solid #dbdbdb; border-radius: 6px; background-color: #fff;} .btn_white .txt {font-size: 12px;} /*icon + txt style*/ .btn_icotxt {display: table;} .btn_icotxt::after {content: ''; display: block; clear: both;} .btn_icotxt:after {content: ''; display: block; clear: both;} .btn_icotxt .ico_frame {display: table-cell; vertical-align: middle;} .btn_icotxt .txt_frame {padding-left: 6px; display: table-cell; vertical-align: middle;} .btn_icotxt i.ico_search {font-size: 14px; width: 18px; height: 18px;} .btn_icotxt i.ico_cancel {font-size: 14px; width: 12px; height: 12px;} /* btn style */ .btn_basic_main {width: 100%; height: 100%; border-radius: 30px; box-shadow: 0 7px 17px 0 rgba(0, 0, 0, 0.15); background-color: #1089ff;} /* button */ /***************************************************************************/ /***************************************************************************/ /* White Box */ .white_box {width: 100%; height: auto; border-radius: 15px; background-color: #fff;} /* White Box */ /***************************************************************************/ /***************************************************************************/ /* Statistics Term */ #how_send_rd.small_ver .btn_label {width: 56px; height: 40px;} #how_send_rd.small_ver .btn_label label .label_input_hidden + .txt_frame .txt {padding: 0; border-radius: 20px; padding: 12px 18px;} #how_send_rd.small_ver .btn_label label .label_input_hidden:checked + .txt_frame .txt {padding: 0; border-radius: 20px; padding: 12px 18px;} #chart_table {display: block; width: 100%; height: auto;} #chart_table table td, #chart_table table th {padding: 15px 7.5px; text-align: center; vertical-align: middle;} #chart_table table tr {border-bottom: solid 1px #dbdbdb;} .pop_white_box #chart_table {height: 100%;} /* Statistics Term */ /***************************************************************************/ /***************************************************************************/ /* 기타 */ #write_page #setting_send .select_frame {height: auto;} .width_num {width: 10%; max-width: 70px;} .width_tit {width: 30%; min-width: 200px; max-width: 300px;} .width_con {width: 60%; max-width: 500px;} .minWidth_385 {min-width: 385px;} .minWidth_300 {min-width: 300px;} .minWidth_270 {min-width: 270px;} .minWidth_200 {min-width: 200px;} .minWidth_150 {min-width: 150px;} .minWidth_120 {min-width: 120px;} .minWidth_100 {min-width: 100px;} .minWidth_80 {min-width: 80px;} .minWidth_70 {min-width: 70px;} .minWidth_65 {min-width: 65px;} .minWidth_62 {min-width: 62px;} .minWidth_60 {min-width: 60px;} .minWidth_50 {min-width: 50px;} .minWidth_40 {min-width: 40px;} .minWidth_30 {min-width: 30px;} .max_width_200 {max-width: 200px;} .max_width_300 {max-width: 300px;} .max_width_400 {max-width: 400px;} .width_fix_30 {min-width: 30px; width: 30px; max_width:30px;} .width_fix_100 {min-width: 100px; width: 100px; max_width:100px;} .width_100per {width: 100%;} .width_50per {width: 50%;} .width_25per {width: 25%;} .width_20per {width: 20%;} .width_10per {width: 10%;} .height_450 {height: 450px;} .max_height_500 {max-height: 500px;} .height_520 {height: 520px;} .height_40 {height: 40px;} .height_140 {height: 140px;} .height_300 {height: 300px;} .long_pop_page {width: 100%; height: 100%;} .display_none {display: none;} /* Table Head */ .table_head {width: 100%; height: auto; display: block; border-top-right-radius: 10px; border-top-left-radius: 10px; border: solid 1px #dbdbdb; background-color: white; border-bottom: 0;} .float_l {float: left !important;} .float_r {float: right !important;} .group_txt {width: 100%; height: 47px; display: table-cell; border-top-right-radius: 10px; border-top-left-radius: 10px; vertical-align: middle; text-align: center; border: solid 1px #dbdbdb;} #rsdnSendPage .jsonTreeBox {height: 516px; border: none;} /* 조회페이지 길이고정 */ #statistics_term {min-width: 1318px;} #connection_history {min-width: 774px;} #msgResult_list {min-width: 1415px;} #msgReservation_list {min-width: 1415px;} #rsltList {min-width: 1338px;} .table_del_btn .ico_frame {width: 12px;} input[type=text]::-ms-clear{display: none;} .btn_img_frame a {display:block; width: 100%; height: 100%;} /* 버튼 색 */ #title_with_btn .wrap_btns .wrap_btns2 .btn_img_frame {background-color: #fafafa !important;} .btn_img_frame {background-color: #fafafa;} #device_setting .frame_arrange {display: table;} #device_setting .inner_inner {display: table; width: 100%;} #device_setting .inner_inner .part {display: table-cell; height: 100%; border: solid 1px #dbdbdb; background-color: #ffffff; border-radius: 10px; vertical-align: top;} #device_setting .inner_inner .group {width: 30%; min-width: 250px;} #device_setting .inner_inner .list {width: 35%;} #device_setting .inner_inner .list2 {width: 35%;} #device_setting #choose_group {border: none; background-color: transparent;} #device_setting .table_height_btn {height:498px; } #device_setting .wrap_list {height: 498px;} #device_village .jstree #jTreeRightBtn {display: none;} #setSend .nice-select {padding-left: 1px;} /* 기타 */ /***************************************************************************/ /***************************************************************************/ /* media query */ @media screen and (max-width: 1615px) { /* Send Text */ /* #sendText .wrap_input .select_frame {display: table-row; width: 100%; vertical-align: top;} #sendText .wrap_input .inputTxt_frame {display: table-row; width: 100%; vertical-align: top;} #sendText #choose_group {height: 751px;} #sendText #title_with_btns .wrap_btns .wrap_btns2 {display: block;} #sendText #title_with_btns .wrap_btns .wrap_btns2 .btn_img_frame {display: block; width: 100%;} */ #sendText .media_table {display: block; width: 100%;} #sendText .media_table .media_table_2 {display: block; width: 100%;} /* POP */ .pop_width_30 {width: 50%;} .pop_width_65 {width: 80%;} } @media screen and (max-width: 1350px) { /* Login */ .txt_login_1 {font-size: 50px;} .txt_login_2 {font-size: 20px;} .txt_login {font-size: 35px;} #wrap_login_content {width: 45%; padding: 30px;} #wrap_login_img {width:55%;} #wrap_login_img .login_color .login_img_frame_1 {padding: 50px;} } @media screen and (max-width: 1280px) { /* Text */ .txt_14 {font-size: 12px !important;} .txt_normal {font-size: 12px;} .txt_input {font-size: 12px; } .txt_input2 {font-size: 12px;} .txt_input2_bold {font-size: 12px;} .txt.descript {font-size: 12px;} .txt.con_tit {font-size: 18px; } .txt.pg_tit {font-size: 20px; } .txt.pop_title_txt {font-size: 22px;} input::placeholder {font-size: 12px;} textarea::placeholder {font-size: 12px;} #write_page .textarea_frame .textarea_p {font-size: 12px;} /* Padding */ .pdBottom_30 {padding-bottom: 20px !important;} .pdBottom_40 {padding-bottom: 30px !important;} .pdTop_30 {padding-top: 20px;} .blank_side_15 {width: 10px; height: 10px; min-width: 10px;} .blank_side_30 {width: 20px; height: 20px; min-width: 20px;} .blank_side_20 {width: 15px; height: 15px; min-width: 15px;} .pdAll_30 {padding: 20px;} .padding_side_30 {padding-left: 20px; padding-right: 20px;} .pdBottom_15 {padding-bottom: 10px !important;} #resident_administration .wrap_choose_group .frame_arrange {padding: 0 20px 20px 20px;} /* Input Button Size */ .button_size {width: 130px; height: 40px;} .button_size_120 {width: 100px; height: 40px;} .input_basic_2 {height: 40px;} .input_text_btn {height: 40px;} .btn_label label .label_input_hidden + .txt_frame .txt {padding: 10px 16px;} #title_with_btn .wrap_btns .wrap_btns2 .btn_img_frame {height: 35px;} #title_with_btns .wrap_btns .wrap_btns2 .btn_img_frame {height: 35px;} .select_frame_btn {height: 40px;} #write_page .wrap_bottom_btn .btn_img_frame {height: 35px; width: 100%;} .wrap_bottom_btn .reg_btn_basic {height: 40px;} .insert_btn {width: 60px; height: 40px !important;} .btn_img_frame.send_btn {width: 90px; min-width: 90px;} /* Resident Administration */ #resident_administration .wrap_choose_group .frame_arrange .wrap_list_1 {display: table; width: 100%; padding-bottom: 30px;} #resident_administration .wrap_choose_group .frame_arrange .wrap_list_2 {display: table; width: 100%;} #resident_administration #choose_group {max-height: 500px;} #resident_administration #resident_list {max-height: 400px;} #resident_administration .wrap_list {max-height: 860px;} #resident_administration #choose_group .jsonTreeBox {height: 454px !important;} /* Special Charater POP */ #pop_special_character .pop_white_box {padding: 30px;} #pop_special_character .pop_white_box td {padding: 10px;} #sendText .pop_location {left: -370px} /* POP Heigth Control */ .height_group_control {height: 80% !important;} /* Table Height */ #people_list .inner .wrap_list.table_height_btn {height: 505px;} #people_list .inner .wrap_list {height: 550px;} /* Table Padding */ .cb_label_onlyImg_frame .cb_hidden + label {padding: 10px;} #choose_group .open_img_frame {padding: 10px;} .wrap_list th, .wrap_list td {padding: 11px 7.5px;} /* Table height */ #sendText #choose_group {height: 662px;} #people_list .inner .wrap_list.table_height_btn2 {height: 510px;} .height_40 {height: 35px;} #address_administration .wrap_choose_group .frame_arrange {padding: 0 20px 20px 20px;} .table_del_btn .ico_frame {width: 10px;} /* Device Village Setting */ #device_village_setting #resident_administration .wrap_choose_group {width: 50%;} #device_village_setting #resident_administration .wrap_people_list {width: 50%;} #device_village_setting #resident_administration .wrap_choose_group .frame_arrange .wrap_list_1 {width: 100%;} #device_village_setting #resident_administration .wrap_choose_group .frame_arrange .wrap_list_2 {width: 100%;} } @media screen and (max-width: 1200px) { /* Send Text */ #people_list .btn_part {display: table; width: 100%; padding: 30px;} #people_list .btn_part .btn_img_frame {width: 200px;} #sendText .wrap_parts .square_parts.media_width_100 {display: table; width: 100%;} #sendText .wrap_input .select_frame {display: table-cell; width: 30%; vertical-align: top;} #sendText .wrap_input .inputTxt_frame {display: table-cell; width: 70%; vertical-align: top;} /* POP Message Box */ #message_box .wrap_content {display: block;} #message_box .wrap_content .wrap_content_1 {display: block; width: 100%;} #message_box .wrap_content .wrap_content_2 {display: block; width: 100%;} /* Table height */ #sendText #choose_group {height: 627px;} /* Resident Administration */ #resident_administration .wrap_people_list #title_with_btn .wrap_btns .wrap_btns2.media_float {float: left !important;} #resident_administration #title_with_btn.only_btns .wrap_btns {display: table-row;} /* Combined Send */ #combined_send .layout_1_2 {display: block; width: 100%;} #combined_send .layout_1_2 .inner {display: block; width: 100%;} /* Search Box */ .input_input_frame2 .btn_label label .label_input_hidden + .txt_frame .txt {padding: 10px 13px;} } @media screen and (max-width: 1100px) { #origin #address_administration {display: block;} #origin #address_administration .wrap_choose_group {display: block; width: 100%;} #origin #address_administration .wrap_people_list {display: block; width: 100%;} } @media screen and (max-width: 1080px) { /* POP */ .pop_width_40 {width: 60%;} .pop_width_30 {width: 60%;} /* Usage Application */ #usage_applicaion_page .page {width: 80%;} .search_box .width_24per {width: 48%;} /* Address Administration */ #user_administration #address_administration .wrap_choose_group {width: 50%;} #user_administration #address_administration .wrap_people_list {width: 50%;} } @media screen and (max-width: 980px) { /* Residentail Administration */ #resident_administration {display: block;} #resident_administration .wrap_choose_group {display: table; width: 100%;} #resident_administration .wrap_people_list {display: block; width: 100%;} /* Combined Layout */ #combined_send .layout_1_2_s {display: block; width: 100%;} #combined_send .layout_1_2_s .inner_s {display: block; width: 100%;} /* Device Village Setting */ #device_village_setting #resident_administration .wrap_choose_group {width: 100%;} #device_village_setting #resident_administration .wrap_people_list {width: 100%;} } @media screen and (max-width: 900px) { /* Send Text */ #sendText .wrap_parts .square_parts {display: table; width: 100%; padding-bottom: 30px; table-layout: fixed;} #sendText .media_table .media_table_2 .media_table_3 {display: block; width: 100%;} #sendText #done_page {display: block; width: 100%;} #sendText #write_page {display: block; width: 100%;} #sendText .pop_location {left: -62px; top: 270px;} } @media screen and (max-width: 768px) { /* POP Padding */ .pop_width_65 {width: 90%;} /* newRegistration (newRegistration.php) */ #userRegistrationPage .wrap_bottom_btn .reg_btn_basic {width: 110px; height: 40px;} #userRegistrationPage .btn_frame .btn_reg_type {width: 90px; height: 35px;} /* login_page (login.php) */ #wrap_login_content {display: table-cell; width: 100%; padding: 30px;} #wrap_login_img {display: none;} #wrap_login_content .login_frame {display: table-row;} #wrap_login_content .wrap_logo_img {width: auto; height: auto; display: table-row;} #wrap_login_content .wrap_logo_img i.ico {width: 70px; height: 20px; margin: auto;} #wrap_login_content .table_row_frame {width: 100%; height: 100%; display: table;} #wrap_login_content .table_row_frame2 {width: 100%; height: 100%; display: table-cell; vertical-align: middle;} /* Address Administration */ #address_administration #title_with_btn .wrap_btns {display: table-row;} #address_administration #title_with_btn .wrap_btns .wrap_btns2 {float: none !important;} } @media screen and (max-width: 767px) { /* POP */ .pop_width_40 {width: 80%;} .pop_width_30 {width: 80%;} /* Padding */ .pdAll_30 {padding: 15px;} .padding_side_30 {padding: 0 15px;} .padding_side_40 {padding-left: 25px; padding-right: 25px;} .pdTop_30 {padding-top: 15px;} .pdTop_40 {padding-top: 20px;} .pdBottom_30 {padding-bottom: 15px !important;} .long_height .pop_white_box {padding-top: 30px; padding-bottom: 30px;} .pop_white_box {padding: 30px;} #address_administration .wrap_choose_group .frame_arrange {padding: 0px 15px 15px 15px;} /* POP Excel Upload */ #upload_excxel .blue_btn {width: 90%;} #upload_excxel .input_frame {width: 50%;} #upload_excxel .wrap_input_box .input_frame .text_input_frame {padding-left: 0 !important; } /* POP Table */ #add_contact_inGroup .frame_part {height: 300px;} /* header (header.php) */ #header .wrap {padding: 15px 20px;} .wrap_content {width: 100%; height: auto; padding-left: 50px;} .set_page {padding: 95px 0 0 45px;} .page {padding: 15px;} /***************************************************************************/ /* newRegistration (newRegistration.php) */ #userRegistrationPage .wrap_content_inner {padding: 10px;} #userRegistrationPage .btn_frame .btn_reg_type {width: 90px; height: 35px;} #userRegistrationPage .layout-1_2 {width: 100%; height: auto;} #userRegistrationPage .wrap_bottom_btn .reg_btn_basic {width: 100%; height: 40px;} #userRegistrationPage .wrap_bottom_btn {width: 100%; height: auto;} #userRegistrationPage .wrap_bottom_btn .btn_frame_1 {width: 100%; height: auto; padding: 10px;} #userRegistrationPage .wrap_bottom_btn .btn_frame_2 {width: 100%; height: auto; display: block; padding: 5px;} /* newRegistration (newRegistration.php) */ /***************************************************************************/ /* POP Message Box */ #message_box .tab_part {width: 100%;} /* Sent Message */ /* .layout_free .inner {display: table-row; width: 100%;} */ /* selectUserManageList */ #user_administration #address_administration {display: block;} #user_administration #address_administration .wrap_choose_group {display: block; width: 100%;} #user_administration #address_administration .wrap_people_list {display: block; width: 100%;} } @media screen and (max-width: 700px) { /* Resident Administration */ #resident_administration .wrap_choose_group .frame_arrange .wrap_list_1 {display: table; width: 100%; } #resident_administration .wrap_choose_group .frame_arrange .wrap_list_2 {display: table; width: 100%; } #sendText .pop_location {width: 100%; right: 0;} #pop_special_character {width: 90%; margin: auto;} /* Usage Application */ #usage_applicaion_page .page {width: 90%;} #usage_applicaion_page .page .frame_part {padding: 20px;} #usage_applicaion_page .page .frame_part .inner {width: 90%;} #usage_applicaion_page .page .wrap_title {padding: 30px 5px;} } @media screen and (max-width: 590px) { #how_send_rd {padding: 0 !important;} #how_send_rd .btn_label {display: table; width: 100%; padding: 0 0 10px 0 !important;} #how_send_rd .btn_label label .label_input_hidden + .txt_frame .txt {padding: 10px;} #how_send_rd .btn_label label .label_input_hidden:checked + .txt_frame .txt {padding: 10px;} /* Button */ .wrap_bottom_btn .btn_frame_1 {width: 100%; float: none;} .wrap_bottom_btn .btn_frame_2 {display: block; width: 100%; padding-left: 0; padding-bottom: 15px;} .wrap_bottom_btn .reg_btn_basic {width: 100%; height: 42px;} #write_page .layout-1_2 .pdRight_15 {padding-right: 15px !important;} #write_page .layout-1_2 .pdLeft_15 {padding-left: 15px !important;} /* POP Message Box */ .pop_background {padding: 20px;} .pop_width_65 {width: 100%;} /* Big Title with Button Size */ #title_with_btn.bigTitle_btn .title_txt {display: table-row; width: 100%;} #title_with_btn.bigTitle_btn .wrap_btns {display: table-row; width: 100%;} #title_with_btn.bigTitle_btn .wrap_btns .wrap_btns2 {display: block; width: 100%;} #title_with_btn.bigTitle_btn .wrap_btns .wrap_btns2 .btn_img_frame {display: block; width: 100%;} } @media screen and (max-width: 500px) { /* Padding */ .blank_side_10 {width: 5px; height: 5px; min-width: 5px;} .pdAll_15 {padding: 10px;} /* Usage Application */ #usage_applicaion_page .page .frame_part .inner {width: 100%;} /* Input with Select */ .wrap_input .select_frame {display: table-row !important; width: 100% !important;} .wrap_input .inputTxt_frame {display: table-row !important; width: 100% !important;} .pop_white_box {padding: 20px;} /* Resident */ #resident_administration .wrap_choose_group .frame_arrange {padding: 0 15px 15px 15px;} #resident_administration .wrap_people_list #title_with_btn .wrap_btns .wrap_btns2 {display: block; float: none !important; width: 100%;} /* Address */ #address_administration #title_with_btn .wrap_btns {width: 100%;} #address_administration #title_with_btn .wrap_btns .wrap_btns2 {display: block; width: 100%; float: none !important;} #address_administration #title_with_btn .wrap_btns .wrap_btns2.media_float {float: none !important;} #address_administration .wrap_choose_group .frame_arrange .wrap_list_2 .btn_img_frame {width: 100%;} /* Title Text and Button */ #title_with_btn .wrap_btns .wrap_btns2 {display: block;} #title_with_btn .wrap_btns .wrap_btns2 .btn_img_frame {display: block;} #title_with_btns .wrap_btns .wrap_btns2 {display: block;} #title_with_btns .wrap_btns .wrap_btns2 .btn_img_frame {display: block;} .btn_img_frame.excel_btn {width: 100%;} .btn_img_frame.write_btn {width: 100%;} .btn_img_frame.del_btn {width: 100%;} .btn_img_frame.addContact_btn {width: 100%;} .btn_img_frame.addGroup_btn {width: 100%;} .btn_img_frame.move_btn {width: 100%;} .btn_img_frame.copy_btn {width: 100%;} .btn_img_frame.add_btn {width: 100%;} .btn_img_frame.rewrite_btn {width: 100%;} .btn_img_frame.excel_up_btn {width: 100%;} .btn_img_frame.excel_down_btn {width: 100%;} .btn_img_frame.save_btn {width: 100%;} .btn_img_frame.setting_btn {width: 100%;} .btn_img_frame.del_btn.stay_width {width: 86px;} .btn_img_frame.excel_btn.stay_width {width: 130px;} .btn_img_frame.add_group_btn.stay_width {width: 110px;} /* Radio Button */ .wrap_cb_label_frame .cb_label_frame {display: block; line-height: 2.3;} /* Button */ .wrap_bottom_btn .btn_frame_1 {width: 100%; float: none;} .wrap_bottom_btn .btn_frame_2 {display: block; width: 100%; padding-left: 0; padding-bottom: 5px;} .wrap_bottom_btn .reg_btn_basic {width: 100%; height: 42px;} #write_page .layout-1_2 .pdRight_15 {padding-right: 15px !important;} #write_page .layout-1_2 .pdLeft_15 {padding-left: 15px !important;} #write_page .layout_1_2 {display: block; width: 100%;} #write_page .layout_1_2 .inner {display: block; width: 100%;} #write_page .layout_1_3 {display: block; width: 100%;} #write_page .layout_1_3 .inner {display: block; width: 100%;} /* .btn_img_frame1 {width: 100%;} .btn_img_frame1 .btn_img_frame2 {display: table-row; width: 100%; padding-right: 0 !important;} .btn_img_frame1 .btn_img_frame2 .btn_img_frame3 {width: 100%;} .btn_img_frame1 .btn_img_frame2.media_pd {padding-top: 10px;} */ /* Broad Setting Layout */ #write_page #setting_send .layout-1_2 {width: 100%; float: none;} #write_page #setting_send .layout-1_2.pdRight_15 {padding-right: 0 !important;} /* Table Height */ #sendText #choose_group {height: 400px;} #people_list .inner .wrap_list.height_without_btn {height: 400px;} #people_list .inner .wrap_list {height: 400px;} /* Blank */ .blank_box_30 {width: 15px; height: 15px;} .blank_side_30 {width: 15px; height: 15px; min-width: 15px;} /* msgResult */ #msgResult_list .layout_1_2 .inner {width: 100%; display: table-row;} #msgResult_list #title_with_btn .title_txt {display: table-row; width: 100%;} #msgResult_list #title_with_btn .wrap_btns {display: table-row; width: 100%;} } @media screen and (max-height: 700px) { /* POP Padding */ .pdAll_30 {padding: 15px;} .padding_side_30 {padding: 0 15px;} .padding_side_40 {padding-left: 25px; padding-right: 25px;} .pdTop_30 {padding-top: 15px;} .pdTop_40 {padding-top: 20px;} .pd_title_pd {padding-bottom: 15px;} /* Table Padding */ .cb_label_onlyImg_frame .cb_hidden + label {padding: 8px;} .wrap_list td {padding: 10px 5px;} /* POP Text */ .txt_14 {font-size: 12px !important;} .txt_normal {font-size: 12px; font-weight: 400;} .txt_input {font-size: 12px; font-weight: 400; color: #4a4a4a;} .txt_input2 {font-size: 12px; font-weight: 500; color: #444444;} .txt_input2_bold {font-size: 12px; font-weight: bold; color: #444444;} .txt.descript {font-size: 12px; font-weight: 400; color: #9b9b9b;} .txt.con_tit {font-size: 18px; font-weight: 700; color: #1089ff;} .txt.pg_tit {font-size: 20px; font-weight: 800; color: #444;} .txt.pop_title_txt {font-size: 20px; font-weight: bold; color: #000;} } /* media query */ /***************************************************************************/ /* datepicker '...'버튼 안보이게 하려고 추가 */ button.ui-datepicker-trigger {display:none;} /* 공통 끝 */ /***************************************************************************/ /***************************************************************************/ /***************************************************************************/