@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto');

.lazyload{
	opacity: 0;
}

.sp-only {
	display:block;
	white-space:pre-wrap;
}

.pc-only {
	display:none;
}

.container_teach {
	position: relative;
}

	.container_teach img {
		max-height: 100%;
		max-width: 100%;
		transition: opacity 1.5s ease-out;
	}



article#content-top {
	padding-top:0px;
}

.sec {
	position:relative;
	text-align:center;
	padding: 12vw 0;
}

.sec h2, .sec img,
.sec .sec-movie-wrap, .sec .sec-bg-img, .sec video,
.sec .swiper-container, .sec-spec-link, .sec-link,
#emopa-wrapper, #assistant-wrapper, #design-wrapper,
#sec-sns, #sec-fb, .sec .sec-movie-link, .sec ul {
	transition: opacity 1.5s ease-out;
	opacity: 0;
}

.sec #sec-top-txt, .sec p,
.sec h3, .sec h4, .sec .sec-bar {
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
	transform: translateY(1em);
	opacity: 0;
}

.sec-flex {
	display:flex;
}

	.sec-flex > div {
		width:50%;
	}

.sec-img-relative {
	position:relative;
	margin:auto;
}

/*TEXT*/
.sec-big-txt {
	position:relative;
	width:95vw;
	margin:auto auto 8vw;
	text-align:center;

	font-size: 9vw;
	color: #A78338;
	z-index:2;
}

	.sec-big-txt.wh {
		color: #fff;
	}

		.sec-big-txt sup {
			position: static;
			font-size: 55%;
			vertical-align: super;
		}

	.sec-big-txt.title {
		width:100%;
		padding:4vw 0;
		color: #fff;
		background: #A78338;
	}

.sec-head-txt {
	position:relative;
	width:95vw;
	margin:6vw auto;
	text-align:center;

	font-size: 7.6vw;
	color: #505050;
	z-index:2;
}

	.sec-head-txt.wh {
		color: #fff;
	}

	.sec-head-txt.gold {
		color: #A78338;
	}

	.sec-head-txt sup {
		font-size: 65%;
	}

	.sec-head-txt.title {
		width:90%;
		padding:2vw 0;
		font-size: 5.8vw;
		color: #fff;
		border-radius:50em;
		background: #A78338;
	}
	
.sec-head2-txt {
	position:relative;
	width:85vw;
	margin:6vw auto;
	text-align:center;

	font-size: 7.6vw;
	color: #505050;
	z-index:2;
}

	.sec-head2-txt.wh {
		color: #fff;
	}

	.sec-head2-txt.gold {
		color: #A78338;
	}

	.sec-head2-txt sup {
		font-size: 65%;
	}

	.sec-head2-txt.title {
		width:90%;
		padding:2vw 0;
		font-size: 5.8vw;
		color: #fff;
		border-radius:50em;
		background: #A78338;
	}

.sec-subhead-txt {
	position:relative;
	width:95vw;
	margin:4vw auto;
	text-align:center;

	font-size: 4.8vw;
	line-height: 1.8;
	color: #3C3C3C;
	z-index:2;
}

	.sec-subhead-txt.wh {
		color: #fff;
	}

	.sec-subhead-txt span.small {
		font-size: 75%;
	}
	
	.sec-tsuika-txt {
	position:relative;
	max-width:75vw;
	margin:4vw auto;
	text-align:left;
	font-size: 4.8vw;
	line-height: 1.6;
	color: #3C3C3C;
	overflow:hidden;
}

	.sec-tsuika-txt.wh {
		color: #fff;
	}

	.sec-tsuika-txt span.small {
		font-size: 75%;
	}
	
	.box1 {
	position:relative;
	
	margin:5vw auto;
	float:none;
	}
	
	.box2 {
	position:relative;
	max-width:60vw;
	margin:8vw auto;
	float:none;
	}
	
	.box3 {
	position:relative;
	width:83%;
	padding:2vw 8vw 0;
	text-align:left;
	}

.sec-caption-txt {
	position:relative;
	width:90vw;
	margin:3vw auto;
	text-align:left;

	font-size: 3.4vw;
	color: #000;
	z-index:2;
}

	.sec-caption-txt.wh {
		color: #fff;
	}

	.sec-caption-txt.gray {
		color: #707070;
	}

	.sec-caption-txt.bk-gray {
		width:60%;
		padding:5px 5px;
		box-sizing:border-box;
		text-align:center;
		background: #F0F0F0;
	}
	

