/******** 중요 힌트 ********
    - 무료 이미지 사이트
        0. 공공 https://www.kogl.or.kr/index.do
        1. 무료 https://pixabay.com/   
                https://pixabay.com/ko/users/peggy_marco-1553824/?tab=popular&pagi=6   
                https://pixabay.com/ko/users/jessbaileydesign-7369896/?tab=popular&pagi=1
                https://pixabay.com/ko/users/geralt-9301/?tab=popular&pagi=6
        2. 무료 https://www.pexels.com
        3. 유료 https://www.imagetoday.co.kr
        4. 유료 https://ko.depositphotos.com/serie/13355326.html

    - 무료 아이콘 사이트
        1. 무료+유료 https://thenounproject.com
        2. 무료 온라인 수정가능 https://www.flaticon.com/
        
    - 이미지 압축 사이트
        1. 무료 https://tinypng.com
        
    - 이미지 편집 사이트(투명조조절)
        1. https://www3.lunapic.com/editor/?action=alpha-transparency
         
    - 파피콘 무료 생성 사이트
        1. 무료 https://www.favicon-generator.org
        
        
       step, progress : https://startbootstrap.com/previews/sb-admin-pro 
       
       스탭별 탭내용 출력 샘플: https://demos.creative-tim.com/material-bootstrap-wizard/wizard-book-room.html?_ga=2.176213733.1723108789.1605859115-1484927508.1601097013
************************/
@font-face {
    font-family: 'SeoulNamsanM';
    src: url('./SeoulNamsanM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}        

:root { 
    --dipa-body-color: rgb(255, 255, 255); 
}
body {
    font-weight: normal;
    font-style: normal;
    background-color: var(--dipa-body-color) !important;
}

a {
    text-decoration: none; 
}

.rgba-black-light {
    background-color: rgba(0, 0, 0, 0.35);
}

.rgba-black-strong {
    background-color: rgba(0, 0, 0, 0.70);
}

.rgba-blue-gray-slight {
    background-color: rgba(96, 125, 139, 0.1);
}
.rgba-blue-gray-light {
    background-color: rgba(96, 125, 139, 0.35);
}
.rgba-blue-gray-strong {
    background-color: rgba(96, 125, 139, 0.7);
}
.rgba-orange-slight {
    background-color: rgba(255, 152, 0, 0.1);
}

.DP-myeongjo {
    font-family: '나눔명조', 'Nanum Myeongjo', '바탕체', Batangche;
    font-weight: bold;
}

.DP-gothic {
    font-family:'나눔고딕', NanumGothic, 'Nanum Gothic', '굴림', gulim;    
    font-weight: bold;
}

.DP-fs-08 { font-size: 0.8rem !important; }
.DP-fs-09 { font-size: 0.9rem !important; }
.DP-fs-11 { font-size: 1.1rem !important; }
.DP-fs-12 { font-size: 1.2rem !important; }
.DP-fs-13 { font-size: 1.3rem !important; }
.DP-fw-800 { font-weight: 800 !important; }
.DP-fw-900 { font-weight: 900 !important; }
.DP-opcity-10 { opacity: 10% !important; }
.DP-opcity-20 { opacity: 20% !important; }
.DP-opcity-30 { opacity: 30% !important; }
.DP-opcity-40 { opacity: 40% !important; }
.DP-opcity-50 { opacity: 50% !important; }
.DP-opcity-60 { opacity: 60% !important; }
.DP-opcity-70 { opacity: 70% !important; }
.DP-opcity-80 { opacity: 80% !important; }
.DP-opcity-90 { opacity: 90% !important; }
.DP-opcity-100 { opacity: 100% !important; }
.DP-no-outline { outline: none !important; }
.DP-cursor-hand { cursor: pointer !important; }
.DP-color-darkred { color: rgb(190, 4, 5) !important; }
.DP-focus {
    color: var(--bs-btn-hover-color) !important;
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
    outline: 0 !important;
    box-shadow: var(--bs-btn-focus-box-shadow) !important;
}

.DP-bar-threecolor {
    border-bottom: 1px solid rgba(222, 224, 226, 0.9);
    height: 6px;
    padding: 0px !important;
    margin: 0px !important;
}
.DP-bar-threecolor .bgcolor1 {
    background-color: rgb(235, 187, 83);
    padding: 0px !important;
    margin: 0px !important;
}
.DP-bar-threecolor .bgcolor2 {
    background-color: rgb(135, 191, 76);
    padding: 0px !important;
    margin: 0px !important;
}
.DP-bar-threecolor .bgcolor3 {
    background-color: rgb(66, 129, 192);
    padding: 0px !important;
    margin: 0px !important;
}

.DP-shadow-xl {
    box-shadow: 0 1rem 2.5rem -0.8rem rgba(0, 0, 0, 0.56),
                0 0.25rem 1.5rem rgba(0, 0, 0, 0.12),
                0 0.5rem 0.75rem -0.3rem rgba(0, 0, 0, 0.2);
    overflow: hidden;                
}

.DP-button-lift {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.DP-button-lift:hover {
    transform: scale(1.1) translateY(0.3rem);
    border: 2px solid rgb(205, 215, 225);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.2),
                0 6px 30px 5px rgba(0, 0, 0, 0.2),
                0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.DP-button-lift:active {
  transform: none;
}

/* ================ 각 메뉴의 헤드 타이틀 내용에 대한 폰트 크기에 대한 responsive (시작) ================ */
body {
    font-family:'굴림', gulim;
}    
/* 
노트패드(예: GPad3)에서 나눔고딕의 장평 계산이 작게 산출되는 버그가 있어 굴림체를 사용하도록 함
    - Small devices (landscape phones, 544px and up)
    - Medium devices (tablets, 768px and up)
    - Large devices (desktops, 992px and up)
    - Extra large devices (large desktops, 1200px and up)
*/
@media (min-width: 768px) {
    body {
        font-family:'나눔고딕', NanumGothic, 'Nanum Gothic', '굴림', gulim;
    }
    .DP-comm-message {
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, 
                    rgba(0, 0, 0, 0.12) 0px -12px 30px, 
                    rgba(0, 0, 0, 0.12) 0px 4px 6px, 
                    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
                    rgba(0, 0, 0, 0.09) 0px -3px 5px;
        animation-duration: 0.3s;
        animation-name: DP-comm-message;
    }    
}
@media (max-width: 768px) {
    .DP-comm-message {
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, 
                    rgba(0, 0, 0, 0.12) 0px -12px 30px, 
                    rgba(0, 0, 0, 0.12) 0px 4px 6px, 
                    rgba(0, 0, 0, 0.17) 0px 12px 13px, 
                    rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }    
}

/* ================ 각 메뉴의 헤드 타이틀 내용에 대한 폰트 크기에 대한 responsive (끝) ================ */

.DP-divider {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight:300;
}
.DP-divider:before,
.DP-divider:after {
    content: '';
    height: 1.5px;
    background: #666;
    flex: 1;
}
.DP-divider:before {
    margin: 0 0.45rem 0 0;
}
.DP-divider:after {
    margin: 0 0 0 0.45rem; 
}

/* ================ carousel style (시작) ================ */
#outer-slide { /* 바깥 이미지에 대해 흐리게 하는 효과  원래:4px */
    filter: blur(6px);
}
#inner-slide { /* 안쪽 이미지에 대해 top 및 bottomdp 15% 정도의 margin을 부여함 */
    top: 15%;
    bottom: 15%;
}
/* ================ carousel style (종료) ================ */

/* ================ section-info style (시작) ================ */
#section-info, #ceo {
    background-image: url(./../images/sample/tile.jpg);
    background-repeat: repeat;
}



