@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

.yes, .no { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; }

.bun { cursor: pointer; border-radius: 4px; padding: 15px; border: 1px solid #f3d131; font-size: 22px; font-weight: bold; color: #000; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; letter-spacing: 10px; text-align: center; display: block; }
.bun:hover { border: 1px solid #ea9e1a; color: #e52e2e; }

.yes, .no { font-size: 0; }

/* menu */
@keyframes shake { 0% { transform: translateY(-140px); }
  100% { transform: translateY(0px); } }
@keyframes Bgchang { 0% { background: url(../img/formbg2.jpg) no-repeat top center; background-size: 100%; }
  50% { background: url(../img/formbg.jpg) no-repeat top center; background-size: 100%; }
  100% { background: url(../img/formbg2.jpg) no-repeat top center; background-size: 100%; } }
@keyframes Bgchang_pc { 0% { background: url(../img/formbg2_pc.jpg) no-repeat top center; background-size: 100%; }
  50% { background: url(../img/formbg_pc.jpg) no-repeat top center; background-size: 100%; }
  100% { background: url(../img/formbg2_pc.jpg) no-repeat top center; background-size: 100%; } }
@keyframes Bgchang_pc1000 { 0% { background: url(../img/formbg_pc1000.jpg) no-repeat top center; background-size: inherit; }
  50% { background: url(../img/formbg_pc1000ch.jpg) no-repeat top center; background-size: inherit; }
  100% { background: url(../img/formbg_pc1000.jpg) no-repeat top center; background-size: inherit; } }
@keyframes main { 0% { opacity: 1; }
  50% { opacity: 0.1; }
  100% { opacity: 1; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); } }
/*共用*/
html, body { margin: 0 auto; background-color: #000; font-size: 20px; }

.layout { text-align: center; width: 100%; display: block; margin: 0 auto; }

a { text-decoration: none; }

#sxc_header_wrapper, #sxc_footer_wrapper { display: none; }

#menubox { background: url(../img/top_bg.jpg) no-repeat top center #010331; background-size: 100%; text-align: center; overflow: hidden; min-height: 70px; box-sizing: border-box; position: fixed; width: 100%; z-index: 99; }
#menubox .layout { min-height: 70px; }
#menubox img { position: absolute; z-index: 999; top: 10px; left: 37%; }

.minbox { background: url(../img/minbg_phone.jpg) repeat-x top center; box-sizing: border-box; background-size: cover; overflow: hidden; padding-top: 70px; }

.wind { background: url(../img/wind_phone.png) no-repeat top center; height: 240px; margin-top: 30px; padding-bottom: 70px; background-size: contain; }

#main { background-color: #03080c; }
#main .minbox { height: 390px; min-height: 390px; margin-bottom: 70px; width: 100%; position: fixed; bottom: 0; }
#main .wind { background: url(../img/main_img.png) no-repeat top center; background-size: contain; min-height: 320px; height: 320px; margin-top: 0; padding-bottom: 0px; }
#main .animation { background: url(../img/animation_main.png) no-repeat bottom center; background-size: contain; position: absolute; width: 100%; height: 320px; left: 0; top: 0px; margin-top: 70px; animation-name: main; animation-duration: 4s; animation-iteration-count: infinite; }
#main .animation_main { background: url(../img/animation_main_img.png) no-repeat top center; background-size: contain; position: absolute; width: 100%; padding-top: 320px; left: 0; top: 0; margin-top: 70px; animation-name: fadeInUp; animation-duration: 2s; animation-iteration-count: infinite; }

article { padding-top: 70px; }

.yes { background: url(../img/yes.png) no-repeat; left: 0; top: 0; }
.yes:hover { background: url(../img/yes_ch.png) no-repeat; }

.no { background: url(../img/no.png) no-repeat; right: 0; top: 0; }
.no:hover { background: url(../img/no_ch.png) no-repeat; }

.yes, .no { width: 140px; height: 140px; background-size: 100%; cursor: pointer; position: absolute; top: inherit; bottom: 50px; }
.yes:hover, .no:hover { background-size: 100%; }

#phone { display: block; }

#menus { text-align: center; position: relative; top: 0px; right: 0; z-index: 1; width: 100%; position: relative; }
#menus .menu { float: right; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; cursor: pointer; margin-right: 20px; margin-top: 25px; }
#menus .menu .icon { width: 30px; height: 5px; margin: 5px 0; background-color: #f6c002; border-radius: 5px; }
#menus .menu:before, #menus .menu:after { content: ''; display: block; width: 30px; height: 5px; background-color: #f6c002; border-radius: 5px; }
#menus ul { display: none; padding-top: 70px; }
#menus ul li { width: 100%; background-color: #020330; opacity: .9; border-top: 1px solid #003c7f; position: relative; }
#menus ul li a { display: block; text-align: center; line-height: 58px; height: 58px; text-decoration: none; font-weight: bold; font-size: 0.75em; color: #f6c002; }
#menus ul li:hover { background: url(../img/menuhover.png) repeat-x top; animation-name: shake; transition-duration: 0.5s; transition-timing-function: ease; }
#menus.active .menu .icon { background: transparent; margin: 0; }
#menus.active .menu:before { -moz-transform: translateY(10px) rotate(45deg); -ms-transform: translateY(10px) rotate(45deg); -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); }
#menus.active .menu:after { -moz-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); -webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); }
#menus.active ul { display: block; }

@media (min-width: 768px) { #menubox { background: url(../img/menubg.jpg) no-repeat top center; background-size: cover; }
  #menubox img { float: left; padding: 5px; left: 0; top: 0; }
  #menubox .menu { display: none; }
  #menubox .layout { position: relative; }
  #menubox #menus { top: -4px; position: absolute; }
  #menubox .menulist { float: right; display: block; padding: 0; width: 90%; float: left; margin-left: 13%; }
  #menubox .menulist li { min-width: 80px; width: auto; display: block; float: left; padding: 10px 2%; border: 0; position: relative; background: url(../img/line.png) no-repeat right center; top: 0; box-sizing: border-box; }
  #menubox .menulist li a { font-size: 0.75em; } }
@media (min-width: 1000px) { #menubox { background: url(../img/menubg.jpg) no-repeat top center; background-size: cover; }
  #menubox img { float: left; padding: 5px; }
  #menubox .menu { display: none; }
  #menubox .menulist li { min-width: 140px; display: block; padding: 10px 2%; }
  #menubox .menulist li a { font-size: .9em; }
  #menubox #phone { display: none; } }
article { background: url(../img/formbg_y.jpg) repeat-y top center; background-size: 100%; overflow: hidden; }
article .article_inbox { background: url(../img/formbg.jpg) no-repeat top center; padding-top: 50%; background-size: 100%; text-align: center; position: relative; animation-name: Bgchang; animation-duration: 3s; animation-iteration-count: infinite; }
article .animation { background: url(../img/animation.png) no-repeat top center; background-size: cover; position: absolute; width: 100%; padding-top: 50%; left: 0; top: 0; animation-name: fadeInUp; animation-duration: 2s; animation-iteration-count: infinite; }

form { margin-bottom: 30px; }

.formbox { width: 100%; margin: 0 auto; padding: 0 15% 80px; box-sizing: border-box; overflow: hidden; }
.formbox .title_border { border-top: 1px solid #f6c002; border-bottom: 1px solid #f6c002; width: 100%; margin: 0 auto; }
.formbox .title_h1 { width: 100%; margin: 0 auto; overflow: hidden; padding-top: 5px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; /* IE10 Consumer Preview */ background-image: -ms-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* Mozilla Firefox */ background-image: -moz-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* Opera */ background-image: -o-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, center center, 0, center center, 505, color-stop(0, #FCEAAD), color-stop(1, #FFC510)); /* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle closest-corner at center, #fceaad 0%, #ffc510 100%); }
.formbox h1 { display: block; font-size: 0.9em; font-weight: bold; color: #003c7f; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; background: -webkit-linear-gradient(top, #292765 0, #0052a4 75%); -webkit-background-clip: text; line-height: 50px; width: 100%; text-align: center; text-shadow: 1px -1px 3px #fff; }

.box_form, .box_form_w { margin-top: 20px; width: 100%; margin: 0 auto; padding: 15px; overflow: hidden; box-sizing: border-box; margin-bottom: 5px; }
.box_form dt, .box_form dd, .box_form_w dt, .box_form_w dd { text-align: left; }
.box_form dt, .box_form_w dt { font-size: 15px; font-weight: bold; color: #003c7f; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; padding-bottom: 5px; }
.box_form dd, .box_form_w dd { overflow: hidden; padding-bottom: 20px; font-size: 15px; font-weight: normal; color: #000; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; }
.box_form dd input[type='text'], .box_form dd input[type='tel'], .box_form dd input[type="mail"], .box_form dd select, .box_form_w dd input[type='text'], .box_form_w dd input[type='tel'], .box_form_w dd input[type="mail"], .box_form_w dd select { padding: 6px; box-sizing: border-box; border: 1px solid #d2d2d2; font-size: 15px; font-weight: normal; color: #000; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; background-color: #f7f7eb; margin: 2px 0; }
.box_form dd input[type='text'], .box_form dd input[type='tel'], .box_form dd input[type="mail"], .box_form_w dd input[type='text'], .box_form_w dd input[type='tel'], .box_form_w dd input[type="mail"] { width: 100%; }
.box_form dd p, .box_form_w dd p { font-size: 13px; font-weight: bold; color: #b50000; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; line-height: 16px; padding-top: 5px; }
.box_form dd p.inp, .box_form_w dd p.inp { background: url(../img/inp.png) no-repeat 0px 7px; padding-left: 15px; }
.box_form dd img, .box_form_w dd img { padding-top: 5px; }
.box_form dd option, .box_form_w dd option { color: #8e8e8e; }
.box_form dd ul li, .box_form_w dd ul li { list-style-type: decimal; font-size: 13px; font-weight: bold; color: #b50000; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; padding-bottom: 15px; line-height: 16px; margin-left: 15px; }
.box_form dd select, .box_form_w dd select { width: auto; }
.box_form .width100 select, .box_form_w .width100 select { width: 100%; }
.box_form .numberbox, .box_form_w .numberbox { padding-bottom: 15px; }
.box_form strong, .box_form_w strong { cursor: pointer; line-height: 25px; font-size: 18px; font-weight: bold; color: #000; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; display: inline-block; margin-left: 10px; }
.box_form button.no_style, .box_form_w button.no_style { border: 0px; background-color: transparent; cursor: pointer; }

.box_form { background-color: #fff8e1; }

.box_form_w { background-color: #efefef; }

.red { cursor: pointer; border-bottom: 1px solid #e52e2e; font-size: 18px; font-weight: bold; color: #e52e2e; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; display: inline-block; line-height: 30px; }
.red:hover { border-bottom: 1px solid #000; color: #000; }

.black { cursor: pointer; line-height: 25px; border-bottom: 1px solid #000; font-size: 13px; font-weight: bold; color: #000; font-family: Arial, "微軟正黑體", "新細明體"; text-align: left; margin: 0 auto; display: inline-block; float: left; }
.black:hover { border-bottom: 1px solid #e52e2e; color: #e52e2e; }

.iradio_square-red { float: left; display: block; padding-right: 20px; }

.iradiobox { display: block; float: left; height: 30px; line-height: 26px; }

.icheckbox_line-red { float: left; }

.boxin { padding-bottom: 10px; overflow: hidden; }
.boxin p { color: #000; font-family: Arial, "微軟正黑體", "新細明體"; font-size: 13px; font-weight: bold; display: inline-block; float: left; line-height: 35px; }

.clear { clear: both; }

.bun { /* IE10 Consumer Preview */ background-image: -ms-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* Mozilla Firefox */ background-image: -moz-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* Opera */ background-image: -o-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(radial, center center, 0, center center, 505, color-stop(0, #FCEAAD), color-stop(1, #FFC510)); /* Webkit (Chrome 11+) */ background-image: -webkit-radial-gradient(center, circle closest-corner, #FCEAAD 0%, #FFC510 100%); /* W3C Markup, IE10 Release Preview */ background-image: radial-gradient(circle closest-corner at center, #fceaad 0%, #ffc510 100%); }

@media (min-width: 480px) { article { background: transparent; background-color: #fff; }
  article .article_inbox { background: url(../img/formbg_pc.jpg) no-repeat top center; background-size: 100%; animation-name: Bgchang_pc; }
  article .animation { background: url(../img/animation_pc.png) no-repeat top center; background-size: 100%; }
  .formbox { padding: 0 10% 80px; font-size: 1.2em; }
  .formbox h1 { font-size: 1em; } }
@media (min-width: 768px) { .box_form, .box_form_w { padding: 5% 20%; }
  .box_form dd.width100 input[type='text'], .box_form_w dd.width100 input[type='text'] { width: 100%; }
  .box_form dd.width100 select, .box_form_w dd.width100 select { width: 100%; }
  .black, .boxin p { font-size: 15px; line-height: 36px; }
  .formbox h1 { font-size: 1.2em; } }
@media (min-width: 1000px) { article { padding-bottom: 130px; background: url(../img/formbg_y_pc.jpg) repeat-y top center; }
  article .article_inbox { background: url(../img/formbg_pc1000.jpg) no-repeat top center; background-size: inherit; padding-top: 450px; animation-name: Bgchang_pc1000; }
  article .animation { background-size: inherit; padding-top: 350px; }
  .formbox { width: 1000px; padding: 0 5%; }
  .box_form dd select, .box_form_w dd select { width: 30%; }
  .box_form dd input[type='text'], .box_form_w dd input[type='text'] { width: auto; float: left; margin-right: 10px; }
  .box_form dd input[type='text'].width100, .box_form_w dd input[type='text'].width100 { width: 100%; }
  .box_form dd .spl, .box_form_w dd .spl { width: 43%; float: left; }
  .box_form dd .spl + p, .box_form_w dd .spl + p { padding-left: 0; }
  .box_form dd p, .box_form_w dd p { line-height: 24px; float: left; }
  .box_form dd br, .box_form_w dd br { clear: both; } }
#footerbox { width: 100%; overflow: hidden; background-color: #000; padding: 10px; box-sizing: border-box; position: fixed; bottom: 0; }
#footerbox .layout { background: url(../img/footer_phone.jpg) center no-repeat; background-size: 100%; min-height: 50px; }

#years18 { background: url(../img/minbg_phone.jpg) repeat-x bottom center; box-sizing: border-box; background-size: cover; overflow: hidden; }
#years18 .minbox { margin-bottom: 70px; position: absolute; bottom: 0; width: 100%; height: 600px; }
#years18 .wind { background-position: bottom; position: absolute; bottom: 0; width: 100%; }
#years18 #footerbox { bottom: inherit; position: fixed; bottom: 0; }

@media (min-width: 480px) { .yes, .no { width: 200px; height: 200px; top: 300px; }
  #footerbox .layout { background: url(../img/footer.jpg) center no-repeat; background-size: 100%; }
  .wind { background-size: initial; height: 375px; }
  #main .minbox { background-position: top center; min-height: 540px; margin-bottom: 70px; }
  #main .wind { background-size: initial; height: 540px; }
  #main .animation { background-size: initial; height: 540px; margin-top: 15px; }
  #main .animation_main { background-size: initial; padding-top: 480px; }
  #years18 .wind { background-size: initial; height: 600px; } }
@media (min-width: 768px) { #years18 #menubox { display: none; }
  .wind { background: url(../img/wind.png) no-repeat top center; height: 570px; background-size: contain; margin-bottom: 0; padding-bottom: 0px; }
  .minbox { background: url(../img/minbg.jpg) no-repeat top center #000; background-size: cover; }
  .yes, .no { width: 260px; height: 260px; top: 320px; }
  #main .minbox { height: 100%; }
  #main .minbox .wind { background: url(../img/main_img_pc.png) no-repeat bottom center; height: 100%; background-size: contain; background-position: bottom; }
  #main .animation { background: url(../img/animation_main_pc.png) no-repeat bottom center; margin-top: 0px; height: 100%; background-size: contain; }
  #main .animation_main { background: url(../img/animation_main_img_pc.png) no-repeat bottom center; padding-top: 0; height: 100%; background-size: contain; top: inherit; bottom: 0px; }
  #years18 .wind { background-size: contain; } }
@media (min-width: 1000px) { #sxc_header_wrapper, #sxc_footer_wrapper { display: block; }
  .layout { width: 1000px; }
  .yes { left: 5%; }
  .no { right: 5%; }
  .wind { height: 470px; background-size: contain; }
  #footerbox { position: fixed; bottom: 30px; }
  #footerbox .layout { background: url(../img/footer.jpg) center no-repeat; min-height: 55px; padding-top: 10px; padding-bottom: 10px; }
  #menubox { position: absolute; }
  #main #footerbox { position: fixed; top: inherit; }
  #main #menubox { bottom: 105px; position: fixed; z-index: 2; width: 100%; }
  #main .minbox { margin-bottom: 70px; height: 820px; padding-top: 0; background-position: top; position: relative; bottom: 49px; }
  #main .minbox .wind { background: url(../img/main_img_pc.png) no-repeat bottom center; background-size: initial; height: 720px; min-height: 720px; position: absolute; bottom: 55px; width: 100%; }
  #main .animation { background: url(../img/animation_main_pc.png) no-repeat top center; background-size: contain; height: 705px; background-position: top center; margin-top: 65px; margin-bottom: 170px; }
  #main .animation_main { top: inherit; background-size: auto; background-position: bottom center; margin-top: 88px; margin-bottom: 56px; height: 100%; }
  #years18 .minbox { margin-bottom: 125px; }
  #years18 .wind { height: 500px; }
  #years18 #footerbox { position: fixed; bottom: 30px; } }
@media (min-width: 1400px) { .yes { left: 20%; }
  .no { right: 20%; } }

/*# sourceMappingURL=layout.css.map */