@import 'https://fonts.googleapis.com/css?family=Pinyon+Script';

/*---------- section01 ----------*/
	nav{
		background: linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0));
		padding-bottom: 50px;
	}
	#menu li a {
		color:white;
	}
	#hambergur>span{
		background:white;
	}
	/*---------- top slider ----------*/
	#top_slider .owl-stage-outer{
		width: 100%;
		height: 100vh;
	}

	#top_slider .owl-controls .owl-nav div{ /*SLIDER prev、next樣式*/
		width: 39px;
		height: 39px;
		border-radius: 10px;
		position: absolute;
		top: 49.3%;
	}
	#top_slider .owl-controls{
		text-align: center;
	}
	#top_slider .owl-prev{
		background:url('./../img/prev_w.png');
		left: 6.65%;
	}
	#top_slider .owl-next{
		background:url('./../img/next_w.png');
		right: 6.65%;
	}

	#top_slider .item{ /*首頁視覺圖背景*/
		display: block;
		height:100vh;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	#top_slider .owl-dots{ /*巡覽列*/
		position: relative;
		margin:-5vh auto 0;
		z-index: 3;
		/*background:#aaa;*/
	}
	#top_slider .owl-controls .owl-dot{
		display: inline-block;
		margin:0 .8vw;
	}
	#top_slider .owl-controls .owl-dot span{
		display: inline-block;
		width: 4em;
		height: 4px;
		background:white;
	}
	#top_slider .owl-controls .owl-dot.active span,
	#top_slider .owl-controls.clickable .owl-dot:hover span{
		background:#E88400;
	}
	.slider_container{ /*slider文字*/
		width: 60%;
		position: absolute;
		bottom: 14vh;
		right: 19%;
		padding-right: 5%;
		animation: fadefromdown .7s forwards;
		-webkit-backface-visibility: hidden; /*避免文字閃爍*/
	}
	.slider_container:after{
		content: "";
		display: inline-block;
		width: 4%;
		height: 92%;
		border: 3px solid white;
		position: absolute;
		top: 7px;
		right: 0;
	}
	.slider_title,
	.slider_author{
		font-family: 'Pinyon Script', cursive;
		color:white;
		font-weight: 400;
		font-size: 3em;
		line-height: 1.3em;
		text-shadow: 0 0 20px rgba(0,0,0,.8);
		/*text-transform: uppercase;*/
		letter-spacing: 1px;
		text-align: right;
		padding-top: 2.5vh;
	}
	.slider_title{
		font-size: 4em;
		letter-spacing: -1px;
		border-bottom: 2px solid white;
		padding:0 0 5.5vh;
	}
/*---------- END section01 ----------*/

/*---------- section02 ----------*/
	.sec02 .container{
		width: 62.5%;
		max-width: 1200px;
		height: 535px;
		position: relative;
		margin:20vh auto;
		/*background: #aaa;*/
	}
	.sec02 .container .column{
		width: 20%;
		min-width:200px;
		height: 100%;
		margin-right:3.25%;
		display: inline-block;
		vertical-align: top;
		position: relative;
	}
	.sec02 .container .column:last-child{
		width: 28%;
		margin-top:.5em;
		position: absolute;
		right: 0;
		margin-right: 0;
	}

	.sec02 .container .column:last-child img{
		width: 100%;
	}

	.sec02 .btn{
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 3;
	}

	.sec02 .frame{
		position: absolute;
		left: 0;
		bottom: 0;
	}
/*---------- END section02 ----------*/

