/**************************************************
所有在此檔案中的修改前台，語法前必加上 Html.js
才可專屬前台修改
**************************************************/
/*-------------------------------------------------
---LIST---
1) ALL-Style
2) FORM
3) FIXED
-------------------------------------------------*/
/*-------------------------------------------------
1) ALL-Style

Mobile-for-width

@media only screen and (max-width: px) and (min-width: px){}
→ MAX ~ MIN => CHANGE

@media only screen and (max-width: px){}
→ < MAX => CHANGE

@media only screen and (min-width: px){}
→ > MIN => CHANGE

1F: iPad					1024px
2F: iPad					768px
3F: Iphone 5s				640px
4F: Iphone 6 Plus			414px
5F: Nexus 5X，Nexus 6P		412px
6F: Iphone 6				375px
7F: Galaxy S5				360px
8F:	Iphone 5				320px
-------------------------------------------------*/
	/*---------------------------------------------
	GC_Leisure-header dropdown li
	---------------------------------------------*/
	html.js #masthead .nav-dropdown li,
	html.js #wide-nav .nav-dropdown li {
		width: 160px;
		min-width: 160px;
	}
	/*---------------------------------------------
	GC_Leisure-2017.12.24-IE footer
	---------------------------------------------*/
	@media screen\9 {
		/* @media only screen and (min-width: 851px){ */
			html.js #footer,
			html.js #footer .row, .gallery {
				display: block!important;
			}
		/* } */
	}
	@media \0screen {} {
		/* @media only screen and (min-width: 851px){ */
			html.js #footer,
			html.js #footer .row, .gallery {
				display: block!important;
			}
		/* } */
	}
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		/* @media only screen and (min-width: 851px){ */
			html.js #footer,
			html.js #footer .row, .gallery {
				display: block!important;
			}
		/* } */
	}
	/*---------------------------------------------
	GC_Leisure-2017.12.24-footer
	---------------------------------------------*/
	#footer {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5c85a;
	}
	/*---------------------------------------------
	GC_Leisure-FaceBook-Like-BOX-Word
	---------------------------------------------*/
	#top-bar * { font-size: 17.5px;}
	#top-bar *,
	#footer *{ color:#292929!important;}
	/*---------------------------------------------
	GC_Leisure-FaceBook-Like-BOX-Word
	---------------------------------------------*/
	html.js .sidbar_slide_title {
		display:none!important;
	}
	html.js .sidbar_slide_header {
	    background-image: url("../../assets/pic/Facebook-type-1-01-01.png");
		background-size: 75%!important;
		background-position: center center!important;
		background-repeat: no-repeat!important;
	}
	/*---------------------------------------------
	GC_Leisure-側邊欄選單/手機選單-文字都可點擊(使選單可收縮)
	---------------------------------------------*/ 
	html.js .mfp-content .toggle,
	html.js .sidebar-wrapper .toggle {
		width: 100%;
		margin-top: -40px;
		text-align: right;
		-webkit-transform: rotate(0deg)!important;
		-ms-transform: rotate(0deg)!important;
		transform: rotate(0deg)!important;
	}
	html.js .mfp-content .active > .toggle > i ,
	html.js .sidebar-wrapper .active > .toggle > i {
		-webkit-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}
	html.js .mfp-content .current-menu-ancestor ul,
	html.js .sidebar-wrapper .current-menu-ancestor ul {
		display: block;
	}
	/*---------------------------------------------
	GC_Leisure-page-min-height
	---------------------------------------------*/ 
	@media only screen and (min-width: 769px){ html.js #main {min-height: 736px;} }
	@media only screen and (max-width: 768px) and (min-width: 641px){ html.js #main {min-height: 830px;} } 
	/*---------------------------------------------
	GC_Leisure-footer
	---------------------------------------------*/
	html.js #footer i {
		margin: 3.5px 10px 3.5px 2px!important;
		font-size: 15px;
	}
	@media only screen and (max-width: 850px){
		html.js #main .is-divider {width: 100%!important;}
		html.js #footer * {
			text-align: center!important;
			margin: auto auto;
			padding: 1px 0px!important;
			background: #f5c85a;
		}
		html.js #main .flickity-page-dots {
		    bottom: 6px;
		}
	}
	@media only screen and (min-width: 851px){
		html.js #footer > div {
		    padding-top: 10.2px!important;
			padding-bottom: 10.2px!important;
		}
		html.js #footer * {
			padding: 0px!important;
			margin: 0px!important;
		}
		html.js #footer > div > div > div > div > div:nth-child(1) *{
			/* float:left; */
		}
		html.js #footer > div > div > div > div > div:nth-child(2) *{
			/* float:right; */
		}
		html.js #main .flickity-page-dots {
		    bottom: 7px;
		}
		html.js #masthead .header-search-form input {
			padding: 10px!important;
		}
		html.js body #footer i {
			margin: 3.5px 3px 3.5px 1px!important;
			font-size: 15px;
		}
	}
	html.js #footer :before {background:rgba(0,0,0,0)!important;}
	/*---------------------------------------------
	GC_Leisure-all-content-max-width
	---------------------------------------------*/
	@media only screen and (min-width: 851px){
		html.js #masthead > div *,
		html.js #top-bar > div *,
		html.js #masthead > div,
		html.js #top-bar > div {
			padding: 0px!important;
		}
	}
	html.js #footer > div > div {
	    max-width: 1530px!important;
		margin: 0px auto!important;
	}
	html.js #masthead > div,
	html.js #top-bar > div,
	html.js #main {
		max-width: 1400px!important;
		margin: 0px auto!important;
	}
	@media only screen and (max-width: 768px){
		html.js  .single-post #main .row,
		html.js  .single-post #main .col {
			max-width: 100%;
			min-width: 100%;
		}
	}
	/*---------------------------------------------
	GC_Leisure-single-post
	---------------------------------------------*/
	html.js .single-post .page-title-inner .entry-category,
	html.js .single-post .page-title-inner .entry-divider,
	html.js .single-post .page-title-inner  .entry-meta,
	html.js .single-post #content footer.entry-meta {display:none!important;}
	/*---------------------------------------------
	GC_Leisure-home-post
	---------------------------------------------*/
	html.js .home #main .post-item .is-divider,
	html.js .home .post-item .image-cover {
		display:none!important;
	}
	html.js .home #main .post-item .post-title{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 77%;
		float: left;
	}
	@media only screen and (max-width: 1365px) and (min-width: 850px){
		.Lesisure_NEWS * {
		    display: inline-block;
			background: transparent!important;
			padding-bottom: 0px!important;
		}
	}
	@media only screen and (max-width: 1365px){
		html.js .home #main .post-item .post-title{
			width: 60%!important;
		}
	}
	@media only screen and (max-width: 850px){
		html.js body.home #main .button {
			position: absolute;
			right: 0px;
			bottom: -8px;
			margin-right: 0px!important;
		}
	}
	html.js .home #main .post-item .box-text{
	    padding: 10px 0px;
	}
	html.js #main .flickity-prev-next-button.previous {
		left: 4%!important;
	}
	html.js #main .flickity-prev-next-button.next {
	    right: 4%!important;	
	}
	html.js .home #main .button {
		margin-right: 5px!important;
		float: right;
	}
	html.js .home #main .video-button-wrapper * {
		float: none!important;
	}
	html.js .home #main .box-text .post-meta {
		text-align: right;
		padding-right: 6px;
	}
	/*---------------------------------------------
	GC_Leisure-Bread
	---------------------------------------------*/
	html.js .Leisure_4block {
		width: 25%!important;
		float: left;
		clear: none!important;
	}
	html.js .Leisure_4block input{
		width: 95%!important;
	}
	/*---------------------------------------------
	GC_Leisure-Bread
	---------------------------------------------*/
	html.js {
		background-color:white!important;
	}
	html.js .page-id-546 #crumbs {
	    margin-top: 30px;
	}
	html.js .page-id-546 #crumbs > a:nth-child(1),
	html.js .page-id-546 .gc_delimiter,
	html.js .page-id-546 #header,
	html.js .page-id-546 #footer	{
	    display:none!important;
	}
	/*---------------------------------------------
	GC_Leisure-shop-car
	---------------------------------------------*/
	@media only screen and (min-width: 850px){
		html.js .cart-container .woocommerce > strong > strong > form,
		html.js .cart-container  .woocommerce > strong > strong > div {
			max-width: 50%!important;
			float: left;
		}	
	}
	html.js .cart-container form.woocommerce-shipping-calculator{
	    display:none!important;
	}
	html.js .cart-container div.woocommerce > strong {
		width: 100%!important;
	}
	/*---------------------------------------------
	GC_Leisure-shop-bread
	---------------------------------------------*/
	@media only screen and (min-width: 850px){
		.shop-page-title > div > .medium-text-center,
		.shop-page-title > div,
		.shop-page-title {
			height: 0px;
		}
		.shop-page-title > div > .medium-text-center {
			position: absolute;
			right: 0px;
			margin-top: -92px;
			margin-right: 15px;
			color: white;
		}	
	}
	@media only screen and (max-width: 849px){
		html.js #wrapper > .breadcrumbs, 
		html.js #crumbs {
			text-align: center;
		}
	}
	/*---------------------------------------------
	GC_Leisure-bread
	---------------------------------------------*/
	html.js .woocommerce-account .my-account-header,
	html.js .woocommerce-cart .checkout-page-title,
	html.js .woocommerce-checkout .page-title,
	html.js .shop-page-title .breadcrumbs,
	html.js .product-info .breadcrumbs {
	    display:none!important;
	}
	html.js #wrapper > .breadcrumbs *,
	html.js #wrapper > .breadcrumbs,
	html.js #crumbs, 
	html.js #crumbs * {
		color: #ffffff!important;
		opacity: 1!important;
		font-weight:100!important;
	}
	html.js #wrapper > .breadcrumbs,
	html.js #crumbs {
		background: #446084;
		max-width: 1080px;
		padding: 15px;
		margin: 0px auto;
	}
	html.js .breadcrumbs .divider {
		margin:0px!important;
		top:0px!important;
	}
	/*---------------------------------------------
	GC_Leisure-back-to-top-btn
	---------------------------------------------*/
	.back-to-top.active,
	.back-to-top {transform: translateY(-35px);}
	/*---------------------------------------------
	GC_Leisure-選取超商門市按鈕
	---------------------------------------------*/
	html.js .woocommerce-checkout .store-block input {color: red; border-color: red; border-width: 2px;}
	html.js .woocommerce-checkout .store-block input:hover {border-color: black; color: black; box-shadow: inset 0 0 0 100px rgba(0,0,0,0);}
