@charset "utf-8";

/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
 }
 /*
文字設定
 */
.headline_LA{
	color: #E4007F;
	font-size:100px;
	font-weight: bolder;
	display:block;
	width:100%;
	text-align:center;
}
.headline_MI{
	float:left;
	color: #FFFFFF;
	padding:2%;
	background-color: #E4007F;
	font-size:40px;
	font-weight: bolder;
	width:96%;
}
.headline_MI_L{
	float:left;
	color: #FFFFFF;
	padding:2%;
	background-color: #E4007F;
	font-size:42px;
	text-align:center;
	font-weight: bolder;
	width:96%;
}
.content_LA{
	color: #C30D23;
	font-size:66px;
	float:left;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	display:block;
	width:100%;
	text-align:center;
}
.content_LA_LL{
	padding:2%;
	color: #E60012;
	font-size:66px;
	float:left;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	display:block;
	width:96%;
}
.content_LA_S{
	float:left;
	margin-top:10px;
	color: #E60012;
	font-size:60px;
	font-weight: 900;
	display:block;
	width:100%;
	text-align:center;
}
.content_MI{
	text-align:center;
	margin:auto;
	color: #F39800;
	font-size: 42px;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: bolder;
	display:block;
	width:90%;
}
.content_non{
	font-family: 'Noto Sans TC', sans-serif;
	line-height:45px;
	padding:5%;
	font-size:30px;
	font-weight:bolder;
}
.content_ps{
	padding-bottom:2%;
	padding-right:5%;
	font-size:20px;
	float:right;
	font-weight:bolder;
}
.content_ing2{
	font-family: 'Noto Sans TC', sans-serif;
	padding: 2%;
	font-size: 30px;
	font-weight: bolder;
	line-height: 40px;
	border-color: #E4007F;
	border-style: solid;
	border-radius: 15px;
	width:86%;
	margin:5%;
}
.img_LEFT_50{
	line-height:40px;
	color:#6A3906;
	font-size:28px;
	font-weight:900;
}
.img_LEFT_50_yellow{
	background-color:#F8B62D;
	line-height:40px;
	color:#FFFFFF;
	font-size:28px;
	font-weight:900;
}
.footer, .footer a{
	text-align:center;
	font-size:25px;
	line-height:40px;
	color:#645f49;
}

.outer{
	    margin:0%;
	    width: 900px;
       	position: sticky;
		top:0;

        }



.inner{
            margin:0%;
            width:25%;
            height:70px;
	        text-align:center;
	        float: left;

        }
.target-fix {
    position: relative;
    top: -44px; // 偏移值
    display: block;
    height: 0;
    overflow: hidden;
}


  /*
文字設定
 */

body{
	margin:0;
}

.shop_buttom{
	width:100%;
	max-width:900px;
	margin:auto;
	bottom:0px;
	position:fixed;
	z-index:200;
}
.shop_buttom_bt{
	width:100%;
	float:right;
}
.lineFB{
	width:100%;
	max-width:900px;
	margin:auto;
	position:absolute;
	z-index:100;

}
.lineFB_bt{
	width:40px;
	height:40px;
	float:right;
}
.all{
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
	width: 100%;
	max-width: 900px;
	display:block;
	-webkit-box-shadow: 0 0 15px 6px #cccccc;
	-moz-box-shadow: 0 0 15px 6px #cccccc;
	box-shadow: 0 0 15px 6px #cccccc;

}

.all2{
	max-width: 720px;
	width: 100%;
	text-align:center;
    height:auto;
	margin:0 auto;
    padding:0px 0px;
	background: #fff ;
	border-top-style: solid;
	border-color: #acacac;
	border-width: 1px;

}

.bk_1{
	background-image: url(../images/ozio_new_bk1.jpg);
	background-repeat: repeat;
}
.bk_2{
	background-image: url(../images/ozio_new_bk2.jpg);
	background-repeat: repeat;
}
.gif_S{
	width:40%;
	margin:auto;
}
.content_ing{
	float:left;
}

.imgcut{
	padding-top: 0px;
	padding-bottom: 0px;
	display:block;
	position: relative;

}
.imgcut img{
	vertical-align: bottom;
}
.img_LEFT_40{
	width:40%;
	float: left;
	}
.img_LEFT_50{
	padding:2%;
	width:46%;
	float: left;
	}
.img_LEFT_50_yellow{
	padding:8%;
	width:32%;
	float: left;
	}
.img_LEFT_50_P{
	width:50%;
	float: left;
	}
.img_LEFT_60{
	width:60%;
	float: left;
	}
.img_LEFT_40 img,.img_LEFT_60 img,.img_LEFT_50 img{
	vertical-align: bottom;
	display:block;
	}
