/*

 * iweb51-style05

 *

 * Copyright 2015, TANK

 * 

 * 

 * 2015 / 7 / 17

 */





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

 [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: #56534e;

	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 {

	border-top:1px #000 solid;

	margin:0 0 10px 0;

}



th {

	font-weight: normal;

}



ul, ol {

	list-style: none;

}



p.lineHeight {

	line-height:170%;

}

p.marginTop {

	margin:10px 0;

}

p.marginLeft {

	margin: 0 10px;

}



input,button,select,textarea {

	outline:none

}

img{

    width: 100%;

}



/**

*

* =anchor

*

**/



a:link, a:visited, a:link, a:visited a {

	color: #56534e;

	font-weight: normal;

	text-decoration: none;

	-webkit-transition: all 0.2s ease-in;

	transition: all 0.2s ease-in;
	
}



a:hover {

	color: #900;

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







.phonewrap{box-sizing: border-box; transition: ease .3s; display: block; width: 100px;height: 100px;border-radius: 50%; position: fixed;bottom: 120px;right: 10px;padding: 5px 0px;background: #ff8100;box-shadow: 0px 2px 4px 0px #808080; text-align: center;color: #fff !important;}

.phonewrap:hover{background: #ff3b00;}

.phonewrap a{ display: inline-block; width: 85px;color: #fff;font-size: 30px;line-height: 40px;}



/*內頁註冊鈕*/

.content-main .ask{

	overflow: hidden;

    text-align: right;

}

.content-main .ask a{

	padding: 10px;

    display: block;

    vertical-align: middle;

    background: #ff8100;

    color: #fff;

    font-size: 18px;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    -moz-osx-font-smoothing: grayscale;

    position: relative;

    padding-right: 2.2em;

    -webkit-transition-duration: 0.3s;

    transition-duration: 0.3s;

    text-align: center;

    margin-top: 15px;

}







/* +body

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

.wrapper {

	width: 100%;

	overflow: hidden;

	position: relative;

}



.wrapper section {

	overflow: hidden;

	margin: 0 auto;

}





.wrapper .banner li{background: no-repeat 50% / cover;}





/**

*

* =jumpDiv

*

**/

/* + 跳一  跳三

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

#jumpDiv ,

#jumpIframe {

	position: relative;

	background: #fff;

	top: 0;

	left: 0;

	z-index: 50;

}



/* +header

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

.wrapper header {

	width: 100%;

}



.wrapper header section #cis {width: 240px;margin: auto;}



.wrapper header section nav {

	margin: 0 15px;

}



.wrapper header section nav ul.menu {

	display: none;

}



.wrapper header section nav ul.menu li ul.subnav {

    position: absolute;

    background: #8BC34A;

    z-index: 9999;

    box-sizing: initial;

    height: auto;



    

}



.wrapper header section nav ul.menu li ul.subnav li p {

	padding: 0 20px;

	height: 45px;

	display: block;

	line-height: 45px;

	font-size: 16px;

	color: #fff;

	font-weight: bold;

}



.wrapper header section nav ul.menu li ul.subnav li ul.subOption {

	padding: 10px 0;

	background: #414242;

}



.wrapper header section nav ul.menu li ul.subnav li {

	float: none;

	border: 0;

	display: block;

	width: 100%;

	transition: .3s ease;

}

.wrapper header section nav ul.menu li ul.subnav li:hover{

	background: #000000c9;

}



#m-nav .nav a:hover {

	color: #d0d0d0;

}

#m-nav .nav .current a {

	background: url(../../images/05/main/menu.png) no-repeat 10px 10px;

	color: #fff;

	border-radius: 5px;

}





/* +gotop

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

.wrapper #gotop {

	display: none;

	position: fixed;

	bottom: 40px;

	right: 10px;

	width: 43px;

	height: 43px;

	background: url(../../images/02/all/totop.png) no-repeat 0 0;

	text-indent: -100000px;

	filter: alpha(opacity=40);

	-moz-opacity: 0.4;

	-khtml-opacity: 0.4;

	cursor: pointer;

	z-index: 200;

}



.wrapper #gotop:hover {

	background-position: -43px 0;

}





/* +line

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

.wrapper .line {

	position: fixed;

	right: 20px;

	top: 50%;

	display: block;

	z-index: 100000;

}



/* +footer

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

.wrapper footer {

	overflow: hidden;

	padding: 20px 0;

	background: #f2f2f2;

}

.wrapper footer section ul.menu{

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

}

.wrapper footer section ul.menu li{

	padding: 0 10px;

}

.wrapper footer section .information {

	float: left;

	width: 60%;

}



.wrapper footer section .information h3 {

	margin: 10px 0;

	font-size: 20px;

	color: #625D5D;

}



.wrapper footer section .information ul {

	margin: 20px 0;

}



.wrapper footer section .information ul li {

	margin: 5px 0;

}



.wrapper footer section #fb-plugin {

	float: right;

	width: 35%;

}



#ssbanner .bxslider a{display: block;background-size: contain;background-repeat: no-repeat;}











/**********適應性**********/

/************************/

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

	.wrapper section {

		width: 90%;

		padding: 0 10px;

	}

	#m-nav .nav {

		position: absolute;

		margin: 20px 0;

		width: 100%;

		min-height: 40px;

		z-index: 999;

	}	

	#m-nav .nav ul {

		width: 80%;

		padding: 5px 0;

		position: absolute;

		top: 0;

		left: 0;

		background: #6EB418;

		box-shadow: 1px 18px 10px -10px #848282;

	}

	#m-nav .nav li {

		display: none;

		margin: 0;

	}

	#m-nav .nav .current {

		display: block;

	}

	#m-nav .nav a {

		display: block;

		padding: 5px 5px 5px 32px;

		color: #fff;

		text-align: left;

	}

	#m-nav .nav .current a {

		color: #fff;

	}

	#m-nav .nav .current:hover a{

		color: #fff;

	}

	

	#m-nav .nav ul li.open {

		display: block;

		padding: 5px 0;

		border-bottom: 1px solid #569a03;

	}

	

	#m-nav .nav ul li + li:hover {

		background: #ff8814;

	}

	

	#m-nav .nav ul:hover li:hover a:hover {

		

	}



	.wrapper .banner {

		margin: 80px 0 0;

	}

	.wrapper footer section .information ,

	.wrapper footer section #fb-plugin {

		float: left;

		width: 100%;

	}

	

}



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

	.wrapper footer section .information ,

	.wrapper footer section #fb-plugin {

		float: left;

		width: 50%;

	}

}



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

	.wrapper #gotop,.phonewrap{right: 65px;}

	.wrapper header section{display: flex;align-items: center; overflow: unset;}

	.wrapper section {

		width: 1024px;

	}

	.wrapper header section nav {

		margin: 0;

	    display: inline-block;

	    width: calc(100% - 115px);

	    box-sizing: border-box;

	    padding-left: 15px;

	}

	

	.wrapper .banner {

		margin: 0;

	}

	

	.wrapper header section nav ul.menu {

		display: block;

	}

	

	.wrapper header section nav ul.menu li {

		position: relative;

		display: inline-block;

		text-align: center;

		width: 12%;

		height: 70px;

		line-height: 70px;

	}

	.wrapper header section nav ul.menu > li:last-child{

		background: #f39800;

	}

	.wrapper header section nav ul.menu > li:last-child:hover{

		background: #ffae00;

	}

	.wrapper header section nav ul.menu > li:last-child a{color: #fff;}

	.wrapper header section nav ul.menu > li:last-child:hover a{color: #fff;}

	.wrapper header section nav ul.menu li a {

		height: 70px;

		width: 100%;

		line-height: 70px;

		font-size: 15px;

		color: #000;

		font-weight: bold;

		display: inline-block;

		vertical-align: middle;

		-webkit-transform: translateZ(0);

		transform: translateZ(0);

		box-shadow: 0 0 1px rgba(0, 0, 0, 0);

		-webkit-backface-visibility: hidden;

		backface-visibility: hidden;

		-moz-osx-font-smoothing: grayscale;

		position: relative;

		overflow: hidden;

		-webkit-transition-property: color;

		transition-property: color;

		-webkit-transition-duration: 0.3s;

		transition-duration: 0.3s;

	}

	

	.wrapper header section nav ul.menu li ul.subnav li a {

		width: 80px;

		box-sizing: initial;

		color: #fff;

	}

	

	.wrapper header section nav ul.menu li ul.subnav{

		display: none;

		position: absolute;

		left: 0px;

		width: 100%;

		background: #2d2d2dc4;

	}

	.wrapper header section nav ul.menu li:hover ul.subnav{ display: block; }

	.wrapper header section nav ul.menu li ul.subnav li ul.subOption li a {

		background: #414242;

	}

	

	.wrapper header section nav ul.menu li a:before {

		content: "";

		position: absolute;

		z-index: -1;

		top: 0;

		left: 0;

		right: 0;

		bottom: 0;

		border-radius: 100%;

		-webkit-transform: scale(0);

		transform: scale(0);

		-webkit-transition-property: transform;

		transition-property: transform;

		-webkit-transition-duration: 0.3s;

		transition-duration: 0.3s;

		-webkit-transition-timing-function: ease-out;

		transition-timing-function: ease-out;

	}

	

	.wrapper header section nav ul.menu li a:hover ,

	.wrapper header section nav ul.menu li a:focus ,

	.wrapper header section nav ul.menu li a:active {

		color: #000;

	}

	.wrapper header section nav ul.menu li a:hover:before ,

	.wrapper header section nav ul.menu li a:focus:before ,

	.wrapper header section nav ul.menu li a:active:before {

		-webkit-transform: scale(2);

		transform: scale(2);

	}

	

	.wrapper header section nav #m-nav {

		display: none;

	}

	

	.wrapper .line {

		display: none;

	}

	.wrapper footer section .information {

		float: left;

		width: 60%;

	}

	

	.wrapper footer section #fb-plugin {

		float: right;

		width: 35%;

	}

}



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

	.wrapper footer{padding: 20px 0 35px;}

	

}

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

	.wrapper section{width: 95%;}

	.phonewrap{width: 70px;height: 70px;}

	.phonewrap a{color: #fff;font-size: 22px;line-height: 28px;width: 65px;}



}

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

	#ssbanner .bxslider{display: flex;flex-wrap: wrap;}

	#ssbanner .bxslider a{width: 45%;background-position: center;margin: 10px 10px;}

	

}

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

	#ssbanner .bxslider a{width: 100%;}

}