/*** Rwd page screen width control from here  ***/

.page-wrapper .page-content {    
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}


/* Rwd control for center-deskpc,sidebar menu on/off */
@media only screen and (max-width: 1280px) {
  .center-deskpc-show-off-only {
    display: none !important;
  }
}
@media only screen and (min-width: 1281px) {
  .sidebar-show-off-only {
    display: none !important;
  }
}
@media only screen and (min-width: 1020px) {
  .sidebar-homepage-show-off-only {
    display: none !important;
  }
}



/* Rwd control for Alice pagehead area */
@media only screen and (max-width: 929px) {
  .pagehead-deskpc-show-off-only {
    display: none !important;
  }
}
@media only screen and (min-width: 930px) {
  .pagehead-mobile-show-off-only {
    display: none !important;
  }
}


/* Rwd control for center mix area */
@media only screen and (max-width: 400px) {
  .centermix-desktop-show-off-only {
    display: none !important;
  }
}
@media only screen and (min-width: 771px) {
  .centermix-tablet-show-off-only {
    display: none !important;
  }
}
@media only screen and (min-width: 401px) {
  .centermix-mobile-show-off-only {
    display: none !important;
  }
}


/* Rwd control for center area */
@media only screen and (min-width: 1281px), (max-width: 930px) {
  .relate-data-show-off-only {
    display: none !important;
  }
}

@media only screen and (max-width: 1280px) {
  .desktop-show-off-only {
    display: none !important;
  }
}
@media screen and (max-width: 401px), screen and (min-width: 770px) {  
  .desktop-mobile-show-off-only { 
    display: none !important;
  }
}
@media only screen and (max-width: 540px) {
  .tablet-show-off-only {
    display: none !important;
  }
}
@media only screen and (max-width: 400px) {
  .mobile-show-off-only {
    display: none !important;
  }
  .image-index-monthly {
    width:60%;
  }
}


/* Rwd control for slide image in homepage  */
@media only screen and (max-width: 799px) {
  .desktop-slide-off-only {
    display: none !important;
  }
}
@media only screen and (min-width: 800px) {
  .mobile-slide-off-only {
    display: none !important;
  }
}


/* Rwd control for center-tablet-list Owl Carousel image area in homepage  */
@media only screen and (max-width: 350px) {
  .center-tablet-list-owlCarousel {
    /*display: flex; */
    /*flex-direction: column; */
    /*justify-content:center; */
    /*vertical-align: top;    */
    /*text-align: center; */
    /*width:100%;*/
    width: 100%; 
    margin-left:auto; 
    margin-right:auto;
  }
}
@media only screen and (min-width: 351px), (max-width: 800px) {
  .center-tablet-list-owlCarousel {
    display: flex; 
    flex-direction: column; 
    justify-content:center; 
    vertical-align: top;    
    text-align: center;
    width:60%;
  }
}
@media only screen and (min-width: 801px) {
  .center-tablet-list-owlCarousel {
    display: flex; 
    flex-direction: column; 
    justify-content:center; 
    vertical-align: top;    
    text-align: center;
    width:60%;
  }
}



/* Rwd control for center-mobile-container of detail page*/
@media only screen and (max-width: 930px) {
  .detailpage-path-mobile-showoff-only {
    display: none !important;
  }
}
@media only screen and (min-width: 931px) {
  .detailpage-path-showoff-only {
    display: none !important;
  }
}

@media only screen and (max-width: 930px) {
  .detailpage-path-rwdctl {
    text-align:left; 
    width:100%;
    margin-top:20px;
  }
}
@media only screen and (min-width: 931px) {
  .detailpage-path-rwdctl {
    text-align:left; 
    width:100%; 
    margin-top:-20px;
  }
}

@media only screen and (min-width: 401px) {
  .detailpage-related-prd {
    max-width:250px;
    min-width:120px; 
    padding: 15px 20px 15px;
  }
}
@media only screen and (max-width: 400px) {
  .detailpage-related-prd {
    max-width:130px;
    min-width:130px; 
    padding: 10px 5px 10px;
  }
}

/* Rwd control for news page */
#newspage-newsbody-rwdctl {
  display:flex; 
  flex-direction:row-reverse; 
  flex-wrap:wrap; 
  justify-content:center; 
  width:100%; 
  margin-left:auto; 
  margin-right:auto;
}

#newspage-newsbody-image {
  width:95%; 
  height:60px; 
  text-align:center;
}

