@charset "utf-8";
/*基本*/
body { margin: 0; padding: 0; width:100%;background-color: #3380B8; }
.for_phone { display:none;}
 @media screen and (max-width:767px){
                .for_pc{ display:none !important;}
                .for_phone{ display:block !important;}
				 body { margin: 0; padding: 0; background-image:none }
				 .for_m_magintop { margin-top:3vw;}
 }


/*全BOX版面*/
.WRAPPER {position:relative; display:inline-block;  margin:0; padding:0;  width:100%;  overflow:hidden;min-width:1220px;   }
.WRAPPER img {border:0; vertical-align:top;}
.WRAPPER .mainArea {  margin:0 auto; width:1220px; font-family:"Century Gothic", "微軟正黑體", sans-serif; position:relative; }
.WRAPPER .mainArea a{ padding:0; margin:0; text-decoration:none; font-family:"微軟正黑體" }
.WRAPPER  a { text-decoration:none;font-family:"微軟正黑體"} 
/*控制區塊背景的位置*/
.Areabg{ margin-left:-390px;} 
@media screen and ( max-width:736px) {
	.WRAPPER { min-width: inherit;  background: url(bgrepeat_m.jpg?t=1752213479339) no-repeat center 44px; background-size: 100%; }
	.WRAPPER img {width:100%; height:auto;}
}

	
/*背景-可自行換背景色*/
/*PC背景可自行增加class*/
/*PC背景*//*可自行增加class調整*/
@media screen and (min-width:767px){
	.bgtop01  {z-index:-1 !important;position:absolute;top:0;left:0;width:100%;min-width:1220px;height:1300px;background-repeat:no-repeat;background-position:center top;}
	.bgtop02  {z-index:-1 !important;position:absolute;top:1300px;left:0;width:100%;min-width:1220px;height:2390px;background-repeat:no-repeat;background-position:center top;}
	.bgtop03  {z-index:-1 !important;position:absolute;top:3690px;left:0;width:100%;min-width:1220px;height:1960px;background-repeat:no-repeat;background-position:center top;}
	.bgtop04  {z-index:-1 !important;position:absolute;top:5650px;left:0;width:100%;min-width:1220px;height:630px;background-repeat:no-repeat;background-position:center top;}
	.bgtop05  {z-index:-1 !important;position:absolute;top:6280px;left:0;width:100%;min-width:1220px;height:700px;background-repeat:no-repeat;background-position:center top;}
	.bgtop06  {z-index:-1 !important;position:absolute;top:6980px;left:0;width:100%;min-width:1220px;height:700px;background-repeat:no-repeat;background-position:center top;}
	.bgtop07  {z-index:-1 !important;position:absolute;top:7680px;left:0;width:100%;min-width:1220px;height:700px;background-repeat:no-repeat;background-position:center top;}
	.bgtop08  {z-index:-1 !important;position:absolute;top:8380px;left:0;width:100%;min-width:1220px;height:700px;background-repeat:no-repeat;background-position:center top;}
	.bgtop09  {z-index:-1 !important;position:absolute;top:9080px;left:0;width:100%;min-width:1220px;height:665px;background-repeat:no-repeat;background-position:center top;}
}
@media screen and (max-width:767px){
  /* .bgtop { min-width: inherit;  background: url(bgrepeat_m.jpg?t=1752213479339) no-repeat center 44px; background-size: 100%;} */
  .bgtop01,.bgtop02,.bgtop03,.bgtop04,.bgtop05,.bgtop06,.bgtop07,.bgtop08 { background: none; }
}



/*移除公版設定*/
.Area .remove_box_style ul { background-color: transparent; grid-gap: 10px;}
.Area .remove_box_style ul li { border: none!important;}
@media screen and (max-width:767px){
  .Area .remove_box_style ul {width: 100%;}
  .Area .remove_box_style ul {}
}

/*輪播公版移除公版樣式設定*/
/*PD_layout 區塊加上swiper_remove_box_style標籤
css貼上以下語法*/

/*輪播移除公版設定*/
.Area .swiper_remove_box_style ul { background-color: transparent;grid-gap: 10px; }
.Area .swiper_remove_box_style ul li { border: none!important; background-color: #fff; }
.Area .swiper_remove_box_style ul li,
.Area .swiper_remove_box_style ul li .PD_img img { border-radius: 10px;}
@media screen and (max-width:767px){
  .Area .swiper_remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area .swiper_remove_box_style ul {}
}



/*區塊_all*/
.Area1220 {position: relative;margin:0 auto;width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; display:block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);

          transform:scale(0.95);}
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		.Area .go_bt:hover {  
			-webkit-transform:none;
			-moz-transform:none;
			-ms-transform:none;
			-o-transform:none;
			transform:none;}
	}
		  
/*區塊-共用按鈕*/
.Area .btn_go {}
.Area .btn_go *{
						  -webkit-transition: all 0.1s ease;
							 -moz-transition: all 0.1s ease;
							  -ms-transition: all 0.1s ease;
							   -o-transition: all 0.1s ease;
								  transition: all 0.1s ease;} 
