@charset "utf-8";

/* common */
@import url('common.css');

a:hover {
    text-decoration: none !important;
}
/* page-head */
#page-head {
    padding: 0 20px;
    background: #FFF;
    border-bottom: 1px solid #edebeb;
}

#page-head .wrap {
    max-width: 1240px;
    margin: 0 auto;
    line-height: 20px;
}

#page-head .wrap > div:last-child {
    border-bottom: none;
}

/* breadcrumb */
#breadcrumb {
    padding: 15px 0;
    border-bottom: 1px solid #edebeb;
    font-size: 15px;
    color: #000;
}

#breadcrumb a,
#breadcrumb span {
    display: inline-block;
    margin: 0 10px;
}

#breadcrumb a {
    color: #888;
}

#breadcrumb a:hover {
    text-decoration: underline;
}

#breadcrumb .focus {
    padding: 5px 10px;
    background: #dd1229;
    color: #FFF;
}

/* main-title */
#main-title {
    position: relative;
    margin: 20px 0;
    padding: 5px 180px 5px 20px;
    border-left: 4px solid #dd1229;
    font-size: 25px;
    line-height: 30px;
}

#main-title .serial {
    display: block;
    font-size: 14px;
    color: #666;
}



#main-title .originalPriceLogin {

    display: block;

    font-size: 16px;

    color: #666;

    letter-spacing: .5px;

    text-decoration-line: line-through;

}



#main-title .priceLogin {

    position: absolute;

    right: 0;

    top: 50%;

    margin-top: -10px;

    font-size: 35px;

    color: #333;

    font-weight: bold;

}
#main-title .price {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -10px;
    font-size: 35px;
    color: #333;
    font-weight: bold;
}

/* container */
#container {

    padding: 30px 20px;、

    
}

#container .outer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
    max-width: 1240px;
    margin: 0 auto;
}

#container .outer.mem {
    flex-direction: row;
}
#container .inner-left {
    width: 28%;
    margin-right: 2%;
}

#container .inner-left .ad {
    display: block;
    margin-bottom: 30px;
    transition: all .3s;
}

#container .inner-left .ad img {
    display: block;
    width: 100%;
    height: auto;
}

#container .inner-left .ad:hover {
    opacity: .6;
}

#container .inner-right {
    width: 70%;
}

/* article-nav */
#article-nav {
    padding: 0 20px;
    background: #FFF;
    border: 1px solid #edebeb;
}

#article-nav li {
    border-bottom: 1px solid #edebeb;
}

#article-nav li a {
    display: block;
    padding: 20px 0;
    font-size: 18px;
    color: #666;
    transition: all .3s;
}

#article-nav li a:hover {
    text-decoration: underline;
}

/* fill-form */
.member_login .fill-form {
    width: 50%;
    max-width: 100%;
    margin: 0;
    padding: 50px 20px;
}
.member_login .fill-form li {
    margin-bottom: 45px;
}
.member_login ul {
    margin-bottom: 120px;
}
.fill-form {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 20px;
    background: #FFF;
    border: 1px solid #edebeb;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .member_login .fill-form {
        width: 100%;
    }
}

.fill-form > * {
    margin-bottom: 20px;
}

.fill-form > :last-child {
    margin: 0;
}

.fill-form .title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
}

.fill-form li {
    margin-bottom: 40px;
}

.fill-form li span {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    color: #666;
}

.fill-form li input,
.fill-form li select,
.fill-form li textarea {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    background: #FFF;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    color: #666;
    line-height: 36px;
    box-sizing: border-box;
}

.fill-form li select {
    padding-right: 20px;
}

.fill-form li textarea {
    height: 100px;
}

.fill-form li .select {
    position: relative;
}

.fill-form li .select::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 15px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 3px 0 3px;
    border-color: #666 transparent transparent transparent;
}

.fill-form li .select-list {
    display: flex;
    margin-bottom: 10px;
}

.fill-form li .select-list .select {
    width: 100%;
}

.fill-form li .select-list .select.country {
    margin-right: 5px;
}

.fill-form li .select-list .select.dist {
    margin-left: 5px;
}

.fill-form li .option-list {
    display: flex;
    flex-wrap: wrap;
}

.fill-form li .option-list label {
    display: inline-flex;
    align-items: flex-start;
    margin-right: 10px;
    padding: 5px 0;
    font-size: 14px;
    color: #666;
}

.fill-form li .option-list label input[type="radio"],
.fill-form li .option-list label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-right: 3px;
}

.fill-form .note {
    font-size: 14px;
    color: #666;
    line-height: 20px;
}

.fill-form .links {
    font-size: 14px;
    text-align: center;
}

.fill-form .links p {
    margin: 10px 0;
}

.fill-form .links a {
    color: #dd1229;
}

.fill-form .links a:hover {
    text-decoration: underline;
}

.fill-form .links a.fb {
    display: inline-block;
    margin: 5px auto;
    padding: 10px 20px 10px 40px;
    background: url('../images/fb.png') 15px center no-repeat #3b5998;
    border-radius: 5px;
    color: #FFF;
}

