@import url('/template/css/font-awesome.min.css');
@import url('/template/css/fontawesome.min.css');
@import url('/template/css/all.min.css');
@import url('/template/css/SeoJump.css');
@import url('/template/css/contentBuilder.css');
@import url('root.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+TC:wght@100..900&display=swap');

/* main.less */
.webBox *,
.webBox:before,
.webBox:after {
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box
}

.aos-init {
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out
}

.webBox header #menubtn[data-type="2"] a span:nth-child(1) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg)
}

.webBox header #menubtn[data-type="2"] a span:nth-child(3) {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg)
}

@media (min-width:1281px) {
	.webBox header #webmenu li .menu_body {
		transform: translate(0, 30px);
		-webkit-transform: translate(0, 30px)
	}

	.webBox header #webmenu li .menu_body .subOption li .sub2Option {
		transform: translate(-30px, 0);
		-webkit-transform: translate(-30px, 0)
	}

	.webBox header #webmenu li .menu_body .subOption li .sub2Option li .sub3Option {
		transform: translate(-30px, 0);
		-webkit-transform: translate(-30px, 0)
	}

	.webBox header #webmenu li .menu_body .subOption li .sub2Option li:hover .sub3Option {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0)
	}

	.webBox header #webmenu li .menu_body .subOption li:hover .sub2Option {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0)
	}

	.webBox header #webmenu li:hover .menu_body {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0)
	}

	.webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option {
		transform: translate(30px, 0);
		-webkit-transform: translate(30px, 0)
	}

	.webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option li .sub3Option {
		transform: translate(30px, 0);
		-webkit-transform: translate(30px, 0)
	}

	.webBox header #webmenu li:last-child .menu_body .subOption li .sub2Option li:hover .sub3Option {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0)
	}

	.webBox header #webmenu li:last-child .menu_body .subOption li:hover .sub2Option {
		transform: translate(0, 0);
		-webkit-transform: translate(0, 0)
	}
}

.webBox header #search_box #openform {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.webBox header #search_box {
	display: flex;
	justify-content: flex-end;
	width: auto;
	margin-left: 8px;
	align-items: center;
	display: none
}

.webBox header #search_box form {
	transform: translate(30px, 0);
	-webkit-transform: translate(30px, 0)
}

.webBox header #search_box[data-type="2"] form {
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0)
}

.webBox .img_scale img {
	transform: scale(1);
	-webkit-transform: scale(1)
}

@media (min-width:1281px) {
	.webBox .img_scale:hover img {
		transform: scale(1.1);
		-webkit-transform: scale(1.1)
	}
}

.webBox #SeoStarRating font {
	margin-right: 5px;
	display: inline-block;
	line-height: 110%;
	vertical-align: text-bottom;
	color: #ffc107
}

.webBox #SeoStarRating font * {
	color: #ffc107
}

.webBox #SeoStarRating font:first-child {
	font-weight: bold;
	font-size: 18px
}

.webBox #SeoStarRating font:last-child {
	color: #cb0244
}

.webBox #webSeo .seo {
	-webkit-animation: marquee 200s linear infinite;
	animation: marquee 200s linear infinite
}

.webBox #footer_btn a {
	width: 64px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative
}

@media (max-width:550px) {
	.webBox #footer_btn a {
		width: 64px;
		height: 60px;
		border-radius: 50%;
		margin-bottom: 10px
	}
}

font {
	all: unset !important;
}

.webBox #footer_btn a:hover {
	background: var(--secondary);
}

* {
	margin: 0;
	padding: 0
}

*:focus {
	outline: none
}

body {
	margin: 0;
	top: 0 !important;
}

body,
body * {
	-webkit-text-size-adjust: 100%;
}

body::selection {
	background: var(--gray);
	text-shadow: none;
	color: var(--white)
}

body::-webkit-scrollbar {
	width: 5px
}

body::-webkit-scrollbar-track {
	background: rgba(var(--gray-rgb), .4)
}

body::-webkit-scrollbar-thumb {
	background: var(--primary)
}

