@charset "utf-8";
@import url("reset.css");
@import url("loading.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Noto+Serif+TC:wght@300&display=swap');

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; letter-spacing:1px; outline:0; }
html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-y:scroll; overflow-x:hidden; }
body, td, th,select,input {font-size:12px;font-family: /*Arial,*/ "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;color:#333333;}

/*簡易設定*/
.iframe_ch { display:none }
.middle { vertical-align:middle; }
.center { text-align:center; }
.w100{ width:100%; }
.fix-top{ /*margin-top:130px;*/ }

/*fix safari*/
input, select, textarea{ -ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box;}
input[type='text'],input[type='password'],input[type='button'],input[type='submit'],select{  -webkit-appearance: none; }

/*分頁*/
.pager{width:100%;overflow:hidden;margin: 40px auto 60px auto;text-align:center;}

/*編輯器*/
.editor{ padding:50px 0 20px 0; font-size:16px; line-height:30px; }

.fix-top{ margin-top:130px; }

/*表格*/
.css-table { display:table; width:100%; }
.css-tr {display: table-row;}
.css-td {display: table-cell;text-align:left;vertical-align:middle;padding: 0px 10px;box-sizing:border-box;letter-spacing:1px;font-size: 16px;color:#121212;}

/*全營幕遮罩*/ 
.bg-overlay{display:block;position:fixed;left:0;top:0;background:rgba(0,0,0,0.7);opacity:0;visibility:hidden;width:100%;height:100%;z-index:9999;
transition: all 0.5s linear;
}
.bg-overlay.visible{ opacity:1;visibility:visible; }

/*網頁大標題*/
.common-title{text-align: center;font-size: 30px;color: #000000;font-weight:bold;letter-spacing: 10px;line-height: 30px;padding: 1vw 10px 1vw 10px;margin: 0 0 0 0;}
.common-title span{display: block;line-height: 30px;text-transform: uppercase;font-size: 30px;padding-bottom: 15px;color: #dcbc8a;font-weight: bold;letter-spacing: 3px;font-family: 'Noto Sans TC', sans-serif;}
.common-title > .line{background: #c8bfb0;width: 250px;height: 1px;margin: 20px auto 20px auto;animation:1s ease-in-out 0.8s 1 widthGroup-1;}

.common-title2{width: 100%;text-align: center;font-size: 30px;color: #8d6013;font-weight:bold;letter-spacing: 10px;line-height: 30px;padding: 2vw 10px 2vw 10px;margin: 0 auto 0 auto;}
.common-title2 span{display: block;line-height: 30px;text-transform: uppercase;font-size: 30px;padding-bottom: 15px;color: #dcbc8a;/* font-weight: bold; */letter-spacing: 3px;font-family: 'Noto Sans TC', sans-serif;}

/*內頁大標題*/
.b-innertitle{
    position: relative;
    color: #ffffff;
    background: #8a724c;
    border-left: 5px solid #b89c70;
    font-size: 20px;
    padding: 13px 10px 13px 40px;
    margin: 0 0 30px 0;
}
.b-innertitle span{
    color: #dcbc8a;
    font-size: 12px;
    padding: 0 20px;
}

/*連結*/
a{ color:#000000;text-decoration:none; }
a:hover{ color:#5A5142; }

/*網站按鈕*/
.btn-1{display:inline-block;color:#ffffff;padding: 8px 15px;margin: 0 5px;font-size: 15px;font-weight: bold;border:1px solid #182950; background:#182950; cursor:pointer;-webkit-border-radius: 10px;-moz-border-radius:10px;border-radius:10px;}
.btn-1 i{ padding-right:6px; }
.btn-1:hover{ background:#073190; transition: all 0.5s linear; }

.btn-2{display:inline-block;color: #dcbc8a;background: #3f3c37;padding: 10px 30px;margin: 0 5px;font-size: 14px;border: 1px solid #3f3c37;cursor:pointer;}
.btn-2:hover{transition: all 0.5s linear;background: #656058;}

.btn-3{position:relative;display:inline-block;color: #dcbc8a;padding: 20px 150px 20px 40px;margin: 0 5px;font-size: 15px;cursor:pointer;background:#3f3c37;}
.btn-3 i{position:absolute;top: 20px;right: 8px;padding-right:6px;font-style: inherit;}
.btn-3:hover{ transition: all 0.5s linear; background:#0e0e0d; }

@media screen and (max-width : 480px) {	
	/*.fix-top{ margin-top:0px; }*/
	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#wrapper{ width:100%; }
.container{ position:relative; width:100%;overflow:hidden;}
.container .wrap{width:100%;max-width:1300px;margin: 60px auto 30px auto;overflow:hidden;}

/*內頁banner*/
#banner-box{width:100%;/*max-width: 1200px;*/margin: 0 auto;overflow:hidden;background:#110102;}
#banner-inner{position:relative;height: 300px;background:url(../../images/banner-inner.jpg) center no-repeat;background-size: cover;}
#banner-inner .overlay{display:flex;align-items:center;justify-content: center;width:100%;height: 100%;/* background-color: rgba(0, 0, 0, 0.5);*/}
#banner-inner .title{opacity:0;text-align:center;color: #000000;font-size: 30px;font-weight: bold;letter-spacing: 5px;padding: 0 15px 20px 15px;/* text-shadow: 2px 2px 2px #101010; */}
#banner-inner .title span{
    display: block;
    font-size: 30px;
    color: #dcbc8a;
    text-transform: uppercase;
    padding: 20px 0;
    letter-spacing: 3px;
}
#banner-inner i{border-bottom: 1px solid #c8bfb0;font-style: inherit;padding: 0 0 20px 0;}

/*固定選單*/
#fix-nav{position: fixed;right: 1%;bottom: 50px;z-index: 99;opacity: 0.8;}
#fix-nav img{ display:block; }

/*左右欄的頁面*/
.container .wrap{position:relative;max-width:1200px; margin: 0px auto 0 auto;padding:0 0 0 0;}
.container .wrap .layout-left{width: 25%;float:left;box-sizing: border-box;padding: 0 30px 0 10px;}
.container .wrap .layout-right{width: 75%;float:left;box-sizing: border-box;padding: 0 10px;}

/*左邊選單*/
.layout-left > ul{list-style:none;margin:0;padding:0;border-top: 5px solid #1468A2;border-bottom: 5px solid #1468A2;}
.layout-left > ul > li{width: 100%;font-size:16px;border-bottom: 1px dashed #cccccc;}
.layout-left > ul > li em{ font-style:inherit; width:20px; display:inline-block; }
.layout-left > ul > li > a{position:relative;color:#000000;text-decoration:none;display: block;letter-spacing: 3px;padding: 23px 30px 23px 10px;}
.layout-left > ul > li:hover{ /*background:#bbd2ed; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul{ display:none; height:0; list-style:none; margin:0; padding:0; }
.layout-left > ul > li ul li{width:100%;padding: 20px 0px;font-size:16px;border-top:1px dotted #cccccc;}
.layout-left > ul > li ul li:last-child{ border-bottom:0; }
.layout-left > ul > li ul li:hover{ /*background:#e1ebf2; transition: all 0.5s ease;*/ }
.layout-left > ul > li ul li a{color:#000000;text-decoration:none;display: block;padding: 0px 10px 0 30px;}
.layout-left > ul li:hover ul{ display:block; height:inherit; transition: all 0.5s ease; }

.main-box{width:100%;overflow: hidden;border:1px solid #e6e5e5;box-shadow: 1px 1px 5px #EBEBEB;color:#0e0e0e;font-size:16px;margin: 0 0;letter-spacing: 1px;box-sizing:border-box;align-items: center;/* justify-content: center; */}
.main-box .main-title{width:100%;background: #1468A2;color:30px;color:#ffffff;font-size: 20px;padding:15px 30px;box-sizing:border-box;}
.main-box .main-content{padding: 20px;background: #ffffff;}
.main-box .main-content .end-line{width:100%;height:1px;margin: 0 0 20px 0;border-bottom:1px dotted #919191;}
.main-box .main-content .subtitle{font-size: 18px;font-weight:bold;letter-spacing:1px;padding: 0 0 15px 0;color: #044257;}
.main-box .main-content .subtitle img{vertical-align: -30%;padding-right:7px;width: 30px;}
.news-content{font-size: 16px;padding: 15px 0 25px 0;overflow:hidden;clear:both;letter-spacing:1px;line-height:30px;/* border-bottom:1px solid #d3d3d3; */}

select{font-size: 16px;font-family: "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;-ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box;}
input[type=submit],input[type=text], textarea {font-family: "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif;font-size: 16px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
#tip_box { position: fixed; line-height:22px; background-image:url(../../images/action_bg.png); color: #FFF; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-left:10px; }


#header{position:relative;width: 100%;height: 130px;position: fixed;top:0;margin:0 auto;background-position:bottom;background:url(../../images/header-bg.jpg) repeat;border-top: 10px solid #383838;border-bottom: 1px solid #ebebeb;z-index: 999;}
#header .wrap{position: relative; max-width:1300px;margin:0 auto; }

#header .nav{position:absolute;top:0;right:20px;background:#383838;color:#dcbc8a;font-size: 15px;padding: 0 10px 2px 10px;display:flex;align-items:center;justify-content: center;-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}
#header .nav span{ font-weight: bold;}
#header .nav span:first-child{
    padding-right: 30px;
}
#header .nav span img{vertical-align:middle;padding: 0 3px 5px 3px;}

#header .logo{position:absolute;top: 30px;left:10px;display:flex;}
#header .logo img{ padding-right:15px; }
#header .logo div span{color: #fcdda7;font-size: 26px;padding-bottom: 10px;font-weight:normal;letter-spacing:3px;display:block;font-family: 'Noto Serif TC', serif;}
#header .logo > .word{color: #fcdda7;font-size: 12px;display:flex;align-items:center;justify-content: center;font-family: 'Lora', serif;}
#header .logo > .word i{font-style:normal;letter-spacing: 2.6px;}
#header .logo > .word div{text-align:left;letter-spacing: 2.5px;}
#header .logo > .word .title{ color: #343434; font-size: 24px; padding-left: 10px; font-weight:normal; font-family: 'Noto Serif TC', serif; }

/*header選單*/
#header ul{float:right;list-style:none;margin: 50px 0 0 0;padding:0;display:flex;flex-wrap: wrap;}
#header ul li{position:relative;display:inline-block;text-align:center;height:45px;display:flex;align-items:center;cursor:pointer;margin: 8px 15px 0 15px;}
#header ul li a{ text-decoration:none; }
#header ul li:not(:nth-last-child(-n+2)):hover{ /*background:#ebebeb;*/
transition: all 0.5s ease;
}
#header ul li div{padding: 0 0 10px 0;text-align:center;font-size: 12px;color: #c8a063;}
#header ul li div:hover{border-bottom:2px solid #ffffff; }
#header ul li{/* border-left: 1px solid #FCDDA7; */}
#header ul li:not(:nth-last-child(-n+2)) i{opacity:0; position:absolute;bottom: 0px;left:0;right:0;margin-left:auto;margin-right:auto;}
#header ul li:not(:nth-last-child(-n+2)):hover i{ opacity:1; color:#ffffff; bottom:3px;
transition: all 0.5s ease;
}
#header ul li span{display:block;font-size: 16px;font-family: 'Noto Sans TC', sans-serif;color: #ffffff;letter-spacing: 2px;padding: 10px 0px 10px 0px;font-weight: b;}
#header ul li:nth-last-child(-n+2){ /*background:#414345;*/ }
#header ul li:nth-last-child(-n+2) i{color: #FCDDA7;font-size:15px;}
#header ul li:last-child{ display:none; }
#header ul li:last-child i{ font-size:25px; }

/*footer*/
#footer{position:relative;width:100%;box-sizing:border-box;overflow:hidden;background: #2b2b2b;color: #d0d0d0;background-size: cover;}

div#footer {}
#footer .wrap{position:relative;display:flex;flex-wrap:wrap;max-width:1200px;padding: 10px 10px 20px 10px;width:100%;overflow: hidden;margin:0 auto;color:#ffffff;}
#footer-nav{width:100%;color:#ffffff;margin-bottom: 20px;/* box-shadow: 0 4px 8px #131313; */-webkit-box-shadow: 0 8px 6px -6px black;-moz-box-shadow: 0 8px 6px -6px black;box-shadow: 0 8px 8px -6px #131313;}

#footer-nav ul{/* float:right; */list-style:none;padding: 0px;display: flex;align-items:center;justify-content: center;flex-wrap: wrap;}
#footer-nav ul li{position:relative;display:inline-block;text-align:center;height:45px;display:flex;align-items:center;cursor:pointer;margin: 8px 15px 20px 15px;}
#footer-nav ul li a{ text-decoration:none; }
#footer-nav ul li:not(:nth-last-child(-n+2)):hover{ /*background:#ebebeb;*/
transition: all 0.5s ease;
}
#footer-nav ul li div{margin: 0 1.5vw 0px 1.5vw;padding: 0 0 10px 0;text-align:center;font-size: 12px;color: #c8a063;text-transform: uppercase;}
#footer-nav ul li div:hover{border-bottom:3px solid #ffffff; }
#footer-nav ul li{/* border-left: 1px solid #FCDDA7; */}
#footer-nav ul li:not(:nth-last-child(-n+2)) i{opacity:0; position:absolute;bottom: 0px;left:0;right:0;margin-left:auto;margin-right:auto;}
#footer-nav ul li:not(:nth-last-child(-n+2)):hover i{ opacity:1; color:#ffffff; bottom:3px;transition: all 0.5s ease;}
#footer-nav ul li span{display:block;font-size: 16px;font-family: 'Noto Sans TC', sans-serif;color: #ffffff;letter-spacing: 2px;font-weight: b;padding: 10px 0px 10px 0px;font-weight: b;}
#footer-nav ul li:nth-last-child(-n+2){ /*background:#414345;*/ }
#footer-nav ul li:nth-last-child(-n+2) i{color: #FCDDA7;font-size:15px;}



#footer .wrap .left{flex: 1.2;}
#footer .wrap .left .slogan{
    font-size: 18px;
    color: #ababab;
    padding: 15px 0;
}
#footer .wrap .right{flex:1;display: flex;justify-content: flex-end;}
#footer .wrap .right #css-table{}
#footer .wrap .right #css-table .css-td:first-child{ width:30px; }
#footer .wrap .right #css-table .css-td{color: #d0d0d0;padding: 6px 10px 6px 0;line-height:20px;}
#footer .wrap .bottom{width: 100%;font-size:14px;color:#868686;line-height: 25px;text-align: center;padding: 40px 0 10px 0;}
	
#copyright{position:relative;/* max-width:1400px; */width:100%;overflow: hidden;margin:0 auto;line-height:20px;color: #ababab;background: #131313;text-align: center;padding: 12px 10px 12px 10px;}
#copyright a{color: #ababab;text-decoration:none;}
#copyright a:hover{ text-decoration:underline; }


@media screen and (max-width : 1200px) {
	#header .logo div span{ font-size:2vw; }
	#header .logo > .word{ font-size:1vw;}	
	#header .logo > .word .title{ font-size:1.8vw;}	
	#header .logo > .word div{letter-spacing: 1px;}
	#header ul li span{ font-size:13px;}
	
	#footer-nav ul li{ margin:8px 5px 20px 5px; }

}

@media screen and (max-width : 1024px) {	
	#header .logo div span{ font-size:18px; }
/*	
	#header .logo > .word{ font-size:16px;}	
	#header .logo > .word .title{ font-size:20px;}
*/	
	#header ul li div{min-width: 20px;}
	#header ul li div:hover{border-bottom:0; }
	#header ul li:not(:nth-last-child(-n+1)){ display:none; }	
	#header ul li:last-child{ display:flex; }	
	
	#footer-nav ul li{ border:0; }
	#footer .wrap{ display:block; }
	#footer .wrap .left{text-align: left;}	
	#footer .wrap .left img{width:100%;max-width: 398px;}
	#footer .wrap .right{ flex:3; display:block; padding:10px 0; }
	#footer .wrap .right #css-table{ margin:0 auto; }
	#footer .wrap .right #css-table .css-td:nth-child(2){display:none;}

	#copyright{ text-align:center; }	
	
}
@media screen and (max-width : 768px) {	
	#header .logo{top: 45px;}
	#header .nav{ right:0; left:0; margin-left:auto; margin-right:auto; border-radius:0; }
	#header nav > span{ padding-left:10px; }
	#header nav > span span{ display:none; }	
}
@media screen and (max-width : 480px) {	
	#header .logo > .word i{ display:none; }
	#header .logo div span{ font-size:15px; }
	#header .logo > .word .title{ display:none; }
	#header .nav span:first-child{ padding-right:5px; }
	#header .nav{ font-size:12px; }
	#header .logo div span{ padding-bottom:0; }
	#header .nav span img{ padding:0 1px 5px 1px; }
	
	#footer-nav ul li{width: 100%;background: #131313;margin: 1px 0;padding: 10px 10px;text-align: center;}	
	#footer-nav ul li span{ display:inline-block; padding:0 10px; }
	#footer-nav ul li div{padding:0; }
	#footer-nav ul li div:hover{ border:0; }
	#footer .wrap .left .slogan{font-size: 15px;}	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*關於我們*/
#index-about{width:100%;padding: 40px 0 90px 0; background-image:url(../../images/container-bg-1.jpg); background-position:bottom; background-repeat:no-repeat; background-size:100%; background-color:#ffffff;}
#index-about .wrap{ display:flex; width:100%; max-width:1200px; margin:0 auto; }
#index-about .left{flex:1;display: flex;align-items:center;justify-content: center;}
#index-about .left img{ width:100%; max-width:684px; text-align:center; }
#index-about .right{
    display: flex;
    align-items:center;
    justify-content: center;
    padding: 0 20px;
}
#index-about .right .title-1{
    color: #8b5d0b;
    font-size: 26px;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;
    padding: 20px 0;
}
#index-about .right .title-2{
    color: #8b5d0b;
    font-size: 26px;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;
    font-weight:bold;
    padding: 2vw 0;
}
#index-about .right .content{
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    font-weight: bold;
    padding: 1vw 0;
}
#index-about .right .note{
    font-size: 16px;
    color: #dd0d0d;
    padding: 20px 0;
    text-align: center;
    font-weight: bold;
    line-height: 25px;
}

@media screen and (max-width: 1024px) {
	#index-about .wrap{ display:block; }
}
@media screen and (max-width: 480px) {
	#index-about .right .title-1{ font-size:20px; }
	#index-about .right .title-2{ font-size:20px; }
	#index-about .right .content br{ display:none; }
}

/*服務項目*/
#index-service{width:100%;padding: 40px 0 150px 0;background-image:url(../../images/container-bg-2.jpg);background-position:bottom;background-repeat:no-repeat; background-size:100%; background-color:#fbf6eb;}
#index-service .wrap{ display:flex; width:100%; max-width:1200px; margin:0 auto; }

#service-wrap{width:100%;overflow:hidden;margin: 30px auto 0 auto;display: flex;flex-wrap: wrap;display: flex;/* align-items:center; */justify-content: center;}
#service-wrap .service-list{width: 23.5%;margin: 20px 0.5%;display: inline-block;vertical-align: top;/* border: 1px solid #bcbcbc; */background: #ffffff;padding: 0px 0 0px 0px;box-shadow: 0 0px 6px rgb(0 0 0 / 25%);}
#service-wrap .service-list .title-area{ position:relative; display: flex;align-items:center;justify-content: center;border-left: 1px solid #f1f0ec;border-right: 1px solid #f1f0ec;}
#service-wrap .service-list .title-area img{ position:absolute; bottom:10px; right:10px; z-index:9; }
#service-wrap .service-list .title-area .left{
    flex: 1;
    text-align: center;
    height: 240px;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 89%);
}
#service-wrap .service-list .title-area .left img{
	width:100%;
	/* border: 1px solid #cccccc; */
	max-width:175px;
	padding: 15px 0 10px 0;
}
#service-wrap .service-list .title-area .right{
    flex: 1;
    color: #155469;
    font-weight: bold;
    font-size: 20px;
    padding: 20px;
}
#service-wrap .service-list .title-area .right > span{
    font-size: 16px;
}
#service-wrap .service-list .title-area .right p{
    font-size: 16px;
    color: #424242;
    padding: 10px 0;
}

#service-wrap .service-list .info-area{
    /* border-top: 2px solid #8dbb00; */
    /* margin-top: 5px; */
    background: #ffffff;
    padding: 10px 20px;
    min-height: 110px;
}
#service-wrap .service-list .info-area .name{
    font-size: 16px;
    color: #a37b3b;
    font-weight: bold;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #cccccc;
    line-height: 25px;
}
#service-wrap .service-list .info-area .name a{
    color: #a37b3b;
}
#service-wrap .service-list .info-area .content{
    font-size: 14px;
    line-height: 22px;
    color: #020202;
}
#service-wrap .service-list .btn-2{float:right;margin: 20px 20px;}

#service-wrap .service-list2{display:flex;align-items:center;justify-content: center;width: 23.5%;margin: 20px 0.5%;/* display: inline-block; */vertical-align: top;/* border: 1px solid #bcbcbc; */background: #3f3c37;padding: 0px 0 0px 0px;box-shadow: 0 0px 6px rgb(0 0 0 / 25%); cursor:pointer; }
#service-wrap .service-list2 > div{ text-align:center; padding:30px; transform: translateY(0px); transition: 0.5s; }
#service-wrap .service-list2:hover > div{ transform: translateY(-20px);}
#service-wrap .service-list2 .title{
    font-size: 24px;
    color: #dcbc8a;
    text-transform: uppercase;
    padding: 20px 0 30px 0;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #a6a6a6;
}
#service-wrap .service-list2 .content{
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
}

@media screen and (max-width : 1200px){
	#service-wrap .service-list , #service-wrap .service-list2{ width:31.5%; }
}

@media screen and (max-width : 800px){
	#index-service{ padding:40px 0 50px 0; }
	#service-wrap .service-list , #service-wrap .service-list2{ width:48%; }
	#service-wrap .service-list .info-area{ min-height:145px; }	
	#service-wrap .service-list .title-area .left{ height:200px; }
}

@media screen and (max-width : 600px){
	#service-wrap .service-list .btn-2{ display:none; }
}
@media screen and (max-width : 480px){
	#service-wrap .service-list , #service-wrap .service-list2{ /*width: 98%;*/ }
	#service-wrap .service-list .title-area{ display:block;text-align: center; }
	#service-wrap .service-list .btn-2{margin: 10px 20px; padding:10px 15px; }
}

/*演藝項目*/
#index-performance{width:100%;padding: 40px 0 100px 0;background-image:url(../../images/container-bg-3.jpg);background-position:bottom;background-repeat:no-repeat; background-size:100%; background-color:#f3ecdd;}
#index-performance .wrap{display:flex;flex-wrap: wrap;width:100%;max-width:1200px;margin:0 auto;}
#index-performance .items{
    /* border: 1px solid #bcbcbc; */
    flex: 31%;
    margin: 10px 10px 30px 10px;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s;
}
#index-performance .items img{width: 95%;margin: 10px;box-shadow: 1px 1px 8px #cccccc;}
#index-performance .items img:hover{
  filter: blur(2px);
  -webkit-filter: blur(2px);	
}

#index-performance .items .title-area{display:flex;width:100%;overflow:hidden;padding: 10px 10px 20px 10px;border-bottom: 1px solid #d3af78;}
#index-performance .items .title-area .left{font-size: 18px;display: flex;align-items:center;/* justify-content: center; */flex: 1;font-weight: bold;}
#index-performance .items .title-area .left a{ color:#3f3c37; font-weight:bold; }
#index-performance .items .title-area .right{/* flex:1; */}
#index-performance .btn-3{margin: 10px auto;}

@media screen and (max-width : 900px) {
	#index-performance .items{flex: 1 40%;}
}

@media screen and (max-width : 600px) {
	#index-performance{ padding:40px 0 0px 0;}
	#index-performance .items{/*flex: 0 100%;*/margin: 10px 10px 20px 0px;}
	#index-performance .items .title-area{display:block;text-align: center;}
	#index-performance .items .title-area .left{padding:5px 0;justify-content: center;font-size: 15px;}
	#index-performance .items .title-area .right{ padding:5px 0; display:none; }
	
}

/*演藝項目*/
#inner-performance .wrap .service-content{font-size: 18px;line-height: 25px;color:#28231c;border-left:5px solid #947e5d;padding: 0 40px 0px 40px;}

#inner-performance{width:100%;padding: 40px 0 150px 0;background-position:bottom;background-repeat:no-repeat; background-size:100%;}
#inner-performance .wrap{display:flex;flex-wrap: wrap;width:100%;max-width:1200px;margin:0 auto;}
#inner-performance .items{
    /* border: 1px solid #bcbcbc; */
    /* flex: 31%; */
    margin: 10px 10px 40px 10px;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s;
}
#inner-performance .items img{width: 95%;margin: 10px;box-shadow: 1px 1px 8px #cccccc;}
#inner-performance .items img:hover{
  filter: blur(2px);
  -webkit-filter: blur(2px);	
}

#inner-performance .items .title-area{display:flex;width:100%;overflow:hidden;padding: 10px 10px 20px 10px;border-bottom: 1px solid #d3af78;}
#inner-performance .items .title-area .left{font-size: 18px;display: flex;align-items:center;/* justify-content: center; */flex: 1;font-weight: b;}
#inner-performance .items .title-area .left a{ color:#3f3c37; font-weight:bold; line-height:20px; }
#inner-performance .items .title-area .right{/* flex:1; */}
#inner-performance .btn-3{margin: 30px auto;}

@media screen and (max-width : 900px) {
	#inner-performance .items{flex: 1 45%;}
}

@media screen and (max-width : 600px) {
	#inner-performance .items{/* flex: 0 100%; */margin:10px 10px 40px 0px;}

	#inner-performance .items .title-area{display:block;text-align: center;}
	#inner-performance .items .title-area .left{padding:5px 0;justify-content: center;font-size: 15px;}
	#inner-performance .items .title-area .right{ padding:5px 0; display:none; }	
}

/*活動花絮*/
#index-activity{width:100%;padding: 40px 0 150px 0;background-image:url(../../images/container-bg-4.jpg);background-position:bottom;background-repeat:no-repeat; background-size:100%; background-color:#ffffff; margin-bottom: -1px;}
#index-activity .wrap{display:flex;flex-wrap: wrap;width:100%;max-width:1200px;margin:0 auto;}

#activity-list{display:flex;/* justify-content: space-between; */flex-wrap:wrap;width:100%;overflow:hidden;text-align: center;padding-bottom: 0vw;/* border-bottom: 1px dashed #878787; */}
#activity-list .items{display: inline-block;vertical-align: top;flex: 0 31%;margin: 10px 1% 50px 1%;box-sizing:border-box;text-align:center;background:#ffffff;}
#activity-list .items > .date{text-align:left;font-size: 13px;line-height: 18px;color: #999999;padding: 0 0 5px 0;}
.activity-detail-title{ color:#bc8e8e; font-size:18px; border-bottom:1px solid #bc8e8e; margin:30px 0; padding:0 0 10px 0; }
#activity-list .photo-mask-content span{ color:#ffffff; font-size:16px; line-height:22px; }
#activity-list .photo-mask-content span i{ font-size:30px; }
#activity-list .items .title{
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding: 0 0 15px 0;
    margin: 15px 0;
    border-bottom: 1px solid #d3af78;
}
#activity-list .items .title a{ color:#000000; text-decoration:none; }
#activity-list .items .content{
    font-size: 15px;
    text-align: left;
    line-height: 20px;
    color: #606060;
}
#index-activity .btn-3{margin: 10px auto;}

