﻿/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

/* override */
html {
  line-height: 1.5;
  font-family:"Arial","微軟正黑體","新細明體";
  font-weight: normal;
  color: rgba(255, 255, 255, 0.57);
  background-color:#111111;
}


/* override */
 

 
nav ul a,
nav .brand-logo {
  color: #444;
}

p {
  line-height: 2rem;
}

img.responsive-img, video.responsive-video {
    height: auto;
    max-width: none;
}

ol{
padding-left:18px;
}


*, *::before, *::after {
    box-sizing: inherit;
}
*, *::before, *::after {
    box-sizing: inherit;
}
.pos1 {

    left: 50%;

    margin-top: 80%;
}
.container {
    width: 96%;
	padding:0px;
	margin-left:auto;
	margin-right:auto;
}



.button-collapse {
  color: #26a69a;
}

.parallax-container {
  position:relative;
  display:block;
  
  min-height: 460px;
  line-height: 0;
  height: auto;
  color: rgba(255,255,255,.9);
}
.topapkb2{
position:absolute;
  display:block;
  left:30%;
  width:85%;
  height:50%;
  top:0%;
}

.topapkb{
position:absolute;
  display:block;
  left:30%;
  width:55%;
  height:1000px;
  top:50%;
}

.heightbn{
min-height: 320px;
}


.rowin{
position:relative;
display:block;
margin-top:20px;
width:100%;
max-width:600px;
margin-left:auto;
margin-right:auto;
letter-spacing:0px; 
}

@media only screen and (max-width : 992px) {


}

@media only screen and (max-width : 700px) {
	.parallax-container {
		min-height: 300px;
	}
	img.responsive-img, video.responsive-video {
    height: 380px;
	}
	.heightbn{
	min-height: 300px;
}
}

@media only screen and (max-width : 550px) {
	.heightbn{
	min-height: 280px;
}

}
@media only screen and (max-width : 450px) {
.rowin{
	top:20px;
	}
}
@media only screen and (max-width : 400px) {
	.parallax-container {
		min-height: 240px;
	}
	img.responsive-img, video.responsive-video {
    height: 300px;
	}
	.rowin{
	top:20px;
	}
}
.heightbn2{
min-height: 120px;
}

.icon-block {
  padding: 0 15px;
}

footer.page-footer {
  margin: 0;
}
.height30{
min-height: 30px;
}
.height60{
min-height: 60px;
}
.height160{
min-height: 160px;
}
.height260{
min-height: 260px;
}

.height360{
min-height: 360px;
}

.colorC{
font-size:2em;
width:100%;
text-align:center;
position:relative;
display:block;
}



#pos1{
position:relative;
display:block;
top:0%;
left:0%;
}


.font1{
font-size:1.3em;
}
.font2{
font-size:1.8em;
}

.colorR{
color:#FF0000;
}

@media only screen and (max-width : 400px) {
	.font1{
	font-size:1.1em;
	}
}

.nopadding{
padding:0px;
}

.nomargin{
margin:0px;
}
.line5{
position:relative;
display:block;
width:100%;
max-width:750px;
height:13px;
background-image:url("../imgg/line1.png");
background-size:contain;
background-position:center;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
margin-top:40px;
margin-bottom:20px;
}
.line1{
position:relative;
display:block;
width:100%;
max-width:750px;
height:13px;
background-image:url("../imgg/line1.png");
background-size:contain;
background-position:center;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}
.line4{
position:relative;
display:block;
width:100%;
max-width:750px;
height:13px;
background-image:url("../imgg/line3.png");
background-size:contain;
background-position:center;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
}

.line2{
position:relative;
display:block;
width:100%;
max-width:750px;
height:17px;
text-align:center;
background-image:url("../imgg/line2.png");
background-size:contain;
background-position: center center;
line-height:1em;
font-size:1.15em;
text-shadow:2px 2px 3px #000;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
margin-top:10px;
}
.line3{
position:relative;
display:block;
width:100%;
max-width:750px;
height:17px;
text-align:center;
background-image:url("../imgg/line2.png");
background-size:contain;
background-position: center center;
line-height:1em;
font-size:1.15em;
text-shadow:2px 2px 3px #000;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
margin-top:10px;
}


.bn1{
position:relative;
display:inline-block;
width:32%;
margin-right:2%;
max-width:190px;
float:left;

-moz-box-shadow:2px 2px 3px #000;
-webkit-box-shadow:2px 2px 3px #000;
box-shadow:2px 2px 3px #000;

}


.bn2{
position:relative;
display:inline-block;
width:32%;
margin-right:2%;
max-width:190px;
float:left;
-moz-box-shadow:2px 2px 3px #000;
-webkit-box-shadow:2px 2px 3px #000;
box-shadow:2px 2px 3px #000;

}



