@charset "utf-8";
	/*--CSS Document --*/
	/*--google字型 --*/
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;700;900&display=swap);
@font-face {
    /*--處理中文難字問題 --*/
    font-family: 'tcav';
    src: url('fonts/mingliu.ttf') format('truetype');}

  *{font-family: 'Noto Serif TC', serif;
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: 0.8s;
	color: #404040;
	outline: none;
	letter-spacing: 1px;}

/*-- 隱藏input數字預設輸入上下箭頭調整功能 --*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;}

img{border: 0;}

a:link, a:checked, a:visited{
	color:#0c77fb;
	text-decoration: none;}

/*-- 預載Loading --*/
.loader{
	position: fixed;
	display: inline-block;
	height: 100vh;
	width: 100%;
	background: rgba(255, 255, 255, 0.8) url(../images/loading.svg) center no-repeat;
	background-size: 25%;
	z-index: 2;
	top: 0;
	left: 0;}

/*-- header --*/
header{
	width: 100%;
	height: 70px;
	background: rgba(255, 255, 255, 0.8);
	position: sticky;
    top: 0;
	z-index: 999;}

.header-wrap{
	display: flex;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	max-width: 1200px;}

.logo-wrap{
	display: inline-block;
	position: relative;
	width: 100%;
	text-align: left;
	height: 65px;
	line-height: 4px;
	z-index: 1;
	color: #fff;
	font-size: 22px;
	margin: 20px;}




.logo-wrap img{
	height: 100%;
	vertical-align: middle}



.logo-text::before {
		content: '澳門單身女性保險攻略';
		position: relative;
        top: 5px;
        width: 100%;
    	height: 70px;
		color: #000;
		font-size:30px;
		line-height: 35px;
		font-weight: 600;
		}
/*-- 選單 --*/
.navi-warp{
	position: relative;
    width: 100%;
    display: flex;
    justify-content: right;
    margin: 0 auto;}

.navi-warp ul{
	display: flex;
	justify-content: center;
	padding: 10px;}

.navi-warp ul li{
	list-style: none;
	display: inline-block;
	padding: 5px 15px;
	margin: 0 2px;
	color: #333;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 2px;
	cursor: pointer;}

.navi-warp ul li:active,
.navi-warp ul li:hover{
	background: rgba(255, 223, 222, 0.8);}