.fill-form .first {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.fill-form .first dt {
    display: flex;
    align-items: center;
}

.fill-form .first dt::before,
.fill-form .first dt::after {
    content: "";
    flex-grow: 1;
    display: block;
    height: 1px;
    margin: 0 5px;
    background: #edebeb;
}

.fill-form .first dd p {
    margin-top: 15px;
}

.fill-form .first dd p a {
    display: block;
    padding: 10px;
    border: 1px solid #edebeb;
    color: #666;
    transition: all .3s;
}

.fill-form .first dd p a:hover {
    background: #EEE;
}

/* common-buttons */
.common-buttons {
    text-align: center;
}

.common-buttons button,
.common-buttons a {
    display: block;
    width: 100%;
    margin: 10px 0;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    color: #FFF;
    line-height: 36px;
    transition: all .3s;
}

.common-buttons button:hover,
.common-buttons a:hover {
    opacity: .6;
}

.common-buttons .red {
    background: #dd1229;
}

.common-buttons .grey {
    background: #AAA;
}

/* system-msg */
#system-msg {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 50px;
    background: #000;
    font-size: 18px;
    color: #FFF;
    line-height: 35px;
    text-align: center;
    box-sizing: border-box;
}

#system-msg a {
    color: #dd1229;
}

#system-msg a:hover {
    text-decoration: underline;
}

/* page */
#page {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
}

#page a {
    display: block;
    width: 45px;
    height: 34px;
    margin: 0 7px;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 5px;
    font-size: 13px;
    color: #666;
    line-height: 32px;
    text-align: center;
    box-sizing: border-box;
    transition: all .3s;
}

#page a:hover,
#page a.active {
    border-color: #666;
    color: #333;
}

/* banner */
#banner {
    margin-bottom: 30px;
}

#banner img {
    display: block;
    width: 100%;
    height: auto;
}
.customizePosition {
    position: relative;
}
.bannerCustomizeMainTitle {
    width: 100%;
    padding-left: 20px;
    font-size: 42px;
    font-weight: bold;
    color: #FFF;
    text-shadow: 0 3px 10px #000;
    position: absolute;
    bottom: 10px;
}

@media screen and (max-width: 768px) {
    .bannerCustomizeMainTitle {
        padding-left: 0px;
        text-align: center;
    }
}

.bannerCustomize {
    width: 100%;
    height: auto;
    text-align: center;
}

.bannerCustomizeTitle {
    font-size: 26px;
    line-height: 32px;
    margin-bottom: 10px;
}

.bannerCustomizeSubTitle {
    line-height: 22px;
}

/* filter */
#filter {
    width: 100%;
    margin-bottom: 30px;
}

#filter .wrap {
    display: flex;
}

#filter .wrap li {
    margin-right: 20px;
}

#filter .wrap li:last-child {
    margin: 0;
}

#filter .wrap li span {
    display: block;
    margin-bottom: 5px;
    font-size: 15px;
    color: #666;
}

#filter .wrap li .select {
    position: relative;
    width: 100px;
}

#filter .wrap li .select::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 15px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 3px 0 3px;
    border-color: #666 transparent transparent transparent;
}

#filter .wrap li .select select {
    display: block;
    width: 100%;
    height: 35px;
    padding: 0 20px 0 10px;
    border: 1px solid #CCC;
    font-size: 14px;
    color: #666;
    line-height: 33px;
    box-sizing: border-box;
}

#filter .wrap li .show {
    display: flex;
    padding: 10px;
    background: #FFF;
    border: 1px solid #CCC;
}

#filter .wrap li .show a {
    display: block;
    width: 16px;
    height: 13px;
    background: url('../images/filter.svg') no-repeat;
    background-size: 200% auto;
    text-indent: -9999px;
    opacity: .5;
    transition: all .3s;
}

#filter .wrap li .show a.grid {
    margin-right: 5px;
    background-position: left top;
}

#filter .wrap li .show a.list {
    background-position: right top;
}

#filter .wrap li .show a:hover,
#filter .wrap li .show a.active {
    opacity: 1;
}

/* editor */
.editor {
    font-size: 16px;
    color: #666;
    line-height: 25px;
}

.editor img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.editor ul {
    margin: 20px 0;
    padding-left: 20px;
    list-style: disc;
    font-size: 16px;
    color: #666;
    line-height: 25px;
}

/* product-list */
#product-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#product-list dl {
    width: 24%;
    margin: 0 1.33% 3% 0;
}

#product-list dl:nth-child(4n) {
    margin-right: 0;
}

#product-list dt {
    margin-bottom: 10px;
    background: #FFF;
    border: 1px solid #CCC;
}

#product-list dt a {
    position: relative;
    display: block;
    padding-bottom: 140%;
}

#product-list dt a img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: auto;
    max-width: 70%;
    height: auto;
    max-height: 100%;
    margin: auto;
    transition: all .3s;
}

#product-list dt a .tagCustomize {
    position: absolute;
    right: 0;
    padding: 5px;
    background: #000;
    font-size: 15px;
    color: #FFF;
}

#product-list dt a .tagCustomize.t1 {
    top: 10px;
}

#product-list dt a .tagCustomize.t2 {
    top: 40px;
}

#product-list dt a .tag {
    position: absolute;
    left: 0;
    padding: 5px;
    background: #dd1229;
    font-size: 15px;
    color: #FFF;
}

#product-list dt a .tag.t1 {
    top: 10px;
}

#product-list dt a .tag.t2 {
    top: 40px;
}

#product-list dt a .tag.t3 {
    top: 70px;
}