header,
footer,
div,
nav,
article,
h2,
h3,
h4,
h5,
h6,
hr,
p,
form,
label,
input,
textarea,
ul,
li,
img,
svg,
span,
font,
strong,
b,
a,
i {
	text-align: left;
	vertical-align: middle;
	word-wrap: break-word;
	word-break: break-word;
	line-height: 190%;
	border-width: 0;
	font-family: var(--font-family), sans-serif;
	font-size: max(1.2*(1vw + 1vh) / 2, 15px);
	color: var(--info);
	letter-spacing: 0.05em
}

ul,
ol {
	/* list-style: none */
}

fieldset {
	border: 0
}

input,
button,
select,
textarea {
	padding: 5px 15px;
	width: calc(100% - 0px);
	border: 1px rgba(var(--black-rgb), .15) solid;
	border-radius: 0;
	background: none;
	box-shadow: none;
	outline: none;
	font-size: 16px;
	color: var(--gray);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

select {
	padding: 10px 15px;
	width: 100%
}

input#Checknum {
	margin-right: 15px;
	width: 110px;
	max-width: calc(100% - 97px)
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	font-weight: 400;
	color: rgba(var(--black-rgb), .6)
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	font-weight: 400;
	color: rgba(var(--black-rgb), .6)
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	font-weight: 400;
	color: rgba(var(--black-rgb), .6)
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	font-weight: 400;
	color: rgba(var(--black-rgb), .6)
}

/* img */
img {
	max-width: 100%
}

.img_cover {
	width: 100%;
	object-fit: cover
}

.img_contain {
	width: 100%;
	object-fit: contain
}

a,
a:link,
a:visited,
a:hover {
	text-decoration: none;
	white-space: pre-wrap
}

/* general class set */
.txt_clamp {
	overflow: hidden;
	height: 27px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1
}

.d_inblock.txt_clamp {
	display: -webkit-inline-box
}

.atag_item {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0
}

.nowrap_box {
	font-size: 0
}

.txt_num {
	font-family: 'Quicksand', sans-serif
}

.coouJJ * {
	font-size: max(1.2*(1vw + 1vh) / 2, 16px)
}

.coouJJ font {
	display: flex;
	color: aliceblue
}

.coouJJ a {
	display: flex
}

.coouJJ svg {
	width: 21px;
	aspect-ratio: 1/1;
	margin-right: 10px;
	fill: #ffffff
}

/* btn */
.btn,
.btn_outline {
	padding: 2px 10px
}

.more_btn {
	padding: 10px 35px;
	text-transform: capitalize
}

.more_btn:before {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--white);
	top: 0;
	left: 0;
	opacity: .3;
	z-index: 9;
	content: "";
	-webkit-transition: -webkit-transform .6s;
	transition: -webkit-transform .6s;
	transition: transform .6s;
	transition: transform .6s, -webkit-transform .6s;
	-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 180deg) translate3d(0, 100%, 0);
	transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 180deg) translate3d(0, 100%, 0)
}

/* badge  */
.badge {
	padding: 2px 10px;
	box-shadow: none
}

.badge_lighten {
	padding: 0 4px;
	min-width: 22px;
	border-radius: 3px;
	font-weight: 400;
	text-align: center;
	font-size: 12px;
	vertical-align: text-bottom
}

/* photo,bgBox */
a.photo,
.bgBox {
	overflow: hidden;
	background: no-repeat 50% / cover;
	display: block
}

/* fancybox */
[class^="fancybox-"],
[class^="fancybox-"] *,
.slick-track,
.fa,
.fas,
.fa:before,
.fas:before,
.fa:after,
.fas:after,
.trans_none_box {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none
}

[class^="fancybox-"],
[class^="fancybox-"] * {
	font-family: inherit;
	color: currentColor
}

.fancybox-content {
	width: 80% !important;
	height: calc(100% - 88px) !important;
}

/* webBox */
.webBox {
	overflow: hidden;
	position: relative;
	width: 100%
}

.webBox .pageh1 {
	position: absolute;
	top: 0;
	z-index: 1;
	animation: fadeAnimation 20s infinite;
}

.webBox .wrapper {
	position: relative;
	background: #f4f4f4;
	overflow: hidden;
}

.webBox .slick-slider {
	margin-bottom: 0
}

.workframe {
	margin: 0 auto;
	width: 90%
}