.navi-warp ul li:nth-of-type(5) {
	border: 1px solid #ef3838;
    color: #ff615a;}
	
.navi-warp ul li .breakspace{display: none;}

/*-- 主內容區 --*/
.container{
	display: block;
	width: 100%;
	margin: 0 auto;
	background: url(../images/deco-bgwhite2.png) top left repeat;
	background-size: auto;
	overflow: hidden;}

/*-- 主視覺 --*/
.s1-wrap{
	display: inline-block;
	width: 100%;
	height: 100vh;
	padding: 70px 20px 20px;
	overflow: hidden;}

.s1-wrap .theme-bg{
	position: absolute;
	display: inline-block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #fff;}

.s1-wrap .theme-bg:nth-of-type(4){
	animation:  themebg1-ani 15s ease infinite;}
	/* themebg1-ani 動畫*/
	@keyframes themebg1-ani{
		0%{transform:translateX(0%);}
		20%{transform:translateX(0%);}
		40%{transform:translateX(-100%);}
		60%{transform:translateX(-100%);}
		80%{transform:translateX(-100%);}
		80.001%{transform:translateX(100%);}
		100%{transform:translateX( 0%);}
	}

.s1-wrap .theme-bg:nth-of-type(3){
	animation:  themebg2-ani 15s ease infinite;}
	/* themebg2-ani 動畫*/
	@keyframes themebg2-ani{
		0%{transform:translateX(0%);}
		20%{transform:translateX(0%);}
		40%{transform:translateX(0%);}
		60%{transform:translateX(-100%);}
		80%{transform:translateX(-100%);}
		100%{transform:translateX(-100%);}
	}
.s1-wrap .theme-bg:nth-of-type(2){
	animation:  themebg3-ani 15s ease infinite;}
	/* themebg3-ani 動畫*/
	@keyframes themebg3-ani{
		0%{transform:translateX(0%);}
		20%{transform:translateX(0%);}
		40%{transform:translateX(0%);}
		60%{transform:translateX(0%);}
		80%{transform:translateX(-100%);}
		100%{transform:translateX(-100%);}
	}

.s1-wrap .theme-bg:nth-of-type(1){
	animation:  themebg4-ani 15s ease infinite;}
	/* themebg4-ani 動畫*/
	@keyframes themebg4-ani{
		0%{transform:translateX(0%);}
		20%{transform:translateX(0%);}
		40%{transform:translateX(0%);}
		60%{transform:translateX(0%);}
		80%{transform:translateX(0%);}
		100%{transform:translateX(-100%);}
	}

.s1-wrap .theme-bg > div{
	width: 100%;
	height: 100%;}

.s1-wrap .theme-bg:nth-of-type(4) > div{
	background: url(../images/wj-banner-9.jpg) center right no-repeat;
	background-size: cover;
	animation: themebgImg-ani 10s ease infinite;}
	/* themebgImg-ani */
	@keyframes themebgImg-ani{
		0%{transform: scale(1);}
		50%{transform: scale(1.05);}
		100%{transform: scale(1);}
	}

.s1-wrap .theme-bg:nth-of-type(3) > div{
	background: url(../images/wj-banner-13.jpg) center right no-repeat;
	background-size: cover;
	animation: themebgImg-ani 10s ease infinite;}
	/* themebgImg-ani */
	@keyframes themebgImg-ani{
		0%{transform: scale(1);}
		50%{transform: scale(1.05);}
		100%{transform: scale(1);}
	}

.s1-wrap .theme-bg:nth-of-type(2) > div{
	background: url(../images/wj-banner-7.png) bottom center no-repeat;
	background-size: cover;

	animation: themebgImg-ani 10s ease infinite;}
	/* themebgImg-ani */
	@keyframes themebgImg-ani{
		0%{transform: scale(1);}
		50%{transform: scale(1.05);}
		100%{transform: scale(1);}
	}

.s1-wrap .theme-bg:nth-of-type(1) > div{
	background: url(../images/wj-banner-8.jpg) top center no-repeat;
	background-size: cover;
	animation: themebgImg-ani 10s ease infinite;}
	/* themebgImg-ani */
	@keyframes themebgImg-ani{
		0%{transform: scale(1);}
		50%{transform: scale(1.05);}
		100%{transform: scale(1);}
	}


/* 主題標*/
.s1-wrap .theme-title{
	position: absolute;
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 10px;
	padding-right: 30%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);}

.s1-wrap .theme-title > div{width: 480px;}

.s1-wrap .theme-title > div > span:nth-of-type(1){
	display: inline-block;
    font-style: italic;
    font-size: 30px;
    /*margin: 20px 50px;*/
    font-weight: 300;
    letter-spacing: 2px;}

.s1-wrap .theme-title > div > h1{
	display: inline-block;
    font-size: 40px;
    letter-spacing: 2px;
    padding: 15px;
    margin: 25px 0;}

.s1-wrap .theme-title > div > h1 > span{
	position: absolute;
	display: inline-block;
	left: 50%;
	top: -60px;
	transform: translateX(-50%);}

.s1-wrap .theme-title > div > h1 > span::before{
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 40px;
	letter-spacing: normal;}

.s1-wrap .theme-title > div > h1::before{
	content: '';
    position: absolute;
    display: inline-block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: #333;}

.s1-wrap .theme-title > div > h1::after{
	content: '';
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background: #333;}

.s1-wrap .theme-title > div > span:nth-of-type(1)::before{
	content: '/';
	position: absolute;
	left: -30px;
	top: -10px;}

.s1-wrap .theme-title > div > h3{
	display: inline-block;
	letter-spacing: 2px;
	font-size: 35px;}

.s1-wrap .theme-title > div > h3:nth-of-type(1){
	margin-right: 60px;}

.s1-wrap .theme-title > div > h3:nth-of-type(1)::after{
	content: '/';
    font-size: 30px;
    font-style: italic;
    position: absolute;
    font-weight: 100;
    right: -30px;
    top: 10px;}

.s1-wrap .theme-title > div > h3:nth-of-type(2){
	margin-left: 60px;
	color: #f6adb9;}


/*-- 標題共同樣式 --*/
.stitle{
	position: absolute;
	display: inline-block;
	font-size: 28px;
	padding: 0 30px;
	line-height: 70px;
	top: 0;
	left: 0;
    z-index:0;
}

.stitle::before{
    content: '';
    position: absolute;
    display: inline-block;
    background: url(../images/stitle-bg-1.png) top right 30px no-repeat;
    background-size: auto;
    width: 100%;
    left: 0;
    height: 70px;
    z-index: -1;}

.stitle::after{
	content: '/';
    font-size: 30px;
	font-style: italic;
    position: absolute;
    font-weight: 100;
    right: 0px;
    top: 15px;}

.s-wrap{
	display: inline-block;
	width: 100%;
	padding: 40px;}

.s-main{
	display: inline-block;
	width: 100%;
	max-width: 1200px;
	padding: 70px 20px 20px;}

.s-content{
	width: 100%;
	padding: 20px 0;}

/*-- 裝飾英文 --*/
.deco-eng{
	position: absolute;
	display: inline-block;
	left: 30px;
	top: 80px;}


/*-------------------*/
/*-- s1 女主角宣言 --*/
/*------------------*/
#s1.s-content > div > div{
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	flex-direction: row;
	flex-wrap: wrap;}

#s1.s-content > h2{
	font-size: 25px;
	margin: 50px 0;}

#s1.s-content > h2 > span{
	display: block;}

#s1.s-content > div > div > div{
	display: inline-block;
	width: 360px;
	min-height: 455px;
	padding: 50px 20px;
	background: #fff;
	margin: 20px 5px;
	border: 1px #ffdfde solid;
	box-shadow: 0px 15px 15px -10px rgba(00, 00, 00, 0.3);
	-ms-box-shadow: 0px 15px 15px -10px rgba(00, 00, 00, 0.3);
	overflow: hidden;
	cursor: pointer;}


/*-- 女主角卡片--*/
.deco-s{
	position: absolute;
	display: inline-block;
	top: -5px;
	left: 20px;
	width: 8px;
	height: 36px;
	background: #ffdfde;
	transform: rotate(15deg);}

#woman2 > .deco-s{background: #ffebe4;}
#woman3 > .deco-s{background: #ffe2d8;}

.s1-tag{
	margin: 20px 0;
	color: #737373;
	font-size: 18px;}

.s1-words{
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 145px;
	left: 0;
	bottom: 0;
	padding: 50px 10px 20px;
	background: #ffdfde;}

#woman2 > .s1-words{background: #ffebe4;}
#woman3 > .s1-words{background: #ffe2d8;}

.s1-words p{
	font-weight: 600;
	font-size: 20px;}

.s1-pic{
	position: absolute;
	display: inline-block;
	width: 250px;
	height: 250px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url(../images/awaken/1/story-1.png) center no-repeat;
	background-size: contain;
	pointer-events: none;}

#woman2 > .s1-pic{
	background: url(../images/awaken/2/story-2.png) center no-repeat;
	background-size: contain;}

#woman3 > .s1-pic{
	background: url(../images/awaken/3/story-3.png) center no-repeat;
	background-size: contain;}


.btn-s1Arrow{
	position: absolute;
    display: inline-block;
    width: 40px;
    height: 40px;
    top: 5%;
    right: 5%;
    background: #ffdfde;
    border-radius: 50%;}

.btn-s1Arrow::before{
	content: '>';
	font-size: 28px;
	color: #fff;
	line-height: 38px;
	font-weight: 800;}

#woman2 .btn-s1Arrow{background: #ffebe4;}
#woman3 .btn-s1Arrow{background: #ffe2d8;}


/*-- 開起蓋版btn --*/
.btn-open{
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;}

