@charset "utf-8";
/* CSS Document */


.pagewrap {width: 980px;max-width: 96%;margin: 0 auto;}
.wrapper {overflow: hidden;}

/************************************************************************************
COLUMN
*************************************************************************************/
.col {float: left;margin-left: 3.2%;margin-bottom: 30px;}
.fullwidth .col {float: none;margin-left: 0;}
.full-padding{ padding:15px;}

/* grid4 col */
.grid4 .col {width: 22.6%;}

/* grid3 col */
.grid3 .col {width: 31.2%;}

/* grid2 col */
.grid2 .col {width: 48.4%;}

/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
	margin-left: 0;
	clear: left;
}


/*頭部樣式*/
.head-col{ padding-top:15px; margin-bottom:15px;}


/*語言選擇*/
.lan_drop{ font-size:12px; line-height:24px; }
.lan_drop > a{ display:block; float:left; width:70px;height:24px; line-height:24px;border:1px solid #ccc; border-radius:3px; color:#999;}
.lan_drop > a >span{ display:block; float:left; margin-right:5px;}
.lan_drop2{ top:24px; left:0px; min-width:70px;}
.lan_drop2 > li > a  { display:block; height:24px; font-size:12px; padding:5px 0; color:#999; font-weight:bold;}
.lan_drop2 > li > a span{ display:block; float:left; margin-right:3px; line-height:24px;}

.head-a1{display:block;margin-left:10px;line-height:24px;font-weight:bold;font-size:.75em;}
.head-p1{ font-size:.75em; line-height:28px;  margin-top:10px;}
.head-p1 strong{ text-decoration:underline;}

.icons-setting{ display:none; width:40px; height:40px;}
.icons-setting img{ width:100%;}

.head-logo{ display:block; width:100%;}
.head-logo img{ width:100%;}

.icons-shop{ display:none; width:50px; height:50px; position:relative;}
.icons-shop img{ width:100%;}
.icons-num{ display:block; width:35px; height:35px; background:url(../images/icons_03.png) no-repeat; color:#fff; text-align:center; line-height:32px; position:absolute; top:-10px; right:-15px; font-size:.5em;}

.head-right {font-size:.75em;text-align:right;font-weight:bold;}
.head-right a {display:block;float:left;padding:0px 5px;line-height:26px;}
.m-right{ float:right;}
.head-search{ width:200px; /*height:70px;*/ position:relative; float:right;}
.top-search {display:block;width:170px;height:25px;border-radius:15px;outline:none;border:1px solid #ccc;line-height:25px\9;margin-top:10px;font-family:Futura-Book; padding:0px 0 2px 8px; }
.search-icon {position:absolute;z-index:2;top:13px;right:2px;}


.m-footer {width:100%;margin:15px auto;font-size:12px;text-align:center;}
.foot-content {display:block;margin:0 auto;width:100%;height:auto; overflow:hidden; text-align:center;}
/*.m-footer .ul2 {display:block;margin:0 auto;width:100%;height:20px;	}
*/
.foot-content span{padding:15px 0;color:#000; line-height:24px;	}
.foot-content a {color:#000;padding:15px 5px; line-height:24px;	}
.m-footer h2 {width:100%;font-size:20px;margin:10px auto; text-align:center;}
.red {color:#F00;}
.red2 {color:#d80123;}
.foot_logo {width:100%;margin:20px auto 0;}


/* nav_menu */

.nav{width:100%; height: auto; font-size:14px;position:relative;margin:0 auto;  }
.nav .list{width:85%;min-height:42px; padding-left:15%; border-bottom:10px solid #000;}
.nav .list li{float:left;}
.nav .list a{float:left;display:block; padding:10px 15px;text-align:center;font:bold 13px/36px Futura-Book;color:#000;}
.nav .list a:hover{color:#FFA304;}
.nav .list a:hover,.nav .list .now{color:#F00;background:#fff;}

.nav .box{position:absolute;left:0px;top:52px;width:100%; height:auto; overflow:hidden;background:#FFF;border-bottom:1px solid #000;  border-left:1px solid #000;border-right:1px solid #000;}
.nav .cont{position:relative; height:auto; overflow:hidden;padding:15px 0 0px 15px; background:#fff; }
/* sublist2 */
.sublist2 li{float:left;width:22%;padding-right:2.5%;padding-bottom:24px; min-height:100px;}
.sublist2 li h3.mcate-item-hd{font-family:Futura-Book;padding-left:2px;font-size:14px;height:26px;line-height:26px;border-bottom:1px dashed #666666;}
.sublist2 li p.mcate-item-bd{padding-left:2px;}
.sublist2 li p.mcate-item-bd a{height:26px;line-height:26px;margin-right:5px;font-size:12px;color:#666666;text-decoration:none;display:inline-block;}
.sublist2 li p.mcate-item-bd a:hover{color:#6c5143;text-decoration:underline;}


.icon_i{ padding-right:3%;}
.newslist{ width:100%; height:auto; overflow:hidden;}
.newslist li a{color:#858585; display:block;padding:15px 5px 30px 10px; }
.newslist li a span{position:absolute;left:40px;}
/*.newslist li:last-child{border-bottom:0;}*/
.newslist li a, .newslist li a i, .newslist li a span{ display:block;}
.newslist li{position:relative;font-size:1.125em;border-bottom:2px #747474 groove;  }
/*.newslist li a i{ padding-top:1%;}*/

.m-catory{ width:100%; height:auto; overflow:hidden; padding:3% 0;}
.m-catory a{ color:#000; border-bottom:1px solid #ccc; display:block; width:95%; margin-right:5%; padding-bottom:5px;}

.m-catory a:nth-of-type(4n+1) { width:100%; margin-right:0;}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

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

.nav .list{width:100%;min-height:42px; padding-left:0; border-bottom:10px solid #000;}

}
/* reset cols to 3-column */
@media screen and (max-width: 768px) {
	/* grid4 */
	.grid4 .col {width: 31.2%;}
	.grid4 .col:nth-of-type(4n+1) {margin-left: 3.2%;clear: none;}
	.grid4 .col:nth-of-type(3n+1) {margin-left: 0;clear: left;}
	.nav,.head-col-1,.m-right{ display:none;}	
	.icons-setting{ display:block; width:40px; height:40px; position:absolute; left:20px; top:25px; z-index:99;}
    .icons-setting img{ width:100%;}
	
	.icons-shop{ display:block; width:50px; height:50px; position:absolute; right:25px; top:25px; z-index:99;}
	.icons-shop img{ width:100%;}
	
	/*頭部樣式*/
    .grid3 .head-col{ width:100%; padding-top:15px; margin-bottom:15px; margin-left:0; position:relative;}
	

    .head-logo{ display:block; width:40%; margin:0 auto;}
    .head-logo img{ width:100%;}
	
	
	
	.head-right {text-align:left;}
	
	    .grid3 .head-col-3{ width:100%; padding-top:15px; margin-bottom:25px; margin-left:0; position:relative;}

	
	.head-search{ width:90%;/*height:70px;*/ margin:0 auto; position:relative; float:none;}
	.top-search {display:block;width:95%;height:25px;border-radius:20px;outline:none;border:1px solid #ccc;line-height:25px\9;margin-top:0;font-family: Arial; padding:4px 20px 4px 10px; float:none; }
	.search-icon {position:absolute;z-index:2;top:7px;right:0px;}

.m-catory{ width:94%; height:auto; overflow:hidden; padding:3% 0; margin:0 3%; border-top:1px solid #ccc;}
.m-catory a{ color:#000; border-bottom:1px solid #ccc; display:block; width:95%; margin-right:5%; padding-bottom:5px;}
		
.m-catory a:nth-of-type(3n+1) { width:100%; margin-right:0;}

}

/* reset cols to 2-column */
@media screen and (max-width: 640px) {
	/* grid4 */
	.grid4 .col {width: 48.4%;}
	.grid4 .col:nth-of-type(3n+1) {margin-left: 3.2%;clear: none;}
	.grid4 .col:nth-of-type(2n+1) {margin-left: 0;clear: left;}

	/* grid3 */
	/*.grid3 .col {width: 48.4%;}
	.grid3 .col:nth-of-type(3n+1) {margin-left: 3.2%;clear: none;}
	.grid3 .col:nth-of-type(2n+1) {margin-left: 0;clear: left;}*/
.m-catory{ width:95%; height:auto; overflow:hidden; padding:8% 0;margin:0 auto;}
.m-catory a:nth-of-type(2n+1) {  margin-right:0;}

}

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

/* grid4 */
	.col {width: 100% !important;margin-left: 0 !important;clear: none !important;}


.m-catory a{ margin:0;}
.icons-setting{ display:block; width:40px; height:40px; position:absolute; left:10px; top:15px; z-index:99;}
.icons-setting img{ width:100%;}

.icons-shop{ display:block; width:50px; height:50px; position:absolute; right:15px; top:15px; z-index:99;}
.icons-shop img{ width:100%;}

.head-search{ width:90%;/*height:70px;*/ margin:0 auto; position:relative; float:none;}
.top-search {display:block;width:93%;height:25px;border-radius:15px;outline:none;border:1px solid #ccc;line-height:25px\9;margin-top:0;font-family: Arial; padding:2px 20px 2px 10px; float:none; }
.search-icon {position:absolute;z-index:2;top:5px;right:0px;}

}

/* reset cols to fullwidth */
@media screen and (max-width: 480px) {
	
	
	.head-search{ width:90%;/*height:70px;*/ margin:0 auto; position:relative; float:none;}
.top-search {display:block;width:92%;height:25px;border-radius:15px;outline:none;border:1px solid #ccc;line-height:25px\9;margin-top:0;font-family: Arial; padding:2px 20px 2px 10px; float:none; }
.search-icon {position:absolute;z-index:2;top:5px;right:0px;}

	
}