button.but_type01{position: relative;color: #666;}
button.but_type01::before{content:'';display: block;width: 30px;height: 30px;position: absolute;left:-10px;top:50%;transform: translateY(-50%);background: #ddd; border-radius: 20px;  z-index: 1;;}

button.but_type01 span{z-index: 99;position: relative;padding-right:50px;}
button.but_type01 span::before{content:'';display: block;width: 40px;height: 17px;position: absolute;right:0;top:50%;transform: translateY(-50%);transition-duration: 0.3s;}
.but_type01.but_w span::before{background: url(../img/main/but_type02_w.svg)no-repeat right/cover;}
.but_type01.but_b span::before{background: url(../img/main/but_type02_b.svg)no-repeat right/cover;opacity: 0.9;}

button.but_type01:hover span::before{width: 30px;right:-10px;}

section + section{padding-top:140px}
.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  
/*slide*/
.sec01{position: relative;margin-bottom: 180px;}
.slide .swiper-slide{text-align: left;color: #fff;position: relative;overflow: hidden;}

.slide .swiper-slide i{display: block;height: 130vh;/* 애니메이션 이름 */animation-name: slide_img;animation-duration:2s;     width: 100%;}

/* 키프레임 이름 = 애니메이션 이름 */
/* @-webkit-keyframes slide_img {0% {transform:scale(1.1);}100% {transform:scale(1);}} */

.slide .swiper-slide h2{font-size:3.3rem;line-height: 1.2;    font-weight: 300;}
.slide .swiper-slide p{font-size: 1.125rem;opacity: 0.8;margin-top: 20px;}
.slide .swiper-slide .bd-xl{position: absolute; left: 50%;transform: translate(-50%,-50%);top:35%;transition-duration: 0.4s;}

.slide .slide_arr{width: 100%;position: absolute;top:46%;transform: translate(-50%,-50%);z-index: 99;left:50%   ; max-width: 1660px;margin:0;    display: flex;align-items: center;
}
.slide .slide_arr .bar_slide{width: 200px;height: 3px;display: block;background: rgba(255,255,255,0.5);margin-right: 20px;}
.slide .slide_arr .bar_slide strong{content: '';display: block;width: 100%;height: 100%;background: #fff;;/* 애니메이션 이름 */animation-name: bar_slide;animation-duration:8s;   animation-iteration-count: infinite;}
/* 키프레임 이름 = 애니메이션 이름 */
@-webkit-keyframes bar_slide {0% {width: 00%;}100% {width: 100%;}}


.slide .swiper-button-next,.slide  .swiper-button-prev{position: initial;    width: 25px;
    height: 25px;background: transparent !important;
    padding: 10px;border-radius: 50%;;
    border: 1px solid #fff;margin:0;}
    .slide .swiper-button-next::after,.slide  .swiper-button-prev::after{font-size: 0.7rem;color: #fff;}

    .slide .swiper-button-prev{margin-right: 15px;;}
    .slide .swiper-button-next::after{transform: translateX(1px);}












    
/*sec01*/
.contact{position: absolute; left: 50%;transform: translateX(-50%); width: 100%;    padding: 0;bottom: -140px;z-index: 9;}


.contact > div{display: flex;    justify-content: space-between;align-items: flex-end;background: url(../img/main/sec01.png) center right/cover;color: #fff;padding:80px;}

.contact h3{font-size:2rem;}
.contact p{font-size:1.125rem;opacity: 0.8;margin-top: 10px;;}
.contact button{color: #fff;}
.contact button::before{background: #000c36;}


.contact > div{width: 50%;    padding: 60px;transition-duration: 1s;transform: translateY(250px);}
.contact > div > div{opacity: 1;transition-duration: 1s;}
.contact button{opacity: 1;transition-duration: 1s;}

.contact.on_contact > div{width: 100%;    padding: 80px;transform: translateY(0px);}
/* .contact.on_contact > div > div{opacity: 1}
.contact.on_contact button{opacity: 1} */






/*sec02*/
.sec_title{position: relative;}
.sec_title .sec_tit{text-align: center;font-size: 1.5rem;color: #666;}
.sec_title .bg::before{content:'';display: block;width: 660px;height: 100px;position: absolute;left:50%;top:-50px;transform: translateX(-50%);opacity: 0.1;}
.sec02 > p{}
.sec02 .sec_title .bg::before{background: url(../img/main/sec02_bg.png) no-repeat center/cover;}
.sec02 ul {display: flex;margin-top: 50px;;}
.sec02 ul li{width: calc(100% / 4);position: relative;}
.sec02 ul li > div{padding-bottom:150%;}
.sec02 ul li p{font-weight: 600;color: #fff;}
.sec02 ul li button{color: #fff;}
.sec02 ul li > div::before{content: '';display: block;width: 100%;height: 50%;background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));position: absolute;left:50%;transform: translateX(-50%);bottom:0;transition-duration: 0.3s;}

.sec02 ul li button::before{background: linear-gradient(-45deg, #214085, #4690c2);}

.sec02 ul li .txt_box{position: absolute;left:50%;transform: translateX(-50%);bottom:30px;text-align: center;transition-duration: 0.3s;width: 100%;}
.sec02 ul li .txt_box p{font-size: 1.125rem;transition-duration: 0.3s;}

.sec02 ul li .txt_box button{transform: scale(0);transition-duration: 0.3s;margin-top: 30px;}


.sec02 ul li:hover > div::before{height: 100%;}
.sec02 ul li:hover .txt_box{bottom:43%;transform: translate(-50%,-50%);}
.sec02 ul li:hover .txt_box p{font-size: 1.5rem;;}
.sec02 ul li:hover .txt_box button{transform: scale(1);}







/*sec03*/
.sec03 > div{display: flex;}
.sec03  .bg::before{background: url(../img/main/news_bg.png) no-repeat center/cover;width: 420px;    left: 0;height: 100px;}

.sec03 .sec_title {font-size:2rem;font-weight: 600;}
.sec03 .sec_title::before{content:'';display:block;background: url(../img/main/news_bg.png) no-repeat center/cover;width: 270px;    left: 0;height: 65px;opacity: 0.1;position: absolute;left:-190px;top:-50px;}
.sec03 .news_title{display: flex;justify-content: space-between;margin-bottom: 40px;;}
.sec03 .news_title button{width: 40px;height: 40px;padding:10px;border:1px solid #214085;border-radius: 50%;transition-duration: 0.5s;}
.sec03 .news_title button:hover{transform: rotate(360deg);}

.sec03 .left{width: 350px;;}
.sec03 .right{width: calc(100% - 350px);padding-left:60px;;}
.sec03 .news_con{border-top:1px solid #ddd; /*    margin-left: 70px; */}
.sec03 .news_con li{display: flex;justify-content: space-between;border-bottom:1px solid #ddd;padding:20px 0;}
.sec03 .news_tit{font-size: 1.25rem;font-weight: 600;transition-duration: 0.3s;}
.sec03 .news_txt{font-size: 0.9rem;color: #666;margin-top: 10px;opacity: 0.8;}

.sec03 .news_con li:hover .news_tit{color:#214085}
.sec03 .news_con li:hover .news_txt{opacity: 1;}

.sec03 .news_con li:hover .but_type01::before{transition-duration: 0.3s;}
.sec03 .news_con li:hover .but_type01::before{background: linear-gradient(-45deg, #214085, #4690c2);width: 100%;     color: #fff;}
.sec03 .news_con li:hover .but_type01 span{color:#fff}


.sec03 .news_con li:hover .but_type01 span::before {
    width: 20px;
    right: 15px;background: url(../img/main/but_type02_w.svg)no-repeat right/cover;
}
.sec03 .news_con .but_type01{width: 140px;}
.sec03 .news_con li > diV{width: calc(100% - 140px);}

/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
  header > div> div{padding:0 20px;}
  .slide .swiper-slide .bd-xl{padding:0 20px;}
  .slide .slide_arr{padding:0 20px;}


  .contact{width: 90%;}



}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){

 
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
  header > div> div {padding: 20px;}
.contact.on_contact > div {  padding: 50px;}


.sec02 ul li > div {  padding-bottom: 180%;}


.sec03 .right {padding-left: 40px;}
.sec03 .news_con li {flex-direction: column;  align-items: flex-end;}
.sec03 .news_con li > div{width: 100%;}
.sec03 .news_con li button.but_type01{margin-top: 15px;;}
.sec03 .news_tit {  font-size: 1.25rem;}
.sec03 .news_txt { margin-top: 6px;}

section + section {padding-top: 140px;}


}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){

  
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
  .contact.on_contact > div {padding: 20px;}
  .contact h3 {font-size: 1.5rem;}
  .contact p {font-size: 1rem;}
  .contact {bottom: -70px;}
  .sec01 { margin-bottom: 100px;}

  .sec02 ul{flex-wrap: wrap;}
  .sec02 ul li {    width: calc(100% / 2);}
  .sec02 ul li > div {padding-bottom: 80%;}
  .sec02 ul li:hover .txt_box {bottom: 53%;transform: translate(-50%,50%);}

  .sec03 > div {flex-direction: column;}
  .sec03 .left {width: 100%;height: 300px;}
  .sec03 .left img{content:url(../img/main/contactus2.png)}
  .sec03 .sec_title::before {width: 298px; height: 70px;opacity: 0.3; left: -10px; top: -30px;display:none;}
  .sec03 .right {padding-left: 0;}

  .sec03 .news_title{align-items: center;}
  .sec03 .right{width: 100%;margin-top: 20px;}
  .sec03 .news_title {margin-bottom: 20px;}

  .sec_title .bg::before { width: 540px; height: 80px;top: -50px;}

}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){
 


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

  .sec03 .left { height: 200px;}

  .sec_title .bg::before {width: 430px;height: 64px;top: -40px;}
  .sec_title .sec_tit {font-size: 1.25rem;}
  .sec02 ul {margin-top: 20px;}


}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
  .slide .swiper-slide h2 {font-size: 3rem;}
  .slide .swiper-slide p {font-size: 1rem;}


.contact.on_contact > div { display: block;}
.contact button{margin-top:20px;margin-left: auto;  display: block;}
.contact p {font-size: 1rem;}
.contact p br{display: none;}
.contact.on_contact > div {padding: 20px 30px;}
.contact.on_contact > div { transform: translateY(-80px);}
.slide .swiper-slide i{height: 100vh;}
.sec_title .sec_tit { font-size: 1.125rem; padding: 0 20px;}

.sec03 .left { height:160px;}
.sec_title .bg::before {width: 400px;height: 60px;top: -40px;}


.sec03 .sec_title {font-size: 2rem;margin-bottom: 15px;}
.sec03 .news_title button {  width: 30px;  height: 30px;padding:8px}
.sec03 .news_con li { padding: 15px 0;}

.sec03 .news_con li button.but_type01{display: none;}


}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){

  .contact h3 {font-size: 1.5rem;}
  .contact p {font-size: 0.9rem;    margin-top: 5px;}
  .contact button {margin-top: 10px;}
  .contact.on_contact > div {     transform: translateY(-60px);}
  .sec01 { margin-bottom: 50px;}


  .sec02 ul li {width: calc(100% / 1);}
.sec02 ul li > div {padding-bottom:35%;}
.sec02 ul li:hover .txt_box {bottom: 50%;}
.sec02 ul li .txt_box p {font-size: 1rem;}
.sec02 ul li .txt_box button { margin-top: 15px;}
.sec_title .bg::before {     width: 130px; opacity: 1;  height: 20px;position: initial;transform: none;margin:0 auto;  }
.sec02 .sec_title .bg::before{  background: url(../img/main/sec02_bg2.png) no-repeat center/cover;margin-bottom: 20px;;}
.sec02 ul li:hover .txt_box p {  font-size: 1.25rem;}
.sec_title .sec_tit {  font-size: 1rem;  padding: 0 17px;  font-weight: 400;}
.sec_title .sec_tit br{display: none;}
.sec02 ul { margin: 20px;}

.sec03 .sec_title::before {width: 85px; height:20px;opacity: 1; display:block; background: url(../img/main/news_bg2.png) no-repeat center/cover;    position: initial;margin-bottom: 10px;}
.sec03 .sec_title {  font-size: 1rem;font-weight: 400;margin-bottom: 0;}


button.but_type01::before { width: 25px;  height: 25px;}
button.but_type01 span::before { width: 25px;}
.slide .swiper-slide h2 {font-size: 2.5rem;}


[data-aos^=fade][data-aos^=fade]{opacity: 1 !important;transform:none !important;}
section{padding-bottom: 60px;;}
[data-aos^=zoom][data-aos^=zoom].aos-animate{transform: none !important;}
section + section {  padding-top: 80px; }

}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){


}