.roboto-font {
	font-family: "Roboto", sans-serif;
}

.bold {
	font-weight:bold;
}

.left {
	text-align:left;
}

.center {
	text-align:center;
}

.right {
	text-align:right;
}

.shadow {
	text-shadow: 0 0 6px rgba(0, 0, 0, 1.0);
}

.shadow-wh {
	text-shadow: 0 0 6px rgba(255, 255, 255, 1.0);
}

/*IMG*/
.sec-bg-img {
	position:relative;
	height: 0;
	width: 100%;
	overflow: hidden;
	background: no-repeat center center;
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	z-index:1;
}



/*LINK*/
.label {
	position:relative;
	width:100%;
	margin:4vw auto;
	padding: 2vw 0;
	text-align:center;
	color: #fff;
	font-weight:bold;
	font-size: 4.8vw;
	background:#8BAAAA;
	display:inline-block;
	border-radius:0px;
}


.btn-detail {
	position:relative;
	display: block;
	width:80vw;
	margin:auto;
	border-radius:50em;
	background-color: #9AABB9;
	background-image: url(../images/arrow-right-white.png);
	background-repeat: no-repeat;
	background-position: right 15vw center;
	background-size: auto 5vw;
}

	.btn-detail.iphone {
		background-color:#9AABB9;
	}

	.btn-detail.android {
		background-color:#B49088;
	}

	.btn-detail:hover {
		opacity:0.8;
	}

	.btn-detail span {
		display: inline-block;
		padding: 5vw;
		color: #fff;
		font-weight:bold;
		font-size: 5vw;
		text-align: center;
		line-height: 1.2;
	}

/*PAGE TOP*/
#content-top {
}

#sec-top {
	padding: 0;
}

#sec-top .sec-top-img {
	height: 0;
	width: 100%;
	overflow: hidden;
	padding-top: 168%;
	margin:0 auto;
	background: no-repeat center center;
	background-size: cover;

	transition: opacity 1s ease-out;
}

	#sec-top .sec-top-img.lazyloaded {
		background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/top-sp.jpg");
	}

	#sec-top .sec-video-wrap {
		position:absolute;
		top:0;
		left:0;
		right:0;
		max-width:none;
		transition: opacity 1.5s ease-out;
	}

		#sec-top .sec-video-wrap.off {
			opacity:0;
		}

		#sec-top .sec-video-wrap .sec-video-inner {
			padding-top: 148.5%;
		}

			#sec-top .sec-video-wrap .sec-video-inner video {
				transition:none;
				min-height: 100%;
				object-fit: cover;
			}

/*CONTENT MAIN*/
#content-main {

}

#sec-content-01 {
	padding-top:0;
	background:#DFE5E7;
}

.point-01, .point-02, .point-03{
	position:relative;
	width:90%;
	margin:auto auto 12vw;
	z-index:2;
}

.point-04{
	position:relative;
	width:75%;
	padding:0 8vw 5vw;
	margin:6vw auto 3vw;
	display:block;
	background:#fff;
	border-radius:15px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.2);
	z-index:0;
	overflow:hidden;
}

	.point-01 .point-bk,
	.point-02 .point-bk,
	.point-03 .point-bk {
		position:absolute;
		top:12vw;
		right:0;
		left:0;
		bottom:0;
		display:block;
		height:100%;
		width:100%;
		margin:auto;
		background:#fff;
		border-radius:15px;
		box-shadow: 0 3px 8px rgba(0,0,0,0.2);
		z-index:0;

		overflow:hidden;
	}

		.point-bk:before {
			content:"";
			position:absolute;
			top: 32vw;
			left: -8vw;
			height: 1px;
			width: 200px;
			background: #707070;
			transform-origin: left;
			transform: rotateZ(312deg);
			z-index:0;
		}

		.point-bk .number {
			position:absolute;
			top:2vw;
			left:6vw;
			font-size:12vw;
			font-weight:bold;
			z-index:1;
		}

	.point-01 .sec-bg-img,
	.point-02 .sec-bg-img,
	.point-03 .sec-bg-img {
		padding-top: 30%;
	}

		.point-01 .sec-bg-img.lazyloaded {
			background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/icon-point-01.png");
		}

		.point-02 .sec-bg-img.lazyloaded {
			background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/icon-point-02.png");
		}

		.point-03 .sec-bg-img.lazyloaded {
			background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/icon-point-03.png");
		}

	.point-01 .sec-head-txt, .point-01 .sec-subhead-txt,
	.point-02 .sec-head-txt, .point-02 .sec-subhead-txt,
	.point-03 .sec-head-txt, .point-03 .sec-subhead-txt {
		width:100%;
	}
	
	.sec-head2-txt {
		width:100%;
	}

	.point-03 .sec-caption-txt {
		width:80%;
	}


