@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Theme Name: Canvas
    Theme URI: http://themes.semicolonweb.com/html/canvas
    Description: The Multi-Purpose Template
    Author: SemiColonWeb
    Author URI: http://themeforest.net/user/semicolonweb
    Version: 7.3.1

    SASS Stylesheet

-----------------------------------------------------------------------------------*/
/*!
 * Bootstrap  v5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

	@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

	:root {
		--cnvs-themecolor: #2c3e50;
		--cnvs-themecolor-bg:rgb(44,62,80,0.3) ;
		--cnvs-themecolor-rgb: 69,155,190;
		--cnvs-body-font:'Noto Sans TC', 'Poppins', sans-serif;
		--cnvs-secondary-font: '微軟正黑體','Caveat Brush', cursive;
	}

	.mfp-bg { /*tiktok影片嵌入*/
		opacity: 1.0; /*原0.9改1.0*/
	}


	.menu-item.current > .menu-link {
		color: #fff;
	}

	.menu-link {
		font-size: 1.1rem;
		color: #fff;
	}

	.sub-menu-container li a:hover {
		color: #F0AD4E !important;
	}


	.menu-item:hover > .menu-link {
		color: #fff;
	}

	.is-expanded-menu .sticky-header #header-wrap {
		background-color: var(--cnvs-themecolor);
	}


	
	.stretched #gotoDY {
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
	}

	.gototop-active #gotoDY {
		z-index: 599;
		opacity: 1;
	}

	.stretched #gotoFB {
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
	}

	.gototop-active #gotoFB {
		z-index: 599;
		opacity: 1;
	}

	.stretched #gotoYT {
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
	}

	.gototop-active #gotoYT {
		z-index: 599;
		opacity: 1;
	}

	.stretched #gotoLine {
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
	}

	.gototop-active #gotoLine {
		z-index: 599;
		opacity: 1;
	}


	#gotoDY {
		--cnvs-gotoTop-size: 2.5rem;
		--cnvs-gotoTop-bg: rgba(0, 0, 0, 1.0);
		--cnvs-gotoTop-icon-size: 1.5rem;
		--cnvs-gotoTop-icon-color: #fff;
		--cnvs-gotoTop-position-boxed-right: 30px;
		--cnvs-gotoTop-position-boxed-bottom: 250px;
		--cnvs-gotoTop-position-botom: 30px;
		--cnvs-gotoTop-border-radius:50%;
		--cnvs-gotoTop-hover-color: var(--cnvs-themecolor);
		z-index: -999;
		position: fixed;
		width: var(--cnvs-gotoTop-size);
		height: var(--cnvs-gotoTop-size);
		line-height: var(--cnvs-gotoTop-size);
		background-color: var(--cnvs-gotoTop-bg);
		font-size: var(--cnvs-gotoTop-icon-size);
		text-align: center;
		color: var(--cnvs-gotoTop-icon-color);
		top: auto;
		left: auto;
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
		cursor: pointer;
		border-radius:50%;
		border: 1px solid blue;
		opacity: 1;
		box-shadow: 0px 2px 10px 5px blue;
		transition: background-color 0.2s linear, opacity 0.4s ease;
	}


	#gotoDY:after {
	  content: "";
	  background: blue;
	  display: block;
	  position: absolute;
	  padding-top: 300%;
	  padding-left: 350%;
	  margin-left: -20px !important;
	  margin-top: -120%;
	  opacity: 0;
	  transition: all 0.8s
	}

	#gotoDY:active:after {
	  padding: 0;
	  margin: 0;
	  opacity: 1;
	  transition: 0s
	}

	#gotoDY:focus { outline:0; }



	#gotoFB {
		--cnvs-gotoTop-size: 2.5rem;
		--cnvs-gotoTop-bg: rgba(0, 0, 0, 1.0);
		--cnvs-gotoTop-icon-size: 1.5rem;
		--cnvs-gotoTop-icon-color: #fff;
		--cnvs-gotoTop-position-boxed-right: 30px;
		--cnvs-gotoTop-position-boxed-bottom: 200px;
		--cnvs-gotoTop-position-botom: 30px;
		--cnvs-gotoTop-border-radius:50%;
		--cnvs-gotoTop-hover-color: var(--cnvs-themecolor);
		z-index: -999;
		position: fixed;
		width: var(--cnvs-gotoTop-size);
		height: var(--cnvs-gotoTop-size);
		line-height: var(--cnvs-gotoTop-size);
		background-color: #3b5998;
		font-size: var(--cnvs-gotoTop-icon-size);
		text-align: center;
		color: var(--cnvs-gotoTop-icon-color);
		top: auto;
		left: auto;
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
		cursor: pointer;
		border-radius: 50%;
		border: 1px solid #3b5998;
		opacity: 1;
		transition: background-color 0.2s linear, opacity 0.4s ease;
	}


	#gotoYT {
		--cnvs-gotoTop-size: 2.5rem;
		--cnvs-gotoTop-bg: rgba(0, 0, 0, 1.0);
		--cnvs-gotoTop-icon-size: 1.5rem;
		--cnvs-gotoTop-icon-color: #fff;
		--cnvs-gotoTop-position-boxed-right: 30px;
		--cnvs-gotoTop-position-boxed-bottom: 150px;
		--cnvs-gotoTop-position-botom: 30px;
		--cnvs-gotoTop-border-radius:50%;
		--cnvs-gotoTop-hover-color: var(--cnvs-themecolor);
		z-index: -999;
		position: fixed;
		width: var(--cnvs-gotoTop-size);
		height: var(--cnvs-gotoTop-size);
		line-height: var(--cnvs-gotoTop-size);
		background-color: #c4302b;
		font-size: var(--cnvs-gotoTop-icon-size);
		text-align: center;
		color: var(--cnvs-gotoTop-icon-color);
		top: auto;
		left: auto;
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
		cursor: pointer;
		border-radius: 50%;
		border: 1px solid #c4302b;
		opacity: 1;
		transition: background-color 0.2s linear, opacity 0.4s ease;
	}

	#gotoLine {
		--cnvs-gotoTop-size: 2.5rem;
		--cnvs-gotoTop-bg: rgba(0, 0, 0, 1.0);
		--cnvs-gotoTop-icon-size: 1.5rem;
		--cnvs-gotoTop-icon-color: #fff;
		--cnvs-gotoTop-position-boxed-right: 30px;
		--cnvs-gotoTop-position-boxed-bottom: 100px;
		--cnvs-gotoTop-position-botom: 30px;
		--cnvs-gotoTop-border-radius:50%;
		--cnvs-gotoTop-hover-color: var(--cnvs-themecolor);
		z-index: -999;
		position: fixed;
		width: var(--cnvs-gotoTop-size);
		height: var(--cnvs-gotoTop-size);
		line-height: var(--cnvs-gotoTop-size);
		background-color: #00b900;
		font-size: var(--cnvs-gotoTop-icon-size);
		text-align: center;
		color: var(--cnvs-gotoTop-icon-color);
		top: auto;
		left: auto;
		right: var(--cnvs-gotoTop-position-boxed-right);
		bottom: var(--cnvs-gotoTop-position-boxed-bottom);
		cursor: pointer;
		border-radius: 50%;
		border: 1px solid #00b900;
		opacity: 1;
		transition: background-color 0.2s linear, opacity 0.4s ease;
	}

	.bg {
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
		background-size: cover;
	}	



	@media (min-width: 992px) {
		.sub-menu-container .menu-item > .menu-link {
			font-size: 1.0rem;
    	}
	}