@media only screen and (max-width: 930px) {
  #newspage-title-rwdctl {
    text-align:center; 
    padding:10px;
  }
  #newspage-NewsContent-rwdctl {
    text-align:left; 
    padding:10px;
    width:100%;
  }
  #newspage-NewsContent-text {
    width:95%; 
    margin-left:auto; 
    margin-right:auto;
  }
  .zodiac-starContent-text {
    width:90%;
    margin-left:auto; 
    margin-right:auto;
    padding:10px
  }
}
@media only screen and (min-width: 931px) {
  #newspage-title-rwdctl {
    text-align:left; 
    padding:10px;
    border-left: 1px solid #C0C0C0; 
    width:65%;
  }
  #newspage-NewsContent-rwdctl {
    text-align:left; 
    padding:10px;
    width:60%;
  }
  #newspage-NewsContent-text {
    width:75%; 
    margin-left:auto; 
    margin-right:auto;
  }
  .zodiac-starContent-text {
    width:90%;
    margin-left:auto; 
    margin-right:auto;
    padding:10px
  }
}

@media only screen and (max-width: 400px) {
  /* sub page class list css: 2pcs/line in mobile portrait. */
  #newspage-newsbody-data {
    margin-left:auto; 
    margin-right:auto; 
    max-width:98%;
  }
  .newspage-newsbody-data-content {
    display:flex; 
    flex-direction:row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: flex-start;
  }
  .newspage-newsbody-data-list {
    display:flex; 
    justify-content:center; 
    align-items:center; 
    max-width:100%;
    padding: 10px 10px 10px;
  }
  #orchid-lookafter-vidio1 {    
    width:320px;
    height:180px;
  }
}
@media only screen and (min-width: 401px) {
  /* sub page class list css: 2pcs/line in descPC or NB. */
  #newspage-newsbody-data {
    margin-left:auto; 
    margin-right:auto; 
    max-width:340px;
  }
  .newspage-newsbody-data-content {
    display:flex; 
    flex-direction:row; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    align-items: flex-start;
  }
  .newspage-newsbody-data-list {
    display:flex; 
    justify-content:center; 
    align-items:center; 
    max-width:50%; 
    min-width:120px; 
    padding: 10px 20px 10px;
  }
  #orchid-lookafter-vidio1 {    
    width:430px;
    height:240px;
  }
}



/* Rwd control for member order inquire table form in mobile only  */
@media screen and (max-width: 400px) {
  #rwd-table {
    width:280px;
    border: 0;
  }
  #rwd-table thead {
    display: none;
  }
  #rwd-table tr {
    margin-bottom: 10px;
    display: block;
  }
  #rwd-table td {
    display: block;
    text-align: left;
  }
  #rwd-table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
  }
}


/* form cortrol css area for every page in web*/
.form-row-control {
  display: flex; 
  justify-content: flex-start; 
  width:100%;
}
.form-row-left {
  text-align:right; 
  width:28%;
}
.form-row-right {
  text-align:left; 
  width:72%;
}

.form-input-text {
 /* border: 1px solid #93BCE6; */
  border: 1px solid #C0C0C0; 
}
/* --- end form cortrol css area for every page in web --- */


/*** Rwd page css control from here  ***/
/* page head css area of every page in web   */
#pagehead-area { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  max-width:1400px;
  border-bottom: 1px solid #EEEEEE; 
}

#pagehead-area-logo {
  text-align: left;
  max-width:75%;
}
#pagehead-area-function {
  display:flex;
  flex-direction: column;
  width:75%;  
  margin-right: 0px;
}

/*** original version marked by Norman and replaced by next two @media control at 20200608 */
#pagehead-area-function-lng {
  text-align: right; 
}
@media only screen and (min-width: 930px) {
    #pagehead-area-function-lng {
      margin-top: 0px; 
    }
}
@media only screen and (max-width: 929px) {
    #pagehead-area-function-lng {
      margin-top: -25px;
      margin-right: 5px;
    }
}

#pagehead-area-function-lst {
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  width:100%;
}
#pagehead-area-function-lst span {
  text-align: right;
}

#clspagehead-area { 
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-content: center;
  min-width:320px;
  max-width:1400px;
  border-bottom: 1px solid #EEEEEE; 
}

#clspagehead-area-logo {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  width:25%;
  padding:1px
}

