@charset "utf-8";
/*	==========================================	*/

	/* font-size */
	.font-small { font-size:10pt; }
	.font-xsmall { font-size:11pt; }
	.font-normal { font-size:12pt; }
	.font-xnormal { font-size:13pt; }
	.font-middle { font-size:14pt; }
	.font-xmiddle { font-size:15pt; }
	.font-large { font-size:16pt; }
	.font-larger { font-size:18pt; }
	.font-largest { font-size:20pt; }
	.font-xlargest { font-size:22pt; }
	.font-xxlargest { font-size:24pt; }
	.font-xxxlargest { font-size:26pt; }
	.font-xl { font-size:30pt; }
	.font-xxl { font-size:40pt; }
	.font-xxxl { font-size:50pt; }
	.font-xxxxxl { font-size:60pt; }

	/* font-weight  */
	.font-lighter { font-weight:lighter; }
	.font-bolder { font-weight:bolder; }
	.font-bold { font-weight:bold; }
	.font-boldnone { font-weight:normal; }

	/* font-color */
	.text-white,
	.text-white a { color:#FFF; }
	.text-black,
	.text-black a { color:#000; }
	.text-dkgray,
	.text-dkgray a { color:#4d4d4d; }
	.text-dkgreen,
	.text-dkgreen a { color:#036033; }
	.text-blue,
	.text-blue a { color:#29ABE2; }
	.text-ltgreen,
	.text-ltgreen a { color:#71a99c; }

	/*  font-wordspacing */
	.word-spacing-1 { word-spacing:1px; }
	.word-spacing-2 { word-spacing:2px; }
	.word-spacing-3 { word-spacing:3px; }
	.word-spacing-4 { word-spacing:4px; }
	.word-spacing-5 { word-spacing:5px; }
	.word-spacing-6 { word-spacing:6px; }

	/* font-letterspacing */
	.letter-spacing-none { letter-spacing:initial; }
	.letter-spacing-1 { letter-spacing:1px; }
	.letter-spacing-2 { letter-spacing:2px; }
	.letter-spacing-3 { letter-spacing:3px; }
	.letter-spacing-4 { letter-spacing:4px; }
	.letter-spacing-5 { letter-spacing:5px; }
	.letter-spacing-6 { letter-spacing:6px; }
	.letter-spacing-10 { letter-spacing:10px; }

	/* font-lineheight */
	.text-lineh-22 { line-height:22px;}
	.text-lineh-25 { line-height:25px;}
	.text-lineh-28 { line-height:28px;}
	.text-lineh-30 { line-height:30px;}
	.text-lineh-35 { line-height:35px;}

	/* font-family */
	.font-pacifico { font-family: 'Pacifico', cursive; }

	/*  text-indent  */
	.text-indent-23 { text-indent: -23px;}

/*	==========================================	*/

	/*	bg	*/
	.bg-gray { background-color:#f2f2f2;}
	.bg-dkgray { background-color:#999999;}
	.bg-white { background-color:#fff;}
	.bg-dark { background-color:#000;}
	.bg-green { background-color:#22B573;}
	.bg-ltgreen { background-color:#71a99c;}

	.bg-dkorange { background-color:#F15A24; }
	.bg-blue { background:#29ABE2;}
	.bg-purple { background-color:#662D91; }
	.bg-orange { background-color:#FBB03B; }
	.bg-ltgreen { background-color:#009245; }
	.bg-ltred { background-color:#C1272D; }

/*	==========================================	*/

	/*	btn	*/
	.morebtn { background-color: #71a99c; width: 100%; border-radius: 12px; padding: 8px 0;  }

	.submitbtn { padding:5px 35px; background-color:#d7de04; border-radius: 5px; border:0;}
	.returnbtn { text-align:left; padding:5px 10px; border-radius:5px; background-color:#dade01; display:inline-block;  }

	.reportbtn { background:url(../images/05_commodity/butten_01.png) no-repeat center; width:115px; height:40px; line-height:40px;}
	.pd-sider-rebtn { padding-left:20px; width: 184px; border: 0; background:url(../images/05_commodity/befor_02.png) no-repeat left; height:42px; line-height:42px; cursor: pointer; outline:none; }
	.pd-sider-btn { padding-left:20px; background:url(../images/05_commodity/commodity_c.png) no-repeat left; height:42px; line-height:42px;}
	.pd-sider.active .pd-sider-btn { padding-left:20px; background:url(../images/05_commodity/commodity.png) no-repeat left; height:42px; line-height:42px;}

/*	==========================================	*/


	/*	display	*/
	.blocknone { display:none;}
	.block { display:block;}
	.inlineblock { display:inline-block;}
	.inlineblock-full { display:inline-block; width:100%; }

	/*	box	*/
	.box-small { width:600px; margin:0 auto;}

/*	==========================================	*/

	/*	dialog*/
	#dialog-message { position:initial;}

/*	==========================================	*/

	/*	text-align	*/
	.text-center { text-align:center;}
	.text-left {text-align:left;}
	.text-right {text-align:right;}
	.text-justify { text-align:justify;}
	.break-all { word-break:break-all;}

/*	==========================================	*/

/*	CSS3 Loading	*/
	.nodata { padding:15px; margin:15px auto; color:#F00;}
	.loadingbox { width:100%; height:100%; left:0; top:0; z-index:9999; position:fixed; /*background:url(../images/loading.gif1) center no-repeat ;*/ background:rgba(0,0,0,0.5); text-align:center; display:none;}
	.loadingbox:before { content:""; display:inline-block; height:100%; vertical-align:middle;}
	.loadingalign { vertical-align:middle; display:inline-block;}
	.spinner { margin: 100px auto 0; width: 70px; text-align: center;}
	.spinner > div { width: 18px; height: 18px; background-color: #FFF; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;}
	.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
	.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
	@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) }}
	@keyframes sk-bouncedelay { 0%, 80%, 100% {    -webkit-transform: scale(0);   transform: scale(0); } 40% {    -webkit-transform: scale(1.0);   transform: scale(1.0); }}
/*	==========================================	*/

	/*	h-tag	 */
	.title-sub { }


	.title-sub-2 { margin-bottom:15px; padding:15px 25px; border: 1px solid #fff; letter-spacing:2px;}
	.news-sub { padding-bottom:15px; border-bottom:1px solid #000;}

/*	==========================================	*/

/*	form	*/
	.label-control { font-size:12pt; color:#4d4d4d; float:left; width:55px; margin-right:10px; padding-top:13px;}
	.form-control { font-size:12pt; color:#4d4d4d; height:32px; border-radius:8px; border:0; background-color:#fff;  padding:8px 15px; margin:8px 0; width:100%; box-sizing:border-box; }
	.textarea-control{ font-size:12pt; color:#4d4d4d; padding:8px 15px; margin:8px 0; width:100%; min-height:158px; background-color:#fff; border:0; resize:none; border-radius:8px; box-sizing:border-box; }
	.select-control { font-size:12pt; color:#4d4d4d; height:34px; border-radius:8px; border:0; background-color:#fff;  padding:8px 15px; margin:8px 0; width:100%; box-sizing:border-box; }

	.code-control { border-radius:2px;  border:1px solid #DDD;  padding:8px 15px; margin:5px 15px; width:150px; box-sizing:border-box; }
	.codebox { display:inline-block; vertical-align: middle; }
	.radio-control { margin:10px;}
	.storeradio-control { width:50px; margin: 0 5px;}

	.formbox { width: 100%; padding:0 0 5px 0; }
	.formblock { width:88%; float:left;}
/*	==========================================	*/

/*	border	*/
	.border-all { border:1px solid #e4e4e4;}
	.border-left { border-left:1px solid #808080;}
	.subject-bline { border-bottom:1px solid #eeeae9;}
	.groupline-right { border-right:1px solid #808080;}
	.groupline-right:last-child { border:0;}
	.border-darkgray { border:1px solid #CCC;}
	.border-radius-50 { border-radius:50px}
/*	==========================================	*/

/*	v-margin,v-padding,v-align	*/
	.v-padding-15 { padding:15px 0;}
	.v-margin-15 { margin:15px auto;}
	.v-margin-40 { margin:40px auto;}
	.valign-middle:before { content:""; height:100%; vertical-align:middle; display:inline-block; }
	.valign-middle { vertical-align:middle; display:inline-block; }
	.vertical-bottom { vertical-align:bottom;}
	.inline-block { display:inline-block;}
	.abs-bottom { position:absolute; bottom:0; left:0; width:100%;}
	.abs { position:absolute; }
	.abs-block { width:100%; }
	.abs-lb { position:absolute; left:0; bottom:0;}
	.abs-rb { position:absolute; right:0; bottom:0;}
/*	table	*/
	.tb-cell { display:table-cell; vertical-align:middle;}
	.tb-box-50 { /*display:table-row;*/ height:50%; width:100%; position:relative;}

	.table-row { padding:15px 0;}
	.table-row:before {  content: "";  height: 100%;  display: inline-block; vertical-align: middle; }
	.table-col { display: inline-block;  vertical-align: middle;}

	.table-14 { width:14%;}
	.table-70 { width:70%;}
/*	==========================================	*/

	/*	cols	*/
	.cols-box { width:100%; }
	.cols-per-10 { float:left; width:10%; }
	.cols-per-12 { float:left; width:12%; }
	.cols-per-15 { float:left; width:15%; }
	.cols-per-20 { float:left; width:20%; }
	.cols-per-22 { float:left; width:22%; }
	.cols-per-23 { float:left; width:23%; }
	.cols-per-25 { float:left; width:25%; }
	.cols-per-30 { float:left; width:30%; }
	.cols-per-33 { float:left; width:33%; }
	.cols-per-34 { float:left; width:44%; }
	.cols-per-35 { float:left; width:35%; }
	.cols-per-40 { float:left; width:40%; }
	.cols-per-41 { float:left; width:41%; }
	.cols-per-44 { float:left; width:44%; }
	.cols-per-45 { float:left; width:45%; }
	.cols-per-48 { float:left; width:48%; }
	.cols-per-49 { float:left; width:49%; }
	.cols-per-50 { float:left; width:50%; }
	.cols-per-55 { float:left; width:55%; }
	.cols-per-52 { float:left; width:52%; }
	.cols-per-60 { float:left; width:60%; }
	.cols-per-63 { float:left; width:63%; }
	.cols-per-65 { float:left; width:65%; }
	.cols-per-70 { float:left; width:70%; }
	.cols-per-75 { float:left; width:75%; }
	.cols-per-77 { float:left; width:77%; }
	.cols-per-78 { float:left; width:78%; }
	.cols-per-80 { float:left; width:80%; }
	.cols-per-85 { float:left; width:85%; }
	.cols-per-88 { float:left; width:88%; }
	.cols-per-90 { float:left; width:90%; }

	/*	table	*/
	.table-box { display:table; width:100%;}
	.table-h100 { height:100%;}
	.table-per-100 { display:table-cell; width:100%; vertical-align:middle; }
	.table-per-70 { display:table-cell; width:70%; vertical-align:middle; }
	.table-per-60 { display:table-cell; width:60%; vertical-align:middle; }
	.table-per-55 { display:table-cell; width:55%; vertical-align:middle; }
	.table-per-50 { display:table-cell; width:50%; vertical-align:middle; }
	.table-per-45 { display:table-cell; width:45%; vertical-align:middle; }
	.table-per-40 { display:table-cell; width:40%; vertical-align:middle; }
	.table-per-30 { display:table-cell; width:30%; vertical-align:middle; }

/*	==========================================	*/

/*	float-box	*/
	.float-left { float:left;}
	.float-right{ float:right;}
	.margin-auto { margin:0 auto;}

	.padding-l-140 { padding:0 140px 0 0;}
	.padding-l-100 { padding:0 100px 0 0;}
	.padding-lr-80 { padding:0 80px; }
	.padding-r-80 { padding:0 0 0 80px;}
	.margin-t-60 { margin:60px 0 0 0; }
	.margin-b-60 { margin:0 0 60px 0; }
	.margin-t-60 { margin:60px 0 0 0; }
	.padding-t-50 { padding:50px 0 0 0; }
	.margin-tb-50 { padding:50px 0; }
	.padding-tb-50 { padding:50px 0; }
	.padding-r-50 { padding:0 0 0 50px; }
	.padding-b-50 { padding:0 0 50px 0; }

	.margin-full-40 { margin:40px; }
	.margin-tb-40 { margin:40px 0; }
	.margin-lr-40 { margin:0 40px; }
	.margin-l-40 { margin:0 40px 0 0; }
	.margin-r-40 { margin:0 0 0 40px; }
	.margin-b-40 { margin:0 0 40px 0; }
	.margin-t-40 { margin:40px 0 0 0; }

	.padding-full-30 { padding:30px; }
	.padding-tb-30 { padding:30px 0; }
	.padding-lr-30 { padding:0 30px; }
	.padding-l-30 { padding:0 30px 0 0; }
	.padding-r-30 { padding:0 0 0 30px; }
	.padding-b-30 { padding:0 0 30px 0; }
	.padding-t-30 { padding:30px0 0 0; }

	.margin-full-30 { margin:30px; }
	.margin-tb-30 { margin:30px 0; }
	.margin-lr-30 { margin:0 30px; }
	.margin-l-30 { margin:0 30px 0 0; }
	.margin-r-30 { margin:0 0 0 30px; }
	.margin-b-30 { margin:0 0 30px 0; }
	.margin-t-30 { margin:30px 0 0 0; }

	.padding-full-20 { padding:20px; }
	.padding-tb-20 { padding:20px 0; }
	.padding-lr-20 { padding:0 20px; }
	.padding-l-20 { padding:0 20px 0 0; }
	.padding-r-20 { padding:0 0 0 20px; }
	.padding-b-20 { padding:0 0 20px 0; }
	.padding-t-20 { padding:20px 0 0 0; }

	.margin-full-20 { margin:20px; }
	.margin-tb-20 { margin:20px 0; }
	.margin-lr-20 { margin:0 20px; }
	.margin-l-20 { margin:0 20px 0 0; }
	.margin-r-20 { margin:0 0 0 20px; }
	.margin-b-20 { margin:0 0 20px 0; }
	.margin-t-20 { margin:20px 0 0 0; }

	.padding-full-15 { padding:15px; }
	.padding-tb-15 { padding:15px 0; }
	.padding-lr-15 { padding:0 15px; }
	.padding-l-15 { padding:0 15px 0 0; }
	.padding-r-15 { padding:0 0 0 15px; }
	.padding-b-15 { padding:0 0 15px 0; }
	.padding-t-15 { padding:15px 0 0 0; }

	.margin-full-15 { margin:15px; }
	.margin-tb-15 { margin:15px 0; }
	.margin-lr-15 { margin:0 15px;}
	.margin-l-15 { margin:0 15px 0 0; }
	.margin-r-15 { margin:0 0 0 15px; }
	.margin-b-15 { margin:0 0 15px 0; }
	.margin-t-15 { margin:15px 0 0 0; }

	.margin-full-10 { margin:10px; }
	.margin-tb-10 { margin:10px 0; }
	.margin-lr-10 { margin:0 10px; }
	.margin-l-10 { margin:0 10px 0 0; }
	.margin-r-10 { margin:0 0 0 10px; }
	.margin-b-10 { margin:0 0 10px 0; }
	.margin-t-10 { margin:10px 0 0 0; }

	.padding-full-10 { padding:10px; }
	.padding-tb-10 { padding:10px 0; }
	.padding-lr-10 { padding:0 10px; }
	.padding-l-10 { padding:0 10px 0 0; }
	.padding-r-10 { padding:0 0 0 10px; }
	.padding-b-10 { padding:0 0 10px 0; }
	.padding-t-10 { padding:10px 0 0 0; }

	.padding-full-5 { padding:5px; }
	.padding-tb-5 { padding:5px 0; }
	.padding-lr-5 { padding:0 5px; }
	.padding-l-5 { padding:0 5px 0 0; }
	.padding-r-5 { padding:0 0 0 5px; }
	.padding-b-5 { padding:0 0 5px 0 ; }
	.padding-t-5 { padding:5px 0 0 0 ; }

	.margin-full-5 { margin:5px; }
	.margin-lr-5 { margin:0 5px; }
	.margin-tb-5 { margin:5px 0; }
	.margin-l-5 { margin:0 5px 0 0; }
	.margin-r-5 { margin:0 0 0 5px; }
	.margin-b-5 { margin:0 0 5px 0; }
	.margin-t-5 { margin:5px 0 0 0; }

	.nopadding { padding:0; }
	.outline-dashed { position:relative; padding-bottom:15px;}
	.outline-dashed:before { content:""; border-bottom:1.5px dashed #0F82C5; display:block; width:185%; position:absolute; bottom:0; left:-100%;}
	.outline-dashed.insideimg:after { content:""; width:95px; height:56px; background:url(../images/index/btm_02.png) center no-repeat; display:block; position:absolute; bottom:0; left:-90%;
								-webkit-transition: all 0.52s ease;
								 	 -moz-transition: all 0.52s ease;
												transition: all 0.52s ease;	}
	.outline-dashed.insideimg.in:after { left:85%;
								-webkit-transition: all 0.52s ease;
								 	 -moz-transition: all 0.52s ease;
												transition: all 0.52s ease;	}

/*	==========================================	*/

	/* 頁碼 */

	.cookiebox { margin:20px 0;}
	.cookie li { float:left; }
	.cookie a,.cookie { color:#4d4d4d; font-size:10pt;}
	.cookie li:after { content:"/"; padding:0 3px; display:inline-block; }
	.cookie li:last-child:after  { content:"";}
	.cookie li.active a,.cookie li:hover a { color:#4d4d4d;}

	.pager { text-align:center; margin:25px 0;}
	.pager a { display:block; padding:2px 7px; color:#000; font-size:10pt; line-height:20px; border-radius:3px; }
	.pager li { display:inline-block; margin:0 2px; color:#979797; }
	.pager li:hover a,.pager li.active a { color:#ddd; background-color:#066136; }

/*	==========================================	*/

	/* overflowhidden  */

	.overflow-hidden-49 { overflow:hidden; height:49px; }
	.overflow-hidden-60 { overflow:hidden; height:60px; }
	.overflow-hidden-70 { overflow:hidden; height:70px; }
	.overflow-hidden-80 { overflow:hidden; height:80px; }
	.overflow-hidden-gray150 { overflow:hidden; height:150px; }
	[class*="overflow-hidden-"]:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:20%;
		background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 66%, rgba(255,255,255,1) 100%);
		background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 66%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 66%,rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=0 );
	}
	[class*="overflow-hidden-gray"]:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:20%;
		background: -moz-linear-gradient(top,  rgba(242,242,242,0) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 100%);
		background: -webkit-linear-gradient(top,  rgba(242,242,242,0) 0%,rgba(242,242,242,1) 66%,rgba(242,242,242,1) 100%);
		background: linear-gradient(to bottom,  rgba(242,242,242,0) 0%,rgba(242,242,242,1) 66%,rgba(242,242,242,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#f2f2f2',GradientType=0 );
	}

/*	==========================================	*/

	/* 效果 */

	/* 左右兩邊圖片飛進 文字顯現 */
	.fadin-list li img { opacity: 0; margin-left:-100px; }
	.fadin-list li:nth-child(even) img { opacity: 0; margin-left:100px;}

	.fadin-list li.active img { opacity: 1; margin-left:0;
								-webkit-transition: all 0.52s ease;
								 	 -moz-transition: all 0.52s ease;
												transition: all 0.52s ease;
	}

	.fadin-list li .opabox { opacity: 0; }
	.fadin-list li.active .opabox { opacity:1;
								-webkit-transition: all 0.52s ease;
								 	 -moz-transition: all 0.52s ease;
												transition: all 0.52s ease;
	}

	/* keyframes  */

	/* 搖擺 */
	.swing:hover ,.swing.active {
		-webkit-animation:swinghover 10s ease-in-out 0s infinite;
    -moz-animation:swinghover 10s ease-in-out 0s infinite;
    animation:swinghover 10s ease-in-out 0s infinite;
    -webkit-transform-origin:50% 100%;
    -moz-transform-origin:50% 100%;
    transform-origin:50% 100%;
	}
	@-webkit-keyframes swinghover{
    0% { -webkit-transform: rotate(0) scale(1);}
    5% { -webkit-transform: rotate(10deg);}
    10% { -webkit-transform: rotate(-9deg);}
    15% { -webkit-transform: rotate(8deg); }
    20% { -webkit-transform: rotate(-7deg); }
    25% { -webkit-transform: rotate(6deg); }
    30% { -webkit-transform: rotate(-5deg); }
    35% { -webkit-transform: rotate(4deg); }
    40% { -webkit-transform: rotate(-3deg); }
    45% { -webkit-transform: rotate(2deg); }
    50% { -webkit-transform: rotate(0); }
	}

	/* 跳動 */
	.jumping:hover img {
		-webkit-animation:jumpinghover 1s ease-in-out 0s infinite;
    -moz-animation:jumpinghover 1s ease-in-out 0s infinite;
    animation:jumpinghover 1s ease-in-out 0s infinite;
	}
	@-webkit-keyframes jumpinghover{
	  0%{ top:-2px; }
	  50%{ top:1px; }
	  100%{top:-2px; }
	}

	/* 放大縮小 */
	li:hover .zooming {
						-webkit-transform:scale(1.2);
							 -moz-transform:scale(1.2);
								-ms-transform:scale(1.2);
								 -o-transform:scale(1.2);
									  transform:scale(1.2);
			-webkit-transition: all 0.52s ease;
			 	 -moz-transition: all 0.52s ease;
							transition: all 0.52s ease;
							transform-origin: 50% 50%;

/*	==========================================	*/