@charset "utf-8";
body,html { margin:0; padding:0; height:100%; }

a { text-decoration:none;}
* { font-family:"微軟正黑體", Tahoma, simhei; margin:0; padding:0;}
img {border:0;}
input,textarea { font-size:100%;}


@media screen and (max-width: 1024px) {
body,html{font-size: 95%;}
}

.topbg{display: flex; padding:5px 30px 0; box-sizing: border-box; background-color:#5885b4; height:100px; box-shadow: 0 0 10px #555555;}
.top{ display:flex; margin:auto; color:#ffffff; width:100%; max-width:1366px;}

.logo{ display:flex;width: -moz-min-content; width: min-content;align-items: center; justify-content: left; color:#ffffff;}
.logo .img { margin-right:5px;}
.logo .name{ padding-top:10px; font-size:230%; letter-spacing:1px; margin-left:1px;  font-weight:600; font-style:italic; line-height:80%; white-space:nowrap;}
.logo .url{font-size:35%; display:block; letter-spacing:10px; margin-left:10px; text-align:center}

.top .slogan{ display:flex; flex: auto; font-size:150%; font-weight:200;padding-left:60px; padding-bottom:10px; align-items:flex-end; }

.top .menu{ display:flex;align-items:flex-end; padding-bottom:10px; }
.top .menu a{ display:inline-table;  padding:0px 15px; color:#ffffff; font-size: 105%; line-height:35px; font-weight: 600; margin-right:10px;}
.top .menu a:last-child{ margin-right: auto;}
.top .menu a.bc1{ background-color:#84a136;}
.top .menu a.bc2{ background-color:#db9315;}
.top .menu a.bc3{ background-color:#d2308a; padding-left:5px; font-size:95%;}
.top .menu a.bc3::before{ content:""; display:inline-table; float:left; vertical-align:middle; width:35px; height:35px; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icon-QQ.png); background-size:27px;}
@media screen and (max-width: 1024px) {
.topbg{display: flex; padding:5px 10px 0; box-sizing: border-box; background-color:#5885b4; height:100px; box-shadow: 0 0 10px #555555;}
.logo .img img{ width: 80px;}
.top .slogan{ padding-left:10px;}
.top .menu a { padding:0 5px; margin-right:5px;}
.top .menu a.bc3{ padding-left:2px;}
}
@media screen and (max-width: 720px) {
.topbg{ height:80px;}
.logo .img img{ width: 60px;}
.logo .name{ font-size:190%;}
.logo .url{  letter-spacing:5px; }
.top .slogan{ display:flex; flex: auto; text-align: right; font-size:130%; font-weight:200;padding-left:0; padding-bottom:10px; justify-content: flex-end; align-items:flex-end; }
.top .menu{position: fixed; display: flex; background-color: antiquewhite; bottom: 0; left: 0; width: 100%; align-items:flex-end; padding-bottom:0; z-index: 2; }
.top .menu a {flex: 50%; padding:3px 0;  height: 35px; display: flex;  align-items: center; justify-content: center; margin: auto;}
}



/*內容區*/
.main{position: relative; text-align: center; max-width: 1366px;box-sizing: border-box; margin: auto; padding-top: 3%;  padding-bottom: 5%; min-height:calc(100% - 200px ); }
@media screen and (max-width: 1024px) {
.main{ padding: 10% 2%;}
}
@media screen and (max-width: 720px) {
 .main{ min-height:calc(100% - 231px) }
}


.news{ display: flex; color: #eb1212; align-items: center; justify-content: center; line-height: 150%; text-align: left; margin-bottom: 2%;}
.news i{font-size: 350%; color: #dc6f6f; padding-right: 10px;}
@media screen and (max-width: 1024px) {
.news{ font-size: 100%; margin-bottom: 5%; }
}
.title{ font-size: 300%; color: #555555; font-weight: 200;}
@media screen and (max-width: 1024px) {
.title{ font-size: 250%;}
}

/*首頁大按鈕*/
.indexbigbtn { display: flex; margin-top: 2%; justify-content: center;}
.indexbigbtn a {display: flex;  min-width: 300px; min-height: 120px; flex-direction: column; align-items: center; justify-content: center; font-size: 200%; color: #ffffff; background-color: rgba(0,0,0,0.4); border-radius: 10px; box-shadow: 0 5px 10px #999999; margin-left: 40px; flex-wrap: wrap; font-weight: 600;}
.indexbigbtn a:first-child{margin-left: 0;}
.indexbigbtn a:hover{ background-color: rgba(0,0,0,0.5);}
.indexbigbtn a .s{font-size: 50%;}

@media screen and (max-width: 720px) {
.indexbigbtn a { min-width: 40%; margin-left: 20px; font-size: 180%;}
}

/*商品按鈕*/
.productbtn { display: flex; margin-top: 1%; justify-content: center;}
.productbtn a {display: flex;  min-width: 200px; min-height: 80px; flex-direction: column; align-items: center; justify-content: center; color: #5885b4; font-size: 160%; border-radius: 10px; margin-left: 30px; border:3px #dddddd solid; opacity: 70%; position: relative; font-weight: 600;}
.productbtn a:first-child{margin-left: 0;}
.productbtn a::after{ display: block; background-color: #f5f5f5; position: absolute; left: 10px; bottom: 10px; content: ""; width: 20px; height: 20px; border:1px #aaaaaa solid;}
.productbtn a i{display: none;color: #ff0000; position: absolute; font-size: 130%; left: 5px; bottom: 5px; z-index: 2;}
.productbtn a.hover {opacity: 100%;  border:5px #5885b4 solid;}
.productbtn a.hover i{display: block; }
.productbtn a.hover::after{background-color: #ffffff;}
.productbtn a:hover{}
.productbtn a .s{font-size: 90%; color: #C52D30; font-weight: 400;}
@media screen and (max-width: 720px) {
.productbtn a { min-height:60px; flex:auto; min-width:inherit;margin-left: 5px; border:2px #dddddd solid;font-size: 160%; line-height:110%; }
.productbtn a i{ font-size: 110%; left: 2px; bottom: 2px;}
.productbtn a::after{ width:12px; height:12px; left:5px; bottom:5px;}
.productbtn a.hover {border:3px #5885b4 solid;}
	}


/*警告文字*/
.w1{ display: inline-table; margin-top: 1%; border:2px #ff0000 dotted;  color: #ff0000; border-radius: 5px; padding: 3px 10px; min-width: 500px;}
.w1 i{margin-right: 5px;}
@media screen and (max-width: 720px) {
.w1{min-width: 100%; box-sizing: border-box; padding:10px 0; font-size:120%;}
	}

/*購買表格*/
.buytab { display: flex; flex-wrap: wrap;margin: auto;width: 650px ; margin-top: 2%;}
.buytab .l{ flex:13%; font-size:105%; white-space: nowrap; text-align: left; min-height:50px; line-height:33px;}
.buytab .r{ flex:87%; flex-wrap: wrap; text-align: left; }
.buytab .name{font-size: 170%; line-height: 110%; font-weight: 400; color:#a0a0a0; margin-left:10px;font-style: italic;}
.buytab .price{font-size: 180%;line-height: 110%; font-weight: 400; color: #ff0000;font-style: italic;}
.buytab .w2 { display: block; font-size:90%; color: #ff0000; text-align: left;}
.buytab input {display:inline-table;box-sizing: border-box; background-color:#eeeeee; outline: none;border-width: 0px 0px 1px 0px;color: #0686a2;border-color: #bbbbbb;padding: 2px 3px;height: 33px;}
.buytab .r.quantity input{ width:40px; font-size:130%; text-align:center; margin:auto 5px;}
.buytab .r.quantity i { font-size:140%; color:#cccccc; cursor:pointer;}
.buytab .r.tel input{ width:400px; font-size:110%; padding:0 10px; }
@media screen and (max-width: 720px) {
.buytab {width: 90% ; margin-top:5%;}
.buytab .l{ flex:20%; min-height:45px;}
.buytab .r{ flex:80%; min-height:45px;}
.buytab .r.tel input{ width:200px; font-size:110%; padding:0 10px; }
	}

/*付款方式*/
.buytab .buy_type {margin-top: 2%;}
.buytab .buy_type .type{ position:relative;  display:inline-table; margin-right:60px; margin-bottom: 2%; cursor:pointer;opacity: 60%;}
.buytab .buy_type .type:hover{opacity: 100%;}
.buytab .buy_type .type img{ height:60px; padding-left:20px; }
.buytab .buy_type .type i{ display:none; color: #ff0000; position: absolute; font-size: 150%; left: -2px; top: 15px; z-index: 1;}
.buytab .buy_type .type.hover{ opacity: 100%;}
.buytab .buy_type .type.hover i{ display:block;}
.buytab .buy_type .type::after{ display: block; background-color: #f5f5f5; position: absolute; left: 0px; top:20px; content: ""; width: 15px; height: 15px; border:1px #aaaaaa solid;}
@media screen and (max-width: 720px) {
.buytab .buy_type {margin-top: 5%;}
	}
/*付款方式-小標籤*/
.buytab .buy_type .type .stag span{ position:absolute; font-size:80%; top:0px; right:-5px; transform: translateX(100%); height:16px; padding:0px 2px 0 1px; display:block; color:#ffffff; z-index: 1;}
.buytab .buy_type .type .stag span:nth-child(2){ top:17px;}
.buytab .buy_type .type .stag span:nth-child(3){ top:34px;}
.buytab .buy_type .type .stag span::before{content:""; left:-5px; position:absolute; width: 0px; height: 0px; border-style: solid; border-width: 8px 5px 8px 0px;}
.buytab .buy_type .type .stag span.t1{ background-color:#ff0000;}
.buytab .buy_type .type .stag span.t1::before{ border-color: transparent #ff0000 transparent transparent;}
.buytab .buy_type .type .stag span.t2{ background-color:#008600;}
.buytab .buy_type .type .stag span.t2::before{ border-color: transparent #008600 transparent transparent;}
.buytab .buy_type .type .stag span.t3{ background-color:#0000ff;}
.buytab .buy_type .type .stag span.t3::before{ border-color: transparent #0000ff transparent transparent;}

/*送出大按鈕*/
.bigbtn { display:inline-table; background-color: #d24949;border-radius: 15px;box-shadow: 0 5px 5px #aaaaaa;  padding:10px 35px; color:#ffffff; font-size: 150%; font-weight: 600; margin-top: 1%;}
@media screen and (max-width: 720px) {
.bigbtn {padding:8px 30px; margin-top:5%;}
}


/*查詢頁面*/
.searchtab {display:inline-table;}

.searchtab .tel{ position: relative;margin: 5% auto auto; display: inline-table; text-align:left; }
.searchtab .tel input {display:inline-table;box-sizing: border-box; background-color:#eeeeee; outline: none;border-width: 0px 0px 1px 0px;color: #0686a2;border-color: #bbbbbb;padding: 2px 40px;height: 35px; float: left; width: 450px;}
.searchtab .tel i.fx{position: absolute; font-size: 160%; color: #aaaaaa; left: 5px; top: 6px;}
.searchtab .tel .btn{ display: inline-table; height: 35px; background-color: #999999; color: #ffffff; line-height: 35px; padding: 0 10px;}
.searchtab .tel .w2{ text-align: left; margin-top: 5px; color: #ff0000;}

.searchtab .result{ margin-top:8%; text-align:left; color:#666666; line-height:180%;}
.searchtab .result h2{ color:#ff0000; display:block; text-align:center;}
.searchtab .result h2 a{ color:#ff0000; text-decoration:underline;}
.searchtab .contact{ display:block; width:150px; background-color:#fca95a; color:#ffffff; font-weight:600; margin:2% auto; font-size:130%; text-align:center; padding:5px 0;}
.searchtab .ckms{ display:inline-table; font-size:110%; line-height:25px; height:25px; border-radius:15px 0 0 15px; padding:0 10px 0 10px; color:#ffffff;  background-color:#5a96d2;outline:none; border:0; width:250px;}
.searchtab .copy{ display:inline-table; font-size:110%; line-height:25px; height:25px; border-radius:0 15px 15px 0; background-color:#999999; color:#ffffff;padding:0 10px 0 8px;  cursor:pointer;}
.searchtab .w2{ margin-bottom:10px; }
.searchtab .w2 .s{ font-size:90%; color:#E60000;}
.searchtab .ok{ color:#00BF00; font-weight:600;}
.searchtab .remove{ color:#ff0000; font-weight:600;}
@media screen and (max-width: 720px) {
.searchtab .tel input { width:300px;}
.searchtab .result{ font-size:110%; max-width:95% ; margin: 8% auto;}
.searchtab .result h2{ font-size:130%;}
.searchtab .tel .w2{ font-size:110%;}
.searchtab .mbr{ display:block;}
.searchtab .result .mh{ display:none;}
.searchtab .ckms,
.searchtab .copy{ font-size:110%;height:35px; line-height:35px; }
.searchtab .ckms{ margin-bottom:5px; width:220px;}
.searchtab .copy{ padding: 0 12px 0 6px;}
	}



/*footer*/
.footer{display: flex; align-items: center; justify-content: center; font-size: 110%; font-weight: 600; height: 100px; background-color: #6c7681; color: #ffffff; }

@media screen and (max-width: 720px) {
.footer{ padding-bottom:51px;}
	}