@charset "utf-8";
/*----------------------------------------
  Yoursite Style
----------------------------------------*/

/* 大外框 */
.page_ADAM6700
{
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Noto Sans TC", 微軟正黑體, "Arial Narrow", Rubik, "Noto Sans TC", sans-serif;
}

.page_ADAM6700
{
    background-color: #535353;
    background-color: #e6e6e6;
        background-color: #efefef;
}

.page_ADAM6700 ul{
    margin-top: 0px;
    margin-bottom: 0px;
}

.page_ADAM6700 .mi-font-wb{
    font-weight: bold;
}

/* 手機換行 */

.page_ADAM6700 br.mobile
{
    display:none;
}

/* 圖片 */

.page_ADAM6700 .img img
{
    width:100%;
    border:0;
    margin:0;
    padding:0;
}

/* cont-color gray */
.page_ADAM6700 .font-gray{
    color: #5b5b5b!important;
}

/* clear both */

.page_ADAM6700 .clear
{
    clear:both;
}

#colorlight body{
    margin: 0;
    font-family: arial;

        font-family: 微軟正黑體, Microsoft JhengHei,Arial, "新細明體", sans-serif;
}

#colorlight li{
	text-decoration: none;
	list-style: none;
}

#colorlight html,#colorlight body,#colorlight div, #colorlight span, #colorlight applet, #colorlight object, #colorlight iframe, #colorlight h1, #colorlight h2, #colorlight h3, #colorlight h4, #colorlight h5, #colorlight h6, #colorlight p, #colorlight blockquote, #colorlight pre, #colorlight a, #colorlight abbr, #colorlight acronym, #colorlight address, #colorlight big, #colorlight cite, #colorlight code, #colorlight del, #colorlight dfn, #colorlight em, #colorlight img, #colorlight ins, #colorlight kbd, #colorlight q, #colorlight s, #colorlight samp, #colorlight small, #colorlight strike, #colorlight strong, #colorlight sub, #colorlight sup, #colorlight tt, #colorlight var, #colorlight b, #colorlight u, #colorlight i, #colorlight center, #colorlight dl, #colorlight dt, #colorlight dd, #colorlight ol, #colorlight ul, #colorlight li, #colorlight fieldset, #colorlight form, #colorlight label, #colorlight legend, #colorlight table, #colorlight caption, #colorlight tbody, #colorlight tfoot, #colorlight thead, #colorlight tr, #colorlight th, #colorlight td, #colorlight article, #colorlight aside, #colorlight canvas, #colorlight details, #colorlight embed, #colorlight figure, #colorlight figcaption, #colorlight footer, #colorlight header, #colorlight hgroup, #colorlight menu, #colorlight nav, #colorlight output, #colorlight ruby, #colorlight section, #colorlight summary, #colorlight time, #colorlight mark, #colorlight audio,#colorlight  video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    box-sizing: border-box;
    font-family: arial;
}

#colorlight p{
	margin: 0;
}

#colorlight a {
    text-decoration: none;
}

#colorlight .mi-bg-w{
	background-color: #fefefe;
}

#colorlight .mi-mb-3{
	margin-bottom: 3%;
}

#colorlight .mi-mt-3{
	margin-top: 3%;
}

#colorlight .mi-pb-3{
	padding-bottom: 3%;
}

#colorlight .mi-pb-5{
    padding-bottom: 5%;
}


/*----------------------------------------
  main CSS start
----------------------------------------*/

/*----------------------------------------
  mi-KV
----------------------------------------*/
#colorlight.mi-all{
	background-color: #fefefe;
        background-color: #f3f3f3;
        padding-bottom: 5%;

    margin: 0 auto;
}

#colorlight .mi-kv{
	background-image: url(css-img/ny-kv-bg.png);
    background-position: center;

        background-position: top;
    background-color: #0057b3;
    background-color: #6fb9c2;
    height: 500px;
    width: 100%;
    background-size: cover;

    /*background: -webkit-linear-gradient(right,#0b6b9a,#0087b6);
background: -o-linear-gradient(right,#0b6b9a,#0087b6);
background: -moz-linear-gradient(right,#0b6b9a,#0087b6);
background: linear-gradient(to right,#0b6b9a,#0087b6);*/

        background-repeat: no-repeat;
}

#colorlight .mi-kv-box{
	display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 2% 12% 0% 12%;
}

#colorlight .mi-kv-box-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0% 15% 0% 15%;

    padding-bottom: 5%;
        margin-top: 1%;
}

#colorlight .mi-kv-box-r-img{
        text-align: center;

            width: 80%;
    margin: auto;
}

#colorlight .mi-kv-box-btn-box{
        display: inline-block;
    width: 30%;
}

#colorlight .mi-kv-box-l{
    width: 55%;
        /*margin-bottom: 4%;*/
}

#colorlight .mi-kv-box-r{
	width: 45%;
    /*margin-top: 8%;*/
}

#colorlight .mi-kv-box-l .mi-kv-btn{
	width: 60%;
    margin-left: 18%;
    margin-top: 2%;
    padding: 3px 20px;
}

#colorlight .mi-dp-b{
    display: block;
}

@media screen and (max-width: 768px){

    #colorlight .mi-kv-box-btn-box{
            width: 55%;
    }

    #colorlight .mi-kv-box-r-img{
            width: 100%;
    }

	#colorlight .mi-kv{
		background-image: url(css-img/ny-kv-bg.png);
	    background-position: center;

        background-position: top;
	}

	#colorlight .mi-kv-box{
	    display: block;
	    padding: 5% 6% 5% 6%;
	    background-position: center;
	    /*padding-top: 25%;*/
	}

	#colorlight .mi-kv-box-l{
	    width: 100%;
	    /*margin-bottom: 5%;*/
            text-align: center;
	}

	#colorlight .mi-kv-box-r{
		width: 100%;
	}


}


/*----------------------------------------
  mi-select
----------------------------------------*/
#colorlight .mi-sel{
        background-image: url(css-img/ny-kv-bg.png);
	background-color: #0057b3;
}

#colorlight .mi-sel-box{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    padding-bottom: 2%;

    max-width: 1140px;
    margin: auto;
}

#colorlight .m-sel-btn{
	flex: 0 0 33%;
	display: flex;
	justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    color: white;
    /*background-color: #1b4c9e;*/
    padding: 1%;
	box-sizing: border-box;
    transition: all 0.2s;
    /*border: 1px solid #0a4b67;*/

/*
background: rgb(0,79,191); /* Old browsers 
background: -moz-linear-gradient(top,  rgba(0,79,191,1) 0%, rgba(0,55,148,1) 
background: -webkit-linear-gradient(top,  rgba(0,79,191,1) 0%,rgba(0,55,148,1) 100%); 
background: linear-gradient(to bottom,  rgba(0,79,191,1) 0%,rgba(0,55,148,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004fbf', endColorstr='#003794',GradientType=0 ); 
*/
        line-height: 2rem;

            /*border-radius: 10px;*/
}

#colorlight .m-sel-btn-line{
        border-right: 1px solid #569ce6;
    border-left: 1px solid #569ce6;
}

#colorlight .m-sel-btn:hover{
    background-color: #3279ad;
    background-color: #004b9a;
    border: none;

/*
background: rgb(0,62,170); 
background: -moz-linear-gradient(top,  rgba(0,62,170,1) 0%, rgba(0,42,127,1) 100%);
background: -webkit-linear-gradient(top,  rgba(0,62,170,1) 0%,rgba(0,42,127,1) 100%); 
background: linear-gradient(to bottom,  rgba(0,62,170,1) 0%,rgba(0,42,127,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003eaa', endColorstr='#002a7f',GradientType=0 );
*/
}



@media screen and (max-width: 768px){

    #colorlight .mi-sel-box{
            padding-right: 6%;
    padding-left: 6%;
    }

	#colorlight .m-sel-btn {
	    flex: 0 0 33.333333%;
	    font-size: 0.9rem;
	}
}

/*----------------------------------------
  mi-all-box
----------------------------------------*/
#colorlight .mi-box{
	/*background-color: #fefefe;*/
}

