@charset "utf-8";

#wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: auto;
}
#header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    color: #ffd562;
    background: #5c5c5c;
    font-size: 18px;
    font-weight: bold;
    background: url(https://e-baro.co.kr/_layout/mobile_template/img/api_view_header_bg.png) no-repeat center;
    background-size: 100% 100%;
}

#container {
    background: url(https://e-baro.co.kr/_layout/mobile_template/img/api_view_list_bg.png) no-repeat bottom right/ 100%
        auto;
    font-size: 2vw;
}
#container > ul.com_flex_box {
    gap: 0;
    border-left: 1px solid #999;
}
#container > ul > li {
    padding: 5px;
    border: 1px solid #999;
    border-width: 0 1px 1px 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 10%;
    justify-content: center;
}
#container > ul > li.num {
    width: 75px;
}
#container > ul > li.room {
}
#container > ul > li.name {
}
#container > ul > li.img {
    padding: 0;
}
#container > ul > li.img img {
    width: 100%;
    object-fit: contain;
}
#container > ul > li.relation_box {
    flex: 1;
    width: auto;
    font-size: inherit;
}
#container > ul > li.relation_box .inner_box {
    padding: 0;
    width: 100%;
}
#container > ul > li.burial {
    text-align: center;
    width: 15%;
}
#container > ul > li.in,
#container > ul > li.out {
    text-align: center;
    white-space: nowrap;
    width: 11%;
}

#container > ul.tit {
    font-size: 1.5vw;
    font-weight: bold;
}
#container > ul.list > li.family {
    justify-content: flex-start;
}
#container > ul.list > li.relation_box {
    justify-content: flex-start;
}

table.mobileTable {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    background: url(https://e-baro.co.kr/_layout/mobile_template/img/api_view_list_bg.png) no-repeat bottom right/
        contain;
    font-size: 1.25vw;
}

table.mobileTable td,
table.mobileTable th {
    border: 1px solid #aaaaaa;
}

table.mobileTable tr.thead {
    height: 70px;
    font-weight: bold;
}
table.mobileTable td.num {
    width: 60px;
    font-weight: bold;
}
table.mobileTable td.room {
    font-size: 26px;
}
table.mobileTable td.burial {
    font-size: 1vw;
}
table.mobileTable td.in {
    font-size: 1.25vw;
}
table.mobileTable td.out {
    font-size: 1.25vw;
}
table.mobileTable td.relation_box {
    font-weight: bold;
}
table.mobileTable td.inner_box {
    padding: 10px;
}
table.mobileTable td.img-box{
  height: 1px;
}
table.mobileTable td.img-box .img-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 10px;
}
table.mobileTable td.img-box .img {
  width: 80%; 
  margin: 0 auto 0 auto;
}
table.mobileTable td.img-box .img img {
    padding: 0px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-position: top;
} /*iOS에서 width값이 100%로 인식안되는 부분 변경*/
table.mobileTable td.img-box .name{
  font-weight: bold; 
  font-size: 18px;
}

.dl_list {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
    margin-bottom: 0;
    line-height: 1.45;
    margin-bottom: 5px;
}
.dl_list:last-child {
    margin-bottom: 0;
}
.dl_list dt {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
    margin-right: 7px;
}
.dl_list dt::after {
    content: ':';
    padding-left: 7px;
}
.dl_list dt .tit {
    flex: 1;
}
.dl_list dt span{
  flex: 1; 
  text-align: center;
}
.dl_list dd {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%;
}
.dl_list dd span {
    white-space: nowrap;
}
.dl_list dd span::after {
    content: ',';
    margin-right: 5px;
}
.dl_list dd span:last-child:after {
    display: none;
    margin-right: 0;
}

