@charset "utf-8";
/*=================================================

main.css
Date - 2025.11.11
msdia - screen
[Table of contents]


=================================================*/


*{font-size:18px; font-family:'Noto Sans TC','Gill Sans MT', 'Myriad Pro', Arial, sans-serif, serif;}

body {
		margin: 0;
		padding: 0;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		font-size: 18px;
		background:url("../images/bg.jpg") center 0 repeat-x,#fbe1e7;
		}

/**************** 內容 ****************/

div.mainFrame{
    max-width:1100px;
    margin:0 auto;
    text-align: center;
	background:#ffcccc;/*linear-gradient(#f7b1c1, #ffcccc)*/
	border-radius: 0 0 40px 40px;
	font-family: 'Noto Sans TC','Gill Sans MT', 'Myriad Pro', Arial, sans-serif, serif;
}
div.cutFrame_list{
    width:100%;
    display:inline-block;
}
div.cutFrame{max-width:1000px;margin:0 auto;padding-bottom:1.5rem;}
div.cutFrame img{vertical-align: top;}
div.innFrame{max-width:1000px;margin:0 auto;position: relative;}
div.innFrame img{transition: transform .3s ease-out;}
div.innFrame img:hover{ transform: scale(1.05);}
div.innFrame img:active{ transform: scale(1);}

img.imgbtm{margin-bottom:1rem;}

