/* basic_color */
:root {
	--did-head-l-bg:#107380;
    --did-body : #ffffff;
    --did-head : #67cbcb;
    --bg-thead : #d3f7f7;
    --bg-tbody : #06353B;
    --td-active : #fd6000;
    --tr-border : #4D6E73;
    --bg-table : #014751;
    --td-num : #f4da2a;
    --coror-wite : #FFFFFF;   
    --color-text:#242424;
}
html {
    font-size:100%;
    
}


html, body, div, span, footer, header, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

html, body {
    height: 100%;
    font-family: var(--font-bold);
}

/* 공통 */
.did_wrap {
    width:100%;
    height:100%;
    background:var(--did-body);
    padding:10px;
    gap : 0.5rem;
}
.did_wrap tbody tr {
    border-bottom:1px solid var(--tr-border);
}
.did_wrap table thead {
    background:var(--bg-thead);
}
.did_wrap table tbody {
    background:var(--bg-tbody);
    color:var(--bg-white);
}
.did_table {
    background:var(--bg-table);
    padding:12px;
    border-radius:15px;
    font-family:var(--font-bold);
    font-weight:bold;
    overflow:hidden;
}
.did_head {
    background:var(--did-head);
    border-radius:15px;
    padding: 0;
}

.did_head .did_head_sub_l{
	background:var(--did-head-l-bg);
	border-radius : 15px 0 0 15px;
	width:340px;
	height:200px;
    margin-right:40px;
    margin-top: auto !important;
    margin-bottom: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    text-align: center !important;
    flex-direction: column !important;
}

.did_head .did_head_sub_2{
	background:var(--did-head-l-bg);
	border-radius : 15px 0 0 15px;
	width:195px;
	height:175px;
    margin-right:30px;
    margin-top: auto !important;
    margin-bottom: auto !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    text-align: center !important;
    flex-direction: column !important;

}

.did_head .did_head_sub_3{
	background:var(--did-head-l-bg);
	border-radius : 15px 0 0 15px;
	width:195px;
	height:180px;
    margin-right:30px;
    padding-top: 1.5rem;
}

.did_head .did_head_sub_4{
	background:var(--did-head-l-bg);
	border-radius : 15px 0 0 15px;
	width:195px;
	height:180px;
    margin-right:30px;
}

.did_table tr.active td {
    color:var(--td-active) !important;
}
.did_table thead tr th {
    border-bottom:3px solid var(--bg-table);
}
.did_table thead tr th:first-child {
    border-radius:10px 0 0 10px;
}
.did_table thead tr th:last-child {
    border-radius:0 10px 10px 0;
}

.did_table th, .did_table td {
    text-align:center;
}

.did_table tbody tr td {
    border-bottom:3px solid var(--bg-table);
    background:var(--coror-wite);
    color:var(--color-text);
}

.did_table tbody tr:first-child td:first-child {
    border-top-left-radius:10px;
}
.did_table tbody tr:first-child td:last-child {
    border-top-right-radius:10px;
}
.did_table tbody tr:last-child td:first-child {
    border-bottom-left-radius:10px;
}
.did_table tbody tr:last-child td:last-child {
    border-bottom-right-radius:10px;
}
.did_table tbody tr:last-child {
    border-bottom:0;
}

/* 가로 */
.wrap2_head {
    font-family:var(--font-bold);
}
.wrap2_head .doc_pic {
    position:relative;
    width:140px;
    min-width:65px;
    min-height:65px;
    margin-top: auto !important;
    margin-bottom: auto !important;
}
.wrap2_head .doc_pic::after {
    content:"";
    display:block;
    padding-bottom:100%;
}
.wrap2_head .doc_pic .doc_p {
    position:absolute;
    top:0;
    left:0;
    width:140px;
    height:140px;
    object-fit:cover;
    border-radius:50%;
}

.wrap2_head .head_title{
    margin : auto 2rem;
}

