@charset "utf-8"; /* CSS Document */
#all *,
#all *::after,
#all *::before {
    box-sizing: border-box;
}
html, body {height: auto;}
html {font-size: 62.5%;/*10px*/ overflow-x:hidden;}
body{ 
	color:#303132; 
	margin:0; 
	padding:0; 
	font-family:Arial, "微軟正黑體", "Microsoft JhengHei", DFKai-SB, sans-serif; 
	/*font-family:Arial, Helvetica, "Microsoft JhengHei", Sans-Serif; */
	font-size: 1.6rem; 
	line-height:1.5; 
	background-color:#F7F7FC;
	background-image: none;
/*	overflow-x:hidden; 開啟時 pc 解析度會有問題*/
}
/*font*/
h1,h2{ padding:0; margin:0; font-weight: 500; font-size: 3rem;}
h1 b {display: block; font-size: 56px; font-weight: bold; font-family: Oswald;}
strong{ font-weight:normal; color:#3A393D;}
img{ max-width:100%; display: block;}
hr{ border:0; height:0px; background:#333; overflow:hidden;}
.iframe-video iframe{ position:absolute; top:0; left:0; width:100%; height:100%;}
.iframe-video{ position:relative; padding-bottom:56.25%; padding-top:35px; height:0; overflow:hidden;}
a:hover{ background-color:rgba(255, 255, 255, 0.00);}
p {line-height: 1.7; font-weight: 300;}

#all .container {margin: 0 auto; max-width: 1200px;}

/*視覺圖*/
.deco, .graphicimg {
    position: relative;
}
.graphicimg span{
	width: 76%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: 0;
	padding-top: 120%;
}

/*主視覺*/
.area_index{ 
	width:100%; 
	position:relative;
	z-index: 2;
	background-color:#F7F7FC;
}
.area_index:after{ 
	content:''; 
	width:100%; 
	height:100%; 
	position:absolute; 
	background:inherit;
	background: url(images/bg_main_bg.png) no-repeat center/cover;
	z-index:-2; 
	left:0; 
	bottom:0; 
	mix-blend-mode: luminosity;
	/* transform-origin:right bottom; 
	transform:skewY(-8deg); */
}
.area_index .main{ height:100%; padding-top: 10%; max-width: 1400px; margin: 0 auto;}
.area_index .graphicimg {padding-top: 110%;}
.area_index .graphicimg span.graphicimg_01 {
	background: url(images/pic_phone.png) no-repeat top/100%;
	margin-left: -20%;
	top: 10%;
}
.area_index .graphicimg span.graphicimg_02 {
	background: url(images/pic_phone_newspaper.png) no-repeat top/100%;
	margin-left: 18%;
	z-index: -1;
	width: 68%;
}

.textArea{ 
	width:80%; 
	margin: 0 auto 32px;
}
.textArea .title {
	display: flex;
    flex-direction: column;
    align-items: center;
	margin-bottom: 24px;
}

.title h1{ font-size: 5rem; line-height:1.2; width: 290px;}
.title strong, .title span {display: block; width: 100%; text-align: center;}
.title strong{ font-size: 3rem; letter-spacing: 0.16em; text-indent: 0.16em; margin-bottom: 0.3rem;}
.title span{ font-size: 1.8rem; letter-spacing: 0.9em; text-indent: 0.7em; font-weight: 300;}
.textArea .subtitle {
	position: relative;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 1.2rem;
	margin-bottom: 20px;
}
.textArea .subtitle span {display: inline-block; background: #F7F7FC; padding: 0 8px;}
.textArea .subtitle:before {content:""; position: absolute; display: block; width: 100%; height: 0.5px; background: #C7C7CC; top: 50%; z-index: -1;}
.directLink {
	font-size: 0; 
	max-width: 400px;
	-ms-transform: scale(1.04);
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
	margin: 0 auto;
	display: flex; 
	align-items: center;
}
.directLink > div {display: inline-block; width: 50%; padding: 3px;}
.directLink .qrcodeios, .directLink .qrcodeandroid {display: none;}
.directLink img{ width:100%; border-radius:5px;}

.graphicimg {position: relative;}
.section {padding: 64px 3.2rem 0 3.2rem; position: relative;}
.section h1 {margin-bottom: 16px;}

/*part1*/
.part1 {z-index: 2;}
.part1 h1 {
	position: relative;
	padding-top: 25px;
}
.part1 h1:before {
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	background: #E60113; 
	width: 55px; 
	height: 3px; 
	border-radius: 50px; 
	box-shadow: 0px 20.4697px 26.7244px rgba(238, 81, 3, 0.23), 0px 8.55177px 11.1648px rgba(238, 81, 3, 0.165337), 0px 4.57218px 5.96924px rgba(238, 81, 3, 0.137105), 0px 2.56313px 3.34631px rgba(238, 81, 3, 0.115), 0px 1.36126px 1.7772px rgba(238, 81, 3, 0.0928953), 0px 0.56645px 0.739532px rgba(238, 81, 3, 0.0646635);
}


.feature_wrap {background: #E9EBEF; padding: 100px 2.4rem; margin-top: -8%;}
.feature {
	padding: 4.2rem 3.2rem 0;
	margin-bottom: 6rem;
	position: relative;
}
.feature:last-child {margin-bottom: 0;}
.feature:before {
	background: #F3F5F8;
	border-radius: 16px 16px 0px 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	display: block;
	top: 0;
	left: 0;
	z-index: 0;
}
.feature_3:before {height: 90%;}
.feature article {padding-left: 4.6rem; position: relative;}
.feature article b {display: block; position: absolute; left: 0; top:0; font-size: 2.4rem; height: 100%;}
.feature article b:before {
	position: absolute;
	content: "";
	display: block;
	bottom: 0;
	left: 50%;
    transform: translateX(-50%);
	background: #E60113; 
	width: 5px; 
	height: calc(100% - 40px); 
	background: #E60113;
	box-shadow: 0px 36px 47px rgba(238, 81, 3, 0.23), 0px 15.0399px 19.6355px rgba(238, 81, 3, 0.165337), 0px 8.04107px 10.4981px rgba(238, 81, 3, 0.137105), 0px 4.50776px 5.88513px rgba(238, 81, 3, 0.115), 0px 2.39404px 3.12555px rgba(238, 81, 3, 0.0928953), 0px 0.996212px 1.30061px rgba(238, 81, 3, 0.0646635);
}
.feature .deco {
	width: 130%;
    left: 50%;
    transform: translateX(-50%);
}
.feature_2 .deco:before {
	position: absolute;
    content: "";
    display: block;
    bottom: -50px;
    right: 7%;
    background: url(images/pic_advantage_newspaperdate.png) no-repeat top/100%;
    width: 27%;
    height: 0;
    padding-top: 50%;
    z-index: 2;
}
/*.feature_2 .deco:before {
	position: absolute;
    content: "";
    display: block;
    bottom: -100px;
    right: 0;
    background: url(images/pic_advantage_newspaperdate.png) no-repeat top/100%;
    width: 27%;
    height: 0;
    padding-top: 50%;
    z-index: 2;
}*/

/*part2*/
.part2 {background: #303132;}
.part2 h1, .part2 p { color: #fff;}
.part2 .graphicimg {padding-top: 127%; overflow: hidden;}
.part2 .graphicimg span.graphicimg_01 {  
	width: 120%;
    background: url(images/pic_phone_vip.png) no-repeat top/100%;
    left: 58%;
}
.part2 .graphicimg span.graphicimg_02 { 
	background: url(images/pic_phone_vip_2.png) no-repeat top/100%; 
	margin-left: -45px; 
	top: 50px; 
	z-index: -1;
}

.graphicCombine {
	text-indent: -9999px;
    padding-top: 96%;
    height: 0;
    width: 120%;
    position: relative;
    left: 50%;
    margin-left: -60%;
    margin-bottom: 90px;
    background: url(images/combine_small.png) center no-repeat/contain;
}


/*part3*/
.part3 .deco_01 {height: 0; padding-top: 130%; background: url(images/pic_adfree.png) no-repeat top/100%;}
.part3 .graphicimg {
	margin-top: -60%;
	padding-top: 127%;
	width: calc(100% + 6.4rem);
    margin-left: -3.2rem;
}
.part3 .graphicimg span.graphicimg_01 { 
	background: url(images/pic_mobile_innerpage.png) no-repeat top/100%; 
	width: 150%;
    left: 64%;
	padding-top: 111%;
}

/*part4*/
.part4 {background: #fff;}
.part4 .deco_01 {
	height: 0;
    padding-top: 80%;
    background: url(images/pic_tabbar.png) no-repeat top/100%;
	width: 156%;
    left: 50%;
    transform: translateX(-50%);
	margin-top: 40px;
}
.part4 .graphicimg {
	margin-top: -45%;
	padding-top: 136%;
	width: calc(100% + 6.4rem);
    margin-left: -3.2rem;
}
.part4 .graphicimg span.graphicimg_01 { 
	background: url(images/pic_mobile_tabbar.png) no-repeat top/100%; 
	width: 260%;
	padding-top: 120%;
    left: 50%;
    transform: translateX(-50%);
}

/*part5*/
.part5 .graphicimg {
	padding-top: 200%;
	width: calc(100% + 6.4rem);
    margin-left: -3.2rem;
}
.part5 .graphicimg span.graphicimg_01 { 
	background: url(images/pic_mobile_listen.png) no-repeat top/100%; 
	width: 130%;
    padding-top: 170%;
    left: 50%;
    transform: translateX(-50%);
}

/*foot*/
.lastpart {
	background: #303132; 
	color: #fff; 
	padding: 4rem 3.2rem 7rem; 
	position: relative; 
	text-align: center;
	font-size: 1.8rem;

}
.lastpart:before {
	position: absolute;
    content: "";
    display: block;
    top: -100px;
    left: 0;
    background: url(images/deco_footer.png) no-repeat top/100%;
    width: 190px;
    height: 0;
    padding-top: 50%;
}
.lastpart p {font-size: 1.6rem; color: #ffffff; font-weight: normal; position: relative; width: 100%; display: block;}
.lastpart p:before {
	position: absolute;
    content: "";
    display: block;
    top: 50%;
    transform: translateY(-50%);
    background: #E60113;
    width: 100%;
    height: 1px;
}
.lastpart p strong {display: inline-block; background: #303132; position: relative; z-index: 2; padding: 0 16px; color: #ffffff;}
.lastpart span {display: block; font-size: 3rem; text-align: center; margin-bottom: 16px;}
.lastpart .applogo {
	position: relative;
	z-index: 3;
	width: 80px; 
	margin: 0 auto 2.2rem;;
	filter: drop-shadow(0px 100px 80px rgba(255, 255, 255, 0.07)) drop-shadow(0px 41.7776px 33.4221px rgba(255, 255, 255, 0.0503198)) drop-shadow(0px 22.3363px 17.869px rgba(255, 255, 255, 0.0417275)) drop-shadow(0px 12.5216px 10.0172px rgba(255, 255, 255, 0.035)) drop-shadow(0px 6.6501px 5.32008px rgba(255, 255, 255, 0.0282725)) drop-shadow(0px 2.76726px 2.21381px rgba(255, 255, 255, 0.0196802));
}
.lastpart .directLink {margin: 0 auto;}
/*.lastpart::before {
	content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(images/bg_main_bg.png) no-repeat center/cover;
    left: 0;
    bottom: 0;
    mix-blend-mode: luminosity;
}*/


@media screen and (min-width:489px) {
	
}

@media screen and (min-width:759px) {
	.area_index .main {display: flex; flex-direction: row;}
	.textArea {width: 50%; margin: 0; padding: 5% 35px;}
	.title h1 {width: 100%; margin-bottom: 1.2rem;}
/*	.title span {text-indent: 0.82em; letter-spacing: 0.82em;}*/
	.area_index .graphicimg { width: 50%;}
	.area_index .graphicimg { padding-top: 58%;}
	.graphicimg span { top: -14%;}
	.area_index .graphicimg span.graphicimg_01 {}
	.area_index .graphicimg span.graphicimg_02 {}

	#all .container {display: flex; justify-content: center;}
	.container article {width: 50%; padding: 32px;}
	.container .deco {width: 45%;}
	.part1 .container, .part3 .container { flex-direction: row-reverse;}

	.section h1 br, .section p br {display: none;}

	.feature .deco {width: 100%;}
	.feature_2 .deco:before {    bottom: -80px;}

	.part1 {padding-top: 0; padding-bottom: 40px;}
	.part1 article {padding-top: 10%;}

	.lastpart {padding-top: 10rem; padding-bottom: 12rem;}
	.lastpart:before {top: -157px; width: 300px; padding-top: 300px;}
	.lastpart article {max-width: 40rem; margin: 0 auto;}
}

@media screen and (min-width:991px) {
	html {font-size: 80%;}
	.title h1 {width: 80%;}
	

	.part3 .graphicimg { padding-top: 69%;}
	.part3 .graphicimg span.graphicimg_01 { width: 55%; left: 50%;}
}

@media screen and (min-width:1200px) {
	.title strong {letter-spacing: 0.18em; text-indent: 0.18em; font-size: 4rem;}
	.title span {letter-spacing: 1em; text-indent: 0.9em; font-size: 2.3rem;}

	.directLink .qrcodeios, .directLink .qrcodeandroid {display: block; width: 13%; margin-right: 8px;}
	.directLink { max-width: 100%;}
	.directLink > div {width: 35%;}
	.textArea {width: 55%;}
	.area_index .graphicimg {width: 45%; padding-top: 50%;}
	.container article {width: 45%;}

	.part1 article { padding-top: 15%;}

	.feature { display: flex; align-items: flex-end; max-width: 1100px; margin: 0 auto 6rem auto;}
	.feature:before {display: none;}
	.feature article { width: 100%; padding: 4.2rem 3.2rem 4.2rem 8rem;}
	.feature article:before {
	    background: #F3F5F8;
	    border-radius: 16px;
	    width: 250%;
	    height: 100%;
	    position: absolute;
	    content: "";
	    display: block;
	    top: 0;
	    left: 0;
	    z-index: 0;
	}
	.feature article h1, .feature article p {position: relative; z-index: 2;}
	.feature article h1 br, .feature article p br {display: inline-block;}
	.feature article b {left: 3.2rem; top: 4.2rem; height: 63%;}
	.feature .deco {left: 0; transform: none; width: 200%;}

	.lastpart .directLink { max-width: 500px;}
	.lastpart .directLink > div {width: 50%;}
}


@media screen and (min-width:1px) and (max-width:767px) { 
	#foot p { line-height: 61px;}
}
@media screen and (min-width:768px) and (max-width:1279px) {
     #foot .foottop, #foot .foottop p {line-height: 1.5;}
}

/*下載qr*/
#osstickers td.qr{ width:13%;}
.cf:after{ /* fur Firefox, IE8, Opera, Safari, etc. */
 content:""; display:block; height:0; clear:both; visibility:hidden;}
* + html .cf{ /* for IE7 */
 display:inline-block;}
* html .cf{ /* for IE6 */
 height:1%;}