#clspagehead-area-function {  
  display:flex;
  flex-direction: column;
  width:75%;  
  margin-right: 0px;  
}
#clspagehead-area-function-lng {
  text-align: right;
  width:100%; 
}
@media only screen and (min-width: 930px) {
    #clspagehead-area-function-lng {
      margin-top: 0px;
      text-align: right;
    }
}
@media only screen and (max-width: 929px) {
    #clspagehead-area-function-lng {
      margin-top: -20px;
      margin-right: 5px;
    }
}
#clspagehead-area-function-lst {
  display:flex;
  justify-content:flex-end;
  width:100%;
}
#clspagehead-area-function-lst span {
  text-align: right;
}
/* end page head css area of every page in web   */


/* Center body css area for every page in web */
#center-area { 
  width:100%;
  max-width:1400px;
  /*border-bottom: 1px solid #EEEEEE; */
}

/* Center page index css area for every page in web*/
#center-page-index-area {
  display:table;
  width:100%;
}
#center-page-index-area-list {
  text-align: right;
}
#center-page-index-area-list span {
  margin-right: 5px;
}
/* end Center page index css area */


/* Center body css area for every page in web */
#center-rwd-area {
  display:flex; 
  justify-content: center;
  width:100%;
}


/* Center body deskpc css area for every page in web*/
#center-deskpc {
  width : 340px ;
}

#center-deskpc-sameday-delivery-list {
  max-width:230px;
  display:flex; 
  flex-direction: column;  
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  
  /*border: 1px solid #DFDFDF */
}

.center-deskpc-tagctl {
  max-width:230px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  /*border: 1px solid #DFDFDF */
}
.center-deskpc-tagctl-list {
  width: 95%;
}
/* end Center body deskpc css area for every page in web*/
               

/* Center body mix deskpc/tablet/mobile css area for homepage only*/
#center-rwd-area-homepage {
  display:flex; 
  flex-direction:row; 
  flex-wrap: wrap; 
  justify-content: space-around; 
  max-width:100%; 
  min-width:340px; 
  margin-left:auto; 
  margin-right:auto; 
}

#center-mix-area {
  min-width:340px; 
  max-width:800px;
  vertical-align: top; 
  text-align: center;
}

#center-mix-message-list {
  text-align: center;
  width:100%;
}

.center-slide-area {
    margin-left:auto; 
    margin-right:auto; 
    margin-top:5px; 
    width:100%;
}

/* Indicator for Slide in homepage */
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}


.center-deskpc-monthly-collection {  
  display:flex;  
  flex-direction:row;
  flex-wrap: wrap;
  justify-content:center; 
}

/* Rwd control for center-deskpc-monthly-collection image area */
@media only screen and (max-width: 340px) {
  .center-monthly-flower-text{
    width:100%;
  }
  .center-monthly-flower-area{
    display:flex; 
    flex-direction:row; 
    flex-wrap: wrap; 
    justify-content:center; 
    width:95%;
  }  
  .center-monthly-flower-imgara {
    width:150px; 
    margin: 5px;
  }
  .subpage-class-top8prd {
    width:145px; 
    margin: 5px;
  }
}
@media only screen and (min-width: 341px), (max-width: 800px) {
  .center-monthly-flower-text{
    width:100%;
  }
  .center-monthly-flower-area{
    display:flex; 
    flex-direction:row; 
    flex-wrap: wrap; 
    justify-content:center; 
    width:95%;
  }
  .center-monthly-flower-imgara {
    width:145px; 
    margin: 5px;
  }
   .subpage-class-top8prd {
    width:145px; 
    margin: 5px;
  }
}
@media only screen and (min-width: 801px) {
  .center-monthly-flower-text{
    width:65%;
    /* width:85%; */
  }
  .center-monthly-flower-area{
    display:flex; 
    flex-direction:row; 
    flex-wrap: wrap; 
    justify-content:center; 
    width:55%;
  }
  .center-monthly-flower-imgara {
    width:145px; 
    margin: 2px;
    padding-bottom:5px;    
  }
  .center-monthly-collection-imgara {
    /*width:120px; */
    /*height:120px; */
    width:180px; 
    height:180px; 
    margin: 5px;
  }
  .subpage-class-top8prd {
    width:200px;      
    margin: 20px;
    padding-bottom:5px;    
  }
}
@media only screen and (min-width: 1400px) {  
  .subpage-class-top8prd {
    width:200px;      
    margin: 20px;
    padding-bottom:5px;    
  }
}




