@import url('/css/SeoJump.css');

@import url('https://fonts.googleapis.com/css?family=Noto+Serif');

/*-----------------------------------------------------------------------------

 [TABLE OF CONTENTS]

    +common

        =anchor

        =clear,clearfix

        =banner

    +header

        =cis

        =site-func

        =share-func

        =nav

    +content

        +content-main

        +content-sidebar

    +footer

        =footer-link

/*-----------------------------------------------------------------------------

 [TABLE OF CONTENTS]

    +common

        =anchor

        =clear,clearfix

        =banner

    +header

        =cis

        =site-func

        =share-func

        =nav

    +content

        +content-main

        +content-sidebar

    +footer

        =footer-link

        =company-info

-----------------------------------------------------------------------------*/



/* +common

*----------------------------------------------------------------------------*/

*{

	-webkit-text-size-adjust: none;

}

body {

	margin:0;

	border:0;

	width:100%;

	color: #274385;

	font-size: 15px;

	line-height:170%;

}

div, h1, h2, h3, h4, hr, p, form, label, input, textarea, img, span {

	text-align: left;

	vertical-align: middle;

	margin: 0px;

	padding: 0px;

	word-wrap: normal;

	word-break: normal;

	border-width:0;

	font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow";

}

hr {

	noshade:noshade;

}

th {

	font-weight: normal;

}

ul {

	list-style: none;

	margin: 0;

	padding: 0;

    overflow:hidden;

}

li{

	list-style: none;

}

a ,

a:hover, a:hover a {text-decoration: none;cursor: pointer;color: #000;}

img{

	max-width:100%;

}

body::-webkit-scrollbar,

#mobile-menu::-webkit-scrollbar { width: 7px; } 

body::-webkit-scrollbar-track,

#mobile-menu::-webkit-scrollbar-track { background: #c5c5c5; } 

body::-webkit-scrollbar-thumb,

#mobile-menu::-webkit-scrollbar-thumb { background: #37be8c; }

body::-webkit-scrollbar-thumb:hover,

#mobile-menu::-webkit-scrollbar-thumb:hover { background: #f39800; }



.pageh1{

	position:fixed;

	z-index:-8989898;

	opacity:0;

	color:#fff;

}

section{

	width: 1300px;

	margin:0 auto;

	overflow:hidden;

}

header{

	width: 100%;

	background: #fff;

	color: #252525;

	z-index: 999;

	position: fixed;

	top: 0;

	left: 0;

	box-shadow: 4px 0 20px -5px rgb(0 0 0 / 20%);

}

header a{

	color:#fff;

}

header a.mo{

    background: #0f6146;

    padding: 5px 80px 5px 10px;

    color: rgb(255 255 255 / 30%);

    display: inline-block;

    border-radius: 5px;

}

header a.lo{

    display: inline-block;

    border-radius: 5px;

    background: #1ebf8c;

    padding: 5px 20px;

}

header a.re{

    display: inline-block;

    border-radius: 5px;

    background: #f39800;

    padding: 5px 20px;

}

header section{text-align: right;overflow: visible;}

#top-nav{background: #14815e;padding: 5px 0;}

#top-nav ul{

}

#top-nav ul li{

	display: inline-block;

	margin-left: 5px;

	font-size: 14px;

}

#top-nav ul li a i{

	margin-right: 5px;

}

#top-nav .translate #hSearch{

	display: inline-block;

}

#top-nav .translate #hSearch p{

	padding: 0 10px;

	background: rgba(255, 255, 255, 0.18);

	-webkit-border-radius: 10px;

	-moz-border-radius: 10px;

	border-radius: 10px;

	overflow: hidden;

}

#top-nav .translate #hSearch p a {

	display: inline-block;

	vertical-align: middle;

	width: 25px;

	text-align: center;

}

#top-nav .translate #hSearch p a i{

	margin: 0;

}

#top-nav .translate #hSearch p input{

	width: 100px;

	background: none;

	display: inline-block;

	color: #ffffff;

	vertical-align: text-bottom;

}

#top-nav .translate #hSearch p input::placeholder{

	color: #ffffff;

}