#product-list dt a:hover img {
    opacity: .6;
}

#product-list dl.soldout dt a b {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    padding: 0 5px;
    background: #000;
    border-radius: 50%;
    font-size: 15px;
    color: #FFF;
    line-height: 50px;
    text-align: center;
    box-sizing: border-box;
}

#product-list dd .title {
    margin-bottom: 5px;
    height: 50px;
    overflow: hidden;
}

#product-list dd .title a {
    font-size: 18px;
    color: #333;
    line-height: 25px;
    transition: all .3s;
}

#product-list dd .title a:hover {
    color: #666;
}

#product-list dd .price {
    margin-bottom: 10px;
    font-size: 16px;
    color: #666;
    letter-spacing: .5px;
}

#product-list dd .more {
    display: block;
    background: #dd1229;
    border-radius: 3px;
    font-size: 15px;
    text-align: center;
    color: #FFF;
    line-height: 32px;
    transition: all .3s;
}

#product-list dd .more::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    background: url('../images/fire.png');
    background-size: 100% auto;
}

#product-list dd .more:hover {
    opacity: .6;
}

/* product-info */
#product-info {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    background: #FFF;
    border: 1px solid #edebeb;
    overflow: hidden;
    box-sizing: border-box;
}

#product-info .wrap {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #edebeb;
    overflow: hidden;
}

#product-info .wrap .img-show {
    float: left;
    display: flex;
    flex-direction: row-reverse;
    width: 48%;
}

#product-info .wrap .img-show img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#product-info .wrap .img-show .big-img {
    width: 442px;
    height: 442px;
    padding: 20px;
    background: #FFF;
    border: 1px solid #CCC;
    box-sizing: border-box;
    position: relative;
}
@media screen and (max-width: 768px) {
    #product-info .wrap .img-show .big-img {
        width: 100%;
    }
}

#product-info .wrap .img-show .big-img .fancybox {
    display: none;
}

#product-info .wrap .img-show .big-img .fancybox.active {
    display: block;
}

#product-info .wrap .img-show .big-img .fancybox img {
    /* max-width: 400px; */
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#product-info .wrap .img-show .small-img {
    margin-right: 10px;
}

#product-info .wrap .img-show .small-img li {
    width: 88px;
    height: 88px;
    margin-bottom: 10px;
    padding: 10px;
    background: #FFF;
    border: 1px solid #CCC;
    cursor: pointer;
    box-sizing: border-box;
    transition: all .3s;
    position: relative;
}

#product-info .wrap .img-show .small-img li:last-child {
    margin: 10px 0 0 0;
}

#product-info .wrap .img-show .small-img li:hover,
#product-info .wrap .img-show .small-img li.active {
    border-color: #000;
}

#product-info .wrap .img-show .small-img li img {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#product-info .wrap .info {
    float: right;
    width: 48%;
}

#product-info .wrap .info .checkout {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

#product-info .wrap .info .checkout span {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    font-size: 12px;
    color: #666;
}

#product-info .wrap .info .checkout input {
    display: inline-block;
    width: 75px;
    padding: 10px 10px 10px 10px;
    background: #FFF;
    border: 1px solid #CCC;
    border-radius: 3px;
    font-size: 12px;
    color: #666;
    box-sizing: border-box;
}

#product-info .wrap .info .checkout .addcart {
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 0 20px;
    background: #dd1229;
    border-radius: 3px;
    font-size: 15px;
    text-align: center;
    color: #FFF;
    line-height: 32px;
    transition: all .3s;
}

.addcart_noFlame {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 10px;
    padding: 0 20px;
    background: #dd1229;
    border-radius: 3px;
    font-size: 15px;
    text-align: center;
    color: #FFF;
    line-height: 32px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

#product-info .wrap .info .checkout .addcart::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    background: url('../images/fire.png');
    background-size: 100% auto;
}

#product-info .wrap .info .checkout .addcart:hover {
    opacity: .6;
}

#product-info .wrap .info .symblo img {
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
}

#product-info .wrap .info .symblo img.voice {
    cursor: pointer;
}

