@charset "utf-8";
/* CSS Document */
html { background-color:#AAA; }
body { font-family: 'Open Sans', sans-serif; font-size:16px; margin-top:126px; }
#overlay, #overlay2 { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:.75; z-index:9; display:none; }
#overlay2 { opacity:1; background-color:#EDEDEB; overflow:auto; position:fixed; }
#overlay2 .content { overflow:hidden; width:94%; margin:0 auto; }
#overlay2 .logo { background-image:url(../images/adjust-icon.png); padding-top:90px; font-weight:100; letter-spacing:2px; margin-bottom:40px; background-position:center top; text-align:center; background-repeat:no-repeat; font-size:24px; line-height:40px; margin:10px 0;}
#overlay2 .left, #overlay2 .right, #overlay2 .center { width:100%; }
#overlay2 .left .new-img { width:70%; margin:0 auto; }
#overlay2 .left .new-img img { width:100%; height:auto; }
#overlay2 table { width:100%; margin-top:30px; }
#overlay2 table tr td.img { width:110px; text-align:center; vertical-align:text-top; }
#overlay2 table tr td.text {vertical-align:top; } 
#overlay2 table tr td h3 { font-weight:bold; padding-bottom:5px; }
#overlay2 table tr td { padding:10px 0; }
#overlay2 .a-close-btn { position:absolute; top:5px; right:5px; background:url(images/close2.jpg) left top no-repeat; width:28px; height:28px; cursor:pointer; }


#main { min-width:320px; max-width:1500px; margin:0 auto; background-color:#FFF; overflow:hidden; }
#main #header { width:100%; position:fixed; top:0; left:0; z-index:9;  }
#main #header .header { background-color:#FFF; min-width:320px; max-width:1500px; margin:0 auto; position:relative; }
#main #header .header.deskop { height:126px; }
#main #header .header.mobile { overflow:hidden; }
#main #header .logo { background-image:url(../images/ring-logo2.png); background-position:1.5% 50%; background-repeat:no-repeat; background-size:auto 80%; width:100%; height:100%; float:left; }
#main #header .header.mobile .logo { width:185px; height:55px; padding:5px 0; }
#main #header .menu { position:relative; width:100%; height:100%; }
#main #header .menu ul { overflow:hidden; zoom:1; font-size:14px;  position:absolute; z-index:2; right:15px; bottom:30px; }
#main #header .menu ul li { float:left; margin-right:22px; }
#main #header .menu ul li a, #menu ul li a { text-decoration:none; color:#999; cursor:pointer; font-weight:500; }
#main #header .menu ul li a:hover, #menu ul li a:hover { color:#27557a; }
#main #header .menu .magnifier { float:right; }
#jssor_1 .btn { font-size:18px; position:absolute; left:6%; bottom:25%; }
#jssor_1 .btn a { color:#FFF; background-image:url(../images/play.png); background-position:5% center; background-repeat:no-repeat; background-color:#00A19C; background-size:auto 60%; display:block; padding:15px 30px 10px 60px; text-decoration:none; border-top-left-radius:33px; border-top-right-radius:33px; border-bottom-right-radius:33px; border-bottom-left-radius:33px; height:26px; cursor:pointer; }

#jssor_2 .btn { font-size:18px; position:absolute; left:6%; bottom:25%; }
#jssor_2 .btn a { color:#FFF; background-image:url(../images/play.png); background-position:5% center; background-repeat:no-repeat; background-color:#00A19C; background-size:auto 60%; display:block; padding:15px 30px 10px 60px; text-decoration:none; border-top-left-radius:33px; border-top-right-radius:33px; border-bottom-right-radius:33px; border-bottom-left-radius:33px; height:26px; cursor:pointer; }

#main .con { width:100%; overflow:hidden; }
#main .con p { margin:30px 0; line-height:28px; }
#main .con ul { list-style:disc; margin-left:10px; }
#main .con ul li { margin-left:10px; padding:6px 0; }
#main .con.con1 { background-color:#27557a; }
#main .con .logo { background-position:center top; text-align:center; background-repeat:no-repeat; font-size:24px; line-height:40px; margin:10px 0; }
#main .con .content { padding:40px 50px 40px; }
#main .con h2 { font-size:26px; line-height:32px; text-align:center; margin:20px 0; font-weight:100; }

#main .con.con1 .content { padding:3% 4% 8% 4%; }
#main .con.con1 .logo { background-image:url(../images/icon-story.png); color:#FFF; padding-top:70px; margin:10px 0 55px 0; letter-spacing:6px; margin-top:50px; }
#main .con.con1 .video { width:100%; position:relative; }
#main .con.con1 .video img { width:100%; height:auto; position:absolute; top:0; left:0; cursor:pointer; z-index:1; }
#main .con.con2 .left, #main .con.con2 .right { width:50%; }
#main .con.con2 .left { float:left; background-color:#34a4a2; }
#main .con.con2 .left .logo { background-image:url(../images/bell-icon.png); padding-top:90px; }
#main .con.con2 .left .graph { width:100%; }
#main .con.con2 .left .graph img { width:100%; height:auto; }
#main .con.con2 .right { float:right; background-color:#e7eec3; }
#main .con.con2 .right .logo { background-image:url(../images/cloudmoon-icon.png); padding-top:90px; }
#main .con.con2 h2 { letter-spacing:4px; font-size:25px; line-height:38px; }
#main .con.con3 { background-color:#DDD; padding-bottom:6%; }
#main .con.con3 .logo { background-image:url(../images/adjust-icon.png); padding-top:90px; font-weight:100; letter-spacing:2px; margin-bottom:40px; }
#main .con.con3 .left { float:left; width:20%; position:relative; }
#main .con.con3 .center { float:left; width:60%; position:relative; }
#main .con.con3 .center .img { width:90%; visibility:hidden; }
#main .con.con3 .center .img img { width:100%; height:auto; }
#main .con.con3 .center .new-img { width:80%; position:absolute; left:10%; top:50%; }
#main .con.con3 .center .new-img img { width:100%; height:auto; }
#main .con.con3 .center .ringAll { position:absolute; bottom:0; left:0; }
#main .con.con3 .center .ringAll img { width:100%; height:auto; }
#main .con.con3 .right { float:right; width:20%; position:relative; }
#main .con.con3 .box { margin-bottom:10%; margin-top:10%; width:100%; position:absolute; left:0; }
#main .con.con3 .box.top { top:0; }
#main .con.con3 .box.middle { top:50%; }
#main .con.con3 .box.bottom { bottom:0; }
#main .con.con3 .img { margin-bottom:10px; }
#main .con.con3 h3 { font-weight:bold; margin-bottom:10px; font-size:14px; }
#main .con.con3 p { line-height:21px; font-size:14px; margin:15px 0; }
#main .con.con3 .photo { width:60%; margin:0 auto; }
#main .con.con3 .photo img { width:100%; height:auto; }

#main .con.con4 { background-color:#34a4a2; }
#main .con.con4 .logo { background-image:url(../images/safety-icon.png); padding-top:90px; color:#FFF; margin-bottom:30px; font-size:28px; }
#main .con.con4 .roll { position:relative; }
#main .con.con4 .box { width:100%; overflow:hidden; position:absolute; top:0; left:0; }
#main .con.con4 .box1 .left { float:left; width:40%; }
#main .con.con4 .box1 .left img { margin-bottom:20px; }
#main .con.con4 .box1 .left p { font-size:24px; color:#333; padding-right:20px; margin-top:10px; }
#main .con.con4 .box1 .right { float:right; width:60%; }
#main .con.con4 .box1 .right img { width:100%; height:auto; }
#main .con.con4 .box2 .left { float:left; margin-right:10%; width:26.6%; }
#main .con.con4 .box2 .right { float:right; width:26.6%; }
#main .con.con4 .box2 .photo { text-align:center; margin-top:20px; }
#main .con.con4 .title { font-size:42px; font-weight:100; text-align:center; color:#FFF; margin-top:40px; }
#main .con.con4 .box2 p, #main .con.con4 .mobile  p { text-align:center; color:#FFF; margin:5px 0; line-height:18px; }
#main .con.con4 .roll .nav { position:absolute; bottom:0px; left:50%; margin-left:-24px; overflow:hidden; zoom:1; }
#main .con.con4 .roll .nav div { cursor:pointer; border:#FFF 2px solid; border-radius:50%; width:10px; height:10px; margin-right:10px; float:left; }
#main .con.con4 .roll .nav div.active { background-color:#27557a; }
#main .con.con4 .mobile .img, #main .con.con4 .mobile .photo { text-align:center; }
#main .con.con4 .mobile .img img, #main .con.con4 .mobile .photo img { width:85px; }
#main .con.con4 .mobile .photo { margin-top:5%; }
#main .con.con4 .mobile .full-img { width:100%; }
#main .con.con4 .mobile .full-img img { width:100%; height:auto; }
#main .con.con4 .mobile .title { margin-top:0px; }


#main .con.con5 { background-color:#27557a; }
#main .con.con5 .logo { color:#FFF; background-image:url(../images/media-icon.png); padding-top:100px; font-size:28px; margin-bottom:60px; }
#main .con.con5 .scroll-box { position:relative; margin-top:30px; height:426px; padding-bottom:30px; }
#main .con.con5 .box {  overflow:hidden; width:100%; position:absolute; top:0; left:0; display:none; }

#main .con.con5 .left { float:left; width:48%; }
#main .con.con5 .left a { cursor:pointer; }
#main .con.con5 .right { float:right; width:48%; }
#main .con.con5 .right.aa { float:none; margin:0 auto; }
#main .con.con5 .right a { text-decoration:none; display:block; }
#main .con.con5 .right .play-box-text { background:url(../images/play-btn2.png) #3f5364 95% center no-repeat; padding-right:14%; border:#FFFFFF 1px solid; border-radius:40px; color:#FFF; padding-top:15px; padding-bottom:15px; padding-left:5%; line-height:30px; font-size:20px; font-weight:100; margin-top:20%; cursor:pointer; }
#main .con.con5 .left img, #main .con.con5 .right img { width:100%; height:auto; }
#main .con.con5 .scroll-box .nav { position:absolute; bottom:0px; left:50%; margin-left:-24px; overflow:hidden; zoom:1; }
#main .con.con5 .scroll-box .nav div { cursor:pointer; border:#FFF 2px solid; border-radius:50%; width:10px; height:10px; margin-right:10px; float:left; }
#main .con.con5 .scroll-box .nav div.active { background-color:#34a4a2; }

#main .con.con6 { background-color:#34a4a2; }
#main .con.con6 .logo { background-image:url(../images/spec-icon.png); padding-top:80px; margin-bottom:70px; font-size:28px; letter-spacing:4px; }
#main .con.con6 table { width:60%; margin:0 auto; }
#main .con.con6 table td { vertical-align:middle; }
#main .con.con6 table .left { text-align:right; width:40%; }
#main .con.con6 table .center {width:20%; background:url(../images/line.gif) center center repeat-y; }
#main .con.con6 table .right { text-align:left; width:40%; }
#main .con.con6 table .bold { font-weight:bold; }
#main .con.con6 table .center .img { border:#FFF 1px solid; border-radius:50%; width:60px; height:60px; margin:0 auto; background-color:#34a4a2; background-position:center; background-repeat:no-repeat; }
#main .con.con6 table .center .img-com { width:20px; height:20px; }
#main .con.con6 table .center .img1 { background-image:url(../images/freq-icon.png); }
#main .con.con6 table .center .img2 { background-image:url(../images/dimension-icon.png); }
#main .con.con6 table .center .img3 { background-image:url(../images/power-icon.png); }
#main .con.con6 table .center .img4 { background-image:url(../images/temp-icon.png); }
#main .con.con6 table .center .img5 { background-image:url(../images/humid-icon.png); }
#main .con.con6 table .center .img6 { background-image:url(../images/led-icon.png); }
#main .con.con6 table .center .img7 { background-image:url(../images/alarm-icon.png); }

#header .header.mobile { position:relative; }
#header .header.mobile ul.menu-btn { height:100%; float:right; overflow:hidden; margin-right:1%; }
#header .header.mobile ul.menu-btn li { float:left; }
#header .header.mobile ul.menu-btn li.email-b { margin-top:10px;  width:60px; }
#header .header.mobile ul.menu-btn li.adjust { margin-top:10px;  width:45px; }
#header .header.mobile ul.menu-btn li img { width:100%; height:auto; }

#footer { background-color:#333333; width:100%; overflow:hidden; color:#FFF; }
#footer .footer { padding:50px; }
#footer .footer a { color:#FFF; text-decoration:none; }
#footer .footer a:hover { color:#CCC; }
#footer .footer .left { float:left; }
#footer .footer .right { float:right; }

#threesixty .btn, .video .btn { background:url(images/close.png) left top no-repeat; width:36px; height:36px; position:absolute; right:-18px; top:-18px; cursor:pointer; z-index:10; }

#video1, #video3 { position:fixed; width:960px; height:640px; top:50%; left:50%; margin-left:-480px; margin-top:-320px; z-index:10; display:none; }

.mwt_border{
	background:#fff;
	position:absolute;
	border: solid 3px #999;
	margin:30px;
	padding:30px;
	border-radius:8px;
	letter-spacing:2px;
	line-height:20px;
	font-size:14px;
	width:400px;
	top:100px;
	right:-20px;
	display:none;
}
/*箭頭上*/
.mwt_border .arrow_t_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent #999 transparent ;
	position:absolute;
	top:-30px;
	right:45px;
}
/*箭頭上-邊框*/
.mwt_border .arrow_t_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent #fff transparent ;
	position:absolute;
	top:-26px;
	right:45px;
}