.DP-shadow-EaseInOut {
    transition: 0.5s ease-in-out;
}
/* ================ section-info style (종료) ================ */


/* ================ Card section style (시작) ================ */
.DP-bg-purple {
    background-color: purple;
}
.DP-text-purple {
    color: purple;
}
.DP-bg-primary {
    background-color: rgba(0, 123, 255, 0.03);
}
.DP-bg-secondary {
    background-color: rgba(108, 117, 125, 0.03);
}



/* ================ Card section style (종료) ================ */

/* ================ Gallery section style (시작) ================ */
.DP-gallery-item {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
}

.DP-gallery-item img {
    display: block;
}

.DP-gallery-item div.DP-img-overlay {
    position: absolute;
    top: 100%;
    bottom: 0;
    right: 15px;
    left: 15px;
    padding: 2rem;
    background-color: rgba(234, 128, 252, 0.75);
    color: #ffffff;
    transition: top ease-in-out 0.25s;
}

.DP-gallery-item:hover div.DP-img-overlay {
    top: 0;
}
/* ================ Gallery section style (종료) ================ */

/* ================ 미디어 회사이력 section style (시작) ================ */
.DP-brand-history {
    background: url(./../images/sample/brand.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.DP-brand-content:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* ================ 미디어 회사이력  section style (종료) ================ */

/* ================ NavTab+Lightbox 회사소개  section style (시작) ================ */
.DP-image-lightbox .col img:hover { /* 마우스가 hover된 이미지에 대한 css 처리*/
    transform: rotate(-10deg) scale(1.05, 1.05); /*10도 정도 회전하고, x축으로 1.05배 크기로, y축으로 1.05배 크기로 확대함 */
    opacity: 1; /* 투명도 없음 */
}

.DP-image-lightbox:hover img { /* 마우스가 hover된 이미지를 제외한 다른 이미지들에 대한 css 처리*/
    transform: scale(0.9, 0.9); /* x축으로 0.9배 크기로, y축으로 0.9배 크기로 축소함 */
    opacity: 0.6; /* 투명도 40% 적용 */
}

.DP-image-lightbox .col img, /* 마우스가 hover된 이미지에 대한 css 처리*/
.DP-image-lightbox img { /* 마우스가 hover된 이미지를 제외한 다른 이미지들에 대한 css 처리*/
    transition: all 0.3s ease-in-out; /* 전환효과를 03초동안 천천히 시작해서 천천히 끝냄. all:rotate+scale+opacity, 0.3초동안, ease-in-out: slow start + slow end */
}
/* ================ NavTab+Lightbox 회사소개  section style (종료) ================ */



/* ================ page.html style (시작) ================ */
.DP-main{
    background: #ffffff;
    z-index: 3;
}

/* ================ page.html style (종료) ================ */

/* ================ page.html의 Aside style (시작) ================ */
.DP-page-list-round {
    border-radius: 0.25rem 0.25rem 0 0;
    display: block;   /* IE버그로 임시조치 */  
}
.DP-widget-group-back {
    background-color: rgba(0, 0, 0, 0.35);
}
.DP-widget-group-back:hover {
    background-color: rgba(0, 0, 0, 0.7);
    transition: 0.5s ease-in-out;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                0 6px 30px 5px rgba(0, 0, 0, 0.12),
                0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
/* ================ page.html의 Aside style (종료) ================ */

/* ================ page.html의 Communicating style (시작) ================ */
.DP-communicate-box {
    background-color: rgba(96, 125,139, 0.8);
    border-radius:5px;
    transition: 0.5s ease-in-out;
}
.DP-communicate-box:hover {
    background-color: rgba(96, 125,139, 0.95);
}
/* ================ page.html의 Communicating style (종료) ================ */


/* ================ footer style (시작) ================ */
footer.footer {
    background-color: #e0edf0;
}
.DP-hr-1-white {
    border-top: 1px solid #ffffff;
    
}
/* ================ footer style (종료) ================ */

.DP-Pagination-focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);    
}

/* ================ post style (시작) ================ */
.DP-post-header {
    border-bottom: 1px solid rgba(96, 125, 139, 0.7);
}
.DP-post-meta {
    border-top: 1px solid rgba(96, 125, 139, 0.35);
    border-bottom: 1px solid rgba(96, 125, 139, 0.35);
}
.DP-post-excerpt, .DP-second-featured-img {
    position: absolute;
    left: -4rem;
}
.DP-post-excerpt {
    top: 1rem;
}
.DP-second-featured-img {
    top: 10rem;
}

.DP-datepicker-icon {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important; 
    cursor: pointer !important;
}

.DP-image-raised {
    margin: -1.5rem 0.625rem 0;
    /*
    transform: scale(0.9); IE에서 이미지 사이즈가 깨짐
    */
    width: 90%;
    height:90%;
    
}
/* ================ post style (종료) ================ */
.DP-hover-shadow-xl:hover {
    box-shadow: 0 1rem 2.5rem -0.8rem rgba(0, 0, 0, 0.56),
                0 0.25rem 1.5rem rgba(0, 0, 0, 0.12),
                0 0.5rem 0.75rem -0.3rem rgba(0, 0, 0, 0.2);
    transform: translateY(-1px) scale(1.05);
    transition-property: transform, box-shadow;
    transition-timing-function: ease-in-out;
    transition-duration: 0.13s;                
    cursor: pointer;    
}

.DP-hover-shadow-lg:hover {
    box-shadow: 0 0.3rem 0.8rem -0.3rem rgba(0, 0, 0, 0.28),
                0 0.08rem 0.5rem rgba(0, 0, 0, 0.06),
                0 0.2rem 0.25rem -0.1rem rgba(0, 0, 0, 0.1);
    transform: translateY(-1px) scale(1.03);
    transition-property: transform, box-shadow;
    transition-timing-function: ease-in-out;
    transition-duration: 0.1s;                
    cursor: pointer;    
}

.DP-hover-scale-xl:hover {
    text-shadow:-1px -1px 0px #fff,
                1px -1px 0px #fff,
                -1px 1px 0px #fff,
                1px 1px 0px #fff,
                2px 2px 3px rgb(0, 0, 0);

    transform: translateY(-2px) scale(1.15);
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: 0.13s; 
    cursor: pointer;    
}

.DP-hover-scale-lg:hover {
    text-shadow:-1px -1px 0px #fff,
                1px -1px 0px #fff,
                -1px 1px 0px #fff,
                1px 1px 0px #fff,
                2px 2px 3px rgb(0, 0, 0);

    transform: translateY(-2px) scale(1.13);
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: 0.1s;                
    cursor: pointer;    
}

.DP-hover-txt-shadow:hover {
    text-shadow:-1px -1px 0px #fff,
                1px -1px 0px #fff,
                -1px 1px 0px #fff,
                1px 1px 0px #fff,
                2px 2px 3px rgb(0, 0, 0);
                
    color: black;
    transform-origin: 0 100%;
    transform: translateY(-2px) scale(1.05);
    transition-property: transform;
    transition-timing-function: ease-in-out;
    transition-duration: 0.1s;                
    cursor: pointer;    
}


/********************************************************************************/
/*      일반 input 및 select박스에 대한 placeholder을 만들고 전체 placeholder의 컬러를 통일함 */
/********************************************************************************/ 
.DP-placeholder,
::placeholder { /* placeholder의 폰트사이즈를 1rem에서 0.8rem으로 줄이고, 글자색도 #b3b8bd 으로 흐릿한 글자로 표출하는 효과 */
    font-size: 0.8rem !important;
    color: #b3b8bd !important;
    opacity: 1 !important; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 0.8rem !important;
    color: #b3b8bd !important;
    opacity: 1 !important; /* Firefox */
}

::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 0.8rem !important;
    color: #b3b8bd !important;
    opacity: 1 !important; /* Firefox */
}

