@charset "utf-8";
/* CSS Document 201706@A.PAO designSTUDIO

A.PAO designSTUDIO
http://www.apao.idv.tw
http://blog.apao.idv.tw

歡迎加入讀書會
*/
html{
  
}
body{
	background:rgba(141,176,201,0.50);
	margin:0; 
	padding:0; 
	color:rgba(97,53,42,1.0); 
	font-size:100%;
	font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    vertical-align: top;
}

a{
	text-decoration:none;
}

li{
	list-style: none;
}

/*文字の揃え*/
.bTxtLeft{ text-align:left;}
.bTxtRight{ text-align:right;}
.bTxtCenter{text-align:center;}

/*Text Box size*/
.bTxtW30{ width:30px;}
.bTxtW40{ width:40px;}
.bTxtW50{ width:50px;}
.bTxtW60{ width:60px;}
.bTxtW70{ width:70px;}
.bTxtW80{ width:80px;}
.bTxtW100{ width:100px; }
.bTxtW120{ width:120px; }
.bTxtW150{ width:150px; }
.bTxtW160{ width:160px; }
.bTxtW160H26{ width:160px; height: 16px; font-size: 12px; }
.bTxtW200{ width:200px; }
.bTxtW220{ width:220px; }
.bTxtW250{ width:250px; }
.bTxtW260{ width:260px; }
.bTxtW300{ width:300px; }
.bTxtW330{ width:330px; }
.bTxtW340{ width:340px; }
.bTxtW350{ width:350px; }
.bTxtW360{ width:360px; }
.bTxtW400{ width:400px; }
.bTxtW400H100{ width:400px; height:100px;}
.bTxtW400H200{ width:400px; height:200px;}
.bTxtW450{ width:450px; }
.bTxtW500{ width:500px; }
.bTxtW500H100{ width:500px; height:100px;}
.bTxtW550{ width:550px; }
.bTxtW600{ width:600px; }
.bTxtW600H100{ width:600px; height:100px;}
.bTxtW700{ width:700px;}
.bTxtW700H50{ width:700px; height:50px;}
.bTxtW700H100{ width:700px; height:100px;}
.bTxtW700H200{ width:700px; height:200px;}
.bTxtW700H300{ width:700px; height:300px;}
.bTxtW720H100{ width:720px; height:100px;}
.bTxtW740H100{ width:740px; height:100px;}
.bTxtWfullH50{ width:calc(100% - 7px); height:50px;}
.bTxtWfullH100{ width:calc(100% - 7px); height:100px;}
.bTxtWfullH300{ width:calc(100% - 7px); height:300px;}
.bTxtWfullH350{ width:calc(100% - 7px); height:350px;}
/*for jQurey*/
.bTxtWord14{
	
}
.bTxtWord26{
	
}
.bTxtWord26 a{
	text-decoration: none;
}
.bTxtWord32{
	
}
.bTxtWord48{
	
}

.bTxtRadius{ padding:2px 6px 2px 6px; border:rgba(255,255,255,1.00) solid 1px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;}
.bTxtRadius6{
	padding:6px; border:rgba(255,255,255,1.00) solid 1px; 
	border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;
}
.bTxtRadius13{
	padding:6px; 
	border:rgba(255,255,255,0.80) solid 1px; 
	border-radius:13px; 
	-moz-border-radius:13px; 
	-webkit-border-radius:13px;
}
.bTxtShadow{ 
	box-shadow:rgba(0,0,0,0.30) 0 3px 7px;
}

/*文字顏色*/

a.bTxtBgRed{
	background: rgba(255,0,0,0.10);
	color:rgba(255,255,255,1.00);
}

a.bTxtBgGreen{
	background: rgba(0,255,0,0.10);
	color:rgba(100,255,100,1.00);
}

