body{ font-family: "微軟正黑體", Arial, Helvetica, "儷黑 Pro", "新細明體", sans-serif;
}


/*導覽列*/

.navbar {
  background-color: #e0374a;
}
.navbar .navbar-brand {
  color: #ffffff;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ebe4f4;
}
.navbar .navbar-text {
  color: #ffffff;
}
.navbar .navbar-text a {
  color: #ebe4f4;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #ebe4f4;
}
.navbar .navbar-nav .nav-link {
  color: #ffffff;
  border-radius: .25rem;
  margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ebe4f4;
}
.navbar .navbar-nav .dropdown-menu {
  background-color: #e0374a;
  border-color: #f98c99;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item {
  color: #ffffff;
}
.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
  color: #ebe4f4;
  background-color: #f98c99;
}
.navbar .navbar-nav .dropdown-menu .dropdown-divider {
  border-top-color: #f98c99;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ebe4f4;
  background-color: #f98c99;
}
.navbar .navbar-toggle {
  border-color: #f98c99;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
  background-color: #f98c99;
}
.navbar .navbar-toggle .navbar-toggler-icon {
  color: #ffffff;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ffffff;
}
.navbar .navbar-link {
  color: #ffffff;
}
.navbar .navbar-link:hover {
  color: #ebe4f4;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ebe4f4;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ebe4f4;
    background-color: #f98c99;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ebe4f4;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ebe4f4;
    background-color: #f98c99;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ebe4f4;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ebe4f4;
    background-color: #f98c99;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ffffff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ebe4f4;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ebe4f4;
    background-color: #f98c99;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ebe4f4;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ebe4f4;
  background-color: #f98c99;
}

/*導覽列END*/

.navbarIcon{
    width:35px;
}

.intro1 {
    height: 1000px;
    background: #FFF url(../images/page201906/bgup.svg) no-repeat 50% bottom scroll;
    background-size: cover;
}

.intro1 .container{
    text-align: center;
    overflow:hidden;
}

.product {
    width:450px;
    position:relative;
    text-align: center;
    margin-top:100px;
}

.product img{
    position:relative;
    text-align: center;
    margin-bottom: 30px;
}

.product p{
    position:relative;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}


.productArea{
    display: inline-block;
    width: 450px;
    position: relative;
    text-align:center;
    margin-right: 5vw;
}

.download {
    position: relative;
    text-align: center;
    display: inline-block;
    width: 470px;
}

.downloadIcon {
    margin: 20px 25px;
    width: 200px;
    cursor: pointer;
    display: block;
}

.hand{
    position:relative;
    display: inline-block;
    vertical-align: unset;
    right:0px;
    width:500px;
    bottom:20px;
    margin-top:5vw;
}

.advantage {
    background: #FFF;
    background-size: cover; color: #FFF;
}

.advantagePosition {
    position: relative;
    text-align: center;
    /*margin-left: 488px;*/
}

.advantage .item {
    display: inline-block;
    position: relative;
    top: 10px;
    margin-top: 100px;
    margin-bottom: 100px;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: top;
}

.advantage h3{
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    color: #4a4a4a;
    margin-top:10px;
}

.item img{width: 100px;height:100px;}

.item p{
    width: 245px;
    height: auto;
    font-size: 18px;
    line-height: 1.89;
    text-align: center;
    color: #4a4a4a;
}

.showLayout{
    height: 58vw;
    background: #ffffff url(../images/bg_sec_min.png) no-repeat 50% 50% scroll;
    background-size: cover; color: #FFF;
    text-align:center;
}
.layoutContent{
    text-align:center;
    position:relative;
    /*margin-left:88px;*/
}

.showLayout .title{
    margin-top:150px;
}
/* .div1100{ */
    /* width: 100%; */
/* } */
.showLayout .image { margin-top: 2vw; width: 74vw;}

.function{
    background: #FFF ;
    background-size: cover; color: #FFF;
    position:relative;
    text-align:center;
}

.functionItem {
    width:auto;
}