select {
    font-size: 1rem !important;
}

select:disabled {
    color:  #b3b8bd !important;
}
select:required:invalid {
    font-size: 0.8rem !important;
    color:  #b3b8bd !important;
}
option[value=""][disabled][hidden] {
    display: none;
}
option {
    font-size: 1rem !important;
    color: #212529 !important;
}
/*******************************************************************************/



.DP-callout {
    font-size: 0.96rem;
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    background-color: var(--bd-callout-bg, var(--bs-gray-100));
    border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}

.DP-callout-primary {
    --bd-callout-bg: #f0f5fc;
    --bd-callout-border: #5b99ea;
}
.DP-callout-primary .DP-title {
    color: #1c6fdc;
}
.DP-callout-warning {
    --bd-callout-bg: #fdf6e5;
    --bd-callout-border: #eebf41;
}
.DP-callout-warning .DP-title {
    color: #d09c13;
}
.DP-callout-success {
    --bd-callout-bg: #e7f4eb;
    --bd-callout-border: #5cb377;
}
.DP-callout-success .DP-title {
    color: #3e8554;
}
.DP-callout-danger {
    --bd-callout-bg: #fbf3f2;
    --bd-callout-border: #d26d69;
}
.DP-callout-danger .DP-title {
    color: #b73c37;
}
.DP-callout-secondary {
    --bd-callout-bg: rgba(var(--bs-secondary-rgb), .075);
    --bd-callout-border: rgba(var(--bs-secondary-rgb), .5);
}
.DP-callout-info {
    --bd-callout-bg: rgba(var(--bs-info-rgb), .075);
    --bd-callout-border: rgba(var(--bs-info-rgb), .5);
}
.DP-callout-light {
    --bd-callout-bg: rgba(var(--bs-light-rgb), .075);
    --bd-callout-border: rgba(var(--bs-light-rgb), .5);
}
.DP-callout-dark {
    --bd-callout-bg: rgba(var(--bs-dark-rgb), .075);
    --bd-callout-border: rgba(var(--bs-dark-rgb), .5);
}

