@charset "UTF-8";
@media screen and (max-width:960px) {
   .main-count .row .col-xs-4 {
        height: 200px;
    }
}
/*mobile*/
@media screen and (max-width:789px) {

    /*main title*/
    .main-banner {
        /*margin:15vh auto 0*/ ; 
        margin-top: 10px;
        padding:0;
        width: 100%;
        height: 78vh;
        max-height:900px;
        overflow: hidden;
    }
    .title-container {
        position:relative;
        padding-left:0;
        /*padding-top: 50px;*/
        margin:50px auto 0;
     height: 69vh;
      max-height:860px;  
     text-align: center;
     box-sizing: border-box;  
    }
    .title-container .logo{
        position: absolute;
        top:-65px;
        left:0;
        width: 150px;
    }
    .title-container .logo img{
        width: 150px;
    }
    .title-container h3 {
       font-size:10.7vw;/*font-size:38px;*/
    }
    .title-container p{
        font-size:2.8vw;/*font-size:16px;*/
        line-height: 150%;
        letter-spacing: -1px;
    }
    .title-container .main-btn{
        margin: 45px auto;
        
    }
    .title-container .main-btn a {
        padding: 20px 40px;
        font-size:3.6vw;
    }
    /*main title ani*/
    .title-container .bg-img-01{
        top:auto;
        left:-10%;
        bottom:0;
        width: 70vw;/*height:175.5px;*/
        z-index: 2;
    }
    .title-container .bg-img-02{
        top:auto;
        bottom:0;
        left:35%;
        width: 65vw;/*height:256.5px*/
        z-index: 1;
        }
    .title-container .bg-img-03{
            display: none;
        }
    /*캐리박스 장점*/
    .main-card {
        margin-top:50px;
    }
    .mc-content{
         margin-bottom:50px;
        padding:0 24px;
        box-sizing: border-box;
    }
    .mc-content .txt{
        display: none;
    } 
    .mc-content .m-txt{
        
        display: block;
        font-size: 2vw;
        line-height: 23px;
        text-align: center;
        letter-spacing: -0.04em;
        color:#595959;
    } 
    .mc-content .m-txt h4{
    font-size: 5.9vw;
    color: #000000;
    letter-spacing: -0.05em;
    }
    .mc-content .m-txt p{
        margin-top:20px;
    font-size: 3.6vw;  
    }
    .main-card .mc-content.show .img{
        margin:25px auto;
    }
    .mc-content .img{
        width: 100%;
    }
    .mc-content .mc-btn{display: none;}
    
    /*캐리박스가 더 똑똑해 집니다.*/
    .main-sub-card{
        padding:100px 0 0 0;
    }
    .main-sub-card .title {
        margin-bottom:40px;
        width: 100%;
    }
    .main-sub-card .title h3 {
        margin-top:0;
        padding:0;
        font-size: 5.9vw;
        text-align: center;
        line-height: 150%;
    }
    .main-sub-card .title h3 i{
        top:-55px;left:50%;
        margin-left:-24px;
        width: 62px;
        height: 62px;
    }
    .main-sub-card .title p{
        margin-top:10px; 
       font-size: 2.8vw;   
    }
    .main-sub-card .title p.txt{
        display: none;
    }
    .main-sub-card .title p.m-txt{
        opacity: 0;
        margin-top:20px;
        line-height: 160%;
        display: block;
        text-align: center;
    }
    .main-sub-card .img {
        position: relative;
         width: 100%;
        height:516px;
        overflow: hidden;
    }
    .main-sub-card .ani-container{
        position: absolute;
        top:0;
        right:50%;
        width: 387px;
        height: 517px;
        margin-right: -193.5px;
    }
    /*메인 경험 카운트*/
   
    .main-count h3{
        font-size: 5.9vw;
    }
    .main-count h3 i {
        top:12px;
        padding:0;
        width: 37.5px;height: 37.5px;
        background-size: 100%;
    }
    .main-count .row{
        margin-top:40px; 
    }
    
    .main-count .tit{
        font-weight:500;
        font-size: 3.6vw;
        color:#3B2B8F
    }
    .main-count .tit:after{
        display: none;
    }
    .main-count .count{
        font-size: 2.8vw;
        line-height:100%;
    }
    .main-count .count strong{
    font-size: 8vw;
    line-height: 100%;
    }
    .main-count .count strong.secon{
    font-size: 4vw;
    line-height: 100%;
    }
    .main-count .txt{
    font-size: 2.4vw;
    color: #8B8B8B;
    
    
    }
    .main-count .txt span{
        border: 1px solid #E4E4E4;
        padding:7px 15px;
    }
    .gray-box{display: none;}
    
    /*메인리뷰*/
    .main-review{
        margin-bottom:65px;
        padding: 0;
        position: relative;
        width: 100%;
        height: 400px;
        overflow: hidden;
    }
    .main-review .title {display: none;}
    .main-review .card-container{
        padding: 0;
        margin:0px auto;
        width: 100%;
    }
    .main-review .card-container .card .slick-cont {
        padding: 25px;
    }
    .main-review .card-container .col-xs-1{
        display: none;
    }
    
    .main-review .card-container .slick-prev{
        display: none;
    }
    .swiper-button-prev{
        display:none;
    }
    .swiper-button-next{
        display:none;
    }
    /*하단 광고 배너*/
    .main-ad-bottom{
      padding-top:27px;  
        padding-bottom:27px; 
    }
    
    .main-ad-bottom .title{
        display: block;
        padding:0;
        width: 100%;
        text-align: center;
    }
    .main-ad-bottom .title p{
        display: none;
        margin-top:0;
    }
    .main-ad-bottom .title p.m{
        display: block;
        font-size: 24px;
        line-height: 150%;
    }
    .main-ad-bottom .title:after{
        content: '';display: block;clear: both;
    }
    .main-ad-bottom .img{
        display: none;
    }
    .main-ad-bottom .m-img{
        display: block;
        text-align: center;
    }
    .main-ad-bottom .m-img a{
        display:inline-block;
        margin-top: 25px;
        position:relative;
        padding:20px 40px 20px;
        font-size: 20px; color:#fff;
        background: #3B2B8F;border-radius: 6px;  
    }
    
}