#colorlight .mi-box-lg{
        /*background-color: #f6f6f6;*/
        /*padding-bottom: 5%;*/
}

#colorlight .mi-box-md{
    /*padding-bottom: 1%;*/
}

#colorlight .mi-box-mg{
	background-color: #efefef;

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3d3d3d+0,1c1c1c+100 */
background: rgb(61,61,61); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(61,61,61,1) 0%, rgba(28,28,28,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(61,61,61,1) 0%,rgba(28,28,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(61,61,61,1) 0%,rgba(28,28,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#1c1c1c',GradientType=0 ); /* IE6-9 */

}

#colorlight .mi-box-lb{
        background-color: #f4faff;
            background-color: #f9f9f9;
        padding-bottom: 2%;

        
 /*background: rgb(11,59,107); 
background: -moz-linear-gradient(left,  rgba(11,59,107,1) 0%, rgba(18,98,168,1) 100%);
background: -webkit-linear-gradient(left,  rgba(11,59,107,1) 0%,rgba(18,98,168,1) 100%); 
background: linear-gradient(to right,  rgba(11,59,107,1) 0%,rgba(18,98,168,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b3b6b', endColorstr='#1262a8',GradientType=1 ); */

}

#colorlight .mi-box-bg-rain{
    /*background-image: url(css-img/bg-Major-Products.jpg);*/
    background-position: center;
}

#colorlight .mi-box-bg-call{
    background-image: url(css-img/bg-call.jpg);
    background-position: center;
}

#colorlight .mi-box-bg-Circuit{
    /*background-image: url(css-img/bg-Circuit.png);
    	background-image: url(css-img/bg-event.png);*/
    background-repeat:repeat;

            /*background-color: #980018;
            background-color: #0057b3;
            background-color: #f1f1f1;

            background-image: url(css-img/ny-all-bgd.png);*/

    background-position: center;

        /*padding-bottom: 5%;*/

}

#colorlight .mi-box-bg-gray{

}

#colorlight .mi-box-bg-Circuit-dcr{
        background-image: url(css-img/ny-all-bgd.png);
    background-position: center;
}
/*#colorlight .mi-bg-dcr{
        background-image: url(images/ny-all-bgd.png);
    background-position: center;
}*/

#colorlight .mi-box-bg-Circuit-bg{
    background-color: #980018;
    background-color: #0057b3;
}

#colorlight .mi-box-bg-Field{
	/*background-image: url(css-img/bg-Field.png);*/
    background-position: center;
    	    background-color: #f1f1f1;
}

#colorlight .mi-box-bg-case{
	background-image: url(css-img/bg-case.png);
    background-position: center;

        background-color: #00216e;
            background-color: #ffffff;
}

#colorlight .mi-box-bg-event{
    /*background-image: url(css-img/bg-event.png);*/
    background-repeat:repeat;

    background-color: #222222;
}

#colorlight .mi-box-bg-pd{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#010b1f+0,1a3d8e+100 */
background: rgb(1,11,31); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(1,11,31,1) 0%, rgba(26,61,142,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(1,11,31,1) 0%,rgba(26,61,142,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(1,11,31,1) 0%,rgba(26,61,142,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010b1f', endColorstr='#1a3d8e',GradientType=1 ); /* IE6-9 */

}

#colorlight .mi-box-wall{
    max-width: 1140px;
    padding: 2%;
    /*padding-bottom: 5%;*/
    margin: auto;

    /*background-color: #005ab9;
        background-color: #f3f3f3;*/
    border-radius: 10px;

    padding-bottom: 5%;
    padding-top: 5%;

    padding-bottom: 2%;
    padding-top: 2%;
             /*box-shadow: 3px 3px 5px 6px #2b83e0;*/
}

#colorlight .mi-box-wall-nop{
    padding-top: 0;
}

#colorlight .mi-box-wall-tit{
	font-size: 2.5rem;
        color: #151515;
        color: #1b4c9e;
    text-align: center;
    line-height: 2.5rem;
    font-weight: bold;
    margin-bottom: 1.5%;
        letter-spacing: -1px;
}

#colorlight .mi-box-wall-tit-w{
	color: #fefefe;
}

	#colorlight .mi-box-wall-tit-se{
		    font-size: 0.9rem;
		    color: #1b4c9e;
    	line-height: 1rem;
    	text-align: center;
    	margin-bottom: 1rem;
    	    letter-spacing: 0.2rem;
	}

	#colorlight .mi-box-wall-tit-se-w{
		color: #fefefe;
	}	

#colorlight .mi-box-wall-line{
    margin: auto;
    width: 70%;
        margin-bottom: 1rem;
}

#colorlight .mi-box-wall-tit-left{
	    text-align: left;
	        margin-bottom: 2rem;
	        color: #fefefe;
}

#colorlight .mi-box-wall-tit-second{
	font-size: 1.8rem;
    color: #151515;
    color: #fefefe;
    text-align: left;
    line-height: 2rem;
    font-weight: bold;
    margin-bottom: 3%;
        border-bottom: 1px solid #c3c3c3;
    padding-bottom: 2%;
}

#colorlight .mi-box-wall-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
        /*justify-content: flex-start;*/
}

#colorlight .mi-box-wall-btn{
        width: 60%;
    margin: auto;
}

#colorlight .mi-box-wall-flex-jc-fs{
    justify-content: flex-start;
}

@media screen and (max-width: 768px) {

    #colorlight .mi-box-wall-btn{
            margin-bottom: 10%;
            width: 100%;
    }

	#colorlight .mi-box{
	    /*background-color: #fefefe;
    	width: 85%;*/
    	margin: auto;

    	    padding: 0% 6%;
	}

	#colorlight .mi-box-wall{
		width: 100%;
            padding: 3%;
            padding-top: 8%;
	}

	#colorlight .mi-box-wall-tit{
		    font-size: 2rem;
    	line-height: 2.5rem;
    	/*margin-bottom: 1.5rem;*/
    	    margin-top: 1.5rem;
	}

	#colorlight .mi-box-wall-tit-second{
		    font-size: 1.5rem;
	}

	#colorlight .mi-box-wall-tit-left{
        margin-top: 2rem;
	}

	#colorlight .mi-box-bg-Circuit{
		    /*padding-bottom: 10%;*/
	}

	#colorlight .mi-box-bg-rain{
		padding-bottom: 10%;
	}

}

/*----------------------------------------
  mi-聯繫資料
----------------------------------------*/
#colorlight .mi-call-info{
    text-align: center;
}

#colorlight .mi-call-info a{
    font-size: 1.1rem;
    color: #505050;
        color: #e2e2e2;

    /*border: 1px solid;*/
    border-radius: 10px;
    padding: 5px 20px;
    line-height: 2;

    /*background-color: #1d1d1d;*/
}

#colorlight .mi-call-info-sp{
	margin-right: 2%;
}

#colorlight .mi-call-info-one{
    margin-top: 1rem;
        margin-bottom: 2%;
}


#colorlight .mi-call-info-two{
	margin-bottom: 1rem;
}

#colorlight .mi-call-btn{
    width: 30%;
    margin: auto;
}

/*----------------------------------------
  mi-選擇功能
----------------------------------------*/
#colorlight .mi-pick{
	background-color: #f3f3f3;
		background-color: #0e275f;
	    background: hsla(221,0%,100%,0.9);
    padding: 2%;
    padding-bottom: 0%;
    margin-bottom: 2rem;
        border-radius: 10px;

        background-color: #0e2558;
    border: 1px solid #0f4dad;
}

#colorlight .mi-pick-l{
	width: 50%;
}

#colorlight .mi-pick-r{
	width: 50%;
}

#colorlight .mi-pick-l-box{
	    margin-bottom: 2rem;
}

#colorlight .mi-pick-l-box-tit{
    font-size: 1.5rem;
        line-height: 1.5rem;
            font-weight: bold;
                display: inline-block;
                color: #fefefe;
}