.DP-accordion-primary {
    background-color: rgba(207, 226, 255, 0.12) !important;
}
.DP-accordion-primary .accordion-button {
    --bs-accordion-active-color:#084298;
    color:#084298 !important;
    --bs-accordion-active-bg: rgba(207, 226, 255, 0.2);
    background-color: rgba(207, 226, 255, 0.2) !important;
    border: 1px solid #b6d4fe;
}
.DP-accordion-primary .accordion-button:focus {
    box-shadow: none;
    border-color: #b6d4fe;
}
.DP-accordion-primary .DP-badge-icon {
    color:#084298 !important;
    opacity: 0.7;
}

.DP-accordion-danger {
    background-color: rgba(248, 215, 218, 0.12) !important;
}
.DP-accordion-danger .accordion-button {
    --bs-accordion-active-color:#842029;
    color:#842029 !important;
    --bs-accordion-active-bg: rgba(248, 215, 218, 0.2);
    background-color: rgba(248, 215, 218, 0.2) !important;
    border: 1px solid #f5c2c7;
}
.DP-accordion-danger .accordion-button:focus {
    box-shadow: none;
    border-color: #f5c2c7;
}
.DP-accordion-danger .DP-badge-icon {
    color:#842029 !important;
    opacity: 0.7;
}