/*---------- section03 ----------*/
	.sec03{
		background: url("./../img/index/bg_notes.jpg") no-repeat;
		background-size: cover;
		background-position: right bottom;
		height: auto;
		padding-bottom: 30px;
		box-sizing: border-box;
		/*background: #eee;*/
	}
	.sec03 .space{
		display: block;
		width: 100%;
		height: 7vh;
		background:white;
	}
	.sec03 .container{
		width: 62.5vw;
		position: relative;
		margin: -7vh auto 0;
		/*background: #ccc;*/
	}

	.vwrap{
		position: relative;
		display: block;
		width:100%;
		height:0;
		padding-bottom: 56.25%;
	}
	.vpreview{
		position: absolute;
		top:0;bottom: 0;left:0;right: 0;
		width:100%;
		height:100%;
		cursor: pointer;
	}
	.vpreview:after{
		content: "";
		display: block;
		position: absolute;
		top:0;bottom: 0;left:0;right: 0;
		width:100%;
		height:100%;
		background: rgba(0,0,0,.5);
		pointer-events: none;
	}
	.playbtn{
		width: 77px;
		height: 77px;
		position: absolute;
		background:url("./../img/play.png");
		top:0;bottom: 0;left:0;right: 0;
		margin: auto;
		z-index: 3;
		pointer-events: none;
	}
	#video{
		position: absolute;
		top:0;bottom: 0;left:0;right: 0;
		width:100%;
		height:100%;
	}

	.sec03 .container02{
		position: relative;
		width: 100%;
	}

	.sec03 h2, .sec03 h3, .sec03 p{
		margin-top:40px;
		display: inline-block;
		vertical-align: top;
		margin-right:1.5%;
	}

	.sec03 h3{
		margin-top: 30px;
		width: 25.5%;
		letter-spacing: 1px;
	}

	.sec03 p{
		margin-top: 38px;
		width: 43%;
		columns: 2 12em;
		column-gap: 2.5em;
	}

	.sec03 .btn{
		display: inline-block;
		vertical-align: bottom;
		position: absolute;
		bottom: 5px;
		right:0;
	}
/*---------- END section03 ----------*/

/*---------- section04+05 ----------*/
	.sec04 .container,
	.sec05 .container{
		width: 62.5%;
		position: relative;
		margin:0 auto;
		/*background: #eee;*/
	}

	.sec04 .row,
	.sec05 .row{
		display: block;
		margin-top:4vh;
	}
	.sec04 .row:first-child,
	.sec05 .row:first-child{
		border-bottom:2px solid #3B3B3B;
	}
	.sec04 .column,
	.sec05 .column{
		display: inline-block;
		position: relative;
		width: 48%;
		margin-right:3.5%;
		margin-bottom: 2%;
		/*background: #ddd;*/
	}
	.sec04 .column:nth-child(2n),
	.sec05 .column:nth-child(1){
		margin-right: 0;
	}

	.sec04 h2,
	.sec04 h3,
	.line h2,
	.line p{
		margin-top: 0;
		margin-bottom: 0;
		display: inline-block;
		vertical-align: top;
	}

	.line{
		margin:14px 0;
	}
	.line p{
		font-size: 1em;
		line-height: 1.2em;
		text-align: right;
		position: absolute;
		right: 0;
	}

	.pic{
		position: relative;
		display: block;
		width: 100%;
		max-width: 570px;
		height: 0;
		padding-bottom: 45%;
		overflow: hidden;
	}
	.pic:hover:after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #E88400;
		animation: fadeIn .5s forwards;
	}
	.column:nth-child(2n-1) .pic:hover:after{
		background: #0095DB;
	}
	.row:nth-child(2n) .pic:hover:after{
		background: #0095DB;
	}
	.pic img{
		position: absolute;
		top: 0;right: 0;bottom: 0;left: 0;
		width: 100%;
	}

	.sec04 .btn,
	.sec05 .btn{
		position: absolute;
		bottom: 0;
		right: 0;
	}
/*---------- section04+05 END----------*/
/*---------- section04 ----------*/
	.sec04 .container{
		margin:10vh auto;
	}
	.sec04 h2{
		margin-right: 15px;
	}
	.sec04 h3{
		margin-top:-0.3em;
	}
	.sec04 .cl_title{
		height: 34%;
		margin-right:0;
		position: absolute;
		right: 0;
	}
/*---------- END section04 ----------

/*---------- section05 ----------*/
	.sec05{
		padding-bottom: 100px;
	}
	.sec05 .row:first-child{
		padding-bottom: 5%;
	}
	.sec05 .tag{
		width: 41%;
		min-width: 235px;
		height: 12%;
		min-height: 33px;
		background: #E88400;
		display: block;
		z-index: 3;
		position: absolute;
		top: 0;
		right: 0;
		color: white;
		text-align: center;
	}

	.sec05 .cl_title{
		position: absolute;
		right: 0;
		height: 97%;
		padding-top: 4vh;
		box-sizing: border-box;
	}
	.sec05 .cl_title h3{
		width: 53%;
		display: inline-block;
		vertical-align: top;
	}
	.sec05 .cl_title p{
		width: 41%;
		display: inline-block;
		margin-left: 5%;
	}
	.sec05 .cl_title .frame{
		width: 80%;
		min-width: 376px;
		position: relative;
		margin-top:30px;
		margin-left:calc(20%);
	}
	.sec05 .cl_title .txt_orange{
		width: 100%;
		text-align: right;
		right: 0;
	}