#colorlight .mi-pick-l-box-item{
    border: 1px solid #949494;
    padding: 1%;
    font-size: 1rem;
    margin-right: 0.5rem;
    display: inline-block;
        color: #505050;
            cursor: pointer;
                margin-bottom: 0.6rem;
                    background-color: #fefefe;
                        border-radius: 8px;
}

@media screen and (max-width: 768px) {

	#colorlight .mi-pick{
		    padding: 7%;
    padding-bottom: 0;
	}

	#colorlight .mi-pick-l{
		width: 100%;
	}

	#colorlight .mi-pick-r{
		width: 100%;
	}

	#colorlight .mi-pick-l-box-tit{
	    font-size: 1.3rem;
    	line-height: 2.2rem;
    	width: 100%;
	}

	#colorlight .mi-call-btn{
		    width: 85%;
	}

	#colorlight .mi-call-info-sp{
		margin-right: 0%;
	}
}


/*----------------------------------------
  mi-盒子系列
----------------------------------------*/
#colorlight .mi-box-1{
    display: flex;
    flex-wrap: wrap;
    /*justify-content: center;*/
}

#colorlight .mi-box-pd{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}


#colorlight .mi-box-1-down{
	width: 30%;
	    margin-top: 1%;
}

#colorlight .mi-box-pd-down{
	width: 20%;
	margin-right: 1%;
}

#colorlight .mi-box-1-style{
	margin-bottom: 3rem;
        margin-top: 2%;
}

#colorlight .mi-box-1-sp{
	margin-top: 1rem;
    margin-bottom: 2rem;
}

#colorlight .mi-box-1-pb{
    padding-bottom: 3rem;
}

#colorlight .mi-box-1-5{
    /*background-color: #eaeaea;*/
    border-radius: 10px;
    /*padding: 20px;*/
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-bottom: 5%;
    width: 35%;
        margin: auto;
}

#colorlight .mi-box-zero-10{
    width: 10%;
    margin: auto;
}

#colorlight .mi-box-2{
    /*background-color: #eaeaea;
    border-radius: 10px;*/
    /*padding: 20px;*/
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    /*margin-bottom: 5%;*/
    width: 47%;
        /*margin: auto;*/
}

#colorlight .mi-box-2-w{
    background-color: #fefefe;
    width: 50%;
        padding: 2%;
}

#colorlight .mi-event-ul{
        text-align: left;
    color: #666;
    line-height: 1.8rem;
}

#colorlight .mi-event-ul-s{
    font-size: 1.2rem;
}

#colorlight .mi-event-red{
    color: #ff293f;
}

#colorlight .mi-box-btn{
    border-radius: 10px;
    /* padding: 20px; */
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-bottom: 2%;
    margin-top: 2%;
    width: 45%;
}

#colorlight .mi-photo-2{
    width: 50%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

#colorlight .mi-photo-3{
    width: 30%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

#colorlight .mi-photo-7{
    width: 70%;
    margin: auto;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

#colorlight .mi-box-3{
    border-radius: 10px;
    /*padding: 20px;*/
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-bottom: 1%;
    width: 32%;
        /*margin: auto;*/

            -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
    box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
}

#colorlight .mi-box-3-first{
        /*margin-left: 3.5%;*/
}

#colorlight .mi-box-4{
    border-radius: 10px;
    /*padding: 20px;*/
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    /*margin-bottom: 5%;*/
    width: 24%;
        /*margin: auto;*/

    padding-right: 0;
    /*padding-left: 35px;*/
    padding-top: 0px;


}

#colorlight .mi-box-3-gift{
       padding: 8px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 30%;
    margin: auto;
}

#colorlight .mi-box-1{
    /*background-color: #eaeaea;*/
    border-radius: 10px;
    /*padding-top: 20px;*/
    font-size: 1rem;
    /*text-align: center;*/
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    /*margin-bottom: 5%;*/
    width: 100%;
        margin: auto;
            /*margin-left: 3.5%;*/
}

#colorlight .mi-pick-info{
    background-image: url(css-img/ny-pick-ps.png);
    background-position: center;
    background-position: top;
    background-repeat: no-repeat;

    height: 500px;
    width: 100%;
}

#colorlight .mi-pick-info-left{
    width: 35%;
}

#colorlight .mi-pick-info-right{
    width: 62%;
        margin-left: 3%;
            text-align: left;
            color: #666;

                background-color: #fefefe;
    padding: 2%;
    border-radius: 15px;
}

#colorlight .mi-pick-tit-icon{
    margin-right: 2%;
}

#colorlight .mi-pick-tit-icon-two{
        margin-right: 0.5%;
    display: block;
    width: 15px;
    margin-top: 0.7%;
}


#colorlight .mi-pick-tit-two{
    font-size: 1.5rem;
    margin-bottom: 2%;
    font-weight: bold;
    color: #666;
    color: #164e7b;

    padding-bottom: 2%;
    border-bottom: 1px solid #ccc;
}

#colorlight .mi-act{
    background-color: #58bbc0;
        background-color: #43d3da;
    padding: 2% 20%;
    color: #fefefe;
    text-align: center;
    width: 100%;
        font-size: 1.2rem;
            font-weight: bold;

                -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
    box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);

        border-radius: 15px;
            transition: 0.3s all;
}

#colorlight .mi-act:hover{
    background-color: #45a8ad;
}

#colorlight .mi-pick-tit{
    font-size: 2rem;
    margin-bottom: 2%;
    font-weight: bold;
    color: #666;
        color: #164e7b;
}

#colorlight .mi-pick-con{
    line-height: 1.5rem;
    font-size: 0.9rem;
}

#colorlight .mi-pick-con-img-sp{
        width: 1.3%;
}

#colorlight .mi-pick-con-img{
        width: 2%;
}

#colorlight .mi-pick-con-img-two{
        width: 80%;
}

#colorlight .mi-pick-con-big{
        line-height: 1.5rem;
    font-weight: bold;
    font-size: 0.9rem;
}

#colorlight .mi-box-s-tit{
        font-size: 1.5rem;
    color: #fee4a4;

        width: 100%;
    margin-bottom: 2%; 
}

#colorlight .mi-gift-tit{
        margin-bottom: 5%;
}

#colorlight .mi-gift-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: flex-start;
}

#colorlight .mi-img-tbox{
    background-color: #fefefe;
    padding: 5%;
    color: #666;
    line-height: 25px;
        width: 100%;

        -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
    box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);

    border-radius: 0 0 15px 15px;
}




#colorlight .mi-img-pdimg{
    width: 30%;
}

#colorlight .mi-img-pdimg-two{
    width: 20%;
}

#colorlight .mi-img-pdbox{
    width: 70%;
    background-color: #fefefe;
    padding: 2%;
    color: #666;
    line-height: 25px;
    text-align: left;
    padding-left: 5%;

        border-radius: 0 15px 15px 0;
}

#colorlight .mi-img-pdbox-two{
    width: 80%;
}

#colorlight .mi-gift-box-gift{
    border-radius: 10px;
    /*padding: 20px;*/
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-bottom: 5%;
    width: 30%;
    margin: auto;
        margin-bottom: 5%;
}

#colorlight .mi-pd-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: flex-start;
}

#colorlight .mi-pd-box-pd{
    border-radius: 10px;
    /*padding: 20px;*/
    font-size: 1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-bottom: 5%;
    width: 20%;
        margin-bottom: 5%;
}

#colorlight .mi-gift-box-gift-font{
        margin: auto;

        background-color: #fefefe;

           border-radius: 0 0 25px 25px;
    padding: 10%;
    color: #0057b3;
    text-align: left;
    /*border:5px solid #3fb7e6;*/

        width: 100%;
}

#colorlight .mi-gift-box-gift-coin{
        font-size: 1.5rem;
    font-weight: bold;
}

#colorlight .mi-gift-box-gift-info{
   margin-bottom: 2%;
    font-size: 0.9rem;
}

#colorlight .mi-gift-btn{

}

#colorlight .mi-gift-box-gift-font-right{
        margin: auto;

        background-color: #fefefe;
    border-radius: 15px;
    padding: 8%;
    color: #0057b3;
    text-align: left;
    /*border: 2px solid #3fb7e6;*/
}

