@charset "utf-8";
/* ==========================================================================
RWD
========================================================================== */

/*-------------------  for 筆電  -------------------*/
@media screen and (max-width: 1366px) and (max-height: 800px) {
	.wrap {
		min-width: 100%;
	}
	section {
		background-size: cover;
	}
	#page_1, #page_3, #page_4,
	#page_1 .bg_cover,
	#page_3 .bg_cover,
	#page_4 .bg_cover,
	.swiper_2 .swiper-slide {
		height: 688px;
	}
	#page_1 {
		background-position: center top;
	}
	#page_2,
	#page_2_in {
		background-size: 115%;
	}
	#page_2,
	#page_2 .bg_cover {
		height: 755px;
	}
	.coverDown_L,
	.coverDown_R {
		bottom: -10%;
		z-index: 2;
	}
	.coverDown_L {
		border-width: 280px 0 0 280px;
	}
	.coverDown_R {
		border-width: 0 0 280px 280px;
	}
	.role_1 {
		top: 320px;
		left: 50%;
		margin-left: -256px;
		width: 690px;
	}
	.role_1-2 {
		top: 100px;
		left: 50%;
		margin-left: -182px;
		width: 665px;
	}
	.banner,
	.app {
		bottom: 15px;
		z-index: 10;
	}
	.banner {
		left: 20px;
		width: 350px;
		height: 96px;
	}
	.swiper_1,
	.swiper_1 a {
		width: 230px;
		height: 55px;
	}
	.swiper_1 {
		margin: 23px 0 0 95px;
	}
	.swiper_1 a p:nth-child(1) {
		margin-bottom: 1px;
		font-size: 28px;
	}
	.swiper_1 a p:nth-child(2) {
		font-size: 18px;
	}
	.app {
		right: 20px;
	}
	.slogan {
		top: 150px;
		left: 25px;
		width: 370px;
	}
	.scrollDown {
		left: 55.7%;
		bottom: 50px;
	}
	.tabs:before {
		height: 390px;
	}
	.list {
		height: 355px;
	}
	.list li {
		padding: 6px 0;
	}
	.role_2 {
		top: 110px;
		left: 50%;
		margin-left: -780px;
		width: 450px;
	}
	.content {
		width: 100%;
	}
	.role_3 {
		left: 50%;
		margin-left: -515px;
		width: 1030px;
	}
	.role_3-2 {
		left: 50%;
		margin-left: -515px;
		width: 1030px;
	}
	.role_3-3 {
		left: 50%;
		margin-left: -495px;
		width: 980px;
	}
	#page_2 .title_2 {
		margin: 135px auto 10px;
		height: 60px;
	}
	.title_3_1,
	.title_3_2-1,
	.title_3_2-2,
	.title_3_3-1,
	.title_3_3-2,
	.title_4 {
		left: 0;
		right: 0;
		margin: auto;
		height: 110px;
	}
	.title_3_1 {
		top: 128px;
	}
	.title_3_2-1 {
		top: 132px;
		padding-left: 235px;
	}
	.title_3_2-2 {
		top: 340px;
		padding-right: 330px;
		height: 100px;
	}
	.title_3_3-1 {
		top: 130px;
		padding-right: 370px;
		height: 145px;
	}
	.title_3_3-2 {
		top: 410px;
		padding-left: 210px;
		height: 68px;
	}
	.title_4 {
		top: 130px;
		height: 100px;
	}
	.text_1 {
		top: 345px;
		left: 50%;
		margin-left: -520px;
		width: 190px;
		height: 180px;
	}
	.text_2 {
		top: 465px;
		left: 50%;
		margin-left: -300px;
		width: 205px;
		height: 210px;
	}
	.text_3 {
		top: 420px;
		left: 50%;
		margin-left: 370px;
		width: 140px;
		height: 180px;
	}
	.text_1 img {
		top: -55px;
		right: -120px;
		width: 90%;
	}
	.text_2 img {
		right: -135px;
		width: 88%;
	}
	.text_3 img {
		top: -120px;
		left: -120px;
		width: 120%;
	}
	.swiper_2 .swiper-slide {
		background-size: cover;
	}
	.swiper-pagination_2 {
		bottom: 13px;
	}
	.swiper_prev_2,
	.swiper_next_2,
	.swiper_prev_3,
	.swiper_next_3 {
		top: 50%;
		margin-top: -35px;
		width: 70px;
		height: 70px;
	}
	.phoneMask_bg {
		top: 235px;
		width: 235px;
		height: 345px;
	}
	.swiperBox {
		top: 240px;
		width: 820px;
	}
	.swiper_3 .swiper-slide {
		width: 228px;
		height: 342px;
	}
	.phoneMask {
		margin: 175px auto 0;
		width: 255px;
	}
	.swiper_3 .info p:nth-child(1) {
		font-size: 24px;
	}
	.swiper_3 .info i {
		font-size: 19px;
	}
	.swiper-pagination_3 {
		margin: 73px auto 0;
	}
}
/*------------------- for 筆電:end -------------------*/

