@charset "utf-8";

/*main banner*/
.main-bn-swip .s1{background-image:url(../img/main/image1.jpg);}
.main-bn-swip .s2{background-image:url(../img/main/image2.jpg);}
.main-bn-swip .s3{background-image:url(../img/main/image3.jpg);}
/*intro*/
.intro_con{ width: 100%; height: auto; padding: 166px 0; position:relative;}
.intro_con:before{ content:''; width: 100%; height: 100%; background: url(../img/main_con1.png) 50% 50% no-repeat; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.intro{display:flex;width:1280px;margin:0 auto;}
.intro .con-tit{margin-bottom:20px; text-align: left;}
.intro-in{width: 100%;}
.intro .con-tit h2{font-size: 64px; letter-spacing: 22px; font-weight: 300; margin-left:4px; line-height: 1.25em; color:#a6835c; padding-bottom: 36px; margin-bottom: 42px; position:relative;}
.intro .con-tit h2 b{font-size: 68px; letter-spacing: 20px; margin-left:-4px;}
.intro .con-tit h2:after{content:''; width: 50px; height: 4px; position: absolute; bottom: 0; left: 4px; background:#a6835c;}
.intro .con-tit h3{font-weight: 100; line-height: 1.125em;}
.intro .intro-txt p{font-size: 15px; line-height: 1.5em; padding-bottom: 14px; font-weight: 300;}



.business_con{ width: 100%; height: auto; padding: 166px 0; position:relative;}
.business_con:before{ content:''; width: 100%; height: 100%; background: url(../img/main_con2.png) 50% 50% no-repeat; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.business{display:flex;width:1280px;margin:0 auto; justify-content:space-between; }
.business .con-tit{margin-bottom:20px; margin-top:82px; text-align: right;}
.business-in{width: auto; display: flex;}
.business .con-tit h2{font-size: 60px; letter-spacing: 22px; font-weight: 300; line-height: 1.25em; color:#718097; padding-bottom: 30px; margin-bottom: 40px; position:relative;}
.business .con-tit h2 b{font-size: 64px; letter-spacing: 20px; margin-right:6px;}
.business .con-tit h2:after{content:''; width: 50px; height: 4px; position: absolute; bottom: 0; right: 20px; background:#718097;}
.business .con-tit h3{font-weight: 100; line-height: 1.125em;}
.business .business-txt p{font-size: 15px; line-height: 1.5em; padding-bottom: 14px; text-align: right; font-weight: 300;}
.business .business-image{width: 60%;}
.business .business-image .left_con{position:relative; display: flex; justify-content:space-around; }
.business .business-image .left_con .items{width: 278px; height: auto; }
.business .business-image .left_con .items .image_con{width: 100%; height: 278px;}
.business .business-image .left_con .item1 .image_con{background:url(../img/1.jpg) 50% no-repeat; background-size:cover;}
.business .business-image .left_con .item2 .image_con{background:url(../img/2.jpg) 50% no-repeat; background-size:cover;}
.business .business-image .left_con .item3 .image_con{background:url(../img/3.jpg) 50% no-repeat; background-size:cover;}

.business .business-image .left_con .left{display: flex; flex-direction: column; align-content: center;}
.business .business-image .left_con .right{display: flex; flex-direction: column; align-self: center;}
.business .business-image .left_con .text_con{ margin-top: 20px;}
.business .business-image .left_con .text_con h5{ margin-bottom: 18px; color: #718097; font-size: 18px; font-weight: 600;}
.business .business-image .left_con .text_con p{font-size: 14px; line-height: 1.25em; font-weight: 300;}

.business .business-image .left_con .items.item1{margin-bottom: 70px; margin-top: 70px;}
.business .business-image .left_con .items.item2{}
.business .business-image .left_con .items.item3{}


.tech_con{ width: 100%; position: relative; }
.tech_con .inner_con{ margin: 0 auto; position: relative; width: 100%;}
.tech_con .inner_con .inner{ display: flex; width: 100%; flex-wrap:wrap; }
.tech_con .inner_con .inner .item{ width: 50%; height: 540px; display: flex; position: relative; flex-wrap:wrap; align-content: center; overflow: hidden;}
.tech_con .inner_con .inner .item>a{ width: 100%; height: 100%; display: flex; flex-wrap:wrap; align-content: center; z-index: 2;}
.tech_con .inner_con .inner .item.item1:before{content:''; width: 100%; height: 100%; background: url(../img/main/image2.jpg) 50% no-repeat; background-size: cover; position: absolute; aspect-ratio: auto 16 / 9; display: block; top: 50%; left:50%; transform:translate(-50%, -50%); filter:brightness(.5); z-index: 1; transition: all .4s ease-in-out;}
.tech_con .inner_con .inner .item.item2:before{content:''; width: 100%; height: 100%; background: url(../img/main/image4.jpg) 50% no-repeat; background-size: cover; position: absolute; aspect-ratio: auto 16 / 9; display: block; top: 50%; left:50%; transform:translate(-50%, -50%); filter:brightness(.5); z-index: 1; transition: all .4s ease-in-out;}
.tech_con .inner_con .inner .item1:hover:before{ filter:brightness(.8); }
.tech_con .inner_con .inner .item2:hover:before{ filter:brightness(.8); }
.tech_con .inner_con .inner .item .text_con{ width: 100%; text-align: center; padding: 0; color:#fff; }
.tech_con .inner_con .inner .item .text_con i{ font-size: 54px; margin-bottom: 14px; text-shadow: 0 1px 3px rgba(0,0,0,1);}
.tech_con .inner_con .inner .item .text_con h2{ font-weight: 700; font-size: 34px; padding-bottom:20px; text-shadow: 0 1px 3px rgba(0,0,0,1);}
.tech_con .inner_con .inner .item .text_con h3{ padding:20px 0 10px; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,1);}
.tech_con .inner_con .inner .item .text_con h5{ font-size: 16px; line-height: 2em; font-family: 'Jeju Myeongjo', serif; text-shadow: 0 1px 3px rgba(0,0,0,1); transition: margin .3s ease-in-out;}
.tech_con .inner_con .inner .item .text_con h5 i{ font-size: 16px; }

.tech_con .inner_con .inner .item1:hover .text_con h5{ margin-left: 10px;}
.tech_con .inner_con .inner .item2:hover .text_con h5{ margin-left: 10px;}


/************************반응형****************************/

  

  @media screen and (min-width:1px) and (max-width:1280px){
    .intro{width:100%;padding:0px 20px;}
    .business{display:flex;width:100%;margin:0 auto; justify-content:space-between; }
}

  @media screen and (min-width:1px) and (max-width:1024px){
    
    .intro .con-tit{margin-bottom:20px;}
    .intro-txt>p{font-size:13px;line-height:23px;}
      
    .business{ flex-direction: column-reverse;}
      .business .business-image{width: 100%;}
      .business .business-txt{width: 100%; padding-right: 20px;}
      .business_con{padding:0 0 160px 0;}
    
}

@media screen and (min-width:1px) and (max-width:780px){
    .intro{margin:0 auto;}
    .intro-txt>p{font-size:12px;line-height:22px;}
    .intro_con:before{ background: url(../img/main_con1.png) 70% 50% no-repeat; opacity:0.2; }
    .business_con:before{ opacity: 0.2;}
    .business .business-image .left_con .items{ width: 200px;}
    .business .business-image .left_con .items .image_con{height: 200px;}
    
    .tech_con .inner_con .inner{ flex-direction: column;}
    .tech_con .inner_con .inner .layout{display: none;}
    .tech_con .inner_con .inner .item{ width: 100%; height: auto;}
    .tech_con .inner_con .inner .item.item1{ margin-bottom: 1px;}
    .tech_con .inner_con .inner .item .text_con{ padding:60px 0;}
    .tech_con .inner_con .inner .item.item1:before{ filter:brightness(.7); }
    .tech_con .inner_con .inner .item.item2:before{ filter:brightness(.7); }

}

@media screen and (min-width:1px) and (max-width:640px){
    .business .business-image .left_con .items{ width: 180px;}
    .business .business-image .left_con .items .image_con{height: 180px;}
}


@media screen and (min-width:1px) and (max-width:480px){
    .business .business-image .left_con .items{ width: 160px;}
    .business .business-image .left_con .items .image_con{height: 160px;}
}