@charset "big5";
/* CSS Document */
*{ margin: 0;	padding: 0;	box-sizing: border-box;}
body{	font-family: "微軟正黑體" ,Microsoft JhengHei;	position: relative;	font-size: 18px; letter-spacing: 2px;	color: #262626;	background: #fefaf6;}
a{	text-decoration: none;}
img{	width: 100%;}
li{	list-style: none;}
#wrapper{	margin: 0 auto;	overflow: hidden;	height: auto;}
.container{	width: 80%;	margin: 0 auto;	position: relative;}
.clean{	clear: both;	visibility: hidden;}

/*============== content ==============*/

.head_banner {background: url(../images/visual.svg);  height: 765px;  background-size: cover;  position: relative; background-position: center; position: relative; }
.head_banner img.down{ position: absolute;	width: 32px; bottom: 25px;	right: 50%; transform: translateX(-50%);  -webkit-animation: slidedown 3s infinite;  -moz-animation: slidedown 3s infinite; animation: slidedown 3s infinite;}
img.head_title {  max-width: 730px;  position: absolute;  left: 50%; transform: translateX(-50%); top: 7%;}
@keyframes slidedown {
    0%, 20% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -ms-transform: translateY(-24px);
        -webkit-transform: translateY(-24px);
        transform: translateY(-24px);
    }
    50% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    60% {
        -ms-transform: translateY(-12px);
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
    }
    80%, 100%{
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
#list_menu{ background: #ffda9f; padding: 30px 0; text-align: center;}
#list_menu p{	font-size: 1.8rem;	font-weight: bolder;	margin-bottom: 30px;}
#list_menu a {	margin: 0 15px;    display: inline-block;    height: 130px;    width: 130px;    text-align: center;    cursor: pointer;    transition: .3s;}
#list_menu i{	margin: 0 15px;    animation: move 1s infinite ease;    font-size: 1.5rem;}
@keyframes move {
	0%{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-5px);
	}
	100%{
		transform: translateY(0);
	}
}
#list_menu a:nth-child(2) { background: url(../images/button_2.png) top center no-repeat;  background-size: contain;}
#list_menu a:hover:nth-child(2) {  background: url(../images/button_2h.png) top center no-repeat;  background-size: contain;}
#list_menu a:nth-child(3) {  background: url(../images/button_3.png) top center no-repeat;  background-size: contain;}
#list_menu a:hover:nth-child(3) {  background: url(../images/button_3h.png) top center no-repeat;  background-size: contain;}
#list_menu a:nth-child(4) {  background: url(../images/button_4.png) top center no-repeat;  background-size: contain;}
#list_menu a:hover:nth-child(4) {  background: url(../images/button_4h.png) top center no-repeat;  background-size: contain;}

.list_block{ background: #fefaf6;}
.list_block .container{	padding: 0;}
#bundle,#sea,#parent,#group{ text-align: center; padding-top: 60px; } /*為了使看更多置中*/ 
.list_title{ background: #2a4b7f; width: 100%;	color: #FFF; font-size: 1.5rem;	padding: 15px 0; font-weight: bold;	text-align: center;}
.list_desc{	margin: 0 auto;	text-align: center;	margin-top: 35px;	margin-bottom: 30px; }
.object_tool{	display: flex;	justify-content: space-around;	flex-wrap: wrap;	margin-bottom: 35px;}
.each_object{	width: calc((100% - 80px)/4);	margin: 20px 0;}
.each_object:hover .object_desc{	background: rgba(37,49,88,.9);}
.flex_tool{	position: relative;}
.object_desc{	position: absolute;	bottom: 0;	width: 100%;	overflow: hidden;	background: rgba(37,49,88,.7);	color: #FFF;	padding: 10px 15px;	text-align: left;	transition: .3s;}
.object_desc p{	font-size: 1rem;	font-weight: bolder;}
.object_desc span{	font-size: .9rem;	opacity: .9;}
.each_object .price{	color: #ff7300;	font-size: 1.5rem;	margin-top: 10px;	font-weight: bolder;	text-align: right;}
.each_object .price:before{	content: "NT$";	font-size: 1rem;}
.each_object .price:after{	content: "元起";	font-size: 1rem;}
.look_more{	color: #253158;    border: 1px solid #253158;    padding: 10px 30px;    margin-bottom: 80px;    display: inline-block;    border-radius: 30px;    cursor: pointer;    transition: .3s;}
.look_more:hover{	background: #253158;	color: #FFF;}
#group .look_more{	margin-bottom: 0px;}

/*============== RWD ==============*/
@media(max-width: 1400px){
.head_banner{ height: 600px;	}
img.head_title { max-width: 600px; top: 4%;	}
.list_desc { margin-top: 20px;  margin-bottom: 15px;	}
}

@media(max-width: 1200px){
img.head_title { max-width: 530px;	}
.head_banner { height: 500px;	}
.container {width: 85%;	}
#bundle .object_desc p { line-height: 21px; height: 42px;}
.object_desc span {overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; letter-spacing: 1px;	}
}

@media(max-width: 1000px){
.each_object { width: calc((100% - 60px)/3); }
.each_object{	margin: 20px 10px; }
.object_tool { justify-content: left; }
.list_desc{ text-align: left;}
}


@media(max-width: 768px){
.head_banner { height: 450px;}
img.head_title {max-width: 460px;}
#list_menu a {width: 110px;height: 110px;}
.object_tool{margin-bottom: 25px;}
.each_object {width: calc((100% - 40px)/2);	margin: 10px 10px;}
.look_more{	margin-bottom: 50px; }	
.object_tool{ justify-content: space-around;}
}

@media(max-width: 600px){
.head_banner { background: url(../images/visual_mobile.svg); height: 500px; background-size: cover; position: relative; background-position: center;position: relative; }
img.head_title { max-width: 400px; top: 7%;}
.foreword p {letter-spacing: .18rem; font-size: 1.1rem; }
#list_menu a { width: 100px; height: 100px;  margin: 0 10px; }
#list_menu p { font-size: 1.6rem;}
#list_menu i { font-size: 1.3rem;}
#list_menu { padding: 15px 0;}
.list_block .container {padding: 0;}
.list_desc{font-size: 1rem;	letter-spacing: .1rem;}
.each_object { width: calc((100% - 30px)/2); margin: 10px 7.5px;}
.list_title{ font-size: 1.4rem; }
.look_more { font-size: 1.1rem; }
#bundle,#sea,#parent,#group{ text-align: center; padding-top: 30px; } 
}

@media(max-width: 450px){
.head_banner { height: 380px; }
img.head_title { max-width: 330px; top: 4%; }
.container { width: 96%;}
#list_menu p { font-size: 1.5rem; margin-bottom: 10px;}
#list_menu a {  width: 85px; height: 80px;  margin: 0 5px;}
#list_menu i {  margin: 0 10px	font-size: 1.2rem; }
.object_desc{	position: relative;	background: #2a4b7f;	height: 80px;	text-align: justify; }
#bundle .object_desc{	height: 111px;}
#bundle .object_desc p{	line-height: 20px;	height: auto;}
#bundle .object_desc span{ display: inline-block; line-height: 20px; margin-top: 10px; }
.object_desc p{	letter-spacing: 1.5px; }
}

@media(max-width: 375px){
.head_banner {  height: 330px;}
img.head_title {max-width: 300px; }
.head_banner img.down { width: 25px;  bottom: 15px; }
.foreword .container{ width: 85%; }
.foreword-tool h2 {  line-height: 30px; font-size: 1.5rem; }	
.section_1, .section_2 {  margin-bottom: 55px; }
.section_3 a { padding: 15px 20px; b}
#list_menu { padding: 10px;  }
#list_menu a {  }
.list_desc {  line-height: 23px; text-align: justify;}
.each_object .price { font-size: 1.35rem;  letter-spacing: .1rem; letter-spacing: 1px;}
.each_object .price:before, .each_object .price:after{ font-size: .9rem; }
.object_tool { margin-bottom: 20px;}
.object_desc{overflow-y: scroll;padding: 8px 10px;}
#bundle .object_desc span{ line-height: 18px; letter-spacing: .1rem; }
.object_desc span{	display: inline-block;	line-height: 20px;}

}