﻿.hotkey-links, .hotkey-hint {
    display:none;
}

/*--- pop up ---*/
.popup {
	border-radius: 16px !important;
	box-shadow: 0 5px 18px rgba(0,0,0,.15);
    padding-bottom: .875px;
}
.popup .popup-title {
	display: block;
	color: #FFF;
	border-radius: 16px 16px 0 0;
	padding: 0.875rem;
	font-size: 1.5em;
    line-height: 1em;
    text-align: center;
    text-shadow: 0 3px 5px rgba(0,0,0,.2);
    font-weight: 700;
}
.titlebg-blue {
	background-image: linear-gradient(to right bottom, #035fdd , #00c8da);
}
.titlebg-red {
	background-image: linear-gradient(to right bottom, #ef7e6d , #ef956d);
}
.titlebg-green {
	background-image: linear-gradient(to right bottom, #00b8bf , #00e0a3);
}
.popup .popup-main {
    margin: 0 10px 10px;
	background-color: rgba(255,255,255,.95);
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    border-radius: 12px;
	padding: 1.25rem 2rem;
    font-size: 1.125rem;
    color:#555;
    
}
.popup-main p, .popup-main div {
	line-height: 1.8rem;
	font-size: 1.125rem;
	padding: 0.5rem;
    color: #333;
}
.popup-main span {
    font-size: 1.125rem;
    color: #333;
}
.popup-main a {
    display: inline-block;
    color:#005bb0;
}

/* 文字底色設定 */
.popup-main .mark_yellow {
    background-color: #ffe68d!important;
}
.popup-main .mark_red {
    background-color: #ffa3b6!important;
}
.popup-main .mark_blue {
    background-color: #7ab9e5!important;
}
.popup-main .mark_green {
    background-color: #9be3b8!important;
}
/* 文字底線設定 */
.popup-main .underline {
    text-decoration: underline!important;
}
/* 文字字級設定 */
.popup-main .text-xl {
    font-size: 1.5rem!important;
}
.popup-main .text-md {
    font-size: 1.375rem!important;
}
.popup-main .text-xs {
    font-size: 0.9375rem!important;
}
/* 文字顏色設定 */
.popup-main .text-red {
    color: #e0012b!important;
}
.popup-main .text-blue {
    color: #006dac!important;
}
.popup-main .text-green{
    color: #007611!important;
}
.popup-main .text-brown {
    color: #764500!important;
}

.popup .popup-footer {
	border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem 0.5rem 1rem;
}
.titlebg-blue .btn-grey {
	font-size: 1em;
    border: none;
	padding: 5px 20px;
	background-color: rgba(255,255,255,.5);
	border: 0px solid #eee;
}
.titlebg-blue .btn-grey:hover {
	font-size: 1em;
    border: none;
	padding: 5px 20px;
	background-color: #0e3d80!important;
	border: 0px solid #eee;
    color: #FFF!important;
}
.titlebg-red .btn-grey {
	font-size: 1em;
    border: none;
	padding: 5px 20px;
	background-color: rgba(255,255,255,.5);
	border: 0px solid #eee;
}
.titlebg-red .btn-grey:hover {
	font-size: 1em;
    border: none;
	padding: 5px 20px;
	background-color: #a90202!important;
	border: 0px solid #eee;
    color: #FFF!important;
}
.titlebg-green .btn-grey {
	font-size: 1em;
    border: none;
	padding: 5px 20px;
	background-color: rgba(255,255,255,.5);
	border: 0px solid #eee;
}
.titlebg-green .btn-grey:hover {
	font-size: 1em;
    border: none;
	padding: 5px 20px;
	background-color: #007478!important;
	border: 0px solid #eee;
    color: #FFF!important;
}
/*.popup .pop-img {
	background: url("../images/ad-alert.jpg");
}*/
.popup .popup-checkbox {
	text-align:center;
}

@media (min-width:1200px) {
	.popup .popup-main {
		max-height:75vh;
	overflow:auto;
	}
}
@media (max-width:1200px) {
	.popup .popup-main {
		max-height:70vh;
        overflow-y:scroll;
	}
}
@media (max-width:992px) {
	.popup .popup-main {
		max-height:65vh;
        overflow-y:scroll;
	}
}
@media (max-width: 768px) {
	.popup .popup-main {
		overflow-y:scroll;
		max-height:65vh;
	}
}
@media (max-width: 576px) {
	.popup .popup-main {
		overflow-y:scroll;
		max-height:60vh;
	}
}

/*ad*/
.ad_bg_t{
    background-color: rgba(0,0,0,.35);
    position: fixed;
    top: 0;
    display: block;
    z-index: 1031;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#div_ad { 
    position: relative; 
    margin: 0% auto;
    top: 3%;
    width: 70%;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
    #div_ad { 
        top: 1rem;
    }
}
@media (max-width: 768px) {
    #div_ad { 
        top: 75px;
        width: 95%;
    }
}

.popup-main img { 
    border: none; 
    width: 100%;
}

#close_ad { display: block; }

#imgclose {
    position: absolute; 
    cursor: pointer;
    right: 0.625rem;
    top: 0.625rem;
    width: 2rem;
    opacity: .5;
    transition: all .3s;
}
#imgclose:hover {
    transform: rotate(90deg); 
    opacity: 1;
}