#colorlight .mi-gift-box-gift-coin-right{
        font-size: 1.5rem;
    font-weight: bold;
}

#colorlight .mi-gift-box-gift-info-right{
   margin-bottom: 2%;
    font-size: 0.3rem;
}

#colorlight .mi-gift-box-gift-img{
            margin: auto;
        margin-bottom: 7%;
}

#colorlight .mi-pd-box-pd-font{
        color: #fee4a4;
            margin: auto;
}

#colorlight .mi-pd-box-pd-font-info{

}



#colorlight .mi-pd-box-pd-coin{
        font-size: 1.5rem;
}

#colorlight .mi-pd-box-pd-img{
        margin-bottom: 7%;
}
    

#colorlight .mi-box-3-base{
    color: #fefefe;
    margin-bottom: 4%;
    padding-top: 3%;
}

#colorlight .mi-box-3-c01{
    background-color: #37c9de;
}
#colorlight .mi-box-3-c02{
    background-color: #40a0d2;
}
#colorlight .mi-box-3-c03{
    background-color: #1c7bc5;
}
#colorlight .mi-box-3-c04{
    background-color: #feae09;
}
#colorlight .mi-box-3-c05{
    background-color: #de3737;
}
#colorlight .mi-box-3-c06{
    background-color: #fe7509;
}

#colorlight .mi-box-3-pd{
        /*background-color: #f3f3f3;*/
            background-color: #0e2558;
            	    background-color: #0e275f;
    border-radius: 10px;
    padding: 20px;
    font-size: 1rem;
    /*text-align: center;*/
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    margin-bottom: 5%;
    width: 32%;

        border: 1px solid #a7a7a7;
            border: 1px solid #0f4dad;

                margin: 2% 0.6%;
}

#colorlight .mi-box-3-pd-for-left{
    /*margin-right: 2%;*/
}

#colorlight .mi-fin-pd-right{
    margin: initial;
    align-content: flex-start;
}

#colorlight .mi-box-3-gift-fin{
    margin: inherit;
    margin-left: 0%;
    }

/*----------------------------------------
  mi-影片系列
----------------------------------------*/

#colorlight .mi-video-l{

    background-image: url(css-img/mi-video-bg.png);
    background-position: center;

	width: 60%;
		width: 100%;
    padding: 5%;
}

#colorlight .mi-video-r{
    width: 40%;
        width: 100%;
   			 padding-bottom: 3%;
    padding-left: 3%;
    /*padding-top: 5%;*/
	/*background-color: #dedede;*/

	background-color: #ffffff;
    margin-top: 2%;
    /*margin-bottom: 2%;*/

        background: hsla(221,0%,100%,0.9);
}

#colorlight .mi-video-r-tit{
	font-size: 3rem;
    color: #6d6d6d;
    color: #828282;
    	color: #2f2f2f;
    margin-top: 2%;
    font-weight: bold;
    /*margin-bottom: 0.5rem;*/
}

#colorlight .mi-video-r-tit-s{
	    font-size: 1.5rem;
    /*letter-spacing: 0.2rem;*/
    margin-bottom: 1%;
        color: #828282;
       	 color: #6d6d6d;
                /*color: #a9a9a9;*/
                    
            border-bottom: 1px solid #dedede;
    padding-bottom: 1%;

    width: 95%;
}

#colorlight .mi-video-r-de{
    margin-bottom: 2%;
        color: #505050;
            text-align: left;
                margin-top: 1.5rem;
}

#colorlight .mi-video-r-de-item{
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

#colorlight .mi-video-r-price{
    font-size: 2rem;
    margin-bottom: 2%;
}

#colorlight .mi-video-btn{
    width: 50%;
}

#colorlight .mi-video-btn-w{
	width: 25%;
}

#colorlight .mi-box-icon{
	margin-bottom: 5%;
	    margin: auto;
	        padding-bottom: 4%;
}

#colorlight .mi-box-icon-tit{
    font-size: 1.5rem;
        margin-bottom: 0.5rem;
            font-weight: bold;

            /*color: #fefefe;*/
}

#colorlight .mi-box-icon-item{
	/*color: #dcdcdc;*/
	    color: #565656;
}

#colorlight .mi-box-icon-tit-smb{
    margin-bottom: 14%;
}

#colorlight .mi-box-icon-tit-smb-02{
	margin-bottom: 7%;
}

#colorlight .mi-main-color{
    color:#45a8ad;
}

@media screen and (max-width: 768px) {

    #colorlight .mi-img-tbox-two{

    }

    #colorlight .mi-img-pdimg{
        width: 100%;
    }

    #colorlight .mi-img-pdbox{
            width: 100%;
             padding-left: 0px;
                padding: 5%;  

    }

    #colorlight .mi-box-3-first{
            margin-left: 0%;
    }

    #colorlight .mi-box-1{
        margin-left: 0px;
    }

    #colorlight .mi-event-ul{
            
    }

    #colorlight .mi-pick-tit-icon-two{
        width: 12px;
    margin-top: 2%;
    }

    #colorlight .mi-pick-tit{
            font-size: 1.6rem;
            margin-bottom: 5%;
    }

    #colorlight .mi-pick-tit-long{
        font-size: 1.6rem;
    }

    #colorlight .mi-img-tbox{
            font-size: 0.8rem;
                line-height: 20px;
                    min-height: 85px;
    }

    #colorlight .mi-box-4{
        width: 50%;
            padding: 10px;
    }

    #colorlight .mi-pick-info-left{
         width: 100%;
         margin-bottom: 5%;
    }

    #colorlight .mi-pick-info-right{
        width: 100%;
            margin-left: 0;
    padding: 5%;
    }

    #colorlight .mi-gift-box-gift-coin-right{
        font-size: 1.4rem;
    }

    #colorlight .mi-gift-box-gift-coin{
            font-size: 2rem;
    }

    #colorlight .mi-gift-box-gift-info{
            font-size: 1.5rem;
    }

    #colorlight .mi-gift-box-gift-info-right{
            font-size: 1.2rem;
    }

    #colorlight .mi-gift-box-gift-font-right{
            padding: 13%;
    }

    #colorlight .mi-box-3-gift-fin{
        margin: auto;
            margin-left: 0%;
    }

    #colorlight .mi-box-3-gift {
            width: 50%;
    }

    #colorlight .mi-gift-box-gift-font{
            width: 100%;
    padding: 5%;
    }

     #colorlight .mi-add-tit-mb {
            margin-bottom: 5%;
        }

    #colorlight .mi-pick-info{
    background-image: url(css-img/ny-pick-ps-mb.png);
    background-position: center;
    background-position: top;
    background-repeat: no-repeat;

    height: 1100px;
    width: 100%;
    }

    #colorlight .mi-box-1-5{
        width: 100%;
    }

    #colorlight .mi-box-zero-10{
        display: none;
    }

    #colorlight .mi-pd-box{
        margin-bottom: 8%;
    }

    #colorlight .mi-pd-box-pd-font{    
        padding: 1%;
    }

    #colorlight .mi-box-s-tit{
            margin-bottom: 8%;
    font-size: 1.2rem;
    }

    #colorlight .mi-gift-box-gift{
            width: 45%;
    }

    #colorlight .mi-pd-box-pd{
            width: 50%;
    }

	#colorlight .mi-video-r-tit{
	    margin-top: 1rem;
	        font-size: 2.5rem;
	}

    #colorlight .mi-box-3-base{
            padding-top: 10%;
                margin-bottom: 8%;
    }

	#colorlight .mi-video-l{
		width: 100%;
		    margin-bottom: 5%;
	}

	#colorlight .mi-video-r{
		width: 100%;
	    text-align: center;
	         padding-top: 0%;
	             padding-left: 0%;
	             padding-bottom: 2rem;
	
     width: 100%;
    margin: auto;
    padding-right: 5%;
    padding-left: 5%;
	}

	#colorlight .mi-video-r-tit-s{
		    margin-bottom: 6%;
	}


	#colorlight .mi-box-1-style{
	    margin-bottom: 3rem;
    	margin-top: 1rem;
	}

	#colorlight .mi-video-v{
		height: 200px;
	}

    #colorlight .mi-box-2{
        width: 100%;
            padding: 0px;
            margin-bottom: 10%;
                padding: 5%;
    }

    #colorlight .mi-box-2-nop{
        padding: 0%;
    }

    #colorlight .mi-box-btn{
        width: 100%;
            padding: 0px;
            margin-bottom: 5%;
    }

	#colorlight .mi-box-3{
	    width: 100%;
         padding: 0;
             margin-bottom: 5%;
	}

	#colorlight .mi-video-btn-w{
		    width: 90%;
	    margin: auto;
	}

	#colorlight .mi-box-1-down{
		width: 90%;
	}

	#colorlight .mi-video-r-price{
		margin-bottom: 5%;
		    font-size: 1.5rem;
	}

	#colorlight .mi-box-pd-down{
		width: 100%;
		margin-right: 0;
	}

	#colorlight .mi-box-3-pd-for-left{
		    margin-right: 0%;
	}

	#colorlight .mi-video-r-de{
		    margin-bottom: 5%;
		        margin-left: 23%;
	}
}