/*		.sec05 .btn{
		margin-top:8%;
		margin-left: calc(100% - 138px);
	}*/
/*---------- END section05 ----------*/

/*---------- section06 ----------*/
	.sec06{
		background:#3B3B3B;
	}
	.sec06 > span{
		display: block;
		width: 100%;
		height: 180px;
		visibility: hidden;
	}
	.sec06 .container{
		width: 62.5%;
		position: relative;
		margin:0 auto;
		box-sizing: border-box;
		background: white;
	}

	.slider_txt{
		width: 29%;
		height: 100%;
		min-height: 400px;
		max-height: 552px;
		box-sizing: border-box;
		padding:30px;
		background: white;
		position: relative;
		display: inline-block;
		vertical-align: top;
		/*position: absolute;
		bottom: 10%;
		right: 0;
		*/
	}
	.sec06 .txt h3{
		margin-top: 0;
		margin-bottom: 0.5em;
		line-height: 1.5em;
	}
	.sec06 .txt p{
		height: 310px;
	}
	.mCSB_container_wrapper{
		margin-right: 0;
	}
	.sec06 .btn{
		margin:1em 0 0 103px;
	}

	.slider_06wrap{
		width: 70%;
		max-width: 950px;
		height: 0;
		padding-bottom: 46.6%;
		margin-bottom: 60px;
		display: inline-block;
		vertical-align: top;
	}
	#slider_06 img{
		width: 100%;
		height: 100%;
	}
	#slider_06 .owl-controls .owl-nav div{ /*SLIDER prev、next樣式*/
		width: 39px;
		height: 39px;
		border-radius: 10px;
		position: absolute;
		bottom: -50px;
	}
	#slider_06 .owl-controls{
		height: 0;
	}
	#slider_06 .owl-prev{
		background:url('./../img/prev.png');
		right: 55px;
	}
	#slider_06 .owl-next{
		background:url('./../img/next.png');
		right: 0;
	}
	/*.sec06 .control{
		width: 92px;
		height: 39px;
		position: absolute;
		left:calc( 70% - 92px);
		bottom:10px;
	}
	.sec06 .control .prev,
	.sec06 .control .next{
		display: inline-block;
		position: absolute;
		width: 39px;
		height: 39px;
		border-radius: 10px;
		z-index: 3;
		cursor: pointer;
	}
	.sec06 .control .prev{
		background:url('./../img/prev.png');
		left: 0;
	}
	.sec06 .control .next{
		background:url('./../img/next.png');
		right: 0;
	}*/
	.sec06 .slider_description{
		width: 50%;
		height: 20px;
	}
	.sec06 .slider_description p{
		position: absolute;
		font-size: 1em;
		color:#3B3B3B;
		display: none;
		margin: 0 20px;
	}
	.sec06 .slider_description p.active{
		display: block;
	}

/*---------- END section06 ----------*/

