@charset "big5";
/*@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC&subset=chinese-traditional');*/
/* CSS Document */


body{
    font-family: "微軟正黑體";
	font-size: 16px;
    background-color: #fff;
	overflow-x: hidden;
}


#WRAP{
	width: 100vw;
	margin: 0 auto;
    font-family: 'Noto Serif TC', serif;
}

/* ============ TOP ============ */
.header-logo{
	width: 100%;	
}

.d-flex {
	display: flex;
	align-items:center;
	justify-content:center;
}

.top-bg {
	margin: 0 auto;
	padding: 0px;
	height: 42.29vw;
	background: url(../img/top-bg.png) top center no-repeat;
	background-size: 100%;
	position: relative;
	overflow: hidden;
}

.top-title{
    position: absolute;
    top: 10vw;
	left: 0;
	right: 0;
	width: 28vw;
	margin: auto;
}

.top-girl{
	position: absolute;
    height: 28vw;
	left: 4vw;
	bottom: 0;
}

.top-spanish-text{
	position: absolute;
	height: 8vw;
    top: 20vw;
    left: 16vw;
    z-index: 2;
}

.top-football{
	position: absolute;
	height: 8vw;
    top: 2vw;
    left: 2vw;
}

.top-guitar{
	position: absolute;
	height: 15vw;
    top: 8vw;
    right: 0vw;
}

.top-food{
	position: absolute;
    height: 8vw;
    top: 1vw;
    left: 68vw;
}

.top-cow{
	position: absolute;
	height: 12vw;
    top: 29vw;
    left: 84vw;
}

.top-wine{
	position: absolute;
	height: 11vw;
    top: 30vw;
    left: 21vw;
}

@keyframes rotate-shake {
	0% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.rotate-shack {
	animation-name: rotate-shake;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

.delay05s {
	animation-delay: 0.5s;
}

.delay1s {
	animation-delay: 1s;
}

.delay075s {
	animation-delay: 0.75s;
}

/* ============ form ============ */

.form-bg{
	width: 100%;
	position: relative;
	background-color: #ffc2bd;
}

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 5%;
	position: relative;
}

@media screen and (min-width: 1024px) {
	.container {
		max-width: 1024px;
	}
}

.form-title {
	margin: 4vw auto 4vw;
	display: block;
	width: 100%;
}

.coupon-block {
	width: 50%;
	position: relative;
	line-height: 100%;
	vertical-align: center;
}

.form-coupon {
	display: block;
	width: 100%;
}

.form-limit{
	position: absolute;
	bottom: -10%;
	left: -1vw;
	width: 29%;	
}

.form-L {
	width: 50%;
	position: relative;
	top: unset;
	padding-left: 1em;
}
.w-100{
	width: 100%;
}

.p-2 {
	padding: 2em;
}

.form-L #mailSubmit{
	margin: auto;
	width: 50%;
}
	
	
/* ============ life ============ */

.life-bg{
	margin: 0 auto;
	background-size: 100%;
	height: 74vw;
	background: url(../img/life-bg.png) top center no-repeat;
    position: relative;
}

.life-title{
	position: absolute;
	height: 10vw;
    top: 7vw;
    right: 26vw;
}

.life-left-item{
	position: absolute;
    height: 39vw;
    top: 1.5vw;
    left: 23vw;
}

.life-right-item{
	position: absolute;
    height: 14vw;
    top: 35vw;
    right: 24vw;
}

.pic-box{
	width: 30vw;
    position: absolute;
    top: 19vw;
    left: 0;
    right: 0;
    margin: auto;
}

.pic-box img{
	margin: auto;
	width: 90%;
}


.slick-dots{
	bottom: -65px;
}


.slick-next:before, .slick-prev:before {
	font-size: 50px;
}

.slick-next, .slick-prev{
	height: 50px;
	width: 50px;
}

.slick-prev{
	left: -45px;
}

.slick-next{
	right: -45px;
}

h3{
	color: #fff;
	font-family: Microsoft JhengHei;
	font-size: 30pt;
	font-weight: 600;
	text-align: center;
	padding: 1em;
	position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    top: 56vw;
}

.life-flex{
	display: flex;
	width: 100%;
	justify-content: center;
    padding: 63% 0% 0% 0%;
}

