#content.dark{ background-color:#333; }

.sb_wrap{ box-sizing:border-box; }

/* subtop */
.subtop{ position:relative; z-index:1; height:auto; background-size:cover; background-position:left 50% bottom 0px; display:table; width:100%; }
/*.subtop:before{ content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; }
.subtop:before{
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 10%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.8) 80%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 10%, rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 10%, rgba(255,255,255,0.3) 50%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
#content.dark .subtop:before{
	background: -moz-linear-gradient(top,  rgba(51,51,51,0) 10%, rgba(51,51,51,0.3) 50%, rgba(51,51,51,0.8) 80%, rgba(51,51,51,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(51,51,51,0) 10%, rgba(51,51,51,0.3) 50%,rgba(51,51,51,0.8) 80%,rgba(51,51,51,1) 100%);
	background: linear-gradient(to bottom,  rgba(51,51,51,0) 10%, rgba(51,51,51,0.3) 50%,rgba(51,51,51,0.8) 80%,rgba(51,51,51,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333333', endColorstr='#333333',GradientType=0 );
}*/

.subtop:after{ content:''; min-height:inherit; }
.subtop, .subtop *{ box-sizing:border-box; }
.st_box{ display:table-cell; vertical-align:middle; position:relative; z-index:2; width:100%; padding:100px 30px; background-color:rgba(0,0,0,.5); }
.st_txt{ max-width:700px; width:100%; margin:0 auto; text-align:center; word-break:keep-all; text-shadow:5px 5px 5px rgba(0, 0, 0, 0.4); }
.st_txt > h2{ font-family:'wmp'; font-size:40px; line-height:1em; }
.st_txt > i{ font-size:30px; margin-top:15px; line-height:0.8em; }
.st_txt > p{ font-size:18px; font-weight:300; margin-top:15px; line-height:1.7em; }

@media(max-width:850px){
	/*#content{ padding-top:50px; }*/
	.subtop{ min-height:auto !important; }
	.st_box{ width:100%; padding:80px 20px; }

	.st_txt > h2{ font-size:35px; }
	.st_txt > p{ font-size:14px; }
}
@media(max-width:500px){
	.st_txt > h2{ font-size:28px; }
	.st_txt > p{ font-size:13px; font-weight:100; }
}


/* article */
.sb_wrap{ padding:130px 20px 180px; margin:0 auto; }
@media(max-width:850px){
	.sb_wrap{ padding:70px 20px 120px; }
}



/* st_hd */
.st_hd{ position:absolute; z-index:10; bottom:0; left:0; width:100%; }
.st_hd > .st_hd_box{ max-width:1300px; width:100%; margin:0 auto; display:-webkit-flex; display:-ms-flex; display:flex; background-color:#fff; box-shadow:5px 5px 10px 0 rgba(0,0,0,.3); transform:translate(0, 50%); }
.st_hd_de{ position:relative; z-index:1; min-width:210px; width:auto; }
.st_hd_de.de_0{ min-width:0; }
.st_hd_de.de_0 > h4{ padding:13px; background-color:#54a7c1; font-size:24px; color:#fff; line-height:0; }
.st_hd_de:not(:first-child){ border-right:1px solid #ddd; }
.st_hd_de.de_1:after, .st_hd_de.de_2:after{ content:''; position:absolute; top:50%; right:20px; width:8px; height:8px; border-right:1px solid #777; border-bottom:1px solid #777; transform:translate(0, -67%) rotate(45deg); }
.st_hd_de > h4{ padding:13px 50px 13px 15px; font-size:16px; font-weight:400; color:#666; cursor:pointer; }
.st_hd_de > h4 > a{ color:inherit; }
.st_hd_de > .st_hd_sel{ position:absolute; top:100%; left:-1px; right:-1px;  height:auto; display:none; background-color:#555; }
.st_hd_de > .st_hd_sel > a{ display:block; padding:10px 15px; font-size:14px; font-weight:300; color:#fff; transition:0.3s background-color; }
.st_hd_de > .st_hd_sel > a:hover{ background-color:#777; transition:0s background-color; }

@media(max-width:850px){
	.st_hd{ display:none; }
}