@charset "utf-8";

/*統一顏色設定 */
:root {
	--main-color: #008fc7;
	--dragon-color: #D00205;
}

a,
a:hover {
	color: var(--main-color);
}

.flextitle_a1 {
	position: absolute;
	color: #fff;
	width: 900px;
	padding: 0 0 0 120px;
	bottom: 20%;

}

.flextitle_ulall {
	background-color: rgba(0, 0, 0, 0.7);
	width: 30vw;
	padding: 20px;
	border-radius: 5px;
}

.flextitle_a1_t1 {
	font-size: 2.3vw;
	text-shadow: 2px 2px #333;
	margin: 0 0 10px 0;
}

.flextitle_a1_t2 {
	font-size: 1vw;
	width: 30vw;
	text-shadow: 1px 1px #333;
	letter-spacing: 1px;
	line-height: 25px;
}

.tab_service i,
.point_text i {
	text-indent: -9999px;
	width: 25px;
	height: 25px;
	position: relative;
}

.tab_service i:before,
.point_text i:before {
	text-indent: 0px;
	position: absolute;
	left: 7px;
}

.tab_service {
	margin-top: 1.5rem;
}

.tab_service .tab_tit {
	color: var(--main-color);
}

.tab_service .item {
	display: inline-block;
	margin: 0 10px;
	font-size: 20px;
	color: var(--main-color);
	/*統一參數*/
	border-right: solid 1px #DFDFDF;
	padding: 5px 30px;
	line-height: 30px;
}

.tab_service i:before {
	left: -10px;
}

.tab_service .item:last-child {
	border-right: 0;
}

.dragonpass_logo {
	height: 35px !important;
	margin: 0 .7rem;
}

.logo a {
	display: block;
	line-height: 0;
}

.logo img {
	height: 45px;
}