@media screen and (max-width:800px) {
	#index-activity{padding: 40px 0 0px 0;}
	#activity-list .items{flex:0 46%;margin: 20px 1.5%;}	
}
@media screen and (max-width:480px) {
	#activity-list .items{ flex:0 100%;margin: 20px 2%; }	
}

/*合作品牌*/
#index-cooperation{width:100%;padding: 40px 0 150px 0; min-height:800px; background-image:url(../../images/juncheng-bg.png);background-position:center;background-repeat:no-repeat; background-color:#f3ecdd;}
#index-cooperation .wrap{display:flex;flex-wrap: wrap;width:100%;max-width:1200px;margin:0 auto;padding: 0 5px;}

#index-cooperation .items{width: 18%;display: flex;justify-content: center;margin: 0.5%;cursor:pointer;background: #ffffff;/* border: 1px solid #bcbcbc; */}
#index-cooperation .items
{ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); transition: all 0.5s ease; }
#index-cooperation .items > div{text-align:center;margin: 0px auto 0 auto;width: 100%;}
#index-cooperation .items .img{max-width: 240px;/* height:160px; */margin: 0 auto;display: flex;align-items:center;justify-content: center;padding: 20px;}
#index-cooperation .items img{display:block;/* padding-bottom:20px; */margin: 0 auto;max-width: 100%;}
#index-cooperation .items .word{text-align:center;color: #000000;padding: 30px 10px 30px 10px;font-size: 16px;letter-spacing: 3px;font-family: 'Noto Sans TC', sans-serif;/* font-weight: bold; */}

