/* golf球洞*/

#golfmenu  {
width: 80%;
	margin-left: auto;
    margin-right: auto;
	
}
#golfmenu > ul > li {
	display: inline-block;
	
}
#golfmenu > ul > li > a {
	
	padding: 20px 20px 20px 20px;
}
#golfmenu ul li.m01 {
	
}
#golfmenu ul li.m02 > a {
	background: url(/WebMaster/themes/default/Golfmenu/golf_03.jpg) no-repeat center top;
}
#golfmenu ul li.m03 > a {
	background: url(Golfmenu/golf_04.jpg) no-repeat center top;
}
#golfmenu ul li.m04 > a {
	background: url(Golfmenu/golf_05.jpg) no-repeat center top;
}
#golfmenu ul li.m05 > a {
	background: url(Golfmenu/golf_06.jpg) no-repeat center top;
}
#golfmenu ul li.m06 > a {
	background: url(Golfmenu/golf_07.jpg) no-repeat center top;
}
#golfmenu ul li.m07> a {
	background: url(Golfmenu/golf_08.jpg) no-repeat center top;
}
#golfmenu ul li.m08 > a {
	background: url(Golfmenu/golf_09.jpg) no-repeat center top;
}
#golfmenu ul li.m09 > a {
	background: url(Golfmenu/golf_10.jpg) no-repeat center top;
}
#golfmenu ul li.m10 > a {
	background: url(Golfmenu/golf_11.jpg) no-repeat center top;
}

#golfmenu ul li.m12 > a {
	background: url(Golfmenu/golf_13.jpg) no-repeat center top;
}
#golfmenu ul li.m13 > a {
	background: url(Golfmenu/golf_14.jpg) no-repeat center top;
}
#golfmenu ul li.m14 > a {
	background: url(Golfmenu/golf_15.jpg) no-repeat center top;
}
#golfmenu ul li.m15 > a {
	background: url(Golfmenu/golf_16.jpg) no-repeat center top;
}
#golfmenu ul li.m16 > a {
	background: url(Golfmenu/golf_17.jpg) no-repeat center top;
}
#golfmenu ul li.m17 > a {
	background: url(Golfmenu/golf_18.jpg) no-repeat center top;
}
#golfmenu ul li.m18 > a {
	background: url(Golfmenu/golf_19.jpg) no-repeat center top;
}
#golfmenu ul li.m19 > a {
	background: url(Golfmenu/golf_20.jpg) no-repeat center top;
}
#golfmenu ul li.m20 > a {
	background: url(Golfmenu/golf_21.jpg) no-repeat center top;
}

/* 滑入效果 */

#golfmenu ul li.m01 {
	
}
#golfmenu ul li.m02:hover > a {
	background: url(Golfmenu/golf_03a.jpg) no-repeat center top;
}
#golfmenu ul li.m03:hover > a {
	background: url(Golfmenu/golf_04a.jpg) no-repeat center top;
}
#golfmenu ul li.m04:hover > a {
	background: url(Golfmenu/golf_05a.jpg) no-repeat center top;
}
#golfmenu ul li.m05:hover > a {
	background: url(Golfmenu/golf_06a.jpg) no-repeat center top;
}
#golfmenu ul li.m06:hover  > a {
	background: url(Golfmenu/golf_07a.jpg) no-repeat center top;
}
#golfmenu ul li.m07:hover > a {
	background: url(Golfmenu/golf_08a.jpg) no-repeat center top;
}
#golfmenu ul li.m08:hover > a {
	background: url(Golfmenu/golf_09a.jpg) no-repeat center top;
}
#golfmenu ul li.m09:hover > a {
	background: url(Golfmenu/golf_10a.jpg) no-repeat center top;
}
#golfmenu ul li.m10:hover > a {
	background: url(Golfmenu/golf_11a.jpg) no-repeat center top;
}

