@import url(css/fontawesome-all.min.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanslao.css);
/* CSS Document */
body {
margin-left: 80px;
margin-right: 80px;
margin-top: 20px;
letter-spacing:0.03em;
font-family: custom-sans-serif, sans-serif;
//font-family: 'Noto Sans TC', sans-serif;
//font-family: Century Gothic, 'Noto Sans TC', sans-serif; !important;
}
p, text, text2, slide_text{
// font-family: 'Noto Sans TC', sans-serif;
//font-family: Century Gothic, 'Noto Sans TC', sans-serif; !important;
}
#main_nav {
display: none;
position: fixed;
top: 140px;
left: 0;
background-color:rgba(248, 248, 248, 0.9);
/*background: #f8f8f8;*/
width: 100%;
height:100%;
z-index: 1001;
Padding-left:20px;
Padding-right:20px;
}
#main_nav:target {
display: block;
}
.access_aid {
display: block;
position: absolute;
top: 9px;
right: 65px;
width: 40px;
height: 0;
padding-top: 40px;
overflow: hidden;
/*border: 1px solid #ccc;
background: white 10px 10px / 20px 20px no-repeat;*/
}
.main {
margin-top: 120px;
}
.menuli {
display: block;
font-size:22px;
position: absolute;
bottom: -78px;
Color:#4d4d4d;
}
.menuimg {
width:110%; height:230px;
}
.not_show {
display: none;
font-size:16px;
Color:#4d4d4d;
position: absolute;
bottom: 7px;
}
.small_banner_right {
margin-bottom:1em;
padding: 0px;
padding-right: 0.5em;
}
.small_banner_middle {
margin-bottom:1em;
padding: 0px;
padding-left: 0.25em;
padding-right: 0.25em;
}
.small_banner_left {
margin-bottom:1em;
padding: 0px;
padding-left: 0.5em;
}
.text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color:#ffffff;
font-size:2.8vw;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-align:center;
z-index: 100;
}
.text2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #b2b2b2;
font-size: 1.4vw;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-align:center;
z-index: 100;
}
.slide_text {
position: absolute;
margin-left: 50px;
margin-right: 20px;
margin-top: -15px;
top: 0;
bottom: 0;
left: 0;
right: 0;
color:#ffffff;
text-shadow: 3px 5px 2px #474747;
font-size:2.1vw;
font-weight: bold;
display: flex;
align-items: center;
justify-content: left;
text-align:left;
}
.slide_text2 {
position: absolute;
margin-left: 0px;
margin-right: 0px;
margin-top: 5em;
top: 0;
bottom: 0;
left: 0;
right: 0;
color:#b2b2b2;
font-size:1.4vw;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
text-align:center;
z-index: 100;
}
.slide_text_no_css {
position: absolute;
margin-left: 3vw;
// margin-left: 50px;
margin-right: 20px;
margin-top: -15px;
top: 0;
bottom: 0;
left: 0;
right: 0;
color:#ffffff;
/*text-shadow: 3px 5px 2px #474747;*/
font-size:2.1vw;
font-weight: bold;
display: flex;
align-items: center;
justify-content: left;
text-align:left;
}
.slide_text_no_css_ch {
position: absolute;
margin-left: 3vw;
margin-right: 20px;
margin-top: -15px;
top: 0;
bottom: 0;
left: 0;
right: 0;
color:#ffffff;
font-size:2.5vw;
font-weight: bold;
display: flex;
align-items: center;
justify-content: left;
text-align:left;
}
.slide_text_small {
/*text-shadow: 3px 5px 2px #474747;*/
font-size:1.5vw;
}
.slide_text_tiny {
font-size:1.2vw;
}
.button_slide {
background-color: #4d4d4d;
border: none;
color: white;
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.2vw;
border-radius: 50px;
letter-spacing: .1rem;
margin-top: 1.2vw;
line-height: 2.5;
}
.menu_text {
color:#b2b2b2;
Font-size:1.5vh;
}
.menu_text2 {
color:#808080;
Font-size:2.5vh;
margin: 0 0 1.2vh;
}
.bottom_text {
color:#4d4d4d;
font-size: 14px;
}
.bottom_text2 {
color:#808080;
font-size:14px;
Padding-right: 10px;
}
.copyright_text {
color:#808080;
font-size:10px;
}
/* relevant styles */
.img__wrap {
position: relative;
}
.img__description_layer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description_layer {
visibility: visible;
opacity: 1;
}
.img__description {
color: #b2b2b2;
transition: .2s;
transform: translateY(1em);
font-size: 1.4vw;
font-weight: bold;
text-align:center;
}
.img__wrap:hover .img__description {
transform: translateY(0);
}
/* Slideshow container */
.slideshow-container {
position: relative;
}
.container {
position: relative;
width: 100%;
height: 0;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.style2 {
position:fixed;
z-index: 99;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
display: flex;
align-items: center;
background-color: #ffffff;
height:50px;
}
.banner_slide {
position: absolute;
bottom: 1em;
left: 2em;
}
.slide_video {
position: absolute;
bottom: 10px;
left: 125px;"
}
.hamburger {
position: absolute;
top: 9px;
right: 65px;"
}
@media screen and (max-width: 768px) {
body {
margin-left: 5px;
margin-right: 5px;
margin-top: 20px;
Padding:10px;
}
.menuli {
display: none;
}
.menuimg {
height:0px;
}
.not_show {
display: block;
}
#main_nav {
top: 80px;
}
.main {
margin-top: 50px;
}
.small_banner_right, .small_banner_middle{
margin-bottom:1em;
padding: 0px;
;
}
.small_banner_left {
margin-bottom:1em;
padding: 0px;
;
}
.slide_text_no_css {
margin-left: 15px;
margin-right: 15px;
// margin-top: -15px;
//font-size:2.1vw;
}
.text {
font-size:5vw;
z-index: 100;
letter-spacing: 0.1rem;
}
.text2 {
font-size: 2.4vw;
}
.slide_text {
margin-left: 20px;
margin-right: 20px;
margin-top: -10px;
text-shadow: 3px 5px 2px #474747;
font-size:2.5vw;
}
.slide_text_small {
font-size:1.8vw;
}
.button_slide {
padding: 0px 20px;
font-size: 1.8vw;
}
.img__description, .slide_text2 {
transition: .2s;
transform: translateY(1em);
font-size: 3.5vw;
line-height: 1;
}
.slide_text2 {
margin-top: 35px;
}
.bottom_text {
}
.bottom_text2 {
font-size:12px;
}
.menu_text {
}
.menu_text2 {
color:#808080;
Font-size:4vw;
}
.copyright_text {
font-size:8px;
}
.style2 {
height:80px;
}
.banner_slide {
//position: absolute;
bottom: 0.5em;
left: 1em;
}
.slide_video {
position: absolute;
bottom: 10px;
left: 220px;
}
.hamburger {
position: absolute;
top: 6px;
right: 16px;
}