@media screen and (max-width: 1366px) and (max-height: 800px) {
	.banner,
	.app {
		position: fixed;
		bottom: 15px;
		z-index: 10;
	}
	.banner {
		left: 20px;
	}
	.slogan {
		top: 150px;
		left: 25px;
	}
	.app {
		right: 20px;
	}
}

@media screen and (max-width: 850px) {
	.bg_cover,.role_1,.role_1-2,.logo_L,.slogan,.slogan_2,
	.icon,.app,.coverBox,#page_3 .content,.swiper-button-prev,
	.swiper-button-next,.phoneMask,.phoneMask_bg,.title_4 {
		display: none;
	}
	.title_4m,.icon_m {
		display: block;
	}
	.wrap {
		min-width: 100%;
	}
	.content,
	.news,
	.news_in {
		width: 100%;
	}
	#page_2 .content,
	#page_2_in .content {
		width: 92%;
	}
	section,
	.swiper-slide {
		width: 100%;
		height: auto;
		background-size: 100% auto;
	}
	#page_1 { background-image: url(/gf/images/gf-bg_1-2m.jpg); background-position: top center; }
	#page_2 { background-image: url(/gf/images/gf-bg_2m.jpg); }
	#page_4 { background-image: none; }
	.swiper_2 .swiper-slide:nth-child(1) { background-image: url(/gf/images/gf-bg_3m.jpg); }
	.swiper_2 .swiper-slide:nth-child(2) { background-image: url(/gf/images/gf-bg_3-2m.jpg); }
	.swiper_2 .swiper-slide:nth-child(3) { background-image: url(/gf/images/gf-bg_3-3m.jpg); }

	.banner {
		bottom: 50px;
		left: 0px;
		right: 0;
		margin: auto;
   }
   .app {
		right: 0;
		left: 0;
		bottom: 65px;
		margin: auto;
		width: 100%;
		text-align: center;
   }
   .app li {
		display: inline-block;
		margin-bottom: 0;
	}
	.scrollDown {
		bottom: 45px;
		left: 0;
		right: 0;
		margin: auto;
		width: 35px;
	}
	.tab,
	.news_inBox {
		width: 92%;
	}
	.news_in .detail {
		min-height: 359px;
	}
	.swiper-pagination_2 {
		bottom: 30px;
	}
	.title_4m {
		top: auto;
		bottom: 170px;
		width: 70%;
	}
	.swiperBox {
		top: 0;
		width: 100%;
	}
	.swiper_3 .swiper-slide {
		width: 100%;
		height: auto;
	}
	.swiper_3 .info,
	.swiper_3 .swiper-slide,
	.swiper_3 .swiper-slide.swiper-slide-prev,
	.swiper_3 .swiper-slide.swiper-slide-next {
		opacity: 1;
	}
	.swiper-pagination_3 {
		bottom: 40px;
		margin: 0 auto;
	}
	.swiper_3 .swiper-pagination-bullet {
		background: #999;
		opacity: 1;
	}
	.swiper_3 .swiper-pagination-bullet-active {
		background: #fff;
	}
	.swiper_3 .info li {
		padding: 5px 10px 70px;
	}
	.swiper_3 .info:before {
		z-index: 1;
	}
	.swiper_3 .info p:nth-child(2) {
		text-align: center;
	}
	.icon_m .icon_2 {
		float: none;
		margin-top: 0;
		padding-top: 20px;
		background: #725eaa;
		text-align: center;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	footer .logo_cr {
		background-image: url(/gf/images/gf-logo_cr_w@2x.png);
	}
}

