/* Visual */
.visual{
    overflow: hidden; height: 723px; background: #000; position: relative;
}
.visual .swiper-container{
    height: 100%;
    -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s;
    opacity: 0;
}
.visual .swiper-wrapper { height: 100%; }
.visual .swiper-slide { overflow: hidden; height: 100%; }
.visual .prev,
.visual .next{
    z-index: 2; position: absolute; top: 0; bottom: 0; margin: auto; cursor: pointer !important;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
    opacity: 0;
}
.visual .prev{
    left: 100px; width: 40px; height: 70px; background: url('/child/img/visual/prev.png') no-repeat center;
    -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.visual .next{
    right: 100px; width: 40px; height: 70px; background: url('/child/img/visual/next.png') no-repeat center;
    -webkit-transform: translateX(50px); transform: translateX(50px);
}
.slide-pagination-container{position: absolute; top: 340px; left: 50%; transform: translate(-50%, 0); z-index: 10; width: 100%}
.visual .slide-pagination{
    height: 10px;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
    opacity: 0;
}
.visual .slide-pagination.swiper-pagination-bullets { z-index: 2; font-size: 0; }
.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 3px; width: 10px; height: 100%; background: transparent;  border-radius: 5px; border: 2px solid #fff;
    -webkit-transition: all ease .2s; transition: all ease .2s; opacity: 1
}
.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { width: 46px; background-color: #fff}

.visual .slide-pagination.on.swiper-pagination-bullets .swiper-pagination-bullet{border: 2px solid #222;}
.visual .slide-pagination.on.swiper-pagination-bullets .swiper-pagination-bullet-active {background-color: #222}

.visual .background{
    height: 723px;
    -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
    -webkit-transform: scale(1.1); transform: scale(1.1);
    background-size: cover; background-repeat: no-repeat; background-position: center;
}
.visual .background--1 { background-image: url('/child/img/visual/v1.png');}
.visual .background--2 { background-image: url('/child/img/visual/v2.png');}
.visual .background--3 { background-image: url('/child/img/visual/v3.png');}
.visual .swiper-container-initialized { opacity: 1; }
.visual .swiper-container-initialized .background { -webkit-transform: none; transform: none; }
.visual .swiper-container-initialized .prev,
.visual .swiper-container-initialized .next,
.visual .swiper-container-initialized .slide-pagination{
    -webkit-transform: none; transform: none;
    opacity: 1;
}

.slide-txt{padding-top: 150px;}
.slide-txt h1{font-size: 60px; line-height: 75px; margin-bottom: 20px; font-weight: 400; color: #fff;
  opacity: 0; position: relative; left: -200px;
  -webkit-transition: all ease 1.3s 0.3s; transition: all ease 1.3s 0.3s;}
.slide-txt h1 strong{font-weight: 700; color: #0095da}
.slide-txt p{font-size: 26px; line-height: 1; color: #fff; opacity: 0; position: relative; left: -200px;
  -webkit-transition: all ease 1.3s 0.5s; transition: all ease 1.3s 0.5s;}

.slide-txt-b h1{color: #222}
.slide-txt-b p{color: #222}

.swiper-slide-active .slide-txt h1{opacity: 1; left: 0;}
.swiper-slide-active .slide-txt p{opacity: 1; left: 0;}

@media(min-width:1200px){
  .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet:hover{background-color: #fff}
  .visual .slide-pagination.on.swiper-pagination-bullets .swiper-pagination-bullet:hover{background-color: #222}
}

@media(max-width:1024px){
    .visual, .visual .background { height: 600px; }
    .visual .prev,
    .visual .next { display: none; }

    .slide-pagination-container{top: unset; bottom: 50px}
    .visual .slide-pagination.swiper-pagination-bullets{display: flex; justify-content: center;}

    .background .container{height: 500px}
    .slide-txt{padding-top: 80px; padding-left: 30px; height: 100%; }
    .slide-txt h1{font-size: 48px; line-height: 60px; margin-bottom: 20px;}
    .slide-txt p{font-size: 20px;}

    .visual .slide-pagination{height: 6px}
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
        margin: 0 2px; width: 6px; height: 100%; border-width: 1px !important;
    }
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { width: 30px;}

    .visual .background--1 { background-image: url('/child/img/visual/v1-sp.png'); background-position: right bottom;;}
    .visual .background--2 {background-position: 70% center;}
    .visual .background--3 {background-position: 70% center;}
}
@media(max-width:768px){
    .background .container{height: 500px}
    .visual, .visual .background { height: 500px; }

    .slide-txt{padding-top: 50px; padding-left: 15px;}
    .slide-txt h1{font-size: 30px; line-height: 42px; margin-bottom: 10px;}
    .slide-txt p{font-size: 16px; line-height: 26px;}

    .visual .background--1 { background-image: url('/child/img/visual/v1-mo.png');}
}
@media(max-width:500px){
    .background .container{height: 350px}
    .visual, .visual .background { height: 350px; }
}

/* 라벨 */
.port-link{margin-top: -110px; position: relative; z-index: 10}
.port-wrap{width: 100%; display: flex; border-radius: 8px; flex-wrap: wrap;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 12%); overflow: hidden; background-color: #fff}
.port-wrap li{width: calc(100% / 6); border-right: 1px solid #e1e1e1;}
.port-wrap li:last-child{border-right: 0}
.port-wrap li a{width: 100%; height: 100%; text-align: center;
    background-color: #fff; display: block;
    -webkit-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s;
    padding: 33px 5px; display: flex; flex-direction: column; align-items: center;
    justify-content: center;}
.port-icon{width: 57px; height: 87px; margin-bottom: 10px; background-size: cover;
    background-repeat: no-repeat; background-position: center;
    -webkit-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s;}
.port-icon--1{background-image: url(/child/img/main/port-link1.png);}
.port-icon--2{background-image: url(/child/img/main/port-link2.png);}
.port-icon--3{background-image: url(/child/img/main/port-link3.png);}
.port-icon--4{background-image: url(/child/img/main/port-link4.png);}
.port-icon--5{background-image: url(/child/img/main/port-link5.png);}
.port-icon--6{background-image: url(/child/img/main/port-link6.png);}
.port-title{color: #666; font-size: 18px; line-height: 1;
    -webkit-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s;}

@media(min-width:1200px){
    .port-wrap li a:hover{background-color: #0060af}
    .port-wrap li a:hover .port-icon--1{background-image: url(/child/img/main/port-link1-on.png);}
    .port-wrap li a:hover .port-icon--2{background-image: url(/child/img/main/port-link2-on.png);}
    .port-wrap li a:hover .port-icon--3{background-image: url(/child/img/main/port-link3-on.png);}
    .port-wrap li a:hover .port-icon--4{background-image: url(/child/img/main/port-link4-on.png);}
    .port-wrap li a:hover .port-icon--5{background-image: url(/child/img/main/port-link5-on.png);}
    .port-wrap li a:hover .port-icon--6{background-image: url(/child/img/main/port-link6-on.png);}
    .port-wrap li a:hover .port-title{color: #fff;}
}

@media(max-width:1024px){
    .port-link{margin-top: -30px}
    .port-wrap li{width: calc(100% / 3);}
    .port-wrap li:nth-child(3){border-right: 0}
    .port-wrap li:nth-child(1),
    .port-wrap li:nth-child(2),
    .port-wrap li:nth-child(3){border-bottom: 1px solid #e1e1e1}

    .port-wrap li a{padding: 20px 5px}

    .port-icon{width: 39px; height: 59px}
    .port-title{font-size: 14px}
}

@media(max-width:768px){
    .port-wrap li{width: calc(100% / 2)}
    .port-wrap li:nth-child(2n){border-right: 0}
    .port-wrap li:nth-child(3){border-right: 1px solid #e1e1e1}
    .port-wrap li:nth-child(4){border-bottom: 1px solid #e1e1e1}

}
@media(max-width:500px){

}

/* common */
section{padding: 120px 0}

section:not(.section4) .container{padding: 0 70px !important;}

.section-row .container{display: flex;}

.main-sub-title{margin-bottom: 40px}
.main-sub-title h3{line-height: 1; font-weight: 400; font-size: 60px; position: relative;
  padding-top: 20px}
.main-sub-title h3::before{content: ""; display: block; position: absolute; width: 25px; height: 4px;
  background-color: #005fae; top: 0; left: 0}
.main-sub-title h3 strong{font-weight: 700}

@media(max-width:1200px){
  section{padding: 80px 0}

  .section-row .container{display: block;}
  section:not(.section4) .container{padding: 0 15px !important;}
}

@media(max-width:1024px){

  .main-sub-title{margin-bottom: 30px}
  .main-sub-title h3{font-size: 48px;}

  .portpolio-top .main-btn{margin-bottom: 30px !important;}
}

@media(max-width:768px){

  .main-sub-title{margin-bottom: 25px}
  .main-sub-title h3{font-size: 30px; padding-top: 10px;}
  .main-sub-title h3::before{width: 20px; height: 2px;}

  .portpolio-top .main-btn{margin-bottom: 25px !important;}

}
@media(max-width:500px){

}

/* 포트폴리오 */
.portpolio-top{display: flex; justify-content: space-between; align-items: flex-end;}
.port-btn, .s3-btn{display: flex;}
.portpolio-top .main-btn{margin-bottom: 40px}
.main-btn{width: 50px; height: 50px; display: block;  background-size: cover;
    background-repeat: no-repeat; background-position: center;
    -webkit-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s;}
.main-prev-btn{background-image: url(/child/img/main/main-prev.png); margin-right: 5px}
.main-next-btn{background-image: url(/child/img/main/main-next.png)}
.main-none{display: none}

@media(min-width:1200px){
  .main-prev-btn:hover{background-image: url(/child/img/main/main-prev-h.png);}
  .main-next-btn:hover{background-image: url(/child/img/main/main-next-h.png)}
}

@media(max-width:1024px){

}

@media(max-width:768px){

}
@media(max-width:500px){

}

/* 라벨 견적문의 */
.section2{background-color: #f5f5f5}
.section2-btn a{background-image: url(/child/img/main/s2-btn.png);}
.section-left{margin-right: 100px; min-width: 356px; display: flex; flex-direction: column;
    justify-content: space-between; min-height: 300px}
.section-left p{color: #666; line-height: 28px; font-size: 18px;}

.section-right{width: 100%; padding-top: 30px;}
.ask-table{width: 100%; background-color: #fff; border-top: 1px solid #005fae}
.ask-table tr>*{padding: 15px; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; line-height: 1; font-size: 15px;}
.ask-table tr>th{font-weight: 700}
.ask-table thead{background-color: #f6fbff}
.ask-table tbody tr:nth-child(2n){background-color: #f5f5f5}
.ask-table tbody tr td:nth-child(2){text-align: left;}
.ask-table tbody tr td:last-child{font-weight: 700; color: #da1b1b}

@media(max-width:1200px){
  .section-left{margin-right: 0; min-width: unset; min-height: unset; width: 100%; display: block;}
}

@media(max-width:1024px){
  .ask-table tr>*{font-size: 14px; padding: 10px;}

}

@media(max-width:768px){

}
@media(max-width:500px){
  .ask-table tr>*{padding: 5px 2px; font-size: 12px}
}

/* 대화UCP 소식 */
.section3-btn{ margin-top: 60px}
.section3-btn a{background-image: url(/child/img/main/s3-btn.png);}

.section3-slide .swiper-container{width: 1210px}
.news-thumb{position: relative; width: 100%; height: 0; padding-top: 100%;}
.news-thumb__img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: 101%; background-position: center;}

.section3 .section-left{padding-bottom: 25px}
.section3 .swiper-wrapper{padding: 0 0 25px 15px; }
.section3 .swiper-slide{border-radius: 8px; overflow: hidden; background-color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1); cursor: pointer;}
.news-thumb__con{padding: 30px 35px;}
.news-thumb__con-tit{width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
    font-size: 18px; line-height: 1; font-weight: 700; margin-bottom: 32px;}
.news-thumb__con-date{font-size: 14px; color: #666; line-height: 1;}

@media(max-width:1200px){
  .section3{padding-bottom: 95px;}
  .section3-slide .swiper-container{width: 100%; padding: 0 15px 25px 15px}
  .section3 .swiper-wrapper{padding: 0}

  .section3 .section-left{padding-bottom: 0}

  .section3 .section-left-top{position: relative; }

  .section3 .section-right{padding-top: 10px}

  .s3-btn{width: 100%; justify-content: flex-end; padding-right: 15px}

  .button-icon{margin-top: 10px;}
}

@media(max-width:1024px){
    .section3{padding-bottom: 55px;}

    .section-left p{line-height: 24px; font-size: 14px;}

    .section2 .main-sub-title, .section3 .main-sub-title{margin-bottom: 10px}

    .main-btn{width: 30px; height: 30px;}
    .main-prev-btn{margin-right: 3px}

    .news-thumb__con{padding: 20px 25px}
    .news-thumb__con-tit{font-size: 16px; margin-bottom: 10px}
    .news-thumb__con-date{font-size: 12px}


}

@media(max-width:768px){
    .main-btn{width: 26px; height: 26px;}

}
@media(max-width:500px){

}

/* 고객센터, 계좌안내 */
.section4{background-image: url(/child/img/main/s4-bg.png); background-size: cover;
    background-repeat: no-repeat; background-position: center;}
.s4-content{width: 50%; color: #fff; display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    padding: 0 100px;}
.s4-sub-title{display: flex; justify-content: center; align-items: center; margin-bottom: 30px}
.s4-sub-title>p{font-size: 24px; font-weight: 700; margin-left: 7px; line-height: 1}
.s4-content>h4{font-size: 46px; line-height: 1; font-weight: 700; margin-bottom: 25px;}
.s4-content>p{font-size: 20px; color: #e6e6e6; margin-bottom: 30px;}
.s4-info{padding: 40px 25px; width: 100%; min-height: 190px;}
.s4-content1 .s4-info{border-top: 1px solid #6c95ba; border-bottom: 1px solid #6c95ba}
.s4-content2 .s4-info{border-top: 1px solid #949494; border-bottom: 1px solid #949494}
.s4-info li{display: flex;}
.s4-info li:first-child{margin-bottom: 24px;}
.s4-info li span{display: block; width: 150px; height: 28px; margin-right: 20px;
    border-radius: 30px; display: flex; align-items: center;
    justify-content: center; font-size: 18px; font-weight: 700}
.s4-content1 .s4-info li span{ border: 1px solid #6c95ba;}
.s4-content2 .s4-info li span{ border: 1px solid #949494;}
.s4-info li p{position: relative; top: 2px; font-size: 18px; color: #cfcfcf;
    line-height: 28px; font-weight: 700}
.s4-content1 .s4-info li{color: #d0d0d0}
.s4-content2 .s4-info li{color: #cfcfcf}

@media(max-width:1200px){
  .section4{padding: 0; background: none; width: 100%; position: relative; overflow: hidden !important;}
  .s4-content{width: calc(100% + 30px); position: relative; left: -15px;  background-size: cover;
      background-repeat: no-repeat; background-position: center; padding: 120px 100px}
  .s4-content1{background-image: url(/child/img/main/s4-bg1.png);}
  .s4-content2{background-image: url(/child/img/main/s4-bg2.png);}
  .s4-info{min-height: unset}
}

@media(max-width:1024px){
  .s4-content{padding: 80px 100px}
  .s4-sub-title>img{width: 20px; height: auto;}
  .s4-sub-title>p{font-size: 16px; margin-right: 4px}
  .s4-sub-title{margin-bottom: 15px}
  .s4-content>h4{font-size: 24px; margin-bottom: 15px;}
  .s4-content>p{font-size: 14px; margin-bottom: 15px;}
  .s4-info{padding: 20px 15px}
  .s4-info li span{font-size: 14px; height: 26px; width: 120px; margin-right: 15px;}
  .s4-info li p{top: 0; font-size: 14px; line-height: 24px;}
}

@media(max-width:768px){
  .s4-content{padding: 50px}
  .s4-info li{flex-direction: column; align-items: center;}
  .s4-info li span{margin-right: 0}
  .s4-info li p{text-align: center; margin-top: 7px;}

}
@media(max-width:500px){
  .s4-content{padding: 30px}

}