@media only screen and (min-width: 6in) {

  html,body{
    margin:3px auto 3px auto;
    width:85%;
    background-color:#002017;
  }
      /*background-image:url(imgs/12.jpg);background-attachment: fixed; background-repeat: no-repeat;}*/
  hr{
    margin:3px 0 3px 0;
    width:98%;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(39, 131, 180, 0), rgba(39, 131, 180, 0.75), rgba(0, 0, 0, 0));
  }

  #ux_top{
    border:1px solid #fff;
    border-radius:4px;
    width:98%;
    height:45px;
  }

  #ux_logo{
    width:50px;
    height:25px;
    color: white;
    padding-top:18px;
    padding-left:1px;
    float:left;
    text-shadow: 2px 2px 4px #000000,0 0 26px #333, 0 0 5px black;background-color:#fff;
    background-image:url(/imgs/uxbobo.png);background-size:50px 44px;
    background-repeat: no-repeat;background-position:center 0px;
    font-family:'Arial';
    font-size:14px;
    border:1px solid black;
    border-radius:4px;
  }

  .hk_logo{
    margin-left:52px;
    height:43px;
    color: white;
    text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
    font-family:'Microsoft JhengHei';font-size:11px;
    font-weight:bold;
    border:1px solid black;
    border-radius:4px;
  }

  .ux_txt{
    text-align:justify;
    font-size:10px;
    width:95%;
    font-family:Arial;
    color:#fff;
    letter-spacing:2px;
    line-height:25px;
    margin:10px auto 10px auto;
    color: white;
    text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
  }

  .ux_txt2{
    font-size:10px;
    font-family:Arial;
    color:#fff;
    margin:10px auto 10px 8%;
    color: white;
    text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
  }

  .ux_parts_txt{
    text-align:justify;
    font-size:10px;width:95%;
    font-family:Arial;
    color:#fff;
    line-height:15px;margin:10px auto 10px auto;
    color: white;
    text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
  }

  .ux_iframe{
    margin:5px 0 10px 5px;
    width:60%;height:270px;
    border:none;
    overflow:hidden
  }

  .address{
    color:#fff;
    font-size:10px;
    font-family:'Arial';
    color: white;
    text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
  }

  .ux_qrcode{
    width:75px;
    float:right;
    margin-top:-25px;
    margin-right:20px;
  }

/*  .ux_parts_img{
    float:right;
    width:150px;
    margin:0px 26px 10px 6px;
    box-shadow: 5px 5px 2px grey
  }*/

.ux_parts_img1{
    float:right;
    width:150px;
    margin:10px 26px 10px 10px;
    box-shadow: 5px 5px 2px grey
}

.ux_parts_img2{
    float:right;
    width:150px;
    margin:160px -160px 10px 10px;
    box-shadow: 5px 5px 2px grey;
}

