@charset "utf-8";
:root{
	--common-font-size: 20px;
    --common-line-height: 1.4;
    --common-font-weight: 400;
    --common-color: #646464;
	
	--maxLayout: 1500;
	--maxInner: 1400;
	--topH: 100px;
	--paddingLR: clamp(25px, (50 / var(--maxLayout) * 100VW), 50px);
	--paddingT: clamp(80px, (120 / var(--maxLayout) * 100VW), 120px);	
	--paddingB: clamp(80px, (120 / var(--maxLayout) * 100VW), 120px);	
	
	.fa{
		font-size: 24px;
		margin-left: 1px;
	}		
	input:focus {
		outline: none;
	}
	select {
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		background-attachment: scroll;
		background-image: url(/images/select-switch.png);
		background-repeat: no-repeat;
		background-size: 15px auto;
		background-position: right 15px center;
		text-align: left;
	}
	select::-ms-expand{ 
		display: none; 
	}
}

body {
	display: flex;
	flex-direction: column;
	-webkit-overflow-scrolling: touch;
	word-break: break-word;
	color: var(--common-color);
	font-family: "Rubik", "Noto Sans TC", serif;
}
body, .cs{
	font-size: var(--common-font-size);
	line-height: var(--common-line-height);	
	font-weight: var(--common-font-weight);
}
body.lock{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
body *:not(.fa),
body *:not(.fa):after,
body *:not(.fa):before{	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	max-width: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
i, a, .cs{
	padding: 0;
	margin: 0;
	list-style: none;
	border-style: none;
	font-style: normal;
	border: 0px;
}
html,
body{
	min-width:100%;
}
html,
body,
.w100,
.w100-only-child *:not(.no-w100),
.layout-full,
.article,
.layout-pn{
	float: left;
	width: 100%;
}
.h100{
	height: 100%;
}
a{
	text-decoration: none;
	color: inherit;
	&:hover{cursor: pointer;}
}
.lh-1{
	line-height:1;
}
.ulbox,
.ulbox-subs ul{
	list-style:none;
	padding:0; 
	margin:0;
}
.flexbox,
.flex-and-child,
.flex-and-child *:not(.no-flex),
.flex-only-child *:not(.no-flex),
.layout-pn,
.layout-pn .pagination,
.layout-pn .pagination .num,
.layout-pn .pagination .button,
.layout-full:not(.no-flex),
.nav-switch{
	display: flex;
	align-items: center;	
	justify-content: center;
	flex-wrap: wrap;
}
.flex-col{
	display: flex;
	flex-direction: column;
}
.flexbox.column{flex-direction: column;}
.flexbox.sbet,
.flex-col.sbet{
	justify-content: space-between;
}
.flexbox.jcs,
.flex-and-child .jcs,
.flex-only-child .jcs{
	justify-content: flex-start;
}
.flexbox.jce,
.flex-col.jce,
.flex-and-child .jce,
.flex-only-child .jce{justify-content: flex-end;}
.flexbox.vttop,
.flex-and-child .vttop,
.flex-only-child .vttop{
	align-items:flex-start;
	align-content:flex-start;
}
.flexbox.vtend,
.flex-col.vtend,
.flex-and-child .vtend,
.flex-only-child .vtend{
	align-items:flex-end;
	align-content:flex-end;
}
.flexbox.fs{
	align-items:flex-start;
	align-content:flex-start;
	justify-content: flex-start;
}
.flexfill{
	flex:1;
	min-width: 1px;
}
a, a:after, a:before,
.trans, .trans:after, .trans:before,
.button-hb hr, .button-hb:before, .button-hb:after{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.trans.no, .trans.no:after, .trans.no:before{
	transition: none;
}
.scrollin,
.scrollin-top,
.scrollin-op,
.scrollin-l,
.scrollin-r,
.scrollin-fixed,
.zoom-out{
	visibility: hidden;
}
body.nav-on{
	overflow: hidden;
}

.layout-full {
	min-width: calc(var(--maxLayout) * 1px);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}
.layout-center {
	width: calc(var(--maxLayout) * 1px);
}
.pd-lr-1{
	padding-right: var(--paddingLR);
	padding-left: var(--paddingLR);
}
.pd-t-1{
	padding-top: var(--paddingT);
}
.pd-b-1{
	padding-bottom: var(--paddingB);
}

.article {
line-height: 1.9;
}

.article ul,
.article ol {
padding: 0;
}

.article ul {
list-style-type: disc;
}

.article li {
 margin-left: 25px;
}

.article a {
text-decoration: underline;
color: #ed3e6c;
}

.article a:hover {
color: #e82360;
}

.article h3 {
color: #bc1e40;
margin: 0px;
font weight:700;
}

.hide-ex{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sr-only,
.visually-hidden {	
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.layout-full.middle {
	flex: 1 0 auto;
	flex-direction: column;
}

.grid-container {
	display: grid;
	align-items: stretch;
}

.display-none{ 
	display: none; 
}
.no-max100{
	max-width: none!important;
}
.overflow-hidden{ 
	overflow: hidden;
}

.pd-lr-1b{
	padding-right: calc(var(--paddingLR) + 20px);
	padding-left: calc(var(--paddingLR) + 20px);
}
.layout-full.top{
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 5;
	height: var(--topH);
	column-gap: 30px;
}
.layout-full.top:before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: #FFF;
}
.layout-center.top .tel{
	column-gap: 12px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.layout-center.top .tel .text {
	background-color: #e6e6e6;
	height: 34px;
	padding-right: 12px;
	padding-left: 12px;
	border-radius: 17px;
	font-weight: 700;
	color: #bc1e40;
}
.layout-full.top nav{
}
.layout-full.top .nav{
	column-gap: 80px;	
}
.layout-full.top .nav > li{
}
.layout-full.top .nav > li > a{
	color: #323232;
}
.layout-full.top .nav > li > a:hover{
	color: #bc1e40;
}
.banner-box {
	width: 1920px;
}
.banner-inner {
	position: relative;
}
.banner-inner-img{
	position: relative;	
}
.banner-inner-img .mbg{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
	visibility: hidden;
}
.banner-inner-img::after{
	content: "";
	background-image: url(../images/banner-cover.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 100% auto;
	height: 100%;
	width: 100%;
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.banner-inner-text {
	position: absolute;
	inset: 0;
	color: #FFF;
}
.banner-inner-text .text1{
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 15px;
}
.banner-inner-text .text2{	
	font-weight: 500;
}
.layout-full.bottom {
	background-color: #bc1e40;
	padding-top: 80px;
	padding-bottom: 80px;
}
.layout-center.bottom {
	gap: 50px 80px;
	color: #f2f2f2;
}
.layout-center.bottom .footer{
	gap: 20px 35px;
	margin-bottom: 60px;
}
.layout-center.bottom .copyright {
	opacity: 0.5;
}
.block-title {
	font-size: 26px;
	font-weight: 700;
	color: #bc1e40;
	margin-bottom: 40px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cccccc;
}

.sidebar-box{
	position: fixed;
	z-index: 4;
	right: 25px;
	bottom: 25px;
	gap: 5px;
}
/*.back-top{
	transform: translateY(-10px);
	opacity: 0;
	visibility: hidden;
}
.back-top.show{
	transform: translateY(0);opacity: 1;visibility: visible;
}*/

.nav-switch {
    display: none;
    z-index: 3;
    
    .button-hb {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: flex-end;
        width: 30px;
        height: 25px;
        color: #bc1e40;		
        
        hr,
        &:before,
        &:after {
            border: none;
            display: block;
            height: 3px;
            width: 100%;
            margin: 0px;
            padding: 0px;
            color: inherit;
            background-color: currentcolor;
        }
        
        &:before,
        &:after {
            content: '';
        }
    }
}
html > body.nav-on .nav-switch .button-hb {
    &:before {
        width:80%;
    }
    
    hr {
		width:60%;
    }
    
    &:after {
    }
}

.layout-pn {
	margin-top: clamp(70px, (100 / var(--maxLayout) * 100vw), 100px);
	column-gap: 20px;
}
.layout-pn .pagination{
	gap: 10px;	
}
.layout-pn .pagination .button:not(.arrow) {
	line-height: 1;	
	width: 35px;
	height: 35px;
	color: #4B4B4B;
	font-size: 16px;
		
	&:hover,
	&.selected{
		color: #B4053C;		
	}
}
.layout-pn .pagination .button.arrow{
	width: 61px;
	height: 40px;
	background-image: url(../images/icon-button-arrow-1.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	&:hover{background-image: url(../images/icon-button-arrow-2.png);}
	&.prev{transform: rotate(180deg);}
	>.fa{display: none;}
}

.rwd-table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

/*編輯器左右捲軸表格*/
@keyframes swipe {
  0% {
    right: 0px;
  }
  50% {
    right: 20px;
  }/
  100% {
    right: 0px;
  }
}
.for-sroll-table {
	overflow-x: auto;
	display: flex;
	table-layout: fixed;
	position: relative;
}
.for-sroll-table.swipe:after{
	content: "";
	height: 15px;
	width: 80px;
	position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(/plugins/swipe.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	animation: swipe 2s infinite;
}
.for-sroll-table *{
	max-width: none;
}
.for-sroll-table > table {
	width: 100%;
	table-layout: fixed;
}

.W-1920px{}
@media screen and (max-width: 1920px) {
}

.W-1500px{}
@media screen and (max-width: 1500px) {
.layout-full{
	min-width: inherit;
}

.layout-center.top .tel{
	margin-top: 20px;
	margin-bottom: 20px;
}
.banner-inner-text .layout-center {
	padding-right: 20px;
	padding-left: 20px;
}
}

.W-1100px{}
@media screen and (max-width: 1100px) {
.rwd-table > th{
	display: none;
}
.rwd-table > tbody > tr{
	display: flex;
	flex-direction: column;
}
.rwd-table.rtlb > tbody > tr{
	flex-direction: column-reverse;
}

:root{
	--topH: 70px;
}
.nav-switch{
	display: flex;
}

.layout-full.top{
	position: sticky;
}
.layout-center.top .tel{
	display: none;
}
.layout-center.top .logo {
	width: 220px;
}
.nav-box{
	position: fixed;
	top: 0px;
	right: 0px;
}
.layout-full.top nav{
	position: fixed;
	height: calc(100VH - var(--topH));
	width: 100%;
	top: var(--topH);
	background-color: rgba(150 0 18 / 0.95);
	
	opacity: 0;
	visibility: hidden;	
	pointer-events: none;
    touch-action: none;      /* 防止觸摸事件 */
    user-select: none;       /* 防止文字選擇 */
    -webkit-tap-highlight-color: transparent;  /* 防止點擊高亮 */
	
	overflow:auto;
	overflow-x: hidden;
	padding: 60px var(--paddingLR);
	align-items: flex-start;
	align-content: flex-start;
	
	z-index: -3;
	
	ul, li, a{
		width: 100%;
	}
	.nav{
		flex-direction: column;
		justify-content: flex-start;
		row-gap: 40px;		
		
		>li{		
			padding: 0;				
		}
		>li>a{
			height: auto;
			min-height: inherit;
			color:#ffffff;	
			
			&:hover{
				color:#ffffff;	
				text-decoration: underline;
			}
		}	
	}
}
body.nav-on{
	.layout-full.top{
		nav,
		&::after{
			opacity: 1;
			visibility: visible;	
			pointer-events: auto;
			touch-action: auto;      /* 恢復觸摸事件 */
			user-select: auto;       /* 恢復文字選擇 */		
		}	
	}
}
.layout-center.bottom .logo {
	width: 100%;
}
}

.W-800px{}
@media screen and (max-width: 800px) {
.banner-inner-img > img,
.banner-inner-img .limg{
	display: none;
}
.banner-inner-img .mbg{
	height: 365px;
	visibility: visible;
}
.banner-inner-img::after{
	background-size: auto 100%;
}
}

.W-480px{}
@media screen and (max-width: 480px) {
}