/*-------------------------
  兒 少 網 安 i 事 件 專 用 
-------------------------*/
.page_b .content_bg {
		background-color: #00030a;
		background-image: url("../../images/security/bg.jpg");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center top;
		background-size: cover;
		padding-top: 10%;
		padding-bottom: 10%;
}
.page_b section {
		min-height: inherit;
}
.page_head {
		width: 20vw;
		max-width: 12.5em;
		padding-right: 1rem;
}
.peo-item {
		width: 15vw;
		max-width: 9.375em;
		bottom: 0;
		margin-left: -2rem;
}
.btn.btn-video {
		margin: 0 .5rem;
		padding: .25rem .5rem;
		border-radius: .5rem !important;
		border: 0;
		background-color: var(--c_m_blue);
		color: var(--c_white);
		-webkit-box-shadow: 0 -.1rem 0 var(--c_white);
		        box-shadow: 0 -.1rem 0 var(--c_white);
}
.btn.btn-video:hover, .btn.btn-video.active {
		background-color: var(--c_pink);
}
.btn.btn-video.active i {
		color: var(--c_pink);
}
.btn.btn-video i {
		width: 18px;
		height: 18px;
		position: relative;
		border-radius: 100%;
		display: inline-block;
		background-color: var(--c_white);
		color: var(--c_l_blue_sp);
		text-align: center;
		margin-right: .5rem;
		padding-left: 2px;
		padding-bottom: 2px;
}
.page_content .photo {
		border-radius: 1rem;
		border: 1px solid var(--c_l_blue);
		-webkit-box-shadow: 0 0 1rem var(--c_l_blue);
		        box-shadow: 0 0 1rem var(--c_l_blue);
		overflow: hidden;
}
.page_title .info_txt, .page_content .info_txt {
		opacity: 1;
		background-color: rgba(255, 255, 255, 0);
		width: contain;
}
.page_e .copyright {
		color: var(--c_white);
		opacity: 1;
}
.page_b .page_title {
		max-width: 100%;
		margin: 10% 0 10% auto;
		padding: 1.5rem 0 1.5rem 3rem;
		position: relative;
}
.page_b .on_right .video a img.cover {
		border: 1px solid var(--c_l_blue);
}
.page_b .video .icon {
		top: auto;
		left: auto;
		right: 15%;
		bottom: 8%;
}
.page_b .video .icon .badge {
		left: 100%;
		top: 35% !important;
		background-color: #5e69e5 !important;
}
.page_b .page_title::before {
		content: '';
		width: 140%;
		height: 130%;
		right: -40%;
		top: -15%;
		background-color: transparent;
		position: absolute;
		z-index: 1;
		border-radius: 0 2rem 2rem 0;
}
.page_b .page_title::before {
		border: 1px solid var(--c_l_blue);
}
.page_b .page_title::before {
		/*background-image: url("../../images/security/bg_item.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;*/
		background-color: RGBA(1, 42, 71, .75);
		-webkit-backdrop-filter: blur(.125rem);
		        backdrop-filter: blur(.125rem);
}
.page_b .page_title::after {
		content: '';
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center;
		width: 140px;
		height: 140px;
		position: absolute;
		right: 2rem;
		bottom: -7rem;
		z-index: 2;
		display: block;
		opacity: 0;
}
.page_b .page_title::after {
		background-image: url(../../images/security/item_top_a.png);
}
.page_b .on_right:hover .page_title::before {
		-webkit-box-shadow: .25rem .5rem 1rem rgba(94, 105, 229, .85);
		        box-shadow: .25rem .5rem 1rem rgba(94, 105, 229, .85);
		border: 1px solid var(--c_l_blue);
}
.page_b .on_right .page_title {
		margin: 5% auto 5% 0;
		padding: 1.5rem 2rem 1.5rem 0;
		color: var(--c_white);
}
.page_b .on_right .page_title::before {
		left: -40%;
}
.page_b .on_top .page_title {
		max-width: 100%;
		margin: 10% auto 0 0;
		padding: 1.5rem 2rem 1.5rem 3rem;
}
.page_b .on_top .page_info {
		padding: 4rem 3rem 0 0;
}
.page_b .on_top .page_info .info_txt {
		color: var(--c_m_blue);
}
.page_b .on_top .page_title::before {
		content: '';
		width: 100%;
		height: 130%;
		right: 0;
		top: 0;
		background-color: var(--c_l_blue_sp);
		position: absolute;
		z-index: 1;
}
.page_content.video {
		z-index: 2;
		position: relative;
}
.page_b .page_title h2, .page_b .page_title p {
		position: relative;
		z-index: 2;
}
.bg_line_board {
		width: 100%;
		height: 100%;
		display: block;
		left: 0;
		top: 0;
}
.bg_line_board::before {
		content: '';
		width: 40%;
		height: 40%;
		display: block;
		left: 2.5rem;
		top: 1.75rem;
		background-color: var(--c_orange);
		z-index: -1;
		position: absolute;
}
.bg_line_board::after {
		content: '';
		width: 20%;
		height: 20%;
		display: block;
		left: 5rem;
		bottom: 1.8rem;
		background-color: var(--c_orange);
		position: absolute;
		z-index: -1;
}
.footer-has-nav > div {
		z-index: 3;
}
.footer-has-nav::after {
		content: '';
		height: 8rem;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		-webkit-backdrop-filter: blur(1.5rem);
		backdrop-filter: blur(1.5rem);
		width: contain;
}
.bg_item {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		opacity: .8;
}
.page_b .bg_item.mobile {
		display: none;
}
@media (min-width: 1920px) {
		.page_b .page_title {
				max-width: 90%;
				padding: 1.5rem 0 1.5rem 4rem;
		}
}
@media (max-width: 1199px) {
		.page_b .page_title {
				padding: 1.5rem 0 1.5rem 4rem;
		}
		.page_b .page_title::before {
				right: -40%;
		}
		.page_b .on_top .page_title::before {
				height: 140%;
		}
		.footer-has-nav::after {
				height: 6rem;
		}
}
@media (max-width: 991px) {
		.page_b .on_top .page_info {
				padding: 3rem 3rem 2rem 0;
		}
		.page_b .page_title::before {
				width: 130%;
				height: 110%;
				right: -40%;
				top: -5%;
		}
		.page_b .on_right .page_title::before {
				left: -30%;
		}
		.row.py-4 {
				padding-top: .5rem !important;
		}
		.page_head {
				width: 50vw;
				max-width: 14em;
				padding-right: 0;
				margin-bottom: 4rem !important;
		}
		.footer-has-nav::after {
				height: 5rem;
		}
		.page_b .page_title::after {
				width: 80px;
				height: 80px;
				bottom: -3rem;
		}
		.page_b .video .icon {
				right: 10%;
				bottom: 5%;
		}
}
@media (max-width: 991px) and (orientation: landscape) {
		.footer-has-nav::after {
				height: 3.5rem;
		}
		.page_b #intro .container.sp {
				max-width: 100%;
		}
		.page_b .page_title::before {
				min-height: 250px;
				height: 250px;
				top: 0;
				bottom: 0;
				margin-top: auto;
				margin-bottom: auto;
		}
}
@media (max-width: 767px) {
		.page_head {
				width: 40vw;
		}
		.page_b .video .icon {
				bottom: -3.5rem;
				right: 0;
		}
		.page_b .on_right .page_title {
				padding: 1.5rem 0.5rem 1.5rem 0;
		}
		.page_b .page_title::before {
				width: 160%;
				height: 100%;
				right: -40%;
				top: 0;
		}
		.page_b .page_title {
				padding: 1.5rem 0 1.5rem 1rem;
		}
		.footer-has-nav::after {
				height: 4rem;
		}
		.page_b .on_right .page_title::before {
				left: -20%;
		}
		.page_b .video .icon {
				right: 25%;
				bottom: 5%;
		}
}
@media (min-width: 568px) and (max-width: 599px) {
		.copyright span.d-lg-none.d-block, br.d-block.d-sm-none {
				display: none !important;
		}
		.copyright span.d-lg-inline-block.d-none {
				display: inline-block !important;
		}
		.row.py-4 {
				padding-top: .5rem !important;
		}
		.col-sm-7 {
				-ms-flex: 0 0 55%;
				-webkit-box-flex: 0;
				        flex: 0 0 55%;
				max-width: 55%;
		}
		.col-sm-5 {
				-ms-flex: 0 0 45%;
				-webkit-box-flex: 0;
				        flex: 0 0 45%;
				max-width: 45%;
				padding: 0;
		}
		.need_ch {
				display: none !important;
		}
		.footer-has-nav::after {
				height: 3rem;
		}
		.page_b .page_title {
				padding: 1.5rem 0 1.5rem 0;
		}
		.order-sm-1.order-0 {
				-webkit-box-ordinal-group: 2 !important;
				    -ms-flex-order: 1 !important;
				        order: 1 !important;
		}
		.order-sm-0.order-1 {
				-webkit-box-ordinal-group: 1 !important;
				    -ms-flex-order: 0 !important;
				        order: 0 !important;
		}
		.page_b .on_top .page_title {
				padding: 1.5rem 1rem 1.5rem 1rem;
		}
		.page_b .on_right .page_title {
				padding: 1.5rem 0 1.5rem 0;
		}
		.footer-has-nav {
				position: relative !important;
		}
		.page_b .page_title::before {
				min-height: inherit;
		}
		.page_b .video .icon {
				right: 28%;
				bottom: 5%;
		}
}
@media (max-width: 567px) {
		.page_b .on_right .page_title::before {
				top: 0;
		}
		.page_b #intro .container-xl {
				overflow: hidden;
		}
		.page_b .page_title::after {
				right: 0;
		}
		.page_b .video .icon {
				right: 8%;
				bottom: 15%;
		}
		.page_b #intro .container.sp {
				width: 110%;
				left: -5%;
				position: relative;
				margin: auto;
		}
		.page_content.video {
				top: 2.5rem;
		}
		.page_b .page_title {
				padding: 2.5rem 0 1.5rem 1rem;
		}
		.page_b .page_head {
				width: 50vw;
				margin-bottom: 1rem !important;
		}
		.page_b .on_top .page_title::before {
				height: 100%;
		}
		.page_b .on_top .page_title {
				max-width: 100%;
				margin: 10% auto 0 0;
				padding: 1.5rem 1.5rem 1.5rem 1.5rem;
		}
		.page_b .btn.btn-video i {
				display: none;
		}
		.page_b .peo-item {
				width: 24vw;
				bottom: 70%;
		}
		.page_b .bg_item {
				display: none;
		}
		.page_b .bg_item.mobile {
				display: block;
				bottom: auto;
				top: 0;
		}
		.page_b .bg_line_board::after, .page_b .bg_line_board::after {
				display: none;
		}
		.page_b .footer-has-nav::after {
				height: 6rem;
				background-color: rgb(0, 24, 39, .9);
		}
		.page_b .on_right .page_title {
				padding: 1.5rem 0;
		}
}
@media (max-width: 320px) {
		footer.pt-3 {
				padding-top: 0 !important;
		}
		footer br.br_ch {
				display: none !important;
		}
		.space_ch {
				padding: 0 !important;
		}
		.page_b .on_top .page_title {
				padding: 1.5rem 1rem 1.5rem 1rem;
		}
		.page_b .on_top .page_title::before {
				width: 130%;
				right: -10%;
		}
		.page_b .video .icon {
				right: 8%;
				bottom: 18%;
		}
}