.panel {
    position: fixed;
    left: -15.625em; /*left or right and the width of your navigation panel*/
    width: 15.625em; /*should match the above value*/
}

.wrap {
    position: relative;
}

.menu-link { float:right; display:block; height:56px; cursor:pointer; margin-right:0.5% }

.menu-link img { height:80%; margin-top:10%; margin-right:5%; }

#menu ul { margin-top:100px; margin-left:20px; }
#menu ul li { padding:10px 0; }

#contact-box { position:fixed; width:300px; top:80px; right:2%; border:#333 3px solid;border-radius:5px; background-color:#FFF; display:none; }
#contact-box .contact { padding:10px; line-height:20px; }

.deskop { display:block; }
.mobile { display:none; }

.hidemobile2{display: tr;}
.readmore_con{
	position: relative;
	width: 100%;
}
.readmore{
	position: relative;
	margin:0 auto;
	display: block;
	width: 35%;
}
.readmore img{
	width: 100%;
}
.mobile_img{display: none;}
#main .con.con6 .logo, #main .con.con6 table { color:#FFF; }
#main .con.con5.mobile .content h2 { color:#FFF; font-size:28px; letter-spacing:4px }
#main .con.con5.mobile .content p { padding-top:20px; margin-bottom:0; color:#FFF; text-align:center; font-size:22px; }