@media screen and (max-width : 1024px) {
	#index-cooperation .items{width: 31%;max-width:100%;margin: 1%;}
}
@media screen and (max-width : 600px) {
	#index-cooperation .items{width: 49%;margin: 0.5%;}
}
@media screen and (max-width : 450px) {
	#index-cooperation{ padding:40px 0 50px 0;}
	#index-cooperation .items{ /*width:100%;*/ }  
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 關於我們 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.inner-about{ max-width:800px !important; }

.inner-about .youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
	margin:30px 0;
}
.inner-about .youtube-container .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    height: 100%;
}

/*合作案例*/
#inner-about2{width:100%;padding: 40px 0 30px 0;background-image:url(../../images/container-bg-5.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;background-color:#fbf6eb;}
#inner-about2 .wrap{display:flex;flex-wrap:wrap;width:100%;max-width:1200px;margin: 20px auto;}
#inner-about2 .wrap .items{width: 40%;font-size: 18px;font-weight: bold;padding: 8px 20px 8px 20px;margin: 5px 5%;}
#inner-about2 .wrap .items a{
    padding: 0 0 0 40px;
    display: inline-block;
    line-height: 22px;
}
#inner-about2 .wrap .items:before{position: absolute;content:url(../../images/tick.png);vertical-align: middle;padding-right: 5px;}
#inner-about2 .wrap .items.bg1{ background-color:#fbf6eb; }
#inner-about2 .wrap .items.bg2{ background-color:#f1eada; }

