@charset "UTF-8";

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

html {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th,
td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}

q,
blockquote {
	quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
	content: "";
	content: none;
}

a img {
	border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

html {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th,
td {
	text-align: left;
	font-weight: normal;
	vertical-align: middle;
}

q,
blockquote {
	quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
	content: "";
	content: none;
}

a img {
	border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

a {
	text-decoration: none;
	outline: none;
}

input,
select {
	vertical-align: middle;
}

img {
	vertical-align: middle;
	margin: 0;
	padding: 0;
	border: 0;
}

b {
	font-weight: bold;
}

html,
body {
	width: 100%;
	height: 100%;
}

::-webkit-input-placeholder {
	/* WebKit browsers */
	color: #999;
}

:-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	color: #999;
}

::-moz-placeholder {
	/* Mozilla Firefox 19+ */
	color: #999;
}

:-ms-input-placeholder {
	/* Internet Explorer 10+ */
	color: #999;
}

.top-nav-pc aside img,
.top-nav-mb img,
.vbanner-index img {
	width: 100%;
}

.top-nav-pc main,
.top-nav-pc .feature .additional-feature,
.top-nav-pc .feature .search-and-social,
.top-nav-pc .feature .search,
.top-nav-mb main,
.top-nav-mb .feature .additional-feature,
.top-nav-mb .feature .search-and-social,
.top-nav-mb .feature .search,
.link-info,
.address-cont .location-area .location-info figcaption .link,
.address-cont .location-area .location-info .case-info dl,
.intro-section .intro-sp,
.category {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
}

.btn-top-index,
.top-nav-pc,
.top-nav-pc .nav a,
.top-nav-pc .feature .search-and-social,
.top-nav-mb,
.top-nav-mb .feature .search-and-social,
.btn-nav-m,
.footer-tip main,
.footer-cont main,
.breadcrumbs,
.now-position,
.breadcrumbs2,
.window-statement aside,
.window-call aside,
.address-cont .btn-search,
.index-news-leftbox .btn-more,
.ind-ns-box figcaption .tag-news,
.videoarea .video-title-box .btn-more,
.videoarea .video-box,
.videoarea .video-box .info,
.videoarea .video-box .photo-title-s,
.service-section .service-nav-pc button,
.service-section .service-nav-mb button,
.unit,
.brand-box .logo-line,
.search-cont .page-saerchbar-top .btn-advanced {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

.btn-top-index,
.btn-top-index:hover,
.btn-top-index.cd-is-visible,
.btn-top-index.cd-fade-out,
.nav-mobile,
.address-cont .btn-search:hover,
.address-cont .location-area .location-info .btn-info,
.index-news-leftbox .btn-more,
.ind-ns-box figure,
.videoarea .video-title-box .btn-more,
.videoarea .video-box .photo,
.videoarea .video-box .photo:hover::before,
.videoarea .video-box .photo:hover .info,
.videoarea .video-box .photo:hover span,
.videoarea .video-box .photo-s,
.videoarea .video-box .photo-s:hover::before,
.videoarea .video-box .photo-s:hover .info,
.videoarea .video-box .photo-s:hover span,
.videoarea .video-box .info,
.service-section .service-nav-pc button,
.service-section .service-nav-mb button,
.unit,
.unit:hover span,
.unit.selected span,
.unit:hover::after,
.unit.selected::after,
.brand-box .logo-line,
.search-cont .page-saerchbar-top .btn-advanced,
.pcfix-sub-nav nav a,
.category:hover {
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.clrBoth {
	clear: both;
}

.divine-2-box {
	position: relative;
}

.divine-2-box .divine-left {
	float: none;
}

@media only screen and (min-width: 481px) {
	.divine-2-box .divine-left {
		float: left;
	}
}

.divine-2-box .divine-right {
	float: none;
}

@media only screen and (min-width: 481px) {
	.divine-2-box .divine-right {
		float: right;
	}
}

.show-pc {
	display: none;
}

@media only screen and (min-width: 768px) {
	.show-pc {
		display: block;
	}
}

.show-mobile {
	display: block;
}

@media only screen and (min-width: 768px) {
	.show-mobile {
		display: none;
	}
}

.has-animation {
	position: relative;
}

.has-animation p,
.has-animation h2 {
	opacity: 0;
}

.has-animation.animate-in p,
.has-animation.animate-in h2 {
	animation: textHidden 0.1s 1.1s forwards;
}

.has-animation.animate-in:before,
.has-animation.animate-in:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	z-index: 10;
}

.has-animation.animate-in:after {
	animation-delay: .5s;
}

.has-animation.animation-ltr.animate-in:before {
	animation: revealLTR 1.8s ease;
}

.has-animation.animation-ltr.animate-in:after {
	animation: revealLTR 1s .6s ease;
}

.has-animation.animation-rtl.animate-in:before {
	animation: revealRTL 1.8s ease;
}

.has-animation.animation-rtl.animate-in:after {
	animation: revealRTL 1s .6s ease;
}

@keyframes movingSec1Gph {
	0% {
		transform: translateY(0);
	}

	20% {
		transform: translateY(-0.25%);
	}

	50% {
		transform: translateY(-0.5%);
	}

	80% {
		transform: translateY(-0.25%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes revealLTR {
	0% {
		width: 0;
		left: 0;
	}

	65% {
		width: 100%;
		left: 0;
	}

	100% {
		width: 0;
		left: 100%;
	}
}

@keyframes revealRTL {
	0% {
		width: 0;
		right: 0;
	}

	65% {
		width: 100%;
		right: 0;
	}

	100% {
		width: 0;
		right: 100%;
	}
}

@keyframes textHidden {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

body {
	position: relative;
	font-size: 15px;
	font-family: "FontAwesome", "Century Gothic", "Arial", "Noto Sans TC",
		"微軟正黑體";
	background-color: #fff;
	margin: 0;
	padding: 0;
}

/* 英數換行宣告 */
/* 20210203 start */
div {
	word-wrap: break-word;
	word-break: break-all;
}

/* 20210203 end */
summary::marker {
	font-size: 0;
}

.btn-top-index {
	display: inline-block;
	position: fixed;
	bottom: 95px;
	right: 12px;
	width: 60px;
	height: 60px;
	font-size: 200%;
	padding: 10px 0 10px 0;
	color: #213d7d !important;
	text-align: center;
	background-color: #fff;
	cursor: pointer;
	border-radius: 100rem;
	box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.15);
	z-index: 20;
	line-height: 1.2;
}

.btn-top-index:hover {
	background-color: #213d7d;
	color: #fff !important;
}

.btn-top-index.cd-is-visible {
	visibility: visible;
	opacity: 1;
}

.btn-top-index.cd-fade-out {
	opacity: 1;
}

.hide {
	display: none !important;
}

.show {
	display: block !important;
}

.show-pc {
	display: none !important;
}

@media only screen and (min-width: 768px) {
	.show-pc {
		display: block !important;
	}
}

.show-mb {
	display: block !important;
}

@media only screen and (min-width: 768px) {
	.show-mb {
		display: none !important;
	}
}

.wrapper-header {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

@media only screen and (min-width: 481px) {
	.wrapper-header {
		width: 100%;
	}
}

@media only screen and (min-width: 1366px) {
	.wrapper-header {
		width: 1200px;
	}
}

.wrapper-def {
	width: 96%;
	margin: 0 auto;
	padding: 0;
}

@media only screen and (min-width: 1366px) {
	.wrapper-def {
		width: 1200px;
	}
}

.wrapper-fot {
	width: 88%;
	margin: 0 auto;
	padding: 0;
}

@media only screen and (min-width: 1366px) {
	.wrapper-fot {
		width: 60%;
	}
}

.top-nav-pc {
	display: none;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: white;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
		margin: 0;
		padding: 0;
		overflow: hidden;
		z-index: 9999;
	}
}

.top-nav-pc img {
	width: 100%;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc main {
		width: 96%;
		justify-content: space-between;
		align-items: stretch;
		margin: 0 auto;
	}
}

@media only screen and (min-width: 1366px) {
	.top-nav-pc main {
		width: 1200px;
	}
}

.top-nav-pc aside {
	width: 45%;
	text-align: center;
	padding: 0;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc aside {
		width: 15.5%;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-pc aside {
		width: 15.5%;
	}
}

.top-nav-pc aside a {
	display: inline-block;
	height: 100%;
	padding: 4.5% 0;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc aside a {
		padding: 9.5% 0;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-pc aside a {
		padding: 4.5% 0;
	}
}

.top-nav-pc .nav {
	display: none;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc .nav {
		display: flex;
		width: 65.5%;
		height: 100%;
		justify-content: space-around;
		align-items: center;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-pc .nav {
		width: 62.5%;
		margin: 0 2.5%;
	}
}

.top-nav-pc .nav a {
	display: inline-block;
	width: 100%;
	height: 100%;
	color: #4b4b4b;
	line-height: 1.2;
	text-align: center;
	padding: 22px 0;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc .nav a {
		width: calc(100%/ 6);
		font-size: 80%;
		padding: 5% 0.5%;
		margin: 0;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-pc .nav a {
		font-size: 100%;
		padding: 4% 1%;
	}
}

@media only screen and (min-width: 1366px) {
	.top-nav-pc .nav a {
		font-size: 120%;
	}
}

.top-nav-pc .nav a:hover,
.top-nav-pc .nav a.active {
	text-decoration: none;
	color: #fff;
}

.top-nav-pc .feature {
	width: 22%;
	height: 100%;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc .feature {
		width: 17%;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-pc .feature {
		width: 17%;
	}
}

.top-nav-pc .feature .additional-feature {
	width: 100%;
	background-color: #efefef;
	justify-content: space-around;
	align-items: center;
	border-radius: 0 0 20px 20px;
	margin-bottom: 5px;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc .feature .additional-feature {
		margin-bottom: 5px;
	}
}

@media only screen and (min-width: 1366px) {
	.top-nav-pc .feature .additional-feature {
		margin-bottom: 10px;
	}
}

.top-nav-pc .feature .btn-statement,
.top-nav-pc .feature .btn-contact {
	font-size: 80%;
	text-align: center;
	padding: 8px 0;
}

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

	.top-nav-pc .feature .btn-statement,
	.top-nav-pc .feature .btn-contact {
		font-size: 70%;
	}
}

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

	.top-nav-pc .feature .btn-statement,
	.top-nav-pc .feature .btn-contact {
		font-size: 80%;
	}
}

.top-nav-pc .feature .btn-statement:hover,
.top-nav-pc .feature .btn-contact:hover {
	color: #2074d0;
	cursor: pointer;
}

.top-nav-pc .feature .search-and-social {
	width: 100%;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
}

.top-nav-pc .feature .search {
	width: 80%;
	color: #fff;
	background-color: #aaaaaa;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	margin: 0 5px;
}

.top-nav-pc .feature .search input {
	width: 70%;
	height: 26px;
	color: #fff;
	font-size: 80%;
	border: none;
	background: transparent;
	outline: none;
	/*webkit瀏覽器專用*/
	/*Firefox 4-18瀏覽器專用*/
	/*Firefox 19+瀏覽器專用*/
	/*IE10瀏覽器專用*/
}

@media only screen and (min-width: 768px) {
	.top-nav-pc .feature .search input {
		width: 65%;
		height: 20px;
		font-size: 80%;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-pc .feature .search input {
		width: 70%;
		height: 26px;
		font-size: 100%;
	}
}

.top-nav-pc .feature .search input::-webkit-input-placeholder {
	color: #fff;
}

.top-nav-pc .feature .search input::-moz-placeholder {
	color: #fff;
}

.top-nav-pc .feature .search input::-moz-placeholder {
	color: #fff;
}

.top-nav-pc .feature .search input:-ms-input-placeholder {
	color: #fff;
}

.top-nav-pc .feature .search .btn-search {
	width: 15%;
	color: #fff;
	text-align: center;
}

.top-nav-pc .feature .social {
	width: 15%;
	margin: 0 5px;
}

@media only screen and (min-width: 768px) {
	.top-nav-pc .feature .social {
		width: 20%;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-pc .feature .social {
		width: 15%;
	}
}

.top-nav-pc .feature .social a {
	display: block;
	width: 100%;
}

.top-nav-mb {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: white;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 9999;
}

@media only screen and (min-width: 768px) {
	.top-nav-mb {
		display: none;
	}
}

.top-nav-mb main {
	width: 96%;
	justify-content: flex-start;
	align-items: stretch;
	margin: 0 auto;
}

.top-nav-mb aside {
	width: 40%;
	text-align: center;
	padding: 0;
	margin-right: 2.5%;
}

@media only screen and (min-width: 481px) {
	.top-nav-mb aside {
		width: 25%;
		margin-right: 20%;
	}
}

.top-nav-mb aside a {
	display: inline-block;
	height: 100%;
	padding: 4.5% 0;
}

@media only screen and (min-width: 768px) {
	.top-nav-mb aside a {
		padding: 9.5% 0;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-mb aside a {
		padding: 4.5% 0;
	}
}

.top-nav-mb .feature {
	width: 45%;
	height: 100%;
}

@media only screen and (min-width: 768px) {
	.top-nav-mb .feature {
		width: 17%;
	}
}

@media only screen and (min-width: 1024px) {
	.top-nav-mb .feature {
		width: 17%;
	}
}

.top-nav-mb .feature .additional-feature {
	width: 100%;
	background-color: #efefef;
	justify-content: space-around;
	align-items: center;
	border-radius: 0 0 20px 20px;
	margin-bottom: 5px;
}

@media only screen and (min-width: 481px) {
	.top-nav-mb .feature .additional-feature {
		margin-bottom: 5px;
	}
}

.top-nav-mb .feature .btn-statement,
.top-nav-mb .feature .btn-contact {
	font-size: 80%;
	text-align: center;
	padding: 8px 0;
}

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

	.top-nav-mb .feature .btn-statement,
	.top-nav-mb .feature .btn-contact {
		font-size: 70%;
	}
}

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

	.top-nav-mb .feature .btn-statement,
	.top-nav-mb .feature .btn-contact {
		font-size: 80%;
	}
}

.top-nav-mb .feature .btn-statement:hover,
.top-nav-mb .feature .btn-contact:hover {
	color: #2074d0;
	cursor: pointer;
}

.top-nav-mb .feature .search-and-social {
	width: 100%;
	justify-content: space-around;
	align-items: center;
	margin: 0 auto;
}

.top-nav-mb .feature .search {
	width: 80%;
	color: #fff;
	background-color: #aaaaaa;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	margin: 0 5px;
}

@media only screen and (min-width: 481px) {
	.top-nav-mb .feature .search {
		width: 85%;
	}
}

.top-nav-mb .feature .search input {
	width: 70%;
	height: 20px;
	color: #fff;
	font-size: 80%;
	border: none;
	background: transparent;
	outline: none;
	/*webkit瀏覽器專用*/
	/*Firefox 4-18瀏覽器專用*/
	/*Firefox 19+瀏覽器專用*/
	/*IE10瀏覽器專用*/
}

@media only screen and (min-width: 481px) {
	.top-nav-mb .feature .search input {
		height: 25px;
	}
}

.top-nav-mb .feature .search input::-webkit-input-placeholder {
	color: #fff;
}

.top-nav-mb .feature .search input::-moz-placeholder {
	color: #fff;
}

.top-nav-mb .feature .search input::-moz-placeholder {
	color: #fff;
}

.top-nav-mb .feature .search input:-ms-input-placeholder {
	color: #fff;
}

.top-nav-mb .feature .search .btn-search {
	width: 15%;
	color: #fff;
	text-align: center;
}

.top-nav-mb .feature .social {
	width: 15%;
	margin: 0 5px;
}

@media only screen and (min-width: 481px) {
	.top-nav-mb .feature .social {
		width: 10%;
	}
}

.top-nav-mb .feature .social a {
	display: block;
	width: 100%;
}

.nav-mobile {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.65);
	z-index: 9998;
}

@media only screen and (min-width: 768px) {
	.nav-mobile {
		display: none;
	}
}

.nav-mobile nav {
	width: 90%;
	height: 80vh;
	background: white;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	margin: 80px auto 0 auto;
	padding: 5px 0 0 0;
}

@media only screen and (min-width: 481px) {
	.nav-mobile nav {
		height: 75vh;
		margin: 80px auto 0 auto;
	}
}

.nav-mobile a {
	display: block;
	width: 90%;
	text-align: center;
	padding: 20px 15px;
	margin: 0 auto;
	border-bottom: #cbcbcb 1px solid;
	color: #213d7d;
}

.nav-mobile a:last-of-type {
	border-bottom: none;
}

.btn-nav-m {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 14%;
	height: 100%;
	text-align: center;
	font-size: 140%;
	padding: 30px 0;
	cursor: pointer;
	z-index: 11;
}

@media only screen and (min-width: 481px) {
	.btn-nav-m {
		width: 10%;
	}
}

@media only screen and (min-width: 768px) {
	.btn-nav-m {
		display: none;
	}
}

.btn-nav-m span {
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	background-color: #4b4b4b;
	margin: auto;
	transition: all .4s;
	opacity: 1;
}

.btn-nav-m span::before,
.btn-nav-m span::after {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 2px;
	background-color: #4b4b4b;
	transition: all .4s;
	z-index: 11;
}

.btn-nav-m span::before {
	top: -7px;
}

.btn-nav-m span::after {
	bottom: -7px;
}

.btn-nav-m-ov span {
	background: none;
}

.btn-nav-m-ov span::before {
	top: 0;
	transform: rotate(45deg);
	transition: all .4s;
}

.btn-nav-m-ov span::after {
	bottom: 0;
	transform: rotate(-45deg);
	transition: all .4s;
}

/* footer */
footer {
	position: relative;
	width: 100%;
	background: url(../images/footer_bg.jpg) bottom center no-repeat fixed;
	background-size: cover;
	transform: translateZ(0);
	will-change: transform;
	overflow: hidden;
	z-index: 1;
}

.footer-tip {
	font-size: 110%;
	background-color: #fcbb13;
}

.footer-tip main {
	width: 96%;
	font-size: 80%;
	line-height: 1.4;
	text-align: left;
	padding: 8px;
	margin: 0 auto;
}

@media only screen and (min-width: 768px) {
	.footer-tip main {
		font-size: 100%;
		padding: 10px;
	}
}

@media only screen and (min-width: 1024px) {
	.footer-tip main {
		padding: 15px 10px;
	}
}

@media only screen and (min-width: 1366px) {
	.footer-tip main {
		width: 1200px;
		text-align: center;
		padding: 20px 10px;
	}
}

.footer-cont main {
	width: 92%;
	/* 20210303 start */
	padding: 20px 0;
	/* 20210303 end */
	margin: 0 auto;
}

@media only screen and (min-width: 768px) {
	.footer-cont main {
		width: 96%;
		/* 20210303 start */
		padding: 20px 0;
		/* 20210303 end */
	}
}

@media only screen and (min-width: 1024px) {
	.footer-cont main {
		/* 20210303 start */
		padding: 25px 0;
		/* 20210303 end */
	}
}

@media only screen and (min-width: 1366px) {
	.footer-cont main {
		width: 1200px;
		/* 20210303 start */
		padding: 30px 0;
		/* 20210303 end */
	}
}

.footer-cont .corp-name {
	color: #fff;
	/* 20210303 start */
	font-size: 125%;
	font-weight: bold;
	text-align: left;
	margin: 0 auto 20px auto;
	/* 20210303 end */
}

@media only screen and (min-width: 768px) {
	.footer-cont .corp-name {
		/* 20210303 start */
		font-size: 120%;
		/* 20210303 end */
		margin: 0 auto 20px auto;
	}
}

@media only screen and (min-width: 1024px) {
	.footer-cont .corp-name {
		/* 20210303 start */
		font-size: 150%;
		/* 20210303 end */
		margin: 0 auto 25px auto;
	}
}

.footer-cont .copyright {
	color: #d6d6d6;
	font-size: 75%;
	text-align: center;
	margin: 0 auto;
}

.link-info {
	color: #fff;
	justify-content: flex-start;
	flex-wrap: wrap;
	/* 20210303 start */
	margin: 0 auto;
	/* 20210303 end */
}

@media only screen and (min-width: 481px) {
	.link-info {
		justify-content: space-between;
		flex-wrap: no-wrap;
		/* 20210303 start */
		margin: 0 auto 20px auto;
		/* 20210303 end */
	}
}

.link-nav {
	width: calc(100%/ 3);
	/* 20210303 start */
	margin: 0 0 35px 0;
	/* 20210303 end */
}

@media only screen and (min-width: 481px) {
	.link-nav {
		width: calc(100%/ 5);
		margin: 0;
	}
}

.link-nav aside {
	/* 20210303 start */
	font-size: 90%;
	/* 20210303 end */
	margin: 0 auto 10px auto;
}

@media only screen and (min-width: 481px) {
	.link-nav aside {
		/* 20210303 start */
		font-size: 100%;
		margin: 0 auto 10px auto;
		/* 20210303 end */
	}
}

.link-nav a {
	color: #fff;
	/* 20210303 start */
	font-size: 80%;
	/* 20210303 end */
	font-weight: normal;
	font-family: "Century Gothic", "Arial", "cwTeXYen";
	line-height: 1.4;
	text-decoration: none;
	padding: 4px 0 4px 0;
	margin: 0;
}

@media only screen and (min-width: 768px) {
	.link-nav a {
		/* 20210303 start */
		font-size: 90%;
		line-height: 1.6;
		/* 20210303 end */
	}
}

.link-nav a:hover {
	color: #fcbb13;
}

/* footer end */
.index-for-bg {
	position: relative;
	z-index: 1;
	border: #fff 1px solid;
	margin: 0;
	overflow: hidden;
}

.vbanner-index {
	width: 100%;
	margin-top: 60px;
	overflow: hidden;
}

@media only screen and (min-width: 768px) {
	.vbanner-index {
		margin-top: 62px;
	}
}

@media only screen and (min-width: 1024px) {
	.vbanner-index {
		margin-top: 65px;
	}
}

@media only screen and (min-width: 1366px) {
	.vbanner-index {
		margin-top: 80px;
	}
}

.b-pc {
	display: none;
}

@media only screen and (min-width: 768px) {
	.b-pc {
		display: block;
	}
}

.b-mb {
	display: block;
}

@media only screen and (min-width: 768px) {
	.b-mb {
		display: none;
	}
}

.vbanner-inside {
	margin-top: 60px;
}

@media only screen and (min-width: 768px) {
	.vbanner-inside {
		margin-top: 62px;
	}
}

@media only screen and (min-width: 1024px) {
	.vbanner-inside {
		margin-top: 65px;
	}
}

@media only screen and (min-width: 1366px) {
	.vbanner-inside {
		margin-top: 80px;
	}
}

.vbanner-inside img {
	width: 100%;
}

.vbanner-inside .pc {
	display: none;
}

@media only screen and (min-width: 768px) {
	.vbanner-inside .pc {
		display: block;
	}
}

.vbanner-inside .mb {
	display: block;
}

@media only screen and (min-width: 768px) {
	.vbanner-inside .mb {
		display: none;
	}
}

.main-cont-index {
	position: relative;
	padding: 20px 0 40px 0;
	z-index: 1;
}

.main-cont-index::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: url(../images/mainCont_top_index.png) left top no-repeat;
	background-size: contain;
	z-index: -1;
}

.main-cont-index::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: url(../images/mainCont_bottom_index.png) right bottom no-repeat;
	background-size: contain;
	z-index: -1;
}

.main-cont-index main {
	width: 96%;
	margin: 0 auto;
	padding: 0;
}

@media only screen and (min-width: 1366px) {
	.main-cont-index main {
		width: 1200px;
	}
}

.main-cont {
	position: relative;
	padding: 10px 0 40px 0;
	z-index: 1;
}

@media only screen and (min-width: 1024px) {
	.main-cont {
		padding: 20px 0 40px 0;
	}
}

.main-cont::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: url(../images/mainCont_top.png) right top no-repeat;
	background-size: contain;
	z-index: -1;
}

.main-cont::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: url(../images/mainCont_bottom.png) left bottom no-repeat;
	background-size: contain;
	z-index: -1;
}

.main-cont main {
	width: 96%;
	margin: 0 auto;
	padding: 0;
}

@media only screen and (min-width: 1366px) {
	.main-cont main {
		width: 1200px;
	}
}

/* 章節位置樣式 */
.breadcrumbs {
	position: relative;
	width: 30%;
	color: #444444;
	font-size: 80%;
	border: #abcdff 1px solid;
	border-radius: 20px;
	padding: 8px 25px 8px 15px;
	margin: 10px 0 20px 0;
	z-index: 2;
}

@media only screen and (min-width: 481px) {
	.breadcrumbs {
		width: 20%;
		padding: 8px 40px 8px 20px;
		font-size: 100%;
		margin: 10px 0;
	}
}

@media only screen and (min-width: 768px) {
	.breadcrumbs {
		width: 15%;
		font-size: 100%;
		padding: 8px 40px 8px 20px;
		margin: 10px 0 30px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.breadcrumbs {
		width: 12%;
		font-size: 100%;
		padding: 8px 30px 8px 20px;
		margin: 10px 0 30px 0;
	}
}

@media only screen and (min-width: 1366px) {
	.breadcrumbs {
		width: 10%;
		font-size: 100%;
		padding: 8px 20px 8px 20px;
		margin: 10px 0 40px 0;
	}
}

.breadcrumbs a {
	color: #444444;
}

.breadcrumbs a:hover {
	color: #2074d0;
}

.now-position {
	position: absolute;
	z-index: 10;
	top: 0;
	right: -30px;
	border-radius: 20px;
	padding: 8px 15px 8px 15px;
	color: #fff;
	background-color: #213d7d;
	font-size: 100%;
}

@media only screen and (min-width: 481px) {
	.now-position {
		padding: 8px 20px 8px 20px;
		top: 0;
		right: -40px;
	}
}

@media only screen and (min-width: 768px) {
	.now-position {
		padding: 8px 20px 8px 20px;
		top: 0;
		right: -60px;
	}
}

.breadcrumbs2 {
	position: relative;
	width: 42%;
	color: #444444;
	font-size: 78%;
	border: #abcdff 1px solid;
	border-radius: 20px;
	padding: 8px 25px 8px 15px;
	margin: 10px 0 20px 0;
	z-index: 2;
}

@media only screen and (min-width: 481px) {
	.breadcrumbs2 {
		width: 28%;
		padding: 8px 40px 8px 20px;
		font-size: 90%;
		margin: 10px 0;
	}
}

@media only screen and (min-width: 768px) {
	.breadcrumbs2 {
		width: 24%;
		font-size: 100%;
		padding: 8px 40px 8px 20px;
		margin: 10px 0 30px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.breadcrumbs2 {
		width: 19%;
		font-size: 100%;
		padding: 8px 30px 8px 20px;
		margin: 10px 0 30px 0;
	}
}

@media only screen and (min-width: 1366px) {
	.breadcrumbs2 {
		width: 15%;
		font-size: 100%;
		padding: 8px 20px 8px 20px;
		margin: 10px 0 40px 0;
	}
}

.breadcrumbs2 a {
	color: #444444;
}

.breadcrumbs2 a:hover {
	color: #2074d0;
}

.now-position {
	position: absolute;
	z-index: 10;
	top: 0;
	right: -55px;
	border-radius: 20px;
	padding: 8px 15px 8px 15px;
	color: #fff;
	background-color: #213d7d;
	font-size: 100%;
}

@media only screen and (min-width: 481px) {
	.now-position {
		padding: 8px 20px 8px 20px;
		top: 0;
		right: -55px;
	}
}

@media only screen and (min-width: 768px) {
	.now-position {
		padding: 8px 20px 8px 20px;
		top: 0;
		right: -60px;
	}
}

/*20210122 START新增反詐騙聲明-燈箱設計 浮出燈箱*/
.window-statement {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.65);
	z-index: 11111;
}

.window-statement aside {
	display: block;
	position: relative;
	width: 95%;
	text-align: center;
	margin: 60px auto 0 auto;
	padding: 10px 10px;
	background-color: #ffffff;
}

@media only screen and (min-width: 481px) {
	.window-statement aside {
		margin: 25px auto 0 auto;
		padding: 5px 10px 0 10px;
		width: 600px;
	}
}

@media only screen and (min-width: 1366px) {
	.window-statement aside {
		margin: 10% auto 0 auto;
		padding: 20px 10px;
		width: 700px;
	}
}

.window-statement aside .btn-close-w {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	transition: All 0.4s ease-in-out;
	-webkit-transition: All 0.4s ease-in-out;
	-moz-transition: All 0.4s ease-in-out;
	-o-transition: All 0.4s ease-in-out;
	z-index: 21;
}

.window-statement aside .btn-close-w:hover {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
}

.window-statement article {
	width: 95%;
	margin: 30px auto 30px auto;
	font-size: 100%;
	color: #524945;
	line-height: 1.4rem;
}

@media only screen and (min-width: 481px) {
	.window-statement article {
		font-size: 90%;
		line-height: 1.4rem;
		width: 95%;
		margin: 15px auto;
	}
}

@media only screen and (min-width: 1366px) {
	.window-statement article {
		font-size: 110%;
		line-height: 1.6rem;
		width: 90%;
		margin: 15px auto;
	}
}

.window-statement article .titlemain {
	letter-spacing: 3px;
	font-size: 120%;
	font-weight: bold;
	margin: 10px auto 5px 0;
	padding: 0 0 8px 0;
	text-align: center;
	border-bottom: #bababa 1px solid;
	color: #213d7d;
}

@media only screen and (min-width: 481px) {
	.window-statement article .titlemain {
		letter-spacing: 3px;
		margin: 15px 0 5px 0;
		padding: 0 0 10px 0;
	}
}

@media only screen and (min-width: 1366px) {
	.window-statement article .titlemain {
		letter-spacing: 5px;
		font-size: 130%;
		margin: 30px 0 30px 0;
		padding: 0 0 10px 0;
	}
}

.window-statement article .statement {
	text-align: left;
	color: #666666;
}

.window-statement article .statement p {
	margin: 0 auto 15px auto;
}

.window-statement article .statement span {
	color: #eea003;
}

/* 20210122 END新增反詐騙聲明-燈箱設計 END*/
.window-call {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.65);
	z-index: 11111;
}

.window-call aside {
	display: block;
	position: relative;
	width: 95%;
	text-align: center;
	margin: 60px auto 0 auto;
	padding: 10px 10px 40px 10px;
	background-color: #ffffff;
}

@media only screen and (min-width: 481px) {
	.window-call aside {
		margin: 25px auto 0 auto;
		padding: 5px 10px 40px 10px;
		width: 600px;
	}
}

@media only screen and (min-width: 1366px) {
	.window-call aside {
		margin: 10% auto 0 auto;
		padding: 20px 10px;
		width: 700px;
	}
}

.window-call aside .btn-close-w {
	display: block;
	position: absolute;
	top: 15px;
	right: 15px;
	transition: All 0.4s ease-in-out;
	-webkit-transition: All 0.4s ease-in-out;
	-moz-transition: All 0.4s ease-in-out;
	-o-transition: All 0.4s ease-in-out;
	z-index: 21;
}

.window-call aside .btn-close-w:hover {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
}

.window-call article {
	width: 95%;
	margin: 30px auto 30px auto;
	font-size: 100%;
	color: #524945;
	line-height: 1.4rem;
	text-align: left;
}

@media only screen and (min-width: 481px) {
	.window-call article {
		font-size: 90%;
		line-height: 1.4rem;
		width: 95%;
		margin: 15px auto;
	}
}

@media only screen and (min-width: 1366px) {
	.window-call article {
		font-size: 110%;
		line-height: 1.6rem;
		width: 90%;
		margin: 15px auto;
	}
}

.window-call article .titlemain {
	letter-spacing: 3px;
	font-size: 120%;
	font-weight: bold;
	margin: 10px auto 5px 0;
	padding: 0 0 8px 0;
	text-align: center;
	border-bottom: #bababa 1px solid;
	color: #213d7d;
}

@media only screen and (min-width: 481px) {
	.window-call article .titlemain {
		letter-spacing: 3px;
		margin: 15px 0 5px 0;
		padding: 0 0 10px 0;
	}
}

@media only screen and (min-width: 1366px) {
	.window-call article .titlemain {
		letter-spacing: 5px;
		font-size: 130%;
		margin: 30px 0 30px 0;
		padding: 0 0 10px 0;
	}
}

.window-call article span {
	color: #eea003;
}

/* 門市據點內容 開始 */
.address-cont .cont-head {
	display: block;
	margin-bottom: 30px;
}

@media only screen and (min-width: 481px) {
	.address-cont .cont-head {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 40px;
	}
}

.address-cont .address-title {
	width: 100%;
	color: #000;
	font-weight: bold;
	font-size: 160%;
	text-align: center;
	letter-spacing: 2px;
	margin: 0 auto 15px auto;
}

@media only screen and (min-width: 481px) {
	.address-cont .address-title {
		width: 40%;
		text-align: left;
		font-size: 160%;
		margin: 0;
	}
}

@media only screen and (min-width: 768px) {
	.address-cont .address-title {
		width: 25%;
		font-size: 200%;
	}
}

@media only screen and (min-width: 1024px) {
	.address-cont .address-title {
		width: 20%;
		font-size: 240%;
	}
}

.address-cont .address-title aside {
	color: #8d8d8d;
	font-size: 44%;
	letter-spacing: 2px;
	font-weight: 200;
	margin-top: 5px;
}

@media only screen and (min-width: 768px) {
	.address-cont .address-title aside {
		font-size: 44%;
	}
}

.address-cont .choice {
	display: flex;
	justify-content: space-evenly;
	align-items: flex-end;
	width: 100%;
	margin: 0 0 5px 0;
}

@media only screen and (min-width: 481px) {
	.address-cont .choice {
		width: 50%;
		margin: 0;
	}
}

@media only screen and (min-width: 1024px) {
	.address-cont .choice {
		width: 40%;
	}
}

.address-cont .btn-location-search {
	width: 96%;
	color: #fff;
	text-align: center;
	background-color: #aaa;
	padding: 10px 20px;
	border-radius: 8px;
	cursor: pointer;
	margin: 0 auto;
}

@media only screen and (min-width: 481px) {
	.address-cont .btn-location-search {
		width: 10%;
		margin: 0;
	}
}

.address-cont .btn-location-search:hover {
	background-color: #2074d0;
}

.address-cont .style {
	display: flex;
	width: 45%;
	justify-content: space-around;
	align-items: center;
	border-bottom: #393939 1px solid;
	margin: 10px 4px;
}

@media only screen and (min-width: 481px) {
	.address-cont .style {
		width: 40%;
		margin: 10px 5px;
	}
}

@media only screen and (min-width: 1024px) {
	.address-cont .style {
		margin: 10px 10px;
	}
}

.address-cont .nav-name {
	color: #8e8e8e;
	display: none;
}

@media only screen and (min-width: 481px) {
	.address-cont .nav-name {
		display: block;
		font-size: 100%;
	}
}

.address-cont .icon {
	display: block;
	color: #8e8e8e;
	font-size: 90%;
	margin: 0;
}

@media only screen and (min-width: 481px) {
	.address-cont .icon {
		font-size: 100%;
		display: none;
	}
}

.address-cont .select-style-icon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 5px 0 0;
}

.address-cont .select-style-icon select {
	margin: 0 0 0 4px;
}

@media only screen and (min-width: 768px) {
	.address-cont .select-style-icon select {
		margin: 0 0 0 10px;
	}
}

.address-cont .select-style-self {
	width: 100%;
	color: #393939;
	font-size: 100%;
	background: transparent;
	border: none;
	margin: 15px 0;
	padding: 4px 3px;
	cursor: pointer;
	outline: none;
}

@media only screen and (min-width: 481px) {
	.address-cont .select-style-self {
		font-size: 120%;
		padding: 5px 8px;
	}
}

.address-cont .location {
	width: 100%;
}

@media only screen and (min-width: 481px) {
	.address-cont .location {
		width: 96%;
	}
}

.address-cont .sub-title {
	display: flex;
	color: #1b91d4;
	font-size: 180%;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2px;
	margin: 10px 0 20px 0;
}

.address-cont .location-area {
	position: relative;
	width: 100%;
	margin: 20px auto 50px auto;
	padding-bottom: 30px;
	overflow: hidden;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area {
		display: flex;
		justify-content: space-between;
		margin: 0 auto 60px auto;
		padding-bottom: 40px;
	}
}

.address-cont .location-area .map-info {
	width: 100%;
	margin: 0 auto 15px auto;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area .map-info {
		width: 48%;
		margin: 0;
	}
}

.address-cont .location-area .map-info aside {
	font-size: 120%;
	color: #434343;
	margin-bottom: 10px;
}

.address-cont .location-area .map-info aside i {
	color: #7e7e7e;
	margin: 0 15px 0 0;
}

.address-cont .location-area .location-info {
	width: 100%;
	margin: 0 auto 20px auto;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area .location-info {
		width: 48%;
		margin: 0;
	}
}

.address-cont .location-area .location-info figcaption {
	position: relative;
	color: #434343;
	font-size: 160%;
	line-height: 1.8rem;
	font-weight: bold;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: #dddddd 1px solid;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area .location-info figcaption {
		font-size: 160%;
		line-height: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.address-cont .location-area .location-info figcaption {
		font-size: 200%;
	}
}

.address-cont .location-area .location-info figcaption .link {
	position: absolute;
	top: 0;
	right: 0;
	width: 25px;
	font-size: 100%;
	justify-content: space-between;
	align-items: center;
}

.address-cont .location-area .location-info figcaption .link .btn-fb {
	width: 45%;
	text-align: center;
}

.address-cont .location-area .location-info figcaption .link .btn-fb img {
	width: 100%;
	vertical-align: baseline;
}

.address-cont .location-area .location-info figcaption .link .btn-blog {
	width: 45%;
	text-align: center;
}

.address-cont .location-area .location-info figcaption .link .btn-blog img {
	width: 100%;
}

.address-cont .location-area .location-info figure .infotext {
	width: 100%;
	font-size: 100%;
	margin: 10px auto;
	overflow: hidden;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area .location-info figure .infotext {
		font-size: 100%;
	}
}

@media only screen and (min-width: 1366px) {
	.address-cont .location-area .location-info figure .infotext {
		font-size: 120%;
	}
}

.address-cont .location-area .location-info figure .infotext summary {
	float: left;
	width: 28%;
	line-height: 1.4;
	margin-right: 10px;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area .location-info figure .infotext summary {
		width: 30%;
	}
}

@media only screen and (min-width: 768px) {
	.address-cont .location-area .location-info figure .infotext summary {
		width: 25%;
	}
}

@media only screen and (min-width: 1024px) {
	.address-cont .location-area .location-info figure .infotext summary {
		width: 20%;
	}
}

.address-cont .location-area .location-info figure .infotext p {
	float: left;
	width: 67%;
	line-height: 1.4;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area .location-info figure .infotext p {
		width: 65%;
	}
}

@media only screen and (min-width: 768px) {
	.address-cont .location-area .location-info figure .infotext p {
		width: 62%;
	}
}

@media only screen and (min-width: 1024px) {
	.address-cont .location-area .location-info figure .infotext p {
		width: 67%;
	}
}

.address-cont .location-area .location-info .btn-info {
	display: block;
	width: 25%;
	cursor: pointer;
	background-color: #213d7d;
	color: #fff;
	font-size: 100%;
	text-align: center;
	margin: 20px 0 10px 0;
	padding: 10px 15px;
}

@media only screen and (min-width: 481px) {
	.address-cont .location-area .location-info .btn-info {
		width: 30%;
		font-size: 100%;
	}
}

@media only screen and (min-width: 768px) {
	.address-cont .location-area .location-info .btn-info {
		width: 27%;
		font-size: 110%;
	}
}

@media only screen and (min-width: 1024px) {
	.address-cont .location-area .location-info .btn-info {
		width: 25%;
		font-size: 130%;
	}
}

.address-cont .location-area .location-info .btn-info:hover {
	background-color: #fcbb13;
	color: #213d7d;
}

.address-cont .location-area .location-info .case-info {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.address-cont .location-area .location-info .case-info dl {
	width: 100%;
	line-height: 1.2;
	margin: 4px 0;
}

@media only screen and (min-width: 1100px) {
	.address-cont .location-area .location-info .case-info dl {
		margin: 4px 0;
	}
}

.address-cont .location-area .location-info .case-info dl dt {
	/* 20221021 start */
	width: 100px;
	line-height: 1.4;
	/* 20221021 end */
}

.address-cont .location-area .location-info .case-info dl dd {
	/* 20221021 start */
	width: calc(100% - 100px);
	line-height: 1.4;
	/* 20221021 end */
}

.address-cont .link {
	width: 25px;
	font-size: 100%;
}

.address-cont .link .btn-fb {
	width: 45%;
	text-align: center;
}

.address-cont .link .btn-fb img {
	width: 100%;
	vertical-align: baseline;
}

/*據點內容 結束*/
/*首頁新聞*/
.index_news-section .newsbox {
	display: block;
}

@media only screen and (min-width: 1024px) {
	.index_news-section .newsbox {
		display: flex;
		justify-content: space-around;
		margin: 50px auto 80px auto;
	}
}

.index-news-leftbox {
	width: 100%;
	padding: 15px 0 5px 0;
}

@media only screen and (min-width: 1024px) {
	.index-news-leftbox {
		width: 20%;
		padding: 30px 0;
	}
}

.index-news-leftbox .index-title {
	color: #0f3661;
	font-size: 160%;
	letter-spacing: 1.2px;
	text-align: center;
}

@media only screen and (min-width: 1024px) {
	.index-news-leftbox .index-title {
		font-size: 200%;
		letter-spacing: 2px;
	}
}

.index-news-leftbox .index-title aside {
	color: #f2c21a;
	font-size: 70%;
	letter-spacing: 4px;
}

.index-news-leftbox .btn-more {
	position: relative;
	z-index: 1;
	cursor: pointer;
	display: block;
	color: #666666;
	font-size: 80%;
	border: #dcdcdc 1px solid;
	padding: 5px 20px;
	margin: 10px auto 15px auto;
	width: 30%;
	text-align: center;
}

@media only screen and (min-width: 1024px) {
	.index-news-leftbox .btn-more {
		font-size: 90%;
		width: 50%;
		margin: 30px auto 15px auto;
		padding: 15px 30px;
	}
}

.index-news-leftbox .btn-more::before {
	content: '';
	position: absolute;
	background-color: #dcdcdc;
	height: 2px;
	width: 40px;
	top: 50%;
	left: -20%;
	z-index: 5;
}

.index-news-leftbox .btn-more:hover,
.index-news-leftbox .btn-more.selected {
	background-color: #f2c21a;
	color: #0f3661;
	border: #0f3661 1px solid;
}

.index-news-leftbox .btn-more:hover::before,
.index-news-leftbox .btn-more.selected::before {
	content: '';
	position: absolute;
	background-color: #0f3661;
	height: 2px;
	width: 40px;
	top: 50%;
	left: -15%;
	z-index: 5;
}

.index-news-rightbox {
	width: 100%;
}

@media only screen and (min-width: 768px) {
	.index-news-rightbox {
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
	}
}

@media only screen and (min-width: 1024px) {
	.index-news-rightbox {
		width: 80%;
	}
}

.ind-ns-box {
	position: relative;
	width: 88%;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
	background-color: #fff;
	margin: 0 20px 20px 20px;
	z-index: 1;
}

@media only screen and (min-width: 768px) {
	.ind-ns-box {
		width: calc(100%/ 4);
		margin: 0 20px;
	}
}

.ind-ns-box figure {
	position: relative;
	z-index: 1;
	width: 100%;
	cursor: pointer;
	overflow: hidden;
	margin: 0;
}

.ind-ns-box figure img {
	width: 100%;
	vertical-align: middle;
	transform: scale(1, 1);
	transition: all 1s ease-out;
}

.ind-ns-box figure:hover img {
	transform: scale(1.1, 1.1);
}

.ind-ns-box figcaption {
	position: relative;
	z-index: 1;
	padding: 30px 10px 40px 10px;
	margin: 0;
}

.ind-ns-box figcaption .tag-news {
	position: absolute;
	min-width: 40%;
	padding: 8px 15px;
	background-color: #0f3661;
	color: #f2c21a;
	text-align: center;
	font-size: 100%;
	left: 0;
	top: -6%;
	z-index: 10;
}

.ind-ns-box figcaption .tag-class {
	background-color: #f2c21a;
	color: #0f3661;
}

.ind-ns-box figcaption .year {
	color: #bab9b9;
	font-size: 95%;
	text-align: left;
	margin: 0 5px;
	line-height: 1.0rem;
}

.ind-ns-box figcaption .time {
	color: #0f3661;
	font-size: 140%;
	line-height: 1.5rem;
	text-align: left;
	margin: 0;
}

.ind-ns-box figcaption .text-tit {
	/* 20210203 start */
	color: #0f3661;
	font-size: 140%;
	line-height: 1.8rem;
	margin: 15px auto;
	text-align: left;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* 20210203 end */
}

.ind-ns-box figcaption .text-cont {
	/* 20210203 start */
	font-size: 105%;
	line-height: 1.5rem;
	color: #525252;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	margin: 10px auto;
	overflow: hidden;
	/* 20210203 end */
}

.ind-ns-box figcaption .news-more {
	position: absolute;
	right: 5%;
	bottom: 5%;
	color: #408adc;
	font-size: 90%;
}

/* 20210122 start */
.videoarea {
	padding: 30px 0;
}

@media only screen and (min-width: 768px) {
	.videoarea {
		/* 20210629 start */
		padding: 50px 0 40px 0;
		/* 20210629 end */
	}
}

@media only screen and (min-width: 1024px) {
	.videoarea {
		/* 20210629 start */
		padding: 50px 0 0 0;
		/* 20210629 end */
	}
}

.videoarea .bigvideo {
	display: block;
}

@media only screen and (min-width: 1024px) {
	.videoarea .bigvideo {
		/* 20210629 start */
		display: flex;
		justify-content: space-around;
		flex-direction: row-reverse;
		margin: 0px auto 40px auto;
		/* 20210629 end */
	}
}

.videoarea .video-title-box {
	width: 100%;
	padding: 15px 0 5px 0;
}

@media only screen and (min-width: 1024px) {
	.videoarea .video-title-box {
		width: 20%;
		padding: 30px 0;
	}
}

.videoarea .video-title-box .video-title {
	color: #0f3661;
	font-size: 160%;
	letter-spacing: 1.2px;
	text-align: center;
}

@media only screen and (min-width: 1024px) {
	.videoarea .video-title-box .video-title {
		font-size: 200%;
		letter-spacing: 2px;
	}
}

.videoarea .video-title-box .video-title aside {
	color: #f2c21a;
	font-size: 70%;
	letter-spacing: 4px;
}

.videoarea .video-title-box .btn-more {
	/* 20210203 start */
	position: relative;
	z-index: 1;
	cursor: pointer;
	display: block;
	color: #666666;
	font-size: 80%;
	border: #dcdcdc 1px solid;
	padding: 5px 20px;
	margin: 10px auto 15px auto;
	width: 30%;
	text-align: center;
	/* 20210203 end */
}

@media only screen and (min-width: 1024px) {
	.videoarea .video-title-box .btn-more {
		font-size: 90%;
		width: 45%;
		margin: 30px auto 15px auto;
		padding: 15px;
	}
}

@media only screen and (min-width: 1366px) {
	.videoarea .video-title-box .btn-more {
		font-size: 90%;
		width: 45%;
		margin: 30px auto 15px auto;
		padding: 15px 30px;
	}
}

.videoarea .video-title-box .btn-more::before {
	content: '';
	position: absolute;
	background-color: #dcdcdc;
	height: 2px;
	width: 40px;
	top: 50%;
	left: -20%;
	z-index: 5;
}

.videoarea .video-title-box .btn-more:hover,
.videoarea .video-title-box .btn-more.selected {
	background-color: #f2c21a;
	color: #0f3661;
	border: #0f3661 1px solid;
}

.videoarea .video-title-box .btn-more:hover::before,
.videoarea .video-title-box .btn-more.selected::before {
	content: '';
	position: absolute;
	background-color: #0f3661;
	height: 2px;
	width: 40px;
	top: 50%;
	left: -15%;
	z-index: 5;
}

.videoarea .video-box {
	/* 20210203 start */
	display: block;
	width: 100%;
	/* 20210203 end */
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box {
		/* 20210203 start */
		display: flex;
		width: 100%;
		justify-content: flex-end;
		align-items: stretch;
		/* 20210203 end */
	}
}

@media only screen and (min-width: 1024px) {
	.videoarea .video-box {
		/* 20210203 start */
		width: 83%;
		/* 20210203 end */
	}
}

.videoarea .video-box .divine-left {
	position: relative;
	width: 100%;
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box .divine-left {
		width: 120%;
		margin: 0;
	}
}

.videoarea .video-box .divine-right {
	position: relative;
	width: 100%;
	display: block;
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box .divine-right {
		width: 38%;
		margin: 0 0 0 4%;
	}
}

.videoarea .video-box .photo {
	position: relative;
	width: 100%;
	height: 0;
	margin-bottom: 20px;
	padding-bottom: 58%;
	cursor: pointer;
	overflow: hidden;
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box .photo {
		width: 100%;
	}
}

.videoarea .video-box .photo img {
	width: 100%;
	vertical-align: middle;
	transform: scale(1, 1);
	transition: all 1s ease-out;
}

.videoarea .video-box .photo:hover img {
	transform: scale(1.1, 1.1);
}

.videoarea .video-box .photo:hover::before {
	background-color: transparent;
}

.videoarea .video-box .photo:hover .info {
	color: #fff;
	background-color: rgba(0, 0, 0, 0.55);
}

.videoarea .video-box .photo:hover span {
	color: #ffc600;
}

.videoarea .video-box .photo:hover .photo-title {
	/* 20210203 start */
	color: #fff;
	/* 20210203 end */
}

.videoarea .video-box .photo-s {
	position: relative;
	width: 100%;
	margin-bottom: 20px;
	cursor: pointer;
	overflow: hidden;
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box .photo-s {
		margin-bottom: 10px;
	}
}

@media only screen and (min-width: 1366px) {
	.videoarea .video-box .photo-s {
		margin: 0 0 15px 10px;
	}
}

.videoarea .video-box .photo-s img {
	width: 100%;
	vertical-align: middle;
	transform: scale(1, 1);
	transition: all 1s ease-out;
}

.videoarea .video-box .photo-s:hover img {
	transform: scale(1.1, 1.1);
}

.videoarea .video-box .photo-s:hover::before {
	background-color: transparent;
}

.videoarea .video-box .photo-s:hover .info {
	color: #fff;
	background-color: rgba(0, 0, 0, 0.55);
}

.videoarea .video-box .photo-s:hover span {
	color: #ffc600;
}

.videoarea .video-box .photo-s:hover .photo-title-s {
	/* 20210203 start */
	color: #fff;
	/* 20210203 end */
}

.videoarea .video-box .info {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.6);
	z-index: 5;
}

.videoarea .video-box .photo-name {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	font-size: 100%;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	padding: 10px 25px;
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box .photo-name {
		display: block;
		font-size: 120%;
	}
}

.videoarea .video-box .photo-title {
	/* 20210203 start */
	width: auto;
	font-size: 100%;
	color: #000;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 10px 30px 10px 15px;
	/* 20210203 end */
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box .photo-title {
		font-size: 120%;
		padding: 10px 110px 10px 15px;
	}
}

.videoarea .video-box .photo-title-s {
	/* 20210203 start */
	width: auto;
	font-size: 100%;
	color: #000;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 10px 20px 10px 15px;
	/* 20210203 end */
}

@media only screen and (min-width: 481px) {
	.videoarea .video-box .photo-title-s {
		font-size: 100%;
	}
}

/* 20210122 end */
/* 20210629 start */
.service-section {
	margin: 0 auto 40px auto;
	overflow: hidden;
}

@media only screen and (min-width: 481px) {
	.service-section {
		margin: 0 auto 60px auto;
	}
}

.service-section img {
	width: 100%;
}

.service-section .service-title {
	position: relative;
	color: #0f3661;
	font-size: 160%;
	text-align: center;
	letter-spacing: 1.2px;
	margin: 0 auto 30px auto;
	z-index: 1;
}

@media only screen and (min-width: 1024px) {
	.service-section .service-title {
		font-size: 200%;
		letter-spacing: 2px;
		padding: 30px 0;
		margin: 0 auto 10px auto;
	}
}

.service-section .service-title aside {
	color: #f2c21a;
	font-size: 70%;
	letter-spacing: 4px;
}

.service-section .service-title::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 2%;
	width: 28%;
	height: 1px;
	background-color: #aeaeae;
	z-index: 5;
}

@media only screen and (min-width: 481px) {
	.service-section .service-title::before {
		width: 35%;
	}
}

@media only screen and (min-width: 768px) {
	.service-section .service-title::before {
		width: 37%;
	}
}

@media only screen and (min-width: 1024px) {
	.service-section .service-title::before {
		width: 38%;
	}
}

.service-section .service-title::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 2%;
	width: 28%;
	height: 1px;
	background-color: #aeaeae;
	z-index: 5;
}

@media only screen and (min-width: 481px) {
	.service-section .service-title::after {
		width: 35%;
	}
}

@media only screen and (min-width: 768px) {
	.service-section .service-title::after {
		width: 37%;
	}
}

@media only screen and (min-width: 1024px) {
	.service-section .service-title::after {
		width: 38%;
	}
}

.service-section .service-nav-pc {
	display: none;
}

@media only screen and (min-width: 481px) {
	.service-section .service-nav-pc {
		display: flex;
		position: relative;
		width: 96%;
		justify-content: center;
		align-items: center;
		margin: 0 auto 30px auto;
		z-index: 0;
	}
}

@media only screen and (min-width: 1024px) {
	.service-section .service-nav-pc {
		margin: 0 auto 40px auto;
	}
}

.service-section .service-nav-pc button {
	position: relative;
	width: calc((100% - 40%)/6);
	color: #fff;
	text-align: center;
	font-size: 100%;
	letter-spacing: 2px;
	background-color: #0f3661;
	margin: 0 2%;
	padding: 15px 0;
	cursor: pointer;
	border: none;
	outline: none;
}

@media only screen and (min-width: 768px) {
	.service-section .service-nav-pc button {
		padding: 20px 5px;
	}
}

@media only screen and (min-width: 1024px) {
	.service-section .service-nav-pc button {
		width: calc((100% - 45%)/6);
		font-size: 115%;
		padding: 20px 10px;
	}
}

@media only screen and (min-width: 1366px) {
	.service-section .service-nav-pc button {
		font-size: 135%;
	}
}

.service-section .service-nav-pc button:hover,
.service-section .service-nav-pc button.selected {
	color: #000;
	background-color: #fcbb13;
}

.service-section .service-nav-pc button:hover::after,
.service-section .service-nav-pc button.selected::after {
	content: '';
	position: absolute;
	top: -8px;
	left: -8%;
	width: 100%;
	height: 100%;
	background: transparent;
	border: #1075e5 1px solid;
	z-index: 1;
	animation: service-nav-hover 0.2s linear;
}

.service-section .service-nav-pc .icon-child {
	position: absolute;
	top: -10%;
	left: 2%;
	width: 4.5%;
	z-index: 1;
}

@media only screen and (min-width: 1024px) {
	.service-section .service-nav-pc .icon-child {
		top: -15%;
		left: 3%;
		width: 4%;
	}
}

.service-section .service-nav-pc .icon-adult {
	position: absolute;
	top: -10%;
	right: 2%;
	width: 4.5%;
	z-index: 1;
}

@media only screen and (min-width: 1024px) {
	.service-section .service-nav-pc .icon-adult {
		top: -15%;
		right: 3%;
		width: 4%;
	}
}

.service-section .service-nav-pc .bg-hLine {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #0f3661 30%, #0f3661 70%, rgba(255, 255, 255, 0) 100%);
	z-index: -1;
}

.service-section .service-nav-mb {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto 30px auto;
	z-index: 0;
}

@media only screen and (min-width: 481px) {
	.service-section .service-nav-mb {
		display: none;
	}
}

.service-section .service-nav-mb button {
	position: relative;
	width: calc((100% - 36%)/3);
	color: #fff;
	text-align: center;
	font-size: 100%;
	letter-spacing: 2px;
	background-color: #0f3661;
	margin: 0 2%;
	padding: 10px 5px;
	cursor: pointer;
	border: none;
	outline: none;
}

.service-section .service-nav-mb button:hover,
.service-section .service-nav-mb button.selected {
	color: #000;
	background-color: #fcbb13;
}

.service-section .service-nav-mb button:hover::after,
.service-section .service-nav-mb button.selected::after {
	content: '';
	position: absolute;
	top: -5px;
	left: -5%;
	width: 96%;
	height: 96%;
	background: transparent;
	border: #1075e5 1px solid;
	z-index: 1;
	animation: service-nav-hover 0.2s linear;
}

.service-section .service-nav-up {
	display: flex;
	position: relative;
	right: -5%;
	justify-content: center;
	align-items: center;
	margin: 0 auto 15px auto;
	z-index: 0;
}

.service-section .service-nav-up .icon-child {
	position: absolute;
	top: -10%;
	left: 3%;
	width: 7%;
	z-index: 1;
}

.service-section .service-nav-up .bg-hLine {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #0f3661 30%);
	z-index: -1;
}

.service-section .service-nav-down {
	display: flex;
	position: relative;
	left: -5%;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	z-index: 0;
}

.service-section .service-nav-down .icon-adult {
	position: absolute;
	top: -10%;
	right: 3%;
	width: 7%;
	z-index: 1;
}

.service-section .service-nav-down .bg-hLine {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, #0f3661 70%, rgba(255, 255, 255, 0) 100%);
	z-index: -1;
}

@keyframes service-nav-hover {
	from {
		left: 5%;
		opacity: 0;
	}

	to {
		left: -8%;
		opacity: 1;
	}

}

.sort-nav {
	position: relative;
	margin: 0 auto 30px auto;
	z-index: 0;
}

@media only screen and (min-width: 1024px) {
	.sort-nav {
		margin: 0 auto 50px auto;
	}
}

.item-container {
	display: flex;
	width: 90% !important;
	margin: 0 auto;
	overflow: hidden;
}

@media only screen and (min-width: 481px) {
	.item-container {
		width: 80% !important;
	}
}

@media only screen and (min-width: 768px) {
	.item-container {
		width: 70% !important;
	}
}

.item-container .item {
	position: relative;
	width: calc(100%/ 4);
	font-size: 100%;
	text-align: center;
	border-right: #0f3661 1px solid;
	cursor: pointer;
	padding: 4px 0;
}

@media only screen and (min-width: 481px) {
	.item-container .item {
		width: calc(100%/ 6);
		padding: 8px 0;
	}
}

@media only screen and (min-width: 1024px) {
	.item-container .item {
		font-size: 115%;
	}
}

.item-container .item:hover::before,
.item-container .item.selected::before {
	content: '';
	position: absolute;
	top: 0;
	left: 5%;
	width: 90%;
	height: 100%;
	background-color: #dcdcdc;
	z-index: -1;
}

.item-container .item:last-of-type {
	border-right: none;
}

.customPrevBtn {
	display: none;
	position: absolute;
	top: 10%;
	left: -0.5%;
	color: #dcdcdc;
	font-size: 150%;
	cursor: pointer;
	z-index: 20;
}

@media only screen and (min-width: 481px) {
	.customPrevBtn {
		display: none;
	}
}

.customNextBtn {
	display: none;
	position: absolute;
	top: 10%;
	right: -0.5%;
	color: #dcdcdc;
	font-size: 150%;
	cursor: pointer;
	z-index: 20;
}

@media only screen and (min-width: 481px) {
	.customNextBtn {
		display: none;
	}
}

.unit-container {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}

.unit {
	display: block;
	position: relative;
	width: calc((100% - 12px)/2);
	text-align: center;
	font-size: 100%;
	line-height: 1.2;
	letter-spacing: 2px;
	background: #fff;
	border: #c5c5c5 1px solid;
	cursor: pointer;
	margin: 0 3px 3px 3px;
	padding: 10px 0;
	z-index: 0;
}

@media only screen and (min-width: 481px) {
	.unit {
		width: calc((100% - 24px)/4);
		font-size: 90%;
		padding: 15px 0;
	}
}

@media only screen and (min-width: 768px) {
	.unit {
		font-size: 110%;
	}
}

@media only screen and (min-width: 1024px) {
	.unit {
		font-size: 140%;
	}
}

.unit span {
	position: relative;
	top: 0;
	color: #0f3661;
}

.unit::after {
	content: '';
	position: absolute;
	bottom: -45px;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fcbb13;
	text-align: center;
	font-size: 60%;
	letter-spacing: 5px;
	z-index: -1;
	opacity: 0;
}

.unit:hover,
.unit.selected {
	background: #0f3661;
}

.unit:hover span,
.unit.selected span {
	top: -5px;
	color: #fff;
}

.unit:hover::before,
.unit.selected::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.unit:hover:nth-of-type(1)::before,
.unit.selected:nth-of-type(1)::before {
	background: url(../images/service/unit_1_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(2)::before,
.unit.selected:nth-of-type(2)::before {
	background: url(../images/service/unit_2_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(3)::before,
.unit.selected:nth-of-type(3)::before {
	background: url(../images/service/unit_3_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(4)::before,
.unit.selected:nth-of-type(4)::before {
	background: url(../images/service/unit_4_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(5)::before,
.unit.selected:nth-of-type(5)::before {
	background: url(../images/service/unit_5_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(6)::before,
.unit.selected:nth-of-type(6)::before {
	background: url(../images/service/unit_6_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(7)::before,
.unit.selected:nth-of-type(7)::before {
	background: url(../images/service/unit_7_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(8)::before,
.unit.selected:nth-of-type(8)::before {
	background: url(../images/service/unit_8_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(9)::before,
.unit.selected:nth-of-type(9)::before {
	background: url(../images/service/unit_9_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(10)::before,
.unit.selected:nth-of-type(10)::before {
	background: url(../images/service/unit_10_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(11)::before,
.unit.selected:nth-of-type(11)::before {
	background: url(../images/service/unit_11_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(12)::before,
.unit.selected:nth-of-type(12)::before {
	background: url(../images/service/unit_12_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(13)::before,
.unit.selected:nth-of-type(13)::before {
	background: url(../images/service/unit_13_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover:nth-of-type(14)::before,
.unit.selected:nth-of-type(14)::before {
	background: url(../images/service/unit_14_bg.jpg) no-repeat;
	background-size: cover;
}

.unit:hover::after,
.unit.selected::after {
	bottom: -22px;
	opacity: 1;
}

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

	.unit:hover::after,
	.unit.selected::after {
		bottom: -30px;
	}
}

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

	.unit:hover::after,
	.unit.selected::after {
		bottom: -35px;
	}
}

.unit:hover:nth-of-type(1)::after,
.unit.selected:nth-of-type(1)::after {
	content: "DASO";
}

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

	.unit:hover:nth-of-type(1)::after,
	.unit.selected:nth-of-type(1)::after {
		content: "DASO";
	}
}

.unit:hover:nth-of-type(2)::after,
.unit.selected:nth-of-type(2)::after {
	content: "LONGMEN";
}

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

	.unit:hover:nth-of-type(2)::after,
	.unit.selected:nth-of-type(2)::after {
		content: "LONGMEN";
	}
}

.unit:hover:nth-of-type(3)::after,
.unit.selected:nth-of-type(3)::after {
	content: "BYONE";
}

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

	.unit:hover:nth-of-type(3)::after,
	.unit.selected:nth-of-type(3)::after {
		content: "BYONE";
	}
}

.unit:hover:nth-of-type(4)::after,
.unit.selected:nth-of-type(4)::after {
	content: "YNSO";
}

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

	.unit:hover:nth-of-type(4)::after,
	.unit.selected:nth-of-type(4)::after {
		content: "YNSO";
	}
}

.unit:hover:nth-of-type(5)::after,
.unit.selected:nth-of-type(5)::after {
	content: "FANGYANG";
}

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

	.unit:hover:nth-of-type(5)::after,
	.unit.selected:nth-of-type(5)::after {
		content: "FANGYANG";
	}
}

.unit:hover:nth-of-type(6)::after,
.unit.selected:nth-of-type(6)::after {
	content: "REALGOOD";
}

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

	.unit:hover:nth-of-type(6)::after,
	.unit.selected:nth-of-type(6)::after {
		content: "REALGOOD";
	}
}

.unit:hover:nth-of-type(7)::after,
.unit.selected:nth-of-type(7)::after {
	content: "REALGOOD";
}

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

	.unit:hover:nth-of-type(7)::after,
	.unit.selected:nth-of-type(7)::after {
		content: "REALGOOD";
	}
}

.unit:hover:nth-of-type(8)::after,
.unit.selected:nth-of-type(8)::after {
	content: "TKB e-Learning";
}

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

	.unit:hover:nth-of-type(8)::after,
	.unit.selected:nth-of-type(8)::after {
		content: "TKB e-Learning";
	}
}

.unit:hover:nth-of-type(9)::after,
.unit.selected:nth-of-type(9)::after {
	content: "TKB TV";
}

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

	.unit:hover:nth-of-type(9)::after,
	.unit.selected:nth-of-type(9)::after {
		content: "TKB TV";
	}
}

.unit:hover:nth-of-type(10)::after,
.unit.selected:nth-of-type(10)::after {
	content: "TKB TV";
}

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

	.unit:hover:nth-of-type(10)::after,
	.unit.selected:nth-of-type(10)::after {
		content: "TKB TV";
	}
}

.unit:hover:nth-of-type(11)::after,
.unit.selected:nth-of-type(11)::after {
	content: "TKB STEAM";
}

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

	.unit:hover:nth-of-type(11)::after,
	.unit.selected:nth-of-type(11)::after {
		content: "TKB STEAM";
	}
}

.unit:hover:nth-of-type(12)::after,
.unit.selected:nth-of-type(12)::after {
	content: "DASO PUBLISH";
}

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

	.unit:hover:nth-of-type(12)::after,
	.unit.selected:nth-of-type(12)::after {
		content: "DASO PUBLISH";
	}
}

.unit:hover:nth-of-type(13)::after,
.unit.selected:nth-of-type(13)::after {
	content: "TASO YOUTH";
}

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

	.unit:hover:nth-of-type(13)::after,
	.unit.selected:nth-of-type(13)::after {
		content: "TASO YOUTH";
	}
}

.unit:hover:nth-of-type(14)::after,
.unit.selected:nth-of-type(14)::after {
	content: "P.P";
}

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

	.unit:hover:nth-of-type(14)::after,
	.unit.selected:nth-of-type(14)::after {
		content: "PRODUCT&PROJECT";
	}
}

/* 20210629 end */
/* 20210726 start */
.intro-section {
	margin: 20px auto 40px auto;
	overflow: hidden;
}

@media only screen and (min-width: 481px) {
	.intro-section {
		margin: 40px auto 60px auto;
	}
}

.intro-section img {
	width: 100%;
}

.intro-section .intro-ct {
	display: block;
	margin: 0 auto 40px auto;
}

@media only screen and (min-width: 1024px) {
	.intro-section .intro-ct {
		display: flex;
		justify-content: space-between;
		margin: 0 auto 60px auto;
	}
}

.intro-section .intro-ct-left {
	width: 100%;
	margin-bottom: 20px;
}

@media only screen and (min-width: 481px) {
	.intro-section .intro-ct-left {
		margin-bottom: 40px;
	}
}

@media only screen and (min-width: 1024px) {
	.intro-section .intro-ct-left {
		width: 44%;
		padding: 0 0 0 4.5%;
		margin-bottom: 0;
	}
}

.intro-section .intro-ct-right {
	width: 100%;
	margin-bottom: 50px;
}

@media only screen and (min-width: 1024px) {
	.intro-section .intro-ct-right {
		width: 47%;
		margin-bottom: 0;
	}
}

.intro-section .intro-title {
	position: relative;
	color: #0f3661;
	font-size: 160%;
	text-align: center;
	letter-spacing: 1.2px;
	line-height: 1.4;
	margin: 0 auto 30px auto;
	z-index: 1;
}

@media only screen and (min-width: 768px) {
	.intro-section .intro-title {
		text-align: left;
		line-height: 1.2;
	}
}

@media only screen and (min-width: 1024px) {
	.intro-section .intro-title {
		font-size: 200%;
		letter-spacing: 2px;
		padding: 30px 0;
		margin: 0 auto 10px auto;
	}
}

.intro-section .intro-title aside {
	color: #f2c21a;
	font-size: 50%;
	letter-spacing: 2px;
}

.intro-section p {
	font-size: 110%;
	line-height: 1.8;
	letter-spacing: 1px;
}

.intro-section .intro-sp {
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 0 auto;
}

@media only screen and (min-width: 768px) {
	.intro-section .intro-sp {
		flex-wrap: no-wrap;
		margin: 0 auto 50px auto;
	}
}

.intro-section .intro-sp dl {
	position: relative;
	width: calc(100%/ 2);
	margin-bottom: 50px;
}

@media only screen and (min-width: 768px) {
	.intro-section .intro-sp dl {
		width: calc(100%/ 4);
		margin-bottom: 0;
	}
}

.intro-section .intro-sp dl::after {
	content: '';
	position: absolute;
	top: 0;
	right: -8%;
	width: 15%;
	height: 100%;
	background: url(../images/index/intro/divider.png) center top no-repeat;
	background-size: cover;
}

.intro-section .intro-sp dl:last-of-type::after {
	visibility: hidden;
}

.intro-section .intro-sp dl:nth-of-type(2)::after {
	visibility: hidden;
}

@media only screen and (min-width: 768px) {
	.intro-section .intro-sp dl:nth-of-type(2)::after {
		visibility: visible;
	}
}

.intro-section .intro-sp dt,
.intro-section .intro-sp dd {
	text-align: center;
}

.intro-section .intro-sp dt {
	color: #333;
	font-size: 100%;
	margin-bottom: 10px;
	transform: scaleX(0.8);
}

.intro-section .intro-sp dd {
	color: #0196a6;
	font-size: 250%;
}

/* 20210726 end */
.brand-title {
	width: 100%;
	position: relative;
	z-index: 1;
	color: #0f3661;
	font-size: 160%;
	letter-spacing: 1.2px;
	text-align: center;
	margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
	.brand-title {
		padding: 30px 0;
		font-size: 200%;
		letter-spacing: 2px;
	}
}

.brand-title aside {
	color: #f2c21a;
	font-size: 70%;
	letter-spacing: 4px;
}

.brand-title::before {
	content: '';
	position: absolute;
	background-color: #dcdcdc;
	right: 2%;
	top: 35%;
	z-index: 5;
	height: 2px;
	width: 28%;
}

@media only screen and (min-width: 481px) {
	.brand-title::before {
		width: 35%;
	}
}

@media only screen and (min-width: 768px) {
	.brand-title::before {
		width: 37%;
	}
}

@media only screen and (min-width: 1024px) {
	.brand-title::before {
		width: 38%;
	}
}

.brand-title::after {
	content: '';
	position: absolute;
	background-color: #dcdcdc;
	left: 2%;
	top: 35%;
	z-index: 5;
	height: 2px;
	width: 28%;
}

@media only screen and (min-width: 481px) {
	.brand-title::after {
		width: 35%;
	}
}

@media only screen and (min-width: 768px) {
	.brand-title::after {
		width: 37%;
	}
}

@media only screen and (min-width: 1024px) {
	.brand-title::after {
		width: 38%;
	}
}

.brand-box {
	display: flex;
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	margin: 10px auto 50px auto;
}

@media only screen and (min-width: 768px) {
	.brand-box {
		justify-content: space-between;
	}
}

.brand-box .logo {
	display: block;
	position: relative;
	width: calc((100% - 12px)/2);
	cursor: pointer;
	margin: 4px 3px;
	overflow: hidden;
	z-index: 1;
}

@media only screen and (min-width: 481px) {
	.brand-box .logo {
		width: calc((100% - 30px)/5);
		margin: 4px 3px;
	}
}

.brand-box .logo img {
	width: 100%;
	vertical-align: middle;
	transform: scale(1, 1);
	transition: all 1s ease-out;
}

.brand-box .logo:hover img {
	transform: scale(1.1, 1.1);
}

.brand-box .logo-line {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background-color: rgba(255, 255, 255, 0.6);
	z-index: 5;
	padding: 5px 5px;
}

.brand-box .logo-line .icon {
	width: 80%;
	margin: 0 auto;
}

@media only screen and (min-width: 481px) {
	.brand-box .logo-line .icon {
		width: 50%;
	}
}

.brand-box .logo-line .icon img {
	width: 100%;
	vertical-align: middle;
}

/* 20210129 start */
.slider {
	width: 100%;
	cursor: pointer;
	margin: 0 auto;
}

@media only screen and (min-width: 768px) {
	.slider {
		width: 180%;
	}
}

/* 20210129 end */
.slick-slide {
	margin: 0;
}

.slick-slide img {
	width: 100%;
}

/* 20210129 start */
.slick-prev:before,
.slick-next:before {
	color: #0f3661;
}

/* 20210129 end */
.slick-slide {
	transition: all ease-in-out .3s;
	opacity: .2;
}

.slick-active {
	opacity: .5;
}

.slick-current {
	opacity: 1;
}

.search-cont {
	margin: 70px auto 0 auto;
}

.search-cont .title-search {
	font-size: 160%;
	color: #213d7d;
	margin: 5% 0 0 0;
}

.search-cont .title-search i {
	margin: 0 10px 0 0;
}

.search-cont .line {
	background-color: #f3f3f3;
	height: 1px;
	width: 100%;
	text-align: center;
	margin: 10px auto 20px auto;
}

.search-cont .result {
	color: #b1b1b1;
	font-size: 110%;
	text-align: left;
	margin: 30px 0 5px 0;
}

.search-cont .page-saerchbar-top {
	display: flex;
	justify-content: flex-start;
	padding: 10px 5px;
	align-items: stretch;
	margin: 0 auto;
}

@media only screen and (min-width: 481px) {
	.search-cont .page-saerchbar-top {
		padding: 0;
		margin: 0 auto 20px auto;
		justify-content: flex-start;
		align-items: center;
	}
}

.search-cont .page-saerchbar-top .saerchbar {
	width: 89%;
	border: #e0dcdc 1px solid;
	padding: 5px 10px 5px 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
}

@media only screen and (min-width: 768px) {
	.search-cont .page-saerchbar-top .saerchbar {
		width: 82%;
	}
}

@media only screen and (min-width: 1024px) {
	.search-cont .page-saerchbar-top .saerchbar {
		width: 87%;
	}
}

@media only screen and (min-width: 1366px) {
	.search-cont .page-saerchbar-top .saerchbar {
		width: 89%;
	}
}

.search-cont .page-saerchbar-top .saerchbar input[type="text"] {
	position: relative;
	font-family: "FontAwesome", "Century Gothic", "Arial", "MyFont",
		"微軟正黑體" !important;
	padding: 5px;
	outline: none;
	width: 90%;
	font-size: 140%;
	border: #ffffff 1px solid;
}

@media only screen and (min-width: 481px) {
	.search-cont .page-saerchbar-top .saerchbar input[type="text"] {
		width: 80%;
	}
}

.search-cont .page-saerchbar-top .btn-advanced {
	display: block;
	text-decoration: none;
	background-color: #213d7d;
	color: #ffffff;
	padding: 15px 5px 15px 10px;
	text-align: center;
	margin: 0 0 0 5px;
	font-size: 120%;
	border-radius: 5px;
}

@media only screen and (min-width: 768px) {
	.search-cont .page-saerchbar-top .btn-advanced {
		display: flex;
		justify-content: center;
		font-size: 150%;
		width: 100%;
		padding: 10px 15px 10px 15px;
		margin: 0 0 0 10%;
	}
}

.search-cont .page-saerchbar-top .btn-advanced i {
	margin: 0 10px 0 0;
}

.search-cont .page-saerchbar-top .btn-advanced:hover {
	color: #213d7d;
	background-color: #fcbb13;
}

.search-cont .page-saerchbar-top .btn-advanced span {
	display: none;
}

@media only screen and (min-width: 768px) {
	.search-cont .page-saerchbar-top .btn-advanced span {
		display: block;
	}
}

.search-cont .google-box {
	background-color: #f7f7f7;
	margin: 15px auto 50px auto;
	padding: 30px 20px;
}

.search-cont .google-box figcaption {
	color: #213d7d;
	font-size: 140%;
	display: block;
	cursor: pointer;
	line-height: 1.6rem;
}

.search-cont .google-box figure {
	color: #e5a500;
	font-size: 90%;
	display: block;
	cursor: pointer;
	margin: 5px 0 0 0;
}

.search-cont .google-box aside {
	font-size: 95%;
	margin: 5px 0 0 0;
	color: #666666;
	line-height: 1.2rem;
}

.search-cont .youcan {
	display: block;
	cursor: pointer;
	color: #213d7d;
	font-size: 100%;
	text-align: left;
}

.search-cont .youcan:hover {
	color: #b7181b;
}

.search-cont .youcan i {
	margin: 0 10px 0 0;
}

/*20210129 品牌布局*/
.brand-cont .brand2-title {
	width: 100%;
	color: #000;
	font-weight: bold;
	font-size: 160%;
	text-align: center;
	letter-spacing: 2px;
	margin: 0 auto 15px auto;
}

@media only screen and (min-width: 481px) {
	.brand-cont .brand2-title {
		width: 40%;
		text-align: left;
		font-size: 160%;
		margin: 0;
	}
}

@media only screen and (min-width: 768px) {
	.brand-cont .brand2-title {
		width: 25%;
		font-size: 200%;
	}
}

@media only screen and (min-width: 1024px) {
	.brand-cont .brand2-title {
		width: 20%;
		font-size: 240%;
	}
}

.brand-cont .brand2-title aside {
	color: #8d8d8d;
	font-size: 44%;
	letter-spacing: 2px;
	font-weight: 200;
	margin-top: 5px;
}

@media only screen and (min-width: 768px) {
	.brand-cont .brand2-title aside {
		font-size: 44%;
	}
}

.brand-cont summary {
	font-size: 125%;
	text-align: left;
	line-height: 1.8rem;
	margin: 20px auto;
	width: 85%;
}

@media only screen and (min-width: 481px) {
	.brand-cont summary {
		font-size: 135%;
		text-align: left;
		line-height: 1.8rem;
		margin: 20px auto;
		width: 85%;
	}
}

.brand-cont .brand-map {
	margin: 40px auto;
	width: 99%;
}

@media only screen and (min-width: 481px) {
	.brand-cont .brand-map {
		width: 90%;
	}
}

@media only screen and (min-width: 768px) {
	.brand-cont .brand-map {
		width: 70%;
	}
}

.brand-cont .brand-map img {
	width: 100%;
}

/*20210129 首頁次選單*/
.pcfix-sub-nav {
	/* 20210203 start */
	display: none;
	width: 100%;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
	background-color: #fcbb13;
	/* 20210203 end */
}

.pcfix-sub-nav nav {
	position: relative;
}

@media only screen and (min-width: 768px) {
	.pcfix-sub-nav nav {
		display: block;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin: 0 auto;
		width: 90%;

	}
}

@media only screen and (min-width: 1366px) {
	.pcfix-sub-nav nav {
		width: 90%;
	}
}

.pcfix-sub-nav nav a {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	font-size: 120%;
	font-weight: 450;
	color: #231714;
	text-align: center;
	padding: 0;
	text-decoration: none;
	text-wrap: nowrap;
}

@media only screen and (min-width: 768px) {
	.pcfix-sub-nav nav a {
		width: calc((100% - 8%)/9);
		font-size: 95%;
		padding: 10px 0;
	}
}

@media only screen and (min-width: 1366px) {
	.pcfix-sub-nav nav a {
		width: calc((100% - 15%)/9);
		font-size: 110%;
		padding: 15px 0;
	}
}

.pcfix-sub-nav nav a:hover {
	color: #213d7d;
}

.pcfix-sub-nav nav a li {
	list-style-position: inside;
}

/* 2026-11-12 人力招募子選單：每項照文字長度給寬度（不用 9 等分，等分時「企業社會責任」會超出格子、
   壓到下一項的圓點），項目間用左右間距隔開；太窄放不下時換第二行。官網同一份寫法。 */
@media only screen and (min-width: 768px) {
	.pcfix-sub-nav nav.sub-nav-hiring {
		flex-wrap: wrap;
	}
	.pcfix-sub-nav nav.sub-nav-hiring a {
		width: auto;
		flex: 0 0 auto;
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
}

@media only screen and (min-width: 1366px) {
	.pcfix-sub-nav nav.sub-nav-hiring a {
		width: auto;
		padding-left: 0.8em;
		padding-right: 0.8em;
	}
}


.scroll-container {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	margin: 0;
	padding: 60px 0 0 0;
	overflow: hidden;
	z-index: 98;
}

.scroll-container::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.8);
	z-index: -1;
}

.category {
	color: #213d7d;
	background-color: #fff;
	border-bottom: #213d7d 1px solid;
	cursor: pointer;
	overflow: hidden;
	font-size: 120%;
	padding: 15px 15px;
	text-align: left;
}

.category:hover {
	color: #fff;
	background-color: #213d7d;
}

.category i {
	margin: 0 10px;
}

.category-sub-container {
	display: none;
}

.category-sub {
	color: #231714;
	cursor: pointer;
	background-color: #fcbb13;
	border-bottom: #be8a04 1px solid;
	font-size: 100%;
	padding: 15px 10px 15px 45px;
}

.category-sub:hover {
	color: #fff;
	background-color: #2d50a0;
}

/*20210226 職涯訓練 start*/
.career-cont .brand2-title {
	width: 100%;
	color: #000;
	font-weight: bold;
	font-size: 160%;
	text-align: center;
	letter-spacing: 2px;
	margin: 0 auto 15px auto;
}

@media only screen and (min-width: 481px) {
	.career-cont .brand2-title {
		/*20221115 width mark*/
		width: 100%;
		text-align: left;
		font-size: 160%;
		margin: 0;
	}
}

@media only screen and (min-width: 768px) {
	.career-cont .brand2-title {
		/*20221115 width mark*/
		width: 100%;
		font-size: 200%;
	}
}

@media only screen and (min-width: 1024px) {
	.career-cont .brand2-title {
		/*20221115 width mark*/
		width: 100%;
		font-size: 240%;
	}
}

.career-cont .brand2-title aside {
	color: #8d8d8d;
	font-size: 44%;
	letter-spacing: 2px;
	font-weight: 200;
	margin-top: 5px;
}

@media only screen and (min-width: 768px) {
	.career-cont .brand2-title aside {
		font-size: 44%;
	}
}

.career-cont .sub-tt {
	color: #1b91d4;
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	margin: 5px 0 20px 0;
}

@media only screen and (min-width: 481px) {
	.career-cont .sub-tt {
		text-align: left;
		font-size: 160%;
		margin: 10px 0 30px 0;
	}
}

.career-cont summary {
	font-size: 125%;
	text-align: left;
	line-height: 1.8rem;
	margin: 20px auto;
	width: 85%;
}

@media only screen and (min-width: 481px) {
	.career-cont summary {
		font-size: 135%;
		text-align: left;
		line-height: 1.8rem;
		margin: 20px auto;
		width: 85%;
	}
}

.career-cont .cookie {
	margin: 40px auto;
	width: 99%;
}

@media only screen and (min-width: 481px) {
	.career-cont .cookie {
		width: 90%;
	}
}

@media only screen and (min-width: 768px) {
	.career-cont .cookie {
		width: 70%;
		margin: 60px auto;
	}
}

.career-cont .cookie img {
	width: 100%;
}

/*20210226 職涯訓練 end*/
/*20210226 福利制度 start*/
.benef-cont .brand2-title {
	width: 100%;
	color: #000;
	font-weight: bold;
	font-size: 160%;
	text-align: center;
	letter-spacing: 2px;
	margin: 0 auto 15px auto;
}

@media only screen and (min-width: 481px) {
	.benef-cont .brand2-title {
		width: 40%;
		text-align: left;
		font-size: 160%;
		margin: 0;
	}
}

@media only screen and (min-width: 768px) {
	.benef-cont .brand2-title {
		width: 25%;
		font-size: 200%;
	}
}

@media only screen and (min-width: 1024px) {
	.benef-cont .brand2-title {
		width: 20%;
		font-size: 240%;
	}
}

.benef-cont .brand2-title aside {
	color: #8d8d8d;
	font-size: 44%;
	letter-spacing: 2px;
	font-weight: 200;
	margin-top: 5px;
}

@media only screen and (min-width: 768px) {
	.benef-cont .brand2-title aside {
		font-size: 44%;
	}
}

.benef-cont .benf-box {
	position: relative;
	z-index: 1;
	margin: 6% auto;
}

.benef-cont .box-logo {
	position: absolute;
	z-index: 5;
	width: 18%;
	top: -7%;
	right: 0;
}

@media only screen and (min-width: 481px) {
	.benef-cont .box-logo {
		width: 16%;
		top: -8%;
		right: 0;
	}
}

@media only screen and (min-width: 768px) {
	.benef-cont .box-logo {
		width: 14%;
		top: -20%;
		right: 0;
	}
}

.benef-cont .box-logo img {
	width: 100%;
}

.benef-cont .sub-tt {
	color: #1b91d4;
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	margin: 5px 0 20px 0;
}

@media only screen and (min-width: 481px) {
	.benef-cont .sub-tt {
		text-align: left;
		font-size: 160%;
		margin: 10px 0 30px 0;
	}
}

.benef-cont .box-display {
	display: block;
}

@media only screen and (min-width: 481px) {
	.benef-cont .box-display {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin: 0 auto 20px auto;
	}
}

.benef-cont .box-display .benf-cont {
	width: 99%;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 0 auto 10px auto;
}

@media only screen and (min-width: 481px) {
	.benef-cont .box-display .benf-cont {
		width: 45%;
		margin: 0;
	}
}

.benef-cont .box-display .benf-cont figure {
	width: 100%;
	margin: 0 auto 10px auto;
}

.benef-cont .box-display .benf-cont figure img {
	width: 100%;
}

.benef-cont .box-display .benf-cont .icon {
	width: 10%;
}

@media only screen and (min-width: 768px) {
	.benef-cont .box-display .benf-cont .icon {
		width: 7%;
	}
}

.benef-cont .box-display .benf-cont .icon img {
	width: 100%;
}

.benef-cont .box-display .benf-cont .text {
	text-align: left;
	width: 70%;
	line-height: 1.4rem;
	font-size: 125%;
}

.benef-cont .box-display .benf-cont .text ul {
	list-style-type: disc;
}

/*20210226 福利制度 end*/
/* 20210609 新版麵包屑 取代整個 20210504 新版麵包屑 start */
.bread-crumbs {
	display: inline-block;
	border: #abcdff 1px solid;
	border-radius: 20px;
	font-size: 100%;
	padding: 8px 0px 8px 20px;
	margin: 10px 0 40px 0;
}

.bread-crumbs span {
	margin: 0 8px;
}

.bread-crumbs a {
	color: #000;
}

.bread-crumbs a:hover {
	color: #213d7d;
}

.bread-crumbs-now {
	border-radius: 20px;
	color: #fff;
	background-color: #213d7d;
	padding: 8px 20px;
	margin-left: 10px;
}

@media only screen and (max-width: 576px) {
	.bread-crumbs {
		font-size: 88%;
		margin: 10px 0 20px 0;
		padding: 8px 0px 8px 10px;
	}

	.bread-crumbs span {
		margin: 0 5px;
	}

	.bread-crumbs-now {
		margin-left: 5px;
		padding: 8px 10px;
	}

	.text-over {
		width: 10rem;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		vertical-align: middle;
	}
}

/* 20210609 新版麵包屑 end */

/* 20220331 選單點選後繼續白字 */
.top-nav-pc .nav a.trun {
	color: #fff;
}

.div-select {
	display: flex;
}

@media (max-width : 432px) {
	.div-select {
		flex-direction: column;
	}

	.div-select select {
		width: 200px;
	}
}

/* 20221111 start */
.personal-data {
	margin-bottom: 30px;
}

.personal-data li {
	line-height: 1.8;
	list-style: decimal;
}

.btn-next-step {
	/*20221115 important mark*/
	color: #4c4c4c !important;
	background-color: #cfcfcf !important;
	border-color: #cfcfcf !important;
}

.btn-next-step:hover,
.btn-next-step.active {
	/*20221115 important mark*/
	color: #fff !important;
	background-color: #235aad !important;
	border-color: #235aad !important;
}

/* 20221111 end */

/* 20230119 start*/
.tingmao {
	padding: 3% 0 15%;
}

.apply-info-item2 {
	display: block;
	border-radius: 10px;
	box-shadow: 2px 2px 20px rgba(0, 0, 0, .3);
}

.apply-info-item2:hover {
	transform: scale(1.05);
	transition: all 0.3s;
	opacity: .9;
}

.apply-info-item2 img {
	max-width: 100%;
}



.note {
	position: absolute;
	top: 4%;
	left: 27%;
	color: #c00;
	font-size: 110%;
}

.item-5 {
	color: white;
	background: #4F9F67 url(../images/career/info/icon-5.png) no-repeat right bottom;
	background-size: 40%;
}

.item-5:hover {
	color: white;
	text-decoration: none;
	background: #0E862B url(../images/career/info/icon-5.png) no-repeat right bottom;
	background-size: 40%;
}

.item-6 {
	color: white;
	background: #093171 url(../images/career/info/icon-6.png) no-repeat right bottom;
	background-size: 40%;
}

.item-6:hover {
	color: white;
	text-decoration: none;
	background: #182A87 url(../images/career/info/icon-6.png) no-repeat right bottom;
	background-size: 40%;
}

@media (max-width: 1600px) {
	.note {
		left: 23%;
	}
}

@media (max-width: 1440px) {
	.note {
		left: 20%;
	}
}

@media (max-width: 1366px) {
	.note {
		left: 18%;
	}
}

@media screen and (min-width:1025px) and (max-width:1365px) {
	.note {
		left: 14%;
	}
}

@media (max-width: 1024px) {
	.note {
		top: 4.2%;
		left: 19%;
	}
}

@media screen and (min-width:820px) and (max-width:1023px) {
	.note {
		top: 4%;
		left: 19%;
		font-size: 100%;
	}
}

@media (max-width: 768px) {
	.note {
		top: 4%;
		left: 20%;
	}
}

@media (max-width: 576px) {
	.note {
		top: 3.4%;
		left: 0%;
		width: 100%;
		font-size: 80%;
		text-align: center;
	}
}

/* 20230119 end*/
/* 履歷表防灌水 honeypot：真人看不到也 tab 不到，機器人才會填 */
.hp-wrap{display:none!important;}