@charset "utf-8";
/* CSS Document */


/*基本*/
body{ margin:0; padding:0; background-color: #523e50;  }
a { text-decoration:none;}


/*共用--for平台開關*/
.for_pc    {}
.for_phone { display: none !important;}
    @media screen and (max-width:767px){
      .for_pc    { display: none !important;}
      .for_phone { display: inherit !important;}
    }
    /*@media screen and (max-width:767px){*/
      .page_phone .for_pc { display:none !important;}
      .page_phone .for_phone { display: inherit !important;}
    /*}*/


/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%; min-width:1220px; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; overflow:hidden; }
.WRAPPER img { border:0px; vertical-align:top }
.WRAPPER a { text-decoration:none }
		@media screen and (max-width:767px){
		.WRAPPER {   min-width: inherit }
		.WRAPPER img {  width:100%;  height:auto;}
	}

	

/*背景*/
.bg_top { z-index:-5; position: absolute; top:0; left:0; width:100%; height:100%; min-width:1220px; background: url(bg_top.png?t=1751271723987) no-repeat center top; }
.bg_bottom { z-index:-1; position: absolute; bottom:0; left:0; width:100%; height:100%; background: url(bg_bottom.png?t=1751271723987) bottom no-repeat; }
@media screen and (max-width:767px){
	.bg_top {z-index: -5; min-width:inherit; background: url(m_bg.png?t=1751271723987) no-repeat center 44px; background-size: 100%; display: block }
	.bg_bottom { z-index:-1;  bottom:0; left:0; background: url(m_bg_bottom.png?t=1751271723987) bottom no-repeat; background-size: 100%;}
}




