﻿@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding:0;
	margin:0;
	list-style-type:none;
	}
a,img {
	outline:none;/* for Firefox */
    hlbr:expression(this.onFocus=this.blur());/* for IE */	
	}
input,textarea{outline:none}
textarea{resize:none}
img, div{border:0px;}
a:link {
	color: #ff8400;
	text-decoration:none;
	}
a:visited {
	text-decoration:none;
	color:#ff8400;
	}
a:hover {
	text-decoration: none;
	color: #ff5a00;
	}
a:active {
	text-decoration: none;
	color: #ff8400;
	}
html{font-size:75%;}
body{
	font-size:1rem;
	word-wrap:break-word;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	}
*{	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}
.tas{
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
body{background-color:#fdfff9;/*fbfff3*/}

/**/
.allbx{
	position:relative;
	width:1080px;
	margin:0 auto;
	background-color:#fcf5ed;
	-webkit-filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.16));
	filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.16));
	/**/
	color:#252126;
	}
.headbx,.comicsbx{
	position:relative;
	width:94.8%;/*1024*/
	display:block;
	margin:0 auto;
	}
.headbx{
	padding-bottom:53.6%;/*579*/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 0%;
	background-image:url(../images/tkv.jpg);
	background-size:100% auto;
	}
.comicsbx{overflow:hidden;}
.comicsbx img{
	position:relative;
	width:100%;
	display:block;
	}
.conbx{
	position: relative;
	width:92%;/*980*/
	display: block;
	border-radius:1.66rem;/*20*/
	border: 2px solid #363336;/*2*/
	margin:0 auto;
	padding:3.3rem 3.16rem;/*40 38*/
	/**/
	font-size:1.6rem;/*20*/
	line-height:2.3rem;/*28*/
	background-attachment: scroll;
	background-repeat:no-repeat,no-repeat;
	background-position: 100% 0%,100% 100%;
	background-image:url(../images/cbg_2.png),url(../images/cbg_1.png);
	z-index: 1;
	}
.conbx::before{
	position: absolute;
	width:6.6%;/*65*/
	padding-bottom: 6.6%;
	content: '';
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-image:url(../images/clip.png);
	background-size:100% auto;
	right:3.8%;
	top:-23px;
	}
.ta1{
	position: relative;
	display: inline-block;
	/**/
	font-size:2.3rem;/*28*/
	line-height:2.3rem;/*28*/
	font-weight:700;
	color: #141215;
	padding-left:36px;
	/*overflow:hidden;*/
	}

.ta1.a1::before,.ta1.a2::before{
	position:absolute;
	width:32px;/*32*/
	padding-bottom: 32px;
	content: '';
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-size:100% auto;
	left: 0;
	top:-3px;
	}
.ta1.a1::before{background-image:url(../images/flower_1.png);}
.ta1.a2::before{background-image:url(../images/flower_2.png);}

.ta2{
	position: relative;
	display: inline-block;
	/*overflow:hidden;*/
	top:-3px;
	}
.tbx,.tbx2{
	position: relative;
	width: 100%;
	display:block;
	margin:0 0 2.5rem;
	}
.tbx2 .ta1{
	float:left;
	width:174px;
	display: block;
	}
.map{
	position:absolute;
	width: 52px;
	padding-bottom: 52px;
	display: inline-block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-image:url(../images/map.png);
	background-size:100% auto;
	left: 101%;
	top: -18px;
	}

.ctabx{
	position:relative;
	width:100%;
	text-align:center;
	padding:2.5rem 0 3.8rem;/*30 46*/
	}
.cta_bt{
	position:relative;
	width:410px;
	display:block;
	/*padding-bottom:90px;*/
	margin:0 auto 2.16rem;/*26*/
	}
.cta_bt::before,.cta_bt::after{
	width: 100%;
	content: '';
	display:block;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position: 50% 50%;
	background-size:100% auto;
	}
.cta_bt::before{
	position:relative;
	padding-bottom:21.95121951219512%;
	background-image:url(../images/cta_bt_1.png);
	}
