/*-----------------------------------------------------------------------------
 [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
*----------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet');
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
*{
	-webkit-text-size-adjust: none;
}
body {
	margin:0;
	border:0;
	width:100%;
	color: #000;
	font-size: 14px;
	line-height:170%;
}
div, h1, h2, h3, h4, hr, p, form, label, input, textarea, img, span, strong {
	text-align: left;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	word-wrap: normal;
	word-break: normal;
	border-width:0;
	font-family: Microsoft YaHei,Microsoft JhengHei,Helvetica,Arial,sans-serif;
	outline:none;
	letter-spacing: 1px;
}
hr {
	noshade:noshade;
}
th {
	font-weight: normal;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
    overflow:hidden;
}
li{
	list-style: none;
}
a ,
a:hover{
	text-decoration: none;
	cursor: pointer;
	outline:none;
	color:#232323;
}
img{
	max-width:100%;
}
@import url('https://fonts.googleapis.com/css?family=Lora');

br{
	font-family:Arial !important;	
}
.pageh1{
	position:fixed;
	z-index:-8989898;
	opacity:0;
	color:#fff;
}
.wrapper .slick-slider{
	margin: 0;
}


/* end hide from IE-mac */
livedemo00.template-help.com/media="screen":after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.wow { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; }

.text-clamp { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }

body ::selection { background: #db257d; color: #000; }
body::-webkit-scrollbar { width: 4px; }
body::-webkit-scrollbar-track { background: #c5c5c5; }
body::-webkit-scrollbar-thumb { background: #cc3384; outline: 1px solid #fff; }
body::-webkit-scrollbar-thumb:hover { background: #cc3384; }

section,
.widthset02 #contentMain {overflow: hidden;margin: 0 auto;width: 1280px;}

.wrapper { overflow: hidden; width: 100%; font-size: 14px; }


/**
*
* =jumpDiv
*
**/
/* + 跳一  跳三
*----------------------------------------------------------------------------*/
#jumpDiv ,
#jumpIframe {
	position: relative;
	background: #fff;
	top: 0;
	left: 0;
	z-index: 9999999999999999999999;
}
.workframe{
	width:90%;
	margin:0 auto;
	overflow:hidden;
}
.webframe{
	width:85%;
	margin:0 auto;
	overflow:hidden;
}
.wrapper{
	overflow:hidden;
	position:relative;	
}
/* a.photo */
a.photo { overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size: 100% auto; display: block; }
a.photo img { width: 100%; }

/* header */
header {/* position: fixed; */width: 100%;height: 116px;background: rgb(255, 255, 255);z-index: 100;}
header .topBar { overflow: hidden; margin-bottom: 0px; width: 100%; }
header .topBar form , header .topBar .links { width: 49%; display: inline-block; }
header .topBar form input , header .topBar form a { padding: 2px; height: 23px; display: inline-block; background: transparent; border-bottom: 1px #728392 solid; }




header .topBar form input { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
header .topBar form a { padding: 3px 2px; }
header .topBar .links { color: #bf9461; }
header .topBar .links a , header #mamberIcon p a {color: #848484;}

header .topBar .countM { display: none; text-align: right; }

header #openIcon , header #cis , header #mamberIcon {width: 32%;display: inline-block;}
header #openIcon a { width: 52px; height: 52px; display: block; background: url(/images/44/icon-menuOpen.png) no-repeat 0 0; color: transparent; }
header #openIcon a.close { background: url(/images/44/icon-menuClose.png) no-repeat 0 0; background-size: contain;}

header #cis { text-align: center; }

header #mamberIcon {text-align: right;}
header #mamberIcon p {margin: 0 10px;width: 59px;display: inline-block;text-align: center;}
header #mamberIcon p b {display: inline-block;font-size: 13px;/* display: none; */margin-top: 4px;}

header nav {padding: 30px 0;position: absolute;width: 100%;background: rgba(214, 33, 120, 0.73);background: -moz-linear-gradient(left,   rgba(214, 33, 120, 0.92) 0%,rgb(75, 59, 135) 100%);background: -webkit-linear-gradient(left,  rgba(214, 33, 120, 0.92) 0%,rgb(75, 59, 135) 100%);background: linear-gradient(to right,  rgba(214, 33, 120, 0.92) 0%,rgb(75, 59, 135) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abad6', endColorstr='#9fceca',GradientType=1 );left: 0;top: -500%;opacity: 0;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
header nav.Open {top: 114px;opacity: 1;z-index: 99999;}
header nav .otherIcon { display: none; }
header nav section { width: 770px; }
header nav p { float: left; width: 60px; font-size: 20px; color: #fff; }
header nav p:before , header nav ul:before { margin: 30px 0 10px; width: 100%; height: 3px; display: block; background: #fff; content: ""; }
header nav ul { float: right; width: 630px; }
header nav ul:before { height: 5px; background: none; border-top: 1px #fff solid; border-bottom: 1px #fff solid; }
header nav ul li { margin-bottom: 15px; width: 16%; display: inline-block; }
header nav ul li a { display: block;  text-align: center; color: #fff; font-size: 16px; }

header nav ul li a:hover {
    text-decoration: none;
    cursor: pointer;
    outline: none;
    color: #ffa6d1;
}
header nav ul li a:before { margin: auto; width: 10px; height: 13px; display: block; content: ""; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
header nav ul li:hover a:before { background-size: 10px 13px; } 
header nav .otherIcon a {margin: 0 5px;display: inline-block;color: #fff;}
header nav .otherIcon a b {margin-left: 9px;vertical-align: bottom;font-weight: 700;}

/* banner */
#banner {overflow: hidden;position: relative;margin-top: 118px;}
#banner ul li a.photo {background-size: cover;background-position: center;}
#banner ul li a.photo img { width: 100%; max-width: initial; }
#banner .rslides_tabs { position: absolute; width: 100%; bottom: 10px; text-align: center; z-index: 10; }
#banner .rslides_tabs li { margin: 0 5px; display: inline-block; }
#banner .rslides_tabs li a { width: 12px; height: 12px; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #fff; color: transparent; opacity: 0.5; }
#banner .rslides_tabs li:hover a , #banner .rslides_tabs li.rslides_here a { opacity: 1; }

#projectBox ul li .item h3{
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		position: relative;
		overflow: hidden;
}
#menubar .workframe{
	overflow:visible;
}
#menubar #cis{
	display:inline-block;
}
#menubar #cis img{
    width: 200px;
    min-height: 50px;
}
#menubar #main-menu{
	display:inline-block;
	width: calc(100% - 204px);
	vertical-align: top;
}
#menubar #main-menu ul{
	text-align:right;
	overflow:visible;
}
#menubar #main-menu >ul >li{
    display: inline-block;
	position:relative;
	margin-left:10px;
}
#menubar #main-menu >ul >li >a{
    display: block;
    font-size: 16px;
	padding: 10px 16px;
	position:relative;
	border: 2px solid transparent;
}
#menubar #main-menu >ul >li >a:hover{
    border-color: #aaa;
}
#menubar #main-menu ul.subnav{
	display:none;
    position: absolute;
	width: 200px;
    left: -10px;
    text-align: left;
    z-index: 5;
    top: 100%;
    padding-top: 10px;
}
#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: #fff;
	position:relative;
}
#menubar #main-menu ul.subnav >li:first-child{
	border-top: 3px solid #f6d466;	
}
#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;
}
#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: #ffe72e;
}
#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 */
footer {background: #232323;color: #fff;}
footer #footerMenu {border-bottom: 1px #2f2f2f solid;padding: 10px 0;background-color: #fffaf4;}
footer #footerMenu .footercis , footer #footerMenu .footerNav , footer #footerInfo .row { margin: 15px 0; display: inline-block; width: 20%; }
footer #footerMenu .footerNav { width: 79%; text-align: right; }
footer #footerMenu .footerNav a { padding: 0 15px; display: inline-block; font-size: 16px; color: #717171; }

footer #footerInfo .row { width: 49%; font-size: 12px; color: #888888; }
footer #footerInfo .row:first-child a , footer #footerInfo .row:last-child #footerCopy b {color: #ffffff;}
footer #footerInfo .row:last-child > div { text-align: right; }
footer #footerInfo .row:last-child .share a {margin: 0 5px;width: 24px;height: 24px;background: rgba(58, 58, 58, 0.5);display: inline-block;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;text-align: center;line-height: 24px;font-size: 14px;color: #fff;}
footer #footerInfo .row:last-child .countBox { margin-top: 10px; }
footer #footerInfo .row:last-child .countBox font { margin-left: 10px; font-size: 16px; }
footer #footerInfo .row:last-child #footerCopy { font-size: 14px; }
footer #footerInfo .row:last-child #footerCopy a { color: #888888; vertical-align: bottom; }


.web{
	background:#000;
    color: #4f4f4f;
	font-size:8pt;
    padding: 20px 0;
}
.phoneWrap,
.mobile-main-nav,
#mobile-menu,
.nav-func{
	display:none;
}
#gotop{
	display: block;
	position: fixed;
	right: 10px;
	bottom: 90px;
	background: #363333;
	z-index: 9999;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	box-shadow: 0 0 8px #d4d4d4;
}