#golfmenu ul li.m12:hover > a {
	background: url(Golfmenu/golf_13a.jpg) no-repeat center top;
}
#golfmenu ul li.m13:hover > a {
	background: url(Golfmenu/golf_14a.jpg) no-repeat center top;
}
#golfmenu ul li.m14:hover > a {
	background: url(Golfmenu/golf_15a.jpg) no-repeat center top;
}
#golfmenu ul li.m15:hover > a {
	background: url(Golfmenu/golf_16a.jpg) no-repeat center top;
}
#golfmenu ul li.m16:hover > a {
	background: url(Golfmenu/golf_17a.jpg) no-repeat center top;
}
#golfmenu ul li.m17:hover > a {
	background: url(Golfmenu/golf_18a.jpg) no-repeat center top;
}
#golfmenu ul li.m18:hover > a {
	background: url(Golfmenu/golf_19a.jpg) no-repeat center top;
}
#golfmenu ul li.m19:hover > a {
	background: url(Golfmenu/golf_20a.jpg) no-repeat center top;
}
#golfmenu ul li.m20:hover > a {
	background: url(Golfmenu/golf_21a.jpg) no-repeat center top;
}
/* golf球洞end*/
.csslider {
  -moz-perspective: 100%;
  -ms-perspective: 100%;
  -webkit-perspective: 100%;
  perspective: 100%;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.csslider > input {
  display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider > ul {
  position: relative;
  width: 450px;
  height: 560px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
 /* background-color: #3A3A3A;
  border: 10px solid #3A3A3A;*/
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
.csslider > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider > .navigation {
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px;
  background: transparent none repeat scroll 0 0;
}
.csslider > .navigation label:hover:after {
  opacity: 1;
}
.csslider > .navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
   background: transparent none repeat scroll 0 0;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider.inside .navigation label {
  border: 1px solid #7e7e7e;
}

.csslider > .arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #3A3A3A;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}
.csslider > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #71ad37;
  margin: 0 0px;
}
.csslider > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
#slider1 {
  margin: 20px;
 
  float: left;
}


::-webkit-scrollbar {
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(74, 168, 0, 0.6);
}


/**/
#bg {background: #000;opacity: 0.6;-moz-opacity: 0.6;-ms-opacity: 0.6;-o-opacity: 0.6;-webkit-opacity: 0.6;width: 100%;height: 100%;position: absolute;top: 0;left: 0;filter: alpha(opacity=60);z-index: 101;position: fixed}
#info {height: 0px;width: 0px;top: 15%;left: 50%;position: absolute;line-height: 18px;}
#center {width: 650px;height: 580px;position: absolute;margin: -50px -300px;z-index: 102;background-color: #fff;padding: 0px 15px;}
#center img{width: 100%;height: 100%;}
#center p {padding: 5px;margin: 0px;text-align: right;color: #FFF;position: relative;font-size: 21px;right: 0%;top: 0%;font-weight: bold;}
#center p a {text-decoration: none;color: #999;}
#center p a:hover {text-decoration: none;color: #FFF;}
@media (min-width: 860px) and (max-width: 1400px) {
#center {width: 480px;height: 400px;position: absolute;margin: 60px -300px;z-index: 102;}
}
@media only screen and (max-width: 768px) {
#slider1 {
float:none;
}


.col-rt-12{
display: flex;
    align-items: center;
    justify-content: center;
}
#golfmenu > ul > li {
	display: inline-block;
	padding-top:30px;
	
	
}
#golfmenu  {
width:100%;
	margin-left: -20px;
	text-align: center;
}
#info {height: 0px;width: 0px;top: 15%;left: 50%;position: absolute;line-height: 18px;}
#center {width: 320px;height: 320px;position: absolute;margin: 60px -165px;z-index: 102;padding: 5px}
}
@media only screen and (max-width: 480px) {
.csslider > ul {

  width: 100%;
  height:530px;
}
#slider1 {
  margin: 0px;
 

}

}







<!-- 木屋 -->







.csslider2 {
  -moz-perspective: 100%;
  -ms-perspective: 100%;
  -webkit-perspective: 100%;
  perspective: 100%;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.csslider2 > input {
  display: none;
}
.csslider2 > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.csslider2 > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.csslider2 > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.csslider2 > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.csslider2 > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.csslider2 > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.csslider2 > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider2 > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider2 > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider2 > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider2 > ul {
  position: relative;
  width: 100%;
  height: 700px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
 /* background-color: #3A3A3A;
  border: 10px solid #3A3A3A;*/
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider2 > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
.csslider2 > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider2 > .navigation {
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider2> .navigation > div {
  margin-left: -100%;
}
.csslider2 > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px;
  background: transparent none repeat scroll 0 0;
}
.csslider2 > .navigation label:hover:after {
  opacity: 1;
}
.csslider2 > .navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
   background: transparent none repeat scroll 0 0;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}
.csslider2 > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider2.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider2.inside .navigation label {
  border: 1px solid #7e7e7e;
}

.csslider2 > .arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider2 > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #3A3A3A;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}
.csslider2 > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #71ad37;
  margin: 0 0px;
}
.csslider2 > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider2.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider2 > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider2 > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider2 > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider2 > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider2 > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider2 > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider2 > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider2 > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider2 > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider2 > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider2 > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider2.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider2 > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider2 > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider2 > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider2 > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider2 > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider2 > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider2 > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider2 > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider2 > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider2 > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider2 > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
#slider2 {
  margin: 20px;
 
  float: left;
}


