@charset "utf-8";
@media all and (max-width: 1920px) {
    .main_section_wrap {
        height: 970px;
    }
    .main_section_wrap .main_section {
        top: 280px;
    }
    .main_section_wrap .main_bg .mySlides:nth-child(3) {
        bottom: 100px;
        right: 170px;
    }
    .section_01 {
        width: 100%;
        height: auto;
        /* background: grey; */
        background-image: url(../img/contents_bg.png), url(../img/contents_bg2.png);
        background-repeat: no-repeat;
        background-position: -60% -20% , 380% 80%;
    }
}

@media all and (max-width: 1440px) {
    .header {
        width: 100%;
        padding: 0 20px;
    }
   
}
/****************************************************************iPad Air********************************************************/
@media all and (max-width: 997px) {
    .wrapper {   
        width:100%;
        height:auto; 
        
    }    
    /******* header *******/
    .headerWrap {
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:70px;
        z-index:100;
        display:block;
    }
    
    .headerWrap.roll {height:70px;background:#000;}
    .headerWrap.roll .headerTop {
        margin-top:0px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }
    .headerWrap.roll .headerBottom {margin-top:0px;
        -webkit-transition: all 0.0s;
        -moz-transition: all 0.0s;
        transition: all 0.0s;
    }
    
    .header {background-color:transparent;width:100%;display:block;position:relative; padding: 0;}
    .header .btnMenu {position:absolute;top:19px;right:20px;display:block;width:24px;height:24px;background:url("../img/mobile_btn.png") no-repeat;background-size:100%;z-index:9;}
  
    
    .btnMenuClose {position:absolute; top:18px; right:20px; display:block; width:24px;height:24px;margin-bottom:0px;opacity:1;border:none;background:url("../img/mobile_close_btn.png") no-repeat; background-size:100%; z-index:100; opacity: 1;}
    
    .headerTop {margin:0px 0px 20px 0px;width:100%;padding:0px 20px;display:block;}
    .headerTop .logo {margin:18px 0px 0px 0px;width:100%;display:inline-block;}
    .headerTop .logo a {width:104px;background:url('../img/masnet-logo-02.png') no-repeat;background-size:100%;display:block;cursor:pointer;font-size: 0px;}
    .headerTop .utilMenu {padding:0 2rem;opacity:1;background-color: #243a72;position:fixed;z-index:10;top:0;left:0;display:block;}
    
    .headerBottom {position:fixed;top:0;right:0;width:85%;height:100%;margin-right:100%;margin-top:0px;padding:0px;background:#fff;z-index:10;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:0;border:none;}
    .header.expanded .headerBottom {margin-right:0;opacity:1;}

    .header_consol { display: none; opacity: 0;}




    .headerBottom::before {display:none;}
    .headerBottom .subBg {display:none;opacity:0;}
    .headerBottom .mask {display:block;opacity:1;position:absolute;top:0px;left:-25%;width:25%;height:100%;background:rgba(0,0,0,0.7);z-index:10;}
    
    .gnb {position:absolute;top:110px;right:0px;bottom:0;left:0;float:left;overflow-y:auto;width:auto;padding:0 30px;background-color:none;display:block;}
    .gnb.positionMain {position:absolute;top:60px;right:0px;bottom:0;left:0;}
    .header.expanded .gnb {-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}
    
    .gnb > ul {width:100%;height:100%;border:none;border-top:0px solid #ccc;display:block;}
    .gnb > ul > li {  float:left;width:100%;padding:12px 0px 12px 0px;border-bottom:1px solid #e1e1e1;margin-bottom:0px;font-size:14px;color:#333;}
    .gnb > ul > li:last-child {padding:12px 0px 12px 0px;}
    .gnb > ul > li:hover > a {color:#333; transition: all .5s;}
    .gnb > ul > li > a {width:100%;text-align:left;color:#333;}
    .gnb > ul > li.on > a {color:#397fe7;}
    .gnb > ul > li > ul,
    .gnb:hover > ul > li > ul {margin:0px;position:relative;display:block;max-height:0px;padding:0;border-bottom:none;}
    .gnb > ul > li.on > ul { max-height:300px;padding:0px 0px;border-bottom:1px solid #e1e1e1;border-right:none;clear:both;}
    .gnb > ul > li > ul > li {padding:2px 0px 2px 1px;}
    .gnb > ul > li > ul > li:first-child { padding:8px 0px 2px 1px;}
    .gnb > ul > li > ul > li:last-child { padding:2px 0px 8px 1px;}
    .gnb > ul > li > ul > li > a,
    .gnb > ul > li > ul > li:hover > a,
    .gnb > ul > li > ul > li.on > a {font-size:12px;text-align:left;color:#777;}
    .gnb > ul > li > ul > li > ul > li {padding:2px 0px 2px 8px;display:block;text-align:left;}
    .gnb > ul > li > ul > li > ul > li:last-child {padding:2px 0px 0px 8px;}
    .gnb > ul > li > ul > li > ul > li > a {color: #777;}

    /*************************  main_section  ***********************************************/
    .main_section_wrap {
        height: 450px; 
    }
    .main_section_wrap .main_bg .mySlides:nth-child(1) {
        top: 80px;
    }
    .main_section_wrap .main_bg .mySlides:nth-child(2) {
        top: 40px;
    }
    .main_section_wrap .main_bg .mySlides:nth-child(3) {
        bottom: 50px;
        right: 100px;
    }
    .main_section_wrap .main_section {
        width: 100%;
        top: 130px;
    }
    .main_section_wrap .main_section .main_tit {
        font-size: 60px;
        margin-bottom: 20px;
    }
    .main_section_wrap .main_section .main_ex {
        width: 252px;
        font-size: 16px;
    }
    /*************************  //main_section  ***********************************************/


    /*************************  section_01  ***********************************************/
    .section_01 {
    background-image: url(../img/ipad_contents_bg.png), url(../img/ipad_contents_bg2.png);
    background-repeat: no-repeat;
    background-position: -52% -3%, 320% 78%;
    }
    .section_01 .animated-title {
        font-size: 40px;
        padding: 20px 0;
    }    
    .section_01 .card_contents {
        width: 100%;
        margin: 60px auto 0;
    }
    /****************** card01 *************************/
    .section_01 .card_contents .card01 {
        margin: 0 20px 20px;
        width: 100%;
        width: 380px;
        height: 320px;
    }
    .section_01 .card_contents .card01 > ul {}
    .section_01 .card_contents .card01 > ul > li.card_ex01 {
        font-size: 13px;
        padding: 30px 20px;

    }
    .section_01 .card_contents .card01 > ul > li.card_img01 {
        margin-top: 20px;
    }
    .section_01 .card_contents .card01 > ul > li.card_img01 img {
        margin-right: 20px;
        height: 76px;
    }
    .section_01 .card_contents .card01 > ul > li.card_tit01 {
        font-size: 20px;
        padding: 20px 20px 30px;
    }

    /****************** card02 *************************/
    .section_01 .card_contents .card02 {
        margin: 0 20px 20px;
        width: 100%;
        width: 380px;
        height: 320px;
    }
    .section_01 .card_contents .card02 > ul {}
    .section_01 .card_contents .card02 > ul > li.card_ex02 {
        font-size: 13px;
        padding: 30px 20px;

    }
    .section_01 .card_contents .card02 > ul > li.card_img02 {
        margin-top: 20px;
    }
    .section_01 .card_contents .card02 > ul > li.card_img02 img {
        margin-right: 20px;
        height: 86px;
    }
    .section_01 .card_contents .card02 > ul > li.card_tit02 {
        font-size: 20px;
        padding: 20px 20px 30px;
    }

    /****************** card03 *************************/
    .section_01 .card_contents .card03 {
        width: 380px;
        height: 320px;
        margin: 0 20px 20px 0;
    }
    .section_01 .card_contents .card03 > ul > li.card_ex03 {
        font-size: 13px;
        padding: 30px 20px;
    }
    .section_01 .card_contents .card03 > ul > li.card_img03 {
        margin-top: 0px;
    }
    .section_01 .card_contents .card03 > ul > li.card_img03 img {
        margin-right: 20px;
        height: 86px;
    }
    .section_01 .card_contents .card03 > ul > li.card_tit03 {
        font-size: 20px;
        padding: 20px 20px 30px;
    }

    /****************** card04 *************************/
    .section_01 .card_contents .card04 {
        width: 380px;
        height: 320px;
        margin: 0 20px 20px;
    }
    .section_01 .card_contents .card04 > ul > li.card_ex04 {
        font-size: 13px;
        padding: 30px 20px;
    }
    .section_01 .card_contents .card04 > ul > li.card_img04 {
        margin-top: 20px;
    }
    .section_01 .card_contents .card04 > ul > li.card_img04 img {
        margin-right: 20px;
        height: 86px;
    }
    .section_01 .card_contents .card04 > ul > li.card_tit04 {
        font-size: 20px;
        padding: 20px 20px 30px;
    }

    /****************** card05 *************************/
    .section_01 .card_contents .card05 {
        width: 380px;
        height: 320px;
        margin: 0 20px 20px;
    }
    .section_01 .card_contents .card05 > ul > li.card_ex05 {
        font-size: 13px;
        padding: 30px 20px;
    }
    .section_01 .card_contents .card05 > ul > li.card_img05 {
        margin-top: 20px;
    }
    .section_01 .card_contents .card05 > ul > li.card_img05 img {
        margin-right: 20px;
        height: 86px;
    }
    .section_01 .card_contents .card05 > ul > li.card_tit05 {
        font-size: 20px;
        padding: 20px 20px 30px;
    }

/*************************  //section_01  ***********************************************/

/*************************  section_02  ***********************************************/
    .section_02 {
        margin-top: 50px;
    }
    .section_02 .animated-title {
        font-size: 40px;
        padding: 20px 0;
    }
    .section_02 .list_contents {
        width: 100%;
        margin: 60px auto 0;
    }
    /****************** list01 *************************/
    .section_02 .list_contents .list01 {
        padding: 50px 70px;
        width: 90%;
        margin: 0 auto;
    }
    .section_02 .list_contents .list01 .list01_tit {
        font-size: 20px;
    }
    .section_02 .list_contents .list01 .list01_ex {
        font-size: 14px;
        width: 100%;
        letter-spacing: 0;
    }
    .section_02 .list_contents .list01 .list01_img {
        top: -30px;
        right: 30px;
    }
    .section_02 .list_contents .list01 .list01_img img {
        height: 150px;
        display: none;
    }
    /****************** list02 *************************/
    .section_02 .list_contents .list02 {
        padding: 50px 70px;
        width: 90%;
        margin: 0 auto;
    }
    .section_02 .list_contents .list02 .list02_tit {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .section_02 .list_contents .list02 .list02_ex {
        font-size: 14px;
        width: 100%;
        letter-spacing: 0;
    }
    .section_02 .list_contents .list02 .list02_img {
        top: -30px;
        left: 30px;
    }
    .section_02 .list_contents .list02 .list02_img img {
        height: 150px;
        display: none;
    }
    /****************** list03 *************************/
    .section_02 .list_contents .list03 {
        padding: 50px 70px;
        width: 90%;
        margin: 0 auto;
    }
    .section_02 .list_contents .list03 .list03_tit {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .section_02 .list_contents .list03 .list03_ex {
        font-size: 14px;
        width: 100%;
        letter-spacing: 0;
    }
    .section_02 .list_contents .list03 .list03_img {
        top: -30px;
        left: 30px;
    }
    .section_02 .list_contents .list03 .list03_img img {
        height: 150px;
        display: none;
    }
    /****************** list04 *************************/
    .section_02 .list_contents .list04 {
        padding: 50px 70px;
        width: 90%;
        margin: 0 auto;
    }
    .section_02 .list_contents .list04 .list04_tit {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .section_02 .list_contents .list04 .list04_ex {
        font-size: 14px;
        width: 100%;
        letter-spacing: 0;
    }
    .section_02 .list_contents .list04 .list04_img {
        top: -30px;
        left: 30px;
    }
    .section_02 .list_contents .list04 .list04_img img {
        height: 150px;
        display: none;
    }
/*************************  //section_02  ***********************************************/

/*************************  section_03  ***********************************************/
.section_03 {
    margin-top: 50px;
    background-image: none;
}
.section_03 .animated-title {
    font-size: 40px;
    padding: 20px 0;
}
.section_03 .roadmap_img {
    width: 100%;
    /* height: 648px; */
    height: auto;
    margin: 60px auto;
}
.section_03 .roadmap_img img {
    width: 100%;
    padding: 0 200px;
}
/*************************  //section_03  ***********************************************/

/*************************  section_04  ***********************************************/
.section_04 {
    margin-top: 50px;
    background-image: none;
}
.section_04 .animated-title {
    font-size: 40px;
    padding: 20px 0;
}
.section_04 .service_contents {
    width: 100%;
    margin: 60px auto;
    padding: 0 40px;
}
.section_04 .service_contents .service {
    width: calc(100% / 2 - 20px);
}
.section_04 .service_contents .service .service_con {
    height: 180px;
}
.section_04 .service_contents .service .service_con .service_tit {
    font-size: 24px;
    margin-bottom: 10px;
}
.section_04 .service_contents .service .service_con .service_ex {
    font-size: 16px;
}
/*************************  slide  ***************************/
.section_04 .section_04_slide {
    width: 50%;
    display: none;
}
.section_04 .section_04_slide_txt {
    width: 90%;
    height: auto;
    margin: 0 auto;
}
.section_04 .section_04_slide_txt .slidetxt {
    padding: 30px;
}
.section_04 .section_04_slide_txt .slidetxt .slidetxt_tit {
    font-size: 28px;
}
.section_04 .section_04_slide_txt .slidetxt .slidetxt_tit .tit_ex {
    width: 188px;
    font-size: 16px;
    margin-top: 10px;
}
.section_04 .section_04_slide_txt .slidetxt_ex {
    font-size: 14px;
}
.section_04 .section_04_slide_txt .slidetxt_ex .ex_01,
.section_04 .section_04_slide_txt .slidetxt_ex .ex_02,
.section_04 .section_04_slide_txt .slidetxt_ex .ex_03,
.section_04 .section_04_slide_txt .slidetxt_ex .ex_04 {
    font-size: 14px;
}
.section_04 .section_04_slide_txt .slidetxt_ex .ex_01 .ex_01_span,
.section_04 .section_04_slide_txt .slidetxt_ex .ex_02 .ex_02_span,
.section_04 .section_04_slide_txt .slidetxt_ex .ex_03 .ex_03_span, 
.section_04 .section_04_slide_txt .slidetxt_ex .ex_04 .ex_04_span {
    font-size: 13px;
}
.section_04 .section_04_slide_txt .slidetxt_ex .ex_03 .ex_03_span {
    font-size: 13px;
    margin-top: 5px;
}
.section_04 .section_04_slide_txt .slidetxt_ex .ex_01, .section_04 .section_04_slide_txt .slidetxt_ex .ex_02, .section_04 .section_04_slide_txt .slidetxt_ex .ex_03 {
    margin-bottom: 16px;
}
/*************************  //section_04  ***********************************************/

/*************************  footer  ***********************************************/
.footer {
    height: auto;
    margin-top: 80px;
    padding: 70px 0;
}
.footer .footer_logo {
    
}
.footer .footer_logo img {
    height: 27px;
}
.footer .footer_txt {
    font-size: 14px;
    margin-top: 30px;
}










}
/* @media all and (max-width: 912px) {
    .section_01 {
        background-position: -120% -3%, 1200% 78%;
    }

    .section_01 .card_contents .card01, 
    .section_01 .card_contents .card02,
    .section_01 .card_contents .card03,
    .section_01 .card_contents .card04,
    .section_01 .card_contents .card05 {
        width: 426px;
    }

} */
@media all and (max-width: 768px) {
    .section_01 {
        background-position: -52% -3%, 240% 78%;
    }

    .section_01 .card_contents .card01, 
    .section_01 .card_contents .card02,
    .section_01 .card_contents .card03,
    .section_01 .card_contents .card04,
    .section_01 .card_contents .card05 {
        width: 354px;
    }

}