#alist{
	background-image:url(/images/44/ad-bg.jpg);
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-attachment:fixed;
	background-size:100%;
	padding: 146px 0 160px;
	position: relative;
    z-index: 2;
}
#alist .bxslider li a{
	display:block;
	text-align:center;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
	margin: 5px;
}
#alist .bxslider li a img{
	display:inline-block;
	width:100%;
}
/***固定卷軸設定***/
@media screen and (min-width: 1280px) {
	footer #footerMenu .footerNav a { padding: 0 10px; }
}
@media screen and (max-width: 1280px) {
	header{
		/* position: fixed; */
		top: 0;
		width: 100%;
		left: 0;
		z-index: 9999;
	}
	#menubar #main-menu,
	header #top-nav{
		display:none;
	}
	header #menubar{
		padding: 15px 0;	
	}
	#menubar #cis{
	    margin-left: 30px;	
	}
	#menubar #cis img{
		max-height: 38px;
		width: auto;
		min-height: 1px;
	}
	.mobile-main-nav{
		display:block;
	}
	.nav-funcB{
		position: fixed;
		left: 2.5%;
		top: 19px;
		font-size: 30px;
		color: #565656;		
	}
	#mobile-menu{
		width: 250px;
		background: #fff;
		height: calc(100vh - 97px);		
		overflow: auto;
		padding-bottom:30px;
	}
	#mobile-menu >ul >li .menu_head{
		overflow:hidden;
		padding: 15px;
		border-bottom: 1px solid #efefef;
	}
	#mobile-menu >ul >li .menu_head.c0 b{
		display:none;
	}
	#mobile-menu >ul >li .menu_head p{
		float:left;
		font-size: 11pt;
	}
	#mobile-menu >ul >li .menu_head a{
		color: #191919;
	}
	#mobile-menu >ul >li .menu_head b{
		float:right;
		color: #9a9a9a;
		cursor:pointer;
	}
	#mobile-menu >ul >li .menu_body li p{
		background: #fcef3f;
		padding: 5px 15px;
		font-size: 14px;		
	}
	#mobile-menu >ul >li .menu_body li a{
		color: #404040;
		display: block;
		padding: 10px 35px;
		font-size: 11pt;
		border-bottom: 1px solid #ededed;
	}
	.nav-func{
		display: block;
		position: fixed;
		right: 2.5%;
		top: 19px;
		font-size: 30px;
		color: #565656;		
	}

}
@media screen and (max-width: 1140px){
	section {
    width: 90%;
}
header #openIcon, header #cis, header #mamberIcon {
    width: 32%;
    display: inline-block;
}
}
@media screen and (max-width: 768px) {
	section , header nav section,
	.widthset02 #contentMain { width: 95%; }
	header #openIcon {position: absolute;width: auto;    z-index: 88888;}
	header #cis , footer #footerMenu .footercis , footer #footerInfo .row { width: 100%; }
	header #mamberIcon , footer #footerMenu .footerNav { display: none; }
	header nav ul { width: 80%; }
	header nav p:before , header nav ul:before { margin-top: 10px; }
	header nav .otherIcon { display: block; text-align: right; }
	#banner ul li a.photo img { width: 160%; }
	footer #footerMenu .footercis { text-align: center; }
	footer #footerInfo .row p , footer #footerInfo .row:last-child > div { text-align: center; font-size: 14px; }
	footer #footerInfo .row:last-child #footerCopy { font-size: 12px; }
	footer{
		padding-bottom:60px;
	}
}
@media screen and (max-width: 640px) {
	footer #footerCompany .row,
	footer #footerCompany .comlist, footer #footerCompany .fcontact, footer #footerCompany .footernav{
		width: 100%;
		max-width: 100%;
	}
	footer #footerCompany .row:nth-child(3){
		margin-bottom: 50px;
	}
	footer #footerCompany .row:last-child,
	footer #footerCompany .footernav li,
	#footerSet .community,
	#footerSet .info{
		text-align:center;
	}
	#footerSet .info,
	#footerSet .community{
		width:100%;
	}
	#footerSet .community{
		margin-top:20px;
	}
	.phoneWrap{
		display:block;
		position: fixed;
		bottom: 17px;
		width: 100%;
		height: 40px;
		line-height: 40px;
		z-index: 999;
	}
	.phoneWrap a{
		display: inline-block;
		color:#fff;
	}
	.phoneWrap a:hover{
		color:#fff;
	}
	.phoneWrap li{
		text-align: center;
		list-style:none;
		float:left;
		width: 97%;
		border-radius: 50px;
		margin: 0px 1.5% 40px;
		background: rgba(97, 97, 97, 0.95);
	}
	.phoneWrap li a i{
		background: rgba(0, 0, 0, 0.29);
		border-radius: 50%;
		padding: 6px;
		margin-right: 5px;
	}
	.web{
		padding-bottom:60px;
	}