.DP-accordion-warning {
    background-color: rgba(255, 243, 205, 0.12) !important;
}
.DP-accordion-warning .accordion-button {
    --bs-accordion-active-color:#664d03;
    color:#664d03 !important;
    --bs-accordion-active-bg: rgba(255, 243, 205, 0.2);
    background-color: rgba(255, 243, 205, 0.2) !important;
    border: 1px solid #ffecb5;
}
.DP-accordion-warning .accordion-button:focus {
    box-shadow: none;
    border-color: #ffecb5;
}
.DP-accordion-warning .DP-badge-icon {
    color:#664d03 !important;
    opacity: 0.7;
}

.DP-accordion-info {
    background-color: rgba(207, 244, 252, 0.12) !important;
}
.DP-accordion-info .accordion-button {
    --bs-accordion-active-color:#055160;
    color:#055160 !important;
    --bs-accordion-active-bg: rgba(207, 244, 252, 0.2);
    background-color: rgba(207, 244, 252, 0.2) !important;
    border: 1px solid #b6effb;
}
.DP-accordion-info .accordion-button:focus {
    box-shadow: none;
    border-color: #b6effb;
}
.DP-accordion-info .DP-badge-icon {
    color:#055160 !important;
    opacity: 0.7;
}

.DP-accordion-success {
    background-color: rgba(209, 231, 221, 0.12) !important;
}
.DP-accordion-success .accordion-button {
    --bs-accordion-active-color:#0f5132;
    color:#0f5132 !important;
    --bs-accordion-active-bg: rgba(209, 231, 221, 0.2);
    background-color: rgba(209, 231, 221, 0.2) !important;
    border: 1px solid #badbcc;
}
.DP-accordion-success .accordion-button:focus {
    box-shadow: none;
    border-color: #badbcc;
}
.DP-accordion-success .DP-badge-icon {
    color:#0f5132 !important;
    opacity: 0.7;
}

.DP-accordion-green {
    background-color: rgba(228, 235, 205, 0.12) !important;
}
.DP-accordion-green .accordion-button {
    --bs-accordion-active-color:#5E6600;
    color:#5E6600 !important;
    --bs-accordion-active-bg: rgba(228, 235, 205, 0.2);
    background-color: rgba(228, 235, 205, 0.2) !important;
    border: 1px solid #D5DFB1;
}
.DP-accordion-green .accordion-button:focus {
    box-shadow: none;
    border-color: #D5DFB1;
}
.DP-accordion-green .DP-badge-icon {
    color:#5E6600 !important;
    opacity: 0.7;
}