/*
#inner-about2 .wrap .items:nth-child(2n) {
	background-color:#fbf6eb;
}
    
#inner-about2 .wrap .items:nth-child(2n+1) {
	background-color:#f1eada;
}
*/

@media screen and (max-width : 800px) {
	#inner-about2 .wrap .items{ width:100%; font-size:15px; }
	#inner-about2 .wrap .items.bg1 , #inner-about2 .wrap .items.bg2{ background-color:transparent; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 服務項目 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


#inner-service{width:100%;padding: 40px 0 150px 0; background-color:#ffffff;}
#inner-service .wrap{ width:100%; max-width:1200px; margin:0 auto; }
#inner-service .wrap .service-content{font-size: 18px;line-height: 25px;color:#28231c;border-left:5px solid #947e5d;padding: 0 40px 0px 40px;}

#inner-service .youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
#inner-service .youtube-container .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*影音花絮*/
#inner-video{width:100%;overflow:hidden;margin: 30px auto 0 auto;}
#inner-video .video_area{width: 47.5%;margin: 20px 1%;display: inline-block;vertical-align: top;line-height: 25px;/* border: 1px solid #bcbcbc; *//* padding: 10px; */}
#inner-video .video_area .title{color:#000000;font-weight:bold;font-size: 16px;padding: 15px 0 0 0;}
#inner-video .video_area .title a{ /*color:#000000; text-decoration:none;*/ }

#inner-video .video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
#inner-video .video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

#inner-service .editor{ padding:5vw 20px; }
#inner-service .line{ border-bottom:1px solid #dcbc8a; width:100%; height:1px; margin:5vw 0; }


/*照片*/
.flex_gallery{ position:relative; }
.flex_gallery_mask{ opacity: 0; position:absolute; width:100%; height:100%; top:0; left:0; background-color: rgba(0,0,0, 0.7); color:#FFF;  display:flex; align-items:center;}
.flex_gallery:hover .flex_gallery_mask{ opacity: 1; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; cursor:pointer; cursor:hand; }
.flex_gallery_border{/* border:1px solid #FFF; *//* margin: 10px; *//* width: 100%; *//* height: 100%; */margin:0 auto;display:flex;align-items:center;}



@media screen and (max-width : 768px) {
	#inner-video .video_area{width:100%;margin: 20px 0;}	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 服務項目內頁 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/*表演花絮*/
#service-video{width:100%;overflow:hidden;margin: 30px auto 0 auto;}
#service-video .video_area{width: 47.5%;margin: 20px 1%;display: inline-block;vertical-align: top;line-height: 25px;border: 1px solid #bcbcbc;padding: 10px;}
#service-video .video_area .title{color:#000000;font-weight:bold;font-size: 16px;padding: 15px 0 0 0;}
#service-video .video_area .title a{ /*color:#000000; text-decoration:none;*/ }
#service-video .video_area .title:before{content:url(../../images/video-icon-1.png);vertical-align:middle;padding-right: 5px;}

#service-video .video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
#service-video .video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width : 768px) {
	#service-video .video_area{width:100%;margin: 20px 0;}	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 聯絡我們 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*聯絡我們*/
#index-contact{width:100%;max-width: 1200px;margin: 0 auto;min-height:400px;padding: 30px 0px;overflow:hidden;background:url(../../images/contact-bg.png) no-repeat top center;}

#index-contact .slogan{
    max-width: 900px;
    margin: 0 auto;
    padding: 2vw 10px 6vw 10px;
    font-size: 16px;
    line-height: 25px;
    color: #857253;
    font-weight: bo;
}

#index-contact .contact-form{/*display:flex;*/}
#index-contact .contact-form > .left{flex:1;padding: 0 15px;}
#index-contact .contact-form > .right{flex:1;padding: 0 15px;}

.contact_info{position:relative;/* max-width:1200px; */padding: 0 10px 40px 10px;overflow:hidden;}
.contact_info .title{ font-weight:bold; font-size:20px; padding:0 0 20px 0; }
.contact_info .contact_info_left{float:left;/* max-width:400px; */width: 50%;font-size:15px;padding: 0px 30px 0 0px;box-sizing: border-box;letter-spacing:1px;color:#4f4f4f;line-height:30px;}
.contact_info .contact_info_right{float: left;width: 50%;margin: 0 0 30px 0;}

.contact_info_btitle{ width:100%; border-bottom:1px solid #6d6b64; }
.contact_info_area{display: flex;width:100%;overflow:hidden;line-height:25px;padding: 7px 0;/* border-bottom:1px dashed #a7a7a4; */}
.contact_info_title{width: 20%;min-width: 120px;color: #1f1f1f;/* background:#c6e0a8; */text-align: left;margin: 0 5% 0 0;padding:0 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.contact_info_title i{
    padding-right: 10px;
    color: #dcbc8a;
}
.contact_info_content{width: 70%;word-break: break-all;}
.contact_info_content img{vertical-align: -35%;}

@media screen and (max-width : 1200px) {
	.contact-info .left{ flex:1; width:auto; }

	.contact-info .right{ flex:1; width:auto; }	
}
@media screen and (max-width : 1024px) {
	.contact-info .wrap{ display:block; }
	#index-contact .contact-form{padding-top: 0px;}
}
@media screen and (max-width : 768px) {
	#index-contact .contact-form{ display:block; }
	.contact_info .contact_info_left{ float:none; width:100%; }
	.contact_info .contact_info_right{ float:none; width:100%; display: none; }
	
}
@media screen and (max-width : 480px) {
	.contact-info .left .css-td:nth-child(2){ display:none; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 聯絡我們表單 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#inner-signup{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
#inner-signup i{ font-style:normal; color:#F00; font-weight:bold; }
#inner-signup .caption{text-align: center;font-size: 16px;color: #000000;font-weight:bold;line-height:28px;/* font-family: 'Noto Sans TC', sans-serif; */border-top: 1px solid #d3d3d3;margin: 0 0 50px 0;padding: 50px 10px 0 10px;}
#inner-signup .caption img{ display:block; margin:0 auto; padding:10px 0; }
#inner-signup .flex-table{display:flex;max-width: 1200px;width:100%;margin:0 auto;padding:0 10px;}
#inner-signup .flex-table .flex-th{flex:1;text-align:left;display:flex;align-items:center;font-size:15px;border-top:1px solid #c9c9c9;border-right: 1px solid #c9c9c9;}
#inner-signup .flex-table .flex-td{flex:4;padding: 5px 10px;font-size: 16px;text-align:left;border-top:1px solid #c9c9c9;min-height: 70px;/* display: flex; *//* align-items:center; */}
#inner-signup .flex-table .flex-td span.tips{ display:inline-block; color:#00629f; padding:10px 0; }
#inner-signup .flex-table .middle{ display:flex; align-items:center; }
#inner-signup .flex-table input[type='text'],
#inner-signup .flex-table input[type='file']
{width:100%;background: #fbf6eb;border:0;color:#333333;font-size:15px;padding:15px 20px;margin: 5px 0;box-sizing: border-box;}
#inner-signup .flex-table textarea
{width:100%;background: #fbf6eb;border:0;color:#333333;font-size:15px;padding:15px 20px;margin: 5px 0; min-height:200px; box-sizing: border-box;}
#inner-signup .flex-table select{width:100%;background: #fbf6eb;border:0;color:#333333;font-size:15px;padding:15px 20px;margin: 5px 0;box-sizing: border-box;}
#inner-signup .flex-area{display:flex;}
#inner-signup .flex-area .flex-column{flex: 1;padding: 0 5px; font-size:15px; }
#inner-signup .flex-area .flex-column2{flex: 2;padding: 0 5px;}
#inner-signup .flex-area .flex-column5{flex: 5;padding: 0 5px;}
#inner-signup .flex-table .zipcode{ font-size:15px; color:#787878; }
#inner-signup .flex-table .zipcode span{ font-size:13px; color:#00629f; padding:0 10px; }
#inner-signup span.btn{display: inline-block;border: 1px solid #cf6b00;color: #cf6b00;cursor:pointer;margin: 5px 3px;text-decoration: none;padding: 10px 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}

@media screen and (max-width : 768px) {
  	#inner-signup .flex-area{ display:block; }
  	#inner-signup .flex-area .flex-column{ padding:5px; }
}

@media screen and (max-width : 480px) {
	#inner-signup .flex-table .flex-th{ border:0; padding:15px 0; font-weight:bold; }
	#inner-signup .flex-table{display:block;}
	
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> 合作品牌 <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*編輯器內容*/
#inner-coop1{width:100%;padding: 40px 0 90px 0;background-image:url(../../images/container-bg-1.jpg);background-position:bottom;background-repeat:no-repeat;background-size:100%;background-color:#ffffff;line-height: 25px;font-size: 18px;}
#inner-coop1 .wrap{display:flex;width:100%;max-width:1200px;margin:0 auto;line-height: 25px;font-size: 18px;}
#inner-coop1 .left{flex:1;display: flex;align-items:center;justify-content: center;}
#inner-coop1 .left img{ width:100%; max-width:684px; text-align:center; }
#inner-coop1 .right{
    display: flex;
    align-items:center;
    justify-content: center;
    padding: 0 20px;
	width:100%;
}
#inner-coop1 .right .title-1{
    color: #8b5d0b;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 40px;
    padding: 20px 0;
}
#inner-coop1 .right .title-2{
    color: #8b5d0b;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    line-height: 25px;
    font-weight:bold;
    padding: 2vw 0;
}
#inner-coop1 .right .content{
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    font-weight: bold;
    padding: 1vw 0;
}


@media screen and (max-width: 1024px) {
	#inner-coop1 .wrap{ display:block; }
}
@media screen and (max-width: 480px) {
	#inner-coop1 .right .title-1{ font-size:20px; }
	#inner-coop1 .right .title-2{ font-size:20px; }
	#inner-coop1 .right .content br{ display:none; }
}

/*合作案例*/
#inner-coop2{width:100%;padding: 40px 0 150px 0;background-image:url(../../images/container-bg-5.jpg);background-position:bottom;background-repeat:no-repeat; background-size:100%; background-color:#fbf6eb;}
#inner-coop2 .wrap{ display:flex; width:100%; max-width:1200px; margin:0 auto; }

#coop2-wrap{width:100%;overflow:hidden;margin: 30px auto 0 auto;padding: 0 10px;display: flex;flex-wrap: wrap;}
#coop2-wrap .coop2-list{width: 30.5%;margin: 20px 1%;display: inline-block;vertical-align: top;/* border: 1px solid #bcbcbc; */background: #ffffff;padding: 0px 0 0px 0px;box-shadow: 0 0px 6px rgb(0 0 0 / 25%);}
#coop2-wrap .coop2-list .title-area{ position:relative; display: flex;align-items:center;justify-content: center;border-left: 1px solid #f1f0ec;border-right: 1px solid #f1f0ec;}
#coop2-wrap .coop2-list .title-area img{ position:absolute; bottom:10px; right:10px; z-index:9; }
#coop2-wrap .coop2-list .title-area .left{
    flex: 1;
    text-align: center;
    height: 240px;
}
#coop2-wrap .coop2-list .title-area .left img{
	width:100%;
	/* border: 1px solid #cccccc; */
	max-width:175px;
	padding: 15px 0 10px 0;
}
#coop2-wrap .coop2-list .title-area .right{
    flex: 1;
    color: #155469;
    font-weight: bold;
    font-size: 20px;
    padding: 20px;
}
#coop2-wrap .coop2-list .title-area .right > span{
    font-size: 16px;
}
#coop2-wrap .coop2-list .title-area .right p{
    font-size: 16px;
    color: #424242;
    padding: 10px 0;
}

