@charset "utf-8";

body , .wrapper{ color:#333;}


/*a 鏈結字*/
a { color:#333;}
a:hover, a:focus { color:#333; text-decoration:none; }


.flex-container{ display: flex; flex-wrap:wrap; }


/*方形圖設定*/
.item-thumb-frame { position: relative; display: block; width: 100%; overflow: hidden; }
.item-thumb { display: block; max-width: 100%; padding-bottom: 100%; }


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

/*page 分頁*/
.page{
	margin: 60px 0 10px 0;
	font-size:0.75rem;
	text-align:center;
	color:#666;
}
.page a , .page span{
	display:inline-block;
	border: 1px solid #23459B;
	padding: 2px 6px;
	margin:0 3px;
	font-size:0.9rem; 
	-ms-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-bborder-radius:4px;
	border-radius:4px;
	min-width:36px;
}
.page span{ background:#EA9F14; color:#fff; border-color:#d28f12;}

.page a{ color:#23459B; }
.page a:hover{ background:#23459B; color: #fff; border-color:#23459B; }


/* 多少筆 */
.page_total {}

/* 分頁資訊 */
.page_info {}

/* 上頁 */
.page_prev {}

/* 分頁數字 */
.page_item {}

/* 目前選中的分頁 */
.page_current { background:#00D0D2; color: #fff; }
/* 下頁 */
.page_next {}

/* 下十頁 */
.page_next_group {}







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

.wrapper{ padding-left:375px;}


/*左側區塊*/
.sidebox{
	position:fixed;
	z-index:5;
	top:0;
	left:0;
	width:375px;
	background:#fff;
}
.sidebox:before{
	position:absolute;
	z-index:-2;
	top:0;
	right:7px;
	width:2px;
	height:70%;
	content:"";
	background:#3F3F3F;
}
.sidebox:after{
	position:absolute;
	z-index:-2;
	top:72%;
	right:7px;
	width:12px;
	height:12px;
	content:"";
	background:#E26B1E;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
/*.sidebox.stick { position: fixed; }*/

.sidebox-top{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:100%;
	height:200px;
	
	background:url(../images/sidebox-index-top.png) no-repeat center bottom;
	background-size:cover;
}
.sidebox-bottom{ 
	width:100%;
	height:40px;
	margin-top:10px;
	
	background:#0B142C;
}


.logo{ max-width:260px; margin:120px auto 15px auto; }
.logo img{ display:block; max-width:100%; height:auto; }

.menu-list{ max-width:260px; margin:15px auto 15px auto; text-align:right; }
.menu-list li{ position:relative; display:inline-block; width:220px; text-align:left; margin-bottom:15px; }
.menu-list li:before{
	position:absolute;
	z-index:-1;
	bottom:0;
	right:0;
	width:100%;
	height:45px;
	content:"";
	background:url(../images/menuli-dec.png) no-repeat center;
	background-size:cover;
}
.menu-list li a{ display:block; padding:10px 45px 10px 15px; text-align:center; }
.menu-list li:hover a{ color:#E26B1E; }
.menu-list li:hover:before{ background:url(../images/menuli-dec-hover.png) no-repeat center; background-size:cover; }

.sidebox-divide{ width:260px; margin:15px auto; height:5px; background:#272828; }

.sidebox-qrcode{ max-width:110px; margin:15px auto 15px auto; }
.sidebox-qrcode img{ display:block; max-width:100%; height:auto; }



/*左側區塊-首頁設定*/
.sidebox-top.sidebox-index{ background:url(../images/sidebox-work-top.png) no-repeat center bottom; background-size:cover; }
.sidebox-bottom.sidebox-index{ background:#72321c; }

/*左側區塊-關於我們設定*/
.sidebox-top.sidebox-about{ background:url(../images/sidebox-about-top.png) no-repeat center bottom; background-size:cover; }
.sidebox-bottom.sidebox-about{ background:#2b4a2b; }

/*左側區塊-最新消息設定*/
.sidebox-top.sidebox-news{ background:url(../images/sidebox-news-top.png) no-repeat center bottom; background-size:cover; }
.sidebox-bottom.sidebox-news{ background:#731b2d; }

/*左側區塊-作品介紹設定*/
.sidebox-top.sidebox-work{ background:url(../images/sidebox-index-top.png) no-repeat center bottom; background-size:cover; }
.sidebox-bottom.sidebox-work{ background:#0B142C; }

/*左側區塊-聯絡我們設定*/
.sidebox-top.sidebox-contact{ background:url(../images/sidebox-contact-top.png) no-repeat center bottom; background-size:cover; }
.sidebox-bottom.sidebox-contact{ background:#17677a; }




/*頁尾*/
.footer{ position:relative;}
.footer-bg{ position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; background:#27395E; }
.footer-bottom{ width:100%; height:45px; background:#0D192C; }

.footer , .footer a{ color:#fff; }
.footer a:hover{ text-decoration:underline; }

.footer-content{ position:relative; padding:20px 30px; }
.web-copyright{ font-size:0.95em; margin-bottom:10px; font-weight:600; }
.footer-info-list{ font-size:0.9em;  }
.footer-info-list li{ width:30%; }
.web-designer{ position:absolute; bottom:-35px; right:30px; font-size:0.7em; text-align:right; }


/*footer-首頁設定*/
.footer-bg.footer-index{ background:#72321c; }
.footer-bottom.footer-index{ background:#38160e; }

/*footer-關於我們設定*/
.footer-bg.footer-about{ background:#2b4a2b; }
.footer-bottom.footer-about{ background:#122513; }

/*footer-最新消息設定*/
.footer-bg.footer-news{ background:#731b2d; }
.footer-bottom.footer-news{ background:#460d1b; }

/*footer-作品介紹設定*/
.footer-bg.footer-work{ background:#27395E; }
.footer-bottom.footer-work{ background:#0D192C; }

/*footer-聯絡我們設定*/
.footer-bg.footer-contact{ background:#17677a; }
.footer-bottom.footer-contact{ background:#062c31; }





.banner{}
.banner img{ display:block; max-width:100%; height:auto; }



.sec{ padding:20px 30px; }
.sec-heading{ position:relative; font-size:36px; font-weight:600; padding-left:50px; text-align:left; }
.sec-heading:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:70px;
	height:55px;
	content:"";
	background:url(../images/sec-heading-dec.png)  no-repeat center left;
	background-size:cover;
}
.sec-content{ padding-left:50px; }


.sec-btn-line{ text-align:right; }

.more-btn{
	display:inline-block;
	position:relative;
	border:1px solid #EA9F14;
	padding:0px 25px;
	margin:5px 20px;
	line-height:30px;
	height:32px;
	text-align:center;
	color:#181817;
}
.more-btn:before , .more-btn:after{
	position:absolute;
	top:0px;
	width:30px;
	height:30px;
	content:"";
	background:#EA9F14;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.more-btn:before{ left:-16px; }
.more-btn:after{ right:-16px; }
.more-btn:hover{ /*background:#EA9F14; color:#fff;*/ color:#EA9F14; }


.sec-divide-line{ position:relative; padding-left:20px; width:80%; margin-left:20%; }
.sec-divide-line hr{ border-width:0px; width:100%; height:2px; background:#3F3F3F; }
.sec-divide-line:before{
	position:absolute;
	top:50%;
	left:0;
	margin-top:-5px;
	
	width:10px;
	height:10px;
	content:"";
	background:#EA9F14;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}


.page-pd{ padding:10px 0 10px 10px; }
.page-content-pd{ margin-bottom:60px; }

.contact-pd{ padding:  0 10px 10px; }



/*導覽路徑*/
.breadcrumbs{
	position:relative;
	padding:0 0 0 22px;
	margin:5px 0;
}
.breadcrumbs:before{
	position:absolute;
	top:7px;
	left:0;
	width:16px;
	height:16px;
	content:"";
	background:#E26B1E;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.breadcrumbs , .breadcrumbs a{ color:#231815; }
.breadcrumbs a:hover{ color:#E26B1E; }
.breadcrumbs span{margin-right:0px;}
.breadcrumbs span:after{
	content:"/";
	margin-left:5px;
	font-size:10px;
}
.breadcrumbs span:last-child:after{display:none;}


/*分類*/
.category-list{ position:relative; padding-left:50px; margin:20px 0 40px 0; }
.category-list:before{
	position:absolute;
	bottom:-4px;
	left:4%;
	margin-left:-20px;
	width:10px;
	height:10px;
	content:"";
	background:#EA9F14;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.category-list:after{
	position:absolute;
	bottom:0;
	left:4%;
	width:96%;
	height:1px;
	content:"";
	background:#3F3F3F;
}
.category-list li{ display:inline-block; margin:0 50px 10px 0px; }
.category-list li a{ position:relative; display:block; padding:5px 0 5px 14px; font-size:1.3em; font-weight:600; color:#231815; /*width:180px;*/ }
.category-list li a:before{
	position:absolute;
	top:18px;
	left:0;
	width:12px;
	height:12px;
	content:"";
	background:#EFAD17;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	opacity:0;
}
.category-list li:hover a{ color:#231815; }
.category-list li:hover a:before{ opacity:1;}
.category-list li.active a{ color:#EFAD17; cursor:default; }
.category-list li.active a:before{ opacity:1;}


/*分類標題*/
.category-heading{ 
	position:relative;
	font-size:1.2em;
	font-weight:600;
	padding-left:30px;
	text-align:left;
	color:#E26B1E;
	min-height:50px;
	padding-top:10px;
	margin-bottom:10px;
}
.category-heading:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:63px;
	height:50px;
	content:"";
	background:url(../images/sec-heading-dec.png)  no-repeat center left;
	background-size:cover;
}



.video-area{ text-align:center; margin:20px 0 5px 0; }
.video{ position:relative; display:inline-block; padding:15px 25px; }
.video:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:55px;
	height:43px;
	content:"";
	background:url(../images/sec-heading-dec.png)  no-repeat center left;
	background-size:cover;
}


/* 檔案下載鈕*/
.download-line{ margin:10px 0; text-align:center; }
.download-btn{
	position:relative;
	display:inline-block;
	padding:7px 12px;
	margin:10px 20px; 
	color:#231815;
}
.download-btn:before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:8px;
	content:"";
	background:#231815;
}
.download-btn:after{
	position:absolute;
	bottom:0;
	left:50%;
	width:0;
	height:0;
	content:"";
	margin-left:-4px;
	border-top:6px solid #fff;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
}
.download-btn:hover{ color:#EFAD17; }
.download-btn:hover:before{ background:#EFAD17; }



.pageback-line{ text-align:center; margin:60px 0 0 0; }




.page-bottom-dec{}
.page-bottom-dec img{ display:block; max-width:100%; height:auto; }






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







.ad01-left img , .ad01-center img , .ad01-right img{ display:block; max-width:100%; height:auto; }
.ad01-left , .ad01-right{ width:30%; }
.ad01-center{ width:40%; }

.ad01-content{ display:inline-block; padding:30px; font-size:0.95em; text-align:left; }
.ad01-content .mark{ color:#E26B1E; font-weight:600; font-size:1.1em; }


.ad02-left img , .ad02-right img{ display:block; max-width:100%; height:auto; }
.ad02-left{ width:30%; align-items:center; }
.ad02-right{ width:70%; }
.ad02-ri-img{ height:100%; background:url(../images/ad02.png) no-repeat center; background-size:cover; }

.ad02-content{ padding:30px 15px; font-size:0.95em; }
.ad02-content .mark{ color:#E26B1E; font-weight:600; font-size:1.1em; }


.ad03-left img , .ad03-center img , .ad03-right img{ display:block; max-width:100%; height:auto; }
.ad03-left{ width:30%;}
.ad03-center{ width:50%; align-items:center; }
.ad03-right{ width:20%; align-items:center; justify-content:center; }
.ad03-lf-img{ height:100%; background:url(../images/ad03.png) no-repeat center; background-size:cover; }

.ad03-content{ padding:30px 15px; font-size:0.95em; }
.ad03-content .mark{ color:#E26B1E; font-weight:600; font-size:1.1em; }


.sec-ad04 img{ display:block; max-width:100%; height:auto; }


.ad05-left img , .ad05-right img{ display:block; max-width:100%; height:auto; }
.ad05-left{ width:40%; /*align-items:center;*/ }
.ad05-right{ width:60%; }
.ad05-ri-img{ height:100%; background:url(../images/ad05.png) no-repeat center; background-size:cover; }

.ad05-content{ padding:30px 15px; font-size:0.95em; }
.ad05-content .mark{ color:#E26B1E; font-weight:600; font-size:1.1em; }

.info-list{ margin:10px 0;}
.info-list li{ position:relative; padding-left:115px; margin-bottom:15px; font-size:0.9em; min-height:30px; }
.info-list .icon{ position:absolute; top:3px; left:0; }
.info-list .title{ position:absolute; top:0; left:27px; }




.ad06-left img , .ad06-right img{ display:block; max-width:100%; height:auto; }
.ad06-left{ width:40%;}
.ad06-right{ width:60%; /*align-items:center; justify-content:center;*/ }
.ad06-lf-img{ height:100%; background:url(../images/ad06.png) no-repeat center; background-size:cover; }

.ad06-content{ padding:30px 15px; font-size:0.95em; text-align:center; }

.idx-map{ display:inline-block;}







.post-list{ padding:0 30px;}
.post-item{ padding-bottom:15px; margin-bottom:35px; border-bottom:1px solid #3F3F3F; }
.post-heading{ 
	position:relative;
	padding-left:25px;
	text-align:left;
	min-height:50px;
	margin-bottom:5px;
}
.post-heading:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:55px;
	height:43px;
	content:"";
	background:url(../images/sec-heading-dec.png)  no-repeat center left;
	background-size:cover;
}
.post-heading .title a{ display:inline-block; padding:8px 0; color:#E26B1E; font-size:1.2em; font-weight:600; }
.post-heading .title a:hover{ color:#23459B; }
.post-heading .date{ position:absolute; bottom:0; right:0; color:#E26B1E; font-size:0.8em; }

.post-dec{ font-size:0.95em; height:55px; overflow:hidden; margin-bottom:5px; }

.post-btn-line{ text-align:right; }

.post-thumbnail-list{ padding:0 30px; }







/*作品介紹*/
.works-item{ position:relative; padding-bottom:30px; margin-bottom:30px; }
.works-item:before{
	position:absolute;
	z-index:1;
	bottom:-14px;
	left:5px;
	margin-left:-20px;
	width:10px;
	height:10px;
	content:"";
	background:#EA9F14;
	border:10px solid #fff;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.works-item:after{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#3F3F3F;
}


.works-photos img{ display:block; width:100%; height:auto; margin-bottom:15px; }
.works-heading{ 
	position:relative;
	font-size:1.2em;
	font-weight:600;
	padding-left:25px;
	text-align:left;
	color:#231815;
	min-height:50px;
	margin-bottom:5px;
}
.works-heading:before{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	width:55px;
	height:43px;
	content:"";
	background:url(../images/sec-heading-dec.png)  no-repeat center left;
	background-size:cover;
}
.works-heading a{ display:block; padding:8px 0; }
.works-item:hover .works-heading .title{ display:block; color:#EA9F14; }
.works-dec{ padding-left:25px; padding-right:25px; }
.works-btn-line{ text-align:right; padding-right:25px; margin-top:5px; }

.works-item:hover .works-photos{ opacity:0.9; }


.works-view-content{ position:relative; padding:0 30px 30px 30px; margin-bottom:30px; }
.works-view-content:before{
	position:absolute;
	z-index:1;
	bottom:-14px;
	left:5px;
	margin-left:-20px;
	width:10px;
	height:10px;
	content:"";
	background:#EA9F14;
	border:10px solid #fff;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.works-view-content:after{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#3F3F3F;
}


.works-thumbnail-list{ padding:0 30px; }
.works-thumbnail-item{ float:left; width:31%; margin-right:3.5%; margin-bottom:45px; border:1px solid #ccc; }
.works-thumbnail-item:nth-child(3n){ margin-right:0; }
.works-thumbnail-photo{ margin-bottom:5px; }
.works-thumbnail-photo a{ display:block; }
.works-thumbnail-photo a .item-thumb-frame .item-thumb{ padding-bottom:70%;}
.works-thumbnail-heading{
	padding:5px 10px; color:#E26B1E;
	overflow-wrap: break-word;
}

.works-thumbnail-item:hover{ border-color:#E26B1E;}






/*聯絡我們*/
.contact-top-group{ position:relative; padding-bottom:30px; margin-bottom:30px; }
.contact-top-group:before{
	position:absolute;
	z-index:1;
	bottom:-14px;
	left:20px;
	margin-left:-20px;
	width:10px;
	height:10px;
	content:"";
	background:#EA9F14;
	border:10px solid #fff;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.contact-top-group:after{
	position:absolute;
	z-index:0;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#3F3F3F;
}

.contact-left-companyinfo{ width:60%; padding:10px; }
.contact-right-dec{ width:40%;}
.contact-right-dec-bg{ height:100%; background:url(../images/contacct01.png) no-repeat center; background-size:cover; }


.info-list.contact-info-list li{ font-size:1em;}
.info-list.contact-info-list .icon{ top:5px; }



.contact-form-box{ margin-bottom:60px; }
.contact-form{ margin:5px 0; }

.form-heading{ margin-bottom:10px; }

/* == 表單 套件組合 ======== */
.input-group {
	display: table; 
	border-collapse: separate; /*表格屬性，合併框與格*/ 
	width:100%; 
	color:#555555; 
	margin-bottom:0;
	padding:10px 20px 10px 0;
}
.input-group.half-width{ width:50%; } 

.require-mark{ color:red; font-size:0.85em; }
.input-title{
	display: table-cell;
	min-width: 90px; 
	font-size: 0.95em;
	text-align: left;
    white-space: nowrap;
	vertical-align:top;
	padding-top:6px;
}
.input-control {
    display: table-cell;
	width: 100%;
    min-height: 2em;
}
.input-group input[type=text] {
    width: 100%;
    display: block;
	/*font-size: 1em;*/
	border:1px solid #ccc;
}
.input-remind{ font-size:0.8em; color:#666; }

.input-group textarea{ width: 100%; }

.form-bt-line{ width:100%;  text-align:right; padding-left:80px; padding-right:25px; }
input.fbtn{
	position:relative;
	z-index:2;
	border:1px solid #E26B1E; 
	line-height:1; 
	cursor:pointer;
	height:32px;
	padding:2px 20px;
	background:transparent;
}


.fbtn-outset{
	display:inline-block;
	position:relative;
	z-index:1;
	margin:5px 20px;
	cursor:pointer;
}
.fbtn-outset:before , .fbtn-outset:after{
	position:absolute;
	z-index:-1;
	top:1px;
	width:30px;
	height:30px;
	content:"";
	background:#E26B1E;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.fbtn-outset:before{ left:-16px; }
.fbtn-outset:after{ right:-16px; }
input.fbtn:hover{ color:#E26B1E; }

.sex-box{margin-right:20px;}
.sex-box .ra-sex{display:none;}
.sex-box .title{
	position:relative;
	display:inline-block; 
	cursor:pointer;
	color:#666;
	font-weight:600;
	padding-left:27px;
	line-height:1;
}
.sex-box .title:before{
	position:absolute;
	z-index:1;
	top:50%;
	left:0;
	margin-top:-12px;
	width:20px;
	height:20px;
	content:"";
	background:transparent;
	border:1px solid #ccc;
	
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.sex-box .ra-sex:checked + .title:before{ background:#EFAD17; border-color:#EFAD17; }