/*******************************************************************************
########  #######  ##    ## ########  ######  
##       ##     ## ###   ##    ##    ##    ## 
##       ##     ## ####  ##    ##    ##       
######   ##     ## ## ## ##    ##     ######  
##       ##     ## ##  ####    ##          ## 
##       ##     ## ##   ###    ##    ##    ## 
##        #######  ##    ##    ##     ######  
*******************************************************************************/
@font-face {
  font-family: '__Roboto_5';
  src: url('../fonts/roboto-v16-latin-regular.eot');
  src: local('☺'), url('../fonts/roboto-v16-latin-regular.woff') format('woff'),
    url('../fonts/roboto-v16-latin-regular.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: '__Roboto_5';
  src: url('../fonts/roboto-v16-latin-700.eot');
  src: local('☺'), url('../fonts/roboto-v16-latin-700.woff') format('woff'),
    url('../fonts/roboto-v16-latin-700.svg') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: '__Roboto_5';
  src: url('../fonts/roboto-v16-latin-300italic.eot');
  src: local('☺'),
    url('../fonts/roboto-v16-latin-300italic.woff') format('woff'),
    url('../fonts/roboto-v16-latin-300italic.svg') format('svg');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: '__Roboto_5';
  src: url('../fonts/roboto-v16-latin-500.eot');
  src: local('☺'), url('../fonts/roboto-v16-latin-500.woff') format('woff'),
    url('../fonts/roboto-v16-latin-500.svg') format('svg');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: '__Roboto_5';
  src: url('../fonts/roboto-v16-latin-300.eot');
  src: local('☺'), url('../fonts/roboto-v16-latin-300.woff') format('woff'),
    url('../fonts/roboto-v16-latin-300.svg') format('svg');
  font-weight: 300;
  font-style: normal;
}

/*******************************************************************************
 ######   ##        #######  ########     ###    ##       
##    ##  ##       ##     ## ##     ##   ## ##   ##       
##        ##       ##     ## ##     ##  ##   ##  ##       
##   #### ##       ##     ## ########  ##     ## ##       
##    ##  ##       ##     ## ##     ## ######### ##       
##    ##  ##       ##     ## ##     ## ##     ## ##       
 ######   ########  #######  ########  ##     ## ######## 
*******************************************************************************/
* {
  box-sizing: border-box;
  max-width: inherit;
  font-family: '__Roboto_5';
}
hr {
  padding: 0px;
  margin: 0px;
  margin-top: 5px;
  border-color: black;
}
input {
  font-weight: 400;
}
h1 {
  margin-bottom: -3px;
}
img#img_logo {
  position: relative;
  top: -8px;
}
img#prod_img {
  width: 100%;
  height: auto;
  max-width: 300px;
}
.colHalf {
  /* width: 400px; */
  width: 50%;
  /* height: 42px; */

  margin: 0px;
  padding: 0px;
}
.colFull {
  /* width: 824px; */
  /* width: 98%; */
  width: 100%;
  /* height: 42px; */

  margin: 0px;
  padding: 0px;
  margin-bottom: 10px;
}
.colMid {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
a:visited {
  color: #db1b23;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
a:link {
  color: #db1b23;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

p.menu {
  margin-left: -4px;
  margin-right: -4px;
  padding-left: 0px;
  padding-right: 0px;
  display: inline-block;
  font-style: normal;
  font-size: 16px;
  color: #969696;
  line-height: 19px;
  font-family: '__Roboto_5';
  font-weight: 400;
}
p.menu:hover {
  color: #db1b23;
}

#sns1 {
  display: inline-block;
  width: 16px;
  height: 13px;
  margin: 2px;
  background: url('/images/snsicon1_3.svg');
}
#sns2 {
  display: inline-block;
  width: 16px;
  height: 13px;
  margin: 2px;
  background: url('/images/snsicon1_1.svg');
}
#sns3 {
  display: inline-block;
  width: 18px;
  height: 13px;
  margin: 2px;
  background: url('/images/sns-y-01.png');
}
#sns4 {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 2px;
  background: url('/images/%eb%b6%99%ec%97%ac%20%eb%84%a3%ec%9d%80%20svg%2062147x62.svg');
  background-size: contain;
}
#stratio-inc-logo {
  display: inline-block;
  width: 80px;
  height: 16px;
  background: url('/images/0427_Stratio_Logo_PBlack_inc.png') no-repeat center;
}
#sns1 :hover {
  background: url('/images/snsicon3_3.svg');
}
S #sns2 :hover {
  background: url('/images/snsicon3_1.svg');
}
#sns3 :hover {
  background: url('/images/sns-y-02.png');
}
#sns4 :hover {
  background: url('/images/%eb%b6%99%ec%97%ac%20%eb%84%a3%ec%9d%80%20svg%2062147x622.svg');
  background-size: contain;
}
#stratio-inc-logo:hover {
  background: url('/images/0427_Stratio_Logo_PRed_inc.png') no-repeat center;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #787878;
  opacity: 1;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #787878;
  opacity: 1;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #787878;
  opacity: 1;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #787878;
  opacity: 1;
}

