﻿.sec1 .imgWrap3>div:nth-of-type(1){background:url(/common/image/service/mvno/MVNO_img2.png) no-repeat; background-size: cover;}
.sec1 .imgWrap3>div:nth-of-type(2){background:url(/common/image/service/mvno/MVNO_img3.png) no-repeat; background-size: cover;}
.sec1 .imgWrap3>div:nth-of-type(3){background:url(/common/image/service/mvno/MVNO_img1.png) no-repeat; background-size: cover; margin-right: 0;}



.op_m{
    margin-top:200px !important;   
    margin-bottom: 91px;
        font-weight: 500;
}
.sec2 .imgWrap3>div>div  img{
          
width:100%; 
}
.sec2 .imgWrap3>div:nth-child(1)>div  img{
          
width:125%;
padding-top:-15px;
}
.sec2 .imgWrap3> div:nth-child(1)>div {

    margin-bottom: 0px;
}

/*.hide{
    display:none;
}*/

.fadeOut{
    opacity:0;
    transition:1s;
}

.fadein{
 opacity:1;
}

.mvno_op{
    margin-top:300px !important;
}

.mvno_op > .t_line{
   text-align:center;
   font-size:2.3rem;

}
.mvno_op > .mgb20{
    text-align:center;
    font-size:1.3rem;
    margin-top:50px;
    margin-bottom:150px;
}

/*이미지 hover Effect*/


.view-img{
   transition: all 0.2s linear;
   position:relative;
}


.view-img:before {
  content:'';
  display:inline-block;
  width:100%;
  height:100%;
  position:absolute;
  opacity: 0;
  top:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.44);
  transition: all 0.4s ease-in-out;
}

/*.view-img h4 {
  transform: translateY(-100px);
  opacity: 0;
  font-family: Raleway, serif;
  transition: all 0.2s ease-in-out;
}*/

.view-img p {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.2s linear;
}

/*.view-first a.info {
  opacity: 0;
  transition: all 0.2s ease-in-out;
}*/


.readmore{

    padding:6px 10px;
    display:inline-block;
    background:rgba(255,255,255,0.8);
    border-radius:50px;
    color:#191919;
    font-weight:800;
    /*box-shadow: 3px 3px 5px rgba(0,0,0,0.2)*/
    opacity:0;
    transform:translateY(16px) ;
    transition: all 0.2s linear;
}


/*hover */

.view-img:hover {
  transform: scale(1.1);
}

.view-img:hover:before  {
  opacity: 1;
}

.view-img:hover h4,
.view-img:hover p,
.view-img:hover a.info {
  opacity: 1;
  transform: translateY(0px);
}

.view-img:hover p {
  transition-delay: 0.1s;
}

.view-img:hover .readmore {
    opacity: 1;
  transform: translateY(0px);
  transition-delay: 0.1s;
}

.view-img:hover a.info {
  transition-delay: 0.2s;
}


.readmore:hover{
    transition: all 5s linear;
    font-style:italic;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5)
}

    .headerWrap {
       border-bottom: 1px solid white !important;
    }

    .nav-open-btn .line {

        background-color: white;
    }


@media all and (max-width:840px) { 


        .headerWrap {
       border-bottom: 1px solid white !important;
    }

    .nav-open-btn .line {

        background-color: white;
    }

    .sec1 .imgWrap3{
        height:auto;
    }

    .imglayout{
        display:block !important;
        width:100%;
        padding-top:0;
    }

    .imglayout .imgcont{
        height:250px !important;
        margin-right:0 !important;
        background-position:center !important;
        margin-bottom:40px;
    }
    .view-img:before{
        content:'';
        display:none;
    }


    .readmore{
        display:none;
    }

    .view-img p{
        transform:translate(0)   ;
        opacity:1;
        width:100% !important;
        font-size:1.15em !important;
        transition:none;
        line-height:30px !important;
    }


    .sec1 .imgcont >div{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%)!important;
        -webkit-transform:translate(-50%,-50%)!important;
        -moz-transform:translate(-50%,-50%)!important;
        -o-transform:translate(-50%,-50%)!important;
        -ms-transform:translate(-50%,-50%)!important;
           transform:translate(-50%,-50%)!important;
    }

    .sec1 .imgcont >div p{
        height:auto;
    }

   

}


@media all and (max-width:767px) {
    .sec2 > div:nth-of-type(1) {
        margin-top: 10px;
    }




    .op_m {
        font-size: 1.3rem;
    }

    .mvno_op > .t_line {
        font-size: 2.2rem;
    }

    .mvno_op > .mgb20 {
        font-size: 1.3rem;
    }
}

@media all and (max-width:488px) {

    .op_m {
    margin-top: 100px !important;
    margin-bottom: 91px;
    font-weight: 500;
}

    
  .op_m {
font-size: 1rem;
}

  .mvno_op > .t_line {
font-size: 1.6rem;
}
  .mvno_op > .mgb20 {
    font-size: 1rem;

}



}
