@charset "utf-8";

/* basestyle
----------------------------------------------------------------------------*/
body,html{ width: 100%;
    font-family: Arial, "微軟正黑體","蘋果儷黑體","新細明體", Verdana, Helvetica, sans-serif; color: #686868; font-size: 50px; position: relative;}
body{ -webkit-tex50t-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;}
article{ position: relative; background-color: #fff;}
.wrapper{ width: 100%; position: relative; overflow: hidden;}
.container{ width: 88.8671875%; max-width: 910px; margin: auto; position: relative;}

/* header */
/*header{ background-color: #fff;}
header .logo{ width: 21.42857142857143%; position: absolute; left: 0; top: 0.34rem;}
nav li{ position: relative;}
nav li a{ line-height: 1.36rem; padding: 0 0.48rem; color: #2150c6; font-weight: bold; width: auto; position: relative;}
nav li:hover a, nav li.select a{ color: #fff; background-color: #2150c6;}
.before:before, .after:after{ content: ''; width: 1px; height: 0.6rem; background-color: #adddf2; position: absolute; top: 0.4rem;}
.before:before{ left: 0;}
.after:after{ left: 100%;}
nav li a:hover:before, nav li a:hover:after, nav li.select a:before , nav li.select a:after{ background-color: transparent;}
nav dl{ width: 243px; height: 61px; background: url('../images/subnav_bg.png') no-repeat 0 0; padding-top: 33px; position: absolute; top: 90%; left: -13%; margin-left: -55px; z-index: 5;
    opacity: 0; visibility: hidden; -webkit-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all .4s ease-out; transition: all .4s ease-out;}
nav li:hover dl{ -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible;}
nav dd{ height: 19px; border-right: 1px solid #2150c6;}
nav dd:last-child{ border-right: none; }
nav dd a{ width: 100%; height: 100%; padding: 0; -webkit-transition: none; transition: none;}
nav li:hover dd a{ background-color: transparent;}
.sub1{ width: 166px;}
.sub2{ width: 57px;}
.sub3{ width: 54px;}
.sub4{ width: 116px;}
.sub1 a{ background: url('../images/subnav.png') no-repeat 0 -3px;}
.sub2 a{ background: url('../images/subnav.png') no-repeat -166px -3px;}
.sub3 a{ background: url('../images/subnav.png') no-repeat -223px -3px;}
.sub4 a{ background: url('../images/subnav.png') no-repeat -282px -3px;}
.sub1 a:hover{ background: url('../images/subnav.png') no-repeat 0 -31px;}
.sub2 a:hover{ background: url('../images/subnav.png') no-repeat -166px -31px;}
.sub3 a:hover{ background: url('../images/subnav.png') no-repeat -223px -31px;}
.sub4 a:hover{ background: url('../images/subnav.png') no-repeat -282px -31px;}*/

.newitem{ display:inline-block; position: absolute; width: auto; /* height: 27px; background: url(../image/new_alt.gif) no-repeat top left;content: ""; */ top: 6px; right: 23px; }
/* footer */
/*footer{ background-color: #004098;}
footer .logo{ width: 1.42rem;}
footer li{ border-left: 1px solid #fff;}
footer li:first-child{ border-left: none;}
footer, footer li a{ color: #fff;}
footer li a:hover{ color: #adddf2;}*/

/* kv */
.kv picture img{ width: 210.989010989011%; margin-left: -55.49450549450549%;}

/* btnbox */
.btnbox{ font-size: 0;}
.btnbox .btn{ display: inline-block;}

/* index
----------------------------------------------------------------------------*/
.go{ width: 89.22222222222222%; position: relative; margin: auto;}
.go:before{ content: ''; width: 100%; height: 100%; background: url('../images/ind_go_hover.png') no-repeat 0 0; background-size: 100% auto;
    -webkit-transition: all .3s ease-out; transition: all .3s ease-out; position: absolute; top: 0; left: 0;}
.go a{ position: relative; z-index: 1;}
.go:hover:before{ -webkit-transform: translateY(-10px); transform: translateY(-10px);}
.content{ background: url('../images/store_bg.gif') repeat 0 0; position: relative; /*border-top: 1px solid #ff9630;*/}
#index .content .td{ width: 53%; padding-right: 5.824175824175824%;}
#index .content .td > img{ margin-top: -2.4rem;}
#index .content{ background: #fff; border-top: none;}
#index .btnbox{ text-align: center; position: relative; bottom: 0.4rem; }
#index .btn, #product_a4 .btn { width: 29%;}
#index .b1{ margin-left: 8%;}
#index .b2{ margin-left: 17%;}
#index .b3{ margin-right: 3%; }
#index .btn a, #product_a4 .btn a{ position: relative;}
#index .btn a:before, #product_a4 .btn a:before{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: all .4s ease-out; transition: all .4s ease-out;}
#index .btn a:hover:before, #product_a4 .btn a:hover:before{ opacity: 1;}
/* #index .b1 a:before{ background: url('../images/ind_btn_2.png') no-repeat 0 0; background-size: 100% auto;}
#index .b2 a:before{ background: url('../images/ind_btn_1.png') no-repeat 0 0; background-size: 100% auto;} */
#index .b3 a:before{ background: url('../images/ind_btn_hover.png') no-repeat 0 0; background-size: 100% auto; }
#index .product{ bottom: 0.8rem; left: 1.6rem; padding-bottom: 0; }
#index .comment{ color: #919191; font-size: 12px; position: absolute; bottom: 5px; right: -50px; transform-origin: 100% 100%; transform: scale(0.84, 0.84); }


/* store
----------------------------------------------------------------------------*/
#store{margin-top: 80px;}
#store .title{ width: 3.84rem;}
#store .icon{ width: 14.61538461538462%; top: 45%; left: 12%;}

.search .table{ width: 90%; max-width: 555px; margin: 0 auto;}
.search .th{ width: 6em; text-align: right;}
.search select{ width: 90%; height: 0.9rem; line-height: 0.9rem; border: 1px solid #dbdbdb; border-radius: 0.17rem; text-align: center; color: #52bbd9;}
#store .result .th, #store .result .td{ padding: 0.14rem 0.35rem; line-height: 2;}
#store .result .tr .th:first-child, #store .result .tr .th .td:first-child{ border-top-left-radius: 0.1rem; border-bottom-left-radius: 0.08rem;}
#store .result .tr .th:last-child, #store .result .tr .th .td:last-child{ border-top-right-radius: 0.1rem; border-bottom-right-radius: 0.08rem;}
#store .result .th{ background-color: #8dd1e6; color: #fff; font-weight: bold;}
#store .result .tr:nth-child(odd) .td{ background-color: #fff;}
#store .result .tr:nth-child(even) .td{ padding: 0.26rem 0.35rem;}
#store .result .td a{ color: #51a6cb;}
#store .result .td a:hover{ color: #6acffc;}

#store .result .search .th{
	background: none;
	color: inherit;
}
#store .result .search .th, #store .result .search .td{
	padding: 0;
}

#store .table.shadow{
	-webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
}
#store .table .bg_white{ background: #fff; }
#store .table .bg_gray{ background: #e1e1e1; }