.Area .btn_go a:hover {  -webkit-transition: all 0.35s;
    transition: all 0.35s;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);}
.Area .btn_go a:after  { 
								  -webkit-transition: all 0.4s ease;
									 -moz-transition: all 0.4s ease;
									  -ms-transition: all 0.4s ease;
									   -o-transition: all 0.4s ease;
										  transition: all 0.4s ease;}
.Area .btn_go:active a,
.Area .btn_go:focus a,
.Area .btn_go:hover a { color:#fff;}
.Area .btn_go:active a:after,
.Area .btn_go:focus a:after,
.Area .btn_go:hover a:after  { width:150% !important;}
.Area .btn_go:active a i,
.Area .btn_go:focus a i,
.Area .btn_go:hover a i { background-color:#000; transform:translateX(-10px); transition-delay:0.1s;}
.Area .btn_go a strong { z-index:2; position: relative; }
.Area .btn_go a i {
	z-index: 3;
	position: absolute;
	top: -63px;
	right: -278px;
	display: inline-block;
	border-radius: 60px;
	width: 60px;
	height: 60px;
	background: #09006e url(btn_icon_r.png?t=1696598482216);
	background-size: contain;
}
	@media screen and (max-width:736px){ 
	    .Area{ width:100%; height:100%; }
		.Area .btn_go { position:absolute; }
		.Area .btn_go *{
								  -webkit-transition: all 0.2s ease;
									 -moz-transition: all 0.2s ease;
									  -ms-transition: all 0.2s ease;
									   -o-transition: all 0.2s ease;
										  transition: all 0.2s ease;} 
		.Area .btn_go a { display:block; color:#fff; letter-spacing:-2px;}
		.Area .btn_go a:after  { }
		.Area .btn_go:active a,
		.Area .btn_go:focus a,
		.Area .btn_go:hover a { color:#fff;}
		.Area .btn_go:active a:after,
		.Area .btn_go:focus a:after,
		.Area .btn_go:hover a:after  { width:150% !important;}
		.Area .btn_go:active a i,
		.Area .btn_go:focus a i,
		.Area .btn_go:hover a i { background-color: transparent; transform:translateX(-10px); transition-delay:0.1s;}
		.Area .btn_go a strong { z-index:2; position: relative; }
		.Area .btn_go a i { z-index:3; position: absolute; top:0; right:0; display:inline-block; border-radius:35px; width:35px; height:35px; background:#09006e url(btn_icon_r.png?t=1696598482216);  background-size:contain;}
	}

.Area_main { height: 1790px; padding-top: 170px;}
.Area_main .title { margin-top: 0; }
.Area_main .for_pc ul li img { height: 660px; }
.Area_brand { height: 550px; }
@media screen and (max-width:767px){
	.Area_main { height: auto; width: auto; padding-top: 15vw; }
	.Area_main .title { margin-top: 2vw; }
	.Area_brand { height: 50vw; display: flex; align-items: center;}
}
.kv-title { position: absolute;left: 60px;top: 220px;z-index: 3; }
.kv-pd { position: absolute;left: 205px; bottom: 260px;z-index: 2; }
.kv-promotion { position: absolute;left: 50px;bottom: 110px;z-index: 3; }
.kv-float { position: absolute;right: -267px;top: 252px;z-index: 1; }
.kv-logo { position: absolute;left: 275px;top: 112px;z-index: 1; }


/* 登記區 */
/* .Area .Area_btnblack { margin-top: 15px; } */
.Area_register { padding-top: 11.5vw; padding-bottom: .5vw; }
@media screen and (min-width:768px){ .Area_register { height: 2200px ; padding-top: 190px; padding-bottom: 0; } }

/* 標題 */
.title { margin-top: 8vw; }
.title .PD_img { display: flex; justify-content: center; }
@media screen and (min-width:768px){ .title { margin-top: 10px;} }

/* 強打 */
.Area .main-bg ul li { margin-top: 15px; margin-bottom: 15px; }
@media screen and (max-width:767px){ .Area .main-bg ul li img { width: 60%; } }

/* 產品排列調整 */
.Area_PD#pd1, .Area_PD#pd2, .Area_PD#pd3, .Area_PD#pd4 { padding-top: 13vw; padding-bottom: 2vw; }
.Area_PD .PD_layout ul  { padding: 1em 3em .5em; }
.readmore a { width: 33%; color: #fff !important; font-weight: 900; line-height: 2; margin: auto auto 3em auto;}
@media screen and (min-width:768px){
	.Area_PD .PD_layout ul  { padding: 0; }
	.Area_PD#pd1, .Area_PD#pd2, .Area_PD#pd3, .Area_PD#pd4, .Area_PD#pd5 { height: 510px; max-width: 1200px; padding-top: 190px; padding-bottom: 0; margin-bottom: 0; }
	.AreaArea_PD .PD_wrapper .PD_img { width: 300px;margin: 0 auto; }
	.readmore a { width: 250px; line-height: 1.8; font-size: 15pt; margin: 0.4em auto 0em auto }
	.readmore a:hover { transform: scale(1.2); transition-duration: .2s; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
}

/* 輪播 */
.Area .BN_swiper ul li img { width: 90%; }
.pagination { bottom: -5vw; }
.swiper-pagination-clickable .swiper-pagination-bullet:nth-child(n+2) { margin-left: 5px; }
.swiper-pagination-clickable .swiper-pagination-bullet { width: 2vw; height: 2vw;}
@media screen and (min-width:768px){
  .Area .BN_swiper ul li img { width: 100%; }
  .Area .BN_swiper { width: 960px; }
  .pagination { bottom: -50px; }
  .Area02 { overflow: hidden; width: 940px; height: 600px; padding-top: 30px;}
  .swiper-pagination-clickable .swiper-pagination-bullet { width: 20px; height: 20px;}
}


/*間距*/
.Area_bottom { top: 0; }
@media screen and (max-width:767px){
  .Area_bottom { margin-top: 0; top: 0; padding-bottom: 10vw;}
}

/* Brand */
@media screen and (min-width:768px){
	.Area_brand { height: 665px; }
	.Area .Area_brand .PD_layout ul.PD_wrapper { grid-gap: 50px;}
	/* .Area_brand ul li img { width: 340px; } */
}
@media screen and (max-width:767px){
	.Area_brand ul li img { width: 95%; }
}


/*版頭LOGO*/
.Area_top { height: 1300px; }
.Area_top .momologo { z-index:2; position: absolute;top: 15px; left:40px;}
.Area_top .momologo a { display:block; width:200px; height:30px; background: url(momo_logo.png?t=1752213479339) no-repeat;}
.Area_top .momologo a:hover{ background: url(momo_logo_on.png?t=1752213479339) no-repeat;}
	@media screen and (max-width:767px){
		.Area_top { height: auto;}
		.Area_top .momologo { display:none;}
	}
         
/*版頭*/
.Area_top .top{height: 900px;}
	@media screen and (max-width:767px){
		.Area_top .top { height: auto;}
	}
	
/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}

/*黏人快速鍵(白色款)*/
.fixed_Area {z-index:999; position:fixed; top:20px; right:0px; width:100px; font-weight:800; font-size:16px; line-height:48px; font-family:Century Gothic, "微軟正黑體",Helvetica; text-align:center;
	-webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); -webkit-transform-origin:top right; transform-origin:top right;
	  -webkit-transition: all 0.2s ease;
		 -moz-transition: all 0.2s ease;
		  -ms-transition: all 0.2s ease;
		   -o-transition: all 0.2s ease;
			  transition: all 0.2s ease;}
.fixed_Area a { display:block; text-decoration: none; color: #000;}
.fixed_Area img {-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.fixed_Area .box ul { margin:0; padding:0; list-style:none;}
.fixed_Area .box li { margin:0 0 1px 0; padding:0; height:48px; background-color:rgba(255,255,255,0.6);}
.fixed_Area .box li a { letter-spacing:-1px;height:48px; overflow:hidden;}
.fixed_Area .box li a:hover { background-color:rgba(255,255,255,1);}
.fixed_Area .box li.cate-hover { background-color:rgba(255,255,255,1);}
.fixed_Area .box h2 { margin:0; padding:0;}

/*快速導覽*/
.fixed_Area h3 { position: absolute; top:100px; right:-50px; margin:0; padding:35px 0 0 0; border-radius:10px; width:48px; height:82px; font-size: 16px; line-height:30px; writing-mode: tb-lr; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; background-color:rgba(255,255,255,0.6); text-align:left; cursor:pointer;
	-webkit-transform-origin:top left; transform-origin:top left;
	  -webkit-transition: all 0.2s ease;
		 -moz-transition: all 0.2s ease;
		  -ms-transition: all 0.2s ease;
		   -o-transition: all 0.2s ease;
			  transition: all 0.2s ease;}
.fixed_Area h3 i { position: absolute; top:0; right:0; display:block; width:50px; height:50px; cursor:pointer;}
.fixed_Area h3 i:before { content: ""; position:absolute; top:41%; left:37%; display:block; border:1px solid #000; border-width:0 1px 1px 0; width:15%; height:15%; -webkit-transform:translate(-50%,-50%) rotate(135deg); transform:translate(-50%,-50%) rotate(135deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}

/*黑色款*/
.fixed_Area.fixed_Area-dark a { color: #003DA6;}
.fixed_Area.fixed_Area-dark li:first-child a { color: #fff;}
.fixed_Area.fixed_Area-dark .box li { background-color:#fff;}
.fixed_Area.fixed_Area-dark .box li a:hover { background-color:#1646e6; color: #fff;}
.fixed_Area.fixed_Area-dark .box li.cate-hover { background-color:#0026A6;}
.fixed_Area.fixed_Area-dark h3 {background-color:rgba(0,0,0,0.5);color: #fff; }
.fixed_Area.fixed_Area-dark h3  i:before { border-color:#fff;}

/*收合黏人精*/
.fixed_Area.fixed_Area_hide { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); }
.fixed_Area.fixed_Area_hide h3 { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); 
									-webkit-transition-delay:0.2s; transition-delay:0.2s;}