@import url(../css2017/reset.css);  
@import url(../css2017/animate.css); 
@import url(../css2017/menu.css); 
@import url(https://fonts.googleapis.com/css?family=Alegreya);
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);
a, *:hover, *:active{-webkit-transition: background 500ms ease, height 500ms ease, color 500ms ease; -moz-transition: background 500ms ease, height 500ms ease, color 500ms ease; -ms-transition: background 500ms ease, height 500ms ease, color 500ms ease; -o-transition: background 500ms ease, height 500ms ease, color 500ms ease; transition: background 500ms ease, height 500ms ease, color 500ms ease; }

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
textarea {  -webkit-appearance: none;} 

body{margin:0; font-family:Verdana,Geneva,"微軟正黑體",'cwtexhei'; color:#535454;}
.clean{clear:both;}

/* header */
header{width:100%; height:130px; position:fixed; top:0; z-index:999999;}
header .head_box{width:1200px; margin:auto;}
header .head_box ul.toparea{margin-top:10px; width:100%; height:75px;}
header .head_box ul.toparea li{width:33.3%; float:left; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
header .head_box ul.toparea li:first-child{color:#000; font-size:13px; margin-top:5px; padding-left:5px;}
header .head_box ul.toparea li:first-child a{color:#7a5e5a;}
header .head_box ul.toparea li:first-child a:hover{color:#c70026;}
header .head_box ul.toparea li:nth-child(2){text-align:center;}
header .head_box ul.toparea li:nth-child(3){text-align:right; color:#676767; font-size:12px; padding-right:5px;}
header .head_box ul.toparea li:nth-child(3) h1{ display:inline-block;}
header .head_box ul.toparea li:nth-child(3) a{color:#676767;}
header .head_box ul.toparea li:nth-child(3) a:hover{color:#c70026;}
header .head_box ul.toparea li:nth-child(3) img{margin:-5px 0 0 5px;}
header .head_box ul.toparea li:nth-child(3) img:hover{position:relative; left:1px; top:1px;}
/*header .head_box ul.menu{border-top:1px solid #907e62; padding:1.2% 2.8%; text-align:center;}
header .head_box ul.menu li{display:inline-block; padding:0 2%; color:#343434; font-size:15px; font-weight:bold;}
header .head_box ul.menu li a{color:#343434;}
header .head_box ul.menu li:hover a{color:#c70026;}*/

.bg_white{background:#fff;}
.bg_light{background:#ffebeb;}
.bg_dark{background:#000;}
header.bg_dark .head_box ul.toparea li:first-child{color:#fff;}
header.bg_dark .head_box ul.toparea li:first-child a{color:#fff;}
header.bg_dark .head_box ul.toparea li:first-child a:hover{color:#ff0031;}
header.bg_dark .head_box ul.toparea li:nth-child(3){color:#dad1c4;}
header.bg_dark .head_box ul.toparea li:nth-child(3) a{color:#dad1c4;}
header.bg_dark .head_box ul.toparea li:nth-child(3) a:hover{color:#ff0031;}
header.bg_dark .head_box ul.menu{border-top:1px solid #aba090;}
header.bg_dark .head_box ul.menu li{color:#fff;}
header.bg_dark .head_box ul.menu li a{color:#fff;}
header.bg_dark .head_box ul.menu li:hover a{color:#ff0031;}

.no_heigh header .head_box ul.toparea{transition:all 0.5s ease;}
.small_heigh header{height:125px;}
.small_heigh header .head_box ul.toparea{transition:all 0.5s ease; height:70px;}
.small_heigh header .head_box ul.toparea li:nth-child(2) img{width:214px; height:auto;}
.mobile_header{display:none;}

/* search */
.search{width:100%; position:relative;}
.searchbox{
/*definint width of form element*/
    width:300px;
	float:right;
}
.searchbox input[type="submit"]{
background:url(../images2017/in_search_btn.png) no-repeat;
width:21px;
height:21px;
border:0;
position:absolute;
left:160px;
margin-top:12px;
cursor:pointer;
}
.searchbox input[type="submit"]:hover{left:161px; top:1px;}
.searchbox input[type="search"]{
    padding:6px 15px 6px 50px;
	margin-top:7px;
    font-size:14px;
    color:#907e62;
/*removing boder from search box*/
    border:1px solid #e0dbce;
	 -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
	/*background:url(../images2017/in_search_btn.png) no-repeat 10px 5px;*/
}
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
.searchbox input[type="search"]::-webkit-input-placeholder{
    color:#777;
}
.searchbox input[type="search"]:-moz-placeholder { /* Firefox 18- */
   color: #777;
}
.searchbox input[type="search"]::-moz-placeholder {  /* Firefox 19+ */
   color: #777;
}
.searchbox input[type="search"]:-ms-input-placeholder {  /* interner explorer*/
   color: #777;
}


/*now first we will hide the suggestion list*/
.suggestions{position:absolute; width:227px; padding:10px; right:0; z-index:99999;}
.suggestions li{
    overflow:hidden; 
	opacity:0;
	width:100% !important;
    height:0;
	margin-bottom:2%;
	padding:0 !important;
	text-align:center !important;
    -webkit-transition:all 0.3s ease-in-out;
   -moz-transition:all 0.3s ease-in-out;
     -o-transition:all 0.3s ease-in-out;
        transition:all 0.3s ease-in-out;
}
.suggestions li:last-child{margin-bottom:0;}
.suggestions li:hover{background:#907e62;}
.suggestions li:hover a{color:#fff !important;}
/*and make the suggestion reappear when user focus on search field*/
.searchbox input[type="search"]:focus + .suggestions{background:#e0dbce;}
.searchbox input[type="search"]:focus + .suggestions li{
    height:30px;
	opacity:1;
}
.searchbox input[type="search"]:focus + .suggestions li a{line-height:28px;}



/* rwd menu */
.button_container {display:none; position:fixed; z-index:999999;/**/ left:10px; top:10px; height:30px; width:30px;/* border:1px solid #38849e; background:#38849e;*/ cursor: pointer; -webkit-transition: opacity .25s ease ;transition: opacity .25s ease;}
.button_container:hover {opacity: .7;}
.button_container.active .top {-webkit-transform: translateY(10px) translateX(0) rotate(45deg); transform: translateY(10px) translateX(0) rotate(45deg);background: #666;top: -2px;}
.button_container.active .middle {opacity: 0;background: #666;}
.button_container.active .bottom {-webkit-transform: translateY(-10px) translateX(0) rotate(-45deg); transform: translateY(-10px) translateX(0) rotate(-45deg);background: #666;left: 0px;top: 18px;}
.button_container span {background: #777; border-radius:5px;border: none; height:4px; width: 80%; margin:2px;position: absolute;top: 3px;left: 2px;-webkit-transition: all .35s ease;transition: all .35s ease;cursor: pointer;}
.button_container span:nth-of-type(2) {top:11px;}
.button_container span:nth-of-type(3) {top: 19px;}

.container{width:100%; margin-top:130px;}

/* footer */
footer{width:100%;}
footer .copyright{font-size:12px; color:#fff; text-align:center; padding:10px 0; width:100%; background:#2c2c2c;}
footer .copyright h2{font-size:15px; font-weight:normal;}
footer .foot_box{width:100%; padding:30px 0; background:#3d3d3d;}
footer .foot_box ul{width:1200px; height:145px; margin:auto; position:relative;}
footer .foot_box ul li{color:#fff; font-size:15px; margin-right:7%; float:left;}
footer .foot_box ul li a{color:#fff; line-height:36px;}
footer .foot_box ul li a:hover{color:#c70026;}
footer .foot_box ul li:first-child{position:absolute; right:0; bottom:0; font-size:12px; margin-right:0; float:none;}
footer .foot_box ul li:first-child a{color:#ff002e;}
footer .foot_box ul li:first-child a:hover{color:#fff;}
footer .foot_box ul li:nth-child(5){margin-right:0;}
.ft_logo{display:block;}
.mobil_ft_logo{display:none;}


/*page*/
ul.page{width:100%; margin:0 0 4% 0; text-align:center;}
ul.page li{display:inline-block; margin-right:0.5%; font-size:13px; color:#555;}
ul.page li:last-child{margin-right:0;}
ul.page li a{color:#555; padding:4px 8px; border:rgba(0,0,0,0) 1px solid;}
ul.page li a:hover{border:#ae9777 1px solid;}
ul.page li.current_page{}
ul.page li.current_page a{background:#ae9777; color:#fff;}



/*go top*/
.cd-top {display: inline-block;height: 40px;width: 40px; border-radius:20px;position: fixed;bottom: 40px;right: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);/* image replacement properties */overflow: hidden;text-indent: 100%;white-space: nowrap;background:rgb(174, 151, 119) url(../images2017/cd-top-arrow.svg) no-repeat center 50%;visibility: hidden;opacity: 0;-webkit-transition: opacity .3s 0s, visibility 0s .3s;-moz-transition: opacity .3s 0s, visibility 0s .3s;transition: opacity .3s 0s, visibility 0s .3s;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {z-index:999999;-webkit-transition: opacity .3s 0s, visibility 0s 0s;-moz-transition: opacity .3s 0s, visibility 0s 0s;transition: opacity .3s 0s, visibility 0s 0s;}
.cd-top.cd-is-visible {visibility: visible;opacity: 1;}
.cd-top.cd-fade-out {opacity: .5;}
.no-touch .cd-top:hover {background-color: #20A2FF;opacity: 1;}

@media only screen and (max-width: 1200px)
{
.small_heigh header{height:133px;}
header{height:120px;}
header .head_box{width:100%; padding:0 1%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
header .head_box ul.toparea{height:65px;}
header .head_box ul.toparea li:first-child{font-size:12px;}
header .head_box ul.toparea li:nth-child(2) img{width:220px; height:auto;}
header .head_box ul.toparea li:nth-child(3) h1{display:block; margin-bottom:10px;}
/*header .head_box ul.menu{padding:1.2% 1%;}
header .head_box ul.menu li{padding:0 1.5%;}*/
.search{width:auto; float:left;}
.searchbox{width:auto;}
.searchbox input[type="search"]{width:150px; margin-top:0; padding:6px 5px 6px 35px;}
.searchbox input[type="submit"]{left:10px; margin-top:6px;}
.searchbox input[type="submit"]:hover{left:16px;}
.suggestions{width:130px;}
.container{margin-top:120px;}
footer .copyright h2{font-size:13px;}
footer .foot_box ul{width:100%; padding:0 1%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
footer .foot_box ul li:first-child{right:1%;}
}

@media only screen and (max-width: 1024px)
{
#change{display:none;}
.mobile_header{display:block; position:fixed; width:100%; top:0; z-index:99999;}
.mobile_header ul.m_toparea{background:#f8f6ea; padding:0.6% 1%;}
.mobile_header ul.m_toparea li{width:33.3%; float:left; margin-bottom:1%;}
.mobile_header ul.m_toparea li:nth-child(2){text-align:center;}
.mobile_header ul.m_toparea li:nth-child(2) img{width:150px; height:auto;}
.mobile_header ul.m_toparea li:nth-child(3){font-size:13px; color:#666; text-align:right; line-height:36px;}
.mobile_header ul.m_toparea li:nth-child(3) a{color:#666;}
.mobile_header ul.m_toparea li:nth-child(3) a:hover{color:#c70026;}
.button_container, .overlay.open{display:block;}
.mobile_header ul.submenu{width:100%; background:#fff; text-align:center; padding:1.5% 1%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.mobile_header ul.submenu li{/*float:left; */ display:inline-block; background:url(../images2017/primary/submenu_line.gif) no-repeat right 3px; width:24.5%;/* padding:0 15px 0 0; margin-right:15px;*/ text-align:center; font-size:16px; color:#000;}
.mobile_header ul.submenu li a{color:#000;}
.mobile_header ul.submenu li a:hover{color:#c70026;}
.mobile_header ul.submenu li:last-child{color:#9a815f; background:none;}
.mobile_header ul.submenu li:nth-child(4) a{color:#9a815f;}
.search-box-s{width:40%; margin:2% auto; position:relative;}
.search-box-s input[type=text]{background:#fff; border:1px solid #dedede; border-radius:4px; padding:10px 29px 10px 10px; color:#000 !important; font-size:14px; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.search-box-s input[type=submit]{background:url(../images2017/in_search_btn.png) no-repeat; width:21px; height:21px; border:0; position:absolute; top:8px; right:15px;}
.search-box-s input[type=submit]:hover{position:absolute; top:9px; right:14px; cursor:pointer;}
.container{margin-top:115px;}
}

@media only screen and (max-width: 980px)
{
body{font-family:Verdana,Geneva,"微軟正黑體";}
.container{margin-top:105px;}
}


@media only screen and (max-width: 767px)
{
.container{margin-top:100px;}

footer .foot_box ul li:first-child{right:0; left:6%; bottom:-9%;}
footer .foot_box ul li:nth-child(2){margin-left:5%;}
.ft_logo{display:none;}
.mobil_ft_logo{display:block;}
}

@media only screen and (max-width: 640px)
{
.mobile_header ul.submenu li{font-size:1.2em; width:24.3%;}
.search-box-s{width:60%;}
.container{margin-top:95px;}
footer .foot_box ul li{font-size:13px;}
}

@media only screen and (max-width: 480px)
{
.mobile_header ul.m_toparea li:nth-child(2) img{width:120px;}
.mobile_header ul.m_toparea li:nth-child(3){font-size:0.75em;}
.mobile_header ul.submenu li{font-size:1em; width:24%;}
.search-box-s input[type=text]{padding:7px 29px 7px 10px;}
.container{margin-top:70px;}
footer .foot_box{padding:15px 0;}
footer .foot_box ul{height:130px;}
footer .foot_box ul li{font-size:12px;}
footer .foot_box ul li a{line-height:28px;}
footer .foot_box ul li:first-child{ bottom:-2%;}
.mobil_ft_logo{width:80%; height:auto;}
ul.page{margin-bottom:6%;}
}

@media only screen and (max-width: 360px)
{
.mobile_header ul.submenu li{width:23.9%;}
.mobile_header ul.m_toparea li a{font-size:1.3em;}
.overlay ol li img{width:30px !important;}
footer .foot_box ul li{ margin-right:3%;}
}