/**************************************************
所有在此檔案中的修改前台，語法前必加上 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-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_MOLA-服務項目的icon樣式--icon來自外掛----START
	---------------------------------------------*/
	html.js .gcicon{
		font-size: 40px;
	}
	/*---------------------------------------------
	GC_MOLA-Others
	---------------------------------------------*/
	html.js .nav-dropdown>li>a:hover{
		color:#82BE00!important;
	}
	html.js .tabbed-content .nav li:first-child {
		margin-left: 1.3em !important;
	}

	html.js .tab a:hover,
	html.js .tab a:active{
		color:#82BE00!important;
		border-color:#82BE00!important;
	}
	/*---------------------------------------------
	GC_Leisure-single-post
	---------------------------------------------*/
	html.js .single-post #content .entry-image,
	html.js .single-post #content .entry-header-text .entry-category,
	html.js .single-post #content .entry-header-text .entry-divider,
	html.js .single-post #content .entry-header-text .entry-meta,
	html.js .single-post #content footer.entry-meta {display:none!important;}
	/*---------------------------------------------
	GC_Leisure-mobile
	---------------------------------------------*/
	@media only screen and (max-width: 1370px) and (min-width: 1025px){
		html.js #wrapper #masthead {
			background: linear-gradient(-90deg,transparent 0%,rgba(255, 255, 255, 0) 68%,rgb(255, 255, 255) 50%,rgba(255, 255, 255, 1) 90%),linear-gradient(rgba(255, 187, 51, 0) 91%,#82be00 96%,rgba(130, 190, 0, 0) 0%),linear-gradient(90deg,transparent 0%,rgba(255, 255, 255, 0) 136%,rgb(255, 255, 255) 68%,rgba(255, 255, 255, 1) 90%)!important;
		}
	}
	@media only screen and (max-width: 1024px) and (min-width: 850px){
		html.js body #wide-nav *, 
		html.js body #wrapper #masthead * {
			font-weight: 100!important;
			font-size: 12px!important;
		}
		html.js #wrapper #masthead #logo {
			top: 67%!important;
			max-width: 230px!important;
		}
	}
	@media only screen and (max-width: 850px) and (min-width: 768px){
		html.js #footer #nav_menu-2,
		html.js #footer #nav_menu-3,
		html.js #footer #nav_menu-4,
		html.js #footer #gform_widget-2{
			width: calc(100%/4);
			float:left;
		}
		html.js #footer  #nav_menu-4 {
			padding-top: 50px!important;
		}
		html.js .Leisure_service_items_content {
			min-height: 196px;
		}
	}
	@media only screen and (max-width: 1366px) {
		.Leisure_home_row_right .Leisure_service_items > div ,
		.Leisure_home_row_left .Leisure_service_items > div {
			max-width: 100%;
			min-width: 100%;
		}
	}
	@media only screen and (max-width: 850px) {
		html.js .Leisure_home_row_right {
			margin-right: 0px!important;
		}
		html.js #wrapper #masthead {
			background: rgba(0,0,0,0)!important;
		}
		html.js #wrapper #masthead #logo {
			position: initial!important;
			top: 50%!important;
			max-width: none!important;
		}
		html.js #wide-nav .img {
		    margin: 0px auto!important;
		}
		html.js #wide-nav img{
		    width: 200px;
		}
		.gc_indexw1 > div > .img {
		    width: 15%!important;
		}
		.Leisure_service_items h5 {
			font-size: 24px;
			text-align: center;
		}
		.Leisure_service_items .is-divider {
		    margin: 10px auto;
		}
		.Leisure_service_items .button {
			margin: 0px auto!important;
			width: 100%;
		}
		html.js #footer * {
			text-align: center;
			margin: 0px auto!important;
		}
		html.js #footer .menu-servvice_footer2-container {
			padding-top: 0px!important;
		}
		html.js body #footer .gform_widget * {
			margin: 0px auto!important;
			letter-spacing: 6px;
		}
		html.js .gform_footer {
			display: grid!important;
		}
	}
	@media only screen and (max-width: 375px) {
		html.js .home .slider-style-focus .flickity-page-dots {
			bottom: -15px!important;
		}
	}
	/*---------------------------------------------
	GC_Leisure-home-content
	---------------------------------------------*/
	.Leisure_home_row_right {
		margin-right: -15px!important;
	}
	.Leisure_service_items h5 {
		font-size: 24px;
	}
	.Leisure_service_items_content {
		min-height: 174px;
	}
	.Leisure_service_items_content * {
		text-align: justify;
	}
	.Leisure_service_items .gc_indexButtom {
		padding: 7px 15px 2px 15px;
		color: #82be00!important;
		border-color: #82be00!important;
	}
	.Leisure_service_items .gc_indexButtom:hover {
		color: white!important;
		background-color: #82be00!important;
		border-color: #82be00!important;
	}
	/*---------------------------------------------
	GC_Leisure-slider dot
	---------------------------------------------*/
	html.js .flickity-page-dots .dot {
		border: 3px solid #aac966;
		background: #aac966;
	}
	html.js .flickity-page-dots .dot.is-selected {
		border: 3px solid #5aa90e;
		background-color: #5aa90e;
	}
	html.js .home .slider-style-focus .flickity-page-dots {
		bottom: 0px;
	}
	/*---------------------------------------------
	GC_Leisure-footer
	---------------------------------------------*/
	html.js #footer .gform_footer input {
		background: #5d7924;
		color: white!important;
		border-radius: 10px!important;
		width: 120px;
	}
	html.js #footer .gform_widget label {
		padding-top: 18px;
	}
	html.js #footer .footer-widgets > div {
		max-width: 1300px;
	}
	html.js #footer * {
	    color: black;
	    border-color: transparent!important;
	}
	html.js .footer-2 {
	    background-color: #82be00;
	}
	html.js .absolute-footer{
		background-color: #608c00;
	}
	html.js .absolute-footer * {
		color: white!important;
		font-size: 16px;
		font-weight: 100;
	}
	html.js #footer .widget-title {
		font-size: 20px;
	    letter-spacing: 6px;
	}
	html.js #footer li a {
		font-size: 18px!important;
		padding: 0px!important;
		line-height: 35px;
	}
	html.js #footer .menu-servvice_footer-container,
	html.js #footer .menu-about_footer-container {
		padding-top: 15px!important;
	}
	html.js #footer .menu-servvice_footer2-container {
		padding-top: 40px;
	}
	/*---------------------------------------------
	GC_Leisure-form
	---------------------------------------------*/
	html.js #footer .gform_widget * {
		margin: 0px 0px!important;
		letter-spacing: 6px;
	}
	html.js #footer .gform_widget input {
		/* background: rgba(255, 255, 255, 0.1); */
		border-radius: 10px!important;
		box-shadow: 0px 0px 1px rgb(56, 81, 0);
	}
	.gform_footer * {
		background: #385100!important;
	}
	html.js #footer .is-divider {
		display:none!important;
	}
	/*---------------------------------------------
	GC_Leisure-header
	---------------------------------------------*/
	html.js #masthead .header-search-form-wrapper input {
		font-size: 16px!important;
	}
	html.js #wrapper #wide-nav > div > div:nth-child(2) img {
		width: 220px;
	}
	html.js #wide-nav *,
	html.js #wrapper #masthead * {
		font-weight: 100!important;
		font-size: 18px!important;
	}
	html.js #wrapper #masthead {
		background: linear-gradient(-90deg,transparent 0%,rgba(255, 255, 255, 0) 73%,rgb(255, 255, 255) 50%,rgba(255, 255, 255, 1) 90%),linear-gradient(rgba(255, 187, 51, 0) 91%,#82be00 96%,rgba(130, 190, 0, 0) 0%);
	}
	html.js #masthead ,
	html.js #wide-nav {
		max-width: 1700px;
		margin: 0px auto;
	}
	/*---------------------------------------------
	GC_Leisure-font
	---------------------------------------------*/
	html.js p,
	html.js span{
		font-size: 16px;
	}
	/*---------------------------------------------
	GC_Leisure-form-block
	---------------------------------------------*/
	html.js #wrapper #masthead #logo{
		position: absolute;
		top: 50%;
		max-width: 400px;
	}
	/*---------------------------------------------
	GC_Leisure-form-block
	---------------------------------------------*/
	html.js .Leisure_4block {
		width: 25%!important;
		float: left;
		clear: none!important;
	}
	html.js .Leisure_4block input{
		width: 95%!important;
	}
	/*---------------------------------------------
	GC_Leisure-Bread-form
	---------------------------------------------*/
	html.js {
		background-color:white!important;
	}
	html.js .page-id-546 #crumbs {
	    margin-top: 30px;
	}
	html.js .page-id-546 #gc_breadcrumbs,
	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-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;}
		}