/* CSS Document */
/* iPad or desktop width start from 768 */
@media (min-width:768px) {}
/* mobile width start from 320px-767 */
@media (max-width:767px) {}

/* default */
body {
	font: 14px/1.8 黑體, 微軟正黑體, 宋體, Helvetica, Arial, sans-serif;
	-webkit-overflow-scrolling:touch;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	padding:0; margin:0;
}
div {
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	padding:0; margin:0;
}
span.fa+*,*+span.fa { margin-left:5px;}
a { text-decoration:none; cursor:pointer;}
@keyframes repaint { 0% { width: 99.999%} 100% { width: 100%}}

/* lrdiv */
/* lrdiv layout container
alt style
.vm - vertical middle
.vt - vertical top
.vb - vertical bottom
.resp - responsive
*/
.lrdiv>.c { overflow-x:hidden; overflow-y:hidden; }
.lrdiv>.r { float:right; }
.lrdiv>.l { float:left;}
/* lrdiv with responsive .resp */
@media (max-width:767px) { .lrdiv.resp>div { float:none;}}

/* divtb */
.divtb { display:table; width:100%;}
.divtb .tr { display:table-row; }
.divtb>.tr>.td { display:table-cell; }
@media (max-width:767px) {
	.divtb.resp>.tr>.td { display:block;} 
}


/* topbar */
.topbar {
	background-color:#5560a3; position:fixed; width:100%; top:0; left:0; z-index:500;
	padding:25px 15px;
}
.topbar .td { vertical-align:middle; }
.topbar .td:last-child { text-align:right;}
.topbar img { max-height:70px; margin-right:20px; vertical-align:middle;max-width:90%;}
.topbar .description {
	font: 14px/1.8 Helvetica, Arial, sans-serif;
	display:inline-block;
	font-size:150%; font-weight:bold; white-space:nowrap; color:#fff;
}
@media (max-width:767px) {
	.topbar { padding-bottom:5px;}
	.topbar img { max-height:40px;}
	.topbar .description { display:block; padding:5px; font-size:85%;}
    .splogo { max-height: 30px!important; }
}

