/* 공통 */
.sub_con {width: 1300px; margin:0 auto; position: relative; }
.w_box {background: #fff; position: relative; z-index: 2;   box-shadow: 0 0 13px 0 rgba(21, 21, 21, 0.08);}
.bot_bg {width: 100%; height: 301px; position: relative; z-index: 1; background: url('../img/vis_bot_bg.jpg') 50% 50% no-repeat; background-size:cover; }
.sub_p {font-size: 16px; font-weight: 300; color:#666; line-height: 32px; word-break: keep-all; }


/*Content CSS*/
#vison {text-align: center; padding:100px 0 0; }
/* section */
#vis_s1 h1 {font-size: 35px; font-weight:600; color:#000; font-family: 'Montserrat'; transition: color .3s ease; }
#vis_s1 h1 span {color: #dcaf3c; }
#vis_s1 .list {display: flex; margin:80px 0 -150px; text-align: center; position: relative;}
#vis_s1 .list::before {content: ''; width: 100%; position: absolute; left: 0; top: 0; border-style: solid; border-image:linear-gradient(to right, #e1b259, #f3e096, #d1a442); border-image-slice: 1; border-image-width: 5px 0 0 0; z-index: 2;}
#vis_s1 .list li {width: calc(100%/4); border-right: 1px solid #ddd; padding: 130px 0 0; height: 400px; position: relative; z-index: 1; }
#vis_s1 .list li::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; transition: opacity .3s ease;
background: url('../img/vis_box1_bg.jpg') 50% 50% no-repeat; background-size:cover; opacity:0; }
#vis_s1 .list li:last-child {border-right: 0; }

#vis_s1 .list h2 {font-size: 26px; font-weight: 700; color:#333;  font-family: 'Montserrat'; }
#vis_s1 .list h2 span {color: #dcaf3c; }
#vis_s1 .list h2::after {content: ''; display: block; width: 15px; height: 2px; background-color: #dcaf3c; margin:30px auto 30px; }
#vis_s1 .list .sub_p {font-size: 15px; line-height: 28px; transition: color .3s ease;}

/* box_img */
#vis_s1 .list li:nth-child(2)::before {background-image: url('../img/vis_box2_bg.jpg'); }
#vis_s1 .list li:nth-child(3)::before {background-image: url('../img/vis_box3_bg.jpg'); }
#vis_s1 .list li:nth-child(4)::before {background-image: url('../img/vis_box4_bg.jpg'); }

/* hover */
#vis_s1 .list li:hover::before {opacity: 1; }
#vis_s1 .list li:hover h2 {color:#fff;}
#vis_s1 .list li:hover .sub_p {color:#fff;}




@media screen and (max-width:1300px){

}


@media screen and (max-width:960px){

}

@media screen and (max-width:640px){

}