@charset 'utf-8';
/* ----------RWD---------- */
@media screen and (min-width: 1921px){
    #hd .change_img img.active{
        width: 100%;
    }
    #hd .proart .change_img{
        bottom: 15%;
    }
    #hd .hdr_tech .content > ul > li.change_link{
        width: 20%;
        margin: 0 2.5%;
    }
    #hd .proart .bottom_content > ul > li.change_link{
        width: 15%;
        margin: 0 2.5% 25px;
    }
    #hd .input_output .change_icon{
        bottom: 20%;
    }
}
@media screen and (max-width: 1600px){
    #hd .mini_led .right_side{
        top: 10%;
    }
    #hd .input_output .change_icon{
        bottom: 2.5%;
    }
    #hd .p_in_p .middle > p {
        margin-bottom: 75px;
    }
    #hd .p_in_p .middle{
        top: 60%;
    }
    #hd .top h1{
        /*margin-bottom: 15px;*/
    }
    #hd .top .right_side{
        top: 45.5%;
        left: 53%;
    }
}
@media screen and (max-width: 1440px){
    #hd h1{
        font-size: 3rem;
    }
    #hd h3 {
        font-size: 2rem;
    }
    #hd .golden_horn h1 {
        font-size: 2.2rem;
    }
    #hd .golden_horn {
        display: inline-block;
        vertical-align: top;
        width: 40%;
        min-width: auto;
        margin-bottom: 10px;
        /*text-align: left;*/
    }
    #hd .top .golden_horn {
        width: 30%;/*RCD 20200413*/
    }
    #hd .top .golden_group {
        /*margin-left: calc(100% - 420px);*//*RCD 20200404*/
        margin-right: -300px;/*RCD 20200413*/
        width: auto;/*RCD 20200413*/
    }
    #hd .golden_horn p{
        margin-bottom: 5px;
    }
    #hd .golden_group {
        /*text-align: right;*/
    }
    #hd .top .right_side {
        width: 50%;
    }
    #hd .top .gray_color{
        font-size: .85rem;
    }
    #hd .top .right_side {
        top: 43.5%;
        left: 50%;
    }
    #hd .top .right_side p{
        line-height: 1.35;
    }
}
@media screen and (max-width: 1366px){

    #hd .top .golden_group {
        /*margin-left: calc(100% - 405px);*//*RCD 20200404*/
    }

    #hd .pq h1 {
        margin-bottom: 50px;
    }
    #hd .center_space h1{
        font-size: 2.8rem;
    }
    #hd h1{
        font-size: 2.5rem;
        margin-bottom: 25px;
    }
    #hd h3 {
        font-size: 1.75rem;
    }
    #hd .mini_led .right_side {
        top: 2.5%;
    }
    #hd .motif{
        width: 45%;
    }
    #hd .motif p{
        margin-bottom: 10px;
    }
    #hd .mini_led figure {
        margin-bottom: 25px;
    }
    #hd .mini_led .mini_chart {
        padding-left: 25%;
        width: 80%;
    }
    #hd .p_in_p .change_link:hover ul,
    #hd .p_in_p .change_link.active ul{
        left: -10%;
    }

    #hd .proart .bottom_content > ul > li.change_link,
    #hd .change_link{
        padding: 5px;
    }
    #hd .change_link p{
        line-height: 1.25;
    }
    #hd .hdr_tech .content{
        width: 90%;
    }
    #hd .hdr_video .content{
        width: 90%;
    }
    #hd .air_balloon .left_side{
        width: 40%;
    }
    #hd .proart .bottom_content{
        width: 95%;
    }
    #hd .p_in_p .middle > p {
        margin-bottom: 50px;
    }
    #hd .change_link li {
        width: 18px;
        height: 16.25px;
    }
    #hd .change_link li:nth-child(3) {
        width: 20px;
        height: 22px;
    }

    #hd .change_link:hover li, 
    #hd .change_link.active li,
    #hd .change_link:hover  li:nth-child(3),
    #hd .change_link.active  li:nth-child(3) {
        width: 20.5px;
        height: 24.75px;
    }
    
    #hd .input_output .change_icon{
        margin-top: -125px;
    }
    
    #hd .proart .change_link ul{
        left: 0%;
    }
    #hd .change_link:hover ul, #hd .change_link.active ul{
        left: -3%;
    }
    #hd .proart .bottom_content > ul > li.change_link{
        width: 25%;
        margin-bottom: 25px;
    }

}
@media screen and (max-width: 1280px){
    #hd .top .golden_group {
        /*margin-left: calc(100% - 365px);*//*RCD 20200404*/
    }
    #hd .hdr_tech .change_link img {
        width: 115px;
    }

    #hd .mini_led figure p {
        width: 100%;
    }
    #hd .mini_led .right_side {
        top: 5.5%;
    }

    #hd .aurora .del_high{
        padding: 10% 7.5%;
        width: 100%;
    }
    #hd .proart .bottom_content{
        bottom: 0;
    }
    #hd .change_link li {
        width: 16px;
        height: 18px;
    }
    #hd .change_link:hover li, 
    #hd .change_link.active li,
    #hd .change_link:hover  li:nth-child(3),
    #hd .change_link.active  li:nth-child(3){
        width: 18px;
        height: 22px;
    }
    #hd .proart .change_img{
        bottom: 22.5%;
    }
    #hd .p_in_p .middle{
        left: 50%;
        width: 45%;
    }
    #hd .p_in_p .middle > p {
        margin-bottom: 25px;
    }

    #hd .proart .bottom_content > ul > li.change_link {
        width: 45%;
        margin-left: 42.5px;
    }

   /* #hd .top .right_side{
        top: 47%;
    }*/
    #hd .top .golden_horn{
    }

    #hd .hdr_tech .change_img img.active{
        margin-top: -75px;
    }

    #hd .input_output .icon_touch p {
        font-size: .8rem;
    }

    /*#hd .top .right_side p {
        line-height: 1.3;
        font-size: .85rem;
    }*/

    #hd .top .golden_horn h1{
        font-size: 1.85rem;
    }
    #hd p{
        line-height: 1.65;
        font-size: .95rem;
    }

    #hd h1 {
        margin-bottom: 15px;
    }    

    
}
@media screen and (max-width: 1023px){
    
    #hd .dis_1023_off{
        display: none;
    }

    #hd .mini_led .dis_1023_off.mini_chart{
        display: none;
    }
    #hd .mini_led .dis_1023_on.bbg{
        background-image: url(../img/miniled-m2t.png);
        background-size: cover;
        padding: 50px 0px;
        background-repeat: no-repeat;
        background-position: center bottom;
    }
    #hd .mini_led .dis_1023_on.bbg img{
        width: 60%;
    }



     #hd .hdr_tech .change_link img {
        width: 100px;
    }

    /*第一區*/
    #hd .top .right_side p {
        line-height: 1.65;
        font-size: .95rem;
    }

    #hd .top .right_side {
        position: relative;
        top: auto;
        left: auto;
        width: 90%;
        transform: translate(5%, 0%);
        padding: 50px 0;
    }
    #hd .top .left_side {/*RCD 20200404*/
        position: relative;
        top: auto;
        left: auto;
        width: 90%;
        transform: translate(5%, 0%);
        padding: 50px 0;
    }
    #hd .top .left_side h1{/*RCD 20200409*/
        text-align: center;
    }
    #hd .top .left_side > p{/*RCD 20200409*/
        text-align: center;
    }
    #hd .top_bbg {/*RCD 20200414*/
        transform: scale(1.5);
        transform-origin: right top;
        margin-bottom: 100px;
        min-height: auto !important;
    }
    #hd .top .golden_group {
        margin-left: 0;
        margin-right: 0;/*RCD 20200413*/
    }
    #hd .top .golden_horn {
        width: calc(33% - 80px);
        min-width: auto;
        /*margin-right: 40px;*/
        margin-left: 40px;
        transform: translateX( calc(50% - 50px) );
    }
    #hd .top .golden_group {
        margin-left: 0;
        display: flex;
        /*justify-content: space-around;*/
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #hd .top .top_log{/*RCD 20200413*/
        margin-right: 0px;
    }
    #hd .top .right_side p,
    #hd .top .top_log,
    #hd .top .right_side h1.glod_color{
        text-align: center;
    }

    #hd .top .golden_horn h1,
    #hd .top .golden_horn p{
        text-align: left;
    }

    #hd .dis_1023_on{
        display: block;
    }
    #hd .dis_1023_off{
        display: none;
    }
    #hd .change_img img.active{
        width: 100%;
    }
    #hd .hdr_tech .content > ul > li.change_link {
        display: inline-block;
        width: 20%;
    }
    #hd .ergonomic ul li{
        width: 45%;
    }
    #hd .ergonomic p {
        width: 90%;
    }
    #hd .video .center_space h1 {
        font-size: 2.2rem;
    }
    #hd .change_link:hover li, 
    #hd .change_link.active li,
    #hd .change_link:hover  li:nth-child(3),
    #hd .change_link.active  li:nth-child(3) {
        width: 13.5px;
        height: 16.5px;
    }
    #hd .change_link li {
        width: 12px;
        height: 13.5px;
    }

    
    /*第2區*/
    #hd .mini_led figure img {
        padding-right: 25px;
        width: 100px;
    }

    #hd .mini_led .right_side {
        position: relative;
        width: 100%;
        left: 0;
        padding: 50px 0;
        background-image: url(../img/miniled-m2t.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom center;
    }
    #hd .mini_led .right_side h1,
    #hd .mini_led .right_side figure{
        width: 90%;
        margin: 0 auto;
    }
    #hd .mini_led .right_side h1{
        text-align: center;
        margin-bottom: 25px;
    }
    #hd .mini_led .mini_chart {
        padding-left: 0;
        width: 35%;
    }
    #hd .mini_led{
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
    }
    
    #hd .mini_led .icon_m.dis_1023_on,
    #hd .mini_led .mini_chart{
        display: inline-block;
        vertical-align: middle;
        margin: 0 5%;
    }
    #hd .mini_led .mini_gif {
        top: auto;
        bottom: 25%;
        left: auto;
        right: 0%;
        width: 50%;
    }
    /*第4區*/
    #hd .center_space a{
        font-size: 1.15rem;
        padding: 15px;
    }
    /*第7區*/
    #hd .aurora .dis_1023_on{
        width: 90%;
        margin: 0 auto;
    }
    #hd .aurora .dis_1023_on .motif{
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
    }
    #hd .aurora .dis_1023_on .motif p:before{
        display: none;
    }

    #hd .aurora .dis_1023_on h1{
        text-align: center;
    }

    #hd .proart {
        padding: 50px 0;
    }

    #hd .input_output .icon_touch {
        width: 20%;
    }
    #hd .input_output .change_icon {
        width: 100%;
        margin-top: -100px;
    }
    #hd .input_output .change_icon li{
        width: 25%;
    }
    
    #hd .p_in_p{
        background-image: url(../img/picture-by-picture-bg.jpg);
        background-repeat: no-repeat;
        background-size: cover; 
    }
    #hd .p_in_p .section_bg{
        display: none;
    }
    #hd .p_in_p .content,
    #hd .p_in_p .change_img {
        position: relative;
    }
    #hd .p_in_p .middle {
        top: 55%;
    }
    #hd .p_in_p .change_link {
        width: 75%;
        margin: 0 0 15px 0;
    }

    
    #hd .aurora{
        padding : 75px 0;
    }
    #hd .air_balloon .left_side{
        top: 22.5%;
        width: 50%;
    }

    #hd .air_balloon .left_side{
        position: relative;
        transform: translate(0%, 0%);
        padding-top: 50px;
        width: 100%;
        left: 0%;
        background-image: url(../img/lifecolor-m2t.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom center;
    }
    #hd .air_balloon .left_side > p{
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }
    #hd .air_balloon .left_side h1{
        text-align: center;
    }
    #hd .air_balloon{
        display: flex;
        flex-direction: column-reverse;
    }

    #hd .ergonomic ul{
        background-image: url();
    }

    #hd .hdr_tech .change_img img.active{
        margin-top: -25px;
    }
    #hd .air_balloon .golden_group{
        bottom: auto;
        top: 21%;
        left: 72%;
        margin-bottom: 0;
    }
    #hd .proart .change_img .switch-nav {
        width: 120%;
        left: -10%;
        margin: 0 auto;
    }

    #hd .p_in_p,
    #hd .input_output {
        padding: 50px 0;
    }

}
@media screen and (max-width: 900px){
    #hd .top .golden_horn{
        width: calc(45% - 80px);
    } 
}

