/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */



body {
	margin:0px; padding:0;
	color: #FFF;
	background-color:#000;
	line-height:1.3em;
	font-family:"Arial","微軟正黑體","新細明體";
	overflow-x:hidden;

}



/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display:none;

}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;

}
.navbar-wrapper .navbar {
  padding-right: 15px;
  padding-left: 15px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}





/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-sm-4 {
  margin-bottom: 0px;
  text-align:center;
 }
.marketing h2 {
  font-weight: normal;
}
.marketing .col-sm-4 p {
  margin-right: 10px;
  margin-left: 10px;
}
.marketing {
position:relative;
display:block;
/*margin-top:90px;*/
width:100%; max-width:780px; min-width:320px; margin:20px auto 0 auto; padding:0; text-align:left;
}

.container{  /* all content max-width */
max-width:1024px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}




/* RESPONSIVE CSS
-------------------------------------------------- */



@media (min-width: 992px) {

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

/* Self added Common
------------------------- */
.fixed_bg{background:#000 url(../img/bg.jpg) no-repeat 50% 0; position: fixed; top:0; right:0; bottom:0; left:0; z-index:-1;}

/* header */

#header {
    padding: 30px 0;
    background-color: #000;
    color: white;
    margin-bottom: 30px; position:relative; width:100%; text-align:center; min-width:320px; max-height:90px;
	z-index:10000;
}

#header a {
    color: white; text-decoration: none;
}
#header a:hover{
	color: #b6feff;
	text-decoration: none;
}

#header .wrapper1 > div, #header .wrapper2 > div  {
    float: left;
}
.wrapper2{ display:none;}
#main-nav ul {
    margin: 0; margin-top:-20px;
}

#main-nav li {
    display: inline-block;
    width: 80px; 
}


.headPic{
	position:relative;
	display:block;
	width:100%;
	padding:0; margin:0;
	min-height:100px; /*z-index:0;*/
}

.pp{  /* img 100% resize absolute*/
position:relative;
display:block;
width:98%; max-width:218px;
}
.top_s{width:100%; height:auto;position:absolute; display:block;}

.ppr{  /* img 100% resize relative*/
position:relative;
display:block;
width:100%; height:auto; max-width:635px; margin:0 auto;
}


.alignL{ /* align left */
text-align:left;
}
.alignR{ /* align right */
text-align:right;
}
.alignC{ /* align center */
text-align:center;
}

.lines{
position:relative;
display:block;
width:100%;
height:1px;
text-shadow:3px 3px 8px #000;
background-color:#fff;
}

.off{
display:none;
}

.citf{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}

/* Self added
------------------------- */

.topa{ /* top black area for resize and position */
position:relative;
display:block;
width:100%;
}


/*nav btn*/

.logopos{ /* logo position */
/*position: absolute;*/
display:inline-block;
z-index:10001; max-width:291px;  width:37%; /*margin:-1.5em auto; left:40%;*/
}
.logopos  a:hover{ /* logo position */
top:-1px;
}

.logopos_1{ /* logo position */
position: absolute;
display: none;
z-index:10001; max-width:291px;  width:100%; /*margin:-1.5em auto; left:40%;*/
}
.logopos_1  a:hover{ /* logo position */
top:-1px;
}


/* dropdown hover*/
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: hsla(0,0%,0%,0);
}

.dropdown-menu {
  background-clip: padding-box;
  background-color: #000;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  display: none;
  float: left;
  font-size: 14px;
  left: 0;
  list-style: outside none none;
  margin: 2px 0 0;
  min-width: 160px;
  padding: 5px 0;
  position: absolute;
  text-align: left;
  top: 100%;
  z-index: 1000;
}

.dropdown-menu > li > a {
  clear: both;
  color: #ccc;
  display: block;
  font-weight: normal;
  line-height: 1.42857;
  padding: 3px 20px;
  white-space: nowrap;
}

.dropdown-header{
color: #ff8e00;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
   background-color: hsla(0,0%,0%,0);
   color: #ff8e00;
   font-size:1em;
   font-weight:700;
   font-family:"Arial","微軟正黑體","新細明體";
}


