@charset "utf-8";
/* CSS Document */

/*自動彈出公告*/
.modal-md {max-width: 500px;} /*系統預設值*/
#newsletter-popup{padding-right: 0px!important;}
#newsletter-popup .modal-content{box-shadow: 0 0 8px 0 rgb(0 0 0 / 35%);}
#newsletter-popup .modal-body{min-height: 300px;padding: 0rem;}
#newsletter-popup .newsletter-popup-page{  display: flex;}
#newsletter-popup .description-page{padding: 2.5rem 1.5rem 1.5rem 1.5rem;text-align: left;display: flex;flex-direction: column;/*justify-content: center;*/align-items: center;height: 100%;}
#newsletter-popup .description-box{padding: 0rem;grid-gap: .65rem;display: flex;flex-direction: column;/*align-items: center;*/}
#newsletter-popup .main_title_box{font-size: 1.375rem;font-weight: 600;margin-bottom:0;margin-top: 0rem;}
#newsletter-popup .sub_title_box{font-size: 1.125rem;margin-bottom:0;}
#newsletter-popup .sub_title_box  strong{font-weight: 600;} 
#newsletter-popup .txt_box{margin-bottom:0;}
#newsletter-popup .btn-item { padding: .5rem 1rem;}
#newsletter-popup .description-box + .btn-item{margin-top: 1.5rem;}

#newsletter-popup .close { top: 5px; text-align: center; right: 5px; color: #000; font-size: 20px; position: absolute; z-index: 2; opacity: 1; height: 36px; width: 36px; border-radius: 50%; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 6px;}
#newsletter-popup .close:hover { color: #C00; }
#newsletter-popup .close i { text-shadow: 0 0 0 transparent; }
#newsletter-popup .close:hover i{transform: rotate(120deg);}

#newsletter-popup .close:before{content: "";background-size: 100%;width: 40px;height: 40px;background-repeat: no-repeat; background-position: left center;transition: all 0.5s;} 
#newsletter-popup .close:before{background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")}
#newsletter-popup .close:hover:before{transform: rotate(180deg);}
#newsletter-popup .close:hover:before{background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 24 24' fill='%23C00' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.293 5.293a1 1 0 0 1 1.414 0L12 10.586l5.293-5.293a1 1 0 1 1 1.414 1.414L13.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414L12 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L10.586 12 5.293 6.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E")}

/*圖片 模式*/
.image-mode-modal{}
.image-mode-modal .btn-item{bottom: 0; left: 50%;transform: translate(-50%, -50%);position: absolute;}

/*文字 模式*/
.text-mode-modal{}
.text-mode-modal .newsletter-popup-page{grid-gap: 1.5rem;flex-direction: column;align-items: center;justify-content: center;height: 100%;}
.text-mode-modal .image-page{}
.text-mode-modal .description-page{}

/*左圖片右文字 模式*/
.left-image-right-text-mode-modal{}
.left-image-right-text-mode-modal .newsletter-popup-page{grid-gap: 1rem;align-items: flex-start;height: 100%;}
.left-image-right-text-mode-modal .image-page{}
.left-image-right-text-mode-modal .description-page{}

/*右圖片左文字 模式*/
.right-image-left-text-mode-modal{}
.right-image-left-text-mode-modal .newsletter-popup-page{grid-gap: 1.5rem;align-items: flex-start;height: 100%;}
.right-image-left-text-mode-modal .image-page{order: 2}
.right-image-left-text-mode-modal .description-page{order: 1}

/*上圖片下文字 模式*/
.top-image-below-text-mode-modal{}
.top-image-below-text-mode-modal .newsletter-popup-page{grid-gap: 0rem;flex-direction: column;justify-content: center;}
.top-image-below-text-mode-modal .image-page{}
.top-image-below-text-mode-modal .description-page{padding: 1rem;height: auto!important;}

/* 顏色 模式*/
#newsletter-popup .modal-content[class~=bg-light]  .close{color: #000;}
#newsletter-popup .modal-content[class~=bg-light]  .close:hover{color: #E40046;}

@media only screen and (max-width:992px) {
#newsletter-popup .modal-body { min-height: auto!important;padding: 0rem;}
#newsletter-popup .newsletter-popup-page{ height: auto; }
#newsletter-popup .description-page{padding: 2.5rem 1.25rem  1.5rem 1.25rem;}
#newsletter-popup .description-box + .btn-item {margin-top: 1rem;}
#newsletter-popup .main_title_box{/*padding: 0 1.25rem;*/}
.left-image-right-text-mode-modal .newsletter-popup-page {grid-gap: 0rem;align-items: flex-start;flex-direction: column;}
.right-image-left-text-mode-modal .newsletter-popup-page {grid-gap: 0rem;align-items: flex-start;flex-direction: column;}
.right-image-left-text-mode-modal .image-page{order: 1}
.right-image-left-text-mode-modal .description-page{order: 2}
}
@media only screen and (max-width:768px) {
}
@media only screen and (max-width:576px) {
.modal-dialog {margin: 0rem auto;min-height: calc(100% - 0rem);padding: 2rem 2rem;}
#newsletter-popup .description-page{padding: 2.5rem 1rem 1.5rem 1rem;}
#newsletter-popup .close { top: 5px; right: 5px;}
#newsletter-popup .main_title_box{font-size: 1.25rem;}
#newsletter-popup .sub_title_box{font-size: 1rem;}
}