.intro {height:100vh;overflow: hidden;}
.intro ul {display: flex;flex-wrap: nowrap;justify-content: center;height:100%;}
.intro li {width: 50%;height:100%;cursor: pointer;position: relative;}
.intro li .wrap {text-align: left;color:#fff;box-sizing: border-box;width: 100%;height:100%;padding:100px;position: absolute;left:0;top:0;transition: all 0.5s ease;opacity: 1;}
.intro li.act .wrap {z-index: 2;top: -100%;opacity: 0;}
.intro li .wrap + div {width:100%;height:100%;background-position: right;background-size: cover;background-repeat: no-repeat;}
.intro li .wrap + .medi_bg {background-image: url('/medi-images/visual01.jpg');}
.intro li .wrap + .total_bg {background-image: url('/images/bg_main03.jpg');}
.intro .nara_total .wrap {background-color: #333;box-sizing: border-box;}
.intro .nara_medi .wrap {background-color: #1e8aa1;}
.intro footer {background-color: transparent;padding:0 0;position: absolute;left:100px;bottom: 100px;width:calc(100% - 200px);}
.intro h2 {font-size: 4rem;font-weight: 300;line-height: 1.2;position: relative;filter: drop-shadow(0 0px 3px rgba(255, 255, 255, 0.5));}
.intro h2:before {content:'';display: block;width:1px;height:100px;background-color: #fff;position: relative;text-align: center;}
.intro footer span {font-size: 1.2rem;display: inline-block;margin-right:10px;}
.intro footer + div {width:100%;height:100%;position: absolute;left:0;top:0;z-index: -1;display: none;flex-wrap: nowrap;justify-content: center;overflow:hidden;}
.intro footer + div video {width: 100%;position: absolute;right:-50%;top:0;}
.intro footer + div.show {z-index: 1;display: flex;}
.intro footer img {display: block;margin-bottom: 30px;}
.m_btn {display: none;}

@media screen and (max-width:1024px) {
    .intro li .wrap {padding:70px;}
    .intro h2 {font-size: 3rem;}
    .intro footer {left:70px;bottom:70px;}
    .intro footer span {font-size: 0.9rem;}
    .intro footer img {max-width:40%;}
    .m_btn {display:block;width:150px;height:50px;border:1px solid #fff;line-height:50px;padding-left:20px;margin-top: 30px;position: relative;}
    .m_btn:after {content:'';width: 50px;height:1px;background-color: #fff;position: absolute;top:50%;right:20px;display: block;}
    .intro footer{width: calc(100% - 140px);}
}
@media screen and (max-width:800px) {
    .intro {height:auto;}
    .intro ul {flex-wrap: wrap;}
    .intro li {width: 100%;height:70vh;}    
    .intro .nara_total .wrap {background-color: rgba(51,51,51,0.7);}
    .intro .nara_medi .wrap {background-color: rgba(30,138,161,0.7);}
    .intro footer span{font-size: 1rem;}
    .intro h2 {font-size: 4rem;}
    .intro li .wrap + .medi_bg {background-image: url('/images/bg_main03.jpg');}
    .intro li .wrap + .total_bg {background-image: url('/medi-images/visual01.jpg');}
}
@media screen and (max-width:550px) {
    .intro li .wrap {padding:30px;}
    .intro footer {left:30px;bottom:30px;}
    .intro h2:before {height:70px;}
    .intro h2 {font-size: 3rem;}
    .intro footer{width: calc(100% - 100px);}
    .intro li {height:170vw;}
}
@media screen and (max-width:375px){
    .intro h2 {font-size: 2.5rem;}
    .intro footer span {font-size: 0.9rem;}
    .m_btn {width:120px;height:40px;line-height: 40px;padding-left:10px;margin-top: 15px;}
    .m_btn:after {right:10px;width:25px;}
    .intro footer img {max-width: 30%;margin-bottom: 15px;}
    .intro footer {width: calc(100% - 60px);}
}
@media screen and (max-width:320px){
    .intro h2 {font-size: 2rem;}
    .intro footer span {font-size: 0.8rem;line-height:1.3}
    .m_btn {font-size: 0.8rem;}
}