@font-face {
	font-family: 'fontello';
	src: url('./font/fontello.eot?69025898');
	src: url('./font/fontello.eot?69025898#iefix') format('embedded-opentype'),
		url('./font/fontello.woff?69025898') format('woff'),
		url('./font/fontello.ttf?69025898') format('truetype'),
		url('./font/fontello.svg?69025898#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}

* { outline: none!important; }
html { height: 100%; }
body { 
	min-height: 100%;
	background-color: #5D5D5D;
	margin: 0;
	padding: 0;
	font-size: 12pt;
	font-family: '微軟正黑體', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;	
}

.fancybox-slide--iframe .fancybox-content {
    width  : 800px;
    height : 600px;
    max-width  : 100%;
    max-height : 100%;
    margin: 0;
	padding: 2rem;
}

.sr-only { display: none; }

.loading {
	position: fixed;
	width: 100%;
	min-height: 100%;
	top: 0;
	left: 0;
	background: #FCFCFC;
	opacity: 0.8;
	z-index: 8030;
}

.loading img {
	width: 100%;
	max-width: 480px;
	height: 320px;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 8040;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.icoCalendar {
    background-image: url(../img/calendar.gif);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 10px;
}

a { color: #23A1D1; }
a:hover { text-decoration: none; }

.i-icon {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #464646;
    font-size: 16pt;
}

.accesskey-href { color: transparent; display: inline-block; margin-right: 1rem; }
.accesskey-href:hover { color: transparent; }

.wrapper { 
	min-width: 320px; 
	max-width: 1200px; 
	position: relative; 
	margin: 0 auto; 
	border-left: 1px solid #111;
	border-right: 1px solid #111;
	background-color: #FFF;
}

.header { position: relative; z-index: 1; }
.header.row { margin-left: 0; margin-right: 0; }

.mylogo { background-color: #03567C; }
.mylogo > a { text-align: center; }
.mylogo > a > img { width: 100%; max-width: 105px; display: none; margin: 0 auto; }
.mylogo > a > span { 
	display: inline-block; 
	color: #FFF; 
	padding: .75rem .5rem; 
	font-size: 15pt;
	font-family: '微軟正黑體', 'Microsoft JhengHei', sans-serif;	
	font-weight: bold;
	letter-spacing: .275rem;
	text-align: center;
}

.top-bar { 
	background-color: #03567C; 
	color: #FFF; 
	text-align: right; 
	display: none; 
}

.top-bar2 { 
	padding: .5rem .5rem; 
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	justify-content: center;
}
.top-bar2 > div { padding: 0 12px; }
.top-bar2 > div:nth-child(1) { width: 100%; line-height: 34px; }
.top-bar2 > div:nth-child(2) { width: 100%; }
.top-bar2 .input-group { position: relative; }
.top-bar2 .input-group .form-outline { width: calc(100% - 16px); }
.top-bar2 input[type=text] { 
	padding: 0.25rem 0.75rem; 
	background-color: #94B4C4; 
	border: 1px solid #94B4C4 !important; 
	border-radius: 50rem!important;
} 
.top-bar2 input[type=text]:focus {
	background-color: #94B4C4; 
	border: 1px solid #94B4C4 !important; 
}
.top-bar2 .btn { 
	margin-left: -40px !important; 
	padding: 0.25rem .75rem !important;
	border-radius: 50rem !important;
	border: 1px solid #94B4C4 !important;
}

.navbar-toggler { 
	border: 0; 
	position: absolute;
	left: .875rem;
	top: 50%;
	transform: translateY(-50%);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.sidenav {
	height: 100%;
	width: 280px;
	position: fixed;
	z-index: 999;
	top: 0;
	left: -280px;
	background-color: #03567C;
	overflow-x: hidden;
	transition: 0.5s;
	padding: 60px 0 0 0;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 15px;
	font-size: 36px;
	padding: 0;
}
.sidenav.in { left: 0; display: block; }
.sidenav.out { left: -280px;; display: block; }

.menu-link > li { padding: 8px 8px 8px 32px; }
.menu-link > li > a {
	text-decoration: none;
	font-size: 15pt;
	color: #FFF;
	display: block;
	transition: 0.3s;
}
.menu-link > li > a:focus, .menu-link > li > a:active { color: #FF2; }
.menu-link > li { border-bottom: 1px dashed #FFF; font-weight: bold; }

.menu-link > li > a.active { color: #FF2; }

.dropdown-menu {
	background-color: transparent;
	border: 0;
}

.dropdown-menu .dropdown-item { 
	font-size: 13pt;
	font-weight: 500;
	color: #FFF;	
	letter-spacing: .2rem;
}

.breadcrumb-item a { color: #464646; text-decoration: none; }
.breadcrumb-item a:hover { color: #F22; }

.box { max-width: 1024px; padding: 0 15px; margin: 1.875rem auto 1.25rem; }
.box2 { max-width: 1024px; margin: 1rem auto 1.25rem; }

/* 首頁 :: 最新消息 */
.h-news {
	padding: 15px 29px 18px;
	background: url(../img/h-n1.png) left top no-repeat, 
				url(../img/h-n2.png) right top no-repeat, 
				url(../img/h-n3.png) left bottom no-repeat, 
				url(../img/h-n4.png) right bottom no-repeat,
				url(../img/h-n5.png) left top repeat-y,
				url(../img/h-n6.png) right top repeat-y,
				url(../img/h-n7.png) left top repeat-x,
				url(../img/h-n8.png) left bottom repeat-x;
}
.h-news > div.row { 
	background-color: #EEE;
	min-height: 200px;
	margin-left: 0;
	margin-right: 0;
}
.h-news > div.row > div { width: 100%; padding: 0; }
.h-news > div.row > div:nth-child(1) {
	background-color: #06080B;
	position: relative;
	margin-bottom: .5rem;
	border-radius: .5rem;
}
.h-news > div.row > div:nth-child(1) > img:nth-child(2) { margin-left: 0; border-radius: .5rem; }
.h-news > div.row > div:nth-child(1) > span {
	position: absolute;
	right: 38px;
	top: 18px;
	color: #FFF;
	font-size: 24pt;
	font-weight: bold;
}
.h-news > div.row > div:nth-child(2) > div { 
	border-bottom: 1px dashed #CCC; 
	position: relative;
}
.h-news > div.row > div:nth-child(2) > div:last-child { border-bottom: 0; }
.h-news > div.row > div:nth-child(2) > div > span { display: block; position: relative; }
.h-news > div.row > div:nth-child(2) > div > span > span { display: block; }

.h-news > div.row > div:nth-child(2) > div > span,
.h-news > div.row > div:nth-child(2) > div > span > a { color: #3E3A39; text-decoration: none; position: relative; }
.h-news > div.row > div:nth-child(2) > div > span > a:hover { color: #F22; }

.h-news > div.row > div:nth-child(2) > div:last-child > span > a::after { content: ' / '; }
.h-news > div.row > div:nth-child(2) > div:last-child > span > a:last-child::after { display: none; }

/* 首頁 :: 優鮮業者 */
.h-dealer > .title { 
	font-size: 12pt;
	color: #FFF;
	background: #03567C;
	padding: .375rem .875rem;
	
	border-radius: .5rem .5rem 0 0;
}

#dealer .carousel-item .row { margin: 1rem 0; }
#dealer .carousel-indicators { margin-bottom: 0; }
#dealer .carousel-indicators [data-bs-target] {
	background-color: #DCDCDC;
	border-radius: 50%;
	height: 16px;
	width: 16px;
}
#dealer .carousel-indicators .active { background-color: #A4DCFF; }

#dealer-inner { min-height: 300px; }
#dealer-inner > .row { 
	margin: 1rem .75rem; 
	border: 1px solid #C8C9CA;
	border-radius: 8px;
	padding: 12px 0;
}
#dealer-inner > .row > div:last-child { display: none; }

.dealer1 { min-height: 320px; }
.dealer1 > div { display: flex; flex-wrap: wrap; margin-left: 0; margin-right: 0; }
.dealer1 > div > span { 
	display: block; 
	padding: .25rem 0; 
	flex: 0 0 auto;
    width: 100%;	
}
.dealer1 > div > span:nth-child(1) { width: 80px; }
.dealer1 > div > span.contact > span { display: inline-block; width: 8px; }
.dealer1 > div > span.email > span { display: inline-block; }
.dealer1 > div > span.email > span:nth-child(1) { width: 5px; }
.dealer1 > div > span.email > span:nth-child(2) { width: 3px; }
.dealer1 > div > span.email > span:nth-child(3) { width: 3px; }
.dealer1 > div > span.email > span:nth-child(4) { width: 2px; }
.dealer1 > div > span:nth-child(2) { width: calc(100% - 80px); }

#dealer-inner > .row > div.dealer1 { min-height: 0; }
.dealer-page { text-align: right; font-weight: bold; }
.dealer-page > span > a { color: #595757; text-decoration: none; }
.dealer-page > span > a:hover { color: #F22; }
.dealer-page > span > a::after { content: ' / '; }
.dealer-page > span > a:last-child::after { display: none; }

/* 首頁 - 優鮮推薦 */
.recommend-item > div:nth-child(1) { padding: .75rem; border-radius: 8px; }
.recommend-item > div:nth-child(1) > img { 
	width: 100%; 
	max-width: 300px; 
	display: block; 
	margin: 0 auto; 
	border-radius: 8px;
}
.recommend-item > div:nth-child(2) { 
	padding: .5rem; 
	margin: .5rem .75rem; 
	background-color: #03567C;
	color: #FFF;
	border-radius: 8px;
	text-align: center; 
	
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	font-size: 14pt;
}

.page-title { 
	margin: 2rem 0 0; 
	border-bottom: 6px solid #009FE8; 
	padding: 0 .5rem .375rem; 
}
.page-title > span { 
	font-size: 18pt;
	font-weight: bold;
	color: #3E3A39;
}

.box-about > .page-title { border: 0; padding: 0; margin-bottom: 1.5rem; }
.box-about > .page-title > span { color: #231815; border-bottom: 6px solid #03567C; padding: 0 .5rem .375rem; }

/* 澎湖優鮮簡介 */
.box-about { padding: 0 .875rem; }
.box-about > .row { 
	margin: 0; 
	padding: .75rem .75rem;
	border-radius: 8px; 
	border: 1px solid #717071; 
}
.box-about > .row > div:nth-child(1) { padding: .75rem 6.298828%; }
.box-about > .row > div:nth-child(2) { border-top: 1px dashed #888; padding: 0 4.199218% }
.box-about > .row > div:nth-child(2) > a { display: block; margin: 0 auto; width: 100%; max-width: 413px; padding: .75rem 0; }
.box-about > .row > div:nth-child(2) > a > img { display: block; margin: 0 auto; width: 100%; }

.about-info > div:nth-child(1) { margin: 1rem 0 .5rem; }
.about-info > div:nth-child(1) > span {
	display: inline-block;
	font-size: 14pt;
	font-weight: bold;
	padding-right: 1rem;
	color: #3E3A39;
}
.about-info > div:nth-child(2) {
	font-size: 12pt;
	color: #3E3A39; 
	line-height: 25px;
	letter-spacing: 2px;
}
.about-info a { color: #3E3A39; }
.about-info a:hover { color: #F22; }

.about-1 > div:nth-child(1) > span { border-bottom: 3px solid #8DC21F; }
.about-2 > div:nth-child(1) > span { border-bottom: 3px solid #E3007F; }
.about-3 > div:nth-child(1) > span { border-bottom: 3px solid #F29600; }
.about-4 > div:nth-child(1) > span { border-bottom: 3px solid #009FE8; }

/* 最新消息 */
.news-box > .title { 
	font-size: 12pt;
	color: #FFF;
	background: #03567C;
	padding: .375rem .875rem;
	
	border-radius: .5rem .5rem 0 0;
}
.news-box > .title > .row { margin: 0; }
.news-box > .title > .row > div:nth-child(1) { width: 100%; order: 2; padding: 0; }
.news-box > .title > .row > div:nth-child(2) { width: 100%; order: 1; padding: 0; }

.news-box > .content {
	margin: .875rem auto 2rem;
}

/* 連結 */
.links { padding: 0 .875rem; }
.links .row { border-bottom: 2px dotted #CCC; padding: .675rem 0; margin: 0; }
.links .row > div { padding: 0 }
.links .row > div:nth-child(1) { width: 40px; text-align: right; line-height: 24px; padding-right: .75rem; }
.links .row > div:nth-child(2) { width: calc(100% - 40px); line-height: 24px; }
.links .row > div > a { color: #3E3A39; text-decoration: none; font-weight: 600; }
.links .row > div > a:hover { color: #FF5050; }
.links .row:last-child { border-bottom: 0; }
.links .row:last-child > div { padding: 0; }

@media screen and (max-width: 413px) {
	.h-news > div.row > div:nth-child(2) > div { min-height: 50px; }
	.h-news > div.row > div:nth-child(2) > div > span > a:not(.more) { 
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;  
		overflow: hidden;
	}
	.h-news > div.row > div:nth-child(2) > div:last-child > span { line-height: 50px; }
}

@media screen and (min-width: 414px) {
	.h-news > div.row > div:nth-child(2) > div { height: 50px; }
	.h-news > div.row > div:nth-child(2) > div > span { 
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		top: 50%;
		transform: translateY(-50%);
	}
	.page-title > span { font-size: 22pt; }
	
	.news-box > .title > .row > div:nth-child(1) { 
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

@media screen and (min-width: 576px) {
	.top-bar2 > div:nth-child(1) { width: 155px; line-height: 34px; }
	.top-bar2 > div:nth-child(2) { width: calc(100% - 155px); }

	.page-title > span { font-size: 24pt; }
	
	/* 首頁-最新消息 */
	.h-news > div.row > div:nth-child(2) > div { height: 45px; }
	.h-news > div.row > div:nth-child(2) > div > span > span { display: inline-block; }
	
	/* 澎湖優鮮簡介 */
	.box-about > .row > div:nth-child(1) { border-right: 1px dashed #888; }
	.box-about > .row > div:nth-child(2) { border-top: 0; }
	.box-about > .row > div:nth-child(2) > a { padding: 4.325613% 0; }
	
	.about-info > div:nth-child(1) > span { font-size: 15pt; }
}

@media screen and (min-width: 640px) {
	/* 首頁 :: 優鮮業者 */
	.h-dealer > .title { font-size: 14pt; }
	/* 最新消息 */
	.news-box > .title { font-size: 14pt; }
}

@media screen and (min-width: 768px) {
	.mylogo { background-color: transparent; }
	.mylogo > a { padding: .75rem .25rem; }
	.mylogo > a > img { width: 48%; display: block; }
	.mylogo > a > span { display: none; }
	
	.top-bar { 
		padding: .5rem .5rem; 
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		justify-content: flex-end;
	}
	.top-bar > div { padding: 0 12px; }
	.top-bar > div:nth-child(1) { width: 155px; line-height: 34px; }
	.top-bar > div:nth-child(2) { width: 300px; }
	.top-bar .input-group { position: relative; }
	.top-bar .input-group .form-outline { width: calc(100% - 16px); }
	.top-bar input[type=text] { 
		padding: 0.25rem 0.75rem; 
		background-color: #94B4C4; 
		border: 1px solid #94B4C4 !important; 
		border-radius: 50rem!important;
	} 
	.top-bar input[type=text]:focus {
		background-color: #94B4C4; 
		border: 1px solid #94B4C4 !important; 
	}
	.top-bar .btn { 
		margin-left: -40px !important; 
		padding: 0.25rem .75rem !important;
		border-radius: 50rem !important;
	}
	
	.header.row > div:nth-child(1) { width: 180px; }
	.header.row > div:nth-child(2) { width: calc(100% - 180px); }
	.header.row > div { padding-left: 0; padding-right: 0; }
	
	.fancybox-slide--iframe .fancybox-content {
		width  : 800px;
		height : 600px;
		max-width  : 95%;
		max-height : 95%;
		margin: 0;
	}

	.sidenav {
		width: auto;
		height: auto;
		padding: 0;
		position: relative;
		left: 0;
		right: 0;
		overflow-x: visible;
		background-color: #FFF; 
		
		margin-top: 15px; 
	}
	.sidenav .closebtn { display: none; }
	
	.navbar-toggler { display: none; }
	
	.menu-link { 
		padding: 0;
		margin: 0;		
		align-items:center;
		justify-content: center;
		width: 100%;
	}
	
	.fb { max-width: 100px; border-radius: 10px; }
	
	.menu-link > li { border-bottom: 0; padding: 0 .3rem)); }
	.menu-link > li > a { font-size: 12pt; display: block; text-align: center; color: #000;  }
	.menu-link > li > a:hover { color: #F22; }
	.menu-link > li > a:focus, .menu-link > li > a:active { color: #000; }
	.menu-link > li > a.active { color: #F22!important; }
	
	.dropdown-toggle::after { display: none; }
	.dropdown-menu {
		background-color: #FFF;
		border: 1px solid rgba(0, 0, 0, .45);
	}
	
	.menu-link .dropdown:hover > .dropdown-menu { display: block; }
	.menu-link .dropdown > .dropdown-menu { margin-top: 0; margin-left: 0; padding: 0; }
	.menu-link .dropdown > .dropdown-menu > a { text-indent: 0; border-bottom: 1px dotted #CCC; padding: 10px 15px; color: #464646; }
	.menu-link .dropdown > .dropdown-menu > a:hover { background-color: #CCC; color: #F22; }
	.menu-link .dropdown > .dropdown-menu > a:last-child { 
		border-bottom: none; 
		-webkit-border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px; 
	}
	.menu-link .dropdown > .dropdown-toggle:active { pointer-events: none; }
	
	.menu-link .dropdown > .dropdown-menu {
		-webkit-border-radius: 0 0 5px 5px;
		-moz-border-radius: 0 0 5px 5px;
		border-radius: 0 0 5px 5px; 
	}
	
	/* 首頁-最新消息 */
	.h-news > div.row > div { padding: 0; }
	.h-news > div.row > div:nth-child(1) { 
		width: 31.456953%; 
		margin-bottom: 0;
		padding-bottom: 15px; 
		padding-right: 15px; 
		background-color: transparent;
	}
	.h-news > div.row > div:nth-child(2) { width: 68.543047%; padding-bottom: 15px; }
	.h-news > div.row > div:nth-child(2) > div { height: 16.666667%; }
	/* 澎湖優鮮簡介 */
	.about-info > div:nth-child(1) > span { font-size: 16pt; }
	
	/* 最新消息 */
	.news-box > .title > .row > div:nth-child(1) { width: calc(100% - 160px); order: 1; padding: 0 15px; }
	.news-box > .title > .row > div:nth-child(2) { width: 160px; text-align: right; order: 2; padding: 0 15px; }
}

/* @media screen and (min-width: 780px) { */
	/* .menu-link > li { padding: 0 .45rem; } */
/* } */

@media screen and (min-width: 820px) {
	.mylogo > a > img { width: 60%; }
	.top-bar { padding: .5rem .75rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
		-ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .25rem;
        padding-left: .25rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: -ms-flexbox!important;
		display: flex!important;
		-ms-flex-preferred-size: auto;
		flex-basis: auto;
		justify-content: center;
    }
	.navbar-expand-custom .navbar-toggler {
        display: none;
    }
	
	.navbar-expand-custom .navbar-nav .dropdown-menu {
		position: absolute;
		z-index: 999999;
	}
}

@media screen and (min-width: 992px) { 
	.mylogo > a > img { width: 100%; }
	
	.navbar-collapse { justify-content: center; max-width: 1200px; margin: 0 auto; }
	
	
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: .25rem;
		padding-left: .25rem;
	}

	.navbar-expand-lg .navbar-nav .dropdown-menu { right: 0; }
	
	/* .menu-link > li { padding: 0 .8rem; } */
	/* .menu-link > li > a { font-size: 15pt; } */
	
	.top-bar { padding: .5rem 1rem; }
	
	/* 首頁 :: 優鮮業者 */
	.h-dealer > .title { font-size: 16pt; }
	
	/* 最新消息 */
	.news-box > .title { font-size: 16pt; }
	
	/* 澎湖優鮮簡介 */
	.about-info > div:nth-child(1) > span { font-size: 18pt; }
}

@media screen and (min-width: 1100px) { 
	/* .menu-link > li { padding: 0 1.25rem; } */
}
	
@media screen and (min-width: 1200px) { 
	/* .menu-link > li { padding: 0 2rem; } */
	.fb { max-width: 145px; }
	
	.menu-link > li { border-bottom: 0; padding: 0 1.8rem; }
	.menu-link > li > a { font-size: 15pt; }
	
	.box { padding: 0 1.875rem; }
	/* 澎湖優鮮簡介 */
	.box-about { padding: 0; }
}

@media screen and (min-width: 1600px) { 

}