/* menu */
@media (min-width:768px) {
	.menuBtn { display:none;}
	.menu>.menuList>a {
		padding:5px; margin-right:15px; font-size:130%;
		color:#fff; font-weight:bold; line-height:50px; white-space:nowrap;
	}
}
@media (max-width:767px) {
	.menu>.menuBtn {
		position:absolute; top:20px; right:15px;
		border:2px solid rgba(255,255,255,0.7); border-radius:10px;
		color:rgba(255,255,255,0.7); font-size:250%; padding:5px 7px; 
	}
	.menu>.menuBtn:hover { cursor:pointer; color:#fff; border-color:#fff; }
	.menu>.menuList { display:none;}
	.menu>.menuList>a { display:block; text-align:center; font-size:150%; color:#fff; padding:10px 0 10px 0;
		
	}
}
/* Jumbotron */
.jumbotron {
	position:absolute; top:50%; left:0; right:0; bottom:0; width:100%; text-align:center; height:100%;
	vertical-align:middle; font-size:8vh; margin-top:-10vh;
}


/* scene */
.scene { background-color:#ccc; position:relative; width:100%; min-height:100vh; overflow-x:hidden; overflow-y:hidden;}
/*.scene { position:absolute; height:100%; width:100%; margin:0; padding:0; overflow:hidden;}*/
.layer { position:absolute; margin:0; padding:0;}
.cloud { position:absolute; margin:0; padding:0; width:20%;}
.cloud>img { width:100%;}

/* index layer */
.layerCloud { overflow:visible;min-width:800px;width:100%;height:150px;margin-top:-40px; }
.indexLogo { z-index:406!important; width:230px; top:190px; left:50%; margin-left:-115px;}
.mainCloud { z-index:405; width:450px; top:150px; left:50%; margin-left:-225px;}
.layerFloor { bottom:0;left:0;height:80px;width:100%;background-color:#5560a3;z-index:270;}
@media (max-width:767px) {
	.layerCloud,.layerFloor { display:none; }
	.indexLogo { top:100px;}
	.mainCloud { top:10px; }
}

img.layer { bottom:30px; z-index:401;}
img.daughter.layer {  left:55%; max-height:57vh; z-index:406;}
img.sonwife.layer {  right:62%; max-height:57vh; z-index:405;}
img.son.layer {  right:55%; max-height:57vh; z-index:406;}
img.mother.layer {  z-index:290;  left:50%; margin-left:-17vh; height:46vh; }
img.gdaughter.layer {  left:65%; max-height:49vh; z-index:406;}
img.gson.layer {  left:72%; max-height:57vh; z-index:406;}
@media (max-width:767px) {
	img.daughter.layer { left:63%; max-height:42vh; bottom:130px;}
	img.sonwife.layer { right:70%; max-height:42vh; bottom:130px;}
	img.son.layer {  right:55%; max-height:45vh; bottom:90px;}
	img.mother.layer {  bottom:70px; }
	img.gdaughter.layer { left: 72%; max-height:30vh; bottom:90px;}
	img.gson.layer { left:59%; max-height:30vh; bottom:100px;}
}
@media (max-width:767px) and (max-height:640px) {
	img.daughter.layer { left:63%; max-height:42vh; bottom:50px;}
	img.sonwife.layer { right:70%; max-height:42vh; bottom:50px;}
	img.son.layer {  right:55%; max-height:45vh; bottom:10px;}
	img.mother.layer {  bottom:0px; }
	img.gdaughter.layer { left: 72%; max-height:30vh; bottom:10px;}
	img.gson.layer { left:59%; max-height:30vh; bottom:20px;}
}

/* after 3 seconds */
img.daughter_a3.layer {  right:65%; max-height:57vh; z-index:406;}
img.gdaughter_a3.layer {  right:59%; max-height:49vh; z-index:499;}
img.gson_a3.layer {  right:52%; max-height:57vh; bottom:110px;  z-index:498;}
img.mother_a3.layer { left:55%; margin-left:-17vh;   max-height:48vh; z-index:500; }
img.son_a3.layer {  left:56%; max-height:57vh; bottom:50px; z-index:498;}
img.sonwife_a3.layer {  left:69%; max-height:57vh; z-index:499;}
@media (max-width:1200px) {
    img.daughter_a3.layer { right:67%; max-height:45vh;}
    img.gdaughter_a3.layer { right:60%; max-height:27vh; }
    img.gson_a3.layer { max-height:27vh; }
    img.mother_a3.layer { left:61%;   max-height:40vh; }
    img.son_a3.layer {  left:58%; max-height:45vh; }
    img.sonwife_a3.layer {  left:74%; max-height:45vh; }
}
@media (max-width:767px) {
    img.daughter_a3.layer { right:75%; max-height:42vh; bottom:100px; }
    img.gdaughter_a3.layer { right:67%; max-height:25vh; bottom:100px;}
    img.gson_a3.layer { max-height:25vh; bottom:180px; }
	img.mother_a3.layer {  left:65%; bottom:100px; max-height:36vh; }
    img.son_a3.layer { left:57%; max-height:45vh; bottom:100px; }
    img.sonwife_a3.layer {  left:85%; max-height:40vh; bottom:100px; }
}
@media (max-width:500px) {
    img.daughter_a3.layer { right:73%; }
    img.gdaughter_a3.layer { right:68%;}
    img.son_a3.layer { left:54%;  }
	img.mother_a3.layer {  left:69%; }
}
@media (max-width:767px) and (max-height:640px) {
	img.daughter_a3.layer {bottom:10px;}
	img.gdaughter_a3.layer { bottom:10px;}
	img.gson_a3.layer { bottom:50px;}
	img.mother_a3.layer {  bottom:0px; }
	img.son_a3.layer {  bottom:0px;}
	img.sonwife_a3.layer {  bottom:0px;}
}

/* previous Btn */
.previousBtn {
	position:fixed; bottom:45px; display:block; z-index:501; right:20px;
	text-align:center; text-shadow:5px 5px 10px #333; cursor:pointer;
}
/*
.previousBtn span.fa { font-size:500%; color:rgba(255,255,255,0.8); }
.previousBtn:hover span.fa { font-size:600%; color:#fff;}
*/
@media (max-width:767px) {.previousBtn { animation:repaint 1s infinite; bottom:55px; text-align:right; }}

/* next Btn */
.nextBtn {
	position:fixed; bottom:20px; display:block; z-index:501; right:20px;
	text-align:center; text-shadow:5px 5px 10px #333; cursor:pointer;
	
}
@media (min-width:768px) {
	
.previousBtn,.nextBtn { width:35px; }
.previousBtn>img,.nextBtn>img { width:100%; }
}
/*
.nextBtn span.fa { font-size:500%; color:rgba(255,255,255,0.8); }
.nextBtn:hover span.fa { font-size:600%; color:#fff;}
*/
@media (max-width:767px) { .nextBtn { animation:repaint 1s infinite; text-align:right; }}

/* lrScene */
/*.lrScene,.lrScene>div { border:1px solid #f00;}*/
.lrScene { display:table; border-collapse:collapse; width:100%; padding:0; margin:0;margin-top:120px;}
.lrScene>div {
	display:table-cell; height:calc(100vh - 121px); padding:0;  vertical-align:middle; text-align:center;
	position:relative; color:#fff;
}
.lrScene.top>div {
	vertical-align:top;
}
.lrScene>div:first-child { width:40%;}
.lrScene>div:last-child { padding:20px 30px;}
@media (max-width:767px) {
	.lrScene { margin-bottom:100px; }
	.lrScene>div:first-child{ display:none;}
	.lrScene>div {font-size:11px;}
.lrScene>div:last-child { padding:20px 20px;}
}

.fgrey { color:#ccc; }
.fwhite { color:#fff;}
.fpurple { color:purple;}
.fc { text-align:center;}
.fl { text-align:left;}
.fr { text-align:right;}
.fj { text-align:justify;}
.f11 { font-size:110%;}
.f12 { font-size:120%;}
.f13 { font-size:130%;}
.f14 { font-size:140%;}
.f15 { font-size:150%;}
.f16 { font-size:160%;}
.f17 { font-size:170%;}
.f18 { font-size:180%;}
.f19 { font-size:190%;}
.f20 { font-size:200%;}
.f30 { font-size:300%;}
.f40 { font-size:400%;}

.list { width:320px; margin:20px auto;}
.circle { display:inline-block; width:90px; height:90px; border-radius:50%; background-color:#fff; margin: 0 10px 10px 0; color:#000; font-size:23px; padding-top:18px; line-height:1.2;}
@media (min-width:768px) { .respShow { display:none;} }

/* checkbox */
button.whitebox { font-size:100%; background-color:white; color:#333; border:0; padding:10px 50px; margin-top:30px;}
.li { font-size:14px; margin-bottom:5px;}
.li>.c { padding-left:10px; font-size:120%;}
.styledCheckbox { display:block; width:20px; height:20px; border:1px solid #fff; position:relative;}
.styledCheckbox>input[type=checkbox] {visibility: hidden;}
.styledCheckbox>.fa { font-size:130%;position:absolute; left:-4px; top:2px; display:none;}
.styledCheckbox>input[type=checkbox]:checked+.fa { display:block;}

.blockBtn {
	display:inline-block; width:250px;  border:1px solid #fff; border-radius:10px; 
	padding:10px; margin: 10px; font-size:160%; color:#fff; font-weight:bold;
}
.blockBtn>img,.sblockBtn>img { display:block; margin:0 auto; max-width:100%; }
.sblock {
	display:inline-block; width:140px; 
	padding:5px; margin: 10px; font-size:15px; color:#fff; font-weight:bold;
}
.sblock>img { display:block; margin:0 auto; max-width:100%; max-height: 100px;}
.sblockBtn {
	display:inline-block; width:140px; border:1px solid #fff; border-radius:10px; 
	padding:5px; margin: 10px; font-size:15px; color:#fff; font-weight:bold;
}
/* son form submit */
.modalbox { position:fixed; width:100vw; height:100vh; top:0; left:0; background-color:rgba(0,0,0,0.8); z-index:10000;  display:table; color:#fff;}
.modalbox>div { display:table-cell; vertical-align:middle; text-align:center; }
.modalbox>div>div { position:relative; border:2px solid #fff; padding:20px; max-width:850px; width:90%; margin:0 auto; padding:30px; text-align:left; font-size:150%; max-height:90vh; overflow-y:auto;}
@media (min-width:768px) { .modalbox>div>div {padding:30px 60px;} }
.modalbox>div>div .s { font-size:70%;}
.modalbox>div>div>.xbtn { position:absolute; right:1px; top:1px;  width:30px; height:30px; text-align:center; line-height:30px; color:#fff;}
.modalbox>div>div>a { color:#fff; background-color:#0067b4; padding:5px; margin:5px; border-radius:20px; }
.modalbox img { width:100%; }
.modalbox h { font-size:170%; font-weight:bold; }
.modalbox .date { font-size:80%; }
.modalbox .content { font-size:80%;}
.modalbox .content a { color:#fff;}
.modalbox .photo { width:100px; }

/* modalbox tmp alertbox */
.modalbox.alertbox .xbtn { color:#000; font-size:25px;}
.modalbox.alertbox>div>div {
	background:#2ea7e0; border: 2px solid #2ea7e0; padding:45px;  border-radius:20px;
	line-height:2.4;
	color:#fff; font-size:18px; text-align: center;
}
.modalbox.alertbox>div>div>h1 { font-size:40px; margin:0; padding:0; text-align:center;}
.modalbox.alertbox>div>div>h2 { display:inline; margin:0; padding:0; font-size:25px; color:#faee00;}
.modalbox.alertbox>div>div a { background: none; color:#fff; padding:5px;}
@media (max-width:767px) {
	.modalbox.alertbox>div>div { padding:30px 10px; max-width:90%; font-size:15px;}
.modalbox.alertbox>div>div>h1 { font-size:30px;}
.modalbox.alertbox>div>div>h2 { font-size:17px;}
}


.tfBtn>a { background-color:#fff; width:50px; height:50px; border-radius:50%; line-height:50px; text-align:center; margin: 10px 30px; display:inline-block; font-size:170%; color:#f00;}

/* contact email */
.homeContact {
    width:100%; max-width:600px; padding:0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    margin: 10px auto;
}
.homeContact .title { font-size:220%; margin-bottom:20px; }
.homeContact div { text-align:left; font-size:110%; font-weight:bold; line-height:1;}
.homeContact .td { padding:5px; margin:0; vertical-align:top;}
.homeContact .td:first-child { width:80px; }
.homeContact input { width:100%; height:30px; line-height:30px; border:0;}
.homeContact textarea { width:100%; height:100px; border:0;}
.homeContact button { float:right; background-color:#5560a3; color:#fff; border:0; font-size:100%; padding:5px 30px; cursor:pointer; font-weight:bold; }

.fa-check.color { color:green; }
.fa-remove.color { color:red; }

color1 { color:#ff66cc; }
color2 { color:#63ccff; }
color3 { color:#a0ffa5; }
color4 { color:#f4999d; }
color5 { color:#f5d62e; }
color6 { color:#ffc700; }
big { font-size:160%; }

/* rain */
.drop {
	background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
	background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
	background: linear-gradient(to right,  rgba(13,52,58,1) 0%,rgba(255,255,255,0.6) 100%);
	/*
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
	*/
	width:1px;
	height:60px;
	z-index:290;
	position: absolute;
	-webkit-animation: fall 2.63s linear infinite;
	-moz-animation: fall 2.63s linear infinite;
	animation: fall 2.63s linear infinite;
}

/* animate the drops*/
@keyframes fall {
	to {margin-top:900px;}
}
@-webkit-keyframes fall {
	to {margin-top:900px;}
}
@-moz-keyframes fall {
	to {margin-top:900px;}
}

.editor { width:100%; max-width:500px; }
.divtb.grandson { width:90%; margin:0 auto;}
.divtb.grandson a img { max-width:80%; }
.divtb.grandson a div { color:#fff; font-size:120%;}


/* datepicker style */
.ui-datepicker { background:#eee; border:1px solid rgba(255,255,255,0.1); min-width:210px; border-radius:3px; padding:7px; color:#333;box-shadow: 5px 5px 5px rgba(0,0,0,0.5); display:none; z-index:2000 !important;}
.ui-datepicker>.ui-datepicker-header{ position:relative; padding:0; margin-bottom:10px;}
.ui-datepicker>.ui-datepicker-header>.ui-datepicker-prev { float:left; padding:3px 7px;}
.ui-datepicker>.ui-datepicker-header>.ui-datepicker-next { float:right; padding:3px 7px;}
.ui-datepicker>.ui-datepicker-header>a { display:block; color:#333;}
.ui-datepicker>.ui-datepicker-header>a:hover { text-decoration:none; background:rgba(250,250,0,0.3);}
.ui-datepicker>.ui-datepicker-header>.ui-datepicker-title { text-align:center; }
.ui-datepicker-title>.ui-datepicker-month { padding:3px 0; font-weight:bold; font-size:110%;}
.ui-datepicker-title>.ui-datepicker-year { padding:3px 0; font-weight:bold; font-size:110%;}
.ui-datepicker>.ui-datepicker-calendar { width:100%;}
.ui-datepicker-calendar th { text-align:center; border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.ui-datepicker-calendar td a { position:relative; display:block; text-align:center; width:30px; height:30px; color:#333; line-height:30px; }
.ui-datepicker-calendar th:first-of-type>span,.ui-datepicker-calendar td:first-of-type>a { color:#ac0000;}
.ui-datepicker-current-day {background:rgba(250,250,0,0.3); }
.ui-datepicker-today>a:before {content:'.'; color:#009984; position:absolute;display:block; width:100%; text-align:center;top:-16px; font-size:200%; font-weight:bold;}
.ui-datepicker-calendar td:not(.ui-state-disabled) { border:1px solid rgba(200,200,200,0.1);}
.ui-datepicker-calendar td a:hover { text-decoration:none; background:rgba(250,250,0,0.3);}

/* timepicker style */
div.ui-timepicker {background:#eee; border:1px solid rgba(255,255,255,0.1); min-width:230px; border-radius:3px; padding:7px; color:#333;box-shadow: 5px 5px 5px rgba(0,0,0,0.5); display:none;}
.ui-timepicker-table { width:100%;}
.ui-timepicker-table th { padding:5px;}
.ui-timepicker-title { text-align:center; font-weight:bold; }
.ui-timepicker-hours { border-right:1px solid #ccc !important;}
.ui-timepicker td>span {display:block; text-align:center; width:30px; line-height:30px; color:#ccc;}
.ui-timepicker-hour-cell,.ui-timepicker-minute-cell {}
.ui-timepicker-hour-cell>a,.ui-timepicker-minute-cell>a
.ui-timepicker-hour-cell>a,.ui-timepicker-minute-cell>a {position:relative; display:block; text-align:center; width:30px; height:30px; color:#333; line-height:30px;}
.ui-timepicker-table td { border:1px solid rgba(200,200,200,0.1);}
.ui-timepicker-table td a:hover { text-decoration:none; background:rgba(250,250,0,0.3);}
.ui-state-active:after {content:'  '; color:#009984; position:absolute;display:block; width:26px;height:26px;top:2px; left:2px; font-weight:bold; border:2px solid rgba(172,0,0,1); border-radius:30px;}


/* loggeddiv */
/* center div */
.cenDiv {display:table;width:100%; height:100vh;}
.cenDiv>div { display:table-cell; text-align:center; vertical-align:middle; background-color:#5560a3;}
/* loginform */
.loginform { color:#fff; letter-spacing:2px;}
.loginform .d1 { max-width:700px; margin:0 auto; padding:15px 30px; }
.loginform .d2 { max-width:400px; margin:0 auto; padding:15px 30px;}
.loginform .d1>* { margin:0 auto;}
.loginform .logo { width:120px; height:160px; background-color:#fff;}
.loginform .corp {  font-size:200%; margin-top:10px; text-shadow: 2px 2px 2px rgba(0,0,0,0.4);}
.loginform .system { font-size:150%; text-shadow: 2px 2px 2px rgba(0,0,0,0.4); }
.loginform label { position:relative; display:block; background-color:#fff; margin-bottom:30px; border:1px solid #ccc; border-radius:1px; box-shadow: 4px 4px 4px rgba(0,0,0,0.5); }
.loginform input { width:100%;padding-left:60px;font-size:120%;line-height:40px;background:transparent;border:0;outline:0; }
.loginform select { width:100%;}
.loginform label>.fa { position:absolute; left:0px;font-size:150%; margin:0 20px; line-height:40px;}
.loginform input,.loginform input +.fa { color:#666;}
.loginform input:hover,.loginform input:focus,.loginform input:hover+.fa,.loginform input:focus+.fa {color:#333;}
.loginform button { width:100%; line-height:30px; font-size:140%; font-weight:bold;  box-shadow: 4px 4px 4px rgba(0,0,0,0.5); border-radius:1px;}
.loginform .select2-container--default .select2-selection--single {border:0;}


.loggeddiv .navbar { background-color:#5560a3; color:#fff;} 
.loggeddiv .navbar .navbar-toggle { position:fixed; right:0; top:0; margin:5px;  color:#fff; font-size:25px;}
.loggeddiv .navbar-brand { font-weight:bold; }
.loggeddiv .navbar-nav>li>a { color:#fff; }
.loggeddiv .navbar-nav>li>a:hover { background-color:rgba(255,255,255,0.2); }

.bg1 { background: #2B334F url("img/bg1.jpg") no-repeat center top; background-size: cover;}
.bg2 { background: #8d8ec7 url("img/bg2.jpg") no-repeat center top; background-size: cover;}
.bg3 { background: #Feb96e url("img/bg3.jpg") no-repeat center top; background-size: cover;}
.bg4 { background: #78dd7b url("img/bg4.jpg") no-repeat center top; background-size: cover;}
.bg5 { background: #F1919c url("img/bg5.jpg") no-repeat center top;  background-size: cover;}
.bg6 { background: #78b747 url("img/bg6.jpg") no-repeat center top;  background-size: cover;}
.bg7 { background: #6ccdf7 url("img/bg7.jpg") no-repeat center top;  background-size: cover;}
.bg8 { background-color:#2c8d00;}
.bg9 { background-color:#9cd8f6;}


/* animation show */
@-webkit-keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}
@keyframes show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}

.an {
	opacity: 0;
	-webkit-animation-name: show;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-out;
	animation-name: show;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.d1 { -webkit-animation-delay: 1s; animation-delay: 1s; }
.d2 { -webkit-animation-delay: 2s; animation-delay: 2s; }
.d3 { -webkit-animation-delay: 3s; animation-delay: 3s; }
.d4 { -webkit-animation-delay: 4s; animation-delay: 4.5s; }
.d5 { -webkit-animation-delay: 5s; animation-delay: 5.5s; }
.d6 { -webkit-animation-delay: 6s; animation-delay: 6.5s; }
.d7 { -webkit-animation-delay: 7s; animation-delay: 7.5s; }
.d8 { -webkit-animation-delay: 8s; animation-delay: 8.5s; }
.d9 { -webkit-animation-delay: 9s; animation-delay: 9.5s; }


/* page element */
.charImg { position:static; margin:0 auto;  max-width:500px; max-height:50vh;}
.charCloud { position:static; margin:0 auto; width:50%;}
.charSon { position:static; margin:0 auto; max-height:300px;}
.charTitle { color:#fff; font-size:24px; font-weight:bold;}
.charDesc {color:#fff; font-size:20px;}
.title { font-size:30px; font-weight:bold;}
.title.s { font-size:20px;}
.line { font-size:20px;}
.line.s { font-size:18px; }
.parag { text-align:left!important; font-size:18px; padding:0 60px;}
.parag h { font-size:120%; font-weight:bold;}
@media (max-width:767px) {
    .line { font-size:18px;}
    .line.s { font-size:16px; }
    .parag { text-align:justify; font-size:15px; padding:0 30px;}
}
@media (max-width:767px) {
    .charImg { max-height:45vh; max-width:75%;}
}
@media (max-height:640px) {
    .charImg { max-height:40vh;}
    .charImg.home { max-height:30vh;}
}

/*
@media (max-width:767px) {
   .charImg { max-height:45vh;}
}
@media (max-width:500px) {
   .charImg { max-width:80%; }    
}
@media (max-width:400px) {
   .charImg { max-width:220px; max-height:58vh; }
    .parag { text-align:justify; font-size:14px; padding:0 30px;}
}
@media (max-height:600px) {
    .charImg { max-height:250px!important; }
}
*/
.fullLayer {
    display:block;
    height:100vh; width:100%; position: relative; overflow: hidden;
    padding-top:140px;
}
/* position */
.title, .line, .parag {
    display: block;
    text-align: center;
    margin:0 auto;
    padding:0 16px;
    color:#fff;
    width:80%;
    max-width: 800px; 
    
}
.modalbox .line, .modalbox .parag, .modalbox .title {
    width:100%;
    max-width: 800px; 
}

@media (max-width:767px) {
    .title, .line, .parag {
        padding:0 14px;
    }
}


.title>a, .line>a, .parag>a {
    color:cornflowerblue;
}


.fullLayer.layerScrollable { overflow: auto; }
.fullLayer>.charImg { display:block;  margin:30px auto 20px auto;  }
.fullLayer>.charTitle { position: absolute; display:block; width: 100%; bottom:10vh; text-align: center; }
.fullLayer>.charDesc { position: absolute; display:block; width: 100%; bottom:5vh; text-align: center;}
@media (max-width:767px) and (max-height:580px) {
.fullLayer>.charImg { display:block;  margin:100px auto 0 auto;  }
}

/* fullpage */
.fp-slidesNav { text-align: center;}
#fp-nav ul, .fp-slidesNav ul { background-color: rgb(0,0,0,0.2); display: inline-block; border-radius:20px; padding:2px 10px; }
#fp-nav ul, .fp-slidesNav ul { text-align: center; }
#fp-nav ul li a span, .fp-slidesNav ul li a span { background: #fff; }
.fp-controlArrow.fp-prev {
    border-color: transparent rgba(255,255,255,0.3) transparent transparent;
    border-width: 58.5px 54px 58.5px 0;
/*    border-width: 38.5px 34px 38.5px 0;*/
}
.fp-controlArrow.fp-next {
    border-color: transparent transparent transparent  rgba(255,255,255,0.3);
    border-width: 58.5px 0 58.5px 54px;
}
@media (max-width:767px) {
    .fp-slidesNav.fp-bottom { bottom:0px;}
    #fp-nav ul, .fp-slidesNav ul { background-color: rgb(0,0,0,0.1); padding:0; }
    .fp-controlArrow.fp-prev { left:5px; border-width: 38.5px 34px 38.5px 0;}
    .fp-controlArrow.fp-next { right:5px; border-width: 38.5px 0 38.5px 34px; }

    
    /* .fullLayer margin-top */
    .fullLayer { padding-top:120px; overflow: auto!important;}
    .hpage .fullLayer { padding-top:170px; overflow: auto!important;}
    
    /* charImg margin */
    .fullLayer>.charImg { margin-top:0;}

}
/*.canscrollablezone {*/
/*
    display:block;
    width:80%;
*/
/*    margin:0 auto;*/
/*    background-color: rgba(0,0,0,0.1);*/
/*
    padding:10px;
    border-radius:10px;
    margin-bottom:10px;
*/
/*}*/

.canscrollablezone.black {
    background-color: rgba(0,0,0,0.1);
    border-radius:10px;
}

.sitemap {
    text-align: center;
}
.sitemap>a {
    display:block;
    width:80%;
    max-width: 250px;
    margin:10px auto;
    padding:7px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 20px;
    text-align: center;
    
    font-size:20px;
    color:#fff;
    border:1px solid transparent;
}

.sitemap>a:hover {
    background-color: rgba(0,0,0,0.3);
    border:1px solid rgba(0,0,0,0.4);
}
@media (max-width:767px) {
    .sitemap>a {
        max-width: 180px;
        margin:7px auto;
        padding:5px;
        
        font-size:16px;
    }
}

.margindiv {
    text-align: center;
/*    vertical-align: top;*/
    margin: 40px auto;
    max-width:600px;
}

@media (max-width:600px) {
    .margindiv { margin: 0 auto 30px auto; }
}

.linkbtn {
    display:inline-block;
    background-color: #0067b4;
    border-radius: 10px;
    margin-left:10px;
    padding: 0 15px;
    color:#fff!important;
    font-size:15px;
}

.underline { text-decoration: underline;}
.prevchapter { 
    position:fixed; z-index:499; left:50px; top:172px;

    background-color:rgba(0,0,0,0.3);
    padding:5px 20px; 
    border-radius:20px;
    font-size:28px;
    color:#fff;
}
.nextchapter {
    position:fixed; z-index:499; right:50px; top:172px;
    background-color:rgba(0,0,0,0.3);
    padding:2px 20px; 
    border-radius:20px;
    font-size:28px;
    color:#fff;
}

@media (max-width:767px) {
    .prevchapter {
        left:10px; top:110px;
        font-size:20px;
    }
    .nextchapter {
        right:10px; top:110px;
        font-size:20px;
    }
 
}

.popupbox {}
@media (max-width:767px) {
.popupbox {}

}