@media screen and (max-width: 450px) {

    #colorlight .mi-pick-info{
    background-image: url(css-img/ny-pick-ps-mb-s.png);
    background-position: center;
    background-position: top;
    background-repeat: no-repeat;

    height: 760px;
    width: 100%;
    }
}

/*----------------------------------------
  mi-產品系列
----------------------------------------*/
#colorlight .mi-pd{
	    margin: auto;
}

#colorlight .mi-pd-tit{
        font-size: 2rem;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

#colorlight .mi-pd-tit-num{
	    font-size: 1.1rem;
    letter-spacing: 0.1rem;
        margin-bottom: 1rem;
            color: #828282;
                
                color: #b7b7b7;
}

#colorlight .mi-pd-item{
	    margin-top: 1rem;
	margin-bottom: 1rem;
	    color: #505050;
	    	    color: #ffffff;
	    	        color: #dcdcdc;
	        /*background-color: #f9f9f9;*/
    line-height: 1.3rem;
    padding: 2% 0%;
        font-size: 0.9rem;
}

#colorlight .mi-pd-price{
    margin-bottom: 1.5rem;
    font-size: 1.3rem;

       border-top: 1px solid #0f4dad;
            padding-top: 3%;

                color:#b7b7b7;
                    color: #ffffff;
}

#colorlight .mi-speech-tit{
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 2%;
}

#colorlight .mi-event-tit{
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 1%;
        width: 100%;
        margin-bottom: 1%;
}

#colorlight .mi-event-info{
    font-size: 1rem;
    color: #666;
}

#colorlight .mi-speech-tit-plus{
        margin-top: 4%;
    width: 100%;
}

#colorlight .mi-speech-tit-s{
    font-size: 1rem;
    margin-left: 1%;
}

#colorlight .mi-speech-tit-s-two{
    font-size: 1rem;
}

#colorlight .mi-speech-peo{
    background-color: #222148;
}

#colorlight .mi-speech-peo-two{
    background-color: #eaeaea;
}

#colorlight .mi-speech-one{
    /*background-color: #dedede;
        background-color: #f3f3f3;*/
        background-color: #fefefe;
        background-color: #dedede;
    text-align: center;
    /*padding: 0% 4%;*/
    /*padding-top: 3%;
    padding-left: 3%;*/
    text-align: left;
    width: 100%;
        color: #4e4e4e;
            display: inherit;
                padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 3%;
}

    #colorlight .mi-sp-one-fc{
        /*background-color: #ffc402;
            background-color: #004280;*/
        color: #fefefe;

            color: #383838;
    font-weight: bold;

    /*border-radius: 15px 0 0 0;*/
    }

#colorlight .mi-speech-one-title{
    font-size: 1.2rem;
    text-align: left;
    font-weight: bold;
}

#colorlight .mi-speech-one-info{
    font-size: 1.2rem;
    text-align: left;
    font-weight: bold;
}

#colorlight .mi-sp-one-info-bl{
    color: #154d7b;
}

#colorlight .mi-sp-one-info-gr{
        color: #5d5d5d;
}


#colorlight .mi-speech-two{
    background-color: #dedede;
            background-color: #e6e6e6;
    text-align: center;
    /*padding: 0% 4%;*/
    padding-top: 2%;
    padding-bottom: 2%;

    width: 50%;
    padding-left: 3%;
color: #383838;
        color: #4e4e4e;
}

    #colorlight .mi-sp-two-fc{
        /*background-color: #ffac02;
        
            background-color: #1964ab;*/

            color: #fefefe;
            color: #4e4e4e;

            border-radius: 0 15px 0 0;
    }

#colorlight .mi-speech-two-two{
    padding-top: 2%;
    padding-bottom: 1%;
    padding-left: 3%;
}

#colorlight .mi-speech-two-info{
        font-size: 1.2rem;
            text-align: left;

                font-weight: bold;
}


#colorlight .mi-sop-new{
    border-radius: 50px;
    margin-left: 5%;
    width: 60%;
}

#colorlight .mi-sop-new-con{
    font-size: 2rem;
    padding: 6%;
        -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
    box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
}



#colorlight .mi-sp-one-g{
    /*background-color: #dedede;*/
    border-right: 1px solid #fefefe;
        /*background-color: #f2f9ff;*/
        background-color: #ffffff;
    color: #154d7b;
        transition: 0.3s all;
}

#colorlight .mi-sp-two-g{
    background-color: #d4d4d4;
    border-right: 1px solid #fefefe;
        color: #808080;
    font-weight: normal;
        background-color: #e1f1ff;
            background-color: #f3f3f3;
    color: #777777;
    color: #5d5d5d;
        transition: 0.3s all;
}

#colorlight .mi-sp-box{
        width: 100%;
}

#colorlight .mi-sp-pho{
        width: 50%;
            margin-bottom: 5%;
}

#colorlight .mi-sp-men{
        font-size: 2rem;
    margin-bottom: 2%;
    font-weight: bold;
    color: #636363;
}

#colorlight .mi-tra{
    width: 0;
height: 0;
border-style: solid;
border-width: 10px 15px 0 15px;
border-color: #164e7b transparent transparent transparent;

    display: block;
    margin-top: 85px;

    margin: auto;
}

    #colorlight .mi-tra-box{
        margin: auto;
        width: 90%;

        padding: 1%;
    }

@media screen and (max-width: 768px) {

    #colorlight .mi-sp-one-fc{
        border-radius: 15px 15px 0 0;
    }

    #colorlight .mi-sp-two-fc {
        border-radius: 0 0 0 0 ;
    }

    #colorlight .mi-tra-box{
            margin: auto;
    }

    #colorlight .mi-tra{
            width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 15px 0 15px;
    border-color:  #5ea6df transparent transparent transparent;
    margin-top: 10px;
        margin-bottom: 10px;
    }

    #colorlight .mi-sp-men{
        font-size: 1.5rem;
    }

    #colorlight .mi-sp-box{
        width: 90%;
    }

    #colorlight .mi-sp-box-out{
            width: 50%;
                margin-bottom: 0%;
    }

    #colorlight .mi-event-tit{
            margin-bottom: 5%;
            line-height: 2rem;
    }

    #colorlight .mi-speech-tit{
            font-size: 1.1rem;
                margin-bottom: 5%;
    }

    #colorlight .mi-speech-one{
            padding-top: 5%;
    padding-bottom: 5%;
        width: 100%;
            padding-left: 5%;
    padding-right: 5%;
    }



    #colorlight .mi-speech-two{
            padding-bottom: 5%;
    padding-top: 5%;
        width: 100%;
    }



       #colorlight .mi-mt5-mb{
        margin-top: 5%;
       } 

      #colorlight .mi-box-2-nmp{
        margin-bottom: 0%;
      }  

	#colorlight .mi-box-3-pd{
	    width: 100%;
	}
}