#cis{

	display: inline-block;

	width: 190px;

	margin-right: 50px;

	margin: 0 50px 0 0;

}

#cis a{

	display:block;

	background-repeat:no-repeat;

	background-position:0 50%;

	background-size: contain;

}

#cis a img{

	width:100%;

}

#menubar #main-menu{

	display:inline-block;

	width: calc(100% - 254px);

	vertical-align: top;

}



















#menubar #main-menu ul{

	overflow:visible;

	text-align: right;

}



#menubar #main-menu >ul >li{



    display: inline-block;

	position:relative;

	margin-left:10px;

}

#menubar #main-menu >ul >li >a{

    display: block;

    font-size: 15px;

    padding: 23px 15px;

    position:relative;

    transition:all linear 0.3s;

    color: #313131;

    font-weight: bold;
    
}
li:last-child a{background: #f39800;}
#menubar #main-menu >ul >li >a:hover{

	color:#00a05d

}

#menubar #main-menu ul.subnav{

	display:none;

	position: absolute;

	width: 200px;

	left: -10px;

	text-align: left;

	z-index: 8;

	top: calc(100% - 2px);

}

#menubar #main-menu >ul >li:hover ul.subnav,

#menubar #main-menu >ul >li:active ul.subnav,

#menubar #main-menu ul.subnav li:hover ul.subOption,

#menubar #main-menu ul.subnav li:active ul.subOption{

	display:block;

}

#menubar #main-menu ul.subnav >li,

#menubar #main-menu ul.subOption li{

	background: rgba(255, 255, 255, 0.89);

	position:relative;

}

#menubar #main-menu ul.sub2nav,

#menubar #main-menu ul.sub3nav{

	text-align: left;

    display: none;

    position: absolute;

    left: 100%;

    width: 100%;

    z-index: 54;

    top: 0;

}

#menubar #main-menu ul.subnav >li:hover ul.sub2nav,

#menubar #main-menu ul.sub2nav li:hover ul.sub3nav{

	display: block;

}

#menubar #main-menu >ul >li:last-child ul.sub2nav,

#menubar #main-menu >ul >li:last-child ul.sub3nav,

#menubar #main-menu >ul >li:nth-last-child(2) ul.sub2nav,

#menubar #main-menu >ul >li:nth-last-child(2) ul.sub3nav,

#menubar #main-menu >ul >li:nth-last-child(3) ul.sub2nav,

#menubar #main-menu >ul >li:nth-last-child(3) ul.sub3nav{

    right: 100%;

    left: inherit;

}

#menubar #main-menu ul.subnav >li ul.sub2nav li >a{

	background: #fff;

}

#menubar #main-menu ul.subnav >li:first-child{

	border-top: 3px solid #ffe31b;

}

#menubar #main-menu ul.subnav >li >a,

#menubar #main-menu ul.subnav >li >p,

#menubar #main-menu ul.subnav >li ul li >a{

    padding: 10px 20px;

    font-size: 15px;

    display: block;

    color: #383838;

    border-bottom: 1px solid #ebf1ea;

}

#menubar #main-menu ul.subnav >li >a:hover,

#menubar #main-menu ul.subnav >li >p:hover,

#menubar #main-menu ul.subnav >li ul li >a:hover{

    background: rgba(180, 236, 233, 0.86);

}

#menubar #main-menu ul.subOption{

    text-align: left;

	position:absolute;

	left:100%;

	top: -3px;

	display:none;

	width: 200px;

}

#menubar #main-menu ul.subOption >li:first-child{

	border-top: 3px solid #f6a266;

}

footer{

	margin-top: 30px;

}

footer section >div{

}

footer section .one{

}

footer section .one #footer-cis{

	text-align:center;

	opacity: .5;

}

footer section .one #community{

	overflow:hidden;

	text-align:center;

	margin-top: 20px;

}

footer section .one #community a{

	display:inline-block;

	color:#fff;

	font-size:14px;

	background:#26a6d1;

	border-radius:50%;

	width:26px;

	height:26px;

	line-height:26px;

	text-align:center;

	margin:0 2px;

}