::-webkit-scrollbar {
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(74, 168, 0, 0.6);
}
@media only screen and (max-width: 768px) {
#slider2 {
float:none;
}


.col-rt-12{
display: flex;
    align-items: center;
    justify-content: center;
}
}
@media only screen and (max-width: 480px) {
.csslider2 > ul {

  width: 100%;
  height:450px;
}
#slider2{
  margin: 0px;

}
#slider{
 height:350px;
}

}
<!-- 水世界 -->







.csslider3 {
  -moz-perspective: 100%;
  -ms-perspective: 100%;
  -webkit-perspective: 100%;
  perspective: 100%;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.csslider3 > input {
  display: none;
}
.csslider3 > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.csslider3 > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.csslider3 > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.csslider3 > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.csslider3 > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.csslider3 > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.csslider3 > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider3 > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider3 > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider3 > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider3 > ul {
  position: relative;
  width: 100%;
  height: 830px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
 /* background-color: #3A3A3A;
  border: 10px solid #3A3A3A;*/
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider3 > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
.csslider3 > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider3 > .navigation {
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider3> .navigation > div {
  margin-left: -92%;
}
.csslider3 > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 4px;
  padding: 4px;
  background: transparent none repeat scroll 0 0;
}
.csslider3 > .navigation label:hover:after {
  opacity: 1;
}
.csslider2 > .navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6px;
  margin-top: -6px;
   background: transparent none repeat scroll 0 0;
  border-radius: 50%;
  padding: 6px;
  opacity: 0;
}
.csslider3 > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider3.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider3.inside .navigation label {
  border: 1px solid #7e7e7e;
}

.csslider3 > .arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider3 > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #3A3A3A;
  cursor: pointer;
  -moz-transition: box-shadow 0.15s, margin 0.15s;
  -o-transition: box-shadow 0.15s, margin 0.15s;
  -webkit-transition: box-shadow 0.15s, margin 0.15s;
  transition: box-shadow 0.15s, margin 0.15s;
}
.csslider3 > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #71ad37;
  margin: 0 0px;
}
.csslider3 > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider3.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider3 > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider3 > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider3 > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider3 > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider3 > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider3 > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider3 > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider3 > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider3 > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider3 > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider3 > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
  display: block;
  left: 0;
  right: auto;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider3.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider3 > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider3 > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider3 > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider3 > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider3 > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider3 > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider3 > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider3 > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider3 > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider3 > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider3 > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
  display: block;
  right: 0;
  left: auto;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
#slider3 {
  margin: 20px;
 
  float: left;
}


::-webkit-scrollbar {
  width: 2px;
  background: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(74, 168, 0, 0.6);
}

@media only screen and (max-width: 768px) {
#slider3 {
float:none;
}


.col-rt-12{
display: flex;
    align-items: center;
    justify-content: center;
}
}
@media only screen and (max-width: 480px) {
.csslider3 > ul {

  width: 100%;
  height:450px;
}
#slider3{
  margin: 0px;

}
#slider3{
 height:500px;
}

}
/* ------ 首頁服務區塊樣式 ------ */
.serviceArea {
	position: relative;
}
.serviceArea .item {
padding: 0px 40px;
}
.serviceArea .item a {
	text-decoration: none;
}
.service-item {
	padding: 20px 0px;
}

.service-item .service-icon {
	width: 120px;
	height: 120px;
	line-height: 200px;
	text-align: center;
	-webkit-border-radius: 50%;
	-webkit-background-clip: padding-box;
	-moz-border-radius: 50%;
	-moz-background-clip: padding;
	border-radius: 50%;
	background-clip: padding-box;
	margin: 0 auto;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}
