@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Noto+Sans:wght@400;700&display=swap');



/*

font-family: 'Noto Sans', sans-serif;
font-family: 'Noto Sans TC', sans-serif;

*/


.main_header {
    position: relative;
}

.main_header .main_header_wrapper {
    display: flex;
}

.main_header .logo {
    display: inline-block;
    width: 35%;
}

.main_header .logo a {
    background: url(../images/v2/logo.svg) center center / contain no-repeat;
    display: block;
    width: 8vw;
    margin: 3vw;
}

.main_header .logo a:before {
    display: block;
    content: " ";
    padding-top: 39.47368421052632%;
}




.nav-icon {
    margin: 0 15px;
    width: 28px;
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
}

.nav-icon:after, 
.nav-icon:before, 
.nav-icon div {
    background-color: #033f88;
    content: '';
    display: block;
    height: 4px;
    margin: 6px 0;
    transition: all .2s ease-in-out;
    border-radius: 2px;
}

.nav-icon.active:before {
    transform: translateY(10px) rotate(135deg);
}

.nav-icon.active:after {
    transform: translateY(-10px) rotate(-135deg);
}

.nav-icon.active div {
    transform: scale(0);
}






.main_header .menu {
    display: inline-block;
    width: 65%;
    vertical-align: middle;
}

.main_header .menu:before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: " ";
    width: 1px;
}

.main_header ul {
    display: inline-block;
    vertical-align: middle;
}

.main_header ul li {
    display: inline-block;
    padding: 0 2vw;
}


.main_header ul li a {
    font-family: 'Noto Sans TC', sans-serif;
    color: #033f88;
}















#banner_top {
    position: relative;
}

#banner_top .banner_top_wr {
    display: flex;
}

#banner_top .banner_top_wr .banner_info {
    background: #00bef2;
    display: inline-block;
    width: 46%;
}

#banner_top .banner_top_wr .banner_info .banner_icontent {
    padding: 5vw 4vw 0;
}

#banner_top .banner_top_wr .banner_info .banner_icontent h2 {
    color: #fff;
    margin-bottom: 1vw;
    line-height: 1.2em;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 900;
}

#banner_top .banner_top_wr .banner_info .banner_icontent p {
    color: #fff;
    font-family: 'Noto Sans TC', sans-serif;
}

#banner_top .banner_top_wr .banner_imgbg {
    background: url(../images/v2/banner_img.jpg) center center / cover no-repeat;
    display: inline-block;
    width: 54%;
}

#banner_top .banner_top_wr .banner_imgbg:before {
    content: " ";
    display: block;
    padding-top: 56.61375661375661%;
}


#banner_top .banner_btns {
    
}

#banner_top .banner_btns:before {
    display: inline-block;
    content: " ";
    height: 100%;
    width: 1px ;
    vertical-align: middle;
}

#banner_top .banner_btns a {
    display: inline-block;
    vertical-align: middle;
    margin-left: -4vw;
}

#banner_top .banner_btns a.app_store {
    width: 17vw;
    background: url(../images/v2/btn_as.svg) center center / contain no-repeat;
}

#banner_top .banner_btns a.google_play {
    width: 17vw;
    background: url(../images/v2/btn_gp.svg) center center / contain no-repeat;
    margin-left: -6vw;
}

#banner_top .banner_btns a:before {
    display: block;
    content: " ";
    padding-top: 58.23529411764706%;
}





.content_header {
    text-align: center;
    margin: 5vw 0;
}


.content_header h2 {
    text-align: center;
    color: #1c427b;
    margin-bottom: 2vw;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 900;
}

.content_header p {
    text-align: center;
    color: #1c427b;
}



.que_encontraras .row {
    background: url(../images/v2/que-encontraras-bg.png) center center / contain no-repeat;
    padding: 4vw 0;
}

.que_encontraras .qe_block {
    display: inline-block;
}

.que_encontraras .qe_block:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
    width: 1px ;
}

.que_encontraras .qe_block img {
    display: inline-block;
    width: 35%;
    vertical-align: middle;
}

.que_encontraras .qe_block .qe_block_info {
    display: inline-block;
    width: 60%;
    vertical-align: middle;
}


.que_encontraras .qe_block .qe_block_info h3 {
    color: #1c427b;
    font-family: 'Noto Sans', sans-serif;
    margin-bottom: 1vw;
}

.que_encontraras .qe_block .qe_block_info p {
    color: #1c427b;
    font-family: 'Noto Sans TC', sans-serif;
}



.app-screenshot {
    padding: 0;
}

.app-screenshot:after {
    clear: both;
    content: " ";
    width: 100%;
    display: block;
    height: 1px;
}


.app-screenshot .screenshot-container .slider-row .item {
    box-shadow: none;
}



.app-screenshot .screenshot-container .slider-row .item span.img {
    height: 100%;
}

@media (min-width: 1650px) and (max-width: 1920px) {
    .app-screenshot .screenshot-container .phone-mockup {
        width: 27%;
    }
}









@media (max-width: 768px) {
    .main_header {
        position: relative;
        z-index: 1;
    }
    .main_header .main_header_wrapper {
        display: block;
    }
    .main_header .logo {
        display: block;
        width: 35%;
        position: relative;
    }
    .main_header .logo a {
        background: url(../images/v2/logo.svg) center center / contain no-repeat;
        display: block;
        width: 75%;
        margin: 15%;
    }
    .nav-icon{display: block;}
    .main_header .menu {
        display: none;
        position: absolute;
        background: #fff;
        margin: -1px 0 0;
        width: 100%;
        padding: 0 0 1em;
        transition: all .2s ease-in-out;
    }
    .main_header .menu.active {
        display: block;
    }
    .main_header ul li {
        padding: .5em 1em;
        display: block;
    }
    
    
    
    #banner_top .banner_top_wr {
        display: block;
    }
    #banner_top .banner_top_wr .banner_info {
        display: block;
        width: auto;
    }
    #banner_top .banner_top_wr .banner_info .banner_icontent h2 {
        margin-top: .5em;
        margin-bottom: 1em;
        font-size: 1.6em;
    }
    #banner_top .banner_btns a.app_store {
        width: 50vw;
        margin-left: -12vw;
    }
    #banner_top .banner_btns a.google_play {
        width: 50vw;
        margin-left: -15vw;
    }
    #banner_top .banner_top_wr .banner_imgbg {
        display: none;
    }
    
    
    
    .content_header h2 {
        font-size: 1.6em;
    }
    
    
    
    .que_encontraras .qe_block {
        display: block;
        margin-bottom: 2.6em;
    }
    .que_encontraras .qe_block .qe_block_info h3 {
        font-size: 1.2em;
    }
    .que_encontraras .qe_block .qe_block_info p {
        font-size: .8em;
    }
    
    
    
    
    .app-screenshot p {
        margin-bottom: 50px;
    }
    
    
}