/*font.css 已經引入思源黑體*/


* { box-sizing: border-box;}
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 {padding: 0; margin: 0;border: 0;vertical-align: baseline;}
a, a:link, a:visited, a:hover, a:active {text-decoration: none; outline:none;} 
input, textarea, select, button {font-size: 100%; font-family: inherit; outline:none;}
article, aside, details, figcaption, figure,  header, hgroup, menu, nav, section {   display: block;}
html,body {font-family: Helvetica, Arial, 'Noto Sans TC', '黑體-繁', 'Heiti TC', '儷黑', 'LiHei', '微軟正黑體', 'Microsoft JhengHei', sans-serif; font-size: 16px; line-height:1.6  }
.wrapper { width: 100%;margin: 0 auto;max-width: 750px;min-width: 320px; overflow-x: hidden}

.space{ height:0; line-height:0; clear:both}
.ab{ position:absolute}
a{ transition:all .3s}
/*------*/
.kv{ background:url(../images/kv.jpg); height:1100px; position:relative;animation:br2 2s; overflow: hidden}
.kv h1{ top:684px; left:226px;}
.kv h1 img{animation:br2 .6s infinite alternate }
.kv  a{ top:930px; left:424px;}
.kv  a img{ -webkit-animation:br .6s infinite alternate ;animation:br 1s infinite alternate ;}
.bubble1{ top:1362px;left: 0px; z-index:999; animation:move 8s infinite alternate linear}
.bubble2{ top:1362px;right: 0px;z-index:999; animation:move2 6s infinite alternate linear}
.bubble3{ bottom:70px;left: 30px;z-index:999; animation:move 6s infinite alternate linear}

.section2{ background:url(../images/bg2.jpg) no-repeat; max-height:2120px; position:relative; padding-top: 85px; padding-left: 40px; padding-right: 40px; min-height:1940px;overflow-x: hidden}