.life-box{
	position: relative;
	margin: 1em 1em 2em 1em;
}

.life-1{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.life-1:hover{
	transform: translateY(-.5em);
	transition: .3s;
}

.life-21{
	height: 6vw;
	margin: 0 1em;
}



.life-no2{
	height: 6vw;
	margin: 0 1em;
}




/* ============ learn ============ */

.learn-bg{
	width: 100%;
	position: relative;
	background-color: #ffc2bd;
}

.learn-title{
	margin: 4vw auto 4vw;
    width: 100%;	
}

.learn-flex{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 25px;
}

.learn-box{
	width: 50%;
	padding: 1em;
	text-align: center;
}

.learn-box > img {
    margin-bottom: -1.2em;
	width: 50%;
}

.txt{
	border: 3px solid #fff;
	border-radius: 15px;
	color: #ff3232;   
	padding: 6px;
    margin: 9px;
	font-family: "微軟正黑體";
}
.txt > .txt-1 > span{
	font-size: 30pt;
}
.txt > .txt-1{
	font-weight: 600;
    font-size: 20pt;
	padding: 0em 1em;
	text-align: center;
	/*border-bottom:1px #fff solid;*/
}

.txt-1:after{
    content: "";
    border-bottom: 2px solid #fff;
    width: 84%;
    display: block;
    margin: auto;
}

.txt > .txt-2{
	font-weight: 600;
	text-align: center;
}






/* ============ S1S6 ============ */
/*-------  上半部  -------*/

.S1S6-bg{
	background: url("../img/S1S6-bg1.jpg") top center no-repeat;
	background-size: 100%;
	position: relative;
	margin: 0 auto;
	height: 60.5vw;
	padding: 0px;

}

.hr-title{
    margin: 4vw auto 4vw;
    width: 100%;	
}

.all-title{
  	width: 26%;
    position: absolute;
    top: 16vw;
    left: 5vw;
}

.all-slogan{ 
	width: 28%;
    position: absolute;
    top: 17vw;
    left: 33vw;
}

.S1S6-bg1{
	display: block;
    margin-bottom: -61%;
	width: 100%;
}
.S1S6-bg2{
	display: block;
    margin-bottom: -80%;
	width: 100%;
}


/*-------  flip  -------*/

.flip-flex{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
    padding: 18% 0 0 0;

}


.flip-box{
	perspective: 800px;
    padding: 40px 10px 0px 10px;
    transform-style: preserve-3d;
    float: left;
	width: 33.333%;
}

.flip-box-inner {
 	position: relative;
	transition: 0.6s;
    transform-style: preserve-3d;
	text-align: center;
}

.flip-box:hover .flip-box-inner {
  	transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
 	backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

.flip-box-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.flip-box-back{
	transform: rotateY(-180deg);
}

.img-opacity{
	opacity: 0;
}

.flip-box img{
	width: 85%;
}

@media only screen and (max-width: 1440px){
	.flip-flex{
		width: 80%;
    	margin: auto;
    	padding-top: 4vw;
	}
	.flip-box{
		padding-top: 3vw;
	}
}

/*-------  下半部  -------*/

.S1S6-repeat{
	background: url("../img/S1S6-bg2.jpg") top center no-repeat;
	background-size: 100%;
	position: relative;
	margin: 0 auto;
	height: 38vw;
	padding: 0px;
}

.S1S6-flex{
	display: flex;
	width: 68%;
    margin: 0 auto;
    padding-top: 4vw;
	align-items: flex-end;
}

.S1S6-level {
    width: 16.66%;
}

.S1S6-level img{
	width: 80%;
}


/* ============  level ============ */

.level-bg{
    width: 100%;
    background-color: #ffc2bd;
	position: relative;
    height: 27vw;
}

.level-bg > .level-box{
	width: 40%;
	margin: auto;
	position: relative;
	padding: 10%;
}

.level-5text{
	position: absolute;
    top: 3vw;
    left: 14vw;
    width: 48%;
}

.level-boy{
	position: absolute;
    left: 1vw;
    bottom: -7vw;
    width: 39%;
}

.level-bottom{
	width: 71%;
    position: absolute;
    left: 6vw;
    top: 16vw;
}