@media screen and (max-width: 600px) {
	#page_1,
	.swiper_2 .swiper-slide:nth-child(1),
	.swiper_2 .swiper-slide:nth-child(2),
	.swiper_2 .swiper-slide:nth-child(3) {
		background-size: auto 100%;
	}
	#page_2 {
		background-size: 130% auto;
	}
	#page_2 .title_2 {
		width: 35%;
	}
	.app li {
		width: 31%;
   }
	.app a,
	.app a img {
		width: 100%;
   }
}

@media screen and (max-width: 480px) {
	#page_1 {
		background-image: url(/gf/images/gf-bg_1-3m.jpg);
	}
	.banner {
		bottom: 40px;
		width: 80%;
	}
	.swiper_1 {
		margin: 6.5% 0 0 25%;
	}
	.swiper_1 a p:nth-child(1) {
		margin-bottom: 0;
		font-size: 24px;
		line-height: 32px;
	   font-weight: 600;
	}
	.swiper_1 a p:nth-child(2) {
		font-size: 16px;
		line-height: 100%;
	}
	.app {
		bottom: 45px;
	}
	.scrollDown {
		bottom: 35px;
		width: 30px;
	}
	.scrollDown span:after {
		width: 25px;
		height: 25px;
		border-width: 6px 6px 0 0;
	}
	#page_2 .content,
	#page_2_in .content {
		width: 95%;
	}
	#page_2_in .content {
		padding: 120px 0 15px;
	}
	#page_2 .title_2 {
		margin: 81px 0 10px 96px;
		width: 36%;
		height: auto;
	}
	#page_2_in .title_2 {
		margin: 0 auto 10px;
		width: 38%;
	}
	.tabNav {
		-webkit-border-radius: 10px 10px 0 0;
		-moz-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
	}
	.tabNav li {
		height: 40px;
		font-size: 17px;
		line-height: 39px;
		border-bottom-width: 4px;
	}
	.tabs:before {
		height: 540px;
		-webkit-border-radius: 0 0 10px 10px;
		-moz-border-radius: 0 0 10px 10px;
		border-radius: 0 0 10px 10px;
	}
	.tab {
		padding: 10px 0 0;
	}
	.list {
		margin-bottom: 18px;
		height: auto;
	}
	.list li {
		padding: 5.5px 0;
		font-size: 14px;
	}
	.list span {
		width: 45px;
	}
	.list a {
		padding: 0 40px 0 55px;
	}
	.news_in:before {
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}
	.news_inBox {
		padding: 20px 0;
		width: 94%;
		min-height: auto;
	}
	.news_title {
		padding-bottom: 12px;
	}
	.news_title span {
		width: 55px;
		height: 24px;
		font-size: 17px;
		line-height: 22px;
	}
	.news_title li {
		padding-left: 63px;
		font-size: 17px;
		line-height: 24px;
	}
	.news_inBox tt {
		padding: 3px 0;
	}
	.fb_share {
		margin-bottom: 10px;
	}
	.news_in .detail {
		padding: 10px;
	}
	.news_in .detail,
	.news_in .detail p,
	.news_in .detail span {
		font-size: 14px !important;
		line-height: 21px !important;
	}
	.pageNav_2 {
		padding-top: 15px;
	}
	.swiper-pagination_2 {
		bottom: 10px;
	}
	.swiper-pagination_3 {
		bottom: 30px;
	}
	.swiper-pagination-bullet {
		width: 12px;
   	height: 12px;
   	border-radius: 6px;
	}
	.swiper-pagination-bullet-active {
		width: 30px;
	}
	.title_4m {
		bottom: 150px;
		width: 80%;
	}
	.swiper_3 .info li {
		padding: 2px 10px 35px;
	}
	.swiper_3 .info p:nth-child(1) {
		margin-bottom: 2px;
		font-size: 27px;
	}
	.swiper_3 .info i {
		font-size: 21px;
	}
	.icon_m .icon_2 {
		padding-top: 15px;
		height: auto;
	}
	.icon_2 a,
	.icon_2 img {
		width: 30px;
	}
}