a.bTxtBgBlue{
	background: rgba(0,0,255,0.10);
	color:rgba(0,0,180,1.00);
}
/*button color-------------------*/
.bBuRed{
	background: rgba(0,0,0,0.30);
	color: rgba(255,255,255,1.00);
}

.bBuCyan{
	
}

.bBuGray{
	
}

/*pages number TypeA, B*/
#bPaging{
	clear:both;
	width:calc(100% - 20px);
	height: 40px;
	margin: 40px auto 20px auto; 
	padding: 0; 
	border-bottom: rgba(0,0,0,0.00) dotted 1px;
	text-align:center; 
	position:relative;
	font-size: 12px;
}
#bPaging input[type="text"]{ width:26px; text-align:center;}
#bPaging .bLeft{
	display:none;
	position:absolute; left:5px; top:5px;}
#bPaging .bLeftMobile{ 
	display:none;}
#bPaging .bCenter{
	display:none;
	position:absolute; top:9px; left:50%; margin:0 0 0 -20px;}
#bPaging .bRight{
	text-align: center;
	}
#bPaging span img{ width:44px; height:44px; border:none; margin:0 9px 0 0; padding:0;
opacity:0.6; filter:alpha(opacity=60);
}
#bPaging span img.bArrow_no{opacity:0.3; filter:alpha(opacity=30); /* 针对 IE8 以及更早的版本 */}
#bPaging a{
	padding: 0;
}

/*pages number TypeC*/
#bPaging .bCenter img{border:none; margin:0 15px 0 0; padding:0;}


/*システム警告*/
.bSysErro{
	margin: auto;
	padding: 6px;
	border:rgba(232,255,0,0.80) dashed 1px;
	text-align:center;
}
.bMes{
	letter-spacing:1px;
	margin:0 15px 0 0;
	padding:2px 9px 3px 22px;
	color:rgba(255,255,255,1.00);
	border-radius:13px; -moz-border-radius:13px; -webkit-border-radius:13px;
}
.bRedMes{
	background:rgba(225,81,18,1.00) url(../i/SysMesBg_red.gif) no-repeat 2px 1px;
}
.bYellowMes{
	background:rgba(196,148,0,1.00) url(../i/SysMesBg_yellow.gif) no-repeat;
}
.bGreenMes{
	background:rgba(12,147,69,1.00) url(../i/SysMesBg_green.gif) no-repeat;
}
.BlueMes{
	background:rgba(89,98,209,1.00) url(../i/SysMesBg_blue.gif) no-repeat;
}
.bMagentaMes{
	background:rgba(237,58,146,1.00) url(../i/SysMesBg_magenta.gif) no-repeat;
}
.bGrayMes{
	background:rgba(137,137,137,1.00) url(../i/SysMesBg_gray.gif) no-repeat;
}

/*系統警告 new*/
.SysMes{
	display:inline-block;
	margin: 0 0 3px 0;
	padding: 3px 9px 3px 28px;
	border-radius: 13px;
	font-size: 85%;
}
.SysMes_bYellow{
	background: rgba(150,150,30,1.00) url(../i/icon_error-20bk.png) no-repeat 3px center;
	color:rgba(255,255,255,1.00);
}
.SysMes_bRed{
	background: rgba(230,50,50,1.00) url(../i/icon_error-20bk.png) no-repeat 3px center;
	color:rgba(255,255,255,1.00);
}
.SysMes_bBlue{
	background: rgba(100,100,200,1.00) url(../i/icon_error-20bk.png) no-repeat 3px center;
	color:rgba(255,255,255,1.00);
}
.bNoUnderline{
	text-decoration: none;
}
/*サイトの広さ*/
.bWrapper{
	background:rgba(231,222,238,0.60) url("../i/bBGHand.png") no-repeat 0 1300px;
	background-size: 100%;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 10px 0 0px 0;
	border: 0;
	box-shadow: rgba(0,0,0,0.20) 0px 10px 10px;
}
/*公司名稱 上*/
  .bComInfoTop{
      background:url("/i/bComlogoTop.png") no-repeat center;
	  background-size: 60%;
      width: auto;
      height: 85px;
      margin: 0px 0 0 20px;
  }
