﻿@charset "UTF-8";
* {
    font-family: "Microsoft JhengHei","Heiti TC" !important;
}

a{
	text-decoration: none;
}

body{

	position: relative;
    background-color:burlywood;
    /*background-color:darkkhaki;*/
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}


/*首頁和簡報頁連結的設定*/

.link-wrap{
	position: relative;
	width: 960px;
	margin: 0 auto;
    z-index: 99;
}

.link-block{
	position: absolute;
	right: 0px;
	top: 30px;
	padding: 5px;
	background-color: #FFF;
}

.link-block a{
	display: inline-block;
	padding: 3px;
	color:#3e1f3f;
}

.link-block a:first-child{
	border-right:1px solid #3e1f3f;
	padding-right: 5px;
}

.link-block a.active{	
	color:#d4145a;
}


/*首頁和簡報頁連結的設定*/



/*最上層slider的設定*/
/*body{
	font-family:Arial, sans-serif;
	-webkit-font-smoothing:antialiased;
	background:#A8DCDB;
	color:#715252;
}*/

#wrapper{

	width:1000px;
	margin:0px auto 0px auto;/*上右下左*/
}

#slide{
	position:relative;
	overflow:hidden;
	height:250px;
}

#slide ul{
	position:absolute;
	width:3000px;
}

#slide li{
	float:left;
	width:1000px;
	list-style-type:none;
}

button{
	opacity:.6;
	transition:opacity .2s;
	border:none;
	background:none;
}

button:focus{
	outline:none;
}

button:hover{
	opacity:1;
}

#prevBtn{
	position:absolute;
	top:175px;
	left:20px;
}

#nextBtn{
	position:absolute;
	top:175px;
	right:20px;
}

/*p{
	margin:50px 0;
	line-height:2em;
}*/
/*最上層slider的設定*/

/*第一層選單*/
#menu{
    width: 1000px;
    margin:0px auto auto auto;/*上右下左*/
	/*background-color: #3e1f3f;*/
    background-color: #0094ff;
}

#menu ul{
	width: 970px;
	margin: 0 auto;
	}

#menu ul li{
	width: 20%;
	float: left;
}

#menu ul li a{
	display: block;
	width: 100%;
	line-height: 40px;
	color:#FFF;
	text-align: center;
}

#menu ul li a.active{
	/*background-color: #76205c;*/
    background-color:#0026ff;
}


#cmenu{
    width: 1000px;
    margin:0px auto auto auto;/*上右下左*/
	/*background-color: #3e1f3f;*/
    background-color: #0094ff;
}

#cmenu ul{
	width: 980px;
	margin: 0 auto;
	}

#cmenu ul li{
	width: 14.285%;
	float: left;
}

#cmenu ul li a{
	display: block;
	width: 100%;
	line-height: 25px;
	color:#FFF;
	text-align: center;
}

#cmenu ul li a.active{
	/*background-color: #76205c;*/
    background-color:#0026ff;
}




/*第一層選單*/

/*左邊第二層選單*/
#content{
	width: 1000px;
	margin: 0 auto 0 auto;
	/*background-image: url(../images/bg.png);
	background-repeat: repeat-y;*/
    background-color: #67b4bf;
	/*background-position: left 0 top 200px;
	padding-bottom:20px;*/ 
}


.left-menu{
	width: 180px;
    margin: 20px auto 0 auto;
	float: left;
	background-color: #ff9798;	
}

.left-menu img{
	position: relative;
	top: -10px;
}

.left-menu a{
	display: block;
	border-bottom: 1px solid #FFF;
	color:#340f07;
	line-height: 20px;
	width: 100%;
	text-align: center;
}

.left-menu a.active{
	color:#FFF;
	background-color: #e73247;
}


.left-menu li:last-child a{
	border-bottom: none;
}

.right-content{
	margin-left: 180px;
	background-color: #FFF;
	padding: 20px;
	line-height: 175%;
	margin-bottom: 20px;	
}

.narr_right-content{
    margin-left: 0px;
	background-color: #FFF;
	padding: 20px;
	line-height: 175%;
	margin-bottom: 20px;
}

/*左邊第二層選單*/


