* {
			    margin: 0;
			    padding: 0px;
			}

			.bg_black_ {
			    background-color: black;
			    overflow: hidden;
			    font-family: 'Roboto', sans-serif !important;
			}

			.parent {
			    display: list-item;
			    table-layout: fixed;
			}

			.font24 {
			    font-weight: 400;
			}


			.picm {
			    display: none;
			}

			.picm2 {
			    display: block;
			}

			.ccbbg1,
			.ccbbg2,
			.ccbbg3,
			.ccbbg4,
			.ccbbg5,
			.ccbbg6,
			.ccbbg7,
			.ccbbg8,
			.ccbbg9,
			.ccbbg10 {

			    min-height: 720px;
			    position: relative;
			}

			.ccbbg2 {

			    min-height: 720px;
			}

			.ccbbg5 {
			    min-height: 730px;
			}

			.ccbbg5 {
			    min-height: 450px;
			}

			.pich900 {
			    max-height: 700px;
			}

			.txtshadow {
			    text-shadow: 0.1em 0.1em 0.3em black
			}

			.casebg1 {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/bbg1_a.jpg);
			    background-size: cover;
			    background-color: #000;
			    background-position: center;
			}

			.ddrbg2 {
			    background-image: url("https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic10.jpg");
			    background-size: cover;
			    background-color: black;
			    background-position: top center;
			}

			.ddrbg3 {
			    background-image: url("https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic11.jpg");
			    background-size: cover;
			    background-color: black;
			    background-position: top center;
			}

			.ddrbg3a {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingQuad/pic14.jpg);
			    background-size: cover;
			    background-color: black;
			    background-position: top center;
			}

			.ddrbg4 {
			    /* background-image: url("https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic12.jpg"); */
			    background-size: cover;
			    background-color: black;
			    background-position: top center;
			}

			.ddrbg5 {
			    background-image: url("https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic13.jpg");
			    background-size: cover;
			    background-color: black;
			    background-position: top center;
			}

			.ddrbg6 {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic14.jpg);
			    background-size: 100%;
			    background-color: black;
			    background-position: center;
			    background-repeat: no-repeat;
			}

			/*-- 輪播 -- */
			ul {
			    list-style: none;
			}

			* {
			    margin: 0;
			    padding: 0;
			}

			#ads {
			    width: 840px;
			    height: 700px;
			    margin: 0px auto;
			    position: relative;
			}

			#ads img {
			    width: 100%;
			    height: 100%;
			    position: absolute;
			    left: 0;
			    top: 0;
			    display: none;
			}

			#ads img.show {
			    display: block;
			}

			#ads ul {
			    position: absolute;
			    bottom: 10px;
			    left: 51%;
			}

			#ads ul li {
			    width: 12px;
			    height: 12px;
			    float: left;
			    background: rgba(255, 255, 255, 0.7);
			    margin-right: 8px;
			    border-radius: 50%;
			    cursor: pointer;
			}

			#ads ul li.active {
			    background: #ff0000;
			}

			.z-index6_a {

			    right: 2%;
			    bottom: -0%;
			    position: absolute;
			    text-align: right;
			    z-index: 55;
			    opacity: 0.6;
			}

			/*-- 輪播end -- */

			.z-index3 {
			    position: absolute;
			    z-index: 3;
			}

			.z-index2 {
			    position: absolute;
			    z-index: 2;
			}


			.carousel-indicators {
			    position: absolute;
			    bottom: 10px;
			    left: 20%;
			    top: 5%;
			    z-index: 15;
			    width: 63%;
			    padding-left: 0;
			    margin-left: 0%;
			    text-align: center;
			    list-style: none;
			}

			.carousel-indicators .active {
			    width: 100px;
			    height: 50px;
			    margin: 1px;
			    margin-bottom: 8px;
			}

			.carousel-indicators li {
			    display: block;
			    width: 100px;
			    height: 50px;
			    margin: 1px;
			    margin-bottom: 8px;
			    /* text-indent: -999px; */
			    cursor: pointer;
			    background-color: #000;
			    background-color: rgba(0, 0, 0, 0);
			    border: 1px solid #ccc;
			    border-radius: 10px;
			}




			.carousel-indicators li:nth-child(1) {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic4a.jpg);
			    background-color: #000;
			    background-repeat: no-repeat;
			    background-size: 100%;
			    background-position: center center;
			    opacity: .3;
			}

			.carousel-indicators li:nth-child(2) {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic4b.jpg);
			    background-color: #000;
			    background-repeat: no-repeat;
			    background-size: 100%;
			    background-position: center center;
			    opacity: .3;
			}

			.carousel-indicators li:nth-child(3) {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/img/RiingTrio/pic4c.jpg);
			    background-color: #000;
			    background-repeat: no-repeat;
			    background-size: 100%;
			    background-position: center center;
			    opacity: .3;
			}

			.carousel-indicators li:nth-child(1).active,
			.carousel-indicators li:nth-child(2).active,
			.carousel-indicators li:nth-child(3).active {
			    opacity: 1;
			    background-color: #000;
			}



			#intro .play-btn {
			    width: 94px;
			    height: 94px;
			    background: radial-gradient(#f82249 50%, rgba(101, 111, 150, 0.15) 52%);
			    border-radius: 50%;
			    display: block;
			    position: relative;
			    overflow: hidden;
			    margin: 0 auto;
			}

			#intro .play-btn::after {
			    content: '';
			    position: absolute;
			    left: 50%;
			    top: 50%;
			    -webkit-transform: translateX(-40%) translateY(-50%);
			    transform: translateX(-40%) translateY(-50%);
			    width: 0;
			    height: 0;
			    border-top: 10px solid transparent;
			    border-bottom: 10px solid transparent;
			    border-left: 15px solid #fff;
			    z-index: 100;
			    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
			}

			#intro .play-btn:before {
			    content: '';
			    position: absolute;
			    width: 120px;
			    height: 120px;
			    -webkit-animation-delay: 0s;
			    animation-delay: 0s;
			    -webkit-animation: pulsate-btn 2s;
			    animation: pulsate-btn 2s;
			    -webkit-animation-direction: forwards;
			    animation-direction: forwards;
			    -webkit-animation-iteration-count: infinite;
			    animation-iteration-count: infinite;
			    -webkit-animation-timing-function: steps;
			    animation-timing-function: steps;
			    opacity: 1;
			    border-radius: 50%;
			    border: 2px solid rgba(163, 163, 163, 0.4);
			    top: -15%;
			    left: -15%;
			    background: rgba(198, 16, 0, 0);
			}

			#intro .play-btn:hover::after {
			    border-left: 15px solid #f82249;
			    -webkit-transform: scale(20);
			    transform: scale(20);
			}

			#intro .play-btn:hover::before {
			    content: '';
			    position: absolute;
			    left: 50%;
			    top: 50%;
			    -webkit-transform: translateX(-40%) translateY(-50%);
			    transform: translateX(-40%) translateY(-50%);
			    width: 0;
			    height: 0;
			    border: none;
			    border-top: 10px solid transparent;
			    border-bottom: 10px solid transparent;
			    border-left: 15px solid #fff;
			    z-index: 200;
			    -webkit-animation: none;
			    animation: none;
			    border-radius: 0;
			}

			.mb-4,
			.my-4 {
			    margin-bottom: 1.5rem !important;
			}

			@-webkit-keyframes pulsate-btn {
			    0% {
			        -webkit-transform: scale(0.6, 0.6);
			        transform: scale(0.6, 0.6);
			        opacity: 1;
			    }

			    100% {
			        -webkit-transform: scale(1, 1);
			        transform: scale(1, 1);
			        opacity: 0;
			    }
			}

			@keyframes pulsate-btn {
			    0% {
			        -webkit-transform: scale(0.6, 0.6);
			        transform: scale(0.6, 0.6);
			        opacity: 1;
			    }

			    100% {
			        -webkit-transform: scale(1, 1);
			        transform: scale(1, 1);
			        opacity: 0;
			    }
			}


			.w70 {
			    width: 70%;
			}

			.posre {
			    position: relative;
			}

			.effbtn {
			    /*width:50px;
					height:20px;*/
			    border: none;

			    font-size: inherit;
			    color: inherit;
			    background: none;
			    cursor: pointer;
			    padding: 14px 19px;
			    display: inline-block;
			    margin: 7px 10px;
			    text-transform: uppercase;
			    letter-spacing: 1px;
			    font-weight: 700;
			    outline: none;
			    position: relative;
			    transform: translate(0%, 0%);

			    -webkit-transition: all 0.3s;
			    -moz-transition: all 0.3s;
			    transition: all 0.3s;

			    background-color: #ff3d3d;
			    border-radius: 4.2px;
			    /*
			-moz-border-radius: 15px; /* Gecko browsers */
			    /*
			-webkit-border-radius: 15px; /* Webkit browsers */
			    /*
			border-radius:15px; /* W3C syntax */
			}

			a:visited,
			.alink:visited {
			    color: #ffffff;
			    text-decoration: none;
			}

			.effbtn:after {
			    content: '';
			    position: absolute;
			    z-index: -1;
			    -webkit-transition: all 0.3s;
			    -moz-transition: all 0.3s;
			    transition: all 0.3s;
			}


			.effbtn-1 {
			    /* border: 3px solid #fff; */
			    color: #fff;
			}

			.effbtn-1f:after {
			    width: 101%;
			    height: 0;
			    top: 50%;
			    left: 50%;
			    background: #fff;
			    opacity: 0;
			    -webkit-transform: translateX(-50%) translateY(-50%);
			    -moz-transform: translateX(-50%) translateY(-50%);
			    -ms-transform: translateX(-50%) translateY(-50%);
			    transform: translateX(-50%) translateY(-50%);
			}

			.effbtn-1f {
			    overflow: hidden;
			}

			.effbtn-1f:after {
			    width: 101%;
			    height: 0;
			    top: 50%;
			    left: 50%;
			    background: #fff;
			    opacity: 0;
			    -webkit-transform: translateX(-50%) translateY(-50%);
			    -moz-transform: translateX(-50%) translateY(-50%);
			    -ms-transform: translateX(-50%) translateY(-50%);
			    transform: translateX(-50%) translateY(-50%);
			}

			.effbtn-1f:hover,
			.effbtn-1f:active {
			    color: #cd0e0e;
			}

			.effbtn-1f:hover:after {
			    height: 75%;
			    opacity: 1;
			}

			.effbtn-1f:active:after {
			    height: 130%;
			    opacity: 1;
			}

			.boxSoftware {
			    display: inline-block;
			    margin: 0 auto;
			    width: 800px;
			}



			.layoutCenter {
			    position: absolute;
			    top: 50%;
			    transform: translate(0%, -50%);
			    padding-top: 0px;
			    padding-bottom: 0px;
			    z-index: 3;
			}

			.layoutCenter5 {
			    position: absolute;
			    top: 50%;
			    transform: translate(100%, -50%);
			    padding-top: 0px;
			    padding-bottom: 0px;
			    z-index: auto;
			}

			.z-index2 {
			    z-index: 2;
			    position: absolute;
			}

			#NUMBER {
			    position: relative;
			    width: 550px;
			    margin: 0 auto;
			    overflow: hidden;
			}

			#NUMBER ul {
			    list-style: none;
			    margin: 0;
			    padding: 0;
			    width: 800px;
			    margin: 0 auto;
			    padding-top: 10px;
			}

			#NUMBER li {
			    position: relative;
			    cursor: pointer;
			    float: left;
			    display: block;
			    width: 45px;
			    height: 10px;

			    text-indent: -9999px;
			    white-space: nowrap;
			    line-height: 0;
			    text-align: center;
			    border: 1px solid #777;
			    margin-right: 5px;

			}

			#NUMBER li div {
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    z-index: -1;
			}

			#NUMBER li.NOW {
			    color: #fff;
			}

			#NUMBER li.NOW div {
			    background-color: rgb(182, 93, 255);
			}


			.lightMode>.nav>li>a {
			    font-size: 15px;
			    color: #ccc;
			}

			.lightMode>.nav>li {
			    margin: 2px;
			}

			.lightMode>.nav-pills>li.active>a,
			.lightMode>.nav-pills>li.active>a:focus,
			.lightMode>.nav-pills>li.active>a:hover {
			    color: #ff0000;
			    background-color: #0000;
			    font-size: 15px;
			}

			.nav>li>a:focus,
			.nav>li>a:hover {
			    text-decoration: none;
			    color: #ff0000;
			    background-color: #0000;
			}

			.nav-pills>li.active>a,
			.nav-pills>li.active>a:focus,
			.nav-pills>li.active>a:hover {
			    color: #ff0000;
			    background-color: #0000;
			}

			.lightMode {
			    display: block;
			    width: 235px;
			    margin: 0 auto;
			    padding-top: 15px;
			    border: 2px #fff solid;
			    padding: 13px;
			}

			.lightMode2 {
			    display: block;
			    width: 635px;
			    margin: 0 auto;
			    padding-top: 15px;
			}

			.lightalltxt {
			    top: 0%;
			    z-index: 9;
			}

			.line01 {
			    display: block;
			    width: 0%;
			    height: 1px;
			    background-color: #ccc;
			}

			.w785 {
			    width: 785px;
			    margin: 0 auto;
			    position: relative;
			}

			.line02txt {
			    opacity: 0;
			    animation: txtOpacity_0 3s;
			    -webkit-animation: txtOpacity_0 3s;
			}

			.line02txta {
			    opacity: 1;
			    animation: txtOpacity_1 3s;
			    -webkit-animation: txtOpacity_1 3s;
			}

			.line03txt {
			    opacity: 0;
			    animation: txtOpacity_0 3s;
			    -webkit-animation: txtOpacity_0 3s;
			}

			.line03txta {
			    opacity: 1;
			    animation: txtOpacity_1 3s;
			    -webkit-animation: txtOpacity_1 3s;
			}

			.line04txt {
			    opacity: 0;
			    animation: txtOpacity_0 3s;
			    -webkit-animation: txtOpacity_0 3s;
			}

			.line04txta {
			    opacity: 1;
			    animation: txtOpacity_1 3s;
			    -webkit-animation: txtOpacity_1 3ss;
			}

			@keyframes txtOpacity_0 {
			    from {
			        opacity: 1;
			    }

			    to {
			        opacity: 0;
			    }
			}

			@keyframes txtOpacity_1 {
			    from {
			        opacity: 0;
			    }

			    to {
			        opacity: 1;
			    }
			}


			.line02 {
			    display: block;
			    /* width: 975%; */
			    width: 1%;
			    height: 1px;
			    background-color: #ccc;

			    animation: line02bb 2s;
			    -webkit-animation: line02bb 2s;
			}

			.line02a {
			    display: block;
			    /* width: 975%; */
			    width: 975%;
			    height: 1px;
			    background-color: #ccc;

			    animation: line02b 2s;
			    -webkit-animation: line02b 2s;
			}

			@keyframes line02b {
			    from {
			        width: 20%;
			    }

			    to {
			        width: 975%;
			    }
			}

			@keyframes line02bb {
			    from {
			        width: 975%;
			    }

			    to {
			        width: 20%;
			    }
			}



			.line03 {
			    display: block;
			    /* width: 340%; */
			    width: 1%;
			    height: 1px;
			    background-color: #ccc;

			    animation: line03bb 2s;
			    -webkit-animation: line03bb 2s;
			}

			.line03a {
			    display: block;
			    /* width: 340%; */
			    width: 340%;
			    height: 1px;
			    background-color: #ccc;

			    animation: line03b 2s;
			    -webkit-animation: line03b 2s;
			}

			@keyframes line03b {
			    from {
			        width: 20%;
			    }

			    to {
			        width: 340%;
			    }
			}

			@keyframes line03bb {
			    from {
			        width: 340%;
			    }

			    to {
			        width: 20%;
			    }
			}


			.line04 {
			    display: block;
			    margin-left: 49%;
			    width: 1px;
			    /* height: 115px; */
			    height: 1px;
			    background-color: #ccc;

			    animation: line04bb 2s;
			    -webkit-animation: line04bb 2s;
			}

			.line04a {
			    display: block;
			    margin-left: 49%;
			    /* height: 115px; */
			    height: 115px;
			    background-color: #ccc;

			    animation: line04b 2s;
			    -webkit-animation: line04b 2s;
			}

			@keyframes line04b {
			    from {
			        height: 1px;
			    }

			    to {
			        height: 115px;
			    }
			}

			@keyframes line04bb {
			    from {
			        height: 115px;
			    }

			    to {
			        height: 1px;
			    }
			}


			/* .line04a,
		.line03a,
		.line02a {
			width: 90%;
			animation: chartAA 2s;
			-webkit-animation: chartAA 2s;
		} */

			.bg_colorblack {
			    background-color: black;
			}

			.par18 {
			    padding-left: 25%;
			}

			.pal18 {
			    padding-right: 25%;
			}

			.ccc {
			    clear: both;
			}

			.font60 {
			    font-size: 70px;
			    line-height: 78px;
			    font-weight: 600;
			}

			.font45 {
			    font-size: 38px;
			    font-weight: 600;
			}

			.font30 {
			    font-size: 30px;
			    letter-spacing: 3px;
			}

			.font28 {
			    font-size: 24px;
			    font-weight: 600;
			}



			.w495 {
			    width: 495px;
			    padding-top: 100px;
			}

			.text-red {
			    color: #ff0000;
			}

			.colorW,
			.ColorW {
			    color: #fff;
			}

			.paddtop1 {
			    padding-top: 1%;
			}

			.paddtop3 {
			    padding-top: 3%;
			}

			.paddtop5 {
			    padding-top: 5%;
			}

			.paddtop20 {
			    padding-top: 11%;
			}

			.paddtop40 {
			    padding-top: 40%;
			}

			.w40 {
			    width: 30%;
			    text-align: center;
			    margin: 0 auto;
			}

			.w42 {
			    width: 42%;
			    text-align: center;
			    margin: 0 auto;
			}

			.w45 {
			    width: 40%;
			    text-align: center;
			    margin: 0 auto;
			}

			.w60 {
			    width: 60%;
			    margin: 0 auto;
			}

			.w80 {
			    width: 85%;
			    margin: 0 auto;
			}


			.w62 {
			    width: 66%;
			    text-align: center;
			    margin: 0 auto;
			}

			.videoRi {
			    position: absolute;
			    right: 0;
			    height: 100%;
			    width: auto;
			}

			.videoli {
			    position: absolute;
			    left: 0;
			    height: 100%;
			    width: auto;
			}

			.bg6blank {
			    height: 800px;
			    width: 1px;
			    display: block;
			}

			.margin-left20 {
			    margin-left: 10%;
			    padding-top: 10%;
			}

			.logopaddtop10 {
			    padding-top: 20px;
			}

			.cherrylogo {
			    width: 13%;
			}

			.margin-right20 {
			    margin-right: 20px;
			}

			.padding-topA {
			    padding-top: 800px;

			}

			.colorW666 {
			    color: #fff;
			}

			.max1680 {
			    max-width: 1800px;
			}

			.max1680_a {
			    max-width: 1680px;
			}


			.rboxing {
			    display: block;
			    width: 30%;
			    min-height: 700px;
			    background-color: #f0f8ff00;
			    padding: 1%;
			}

			.lboxing {
			    display: block;
			    width: 86%;
			    margin: 0 auto;

			    background-color: #f0f8ff00;
			    padding: 1%;

			}

			.z-index4a {
			    position: absolute;
			    z-index: 4;
			}

			.z-index4 {
			    z-index: 4;
			    position: absolute;
			    top: 15%;
			    left: -30%;
			    opacity: 0;
			}

			.z-index5 {
			    z-index: 5;
			    position: relative;
			    opacity: 0;
			}

			.z-index6 {
			    z-index: 6;
			    position: absolute;

			}

			.z-index7 {
			    z-index: 7;
			    position: absolute;
			    left: 25%;
			}

			.z-index7pic {
			    position: absolute;
			    left: 30%;
			    z-index: 8;
			}

			.z-index7pica {
			    position: relative;
			}

			.z-index7txt1 {
			    z-index: 10;
			    position: absolute;
			    top: 13%;
			    left: 31%;
			}

			.z-index7txt2 {
			    z-index: 10;
			    position: absolute;
			    top: 71%;
			    left: 0%;
			}

			.z-index7txt3 {
			    z-index: 10;
			    position: absolute;
			    top: 68%;
			    left: 83%;
			}

			.z-index7txt4 {
			    z-index: 10;
			    position: absolute;
			    top: 68%;
			    left: 64%;
			}

			.z-index8 {
			    z-index: 15;
			    position: absolute;

			}

			.boxblack {
			    box-sizing: border-box;
			    padding: 25px;
			    background-color: #0008;
			    width: 45%;
			    margin: 0 auto;
			    display: block;

			}

			.hh500 {
			    min-height: 400px;
			}

			/* .boxa4{
					    display: none;
				}
				.boxa3{
				display: none;
				}
				.boxa2{
				display: none;
				}
				.boxa1{
				display: none;
				} */

			.lightPoint1 {
			    left: 10%;
			    top: 0%;
			    opacity: 0;
			}

			.lightPoint2 {
			    left: 10%;
			    top: 0%;
			    opacity: 0;
			}

			.lightPoint3 {
			    left: 10%;
			    top: 0%;
			    opacity: 0;
			}

			.lightPoint4 {
			    left: 10%;
			    top: 0%;
			    opacity: 0;
			}


			.lineAA {
			    /* width: 0%; */
			    animation: lineAA 2s;
			    -webkit-animation: lineAA 2s;
			    /* Safari and Chrome */
			}

			@keyframes lineAA {
			    from {
			        width: 0%;
			    }

			    to {
			        width: 559%;
			    }
			}

			.chartA,
			.chartB,
			.chartC,
			.chartD {
			    display: block;
			    height: 80px;
			    background-color: #327993;
			    position: relative;
			    box-shadow: -2px 1px 48px rgba(112, 112, 255, 0.5);
			}

			.chartTxt {
			    line-height: 80px;
			    text-align: right;
			    padding-right: 5px;
			    color: #fff;
			    font-size: 20px;
			}

			.chartA:after,
			.chartB:after,
			.chartC:after,
			.chartD:after {
			    content: "";
			    display: block;
			    width: 400px;
			    height: 80px;
			    background: rgb(167, 167, 167);
			    position: absolute;
			    z-index: 2;
			    opacity: 0.1;
			    top: 0px;

			}

			.chartA {
			    width: 90%;
			    animation: chartA 2s;
			    -webkit-animation: chartA 2s;
			}

			.chartB {
			    width: 40%;
			    animation: chartB 2s;
			    -webkit-animation: chartB 2s;
			}

			.chartC {
			    width: 70%;
			    animation: chartC 2s;
			    -webkit-animation: chartC 2s;
			}

			.chartD {
			    width: 30%;
			    animation: chartD 2s;
			    -webkit-animation: chartD 2s;
			}

			.chartAA {
			    animation: chartAA 2s;
			    -webkit-animation: chartAA 2s;
			    /* Safari and Chrome */
			}

			@keyframes chartAA {
			    from {
			        width: 20%;
			    }

			    to {
			        width: 90%;
			    }
			}

			@keyframes chartA {
			    from {
			        width: 90%;
			    }

			    to {
			        width: 20%;
			    }
			}


			.chartBB {
			    animation: chartBB 2s;
			    -webkit-animation: chartBB 2s;
			    /* Safari and Chrome */
			}

			@keyframes chartBB {
			    from {
			        width: 20%;
			    }

			    to {
			        width: 40%;
			    }
			}

			@keyframes chartB {
			    from {
			        width: 40%;
			    }

			    to {
			        width: 20%;
			    }
			}

			.chartCC {
			    animation: chartCC 2s;
			    -webkit-animation: chartCC 2s;
			    /* Safari and Chrome */
			}

			@keyframes chartCC {
			    from {
			        width: 20%;
			    }

			    to {
			        width: 70%;
			    }
			}

			@keyframes chartC {
			    from {
			        width: 70%;
			    }

			    to {
			        width: 20%;
			    }
			}




			.chartDD {
			    animation: chartDD 2s;
			    -webkit-animation: chartDD 2s;
			    /* Safari and Chrome */
			}

			@keyframes chartDD {
			    from {
			        width: 20%;
			    }

			    to {
			        width: 30%;
			    }
			}

			@keyframes chartD {
			    from {
			        width: 30%;
			    }

			    to {
			        width: 20%;
			    }
			}


			.enter {

			    animation: enter2 1s;
			    -webkit-animation: enter2 1s;

			}


			@keyframes enter {
			    from {
			        RIGHT: -30%;
			        opacity: 0.1;
			    }

			    to {
			        RIGHT: 4%;
			        opacity: 1;
			    }
			}



			@media (min-width: 1920px) {

			    .max1680 {
			        max-width: 1920px;
			    }

			    .max1680_a {
			        max-width: 1680px;
			    }

			    .ccbbg1,
			    .ccbbg2,
			    .ccbbg3,
			    .ccbbg4,
			    .ccbbg5,
			    .ccbbg7,
			    .ccbbg8,
			    .ccbbg9,
			    .ccbbg10 {
			        position: relative;
			        min-height: 900px;
			    }

			}

			@media (min-width: 2560px) {
			    .max1680 {
			        max-width: 2560px;
			    }

			    .max1680_a {
			        max-width: 1680px;
			    }

			    .ccbbg1,
			    .ccbbg2,
			    .ccbbg3,
			    .ccbbg4,
			    .ccbbg5,
			    .ccbbg7,
			    .ccbbg8,
			    .ccbbg9,
			    .ccbbg10 {
			        position: relative;
			        min-height: 1200px;
			    }

			    .z-index7txt {
			        left: 27%;
			    }

			}



			@media (max-width: 992px) {


			    .w785 {
			        width: 100%;
			        margin: 0 auto;
			    }

			    /* .line02txt,
			.line03txt,
			.line04txt {
				opacity: 1;
			} */

			    #ads {
			        width: 500px;
			        height: 417px;
			        margin: 0px auto;
			        position: relative;
			    }

			    #ads ul {
			        position: absolute;
			        bottom: 10px;
			        left: 47%;
			    }

			    .boxblack {
			        box-sizing: border-box;
			        padding: 25px;
			        background-color: #0004;
			        width: 85%;
			        margin: 0 auto;
			        display: block;

			    }

			    .videoRi {
			        position: relative;
			        right: 0;
			        height: auto;
			        width: 100%;
			    }

			    .videoli {
			        position: relative;
			        left: 0;
			        height: auto;
			        width: 100%;
			    }



			    .ddrbg2 {
			        background-image: none;
			        background-size: 0px;
			    }

			    .ddrbg3 {
			        background-image: none;
			        background-size: 0px;
			    }

			    .ddrbg3a {
			        background-image: none;
			        background-size: 0px;
			    }

			    .ddrbg4 {
			        background-image: none;
			        background-size: 0px;
			    }

			    .ddrbg5 {
			        background-image: none;
			        background-size: 0px;
			    }

			    .ddrbg6 {
			        background-image: none;
			        background-size: 0px;
			    }

			    .casebg1 {
			        background-image: none;
			        background-size: 0px;
			    }

			    .rboxing {

			        width: 100%;
			    }

			    .lboxing {

			        width: 100%;
			        padding: 7%;

			    }


			    .par18 {
			        padding-left: 0%;
			    }

			    .pal18 {
			        padding-right: 0%;
			    }

			    .z-index4 {
			        z-index: 4;
			        position: relative;
			        top: 0%;
			        left: 0%;
			        opacity: 1;
			    }

			    .z-index5 {
			        z-index: 5;
			        position: relative;
			        top: 0%;
			        RIGHT: 0%;
			        opacity: 1;
			    }

			    .z-index7txt {
			        z-index: 10;
			        position: absolute;
			        left: 2%;
			    }



			    .z-index7pic {
			        position: relative;
			        left: 0%;
			        z-index: 8;
			    }


			    .chartA:after,
			    .chartB:after,
			    .chartC:after,
			    .chartD:after {
			        content: "";
			        display: block;
			        width: 100%;

			    }

			    .lightalltxt {
			        top: 30%;
			        z-index: 9;
			    }

			    .colorW666 {
			        color: #666;
			    }

			    .picm {
			        display: block;
			    }

			    .picm2 {
			        display: none;
			    }

			    .w40 {
			        width: 85%;
			    }

			    .w60 {
			        width: 85%;
			    }

			    .w45 {
			        width: 80%;

			    }

			    .layoutCenter {
			        position: relative;
			        top: 0%;
			        transform: translate(0%, 0%);
			        padding-top: 20px;
			        padding-bottom: 20px;
			        z-index: 555;
			    }

			    .ccbbg1,
			    .ccbbg2,
			    .ccbbg3,
			    .ccbbg4,
			    .ccbbg5,
			    .ccbbg6,
			    .ccbbg7,
			    .ccbbg8,
			    .ccbbg9,
			    .ccbbg10 {

			        min-height: auto;
			    }

			    .col-lg-1,
			    .col-lg-10,
			    .col-lg-11,
			    .col-lg-12,
			    .col-lg-2,
			    .col-lg-3,
			    .col-lg-4,
			    .col-lg-5,
			    .col-lg-6,
			    .col-lg-7,
			    .col-lg-8,
			    .col-lg-9,
			    .col-md-1,
			    .col-md-10,
			    .col-md-11,
			    .col-md-12,
			    .col-md-2,
			    .col-md-3,
			    .col-md-4,
			    .col-md-5,
			    .col-md-6,
			    .col-md-7,
			    .col-md-8,
			    .col-md-9,
			    .col-sm-1,
			    .col-sm-10,
			    .col-sm-11,
			    .col-sm-12,
			    .col-sm-2,
			    .col-sm-3,
			    .col-sm-4,
			    .col-sm-5,
			    .col-sm-6,
			    .col-sm-7,
			    .col-sm-8,
			    .col-sm-9,
			    .col-xs-1,
			    .col-xs-10,
			    .col-xs-11,
			    .col-xs-12,
			    .col-xs-2,
			    .col-xs-3,
			    .col-xs-4,
			    .col-xs-5,
			    .col-xs-6,
			    .col-xs-7,
			    .col-xs-8,
			    .col-xs-9 {
			        padding-right: 0px;
			        padding-left: 0px;

			    }

			    .bg_black_ {
			        background-color: black;
			        padding-top: 20px;
			        overflow: hidden;
			        font-family: 'Roboto', sans-serif !important;
			    }

			    .pich900 {
			        max-height: auto;
			    }

			    .layoutCenter5 {
			        position: relative;
			        top: 0%;
			        transform: translate(0%, 0%);
			        padding-top: 20px;
			        padding-bottom: 20px;
			        z-index: 555;
			    }

			    .lightMode {
			        display: block;
			        width: 235px;
			        margin: 0 auto;
			        padding-top: 15px;
			    }

			    .lightMode2 {
			        width: 640px;
			    }

			    .prl0 {
			        padding-left: 0px;
			        padding-right: 0px;
			    }

			    @media (max-width: 640px) {
			        .lightMode2 {
			            width: 80%;
			        }


			    }



			}

			.right0 {
			    right: 0;
			}

			.left0 {
			    left: -23%;
			}

			.bg_black_ {
			    background-color: black;

			}

			#footer>table {
			    margin: 0 auto;
			}

			.w350 {
			    width: 400px;
			}

			.ileft {
			    text-align: left;
			}

			.iright {
			    text-align: right;
			}

			.floatL {
			    float: left;
			}

			.floatR {
			    float: right;
			}

			.txt110 {
			    font-size: 240px;
			    padding: 11px 27px;
			    margin: 9px;
			}

			.prl0 {
			    padding-left: 0px !important;
			    padding-right: 0px !important;
			}

			.txt110a {
			    font-size: 91px;
			    line-height: 80px;
			    padding-right: 8px;
			    background: linear-gradient(to right, rgb(255, 230, 0), rgb(255, 255, 255));
			    -webkit-background-clip: text;
			    color: transparent;
			    background-size: 800% 800%;
			    -webkit-animation: AnimationName2 4s ease infinite;
			    -moz-animation: AnimationName2 4s ease infinite;
			    animation: AnimationName2 4s ease infinite;

			}

			@-webkit-keyframes AnimationName2 {
			    0% {
			        background-position: 0% 50%
			    }

			    50% {
			        background-position: 100% 50%
			    }

			    100% {
			        background-position: 0% 50%
			    }
			}

			@-moz-keyframes AnimationName2 {
			    0% {
			        background-position: 0% 50%
			    }

			    50% {
			        background-position: 100% 50%
			    }

			    100% {
			        background-position: 0% 50%
			    }
			}

			@keyframes AnimationName2 {
			    0% {
			        background-position: 0% 50%
			    }

			    50% {
			        background-position: 100% 50%
			    }

			    100% {
			        background-position: 0% 50%
			    }
			}


			.li110 {
			    line-height: 50px;

			}



			.txt110 {
			    color: #fff;
			    /* height: 176px; */
			    background: linear-gradient(270deg, #28e0b0, #c328e0, #28a1e0, #e0286b) center / cover;
			    background-size: 800% 800%;
			    -webkit-animation: AnimationName 5s ease infinite;
			    -moz-animation: AnimationName 5s ease infinite;
			    animation: AnimationName 5s ease infinite;
			}

			@-webkit-keyframes AnimationName {
			    0% {
			        background-position: 0% 50%
			    }

			    50% {
			        background-position: 100% 50%
			    }

			    100% {
			        background-position: 0% 50%
			    }
			}

			@-moz-keyframes AnimationName {
			    0% {
			        background-position: 0% 50%
			    }

			    50% {
			        background-position: 100% 50%
			    }

			    100% {
			        background-position: 0% 50%
			    }
			}

			@keyframes AnimationName {
			    0% {
			        background-position: 0% 50%
			    }

			    50% {
			        background-position: 100% 50%
			    }

			    100% {
			        background-position: 0% 50%
			    }
			}

			.effect3 {

			    animation: light03 2s;
			    -moz-animation: light03 2s;
			    -webkit-animation: light03 2s;
			    -o-animation: light03 2s;
			    animation-iteration-count: infinite;
			    -moz-animation-iteration-count: infinite;
			}

			@keyframes light03 {
			    0% {
			        opacity: 0.1;
			    }

			    50% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}

			@-moz-keyframes light03
			/* Firefox */

			    {
			    0% {
			        opacity: 0.1;
			    }

			    50% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}

			@-webkit-keyframes light03
			/* Safari and Chrome */

			    {
			    0% {
			        opacity: 0.1;
			    }

			    50% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}

			@-o-keyframes light03
			/* Opera */

			    {
			    0% {
			        opacity: 0.1;
			    }

			    50% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}

			.effect4 {

			    animation: light04 3s;
			    -moz-animation: light04 3s;
			    -webkit-animation: light04 3s;
			    -o-animation: light04 3s;
			    animation-iteration-count: infinite;
			    -moz-animation-iteration-count: infinite;
			}

			@keyframes light04 {
			    0% {
			        opacity: 0.1;
			    }

			    40% {
			        opacity: 1;
			    }

			    60% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}

			@-moz-keyframes light04 {
			    /* Firefox */

			    0% {
			        opacity: 0.1;
			    }

			    40% {
			        opacity: 1;
			    }

			    60% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}

			@-webkit-keyframes light04
			/* Safari and Chrome */

			    {
			    0% {
			        opacity: 0.1;
			    }

			    40% {
			        opacity: 1;
			    }

			    60% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}

			@-o-keyframes light04
			/* Opera */

			    {
			    0% {
			        opacity: 0.1;
			    }

			    40% {
			        opacity: 1;
			    }

			    60% {
			        opacity: 1;
			    }

			    100% {
			        opacity: 0.1;
			    }
			}


			.effect5 {

			    animation: light05 3s;
			    -moz-animation: light05 3s;
			    -webkit-animation: light05 3s;
			    -o-animation: light05 3s;
			    animation-iteration-count: infinite;
			    -moz-animation-iteration-count: infinite;
			}

			@keyframes light05 {
			    0% {
			        opacity: 1;
			    }

			    40% {
			        opacity: 0.1;
			    }

			    60% {
			        opacity: 0.1;
			    }

			    100% {
			        opacity: 1;
			    }
			}

			@-moz-keyframes light05 {
			    /* Firefox */

			    0% {
			        opacity: 1;
			    }

			    40% {
			        opacity: 0.1;
			    }

			    60% {
			        opacity: 0.1;
			    }

			    100% {
			        opacity: 1;
			    }
			}

			@-webkit-keyframes light05
			/* Safari and Chrome */

			    {
			    0% {
			        opacity: 1;
			    }

			    40% {
			        opacity: 0.1;
			    }

			    60% {
			        opacity: 0.1;
			    }

			    100% {
			        opacity: 1;
			    }
			}

			@-o-keyframes light05
			/* Opera */

			    {
			    0% {
			        opacity: 1;
			    }

			    40% {
			        opacity: 0.1;
			    }

			    60% {
			        opacity: 0.1;
			    }

			    100% {
			        opacity: 1;
			    }
			}
  
    
    
    video {
			    max-width: 100%;
			}

			#maincontent {
			    padding-bottom: 0;
			}

			.product.info.detailed {
			    margin-bottom: 0;
			}

			.product.data.items {
			    margin-bottom: 0;
			}

			/*---------- 共用 ----------*/
			.clearer {
			    clear: both;
			    height: 0;
			    line-height: 0;
			    font-size: 0;
			}

			.boxABCD {
			    background-color: transparent;
			    border-color: #d43f3a;
			    border: 2px solid #fff;
			    letter-spacing: 3px;
			    padding: 8px 25px;
			    border-radius: 0 !important;
			    color: #FFF;
			    display: inline-block;
			}

			.txtRedGrad {
			    font-size: 30px;
			    letter-spacing: 4px;
			    font-weight: bold !important;
			    background: -webkit-linear-gradient(top, #ff54ba 0, #9a0000 100%);
			    -webkit-background-clip: text;
			    -webkit-text-fill-color: transparent;
			    text-transform: uppercase;
			}

			.wAuto {
			    width: auto !important;
			}

			.floatL {
			    float: left;
			}

			.floatR {
			    float: right;
			}

			.noPadd {
			    padding: 0 !important;
			}

			.txtCenter {
			    text-align: center;
			}

			.shodowBot {
			    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
			    filter: drop-shadow(0px 12px 7px rgba(0, 0, 0, 0.7));
			}

			.whiteBg {
			    background-color: #505050;
			}

			.mw768 {
			    max-width: 768px !important;
			}

			.w40P {
			    width: 40% !important;
			}

			.w50P {
			    width: 50% !important;
			}

			.w110 {
			    width: 110px;
			}

			.w120 {
			    width: 120px;
			}

			.w130 {
			    width: 130px;
			}

			.w140 {
			    width: 140px;
			}

			.w150 {
			    width: 150px;
			}

			.w200 {
			    width: 200px;
			}

			.w250 {
			    width: 250px;
			}

			.h20 {
			    height: 20px;
			}

			.h50 {
			    height: 50px;
			}

			.h70 {
			    height: 70px;
			}

			.h500 {
			    height: 500px;
			}

			.h600 {
			    height: 600px;
			}

			.h700 {
			    height: 700px;
			}

			.h900 {
			    height: 900px;
			}

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

			    .h700,
			    .h600,
			    .h900 {
			        height: auto;
			        padding: 50px 0;
			    }
			}

			.wAuto {
			    width: auto !important;
			}

			.margL10P {
			    margin: 0 0 0 10%;
			}

			.margR10P {
			    margin: 0 10% 0 0;
			}

			/*---------- 共用 ----------*/

			/* 全版面 */
			.fullBgBox {
			    width: 100%;
			    padding: 70px 0;
			}

			.fullBgBox .proInfoBox {
			    max-width: 1200px;
			    /*padding: 0 5%;*/
			    margin: 0 auto;
			}

			.fullBgBox.mainBg {
			    /*background: url(/pub/media/wysiwyg/key3/db/products/case/comc31tgargb/images/pro_view_c31_1920x800.jpg) center no-repeat;*/
			    background: url(images/x1_app_main_1.jpg) center no-repeat;
			    /*height:500px;*/
			    background-size: cover;
			    text-align: center;
			    padding: 0;
			}

			.fullBgBox .proInfoBox .txtBox {
			    width: 100%;
			}

			.fullBgBox .proInfoBox .ti,
			.fullBgBox .proInfoBox .txt {
			    text-align: center;
			}

			.proInfoBox .txtBox .txt.list ul {
			    /*list-style:none;*/
			    padding: 0;
			    margin: 0;
			}

			.proInfoBox .txtBox .txt.list ul li {
			    /*list-style:inside;*/
			    padding: 5px 1%;
			    /*background: url(/pub/media/wysiwyg/key3/db/products/case/comc31tgargb/images/icon_1.gif) no-repeat left 19px;*/
			    float: left;
			    text-align: left;
			    width: 48%;
			    /*width:98%;*/
			    overflow: hidden;
			    /*font-size:23px;*/

			    margin-bottom: 0;
			    font-size: 18px;
			}

			.noteTxtBox {
			    /*position:absolute;*/
			    /*width:500px;*/
			    /*height:60px;*/
			    /*font-size:13px;*/
			    font-size: 12px;
			    bottom: 0;
			    line-height: 20px;
			    /*color:#FFF;*/
			    color: #202020;
			    font-family: Roboto, 微軟正黑體;
			}

			.noteTxtBox ul {
			    margin: 0;
			    padding: 0;
			    list-style: none;
			}

			.noteTxtBox li {
			    font-weight: normal;
			    /*padding: 0 0 0 8px;*/
			    /*padding: 5px 0 5px 8px;*/
			    margin-bottom: 0 !important;
			    /*background: url(/pub/media/wysiwyg/key3/db/products/case/comc31tgargb/images/icon_1.gif) no-repeat left center;*/
			}

			.noteTxtR0 {
			    right: 0;
			}

			.noteTxtR10P {
			    right: 10%;
			}

			.noteTxtL0 {
			    left: 0;
			}

			.noteTxtL10P {
			    left: 10%;
			}

			.noteTxtL20 {
			    left: 20%;
			}

			.lcsLogo {
			    position: absolute;
			    width: 120px;
			    left: 20px;
			    top: 50px;
			    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
			    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))
			}

			@media only screen and (max-width: 1023px) {
			    .lcsLogo {
			        left: auto;
			        top: auto;
			        right: 20px;
			        bottom: 10px;
			    }
			}

			.SwWrap {





			    width: 100%;
			    overflow: hidden;
			    padding: 30px 0 0;
			}

			.SwWrap ul {
			    list-style: none;
			    padding: 0;
			    margin: 0;
			}

			.SwWrap ul li {
			    float: left;
			    width: 16.5%;
			    font-size: 15px;
			    text-align: center;
			    overflow: hidden;
			}

			.SwWrap ul li p {
			    color: #b5b5b5;
			}

			.SwWrap ul li a {

			    /*background: -moz-linear-gradient(top, #e8538d 0%, #971b6f 100%);
	background: -webkit-linear-gradient(top, #e8538d 0%, #971b6f 100%);
	background: linear-gradient(to bottom, #e8538d 0%, #971b6f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8538d', endColorstr='#971b6f',GradientType=0);
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;*/
			    height: 210px;
			    width: 150px;
			    display: block;
			    margin: 10px auto;
			    /*padding:10px 0;*/
			    color: #FFF;
			}

			.SwBg {
			    background-image: url(/pub/media/wysiwyg/key3/db/products/case/comc31tgargb/images/tabs_bg_2.png);
			    background-repeat: repeat-x;
			    background-position: center;
			    background-color: #141414;
			}

			.SwBtn {
			    width: 100%;
			    margin: 0 auto;
			    overflow: hidden;
			}

			.SwBtn a {
			    width: 90%;
			    display: block;
			    margin: 50px auto 10px;
			    text-align: center;
			    /* max-width: 300px; */
			    border: 1px solid #FFF;
			    padding: 10px 15px;
			    /* margin: 20px 0; */
			    font-size: 20px;
			    color: #FFF;
			    border-radius: 5px;
			    -moz-border-radius: 5px;
			    -webkit-border-radius: 5px;
			    -o-border-radius: 5px;
			}

			@media only screen and (max-width: 1023px) {
			    .SwWrap ul li {
			        width: 50%;
			    }
			}

			.proInfoBox {
			    position: relative;

			    max-width: 1200px;
			    /*max-width:1180px;
	padding:0 10px;*/
			    margin: 0 auto;
			}

			.proInfoBox.w1500 {
			    max-width: 1500px;
			}

			.proInfoBox.noBound,
			.proInfoBox.halfBlock {
			    /*max-width:none;*/
			}

			.proInfoBox.noBound .txtBox {
			    width: 50%;
			    /*margin: 0 5% 0 0;*/
			}

			.proInfoBox.noBound .img {
			    width: 50%;
			    text-align: center;
			    /* height: 700px; */
			    /*max-width: 800px;*/
			    /*margin: 0 0 0 5%;*/
			}

			.proInfoBox.halfBlock .txtBox {
			    width: 46%;
			    padding: 2%;
			}

			.proInfoBox .img {
			    width: 50%;
			}

			.proInfoBox .txtBox {
			    width: 45%;
			}

			.proInfoBox .info {
			    width: 600px;
			    margin: 100px 0 0 0;
			}

			.proInfoBox .ti {
			    font-size: 28px;
			    line-height: 40px;
			    margin-bottom: 40px;
			    color: #FFF;
			}

			.proInfoBox .ti.supBigTi,
			.supBigTi {
			    /*font-size:60px !important;
					line-height:65px !important;
					font-weight:bold !important;*/

			    font-size: 30px !important;
			    line-height: 35px !important;
			    font-weight: normal;
			}

			.proInfoBox .txt {
			    /*font-size:20px;*/
			    font-size: 18px;
			    line-height: 28px;
			    color: #555;
			    padding: 0 10px;
			    font-family: Roboto, 微軟正黑體;
			}

			@media only screen and (max-width: 1199px) {
			    .proInfoBox .img {
			        width: 45%;
			    }

			    .proInfoBox .info,
			    .proInfoBox .txtBox {
			        width: 50%;
			    }

			    .proInfoBox .info .ti {
			        font-size: 25px;
			        line-height: 35px;
			        margin-bottom: 30px;
			    }

			    .proInfoBox .info .txt {
			        font-size: 15px;
			        line-height: 25px;
			        color: #7f7f7f;
			    }
			}

			@media only screen and (max-width: 1023px) {
			    .fullBgBox.lcsBg .proInfoBox .img {
			        margin: 0 auto;
			    }

			    .fullBgBox.lcsBg .proInfoBox .txtBox {
			        width: 100%;
			        margin: 0 auto;
			    }

			    .fullBgBox.lcsBg .proInfoBox .ti,
			    .fullBgBox.lcsBg .proInfoBox .txt {
			        text-align: center;
			    }

			    .proInfoBox .img,
			    .proInfoBox.noBound .img {
			        width: 100%;
			        text-align: center;
			    }

			    .proInfoBox .info,
			    .proInfoBox .txtBox,
			    .proInfoBox.noBound .txtBox {
			        width: 100%;
			        margin: 0;
			    }

			    .proInfoBox .ti,
			    .proInfoBox .txt {
			        text-align: center;
			    }

			    .proInfoWrap.bgA {
			        background: none;
			    }

			    .like-table {
			        display: block !important;
			        height: auto !important;
			    }
			}

			.like-table {
			    /*width: 360px;*/
			    /*width: 50%;*/
			    /*height: 500px;*/
			    /* 要可變 */
			    border: 0px solid #000;
			    vertical-align: middle;
			    display: table-cell;

			    padding: 0 40px;

			}

			.like-table .fullBlock,
			.like-table.fullBlock .box,
			.proInfoBox .fullBlock {
			    width: 100%;
			}

			.like-table .box {
			    /* width: 360px;*/
			    /* height: 68px; */
			    margin: 0 auto;
			    color: #fff;
			    font-size: 12px;
			    line-height: 22px;
			    text-align: left;
			}

			.like-table .box .ti,
			.proInfoBox .ti {
			    font-size: 30px;
			    line-height: 40px;
			    margin-bottom: 20px;
			    padding: 0 10px;
			    color: #202020;
			    /*font-weight: bold;*/
			    font-weight: normal;
			    font-family: Roboto, 微軟正黑體;
			}

			.like-table .box .tiS {
			    font-size: 20px;
			    line-height: 25px;
			    margin-bottom: 10px;
			    padding: 0 10px;
			    /*color: #a4a4a4;*/
			    color: #555;
			    font-weight: normal;
			}

			/*.like-table .box .txt, .proInfoBox .txt{
    font-size: 15px;
    line-height: 20px;
		color:#666666;
}*/

			.proInfoBox>.ti,
			.proInfoBox>.txt {
			    text-align: center;
			}

			.like-table>.box>.txt>p>img {
			    width: auto !important;
			    border: 0;
			    text-decoration: none;
			    max-width: 100%;
			    width: 100%;
			}

			.like-table2>.box>.txt>p>img {
			    width: auto !important;
			    border: 0;
			    text-decoration: none;
			    max-width: 100%;
			    width: 100%;
			}

			.img>.txt p {
			    text-align: center;
			    width: 80%;
			    margin: 0 auto;
			}

			.img>img {
			    width: 100%;
			}

			/* TABLE */
			.supportBox .rwdTable {
			    width: 100%;
			    border-collapse: collapse;
			    border-spacing: 0;
			}

			.supportBox .rwdTable thead {
			    font-size: 15px;
			    line-height: 25px;
			    color: #FFF;
			    background: #3a3a3a;
			    /*background:-moz-linear-gradient(top, #1b1b1b 0%, #3a3a3a 100%);
	background:-webkit-linear-gradient(top, #1b1b1b 0%, #3a3a3a 100%);
	background:linear-gradient(to bottom, #1b1b1b 0%, #3a3a3a 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b1b1b', endColorstr='#3a3a3a',GradientType=0);*/
			    background: -moz-linear-gradient(top, #e6e6e6 0%, #c5c5c5 100%);
			    background: -webkit-linear-gradient(top, #e6e6e6 0%, #c5c5c5 100%);
			    background: linear-gradient(to bottom, #e6e6e6 0%, #c5c5c5 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e6', endColorstr='#c5c5c5', GradientType=0);
			}

			.supportBox .rwdTable tbody tr {
			    /*border-bottom:1px solid #353535;*/
			    border-bottom: 1px solid #ccc;
			}

			.supportBox .rwdTable tbody tr:last-child {
			    border-bottom: 0;
			}

			/*.supportBox .rwdTable tbody tr:nth-child(even) {
	background-color:#efefef;
}*/
			.supportBox .rwdTable thead th {
			    width: 15%;
			    /*padding:10px 0;*/
			    font-size: 18px;
			    /*padding:5px 10px;*/
			    padding: 5px 5px;
			    font-weight: normal;
			    text-align: center;
			    /*color:#a4a4a4;*/
			    color: #555;
			}

			.supportBox .rwdTable tbody td {
			    padding: 10px 10px;
			    line-height: 25px;
			    /*color:#7f7f7f;*/
			    font-size: 18px;
			    /*color: #FFF;*/
			    color: #555;
			    font-weight: normal;
			    text-align: center;
			}

			.supportBox .rwdTable tbody td a {
			    font-size: 20px;
			    color: #fe8a28;
			}

			.supportBox .rwdTable tbody td:before {
			    content: "";
			}

			.supportBox .rwdTable img {
			    margin: 0 auto;
			}

			.supportBox .rwdTable tbody td.rwdTdFirst {
			    border-bottom: 1px solid #efefef;
			}

			.suppTabsBody>div {
			    display: none;
			}

			.suppTabsBody>.active {
			    display: block;
			}

			@media only screen and (max-width: 1279px) {
			    .circleTabs.suppWarraTabs ul li a {
			        padding: 0 10px;
			    }
			}

			@media only screen and (max-width: 1151px) {
			    .circleTabs.suppWarraTabs ul li a {
			        font-size: 13px;

			    }
			}

			@media only screen and (max-width: 666px) {
			    .supportBox .rwdTable thead {
			        display: none;
			    }

			    .supportBox .rwdTable img {
			        vertical-align: text-bottom;
			    }

			    .supportBox .rwdTable tbody td {
			        display: block;
			        width: 96%;
			        padding: 5px 2%;
			    }

			    .supportBox .rwdTable tbody td.rwdTdFirst {
			        display: table-cell;
			        width: 20%;
			        background: url(/pub/media/wysiwyg/key3/db/products/case/comc31tgargb/images/faq_bg.png) repeat-x;
			    }

			    .supportBox .rwdTable tbody td.rwdTdFirst:before {
			        margin: 0;
			    }

			    .supportBox .rwdTable tbody td:before {
			        content: attr(data-title);
			        display: inline-block;
			        color: #ed6d00;
			        margin-right: 10px;
			    }
			}

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

			    .like-table .box .ti,
			    .proInfoBox .ti {
			        font-size: 20px;
			        line-height: 30px;
			        padding-top: 20px;
			    }

			    .proInfoBox .txt {
			        font-size: 15px;
			        line-height: 25px;
			        text-align: left;
			    }

			    .like-table .box .tiS {
			        font-size: 18px;
			    }

			    .supportBox .rwdTable tbody td {
			        font-size: 15px;
			        text-align: left;
			    }
			}

			/* 條狀圖 */
			.chartBarsWrap {

			    /*padding-left: 40px;*/
			    /*margin: 0 30px 0 20px;*/
			    /*margin: 0 30px 0;*/
			}

			.chartBars {
			    position: relative;
			    max-width: 600px;
			    height: 300px;
			    /*margin: 50px auto 100px;*/

			    float: left;
			    /*width:50%;*/
			    width: 100%;
			    margin: 0 auto;
			}

			.chartBars p {
			    /*padding:10px;*/
			    padding: 10px 0;
			    margin: 0;
			    font-size: 15px;
			    font-family: Roboto, 微軟正黑體;
			}

			.chartBars .bars {
			    display: flex;
			    justify-content: space-around;
			    border-left: 1px solid #bbb;
			    border-bottom: 1px solid #bbb;

			    height: 100px;
			    padding: 0;

			    /*margin: 0 10px;*/
			    margin: 0;
			}

			.chartBars .bars li {
			    display: inline-block;
			    /*flex: 0 1 24%;*/
			    height: 100%;
			    max-height: 45px;
			    margin: 0;
			    text-align: center;
			    position: relative;
			    font-size: 16px;

			    background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
			    background: -webkit-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
			    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
			    background-color: #FFF;
			}

			.chartBars .bars li .bar {
			    width: 100%;
			    background: #49E;
			    position: absolute;
			    font-size: 1.5em;
			    color: #fff;
			    padding-top: 18px;
			    bottom: 0;
			    height: 0;
			    overflow: hidden;
			    font-weight: bold;
			    outline: 2px solid transparent;
			    transition: 1.5s height cubic-bezier(0.6, 0.4, 0.4, 1.1);
			}

			.chartBars .bars li .bar:after {
			    content: '°C';
			    font-size: 22px !important;
			    vertical-align: top;
			    color: rgba(255, 255, 255, 0.8);
			    margin-right: -8px;
			}

			.chartBars .bars li b {
			    color: #eee;
			    width: 100%;
			    position: absolute;
			    bottom: -2em;
			    left: 0;
			    text-align: center;
			}

			.chartBars .numbers {
			    width: 50px;
			    height: 100%;
			    margin: 0;
			    padding: 0;
			    display: inline-block;
			    position: absolute;
			    left: -50px;
			}

			.chartBars .numbers li {
			    text-align: right;
			    padding-right: 1em;
			    list-style: none;
			    height: 59px;
			    position: relative;
			    font-size: 13px;
			    bottom: 11px;
			    right: -9px;
			    color: #eee;
			}

			.chartBars .numbers li:after {
			    content: "\00af";
			    position: relative;
			    right: -5px;
			    font-size: 20px;
			    top: 7px;
			    color: rgba(255, 255, 255, 0.34);
			}

			.chartBars .numbers li:first-of-type {
			    height: 63px;
			    margin-top: -1px;
			}

			.chartBarsWrap.chartBarsHorizontal {
			    flex-direction: column;
			    /*padding-left: 70px;*/

			    min-height: 150px;
			    /*margin-top: 50px;*/
			}

			.chartBarsWrap.chartBarsHorizontal .bars b {
			    /*color: #FFF;*/
			    color: #252525;
			    width: 100%;
			    position: absolute;
			    bottom: 0;
			    /*top: 1em;*/
			    /*left: -102%;*/
			    left: 1%;
			    text-align: left;

			    line-height: 45px;
			    font-size: 13px;
			    font-family: Roboto, 微軟正黑體;
			}

			.chartBarsWrap.chartBarsHorizontal .bars b.num {
			    right: 1%;
			    left: auto;
			    color: #555;
			    text-align: right;
			}

			.chartBarsWrap.chartBarsHorizontal .chartBars {
			    /*height: 200px;*/
			    height: auto;
			}

			.chartBarsWrap.chartBarsHorizontal .chartBars .bars {
			    border: 0;
			}

			.chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar {
			    width: 0;
			    /*padding-top: 10px;*/
			    padding-top: 0;
			    height: 100% !important;
			    text-align: right;
			    font-size: 13px;
			    font-family: Roboto, 微軟正黑體;
			    transition: 2s width cubic-bezier(0.6, 0.4, 0.4, 1.1);

			    line-height: 45px;
			    padding-left: 50px;
			    box-sizing: content-box;
			}

			.chartBarsWrap.chartBarsHorizontal .chartBars .bars .bar:after {
			    font-size: 0.6em !important;
			    margin-right: 20px;
			}

			.bars li .bar.greenBar {
			    background-color: #6B8E23;
			    background: radial-gradient(#99cb32, #6B8E23);
			}

			.bars li .bar.greenBarFlat {
			    background-color: #6B8E23;
			}

			.bars li .bar.blueBar {
			    background-color: #49E;
			    background: radial-gradient(#8abff4, #49E);
			}

			.bars li .bar.blueBarFlat {
			    background-color: #49E;
			}

			.bars li .bar.orangeBar {
			    background-color: orange;
			    background: radial-gradient(#ffc04d, #FFA500);
			}

			.bars li .bar.orangeBarFlat {
			    background-color: orange;
			}

			.bars li .bar.purpleBar {
			    background-color: #6e46af;
			    background: radial-gradient(#9778c9, #6e46af);
			}

			.bars li .bar.purpleBarFlat {
			    background-color: #6e46af;
			}

			.chartBarsHorizontal .chartBars .bars {
			    flex-direction: column;
			}

			@media only screen and (max-width: 1023px) {
			    .chartBars {
			        float: none;
			        width: 100%;
			        max-width: none;
			    }
			}

			@media screen and (min-width: 600px) {
			    .bar:before {
			        font-size: 2em !important;
			    }

			    .chartBars3 .bar:before {
			        font-size: 1.5em !important;
			    }
			}


			/* product css start */

			.fullBgBox2.bigPic {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/db/products/cooler/coolant_p1000/bg_1_y.jpg);
			    background-repeat: no-repeat;
			    background-position: center left;
			    /*background-size:100%;*/
			    background-size: cover;
			}

			.fullBgBox2.bigPic2 {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/db/products/cooler/floe_dx_rgb_tt/bg_2.jpg);
			    background-repeat: no-repeat;
			    background-position: center;
			    background-size: cover;
			}

			.fullBgBox2.greyGrad {
			    background: -moz-linear-gradient(top, #f1f1f1 0%, #e4e4e4 100%);
			    background: -webkit-linear-gradient(top, #f1f1f1 0%, #e4e4e4 100%);
			    background: linear-gradient(to bottom, #f1f1f1 0%, #e4e4e4 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1', endColorstr='#e4e4e4', GradientType=0);
			}

			.fullBgBox2.blackGrad {
			    background: -moz-linear-gradient(top, #505050 0%, #202020 100%);
			    background: -webkit-linear-gradient(top, #505050 0%, #202020 100%);
			    background: linear-gradient(to bottom, #505050 0%, #202020 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#505050', endColorstr='#202020', GradientType=0);
			}

			.fullBgBox2.bigPic3 {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/db/products/cooler/floe_dx_rgb_tt/bg_3.jpg);
			    background-repeat: no-repeat;
			    background-position: center right;
			}

			.fullBgBox2.bigPic4 {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/db/products/cooler/floe_dx_rgb_tt/bg_5.png);
			    background-repeat: no-repeat;
			    background-position: center left;
			    /*background-size:100%;*/
			}

			.fullBgBox2 .bigPic5 {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/db/products/cooler/floe_dx_rgb_tt/bg_4.jpg);
			    background-repeat: no-repeat;
			    background-position: center right;
			    background-color: #000;
			    /*background-size:100%;*/
			}

			.fullBgBox2 .bigPic6 {
			    background-image: url(https://thermaltake.azureedge.net/pub/media/wysiwyg/key3/db/products/cooler/floe_dx_rgb_tt/bg_6.jpg);
			    background-repeat: no-repeat;
			    background-position: center right;
			    background-color: #000;
			    /*background-size:100%;*/
			}

			.fullBgBox2 .bigPic5 .proInfoBox .ti,
			.fullBgBox2 .bigPic6 .proInfoBox .ti {
			    color: #FFF;
			}

			.fullBgBox2 .bigPic5 .proInfoBox .txt,
			.fullBgBox2 .bigPic6 .proInfoBox .txt {
			    color: #ccc;
			}

			@media only screen and (max-width: 1920px) {
			    .fullBgBox2.bigPic .box {
			        /*background-color:rgba(0,0,0,.7);*/
			        padding: 10px;
			    }

			    .fullBgBox2.bigPic2 .box {
			        background-color: rgba(0, 0, 0, .7);
			        padding: 10px;
			    }

			    .fullBgBox2.bigPic2 .proInfoBox .ti {
			        /*color:#FFF;*/
			    }

			    .fullBgBox2.bigPic2 .proInfoBox .txt {
			        color: #ccc;
			    }

			    .fullBgBox2.bigPic4 .box,
			    .fullBgBox2 .bigPic5 .box,
			    .fullBgBox2 .bigPic6 .box {
			        background-color: rgba(0, 0, 0, .7);
			        padding: 10px;
			    }

			    /*.noteTxtBox {
		color:#FFF;
	}*/
			    .fullBgBox2.bigPic4 .proInfoBox .ti,
			    .fullBgBox2 .bigPic5 .proInfoBox .ti,
			    .fullBgBox2 .bigPic6 .proInfoBox .ti {
			        color: #FFF;
			    }

			    .fullBgBox2.bigPic4 .proInfoBox .txt,
			    .fullBgBox2 .bigPic5 .proInfoBox .txt,
			    .fullBgBox2 .bigPic6 .proInfoBox .txt {
			        color: #ccc;
			    }
			}

			@media only screen and (max-width: 1680px) {
			    .fullBgBox2.bigPic .like-table {
			        height: 700px !important;
			    }
			}

			@media only screen and (max-width: 1280px) {
			    .fullBgBox2.bigPic .like-table {
			        height: 500px !important;
			    }
			}

			@media only screen and (max-width: 1023px) {
			    .fullBgBox2 {
			        padding-top: 70px;
			    }

			    .fullBgBox2.bigPic .like-table {
			        height: auto !important;
			    }

			    .fullBgBox2.bigPic {
			        /*padding-bottom: 700px;*/
			        padding-bottom: 70%;
			        background-size: 180%;
			        background-position: bottom left;
			    }

			    .fullBgBox2.bigPic2 .box {
			        background-color: transparent;
			    }

			    .fullBgBox2.bigPic2 .proInfoBox .ti {
			        color: #202020;
			    }

			    .fullBgBox2.bigPic2 .proInfoBox .txt {
			        color: #555;
			    }

			    .fullBgBox2.bigPic2 {
			        /*padding-bottom: 800px;*/
			        /*padding-bottom: 85%;
		background-size: 170%;*/
			        padding-top: 0;
			        background-position: bottom left;
			    }


			    .fullBgBox2.bigPic3 {
			        /*background-image:none;*/
			        background-position: bottom left;
			    }

			    .fullBgBox2 .bigPic3 .img {
			        padding: 0 6%;
			        width: 88%;
			    }

			    .fullBgBox2.bigPic3 {
			        /*padding-bottom: 17% !important;*/
			        background-position: bottom right 5% !important;
			    }

			    .fullBgBox2.bigPic3,
			    .fullBgBox2.bigPic4,
			    .fullBgBox2 .bigPic5,
			    .fullBgBox2 .bigPic6 {
			        /*padding-bottom: 800px;*/
			        padding-bottom: 95%;
			        background-size: 190%;
			        background-position: bottom left;
			    }

			    .fullBgBox2.bigPic4 {
			        background-size: 175%;
			    }

			    .fullBgBox2 .bigPic5 {
			        background-position: bottom right;
			        background-color: transparent;
			        padding-bottom: 110%;
			        background-size: 220%;
			    }

			    .fullBgBox2 .bigPic6 {
			        background-position: bottom right;
			    }

			    .fullBgBox2.bigPic3 .box,
			    .fullBgBox2.bigPic4 .box,
			    .fullBgBox2 .bigPic5 .box {
			        background-color: transparent;
			    }

			    .fullBgBox2.bigPic3 .box .ti,
			    .fullBgBox2.bigPic4 .proInfoBox .ti,
			    .fullBgBox2 .bigPic5 .proInfoBox .ti {
			        color: #202020;
			    }

			    .fullBgBox2.bigPic3 .box .txt,
			    .fullBgBox2.bigPic4 .proInfoBox .txt,
			    .fullBgBox2 .bigPic5 .proInfoBox .txt {
			        color: #555;
			    }

			    .noteTxtBox {
			        color: #555;
			    }

			    .like-table.w50P {
			        width: 100% !important;
			    }
			}

			.fullBgBox2.bigPic3 .img img {
			    /*animation: 2000ms filterItem infinite ease-in-out;*/
			}

			@keyframes filterItem {
			    from {
			        transform: translate(0, 0px);
			    }

			    65% {
			        transform: translate(0, 5px);
			    }

			    to {
			        transform: translate(0, -0px);
			    }
			}

			.iconThreBox {
			    position: relative;
			    width: 100%;
			    padding: 0 5%;
			    overflow: hidden;
			}

			.iconThreBox .absInfo {
			    float: left;
			    width: 33.333%;
			    /*padding:30px;*/
			    box-sizing: content-box;
			    /*overflow:hidden;*/
			    /*text-shadow: 0 2px 9px rgba(0,0,0,.7);*/
			}

			.iconThreBox .absInfo .img {
			    width: 80%;
			    max-width: 220px;
			    margin: 0 auto;
			    padding: 5%;
			}

			.iconThreBox p {
			    padding: 0;
			    margin: 0 10% 5px;
			    font-family: Roboto, 微軟正黑體;
			    font-size: 18px;
			    color: #FFF;
			}

			.iconThreBox span {
			    font-size: 15px;
			    margin: 0 10%;
			    display: block;
			    font-family: Roboto, 微軟正黑體;
			    color: #bbb;
			}

			@media only screen and (max-width: 1023px) {
			    .iconThreBox {
			        width: 90%;
			        margin: 0 auto;
			    }

			    .iconThreBox .absInfo {
			        position: inherit;
			        width: 100%;
			        padding: 20px 0;
			        overflow: hidden;
			        /*text-shadow: 0 2px 9px rgba(0,0,0,.7);*/
			    }

			    .absTxtBox .absInfo .line {
			        display: none;
			    }
			}

			@media only screen and (max-width: 1900px) {
			    .fullBgBox2 .bigPic3 {
			        background-position: top left 30%;
			    }
			}

			.videoBox {
			    position: relative;
			    width: 100%;
			    height: 800px;
			    overflow: hidden;
			    -webkit-animation: load 1.5s 0.8s ease-out forwards;
			    animation: load 1.5s 0.8s ease-out forwards;
			}

			.fullBgBox2.videoBox {
			    height: 1000px;
			}

			.videoBox #video {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    min-width: 100%;
			    min-height: 100%;
			    width: auto;
			    height: auto;
			    /* z-index: -1000; */
			    z-index: 0;
			    overflow: hidden;
			    -webkit-transform: translate(-50%, -50%) scale(1.05);
			    transform: translate(-50%, -50%) scale(1.05);
			    max-width: none;
			}

			.fullBgBox2.videoBox #video {
			    top: 60%;
			}

			@media only screen and (max-width: 2030px) {
			    .fullBgBox2.videoBox #video {
			        top: 50%;
			    }
			}

			.dlBtn {
			    /*display:inline-block !important;*/
			    display: block;
			    float: left;
			    font-family: Roboto, 微軟正黑體;
			    padding: 10px 30px;
			    font-size: 12px !important;
			    font-weight: 300;
			    font-size: 1em;
			    letter-spacing: 0.12em;
			    background: #000;
			    color: #fff;
			    /*margin:10px 0 0 0;*/
			    margin: 5px 5px 0 0;
			    text-decoration: none;
			    transition: all 200ms ease;
			    -webkit-transition: all 200ms ease;
			    line-height: normal;
			}

			.table-center {
			    display: table;
			    width: 100%;
			    position: relative;
			    height: 100%;
			    z-index: 1;
			    /*background-color: rgba(255, 255, 255, .1);*/
			    background-color: transparent;
			}

			.table-center>div {
			    display: table-cell;
			    vertical-align: middle;
			    position: relative;
			    text-align: center;
			}

			.table-center>div h1 {
			    font-size: 40px;
			    font-weight: 400;
			    font-family: Roboto;
			    letter-spacing: 4px;
			    color: #FFF;
			    font-family: Roboto, 微軟正黑體;
			    text-shadow: 0 2px 9px rgba(0, 0, 0, .7);
			}

			.table-center>div p {
			    padding: 0;
			    margin: 0 auto;
			    font-size: 18px;
			    line-height: 28px;
			    max-width: 1024px;
			    color: #FFF;
			    padding: 0 8%;
			    font-family: Roboto, 微軟正黑體;
			    text-shadow: 0 2px 9px rgba(0, 0, 0, .7);
			    box-sizing: content-box;
			}

			.appLinkBox {
			    width: 100%;
			    padding: 10px 0 0;
			}

			.appLinkBox a {
			    text-decoration: none;
			    display: inline-block;
			}

			.appLinkBox a img {
			    display: block;
			}

			.fullBgBox2.inBlock .txtBox {
			    float: none;
			    display: inline-block;
			    vertical-align: middle;
			}

			.fullBgBox2.inBlock .img {
			    float: none;
			    display: inline-block;
			    width: 49%;
			    vertical-align: middle;
			}

			@media only screen and (max-width: 1023px) {
			    .fullBgBox2.inBlock .img {
			        width: 90%;
			        display: block;
			        margin: 0 auto;
			    }
			}

			.fullBgBox2.bigPic3 .img {
			    display: inline-block;
			    /*height: calc(100% - 12em);*/
			    position: absolute;
			    height: calc(100% - 20em);
			    top: calc(50% - 15em);
			    /*top: calc(50% + 10em);*/
			    /*transform: translateX(-50%) translateY(-50%) scale(0.8);*/
			    box-sizing: content-box !important;
			}

			.fullBgBox2.bigPic3 .img .moveImgBox {
			    position: relative;
			    height: 100%;
			    box-sizing: content-box !important;
			}

			.fullBgBox2.bigPic3 .img img {
			    position: absolute;
			    left: 0;
			    top: 0;
			    width: 90%;
			    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
			    filter: alpha(opacity=0);
			    opacity: 0;
			    -webkit-transition: all 0.8s ease 0s;
			    -moz-transition: all 0.8s ease 0s;
			    transition: all 0.8s ease 0s;
			    /*-webkit-transform: translateY(75%);
  transform: translateY(75%);*/

			    -webkit-transform: translateX(0) translateY(0);
			    transform: translateX(0) translateY(0);
			}

			.fullBgBox2.bigPic3 .img img.imgDisappear {

			    -webkit-transition: all 0.8s ease 0s;
			    -moz-transition: all 0.8s ease 0s;
			    transition: all 0.8s ease 0s;

			    -webkit-transform: translateX(-10%) translateY(10%);
			    transform: translateX(-10%) translateY(10%);

			    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
			    filter: alpha(opacity=100);
			    opacity: 1;
			}

			.fullBgBox2.bigPic3 .img img.saftW.imgDisappear {
			    -webkit-transition-delay: 0.5s;
			    transition-delay: 0.5s;
			    -webkit-transform: translateX(30%) translateY(-30%);
			    transform: translateX(30%) translateY(-30%);
			}

			@media only screen and (max-width: 1023px) {
			    .fullBgBox2.bigPic3 .img img {
			        width: 80%;
			    }

			    .fullBgBox2.bigPic3 .img {
			        top: auto;
			        left: 6%;
			        bottom: -75%;
			    }
			}

			/* 內頁的燈光效果切換TABS */

			.mainTab {
			    width: 100%;
			    padding: 0;
			    margin: 0;
			    font-size: 15px;
			    font-family: 'Roboto', sans-serif, '微軟正黑體', Microsoft JhengHei, Verdana, PMingLiU;
			    color: #555555;
			    background-color: #1b1b1b;
			    background-repeat: repeat;
			    box-sizing: initial !important;
			}

			.clearer {
			    clear: both;
			    height: 0;
			    line-height: 0;
			    font-size: 0;
			}

			.tab {
			    /*padding-top: 50px;*/
			    margin-bottom: 20px;
			    /*position: relative;*/
			    overflow: hidden;
			    margin: 0 auto;
			    font-family: 'Roboto', sans-serif;
			    /*line-height: 1.5;*/
			    /*font-weight: 300;*/
			    color: #888;
			    -webkit-font-smoothing: antialiased;
			}

			.tabs {
			    display: table;
			    position: relative;
			    overflow: hidden;
			    margin: 0;
			    width: 100%;
			}

			.tabs li {
			    line-height: 38px;
			    overflow: hidden;
			    padding: 0;
			    position: relative;
			}

			.tabs a {
			    /*font-family:'Roboto', sans-serif, '微軟正黑體', Microsoft JhengHei,Verdana, PMingLiU;*/
			    color: #FFF;
			    display: block;
			    letter-spacing: 0;
			    outline: none;
			    text-decoration: none;
			    display: table-cell;
			    /*height: 60px;*/

			    width: 15px;
			    height: 15px;
			    line-height: 15px;
			    text-indent: -999px;

			    vertical-align: middle;
			}

			.big.tab_content .txt {
			    color: #FFF;
			    position: absolute;
			    left: 5%;
			    bottom: 5%;
			    font-size: 18px;
			    font-family: Roboto, 微軟正黑體;
			}

			.tabs_item {
			    display: none;
			    padding: 30px 0;
			}

			.tabs_item .pic {
			    /*position: relative;*/
			    width: 100%;
			    max-width: 900px;
			    margin: 0 auto;
			}

			.tabs_item .txt {
			    text-align: center;
			}

			.tabs_item:first-child {
			    display: block;
			}

			.commArgbBtnWrap .small ul li.current {
			    background: -moz-linear-gradient(top, #e8538d 0%, #971b6f 100%);
			    background: -webkit-linear-gradient(top, #e8538d 0%, #971b6f 100%);
			    background: linear-gradient(to bottom, #e8538d 0%, #971b6f 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8538d', endColorstr='#971b6f', GradientType=0);
			}

			.current a {
			    color: #FFF;
			    cursor: pointer;
			}

			.lightEffectMask {
			    position: absolute;
			    top: 0;
			    left: 0;
			    z-index: 1;
			    width: 100%;
			    /*background: url(/pub/media/wysiwyg/key3/db/products/case/comc31tgargb/images/light_effect/light_effect_mask_c31.png) center no-repeat;*/
			}

			.commArgbBtnWrap .big {
			    width: 95%;
			    margin: 0 auto;
			}

			.commArgbBtnWrap .big img {
			    display: block;
			    overflow: hidden;
			    width: 100%;
			}

			.commArgbBtnWrap .small {
			    margin: 0 auto;
			    padding: 0 10px;
			    width: 100%;
			}

			.commArgbBtnWrap .small ul {
			    list-style: none;
			    padding: 0;
			    margin: 0;
			}

			.commArgbBtnWrap .small ul li {
			    text-align: center;
			    display: inline-block;
			    font-size: 13px;
			    width: 23%;
			    margin: 2%;
			    line-height: 20px;
			    background: #666;
			    /*background: linear-gradient(to bottom, #1b1b1b 0%, #333 100%);
		background: -moz-linear-gradient(top, #1b1b1b 0%, #333 100%);
		background: -webkit-linear-gradient(top, #1b1b1b 0%, #333 100%) filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b1b1b', endColorstr='#333', GradientType=0);*/
			    width: 15px;
			    height: 15px;
			    font-size: 15px;
			    line-height: 20px;
			    text-align: center;
			    color: #FFF;
			    border-radius: 100px;
			    -moz-border-radius: 100px;
			    -webkit-border-radius: 100px;
			    -o-border-radius: 100px;

			    cursor: pointer;
			}

			.commArgbBtnWrap .small ul li:hover {
			    background: -moz-linear-gradient(top, #e8538d 0%, #971b6f 100%);
			    background: -webkit-linear-gradient(top, #e8538d 0%, #971b6f 100%);
			    background: linear-gradient(to bottom, #e8538d 0%, #971b6f 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8538d', endColorstr='#971b6f', GradientType=0);
			}

			.commArgbBtnWrap .small ul li img {
			    width: 70px;
			    display: block;
			    text-align: center;
			    margin: 0 auto;
			    vertical-align: middle;
			}

			/* 內頁的燈光效果切換TABS END */

			.explodeViewWrap {
			    position: relative;
			    width: 100%;
			    max-width: 1400px;
			    margin: 0 auto;
			    display: inline-block;
			    /*height: calc(100% - 12em);*/
			    /*position: absolute;*/
			    /*top: calc(50% + 10em);*/
			    min-height: 500px;
			    transform: translateX(25%) translateY(0);
			    box-sizing: content-box !important;

			}

			.explodeViewBox {
			    position: relative;
			    height: 100%;
			}

			.explodeViewBox img {
			    position: absolute;
			    top: 0;
			    left: 0;
			    max-width: 500px;

			    -webkit-transition: all 0.8s ease 0s;
			    -moz-transition: all 0.8s ease 0s;
			    transition: all 0.8s ease 0s;
			    transform: translateX(0) translateY(5%);
			}

			.explodeViewBox img.imgExplode {
			    -webkit-transition-delay: 0.5s;
			    transition-delay: 0.5s;
			}

			.explodeViewBox img.p1.imgExplode {
			    transform: translateX(100%) translateY(1%);
			}

			.explodeViewBox img.p2.imgExplode {
			    transform: translateX(75%) translateY(2%);
			}

			.explodeViewBox img.p3.imgExplode {
			    transform: translateX(50%) translateY(3%);
			}

			.explodeViewBox img.p4.imgExplode {
			    transform: translateX(30%) translateY(4%);
			}

			.explodeViewBox img.p5.imgExplode {
			    transform: translateX(0) translateY(5%);
			}

			.explodeViewBox img.p6.imgExplode {
			    transform: translateX(-25%) translateY(6%);
			}

			.explodeViewBox img.p7.imgExplode {
			    transform: translateX(-45%) translateY(7%);
			}

			.explodeViewBox img.p8.imgExplode {
			    transform: translateX(-60%) translateY(8%);
			}

			.explodeViewBox img.p9.imgExplode {
			    transform: translateX(-90%) translateY(10%);
			}

			@media only screen and (max-width: 1360px) {
			    .explodeViewWrap {
			        transform: translateX(18%) translateY(0) scale(0.8);
			    }
			}

			@media only screen and (max-width: 1100px) {
			    .explodeViewWrap {
			        transform: translateX(12%) translateY(0) scale(0.7);
			        min-height: 300px;
			    }
			}

			@media only screen and (max-width: 920px) {
			    .explodeViewWrap {
			        transform: translateX(8%) translateY(0) scale(0.6);
			    }
			}

			@media only screen and (max-width: 780px) {
			    .explodeViewWrap {
			        transform: translateX(3%) translateY(0) scale(0.5);
			    }
			}

			@media only screen and (max-width: 660px) {
			    .explodeViewWrap {
			        transform: translateX(-6%) translateY(0) scale(0.3);
			        min-height: 200px;
			    }
			}

			@media only screen and (max-width: 414px) {
			    .explodeViewWrap {
			        transform: translateX(-10%) translateY(0) scale(0.2);
			    }
			}