.ux_welcome_txt{
    text-align:justify;
    font-size:12px;
    width:95%;
    letter-spacing:1px;
    font-family:Arial;
    line-height:17px;
    margin:10px auto 10px auto;
    color:white;
    text-shadow: 2px 2px 4px #EA4335,0 0 25px #FF9933, 0 0 5px #FF9933;
}

  .ux_welcome_txt{
    text-align:justify;
    font-size:12px;
    width:95%;
    letter-spacing:1px;
    font-family:Arial;
    line-height:17px;
    margin:10px auto 10px auto;
    color:white;
    text-shadow: 2px 2px 4px #EA4335,0 0 25px #FF9933, 0 0 5px #FF9933;
  }

  .ux_price_txt{
    text-align:right;
    font-size:12px;
    width:95%;
    letter-spacing:1px;
    font-family:Arial;
    line-height:17px;
    margin:5px auto 10px auto;
    color:white;
    text-shadow: 2px 2px 4px #EA4335,0 0 25px #FF9933, 0 0 5px #FF9933;
  }

  .ux_button_a {
    font-family: Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: white;
    background-color: transparent;
    border: 2px solid #FF9933;
    padding: 12px 28px;
    border-radius: 6px;
    cursor: pointer;
    text-shadow: 2px 2px 4px #EA4335, 0 0 25px #FF9933, 0 0 5px #FF9933;
    box-shadow: 0 0 10px #FF9933, inset 0 0 5px #EA4335;
    transition: all 0.3s ease;
  }
  
  .ux_button_a:hover {
    background-color: #FF9933;
    color: black;
    transform: scale(1.05);
    box-shadow: 0 0 20px #EA4335, 0 0 30px #FF9933;
  }

  .ux_box_a{
    width:98%;height:auto;border: solid 1px #2783b4;border-radius:8px;
  }

  .ux_box_b{
    margin:1px;border:solid 1px #005555;border-radius:8px;
  }

  div#ux_parts_sub_menu_box{
    display:none;
    border:0px solid red;
    height:210px
  }

  div#ux_parts_sub_menu{
    display:none;
    position:relative;
    margin-top:1px;
    z-index:1;
    overflow-x:hidden;
    overflow-y:scroll;
    width:70%;
    height:200px;
    background-color:#ccc;
    padding-top:2px;padding-left:0px;
    padding-right:0px;padding-bottom:5px;border:1px solid #fff;font-size:0.75em;
  }

  div#ux_parts_sub_menu_img{
    display: inline-block;
    margin-left:0px;
    border:1px solid red;width:25%
  }

  div#ux_tutorial_contant{
    margin:10px;
    overflow-x:hidden;
    overflow-y:scroll;
    height:678px;
  }

  .ux_tut_txt1{
    font-size:25px;
}

.ux_tut_txt2{
    margin-top:5px;
    font-size:18px;
    font-weight:bold;
    color:#006600;
}

.ux_tut_txt3{
    font-size:16px;
    line-height:24px;
}

  .ux_codearea {
    width: 96%;
    height: 200px;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 2px solid #FF9900;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 10px;
    color:#666;
    font-family:Arial;
    resize: none;
    margin:0px auto 10px 10px;
}
}




@media only screen and (max-width: 6in) {

html,body {
  margin: 0; 
  padding: 0; 
  background-color:#201701;
  width:99%;height:100%;
}

  hr{
    margin:3px 0 3px 0;
    width:98%;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(20, 170, 102, 0), rgba(20, 170, 102, 0.75), rgba(0, 0, 0, 0));
  }

/*hr{
  margin:3px 0 3px 0;
  width:98%;
}
*/
#ux_top{
  border:1px solid #fff;
  border-radius:4px;
  width:98%;
  height:45px;
}

#ux_logo{
  width:50px;
  height:25px;
  color: white;
  padding-top:18px;
  padding-left:1px;
  float:left;
  text-shadow: 2px 2px 4px #000000,0 0 26px #333, 0 0 5px black;
  background-image:url(http://www.uxbobo.com/imgs/uxbobo.png);
  background-size:50px 44px;
  background-repeat: no-repeat;background-position:center 0px;
  font-family:'Arial';
  font-size:14px;
  border:1px solid black;
  border-radius:4px;
}

.hk_logo{
  margin-left:52px;
  height:43px;
  color: white;
  text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
  font-family:'Microsoft JhengHei';
  font-size:11px;
  font-weight:bold;
  border:1px solid black;
  border-radius:4px;
}

.ux_txt{
  text-align:justify;
  font-size:10px;
  width:95%;
  font-family:Arial;
  color:#fff;
  letter-spacing:2px;
  line-height:20px;
  margin:10px auto 10px auto;
  color: white;
  text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
}

.ux_txt2{
  font-size:10px;
  font-family:Arial;
  color:#fff;
  margin:10px auto 10px 8px ;
  color: white;
  text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
}

.ux_parts_txt{
  text-align:justify;
  font-size:10px;
  width:95%;
  font-family:Arial;
  color:#fff;
  line-height:15px;
  margin:10px auto 10px auto;
  color: white;
  text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
}