.dambox {
	width: min(90%, 1600px)
}

.top_space {
	margin-top: 60px;
}

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

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.JJtitle .Jterightbox h2 {
	font-weight: 700;
	font-size: max(4.8 * (1vw + 1vh) / 2, 47px);
}

.JJtitle .Jterightbox .cnlittle {
	font-weight: 400;
	font-size: max(1.91 * (1vw + 1vh) / 2, 18px);
}

.JJtitle .Jterightbox .cnlittle:before {
	width: 120px;
}

.JJtitle {
	margin-bottom: 65px;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.JJtitle .midtexrb {
	width: min(60px, 100%);
	margin-bottom: 12px;
}

.JJtitle h2 {
	font-weight: 400;
	font-size: 13px;
	text-transform: uppercase;
	color: #494647;
	line-height: 100%;
}

@keyframes myfirst {
	0% {
		transform: translate(0, 0)
	}

	50% {
		transform: translate(0, -10px)
	}

	100% {
		transform: translate(0, 0)
	}
}

.JJtitle .cnlittle {
	font-weight: 700;
	font-size: max(2.8*(1vw + 1vh) / 2, 28px);
	text-transform: uppercase;
	color: #494647;
	display: flex;
	align-items: center;
	gap: 10px;
}

.cnlittle::before,
.cnlittle::after {
	content: "";
	display: inline-block;
	width: 125px;
	border: none;
	height: 7px;
	background: linear-gradient(#363636 1px, transparent 1px), linear-gradient(#363636 1px, transparent 1px);
	background-position: top left, bottom left;
	background-repeat: no-repeat;
	background-size: 100% 3px
}


/*translate*/

body>.skiptranslate {
	display: none;
}

.goog-logo-link {
	display: none !important;
}

.goog-te-gadget {
	color: transparent !important;
}

.goog-te-banner-frame.skiptranslate {
	display: none !important;
}

a[href="https://translate.google.com"] {
	display: none !important;
}

/* Toggle Switch */
.switch {
	position: relative;
	display: inline-block;
	width: 62px;
	height: 33px;
}

.switch input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	z-index: 2;
	cursor: pointer
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
	border-radius: 34px
}

.slider:before {
	position: absolute;
	content: "";
	height: 24px;
	width: 24px;
	right: 5px;
	bottom: 5px;
	background-color: #fff;
	transition: .4s;
	border-radius: 50%
}

input:checked+.slider {
	background-color: #3783c7
}

input:focus+.slider {
	box-shadow: 0 0 1px #007bff
}

input:checked+.slider:before {
	transform: translateX(-26px);
}

/* Label for switch */
.lang-label {
	font-weight: 400;
	font-size: max(1.15*(1vw + 1vh) / 2, 14px);
	color: var(--white);
	text-transform: uppercase;
}


/*JJtitle2*/

.JJtitle2 h2:before,
.JJtitle2 h2:after {
	top: 0px;
}

.JJtitle2 h2:before {
	content: "";
	position: absolute;
	width: 10px;
	aspect-ratio: 1/1;
	border-radius: 55px;
	background: #302521;
	left: 10px;
}

.JJtitle2 h2:after {
	content: "";
	position: absolute;
	width: 10px;
	aspect-ratio: 1/1;
	border-radius: 55px;
	background: var(--primary);
	left: 25px;
}

.jumpJJ:before,
jumpJJ:after {
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}

.JJtitle2 h2 {
	font-weight: 700;
	font-size: max(4*(1vw + 1vh) / 2, 40px);
	text-transform: uppercase;
	color: #363636;
	display: flex;
	align-items: center;
}

.JJtitle2 p {
	font-weight: 700;
	font-size: max(2.8*(1vw + 1vh) / 2, 26px);
	color: var(--primary);
	line-height: 100%;
}


@keyframes myfirst {
	0% {
		transform: translate(0px, 0px);
	}

	50% {
		transform: translate(0px, -10px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}


/* header */
header #webmenu nav>ul>li>p a {
	color: var(--white);
}

header.scroll {
	background: var(--complement);
	top: 0;
}

header.scroll #openform {
	background: var(--secondary)
}

header {
	z-index: 999;
	top: 0;
	padding: 15px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

header:before {
	content: "";
	position: absolute;
	width: 100%;
	background: var(--primary);
	height: 100%;
	padding: 5px 0;
}

header .menu {
	display: flex;
	align-items: center;
	margin: 0 auto;
	gap: 5px;
}

header .item {
	padding: 0 0;
	width: min(1600px, 100%);
}

header #header_bar {
	width: 233px
}

header #header_bar a.con {
	background: #b01a26;
	padding: 9px 30px;
	border-radius: 50px;
	margin-left: 20px;
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
	display: flex;
	align-items: center
}