#coop2-wrap .coop2-list .info-area{
    /* border-top: 2px solid #8dbb00; */
    /* margin-top: 5px; */
    background: #ffffff;
    padding: 20px 20px 0px 20px;
    min-height: 160px;
}
#coop2-wrap .coop2-list .info-area .name{
    font-size: 18px;
	line-height:25px;
    color: #a37b3b;
    font-weight: bold;
    padding: 0 0 10px 0;
    margin: 0 0 0px 0;
    border-bottom: 1px dashed #cccccc;
}
#coop2-wrap .coop2-list .info-area .content{
    font-size: 16px;
    min-height: 100px;
    line-height: 22px;
    color: #020202;
    padding: 20px 0px;
    border-bottom: 1px dashed #cccccc;
}
#coop2-wrap .coop2-list .btn-2{float:right;margin: 20px 20px;}

#coop2-wrap .coop2-list2{display:flex;align-items:center;justify-content: center;width: 23.5%;margin: 20px 0.5%;/* display: inline-block; */vertical-align: top;/* border: 1px solid #bcbcbc; */background: #3f3c37;padding: 0px 0 0px 0px;box-shadow: 0 0px 6px rgb(0 0 0 / 25%); cursor:pointer; }
#coop2-wrap .coop2-list2 > div{ text-align:center; padding:30px; transform: translateY(0px); transition: 0.5s; }
#coop2-wrap .coop2-list2:hover > div{ transform: translateY(-20px);}
#coop2-wrap .coop2-list2 .title{
    font-size: 24px;
    color: #dcbc8a;
    text-transform: uppercase;
    padding: 20px 0 30px 0;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #a6a6a6;
}
#coop2-wrap .coop2-list2 .content{
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
}

