/*
 * w257-1 - dul iweb22-style12
 * http://dul.com.tw
 *
 * Copyright 2014, Evelyn Wang
 * 
 * 
 * March 2014
 */


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

* {
    margin: 0;
    padding: 0;
}

body {
	margin:0;
	color: #3d3d3d;
	font-size: 14px;
}

div, h1, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, img, span, ul, li {
	text-align: left;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	word-wrap: normal;
	word-break: normal;
	border-width: 0;
	font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow";
}

hr {
	noshade:noshade;
}

th {
	font-weight: normal;
}

ul, li {
	list-style: none;
}

/**
*
* =anchor
*
**/

a:link, a:visited, a:link, a:visited a {
	color: #3d3d3d;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/**
*
* =clear,clearfix
*
**/

/* regular clearing apply to column that should drop below previous ones. */
.clear {
    clear: both;
}

/* this needs to be first because FF3 is now supporting this */
.clearfix {
    display: inline-block;
}

/* clearing floats without extra markup */
.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    content: ".";
}

/* hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* end hide from IE-mac */

.banner {background: linear-gradient(to bottom,#00241a 0%,#013020 20%,#014d2e 40%,#026c41 60%,#0b7d4d 80%,#1a9e62 100%);}
.banner .silderShow .silderImg a {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

img{max-width: 100%;}
.pageh1 {
    position: absolute;
    top: -100%;
    z-index: 1;
    opacity: 0;
    color: #fff;
}

.float-joinbtn{
	position: fixed;
    right: 60px;
    bottom: 160px;
}
.float-joinbtn a{
	position: relative;
	display: inline-block;
    padding: 12px 0px;
    background: linear-gradient(to bottom, #ff9000 0%,#e48407 100%);
    transform: skewX(-14deg);
    color: #fff;
    font-size: 18px;
    width: 150px;
    box-shadow: -1px 1px 5px #c3c3c3;
    padding-left: 30px;
    transition: ease .3s;
}
.float-joinbtn a:hover{
	background: linear-gradient(to bottom, #1ebf8c 0%,#1db585 100%);
}
.float-joinbtn a::before{
	content: "";
    position: absolute;
    right: 24px;
    bottom: 22px;
    width: 15px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
    animation: arrow-ani-before infinite 2s;
}
.float-joinbtn a::after{
    content: "";
    position: absolute;
    right: 25px;
    bottom: 16px;
    width: 40px;
    height: 2px;
    background: #fff;
    animation: arrow-ani infinite 2s;
}
@keyframes arrow-ani-before{
	0%{
		right: 24px;
	}
	50%{
		right: 14px;
	}
	100%{
		right: 24px;
	}
}
@keyframes arrow-ani{
	0%{
		right: 25px;
	}
	50%{
		right: 15px;
	}
	100%{
		right: 25px;
	}
}


/* +body
*----------------------------------------------------------------------------*/
.wrapbox{margin: 0; padding: 0; border: 0; width: 100%;overflow: hidden;}
.wrapper {
	overflow: hidden;
	text-align: center;
}

.text-clamp{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
/* +body
*----------------------------------------------------------------------------*/
.wrapper #header {
	width: 100%;
	text-align: center;
}

.wrapper #header .headWrap {
	margin: 0 auto;
	width: 960px;
	overflow: hidden;
}


#cis a img{
	width: 250px;
}
/**
*
* =navbar
*
**/
.wrapper #header .headWrap .navBar {
	float: right;
}

.btn{
	display: inline-block;
    padding: 5px 11px;
    border-radius: 5px;
    
}
.btn.join{
	background: linear-gradient(to bottom, #ff9000 0%,#e48407 100%);
	box-shadow:0 2px #8a5702;
	margin: 0 5px;
}
.btn.login{
	background: linear-gradient(to bottom, #1ebf8c 0%,#1db585 100%);
	box-shadow: 0 2px #0f503c;
}
.topNav ul li a.btn{padding:5px 8px }
/**
*
* =topnav
*
**/
.topNav {background: #14815e;}
.topNav ul{display: flex;justify-content: flex-end;padding: 7px 0px;}
.topNav ul li a{
	display: inline-block;
    padding: 5px 5px;
    margin: 0 0px;
    color: #fff;
}

/*nav*/
.nav-content{display: flex;align-items: center;}
.nav-content #cis{margin: 20px 40px 20px 0;}
#nav ul{display: flex;align-items: center;}
#nav ul li{}
#nav ul li a{margin-right:30px;display: inline-block;position: relative;font-size: 16px;}
#nav ul li a::after{content: "";position: absolute;left: 50%;bottom: -10px;transform: translateX(-50%);width: 0%;height: 4px;background: linear-gradient(90deg, #f5b479 20.37144%, #f5bf8e 20.37144%, #f3a865 80.373%);transition: .3s;}
#nav ul li a:hover::after{width: 100%;}

/*menubtn*/
#Menubtn{display: none;position: absolute;right: 5%;top: 70px;width: 30px;cursor: pointer;}
#Menubtn .line{display: flex;flex-wrap: wrap;}
#Menubtn .line span{display: block; width: 100%;height: 2px;background: #000;}
#Menubtn .line span:nth-child(2){margin: 9px 0px}
/*mobile-nav*/
#mobile-nav{
	display: none;
	width: 380px;
    position: absolute;
    right: 0px;
    z-index: 99999;
    top: 110px;
    background: #fff;
   
    transition: .3s;
}
#mobile-nav ul{padding: 20px 30px;}
#mobile-nav ul li{padding: 10px 0px;border-bottom: 1px solid #eee;}
#mobile-nav ul li a{font-size: 16px;}
/*banner*/
.banner .slick-slider{margin-bottom: 0px;}
.banner .slick-dots li.slick-active button:before{color: #f39800}
.banner .slick-dots{bottom: 10px;display: none;}

/*webseo*/
#webSeo{
	    background: rgba(43, 43, 43, 0.7);
    padding: 10px 0px;
    margin-top: -42px;
    position: relative;
    z-index: 10;
}
#webSeo .container{display: flex;}
#webSeo .container .mqicon{width: 5% ;text-align: center;}
#webSeo .container .seo{width: 95%;color: #fff;overflow: hidden;}
/* +content
*----------------------------------------------------------------------------*/
.wrapper .content,.container {
	margin: 0 auto;
	width: 1120px;
	overflow: hidden;
	text-align: center;
}


.wrapper .content .wrap .sidebar #functionNav .fbPlus a img{
	width:200px;
	margin:10px 0 0 0;
}
.wrapper .content .wrap .sidebar .sideAD ul li a img{
	width:200px;
}


/* +footer
*----------------------------------------------------------------------------*/
.wrapper #footer {
	margin: 30px 0 0;
	width: 100%;
	overflow: hidden;
	background: #242424;
	text-align: center;
}

.wrapper #footer .footerWrap {
	margin: 0 auto;
	width: 960px;
}

.wrapper #footer .footerWrap p {
	margin: 20px 0;
	text-align: center;
	color: #fff;
}

