@charset "utf-8";

/* sub_visual_wrap */
.sub_visual_wrap{height:700px; max-height: 100vh; background-color: #fff;}
.sub_visual_wrap .sub_visual_inner{position: relative; height:100%;}
.sub_visual_wrap .left_con{display: none; position: absolute; z-index: 3; top:0; left:0; width: 100px; height: 100vh; background-color: rgba(255,255,255,0.15);}
.sub_visual_wrap .sub_visual_img_wrap{position: absolute; z-index: -2; top:0; left:0;}
.sub_visual_wrap .sub_visual_img_con{position: absolute; z-index: -2; top:0; left:0; width:100%; height:100%; background-image: url('../img/sub_visual_img_000.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover;}
.sub_visual_wrap .dim_con{position: absolute; z-index: -1; top:0; left:0; width:100%; height:100%; background-color: #000; opacity: 0.1;}
.sub_visual_wrap .sub_visual_text_wrap{z-index: 2; height:100%;}
.sub_visual_wrap .sub_visual_text_con{height: 100%; border-left:1px solid transparent; border-right:1px solid transparent;}
.sub_visual_wrap .sub_visual_text_con:before{display: none; content:''; position:absolute; z-index: -1; top:0; left:33.33%; height: 100%; border-right: 1px solid rgba(255,255,255,0.2);}
.sub_visual_wrap .sub_visual_text_con:after{display: none; content:''; position:absolute; z-index: -1; top:0; left:66.66%; height: 100%; border-right: 1px solid rgba(255,255,255,0.2);}
.sub_visual_wrap .sub_visual_text{display:table;}
.sub_visual_wrap .sub_visual_title{margin-bottom: 15px; max-width: 320px; margin-left:auto; margin-right:auto; float:none;}
.sub_visual_wrap .sub_visual_title br{display: none;}
.sub_visual_wrap .sub_visual_desc{max-width: 350px; margin-left:auto; margin-right:auto; float: none;}

@media all and (min-width:768px){

    /* sub_visual_wrap */
    .sub_visual_wrap{height: 100vh;}
    .sub_visual_wrap .sub_visual_title br{display: block;}
}

@media all and (min-width:992px){

    /* sub_visual_wrap */
    .sub_visual_wrap .left_con{display: block;}

    .sub_visual_wrap .sub_visual_text_con:before{display: block;}
    .sub_visual_wrap .sub_visual_text_con:after{display: block;}

    .sub_visual_wrap .sub_visual_desc{max-width: 500px;}
}

@media all and (min-width: 1200px){
    .sub_visual_wrap .sub_visual_text_con:before{left:calc(1170px / 3)}
    .sub_visual_wrap .sub_visual_text_con:after{left:calc(1170px / 3 * 2)}
}

@media all and (min-width: 1740px){
    /* sub_visual_wrap */
    .sub_visual_wrap .sub_visual_text_con{border-color:rgba(255,255,255,0.2);}
}