.main_visual{padding-top:120px}
.main_visual ul{display:flex; height:840px; }
.main_visual ul li{overflow:hidden; position:relative; transition:all 0.5s ease; cursor:pointer; background-size: cover !important;}
.main_visual ul li:first-child{ background-size: cover}
.main_visual ul li.con2{background-size: cover; background-position:72% !important; position:relative;}
.main_visual ul li.con3{ background-size: cover; background-position:68% !important; position:relative;}
.main_visual ul li.con4{ background-size: cover; background-position:64% !important; position:relative;}
.main_visual ul li.con5{ background-size: cover; background-position:60% !important; position:relative;}
.main_visual ul li.con2:after, .main_visual ul li.con3:after, .main_visual ul li.con4:after, .main_visual ul li.con5:after{content:''; position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.main_visual ul li.con2 .on_box h3, .main_visual ul li.con2 .on_box p, .main_visual ul li.con3 .on_box h3, .main_visual ul li.con3 .on_box p, .main_visual ul li.con4 .on_box h3, .main_visual ul li.con4 .on_box p, .main_visual ul li.con5 .on_box h3, .main_visual ul li.con5 .on_box p{color:#000}

.main_visual ul li .on_box{opacity:0; padding-left:60px; position:absolute; bottom:32%}
.main_visual ul li h2{font-size:45px; color:#fff;  font-family: 'Montserrat'; transition:all 0.2s ease; transform: rotate(90deg); position: absolute;right: 0; left: 0;top: 220px; z-index:9}
.main_visual ul li span{background:url('/img/main_more.png') no-repeat center center; background-size:56px; width:56px; height:56px; position: absolute;bottom: 80px;left: 0;right: 0;margin: 0 auto;  transition:all 0.2s ease; z-index:9}
.main_visual ul li .on_box h3{font-size:80px; color:#fff;  font-family: 'Montserrat';}
.main_visual ul li .on_box p{font-size:18px; color:#fff; margin:35px 0 40px; line-height:30px; font-weight: 300;}
.main_visual ul li .on_box .on_btn{z-index:9;width:196px; height:56px; text-align:center; color:#000; line-height:58px;}
.main_visual ul li .on_box .on_btn a{font-size:16px; color:#000; background-color:#fff;  font-family: 'Montserrat'; font-weight:bold; width:100%; height:100%; display:block;  transition:all 0.5s ease; border-radius:100px; }
.main_visual ul li .on_box .on_btn a:hover{background:rgba(250,250,250,0.85); }
.main_visual ul li:hover span{transform: rotate(90deg);}

.main_visual li.on {width:68%;display: flex;align-items: center; }
.main_visual li.on:after{display:none}
.main_visual li.on h2, .main_visual li.on span{display:none}
.main_visual li.on .on_box{opacity:1}

.main_visual ul li h4{font-size:14px; margin:10px 0; display:none}

.main_visual li {width:16%;}

@media(max-width:1200px){
.main_visual ul li .on_box h3{font-size:50px; margin-bottom:20px}
.main_visual ul li .on_box p{display:none}
.main_visual ul li .on_box{padding-left:8%; bottom:10%}
.main_visual ul li h2{font-size:34px; top:20%}
.main_visual ul li.con2{background-position:53%}
.main_visual li.on{align-items: unset;}
}

@media(max-width:768px){
.main_visual{padding-top:70px}
.main_visual ul{flex-flow: column; height:auto}
.main_visual li.on{width:100%;}
.main_visual ul li{width:100%; padding:20% 0;}
.main_visual ul li h2, .main_visual ul li span{display:none}

.main_visual ul li .on_box{position:static; opacity:1;}
.main_visual ul li .on_box h3{font-size:24px;}
.main_visual ul li .on_box p{font-size:14px; line-height:24px; margin:10px 0 30px;}
.main_visual ul li .on_box .on_btn{width:130px; line-height:40px; height:40px;}
.main_visual ul li .on_box .on_btn a{font-size:14px}
.main_visual ul li.con2:after, .main_visual ul li.con3:after{display:none}
.main_visual ul li.con3{border-top:1px solid #ccc}

.main_visual ul li h4{display:block; margin:0 0 20px}
.main_visual ul li .on_box h3{margin-bottom:10px}
.main_visual ul li.con2{background-position: 15% !important;}
.main_visual ul li .on_box{padding-left:4%}
}