.navbar-inverse {
	background-color:#000;
   /* background-image:url("../img/bar.png");*/
	background-repeat:no-repeat;
	background-position:center top;
    border-color: #000;
}

.navbar-inverse .navbar-nav > li > a {
    color: #ddd;
	 font-size:1.1em;
   font-weight:700;
   text-align:right;
}
.navbar-inverse .navbar-toggle {
    border-color: #000;
}

.navbar-toggle {
    background-color: transparent;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 0px;
    float: right;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 8px;
    padding: 0px 0px;
    position: relative;
}
.navbar-toggle:hover {
    background-color: #000;
    
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #000;
}

/* dropdown end */

/* footer */ 
.container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;	background-image:url(../img/footer_bg.jpg);	background-repeat: no-repeat;
	background-position: center top; background-color:#000; margin-top:15px;
}
.footerA{
	display:block;
	width:100%;
	min-height:100px;
 padding-top:10px;
}

.boxA3{
	position:relative;
	display:block;
	width:100%;
	padding-top:0px;
	padding-bottom:0px;
	margin-bottom:0px;
	min-height:100px;

	
}
.boxA3s{
position:relative;
display:block;
width:100%;
padding-top:0px;
padding:15px;
padding-bottom:0px;
margin-bottom:0px;
min-height:100px;
/*background-color:#fbc929;*/
top:0px;
color:#fff;
}

.linkfb{
position:absolute;

display:block;
left:285px;
top:0px;
width:40px;
height:40px;
}

.garena {
    display: block;
    height: 50px;
    left: 115px;
    position: absolute;
    top: 5px;
    width: 130px;
}

.logoR{
position:relative;
display:block;
width:299px;
height:100px;
background-image:url("../img/logod.png");
}

.logoL{
position:relative;
display:block;
width:299px;
height:100px;
background-image:url("../img/logoi.png");
}
/* footer end */


/* contain box */

.boxA{
min-width:320px;
position:relative;
display:block;
padding:20px;
/*padding-bottom:30px;
margin-bottom:10px;*/
min-height:100px;
text-align:left;
}
.boxA li{  margin: 10px 0px; }
.boxA ul{ margin-left:-25px; margin-bottom:20px;}
.boxA table ul{ margin-left:-40px;/* margin-bottom:20px;*/}
.boxA table li{  margin: 0px 0px; }

