/* sub_banner */
#sub_banner { z-index: 10; }

/* wrap-box */
.wrap-box { margin: auto; width: 90%; }

/* describe */
#describe {margin: 4em 0 0vw;}


/* articleInfo20 */
.wow {animation: fadeIn 1.5s both;-webkit-animation: fadeIn 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;}
.delay1 {animation-delay: 0.5s;-webkit-animation-delay: 0.5s;}
.delay2 {animation-delay: 1.0s;-webkit-animation-delay: 1.0s;}
#articleInfo20 {margin: auto;width: 100%;}
#articleInfo20 ul {text-align: center;display: flex;flex-direction: row;justify-content: center;align-items: center;}
#articleInfo20 ul li {position: relative;overflow: hidden;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;width: 50%;}
#articleInfo20 ul li .photo {background-color: #000000e3;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#articleInfo20 ul li .photo img {display: block;width: 100%;opacity: 0.75;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#articleInfo20 ul li .Txt {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 100%;text-shadow: 0 0 13px rgba(0, 0, 0, 0.33);pointer-events: none;}
#articleInfo20 ul li .Txt {position: absolute;left: 0;top: 0;height: 100%;}
#articleInfo20 ul li .Txt::before {content: '';position: absolute;left: 10px;top: 10px;width: calc(100% - 20px);height: calc(100% - 20px);border: 1px solid #fff;opacity: 0.35;pointer-events: none;}
#articleInfo20 ul li .en {text-align: center;font-size: 25px;letter-spacing: .02em;text-transform: uppercase;font-weight: 600;color: #fff;}
#articleInfo20 ul li .title{color: #fff;font-size: 35px;}
#articleInfo20 ul li h3 {font-size: 20px;}
#articleInfo20 ul li h5 {font-size: 16px;color: #caa34b;}
#articleInfo20 ul li p.photo {margin: 15px 0;}
#articleInfo20 ul li p.photo {background-color: #0c517d;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#articleInfo20 ul li p.photo img {display: block;width: 100%;opacity: 0.25;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}

@media (max-width: 1180px) {
	#articleInfo20 ul li p.photo img {height: 100%;-o-object-fit: cover;object-fit: cover;}
	#articleInfo20 .bottomBox h3 {text-align: center;font-size: 30px;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
	#articleInfo20 .bottomBox p {margin: 10px 0 20px;text-align: center;font-size: 18px;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
	#articleInfo20 .bottomBox article {animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
	#articleInfo20 ul li .photo {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
	#articleInfo20 ul li .photo img {height: 100%;-o-object-fit: cover;object-fit: cover;}
	#articleInfo20 ul li .Txt {position: relative;}
	#articleInfo20 ul li p.photo {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
	#articleInfo20 ul li{width: 100%;height: 190px;}
	#articleInfo20 ul li .Txt::before{height: calc(190px - 20px);}
}

@media screen and (min-width: 1501px){
	.wrap-box { width: 1480px; }
}

@media screen and (max-width: 768px) {
	#articleInfo20 ul {display: flex;flex-direction: column;}
	#articleInfo20 ul li:first-child {}
#articleInfo20 ul li .title{color: #fff;font-size: 22px;}
}
@media screen and (max-width: 480px) {
	#articleInfo20 ul li {margin-bottom: 0px;width: calc(100% - 0px);}
}