@media screen and (min-width:1024px) {
	.top_logo {
		width: 100%;
		background-color: #FFF;
	}

	.logo {
		width: 1000px;
		margin: 0 auto;
		padding: 5px 0;
	}

	.logo img {
		/* width: 100%;		 */
		/* padding: 5px 0; */
		height: 45px;

	}

	.logo div {
		display: inline-block;
		vertical-align: top;
	}

	.logo_tit1 {
		width: auto;

	}

	.logo_tit2 {
		width: 200px;
		font-size: 17px;
		vertical-align: center;
		margin: 0;
		padding: 14px 0 0 0;

	}

	.point_text {
		width: 1000px;
		padding: 15px 0;
		border-top: solid 1px #D00205;
		border-bottom: solid 1px #D00205;
		margin: 0 auto;
		color: #666;
		line-height: 25px;
		letter-spacing: 1px;
		font-size: 14px;
	}

	.index_h1 {
		color: #D00205;
		letter-spacing: 1px;
		font-weight: normal;
	}

	.card_silder {
		width: 1000px;
		margin: 0 auto;
		text-align: center;
		padding: 30px 0;


	}

	.card_bg1 {
		width: 260px;
	}

	.card_bg1 img {
		width: 240px;
	}

	.card_bg1 a {
		display: block;
		text-align: center;
		border-radius: 5px;
		padding: 10px;
		transition: all 0.3s ease;

	}

	.card_bg1 a:hover {
		background-color: var(--main-color);
		/*統一參數*/
		padding: 10px;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.card_bghover {
		background-color: var(--main-color);
		/*統一參數*/
		border-radius: 5px;
		color: #fff;
	}

	.card_bg1.card_bghover p {
		color: #fff;
	}

	.card_bg1 p {
		color: #666;
		padding: 5px 0;
		font-size: 15px;
		letter-spacing: 1px;

	}

	.card_bg1 p.crad_pp2 {
		color: #fff;

	}

	.card_bg1 a:hover p {
		color: #fff;

	}

	.swiper-container {
		width: 100%;
		padding: 0 20px;

	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;


		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.tabbuttom {
		background-color: #315CB3;
		color: #fff;
		padding: 2px 5px;
		border-radius: 5px;
	}

	.crad_pp2 {
		color: #fff;
	}

}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.top_logo {
		width: 100%;
		background-color: #FFF;
	}

	.logo {
		width: 100%;
		margin: 0 auto;
		padding: 5px 0;
	}

	.logo img {
		/* width: auto; */
		/* padding: 5px 0; */

	}

	.logo div {
		display: inline-block;
		vertical-align: top;
	}

	.logo_tit1 {
		/* width: 190px; */
		margin: 0 0 0 10px;

	}

	.logo_tit2 {
		width: 200px;
		font-size: 17px;
		vertical-align: center;
		margin: 0;
		padding: 20px 0 0 0;

	}

	.point_text {
		width: 90%;
		padding: 15px 0;
		border-top: solid 1px #D00205;
		border-bottom: solid 1px #D00205;
		margin: 0 auto;
		color: #666;
		line-height: 25px;
		letter-spacing: 2px;
		font-size: 14px;
	}

	.index_h1 {
		color: #D00205;
		letter-spacing: 1px;
		font-weight: normal;
	}

	.card_silder {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding: 30px 0;


	}

	.card_bg1 {
		width: 260px;
	}

	.card_bg1 img {
		width: 240px;
	}

	.card_bg1 a {
		display: block;
		text-align: center;
		border-radius: 5px;
		padding: 10px;
		transition: all 0.3s ease;

	}

	.card_bg1 a:hover {
		background-color: var(--main-color);
		/*統一參數*/
		padding: 10px;
		transition: all 0.3s ease;
	}

	.card_bghover {
		background-color: var(--main-color);
		/*統一參數*/
		border-radius: 5px;
	}

	.card_bg1.card_bghover p {
		color: #fff;
	}

	.card_bg1 p {
		color: #666;
		padding: 5px 0;
		font-size: 15px;
		letter-spacing: 1px;

	}

	.card_bg1 a:hover p {
		color: #fff;

	}

	.swiper-container {
		width: 100%;

	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.tabbuttom {
		background-color: #315CB3;
		color: #fff;
		padding: 2px 5px;
		border-radius: 5px;
	}

	.card_bg1 p.crad_pp2 {
		color: #fff;

	}
}

@media screen and (max-width: 767px) {
	.top_logo {
		width: 100%;
		background-color: #FFF;
	}

	.logo {
		width: 100%;
		margin: 0 auto;
		padding: 5px 0;

	}

	.logo img {
		/* width: 140px;		
		padding: 5px 0; */
		height: 40px;
	}

	.dragonpass_logo {
		height: 30px !important;
		margin: 0 .7rem;
	}

	.logo div {
		display: inline-block;
		vertical-align: top;
	}

	.logo_tit1 {
		width: 140px;
		margin: 0 0 0 5px;

	}

	.logo_tit2 {
		width: 200px;
		font-size: 15px;
		vertical-align: center;
		margin: 0;
		padding: 15px 0 0 0;
		display: none !important;

	}

	.point_text {
		width: 90%;
		padding: 15px 0;
		border-top: solid 1px #D00205;
		border-bottom: solid 1px #D00205;
		margin: 0 auto;
		color: #666;
		line-height: 25px;
		letter-spacing: 1px;
		font-size: 14px;
	}

	.index_h1 {
		color: #D00205;
		letter-spacing: 1px;
		font-weight: normal;
	}

	.card_silder {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding: 30px 0;


	}

	.card_bg1 {
		width: 260px;
	}

	.card_bg1 img {
		width: 240px;
	}

	.card_bg1 a {
		display: block;
		text-align: center;
		border-radius: 5px;
		padding: 10px;
		transition: all 0.3s ease;

	}

	.card_bg1 a:hover {
		background-color: var(--main-color);
		/*統一參數*/
		padding: 10px;
		transition: all 0.3s ease;
	}

	.card_bghover {
		background-color: var(--main-color);
		/*統一參數*/
		border-radius: 5px;
	}

	.card_bg1.card_bghover p {
		color: #fff;
	}

	.card_bg1 p {
		color: #666;
		padding: 5px 0;
		font-size: 15px;
		letter-spacing: 1px;

	}

	.card_bg1 a:hover p {
		color: #fff;

	}

	.swiper-container {
		width: 100%;

	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;

		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.tabbuttom {
		background-color: #315CB3;
		color: #fff;
		padding: 2px 5px;
		border-radius: 5px;
	}

	.card_bg1 p.crad_pp2 {
		color: #fff;

	}

	.flextitle_a1 {
		position: absolute;
		color: #fff;
		width: 100%;
		padding: 0 0 0 40px;
		bottom: 20px;
	}

	.flextitle_ulall {
		width: 60vw;
		padding: 10px;
		border-radius: 5px;
		background-color: rgba(0, 0, 0, 0);
	}

	.flextitle_a1_t1 {
		font-size: 4.5vw;
		text-shadow: 2px 2px #333;
		margin: 0;
	}

	.flextitle_a1_t2 {
		display: none;
	}

	.tab_service {
		text-align: left !important;
	}

	.tab_service .item {
		border: none;
		padding: 5px 0;
		display: block;
	}

	.tab_service .item ul {
		padding: 5px 0 5px 26px;
	}
}