#store .table .th{ box-sizing: border-box; }
#store .table .w_1{ width: 28.5%; }
#store .table .w_2{ width: 17.5%; }
#store .table .w_3{ width: 11%; }
#store .table .w_4{ width: 11.5%; }
#store .table .w_5{ width: 31.5%; }


/* promote
----------------------------------------------------------------------------*/
#promote{margin-top: 80px;}
#promote .icon{ width: 22.1978021978022%; top: 47%; left: 6%;}
#promote figure{ width: 84.61538461538462%; margin: auto; position: relative;}
#promote figure img{ position: relative; z-index: 1;}
#promote figure:before{ content: ''; width: 103.7662337662338%; height: 105.5%; background: url('../images/promote_shadow.png') no-repeat right bottom;
-webkit-background-size: 100% auto;
background-size: 100% auto;
position: absolute; top: 0; right: 0;}
/*#promote .content{ background: url('../images/promo_bg.gif') repeat left top; border-top: none; }*/


/* product_a3
----------------------------------------------------------------------------*/
#product_a3{margin-top: 80px;}
#product_a3 .icon{ width: 26.26373626373626%; top: 35%; left: 8.7%; z-index: 1; }
#product_a3 .title{ width: 5.16rem;}
.subtitle{ width: 9em; margin: auto; text-align: center; color: #ff8119; font-weight: bold; position: relative; bottom: -1px; background-color: #fff;}
.subtitle span{ position: relative; bottom: -0.4em;}
/*#product_a3 .table{ border: 1px dashed #74be3b; border-radius: 4px; background-color: #fff; padding: 0.1rem;}*/
/*#product_a3 .th{ width: 9em; border-top-left-radius: 4px; border-bottom-left-radius: 4px; line-height: 1.3; height: 1.85rem; font-weight: bold;}*/
#product_a3 .th{ text-align: center;/* width: 20%;*/ padding: .9em 0; border-right: 1px solid #fff;}
#product_a3 .innertable .td{ line-height: 1.5; text-align: center; width: 18%; border-bottom: 1px solid #d1d1d1;}
#product_a3 .innertable .border-none .td{ border-bottom: none; }
#product_a3 .innertable_sub .th.border-none{ border: none; }
#product_a3 .bg1{ background-color: #6cbb30;}
#product_a3 .bg2{ background-color: #fe7234;}
#product_a3 .bg3{ background-color: #209ef7;}
#product_a3 .comment{
	width: 85%;
	margin: auto;
	padding: 18px 23px;
	text-align: justify;
	box-sizing: border-box;

	color: #000;
	line-height: 1.7;
	letter-spacing: 2px;
	text-indent: -7px;

	border: 1px solid #ffdada;
	border-radius: 4px;
	background-color: #f8e7e7;
}
#product_a3 .comment span{ color: #e80a0a; }
.icon.absolute picture img{ width: 100%; margin-left: 0; }

