.main { display: flex; height: 100vh; overflow: hidden; }
.con_left {width: 460px;  background:url(../images/main/visual.jpg); border-right: 1px solid #ddd; padding: 20px; box-sizing: border-box; position: fixed;  height: 100%; overflow-y: auto; background-size: cover;  background-position:center ;   background-repeat: no-repeat; background-size: cover;}
.con_left .visual{text-align: center; margin-top: 30%;}
.con_left .date{ padding: 0 40px;}

.con_left .date .logos img{max-width: 380px; width: 100%; }
.con_left .visual .ment{color:#693521;font-size: 20px; position: absolute; bottom: 60px; left: 50%; transform: translate(-50%,-50%); width: 100%;}


.con_right {margin-left: 460px;  height: 100vh; overflow-x: auto; box-sizing: border-box;background-color: #fff; width: 100%; }
.cont1,.cont2,.cont3,.cont4{padding: 0 40px;}


.con_right .cont_wrap .img img{width: 100%; height: 100%; max-width: fit-content; max-height: fit-content;}

.con_right .cont1,.con_right .cont2,.con_right .cont3 { margin-top: 70px; }
.con_right .cont_wrap.flex_wrap {width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 70px 20px }
.con_right .cont_wrap.flex_wrap .cont {  width: calc((100% - 20px * 2) / 3);   box-sizing: border-box; }

.con_right .cont_tit{font-size: 30px; font-weight: bold;color: black; margin-bottom: 30px; padding-top: 30px; }  
.con_right .cont_tit span{font-weight: normal;}
.con_right .cont1 .cont_tit{color:#ff8212}
.con_right .cont2 .cont_tit{color:#326ae9}
.con_right .cont3 .cont_tit{color:#e72c22}
.con_right .cont4 .cont_tit{color:#ffdb33}
.con_right .cont_wrap .cont  .tit{font-size: 20px;}
.con_right .cont1 .cont_wrap .cont .tit,.con_right .cont2 .cont_wrap .cont .tit,.con_right .cont4 .cont_wrap .cont .tit{padding-top: 20px;}
.con_right .cont3 .cont_wrap .cont .tit {border-top:1px solid black; padding:20px 0; word-break: keep-all;}


.con_right .banner{display: flex; justify-content: space-between; margin-bottom: 100px;}
.con_right .banner .cont{width: 50%;}
.con_right .banner>:nth-child(1){margin-right: 20px;}


@media screen and (min-width: 1921px) {
    .con_right .cont_wrap.flex_wrap .cont {width:fit-content; max-width: 1460px;}
    .con_right .banner{display: flex; justify-content:left !important}
    .con_right .banner .cont{width:fit-content}
}

@media (max-width: 1280px){
    .con_left {width: 400px;}
    .con_right{margin-left: 400px;}
    .con_right .cont_wrap.flex_wrap .cont {  width: calc((100% - 20px * 1) /2);   box-sizing: border-box; }

}

@media (max-width: 1024px){
.main { display: block;  height: auto;   }
.con_left .visual{text-align: center; margin-top: 20%;  }
.con_left { position: relative; width: 100%; min-height: 1020px!important; margin-bottom: 20px;  height: 100%; margin: 0;border-right: none !important; }
.con_right { margin-left: 0;  width: 100%;   height: auto; }
}

@media (max-width: 768px){
    .con_left { display: none;}
    .cont1{margin-top: 80px; padding: 0 20px;}
    .cont2,.cont3,.cont4{margin-top: 20px!important; padding: 0 20px;}
    .con_right .cont_wrap.flex_wrap {gap: 30px 20px}
    .cont .tit{word-break: keep-all;}
    .con_right .cont3 .cont_wrap .cont .tit {padding:20px  0; word-break: keep-all; height: 90px}
    .con_right .banner{display: block;}
    .con_right .banner .cont{width: 100%;}
    .con_right .banner>:nth-child(1){margin-right: 0px; margin-bottom: 20px;}

    }
    @media (max-width: 650px){
        .con_right .cont3 .cont_wrap .cont .tit { height: 110px}
    }
 @media (max-width: 480px){
    .con_left .visual{text-align: center; margin-top: 30%;  }
    .con_right .cont3 .cont_wrap .cont .tit { height:fit-content}
    .con_right .cont_wrap.flex_wrap .cont { width: 100%;  }
 }