@charset "utf-8";
/* CSS Document */
body{
  margin: 0px; 
  font-family: 'Noto Sans TC', sans-serif,'Playfair Display', serif;
  font-size: 11pt;
}
.head{
   width:100%;
   height: auto;
   float: left;
}

/*.menu{
   width:100%;
   min-height: 25px;
   float: left;
   background-color:#0d391d; 
   padding: 15px 0 10px 0;
}*/
.menu-box{
  width:96%;
  min-height: 25px;
  margin: 0 auto;
  float: center;
  padding: 0 2% 0 2%;
}
.menu-bt{
  width:15%;
  float: left;
  color: #FFFFFF;
  font-weight: bold;
  margin: 0 5% 0 0; 
}
.menu-bt2{
  width:15%;
  float: left;
	
}
.menu-icon{
  width:30px;
  height: 36px;
  float: left;
 margin:0 5px 0 0; 
  background:url(../images/menu-icon.png)top left no-repeat;
}
.menu-icon img{
  width:100%;
  height: auto;
  float: left;
}
.menu-wd{
  float: left;
  padding: 5px 0 5px 0;
  border-bottom: 2px #dae000 solid;
}
/*
.menu-bt a:link {
 color: #FFFFFF; 
	}
.menu-bt a:hover {
  color:#dae000; 
}*/
.menu a:hover .menu-icon{
  color:#dae000; 
  background:url(../images/menu-icon-2.png)top left no-repeat;
}
.center{
   width: 100%;
   float: left;
  /* padding: 0 2% 0 2%;*/
}
.title-box-new{
  width:100%;
  min-height: 75px;
  float:left;
  background-color:#6B0906;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 28pt;
  text-align:center;
  padding: 0.5% 0 0 0;
 font-family: 'Satisfy', cursive;
	margin: 0 0 40px 0;
}
.title-box{
  width:96%;
  min-height: 65px;
  float:left;
  background-color:#333333;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 22pt;
  padding: 5px 2% 0 2%;
  background-image: url(../images/title-box-bg-1.png)
}
.title-box2{
  width:96%;
  min-height: 65px;
  float:left;
  background-color:#333333;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 22pt;
  padding: 20px 2% 0 2%;
  background-image: url(../images/title-box-bg-2.png)
}
.title-box3{
  width:96%;
  min-height: 65px;
  float:left;
  background-color:#333333;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 22pt;
  padding: 20px 2% 0 2%;
  background-image: url(../images/title-box-bg-3.png)
}
.title-box4{
  width:96%;
  min-height: 65px;
  float:left;
  background-color:#333333;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 22pt;
  padding: 20px 2% 0 2%;
  background-image: url(../images/title-box-bg-4.png)
}
.title-box5{
  width:96%;
  min-height: 65px;
  float:left;
  background-color:#333333;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 22pt;
  padding: 20px 2% 0 2%;
  background-image: url(../images/title-box-bg-5.png)
}
.title-box6{
  width:96%;
  min-height: 65px;
  float:left;
  background-color:#333333;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 22pt;
  padding: 20px 2% 0 2%;
  background-image: url(../images/title-box-bg-6.png)
}
.title-box7{
  width:96%;
  min-height: 65px;
  float:left;
  background-color:#333333;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 22pt;
  padding: 20px 2% 0 2%;
  background-image: url(../images/title-box-bg-7.png)
}
.sub-box{
  width:100%;
  float:left;
  margin:0 0 10px 0; 
}
.title-wd{
  width:98%;
  float:left;
  font-weight: 600;
  font-size: 18pt;
  margin: 10px 0 10px 0;
  color: #841026;
  padding: 0 0 0 2%;
}
.footer{
  width:100%;
  height: 100px;
  float:left;
  text-align: center;
  background-color:#D3A355;
  padding:20px 0 20px 0; 
  color:#FFFFFF; 
}
/**menu**/
.menu {
    width: 100%;
    display: flex;
    background: #000000;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
	font-weight: bold;
	font-family: 'Sansita Swashed', cursive;
	padding: 10px 0 0 0;
}

.menu li {
    float: left;
    list-style: none;
    margin: 0px 20px 0px 0px;
    font-size: 16px;
}

.menu li a {
    text-decoration: none;
    color: #FFFFFF;
    transition: color linear 0.15s;
    cursor: pointer;
}

.menu .menu-logo {
    margin: auto;
    margin-left: 0px;
    padding: 10px 10px 10px 20px;
}