/*右邊第三層選單*/
.tab{
	border-bottom: 1px solid #3e1f3f;
	margin-bottom: 20px;
}

.tab a{
	text-align:center;
	display: inline-block;
	border:1px solid #3e1f3f;
	padding:3px 0px; 
	color:#3e1f3f;
	margin-bottom: -1px;
}

.tab a.active{
	background-color: #3e1f3f;
	color:#FFF;
}

/*右邊第三層選單*/

/*右邊內容*/
.bread {
    color: #67b4bf;
    font-size: 14px;
    float:right;
    position: relative;
    right: 10px;
    top: 5px;
}


.title{
	color:#ff9798;
	font-size: 18px;
	margin-bottom: 10px;
}

.title_last{
    border-bottom: 1px dashed #006837;
    margin-bottom: 20px;
}
  
.bibliography{
    color: #ff9798;
    font: bold;
	font-size: 18px;
	margin-bottom: 10px;
}

.photo_girl {
    float:left;
    top: -220px;
    position: relative;
	width: 200px;
	margin: 0 auto;
    z-index: 99;
}

.photo_boy{
    float:right;
    top: -250px;
    position: relative;
	width: 150px;
	margin: 0 auto;
    z-index: 99;
}

.footer{
    height:30px;
    width: 1000px;
    text-align: center;
    background-color: #67b4bf;
    /*background-color: #67b4bf;
  color: #333;
  text-align: center;
  padding: 20px 0;
  position: relative;
  top: -230px;
  left: -180px;*/
}


.nav_footer{
	text-align: center;
}

.nav_title{
    background:  #e1e64d;
  border-radius: 20px;
  color: #006837;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}

.nav2_title{
    background:  #ff9798;
  border-radius: 20px;
  color: #0094ff;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
}
/*右邊內容*/

.table-a {
  border-radius: 20px;
  border:1px solid #999;
  color: #4d4d4d;
  line-height: 200%;
  font-size: 16px;   
}
.table-a th{
  background-color:#fcee21;
  border:1px solid #999;
}

.table-a td{  
  border:1px solid #999;
  padding: 10px;
}ol{
  list-style-type:decimal;
  padding-left: 15px;
}

.h-center{
  text-align: center;
  vertical-align: middle;
}.picdiv{
	width: 	300px;
	margin-right: 5px;
	display:inline-block;
	border: solid 8px #ffffff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
}

.personalpics{

	width: 100%;
}

body.travel-poster-page {
    background:
        radial-gradient(circle at top, rgba(254, 247, 225, 0.95) 0%, rgba(254, 247, 225, 0) 34%),
        linear-gradient(180deg, #f4e5c8 0%, #ddb26a 54%, #b77333 100%);
    color: #2d3741;
}

body.travel-poster-page #wrapper,
body.travel-poster-page #cmenu,
body.travel-poster-page #content {
    position: relative;
    z-index: 1;
}

body.travel-poster-page #wrapper {
    margin-top: 24px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 250, 240, 0.82), rgba(248, 235, 210, 0.72));
    border: 1px solid rgba(255, 249, 239, 0.7);
    border-radius: 30px 30px 0 0;
    box-shadow: 0 24px 50px rgba(87, 65, 33, 0.22);
}

body.travel-poster-page #slide {
    border-radius: 22px;
}

body.travel-poster-page #slide img {
    border-radius: 22px;
    filter: saturate(1.05) contrast(1.02);
}

body.travel-poster-page #cmenu {
    margin-top: 14px;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(90deg, #c47d2c 0%, #0f4f84 100%);
    box-shadow: 0 14px 30px rgba(80, 54, 22, 0.18);
}

body.travel-poster-page #cmenu ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

body.travel-poster-page #cmenu ul li {
    float: none;
    display: flex;
    align-items: stretch;
}

body.travel-poster-page #cmenu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 8px 10px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: 0.02em;
}

body.travel-poster-page #cmenu ul li a.active {
    background: rgba(255, 245, 221, 0.22);
}

body.travel-poster-page #content {
    margin-top: 18px;
    padding: 24px 24px 0;
    background: linear-gradient(180deg, rgba(255, 248, 234, 0.78), rgba(238, 213, 164, 0.78));
    border-radius: 0 0 32px 32px;
    box-shadow: 0 24px 50px rgba(87, 65, 33, 0.22);
}