/*----------------------------------------
  mi-專人服務
----------------------------------------*/
#colorlight .mi-connect{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3d3d3d+0,1c1c1c+100 */
background: rgb(61,61,61); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(61,61,61,1) 0%, rgba(28,28,28,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(61,61,61,1) 0%,rgba(28,28,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(61,61,61,1) 0%,rgba(28,28,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#1c1c1c',GradientType=0 ); /* IE6-9 */

}

/*----------------------------------------
  mi-場域應用
----------------------------------------*/
#colorlight .mi-field-info{
	width: 100%;
}

#colorlight .mi-field-info-w{
	font-size: 1.5rem;
}

/*----------------------------------------
  mi-應用案例
----------------------------------------*/
#colorlight .mi-case-l{

    /*background-image: url(css-img/universe.jpg);*/
    background-position: center;

	width: 50%;
			    background-color: #fefefe;
		        padding: 2%;
    /*padding: 2%;*/
}

#colorlight .mi-case-r{
	width: 50%;
	    background-color: #fefefe;
    padding: 0% 2%;
}

#colorlight .mi-case-r-tit{
	font-size: 1.7rem;
	    margin-bottom: 1rem;
    margin-top: 1rem;
}

#colorlight .mi-case-r-tit-s{
	    font-size: 1.1rem;
    margin-bottom: 2%;
    color: #505050;

        background-color: #f1f1f1;
    padding: 3%;
}

#colorlight .mi-case-r-tit-s span{
    color: #c30000;
    font-size: 1.7rem;
}

#colorlight .mi-case-r-de{
    margin-bottom: 5%;
}

#colorlight .mi-case-r-de-item{
	    font-size: 0.8rem;
	    color: #505050;
}

#colorlight .mi-case-r-price{
    font-size: 2rem;
    margin-bottom: 5%;
}

#colorlight .mi-case-btn{
    width: 50%;
}

#colorlight .mi-case-btn-w{
	width: 50%;
}

@media screen and (max-width: 768px) {

	#colorlight .mi-case-r-tit{
	    margin-top: 1rem;
	}

	#colorlight .mi-case-l{
		    width: 90%;
    margin: auto;
	}

	#colorlight .mi-case-r{
		width: 90%;
	    text-align: center;

    text-align: center;
    margin: auto;
    margin-top: 5%;

	}
}

/*----------------------------------------
  mi-主打活動
----------------------------------------*/
#colorlight .mi-act-img{
    margin-bottom: 0.5rem;
}

#colorlight .mi-act-tit{
	width: 100%;
	font-size: 2rem;
	color: #fefefe;
}

#colorlight .mi-act-tit-s{
	width: 100%;
	    margin-bottom: 1.5rem;
	    color: #9c9c9c;
}

#colorlight .mi-act-btn{
    margin: auto;
        width: 65%;
}

/*----------------------------------------
  mi-btn
----------------------------------------*/

#colorlight .mi-img-100{
	width: 285%;
}

#colorlight .mi-img-20{
    width: 20%;
}

#colorlight .mi-img-50{
    width: 50%;
}

#colorlight .mi-img-60{
    width: 60%;
}

#colorlight .mi-img-70{
    width: 70%;
}

#colorlight .mi-img-80{
    width: 80%;
}

#colorlight .mi-img-80-02{
    width: 80%;
}

#colorlight .mi-img-90{
	width: 90%;
}

#colorlight .mi-btn{
	padding: 6px 20px;
	text-decoration: none;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
	transition: all 0.3s;
	background-color: #ff8700;
	    /*background-color: #1b4c9e;*/
	/*box-shadow: 0px 0px 14px #ffffff;
	border: 2px solid #fefefe;*/
	font-size: 1.1rem;
	line-height: 1.5rem;
	font-weight: bold;
	/*border-radius: 10px;*/

	display: block;
	width: 100%;
	    /*border-bottom: 3px solid #cecece;*/

	    cursor: pointer;

	        border-radius: 10px;
}


#colorlight .mi-btn span{
	cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#colorlight .mi-btn span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#colorlight .mi-btn:hover span {
  padding-right: 15px;
}

#colorlight .mi-btn:hover span:after {
  opacity: 1;
  right: 0;
}

#colorlight .mi-btn-og{
    /*background-color: #ff8700;
    border-bottom: 3px solid #484848;*/
}

#colorlight .mi-btn-gray{
	    background-color: #707070;

	    background-color: #183a87;
    border: 1px solid;
    border-radius: 15px;
}

#colorlight .mi-btn:hover{
	background-color: #ffa744;
		background-color: #063582;
			    background-color: #e07700;
	box-shadow: none;
	border-bottom: none;
}

#colorlight .mi-btn-og:hover{
    background-color: #e87c00;
}

#colorlight .mi-btn-gray:hover{
	    background-color: #505050;
	    	background-color: #0d2969;
	    	border: none;
}


#colorlight .mi-btn-nob{
	border-bottom:none;
}

@media screen and (max-width: 768px) {

    #colorlight .mi-act{
            width: 100%;
    margin: auto;
    }

    #colorlight .mi-img-80-02{
        width: 100%;
    }

    #colorlight .mi-img-70{
        width: 100%;
    }

	#colorlight .mi-img-50{
        width: 100%;
    }

    #colorlight .mi-btn{
		/*padding: 10px 10px;*/
	}

	#colorlight .mi-act-btn{
	    width: 100%;
	}

    #colorlight .mi-img-60{
        width: 100%;
    }

    #colorlight .mi-img-80{
        width: 120%;
    }
}

#colorlight .pc_menu--colored{
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    opacity: 0.9;
    position: fixed;
    background-color: #5cb8e3;
        background-color: #216494;
        background-color: #0057b3;
    color: #646871;
    top: 0;
    width: 100%;
    z-index: 100;

        padding-bottom: 0%;

            max-width: 100%;
}

/*----------------------------------------
  秀出規格表
----------------------------------------*/
#colorlight .m-system-str{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	display: block;
}

#colorlight .modal{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,0.4);

	z-index: 200;
}

#colorlight .modal-close{
	cursor: pointer;
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 5px;
	color: #fff;
	font-size: 2rem;
}

#colorlight .is-hide{
  display: none;
}


#colorlight .mi-format-hide{
  display: none;
      margin-bottom: 3%;
}

#colorlight .mi-format-open{
  display: block;
}

/*----------------------------------------
  輪播效果
----------------------------------------*/
    #colorlight .banner {
        max-width: 1200px;
        height: 900px;
        /*border: 1px solid #808080;*/
        position: relative;
        overflow: hidden;
    }

    #colorlight .banner .img {
        width: 50000px;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .case-img{
    	width: 1200px;
    	height: 900px;
    }

    .case-img-01{
         background:#b0c2c9 url(../images/case-img-01.jpg) center bottom no-repeat;
         background-position: center;
        }

    .case-img-02{
         background:#b0c2c9 url(../images/case-img-02.jpg) center bottom no-repeat;
         background-position: center;
    }

    .case-img-03{
         background:#b0c2c9 url(../images/case-img-03.jpg) center bottom no-repeat;
         background-position: center;
    }

    .case-img-04{
         background:#b0c2c9 url(../images/case-img-04.jpg) center bottom no-repeat;
         background-position: center;
    }

    #colorlight .banner .img img {
        width: 1200px;
        height: 900px;
    }

    #colorlight .banner .img li {
        float: left;
    }

    #colorlight .banner .num {
        position: absolute;
        width: 100%;
        bottom: 10px;
        left: 0px;
        text-align: center;
        font-size: 0px;
    }

    #colorlight .banner .num li {
        width: 10px;
        height: 10px;
        background-color: #888;
        border-radius: 50%;
        display: inline-block;
        margin: 0px 3px;
        cursor: pointer;
    }

    #colorlight .banner .num li.on {
        background-color: #ff6a00;
    }

    #colorlight .banner .btn {
        width: 50px;
        height: 150px;
        background-color: #a0a0a0;
        opacity: 0.5;
        filter: alpha(opacity:0.5);
        position: absolute;
        top: 50%;
        margin-top: -100px;
        cursor: pointer;
        text-align: center;
        line-height: 150px;
        font-size: 40px;
        color: #fff;
        font-family: "宋體";
        display: none;
    }

    #colorlight .banner .btn_l {
        right: 0px;
    }

    #colorlight .banner .btn_r {
        
        left: 0px;
    }

    #colorlight .banner:hover .btn {
        display: block;
    }
    

    @media screen and (max-width: 768px) {

        #colorlight .pc_menu--colored{
         top: 69px;
        }

    	#colorlight .banner {
		    max-width: 300px;
   			 width: 100%;
			margin: auto;
    		height: 650px;
    	}

    	.case-img{
	    	max-width: 300px;
	    	height: 650px;
	    }

	    .case-img-01{
	         background:#b0c2c9 url(../images/case-img-mb-01-1215.jpg) center bottom no-repeat;
	         background-position: center;
	        }

	    .case-img-02{
	         background:#b0c2c9 url(../images/case-img-mb-02-1215.jpg) center bottom no-repeat;
	         background-position: center;
	    }

	    .case-img-03{
	         background:#b0c2c9 url(../images/case-img-mb-03-1215.jpg) center bottom no-repeat;
	         background-position: center;
	    }

	    .case-img-04{
	         background:#b0c2c9 url(../images/case-img-mb-04-1215.jpg) center bottom no-repeat;
	         background-position: center;
	    }

	    #colorlight .mi-format-hide{
	    	    margin-bottom: 8%;
	    }

    }


