.secton{padding: 150px 0;}


.main-visual-container{width: 100%; max-width: 1920px; margin: 0 auto; overflow: hidden; position: relative;}
.mv-con{width:40%; z-index: 10; top: 0; left: 0;  position: absolute; height: 100%;}
.mv-con .mv-blur{ position: absolute; left:0; top: 0; transition: all .3s; width:140%; height: 100%;background: url(../img/main/blur.png)no-repeat; background-size: cover; background-position: right;}
.main-visual-txt{position: absolute; left: 12.5%; top: 50%; transform: translateY(-50%); z-index: 1;}

.main-visual{width: 100%; max-width: 1320px; margin-left: auto; position: relative; height: 900px; transition: all .2s;}
.main-visual .main-vImg{position: absolute; right: 0;}
.main-vImg.main01-img{top: 0; z-index: 0; }
.main-vImg.main02-img{top:40%; z-index: 2;}
.main-vImg.main03-img{bottom: 0; z-index: 5;}




.wave{display: block;right: 0; position: absolute; width: 100%; height:296px; background: url(../img/main/wave-bar.png)repeat; transition: all .5s; background-size: contain;}
.wave-type01{ top: 27%; z-index: 1; background-position: 100px -1px;; background-repeat: repeat;
    animation: wave01 30s linear infinite;}
.wave-type02{top: 54%; z-index: 3; background-position:0px -2px; background-repeat: repeat;
    animation: wave02 30s linear infinite;}

.waveWrapper {overflow: hidden;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;z-index: 7; animation: move_wave 30s linear infinite;}
.waveWrapper .wave{ background-repeat: repeat no-repeat; }

.waveWrapper .waveTop {animation: move_wave01 25s linear infinite; bottom: -190px; }
.waveMiddle { opacity: 0.6;}
.waveWrapper .waveMiddle { animation: move_wave02 21s linear infinite; animation-delay: 0.3s; bottom: -170px }
.waveBottom {opacity: 0.2;}
.waveWrapper .waveBottom {animation: move_wave03 40s linear infinite; animation-delay: 0.5s;  bottom: -180px;}


