@charset "utf-8";

* {
    box-sizing: border-box;
}

/* body 样式 */
body {
    font-family: "Times New Roman", Calibri，Arial, "Bookman Old Style";
    margin: 0;
}

/* 标题 */
.header {
width:100%;
height:auto;
}
.header .flex-box {
    display: -webkit-flex;
    display: flex wrap ;
    width: 100%;
	flex-flow:row;
    height: auto;
	border:5px;
	padding:0px;
    background-color: none;
}
.header .flex-box .logo {
	padding:30px;
	border:0px #D5B3B5;
}
.header .flex-box .slogan {
	flex-grow:2;
	border:0px #D5B3B5;
}
.header .flex-box .pic {
	width:23%;
 	padding-left:0px;
	border:0px #D5B3B5;
}

/* 标题字体加大 */
.header h1 {
    font-size: 28px;
}
h1{
	font-family: "bookman old style",Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; 
	color: #FFCE05;
	font-size:200%;
	text-align: center;
	/**設置字體的陰影效果text-shadow: 0 0 0.2em #444,0 0 0.2em #444,0 0 0.2em #444;**/
	text-shadow:  1px 1px white, 1.5px 1.5px #444	/**設置字體的雕刻效果**/
}
h2{
	font-family: "bookman old style",Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	color: #525252;
	text-align:center;
	font-size: 140%;
	/**設置字體的陰影效果text-shadow: 0 0 0.2em #444,0 0 0.2em #444,0 0 0.2em #444;**/
	text-shadow: 1px 1px #FDFDFD,1.1px 1.1px #444	/**設置字體的雕刻效果**/
}
h3{
	font-family: "bookman old style",Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	color: #525252;
	font-size: 100%;
	/**設置字體的陰影效果text-shadow: 0 0 0.2em #444,0 0 0.2em #444,0 0 0.2em #444;**/
	text-shadow: 1px 1px #E5F718,1px 1px #444	/**設置字體的雕刻效果**/
}
h4{
	font-family: "bookman old style",Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; 
	color: #FFCE05;
	font-size:140%;
	/**設置字體的陰影效果text-shadow: 0 0 0.2em #444,0 0 0.2em #444,0 0 0.2em #444;**/
	text-shadow:  1px 1px white, 2px 2px #444	/**設置字體的雕刻效果**/
}
h5{
	font-family: "bookman old style",Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; 
	color: #525252;
	font-size:140%;
	/**設置字體的陰影效果text-shadow: 0 0 0.2em #444,0 0 0.2em #444,0 0 0.2em #444;**/
	text-shadow:  1px 1px #FFCE05, 1.8px 1.8px #444	/**設置字體的雕刻效果**/
}
h6{
	font-size:90%;
	color:#EBEBEB;
	padding-top:0px;
	
}
/* 导航 */
.navbar {
    overflow: hidden;
	height: 40px;
    background-color: #1605A9;
}

/* 导航栏样式 */
.navbar a {
    float: right;
    display: block row;
    color: white;
    text-align: center;
    padding: 10px 60px 10px 20px;
    text-decoration: none;
}

/* 右侧链接*/
.navbar a.right {
    float: right;
}

/* 鼠标移动到链接的颜色 */
.navbar a:hover {
    background-color: #FFFFFF;
    color: black;
}

#bk1 {
    background-image:url("../../未命名網站 2/image/sign1_v.png");
    background-size:78px 194px;
    background-repeat:repeat;
	z-index:-1;
}
#floatBar{
	list-style-type: none;
	display:inline;
    right: 0;
	height: 180px;
	padding-top:40px;
    padding-left: 16px;
   
    overflow: hidden;
	font-size:90%;
    background-color: #E0E0DF;
	border:2px solid #FE0B0B;
    position: fixed;
    top: 36%;
    width: 8%;
	text-align: left;
}
/* 列容器 */
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* 创建两个列 */
/* 边栏 */
.side {
    -ms-flex: 1%; /* IE10 */
    flex: 1%;
    background-color: #1605A9;
	border-top: 7px solid #FFFFFF;
    padding-top: 30px;
	margin:0%;
	height:600px;
	color:#FFFFFF;
	text-align:center;
}

/* 主要的内容区域 */
.main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: white;
    padding: 20px;
}

#content {
	position: relative;
	margin-top:90px;
	width: 100%;
	overflow: hidden;
}
/* 测试图片 */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* 底部 
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
}  */