.functionItemRight {
    margin-top: 40px;
    margin-left: -585px;
}
.functionItemRight2 {
    margin-top: 80px;
    margin-left: -450px;
}

.functionItemLeft, .functionItemLeft2 {
    margin-top:40px;
}



.functionItemBlock{
    position:relative;
}

.functionDemo1{
    display:inline-block;
    width: 300px;
    height: 566px;
    position: relative;
    margin-top: 40px;
    vertical-align: middle;
    animation-duration:1s;
}
.functionDemo1 img{ width: 300px; height: 566px;}
.functionIntroLeft img{ width: 300px; height: 50px;}

.functionIntroRight{
    display:inline-block;
    position:relative;
    vertical-align: middle;
    animation-duration:1s;
    width: 399px;
    height: 150px;
}
.functionIntroRight img{width:400px;}
.functionDemo2 img{height:575px;}

.functionIntroRight2{
    display:inline-block;
    position:relative;
    vertical-align: middle;
    animation-duration:1s;
    width: 436px;
    height: 167px;
}

.functionIntroLeft {
    display: inline-block;
    position: relative;
    margin-left: 100px;
    vertical-align: middle;
    animation-duration: 1s;
    height: 228px;
    width: 56px;
}

.functionIntroLeft2{
    display:inline-block;
    position:relative;
    margin-right:168px;
    vertical-align: middle;
    margin-top: 40px;
    animation-duration:1s;
    height: 180px;
}

.functionIntroLeft2 img{height: 42px;}

.functionRight img{
    position: absolute;
    top: 0px;
    right: 0px;
}