.howtouse{
	background-color:#F8B62D;
	width:100%;
	float:left;
}
.step{
	width:33%;
	float: left;
}
.step_P{
	margin:auto;
}

.clean{
	clear:both;
}
.footer{
	padding:2%;
	background-color:#FFFFFF;
	color:#645f49;
	width:96%;
}
.lastSpace{
	height:30px;
}


/**********button***************/

.button{
	position: relative;
    z-index: 999;
    width: 880px;
    margin: 0 auto;

}

.button_all{
	position: absolute;
    margin: 10% 0 0 0;
    right: 0;
    padding: 10px 0;
    float: left;
    background-repeat: no-repeat;
    width: 180px;

}

.button_e{
    width: 86px;
    height: 40px;
    float: left;
    margin-right: 2%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/btn-e2.png);
}

.button_t{
    width: 86px;
    height: 40px;
    float: left;
    margin-right: 2%;
    background-repeat: no-repeat;
    background-image: url(../images/btn-t1.png);
    background-size: 100%;
}


.button_t:hover{
    background-image: url(../images/btn-t3.png);
}

/**********button end***************/

@media screen and (max-width: 800px) {

/**********button***************/
.button{
	width: 100%;
	margin: 0;

}

.button_all{
	width: 19%;
    margin: 8% 1% 0 0;
}

.button_e{
    width: 0;
    height: 0;
    padding: 9% 24%;
    background-size: 100%;
}


.button_t{
	width: 0;
    height: 0;
    padding: 9% 24%;
    background-size: 100%;
}
/**********button end***************/


	.lastSpace{
		background:#FFFFFF;
	}
	.lineFB_bt{
	width:30px;
	height:30px;
	float:right;
}

	.outer{
	    margin:0%;
	    width: 100%;
       	position : fixed;

        }

.step{
	width:50%;
	float: left;
}
 /*
文字設定
 */
.headline_LA{
	padding:2%;
	color: #E4007F;
	font-size:40px;
	font-weight: bolder;
	display:block;
	width:96%;
	text-align:center;
}
.headline_MI{
	float:left;
	color: #FFFFFF;
	padding:2%;
	background-color: #E4007F;
	font-size:26px;
	line-height:40px;
	font-weight: bolder;
	width:96%;
}
.headline_MI_L{
	float:left;
	color: #FFFFFF;
	padding:2%;
	background-color: #E4007F;
	font-size:32px;
	text-align:center;
	font-weight: bolder;
	width:96%;
}
.content_LA{
	color: #C30D23;
	font-size:28px;
	float:left;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	display:block;
	width:100%;
	text-align:center;
}
.content_LA_LL{
	padding:2%;
	color: #E60012;
	font-size:26px;
	float:left;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	display:block;
	width:96%;
}
.content_LA_S{
	float:left;
	margin-top:10px;
	color: #E60012;
	font-size:28px;
	font-weight: 900;
	display:block;
	width:100%;
	text-align:center;
}
.content_MI{
	text-align:center;
	margin:auto;
	color: #F39800;
	font-size: 26px;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: bolder;
	display:block;
	width:90%;
}
.content_non{
	font-family: 'Noto Sans TC', sans-serif;
	line-height:40px;
	padding:5%;
	font-size:26px;
	font-weight:bolder;
}
.content_ps{
	padding-bottom:2%;
	padding-right:5%;
	font-size:20px;
	float:right;
	font-weight:bolder;
}
.content_ing2{
	font-family: 'Noto Sans TC', sans-serif;
	padding: 2%;
	font-size: 20px;
	font-weight: bolder;
	line-height: 30px;
	border-color: #E4007F;
	border-style: solid;
	border-radius: 15px;
	width:86%;
	margin:5%;
}
.img_LEFT_50{
	line-height:30px;
	color:#6A3906;
	font-size:20px;
	font-weight:900;
}
.img_LEFT_50_yellow{
	background-color:#F8B62D;
	line-height:20px;
	color:#FFFFFF;
	font-size:18px;
	font-weight:900;
}
.footer, .footer a{
	text-align:center;
	font-size:25px;
	line-height:30px;
	color:#FFFFFF;
}


  /*
文字設定
 */

	}

	img{
		width: 100%;
	}
	.new-btn00{
		position: absolute;
		bottom:5.5%;
		left:10%;
		width: 80%;
	}
	.new-btn01-1,.new-btn01-2{
		position: absolute;
		width: 38%;
		bottom:2%;
	}
	.new-btn01-1{
		left:7.5%;

	}
	.new-btn01-2{
		left:54%;
	}
	.new-btn02{
		position: absolute;
		bottom:5.5%;
		left:10%;
		width: 80%;
	}