.white{ color: #fff;}
.inner_box{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.2rem;
	background: #fff;
	position: relative;
	box-sizing: border-box;
    /*padding: 40px 25px;*/
	text-align: left;
	-webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);

	background-image: url(../images/gold_line.png);
	background-repeat: no-repeat;
	background-position: 0 bottom;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}


.inner_box span{ display: block; letter-spacing: 1px; text-align: justify;}

.inner_box .item{
	position: absolute;
}

.inner_box .list-img{ width: 35px; left: 20px; }

.inner_box .item.clip_1{ width: 44px; top: -0.6em; left: 5px; }
.inner_box .item.clip_2{ width: 44px; top: -0.6em; right: 5px; }

#product_a3 .font_blue{ color: #18abff; }
#product_a3 .font_green { color: #6cbb30; }
#product_a3 .font_orange{ color: #fe7234; }
/*#product_a3 .font_purple{ color: #8520f7; }*/
#product_a3 .font_purple{ color: #fe7234; }
.fnot_navy{ color: #155c9a; }
#product_a3 .font_gray{ color: #5f5f5f; }

.innertitle{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}

.innertitle .star{
	width: 1.3em;
	display: inline;
	vertical-align: sub;
	padding-right: 0.2em;
}

.inner_box .item.atom{ width: 91px; top: 0.2em; right: -0.7em; }

.mutiatom{
	width: 30%;
}

.table_icon{ width: 2rem; margin: 0 auto;}

.innertable_sub{
	position: absolute;
	top: 1.3em;
	left: 0;
	right: 0;
	background: #2150c6;
	color: #fff;
	/*box-sizing: border-box;*/
	width: 97.5%;
}

.innertable_sub .w_1{ width: 30%;}
.innertable_sub .w_2{ width: 17.5%;}
.innertable_sub .w_3{ width: 17.5%;}
.innertable_sub .w_4{ width: 17.5%;}
.innertable_sub .w_5{ width: 17.5%;}

.otter_l , .otter_r{
	position: absolute;
	width: auto;
	top: -0.45em;
}

.otter_l{ left: -0.44em; }
.otter_r{ right: -0.4em; }

.inner_list{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
}



/* product_a4
----------------------------------------------------------------------------*/
#product_a4{margin-top: 80px;}
#product_a4 .icon{ width: 26.5%; top: 35%; left: 7%; z-index: 1; }
#product_a4 .title{ width: 5.18rem;}
#product_a4 .content .container{ max-width: 754px;}
#product_a4 .font_green{ color: #559744; }
/*#product_a4 .table{ border: 1px dashed #74be3b; border-top: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: #fff; padding: 0 0.5rem; box-sizing: border-box;}*/
/*#product_a4 .table.header{ border: 1px dashed #74be3b; border-bottom: none; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 0.4rem 0 0 0;}*/
/*#product_a4 .th{ line-height: 1.3; font-weight: bold; position: relative;}*/
/*#product_a4 .th_left:before{ content: ''; width: 0.14rem; height: 113%; background: url('../images/product_a4_l.png') no-repeat 0 0; background-size: 100% 100%; position: absolute; bottom: 0; right: 100%;}*/
/*#product_a4 .th_right:before{ content: ''; width: 0.14rem; height: 113%; background: url('../images/product_a4_r.png') no-repeat 0 0; background-size: 100% 100%; position: absolute; bottom: 0; left: 100%;}*/
/*#product_a4 .td{ line-height: 2; border-bottom: 1px solid #c5c5c5;}*/
#product_a4 .bg1{ background-color: #6cbb30; width: 6em;}
#product_a4 .bg2{ background-color: #f9b127; width: 6em;}
#product_a4 .bg3{ background-color: #0f8ecf; min-width: 8em;}
#product_a4 .bg4{ background-color: #871bbf; width: 6em;}
#product_a4 .bg5{ background-color: #ea4353; width: 6em;}
#product_a4 .d1{ width: 6em;}
#product_a4 .d2{ width: 6em;}
#product_a4 .d4{ width: 6em;}
#product_a4 .d5{ width: 6em;}

#product_a4 .innertitle{ margin-left: 0; }
#product_a4 .inner_box{ width: 100%; }
#product_a4 .inner_box2.table .th{ width: 35%; letter-spacing: 1px;}
#product_a4 .inner_box2.table .td{ width: 65%; letter-spacing: 1px; }

#product_a4 .innertitle, #product_a4 .innertitle2{ color: #004098; }

#product_a4 .btn{ width: 20%; margin: auto; margin-top: 3%; }
#product_a4 .btn a:before{ background: url('../images/a4_btn_hover.png') no-repeat 0 0; background-size: 100% auto; }



.bg_blue{
	background: url('../images/bg_sq_blue.png') no-repeat left top;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}

.bg_green{
	background: url('../images/bg_sq_green.png') no-repeat left top;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}

.bg_orange{
	background: url('../images/bg_sq_orange.png') no-repeat left top;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
}

.inner_box2{
	/*width: 85%;*/
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	position: relative;
	box-sizing: border-box;
    /*padding: 40px 25px;*/
	text-align: left;
	-webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.3);
	border-radius: 5px;
}