#clickstartlogo { position:fixed; left:50%; top:50%; margin-left:-175px; margin-top:-171px; width:350px; z-index:10; }
#clickstartlogo.animate { animation-name: movelogo; animation-duration:.5s; animation-timing-function: ease-in-out; left:100%; top:100%; margin-left:-150px; margin-top:-150px; width:150px; }
#clickstartlogo img { width:100%; height:auto; }

#clickstartbg { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; opacity:0.6; z-index:10; }
#clickstartbg.animate { visibility:hidden; opacity:0; transition:visibility 0s .5s, opacity .5s ease-in-out;}

@keyframes movelogo {
  from { left:50%; top:50%; margin-left:-175px; margin-top:-171px; width:350px; }
  to {	left:100%; top:100%; margin-left:-150px; margin-top:-150px; width:150px; }
}

@keyframes movelogo500 {
  from { left:50%; top:50%; margin-left:-175px; margin-top:-171px; width:350px; }
  to {	left:100%; top:100%; margin-left:-80px; margin-top:-80px; width:80px; }
}


@media only screen and (max-width: 1100px) {
	.mobile_img{width: 100%;}
	.hidemobile2{display: none;}
	.deskop { display:none; }
	.mobile { display:block; }
	body { margin-top:56px; }
	#main .con.con2 .left { width:100%; }
	#main .con.con2 .right { width:100%; }
	#main .con.con5 .left { width:100%; margin-bottom:10%; }
	#main .con.con5 .right { width:100%; }
	#main .con .content { padding:10% 5% 10%; }
	#main .con6 .content { padding:10% 2% 10%; }
	#footer .footer .right { width:100%; text-align:center; }
	#main .con.con6 table { width:100%; }
	#main .con.con6 table .left, #main .con.con6 table .right { width:30%; line-height:22px; }
	#main .con.con5 .right .play-box-text{margin-top: 0;}
	#main .con.con5 { background-color:#34a4a2; }
	
	
	
	.con3 .mobile .content { overflow:hidden; width:94%; margin:0 auto; }
	.con3 .mobile .logo { background-image:url(../images/adjust-icon.png); padding-top:90px; font-weight:100; letter-spacing:2px; margin-bottom:40px; background-position:center top; text-align:center; background-repeat:no-repeat; font-size:24px; line-height:40px; margin:10px 0;}
	.con3 .mobile .left, .con3 .mobile .right, .con3 .mobile .center { width:100%; }
	.con3 .mobile .left .new-img { width:70%; margin:0 auto; }
	.con3 .mobile .left .new-img img { width:100%; height:auto; }
	.con3 .mobile table { width:100%; margin-top:30px; }
	.con3 .mobile table tr td.img { width:110px; text-align:center; vertical-align:text-top; }
	.con3 .mobile table tr td.text {vertical-align:top; } 
	.con3 .mobile table tr td h3 { font-weight:bold; padding-bottom:5px; }
	.con3 .mobile table tr td { padding:10px 0; }
	.con3 .mobile .new-img { text-align:center;}
	.con3 .mobile .new-img img { width:80%; }
}

@media only screen and (max-width: 500px) {
	#clickstartlogo.animate { animation-name: movelogo500; animation-duration:.5s; animation-timing-function: ease-in-out; left:100%; top:100%; margin-left:-80px; margin-top:-80px; width:80px; }
}

@media (max-width: 1100px) and (orientation:landscape) {

}