footer section .one #community a:nth-child(2){

	background:#3b5998;

}

footer section .one #community a:nth-child(3){

	background:#dd4b39;

}

footer section .one #community a:nth-child(4){

	background:#f4b459;

}



footer section .two .border{

	border-right:1px solid #e5e5e5;

	border-left:1px solid #e5e5e5;

	padding: 0 20px;

}

footer section .two .border p{

	font-size: 13px;

	color:#212121;

}

footer section .two .border p b{

    vertical-align: middle;

    margin-right: 5px;

	color: #454545;

}

footer section .two .border p span,

footer section .two .border p a{

	color:#6d6adf;

}

footer section .three ul{

	text-align:center;

}

footer section .three li{

	display:inline-block;

	width:50%;

	margin-right:-4px;

}

footer section .three li a{

	color:#737373;

	font-size:12px;

}

footer section .four{

	float:right;

    width: 319px;

    padding-left: 30px;

	border-left:1px solid #e5e5e5;

}

footer section .four .leftborder{

	overflow: hidden;

	margin-top: 10px;

}

footer section .four .leftborder >div{

	float:right;

	margin-left: 7px;

}

#footer-qrcode2{



    width: 100px;

}

footer #cellphone{

    margin-top: 5px;



}

footer #cellphone li{

	margin-bottom: 10px;

}

footer .footer2{

	border-top:1px solid #e5e5e5;

	padding: 5px 0;

	margin-top:30px;

}

footer .maq > div{

	float: none;

	width: 100%;

	font-size: 7pt;

	color: #cecece;

}

#webSeo .seo > div{

	-webkit-transition: none;

	-moz-transition: none;

	-ms-transition: none;

	-o-transition: none;

	transition: none;

}

footer .footer2 .info{

	text-align:center;

	font-size:12px;

	color:#c5c5c5;

	width: 100%;

    float: none;

}

footer .footer2 .info a{

	color: #828282;

}

footer .footer2 .info >p{

	color: #cecece;

	display: inline-block;

	text-align: center;

	margin-right:10px;

}

footer .plus-information{overflow: visible;}

footer .plus-information a{

	position:relative;

	display: inline-block;

}

footer .plus-information img{

	position:absolute;

	max-width: 150px;

	bottom: 100%;

	left: 0;

	z-index: 8;

	max-height: 150px;

	display:none;

}



.phoneWrap,

.mobile-main-nav,

#mobile-menu,

.nav-func,

.sub2Option,

.sub3Option{

	display:none;

}



#gotop{

	position: fixed;

	right: 20px;

	bottom: 30px;

	color: #fff;

	z-index: 9;

	background: #22815e;

	width: 40px;

	height: 40px;

	text-align: center;

	line-height: 35px;

	font-size: 20px;

	border-radius: 5px;

}

#linejoin{

    position: fixed;

    top: 20%;

    z-index: 88;

}

.animeEffectA{}

.animeEffectA ul li{}

.animeEffectA ul li img{

    width: 40px;

}

#linejoin .share{background: linear-gradient(90deg,  #ca652f 0%,#d34670 20%,#de0ea0 40%,#de0ea0 60%,#5e38e3 100%);width: 80%;margin: 10px auto 0;text-align: center;}

#linejoin .share a{color: #fff;font-size: 25px;display: inline-block;margin: 0 5px;height: 45px;}

#linejoin .gogogog{

    position: absolute;

    top: 50%;

    margin-left: 150px;

}

#linejoin .gogogog a{

    text-decoration: none;

    background: #f39800;

    padding: 5px;

    color: #fff;

    border-bottom-right-radius: 10px;

    border-top-right-radius: 10px;

}

#linejoin .gogogog #clickclose{

    display: block;

}

#linejoin .gogogog #clickopen{

    display: none;

    padding: 15px;

}

.menu_list {text-align: center;margin-top: 10px;}

.menu_list li{

  list-style-type: none;

  text-align: center;

  display: inline-block;

  cursor: pointer;

  margin: 0 2px;

}

.menu_list li a {

  text-decoration: none;

}