header #header_bar a.con:hover {
	background: #555
}

header #header_bar a.con font {
	color: var(--white);
	font-size: max(1.2*(1vw + 1vh) / 2, 16px);
	display: flex;
	align-items: center
}

header #header_bar a.con font svg {
	fill: #ffffff;
	width: 20px;
	aspect-ratio: 1/1;
	margin-right: 10px
}

header .top_btn {
	width: 96%;
	top: 0;
	left: 0
}

header .top_btn svg {
	margin: 10px;
	width: 19px;
	height: 19px;
	fill: #ffffff
}

header #cis {
	z-index: 5;
	display: flex;
	align-items: center
}

header #cis * {
	transition: all 0s ease-in-out;
	-webkit-transition: all 0s ease-in-out;
}

header #cis img {
	width: min(290px, 95%);
}

header #webmenu {
	display: flex;
	justify-content: flex-end
}

header #menubtn {
	height: 70px;
	top: 0;
	right: 0;
	z-index: 1000
}

header #menubtn a {
	margin: auto 0 auto auto;
	width: 30px;
	height: 25px
}

header #menubtn a span {
	position: absolute;
	width: 100%;
	height: 2px;
	background: var(--white);
	display: block;
	top: 0;
	right: 0
}

header.scroll #menubtn a span {}

header #menubtn[data-type="1"] a span {
	transition: transform .4s cubic-bezier(.215, .61, .355, 1), opacity .4s cubic-bezier(.215, .61, .355, 1), -webkit-transform .4s cubic-bezier(.215, .61, .355, 1)
}

header #menubtn[data-type="1"] a span:nth-child(2) {
	top: calc(50% - .5px)
}

header #menubtn[data-type="1"] a span:nth-child(3) {
	top: calc(100% - 1px)
}

header #menubtn[data-type="2"] a span {
	transition: .4s cubic-bezier(.645, .045, .355, 1);
	background: #ffffff;
}

header #menubtn[data-type="2"] a span:nth-child(1),
header #menubtn[data-type="2"] a span:nth-child(3) {
	top: 50%
}

header #menubtn[data-type="2"] a span:nth-child(2) {
	opacity: 0
}

header #webmenu nav>ul>li>p a {
	padding: 10px 5px;
	font-size: max(1*(1vw + 1vh) / 2, 15px);
}

header #webmenu nav ul li b {
	position: absolute;
	padding: 0 5px 0 15px;
	width: 23px;
	height: 41px;
	display: inline-block;
	text-align: center;
	line-height: 41px;
	top: calc((100% - 41px) / 2);
	right: 12px;
}

header #webmenu nav ul li b .fa {
	color: #e7e7e7;
}

header #webmenu nav>ul>li .subOption li>div a {
	padding: 7px 10px;
	display: block
}

header.scroll {
	background: var(--complement);
	box-shadow: 0 0 20px rgba(var(--black-rgb), .3)
}

header.scroll .item.menu {
	padding-top: 0;
	border-bottom: 0
}

#wwbewm {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#wwbewm a {
	padding: 5px;
	border-radius: 50%;
}

.member_img img {
	width: 26px
}

.chage {
	display: flex;
	align-items: center;
	gap: 13px
}

.chage svg {
	width: 2.1vw;
	aspect-ratio: 2/1
}


a.fmlink {
	display: flex;
	height: auto;
	width: 245px;
	margin-top: 30px;
	padding: 18px 20px;
	justify-content: space-between;
	color: white;
	font-size: max(1.15 * (1vw + 1vh) / 2, 14px);
	background: var(--primary);
	border-radius: 7px;
}

a.fmlink:hover {
	background: var(--secondary);
}

