@charset "utf-8";
@import "https://fonts.googleapis.com/css?family=Short+Stack:400|Open+Sans:700|Gentium+Book Basic:700|PT+Serif:400|Volkhov:700|Source+Sans Pro:300|Source+Sans Pro:400|Varela+Round:400";
/* CSS Document */
*{padding:0;margin:0; }
body{font-family: arial,'Noto Sans TC', Microsoft JhengHei,Apple LiGothic;font-weight: 300;-webkit-overflow-scrolling: touch;background: url(../images/bg.jpg) fixed;}
:root{
	--purple:#0B88B1;
	--side1:#FCDCD3;
	--side2:#D4F4F2;
	--side3:#f7f2e6;
}
.wrap {
	font-family: light_4;
	font-size: 12pt;
	color: #333;
}

.btn-outline-light{
	color: var(--purple);
	border-color: var(--purple);
}
.btn-outline-light:hover{
	background: var(--purple);
	color: #fff;
}
.btn-outline-light.disabled, .btn-outline-light:disabled{
	color: var(--purple);
}
/*header*/
header h1{
	text-align: center;
	margin-top: -70px;
	color:var(--purple);
	position: relative;
	z-index: 0;
}
.stroke {position: relative;  z-index: 10; text-align: center; display: inline-block;}
.stroke:before {position: absolute;color:transparent; z-index: -1; -webkit-text-stroke: 6px #fff; content: attr(data-stroke);}
header p {
	font-size: 1.3em;
	font-family: jf-jinxuanlatte;
	font-weight: 500;
	text-align: center;
}
header ul {
	text-align: center;
}
header li {
	display: inline-block;
	margin: 5px 3px;
}
/*section*/
section{overflow: hidden;}
/* article {
	margin-bottom: 40px;
} */
/* article > div {
	border-radius: 20px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 30px 30px 15px;
	margin-top: 15px;
} */

.wrap article > div {
	border-radius: 20px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 30px 30px 15px;
	margin-top: 15px;
}
.number {
	position: absolute;
	top:-35px;
	font-size: 3em;
	font-family: jf-jinxuanlatte;
	font-weight: 700;
	font-style: italic;
	text-shadow: 2px 2px 0 #fff;
	color: var(--purple);
}
.art1 > div,.art4 > div,.art7 > div {
	background: var(--side1);
}
.art2 > div,.art5 > div,.art8 > div {
	background: var(--side2);
}
.art3 > div,.art6 > div {
	background: var(--side3);
}
article h2{
	font-family: jf-jinxuanlatte;
	font-weight: 500;
	border-bottom: 1px solid #fff;
	padding-bottom: 5px;
	margin-bottom: 15px;
	text-shadow: 2px 2px 0 #fff;
	text-align: center;
}
article h2 small{
	font-size: 0.65em;
	color:var(--purple);
	text-shadow: none;
	display: inline-block;
}
/*art1*/
.art1 table{
	min-width:520px;
}

.art1 h2 span{
	font-size: 18px;
	color:var(--purple);
	text-shadow: none;
	display: inline-block;
}
.table-odd{
	background:rgba(0,0,0,.05);
}


/* art3 */
.art3 .card {
    border-radius: 10px;
    border: 0;
    padding: 15px 10px 10px 10px;
}

.art3 table td{
    line-height:25px;
	padding:10px 20px;
}


/*art6*/
.table_purple th{
	background: var(--purple);
	color: #fff;
}

/* .float_link{position: fixed;top:120px; right: 1px;z-index: 5;font-size: 10pt;}
.float_link a{ width: 3em;padding:5px 10px 5px 10px;display: block;text-align: center;line-height: 1.1;border-radius: 5px 0 0 5px;color: #333;}
.float_link a:hover{color: #fff;} */

/* .phone_off{ display:none;}
.phone_on{} */
.modin{ position: relative; visibility: hidden; top:-80px;display: block;height: 1px; width: 1px;}
/*左上角漢堡排*/
/* .menu_top{position: fixed;top:0px;left: 5px;z-index: 10000;}
.slide_toggle{padding: 5px;color: #999;cursor: pointer;display: inline-block;transition-duration: 0.3s;}
.slide_toggle:hover{color: #666;transition-duration: 0.3s;}
.slide_list{background: #fff;box-shadow:0 2px 5px #777;display: none;}
.slide_list a{display: block;text-align: center;padding:10px 15px;border-bottom: 1px solid #ccc;transition-duration: 0.3s;color: #666;}
.slide_list a:hover{transition-duration: 0.3s; color: #ff6600}
.slide_list li:last-child a{border-bottom: none;}
.menu_top:hover .slide_list{display: block;transition-duration: 0.3s;} */

@media (min-width: 576px){ /*sm*/

}
@media (min-width: 768px) {/*md*/
	header h1{margin-top: -50px;}
	/*art2*/
	.art2{margin-top: 60px;}
	/*art3*/
	.art3{margin-top: -80px;}
	/*art4*/
	.art4{margin-top: 50px;}
	/*art5*/
	.art5{margin-top: 20px;}
	/*art6*/
	.art6{margin-top: 60px;}
	/*art7*/
	.art7{margin-top: -200px;}
	/*art8*/
	.art8{margin-top: 80px;}

	.float_link{font-size: 12pt;}

	.menu_top{top:10px;left: 10px;}
	.phone_off{display: block;}
	.phone_on{ display:none;}
	.modin{ position: relative; visibility: hidden; top:-100px;}
}



@media (min-width: 992px) { /*lg*/
	.wrap{font-size: 14pt;}
	header {margin-top: 40px;}
	header h1{margin-top: 10px;}
	header p{font-size: 1.05em;}
	header li{width: 30%;}
	header li a.btn{display: block;}
	.number {top:-45px}
	.art1{position: relative;right: -20px;}
	.art2{margin-top: 100px;}
	.art3{margin-top: 25px;}
	.art4{margin-top: 120px;}
	.art6{margin-top: 0px;}
	.art7{margin-top: 40px;}
	.art8{position: relative;right: -40px;margin-top: 140px;}
	.menu_top{display: none;}
}

@media (min-width: 1200px){ /*xl*/
	header h1{font-size: 5rem !important;}
	.art1{position: relative;right: 0;}
	.art2{margin-top: 100px;}
	.art3{margin-top: 0px;position: relative;right:0;}
	.art4{margin-top: 80px;position: relative;left: -40px;}
	/* .art5{position: relative;top:40px;} */
	.art6{margin-top: 100px;position: relative;left: 40px;}
	.art7{margin-top: 0px;position: relative;left: 150px;}
	.art8{margin-top: 60px; position: relative;left: 100px;}
	.art1 h2 span{font-size: 21px;}
	article h2{	font-size: 40px;
}
}