.cta_bt::after{
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	background-image:url(../images/cta_bt_2.png);
	opacity: 0;
	transition: all .5s;
	}
.cta_bt:hover::after{opacity:1;}
.t2{
	position: relative;
	font-size:2.083rem;/*25*/
	}
.footer{
	position:relative;
	width:100%;
	/*height:80px;*/
	background-color:#f2eae0;
	text-align:center;
	}
.cy{
	position:relative;
	width:95%;
	display:inline-block;
	font-size:1.25rem;/*15*/
	line-height:2rem;
	color:#252126;
	font-weight:300;
	text-align:center;
	padding:2.3rem 0;
	}
	

@media only screen and (max-width:1600px){
/**/

}
@media only screen and (max-width:1580px){
/**/
	

	
}
@media only screen and (max-width:1400px){
/**/


}
@media only screen and (max-width:1080px){
/**/
.allbx{width:100%;}
.conbx{
	border-radius:1.85vw;/*20 1.66rem*/
	border: 0.185vw solid #363336;/*2*/
	padding:3.7vw 3.518vw;/*40 38*/
	}
.conbx::before{
	width:6.6%;/*65*/
	padding-bottom: 6.6%;
	right:3.8%;
	top:-2.12vw;
	}
	
	
	
}
@media only screen and (max-width:950px){	
/**/
	
}
@media only screen and (max-width:860px){
/**/
.conbx{
	width:94.5%;
	border-radius:2.5vw;
	padding:4.8vw 3vw;/*40 38*/
	/**/
	font-size:1.35rem;/*20*/
	line-height:2rem;/*28*/
	}
.ta1{
	font-size:2rem;/*28*/
	line-height:2rem;/*28*/
	padding-left:30px;
	}

.ta1.a1::before,.ta1.a2::before{
	width:28px;/*32*/
	padding-bottom: 28px;
	top:-5px;
	}
.map{
	width:40px;
	padding-bottom:40px;
	left: 101%;
	top: -10px;
	}
.tbx,.tbx2{margin:0 0 1.5rem;}
.tbx2 .ta1{width:150px;}	
	
	
}
@media only screen and (max-width:700px){
/**/
/*.headbx{
	padding-bottom:64.8046875%;
	background-image:url(../images/tkv2.jpg);
	}	*/
.conbx{
	width:94.5%;
	padding:30px 3.3vw;/*40 38*/
	}
.conbx::before{
	width:10%;/*65*/
	padding-bottom:10%;
	right:3.8%;
	top:-3.5vw;
	}
	
.ta1{display:block;margin-bottom:.8rem; }
.ta2{
	display: inline-block;
	top:0;
	padding-left:32px;
	}
.tbx2 .ta1{float:none; width:auto;}	
.mp{padding-right: 45px;}
.map{
	width:40px;
	padding-bottom:40px;
	left:auto;
	right:0.5%;
	top:0;
	}
}
@media only screen and (max-width:650px){
/* */


}
@media only screen and (max-width:580px){
/**/

}
@media only screen and (max-width:560px){
/**/
.conbx{
	font-size:1.3rem;/*20*/
	line-height:1.8rem;/*28*/
	}
.ta1{
	font-size:1.65rem;/*28*/
	line-height:1.65rem;/*28*/
	padding-left:26px;
	}
.ta1.a1::before,.ta1.a2::before{
	width:23px;
	padding-bottom:23px;
	top:-4px;
	}
	
.cy{
	font-size:1.15rem;/*15*/
	line-height:1.8rem;
	padding:2rem 0;
	}
.ctabx{padding:2.3rem 0 3.2rem;/*30 46*/}
.cta_bt{
	width:400px;
	margin:0 auto 1.6rem;
	}
.t2{font-size:1.8rem;/*25*/}
	

}
@media only screen and (max-width:450px){
/**/
	
	
.cta_bt{width:90%;}
.t2{font-size:1.5rem;}
	
	
}
@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/
.t2{font-size:1.35rem;}
}
@media only screen and (max-width:340px){
/**/

}