a.fmlink svg {
	fill: white;
	width: 20px;
	aspect-ratio: 1/1
}


/* search_box */
#openform {
	background: var(--secondary);
	line-height: 45px
}

#search_box svg {
	width: 18px;
	height: 18px;
	display: flex
}

#search_box form {
	width: 240px;
	box-shadow: 0 0 10px rgba(var(--black-rgb), .3);
	right: 0;
	bottom: -55px;
	opacity: 0
}

#search_box[data-type="2"] form {
	opacity: 1
}

#search_box form input {
	width: calc(100% - 65px);
	border: 0
}

/* menubg */
#menubg {
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0
}

#menubg[data-type="1"] {
	background: rgba(var(--black-rgb), 0);
	z-index: -998;
}

#menubg[data-type="2"] {
	background: rgba(var(--black-rgb), .5);
	z-index: 998
}

/*foomJconxt*/
#foomJconxt {
	z-index: 66;
	display: grid;
	margin: 115px auto;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
	width: min(90%, 1440px);
	padding: 120px 0px;
	background: #ffffff;
	border-radius: 30px;
	-webkit-box-shadow: 0 0 12px 6px rgb(196 196 196 / 24%);
	box-shadow: 0 0 12px 6px rgb(196 196 196 / 24%)
}

#foomJconxt:before {
	content: "";
	position: absolute;
	width: 9vw;
	aspect-ratio: 106/79;
	background: url(/images/40/contpill.png);
	background-size: contain;
	background-position: 50%;
	background-repeat: no-repeat;
	bottom: -50px;
	left: -80px;
	animation: myfirst 1s infinite;
	animation-duration: 2s;
	animation-timing-function: ease-in-out
}

#foomJconxt .JJtitle {
	margin-bottom: 0
}

.foocxtright {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
	align-items: center
}

.foocxtright:before {
	content: "";
	position: absolute;
	width: 1px;
	height: 50%;
	background: #adadad;
	right: 50%
}

.foocxtright .cmoutext {
	display: flex;
	flex-direction: column;
	align-items: center
}

.foocxtright .cmoutext p {
	font-size: max(1.6*(1vw + 1vh) / 2, 18px);
	color: #5e798a;
	margin-bottom: 10px
}

.icolinkJ {
	display: flex;
	gap: 11px
}

.icolinkJ a {
	background: #c0a68b;
	padding: 13px;
	aspect-ratio: 1/1;
	border-radius: 555px;
	width: 55px;
	display: flex
}

.icolinkJ a:hover {
	background: #5e798a
}

/* footer */
footer {
	background: var(--complement);
}

footer * {
	color: var(--white);
	font-size: max(1 * (1vw + 1vh) / 2, 15px);
	line-height: 160%
}

.footJitem {
	display: grid;
	gap: 1%;
	grid-template-columns: 9% 90%;
	align-items: center;
	margin-bottom: 5px
}

a.masklink {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 5;
}

footer #footerlogo {
	padding: 40px 0;
	border-bottom: rgb(255 255 255 / 29%) 1px solid
}

footer #footerlogo img {
	width: min(250px, 90%)
}

footer #footerinfo {
	display: grid;
	gap: 50px;
	grid-template-columns: repeat(3, 1fr);
	padding: 50px 0
}

footer .footernv {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: min(400px, 100%)
}

footer h6 {
	font-size: max(1.2 * (1vw + 1vh) / 2, 20px);
	margin-bottom: 10px
}

footer .footJbox03 {
	display: flex;
	justify-content: flex-end;
	gap: 15px
}

footer .footJbox03 img {
	width: 134px
}

.coppJJbox {
	padding: 10px 0;
	background: #33434e
}

.cooumpy {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

.cooumpy,
.cooumpy * {
	font-size: max(1*(1vw + 1vh) / 2, 12px)
}

footer .coinorightbox {
	display: flex;
	height: 100%
}

footer .coinorightbox iframe {
	width: 100%;
	position: absolute;
	height: 540px;
	bottom: 0
}

#copyrighJ {
	padding: 5px 0;
	display: flex;
	color: #fdfdfd;
	justify-content: center;
	flex-wrap: wrap;
}