.inner_box2 span{
	display: block;
	text-align: justify;
	letter-spacing: 1px;
}

.innertitle2 .star{
	width: 1.3em;
	display: inline;
	vertical-align: sub;
	padding-right: 0.2em;
}

#product_a4 .item{
	position: absolute;
	width: auto;
	z-index: 1;
}

#product_a4 .item_1{
	top: 0.35em;
	right: -0.6em;
}

#product_a4 .item_2{
	top: 0em;
    right: -0.8em;
}

#product_a4 .item_3{
	top: 0.3em;
    right: -0.8em;
}

#product_a4 .innertitle2{
	margin-top: -6%;
}

.innertitle2{
	margin-left: auto;
	margin-right: auto;
}

#product_a4 .inner_box2 span{
	font-size: 0.1rem;
	margin-left: 1%;
	vertical-align: top;
	display: inline;
}

  #product_a4 .innertable_sub .th{
	padding: 0.9em 0;
	text-align: center;
	border-right: 1px solid #fff;
}

#product_a4 .innertable_sub .border-none{
	 border-right: none;
}

#product_a4 .table_lineB{ border-bottom: 1px solid #d1d1d1; }

.product_a4_foto{ width: 98%; }


/* qa
----------------------------------------------------------------------------*/
#qa{margin-top: 80px;}
#qa .icon{ width: 22.30769230769231%; height: auto; top: 45%; left: 9%;}
#qa .title{ width: 3.32rem;}
#qa .content .container{ max-width: 772px;}
#qa .q{ width: 2.8rem; position: absolute; top: -0.1rem; left: -1rem;}
#qa .qr{ width: 0.2rem; position: absolute; bottom: 0.03rem; right: 0.05rem;}
#qa dt .table{ height: 1.8rem; background-color: #fff; border: 1px dashed #4f9fc5; color: #3893bf; font-weight: bold; line-height: 1.4; border-radius: 4px; padding: 0.05rem;}