.main02 ul,.main04-box{margin-top: 100px;}
.main02-inner{background-color: #f5f5f5;  min-height: 230px; cursor: pointer;box-sizing: border-box; border:1px solid #f5f5f5;; position: relative; top: 0; border-radius: 16px; padding:30px; transition: all .3s;}
.main02-inner strong{display: block; font-size:  1.313rem;}
.main02-inner p{color:#777; padding: 16px 0 30px;}
.main02-inner i{display:inline-block;}
.main02-inner .link{display: flex; justify-content: space-between;overflow: hidden;}
.main02-inner .link a{position: relative; top: 62px; color:#0095C0; transition: all .2s;  }

.main02 ul li:hover .main02-inner{top:-16px; border-color:  #5dc2d0 ;}
.main02 ul li:hover .link a{top: 42px;}

@keyframes wave01 {
	0% {background-position: 0 -1px;}
    100% {background-position: 1920px -1px;}
}
@keyframes wave02 {
	0% {background-position: 1920px -1px;}
    100% {background-position: 0 -1px;}
}
/* @keyframes move_wave {
    0% {bottom: -180px;}
    50% {bottom: -160px;}
    100% {bottom: -180px;}
} */

@keyframes move_wave01 {
    0% {background-position:1000px -1px; }
    50% {}
    100% {background-position: 0 -1px; }
}
@keyframes move_wave02 {
    0% {background-position: 0 -1px;}
    100% {background-position: 1920px -1px;}
}
@keyframes move_wave03 {
    0% {background-position: 800px -1px;}
    100% {background-position: 0 -1px;}
}
/* main03-01 */
.main03-01{padding-top:200px;padding-bottom:100px;margin:0 auto;max-width: 1920px;}
.main03-01-backimg{width:100%; height:100%; background: url(../img/main/main03-01-bg.png) no-repeat;}
.main03-01 ul{margin-top:100px;}
.main03-01 ul li{position:relative; max-width:1200px;height:400px;overflow:hidden ;background-color:#fff;box-shadow:4px 4px 8px #e1e1e1;border-radius:20px}
/* .main03-01 ul li .li_inner{width:50%} */
.main03-01 ul li .li_text01, .li_text02{position:absolute;padding:50px;width:50%;}
.main03-01 ul li .li_text01{left:0;}
.main03-01 ul li .li_text02{left:50%;}
.main03-01 ul li::after{content:'';display:block;clear:both}
.main03-01 ul li .li_inner strong{font-size:2.25rem;font-family: 'Oswald', sans-serif;}
.main03-01 ul li .li_inner .tit{font-size:1.25rem;color:#47b7cd;font-family: 'Oswald', sans-serif;margin-top:40px;font-weight: 600;}
.main03-01 ul li .li_inner .txt{font-size:1rem;color:#777;font-family: 'Roboto', 'Oswald','Noto Sans KR', sans-serif;margin-top:20px;}
.main03-01 ul li .li_inner .button{margin-top:60px;}
.main03-01 ul li:last-child{margin-top:40px;}
.main03-01 ul li .li_inner button:hover{background-color:#47b7cd;color:#fff}
.main03-01 ul li .li_inner .plant_bg{float:right;width:50%; height:412px; background: url(../img/main/main03-01-topimg.jpg) no-repeat center;}
.main03-01 ul li .li_inner .cable_bg{float:left;width:50%; height:412px; background: url(../img/main/main03-01-bottomimg.jpg) no-repeat center;}



.main03{width: 100%; height: auto; position: relative; overflow: hidden; max-width: 1920px; margin: 0 auto;}
.main03 h3.title{font-size:2.5rem; font-family: 'Oswald', sans-serif; font-weight: 500;}
.main03 p.sub-title{font-size: 1rem; color: #777;}
.main03-wrap{display: flex;}
.main03-wrap .main03-text{width: 420px;}
.main03-wrap p.sub-title{word-break: keep-all;padding-right: 20px;}
.main03-wrap .main03-imgList{width: 100%;}
.main03-wrap .button{padding-top: 40px;}
.main03-con p{color: #fff; font-weight: 600;}

.main03-bg01{width: 100%; height: 400px; background: url(../img/main/main03_01bg.jpg)repeat;}
.main03-bg02{width: 100%; height: 360px; background-image: linear-gradient(to right, #5DC2D0 , #0095C0 ); position: relative;}

/* .main03-img{display: inline-block;} */

.main03 .main03-img{    overflow: hidden;
    cursor: pointer;
    height: 0;
    padding-bottom: 120.33333%;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);}
.main03 .main03-img img{position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;}


.main03-text-wrap{position: absolute;z-index: 1; width: 100%; max-width: 1200px; left:50%; top: 50%; transform: translate(-50%,-50%); }
.wave02{display: block;right: 0; position: absolute; width: 100%; height:155px; background: url(../img/main/wave-bar02.png)repeat; transition: all .5s; background-size: cover;}

.main03-bg02 .wave-type04{bottom: -40px;}
.main03-bg02 .wave-type05{bottom: -15px; opacity: 0.5; background-position: 160%;}
.main03-bg02 .wave-type06{bottom: -40px; opacity: 0.5; background-position:37%;}



.main04-box{display: flex;  height: 497px;}
.main04-imgBox{width: 50%; background: url(../img/main/o_slide1.jpg)no-repeat; height: 100%; background-position: center;}
.main04-dev{width: 25%;}
.main04-dev>div{height: 50%; background-color:#f5f5f5; padding:20px 50px;}
.main04-dev>div dl{padding-top: 41px;}
.main04-dev>div dl dt{font-size:22px; color:#0095c0;}
.main04-dev>div dl dd{color:#777; display: block;}
.main04-info{ width: 25%; position: relative;}
.main04-info>div{position: absolute; width: 100%; padding:0 50px; top: 50%; left: 0; transform: translateY(-50%);}
.main04 .semi-title{font-size: 1rem; font-family:'Oswald', sans-serif; font-weight: 500;}
.main04-info .phone-num{font-size: 34px; font-weight: 300;}
.main04-info dl{margin-top: 35px; font-weight: 300;}
.main04-info dl dt{margin-bottom: 10px;}



/* ================================================ */
/* ================ // advertising // ================== */
/* ================================================ */

.advertising{position: fixed; z-index: 999; bottom: 80px; right: 60px; width: 450px; opacity: 1;
    background-image: linear-gradient(to right, #5dc2d0 , #a3cf76 ); padding: 20px; border-radius: 20px; 
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    -o-transition: all 3s ease;
    transition: all 3s ease;  
   -webkit-animation: appear 1s ;
   -moz-animation: appear 1s ;
   animation: appear 1s ;
   -o-animation: appear 1s ;
   animation-direction: alternate;
 
}

@keyframes appear {
   0% {right: 0; opacity: 0;}
   100% {right: 60px; opacity: 1;}
}

.advertising dl{width: 100%; display: table;}
.advertising dl dt,.advertising dl dd{display: table-cell; vertical-align: middle;}
.advertising dl dt{width: 150px;}
.advertising dl dd{padding-left:20px;}
.advertising dl dd strong{font-size: 24px;}
.advertising dl dd a{margin-top: 24px; display: block;}
.advertising dl dd a i{margin-left: 12px;}
/* .adver-img{overflow: hidden; height: 0; padding: 80.3333%; position: relative;}
.adver-img img{position: absolute; width: 100%; height: 100%; top: 0; left: 0;} */
.advertising button{position: absolute; top: 20px; right: 20px; color:#fff}

/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
   
    
}

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

    .mv-con .mv-blur{left: -40%;}
    .mv-con{width: 50%;}
 
}

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


    .main-visual {height: 700px;}    
    
    .main03-text-wrap{padding: 0 16px;}

    .main04-imgBox{width: 40%;}
    .main04-dev,.main04-info{width: 30%;}

    .main04-dev>div{padding: 20px;}
    .main04-info>div{padding:  0 20px;}
  
}

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

    .main03-wrap{display: block;;}
    .main03-text{margin-bottom: 20px;}
    .main03-con p{font-size: 14px;}
    .main03-wrap .main03-imgList{width: inherit;}
  
}


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


    .main-visual {height: 550px;}

    .main03-01 ul li .li_text01, .li_text02{position:inherit;width:100%;}
    .main03-01 ul li{height: 100%;}
    .main03-01 ul li .li_inner .plant_bg, .main03-01 ul li .li_inner .cable_bg {float: inherit;width: 100%;height:300px;}
    .main03-01 ul li .li_inner{left:0;}


    .main04-box{display: block; height: auto; }
    .main04-imgBox{background-size: cover;     height: 240px;}
    .main04-imgBox{width: 100%;}
    .main04-dev, .main04-info{width: 100%}
    .main04-dev>div{width: 50%; float: left;}
    .main04-info{padding: 20px 0;}
    .main04-info>div{position: relative; top: 0; transform: inherit;}
    .main03-01 ul li .li_inner .button {position: absolute;bottom: 50px;right: 50px;}

}


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

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

    .waveWrapper .waveTop{bottom: -219px;}
    .waveWrapper .waveMiddle{bottom: -190px;}
}


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

    .main-visual {height: 400px;}
    .mv-con{position: relative; width: 100%;}
    .main-visual-txt{position: relative; left: 0; padding: 0 20px; transform: inherit;}
    .main02 ul, .main04-box{margin-top: 60px;}
    .main-visual-txt.title-con h3.title{font-weight: 600;  line-height: 1.3;}

    .title-con h3.title{font-size: 2rem;}
    .wave-type01{animation: wave01 70s linear infinite;}
    .wave-type02{ animation: wave02 70s linear infinite;}
    
    .waveWrapper {animation: move_wave 70s linear infinite;}
    .waveWrapper .waveTop {animation: move_wave01 60s linear infinite; }
    .waveWrapper .waveMiddle { animation: move_wave02 70s linear infinite; animation-delay: 0.3s; }
    .waveWrapper .waveBottom {animation: move_wave03 80s linear infinite; animation-delay: 0.5s;  }
    

    .main02-inner{margin-bottom: 20px; min-height: auto; padding:20px;}
    .main02-inner i{width: 35px;}
    .main02 ul li .link a{top: 14px; border-bottom: 1px solid #0095C0;}
    .main02 ul li:hover .link a{top: 14px;}
    .main02 ul li:hover .main02-inner{top: 0;}

    .main03-01{padding-top: 150px;}
    .main03-01-backimg{background: #f9f9f9;}
    .main03-01 ul li .li_inner .button {position:inherit;bottom: 0;right:0;margin-top:30px}
    .main03-01 ul li .li_inner button{width:100%;height:40px;}
    .main03-01 ul li .li_text01, .li_text02 {padding: 20px;}
    .main03-01 ul li .li_inner .tit{margin-top: 20px;}
    .main03-01 ul li .li_inner .txt{margin-top: 10px;}
    .main03-01 ul li .li_inner .txt br{display:none !important;}

    .main04-dev>div dl dt{font-size: 16px; font-weight: 600;}
    .main04-dev>div dl dd br{display:none;}
    .main04-dev>div dl dd{font-size: 15px;}
    .main04-dev>div dl{padding-top: 20px;}
    .main04-dev>div:nth-child(1){border-right: 1px solid #ddd;}

    .main03-text-wrap{top: 38%;}

    
}


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

    .main03-wrap .main03-text{width: 100%;}
  
}

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

    .waveWrapper {bottom: -30px;}
    .main-visual {height: 276px;}
    .waveWrapper .waveTop{bottom: -230px;}
    .waveWrapper .waveMiddle{bottom: -223px;}
    .waveWrapper .waveBottom{bottom: -231px;}

    .main04-dev>div{width: 100%;}
    .main04-dev>div:nth-child(1){border-bottom: 1px solid #ddd; border-right: inherit;}

    /* .main03 .main03-img img {padding-bottom: 152.3333%;} */
    .main03-bg01{height: 300px;}
    .main03-01 ul li .li_inner .plant_bg, .main03-01 ul li .li_inner .cable_bg{height: 200px;background-size: 100%;}
   
}