#center-zodiac-area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
#center-zodiac-list {
  display:flex;  
  flex-direction:row;
  flex-wrap: wrap;
  max-width:100%;
  min-width:320px;
  justify-content:space-around;
  align-items:center;
}
/* Rwd control for center-zodiac-list image area */
@media only screen and (max-width: 340px) {
  .center-zodiac-list-imgara {
      text-align:center; 
      width:100%;
  }
}
@media only screen and (min-width: 341px), (max-width: 800px) {
  .center-zodiac-list-imgara {
      text-align:center; 
      width:90%;
  }
}
@media only screen and (min-width: 1201px) {
  .center-zodiac-list-imgara {
      text-align:center; 
      width:80%;
  }
}


#center-zodiac-list-current-constellation {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width:320px;
  margin: auto;
}
#center-zodiac-list-table {
  display:flex;  
  flex-direction:row;
  flex-wrap: wrap;
  width:260px;
  margin: auto;
}
/* end Center body mix deskpc/tablet/mobile css area ------------------- */


/* center-rwd-low-area css */
#center-rwd-low-area {
  display:flex; 
  flex-direction:row; 
  flex-wrap: wrap; 
  justify-content: space-around; 
  max-width:100%; 
  min-width:340px; 
}

#center-rwd-low-area-mix2 {
  min-width : 320px ;
  max-width : 650px ;  
}

#center-rwd-low-area-mix3 {  
  min-width : 320px ;
  max-width : 550px ;
}

#center-rwd-low-area-quickview {
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  width:95%;
}
#center-rwd-low-area-quickview-contain {
  display:flex; 
  flex-direction: row;
  justify-content: space-around;
  width : 95% ;
}
.center-rwd-low-area-quickview-contain-list {
  display:flex; 
  flex-direction: column;
  justify-content: flex-start;
  width : 22% ;
}
.center-rwd-low-area-quickview-contain-list-head {
  text-align: left; 
  border-bottom:1px solid #82979D; 
  font-size: 9pt; color: #666666; 
  letter-spacing:0pt;
}
.center-rwd-low-area-quickview-contain-list-data {
  display:flex;
  flex-direction: column;  
  justify-content:center; 
  width:90%;
}
.center-rwd-low-area-quickview-contain-list-data div {
  display: flex; 
  flex-direction: column; 
  justify-content:flex-start;
}
/* end center-rwd-low-area css */

#center-tablet {
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  min-width : 200px ;
  max-width : 340px ;
  /*margin-left:auto;*/
 /* margin-right:auto;*/
}
.center-tablet-link {
  display:flex;  
  flex-direction:column;
  justify-content:center;
  vertical-align: top;
  width:95%;
  text-align: center;
}
#center-tablet-list {
  display: flex;
  flex-direction: column;
  justify-content:center;
  vertical-align: top;
  width:90%;
  text-align: center;
}
#center-tablet-list-occasion {
  display: flex;
  flex-direction: column;
  justify-content:center;
  vertical-align: top;
  width:90%;
  text-align: center;
}
/* end Center tablet css area for homepage only*/



/* Rwd control for all class product display, exp: SrhPrdRst.asp, birthday-bouquet.asp  */
#clspag-center-deskpc {
  width : 300px ;
}

@media only screen and (min-width: 930px) {
    #clspage-related-product-rwdctl {
      display: flex; 
      justify-content: flex-start; 
      flex-wrap: wrap; 
      width:95%;
      margin-top: -20px;
      line-height:100%;
      padding:5px;
    }
}
@media only screen and (max-width: 929px) {
    #clspage-related-product-rwdctl {
      display: flex; 
      justify-content: flex-start; 
      flex-wrap: wrap; 
      width:95%;
      line-height:100%;
      padding:1px;
    }
}


#center-mobile-container {
  justify-content:center; 
  text-align:left;
  align-items: flex-start;
  min-width : 320px ;
  max-width : 1200px ;
  width:98%;    
}

.clspag-text-area {
  justify-content:center; 
  align-items: flex-start;
  width:100%;
}

#center-mobile {
  justify-content:center; 
  align-items: flex-start;
  width:100%;
}

