/* 
@media (min-width:500px) {格式} 意指 套用格式 寬最少要500px  或說 當寬度在 最小值以上時 套用格式
@media (max-width:500px) {格式} 意指 套用格式 寬最多到500px  或說 當寬度在 最大值以下時 套用格式
*/

html { font-size: 24px; }





@media (min-width:1001px) {html { font-size: 20px; } .flexitem { width: 23.5%; } .video { width: 31%; } #wrapper { width: 1024px; }}
@media (max-width:1000px) {html { font-size: 20px; } .flexitem { width: 23%;   } .video { width: 31%; }}
@media (max-width:800px)  {html { font-size: 20px; } .flexitem { width: 22.5%; } .video { width: 30%; }}
@media (max-width:600px)  {html { font-size: 18px; } .flexitem { width: 29.5%; } .video { width: 46%; }}
@media (max-width:400px)  {html { font-size: 16px; } .flexitem { width: 45%;   } .video { width: 100%; } .imgwrap {height: 80px !important;}}
@media (max-width:300px)  {html { font-size: 12px; } .flexitem { width: 44%;   } }
@media (max-width:200px)  {html { font-size: 12px; } .flexitem { width: 100%;  } .imgwrap {height: 140px !important;}}







/*
@media (min-width:1001px) {html { font-size: 20px; } .flexitem { width: 14.7%; } .video { width: 31%; } #wrapper { width: 1024px; }}
@media (max-width:1000px) {html { font-size: 20px; } .flexitem { width: 17%;   } .video { width: 31%; }}
@media (max-width:800px)  {html { font-size: 20px; } .flexitem { width: 17%;   } .video { width: 30%; }}
@media (max-width:600px)  {html { font-size: 18px; } .flexitem { width: 21%;   } .video { width: 46%; }}
@media (max-width:400px)  {html { font-size: 16px; } .flexitem { width: 29%;   } .video { width: 100%; }}
@media (max-width:300px)  {html { font-size: 16px; width: 300px; }}
*/

body {
    font-family: "Microsoft YaHei", "Microsoft JhengHei", "PMingLiU", "Helvetica Neue", Helvetica, Arial, "Century Gothic", sans-serif;
    line-height: 1.6;
    color: #555;
}

a, a:active, a:hover, a:visited { text-decoration:none; color: inherit; color: #27b; }
a:hover { border-bottom: 0.2rem solid #da2a8a; }
img { width: 100%;}

.none, .none:hover {
    border: none !important;
    background-color: inherit !important;
    color: inherit !important;
}

.taj { text-align: justify; }
.tac { text-align: center}
.tar { text-align: right}

.imgwrap { /* */ }

.w25  { width: 25%; }
.w33  { width: 33%; width: 13rem;}
.w50  { width: 50%; }
.w60  { width: 60%; }
.w70  { width: 70%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

.m5  { margin: 5px}
.m5t { margin-top:    5px}
.m5b { margin-bottom: 5px}
.m5l { margin-left:   5px}
.m5r { margin-right:  5px}

.p5   { padding: 5px}
.p5t  { padding-top :   5px}
.p5b  { padding-bottom: 5px}
.p5l  { padding-left:   5px}
.p5r  { padding-right:  5px}

.p20 { padding: 20px}

.li-decimal { margin: 0 0 0 16px; font-weight:400; list-style-type:decimal; }
.li-disc    { margin: 0 0 0 16px; font-weight:400; list-style-type:disc; }
.li-none    { margin: 0 0 0 16px; font-weight:400; list-style-type:none; }
.li-lalpha  { margin: 0 0 0 16px; font-weight:400; list-style-type:lower-alpha; }

.bdr {
    border: 0.1rem solid #ddd;
    padding: 2px 20px;
    margin: 5px 0;
}

.bdr:hover {
/*    border: 0.1rem solid #ddd;
    padding: 2px 20px;
    margin: 5px 0;*/
    background-color: bisque;
}

#gotop {
    position: fixed;
//    right: 5px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff !important;
    background-color: #84BD00;
    text-align: center;
    font-size: 0.75rem;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
    z-index: 1001;
    margin-Left: 10px;
    display: none;
}

.gw {width: 10rem !important; } /* gotop加寬 */
.gt {color:#07f; font-size:2rem;} /* gotop ▲ 使用*/












#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
//    width: 30rem;
}

.navbar {
    font-size: 1.5rem;
//    text-align: center;
    margin: 0px 0px 15px 0px;
    background-color: #4e7100;
    padding: 10px;
    color: #fff;
}

.navbar a { color: #ffffff; }

#banner {
    text-align: center;
    font-size: 1.4rem;
    color: #4e7100;
}

.container {
    margin:0 auto;
    padding:0;
}

.crumb {
    text-align: center;
    font-size: 1rem;
    margin: 0px 0px 15px 0px;
}

.crumb a { color: #4e7100; }

.section-contents {
    font-size: 1rem;
    text-align:left;
    margin:0px auto;
    padding:5px 10px;
    padding: 0.5rem 1rem 0 1rem;
}

.section-contents h1 {
    margin: 0.5rem 0 1.5rem 0;
    height: 2.4rem;
    border-bottom: 0.2rem solid #ddd;
}

.section-contents h1 span {
    display: inline-block;
    padding: 0.2rem;
    font-size: 1.6rem;
    color: #4e7100;
    height: 2rem;
    border-bottom: 0.2rem solid #4e7100;
}


.flexwrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
.flexnowrap { display: flex; flex-wrap: nowrap; }

.flexitem {
/*    width: 6.3rem;*/
    padding: 0.2rem;
    margin: 0.3rem 0.2rem 0.3rem 0;
    border: 1px solid #ccc;
    text-align: center;
}
.flexitem:hover {
//    border: 1px solid #42a0f3;
    background-color: #eee;
    color: #fff;
}
.flexitem a { color: #555; border: 2; text-decoration:none; }

.item-title {
    font-size:0.9rem;
    font-weight:bold;
//    color: #6f7678;
    line-height: 110%;
    margin: 0.5rem 0 0.3rem 0;
}

//.hcfff:hover { color:#fff; } /* hover color #fff */

.item-txt {
    font-size: 0.8rem;
    line-height: 150%;
    margin: 0;
    padding: 0px 0.4rem;
}





.img-circle {
    width: 100%;
    border-radius: 50%;
    border: 0.1rem solid #ddd;
    transition: all .2s ease-in-out; /* 動畫 */
    -o-transition: all .2s ease-in-out; /* 動畫 */
}

/*
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
*/

/*
.block {
    padding: 10;
    box-shadow: 0px 0px 3px 1px #999999;
    margin-bottom: 30;
}
*/


.wrap-line {
    width: 100%;
    margin: 2rem 0 2rem 0;
    border-bottom: 0.1rem dotted #ccc;
}


/***************|
|*   wrap 01   *|
|**************/

.wrap01 {
    font-weight: 300;
//    padding: 0 0 30px 0;
//    border-bottom: 2px dotted #ccc;
}

.wrap01 .title {
	display: block;
	color: #990000;
	font-size: 1.4rem;
	padding-bottom: 8px;
	font-weight: 500;
}
.wrap01 .title2 {
    display: block;
    color: #d90;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 30px 0 5px;
}

.wrap01 .title3 {
    color: #c07;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 30px 0 5px 0;
}

.wrap01 .title4 {
    color: #2aa; 
    font-weight: bold;
}

.wrap01 .content {
	display: block;
	width: 65%;
	color: #fff;
	font-size: 16px;
	line-height: 25px;
	padding: 23px 0 0 47px;
	margin: 0; 
}

.wrap01 .content table td {
	/* color: #fff; */
	/* font-size: 16px; */
	/* line-height: 25px; */
}


/***************|
|*   wrap 02   *|
|**************/

.wrap02 {
    font-weight: 200;
    color: #fff;
    padding: 22px 100px 30px 43px;
    margin: 30px 0px 50px 0px;
}
.wrap02 .title {
    display: block;
    font-size: 1.4rem;
    padding-bottom: 20px;
    font-weight: 500;
    line-height: 1.3;
}
.wrap02 .stitle {
    display: block;
    color: #DAA520;
    font-size: 1.2rem;
    font-weight: 400;
    padding: 30px 0 5px;
}
.wrap02.bg02 {	background: #39501c url(../img/康園品牌02.jpg) 100% 0 no-repeat; }
.wrap02.bg03 {	background: #070506 url(../img/康園品牌03.jpg) 100% 0 no-repeat; }
.wrap02.bg04 {	background: #134398 url(../img/康園品牌04.jpg) 100% 0 no-repeat; }
.wrap02.bg05 {	background: #756325 url(../img/康園品牌05.jpg) 100% 0 no-repeat; }
.wrap01.bg06 {	background: #ffffff url(../img/康園品牌06.jpg) 100% 0 no-repeat; color:#333; padding: 0px 25% 0 0; border:0;}
@media (min-width:300px)  {
    .wrap02.bg02 {	background: #39501c url(../img/康園品牌02.jpg) 50% 0 no-repeat; }
    .wrap02.bg03 {	background: #070506 url(../img/康園品牌03.jpg) 50% 0 no-repeat; }
    .wrap02.bg04 {	background: #134398 url(../img/康園品牌04.jpg) 50% 0 no-repeat; }
    .wrap02.bg05 {	background: #756325 url(../img/康園品牌05.jpg) 50% 0 no-repeat; }
    .wrap01.bg06 {	background: #ffffff url(../img/康園品牌06.jpg) 50% 0 no-repeat; color:#333; padding: 0px 25% 0 0; border:0;}
}


/***************|
|*   wrap 03   *|
|**************/

.wrap03 {
    box-shadow: 0px 0px 3px 1px #999999;
    margin-bottom: 30;
    padding: 15px;
}
.wrap03 .title {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: bold;
    border-bottom: 2px solid #20a050;
    margin: 0 0 5 0;
}
.wrap03 .stitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: #6f7678;
}



















#M_brand .M_brand_wrap_02 {
	display: block;
	width: 100%;
	/*background:url(../images/products/P_0101.jpg) 100% 0 no-repeat;*/
	font-size: 15px;
	line-height: 25px;
	padding: 50px 0 0;
	margin: 0;
}
@media (max-width: 1024px) {
	#M_brand .M_brand_wrap_02 {
		background:url(../images/products/) 100% 0 no-repeat;
	}
}

#M_brand .M_brand_wrap_02 .title {
	display: block;
	color: #990000;
	font-size: 18px;
	padding-bottom: 8px;
}
#M_brand .M_brand_wrap_02 .stitle {
	display: block;
	color: #8f6201;
	font-size: 16px;
	font-weight: bold;
	padding: 30px 0 5px;
}



#footer {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 100%;
    font-size: 0.75rem;
    cursor: pointer;
    z-index: 1001;

    color:#fff;
    background: #000;
/*    text-align: center;*/
    margin-top: 6rem;
}




















/*
~539 : 依寬
540-719 : 540
720-959 : 720
960-1139 : 960
1140~ : 1140
*/

//@media (min-width: 768px)  {.container{width: 768px;}}
//@media (min-width: 540px)  {.container{width: 540px;}}
//@media (min-width: 720px)  {.container{width: 700px;}}
//@media (min-width: 960px)  {.container{width: 960px;}}
//@media (min-width: 1140px) {.container{width: 1140px;}}

/*
.container {
//    text-align:left;
//    margin:5px auto;
//    padding:5px 10px;
}
*/



/*
.section-contents h2 span, .section-contents-one h2 span {
    display: inline-block;
    height: 40px;
    padding: 0 10px;
    color: #4e7100;
    border-bottom: 2px solid #4e7100;
    font-size: 32px;
}
*/

/*
element.style {
    font-size: 24px;
    border-bottom: 2px solid #4e7100;
}
*/


/*
h1 {
    margin: 0 0 10px 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
//    font-size: 1.4rem;
    font-size: 32px;
    border-bottom: 2px solid #ddd;
}

h1 span {
    display: inline-block;
    height: 40px;
    padding: 0 10px;
    color: #4e7100;
    border-bottom: 2px solid #4e7100;
}
*/




.margin-0-5-0-5 {
    margin: 0 5 0 5;
}

.date {
    margin: 20px 5px 5px 5px;
//    font-family: 'Century Gothic','Microsoft JhengHei UI','Microsoft JhengHei',Sans-serif;
    font-size: 0.8rem;
    color: #000;
}


.title {
    margin: 5px 0px 0px 0px;
//    font-family: 'Microsoft YaHei', 'Century Gothic','Microsoft JhengHei UI','Microsoft JhengHei',Sans-serif;
    font-size: 2rem;
}


.fc1060A0 {color: #1060A0;}
.fce04070 {color: #e04070;}
.fc20a050 {color: #20a050;}

h3 {
    font-size: 1.2rem;
    font-weight: bold;
    border-bottom: 1px solid #999999;
}

h3 span {
    display: inline-block;
    margin-bottom: 5;
    padding: 0 2px;
//    color: #185102;
//    border-bottom: 3px solid #ae7180;
    line-height: 1.4;
}

.content {
    margin-top: 5px;
    font-size: 1rem;
    line-height: 1.6;
    color: #6f7678;
}



p {
    padding: 15px 0px;
    line-height: 1.6;
}


table, th, td, tr {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 5px;
    border-top:1px solid #000; 
    border-bottom:1px solid #000;

}

.t1 {
    border-collapse: collapse;
    border-spacing: 0;
    padding-right: 5px;
    border-top:0px solid #000; 
    border-bottom:0px solid #000;
}

.t2 {
    border-collapse: collapse;
    border-spacing: 0;
    padding-right: 5px;
    border-top:0px solid #000; 
    border-bottom:1px solid #000;
}

ul, li {
    list-style-type:circle;
//    list-style-image:url('https://www.trzcacak.rs/myfile/detail/222-2227087_blue-check-mark-clip-art-png-download-blue.png');
    margin: 0 12px;
}

.li2 {
    list-style-type:none;
    margin: 0;
    font-weight:bold;
    font-size: 1.1rem;
}

.li3 {
    list-style-type:decimal;
    margin: 0px 0px 8px 24px;
    font-weight:300;
//    font-size: 1.1rem;
    font-size: 18px;
    line-height: 1.6;
}