/*******************************************************************************
########      
##     ##     
##     ##     
########      
##            
##        ### 
##        ### 
*******************************************************************************/
p {
  background-color: transparent;
  text-align: left;
  font-family: '__Roboto_5';
}
p {
  margin: 0px;
  padding: 0px;

  padding-left: 0px;
  padding-right: 0px;
}
p.blue,
span.blue {
  color: #db1b23;
}
p.grey {
  color: #646464;
}
p.black {
  color: #000000;
}
p.red {
  color: #d4145a;
}
p.right {
  text-align: right;
}
p.left {
  text-align: right;
}
p.subTitle {
  line-height: 60px;
  font-weight: 500;
  font-size: 24px;
  font-family: '__Roboto_5';
}
p.deviceTitle {
  line-height: 22px;
  font-weight: 500;
  font-size: 18px;
  font-family: '__Roboto_5';
}
p.deviceUnitPrice {
  color: #646464;
  line-height: 19px;
  font-weight: 500;
  font-family: '__Roboto_5';
  font-size: 16px;
  margin-top: 5px;
}
p.quantity {
  color: #646464;
  line-height: 16px;
  font-weight: 500;
  font-family: '__Roboto_5';
  font-size: 13px;
}
p.cartText {
  color: #646464;
  line-height: 16px;
  font-weight: 300;
  font-size: 12px;
  margin-top: 6px;
}
p.bagSubtotal {
  line-height: 30px;
  font-weight: 500;
  font-size: 16px;
  margin: 0px;
  padding: 0px;
  /* padding-left: 15px; */
  /* padding-right:15px; */
}
p.subText {
  color: #646464;
  line-height: 16px;
  font-weight: 300;
  font-size: 13px;
}
p.subText2 {
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  text-align: right;
}
p.subText3 {
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  text-align: left;
}
p.subSubTitle {
  margin: 10px;
  /* margin-top: 20px; */
  margin-left: 0px;

  color: #646464;
  line-height: 18px;
  font-weight: 500;
  font-size: 15px;
}
p.myParagraphText {
  color: #787878;
  /* padding-left: 35px; */
  line-height: 25px;
  font-weight: 300;
  font-size: 13px;
  font-family: '__Roboto_5';
  text-align: left;
}
p.placeOrderMsg {
  color: #646464;
  line-height: 14px;
  font-weight: 300;
  font-size: 12px;
  text-align: center;
}
p.terms {
  font-size: 14px;
  line-height: 17px;
  word-wrap: break-word;
  font-weight: 300;
  text-align: center;
}
.apply {
  position: absolute;
  font-size: 14px;
  color: #db1b23;
  font-weight: 300;
  text-align: left;
  height: 42px;
  min-height: 42px;
  line-height: 42px;
  background: transparent;
  border: 0px;
}

/*******************************************************************************
########  #### ##     ## 
##     ##  ##  ##     ## 
##     ##  ##  ##     ## 
##     ##  ##  ##     ## 
##     ##  ##   ##   ##  
##     ##  ##    ## ##   
########  ####    ###    
*******************************************************************************/
div {
  border: 0px black solid;
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: inline-block;
}
table tr,
td {
  border: 0px black dotted;
}
p {
  border: 0px black dashed;
}
/**temp for debug**/
/******************************************************************************/
div.blank {
  border: 0px;
  margin: 0px;
  padding: 0px;
}
div.left {
  width: 50%;
  float: left;
  text-align: left;
  margin: 0px;
  padding: 0px;
  display: table-cell;
}
div.right {
  width: 50%;
  float: right;
  text-align: right;
  margin: 0px;
  padding: 0px;
  display: table-cell;
}
div.mySection {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 0px;
  padding-right: 0px;
}
div.mySubSection {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 19px;
  padding-left: 19px;
}
div.mySubtitle {
  margin: 0px;
  margin-top: 10px;
  margin-bottom: 10px;

  height: 60px;
  min-height: 60px;
  line-height: 60px;
  background-color: #e6e6e6; /*grey*/
}
div.mySubSubtitle {
  margin: 0px;
  margin-bottom: 10px;
  margin-top: 10px;

  background-clip: content-box;
  height: 30px;
  min-height: 30px;
  line-height: 30px;
  background-color: #e6e6e6; /*grey*/
  position: relative;
}
div.subTitleEdit {
  padding-right: 20px;
  color: #db1b23;
  font-size: 14px;
}
div.stripeInput {
  width: 100%;
  display: inline;
  float: left;
  position: relative;
  min-height: 31px;
  height: 42px;
  padding: 4px;
  margin: 0px;

  color: #787878;
  background-color: #ffffff;

  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: #c8c8c8;

  /* text-align: left; */
  /* font-weight: 400; */
  /* font-size: 15px; */
  /* font-family: '__Roboto_5'; */
}
div.checkBoxWrapper {
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;

  vertical-align: middle;
  text-align: left;

  color: #646464;
  font-weight: 500;
  font-size: 15px;
}