@media screen and (max-width:460px) {
    
     .main-count {
        margin-top:40px;
    }
    .title-container h3{
        font-size: 36px;
    }
    .main-count h3{
        padding: 0 30px;
    }
    .main-count h3 i {
        top:50%;
        padding:0;
        margin-top:-8px; 
        width: 18px;
        height: 18px;
        background-size: 100%;
    }
    .title-container p{
        font-size:14px;/*font-size:3.9vw;*/
        line-height: 180%;
    }
    .title-container .main-btn a{
        font-size:16px;/*font-size:5vw;*/
    }
    .mc-content .m-txt h4{
    font-size: 20px;
    /*font-size: 5.6vw;*/
    color: #000000;
    letter-spacing: -1px;
    }
    .mc-content .m-txt p{
        margin-top: 10px;
        font-size: 12px;
        /*font-size: 3.9vw;  */
    }
    .main-sub-card{
        margin-top:50px;
    }
    .main-sub-card .title h3{
        font-size: 20px;
    }
    .main-sub-card .title p.m-txt{
        font-size: 12px;
        /*font-size: 3.9vw;  */
    }
    .main-sub-card .title h3 i{
        top:-55px;left:50%;
        margin-left:-24px;
        width: 46.5px;
        height: 46.5px;
    }
    .main-sub-card .img{
        width: 100%;
        height: 332px;
    }
    .main-sub-card .ani-container{
        position: absolute;
        top:0;
        right:50%;
        width: 270px;
        height: 332px;
        margin-right: -135px;
    }
    .main-sub-card .ani-container .ani-change{
        margin: 30px 27px 0;
        width: 217px;
        height: 300px;
        background-size: 217px 300px;
        background-position: 0 0;
    }
    .main-sub-card .ani-container .ani-change img{
        top: 0;
        width: 217px;
        height: 300px;
    }
    .main-count h3{
        font-size: 20px;
    }
    .main-count .row {
        width: 100%;
        margin-top: 20px;
        margin-left: 0;
    }
    .main-count .row .col-xs-4 {
        height: 150px;
    }
    .main-count .tit {
        font-size: 12px;
       /*font-size: 3.84vw; */
        font-weight: 400;
        color:#3B2B8F;
        letter-spacing: -1px;
    }
    .main-count .count{
        top: 30%;
        margin:10px auto;
        height: 35px;
    }
    .main-count .txt{
        margin-top:10px;
        
    }
    .main-count .count strong{
        font-size: 30px;
    }
    .main-count .count span{
        font-size: 10px;
    }
    .main-count .txt span{
        font-size:9px;
        /*font-size:3vw;*/
    }
    .swiper-wrapper{
        height: 360px;
    }
    .main-review {
        margin:50px auto;
        padding: 0;
        height: 100%;
    }
    .main-review .card-container {
        padding: 0px 45px;
    }
    .main-review .card-container .card{
        margin: 0px 0;
    }
    .main-review .card-container .card .slick-cont{
        padding: 25px;
        height: 300px;
    }
    .card-container .card .reply{
        height: 162px;
        font-size:12px;
        overflow: hidden;
        -webkit-line-clamp:8; 
        
    }
    .card-container .card .writer{
        font-size: 10px;
        line-height: 15px;
    }
    .card-container .card .rank i {
        width: 14px;
        height: 15px;
        background-size:100% 100%;
    }
    .main-ad-bottom .m-img{
        display: block;
        text-align: center;
    }
    .main-ad-bottom .title p{
        font-size: 20px;
        margin-top:0px;
        margin-top:0px;
    }
    .main-ad-bottom .m-img a {
        font-size: 16px;
    }
    
}


@media screen and (max-width:360px) {
    .main-review .card-container .card .slick-cont{
        padding: 15px;
    }
    .card-container .card .reply{
        height: 180px;
    }
}
    }