#copyrighJ * {
	color: #ffffff;
	font-size: max(0.9*(1vw + 1vh) / 2, 12px);
	font-weight: 300;
	margin: 0 2px;
	line-height: 100%;
	display: flex;
	align-items: center
}

/* webSeo */
#webSeo {
	padding: 10px 0;
	white-space: nowrap;
	box-sizing: border-box
}

#webSeo .seo {
	padding-left: 100%;
	font-weight: 100;
	font-size: 13px;
	color: var(--info)
}

/* footer_btn */
#footer_btn {
	right:20px;
	bottom: 100px;
	z-index: 2000;
	display: flex;
	flex-direction: column
}

#footer_btn a {
	margin-top: 10px;
	background: #2e2e2e;
	line-height: 40px
}

#footer_btn a svg {
	width: 50%;
	height: 50%;
	fill: #ffffff
}

#footer_btn a.phone {
	background: #2e2e2e;
}

#footer_btn a.gotop {
	background: #526f81;
}

@-webkit-keyframes marquee {
	0% {
		-webkit-transform: translate(0, 0)
	}

	100% {
		-webkit-transform: translate(-100%, 0)
	}
}

@keyframes marquee {
	0% {
		transform: translate(0, 0)
	}

	100% {
		transform: translate(-100%, 0)
	}
}

@media screen and (min-width: 1471px) {
	.workframe {
		width: var(--width-xxl);
		width: min(100%, 1600px);
	}

	header .top_btn {
		width: 90%
	}
}

@media screen and (min-width:1281px) {
	.more_btn:hover:before {
		-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 180deg) translate3d(0, -100%, 0);
		transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 180deg) translate3d(0, -100%, 0)
	}

	header .menu_box {
		display: flex;
		justify-content: flex-end
	}

	header .menu_box ul {
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	header #webmenu nav ul li b {
		display: none
	}

	header #webmenu nav ul li {
		position: relative;
		overflow: visible;
	}

	header #webmenu nav ul li .bo {
		position: relative;
		background: var(--white);
		z-index: 1
	}

	header #webmenu nav>ul>li>p a {
		padding: 10px 0;
		margin-left: 0;
		display: flex;
		align-items: center;
	}

	header.scroll #webmenu nav>ul>li>p a:after {
		background: #7fb053;
	}

	header #webmenu nav>ul>li:last-child>p a:after {
		display: none;
	}

	header #webmenu nav>ul>li>p a:hover {
		color: var(--triadic1);
	}

	header #webmenu nav>ul>li>p a:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		bottom: 0px;
		left: 0;
		background: var(--primary);
		-moz-transform-origin: center;
		-moz-transform: scaleX(0);
		-webkit-transform-origin: center;
		-webkit-transform: scaleX(0);
		-o-transform-origin: center;
		-o-transform: scaleX01);
		-ms-transform-origin: center;
		-ms-transform: scaleX(0);
		transform-origin: center;
		transform: scaleX(0);
		transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out
	}

	header.scroll #webmenu nav>ul>li>p a:before {
		background: #ffffff;
	}

	header #webmenu nav>ul>li>p a:hover:before {
		-moz-transform: scaleX(1);
		-webkit-transform: scaleX(1);
		-o-transform: scaleX(1);
		-ms-transform: scaleX(1);
		transform: scaleX(1)
	}

	header .coouJJ a {
		padding: 6px 30px;
		background: #b01a26;
		border-radius: 500px
	}

	header .coouJJ a:hover {
		background: #333333
	}

	header .coouJJ * {
		color: #ffffff
	}

	header #webmenu li .menu_body,
	header #webmenu li .subOption ul {
		position: absolute;
		width: 170px;
		right: calc(50% - 85px);
		z-index: -1;
		opacity: 0
	}

	header #webmenu li .menu_body ul {
		background: var(--white);
		box-shadow: 0 0 10px rgba(var(--black-rgb), .3)
	}

	header #webmenu li .menu_body ul.subOption {
		display: flex;
		flex-direction: column;
	}

	header #webmenu li .subOption li {
		overflow: hidden
	}

	header #webmenu li .subOption li>div a {
		padding: 6px 15px;
		border-bottom: 1px rgba(var(--black-rgb), .1) solid;
		line-height: 150%;
		font-weight: 300;
		background: unset;
		border-radius: unset;
		color: #222222;
	}

	header #webmenu li .subOption li:last-child>div a {
		border-color: none
	}

	header #webmenu li .subOption li>div a:hover {
		color: var(--primary)
	}

	header #webmenu li .subOption .sub2Option,
	header #webmenu li .subOption .sub3Option {
		top: 0;
		right: -170px
	}

	header #webmenu nav>ul>li:hover,
	header #webmenu li .subOption li:hover {
		overflow: visible
	}

	header #webmenu nav>ul>li:hover .menu_body,
	header #webmenu li .subOption li:hover>ul {
		z-index: 2;
		opacity: 1
	}

	header #webmenu li:last-child .subOption .sub2Option,
	header #webmenu li:last-child .subOption .sub3Option {
		right: auto;
		left: -170px
	}

	header.scroll .top_btn {
		top: -55px;
		opacity: 0
	}

	footer #extra ul li:hover img {
		display: block
	}
}

