/*=================================================

main.css
Date - 2019.01.10
msdia - screen
[Table of contents]


=================================================*/

@font-face {
	/*圓體*/

	font-family: 'cwTeXYen';
	font-style: normal;
	font-weight: 500;
	src: url(https://fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
	src: url(https://fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),  url(https://fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),  url(https://fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),  url(https://fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}
* {
	font-size: 18px;
	color: aliceblue;
	font-family: 'Microsoft JhengHei', 'cwTeXYen', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif", serif;
}
body {
	background: rgba(235,234,234,1.00);
}
a{font-size: 1em;color: rgba(1,34,85,1.00);}
a:hover{color: rgba(202,42,60,1.00);}

/* LOADING */
#preloader {
	/*   這是整個會蓋住畫面的底色色塊  */
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	background-color: #04a17e;
	z-index: 3002
}
#status {
	/*   這是中間loading的gif坐標css,我們盡量讓他畫面置中  */
	position: fixed;
	width: 130px;
	height: 105px;
	margin-left: -65px;
	margin-top: -50px;
	left: 50%;
	top: 50%;
	background-color: #001d41;
}

/*********** Frame ***********/
div.wrapper {
	max-width: 750px;
	margin: 0 auto;
	/*border: 1px solid #000;*/
}

/*********** MenuHover ***********/

nav.menuHover{
	left:50%;
	margin-left:-375px;
	position: fixed;
	display: none;
	width:750px;
	height:100%;
	z-index: 99;
	background: rgba(255,255,255,1.0) 0 0 ;
	
}
nav.menuHover .menuHeader{
	background: rgba(0,33,84,1.00);
	height: 90px;	
}
nav.menuHover .mlogo {
	background: url(../img/index/FroLOGO.svg) 0 0 no-repeat;
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	float: right;
	display:block;
	width: 300px;
	height: 60px;
	margin:15px 0 0 ;
}
nav.menuHover a.mMenu_close {
	background: url(../img/index/btn_menu_close.png) 0 0 no-repeat;
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	float:left;
	display:block;
	width: 90px;
	height: 90px;
}
nav.menuHover a.mMenu_01,nav.menuHover a.mMenu_02,nav.menuHover a.mMenu_03,nav.menuHover a.mMenu_04{
	overflow: hidden;
	text-indent:-200em;
	display:block;
	width: 750px;
	height: 128px;		
}
nav.menuHover a.mMenu_01{
	background: url(../img/index/m1.png) 0 0 no-repeat;
	background-size:contain;
}
nav.menuHover a.mMenu_02{
	background: url(../img/index/m2.png) 0 0 no-repeat;
	background-size:contain;
}
nav.menuHover a.mMenu_03{
	background: url(../img/index/m3.png) 0 0 no-repeat;
	background-size:contain;
}
nav.menuHover a.mMenu_04{
	background: url(../img/index/m4.png) 0 0 no-repeat;
	background-size:contain;
}

nav.menuHover a.mMenu_05,nav.menuHover a.mMenu_06{
	overflow: hidden;
	text-indent:-200em;
	display:inline-block;
	width: 372px;
	height: 130px;	
}
nav.menuHover a.mMenu_05{
	background: url(../img/index/m_btn_FB.png) 0 0 no-repeat;
	background-size:contain;
}
nav.menuHover a.mMenu_06{
	background: url(../img/index/m_btn_IG.png) 0 0 no-repeat;
	background-size:contain;
}


/*********** header ***********/
header.mheader {
	z-index: 98;
	/*position: relative;*/
	background: rgba(0,33,84,1.00);
	width: 750px;
	height: 90px;
	margin:0 auto;
}
header.mheader .logo {
	background: url(../img/index/FroLOGO.svg) 0 0 no-repeat;
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	float: right;
	display:inline-block;
	width: 300px;
	height: 60px;
	margin:15px 0 0 ;
}
header.mheader .mMenu {
	background: url(../img/index/btn_menu.png) 0 0 no-repeat;
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	float: left;
	display:inline-block;
	width: 90px;
	height: 90px;
}
.hderfixed{	
  position:fixed;
 /* CSS3 陰影*/
-webkit-box-shadow: 0px 5px 5px #001d41;
-moz-box-shadow: 0px 5px 5px #001d41;
box-shadow: 0px 5px 5px #001d41; 
}
/*********** header ***********/

/*********** mainPhoto ***********/

div.mainPhoto{
	z-index: 3;
	width:750px;
	height:457px;
	overflow: hidden;
	position: relative;
	/*border:1px solid #000;*/
}
div.mainPhoto iframe{
	width:750px;
}
/*div.mainPhoto ul.list {
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	width: 9999px;
	height: 100%;
}
div.mainPhoto ul.list li {
	float: left;
	width: 750px;
	height: 100%;
}
div.mainPhoto ul.list li img{
	width: 100%;
	height: 100%;
	border: 0;
}

div.mainPhoto ul.playerControl {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 10px;
}
div.mainPhoto ul.playerControl li {
	float: left;
	width: 100px;
	height: 10px;
	cursor: pointer;
	margin: 0px 5px;
	background:rgba(0,0,0,.5);
}
div.mainPhoto ul.playerControl li.current { 
	background: rgba(200,40,60,1.00);
}*/

/*********** mainPhoto ***********/


/*********** mainBtn ***********/
div.mainBtn{
	z-index: 3;
	position: relative;
	padding-top:65px;
	/*padding-bottom:200px;*/
	text-align: center;
}
div.mainBtn a{
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	display:inline-block;
	width:130px;
	height:130px;
	margin: 25px;	
}
a.mainBtn01{
	background: url(../img/index/mainBtn01.png) 0 0 no-repeat;

}
a.mainBtn02{
	background: url(../img/index/mainBtn02.png) 0 0 no-repeat;
}
a.mainBtn03{
	background: url(../img/index/mainBtn03.png) 0 0 no-repeat;
}
a.mainBtn04{
	background: url(../img/index/mainBtn04.png) 0 0 no-repeat;
}
a.mainBtn05{
	background: url(../img/index/mainBtn05.png) 0 0 no-repeat;
}
a.mainBtn06{
	background: url(../img/index/mainBtn06.png) 0 0 no-repeat;
}
a.mainBtn07{
	background: url(../img/index/mainBtn07.png) 0 0 no-repeat;
}
a.mainBtn08{
	background: url(../img/index/mainBtn08.png) 0 0 no-repeat;
}
/*********** mainBtn ***********/
/* scroll */
div.btn_scroll{
	z-index: 3;
	display: block;
	background: url(../img/index/btn_scroll.gif) 0 0 no-repeat;
	background-size: contain;
	width:80px;
	height:50px;
	margin-left:-40px;
	overflow: hidden;
	text-indent: -200em;
	position: fixed;
	bottom:1%;
	left:50%;
}
div.btn_mask{
	z-index: 1;
	width:100%;
	height:100%;
	background: rgba(235,234,234,1.00);
	display:block;
	position: absolute;
	top:150px;
	left:0;
}
/**/
/*********** 商品專區 ***********/

section.product{
	margin:90px 20px 0;
}
section.product a{
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	display:inline-block;
	width:353px;
	height:353px;
	margin: 1px;
}
h1.productTitle{	
	background: url(../img/index/title_prd.png) 0 0 no-repeat;
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	width:710px;
	height:55px;
	margin-bottom:15px;
}
a.prdBtn01{
	background: url(../img/index/bPrd01.png) 0 0 no-repeat;
}
a.prdBtn02{
	background: url(../img/index/bPrd02.png) 0 0 no-repeat;
}
a.prdBtn03{
	background: url(https://event.eyesmart.com.tw/official/mobile/index/bPrd03.png) 0 0 no-repeat;
}
a.prdBtn04{
	background: url(../img/index/bPrd04.png) 0 0 no-repeat;
}

/*********** 商品專區 ***********/

/*********** TVC專區 ***********/
section.tvc{
	margin:90px 20px 0;
}
h1.tvcTitle{
	background: url(../img/index/title_ad.png) 0 0 no-repeat;
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	width:710px;
	height:55px;
	margin-bottom:15px;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin-bottom: 5px;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

section.tvc a{
	background-size:cover;
	overflow: hidden;
	text-indent:-200em;
	display:inline-block;
	width:174px;
	height:70px;
}

a.tvcmBtn01{
	background: url(../img/index/tvcmBtn1.png) 0 0 no-repeat;
}
a.tvcmBtn01:hover{
	background: url(../img/index/tvcmBtn1_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcmBtn01:active{
	background: url(../img/index/tvcmBtn1_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcB1_hover{
	background: url(../img/index/tvcmBtn1_hover.png) 0 0 no-repeat;
	background-size:contain;
}

a.tvcmBtn02{
	background: url(../img/index/tvcmBtn2.png) 0 0 no-repeat;
}
a.tvcmBtn02:hover{
	background: url(../img/index/tvcmBtn2_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcmBtn02:active{
	background: url(../img/index/tvcmBtn2_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcB2_hover{
	background: url(../img/index/tvcmBtn2_hover.png) 0 0 no-repeat;
	background-size:contain;
}

a.tvcmBtn03{
	background: url(../img/index/tvcmBtn3.png) 0 0 no-repeat;
}
a.tvcmBtn03:hover{
	background: url(../img/index/tvcmBtn3_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcmBtn03:active{
	background: url(../img/index/tvcmBtn3_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcB3_hover{
	background: url(../img/index/tvcmBtn3_hover.png) 0 0 no-repeat;
	background-size:contain;
}

a.tvcmBtn04{
	background: url(../img/index/tvcmBtn4.png) 0 0 no-repeat;
}
a.tvcmBtn04:hover{
	background: url(../img/index/tvcmBtn4_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcmBtn04:active{
	background: url(../img/index/tvcmBtn4_hover.png) 0 0 no-repeat;
	background-size:contain;
}
a.tvcB4_hover{
	background: url(../img/index/tvcmBtn4_hover.png) 0 0 no-repeat;
	background-size:contain;
}

/*********** TVC專區 ***********/

/*********** footer ***********/

.mftr{
	margin: 0 auto;	
	margin-top:0px;
	padding-top:40px;
	padding-bottom:15px;
	text-align: center;
	
}
.mftr p{color:rgba(78,78,78,1.00);font-size: .6em;font-weight: 800;width:750px;margin: 0 auto;}
.mftr p.ftMobile{display:none;}


/* 視窗縮放 */ 
@media only screen and (max-width: 414px) {
	div.wrapper {
		max-width: 100%;
	}
	/*按鈕遮罩*/
	div.btn_mask{
		top:3em;
	}
	/*按鈕遮罩*/
	/* MenuHover */
	nav.menuHover .menuHeader{
		height: 3em;
	}

	nav.menuHover{
		left:0;
		margin-left:0;
		width:100%;
		height:100%;
		background: rgba(255,255,255,1.0) 0 0 ;

	}
	nav.menuHover a.mMenu_01,nav.menuHover a.mMenu_02,nav.menuHover a.mMenu_03,nav.menuHover a.mMenu_04{
	width: 100%;
	height: 3.95em;		
	}
	nav.menuHover a.mMenu_05,nav.menuHover a.mMenu_06{
		width: 48.8%;
		height: 4em;
	}

	/* 版頭 */
	header.mheader {
		width: 100%;
		height: 3em;
		background: rgba(0,33,84,1.00);
		/*border: 1px solid #000;*/
	}
	header.mheader .logo,nav.menuHover .mlogo {
		background-size:cover;
		width: 50%;
		height: 2em;
		margin:1.5% 0 0 0;
	}
	header.mheader .mMenu,nav.menuHover a.mMenu_close {
		background-size:contain;
		width: 17.5%;
		height: 3em;
	}
	
	/* 廣告 */	
	div.mainPhoto{
		width:100%;
		height:14em;
		overflow:auto;
	}
	div.mainPhoto iframe{
		width:414px;
	}
/*	div.mainPhoto ul.list {
		width: 500%;
		height: 14em;
	}
	div.mainPhoto ul.list li {
		width: 20%;
		height: 14em;
	}
	div.mainPhoto ul.playerControl {
		height: 8px;
	}
	div.mainPhoto ul.playerControl li {
		width: 50px;
		height: 8px;
		margin: 0px 5px;
	}*/
	
	/*div.mainPhoto a{
		background-size:contain;
	}*/
	
	/* 主按鈕 */
	div.mainBtn{
		padding-top:2em;
		padding-left:4%;
		padding-right:4%;
		/*padding-bottom:40%;*/
		text-align: center;
	}
	div.mainBtn a{
		background-size:contain;
		width:20%;
		height:4.5em;
		margin: .6em .6em .3em .6em;
	}
	/* scroll */
	div.btn_scroll{
		background-size: contain;
		width:15%;
		height:3em;
		margin-left:-7.5%;
		bottom:1%;
	}
	/**/	
	/* 商品專區 */	
	section.product{
		margin:2em 4% 0;
	}
	section.product a{
		background-size:contain;
		width:49.3%;
		height:10.5em;
		margin: 1px;
	}
	h1.productTitle{
		background-size:contain;
		width:100%;
		height:1.8em;
		margin-bottom:2%;
	}
		
	/* TVC專區 */	
	section.tvc{
		margin:2em 4% 0;
	}
	h1.tvcTitle{
		background-size:contain;
		width:100%;
		height:1.8em;
		margin-bottom:2%;
	}
	.video-container {
		margin-bottom: 5px;
	}
	section.tvc a{
		background-size:contain;
		width:23.65%;
		height:2.1em;
	}
	
	/*********** footer ***********/
	.mftr{display:inline-block;margin-top:-.5em;margin-bottom:.5em;width:100%;padding-top:.5em;padding-bottom:.5em;}
	.mftr a.btn_top{display:none;}
	.mftr p{display:none;}
	.mftr p.ftMobile{width:100%;display:inline-block;line-height: 1.5em;}

}

@media only screen and (max-width: 375px) {
	/*按鈕遮罩*/
	div.btn_mask{
		top:2.5em;
	}
	/*按鈕遮罩*/
	/* MenuHover */
	nav.menuHover .menuHeader{
		height: 2.5em;
	}
	nav.menuHover a.mMenu_01,nav.menuHover a.mMenu_02,nav.menuHover a.mMenu_03,nav.menuHover a.mMenu_04{
	height: 3.55em;		
	}
	nav.menuHover a.mMenu_05,nav.menuHover a.mMenu_06{
		width: 48.8%;
		height: 4em;
	}

	/* 版頭 */
	header.mheader {
		height: 2.5em;
		/*border: 1px solid #000;*/
	}
	header.mheader .logo,nav.menuHover .mlogo {
		background-size:cover;
		width: 50%;
		height: 2em;
		margin:1.1% 0 0 0;
	}
	header.mheader .mMenu,nav.menuHover a.mMenu_close {
		height: 2.5em;
	}
	
	/* 廣告 */	
	div.mainPhoto{
		height:12.8em;
	}
	div.mainPhoto iframe{
		width:375px;
	}
/*	div.mainPhoto ul.list {
		height: 12.8em;
	}
	div.mainPhoto ul.list li {
		height: 12.8em;
	}*/
			
	/* 商品專區 */
	section.product{
		margin:1.5em 4% 0;
	}
	section.product a{
		width:49.4%;
		height:9.4em;
	}
	h1.productTitle{
		height:1.5em;
		margin-bottom:2%;
	}
		
	/* TVC專區 */
	section.tvc{
		margin:1.5em 4% 0;
	}
	h1.tvcTitle{
		height:1.5em;
		margin-bottom:2%;
	}
	.video-container {
		margin-bottom: 5px;
	}
	
	section.tvc a{
	width:23.6%;
	height:2em;
	}
}
@media only screen and (max-width: 375px)  and (min-height: 812px) {
	/* 主按鈕 */
	div.mainBtn{
		padding-top:10%;
	}
	div.mainBtn a{
		width:22%;
		height:5em;
		margin: 1em;
	}
}
@media only screen and (max-width: 360px) {
	/*按鈕遮罩*/
	div.btn_mask{
		top:2.2em;
	}
	/*按鈕遮罩*/
	/* MenuHover */
	nav.menuHover .menuHeader{
		height: 2.2em;
	}
	nav.menuHover a.mMenu_01,nav.menuHover a.mMenu_02,nav.menuHover a.mMenu_03,nav.menuHover a.mMenu_04{
	height: 3.45em;		
	}
	nav.menuHover a.mMenu_05,nav.menuHover a.mMenu_06{
		width: 48.7%;
		height: 3.5em;
	}
	
	/* 版頭 */
	header.mheader {
		height: 2.2em;
		/*border: 1px solid #000;*/
	}
	header.mheader .logo,nav.menuHover .mlogo {
		width: 50%;
		height: 2em;
		margin:.5% 0 0 0;
	}
	header.mheader .mMenu,nav.menuHover a.mMenu_close {
		height: 2.2em;
	}
	
	/* 廣告 */	
	div.mainPhoto{
		height:12.2em;
	}
	div.mainPhoto iframe{
		width:360px;
	}
/*	div.mainPhoto ul.list {
		height: 12.2em;
	}
	div.mainPhoto ul.list li {
		height: 12.2em;
	}*/

	/* 商品專區 */	
	section.product a{
		width:49.4%;
		height:9em;
	}
	h1.productTitle{
		height:1.5em;
		margin-bottom:2%;
	}
		
	/* TVC專區 */	
	h1.tvcTitle{
		height:1.5em;
		margin-bottom:2%;
	}
	.video-container {
		margin-bottom: 5px;
	}
	
	section.tvc a{
	width:23.5%;
	height:2em;
	}
	
}
@media only screen and (max-width: 320px) {
	/*按鈕遮罩*/
	div.btn_mask{
		top:2em;
	}
	/*按鈕遮罩*/
	/* MenuHover */
	nav.menuHover .menuHeader{
		height: 2em;
	}
	nav.menuHover a.mMenu_01,nav.menuHover a.mMenu_02,nav.menuHover a.mMenu_03,nav.menuHover a.mMenu_04{
	height: 3.05em;		
	}
	nav.menuHover a.mMenu_05,nav.menuHover a.mMenu_06{
		width: 48.6%;
		height: 3.5em;
	}
	
	/* 版頭 */
	header.mheader {
		height: 2em;
		/*border: 1px solid #000;*/
	}
	header.mheader .logo,nav.menuHover .mlogo {
		width: 45%;
		height: 1.5em;
		margin:1% 0 0 0;
	}
	header.mheader .mMenu,nav.menuHover a.mMenu_close {
		height: 2em;
	}
	/* scroll */
	div.btn_scroll{
		background-size: contain;
		width:15%;
		height:1.5em;
		margin-left:-7.5%;
		bottom:1%;
	}
	/**/
	/* 廣告 */	
	div.mainPhoto{
		height:11em;
	}
	div.mainPhoto iframe{
		width:320px;
	}
/*	div.mainPhoto ul.list {
		height: 11em;
	}
	div.mainPhoto ul.list li {
		height: 11em;
	}*/
	
	/* 主按鈕 */
	div.mainBtn{
		padding-top:1.5em;
		padding-left:4%;
		padding-right:4%;
		text-align: center;
	}
	div.mainBtn a{
		background-size:contain;
		width:18%;
		height:4em;
		margin: .35em;
	}
	
	/* 商品專區 */
	section.product{
		margin:1em 4% 0;
	}
	section.product a{
		width:49%;
		height:8em;
	}
	h1.productTitle{
		height:1.5em;
		margin-bottom:2%;
	}
		
	/* TVC專區 */
	section.tvc{
		margin:1em 4% 0;
	}
	h1.tvcTitle{
		height:1.5em;
		margin-bottom:2%;
	}
	.video-container {
		margin-bottom: 5px;
	}
	
	section.tvc a{
	width:23.2%;
	height:2em;
	}
	
	/*********** footer ***********/
	.mftr p.ftMobile{font-size: .6em;}
}