/*逝者資訊*/
  .bPeoplInfo{
      width: 100%;
      margin: 40px auto 0 auto;
      padding: 0;
	  text-align: center;

  }
/*逝者照片*/
  .bPeoplePhoto{
	width: 100%;
    margin: 40px auto 30px auto;
    padding: 0;
  }
.bPeoplePhoto img{
	max-width: 63%;
	border: solid 1px rgba(255,247,235,1.00);
    border-radius: 23px;
    box-shadow: 0px 10px 15px rgba(0,0,0,0.40);
    vertical-align: top;
}


/*儀式資訊*/
.bPeopleRite{
  width: 100%;
  margin: 0 0 80px 0px;
	box-sizing: border-box;
}
.bPeopleRite h1{
	height: 40px;
	font-size: 10vw;
	letter-spacing: 5px;
}
.bPeopleRite h3{
	height: 10px;
	font-size: 140%;
	letter-spacing: 3px;
}
.bPeopleRite p{
	font-size:  120%;
	letter-spacing: 3px;
}
.bPeopleRite p.bYearRange{
	font-size:  120%;
	height: 50px;
}

table{
	width:95%;
	margin: 3% 0 0 1%;
	padding: 4px;
	border:rgba(0,0,0,0.00) solid 0px;
	border-collapse: collapse;
	font-size: 112%;
	font-weight: 600;
	line-height: 200%;
	letter-spacing: 3px;
	text-align:left;
}
table .bWordx3{
	letter-spacing: 4px;
}
table th{
	width: 120px;
	text-align: center;
}
table td{
	position: relative;
}
table a{
	color:rgba(97,53,42,1.0);
}
/*icon google map*/
table .bGoGoogleMap{
	position: absolute;
	background: url("../i/bIconGoogleMap.png") no-repeat;
	width: 21px;
	height: 25px;
	margin: 6px 0 0 7px;
}
/*icon telephone*/
table .bIconTel{
	position: absolute;
	background: url("../i/bIconTel.png") no-repeat;
	width: 25px;
	height: 25px;
	margin: 6px 0 0 7px;
	text-decoration: none;
}
.bClearBoth{
	clear: both;
}

.bObituaryOnline{
	width: 90%;
	margin: 0 auto 100px auto;
	padding: 0;
	text-align: center;
	letter-spacing: 3px;
	font-size: 170%;
    font-weight: 600;
}
.bObituaryTitle{
	width: 90%;
	margin: -30px auto 45px auto;
	border-bottom: 1px solid rgba(0,0,0,1.00);
	font-size: 100%;
	line-height: 200%;
	letter-spacing: 13px;
}
.bObituaryNote{
	line-height: 250%;
}

/*內容圖檔*/
.bObituaryNoteInfo{
	width: 90%;
	margin: 0 auto 100px auto;
}

.bObituaryNoteInfoPhoto{
	max-width: 100%;
}
.bObituaryNoteInfoPhoto p img{
	max-width: 100%;	
	border: solid 1px rgba(255,255,255,1.00);
}

/*訃聞下載*/
.bObituaryNote{
	width: 100%;
	margin: 0 10% 100px auto;
	font-size: 75%;
	font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style:normal;
	box-sizing: border-box;
}
.bObituaryPaperVer{
	width: auto;
	margin: 0 0 0 0;
}
.bObituaryPaperTitle{
	width: auto;
	margin: 0 20% 50px 20%;
	padding: 6px 10px 10px 10px;
	border: solid 1px rgba(0,0,0,0.50);
	border-radius: 19px;
	font-size: 100%;
	letter-spacing: 3px;
}
.bObituaryPaper{
	max-width: 100%;
}

.bObituaryPaper p img{
	max-width: 100%;	
	border: solid 1px rgba(255,255,255,1.00);
}