/*-------------------------------------------------
2) FORM
-------------------------------------------------*/
	/*---------------------------------------------
	GC_Leisure-驗證碼 width:80%(為驗證圖片區域) width:20%(填寫區)
	---------------------------------------------*/
	html.js .gform_body #recaptcha_response_field {border: 1px solid #dddddd;}
	html.js .gform_body #recaptcha_widget_div * {
		background-color: transparent!important;
		background-image: url()!important;
	}
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(1),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(2) > td:nth-child(1),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(2) > td:nth-child(3),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(3),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(4) > td > div > span,
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(4) > td:nth-child(2),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(4) > td:nth-child(4),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(5),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(6),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(7){display: none;}
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(2) {
		width: 80%;
	} 
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(4) {
		width: 20%;
	}
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(2),
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(4) {float: left;}
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(2) #recaptcha_image {
		height: auto!important;
		width: 100%!important;
	}
	html.js .gform_body #recaptcha_table > tbody > tr:nth-child(4) > td:nth-child(3){
	    transform: translate(166px,-33px);
		float: left;
	}
	html.js body .gform_body #recaptcha_table > tbody > tr:nth-child(4) a:after {
		content: "重整";
		position: absolute;
		top: 3px;
		font-family: FontAwesome!important;
		color: #222;
	}
	html.js body .gform_body #recaptcha_table > tbody > tr:nth-child(4) img {visibility: hidden;}
	/*---------------------------------------------
	GC_Leisure-表單100%、邊框相同
	---------------------------------------------*/
	@media only screen and (max-width: 768px){
		html.js .gform_wrapper {max-width: 100%!important;}
		html.js .gform_wrapper * {
			min-width: 100%!important;
			width: 100%!important;
			border-color: #ddd!important;
			padding-right: 0px!important;
		}
		html.js .gform_wrapper .gform_footer input {
			min-width: initial!important;
			width: initial!important;
			float: right;
			margin: 0!important;
			padding: 0px 23px!important;
		}
	}
	/*---------------------------------------------
	GC_Leisure-Form"送出"部分加回分隔
	---------------------------------------------*/
	html.js .gform_wrapper .gform_footer {
		padding: 1em 0 .625em!important;
		margin: 1em 0 0!important;
		clear: both!important;
	}