@media screen and (max-width:1470px) {
	.chage {
		gap: 8px;
	}

	header {
		padding: 0 0;
	}

	header .item {
		padding: 0;
		width: min(1300px, 95%);
	}

	footer #f_nav a {
		margin: 6px 6px
	}

	.workframe {
		width: min(1300px, 95%);
	}

	footer #f_info {
		padding-top: 40px;
	}

	header #webmenu nav>ul>li>p a {
		padding: 20px 4px;
	}

	header.scroll #webmenu nav>ul>li>p a:after {
		display: none;
	}

	header #webmenu nav>ul>li>p a:after {
		right: 0px;
	}

	#foomJconxt {
		margin: 80px auto;
		width: min(90%, 1210px);
		padding: 87px 0
	}
}

@media screen and (max-width:1280px) {
	header #cis {
		width: min(250px, 50%);
	}

	header #menubtn {
		width: 50px;
	}

	.coouJJ svg {
		display: none
	}

	header .item {
		padding: 0 3%
	}

	header #webmenu nav ul li b {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 5
	}

	header #menubtn a span {
		background: #ffffff;
	}

	header .menu {
		align-items: center;
		display: flex;
		justify-content: space-between
	}

	#wwbewm {
		flex: 1;
	}

	header.scroll #menubtn[data-type="2"] a span {
		background: #ffffff
	}

	header #webmenu {
		padding: 15px 0;
		width: 350px;
		height: 100vh;
		background: var(--secondary);
		box-shadow: 0 10px 10px rgba(var(--black-rgb), .5);
		right: calc(-1 * var(--width-xs));
		z-index: 999;
		display: flex;
		justify-content: unset;
		flex-direction: column;
		align-items: center;
		top: 0;
		position: fixed;
	}

	header #webmenu .top_btn a {
		margin: 0 5px
	}

	header #webmenu nav {
		overflow-y: scroll;
		margin-top: 60px;
		padding: 0 10px;
		height: calc(100% - 65px);
		display: flex;
		width: 100%;
		flex-direction: column
	}

	header #webmenu nav::-webkit-scrollbar {
		width: 0
	}

	header #webmenu nav>ul {
		padding-bottom: 200px;
		width: 100%
	}

	header #webmenu nav>ul>li>p a,
	.coouJJ a {
		color: var(--white);
		padding: 23px 25px;
		border-bottom: rgb(255 255 255 / 5%) 1px solid
	}

	header #webmenu nav>ul * {
		transition: all 0.3s ease-in-out;
		-webkit-transition: all 0s ease-in-out
	}

	header #webmenu nav ul li b header #webmenu li .menu_body,
	header #webmenu li .menu_body .subOption li ul {
		position: relative;
		display: none;
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none
	}

	header #webmenu li .menu_body ul {
		margin-left: 20px
	}

	header #webmenu li .menu_body .subOption .bo {
		position: relative
	}

	header #webmenu li .menu_body .subOption a {
		padding: 7px 45px 7px 10px;
		color: #ffffff;
	}

	header #webmenu li .menu_body .sub2Option a {
		font-weight: 300;
		color: rgba(var(--white-rgb), .5)
	}

	header #webmenu li .menu_body .sub3Option a {
		color: rgba(var(--triadic1-rgb), .8)
	}

	footer #f_info .coinotopbox {
		display: flex;
		flex-direction: column;
	}

	footer #f_info .footexinfo {
		grid-template-columns: 19% 19% 19% 19%;
	}

	footer #f_info .footexinfo .footebox:before {
		right: -14%;
	}
}