#sec-content-02 {
	padding-top:0;
	background:#DFE5E7;
}

	#sec-content-02 .sec-big-txt.title {
		margin: auto;
	}


#sec-content-03 {
	padding-top:1px;
	background: linear-gradient(225deg, #E8EDF2 20%, #D0D5DF 80%);
}

	#sec-content-03 .sec-bg-img {
		padding-top: 140%;
	}

		#sec-content-03 .sec-bg-img.lazyloaded {
			background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/img-03.png");
		}


#sec-content-04 {
	padding-top:0;
	overflow:hidden;
}

	#sec-content-04.iphone:before,
	#sec-content-04.android:before {
		content:"";
		position:absolute;
		top:95vw;
		left:0;
		height:100%;
		width:100%;
		background:#8BAAAA;
		opacity:0.4;
	}

	#sec-content-04.android:before {
		background:#B49088;
	}

	#sec-content-04 .content-head {
		padding-top:1px;
		background:#232C87;
	}

.btn-switch {
	width:49.4%;
	margin:auto;
	padding:2vw 0;
	background:#DCDCDC;
	color:#fff;
	font-size:6vw;
	font-weight:bold;
	text-align:center;
	border-radius:1em 1em 0 0;

	text-decoration:none;
}

	.btn-switch.iphone {
		margin-left:0;
	}

		#sec-content-04.iphone .btn-switch.iphone {
			background:#8BAAAA;
			cursor:default;
		}

	.btn-switch.android {
		margin-right:0;
	}

		#sec-content-04.android .btn-switch.android {
			background:#B49088;
			cursor:default;
		}

#sec-content-04 .sec-bg-img.a,
#sec-content-04 .sec-bg-img.b {
	display:none;
	padding-top: 22%;
	margin:4vw auto;
}

	#sec-content-04.iphone .sec-bg-img.a,
	#sec-content-04.android .sec-bg-img.b {
		display:block;
	}

#sec-content-04 .sec-bg-img.a.lazyloaded {
	background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/img-04-a.png");
}

#sec-content-04 .sec-bg-img.b.lazyloaded {
	background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/img-04-b.png");
}

#sec-content-04 .pc-only-flex.icon > div {
	display:none;
}

	#sec-content-04.iphone .pc-only-flex.icon > div.iphone,
	#sec-content-04.android .pc-only-flex.icon > div.android {
		display:block;
	}

#sec-content-04 .sec-bg-img.icon-a,
#sec-content-04 .sec-bg-img.icon-b {
	padding-top: 90%;
	margin:8vw auto;
}

	#sec-content-04 .sec-bg-img.icon-a.lazyloaded {
		background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/icon-04-a.png");
	}

	#sec-content-04 .sec-bg-img.icon-b.lazyloaded {
		background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/icon-04-b.png");
	}

#sec-content-04 .colum {
	position:relative;
	width:90%;
	margin:6vw auto;
	padding: 6vw;
	box-sizing: border-box;
}

	#sec-content-04 .colum:before {
		content:"";
		position:absolute;
		top:0;
		left:0;
		height:100%;
		width:100%;
		background:#fff;
		opacity:0.5;
	}

	#sec-content-04 .colum .sec-head-txt,
	#sec-content-04 .colum .sec-subhead-txt {
		width:100%;
		margin-top:0;
	}


#sec-content-04 .btn-detail {
	display:none;
}

	#sec-content-04.iphone .btn-detail.iphone,
	#sec-content-04.android .btn-detail.android {
		display:block;
	}


/*CONTENT END*/
#sec-sns-02 {
	background:#fff;
}

/*Google*/
#sec-google {
	padding: 6vw 0;
	background:#fff;
}

	.sec-google-wrapper {
		width:95%;
		margin:auto;
		text-align:center;
		font-size:0;
	}

	a.link-google {
		display:inline-block;
		min-height:70px;
		width:31%;
		margin:1%;
		vertical-align: middle;
	}

		a.link-google:hover {
			opacity:0.8;
		}

		a.link-google.b {
			min-height:30px;
		}

	#sec-google .sec-subhead-txt {
		font-size:5.6vw;
		margin:auto;
	}