/*---------- section07 ----------*/
	.sec07{
		height: auto;
	}
	.sec07 .container{
		width: 62.5%;
		position: relative;
		margin:0 auto;
		box-sizing: border-box;
		padding-top: 7.2%;
		padding-bottom:120px;
		/*background: #eee;*/
	}
	.sec07 .left{
		height: 600px;
		width: 32%;
		display: inline-block;
		/*background: #ddd;*/
		vertical-align: top;
	}
	.sec07 .logo_map{
		margin-bottom:18%;
	}
	.sec07 h2{
		margin-top: 20px;
		margin-bottom: 5px;
	}
	.sec07 h3{
		letter-spacing: 0;
	}
	.sec07 table{
		margin-top: 15px;
		border-spacing: 0;
		border:none;
	}
	.sec07 td{
		min-width: 100px;
		line-height: 1.4em;
		padding:5px 0;
		padding-right: 3%;
		box-sizing: border-box;
		color:#3B3B3B;
		vertical-align: top;

	}
	.sec07 .wide{
		letter-spacing: 10.5px;
	}
	.sec07 .narrow{
		letter-spacing: 4px;
	}
	.sec07 a{
		color:#3B3B3B;
	}
	.sec07 h2 + a{
		display: block;
		width: 140px;
		padding:5px 0;
		color:#3B3B3B;
	}
	.sec07 a:hover{
		color:#0095DB;
	}

	.sec07 .right{
		display: inline-block;
		position: absolute;
		right: 0;
		width: 66%;
		max-width: 785px;
		height: 600px;
		margin-top:20px;
		/*overflow: hidden;*/
		/*background: #eee;*/
	}
	.map {
		width:100%;
		height:80%;
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
		box-shadow: 0 0 40px 0 rgba(0,0,0,.1);
	}
	.map .cover{
		width:100%;
		height:100%;
		position:absolute;
		background-position: top center;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 1;
	}
	.cover.active{
		z-index: 3;
	}
	.sec07 .right .selection{
		height: 18%;
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content:space-between;
		position: absolute;
		bottom: 0;
	}
	.select_wrap{
		position: absolute;
		width: 2000px;
	}
	.selection .ppreview{
		width: 8%;
		max-height: 113px;
		margin-right: 5px;
		background-color: #E88400;
		display: inline-block;
		overflow:hidden;
		cursor: pointer;
	}
	.selection .ppreview:last-child{
		margin-right: 0;
	}
	.selection .selec_left,
	.selection .selec_right{
		position: absolute;
		width: 30px;
		height: 113px;
		background: rgba(0,0,0,.5);
		color:white;
		line-height: 113px;
		text-align: center;
		cursor:pointer;
		opacity:.8;
		-webkit-transition: all .5s;
		   -moz-transition: all .5s;
		    -ms-transition: all .5s;
		     -o-transition: all .5s;
		        transition: all .5s;
	}
	.selection .selec_left{
		left: 0;
	}
	.selection .selec_right{
		right: 0;
	}
	.selection .selec_left:hover,
	.selection .selec_right:hover{
		opacity: 1;
	}
	.selection .ppreview img{
		/*width: 100%;*/
		height: 113px;

	}
	.selection .ppreview:hover img{
		opacity: .7;
	}