/*-------------------------------------------------
3) FIXED
-------------------------------------------------*/
	/*---------------------------------------------
	GC_Leisure-demo
	---------------------------------------------*/
	#Leisure_demo *{
		font-family: et-line,ChEn!important;
	}
	/*---------------------------------------------
	GC_Leisure-FaceBook-Like-BOX-Word
	---------------------------------------------*/
	html.js .like_box_slideup_close .sidbar_slide_title ,
	html.js .like_box_slideup_open .sidbar_slide_title {
		-webkit-transform: rotate(180deg) !important;
		-moz-transform: rotate(180deg) !important;
		-o-transform: rotate(180deg) !important;
		transform: rotate(180deg) !important;
		top: 15px;
	}
	/*---------------------------------------------
	GC_Leisure-修改購物車因檔首無 BOM 而產生的上方空白
	---------------------------------------------*/
	html.js .woocommerce-edit-address #wrapper,
	html.js .woocommerce-checkout #wrapper,
	html.js .woocommerce-cart #wrapper { margin-top:-25px;}
	/*---------------------------------------------
	GC_Leisure-birth-bar
	---------------------------------------------*/
	html.js ::-webkit-inner-spin-button { visibility: hidden; }
	/*---------------------------------------------
	GC_Leisure-adminmenu img
	---------------------------------------------*/
	#adminmenu div.wp-menu-image img {display: block!important; margin-left: 10px!important;}
	/*---------------------------------------------
	GC_Leisure-form toolbar
	---------------------------------------------*/
	#gf_form_toolbar {margin: 12px 0 12px 0!important;}
	/*---------------------------------------------
	GC_Leisure-.woocommerce 畫面跑版
	---------------------------------------------*/
	html.js .woocommerce.row > strong > form ,
	html.js .woocommerce.row > strong > div { float: left; }
	/*---------------------------------------------
	GC_Leisure-ESS 手機板: 左右置中
	---------------------------------------------*/
	@media only screen and (max-width: 992px){html.js .supports .esg-grid{padding-left: 2% !important; padding-right: 2% !important;}}
	/*---------------------------------------------
	GC_Leisure-ESS 標籤移過的字體為白色
	---------------------------------------------*/
	html.js .esg-filters div div:hover,
	html.js .esg-filters div span:hover{color: #222!important;}
	/*---------------------------------------------
	GC_Leisure-footer .col	所有區塊寬高統一
	---------------------------------------------*/
	@media only screen and (max-width: 768px){html.js  footer .col {padding: 15px 7.5px!important;}}
	/*---------------------------------------------
	GC_Leisure-網站邊界溢出
	---------------------------------------------*/
	html.js body {overflow: hidden!important;}
	/*---------------------------------------------
	GC_Leisure-針對會員級別定價，修復-.box-text-products > .price-wrapper > .price > spn	最終價格顏色更改
	---------------------------------------------*/
	html.js .box-text-products > .price-wrapper > .price > span.ywcrbp_your_price > span{position: absolute; left: 0px;}
	html.js .box-text-products > .price-wrapper > .price > span.ywcrbp_your_price {color: rgba(0,0,0,0)!important;}
	.box-text-products > .price-wrapper > .price > spn:last-child ,
	.box-text-products > .price-wrapper > .price > spn:last-child *,
	.box-text-products > .price-wrapper > .price > span:last-child,
	.box-text-products > .price-wrapper > .price > span:last-child * {color: #!important;}
	/*--------------------------------------------
	Font
	---------------------------------------------*/
		/*-----------------------------------------
		GC_Leisure-自訂字體
		※ 如需放入自定義的字體包
			1. 在assets中創建fonts資料夾
			2. 字體包放入
			3. 將語法添入此結構中
			4. 以下為範例。	url(../fonts/文字檔案名稱) ， 文字檔案名稱:包含附檔名
							font-family:自定義字體名稱;
			@font-face
			{
				font-family:HuaKang;
				src:url(../fonts/WT004.TTF)format("truetype");
			}
		-----------------------------------------*/
		@font-face
		{
			font-family:ChEn;
			src:local('Microsoft JhengHei');
		}
		@font-face
		{
			font-family:ChEn;
			unicode-range:U>0041-007a;
			src: local('Roboto Regular'),
			local('Roboto-Regular'),
			url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff)
			format('woff');
		}
		@font-face
		{
			font-family:ChEn;
			unicode-range:U>2010-2020,U>0022;
			src: local('Roboto Regular'),
			local('Roboto-Regular'),
			url(http://themes.googleusercontent.com/static/fonts/roboto/v11/2UX7WLTfW3W8TclTUvlFyQ.woff)
			format('woff');
		}
		/*-----------------------------------------
		GC_Leisure-預設字體
		-----------------------------------------*/
		html.js select,
		html.js option,
		html.js #footer .copyright-footer,
		html.js #header a,
		html.js #header p,
		html.js #wrapper span,
		html.js #wrapper a,
		html.js #wrapper p,
		html.js #wrapper div,
		html.js #wrapper h1,
		html.js #wrapper h2,
		html.js #wrapper h3,
		html.js #wrapper h4,
		html.js #wrapper h5,
		html.js #wrapper h6,
		html.js #wrapper input,
		html.js #wrapper label,
		html.js #wrapper textarea,
		html.js #wrapper .product-title,
		html.js .esg-grid .esg-content,
		html.js .esg-content a,
		html.js .esg-grid *{font-family: 'Arial',ChEn, Georgia, sans-serif;}
		/*-----------------------------------------
		GC_Leisure-字體特效
		-----------------------------------------*/
		html.js a {text-decoration: none!important;}
		html.js * {list-style-position:inside!important;}
		html.js .price del {text-decoration: line-through!important;}
		/*-----------------------------------------
		GC_Leisure-Mobile icon
		-----------------------------------------*/
		html.js .icon-menu {color: gray;}
		/*-----------------------------------------
		Mobile-for-width
		-----------------------------------------*/
		@media only screen and (max-width: 1920px) and (min-width: 769px){
			.Leisure_mobile{display:none!important;}
			.Leisure_pc{display: 0!important;}
		}
		@media only screen and (max-width: 768px){
			.Leisure_mobile{display: 0!important;}
			.Leisure_pc{display:none!important;}
		}
		@media only screen and (max-width: 1919px) and (min-width: 1024px){
			/*-----------------------------------
			GC_Leisure-.header-bg-image	電腦選單背景
			-----------------------------------*/
			html.js .header-bg-image {background-position: -65px!important;}
		}
		@media only screen and (max-width: 1023px){
			html.js .header-bg-image {background-position: 0px!important;}
		}
		@media only screen and (max-width: 992px){
			/*-----------------------------------
			GC_Leisure
			#masthead a			電腦版選單
			footer div			頁腳置中
			footer div.divider	頁腳分隔線
			-----------------------------------*/
			html.js #masthead a {font-size: 17px;}	
			html.js footer div {
				/* min-width: 100%!important;
				margin: 0px!important;
				text-align: center; */
			}
			html.js footer div.divider {height: 1px!important;}
		}
		@media only screen and (max-width: 768px){
			html.js footer * {font-size: 12px;}
			/*-----------------------------------
			GC_Leisure
			Header
			.product-info  .breadcrumbs * 	商品麵包屑
			.product-info  ul				左右相關商品
			.price-wrapper					商品價錢
			.product-main .cart				購物車
			.product_meta					分類資訊
			.product_meta .social-icons		分享icon
			.product-info .is-divider		商品分隔
			-----------------------------------*/
			html.js .product-info  .breadcrumbs *,
			html.js .product-info  ul,
			html.js .product-info .price-wrapper,
			html.js .product-info .cart,
			html.js .product-info *,
			html.js .product-info .social-icons {text-align: center!important;}
			html.js .product-info .social-icons {width : 100%!important;}
			html.js .product-info .is-divider {display:none!important;}
			/*-----------------------------------
			GC_Leisure-.gform_wrapper		表單
			-----------------------------------*/
			html.js .gform_wrapper {max-width: 98%!important;}
			/*-----------------------------------
			GC_Leisure-.wpb_gallery_slides 	輪播圖
			-----------------------------------*/
			html.js .wpb_gallery_slides {text-align: center; margin: 0px 15px!important;}
		}
		@media only screen and (max-width: 414px){
			/*-----------------------------------
			GC_Leisure-#top-bar	登入...等等項目
			-----------------------------------*/
			html.js #top-bar * {
				font-size: 12px;
				padding-right: 0px;
				margin-right: 1px;
			}
			html.js #top-bar > div {padding-left: 5px!important;}
		}
		@media only screen and (max-width: 320px){
			html.js #top-bar * {letter-spacing: 0px;}
		}