.section2 p{ font-size:26px; width: 405px; margin-top: 10px; margin-left: 20px }
.section2 p span{ color:#5a5a5a; font-size:22px; display: inline-block; margin-top: 10px; }
.section2 .vote_section{ background: #fff; width:100%; margin-top: 120px; border-bottom: 18px #0074c1 solid; padding:0; position: relative;}


.star{ position:relative; padding:80px 55px; outline:none}
.name{ left:0;  font-size: 28px; font-weight:700; color:#0f56a6; top:35px; padding-left:20px; z-index:999}
.name strong{ background: #000;color: #fff; display: inline-block; padding:5px 20px; font-size: 40px;font-weight:500; margin-left: -20px;}

.votes_num{ font-size: 28px; right:65px; top:40px;font-weight:700; color:#0f56a6; line-height: 1.4; text-align: right; z-index:999 }
.votes_num span{ font-size: 60px; font-weight: bold; color:#000;}
.prev{ left:10px; top:50%; cursor:pointer; z-index:999}
.next{ right:10px; top:49.6%; transform:scale(-1);cursor:pointer; z-index:999 }
a.vote{ margin:30px auto; display:block; width:349px; height:67px; cursor:pointer; animation:br2 1s infinite alternate }
a.vote:hover{ box-shadow:0 0 5px #132e99}
.quote{ font-size:26px;}
.quote h3{ font-size:28px; color:#132e99}
.quote p{ width:100%; margin-left:0}

.section3{ background:url(../images/bg3.jpg); height:1599px; padding-top:30px}

.section3 h2{ text-align:center; }
.section3 h3{ text-align:center}
.section3 .product{ margin-top:140px;}
.section3 .product1,.section3 .product2{ position:relative}
section3 .product2{ text-align:right}
.section3 .pr1{ position:absolute; right:0; top:150px;}
.section3 .left{ margin-left:50px; }
.section3 ul{ margin:20px 0}
.section3 li{ font-size:24px; list-style:none; background:url(../images/arrow.png) no-repeat; padding-left:50px; padding-bottom:5px   }
.product  a{ transition:all .3s; display:block}
.product  a:hover{ transform:translateX(10px);}
.section3 .pr2{ margin-left:40px; margin-top:50px}
.section3 .right{  position:absolute; left:55%; top:200px; width:50% }


.section4{ background:url(../images/bg4.jpg); height:973px; text-align:center}
.section4 h2{ text-align:center}
.section4  figure{ margin-top: 20px }
.section4 a{ text-align:center; display:inline-block; margin-top:-40px}
.section4 a:hover{ transform:translateX(10px);}

.section4 p{ text-align:left; width:85%; margin:40px auto; font-size:18px;}

.slick-slide img{ transform:scale(.5); transition:all 1s}
.slick-slide.slick-current img { transform:scale(1)}

/*menu*/
#toggle { left: 0px; top:0px; position: fixed; z-index: 99999;width:100px;height:100px;margin: 0;cursor: pointer; left:50%; margin-left:-390px }
#toggle span{display: block;position: absolute;width: 3em;height: 6px;margin:1em 0 0 0;background: #0886dd;-webkit-transition: 350ms ease all;-moz-transition: 350ms ease all;transition: 350ms ease all;top:20px;right: 22px;}
#toggle span:before,#toggle span:after {content: " "; position: absolute; width:100%; height:6px;background: #0886dd;-webkit-transition: 350ms ease all;-moz-transition: 350ms ease all; transition: 350ms ease all;}
#toggle span:before { margin: -12px 0 0 0; }
#toggle span:after { margin: 12px 0 0 0; }
#toggle.open span{ background-color: transparent; }
#toggle.open span:before,#toggle.open span:after { margin: 0;}
#toggle.open span:before {-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg); transform: rotate(135deg);}
#toggle.open span:after{ -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg);}
#menu { display:flex; opacity: 0; position: fixed; z-index: 9999; width: 100%;height: 100%;top: 0;left: 0;text-align: center; background: url(../images/bg_menu_02.jpg) #0d3181; background-size: cover; -webkit-transform:  translateY(-100%); -moz-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: 350ms ease all; -moz-transition: 350ms ease all; transition: 350ms ease all; background-size:cover }
#menu.opened {visibility: visible;opacity:1;-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);-webkit-transition: .6s ease all;-moz-transition: .6s ease all;transition: .6s ease all;}
#menu span#title { display: block; line-height: 1em; margin: 0 0 0.5em 0;font-size: 5em; color: #fff;}
#menu .menu {display:flex; justify-content:center; align-items:center;list-style: none; width:100%; }
#menu ul li {display: block;margin: 0 auto 0 auto; }
#menu ul li a { font-size:38px;position: relative; z-index: 4; display: block; line-height:110px; color: #fff;text-decoration: none;-webkit-transition: 350ms ease all;-moz-transition: 350ms ease all;transition: 350ms ease all;  border-bottom: 1px solid #fff; padding:0 100px;}
#menu ul li a:hover { background:#09048B; color:#fff}
#menu ul li a span { font-size: 1.4em; }
#menu ul li:nth-child(1) a.active{opacity:0;animation: fadeleft .6s forwards;-webkit-animation: fadeleft .6s forwards}
#menu ul li:nth-child(2) a.active{opacity:0;animation: fadeleft .6s .2s forwards;-webkit-animation: fadeleft .6s .2s forwards}
#menu ul li:nth-child(3) a.active{opacity:0;animation: fadeleft .6s .4s forwards;-webkit-animation: fadeleft .6s .4s forwards}
#menu ul li:nth-child(4) a.active{opacity:0;animation: fadeleft .6s .6s forwards;-webkit-animation: fadeleft .6s .6s forwards}


/*lightbox*/
.bluebg{ width: 100%; height: 100%; position: fixed;top: 0px;left: 0px; background:#3a8cbb; z-index: 9999; opacity: 0.8; display: ; cursor: pointer; display:none}
.close{position:absolute; right: 15px; top:15px; z-index: 9999;cursor: pointer;width:70px; height:70px;  }
.close span:after, .close span:before{ content:""; width:90%; height:1px; background:#000; transform:rotate(45deg); position:absolute; top:50%; left:5px; transition:all .6s}
.close span:after{transform:rotate(-45deg);}
.close:hover span:after,.close:hover span:before{transform:rotate(360deg);}

.info, .formbox{ width:100%; height:100%; position:fixed; top:0; left:0; display:flex; align-items:center; justify-content:center; z-index:99999; display:none  }
.box, .form{ box-sizing:border-box; background:#fff; width:700px; padding:50px; position:relative; font-size:26px; line-height:1.6; overflow-y: scroll; max-height:90% }
.box h3{ margin:20px 0 10px 0}
.box p{ padding-left:10px}


	   .form ul{ padding:0}
	   .form li span{ width:80px; display:inline-block}
		.form li{ margin:15px 0; list-style:none}
		.form li input[type="text"],.form li input[type="tel"],.form li input[type="email"],.form li select{ border:1px solid #cb5348; width:85%;height:60px; line-height:60px; padding:0 20px; box-sizing:border-box;  font-size:18px ;font-family:arial, '微軟正黑體'; background:#f4f4f4; border:1px solid #b0b0b0}
		.form li .w50{ width:42%;  }
		.form li .l8{ margin-left:-8px}
		.form li.check{ font-weight:300; font-size:18px; text-align:left}
		.form li.check label{ display:block; margin-top:8px;color:#000; margin-left:40px }
		.form li.check a{ color:#000;}
		.sent{font-family:arial, '微軟正黑體';border:none;background:#0d6292; padding: 15px 0;  transition: all .3s; cursor: pointer; color:#fff; font-size: 24px; width: 60%; margin:30px auto; display:block;   }

.sent:hover { background:#122596}
	
        .form   ::-webkit-input-placeholder { color:#000;}
	   .form input[type="checkbox"] { -webkit-appearance:none; }
       .form  input[type="checkbox"]{ display: inline-block; width: 25px;text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; cursor: pointer; position: relative;   float:left; margin-right:15px  }
       .form  input[type="checkbox"]::before {content: "";  display: inline-block; width: 28px; height: 28px; background: #fff; vertical-align: middle;-webkit-box-sizing: border-box; box-sizing: border-box;border-radius:3px; -webkit-transition: background ease-in .3s;-o-transition: background ease-in .3s; transition: background ease-in .3s; margin-left:-2px; margin-top:-2px;  ;background:#fff ;border:1px solid #0d6292;}
       .form input[type="checkbox"]::after { content: ""; display: inline-block; top: 2px;left: 8px;
    -webkit-box-sizing: border-box; box-sizing: border-box; width: 10px; height: 15px;
    -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg); transform: rotate(45deg); border-style: solid; border-color: #fff;  border-top: 0; border-left: 0;  position: absolute; }
       .form input[type="checkbox"]:checked::after {border-color:#fff;  }	 
.form input[type="checkbox"]:checked::before { background:#0d6292 }

.warn{ font-size:18px;}


  @media screen and (max-width:500px) { 
  .form, .box{ padding:10%;}
  
  }



@keyframes br{
    from{   filter: brightness(1);}
    to{  filter: brightness(1.75); transform:translateX(-10px);  }
}
@keyframes br2{
    from{   filter: brightness(1.25);}
    to{  filter: brightness(1); }
}

@keyframes move{
    from{ transform: translate(0, 0) scale(1)}
    to{transform: translate(-50px, -100px) scale(.6)  }
}


@keyframes move2{
    from{ transform: translate(0, 0) scale(1)}
    to{transform: translate(50px, 50px) scale(.6)  }
}

@keyframes fadeleft{
from {transform: translateX(200px); opacity:0}
to { transform:translateX(0); opacity:1}
}

@-webkit-keyframes fadeleft{
from {transform: translateX(200px); opacity:0}
to { transform:translateX(0); opacity:1}
}