/* 頁簽 */
.tab_item{ margin: .5rem auto 0; max-width:1000px;}
.tab_item > ul{ display:block; margin:0;list-style:none;text-align: center; }
.tab_title{list-style:none;}
.tab_item > ul > li{display:inline-block; vertical-align:top; margin:0 .2rem -3px .2rem;padding:.2rem 1.5rem .2rem;border-radius: 30px 30px 0 0;
					border:4px solid #ff85df;background:#fff;list-style:none; box-sizing:border-box;font-weight: bold;line-height: 1.2rem;}
.tab_item > ul > li span{color:#ff37cb;}
.tab_item >  ul > li a{color:#000; text-decoration:none;font-size: 1rem;}
.tab_item > ul > li.active{border:4px solid #ff85df;background:#e400a9;}
.tab_item > ul > li.active a{color:#fff;}
.tab_item > ul > li.active span{color:#fff31e;}
.tab_item > .tab_inner{clear:both;}
.tab_inner{padding:1rem;border-radius: 35px;background:#ff85df;}

h2.subTitle{font-size:1.5rem;margin-bottom:.5rem;display:none;}

/**************** 圖片輪播 ****************/

div.picShow_item{
		border-radius: 30px;
		border:10px solid #ffec00;
	    width:98%;
	    margin:0 auto;
	    
	}
div.picShow_item_inn{
	border:10px solid #ff53d6;
	margin-bottom:1rem;
}	
div.picFrme{
		width:100%;
		margin: 0 auto;
	}

.jssorbList{
		position: relative; top: 0px; left: 0px; width: 800px; height: 419px;  visibility: hidden; 
	}/*overflow: hidden;*/
.jssorbSlides{
		position: relative; top: 0px; left: 0px; width: 800px; height: 419px; overflow: hidden; cursor: default; border-radius: 18px;
	}
	/*.jssorbStits{
		cursor: default; position: relative; top: 0px; left: 0px; overflow: hidden;z-index: 99;
	}
	.jssorbStits img{width:90%;}*/
.jssorb05 {
				position: absolute;
				bottom:.3rem;
			}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
				position: absolute;
				/* size of bullet elment */
				width: 20px;
				height: 20px;
				background: url('../images/b05.png') no-repeat;
				overflow: hidden;
				cursor: pointer;
			}
.jssorb05 div { background-position: -5px -5px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -35px -5px; }
.jssorb05 .av { background-position: -65px -5px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -95px -5px; }
	
.jssora22l, .jssora22r {
				display: block;
				position: absolute;
				/* size of arrow element */
				width: 100px;
				height: 200px;
				cursor: pointer;
				background: url('../images/a22.png') center center no-repeat;
				background-size:600%;
				overflow: hidden;
			}
.jssora22l { background-position: 0px 0; }
.jssora22r { background-position: -100px 0; }
.jssora22l:hover { background-position: -200px 0; }
.jssora22r:hover { background-position: -300px 0; }
.jssora22l.jssora22ldn { background-position: -400px 0; }
.jssora22r.jssora22rdn { background-position: -500px 0; }


/**************** footer ****************/

.mftr{
	width:100%;
	margin-top:0px;
	padding-top:1rem;
	/*padding-bottom:1rem;*/
	line-height:1rem; 
	text-align: center;
}
.mftr p{color:rgba(250,130,155,1.00);font-size: .6rem;margin: 0 auto;}


/**************** 按鈕 ****************/

.Pdcol {
  padding: 1rem;
  position:relative;
  width: 50%;
  top:.5rem;
  margin:0 auto;
}

.Pdcol a{text-decoration:none;}

.container {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: .5rem .5rem;
}

.card {
  display: block;
  text-align: center;
  background-color:#fff0;
  border:0;
}

.card .content {
  padding: 1rem 1rem;

}

.card .title {
  color: #fff;  
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing:.1rem;
  padding: .5rem;
} 

.card .title span{
    color:#fff100;
    display: inline-block;
    position: relative;
    animation-name: ani-circle; /*動畫名稱(自訂)*/
    animation-duration: 1s; /*一次完整動畫時間為2秒*/
    animation-iteration-count: infinite; /*播放次數為無限次*/
    animation-direction: alternate; /*播放方向為先正向再反向*/
    animation-timing-function: ease-in-out;/*定義動畫轉變時時間的加速曲線*/
}

@keyframes ani-circle { /*動畫名稱為 ani-circle*/
    0%   {left: 0px;}
    100% {left: 10px;}
}

.card-3 .content {
  background-color: #fb4e4f !important;
  border-radius: 100px;
}
/*, .card-3:after */
.card-3:before{
  border-radius: 100px;
}
.card-3:before {
  background-color: #fff953 !important;
}

[class*='stacked--']{
  position: relative;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  will-change: transform;
}

[class*='stacked--']:before{
 bottom: -5px;
}

[class*='stacked--']:before{
  z-index: -1;
   content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-color: currentColor;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  will-change: transform;
}
.stacked--up:before{
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}
.stacked--up:hover {
  -webkit-transform: translate(0, 5px);
          transform: translate(0, 5px);
}
.stacked--up:hover:before {
  -webkit-transform: translate(0, -5px) scaley(.8) scalex(.98);
          transform: translate(0, -5px) scaley(.8) scalex(.98);
}

/**************** nav ****************/

.nav_menu{
  z-index: 999;
  position:fixed;
  background:rgba(255,50,255,.9);
  width: 120px;
  height: 420px;
  right:10px;
  top:22%;
  border-radius: 0 0 100px 100px;

}
.nav_menu a.logo_top{
	position:relative;
	display:block;
	top:0;
	left:0;
	width:100%;
	height:130px;
	background:url(../images/menuTop.png?v=3) 0 0 no-repeat;
	background-size:100%;
	overflow: hidden;
	text-indent: -200em;
	border-bottom: 0;
	transform: translateY(-60px);
}
.nav_menu a.logo_top:hover{
	background:url(../images/menuTop_hover.png?v=3) 0 0 no-repeat;
	background-size:100%;
	border-bottom: 0;
}
.nav_menu a.type1,.nav_menu a.type2{
	transform: translateY(-60px);
	font-family: 'Noto Sans TC','Microsoft JhengHei',Arial;
	width:100%;
	display:block;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	border-bottom: 1px solid rgba(255,255,255,.2);
}
.nav_menu a.type1{
	height:2rem;
	padding-top:.5rem;
	color:#fffa50;
}
.nav_menu a.type2{
	height:2rem;
	padding-top:.5rem;
	color:#fff;
}
.nav_menu a:hover{
	background:rgba(255,250,80,1);
	color:#ff32ff;
}
.nav_menu a.bottomA{
	transform: translateY(-60px);
	display:block;
	padding-top:1rem;
	border-bottom: none;
	color:#fff;
}
.nav_menu a.bottomA:hover{
	background:none;
	color:#fffa50;
}
.lightCls{
	background:rgba(255,20,45,1);
	color:#fff;
}

/* 視窗縮放 */ 
@media only screen and (max-width: 1000px) {}

@media only screen and (max-width: 750px) {
	.Pdcol .card .title { font-size: 1.5rem;vertical-align: middle;letter-spacing:0;}
	div.cutFrame{padding-bottom:.5rem;width:95%;}
	img.imgbtm{margin-bottom:.5rem;}
	/* 選單 */
	#go01{display:none;}
	#go05{display:none;}
	.nav_menu{
		width: 100%;
		height: 50px;
		right:0;
		top:94%;
		transform: translateY(0);
		border-radius: 0 0 0 0;
		text-align: center;
	}
	.nav_menu a.logo_top{
		top:8px;
		left:0;
		width:100%;
		height:3rem;
		background:url(../images/menuTop_mobile.gif?v=3) 0 0 no-repeat;
		background-size:100%;
	}
	.nav_menu a.logo_top:hover{
		background:url(../images/menuTop_mobile_hover.gif?v=3) 0 0 no-repeat;
		background-size:100%;
		border-bottom: 0;
	}
	.nav_menu a.type1,.nav_menu a.type2{
		transform: translateY(-50px);
		width:23%;
		height:35px;
		display:inline-block;
		text-align: center;
		padding-left:0;
		font-size: .9rem;
		border-bottom: 0;
		vertical-align:text-top;
	}

	.nav_menu a.bottomA{display:none;}
	
	/* 頁簽 */
	.tab_item > ul > li{display:inline-block; vertical-align:top; margin:0 0 -3px;padding:0 .1rem;;border-radius: 12px 12px 0 0;}
	.tab_item >  ul > li a{font-size: .8rem;}
	.tab_item > ul > li span{font-size: .8rem;}
	
	/**************** 圖片輪播 ****************/
	div.picShow_item{margin-left:-5px;}
	div.picShow_item{border:5px solid #ffec00;}
	div.picShow_item_inn{border:5px solid #ff53d6;}	
	
	.jssorbSlides{border-radius: 55px;}
	
	.jssorb05 {bottom:.5rem;}
	.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
			background: url('../images/b05_mb.png') no-repeat;
			}
	.jssorb05 div { background-position: -7px -7px; }
	.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
	.jssorb05 .av { background-position: -67px -7px; }
	.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
	
	.jssora22l, .jssora22r {
				background: url('../images/a22_mb.png') center center no-repeat;
			}
	.jssora22l { background-position: 0px 0; }
	.jssora22r { background-position: -100px 0; }
	
}

@media only screen and (max-width: 440px) {
	.Pdcol .card .content { padding: 0rem 0rem .4rem;}
	.Pdcol .card .title { font-size: .8rem;vertical-align: middle;letter-spacing:0;}	
}
@media only screen and (max-width: 375px) {
	/* 選單 */
	.nav_menu{
		top:94%;
	}
	.nav_menu a.logo_top{
		top:12px;
	}
	/* footer*/
	.mftr p{font-size: .55rem;}
}
@media only screen and (max-width: 320px) {
	

}