:root { 
    --dp-pay-color: rgb(190, 4, 5); 
}
.DP-pay-nodata { 
    --dp-pay-color: rgb(4, 5, 190); 
}
.DP-pay-err { 
    --dp-pay-color: rgb(190, 4, 5); 
}

.DP-pay-nodata,
.DP-pay-err {
    font-size: 1.4rem; 
    border: 1px solid var(--dp-pay-color); 
    color: var(--dp-pay-color);
    text-shadow:-1px -1px 0px #fff,
                1px -1px 0px #fff,
                -1px 1px 0px #fff,
                1px 1px 0px #fff,
                1px 1px 2px rgb(0, 0, 0);  
}
.DP-pay-nodata:hover,
.DP-pay-err:hover {
    color: var(--dp-pay-color);
    text-shadow: -1px -1px 0px #fff,
                 1px -1px 0px #fff,
                 -1px 1px 0px #fff,
                 1px 1px 0px #fff,
                 1px 1px 4px rgb(0, 0, 0);  
}
.DP-pay-nodata>span>img,
.DP-pay-err>span>img {
    /* width:70px; */
    height: 110px !important;
}
.DP-pay-nodata>span>.iconify,
.DP-pay-err>span>.iconify {
    width:  40px !important;
    height: 40px !important;
}
   
.DP-comm-popup {
    font-size: 1.08rem; 
    line-height:1.6;
    position: absolute !important; 
    z-index: 1040 !important;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.17), 
                0px 4px 8px rgba(0,0,0,0.17), 
                0px 8px 16px rgba(0,0,0,0.17), 
                0px 16px 32px rgba(0,0,0,0.17);    
}

@keyframes DP-animate-headShake {
     0% { transform: translateX(0); }
    12% { transform: translateX(-6px) rotateY(-9deg) skewY(1deg); }
    37% { transform: translateX(5px) rotateY(4.5deg) skewY(-1deg); }
    62% { transform: translateX(-3px) rotateY(-2.25deg) skewY(0); }
    87% { transform: translateX(2px) rotateY(3deg); }
   100% { transform: translateX(0); }
}

.DP-animate-headShake {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(0, .23, 1, .71);
    animation-name: DP-animate-headShake;
    transform-origin:center bottom
}

@keyframes DP-comm-message {
      0% { transform: scale(.7); }
     45% { transform: scale(1.05); }
     80% { transform: scale(.95); }
    100% { transform: scale(1); }   
}

.DP-close-blue-icon {
    color: #80AAD4;
    cursor: pointer;
}
.DP-close-blue-icon:hover {
    color: #4281C0;
}

.DP-img-zoom {
    border-radius: 0.5rem;
    overflow: hidden;
}

.DP-img-zoom img {
    transition: transform 0.5s ease;
    transform-origin: center top;
}

.DP-img-zoom img:hover {
    transform: scale(1.1);
}

/* ================ sidemenu style (시작) ================ */

:root { 
    --dipa-sidemenu-color: transparent;
    --dipa-sidemenu-svg-color: rgba(230, 230, 240, 0.5);
}

.DP-sidemenu {
    height: 100%;
    position: fixed;
    background-color: var(--dipa-sidemenu-color);
    width: 300px;
    transition: 1000ms all cubic-bezier(0.19, 1, 0.22, 1);
    transform: translateX(100%);
    right: 0px;
    z-index: 1050;
}

.DP-sidemenu.expanded {
    transform: translateX(0%);
    right: 0px;
}

.DP-sidemenu-inner {
    width: 100%;
    /* height: 100%; */
    left: 0px;
    position: relative;
    background-color: var(--dipa-sidemenu-color);
}

#divSideMenu-svg {
    top: 0;
    z-index: -1;
    left: 0px;
    height: 100%;
    position: absolute;
}

#divSideMenu-svg-path {
    height: 100%;
    fill: var(--dipa-sidemenu-svg-color);
    //stroke: black;
}

.DP-sidemenu-icon {
    font-size: 2.5rem;
    left: -40px;
    position: absolute;
    /*
    width: 30px;
    height: 30px;
    */
    color: rgba(20,0,0,0.25);
    margin-top: -35px;  
}
/* ================ sidemenu style (종료) ================ */