/* -------------------------------customize-engrave */
.customizeEngrave {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  
  @media screen and (max-width: 768px) {
    .customizeEngrave {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
    }
  }
  
  .customizeGuide {
    width: 7.5%;
    height: auto;
    padding-left: 20px;
  }
  
  @media screen and (max-width: 768px) {
    .customizeGuide {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
    }
  }
  
  .customizeGuideSelect {
    margin-bottom: 20px;
    border: 1px solid #333;
    cursor: pointer;
  }
  
  .customizeGuideSelect.active {
    border: 1px solid #dd1229;
  }
  
  .customizeGuideSelect img {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  @media screen and (max-width: 768px) {
    .customizeGuideSelect {
      width: 15%;
      margin-right: 20px;
    }
    .customizeGuideSelect img {
      width: 100%;
    }
  }
  
  .customizeGuideSelect p {
    padding: 5px;
    text-align: center;
    color: #FFF;
    background-color: #333;
  }
  
  .customizeGuideSelect.active p {
    background-color: #dd1229;
  }
  
  .customizeProduct {
    width: 48%;
    height: 560px;
    background-image: url("../images/upload/product_list_17_front.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
    position: relative;
  }
  
  @media screen and (max-width: 768px) {
    .customizeProduct {
      width: 100%;
    }
  }
  
  .customizeProduct input {
    width: 42%;
    height: 8%;
    font-family: Times;
    font-size: 40px;
    text-align: center;
    background-color: #a8cee8;
    border: none;
    display: block;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .customizeProduct input:focus {
    border: 1px solid #333;
  }
  
  .customizeProduct_t {
    top: 30%;
  }
  
  .customizeProduct_b {
    top: 50%;
  }
  
  .customizeDetail {
    width: 44.5%;
    height: auto;
  }
  
  @media screen and (max-width: 768px) {
    .customizeDetail {
      width: 100%;
    }
  }
  
  .customizeSelectList {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #edebeb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .customizeSelectList_title {
    margin-bottom: 20px;
    padding-left: 20px;
    border-left: 4px solid #dd1229;
  }
  
  .customizeSelectList_title h3 {
    font-size: 20px;
    font-weight: bold;
  }
  
  .customizeSelectList_items {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  
  .customizeSelectList > ul > li {
    width: 12.5%;
    height: auto;
  }
  
  .customizeSelectItem {
    width: 100%;
    height: auto;
    padding-bottom: 100%;
    background: #fff;
    border: 1px solid #dd1229;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
  }
  
  .customizeSelectItem::before {
    content: '\f058';
    font-family: "fontawesome";
    font-size: 20px;
    color: #dd1229;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .customizeSelectItem img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .customizeToolkit {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .customizeToolkit h3 {
    padding: 18px 20px;
    color: #FFF;
    background-color: #1b1b1b;
    border-bottom: 1px solid #666;
  }
  
  .engrave {
    margin-bottom: 10px;
    padding: 0;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    cursor: pointer;
  }
  
  .engraveMenu {
    width: 100%;
  }
  
  .engrave h4 {
    width: 100%;
    padding: 21px;
    color: #666666;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
  }
  
  .engrave h4::after {
    content: '\f107';
    font-family: "fontawesome";
    font-size: 16px;
    color: #666666;
    position: absolute;
    right: 20px;
  }
  
  .engrave li {
    margin-bottom: 10px;
    border: 1px solid #edebeb;
  }
  
  .engraveDropdown {
    width: 100%;
    height: auto;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
  }
  
  .engraveDropdown h5 {
    padding: 5px;
    font-size: 16px;
    color: #666;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .engraveInput {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  
  .engraveInput input {
    background-color: white;
    cursor: text;
  }
    
  .engraveInput input:focus {
    border-color: #93b0ee;
  }
  
  .customizeFront {
    display: inline-block;
  }

  .customizeBack {
    display: none;
  }

  .max16 {
    padding-top: 3px;
    font-size: 14px;
    color: #666;
    display: block;
  }
  
  .engrave select {
    padding: 10px 25px 10px 10px;
    border-color: #edebeb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  .engrave select::-ms-expand {
    display: none;
  }
  
  .engravePrice {
    width: 100%;
    height: auto;
    padding: 20px;
    border: 1px solid #edebeb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .engravePrice_title {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edebeb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  
  .engravePrice_title .left {
    width: 50%;
    color: #666;
  }
  
  .engravePrice_title .right {
    width: 50%;
    text-align: end;
    color: #666;
  }
  
  .engravePrice_buy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  
  .engravePrice_qty {
    width: 33.3333%;
    height: auto;
  }
  
  .engravePrice_qty > span {
    color: #666;
    display: block;
  }
  
  .engravePrice_qty > input {
    max-width: 100%;
    max-height: 36px;
    padding: 10px;
    font-size: 14px;
    text-transform: none;
    color: #666;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .engravePrice_buyBtn {
    width: 33.3333%;
    height: auto;
    padding-left: 20px;
  }
  
  .engravePrice_buyBtn > button {
    padding: 10px 20px;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background-color: #dd1229;
    border: 0;
    border-radius: 3px;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  .customizeOrder {
    width: 50%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  @media screen and (max-width: 768px) {
    .customizeOrder {
      width: 100%;
    }
  }
  
  .customizeOrder > h2, .customizeOrderDetail > h2 {
    width: 100%;
    height: auto;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
  }
  
  .customizeOrderImg {
    width: 100%;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  
  .productImg {
    width: 50%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: relative;
  }
  
  @media screen and (max-width: 1000px) {
    .productImg {
      height: 300px;
    }
  }
  
  .productfront {
    background-image: url("../images/upload/product_list_17_front.jpg");
  }
  
  .productback {
    background-image: url("../images/upload/product_list_17_back.jpg");
  }
  
  .customizeOrderInput {
    width: 50%;
    height: 10%;
    background-color: #a8cee8;
    border: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  
  .inputTop {
    top: 32%;
  }
  
  .inputBottom {
    top: 52%;
  }
  
  @media screen and (max-width: 1000px) {
    .customizeOrderInput {
      width: 50%;
      height: 8%;
    }
    .inputTop {
      top: 34%;
    }
    .inputBottom {
      top: 54%;
    }
  }
  
  @media screen and (max-width: 768px) {
    .customizeOrderInput {
      width: 45%;
      height: 10%;
    }
    .inputTop {
      top: 34%;
    }
    .inputBottom {
      top: 54%;
    }
  }
  
  @media screen and (max-width: 480px) {
    .customizeOrderInput {
      width: 48%;
      height: 7%;
      font-size: 0.5rem;
    }
    .inputTop {
      top: 38%;
    }
    .inputBottom {
      top: 54%;
    }
  }
  
  .customizeOrderDetail {
    width: 50%;
    height: auto;
  }
  
  @media screen and (max-width: 768px) {
    .customizeOrderDetail {
      width: 100%;
    }
  }
  
  .customizeOrderWarning {
    width: 100%;
    padding: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
    color: #666;
    border: 2px solid #dd1229;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .customizeOrderConfirm {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding: 20px;
    border: 1px solid #edebeb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  
  @media screen and (max-width: 480px) {
    .customizeOrderConfirm {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    .customizeOrderConfirm button, .customizeOrderConfirm input {
      margin-bottom: 10px;
    }
  }

  .customizeOrderConfirm button {
    width: 32%;
    height: 36px;
    padding: 10px 0;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background-color: #dd1229;
    border: 0;
    border-radius: 3px;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
  }
  
  .customizeOrderConfirm input {
    width: 32%;
    height: 36px;
    padding-left: 10px;
    font-size: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
  }
  
  .verify {
    width: 32%;
  }
  
  .verify img {
    width: 100%;
    height: 36px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
  }
  
  .customizeOrderInfo {
    width: 100%;
    padding: 20px;
    margin-bottom: 10px;
    border: 1px solid #edebeb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .customizeOrderInfo h3 {
    padding: 10px 0;
    font-size: 16px;
    color: #666;
  }
  
  .customizeOrderInfo input {
    width: 100%;
    height: 36px;
    padding-left: 10px;
    font-size: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .customizeOrderBank {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding: 20px;
    border: 1px solid #edebeb;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .customizeOrderBank h3 {
    padding-bottom: 10px;
    font-size: 18px;
    color: #666;
  }
  
  .customizeOrderBankInfo {
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
    color: #666;
  }
  

/* -------------------------------customize-engrave */

/* article-list */
#article-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#article-list dl {
    width: 48%;
    margin-bottom: 70px;
}

#article-list dt {
    margin-bottom: 25px;
    padding-left: 20px;
    border-left: 2px solid #CCC;
}

#article-list dt a {
    font-size: 26px;
    color: #333;
    transition: all .3s;
}

#article-list dt a:hover {
    color: #dd1229;
    text-decoration: underline;
}

#article-list dd {
    font-size: 16px;
    color: #666;
    line-height: 25px;
}

#article-list dd a {
    color: #dd1229;
}

#article-list dd a:hover {
    text-decoration: underline;
}

.engraveTip {
    margin-top: 10px;
    padding: 20px;
    background: #fff;
    border: 1px solid #edebeb;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.engraveTip_title {
    padding-left: 20px;
    border-left: 4px solid #dd1229;
    display: inline-block;
    box-sizing: border-box;
}

.engraveTip_title p {
    font-size: 22px;
    font-weight: bold;
    line-height: 36px;
    font-style: italic;
}

.engraveTip > a {
    padding: 10px 20px;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: #dd1229;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
}



/* data-list */
.data-list {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #FFF;
    font-size: 14px;
    color: #666;
}

.data-list table {
    width: 100%;
}

.data-list thead,
.data-list tfoot {
    background: #f1f1f1;
    color: #000;
    font-weight: bold;
}

.data-list tr {
    border-bottom: 1px solid #dedede;
}

.data-list td {
    padding: 20px;
}

.data-list td a {
    display: inline-block;
    color: #666;
    transition: all .3s;
}

.data-list td a.del {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
}

.data-list td a.del::before,
.data-list td a.del::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 20px;
    height: 2px;
    margin-top: -1px;
    background: #999;
}

.data-list td a.del::before {
    transform: rotate(45deg);
}

.data-list td a.del::after {
    transform: rotate(-45deg);
}

.data-list td a img {
    display: block;
    width: 100%;
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.data-list td a:hover {
    opacity: .6;
}

.data-list td input,
.data-list td select {
    display: block;
    width: 100px;
    height: 36px;
    padding: 0 10px;
    background: #FFF;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    color: #666;
    line-height: 36px;
    text-align: center;
    box-sizing: border-box;
}

.data-list td .select {
    position: relative;
}

.data-list td .select::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 15px;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 3px 0 3px;
    border-color: #666 transparent transparent transparent;
}

.data-list td .select select {
    width: 100%;
    padding-right: 20px;
}

.data-list .common-buttons {
    padding: 30px 0;
    text-align: center;
}

.data-list .common-buttons a,
.data-list .common-buttons button {
    display: inline-block;
    width: 100%;
    max-width: 200px;
    margin: 5px;
}

/* news-list */
#news-list {
    width: 100%;
}

#news-list dl {
    margin-bottom: 40px;
}

#news-list dl:last-child {
    margin: 0;
}

#news-list dt {
    margin-bottom: 30px;
    font-size: 30px;
    color: #dd1229;
}

#news-list dd .wrap li {
    margin-bottom: 30px;
}

#news-list dd .wrap li:last-child {
    margin: 0;
}

