html,
body {
    font-size: 3.55vw;
    letter-spacing: 0.01em;
}

body {
    position: relative;
    font-weight: 400;
    width: 100%;
    font-family: Arial, "Microsoft JhengHei", "微軟正黑";
    overflow-x: hidden;
    color: #333;
}

section{
    text-align: center;
}

.container{
    width: 91%;
}

img{
   width: 100%;
   height: auto;
   display: block;
   image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode:nearest-neighbor;
}

h2{
    font-size: 1.3rem;
    line-height: 1.8;
    position: relative;
    z-index: 0;
}

h2 p.main{
    font-size: 1.3em;
}

h2 p.second{
    font-size: 1.2em;
    line-height: 1.5;
    letter-spacing: 0.05rem;
}

h3{
    font-size: 1.18rem;
    line-height: 1.8;
    position: relative;
    z-index: 0;
}

p{
    font-size: 1em;
    font-weight: 600;
}

p.notice{
    font-size: 0.7rem !important; 
    color: #555;
}


p.green{
    display: flex;
    display: -ms-flexbox;
    align-items: flex-start;
}

p.green .icon_green{
    padding-top: 0.2rem;
    width: 2rem;
    display: inline-block;
    height: auto;
    vertical-align: middle;
    font-size: 0;
    margin-right: 0.4rem;
}

p.green span{
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    min-height: 2em;
}

.light_blue{
    color: #2F91DB;
}

.light_second{
    color: #FFFACA;
}

.light_block{
    position: relative;
}