.bn3{
position:relative;
display:inline-block;
width:32%;
max-width:190px;

float:left;
-moz-box-shadow:2px 2px 3px #000;
-webkit-box-shadow:2px 2px 3px #000;
box-shadow:2px 2px 3px #000;

}

#bn1on{
position:absolute;
display:inline-block;
width:100%;
height:100%;
max-width:190px;
float:left;
top:0px;
opacity:0;
}
#bn2on{
position:absolute;
display:inline-block;
width:100%;
height:100%;
max-width:190px;
float:left;
top:0px;
opacity:0;
}
#bn3on{
position:absolute;
display:inline-block;
width:100%;
height:100%;
max-width:190px;
float:left;
top:0px;
opacity:0;
}


.w100{
position:relative;
display:block;
width:100%;
}


/* slider */


/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { float: left; height: 100%; min-height: 1px; display: none; width: auto !important;margin-right: 26px;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: inline-block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }


/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px;  cursor: pointer;
    background: url(../img/slick.png) no-repeat;width:19px;height:35px; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none;color: transparent; }
.slick-next{background-position:-18px 0;right: 0;}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { opacity: 0.25; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled, .slick-next.slick-disabled { opacity: 0.1; }

/* Dots */
.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }



.homeslider{display:block;max-width:860px;width:100%;margin:15px auto 5px}
.homeslider2{display:none;width:100%;max-width:420px;margin:15px auto 5px}

@media all and (max-width:420px){
.homeslider{display:none;}
.homeslider2{display:block;}

}


.slick-dots li.slick-active button::before {
    color: white;
    opacity: 0.75;
}
.slick-dots li button::before {
    color: #ccc;
    content: "•";
    font-family: "slick";
    font-size: 16px;
    height: 20px;
    left: 0;
    line-height: 20px;
    opacity: 0.25;
    position: absolute;
    text-align: center;
    top: 0;
    width: 20px;
}

.slider {
height:auto;
}

.pop {width: 100%;
height: 4500px;
display: block;
position: fixed;

background-image:url("../imgg/alphab.png");
z-index: 998;
top: 0px;
display: none; overflow: hidden;

  
    text-align:center;
	height: 1500px;
	width:100%;
    margin-left: auto;
	margin-right: auto;
   
}

.ppic2{
position:relative;
display:block;
max-width:400px;
width:100%;
top:100px;
margin-left:auto;
margin-right:auto;
}

.ppic30{
position:relative;
display:block;
max-width:993px;
width:100%;
top:100px;
margin-left:auto;
margin-right:auto;
}
/* slice End */

.colorU{

color:#dbedff;
font-size:1.2em;

}
.colorU2{
color:#D9A300;
font-size:1em;
}
.colorU3{
color:#222222;
font-size:1em;
}
.colorU4{
color:#DDDDDD;
font-size:1em;
}

.tablebg{
background-color:#222222;
}
.colorG{
color:#999999;
}

.cent{
text-align:center;
}

.boxA{
position:relative;
display:block;
width:100%;
height:50px;
margin-top:10px;
text-align:center;
padding:10px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background-color:#000;
}

.dlsize{
width:200px;
}
.dlsize2{
width:181px;
}

.colorback{
position:relative;
display:block;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
background-color:#222222;
}

.sizeR{
font-size:1.5em;
}

#button1{
margin-top:5px;
font-size:1.2em;
}
#button2{
margin-top:5px;
font-size:1.2em;
}

.picss{
position:relative;
display:block;
float:left;
width:40px;
}
.piccc{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
width:40px;
margin-bottom:5px;
}
.picss2{
position:relative;
display:block;
width:100%;

}

#upup{
text-align:center;
font-size:0.9em;
}

th{
text-align:center;
}

.shad{
-moz-box-shadow:0px 3px 3px #000;
-webkit-box-shadow:0px 3px 3px #000;
box-shadow:0px 3px 3px #000;
}

.centers{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
max-width:335px;
width:100%;
}
.centerso{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
}
.sss{
position:relative;
display:inline-block;
top:8px;
}

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

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

}
@media all and (max-width:420px){
.centersin2{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
width:280px;
}
}

/* overridr */
.fixed-action-btn {
    bottom: 23px;
    margin-bottom: 0;
    padding-top: 15px;
    position: fixed;
    right:auto;
    z-index: 999;
}

.ftype{
font-family:"Century Gothic";
font-weight:700;
z-index: 1999;
text-align:center;
}

table, th, td {
    border-width:1px;
	 border-color:#444444;
	 border-style:dotted;
}