/* CSS Document */

body {	-webkit-text-size-adjust:100%; margin:0; text-align:center; font-family: 'PT Sans', sans-serif; background: url(../images/index-bg.jpg) no-repeat top center; background-size: cover;}
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:1210px; margin:0 auto; text-align:left; position:relative; clear:both;}


#content {box-shadow: inset 0px 0px 0px 25px rgba(255,255,255,1); padding: 25px;}
.index-main { display: flex; flex-direction: row; flex-wrap: wrap;}
.index-main > div { width: 50%;}
.banner-box {position: relative;}
.banner-slogon { position: absolute; bottom:105px; text-align: left; left: 42px;color: #fff; font-size: 20px; line-height: 100%; z-index: 101; text-shadow:0px 0px 15px #000;}
.banner-slogon span { font-size: 46px; display: block; font-weight: 700; padding-bottom: 0px; line-height: 130%;}

.banner { line-height:0; position: relative;}
.banner:after { content:""; /*background: url(../images/idx-ban-bottom.png) repeat-x;*/ height: 174px; z-index: 99; position: absolute; width: 100%; bottom: 0; left: 0;}
.banner img { width:auto; width: 100%;}
.banner .owl-buttons { display:none;}
.banner .owl-prev { position:absolute; z-index:100; left:0px; top:calc(50% - 10px); background:none !important;}
.banner .owl-prev:before { font-family: 'Font Awesome 5 Free';font-weight: 900;font-size:90px; content:"\f104";}
.banner .owl-next { position:absolute; z-index:100; right:0px;font-weight: 900; top:calc(50% - 10px); background:none !important;}
.banner .owl-next:before { font-family:'Font Awesome 5 Free'; font-size:90px; content:"\f105";}

.banner .owl-controls { bottom:28px; position: absolute; width: 100%; z-index: 101; text-align: right !important; padding: 0 33px;}
.banner .owl-controls .owl-page span { width: 15px !important; height: 15px !important; background: none !important; border: 2px solid #fff; opacity: 1 !important; margin: 5px !important;}
.banner .owl-controls .owl-page.active span, .banner .owl-controls.clickable .owl-page:hover span {background: #0075d2 !important; border-color: #0075d2;}

.idx-news { display: flex; flex-direction: column; flex-wrap: nowrap;}
.idx-news > div {position: relative; overflow: hidden; line-height: 0;}
.idx-news img { transition: all 0.4s ease-out 0s; width: 100%;}
.idx-news > div:hover img {transform: scale(1.1);}
.idx-news-name {position: absolute; z-index: 2; bottom: 0; right: 0; max-width: 360px; padding: 18px 70px 18px 24px; background: url(../images/arrow-0.png) no-repeat rgba(255,255,255,.85) calc(100% - 18px) 18px; color: #393939; font-size: 15px; line-height: 120%; transition: all 0.4s ease-out 0s;}
.idx-news > div:hover .idx-news-name { background: url(../images/arrow-1.png) no-repeat rgba(0,117,210,.85) calc(100% - 18px) 18px; color: #fff;}

.idx-pro { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-pro > div {width: 50%; position: relative; line-height: 0; overflow: hidden; background: #000;}
.idx-pro img { transition: all 0.4s ease-out 0s; width: 100%;}
.idx-pro > div:hover img { opacity: 0.5; transform: scale(1.1);}
.idx-pro-name {position: absolute; z-index: 2; bottom: 0; left: 0; width: 100%; padding: 22px 25px; background: rgba(255,255,255,.55); color: #3a3a3a; font-size: 17px; line-height: 120%; transition: all 0.4s ease-out 0s; letter-spacing: 1px; font-weight: bold;}
.idx-pro > div:hover .idx-pro-name { color: #0075d2;background: rgba(255,255,255,.85);}

.idx-about { /*background: url(../images/idx-about.jpg) no-repeat bottom center; background-size: cover;*/ padding: 0 45px 0 45px; color: #3d3d3d; font-size: 18px; line-height: 160%; display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.idx-about h1 { color: #0075d2; font-size: 46px; line-height: 100%; padding-bottom: 25px;}
.idx-about-btn { margin-top: 40px; display: block; width:220px; line-height: 42px; border-radius: 21px; background: #282828; color: #ffffff; font-size: 18px; text-align: center;}
.idx-about-btn:hover { background: #0075d2;}

.idx-application { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-application > div { width: 25%; padding: 22px 20px; background: #eaeaea; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: relative;}
.idx-application > div:after { content: ""; position: absolute; width:1px; height: 100%; background: #fff; top:0; right: 0;}
.idx-application > div:last-child:after {display: none;}
.idx-application > div > div:first-child { width: 40%;}
.idx-application > div > div:last-child { width: 60%; padding-left: 13px; color: #3a3a3a; font-size: 20px; font-weight: bold;}
.idx-application > div > div:first-child img { width: 100%;}


@media only screen and (max-width: 1920px) {
	body {background-size: auto;}
}
@media only screen and (max-width: 980px) {
	#content {padding: 10px; box-shadow: inset 0px 0px 0px 10px rgba(255,255,255,1)}
}

@media only screen and (max-width: 768px) {
	.index-main > div { width: 100%;}
	.idx-about { padding: 25px 20px; }
	.idx-about h1 { font-size: 34px; padding-bottom: 15px;}
	.idx-application { border-top:1px solid #fff;}
	.idx-application > div { width: 50%;}
	.idx-application > div:nth-child(2n):after {  display: none;}
	.idx-application > div:before { content: ""; position: absolute; width:100%; height: 1px; background: #fff; bottom:0; left: 0;}
}
@media only screen and (max-width: 640px) {

}
@media only screen and (max-width: 570px) {
	.idx-news-name {position: relative; bottom: auto; right: auto; max-width: 100%; padding: 10px 70px 10px 10px; background: url(../images/arrow-0.png) no-repeat rgba(255,255,255,1) calc(100% - 18px) 12px;}
	.idx-news > div:hover .idx-news-name { background: url(../images/arrow-1.png) no-repeat rgba(0,117,210,1) calc(100% - 18px) 12px;}
	.idx-pro-name {position: relative; bottom: auto; left: auto; padding: 10px; background: #fff; font-weight: normal; letter-spacing: 0; font-size: 15px;}
	.idx-pro > div:hover .idx-pro-name { color: #fff;background: rgba(0,117,210,1);}
}

@media only screen and (max-width: 414px) {
	.idx-application > div { width:  100%;}
	.idx-application > div:after {  display: none;}
	

}

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

}