/*---------- END section07 ----------*/
/*---------- RWD ----------*/
	@media only screen and (max-width: 1580px) and (min-width: 1550px){
		.sec05 .cl_title h3,
		.sec05 .cl_title p{
			width: 100%;
			margin-left: 0;
		}
	}
	@media only screen and (max-width: 1550px){
		.sec02, .sec04, .sec05, .sec06{
			height: auto;
		}
		.sec02 .container,
		.sec03 .container,
		.sec04 .container,
		.sec05 .container,
		.sec06 .container,
		.sec07 .container{
			width: 85%;
			min-width:250px;
		}
		.sec05{
			padding-bottom:100px;
		}

		.sec02 .container{
			height: auto;
			margin:10vh auto;
		}
		.sec02 .container .column:last-child{
			width: 29%;
		}
		.sec02 .frame{
			bottom:auto;
		}

		.sec04 .column,
		.sec05 .column {
			margin-right: 3.5%;
		}
		.sec04 .column:nth-child(2n),
		.sec05 .column:nth-child(1),
		.sec04 .cl_title{
			margin-right: 0;
		}

		.sec05 .cl_title .frame{
			margin-top:50px;
		}

		.sec06 > span{
			height: 100px;
		}
		.sec06 .slider_06wrap{
			padding-bottom: 46.6%;
		}
		.slider_txt{
			min-height: 560px;
			max-height: 560px;
		}

		.sec07 .logo_map{
			margin-bottom:10%;
		}
	}

	@media only screen and (max-width: 1320px){
		.sec05 .cl_title h3,
		.sec05 .cl_title p{
			width: 100%;
			margin-left: 0;
		}
	}
	@media only screen and (max-width: 1200px){
		.slider_title{
			font-size: 3.5em;
		}
		.sec02 .container .column{
			width: 30%;
			min-width:200px;
			margin-top:2vh;
		}
		.sec02 .container .column:last-child{
			width: 33.5%;
			margin-top:1.5em;
		}

		.sec02 .container .title{
			width: 100%;
			min-width: 690px;
			height: auto;
		}
		.sec02 .btn{
			position: absolute;
			left:auto;
			right: 0;
			top: 0;
		}

		.sec03 h3,
		.sec03 p{
			width: 100%;
			margin-top:0;
		}
		.sec03 .btn{
			top: 40px;
		}

		.sec05 .cl_title .frame{
			margin-top:10px;
			margin-left:calc(100% - 376px);
		}
		
	}
	@media only screen and (max-width: 1000px){
		.sec04 .column,
		.sec05 .column{
			margin-right:3%;
		}
		.sec04 .column:nth-child(2n),
		.sec05 .column:nth-child(1),
		.sec04 .cl_title{
			margin-right: 0;
		}/*
		.sec04 .cl_title{
			height: 48%;
		}*/
		.sec05 .container{
			margin-bottom: 10%;
		}
		.sec05 .cl_title .frame{
			width: 100%;
			margin-top:14%;
			margin-left:0;
			min-width: 0;
		}
		.sec05 .cl_title .frame{
			height: auto;
		}
		.sec05 .btn{
			top: 4vh;
		}

		.slider_txt{
			width: 100%;
			padding:40px;
			min-height: 0;
			background: white;
			position: relative;
			margin-top:50px;
		}

		.sec06 .txt p{
			height: auto;
			overflow-y: visible;
		}
/*		.sec06 .btn{
			position: absolute;
			top: .5em;
			right: 30px;
		}
*/
		.sec06 .slider_06wrap{
			width: 100%;
			padding-bottom: 70%;
		}
		#slider_06 .owl-controls .owl-nav{ /*SLIDER prev、next樣式*/
			width: 88px;
			height: 39px;
			position: relative;
			margin:0 auto;
		}
		#slider_06 .owl-controls .owl-nav div{ /*SLIDER prev、next樣式*/
			bottom: -100px;
		}

		/*.sec06 .control{
			left: 0;
			right: 0;
			margin:0 auto;
			top:50%;
		}*/

		.sec07 .left{
			width: 40%;
		}
		.sec07 .right{
			width: 55%;
		}
	}

	@media only screen and (max-width: 768px){
		.sec{
			height: auto;
		}

		.sec01 .slider_title{
			font-size: 5vw;
		}
		.slider_author{
			font-size: 1.5vw;
		}

		.sec02 .container .column,
		.sec02 .container .column:last-child{
			width: 100%;
			height:auto;
			min-width:200px;
			margin:2vh auto 0;
		}
		.sec02 .container .column:last-child{
			position: relative;
			width: 50%;
			margin-left: 25%;
		}
		.sec02 .frame{
			position: relative;
			width:100%;
			height: auto;
			margin-top:2vh;
		}

		.sec03 .container{
			width: 90%;
		}
		.sec03 p{
			columns:1;
		}

		.sec04>h2,
		.sec04 .column,
		.sec05>h2,
		.sec05 .column{
			width: 100%;
		}
		.sec04 .row:first-child,
		.sec05 .row:first-child {
			border-bottom: none;
		}
		.sec04 .cl_title,
		.sec05 .cl_title{
			position: relative;
			padding-top: 0;
		}
		.sec04 .cl_title h2{
			margin-bottom: 1.5em;
		}
		.sec04 .btn{
			top:0;
		}
		.sec05 .btn{
			top: 0;
			right: 0;
		}
		.sec05 .cl_title .fwrap{
			margin-top: 20px;
			padding-bottom: 20%;
		}
		.sec05 .cl_title .fwrap .frame {
			max-width: 100%;
			position: relative;
		}

		.sec06 > span{
			height: 50px;
		}
		#slider_06 .owl-controls .owl-nav div{ /*SLIDER prev、next樣式*/
			bottom: -90px;
		}
/*		.sec06 .control{
			top:45%;
		}*/

		.sec07 .container{
			position: relative;
			margin:0 auto;
		}
		.sec07 .left{
			width: 100%;
			height: auto;
		}
		.sec07 .logo_map, .sec07 .contact{
			display:block;
			vertical-align: top;
		}
		.sec07 .logo_map{
			margin-right:6%;
		}
		.sec07 .right{
			display: block;
			position: relative;
			width: 100%;
			margin-top:50px;
		}
		#map{
			height: 110%;
		}
	}
	@media only screen and (max-width: 480px){
		.slider_container:after{
			display: none;
		}
		.sec01 .slider_title{
			font-size: 8vw;
		}
		.slider_author{
			font-size: 5vw;
		}

		.sec02 .container .column:last-child{
			width: 100%;
			margin: 20px auto;
		}
/*
		.sec06 .btn{
			position: relative;
			top: 0;
			right: 0;
			margin: 0;
			margin-right: 30px;
		}*/
		.slider_06wrap{
			padding-bottom: 90%;
		}
		.sec06 .slider_txt{
			margin-top:100px;
		}
	}
	@media only screen and (max-width: 370px){
		.line p{
			position: relative;
		}
	}
/*---------- END RWD ----------*/