/*SNS*/
#sec-fb {
	background:#fff;
}

#sns-wrapper {
}

	#sns-wrapper h3 {
		font-size: 5vw;
		margin: 10px 0;
		color:#000;
	}

	#sns-wrapper #sns-inner {
		max-width:90%;
		margin:auto;
	}


/*LODADED*/
.lazyloaded{
	opacity: 1;
}

.delighter.started h2, .delighter.started img, .delighter.started video,
.delighter.started .sec-movie-wrap, .delighter.started .sec-bg-img,
.delighter.started .swiper-container, .delighter.started .sec-spec-link,
#emopa-wrapper.delighter.started,
#assistant-wrapper.delighter.started, #design-wrapper.delighter.started,
#sec-sns.delighter.started, #sec-sns-02.delighter.started, #sec-fb.delighter.started,
.delighter.started .sec-movie-link, .delighter.started ul {
	opacity: 1;
}

.delighter.started #sec-top-txt, .delighter.started p,
.delighter.started h3, .delighter.started h4,
.delighter.started .sec-bar {
	transform: none;
	opacity: 1;
}

.link_proname li {
	display:block;
	width: 80%;
	padding:0;
	margin: 4vw auto 3vw;
}

.link_proname li a:hover {
	opacity:0.7;
}

.link_proname2 li {
	display:none;
	width: 80%;
	padding:0;
	margin: 5vw auto 3vw;
}

.link_proname2 li a:hover {
	opacity:0.7;
}

.link_proname3 li {
	display:block;
	width: 80%;
	padding:0;
	margin: 5vw auto 3vw;
}

