/* 공통 */
.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: 367px; position: relative; z-index: 1; background: url('../img/org_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*/
.business {padding:100px 0 130px; text-align: center; }
.business h1 {font-size: 24px ;font-weight:300; color:#000; letter-spacing: -.5px; line-height: 41px; font-family: 'NanumSquare',sans-serif;}
.business h1 b {font-weight: 800; }
.business h1 span {color:#dcaf3c; }
.business .list {display: flex; justify-content: space-between; margin-top: 70px; }
.business .list li {width: 310px; background: #fff; position: relative; z-index: 1; overflow: hidden; box-shadow: 0 0 18px 0 rgba(29, 29, 29, 0.08); padding:120px 0 90px; text-align: center;}
.business .list li::before {content: '';  width: 100%; height: 4px; position: absolute; transition: all .3s ease; z-index: -1; left: 0; top:0; border-image:linear-gradient(to right, #000, #000); border-image-slice: 1;border-style: solid;  border-image-width: 4px 0 0 0; }
.business .list li .cir {width: 115px; height: 115px; border-radius: 50%; top:-55px; position: absolute; left:50%; transform:translateX(-50%); overflow: hidden;
background-image:linear-gradient(to right, #e1b259, #f3e096, #d1a442); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 17px;}
.business .list li .cir::before {content: ''; display:block; width: 100%; height: 100%; background: #000; position: absolute; left: 0; top: 0; z-index: -1; opacity: 1; transition: opacity .3s ease;}
.business .list li .cir h2 {font-size:30px; font-weight: 700; color:#fff; font-family: 'Montserrat';  line-height: 30px;   text-shadow: 0.7px 0.7px 4px rgba(106, 76, 5, 0.12); }
.business .list li .txt h3 {font-size: 21px; font-weight: 800; line-height: 66px; font-family: 'NanumSquare',sans-serif; white-space: pre-wrap; transition: all .3s ease; }
/* .business .list li .txt p {font-size: 15px; font-weight: 300; line-height: 26px;letter-spacing: -.5px; max-width: 185px; word-break: keep-all; margin:25px auto 0; transition: all .3s ease;} */
.business .list li .txt p {width: 185px; height: 121px; background: url('../img/b1_box1_txt.png') 50% 50% no-repeat;  margin:35px auto 0; }
.business .list li .bg {display: block; position: absolute; width: 100%; height: 100%; z-index: -2; background: url('../img/b1_box1_bg.jpg') 50% 50% no-repeat; background-size:cover;
left: 0 ;top: 0 ; transition: opacity .3s ease; opacity: 0;}

.business .list li .txt h3.line2 {line-height:33px; }

/* bg img */
.business .list li:nth-child(2) .txt p {background-image: url('../img/b1_box2_txt.png'); }
.business .list li:nth-child(3) .txt p {background-image: url('../img/b1_box3_txt.png'); }
.business .list li:nth-child(4) .txt p {background-image: url('../img/b1_box4_txt.png'); }

.business .list li:nth-child(2) .bg {background-image: url('../img/b1_box2_bg.jpg'); }
.business .list li:nth-child(3) .bg {background-image: url('../img/b1_box3_bg.jpg'); }
.business .list li:nth-child(4) .bg {background-image: url('../img/b1_box4_bg.jpg'); }
.business .list li:nth-child(5) .bg {background-image: url('../img/b1_box5_bg.jpg'); }

/* hover */
.business .list li:hover::before {border-style: solid; z-index: 1; border-image: linear-gradient(to right, #e1b259, #f3e096, #d1a442); border-image-slice: 1; border-image-width: 4px 0 0 0;}
.business .list li:hover .cir::before {opacity: 0;}
.business .list li:hover .bg {opacity: 1; }
.business .list li:hover .txt h3, .business .list li:hover .txt p {color:#fff; text-shadow: 1.3px 1.6px 1px rgba(0, 0, 0, 0.36);}
.business .list li:hover .txt p {background-image: url('../img/b1_box1_txt_hv.png');}
.business .list li:hover:nth-child(2) .txt p {background-image: url('../img/b1_box2_txt_hv.png'); }
.business .list li:hover:nth-child(3) .txt p {background-image: url('../img/b1_box3_txt_hv.png'); }
.business .list li:hover:nth-child(4) .txt p {background-image: url('../img/b1_box4_txt_hv.png'); }




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

}


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

}

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

}
