body {}

main { min-height:100vh;}

.main01 { padding:0 2% 2%;}

.main02 { padding:0;}

.main03 { padding:0 10% 5%;}



.banner .title { position:relative; text-align:center;}

/*.banner .title:after { content:""; border-bottom:7px solid #000; width:70px; height:100%; display:block; margin:20px auto 0;} */

.banner dl { padding:0 2% 3%; }



#path { font-size:small;  margin-bottom:20px; padding:5px 0; text-align:right;}

#path li, #path li a { display:inline; font-size:small;} 

#path li:after { content:' ➡ '; margin:0 10px;display:inline-block;}

#path li:last-child:after { display:none;}

#path li a:hover { text-decoration:underline;}



.title { font-size:40px; margin:20px 0;}

.title2 { font-size:20px; color:#B6191E; margin:10px 0;}



.btn { display:table;background:#000; color:#fff; padding:5px 25px; margin:10% 0; position:relative;}

.btn:hover { opacity:0.7;}





/* -------------------- */

main .content .list li { display:inline-block; vertical-align:top; width:calc(100%/4.5); text-align:center; margin:5px 10px 30px;background: #fff;}





/* about */

.a01 { background:#ddd;display: -webkit-flex;display:flex;

  -webkit-align-items: flex-start;

          align-items: flex-start;

  -webkit-justify-content: center;

          justify-content: center; margin:10% 0;}

.a02 {display: -webkit-flex;display:flex;

  -webkit-align-items: flex-start;

          align-items: flex-start;

  -webkit-justify-content: center;

          justify-content: center;}

.a03 { background:#ddd;display: -webkit-flex;display:flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;}

.a01 > section, .a02 > section, .a03 > section { flex:1;-webkit-flex:1; width:50%;}

.txt { padding:10%;}

.txt2 { width:50%; margin: 100px auto;}

.logo2 {max-width:500px; margin:auto; display: block;}



#about03 .aa { margin:auto; text-align:center;}

#about03 .aa span { display:inline-flex;-webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center; border:3px solid; border-radius:200px; width:200px; height:200px; margin:30px;}



#about04 .content { text-align:center;}

#about04 .content .title2 { color:inherit;}





/* products */

#products {}

#products .content .list { text-align:center;}

#products .content .list li {  box-shadow:0 0 5px #ddd;}

#products .content .list li picture {display: -webkit-flex;display: flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center; /*height:50vh; width:inherit;*/ margin:auto; padding:5px; }

#products .content .list li dl { padding:15px 30px 20px; background:#f1f1f1; min-height:40vh;}

#products .content .list li dl dd { text-align:left;}

#products .content .list li dl dd.item a:after { content:'/'; width:100%; height:100%; display:inline; margin:0 5px; color:#ccc;}

#products .list li dl dd.item a:last-child:after { display:none;}

#products .content .list li dl dd.item a:hover { color:#B6191E;}



/* products-show */

#products-show .content { display: -webkit-flex;display:flex;}

#products-show #sld { width:30vw; margin:0 5%;}

#products-show #show { flex:1; -webkit-flex:1;margin-left:2%;}

#products-show #show .title { margin-right:5%;}

#products-show .content .slider-for img { max-height:60vh; width:inherit;margin:auto; padding:10px;}

#products-show .content .slider-nav img { max-height:20vh; width:inherit;margin:auto; padding:10px;}

#products-show .content  .slider-nav .slick-slide { position:relative;}

#products-show .content  .slider-nav .slick-slide:after { content:''; width:95%; height:95%; display:block; position:absolute; top:0;    border: 1px solid #ddd;}

#products-show .content .slider-nav { width:inherit;}

#products-show .slick-next { right:0; top:40%; border-radius:0;width: auto;}

#products-show .slick-prev { left:0; top:40%; border-radius:0;width: auto;}



#products-show  .content .table-box {margin-top:10vh;display: block; overflow: auto; border: 1px solid;}

#products-show  .content table { width:100%; }

#products-show  .content th, #products-show .content td { padding:20px 10px; border:1px solid #ddd;}

#products-show  .content tr:first-child td { color:#fff; padding:30px 10px; background:#000;}



#show-box ul.tab { overflow: hidden;border-top: 1px solid #000;}

#show-box ul.tab li {float: left;}

#show-box ul.tab li a {

    display:inline-block;

	background-color:#ddd;

    color: #000;

    text-align: center;

    padding:10px 20px;

    transition: 0.3s;

	border-bottom:none;

	border-radius: 0 0 10px 10px;

}

#show-box ul.tab li a:hover, #show-box ul.tab li a:focus, #show-box ul.tab li a.active {background-color: #000;color:#fff;}

#show-box .tabcontent { display: none; padding:50px 5% 12px 0; overflow: auto;text-align: left;}



#add { margin:30vh 5% 10vh 0; text-align:center;}

#add .title2 { background:#ddd; padding:10px;}

#add .slick-prev, #add .slick-next { bottom:calc(50% - 50px);}

#add .slick-next { right: 0; border-radius:0;}

#add .slick-prev { left: 0; border-radius:0;}

#add .center img { max-height:20vh; width:inherit;margin:auto; padding:10px;}







/* news */

#news .content { text-align:center;}

#news .content .list li { width: calc(100%/3.5);}

#news .content .list dl { display:flex;display: -webkit-flex; padding:20px; background:#000;}

time { display:block;border:1px solid #666;}

time p { border:1px solid #666; padding:5px 10px; font-size:medium; font-weight:bold; color:#666;}

time span { display:block; font-size:x-large; font-weight:bold; color:#666;}

#news .content .list dl dd { text-align:left; padding-left:20px; margin:0; font-size:25px; color:#fff;}

#news .content .list picture {    display: block;

    height: 30vh;

    width: inherit;

    overflow: hidden;

}

#news-show2 .content dl { padding-bottom:5%;display: -webkit-flex;

  display:         flex;

  -webkit-align-items: flex-start;

          align-items: flex-start;

  -webkit-justify-content: center;

          justify-content: center;

}

#news-show2 .content dl dt { flex:1.5;-webkit-flex:1.5;}

#news-show2 .content dl dd { flex:1;-webkit-flex:1; padding-left:5%;}



#photo .title { text-align:center; padding:10px; background:#f1f1f1; color:#333;}

#photo section {-moz-column-count: 3;

  -moz-column-gap: 5px;

  -webkit-column-count: 3;

  -webkit-column-gap: 5px;

  column-count: 3;

  column-gap: 5px;

}

#photo figure img { opacity:0.5;}

#photo figure:hover img { opacity:1;}





/* contactus */

#contactus .content .list2 { display:flex;display: -webkit-flex;}

#contactus figure { flex:1;-webkit-flex:1;}

#contactus figure .mmbox {margin:5%;}

#contactus figure .mmbox iframe { width: 100%; height: 100%; min-height:30vh;}

#contactus figure figcaption { flex:1;-webkit-flex:1;margin:5%;}

#contactus figure li > a { width:100%; height:100%;}

#contactus figure ul { margin:5% 0; color:#000;}

#contactus figure ul li > img { max-width:30px; margin:5px 5px 5px 0; background:#000; border-radius:2px; padding:5px;    vertical-align: middle;}



#form { border:2px solid #ddd;background:#ddd;}

#form .title { padding:20px; text-align:center;}

#form form section { display:flex;display: -webkit-flex; padding:10px;}

#form form section > div { flex:1;-webkit-flex:1;}

#form form section > div:first-child { padding-right:10px;}

#form form input, #form form textarea, #form form select { width:100%;}

#contactus input, #contactus select, #contactus textarea { border:1px solid #ddd;  padding:10px; margin:10px auto; color:#999; }

.btn2 {

    display: table;

    background: #000;

    color: #fff;

    padding: 5px 25px;

    margin: 5% auto;

    position: relative;

}



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

	#news .content .list li {  width: calc(100%/2 - 15px); margin: 0 5px 30px;}

}

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

	.txt2 {width: 100%; padding: 10%; margin: 10px auto;}

	.a01, .a02, .a03 { display:block; margin:0;}

	.a01 > section, .a02 > section, .a03 > section { width: 100%;}

	.logo2 { max-width: 300px;}

	

	#path { text-align:left;}

	

	main .content .list li { width: calc(100%/3 - 15px);margin: 5px 5px 30px;}

	

	#news .content .list li {  width: 90%;}

	#news .content .list dl dd { font-size:20px;}

	#news-show2 .content dl dd {padding: 5% 0;}

	#news-show2 .content dl dd .btn { display:none;}

	#photo section {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}

	#photo figure img { opacity:1;}

	

	#news-show2 .content dl, #contactus .content .list2 { display: block;}

}

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

	.title { font-size: 30px;}

	.btn-box {margin: 10% auto 5%;}

	.btn { display: table;    margin-bottom: 5px;}

	

	main .content .list li { width: calc(100%/2 - 15px);}

	

	#products-show .content { display: block;}

	#products-show #sld { margin: auto; width: 90%;}

	#products-show #show {text-align: center; margin: auto;}

	#show-box ul.tab {display: flex;}

	#show-box ul.tab li { float: none; flex: 1;}

	#show-box ul.tab li a { width: 100%; height: 100%;}

	#show-box .tabcontent { padding:10%;}

	#products-show .content th, #products-show .content td { padding: 5px 10px;}

	#add { margin:5% auto; width: 90%;}

	

	#contactus figure { margin-bottom: 30%;}

	#form form section {  display: block;}

	#form form section > div:first-child { padding-right: 0;}

	#form .title { padding: 0;}

}

@media screen and (max-width:368px) {
	main .content .list li { width:calc(100% - 30px);}
	#products .content .list li dl { min-height: auto;}
	

}