.menu .menu-logo a {
    color: #fff;
}

.menu a:hover, .menu .current-active a {
    text-decoration: none;
    color: #E79C31;
}

.toggle-nav {
    display: none;
}

/*new setting*/
.box-style1{
  width:96%;	
  float:left;
 padding: 2%;
}


.title-wd-1{
  width:100%;	
  float:left;
  color: #8B0608;
  font-size: 22pt;
  font-weight: 800;
}
.title-wd-new-box{
	 width:96%;
	 float:left;
	padding: 2%;
}
.detail-wd{
  width:100%;	
  float:left;
  font-size: 13pt;
  font-weight: bold;
}
.style1-pic-box2-all{
  width:100%;	
  float:left;
  min-height:400px;
}
.style1-pic-box2-all-tp{
  width:100%;	
  float:left;
  margin: 30px 0 0 0;
}
.style1-pic-box2-all-2023{
  width:100%;	
  float:left;
  margin: 30px 0 0 0;
}
/*index*/

.image.fit {
	display: block;
	margin: 0 0 2rem 0;
	width: 100%;
}

.image.fit img {
	width: 100%;
}
	.wrapper {
		padding: 6rem 0 4rem 0 ;
		position: relative;
		margin: 0;
	}
	.box {
		margin-bottom: 2rem;
		background-color: #FFFFFF;
		width:100%;
	}

		.content {
	width:96%;
	float:left;
	padding:2%;
		}
		.content2 {
	width:60%;
	float:center;
	margin: 0 20% 0 20%;
		}
	.index-title {
		text-align: center;
		font-size: 35pt;
		font-weight:bold;
        color: #B71013;
	}
	.index-wd-full {
		font-size: 13pt;
		font-weight:bold;
		color: #000000;
		width:96%;
		word-wrap:break-word;
		float:left;
		padding: 2%;
	}
	.index-wd-full-tp {
		font-size: 13pt;
		font-weight:bold;
		background-color: #ebd5e9;
		color: #000000;
		width:94%;
		word-wrap:break-word;
		float:left;
		padding: 3%;
		margin: 20px 0 0 0;
		border-radius:25px;
	}
	.index-tp-wd-box {
		width:46%;
		float:left;
		padding: 2%;
	}
	.index-tp-pic-box {
		width:40%;
		float:left;
		border: #d6bbd3 10px solid ;
	}
	.index-tp-pic-box img{
		width:100%;
		height: auto;
		float:left;
	}
	.index-title-new {
		text-align: center;
		font-size: 35pt;
		font-weight:bold;
        color: #343f7e;
		float:left;
	}
	.index-title-new-full {
		width:96%;
		text-align: left;
		font-size: 35pt;
		font-weight:bold;
        color: #343f7e;
		float:left;
		padding: 0 2% 0 2%;
	}
	.index-wd-new {
		font-size: 13pt;
		font-weight:bold;
		color: #000000;
		width:100%;
		word-wrap:break-word;
		margin: 10px 0 0 0;
		float:left;
	}
	.wd-stu {
		font-size: 13pt;
		font-weight:bold;
		color: #000000;
		width:78%;
		word-wrap:break-word;
		margin: 10px 0 0 0;
		float:left;
		padding: 0 0 0 2%;
	}
.stu-photo {
	width:20%;
	float:left;
	border: #f4a15f 10px solid ;
	margin: 10px 0 0 0;
}
.stu-photo img{
	width:100%;
	height: auto;
	float:left;
}
.color-box{
  width:90%;	
  float:left;
  padding: 5%;
}
	.tbox1 .button
	{
		background: #FFFFFF;
		color: #000000;
		border-radius:25px;
		font-weight: bold;
	}

	.tbox2 .button
	{
		background: #FFFFFF;
		color: #000000;
		border-radius:25px;
		font-weight: bold;
	}

	.tbox3 .button
	{
		background: #FFFFFF;
		color: #000000;
		border-radius:25px;
		font-weight: bold;
	}
	.tbox4 .button
	{
		background: #FFFFFF;
		color: #000000;
		border-radius:25px;
		font-weight: bold;
	}

	
.title h2
	{
		font-size: 1.60em;
		color: #FFF;
	}
	.button
	{
		display: inline-block;
		margin-top: 2em;
		padding: 0.8em 2em;
		background: #E85D4B;
		line-height: 1.8em;
		letter-spacing: 1px;
		text-decoration: none;
		font-size: 1em;
		color: #FFF;
	}