/* +footercall
*----------------------------------------------------------------------------*/
@media screen and (min-width: 1025px) {
	.phoneWrap {
		display: none !important;
	}

	footer #footerCompany .plus-information a:hover img {
		display: block
	}
}

@media screen and (max-width: 1024px) {
	.phoneWrap {
		display: flex;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 94500;
		flex-direction: column
	}

	.phoneWrap ul {
		display: flex;
	}

	.phoneWrap ul li {
		width: 50%;
		box-sizing: border-box;
		background-color: #348523;
	}

	.phoneWrap ul li+li {
		border-left: 1px solid #fff;
		background: #271b1b;
	}

	.phoneWrap ul li a {
		display: inline-block;
		width: 100%;
		color: #fff;
		text-align: center;
		padding: 10px 0px;
	}
}

@media screen and (max-width:1024px) {}

@media screen and (max-width:980px) {
	#foomJconxt {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		-webkit-box-shadow: unset;
		box-shadow: unset;
		background: unset
	}

	#foomJconxt .foocxtleft {
		width: 100%;
	}

	footer #footerinfo {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width:870px) {
	footer #f_info .footexinfo {
		grid-template-columns: 49% 49%;
	}

	footer #f_info .footexinfo .footebox:before {
		display: none;
	}
}

@media screen and (max-width:768px) {
	header {
		background: var(--complement);
		top: 0;
		padding: 10px 0;
	}

	header #cis img {
		width: min(180px, 95%)
	}

	footer #extra {
		margin-top: 10px
	}

	.webBox .wrapper_lines .center_box>div {
		border-width: 0 0 0 1px
	}

	header:before {
		display: none;
	}

	.boomJJ {
		width: 100%;
	}
}

@media screen and (min-width:641px) {
	.mbshow {
		display: none !important;
	}
}

@media screen and (max-width:640px) {
	footer #footerinfo {
		grid-template-columns: repeat(1, 1fr);
	}

	.mbnone {
		display: none !important;
	}

	header #menubtn a {
		width: 18px;
		height: 15px
	}

	header #header_bar {
		display: none
	}

	.workframe {
		width: min(520px, 90%);
	}

	#doctorpicbox .boomJJ {
		width: 100%;
	}

	.top_space {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
	}

}

@media screen and (max-width:550px) {
	.chage svg {
		width: 6vw;
	}

	header #menubtn {
		width: 16px;
	}

	.member_img img {
		width: 19px;
	}

	.chage {
		gap: 5px;
	}

	header .item {
		padding: 3px 0%;
	}

	header #cis {
		width: min(200px, 50%);
	}

	header .top_btn {
		width: 90%
	}

	header #webmenu {
		width: 320px
	}

	#search_box form {
		right: 2%;
		bottom: -35px
	}

	footer .workframe {
		width: 85%;
	}

	#footer_btn {
		right: 10px;
		bottom: 100px;
	}

	#footer_btn a {
		margin: 0 10px;
		line-height: 35px
	}

	#footer_btn a.gotop {
		right: 0;
		bottom: 0px
	}

	a.fmlink {
		width: min(200px, 100%);
		margin: 30px auto 10px;
	}
}

@media screen and (max-width:480px) {
	.lang-label {
		display: none;
	}

	#wwbewm a {
		padding: 10px
	}

	.webBox header #search_box #openform {
		width: 40px;
		height: 40px
	}

	.webBox header #search_box {
		display: none
	}

	header #cis img {
		width: 200px;
	}

	header {
		padding: 0
	}
}

.booktitle {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	box-sizing: border-box;

}
.pagination-container{
    justify-content: center;
    display: flex;
}
.pagination-container a{
    margin: 0 2px;
    width: 35px;
    height: 35px;
    background: rgba(var(--black-rgb), .1);
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    line-height: 35px;
    font-weight: 400;
}