/*----------------------------------------
  m-table Style
----------------------------------------*/
#colorlight .m-table{
	box-sizing: border-box;
	/*padding: 0 5% 3% 5%;*/
	/*border: 1px solid #e8e8e8;*/
	    border: 20px solid #fefefe;
}
#colorlight .m-table table{
	/*border: 20px solid #fefefe;*/
	background-color: #fefefe;
	    border: 1px solid #e8e8e8;
	        color: #404040;
}
#colorlight .m-table table{
	text-align: center;
	    /*margin-bottom: 5%;*/
}


/*----------------------------------------
四大說明 table
----------------------------------------*/

#colorlight .m-table{
	width: 100%;
	margin-bottom: 2%;
        overflow: auto;
}

#colorlight .table11_6{
    width:100%;
    border:0;
}

#colorlight .m-table-first{
	float: left;
	margin-right: 2%;
}

#colorlight .table11_6 th {
        background-color:#96C7ED;
        color:#000000
    }
#colorlight .table11_6,
#colorlight .table11_6 th,
#colorlight .table11_6 td {
        font-size: 0.8rem;
        text-align:center;
        padding:4px;
        border-collapse:collapse;
        padding: 0.6rem;
    }
#colorlight  .table11_6 th,
#colorlight  .table11_6 td {
        border: 1px solid #73b4e7;
        border-width:1px 0 1px 0;
        border:2px inset #ffffff;
    }
#colorlight .table1-tit{
    font-weight: bold;
}
#colorlight  .table11_6 tr {
        border: 1px solid #ffffff;
    }
#colorlight  .table11_6 tr:nth-child(odd){
        background-color:#dcecf9;
    }
#colorlight  .table11_6 tr:nth-child(even){
        background-color:#ffffff;
    }

@media screen and (max-width: 768px)
{

	#colorlight .m-table{
		    border: 10px solid #fefefe;
	}

	#colorlight .table11_6{
	    width:100%;
	    border:0;
	    /*margin-bottom: 5%;*/
	}

	#colorlight .m-table-first{
		float: left;
		margin-right: 0%;
	}

	#colorlight .table11_6,
	#colorlight .table11_6 th,
	#colorlight .table11_6 td {
	        font-size: 0.5rem;
	        padding: 0.5rem;
	    }
}


#colorlight .mi-mjpd{
    margin-bottom: 2%;
        margin-top: 2rem;
}

#colorlight .mi-mjpd-box{
    margin: auto;
    width: 100%;
    text-align: center;
}

#colorlight .mi-mjpd-box-btn{
	    margin: 0% 1%;
    border-radius: 10px;
    font-size: 1rem;
    color: white;
    background-color: #1b4c9e;
    	background-color: #616161;
        padding: 6px 30px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s;
    /*border: 1px solid #0a4b67;*/


    /*background: rgb(0,79,191);
    background: -moz-linear-gradient(top, rgba(0,79,191,1) 0%, rgba(0,55,148,1) 100%);
    background: -webkit-linear-gradient(top, rgba(0,79,191,1) 0%,rgba(0,55,148,1) 100%);
    background: linear-gradient(to bottom, rgba(0,79,191,1) 0%,rgba(0,55,148,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004fbf', endColorstr='#003794',GradientType=0 );*/
}

#colorlight .current{
	/*background-color: #1b4c9e;*/
}

@media screen and (max-width: 768px){
	#colorlight .mi-mjpd{
	    margin-bottom: 7%;
	}

	#colorlight .mi-mjpd-box-btn{
	    padding: 6px 60px;
    	margin-bottom: 15px;
   		 display: block;
	}
}

 #colorlight button.active{
 	background: #717171;
 	color:#fefefe;
 }


 #colorlight .mi-kv-tit{
     background: url(../images/ny-kv-tit.png) center bottom no-repeat;
    background-position: center;
}

 #colorlight .mi-btn-h:hover{
    opacity: 0.8;
 }

  #colorlight .mi-pd-btn{
        padding: 3px 20px;
    text-decoration: none;
    color: #0057b3;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s;
    /*background-color: #def4fc;*/
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: block;
    width: 100%;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 10%;
    border: 2px solid #3fb7e6;
            border: 2px solid #c1e2ef;
    box-shadow: 1px 1px 2px 1px #def4fc;
 }

 #colorlight .mi-pd-btn span{
    cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#colorlight .mi-pd-btn span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#colorlight .mi-pd-btn:hover span {
  padding-right: 15px;
}

#colorlight .mi-pd-btn:hover span:after {
  opacity: 1;
  right: 0;
}

#colorlight .mi-pd-btn:hover{
                background-color:#abe0f3;
    border-bottom: none;

        box-shadow: none;
}

  #colorlight .mi-pd-btn-right{
        padding: 3px 20px;
    text-decoration: none;
    color: #0057b3;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s;
    /*background-color: #def4fc;*/
    font-size: 0.8rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: block;
    width: 100%;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 10%;
    border: 2px solid #3fb7e6;
        border: 2px solid #c1e2ef;
    box-shadow: 1px 1px 2px 1px #def4fc;
 }

 #colorlight .mi-pd-btn-right span{
    cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#colorlight .mi-pd-btn-right span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#colorlight .mi-pd-btn-right:hover span {
  padding-right: 15px;
}

#colorlight .mi-pd-btn-right:hover span:after {
  opacity: 1;
  right: 0;
}

#colorlight .mi-pd-btn-right:hover{
                background-color:#abe0f3;
    border-bottom: none;

        box-shadow: none;
}

#colorlight .mi-mp-3{
    margin-top: 3%;
}

#colorlight .mi-mb-3{
    margin-bottom: 3%;
}

#colorlight .mi-mb-2pa{
    margin-bottom: 2%;
        /*margin-top: 2%;*/
            background-color: #fefefe;
    padding: 3%;
}

#colorlight .mi-mb-2pa-two{
        margin-top: 2%;
}

#colorlight .mi-time-tit{
    margin: auto;
    margin-top: 4%;
    background-color: #4fb0d6;
    width: 70%;
    padding: 1%;
    border-radius: 20px;
    color: #fefefe;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 2%;
    letter-spacing: 0.1rem;
}

#colorlight .mi-time-tit span{
    font-size: 0.8rem;
}

#colorlight .mi-tit-blue{
    font-size: 2.4rem;
    font-weight: bold;
    color: #0057b3;
    margin-bottom: 2%;
}

#colorlight .mi-tit-blue-s{
        font-size: 1.5rem;
    font-weight: bold;
    color: #0057b3;
    margin-bottom: 2%;
}