.menu_list li:hover a{

    -webkit-filter: grayscale(1);

    -webkit-animation: tada 1s;

    animation: tada 1s;

}

.menu_list i {

  font-size: 2em;

  padding: 2px 0;

}

.menu_list li:hover i {

  color: white;

  background: linear-gradient(#fff, #fff);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.pic_logo_530 {

  width: 36px;

  margin-bottom: 15px;

  float: left;

}

.pic_logo_530 img {

  width: 100%;





  height: auto;

}

@media screen and (min-width: 1279px) {

	footer .plus-information a:hover img{

		display:block;

	}

	#top-nav{ display:block !important;}

}



@media screen and (max-width: 1280px) {

	section{

		width:90%;

	}

	#menubar #main-menu,

	#top-nav{ display:none;}

	.mobile-main-nav,

	.nav-func{

		display:block;

	}

	#top-nav{

    position: absolute;

    width: 200px;

    right: 0;

    top: 81px;

    z-index: 8;

    background: none;

	}

	#top-nav ul li{

    background: #2c8499;

    display: block;

    border-radius: 20px;

    text-align: center;

    margin: 5px 0;

 }

	#top-nav ul li a{

    display: block;

    padding: 2px 0;

}

	#cis{margin: 5px 0;}

	#menubar section{ text-align:center;width: 100%;}

	.nav-funcB{

		position: absolute;

		left: 20px;

		top: 26px;

		font-size: 30px;

		color: #313131;

	}

	.nav-func{

		position: absolute;

		right: 15px;

		top: 20px;

		font-size: 18px;

		color: #ffffff;

		background: #49b68d;

		width: 40px;

		height: 40px;

		text-align: center;

		border-radius: 50%;

		line-height: 40px;

		box-shadow: 2px -2px 1px #3f6d58 inset;

	}

	.nav-func:hover{color:#fff;}

	#mobile-menu{

		width: 350px;

		background: rgb(58 159 216);



		height: calc(100vh - 111px);

		overflow: auto;

		padding-bottom:30px;

		position: absolute;

		z-index: 999;

	}

	#mobile-menu >ul >li .menu_head,

	.subOption >li .sub2Title,

	.subOption >li .sub3Title{

		overflow:hidden;

		padding: 15px;

		border-bottom: 1px solid #252424;

	}

	#mobile-menu >ul >li .menu_head.c0 b,

	.subOption >li .sub2Title.c0 b,{

		display:none;

	}

	#mobile-menu >ul >li .menu_head p,

	.subOption >li .sub2Title p,

	.subOption >li .sub3Title p{

		float:left;

		font-size: 11pt;

		width: calc(100% - 20px);

	}

	#mobile-menu >ul >li .menu_head a,

	.subOption >li .sub2Title a,

	.subOption >li .sub3Title a{

		color: #191919;

	}

	#mobile-menu >ul >li .menu_head b,

	.subOption >li .sub2Title b,

	.subOption >li .sub3Title b{

		float:right;

		color: #c7c7c7;

		cursor:pointer;

	}

	#mobile-menu >ul >li .menu_body li p,

	.subOption >li .sub2Option li p{

		background: #57afb8;

		padding: 5px 15px;

		font-size: 14px;

		border-bottom: 1px solid #ffffff;

	}

	#mobile-menu >ul >li .menu_body li a,

	.subOption >li .sub2Option li p a{

		color: #ffffff;

		display: block;

		padding: 10px 35px;

		font-size: 11pt;

	}

	#mobile-menu .subOption >li .sub2Title{padding: 15px 15px 15px 30px;font-size: 14px;background: #57afb8;}

	#mobile-menu .subOption >li .sub2Title p{

		background: none;

		padding: 0;

		border: 0;

	}

	#mobile-menu .subOption >li .sub2Title p a{

		padding: 0;

		border: none;

	}

	#mobile-menu .subOption >li .sub2Title.bo p a{

		display:inline-block;

	}

	#mobile-menu .subOption >li .sub3Title{background: #56989f;padding: 15px 15px 15px 45px;}

	#mobile-menu .subOption >li .sub3Title p{

		background: none;

		width: calc(100% - 20px - 30px);

		padding: 0;

		border: 0;

	}

	#mobile-menu .subOption >li .sub3Title b{}

	#mobile-menu .subOption >li .sub3Title p a{

		padding: 0;

	}

	#mobile-menu .subOption >li .sub3Option{}

	#mobile-menu .subOption >li .sub3Option li{}

	#mobile-menu .subOption >li .sub3Option div{}

	#mobile-menu .subOption >li .sub3Option p{

		padding: 15px 10px 15px 65px;

		background: #5b797c;

	}

	#mobile-menu .subOption >li .sub3Option p a{

		padding: 0;

	}

	#top-nav .translate #hSearch p{

		background:none;

	}

	footer section .four .leftborder >div{

		margin-left: 1%;

		width: 32%;		

	}

	footer section .one{

		width: 100%;	

		margin-bottom: 30px;

	}

	footer section >div{

		width: calc((100% - 350px) / 2);

	}

	footer section .two .border{

	    border-left: 0;	

	}

	#cis a{ background-position:50% 50%;}

}