.new-video-box{
	width:100%;
	margin: 50px 0 0 0;
    float:left;
	overflow: hidden;
}
.new-video-box iframe{
width: 100%;
height: 100%;
}
.new-video-box2 { 
	position: relative; padding-bottom:60%; height: 0; overflow: hidden; max-width: 100%; 
} 
.new-video-box2 iframe, .new-video-box2 object, .new-video-box2 embed { 
	position: absolute; top: 0; left: 0; width: 100%; height:100%;
}

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {

position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;}

.image fit{
  width:100%;	
  float:left;
}
.image fit img{
  width:100%;	
  float:left;
}
.wdwd-box{
  width:80%;	
  float:left;
  background-color:#EDE8E9;
  padding: 2% 10% 2% 10%;
}
.video-wd{
	text-align: center;
	font-size: 22pt;
	font-weight:bold;
    color:#164270;
	margin: 5px 0 0 0;
	width:100%;
}
.video-wd2{
	font-size: 22pt;
	font-weight:bold;
    color:#164270;
	margin: 5px 0 0 0;
	width:100%;
}
.banner{
   width:100%;
   height: auto;
   float: left;
}
.banner img{
   width:100%;
   height: 100%;
   float: left;
}
.ad-banner{
   width:100%;
   float: left;
   margin: 10px 0 10px 0;
   text-align : center ;
}