.service-item .service-icon img {
	display: block;
	vertical-align: middle;
}
.service-item h3.service-title {
	text-transform: uppercase;
	font-size: 16px;
	color: #5fb8ab;
	font-weight: 600;
	margin-top: 25px;
}
.service-item:hover .service-icon {
	cursor: pointer;
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-o-transform: rotateY(360deg);
	-ms-transform: rotateY(360deg);
	transform: rotateY(360deg);
}
.serviceArea .item .h3_title {
	text-align: center;
	color: #FFF;
	font-size: 1.3em;
	padding: 10px 0px;
}

.serviceArea .item .p {
	text-align: center!important;
	color: #FFF;
	font-size: 1.0em;
	padding: 10px 0px;
}
@media only screen and (max-width: 640px) {
.serviceArea .col-1-3 {
	display: block;
	float: none;
	width: 100%;
}
}
/* 四季花園 */
.serviceBlock {
	width: 100%;
	margin: 70px auto;
}
.serviceBlock table {
	width: 100%;
}
.serviceBlock table td {
	width: 25%;
}
.serviceBlock table td > h2 {
	padding: 0px 0px 10px 0px;
	line-height: 1;
	font-weight: normal;
	text-align: center;
}
.serviceBlock table td > h6 {
	padding: 0px 0px 10px 0px;
	line-height: 1;
	font-weight: normal;
	text-align: center;
}
.serviceBlock .client {
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	padding: 0px 0px 30px 0px;
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}
.serviceBlock .circle {
	position: relative;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	margin: 0px auto;
}
.serviceBlock .logo {
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	width: 312px;
	height: 312px;
	text-align: center;
	border: 8px solid #32585A;
	border-right-color: transparent;
	border-top-color: transparent;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	margin: 0px auto;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.25);
}
.serviceBlock .client .img {
	position: absolute;
	top: 8px;
	bottom: 0;
	left: 8px;
	right: 0;
	width: auto;
	height: auto;
}
.serviceBlock .img img {
	width: 100%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.serviceBlock .circle:hover .logo {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	cursor: default;
	background: transparent;
}
.serviceBlock .client .info {
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 50%;
	right: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin: -45px 0px 0px -135px;
	display:none
}
.serviceBlock .client .info > h3  {
	color: #FFF;
	font-size: 30px;
	padding: 15px 0px;
	margin: 0px 20px 10px 20px;
	text-align: center;
	border-bottom: 1px solid #EEE;
	cursor:pointer;
}
.serviceBlock .client .info > h3 a:link{
	color: #fff;

	cursor:pointer;
	
}
.serviceBlock .client .info > h3 a:visited {
	color: #fff;
	font-size: 30px;
	padding: 15px 0px;
	margin: 0px 20px 10px 20px;
	text-align: center;
	border-bottom: 1px solid #EEE;
	cursor:pointer;
	
}
.serviceBlock .client .info > h3 a:hover {
	color: #B7FEB5;
	font-size: 30px;
	padding: 15px 0px;
	margin: 0px 20px 10px 20px;
	text-align: center;
	/*border-bottom: 1px solid #EEE;*/
	cursor:pointer;
	
}
.serviceBlock .client .info > p {
	color: #FFF;
	font-size: 18px;
	padding: 0px;
	margin: 0px 20px 0px 20px;
	text-align: center;
	line-height: 28px;
	letter-spacing: 1px;
}
.serviceBlock p {
	text-align: center;
	letter-spacing: 1px;
}
.serviceBlock p.btn {
	margin: 20px 0px 50px 0px;
}
.serviceBlock p.btn a {
	/*box-shadow: 1px 2px 3px rgba(0,0,0,0.25);*/
	border-radius: 50px;
	border: 1px solid #F00;
	background: #FFF;
	color: #F00;
	padding: 5px 12px;
	text-shadow: none;
	-moz-transition: all 0.25s;
	transition: all 0.25s;
}
.serviceBlock p.btn a:hover {
	background: #999;
	color: #FFF;
	border: 1px solid #FFF;
}
.wrap2-col{
width: 50%;
float: left;
margin: 0px;
}



@media only screen and (max-width: 1024px) {
.wrap2-col{
width: 100%;
float: none;

}
}

@media only screen and (max-width: 768px) {
#info {height: 0px;width: 0px;top: 15%;left: 50%;position: absolute;line-height: 18px;}
#center {width: 320px;height: 320px;position: absolute;margin: 60px -165px;z-index: 102;padding: 5px}
}

@media (min-width: 768px) {


.serviceBlock .circle {

	width: 450px;
	height: 450px;
	
}
.serviceBlock .logo {
	
	width:442px;
	height: 442px;
	
}

}