header { position:relative;}

#banner {

	display: -webkit-flex;

  display:         flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;}

main .title-in { display:none; position:absolute; font-size:50px; color:#0d2c4d;margin-top: 3%;}

main .title-in:after { content:''; display:block; background:url(../images/icon05.png) center center no-repeat; width:100%; height:100%;position: absolute;}



.title { font-size:30px; padding:5% 0;}

.t01 { padding:10% 15%;

display: -webkit-flex;

  display:         flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;}

.t01 > img, .t01 > iframe { max-width: 50%;}

.p01 { flex:1;}

.p01:before { content:''; display: block; width:50px; height:100%; border-top:3px solid #c8a062; margin-bottom: 20px;}



#jobs .p01, #news .p01 {height:82px; overflow:auto;    margin: 10% 0;}

#jobs .p01:before, #news .p01:before { display:none;}

.item .title { height:100px; position:relative;}

.item .title:after { content:''; display: block; width:50px; height:100%; border-top:3px solid #c8a062; margin-bottom: 20px;    position: absolute;

    top: 100%;

    left: 0;}

.p02:before { content:''; display: block; width:50px; height:100%; border-top:3px solid #c8a062; margin:0 auto 20px; text-align:center;}

.t01 > .p01 { padding-left:5%;}

/**/

.p01::selection, .p01::-webkit-selection, .p01::-moz-selection, .p01::-o-selection {background: #000;color: #fff;}

.p01::-webkit-scrollbar { width:5px;}

.p01::-webkit-scrollbar-track { background-color: #000;border-right:1px solid #666;}

.p01::-webkit-scrollbar-thumb { background-color: #ddd;border:1px solid #000; }

.p01::-webkit-scrollbar-corner { background-color: black;}

/**/





#service, #group { padding:5%;}

#service > article, #group > article {overflow: auto;  background: #FFF; margin-bottom:5%;}

#service > article:last-child, #group > article:last-child { margin:0; }

#service > article img, #group > article img { height: 100%;width: 60%;}

#service > article:nth-child(odd) img, #group > article:nth-child(odd) img { float:left;}

#service > article:nth-child(even) img, #group > article:nth-child(even) img { float:right;}

#service > article article, #group > article article { padding:5%; color:#000; display: -webkit-flex;

  display:         flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;}



#jobs, #news { padding:5%; text-align:center;}

#jobs .item { background:#818181; color:#fff; padding:200px 3% 5%; margin:5% 5px 0; display:inline-block; vertical-align:top; width:calc(100% /4); position:relative; text-align:left;}

#jobs .item:before { 

	content:'';

	width: 100%;

    height: 150px;

    display: block;

    background: url(../images/bg02.png) center top no-repeat;

    background-size: inherit;

    position: absolute;

    top: 0;

    left: 0;

}



#jobs .item .btn, #news .item .btn { font-size:small; margin-top:50px;}

#jobs .item .btn:hover:before, #news .item:hover .btn:before { content:'→'; display:inline; margin-right:10px;}



#news .item {background:#818181; color:#fff; margin:5% 5px 0; display:inline-block; vertical-align:top; width:calc(100% /4); position:relative; text-align:left;}

#news .item:hover { background:#c8a062;}

#news .item:hover img {}

#news .item a { display:block; padding:5% 10% 10%;}



#news-show { padding:10% 15%;}

#news-show dl { text-align:center;}

#news-show article {}



#contacts iframe { border:1px solid #c8a062;}

#contacts ul li a { line-height:50px;}

#contacts ul li a img {    

	max-width: 20px;

    background: #c8a062;

    border-radius: 3px;

    padding: 4px;

    margin-right: 10px;

}

#contacts ul li a .icon2 { width:100px !important;max-width: inherit;}

#contacts #contact-form {padding:10% 15%; text-align:center;}

#contacts #contact-form form ul { display:inline-block; vertical-align:top; width:calc(100%/2 - 20px ); margin:5% 4px;}

#contacts #contact-form form input, #contacts #contact-form form textarea { padding:15px; width:100%; margin:10px 0;border-radius:3px; border:1px solid #c8a062;}

#contacts #contact-form form textarea { height:260px;}

#contacts #contact-form form .btn { padding:5px 10px; color:#fff; background-color: #666; border-radius:3px;margin:10px; cursor:pointer;}

#contacts #contact-form form .btn:hover {background-color: #c8a062;}



#intro { padding:5%; text-align:center;}

#intro ul li { vertical-align:top; width:calc( 100% / 3 - 4px);height: 250px; overflow:hidden; margin-bottom:5%;display: -webkit-inline-flex;

  display: inline-flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center; }

#intro ul li a img {    width: 150%;

    height: auto;

    display: block;

    max-width: inherit;}

#intro ul li a:hover img { opacity:0.8;}



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

	#intro ul li { height:200px;}

}

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

	main .title-in { font-size:30px; margin:0;}

	main .title-in:after { background-position-y: top;}

	

	.t01 { display: block; }

	.t01 > img, .t01 > iframe {max-width: 100%;}

	.p01 {margin-top: 50px;}

	

	#service > article img, #group > article img { width:100%; float:none;}

	#service > article article, #group > article article { padding: 10% 5% 15%;}

	

	#jobs .item {width: calc(100% /2 - 4px); margin:5% 0 0; padding:150px 5% 5%;}

	#jobs .item ul { min-height: inherit;}

	

	#news .item {width: calc(100% /2 - 4px); margin:5% 0 0;}

	

	#intro ul li {width:calc( 100% / 2 - 4px);height: 150px;}

}

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

	#jobs .item {width:100%; padding:150px 10% 10%;}

	#news .item {width:100%;}

	#jobs .p01, #news .p01 {height:inherit; overflow:visible;}

	.item .title { height:inherit;}



	

	#contacts #contact-form form ul { width: 100%;  margin: auto;}

}

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

	

}

.about-img-style{ width: 70%; margin: 0 15%;}