#clspag-monthly-collection {
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
  padding:10px; 
  width:95%;
}
.clspag-front-desk-description {
  /*this id use in main class page*/
  align-items:center; 
  margin:auto; 
  min-width:320px; 
  max-width:400px; 
  padding-bottom:20px
}
.clspag-monthly-collection-image {
  align-items:center;  
  margin:auto; 
  /*min-width:200px;*/  
  /*max-width:300px;*/
  min-width:320px; 
  max-width:40%; 
  padding-bottom:20px
}
.clspag-monthly-collection-data {
  display:flex; 
  flex-direction:row; 
  flex-wrap: wrap; 
  justify-content: space-around;
  align-items:center; 
  min-width:320px;
  /*max-width:700px; marked and replaced by next line for new class page form. by Norman at 20240910 */
  /*max-width:640px;*/
  max-width:60%;
  width:100%;
}

#center-mobile-class-area {
  margin-left:auto; 
  margin-right:auto; 
  width:95%;
}

.subpage-class-name-area {
  text-align:left; 
  width:100%; 
  padding-top:5px;
  padding-bottom:5px;  
  line-height: 150%
}

/* Rwd control for International-Delivery class display only,  */
@media only screen and (max-width: 929px) {
  .global-delivery-deskpc-show-off-only {
    display: none !important;
  }
  .global-delivery-mobile-show-lower{
  }

}
@media only screen and (min-width: 930px) {
  .global-delivery-mobile-show-off-only {
    display: none !important;
  }
  .global-delivery-mobile-show-lower{
    margin-top:-20px;
  }
}

/* Rwd control for sub page class display, exp: birthday-bouquet.asp, products.asp  */
@media only screen and (max-width: 929px) {
  .prdpage-deskpc-show-off-only {
    display: none !important;
  }
  .prdpage-page-title {
    width:100%;
  }
  .prdpage-page-text {
    text-align:left; 
    padding:10px;
  }
}
@media only screen and (min-width: 930px) {
  .prdpage-mobile-show-off-only {
    display: none !important;
  }
  .prdpage-page-title {
    width:33%;
  }
  .prdpage-page-text {
    text-align:left; 
    padding:10px; 
    width:65%;
  }
}

@media only screen and (max-width: 400px) {
  /* sub page class list css: 2pcs/line in mobile portrait. */
  .subpage-class-content {
    display:flex; 
    flex-direction:row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: flex-start;
  }
  .subpage-class-content-list{
    display:flex; 
    justify-content:center; 
    align-items:center; 
    max-width:320px; 
    min-width:120px; 
    padding: 10px 20px 10px;
  }
    
  .subpage-deskpc-show-off-only {
    display: none !important;
  }
  
  /*RWD control of products.asp... as MainSN=1,4,5,150 */
  .center-mobile-prdpage-clsad-title {
    width:100%; 
    text-align:left; 
  }
  .center-mobile-prdpage-clsad-descrp {
    width:30%; 
    text-align:left; 
    padding-left:10px 
  }
  .center-mobile-prdpage-clsad-list {
    display:flex; 
    justify-content:center; 
    width:100%; 
  }
  .center-mobile-prdpage-image {
    width:100px; 
  }
  .center-mobile-prdpage-occasion-image {
    width:130px; 
  }
}

@media only screen and (min-width: 401px) {
  /* sub page class list css: 4pcs/line in descPC or NB. */
  .subpage-class-content {
    display:flex; 
    flex-direction:row; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    align-items: flex-start;
  }
  .subpage-class-content-list{
    display:flex; 
    justify-content:left; 
    align-items:left; 
    max-width:250px; 
    min-width:120px; 
    padding: 15px 20px 15px;
  }
  
  .subpage-mobile-show-off-only {
    display: none !important;
  }
  
  /*RWD control of products.asp... as MainSN=1,4,5,150 */
  .center-mobile-prdpage-clsad-title {
    width:30%; 
    text-align:left; 
  }
  .center-mobile-prdpage-clsad-descrp {
    width:70%; 
    text-align:left; 
    padding-left:10px 
  }
  .center-mobile-prdpage-clsad-list {
    display:flex; 
    justify-content:center; 
    width:90%; 
  }
  .center-mobile-prdpage-image {
    width:140px; 
  }
  .center-mobile-prdpage-occasion-image {
    width:180px; 
  }
}

#clspage-foot-area {
  display:flex; 
  flex-direction:row; 
  flex-wrap: wrap; 
  justify-content:center; 
  align-items: center; 
  width=95%;
}