#colorlight .mi-pt-5{
    padding-top: 5%;
}

#colorlight .mi-pt-3{
    padding-top: 3%;
}

#colorlight .mi-speeh-line{
    /*margin-bottom: 1px;*/
        -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
    box-shadow: 0px 5px 15px rgb(0 0 0 / 3%);
}

#colorlight .mi-img-pdbox-tit{
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 2%;
        margin-top: 2%; 
        color: #164e7b;
}

#colorlight .mi-img-pdbox-st{
    font-size: 0.8rem;
}

#colorlight .mi-img-pdbox-price{

}

#colorlight .mi-img-pdbox-btn{
    background-color: #58bbc0;
    padding: 1% 15%;
    color: #fefefe;
    text-align: center;
    width: 70%;
    margin-top: 3%;
    display: block;
    background-color: #43d3da;
        font-weight: bold;
            transition: 0.3s all;
    border-radius: 15px;
}

#colorlight .mi-img-pdbox-btn:hover{
        background-color: #45a8ad;
}

#colorlight .mi-main-color-new{
background-color: #82dfe4;
}

#colorlight .mi-main-color-db{
        background-color: #636363;
}

#colorlight .mi-img-tbox-two{
        padding: 2%;
    text-align: center;
}

@media screen and (max-width: 768px){

#colorlight .mi-mb-mb-5{
    margin-bottom: 5%;
}

#colorlight .mi-img-tbox-two{
    padding: 5%;
        min-height: 50px;
}

    #colorlight .mi-img-pdbox-btn{
        width: 100%;
    }

    #colorlight .mi-mb-2pa-two{
        margin-top: 10%;
    }

    #colorlight .mi-speeh-line{
        /*margin-bottom: 15px;*/
    }

    #colorlight .mi-pt-5{
        padding-top: 10%;
    }

    #colorlight .mi-tit-blue-s{
        font-size: 1rem;
                margin-bottom: 7%;
    }

    #colorlight .mi-tit-blue{
            font-size: 1.2rem;
                margin-bottom: 5%;
    }

      #colorlight .mi-pd-btn-right{
            font-size: 0.7rem;
      }

    #colorlight .mi-time-tit{
    margin-top: 0%;
        width: 90%;
    }
     
      #colorlight .mi-pd-btn{
            padding: 3px 40px;
      }

     #colorlight .mi-tit-mb{
            width: 100%;
     }

     #colorlight .mi-kv-box-btn{
            padding: 0% 5% 10% 5%;
     }

     #colorlight .mi-btn-mb{
            width: 100%;
     }

     #colorlight .mi-kv-box-r{
            margin-top: 0%;
     }
}


#colorlight .time {
    background-color: #30789d;
        background-color: #636363;  
    font-weight:lighter;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 25px 0;
        padding-bottom: 0px;
    /*background-image: url("../images/program-bg.png");*/
    background-position: top;
    background-size: cover;
}
#colorlight .mi-count {
        color: #fff;
        font-weight:normal;;
        font-size: 2rem;
        /*margin: 40px 0px 20px;
        margin-bottom: 2%;*/
        font-weight: bold;
    }
#colorlight #clockdiv {
        font-family: sans-serif;
        color: #000;
        display: inline-block;
        font-weight: 100;
        text-align: center;
        font-size: 30px;
    }
#colorlight .m-smalltext {
        padding-top: 5px;
        font-size: 16px;
        color: #fefefe;
    display: inline-block;
    }
#colorlight .mi-co{
        text-align: center;
        
    }
#colorlight .featuresContent
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    background-color: #fefefe;

        /*padding-top: 4%;*/
}
 #colorlight #clockdiv div>span {
        padding: 15px;
        border-radius: 3px;
        background: #ffffff;
        display: inline-block;
        color: #ff445a;
            color: #353535;
            margin-bottom: 15%;
            font-weight: bold;
    }
#colorlight #clockdiv>div {
        padding: 30px;
       
        display: inline-block;
        margin:0px 5px;
        /*margin-bottom: 2%;*/
    }

    #colorlight .mi-mt-3{
    margin-top: 3%;
}



    #colorlight .mi-mt-5{
    margin-top: 5%;
}

#colorlight .free-gift{
    display: block;
 }

 #colorlight .free-gift-mb{
    display: none;
 }

  #colorlight .product-price{
            color: #464646;
    font-weight: bold;
 }

 #colorlight .mi-sales{
        width: 15px;
 }

 #colorlight .mi-sale-info{
    margin-left: 3.5%;
    margin-top: 2%;
    margin-bottom: 2%;
    font-size: 1.6rem;
        color: #164e7b;
    font-weight: bold;
 }

  #colorlight .mi-oeepage{
        text-align: center;
    margin: auto;
    margin-top: 5%;
    font-size: 1.3rem;
        color: #10b6bf;
    font-weight: bold;
  }

  #colorlight .mi-oeepage a{
        color: #10b6bf;
  }

#colorlight #clockdiv .seconds{
    color: #ff293f;
  }

  #colorlight .mi-all-line{
    border-bottom: 2px solid #ffffff;
    text-align: center;
    margin: auto;
    display: block;
    margin-bottom: 2%;
        width: 90%;
            margin-top: 2%;
  }

    #colorlight .mi-all-line-no{
    max-width: 1050px;
    text-align: center;
    margin: auto;
    margin-left: 4%;
    display: block;
    margin-bottom: 2%;
        width: 100%;
            margin-top: 2%;
    }

    #colorlight .mi-case-h:hover{
            box-shadow: 4px 4px 5px #d6d6d6;
            transition: all 0.3s;
  }

 #colorlight .mi-box-5{
        width: 100%;
    padding: 15px;
    background-color: #fefefe;
    border-radius: 20px;
    margin: 5px;
    background-color: #6ed5da;
        background-color: #50babf;
    font-weight: bold;
    color: #fefefe;
    font-size: 1.5rem;
    border: 3px solid #fefefe;

        -webkit-box-shadow: 0px 5px 15px rgb(0 0 0 / 10%);
    box-shadow: 0px 5px 15px rgb(0 0 0 / 10%);

        margin: auto;
}


 #colorlight .mi-box-5-g{
    background-color: #6edaba;
 }

 #colorlight .mi-box-5-st{
    font-size: 2rem;
}

 #colorlight .mi-box-5-last{

 }

#colorlight .mi-sop-new-tit{
        font-size: 1.1rem;
}

#colorlight .mi-box-5-c1{
    background-color: #82dfe4;
 }

  #colorlight .mi-box-5-c2{
    background-color: #61dce2;
 }

  #colorlight .mi-box-5-c3{
    background-color: #45d3da;
 }

  #colorlight .mi-box-5-c4{
        background-color: #2dcad2;
 }

  #colorlight .mi-box-5-c5{
    background-color: #0bbec7;
 }


  #colorlight .mi-sp-one-g:hover{
    background-color: #c8fcff;
}

  #colorlight .mi-sp-two-g:hover{
    background-color: #c8fcff;
}

@media screen and (max-width: 768px){

        #colorlight .mi-mb-mt-10{
    margin-top: 10%;
}

    #colorlight .mi-sp-mb-box{
        width: 50%;
        margin-bottom: 0%;
    }

    #colorlight .mi-sp-mb-box-con{
        width: 100%;
        margin-top: 10%;
        padding: 15%;
        min-height: 170px;
    border-radius: 30px;
        margin-bottom: 20%;

    }

      #colorlight .mi-oeepage{
            margin-top: 2%;
      }

     #colorlight .mi-sale-info{
        font-size: 1.2rem;
            margin-bottom: 10%;
    margin-top: 10%;
     }

    #colorlight #clockdiv>div {
        padding: 20px;
    }

    #colorlight .free-gift{
        display: none;
     }

      #colorlight .free-gift-mb{
        display: block;
     }

      #colorlight .mi-box-5{
            width: 100%;
       padding: 10px;
    font-size: 1.3rem;

      }

          #colorlight .mi-mb-2pa{
            margin-top: 2%;
                padding: 6%;
                    margin-bottom: 10%;
    }

}