@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

sup {
	vertical-align: super;
	font-size: 50%;
}
dt, dd				{display: inline;}
.verticle_center    {position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; display: table;}
.verticle_center p  {display: table-cell; vertical-align: middle; text-align: center; word-break: break-all;}
.poz_center         {position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;}
.full               {position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;}
.full_x             {position: relative; width: 100%; left: 0px; top: 0px; display: block;}
/*body{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}*/

.limit {
  position: relative;
  width: 0px;
  height: auto;
  left: 0px;
  top: 0px;
  margin: 0px auto;
}

.wrapper{
	position: relative;
	font-family: "Noto Sans TC","sans-serif","微軟正黑體",Microsoft JhengHei,Microsoft YaHei,Century Gothic,Helvetica,Arial,Verdana,新細明體;
	background-image: url("../Images/bg_pc.jpg");
	background-size: 100%;
	background-position: center top;
	background-attachment: fixed;
	color: #000;
}

.body_fixed{
	position: fixed;
	z-index: 9999999;
}


/*---sub_nav---*/

.sub_nav			{position: relative; text-align: center;}
.sub_nav_wrap		{position: relative; width: 100%; max-width: 790px; margin: 0 auto; padding: 1% 0;}
.sub_nav_wrap:after	{content: ''; display: block; clear: both;}
.sub_nav_wrap > .line {border-right: 1px #bbbbbb solid;}
.sub_nav_btn		{position: relative; width: 50%; font-size: 180%; float: left; cursor: pointer;}
#rolltotab_01		{border-right: 1px #fff solid;}

.sub_nav_up			{background: #f3f3f3;}
.sub_nav_down		{background: #00b0f0; color:#fff;}
.arrow_btn			{position: absolute;}
.arrow_btn_l		{top: 0; left: 0; width: 4%; margin: 2.5% 0 0 8%;}
.arrow_btn_r		{top: 0; right: 0; width: 4%; margin: 2.5% 8% 0 0;}

/*---content---*/

.content_main		{position: relative; width: 100%; max-width: 790px; margin: 0 auto; padding-bottom: 10%; background-color: #fff;}
.sec_wrap			{position: relative;}
.sec_title			{position: relative; text-align: center; padding-top: 9%;}
.sec_title p 		{font-size: 300%; color: #00b0f0; letter-spacing: 5px; font-weight: 300;}
.sec_subtitle		{position: relative; text-align: center; letter-spacing: 2px; line-height: 1.6; font-size: 130%;}
.title_img			{position: relative; width: 83%; margin: 2% 0;}
.dr_photo_wrap		{position: relative; width: 44%; margin: 5% auto 0 auto;}
.dr_photo_wrap	img {display: block;}
.product_test		{position: absolute; top: 0;left: 0;width: 100%;opacity: 0.5;}

.title 				{position: relative; font-size: 360%; color: #000;text-align: center; padding-top: 10%;}
.title span 		{color: #00b0f0;}
.subtitle 			{position: relative; margin-bottom: 8%; text-align: center; font-size: 220%;  font-weight: 700; letter-spacing: 0.8em; text-indent :0.8em; color: #000;}
.subtitle p 		{display: inline; font-weight: 700;}
.subtitle span 		{font-weight: 500}
.subtitle_padding 	{padding: 0 10%;}
.keyV 				{position: relative; margin: 3% auto; }

.proitem_head		{	position: relative;
						width: 86%;
						margin: 0 auto;
						padding-bottom: 16%;
						background-image: url("../Images/special/sp_prohead_bg.png");
						background-repeat: no-repeat;
						background-size: 100% auto;
					}
.proitem_body		{	position: relative;
						width: 86%;
						margin: 0 auto;
						background-image: url("../Images/special/sp_probody_bg.png");
						background-repeat: repeat-y;
						background-size: 100% auto;
						text-align: center;
					}
.proitem_foot		{	position: relative;
						width: 86%;
						margin: 0 auto;
						padding-bottom: 10%;
						background-image: url("../Images/special/sp_profoot_bg.png");
						background-repeat: no-repeat;
						background-size: 100% auto;
					}

.product_item					{position: relative; width: 100%; padding-bottom: 10%; font-size: 165%;}
.probody_title 					{position: relative; width: 70%; margin: 0 auto; text-align: center; font-size: 200%; color: #00b0f0;}
.proimg 						{position: relative; width: 100%; }
.proincludes 					{position: relative; display: inline-block; text-align: left; margin-top: 2%; margin-left: 2%; }
.proincludes_wrap 				{position: relative; width: 80%; margin: 0 auto;}
.proprice 						{position: relative; text-align: center; font-size: 200%; color: #00b0f0;}
.proprice span					{font-size: 50%; color: #989898;}

.product_item .more 			{	position: relative;
									width: 36%;
									top: 0;
									left: 0;
									margin: 3% auto;
									padding: 0.8% 4%;
									text-align: center;
									color: #fff;
									background-color: #00b0f0;
									font-size: 150%;
									border-radius: 200px;
								}
.proicon						{position: relative; width: 12%; top: 0; left: 0; display: inline-block;}
.proicon img   					{position: relative; width: 100%;}
.free_icon 						{margin: 50% 0 49% 0;}
.free_icon_s 					{margin: 11% 0 20% 0;}
.highlight_text 				{color: #00b0f0;}


/*---loading---*/

#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: #fff;
  z-index: 100;
}

#loading_line {
  position: absolute;
  width: 0%;
  height: 2px;
  left: 0px;
  top: 0px;
  background: #5cd3d3;
  -moz-transition: width 1s ease 0s;
  -o-transition: width 1s ease 0s;
  -webkit-transition: width 1s ease;
  -webkit-transition-delay: 0s;
  transition: width 1s ease 0s;
}

#loading_pic {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}

#loading_pic img {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  width: 30%;
  height: 30%;
}