/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
    }
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}
/* About Us Container*/
.topContainer {
    display: -webkit-flex;
    display: flex;
    width: 100%;
	height:800px;
    margin-top: 20px;
	margin-bottom:100px;
	border:0px solid #636363;
	padding:1px;
    background-color: none;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
	height:800px;
    margin-top: 200px;
	margin-bottom:100px;
	border:0px solid #636363;
	padding:1px;
    background-color: none;
}
 
.flex-item {
    background-color: none;
    width: 20%;
    height: 450px;
    margin: 10px;
	flex-grow:1;
	border:0px solid #818181;
}
.intro{
	text-align: center;
	height:500px;
	padding:0px;
	border:0 px solid #716A6B;
}
.a {flex-grow:3;
height:450px;
 padding:2px;
	padding-top: 10px;
	padding-left: 100px;
	text-align: center;
border:0px solid blue;
}

.s {flex-grow:2;
	width:20%;
height:200px;
 padding:10px;
	padding-top: 20px;
	padding-left: 10px;
	text-align: center;
border:1px solid blue;
}

.mail {flex-grow:2;
height:570px;
 padding:0px;
	padding-top: 0px;
	padding-left: 20%;
	padding-right:20%;
	text-align: center;
border:0px solid blue;
}
#footer {
    width: 100%;
    height: 160px;
    border: 0px solid black;
     -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
	line-height: 1;
	background-color: #1605A9;
	color:#FFFFFF;
	clear:both;
    align-items: center;
}

footer div {
   -webkit-flex: 1; /* Safari 6.1+ */
   flex: 1;
	width:33%;
	padding-left:80px;
	padding-right: 60px;
	border:0px solid red;
	line-height:1;
	color:#ffffff;
}

/*-----------------Mail --------------------------*/


* {
  box-sizing: border-box;
}
.mail-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
	height:600px;
    margin-top: 200px;
	margin-bottom:100px;
	border:0px solid #636363;
	padding:1px;
    background-color: none;
}
input[type=text], select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 11px 12px 11px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
	margin-right:30px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 70%;
  margin-top: 6px;
}

/* 清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

/*---------图片轮播相框容器----------

.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin-top: 50px;
  margin: auto;
/*  background-color: #000000;*/
}

/* Caption text */
.text {
  color: #FA0408;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}



/*---------图片轮播相框容器----------

     * {
margin: 0;
padding: 0;
        }

ul {
list-style: none;
        }
        nav {
   width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
            overflow: hidden;
        }

	.scrollPic {
    display: block row;
    color: white;
    width:800px;
		height:300px;
		border:1px solid red;
    margin:100px auto;
    overflow: hidden;
}
ul {
 width: 200%;
 height: 100%;
 animation: picmove 5s linear infinite forwards;
        }
 @keyframes picmove {
from {
         transform: translate(0);
 }
to {
        transform: translate(-750px);
 }

        }
img {
    width: 250px;
   height: 170px;
  float: left;
  }
 ul:hover {
     animation-play-state: paused;
 }
	


/*

#frame {----------图片轮播相框容器---------  
            position: absolute; -绝对定位，方便子元素的定位  
            width: 300px;  
            height: 300px;  
            overflow: hidden;--相框作用，只显示一个图片-- 
            border-radius:5px;  
        }  -*/
        #dis {/*--绝对定位方便li图片简介的自动分布定位---*/  
            position: absolute;  
            left: -50px;  
            top: -10px;  
            opacity: 0.5;  
        }  
        #dis li {  
            display: inline-block;  
            width: 200px;  
            height: 20px;  
            margin: 0 50px;  
            float: left;  
            text-align: center;  
            color: #fff;  
            border-radius: 10px;  
            background: #000;  
        }  
        #photos img {  
            float: center;  
            width:400px;  
            height:300px;  
        }  
        #photos {   /*---设置总的图片宽度--通过位移来达到轮播效果----  */
            position: absolute;z-index:9px;  
            width: calc(300px * 4);/*---修改图片数量的话需要修改下面的动画参数*/  
        }  
  /*      .play{  
            animation: ma 10s ease-out infinite alternate;
        }  
      {/*  @keyframes ma ---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制---- 
            0%,20% {        margin-left: 0px;       }  
            25%,30% {       margin-left: -300px;    }  
            35%,50% {       margin-left: -600px;    }  
            55%,70% {       margin-left: -900px;    }  
            75%,90% {      margin-left: -1200px;   }  
			75%,100% {      margin-left: -1500px;   } 
        }  */