@media screen and (max-width : 1200px){
	#coop2-wrap .coop2-list , #coop2-wrap .coop2-list2{width: 31%;}
}

@media screen and (max-width : 800px){
	#coop2-wrap .coop2-list , #coop2-wrap .coop2-list2{ width:48%; }
	#coop2-wrap .coop2-list .title-area .left{ height:160px; }
}

@media screen and (max-width : 480px){
	#coop2-wrap .coop2-list , #coop2-wrap .coop2-list2{ /*width: 100%;*/ }
	#coop2-wrap .coop2-list .info-area .name{ font-size:16px; }
	#coop2-wrap .coop2-list .info-area .content{ font-size:14px; border-bottom:0; }
	#coop2-wrap .coop2-list .title-area{ display:block;text-align: center; }
	#coop2-wrap .coop2-list .btn-2{ display:none; }
}

/*品牌實績*/
#inner-coop3{width:100%;padding: 40px 0 50px 0;background-color:#ffffff;display: flex;flex-wrap: wrap;}
#inner-coop3 .wrap{display:flex;flex-wrap: wrap;width:100%;max-width:1200px;margin:0 auto;}

#inner-coop3 .coop3-list{display: flex;flex-wrap: wrap;align-items: stretch;width: 48%;margin: 20px 1%;vertical-align: top;line-height: 25px;/* border: 1px solid #bcbcbc; */padding: 0px 0px;/* box-shadow: 0 0px 6px rgb(0 0 0 / 25%); */}
#inner-coop3 .coop3-list .caption{width:100%;overflow:hidden;color: #8d6013;font-size: 18px;font-weight: bold;/* border-bottom: 2px solid #8dbb00; */padding: 0 0 0px 0;margin: 0 0 10px 0;}
#inner-coop3 .coop3-list .caption a{ color: #a37b3b; }
#inner-coop3 .coop3-list .caption span{


    font-size: 16px;
    color: #424242;
    padding: 0 15px;
}
#inner-coop3 .coop3-list .title-area{flex: 1;padding: 0 0 10px 0px;text-align: center;}
#inner-coop3 .coop3-list .title-area img{box-shadow: 0 5px 8px rgba(0, 0, 0, 0.25);/* padding: 10px; */width:100%;max-width:175px;}


