/*google web fonts*/
/*noto 繁 簡 日, 黑體 宋體*/ @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900|Noto+Sans+SC:100,300,400,500,700,900|Noto+Sans+TC:100,300,400,500,700,900|Noto+Serif+JP:200,300,400,500,600,700,900|Noto+Serif+SC:200,300,400,500,600,700,900|Noto+Serif+TC:200,300,400,500,600,700,900');
/*Raleway*/ @import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');
/*Roboto*/ @import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900');
/*全域控制*/
	.dropdown-menu .dropdown-item path, .dropdown-menu .dropdown-item circle, .dropdown-menu .dropdown-item ellipse {
    fill: #152d44 !important;}
	html {
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body {
		position: relative;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	html {min-height: 100%; font-size: 93.75%;} /*16px x 93.75% = 15px 網站字型大小預設值*/
	body {
		height: 100%;
		background: #fff;
		font-family:
			'Roboto',
			'Noto Sans TC',
			'Noto Serif TC',
			'Noto Sans SC',
			'Noto Serif SC',
			'Noto Sans JP',
			'Noto Serif JP',
			'Font Awesome\ 5 Brands',
			'Font Awesome\ 5 Free',
			'Font Awesome\ 5 Pro',
			sans-serif;
		font-size: 1rem;
		font-weight: 400;
		color: #152d44;
		letter-spacing: 1px;
	}

	/*使用邊框不影響 div or table 本身寬度設定*/
	* {
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	*[onclick], button {cursor: pointer;}

	div.clearfix {clear: both;}

	.displayNone {display: none !important;}

	/*漸變效果時間*/
	a, button, li, dt, dd, p, input, i, span, figure, figcaption, svg, g, path, ellipse {
		outline: none;
	}

	/*images*/
	img {
		width: 100%;
		max-width: 100%;
		height: auto!important;
		border: none;
	}

	/*font awesome icon*/
	i::before, i::after {margin-right: .5rem; margin-left: .5rem;}

	/*fonts*/
	h1 {font-size: 2rem;}
	h2 {font-size: 1.75rem;}
	h3 {font-size: 1.3rem;}
	h4 {font-size: 1.15rem;}
	p, li {font-size: 1rem;}
	li {list-style: none;}

	/*link color*/
	a:link, a:visited {color: #152d44; text-decoration: none;}
	a:hover {background: none; color: #fabd00; text-decoration: none;}

	/*form*/
	input, select, textarea {
		width: 100%;
		background: #fff;
		border: 1px solid #152d44;
		color: #152d44;
		padding: .5rem .75rem;
	}
	select {padding-bottom: .75rem}
	input:hover, select:hover, textarea:hover {
		border: 1px solid #e4e4e4;
		outline: none;
	}
	input:focus, select:focus, textarea:focus {
		border: 1px solid #ff3a1e;
		outline: none;
	}
	input::placeholder, textarea::placeholder {color: #afafaf;}
	textarea {resize:none;}
	input[type="checkbox"], input[type="radio"] {width: auto !important;}

	button {
		background: #fff;
		border: 1px solid #333;
		border-radius: 0;
		font-weight: 400;
		color: #333;
		padding: .25rem 1.5rem;
	}
	button:hover {
		background: #ff3a1e;
		border-color: #ff3a1e;
		color: #fff;
	}
	button[type="submit"], button.addCart {background: #152d44; border-color: #152d44; color: #fff}
	button[type="submit"]:hover, button.addCart:hover {background: #fff; color: #152d44;}
	button[type="reset"], button.addCart {background: #666; border-color: #666; color: #fff;}
	button[type="reset"]:hover, button.addCart:hover {background: #fff; color: #666;}

	div.more>a {
		background: #fff;
		border: 1px solid #152d44;
		border-radius: 1.5rem;
		color: #152d44;
		padding: .5rem 1.5rem;
	}
	div.more>a:hover {
		background: #152d44;
		color: #ffff;
	}

/*header*/
	header {
		background: rgba(255,255,255,1);
		padding: 1rem 0;
		z-index: 9999;
	}

	/*主選單設定*/
	.bg-light {background: none !important; padding: 0;}

	.navbar-light .navbar-nav .nav-item {
		padding: 1rem;
	}
	.navbar-light .navbar-nav .nav-link {
		border-bottom: 3px solid rgba(0,0,0,0);
		font-size: 1.275rem;
		color: #152d44;
		text-align: center;
		line-height: 1rem;
	}

	/*主選單設定滑鼠滑過效果*/
	.nav-item:hover {
		background-color: #152d44;
	}
	.navbar-nav .nav-item:hover a {
		color: white;
	}
	.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
		color: rgb(255 255 255);
	}
	/*主選單下拉設定*/
	ul.dropdown-menu {
		width: 30rem;
		border-radius: 10rem;
		background: rgba(250,250,250,.65);
		left: -10rem;
	}
	ul.dropdown-menu li {border-radius: 10rem; box-shadow: 0 3px 5px rgba(0,0,0,.5);}
	.dropdown:hover>.dropdown-menu {display: block;}
	.dropdown-toggle::after {
		content: none;
		/*content: "\f0d7";*/
		/*border: none;*/
		/*font-weight: 900;*/
		/*vertical-align: inherit;*/
		/*margin-left: auto;*/
	}
	/*下拉選單樣式設定*/
	div.submenu {text-align: center;}
	.dropdown-menu .dropdown-item {color: #152d44; padding: 0;}
	.dropdown-menu .dropdown-item p:nth-of-type(1) {
		width: 3rem;
		margin: auto;
	}
	/* .dropdown-menu .dropdown-item path,
	.dropdown-menu .dropdown-item circle,
	.dropdown-menu .dropdown-item ellipse {fill: #152d44;color: #152d44}

	.dropdown-menu .dropdown-item:hover {background: none}
	.dropdown-menu .dropdown-item:hover>p {fill: #152d44;color: #152d44}
	.dropdown-menu .dropdown-item:hover>p path,
	.dropdown-menu .dropdown-item:hover>p circle,
	.dropdown-menu .dropdown-item:hover>p ellipse {fill: #152d44;color: #152d44} */
	/* .dropdown-menu .dropdown-item path, .dropdown-menu .dropdown-item circle, .dropdown-menu .dropdown-item ellipse {fill: #152d44 !important;} */
	
/*moblie nav*/
	[class*=js-] {cursor: pointer;}
	.navbar-light button.navbar-toggler {border: #000 1px solid !important;}
	.navbar-light button.navbar-toggler:hover {background: none; border-color: #000 !important;}
	.navbar-light button.navbar-toggler>i {color: #000;}
	.navbar-light button.navbar-toggler>i::before,
	.navbar-light button.navbar-toggler>i::after {margin: 0;}
	.navbar-light button.navbar-toggler:hover>i {color: #000;}
	div.closeBtn {text-align: right; margin-bottom: 1.25rem;}
	div.closeBtn>button {background: none; border: none; color: #000;}

	/*行動裝置主選單背景*/
	div.slidebars {
		width: 100vw;
		background: rgba(1, 74, 127, 0.9);
		padding: 1rem;
	}

	/*行動裝置主選單*/
	dl.slidebarNav {text-align: center; margin-bottom: 0}
	dl.slidebarNav>dd {
		border-bottom: #fff 1px solid;
		margin-bottom: 2rem;
		padding-bottom: 2rem;
	}
	dl.slidebarNav>dd>a, dl.slidebarNav>dd>p {
		font-size: 2rem;
		font-weight: 300;
		color: #fff;
		line-height: 1.15rem;
	}
	dl.slidebarNav>dd div.submenu>a>p:nth-of-type(2) {color: #152d44; margin-bottom: 0;}

/*content*/

/*footer*/
	footer {background: #152d44; color: #fff;}
	section.footer {
		max-width: 85vw;
		margin: auto;
	}
	div.com-info {
		border-right: 1px solid #fff;
	}
	div.get-in-touch>div>h2 {
		color: #edbb31;
		text-transform: uppercase;
	}
	div.get-in-touch>div>dl.contact>dd>label {
		text-transform: uppercase;
		margin-bottom: 0;
	}
	div.get-in-touch>div>dl.contact>dd>span a {color: #fff !important;}
	div.get-in-touch>div>dl.contact>dd>label>img {
		max-width: 1.5rem;
		margin-right: .5rem;
	}

	dl.f-sublink>dd>a {color: #72c9e3;}
	dl.f-sublink>dd>a:hover {color: #25b4d6;}
	dl.f-sublink>dd:nth-of-type(1) {border-right: 1px solid #72c9e3;}

	section.copyright {
		color: #fff;
		text-align: center;
	}

	div.right-btn {
		position: absolute;
		top: 45vh;
		right: 3rem;
		z-index: 9999;
	}
	div.right-btn>dl>dd>p,
	div.right-btn>dl>dd>dl>dd>p>a {
		background: #fff;
		border: 1px solid #152d44;
		border-radius: 50%;
		padding: .838rem .5rem;
	}
	div.right-btn>dl>dd>p {
		padding: .7245rem .5rem;
	}
	div.right-btn>dl>dd>p,
	div.right-btn>dl>dd>dl>dd>p {cursor: pointer; margin-bottom: 0;}
	div.right-btn>dl>dd>p:hover,
	div.right-btn>dl>dd>dl>dd>p>a:hover {
		background: #152d44;
		color: #fff
	}
	div.right-btn>dl, div.right-btn>dl>dd, div.right-btn>dl>dd>dl, div.right-btn>dl>dd>dl>dd {margin-bottom: 0;}
	div.right-btn>dl>dd {
		position: relative;
	}
	div.right-btn>dl>dd>dl {
		position: absolute;
		top: -5.7rem;
		visibility: hidden;
		opacity: 0;
	}
	div.right-btn>dl>dd:hover>dl {
		visibility: visible;
		opacity: 1;
	}
	div.right-btn>dl>dd>dl>dd:nth-of-type(1) {margin-bottom: 1.75rem;}
	div.right-btn>dl>dd>dl>dd:nth-of-type(1)>p>a {padding: .838rem .7rem;}

/*goTOP use only*/
	.cd-top {
		width: 2rem;
		height: 2rem;
		background: url(../images/layout/cd-top-arrow.svg) no-repeat center 50%;
		border: 1px solid #cfcfcf;
		border-radius: 50%;
		text-indent: 100%;
		white-space: nowrap;
		visibility: hidden;
		display: inline-block;
		position: fixed;
		bottom: 40px;
		right: 10px;
		z-index: 9999;
		/* image replacement properties */
		overflow: hidden;
		opacity: 0;
		-webkit-transition: opacity .3s 0s, visibility 0s .3s;
		-moz-transition: opacity .3s 0s, visibility 0s .3s;
		transition: opacity .3s 0s, visibility 0s .3s;
	}
	.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
		-webkit-transition: opacity .3s 0s, visibility 0s 0s;
		-moz-transition: opacity .3s 0s, visibility 0s 0s;
		transition: opacity .3s 0s, visibility 0s 0s
	}
	.cd-top.cd-is-visible {visibility: visible; opacity: .75}
	/* the button becomes visible */
	/* .cd-top.cd-fade-out {opacity: .25} */
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	.cd-top:hover {background: url(../images/layout/cd-top-arrow.svg) no-repeat center 50% #cfcfcf; opacity: 1} /*改變按鈕顏色*/
	@media only screen and (min-width: 1024px) {.cd-top {right: 30px; bottom: 30px}}
	@media only screen and (min-width: 768px) {.cd-top {right: 1.5rem; bottom: 6.5rem}}