@media screen and (max-width: 768px){
    #hd .change_link:hover li, 
    #hd .change_link.active li,
    #hd .change_link li ,
    #hd .change_link li:nth-child(2), 
    #hd .change_link li:nth-child(3),
    #hd .change_link:hover  li:nth-child(3),
    #hd .change_link.active  li:nth-child(3){
        display: none;
    }
    
    #hd .hdr_tech .content > ul > li.change_link {
        width: 25%;
        margin: 0 10px;
    }
    
    /*第4區*/
    #hd .video video{
        width: auto;
        height: 675px;
    }
    #hd .video .center_space .hd-col50{
        width: 100%;
        text-align: left;
    }
    #hd .center_space .hd-col50:nth-child(2) {
        border-left: 0;
    }

    #hd .proart .bottom_content > ul > li.change_link{
        width: 45%;
        margin-left: 0;
        margin-bottom: 5px;
    }
    
    
    #hd .input_output .change_icon li:nth-child(2),
    #hd .input_output .change_icon li:nth-child(4) {
        bottom: 5%;
    }


    #hd .proart .top_content,
    #hd .p_in_p .content{
        width: 90%;
    }
    #hd .p_in_p .middle {
        position: relative;
        transform: translate(0%, 0%);
        left: 0;
        right: 0;
        width: 90%;
        margin: 0 auto;
    }
    #hd .p_in_p .change_img{
        width: 70%;
    }

    #hd .input_output .change_icon {
        margin-top: -50px;
    }

    #hd .p_in_p .change_link {
        width: 100%;
    }
    #hd .air_balloon .golden_group{
        top: 25%;
    }
    #hd .air_balloon .golden_group h1 {
        font-size: 1.15rem;
    }

    #hd .proart .change_link .new_fd{
        display: none;
    }

    #hd .input_output ul.reveal_bottom{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 620px){
    #hd .dis_620_on{
        display: block;
    }

    #hd .dis_620_off{
        display: none;
    }

    #hd .air_balloon .dis_620_on.section_bg{
        width: 125%;
        margin-left: -15%;
        max-width: none !important;
    }
    

    #hd .video .center_space h1 {
        font-size: 2rem;
    }
    #hd .center_space a {
        font-size: 1rem;
        padding: 10px 15px;
        box-sizing: content-box;
    }
    #hd .proart .bottom_content > ul > li.change_link{
        width: 100%;
    }
    #hd .golden_group.dis_620_on{
        display: block;
    }
    #hd .dis_620_off{
        display: none;
    }
    #hd .golden_group.dis_620_on{ /*RCD 20200414*/
        /*position: relative;
        left: 0;
        padding: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        */  
        margin-top: 240px;
        transform: scale(0.8);
    }
    #hd .golden_group.dis_620_on .golden_horn p {/*RCD 20200414*/
    line-height: 1em;
    }
    #hd .air_balloon .golden_group.dis_620_on .golden_horn {
        display: inline-block;
        width: 25%;
        min-width: auto;
    }
    #hd .air_balloon .golden_group.dis_620_on .golden_horn h1{
        text-align: left;
    }

     #hd .air_balloon .golden_group.dis_620_on .golden_horn {
        width: 50%;
        -moz-transform: translateX(50%);
        -webkit-transform: translateX(50%);
        -o-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
    #hd .proart .change_img .switch-nav{
        bottom: 25%;
    }

    #hd .top .golden_horn {
        width: calc(50% - 80px);
    }
    #hd .top .top_log img{
        margin: 15px 0;
    }

    #hd .top .golden_group {
        margin-bottom: 10px;
    }

    #hd .hdr_video .golden_horn {/*RCD 20200404*/
        width: 100%;
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 520px){
   #hd .pq ul li{
        width: 90%;
        margin: 0 auto;
   }
   #hd .ergonomic ul li {
        width: 100%;
    }
    #hd .ergonomic ul li figure{
        padding-bottom: 50%;
    }   
    #hd .input_output .icon_touch {
        width: 45.25%;
    }
    #hd .hdr_tech .content > ul > li.change_link {
        width: 100%;
        margin: 0 0 10px;
    }
    #hd .mini_led .icon_m.dis_1023_on, 
    #hd .mini_led .mini_chart {
        display: block;
        margin: 0 auto 25px;
    }
    #hd .mini_led .mini_chart{
        width: 65%;
    }

    
    #hd .mini_led .mini_gif {
        bottom: 23.5%;
    }
    #hd .mini_led .dis_1023_on.bbg img{
        width: 80%;
    }

    #hd .p_in_p,
    #hd .input_output {
        padding: 35px 0;
    }
}
@media screen and (max-width: 480px){
    #hd .center_space p {
        margin-bottom: 25px;
    }   
    
    #hd .top .motif{
        width: 100%;
        margin-left: 25%;
    }
    #hd .center_space a {
        font-size: .8rem;
        padding: 10px 10px;
    }
    #hd .video video {
        width: auto;
        height: 625px;
    }
    #hd .video .center_space h1 {
        font-size: 1.75rem;
    }

    #hd .top .golden_horn {
        width: 45%;
    }
    #hd .golden_group {
        flex-direction: column;
        align-items: center;
    }
    
    #hd .air_balloon .dis_620_on.section_bg{
        /*width: 138%;*//*RCD 20200414*/
        margin-left: -22%;
        margin-left: -32%;/*RCD 20200414*/
        max-width: none !important;
    }

}