@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Serif+TC:400,600');
@import url(base.css);
/* =============================================================================
   BASIC
   ========================================================================== */
html, body { height: 100%; }
body{ background: url( ../images/bg.jpg);}
body.bg2{ background: url( ../images/bg2.jpg);}
body, th, td, input { font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif; font-size: 16px; }
a { text-decoration: none; }
h3, h4, h5, h6{ font-weight: 700;}
h1 { font-size: 34px; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin: 0 0 1em; font-weight: 600;}
h2 { font-size: 30px; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em; font-weight: 400; letter-spacing: 0.1em;}
h3 { font-size: 24px; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}
h4 { font-size: 20px; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em; letter-spacing: 0.1em;}
h5 { font-size: 17px; font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}
h6 { font-size: 16px; font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 0.6em;}

.fc1{ color: #222f65 !important;}
.fc2{ color: #cb9f61 !important;}

p,li { font-size: 15px; line-height: 1.8em; color: #333;  }
a:link, a:visited { text-decoration: none; cursor: pointer; }

.loadbar { position: fixed; background: #cb9f61; width: 0; height: 4px; top: 0; left: 0; z-index: 2000; overflow: hidden; -webkit-transition: 400ms ease-in-out; -moz-transition: 400ms ease-in-out; -ms-transition: 400ms ease-in-out; -o-transition: 400ms ease-in-out; transition: 400ms ease-in-out; }
.loadbar.ed { width: 0!important; border: none; right: 0; left: inherit; opacity: 0; }

.imgLiquidCenter, .imgLiquidFill{ opacity: 0; 
-webkit-transition: opacity 400ms ease-in-out;
   -moz-transition: opacity 400ms ease-in-out;
  	-ms-transition: opacity 400ms ease-in-out;
     -o-transition: opacity 400ms ease-in-out;
	    	transition: opacity 400ms ease-in-out;
}
.imgLiquid_ready { opacity: 1; }

/*Element*/
.ie { position: fixed; width: 60%; height: 80%; padding: 10% 20%; text-align: center; left: 0; top: 0; background: #CCC; z-index: 9999; }
.ie h2, .ie h4 { color: #333 !important; }
.ie p { text-align: center; color: #333 !important; font-size: 13px; }
.ie a { color: #F36; }


/*Package*/
.inner-width { position: relative; max-width:1200px; margin: auto; }
.txt-width { position: relative; max-width:960px; margin: auto; }
.btn_send{ display: inline-block; text-align: center;  background: #93B54B; padding:8px 50px; color: #FFF; border: none; border-radius: 30px; font-size: 18px; box-sizing: border-box; margin: 5px 0; }
.btn_send:hover, .btn_send:active{ background: #7eae19; color: #FFF;}
.more_bar{ position: relative; z-index: 100; padding: 20px 0 0; text-align: left;}
.more_bar.center{ text-align: center;}
.more_bar a{ display: inline-block;
	transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550), opacity 500ms ease-in-out;
}
.more_bar a:hover{ transform: scale(1.1);}

.btn_more{ display: inline-block; color: #cb9f61; padding: 2px 25px; border-radius: 30px; font-weight: 700; font-size: 14px; font-family: 'Lato', sans-serif;
	background: linear-gradient(41deg, #f1e5d3 41%, #f1e5d3 60%); 
	transition: 500ms ease-in-out;
}

.btn_more:hover{ transform: scale(1.05); color: #FFF;
	background: linear-gradient(41deg, #BF8D4F 41%, #D3AC73 60%); 
}

.pager_bar { padding: 30px; text-align: center; }
.pager_bar.right {  text-align: right; }
.pager_bar a { display: inline-block; line-height: 28px; width: 28px; text-align: center; margin: 0 4px 0 0; color: #333; font-size: 14px; border: solid 1px #f2f2f2; border-radius: 50%;}
.pager_bar.white a { color: #FFF;}
.pager_bar a.con { width: auto; padding: 0 10px;  border-radius: 14px;}
.pager_bar a.arrow { color: #93B54B; }
.pager_bar a:hover, .pager_bar a.cur { color: #FFF; background: #93B54B; }
.pager_bar.white a:hover, .pager_bar.white a.cur { background: #FFF; color: #93B54B; }

/*BLOCK*/
#wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden;}
#header { position:fixed; z-index:10000; width:100%; padding: 0; left:0;
    transition: 300ms ease-in-out;
}
#header .bg{ position: absolute; top: 0; left: 0; width: 100%; background: rgba(0,28,52,0); height: 130px;
	transition: 300ms ease-in-out;
}
#content { position: relative;}
#footer { position:relative; color: #333; padding: 15px ; overflow: auto; margin: auto; box-sizing: border-box; z-index: 100;}
#footer .copyright{ color: #333; font-size: 14px; text-align: center; padding: 10px; box-sizing: border-box; line-height: 30px;}

.info_box{ position: relative; padding: 40px 0 0; overflow: auto;}
.info_box.b{ background: #59504d;}
.info_box .txt{ position: relative; float: left; width: 50%;}
.info_box .txt h3{ font-size: 36px; color: #59504d; margin: 0 0 0.5em 0;}
.info_box.b .txt h3{ color: #FFF;}
.info_box .txt p{ font-size: 20px; color: #333; margin: 0.3em 0;}
.info_box.b .txt p{ color: #FFF;}

.info_box .links{ position: relative; text-align: center;}
.info_box .links a{ display: inline-block; padding: 20px 10px; font-size: 24px;
	transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550), opacity 500ms ease-in-out;
}
.info_box .links a:hover{ transform: scale(1.1);}
.info_box .sub{ position: relative; text-align: center;}
.info_box .sub a{ display: inline-block; padding: 20px;
	transition: transform 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550), opacity 500ms ease-in-out;
}
.info_box .links a:hover{ transform: scale(1.1);}

#full_block{ position:relative; z-index:10; }
#full_block.bg{ background: #FFF url(../images/news_bg.jpg) fixed no-repeat; background-size: cover;}
#full_block.bg2{ background: #FFF url(../images/jobs_bg.jpg) fixed no-repeat; background-size: cover;}
/**logo**/
.logo { position: relative; position: absolute; top: 20px; left: 50%; z-index: 100; margin: 0 0 0 -33px;
    transition: 500ms ease-in-out;
}
.logo img { 
    transition: 500ms ease-in-out;
}
.logo img.s1{ width: 65px;}
.logo img.s2{ display: block; width: 110px; margin: 8px 0 0 -22px;}

#header.ed .bg{ background: rgba(0,28,52,0.95); height: 130px; }
#header.ed .logo{ transform: scale(0.7)  translateY(-30px);}
#header.ed .logo .s2{ opacity: 0;}
#header.ed .top_menu{ top:80px;}

.tip_1{ position: absolute; width: 48px; height: 40px; background: #222f65; z-index: 100; margin: 15px 0 0 0;}
.tip_1::before{ display: block; content: ''; position: absolute; bottom: -12px; left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 24px 0 0;
	border-color: #222f65 transparent transparent transparent;
}
.tip_1::after{ display: block; content: ''; position: absolute; bottom: -12px; right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 12px 0;
	border-color: transparent  #222f65 transparent transparent;
}

.tip_2{ position: absolute; left: 50%; width: 48px; height: 60px; background: #222f65; z-index: 100; margin: 0 0 0 -24px;}
.tip_2::before{ display: block; content: ''; position: absolute; bottom: -12px; left:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 24px 0 0;
	border-color: #222f65 transparent transparent transparent;
}
.tip_2::after{ display: block; content: ''; position: absolute; bottom: -12px; right:0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 24px 12px 0;
	border-color: transparent  #222f65 transparent transparent;
}


/*TOPMENU*/
.top_menu{ position: absolute; left: 0; top: 140px; width:100%; z-index: 100;
	transition: 400ms ease-in-out;
}
.top_menu ul{ list-style:none; margin:0; padding:0; display:block; box-sizing: border-box; text-align:center; 
	transition: 400ms ease-in-out;
}
.top_menu ul li{ position: relative; display: inline-block; text-align:center;  margin:2px 10px;}
.top_menu ul>li>a{ position:relative; display:block;  font-size:16px; font-weight: 400; color:#FFF; padding:8px 15px; margin: 0; 
    transition: 500ms ease-in-out;
}
.top_menu ul>li>a::before{ display: block; content: ''; width: 0; height: 0; background: #cb9f61; position: absolute; top: 100px; left: 50%; border-radius: 2px;
	transition: 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.top_menu ul>li>a:hover::before, .top_menu ul>li>a.cur::before,  .top_menu ul>li.on>a::before{ width: 4px; height: 4px; position: absolute; top: 35px;}
.top_menu ul>li:hover>a, .top_menu ul li a.cur{ color: #cb9f61; }

.top_menu ul.submenu{ position: absolute; top: 45px; left:50%; margin: 0 0 0 -70px; max-height: 0; overflow: hidden; background: #cb9f61; width: 140px; border-radius: 5px;
	transition: 500ms ease-in-out;
}
.top_menu .on ul.submenu{ max-height: 400px;}
.top_menu ul.submenu li{ display: block; margin: 4px; }
.top_menu ul.submenu li:first-child { border:none; }
.top_menu ul.submenu a{ display: block; text-align: left; color: #FFF; padding: 5px; font-size: 15px; line-height: 18px; font-size: 14px; text-align: center;}
.top_menu ul.submenu a:hover{ background: #001f3e; color: #FFF;}


.pic_1{ text-align: right;}
.pic_1 img{ width: 100%; height: auto;}
.pic_left{ float:left; margin: 0 20px 0 0; max-width: 400px;}
.pic_left img{ width: 100%; height: auto;}
.pic_right{ float:right; margin: 0 0 0 20px; max-width: 400px;}
.pic_right img{ width: 100%; height: auto;}

/*BANNER*/
.top_banner { height: 770px; width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 100; background-color:#001f3e;}
.top_banner ul{ margin: 0; list-style: none; height: 770px; background-color: #0e1b29;}
.top_banner .item{ position: relative; display: block; height: 770px;}
.top_banner .pic{ display: block; height: 100%; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0;
	transition: opacity 800ms ease-in-out;
}
.top_banner .txt{ position: absolute; width: 100%; height: auto; text-align: center; z-index: 100; box-sizing: border-box; padding: 300px 0 0 0; }
.top_banner .txt img{ display: inline-block;}
.top_banner .txt h1{ color:#FFF; font-size: 74px; margin: 10px 0; font-weight: 600; text-shadow: 0 0 5px rgba(0,0,0,0.5); text-align: center; letter-spacing: 0.1em;}
.top_banner .txt p{ color:#FFF; text-shadow: 0 0 5px rgba(0,0,0,0.5); font-size:20px;}

.page_banner { height: 310px; width: 100%; position: relative; top: 0; left: 0;  overflow: hidden; background-color:#001f3e;}
.page_banner .item{ position: relative; display: block;}
.page_banner .pic{ display: block; height: 310px; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0; 
	transition: opacity 800ms ease-in-out;
}
.page_banner .txt{ position: absolute; width: 100%; height: auto; text-align: center; z-index: 100; box-sizing: border-box; padding: 225px 0 0 0; }
.page_banner .txt h1{ color:#FFF; font-size: 40px; margin: 10px 0; font-weight: 600; text-shadow: 0 0 5px rgba(0,0,0,0.5); text-align: center; letter-spacing: 0.1em;}
.page_banner.s2 { height: 500px; overflow: initial;}
.page_banner.s2 .pic{ height: 500px; }
.page_banner.s2 .txt p{ color: #FFF; margin: 30px 0; }

.pro_banner { height: 720px; width: 100%; position: relative; top: 0; left: 0; z-index: 100;}
.pro_banner .item{ position: relative; display: block; height: 720px; background-color:#001f3e;}
.pro_banner .pic{ display: block; height: 100%; position: absolute; top: 0; left: 0;  width: 100%; z-index: 0;
	transition: opacity 800ms ease-in-out;
}
.pro_banner .txt{ position: absolute; z-index: 100; width: 55%; height: auto; text-align: left; z-index: 100; box-sizing: border-box; top:300px; left:0; box-sizing: border-box; padding: 0 20px;}
.pro_banner .txt h1{ color:#FFF; font-size: 50px; margin: 10px 0; font-weight: 600; letter-spacing: 0.1em;}
.pro_banner .txt h2{ color:#BF8D4F; font-size: 24px; margin: 10px 0 20px; font-weight: 400; }
.pro_banner .txt p{ color:#FFF; text-shadow: 0 0 5px rgba(0,0,0,0.5); font-size:14px;}
.pro_banner .pho{ position: absolute; z-index: 100;  width: 40%; height: auto; text-align: right; z-index: 100; box-sizing: border-box; top:400px; right:0;}
.pro_banner .pho img{ max-width: 100%;}

#path{ padding:5px; background: #b1c96e; color: #FFF; font-size: 14px; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#path a{ color:#FFF;}


/*INDEX*/
.pos_box_p1{ position: absolute; z-index: 1; top: -200px; left: -40%;  transform: scale(0.95);}
.pos_box_p2{ position: absolute; z-index: 1; top: 300px; left: 20%;}
.pos_box_p3{ position: absolute; z-index: 1; top: -300px; right: -8%;}
.pos_box_p3{ position: absolute; z-index: 1; top: -400px; right: -20%; opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4);
    transition: 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.pos_box_p3.on{ top: -300px; right: -8%; opacity: 1; -webkit-transform: scale(1); transform: scale(1);}
.pos_box_p4{ position: absolute; z-index: -1; top: 100px; left: -120px; opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4);
    transition: 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.pos_box_p4.on{ top: 300px; left: -20px; -webkit-transform: scale(1); transform: scale(1); opacity: 1;}

.inx_pro_box{ position: relative; z-index: 100; margin: 0; padding: 0; box-sizing: border-box; height: 850px; overflow: hidden;}
.inx_pro_box .title{ position: relative; margin:80px 0 60px; z-index: 1; color: #222f65; font-size: 74px; line-height: 1.1em; font-weight: 600; text-align: center;}
.inx_pro_box .title span{ font-size: 40px; line-height: 1em; font-weight: 400; display: block;}
.inx_pro_box ul{ position: relative; display: block; list-style: none; margin: 0;}
.inx_pro_box ul li{ display: block; width: calc(100%/4); float: left; text-align: center;}
.inx_pro_box .pic{ max-width: 100%;}
.inx_pro_box .pic img{ max-width: 100%;}
.inx_pro_box .txt{ margin: 0; padding: 0 30px;}
.inx_pro_box .txt h5{ margin: 0 0 1em; letter-spacing: 1px;}
.inx_pro_box .txt p{ position: relative; line-height: 20px; height: 60px; color:#333; overflow: hidden; letter-spacing: 0.1em;}


.inx_about_box{ position: relative; z-index: 100; margin: 0; padding: 0; box-sizing: border-box; height: 850px; overflow: hidden;}
.inx_about_box .bg{ position: absolute; top: -300px; left: 0; width: 100%; height: 120%; background: no-repeat center center; background-size: cover; }
.inx_about_box .title{ position: relative; margin:120px 0 60px; z-index: 1; color: #FFF; font-size: 74px; line-height: 1.1em; font-weight: 600; text-align: center;}
.inx_about_box .title span{ font-size: 40px; line-height: 1em; font-weight: 400; display: block;}
.inx_about_box .txt{ max-width: 550px; margin: auto; text-align: center; padding: 0 10px;}
.inx_about_box .txt h4{ position: relative; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 20px 0; z-index: 1; color: #FFF; font-size: 24px; letter-spacing: 0.1em;}
.inx_about_box .txt p{ position: relative; font-size: 15px; z-index: 1; color: #FFF;}


.inx_dl_box{ position: relative; z-index: 100; margin: 0; padding: 0; box-sizing: border-box; height: 1200px; overflow: hidden;}
.inx_dl_box .bg{ position: absolute; top: -300px;  left: 0; width: 100%; height: 120%; background: no-repeat center center; background-size: cover; }
.inx_dl_box .title{ position: relative; margin:300px 0 60px; z-index: 1; color: #222f65; font-size: 74px; line-height: 1.1em; font-weight: 600; text-align: center;}
.inx_dl_box .title span{ font-size: 40px; line-height: 1em; font-weight: 400; display: block;}
.inx_dl_box .txt{ max-width: 550px; margin: auto; text-align: center; padding: 0 10px;}
.inx_dl_box .txt h4{ position: relative; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 15px 0; z-index: 1; font-size: 24px; letter-spacing: 0.1em; font-weight: 400;}
.inx_dl_box .txt p{ position: relative; font-size: 15px; z-index: 1; }


.inx_dl2_box{ position: relative; z-index: 100; margin: 0; padding: 0; box-sizing: border-box; height: 900px; overflow: hidden;}
.inx_dl2_box .bg{ position: absolute; top: -300px; left: 0; width: 100%; height: 120%; background: no-repeat center center; background-size: cover; }
.inx_dl2_box .title{ position: relative; margin:300px 0 60px; z-index: 1; color: #FFF; font-size: 74px; line-height: 1.1em; font-weight: 600; text-align: center;}
.inx_dl2_box .title span{ font-size: 40px; line-height: 1em; font-weight: 400; display: block; letter-spacing: 0;}
.inx_dl2_box .txt{ max-width: 550px; margin: auto; text-align: center; padding: 0 10px;}
.inx_dl2_box .txt h4{ position: relative; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; margin:0 0 20px 0; z-index: 1; color: #FFF; font-size: 24px; letter-spacing: 0.1em;}
.inx_dl2_box .txt p{ position: relative; font-size: 15px; z-index: 1; color: #FFF;}

.photos_1{ position: absolute; width: 1200px; left: 50%; margin: -200px 0 0 -600px ; height: 400px; z-index: 200;}
.photos_1 a{ position: relative; display: block; width: 50%; height: 400px; float: left;}
.photos_1 a img{ position: absolute; display: block !important; opacity: 0; width: 100%; height: 100%;}
.photos_1 a figure{ display: none;}

.photos_2{ position: absolute; width: 1200px; left: 50%; margin: -200px 0 0 -600px ; height: 400px; z-index: 200;}
.photos_2 a{ position: relative; display: block; width: 50%; height: 400px; float: left;}
.photos_2 a img{ position: absolute; display: block !important; opacity: 0; width: 100%; height: 100%;}
.photos_2 a figure{ display: none;}


.inner_box{ padding:100px 0; }
.inner_box.notop{ padding: 0 0 100px 0;}
.inner_box.nobom{ padding: 100px 0 0 0;}
.inner_box .title_box h2{ position: relative; display:block; font-size:40px; line-height:42px; color:#000; margin:0 0 10px 0;}
.inner_box .title_box h3{ position: relative; display:block; font-size:30px; line-height:42px; color:#4b4b4b; margin:0 0 40px 0;}
.inner_box>.date{ font-size:20px; color:#93B54B; font-weight: 300;}
.inner_box>h5{ font-size:20px; color:#93B54B; font-weight: 300; margin-top: -30px;}

.inner_box.s1 { z-index: 2;}
.inner_box.s1 .txt{ width: 50%; float: right; box-sizing: border-box; padding: 40px;}
.inner_box.s1 .pic{ width: calc(50% - 20px); float: left; box-sizing: border-box; margin: 10px; height: 270px;}

.inner_box.s2 { position: relative; z-index: 1;}
.inner_box .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-attachment: fixed; background-size: cover; z-index: -1;}
.inner_box.s2 .txt{ width: 50%; float: left; box-sizing: border-box; padding: 40px;}
.inner_box.s2 .txt h4{ color:#FFF; font-weight: 400;}
.inner_box.s2 .txt p{ color:#FFF;}
.inner_box.s2 .pic{ width: calc(50% - 20px); float: right; box-sizing: border-box; margin: 10px; height: 270px;}

.inner_box.s3 { position: relative; z-index: 1;}
.inner_box.s3 .txt{ max-width: 520px; margin: 0 auto; box-sizing: border-box; padding: 10px; text-align: center;}
.inner_box.s3 .txt h4{ font-weight: 400; font-weight: 400;}
.inner_box.s3 .pic{ width: calc(50% - 20px); float: left; box-sizing: border-box; margin: 10px; height: 270px;}

.inner_box.s4 { position: relative; z-index: 1;}
.inner_box.s4 .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-attachment: fixed; z-index: -1;}
.inner_box.s4 .txt{ max-width: 520px; margin: 0 auto; box-sizing: border-box; padding: 10px; text-align: center;}
.inner_box.s4 .pic{ width: calc(50% - 20px); float: left; box-sizing: border-box; margin: 10px; height: 270px;}

.inner_box.s5 { position: relative; z-index: 1; padding-top: 130px;}
.inner_box.s5 .txt{ max-width: 520px; margin: 0 auto; box-sizing: border-box; padding: 10px; text-align: center;}
.inner_box.s5 .pic{ width: calc(50% - 20px); float: left; box-sizing: border-box; margin: 10px; height: 270px;}

.inner_box.s6 { position: relative; z-index: 1;}
.inner_box.s6 .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-attachment: fixed; z-index: -1;}
.inner_box.s6 .txt{ max-width: 520px; margin: 0 auto; box-sizing: border-box; padding: 10px; text-align: center;}
.inner_box.s6 .txt h2{ color:#FFF; font-weight: 400;}
.inner_box.s6 .txt h4{ color:#FFF; font-weight: 400;}
.inner_box.s6 .txt p{ color:#FFF;}
.inner_box.s6 .pic{ width: calc(50% - 20px); float: left; box-sizing: border-box; margin: 10px; height: 270px;}

.cols{ overflow: auto; margin: 0 0 20px 0;}
.cols .w33{ float: left; width: 33.33%;}
.cols .w66{ float: left; width: 66.66%;}
.cols .lw25{ float: left; width: 25%;}
.cols .lw75{ float: left; width: 75%;}
.cols .rw23{ float: right; width: 23%;}

.edit th, .edit td, .edit li{ font-size:15px;line-height:1.4em; color:#555;}
.edit li{ margin:0 0 10px 0;}
.edit th, .edit td{ padding:4px;}
.edit p{font-size:15px;line-height:1.8em; margin:0 0 15px 0; color:#555; }
.edit img{ max-width:100%; height:auto;}
.edit iframe{ max-width:100%; }
.edit ol, .edit ul{ margin:0 0 1em 3em; font-size:15px;}
.edit .mv{ max-width:640px; margin:0 auto 20px;}

/*photos*/
.pho_box{ position: relative; padding: 40px 100px;}
.pho_box ul{ display:block; list-style:none; margin:0;}
.pho_box a{ position: relative; display:block; float:left; width:calc( 100%/4 - 10px); height: 240px; overflow: hidden; box-sizing: border-box; margin: 5px;}
.pho_box a:nth-child(6n-5){ width:calc( 100%/2 - 10px); }
.pho_box a:nth-child(6n){ width:calc( 100%/2 - 10px); }
.pho_box a img{ position: absolute; display: block !important; top: 50%; left: 50%; opacity: 0; width: 0%; height: 0%;}
.pho_box a figure{ display: none;}
.pho_box a::before{ display: block; content: ''; position: absolute; background: #cb9f61; opacity: 0; z-index: 1; width: 100%; height: 100%;
	transition: 500ms ease-in-out;
}
.pho_box.s2 a::before{ background: #222f65;}
.pho_box a::after{ display: block; position: absolute; color:#FFF; opacity: 0; z-index: 2; width: 100%; height: 240px; line-height: 240px; text-align: center; font-size: 24px;
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00e";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;
}
.pho_box a:hover::before{ opacity: 0.7;}
.pho_box a:hover::after{ opacity: 1;}
.pho_box.s1 { padding: 20px 0;}
.pho_box.s1 a{ margin: 0;  width:calc( 100%/4) !important;}
.pho_box.s3 .item{ position: relative; display:block; float:left; width:calc( 100%/4 - 20px); height: 240px; overflow: hidden; box-sizing: border-box; margin: 10px;}


/*PRODUCTS*/
.pro_box{ position: relative; z-index: 100; margin: 0; padding: 120px 0 0; box-sizing: border-box; overflow: hidden;}
.pro_box .title{ position: relative; margin:80px 0 60px; z-index: 1; color: #222f65; font-size: 74px; line-height: 1.1em; font-weight: 600; text-align: center;}
.pro_box .title span{ font-size: 40px; line-height: 1em; font-weight: 400; display: block;}
.pro_box ul{ position: relative; display: block; list-style: none; margin: 0; }
.pro_box ul li{ display: block; width: calc(100%/3); float: left; text-align: center;}
.pro_box .pic{ position: relative; max-width: 100%;}
.pro_box .pic img{ max-width: 100%; width: 350px;}
.pro_box .pic .icon{ position: absolute; bottom: 15px; right: 20%;}
.pro_box .txt{ margin: 0; padding: 0 30px 20px;}
.pro_box .txt h5{ margin: 0 0 1em; letter-spacing: 1px;}
.pro_box .txt p{ position: relative; line-height: 20px; height: 60px; color:#333; overflow: hidden; letter-spacing: 0.1em;}


/*NEWS*/
.news_box{ padding: 60px 0 20px; max-width: 960px; margin: 0 auto;}
.news_box .item{ position: relative; display: block; margin: 0 0 50px 0; background: #FFF;
	transition: 500ms ease-in-out;
}
.news_box .item::before{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(-2deg); z-index: -1;
	transition: 500ms ease-in-out;
}
.news_box .item::after{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(2deg);
z-index: -1;
	transition: 500ms ease-in-out;
}
.news_box .item .pic{ width: 45%; height: 280px; float: left;}
.news_box .item .txt{ width: 55%; height: 280px; float: right; box-sizing: border-box; padding: 20px 35px;}
.news_box .item .txt .date{ font-size: 14px; font-weight: 600; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; color: #222f65;}
.news_box .item .txt .title{ font-size: 24px; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; color: #000; border-bottom:solid 1px #f2f2f2; padding: 0 5px 10px; margin: 0 -5px 10px; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight: 400;
}
.news_box .item .txt p{ line-height: 24px; height: 96px; overflow: hidden;}
.news_box .item .txt .tip{ float: right; display: inline-block; color: #cb9f61; padding: 2px 25px; border-radius: 30px; font-weight: 700; font-size: 14px; font-family: 'Lato', sans-serif;
	background: #f1e5d3; 
	transition: 500ms ease-in-out;
}
.news_box .item:hover { background: #cb9f61;}
.news_box .item:hover .txt .date{ color: #FFF; }
.news_box .item:hover .txt .title{ color: #FFF; }
.news_box .item:hover .txt p{ color: #FFF; }
.news_box .item:hover .txt .tip{ color: #BF8D4F; background: #FFF; }
.news_box .item:hover::before{ box-shadow: 0 0 50px rgba(0,0,0,0.9);}
.news_box .item:hover::after{ box-shadow: 0 0 50px rgba(0,0,0,0.9); }

.news_box .view{ position: relative; display: block; background: #FFF;}
.news_box .view .cover{ height: 480px;}
.news_box .view .txt{ box-sizing: border-box; padding: 40px 40px 60px;}
.news_box .view .txt .date{ font-size: 14px; font-weight: 600; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; color: #222f65;}
.news_box .view .txt .title{ font-size: 24px; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; color: #000; border-bottom:solid 1px #CCC; padding: 0 5px 10px; margin: 0 -5px 10px; font-weight: 400;
}
.news_box .pho_box{ position: relative; padding: 10px 0;}

/*STORE*/
.store_box{ padding: 60px 20px 0; max-width: 1200px; margin: 0 auto;}
.store_box .item{ position: relative; display: block; margin: 80px 0; background: #FFF;
	transition: 500ms ease-in-out;
}
.store_box .item:nth-child(1){ margin: 40px 0 80px;}

.store_box .item::before{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(-2deg); z-index: -1;
	transition: 500ms ease-in-out;
}
.store_box .item::after{ display: block; content: ''; width: 80%; height: 30px; box-shadow: 0 0 0px rgba(0,0,0,0); position: absolute; bottom: 20px; left:10%; transform:rotate(2deg);
z-index: -1;
	transition: 500ms ease-in-out;
}
.store_box .item .pic{ position: relative; width: 50%; height: 250px; float: left;}
.store_box .item .pic .map{ position: absolute; top:0; left:0; width: 100%; height: 100%; opacity: 0;
	transition: 500ms ease-in-out;
}
.store_box .item .pic .map frame{ max-width: 100%;}
.store_box .item .txt::before{ display: block; content: ''; width: 100%; height: 1px; background: #CCC; position: absolute; bottom: -40px; left:0;}
.store_box .item:last-child{ margin: 80px 0 0 0;}
.store_box .item:last-child .txt::before { display: none;}
.store_box .item .txt{ width: 50%; height: 250px; float: right; box-sizing: border-box; padding: 35px;}
.store_box .item .txt .title{ font-size: 30px; font-family: 'Noto Serif TC', Microsoft JhengHei, Arial, Helvetica, sans-serif; color: #000; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight: 400; color: #001f3e; margin: 0 0 10px;
}
.store_box .item .txt p{ line-height: 24px; }
.store_box .item .links a{ display: inline-block; font-size: 24px; line-height: 24px; width: 32px; text-align: center; color: #BF8D4F; margin: 0 2px 0 0;
	transition: 500ms ease-in-out;
}
.store_box .item:hover h4{ color: #001f3e;}
.store_box .item:hover::before{ box-shadow: 0 0 50px rgba(0,0,0,0.9);}
.store_box .item:hover::after{ box-shadow: 0 0 50px rgba(0,0,0,0.9); }
.store_box .item .links a:hover{
	transform: scale(1.05);
}
.store_box .item:hover .pic .map{ opacity: 1;}

/*RWD*/
.desk-show { display: block !important;}
.mobile-show { display: none !important; }
.peload{ opacity:0;
	transition: opacity 400ms ease-in-out;
}
.peload.ed{ opacity:1;}
.pehide.ed{ display:none;}
.phone_btn{ display: none;}




@media only screen and (max-width: 1280px) {
	.inner-width { box-sizing: border-box; padding: 0 10px;}
	.top_banner{ height: 600px;}
	.top_banner .item{ height: 600px;}
	.top_banner .pic{ height: 600px;}
	.top_banner .txt{ position: absolute; width: 100%; height: 600px; text-align: center; z-index: 100; box-sizing: border-box; padding: 240px 0 0 0;}
	.top_banner .txt img{ width:100px;}

	.photos_1{ width: 92%; margin: -200px 0 0 -45% ; height: 400px; z-index: 200;}
	.photos_2{ width: 92%; margin: -200px 0 0 -45% ; height: 400px; z-index: 200;}

}

@media only screen and (max-width: 1024px) {
	.inx_pro_box{ height: auto; padding-bottom: 100px;}
	.inx_pro_box ul li{ width: calc(100%/2); margin: 40px 0 0 0;}
	.inx_pro_box .txt { padding: 0 100px;}
	.inx_pro_box .txt p { height: 40px;}

	.pro_banner .txt { top: 240px; padding: 0 40px; }

	.pro_banner {height: 650px;}
	.pro_banner .item {height: 650px;}

	.pro_banner .pho { top: 360px; width: 45%; right: 5%;}
}


@media only screen and (max-width: 800px) {
	.desk-show { display: none!important; }
	.mobile-show { display: block!important; }

	h1 { font-size: 26px; }
	h2 { font-size: 22px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
	h5 { font-size: 14px; }
	h6 { font-size: 14px; }

	/*MENU*/
	.menu_btn{ position: absolute; top:0; left:0; display:block; width:60px; height:60px; z-index:3000; cursor: pointer;} 
	.menu_btn>div{ position:absolute; width:24px; height:2px; background:#cb9f61; left:12px;
		transition: 0.2s ease-in;
	}
	.menu_btn.on>div{ background: #FFF;}
	.menu_btn .m1{ top:20px;}
	.menu_btn .m2{ top:28px;}
	.menu_btn .m3{ top:36px; }
	.menu_btn:hover .m1,.menu_btn:hover .m2,.menu_btn:hover .m3{ width:24px;}
	.menu_btn.on .m1{  top:29px; width: 24px;
		transform: rotateZ(45deg);
	}
	.menu_btn.on .m2{ opacity: 0;
		width:0; left:50%;
	}
	.menu_btn.on .m3{  top:29px; width: 24px;
		transform: rotateZ(-45deg);
	}

	.top_menu{ padding: 60px 0 0 0;  background: #cb9f61; position:fixed; top:0; left:-100%; width:270px;  z-index:100; height: 100%; box-sizing: border-box;
		transition: 400ms ease-in-out;
	}
	.top_menu ul{ list-style:none; margin:0; padding:0 20px; width:100%; display:block; box-sizing: border-box;
		transition: 400ms ease-in-out;
	}

	.top_menu ul>li{ display: inline; text-align:center; border-left:none; float: none; margin: 0;}

	.top_menu ul>li>a{ position:relative; display:block; font-weight: 400; color:#FFF; padding:20px; text-align: center; line-height: 1.2em; border-top:solid 1px #FFF; font-size: 15px;
		transition: 500ms ease-in-out;
	}
	.top_menu ul>li:first-child>a{ border: none;}
	.top_menu ul>li>a.cur, .top_menu ul>li>a:hover{ color: #FFF;}

	.top_menu.on{ left:0; overflow:auto; -webkit-overflow-scrolling: touch;}
	.top_menu_mask{ display:block; position:fixed; top:0; left:100%;; width:100%; height:100%; z-index:0; opacity:0; background: rgba(0,0,0,0.8);
		transition: opacity 400ms ease-in;
	}
	.top_menu_mask.on{ left:0; opacity:1;}
	
	.top_menu ul ul>li>a{ position:relative; display:block;  font-size:16px; color:#686868; padding:2px 40px; text-align: left; margin: 0 -30px;
		transition: 500ms ease-in-out;
	}
	
	.top_menu ul.submenu {
		position: relative;
		top: 0;
		left: 0;
		margin: 0 auto;
		background: #001f3e;
		width: auto;
		border-radius: 5px;	
	}
	.top_menu .on ul.submenu {
		margin: 0 auto 10px;
	}
	.top_menu ul.submenu a{ border-color: #1a4e83; }

	.top_menu .submenu{ position: relative; top: 0!important; left: 0!important; width: inherit; background: none; border-radius: 0;}
	.top_menu .submenu a{ padding: 10px;}
	

	#header .logo { transform: scale(0.5) translateY(-72px);}
	#header .bg{ height: 60px; }
	#header.ed .top_menu{ top:0;}
	#header.ed .bg{ height: 60px; }
	#header.ed .logo { transform: scale(0.5) translateY(-72px);}
	
	.top_banner{ height:480px;}
	.top_banner .item{ height:480px;}
	.top_banner .pic{ height:480px;}
	.top_banner .txt{ padding: 150px 0 0 0;}

	.top_banner .txt{ padding: 200px 0 0 0;}
	.top_banner .txt h1 { font-size: 50px; }
	.top_banner .txt p { font-size: 13px; }

	.photos_1{ width: 700px; margin: -120px 0 0 -350px ; height: 240px; }
	.photos_1 a{ height:240px;}
	.photos_2{ width: 700px; margin: -120px 0 0 -350px ; height: 240px; }
	.photos_2 a{ height:240px;}
	
	.inx_pro_box .title{ font-size: 60px; margin: 40px 0 0; }
	.inx_pro_box .title span{ font-size: 30px; }
	.inx_pro_box ul{ padding: 0 50px;}
	.inx_pro_box .txt { padding: 0 30px;}

	.inx_about_box .title{ font-size: 60px; margin: 40px 0 ; }
	.inx_about_box .title span{ font-size: 30px; }
	.inx_about_box { height: 650px; }

	.inx_dl_box { height: 900px; }
	.inx_dl_box .title{ font-size: 60px; margin: 170px 0 40px; }
	.inx_dl_box .title span{ font-size: 30px; }
	
	.inx_dl2_box { height: 650px; }
	.inx_dl2_box .title{ font-size: 60px; margin: 170px 0 40px; }
	.inx_dl2_box .title span{ font-size: 30px; }

	.page_banner { height: 200px; }
	.page_banner .pic{ height: 200px;}
	.page_banner .txt{ padding: 100px 0 0 0; }
	.page_banner.s2 { height: 380px;}
	.page_banner.s2 .pic{ height: 380px;}

	.pro_banner { height: 540px;}
	.pro_banner .item { height: 540px;}
	.pro_banner .pho { top: 320px;}
	.pro_banner .txt { top: 100px; padding: 0 20px; }
	.pro_banner .txt h1{ font-size: 40px;}
	.pro_banner .txt p{ text-align: justify;}
	

	.pho_box{ padding: 20px 10px;}
	.pho_box.s3 .item{ height: 120px;}

	.news_box{ padding: 40px 0;}

	.pro_box ul {padding: 0 40px;}
	.pro_box ul li{ width: calc(100%/2);}

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

	
	
	.inner-width{ padding: 0 20px;}



	.top_banner{ height:320px;}
	.top_banner .item{ height:320px;}
	.top_banner .pic{ height:320px;}
	.top_banner .txt{ padding: 100px 0 0 0;}
	

	.inx_pro_box ul { padding: 0;}
	.inx_pro_box ul li{ padding: 0 10px; box-sizing: border-box;}
	.inx_pro_box .txt { padding: 0 10px; margin:0;}
	.inx_pro_box .txt p { display: none;}

	.photos_1 { width: 90%; margin: -60px 0 0 -45%; height: 120px;}
	.photos_1 a { height: 120px;}
	.photos_2 { width: 90%; margin: -60px 0 0 -45%; height: 120px;}
	.photos_2 a { height: 120px;}

	.inx_dl_box { height: 880px; }
	.inx_dl_box .bg{ height: 135%;}
	.inx_dl_box .title { margin: 90px 0 30px;}
	.inx_dl_box .txt p br{ display: none;}
	.inx_dl_box { height: 780px;}


	.inx_dl2_box { height: 880px; }
	.inx_dl2_box .bg{ height: 135%;}
	.inx_dl2_box .title { margin: 90px 0 30px;}
	.inx_dl2_box .txt p br{ display: none;}
	.inx_dl2_box { height: 700px;}


	.inx_about_box .txt p{ font-size: 14px;}

	.inx_dl_box .txt p{ font-size: 14px;}

	.inx_dl2_box .txt p{ font-size: 14px;}
	
	.inx_about_box{ width: auto; margin: 0; padding: 30px 0 80px 0;}
	.inx_about_box>h1{ text-align: center;}
	.inx_about_box>h5{ text-align: center;}
	
	.pos_box_p1{ width: 100%; position: relative; top: 0!important; left: 0!important; margin: -30px 0 0 0;  -webkit-transform: scale(1.15); transform: scale(1.15) !important;}
	.pos_box_p1 img{ width: 100%;}
	
	.inx_fea_box{ padding: 80px 0;}
	.inx_fea_box .txt h1{ float: none; margin: 0 0 20px 0; text-align: center;}
	.inx_fea_box .list .item{ width:50%;}
	
	.pager_bar{ padding:10px;}
	
	.inner_box{ padding: 40px 0;}
	.inner_box .edit img{ margin: 0 0 10px 0 !important;}
	
	
	.inner_box.s1 .pic {
		width: calc(100%);
		float: none;
		margin:0;
		height: 270px;
	}
	.inner_box.s1 .txt {
		width: auto;
		float: none;
		padding: 20px 0;
	}

	.inner_box.s2 .txt {
		width: auto;
		float: none;
		padding: 20px 0;
	}

	.pho_box a{ width: calc( 50% - 10px); height: 160px;}
	.pho_box a:nth-child(6n-5), .pho_box a:nth-child(6n) { width: calc( 100% - 10px);}

	.pro_banner { height: 600px;}
	.pro_banner .item { height: 600px;}

	.pro_banner .txt { width: 100%; top: 100px;}
	.pro_banner .txt h1{ font-size: 30px;}
	.pro_banner .pho {top: 430px; width: 70%; right: 21%;}
	.pro_banner .txt p{ font-size: 15px;}
	
	.pro_banner .txt h2{ font-size: 20px;}
	.pro_box ul { padding: 0;}
	.pro_box ul li {width: calc(100%/2);}
	.pro_box .txt{ padding:0 10px 20px;}
	.pro_box .txt p{ display: none;}

	.pro_box{ padding: 80px 0 0 0;}

	.pho_box.s1 a {width: calc( 100%/2) !important;}

	.inner_box.notop{ padding: 0 0 40px 0;}

	.tip_1 {margin: 0;top: 0;}

	.news_box{ padding: 0 0 40px 0;}
	.news_box .item{ margin: 0 0 20px 0;}
	.news_box .item .pic{ width: auto; float: none;}
	.news_box .item .txt { width: auto; float: none;}
	.news_box .view .cover { height: 240px;}

	.pho_box.s3 .item{ width: calc( 100%/2 - 20px);}

	.store_box{ padding: 20px;}
	.store_box .item .pic{ width: auto; float: none;}
	.store_box .item .txt { width: auto; float: none; height: auto;}
	.store_box .item .txt{ padding: 20px;}

	.inner_box .bg{ background-size: auto 100% !important; background-attachment: inherit !important;}
}
@media only screen and (max-width: 414px) {
	#footer{ padding: 20px;}
	.inx_fea_box .list.w2 .item{ width:100%;}
	.inx_fea_box .list.w2 .item a{ padding: 15px; min-height: inherit;}
	.top_banner .txt h1{ font-size: 42px;}
}
@media only screen and (max-width: 375px) {

	.inx_about_box .txt h4{ font-size: 20px;}
	
	
}
@media only screen and (max-width: 320px) {

	.inx_pro_box ul li{ padding: 0;}
	.inx_pro_box .txt h4{ font-size: 14px;}

	
	
}