@media screen and (min-width: 641px) {
	.sp-only {
		display:none;
	}

	.pc-only {
		display:block;
	}

	.pc-only-flex {
		display:flex;
		width:100%;
		max-width:1200px;
		margin:auto;
	}

		.pc-only-flex > div {
			position: relative;
			height:100%;
			width:50%;
			max-width:600px;
			margin:auto;
		}

		.pc-only-flex > div.order0 {
			order:0;
		}

		.pc-only-flex > div.order1 {
			order:1;
		}

	.sec-img-relative {
		max-width:1200px;
	}

	.sec-movie-txt {
		width: 100%;
		margin: 100px auto 0;
		font-size: 28px;
	}

	.sec-bar {
		width:90%;
		max-width:1200px;
		margin:0 auto 30px;
	}

		.sec-bar >div {
			width:200px;
			height:8px;
		}

	/*BANNER CAPMPAIGN*/
	#sec-banner, #sec-campaign, #sec-campaign-02,
	#sec-sns, #sec-sns-02 {
		padding:60px 0;
	}

	#sec-assistant {
		padding:60px 0 0;
	}

		#sec-assistant .sec-caption-txt {
			width:40vw;
			font-size:18px;
			text-align:center;
		}

			#sec-assistant .sec-caption-txt.small {
				font-size:11px;
			}

	#link-assistant {
		width:250px;
		text-align:center;
	}

	/*Header*/
	#contentHeaderWrapper .logo {
		width: 190px;
		box-sizing: content-box;
	}

	#contentHeaderWrapper .header-on {
		width: auto;
	}

	#contentHeaderWrapper .btn-buy {
		font-size:16px;
	}

	#header-link ul {
		display:flex;
	}

		#header-link ul li {
			width:32%;
		}

			#header-link ul li a span {
				width:auto;
			}

	article#content-top {
		padding-top:0;
	}

	.sec {
		padding:80px 0;
	}

	ul.link-sns {
		display:flex;
		max-width:975px;
	}

	ul.link-campaign {
		display:flex;
		flex-wrap: wrap;
		max-width:650px;
		margin:30px auto;
	}

		ul.link-campaign li {
			width: 300px;
		}

	ul.link-banner {
		display:flex;
		flex-wrap: wrap;
		max-width:1200px;
		margin:30px auto;
	}

		ul.link-banner li {
			width: auto;
		}

	/*SHOP LINK*/
	.sec-link-wrap {
		max-width:1300px;
		margin:auto;
	}

	.sec-link-inner {
		display:inline-block;
		width:400px;
		margin:30px 1%;
		padding:0;
		vertical-align:top;
	}

	.sec-link-txt {
		display:block;
		margin-left:auto;
	}

		.sec-link-txt .sec-link-img {
			width:80%;
		}

			.sec-link-txt .sec-link-img.pc-pt-50 {
				padding-top:50px;
			}

		.sec-link-txt ul {
			width: 50%;
			margin:30px auto 0;
		}

			.sec-link-txt ul li a {
				padding: 15px 0;
			}

				.sec-link-txt ul li a span {
					padding-left: 20px;
					font-size: 16px;
					background-size: auto 16px;
				}


	/*MOVIE*/
	#sec-movie {
		padding: 80px 0;
	}

	.sec-movie-link {
		width: 800px;
		margin:40px auto;
		font-size: 22px;
		line-height: 70px;
	}

		.sec-movie-link a {
			display:block;
			text-decoration:none;
			color: #fff;
			background-position: right 8% center;
			background-size: 36px auto;
		}

	.sec-movie-wrap {
		width:90%;
		max-width:1200px;
		margin:auto;
	}

	.sec-movie-inner {
		margin:auto;
	}

	/*VIDEO*/
	.sec-video-wrap {
		max-width:1200px;
		margin:auto;
	}

	.sec-video-inner {
		margin:auto;
	}


	/*TEXT*/
	.sec-big-txt {
		width:100%;
		margin:auto auto 40px;
		font-size: 44px;
		max-width:1200px;
	}

		.sec-big-txt.title {
			padding:10px 0;
		}

	.sec-head-txt {
		width:100%;
		max-width:1200px;
		margin:30px auto;
		font-size: 32px;
	}

		.sec-head-txt.title {
			width:80%;
			max-width:800px;
			padding:10px 0;
			font-size: 34px;
		}
		
	.sec-head2-txt {
		width:100%;
		max-width:1200px;
		margin:30px auto;
		font-size: 32px;
	}

	.sec-head2-txt.title {
			width:80%;
			max-width:800px;
			padding:10px 0;
			font-size: 34px;
		}

	.sec-subhead-txt {
		width:100%;
		max-width:1200px;
		margin: 30px auto;
		font-size: 20px;
	}

	.sec-caption-txt {
		width:90%;
		margin: 10px auto;
		max-width: 1200px;
		font-size: 14px;
	}
	
	
	.sec-tsuika-txt {
	position:relative;
	width:100%;
	margin:10px auto 20px;
	text-align:left;
	font-size: 20px;
	line-height: 30px;
	color: #3C3C3C;
	overflow:hidden;
}
	
	.box1 {
	width:auto;
	margin:10px 0;
	float:left;
	}
	
	.box2 {
	max-width:200px;
	margin:10px;
	float:right;
	}
	
	.box3 {
	position:relative;
	max-width:1150px;
	padding:20px 50px 0;
	margin:0 auto;
	text-align:left;
	}

	/*SPEC*/
	.sec-spec-link {
		width: 520px;
	}

		.sec-spec-link a {
			display: block;
			text-decoration: none;
			font-size: 24px;
			line-height: 90px;
			background: url(https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/arrow-right-white.png) no-repeat right 45px center;
			background-position: right 5% center;
			background-size: 12px auto;
		}

	/*LINK*/
	.label {
		margin: 30px auto;
		padding: 5px 0;
		font-size: 16px;
	}

	.btn-detail {
		width:300px;
		background-position: right 16px center;
		background-size: auto 22px;
	}

		.btn-detail span {
			padding: 10px;
			font-size: 22px;
		}

	/*PAGE TOP*/
	#sec-top {

	}

		#sec-top .sec-top-img {
			min-width: 960px;
			padding-top: 43%;
		}

			#sec-top .sec-top-img.lazyloaded {
				background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/top-pc.jpg");
			}


	/*CONTENT MAIN*/
	#content-main {
	}

	#sec-content-01 {

	}

		.point-01, .point-02, .point-03{
			display: inline-block;
			width: 32%;
			max-width: 380px;
			margin: 4px;
			vertical-align: top;
		}
		
		.point-04{
			position:relative;
			max-width:1090px;
			padding:0 50px 20px;
			margin:auto auto 1px;;
			display:block;
			background:#fff;
			border-radius:15px;
			box-shadow: 0 3px 8px rgba(0,0,0,0.2);
			z-index:0;
			overflow:hidden;
			}

			.point-01 .point-bk,
			.point-02 .point-bk,
			.point-03 .point-bk {
				top:20px;
				bottom:auto;
				height:620px;
			}

			.point-bk:before {
				top: 100px;
				left: -1px;
				height: 1px;
				width: 200px;
			}

			.point-bk .number {
				top: 10px;
				left: 40px;
				font-size: 38px;
			}

			.point-01 .sec-bg-img,
			.point-02 .sec-bg-img,
			.point-03 .sec-bg-img {
				padding-top: 110px;
			}


		#sec-content-02 .sec-big-txt.title {
			margin-bottom: 40px;
		}

	#sec-content-03 .sec-bg-img {
		padding-top: 72%;
		margin-top: 40px;
	}

		#sec-content-03 .sec-bg-img.lazyloaded {
			background-image: url("https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/img-03-pc.png");
		}

	#sec-content-04 {
	}

		#sec-content-04.iphone:before,
		#sec-content-04.android:before {
			top:410px;
			left:0;
			background: linear-gradient(90deg, #8BAAAA 50%, #B49088 50%);
		}

		#sec-content-04 .sec-flex {
			max-width:1200px;
			margin:auto;
		}

	.btn-switch {
		padding:15px 0;
		font-size:32px;
	}

		#sec-content-04 .btn-switch.iphone {
			background:#8BAAAA;
			cursor:default;
		}

		#sec-content-04 .btn-switch.android {
			background:#B49088;
			cursor:default;
		}

		#sec-content-04 .sec-bg-img.a,
		#sec-content-04 .sec-bg-img.b {
			display:block;
			padding-top: 20%;
			margin:15px auto;
		}

		#sec-content-04 .pc-only-flex.icon > div {
			display:block;
			margin-top:0;
		}

		#sec-content-04 .sec-bg-img.icon-a,
		#sec-content-04 .sec-bg-img.icon-b {
			padding-top: 84%;
			margin:60px auto;
		}

	#sec-content-04 .colum {
		max-width:1100px;
		margin:30px auto;
		padding: 40px;
	}

		#sec-content-04 .colum .sec-head-txt,
		#sec-content-04 .colum .sec-subhead-txt {
			width:80%;
		}

	#sec-content-04 .btn-detail {
		display:block;
	}
	
	.link_proname {
		max-width: 800px;
		margin:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		}
		
	.link_proname li {
		width: 400px;
		padding: 0;
		margin: 13px 15px;
	}
	
	.link_proname2 {
		max-width: 800px;
		margin:auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		}
		
	.link_proname2 li {
		display: block;
		width: 400px;
		padding: 0;
		margin: 15px 15px;
	}
	
	.link_proname3 {
		max-width: 800px;
		margin:auto;
		display: none;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		}
		
	.link_proname3 li {
		width: 400px;
		padding: 0;
		margin: 15px 15px;
	}
	

}

	
	