#qa .q_title{ background: url('../images/q_title_bg.jpg') no-repeat center bottom;
-webkit-background-size: 100% auto;
background-size: 100% auto;
min-height: 2em;}
#qa .font_blue{ color: #3893bf;}
#qa .q_icon{ width: auto; position: absolute; top: -0.25em; left: -1em; }
#qa .qa_foto{ text-align: center; }
#qa .qa_foto img{ width: auto; display: inline; }
#qa .qa_tri{ width: 0.2rem; position: absolute; bottom: 0.1em; right: 0.1em;}


/* protect
----------------------------------------------------------------------------*/
#protect .icon{ width: 22.08791208791209%; top: 45%; left: 9%;}
#protect .content .container{ max-width: 752px;}
#protect article dl{ border: 1px dashed #74be3b; border-radius: 4px; background-color: #fff; box-sizing: border-box;}
#protect .color1{ color: #6cbb30;}
#protect .color2{ color: #f8c926;}
#protect .color3{ color: #f7872d;}




/* knowhow
----------------------------------------------------------------------------*/
#knowhow{
	margin-top: 80px;
}
#knowhow .title{
    width: 9rem;
}

#knowhow .icon {
    width: 22.08791208791209%;
    top: 45%;
    left: 9%;
}

#knowhow .inner_box{
	position: relative;
}

#knowhow .inner_box:before{
	content:"";
	display: block;
	width: 98%;
	height: 0.5rem;
	background: url('../images/knowhow_book_top.png') repeat-x left top;
	-webkit-background-size: auto 100%;
	background-size: auto 100%;
	position: absolute;
	top: -0.2rem;
	left: 0.05rem;
}

#knowhow .arti_title{
	color: #ff8119;
	font-weight: bold;
	line-height: 1.5;
	border-bottom: 2px solid #4fb0d2;
}

#knowhow .arti_title span{
	display: block;
	text-indent: 2.5rem;
}

#knowhow .arti{
	color: #000;
}

#knowhow .arti span{
	display: block;
	margin-bottom: 0.5rem;
}

#knowhow .arti font{
	color: #ff0000;
	font-weight: bold;
}

#knowhow .knowhow_peo{
    width: 5.7rem;
    position: absolute;
    top: -2rem;
    right: 0rem;
}

#knowhow .knowhow_pic_1{
    width: 2rem;
    position: absolute;
    top: 0.8rem;
    left: 0.7rem;
}

#knowhow .knowhow_pic_2{
    width: 4.5rem;
    position: absolute;
    bottom: 0.5rem;
    right: 0.7rem;
}


/* 本期活動已結束，敬請期待 */
.container p.nextTime{
	color: #18639d;
	margin-bottom: 1%;
	font-size: 0.4rem;
	font-weight: bold;
	text-align: center;
}


@media(max-width:1000px){
	#knowhow,#product_a3,#product_a4,#promote,#qa,#store{
		margin-top: 50px;
	}
}