.top-bar-news{
	width: 98%;
	min-height: 32px;
	margin: 15px 0 0 0;
	float:left;	
	border-top: #000000 1px solid;
	border-left: #000000 1px solid;
	border-right: #000000 1px solid;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	background-color:#5399b3;
}
.top-bar-02-fornews{
	width:100%;
	line-height: 31px;
	float:left;	
	font-size: 15pt;
	font-weight:bold;
}
.news-wd-01{
	width:25%;	
	float:left;	
	color: #163041;
	text-align: center;
}
.news-wd-02{
	width:42%;	
	float:left;	
	color: #6a3906;
}
.news-wd-03{
	width:33%;	
	float:left;	
}
.news-wd-01-2{
	width:25%;	
	float:left;	
	color: #FFFFFF;
	text-align: center;
}
.news-wd-02-2{
	width:42%;	
	float:left;	
	color: #FFFFFF;
}
.news-wd-03-2{
	width:33%;	
	float:left;	
	color: #FFFFFF;
}
.news-wd-box{
	width: 98%;
	float:left;	
	border-left: #000000 1px solid;
	border-right: #000000 1px solid;
	background-color: #F0F0F0;
}	
.air-center-type1{
	width:100%;
	min-height: 55px;
	float:left;	
}	
.news-bar-02{
	width:100%;
	float:left;	
	border-bottom: #000000  solid 1px;
	font-weight: bold;
	font-size: 13pt;
    margin: auto;
}
.aqi-down-bar{
	width:98%;
	height: 31px;
	float:left;	
	border-left: #000000 1px solid;
	border-right: #000000 1px solid;
	border-bottom: #000000 1px solid;
	border-bottom-left-radius:15px;
	border-bottom-right-radius:15px;
	background-color: #bcbcbc;
	margin: 0 0 30px 0;
}
.aqi-down-02{
	width:96%;
	height: 30px;
	float:left;	
	color: #000000;
	font-size: 11.5pt;
	font-weight:bold;
	padding: 2px 2% 0 2%;
}
.lineline{
	width:100%;
	height: 1px;
	border-bottom: #d6bbd3 1px solid;
	float:left;	
	margin: 15px 0 15px 0;
}
.word-100{
	width:100%;
	float:left;	
}
.bt-more{
	width:100%;
	float:center;	
	margin: 0;
}
.bt-more2{
	width:65%;
	float:center;	
	padding: 0 5% 0 30%;
}
@media screen and (min-width: 1366px) {

.right-box{
  width:100%;	
  float:left;
}	
.photo-box{
  width:20%;
  float:left;
  border: 2px solid #CCCCCC;
  padding:0.3%; 
  margin: 0 2% 0 2%;
  background-color:#FFFFFF; 
}	
.photo-box img{
  width:100%;
  float:left;
}
.left-box{
  width:100%;	
  float:left;
}
.left-wd{
  width:96%;
  float:left;
  font-weight: bold;
  font-size: 14pt;
  margin: 0 0 10px 0;
  padding: 0 2% 0 2%;
}
/*new setting*/
.style1-wd-box{
  width:50%;	
  float:left;
  display: block;
  background: #FFF;
  text-align:left;
  position: relative;
  min-height:200px;
}
.style1-wd-all{
  width:90%;	
  float:left;
  padding: 5%;
}
.style1-pic-box{
  width:50%;	
  float:left;
  min-height:200px;
}
.style1-pic-box img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.style1-pic-box3{
  width:33.3%;	
  float:left;
  min-height:200px;
}
.style1-pic-box3 img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.style1-pic-box2{
  width:30%;	
  float:left;
  min-height:200px;
  margin: 0 3% 0 0;
}
.style1-pic-box2 img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.tbox1{
  width:21%;	
  float:left;	
  background: #8191c3;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
  height: 230px;
}
.tbox2{
  width:21%;	
  float:left;	
  background: #000000;
  text-align: center;
  padding: 2%;
 color: #FFFFFF;
	height: 230px;
}
.tbox3{
  width:21%;	
  float:left;
  background: #4863ba;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
	height: 230px;
}
.tbox4{
  width:21%;	
  float:left;	
  background:#710416;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
	height: 230px;
}
.banner2{
   width:100%;
   height: auto;
   float: left;
   display: none;
}
.banner2 img{
   width:100%;
   height: 100%;
   float: left;
}
.banner3{
   width:100%;
   height: auto;
   float: left;
   margin: 0 0 50px 0;
}
.banner3 img{
   width:100%;
   height: 100%;
   float: left;
}
.work-form{
   width:100%;
   float: left;
	text-align : center ;

}
}
@media only screen and (min-width: 751px) and (max-width: 1365px) {
.left-box{
  width:100%;	
  float:left;
}
.right-box{
  width:50%;	
  float:left;
}
.photo-box{
  width:42%;
  float:left;
  border: 2px solid #CCCCCC;
  padding:0.7%; 
  margin: 0 2% 10px 0;
  background-color:#FFFFFF; 
}
.photo-box img{
  width:100%;
  float:left;
}
.left-wd{
  width:96%;
  float:left;
  font-weight: bold;
  font-size: 14pt;
  margin: 0 0 10px 0;
  padding: 0 2% 0 2%;
}
/*new setting*/
.style1-wd-box{
  width:90%;	
  float:left;
  display: block;
  background: #FFF;
  padding: 5%;
  text-align:left;
  position: relative;
  min-height:200px;
}
.style1-pic-box{
  width:100%;	
  float:left;
background-color: #000000;
}
.style1-pic-box img {
 width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.style1-pic-box2{
  width:30%;	
  float:left;
  min-height:200px;
  margin: 0 3% 0 0;
}
.style1-pic-box2 img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
			.wrapper > .inner {
				width: 75rem;
			}
.tbox1{
  width:21%;	
  float:left;	
  background: #8191c3;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
  height: 250px;
}
.tbox2{
  width:21%;	
  float:left;	
  background: #000000;
  text-align: center;
  padding: 2%;
 color: #FFFFFF;
	 min-height: 250px;
}
.tbox3{
  width:21%;	
  float:left;
  background: #4863ba;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
	 min-height: 250px;
}
.tbox4{
  width:21%;	
  float:left;	
  background:#710416;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
	 min-height: 250px;
}
.banner2{
   width:100%;
   height: auto;
   float: left;
   display: none;
}
.banner2 img{
   width:100%;
   height: 100%;
   float: left;
}
.banner3{
   width:100%;
   height: auto;
   float: left;
	margin: 0 0 50px 0;
}
.banner3 img{
   width:100%;
   height: 100%;
   float: left;
}
.work-form{
   width:90%;
   float: left;
	text-align : center ;
   padding: 0 5% 0 5%
}
.title-box-new{
  width:100%;
  min-height: 75px;
  float:left;
  background-color:#6B0906;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 28pt;
  text-align:center;
  padding: 0.5% 0 0 0;
 font-family: 'Satisfy', cursive;
	margin: 0 0 40px 0;
}
.style1-pic-box3{
  width:33.3%;	
  float:left;
  min-height:200px;
}
.style1-pic-box3 img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
}
@media screen and (max-width: 750px){
.left-box{
  width:100%;	
  float:left;
}
.right-box{
  width:100%;	
  float:left;
}	
.photo-box{
  width:98%;
  float:left;
  border: 2px solid #CCCCCC;
  padding:0.7%; 
  margin: 0 0 2% 0;
  background-color:#FFFFFF; 
}
.photo-box img{
  width:100%;
  float:left;
}	
.left-wd{
  width:96%;
  float:left;
  font-weight: bold;
  font-size: 12pt;
  margin: 0 0 10px 0;
  padding: 0 2% 0 2%;
}
/**menu**/
  .menu {
	    width: 100%;
        position: relative;
        display: inline-block;
    }
    .toggle-nav {
        position: absolute;
        left: 4%;
        color: #ffffff;
        text-decoration: none;
        line-height: 40px;
    }
   /* .menu .menu-logo {
        position: relative;
        left: 40%;
    }*/
    .menu ul.active {
        display: none;
    }
    .menu ul {
        left: 0px;
        padding: 10px 25px;
        margin-top: -5px;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
        border-radius: 0px 0px 3px 3px;
        background: #272626;
    }
    .menu li {
        margin: 10px 0px 25px 0px;
        float: none;
        display: block;
    }
    .menu a {
        display: block;
    }
/*new setting*/
.style1-wd-box{
  width:90%;	
  float:left;
  display: block;
  background: #FFF;
  text-align: left;
  position: relative;
  padding: 5%;
  margin: 0 auto;
}
.style1-pic-box{
  width:100%;	
  float:left;
  min-height:200px;
}
.style1-pic-box img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
.style1-pic-box2{
  width:100%;	
  float:left;
  min-height:200px;
  margin: 0 0 10px 0;
}
.style1-pic-box2 img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
	.box .content {
	width:96%;
	float:left;
	padding:2%;
			}
	.wrapper > .inner {
				width: 90%;
			}
	.inner .box{
  width:100%;	
  float:left;	
	}
.tbox1{
  width:96%;	
  float:left;	
  background: #8191c3;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
  height: 230px;
}
.tbox2{
  width:96%;
  float:left;	
  background: #000000;
  text-align: center;
  padding: 2%;
 color: #FFFFFF;
	height: 230px;
}
.tbox3{
  width:96%;
  float:left;
  background: #4863ba;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
	height: 230px;
}
.tbox4{
  width:96%;
  float:left;	
  background:#710416;
  text-align: center;
  padding: 2%;
  color: #FFFFFF;
	height: 230px;
}
.banner2{
   width:100%;
   height: auto;
   float: left;
   margin: 0 0 50px 0;
}
.banner2 img{
   width:100%;
   height: 100%;
   float: left;
}
.banner3{
   width:100%;
   height: auto;
   float: left;
   display: none;
}
.banner3 img{
   width:100%;
   height: 100%;
   float: left;
}
.work-form{
   width:100%;
   float: left;
	text-align : center ;
}
.title-box-new{
  width:100%;
  min-height: 50px;
  float:left;
  background-color:#6B0906;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 20pt;
  text-align:center;
  padding: 0.5% 0 0 0;
 font-family: 'Satisfy', cursive;
	margin: 0 0 40px 0;
}
	.index-tp-wd-box {
		width:96%;
		float:left;
		padding: 2%;
	}
	.index-tp-pic-box {
		width:90%;
		float:left;
		border: #d6bbd3 10px solid ;
	}
	.index-tp-pic-box img{
		width:100%;
		height: auto;
		float:left;
	}
	.index-title-new {
		text-align: center;
		font-size: 35pt;
		font-weight:bold;
        color: #343f7e;
	}
	.index-wd-new {
		font-size: 13pt;
		font-weight:bold;
		color: #000000;
		width:100%;
		word-wrap:break-word;
		margin: 10px 0 0 0;
	}
	.wd-stu {
		font-size: 13pt;
		font-weight:bold;
		color: #000000;
		width:96%;
		word-wrap:break-word;
		margin: 10px 0 0 0;
		float:left;
		padding: 2%;
	}
.stu-photo {
	width:90%;
	float:left;
	border: #f4a15f 10px solid ;
	margin: 10px 0 0 0;
}
.style1-pic-box3{
  width:100%;	
  float:left;
  min-height:200px;
}
.style1-pic-box3 img {

 max-width: 100%;
 height: auto;
 display: block;
 margin: 0;
 position: relative;
 overflow: hidden;
 background-color: #ffffff;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}
}