/******************************************************************************/
/** for input, select, button, and checkbox **/
input.myInput,
select.myInput {
  width: 100%;
  display: inline;
  float: left;
  position: relative;
  min-height: 42px;
  padding: 6px;
  margin: 0px;

  color: #787878;
  background-color: #ffffff;

  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: #c8c8c8;

  text-align: left;
  font-weight: 400;
  font-size: 15px;
  font-family: '__Roboto_5';
}
input.myInput:focus,
select.myInput:focus {
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: black;
}

input.myNumber {
  padding: 5px;
  width: 40px;
  min-width: 40px;
  min-height: 31px;
  border-style: solid;
  border-radius: 5px;
  border-width: 1px;
  border-color: #c8c8c8;
}
input.myButton {
  margin: 10px;
  margin-left: 0px;
  margin-right: 0px;

  width: 168px;
  height: 50px;

  border-width: 0px;
  border-radius: 10px;
  border-color: #787878;

  position: relative;
  background-color: #db1b23;

  color: #ffffff;
  visibility: inherit;

  /*for text*/
  text-align: center;
  /*background-color: transparent;*/
  line-height: 19px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: '__Roboto_5';

  cursor: pointer;
}
input.myButton:active {
  border-width: 3px;
  /* border-color: #000000; */
  color: #000000;
}
input.myButtonSmallDisabled {
  cursor: default;
  margin: 2px;
  padding: 5px;
  width: auto;
  height: auto;

  border-width: 0px;
  border-radius: 3px;
  border-color: #787878;
  position: relative;
  background-color: #e6e6e6;
  color: #ffffff;
  visibility: inherit;
  /*for text*/
  text-align: center;
  /*background-color: transparent;*/
  line-height: 14px;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 1px;
  font-family: '__Roboto_5';
  display: inline-block;
}
input.myButtonSmall {
  cursor: pointer;
  margin: 2px;
  padding: 5px;
  width: auto;
  height: auto;

  border-width: 0px;
  border-radius: 3px;
  border-color: #787878;
  position: relative;
  background-color: #db1b23;
  color: #ffffff;
  visibility: inherit;
  /*for text*/
  text-align: center;
  /*background-color: transparent;*/
  line-height: 14px;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: 1px;
  font-family: '__Roboto_5';
  display: inline-block;
}
input.myButtonSmall:active {
  border-width: 1px;
  color: #000000;
}

input.myCheckbox {
  margin: 0px;
  padding: 0px;
  width: 20px;
  height: 20px;
  display: inline;
}

img.myImg {
  margin-left: 0px;
  margin-right: 20px;
}
/******************************************************************************/

/******************************************************************************/
/** for tooltips **/
.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  /* background-color: black; */
  background-color: #c0c0c0;
  background-color: #e6e6e6;
  color: #666666;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 80%; /* tooltip vertical position. the higher value, the higher position */
  left: 20%;
  margin-left: -60px;

  font-weight: 300;
  font-size: 15px;
  font-family: '__Roboto_5';
}

.tooltip .tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #e6e6e6 transparent transparent transparent;
}
/******************************************************************************/

/******************************************************************************/
/** for dropdown hamburger **/
.dropbtn {
  display: inline-block;
  width: 27px;
  height: 20px;
  margin: 2px;
  background: url('../images/hamb.png');
  /* background-color: #4CAF50; */
  border: none;
  cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
  /* background-color: #3e8e41; */
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  text-align: left;
  display: none;
  position: absolute;
  background-color: white;
  min-width: 150px;
  overflow: auto;
  z-index: 1;
  width: 190px;
  right: 0;
  padding: 10px 40px;
}
.dropdown-content a {
  color: black;
  padding: 10px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {
  background-color: #f1f1f1;
}
.show {
  display: block;
}

/** 2018 buynow btn **/
p.menu {
  margin: 0;
  display: inline-block;
  font-style: normal;
  font-size: 14px;
  color: #969696;
  line-height: 19px;
  font-weight: 400;
}
p.menu:hover {
  color: #db1b23;
}
a.sns {
  top: 4px;
  position: relative;
}
.buynowButton {
  margin-left: 20px;
  margin-right: 20px;
  width: 110px;
  height: 31px;
  border-radius: 10px;
  background-color: #db1b23;
  border: none;
  color: white;
  text-align: center;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  font-weight: 700;
  outline: none;
  top: -2px;
  position: relative;
}
.buynowButton:hover {
  background-color: #ffffff;
  color: #db1b23;
  font-weight: 700;
  outline: none;
}