@media screen and (max-width: 375px) {
	.banner {
		width: 82%;
	}
	.swiper_1 {
		margin: 6% 0 0 25%;
	}
	.app {
	   bottom: 37px;
	}
}

@media screen and (max-width: 360px) {
	.swiper_1 a p:nth-child(1) {
		font-size: 24px;
	}
	#page_2 .title_2 {
		margin: 68px 0 10px 96px;
	}
	.tab {
		width: 95%;
	}
	.list tt {
		display: none;
	}
	.list a {
		padding: 0 0 0 55px;
	}
	.nav_download .fa-chevron-left {
		line-height: 60px;
	}
}

@media screen and (max-width: 320px) {
	.swiper_1 a p:nth-child(1) {
		font-size: 21px;
		line-height: 28px;
	}
	.swiper_1 a p:nth-child(2) {
		font-size: 14px;
	}
	#page_2 .title_2 {
		margin: 70px 0 10px 82px;
	}
	.tab {
		padding: 5px 0 0;
	}
	.list {
		margin-bottom: 10px;
   }
	.list li {
		padding: 3px 0;
		font-size: 13px;
	}
	.pageNav a,
	.pageNav span {
		width: 20px;
		height: 20px;
		font-size: 13px;
		line-height: 19px;
	}
}

@media screen and (max-width: 320px) and (max-height: 480px) {
	#page_1 {
		background-size: 100% auto;
	}
	.banner {
		bottom: 25px;
	}
	.scrollDown {
		bottom: 20px;
		width: 15px;
	}
	.scrollDown span:after {
		width: 15px;
		height: 15px;
		border-width: 4px 4px 0 0;
	}
	.tabNav li {
		height: 32px;
		font-size: 15px;
		line-height: 27px;
		border-bottom-width: 3px;
	}
	.list li {
		padding: 1px 0;
	}
	.list span, .list a, .list tt {
		height: 20px;
		line-height: 19px;
	}
	.swiper_3 .info p:nth-child(1) {
		font-size: 21px;
	}
	.swiper_3 .info li {
		padding: 2px 10px 28px;
   }
	.swiper_3 .info i {
		font-size: 18px;
		font-weight: 400;
	}
	.swiper_3 .info p:nth-child(2) {
		font-size: 14px;
		line-height: 18px;
	}
	.swiper-pagination_3 {
		bottom: 26px;
	}
	.icon_m .icon_2 {
		padding-top: 10px;
   }
   .icon_2 a,
   .icon_2 img {
		width: 25px;
	}
	.icon_m .icon_2 {
		height: 25px;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
	.wrap {
		min-width: 100%;
	}
	.swiperBox {
		width: 100%;
	}
}

@media screen and (max-width: 860px) and (orientation: landscape) {
	section,
	.swiper-slide {
		background-size: 115% auto;
	}
}