/*** detail page(detail.asp) css. ***/
.detail-text-area-save {
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.detail-text-area-save div {
  display: block;
  padding: 0px;
}

#detail-center-area {
  display: flex; 
  flex-wrap: wrap; 
  border: 1px solid #C9C9C9; 
  width:100%;
  margin-left:auto; 
  margin-right:auto;
}

#detail-center-mobile {
  vertical-align: top; 
  text-align:left;
  width:100%; 
  max-width:500px; 
  padding:10px; 
  margin-left:auto; 
  margin-right:auto; 
}

#detail-center-tablet {
  vertical-align: top; 
  /*text-align:left; */
  width:100%;
  max-width:480px;
  min-width:400px; 
  padding:10px; 
  margin-left:auto; 
  margin-right:auto; 
}
.detail-center-tablet-class {
  width:95%;  
  margin-left:auto; 
  margin-right:auto; 
}


/*** shopping-cart page(list.asp) css. ***/
#shopcart-center-area {
  display: flex; 
  flex-wrap: wrap; 
  width:100%;
  margin-left:auto; 
  margin-right:auto;
}

#shopcart-center-mobile {
  vertical-align: top; 
  max-width:900px;
  min-width:340px;
  margin-left:auto; 
  margin-right:auto; 
}

#shopcart-center-tablet {
  vertical-align: top;
  max-width:250px;
  padding:10px; 
  margin-left:auto; 
  margin-right:auto; 
}

/* Rwd control for center-mobile-container of shop cart page*/
@media only screen and (max-width: 930px) {
  .shopcart-mobile-showoff-only {
    display: none !important;
  }
  .shopcart-deskpc-prdlst-rwdctl {
    display:flex;
    flex-direction: column;
  }
  .shopcart-center-mobile-clength-prdno {
    /*width:220px;*/
    width:220px;
    text-align:left
  }
  .shopcart-center-mobile-clength-prdnam {
    /*width:220px;*/
    width:220px;
    text-align:left
  }
  .shopcart-center-mobile-clength-prdqty {
    /*width:220px;*/
    width:220px;
    text-align:left
  }
  .shopcart-center-mobile-clength-uniprc {
    /*width:220px;*/
    width:220px;
    text-align:left
  }
  .shopcart-center-mobile-clength-prdamt {
    /*width:220px;*/
    width:220px;
    text-align:left
  }
  .shopcart-center-mobile-clength-dlvloc {
    display:flex; 
    flex-direction: column; 
    justify-content:flex-start; 
    width:340px
  }
  .shopcart-center-mobile-clength-dlvfee {
    display:flex; 
    justify-content:flex-start; 
    align-items:center; 
    width:340px;
  }
}
@media only screen and (min-width: 931px) {
  .shopcart-deskpc-showoff-only {
    display: none !important;
  }
  .shopcart-deskpc-prdlst-rwdctl {
    display:flex;
  }
  .shopcart-center-mobile-clength-prdno {
    width:100px;
    text-align:left
  }
  .shopcart-center-mobile-clength-prdnam {
    width:230px;
    text-align:left
  }
  .shopcart-center-mobile-clength-prdqty {
    width:180px;
    text-align:center
  }
  .shopcart-center-mobile-clength-uniprc {
    width:190px;
    text-align:center
  }
  .shopcart-center-mobile-clength-prdamt {
    width:100px;
    text-align:center
  }
  .shopcart-center-mobile-clength-dlvloc {
    display:flex; 
    flex-direction: column; 
    justify-content:flex-start; 
    width:450px
  }
  .shopcart-center-mobile-clength-dlvfee {
    display:flex; 
    justify-content:flex-end; 
    align-items:center; 
    width:340px;
  }
}



/*** order page(Order2.asp, Order1.asp,... ) css. ***/
#order-center-area {
  display: flex; 
  flex-wrap: wrap; 
  width:100%;
  margin-left:auto; 
  margin-right:auto;
  border: 1px solid #D5D5D5
}

#order-center-mobile {
  vertical-align: top;
  width:100%; 
  max-width:850px;
  min-width:340px;
  margin-left:auto; 
  margin-right:auto; 
}

.order-center-mobile-itmlst {
  display:flex;
  justify-content: flex-start;
  width:100%;
  padding-top:3px   
}

.order-center-mobile-itmlst-data {
  width:68%; 
  text-align:left;
  padding-left:2px   
}