.ux_iframe{
  margin:5px 0 10px 5px;
  width:95%;
  height:100px;
  border:none;
  overflow:hidden
}

.address{
  color:#fff;
  font-size:10px;
  font-family:'Arial';
  color: white;
  text-shadow: 2px 2px 4px #000000,0 0 25px #333, 0 0 5px black;
}

.ux_qrcode{
  width:20%;
  float:right;
  margin-right:20px;
}

/*.ux_parts_img{
  float:right;
  width:125px;
  margin:0px 6px 10px 6px;
  box-shadow: 5px 5px 2px grey
}*/

.ux_parts_img1{
    float:right;
    width:150px;
    margin:10px 10px 10px 10px;
    box-shadow: 5px 5px 2px grey
}

.ux_parts_img2{
    float:right;
    width:150px;
    margin:160px -160px 10px 10px;
    box-shadow: 5px 5px 2px grey
}


.ux_welcome_txt{
  text-align:justify;
  font-size:12px;
  width:95%;
  letter-spacing:1px;font-family:Arial;
  line-height:17px;
  margin:10px auto 10px auto;
  color:white;
  text-shadow: 2px 2px 4px #EA4335,0 0 25px #FF9933, 0 0 5px #FF9933;
}

.ux_price_txt{
  text-align:right;
  font-size:12px;
  width:95%;
  letter-spacing:1px;
  font-family:Arial;
  line-height:17px;
  margin:5px auto 10px auto;
  color:white;
  text-shadow: 2px 2px 4px #EA4335,0 0 25px #FF9933, 0 0 5px #FF9933;
}

.ux_button_a {
  font-family: Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  color: white;
  background-color: transparent;
  border: 2px solid #FF9933;
  padding: 12px 28px;
  border-radius: 6px;
  cursor: pointer;
  text-shadow: 2px 2px 4px #EA4335, 0 0 25px #FF9933, 0 0 5px #FF9933;
  box-shadow: 0 0 10px #FF9933, inset 0 0 5px #EA4335;
  transition: all 0.3s ease;
}

.ux_button_a:hover {
  background-color: #FF9933;
  color: black;
  transform: scale(1.05);
  box-shadow: 0 0 20px #EA4335, 0 0 30px #FF9933;
}

.ux_box_a{
  width:98%;
  height:auto;
  border: solid 1px #fff;
  border-radius:8px;
}

.ux_box_b{
  margin:1px;
  border:solid 1px #999999;
  border-radius:8px;
}


div#ux_parts_sub_menu_box{
  display:none;
  border:0px solid red;
  height:210px
}

div#ux_parts_sub_menu{
  display:none;
  position:relative;
  margin-top:1px;
  z-index:1;
  overflow-x:hidden;
  overflow-y:scroll;
  width:60%;
  height:200px;
  background-color:#ccc;
  padding-top:2px;
  padding-left:0px;
  padding-right:0px;
  padding-bottom:5px;
  border:1px solid #fff;
  font-size:0.75em;
}

div#ux_parts_sub_menu_img{
  display: inline-block;
  margin-top:1px;
  margin-left:0px;
  border:0px solid red;
  width:37%;
  }

div#ux_tutorial_contant{
    margin:10px;
    overflow-x:hidden;
    overflow-y:scroll;
    height:678px;
}
.ux_tut_txt1{
    font-size:0.9em;
    font-weight:bold;
}

.ux_tut_txt2{
    margin-top:5px;
    font-size:0.8em;
    font-weight:bold;
    line-height:18px;
    color:#006600;
}

.ux_tut_txt3{
    font-size:0.75em;
    line-height:18px;
}

.ux_codearea {
    width: 98%;
    height: 200px;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 2px solid #FF9900;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 10px;
    color:#666;
    font-family:Arial;
    resize: none;
    margin:0px auto 10px 3px;
}

}