/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Arial', sans-serif; overflow-x: hidden; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; 
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { margin:0; padding:0; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */}

.content-Box { max-width:1200px; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:30px; color: #33883A; }
#content p{ margin-bottom: 25px; margin-top: 0;line-height:30px; }


.banner { height: 594px; background-position: top center; background-repeat: no-repeat; background-size: cover; position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding-left: 3%; padding-right: 3%;}
.banner:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: url(/images/theme-b16/banner-top-bg.png) no-repeat top center;}
.banner h1 { color: #fff; font-size: 50px; font-weight: bold; text-shadow: 2px 2px 4px #000; margin-top: 140px; position: relative; z-index: 4; text-align: center;}

#main-section { position: relative;}
#main-section:before { position: absolute; content: ""; background: #CAE29D; height: 14px; width: 100%; top: 0; left: 0;}
#main-section > div { position: relative; z-index: 2;}

.demo-section { padding: 0 3%;}
.product-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; padding-top: 45px; max-width: 1200px;}
.product-section:before { content: ""; position: absolute; z-index: -1; width: 22px; height: calc(100% - 40px); background: #CAE29D; top: 0; left: calc(50% - 11px);}
.product-section:after { content: ""; position: absolute; height: 14px; width: 100%; left:0%; bottom:21.5%; background: #CAE29D; z-index: -1;}
.product-section > div { width: 31%;  margin-bottom: 35px;display: flex;flex-flow: column;justify-content: space-between;}
.product-section > div:nth-child(1)::after { content: ""; position: absolute; height: 14px; width: 100%; left:0%; top:18%; background: #CAE29D; z-index: -1;}
.product-pto { border-radius: 12px; overflow: hidden; border: 2px solid #94C43A; line-height: 0; text-align: center; background: #fff;position: relative;margin-bottom: 30px;}
.product-pto img { width: 100%;}
.product-pto-mobile  { display: none;}
.product-name { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; background: rgba(18,77,34,.8); text-align: center; font-size: 24px; color: #fff; font-weight: bold; padding: 10px; line-height: 140%;}
.product-data { border-radius:12px; padding: 30px;  background: #CAE29D; margin-bottom: 30px;}
.product-data > b { text-align: center; font-size: 30px; color: #33883A; display: block; padding-bottom: 18px;}
.product-data > p { height: 450px; padding-right: 20px;}
.product-data:after { content: ""; position: absolute; height: 14px; width: 100%; left:0; top:calc(50% - 7px); background: #CAE29D; z-index: -1;}

.btn-1 { text-align: center; position: relative; z-index: 3;}
.btn-1 a { display: inline-block; font-size: 18px; color: #33883A; border: 1px solid #33883a; padding: 2px 8px;}
.btn-1 a:hover { color: #fff; background: #33883a;}

.idx-bottom-section { background: #D7E8FF; position: relative; padding-left: 3%; padding-right: 3%; padding-bottom: 25px; padding-top: 45px;}
.idx-bottom-section:before { content: ""; position: absolute; z-index: -1; width: 22px; height: 43px; background: #D7E8FF; top: -36px; left: calc(50% - 11px);}
.idx-bottom-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -13px;}
.idx-bottom-list > a {background: rgba(255,255,255,.6); display: block; width: calc(33.33% - 13px); margin: 0 13px 17px 0; color: #33883A;}
.idx-bottom-pto { position: relative; line-height: 0; overflow: hidden;}
.idx-bottom-pto img { width: 100%;}
.idx-bottom-pto > b { position: absolute; z-index: 3; left: 0; bottom: 0; width: 100%; background: rgba(255,255,255,.6); text-align: center; font-size: 24px; color: #33883A; font-weight: bold; padding: 10px; line-height: 140%;}
.idx-bottom-data { color: #33883A; padding: 24px 5%; line-height: 150%;}
.idx-bottom-data > span { color: #99CC33;}

.idx-bottom-list2 { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -13px;}
.idx-bottom-list2 > a {display: block; width: calc(33.33% - 13px); margin: 0 13px 17px 0; color: #33883A;}
.name-type-1 {  bottom:auto !important; top: 0;padding: 20px 10px !important;background: rgba(255,255,255,.8) !important; }

@media only screen and (max-width: 980px) {
	#content { padding-top: 0px;}
    
    .banner { height: 350px;}
    .banner:before {  background-position: 50% -80px;}
    .banner h1 { font-size: 32px; margin-top: 10%;}
    
    .product-section > div { width: 100%;}
    .product-section > div:nth-of-type(1) { order: 2;}
    .product-section > div:nth-of-type(2) { order: 1;}
    .product-section > div:nth-of-type(3) { order: 3;}
    .product-section > div:nth-of-type(4) { order: 4;}
    .product-section > div:nth-of-type(5) { order: 5;}
    .product-section > div:nth-of-type(6) { order: 6;}
    .product-section:after, .product-data:after { display: none;}
    .product-data > p { height: auto; overflow: visible;}
    .product-name { font-size: 20px;}
    
    .idx-bottom-list > a, .idx-bottom-list2 > a  { width: calc(100% - 13px);}
}
@media only screen and (max-width: 768px) {
    
}
@media only screen and (max-width: 640px) {
	
}
@media only screen and (max-width: 570px) {
	
}

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

}

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

}