.order-center-mobile-check-item {
  display:flex;
  align-items: flex-end; 
  width:98%;
  padding-top:2px;
  padding-bottom:2px;
}

#order-center-tablet {
  vertical-align: top;
  width:320px;
  margin-left:auto; 
  margin-right:auto; 
}

/* Rwd control for center-mobile-container of order page*/
@media only screen and (max-width: 400px) {
  .checkpay-center-mobile-item {
    width:320px; 
    text-align:left; 
    padding:5px; 
    color: #393939;
    border-bottom: 1px solid #E5E5E5;
  }
  .checkpay-center-mobile-item2 {
    display:flex; 
    width:340px; 
    margin-left:auto; 
    margin-right:auto;
    border-bottom: 1px solid #E5E5E5;
  }
}

@media only screen and (max-width: 800px) {
  .order-center-mobile-item {
    margin-left:auto; 
    margin-right:auto; 
    width:100%; 
  }
  .order-center-mobile-itmlst-title {
    text-align:right; 
    width:120px;
    height:40px;    
    line-height:100%  
  }
  .order-center-mobile-itmlst-adrttl {
    text-align:right; 
    width:120px;
    line-height:100%; 
  }
  #checkout-center-mobile {
    margin-left:auto; 
    margin-right:auto; 
    width:340px;
  }
  .checkpay-center-mobile-item {
    width:240px; 
    text-align:left; 
    padding:5px; 
    color: #393939;
  }
  .checkpay-center-mobile-item2 {
    display:flex; 
    width:240px; 
    margin-left:auto; 
    margin-right:auto;
    padding:5px;
  }
  .checkpay-mobile-show-off-only {
    display: none !important;
  }

}
@media only screen and (min-width: 801px) {
  .order-center-mobile-item {
    margin-left:auto; 
    margin-right:auto; 
    width:80%;
  }
  .order-center-mobile-itmlst-title {
    text-align:right; 
    /*width:120px;*/
    width:30%;
    height:40px;
  }
  .order-center-mobile-itmlst-adrttl {
    text-align:right; 
    width:30%;
    /*height:30px */
  }
  #checkout-center-mobile {
    margin-left:auto; 
    margin-right:auto; 
    width:680px;
  }
  .checkpay-center-mobile-item {
    width:240px; 
    text-align:left; 
    padding:5px; 
    color: #393939;
  }
  .checkpay-center-mobile-item2 {
    display:flex; 
    width:240px; 
    margin-left:auto; 
    margin-right:auto;
    padding:5px;
  }
  .checkpay-tablet-show-off-only {
    display: none !important;
  }
}
@media only screen and (min-width: 1190px) {
  .order-endline-show-off-only {
    display: none !important;
  }
  #checkout-center-mobile {
    margin-left:auto; 
    margin-right:auto; 
    width:900px;
  }
  #checkout-center-tablet {
    margin-left:auto; 
    margin-right:auto; 
    width:250px;
  }
  .checkpay-center-mobile-item {
    width:270px; 
    text-align:left; 
    padding:5px; 
    color: #393939;
  }
  .checkpay-center-mobile-item2 {
    display:flex; 
    width:270px; 
    margin-left:auto; 
    margin-right:auto;
    padding:5px;
  }
}






/***  Member page(MbmLogin.asp, MbmMgr.asp) css. ***/
#member-mix-area-save {
    display: table-cell;
    min-width : 320px ;
    max-width : 1020px ;  
    vertical-align: top;
    text-align: center;
}
#member-mix-area {
    justify-content: center;
    min-width : 320px ;
    max-width : 1020px ;  
    vertical-align: top;
    text-align: center;
}

.member-text-area {
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.member-text-area div {
    display: block;
    padding: 0px;
}

#member-center-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;  
    width:100%;
}
#member-center-mobile {
    vertical-align: top;
    text-align:left;   
}
#member-center-tablet {
    margin:1em;
    vertical-align: top;
    text-align:left;
    max-width:500px;    
    display: inline-block;
}
/*** end Member page(MbmLogin.asp, MbmMgr.asp) css. ***/



/* Page foot area css by generate tool for every page in web */
#page-foot-area {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    width:95%;
    margin: auto;
    }

#page-foot-area-idx {
    text-align: center;
    width:100%;
    }

#page-foot-area-contain {
  display:flex; 
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  width : 98% ;
  padding-top:20px;
}
/* end Page foot area css by generate tool for every page in web */