body.travel-poster-page .left-menu {
    margin-top: 0;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, #f1c98b 0%, #d8914c 100%);
    box-shadow: 0 16px 30px rgba(98, 67, 29, 0.16);
}

body.travel-poster-page .left-menu a {
    padding: 16px 14px;
    line-height: 1.45;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

body.travel-poster-page .left-menu a.active {
    background: linear-gradient(135deg, #1db0ec 0%, #0a65b6 100%);
    color: #fff;
}

body.travel-poster-page .right-content {
    margin-left: 210px;
    padding: 28px 30px 34px;
    background: linear-gradient(180deg, rgba(255, 252, 244, 0.98), rgba(247, 237, 216, 0.98));
    border-radius: 28px;
    box-shadow: 0 18px 40px rgba(96, 67, 32, 0.14);
}

body.travel-poster-page .bread {
    float: none;
    display: inline-block;
    top: 0;
    right: 0;
    margin-bottom: 12px;
    padding: 8px 14px;
    background: rgba(15, 79, 132, 0.08);
    border-radius: 999px;
    color: #7a5127;
}

body.travel-poster-page .nav_title {
    margin-bottom: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f1cd62 0%, #f7df8b 100%);
    color: #0f4f84;
    box-shadow: inset 0 -2px 0 rgba(173, 120, 31, 0.2);
}

body.travel-poster-page .title {
    color: #9a591a;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
}

body.travel-poster-page .title_last,
body.travel-poster-page .content-section {
    padding: 24px 26px;
    margin-bottom: 22px;
    border: 1px solid rgba(196, 125, 44, 0.18);
    border-radius: 24px;
    background: rgba(255, 253, 248, 0.78);
    box-shadow: 0 12px 28px rgba(96, 67, 32, 0.08);
    border-bottom: 1px solid rgba(196, 125, 44, 0.18);
}

body.travel-poster-page .nav2_title {
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #d8914c 0%, #f4ce81 100%);
    color: #0f4f84;
    float: none;
}

body.travel-poster-page .picdiv {
    border: solid 10px rgba(255, 249, 239, 0.95);
    box-shadow: 0 14px 26px rgba(96, 67, 32, 0.16);
    border-radius: 18px;
    background: #fff;
}

body.travel-poster-page .photo_girl {
    top: -160px;
    left: -10px;
}

body.travel-poster-page .footer {
    clear: both;
    height: auto;
    padding: 16px 20px 22px;
    border-radius: 18px 18px 0 0;
    background: rgba(15, 79, 132, 0.12);
    color: #75491c;
    font-weight: 700;
}

@media (max-width: 1024px) {
    body.travel-poster-page #wrapper,
    body.travel-poster-page #cmenu,
    body.travel-poster-page #content {
        width: calc(100% - 32px);
    }

    body.travel-poster-page #slide,
    body.travel-poster-page #slide li,
    body.travel-poster-page #slide li img {
        width: 100% !important;
        height: auto !important;
    }

    body.travel-poster-page #slide ul {
        width: 400% !important;
    }

    body.travel-poster-page .right-content {
        margin-left: 0;
        margin-top: 20px;
    }

    body.travel-poster-page .left-menu {
        width: 100%;
        float: none;
        display: flex;
        flex-wrap: wrap;
    }

    body.travel-poster-page .left-menu li {
        width: 50%;
    }

    body.travel-poster-page .photo_girl {
        display: none;
    }
}

@media (max-width: 640px) {
    body.travel-poster-page #wrapper,
    body.travel-poster-page #cmenu,
    body.travel-poster-page #content {
        width: calc(100% - 20px);
    }

    body.travel-poster-page #content {
        padding: 16px 16px 0;
    }

    body.travel-poster-page .right-content {
        padding: 20px 18px 24px;
    }

    body.travel-poster-page .left-menu li {
        width: 100%;
    }

    body.travel-poster-page .title {
        font-size: 20px;
    }

    body.travel-poster-page .title_last,
    body.travel-poster-page .content-section {
        padding: 18px;
    }
}