.functionIntroRight p{
  width: 561px;
  height: auto;
  font-size: 20px;
  color: #4a4a4a;
  text-align:right;
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.functionIntroRight2 img{width:400px;}

.functionIntroRight2 p {
    width: 593px;
    height: auto;
    font-size: 20px;
    color: #4a4a4a;
    text-align: right;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.functionIntroLeft p, .functionIntroLeft2 p{
    width: 561px;
    height: auto;
    font-size: 20px;
    color: #4a4a4a;
    text-align: left;
    position: absolute;
    bottom: 0px;
}

 .functionIntroLeft img{
    position: absolute;
    left: 0px;
    top: 0px;
    height:45px;
 }

.functionDemo2{
    display:inline-block;
    width: 540px;
    height: 575px;
    position: relative;
    /*margin-right:68px;*/
    right:0px;
    vertical-align: middle;
    animation-duration:1s;
    margin-bottom:10px;
}

.mediaVideo{
    height: auto; background: #000 url(../images/bg_last_min.png) no-repeat 50% 50% scroll;
    background-size: cover; color: #FFF;
    text-align:center;
    margin-top:200px;
}
.mediaVideo img{
    position:relative;
    text-align:center;
    margin-top:100px;
}

.mediaVideo iframe{
    height:315px;
    width:560px;
    position:relative;
    text-align:center;
    margin:10px;
}

.iframeBlock{
    margin-top:50px;
}

.newsBtn {
    margin-left: 40px;
    margin-top: 40px;
    margin-bottom: 100px;
}

.downloadInfoBlock{
    position:relative;
    text-align:center;
    margin-top:100px;
}

.downloadTitle, .appIcon, .downloadHead{
    display: block;
    width:auto;
    height: auto;
    width:130px;
    /*margin-top:50px;*/
    margin-bottom:30px;
}

.downloadBtnBlock {
    margin-bottom: 100px;
}

.companyInfo {
    font-family: 'Martel', serif;
    background: #232323;
    background-size: cover;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    padding: 2vw;
    padding-top: 9vw;
}
.companyInfo img{
    position:relative;
    margin-top:50px;
    margin-bottom:50px;
}
    .companyInfo p {
        width: auto;
        height: 28px;
        font-size: 20px;
        line-height: normal;
        letter-spacing: normal;
        color: #FFF;

    }

.privateTitle {
    position: relative;
    text-align: center;
    margin-top: 20px;
}

.line {
    position: relative;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
}

.privateTitle span {
    font-size: 35px;
}

.privateContent{
    width: 976px;
    position: relative;
    text-align: left;
    margin: auto;
}

.privateContent p{
    margin-bottom:30px;
}
.containerBlock{ text-align: center;}
.funcPageBlock1{margin-bottom: 150px;}
.funcPageBlockImg1{display: inline-block; }
.funcPageBlockImg1 img{height:500px;}
.funcPageBlockWord1{display: inline-block; width:613px;vertical-align: middle;margin-left: 40px;}
.funcPageBlockWord1 img{height:50px;}
.funcPageBlockWord1 p {text-align:left;margin-top:30px;}

.funcPageBlockWord2{display: inline-block; width:613px;vertical-align: middle;margin-left: 150px;}
.funcPageBlockWord2 img{height:50px;}
.funcPageBlockWord2 p {text-align:left;margin-top:30px;}
.funcPageBlockImg2{display: inline-block;margin-left: 100px;}
.funcPageBlockImg2 img{height:500px;}
.wordTitle{color: #e0374a;width: 400px;font-size:40px;}

/*iPhone 6, 7, & 8 Plus*/
@media screen and (max-width: 500px) {
    .productArea{ width: auto; position: relative; text-align:center; margin-top:80px}
    .product{width: 390px;}
    .product img{width: 200px;}
    /*[在js]logo變小*/
    /*第一區塊背景拉長*/
    .intro1 {width: auto; height: 950px;}
    /*手掉下*/
    .hand{ margin-top:10vw;position:relative; right:0px; bottom:-300px; bottom:0px;width:300px;height:50%;}
    /*div中的圖及字等比縮小*/
    /*.advantagePosition .item margin縮小 */
    .advantagePosition { margin-left:0px; margin-top: 130px;}
    .downloadIcon{width:190px;}
    .advantage .item{ margin-top: 25px; margin-left: 0px;margin-bottom:25px; margin-right:0px;}

    .download{width: 399px;}
    .item p {font-size:16px;}
    /*.showLayout 中的div縮小*/
    .showLayout{height: 444px;
    background: #ffffff url(../images/bg_sec_min.png) no-repeat 50% 50% scroll;
    background-size: cover;
    color: #FFF;
    text-align: center;}
    .showLayout .title{ margin-top: 82px; width: 394px;}
    .showLayout .image{ margin-top: 65px; width: 379px;}
    /*.functionDemo1 .functionIntroLeft */
    .functionItemRight {
        width: 390px;
        margin-bottom: 55px;
        margin-left: 0px;
        margin-top:80px;
    }

    .functionItemLeft, .functionItemLeft2 {
        margin-left: 0px; margin-top: 50px;
    }

    .functionDemo1 {
        display: block;
        width: 223px;
        height: 423px;
        margin-left: 84px;
    }
    .functionDemo1 img{ width: 250px;  height: unset;}
    .functionIntroLeft{display:block; position: relative; vertical-align: middle; margin-top: 40px;
                        animation-duration: 1s; height: 226px; width: 116px; margin-left: 62px;}
    .functionIntroLeft img{position:absolute;}
    .functionIntroLeft p{ width: 316px; height: auto; font-size: 16px; color: #4a4a4a;
                          position: absolute; bottom: 0px; text-align: center;}

    .functionItemLeft{ width: 180px; height: 600px;}
    .functionIntroRight{height: 137px;margin: 7px;}
    .functionIntroRight img{width:94%;}
    .functionIntroRight p{width: 400px; height: auto; font-size: 20px; color: #4a4a4a;
                          text-align: center; position: absolute; bottom: 0px;}
    .functionDemo2{width: 104px; position: relative; height: 388px; margin-top: 50px;}
    .functionDemo2 img{width: 350px; height: 100%;}

    .functionItemRight2 { width: 400px; margin-top: 80px; margin-left: 0px;
    }
    .functionItemRight2 .functionIntroLeft2 {position: relative; margin-top: 40px; animation-duration: 1s;
                                             height: 206px; display: block;margin-right:10px;margin-left: 10px;}
    .functionItemRight2 .functionIntroLeft2 p{ width: 398px; height: auto; font-size: 20px;
                              color: #4a4a4a; text-align: center; position: absolute; bottom: 0px;}

    .functionItemLeft2{width:171px;}
    .functionIntroLeft2 img{width:309px;}
    .functionIntroRight2{ width: 405px; height: 193px;}
    .functionIntroRight2 img{width:380px;}
    .functionIntroRight2 p { width: 360px; height: auto; font-size: 20px; color: #4a4a4a;
                             text-align: center; position: absolute; bottom: 0px; right: 0px; }
    .mediaVideo {margin-top:80px;}
    .mediaVideo img{width:377px;}
    .mediaVideo iframe{ height:240px; width:350px;}
    .downloadBtnBlock{margin-bottom: 60px;}
    .downloadInfoBlock { margin-top: 50px; margin-bottom: 60px; }
    .downloadHead{width:350px;margin-top: 25px; margin-bottom: 25px;}
    .downloadTitle { margin-top: 25px; margin-bottom: 25px; }
    .downloadTitle img {width: 300px;}
    .appIcon{width:130px;margin-bottom: 30px;}
    .newsBtn { margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 25px;}
    .line img{ width: 374px; height: 5px;}
    .companyInfo img { position: relative; margin-left: 20px; margin-right: 20px; margin-top: 30px; margin-bottom: 30px;width:370px;}
    .companyInfo p {margin-bottom: 40px;  margin-left: 10px; margin-right: 10px;}
    .privateContent{width: auto;}
    .privateContent p{ margin-left: 10px; margin-right: 10px;}


    .funcPageBlock1{margin-bottom: 30px;}
    .funcPageBlockImg1 img{height:350px;}
    .funcPageBlockWord1{ width:400px;margin-left: 0px;margin-top: 20px;}
    .funcPageBlockWord1 img{height:40px;margin-top:30px;}
    .funcPageBlockWord1 p {text-align:center;margin-top:30px;}

    .funcPageBlockWord2{ width:400px;margin-left: 0px;margin-top: 20px;}
    .funcPageBlockWord2 img{height:50px;margin-top:30px;}
    .funcPageBlockWord2 p {text-align:center;margin-top:30px;}
    .funcPageBlockImg2{margin-left: 0px;}
    .funcPageBlockImg2 img{height:350px;}
    .wordTitle{font-size:35px;}
}

/*iPhone 6, 7, 8, X */
@media screen and (max-width: 375px) {
    .product{width: auto;}
    .hand{bottom: -315px; bottom:0px;}
    .title {width: 354px;}
    .image{width: 360px;}
    .showLayout .title{width: 355px;}
    .showLayout .image{width:352px;}
    .functionDemo1{display:block;width: auto;margin-left: 29px;margin-top: 0px;}
    .functionIntroLeft {display: block;width: auto;margin-left: 40px;}
    .functionDemo2{width: 165px;margin-top:0px;}
    .functionIntroRight{height:124px;width: 370px; margin: 0px;}
    .functionIntroRight img{width: 81%;}
    .functionIntroRight p {width: 349px;font-size: 18px;}
    .functionIntroLeft2{margin-bottom:80px;}
    .functionIntroLeft2 img{width:283px;}
    .functionItemRight{width:370px;margin-top:60px;}
    .functionItemRight2{width:370px;}
    .functionItemRight2 .functionIntroLeft2 p {font-size:18px; width: 350px;}
    .functionDemo2{width: 150px;}
    .functionDemo2 img{width:350px;}
    .functionIntroRight2{ width: 370px; height: 193px;}
    .functionIntroRight2 img{width: 360px;}
    .functionIntroRight2 p {font-size:18px;}
    .mediaVideo img{width:356px;}
    .newsBtn { margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 20px;}
    .downloadHead{width: 350px;}
    .line img{ width: 335px;}
    .companyInfo img{width:335px;}
    .downloadTitle{margin-bottom:50px;}
    .download{width: 351px;}


    .funcPageBlockWord1{ width:350px;}
    .funcPageBlockWord1 img{height:35px;}

    .funcPageBlockWord2{ width:350px;}
    .funcPageBlockWord2 img{height:40px;}
    .funcPageBlockWord2 p {text-align:center;}
    .funcPageBlockImg2 img{height:350px;}

    /*.intro1{background:#000;}
    .advantage{background:#000;}
    .showLayout{background:#000;}
    .function{background:#000;}*/
}

/*GalaxyS5*/
@media screen and (max-width: 360px) {
    .functionItemRight { width:355px; }
    .functionItemRight2{width:355px;margin-top:0px;}
    .showLayout .title{width: 342px;}
    .showLayout .image{width: 335px;}
    .functionDemo2 img{width: 334px;}
    .functionIntroRight2{width: 350px;}
    .functionIntroRight2 p{width: 315px;}
    .mediaVideo img{width: 348px;}
    .downloadHead{width:350px;}
    .functionIntroRight{width:355px;}
    .functionIntroRight p{width:355px;}
    .functionIntroRight2 img { width:335px; margin: 10px;}
    .functionItemRight2 .functionIntroLeft2 p { width: 340px; }
    .mediaVideo iframe{width: 340px;}
    .line img{ width: 320px;}
    .companyInfo img { width: 300px;}
    .download {width: 337px;}

    .funcPageBlockWord1{ width:330px;}
    .funcPageBlockWord1 img{height:33px;}

    .funcPageBlockWord2{ width:330px;}
    .funcPageBlockWord2 p {text-align:center;}
    .funcPageBlockImg2 img{height:350px;}


    /*.intro1 {
        background: #000;
    }
    .advantage{background:#000;}
    .showLayout{background:#000;}
    .function{background:#000;}
    .downloadInfoBlock {background:#000;}*/
}

/*iPhone 5, SE*/
@media screen and (max-width: 320px) {
    .hand{bottom:-407px;bottom:0px;}
    /*.advantage .item{margin-left:46px;}*/
    .showLayout .title{width: 298px;}
    .showLayout .image{ width: 291px;}
    .functionItemRight{width:320px;}
    .functionDemo1{width:319px;margin-left: 0px;}
    .functionDemo1 img{width: 250px; margin-right: 0px}
    .functionIntroLeft{height: 249px; margin: 20px;}
    .functionIntroLeft p{width: 267px;}
    .functionDemo2{height: 337px;}
    .functionDemo2 img{width:292px;}
    .functionItemRight2{width:320px;}
    .functionIntroRight{width:316px;}
    .functionIntroRight p{ width: 311px; font-size: 16px;}
    .functionItemLeft{ width: 180px; height: 520px;}
    .functionItemRight2 .functionIntroLeft2{margin-right: 0px;}
    .functionItemRight2 .functionIntroLeft2 p{font-size: 16px; width: 288px; margin: 8px;}
    .functionIntroRight2{width:318px;    position: initial;}
    .functionIntroRight2 img{width: 300px;}
    .functionIntroRight2 p{font-size:16px; width:300px;margin: 10px;}
    .functionIntroLeft2 img{width:283px;}
    .mediaVideo img{width: 306px;}
    .mediaVideo iframe{width: 300px;}
    .downloadHead{width:300px;}
    .line img{ width: 280px;}
    .companyInfo img{width:280px;}
    .download {width: 300px;}
    .functionIntroLeft img{width:269px;}
    function{width:268px;margin:0px;}


    .funcPageBlockWord1{ width:280px;}
    .funcPageBlockWord1 img{height:30px;}
    .funcPageBlockImg1 img {height:280px;}
    .funcPageBlockWord2{ width:310px;}
    .wordTitle{font-size:30px;}
}