@charset "UTF-8";
*{ margin: 0; padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
ul, li { margin: 0; padding: 0; list-style: none;}
img, div, iframe{ border: 0; vertical-align: bottom;}
body, html { width: 100%; height: 100%;}
h1{ display: none;}
li li, li p, li span, li p span, p span{ font-size: 1em;}
a:link, a:visited ,a:hover ,a:active {text-decoration: none;}
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body, html {
-webkit-text-size-adjust: 100%; background: #00a7aa;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-family: 'Noto Sans TC', Arial, Helvetica, sans-serif;}

.wrap{ width: 100%; background: url(../img/bg.jpg) no-repeat; background-size: cover; overflow: hidden;}
.wrap_td{ width: 1000px; margin: 0 auto;}
.wrap_td ul{ width: 100%; height: 750px; float: left; position: relative; text-align: center;}
.alt1 img,.alt2 img,.alt3 img,.alt4 img,.plane img,.tit1 img,.logo img,.date img,.tit2 img,.girl img,.boy img{ width: 100%;}
.alt1,.alt2,.alt3,.alt4,.plane,.tit1,.logo,.date,.tit2,.girl,.boy, .cta_wrap{ position: absolute;}
.alt1{ width: 337px; top: -5px; left: -131px;}
.alt2{ width: 294px; top: -13px; right: -111px;}
.alt3{ width: 98px; bottom: 0; left: -59px;}
.alt4{ width: 98px; bottom: 0; right: -90px;}
.plane{ width: 141px; top: 60px; left: 50%; margin-left: -70.5px;}
.tit1{ width: 277px; top: 160px; left: 50%; margin-left: -134px;}
.logo{ width: 300px; top: 190px; left: 50%; margin-left: -150px;}
.date{ width: 424px; top: 357px; left: 50%; margin-left: -212px;}
.tit2{ width: 426px; top: 490px; left: 50%; margin-left: -213px;}
.girl{ width: 249px; bottom: 0; left: 0;}
.boy{ width: 270px; bottom: 3px; right: -13px;}
.cta_wrap{ width: 300px; left: 50%; bottom: 60px; margin-left: -150px;}

.cta_tit{ color: #fff; display: inline-block; font-size: 1rem; margin-bottom: 10px;}
.cta { width: 300px; height: 60px; background: #fdaa2c; color: #fff; font-weight: 700;
font-size: 1.5rem; line-height: 60px; display: inline-block; border-radius: 40px;}
.cta a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;
border-radius: 40px; color: #fff;}
.cta a:hover { text-decoration: none; background: #fac505;}

.footer_wrap{ width: 100%; background: url(../img/w_bg1.png) top left repeat-x,
url(../img/w_bg2.png) bottom left repeat-x; background-size: 32px;
position: relative; z-index: 9; top: -10px; padding: 18px 0;}
.footer_td{ width: 100%; height: 100%; background: #fffcf1; text-align: center;}
.footer_td p{ width: 730px; margin: 0 auto; font-size: 1.13rem; font-weight: 700;
line-height: 2rem; margin: 40px 0; display: inline-block; color: #538182;}
.agent{ width: 90%; font-size: 0.938rem; color: #fff; display: inline-block;
text-align: center; margin: 20px 5% 40px 5%; line-height: 1.5rem;}
.m{ display: none;}

@media screen and (max-width: 1280px) {
.cta { width: 250px; height: 50px; line-height: 50px; font-size: 1.25rem;}
}

@media screen and (max-width: 1100px) {
.wrap_td{ width: 100%;}
.wrap_td ul{ height: 700px;}
.plane{ top: 30px;}
.tit1{ top: 130px;}
.logo{ top: 160px;}
.date{ top: 327px;}
.tit2{ top: 460px;}
.alt3{ width: 80px; left: 170px;}
.alt4{ width: 80px; right: 180px;}
.girl{ width: 249px; bottom: 0; left: 10px;}
.boy{ width: 270px; bottom: 3px; right: 10px;}
}

@media screen and (max-width: 920px) {
.girl{ width: 25%; left: -20px;}
.boy{ width: 25%; right: -40px;}
.alt3, .alt4{ display: none;}
}

@media screen and (max-width: 768px) {
.footer_td p{ width: 80%;}
}

@media screen and (max-width: 640px) {
.wrap_td ul{ height: 880px;}
.girl{ left: 20%; width: 30%;}
.boy{ right: 20%; width: 30%;}
.alt1{ width: 40%; left: -10%;}
.alt2{ width: 30%; right: -10%;}
.m{ display: block;}
.alt3, .alt4{ display: block; width: 13%;}
.alt3{ left: 30px;}
.alt4{ right: 20px;}
.cta_tit{ font-size: 0.813rem;}
.cta_wrap{ width: 250px; bottom: 235px; margin-left: -125px;}
}

@media screen and (max-width: 500px) {
.wrap_td ul{ height: auto; text-align: center;}
.plane, .tit1, .logo, .date, .tit2, .cta_wrap{ position: static; left: 0; margin-left: 0;
display: inline-block; width: 100%; margin-bottom: 10px;}
.plane img{ width: 25%; margin-top: 60px;}
.tit1 img{ width: 58%; margin-left: 10px;}
.logo img{ width: 60%;}
.date img{ width: 80%;}
.tit2 img{ width: 80%; margin-bottom: 10px;}
.footer_td p{ font-size: 1rem; line-height: 1.75rem;}
.cta_wrap{ bottom: 0; margin-bottom: 200px;}
}

@media screen and (max-width: 399px) {
.cta_wrap{ margin-bottom: 150px;}
.footer_td p{ width: 90%;}
}

@media screen and (max-width: 355px) {
.cta_wrap{ margin-bottom: 130px;}
.footer_td p{ width: 80%; margin: 20px 0;}
}

/* animation */
.floating{
animation: floating 2s infinite;
-webkit-animation: floating 2s infinite;
}

@keyframes floating {
0% { transform: translateY(0%);}
50% { transform: translateY(4%);}
100% { transform: translateY(0%);}
}

@-webkit-keyframes floating {
0% { -webkit-transform: translateY(0%);}
50% { -webkit-transform: translateY(4%);}
100% { -webkit-transform: translateY(0%);}
}