body {font-family: "LINESeedSansTH", Serif;}

.container {width:80%; margin:0 auto; position:relative;}
.clear {clear:both;}
/*div {border:solid 1px #999;}

/*** header ***/
#header {display:grid; grid-template-columns:repeat(auto-fit, minmax(600px, 1fr)); margin:20px 0;}
.header-logo {float:left; position:relative; text-align:center;}
.header-logo img {width:85%;}
.header-content {float:left; position:relative; margin:20px 0 0 20px;}
.header-content h1 {margin:0; padding:0; }
.header-content h1 span {color:#599103;}

/*** banner ***/
#banner {margin:0 20px;}
.banner-show {width:70%; margin:0 auto 30px auto; float:left;}
.banner-show img {width:100%;}
.banner-detail {width:30%; float:right; margin-top:10%; }
.banner-detail h2 {font-size:350%; color: #001b6b; margin:0; padding:10px 0;}

/*** concept ***/
#concept {display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));}
.concept-detail { margin:0; position:relative;}
.concept-detail img {width:60%; display: block; margin: 0 auto;}
.concept-detail h3 {margin:5px 1px; padding:10px 0; text-align:center; font-size:150%; color:#ffffff; background-color:#001b6b;  border-top-left-radius: 10px; border-top-right-radius: 10px;}
.concept-detail p {margin:5px 10px; text-align:center; font-size:120%; padding:10px 15px; font-weight:bold; border-bottom: solid 1px #c3d2ff; }

/*** content ***/
.content {width:100%; position:relative;}
.content h1 {text-align:center;font-size:250%; color:#001b6b; }
.content p {text-align:center; font-size:150%; font-weight:bold;}

.content-show {display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); margin:20px 0; grid-gap:0.1rem;}
.content-left, .content-right {width:90%; margin:0 auto;}
.content-left p, .content-right p  {margin:0 0 20px 0; text-align:left; font-size:140%; font-weight:bold;}
.content-left p img,.content-right p img  {width:20px;}
.content img.content-image {width:80%; margin:0 auto; display:block;}
p.text-tab {margin-left:20px;}

/*** media ***/
#media {}
.media-banner {width:70%; float:left;}
.media-banner img {width:100%;}
.media-clip {width:29%; float:right;}
.media-clip blockquote {margin:0 auto; height:570px;}

.media-minibanner {display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); margin:20px 0; grid-gap:0.3rem;}
.media-minibanner-item img {width:100%; margin:0 auto; display:block;}
/*.media-minibanner {width:33%; float:left; margin:10px 0 20px 0;  position:relative;}
.media-minibanner img {width:100%; margin:0 auto; display:block;}*/

/*** form ***/
#form {}
.form-banner {width:70%; float:left;}
.form-banner img {width:90%; margin:0 auto; display:block;}
.form-detail {width:29%; float:right; margin-top:30px;}
.form-detail h3 {text-align:center; font-size:130%; color:#ea284e; margin:10px 0;}
.form-detail h3 span {font-size:180%;}
.form-detail h3 img {width:20px;}
.form-detail h4 {display:block; width:80%; margin:10px auto; background-color:#ea284e; color:#ffffff; padding:10px; text-align:center; border-radius: 25px; font-size:130%;}
.form-detail h4 a {text-decoration:none; color:#ffffff; display:block;}

/*** footer ***/
#footer {text-align:center; margin:20px 0;}
#footer img {width:25px; padding:20px;}

@media screen and (max-width: 1200px) {
	.media-banner {width:100%;}
	.media-clip {width:100%; }
	.banner-detail h2 {font-size:250%; color: #001b6b; margin:10px 0; padding:0;}
}