/*
 * iweb RWD 5.0 - 旅行類 style02
 * http://demo.apseo.com.tw/iweb51/03/
 *
 * Copyright 2015, Evelyn Wang
 * April 2015
 */ 
 
/* pro-wrap */
#pro-wrap { overflow: hidden; margin: -150px auto 0; width: 100%; }
#pro-wrap section { overflow: hidden; margin: 0 auto; width: 100%; }
#pro-wrap section ul li { float: left; width: 25%; }
#pro-wrap section ul li h2 { overflow: hidden; margin: 0 10px; padding: 10px; background: #CC0000; text-align: center; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
#pro-wrap section ul li h2 a { color: #fff; }
#pro-wrap section .view { overflow: hidden; margin: 0 10px; height: 300px; }
#pro-wrap section .view a.info p { line-height: 180%; text-align: center; color: #fff; }
#pro-wrap section .view a.info span { margin: 15px 0 0; padding: 6px 15px; border: 1px #ccc solid; display: inline-block; }
#pro-wrap section .view .third-effect:hover a.info p { text-align: center; }

/* view */
.view { overflow: hidden; position: relative; text-align: center; cursor: default; }
.view .mask , .view .content { overflow: hidden; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.view img { position: relative; width: 100%; height: 100%; display: block; object-fit: cover; }
.view a.info { padding: 30px; height: calc(100% - 60px); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; }
.view a.info h2 { width: 100%; display: block; text-align: center; }
.third-effect .mask { overflow: visible; background: #000; box-sizing: border-box; transition: all 0.4s ease-in-out 0s; opacity: 0; }
.third-effect a.info { position: relative; opacity: 0; transition: opacity 0.5s ease-in-out 0s; }
.third-effect:hover .mask { background: #000; opacity: .7; }
.third-effect:hover a.info { transition-delay: .3s; opacity: 1; }

/* about-wrap */
#about-wrap { overflow: hidden; position: relative; margin: 40px 0 0; }
#about-wrap section { position: relative; width: 100%; z-index: 20; }
#about-wrap section h2 { margin: 0 auto 30px; width: 960px; text-align: center; }
#about-wrap section p { margin: 0 auto; width: 960px; text-align: center; line-height: 180%; font-size: 16px; }
#about-wrap section p a.more { margin: 15px 0 40px; padding: 6px 10px; background: #AA0000; display: inline-block; font-size: 12px; color: #fff; }
#about-wrap .about-bg { position: absolute; width: 100%; height: 400px; background-position: 75% bottom !important; bottom: 0; text-indent: -999999px; }

/* function-item */
.wrapper .function-item { overflow: hidden; background: url(/images/03/index/BBG.jpg) no-repeat 75% bottom !important; }
.wrapper .function-item section { overflow: hidden; margin: 0 auto; padding: 45px 0; width: 960px; }

/* latest-news */
#latest-news { float: left; width: 66.67%; }
#latest-news h2 { margin-bottom: 20px; padding: 5px; border-bottom: 1px #FFFFFF solid; font-size: 13px; color: #FFFFFF; }
#latest-news h2 strong { font-size: 20px; color: #fff; font-weight: normal; }
#latest-news .newsWrap { margin-left: 5px; height: 140px !important; overflow: hidden; position: relative; }
#latest-news .newsWrap ul { height: 140px !important; }
#latest-news .newsWrap ul li { padding: 20px 10px; border-bottom: 1px #ffffff solid; }
#latest-news .newsWrap ul li h3 { font-size: 15px; }
#latest-news .newsWrap ul li h3 a { color: #fff; }
#latest-news .newsWrap ul li p { margin: 5px 0 0; line-height: 180%; font-size: 13px; color: #ffffff; }
#latest-news .newsWrap ul li p.more { text-align: right; }
#latest-news .newsWrap ul li p.more a { color: #ffffff; }

/* g-map */
#g-map { float: right; width: 33.33%; }
#g-map iframe { margin-left: 35px; width: auto !important; height: 198px; }

/* ad-wrap */
#ad-wrap { overflow: hidden; background: url(/images/03/index/SBG.jpg) no-repeat 75% bottom !important; }
#ad-wrap section { margin: 0 auto; padding: 40px 0; width: 960px; }
#ad-wrap section #ad-list { margin-left: 10px; height: 100px !important; overflow: hidden; position: relative; }
#ad-wrap section #ad-list ul { height: 100px !important; }
#ad-wrap section #ad-list ul li { width: 25%; height: 100px !important; float: left; }
#ad-wrap section #ad-list ul li p { margin-right: 10px; }
#ad-wrap section #ad-list ul li p img { width: 100%; }

@media only screen and (min-width : 320px) {
	#pro-wrap { margin: 20px 0 0 0; }
	#pro-wrap section ul li { margin: 0 0 20px; width: 100%; }
	.third-effect .mask , .third-effect:hover .mask { background: none; }
	.third-effect .mask a p , .third-effect .mask a span { display: none !important; }
	#about-wrap section h2 { margin: 0 15px 45px; width: auto; }
	#about-wrap section p { margin: 0 15px; width: auto; font-size: 14px; }
	#about-wrap .about-bg { height: 200px; background: none !important; text-align: right; text-indent: 0; }
	#about-wrap .about-bg img { height: 200px; }
	.function-item section { margin: 0 15px; width: auto; }
	#latest-news { margin: 0 0 40px; width: 100%; float: none; }
	#latest-news .newsWrap , #latest-news .newsWrap ul { height: 206px !important; }
	#g-map { width: 100%; float: none; }
	#g-map iframe { margin: 0; width: 100% !important; }
	#ad-wrap section { width: 280px; overflow: hidden; }
	#ad-wrap section #ad-list { margin: 0; height: 104px !important; }
	#ad-wrap section #ad-list ul { height: 104px !important; }
	#ad-wrap section #ad-list ul li { width: 100%; height: 105px !important; }
	#ad-wrap section #ad-list ul li p { margin: 0 5px; }
}
@media only screen and (min-width : 480px) {
	#pro-wrap section .view { height: auto; }
	#latest-news .newsWrap , #latest-news .newsWrap ul { height: 156px !important; }
}
@media only screen and (min-width : 640px) {
	#pro-wrap section ul li { width: 50%; }
	#pro-wrap section .view { height: 25vw; }
	#g-map iframe { height: 300px; }
	#ad-wrap section { width: 560px; }
	#ad-wrap section #ad-list ul li , #pro-wrap section ul li { width: 50%; }
}
@media only screen and (min-width : 768px) {
	#pro-wrap { margin: 50px auto 0; }
	#pro-wrap section ul li { width: 50%; }
	#about-wrap section p { font-size: 16px; }
	#about-wrap .about-bg , #about-wrap .about-bg img { height: 250px; }
	#pro-wrap section ul { overflow: hidden; margin: 0 auto; width: 90%; }
}
@media only screen and (min-width : 769px) {
	#pro-wrap section ul { width: 720px; }
	#pro-wrap section .view { height: 200px; }
}
@media only screen and (min-width : 1024px) {
	.function-item section , #ad-wrap section { margin: 0 auto; width: 960px; }
	.third-effect .mask , .third-effect:hover .mask { background: #000; }
	.third-effect .mask a p ,  .third-effect .mask a span { display: inline-block !important; }
	#latest-news { margin: 0; width: 66.67%; float: left; }
	#latest-news .newsWrap { height: 140px !important; }
	#g-map { width: 33.33%; float: right; }
	#g-map iframe { margin-left: 35px; width: auto !important; height: 198px; }
	#ad-wrap section #ad-list { margin-left: 10px; height: 100px !important; }
	#ad-wrap section #ad-list ul { height: 100px !important; }
	#ad-wrap section #ad-list ul li { width: 25%; height: 100px !important; }
}
@media only screen and (min-width : 1280px) {
	#about-wrap section h2 { margin: 0 auto 30px; width: 1200px; }
	#about-wrap section p { margin: 0 auto; width: 1200px; font-size: 16px; }
	#about-wrap .about-bg { height: 400px; text-indent: -999999px; }
	#about-wrap .about-bg img { display: none; }
	.function-item section , #ad-wrap section { width: 1200px; }
}