.wrapper #footer .footerWrap #footerNav {
	margin: 10px 0;
	width: 960px;
	text-align: center;
}

.wrapper #footer .footerWrap .info ,
.wrapper #footer .footerWrap .info div ,
.wrapper #footer .footerWrap .info p {
	width: 960px;
	text-align: center;
	color: #fff;
}

.wrapper #footer .footerWrap .info {
	margin: 0 0 20px;
}

.wrapper #footer .footerWrap .info div ,
.wrapper #footer .footerWrap .info p {
	margin: 0 0 5px;
}

.wrapper #footer .copy {
	padding: 10px 0;
	width: 100%;
	background: #393939;
	text-align: center;
	font-size: 12px;
	color: #fff;
}
.wrapper .content .wrap .contentMain .photoList ,
.wrapper .content .wrap .contentMain .photoList ul {
	overflow:hidden;
}

.wrapper .content .wrap .contentMain .photoList ul li{
	width:160px;
	height:160px;
	float: left;
	margin:10px;
	
}

.wrapper .content .wrap .contentMain .photoList ul li a #productImage{
	width:160px;
	height:160px;
	
	
}

#footerNav .nav-list ul{display: flex;justify-content: center;}
#footerNav .nav-list ul li{
    padding: 0 10px;
    width: 15%;
    text-align: center;
}
#footerNav .nav-list ul li a{color: #808080;}
.brandImg {
	background: url(/images/12/footerbrand.png) no-repeat center;
    background-size: auto 100%;
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #484848;
}
@media screen and (max-width: 1440px){
	.float-joinbtn{right: 20px;}
}
@media screen and (max-width: 1280px){
	.float-joinbtn{bottom: 80px;}
}
@media screen and (max-width: 1140px){
	.wrapper .content, .container,.wrapper #footer .footerWrap{width: 90%;margin: 0 auto;}
	 .wrapper #footer .footerWrap #footerNav{width: 100%;margin: 0 auto;padding: 15px 0px;}
}
@media screen and (max-width: 1024px){
	.navBar #nav{display: none;}
	#Menubtn{display: block;}
	#mobile-nav.active{display: block;}
}
@media screen and (max-width: 768px){
	.float-joinbtn{
	    display:none;
		bottom: 10px;
    	right: auto;
    	left: 50%;
    	transform: translateX(-50%);
	}
	.wrapper #footer .copy{padding-bottom: 60px;}

	#webSeo .container .mqicon{width: 10%;}
	#webSeo .container .seo{width: 90%;}
	#webSeo{margin-top: 0px;background: #000;}
	#footerNav .nav-list ul li{width: 25%;}
}
@media screen and (max-width: 640px){
	.brandImg{display: none;}
	#footerNav .nav-list ul {flex-wrap: wrap;}
	#footerNav .nav-list ul li{width: 45%;padding: 0px;}
}
@media screen and (max-width: 480px){
	#webSeo .container{align-items: center;}
	#webSeo .container .seo .js-marquee{font-size: 8px !important;}
}
@media screen and (max-width: 414px){
	#mobile-nav{width: 300px;}
	#mobile-nav ul{padding: 20px 25px;}
}
@media screen and (max-width: 370px){
	.topNav ul li:nth-child(1),
	.topNav ul li:nth-child(2){display: none;}
}