*{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

html{ width:100%; height:100%; font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none;
      font-size:15px; 
	  color: #141414;
	}
ul{ margin: 0; padding: 0; list-style: none;}

/* header */
.wrap{ margin: 0; width: 100%; height: auto;}
header{ background:url(../images/header_bg.jpg)no-repeat; background-size: cover; width: 100%; padding-bottom: 31.25%; background-position: center; overflow:hidden; position: relative;}
header .head{ position: absolute; left: -10%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
header .head h1{ font-size: 80px; color: #253347;}
header .head h1 span{ display: block; font-size: 50px; font-weight: normal; color: #3B5370;}
header .head h1 p{display: block;font-size: 40px;font-weight: normal; padding: 5px 0; color: #fff;}

/*con01*/
.con01{ padding: 80px calc((100% - 1200px)/2); text-align: center;}
.con01 h2{ padding: 10px 0; font-size: 2.3em; color: #BE8D74; letter-spacing: 0.2em; }
.con01 ul{ display: flex; justify-content: space-between; align-items: stretch; margin-top: 50px;}
.con01 ul li{ padding: 50px 20px 20px; width: 20%; box-shadow: 0px 0px 5px gray; align-items:flex-end; position: relative;}
.con01 ul li:nth-child(odd){ background-color: #D3B8AA;}
.con01 ul li:nth-child(even){ background-color: #DFD7D2;}
.con01 ul li:nth-child(odd) h3{ font-size: 1.3em; color: #3B5370;}
.con01 ul li:nth-child(even) h3{ font-size: 1.3em; color: #BE8D74;}
.con01 ul li p{ padding: 25px 5px; font-size: 1.1em; color: #333333; font-weight: bold;}
.con01 ul li .btn{ display: block; margin: 0 auto; width: 100px; height:40px; display: flex; justify-content: center; align-items: center; font-size: 1em; color: #fff; background-color: #253347; position: relative;}
.con01 ul li:hover .btn{background-color: #3B5370;cursor: pointer;}
.con01 ul li .photo{ margin-top: -20px;}
.con01 ul li .photo img{display: block;width: 100%;}
.con01 ul li a{ position: absolute; width: 100%; height: 100%; left:0; top: 0; text-indent: -9999px; cursor: pointer;}

/*con02*/
.con02{text-align: center; background:url(../images/hotnews-img06bg.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; overflow:hidden; padding:80px calc((100% - 1200px)/2) ;}
.con02 h2{ padding: 20px 0; font-size: 2.3em; color: #253347; letter-spacing: 0.2em; }
.con02>p{font-size: 1.3em; color: #333333; font-weight: bold; line-height: 1.5;}
.con02 .con02box {padding: 30px calc((100% - 1000px)/2); display: flex;justify-content: space-between; align-items:center; }
.con02 .con02box img{width:35%; display: block;}
.con02 .con02box .box02right{width:60%; background-color:#3B5370; padding:30px ;text-align: left; border-radius: 1em; position: relative;}
.con02 .con02box .box02right::before {position: absolute; content: ""; width: 0; height: 0; border-width: 20px 50px 20px 0; border-color: transparent #3B5370; border-style: solid; left: -7%; top: 35%;}
.con02 .con02box .box02right h4{font-size: 1.8em; color:#BE8D74; margin: 5px 0 10px 0;}
.con02 .con02box .box02right h5{font-size: 1.4em; color:#D3B8AA;  margin: 10px 0 15px 0; line-height: 1.5;}
.con02 .con02box .box02right .con02list{font-size: 1.3em; color:#fff; line-height: 1.6; letter-spacing: 1px; text-indent : -0.55em; margin-left : 1.1em;}
.con02 .con02box .box02right .con02list span{color: #D3B8AA;}
.con02 .con02box .con02pic img{display: none;}

/*con03*/
.con03{text-align: center; background:url(../images/hotnews-img07bg.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; overflow:hidden; padding:50px calc((100% - 1200px)/2) ;}
.con03 h2{ padding: 20px 0 0 0; font-size: 2.3em; color: #253347; letter-spacing: 0.2em; }
.con03 .con03box {padding: 30px calc((100% - 1000px)/2); display: flex; justify-content: space-between; align-items:center; }
.con03 .con03box img{width:35%; margin-right:20px;}
.con03 .con03box .box03right {text-align: left;}
.con03 .con03box .box03right span{font-size: 1.4em; background-color:#3B5370; color: #fff; padding: 10px; letter-spacing: 0.1em; line-height: 2.1; }
.con03 .con03box .box03right p{font-size: 1.3em; line-height: 1.5; margin: 20px 0;}
.con03 .con03info ul {display: flex; justify-content: space-between; align-items: stretch;}
.con03 .con03info ul li{width:22%; display: flex;flex-flow: column; }
.con03 .con03info ul li a{display: block; position:relative;z-index: 5;}
.con03 .con03info ul li a img{display: block;width: 100%;filter: brightness(0.3);}
.con03 .con03info ul li a p{ position:absolute; bottom: 0; left: 0; width: 100%; height: 100%; display: flex;flex-flow: column;align-items: center; justify-content: center; color: #fff; font-size: 1.3em;}
.con03 .con03info ul li a p i{font-size: 2.3em; }
.con03 .con03info ul li a p span{font-size: 2.3em;}
.con03 .con03info ul li div {background-color: #BE8D74; flex-grow: 1;position: relative;z-index: 0;transform: translateY(-100%);transition:all .8s;}
.con03 .con03info ul li div.openCon03{transform: translateY(0);}
.con03 .con03info ul li div p{color: #fff; font-size: 1.1em;letter-spacing: 0.1em;font-weight: bold; padding: 10px; box-sizing: border-box; text-align: left;}

/*con04*/
.con04{text-align: center; background:url(../images/hotnews-img12bg.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; overflow:hidden; padding:50px calc((100% - 1200px)/2) ;}
.con04 h2{ padding: 40px 0 0 0; font-size: 2.3em; color: #BE8D74; letter-spacing: 0.2em; }
.con04 p{font-size: 1.3em; color: #fff; margin: 50px 0;}
.con04 iframe{margin: 10px 0 50px 0;}
.con04info{text-align: center; padding:50px calc((100% - 1000px)/2) ; width: 100%;overflow: hidden;}
.con04info>h3 {border-top: 1px solid ; border-bottom: 1px solid ; padding: 5px 0; display: inline-block; font-size: 1.8em; color: #D3B8AA; letter-spacing: 0.2em;}
.con04info>p{margin: 30px 0; font-size: 1.3em; }
.con04info .slideR{display: flex; justify-content: space-between; align-items: stretch;width: 90%; margin:0 auto;}
.con04info .slideR .slideCon{line-height: 1.8; padding: 20px;box-sizing: border-box;}
.con04info .slideR .slideCon>div{ background-color: #DFD7D2;padding: 20px; box-sizing: border-box;}
.con04info .slideR .slideCon img{display: block; border-radius: 100%; width: 30%; margin: 0 auto;}
.con04info .slideR .slideCon h4{font-size: 1.8em; color: #3B5370; display: flex; justify-content: center; align-items: center; padding: 10px 0 0 0;}
.con04info .slideR .slideCon h4 span{font-size: 17px; color: #fff; background-color:#3B5370; padding: 3px 20px; border-radius: 50px; margin: 0 10px;}
.con04info .slideR .slideCon h5{font-size: 1.3em; color: #BE8D74;}
.con04info .slideR .slideCon p{font-size: 1.1em; text-align: left; margin:10px 0;}
.con04info .slick-prev,.con04info .slick-next{height:50px;width: 50px;z-index: 999;}
.con04info .slick-prev:before,.con04info .slick-next:before{color:#253347; font-size:50px;}

/*con05*/
.con05{text-align: center; background:url(../images/hotnews-img13bg.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; overflow:hidden; padding:80px calc((100% - 1200px)/2) ;}
.con05 h2{ padding: 20px 0; font-size: 2.3em; color: #253347; letter-spacing: 0.2em; }
.con05 .con05info {display: flex; justify-content: space-evenly; align-items: center; }
.con05 .con05info img{display:block; width: 35%;}
.con05 .con05info .box05right{display: flex; flex-flow: column;  position: relative; width: 50%;}
.con05 .con05info .box05right h3{background-color:#3B5370 ;padding: 30px; font-size: 1.5em;line-height: 1.5; color: #fff; text-align: left; margin: 50px 0;}
.con05 .con05info .box05right h3::before {position: absolute; content: ""; width: 0; height: 0; border-width: 50px 30px 0 30px; border-color: #3B5370 transparent ; border-style: solid; left: 45%; top: 50%;}
.con05 .con05info .box05right a{text-decoration:none;}
.con05 .con05info .box05right h4{font-size: 2em; color: #BE8D74; background-color: #fff; border-radius: 50px; font-weight: normal; margin: 10px 0; padding: 10px; ;}
.con05 .con05info .box05right h4:hover{background-color: #3B5370; color: #fff;}

/*con06*/
.con06{ padding: 80px calc((100% - 1000px)/2); text-align: center;}
.con06 h2{ padding: 10px 0; font-size: 2.3em; color: #487676; letter-spacing: 0.2em; }
.con06 ul{ margin-top: 120px; display: flex; justify-content: center; }
.con06 ul li{ width: 30%;}
.con06 ul li .qabox{ position: relative;}
.con06 ul li .qabox .title{ width: 130px; height: 130px; border-radius: 50%; background-color: #BE8D74; color: #fff; display: flex; flex-direction: column; justify-content: center; position: absolute; left:30%; top: -60%;}
.con06 ul li .qabox .title p{ font-size: 1.2em;}
.con06 ul li .qabox .title h4{ font-size: 1.6em;}
.con06 ul li .qabox .qa{ padding: 50px 20px 30px; border: 1px solid #9e978f; font-size: 1.6em; color: #2d343d;}
.con06 ul li:nth-child(2) .qabox .qa{ border-left: 0; border-right: 0;}
.con06 ul li .qabox .qa a{ text-decoration: none; color: #253347;}
.con06 ul li .qabox .qa a:hover{ text-decoration: underline;} 


/* 公職王留單 */
.contactus{ background:url(../images/contactus_bg.jpg) no-repeat; background-size: cover; background-position: center; width: 100%; overflow:hidden; padding:95px calc((100% - 1200px)/2) ;}
.contactus .contactbox h2{ padding-bottom: 30px; font-size: 2.2em; color: #fff;}
.contactus .contactbox h2 i{ color: #BE8D74;}
.contactus .contactbox a{ display: inline-block; width: 220px; height: 60px; line-height: 60px; font-size: 1.3em; color: #fff; text-align: center; border: 1px solid #9e978f; text-decoration: none;}
.contactus .contactbox a.service{ background-color: #D3B8AA;}
.contactus .contactbox a.line{ background-color: #BE8D74;}


/* footer */
footer{ background: #000; padding:35px; box-sizing: border-box; padding:40px calc((100% - 1200px)/2);}
footer ul{display: flex;justify-content: space-between; margin-bottom:20px;}
footer ul li{border-right: 1px solid #fff;width: 9%;text-align: center;}
footer ul li:last-child{border: 0;}
footer ul a{color: #fff;text-decoration: none;font-size: 18px;}
footer>p{color: #fff;text-align: center;}

footer ul a{position: relative;}
footer ul a::after{content:'';position: absolute;bottom: 0;left: 45%;background:#fff;height:1px;width:0;transition: all .5s;}
footer ul a:hover::after{width: 100%;left:0;}
footer a{ color: #fff; line-height: 1.6;}

/* bottom */
.bottom{position: fixed;bottom:6%;right:2%;display: flex;flex-flow: column;  z-index: 999; }
.bottom a{text-decoration: none;font-weight: bold;text-align: center;}
.bottom .gotop{background:#253347; color: #D3B8AA; font-size:50px; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; border-radius: 50px;}

/*至底按鈕*/
#btn-line {display: none;}

/* ===== other ===== */
@media(max-width:1250px){
/* header */
	header .head{padding: 0 4%;}
	header .head h1{ font-size: 60px;}
	header .head h1 span{ font-size: 40px;}
	header .head h1 p{font-size: 30px; }

/*con01*/
	.con01 ul{ margin-top: 25px; flex-wrap: wrap; justify-content: space-evenly;}

/*con02*/
	.con02{padding:30px 4% 0;}

/*con03*/
	.con03{padding: 50px 4% 30px;}
	.con03 .con03info ul {justify-content: space-evenly;}
	.con03 .con03info ul li a p{ font-size: 1.2em;}
	.con03 .con03info ul li a p i{font-size: 2em; }
	.con03 .con03info ul li a p span{font-size: 1.8em;}

/*con04*/
	.con04{padding:50px 1%;}
	.con04 iframe{width: 100%;}		
	
/*con05*/
	.con05{padding:30px 4% ;}
	.con05 .con05info img{width: 30%;}

/* 公職王留單 */
	.contactus{ padding:70px 4% ;}
	.contactus .contactbox h2{ font-size: 2.2em;}
	.contactus .contactbox a{ font-size: 1.35em;}

/* bottom */
	.bottom .gotop{font-size: 40px; width: 65px; height: 65px;}
}



/* ===== ipad ===== */
@media(max-width:768px){
/* header */
	header{background:url(../images/header_mobile.jpg)no-repeat;width: 100%;height: 0;padding-bottom:100%;background-size: cover;}
	header .head{  left: 0%;}
	header .head h1{ font-size: 55px;}
	header .head h1 span{ font-size: 45px;}
	header .head h1 p{font-size: 40px; }

/*con02*/
	.con02{background:url(../images/hotnews-img06bg_mobile.png) no-repeat; background-size:cover; background-position: center; width: 100%; overflow:hidden; }
	.con02 .con02box img{display: none;}
	.con02 .con02box {padding: 50px calc((100% - 700px)/2) 0; display: flex; flex-wrap: wrap; justify-content: center; }
	.con02 .con02box .box02right{width:100%; }
	.con02 .con02box .box02right::before {position: absolute; content: ""; border-width:45px 20px 0 20px;; border-color: #3B5370 transparent; left: 47%; top: 95%;}
	.con02 .con02box .box02right h4{font-size: 1.6em}
	.con02 .con02box .box02right h5{font-size: 1.2em;}
	.con02 .con02box .box02right .con02list{font-size: 1.1em; line-height: 1.8; }
	.con02 .con02box .con02pic img{display: block; width: 70%; margin: 40px auto;}

/*con03*/
	.con03 .con03box .box03right span {font-size: 1.2em; letter-spacing: 0; padding: 7px; line-height: 1.8;}
	.con03 .con03box .box03right p {font-size: 1.2em;}
	.con03 .con03box  {display: flex; justify-content: center; flex-wrap: wrap;}
	.con03 .con03box img{width:60%; margin-bottom: 5%;}
	.con03 .con03box .box03right {text-align: center;}
	.con03 .con03info ul {display: flex; justify-content: center; flex-wrap: wrap; padding: 0 calc((100% - 450px)/2) ; }
	.con03 .con03info ul li{width:100%; display: flex;flex-flow: column; margin-bottom: 30px; }
	.con03 .con03info ul li a p{ font-size: 1.7em;}
	.con03 .con03info ul li a p i{font-size: 2em; }
	.con03 .con03info ul li a p span{font-size: 2em;}
	.con03 .con03info ul li div p{font-size: 1.2em;}


/*con04*/
	.con04{padding:60px 4% 60px;}
	.con04 p { margin: 30px 0;}
	.con04info{ padding:50px 2%;}
	.con04info>h3{font-size: 1.3em;}
	.con04info .slideR .slideCon>div{padding: 20px 20px 10px 20px;}
	.con04info .slideR .slideCon img{width: 70%;}
	.con04info .slideR .slideCon h4 {display: flex; flex-wrap: wrap;}
	.con04info .slideR .slideCon h4 span{font-size: 15px; padding: 3px 10px; margin: 0 5px;}
	.con04info .slideR .slideCon h5{font-size:1.15em ;}
	.con04info .slideR .slideCon p{font-size: 1em;}

/*con05*/
	.con05 .con05info .box05right{width: 80%;}
	.con05 .con05info .box05right h3 {padding: 20px; font-size: 1.2em; margin: 30px 0;}
	.con05 .con05info .box05right h3::before{border-width: 30px 30px 0 30px; left: 42%; top:47%}
	.con05 .con05info .box05right h4 {font-size: 1.6em; padding: 7px;}

/*con06*/
	.con06{ padding: 50px 5%; }
	.con06 h2{ font-size: 2em;}
	.con06 ul{ margin-top: 100px; padding: 0 5%; display: flex; flex-wrap: wrap; justify-content: center; }
	.con06 ul li{ width: 100%; margin-bottom: 100px}
	.con06 ul li .qabox .title{left: 39%;}
	.con06 ul li .qabox .title p{ font-size: 1.2em;}
	.con06 ul li .qabox .title h4{ font-size: 1.6em;}
	.con06 ul li .qabox .qa{ padding: 50px 20px 30px; border: 1px solid #9e978f; font-size: 1.5em;}
	.con06 ul li:nth-child(2) .qabox .qa{ border-left: 1px solid #9e978f; border-right: 1px solid #9e978f;}
	.con06 ul li:nth-child(3){ margin-bottom: 0px;}

/* 公職王留單 */
	.contactus .contactbox h2{ font-size: 2em; }

/*至底按鈕*/	
	#btn-line{display: block; position: fixed;  bottom: 0; left: 0; width: 100%; z-index: 10000; text-align: center;}
	#btn-line>div{ padding: 20px 0; background-color: rgba(0, 0, 0, 0.75);}
	#btn-line>div a{ padding: 10px 20px; text-decoration: none;  font-size: 18px; color: #fff; border-radius: 10px; }
	#btn-line>div a.line{background-color: rgba(0, 195, 0, 0.75);}
	#btn-line>div a.fm{background-color: rgba(195, 0, 0, 0.75);}
}

/* ===== phone ===== */
@media(max-width:600px){
/* header */
	header .head{left: 0%;}
	header .head h1{ font-size: 50px;}
	header .head h1 span{ font-size: 30px;}
	header .head h1 p{font-size: 25px;}

/*con01*/
	.con01{ padding: 50px 0; text-align: center;}
	.con01 h2{ padding: 10px 0; font-size: 2em;}
	.con01 ul{ margin-top: 25px; flex-wrap: wrap; justify-content: center;}
	.con01 ul li{ width: 70%; margin-bottom: 20px; }

/*con02*/
	.con02 h2{ font-size: 2em;}
	.con02>p{font-size: 1.1em;}
	.con02 .con02box {padding: 20px calc((100% - 700px)/2) 0; display: flex; flex-wrap: wrap; justify-content: center; }
	.con02 .con02box .box02right::before {position: absolute; content: ""; border-width:45px 20px 0 20px;; border-color: #3B5370 transparent; left: 45%; top: 97%;}
	.con02 .con02box .box02right h4{font-size: 1.5em}
	.con02 .con02box .box02right h5{font-size: 1.1em;}
	.con02 .con02box .box02right .con02list{font-size: 1.05em; line-height: 1.7; }

/*con03*/
	.con03 h2{ font-size: 2em;}
	.con03 .con03box .box03right span{font-size: 1.2em; padding: 10px; }
	.con03 .con03box .box03right p {font-size: 1.15em; line-height: 1.6; margin: 20px 0 0 0;}

/*con04*/
	.con04 h2{font-size: 2em;}
	.con04 p{font-size: 1.1em; line-height: 1.6;}
	.con04>div{position: relative;padding-bottom:56.25%;}
	.con04>div>iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

	.con04info .slideR .slideCon>div{padding: 30px 30px 10px 30px;}
	.con04info .slideR .slideCon img{width: 50%;}
	.con04info .slideR .slideCon h4{font-size: 2em;}
	.con04info .slideR .slideCon h4 span{font-size: 18px; padding: 3px 10px; margin: 0 6px;}
	.con04info .slideR .slideCon h5{font-size:1.5em ;}
	.con04info .slideR .slideCon p{font-size: 1.2em;}

/*con05*/
	.con05 h2{font-size: 2em;}
	.con05 .con05info img{width: 50%;}
	.con05 .con05info{justify-content: center; flex-wrap: wrap;}
	.con05 .con05info .box05right h3{font-size: 1.4em;}
	.con05 .con05info .box05right h3::before{left: 43%; top: 57%;}

/*con06*/
	.con06 ul li .qabox .title{left: 35%;}

/* 公職王留單 */
	.contactus{ background:url(../images/contactus-bg_mobile.jpg) no-repeat; background-size: cover; width: 100%; }
	.contactus{ padding:200px 4% 50px;}
	.contactus .contactbox h2{ padding-bottom: 20px; font-size: 2em; text-indent : -0.55em; margin-left : 1.1em; }
	.contactus .contactbox a{width: 100%; font-size: 1.15em; margin-bottom: 20px;}	

/* footer */
	footer ul li{width:31%;margin:10px 1%;}
	footer ul li a{display: block;width: 100%;height: 100%;}
	footer>p{font-size: 14px;}

/* bottom */
	.bottom .gotop{font-size: 35px; width: 60px; height: 60px;}

}