/*共用--區塊_all*/
.Area { z-index:1; 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.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 .go_bt:hover { -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; }
  @media screen and (min-width:768px){
    .Area .go_bt:hover { -webkit-transform:translateY(-6px); -moz-transform:translateY(-6px); -ms-transform:translateY(-6px); -o-transform:translateY(-6px); transform:translateY(-6px);}
  }
  /*寬度,間距*/
  .Area1220 { margin:0 auto; width:100%;}
  .Area960 { margin:0 auto; width:100%;}
  .Areabottom { margin-bottom:24px;}
    @media screen and (min-width:768px){
      .Area1220 { width:1220px;}
      .Area960 { width:960px;}
      .Areabottom { margin-bottom:75px;}
    }
    @media screen and (max-width:767px){
      .m_Area95p { width: 95%;}
    }

    /*@media screen and (max-width:767px){*/
      .page_phone .Area1220 { width:100%;}
      .page_phone .Area960 { width:100%;}
      .page_phone .Areabottom { margin-bottom:24px;}
    /*}*/

/*共用--區塊_切割*/
.Area_grid { margin: 0 auto; padding:0; list-style: none;}
.Area_grid:after  { content: ""; display:block; clear:both;}
.Area_grid .grid-slide { float:left; display:block; padding:0; list-style: none;}
  /*共用--區塊_切割PC*/
  @media screen and (min-width:768px){
    .Area_grid_1bn_PC .grid-slide { margin:0 0 2% 0; width:100%;}
    .Area_grid_2bn_PC .grid-slide { margin:0 1% 2%; width:48%;}
    .Area_grid_3bn_PC .grid-slide { margin:0 1% 2% ; width:31.3%;}
    .Area_grid_4bn_PC .grid-slide { margin:0 0.5% 2% ; width:24%;}
    .Area_grid_1bn_nopadding_PC .grid-slide { width:100%;}
    .Area_grid_2bn_nopadding_PC .grid-slide { width:50%;}
    .Area_grid_3bn_nopadding_PC .grid-slide { width:33.3%;}
    .Area_grid_4bn_nopadding_PC .grid-slide { width:25%;}
    .Area_grid_5bn_nopadding_PC .grid-slide { width:20%;}
    .Area_grid_6bn_nopadding_PC .grid-slide { width:16.6%;}
  }
  /*共用--區塊_切割Phone*/
  @media screen and (max-width:767px){
    .Area_grid_1bn_Phone .grid-slide { margin:0 0 2% 0; width:100%;}
    .Area_grid_2bn_Phone .grid-slide { margin:0 1% 2%; width:48%;}
    .Area_grid_3bn_Phone .grid-slide { margin:0 1% 2% ; width:31.3%;}
    .Area_grid_4bn_Phone .grid-slide { margin:0 0.5% 2% ; width:24%;}
    .Area_grid_1bn_nopadding_Phone .grid-slide { width:100%;}
    .Area_grid_2bn_nopadding_Phone .grid-slide { width:50%; }
    .Area_grid_3bn_nopadding_Phone .grid-slide { width:33.3%;}
    .Area_grid_4bn_nopadding_Phone .grid-slide { width:25%;}
    .Area_grid_5bn_nopadding_Phone .grid-slide { width:20%;}
    .Area_grid_6bn_nopadding_Phone .grid-slide { width:16.6%;}
  }




/*title*/
 h2.title { margin:0;}
 h2.title { font-size: 48px; color: #000; font-weight: 200;  font-family: "Century Gothic","微軟正黑體","Microsoft JhengHei",Helvetica; text-align: left;}
 h2.title b {  font-weight: bold; }
 h2.title span {  position:relative; top:10px; display: inline-block; width:36px; height:auto;}
    @media screen and (max-width:767px){
		 h2.title { margin-left: 4vw; }
		 h2.title { font-size: 5.5vw;  }
		 h2.title span {   top:1.2vw;  width:3.5vw; margin-right: 1vw; }
		}


/*版頭*/
.Area_top { z-index:99; }
.Area_top .box {  height: 488px;}
.Area_top .box .main { position: absolute; top: 72px; left: -418px;}
.Area_top .deco1 {position: relative; top: 442px; left: -610px;}
	@media screen and (max-width:767px){
	.Area_top .box {  height: 49vw;}
  .Area_top .deco1 {position: relative; top:-17vw; left: 77vw; width: 21%;}
	}



/*01登記*/
.Area01 { margin:0 auto; }
.Area01 .box { overflow: hidden; }
.Area01 .box ul { list-style: none;width: 100%; margin-left: -34px;} 
.Area01 .box ul:after { content: ""; display: block; clear: both;}
.Area01 .box ul li { float: left; z-index: 0; margin-left:19px; padding: 0; box-sizing: border-box; display:inline-block;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;}

.Area01 .box ul li:nth-child(1) { width: 99%;  margin: 0 0 0 0; }
.Area01 .box ul li:nth-child(2)  { width:49.5%;  margin: 0 auto; }
.Area01 .box ul li:nth-child(3)  { width:49.5%;  margin: 0 auto; }

.Area01 .box ul li img {  width: 100%; }

@media screen and (max-width:767px){
	  .Area01 .Area_danji{ width: 97%!important; margin: 0 auto 2vw!important;}

	  .Area01 .box ul {  padding:0 8.5%;  }
	  .Area01 .box ul li:nth-child(1) { width: 97%;  margin: 0vw 0vw 0vw 1vw; }
	  .Area01 .box ul li:nth-child(1) a { width: 0%;  margin: 0 auto; }
	  .Area01 .box ul li:nth-child(2) { width: 47.5%; margin: 0 0 0 1vw;  }
    .Area01 .box ul li:nth-child(3) { width: 47.5%; margin: 0 0 0 2vw;  }
        }



/*05常見理賠事故*/
.Area05{ height: 4038px; margin-top: 3px;}
.Area05 .super {position: relative; top: 50px; margin-bottom: 95px;}
.Area05 .swiper-wrapper {}
.Area05 .Area05btn { position: relative; top: 1188px; left: 246px;}

.Area05 .swiper-pagination-bullet-active {background-color:#FFF}
.Area05 .swiper-pagination-bullet {background: #000000}
@media screen and (max-width:767px){
	.Area05{ height:421vw; }
	.Area05 .super {position: relative; top: 0; margin: 5vw 0;}
	.Area05 .swiper-wrapper {left: 0%;}
	.Area05 .Area05-6{position: relative; top: 3vw; left: 1.25vw;}
  .Area05 .Area05btn{position: relative; top: 122.5vw; left: 70.25vw;width: 10%;}
        }


/*03推薦商品*/
.Area03 { height: 1680px; }
.Area03 .Area03btn { position: relative; left: 236px; top: 96px; }
.Area03 .Area03btn2 { position: relative; left: 236px; top: 349px; }
.Area03 .Area03pd { position: relative; top: 140px; }
.Area03 .Area03pd2 { position: relative; top: 422px; }
.Area03 .Area03pd a { display: inline-grid!important; }
.Area03 .Area03pd2 a { display: inline-grid!important; }
.Area03 .bg { z-index: -5; position: relative; top: -986px; left:0; }
	@media screen and (max-width:767px){
    .Area03 { height: 423vw; }
    .Area03 .Area03_1 { margin: 4vw 0; }
    .Area03 .Area03_2 { margin: 0vw 0 14vw 0; }

    .Area03 .Area03btn-1 { position: relative; top: -7vw; left: 0vw; }
    .Area03 .Area03btn-2 { position: relative; top: -17vw; left: 0vw; }

    .Area03 .Area03btn2{ position: relative; }
    .Area03 .Area03pd { position: relative; top: -4vw; box-sizing: border-box;}
    .Area03 .mb03-03{ left: 0vw ;}
    .Area03 .Area03pd2 { position: relative; top: -13vw; box-sizing: border-box;}

    .Area03 .Area03pd a { display: inline-grid!important; box-sizing: border-box; width: 45%; margin: 1vw; }
    .Area03 .Area03pd2 a { display: inline-grid!important; box-sizing: border-box;  width: 45%; margin: 1vw; }
    
    .Area03 .deco3 { position: relative; top: -281vw; left: 49vw; width: 52%; z-index: -5; }
    .Area03 .deco4 { position: relative; top: -162vw; left: 49vw; width: 52%; z-index: -5; }
}


/*04車險知識*/
.Area04{height: 2930px;}
.Area04 .Area04btn { position: relative; top: 879px; left: 246px;}
.box_pic { padding: 20px 145px;}
@media screen and (max-width:767px){
  .Area04{height: 294vw;}
  .Area04 .Area04btn { position: absolute; top:82.5vw; width: 26%;left:62vw;}
  .box_pic { padding: 0;}
}


/*08申請理賠*/
.Area08 { height: 1982px; }
.Area08 .deco2 {position: relative; top: -700px; right: -700px;}
@media screen and (max-width:767px){
  .Area08 { height: 206vw; }
}

/*09常見問題*/
.Area09  { padding: 5% 0; }
.Area09 .tabcontent .Content{ width: 960px; margin: 0 auto;}
.Area09 .tabcontent .Content h4 {font-size: 30px; margin: 25px 0 15px;}
.Area09 .tabcontent .Content .listTitle{color: #333;}
.Area09 .Area09QA { position: relative; top: 40px;}
@media screen and (max-width:767px){
	.Area09  .tabcontent .Content{width: 100%; margin: 0;}
	}



/*09常見問題-條列CSS*/
.moreButton { width:100%; margin:0 auto; letter-spacing: 0.02em; }
.moreButton .title {font:30px/1.2em '微軟正黑體'; text-align:left; margin-bottom:10px; display:inline-block ;}
.moreButton dl {}
.moreButton dt {cursor:pointer; }
.moreButton dd {display: none; margin:0; padding:30px; font:18px/1.8em '微軟正黑體', 'Century Gothic'; text-align:left; background-color:#ffffff; opacity: 80%;color: #000000 }
.moreButton .menu_btn { position: relative;display: block; font:bold 22px/30px 微軟正黑體; color: #000000; text-align: left; padding: 20px 100px 20px 30px; font-weight: bold}
.moreButton .up::after{content: "-";position: absolute; top: 17px; right:80px; width: 0; height: 0; font:bold 40px/30px 微軟正黑體;}
.moreButton .down::after {content: "+";position: absolute; top: 17px; right:80px; width: 0; height: 0; font:bold 30px/30px 微軟正黑體;}
.moreButton .up img{ width:100%; height:auto }
.moreButton .down img{ width:100%; height:auto}
.moreButtontag { display:none!important;}
	@media screen and (max-width:767px){
	.moreButton .title { font: 4vw/1.8em '微軟正黑體','Century Gothic'; }
    .moreButton dd { font: 4vw/1.8em '微軟正黑體','Century Gothic'; padding: 4vw;  }
	.moreButton .menu_btn { height: auto; font: 4vw/1.8em '微軟正黑體','Century Gothic'; padding: 3vw 12vw 3vw 4vw; font-weight: bold }
	.moreButton .up::after,
	.moreButton .down::after { top: 13%; right:10%; }
	}


/*09注意事項*/
.Area_bgfooter { margin-top: 100px; text-align: left; color: #ffffff; z-index: 9;}
.Area_bgfooter .box { margin:0 auto; padding: 60px 40px 0; box-sizing:border-box;}
.Area_bgfooter p { margin: 0; font-weight:800; font-size: 32px; line-height: 1;}
.Area_bgfooter ul,
.Area_bgfooter ol { margin-top: 1.2rem; }
.Area_bgfooter ul ol,
.Area_bgfooter ul ul { margin-top: 0.5rem; }
.Area_bgfooter li { margin-bottom: 1.2rem; font-size: 18px; line-height: 1.8rem; text-align:justify;}
.Area_bgfooter li p { margin-top: 1.2rem; font-size:24px;}
.Area_bgfooter li a { display: inline; color: #e9db00; text-decoration: underline;}
  @media screen and (max-width:767px){
    .Area_bgfooter { margin-top: 15vw; margin-left: 2vw;}
    .Area_bgfooter .box { width: 100%; padding: 6% 6% 5% 5%;}
    .Area_bgfooter p { font-size: 4.7vw;}
    .Area_bgfooter ul,
    .Area_bgfooter ol { margin-top: 1rem; margin-right: 2em;}   
    .Area_bgfooter ul ol,
    .Area_bgfooter ul ul { margin-top: 0; margin-left: -1em;}
    .Area_bgfooter li { margin-bottom: 1rem; font-size: 3.8vw; line-height: 1.5em;}
    .Area_bgfooter li p { margin-top: 1rem; font-size: 3.8vw;}
  }


/*10置底試算*/
  .Area_10{
	width: 1220px;
    height: 70px;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 0 0 0;
}

.Area_10 ul{
	display: flex;
    flex-wrap: wrap;
    width: 1220px;
    align-items: flex-end;
    flex-direction: row;
    position: absolute;
    top: -54px;
    left: 0px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    justify-content: center;
}

.fixbn {
    position: fixed;
    background-size: 100%;
    bottom: 0;
    display: block;
    z-index: 10;
}
.fixbn .class_01 {top: 0%;  left: 0%;}
.fixbn .class_00 {position: absolute; width: 100%; height: 100%;}
.fixbn .class_00 a {
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:767px){
	.Area_btn_fixed { position: fixed; width:100%; margin:0 auto; padding:0; background-size:100%; z-index: 9999; bottom: 0; /*box-shadow: 0 -4px 6px rgba(0,0,0,0.2); */}
    .Area_btn_fixed {
      height: 14vw;
      height: calc(14vw + constant(safe-area-inset-bottom) *0.6);/* 兼容 iOS < 11.2 */
      height: calc(14vw + env(safe-area-inset-bottom) *0.6);/* 兼容 iOS >= 11.2 */ 
      background: #000;
    }
	.Area_btn_fixed ul { width:100%; margin:0 auto; padding:0; display:inline-block;}
	.Area_btn_fixed ul li a { position:relative; font-size:4.5vw; width:100%;}
	.Area_btn_fixed ul li a img {  transition-duration: 0.2s;}
	.Area_btn_fixed ul li { margin:0 auto; width:100%; height:auto; list-style: none}
	.Area_btn_fixed ul li:hover { 
		animation: ease-in-out;
		-webkit-transform: none;filter:brightness(100%);
		-moz-transform: none;filter:brightness(100%);
		-ms-transform: none;filter:brightness(100%);
		-o-transform: none;filter:brightness(100%);
		transform: none;filter:brightness(100%);
	}

	/*純文字版
	.Area_btn_fixed ul li a { font-size:4.5vw; width:100%;}
	*/
}



/*遠進(大變小震一下)*/
.zoomIn4-play { opacity: 0; -webkit-transform: scale3d(4.3, 4.3, 4.3); transform: scale3d(4.3, 4.3, 4.3);
			-webkit-animation-name: zoomIn4-play;  
					animation-name: zoomIn4-play;  
			-webkit-animation-duration: 1s;  
					animation-duration: 1s;
			-webkit-animation-fill-mode:forwards;
					animation-fill-mode:forwards;
				}
	@keyframes zoomIn4-play {
		from {
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		50%,100% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		  opacity: 1;
		  -webkit-transform: scale3d(1, 1, 1);
		  transform: scale3d(1, 1, 1);
		}
		77%,
		90%,
		to {
		  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		  -webkit-transform: scale3d(1, 1, 1);
		  transform: scale3d(1, 1, 1);
		}
	  
		70%,
		72% {
		  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		  -webkit-transform: scale3d(1.1, 1.1, 1.1);
		  transform: scale3d(1.1, 1.1, 1.1);
		}
	  
		95% {
		  -webkit-transform: scale3d(1.02, 1.02, 1.02);
		  transform: scale3d(1.02, 1.02, 1.02);
		}
	}

/*彈窗通知數字大小*/
.swal2-content span { font-size: 1.3em;}


/*浮層嘿嘿*/
.blackBox_play {}
.blackBox { display:none; z-index:999; position:absolute; top:0; left:0px; width:100%; height:100%; background-color: rgba(34,34,34,0.75); }
.blackBox * { font-family:"微軟正黑體"; box-sizing:border-box;}
.blackBox  a { text-decoration:none;}
/*浮層基本*/
.blackBox .box .button {  border-top:1px solid #d6d6d6; text-align:center; font-size:1.25rem; line-height:3.5rem; font-weight:bold;}
.blackBox .box .but-close { clear:both; width:100%;}
.blackBox .box .but-close a { display:inline-block;  width:100%; height:100%; color:#333;}
.blackBox .box h3 span.close { position:absolute; top:6px; right:5px; display:block; border:2px solid #333; border-radius:5px; width:63px; height:33px; font-size:1rem; line-height:2rem; text-align:center;}
.blackBox .box h3 span.close a { display:inline-block; width:100%; height:100%; color:#333;}
.blackBox .Boxclose { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;}
.blackBox .box h4 { /*height:1.2rem;*/ font-size: 1rem; font-weight:600; text-align: left; color: #000;}
	@media screen and (max-width:767px){
		.for_pc{ display:none !important;}
		.for_phone{ display:block !important;}
	}


/*浮層--加價購商品介紹*/
/*a.gallery { display: block}*/
.agreeArea .box_title { padding: 5% 5% 0; font-weight: 800; line-height: 1; text-align: center;}
.agreeArea .box_title b { position: relative; display: block;}
.agreeArea .box_title img { width: 30%}
.agreeArea .box_title span { z-index: 1; position: relative; display: inline-block; padding: 0 0.5em; background-color: #fff;}
.agreeArea .box_title b:before { content: ""; position: absolute; bottom: -0.55em; display: block; width: 100%; height: 1px; background-color: #000;}
.agreeArea .box_sub { text-align: center;}
.agreeArea .box_derails { padding: 0 5%; font-weight: 800;}
.agreeArea .box_derails dt { margin: 0; margin-top: 0.8em; padding: 0.5em 0; border-top: 1px solid #000; text-align: center;}
.agreeArea .box_derails dd { margin: 0; padding: 0; color: #9d9d9d; line-height: 1.2;}
.agreeArea .box_derails dd ul { margin: 0; padding: 0; padding-left: 2em;}
.agreeArea .box_derails .txt_into { color: #5a5958;}
.agreeArea .txtArea { padding-top: 5px;}
.agreeArea .txtArea img{ width: 100%; display: block; margin: 0 auto;}
.agreeArea .box_derails .txt_spec ul { padding-left: 1em; list-style: none;}
.agreeArea .box_derails .txt_note ul { list-style: decimal; }
        @media screen and (min-width:768px){
          .agreeArea .box_title { font-size: 40px; }
          .agreeArea .box_title span { font-size: 34px;}
		  .agreeArea .box_sub { font-size: 18px; line-height: 30px; margin: 42px 0 10px; padding: 0 5%}
          .agreeArea .box_derails { font-size: 30px;}
          .agreeArea .box_derails dd { font-size: 26px;}
        }
        @media screen and (max-width:767px){
          .agreeArea .box_title { font-size: 1.5rem; }
          .agreeArea .box_title span { font-size: 1.25rem;}
		  .agreeArea .box_sub { font-size: 1rem; line-height: 1.8rem; margin: 1rem 0 1rem; padding: 0 10% ;}
          .agreeArea .box_derails { font-size: 1.25rem;}
          .agreeArea .box_derails dd { font-size: 1.1rem;}
		  .agreeArea .txtArea { /*padding-top: 5vw;*/ padding-top: 0;}
        }