/*-- 內容蓋版 --*/
.s1-declaration{
	position: absolute;
	display: inline-block;
	padding: 10px 20px;
	width: 100%;
	height: 100%;
	letter-spacing: 1px;
	top: 0;
	left: 0;
	background: rgba(64, 64, 64, 0.8);
	transform: translateX(100%);}

.s1-declaration div:nth-of-type(1){
	padding-bottom: 45px;}

.s1-declaration div:nth-of-type(1) h4{
	text-align: left;
	font-size: 20px;
	color: #ffdfde;
	margin: 10px 0;}

.s1-declaration div:nth-of-type(1) p{
	text-align: left;
	font-size: 16px;
	line-height: 24px;
	color: #fff;
	margin: 5px 0;
	min-height: 100px;}

.s1-declaration div:nth-of-type(1) a{
	display: inline-block;
    position: absolute;
    text-align: right;
    font-size: 15px;
    line-height: 28px;
    color: #c1c0ae;
    right: 0;
    bottom: 5px;
    border: 1px #c1c0ae solid;
    padding: 0px 7px;}

.s1-declaration div:nth-of-type(2){
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 10px 20px;
	padding-bottom: 60px;
	background: #ffdfde;}

.s1-declaration div:nth-of-type(2) h4{
	text-align: left;
	font-size: 20px;
	color: #c86661;
	margin: 5px 0;}

.s1-declaration div:nth-of-type(2) p{
	text-align: left;
	font-size: 16px;
	line-height: 24px;
	color: #404040;
	margin: 10px 0;
	min-height: 100px;}

.s1-declaration div:nth-of-type(2) a{
	display: inline-block;
    position: absolute;
    text-align: right;
    font-size: 15px;
    line-height: 28px;
    color: #c86661;
    right: 20px;
    bottom: 10px;
    border: 1px #c86661 solid;
    padding: 0px 7px;}

/* 關閉鈕提示*/

.s1-closeX{
	position: absolute;
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url(../images/btn-closeX.png) center no-repeat;
	background-size: contain;
	top: 10px;
	right: 10px;
	z-index: 1;
	cursor: pointer;}


/* 女主角宣言卡片控制 */
#woman1{animation-delay: 0s;}
#woman2{animation-delay: 0.2s;}
#woman3{animation-delay: 0.4s;}

.s1-declaration.show{
	transition: 1.2s;
	transform: translateX(0);}

/* 提示箭頭 */
.deco-arrows{
	display: none;
	width: 100%;}

.deco-arrows > span{
	display: inline-block;
    position: absolute;
    top: -20px;
	left: 50%;
    transform: translateX(-50%);
	animation: arrows-ani 2s ease infinite;}
	/*-- arrows-ani --*/
	@keyframes arrows-ani{
		0%{transform: translateX(0px);
			opacity:0;}
		100%{transform: translateX(20px);
			opacity:1;}
	}

.deco-arrows > span > span{
	position: absolute;
	display: inline-block;
	left: 40px;
	width: 4px;
	height: 20px;
	background: #f6c3cb;}

.deco-arrows > span > span:nth-of-type(1){
	top: -11px;
	transform: rotate(135deg);}

.deco-arrows > span > span:nth-of-type(2){
	transform: rotate(45deg);}

.deco-arrows::before{
	content: '滑動看更多';
	position: absolute;
	color: #ec9797;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;}

/*------------------------*/
/*-- s2 認識財富流 --*/
/*------------------------*/
#s2.s-content{
	padding: 0px 20px 0px;}

.tips-wrap{
	padding-top: 50px;
	overflow: hidden;}


.tips{
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;}

.tips > div:nth-of-type(1){
	vertical-align: middle;
	display: inline-block;
	padding: 0px 30px 30px;
	margin: 40px 0;
	max-width: 50%;
	height: 300px;}

.tips > div:nth-of-type(2){
	vertical-align: middle;
	display: inline-block;
	margin: 0px 0;
	max-width: 40%;}

.tips > div:nth-of-type(2) > img{
	width: 100%;}

.tips-tag{
	display: inline-block;
	position: absolute;
	padding-left: 70px;
	left: 0;
	top: 0;
	font-style: italic;
	font-weight: 500;
	font-size: 56px;
    color: #fdd7ca;}

.tips-tag span{
	position: absolute;
	left: 0;
	top: 0;
	font-style:initial;
	font-size: 20px;
	padding: 5px 10px;
	background: #ffebe4;}

.tips-tag span::after{
	content: '';
	position: absolute;
	display: inline-block;
	top: 0;
	right: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 39px 15px 0 0;
	border-color: #ffebe4 transparent transparent transparent;}

.tips-h2{
	color: #E85B2D;
	font-weight: 600;
	font-size: 28px;
	text-align: left;
	margin: 10px 0;}

.tips-p{

	text-align: left;
	font-size: 20px;
	font-weight: 100;
	line-height: 36px;
	margin: 20px 0 0;}

.tips-p > span{

	font-size: 20px;
	font-weight: 600;
}
/*------------------------*/
/*-- 首頁介紹組件 --*/
/*------------------------*/
.intro-wrap{
	padding-top: 0px;
	overflow: hidden;}


.intro {
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;}



.intro > div:nth-of-type(1){
	vertical-align: middle;
	display: inline-block;
	padding: 5px 30px 30px;
	margin: 40px 0;
	max-width: 50%;
	height: 500px;}

.intro > div:nth-of-type(2){
	vertical-align: middle;
	display: inline-block;
	margin: 40px 0;
	max-width: 40%;}

.intro > div:nth-of-type(2) > img{
	max-height: 100%;
	display: block;
	max-width: 100%;}

.intro-tag{
	display: inline-block;
	position: absolute;
	padding-left: 70px;
	left: 0;
	top: 0;
	font-style: italic;
	font-weight: 500;
	font-size: 56px;
	color: #fdd7ca;}

.intro-tag span{
	position: absolute;
	left: 0;
	top: 0;
	font-style:initial;
	font-size: 20px;
	padding: 5px 10px;
	background: #ffebe4;}

.intro-tag span::after{
	content: '';
	position: absolute;
	display: inline-block;
	top: 0;
	right: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 39px 15px 0 0;
	border-color: #ffebe4 transparent transparent transparent;}

.intro-h2{
	font-size: 28px;
	text-align: left;
	margin: 10px 0;}

.intro-h3{
	font-size: 18px;
	text-align: left;
	margin: 10px 0;
	color: #808080;}

.intro-p{
	text-align: left;
	font-size: 20px;
	font-weight: 100;
	line-height: 36px;
	margin: 20px 0 0;}

.intro-p > span{
	display: block;
	text-align: right;
	padding: 0 10px;
	font-size: 16px;}

/*------------------------*/
/*-- 選對顧問無煩惱 --*/
/*------------------------*/
.consultant-wrap{
	padding-top: 0px;
	overflow: hidden;}


.consultant{
	display: flex;
	width: 100%;
	margin: 0 auto;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;}



.consultant > div:nth-of-type(1){
	vertical-align: middle;
	display: inline-block;
	padding: 5px 30px 30px;
	margin: 40px 0;
	max-width: 50%;
	height: 300px;}

.consultant > div:nth-of-type(2){
	vertical-align: middle;
	display: inline-block;
	margin: 40px 0;
	max-width: 40%;}

.consultant > div:nth-of-type(2) > img{
	width: 100%;}

.consultant-tag{
	display: inline-block;
	position: absolute;
	padding-left: 70px;
	left: 0;
	top: 0;
	font-style: italic;
	font-weight: 500;
	font-size: 56px;
    color: #fdd7ca;}

.consultant-tag span{
	position: absolute;
	left: 0;
	top: 0;
	font-style:initial;
	font-size: 20px;
	padding: 5px 10px;
	background: #ffebe4;}

.consultant-tag span::after{
	content: '';
	position: absolute;
	display: inline-block;
	top: 0;
	right: -15px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 39px 15px 0 0;
	border-color: #ffebe4 transparent transparent transparent;}

.consultant-h2{
	font-size: 28px;
	text-align: left;
	margin: 10px 0;}

.consultant-h3{
	font-size: 18px;
	text-align: left;
	margin: 10px 0;
	color: #808080;}

.consultant-p{
	text-align: left;
	font-size: 20px;
	font-weight: 100;
	line-height: 36px;
	margin: 20px 0 0;}

.consultant-p > span{
	display: block;
	text-align: right;
	padding: 0 10px;
	font-size: 16px;}

/*------------------------*/
/*-- s3 女主角の保險建議 --*/
/*------------------------*/

#s3.s-content { padding: 20px 0 0;}
#s3.s-content > div{
	display: flex;
	padding: 80px 0 0;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;}

#s3.s-content > div > div > span{
	display: inline-block;
	background: #fff;
	width: auto;
	height: auto;
	margin: 20px 0 40px;}

#s3.s-content > div > div{
	background: #f3f3f3;
	text-align: center;
	border-radius: 20px;
	padding: 30px 10px;
	margin: 5px auto 5px;}

#s3.s-content > div > div:nth-of-type(2){
	background: #ffeded;}

#s3.s-content > div > div::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 10px;
	height: 30px;
	top: -5px;
	left: 20px;
	background: #f6c3cb;}

#s3.s-content > div > div > div > img{
	width: 100%;
	max-width: 507px;}

#s3.s-content > div > div:hover{transform: translateY(-10px);}

#s3.s-content > div > div.s3-table > div:nth-of-type(2){display: none;}
#s3.s-content > div > div.s3-table > div > img{max-width: 820px;}
#s3.s-content > div > span.note {
	width: 100%;
    text-align: left;
    max-width: 820px;
	padding: 5px 10px;
    margin: 0 auto;}


/*------------------*/
/*-- s4 預約抽好禮 --*/
/*------------------*/
#s4.s-content{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;}

.s4-bg{
	position: absolute;
	display: inline-block;
	width: 200%;
	height: 90%;
	background: #f3f3f3;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;}

#s4.s-content > div{
	width: 50%;
	min-width: 500px;
	max-width: 600px;}

.deco-eng.eng4{
	left: initial;
	top: 100px;
	left: 60%;
    transform: translateX(-50%);}

.deco-band{
	position: absolute;
	display: inline-block;
	width: 64px;
	height: 173px;
	top: 25px;
    right: -30px;
	background:url(../images/deco-band.png) top center no-repeat;
	background-size: contain;}

#s4 .note{
	text-align: center;
	width: 100%;
	font-size: 18px;
    font-weight: 600;}

/*----------------*/
/*-- s5 諮詢流程 --*/
/*----------------*/
#s5.s-content{padding: 80px 0 0;}
#s5.s-content > div{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;}

#s5.s-content > div > div{
	display: inline-block;
	margin: 10px 40px 15px;}

#s5.s-content > div > div > span{
	display: inline-block;
	width: auto;
	height: auto;}

#s5.s-content > div > div > span::after{
	content: '';
	position: absolute;
	display: inline-block;
	width: 13px;
	height: 17px;
	background: url(../images/decr-s5arrow.png) center no-repeat;
	background-size: contain;
	top: 50%;
	right: -50px;
	transform: translateX(-50%);
	z-index: 1;}

#s5.s-content > div > div:nth-of-type(4) > span::after{display: none;}
#s5.s-content > div > div:nth-of-type(1){animation-delay: 0.2s;}
#s5.s-content > div > div:nth-of-type(2){animation-delay: 0.3s;}
#s5.s-content > div > div:nth-of-type(3){animation-delay: 0.4s;}
#s5.s-content > div > div:nth-of-type(4){animation-delay: 0.5s;}

#s5.s-content > div > div > h3{
	font-size: 22px;
	padding: 10px 0 20px;}

#s5.s-content > div > div > p{
	font-size: 16px;
	padding: 5px 0;
	line-height: 24px;
	letter-spacing: 1px;}


/*----------------*/
/*-- s6 客戶評價 --*/
/*----------------*/
#s6.s-content{padding: 0px 20px 20px;}

.reviews-warp{
	display: inline-block;
	justify-content: center;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
} 

.reviewCard{
	transition: none; 
	display: inline-block;
	width: 100%;
	width: 320px;
	height: 380px;
	padding: 30px 30px 80px;
	margin: 20px 10px;
	border:1px #d2d2d2 solid}

.reviewCard > p{
	font-size: 17px;
	text-align: justify;
	margin-bottom: 20px;
	line-height: 24px;}

.reviewCard > p > span{
	font-weight: 900;}

.reviewCard > span:nth-of-type(1){
	position: absolute;
	display: inline-block;
	left: 30px;
	bottom: -5px;
	width: 85px;
	height: 85px;
	background: url(../images/s6-client1.png) center no-repeat;
	background-size: contain;}

	/* 評價客戶小圖 */
.reviewCard > span:nth-of-type(1).client1{
		background: url(../images/witness/w1-user.jpg) center no-repeat;
		background-size: contain;}
.reviewCard > span:nth-of-type(1).client2{
		background: url(../images/witness/w2-user.jpg) center no-repeat;
		background-size: contain;}
.reviewCard > span:nth-of-type(1).client3{
		background: url(../images/witness/w3-user.jpg) center no-repeat;
		background-size: contain;}
.reviewCard > span:nth-of-type(1).client4{
	background: url(../images/witness/w4-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client5{
	background: url(../images/witness/w5-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client6{
	background: url(../images/witness/w6-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client7{
	background: url(../images/witness/w7-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client8{
	background: url(../images/witness/w8-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client9{
	background: url(../images/witness/w9-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client10{
	background: url(../images/witness/w10-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client11{
	background: url(../images/witness/w11-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client12{
	background: url(../images/witness/w12-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client13{
	background: url(../images/witness/w13-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client14{
	background: url(../images/witness/w14-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client15{
	background: url(../images/witness/w15-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client16{
	background: url(../images/witness/w16-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client17{
	background: url(../images/witness/w17-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client18{
	background: url(../images/witness/w18-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client20{
	background: url(../images/witness/w20-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client21{
	background: url(../images/witness/w21-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(1).client23{
	background: url(../images/witness/w23-user.jpg) center no-repeat;
	background-size: contain;}
.reviewCard > span:nth-of-type(2){
	position: absolute;
	display: inline-block;
	font-size: 16px;
	height: 30px;
	right: 0;
	bottom: 20px;	
	line-height: 30px;
	padding: 2px 15px 2px 10px;
	background: #ffdfde;}

.reviewCard > span:nth-of-type(2)::before{
		content: '';
		position: absolute;
		display: inline-block;
		top: 0;
		left: -15px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 30px 15px;
		border-color: transparent transparent #ffdfde transparent;}


/*----------------*/
/*-- s7 我要預約 --*/
/*----------------*/
#s7.s-content{
	width: 100%;
	max-width: initial;
	padding: 80px 20px 20px;}

#s7.s-content > div{
	width: 100%;
	padding: 20px;}

.reservation-bg{
	position: absolute;
	display: inline-block;
	width: 200%;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	background:#fff0ef;}

.subNote{
	padding: 30px 0;
    font-size: 20px;}


/*-- 表單樣式 --*/
/* input、select樣式*/
.from-wrap input[type="text"],
.from-wrap input[type="number"],
.from-wrap select{
	text-align: left;
	background: transparent;
	color: #fb9191;
	width: 100%;
	border: 0;
	padding: 5px 30px;
	font-size: 28px;
	line-height: 50px;
	outline:none;
	appearance: none;
	-ms-appearance: none;
	-webkit-appearance:none;
	cursor: pointer;}

.from-wrap input{}
.from-wrap select option{
	text-align: center;
	color: #fb9191;
	font-size: 28px;
	padding: 5px 0;}

/*IE用*/
select::-ms-expand {display: none;}

.from-wrap input[type="text"]::placeholder,
.from-wrap input[type="number"]::placeholder{
	font-size: 20px;
	color: rgba(51, 51, 51, 0.314);}

/*--下拉選單樣式設定--*/
.from-wrap select{
	background: transparent;
	color: #fb9191;
	transition: 0s;}

/*--下拉選單沒有值時，呈現淺灰--*/	
.from-wrap select:invalid{
	text-align: left;
	font-size: 20px;
	color:  rgba(51, 51, 51, 0.314);}

.icon-dropDown{
	display: inline-block;
	position: absolute;
	right: 10px;
	color: #fb9191;
	font-size: 24px;
	top: 30%;
	transform: rotate(90deg) scaleY(1.2);
	pointer-events: none;}
	
.from-wrap{
	display: inline-block;
	font-size: 28px;
	padding: 40px 20px 60px;
    margin: 0 0 0;
	width: 100%;
	max-width: 1000px;
	background: #fff;
	box-shadow: 0 10px 20px -15px rgba(106, 106, 106, 0.5);}

.from-wrap::after{
	content: '';
	position: absolute;
	display: inline-block;
	top: -10px;
	right: 40px;
	width: 30px;
	height: 40px;
	background: #ffdfde;}


/*-- 預約單基本資料第一步 --*/
/*------------------------*/
.form-step1 {
	width: 100%;
	padding: 30px;
	background: #fff;}

.form-step1 > div{
	display: flex;
	flex-direction: row;
	justify-content: center;}

.form-step1 > div > div{
	display: flex;
	flex-direction: column;
	width: 350px;
	margin: 30px 20px;}

.input-title{text-align: left;}

.input-title::after{
	content: '/';
	position: absolute;
	font-size: 18px;
	font-weight: 100;
	margin-top: 10px;
	margin-left: 10px;}

.input-bg{width: 100%;}
.input-bg::after{
	content: '';
	position: absolute;
	display: inline-block;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #737373;}

.input-bg::before{
	content: '';
	position: absolute;
	display: inline-block;
	width: 10px;
	height: 30px;
	background: #ffdfde;
	left: 5px;
	bottom: -5px;}


/*-- 未填提示 --*/
.remind{
	display: none;
	width: 100%;}

.remind.noData{display: block;}
.remind.erroData{display: block;}

.remind.erroData::before{content: '↑格式錯誤，請確認';}
.remind::before{
	content: '↑必填，請確認';
    position: absolute;
    display: inline-block;
    text-align: left;
    color: #f24d00;
    bottom: -25px;
    width: auto;
    left: 30px;
    font-size: 15px;}

/*-- 同意事項 --*/
#agreement{display: none;}
.agreement-wrap{
	display: inline-block;
	width: 100%;
	padding: 30px 5px;
	font-size: 20px;}

.agreement-wrap .agreement{	
	display: inline-block;
	width: auto;
	cursor: pointer;}

.agreement-wrap .agreement > p{
	text-align: left;
	padding-left: 35px;
	display: block;}

.agreement-wrap .agreement > p > span{
	position: absolute;
	display: inline-block;
	left: 0;
	top: 3px;
	width: 25px;
	height: 25px;
	border: 1px solid;}

.agreement > p > span::after{
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 28px;
	background: url(../images/deco-check.png) center no-repeat;
	background-size: contain;
	transition: 0.5s;
	opacity: 0;}

.agreement .remind::before{
	left: 35px;
	bottom: -20px;}

/*-- 個資同意控制器 --*/
#agreement:checked ~ .agreement > p > span::after{
	opacity: 1;}

/*----特別加碼文字區-----*/
.spgift{
	display: inline-block;
	font-size: 18px;
	padding: 10px 40px 10px 20px;
	color: #e85471;
	background: #f9e4e8;
	border-radius: 10px;
	margin: 20px 0 0;
	font-weight: 600;}

.spgift::before{
	content: '專屬活動';
    display: inline-block;
    position: absolute;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #e85471;
    padding: 2px 6px 4px 6px;
    border-radius: 30px;
    top: -12px;
    left: 10px;
    line-height: 13px;}

.spgift::after{
	content: '';
    display: inline-block;
    position: absolute;
	right: 0;
	bottom: -5px;
	width: 59px;
	height: 49px;
	background: url(../images/icon-spgift.png) center no-repeat;
	background-size: auto;
	animation: bounce-ani 1.5s linear infinite;}
	/* bounce-ani */
	@keyframes bounce-ani{
		0%{transform: scale(0.94);}
		20%{transform: scale(0.96) rotate(5deg);}
		40%{transform: scale(0.94);}
		60%{transform: scale(0.96);}
		80%{transform: scale(0.94);}
		90%{transform: scale(0.96);}
		100%{transform: scale(0.94);}
	}


/*-- 預約單基本資料第二步 --*/
/*------------------------*/
.form-step2 {
	width: 100%;
	padding: 30px;
	background: #fff;
	display: none;} /*預設隱藏*/

.form-step2 > h2{
	font-size: 28px;
	color: #fb9191;
	font-weight:400 ;
	letter-spacing: 2px;}

.form-step2 > h3{
	font-size: 28px;
	font-weight:400 ;
	margin: 20px 0;}

.confirm-wrap{
	display: inline-block;
	padding: 30px 50px;
	width: 100%;
	max-width: 600px;
	background: #fff0ef;}

.confirm-wrap > p{
	font-size: 28px;
	color: #fb9191;
	word-break: break-all;}

.form-step2 .input-bg{
	max-width: 350px;
	margin: 0 auto;}

.form-step2 .input-bg .btn-send{
	font-size: 20px;
    left: initial;
    transform: initial;
    right: 0;
	bottom: -25px;
    padding: 0 15px 10px 5px;
	z-index: 1;}

.form-step2 .input-bg .btn-send:active,
.form-step2 .input-bg .btn-send:hover{
		padding: 5px 8px;}
		
.form-step2 .input-bg .btn-send:active::after,
.form-step2 .input-bg .btn-send:hover::after{
		transition: 0.5s;
		top: 0;
		left: 0;}

/* OTP傳送提示 */
.note-otpSent{
	display: none; /*預設不顯示*/
	text-align: left;
    font-size: 15px;
    margin: 50px 0 0;
    background: #d9d9d95c;
    padding: 10px 5%;}

.note-otpSent > span{
    color: #db491d;
	animation: time-ani 1s ease-in-out infinite;}
	/* 時間 */
	@keyframes time-ani{
		0%{opacity: 1;}
		50%{opacity: 0.7;}
		100%{opacity: 1;}
	}

/* OTP傳送提顯示 */
.note-otpSent.otpshow{display:inline-block;}


/*-- 預約單基本資料第三步 --*/
/*------------------------*/
.form-step3 {
	width: 100%;
	padding: 30px 80px;
	background: #fff;
	display: none;} /*預設隱藏*/

.form-step3 > h2{
	font-size: 28px;
	color: #fb9191;
	font-weight:400 ;
	letter-spacing: 2px;}

.form-step3 > h3{
	font-size: 28px;
	font-weight:400 ;
	margin: 20px 0;}

/* 顧問資訊 */
.agent-wrap{
	display: inline-block;
	padding: 40px 20px 20px 220px;
	margin: 20px 0;}

.agent-profile h4{
	text-align: left;
	font-size: 28px;
	padding: 20px 60px; 
	font-weight: 500;}

.agent-profile div{
	width: 100%;
	padding: 40px 60px; 
	background: #fff0ef;}

.agent-profile div ul li{
	list-style: none;
	text-align: left;
	font-size: 18px;
	padding-left: 60px;}

.agent-profile div ul li::before{
	content: '';
	position: absolute;
	color: #404040;
	font-weight: 600;
	left: 0;}

.agent-profile div ul li:nth-of-type(1){color: #fb9191;}

.agent-profile div ul li:nth-of-type(1)::before{content: '評價：';}
.agent-profile div ul li:nth-of-type(2)::before{content: '年資：';}
.agent-profile div ul li:nth-of-type(3)::before{content: '證照：';}
.agent-profile div ul li:nth-of-type(4)::before{content: '獎項：';}

.agent-wrap .agent-pic{
	position: absolute;
	display: inline-block;
	width: 245px;
	height: 245px;
	top: 0;
	left: 0;
	box-shadow: 0 10px 15px -5px rgba(106, 106, 106, 0.5);
	z-index: 1;}

.agent-wrap .agent-pic img{width: 100%;}
.agent-wrap .agent-pic::after{
	content: '';
	position: absolute;
	display: inline-block;
	top: -10px;
	left: 20px;
	width: 10px;
	height: 30px;
	background: #f6c3cb;}

.form-step3 .btn-send{
	color: #fff;
	background: #ff9994;}

.form-step3 .btn-send::before{
	content: '綁定台灣人壽LINE好友';
	position: absolute;
    font-size: 20px;
	top: -40px;
    left: 0;
    color: #1cab9f;}

.agent-profile .deco-eng{
	left: initial;
	top: 50px;}

/*顧問聯繫提示*/
#s7 .note{
	font-size: 18px;
	text-align: center;
    padding: 8px 5px;
    margin: 6px 0;
    border-radius: 100px;}


/*-- 表單鈕 --*/
.btn-send{
	position: absolute;
	display: inline-block;
	width: auto;
    white-space: nowrap;
	padding: 0px 40px 10px 30px;
	bottom: -90px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 28px;
	font-weight: 600;
	background: #ffdfde;
	transition: 0.5s;
	cursor: pointer;}

.btn-send::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: -8px;
	left: -8px;
	border: 1px solid #404040;}

.btn-send:hover,
.btn-send:active{padding: 5px 35px;}

.btn-send:active::after,
.btn-send:hover::after{
	transition: 0.5s;
	top: 0;
	left: 0;}



/*-------------*/
/*-- 共用樣式 --*/
/*-------------*/

/*--  按鈕：了解更多  --*/
.btn-wrap{
	display: block;
	text-align: right;
	width: 100%;
	max-width: 1200px;
	padding:0 4%;
	margin: 0 auto;}

.btn-wrap .btn-more{
	display: inline-block;
	padding: 5px 20px;
	font-size: 28px;
	font-weight: 600;
	border: 1px solid #404040;
	transition: 0.5s;
	cursor: pointer;}

.btn-wrap .btn-more:active,
.btn-wrap .btn-more:hover{
	transition: 0.5s;
	background: #ffdfde;
	color: #fff;
	transform: translateY(10px);
	z-index: 1;}

.btn-wrap .btn-more:active::before,
.btn-wrap .btn-more:hover::before{
	opacity: 0;
	transition: 0.5s;
	bottom: 0px;
	right: 0px;}

.btn-wrap .btn-more::before{
	content: '';
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: -8px;
	right: -8px;
	background: #ffdfde;
	z-index: -1;
	transition: 1s;}

.btn-wrap .btn-more::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 80px;
	height: 50%;
	bottom: 20px;
	left: -80px;
	border: 1px solid #404040;
	border-top: 0;
	border-right: 0;
	z-index: -2;}


/*-- 備註 --*/
.note{
	font-size: 15px;
	letter-spacing: 1px;
	margin: 10px 2%;
	text-align: right;}


/*-- 斷行用空格+小版用， (大版)--*/
.breakspace{display: block;}
.breakspace::before{
	content: '，';
	display: none;}

/*-- 矛點用--*/
#section2{top: -30px;}
#section3{top: -30px;}
#section4{top: -30px;}
#section7{top: -30px;}
#s7.s-content > div#form-head{
	padding:0;}


/*-- 活動辦法 --*/
.rules-wrap{padding: 80px 20px 20px;}
#rules-switch{display: none;}

.rules-title{
	display: inline-block;
    width: 100%;
    max-width: 1200px;
	height: 70px;
    cursor: pointer;
    margin: 0 auto;}

.rules-title h2{
	display: inline-block;
	vertical-align: middle;
	font-size: 28px;
	font-weight: 600;
	color: #354c50;}
.rules{
	max-width: 1100px;
	margin: 20px auto 10px;
	padding: 20px 2%;
	height: 0;
	overflow: hidden;
	padding: 0;
	background: #fff;
	border:1px solid #c5c7c7;}

.rules-title::after{
	content: '';
	display: inline-block;
	position: absolute;
	width: 35px ;
	height: 31px;
	background: url(../images/deco-triangle.png) center no-repeat;
	bottom: -40px;
	left: 50%;
	z-index: 1;
	transform: translateX(-50%);
	transition: 0.5s;}

.rules ol {
	padding-left: 30px;
    padding-right: 10px;}

.rules > ol > li{
	color: #3c4a4c;
	font-size: 15px;}

.rules ol li{
	font-weight: 400;
	text-align: left;
	line-height: 24px;
	margin-bottom: 10px;}

.rules ol li h3{
	margin: 10px 0;
	text-align: left;
	font-size: 17px;
	white-space: pre-line;
	color: #f44336;}
	
.rules ol li ul{
	background: #efefef;
	padding: 10px;
	padding-left: 30px;
	margin-top: 10px;}

.rules ol li ul li{
	margin-left: 10px;
	list-style: square;
	font-weight: 400;
	margin-bottom: 5px;}

.rules ol li ul li span{color: #ff5722;}

.rules ol li ol{padding-left: 5px;}
.rules ol li ol li{
	list-style: inherit;
    margin-bottom: 0;
    font-size: 15px;
    margin-left: 10px;}

/*活動辦法開關控制器*/
#rules-switch:checked ~ .rules{
	height: auto;
	padding: 30px 2%;}

#rules-switch:checked ~ .rules-title::after{
	transform: translateX(-50%) rotate(180deg);}


/*路徑提示箭頭*/
.icon-arrow::after{
	content: '▼';
	position: absolute;
	color: #db491d;
	top: 14px;
	left: 4px;
	transform: rotate(-90deg);
	display: inline-block;
	font-size: 15px;
	animation: iconArrow-ani 2s linear infinite;}

	/*路徑提示箭頭動畫*/
	@keyframes iconArrow-ani{
		0%{ transform: translateX(4px) rotate(-90deg);}
		50%{ transform: translateX(-4px) rotate(-90deg);}
		100%{ transform: translateX(4px) rotate(-90deg);}
	}

	/*-- 右側浮動BN --*/
	
	.rightBN-wrap{
		display: inline-block;
		position: absolute;
		width: 209px;
		height: 211px;
		top: -195px;
		left: 50%;
		transform: translateX(-50%);}


	.rightBN-wrap .cat-hand{
		display: inline-block;
		position: absolute;
		top: -13%;
		left: 45%;
		width: 29.71%;
		max-width: 41px;
		height: 34px;
		background: url(../images/deco-RightCatHand.png) center no-repeat;
		background-size: contain;
		animation: catHand-ani 2s ease-in-out infinite;	}
		/* catHand-ani */
		@keyframes catHand-ani{
			0%{transform: rotate(10deg);
			    transform-origin: top right;}
			50%{transform: rotate(0deg);
				transform-origin: top right;}
			100%{transform: rotate(10deg);
				transform-origin: top right;}
		}

		.rightBN{
			display: inline-block;
			width: 100%;
			height: 100%;
			animation: rightBNShake-ani 2s ease-in-out infinite;}
			/* rightBNShake-ani */
			@keyframes rightBNShake-ani{
				 0%{transform: rotate(-5deg) scale(1);}
				50%{transform: rotate(5deg) scale(0.98);}
				100%{transform: rotate(-5deg) scale(1);}
			}
		
		.rightBN > img{
			width: 100%;}
		

	/*-----------------*/
	/*----TO TOP ------*/
	/*-----------------*/

	.section-btnTop{
		display: inline-block;
		position: fixed;
		width: 100%;
		max-width: 1400px;
		height: 1px;
		margin: 0 auto;
		bottom: 25%;
		left: 50%;
		transform: translate(-50% , -50%);
		text-align: right;
		z-index: 99;}

	.btnTop-Wrap{
		display: inline-block;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;}

	.btnTop{
		position: relative;
		display: inline-block;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 60px;
		border-radius: 30px;
		font-weight: 600;
		padding: 5px;
		background: #9f7e7e;
		line-height: 50px;
		color: #ffffff;
		font-size: 1.2em;
		cursor: pointer;
		transition: 0.5s;
		box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0.8);}

	.btnTop:active,
	.btnTop:hover{
		color: #fff;
		background: #ff7d7d;
		box-shadow: 0 6px 16px -9px rgba(00, 00, 00, 0);} 

	/*-- 右側浮動鈕 --*/

	.btnRight{
		display: inline-block;
		position: absolute;
		width: 107px;
		height: 165px;
		top: -165px;
		left: 50%;
		transform: translateX(-50%);
		background: url(../images/btn-right.png) center bottom no-repeat;
		background-size: contain;
		cursor: pointer;}



	.cno{
		display: block;
		text-align: right;
		width: 100%;
		background: #E85B2D;
		color: #fff;
		padding: 5px 2%;
		z-index: -1;}

	footer{

		font-size: 15px;
		z-index: 1;}
	
	
	/*錨點--*/
	#section1{top: -40px;}



	/*-- 貼心提醒公告 --*/

	.notice-wrap{
		display: inline-block;
		position: sticky;
		top: 70px;
		font-weight: 600;
		width: 100%;
		left: 0;
		text-align: center;
		color: #db491d;
		padding: 15px 60px;
		line-height: 20px;
		background: rgba(255, 255, 255, 0.8);
		overflow: hidden;
		z-index: 99;}

	.notice-wrap span{
		position: absolute;
		display: inline-block;
		text-align: center;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		cursor: pointer;}

	.notice-wrap span > span{
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%) rotate(45deg);
		width: 2px;
		height: 60%;
		background: #333;}

	.notice-wrap span > span:nth-of-type(2){transform: translate(-50%,-50%) rotate(-45deg);}


	#rule1 > h3 > div{display: none;}



/*-- carousel 客製化調整 --*/
.slick-dots li{margin: 0 20px;}
.slick-dots li button:before{
    content: '01';
    font-size: 24px;
    font-weight: 600;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background: #ffdfde;
    display: inline-block;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%);
}

.slick-dots li:nth-of-type(2) button:before{content: '02';}
.slick-dots li:nth-of-type(3) button:before{content: '03';}
.slick-dots li:nth-of-type(4) button:before{content: '04';}
.slick-dots li:nth-of-type(5) button:before{content: '05';}

.slick-dots{
	bottom: initial;
    top: 10px;}
/*

# ARTICLES
===================================================================

*/

.article-header h1 {
	text-align: left;
	font-weight: 500;

	margin-bottom: .1em;
	padding-bottom: .1em;
	font-family: PingFang TC,Heiti TC,Noto Sans TC,Noto Sans CJK TC,Source Han Sans TC,Verdana,Helvetica,Microsoft JhengHei,sans-serif;

}
.article-title {
	display: block;
	border-left: 8px solid;
	border-color: #ff6136;

	border-left-color: currentcolor;
	margin: .33em 0 .75em;
	padding-left: 1.5em;

}
.article-header a:link { text-decoration: none; }

.article-header a:visited { text-decoration: none; }

.article-header a:hover { text-decoration: none; }

.article-header a:active { text-decoration: none; }



.article-main {
	font-family: PingFang TC,Heiti TC,Noto Sans TC,Noto Sans CJK TC,Source Han Sans TC,Verdana,Helvetica,Microsoft JhengHei,sans-serif;
}

.article-main h2 {
	color: #333;
	font-weight: 500;
	margin-bottom: 1.25rem;
	line-height: 1.5em;
}

.article-main blockquote.golden {
	color: #ff6136;
	font-size: 1.33em;
	text-align: justify;
}

.article-main blockquote.golden p {
	color: #ff6136;
}


.article-main blockquote.golden cite {
	display: block;
	text-align: right;
	color: #9b9b9b;
	font-size: .75em;
	font-style: normal;
}

.article-main p.with_img {
	text-align: center;
}
.article-main img {
	height: auto !important;
	max-width: 100%;
}
.prologue {
	margin-bottom: 1.875em;
	color: #949494;
	font-size: 1.1em;
	font-weight: 400;
}

.article-main embedded-block {
	margin-bottom: 2em;
}


.article-container {
	width: 100%;
	padding-right: 30px;
	padding-left: 30px;
	margin-right: auto;
	margin-left: auto;
}