.light_block::after{
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-6%);
    margin: auto;
    width: 112%;
    background-image: url("../images/light_block.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

.header_nav{
    z-index: 999;
}

.title_border{
    position: relative;
}

.title_border::before,.title_border::after{
    content: "";
    display: block;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
}
.title_border span{
    display: block;
    padding-bottom: 1.25rem;
}

.title_border::before {
    width: 0.8rem;
    height: 0;
    padding-bottom: 0.8rem;
    background: url("../images/title_triangle.svg") no-repeat;
    background-size: 100%;
    background-position: top center;
    bottom: 0;
}

.title_border::after{
    width: 14.5rem;
    height: 0.25rem;
    background: #1CBEF1;
    bottom: 0.75rem;
}


a.btn{
    display: block;
}

a.btn_link{
    display: inline;
    text-decoration: underline ;
}

a.btn_primary{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.416rem;
    border: 0.18rem solid #2279C0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    margin: auto;
    padding: 0.45rem 0;
    overflow: hidden;
    filter: drop-shadow(4px 4px 4px rgba(15,67,109,0.3));
}

a.btn_primary::after,a.btn_primary::before{
    display: block;
    content: "";
    width: 0.625rem;
    margin: 0 -1px;
    height: 0.18rem;
    background: #2279C0;
}

a.btn_primary .primary_inner{
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    padding: 0.625rem 1.2rem 0.625rem 1.5rem;
    border-radius: 0.416rem;
    overflow: hidden;
    position: relative ;
    background: linear-gradient(to left,#309FF2 0%, #00447C 100% );
}
a.btn_primary .primary_inner span,a.btn_primary .primary_inner svg{
    position: relative;
    z-index: 1;
}
a.btn_primary .primary_inner::after{
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    z-index: 0;
    border-width: 1.4rem 2.9rem;
    border-color: transparent #309FF2 #309FF2 transparent;
    border-style: solid;
    transition: all ease .3s;
    background: transparent;
}

@media (hover: hover) {
    a.btn_primary:hover .primary_inner::after{
        transform: scale(12);
        transform-origin: center right;
    }
    a.btn_primary:hover .primary_inner svg{
        transform: translateX(25%);
    }
}



a.btn_primary .primary_inner svg{
    stroke: #fff;
    width: 1rem;
    margin-left: 1rem;
    transition: all ease .3s;
}


a.btn_tabScreen{
    box-sizing: border-box;
    display: flex;
    display: -ms-flexbox;
    border: 4px solid #555;
    border-radius: 100px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    color: #555;
    font-weight: bold;
    font-size: 1.25rem;
    width: 100%;
    text-align: center;
    text-shadow: 0 4px 4px rgba(0,0,0,0.1);
    justify-content: flex-start;
    align-items: center;
    padding: 0.6rem 0;
    transition: .3s all ease;
    padding-right: 1.4rem;
    letter-spacing: 0;
}

a.btn_tabScreen::before{
    content: "";
    display: block;
    border-top: 4px solid #555;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    width: 0.95rem;
}

a.btn_tabScreen span.icon{
    display: block;
    border-radius: 100%;
    box-shadow: 0 4px 4px rgba(0,0,0,0.1);
    background: #555;
    padding: 0.4rem;
    margin-right: 0.7rem;
}

a.btn_tabScreen span.txt{
    margin: auto;
}


a.btn_tabScreen span.icon img{
    width: 1.26rem;
}

a.btn_tabScreen:hover,a.btn_tabScreen.is-active{
    background: #555;
    color: #fff;
}

a.btn_tabScreen:hover span.icon,a.btn_tabScreen.is-active span{
    box-shadow: none;
}

.row{
    justify-content: center;
}

.wrap{
    width: 100%;
    position: relative;
    z-index: 0;
    overflow-x: hidden;
}

body > .main_header{
    opacity: 0;
}

body > .main_header.is-active{
    opacity: 1;
}

body > .section,footer{
    position: relative;
    z-index: 1;
}

.loader{
    pointer-events: none;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100vh;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background: #f0fbff;
}

.loader.is-active{
    opacity: 1;
    transition: all ease .5s;
}

.ball-pulse-sync>div, .ball-pulse>div, .ball-scale-random>div, .ball-scale>div{
    background-color: #41B6E6;
}

.wrap{
    transition: all ease .5s;
}

.wrap.is-active{
    /*opacity: 1;*/
}

.wrap .kv_bg{
    position: fixed;
    z-index: -2;
    bottom: 0;
    width: 100%;
    height: 120vh;
    background: #f0fbff;
    background-image: url("../images/kv_desktop.jpg"), url("../images/kv_bg.jpg");
    background-repeat: no-repeat;
    background-size: 100%,cover;
    background-position: center bottom , center top;
    transform: translateY(14vh);
}

.wrap .kv_bg_mobile{
    transform: translateY(5vh);
    background: #f0fbff;
    background-image: url("../images/kv_desktop_m.jpg"),url("../images/kv_bg_m.jpg");
    background-repeat: no-repeat;
    background-size: 100%,cover;
    background-position: center bottom , center center;
}

.section_kv{
    pointer-events: none;
    position: relative;
    right: 0;
    left: 0;
    box-sizing: border-box;
    /*width: 90%;*/
    height: 100vh;
    margin: auto;
    /*display: flex;
    align-items:center;*/
    padding-bottom: 1rem;
}

.wrap.is-active .section_kv{
    animation: object-in2 .7s .1s  cubic-bezier(.175,.885,.32,1.275) backwards;
}


.section_kv .kv_modal{
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    transition: all ease .5s;
    /*filter: drop-shadow(7px 7px 4px rgba(147,147,147,0.6)) drop-shadow(7px 7px 4px rgba(147,147,147,0.3));*/
}

.section_kv .modale_border{
    position: relative;
    /*animation: object-in2 .7s  cubic-bezier(.175,.885,.32,1.275); backwards;*/
}

.section_kv .modale_shadow{
    opacity: 0.3;
    z-index: 0;
    /*animation: object-in3 .7s  cubic-bezier(.175,.885,.32,1.275); backwards;*/
}


.section_kv .modale_logobg{
    width: 100%;
    position: absolute;
    top: 0;
    margin: auto;
    z-index: 4;
}


.section_kv .outside_border,.section_kv .inside_border{
    margin: auto;
    z-index: 2;
}

.section_kv .modale_outside{
    padding-bottom: 1rem;
    /*display: flex;
    align-items:center;*/
    left: 0;
    right: 0;
    margin: auto;
}


.section_kv .outside_shadow{
    bottom: -1.5%;
    right: -0.5%;
}

.section_kv .modale_outside img{
    width: 100%;
    margin: auto;
}

.section_kv .modale_shadow img{
    width: 100%;
    transform: translate(5px , 5px);
}


/*.section_kv .outside_shadow img{
    width: 90.5%;
}*/

.section_kv .border_shadow{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}


.section_kv .kv_draw{
    margin: auto;
    z-index: -1;
    left: 0;
    right: 0;
    /*animation: fade-in .3s 2.5s  ease-in both ;*/
}


.section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
    top: 5vh;
    position: fixed;
    width: 90%;
}



.section_kv .kv_object{
    width: 100%;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
}

.section_kv .object{
    position: absolute;
    z-index: 3;
    filter:  drop-shadow(5px 5px 3px rgba(0,0,0,0.3));
}

.section_kv .object_title{
    filter: none;
}

.wrap.is-active .section_kv .object_title .main_title{
    animation: zoom-in .6s 2s cubic-bezier(.175,.885,.32,1.275) backwards ;
}

.wrap.is-active .section_kv .object_title .sub_title{
    animation: fade-in .5s 2.2s ease-in both ;
}

.wrap.is-active .section_kv .object_animation{
    animation: object-in .5s 1.4s cubic-bezier(.17,.67,.65,1.41) backwards ;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(1){
    animation-delay: 0.5s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(2){
    animation-delay: 0.7s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(8){
    animation-delay: 0.9s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(4){
    animation-delay: 1.1s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(11){
    animation-delay: 0.8s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(6){
    animation-delay: 1.5s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(7){
    animation-delay: 1.7s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(3){
    animation-delay: 1.6s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(9){
    animation-delay: 0.6s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(10){
    animation-delay: 1.8s;
}

.wrap.is-active .section_kv .object_animation:nth-of-type(5){
    animation-delay: 1.3s;
}


@keyframes zoom-in{
    0%{
        opacity: 0;
        transform: scale(1.5);
    }
    100%{
        opacity: 1;
        transform: scale(1.0);
    }
}

@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


@keyframes object-in{
    0%{
        opacity: 0;
        transform: translateY(25px);
    }
    85%{
        transform: translateY(-5px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes object-in2{
    0%{
        opacity: 0;
        transform: translateY(-10vh);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes object-in3{
    0%{
        opacity: 0;
        margin-bottom:-100px ;
    }
    100%{
        opacity: 0.3;
        margin-bottom:0 ;
    }
}


.section_transition .container_content{
    text-align: center;
    line-height: 200%;
}


.content_item{
    font-weight: bold;
}

.content_item h3.content_list{
    margin-top: 1em;
}

.section_transitionA{
    height: 100vh;
    overflow: hidden;
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    justify-content: flex-end;
}

.section_transitionA .container_content{
    margin: 0 auto;
}

.section_transitionA .content_item{
    margin-top: 4vh;
}

.section_transitionA .container_object{
    position: relative;
    margin: 0 auto;
}
.section_transitionA .container_object .item{
    width: 100%;
    display: flex;
    display: -ms-flexbox;
}

.section_transitionA .container_object .item.item_bg{
    position: absolute;
    bottom: 10%;
    justify-content: space-between;
}

.section_transitionA .container_object .item.item_comp{
    align-items: flex-end;
    justify-content: space-between;
}

.section_transitionA .container_object .item.item_table{
    position: relative;
    z-index: 3;
    align-items: flex-end;
    margin-top: -12%;
    justify-content: space-between;
}

.section_transitionA .object_bg{
    position: relative;
    z-index: 2;
    width: 38.92%;
    margin-left: 10.94%;
}

.section_transitionA .object_cup{
    position: relative;
    width: 15.4%;
    margin-right:  23.17%;
    z-index: 3;
}

.section_transitionA .object_main{
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    width: 25.42%;
    margin: 0 auto;
}

.section_transitionA .object_computer{
    position: relative;
    z-index: 3;
    width: 18.95%;
    margin-left: 9.33%;
}

.section_transitionA .object_monitor{
    position: relative;
    z-index: 3;
    width: 27.33%;
    margin-right: 5.9%;
}

.section_transitionA .object_earphone{
    width: 10.34%;
    margin-left: 2.587%;
}

.section_transitionA .object_loudspeaker{
    width: 8%;
    margin-left: -11.5%;
}

.section_transitionA .object_keyboard{
    width: 34%;
}

.section_transitionA .container_object .item_intel{
    width: 90%;
    position: relative;
    z-index: 2;
    padding-bottom: 0.4rem;
    align-items: center;
    margin: auto;
    transform: translateY(1rem);
    margin-bottom: 1rem;
}

.section_transitionA .item_intel img{
    width: 2rem;
}

.section_transitionA .item_intel p{
    color: #fff;
    font-weight: 300;
    margin-left: 0.5rem;
    font-size: 0.65rem;
}

.section_transitionA .container_object .item.item_desktop{
    content: "";
    display: block;
    left: -10%;
    bottom: 0;
    right: 0;
    z-index: 1;
    margin: auto;
    width: 120%;
    /*height: 100vh;*/
    position: absolute;
    /*background-image: url("../images/kv_desktop.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center bottom;*/
}


.section_transitionA .content_list p{
    justify-content: center;
    line-height: 1.5;
    margin-bottom: 0.4em;
    display: flex;
    display: -ms-flexbox;
}

.section_transitionA .content_list .icon img{
    display: block;
    width: 2rem;
}

.section_screen{
    position: relative;
    z-index: 2;
    background: #fff;
}

.section_screen .container_tab{
    position: absolute;
    z-index: 1;
    top: 8vh;
    left: 0;
    right: 0;
    margin: auto;
}

.section_screen .screen{
    position: relative;
    top: 0;
    padding: 24vh 0 5vh 0;
    min-height: 110vh;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

.tab_contentScreen{
    display: none;
}

.tab_contentScreen.is-active{
    display: block;
}



.section_screen .screen .col_object:nth-of-type(1){
    order: 5;
}

.section_screen .screen .col_object:nth-of-type(2){
    order: 2;
}

.section_screen .screen .col_object:nth-of-type(3){
    order: 1;
}
.section_screen .screen .col_object:nth-of-type(4){
    order: 4;
}
.section_screen .screen .col_object:nth-of-type(5){
    order: 3;
}

.section_screen .screen_action .col_object:nth-of-type(1){
    order: 3;
}

.section_screen .screen_action .col_object:nth-of-type(2){
    order: 1;
}

.section_screen .screen_action .col_object:nth-of-type(3){
    order: 4;
}
.section_screen .screen_action .col_object:nth-of-type(4){
    order: 2;
}



.section_screen .container_tab .col-25{
    margin: 0.5rem;
}

.section_screen .container_content{
    text-align: center;
    line-height: 1.8;
    margin: 1% auto;
}

.section_screen .container_object .row{
    align-items: baseline;
}



.section_screen .container_object a.btn_object{
    text-align: center;
    font-size: 0.8333rem;
}

.section_screen .container_object a.btn_object p{
    margin-top: 0.5rem;
}

.section_screen .container_object a.btn_object .object{
    position: relative;
}


.section_screen .container_object a.btn_object .object img{
    position: relative;
    z-index: 0;
}

.section_screen .container_object a.btn_object .object svg,
.txt_arrow .icon{
    transition: all ease .3s;
}

.section_screen .container_object a.btn_object:hover .object svg,
a.btn:hover .txt_arrow .icon{
    transform: translateX(25%);
}

.section_screen .container_object a.btn_object svg,a.btn svg{
    stroke: #fff;
    width: 0.9rem;
}

.section_screen .container_object a.btn_object .object svg{
    display: block;
    position: absolute;
    right: 8%;
    bottom: 0;
    padding-bottom: 9.5%;
    z-index: 2;
}

.section_screen .container_object .col-md-15 a.btn_object .object svg{
    right: 12%;
    padding-bottom: 13.2%;
}


a.btn .txt_arrow{
    align-items: center;
}

a.btn .txt_arrow .icon{
    font-size: 0;
    vertical-align: middle;
    display: inline-flex;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 100%;
    text-align: center;
    background: #309FF2;
    margin-left: 0.3rem;
    margin-bottom: 3px;
}

.section_screen .tag_content{
    text-align: center;
    display: flex;
    display: -ms-flexbox;
    justify-content: center;
    color: #00447C;
    font-weight: 600;
    font-size: 0.666rem;
}

.section_screen .tag_content .tag ~ .tag{
    margin-left: 1rem;
}

.section_screen .tag_content img{
    width: 1.666rem;
    margin: auto;
}

.section_screen .btn_primary{
    margin-top: 1.5vh;
}

.section_transitionB{
    background: #EEFCFF;
    padding-bottom: 5%;
}

.section_transitionB .container{
    background: url("../images/pattern_paper.png") repeat;
    position: relative;
    padding: 3.2rem 0 3rem 0;
    transform: translateY(-13px);
    box-shadow: 4px 4px 4px rgba(67,67,67,0.3);
    z-index: 2;

}

.section_transitionB .container:before,
.section_transitionB .container:after{
    content: "";
    display: block;
}

.section_transitionB .container:before{
    width: 6.75rem;
    height: 1.75rem;
    background: url("../images/object_tape.png") no-repeat;
    background-size: cover;
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    margin: auto;
}
.section_transitionB .container:after{
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 14.125rem;
    height: 5.9rem;
    /*background: url("../images/object_transitionB.svg") no-repeat;*/
    background-size: 100%;
}

.section_transitionB  .object_paint{
    position: relative;
    top: -1rem;
    left: 1rem;
    width: 12em;
    height: auto;
}


.section_feature{
    background: linear-gradient(180deg, #EEFCFF 0%,  #F9FAFA 98%);
    padding-bottom: 3%;
}

.section_feature .container{

}

.section_feature .video_item{
    position: relative;
    margin-top: 6%;
}

.section_feature .feature_video{
    position: absolute;
    width: 82.841%;
    left: 0;
    right: 0;
    top: 4.9%;
    height: 71.188%;
    margin: auto;
    z-index: 2;
}

.section_feature  .feature_video::before{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.section_feature  .feature_video iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.section_feature  .feature_tab{
    display: flex;
    display: -ms-flexbox;
    margin: auto;
    justify-content: center;
    margin-top: 1rem;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
}



a.btn_tabFeature{
    position: relative;
    display: block;
    font-size: 0.8rem;
    background: #fff;  
    border: #2F91DB 2px solid;
    border-radius: 20px;
    color: #2F91DB;
    padding: 0.625rem 0;
    text-align: center;
    width: 5.5rem;
}

a.btn_tabFeature ~ a.btn_tabFeature{
    margin-left: 0.4rem;
}
a.btn_tabFeature:before,
a.btn_tabFeature:after{
    content: "";
    display: block;
    background: #2F91DB;
    margin: auto;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

a.btn_tabFeature ~ a.btn_tabFeature:before{
    position: absolute;
    left: -0.6rem;
    top: 0;
    bottom: 0;
    width: 0.6rem;
    height: 4px;
}

a.btn_tabFeature:after{
    position: absolute;
    right: 0;
    left: 0;
    width: 4px;
    height: 130%;
    top: -15%;
    z-index: -1;
}

a.btn_tabFeature span:nth-of-type(1){
    display: block;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.2rem;
}

a.btn_tabFeature.is-active{
   background: #2F91DB;
   color: #fff;
}

.feature_content{
    width: 95%;
    margin: auto;
    margin-top: 1.5rem;
}

.section_feature .tab_contentFeature{
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    justify-content: center;
    min-height: 8rem;
    display: none;
}

.section_feature .tab_contentFeature.is-active{
    display: flex;
    display: -ms-flexbox;
}

.section_feature .tab_contentFeature p{
    text-align: justify;
    font-weight: normal;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

/*.section_feature .tab_contentFeature p:nth-of-type(1){
    margin-top: 1rem;
}*/

.section_feature .tab_contentFeature p:last-of-type{
    margin-bottom: 1rem;
}

.section_feature .tab_contentFeature .icon_content{
    display: flex;
    display: -ms-flexbox;
    justify-content: space-around;
    padding: 2rem 0;
}

.btn_optimizer{
    text-align: center;
    display: block;
    font-size: 1rem;
    color: #333;
    padding: 0 0.5rem;
}

.btn_optimizer .icon{
    box-sizing: border-box;
    padding: 0.5rem;
    width: 4.1rem;
    height: 4.1rem;
    background: #66CEEF;
    border-radius: 100%;
    margin: auto;
    margin-bottom: 0.5rem;
}

.btn_optimizer .txt img{
    display: inline-block;
    width: 1.25rem;
    margin-right: -1rem;
    height: auto;
    font-size: 0;
    vertical-align: middle;
}

.section_introduce{
    color: #fff;
    background: #66CEEF;
    padding-bottom: 3%;
    margin-bottom: -1px;
}

.section_introduce::before,.section_peripherals::after{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    background: url("../images/dec_feature.svg") no-repeat;
    background-size: cover;
    background-position: top right;
    transform: translateY(-2px);
}

.section_introduce .introduce_tab .container{
    border-bottom: 5px solid #1CBEF1;
    margin: 2% auto 4% auto;
}

.section_introduce .introduce_tab .container .row{
    justify-content: center;
}

.section_introduce  .swiper-wrapper{
    align-items: stretch;
}

.section_introduce .title_item{
    text-align: center;
}

.section_introduce .tab_item{
    display: flex;
    display: -ms-flexbox;
    justify-content: flex-end;
}


a.btn_tabIntroduce{
    font-weight: 600;
    font-size: 1.45rem;
    color: #00447C;
    display: block;
    position: relative;
}

a.btn_tabIntroduce span{
    display: block;
    padding: 0.4rem 1.25rem 0.8rem 1.25rem;
}

a.btn_tabIntroduce.is-active{
    color: #FFFACA;
}

a.btn_tabIntroduce.is-active::after{
    content: "";
    display: block;
    width: 100%;
    height: 0.4rem;
    background: #FFFACA;
}

a.btn_tabIntroduce.is-active::before{
    content: "";
    display: block;
    width: 0.68rem;
    height: 0;
    padding-bottom: 0.68rem;
    background: url("../images/tab_triangle.svg") no-repeat;
    background-size: cover;
    background-position: top center;
    position: absolute;
    bottom: -0.6rem;
    right: 0;
    left: 0;
    margin: auto;
}

.tab_contentIntroduce{
    display: none;
    margin-bottom: 2rem;
}
.tab_contentIntroduce.is-active{
    display: block;
}
.section_introduce .introduce_content .product_item{
    width: 100%;
    margin: auto;
}

.section_introduce .introduce_content h3{
    color: #00447C;
    margin-bottom: 0.7rem;
}

.section_introduce .btn_latitude{
    display: block;
}

.section_introduce .introduce_content .product_item p.notice{
    margin-top: 1rem;
}

.section_introduce a.btn_latitude .txt_arrow .icon{
    background: #fff;
}

.section_introduce a.btn_latitude .txt_arrow svg{
    stroke: #309FF2;
}

.section_introduce .introduce_content .info_item{
    text-align: left;
    margin-top: 2rem;
}

.section_introduce .introduce_content .info_item p.green{
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.5;
    justify-content: center;
    text-align: justify;
}

.section_introduce .introduce_content .info_item p.green span{
    align-items: center;
}
.section_introduce .introduce_content .info_item p .icon_green{
    width: 2.5rem;
    height: auto;
}

.section_peripherals .row{
    flex-wrap: nowrap;
}

.section_peripherals::after{
    background: url("../images/dec_peripherals.svg") no-repeat;
    transform: translateY(2px);
    background-size: cover;
    background-position: bottom left;
}

.feature_dec,.kol_dec,.award_dec,.peripherals_dec{  
    pointer-events: none;
    width: 100%;
    position: absolute;
    right: 0;
    /*bottom: 0;*/
    top: 0; 
    z-index: 3;
}

.peripherals_dec{
    top: initial;
    bottom: 2%;
}
.feature_dec .row,.kol_dec .row,.award_dec .row{
    justify-content: flex-end;
}

.section_transitionC{
    padding: 12% 0 25% 0;
    background: #2F91DB;
    background-image: url("../images/dec_transitionC_bottom.svg"),url("../images/dec_transitionC_top.svg");
    background-position:  top -2px right ,bottom -2px right;
    background-repeat: no-repeat;
    background-size: 140%;
    color: #fff;
}

.section_transitionC .container{
    margin-bottom: 10px;
}

.section_transitionC p{
    margin-bottom: 0.5rem;
}

.dec_transition .row{
    align-items: center;
    justify-content: center;
}

.section_peripherals{
    margin-top: -2px;
    background: linear-gradient(180deg, #D5F0FF 2%, #8DE4FF 98%), #8DE4FF;
}

.section_peripherals .container_slid{
    padding: 15.5% 1rem 4vh 1rem;
    width: 90%;
}

.section_peripherals .btn_primary{
    margin-bottom: 8%;
}

.section_peripherals .peripherals_item,.item_award,.kol_item{
    display: flex;
    display: -ms-flexbox;
    align-items: center; 
    justify-content: center;
    border: #26BFF0 solid 0.23rem;
    color: #fff;
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 10px 0;
    filter: drop-shadow(4px 4px 6px rgba(32, 129, 190, 0.3));
}
.section_peripherals  .other_container .peripherals_item{
    border-color: #2F91DB;
}



.section_peripherals .peripherals_item::before,
.section_peripherals .peripherals_item::after,
.item_award::before,
.item_award::after,
.kol_item::before,
.kol_item::after{
    display: block;
    content: "";
    width: 15px;
    height: 0.23rem;
    margin: 0 -1px ;
    background: #26BFF0;
}

.section_peripherals .other_container .peripherals_item::before,
.section_peripherals .other_container .peripherals_item::after{
    background: #2F91DB;;
}


.section_peripherals .peripherals_item .inner_block,.item_award .item_inner,
.section_kol .kol_item .item_inner{
    background: #26BFF0;
    border-radius: 0.833rem;
    padding: 1rem;
}

.section_peripherals .other_container .peripherals_item .inner_block{
    background: #2F91DB;
}

.peripherals_item .pic{
    margin-top: -35%;
    margin-bottom: 0.5rem;
}

.peripherals_item .pic img{
    width: 90%;
    margin: auto;
}

.peripherals_item .txt p{
    min-height: 2.6em;
    letter-spacing: 0;
}

.swiper-button-next:after, .swiper-button-prev:after{
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
}

.swiper-button-next, .swiper-button-prev{
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: -1.25rem;
    margin-top: inherit;
    border-radius: 100%;
    background: #5FD8FF;
    box-shadow: 2px 4px 4px rgba(14, 88, 142, 0.25);
}

.other_container .swiper-button-next, .other_container .swiper-button-prev{
    background:  #41ADFD
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
    right: 5px;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    left:  5px;
}

a.btn_peripherals{
    display: block;
    background: #fff;
    color:#2F91DB; 
    border-radius: 100px;
    width: 10rem;
    font-weight: 600;
    display: flex;
    display: -ms-flexbox;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-around;
    padding: 0.6rem 2.25rem;
    box-shadow: 4px 4px 4px rgba(14, 88, 142, 0.25);
    margin: 1rem auto;
}

a.btn_peripherals svg{
    stroke: #309FF2;
}


.section_kol{
    background: #BDEDF8;
    color: #00447C;
}

.kol_dec{
    transform: translateY(-20%);
    top: initial;
    bottom: 0;
}

.section_kol .kol_item{
    border-color: #63D0F3 ;
    margin: 10% auto 13% auto;
}

.section_kol .kol_item::before,
.section_kol .kol_item::after{
    background: #63D0F3;
}

.section_kol .kol_item .item_inner{
    padding: 0.8333rem;
    width: 100%;
    background: #63D0F3;
}

.section_kol .kol_item .item_inner .video{
    position: relative;
    border-radius: 0.833rem;
    overflow: hidden;
}

.section_kol .kol_item .item_inner .video::before{
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.section_kol .kol_item .item_inner .video iframe{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}

.section_kol::after{
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    right: 9px;
    margin: auto;
    width: 100%;
    height: 0;
    padding-bottom: 23%;
    background-image:url("../images/dec_transitionD_top.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    margin-bottom:  -2px;
}

.section_transitionD{
    color: #fff;
    /*padding: 5% 0 25% 0;*/
    background: rgba(14, 178, 232, 1);
    background-image:url("../images/dec_transitionD_bottom.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 140%;
}

.section_transitionD .container{
    transform: translateY(-40%);
}




.section_award{
    padding: 2% 0;
    margin-top: -1px ;
    margin-bottom:  -1px;
    color: #fff;
    background: #185181;
}

/*.section_award::before{
    content: "";
    display: block; 
    width:  100%;
    height: 0;
    padding-bottom:  17.18%;
    position: relative;
    top: -1px;
    z-index: 2;
}*/

.section_award .award_container{
    margin: 5% auto;
}

.section_award .award_container .row{
    justify-content: center;
}

.section_award .award_container .row .item{
    margin: 0 1rem;
}

.section_award .item_award{
    width: 90%;
    margin: auto;
    margin-bottom: 0.6rem;
    border-color: #95E5FF;
    filter: drop-shadow(4px 4px 6px rgba(0, 17, 31, 0.3));
}
.section_award  .item_award::before,
.section_award  .item_award::after{
    background: #95E5FF;
}

.section_award  .item_award .item_inner{
    position: relative;
    background: #95E5FF;
    padding: 1.6rem 1rem 0.9rem 1rem;
}

.section_award  .award_tag{
     background: #FEBA08;
     width: 4rem;
     height: 4rem;
     border-radius: 100%;
     line-height: 4rem;
     text-align: center;
     box-shadow: 0px 4px 4px rgba(0, 17, 31, 0.3);
     font-size: 1.45rem;
     position: absolute;
     top: 1rem;
     left: 1rem;
     font-weight: 600;
     letter-spacing: 0.2rem;
}

.award_txt p{
    font-weight: 500;
    margin-top: 0.2rem;
}


.section_award .info_container .row{
    justify-content: flex-start;
    text-align: left;
}

.section_award .info_container .item_info{
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    font-size: 1.5rem;
}

.section_award .info_container .item_info p{
    margin-bottom: 0.5rem;
}

.section_award .info_container .item_info .btn_primary{
    align-self: center;
    margin-top: 2rem;
}

.section_award a.btn_primary{
    color: #00447C;
    border-color: #FFD567;
}

.section_award a.btn_primary .primary_inner{
    background: linear-gradient(270deg, #FFFACA 0%, #FFD567 100%);
}

.section_award a.btn_primary .primary_inner svg{
    stroke: #00447C;
}

.section_award  a.btn_primary .primary_inner::after{
    border-color: transparent #FFFACA #FFFACA transparent;
}

.section_award  a.btn_primary::after,.section_award  a.btn_primary::before{
    background: #FFD567;
}

.award_dec{
    transform: translateY(-65%);
}

.section_award .notice{
    margin-top: 1rem;
    color: #E0E0E0;
}

.section_transitionE{
    color: #fff;
    background: #2F91DB;
    background-image: url("../images/dec_transitionE.svg");
    background-repeat: no-repeat;
    background-position: top -2px right;
    padding: 10% 0;
    background-size: 100%;
}
.box_modal .modal_award{
    position: relative;
}

.box_modal .modal_award .container{
    width: 100%;
}

.box_modal .modal_award .btn_close{
    top: 0;
    transform: scale(1.5);
    right: 0;
}


.box_modal .modal_content{
    position: relative;
    border-radius: 0.833rem;
    border: 0.42rem solid #2F91DB;
    padding: 0.7rem;
    filter: drop-shadow(4px 4px 6px rgba(0, 17, 31, 0.3));
}

.box_modal .modal_content .line{
    background: #2F91DB;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

.box_modal .modal_content .line:nth-of-type(1){
    width: 101%;
    height: 0.25rem;
    margin: auto -0.5%;
}

.box_modal .modal_content .line:nth-of-type(2){
    width: 0.25rem;
    height: 101%;
    margin:  -0.5% auto;
}

.box_modal .modal_content .content_inner{
    padding: 1.7rem 0;
    border-radius: 0.833rem;
    background: #fff;
    line-height: 1.6;
    overflow-y: auto;
    max-height: 75vh;
}

.box_modal .modal_content .content_inner .container{
    width: 94%;
    letter-spacing: 0rem;
}

.box_modal .modal_content .content_inner .row{
    justify-content: center;
    align-items: center;
}

.box_modal .modal_content .content_inner ul{
    margin-left: 1rem;
}

.box_modal .modal_content .content_inner p{
    margin-bottom: 1rem;
    font-weight: 500;
    text-align: justify;
    font-size: 1.1rem;
}

.box_modal .modal_content .content_inner ul p{
    font-weight: 600;
} 
.box_modal .modal_content .content_inner li{
    text-align: justify;
    margin-bottom: 0.6rem;
    letter-spacing: 0rem;
}
.box_modal .modal_content .content_inner h3{
    color: #2F91DB;
    text-align: center;
    margin-bottom: 1.5rem;
}

.box_modal .modal_content .content_inner .btn_primary{
    margin-top: 2rem;
}

.box_modal .btn_close{
    background: #2F91DB;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    top: -1.25rem;
    right: -1.25rem;
}

/*直式*/
@media (orientation: portrait){
    .b_br {
        display: none;
    }
    img.pc,.kv_bg_pc{
        display: none;
    }

    /*.section_kv .modale_outside{
        transform: translateY(-18.5vh);
    }*/
    .section_kv .outside_shadow{
        bottom: -1.5%;
        right: -1.5%;
    }
    
    .section_kv .object_main{
        width: 61.265%;
        right: 4.177%;
        top: 42%;
    }

    .section_kv .object_pen{
        width: 1.2%;
        right: 9.5%;
        bottom: 4.5%;
    }


    .section_kv .object_power{
        width: 12.73%;
        right: 8.9%;
        bottom: 21.6%;
    }

    .section_kv .object_monitor{
        width: 26.685%;
        left: 8%;
        bottom: 18.5%;
    }

    .section_kv .object_computerkeyboard{
        width: 18.6%;
        right: 41.15%;
        bottom: 4%;
    }

    .section_kv .object_computerscreen{
        width: 18.99%;
        left: 16.43%;
        bottom: 4%;
    }

    .section_kv .object_earphone{
        width: 18.29%;
        left: 7.28%;
        top: 45.5%;
    }

    .section_kv .object_title{
        width: 87.56%;
        left: 6.7918%;
        top: 23.1%;
    }

    .section_kv .object_title .sub_title{
        width: 84%;
        margin: auto;
        margin-top: 0.55rem;
    }

    .section_kv .object_mouse{
        width: 6.284%;
        left: 7.86%;
        top: 10.97%;
    }

    .section_kv .object_keyboard{
        width: 32.54%;
        left: 26.36%;
        top: 12.97%;
    }

    .section_kv .object_adapters{
        width: 10.73%;
        right: 27.9%;
        top: 13.0%;
    }

    .section_kv .object_loudspeaker{
        width: 9.815%;
        right: 7.77%;
        top: 13.666%;
    }

    .section_transitionA{
        height: auto;
    }

    .section_transitionA .container_object .item.item_table{
        margin-top: -14%;
    }
    .section_transitionA .container_content{
        width: 75%;
        /*margin-top: 8vh;*/
    }
    .section_transitionA .container_object{
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .section_transitionA .container_object .item.item_desktop{
        background-image: url("../images/kv_desktop_m.jpg");
        min-height: 144px;
    }

    .section_transitionA .content_item{
        margin-top: 10vh;
    }

    .section_transitionA .content_item h3,.section_transitionA .content_item h2{
        line-height: 1.6;
        margin-bottom: 0.5em
    }
    .section_transitionA .object_monitor{
        width: 50%;
        margin-bottom: 5%;
        margin-left: 20%;
        z-index: 2;
    }

    .section_transitionA .object_computer{
        width: 36%;
        margin-bottom: 5%;
    }
    .section_transitionA .container_object .item.item_table{
        width: 200%;
        margin-top: -24%;
        margin-bottom: 10%;
    }
    .section_transitionA .container_object .item.item_bg{
        width: 160%;
    }
    .section_transitionA .object_cup{
        width: 18%;
        transform: translateX(-60%) translateY(40%);
    }
    .section_transitionA .object_bg{
        width: 60%;
        margin-left: 1%;
    }

    .section_transitionA .object_loudspeaker{
        margin-bottom: -5%;
    }

    .section_transitionA .object_main{
        width: 50%;
    }
    .section_transitionA .container_object .item.item_bg{
        bottom: 25%;
    }
    .section_transitionA .object_computer{
        margin-left: 2%;
    }
    
    .section_screen .container_tab .row{
        justify-content: space-around;
    }
    .section_transitionA .container_object .item_intel{
        width: 90%;
    }

    .section_screen .container_tab .col-md-2{
        margin: 1rem 0;
    }

    a.btn_tabScreen{
        width: 110%;
        flex-direction: column;
        align-items: center;
        padding-right: 0;
        border-radius: 25px;
        border-width: 3px;
    }

    a.btn_tabScreen::before{
        transform: rotate( 90deg);
        transform-origin: center top;
        margin-top: -4px;
        margin-right: -1.5px;
        border-width: 3px;
    }

    a.btn_tabScreen span.icon{
        margin:auto;
    }
    a.btn_tabScreen span.txt{
        margin-top: 0.5rem;
    }

}

/*橫式*/
@media (orientation: landscape){
    .s_br {
        display: none;
    }
    img.mobile,.kv_bg_mobile{
        display: none;
    }

    
    .section_kv .object_main{
        width: 30.48%;
        right: 2.7%;
        top: 16.5%;
    }

    .section_kv .object_pen{
        width: 0.78%;
        right: 3%;
        bottom: 7.5%;
    }

    .section_kv .object_power{
        width: 8.43%;
        right: 3.99%;
        bottom: 16.5%;
    }

    .section_kv .object_monitor{
        width: 14.79%;
        right: 43.1%;
        bottom: 6.5%;
    }

    .section_kv .object_computerkeyboard{
        width: 12.14%;
        right: 62.48%;
        bottom: 6.5%;
    }

    .section_kv .object_computerscreen{
        width: 12.4%;
        left: 10.23%;
        bottom: 6.5%;
    }

    .section_kv .object_earphone{
        width: 7.36%;
        right: 37.23%;
        top: 53.4%;
    }

    .section_kv .object_title{
        width: 48.65%;
        left: 4.2%;
        top: 42.5%;
    }

    .section_kv .object_title .sub_title{
        width: 81.65%;
        margin: auto;
        margin-top: 0.45rem;
    }

    .section_kv .object_mouse{
        width: 4.16%;
        left: 4.78%;
        top: 18.1%;
    }

    .section_kv .object_keyboard{
        width: 21.59%;
        left: 17.266%;
        top: 22%;
    }

    .section_kv .object_adapters{
        width: 7.14%;
        left: 40.32%;
        top: 19.52%;
    }

    .section_kv .object_loudspeaker{
        width: 6.524%;
        left: 54.68%;
        top: 19.978%;
    }   

    .section_transitionA .container_content{
        width: 85%;
    }
    .section_transitionA .container_object{
        width: 90%;
    }

    .section_screen .screen .col_object:nth-of-type(1){
        order: 1;
    }

    .section_screen .screen .col_object:nth-of-type(2){
        order: 2;
    }

    .section_screen .screen .col_object:nth-of-type(3){
        order: 3;
    }
    .section_screen .screen .col_object:nth-of-type(4){
        order: 4;
    }
    .section_screen .screen .col_object:nth-of-type(5){
        order: 5;
    }

    .section_transitionB  .object_paint{
        position: absolute;
        top: 0.8rem;
    }
}

@media screen and (max-width:767px) {
    html,
    body {
        overflow-x: hidden;
    }

    .col-0{
        display: none
    }
    
    .header_nav {
         padding: 1.5em 2em;
    }
    .header_nav.is-active a.logo{
        transform: scale(1.1);
    }

    a.btn_tabScreen{
        font-size: 1rem;
    }

    .container{
        width: 92%;
    }
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        width: 90.5%;
    }

    /*.section_kv .kv_modal,.section_kv .modale_outside img{
        width: 90%;
    }

    .section_kv .outside_shadow img{
        width: 90.5%;
    }*/

    .section_screen .screen{
        min-height: 100vh;
        background-size:  210% ,cover;
        background-position: left bottom, center top 30%;
    }

    .section_screen .container_content{
        min-height: 13.5rem;
    }

    .section_screen .col_object{
        margin-bottom: 0.5rem;
    }

    a.btn_tabFeature span:nth-of-type(1){
        margin-bottom: 0
    }


    a.btn_tabFeature .eng{
        transform: scale(0.8) translateX(-10%);
        width: 120%;
        display: block;
        display: none
    }

    .section_screen .screen_point{
        background-image: url("../images/screen-bg_point_desktop_m.jpg") , url("../images/screen-bg_point_bg.jpg");
        background-size:  210% ,350%;
    }
    .section_screen .screen_action{
        background-image: url("../images/screen-bg_action_desktop_m.jpg") , url("../images/screen-bg_action_bg.jpg");
        background-size:  150% , 350%;
    }
    .section_screen .screen_remote{
        background-image: url("../images/screen-bg_remote_desktop_m.jpg") , url("../images/screen-bg_remote_bg.jpg");
        background-size:  210% , 350%;
        background-position: center bottom, right 10% top
    }  
    .section_screen .screen_business{
        background-image: url("../images/screen-bg_business_desktop_m.jpg") , url("../images/screen-bg_business_bg.jpg");
        background-size:  210% , 400%;
        background-position: center bottom, center top;
    } 

    .section_introduce::before,.section_peripherals::after{
        padding-bottom: 45%;
    }

    .section_transitionD{
        margin-top: -2px;
    }

    .section_award{
        margin-top: -5px;
        padding-bottom: 25%;
    }

    .section_award .award_container .row .item{
        margin-bottom: 2rem
    }


}

@media screen and (min-width:768px) {
    /*.section_kv,.section_kv .modale_outside img{
        width: 96%;
    }
    .section_kv .outside_shadow img{
        width: 96.5%;
    }*/
    a.btn_primary .primary_inner{
        padding: 0.625rem 1.7rem 0.625rem 2.0rem;
    }
    .section_screen .screen{
        padding: 22vh 0 20vh 0;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100vh; 
        background-size:  300% ,cover;
        background-position: center bottom, center bottom;
    }
    .section_screen .screen{
        background-size:  140% ,cover;
        background-position: center bottom, center center;
    }

    .section_screen .screen_point{
        background-image: url("../images/screen-bg_point_desktop.jpg") , url("../images/screen-bg_point_bg.jpg");
    }
    .section_screen .screen_action{
        background-image: url("../images/screen-bg_action_desktop.jpg") , url("../images/screen-bg_action_bg.jpg");
    }
    .section_screen .screen_remote{
        background-image: url("../images/screen-bg_remote_desktop.jpg") , url("../images/screen-bg_remote_bg.jpg");
    }  
    .section_screen .screen_business{
        background-image: url("../images/screen-bg_business_desktop.jpg") , url("../images/screen-bg_business_bg.jpg");
    }  
    .section_screen .container_content{
        margin: 4vh auto;
    }
    .section_feature .feature_tab{
        margin-top: 0;
    }

    a.btn_tabFeature ~ a.btn_tabFeature{
        margin-left: 0.625rem;
    }


    a.btn_tabFeature{
        font-size: 0.75rem;
        border-radius: 100px;
        padding: 0.625rem 1.2rem ;
        width: 7rem;
    }

    a.btn_tabFeature ~ a.btn_tabFeature:before{
        left: -0.8rem;
        width: 0.8rem;
        height: 4px;
    }

    .section_introduce::before,.section_peripherals::after{
        padding-bottom: 19%;
    }
    .section_introduce .title_item{
        text-align: left;
    }

    a.btn_tabIntroduce span{
        padding: 0.4rem 1.2rem 1.5rem 1.2rem;
    }

    .section_introduce .introduce_tab .container .row{
        justify-content: space-between;
    }
    .section_kol::after{
        padding-bottom: 18%;
        background-size: 100%;
    }
    .section_transitionC,.section_transitionD{
        background-size: 100%;
    }
    .section_transitionC{
        padding: 12% 0;
        background-position:  top -5px right ,bottom  right ;  
    }

    .peripherals_dec .row{
        justify-content: flex-start;
    }
    .peripherals_dec{
        bottom: 0
    }

    .section_peripherals .container_slid{
        padding: 9vh 1rem 6vh 1rem;
    }

    .dec_transition .row{
        align-items: center;
        justify-content: flex-start;
    }

    .section_kol .kol_item{
        margin: 10% auto;
    }
    .section_transitionD .row{
        align-items: center;
        justify-content: flex-start;
    }
    
    .section_transitionD .object_item{
        margin-left: 2%;
        transform: translateY(-15%);
    }

    .award_dec{
        transform: translateY(-45%);
    }

    .section_transitionE{
        padding: 10% 0 3% 0;
        background-size: 100%;
    }

    .section_transitionE .txt_item{
        margin-top: 2rem;
    }

    .box_modal .modal_content .content_inner{
        max-height: 85vh;
    }
    .box_modal .modal_content .content_inner .pic_item{
        margin-right: 1rem;
    }

}

@media screen and (min-width: 991px){
    html,
    body {
        font-size: 1.35vw;
        letter-spacing: 0.1em;
    }
    
    .header_nav {
         padding: 2.6em 6.2em;
    }
    .header_nav a.logo_main{
        width: 6%;
    }

    .header_nav a.logo_subs{
        width: 2.95%;
    }

    .header_nav {
         padding: 1.5em 2.5em;
    }
    .header_nav a.logo_main{
        width: 16%;
    }

    .header_nav a.logo_subs{
        width: 7.868%;
    }

    .wrap .kv_bg_pc{
        background-size: 100%,cover;
        background-image: url("../images/kv_desktop_ipad.jpg"), url("../images/kv_bg.jpg");
    }
    /*.section_kv .modale_outside{
        transform: translateY(10vh);
    }*/
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        width: 96.5%;
    }
    /*.section_kv .kv_modal,.section_kv .modale_outside img{
        width: 96%;
    }
    .section_kv .outside_shadow img{
        width: 96.5%;
    }*/
    .section_screen .container_tab{
        top: 10vh; 
    }
    .section_screen .screen{
        padding: 20vh 0 5vh 0;
        flex-direction: column;
        justify-content: space-between;
        background-size:  110% ,cover;
    }
    .section_screen .screen_business{
        background-size: 100%,120%;
        background-position: center bottom, center top;
    }  
    .section_screen .screen.tab_contentScreen.is-active{
        display: flex;
        display: -ms-flexbox;
    }
}

@media screen and (min-width: 1200px){
    .container{
        width: 95%;
    }
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        width: 85%;
        top: 3vh;
    }
    /*.section_kv .kv_modal, .section_kv .modale_outside img{
        width: 85%;
    }
    .section_kv .outside_shadow img{
        width: 85.5%;
    }*/
    /*.section_kv .modale_outside{
        transform: translateY(-13.5vh);
    }*/

    .wrap .kv_bg{
        background-size: 102%,cover;
        background-image: url("../images/kv_desktop.jpg"), url("../images/kv_bg.jpg");
    }
    
    .section_peripherals .container_slid{
        padding: 6% 1rem 7vh 1rem;
    }

    .peripherals_item .txt {
        height: auto;
    }

}

@media screen and (min-width: 1400px){
    html,
    body {
        font-size: 1.25vw;
        letter-spacing: 0.05em;
    }

    .container{
        width: 86%;
    }
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        width: 86%;
    }

    /*.section_kv .kv_modal,.section_kv .modale_outside img{
        width: 86%;
    }
    .section_kv .outside_shadow img{
        width: 86.5%;
    }*/
    /*.section_kv .modale_outside{
        transform: translateY(-11.5vh);
    }*/
    .section_screen .screen{
        padding: 22vh 0 5vh 0;
        background-size:  100% ,cover;
    }

    .section_screen .screen_business{
        background-size: 100%,100%;
        background-position: center bottom, center top;
    }  
    .section_screen .container_content{
        margin: 0.5% auto;
    }
    .section_introduce .introduce_content .product_item{
        width: 90%;
        margin: auto;
    }

}

@media screen and (min-width: 1600px){
    html,
    body {
        font-size: 1.1vw;
        letter-spacing: 0.05em;
    }
    .header_nav {
         padding: 1.8em 3.2em;
    }
    .header_nav a.logo_main{
        width: 20%;
    }

    .header_nav a.logo_subs{
        width: 9.836%;
    }
    /*.section_kv .modale_outside{
        transform: translateY(0);
    }*/
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        width: 85%;
    }
    /*.section_kv .kv_modal,.section_kv .modale_outside img{
        width: 85%;
    }
    .section_kv .outside_shadow img{
        width: 85.5%;
    }*/
    .section_introduce .introduce_content .product_item{
        width: 85%;
        margin: auto;
    }
    p.green{
        align-items: center;
    }
    p.green span{
        align-items: center;
    }
}


/*iphoneX-直式*/
@media only screen and (width : 375px) and (min-height : 635px)and (orientation : portrait)  and (-webkit-device-pixel-ratio : 3) {
    .wrap .kv_bg{
        background-size: 155%,cover;
    }
    /*.section_kv .modale_outside{
        transform: translateY(3vh);
    }*/
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        top: 12vh;
    }
}

/*@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { 
}*/

/*ipade-直式*/
@media screen and (max-width:1024px) and (min-width:768px) and (orientation: portrait){
    html,
    body {
        font-size: 2.2vw;
        letter-spacing: 0.1em;
    }
    .header_nav {
         padding: 1.8em 2em;
    }
    .header_nav a.logo_main{
        width: 30%;
    }

    .header_nav a.logo_subs{
        width: 15%;
    }

    .wrap .kv_bg{
        background-size: 100%,cover;
        transform: translateY(12vh);
    }
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        width: 72%;
    }

    /*.section_kv .kv_modal,.section_kv .modale_outside img{
        width: 72%;
    }
    .section_kv .outside_shadow img{
        width: 72.5%;
    }*/
    
    /*.section_kv .modale_outside{
        transform: translateY(-8vh);
    }*/
    .section_transitionA .container_object .item.item_desktop{
        transform: translateY(3vh);
    }

    .peripherals_item .txt {
        height: 5rem;
    }
}

/*手機-橫式*/
@media screen and  (max-width:990px) and (min-width:568px)  and (orientation: landscape){
    html,
    body {
        font-size: 1.5vw;
        letter-spacing: 0.1em;
    }

    .wrap .kv_bg{
        background-size: 122%,cover;
    }

    .header_nav {
         padding: 1.2em 2em;
    }
    .header_nav a.logo_main{
        width: 10%;
    }

    .header_nav a.logo_subs{
        width: 5%;
    }
    /*.section_kv .modale_outside{
        transform: translateY(-20vh);
    }*/
    .section_kv .kv_modal,.section_kv .kv_draw,.section_kv .modale_outside{
        width: 87%;
    }
    /*.section_kv .kv_modal,.section_kv .modale_outside img{
        width: 87%;
    }
    .section_kv .outside_shadow img{
        width: 87.5%;
    }*/
    .section_transitionA{
        height: auto;
    }
    .section_screen .screen{
        background-size:  150% ,cover;
    }
}

@media only screen and (max-width: 1366px) and (min-height: 1024px)
    and (-webkit-min-device-pixel-ratio: 1.5) and (hover: none) {
    .section_transitionA{
        height: auto;
    }
    .wrap .kv_bg_pc{
        background-size: 120%,cover;
        background-image: url("../images/kv_desktop_ipad.jpg"), url("../images/kv_bg.jpg");
    }
    /*.section_kv .modale_outside{
        transform: translateY(5vh);
    }*/
}