#banner {
    overflow: hidden;
    position: relative;
    margin-top: 40px;
}
}
@media screen and (max-width: 480px) {
	.nav-func{
		right:5%;
	}
	.nav-funcB{
		left:5%;
	}
	#menubar #cis{
		margin-left: 0;	
	}
	#menubar .workframe{
		text-align:center;
	}
	footer #footerCompany #footer-qrcode, footer #footerCompany #footer-FB, footer #footerCompany #footer-map{
	    width: 70px;	
	}
	.web{
		font-size:6pt;
	}
	header nav p { display: none; }
	header nav ul { width: 100%; }
	#sbanner a.photo { background-attachment: initial !important; }
	header .topBar form a {padding: 2px;border-bottom: none;}
	header nav{bottom: 100%; top:inherit;
    overflow: hidden;}
	header nav.Open{bottom: inherit;}
	header nav ul li {
    width: 24%;
	}
	footer #footerInfo .row:last-child .countBox font { margin: 5px 0; margin-left: 0; display: block; }
}

@media screen and (max-width: 360px) {
	header #cis{
		width: 150px;
		margin: 0 auto;
		display: block;
	}
	header{
    height: 106px;
}
header nav.Open{
    top: 106px;
    z-index: 99999;
}
header .topBar .links{
    text-align: right;
    width: 100%;
}
header #openIcon a{
    width: 40px;
    height: 40px;
    background-size: contain;
}
}