/*Lightbox*/
    .thumbnail {
      cursor: pointer;
      border: 2px solid #ccc;
      transition: transform 0.2s;
    }

    .thumbnail:hover {
      transform: scale(1.05);
      border-color: #888;
    }

    /* Lightbox 背景遮罩 */
    .lightbox {
      display: none;
      position: fixed;
      z-index: 9;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
    }

    .lightbox img {
      max-width: 100%;
      max-height: 100%;
    }

    .lightbox:target {
      display: flex;
    }

    .close {
      position: absolute;
      top: 20px;
      right: 30px;
      font-size: 30px;
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    .close:hover {
      color: #f88;
    }

.bGiftBasket{
	margin: 0 auto;
	font-size: 100%;
}
.bGiftBasketTitle{
	background:rgba(94,65,118,0.70);
	width: 60%;
	margin: 0 auto 90px auto;
	padding: 0 0 2px 10px;
	border-radius: 19px;
	font-size: 150%;
	font-weight: 600;
	line-height: 200%;
	letter-spacing: 5px;
	color: rgba(255,255,255,1.00);
	text-align: center;
}
.bGiftBasketContent{
	width: 100%;
	margin: 0 0 0 0px;
	background: url("../i/bBgFlower.png") no-repeat right;
}
.bGiftBasketContentLeft{
	vertical-align: top;
	width: 100%;
	margin: 0 0 30px 0px;
	text-align: center;
}
.bGiftFlowwer{
	display: inline-block;
	width: 40%;
	margin: 0 auto 0 auto;
	box-sizing: border-box;
	vertical-align: top;
	text-align: center;
}
.bGiftFlowwer:first-child{
	margin: 0 6% 39px 0;
}
.bGiftFlowwer:nth-child(3){
	margin: 0 5% 39px 0;
}
.bGiftFlowwer:nth-child(5){
	margin: 0 6% 39px 0;
}
.bGiftFlowwer:nth-child(7){
	margin: 0 6% 39px 0;
}
.bGiftFlowwer:nth-child(9){
	margin: 0 6% 39px 0;
}
.bGiftFlowwerPhoto{
	width: 100%;
	margin: 0 0 13px 0;
	box-sizing: border-box;
}
.bGiftFlowwerPhoto img{
	width: 100%;
	border-radius: 16px;
	border: solid 1px rgba(255,255,255,1.00);
}
.bGiftFlowwerPriec{
	width: 100%;
	padding: 13px 0;
	background: rgba(255,255,255,0.33);
	border-radius: 16px;
	font-size: 90%;
	text-align: center;
	font-weight: 600;
}

.bGiftBasketContentRight{
	position: relative;
	vertical-align: top;
	width: 100%;
	margin: 0 0 40px 0;
	padding: 100px 0 0 0;
	background: url("../i/bComlogoCenter.png") no-repeat;
	background-position: top;
	font-size: 120%;
	font-weight: 800;
	line-height: 300%;
	letter-spacing: 3px;
}
.bGiftBasketContentRight h4{
	margin: 0;
	font-size: 130%;
}
.bGiftBasketContentRight img{
	margin: 20px 0 0 0;
}
.bGiftBasketContentRight a{

	color:rgba(67,53,42,1.0); 
}

.bLineContect{
	display: inline-block;
}


footer{
	margin:0 0 0 0;
	padding: 0px 0 26px 0;
	font-size: 120%;
	text-align: center;
	font-weight: 600;
	letter-spacing: 3px;
	text-align: center;
}
footer a{
	color:rgba(97,53,42,1.0); 
}
footer span{
	display: inline-block;
}
/*icon google map*/
footer .bGoGoogleMap{
	position: absolute;
	background: url("../i/bIconGoogleMap.png") no-repeat;
	width: 21px;
	height: 25px;
	margin: 6px 0 0 7px;
}