.wrap2_head .did_hos {
    font-size:3.3vw;
}
.wrap2_head .did_doc {
    font-size:2vw;
    font-weight: 700;
}
.wrap2_head .did_doc2 {
    font-size:2vw;
    font-family:var(--font-regular);
    font-weight: 500;
}
.wrap2_head .did_p {
    color:var(--coror-wite);
    font-weight:bold;
    font-size:1.7vw;
    margin-top:15px;
    margin-bottom: 0 !important;
}
.wrap2_head .did_wnum {
    line-height:3.6vw;
    color:var(--td-num);
    font-size:6vw;
    font-family:var(--font-bold);
    text-align:center;
    font-weight:800;
    margin: 0 auto;
    padding-top: 5px;
}
.wrap2_head p {
    font-size:14px;
}


.wrap3_group{
    flex-basis: 50%;
    gap: 0.5rem;

}

.wrap3_head {
    font-family:var(--font-bold);
}
.wrap3_head .doc_pic {
    position:relative;
    width:140px;
    height:140px;
    margin-top: auto !important;
    margin-bottom: auto !important;
}
.wrap3_head .doc_pic::after {
    content:"";
    display:block;
    padding-bottom:100%;
}
.wrap3_head .doc_pic .doc_p {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.wrap3_head .head_title{
    margin : auto 2rem;
}

.wrap3_head .did_hos {
    font-size:2.8vw;
}
.wrap3_head .did_doc {
    font-size:2vw;
    font-family:var(--font-bold);
    font-weight: 700;
}
.wrap3_head .did_doc2 {
    font-size:2vw;
    font-weight: 500;
    
}
.wrap3_head .did_p {
    color:var(--coror-wite);
    font-weight:bold;
    font-size:1.2vw;
    margin-top:30px;
    margin-bottom: 0 !important;

}
.wrap3_head .did_wnum {
    line-height:3.4vw;
    color:var(--td-num);
    font-size:4.6vw;
    font-family:var(--font-bold);
}
.wrap3_head p {
    font-size:14px;
}


/* DID_1 */
.did_table1 thead tr th {
    border-bottom:5px solid var(--bg-table);
}
.did_table1 {
    height:88%;
    font-size:2.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}

.did_table1 table{
    width:100%;
    height:100%;
}

.did_table1 thead {
    height:12%;
}
.did_table1 td:first-child {
    width:10%;
}
.did_table1 td:nth-child(2) {
    width:35%;
}
.did_table1 td:nth-child(3) {
    width:25%;
}
.did_table1 td:last-child {
    width:30%;
}



/* 가로 2분할 */
.did_table2 thead tr th {
    border-bottom:5px solid var(--bg-table);
}
.did_table2 {
    height:88%;
    font-size:3rem;
    font-family:var(--font-bold);
}

.did_table2 table{
    width:100%;
    height:100%;
}

.did_table2 thead {
    height:12%;
}
.did_table2 td:first-child {
    width:15%;
}
.did_table2 td:nth-child(2) {
    width:25%;
}
.did_table2 td:nth-child(3) {
    width:30%;
}
.did_table2 td:last-child {
    width:30%;
}


/* did_3 */
.did_table3 {
    height:90%;
    font-size:3.4vw;
    font-family:var(--font-bold);
    font-weight:600;
    margin-top:3px;
}


.did_table3 table{
    width:100%;
    height:100%;
}

.did_table3 thead {
    height:7%;
}
.did_table3 td:first-child {
    width:17%;
}
.did_table3 td:nth-child(2) {
    width:28%;
}
.did_table3 td:nth-child(3) {
    width:20%;
}
.did_table3 td:last-child {
    width:35%;
}

/* did_4 */
.wrap4_head {
    font-family:var(--font-bold);
    font-weight:600;
    color:#000;
}
.wrap4_head .doc_pic {
    position:relative;
    width:12%;
    min-width:60px;
    min-height:60px;
}
.wrap4_head .doc_pic::after {
    content:"";
    display:block;
    padding-bottom:100%;
}
.wrap4_head .doc_pic .doc_p {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}
.wrap4_head .did_hos {
    font-size:4.8vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.wrap4_head .did_doc {
    font-size:3.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.wrap4_head .did_doc2 {
    font-size:3.2vw;
    font-family:var(--font-bold);
    font-weight:500;
}
.wrap4_head .did_wnum {
    line-height:7.2vw;
    color:var(--td-num);
    font-size:7.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.wrap4_head p {
    font-size:2.2vw;
}

.wrap4_head .did_p {
    color:var(--coror-wite);
    font-weight:bold;
    font-size:2.1vw;
}

.did_table4 {
    height:85%;
    font-size:3.4vw;
    font-family:"nanum-dbold";
}

.did_table4 table{
    width:100%;
    height:100%;
}

.did_table4 thead {
    height:16%;
}
.did_table4 td:first-child {
    width:17%;
}
.did_table4 td:nth-child(2) {
    width:28%;
}
.did_table4 td:nth-child(3) {
    width:20%;
}
.did_table4 td:last-child {
    width:35%;
}



/* DID_4 모달 */
.did_box {
    border-radius:5px;
    color:var(--bg-white);
    background:#059DB2;
    font-family:var(--font-bold);
}
.did_mh1 {
    font-size:4.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did2_tx2 {
    font-size:3.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did2_tx3 {
    font-size:2.8vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did2_tx4 {
    font-size:3.6vw;
    font-family:var(--font-bold);
    font-weight:600;
}


.did_mh2 {
    font-size:7.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did_tx2 {
    font-size:5vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did_tx3 {
    font-size:4.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did_tx4 {
    font-size:6.8vw;
    font-family:var(--font-bold);
    font-weight:600;
}


.did_mh3 {
    font-size:8.2vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did3_tx2 {
    font-size:5.8vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did3_tx3 {
    font-size:5vw;
    font-family:var(--font-bold);
    font-weight:600;
}
.did3_tx4 {
    font-size:7.6vw;
    font-family:var(--font-bold);
    font-weight:600;
}


/* DID1 Modal */
#did1_modal {
    width:100%;
    height:100%;
    overflow:hidden;
    color:#000;
}
#did1_modal .modal-xl {
    min-width:80%;
    width:80%;
    height:100%;
    padding:0;
    margin:auto;
}
#did1_modal .modal-content {
    width:100%;
    height:80%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

/* DID2 Modal */
#did2_modal {
    width:50%;
    height:100%;
    overflow:hidden;
    color:#000;
}
#did2_modal .modal-lg {
    min-width:80%;
    width:80%;
    height:100%;
    padding:0;
    margin:auto;
}
#did2_modal .modal-content {
    width:100%;
    height:60%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

#did2-1_modal {
    width:50%;
    height:100%;
    left:50%;
    overflow:hidden;
    color:#000;
}
#did2-1_modal .modal-lg {
    min-width:80%;
    width:80%;
    height:100%;
    padding:0;
    margin:auto;
}
#did2-1_modal .modal-content {
    width:100%;
    height:60%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

/* DID3 Modal */
#did3_modal {
    width:100%;
    height:100%;
    overflow:hidden;
    color:#000;
}
#did3_modal .modal-xl {
    min-width:75%;
    width:75%;
    height:100%;
    padding:0;
    margin:auto;
}
#did3_modal .modal-content {
    width:100%;
    height:35%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}


/* DID4 Modal */
#did4_modal1 {
    width:100%;
    height:50%;
    overflow:hidden;
    color:#000;
}
#did4_modal1 .modal-xl {
    min-width:80%;
    width:80%;
    height:100%;
    padding:0;
    margin:auto;
}
#did4_modal1 .modal-content {
    width:100%;
    height:60%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

#did4_modal2 {
    width:100%;
    height:50%;
    top:50%;
    overflow:hidden;
    color:#000;
}
#did4_modal2 .modal-xl {
    min-width:80%;
    width:80%;
    height:100%;
    padding:0;
    margin:auto;
}
#did4_modal2 .modal-content {
    width:100%;
    height:60%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