#inner-coop3 .coop3-list .info-area{
    flex: 1.5;
    padding: 0px 30px;
    color: #303030;
    font-size: 16px;
}
#inner-coop3 .coop3-list .info-area .info{
    display: flex;
    align-items: stretch;
    /* justify-content: center; */
    border-top: 1px solid #dcbc8a;
}
#inner-coop3 .coop3-list .info-area .info{/* border-bottom: 1px solid #c8c6b3; */padding: 10px 0;font-size: 16px;font-weight: bold;}
#inner-coop3 .coop3-list .info-area .info .left{
    /* background: #dedccb; */
    border-right: 1px solid #c8c6b3;
    min-width: 90px;
    flex: 1;
    font-size: 16px;
    padding: 5px 10px;
    display: flex;
    align-items:center;
    justify-content: center;
}
#inner-coop3 .coop3-list .info-area .info .right{
    flex: 3;
    font-size: 16px;
    padding: 5px 10px;
    word-break:break-all;
    display: flex;
    align-items:center;
    /* justify-content: center; */
}

@media screen and (max-width : 900px){
	#inner-coop3 .coop3-list{ display:block; text-align:center; }
}

@media screen and (max-width : 480px){
	#inner-coop3 .coop3-list{ /*width:98%;*/ }
	#inner-coop3 .coop3-list .title-area{ text-align:center; }
	#inner-coop3 .coop3-list{ display:block; }
	#inner-coop3 .coop3-list .caption{ font-size:14px; }
	#inner-coop3 .coop3-list .info-area{ padding:0px 10px; }
	#inner-coop3 .coop3-list .info-area .info{ font-size:14px; }
	
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Mobile Menu <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


body { transition: background-color .2s; }
#wrapper { transition: margin-left .2s; }

.sidenav { display:flex; flex-direction: column; height: 100%;overflow:hidden;width: 0;position: fixed;z-index: 9999;top: 0;right: 0;background-color: rgba(255, 255, 255, 1);overflow-x: hidden;transition: 0.2s;/*padding-top: 60px;*/box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.sidenav .closebtn {font-size: 25px;position: absolute;top: 35px;right: 10px;color: #FCDDA7;}
.sidenav .head {width:100%;position: relative;overflow:hidden;/* text-align: center; */padding: 19px 0 19px 15px;border-top: 3px solid #5B5243;border-bottom: 1px solid #ebebeb;background: url(../../images/header-bg.jpg) repeat;}
.sidenav .head img{max-width: 200px;}

.sidenav .menu-top{ }
.sidenav .menu-bottom{width: 100%;height: 100%;background: #ebebeb;padding: 20px 0 10px 0;display: flex;align-items: flex-end;justify-content: center;}
.sidenav .menu-bottom .search{padding:10px 20px;}
.sidenav .menu-bottom .search .items{
    margin: 20px 0;
    display:flex;
}
.sidenav .menu-bottom .search .items .lefter{
	flex: 1;
	width: 80px;
	font-size: 16px;
	color: #3c3c3c;
	display: flex;
	align-items:center;
	justify-content: center;
}
.sidenav .menu-bottom .search .items .lefter i{color: #0557A1;padding-right:8px;}
.sidenav .menu-bottom .search .items .righter{flex: 1;padding: 0 0 0 10px;}
.sidenav .menu-bottom .search .items .righter .search-items{ display:flex;}
.sidenav .menu-bottom .search .items .righter .search-items .input{flex: 1;}


.sidenav .menu-bottom .search .items .righter .search-items .input input[type="text"]{border:0;outline: 0;max-width: 100px;padding: 15px;-webkit-border-top-left-radius: 20px;-webkit-border-bottom-left-radius: 20px;-moz-border-radius-topleft: 20px;-moz-border-radius-bottomleft: 20px;border-top-left-radius: 20px;border-bottom-left-radius: 20px;}
.sidenav .menu-bottom .search .items .righter .search-items .button{flex:1;background: #0557A1;color: #ffffff;padding: 15px 20px;-webkit-border-top-right-radius: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-topright: 20px;-moz-border-radius-bottomright: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;}


.sidenav .menu-bottom .community{padding: 10px 5px;text-align: center;}
.sidenav .menu-bottom .copyright a{color: #939797;text-decoration:none;}
.sidenav .menu-bottom .copyright a:hover{ text-decoration:underline; }



@media screen and (max-height: 450px) {
 .sidenav {padding-top: 15px;}
 .sidenav a {font-size: 18px;}
}
/*選單 - 選項*/


#ajax-sidenav > div {position:relative;width: 100%;border-left: 5px solid #5B5243;border-bottom: 1px solid #ebebeb;color: #000000;padding: 15px 25px;line-height:20px;box-sizing:border-box;cursor: pointer;cursor: hand;font-size: 14px;letter-spacing: 3px;}
#ajax-sidenav > div:before {/*content:url(../../images/header-icon.png);vertical-align:0; padding-right:10px;color: #000000;*/}
#ajax-sidenav > div i {position:absolute;right: 15px;top: 17px;}
#ajax-sidenav > div.title { background: #b19bb5; color: #ffffff; }
#ajax-sidenav > div:hover { color:#5c5244; background:#FCDDA7; }
#ajax-sidenav > div span { position:absolute; right:0; top: 0; display:block; padding: 15px 20px; border-left: 1px solid #ebebeb;/* border-right: 1px solid #ebebeb; */ }
#ajax-sidenav > div.nav {background:#ECECEC;border-bottom: 1px solid #CDCDCD;color: #5B5243;}
#ajax-sidenav > div.nav:before { content:""; padding-right:0px; }
#ajax-sidenav > div img { vertical-align:middle; padding-right:8px; }
.submenu-nav { width: 100%; overflow:hidden; display:none; background-color: #FFFFFF; }
.submenu-nav div {position:relative;font-size: 14px;background: #ffffff;line-height: 20px;border-bottom: 1px solid #ebebeb!important;padding: 18px 30px 18px 55px !important;cursor:pointer;}
.submenu-nav div:before{position: absolute;left: 30px;top: 20px;font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f111";color: #e2e2e2;padding-right: 8px;}
.submenu-nav div a{font-size: 14px;color: #000000 !important;}
.submenu-nav div i{position:absolute;top:20px;right: 16px;color: #000000;}
.submenu-nav.layer3 div{padding: 18px 10px 18px 80px !important;}
.submenu-nav.layer3 div:before{position: absolute;left: 55px;top: 20px;font-family: "Font Awesome 5 Free";font-weight: 100;content: "\f111";color: #e2e2e2;padding-right: 8px;}


.submenu2{background:#ebebeb !important;border-left: 5px solid #9B7354;}

.submenu3{background:#f5f5f5 !important;border-left: 5px solid #9B7354;}

.copyright{text-align: center;color: #939797;line-height: 18px;}

@media screen and (max-height: 450px) {
 .sidenav { padding-top: 15px;}

 .sidenav a { font-size: 18px;}
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> checkbox/radio template <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


/* The container */
.container-item {
    position: relative;
    color: #474747;
    letter-spacing: 2px;
    padding-left: 35px;
    padding-right: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 16px;

    font-weight:normal;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border:1px solid #b9b7b7;
}

/* On mouse-over, add a grey background color */
.container-item:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-item input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container-item input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container-item .checkmark:after {
    left: 6px;
    top: 1px;
    width: 4px;
    height: 10px;
    border: solid #0067B7;

    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}




/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Bxslider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

ul.bxslider { margin:0; padding:0; }
#home_banner {display: inline-block;width: 100%;overflow: hidden;position: relative;background:#f3f8fb;}

#home_banner ul{ list-style:none; }


#home_banner li { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
#home_banner img { display: none; }
#home_banner .bxslider { opacity: 0; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a:hover, #home_banner .bx-wrapper .bx-pager.bx-default-pager a.active {background: #FCDD91;border: 1px solid #ffffff;}
#home_banner .bx-wrapper .bx-pager.bx-default-pager a {background-color: white;border:1px solid #ccc;width: 12px;height: 12px;margin: 0 3px;border-radius: 50%;box-shadow:2px 2px 8px rgba(15%,15%,40%,0.1);}
#home_banner .bx-wrapper .bx-pager { bottom: 32px; opacity: 1; }
#home_banner .bx-wrapper .bx-controls-direction{ opacity: 0; }
#home_banner .word { font-size: 15px; position: absolute; margin-left: -187px; margin-top: -116px; left: 50%; top: 50%; color: #673D3A; letter-spacing: 25px; opacity: 0.2; }
#home_banner .word b { font-weight: bold; }
#home_banner .down { position: absolute; right: 30px; bottom: 32px; width: 34px; height: 28px; z-index: 99; cursor: pointer; opacity: 0; }
#home_banner .down img { display: block; }
#home_banner .bx-prev{ left:5%; }
#home_banner .bx-next{ right:5%; }


/* line 84, scss/_header.scss */
.headerTitleContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  /*
  @media only screen and (max-width: 640px), screen and (max-height: 900px) {     
  	.headline {
  		margin: 13rem auto 0 auto;
  	}
  }
  @media only screen and (min-width: 641px) and (max-width: 768px) {
  	.headline {
  		margin: 10rem auto 0 auto;
  	}
  }
  */
}
/* line 90, scss/_header.scss */
.headerTitleContainer .headline {
  text-align: center;
  margin: 16rem auto 0 auto;
  width: 70%;
  max-width: 600px;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  /* background-color:rgba(0, 0, 0, 0.5); */
  padding:10px 0;
}

.headerTitleContainer a{ 
  text-decoration:none;
}

.headerTitleContainer .headline p{
    padding: 20px 0;
    font-size: 40px;
    letter-spacing: 5px;
}
.headerTitleContainer .headline h2{
    letter-spacing: 3px;
    color: #F4D885;
}

/* line 96, scss/_header.scss */
.headerTitleContainer .button, .headerTitleContainer .headerButton {
  display: none;
}


@media screen and (max-width : 1024px) {
	
	#home_banner .bx-controls-direction
	{
		display:none;	

	}
	
	#home_banner .bx-wrapper .bx-pager.bx-default-pager a {
		 width: 15px;
		 height: 15px;
	}
	#home_banner, #home_banner li {

		max-height: 600px;

		height: 600px;
		/*margin-top: 75px;*/
	}
}

@media only screen and (max-width: 1024px) {
  /* line 104, scss/_header.scss */
  .headerTitleContainer .headline {
    margin: 6rem auto 0 auto;
  }
  .headerTitleContainer .headline p{ font-size:30px; padding:5px 0; }  
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
  /* line 110, scss/_header.scss */
  .headerTitleContainer .headline {
    margin: 7rem auto 0 auto;
  }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common Animation <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

@keyframes widthGroup-1 {
    0% { width: 0; }	
    100%   { width: 150px; }
}

.scaleZoom {

	-webkit-animation: scaleZoom 2s ease both;
	animation: scaleZoom 2s ease both;
}
@-webkit-keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@keyframes scaleZoom {
	from { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }
}

.scaleZoom-2 {
	-webkit-animation: scaleZoom-2 2s ease both;
	animation: scaleZoom-2 2s ease both;
}
@-webkit-keyframes scaleZoom-2 {
	from { opacity: 0; -webkit-transform: scale(1.05); }
}
@keyframes scaleZoom-2 {
	from { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); }
}

/*區塊位移效果*/
.transImg{
	transition: 0.3s;
}
.transImg:hover{
	transform: translateY(-5px);
}
	
/*image zoom*/
.photo-zoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.photo-zoom img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.photo-zoom:hover img {

  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
	
/*------image mask--------*/
.photo-mask{opacity:0;position:absolute;left:0;bottom:0;color:#ffffff;width:100%;height:100%;background-color:rgba(35, 35, 35, 0.9);letter-spacing:3px;text-align:center;padding:4vw; box-sizing:border-box; line-height:22px;-webkit-transition:.2s;-ms-transition:.2s;-moz-transition:.2s;}
.photo-mask-content{ width:100%; height:100%; display:flex; align-items:center; justify-content: center; }
.photo-mask .line{border:1px solid #FFFFFF;}
.gallery{ position:relative; }
.gallery .photo-mask{ opacity:0; cursor:pointer; }
.gallery:hover .photo-mask{ opacity:1; }
.gallery:hover .title{ opacity:0; }	
	
/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position:relative; height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; overflow:auto; background-color:rgba(0, 0, 0, 0.5); z-index:100000000 }
.Loadaction {width: 220px;height: 60px;top: 42%;position: absolute;margin-left: auto;margin-right: auto;padding-top: 10px;left: 0;right: 0;background-color:rgba(0, 0, 0, 0.5);-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;}
.Actionupload_Text {font-size:13px;color:#FFFFFF;height: 25px;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cssa { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:10px; padding-left:10px }
.cssb { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }
.cssc { padding-bottom:3px; letter-spacing:1px; font-size:12px; padding-left:10px; padding-right:10px; height:40px }
.cssd { font-family:Verdana; font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }
a.pagelink_no:link { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink_no:visited { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:active { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:hover { color: #003399; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:link { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink:visited { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:active { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:hover { color: #333333; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }

a.pagelink_ch:link { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:visited { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:active { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:hover { color: #cc3300; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Table <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.zebra td, 
.zebra th {
  padding: 10px;
  font-size: 16px;
  /*border-bottom: 1px solid #f2f2f2;*/
}
/*使用:nth-child(even)给表格的奇数行添加背景和阴影效果*/
.zebra .alternate,
.zebra tr:nth-child(even) {
  background: #f5f5f5;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.zebra th {
  text-align: center;
  font-size: 16px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-bottom: 1px solid #ccc;
  background-color: #eee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
  background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
  background-image: -ms-linear-gradient(top, #f5f5f5, #eee);
  background-image: -o-linear-gradient(top, #f5f5f5, #eee);
  background-image: linear-gradient(top, #f5f5f5, #eee);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee)";

}
/*使用 :first-child设置表格表头第一个单元格左上角为圆角*/
.zebra th:first-child {
  border-radius: 6px 0 0 0;
}
/*使用 :last-child设置表格表头最后一个单元格右上角为圆角*/

.zebra th:last-child {
  border-radius: 0 6px 0 0;
}

.zebra a{color: #2258c5;}

@media screen and (max-width : 768px) {
	.visible-no-m{ display:none; }
}
@media screen and (max-width : 480px) {

	.visible-no-s{ display:none; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.pageselect{border:1px solid #CCCCCC;padding: 4px 5px;font-size:12px;}
.pageselect:hover{ background:#ebebeb; }
a.pagelink_no{color:#333333;text-decoration:none;border: 1px solid #cccccc;padding: 7px 5px;display: inline-block;margin: 5px 0;}
a.pagelink_no:hover{ background:#ebebeb; }
a.pagelink{color:#333333;text-decoration:none;border: 1px solid #CCCCCC;padding: 5px 10px;}
a.pagelink:hover{ background:#ebebeb; }
a.pagelink_ch{color:#333333;padding: 5px 10px;border: 1px solid #cccccc;background: #ebebeb;text-decoration:none;}