/* DS4 레이아웃 시작*/
.p-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 13px;
    padding-right: 13px;
    max-width: 1200px;
}
.preview-link-title {
    width: 100%;
    height: 100px;
    background-image: url('https://e-baro.co.kr/_global/Admin/img/monitor.main.info_none_border.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.preview-link-title-wrap {
    font-family: 'NanumMyeongjoBold';
    color: #ffd562;
    font-size: 24px;
    text-align: center;
    top: 36px;
    position: relative;
}
.preview-link-mid {
    width: 100%;
    height: auto;
}
.preview-link-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 18px;
}
.preview-link-thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
.preview-tbody {
    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
    font-size: 15px;
    line-height: 1.42857143;
    color: #333;
}
.preview-tbody tr {
    height: 140px;
    border: solid 1px;
    border-color: #707070;
}
.preview-tbody thead tr {
    height: 40px;
    border: solid 1px;
    border-color: #707070;
    background: linear-gradient(to bottom, #ffffff, #ebedee);
}
.preview-tbody tbody tr:hover {
    background-color: #f5f5f5;
}
.dmPhoto {
    width: 100px;
    height: 140px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    align-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.preview-tbody td {
    border: solid 1px;
    border-color: #707070;
    padding: 8px !important;
}
.preview-link-mid table {
    text-align: center;
    border: solid 1px;
    border-color: #707070;
    background: url('https://e-baro.co.kr/_layout/mobile_template/img/api_view_list_bg.png') 100% 100% no-repeat;
}

table.preview-link-table th {
    font-size: 15px;
}

.colon {
    position: absolute;
    right: 0;
}
.sangJuOrder {
    text-align: center;
    white-space: nowrap;
    position: relative;
}
.sangJuOrder,
.sangJuText {
    display: table-cell;
}
/* .sangJuOrder, .sangJuText { display:table-cell; font-weight:bold; } */

.col4,
.sangJuText,
.gNameContainer,
.col2 {
    word-break: break-all;
}
/* .sangJuOrderDiv { display:table; } */
/* .sangjuContainer, .jangjiContainer, .gNameContainer, .container { display:table; width:100%; height:100%; } */
.sangjuContainer p,
.jangjiContainer p,
.gNameContainer p,
.containerText {
    display: table-cell;
    vertical-align: middle;
}
.parentheses,
.space {
}
.ipgwantxt,
.barintxt,
.jangjitxt {
    display: table;
    width: 100%;
    height: 100%;
    font-size: 3vw;
}
.col1 {
    white-space: nowrap;
    text-align: left;
}
.gNameContainer {
    text-align: left;
}
.gArrow {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    max-height: 100%;
    max-width: 100%;
}
.image {
    float: left;
    width: 100%;
    height: 100%;
}
.content {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
}
.parentheses,
.space {
    display: none;
}

.col4 {
    font-size: 20px;
}
.text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.sangJuText {
    display: inline-flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}
.sangJuText div {
}
.sangJuOrderDiv {
    display: flex;
    display: -webkit-flex;
}

.p-container-m {
    width: 100%;
    margin: 0;
    padding: 0;
}
table.preview-link-table-m {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    background: #fff;
    font-size: 1.25vw;
}
table.preview-link-table-m td,
table.preview-link-table-m th {
    border: 1px solid #000;
    padding: 3px 2px;
}
table.preview-link-table-m tbody td {
    font-size: 10px;
}
table.preview-link-table-m td.img > img {
    padding: 0px;
    width: 100%;
    height: 100%;
    min-height: 100%;
} /*iOS에서 width값이 100%로 인식안되는 부분 변경*/

div.ds4_table {
    /* font-family: "Times New Roman", Times, serif; */
    border: 1px solid #000;
    width: 100%;
    height: 100%;
    text-align: center;
    border-collapse: collapse;
}
.divTable.ds4_table .divTableCell,
.divTable.ds4_table .divTableHead {
    border: 1px solid #000;
    padding: 0px 0px;
    vertical-align: middle;
}
.divTable.ds4_table .divTableBody .divTableCell {
    font-size: 13px;
}

div.ds4_innertable {
    width: 100%;
    height: 100%;
    text-align: center;
    border-collapse: collapse;
}
.divTable.ds4_innertable .divTableCell_inner,
.divTable.ds4_innertable .divTableHead {
    padding: 0px 0px;
    vertical-align: middle;
}
.divTable.ds4_innertable .divTableBody .divTableCell_inner {
    font-size: 13px;
}

div.ds4_innertable_in {
    width: 100%;
    height: 100%;
    text-align: center;
    border-collapse: collapse;
}
.divTable.ds4_innertable_in .divTableCell_inner_in,
.divTable.ds4_innertable_in .divTableHead {
    padding: 0px 0px;
    border-bottom: 1px solid #000;
    vertical-align: middle;
}
.divTable.ds4_innertable_in .divTableBody .divTableCell_inner_in {
    font-size: 10px;
}
.border_none {
    border-bottom: none !important;
}
.border_be {
    border-right: 1px solid #000 !important;
}
.border_bt {
    border-bottom: 1px solid #000 !important;
}

.table_img {
    width: 21vw !important;
}
.table_img img {
    width: 100%;
    height: auto !important;
}
.row_color {
    background: #ebebeb;
}
.Cell_45 {
    width: 45vw;
}
.height-10 {
    height: 8vh;
}
.pd-1 {
    padding: 10px !important;
}

div.ds4_pctable {
    border: 1px solid #000000;
    background-color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    border-collapse: collapse;
}
.divTable_pc.ds4_pctable .divTableCell_pc,
.divTable_pc.ds4_pctable .divTableHead_pc {
    padding: 0px 0px;
    vertical-align: middle;
    border: 1px solid #070707;
}
.divTable_pc.ds4_pctable .divTableBody_pc .divTableCell_pc {
    font-size: 13px;
}
.divTable_pc.ds4_pctable .divTableHeading_pc .divTableHead_pc {
    font-size: 14px;
    font-weight: bold;
}
.table_img_pc img {
    width: 100%;
    height: auto !important;
}
.Cell_pc_w1 {
    width: 10%;
}
.Cell_pc_w2 {
    width: 10%;
}
.Cell_pc_w3 {
    width: 9.1%;
}
.Cell_pc_w4 {
    width: 30.9%;
}
.Cell_pc_w5 {
    width: 20%;
}
.Cell_pc_w6 {
    width: 10%;
}
.Cell_pc_w7 {
    width: 10%;
}

/*테이블 공통*/
.divTable {
    display: table;
}
.divTableRow {
    display: table-row;
}
.divTableCell,
.divTableCell_inner,
.divTableCell_inner_in {
    display: table-cell;
}
.divTableBody {
    display: table-row-group;
}

.divTable_pc {
    display: table;
}
.divTableRow_pc {
    display: table-row;
}
.divTableHeading_pc {
    display: table-header-group;
}
.divTableCell_pc,
.divTableHead_pc {
    display: table-cell;
}
.divTableHeading_pc {
    display: table-header-group;
}
.divTableBody_pc {
    display: table-row-group;
}

/* DS4 레이아웃 끝*/

/* DS6 레이아웃 시작 260202 ujs */
/* td 영역 꽉 채우기 */
.mobileTable td.funeral-schedule{
  height: 1px;
}
.mobileTable td.funeral-schedule .funeral-schedule-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.mobileTable td.funeral-schedule .funeral-schedule-wrap > div{
  flex: 1;
}

/* 입관, 발인, 장지 중앙정렬 */
.mobileTable td.funeral-schedule .funeral-schedule-wrap > div > span{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.mobileTable td.funeral-schedule .in .tit,
.mobileTable td.funeral-schedule .in .tit + span,
.mobileTable td.funeral-schedule .out .tit,
.mobileTable td.funeral-schedule .out .tit + span{
  border-bottom: 1px solid #aaaaaa;
}
.mobileTable td.funeral-schedule .tit{
  width: 20%; 
  border-right: 1px solid #aaaaaa;
}
.mobileTable td.funeral-schedule .tit + span {
  width: 80%;
}

/* 모바일 카드형 css */
.binso-card-wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.binso-card{
  border: 1px solid black;
  border-radius: 10px;
  overflow: hidden;
}
.binso-card .top-box{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 16px;
  background: #8e5434;
  color: white;
  padding: 8px 10px;
  border-bottom: 1px solid black;
}
.binso-card .main-box{
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-bottom: 1px solid black;
}
.binso-card .main-box .img-box{
  width: 25%;
  padding: 5px; 
  text-align: center;
  border-right: 1px solid black;
}
.binso-card .main-box .relation{
  flex: 1; 
  padding: 5px;
}
.binso-card .bottom-box{
  display: flex;
  justify-content: center;
  padding: 6px;
  gap: 5px;
}
/* 입관,발인 / 장지 영역 반씩 나눠 가짐 */
.binso-card .bottom-box > div{
  flex: 1;
}
.binso-card .bottom-box .in,
.binso-card .bottom-box .out,
.binso-card .bottom-box .burial{
  gap:5px; 
  flex: 1;
}
.binso-card .bottom-box .in{
  margin-bottom: 5px;
}
.binso-card .bottom-box .burial{
  align-items: start;
}

.binso-card .bottom-box .tit{
  min-width: 40px;
  width: 40px;
  text-align: center;
  padding: 3px;
  font-size: 11px;
  background-color: var(--gray);
  border-radius: 5px;
  white-space: nowrap;
}
/* DS6 레이아웃 끝 */

@media (min-width: 320px) {
  #header {height: 40px;}
    table.mobileTable {
        font-size: 14px;
    }
    table.mobileTable tr.thead {
        height: 20px;
        font-weight: bold;
        font-size: 12px;
    }
    table.mobileTable td.num {
        width: 30px;
        font-weight: bold;
    }
    table.mobileTable td.room {
        font-size: 10px;
    }
    table.mobileTable td.burial {
        font-size: 8px;
    }
    table.mobileTable td.in {
        font-size: 10px;
    }
    table.mobileTable td.out {
        font-size: 10px;
    }
    table.mobileTable td.relation_box {
        font-weight: bold;
        font-size: 12px;
    }
    table.mobileTable td.img > img {
        padding: 0px;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    .p-container {
        width: 100%;
        max-width : 1200px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 13px;
        padding-right: 13px;
    }

    table.preview-link-table th {
        font-size: 12px;
    }
    table.preview-link-table th.th_room {
        width: 10%;
    }
    table.preview-link-table th.th_name {
        width: 10%;
    }
    table.preview-link-table th.th_img {
        width: 9.1%;
    }
    table.preview-link-table th.th_sangju {
        width: 30.9%;
    }
    table.preview-link-table th.th_burial {
        width: 20%;
    }
    table.preview-link-table th.th_in {
        width: 10%;
    }
    table.preview-link-table th.th_out {
        width: 10%;
    }
}

@media (min-width: 768px) {
  #header {height: 70px;}
    table.mobileTable {
        font-size: 16px;
    }
    table.mobileTable tr.thead {
        height: 40px;
        font-weight: bold;
    }

    table.mobileTable,
    table.mobileTable td.room,
    table.mobileTable td.burial,
    table.mobileTable td.in,
    table.mobileTable td.out {
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    #header {height: 100px;}
    table.mobileTable {
        /* font-size: 1.25vw; */
    }
    table.mobileTable tr.thead {
        height: 60px;
        font-weight: bold;
        /* font-size: 1.75vw; */
    }
    table.mobileTable td.num {
        width: 30px;
        font-weight: bold;
    }
    table.mobileTable tr.thead,
    table.mobileTable td.room,
    table.mobileTable td.relation,
    td.name,
    td.burial,
    td.in,
    td.out {
        font-size: 16px;
    }
    table.mobileTable td.relation_box {
        font-weight: bold;
    }

    .p-container {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding-left: 13px;
        padding-right: 13px;
        max-width: 1200px;
    }

    table.preview-link-table th {
        font-size: 15px;
    }
    table.preview-link-table th.th_room {
        width: 10%;
    }
    table.preview-link-table th.th_name {
        width: 10%;
    }
    table.preview-link-table th.th_img {
        width: 9.1%;
    }
    table.preview-link-table th.th_sangju {
        width: 30.9%;
    }
    table.preview-link-table th.th_burial {
        width: 20%;
    }
    table.preview-link-table th.th_in {
        width: 10%;
    }
    table.preview-link-table th.th_out {
        width: 10%;
    }
}

/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    table.mobileTable td.img > img {
        padding: 0px;
        width: 48px;
        height: 60px !important;
    }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    table.mobileTable td.img > img {
        padding: 0px;
        width: 48px;
        height: 60px !important;
    }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    table.mobileTable td.img > img {
        padding: 0px;
        width: 48px;
        height: 60px !important;
    }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    table.mobileTable td.img > img {
        padding: 0px;
        width: 48px;
        height: 60px !important;
    }
}

/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    table.mobileTable td.img > img {
        padding: 0px;
        width: 48px;
        height: 60px !important;
    }
}