.lover{background: rgba(7%, 49%, 97%, 0.5) ; padding:20px; display:block; min-height:265px;}
.lover1{background: rgba(7%, 49%, 97%, 0.5) ; padding:20px 0px 20px 40px; display:block; min-height:200px;}
.boxA2{
position:relative;
display:block;
width:96%;
min-width:320px;
padding:20px 20px 20px 0; 
/*padding-bottom:30px;*/
margin-bottom:10px;
min-height:100px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin-left:auto;
margin-right:auto;

/**漸層色背景**/
background:url("../img/bgblue.png"), #005ce5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZmNhZmMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background:url("../img/bgblue.png"),  -moz-linear-gradient(top,  #005ce5 0%, #00225f 100%); /* FF3.6+ */
background:url("../img/bgblue.png"),  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005ce5), color-stop(100%,#00225f)); /* Chrome,Safari4+ */
background:url("../img/bgblue.png"),  -webkit-linear-gradient(top,  #005ce5 0%,#00225f 100%); /* Chrome10+,Safari5.1+ */
background:url("../img/bgblue.png"),  -o-linear-gradient(top,  #005ce5 0%,#00225f 100%); /* Opera 11.10+ */
background:url("../img/bgblue.png"),  -ms-linear-gradient(top,  #005ce5 0%,#00225f 100%); /* IE10+ */
background:url("../img/bgblue.png"),  linear-gradient(to bottom,  #005ce5 0%,#00225f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005ce5', endColorstr='#00225f',GradientType=0 ); /* IE6-8 */
border:#008cc5 solid medium;
box-shadow:0px 0px 15px #0066ff;
}
a#link1, a#link2, a#link3{text-decoration: none;}
.boxA2 .s81{ margin:-13px auto 2px ; width:291px; left:15px;
}
.boxA2 ul{
    text-align:left;
    margin-left:0px;
    /*display:inherit;*/
}

.boxA4{ /* full 12 box */
    position:relative;
    display:block;
    width:100%;
    min-width:320px;
    margin-bottom:10px;
    min-height:100px;
    margin:10px auto;
    text-align: center;
    
}
.boxA4 li{ display:inline-block; margin: 5px 10px; }
.boxA4 ul{ margin-left:-35px;}

.lover .boxA4 ul{ margin:-25px -55px; text-align:left;}
.lover .boxA4 .cits2in{
position:relative;
display:block;
margin-left:auto;
margin-right:auto; width:100%; max-width:150px;
}



/* contain box end */


.s79{
    color:#fff;/*font-weight: bold;*/
    font-size: 1.2em;
    margin:0 auto;
    line-height: 1.5em;
}


/* this page can change */
.cits2{
    position:relative;
    display:block;
    width:100%;
    margin-top:10px;
    z-index:100;
    text-align:center;
    
}

.cits2in{
position:relative;
display:block;
margin-left:auto;
margin-right:auto; width:100%; max-width:266px;
}
.cits2in:hover{
opacity:0.9;
}



.btnsin{
    position:relative;
    display:block;
    width:151px;
    height:45px;
    margin-left:auto;
    margin-right:auto;
}
.btnsin:hover{
opacity:0.9;
}

.fbbox{
position:relative;
display:block;
width:300px;
height:317px;
margin:0 auto;
background-color:#fff;}

.city{
position:relative;
display:block;
margin-top:10px;
width:240px;
margin-left:auto;
margin-right:auto;
height:40px;
}
.gogol{margin-left:23px;}
.form-control{ width:96%;}
.lines{
    position:relative;
    display:block;
    width:100%;
    height:1px;
    text-shadow:3px 3px 8px #000;
    background-color:#CCC;
}

.colorTd{ /* big white title color */
    font-size:1em;
    color:#fff;
    font-weight: normal;
}
.colorTd2{ /* small left title color */
font-size:1em;
color:#00fffc;
margin-top:10px;
margin-bottom:5px;
}
.colorGd{ /* big title color */
    font-size:1.2em;
    color:#fffdb3;
    margin-top:10px;
    margin-bottom:5px;
    font-weight: bold;
}
.colorTd3{
    /*text-align:right;*/
    font-size:1em;
    vertical-align: text-bottom; color:#00fcff;
    margin-top:10px;
margin-bottom:5px; font-weight: bold;
}
.form-group .colorTd3{padding-top:0px;}
.colorTd4{ color:#ff8cf9; font-weight: bold;}
.colorTd5{ color:#ff8cf9;}
.colorTd6{ color:#fffdb3; font-weight: bold;}



.wordW{ /* font-weight: bold; */
font-weight: bold;
}

.height50{ /* select-menu height */
height:30px;
}

.s80{ /* box title picture */
width:100%; height:auto;
max-width:754px; max-height:424px;
position:relative;
display:block;

margin:5px auto;
}

.s81{ /* box title picture */
width:100%;
max-width:291px;
position:relative;
display:block;

margin:10px auto;
}

.paddT2{  /* whole contain box clear */
padding-top:0px;
position:relative;
display:block;
top:0px;
}

.blank{ margin-left:10px;}

/**女神Banner**/
.swiper-container {
        width: 100%; height: auto;
        max-width:768px; max-height:433px;
        background: rgba(7%, 49%, 97%, 0.5) ;
        border:#008cc5 solid medium;
        box-shadow:0px 0px 15px #0066ff;
        
    }
    .swiper-slide {
        text-align: center;     
        
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-button-fb{
    position:absolute;
    top:90%;
    max-width:170px; width:22%;
    height:60px; /*height:auto;*/
    margin-top:-22px;
    z-index:20;
    cursor:pointer;
    -moz-background-size:170px 60px;
    -webkit-background-size:170px 60px;
    background-size:170px 60px;
    background-position:center;
    background-repeat:no-repeat;
    /*background-color: #0F0;*/
    right:1%; left:auto;
}

/*女神介紹 頁籤*/
/*ul,li{margin:0;padding;0}*/
#tabs{
    position: relative; display:block; margin:10px auto;
    z-index: 1;
    width: 100%;
    /*max-width: 610px;*/
    margin: 0 auto ;

}
/*#tabs ul{ margin:10px auto;}*/
#tabs li{
    border-bottom: none;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    color: #FFF;
    cursor: pointer;
    border:#008cc5 solid thin;
    box-shadow:0px 0px 15px #0066ff;
    width: 150px; height:100%;
    background: rgba(7%, 49%, 97%, 0.5) ;
    margin:1px; padding:1px;
    /*max-height: 43px;
    font-family: "微軟正黑體", "黑體";*/
    font-size: 1.1em;
    text-align: center;
    font-weight: bolder;
    line-height: 2em;
    background-size: 100% auto;

}
#tabs li:hover{
    color: #CCC;
}
#tabs li.enable{
    color: #FF0;
}

#contents > div{
display: none;
text-align: justify;
padding: 10px 15px;
}
#contents > div:first-of-type{
display: block;
}
.scenery{ margin:60px auto;}
#single_image{box-shadow:0px 0px 15px #0066ff;display: block; max-width:365px; margin:0 auto;}

.table li{display:inline-block; width:30%; min-width:85px; /*margin-right:10px; margin:5px 0px;*/}
.table ul{/* margin:0;*/ margin-left:-40px;}
.table .cits2in{ width:50%;}



/* in 1920 */
@media (max-width: 1920px) {
    
    .boxA4{ /* full 12 box */
    position:relative;
    display:block;
    width:98%;  
    }   
    
}

/* in 1680 */
@media (max-width: 1680px) {

    .boxA4{ /* full 12 box */
    position:relative;
    display:block;
    width:98%;  
    }   
}

/* in 1400 */
@media (max-width: 1400px) {
        
    .boxA4{ /* full 12 box */
    position:relative;
    display:block;
    width:98%;  
    }   
}

/* in 1200 (default size)*/
@media (max-width: 1200px) {
    
    .boxA4{ /* full 12 box */
    position:relative;
    display:block;
    width:98%;  
    }   

}

/* in 992 (default size)*/
@media (max-width: 992px) {
    .boxA4{ /* full 12 box */
    position:relative;
    display:block;
    width:96%;  
    }   
    .lover1{ padding:20px; }
}
    
/* in 768 (default size)*/
@media (max-width: 768px) {
.fixed_bg{background:#000 url(../img/bg_s.jpg) no-repeat 50% 0; position: fixed; top:0; right:0; bottom:0; left:0; z-index:-1;}
.pp{ margin:0 auto 0.75em auto;}
.blank{ margin-left:0px;}
.wrapper1, .logopos{ display:none;}
.navbar-wrapper, .logopos_1{ display:block !important ;}

}

/* in 650 (default size)*/
@media (max-width: 650px) {
.wrapper2{display:block; !important;}
.wrapper1, .scenery{display:none;}
.logopos{ /* logo position */
display:block; max-width:291px;  width:100%; margin:-1.5em 1em;}
#header { max-height:50px;}
#main-nav li {
    display: inline-block;
    width: auto; font-size:1em; 
}
#main-nav{text-align:left;vertical-align: middle;}
#tabs{ margin-left:-10px;}
.lover .boxA4 li{ display:block; }
.lover .boxA4 ul{ margin:0;}
.lover .boxA4 .cits2in{ margin-left:-50px;}
.table li{display:block; width:100%; /*min-width:85px; margin-right:10px; margin:5px 0px;*/}
.lover td, .lover th{ padding:5px; font-size:0.75em;}


}
/* in 480 (default size)*/
@media (max-width: 480px) {
.logopos_1{ width:163px; height:auto;}
}

/* Overlap */

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px;
}
/* Overlap End */

.error {
    color: red;
}

@media (max-width: 650px) {.lover td, .lover th{ padding:5px; font-size:0.75em;}}