@charset 'utf-8';

body { background: #f1ebe9}

a, a.btn {
  text-decoration: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
/*==========================================
Header
===========================================*/
   .header-top {
	   background-color: #fff;
	   min-height: 40px;
      padding: 0;
}


.header-top .header-top-right {
    text-align: right;
}
	
.link-list {
	  display: flex;
    float: right;
    font-size: 0.9em;
	background-color:#ceae7c;
	    border-radius:0px 0px 15px 15px ;
	line-height: 35px
}

.link-item{
	left: 0;
	list-style: none;
	list-style-type: none;
	padding: 0;
	margin: 0
	}


.link-item>li {
	 float: left;
        position: relative;
    display: block;
    vertical-align: middle;
    padding: 0 15px;
    border-right:1px #fff solid;
}


.link-item>li:last-child {border-right: none}

.link-item>li span {
    color:#fff;
     display: inline-block;
}

.link-item>li i{
    color:#fff;
    display: inline-block;
	float:left;
	margin-right:0.25em;
	padding:0 0.375em
}
.link-item>li span:hover {
    color:#6a3906;
}


.link-item>li a {
    color:#fff;
	font-family: 微軟正黑體,Microsoft JhengHei,MingLiU,'Open Sans', sans-serif;
}


 
 .link-item>li a:hover, .link-item>li a:focus {
     color:#6a3906;
    text-decoration:none
}


.u{
	display: inline-block;
	font-size: 0.9em;
    color:#fff;
}
 .u a{
    color:#fff;

}
.u a:hover{ color:#6a3906;}

@media screen and (max-width:811px) {
.header-top { display: none}
}


/*==========================================
banner
===========================================*/

.imgArea{
	    margin-bottom: -100px;
}

@media screen and (max-width:1200px) {
	.imgArea{  margin-bottom: -80px;}
}

@media screen and (max-width:911px) {
	.imgArea{  margin-bottom: -30px;}
}

@media screen and (max-width:811px) {
	.imgArea{ display: none}
}



/*==========================================

 menu
===========================================*/

.headerContainer {
  position:relative;
  z-index: 100;
  width:100%;
	max-width: 100%;
  behavior: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20170511170326/https://web.arte.gov.tw/aecp/common/css/PIE.htc);
	margin: auto;

}

.headerTopicContainer {
  position: relative;
  background: #fff;
		max-width:100%;
    width: 100%;
    min-height: auto;
	margin: 0 auto;

}


/*==========================================

 menu inner
===========================================*/
.menuInner {
	background-color:#a9714b;
	border-radius:20px 20px 0px 0px;
}




/*.site-Menu
      position: relative;
    /* right: 0; 
    /* top: 0; 
    overflow: hidden;
    z-index: 10;
    margin: auto;
    text-align: center;
	max-width: 100%;
	    margin: 0 auto;
    padding-left: 0;
    flex-direction: row;
    display: block;
    align-items: center;
*/

.site-Menu {
    position: relative;
    /* right: 0; */
    /* top: 0; */
     /*overflow: hidden; */
    z-index: 1;
    margin: auto;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 0;
    flex-direction: row;
    display: block;
    align-items: center;
	min-height: 50px
 
}
/*--2020.01.06---*/
    .grb_menu {
        list-style: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
        left: 0;
		    display: inline-block;
      vertical-align: middle;
		display: block

    }

/*----20210106----*/
    .site-Menu li {
        display: inline-block;
        margin: 1px 0 0 1px;
        width: 11em;
        text-align: center;
        letter-spacing: 1px;
        cursor: pointer;
        font-family: "微軟正黑體";
        font-style: normal;
    }




    .site-Menu ul > li + li:before {
        content: '';
        height: 30px;
        /* border-left: 1px solid #fff; */
        /* margin-top: 0; */
        position: relative;
        left: 0px;
        top: 10px;
        display: block;
        /* margin: auto; */
        width: 1px;
        background: #fff;
        height: 30px;
        float: left;
        transform: rotate(25deg);
    }

/*---110.01.06-----*/
    .site-Menu a {
        display: block;
        color: #fff;
        font-size: 1.05em;
        line-height: 1.25;
        text-align: center;
        padding: 15px 20px;
    }
       
   .site-Menu a:hover {
            color: #fbed79;
            text-decoration: none
        }

/*---110.01.06----*/
@media (max-width:1200px) {
	.site-Menu a {padding: 15px 10px; font-size:0.938em;}
}


 

@media screen and (max-width:811px) {
.headerTopicContainer {display: none}
	.headerContainer{display: none}
	.site-Menu{ display:  none}
	.menuInner { display: none}
}

.Headnav ul li > .subs li a::after{
	background-color: transparent !important
}

/*-----------------------------
sub-nav menu 下拉選單 110.01.06
------------------------------- */

.subs {

    text-align:center;
    box-sizing: border-box;
    background: rgba(255, 255,255, 0.88) !important;
     width:200px;   
	font-size: 100%;    
	list-style: none; 	
    margin: 0;
	 padding: 0;
    height: auto;	
	transition :transform  .5s;
	  position: absolute;
    display: none;
    z-index: 10000;
    width:180px;/*--請適選單文字調整大小---*/
  
       -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}   




.subs li {
     list-style-type: none;
        margin: 0;
    position: relative;
    list-style: none;
    cursor: pointer;
    border: 1px solid #ededed;
	border-right: 1px solid #ededed;
    word-break: normal;
    float: none;
    /*margin: 0;*/
    letter-spacing: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	display: block;  
	width: 100%;
    transition: .2s;
    padding: 8px 8px 8px 10px;
    color: #333;
    background-color: #fff;
}

.subs li a {   
	white-space: normal;
    text-decoration: none;
    position: relative;
    font-size: 0.938em;
    text-align:center;
    height: auto;
       line-height:1.5;
    cursor: pointer;
      padding:8px 5px;
    display: block;
	clear: both;
	color: #111 !important

}


 .subs li a:hover {
	background:#ceae7c;
	color:#FFF;
	 text-decoration: none;
    height: 100%;
}


.subs  li:before {

    display: none !important;

}



/*==========================================

 hamburger-menu
===========================================*/

.nav {display: none}



.m_menu .m_titlogo { display:none}


.hideBox{
	display:none;
    left:-100%
}
 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   
   #手機版menu
   
   ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width:811px) {
 

    /*-------phone MENU-------*/

    .m_menu {
        position: fixed;
        top: 0 ;
        left: 0;
        z-index: 999;
        display: block;
       width: 100%;    
        text-align: center;
        height: 172px;
        background-color: #fff;
        overflow: visible;
		border-bottom: #ccc solid 1px
    }



    .controlBox {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        position: relative;
        z-index: 10;
        -webkit-transition: all .4s ease;
        -o-transition: all .4s ease;
        transition: all .4s ease;
    }

        .m_menu .m_titlogo {
			z-index: 5;
            display:flex;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            text-align: center;
            margin: 0 auto;
            max-width: 100%;
            width: 100%;
            float: left;
            line-height: 100%;
			overflow: hidden;
			height: 170px
           }

    /*-----------------------
	mobile logo
	--------------------*/
    .siteLogo {
        margin-right: auto;
        margin-left: auto; 
		display:block;
    position:absolute;
    right: 5px;
    top: 0;
      text-align: center;
    align-items: center;
		
		height: 100%;
    width: 98%;
    max-width:98%;
    flex: 0 0 98%;
    }


.mainVisualBoxBlock {
    padding-top: 27%;
    display: block;
    overflow: hidden;
    position: relative;
    left: 80px;
    top: 0;
    width: 80%;
    margin: 0;
}
	
	.mainVisualBoxBlockImg {
    display: block;
    height: auto;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    width: 100%;
    max-width: 100%;
}
	
	
 


    /*-----------------------
	humburger  109.01.04
	--------------------*/
  .hamburger {
       cursor: pointer;
        position: absolute;
        top:40px;
        left: 15px;
        width:50px;
        height: 50px;
	  background-color:#a9714b
      
	   
}

    .hamburger span {
        background: #fff;
        display: block;
        position: absolute;
        height: 2px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
        -moz-transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
        -o-transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
        transition: all .25s cubic-bezier(0.22, 0.61, 0.36, 1);
        opacity: 1;
        width: 80%;
        margin-left: 5px;
    }
	
.hamburger:hover{ background-color:#00a4bc}
.hamburger:active{ background-color:#00a4bc;}


/*------ Hamburger 3 ------*/
.hamburger3 span {
  left: 0;
}
.hamburger3 span:nth-child(1) {
  top: 15px;
}
.hamburger3 span:nth-child(2), .hamburger3 span:nth-child(3) {
  top:25px;
}
.hamburger3 span:nth-child(4) {
  top: 35px;
}
.hamburger3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.hamburger3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hamburger3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.hamburger3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
	
	

			
  /*-------------------
moible選單字
-------------------------*/

    .hideBox {
        display: block;
        position: fixed;
        left: -100%;
        top: 172px;
        bottom: 0;
        z-index: 11;
        width:60%;
        padding: 15px;
        overflow-y: auto;
        background: rgba(255, 255,255, 0.9);
    }


    .nav {
        display: block;
        list-style: none;
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: relative;
		top: 15px
    }

        .nav li {
            display: block;
            position: relative;
            padding: 15px;
		  
        }

   .nav li a {
                font-size: 1.05em;
                font-weight: 600;
                color: #000;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                padding:15px 8px;
                text-align: center;
            }

     .nav li a:hover {
		             color:#00a4bc;
                    text-decoration: none;
                }

    /* ---------mobile btn --------------*/
	.navZone{	
		display: table;
		text-align: center;      
		position: relative;
		margin:30px auto 0 auto
	}
	.navZone ul{
		 padding: 0;
		margin: 0;
		list-style: none;
	list-style-type: none
	}
	
    .navZone ul li{
        border: #fff solid 0.125em;
        font-size: 0.875em;
        letter-spacing: 0.063em;
        font-weight: 600;
        padding: 5px 12px;
        color: #ffffff;
        text-align: center;
        border-radius: 2em;
        background:#a9714b;
        box-shadow: 0 0.063em .313em rgba(0,0,0,.2);
        float: left;
        margin-right: 5px;
		margin-bottom: 10px
    }
	.navZone ul li:hover{ background-color:##fbed79  }
	
	.navZone ul li a{text-decoration: none;color: #fff}

	 .navZone ul li a:hover {
            color: #fbed79;
            text-decoration: none
        }
	
	/*---2st----*/
	.accordion-toggle, .accordion-content {
    cursor: pointer;
    font-size: 1em;
    position: relative;
    letter-spacing: 1px;
}
	.menu-submenu{
		list-style: none;
	list-style: none;
	padding: 0;
	margin: 0}


	.menu-submenu li {
		display:block;
		line-height: 1;
		list-style: none;
  		
}
.menu-submenu li a {
    font-weight: bold;
    color: #777 ;
    display: block;
	 padding:5px 8px;
    line-height: 1;	
}
	.menu-submenu li a :hover{
 
    color: #00a4bc;
  
}
	.b-boder{border-bottom: #ddd solid 1px}
	
}

/*==========================================

 content 內容
===========================================*/
.Wrap  {
	position: relative;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    outline: 0;
   width: 100%;
	max-width: 100%;
	padding:60px 15px 30px 15px;
	overflow: hidden
}



.contentContainer {
  margin: 0;
	   padding:0; 
	  border: 0;
    outline: 0;
	position: relative;
    width: 100%;
    max-width: 100%;
	flex: 0 0 100%;
       display: block;
	background-color:#f1ebe9;
	top:65px

}
.sec01Wrapper {
    position: relative;
     margin: 0 auto;
    padding:0px 15px;
    min-height: auto;
	background-color: #FFFFFF;
	top: -112px;
	border-radius: 20px 20px 0px 0px;
}


.Content {
	background-color:#FFF; 
    display: block;
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.8;
    word-break: break-all;
    padding:15px 20px 40px 20px;
	
}
@media screen and (max-width:1600px) {
	.contentContainer{top: 80px}
	.sec01Wrapper {top:-80px}
	
}

@media screen and (max-width:1569px) {
	.sec01Wrapper {border-radius: 0px 0px 0px 0px;}
}
@media screen and (max-width:811px) {
	.contentContainer { top:200px; margin-bottom:260px }
	.sec01Wrapper {margin: 30px auto 40px auto; border-radius:20px; top:0px;}
}


@media screen and (max-width:576px){
	
	.sec01Wrapper {margin: 30px 8px;}

	
}




/*==========================================

btn
===========================================*/

.btnBox {   
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	position: relative;
	margin:50px auto 15px auto;
	text-align: center}
	


.btn {
    position:relative;
    bottom:25px;
	 visibility: visible;
		-webkit-transform: translateY(0) scale(1); 
		opacity: 1;transform: translateY(0) scale(1); 
	border: #CECECE solid 1px;
	margin: auto


}

.btn a {
	width: 135px;
    height: 35px;
    background-color: #fff;
    border-bottom: 2px solid #c49d62;
    color: #6c6c6c;
    display: block;
    font-size: 0.835em;
    line-height: 35px;
    padding: 0 10px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}

.btn a:before {
    content: "";
    width: 40px;
    height: 1px;
    background-color: #6c6c6c;
    opacity: 1;
    position: absolute;
    top: 20px;
    right: 10px;
}

.btn a:after {
    content: "";
    width: 8px;
    height: 1px;
    background-color: #6c6c6c;
    border: none;
    opacity: 1;
    position: absolute;
    top: 18px;
    left: auto;
    right: 8px;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}

   .btn:hover:after {
        height:100%
    }

  .btn:hover a {
       background-color:#ccaa76;color: #fff
    }

 .btn:hover a:after, .btn:hover a:before {
        background-color:#fff;color: #fff
    }
.btn:hover {background-color:#ccaa76;}
.btn a :hover {background-color:#ccaa76;color: #fff; }


/*---------return---*/
.rbtn {
    position:relative;
    bottom:25px;
	 visibility: visible;
		-webkit-transform: translateY(0) scale(1); 
		opacity: 1;transform: translateY(0) scale(1); 
	border: #CECECE solid 1px;
	margin: auto


}

.rbtn a {
	width: 135px;
    height: 35px;
    background-color: #fff;
    border-bottom: 2px solid #c49d62;
    color: #6c6c6c;
    display: block;
    font-size: 0.835em;
    line-height: 35px;
    padding: 0 10px;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}

.rbtn:hover a {
       background-color:#ccaa76;color: #fff
    }
/*==========================================

 title
===========================================*/
/*----sec01tit------------------*/
.titleBox {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}
.titleBox .title {
    font-size: 2em;
      font-family: "Noto Serif TC", "微軟正黑體", serif;
    color: #403f3f;
	    margin-bottom: 5px;
}

.titleBox em { 
	font-style: normal;
    position: relative;
    display: inline-block;
    font-size: 1.15em;
    color: #a9714b;
        font-family: "Noto Serif TC", "微軟正黑體", serif;
    padding-bottom: 15px;
    margin-bottom: 15px;
	left: 15%
}

.titleBox:before {
    content: '';
    display: block;
    height: 1px;
    background: #cfb29f;
    position: relative;
    width: 90px;
    left: 100%;
    top: 35px;
    transform-origin: left bottom;
    transform: rotate(125deg);
    -webkit-transform-origin: left bottom;
}




/*----sec02tit------------------*/

.titleBox2 {
    position: relative;
    text-align:left;
    margin-bottom: 20px;
}
.titleBox2 .title2 {
    font-size: 2em;
      font-family: "Noto Serif TC", "微軟正黑體", serif;
    color: #403f3f;
	    margin-bottom: 5px;
}

.titleBox2 em { 
	font-style: normal;
    position:relative;
    display: inline-block;
    font-size: 1.15em;
    color: #a9714b;
        font-family: "Noto Serif TC", "微軟正黑體", serif;
    padding-bottom: 15px;
    margin-bottom: 15px;
     text-align: right;
    left: 23%;
}

.titleBox2:before {
    content: '';
    display: block;
    height: 1px;
    background: #cfb29f;
    position: relative;
    width: 90px;
    left:35%;
    top: 30px;
    transform-origin: left bottom;
    transform: rotate(125deg);
    -webkit-transform-origin: left bottom;
}
@media screen and (max-width: 1440px) {
	.titleBox:before { left:112%;top: 30px}
	.titleBox2 em { left: 25%;}
	.titleBox2:before { left:37%;}
}
@media screen and (max-width: 1200px) {
	.titleBox2 em { left: 25%;}
	.titleBox2:before { left:41%;}
}
@media screen and (max-width: 1152px) {
	.titleBox2 em { left:31%;}
	.titleBox2:before { left:45%;}
}

@media screen and (max-width: 991px) {
	.titleBox .title {font-size:1.75em;	}
	.titleBox:before {left:115%;}
	.titleBox2:before { left:57%;}
}
@media screen and (max-width: 811px) {
	.titleBox:before {
		    transform: rotate(180deg);
		    height: 2px;
	width: 80px;
        top: 90%;
	transform-origin:center center;
    transform: rotate(180deg);
    -webkit-transform-origin:center center;
		position: absolute;
		left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
	bottom: 8px
	}
	
	.titleBox em{left: 0}
	.title2{text-align: center;}
	
	.titleBox{text-align: center}
	
	.titleBox2 em{
		display: flex;
		left:43%;
		text-align: center;	}

.titleBox2:before {    
	transform: rotate(180deg);
    height: 2px;
    width: 80px;
    top: 95%;
    transform-origin: center center;
    transform: rotate(180deg);
    -webkit-transform-origin: center center;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 8px;}
	
}

@media screen and (max-width: 576px) {
	.titleBox .title {  font-size:1.7em;}
	.titleBox2 .title2 {  font-size:1.7em;}
	.titleBox2 em{left:39%;	}
	
}


/*==========================================

 sec1
===========================================*/

.sec01Bg {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding:60px 0 20px 0;
    background-color:transparent;
    display: block;
	overflow: hidden;
}
	 
.sec01-LBox {
	position: relative;
    width: 16%;
    max-width: 16%;
    flex: 0 0 16%;
    padding: 0;
    float: left;
    padding: 0;
}

.sec01-RBox {
	position: relative;
    width: 84%;
    max-width:84%;
    flex: 0 0 84%;
    padding: 0;
    float: left;
    padding: 0;
}

@media screen and (max-width:811px) {
	.sec01-LBox {
    width: 100%;
    max-width: 100%;
	flex: 0 0 100%;}
	
.sec01-RBox {
   width: 100%;
    max-width: 100%;
	flex: 0 0 100%;}

.sec01Bg{padding-top:15px}

}

/*==========================================

 sec01 -news
===========================================*/


.NewRwdTable {
    border: none;
    margin: 0 auto 15px  auto;
    color: #222;
    max-width:95%;
    border-collapse: collapse;
    background: #FFF;
}
    .NewRwdTable th {
        vertical-align: middle;
        padding: 0.75em 0.313em;
        font-size: 0.938em;
        text-align: center;
        display: inline-block;
    }

    .NewRwdTable td {
        cursor: pointer;
        padding:12px 5px;
        text-align: center;
        font-size: 0.938em;
        display: inline-block;
		line-height: 25px;
		letter-spacing: 0.5px
    }


    .NewRwdTable tr {
        border: none;
        width: 100%;
        display: block;
        border-bottom: 1px #ddd solid;
    }

   .NewRwdTable tr:last-child {
            border-bottom: none;
        }

    .NewRwdTable thead {
        background-color:transparent;
        color: #FFF;
        font-weight: bold;
    }




    .NewRwdTable .tdDate {
        margin: 0;
        width:20%;
        font-weight: bold;
	
    }

    .NewRwdTable .tdTxt {
        margin: 0;
        width:80%;
        border-right: none !important;
        text-align: left !important;

    }



    .RwdTable-file tbody tr:nth-child(1n):hover {
       background-color:#f7efe4
    }


/*---消息字-----*/
a.news_link:link {color:#222;background-color: transparent; text-decoration: none;}
a.news_link:visited {color:#222;background-color: transparent;text-decoration:none}
a.news_link:hover {background-color: transparent; color:#ceae7c; text-decoration:underline}
a.news_link:active {background-color: transparent;color:#ceae7c; text-decoration:underline}




@media screen and (max-width: 991px) {
	.NewRwdTable .tdTxt { width:77%}
}


@media screen and (max-width: 811px) {
.NewRwdTable {
	width:100%;  
	max-width: 100%;}
.NewRwdTable td {
    cursor: pointer;
    padding: 8px 15px;
    text-align: center;
    font-size: 0.938em;
    display:block;
    line-height: 25px;
	width:100%;  
	max-width: 100%;
}
    .NewRwdTable .tdDate {     
        max-width: 100%;
		width: 100%;
        text-align: left;
        display:block;
        margin-bottom:5px;
    }

    .NewRwdTable .tdTxt {
        position: relative;
        display: block;
          max-width:98%;
		width:98%;
       
    }

    .NewRwdTable td:before {
        content: attr(data-th) " : ";
        float: left;
        padding-right: 8px;
        font-weight:bold;
        display: inline-block;
        text-align: center !important;
		color: #a9714b;
    }


	
}


/*==========================================

 sec02 -About
===========================================*/
.sec02Bg {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding:20px 0 40px 0;
    background-color:transparent;
    display: block;
	overflow: hidden;
}

.sec02_main {
	 position: relative;
    width:99%;
	max-width: 99%;
    border: none;
    padding:0;
    display: block;
	 background-color:#f9f6f1;
}
.sec02_main:before {
content: '';
    position: absolute;
    display: block;
    float: right;
    text-align: right;
    right: 0;
    bottom: 0;
    width:125px;
    height:125px;
    background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20170511170326/https://web.arte.gov.tw/aecp/images/2secBg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.dummy_text {
	z-index: 1;
 
    font-size:1em;
    margin:15px auto;
        padding: 30px;
    border: 0;
    outline: 0;
	    clear: both;
    color: #2f2f2f;
	    overflow-wrap: break-word;
    word-break: break-all;
    line-height:2;
}


/*==========================================

 copyright
===========================================*/



.copyright {
    font-weight: normal;
    padding: 1em 0 1.5em 0;
    letter-spacing: 0.1em;
    position: relative;
    color: #111;
    padding-top: 1em;
    padding-bottom: 1em;
    background:#e3d7d3;
}

.copyright img{border: 0;border: none}

.foot_col {
    padding: 0;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;

    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 0.938em;
    padding-top: 0.875em;
	justify-content: space-between;

	overflow: hidden
}


    .foot_col ul {
        left: 0;
        padding: 0;
        margin: 0;
        list-style: none;
        list-style-type: none;
    }


    .foot_col > ul > li {
        padding: 0 5px;
         vertical-align: top;
        margin: 0 auto;
		float: left
    }



.footer_left {
    position: relative;
    flex: 0 0 17%;
    width: 17%;
    max-width:17%;
	text-align: center;
	
}


.footer_center {
    position: relative;
    flex: 0 0 25%;
    width:25%;
    max-width: 25%;

}


.footer_right{
	 position: relative;
    flex: 0 0 54%;
    width: 54%;
    max-width: 54%;

}

/*----2a-----------------*/


  .footer_left img {
        position: relative;
        width:125px !important;
        max-width:125px !important;
        height: auto;
    }


   .footer_left img {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
    }




/*-----------------------
 center info -tel/add
 -------------------------*/
.copyright_info {
    font-size: 0.938em;
    position: relative;
    text-align:left;
    margin: 0 auto;
    padding-top:0px;
}

    .copyright_info span {
        display:block;
        letter-spacing: .05em;
        margin-bottom: 0.5em;
    }

        .copyright_info span em {
            margin-right: 0.375em;
            color: #111;
            font-style: normal !important;
        }

        .copyright_info span a {
            font-weight: normal;
            color: #111;
            text-decoration: none;
        }

            .copyright_info span a:hover {
                color:#a9714b;
            }


    

        .copyright_info span + span + span + span:after {
            content: '';
            padding: 0 0.313em;
            color: #111;
        }


/*----group-----------------*/


.copyright_group{
	    font-size:1em;
	font-weight: 800;
    position: relative;
    text-align:center;
    margin: 0 auto;
    padding-top:15px;

}


.copyright_group ul{
	list-style: none;
	list-style-type: none;
	left: 0;
	margin: 0;
	padding: 0
}

.copyright_group ul li{
	display: inline-block;
	padding:0 5px ;
	margin: auto;
	float: left;
	vertical-align: top
}

.copyright_group ul li img{	
	text-align: center;
	margin: auto;
	vertical-align:middle;
	padding: 0;
	margin-top: -5px
}




@media only screen and (max-width:991px) {
	.footer_left {
    position: relative;
    flex: 0 0 45%;
    width: 45%;
    max-width:45%;
	text-align: center;
	
}


.footer_center {
    position: relative;
    flex: 0 0 45%;
    width:45%;
    max-width: 45%;

}


.footer_right{
	 position: relative;
    flex: 0 0 100%;
    width:100%;
    max-width:100%;

}
	.copyright_group{padding-top: 30px}
	
}
@media only screen and (max-width:800px) {
	.foot_col{padding: 0px 15px}
    
	.foot_col > ul > li {
        display: block;
    }

    .footer_left {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 1.25em !important;
        clear: both;
    }


    .footer_left img {
        position: relative;
        width:115px !important;
        max-width:115px !important;
        height: auto;
    }

    .footer_center {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 1em !important;
    }
    

	.copyright_info { text-align: center}
    .footer_right {
        position: relative;
        flex: 0 0 80%;
        width: 80%;
        max-width: 80%;
        text-align: center;
    }
	.copyright_group ul li {width: 45%;padding:3px; margin-bottom:18px}
    .copyright_group ul li img { margin-top: -10px;}
	
}

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

    .footer_left img {
        flex: 0 0 47%;
        width: 47%;
        max-width: 47%;
    }


}

  /*-------------------
  麵包屑
-------------------------*/

.breadcrumbArea {
     width: 100%;
    max-width: 100%;
   top: 0px;
    position: relative;
    z-index: 2;
    right: auto;
    margin: 0px 15px 40px 15px;
    top: 0px;
    display: block;
}




.breadcrumbBox {
    font-family: 微軟正黑體,Microsoft JhengHei,MingLiU,'Open Sans', sans-serif;
    font-style: normal;
    padding: 5px;
    margin-right: auto;
    max-width: 100%; 
    right:30px;
    float: right;
    position: relative;
}


.breadcrumbBox .breadcrumb {
    margin: 0;
    background: none;
    background: none;
    font-size: 0.938em;
    color:#a18c5e;
    padding: 0;
    border-radius: 0;
    line-height:1.8;
	text-align: center

}
.breadcrumb ul{ 
	left: 0;
  list-style:none;
	list-style-type:none; 
   margin:0;
    padding:0}

.breadcrumb ol{ 
	left: 0;
  list-style:none;
	list-style-type:none; 
   margin:0;
    padding:0}

 
.breadcrumb > li {
    letter-spacing: 1px;
    /*white-space: pre-wrap;*/
    display: inline-block;
    float: left;
	text-align: center;
	color: #555;
    padding-top: 5px;
}
.breadcrumb > li a{
	color:#555;
    display: inline;
    white-space: pre-wrap;
	font-style: normal
}

.breadcrumb > li a:hover{
   color:#a9714b;

}
.breadcrumb > li + li:before {
    content: "/ ";
    padding: 0 0.313em;
    color: #555;
}


@media (max-width:1024px) {
.breadcrumbBox {padding:0px 0px;height:auto}
	
.breadcrumbBox .breadcrumb { padding:8px 5px 8px 5px; line-height: 1;}
}
@media (max-width:576px) {
	.breadcrumbArea {margin: 5px 15px}
	.breadcrumbBox .breadcrumb{font-size: 0.835em}
.breadcrumbBox {  right:15px;}
.breadcrumbBox .breadcrumb {padding: 5px; line-height: 1;}
.breadcrumb > li {padding-top: 0px;	padding-bottom: 5px}
}



 /*-----------------------
 Pagination 109.01.4
-------------------------*/

.pagination-area {
  padding-top: 50px;
	margin-bottom: 30px
}
.pagination-area .page-item {
  margin: 12px 0;
	display: inline-block
}

.pagination-area .page-item:first-child {
  margin: 0;
}

.pagination-area .page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0%;
  border-bottom-left-radius: 0%;
}

.pagination-area .page-item:last-child .page-link {
  border-top-right-radius: 0%;
  border-bottom-right-radius: 0%;
}

.page-link:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.pagination-area .page-item.active .page-link {
  z-index: 1;
  border: 0;
  position: relative;
  box-shadow: none;
  outline: 0;
  color: #fff;
  background:#a9714b;
}

.pagination-area .page-link {
  border: 0;
  font-size:0.938em;
  text-align: center;
  background: none;
  box-shadow: none;
  outline: 0;
  color: #727272;
  padding:5px 8px;
  background: #fff;
  margin: 0 3px;
  border-radius: 0%;
  border: 1px solid #f0f0f0;
}

@media (max-width: 575px) {

  .pagination-area .page-link {
    margin: 0 4px;
    padding: 8px 11px;
  }
}

.pagination-area .page-link:hover {
  color: #fff;
  background: #3B4855;
  border: 1px solid transparent;
}
.page-notification {
  background: #EFF5F8;
  padding: 13px 0;
  margin-bottom: 45px;
}


.ti-angle-left:before {
    content: "<";
	font-size: 1.1em;
	color: #999;
	text-align: center
}
.ti-angle-right:before{
	content: ">";
	font-size: 1.1em;
	color: #999;
	text-align: center
	
}
 /*-----------------------
 banner
-------------------------*/
.banner_area {
    position: relative;
    z-index: 1;     
	margin: 0 auto;
	-webkit-box-pack: center;
    justify-content: center;
    background-color: #f8f8ff;
	    border: solid #f1ebe9 7px;
    overflow: hidden;
	display: block;
	width: 100%;
	max-width: 100%;
}
.banner_area .banner_inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 110px;

    z-index: 1;
    background-size: cover;

	background-position: center;
	    display: flex;
    position: relative;

}

.decoration {
    width:320px;
    height:50px;
    background: linear-gradient(135deg, #ffb2e4, #82d5ff);
    border-radius: 70px;
    position: absolute;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
.decoration:nth-of-type(1) {
    top: -35px;
    left: 74%;
}
.decoration:nth-of-type(2) {
       top: 20px;
    left: 82%;
    width: 260px;  
}
.banner_content{
	float: left;
	width: 90%
}
@media only screen and (max-width:768px) {
	
.decoration:nth-of-type(1) {top: -55px;left:65%;}
.decoration:nth-of-type(2) {top: 40px;left:70%;}	
}
 .banner_content h2 {
     font-size: 2em;  
	 padding-left:15px;
    font-family: "Noto Serif TC", "微軟正黑體", serif;
    color: #403f3f;  
    margin-bottom:5px;
   	 font-style: normal;
	 position: relative;	 
}
.banner_content h2:before {
    content: '';
    display: block;
    height: 2px;
    background: #cfb29f;
    position: relative;
    width: 90px;
    left: 15px;
    top:50px;

}

@media only screen and (max-width:414px) {
	.banner_content h2:before { display: none}
}
 .banner_content h4{
	     font-style: normal;
    position: relative;
      font-size: 1.25em;
    color:#00a4bc;
    font-family: "Noto Serif TC", "微軟正黑體", serif;
    padding-left:40px;
     display: inline-block;
font-weight: bold;
}

.banner_content h4:before {
    position: absolute;
    display: inline-block;
    content: "";
    border:#00a4bc solid 1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    left: 15px;
    top: 8px;
	background-color:#00a4bc
}

/*==========================================

dowload
===========================================*/


.dow_table {
    width: 100%;
    max-width: 100%;
    margin:0px auto 15px auto;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.1);
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    -webkit-box-sizing: border-box;
    border-collapse: collapse;
    border:1px solid #e5e5e5;
}

.dow_table th {
	font-size:1.063em;
    vertical-align: middle;
    padding: 10px  15px;
    letter-spacing: 5px;
    text-align: center;
    color: #111;
    display: table-cell;
	border: .6px solid #fff;
	position: relative;
	
}





.dow_table tr td {
	    border: .6px solid #dadce0;
	letter-spacing: 1px;
    cursor: pointer;
    padding:10px;
    text-align:left;
    font-size:1em;
    display: table-cell;
}
.dow_table tr{
	text-align: center; 
	border: none;
    display: table-row;
}

.dow_table tr td img{
	border: none;
	text-align: center;
	margin: auto;
	max-width: 100%;
	height: auto

}
.dow_table tr td p{
display: inline-block;
	padding-right: 5px
}

/*----icon img---*/
.dow_table tr td span{
display: inline-block;
}


/*----icon name---*/
.dow_table tr td i{
	font-style: normal;
	display: inline-block;
    bottom: 12px;
    position: relative;
	padding-left: 5px

}
.dow_table tr td a{
	font-style: normal;
	color: #000;
	text-decoration: underline

}

.dow_table tr td a:hover{
	color:#a9714b

} 

.dow_table tr:nth-child(2n){
	background:#f8f8ff;
}



.dow_table thead {
background: rgb(234,229,227); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(234,229,227,1) 30%, rgba(130,213,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  rgba(234,229,227,1) 30%,rgba(130,213,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  rgba(234,229,227,1) 30%,rgba(130,213,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eae5e3', endColorstr='#82d5ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.dow_table tr td >span{padding-left: 5px; display: inline-block}

.dowBg{ background-color:transparent}

.dowBg:hover{background-color:#e3d7d3}

@media (max-width:1152px){
.dow_table th {
	padding:15px;
	font-size:1em;
	letter-spacing: 1px
	}
	
		
}

@media (max-width: 767px){
	
.dow_table thead {display: none}
	
.dow_table tr td { 
		display: block;
		 border-bottom: .6px solid #dadce0;
		border-top: none;
		border-left: none;
		border-right: none	
	}
.dow_table tr td:before {
    content: attr(data-th) ":";
    float: left;
    font-weight: bold;
    color:#6c3c0b;
    font-style: normal;
    display: inline-block;
    text-align: center ;
    padding-right: 8px;
}
	
.dow_table  tr {
    border: none;
	 display: block;
    width: 100%;
		
	}
.dow_table  tr th { display:none;}
	

		
}

/*==========================================

news
===========================================*/
.pnews-Tit {
    float: left;
        clear: both;
    margin-bottom: 30px;
    border-bottom: 1px solid #ededed;
    padding: 15px 10px;
}
.pnews-Tit h3 {
    font-size:1.35em;
    font-weight: 700;
    margin-bottom:20px;

    line-height: 1.5;
    color: #404044;
    font-weight: 900;
	letter-spacing: 1px
	
}
.newsDate {
    display: block;
    margin: 20px 0;
    font-family: 'Jaldi', sans-serif;
    font-size: 0.875em;
    line-height: 1;
    color: #777777;
    letter-spacing: 2.5px;
}



/*==========================================
logoin
===========================================*/
.loginform {
    display: block;
    margin:15px  auto
		
}

.loginform h3{
	display: flex;
	font-weight: bold;
	text-align: center; 
	font-size: 1.5em}



fieldset {
   border-radius:20px;
    margin: 0 auto;
    border:solid #f1ebe9 3px;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
    padding:20px 15px 45px 15px;
	background: #FFFFFF;
	    display: table;
    z-index: 1;
}

.form-group {
    margin-bottom: 15px;
}


 .col-form-label {
    padding-top:15px;
	 font-weight:600;
    font-size: 1.15em;
    line-height: 1.75;
    text-align: right;
	 position: relative

}
	
.form-control {
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	margin-bottom: 30px;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	    background-clip: padding-box;
    border: 1px solid #ced4da;
}

.loginform label  {
    font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif;
    text-align: left;
    font-size: 1em;
    margin-top: 20px;
    padding-left: 15px;
    color: #222;
}

 .loginform  em {
    color: #cf2828;
    font-style: normal;
    font-weight: normal;
    padding-right: 8px;
    display: inline-block;
}
.input-lg {
	    width:90%;
    -webkit-appearance: button;
    cursor: pointer;
    font-size: 1em;
    border-radius: 6px;
	overflow: visible;

}
.input-mg {
	    width:50%;
    -webkit-appearance: button;
    cursor: pointer;
    font-size: 1em;
    border-radius: 6px;
	overflow: visible;
	    font-family: inherit;
}
.colorhrBG{
  height: 5px;
  border-top: 0;
  background: #c4e17f;
  border-radius: 5px;
  background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
  background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
	max-width: 100%
}



.loginBtnArea {
    grid-row:4;
    justify-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:30px;
    margin-bottom:30px;
	margin-left: auto;
	margin-right:  auto;
}

.login-button {
    border: 1px solid #ceae7c;;
    min-width: 40px;
    font-size: 1rem;
    text-shadow: none;
    line-height: 1.2;
    display: inline-block;
    padding: 10px 10px;
    margin: 0 12px 0 0;
    position: relative;
    border-radius: 4px;
    background:#ceae7c;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none !important;
    text-align: center;
    font-weight: normal !important;
}
.login-Send-button {
  color: #fff;
	letter-spacing: 2px;
    background-color:#b02533!important;
  border-color: #b02533!important;
}





/*---注意---------*/


.stup-content-note{
	      width:90%;
	max-width: 90%;
    margin: 30px auto;
	position:relative;
	background:#f9f6f1;
	padding:15px;
	z-index:1;
	display: block;   
	
	}


.stup-content-note h4 {
    text-align: center;
    line-height: 1.2;
    font-weight: 800;
    font-style: normal;
    font-size: 1.2em;
    color: #000;
}
.stup-content-note ul{
	margin:0;
	padding:0;
	left:0;
	list-style-type: none;
	list-style: none;
}
	
	
.stup-content-note ul  li {
    position: relative;
    display:flex;
    padding-left: 1em;
    clear: both;
    overflow: hidden;
    padding:5px}
   
.stup-content-note ul li span{
	        float: left;
    display: block;
      padding:5px;
}


@media (max-width: 800px){
	fieldset {		padding: 5px;width: 95%;max-width: 95%;}
	.loginform label {font-size: 0.875em}
    .col-form-label { text-align: center}
	.input-lg {font-size: 0.875em}
	.input-mg {font-size: 0.875em}
	.loginBtnArea{display:table}
	.login-button{ margin:0 8px 0 8px;padding:10px;font-size: 0.9em; margin-bottom: 10px}
}


/*-----------------

year select

---------------*/
.year-pulldown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	margin:20px auto
}

.year-pulldown-list:hover {
    opacity: .8;
}

.year-pulldown-list {
	width: 38%;
	max-width:  38%;
    color: #333;
	text-align: center;
    position: relative;
}

@media (max-width: 800px){
	.year-pulldown-list {
	width: 95%;
	max-width: 95%;}
}

.year-pulldown-select {
    min-height: 40px;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding-top:5px;
    padding-left: 16px;
    font-size: 1.05em;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; 
	text-transform: none;   
	margin: 0;
	cursor: pointer;
}


/*----arrow---*/
.year-pulldown-list:after {  
    content: "";
	display: block;
    position: absolute;
   
    width:8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    -webkit-transform: rotate(135deg) translateX(-50%);
    transform: rotate(135deg) translateX(-50%);
	cursor: pointer;
	  top: 50%;
    right: 12px;
	
}


/*---------------類別----------------------*/
.m_classLink{
	display:none;
	text-align: center;
margin-bottom: 30px;}
	
.classBox{
	display: block;
	position: relative
}

ul.classLink{padding-bottom:30px;
	text-align:center;}

ul.classLink li{
	display:inline-block;
padding-bottom:5px;}

ul.classLink li a{
	display:block;
	margin:0 3px;
	font-size:0.938em;
	padding:10px 15px;
	color: #b79355;
	border: 1px solid #b79355;
	
	position:relative;}

ul.classLink li a:hover, 
ul.classLink li a.current{
	background:#b79355;
	color:#FFF;}

ul.classLink li a.current:after{
	content:" ";
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 5px 7.5px 0 7.5px;
	border-color: #b79355 transparent transparent transparent;
	
	position:absolute;
	bottom:-5px;
	left:50%;
	margin-left:-7.5px;}

@media (max-width:768px){
	ul.classLink li a{
	font-size:0.938em;
		padding:10px 5px;}
	.album_sidebar {line-height: 1.25}
}

/*---------------leftMenu----------------------*/


.leftTitle {
    position: relative;
    font-weight: normal;
    font-size: 1.35em;
	font-weight: bold;
    color: #202020;
    padding:5px;
	line-height: 1;
	letter-spacing: 3px;
	text-align: center
 
}

.album_sidebar{
	    display: block;
	    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}
.album_sidebar .single_sidebar_widget {
    background: #fbf9ff;
    padding:15px;
    margin-bottom: 30px;
}
.album_sidebar aside{
    display: block;
}

.cat-list{
	top: 0;
	left: 0; 
	margin: 0;
	padding: 0;
	left: 0;
	list-style: none}

.cat-list li {
display: block;
    transition: all 0.3s ease 0s;
	    border-bottom: 1px solid #e1e1e1;
    position: relative;
}


.cat-list li a {
    font-size:1em;
    color: #222;
	    display: block;
    padding: 5px 10px;
	position: relative;
	
}

.cat-list li a:before {
    content: "";
    width: 0%;
    height: 2px;
    background: #b79355;
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    transition: 0.9s;
}

.cat-list li:hover > a:before{
	width: 100%;
	transition: 0.9s;
	height: 2px;
    background: #b79355;
}

.cat-list li a:hover{ color: #a9714b}


@media (max-width:991px){
.cat-list li{display: inline-block}
}

  @media (max-width:768px){

.cat-list li a {font-weight: 800}
}
/*---------------img----------------------*/
.portfolio-item {
    position: relative;
    width: 31%;
	 max-width: 31%;
	display: inline-block;
	margin-right: 12px;
	margin-bottom: 30px
}

.portfolio-img {
	cursor: pointer;
    position: relative;
    overflow: hidden;
	
}

.portfolio-img img {
    position: relative;
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    transform: scale(1.1);
    transition: .5s;
}

 .portfolio-item:hover img {
    margin-left: 15px;
}

 .portfolio-text {
    position: relative;
    height:110px;
    width: 100% ;
	 max-width: 100% ;
    margin:0;
    display:block;
    align-items: center;
    background: #ffffff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .12);
}

.portfolio-text h3 {
    width: 92%;
	max-width: 92%; 
    font-size:1.15em;
    font-weight: 600;
    margin: 0;
	padding:40px 10px 15px 10px;
	overflow: hidden;
	height: 50px;
	line-height: 1.75
}

.portfolio-text h3 a{
	color: #222;
	text-decoration:none}


.portfolio-text h3 a:hover{color: #b79355}

.photobtnBox{
	 position:absolute;
    top:60%;
    right: 10px;
  	z-index: 1;}



.photobtn {
       
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff;
    transition: ease-out 0.3s;
    -webkit-transition: ease-out 0.3s;
    -moz-transition: ease-out 0.3s;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
   
    border: 1px solid transparent;
        padding: 10px 15px;
    line-height: 2;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	     background: linear-gradient(135deg, #ffb2e4, #82d5ff);
}
 .portfolio-item:hover a.photobtn {
    color: #222;
    background: #fbed79;
	     border: 1px solid transparent;
    box-shadow: inset 0 0 0 0 #EF233C;

}
 .portfolio-text a.photobtn {
    width: 40px;
    height: 40px;
    padding: 0;
    display:block;
    align-items: center;
    justify-content: center;
   font-size:2em;
    font-weight: 100;
	      background: linear-gradient(135deg, #ffb2e4, #82d5ff);
}

@media (max-width:1152px){
.photobtnBox {
    position: absolute;
	top: 50%;}

	
}
@media (max-width:996px){
	.portfolio-text h3{padding: 15px}
	.portfolio-item {
     width:45%;
	max-width: 45%;}
}


@media (max-width:768px){
	.photobtnBox {
	    position: absolute;
    bottom:-10px;
	top: auto;}
	
	.portfolio-item {
        width:100%;
		max-width: 100%;
		margin-right: auto;
		margin-left:  auto;
		margin-bottom: 45px

	}
	
}



/*------------------------------

109.01.04
-----------------------------------*/

.GuideBox{display: block;z-index: 99999999}


a.Guide {
    background-color:#f1ebe9;
    color: #6a3905;
	position: absolute;
    width:150px;
       padding: 0;
    margin:0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
	  padding: 0 5px;
    height:30px;
    line-height:30px;
      text-decoration: none;
    opacity: 1;
    transition: .5s;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
	display: block;
	font-size: 0.938em;
	left: 0
    
}
a.Guide:hover {
    color:#a9714b;
    text-decoration: none;

}



.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}

@media (max-width:811px){
	.GuideBox{display: block;z-index: 99999999}
	
}





/*
     FILE ARCHIVED ON 17:03:26 五月 11, 2017 AND RETRIEVED FROM THE
     AN OPENWAYBACK INSTANCE ON 19:02:43 五月 12, 2026.
     JAVASCRIPT APPENDED BY OPENWAYBACK, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/