@media screen and (max-width: 980px) {

	footer section >div{

		width: 50%;	

	}

	footer section .four{

	    float: none;

		width: 60%;

		clear: both;

		margin: 0 auto;

		padding: 30px 0 0;	

		border: none;

	}

	footer section .four .leftborder{

		border-left:0;

		padding-left: 0;

	}

	footer #cellphone{float: left;}

}

@media screen and (max-width: 768px) {

	#cis {

	}

	footer section .four{

		width: 70%;

	}

}

@media screen and (max-width: 640px) {

	footer{

		margin-bottom:50px;

	}

	footer section .four .leftborder >div{

		margin: 0 1%;

		width: 48%;		

	}

	#footer-qrcode2{ display:none;}

	footer section .four .leftborder #cellphone{

		position: fixed;

		left: 0;

		bottom: 0;

		margin: 0;

		width: 100%;	

		z-index: 8;	

	}

	.phoneWrap { position: fixed; display: block; width: 100%; bottom: 0; left: 0; z-index: 99; }

	.phoneWrap ul li {padding: 8px 0;float: left;width: 50%;text-align: center;}

	.phoneWrap ul li a { color: #fff; }

	footer section .four .leftborder #cellphone ul{

		text-align:center;

	}

	footer section .four .leftborder #cellphone li{

	    display: inline-block;

		margin-top: 0;

		margin-bottom: 10px;

	}

	footer section .four .leftborder #cellphone li img{

		height: 30px;

	}

	#gotop{bottom: 58px;}

}

@media screen and (max-width: 480px) {

	header{ position:fixed;top:0;left:0;width:100%;    box-shadow: 0 0 2px #6f7776;}

	#cis{

		width: 170px;

	}

	.nav-funcB{

		top: 20px;

	}

	.nav-func{

		top: 16px;

	}

	footer section >div{

	    width: 100%;	

	}

	footer section .two .border{

		border-right: 0;

	}

	footer section .two .border p{

		text-align:center;

	}

	footer section .three{

		margin-top:30px;

	}

	footer section .four .leftborder #footer-qrcode,

	footer section .four .leftborder #footer-qrcode2,

	footer section .three{

		display:none;

	}

	footer section .four{width: 100%;}

	#mobile-menu{width: 300px;height: calc(100vh - 131px);padding-bottom: 60px;}

	footer .footer2{

    margin: 0;

}

#linejoin{

    display: none;

}

}

@media screen and (max-width:1024px) {
.phoneWrap {display:block;position: fixed;bottom: 0;width: 100%;left: 0;z-index: 999;}
	.phoneWrap ul{display:flex;}
	.phoneWrap li{width:50%;}
	.phoneWrap a{display: block;padding: 12px 0;text-align: center;background: #ffba00;color: #fff;}
	.phoneWrap li:last-child a{background: #44ba8e;}
	footer{padding-bottom: 40px;}
}

@media screen and (min-width:1025px) {
    .phoneWrap { display: none!important; }
}