@media only screen and (max-width: 640px) {#lineup-info_spc {padding:0 0 8vw 0;}}

.lineup-info a {
  width: 500px;
  background: #283593;
  margin: 0 auto 0;
  padding: 34px 0;
  text-align: center;
  display: block;
  font-size: 26px;
  line-height: 0.8;
  letter-spacing: 0.1em;
  color: #ffffff;
  border-radius:10px;
  text-decoration:none;
}

@media only screen and (max-width: 640px) {
  .lineup-info a {
    width: 86vw;
    padding: 6.5vw 0;
    font-size: 5.5vw;
    margin: 0 auto 2vw;
  }
}

.lineup-info a span {
	padding: 0 0 0 20px;
	background: url(https://aquosmobile.sharp.com.tw/resources/aquos/OStoAQUOS/arrow-right-white.png) no-repeat 0 center;
}



/*popup*/


.popup-wrap {
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	content: '';
	background: rgba(0, 0, 0, 0.85);
	z-index: 99;
	font-size:2.2em;
}

.popup-wrap ul{margin:30px 0 30px 0; text-align:left;}
.popup-wrap ul li{margin-bottom:10px;}


.popup-box {
	width: 100%;
	padding: 50px 75px;
	transform: translate(-50%, -50%) scale(0.5);
	position: absolute;
	top: 50%;
	left: 50%;
	box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	background: #fff;
	text-align: center;
	
}

.close-btn {
	width: 50px;
	height: 50px;
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 100%;
	background: #d75f70;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	line-height: 40px;
	font-size: 32px;
}

.transform-in, .transform-out {
	display: block;
	-webkit-transition: all ease 0.5s;
	transition: all ease 0.5s;
}

.transform-in {
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}

.transform-out {
	-webkit-transform: translate(-50%, -50%) scale(0.5);
	transform: translate(-50%, -50%) scale(0.5);
}

@media only screen and (max-width: 600px) {
	.popup-box {
		width: 600px;
		top: 10%;
		left: 50%;
	}
}