@charset "utf-8";

/*淡入*/
.in_text_a.index_fadeIn,.in_text_b.index_fadeIn{ opacity: 0; filter:alpha(opacity=0);	padding-top: 195px;}
.in_text_a.index_fadeIn.fadeIn,.in_text_b.index_fadeIn.fadeIn{ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity:1; filter:alpha(opacity=100); padding-top: 155px;}
.lineOut{ opacity: 0; }

/*影片*/
.videobox{ width:100%; height:100%; position:relative; overflow:hidden; }
video#bgvid {  position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; -ms-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; z-index:-1; 
}

.ins_bgs{ display:none; }

.v{ width:100%; height:100%; background-color:rgba(0,0,0,0.1); position:fixed; top:0px; left:0px; z-index:0; }

.video_titles{ position:absolute; width:640px; height:319px; top:0px; bottom:0px; left:0px; right:0px; margin:auto; text-align:center; z-index:3; }
.video_titles h1{ color:#43aaf3; font-size:19px; font-weight:300; }
.video_titles span.s2{ display:none; }
.video_titles p{ color:#fff; font-size:19px; line-height:30px; }
.video_titles p span.titles{ font-size:61px; color:#fff; font-weight:700; line-height:78px;}
.video_titles p span.titles span{ font-size:61px; color:#fff; font-weight:bold; line-height:78px; font-weight:100;}
.video_titles .TagBtn{ display:inline-block; line-height:1; padding:10px 15px; border-radius:20px; color:#fff; box-sizing:border-box; text-decoration:none; margin:0 7px 10px 7px; box-shadow:0 0 5px 5px rgba(255,255,255,.5); border:1px solid rgba(255,255,255,0); transition:.2s; animation:TagBtn 1s infinite alternate;}
.video_titles .TagBtn:nth-child(2){ animation-delay:.3s;}
.video_titles .TagBtn:nth-child(3){ animation-delay:.6s;}
@keyframes TagBtn{from{ box-shadow:0 0 5px 3px rgba(255,255,255,.3);}to{ box-shadow:0 0 20px 5px rgba(255,255,255,.5);}}
.video_titles .TagBtn:hover{ border:1px solid rgba(255,255,255,.7); transition:.2s;}

.video_about{ width:112px; margin:0 auto; position:relative; }
.video_about a{ display:block; width:112px; height:112px; text-decoration:none; text-align:center; color:#43aaf3; font-size:19px; border-radius:999px; -webkit-border-radius:999px; -moz-border-radius:999px; border:5px solid #fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; margin-top:10px; transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; }
.video_about a:hover{ display:block; width:112px; height:112px; text-decoration:none; text-align:center; color:#fff; font-size:19px; border-radius:999px; -webkit-border-radius:999px; -moz-border-radius:999px; border:5px solid #fff; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; margin-top:10px; background-color:rgba(67,170,243,.45); transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; }
.video_about a span{ width:100%; height:100%; border-radius:999px; -webkit-border-radius:999px; -moz-border-radius:999px; border:5px solid #43aaf3; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; display:block; line-height:92px; }

.video_about .lines01{ position:absolute; width:10px; height:35px; left:50%; margin-left:-5px; bottom:-32px; border-radius:5px; -webkit-animation:aaa 1s 1; -webkit-animation-fill-mode:forwards; animation:aaa 1s 1; animation-fill-mode:forwards; -moz-animation:aaa 1s 1; -moz-animation-fill-mode:forwards; }
.video_about .lines02{ position:absolute; width:10px; height:35px; left:50%; margin-left:-5px; bottom:-109px; border-radius:5px; -webkit-animation:bbb 1s .3s 1; -webkit-animation-fill-mode:forwards; animation:bbb 1s .3s 1; animation-fill-mode:forwards; -moz-animation:bbb 1s .3s 1; -moz-animation-fill-mode:forwards; }
.video_about .lines03{ position:absolute; width:10px; height:35px; left:50%; margin-left:-5px; bottom:-186px; border-radius:5px; -webkit-animation:ccc 1s .6s 1; -webkit-animation-fill-mode:forwards; animation:ccc 1s .6s 1; animation-fill-mode:forwards; -moz-animation:ccc 1s .6s 1; -moz-animation-fill-mode:forwards;  }
.video_about .lines04{ position:absolute; width:10px; height:35px; left:50%; margin-left:-5px; bottom:-263px; border-radius:5px; -webkit-animation:ddd 1s .9s 1; -webkit-animation-fill-mode:forwards; animation:ddd 1s .9s 1; animation-fill-mode:forwards; -moz-animation:ddd 1s .9s 1; -moz-animation-fill-mode:forwards; }
.video_about .lines05{ position:absolute; width:10px; height:35px; left:50%; margin-left:-5px; bottom:-340px; border-radius:5px; -webkit-animation:eee 1s 1.2s 1; -webkit-animation-fill-mode:forwards; animation:eee 1s 1.2s 1; animation-fill-mode:forwards; -moz-animation:eee 1s 1.2s 1; -moz-animation-fill-mode:forwards; }

@-webkit-keyframes aaa{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}
@-moz-keyframes aaa{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}
@keyframes aaa{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-webkit-keyframes bbb{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-moz-keyframes bbb{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@keyframes bbb{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-webkit-keyframes ccc{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-moz-keyframes ccc{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@keyframes ccc{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-webkit-keyframes ddd{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-moz-keyframes ddd{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@keyframes ddd{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-webkit-keyframes eee{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@-moz-keyframes eee{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

@keyframes eee{ 
  0% { background-color:#fff; opacity:0; }
  100% { background-color:#fff; opacity:1; }
}

/*藍menu*/
.b_menu{ width:100%; background-color:#43aaf3; border-bottom:25px solid #2983c2; text-align:center; padding:15px 0 0 0; z-index:2; position: relative; }
.b_tab{ display:table; margin:0 auto; position:relative; }
.b_tab .btns{ z-index: 1; position:absolute; width:48px; height:48px; bottom:-18px; left:50%; transform:translateX(-50%); display:block; }
.b_tab .btns .btns_scrollto{ position:absolute; width:36px; height:36px; bottom:0px; left:50%; transform:translateX(-50%); display:block; background-image:url(../images/sh/m_btn.png); }
.b_grids{ width:201px; height:201px; display: table-cell; position:relative; background-repeat:no-repeat; background-position:top center; border-left:1px #87cdff solid; }
.b_grids:first-child{ border:none; }
.bgs_01{ background-image:url(../images/sh/m01.png); background-position:center center; background-repeat:no-repeat; position:absolute; width:100%; height:100%; z-index:1; top:0px; left:0px; }
.bgs_02{ background-image:url(../images/sh/m02.png); background-position:center center; background-repeat:no-repeat; position:absolute; width:100%; height:100%; z-index:1; top:0px; left:0px; }
.bgs_03{ background-image:url(../images/sh/m03.png); background-position:center center; background-repeat:no-repeat; position:absolute; width:100%; height:100%; z-index:1; top:0px; left:0px; }
.bgs_04{ background-image:url(../images/sh/m04.png); background-position:center center; background-repeat:no-repeat; position:absolute; width:100%; height:100%; z-index:1; top:0px; left:0px; }
.bgs_05{ background-image:url(../images/sh/m05.png); background-position:center center; background-repeat:no-repeat; position:absolute; width:100%; height:100%; z-index:1; top:0px; left:0px; }
.bgs_06{ background-image:url(../images/sh/m06.png); background-position:center center; background-repeat:no-repeat; position:absolute; width:100%; height:100%; z-index:1; top:0px; left:0px; }
.b_text{ position:absolute; bottom:20px; text-align:center; font-size:19px; color:#fff; width:100%; z-index:10;  }
.b_grids .bulebg{ background-color:#2983c2; position:absolute; bottom:0px; left:0px; width:100%; height:0; z-index:0; transition:1s all; -webkit-transition:1s all; -moz-transition:1s all; transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); }
.b_grids:hover .bulebg{ height:100%; transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); }
.b_grids > a{ display:block; width:100%; height:100%; }

/*區塊1*/
.inblock_a{ width:100%; background-color:#fff; z-index:4; position: relative; }
.inblock_mar_a{ width:100%; max-width:1280px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:0 35px; margin:0 auto; position:relative; height:657px; }
.inslogan_a{ width:320px; height:674px; background:url(../images/index/bgs.png) left top; position:absolute; left:30px; top:0px; z-index:1; }
.in_divider{ position:absolute; bottom:0px; background:url(../images/index/divider.png) repeat-x; width:890px; height:2px; left:0; right:0; margin:0 auto; z-index:0; }
@media screen and (max-width:1275px) { .in_divider{ width:62%; }}
.in_text_a{ margin:0 0 0 390px; padding:155px 0 0 0; }
.in_text_a h2{ font-size:39px; color:#444; font-weight:normal; padding:20px 0; letter-spacing:4px; }
.in_text_a p{ font-size:17px; color:#444; line-height:40px; letter-spacing:3px; }
a.btnlinks{ display:block; float:left; color:#43aaf3; border:1px solid #43aaf3; padding:10px 20px; text-decoration:none; letter-spacing:4px; }
a.btnlinks:hover{ color:#fff; border:1px solid #43aaf3; background-color:#43aaf3; }
.btn_box{ float:right; }
.btn_box a,
.btn_box button,
.btn_box .in_btn{ display:inline-block; width:16px; height:16px; background-image:url(../images/index/btn.png); font-size:0; }
.btn_box a:hover,
.btn_box button:hover,
.btn_box .in_btn:hover,
.btn_box .in_btn.slick-active{ background-position:16px; }
.btn_box .in_btn{ margin:0 5px; cursor:pointer; }
.in_cars{ padding:0 0 10px 0; }

/*區塊2*/
.inblock_b{ width:100%; background-color:#eee; z-index:3; position: relative; }
.inslogan_b{ width:320px; height:674px; background:url(../images/index/bgs.png) -320px top; position:absolute; right:30px; top:0px; z-index:1; }
.in_text_b{ margin:0 390px 0 0; padding:155px 0 0 0;}
.in_text_b h2{ font-size:39px; color:#444; font-weight:normal; padding:20px 0; letter-spacing:4px; }
.in_text_b p{ font-size:17px; color:#444; line-height:40px; letter-spacing:5px; }

/*區塊3*/
.inblock_c{ width:100%;background: url(../images/index/block_03.png) repeat-x center bottom; background-color:#fff; z-index:2; position: relative;   }
.inblock_mar_c{ width:100%; max-width:1280px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:0 35px; margin:0 auto; position:relative; height:746px; }
.inslogan_c{ width:320px; height:752px; background:url(../images/index/bgs.png) -640px top; position:absolute; left:30px; top:0px; z-index:1; }
.prolink{ width:406px; height:425px; position:absolute; bottom:34px; right:235px; background-image:url(../images/index/prolink.png); }
.prolink a.links{ width:398px; height:232px; margin:4px auto 0 auto; display:block; overflow:hidden; }
.prolink a.links img{ width:100%; }
.prolink .leftbtn{ position:absolute; left:-30px; background:url(../images/index/proarow.png) left center; display:block; width:13px; height:28px; top:27%; margin-top:-14px; cursor:pointer; }
.prolink .rightbtn{ position:absolute; right:-30px; background:url(../images/index/proarow.png) right center; display:block; width:13px; height:28px; top:27%; margin-top:-14px; cursor:pointer; }
.prolink .titles{ background-image:url(../images/index/s.png); width:100%; padding:10px 0; color:#fff; text-align:center; margin:10px 0 0 0; }
.contactBtn{ position:absolute; bottom:35px; right:35px; background:url(../images/index/pe.png) no-repeat right bottom; padding:55px 40px 0 0; display:block; color:#444; font-size:35px; text-decoration:none; font-weight:300; letter-spacing:2px; }
.contactBtn_1{ display:none; }
a.btnlink_2{ display:block; color:#43aaf3; border:1px solid #43aaf3; padding:10px 20px; text-decoration:none; letter-spacing:4px; position:absolute; right:35px; bottom:171px; font-weight:300;}
a.btnlink_2:hover{ color:#fff; border:1px solid #43aaf3; background-color:#43aaf3; }

/*區塊4*/
.ArticleArea{ background-color:#444;}
.ArticleArea .InBlock{ width:100%; max-width:1280px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; padding:50px 35px; margin:0 auto; position:relative; display:flex; flex-wrap:wrap;}
.ArticleArea .InBlock .Item{ width:32%; margin:0 .5% 1% .5%; background-color:#fff; border-radius:5px; padding:20px 20px 45px 20px; box-sizing:border-box; position:relative;}
.ArticleArea .InBlock .ArticleTitle{ font-size:16px; font-weight:bold; color:#333; padding-bottom:10px;}
.ArticleArea .InBlock .ArticleKwyword{ font-size:12px; color:#069; padding-bottom:5px;}
.ArticleArea .InBlock .ArticleKwyword .Hashtag{ padding:0 5px 5px 0; color:#069; display:inline-block; text-decoration:underline;}
.ArticleArea .InBlock .ArticleNote{ font-size:14px; color:#777; padding-bottom:10px;}
.ArticleArea .InBlock .LinkBox{ position:absolute; left:20px; bottom:20px; font-size:0;}
.ArticleArea .InBlock .LinkBox .LinkBtn{ display:inline-block; padding:3px 10px; border-radius:5px; text-decoration:none; font-size:14px; margin-right:5px;}
.ArticleArea .InBlock .LinkBox .Style01{ background-color:#069; color:#fff;}
.ArticleArea .InBlock .LinkBox .Style02{ background-color:#28b16c; color:#fff;}
.ArticleArea .InBlock .QAItem{ width:100%; background-color:#fff; padding:20px 30px; margin:0 0 10px 0; border-radius:5px;}
.ArticleArea .InBlock .QAItem .QATitle{ font-size:20px; font-weight:bold; color:#069;}
.ArticleArea .InBlock .QAItem .QANote{ font-size:14px; color:#555; padding-top:10px; border-top:1px dashed #ccc; margin-top:10px;}
.ArticleArea .InBlock .QAItem .QANote p{ padding-bottom:10px;}
.ArticleArea .InBlock .QAItem .QANote ul{ padding-left:20px;}
.ArticleArea .InBlock .QAItem .QANote ol{ padding-left:20px;}
.ArticleArea .InBlock .QAItem .QANote li{ padding-bottom:10px;}
.ArticleArea .InBlock .QAItem .QANote a{ color:inherit; font:inherit; text-decoration:none;}
.ArticleArea .InBlock .QAItem .LinkBox{ position:static;}
.ArticleArea .Title{ text-align:center; font-size:40px; font-weight:bold; color:#fff; margin:auto; padding:0 0 50px 0; background:linear-gradient(to right,#28b16c,#43aaf3); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

/*//////////////////-------------平板------------////////////////////*/
@media screen and (min-width:768px) and (max-width:1023px) {
.in_text_a.index_fadeIn.fadeIn,.in_text_b.index_fadeIn.fadeIn{ padding-top:50px; }

video{ display:none; }
.videobox{ background:none; }
.ins_bgs{ display:block; position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: 100vh; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); transition: -webkit-filter .5s; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; background-position: 65% 35%; background-image: url(../images/videobanner/a02.jpg); }

/*藍menu*/
.bgs_01,.bgs_02,.bgs_03,.bgs_04,.bgs_05,.bgs_06{ background-size:150px; }
	
/*區塊1*/
.inblock_mar_a{ width:100%; max-width:none; padding:45px 35px; margin:0 auto; position:relative; height:auto; }
.inslogan_a{ width:320px; height:419px; background:url(../images/index/bgs.png) 0px -101px; position: relative; left:auto; top:auto; margin:0 auto; }
.in_text_a{ margin:auto; padding:0; }
.in_text_a h2{ font-size:33px; }
.in_divider{ width:100%; margin:auto; left:0px; }

/*區塊2*/
.inslogan_b{ width:320px; height:419px; background:url(../images/index/bgs.png) -320px -101px; position: relative; left:auto; top:auto; right:auto; margin:0 auto; }
.in_text_b{ margin:auto; padding:0; }
.in_text_b h2{ font-size:33px; }

/*區塊3*/
.inblock_mar_c{ width:100%; max-width:none; padding:45px 35px 500px 35px; margin:0 auto; position:relative; height:auto; }
.inslogan_c{ width:320px; height:419px; background:url(../images/index/bgs.png) -640px -101px; position:relative; left:auto; top:auto; margin:0 auto; }
.prolink{ right:50%; margin-right:-203px; }
.contactBtn{ right:75px; }
a.btnlink_2{ right:auto; left:75px; bottom:45px; background-color:#fff; }
.in_text_a h2.center{ text-align:center; }

/*區塊4*/
.ArticleArea .InBlock .Item{ width:49%;}
}


/*//////////////////-------------手機------------////////////////////*/
@media screen and (max-width:767px) {
/*影片*/
.video_titles{ width:90%; }
.video_titles span.s1{ display:none; }
.video_titles span.s2{ display:block; }
.video_titles h1{ font-size:16px; }
.video_titles p{ font-size:16px; }
.video_titles p span.titles{ font-size:34px; line-height:42px; }
.video_about{ height:auto; }
video{ display:none; }
.videobox{ background:none; }

.ins_bgs{ display:block; position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: 100vh; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0); transform: translateX(-50%) translateY(-50%) translateZ(0); transition: -webkit-filter .5s; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; background-position: 65% 35%; background-image: url(../images/videobanner/a02.jpg); background-image: url(../images/videobanner/a02.webp); }
	
/*藍menu*/
.b_tab{ width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }	
.b_grids{ width:33.3333%; height:130px; display:block; float:left; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:none;  }
.bgs_01,.bgs_02,.bgs_03,.bgs_04,.bgs_05,.bgs_06{ background-size:120px; }
.b_text{ font-size:16px; bottom: 15px; }
.b_grids .bulebg{ display:none; }


/*區塊1*/
.in_text_a.index_fadeIn.fadeIn,.in_text_b.index_fadeIn.fadeIn{padding:0;}
.inblock_mar_a{ width:100%; max-width:none; padding:45px 15px; margin:0 auto; position:relative; height:auto; }
.inslogan_a{ width:290px; height:378px; background:url(../images/index/bgs.png) 0px -92px; position: relative; left:auto; top:auto; margin:0 auto; background-size:870px; }
.in_text_a{ margin:auto; padding:0; }
.in_text_a h2{ font-size:28px; }
.in_divider{ width:100%; margin:auto; left:0px; }

/*區塊2*/
.inslogan_b{ width:290px; height:378px; background:url(../images/index/bgs.png) -290px -92px; position: relative; left:auto; top:auto; right:auto; margin:0 auto; background-size:870px; }
.in_text_b{ margin:auto; padding:0; }
.in_text_b h2{ font-size:28px; }

/*區塊3*/
.inblock_mar_c{ width:100%; max-width:none; padding:45px 15px 290px 15px; margin:0 auto; position:relative; height:auto; }
.inslogan_c{ width:290px; height:378px; background:url(../images/index/bgs.png) -580px -92px; position:relative; left:auto; top:auto; margin:0 auto; background-size:870px; }
.prolink{ right:50%; margin-right:-130px; width:260px; height:260px; background-size:260px; }
.prolink a.links{ width:250px; height:140px; margin:4px auto 0 auto; }
.prolink .titles{ width:100%; }
.contactBtn{ display:none; }
.contactBtn_1{ display:block; background-image:url(../images/index/pe.png); background-size:100%; width:30px; height:70px; position:absolute; bottom:35px; right:50px; }
a.btnlink_2{ display:block; background-color:#fff; bottom:45px; left:50%; right:auto; margin-left:-130px; padding:10px 5px; }
.in_text_a h2.center{ text-align:center; }

/*區塊4*/
.ArticleArea .InBlock{ padding:50px 20px;}
.ArticleArea .InBlock .Item{ width:100%; margin:0 0 5px 0;}
}

button{ border:none; background-color:unset; cursor:pointer; }
.inblock_a .slick-slide,.inblock_b .slick-slide{ height:unset; }