/* CSS Document */

body {	-webkit-text-size-adjust:100%; text-align:center; font-family: "Open Sans", 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; list-style:none;
-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:1580px; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { padding-top: 100px;}

.banner { position: relative;}
.banner-slogon {position: absolute; /*background: url(../images/ban-slogon-bg.png) no-repeat top left;*/ width: 100%; padding: 20px; background-color: rgba(27,172,74,.8); display: flex; justify-content: center; align-items: center; font-size: 36px; color: #ffffff; font-weight: bold; text-align: center; z-index: 10; top: 0; left: 0; }
.banner-slogon > div { text-align: center;}
.banner-slogon > div br {display: none;}
.banner-height { height: 0!important; padding-bottom: 46.874%; width: 100%;}
.loop { z-index: 10 !important;}
.loop .owl-dots { }
.loop .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop .owl-prev { left:10px; }
.loop .owl-next { right:10px;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.3;transition: all 0.4s ease-out 0s;}
.loop .owl-prev:before { content:"\f104"; }
.loop .owl-next:before { content:"\f105"; }
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: 40px; width: 100%; text-align: right !important; padding: 0 50px;}
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #fff !important; width: 12px !important; height: 12px !important;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { background: #f7b146 !important;}

.idx-section-2 { display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; justify-content: space-between;}
.idx-section-2 > div:nth-of-type(1) { line-height: 0; width: calc(50% + 270px);}
.idx-section-2 > div:nth-of-type(1) img { width: 100%;}
.idx-section-2 > div:nth-of-type(2) {position: absolute; z-index: 3; right: 0; top: 0; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; background: url(../images/idx-01-bg.png) no-repeat top left; background-size: cover; width:calc(50% + 200px); padding-left: 120px; }

.idx-section-2-content {max-width: 730px; text-align: left; margin: 0 auto;}
.title01 { color: #fff; font-size: 36px; letter-spacing: 1px; font-weight: bold; line-height: 110%; padding-bottom: 30px;}
.idx-section-2-content-bottom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.idx-section-2-content-bottom > div:nth-of-type(1) { width: calc(100% - 160px); padding-right: 40px;}
.idx-section-2-content-bottom > div:nth-of-type(2) { width: 160px;}
.idx-section-2-btn { width: 150px; height: 150px; line-height: 1; border-radius: 100%;box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.45); text-align: center; background: #fff; font-size: 24px; color: #1bac4a; font-weight: bold; display: flex; flex-flow: wrap; justify-content: center; align-items: center; padding: 10px;}
.idx-section-2-btn:hover { color: #fff;  background: #1bac4a;}
.list-type-1 li {position: relative; padding-left: 36px; font-weight: bold; color: #ffffff; font-size: 24px; line-height: 130%; padding-bottom: 8px;} 
.list-type-1 li:before {position: absolute; left: 4px; top: 0; font-family: 'Font Awesome 5 Free';font-weight: 900; content: "\f054"; font-size: 26px;} 

.idx-section-3 { background: url(../images/idx-02-bg.jpg) no-repeat top right; background-size: cover; height: 803px;padding: 230px 20px 0 80px;}
.idx-section-3-content { max-width: 690px; margin: 0 auto 0 0; text-align: left; color: #000000; font-size: 24px; line-height: 36px; background: rgba(255,255,255,.85); padding: 30px; box-shadow: 0px 0px 60px 40px rgba(255,255,255,0.85);}
.idx-section-3-content p { padding-bottom: 35px;}
.idx-section-3-content h1 { font-size: 36px; line-height: 130%; padding-bottom: 18px;}
.idx-section-3-btn { font-size: 18px; line-height: 24px; padding:0 0 10px 5px; background:url(../images/btn-bg-1.png) no-repeat left bottom ; width: 105px; color: #000; display: inline-block;}
.idx-section-3-btn:hover { color: #1bac4a;}

.idx-section-4 { background: url(../images/idx-03-bg.png) no-repeat top right; background-size: cover; height: 790px;padding: 75px 144px 85px 144px; margin-bottom: 12px;}
.idx-pro-title { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding-bottom: 25px;}
.idx-pro-title > div{ font-weight: bold; font-size: 36px; letter-spacing: 1px ;color: #fff; line-height: 130%;}
.idx-pro-title > a{ display: inline-block; font-size: 16px; color: #fff; letter-spacing: 1px;}
.idx-pro-title > a:hover{text-decoration: underline;}

.loop2 { z-index: 10 !important; background: #f2f4f3;}
.loop2 .owl-dots { display: none !important;}
.loop2 .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop2 .owl-prev { left:-80px; }
.loop2 .owl-next { right:-80px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:90px; color: #fff; opacity: 0.3;transition: all 0.4s ease-out 0s;}
.loop2 .owl-prev:before { content:"\f104"; }
.loop2 .owl-next:before { content:"\f105"; }
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 1;}
.loop2 .owl-item { border-right: 1px solid #e7e9e8;}

.idx-pto { line-height: 0; overflow: hidden;background: #fff; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 40px;}
.idx-pto img { width: 100%; transition: all 0.4s ease-out 0s;}
.idx-pto:hover img { transform: scale(1.05);}
.idx-name { text-align: center; font-size: 22px; line-height: 120%; letter-spacing: 1px; font-weight: bold; color: #222222; padding: 30px 20px;}
.idx-name span { display:block; color: #8c8c8c;}

.idx-link { margin-right: -12px; display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-link > div {  margin: 0 12px 12px 0; width: calc(33.33% - 12px); display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; background-size: cover; height: 547px; background-position: center center;background-repeat: no-repeat; overflow: hidden;}
.idx-link > div:nth-of-type(1) { background-image: url(../images/idx-link-bg-1.jpg);}
.idx-link > div:nth-of-type(2) { background-image: url(../images/idx-link-bg-2.jpg);}
.idx-link > div:nth-of-type(3) { background-image: url(../images/idx-link-bg-3.jpg);}
.idx-link > div:nth-of-type(2) .idx-link-btn { background:#7fbcad;}
.idx-link > div:nth-of-type(3) .idx-link-btn { background:#2e8c94;}

.idx-link-name { font-size: 26px; font-weight: bold; color: #fff; text-shadow: 0px 0px 8px #000; margin-bottom: 24px; letter-spacing: 1px;}
.idx-link-btn { display: block; width:55px; height: 55px; border-radius: 100%; text-align: center; line-height: 45px; background: #b6c84e;}
.idx-link > div:hover .idx-link-btn { width:65px; height: 65px; line-height: 55px; }

.idx-section-5 { padding: 105px 20px 150px 20px;}
.title02 { font-weight: bold; font-size: 36px; color: #222222; letter-spacing: 1px; padding-bottom:60px; line-height: 120%; text-align: center;}

.idx-share-pto { margin-bottom: 30px; line-height: 0; overflow: hidden;}
.idx-share-pto img { border-radius: 100%;transition: all 0.4s ease-out 0s; }
.idx-share-pto img:hover { border-radius: 20%;}
.idx-share-data { font-size: 18px; color: #222; line-height: 1.3; text-align: left;}
.idx-share-data span { font-size: 24px; display: block; text-align: center; padding-bottom: 14px;font-weight: bold; }

.loop3 .owl-dots { }
.loop3 .owl-nav { position: absolute; top:calc(50% - 50px); width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); background:none !important;}
.loop3 .owl-prev { left:10px; }
.loop3 .owl-next { right:10px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 0.3;transition: all 0.4s ease-out 0s;}
.loop3 .owl-prev:before { content:"\f104"; }
.loop3 .owl-next:before { content:"\f105"; }
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: -80px; width: 100%; text-align: center !important; padding: 0 50px;}
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #bdbdbd !important; width: 12px !important; height: 12px !important;}
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #f7b146 !important;}

@media only screen and (max-width: 1480px) {
	.banner-height { height: 700px;}
}

@media only screen and (max-width: 1279px) {
	#content { padding-top: 80px;}
	
	.idx-section-2-content { max-width: 460px;}
	.idx-section-2-content-bottom > div:nth-of-type(1) { width: calc(100% - 0px); padding-right: 0px; padding-bottom: 30px;}
	.idx-section-2-content-bottom > div:nth-of-type(2) { width: 100%; text-align: center;}
	
	.idx-section-4 {padding: 75px 50px 0px 50px;}
	.loop2 .owl-prev:before, .loop2 .owl-next:before {font-size:50px; }
	.loop2 .owl-prev { left:-40px; }
	.loop2 .owl-next { right:-40px;}
}
@media only screen and (max-width: 980px) {
	.banner-slogon { background: rgba(27,172,74,.8); position: inherit; width: 100%; height: inherit; padding:10px 20px; justify-content: center; font-size: 20px; letter-spacing: 1px;}
	.banner-slogon > div { margin-top: 0; text-align: center;}
    .banner-slogon > div br {display: block;}
	.banner-height { height: 280px;}
	.loop .owl-dots { text-align: left !important;}
	
	.idx-section-2 { flex-direction: column;}
	.idx-section-2 > div { width: 100% !important;}
	.idx-section-2 > div:nth-of-type(2) {position: inherit; right: auto; top: auto; height: auto;  background: #88c24f;padding:40px; }
	.idx-section-2-content { max-width: 100%; width: 100%;}
	.title01, .idx-section-3-content h1, .idx-pro-title > div, .title02 { font-size: 26px;}
	.list-type-1 li, .idx-section-3-content { font-size: 20px;}
	.list-type-1 li:before { font-size: 20px;}
	.idx-section-2-btn { width: 100px; height: 100px; /*line-height: 100px;*/ font-size: 20px;}
	
	.idx-section-3 { padding:30px 0px; height: auto;}
	
	.idx-link > div { width: calc(100% - 12px);}
	
	.idx-section-5 { padding-top: 80px;}
	.idx-share-data span { font-size: 22px;}
    
    .idx-link-name {font-size: 22px;}
}

@media only screen and (max-width: 768px) {
	
	.idx-link > div { height: 350px;}
	
}
@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) {

}