#news-list dd .wrap li .title {
    font-size: 24px;
    color: #666;
    transition: all .3s;
}

#news-list dd .wrap li .title:hover {
    color: #dd1229;
}

#news-list dd .wrap li p {
    margin: 15px 0 0 15px;
    padding-left: 15px;
    border-left: 2px solid #CCC;
    font-size: 14px;
    color: #666;
    line-height: 30px;
}

/* news-info */
#news-info .title {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #CCC;
    font-size: 24px;
    color: #dd1229;
}

/* sitemap */
#sitemap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#sitemap dl {
    width: 25%;
    margin-bottom: 70px;
}

#sitemap dt {
    margin-bottom: 25px;
    padding-left: 20px;
    border-left: 2px solid #CCC;
    font-size: 26px;
    color: #333;
}

#sitemap dd a {
    font-size: 16px;
    color: #dd1229;
    line-height: 25px;
}

#sitemap dd a:hover {
    text-decoration: underline;
}

/* RWD */
@media screen and (max-width: 1000px) {

    /* container */
    #container {
        padding: 20px;
    }

    #container .outer {
        /* display: block; */
    }

    #container .inner-left {
        width: 100%;
        margin: 0;
    }

    #container .inner-left .ad {
        display: none;
    }

    #container .inner-right {
        width: 100%;
    }

}

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

    /* product-list */
    #product-list dl {
        width: 49%;
        margin: 0 2% 2% 0;
    }

    #product-list dl:nth-child(3n) {
        margin-right: 2%;
    }

    #product-list dl:nth-child(2n) {
        margin-right: 0;
    }

    /* product-info */
    #product-info .wrap .img-show,
    #product-info .wrap .info {
        float:none;
        width: 100%;
    }

    #product-info .wrap .img-show {
        display: block;
        margin-bottom: 50px;
    }

    #product-info .wrap .img-show .big-img {
        margin-bottom: 10px;
    }
    
    #product-info .wrap .img-show .small-img {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0 0 0;
    }

    #product-info .wrap .img-show .small-img li {
        /* float: left; */
        width: 24%;
        margin: 10px 1% 0 0;
    }

    /* article-list */
    #article-list dl {
        width: 100%;
    }

    /* sitemap */
    #sitemap dl {
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    
    /* main-title */
    #main-title {
        padding: 5px 20px;
    }

    #main-title .priceLogin {

        position: static;

    }
    #main-title .price {
        position: static;
        display: block;
        margin-top: 5px;
        font-size: 30px;
    }

    /* filter */
    #filter .wrap {
        display: block;
    }

    #filter .wrap li {
        margin: 0 0 10px 0;
    }

    #filter .wrap li .select {
        width: 100%;
    }

    /* product-list */
    #product-list {
        display: block;
    }

    #product-list dl {
        width: 100%;
        margin: 0 auto 20px auto !important;
    }

    /* data-list */
    .data-list thead {
        display: none;
    }

    .data-list tbody tr {
        position: relative;
        display: block;
        padding: 20px 0;
    }

    .data-list td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .data-list tbody td {
        margin: 20px 0;
        padding: 0;
        text-align: center;
    }

    .data-list td a {
        display: block;
    }

    .data-list td a img {
        max-width: none;
        margin-bottom: 20px;
    }

    .data-list td input {
        margin: 0 auto;
    }

    .data-list td a.del {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    .data-list tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .data-list tfoot td {
        padding: 20px 10px;
    }

    .data-list tfoot td:first-child {
        width: 130px;
    }

    /* sitemap */
    #sitemap dl {
        width: 100%;
    }
}
.table tr {
    border: none !important;
}
.table tr:first-of-type th {
    background-color: #f1f1f1 !important;
}
.table tr:nth-of-type(2n - 1) td {
    background-color: #F6F6F6;
}
.table tr th {
    font-size: 15px;
    font-weight: bold;
    border: none !important;
    padding: 10px 20px;
}
.table tr td {
    vertical-align: middle;
    border: none !important;
    padding: 10px 20px;
}
.table tr td a{
    font-size: 15px;
    color: #551A8B;
}
.regis_login {
    width: 50%;
    padding: 0 30px 30px;
}
.regis_login h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 24px;
    letter-spacing: 2px;
    font-weight: bold;
    line-height: 30px;
    color: #5a5a5a;
    font-family: "Microsoft Jheng Hei Regular";
    margin-bottom: 30px;
}
.regis_login h3::before {
    content: "";
    display: block;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    background: url('../images/bighead.png');
    background-repeat: no-repeat;
    background-size: 35px;
    background-position: center;
}
.regis_login p {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 22px;
    color: #5a5a5a;
}
.regis_login strong {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 30px;
    color: #d8262c;
    margin-bottom: 10px;
}
.regis_login strong::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background: url('../images/voice.svg');
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
}
.regis_login a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 52px;
    color: #fff;
    border-radius: 10px;
    margin: 0 2px;
}
.regis_login a:first-of-type {
    margin-left: 0;
}
.regis_login .regis_log {background-color: #000;}
.regis_login .regis_fb {background-color: #3a5ca9;}
.regis_login .regis_line {background-color: #07bb04;}
.regis_login .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: 50px;
}
.discount {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 30px;
}
.discount img {
    margin-right: 10px;
}
.discount p {
    font-size: 14px;
    line-height: 36px;
    margin-right: 10px;
    color: #9d1919;
}
.discount a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 30px;
    color: #fff;
    margin-right: 50px;
    border-radius: 5px;
    background-color: #d8262c;
}
.discount input {
    width: 100%;
    max-width: 360px;
    margin-right: 30px;
}
.warning_info {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 20px;
    width: 100%;
    max-width: 1030px;
    min-height: 100px;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #f1f1f1;
}
.warning_info img {
    display: block;
    margin-right: 30px;
}
.warning_info p {
    font-size: 14px;
    line-height: 24px;
    color: #010101;
}
.plus_cart {
    margin-top: 30px;
}
.plus_cart .pc-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.plus_cart h3 {
    width: 100%;
    font-size: 18px;
    line-height: 23px;
    font-weight: bold;
    color: #c81616;
    border-bottom: 2px solid #c81616;
    margin-bottom: 30px;
}
.plus_cart .pc-wrap .block {
    width: 100%;
    max-width: 280px;
    /* margin-right: 15px; */
    margin: 0 7.5px;
    margin-bottom: 20px;
}
/* .plus_cart .pc-wrap .block:nth-of-type(4n) {
    margin-right: 0;
} */
.plus_cart .pc-wrap .block  span{
    display: block;
    
}
.plus_cart .pc-wrap .block  a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    color: #fff;
    background-color: #ef1b20;
    border-radius: 5px;
}
.plus_cart .pc-wrap .block  .pcp {
    position: relative;
    width: 100%;
    
}
.plus_cart .pc-wrap .block  .pcp .label {
    position: absolute;
    left: 0;
    top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.plus_cart .pc-wrap .block  .pcp .label  strong {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 25px;
    color: #fff;
    font-weight: normal;
    background-color: #ef1b20;
    margin-bottom: 5px;
}
.plus_cart .pc-wrap .block p {
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    height: 40px;
    margin-bottom: 5px;
    color: #000;
}
.plus_cart .pc-wrap .block s {
    color: rgb(80, 80, 80);
    display: block;
    margin-bottom: 5px;
}
.plus_cart .pc-wrap .block span {
    display: block;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 23px;
    color: #a31616;
    margin-bottom: 5px;
}
.plus_cart .pc-wrap .block  .pcp img {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    object-fit: contain;
}
.total_price .tp {
    padding: 20px 0;
    border: 1px solid #000;
    margin-bottom: 20px;
}
.total_price .tp .t1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    border-bottom: 1px solid rgb(163, 163, 163);
    margin-bottom: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
}
.total_price .tp .t2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
}
.total_price .tp .t1 p { 
    font-size: 14px;
    line-height: 30px;
    color: #565656;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.total_price .tp .t1 p span {
    display: block;
    width: 100px;
    text-align: right;
}
.total_price .tp .t2 p span {
    display: block;
    width: 100px;
    text-align: right;
}
.total_price .tp .t2 p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 30px;
    color: #565656;
}
.neworder .tabcontent {
    display: none;
}
.neworder .tab {
    display: flex;
    margin-bottom: 30px;
    /* overflow: auto; */
}
.neworder .tab button {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    border: none;
    padding: 20px;
    padding-bottom: 10px;
    background-color: #fff;
    border-bottom: 2px solid #c8c8c8;
    transition-duration: .3s;
    min-width: 120px;
}
.neworder .tab button.active {
    font-weight: bold;
    border-bottom: 2px solid #0f7ce1;
}
.neworder .tab button:last-of-type {
    pointer-events: none;
    width: 100%;
    flex-shrink: 1;
}
.neworder .n_myorder h3 {
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    line-height: 30px;
    color: #333333;
    margin-bottom: 10px;
}
.neworder .n_myorder h3::before {
    display: none;
}
.neworder .n_myorder p {
    font-size: 16px;
    letter-spacing: 2px;
    color: #333333;
    margin-bottom: 30px;
}
.n_detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 15px;
}
.n_detail div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 50px;
}
.n_detail p {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 24px;
    color: #000000;
}
.n_detail a {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 24px;
}
.n_totalcount {
    margin-bottom: 30px;
}
.neworder .tabcontent  li {
    position: relative;
    margin-bottom: 30px;
    border-bottom: 1px dashed #000;
}
.neworder .tabcontent .more {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 30px;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 19px;
    color: #3e3e3e;
}
.neworder .tabcontent .more img {
    margin-left: 5px;
}
.n_order {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: auto;
    margin-bottom: 30px;
    width: 100%;
    max-width: 1050px;
    flex-wrap: wrap;
}
.n_order img {
    display: block;
    width: 100%;
    max-width: 205px;
    height: 205px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 20px;
}
.n_order img:last-of-type {
    margin-right: 0;
}
.n_page {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 30px;
}
.n_page p {
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 30px;
    margin-right: 10px;
    color: #8a8a8a;
}
.n_page a img {
    display: block;
    margin-right: 5px;
}
.n_page select {
    display: block;
    width: 100px;
    height: 30px;
    margin-right: 10px;
    border: 1px solid #d3d3d3;
    background-color: #f6f6f6;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 30px;
    color: #1f1f1f;
    padding: 0 5px 0;
    /* background-image: url(../images/down.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right; */
}
.odt th:first-of-type {
    width: 100px;
}
.odt th.nright{
    text-align: right;  
}
.odt td p {
    font-size: 15px;
    color: #551A8B;  
}
.od_detail ul {
    padding-top: 10px;
    padding-left: 20px;
    margin-bottom: 20px;
}
.od_detail ul li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 20px;
}
.od_detail ul.firstp li p:first-of-type{
    width: 100%;
    max-width: 120px;
}
.od_detail ul.secondp li p {
    margin-left: 130px;
    font-weight: bold;
}
.od_detail ul h3 {
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 30px;
    font-weight: bold;
    color: #2d2d2d;
}
.od_detail ul li.break {
    flex-wrap: wrap;
}
.od_detail ul li p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 30px;
    color: #2d2d2d;
    margin-right: 10px;
}
.od_detail ul li p a {
    display: block;
    margin-left: 5px;
    color: #1a87b0;
}
.od_detail ul li span{
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 30px;
    color: #808080;
    width: 100%;
    max-width: 100px;
}
.od_detail ul li.timewrap p {
    width: 100%;
    max-width: 220px;
}
.n_confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.n_confirm img {
    display: block;
    margin-bottom: 20px;
}
.n_confirm h4 {
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 30px;
    color: #d8262c;
    margin-bottom: 10px;
}
.n_confirm h3 {
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 36px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
}
.n_confirm p {
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 36px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
    text-align: center;
}
.n_confirm span {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 36px;
    color: #000000;
    margin-bottom: 15px;
}
.n_warning {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 30px 50px;
    background-color: #e9e9e9;
    padding-top: 30px;
    margin-bottom: 100px;
}
.n_warning p {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 36px;
    color: #393939;
}
.order_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
}
.order_title .ot_group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    margin-top: 20px;
}
.order_title p {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 24px;
    color: #000000;
    font-weight: bold;
    margin-right: 30px;
    flex-shrink: 0;
}
.order_title p.otlp {
    width: 100%;
    text-align: right;
    flex-shrink: 1;
    margin-top: 20px;
}
.order_title p a {
    color: #1a87b0;
    text-decoration: none;
    margin-right: 0;
}
.order_title a {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 24px;
    /* text-decoration: underline; */
    margin-right: 30px;
    flex-shrink: 0;
}
.order_title a.print {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 3px 5px;
    border: 1px solid #4a88cf;
    color: #4a88cf;
}
.order_title a.print.cancel {
    display: flex;
    align-items: center;
    line-height: 24px;
    justify-content: center;
    border: 1px solid #dd1128;
    color: #dd1128;
}
.order_title a.print::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background: url(../images/print.png);
	background-size: auto 30px;
    background-repeat: no-repeat;
    background-position: -6px center;
	transition: .3s all;
}
.order_title a.print.cancel::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url(../images/1631870773941.png);
	background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
	transition: .3s all;
}
.n_addcart:hover {
    opacity: 0.6;
    transition: .3s all;
}
.megaorder {
    display: none !important;
}
#CVSPaymentNo {
    /* font-size: 14px !important; */
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    width: 140px !important;
}
.od_state {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px;
}
.od_state h2 {
    font-size: 22px;
    font-weight: bold;
    color: #4a88cf;
}
.od_state p {
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 24px;
    color: #000000;
    font-weight: bold;
    margin-right: 5px;
    flex-shrink: 0;
}
.od_state h2.ods_red {
    color: #dd1128;
}
.function.mega.disapear {
    display: none;
}
.scrollbar-outer>.scroll-element, .scrollbar-outer>.scroll-element div {
    z-index: 5 !important;
}
@media screen and (max-width: 1220px) {
    .plus_cart .pc-wrap .block {
        width: calc((100% - 45px) / 3);
        max-width: initial;
    }
}
@media screen and (max-width: 1000px) {
    .function.mega.disapear {
        display: block;
    }
    #page-head {
        margin-top: 70px;
    }
    .neworder .tabcontent .more {
        position: relative;
        top: initial;
        right: initial;
        transform: translateY(0);
    }
    .od_detail ul {
        padding-left: 0;
    }
    .od_detail ul.firstp li p:first-of-type{
        width: 100%;
        max-width: 80px;
    }
    .megaorder {
        display: block !important;
    }
    
}
@media screen and (max-width: 910px) {
    .order_title { 
        flex-wrap: wrap;
    }
    .order_title p.otlp {
        text-align: left;
        float: initial;
    }
}
@media screen and (max-width: 768px) {
    .regis_login {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .regis_login .btn-wrap {
        order: -1;
        margin-top: 0;
        margin-bottom: 30px;
        flex-direction: column;
    }
    .regis_login a { 
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
    }
    .plus_cart .pc-wrap {
        flex-wrap: wrap;
        justify-content: center;
    }
    .plus_cart .pc-wrap .block {
        width: calc((100% - 30px) / 2);
        max-width: initial;
    }
    /* .plus_cart .pc-wrap .block:nth-of-type(2n) {
        margin-right: 0;
    } */
    .od_detail ul.secondp li p {
        margin-left: 0;
    }
    .neworder .tab {
        flex-wrap: wrap;
    }
    .neworder .tab button:last-of-type {
        display: none;
    }
}
@media screen and (max-width: 621px) {
    .order_title .ot_group.o3 {
        order: 3;
    }
}
@media screen and (max-width: 576px) {
    .n_order a {
        width: 50%;
    }
}
@media screen and (max-width: 500px) {
    .plus_cart .pc-wrap {
        flex-direction: column;
    }
    .plus_cart .pc-wrap .block {
        width: 100%;
        max-width: auto;
        margin: 0;
        /* margin-right: 0; */
    }
}