@charset "utf-8";
/* CSS Document */
*{
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-family: 'Open Sans', 'Noto Sans TC' , sans-serif;
	vertical-align:baseline;
	text-decoration:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
body, html{
  overflow-anchor: none;
	width:100%;
  height: auto;
	color: #3a3a3a;
  background: #a6fdff;
}
html{
  font-size: 24px;
  list-style: 2px;
}
.hide,.f_m,.cont_pic.f_m,.mma.f_m,.w3.hide,.k05mp1 .f_m,.k05mp2 .f_m,.k05mp3 .f_m,a.f_m9,.water a.f_m8,.evp1but a.f_m9,a.f_m10{
  display: none;
}
.top{
  position: relative;
  width: 100%;
  padding-top: 32px;
  z-index: 50;
}
.w1000{
  width: 1000px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}
.w1080{
  width: 1080px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}
a.logo{
  display: block;
  background:url(../img/logo.png) no-repeat;
  width: 147px;
  height: 43px; 
  position: absolute;
  left: 0;
}
a.mma{
  border: 1px solid #e62310;
  border-radius: 50px;
  padding: 8px 20px ;
  color: #e62310;
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  right: 70px;
  transition: 0.3s;
}
a.mma:hover{
  background: #fff;
}
.toggle {
  position: relative;
  margin-left: calc(50% + 470px);
  z-index:999;
  width: 30px;
  height: 30px;
  background: url(../img/menu.png) no-repeat;
  cursor: pointer;
}
.active{
  top: 35px;
  position: fixed;
  background: url(../img/close.png) no-repeat;
}
.nav{
  display: none;
  background: url(../img/bg4.png) #fdf9dc right top no-repeat;
  position: fixed;
  height:calc(100vh - 30px);
  width:100%;
  top: -30px;
  padding-top:100px;
  right:0;
  z-index:998;
}
.nav ul{
    margin: 0;
    padding: 0;
}
.nav li{
  position: relative;
  list-style: none;
  padding:15px 0;
  vertical-align: middle;
  text-align: center;
  color: #515151;
}
.nav li img{
  filter: grayscale(100%);
  margin: 0 15px;
  vertical-align: bottom;
}
.nav ul{list-style: none}li.mnav::before {
  content: "";
  display: inline;
  vertical-align: text-top;
  padding-left:0;
}
.nav li a {
  display: block; 
  color: #515151;
  font-size: 30px;
  letter-spacing: 2px;
  font-weight: bold;
  text-decoration: none;
}
.nav li:hover ,.nav li a:hover ,.nav li:hover img,.nav li.on a,.nav li.on img{
  color: #e62310;
  filter: grayscale(0);
}
.water{
  position: fixed;
  right: 3%;
  bottom: 6%;
  transform: scale(0.85);
  z-index: 50;
}
.water a{
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
.water a:last-child{
  margin-bottom: 0;
}
a.w1{
  background: url(../img/w01.png) center bottom no-repeat;
  width: 146px;
  height: 182px;
}
a.w2{
  background: url(../img/w02.png) center bottom no-repeat;
  width: 136px;
  height: 160px;
}

a.w3{
  background: url(../img/w03.png) center bottom no-repeat;
  width: 133px;
  height: 152px;
}
@keyframes w1{
  0%   { transform: rotate(0deg);}
  65%  { transform: rotate(10deg);}
  100% { transform: rotate(0deg);}
}
.water a:hover img{
  animation-name:w1;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
.water a:hover{
  filter: brightness(1.05);
}
a.gototop{
  position: fixed;
  background: url(../img/gototop.png) center bottom no-repeat;
  width: 44px;
  height: 44px;
  bottom: 4%;
  right: 6%;
  z-index: 10;
}
.kv{
  position: relative;
  width: 100%;
  height: 610px;
  background: url(../img/cloud.png) center bottom no-repeat;
  z-index: 1;
}
.kv > div{
  position: absolute;
}
.main{
  background: url(../img/key1.png) center bottom no-repeat;
  background-size: contain;
  width: 444px;
  height: 306px;
  left: calc(50% - 222px);
  top: 20px;
}
.main div{
  margin: 118px 0 0 316px;
}
.subt{
  left: calc(50% + 310px);
  top: 160px;
}
@keyframes pp{
  0%   { filter: brightness(1);}
  25%  { filter: brightness(1.1);}
  50% { filter: brightness(1);}
}
.p01{
  top: 350px;
  left: calc(50% - 510px);
  cursor: pointer;
}
.good{
  position: absolute;
  background: url(../img/main1a.png) no-repeat;
  background-size: contain;
  width: 113px;
  height: 113px;
  top: -30px;
  left: 125px;
  z-index: -1;
  transition: 0.3s;
  animation-name:pp;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.p02{
  top: 400px;
  left: calc(50% - 260px);
  cursor: pointer;
}
.p02 .good{
  background: url(../img/main2a.png) no-repeat;
  background-size: contain;
  top: -55px;
  left: 70px;
  animation-delay: 0.5s;
}
.p03{
  top: 410px;
  left: calc(50% - 35px);
  cursor: pointer;
}
.p03 .good{
  background: url(../img/main3a.png) no-repeat;
  background-size: contain;
  top: -30px;
  left: 112px;
  animation-delay: 1s;
}
.p04{
  top: 400px;
  left: calc(50% + 185px);
  cursor: pointer;
}
.p04 .good{
  background: url(../img/main4a.png) no-repeat;
  background-size: contain;
  top: -58px;
  left: 48px;
  animation-delay: 1.5s;
}
.p05{
  top: 370px;
  left: calc(50% + 355px);
  cursor: pointer;
}
.p05 .good{
  background: url(../img/main5a.png) no-repeat;
  background-size: contain;
  top: -67px;
  left: 32px;
  animation-delay: 2s;
}
.p01:hover .good,.p02:hover .good,.p03:hover .good,.p04:hover .good,.p05:hover .good{
  margin-top: -10px;
}
.part1{
  background: url(../img/bg1.png) #fdf9dc no-repeat top center;
  padding-top: 170px;
}
ul.cont_nav li{
  display: inline-block;
  background: url(../img/nav1.png) no-repeat;
  background-size: contain;
  width: 172px;
  height: 110px;
  margin: 0 5px;
  cursor: pointer;
  transition: 0.3s;
}
ul.cont_nav li.nav1.on,ul.cont_nav li.nav1:hover{
  background: url(../img/nav1a.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav2.on,ul.cont_nav li.nav2:hover{
  background: url(../img/nav2a.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav3.on,ul.cont_nav li.nav3:hover{
  background: url(../img/nav3a.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav4.on,ul.cont_nav li.nav4:hover{
  background: url(../img/nav4a.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav5.on,ul.cont_nav li.nav5:hover{
  background: url(../img/nav5a.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav2{
  background: url(../img/nav2.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav3{
  background: url(../img/nav3.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav4{
  background: url(../img/nav4.png) no-repeat;
  background-size: contain;
}
ul.cont_nav li.nav5{
  background: url(../img/nav5.png) no-repeat;
  background-size: contain;
}
.banner{
  color: #ec8603;
  font-size: 18px;
  margin-top: 30px;
}
.banner img{
  margin-bottom: 20px;
}
.part2{
  background: url(../img/bg2.png) #fdeac1 no-repeat top center;
  padding: 170px 0 50px 0;
}
.mask{
  width: 1440px;
  height: 320px;
  overflow: hidden;
  text-align: center;
  margin: 50px auto;
  position: relative;
}
.arr > div{
  position: absolute;
  background: url(../img/arr1.png) no-repeat;
  width: 32px;
  height: 32px;
  top: 110px;
  left: calc(50% - 328px);
  cursor: pointer;
  transition: 0.3s;
}
.arr > div:hover{
  left: calc(50% - 332px);
  filter: brightness(0.8);
}
.arr > div.arr2{
  background: url(../img/arr2.png) no-repeat;
  left: calc(50% + 293px);
}
.arr > div.arr2:hover{
  left: calc(50% + 297px);
}
.slides > div{
  display: inline-block;
  vertical-align: middle;
  margin: 0 22px;
}
.slides > div img{
  height: 100%;
}
.slides > div:first-child,.slides > div:last-child{
  height: 150px;
  filter: blur(5px);
  opacity: 0.8;
}
.mainbanner{
  cursor: pointer;
  transition: 0.3s;
}
.mainbanner:hover{
  transform: scale(1.02);
}
.dot{
  margin-top: 20px;
}
.dot > span{
  display: inline-block;
  border-radius: 20px;
  width: 12px;
  height: 12px;
  background: #bbb;
  margin: 0 10px;
  vertical-align: middle;
  cursor: pointer;
  transition: 0.3s;
}
.dot > span.on,.dot > span:hover{
  width: 15px;
  height: 15px;
  background: #888;
}
.footer{
  background: #0254a9;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
}
.footer span{
  margin-left: 30px;
}

.footer a {
  color: white;
  text-decoration: underline;
}

.footer a:link {
  color: white;
}

.footer a:visited {
  color: white;
}

.footer a:hover {
  color: white;
}

.footer a:active {
  color: white;
}


h2{
  font-weight: 600;
  font-size: 78px;
  letter-spacing: 3px;
  color: #c63f1a;
  position: relative;
  z-index: 2;
}
h2 span{
  color: #515151;
  font-size: 60px;
}
h3{
  font-weight: 500;
  font-size: 36px;
  color: #515151;
  margin-bottom: 30px;
}
.content{
  position: relative;
}
.content > div{
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  margin-top: 30px;
  z-index: 2;
}
.content > div.bgwater{
  position: absolute;
  background: url(../img/bg1a.png) no-repeat;
  background-size: contain;
  width: 300px;
  height: 300px;
  right: 0;
  top: -60px;
  z-index: 1;
}
.content.k02 > div.bgwater{
  background: url(../img/bg2a.png) no-repeat;
  background-size: contain;
}
.content.k03 > div.bgwater{
  background: url(../img/bg3a.png) no-repeat;
  background-size: contain;
}
.content > div.bgwater2{
  position: absolute;
  background: url(../img/bg3.png) no-repeat;
  background-size: contain;
  width: 673px;
  height: 380px;
  left: 70px;
  top: -40px;
  z-index: 1;
}
.content.k04 > div.bgwater{
  background: url(../img/bg4a.png) no-repeat;
  background-size: contain;
}
.content.k05 > div.bgwater{
  background: url(../img/bg5a.png) no-repeat;
  background-size: contain;
}
.cont_txt{
  text-align: justify;
  margin-left: 50px;
  width: calc(100% - 460px);
}
.txt{
  padding-right: 15px;
  font-weight: 300;
  color: #3a3a3a;
  letter-spacing: 2px;
  line-height: 40px;
}
.txt span{
  font-size: 34px;
  font-weight: 600;
  color: #e62310;
}
a.more{
  border: 1px solid #e62310;
  border-radius: 50px;
  color: #e62310;
  padding: 2px 15px;
  font-size: 21px;
  margin-left: 10px;
  transition: 0.3s;
}
a.more:hover{
  background: #fff;
}
.k02 .cont_txt,.k04 .cont_txt{
  text-align: justify;
  margin-left: 50px;
  width: calc(100% - 400px);
}
.k03 h3{
  font-size: 40px;
  letter-spacing: 2px;
}
.k03 h3 span{
  color: #c63f1a;
}
.k03 .cont_txt,.k05 .cont_txt{
  width: 100%;
  text-align: center;
}
.k03 .txt{
  width: 80%;
  margin: 0 auto;
  text-align: justify;
}
.k04 h2{
  margin-top: 20px;
}
.k04 .txt{
  width: 86%;
  margin-bottom: 50px;
}
.org{
  color: #ec8603;
  font-size: 21px;
  letter-spacing: 1.5px;
  margin: 20px 0 ;
}
.org img{
  vertical-align: middle;
}
.orgbut{
  text-align: right;
  margin-right: 20px;
}
.orgbut a.more{
  border: 1px solid #ec8603;
  color: #ec8603;
}
.redtxt{
  position: absolute;
  background: url(../img/txt.png) no-repeat;
  width: 175px;
  height: 72px;
  left: 60px;
}
.cloudbut{
  padding: 20px 0;
  margin: 0 auto;
  text-align: center;
}
.cloudbut > a{
  display: inline-block;
  background: url(../img/but_bg.png) no-repeat center;
  background-size: contain;
  color: #3a3a3a;
  margin: 0 15px;
  width: 265px;
  height: 96px;
  padding-top: 30px;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
  font-weight: 500;
  vertical-align: top;
  letter-spacing: 2px;
  cursor: pointer;
  transition: 0.3s;
}
.cloudbut > a span{
  display: inline-block;
  margin-top: 5px;
  color: #e62310;
}
.cloudbut > a span.small{
  font-size: 21px;
  margin-top: 0;
  letter-spacing: 0;
}
.cloudbut > a:hover{
  background: url(../img/but_bg2.png) no-repeat center;
  background-size: contain;
  color: #fff;
}
.cloudbut > a:hover span{
  color: #fff;
}
.cloudbut > a.vtm{
  height: 71px;
  padding-top: 55px;
}
.k03 .cloudbut > a span{
  margin-top: 0;
}
.k04 .cloudbut{
  text-align: left;
}
.k04 .cloudbut > a{
  width: 240px;
  margin: 0 10px;
}
.k05mobbg{
  background: #fff;
  box-shadow: 0 0 20px #eee2b0;
  width: calc(100% - 100px);
  padding: 50px;
  margin: 50px auto;
  border-radius: 10px;
}
.k05mp1{
  background: url(../img/bg5.png) no-repeat center;
  height: 450px;
  padding: 50px 0 30px 0;
}
.k05mp2{
  background: url(../img/bg6.png) no-repeat;
  background-position: 40% 30%;
  height: 523px;
  padding: 100px 0 30px 0;
}
.k05mp1 > div,.k05mp2 > div{
  display: inline-block;
  vertical-align: middle;
}
h4{
  font-size: 36px;
  font-weight: 500;
  color: #e62310;
  margin-bottom: 50px;
}
.m_txt{
  margin: 0 50px;
}
.m_txt p{
  text-align: justify;
}
.m_txt .cloudbut{
  margin-top: 30px;
}
.m_scr{
  position: relative;
}
.m_scr .arr > div{
  top: 110px;
  left: calc(50% - 206px);
}
.m_scr .arr > div:hover{
  left: calc(50% - 210px);
}
.m_scr .arr > div.arr2{
  background: url(../img/arr2.png) no-repeat;
  left: calc(50% + 174px);
}
.m_scr .arr > div.arr2:hover{
  left: calc(50% + 178px);
}
.k05mp2 .m_txt{
  width: 430px;
}
.k05mp2 .m_txt p{
  margin: 10px auto;
}
.k05mp2 .cloudbut{
  padding: 0;
  margin-top: 0px;
}
.k05mp2 .cloudbut > div{
  width: 200px;
  font-size: 24px;
  margin: 0 5px;
}
.k05mp2 h4{
  margin: 0 auto ;
}
.k05mp3 > div{
  display: inline-block;
  width: 45%;
  vertical-align: top;
  margin-bottom: 80px;
}
.k05mp3 > div:nth-child(odd){
  padding-right: 30px;
  margin-right: 22px;
  border-right: 1px dashed #ccc;
}
.k05mp3 p{
  text-align: justify;
  height: 180px;
}
.k05mp3 .cloudbut > div{
  background: url(../img/but_bg3.png) no-repeat center;
  background-size: contain;
  width: 233px;
  height: 70px;
  padding-top: 47px;
  font-size: 25px;
}
.k05mp3 .cloudbut > div:hover{
  background: url(../img/but_bg4.png) no-repeat center;
  background-size: contain;
}